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

https://pt.wikipedia.org/wiki/Lista_de_portas_de_protocolos

https://pt.wikipedia.org/wiki/TCP

https://pt.wikipedia.org/wiki/Protocolo_UDP

https://pt.wikipedia.org/wiki/FTP

https://pt.wikipedia.org/wiki/SSH

https://pt.wikipedia.org/wiki/Telnet

https://pt.wikipedia.org/wiki/SMTP

https://pt.wikipedia.org/wiki/E-mail

https://pt.wikipedia.org/wiki/Domain_Name_System

https://pt.wikipedia.org/wiki/Endere%C3%A7o_IP

https://pt.wikipedia.org/wiki/HTTP

https://pt.wikipedia.org/wiki/Browser

https://pt.wikipedia.org/wiki/POP3

https://pt.wikipedia.org/wiki/IMAP

https://pt.wikipedia.org/wiki/Transport_Layer_Security

https://pt.wikipedia.org/wiki/IRC

https://pt.wikipedia.org/wiki/Chat

https://pt.wikipedia.org/wiki/Pichat



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

Documents

Transcript of Criação de Sites web Tutorial