Criação de Sites web Tutorial

P á g i n a | 1
<0768. Criação de Sites
WEB >
Manual de Apoio ao Formando
<José António De Almeida Batista>
<Castro daire>
<10-01-2013 a 11-02-2013>

<0768. Criação de Sites WEB>
Formador: <José António De Almeida Batista > 2/19
Índice
Pág.
Enquadramento...............................................................................................................................3
Objetivos Gerais..........................................................................................................................................3
Objetivos Específicos..................................................................................................................................3
1. <capítulos>..............................................................................................................................4
2. Bibliografia................................................................................Erro! Marcador não definido.

Enquadramento
Objetivos Gerais
 Criar documentos em hipertexto.
 Desenvolver e alojar um site na Internet.
Objetivos Específicos
Introdução à Hyper Text Markup Language
• Elaboração de documentos de texto e outros tipos de ficheiros em HTML para a web
Servidores
• Elaboração de site web
• Envio dos ficheiros para o servidor por ftp

1. < Conceitos Introdutórios e Técnicas de Implementação para estruturar um site
(página) 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 à informação 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 serviços a uma rede de computadores. Esses
serviços podem ser de diversa natureza, por exemplo, servidor de ficheiros, servidor de correio
electrônico ou servidor WEB (disponibilizar as páginas HTML). Os computadores que acedem aos
serviços de um servidor são 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 também conhecido como Navegador, tem como principal utilidade
permitir a visualização e interacção dos documentos ou páginas HTML (site).
Que "browsers" existem ?
O mais divulgado é o Internet Explorer e o mais usado a seguir é o Chrome, FireFox, safari,
netscape. Além de dever ter uma versão não muito antiga terá que ter ainda instalado um conjunto
de ficheiros se pretender visualizar alguns conteúdos disponíveis na Internet.
ARQUIVOS DE INTERNET TEMPORÁRIOS
Quando acessamos uma página pela primeira vez, os arquivos que a formam (textos, fotos,
vídeos, sons) são trazidos para o nosso computador, e são armazenados em uma pasta
apropriada. Esses arquivos passam a se chamar arquivos temporários da Internet.
Esses arquivos são usados para, quando uma página for acessada novamente, seus dados sejam
trazidos da versão da página que está no computador, e não precisem ser “puxados” da Internet, o
que acelera, e muito, a exibição da página.
Esses arquivos temporários são usados, também, para que se possa acessar essas páginas estando
desligado da Internet (ou seja, acesso Off-line). No Internet Explorer é possível controlar o tamanho
máximo que a pasta desses arquivos terá, limitando o espaço consumido em disco pelas páginas da
Internet.

COOKIES
Cookies são pequenas informações, deixadas pelos sites que visitou, no seu computador.
Os Cookies são utilizados pelos sites de diversas formas, eis algumas:
 Para guardar a sua identificação e senha quando pula de uma página para outra;
 Para manter uma lista de compras em sites de comércio eletrônico;
 Personalização de sites pessoais ou de notícias, quando você escolhe o que quer que seja
mostrado nas páginas destes sites;
 Manter a lista das páginas vistas em um site, para estatística ou para retirar as páginas que
você não tem interesse dos links.
O problema com relação aos Cookies é que eles são utilizados por empresas que vasculham suas
preferências de compras e espalham estas informações para outros sites de comércio
eletrônico. Assim você sempre terá páginas de promoções ou publicidade, nos sites que
visitar, dos produtos de seu interesse. Na verdade não se trata de um problema de segurança, mas
alguns utilizadores podem considerar este tipo de atitude uma invasão de privacidade.
Protocolo
Uma definição de normas para possibilitar a comunicação entre computadores diferentes e
redes diferentes.
Na tabela abaixo listam-se os serviços e protocolos associados às portas TCP e UDP.
Serviço TCP UDP Observações
FTP 21 21
Transferência de
arquivos
SSH 22 22
Protocolo de login
remoto encriptado
Telnet 23 23
Protocolo de login
remoto
SMTP 25 25 Para envio de email
DNS 53 53
Resolução de nomes
para IP
HTTP 80 80 Para web browser
POP3 110 110 Para recepção de email
IMAP 143 143
Para recepção/envio de
email
TLS/SSL 443 443
Protocolo de camada de
sockets segura
IRC 6667 6667 Para conversação/chat
Pichat 9009 9009
Protocolo de
conversação/chat

