<

0768. Criao de Sites

WEB >
Manual de Apoio ao Formando

<Jos Antnio De Almeida Batista>

<Castro daire>
<10-01-2013 a 11-02-2013>

P g i n a |1

<0768. Criao de Sites WEB>

ndice
Pg.

Enquadramento ............................................................................................................................... 3
Objetivos Gerais..........................................................................................................................................3
Objetivos Especficos ..................................................................................................................................3

1.

<captulos> .............................................................................................................................. 4

2.

Bibliografia ................................................................................ Erro! Marcador no definido.

Formador: <Jos Antnio De Almeida Batista >

2/19

<0768. Criao de Sites WEB>

Enquadramento
Objetivos Gerais

Criar documentos em hipertexto.

Desenvolver e alojar um site na Internet.

Objetivos Especficos
Introduo Hyper Text Markup Language
Elaborao de documentos de texto e outros tipos de ficheiros em HTML para a web
Servidores
Elaborao de site web
Envio dos ficheiros para o servidor por ftp

Formador: <Jos Antnio De Almeida Batista >

3/19

<0768. Criao de Sites WEB>

1. < Conceitos Introdutrios e Tcnicas de Implementao para estruturar um site

(pgina) para a internet: >
O que Internet ?
A Internet consiste num conjunto de servidores (computadores) ligados entre si aos quais
qualquer pessoa se pode ligar por modo a aceder informao e transferir dados de todo tipo
existentes em qualquer um deles. Por vezes costuma-se dizer que uma rede de redes escala
mundial.
Servidor
Um servidor um computador que fornece servios a uma rede de computadores. Esses
servios podem ser de diversa natureza, por exemplo, servidor de ficheiros, servidor de correio
electrnico ou servidor WEB (disponibilizar as pginas HTML). Os computadores que acedem aos
servios de um servidor so chamados clientes.

O que preciso para aceder internet ?

Para aceder Internet precisa de ter um (COMPUTADOR) , um fornecedor internet (ISP) e um
programa para aceder Internet que se chama browser ou navegador.
Browser
Programa de computador tambm conhecido como Navegador, tem como principal utilidade
permitir a visualizao e interaco dos documentos ou pginas HTML (site).
Que "browsers" existem ?
O mais divulgado o Internet Explorer e o mais usado a seguir o Chrome, FireFox, safari,
netscape. Alm de dever ter uma verso no muito antiga ter que ter ainda instalado um conjunto
de ficheiros se pretender visualizar alguns contedos disponveis na Internet.
ARQUIVOS DE INTERNET TEMPORRIOS
Quando acessamos uma pgina pela primeira vez, os arquivos que a formam (textos, fotos,
vdeos, sons) so trazidos para o nosso computador, e so armazenados em uma pasta
apropriada. Esses arquivos passam a se chamar arquivos temporrios da Internet.
Esses arquivos so usados para, quando uma pgina for acessada novamente, seus dados sejam
trazidos da verso da pgina que est no computador, e no precisem ser puxados da Internet, o
que acelera, e muito, a exibio da pgina.
Esses arquivos temporrios so usados, tambm, para que se possa acessar essas pginas estando
desligado da Internet (ou seja, acesso Off-line). No Internet Explorer possvel controlar o tamanho
mximo que a pasta desses arquivos ter, limitando o espao consumido em disco pelas pginas da
Internet.

Formador: <Jos Antnio De Almeida Batista >

4/19

<0768. Criao de Sites WEB>

COOKIES
Cookies so pequenas informaes, deixadas pelos sites que visitou, no seu computador.
Os Cookies so utilizados pelos sites de diversas formas, eis algumas:

Para guardar a sua identificao e senha quando pula de uma pgina para outra;

Para manter uma lista de compras em sites de comrcio eletrnico;

Personalizao de sites pessoais ou de notcias, quando voc escolhe o que quer que seja
mostrado nas pginas destes sites;

Manter a lista das pginas vistas em um site, para estatstica ou para retirar as pginas que
voc no tem interesse dos links.

