HTML -- Criação de Home Page

(1)

www.nasainformatica.com.br

®

I I I N N N T T T E E E R R R N N N E E E T T T

Uma rede convencional pode se conectar através de pontes ou gateways com outras redes. Quando a Internet surgiu o propósito inicial não era a conexão entre computadores, mas sim de grandes redes. Essa é a essência da Internet, uma rede formada por outras redes. Com tantos computadores interligados através da Internet, os custos ficam mais baixos, facilitando assim, o acesso à rede e, consequentemente, a globalização da comunicação.

H H H O O O M M M E EP E P P A AG A G G E E E S S S

Ou páginas WEB, ou documentos HTML, ou mesmo "páginas na Internet", como são conhecidas, são documentos localizados em um servidor específico, mas acessíveis mundialmente, através da Internet. As homepages podem ser simples, com algumas linhas de texto, ou ter milhares de páginas num único site.

A publicação de uma homepage, ao contrário do que se pensa, não é complicada, tampouco dispendiosas. Grande parte dos provedores de acesso abrem espaço em seu servidor para os assinantes do sistema e, mesmo quando é pago, não é tão caro.

A homepage pessoal está para os anos 90 como o fax esteve para os anos 80.

Em uma homepage pessoal, você pode disponibilizar o que quiser: seus poemas, fotos do seu gato de estimação, desenhos dos filhos, comentários sobre o seu trabalho... o limite é sua imaginação e o espaço em disco.

H H H T TM T M M L L L

Agora que você já tem uma noção sobre a Internet podemos falar sobre o Hiper Text Markup Language que é a linguagem utilizada para criar as homepages. Não é uma linguagem de programação. É uma limguagem de descrição de página, como o Adobe Postscript, ou o Acrobat. Porém, o HTML é o mais simples dentre eles.

Existem diversos padrões para o HTML, como o 1.1, o HTML 2.0 e o HTML 3.0. Cada um apresenta facilidades inexistentes no anterior. Na prática, os produtores mais comuns, como o Netscape e o Explorer, criam extensões ao padrão e popularizaram-se mais em seus produtos, induzindo assim a oficialização da extensão.

Algumas linguagens, como C++, Pascal e Delphi, são compiladores. Isto é, um programa lê todo o programa que você digitou e o transforma numa linguagem que só o computador interpreta. Isso faz com que o programa execute bem mais rápido, ao mesmo tempo em que protege o autor, pois o usuário não tem acesso ao originais, ou código-fonte.

No caso do arquivo HTML cada linha é executada após ser interpretada. Na sua homepage, se o usuário selecionar o comando para exibir fonte, poderá visualizar-la no mesmo modo que você a digitou.

C C C O O O M M M O O O S SE S E E L L L E E E C C C I IO I O O N NA N A AR R R O OS O S S B B B R RO R O O W W W S SE S E ER R RS S S

Apesar de ter muitas empresas investindo na área de browsers, a Netscape Communications, com seu Netscape Navigator, e a Microsoft, com o Internet Explorer, têm feito os maiores investimentos em tecnologia nessa área. A partir dessa informação é conveniente dar preferência aos browsers dessa companhias na criação de seus documentos HTML.

(2)

®

Se for possível, o ideal é ter os dois softwares instalados em seu equipamento, pois as homepages apresentam pequenas diferenças quando apresentadas por meio do Netscape ou Explorer.

Veja alguns dos browsers disponíveis no mercado:

•• • MMMooosssaaaiiiccc

•• • LLLyyynnnxxx

•• • EEmEmmiiissssssaaarrryyy

• HHHoootttJJJaaavvvaaa

C C C O O O M M M O O O E E E S S S C C C O O O L L L H H H E E E R R R O O O S S S O O O F F F T TW T W WA A AR R R E E E D DE D E E C CR C R R I IA I A AÇ Ç ÇÃ Ã ÃO O O

Existem no mercado muitos programas para a criação de documentos HTML. Porém, a maior parte deles são para especialistas. Se você é um leigo no assunto deve optar pelo NOTEPAD. Trata-se de um programa simples que geralmente vem junto com o seu Windows.

Nas versões em português é conhecido como Bloco de Notas.

O documento HTML é um arquivo-texto com uma extensão diferente. De .TXT ele passa a ser .HTM ou, em alguns sistemas, .HTML.

