Você está na página 1de 31

1

Prof. Tc. Gerson James

COMPUMASTER INFORMTICA
WEBDESIGN

Introduo ao HTML Hyper Text Markup Language


Prof. Tc. Gerson James

2
Prof. Tc. Gerson James

Linguagem usada nas pginas da web Documentos escritos em ASCII- texto Cada pgina um ficheiro que tem a extenso .htm ou .html O nome do ficheiro tem de ser em minsculas, sem acentos e sem espaos.

HTML

3
Prof. Tc. Gerson James

Um elemento HTML constitudo preferencialmente por 3 partes Marca(tags) de inicio <p>html</p> Contedo Marca(tags) de fim

Marcas

4
Prof. Tc. Gerson James

Marca de inicio composta por

Marca de inicio

<tag atributo1=valor atributo2=valor2>


Os atributos podem ser obrigatrios ou opcionais Usar sempre minsculas na escrita das marcas

5
Prof. Tc. Gerson James

Contedo

Contedo basicamente o texto que aparece nas pginas pode ser escrito em portugus, com maisculas, minsculas, acentos e espaos

6
Prof. Tc. Gerson James

A marca de fim serve exclusivamente para indicar o fim do elemento que estamos a utilizar Usa-se o sinal / Por exemplo:

Marca de fim

</p> </table>

7
Prof. Tc. Gerson James

Existem elementos HTML que s tm a primeira Marca de inicio

Marcas

<br> <img src=imagem.gif>

8
Prof. Tc. Gerson James

Estrutura de uma pgina


DOCTYPE define a verso do HTML que estamos a trabalhar
Por defeito pomos a ltima mais usada <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Definio de inicio e fim de uma pgina HTML - <html></html> Dentro da pgina temos duas seces: Cabealho: <head></head> Corpo ou Contedo: <body></body>

9
Prof. Tc. Gerson James

Exemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body> <p>Primeira pgina</p>

</body> </html>

10
Prof. Tc. Gerson James

Titulo que aparece em cima - <title></title> Tipo de contedos e de linguagem Autor Descrio da pgina Keywords

Cabealho

As Metas do informaes das mais variadas espcies

<HEAD> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1"> <TITLE>Tecnologia das Mdias</TITLE> <META NAME="Author" CONTENT=Gerson James"> <META NAME="Description" CONTENT=Pgina da disciplina HTML"> <META NAME="KeyWords" CONTENT=informatica,computadores"> </HEAD>

11
Prof. Tc. Gerson James

Elementos do Corpo
Paragrafo e quebra de linha
Pargrafos: delimitam blocos de informao - <p></p> Quebra de linha: <br> - Elemento que no precisa de marca do fim
<p>Em TM temos trs reas: Informtica, Fotografia e Vdeo. A disciplina tem 11 horas semanais.<br> Dividida em 6 para Informtica e 2,5 para as restantes.</p>

Resultado
Em TM temos trs reas: Informtica, Fotografia e Vdeo. A disciplina tem 11 horas semanais. Dividida em 6 para Informtica e 2,5 para as restantes.

12
Prof. Tc. Gerson James

Paragrafo e quebra de linha


Exemplo:
<p> Para inserir<br>um break<br>num<br>paragrafo,<br>usa-se a marca br. </p>

Elementos do Corpo

Para inserir

Resultado

um break num paragrafo usa-se uma marca br.

13
Prof. Tc. Gerson James

Elementos do Corpo
Cabealhos
Existem 6 nveis de cabealhos , desde o mais importante <h1> at ao menos <h6>.

Exemplo: <h1>Mais importante</h1> <h2>2 mais importante</h2> <h6>ltimo </h6>

Resultado

Mais Importante
2 mais importante
ltimo

14
Prof. Tc. Gerson James

Elementos do Corpo
Cabealhos

Exemplo:
<h1 align="center">Este o cabealho 1</h1> <p>Este cabealho est centrado em relao ao tamanho da pgina.</p>

