Você está na página 1de 14

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


Criao de Listas - Listas ordenadas
<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

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

9-06-2011

Criao de Pginas WEB


Criao de Listas - Listas ordenadas

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/

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

9-06-2011

Criao de Pginas WEB


Criao de Listas - Listas No ordenadas
<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


Criao de Listas - Listas No ordenadas

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

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>
<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>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<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

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

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!

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

9-06-2011

Criao de Pginas WEB


Hiperligao para fora da pgina (mas dentro do site)

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 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

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

9-06-2011

Criao de Pginas WEB


Hiperligao para fora da pgina (mas dentro do site)

Criao de Pginas WEB


Hiperligao para fora da pgina (mas dentro do site)

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.

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

9-06-2011

Criao de Pginas WEB


Hiperligao para fora da pgina (mas dentro do site)

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


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 onze</title>
</head>
<body bgcolor="#FF0000">
<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

Formador: Cosmin Constantinescu

Centro de Form. Profissional de Alverca

9-06-2011

Criao de Pginas WEB


Hiperligao para fora da pgina (mas dentro do site)

Criao de Pginas WEB


Hiperligao para e-mail
<html>
1) Abrir o ficheiro modelo.txt com o bloco
<head>
de notas e digitar o seguinte cdigo HTML:
<title>Exemplo doze</title>
</head>
<body bgcolor="#FF0000">
<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>
2) Guardar o ficheiro com o nome exemp12.html (na pasta MeuSite) e testar no IE

Formador: Cosmin Constantinescu

10

Centro de Form. Profissional de Alverca

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

Formador: Cosmin Constantinescu

11

Centro de Form. Profissional de Alverca

9-06-2011

Criao de Pginas WEB


Uma Imagem vale por 1000 palavras
<html>
<head>
1) Abrir o ficheiro modelo.txt com o bloco
<title>Exemplo treze</title>
de notas e digitar o seguinte cdigo HTML:
</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">
<img src="planeta/terra.jpg" width="800" height="600">
<img src="planeta/terra.jpg" width="1" height="1">
</body>
</html>
2) Guardar o ficheiro com o nome exemp13.html (na pasta MeuSite) e testar no IE

Criao de Pginas WEB


Uma Imagem vale por 1000 palavras

Formador: Cosmin Constantinescu

12

Centro de Form. Profissional de Alverca

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>

1) Abrir o ficheiro modelo.txt com o bloco


de notas e digitar o seguinte cdigo HTML:

Guardar o ficheiro com o nome exemp14.html (na pasta MeuSite) e testar no IE

Formador: Cosmin Constantinescu

13

Centro de Form. Profissional de Alverca

9-06-2011

Criao de Pginas WEB


Tabelas

HTML
Sesso 3

HTML

Formador: Cosmin Constantinescu

14