KaYuLe: Breve resumo sobre tags HTML e suas funcionalidades.

Dentre as tags estudadas em sala de aula vimos que alguns atributos e outras novas tags que acabam tornando-se essenciais para edição e criação de uma tabela e quaisquer outro elemento dentro de uma página html, dentre essas estão as tags:
"Border" que tem por objetivo criar uma borda ao redor da tabela ou outro elemento, o atributo border aceita informações do tipo numérico. Exemplo :
<html>
<body>
<h4>Borda normal:</h4>
<table border="1">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
</body>
</html>

th(table heading) é o atributo destinado a criação de um cabeçalho dentro de uma página html exemplo:
<html>
<body>
<table border="1">
<tr>
<th> criando o Cabeçalho</th>
<th>criando outro Cabeçalho</th>
</tr>
<tr>
<td>linha 1, celula 1</td>
<td>linha 1, celula 2</td>
</tr>
</table>
</body>
</html>

Ficará assim:

" " é responsável por manter uma linha ou coluna com as bordas visíveis mas sem o seu conteúdo. Exemplo:
<table border="1">
<tr>
<td>linha 1, celula 1</td>
<td>linha 1, celula 2</td>
</tr>
<tr>
<td>linha 2, celula 1</td>
<td> </td>
</tr>
</table>

O atributo caption "<caption>titulo<capition</caption>" é responsável por colocar um titulo dentro de um código html:
<html>
<body>
<table border="3">
<caption>Título</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Ficará assim:

colspan tem a finalidade de dizer que sob a célula onde ele foi introduzido podemos ter um certo número de colunas. Logo, se você quiser que uma célula ocupe uma única linha, como no nosso exemplo, você deve inserir o parâmetro dentro da tag <TD> desta célula. A quantidade de células que virão em baixo da célula que recebeu o atributo COLSPAN deve ser de acordo com o número especificado no parâmetro.
<TABLE BORDER=2 CELLPADDING=2>
<TR>
<TD COLSPAN=2>Exemplo do uso do COLSPAN</TD>
<TR>
<TD>CÉLULA 1</TD> <TD>CÉLULA 2</TD>
</TR>
</TABLE>
Ficará assim:

rowspan, tem a finalidade de expandir uma célula verticalmente.
<TABLE BORDER=2 CELLPADDING=2>
<TR>
<TD ROWSPAN=2>Exemplo do uso do ROWSPAN</TD>
<TD>CÉLULA 1</TD></TR><TR> <TD>CÉLULA 2</TD>
</TR>
</TABLE>
Ficará assim:

A tag <P> é usada para a criação de parágrafos:
<HTML>
<HEAD>
<TITLE>Exemplo com parágrafo</TITLE>
</HEAD>
<BODY>
<P>Linha HTML.</P>
<P>Outra linha HTML.</P>
</BODY>
</HTML>

cellspacing, é usado para separar os espaços entre as células:
<table border="1" cellspacing="10">
<html>
<body>
<tr>
<td>Primeira</td>
<td>linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>linha</td>
</tr>
</table>
</body>
</html>
Ficará assim:

cellpading ele pode incluir ou excluir espaços dentro das celulas:
<html>
<body>
<h4>Com cellpadding:</h4>
<table border="1" cellpadding="10">
<tr>
<td>Primeira</td>
<td>linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>linha</td>
</tr>
</table>
</body>
</html>
Ficará assim:

Tags importantes:
-border que colocar uma borda ao redor da tabela;
-void que deixa uma borda em branco;
-above borda apenas em cima;
-below borda apenas em baixo;
-hsides boda em cima e embaixo;
-vsidesno boda apenas no lado direito e esquerdo;
-lhs borda apenas na esquerda;
-rhs borda apenas na direita;
Exemplos:
<html>
<body>
<p>
Se nao ve enquadramentos ao redor das tabelas, seu browser não o
suporta.
</p>
<h4>Com Enquadramento="border":</h4>
<table frame="border">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="box":</h4>
<table frame="box">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="void":</h4>
<table frame="void">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="above":</h4>
<table frame="above">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="below":</h4>
<table frame="below">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="hsides":</h4>
<table frame="hsides">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="vsides":</h4>
<table frame="vsides">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="lhs":</h4>
<table frame="lhs">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
<h4>Com Enquadramento="rhs":</h4>
<table frame="rhs">
<tr>
<td>Primeira</td>
<td>Linha</td>
</tr>
<tr>
<td>Segunda</td>
<td>Linha</td>
</tr>
</table>
</body>
</html>

Páginas

segunda-feira, 3 de outubro de 2011

Breve resumo sobre tags HTML e suas funcionalidades.

Nenhum comentário:

Postar um comentário