O problema com relao aos Cookies que eles so utilizados por empresas que vasculham suas
preferncias de compras e espalham estas informaes para outros sites de comrcio
eletrnico. Assim voc sempre ter pginas de promoes ou publicidade, nos sites que
visitar, dos produtos de seu interesse. Na verdade no se trata de um problema de segurana, mas
alguns utilizadores podem considerar este tipo de atitude uma invaso de privacidade.
Protocolo
Uma definio de normas para possibilitar a comunicao entre computadores diferentes e
redes diferentes.
Na tabela abaixo listam-se os servios e protocolos associados s portas TCP e UDP.
Servio

TCP

UDP

FTP

21

21

SSH

22

22

Telnet

23

23

SMTP

25

25

DNS

53

53

HTTP

80

80

Para web browser

POP3

110

110

Para recepo de email

IMAP

143

143

TLS/SSL

443

443

IRC

6667

6667

Pichat

9009

9009

Formador: <Jos Antnio De Almeida Batista >

Observaes
Transferncia de
arquivos
Protocolo de login
remoto encriptado
Protocolo de login
remoto
Para envio de email
Resoluo de nomes
para IP

Para recepo/envio de
email
Protocolo de camada de
sockets segura
Para conversao/chat
Protocolo de
conversao/chat

5/19

<0768. Criao de Sites WEB>

Site ou pgina
Um site (ou website) um conjunto de pginas de informao disponveis na Internet. Pode
conter todo o tipo de informaes em texto, imagem, animaes ,vdeo e som e pode ser
consultado a partir de qualquer local do mundo.
Home Page
Pgina inicial de um site, tem o objectivo de apresentar e indicar as outras pginas que
compem o mesmo.
URL
Abreviatura de Universal Resource Locator o endereo de um recurso ou pgina da Internet. Pode
ser um endereo de um site ou de um recurso como um arquivo, geralmente utiliza os
protocolos HTTP , FTP,entre outros.
Hiperlink
Ou simplesmente Link uma referencia dentro de um documento ou pgina da Internet a outro
documento. o elo de ligao entre as pginas da Internet. Podem aparecer associado a
palavras ou imagens e pode despoletar determinada aco.
Webdesigner
uma extenso de designer, profissional responsvel pela criao das pginas da Internet
(layout) por meio de diversas reas de conhecimento alm do design, como programao por
exemplo.
Web Master
Profissional responsvel pelo funcionamento, manuteno e segurana do Web Server.
Colocao do site online, Programao, etc
Web Developer
Profissional responsvel pela Programao, geralmente so programadores profissionais que
percebem de muitas tecnologias e linguagens de programao.
Layout
Layout um esboo mostrando a distribuio fsica, tamanhos de elementos como textos,
grficos ou figuras num determinado espao. Pode ser apenas formas rabiscadas numa folha para
depois realizar o projecto ou pode ser o projecto em fase de desenvolvimento.
DNS
Servio de Nome de Domnio, O DNS um servio usado para realizar a traduo dos nomes
de domnios (URLs) em endereos IP. Ou seja, quando digitamos, em nosso navegador, esse
endereo enviado para um servidor que trabalha com o protocolo DNS, e que, por sua vez,
devolve ao computador que requisitou o endereo IP associado ao domnio desejado.

Formador: <Jos Antnio De Almeida Batista >

6/19

<0768. Criao de Sites WEB>

O que um domnio ?
Um domnio corresponde a um nome e a um endereo na internet. Por exemplo, sapo.pt
corresponde a um domnio na internet. Associado a um domnio temos um responsvel pelo domnio
e um conjunto de contedo variado. Para se ter um domnio preciso registar o mesmo (a fim de
no haver 2 domnios com o mesmo nome) e preciso ter o domnio alojado num servidor para
permitir que as pessoas possam aceder informao que nele se encontra.
O registo de um domnio pode custar at 15 euros por ano.
Subdomnio
Um subdomnio um endereo localizado dentro do seu endereo principal(Domnio).
Exemplo de subdomnio videos.sapo.pt
Endereo Ip
Na Internet, cada servidor possui um endereo nico (endereo IP), uma srie de nmeros
separados por pontos; por exemplo o endereo do servidor Web do Sapo 213.13.146.140 que
corresponde a sapo.pt
O que desenvolvimento para a Web?
O desenvolvimento para a Web refere-se ao processo de criar uma pgina da Web ou um site.
As pginas da Web so escritas em HTML, CSS , JavaScript etc. Essas pginas podem consistir em
texto simples e imagens grficas. As pginas podem tambm ser interativas ou exibir
informaes dinmicas. As pginas interativas de servidor so mais complexas de se
desenvolver, mas possibilitam sites mais avanados. Hoje em dia, a maioria das pginas
interativa e fornece servios online modernos, como carrinhos de compra, visualizaes
dinmicas e at mesmo complexas redes sociais como o FACEBOOK.

