Nesta secção vamos analisar o código HTML que produz o lexia que a seguir se ilustra.
<html>
<head>
<title>O Seu Título aparecerá
aqui</title>
</head>
<body>
<h1 align="center">O Seu
Título aparecerá aqui</h1>
<p align="center"><img
src="WB00520_.gif" width="482" height="56"
alt="Banner do
Cabeçalho"></p>
<table border="0"
width="91%" cellpadding="0">
<tr>
<td width="70%"
align="left"><p align="left"><big>Atreva-se a dominar o
HTML e a fazer as suas páginas brilhar
no Universo cibernético da 'Internet'.</big><br>
<big>As potencialidades proporcionadas
por esta linguagem levam-no na maior viagem virtual que a humanidade até hoje já
experimentou.</big><br>
<big>Siga os seus sentidos...atreva-se!
</big><img src="AG00051_.gif" width="49"
height="23" alt="AG00051_.gif
(1652 bytes)"></td>
<td width="30%"
align="left"><img src="Ocean.jpg" width="185"
height="148"
alt="Ocean.jpg (25075 bytes)"
align="left"></td>
</tr>
</table>
<p align="center"><a
href="http://www.viagens.com"><img src="TR00255A.gif"
width="72"
height="53" alt="Viagens"
border="0"></a>
<big><big><big><big><big>*</big></big></big></big></big><a
href="http://www.livros.com"><img
src="BS00554A.gif" width="72" height="62"
alt="Livros"
border="0"></a>
<big><big><big><big><big>*</big></big></big></big></big><a
href="http://www.computadores.pt"><img
src="PE01799A.gif" width="61" height="62"
alt="Computadores"
border="0"></a></p>
</body>
</html>
Análise
do código HTML
O primeiro
'tag' é o <HTML>, sendo o último </HTML>;
Segue-se a
secção HEAD que, neste exemplo simples só contém, unicamente, o título do documento
que apenas irá aparecer na barra do título da janela do 'browser';
A secção
BODY começa com o título que, efectivamente, é mostrado na janela do 'Browser', seguido
da banda que constitui o cabeçalho (ficheiro de nome WB00520_.gif); note-se o uso dos atributos de
imagem Width e Height que permitem fazer o
redimensionamento directo da mesma, não obstante o seu tamanho original; repare-se ainda
no atributo alt que mostrará o texto que constitui
o seu valor, caso o 'browser' não possa mostrar a imagem;
Neste caso
é usada uma tabela de 1 linha por 1 coluna para se conseguir uma disposição precisa da
fotografia à direita do texto; isto também podia ter sido conseguido com o atributo align, para alinhamento da imagem em
relação ao texto circundante mas, sublinhe-se que para uma composição mais complexa de
elementos diversos, as tabelas permitem um controle mais exacto na colocação dos mesmos
no ecrã; os atributos da tabela definem que a mesma não terá bordos (atributo border), será dimensionada a 91% do
tamanho da largura da janela do 'Browser' (atributo width)e que não existirá qualquer
espaço entre os elementos no seu interior e o seu bordo interno (atributo cellpadding); note-se que, o atributo width também se aplica ao 'tag' <TD> para definir a largura
específica de cada coluna;
Assim, a
fotografia (ficheiro de nome Ocean.jpg)
, aparece inserida na segunda coluna da tabela (à frente do segundo 'tag' <TD>); portanto, o 'tag' <TR> define uma linha e o 'tag' <TD> uma coluna;
Note-se
que, neste caso, o aumento do tamanho da fonte é proporcionado pelo 'tag' <BIG>, cuja repetição sucessiva tem
efeito cumulativo;
A última
parte do código HTML constitui um parágrafo com alinhamento ao centro, no qual estão as
imagens da barra de navegação; cada imagem apresenta uma ligação hipertextual
fictícia que permitiria o acesso a outros documentos; se sublinhar o facto de todas as
imagens nesta parte estarem afectadas do atributo border com o valor de 0, já que, por omissão aparecerá um border azul sempre
que a imagem constituir um 'hyperlink';
os asteriscos, constituem apenas elementos separadores das imagens, tendo se feito
aumentar o tamanho da fonte usando o efeito cumulativo dos sucessivos 'tags' <BIG>;
Por fim,
não esquecer de encerrar a secção BODY e o próprio código HTML com os respectivos
'tags' </BODY> e </HTML>.
- - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - -
| TOPO DA PÁGINA
| SECÇÃO ANTERIOR |
|
|
|