Referncias mdulo 1 (at a aula 9): Severo, C. Internet: como criar home pages.

Rio de Janeiro: Editora Campus, 1996. Lemay, L. Aprenda em uma semana HTML 4. Rio de Janeiro: Editora Campus, 1998. Alcntara, A. et al. Home pages: recursos e tcnicas para criao de pginas WWW. Rio de Janeiro: Editora Campus, 2000. Campbell B. & Darnell R. Aprenda em uma semana Dynamic HTML. Rio de Janeiro: Editora Campus, 1998. ICMC-USP.Instituto de Cincias Matemticas e de Computao. USP. Disponvel em: http://www.icmsc.sc.us p.br/manuals/HTML Home Pages Documento projetado para ser a pgina principal de um Site. Funciona como a porta de entrada e deve conter um ou mais links para as demais pginas do Site ou para outros Sites relacionados. Chama-se rede de computadores (Net) a utilizao de diversos computadores que, de maneira interligada, trocam servios ou informaes. Se essa conexo se restringir a uma pequena regio (um escritrio por exemplo) chamada intranet. Internet representa esta conexo em nvel global. Mas esse o assunto de outra disciplina, que tratar de redes de computadores.

Aula 1: Introduo - a WEB e os Documentos HTML

Antes da WWW atingir um grande pblico era privilgio de poucos, mas agora com uma Home Page de contedo interessante no ar pode-se ser achado e visitado por pessoas de todos os lugares do mundo, o tempo todo. Empresas e profissionais j notaram as grandes portas que se abrem com essa enorme possibilidade de divulgao. Mas para isso ser possvel algum tem que fazer a elaborao do site; isso que voc vai aprender nesse nosso curso. No o mximo? Voc deixar de ser apenas mais um visitante para ser um criador de sites! Objetivos: Nesta primeira aula voc: - aprender os conceitos bsicos da WEB, - ver como a estrutura de um documento HTML, desenvolvendo nosso primeiro exemplo, - conhecer os comandos bsicos de formatao. Voc j terminar sua primeira aula aprendendo inclusive como acentuar palavras em HTML! Pr-requisitos: No h pr-requisitos para essa nossa primeira aula, embora seja sempre desejvel que voc conhea a Internet ou tenha "navegado" por ela alguma vez! 1. A World Wide Web - WWW A idia inicial da Internet surgiu, em 1969, como uma rede descentralizada para interligar instalaes militares (ARPANET). Durante a dcada de 70 vrias outras redes foram sendo interligadas ARPANET e, em 1980, ela passou a se chamar Internet. No incio da dcada de 80 so criadas redes de interconexo de instituies cientficas (BITNET, CSNET, NSFNET). O ano de 1983 um marco para a Internet, pois nele os militares abandonam o controle da ARPANET. A World Wide Web (WWW), ou simplesmente Web, foi desenvolvida no final da dcada de 80 como uma forma de facilitar aos pesquisados o acesso a documentos cientficos. Atravs da Web possvel, partindo de um determinado ponto, pesquisar outros documentos a ele relacionados,

A histria aqui no Brasil: A Internet surgiu no Brasil em 1991, num primeiro momento interligando instituies acadmicas por meio da Rede Nacional de Pesquisa. A partir de 1995, comea a utilizao comercial e a popularizao da rede. Com o surgimento dos provedores de acesso, a Internet chega ao cidado comum. A exposio e divulgao da rede atravs dos meios de comunicao de massa do um grande impulso ao seu crescimento.

independente de sua localizao fsica (que o usurio no tem a mnima necessidade de conhecer). Com a Web, ganhou fora a utilizao, em larga escala, da tcnica de hipertextos. Um hipertexto um documento onde possvel incluir referncias (em ingls, Links) a outros documentos. A seleo de uma destas referncias, leva o usurio ao documento referenciado. Inicialmente, a informao disponvel na Web era encontrada principalmente sob a forma de textos e hipertextos. Aos poucos foram sendo incorporados elementos grficos e animaes aos documentos. Tais recursos ajudaram muito a popularizar a Web, aproximando-a mais do cidado comum. A popularizao da Web criou uma srie de novas aplicaes, fazendo com que ela seja utilizada hoje para: divulgao cientfica, trabalho cooperativo, divulgao de informaes culturais e livros eletrnicos, promoo de produtos e servios, realizao de comrcio eletrnico e suporte tcnico e vrios outros usos que vo sendo inventados a cada instante.

