Aula 03
Marcos Devaner
Programação Orientada a Objetos II
Organização do conteúdo em um documento HTML
Tabelas
• Tabelas são definidas entre as tags
<table> e </table>
• Para inserir linhas nas tabelas usa-se as tags <tr></tr...
Exemplos Tabelas
Exemplos:
• Única coluna:
<h4>One
column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
• Uma ...
Table Header
• São definidas com as
tags <th></th>
• Os browsers
geralmente exibem
essa informação em
negrito e centraliza...
• Colspan
• Permite que uma coluna ocupe mais de uma célula.
Table – Atributo colspan
• Rowspan
Permite que uma linha ocupe mais de uma célula.
Table – Atributo rowspan
Listas Ordenadas
• Listas: Exibem os resultados na forma ordenada
Tags relacionadas
Tipos possíveis:
Sem definir nenhum ti...
Listas Não ordenadas
A tag <ul> foi obsoleta no HTML4 e não é
suportada no html5. É preciso utilizar o atributo
style para...
HTML Links - Hyperlinks
Um hiperlink é um texto ou uma imagem que você pode clicar , e saltar para outro documento.
Em htm...
DIV
As tags DIV são muito utilizadas para construir o
layout do site em conjunto com o CSS. Antes era
utilizado as tags <t...
Criando uma DIV
As tags <div></div> permite que vários elementos sejam agrupados. A tag div não
tem significado especial. ...
Exemplo de Layout Usando DIV
Crie um pagina web seguindo o modelo abaixo:
TITULO
• Link 1
• Link 2
• Link 3
Um texto qualquer aqui!
Atividade
Próximos SlideShares
Carregando em…5
×

Aula 03 - Organização do conteúdo em um documento HTML

606 visualizações

Publicada em

organização do conteúdo em um documento HTML

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
606
No SlideShare
0
A partir de incorporações
0
Número de incorporações
212
Ações
Compartilhamentos
0
Downloads
21
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 03 - Organização do conteúdo em um documento HTML

  1. 1. Aula 03 Marcos Devaner Programação Orientada a Objetos II Organização do conteúdo em um documento HTML
  2. 2. Tabelas • Tabelas são definidas entre as tags <table> e </table> • Para inserir linhas nas tabelas usa-se as tags <tr></tr> • Para inserir colunas usa-se as tags <td></td> Exemplo: <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>
  3. 3. Exemplos Tabelas Exemplos: • Única coluna: <h4>One column:</h4> <table border="1"> <tr> <td>100</td> </tr> </table> • Uma linha e três colunas: <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table>
  4. 4. Table Header • São definidas com as tags <th></th> • Os browsers geralmente exibem essa informação em negrito e centralizada. Exemplo:
  5. 5. • Colspan • Permite que uma coluna ocupe mais de uma célula. Table – Atributo colspan
  6. 6. • Rowspan Permite que uma linha ocupe mais de uma célula. Table – Atributo rowspan
  7. 7. Listas Ordenadas • Listas: Exibem os resultados na forma ordenada Tags relacionadas Tipos possíveis: Sem definir nenhum tipo - Número a – Letras Minúsculas A – Letras Maiúsculas I - Algarismos romanos
  8. 8. Listas Não ordenadas A tag <ul> foi obsoleta no HTML4 e não é suportada no html5. É preciso utilizar o atributo style para exibir corretamente: Tags relacionadas Tipos possíveis: disc – Círculos circle – Círculo vazado square – Quadrado
  9. 9. HTML Links - Hyperlinks Um hiperlink é um texto ou uma imagem que você pode clicar , e saltar para outro documento. Em html os hiperlinks são definidos pela tag <a>
  10. 10. DIV As tags DIV são muito utilizadas para construir o layout do site em conjunto com o CSS. Antes era utilizado as tags <table> para a definição do layout, mas como a utilização de tabelas pode deixar o layout bem complexo, passou-se a utilizar as tags div. Esse padrão é conhecido como tableless. Layouts mais flexíveis
  11. 11. Criando uma DIV As tags <div></div> permite que vários elementos sejam agrupados. A tag div não tem significado especial. Serve apenas para agrupar elementos.
  12. 12. Exemplo de Layout Usando DIV
  13. 13. Crie um pagina web seguindo o modelo abaixo: TITULO • Link 1 • Link 2 • Link 3 Um texto qualquer aqui! Atividade

×