0.3 HTML-03 - Listas e Tabelas

Centro de Form.
Profissional de Alverca
9-06-2011
HTML
Sesso 3
HTML
Criao de Pginas WEB

Criao de Listas
HTML possui 2 tipos de listas:
Listas ordenadas = Listas numeradas
Listas no-ordenadas = Listas com marcas
A estrutura bsica de uma lista em HTML :
Reparar: o elemento HTML

item no possui tag de fecho!
<tipo de lista>
<item> primeiro item da lista
<item> segundo item da lista
<item> terceiro item da lista
</tipo de lista>
Formador: Cosmin Constantinescu
Centro de Form. Profissional de Alverca
9-06-2011
Criao de Pginas WEB

Criao de Listas - Listas ordenadas
Uma lista ordenada (ordered list) utiliza nmeros ou caracteres para definir
cada elemento da lista (list item). Exemplo
1.
2.
3.
Caf
Arroz
Chocolate
a. Caf
b. Arroz
c. Chocolate
a. Caf
B. Arroz
IV. Chocolate
Um lista ordenada definida da seguinte maneira:

<ol>
<li>item 1
<li>item 2
<li>item 3
</ol>
Cada uma das tags ( <ol> , <li> ) possui modificadores sob a forma de atributos.
(Para consultar HTML v4.01 consultar : http://www.w3.org/TR/html4/
Criao de Pginas WEB

<html>
<head>
1) Abrir o ficheiro modelo.txt
<title>Exemplo seis</title>
de notas e digitar o seguinte
</head>
<body>
<p>Uma lista ordenada pode ser muito simples.</p>
<ol>
<li> <font face="verdana, arial" color="#00FF00"><b>Item 1</b></font>
<li>Item 2
</ol>
<p>Uma lista ordenada pode ser de uma variedade de tipos:</p>
<ol>
<li type="A">indice em maisculas
<li type="I"> indice em numeral romano maisculo
</ol>
</body>
</html>
com o bloco
cdigo HTML:
2) Guardar o ficheiro com o nome exemp06.html e observar o resultado no IE
9-06-2011
Criao de Pginas WEB

Criao de Pginas WEB

Criao de Listas - Listas No ordenadas
Uma lista no-ordenada (unordered list) utiliza smbolos (crculos slidos,
crculos vazios, quadrados slidos ou vazios) para definir cada elemento
da lista (list item). Exemplo
Acar
Leite
Ovos
Acar
Leite
Ovos
Um lista no-ordenada definida da seguinte maneira:

<ul>
<li>item 1
<li>item 2
<li>item 3
</ul>
Cada uma das tags ( <ul> , <li> ) possui modificadores sob a forma de atributos.
(Para consultar HTML v4.01 consultar : http://www.w3.org/TR/html4/
9-06-2011
Criao de Pginas WEB

<html>
1) Abrir o ficheiro modelo.txt
<head>
<title>Exemplo sete</title>
de notas e digitar o seguinte
</head>
<body>
<ul>
<li type="square">Lista no ordenada
<ul>
<li type="disc">As listas podem ser aninhadas
<ul>
<li type="circle">Um item de uma lista aninhada<br>
Uma outra linha do mesmo item
</ul>
</ul>
</ul>
</body>
</html>
com o bloco
cdigo HTML:
Guardar o ficheiro com o nome exemp07.html e observar o resultado no IE
Criao de Pginas WEB

9-06-2011
Criao de Pginas WEB

Como criar ligaes (hiperligaes)
Uma hiperligao pode criar uma ligao entre a pgina actual

e uma outra pgina (no mesmo site ou noutro site), entre partes
diferentes da mesma pgina ou entre a pgina actual e o cliente
de correio electrnico do visitante.
Para criar uma hiperligao utilizamos

a tag <a> (do ingls, anchor)
<a href="link">texto do link</a>
Criao de Pginas WEB

