INTRODUÇÃO: 2 DESENVOLVENDO UMA PÁGINA WEB 7 … · Através de ligações(links), o usuário...

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informática - Seção de Projetos Científicos

Apostila de HTML Básico - http://www.ufpel.tche.br/ci/spc

1

Índice INTRODUÇÃO: ________________________________________________________________ 2

DESENVOLVENDO UMA PÁGINA WEB _________________________________________ 7 TÍTULOS______________________________________________________________________ 9

CABEÇALHOS: ______________________________________________________________ 10 PARÁGRAFOS _______________________________________________________________ 11

DEFININDO FONTES__________________________________________________________ 12 ESTILOS DE TEXTO __________________________________________________________ 13 ACENTOS E CARACTERES ESPECIAIS ________________________________________ 14

QUEBRAS DE LINHA _________________________________________________________ 15 INFORMAÇÕES SOBRE A PÁGINA ____________________________________________ 16

INSERINDO COMENTÁRIOS EM SUA PÁGINA __________________________________ 17

LINHAS HORIZONTAIS _______________________________________________________ 18

CONTROLE DE CORES E GRÁFICOS DE FUNDO _______________________________ 19

ALINHANDO ELEMENTOS DE UMA PÁGINA ___________________________________ 22

LISTAS ______________________________________________________________________ 24

TEXTO ANIMADO ____________________________________________________________ 28 ENDEREÇOS_________________________________________________________________ 30

INTERLIGANDO DOCUMENTOS – LINKS _______________________________________ 31 IMAGENS GRÁFICAS _________________________________________________________ 36

INSERINDO SOM _____________________________________________________________ 40 TABELAS ____________________________________________________________________ 42 FRAMES _____________________________________________________________________ 56

FORMULÁRIOS ______________________________________________________________ 60 UPLOAD DE ARQUIVOS ______________________________________________________ 64

DICAS _______________________________________________________________________ 67




2

I N T R O D U Ç Ã O :

Um dos maiores desafios de pesquisa da ciência de computação, dentre outros

nestes últimos anos, é a construção de hiperdocumentos e suas respectivas interfaces.

A capacidade oferecida de acesso não-linear a informação, os hiperdocumentos

conduziram indiretamente à composição de ligações de as quais refletem, melhor que o

texto seqüencial o faz, o modo humano de organizar o conhecimento[MAENZA, 1994].

Oferecendo a riqueza da multimídia, os hiperdocumentos despertam para uma

interpretação mais ampla da motivação e da criatividade. Debruçamo-nos sobre a questão

da autoria e a leitura de hiperdocumentos, especialmente no tocante á interface Homen-

Máquina.

A leitura em um hiperdocumento, é entendida como um processo descontínuo, e

não linear onde, através das ligações, o leitor navega de uma informação e outra, não

necessariamente em uma ordem seqüencial. Assim como o pensamento é, por natureza,

associativo, o mecanismo de leitura em um hiperdocumento procura representar este

relacionamento associativo por meio de nós de ligações.

O processo de escrita em ambientes de hiperdocumentos, é denominado autoria.

Não envolve somente a composição do texto, mas também o esquema da tela e o projeto

da interface e o que, talvez seja mais importante: a criação e o gerenciamento de ligações

entre os nós.

O conceito de interface aplicado especialmente a informática, designa um

dispositivo que garante a comunicação entre dois sistemas informáticos distintos ou um

sistema informático e uma rede de comunicação.

Utilizando ferramentas adequadas, para obter-se uma interface com um conjunto

de elementos que devem formar um conjunto com unidade, harmonia e coerência. Esse

conjunto deve ter unidade para não apresentar elementos soltos e desconexos, que

podem confundir o usuário, levando-o a perder-se no produto, confundindo ou ignorando

informações.

WEB Sua idéia inicial foi concebida em 1989, nos laboratórios de CERN (European

Laboratory of Particle physics), na Suíça. Tim Berners-Lee, seu criador, conheceu a

linguagem com o propósito de interligar os computadores do laboratório e instituições de

pesquisa coligadas a ele. O objetivo era Ter uma linguagem que exibia documentos




3

científicos de forma simples e fácil de acessar. A Web tornou-se a moda no meio

científico-universitário e cresceu rapidamente, essa moda foi rapidamente assimilada

pelas universidades americanas.

O crescimento estupendo da Web veio com a criação do primeiro

“Browser”(navegador) gráfico, tipo Windows, no final de 1993, que foi desenvolvido por

Marc Anderseen. Em 1994 foi fundada a Netscape Corporation que com seu browser

permitiu a popularização definitiva da Web. Desde então o crescimento da Web tem sido

exponencial, numa velocidade fantástica.

O browser da Netscape tornou-se quase um padrão da Web, até que a partir do

final de 1995, a Microsoft resolveu entrar no mercado, e colocou o produto Internet

Explorer a disposição cerca de 15% da base mundial instalada de navegadores.

A Web é uma base de dados gigantesca que funciona através de hipertexto, que

permite acesso a arquivos da Internet de forma gráfica. A chave do sucesso da World

Wide Web é o hipertexto. Os textos e imagens são interligados, através de palavras-

chave tornando a navegação simples e agradável

HIPERTEXTO O termo hipertexto surgiu na década de 1960. Significa um texto não-linear, com

mais de uma dimensão enquanto que um texto é uma coleção de informações organizada

de forma linear, possuindo apenas uma dimensão, a qual deve ser apresentada e

recuperada de forma seqüencial.

No hipertexto, a informação está organizada em uma rede, cujos nós contém

informação e estão relacionados por “elos”. Cada elo está, em geral associado

diretamente a uma âncora, que pode ser um botão ou ícone, representando a origem de

um elo, e ao ativá-la ocorre um salto para um outro nó. Quanto a apresentação as

âncoras aparecem em geral realçadas, ou em cor diferente, na informação que está

sendo apresentada na tela.

Através de ligações(links), o usuário pode pesquisar apenas os tópicos que lhe

interessam e ignorar os que não lhe convém. O hipertexto é muito utilizado hoje em dia na

multimídia em geral e em páginas na Web.




4

MULTIMÍDIA Refere-se a diversos tipos de informação que podem ser editadas e armazenadas

em tipos específicos de dispositivos. É as apresentações organizadas de som, imagens

gráficas estáticas, animações, textos e vídeos em movimento. Esse tipo de informação

tem por finalidade esclarecer assuntos, indicar tendências, informar, formar, demonstrar

ou simplesmente divertir.

HIPERMÍDIA É definida pela associação do hipertexto e da multimídia, a qual manipula um

conjunto de informações pertencendo a diferentes tipos de mídia(textos, imagens, sons,

animações e gráficos), podendo estas informações serem recuperadas de forma não-

linear através de diversos caminhos de acesso disponíveis. Em outras palavras, a

hipermídia é simplesmente uma extensão do hipertexto que incorpora outros tipos de

dados além do texto.

HTML - Hiper Text Markup Language É a linguagem de marcação de hipertexto, ou seja, e a linguagem na qual são

escritas as páginas da Web, interpretada pelo navegador.

As informações estão organizadas na forma de páginas ligadas entre si. Quando se

acessa um site, normalmente entra pela porta da frente, onde existe uma mensagem de

boas vindas e uma espécie de índice para as demais páginas. Essa entrada se chama

página principal, ou home page.

Na Web, vamos encontrar também outros tipos de documentos além dessas

páginas interligadas. Acessa-se computadores que mantém programas para serem

copiados gratuitamente, conhecidos como sendo assim, qualquer usuário pode, somente

com o seu mouse, Ter acesso a uma enorme quantidade de informação na forma de

textos, imagens, sons, gráficos, vídeos, etc..., navegando através de palavras chaves e

ícones.

A página é transferida de um computador remoto para o usuário, onde o browser

faz o trabalho de interpretar os códigos contidos naquele documento e mostra a página

que o usuário vê. A Web está estruturada em dois princípios básicos: HTTP(Hiper Text

Tranfer Protocol) e HTML (Hiper Text Markup Language).




5

HTTP é o protocolo de transferência de hipertexto, ou seja, é o protocolo que

permite a navegação na Web, com o simples clicar do mouse sobre o texto(ou imagem)

que esteja associado a outro link. Estas ligações entre as páginas, conhecidas como

hiperlinks (ligações de hipertexto), podem ser de informações contidas no próprio site,

bem como de computadores e empresas em qualquer lugar do mundo. Na Web é

possível que uma máquina faça referência a praticamente qualquer documento disponível

na Internet, e também outros tipos de

documentos além dessas páginas

interligadas, podem acessar

computadores que mantém programas

para serem copiados gratuitamente,

conhecidos como servidores de FTP,

grupos de discussão e páginas comuns

de texto.

Os endereços na web sempre iniciam com HTTP://..., são conhecidos como

URL(Uniform Resource Locator) é o endereço particular e único de cada página da Web.

Uma URL padrão possui até três partes: o domínio(www.terra.com.br),

possivelmente um diretório ou diretórios e possivelmente um arquivo(web.htm).

Um browser é um programa navegador de Web. Os mais usados são o

Netscape(cerca de 75% do mercado mundial) da Netscape Corporation e o

Internet Explorer(cerca de 15% do mercado mundial)

da Microsoft, com diversos recursos de multimídia acoplados a

cada um. Ambos os navegadores, possuem tecnicamente para o

usuário leigo pouca diferença. É uma questão de escolha.

Existem outros navegadores alternativos menos utilizados como

o Opera que é pequeno, rápido e leve, possui cliente de e-mail e

gerenciador de download próprio. Também o MSN, novo programa da

Microsoft para tornar a Web ainda mais interessante. Funciona como

browser, cliente de e-mail, programa de mensagens instantâneas,

player de som, entre outros recursos. Possui uma interface muito

amigável, com recursos de procura de música e vídeo, suporta e gerencia múltiplos

usuários, e é atualizado automaticamente via web. Neoplanet

é outro Browser alternativo, customizável e extremamente




6

simples de usar. Você poderá trocar skins do Neoplanet e usará o mecanismo do seu

Internet Explorer 3.0, 4.0, 5.0 ou 5.5. Esta versão já vem com um programa para

download e muito mais. O AWE - Adonay Web Explorer é atualmente o web browser com

maior número de recursos e funções. Multinavegação, bloqueio de janelas PopUps,

tradutor web inglês / português, zoom, notícias em tempo real, muda cor / imagem de

fundo e fontes das páginas, mostra todos os links relacionados,

navega em tela cheia, suporta Java, Flash e conexões seguras.

É importante que os usuários deve sempre usar a versão

mais recente de seu navegador para estar sempre atualizado

com os novos plugins disponíveis para melhor navegabilidade pela Web.

Estes navegadores relacionados são totalmente grátis, e podem

ser adquiridos em suas empresas ou em inúmeros locais disponíveis

para download na Internet, como

o site SuperDownloads no Brasil e o

Download.com internacional. O melhor lugar é o

seu próprio provedor de acesso.




7

D E S E N V O L V E N D O U MA P Á G I N A W E B Você vai precisar:

!"Conhecer a linguagem HTML para escrever o código fonte de sua página !"Um editor de textos para gerar o seu código fonte (bloco de notas, word, Wordpad) !"Um navegador de internet para visualizar as suas páginas (Netscape, Internet

Explorer, Opera) TAGs

Os comandos HTML são chamados de TAGs, compreendem de marcas padrões que são utilizadas para fazer indicações a um browsers.