O que preciso para ter um Site na Internet:

1- Desenvolver a pgina
- Ao desenvolver o layout da pgina preciso ter em conta:
navegao; ideia sobre o que se pretende na pgina.
2- Ter um alojamento (pode alugar um servidor online, criar o prprio servidor, ou arranjar um
grtis)
3- Registar um domnio (.com,.net,.org,.pt,.tv,etc) ou arranjar um sub-domnio grtis
Factores a ter em conta na implementao do site , os mais importantes so:
Tecnologia utilizada HTML = mais rpido; Flash = mais lento o ideal conjugar as duas
tecnologias
A informao deve estar organizada tendo em ateno a sua importncia .
Utilizar um vocabulrio simples e disponibilizar apenas a informao necessria evitando
redundncias .
As cores a utilizar e os efeitos grficos devem ser escolhidos com muito cuidado.
de imagem e optimizao de imagem utilizada, se as imagens forem mal optimizadas, tornaro o
site mais lento , vdeos, musicas, animaes ou misto) mais lento o site e mais difcil reteno
pelo utilizador
dinamismo do site: se as pginas dinmicas forem geradas na altura (no cliente), o site ser
mais lento, enquanto que se as pginas estiverem j geradas (no servidor) o site ser mais
rpido.

Formador: <Jos Antnio De Almeida Batista >

7/19

<0768. Criao de Sites WEB>

largura de banda do servidor significativa para que no hajam congestionamentos

tambm pode influenciar, pois h ISPs com mais banda para alguns servidores e menos para outros.
Usabilidade do site que est relacionada aos estudos de:
- Ergonomia do site(regras de adaptao do utilizador pgina web)
- Amigabilidade (caractersticas desejveis no interface entre o utilizador e a pgina web)
Ser de fcil aprendizagem, permitir uma utilizao eficiente e apresentar poucos erros, so
os aspectos fundamentais para a percepo da boa usabilidade por parte do utilizador.
Mas a usabilidade pode ainda estar relacionada com a facilidade de ser memorizada e ao nvel de
satisfao do utilizador .
LINGUAGENS DE PROGRAMAO
Que correm no cliente (Browser):
- HTML a linguagem de formatao tradicional usada para criar pginas WEB com programao de
hypertexto (documento com palavras ou imagens que levam para outras pginas com um clique).
- DHTML Dynamic HTML, ou DHTML, a unio das tecnologias HTML , Javascript e CSS para permitir
que uma pgina Web seja modificada dinamicamente na prpria mquina cliente, sem necessidade
de novos acessos ao servidor web.
- JAVASCRIPT uma linguagem de programao criada pela Netscape para atender,
principalmente, as seguintes necessidades: * validao de formulrios no lado cliente (programa
navegador);* interao com a pgina. Esta linguagem utilizada, por exemplo, para dar movimento
a imagens ou criar botes que respondem a clicks do rato.
- CSS Cascading Style Sheets ou CSS so estilos para pginas web e envolvem um conceito
inovador: possibilitam a mudana da aparncia simultnea de todas as pginas relacionadas com o
mesmo estilo.
- JQuery,Jscript, xml, ajax, etc
Que correm no servidor:
- PHP (um acrnimo recursivo para "PHP: Hypertext Preprocessor") uma linguagem de
programao de computadores interpretada, livre e muito utilizada para gerar contedo dinmico na
Web. Por exemplo para ligar a base de dados e e manipular a sua informao, formulrios, etc.
- ASP.NET Active Server Pages: so pginas criadas dinamicamente pelo servidor Web. Quando um
browser solicita uma pgina do tipo ASP, o servidor constri uma pgina HTML e envia-a ao
browser. A diferena entre uma pgina ASP e um documento HTML clssico, que o segundo
corresponde a um documento esttico, que j se encontra no servidor no formato que ser exibido
no navegador.
- JAVA ,CGI ,PERL ,COLDFUSION ,etc
EDITORES DE PGINAS WEB:
- Frontpage O Microsoft Frontpage considerado um dos melhores programas na criao e edio
de Web Sites.
- Dreamweaver Programa O Macromedia Dreamweaver um editor profissional que cria e gere
pginas Web. Com este programa fcil criar e editar pginas compatveis com diversos
navegadores e plataformas usando ferramentas avanadas de desenho e layout.
- HTML-KIT
- Notepad (bloco de notas)

