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:

• Colspan• Permite que uma coluna ocupe mais de uma célula.

Table – Atributo colspan

• RowspanPermite 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 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.

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