Site ou página
Um site (ou website) é um conjunto de páginas de informação disponíveis na Internet. Pode
conter todo o tipo de informações em texto, imagem, animações ,vídeo e som e pode ser
consultado a partir de qualquer local do mundo.
Home Page
Página inicial de um site, tem o objectivo de apresentar e indicar as outras páginas que
compõem o mesmo.
URL
Abreviatura de Universal Resource Locator é o endereço de um recurso ou página da Internet. Pode
ser um endereço 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 página da Internet a outro
documento. É o elo de ligação entre as páginas da Internet. Podem aparecer associado a
palavras ou imagens e pode despoletar determinada acção.
Webdesigner
É uma extensão de designer, profissional responsável pela criação das páginas da Internet
(layout) por meio de diversas áreas de conhecimento além do design, como programação por
exemplo.
Web Master
Profissional responsável pelo funcionamento, manutenção e segurança do Web Server.
Colocação do site online, Programação, etc
Web Developer
Profissional responsável pela Programação, geralmente são programadores profissionais que
percebem de muitas tecnologias e linguagens de programação.
Layout
Layout é um esboço mostrando a distribuição física, tamanhos de elementos como textos,
gráficos ou figuras num determinado espaço. Pode ser apenas formas rabiscadas numa folha para
depois realizar o projecto ou pode ser o projecto em fase de desenvolvimento.
DNS
Serviço de Nome de Domínio, O DNS é um serviço usado para realizar a tradução dos nomes
de domínios (URLs) em endereços IP. Ou seja, quando digitamos, em nosso navegador, esse
endereço é enviado para um servidor que trabalha com o protocolo DNS, e que, por sua vez,
devolve ao computador que requisitou o endereço IP associado ao domínio desejado.

O que é um domínio ?
Um domínio corresponde a um nome e a um endereço na internet. Por exemplo, sapo.pt
corresponde a um domínio na internet. Associado a um domínio temos um responsável pelo domínio
e um conjunto de conteúdo variado. Para se ter um domínio é preciso registar o mesmo (a fim de
não haver 2 domínios com o mesmo nome) e é preciso ter o domínio alojado num servidor para
permitir que as pessoas possam aceder à informação que nele se encontra.
O registo de um domínio pode custar até 15 euros por ano.
Subdomínio
Um subdomínio é um endereço localizado dentro do seu endereço principal(Domínio).
Exemplo de subdomínio videos.sapo.pt
Endereço Ip
Na Internet, cada servidor possui um endereço único (endereço IP), uma série de números
separados por pontos; por exemplo o endereço 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 página da Web ou um site.
As páginas da Web são escritas em HTML, CSS , JavaScript etc. Essas páginas podem consistir em
texto simples e imagens gráficas. As páginas podem também ser interativas ou exibir
informações dinâmicas. As páginas interativas de servidor são mais complexas de se
desenvolver, mas possibilitam sites mais avançados. Hoje em dia, a maioria das páginas é
interativa e fornece serviços online modernos, como carrinhos de compra, visualizações
dinâmicas e até mesmo complexas redes sociais como o FACEBOOK.
O que é preciso para ter um Site na Internet:
1- Desenvolver a página
- Ao desenvolver o layout da página é preciso ter em conta:
navegação; ideia sobre o que se pretende na página.
2- Ter um alojamento (pode alugar um servidor online, criar o próprio servidor, ou arranjar um
grátis)
3- Registar um domínio (.com,.net,.org,.pt,.tv,etc) ou arranjar um sub-domínio grátis
Factores a ter em conta na implementação do site , os mais importantes são:
Tecnologia utilizada HTML = mais rápido; Flash = mais lento o ideal é conjugar as duas
tecnologias
A informação deve estar organizada tendo em atenção a sua importância .
Utilizar um vocabulário simples e disponibilizar apenas a informação necessária evitando
redundâncias .
As cores a utilizar e os efeitos gráficos devem ser escolhidos com muito cuidado.
de imagem e optimização de imagem utilizada, se as imagens forem mal optimizadas, tornarão o
site mais lento , vídeos, musicas, animações ou misto) mais lento o site e mais difícil retenção
pelo utilizador
dinamismo do site: se as páginas dinâmicas forem geradas na altura (no cliente), o site será
mais lento, enquanto que se as páginas estiverem já geradas (no servidor) o site será mais
rápido.

