Centro de Form. Profissional de Alverca HTML. Sessão 3 HTML. A estrutura básica de uma lista em HTML é:

Tamanho: px

Começar a partir da página:

Download "Centro de Form. Profissional de Alverca HTML. Sessão 3 HTML. A estrutura básica de uma lista em HTML é:"

Vitorino Canto Henriques
6 Há anos
Visualizações:

1 HTML Sessão 3 HTML Criação de Listas HTML possui 2 tipos de listas: Listas ordenadas = Listas numeradas Listas não-ordenadas = Listas com marcas A estrutura básica de uma lista em HTML é: Reparar: o elemento HTML <tipo de lista> item não possui tag de fecho! <item> primeiro item da lista <item> segundo item da lista <item> terceiro item da lista </tipo de lista> Formador: Cosmin Constantinescu 1

2 Criação de Listas - Listas ordenadas Uma lista ordenada (ordered list) utiliza números ou caracteres para definir cada elemento da lista (list item). Exemplo 1. Café a. Café a. Café 2. Arroz b. Arroz B. Arroz 3. Chocolate c. Chocolate 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 : Criação de Listas - Listas ordenadas <title>exemplo seis</title> de notas e digitar o seguinte código HTML: <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 maiúsculas <li type="i"> indice em numeral romano maiúsculo </ol> 2) Guardar o ficheiro com o nome exemp06.html e observar o resultado no IE Formador: Cosmin Constantinescu 2

Criação de Listas - Listas ordenadas Criação de Listas - Listas Não ordenadas Uma lista não-ordenada (unordered list) utiliza símbolos (círculos sólidos, círculos vazios, quadrados sólidos ou vazios)

3 Criação de Listas - Listas ordenadas Criação de Listas - Listas Não ordenadas Uma lista não-ordenada (unordered list) utiliza símbolos (círculos sólidos, círculos vazios, quadrados sólidos ou vazios) para definir cada elemento da lista (list item). Exemplo Açúcar Leite Ovos Açúcar Leite Ovos Um lista não-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 : Formador: Cosmin Constantinescu 3

Criação de Listas - Listas Não ordenadas <title>exemplo sete</title> de notas e digitar o seguinte código HTML: <body> <ul> <li type="square">lista não ordenada <ul> <li type="disc">as listas podem

4 Criação de Listas - Listas Não ordenadas <title>exemplo sete</title> de notas e digitar o seguinte código HTML: <body> <ul> <li type="square">lista não 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> Guardar o ficheiro com o nome exemp07.html e observar o resultado no IE Criação de Listas - Listas Não ordenadas Formador: Cosmin Constantinescu 4

5 Como criar ligações (hiperligações) Uma hiperligação pode criar uma ligação entre a página actual e uma outra página (no mesmo site ou noutro site), entre partes diferentes da mesma página ou entre a página actual e o cliente de correio electrónico do visitante. Para criar uma hiperligação utilizamos a tag <a> (do inglês, anchor) <a href="link">texto do link</a> Hiperligação para dentro da página <title>exemplo oito</title> <body> <p>clique num dos links seguintes para ver a informação</p> <a href="#mercurio">o planeta Mercúrio</a> <a href="#venus">o planeta Vénus</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 Mercúrio</h1></a> <p>o planeta mais próximo 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 Vénus</h1></a> <p>o segundo planeta do sistema solar</p> de notas e digitar o seguinte código HTML: 2)Guardar o ficheiro com o nome exemp08.html e observar o resultado no IE Formador: Cosmin Constantinescu 5

ligada com a página Exemplo10</p> <p>clique <a href="exemp10.

6 Hiperligação para dentro da página de notas e digitar o seguinte código HTML: <title>exemplo nove</title> <body bgcolor="#ffff00"> <h1>página 9</h1> <hr> <p>esta página (Exemplo9) vai esta ligada com a página Exemplo10</p> <p>clique <a href="exemp10.html">aqui</a> para abrir a página Exemplo10</p> Guardar o ficheiro com o nome exemp09.html mas não testar ainda! Formador: Cosmin Constantinescu 6