2. Conceitos Bsicos da Web Uma caracterstica importante da Web (ou Internet) que a informao disponibilizada de forma independente do tipo de computador que ser utilizado para a sua visualizao. Para isso necessrio que os documentos sejam escritos utilizando um formato padronizado. Esta padronizao obtida atravs de uma linguagem chamada HTML: HyperText Markup Language. O padro HTML definido pelo World Wide Web Consortium-W3C, que uma das entidades que controla a Internet. O padro atual representado pelo HTML 4. O cdigo HTML contm instrues de visualizao de texto e informao para localizao de outros documentos (links). Para poder visualizar corretamente o documento, o usurio necessita de um programa (navegador) capaz de interpretar esta linguagem, reconstituindo a informao segundo as instrues contidas no cdigo. Para obter algum documento na Web, o usurio deve fornecer ao navegador um conjunto de informaes sobre este documento: a) seu protocolo de comunicao, b) o endereo, na Internet, da mquina na qual se encontra o documento, c) o diretrio onde o documento est arquivado na mquina e

Os principais servios da Internet so descritos pelos diversos protocolos de comunicao que ela disponibiliza. Alguns deles so: Correio Eletrnico e-mail Conexes Remotas -telnet Transferncia de Arquivos - ftp Transferncia de hipertextos - HTTP

Editores de HTML Atualmente, existe uma grande quantidade de ferramentas, para auxiliar o desenvolvimento de pginas de Web. H vrios nveis de ferramentas desde aquelas destinadas a converter documentos de um determinado formato para HTML, passando por editores visuais simples, at ferramentas complexas de gerenciamento de sites. Exemplos destas ferramen-tas so: Filtros conversores: rtftohtml, pstohtml. Editores de tags: HTML Assistant, HotDog, W3e. Editores Wysiwyg: Netscape Composer, MS Internet Assistant, MS FrontPage Express. Gerenciadores de site: MS FrontPage, AOLPress, Macromedia Dreamweaver. Estas ferramentas porm no eliminam a necessidade de conhecer a linguagem HTML. Mesmo as ferramentas mais complexas mantm a facilidade de visualizar e editar diretamente o cdigo HTML, o qual muitas vezes a forma mais fcil de se obter o efeito desejado na pgina.

d) o nome do documento. Estes dados devem ser informados ao navegador segundo um formato padronizado que chamamos de URL. A mquina que contm o documento a ser exibido deve estar executando um programa que se encarrega de receber o pedido do documento, localiz-lo no disco e envi-lo para a mquina que o pediu. Este programa chamado de Servidor de Web e o navegador que pede o documento chamado de Cliente. Agora que voc j viu como o documento chega at o usurio, aps sua solicitao, veja alguns conceitos bsicos envolvidos neste processo. 2.1. Navegadores (Browsers) Para navegar pela Web necessrio um programa que chamamos de navegador (em ingls, Browser). Ele responsvel por: solicitar documentos na Internet e interpretlos, exibindo-os para o usurio. Exemplos de navegadores: Netscape, Internet Explorer, Mosaic, Lynx.

2.2. Servidores (Web Servers) Para navegar pela Web tambm necessrio outro tipo de programa, chamado servidor. Os programas deste tipo foram especialmente elaborados para administrar o acesso s pginas HTML. Eles so executados nas mquinas onde esto guardados os documentos HTML. Estes programas so os responsveis pelo envio dos documentos para as mquinas que os solicitam. Exemplos servidores: NCSA, CERN, Apache (em ambiente UNIX), PWS, IIS, Netscape, WebSite (em ambiente windows).

