Curso de HTML 4.01 e Introdução ao XHTML 1.0
195 pág.

Curso de HTML 4.01 e Introdução ao XHTML 1.0


DisciplinaHtml143 materiais1.079 seguidores
Pré-visualização41 páginas
com acento agudo í í 
î i pequeno com acento circunflexo î î 
ï i pequeno com diérese ï ï 
ð eth pequeno (Islandês) ð ð 
ñ n pequeno com til ñ ñ 
ò o pequeno com acento grave ò ò 
ó o pequeno com acento agudo ó ó 
ô o pequeno com acento circunflexo ô ô 
õ o pequeno com til õ õ 
ö o pequeno com diérese ö ö 
ø o pequeno com traço oblíquo ø ø 
ù u pequeno com acento grave ù ù 
ú u pequeno com acento agudo ú ú 
û u pequeno com acento circunflexo û û 
ü u pequeno com diérese ü ü 
ý y pequeno com acento agudo ý ý 
þ thorn pequeno (Islandês) þ þ 
ÿ y pequeno com diérese ÿ ÿ 
 
9.5 Entidades HTML não pertencentes ao conjunto ISO 8859-1 
 
Resultad
o 
Descrição Entidade Código 
\u20ac Moeda Euro € € 
\u2022 Marca para item em lista não ordenada 
("bullet") 
• • 
\u2122 Marca comercial ("Trade Mark") ™ ™ 
\u2026 três pontos (elipse) … … 
\u2032 aspas ′ ′ 
\u2033 aspas duplas ″ ″ 
\u201c aspas (elegantes) do lado esquerdo “ “ 
\u201d aspas (elegantes) do lado direito ” ” 
\u2192 seta para a direita → → 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 65 
\u2190 seta para a esquerda &larr; &#8592; 
\u152 ligação OE grande &OElig; &#338; 
\u153 ligação oe pequena &oelig; &#339; 
\u160 s grande com um caron &Scaron; &#352; 
\u161 s pequeno com um caron &scaron; &#353; 
\u178 y grande com diérese &Yuml; &#376; 
\u2c6 caractere modificador para acento 
circunflexo 
&circ; &#710; 
\u2dc til pequeno &tilde; &#732; 
\u2013 traço &quot;en dash&quot; &ndash; &#8211; 
\u2014 traço &quot;em dash&quot; &mdash; &#8212; 
\u2018 aspa esquerda simples &lsquo; &#8216; 
\u2019 aspa direita simples &rsquo; &#8217; 
 
10. Tabelas 
 
As tabelas definidas em HTML têm permitido apresentar dados em forma 
tabular e construir arranjos de página complexos. Apesar de as recomendações 
modernas darem preferência à utilização das Folhas de Estilos em Cascata (CSS) em 
desfavor das tabelas quando se trata de fazer arranjos gráficos complexos, a verdade 
é que as tabelas continuam a ser muito úteis devido ao fato de os browsers 
apresentarem alguns erros na forma como implementam os padrões CSS. 
 
Exemplos de Aplicação 
 
Tabelas simples 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <h4>Uma coluna:</h4> 
 
 <table border=&quot;1&quot;> 
 <tbody> 
 <tr> 
 <td>100</td> 
 </tr> 
 </tbody> 
 </table> 
 
 <h4>Uma linha e três colunas:</h4> 
 
 <table border=&quot;1&quot;> 
 <tbody> 
 <tr> 
 <td>100</td> 
 <td>200</td> 
 <td>300</td> 
 </tr> 
 </tbody> 
 </table> 
 
 <h4>Duas linhas e três colunas:</h4> 
 
 <table border=&quot;1&quot;> 
 <tbody> 
 <tr> 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 66 
 <td>100</td> 
 <td>200</td> 
 <td>300</td> 
 </tr> 
 <tr> 
 <td>400</td> 
 <td>500</td> 
 <td>600</td> 
 </tr> 
 </tbody> 
 </table> 
 
 <p>As tabelas constroem-se com o elemento &lt;table&gt;. As linhas da 
 tabela obtêm-se com o elemento &lt;tr&gt;. As células de dados 
 criam-se com o elemento &lt;td&gt;.</p> 
</body> 
</html> 
 
 
 
