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
<body> 
 <p>Isto é um parágrafo.</p> 
 
 <p>Isto é outro parágrafo.</p> 
 
 <p> 
 Os parágrafos definem-se com o elemento &lt;p&gt; 
 </p> 
</body> 
</html> 
 
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;> 16 
 
 
Nota: A iniciativa da Web Semântica dá muita importância aos elementos que 
vamos estudar nesta página e nas páginas seguintes. O uso correto destes elementos 
permite melhorar muito as potencialidades da Web como meio de publicação. 
 
3.1 Cabeçalhos 
 
Os cabeçalhos (de capítulo ou de seção) definem-se com as etiquetas 
<h1>...<h6>. <h1> define o cabeçalho mais importante (maior) e <h6> define o menos 
importante (menor). 
 
<h1>Isto é um cabeçalho</h1> 
<h2>Isto é um cabeçalho</h2> 
<h3>Isto é um cabeçalho</h3> 
<h4>Isto é um cabeçalho</h4> 
<h5>Isto é um cabeçalho</h5> 
<h6>Isto é um cabeçalho</h6> 
 
O HTML adiciona de forma automática uma linha em branco antes e depois de 
um cabeçalho. 
 
3.2 Parágrafos 
 
Os parágrafos definem-se com a etiqueta <p>. 
 
<p>Isto é um parágrafo</p> 
<p>Isto é outro parágrafo</p> 
 
O HTML adiciona de forma automática uma linha em branco antes e depois de 
um parágrafo. 
 
3.3 Quebras de linha 
 
A etiqueta <br> usa-se para terminar uma linha sem iniciar um novo parágrafo. 
Esta etiqueta (<br>, ou &quot;line break&quot;) provoca uma mudança de linha forçada no local 
em que aparece. 
 
<p> 
 Isto<br> é um pará-<br>grafo 
 com quebras de linha 
</p> 
 
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;> 17 
O exercício seguinte dá uma oportunidade para experimentar: 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
<p> 
 Isto<br> é um pará-<br>grafo 
 com quebras de linha 
</p> 
</body> 
</html> 
 
 
 
A etiqueta <br> é uma etiqueta vazia. Ela não pode ter qualquer conteúdo e 
não tem etiqueta de fim (finalização). 
 
3.4 Comentários 
 
As etiquetas de comentário são especiais porque não se escrevem da mesma 
forma que as etiquetas que representam elementos normais. Os comentários servem 
para dizer ao browser que o seu conteúdo é um comentário e não pode ser 
apresentado graficamente. Usa-se essas etiquetas para fazer anotações que explicam 
a forma como o código fonte está feito para que mais tarde consigamos compreender 
aquilo que fizemos antes. O exemplo seguinte mostra um comentário 
 
<!-- Isto é um comentário --> 
 
Repare que o fato de termos um ponto de exclamação no início diz ao browser 
que esta é uma etiqueta especial, a qual não representa um elemento normal da 
linguagem HTML. 
 
3.5 Lista de elementos básicos do HTML 
 
Elemento Descrição 
<html> Elemento que contém todas as definições da página HTML 
<body> Elemento que contém o corpo (&quot;body&quot;) da página 
<h1> ... 
<h6> 
Define cabeçalhos desde o nível 1 (mais importante) até ao nível 6 
(menos importante) 
<p> Define um parágrafo 
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;> 18 
<br> Provoca uma mudança de linha forçada 
<hr> Insere uma linha horizontal 
<!-- --> Insere um comentário no código fonte 
 
Exemplos de Aplicação 
 
Mais parágrafos 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
 
<body> 
 <p> 
 No código fonte este parágrafo tem três 
 linhas, mas o browser ignora isso e pode 
 apresentar outro número. 
 </p> 
 
 <p>No código fonte o texto deste parágrafo tem 
 vários espaços seguidos, mas o 
 browser trata-os como se eles formassem 
 um único espaço. 
 </p> 
 
 <p>O número de linhas de um parágrafo depende 
 do tamanho da janela do browser. Ao alterar 
 a largura desta provocará alterações no 
 número de linhas 
 </p> 
 
</body> 
</html> 
 
 
 
Elementos de cabeçalho 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <h1>Isto é um cabeçalho de nível 1</h1> 
 
 <h2>Isto é um cabeçalho de nível 2</h2> 
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;> 19 
 <h3>Isto é um cabeçalho de nível 3</h3> 
 <h4>Isto é um cabeçalho de nível 4</h4> 
 
 <h5>Isto é um cabeçalho de nível 5</h5> 
 
 <h6>Isto é um cabeçalho de nível 6</h6> 
 
 <p>Os elementos h1-h6 devem ser 
 usados apenas para escrever cabeçalhos. Não os use 
 para outros fins. Existem outros elementos concebidos especificamente para 
 outras finalidades.</p> 
 
</body> 
</html> 
 
 
 
 
 
Cabeçalho alinhado ao centro 
 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <h1 align=&quot;center&quot; 
>Este é um cabeçalho 
 de nível 1</h1> 
 
 <p>Este cabeçalho mostrado mais acima 
 está alinhado ao centro da página. 
 </p> 
</body> 
</html> 
 
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;> 20 
 
 
Inserir uma linha horizontal 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
<body> 
 <p>O elemento hr desenha uma linha horizontal:</p> 
 <hr> 
 
 <p>Isto é um parágrafo</p> 
 
 <p>Isto é um parágrafo</p> 
 
 <p>Isto é um parágrafo</p> 
</body> 
</html> 
 
 
 
Comentários no código fonte de uma página HTML 
 
<html> 
<body> 
<!-- Este comentário não será visível --> 
<p>Isto é um parágrafo normal</p> 
</body> 
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;> 21 
</html> 
 
 
 
Utilizando uma cor de fundo 
 
<html> 
<head> 
<title>Exemplo</title> 
</head> 
 <body bgcolor=&quot;yellow&quot;> 
 <h2>Um fundo colorido</h2> 
</body> 
</html> 
 
 
 
3.6 Dicas 
 
Se você executou os exemplos de aplicação listados mais acima 
provavelmente deparou com alguns comportamentos inesperados. As dicas seguintes 
chamam a atenção para alguns deles. 
 
1) Quando escrevemos páginas em HTML devemos ter sempre atenção ao fato 
de elas poderem ser apresentadas de forma diferente em browsers diferentes ou em 
máquinas diferentes. O aspecto gráfico de uma página pode diferir entre máquinas ou 
entre browsers! Isso se deve não só a diferenças nos sistemas, mas também ao fato 
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;> 22 
de os usuários poderem ter monitores de tamanhos diferentes e de poderem 
redimensionar a janela do browser para o tamanho que preferirem. 
 
2) As diferenças nos tamanhos das janelas dos browsers fazem com que o 
número de caracteres que cabem numa linha varie muito. Por esse motivo não 
seremos capazes de controlar nem o número de linhas nem os locais em que 
acontecem as mudanças de linha. Nunca tente formatar o texto inserindo espaços ou 
linhas vazias pois os resultados possíveis podem não ser aqueles que pretende obter! 
 
3) Quando encontra dois ou mais espaços seguidos, o HTML trata-os como se 
fossem um único espaço. Quando escreve uma seqüência de espaços seguidos o 
resultado é o mesmo de escrever um único espaço. Em HTML as teclas Tab e Enter 
equivalem a um espaço. 
 
4) Sempre que quiser inserir linhas em branco use o elemento <br>. Há quem 
use parágrafos vazios para obter o mesmo resultado, mas isso está errado. O 
elemento <p> deve ser usado apenas para definir parágrafos e o elemento