Você está na página 1de 19

<HTML> Esta a minha primeira pgina </HTML>

UFCD 0792: Criao de pginas para a web em hipertexto


Joaquim Frias

Conceito de HTML

A linguagem de marcao de hipertexto ou HTML, do


ingls HyperText Markup Language (Linguagem de marcao de Hipertexto)

Visa a preparao de documentos com grficos e hiperligaes, para visualizao na World Wide Web (WWW)

Edio de cdigo HTML

Existem diversos programas que nos permitem editar e


construir uma pgina HTML

Exemplo:
o o o o o

Microsoft FrontPage Macromedia Dreamweaver BlueGriffon Bloco de Notas (Notepad)

Requisitos para a criao de pginas HTML


Requisitos:
o o

Browser (Ex: Internet Explorer) Bloco de notas

Nota: No necessrio estar ligado Internet para se visualizar o resultado e as alteraes efetuadas numa pgina HTML

Edio HTML Bloco de notas

Tags HTML

Tags so rtulos utilizados para informar o browser de


como deve ser apresentado o Website

Todas as tags tm o mesmo formato, comeam pelo


sinal de < e terminam com o sinal de >

o o

Existem dois tipos de tags Abertura <comando>

Fecho </comando>

Tags HTML
Exemplo de algumas Tags:
<html> primeira e ltima Tag </html>

Tag <b> Texto</b> <h1> Texto</h1> <h2> Texto</h2>

O texto ficou a negrito Ttulo Subttulo

<p> Texto </p>

Insere um pargrafo

Pgina HTML

Uma pgina HTML tambm ela um "objeto" que


obedece a uma estrutura bastante semelhante do ser humano

Tambm ela tem uma cabea, com incio <head> e fim </head>, um corpo, delimitado pelas tags <body> e </body> e este composto por vrios elementos

Pgina HTML

Em vez de tronco, pernas, mos, braos temos cabealhos


(<h1>, <h2>, ..., <h6>), pargrafos (<p>), listas (<ul>), tabelas de dados (<table>), e mais uns quantos outros elementos

Tal como num ser humano, que possvel delimitar, ou seja observar onde comea e onde acaba, tambm o incio e o fim de uma pgina Web se encontram delimitados: o seu incio

com <html> e o seu fim com </html>

Estrutura base de uma pgina HTML

Pagina2.html

Exemplo de uma pgina HTML


<html> <head> <title>A minha segunda pgina Web</title> </head> <body> ( .... contedo da pgina .... ) </body> </html>

Guardar uma pgina HTML

Elementos HTML
Estrutura de um cabealho

<h1>Exemplo de um cabealho</h1> No HTML esto disponveis 6 nveis de cabealho assim identificados h1, h2, h3, h4, h5, h6

Visualmente o seu grau de importncia distinguvel


atravs do tamanho de letra que lhe est associada, sendo o h1 o mais importante

Mais Tags
<i>Este texto est em itlico.</i>
<small>Este texto est em tamanho pequeno.</small>

<b><i>Texto em negrito e itlico.</i></b>

Mais Tags
<ul> <li>Um item da lista</li> <li>Outro item da lista</li> </ul>
Resultado:

Um item de lista Outro item de lista

Mais Tags
<ol> <li>Primeiro item da lista</li> <li>Segundo item da lista</li> </ol>
1. 2.

Resultado:
Primeiro item da lista Segundo item da lista

Tags de exceo
Existem tags que so abertas e fechadas em nica tag: <br /> serve para criar uma quebra de linha <hr /> serve para definir uma linha horizontal

o o

Pagina3.html
<html> <head> <title>Meu website</title> </head> <body> <i>Itlico</i> <small>Texto tamanho pequeno</small> <br /> Quebra de linha <hr /> Linha Horizontal <blockquote>Indentao</blockquote> <ul>Lista</ul> <ol>Lista ordenada</ol> <li>Item de lista</li> </body> </html>