Decoração dos limites da tabela 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <h4>Uma linha de fronteira normal:</h4> 
 
 <table border=&quot;1&quot;> 
 <tbody> 
 <tr> 
 <td>Primeira</td> 
 <td>Linha</td> 
 </tr> 
 <tr> 
 <td>Segunda</td> 
 <td>Linha</td> 
 </tr> 
 </tbody> 
 </table> 
 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 67 
 <h4>Uma linha de fronteira mais espessa:</h4> 
 
 <table border=&quot;8&quot;> 
 <tbody> 
 <tr> 
 <td>Primeira</td> 
 <td>Linha</td> 
 </tr> 
 <tr> 
 <td>Segunda</td> 
 <td>Linha</td> 
 </tr> 
 </tbody> 
 </table> 
 
 <h4>Uma linha de fronteira muito espessa:</h4> 
 
 <table border=&quot;15&quot;> 
 <tbody> 
 <tr> 
 <td>Primeira</td> 
 <td>Linha</td> 
 </tr> 
 <tr> 
 <td>Segunda</td> 
 <td>Linha</td> 
 </tr> 
 </tbody> 
 </table> 
</body> 
</html> 
 
 
 
10.1 Definir tabelas 
 
A tabelas definem-se com o elemento <table>. Uma tabela divide-se em linhas 
(com o elemento <tr>, cujo nome deriva de &quot;table row&quot;), e cada linha divide-se em 
células (definidas com o elemento <td>, cujo nome deriva de &quot;table data&quot;). Uma célula 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 68 
pode conter dados, texto, imagens e outros elementos do HTML. O exemplo seguinte 
mostra código que cria uma tabela: 
 
<table border=&quot;1&quot;> 
 <tr> 
 <td>linha 1, célula 1</td> 
 <td>linha 1, célula 2</td> 
 </tr> 
 <tr> 
 <td>linha 2, célula 1</td> 
 <td>linha 2, célula 2</td> 
 </tr> 
</table> 
 
Esta tabela terá o seguinte aspecto quando visualizada no seu browser: 
 
 
 
10.2 O atributo border 
 
Se não especificarmos o valor do atributo border a tabela será apresentada 
sem linhas de contorno. Às vezes isto é útil, mas muitas vezes queremos que sejam 
desenhadas linhas no contorno da tabela. 
 
Para que sejam desenhadas linhas usamos o atributo border: 
 
<table border=&quot;2&quot;> 
 <tr> 
 <td>Linha 1, célula 1</td> 
 <td>Linha 1, célula 2</td> 
 </tr> 
</table> 
 
10. Cabeçalhos numa tabela 
 
O cabeçalho de uma tabela define-se com o elemento <th>. 
 
<table border=&quot;1&quot;> 
 <th>Cabeçalho</th> 
 <th>Outro cabeçalho</th> 
 <tr> 
 <td>linha 1, célula 1</td> 
 <td>linha 1, célula 2</td> 
 </tr> 
 <tr> 
 <td>linha 2, célula 1</td> 
 <td>linha 2, célula 2</td> 
 </tr> 
</table> 
 
Esta tabela terá o seguinte aspecto quando visualizada no seu browser: 
 
 
 
 
Curso de HTML 4.01 e Introdução ao XHTML 1.0 
Desenvolvimento, aplicações e referências de acordo com as normas do W3C 
 
 <meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 69 
10.4 Células vazias numa tabela 
 
A maioria dos browsers não desenha as células que não têm qualquer 
conteúdo. Para manterem a compatibilidade os browsers modernos tendem a atuar do 
mesmo modo. 
 
<table border=&quot;1&quot;> 
 <tr> 
 <td>linha 1, célula 1</td> 
 <td>linha 1, célula 2</td> 
 </tr> 
 <tr> 
 <td>linha 2, célula 1</td> 
 <td></td> 
 </tr> 
</table> 
 
Aspecto desta tabela quando visualizada no seu browser: 
 
 
 
Dependendo do browser que você está usando, o contorno ao redor da célula 
vazia pode ou não ter sido desenhado. O mais certo é não ter sido desenhado. Os 
browsers antigos nunca desenhavam os contornos num caso destes. 
 
Para evitar que isto aconteça e garantir a consistência no aspecto das suas 
páginas coloque um caractere &nbsp; dentro da célula vazia para que ela passe a ter 
conteúdo e tenha o contorno desenhado: 
 
<table border=&quot;1&quot;> 
 <tr> 
 <td>linha 1, célula 1</td> 
 <td>linha 1, célula 2</td> 
 </tr> 
 <tr> 
 <td>linha 2, célula 1</td> 
 <td>&nbsp;</td>