Resultado

Este o cabealho 1

Este cabealho est centrado em relao ao tamanho de pgina

15
Prof. Tc. Gerson James

Elementos do Corpo
Negrito ou bold - <b></b> Italico - <i></i> Sublinhado - <u></u>

Formatao do texto

<p>Em TM temos trs reas: <b>Informtica, Fotografia e Vdeo.</b> A disciplina tem <i> 11 horas semanais.</i><br> Dividida em 6 para <u>Informtica</u> e 2,5 para as restantes.</p>

Resultado
Em TM temos trs reas: Informtica, Fotografia e Vdeo. A disciplina tem 11 horas semanais. Dividida em 6 para Informtica e 2,5 para as restantes.

16
Prof. Tc. Gerson James

Elementos do Corpo
Formatao do texto
Exemplo:
<b>Este texto est em bold</b> <br> <i> Este texto est em italico </i> <br> <small> Este texto mais pequeno </small>

Resultado
Este texto est em bold Este texto est em italico Este texto mais pequeno

17
Prof. Tc. Gerson James

Elementos do Corpo
Lista - <ol></ol>

Listas Numeradas

Elemento de uma lista <li></li> Exemplo:


<ol> <li>Informtica</li> <li>Fotografia</li> <li>Video</li> </ol>

Resultado

1. 2. 3.

Informatica Fotografia Video

18
Prof. Tc. Gerson James

Elementos do Corpo
Exemplo:

Listas Numeradas

<font size=1> <h4>Lista numeradas:</h4> <ol> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> <h4>Lista com letras:</h4> <ol type="A"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> <h4>Lista com letras minusculas:</h4> <ol type="a"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> <h4>RLista com numeros romanos:</h4> <ol type="I"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> <h4>Lista com numeros romanos minusculos:</h4> <ol type="i"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> </font>

19

Exemplo:
<font size=1> <h4>Lista numeradas:</h4>
<h4>Lista com letras:</h4>

Prof. Tc. Gerson James

<ol> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> <ol type="A"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> <h4>Lista com letras minusculas:</h4> <ol type="a"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> <h4>RLista com numeros romanos:</h4> <ol type="I"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol>

<h4>Lista com numeros romanos minusculos:</h4>


<ol type="i"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ol> </font>

20
Prof. Tc. Gerson James

Lista - <ul></ul>

Listas no numeradas e sub listas

Elementos do Corpo

Elemento de uma lista <li></li> Exemplo:


<ul><li>Informtica</li> <ul><li>Terica</li> <li>Prtica</li></ul> <li>Fotografia</li> <li>Video</li> </ul>

Resultado
Informtica Terica Prtica Fotografia Vdeo

21
Prof. Tc. Gerson James

Exemplo:

Listas no numeradas e sub listas

Elementos do Corpo

<h4>Lista com discos:</h4> <ul type="disc"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ul> <h4>Lista com circulos:</h4> <ul type="circle"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ul> <h4>Lista com quadrados;</h4> <ul type="square"> <li>Maas</li> <li>Bananas</li> <li>Limes</li> <li>Laranjas</li> </ul>

22
Prof. Tc. Gerson James

Elementos do Corpo
Fazem a ligao a outros documentos <a href=documento.extenso ou endereo web></a>

Hiperligaes

Exemplo:
http://www.google.com.br; http://maps.google.com; http://www.youtube.com; http://app.google.com; http://docs.google.com

Resultado
A Google umas das maiores empresas em solues para WEB. So algumas de suas solues: GoogleMaps; Youtube; GoogleApp; GoogleDocs entre outros.

23
Prof. Tc. Gerson James