Assim como em outras linguagens, os comandos têm uma sintaxe própria, e seguem algumas regras:

#"As TAGs aparecem sempre entre os sinais de “menor que”(<) e “maior que”(>); #"Geralmente são utilizadas aos pares, sendo que a TAG de finalização de um

comando qualquer é finalizada com a precedência de uma barra (/). Em geral: <nome da TAG> t e x t o </nome da TAG> onde: <nome da TAG>: indica o início da TAG </nome da TAG>: indica o fim da TAG

Para criar uma página Web, você pode utilizar qualquer editor de texto simples, até mesmo o bloco de notas do Windows. Porém é mais prático utilizar um editor de HTML, que escrevem parte dos comandos para você.

Guardando os seus documentos em HTML

1. Clique no menu ARQUIVO e escolha a opção SALVAR COMO; 2. Selecione o local,ou pasta onde você irá salvar seus arquivos; 3. Na caixa de texto NOME DE ARQUIVO, digite o nome_do_arquivo.htm. Não

esqueça da extensão: *.htm ou *.html; 4. Na caixa de texto SALVAR COMO TIPO, selecione todos os arquivos (*.*); 5. Clique em salvar.

MODELO BÁSICO DE PÁGINA WEB

Uma página Web criada em HTML, possui três partes básicas: estrutura principal, um cabeçalho e um corpo de página.

Possui uma estrutura dividida em 4 TAGs básicas:

<HTML> ... <HTML> <HEAD> ... <HEAD> <TITLE> ... <TITLE> <BODY> ... <BODY>




8

Onde: <HTML> ... <HTML>

são usados para delimitar os comandos HTML, indicam o início e o fim de um documento. O browser reconhece a TAG <HTML> e identifica que o documento que virá à seguir deve ser interpretado como HTML.

<HEAD> ... </HEAD>

Delimitam a seção do cabeçalho do documento onde serão definidos poucos comandos de linguagem, o mais importante é o título que é exibido na barra de títulos do browser.

<TITLE> ... </TITLE>

Definem o título da página que pé exibido na barra de títulos do browser. Estas TAGs devem estar sempre dentro das TAGs <HEAD></HEAD>.

<BODY> ... </BODY>

Dentro desta TAG estão os elementos da página web. ÉW onde estão localizados as os textos, imagens, ligações com outras páginas, etc...

Exemplo:

<HTML> <HEAD> <TITLE> CURSO DE HTML – PÁGINA BÁSICA </TITLE> </HEAD> <BODY>

DESENVOLVENDO PÁGINAS DE INTERNET </BODY> </HTML>




9

T Í T U L O S

Todo documento em HTML deve possuir um título. De um modo geral aparece em um lugar separado da página, na maioria das vezes no alto da tela dos navegadores.

Utilizado para identificar o documento. Interessante que possa sugerir claramente o conteúdo do documento.

Exemplo:

<HTML> <HEAD> <TITLE> Curso de HTML </TITLE> </HEAD> <BODY> <H2> Visualize a parte superior da janela do navegador </H2> </BODY> </HTML>

Como fica no navegador:




10

C A B E Ç A L H O S : São linhas do documento que são exibidas no browser com letras diferentes do

restante do texto chamando a atenção de uma nova seção ou tópico. Sempre que se definir um novo cabeçalho, uma nova linha é inserida em branco após a sua linha.

Ao definir o tamanho de um cabeçalho, não se está definindo o tamanho da letra, apenas é indicado ao navegador de cada usuário que deve ser visualicado com maior ou menor destaque que o resto do texto.

A TAG <H>

Esta possui seis tamanhos os modelos diferentes. O tamanho ou corpo dos caracteres vai do nível 6 (menor nível) ao 1 (maior nível).

Sintaxe de comando: <Hn> TEXTO DO CABEÇALHO </Hn>

#"n varia de 1 a 6 #"H1 é o maior corpo #"H6 é o menor corpo

Exemplo: cabeçalhos.htm <HTML> <HEAD> <TITLE> Cabeçalhos </TITLE> </HEAD> <BODY> <H1>Texto formatado com H1</H1> <H2>Texto formatado com H2</H2> <H3>Texto formatado com H3</H3> <H4>Texto formatado com H4</H4> <H5>Texto formatado com H5</H5> <H6>Texto formatado com H6</H6> </BODY> </HTML>




11

P A R Á G R A F O S A TAG <P>

A TAG responsável pela quebra de parágrafos é a <P> que finaliza o parágrafo e insere automaticamente a um alinha em branco entre parágrafos.

Também responsável pelo alinhamento de parágrafos. Sintaxe de comando: <P ALIGN=”posição”> Texto do parágrafo. Posição pode ser:

#"Left: alinhamento a esquerda; #"Center: centralizado #"Right: alinhamento a direita

Exemplo: Nome do arquivo: parágrafos.htm <HTML> <HEAD> <TITLE> Alinhamento de Parágrafos </TITLE> </HEAD> <BODY> <P>Este parágrafo utiliza o alinhamento padrão dos navegadores de Internet (esquerdo). <P ALIGN=”center”> Este parágrafo tem o alinhamento centralizado. <P ALIGN=”right”> Este parágrafo tem o alinhamento a direita. </BODY> </HTML>




12

D E F I N I N D O F O N T E S A TAG <FONT>

Permite que você insira em sua página um texto com fontes de tamanhos, cores e tipos diferentes.

Comando: <FONT SIZE=”n” FACE=”nome” COLOR=”cor”> texto </FONT> Onde:

$" SIZE=”n”: n varia de 1 a 7 e 3 é o valor padrão da maioria dos navegadores; $" FACE=”nome”: nome da fonte a ser utilizada; $" COLOR=”cor”: cor da fonte definida em hexadecimal, ou através de um nome pré-

definido de cores. Exemplo: Formatando_fontes.htm Observações:

Caso a fonte face indicada para sua página não esteja disponível para o usuário que visitar a sua página, a fonte utilizada então será a padrão do navegador utilizado pelo visitante;

Pode-se definir mais de uma fonte face, caso a primeira não esteja instalada no sistema do usuário, o browser reconhece a próxima FACE definida;

Outros exemplos:

#"fontes_especiais.htm; #"fontes_especiais2.htm;




13

E S T I L O S D E T E X T O

Como nos editores de texto, alem dos tamanhos das fontes, você pode modificar o estilo de texto. Pode-se atribuir o negrito, itálico, sublinhado entre outros, abaixo relacionados:

Tabela de estilos:

COMANDO APLICANDO O ESTILO FUNÇÃO Negrito <B> Texto </B> Atribui o estilo negrito Itálico <I> Texto </I> Atribui o estilo itálico Sublinhado <U> Texto </U> Atribui o estilo sublinhado Strong <STRONG> Texto </STRONG> Semelhante ao estilo negrito Ênfase <EM> Texto </EM> Semelhante ao estilo itálico Typewriter <TT> Texto </TT> Espaço regular ao texto Big <BIG> Texto </BIG> Aumenta a fonte e atribui negrito Small <SMALL> Texto </SMALL> Reduz e altera a fonte Sobrescrito <SUP> Texto </SUP> Eleva o texto e eleva o seu corpo Subscrito <SUB> Texto </SUB> Rebaixa o texto e diminui seu corpo Pulsante <BLINK> Texto </BLINK> Faz o texto ficar pulsante Exemplo:




14

A C E N T O S E C A R A C T E R E S E S P E C I A I S

Os arquivos HTML, não podem conter nenhum tipo de formatação ou caracteres especiais(símbolos ou letras acentuadas).

Para criar uma página com caracteres especiais, deve-se utilizar alguns códigos especiais que o browser interpreta e substitui por um caractere específico.

Um bom exemplo seria representar uma TAG sem que o browser interpretasse como uma TAG. escrevendo a TAG= <BODY>. Para representá-la os sinais<>= <BODY>

Encontra-se em anexo uma tabela com uma lista de códigos e caracteres especiais mais utilizados.

Os navegadores mais atualizados reconhecem caracteres, alguns. Exemplo:

<HTML> <HEAD> <TITLE>Alguns acentos e caracteres especiais </TITLE> </HEAD> <BODY> à<br>ã <br>â <br>ä <br>é <br>è <br>ê <br>í <br>ì <br>õ </BODY> </HTML>

Verificar a página acentos_e_caracteres_especiais.htm, que contem tabela de exemplos




15

Q U E B R A S D E L I N H A A TAG <BR>

Faz uma quebra de linha sem acrescentar espaços extras entre linhas. Finaliza a linha de texto e insere automaticamente uma outra linha em branco.

Não necessita ser finalizada com </BR> Exemplo:

<HTML> <HEAD> <TITLE> Utilizando a quebra de linhas com a TAG <BR> </TITLE> </HEAD> <BODY> Este texto está utilizando a TAG BR no final de cada linha<BR><BR> Você pode utilizar<BR> a TAG BR<BR> toda vez que<BR> você quiser passar o texto<BR> para a próxima linha.<BR><BR>O resultado é simples. </BODY> </HTML>




16

I N F O R MA Ç Õ E S S O B R E A P Á G I N A

A TAG <META> Proporcionam informações sobre a página, para o utilizador e para os motores de

pesquisa. Estes tags só necessitam e devem estar presentes na primeira página do site (normalmente no index.html), porque só essa é pesquisada pelos search engines.

Existem dois tipos de motores de pesquisa ou search engines: os indexes e os spiders. Os primeiros são atualizados manualmente e os spiders são automáticos. Deste modo, no Yahoo!, que é um index, para que um site seja listado, tem que se preencher um formulário, enviá-lo, e esperar por uma resposta de um responsável do yahoo a confirmar que o site foi adicionado à base de dados. Em contrapartida, no AltaVista, que se trata de um spider, para adicionar um site, só se tem de introduzir o url na secção "add url" e esperar por uma resposta automática e quase imediata do robot, a confirmar que o endereço existe e que os <META> tags foram localizados.

Os <META> tags encontram-se geralmente dentro do <HEAD> </HEAD> e depois do <TITLE> </TITLE>.

Os atributos de <META>: CONTENT:

1. Corresponde a informação disponível na TAG <META>. NAME:

1. O atributo NAME indica o tipo de informação que o <META> tag apresenta. Pode ter vários valores, tais como:

$" Keywords: indica as palavras chaves da página. Exemplo: <META NAME="keywords" CONTENT="HTML, Tags, Atributos">

$" Description: indica uma breve descrição da página. Exemplo: <META NAME="description" CONTENT="Uma página sobre HTML">

$" Author: indica o autor da página. Exemplo: <META NAME="author" CONTENT="Gabriel Augusto">

Visualizando a página: http://www.uol.com.br

Visualizando o código fonte da página do UOL, observe as informações sobre a página neste ponto.

17

I N S E R I N D O C O ME N T Á R I O S E M S U A P Á G I N A

São utilizados em sua página WEB para descrever procedimentos utilizados na criação de sua página.

O texto de um comentário não é exibido pelo navegador. Alguns navegadores de Internet não reconhecem o uso de TAGs dentro de

comentários, sendo assim quando utilizadas junto ao seu comentário poderá exibir na página o seu comentário.

São muito úteis na hora de manutenção de uma página. Servem como lembretes ou dicas para o programador que fará a atualização da página WEB.

Sintaxe de Comando: <!—Texto do parágrafo -->

Exemplo: <HTML> <HEAD> <TITLE> Página com comentários </TITLE> </HEAD> <BODY>

Esta página contém diversos comentários   

</BODY> </HTML>

