Criação de Sites web Tutorial

1,590 views

Published on

0768. Criação de Sites
WEB

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,590
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
73
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Criação de Sites web Tutorial

  1. 1. 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>
  2. 2. <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.
  3. 3. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 3/19 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
  4. 4. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 4/19 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.
  5. 5. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 5/19 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
  6. 6. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 6/19 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.
  7. 7. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 7/19 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.
  8. 8. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 8/19 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)
  9. 9. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 9/19 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.
  10. 10. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 10/19 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.
  11. 11. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 11/19 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.
  12. 12. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 12/19 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
  13. 13. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 13/19 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: <p ... >  Atributo:  nome: class  valor: foo  Conteúdo: This is a paragraph.  Etiqueta de fechamento: </p> completo: <p class="foo">Isto é um parágrafo</p> 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".
  14. 14. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 14/19 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 <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 conteúdo envolvido por este elemento é um paragráfo, chamado p. Este elemento possui ambas as tags de início 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>
  15. 15. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 15/19 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. <p>Este é um paragráfo.</p> <hr> <p>Este é outro paragrafo. Uma linha horizontal o separa do paragrafo prévio.</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 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>
  16. 16. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 16/19 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 <BR> 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 <BR>. <HTML> <HEAD> <TITLE>Esse documento tem o fundo amarelo !! </TITLE> </HEAD> <BODY BGCOLOR=”#FFFF00”> </BODY> </HTML>
  17. 17. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 17/19 Tags <P> ... </P> Essas tags criam parágrafos no texto do corpo do documento, gerando uma quebra de linha maior que a da tag <BR>. Admitem também 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 itálico 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 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.
  18. 18. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 18/19 ■ 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:
  19. 19. <0768. Criação de Sites WEB> Formador: <José António De Almeida Batista > 19/19 2. Bibliografia ...

×