Hiperligao para dentro da pgina
<html>
<head>
1) Abrir o ficheiro
<title>Exemplo oito</title>
de notas e digitar
</head>
<body>
<p>Clique num dos links seguintes para ver a informao</p>
<a href="#mercurio">O planeta Mercrio</a>
<a href="#venus">O planeta Vnus</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="mercurio">
<h1>O planeta Mercrio</h1></a>
<p>O planeta mais prximo do Sol</p>
<a name="venus">
<h1>O planeta Vnus</h1></a>
<p>O segundo planeta do sistema solar</p>
</body>
</html>
modelo.txt com o bloco

o seguinte cdigo HTML:
2)Guardar o ficheiro com o nome exemp08.html e observar o resultado no IE
9-06-2011
Criao de Pginas WEB

Hiperligao para dentro da pgina
Criao de Pginas WEB

Hiperligao para fora da pgina (mas dentro do site)
<html>
1) Abrir o ficheiro modelo.txt com o bloco
<head>
de notas e digitar o seguinte cdigo HTML:
<title>Exemplo nove</title>
</head>
<body bgcolor="#FFFF00">
<h1>PGINA 9</h1>
<hr>
<p>Esta pgina (Exemplo9) vai esta ligada com a pgina Exemplo10</p>
<p>Clique <a href="exemp10.html">aqui</a> para abrir a pgina Exemplo10</p>
</body>
</html>
Guardar o ficheiro com o nome exemp09.html mas no testar ainda!
9-06-2011
Criao de Pginas WEB

Criao de Pginas WEB

<html>
<head>
<title>Exemplo dez</title>
</head>
<body bgcolor="#FF0000">
<h1>PGINA 10</h1>
<hr>
<p>Esta pgina (Exemplo10) vai esta ligada com a pgina Exemplo9</p>
<p>Clique <a href="exemp09.html">aqui</a> para abrir a pgina Exemplo9</p>
</body>
</html>
2)Guardar o ficheiro com o nome exemp10.html testar no IE
9-06-2011
Criao de Pginas WEB

Criao de Pginas WEB

Muito importante:
No exemplo anterior os 2 ficheiros hiperligados
encontravam-se na mesma pasta Neste caso
basta indicar em href os nomes dos ficheiros que
queremos ligar.
Caso os ficheiros hiperligados estejam em pastas
diferentes necessrio indicar o caminho at
eles no atributo href.
9-06-2011
Criao de Pginas WEB

Muito importante: Exemplo
Copiar o ficheiro Exemp09.html para a pasta ExemploSite

Experimentar as hiperligaes entre os ficheiros
exemp09.html e exemp10.html No iro funcionar
porque agora os ficheiros esto em pastas diferentes e
necessrio indicar o caminho at eles
No ficheiro exemp09.html alterar o atributo href na tag A
para href="..\exemp10.html"
No ficheiro exemp10.html alterar o atributo href na tag A
para href="SI10/exemp9.html"
Testar os links agora devero funcionar
Criao de Pginas WEB

<html>
<head>
<title>Exemplo onze</title>
</head>
<h1>O Google</h1>
<hr>
<p>O <a href="http://www.google.com">Google</a> o mais famoso motor de
pesquisa da actualidade</p>
</body>
</html>
2) Guardar o ficheiro com o nome exemp11.html (na pasta MeuSite) e testar no IE
9-06-2011
Criao de Pginas WEB

Criao de Pginas WEB

Hiperligao para e-mail
<html>
<head>
<title>Exemplo doze</title>
</head>
<h1>PGINA 12</h1>
<hr>
<p>Esta pgina foi desenvolvida por mim, escrita por mim e chama-se eu!</p>
<p>Para enviar uma mensagem para mim clique <a href="mailto:a@a.com">
aqui</a>
</body>
</html>
10
9-06-2011
Criao de Pginas WEB

Hiperligao para e-mail
Criao de Pginas WEB