Observe que em determinados pontos do código fonte, são inseridos comentários para própria orientação do programador da página




18

L I N H A S H O R I Z O N T A I S A TAG <HR>

Insere linhas horizontais no navegador. Este recurso pode ser utilizado para dividir a sua página chamando a atenção para algum tópico específico. Sintaxe de comando: <HR WIDHT=”N%” ALIGN=”Posição” SIZE=”n” COLOR = #cor NOSHADE> Sobre cada atributo:

1. WIDHT=”n%”: define a largura da linha. Pode ser definida em pixels ou em porcentagem do tamanho horizontal da tela;

2. ALIGN=”posição”: posição pode ser: $" left: alinhamento a esquerda; $" center: centralizado; $" right: alinhamento a direita

3. SIZE=”n”:define a espessura da barra, em pixels; 4. COLOR=#cor: define uma cor a barra utilizada 5. NOSHADE: define que a barra não deve receber o efeito 3D.

Exemplo: <BODY bgcolor="#D6E4ED"> <div align="center>Linhas Horizontais</div> <br> Linhas com alturas - SIZE- diferentes: Tamanho 10: </font> <HR SIZE="10" WIDTH="85%"> Tamanho 20: <HR SIZE="20" WIDTH="85%"> <br> Linhas com larguras - WIDHT - diferentes: Largura 50% da página: <HR SIZE="05" WIDTH="50%"> Largura 100% da página: <HR SIZE="05" WIDTH="100%"> <br> Linhas com alinhamentos - ALIGN - diferentes: Alinhamento a direita da página: <HR SIZE="05" ALIGN="RIGHT" WIDTH="80%"> </BODY>




19

C O N T R O L E D E C O R E S E G R Á F I C O S D E F U N D O

A maioria dos browsers permite a utilização de cores, apenas 256, mas já é o suficiente para você criar uma página com fundo e texto personalizados.

As cores são compostas por códigos RGB(red, green, blue). cada código define a intensidade do vermelho, do verde e do azul, formando uma cor. Cada código varia de 0 a 255, onde 000 equivale ao preto e 255 255 255 equivale ao branco.

Devem ser informados no formato hexadecimal. não é necessário decorar os códigos de uma cor, para isto é só verificar a tabela de coresXcódigos em anexo.

Para definir cores para sua página você deve utilizar a TAG <BODY> que possui atributos vinculados a ela que personalizam cada página de Internet.

Pode-se Atribuir RGBs para cor de fundo da página, texto e links

CORES E ELEMENTOS GRÁFICOS DE FUNDO

#"Cor de fundo - BGCOLOR: É a cor do fundo da página. Este é um atributo que deve ser inserido dentro da TAG BODY;

Comando: <BODY BGCOLOR=”#RRGGBB”>

Exemplo: <body bgcolor="#FFFFCC" text="#000033"> <H4 align="center">COR DE FUNDO<br> BGCOLOR="#cor"</H4> Com este atributo você controla a cor de fundo das páginas.<br><br> Comando:<br> <BODY BGCOLOR="#FFFFCC" TEXT="#000033"> </body> </html>

#"Imagem de fundo - BACKGROUND:

Aplica uma imagem como plano de fundo e que ocupará toda a área do fundo da

tela do navegador, é aplicada em seqüência, uma ao lado da outra. Deve ser inseridos a marcação <BODY> e especificar a URL da uma imagem

que será utilizada na página. Comando: <BODY BACKGROUND=”URL”> Corpo da Página </BODY>




20

Exemplo: <body background= "../imagens/fundo1.jpg"> <h3 align="center">IMAGEM DE DE FUNDO<br> BACKGROUND="endereço"</h3> Com este atributo você insere imagens de fundo nas suas páginas. <br><br>Comando:<br> <BODY BACKGROUND="../imagens/fundo1.jpg"> </body> Nota:

É importante ter cuidado quando aplicar elementos de fundo para que não seja prejudicada a leitura do texto.

Sempre vale a pena visitar outras páginas que utilizam este recurso para recolher boas idéias.

Alguns usuários de internet navegam sem a utilização de imagens para viabilizar uma melhor velocidade de acesso a WEB. em vista disso é interessante atribuir junto ao <BODY> uma cor de fundo (BGCOLOR) .

CORES DE LETRA E LINKS

#"Texto - TEXT: Utilizado para controlar a cor do texto normal em uma página TEXT=”#RRGGBB”= é a cor do texto, o padrão é preto;

Sintaxe de Comando: <BODY TEXT=”#RRGGBB”> Corpo da Página </BODY>




21

Exemplo: <body bgcolor="#FFFFFF" text="#333333"> <div align="center"> <h4>CORES DE LETRAS DE TEXTO NORMAL<br> TEXT="#cor"</h4></div> Com este atributo, você controla a cor do texto normal em uma página.<br> Neste exemplo, estamos utilizando a cor indicada conforme o exemplo a seguir.<br><br>Comando:<br> <BODY BGCOLOR="#FFFFFF" TEXT="#333333"> </body>

#"Links – LINK, VLINK, ALINK, :

!"LINK=”#RRGGBB”= é a cor dos links, o padrão é azul; !"VLINK=”#RRGGBB”= é a cor dos links visitados, o padrão é vermelho-púrpura; !"ALINK=”#RRGGBB”= é a cor do link ativo, onde o usuário pressionou o botão do

mouse, mas ainda não soltou, o padrão é vermelho. Comando: <BODY LINK=”#RRGGBB” VLINK=”#RRGGBB” ALINK=”#RRGGBB”>

Exemplo: <BODY BGCOLOR="#FFFFE0" TEXT="#FF6347" LINK="#ADFF2F" VLINK="#7FFFD4" ALINK="#0000CD"> <div align="center"> <h1>EXEMPLO DE CORES<h1> <BR> <h3>O fundo da página está com uma cor especial: Lightyellow - RGB:FFFFE0</h3><BR> <h3>A cor do texto é: Tomato - RGB:FF6347</h3> <BR> LINK´s: Greenyellow - RGB:ADFF2F<BR> VLINK´s: Aquamarine - RGB:7FFFD4<BR> ALINK´s: Mediumblue - RGB:0000CD<BR> </div> </BODY>




22

A L I N H A N D O E L E ME N T O S D E U M A P Á G I N A A TAG <DIV>

Permite que você alinhe horizontalmente qualquer elemento em sua página. Esta difere da TAG <CENTER> por permitir alinhamento centralizado. O Alinhamento pode ser left, center ou right.

Comando:

<DIV ALIGN=”posição”>Elementos a serem alinhados</DIV> Onde:

posição pode ser: #"left: alinhamento a esquerda; #"center: centralizado; #"right: alinhamento a direita

O alinhamento padrão é a esquerda, por defaut.

Exemplo: <HTML> <HEAD> <TITLE> Alinhando Elementos com a TAG DIV </TITLE> </HEAD> <BODY> <DIV ALIGN="CENTER">Usando a TAG DIV:</DIV> <BR> <DIV ALIGN=”RIGHT”> <P>Usando a TAG DIV você pode alinhar o seu texto sem problemas. <P>Pode utilizar o alinhamento a direita, que alinha o seu texto na margem direita da tela. Como um texto criado em um editor de textos pra ser impressos em uma página. <P>Com a TAG DIV você pode aproveitar o mesmo alinhamento para vários parágrafos. </DIV> </BODY> </HTML> A TAG <CENTER>

Permite centralizar horizontalmente qualquer elemento em sua página. O efeito é exatamente o mesmo da TAG <DIV ALIGN=”CENTER”>, porém a TAG CENTER não é reconhecida em todos os navegadores.

Comando: <CENTER>Elementos a serem centralizados</CENTER>




23

Exemplo: <HTML> <HEAD> <TITLE>Centralizando com a TAG CENTER </TITLE> </HEAD> <BODY> <CENTER> TAG CENTER </CENTER> <br> <p align="justify">Centralizar os elementos de sua página em relação ao navegador Deve ser iniciada <center>e finalizada </center>, para não centralizar todos os elementos da página. Você pode utilizar.</p> <b>EM IMAGENS:</b> <div align="center"> <b><CENTER> </b><br> <img src="../imagens/dexter_laboratory.jpg" width="185" height="154"> <br> </CENTER></div><BR> <b>EM TEXTOS:</b><br> <b><CENTER> </b><br> <CENTER>Permite centralizar horizontalmente qualquer elemento em sua página. O efeito é exatamente o mesmo da TAG <DIV ALIGN="center"> ELEMENTO A SER CENTRALIZADO </DIV>, porém a TAG CENTER não é reconhecida em todos os navegadores.</center> <b></CENTER></b><br> </BODY> </HTML>




24

L I S T A S

Uma boa forma de organizar as páginas WEB. Podem servir como resumos ou índices de todo o site, contendo links para as outras páginas criadas por você ou outras pessoas.

TIPOS DE LISTAS:

#"Listas não numeradas; #"Listas numeradas; #"Listas de definições; #"Listas intercaladas.

#"Listas Não Numeradas:

A TAG <UL>: Inserem marcadores na frente de cada item. Comando: <UL TYPE=”formato”> <LI> Tópico 1 <LI> Tópico 2 <LI> Tópico 3 </UL> Onde:

1. <UL>: início da lista pontuada; 2. TYPE=”formato”: o formato do marcador pode ser:

$" disc: o marcador é um ponto (padrão utilizado pelos navegadores, não precisa indicar)

$" square: o marcador é um quadrado $" circle: o marcador é um círculo

3. <LI>: tópicos da lista, não e necessário encerrar com a TAG </LI>; 4. </UL>: fim da lista pontuada.




25

Exemplo: listas_nao_numeradas.htm <HTML> <HEAD> <TITLE> Listas Não Numeradas </TITLE> </HEAD> <BODY> <H3>Listas Não Numeradas</H3> <UL TYPE="disc"> <LI> TYPE="disc" <LI> Tópico um; <LI> Tópico dois; <LI> Tópico três. </UL> <UL TYPE="square"> <LI> TYPE="square" <LI> Tópico um; <LI> Tópico dois; <LI> Tópico três. </UL> <UL TYPE="circle"> <LI> TYPE="circle" <LI> Tópico um; <LI> Tópico dois; <LI> Tópico três. </UL> </BODY> </HTML>

#"Listas Numeradas: A TAG <OL>: Permite inserir em sua página uma lista numérica ou alfabética, com valor pré-definido ou não Sintaxe de comando: <OL TYPE=”formato” START=”n”><LI>Tópico 1<LI>Tópico 2<LI>Tópico n</OL> Onde:

1. <OL>: início da lista numerada; 2. TYPE=”formato”: o formato da numeração pode ser:

$"1: lista numérica(não é necessário ser definido); $"A: lista alfabética com letras maiúsculas; $"a: lista alfabética com letras minúsculas; $"I: lista numérica com números romanos maiúsculos; $"i: lista numérica com números romanos minúsculos.

3. START=”n”: o valor inicial da lista numerada; 4. <LI>: tópicos da lista; 5. </OL>: fim da lista numerada.




26

Exemplo: listas_numeradas.htm <HTML> <HEAD> <TITLE> Listas Numeradas </TITLE> </HEAD> <BODY> <H3 align="center">Listas Ordenadas - Numeradas</H3> <H4>Lista Numerada Padrão:</H4> <OL> <LI> Tópico um; <LI> Tópico dois; <LI> Tópico três. </OL> <H5>Lista Numerada Padrão com START="10":</H5> <OL START="10"> <LI> Tópico um; <LI> Tópico dois; <LI> Tópico três. </OL> <H5>Lista Alfabética com Letras Maiúsculas:</H5> <OL TYPE="A"> <LI> Tópico um;