largura de banda do servidor significativa para que não hajam congestionamentos
também 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 adaptação do utilizador á página web)
- Amigabilidade (características desejáveis no interface entre o utilizador e a página web)
Ser de fácil aprendizagem, permitir uma utilização eficiente e apresentar poucos erros, são
os aspectos fundamentais para a percepção da boa usabilidade por parte do utilizador.
Mas a usabilidade pode ainda estar relacionada com a facilidade de ser memorizada e ao nível de
satisfação do utilizador .
LINGUAGENS DE PROGRAMAÇÃO
Que correm no cliente (Browser):
- HTML É a linguagem de formatação tradicional usada para criar páginas WEB com programação de
hypertexto (documento com palavras ou imagens que levam para outras páginas com um clique).
- DHTML Dynamic HTML, ou DHTML, é a união das tecnologias HTML , Javascript e CSS para permitir
que uma página Web seja modificada dinamicamente na própria máquina cliente, sem necessidade
de novos acessos ao servidor web.
- JAVASCRIPT é uma linguagem de programação criada pela Netscape para atender,
principalmente, as seguintes necessidades: * validação de formulários no lado cliente (programa
navegador);* interação com a página. Esta linguagem é utilizada, por exemplo, para dar movimento
a imagens ou criar botões que respondem a clicks do rato.
- CSS Cascading Style Sheets ou CSS são estilos para páginas web e envolvem um conceito
inovador: possibilitam a mudança da aparência simultânea de todas as páginas relacionadas com o
mesmo estilo.
- JQuery,Jscript, xml, ajax, etc…
Que correm no servidor:
- PHP (um acrónimo recursivo para "PHP: Hypertext Preprocessor") é uma linguagem de
programação de computadores interpretada, livre e muito utilizada para gerar conteúdo dinâmico na
Web. Por exemplo para ligar a base de dados e e manipular a sua informação, formulários, etc.
- ASP.NET Active Server Pages: são páginas criadas dinamicamente pelo servidor Web. Quando um
browser solicita uma página do tipo ASP, o servidor constrói uma página HTML e envia-a ao
browser. A diferença entre uma página ASP e um documento HTML clássico, é que o segundo
corresponde a um documento estático, que já se encontra no servidor no formato que será exibido
no navegador.
- JAVA ,CGI ,PERL ,COLDFUSION ,etc
EDITORES DE PÁGINAS WEB:
- Frontpage O Microsoft Frontpage é considerado um dos melhores programas na criação e edição
de Web Sites.
- Dreamweaver Programa O Macromedia Dreamweaver é um editor profissional que cria e gere
páginas Web. Com este programa é fácil criar e editar páginas compatíveis com diversos
navegadores e plataformas usando ferramentas avançadas de desenho e layout.
- HTML-KIT
- Notepad (bloco de notas)