2.3. HTML (Hypertext Markup Language) a linguagem padro usada para a escrita de pginas da Web. O HTML uma linguagem de marcao, ou seja, seus comandos (chamados Tags) servem para informar aos programas de navegao os elementos que sero exibidos na pgina: cabealhos, textos em itlico, links, imagens etc. O navegador Web interpreta estes comandos e exibe a pgina para o usurio.

Um texto HTML no define a forma exata como o documento vai ser exibido. Isto depende do programa de navegao usado e das definies feitas pelo usurio.

2.4. URL (Uniform Resource Locator) A URL a conveno utilizada para indicar ao navegador a forma de localizar um endereo na rede. Por exemplo: http://www.receita.fazenda. gov.br/IR2002/devolucao.htm Uma URL obedece ao seguinte formato: protocolo://servidor/caminho/arquivo Onde: protocolo Indica a forma como vai ser realizada a comunicao entre o servidor e o cliente e tambm o tipo de servio que ser prestado. No caso de HTML o protocolo o http (HyperText Transfer Protocol). servidor Endereo do servidor (ou maquina) na Internet. Pode ser dado na forma nome_da_mquina.domnio (como no exemplo acima) ou atravs do endereo IP da mquina (como em 146.164.2.68). caminho Localizao do arquivo no disco do servidor atravs de um diretrio ou de uma lista de diretrios. (por exemplo: http://www.ic.uff.br/~aconci/curso /formatos.html, onde ~aconci e curso so diretrios ou "pastas"). arquivo Nome do arquivo desejado. Esta informao pode ser omitida. Neste caso, o servidor assume um nome padro, que pode variar de instalao para instalao, mas normalmente home.html ou index.html. Voc vai agora conhecer como se constitui um documento HTML, sua estrutura e seus comandos bsicos de formatao.
ASCII abreviatura de American Standard Code for Information Interchange, e identifica uma conveno amplamente usada em computao para codificar caracteres (letras, nmeros e smbolos grficos).

3. Caractersticas Gerais de HTML Um documento escrito em HTML um arquivo ASCII comum, contendo apenas os caracteres ASCII visveis. O navegador ignora qualquer caracter especial, inclusive aqueles que sugerem algum tipo de formatao ao texto (como TAB, CR, LF). Qualquer tipo de formatao deve ser informada atravs dos comandos conhecidos como tags.

As tags, ou marcas, se diferenciam do texto comum por estarem contidas entre o caracter "<" e o caracter ">". Algumas tags contm atributos que permitem configurar algumas caractersticas. E alguns atributos podem ter valores especficos. Estes atributos so colocados entre os delimitadores (< e >), aps o nome da tag. Os valores vm depois de um sinal de "=" colocado junto aos atributos. A sintaxe genrica de uma tag :
Nos exemplos ao lado, A e HR so os nomes de duas tags. HREF, SIZE e WIDTH so os seus atributos. Os valores podem variar muito dependendo do significado do atributo!

<nome ....>

atributo1=valor

atributo2=

valor

Como por exemplo: <A HREF="http://faperj.br"> <HR SIZE=8 WIDTH=80%> H dois tipos de tags: container tags (ou emparelhada) e empty tags. Vejamos em que so diferentes.

O que so tags derivadas? Uma tag derivada igual tag original exceto por conter o caracter barra: / . Veja o exemplo da tag que define o negrito!

3.1. Container Tags Servem para definir um efeito sobre um trecho do documento. Estas tags vm sempre aos pares: uma tag indica o incio (tag de abertura) do trecho e uma outra tag derivada indica o fim (tag de fechamento). Todo o texto escrito entre as duas tags sofre o efeito indicado por elas. Por exemplo, para indicar que uma parte do texto deve ser exibida em negrito utilizamos o par de tags <B> e </B>. O seguinte trecho HTML:

Ao construir uma pgina WWW, voc precisa escolher uma estratgia de denominador comum para oferecer suporte maioria dos navegadores, a menos que voc objetive atender apenas a um grupo especfico de usurios como nas situaes de Intranet (ou redes locais).

Uma palavra em <B>negrito</B> fica realcada Seria exibido da seguinte forma:

Uma palavra em negrito fica realcada.

