tecnologias para apresenta ão de dados - html de sistemas na... · uma linguagem de marcação...
TRANSCRIPT
![Page 1: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/1.jpg)
Tecnologias para apresentação de dados - HTML
Aécio Costa
![Page 2: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/2.jpg)
Apresentação de Dados na Web
Tecnologias client-side
HTML CSS JavaScript
![Page 3: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/3.jpg)
HTMLHyperText Markup Language
Uma linguagem de marcação utilizada para produzir páginas na Web; Documentos HTML podem ser interpretados por navegadores; Documentos HTML são formados por Tags; Documentos em HTML são arquivos de texto simples que podem
ser criados e editados em qualquer editor de textos comum.
![Page 4: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/4.jpg)
HTMLCaracterísticas
As tags HTML permitem que o leitor de uma p á gina Web envie informações ao servidor atravé s de componentes grá ficos como botões, caixas de checagem, caixas de texto etc.;
A pá gina constru í da em HTML é transferida do servidor para o computador do usu á rio, onde o browser faz o trabalho de interpretar os códigos naquele documento e mostrar a página final que o usuário vê.
![Page 5: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/5.jpg)
HTML
Requisitos para a construção de uma página WEB:
Conhecer a linguagem HTML para escrever o código fonte de sua página;
Editor de texto para gerar o seu c ó digo fonte (bloco de notas, notepad ++, Dremweaver, Eclipse e outros);
Um navegador de internet (browser) para visualizar as suas páginas, tais como: Internet Explorer, Firefox, Netscape, etc.
![Page 6: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/6.jpg)
6
HTMLTAGs
Os comandos HTML s ã o chamados de TAGs, compreendem de marcas padrões que são utilizadas para fazer indicações ao Browser. Assim como em outras linguagens, os comandos têm uma sintaxe própria, e seguem algumas regras:
As tags aparecem sempre entre sinais de “menor que” (<) e “maior que” (>);
Geralmente são utilizadas aos pares, sendo que a TAG de finalização de um comando qualquer é finalizada com a precedência de uma barra (/).
![Page 7: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/7.jpg)
HTMLEm geral:
<nome da TAG> conteúdo </nome da TAG>
Onde:<nome da TAG>: indica o início da TAG</nome da TAG>: indica o fim da TAG
Tag única<br>
Tag dupla<center> conteúdo </center>
![Page 8: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/8.jpg)
HTML
Uma página Web criada em HTML, possui três partes básicas: estrutura principal, um cabeçalho e um corpo de página.
Possui uma estrutura dividida em 4 TAGs básicas:
<html> … </html><head> … </head><title> … </title><body> … </body>
![Page 9: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/9.jpg)
HTML
<html> … </html>
São usados para delimitar os comandos HTML, indicam o início e o fim de um documento. O browser reconhece a TAG <html> e identifica que o documento que virá à seguir deve ser interpretado como HTML.
![Page 10: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/10.jpg)
HTML
<head> … </head>Delimitam a seção do cabeçalho do documento onde serão definidos
poucos comandos de linguagem, o mais importante é o título que é exibido na barra de títulos do browser ao fazer sites em html.
<title> … </title>Definem o t í tulo da página que pé exibido na barra de t í tulos do
browser. Esta TAG deve estar sempre dentro das TAGs <head></head>
![Page 11: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/11.jpg)
HTML
<body> … </body>
Dentro desta TAG est ã o os elementos da p á gina web. É onde estão localizados os textos, imagens, ligações com outras páginas, etc.;
![Page 12: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/12.jpg)
HTML
No final teremos:
<html><head><title>Minha Primeira Página</title></head><body> Aprendendo HTML</body></html>
![Page 13: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/13.jpg)
13
HTML
Atributos em TAGs
TAG ’ s HTML podem ter atributos que prov ê m informa ç ões adicionais sobre o elemento, podendo definir comportamentos ou simplesmente identificando-os.
Os atributos são colocados em elementos utilizando o par chave/valor:
name=“value”
![Page 14: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/14.jpg)
HTML
Atributos em TAGs - Exemplo
Outro atributo para TAG body é background que deve apontar para uma imagem:
<body bgcolor="green"> </body>
<body background="imagem.png"> </body>
![Page 15: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/15.jpg)
HTML
Headings
Servem para definir títulos e subtítulos e são importantes em HTML podendo ser <h1> até <h6>.
<h1>Texto 1</h1><h2>Texto 2</h2><h3>Texto 3</h3>
![Page 16: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/16.jpg)
HTMLEstilos em Textos
Tag Descrição
<p> Define um parágrafo
<b> Aplica Negrito
<i> Aplica Itálico
<u> Aplica sublinhado
<sub> Aplica subscrito
<sup> Aplica sobrescrito
<center> Centraliza o texto
<pre> Define a formatação do Texto
![Page 17: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/17.jpg)
17
HTMLFontes
Para definir fontes, tamanho e cores de textos utilizamos a TAG <font>.<font size="10" face="Tahoma" color="red">
Texto Customizado</font>
Atributo Descrição
size Tamanho que varia de 1 a 7, sendo 3 valor default
face Nome da fonte
color Cor da fonte, podendo ser indicada em haxadecimal
![Page 18: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/18.jpg)
HTML
Quebra de Linha
Para quebras de linha em páginas HTML utlizamos a tag <br>.
Primeira Linha<br>Segunda Linha
![Page 19: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/19.jpg)
HTMLLinhas HTML
Para criar linhas horizontais em HTML utilizamos a tag <hr>.
<hr width="100%" align="left" size="5" color="white">
Atributo Descrição
size Tamanho da espessura em pixels.
color Cor da linha
width Defina a largura da Linha
align Alinhamento [left, rigth, center]
![Page 20: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/20.jpg)
HTMLExercício
Construa uma página de uma série, time, novela e etc. utilizando as formatações vistas.
![Page 21: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/21.jpg)
HTMLImagens
Para inserir imagens em HTML utilizamos a TAG <img>.
<img src="imagem.png" alt="Veja a Imagem">
Atributo Descriçãosrc Caminho da imagem (URL)
alt Texto que aparece caso a imagem não seja renderizada
width Define a largura da imagem que pode ser em pixel ou porcetagem.
heigth Define a altura da imagem que pode ser em pixel ou porcetagem.
![Page 22: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/22.jpg)
HTMLLinks
Hyperlinks em HTML permitem ao usuário navegar de um documento para outro.
Quando se coloca o mouse em cima de um Link é possível para onde será direcionado ao clicar.
![Page 23: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/23.jpg)
HTMLLinks
A propriedade target="_blank" = Especifica onde vai ser aberto o link.
<a href="http://www.google.com/">Visite o Google</a> <a href="../index.html">Página Inicial</a>
![Page 24: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/24.jpg)
HTMLAncoras
Ancoras n ã o s ã o vis í veis para os usu á rios, servem para criar bookmark (marcadores) dentro de um documento HTML.
<a id="top">Início da Página</a>
<a href="#top">Vá para o Início da Página</a>
![Page 25: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/25.jpg)
HTML<head>
A tag <head> é um container para todos os elementos de cabeçalho. Dentro dessa tag é poss í vel colocar scripts, instru ç õ es para o browser de onde encontrar estilos (CSS) e etc.
Tags possíveis dentro de um <head>
<title>, <style>, <meta>, <link>, <script>, <noscript>, <base>
![Page 26: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/26.jpg)
26
HTML<title>
Define o título do documento.
É requerido em todos documentos html/xhtml.
<html><head><title>PSI - FG</title></head> <body>
The content of the document......</body> </html>
![Page 27: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/27.jpg)
HTML<link>
Define o relacionamento entre o documento e um recurso externo.
É usado frequentemente para link de estilos (CSS)
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
@CHARSET "ISO-8859-1";body {background-color:yellow}p {color:blue}
mystyle.css
![Page 28: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/28.jpg)
HTML<style>
Usado para definir estilos para o documento HTML.
Dentro da tag deve-se especificar como os elementos do HTML devem ser renderizados no browser.
<html><head><style type="text/css">
body {background-color:blue}p {color:white}
</style></head><body>
<p>Utilizando CSS</p></body> </html>
![Page 29: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/29.jpg)
HTML<script>
Usado para definir scripts client-side, por exemplo: Javascript.
<script>alert('Hello World!');
</script>
![Page 30: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/30.jpg)
HTMLListas Ordenadas
Uma lista ordenada inicia com a tag <ol>. Cada item inicia com a tag <li>.
<ol><li>Náutico</li><li>Sport</li><li>Santa Cruz</li>
</ol>
Atributo Descrição
type O formato da ordem pode ser:
1: lista numérica (não é necessário ser definido);A: lista alfabética com letras maiúsculas;A: lista alfabética com letras minúsculas;I: Lista numérica com números romanos maiúsculos;I: lista numérica com números romanos minúsculos;
start o valor inicial de uma lista numerada
![Page 31: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/31.jpg)
HTMLListas não Ordenadas
Uma lista não ordenada inicia com a tag <ul>. Cada item inicia com a tag <li>.
<ul><li>Náutico</li><li>Flamengo</li><li>Corinthians</li>
</ul>
Atributo Descrição
type O formato do marcador pode ser:disc: o marcador é um ponto (padrão utilizado pelos navegadores, não precisa indicar);square: o marcador é um quadrado;circle: o marcador é um ponto.
![Page 32: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/32.jpg)
HTMLTabelas
Tabelas são definidas em HTML pela tag <table>.
Uma tabela é dividida em Linhas e Colunas representadas pelas tags <tr> e <td>.
<table border="1"><tr>
<td>row 1, cell 1</td><td>row 1, cell 2</td>
</tr><tr>
<td>row 2, cell 1</td><td>row 2, cell 2</td>
</tr></table>
![Page 33: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/33.jpg)
33
HTML
Tabelas
Como fazer essa tabela?
![Page 34: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/34.jpg)
HTMLTabelas
Podem ser definidos cabeçalhos para uma tabela, por meio das tags <th>. <table border="1">
<tr><th>Header 1</th><th>Header 2</th>
</tr><tr>
<td>row 1, cell 1</td><td>row 1, cell 2</td>
</tr><tr>
<td>row 2, cell 1</td><td>row 2, cell 2</td>
</tr></table>
![Page 35: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/35.jpg)
HTMLTabelas – Outros Atributos
Atributo Descrição
cellpadding compreende a distância entre células e linhas
bgcolor Dá cor de fundo à tabela.bordercolor Define a cor da borda.height Define a altura da tabela em pixels ou
porcentagem.width Define a largura da tabela em pixels
ou porcentagem.background Permite-nos colocar um fundo para a
tabela desde um link a uma imagem.
![Page 36: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/36.jpg)
HTML
Caracters em HTML
![Page 37: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/37.jpg)
HTML
Cores em HTML
![Page 38: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/38.jpg)
38
HTMLForms
Usados para passar dados para o servidor.
Um elemento form pode conter elementos como:
Text FieldsCheckboxRadio buttonsSubmit buttons...
![Page 39: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/39.jpg)
HTMLForms
Principais propriedades de um Form
Atributo Descrição
action Endereço para onde os dados devem ser submetidos (Outra página ou Servidor)
method Tipo de requisição que será gerada, normalmente GET ou POST
![Page 40: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/40.jpg)
HTML
Forms – Text fields
<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname">
</form>
![Page 41: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/41.jpg)
HTML
Forms - Password Field
<form>Password: <input type="password" name="pwd"></form>
![Page 42: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/42.jpg)
HTML
Forms – Radio Buttons
RadioButtons permitem um usu á rio selecionar um dentre as op ç ões disponibilizadas.
<form><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female
</form>
![Page 43: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/43.jpg)
HTML
Forms – Checkboxes
CheckBoxes permitem um usuário selecionar zero ou mais opções.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car
</form>
![Page 44: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/44.jpg)
HTML
Forms – Input Submit
Submetem um formulário para uma determinada ação
<form name="input_user" action="outra_pagina.html" method="get">Username: <input type="text" name="user"> <input type="submit" value="Submit">
</form>
![Page 45: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/45.jpg)
HTML
Forms – Reset
Função de resetar os campos de um formulário.
<form name="input_user" action="outra_pagina.html" method="get">Username: <input type="text" name="user"> <input type="submit" value="Submit"> <input type="reset">
</form>
![Page 46: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/46.jpg)
HTML
Forms – Hidden
Permite o envio de dados escondidos em requisições, sendo enviados pelo método POST.
<form name="input_user" action="outra_pagina.html" method="post">Username: <input type="text" name="user"> <input type="submit" value="Submit"> <input type="reset"> <input type="hidden" value="saving" name="action_type">
</form>
![Page 47: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/47.jpg)
HTML
Forms – Selects
Permite a escolha de uma opção em forma de combo na tela.
Composto pelas tags:
<select> <option>
<select><option>Apples</option><option selected="selected">Bananas</option><option>Cherries</option>
</select>
![Page 48: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/48.jpg)
HTML
Forms – TextArea
Permite a criação de campos para textos maiores.
<textarea name="comment" rows="7" cols="20"></textarea>
![Page 49: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/49.jpg)
HTMLExercício
Construa uma página que contenha uma lista de opções (Portal do Aluno, Docente, Funcionários), cada opção deve direcionar (link) o usuário para a página específica onde deve haver:
Portal do Aluno: Uma tabela listando as disciplinas de um aluno e suas respectivas notas e faltas;
Docente: Uma lista ou tabela com a relação de alunos; Funcionários: Construa um formulário para cadastro de alunos da Faculdade
Guararapes, coloque imagens e links para páginas da instituição.
OBS: Coloque imagens da instituição e cores necessárias.
Entrega Individual
![Page 50: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/50.jpg)
HTML
Projeto
Grupo 3 Pessoas
Criação de páginas de série, novela, desenho e etc. Entrega dos Fontes Apresentação: 31/03 Nota Grupo e Individual Perguntas
![Page 51: Tecnologias para apresenta ão de dados - HTML de Sistemas na... · Uma linguagem de marcação utilizada para produzir páginas ... ligações com outras páginas, etc.; HTML No](https://reader031.vdocuments.com.br/reader031/viewer/2022020415/5bfd1f3709d3f297368bfcb4/html5/thumbnails/51.jpg)
HTML
Projeto - Sugestões
Two and half man; Friends; Dexter; Novelas; Desenhos animados; etc.
OBS: Deve existir todos os recursos vistos em sala de aula tais como Links, Listas, Páginas, Tabelas e etc.