Formador: <Jos Antnio De Almeida Batista >

8/19

<0768. Criao de Sites WEB>

EDITORES DE IMAGENS:
- Adobe Photoshop O Adobe Photoshop o editor de imagens mais utilizado pelos webdesigners
profissionais. Com ele possvel manipular as imagens de todas as maneiras possveis trabalhando
com as mais utilizadas extenses de arquivos grficos.
- Coreldraw O Coreldraw um programa grfico que gera desenhos vectoriais. Ele cria imagens
usando formas de objectos armazenados internamente como equaes matemticas (vector), bem
diferente das aplicaes que utilizam bitmap, uma imagem composta pr uma srie de pontos.
-, etc
EDITORES E ANIMADORES GRFICOS E VDEO:
- FLASH O Macromedia Flash um software de criao de animaes dimensionveis e interactivas
para a Web. possvel criar logtipos com animao e com controles direccionveis para navegao
em Web Sites. Com a utilizao do flash a interactividade com o utilizador torna-se um grande
atractivo .
- Ulead GIF Animator O Ulead GIF Animator um software de produo de imagens animadas. a
ferramenta que permite manipular imagens do tipo GIF Animado.
- PHOTOSTORY o Microsoft photostory d para criar vdeos a partir de imagens
- MOVIE MAKER o Windows movie maker da para criar e editar vdeos
- ADOBE PREMIERE , ETC
FERRAMENTAS E UTILITRIOS:
- WS_FTP O programa WS Ftp faz a conexo com o servidor FTP. Programa cliente utilizado para
transferir o site para o servidor.
- PUTTY O software PUTTY fornece as potencialidades da transferncia segura na Shell (SSH) e
telnet.

1. Geraes de Sites

1.1. Definio
Desde o seu lanamento e o incio de seu uso na dcada de 90, os sites evoluram
demais em tecnologia. No h um consenso em respeito a geraes de sites, pois h quem diga que estamos na
segunda, outros na terceira ou quarta e ainda h quem diga que estamos na sexta gerao, porm convencionouse expressar aqui quatro geraes.

1.2. Sites de 1 Gerao

Devido a limitao imposta por modems lentos e monitores monocromticos os web sites de primeira
gerao eram muito simples. As primeiras paginas que circularam pela web foram criadas por cientistas e
pesquisadores que desejavam compartilhar suas idias, documentos, teses entre outros.
Essas pginas caracterizadas por longos textos, com seqncia do topo para a base e da esquerda para a
direita e usava recursos bsicos de formatao de textos, como negrito, itlico, marcadores de textos etc. Os web
sites de primeira gerao eram criados portcnicos e muitos utilizavam texto preto em fundo cinza.

Formador: <Jos Antnio De Almeida Batista >

9/19

<0768. Criao de Sites WEB>

1.3. Sites de 2 Gerao

Os sites de segunda gerao trouxeram algumas novidades visuais que foram possibilitadas pelos
recursos incorporados nas novas verses dos navegadores. Incluem estas melhorias visuais: cones substituindo
palavras, imagens ladrilhadas, substituindo o fundo cinza, botes com chanfros e banners substituindo os ttulos.
Uma outra caracterstica dos sites de segunda gerao a utilizao de menus verticais com opes dispostas de
cima para baixo e com listas para apresentar uma hierarquia de informaes.
A tecnologia teve grande influncia nos sites de segunda gerao. Isto trouxe como resultados tantos
sites com uma melhoria visual atravs do uso de cones e menus. Neste momento a Internet estava sendo
utilizada para fins comercias, porm as pginas ainda eram construdas por tcnicos.

