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
<tr> 
 <td>Primeira</td> 
 <td>Linha</td> 
 </tr> 
 <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;> 76 
 <td>Segunda</td> 
 <td>Linha</td> 
 </tr> 
 </tbody> 
 </table> 
 
 <h4>Com frame=&quot;void&quot;:</h4> 
 
 <table frame=&quot;void&quot;> 
 <tbody> 
 <tr> 
 <td>Primeira</td> 
 <td>Linha</td> 
 </tr> 
 <tr> 
 <td>Segunda</td> 
 <td>Linha</td> 
 </tr> 
 </tbody> 
 </table> 
 
 <h4>Com frame=&quot;above&quot;:</h4> 
 
 <table frame=&quot;above&quot;> 
 <tbody> 
 <tr> 
 <td>Primeira</td> 
 <td>Linha</td> 
 </tr> 
 <tr> 
 <td>Segunda</td> 
 <td>Linha</td> 
 </tr> 
 </tbody> 
 </table> 
 
 <h4>Com frame=&quot;below&quot;:</h4> 
 
 <table frame=&quot;below&quot;> 
 <tbody> 
 <tr> 
 <td>Primeira</td> 
 <td>Linha</td> 
 </tr> 
 <tr> 
 <td>Segunda</td> 
 <td>Linha</td> 
 </tr> 
 </tbody> 
 </table> 
 
 <h4>Com frame=&quot;hsides&quot;:</h4> 
 
 <table frame=&quot;hsides&quot;> 
 <tbody> 
 <tr> 
 <td>Primeira</td> 
 <td>Linha</td> 
 </tr> 
 <tr> 
 <td>Segunda</td> 
 <td>Linha</td> 
 </tr> 
 </tbody> 
 </table> 
 
 <h4>Com frame=&quot;vsides&quot;:</h4> 
 
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;> 77 
 <table frame=&quot;vsides&quot;> 
 <tbody> 
 <tr> 
 <td>Primeira</td> 
 <td>Linha</td> 
 </tr> 
 <tr> 
 <td>Segunda</td> 
 <td>Linha</td> 
 </tr> 
 </tbody> 
 </table> 
 
 <h4>Com frame=&quot;lhs&quot;:</h4> 
 
 <table frame=&quot;lhs&quot;> 
 <tbody> 
 <tr> 
 <td>Primeira</td> 
 <td>Linha</td> 
 </tr> 
 <tr> 
 <td>Segunda</td> 
 <td>Linha</td> 
 </tr> 
 </tbody> 
 </table> 
 
 <h4>Com frame=&quot;rhs&quot;:</h4> 
 
 <table frame=&quot;rhs&quot;> 
 <tbody> 
 <tr> 
 <td>Primeira</td> 
 <td>Linha</td> 
 </tr> 
 <tr> 
 <td>Segunda</td> 
 <td>Linha</td> 
 </tr> 
 </tbody> 
 </table> 
</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;> 78 
 
 
 
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;> 79 
PARTE II: HTML Avançado 
 
11. Arranjo gráfico das páginas 
 
Utilizando a linguagem HTML nós podemos criar arranjos gráficos de página 
bastante elaborados nos quais podem existir setores com: barras de navegação, 
caixas com várias categorias de destaques, blocos de texto curtos, blocos de texto 
extensos, imagens, animações em flash, etc. O HTML necessário para produzir estes 
resultados pode ser bastante complexo. Existem duas formas possíveis para construir 
estes arranjos de página: 1) usar um programa de software que escreve HTML (como 
o Macromedia Dreamweaver MX) ou 2) trabalhar de forma muito metódica e escrever 
tudo num editor de texto. 
 
Qualquer que seja o caminho que escolher, se quiser obter bons resultados 
você vai ter que aprender HTML. Mesmo que use um programa que escreva HTML, há 
de chegar um momento em que ele não consegue produzir sozinho o resultado que 
você deseja. Nessa altura você vai ter de lhe dar uma ajuda editando diretamente uma 
parte do HTML e corrigindo-o. 
 