EDITORES DE IMAGENS:
- Adobe Photoshop O Adobe Photoshop é o editor de imagens mais utilizado pelos webdesigners
profissionais. Com ele é possível manipular as imagens de todas as maneiras possíveis trabalhando
com as mais utilizadas extensões de arquivos gráficos.
- Coreldraw O Coreldraw é um programa gráfico que gera desenhos vectoriais. Ele cria imagens
usando formas de objectos armazenados internamente como equações matemáticas (vector), bem
diferente das aplicações que utilizam bitmap, uma imagem composta pôr uma série de pontos.
-, etc
EDITORES E ANIMADORES GRÁFICOS E VÍDEO:
- FLASH O Macromedia Flash é um software de criação de animações dimensionáveis e interactivas
para a Web. É possível criar logótipos com animação e com controles direccionáveis para navegação
em Web Sites. Com a utilização do flash a interactividade com o utilizador torna-se um grande
atractivo .
- Ulead GIF Animator O Ulead GIF Animator é um software de produção de imagens animadas. É a
ferramenta que permite manipular imagens do tipo GIF Animado.
- PHOTOSTORY o Microsoft photostory dá para criar vídeos a partir de imagens
- MOVIE MAKER o Windows movie maker da para criar e editar vídeos
- ADOBE PREMIERE , ETC
FERRAMENTAS E UTILITÁRIOS:
- WS_FTP O programa WS Ftp faz a conexão com o servidor FTP. Programa cliente utilizado para
transferir o site para o servidor.
- PUTTY O software PUTTY fornece as potencialidades da transferência segura na Shell (SSH®) e
telnet.
1. Gerações de Sites
1.1. Definição
Desde o seu lançamento e o início de seu uso na década de 90, os sites evoluíram
demais em tecnologia. Não há um consenso em respeito a gerações de sites, pois há quem diga que estamos na
segunda, outros na terceira ou quarta e ainda há quem diga que estamos na sexta geração, porém convencionou-
se expressar aqui quatro gerações.
1.2. Sites de 1ª Geração
Devido a limitação imposta por modem’s lentos e monitores monocromáticos os web sites de primeira
geração eram muito simples. As primeiras paginas que circularam pela web foram criadas por cientistas e
pesquisadores que desejavam compartilhar suas idéias, documentos, teses entre outros.
Essas páginas caracterizadas por longos textos, com seqüência do topo para a base e da esquerda para a
direita e usava recursos básicos de formatação de textos, como negrito, itálico, marcadores de textos etc. Os web
sites de primeira geração eram criados portécnicos e muitos utilizavam texto preto em fundo cinza.

1.3. Sites de 2ª Geração
Os sites de segunda geração trouxeram algumas novidades visuais que foram possibilitadas pelos
recursos incorporados nas novas versões dos navegadores. Incluem estas melhorias visuais: ícones substituindo
palavras, imagens “ladrilhadas”, substituindo o fundo cinza, botões com chanfros e banners substituindo os títulos.
Uma outra característica dos sites de segunda geração é a utilização de menus verticais com opções dispostas de
cima para baixo e com listas para apresentar uma hierarquia de informações.
A tecnologia teve grande influência nos sites de segunda geração. Isto trouxe como resultados tantos
sites com uma melhoria visual através do uso de ícones e menus. Neste momento a Internet estava sendo
utilizada para fins comercias, porém as páginas ainda eram construídas por técnicos.
1.4. Sites de Terceira Geração
Os sites de terceira geração apresentam uma mudança radical em sua aparência. Apesar da contínua
evolução dos navegadores e tecnologias que sempre influenciam o design, a principal característica dos web sites
de terceira geração não é a tecnologia e sim o design. Esta mudança foi conseqüência, sobretudo, da vinda de
designers que já trabalhavam com artes gráficas para o mundo das páginas web. Começaram a aparecer páginas
mais criativas, com melhor combinação de cor, mais harmonia na composição dos elementos, enfim, com
planejamento visual.
A maioria dos web sites que conhecemos atualmente é classificado como sendo da terceira geração.
Resumindo
1° Geração: Sites de primeira geração eram estruturados com réguas horizontais. Alguns eram bem
organizados, mas a maioria possuía textos de lado a lado, que se estendiam por páginas, separadas por linhas
em branco sem nenhum significado.

2ª Geração: Sites de segunda geração são basicamente sites de primeira geração com ícones
substituindo palavras, imagens ladrilhadas que substituem o fundo cinza, botões com chanfros e banners no lugar
dos títulos. Estes sites continham muitas informações e eram desorganizados.
3ª Geração: Site de terceira geração é baseado no design e não na competência tecnológica. Sites dessa
geração dão aos visitantes uma experiência completa , da entrada até a saída. O que está em jogo é o visual e
não a técnica, e o design é a diferença.