1.4. Sites de Terceira Gerao

Os sites de terceira gerao apresentam uma mudana radical em sua aparncia. Apesar da contnua
evoluo dos navegadores e tecnologias que sempre influenciam o design, a principal caracterstica dos web sites
de terceira gerao no a tecnologia e sim o design. Esta mudana foi conseqncia, sobretudo, da vinda de
designers que j trabalhavam com artes grficas para o mundo das pginas web. Comearam a aparecer pginas
mais criativas, com melhor combinao de cor, mais harmonia na composio dos elementos, enfim, com
planejamento visual.
A maioria dos web sites que conhecemos atualmente classificado como sendo da terceira gerao.

Resumindo
1 Gerao: Sites de primeira gerao eram estruturados com rguas horizontais. Alguns eram bem
organizados, mas a maioria possua textos de lado a lado, que se estendiam por pginas, separadas por linhas
em branco sem nenhum significado.

Formador: <Jos Antnio De Almeida Batista >

10/19

<0768. Criao de Sites WEB>

2 Gerao: Sites de segunda gerao so basicamente sites de primeira gerao com cones
substituindo palavras, imagens ladrilhadas que substituem o fundo cinza, botes com chanfros e banners no lugar
dos ttulos. Estes sites continham muitas informaes e eram desorganizados.

3 Gerao: Site de terceira gerao baseado no design e no na competncia tecnolgica. Sites dessa
gerao do aos visitantes uma experincia completa , da entrada at a sada. O que est em jogo o visual e
no a tcnica, e o design a diferena.

Formador: <Jos Antnio De Almeida Batista >

11/19

<0768. Criao de Sites WEB>

2. Termos e Estrutura do cdigo HTML

HTML a acrossemia deHyperText Markup Language, uma das linguagens utilizadas para desenvolver pginas
na internet

A tag, dentro da linguagem HTML, so aquelas que servem para determinar um efeito especial em parte do
documento que est entre a TAG.
Uma tag utilizada para identificar onde um elemento particular comea e onde ele termina. A tag no uma
parte prpria do elemento.

Exemplo
O texto texto com a TAG de abertura <.B> tem uma parte em negrito at a tag de fechamento<./B>, conforme
explicado.
Ser exibido pelo navegador da seguinte forma:
O texto texto com a TAG de abertura tem uma parte em negrito at a tag de fechamento, conforme explicado.
mais exemplos de TAG CONTAINER <.B><./B> Negrito <.i><./i> Itlico <.U><./U> Sublinhado
<.TT><./TT>espaadas por igual <.SUB> <./SUB> Subescrito <.SUP> <./SUP> Sobrescrito
As TAGs que produzem efeitos locais, apenas introduzindo algum elemento no texto, no precisando de TAG
finalizadora. Sao classificadas como EMPTY TAG. Um exemplo a tag

Um elemento uma parte conceitual do seu documento. Um elemento possui um inicio e fim determinados. As
tags marcam onde os elementos comeam e terminam.
Elementos vazios possuem apenas uma tag de abertura, que possui os seus respectivos atributos. Para
exemplificao, o elemento link, para o qual a sintaxe
<link rel=stylesheet href=fancy.css type="text/css">

Elementos de texto so construdos com:

uma etiqueta de abertura (<tag>) marcando o incio do elemento, que pode ser incorporar alguns diversos
atributos;

uma quantidade de contedo textual, mas sem elementos (texto);

uma etiqueta de fechamento, na qual o nome do elemento precedido por uma barra: </tag>. Em
algumas verses do HTML, a etiqueta de fechamento opcional para alguns elementos. A etiqueta de

Formador: <Jos Antnio De Almeida Batista >

12/19

<0768. Criao de Sites WEB>

fechamento obrigatria no XHTML.

Elementos normais geralmente possuem ambas marcaes de abertura e fechamento, a pesar de que para
alguns elementos a marcao de fechamento, ou ambas marcaes, podem ser omitidas. Eles so construdos de
maneira semelhante:

uma etiqueta de abertura (<tag>) marcando o incio do elemento, que pode ser incorporar alguns diversos
atributos;

uma quantidade de contedo, incluindo textos e outros elementos;

uma etiqueta de fechamento, no qual o nome do elemento precedido por uma barra: </tag>.

<input type=checkbox checked>

Resumindo

Partes de um elemento:

Etiqueta de abertura: <p ... >

Atributo:

nome: class

valor: foo

Contedo: This is a paragraph.

Etiqueta de fechamento: </p>

completo: <p class="foo">Isto um pargrafo</p>

1.1. O que atributo?

Os elementos podem ter atributos. Um atributo possui um nome e um valor, e utilizado para adicionar
informaes extras ao elemento. Esta pode ser a informao a qual indica como o contedo deve ser renderizado,
ou pode ser algo que identifique a ocorrncia nica do elemento, ou pode ser qualquer outra coisa.
O atributo de um elemento sempre escrito dentro da tag de incio para aquele elemento, e assume a
forma nome-do-atributo="valor-do-atributo".

Formador: <Jos Antnio De Almeida Batista >

13/19

<0768. Criao de Sites WEB>

Exemplo 1:
<h2 style="background-color:#ff0000;">Eu adoro HTML</h2>
<img alt="...">
<area alt="...">

1.2. Quais tags podem usar atributos?

Atributos podem ser aplicados maioria das tags.
Voc normalmente usar atributos com mais freqncia em algumas tags, tais como a tag body e
raramente usar em outras, como por exemplo, a tag br que um comando para pular de linha e no precisa de
nenhuma informao adicional.
Assim como existem muitas tags, tambm existem muitos atributos. Alguns atributos so empregados em
tags especficas enquanto outros servem para vrias tags. E vice-versa: algumas tags podem conter somente um
tipo de atributo, enquanto outras podem conter vrios tipos.
Isto pode parecer um pouco confuso, mas medida que voc for praticando vai constatar que tudo fcil
e lgico, bem como vai verificar as inmeras possibilidades que os atributos oferecem.
Este tutorial apresentou a voc, os atributos.
1.3.

Ento, quais so as partes que constituem uma tag?

A constituio bsica de uma tag denominada elemento (por exemplo p em <p>). Assim, uma tag
constituida de um elemento (por exemplo <p>), ou por um elemento e um ou mais atributos (por exemplo <p
style="background-color:#ff0000;">). Simples!

Exemplo 1. Utilizando um elemento (tags de inicio e fim)

O HTML possui um elemento para indicar que o contedo envolvido por este elemento um paragrfo,
chamado p. Este elemento possui ambas as tags de incio e de fim.
<p>Este um paragrafo. Ele inicia com a tag de inicio
do elemento 'p', e ir terminar com a tag de fim para o elemento
'p'.</p>

<p>Este um outro paragrafo. Mas este muito menor.</p>

Formador: <Jos Antnio De Almeida Batista >

14/19

<0768. Criao de Sites WEB>

Nem todos os elementos requerem uma tag de finalizao. Alguns elementos no possuem contedo. Por
exemplo, em HTML voc pode indicar que deseja que uma linha horizontal aparea no documento. Obviamente,
esta linha no possui contedo, assim apenas a tag de inicio requerida para este elemento.

Exemplo 2. Utilizando um elemento (Apenas tag de incio)

O HTML possui um elemento para indicar uma linha horizontal, chamado hr. Este elemento no contm
nenhum contedo, assim ele possui apenas uma tag de inicio.
<p>Este um paragrfo.</p>
<hr>
<p>Este outro paragrafo. Uma linha horizontal o separa
do paragrafo prvio.</p>

Exemplo 3. Elementos contendo elementos; <em>

<p>Este &eacute; um <em>paragrafo</em> simples no qual algumas
das <em>palavras</em> foram <em>enfatizadas</em>.</p>

Tags <HTML> ... </HTML>

Todo documento HTML fica contido entre as tags <HTML> e </HTML>. Dentro dessas tags temos duas
sees : HEAD e BODY que indicam o cabealho do documento e o corpo, respectivamente.

Tags <HEAD> ... </HEAD>