O mais sofisticado software para criação de homepages é o HotDog, produzido pela Sausage software (http://www.sausage.com). Veja abaixo os nomes de outros programas:

••• HHoHootttMMMeeetttaaalll

••• MMiMiicccrrrooosssooofffttt FFFrrrooonnntttPPPaaagggeee

••• PPaPaagggeeeMMMaaakkkeeerrr 666+++

••• WW3W33

C C C O O O M M M O O O C C C R R R I I I A A A R R R U U U M M M D D D I I I R R R E E E T T T Ó Ó Ó R R R I I I O O O D D D E E E T T T R R R A A A B B B A A A L L L H H H O O O

Para facilitar e agilizar o trabalho você deve criar um diretório onde todos os arquivos relacionados a esse assunto ficarão armazenados. Essa organização é necessária para você exercitar melhor seu aprendizado durante o curso.

Para criar um diretório, de trabalho em Meus Documentos com o seu nome:

A A A E E E S ST S T TR R RU U U T T T U UR U R RA A A D DE D E E U UM U M M

D D D O O O C C C U U U M M M E E E N N N T T T O O O E E E M M M H H H T T T M M M L L L

(3)

®

Quando o browser percorre um documento HTML, ele identifica algumas partes que são básicas nesse tipo de documento.

Essas partes são representadas por TAGS. A primeira TAG encontrada em uma homepage é a <HTML>. O browser ignora informações que estejam fora da TAG e o complemento </HTML>.

Em seguida tem a seção <HEAD>, onde ficam as informações principais, ou seja, todos os dados que serão exibidos no browser.

Cada seção deve ser terminada com o complemento <

/

^SEÇÃO>

Confira o exemplo abaixo de um documento HTML básico:

<HTML> Æ Tag indicadora de informações em HTML <HEAD> Æ Cabeçalho

<TITLE> Æ Início do título, aqui entra o título da página </TITLE> Æ Encerramento do título

</HEAD> Æ Encerramento do cabeçalho

<BODY> Æ Início do corpo principal da página aqui entra a página em si.

: :

</BODY> Æ Aqui encerra-se o corpo da página

</HTML> Æ Indica o fim do documento HTML.

A A A T T T A A A G G G < < < H H H E E E A A A D D D > > >

A principio pode parecer que essa tag tem a função exclusiva de abranger a tag

<TITLE>, porém, se você analisar com mais profundidade, perceberá que ela é mais abrangente. Muitos mecanismos do HTML avançado fazem uso de elementos modificadores dessa tag como por exemplo, o <META>, que oferece recursos como exibir uma página e, depois de alguns segundos, exibir uma Segunda página, sem que o usuário clique em lugar algum. Pode ser utilizada também para transmitir informações como o nome do autor da página, o programa utilizado, palavras-chave para pesquisa, etc.

A A A T T T A A A G G G < < < T T T I I I T T T L L L E E E > > >

Ë muito importante porque, além de atribuir o título da página, na barra de título do seu browser, é uma das primeiras a serem identificadas por programas como o Alta Vista ou o Excite. A informação colocada no título pode facilitar a localização de sua página.

Para utilizá-la, proceda da seguinte forma: entre as tags <HEAD>, coloque a tag

<TITLE>, digite o título da página e, em seguida, encerre com a tag</TITLE>.

Não utiliza títulos muito extensos (com mais de 64 caracteres), caso contrário, os documentos podem ser truncados por alguns tipos de browsers.

A A A T T T A A A G G G < < < B B B O O O D D D Y Y Y > > >

Todas as tags têm sua importância, mas podemos afirmar, com certeza, que esta é a mais importante, uma vez que entre as tags <BODY> e </BODY> será colocadas todas as informações.

(4)

®

Através da tag <BODY> você poderá também utilizar vários modificadores que influenciarão a página como um todo. É possível executar softwares em Javascript, alterar cores e padrões de elementos da página a partir do <BODY>.

Entre estas marcas estará contida a maior parte do conteúdo a ser apresentado, textos, imagens, etc. Este elemento pode conter cinco parâmetros opcionais:

• BACKGROUND:

Configura especifica uma imagem como fundo da página.

Ex: <BODY BACKGROUND="fundo.gif"> configura uma página com a imagem fundo.gif como fundo.

• BGCOLOR:

Configura a cor de fundo da página.

Ex: <BODY BGCOLOR="White"> configura uma página de fundo branco.

• TEXT:

Configura a cor padrão do texto da página.

Ex: <BODY TEXT="Black"> configura uma página com o texto em cor preta.

• LINK, ALINK e VLINK:

Configura as cores dos links da página. ALINK configura a cor do link ativo, isto é, quando é clicado, e VLINK configura a cor de um link já visitado.

Ex: <BODY LINK="Blue" VLINK="Purple" ALINK="Red"> configura uma página com links azuis, links ativos vermelhos e links visitados roxos.

Esta estrutura inicial é bem simples, no entanto vamos aproveitá-la para chamar a atenção para alguns detalhes importantes.

• Todas as marcas apresentadas sã do tipo início-fim, ou seja, funcionam em pares.

• Em cada documento HTML só deve haver uma marca de cada tipo acima.

• Existe uma ordem seqüencial lógica entre as marcas.

Estes detalhes devem ser observados, pois desrespeita-los pode fazer com que o browser não consiga apresentar o documento ou que o documento seja apresentado com falhas. Assim, tome cuidado, pois o fato de um determinado browser aceitar uma "falha" na estrutura, não implica que um outro tenha o mesmo comportamento.

Como o HTML não é uma linguagem de programação, você nunca será avisado de erros que tenha cometido na edição do seu documento. O simples esquecimento de uma barra pode gerar efeitos colaterais inesperados na visualização de uma página, e estes efeitos colaterais serão o único sinal de que algo está errado.

E E E L L L E E E M M M E E E N N N T T T O O O S S S

Um elemento modificador pode ser até outra TAG, é na questão de ordem. Vamos considerar, então, a tag como uma unidade básica e o elemento como um auxiliar, um complemento.

(5)

®

V V V A A A L L L O O O R R R E E E S S S

Os valores podem Ter ou não aspas. Não há diferença alguma se foi digitado BORDER=5 ou BORDER="5". O resultado será o mesmo. Como você está acompanhando, é muito fácil criar páginas na Internet, já que você não se enquadra na linguagem e sim o contrário, isto é, a linguagem se adapta às suas necessidades.

Apesar das facilidades, alguns elementos não suportam valores em hexadecimal somente em decimal, porém há elementos que suportam ambos.

T T T E E E X XT X T T O O O P P P U U U R R R O O O

Com exceção da acentuação, a inclusão de textos em uma homepage é relativamente simples. Você conhecerá mais detalhes sobre esse assunto, posteriormente, no curso. O mais importante agora é saber que qualquer item que não esteja entre os sinais de tag, "< e >", será considerado como texto e será exibido normalmente.

E fundamental que você se lembre de nunca deixar de separar as linhas. Não se esqueça de que se você teclar um ENTER durante a criação do documento HTML, este será ignorado.

T T T E E E X X X T T T O O O

Chegou o momento de como formatar e alinhar o texto de um documento HTML. Além disso você conhecerá a diversidade de uso da tag <FONT> e perceberá como, mesmo sem uma imagem, é possível desenvolver uma homepage com muita criatividade rapidez de exibição.

F F F O O O R R R M M M A A A T T T A A A Ç Ç Ç Ã Ã Ã O O O D D D E E E T T T E E E X X X T T T O O O S S S

Se você adicionar uma tag a uma parte do texto, ela terá efeito sobre o documento a partir do ponto que foi inserida. Mas, se for uma tag isolada, terá efeito apenas local. Com execeção de tags isoladas que determinam características globais. O efeito das tags compostas é interrompido a partir do ponto em que encontram seus complementos.

M M M e e e u u u p p p r r r i i i m m m e e e i i i r r r o o o H H H T T T M M M L L L

Crie no diretório de trabalho um arquivo do Bloco de Notas, denominado primeiro.htm, com os dados a seguir:

<HTML>

<HEAD>

<TITLE>Primeira Página</TITLE>

</HEAD>

Está é minha primeira página HTML. O texto nela não contém nenhuma formatação especial.

Esta é minha página HTML.

</BODY>

</HTML>

Salve o arquivo no seu diretório na pasta de trabalho.

Para visualizar acesse a sua pasta de trabalho e dê duplo clique com o mouse no nome do arquivo

(6)

®

T T T í í í t t t u u u l l l o o o s s s / / / S S S u u u b b b t t t í í í t tu t u ul l lo o os s s

O destaque para títulos e subtítulos é importante, pois dá ao leitor uma visão geral sobre o que trata o texto em questão, e portanto a chance de escolher ler ou não.

Podemos utilizar até seis níveis de títulos, ou “headings”, que são numerados de 1 (o maior) a 6 (o menor). São marcas do tipo início-fim.

<H1> </H1>

<H2> </H2>

<H3> </H3>

<H4> </H4>

<H5> </H5>

<H6> </H6>

Exemplo: segundo.htm

<HTML>

<HEAD>

<TITLE>Segunda página!</TITLE>

</HEAD>

<H1>Título nível 1</H1>

</BODY>

</HTML>

Os elementos de título / subtítulo podem Ter o parâmetro opcional ALIGN que configura o alinhamento do mesmo. Ele deve conter os valores LEFT (esquerda), CENTER (centro) ou RIGHT (direita).

F F F o or o r r m m m a at a t t a aç a ç çã ã ão o o d d d e e e t t t e e e x xt x t to o os s s

Como você percebeu no exemplo anterior, a quebra de linha (ou parágrafo) deverá ser indicada através de marcas específicas. Note ainda que eventualmente há mais de um tipo de marca com a mesma função:

<B></B> ou <STRONG></STRONG> - Indica que o texto contido deve ser apresentado em negrito.

<I></I> ou <EM></EM> - Indica texto em itálico

<FONT FACE=... SIZE=... COLOR=...></FONT> - Configura a tipologia, tamanho e cor do texto. Não é necessário usar todos os parâmetros juntos. FACE configura a fonte usada, como por exemplo <FONT FACE=Arial>. SIZE configura o tamanho da fonte, sendo que 3 é o tamanho padrão; para letras menores, pode-se usar os valores 1 e 2, e, para maiores, 4, 5 e 6.

COLOR configura a cor da letra, como por exemplo <FONT COLOR=Green>.

(7)

®

Os elementos de formatação de texto podem ser combinados, como por exemplo:

<B><I> Texto em negrito e itálico </I></B>

Exemplo: terceito.htm

<HTML>

<HEAD>

<TITLE>Terceira página</TITLE>

</HEAD>

<B>Texto em negrito</B>,<I>texto em itálico</I>,

<B><I>texto combinado</B></I>,

<FONT SIZE="1" COLOR="Blue">Texto em tamanho 1 e cor azul</FONT>,

<FONT SIZE="2" COLOR="Red">Texto em tamanho 2 e cor vermelha</FONT>,

<FONT SIZE="3" COLOR="Green">Texto em tamanho 3 e cor verde</FONT>,

<FONT SIZE="4" COLOR="Purple">Texto em tamanho 4 e cor roxa</FONT>,

<FONT SIZE="5" COLOR="Maroon">Texto em tamanho 5 e cor marrom</FONT>,

<FONT SIZE="6" COLOR="Olive" FACE="Arial">Texto em tamanho 6, cor verde e fonte Arial</FONT>

</BODY>

</HTML>

F F F o o o r r r m m m a a a t t t a a a ç ç ç ã ã ã o o o d d d e e e p p p a a a r r r á á á g g g r r r a a a f f f o o o s s s

<P ALING=...></P>

Delimita um parágrafo, É possível omitir o elemento de fim </P> sem danos ao resultado final. O efeito visual é uma linha em branco antes do início do próximo parágrafo. O parâmetro opcional ALIGN configura o alinhamento do parágrafo e pode conter os valores LEFT

(esquerda), CENTER (centro) ou RIGHT (direita).

<BR>

Quebra de linha. Ao contrário do sinal de parágrafo, não é deixada linha em branco antes da próxima.

<DIV ALIGN=...></DIV>

Configura o alinhamento de um texto, sem quebrar texto. O parâmetro ALIGN deve conter os valores LEFT (esquerda), CENTER (centro) ou RIGHT (direita).

<CENTER></CENTER>

Centraliza texto ou parágrafos.

L L L i in i n nh h ha a as s s H H H o or o r ri i iz z z o on o n nt t ta a ai i is s s

Linhas horizontais são utilizadas para dar destaque a títulos ou para gerar a sensação de quebra entre item de informação e outro. Trata-se também de uma marca solitária, que pode ser

(8)

®

utilizada com alguns parâmetros opcionais <HR SIZE=8 WIDTH=80% ALIGN=RIGHT> ou sem qualquer parâmetro: <HR>.

O parâmetro SIZE configura a espessura da linha, WIDTH configura a largura da linha (pode ser especificado em pixels ou percentual), e ALIGN configura o alinhamento da linha (LEFT, CENTER, RIGHT).

Note que, desde que usadas coerentemente, marcas podem ser utilizadas em conjunto.

I I I m m m a a a g g g e e e n n n s s s

Além de texto, é possível colocar imagens em páginas Web. Os formatos gráficos padrões da Internet são JPEG ou GIF. Para que uma imagem seja apresentada em um

documento HTML, é necessário somente fazer uma referência ao nome do arquivo da imagem, através da marca <IMG SRC="figura.gif">.

O elemento <IMG> pode também Ter outros parâmetros como ALT, BORDER, WIDTH, HEIGHT, HSPACE. ALT serve para configurar um texto alternativo (ou legenda) para a imagem. BORDER serve para configurar uma borda para a imagem: pode Ter valores a partir de zero (neste caso sem borda). WIDTH e HEIGHT servem para especificar a largura e altura respectivamente.

HSPACE e VSPACE, apesar de não-suportados por todos os browsers, servem para configurar o espaçamento horizontal e vertical da imagem em relação aos outros elementos da página.

Caso a imagem esteja em um diretório diferente do documento HTML, o nome do diretório deve ser incluído na referência. Pode-se também utilizar imagens de outros sites, colocando o endereço inteiro, como <IMG SRC=http://outrosite.com.br/imagem.jpg>.

L L L i i i n n n k k k s s s d d d e e e h h h i i i p p p e e e r r r t t t e e e x x x t t t o o o

O elemento de link é o grande barato da Web. Ele é que configura a página associada às famosas palavras sublinhadas ou imagens que clicamos sempre nos sites por que passamos.

<A HREF="pagina2.htm">Link para página 2</A> cria um link para a página de nome página2.htm. Geralmente o browser apresenta os links em azul e sublinhados, mas como vimos nos elementos básicos é possível alterar isso através dos parâmetros opcionais do

elemento <BODY>. Quando o leitor clica neste texto, o browser carrega o documento página2.htm.

Se a página a ser carregada se encontrar em outro diretório, você deverá incluir o nome do diretório na referência. Com a mesma facilidade com que você constrói um link para uma página na sua própria máquina, você pode fazer o mesmo para uma página em qualquer lugar do mundo. Este é o sentido da Word Wide Web. Veja como é simples criar um link para outro site:

<A HREF="http://www.microsoft.com."> Microsoft </A>

Lembre-se que você pode também usar uma imagem como link. Neste caso, combine os elementos de link e imagem. Quer saber como? Vamos lá:

<A HREF="http://www.microsoft.com"> <IMG SRC="figura.gif" BORDER=0 ALT="Microsoft"</A>

E E E x x x e e e m m m p p p l l l o o o F F F i i i n n n a a a l l l

Para que você possa Ter uma idéia global de todos os elementos apresentados, abaixo você tem acesso a um exemplo que usa diversos recursos que comentamos.

(9)

®

<HTML>

<HEAD>

<TITLE> Exemplo Final</TITLE>

</HEAD>

<A HREF="HTTP://WWW.PERSOCOM.COM.BR">PAGINA PERSOCOM</A>

<BR>

<FONT FACE=ARIAL> <B>VOCÊ JÁ CONHECE O SITE</B>

<FONT SIZE=4> <A HREF="HTTP://WWW.MICROSOFT.COM">MICROSOFT </A>

</FONT>

<B>

? </FONT> </B>

</P>

<B><I>O SITE DE SUA REVISTA FAVORITA</I></B>

</FONT>

<I><B>NÃO DEIXE DE CONHECER O NOVO</I>

<B><FONT SIZE=4 COLOR=RED>FORUM.BR</FONT></B>

<I><B>

,ONDE VOCÊ PODERÁ PARTICIPAR DE DIVERSOS GRUPOS DE DISCUSSÃO.ESPERAMOS QUE VOCÊ CURTA BASTANTE!

</I></B>

</FONT></P>

<B>QUE TAL CONHECER AGORA?</B>

<BR>

WWW.NASAINFORMATICA.COM.BR</A></H2>

</FONT>

</BODY>

</HTML>

Através das cores verdes e azuis no exemplo acima, você pode identificar melhor cada elemento utilizando e comparar com o resultado final mostrado na figura correspondente.

Nasa Informatica