<LI> Tópico dois; <LI> Tópico três. </OL> </OL> </BODY> </HTML>

#"Listas de Definições: A TAG <DL>: São diferentes das outras listas, pois cada item de cada lista possui dois componentes: um tópico e a descrição do tópico. Sintaxe de comando: <DL><DT> Tópico 1<DD> Descrição do tópico 1 <DT> Tópico n <DD> Descrição do Tópico n </DL> Onde:

1. <DL>: início da lista descritiva; 2. <DT>: tópico da lista descritiva;

$" não há limite para o número de tópicos; $" não é necessário a TAG </DT>;

3. <DD>: descrição da lista descritiva: $" para cada TAG <DT> existe uma TAG <DD>; $" não é necessário a TAG </DD>;

4. </DL>: fim da lista descritiva.




27

Exemplo: <HTML> <HEAD> <TITLE> Listas Descritivas </TITLE> </HEAD> <BODY> <H3><I>Exemplo de Listas Descritivas</I></H3> <DL> <DT><B>Listas Não Ordenadas:</B> <DD>As listas não ordenadas ou pontuadas inserem&nbsp<I>marcadores</I>&nbspna frente de cada item. <DT><B>Listas Ordenadas:</B> <DD>As listas ordenadas ou numeradas inserem&nbsp<I>números</I>&nbspou&nbsp<I>letras</I>&nbsp na frente de cada item. <DT><B>Listas Descritivas:</B> <DD>As listas descritivas ou de grossário são diferentes das outras listas. Cada item de uma lista descritiva tem dois componetes: um <I>tópico</I> e uma <I>descrição de tópico</I>. </DL> </BODY> </HTML>

#"Listas Intercaladas: Pode ser utilizada para você criar listas hierárquicas, mesclando listas

ordenadas e não numeradas. É utilizado para melhor organizar a estrutura de tópicos; utilizados como links, mapa de sites.




28

T E X T O A N I MA D O

O comando MARQUEE orienta o browser a definir o efeito de texto passando na tela para o texto digitado entre o início e o fim da tag. Permite que uma imagem possa correr de um lado para o outro na página também.

Deve ser utilizado quando você desejar dar um destaque a uma frase, palavra ou até mesmo a um parágrafo da página. Com cautela, sem exageros para não chamar a atenção do usuário ficando voltado somente para o destaque, deixando de lado o restante da página.

Comando:

<MARQUEE> Texto ou imagem </MARQUEE> Atributos:

1. <MARQUEE>: $" abertura da TAG de movimento;

2. ALIGN=”posição”: Posição em relação ao browser, que pode ser:

$" top: alinha o texto com o topo do marquee; $" middle: alinha o texto com o centro do marquee; $" bottom: alinha o texto com a base do marquee;

3. BEHAVIOR=”controle”: Controla o comportamento do texto dentro do marquee, que pode ser:

$" scroll: faz que o texto entre por um dos cantos e saia por outro, $" slide: o texto entra por um dos cantos e do marquee e para ao chegar ao

canto oposto; $" alternate: o texto fica passando de um canto para o outro dentro do

marquee; 4. BGCOLOR=”#000000”:

Muda a cor do fundo do marquee, valores em hexadecimais, ver tabela de cores anexas a esta apostila;

5. DIRECTION=”direção”: Define a direção no qual o texto se move, pode ser:

$" left: faz o texto correr para a esquerda; $" right: faz o texto correr para a direita;

6. HEIGHT=”altura”: Define a altura do marquee, sendo que n é um valor em pixel ou um porcentual da

altura da janela; 7. WIDTH=”n ou n%”:

Define a largura do marquee, sendo que n é um valor em pixel ou um porcentual da altura da janela;

8. HSPACE=”n”: Define margens a esquerda e a direita do marquee, sendo que n é um valor em pixels;

9. VSPACE=”n”: Define margens acima e abaixo do marquee, sendo que n é um valor em pixels;

10. LOOP=”n”: Define quantas vezes o texto irá cruzar o marquee, sendo que n é o número de

vezes. Se n for igual a 1 ou infinite, ele irá passar pelo marquee infinitamente; 11. SCROLLAMOUNT=”n”:




29

Controla a velocidade do texto, definindo o número de pixels entre cada redesenho do texto, sendo que n é o valor em pixels que separa cada redesenho do texto, quanto maior o n, maior o movimento do texto;

12. SCROLLDELAY=”n”: Controla a velocidade do texto ao definir os intervalos de redesenho do texto,

sendo que n é o valor em milisegundos do intervalo de redesenho do texto, quanto menor o n, mais rápido o movimento do texto; 13. </MARQUEE>:

Encerra a TAG marquee. Visualizando exemplo:

Para visualizar o exemplo e necessário estar com o navegador aberto para execução da animação.




30

E N D E R E Ç O S

Normalmente utiliza-se o final da página para colocar informações sobre o autor da página, data da última alteração e outras informações que achar necessário.

Para isso utiliza-se: A TAG <ADDRESS>

Tudo que fica dentro dela fica em itálico. Comando: <ADDRESS> Informações a serem dispostas sobre o autor </ADDRESS> Exemplo: <html> <head> <title>ADDRESS</title> </head> <body bgcolor="#FFFFFF"> <div align="left"> <img src="../imagens/ufpel_pagina.jpg" width="307" height="254"><br> <ADDRESS> <br> </div> <ADDRESS> ---------------------------------------------------<br> UNIVERSIDADE FEDERAL DE PELOTAS<br> Campus Universitário, s/n° - Caixa Postal 354<br> CEP 96010-900 - Pelotas, RS - BRASIL<br> PABX: (53) 275-7000 - FAX: (53) 275-9023<br> CNPJ: 92.242.080/0001-00 <br> --------------------------------------------------- <br> </ADDRESS> </ADDRESS> </body> </html>




31

I N T E R L I G A N D O D O C U ME N T O S – L I N K S

O principal poder do HTML vem da capacidade de interligar partes de um texto, imagens a outros documentos.

A interligação entre documentos não se restringe somente as ligações com outras páginas. Em páginas muito longas onde um assunto tem vários tópicos, podemos utilizar índices onde os links tem a função de interligar os tópicos de um texto e que com apenas um clique em um dos tópicos do índice, o item é exibido.

LINKS PARA MESMO DIRETÓRIO: Você só precisa especificar o nome do arquivo que será chamado e a sua extensão. Sintaxe de comando: <A HREF=”nome do arquivo.extensão”> Texto ou imagem </A> Onde:

$" A: abertura da TAG de link; $" HREF=”nome do arquivo.extensão”: deve ser informado o nome completo do

arquivo que será acessado; $" Texto ou imagem: que servirá como link; $" /A: encerra a TAG de link.

Observação: Não deixar espaço em branco entre <A> e </A>. Exemplo:




32

LINKS PARA OUTROS DIRETÓRIOS OU PASTAS:

Para criar links para uma página localizada em outros diretórios é necessário indicar o caminho completo do arquivo. Para a WEB isto tem uma forma um pouco diferente do Windows e do DOS, veja:

$" A barra utilizada para separar diretórios é a barra convencional (/); $" O ponto de partida para localizar um arquivo em outro diretório é o atual; $" Para baixar um nível deve utilizar os sinais “ ../ ”;

Exemplo:

Neste exemplo foi criado um link na página index.htm que acessa a página primeira.htm, localizada dentro da pasta página.

Para inserir um link na página entrada.htm, - localizada dentro da pasta pagina - a

página index.htm, que esta um diretório abaixo, temos que descer um diretório, para isso utiliza-se dois pontos “..” como no exemplo ao lado:

LINKS PARA OUTROS SERVIDORES:

Para criar um link para arquivos localizados em qualquer parte do mundo é necessário indicar a URL do arquivo.

URL é a abreviatura de Uniform Resource Locator. Tem a função de especificar a localização de páginas ou arquivos em servidores da WEB.

Composta de duas partes:




33

#"O protocolo Internet do documento; #"O endereço do servidor da página.

Comando:

<A HREF=”protocolo://servidor.arquivo”> Texto ou imagem </A>. Onde:

protocolo: é o tipo de servidor que está sendo acessado; Os mais utilizados são:

#"http: Hiper Text Transfer Protocol, é um servidor da WWW; #"ftp: File Tranfer Protocol, é um serviço para a troca de arquivos, programas entre

um servidor e um computador remoto; o servidor: é o computador que contém a página; o arquivo: é o nome do arquivo (diretório e nome do arquivo).

O protocolo do servidor deve ser seguido: o Dos símbolos “://”; o Do endereço do computador remoto.

Exemplo: <body bgcolor="#FFFFFF"> <div align="center"> <h3>LINK PARA OUTROS SERVIDORES</h3> <br> <A HREF="http://www.ufpel.tche.br"><a href="http://www.ufpel.tche.br"><img src="../imagens/simbolo_ufpel.gif" width="110" height="108" border="0" align="middle"></a> </A> </div> </body>

LINKS PARA MESMA PÁGINA:

É muito simples. Definem-se seções na página, sendo que cada terá um nome que servirá de referência para o link.

ÂNCORAS:

Para ter links em uma mesma página, deve-se criar uma âncora no início de cada seção que será acessada por um link. É um ponto de referência ou endereço que será acessado por um link. Utilizada para marcar o início de cada seção da página. O nome da âncora será a referência utilizada pelo link que a acessará.

Para criar ou acessar uma âncora deve-se utilizar a TAG de vínculo, com atributos diferenciados.




34

Criando Âncoras: Com este atributo você escolhe um local da página para inserir uma âncora.

Esta TAG fica invisível ao usuário. Pode ser visualizada no código fonte. Normalmente utilizado em páginas com mais de uma tela do navegador e

inserida no topo do documento

<A NAME=”nome da seção”></A> #"A: abertura da TAG de link; #"NAME=”nome da seção”: cria o nome da seção, marcando o início da seção; #"Não é necessário inserir nada entre os campos <A> e </A>; #"</A>: encerra a TAG.

Linkando Âncoras:

Com esta TAG você irá inserir uma imagem ou texto que indica ao usuário que ao clicar neste tipo determinado de link ele irá para o local onde foi inserida uma âncora.

<A HREF=”#Nome da Seção”> Texto ou imagem </A> $" A: abertura da TAG de link; $" HREF=”#Nome da Seção”: nome da seção que deve ser acessada; $" </A>: encerra a TAG de link

IMPORTANTE:

O símbolo # indica ao navegador que o link se encontra na mesma página. É indispensável o uso de "#”.

CRIANDO LINKS PARA O SEU E-MAIL:

Você deve informar o seu endereço eletrônico na TAG de LINK. Sintaxe de comando:

<A HREF=”mailto:endereço”> Texto ou imagem </A> $" mailto: informa ao browser que o link é para um endereço eletrônico $" endereço: é o endereço de e-mail

Exemplo: <body bgcolor="#FFFFCC"> INSERINDO LINK PARA O SEU E-MAIL<br> <A HREF="mailto:seu_e_mail@domínio"><a href="mailto:seu_e_mail@dom% EDnio">Clique aqui<br> <img src="../imagens/email1.gif" width="90" height="90" align="middle" border="0"><br> para enviar<br>um e-mail</a></A><br> Você pode inserir imagem, texto ou os dois conforme o exemplo para indicar seu e-mail. </div></body>