Elementos do Corpo
Hiperligaes internas
Quando queremos fazer ligaes a outros ficheiros no mesmo sitio. Exemplo:
Ligao de um ficheiro que est em w:\tm\ficheiro1.htm para um que est em w:\tm\ficheiro2.htm <a href=ficheiro2.htm></a> Ligao de um ficheiro que est em w:\tm\ficheiro1.htm para um que est em w:\tm\teorica\ficheiro2.htm <a href=teorica/ficheiro2.htm></a> Ligao de um ficheiro que est em w:\tm\ficheiro1.htm para um que est em w:\hj\ficheiro2.htm <a href=../hj/ficheiro2.htm></a>

24
Prof. Tc. Gerson James

Elementos do Corpo
Hiperligaes internas
Exemplo:
<a href="lastpage.htm"> Este texto</a> um link para uma pgina chamada lastpage.htm. </p> <p> <a href="http://www.google.com/"> Este texto</a> um link para a pgina do google </p> Resultado: Este texto um link para uma pgina chamada lastpage.htm.. Este texto um link para a pgina do google

25
Prof. Tc. Gerson James

Elementos do Corpo
Imagens
Imagem - <img src=caminho e nome da imagem com a extenso> Exemplo:
<img src=R01.jpg>
Ter em ateno que o caminho e o nome do ficheiro da imagem tem de ser escrito partindo do ponto de partida do documento Ou seja se a imagem estiver na directoria do documento HTML s se escreve o nome do ficheiro. Se estiver noutra directoria temos de seguir os mesmo cuidados que nas hiperligaes Usar minsculas, no usar acentos e espaos nos nomes das imagens

Resultado

26
Prof. Tc. Gerson James

Elementos do Corpo
Exemplo:

Imagens

<p> Uma imagem com o tamanho real: <img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" > </p> <p>Uma imagem com 48 pixeis de comprimento e 48 pixeis de altura <img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" width="48" height="48"> </p> <p>Uma imagem com 148 pixeis de comprimento e 48 pixeis de altura <img src="http://meusregistros.pbwiki.com/f/grav_criancas_sala_de_aula2.jpg" width="148" height="48"> </p>

Elementos do Corpo
Tabelas
Muitas vezes usada para estruturar a informao Tabela <table></table> Linha <tr></tr> Celula <td></td>
<table border=2> <tr> <td>Clula da 1 linha <td>Clula da 1 linha </tr> <tr> <td>Clula da 2 linha <td>Clula da 2 linha </tr> </table>

Exemplo:

Resultado
e 1 Coluna</td> e 2 Coluna</td> e 1 Coluna</td> e 2 Coluna</td>
Clula da 1 linha e 1 Coluna Clula da 2 linha e 1 Coluna Clula da 1 linha e 2 Coluna Clula da 2 linha e 2 Coluna

27

Elementos do Corpo
Tabelas
Exemplo:
<h4> Esta tabela tem legenda e borda de 6: </h4> <table border="6"> <caption>Legenda</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>

Resultado
Esta tabela tem legenda e borda de 6:
Legenda

100 200 300 400 500 600

28

Elementos do Corpo
Tabelas
Exemplo:
<h4>Esta tabela tem fundo nas celulas</h4> <table border="1"> <tr> <td bgcolor="red">primeira</td> <td>linha</td> </tr> <tr> <td background="3dm-overall.gif"> segunda</td> <td bgcolor="yellow">linha</td> </tr> </table>

Resultado
Esta tabela tem fundo nas clulas

primeira segunda

linha linha

29

30
Prof. Tc. Gerson James

Estrutura dos elementos


O elementos tm uma estrutura de encaixe hierrquico, mas no podem ser intercalados Correcto
<p>Paragrafo com texto <b>tipo bold</b> texto normal novamente</p>

Incorrecto
<p>Texto que no <b> aparece</p> correctamente</b>

Referencias
HTML pgina de consulta W3C HTML Home Page, W3C Especificao da HyperText Markup Language 4.01, W3C Lista de elementos HTML, W3C Lista de atributos HTML, W3C HyperText Markup Language, WaSP

31