html - listas, estilos, tabelas, div, span, formulário
TRANSCRIPT
![Page 1: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/1.jpg)
Marcação e Layout para Web
Me. Arthur Emanuel de Oliveira Carosia
![Page 2: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/2.jpg)
Comentários não são exibidos pelo navegador, mas eles ajudam a documentar o código HTML.
Comentários são úteis para debugar o HTML, porque é possível comentar linhas de código HTML para buscar erros.
Com comentários é também possível inserir notificações e lembretes no código HTML.
Comentários
![Page 3: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/3.jpg)
Todo elemento HTML tem um estilo padrão ◦ cor de fundo branca, ◦ cor de texto preta, ◦ tamanho da fonte 12px◦ Etc
Mudança no estilo padrão de um elemento HTML pode ser feito com o atributo style.
A sintaxe do atributo style é a seguinte:◦ style="property:value"
Tanto property quanto value são referentes à tecnologia CSS.
Estilos HTML
![Page 4: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/4.jpg)
Cor do texto◦ O atributo color define a cor do texto a ser usada
por um elemento HTML
Estilos HTML
![Page 5: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/5.jpg)
Tipo de Fonte◦ O atributo font-family define a fonte a ser
utilizada por um elemento HTML
Estilos HTML
![Page 6: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/6.jpg)
Tamanho da fonte◦ O atributo font-size define o tamanho da fonte
utilizada por um elemento HTML
Estilos HTML
![Page 7: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/7.jpg)
Alinhamento de texto◦ O atributo text-align define o alinhamento de
texto horizontal para um elemento HTML
Estilos HTML
![Page 8: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/8.jpg)
Cor de fundo O atributo background-color define a cor
do fundo para um elemento HTML
Estilos HTML
![Page 9: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/9.jpg)
Cores Referências
Nomes das Cores◦ http://www.w3schools.com/html/html_colornames.
asp
Valores das Cores◦ http://www.w3schools.com/html/html_colorvalues.a
sp
![Page 10: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/10.jpg)
Listas que não possuem relação de ordem◦ Atributo style pode ser usado para diferentes
tipos de lista: disc (default) - arredondado Circle - círculo Square - quadrado None - nenhum
Listas Não-Ordenadas
![Page 11: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/11.jpg)
Listas que possuem relação de ordem◦ Atributo style pode ser usado para diferentes
tipos de lista: 1 - número A – letra maiúscula a – letra minúscula I – algarismo romano maiúsculo i - algarismo romano minúsculo
Listas Ordenadas
![Page 12: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/12.jpg)
Lista de items que possuem descrição
Listas Descritivas
![Page 13: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/13.jpg)
Tabelas são definidas pela tag <table>
Tabelas são divididas em table rows (linhas de tabela) com a tag <tr>
Linhas de tabela são divididas em table data (dados de tabela) com a tag <td>.
Linhas de tabela também podem ser divididas em table headings (cabeçalhos) com a tag <th>
Tabelas
![Page 14: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/14.jpg)
Tabelas
![Page 15: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/15.jpg)
Bordas◦ Se não especificar o tamanho da borda, as tabelas
serão exibidas sem borda.
<table border="1" style="width:100%">
Tabelas
![Page 16: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/16.jpg)
Usando cabeçalhos nas tabelas
Tabelas
![Page 17: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/17.jpg)
Elemento qque pode ser usado como container para outros elementos HTML
A tag <div> não tem significado especial, não requer atributos, mas frequentemente style é usado como seu atributo
Quando utilizado com CSS, pode ser utilizado para estilizar blocos de conteúdo
Div
![Page 18: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/18.jpg)
Div
![Page 19: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/19.jpg)
Utilizado como um container para texto
<span> não tem significado especial, mas é comumente utilizado com o atributo style
Quando utilizado com CSS, <span> pode ser utilizado para estilizar partes do texto
Span
![Page 20: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/20.jpg)
Span
![Page 21: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/21.jpg)
Sites web normalmente mostram informações em múltiplas colunas (como uma revista ou um jornal).
Pode-se usar <div> para posicionar as colunas em uma página HTML.
Layout HTML
![Page 22: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/22.jpg)
Layout usando <div>
![Page 23: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/23.jpg)
Layout usando <div>
![Page 24: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/24.jpg)
Layout usando <div>
![Page 25: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/25.jpg)
Layout em HTML 5
Layout em HTML 5
header Define um cabeçalho
nav Define um container para links de navegação
section Define uma seção no documento
article Define um conteúdo de artigo
aside Define o conteúdo ao lado do artigo
footer Define o rodapé
details Define detalhes adicionais
summary Define um cabeçalho para os elementos de
detalhe
![Page 26: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/26.jpg)
Faça a página principal de um portal de notícias, que deve incluir: ◦ Cabeçalho:
título do portal, data atual, barra de links de navegação entre categorias de
notícias (esportes, filmes, etc), ◦ Seção de notícias
Três notícias resumidas com suas respectivas imagens
◦ Rodapé Dados para contato do portal
Exercício
![Page 27: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/27.jpg)
Fomulários são utilizados para coletar a entrada do usuário.
Definidos pelo elemento <form>
Formulários
![Page 28: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/28.jpg)
<input>◦ Tag mais importante de um formulário◦ Elemento utilizado para a entrada de dados do
usuário◦ Pode aparecer de diversas formas, dependendo do
atributo type.
Formulários
Type Descriçãotext Define uma entrada de
textoradio Define um radio button
(para selecionar uma dentre várias escolhas)
submit Define um botão de sumissão do formulário
![Page 29: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/29.jpg)
Formulários
![Page 30: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/30.jpg)
Todo formulário é submetido a uma página armazenada em um servidor e que irá gerenciar o conteúdo que foi enviado.
O atributo action indica a página que o formulário será submetido
Formulários
![Page 31: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/31.jpg)
Formulários
![Page 32: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/32.jpg)
Formulários
![Page 33: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/33.jpg)
Formulários
![Page 34: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/34.jpg)
Formulários
![Page 35: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/35.jpg)
Formulários
![Page 36: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/36.jpg)
Crie uma página HTML que contenha um formulário.
O objetivo deste formulário é submeter o pedido de compra de um produto. Ele deve conter:◦ Um elemento para escolher dentre diversos nomes de
produtos;◦ Um elemento para escolher a quantidade do produto;◦ Um elemento para escrever observações adicionais
sobre o pedido;◦ Um botão para submissão da compra.
Exercício
![Page 37: HTML - Listas, Estilos, Tabelas, Div, Span, Formulário](https://reader036.vdocuments.pub/reader036/viewer/2022062522/58a2c82d1a28ab217a8b614d/html5/thumbnails/37.jpg)
Marcação e Layout para Web
Me. Arthur Emanuel de Oliveira Carosia