Lista e Tabelas. Fundamentos da Linguagem Web

Tamanho: px

Começar a partir da página:

Download "Lista e Tabelas. Fundamentos da Linguagem Web"

Roberto Lemos Coimbra
10 Há anos
Visualizações:

1 Lista e Tabelas Fundamentos da Linguagem Web Bruno Angelo Medeiros Março de 2015

2 LISTAS O que são? Tipos Ordenadas Não ordenadas De definição Exemplos Exercícios

3 LISTAS - O QUE SÃO? São uma forma de organização e/ou ordenação dedados para melhorar a visualização da informação disposta.

4 LISTAS - TIPOS Existem 3 tipos de listas no HTML, são elas: Ordenadas Não ordenadas De definição Obs.: Dentro de uma lista você pode colocar: parágrafos,quebras de linha, imagens,links,outras listas, etc.

5 LISTA ORDENADA As listas ordenadas são usadas para indicar alguma sequência ou numeração de itens. - Seu início e fim são determinados pelas tags <ol> e </ol>; - Cada item da lista é iniciado por <li> e seu final por </li>; Exemplo: <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item4</li> <li>item5</li> </ol>

- Seu início e fim são determinados pelas tags <ol> e </ol>; - Cada item da

6 LISTA NÃO ORDENADA As listas não ordenadas são usadas para listar itens, sem se preocupar com sua sequência. - Seu inicio e fim são determinados pelas tags <ul> e </ul>; - Cada item da lista é iniciado por <li> e seu final por </li>; Exemplo: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item4</li> <li>item5</li> </ul>

- Seu inicio e fim são determinados pelas tags <ul> e </ul>; - Cada item da lista

7 LISTAS - PRATICANDO 1.Crie um novo arquivo com a extensão.html 2.Abra o arquivo no editor de texto(sublime,notepad++,etc) 3.Utilize a estrutura padrão do HTML(<html>, <head>, <body>) 4.Utilize os 3 tipos de listas do HTML vistos nesta apresentação 5.Salve o arquivo como listas.html 6.Acesse no browser e veja o resultado Obs.: Coloque links, parágrafos, imagens e outras tags que estudamos Sempre salvem o arquivo ou enviem para o de vocês, para que possamos utilizar no futuro.

Utilize os 3 tipos de listas do HTML vistos nesta apresentação 5.Salve o arquivo como listas.html 6.

8 TABELAS O que são? Utilização Exemplos Atributos Exercícios Grupo de linhas

9 TABELAS O QUE SÃO? Tabelas são muito importantes porque permitem organizar os dados a fim de possibilitar uma melhor visualização. Orçamentos Folha de pagamento Notas de alunos Exemplo: <table> <tr> <td>célula 1 1</td> </tr> <tr> <td>célula2 1</td> </tr> </table>

10 TABELAS - UTILIZAÇÃO Tabelas NÃO devem ser usadas para organizar o layout da página. Padrões Usabilidade Acessibilidade Separação entre layout e conteúdo Para separar layout de conteúdo, utilizaremos CSS.

11 TABELAS - EXEMPLO

12 TABELAS - CONSTRUÇÃO

13 TABELAS - CONSTRUÇÃO

14 TABELAS - ATRIBUTOS align left center right Posicionamento border 1 "" Borda da tabela cellpadding pixels Espaçamento interno da célula cellspacing pixels Espaçamento entre as células width pixels % Largura da tabela colspan 1 Número de colunas que determina da célula irá ocupar

cellspacing pixels Espaçamento entre as células width pixels %

15 TABELAS - PRATICANDO 1.Crie um novo arquivo com a extensão.html 2.Abra o arquivo no editor de texto(sublime,notepad++,etc) 3.Utilize a estrutura padrão do HTML(<html>, <head>, <body>) 4.Utilize a tag<table> 5.Salve o arquivo como tabelas.html 6.Acesse no browser e veja o resultado Obs.: Coloque links, parágrafos, imagens e outras tags que estudamos Sempre salvem o arquivo ou enviem para o de vocês, para que possamos utilizar no futuro.

Utilize a estrutura padrão do HTML(<html>, <head>, <body>) 4.Utilize a tag<table> 5.

16 TABELAS GRUPO DE LINHAS O que são e para que servem? São agrupadores de conteúdo de uma tabela, que utilizamos para separar essas informações por áreas(cabeçalho, corpo e rodapé). Ele não influenciará visualmente na tabela, mas sim no seu valor semântico para com o documento HTML em questão.

essas informações por áreas(cabeçalho, corpo e rodapé).

17 TABELAS GRUPO DE LINHAS Quais são? Temos 3 grupos de linhas nas tabelas do HTML, são eles: <thead>, <tbody> e <tfoot>

18 TABELAS <thead> É onde irá o cabeçalho da tabela Geralmente ela deve vir antes do <tbody> e do <tfoot> Deve sempre conter pelo menos uma tag <tr> e uma tag <td> ou <th>

19 TABELAS <tbody> É onde irá o corpo da tabela Geralmente ela deve vir depois do <thead> e antes do <tfoot> Deve sempre conter pelo menos uma tag <tr> e uma tag <td>

20 TABELAS <tfoot> É onde irá o rodapé da tabela Geralmente ela deve vir por último, depois do <tbody> Deve sempre conter pelo menos uma tag <tr> e uma tag <td>

21 TABELAS GRUPO DE LINHAS - EXEMPLO Reforçando: <thead> = cabeçalho da tabela(início, onde irá os títulos do que terá na tabela) <tbody> = corpo da tabela(todo o conteúdo da tabela referente ao cabeçalho) <tfoot> = rodapé da tabela(finalização da tabela, informações adicionais)

22 TABELAS GRUPO DE LINHAS - EXEMPLO

23 TABELAS - REFORÇANDO

24 sc.senai.br Rodovia Admar Gonzaga, 2765 Itacorubi Florianópolis, SC

Documentos relacionados

Programação e Designer para WEB

Programação e Designer para WEB html Prof. Rodrigo Rocha [email protected] http://www.bolinhabolinha.com Apresentação Onde Estamos Introdução a hipertexto. A linguagem. Ambientes para programação