AULA 2 - HTML
28/03/2014 ERI – MT 2013 1
Cabeçalhos
• São linhas do documento que são exibidas no
browser com letras diferentes do restante do
texto chamando a atenção de uma nova
seção ou tópico. Sempre que se definir um
novo cabeçalho, uma nova linha é inserida
em branco após a sua linha. Ao definir o
tamanho de um cabeçalho, não se está
definindo o tamanho da letra, apenas é
indicado ao navegador de cada usuário que
deve ser visualizado com maior ou menor
destaque que o resto do texto.
28/03/2014 Programação Para Ambientes WEB 2
Cabeçalhos
• Assim como em um livro, uma página HTML
pode conter uma hierarquia de títulos para
estabelecer uma divisão de seu conteúdo.
• Para conseguirmos realizar essa tarefa
devemos utilizar as tags de cabeçalho h1, h2,
h3, h4, h5 e h6.
• Os sufixos numéricos de 1 a 6 indicam o nível
do título dentro da hierarquia de títulos do
documento.
28/03/2014 Programação Para Ambientes WEB 3
Cabeçalhos
<html>
<head>
<title> Exemplo de cabeçalhos</title>
</head>
<body>
<h1 >Título 1</h1 >
<h2 >Título 2</h2 >
<h3 >Título 3</h3 >
<h4 >Título 4</h4 >
<h5 >Título 5</h5 >
<h6 >Título 6</h6 >
</body>
</html>
28/03/2014 Programação Para Ambientes WEB 4
Cabeçalhos
• Perceba que cada nível possui um tamanho
diferente de fonte. Esse tamanho é
determinado pelo navegador e pode ser
alterado através de regras CSS que veremos
posteriormente.
• Devemos utilizar os cabeçalhos com cautela,
pois eles são utilizados como parâmetros de
ranqueamento da página por diversos
buscadores como Google, Yahoo e Bing, por
exemplo.
28/03/2014 Programação Para Ambientes WEB 5
Cabeçalhos
• O uso correto das tags de cabeçalho faz parte
das técnicas de SEO (Search Engine
Optimization) que, como o próprio nome já
indica, são técnicas que ajudam a melhorar o
ranqueamento de páginas dentro dos
buscadores.
• De acordo com as técnicas de SEO devemos
tomar os seguintes cuidados ao utilizarmos
as tags de cabeçalhos:
– Utilizar apenas uma tag <h1> por página.
– Utilizar no máximo duas tags <h2> por página.
28/03/2014 Programação Para Ambientes WEB 6
Exercício
• Utilizando as tags de cabeçalho, crie uma
página HTML que exiba hierarquicamente o
nome e uma curiosidade de alguns
continentes, países, estados (províncias) e
cidades, pessoas, etc...
28/03/2014 Programação Para Ambientes WEB 7
Parágrafos
• Os parágrafos dentro de um documento
HTML, em geral, são definidos através do
elemento p. Uma das principais
características desse elemento é que ele
ocupa horizontalmente todo o espaço
definido pelo elemento pai. Esse é o
comportamento dos elementos de bloco que
discutiremos com mais detalhes
posteriormente.
28/03/2014 Programação Para Ambientes WEB 8
Parágrafos
• Por enquanto, o importante é sabermos que,
devido ao comportamento de bloco do
elemento p, o navegador ajustará o texto do
parágrafo à largura do elemento pai
realizando todas as quebras de linha
necessárias. Caso seja necessário forçar uma
quebra de linha, podemos utilizar a elemento
br.
28/03/2014 Programação Para Ambientes WEB 9
Parágrafos
• A TAG responsável pela quebra de parágrafos
é a <P> que finaliza o parágrafo e insere
automaticamente uma linha em branco entre
parágrafos. Também responsável pelo
alinhamento de parágrafos.
28/03/2014 Programação Para Ambientes WEB 10
Parágrafos
<html>
<head>
<title>Exemplo de quebra de linha em um
parágrafo</title>
</head>
<body>
<p> Um texto bem longo. Longo mesmo! Este parágrafo
serve para demonstrar o comportamento da quebra de linha automática, ou
seja, sem utilizar nenhum recurso para que a quebra ocorra.</p>
<p> Já este parágrafo demonstra a quebra de linha
forçada.<br/>Percebeu?</p>
</body>
</html>
28/03/2014 Programação Para Ambientes WEB 11
Parágrafos
Tag <P>:
Sintaxe de comando:
<P ALIGN= “posição”> Texto do parágrafo.
posição pode ser:
Left: alinhamento à esquerda;
Center: centralizado;
Right: alinhamento à direita.
28/03/2014 Programação Para Ambientes WEB 12
Parágrafos
<html>
<head>
<title>Exemplo de quebra de linha em um
parágrafo</title>
</head>
<body>
<P> Este parágrafo utiliza o alinhamento padrão dos
navegadores de internet (esquerdo). </P>
<P ALIGN=“center”> Este parágrafo tem o alinhamento
centralizado. </P>
<P ALIGN=“right”> Este parágrafo tem o alinhamento a
direita. </P>
<P ALIGN=“left”> Este parágrafo tem o alinhamento a
esquerda. </P>
</body>
</html>
28/03/2014 Programação Para Ambientes WEB 13
Exercício
• Crie um documento HTML com quatro
parágrafos de texto qualquer. O primeiro
alinhado a direita, o segundo alinhado a
esquerda, o terceiro centralizado e o quarto
alinhado a esquerda com uma quebra de
linha em qualquer parte do parágrafo.
28/03/2014 Programação Para Ambientes WEB 14