As container tags podem ser colocadas umas dentro das outras. O texto contido na tag mais interior sofre o efeito cumulativo de todas as outras tags "mais externas". Por exemplo o seguinte trecho HTML: Palavras em <i>italico e <B>negrito</B> ficam realcadas </i> diferentemente

Seria exibido da seguinte forma:

Palavra em italico e negrito ficam realcadas diferentemente.

A linguagem HTML no faz a diferenciao entre letras maisculas e letras minsculas. Assim escrever <BR> ou <br> tem o mesmo significado.

3.2. Empty Tags So tags que produzem efeitos locais, normalmente introduzindo algum elemento no texto, e, portanto, no precisam de uma tag finalizadora. Um exemplo a tag <BR> que insere no texto uma mudana de linha. Por exemplo, o seguinte trecho HTML: Um espaco em branco ou muitos na separacao de palavras tem o mesmo efeito.<br> Assim como uma linha em branco ou muitas.<br> Deve-se usar a tag adequada para mudar de linha. Seria exibido da seguinte forma:

No exemplo ao lado usamos a forma de escrever "mais internamente" as tags que so interiores a outras tags, para facilitar a identificao visual de onde as diversas partes do documento se iniciam e finalizam. Esta forma de escrever, muito usada em linguagem de programao, chamada de endentao. Usar escrita endentada tambm pode ser til para visualizar o efeito cumulativo que pode ocorrer com as tags containers, comentadas na pgina anterior.

Um espaco em branco ou muitos na separacao de palavras tem o mesmo efeito. Assim como uma linha em branco ou muitas. Deve-se usar a tag adequada para mudar de linha.

3.3. Estrutura de um Documento HTML Todo documento HTML tem a seguinte estrutura: <HTML> < HEAD> <TITLE> Titulo da Pagina </TITLE> </HEAD> <BODY> No corpo do documento descrevese tudo o que aparece dentro da pagina do navegador. </BODY> </HTML>

Como projetar bons documentos ? Os passos a seguir do algumas dicas dos aspectos que devem ser avaliados quando voc for criar uma pgina na Web: avaliao do pblico alvo; definio do contedo; organizao da estru-tura da pgina; redao do contedo; programao visual e implementao da pgina.

A tag HTML indica a rea onde deve estar contido o documento HTML. Isto no quer dizer que o Browser no exiba um texto colocado fora desta tag, mas essa no uma boa prtica. Porque dependendo do navegador que o usurio estiver usando algumas conseqncias no previsveis podem ocorrer. Se voc colocar o texto fora desta rea, no mnimo voc perde o controle sobre como o texto ser visto pelo usurio. A tag HEAD o cabealho do documento. Nesta rea so colocadas tags com informaes relativas ao documento. A mais importante destas informaes est contida na tag TITLE que deve sempre ser includa em todas as pginas. O texto do TITLE utilizado pelo navegador para nomear os links adicionados ao arquivo de "favoritos" (bookmarks) do usurio. Normalmente, o texto que aparece no interior da tag TITLE visualizado na barra de ttulos da janela do browser. A tag BODY contm o documento propriamente dito. Nesta rea, deve ser colocado tudo que representa a pgina a ser visualizada. Constitui a maior parte do documento HTML e inclui geralmente muitas outras tags no seu interior. No final desta aula, o "exemplo atividade" descreve em detalhes estas partes; que tal ir l dar uma olhada?

3.4. Comentrios
O principal diferencial que as tags de formatao lgicas se preocupam em definir uma idia e no em precisar exatamente como essa idia aparecer. Por exemplo, se voc usar para ressaltar um texto, a tag <EM> far com que ele seja exibido em itlico no Explorer e no Netscape, mas outro navegador poder apresent-lo em negrito, ou em um pargrafo parte entre "aspas", etc.

Como em outras linguagens de programao, possvel inserir parte de texto que o usurio no tem acesso. Essas partes so chamadas comentrios. Num texto HTML, todo texto includo entre <!-- e --> ignorado pelo Browser, ou seja interpretado como um comentrio do programador.