35

LINK DE DISPOSIÇÃO DE ARQUIVOS PARA DOWNLOADS Basta no link referenciar um arquivo com a extensão *.EXE, *.ZIP E ao clicar no link aparecerá:

Clique neste ponto para salvar seu arquivo. Escolha o local de

destino para salvar o seu documento.

Download em andamento.

Processo de cópia do arquivo e salvamento para o local de destino pré-determinado

Download concluído: - Abrir: executa o arquivo do download; - Abrir pasta: pasta onde foi salvo o arquivo; - Fechar: fecha a janela de download.




36

I M A G E N S G R Á F I C A S

Atualmente a maioria dos browsers exibe imagens, porém não é qualquer tipo de arquivo imagem que deve ser inserido em HTML. Os formatos mais aceitos na WEB são GIF e JPEG.

GIF e JPG

O formato GIF (Grafics Interchange Format) pode ser utilizado em diferentes plataformas de hardware (PC e Macintosh), suporta no máximo 256 cores e gera arquivos menores , com extensão .gif. este formato é muito utilizado para desenhos e gráficos.

O formato JPEG (Joint Photographic Engineering Group) suporta 16 milhões de cores e pode reduzir o tamanho de uma imagem até dez vezes. Gera arquivos com a extensão .jpg e .jpeg. muito utilizado para fotos.

Utilizar imagens de dimensões pequenas, gravadas no formato JPEG (no caso de fotografias) ou GIF (melhor para desenhos, em preto-e-branco ou com poucas cores). Tenha cuidado com as GIFs animadas; elas podem ocupar bastante espaço em disco, dependendo do número de cores e quadros de animação. Estes cuidados também farão a sua página carregar mais rapidamente, tornando a visitação mais agradável.

INSERINDO UMA IMAGEM - <IMG SRC=”nome do arquivo.extensão”>

<IMG SRC=”nome do arquivo.extensão” WIDTH=”n” HEIGHT=”n”

ALIGN=”posição” ALT=”mensagem” BORDER=”n”> Onde: SRC=”nome do arquivo.extensão”: é o nome do arquivo e sua extensão; Exemplo:

imagens_graficas.htm <HTML> <HEAD> <TITLE> Imagens Gráficas </TITLE> </HEAD> <BODY> <center> <H2>INSERINDO UMA IMAGEN</H2> <BR> <h3>CANCUN BEACH</h3><BR> <img src="../imagens/cancun_beach.jpg"> </center> </BODY> </HTML>




37

DIMENSIONANDO AS IMAGENS: O tamanho das imagens exibido pelo navegador pode ser alterado. Recurso este

muito utilizado para a criação de trumbnails, que são pequenas imagens que servem como links para imagens maiores. O tamanho do arquivo da imagem não é alterado.

Podemos redimensionar a figura através dos atributos a seguir: 1. WIDTH=”n”:

Altera a largura da imagem. Valores dados em pixels. 2. HEIGHT=”n”’:

Altera a altura da imagem. Valores dados em pixels. Exemplo: <HTML> <HEAD> <TITLE> Redimensionando Imagens Gráficas </TITLE> </HEAD> <BODY> <H2 align="center">Redimensionando<br> Imagens Gráficas</H2> <CENTER> <H3>Tamanho original da paisagem: 300 x 197 pixels - 20k</H3> <p><img src="../imagens/paisagem.jpg"> <BR> widht="240" height="137"<br> <IMG SRC="../imagens/paisagem.jpg" widht="240" height="137" ALIGN="middle"><BR> widht="160" height="57"<br> <IMG SRC="../imagens/paisagem.jpg" widht="160" height="57" ALIGN="middle"> </p> </CENTER> </BODY> </HTML> Nota:

As figuras redimensionadas podem perder um pouco a sua definição. ALINHAMENTO DA IMAGEM: ALIGN=”posição”: Em relação ao navegador:

$" Right: alinhamento a direita; $" Left: alinhamento a esquerda(padrão dos navegadores);

Exemplo: imagens_alinhadaas_navegador.htm




38

<HTML> <HEAD> <TITLE> Imagens Alinhadas em relação ao navegador </TITLE> </HEAD> <BODY> <h3 align="center"> Imagens Alinhadas em Relação ao Navegador </h3> <BR> Alinhamento a direita: <img src="../imagens/dexter_laboratory2.jpg" align="right" width="90" height="90"> <BR> Alinhamento a esquerda: <img src="../imagens/dexter_laboratory2.jpg" align="left" width="90" height="90"> <BR> <center>Alinhamento centralizado<br> com a TAG CENTER:<br> <img src="../imagens/dexter_laboratory2.jpg" width="90" height="90"> </center> </BODY> </HTML>

Em relação ao texto:

$" Top: alinhamento pelo topo da imagem; $" Bottom: alinhamento pela base da imagem; $" Middle: alinhamento pelo centro da imagem;

Exemplo: imagens_alinhadas_texto.htm <BODY> <H2> Imagens Alinhadas em Relação ao Texto </H2> <BR><BR> Alinhamento pelo topo da imagem: <img src="../imagens/praia.jpg" ALIGN="top"><BR><BR> <hr align="center" size="2" widht="80%"><BR><BR> Alinhamento pela base da imagem: <img src="../imagens/praia2.jpg" ALIGN="bottom"><BR><BR> <hr align="center" size="2" widht="80%"><BR><BR> Alinhamento pelo centro da imagem: <img src="../imagens/praia3.jpg" ALIGN="middle"><BR><BR> <hr align="center" size="2" widht="80%"><BR><BR> </BODY>




39

DEMAIS ATRIBUTOS

$" ALT=”mensagem”: Este atributo tem a função de exibir uma mensagem no lugar da imagem

enquanto ela é carregada. Quando o navegador não exibe imagem a mensagem é exibida em seu lugar. Também tem a função de especificar, indicar sobre uma imagem, quando o cursor é colocado sobre a imagem.

Exemplo: imagens_com_alt.htm <HTML> <HEAD> <TITLE> Imagens com mensagens </TITLE> </HEAD> <BODY> <center><H3>ISERINDO UMA MENSAGEM EM UMA IMAGEM</H3> <BR> <img src="../imagens/peixes.jpg" ALT="Peixes no Lago. Este é mais um exemplo de mensagens em uma imagem. Visualizada quando o mouse passa por cima da imagem."> </center> </BODY> </HTML>

$" BORDER=”n”: Podem ser definidas diferentes tamanhos de bordas

para uma imagem, em pixels Exemplo: imagens_bordas.htm <BODY> <center> <H2>INSERINDO BORDAS <BR> EM IMAGENS</H2> <BR> <img src="../imagens/animaniacs.jpg" BORDER="0" ALT="Animaniacs sem bordas"> <img src="../imagens/animaniacs.jpg" BORDER="5" ALT="Animaniacs com borda 5"> <img src="../imagens/animaniacs.jpg" BORDER="10" ALT="Animaniacs com borda 10"> </center></BODY>




40

I N S E R I N D O S O M TAG <BGSOUND> - Sem player disponível ao usuário:

Este comando carrega um arquivo de áudio como trilha sonora enquanto a página esta sendo visualizada. Quando a página é encerrada a execução do som também é finalizada. Comando

<BGSOUND SRC=”nome_arquivo.extensão” LOOP=”INFINITE”>

#"SRC=” nome_arquivo.extensão”: define o nome de arquivo de áudio a ser carregado durante a execução da página.

#"LOOP=”n”: n define quantas vezes o arquivo de áudio será executado. Se n for igual a 1 ou INFINITE, o arquivo será executado infinitamente durante a visita na página.

Nota:

#"Esta TAG de som pode ser inserida em qualquer ponto da página, dentro da marcação <BODY></BODY>;

#"Procure não inserir arquivos de áudio muito grandes para diminuir o tempo de acesso a página para os usuários que tem conexão discada(modem 56Kb).

#"Suporta os seguintes formatos de arquivos de áudio: o *.wav; o *.midi; o *.au; o *.mp3

TAG <EMBED> - Player visível ao usuário:

Com esta TAG é possível o internauta interagir no som disponível na página. Comando: <embed width="120" height="50" src="nome do arquivo.extensão" autostart="false" showstatusbar="1" showdisplay="1">

#"width: largura do player #"height: altura do player #"src: local relativo ou absoluto do arquivo (.mid, .wav, .mp3, .wma; .au) #"autostart: se true, o arquivo de midia será inicializado automatimente, se false ficará

em modo parado #"showstatusbar: se 1 exibe o status do arquivo de midia, se 0 oculta as informações #"showdisplay: se 1 exibe informações sobre o arquivo de midia, se 0 oculta as

informações




41

Exemplo: <html> <head> <title>SOM NA PÁGINA - <EMBED></title> </head> <body bgcolor="#F7FFD2"> <div align="center"><embed width="120" height="45" src="../sons/avril_lavigne_complicated.mid" autostart="false"></embed><br> Neste exemplo: <br> <EMBED WIDTH="120" HEIGHT="45" SRC="../sons/complicated.midi" AUTOSTART="false"> </font></div> </body> </html>




42

T A B E L A S

Muito utilizadas para organizar as páginas de internet hoje em dia. Também para modelar o layout das home pages, organizar dados na web.

Pode ser inserido texto, imagens gráficas, links. Em primeiro momento você pode achar difícil a compreensão das TAG´s utilizadas

nas tabelas, mas isto é só num primeiro momento de contato com estes códigos. Mas depois torna-se muito fácil a sua utilização e interpretação para corrigir possíveis falhas em um editor de HTML qualquer.

Pode também ser utilizada dentro de outras tabelas, melhorando a disposição dos conteúdos de sua página MARCAÇÕES BÁSICAS PARA DESENVOLVER TABELAS EM HTML: <TABLE> </TABLE>: Ete é o comando para se inserir a tabela, esta TAG deve ser encerrada. Antes e depois de inserir uma tabela, sempre acontece uma quebra de linha <TR> </TR>: Table Row Serve para inserir linhas em uma tabela <TD> </TD>: Table Data Este comando insere células, em cada linha. Define os dados da tabela. DESENVOLVENDO UMA TABELA SIMPLES: Exemplo: tabelas.htm <TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1> <TR> <! Cria a primeira linha da tabela> <TD>Primeira célula </TD><! Aqui foi criada uma célula> <TD>Segunda célula </TD> <TD>Terceira célula </TD> </TR><! Fecha a primeira linha da tabela> <TR><! Abre a segunda linha da tabela> <TD>Primeira célula </TD> <TD>Segunda célula </TD> <TD>Terceira célula </TD> </TR><! Encerra a Segunda linha da tabela> </TABLE><! Encerra a tabela>

*Com isto você já consegue Ter uma idéia de como montar suas tabela. O segredo para se conseguir fazer estas tabelas de forma eficiente é planejar e ter a idéia exata do conteúdo desta tabela.

**Nas células da tabela você pode inserir desde simples frases até figuras inteiras. ***Parâmetros podem ser acrescidos às tabelas, tais como : aumentar ou diminuir a

largura de uma célula; distanciar as células uma das outras; inserir cor de fundo dentro da célula etc.




43

<TH> </TH>: Table Header

Define os títulos das tabelas. Podem ser posicionados em qualquer célula.Quando inserido como o Table Data, as informações contidas dentro desta TAG aparecem em negrito.

