Você está na página 1de 46

HTML

Manipulações – Parte I
Prof. Peter Lucas Gomes Costa Branco
Estrutura

Especificação da versão de HTML


utilizada no documento (Data Type
Document):
HTML 4.01 Strict DTD pode conter todos os elementos e
atributos que não foram marcados como
desaconselhados (deprecated):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional DTD pode conter todos os
elementos e atributos do Strict DTD inclusive aqueles que
são desaconselhados (a maioria destes atributos têm a
ver com a apresentação visual):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset DTD difere do Transitional DTD por
permitir a utilização de frames:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01


Frameset//EN“
"http://www.w3.org/TR/html4/frameset.dtd">
O elemento HTML
A seguir à definição do tipo de documento, todo o
resto do documento é englobado pela etiqueta (tag)
HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
...o cabeçalho e o corpo do documento ...
</HTML>
A cabeça do documento
A cabeça contém informação sobre o documento
como o título, o autor, palavras-chave que serão
utilizadas por motores de busca, etc. A informação
contida na cabeça não é geralmente apresentada.
O Título
Todo o documento html tem que ter um título.
O título deve ser uma frase curta mas identificadora
do documento.
O título só pode aparecer uma única vez em cada
documento.
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <HTML>
 <HEAD>
 <TITLE>O título do documento.</TITLE>
 ... outros elementos do cabeçalho...
 </HEAD>
 <BODY>
 ... o corpo do documento...
 </BODY>
 </HTML>
Meta - Informação
A linguagem HTML permite que os autores
coloquem no documento informação sobre o
próprio documento, denominada meta-
informação. Por exemplo, é possível:
<META name="Author" lang="pt"
content="Ant&oacute;nio Pereira">
indicar palavras-chaves

<-- Palavras chave -->


<META name="keywords" lang="pt"
content="html, estrutura, tutorial">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>O título do documento.</TITLE>
<META name="Author" lang="pt" content="Ant&oacute;nio
Pereira">
<-- Palavras chave -->
<META name="keywords" lang="pt"
content="html, estrutura, tutorial">
... outros elementos do cabeçalho...
</HEAD>
<BODY>
... o corpo do documento...
</BODY>
</HTML>
O Corpo do documento
É no corpo do documento que se encontra o conteúdo
(informação) propriamente dita.
A forma como esse conteúdo é apresentado pode variar
consoante os dispositivos e o software que o utilizador está a
utilizar para aceder aos documentos.
Para os browsers gráficos mais comuns, o corpo do documento
pode ser encarado como uma "tela" onde se posicionam
elementos de texto, cores, figuras, gráficos, etc. No entanto, o
mesmo documento pode ser acedido por browsers de texto,
em que a informação relativa aos elementos gráficos deve
estar presente de outra forma. Podemos pensar ainda que
esse conteúdo possa vir a ser processado por um sintetizador
de voz, ou mostrado no reduzido visor de um telemóvel.
As folhas de estilo devem ser utilizadas para tratar da
apresentação da informação (aspectos visuais).
O corpo do documento deve conter o mínimo possível de
atributos visuais.

Mostra-se em seguida um exemplo (a evitar) da utilização de


atributos visuais no corpo do documento:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>HTML básico</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
link="red" alink="fuchsia" vlink="maroon">
... corpo do documento...
</BODY>
</HTML>
O mesmo efeito pode ser conseguido utilizando uma folha
de estilo incorporada no documento:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>HTML básico</TITLE>
<STYLE type="text/css">
BODY { background: white; color: black}
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuchsia }
</STYLE>
</HEAD>
<BODY>
... corpo do documento...
</BODY>
</HTML>
De uma forma mais correta, é possível ligar o documento
a uma folha de estilo externa. Assim, podemos alterar o
estilo do documento sem o editar e aplicar o mesmo
estilo a vários documentos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>HTML básico</TITLE>
<LINK rel="stylesheet" type="text/css"
href="estilos.css">
</HEAD>
<BODY>
... corpo do documento...
</BODY>
</HTML>
Os elementos que aparecem no corpo do documento são
classificados em:
1. elementos de bloco (block level)- aqueles que podem
conter outros elementos de bloco ou elementos em linha.
Geralmente cada elemento de bloco tem início numa nova
linha do ecrã.
2. elementos em linha (inline) - aqueles que apenas podem
conter outros elementos em linha e dados. Geralmente
estes elementos não dão origem ao aparecimento de uma
nova linha.
Os elementos do corpo do documento podem ser
agrupados com dois "contentores" genéricos de
elementos, que permitem, conjuntamente com as folhas
de estilo estruturar o documento e aplicar o layout
desejado à informação:
1. DIV - permite agrupar elementos de bloco e
elementos em linha. É um elemento de bloco.
2. SPAN - permite agrupar elementos em linha.
Manipulações de Texto
Espaços em branco
Em qualquer documento HTML, sequências de
espaços, tabulações e mudanças de linha, são
tratadas como um único espaço.
Os espaços, mudanças de linha e tabulações servem
apenas para separar as palavras e os vários
elementos do documento, não tendo assim
qualquer influência na formatação do mesmo.
O caracter &nbsp; (no breaking space) é muitas
vezes utilizado para questões de formatação: essa
utilização deve ser evitada!
A função deste caractere (como o nome indica) é
evitar que o browser separe duas palavras.
Exemplo:

Windows&nbsp;2000
Linhas e parágrafos
Para organizar o texto em parágrafos utiliza-se o
elemento P.

<P> Este é um parágrafo.</P>