3.5. Comandos Bsicos de Formatao A linguagem HTML possui duas classes de elementos utilizados para modificar o estilo de apresentao de partes do texto: tags fsicas e tags lgicas. As tags fsicas indicam, explicitamente, a forma como o autor deseja ver exibido o seu texto. Elas so mostradas na tabela 1.1.

Elemento <B></B> <i></i> <U></U> <TT></TT>

Tabela 1.1 -Tags fsicas Descrio Efeito texto normal texto normal texto normal texto normal
texto texto

NOTA: O pouco rigor de alguns navegadores permite que algumas container tags HTML sejam representadas como empty tags. Uma destas <P>. Pode acontecer do seu texto ser bem interpretado sem ser necessrio colocar a tag de fim de pargrafo (</P>). No entanto, o World Wide Web Consortium-W3C recomenda que ela seja uma container tag.

Negrito Itlico Sublinhado Letras igualmente espaadas <SUB> </SUB> Subescrito <SUP> </SUP> Sobrescrito <STRIKE> ... Riscado </STRIKE> <BIG> ... Fonte grande </BIG> <SMALL>...</SM Fonte pequena ALL>

normal normal texto normal texto normal texto normal

As fontes (ou tipos de letras usadas para os textos), podem ser de dois tipos: proporcionais ou mono-espaadas. As primeiras determinam um espao para cada letra proporcional sua largura. Nelas por exemplo, um ponto, '.', ocupa menos espao que a letra 'i', e esta ocupa menos espao que a letra 'm'. J as fontes mono-espaadas determinam o mesmo espao para qualquer que seja o smbolo grfico a ser escrito, como nas mquinas de escrever antigas. Fontes mono-espaadas possibilitam que um texto seja exibido respeitando a endentao. Para ter um texto escrito deta forma em HTML voc deve escrev-lo entre as tags <TT> e </TT>. As tags lgicas expressam uma idia que deve ser passada ao usurio e a forma como o texto ser exibido depende do navegador. Algumas delas so descritas na tabela 1.2. Tabela 1.2 - Tags lgicas
Elemento Descrio Explorer e Netscape

<STRONG>... </STRONG> <EM>...</EM> <CITE>...</CITE> <CODE> ... </CODE> <ADRESS>... </ADDRESS>

Texto forte

Negrito

Texto enfatizado Itlico Citao Itlico Cdigo de Mono-espaado programa Endereo Itlico

Como voc pode ver, os dois navegadores principais (atualmente no mercado), as exibem da mesma maneira. Mas

isso apenas por acaso. Nada garante que esta forma de exibio continue nas prximas verses destes navegadores ou que os outros faam o mesmo.

4. Formatadores Como foi dito anteriormente, o navegador ignora qualquer caracter especial de formatao, como os caracteres de margem e mudana de linha existentes no arquivo HTML. Quando necessria uma formatao num documento, devese incluir uma das tags da tabela abaixo. Tabela 1.3 - Tags de formatao Elemento Descrio Atributos <BLOCKQUOTE> Aumentar a margem Nenhum <BR> Quebra de linha Nenhum <PRE> <P> <HR> Pargrafos prformatados Incio de pargrafo Linha horizontal Nenhum ALIGN SIZE, WIDTH, ALIGN e NOSHADE

Os atributos devem ser colocados dentro das tags de abertura e podem ter valores ou no. Os valores possveis de cada atributo tambm variam com o significado destes atributos, como pode ser visto na tabela ao lado.

O controle sobre o alinhamento da pgina pode ser conseguido atravs da margem. O par de tags <BLOCKQUOTE>...</BLOCKQUOTE> serve para aumentar a margem. Essa tag pode ser acumulada para conseguir margens maiores, como por exemplo: <BLOCKQUOTE> texto com mais margem <BLOCKQUOTE> texto com mais margem ainda... </BLOCKQUOTE> </BLOCKQUOTE> 4.1. Tag <PRE> : texto pr-formatado Muitas vezes, interessante fazer com que o navegador reproduza exatamente a formatao do texto escrito no arquivo HTML, sem ignorar espaos, mudanas de linha, tabulaes e utilizando uma fonte mono-espaada para exibir o texto. Um exemplo tpico disso quando se deseja incluir uma listagem de um programa de computador em uma pgina HTML. Um trecho do cdigo de um programa melhor descrito se endentado como j fizemos em alguns exemplos desta aula.