com a página Exemplo9</p> <p>clique <a href="exemp09.

7 de notas e digitar o seguinte código HTML: <title>exemplo dez</title> <body bgcolor="#ff0000"> <h1>página 10</h1> <hr> <p>esta página (Exemplo10) vai esta ligada com a página Exemplo9</p> <p>clique <a href="exemp09.html">aqui</a> para abrir a página Exemplo9</p> 2)Guardar o ficheiro com o nome exemp10.html testar no IE Formador: Cosmin Constantinescu 7

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

8 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 é necessário indicar o caminho até eles no atributo href. Formador: Cosmin Constantinescu 8

9 Muito importante: Exemplo Copiar o ficheiro Exemp09.html para a pasta ExemploSite Experimentar as hiperligações entre os ficheiros exemp09.html e exemp10.html Não irão funcionar porque agora os ficheiros estão em pastas diferentes e é necessário 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 deverão funcionar <title>exemplo onze</title> <body bgcolor="#ff0000"> <h1>o Google</h1> <hr> de notas e digitar o seguinte código HTML: <p>o <a href=" é o mais famoso motor de pesquisa da actualidade</p> 2) Guardar o ficheiro com o nome exemp11.html (na pasta MeuSite) e testar no IE Formador: Cosmin Constantinescu 9

Hiperligação para e-mail <title>exemplo doze</title> <body bgcolor="#ff0000"> <h1>página 12</h1> <hr> de notas e digitar o seguinte código HTML: <p>esta página foi desenvolvida por mim, escrita por

10 Hiperligação para <title>exemplo doze</title> <body bgcolor="#ff0000"> <h1>página 12</h1> <hr> de notas e digitar o seguinte código HTML: <p>esta página 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> 2) Guardar o ficheiro com o nome exemp12.html (na pasta MeuSite) e testar no IE Formador: Cosmin Constantinescu 10

Hiperligação para e-mail Uma Imagem vale por 1000 palavras Para inserir uma imagem numa página utiliza-se o elemento HTML img e indica-se no atributo src (source) a localização da imagem.

11 Hiperligação para Uma Imagem vale por 1000 palavras Para inserir uma imagem numa página utiliza-se o elemento HTML img e indica-se no atributo src (source) a localização 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 página onde será inserida indicar apenas o nome. Caso contrário indicar o caminho Formador: Cosmin Constantinescu 11

jpg" width="200" height="150"> <img src="planeta/terra.jpg" width="800" height="600"> <img src="planeta/terra.

12 Uma Imagem vale por 1000 palavras <title>exemplo treze</title> de notas e digitar o seguinte código HTML: <body> <h1>o Planeta Terra</h1> <hr> <div align="center"><img src="planeta/terra.jpg"></div> <p>esta página é 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"> 2) Guardar o ficheiro com o nome exemp13.html (na pasta MeuSite) e testar no IE Uma Imagem vale por 1000 palavras Formador: Cosmin Constantinescu 12

13 Tabelas A tabela é um dos elementos HTML mais importantes, não só pela sua importância como elemento organizador da informação mas também 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 célula de uma tabela é representada pela tag <td> </td> (dados) ou <th> </th> (cabeçalho) Tabelas <title>exemplo Catorze</title> <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> de notas e digitar o seguinte código HTML: Guardar o ficheiro com o nome exemp14.html (na pasta MeuSite) e testar no IE Formador: Cosmin Constantinescu 13

14 Tabelas HTML Sessão 3 HTML Formador: Cosmin Constantinescu 14

Documentos relacionados

HTML HTML. Centro de Form. Profissional de Alverca Formador: Cosmin Constantinescu 1

HTML HTML. Centro de Form. Profissional de Alverca Formador: Cosmin Constantinescu 1 HTML Sessão 7 HTML são mapas de imagem são outro tipo de grafismo muito utilizado na Web. Trata-se de uma forma de utilizar as imagens como links, em que a imagem é dividida em zonas e em que cada