2. Termos e Estrutura do código HTML
HTML é a acrossemia deHyperText Markup Language, é uma das linguagens utilizadas para desenvolver páginas
na internet
A tag, dentro da linguagem HTML, são 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 começa e onde ele termina. A tag não é uma
parte própria 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> Itálico <.U>…<./U> Sublinhado
<.TT>…<./TT>espaçadas por igual <.SUB> … <./SUB> Subescrito <.SUP> … <./SUP> Sobrescrito
As TAGs que produzem efeitos locais, apenas introduzindo algum elemento no texto, não 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 começam e terminam.
Elementos vazios possuem apenas uma tag de abertura, que possui os seus respectivos atributos. Para
exemplificação, o elemento link, para o qual a sintaxe é
<link rel=stylesheet href=fancy.css type="text/css">
Elementos de texto são construídos com:
 uma etiqueta de abertura (<tag>) marcando o início do elemento, que pode ser incorporar alguns diversos
atributos;
 uma quantidade de conteúdo textual, mas sem elementos (texto);
 uma etiqueta de fechamento, na qual o nome do elemento é precedido por uma barra: </tag>. Em
algumas versões do HTML, a etiqueta de fechamento é opcional para alguns elementos. A etiqueta de

fechamento é obrigatória no XHTML.
Elementos normais geralmente possuem ambas marcações de abertura e fechamento, a pesar de que para
alguns elementos a marcação de fechamento, ou ambas marcações, podem ser omitidas. Eles são construídos de
maneira semelhante:
 uma etiqueta de abertura (<tag>) marcando o início do elemento, que pode ser incorporar alguns diversos
atributos;
 uma quantidade de conteúdo, 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: 
 Atributo:
 nome: class
 valor: foo
 Conteúdo: This is a paragraph.
 Etiqueta de fechamento: 
completo: Isto é um parágrafo
1.1. O que é atributo?
Os elementos podem ter atributos. Um atributo possui um nome e um valor, e é utilizado para adicionar
informações extras ao elemento. Esta pode ser a informação a qual indica como o conteúdo deve ser renderizado,
ou pode ser algo que identifique a ocorrência única do elemento, ou pode ser qualquer outra coisa.
O atributo de um elemento é sempre escrito dentro da tag de início para aquele elemento, e assume a
forma nome-do-atributo="valor-do-atributo".

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 freqüência 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 não precisa de
nenhuma informação adicional.
Assim como existem muitas tags, também existem muitos atributos. Alguns atributos são empregados em
tags específicas enquanto outros servem para várias tags. E vice-versa: algumas tags podem conter somente um
tipo de atributo, enquanto outras podem conter vários tipos.
Isto pode parecer um pouco confuso, mas à medida que você for praticando vai constatar que tudo é fácil
e lógico, bem como vai verificar as inúmeras possibilidades que os atributos oferecem.
Este tutorial apresentou a você, os atributos.
1.3. Então, quais são as partes que constituem uma tag?
A constituição básica de uma tag é denominada elemento (por exemplo p em ). Assim, uma tag é
constituida de um elemento (por exemplo ), ou por um elemento e um ou mais atributos (por exemplo ). Simples!
Exemplo 1. Utilizando um elemento (tags de inicio e fim)
O HTML possui um elemento para indicar que o conteúdo envolvido por este elemento é um paragráfo,
chamado p. Este elemento possui ambas as tags de início e de fim.
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'.
Este é um outro paragrafo. Mas este é muito menor.