Uma Imagem vale por 1000 palavras
Para inserir uma imagem numa pgina utiliza-se o elemento

HTML img e indica-se no atributo src (source) a localizao
da imagem.
<img src="ficheiro">
Muito Importante:
Utilizar ficheiros do tipo JPG (muitas cores) ou GIF (255
cores)
Se o ficheiro de imagem estiver na mesma pasta da pgina
onde ser inserida indicar apenas o nome.
Caso contrrio indicar o caminho
11
9-06-2011
Criao de Pginas WEB

<html>
<head>
<title>Exemplo treze</title>
</head>
<body>
<h1>O Planeta Terra</h1>
<hr>
<div align="center"><img src="planeta/terra.jpg"></div>
<p>Esta pgina dedicada ao estudo do planeta terra</p>
<img src="planeta/terra.jpg" width="200" height="150">
</body>
</html>
Criao de Pginas WEB

12
9-06-2011
Criao de Pginas WEB

Tabelas
A tabela um dos elementos HTML mais importantes, no s

pela sua importncia como elemento organizador da
informao mas tambm por que era, at h pouco tempo, a
nica ferramenta de layout ao dispor do web designer.
Uma tabela representada em HTML pela tag
<table></table>.
Cada linha de uma tabela representada pela tag
<tr></tr>
Cada clula de uma tabela representada pela tag
<td></td> (dados) ou <th></th> (cabealho)
Criao de Pginas WEB

Tabelas
<html>
<head>
<title>Exemplo Catorze</title>
</head>
<body>
<h1>Tabela</h1>
<hr>
<table border="1">
<caption>Grande Tabela</caption>
<tr>
<th>Fruta</th>
<th>Cor</th>
</tr>
<tr>
<td>Ma</td>
<td>Vermelho</td>
</tr>
</table>
</body>
</html>

Guardar o ficheiro com o nome exemp14.html (na pasta MeuSite) e testar no IE
13
9-06-2011
Criao de Pginas WEB

Tabelas
HTML
Sesso 3
HTML
14

0.3 HTML-03 - Listas e Tabelas

Uploaded by

Document Information

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

0.3 HTML-03 - Listas e Tabelas

Uploaded by

Copyright:

Available Formats

Centro de Form.

Criao de Pginas WEB

Reparar: o elemento HTML

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

Criao de Pginas WEB

Um lista ordenada definida da seguinte maneira:

Criao de Pginas WEB

2) Guardar o ficheiro com o nome exemp06.html e observar o resultado no IE

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

Criao de Pginas WEB

Criao de Pginas WEB

Um lista no-ordenada definida da seguinte maneira:

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

Criao de Pginas WEB

Guardar o ficheiro com o nome exemp07.html e observar o resultado no IE

Criao de Pginas WEB

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

Criao de Pginas WEB

Uma hiperligao pode criar uma ligao entre a pgina actual

Para criar uma hiperligao utilizamos

Criao de Pginas WEB

modelo.txt com o bloco

2)Guardar o ficheiro com o nome exemp08.html e observar o resultado no IE

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

Criao de Pginas WEB

Criao de Pginas WEB

Guardar o ficheiro com o nome exemp09.html mas no testar ainda!

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

Criao de Pginas WEB

Criao de Pginas WEB

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

Criao de Pginas WEB

Criao de Pginas WEB

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

Criao de Pginas WEB

Muito importante: Exemplo

Copiar o ficheiro Exemp09.html para a pasta ExemploSite

Criao de Pginas WEB

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

Criao de Pginas WEB

Criao de Pginas WEB

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

Criao de Pginas WEB

Criao de Pginas WEB

Para inserir uma imagem numa pgina utiliza-se o elemento

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

Criao de Pginas WEB

Criao de Pginas WEB

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

Criao de Pginas WEB

A tabela um dos elementos HTML mais importantes, no s

Criao de Pginas WEB