Para incluir um texto pr-formatado com fonte monoespaada utiliza-se a tag <PRE> </PRE>. Esta tag, porm, no impede o navegador de interpretar outras tags que estejam em seu interior, permitindo realizar mudanas de fonte, estilo e cor do texto. 4.2. Alinhamento de Texto Os textos contidos nos arquivos HTML so exibidos, salvo indicao em contrrio, alinhados esquerda da janela. Para ter o texto alinhado de forma diferente necessrio modificar o atributo ALIGN existente em algumas tags (como cabealhos <P> e <HR>). O atributo ALIGN pode assumir os seguintes valores: RIGHT (direita), CENTER (centro) ou LEFT (esquerda). Exemplo: <P align=right>

O alinhamento centralizado tambm pode ser obtido atravs da tag <CENTER> ... </CENTER>. Exemplo: <center>texto centralizado </center>

A tag <DIV> ... </DIV> permite definir o alinhamento default para tudo que ela contiver. Exemplo: <DIV align=left> texto alinhado esquerda </DIV>

4.3. Atributos de Linha Horizontal <HR> O atributo SIZE utilizado para definir a espessura da linha em nmero de pontos (pixels). O atributo WIDTH serve para definir a largura da linha. Esta largura pode ser especificada pelo nmero de pontos ou pelo percentual da janela que ser ocupado pela linha. O atributo NOSHADE (no shade, isto , sem sombra) no tem valor. A sua simples incluso faz com que a linha no seja desenhada com efeito sombreado. O atributo ALIGN j foi descrito anteriormente na seo Alinhamento de Texto. Esse atributo aparece em diversas tags de HTML, com o mesmo conjunto de valores possveis.

10

O exemplo abaixo, inclui uma linha de 2 pontos de espessura, ocupando 50% da janela e sem sombreado: <HR SIZE=2 WIDTH=50% NOSHADE> 5. Cabealhos Ao se redigir um documento conveniente organiz-lo de forma clara atribuindo ttulos e subttulos s suas diversas partes. A linguagem HTML oferece um conjunto de 6 cabealhos pr-definidos que podem ser includos no documento atravs da tag <Hn> ... </Hn>, onde n pode ser um nmero de 1 a 6. Os cabealhos aceitam o atributo ALIGN j descrito (o valor padro, se no houver qualquer definio de alinhamento, centralizado). Os textos nos cabealhos so escritos em negrito e seus tamanhos variam do maior H1 at o menor H6. <H1>Titulo Principal</H1> <H2 align=left>Titulo</H2> <H3 align=right>Subtitulo</H3> <H6>Todo este texto vai ser escrito em negrito e centralizado como se fosse um titulo</H6>

Portabilidade a qualidade de um componente de hardware ou software que o torna capaz de ser utilizado em diferentes tipos de computadores. Algumas vezes a portabilidade ocorre mediante pequenas alteraes, mas quanto menores essas alteraes mais portvel ou maior ser o grau de portabilidade do componente. Houaiss, A. Dicionrio da lngua portuguesa, Rio de Janeiro, Editora Objetiva, 2001.

6. Acentuao em HTML No existe uma padronizao universal para definir os cdigos associados aos caracteres acentuados. Quando produzimos uma pgina no ambiente Windows, utilizando diretamente os caracteres do Windows, esta pgina ser visualizada sem problemas em grande parte das mquinas que utilizam este mesmo sistema (se o sistema estiver configurado para utilizar a norma ISO Latin 1), mas isso no ser verdade para qualquer ambiente. Como conseqncia possvel que um texto, cheio de caracteres acentuados e visualizados de forma perfeita na tela de quem o produziu, aparea cheio de caracteres estranhos na tela de algum que esteja trabalhando em um ambiente diferente. Para garantir a portabilidade dos documentos nas mais diferentes plataformas, o HTML prev uma srie de cdigos que devem ser utilizados no lugar de caracteres acentuados e outros caracteres especiais. A tabela 1.4 resume estes caracteres.

