aula 03 - organização do conteúdo em um documento html
TRANSCRIPT
Aula 03
Marcos Devaner
Programação Orientada a Objetos IIOrganizaçã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>• 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>
Exemplos TabelasExemplos: • Ú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>
Table Header
• São definidas com as tags <th></th>
• Os browsers geralmente exibem essa informação em negrito e centralizada.
Exemplo:
Listas Ordenadas• Listas: Exibem os resultados na forma ordenada
Tags relacionadas
Tipos possíveis: Sem definir nenhum tipo - Númeroa – Letras MinúsculasA – Letras MaiúsculasI - Algarismos romanos
Listas Não ordenadasA 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írculoscircle – Círculo vazadosquare – Quadrado
HTML Links - HyperlinksUm 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>
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
Criando uma DIVAs tags <div></div> permite que vários elementos sejam agrupados. A tag div não tem significado especial. Serve apenas para agrupar elementos.