Indicam o cabealho do documento e nelas esto contidas as informaes de configurao da pgina. Entre as
tags <HEAD> e </HEAD> temos as seguintes opes :

Tag <TITLE>
Tag <ISINDEX>
Tag <META>
Tag <NEXTID>

Formador: <Jos Antnio De Almeida Batista >

15/19

<0768. Criao de Sites WEB>

Dessas tags, a mais normalmente usada a <TITLE>, que vista a seguir.

Tag <TITLE> ... </TITLE>

Essas tags devem ser utilizadas entre as tags de cabealho <HEAD>. Determinam o ttulo que ir ser
apresentado na barra de ttulo da janela do navegador.
Abaixo temos um exemplo que ilustra a utilizao das tags vistas at agora :

<HTML>
<HEAD>
<TITLE>Meu primeiro documento HTML</TITLE>
</HEAD>
</HTML>

Tags <BODY> ... </BODY>

Todo o contedo do documento HTML deve estar entre as tags <BODY> e </BODY> .
Na verso 3.0 do HTML a tag <BODY> passou a admitir os atributos BGCOLOR, TEXT, LINK, ALINK e
VLINK, que definem as cores de preenchimento da pgina, texto, links no visitados, link ativos e links visitados
respectivamente e BACKGROUND, que define uma imagem de fundo para a pgina. Se no forem especificadas
nem BGCOLOR e nem BACKGROUND, a cor de fundo da pgina ser a padro do navegador.

<HTML>
<HEAD>
<TITLE>Esse documento tem o fundo amarelo !! </TITLE>
</HEAD>
<BODY BGCOLOR=#FFFF00>
</BODY>
</HTML>

Tag <BR>
Faz uma quebra de linha no texto. O texto em um documento HTML no faz quebras de linha automticas.
Essas devem ser inseridas utilizando-se tags <BR>.

Formador: <Jos Antnio De Almeida Batista >

16/19

<0768. Criao de Sites WEB>

Tags <P> ... </P>

Essas tags criam pargrafos no texto do corpo do documento, gerando uma quebra de linha maior que a
da tag <BR>. Admitem tambm atributo de alinhamento ALIGN=left ( esquerda), ALIGN=right ( direita) e
ALIGN=center (ao centro).

Tags <B> ... </B>

Coloca em negrito o texto envolvido.

Tags <I> ... </I>

Coloca em itlico o texto envolvido.

Tags <U> ... </U>

Sublinha o texto envolvido.

Tags <SUB> ... </SUB> e <SUP> ... </SUP>

O texto envolvido fica Subscrito e Sobrescrito , respectivamente.

Tags <Hn> ... </Hn>

Para demarcar ttulos e subttulos, use os TAGs de HEADER (H1 a H6), que podem ser de seis formas
com tamanhos, identao e posicionamento diferentes. Juntamente
podemos utilizar as opes de alinhamento ALIGN=left ( esquerda), ALIGN=right ( direita) e ALIGN=center
(ao centro).
A utilizao dos tags H1.. H6 livre, embora o comando H1 deva salientar tpicos principais e assim
sucessivamente para tpicos e menor importncia

1.4. Estrutura do site

A estrutura do site, ou Arquitetura da informao, composta do conjunto de informaes articuladas
atravs de links, em conexes semnticas. Permite o deslocamento dos utilizadores atravs das informaes
publicadas e a criao de percees nicas destas informaes a partir dos caminhos percorridos.

Formador: <Jos Antnio De Almeida Batista >

17/19

<0768. Criao de Sites WEB>

A estrutura estabelecida para atender s necessidades de ao e informao dos utilizadores, de

acordo com os objectivos do site.
Se facilmente identificvel na interface, refora o sentido de localizao do usurio em cada pgina do
site e facilita o seu deslocamento entre informaes.
Pode ser hierarquizada, baseada em taxonomias, ou tabulada (como os resultados de jogos de um
campeonato ou o passo a passo de um tutorial).

Exemplo:

Formador: <Jos Antnio De Almeida Batista >

18/19

<0768. Criao de Sites WEB>

2.
...

Bibliografia

Formador: <Jos Antnio De Almeida Batista >

19/19