Exemplo: tabelas_table_header.htm <table border="1" width="400"> <tr> <td>Novos Cadastros</td> <th>Outubro</th> <th>Novembro</th> <th>Dezembro</th> </tr> <tr> <th>Alunos</th> <td>10</td> <td>3</td> <td>16</td> </tr> <tr> <th>Professores</th> <td>3</td> <td>7</td> <td>11</td> </tr> </table> <CAPTION> </CAPTION>:

Esta TAG insere a legenda da Tabela. Inserir entre <TABLE> e </TABLE>. Exemplo: tabela_caption.htm <table BORDER="1" WIDTH="80%"> <caption>LEGENDA ENTRE CAPTION</caption> <tr> <th align="center">Uso de Table Header - TH</th> </tr> <tr> <td align="center">Uso de Table Data - TD</td> </tr> </table>




44

ATRIBUTOS DE CONTROLE DE TABELAS: WIDTH=”valor ou %”:

Com este atributo é possível alterar a largura da tabela em relação ao navegador. Também a largura das células, como no exemplo que segue.

Para alterar a largura de uma célula da tabela basta acrescentar o parâmetro WIDTH dentro da tag <TD>.

Exemplo: tabela2.htm <table BORDER="2"> <tr> <td WIDTH="25%">WIDTH=25%</td> <td ALIGN="MIDDLE" WIDTH="75%">WIDTH=75%</td> </tr> </table> <br> <br> <div align="center"> <center> <table BORDER="2"> <tr> <td WIDTH="100">WIDTH=100</td> <td ALIGN="MIDDLE" WIDTH="200">WIDTH=200 (PIXELS)</td> </tr> </table> BORDER=”n”:

Com este abributo é possível colocar em maior destaque uma determinada tabela. O número da espessura de uma tabela é definida em pixels.

Exemplo: tabela_atribuindo_bordas.htm <table border="5" width="300" align="center"> <tr> <td width="33%" align="center">L1 - C1</td> <td width="33%" align="center">L1 - C2</td> <td width="34%" align="center">L1 - C3</td> </tr> <tr>




45

<td width="33%" align="center">L2 - C1</td> <td width="33%" align="center">L2 - </td> <td width="34%" align="center">L2 - C3</td> </tr> </table> ATRIBUINDO BORDER=”3” E BORDER=”0” Sintaxe de comando: <table border="0" width="400"> <tr> <td width="50%" align="center"> Tabela com BORDER="3" table border="3" width="90%"> <tr> <td width="50%" align="center">Grêmio</td> <td width="50%" align="center">Juventude</td> </tr> <tr> <td width="50%" align="center">Pelotas</td> <td width="50%" align="center">Brasil</td> </tr> </table> </td> <td width="50%" align="center"> Tabela com BORDER="0" <table border="0" width="90%"> <tr> <td width="50%" align="center">São Paulo</td> <td width="50%" align="center">Bahia </td> </tr> <tr> <td width="50%" align="center">Palmeiras </td> <td width="50%" align="center">Internacional </td> </tr> </table> </td> </tr> </table> *Neste exemplo foram colocadas duas tabelas dentro de uma tabela.




46

ALIGN=”posição”: Este atributo controla o alinhamento do conteúdo dentro das TAG´s TD, TR, TH. Podem ser:

$" left: alinhamento a esquerda;

$" center: alinhamento centralizado;

$" right: alinhamento a direita.

Exemplo: tabela_alinhamentos.htm <table border="1" width="474"> <tr> <td width="152" align="center"><b>PRIMEIRA CÉLULA</b></td> <td width="147" align="center"><b>SEGUNDA CÉLULA</b></td> <td width="153" align="center"><b>TERCEIRA CÉLULA</b></td> </tr> <tr> <td width="152" align="center">ALIGN="left"</td> <td width="147" align="center"> ALIGN="center"</td> <td width="153" align="center"> ALIGN="right"</td> </tr> <tr> <td width="152">ESQUERDA</td> <td width="147"> <p align="center">CENTRO</td> <td width="153"> <p align="right">DIREITA</td> </tr> </table> *Quando adicionado dentro da TAG <TABLE>, o alinhamento será em relação ao navegador, que pode ser:

$" ALIGN=”left”: alinhamento a esquerda (padrão, não é necessário especificar); $" ALIGN=”center”: alinhamento centralizado; $" ALIGN=”right”: alinhamento a direita.




47

VALIGN=”posição”: Controla o posicionamento do conteúdo dentro dás células. Pode ser:

$" top: alinhamento superior; $" middle: alinhamento centralizado; $" bottom: alinhamento inferior;

Pode ser adicionado dentro das TAG´s TR,TD, TH.

Exemplo: <table border="1" width="474"> <tr> <td width="234" align="center"><b>Controle do posicionamento dos conteúdos das células pode ser:</b></td> <td width="91" valign="top" align="center"><b>TOP</b></td> <td width="91" valign="middle" align="center"><b>MIDDLE</b></td> <td width="91" valign="bottom" align="center"><b>BOTTOM</b></td> </tr> </table>




48

CELLSPACING=”valor em Pixels”: Este atributo compreende a distância entre células e linhas. Deve ser adicionado dentro da TAG <TABLE>. Como padrão dos navegadores a distância é 2 pixels

Exemplo: <table border="1" width="80%" ALIGN="center" cellspacing="6"> <tr> <td width="33%" align="center"><b><font size="2" face="Arial Narrow">CELLSPACING="6"</font></b></td> <td width="33%" align="center"> </td> <td width="34%" align="center"> </td> </tr> <tr> <td width="33%" align="center"> </td> <td width="33%" align="center"><b><font size="2" face="Arial Narrow">CELLSPACING="6"</font></b></td> <td width="34%" align="center"> </td> </tr> <tr> <td width="33%" align="center"> </td> <td width="33%" align="center"> </td> <td width="34%" align="center"><b><font size="2" face="Arial Narrow">CELLSPACING="6"</font></b></td> </tr> </table> CELLPADDING=”valor em pixels”:

Este atributo é utilizado para formatar o espaço entre o conteúdo de uma célula e suas bordas em todos os sentidos.

É aplicado dentro da TAG <TABLE>




49

Exemplo: <table border="1" width="80%" align="center" cellpadding="8"> <tr> <td width="33%" align="center">PÊRA</td> <td width="33%" align="center">MAMÃO</td> <td width="34%" align="center">ABACAXI</td> </tr> <tr> <td width="33%" align="center">KIWI</td> <td width="33%" align="center">MELANCIA</td> <td width="34%" align="center">MORANGO</td> </tr> <tr> <td width="33%" align="center">ABACATE</td> <td width="33%" align="center">MELÃO</td> <td width="34%" align="center">MIRTILO</td> </tr> </table> NOWRAP: sem quebra de linha

Este atributo evita a quebra de linha dentro da célula. O texto inserido dentro do campo não pode ser dividido em mais de uma linha.

Deve ser adicionado dentro do <TD>. Exemplo: <table border="1" width="100%" align="center"> <tr> <td width="50%" nowrap>Célula com NOWRAP. O texto fica sem quebra de linha.</td> <td width="50%">Ao contrário desta célula que não foi adicionado, o texto sofre quebra de linha.</td> </tr> </table>

*Isto já dá uma idéia do funcionamento geral das tabelas na WEB. Muito dos alinhamentos que encontramos na Internet é feito por intermédio de tabelas.




50

**Você também pode usar todos os outros recursos já vistos de HTML para otimizar o uso de tabelas.

ROWSPAN=”n”:

Define quantas linhas uma mesma célula pode abranger. Por padrão, na maioria dos navegadores de internet cada célula adicionada em uma tabela corresponde a uma linha. Pode ser aplicado em TH ou TD, proporcionando a mesmo efeito.

Exemplo: tabelas_rowspan.htm <table border="1" width="380" cellpading="7" align="center"> <tr> <td width="16%" rowspan="3">3 linhas</td> <td width="16%">coluna 2</td> <td width="16%">coluna 3</td> <td width="17%">coluna 4</td> <td width="17%">coluna 5</td> </tr> <tr> <td width="16%">coluna 2</td> <td width="16%">coluna 3</td> <td width="17%">coluna 4</td> <td width="17%">coluna 5</td> </tr> <tr> <td width="16%">coluna 2</td> <td width="16%">coluna 3</td> <td width="17%">coluna 4</td> <td width="17%">coluna 5</td> </tr> </table> COLSPAN=”n”

Este atributo define quantas colunas uma célula pode abranger. Por padrão, na maioria dos navegadores de internet cada célula adicionada em uma tabela corresponde a uma coluna. Pode ser aplicado em TH ou TD, proporcionando a mesma abrangência.




51

Exemplo: tabelas_colspan.htm <table border="1" width="80%" align="center"> <tr> <td width="24%" colspan="3">CÉLULA COM 3 COLUNAS</td> <td width="20%">coluna 4</td> <td width="20%">coluna 5</td> </tr> <tr> <td width="20%">coluna 1</td> <td width="20%">coluna 2</td> <td width="20%">coluna 3</td> <td width="20%">coluna 4</td> <td width="20%">coluna 5</td> </tr> </table> INSERINDO FIGURAS E CORES COMO PLANO DE FUNDO

Outro atributo que podemos ter nas tabelas é mudar a sua cor de fundo, isto se torna particularmente útil quando se quer dar destaque a uma célula em especial.

Exemplo: <table border=0> <tr> <td width=150 bgcolor=red>vermelho </td> <td width=150 bgcolor=blue>azul </td> <td width=150 bgcolor=red>vemelho</td> </tr> <tr> <td width=150 bgcolor=blue>azul</td> <td width=150 bgcolor=red>vemelho</td> <td width=150 bgcolor=blue> azul</td> </tr> </table>




52

COLOCANDO UMA IMAGEM DE FUNDO NAS TABELAS Um recurso parecido com a cor de fundo , colocar uma imagem como fundo de

uma tabela é uma técnica muito usada. Através do complemento BACKGROUND dentro da tag TABLE , basta indicar qual o endereço e o nome da figura.

Exemplo: <TABLE BACKGROUND="nome do arquivo.extensão" BORDER=5> <TR> <TD>imagem</TD> </TR> </TABLE>

USANDO TABELAS COMO MOLDURAS:

Um outro uso bastante interessante de tabelas é como moldura para alguma figura. Para isto basta você iniciar uma tabela e definir um valor para BORDER.

Exemplo: <TABLE BORDER=5> <TR> <TD> <IMG SRC=endereço/nome da figura.extensão> </TD> </TR> </TABLE>

Claro que você deve usar com muito bom senso este artifício da tag <TABLE>, pois nem sempre uma moldura em uma figura define um bom layout (aparência) na sua home-page.




53

FORMATANDO LINHAS INTERNAS RULES=”complementos”

Para escolher as linhas internas que serão mostradas dentro da tabela , usamos o atributo RULES , dentro da tag <TABLE> .

Os complementos desse atributo são :

$" none : nenhuma linha interna ; Sem as linhas internas de uma tabela tanto horizontais quanto verticais, como pode

ser visto no exemplo a seguir Exemplo: tabelas_rules_none.htm <table border="1" width="300" rules="none"> <tr> <td width="20%" align="center">Alberto</td> <td width="20%" align="center">Fabiana</td> <td width="20%" align="center">Denis</td> </tr> <tr> <td width="20%" align="center">Alex</td> <td width="20%" align="center">Jaqueline</td> <td width="20%" align="center">Lisla</td> </tr> <tr> <td width="20%" align="center">Giovane</td> <td width="20%" align="center">Cátia</td> <td width="20%" align="center">Sandra</td> </tr> <tr> <td width="20%" align="center">Darlan</td> <td width="20%" align="center">Heloisa</td> <td width="20%" align="center">Iara</td> </tr> </table>