Nem todos os elementos requerem uma tag de finalização. Alguns elementos não possuem conteúdo. Por
exemplo, em HTML você pode indicar que deseja que uma linha horizontal apareça no documento. Obviamente,
esta linha não possui conteúdo, assim apenas a tag de inicio é requerida para este elemento.
Exemplo 2. Utilizando um elemento (Apenas tag de início)
O HTML possui um elemento para indicar uma linha horizontal, chamado hr. Este elemento não contém
nenhum conteúdo, assim ele possui apenas uma tag de inicio.
Este é um paragráfo.
<hr>
Este é outro paragrafo. Uma linha horizontal o separa
do paragrafo prévio.
Exemplo 3. Elementos contendo elementos; 
Este é um paragrafo simples no qual algumas
das palavras foram enfatizadas.
Tags <HTML> ... </HTML>
Todo documento HTML fica contido entre as tags <HTML> e </HTML>. Dentro dessas tags temos duas
seções : HEAD e BODY que indicam o cabeçalho do documento e o corpo, respectivamente.
Tags <HEAD> ... </HEAD>
Indicam o cabeçalho do documento e nelas estão contidas as informações de configuração da página. Entre as
tags <HEAD> e </HEAD> temos as seguintes opções :
Tag <TITLE>
Tag <ISINDEX>
Tag <META>
Tag <NEXTID>

Dessas tags, a mais normalmente usada é a <TITLE>, que é vista a seguir.
Tag <TITLE> ... </TITLE>
Essas tags devem ser utilizadas entre as tags de cabeçalho <HEAD>. Determinam o título que irá ser
apresentado na barra de título da janela do navegador.
Abaixo temos um exemplo que ilustra a utilização das tags vistas até agora :
<HTML>
<HEAD>
<TITLE>Meu primeiro documento HTML</TITLE>
</HEAD>
</HTML>
Tags <BODY> ... </BODY>
Todo o conteúdo do documento HTML deve estar entre as tags <BODY> e </BODY> .
Na versão 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 página, texto, links não visitados, link ativos e links visitados
respectivamente e BACKGROUND, que define uma imagem de fundo para a página. Se não forem especificadas
nem BGCOLOR e nem BACKGROUND, a cor de fundo da página será a padrão do navegador.
Tag 
Faz uma quebra de linha no texto. O texto em um documento HTML não faz quebras de linha automáticas.
Essas devem ser inseridas utilizando-se tags .
<HTML>
<HEAD>
<TITLE>Esse documento tem o fundo amarelo !! </TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFF00”>
</BODY>
</HTML>

Tags ... 
Essas tags criam parágrafos no texto do corpo do documento, gerando uma quebra de linha maior que a
da tag . Admitem também atributo de alinhamento ALIGN=”left” (à esquerda), ALIGN=”right” (à direita) e
ALIGN=”center” (ao centro).
Tags ... 
Coloca em negrito o texto envolvido.
Tags ... 
Coloca em itálico o texto envolvido.
Tags ... 
Sublinha o texto envolvido.
Tags ... e ... 
O texto envolvido fica Subscrito e Sobrescrito , respectivamente.
Tags <Hn> ... </Hn>
Para demarcar títulos e subtítulos, use os TAGs de HEADER (H1 a H6), que podem ser de seis formas
com tamanhos, identação e posicionamento diferentes. Juntamente
podemos utilizar as opções de alinhamento ALIGN=”left” (à esquerda), ALIGN=”right” (à direita) e ALIGN=”center”
(ao centro).
A utilização dos tags H1.. H6 é livre, embora o comando H1 deva salientar tópicos principais e assim
sucessivamente para tópicos e menor importância
1.4. Estrutura do site
A estrutura do site, ou Arquitetura da informação, é composta do conjunto de informações articuladas
através de links, em conexões semânticas. Permite o deslocamento dos utilizadores através das informações
publicadas e a criação de perceções únicas destas informações a partir dos caminhos percorridos.

■ A estrutura é estabelecida para atender às necessidades de ação e informação dos utilizadores, de
acordo com os objectivos do site.
Se é facilmente identificável na interface, reforça o sentido de localização do usuário em cada página do
site e facilita o seu deslocamento entre informações.
■ 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:

2. Bibliografia
...

Criação de Sites web Tutorial

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Criação de Sites web Tutorial

Mais de Jose De Almeida Batista

Criação de Sites web Tutorial