<P> Este é outro parágrafo.</P>
<P> E mais um parágrafo.</P>

Note que um parágrafo não pode conter


elementos de bloco nem outros parágrafos.
Para se forçar uma mudança de linha dentro de
um parágrafo utiliza-se o elemento BR.
<P>Esta é a primeira linha de texto.<BR>
Esta é a segunda linha de texto<BR>
Esta é a terceira linha de texto<BR></P>

Note que o elemento BR não tem a etiqueta de


fim.
Os elementos H1, H2, H3, H4, H5, H6
Estes elementos permitem descrever o título de uma
secção do documento, desde o nível 1 (o mais
importante) até ao nível 6 (que corresponde a uma sub-
sub-sub-sub-sub-secção).
Geralmente os browsers apresentam os cabeçalhos mais
importantes com um tipo de letra maior que os menos
importantes.
O elemento DIV pode ser utilizado para associar um
elemento Hi com cada secção do documento. Assim, é
possível definir um estilo diferente para cada secção do
documento:
<DIV class="section" >
<H1>Título da secção</H1>
<P>Nesta secção discutimos ....
...esta secção continua...
<DIV class="subsection">
<H2>Título da sub-secção</H2>
<P>Nesta sub-secção ...
...esta sub-secção continua...
</DIV>
</DIV>
Elementos de estruturação do Texto
O elemento PRE permite escrever texto pré-
formatado. Neste caso os espaços em branco,
tabulações e mudanças de linha são respeitados
<PRE>
program ola;
var i:integer;
begin
for i:=1 to 100
do begin
writeln('olá');
writeln('E viva o mundo!');
end
end.
</PRE>
Outros elementos
EM: Este elemento dá ênfase ao texto.
STRONG: Este elemento dá uma ênfase maior
ao texto que o elemento EM.
CITE: Contém uma referência.

<P>Nesta frase é dado ênfase na última


<EM>palavra</EM><BR>
Nesta frase a última palavra ainda tem
mais <STRONG>ênfase</STRONG></P>
• O elemento BLOCKQUOTE utiliza-se para fazer
citações longas de texto.
O elemento Q serve para fazer pequenas
citações numa linha.
<BLOCKQUOTE
cite="http://www.twainquotes.com/Mathematics.html">
<P>We could use up two Eternities in learning all
that
is to be learned about our own world and the
thousands of nations
that have arisen and flourished and vanished from
it.<>br>
Mathematics alone would occupy me eight million
years.
</P>
</BLOCKQUOTE>
<P>A Maria diz, <Q>Vi a Joana ao jantar, ela disse
<Q>Preciso de falar urgentemente com o Paulo.</Q>
Acho que lhe vou telefonar.</Q>
</P>
NOTA: O elemento BLOCKQUOTE não deve ser
utilizado para fazer endentação de blocos de
texto.
Listas

– Listas sem ordem


– Listas numeradas
– Listas de definições
UL – Listas sem ordenação
• A lista anterior é uma lista sem ordem (UL) e
foi criada da seguinte forma:

<UL>
<LI>Listas sem ordem</LI>
<LI>Listas numeradas</LI>
<LI>Listas de definições</LI>
</UL>
OL – Listas Numeradas
• Um exemplo da utilização de uma lista ordenada
(OL) é o seguinte:
– <OL>

– <LI>O primeiro item.</LI>

– <LI>O segundo item.</LI>

– <LI>O terceiro item.</LI>

– </OL>
• O resultado do exemplo anterior é:
1. O primeiro item.
2. O segundo item.
3. O terceiro item.
DL – Listas com definições
Quanto às listas de definições (DL), estas são
constituídas por sequências de pares da forma
(termo , definição)

<DL>
<DT>Triângulo</DT><DD>Tem três lados.</DD>
<DT>Quadrado</DT><DD>Tem quatro lados.</DD>
<DT>Hexágono</DT><DD>Tem seis lados.</DD>
</DL>
Links - Âncoras
• O que realmente diferencia a linguagem HTML
de outras linguagens (como o TeX) é o poder
de estabelecer ligações para outros
documentos.
Estas ligações (links) são definidas com o
elemento A.
Por exemplo, para definir um link para o ficheiro
"aveiro.htm", existente no mesmo diretório do
documento atual, basta escrever:

<A href="aveiro.htm">a página de Aveiro</A>


Para estabelecer um link para um documento
num outro lugar da Web é necessário escrever o
endereço completo. Por exemplo:
Este é um link para o site do
<A href="http://www.w3.org/">World Wide Web
Consortium</A>
• Para estabelecer um link para um outro ponto do mesmo
documento, é necessário primeiro que tudo identificar esse ponto,
com o atributo "name". Por exemplo, para identificar a seção
"Introdução ao HTML" fazemos:

<H1><A name="int_html">Introdução ao HTML<A></H2>

• O atributo "name" identifica unicamente a seção do documento e é


possível criar um link para ela em qualquer outra zona do
documento (ou mesmo em outro documento). Por exemplo:
Vamos seguir para a seção

<A href="int_html">Introdução ao HTML</A>


Imagens
"mil imagens podem não valer uma única
palavra".
• Vamos supor que "foto_tinguan.jpg" é uma
imagem com 200×140 pixels existente no
mesmo diretório que o documento. Para
inserir a imagem usa-se o elemento:

<IMG src="foto_tinguan.jpg" width="200" height=“140"


alt=“Foto do meu carro">
– Deve sempre especificar-se o tamanho das
imagens.
– O atributo "alt" é fundamental pela questão de
acessibilidade. Nunca o devemos esquecer.

Você também pode gostar