$" rows : sem linhas verticais internas Este complemento do atributo RULES, retira a visualização das linhas verticais

internas entre cada célula da tabela. Não dedixando de permitir a organização do conteúdo interno das tabelas.

Exemplo: tabelas_rules_rows.htm <table border="2" RULES="rows" width="300">




54

<tr> <td width="25%">papel</td> <td width="25%">disquete</td> <td width="25%">cadernos</td> <td width="25%">corretivo</td> </tr> <tr> <td width="25%">grafite</td> <td width="25%">caneta</td> <td width="25%">lapizeira</td> <td width="25%">calculadora</td> </tr> <tr> <td width="25%">tesoura</td> <td width="25%">pincel</td> <td width="25%">lápis</td> <td width="25%">borracha</td> </tr> </table>

$" cols: sem linhas horizontais entre cada coluna da tabela ; Exemplo: tabelas_rules_cols.htm <table border="2" RULES="cols" width="300"> <tr> <td width="25%">papel</td> <td width="25%">disquete</td> <td width="25%">cadernos</td> <td width="25%">corretivo</td> </tr> <tr> <td width="25%">grafite</td> <td width="25%">caneta</td> <td width="25%">lapiseira</td> <td width="25%">calculadora</td> </tr> <tr> <td width="25%">tesoura</td> <td width="25%">pincel</td> <td width="25%">lápis</td> <td width="25%">borracha</td> </tr> </table>




55

Observação:

As tabelas são um recurso de modelagem das home-pages hoje em dia.

Alguns comandos HTML não funcionam em um dado navegador, se você reparou para falarmos de tabelas rodamos os exemplos nos dois navegadores mais conhecidos : Internet Explore 4.0 e no Netscape Communicator 4.0.

Você não reparou nenhuma diferença no uso destes navegadores para nossos exemplos, a questão é que para tabelas mais complexas, com alinhamentos mais precisos cada

navegador interpreta estes comandos HTML de tabelas de forma diferenciada. Um exemplo típico é uso de CELLSPACING e CELLPADDING.

Isto se deve ao fato de que nem a Netscape e nem a Microsoft entram em um acordo quanto a padronização de seus navegadores. Sendo assim, quando você construir tabelas deve sempre levar em conta em qual navegador você dará preferência para rodar a sua página. Por isso nunca é demais deixar claro à sua home-page em qual navegador ela roda melhor a sua formatação.




56

F R A ME S

É um recurso que permite dividir uma página de internet em outras, na mesma página. Nada mais é que uma página que “chama” outras na página inicial que um documento html que contém frames.

Também chamados de moldura. Alguns programas como o Macromedia Dreamweaver, por exemplo, em português.

Em um determinado arquivo como o index.htm, é onde pode ser definido a estrutura das novas janelas para o seu HTML.

O quantidade de frames utilizados é definido por <FRAMESET>, cada frame “chama” uma página de internet diferente, a ser apresentada em cada frame. Onde cada página de uma frame interage com outra.

Normalmente é utilizado na página de abertura (index.htm). Estrutura de um frame São utilizados um conjunto de TAG´s, cada qual com sua função:

<FRAMESET>:

É a TAG de inserção para a elaboração de um conjunto de frames com seu elementos.

O FRAMESET aceita os atributos COLS e ROWS, referentes a divisão das janelas que pode ser horizontal ou vertical. E internamente só podem ser utilizadas as marcações FRAMESET, FRAME ou NOFRAMES.

Atributos utilizados:

#"COLS=”colunas, largura”: Define o número de colunas a ser utilizado, o valor pode ser em pixels ou

porcentagem. É neste atributo que é definido o número de quadros usados em um frame. #"ROWS=”linhas, altura”:

Tem a mesma função do atributo COLS, só que este é para as linhas de um frame. #"FRAMEBORDER=”0”:

Você pode atribuir borda na divisa de frames, 0 sem borda e 1 com borda <FRAME>:

Define o frame a ser criado. Não é utilizada a Tag de encerramento </FRAME>, pois não necessita.

Define cada janela contida em um área, não necessita da TAG de finalização (/FRAME).

Atributos utilizados:

#"SRC=”URL”: Endereço do arquivo e extensão que será exibido no frame

#"NAME=”nome da janela”: Este atributo é utilizado para associar um nome a uma janela. Utilizado para criar alvos de um frame para outro.




57

#"MARGINWIDTH=”valor”: Controla as margens de cada frame, a direita ou esquerda. Distância entre os conteúdos de cada página e as margens da janela.

#"MARGINHEIGHT=”valor”: Tem a mesma função do MARGINWIDTH, só que controla as margens superiores e inferior.

#"SCROLLING=”yes, no ou auto”: É um atributo opcional. Define se uma janela deve ou não possuir barra de rolagem. O padrão utilizado, caso não especificar é auto, sendo assim o seu navegador irá aplicar quando neceessário.

#"NORESIZE: Este atributo não possue complementos. Quando não adicionado a TAG <FRAME>, o usuário poderá alterar o tamanho das janelas, movendo as bordas das janelas com o cursor. Por padrão todas as janelas podem ter seu tamanho alterado, mas é bom colocar este atributo para não modificar o layout de sua página. <NOFRAMES>:

Esta TAG é utilizada para informar a alguns usuários de que seu navegador de internet não suporta FRAMES. Hoje em dia a maioria dos navegadores não tem este problema, como os antigos navegadores IE 2.0.

Permite a navegação em primeira página somente. Sendo assim colocar as informações de como atualizar o navegador do usuário para poder visualizar a sua página corretamente.

Esta TAG deve ser encerrada com </NOFRAMES> e inserida dentro de frameset. Exemplo:

<FRAMESET>

<NOFRAMES> Informações a serem dispostas aqui sobre a impossibilidade de navegar com frames em uma página.

</NOFRAMES> </FRAMESET>

INTERLIGANDO DOCUMENTOS ENTRE FRAMES: A marcação: TARGET=”complementos”:

Utilizada opcionalmente na TAG de links, permite controlar o alvo em que uma determinada página irá “abrir”, ou seja, em que frame específico deverá aparecer.

Complementos do atributo alvo (TARGET):

#"nome do frame: Indica em qual frame deverá ser aberta a nova janela indicada por um link em um frame diferente. Não é necessário indicar caso a janela a ser aberta deverá ser localizada no mesmo frame;

#"_blank: Convenciona ao navegador que ele deverá abrir uma janela, em branco por um determinado link, para visualizar a página indicada por ele;




58

EXEMPLO USO DE FRAMES: Criar uma página principal: frames.htm Subdividida em dois frames, dispostos em colunas:

Coluna 1 – 25% de largura Coluna 2 - * de largura O navegador disponibilizará a esta janela o restante da tela utilizada pelo navegador para o lado direito

Nome: frame_1.htm Nome: frame_2.htm Arquivo: frame_1.htm <html> <head> <title>FRAME 1</title> </head><body><div align="center"> <font size="4" face="Arial Black">FRAME 1.HTM</font><br><a href="frame_2.htm" target="frame_2">Frame 2 (Página Inicial)</a><br><br><br> <a href="frames_ancoras.htm" target="frame_2">Âncoras</a><br> <a href="frames_imagens_fundo.htm" target="frame_2">Backgrounds na Página</a><a href="frames_tabela _backgrounds.htm" target="frame_2"> Backgrounds em Tabelas</a></div> </body> </html> Arquivo: frame_2.htm

<html> <head> <title>FRAME 2</title> </head> <body> <div align="center"> <font size="4" face="Arial Black"> FRAME 2.HTM <br><br> PÁGINA INICIAL </font> </div> </body> </html>




59

INTERLIGANDO OS DOCUMENTOS PARA A PÁGINA COM FRAMES: Arquivo: frames.htm <html> <head> <title> *** PÁGINA COM FRAMES *** </title> </head> <frameset cols="25%,*" frameborder="1"> <frame name="frame_1" src="frame_1.htm" noresize scrolling="no"> <frame name="frame_2" src="frame_2.htm" noresize scrolling="auto"> <noframes> Seu computador não comporta frames <br><br> Atualize a versão do seu navegador: <br><br><a href="http://download.microsoft.com/download/ie6sp1/finrel/6_sp1/ W98NT42KMeXP/PT-BR/ie6setup.exe"> --- CLIQUE AQUI --- </a> </noframes> </frameset> </html>




60

F O R MU L Á R I O S

É um dos recursos mais interessantes em linguagem HTML. Permitem ao usuário de web interagir com o servidor, enviando informações

para o provedor do serviço. FINALIDADES DOS FORMULÁRIOS:

!"Venda de produtos; !"Cadastro on-line; !"Pedidos de tele-entrega; !"Reservas em Hotéis; !"Solicitação de serviços em geral; !"Troca de informações entre usuários e servidores;

Para melhor compreender as notações utilizadas nos formulários, primeiro precisamos nos familiarizar melhor com o HTML.

Podemos ter também múltiplos formulários em um único hiperdocumento, certificando-se apenas de que as TAG´s <FORM> e </FORM> não se sobrepõem.

Se um formulário possuir apenas um campo de entrada de texto, ao teclar ENTER após inserir determinada informação, o formulário será submetido, ou seja, o navegador irá interpretar como se o usuário estivesse acionado o botão de SUBMIT. Para isso utilizar a tecla TAB ou o mouse.

Comandos de formulários

São basicamente três: #"TEXTAREA: define uma área onde o usuário poderá digitar linhas de texto #"SELECT: define opções em um quadro de rolagem, uma lista drop down,

permitindo que o usuário selecione a opção desejada. #"IMPUT: definem botões e caixa de seleção, botões para limpar e enviar dados,

linhas de texto, etc. As TAGs de um formulário devem ser iniciadas <FORM> e finalizadas

</FORM>. Os comandos de um formulário devem ser inseridos entre essas TAGs, os quais possuem seus próprios atributos.

Comando Geral: <FORM> Define o início do formulário Atributos:

METHOD=” ” São dois: - POST: é o mais utilizado pois envia cada informação de forma separada da URL.

Com este método POST os dados entrados fazem parte do corpo da mensagem enviada para o servidor e transfere grande quantidade de dados.

- GET: com este, os dados entrados fazem parte do URL associado à consulta enviada para o servidor e suporta até 128 caracteres

ACTION=”nome da biblioteca a ser acessada no servidor” Cada provedor pode dispor as suas, as quais contém informações para o envio de dados do seu formulário.




61

Entre as TAGs do formulário, são inseridas as TAGs TEXTAREA, SELECT e

INPUT. Neste ponto serão inseridas as linhas de comando para o seu formulário,

seguidas da rotina fornecida pelo provedor. </FORM> Finaliza o formulário TAGs do formulário: INPUT

É uma opção para a reunião de informações, tais como: #"Campos de senha; #"Botões para marcar; #"Caixas de seleção; #"Limpar dados digitados e enviar dados

Comando geral: <INPUT TYPE=”tipo a escolher”>

Existem diferentes atributos para cada tipo de TYPE, que veremos a seguir: TEXT

Armazena dados digitados pelo usuário

tais como nome, endereço, telefone, cidade, etc

<INPUT TYPE=”text” NAME=”telefone” SIZE=”10” MAXLENGTH=”10”> #"NAME: nome obrigatório; #"SIZE: tamanho do campo visualizado no formulário; #"MAXLENGTH: número máximo de caracteres, a ser determinado para o campo.

