Aula 2 - Manipulações Do HTML - Parte I

HTML Manipulaes Parte I
Prof. Peter Lucas Gomes Costa Branco, MSc
Estrutura
Especificao da verso de HTML utilizada no documento (Data Type Document):
HTML 4.01 Strict DTD pode conter todos os elementos e atributos que no 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 so desaconselhados (a maioria destes atributos tm a ver com a apresentao 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 utilizao 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 definio 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 cabealho e o corpo do documento ... </HTML>
A cabea do documento
A cabea contm informao sobre o documento como o ttulo, o autor, palavras-chave que sero utilizadas por motores de busca, etc. A informao contida na cabea no geralmente apresentada.
O Ttulo
Todo o documento html tem que ter um ttulo. O ttulo deve ser uma frase curta mas identificadora do documento. O ttulo s pode aparecer uma nica vez em cada documento.
"http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>O ttulo do documento.</TITLE>
... outros elementos do cabealho...

</HEAD> <BODY> ... o corpo do documento... </BODY> </HTML>
Meta - Informao
A linguagem HTML permite que os autores coloquem no documento informao sobre o prprio documento, denominada meta-informao. Por exemplo, possvel:
<META name="Author" lang="pt"
content="Antó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 ttulo do documento.</TITLE> <META name="Author" lang="pt" content="António Pereira"> <-- Palavras chave --> <META name="keywords" lang="pt"
content="html, estrutura, tutorial">

... outros elementos do cabealho... </HEAD> <BODY> ... o corpo do documento... </BODY> </HTML>
O Corpo do documento
no corpo do documento que se encontra o contedo (informao) propriamente dita. A forma como esse contedo apresentado pode variar consoante os dispositivos e o software que o utilizador est a utilizar para aceder aos documentos. Para os browsers grficos mais comuns, o corpo do documento pode ser encarado como uma "tela" onde se posicionam elementos de texto, cores, figuras, grficos, etc. No entanto, o mesmo documento pode ser acedido por browsers de texto, em que a informao relativa aos elementos grficos deve estar presente de outra forma. Podemos pensar ainda que esse contedo possa vir a ser processado por um sintetizador de voz, ou mostrado no reduzido visor de um telemvel.
As folhas de estilo devem ser utilizadas para tratar da apresentao da informao (aspectos visuais). O corpo do documento deve conter o mnimo possvel de atributos visuais. Mostra-se em seguida um exemplo (a evitar) da utilizao 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 bsico</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 bsico</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, possvel 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 vrios documentos:

"http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>HTML bsico</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 so 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 incio numa nova linha do ecr. 2.elementos em linha (inline) - aqueles que apenas podem conter outros elementos em linha e dados. Geralmente estes elementos no do origem ao aparecimento de uma nova linha.
Os elementos do corpo do documento podem ser agrupados com dois "contentores" genricos de elementos, que permitem, conjuntamente com as folhas de estilo estruturar o documento e aplicar o layout desejado informao: 1.DIV - permite agrupar elementos de bloco e elementos em linha. um elemento de bloco. 2.SPAN - permite agrupar elementos em linha.
Manipulaes de Texto
Espaos em branco
Em qualquer documento HTML, sequncias de espaos, tabulaes e mudanas de linha, so tratadas como um nico espao. Os espaos, mudanas de linha e tabulaes servem apenas para separar as palavras e os vrios elementos do documento, no tendo assim qualquer influncia na formatao do mesmo. O caracter (no breaking space) muitas vezes utilizado para questes de formatao: essa utilizao deve ser evitada!
A funo deste caractere (como o nome indica) evitar que o browser separe duas palavras. Exemplo:
Windows 2000
Linhas e pargrafos
Para organizar o texto em pargrafos utiliza-se o elemento P.
<P> Este um pargrafo.</P> <P> Este outro pargrafo.</P> <P> E mais um pargrafo.</P>
Note que um pargrafo no pode conter elementos de bloco nem outros pargrafos.
Para se forar uma mudana de linha dentro de um pargrafo 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 no tem a etiqueta de fim.
Os elementos H1, H2, H3, H4, H5, H6

Estes elementos permitem descrever o ttulo de uma seco do documento, desde o nvel 1 (o mais importante) at ao nvel 6 (que corresponde a uma subsub-sub-sub-sub-seco). Geralmente os browsers apresentam os cabealhos 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 seco do documento. Assim, possvel definir um estilo diferente para cada seco do documento:
<DIV class="section" > <H1>Ttulo da seco</H1>
<P>Nesta seco discutimos ....

...esta seco continua... <DIV class="subsection"> <H2>Ttulo da sub-seco</H2> <P>Nesta sub-seco ... ...esta sub-seco continua... </DIV>
</DIV>
Elementos de estruturao do Texto

O elemento PRE permite escrever texto prformatado. Neste caso os espaos em branco, tabulaes e mudanas de linha so 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: Contm uma referncia.
<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 citaes longas de texto. O elemento Q serve para fazer pequenas citaes 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 no deve ser utilizado para fazer endentao de blocos de texto.
Listas
Listas sem ordem Listas numeradas Listas de definies
UL Listas sem ordenao

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 definies</LI> </UL>
OL Listas Numeradas
Um exemplo da utilizao 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 definies

Quanto s listas de definies (DL), estas so constitudas por sequncias de pares da forma (termo , definio)
<DL> <DT>Tringulo</DT><DD>Tem trs lados.</DD> <DT>Quadrado</DT><DD>Tem quatro lados.</DD> <DT>Hexgono</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 ligaes para outros documentos. Estas ligaes (links) so definidas com o elemento A.
Por exemplo, para definir um link para o ficheiro "aveiro.htm", existente no mesmo diretrio do documento atual, basta escrever:
<A href="aveiro.htm">a pgina de Aveiro</A>
Para estabelecer um link para um documento num outro lugar da Web necessrio escrever o endereo 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, necessrio primeiro que tudo identificar esse ponto, com o atributo "name". Por exemplo, para identificar a seo "Introduo ao HTML" fazemos:
<H1><A name="int_html">Introduo ao HTML<A></H2>
O atributo "name" identifica unicamente a seo do documento e possvel criar um link para ela em qualquer outra zona do documento (ou mesmo em outro documento). Por exemplo: Vamos seguir para a seo
<A href="int_html">Introduo ao HTML</A>
Imagens
"mil imagens podem no valer uma nica palavra".
Vamos supor que "foto_tinguan.jpg" uma imagem com 200140 pixels existente no mesmo diretrio 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 questo de acessibilidade. Nunca o devemos esquecer.

Aula 2 - Manipulações Do HTML - Parte I

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aula 2 - Manipulações Do HTML - Parte I

Uploaded by

Copyright:

Available Formats

HTML Manipulaes Parte I

Prof. Peter Lucas Gomes Costa Branco, MSc

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN "http://www.w3.org/TR/html4/frameset.dtd">

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

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

"http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>O ttulo do documento.</TITLE>

... outros elementos do cabealho...

<META name="Author" lang="pt"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

content="html, estrutura, tutorial">

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

link="red" alink="fuchsia" vlink="maroon">

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

Os elementos que aparecem no corpo do documento so classificados em:

Note que o elemento BR no tem a etiqueta de fim.

Os elementos H1, H2, H3, H4, H5, H6

<DIV class="section" > <H1>Ttulo da seco</H1>

<P>Nesta seco discutimos ....

Elementos de estruturao do Texto

<P>A Maria diz, <Q>Vi a Joana ao jantar, ela disse

UL Listas sem ordenao

<UL> <LI>Listas sem ordem</LI>

<LI>O primeiro item.</LI>

O resultado do exemplo anterior :

DL Listas com definies

<A href="aveiro.htm">a pgina de Aveiro</A>

You might also like