Aula Seguinte - Introdução HTML

Criao de pginas web
Linguagem HTML
Conceitos introdutrios
Introduo
A maioria das pginas web esto escritas em
linguagem HTML (Hypertext Markup Language).
Apesar de existirem programas editores de

pginas web que tornam possvel a elaborao de
uma pgina sem conhecimento da linguagem que
as cria, como por exemplo o Microsoft FrontPage
e o Macromedia DreamWeaver, para ter um
conhecimento avanado do trabalho na Internet,
do desenho da pgina e da forma como esta
pode ser modificada, necessrio conhecer as
bases sobre as quais se sustenta esta linguagem.
Esta linguagem cria pginas web como ficheiros
de texto puro. Isto significa que o ficheiro s
tem texto no formatado, e que no contm
objectos multimdia (imagens, sons, vdeos).
Para formatar o texto, inserir objectos

multimdia e inserir ligaes dentro e/ou fora da
pgina, necessrio escrever determinados
comandos especficos denominados tags.
Estas tags so tambm texto, e comeam sempre

com um sinal de menor que (<), e terminam
sempre com um sinal de maior que (>). Desta
forma o browser consegue distingui-las do texto
propriamente dito.
Exemplos de tags
<HTML>

Quando a pgina mostrada pelo browser, este

analisa cada linha do cdigo. Neste processo de
anlise os caracteres e o texto so visualizados no
ecr e as tags so executadas. Quando o browser
encontra uma tag no cdigo, ele sabe que no deve
mostr-la no ecr, mas que deve executar a aco
que essa tag tem associada.
Editores de pginas web
Como uma pgina web corresponde a um ficheiro
de texto puro, para cri-la pode-se recorrer a
editores de texto puro.
Editores de texto puro:

Bloco de Notas do Windows;
WordPad.
NotePad
Estrutura de uma pgina
Qualquer pgina web deve ser estruturada da
seguinte forma:
Incio
Cabealho
Corpo
Fim
Para definir estas zonas recorre-se aos tags de
estrutura que surgem em qualquer pgina:
<!DOCTYPE html> incio

<html>
<head> cabealho
.............
</head>
<body> corpo
.............
</body>
</html> fim
Tags (exemplos)
A maior parte das tags tm finalizao, ou seja, tm um
princpio e um fim;
As tags de estrutura so de finalizao:

<html>.....................</html>
<head>.....................</head>
Mas existem tags que no so de finalizao:

Por exemplo, se se pretende inserir uma linha horizontal
na pgina, basta escrever<hr>
Por exemplo, se se pretende mudar de linha, basta
escrever 
Algumas das tags tm tambm atributos. Estes atributos

permitem modificar, escolher as caractersticas da ao da
tag.
Exemplos de tags de formatao
 texto a negrito Pe o texto que est

entre as tags a negrito
 texto a itlico Pe o texto que est
entre as tags a itlico
 texto sublinhado Pe o texto que est
entre as tags a
sublinhado
 texto com tamanho 3 Define o tamanho da
letra para o texto
<marquee> texto rolante </marquee> Insero de texto
rolante.
 texto em estilo Arial Define o estilo da
 letra para o texto
 texto com cor azul Define a cor da letra
para o texto
<center> texto centralizado >/center> Centraliza o texto

entre as tags
 Permite mudar de

linha
 Permite inserir um

pargrafo
Exemplos de tags de ligaes
<a href=inicio.html> Pgina Ligao pgina principal do

Principal </a> site (as pginas tm de estar
na mesma pasta).
<a href=http://www.google.pt> Ligao a uma pgina exterior

Procurar </a> ao site.
<a href=#biog> Biografia </a> Ligao a um marcador

existente na mesma pgina.
...
... ...
... ...
<a name=biog> Biografia </a> Insero de um marcador.

Outros exemplos de tags
<body bgcolor=#AB82FF> Define a cor de fundo
... da pgina.
</body>
<body background=imagem.jpg> Define uma imagem de

... fundo.
</body>
<img align="right src=imagem.jpg> Insere uma imagem na

pgina ( o ficheiro da
imagem deve estar na
mesma pasta da
pgina).
<a href=inicio.html> <img src=imagem.jpg> </a> Insere uma ligao a
uma pgina do mesmo
site atravs de uma
imagem. (tanto as
pginas, como o ficheiro
de imagem devem estar
na mesma pasta).
Exemplos de insero de listas
<ul>Pases interessantes:
<li> Per</li>
<li>China</li>
</ul>
...
<ol>Frutas tropicais:
<li>Manga</li>
<li>Papaia</li>
</ol>
Exemplo de insero de uma tabela
<table>
<tr> <td>Cor</td> <td>Qualidade</td> </tr>
<tr> <td>Azul</td> <td>Corajoso</td> </tr>
<tr> <td>Amarelo</td> <td>Inteligente</td> </tr>
<tr> <td>Verde</td> <td>Dinmico</td> </tr>
</table>

Aula Seguinte - Introdução HTML

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

Aula Seguinte - Introdução HTML

Uploaded by

Copyright:

Available Formats

Criao de pginas web

Apesar de existirem programas editores de

Para formatar o texto, inserir objectos

Estas tags so tambm texto, e comeam sempre

Quando a pgina mostrada pelo browser, este

Editores de texto puro:

<!DOCTYPE html> incio

As tags de estrutura so de finalizao:

Mas existem tags que no so de finalizao:

Algumas das tags tm tambm atributos. Estes atributos

<B> texto a negrito </B> Pe o texto que est

<center> texto centralizado >/center> Centraliza o texto

<br> Permite mudar de

<p> Permite inserir um

<a href=inicio.html> Pgina Ligao pgina principal do

<a href=http://www.google.pt> Ligao a uma pgina exterior

<a href=#biog> Biografia </a> Ligao a um marcador

<a name=biog> Biografia </a> Insero de um marcador.

<body background=imagem.jpg> Define uma imagem de

<img align="right src=imagem.jpg> Insere uma imagem na

You might also like