A criação de arranjos gráficos elaborados para as páginas da Web é uma 
tarefa que exige bastante treino e alguma sensibilidade para questões de design 
gráfico. 
 
12. Formatação com estilos CSS 
 
Em HTML 4 toda a formatação deve ser removida dos elementos da linguagem 
e colocada em Folhas de Estilos em Cascata (CSS) 
 
12.1 Com atuam os estilos? 
 
Quando o browser lê uma folha de estilos ele guarda na memória as definições 
que encontra. Ao apresentar a página, que contém referências a esses estilos, ele 
aplica as definições que leu antes para criar o aspecto gráfico desejado. Existem três 
maneiras diferentes para definir estilos CSS. 
 
12.2 Folha de estilos externa 
 
Uma folha de estilos externa é solução mais indicada quando se pretende 
aplicar os mesmos estilos a várias páginas. Este método de formatação permite-nos 
alterar os estilos apenas na folha e tê-los aplicados a todas as páginas imediatamente. 
Todas as páginas ficam atualizadas com as novas definições. Para uma página poder 
usar uma folha de estilos basta colocar dentro do cabeçalho (<head>) um elemento 
<link> com uma referência para a folha de estilos que contém as definições, como se 
ilustra a seguir: 
 
<head> 
 <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;meu_estilo.css&quot;> 
</head> 
 
12.3 Folhas de estilos internas 
 
As folhas de estilos internas devem ser usadas quando as definições são 
usadas por um único documento. Neste caso as definições dos estilos são colocadas 
dentro de um elemento <style> no cabeçalho do documento 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;> 80 
 
<head> 
 <style type=&quot;text/css&quot;> 
 body { background-color: red } 
 p { margin-left: 20px } 
 </style> 
</head> 
 
12.4 Estilos &quot;inline&quot; 
 
Um estilo &quot;inline&quot; usa-se quando a definição em causa só precisa ser usada 
uma única vez. 
 
A definição de estilos &quot;inline&quot; faz-se através do atributo style colocado no 
elemento ao qual queremos aplicar o estilo. A definição pode conter qualquer uma das 
propriedades CSS. O exemplo seguinte mostra como podemos alterar a cor e a 
margem esquerda de um parágrafo: 
 
<p style=&quot;color: blue; margin-left: 20px&quot;>Isto é um parágrafo</p> 
 
Para aprender estilos CSS faça o curso de Folhas de Estilos em Cascata. 
 
12.5 Elementos para estilos 
 
Elemento Descrição 
<style> Define estilos CSS 
<link> Define uma referência para um recurso externo 
<div> Insere uma seção no documento 
<span> Usa-se para alterar as definições de estilo apenas numa pequena parte 
do texto 
 
 
Exemplos de Aplicação 
 
 
Definição de estilos dentro do cabeçalho do documento HTML 
 
 
<html> 
<head> 
<title>Exemplo</title> 
<style type=&quot;text/css&quot;> 
 h1 {color: red} 
 h3 {color: blue} 
</style> 
</head> 
<body> 
 <h1>Isto é um cabeçalho de nível 1</h1> 
 <h3>Isto é um cabeçalho de nível 3</h3> 
</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;> 81 
 
 
Utilização de estilos definidos numa folha de estilos externa 
 
estilos.css 
 
h1,h2 { font-family: sans-serif; color: #666666; } 
p { font-family: cursive; } 
 
 
<html> 
<head> 
<link href=&quot;estilos.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot;> 
<title>Exemplo</title> 
</head> 
<body> 
 <h1>Este cabeçalho foi formatado com uma folha de estilos.</h1> 
 <p>Este parágrafo também!</p> 
</body> 
</html> 
 
 
 
 
12.6 O Elemento <font> 
 
O elemento <font> foi desaprovado nas especificações do HTML 4 e em 
HTML-Strict ele foi totalmente removido. 
 
Apesar de ainda ser usado por muita gente que continua