11

Tabela 1.4 - Caracteres especiais e para acentuao Codificao em HTML

Nota: O exemplo atividade est propositadament e alguns acentos. Voc entender o porqu quando finalizar os exerccios desta aula!!! Mas ainda h muito mais coisas nele! Entenda ainda mais na prxima aula!!!

&aacute; &atilde; &acirc; &agrave;

&eacute; &ecirc; &oacute; &uuml;

< >

&ccedil; &Ccedil; &lt; &gt;

& &amp; &quot; &reg; &copy;

A melhor maneira de aprender fazendo! Por isso estamos propondo um exemplo atividade que alm de resumir o que vimos nesta aula, servir para voc exercitar o contedo. Exemplo Atividade: <HTML> <HEAD> <TITLE>Curso de Constru&ccedil;&atilde;o de P&aacute;ginas WEB</TITLE> </HEAD> <BODY> <H1 align=center > Primeiro Exemplo</H1> Primeiro leia este exemplo procurando identificar cada um dos elementos comentados na aula. Segundo, identifique quais as "Tags" que so "containers" e seus inicios e fins. Terceiro, vamos usar este exemplo para testar cada das formas de formatacao aprendidas. Assim copie este exemplo e salve-o em um editor de texto. Logo que ele seja salvo com a terminacao .htm, voce pode visualiza-lo em um navegador. Abra o arquivo escolhendo Arquivo/Abrir (ou File/Open)no menu Arquivo (ou File) do navegador. Depois de visualiza-lo como esta escreva cada frase de forma diferente no navegador, usando para isso cada uma das 9 formas diferentes de Tags Fisicas descritas: negrito, italico, sublinhado,etc. Quarto, vamos fazer todos os demais exercicios que seguem!!! </BODY> </HTML>

12

Exerccios:
Depois de responder cada exerccio, salve-o em um editor de texto. Logo que ele seja salvo com a terminao .htm, importante que voc visualizeo em um navegador.

1. Utilize, no exemplo atividade, os separadores de quebra de linha <BR> e pargrafo <P>, separando adequadamente o texto. Alm disso, desenhe linhas horizontais ocupando 25% da janela, separando os pargrafos que iniciam com as palavras: Segundo, Terceiro e Quarto dos pargrafos anteriores. Visualize o novo aspecto que o exemplo ter agora! 2. Atribua subttulos aos pargrafos que voc separou no exerccio anterior, utilizando <H3> </H3>. Compare como fica a pgina se voc agora usar <H5> </H5>. 3. Ao final do arquivo inclua (usando as opes Copiar e Colar, que geralmente esto nos menus Editar dos programas de edio de texto) como "texto formatado", um arquivo de texto qualquer que voc j tenha armazenado antes (voc deve usar que tag para isso?). Veja o resultado e responda: as tags <PRE> </PRE>, realmente funcionaram? 4. Mude o alinhamento de cada pargrafo e cabealho do texto (o subttulo que voc escreveu no exerccio 2). Faa o primeiro estar direita, o segundo centrado, o terceiro esquerda e no quarto use a tag <DIV></DIV>. Depois responda: o que ocorreu no ltimo caso? 5. Voc j deve ter notado que o texto est sem acentos! Voc sabe como melhorar isso, no? Ento, mos obra! Resumo: Nesta aula, voc aprendeu: a estrutura bsica da linguagem HTML, a formatar um documento, a incluir ttulos, subttulos e, a acentuar o texto corretamente, independentemente do navegador que esteja usando. Fez sua primeira "obra" em HTML e testou seus novos conhecimentos nos exerccios. Auto-avaliao: Se voc concluiu com sucesso os exerccios, podemos dizer que voc fixou todos os detalhes desta aula e est pronto para tornar qualquer texto um hipertexto. Este o assunto da prxima aula: Listas e Links.

13