NOTA:

Importante sempre utilizar o atributo NAME para definir o nome dos campos. PASSWORD

Utilizado quando se deseja armazenar dados confidenciais que não aparecem na tela do navegador quando digitados. Por

exemplo as senhas. <INPUT TYPE=”password” NAME=”senhas” SIZE=”15” MAXLENGTH=”15”>

#"NAME: nome obrigatório; #"SIZE: tamanho do campo visualizado no formulário; #"MAXLENGTH: número máximo de caracteres, a ser determinado para o campo.




62

CHECKBOX Define uma caixa de seleção para o visitante

marcar a opção desejada.

<INPUT TYPE=”checkbox” NAME=”opera” VALUE=”sim”> #"NAME: nome obrigatório; #"VALUE: valor definido para resposta quando selecionado este o item.

RADIO

Também define uma caixa de seleção, mas que

só permite ao usuário selecionar uma das opções.

<INPUT TYPE=”radio” NAME=”nota” VALUE=”excelente”> Excelente #"NAME: define o nome dos dados, é obrigatório. Os itens para seleção devem ter o

mesmo NAME; #"VALUE: valor retornado ao autor quando um determinado nome for escolhido.

* Você pode ter diferentes caixas de seleção CHECKBOX em um mesmo

formulário, desde que tenham NAMES diferentes. HIDDEN

Com este atributo as informações dispostas ficam ocultas. Tem a função de interagir por exemplo com o usuário a preencher um determinado campo que você determinou obrigatório. De um modo geral você configura a interatividade do formulário com o usuário e também a forma de recebimento dos formulários preenchidos na sua página por seus visitantes. Tudo vai depender do seu provedor, das opções que irá dispor para estes fins.

<INPUT TYPE=”hidden” NAME=” ” VALUE=” ”> #"NAME:define o nome dos dados. Obrigatório. #"VALUE: pode indicar destinos, ou campos obrigatórios utilizando seu nome.

RESET

Um botão é inserido e tem a função de apagar os dados

digitados no formulário.

<INPUT TYPE=”reset” VALUE=”apaga”> #"VALUE: define o nome que aparecerá no botão.




63

SUBMIT Um botão é inserido e tem a função de submeter as informações

digitadas no formulário para o servidor.

<INPUT TYPE=”submit” VALUE=”enviar”> #"VALUE: define o nome que aparecerá no botão.

SELECT

Permite definir uma lista de opções, com

barra de rolagem ou fixa na tela do navegador. pode ser selecionado um item.

È uma TAG que deve ser iniciada <SELECT> e finalizada </SELECT>. <SELECT MULTIPLE NAME=”softwares”>

<OPTION SELECTED VALUE=”adobe”>Adobe Photoshop <OPTION VALUE=”corel”>CorelDraw

</SELECT> #"NAME: obrigatório, serve para identificação da lista; #"OPTION: ítem da lista; #"MULTIPLE: com este atributo a lista aparecerá sempre aberta; #"SELECTED: indica como valor padrão da lista; #"VALUE: valor a ser retornado ao servidor

TEXTAREA

Insere uma caixa de texto com um número pré-

determinado de linhas e colunas. Tem a finalidade de o usuário deixar a sua mensagem para o autor.

É uma TAG que deve ser iniciada <TEXTAREA> e finalizada </TEXTAREA>.

<TEXTAREA NAME=”comentarios” ROWS=”4” COLS=”40” VALUE=”comentarios”> Texto padrão – digite aqui seus comentários. </TEXTAREA>

#"NAME: obrigatório, pois define o nome dos dados inseridos #"ROWS: número de linhas; #"COLS: número de colunas; #"VALUE: não é obrigatório, indica qual o texto será referenciado ao autor




64

U P L O A D D E A R Q U I V O S Hospedando o site: Os programas de ftp fazem a conexão do seu micro com o micro do provedor

para que você possa transmitir o site ou atualizações feitas em páginas do site para a internet.

Ao terminar de construir o site você precisa transferir todas as páginas que construiu para o provedor de acesso onde vai hospedar o site. É através dele que qualquer usuário conectado a internet pode navegar no site.

Na internet, existem inúmeros locais para hospedagem, tais como o VilaBol, CJB.net, GeoCities, FreeSites, HPG.

Para transmitir o site para o provedor de acesso você vai utilizar um programa de FTP (File Transfel Protocol), que possibilitará que você envie ao provedor onde vai hospedar

seu site uma cópia de todos os arquivos do mesmo, sem nem ao menos precisar sair de casa.

Você vai precisar ter um programa de FTP instalado no micro. Sugerimos o FTP Explorer, que pode ser conseguido gratuitamente na internet.

Além do programa de FTP, você vai precisar saber o host address do provedor, ter um login (nome de acesso) e uma senha. O três serão necessários para configurar o programa de FTP de forma que ele possa fazer a transmissão. Muitos provedores utilizam no FTP o seu login e senha de acesso. O host address é fornecido pelo provedor e é diferente para cada um deles.

Evitando problemas na hora de disponibilizar sua página na Web:

Coloque o nome de index.htm no arquivo principal de sua home page: Isto facilita o acesso à sua página, simplificando o endereço que terá o seguinte

formato: http://www.ufpel.tche.br/~username, sem necessidade de especificar um nome de arquivo HTML - o servidor automaticamente procurará pelo arquivo index.htm ou index.html para exibir ao visitante. Além disso, caso alguém tente acessar sua página pelo endereço exemplificado anteriormente, e você não tenha um arquivo index, o servidor exibirá a relação de todos os arquivos contidos no seu diretório.

Use sempre letras minúsculas nos nomes dos arquivos e sem acentos: Os sistemas operacionais compatíveis com Unix, utilizados na maioria dos

servidores Web interpretam caracteres maiúsculos e minúsculos de maneira diferente. Ou seja, os arquivos chamados index.htm, Index.htm e index.HTM são considerados três arquivos diferentes. Esta é a causa principal de links que não funcionam e imagens que não carregam quando a página é transferida para o servidor.

Evite o uso de acentos e espaços em branco nos nomes de arquivos O uso de caracteres acentuados e espaços em branco também pode causar

problemas na transferência dos arquivos, ou exibir o endereço de sua página de maneira estranha no browser do visitante. Evite os acentos, e em caso de nomes longos use o sublinhado ( _ ) ao invés do espaço para separar palavras.




65

UPLOAD DOS ARQUIVOS DO SITE

Para que outras pessoas possam acessar sua página através da Internet é preciso colocar os arquivos em nosso servidor Web, localizado no Centro de Informática da UFPel, por exemplo. Para realizar a transferência utiliza-se um programa de FTP (Protocolo de Transferência de Arquivos).

Utilizando o programa WS-FTP: Execute o arquivo ws_ftp32

Uma pasta chamada WS-FTP será criada em seu desktop (área de trabalho)

Abra esta pasta e dê um duplo clique no ícone WS_FTP95 para iniciar o prgrama.

Será exibida a tela de conexão. No campo

HostName/Address, indique o endereço do servidor. No campo User ID digite seu username (seu nome de usuário na UFPel - a parte que vem antes de @ufpel.tche.br, por exemplo) e clique em OK. Se a conexão com o servidor obtiver sucesso, o programa pedirá sua password; nesta janela digite sua senha - a mesma que você usa para se conectar e para checar o e-mail.

Informa o local de descompactação do arquivo e que será numa pasta chamada WS-FTP.

Clique aqui para descompactar

Altera o local de descompactação dos arquivos.

Clique aqui para iniciar o programa




66

Pronto, você está conectado ao servidor. Na janela da esquerda, você visualiza os arquivos gravados em seu disco rígido, enquanto que a janela da direita mostra os arquivos gravados na sua área de disco na Minerva. Se for sua primeira conexão, a janela da direita deve estar em branco - não se preocupe se houverem alguns arquivos de configuração, entretanto.

Para inserir novas pastas ou subdiretório clique no botão MkDir bem à direita da

tela; na janela que aparece, digite o nome que você deseja. Uma pequena pasta amarela com o nome dado deve estar aparecendo agora na janela da direita.

Dê um clique duplo na pasta criada. A janela ficará em branco, indicando que não há nada na pasta que você acabou de criar. Agora localize, na janela da esquerda, os arquivos de sua página que você deseja colocar no servidor. Marque os arquivos, clicando uma vez sobre eles - aperte e segure a tecla CTRL para marcar mais de um arquivos. Finalmente, clique no botão --> entre as duas janelas, indicando que você quer transferir os arquivos da janela da esquerda para a da direita. Os arquivos aparecerão na janela da direita quando a transferência se completar.

Agora você já pode testar sua página. Se tudo estiver correto sua página já deve estar acessível de qualquer parte do mundo!

Se não quiser transferir mais nenhum arquivo, retorne à tela do WS-FTP e clique em Close para encerrar a conexão, e em Exit para fechar o programa.




67

D I C A S

Você deve indicar aos visitantes do seu site com conteúdos atualizados para que você os tenha sempre retornando. Com isso seu site ganhará muitas visitas, sempre.

$" Criar uma tela de abertura ou apresentação dinâmica do site.

Evitar arquivos pesados, para carregamento rápido da página; $" Evitar a construção de páginas com mais de duas telas verticais:

Esta regra deve ser seguida pelo menos para as páginas principais, normalmente as que servem de índice;

$" Carregamento rápido de suas páginas: Garantir a exibição de texto e alguma imagem em menos de 15 segundos

$" Barra de navegação nas páginas: A elaboração de uma barra de navegação para cada seção do site, com links para retornar as páginas principais. Devem ser criadas com texto arial ou verdana no tamanho 1 ou 2. Caso for com imagens, evitar imagens superiores a 2Kb

$" Integrar imagens de fundo as páginas Elas dão um toque personalizado e exclusivo ao site. Crie de modo que tenham o menor tamanho possível.

$" Contraste de cores Cuidado na utilização das cores tanto para imagens quanto para o texto, que possam prejudicar a visualização de figuras e principalmente do texto em primeiro plano.

$" Evitar links quebrados Normalmente causam irritação, vamos dizer assim, por parte dos visitastes que tendem a passar para outro site imediatamente.

$" Área da tela utilizada pelas páginas Por padrões internacionais, são utilizados na elaboração de sites a resolução de 800x600 pixels.

$" Imagens Disponha no seu site imagens muito pesadas, superiores a 75Kb, pois a quantidade de informação é muito elevada nas conexões discadas. Evite mais de 10 imagens por página, principalmente para aquelas com tamanho superior a 20Kb

$" Uso de fontes e cores De preferência não utilize a cor branca para texto, o que impedirá aos seus visitantes imprimir suas páginas. Evitar o cansaço visual, atrapalhando o foco na informação existente.

$" Banners Seu visitante com certeza não está olhando sua página para apreciar os banners, evite mais de dois por página.

$" Frames Use de modo que as divisões fiquem transparentes. Elabore gráficos que se estendam pelos frames.

$" Atualizações Este fator demonstra seu empenho em cuidar, manter e incrementar o site, atualize o visual, pelo menos nas páginas principais, no conteúdo do site. Disponha no site a data de atualização.

INTRODUÇÃO: 2 DESENVOLVENDO UMA PÁGINA WEB 7 … · Através de ligações(links), o usuário...

Documents

Transcript of INTRODUÇÃO: 2 DESENVOLVENDO UMA PÁGINA WEB 7 … · Através de ligações(links), o usuário...