HTML

UNIVERSIDADE FEDERAL DE PELOTAS
ndice
INTRODUO: ________________________________________________________________ 2 DESENVOLVENDO UMA PGINA WEB _________________________________________ 7 TTULOS ______________________________________________________________________ 9 CABEALHOS: ______________________________________________________________ 10 PARGRAFOS _______________________________________________________________ 11 DEFININDO FONTES__________________________________________________________ 12 ESTILOS DE TEXTO __________________________________________________________ 13 ACENTOS E CARACTERES ESPECIAIS ________________________________________ 14 QUEBRAS DE LINHA _________________________________________________________ 15 INFORMAES SOBRE A PGINA ____________________________________________ 16 INSERINDO COMENTRIOS EM SUA PGINA __________________________________ 17 LINHAS HORIZONTAIS _______________________________________________________ 18 CONTROLE DE CORES E GRFICOS DE FUNDO _______________________________ 19 ALINHANDO ELEMENTOS DE UMA PGINA ___________________________________ 22 LISTAS ______________________________________________________________________ 24 TEXTO ANIMADO ____________________________________________________________ 28 ENDEREOS_________________________________________________________________ 30 INTERLIGANDO DOCUMENTOS LINKS _______________________________________ 31 IMAGENS GRFICAS _________________________________________________________ 36 INSERINDO SOM _____________________________________________________________ 40 TABELAS ____________________________________________________________________ 42 FRAMES _____________________________________________________________________ 56 FORMULRIOS ______________________________________________________________ 60 UPLOAD DE ARQUIVOS ______________________________________________________ 64 DICAS _______________________________________________________________________ 67
Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc
INTRODUO: Um dos maiores desafios de pesquisa da cincia de computao, dentre outros nestes ltimos anos, a construo de hiperdocumentos e suas respectivas interfaces. A capacidade oferecida de acesso no-linear a informao, os hiperdocumentos conduziram indiretamente composio de ligaes de as quais refletem, melhor que o texto seqencial o faz, o modo humano de organizar o conhecimento[MAENZA, 1994]. Oferecendo a riqueza da multimdia, os hiperdocumentos despertam para uma interpretao mais ampla da motivao e da criatividade. Debruamo-nos sobre a questo da autoria e a leitura de hiperdocumentos, especialmente no tocante interface HomenMquina. A leitura em um hiperdocumento, entendida como um processo descontnuo, e no linear onde, atravs das ligaes, o leitor navega de uma informao e outra, no necessariamente em uma ordem seqencial. Assim como o pensamento , por natureza, associativo, o mecanismo de leitura em um hiperdocumento procura representar este relacionamento associativo por meio de ns de ligaes. O processo de escrita em ambientes de hiperdocumentos, denominado autoria. No envolve somente a composio do texto, mas tambm o esquema da tela e o projeto da interface e o que, talvez seja mais importante: a criao e o gerenciamento de ligaes entre os ns. O conceito de interface aplicado especialmente a informtica, designa um dispositivo que garante a comunicao entre dois sistemas informticos distintos ou um sistema informtico e uma rede de comunicao. Utilizando ferramentas adequadas, para obter-se uma interface com um conjunto de elementos que devem formar um conjunto com unidade, harmonia e coerncia. Esse conjunto deve ter unidade para no apresentar elementos soltos e desconexos, que podem confundir o usurio, levando-o a perder-se no produto, confundindo ou ignorando informaes.
WEB Sua idia inicial foi concebida em 1989, nos laboratrios de CERN (European Laboratory of Particle physics), na Sua. Tim Berners-Lee, seu criador, conheceu a linguagem com o propsito de interligar os computadores do laboratrio e instituies de pesquisa coligadas a ele. O objetivo era Ter uma linguagem que exibia documentos
2 Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc
cientficos de forma simples e fcil de acessar. A Web tornou-se a moda no meio cientfico-universitrio e cresceu rapidamente, essa moda foi rapidamente assimilada pelas universidades americanas. O crescimento estupendo da Web veio com a criao do primeiro
Browser(navegador) grfico, 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 popularizao definitiva da Web. Desde ento o crescimento da Web tem sido exponencial, numa velocidade fantstica. O browser da Netscape tornou-se quase um padro da Web, at que a partir do final de 1995, a Microsoft resolveu entrar no mercado, e colocou o produto Internet Explorer a disposio cerca de 15% da base mundial instalada de navegadores. A Web uma base de dados gigantesca que funciona atravs de hipertexto, que permite acesso a arquivos da Internet de forma grfica. A chave do sucesso da World Wide Web o hipertexto. Os textos e imagens so interligados, atravs de palavraschave tornando a navegao simples e agradvel HIPERTEXTO O termo hipertexto surgiu na dcada de 1960. Significa um texto no-linear, com mais de uma dimenso enquanto que um texto uma coleo de informaes organizada de forma linear, possuindo apenas uma dimenso, a qual deve ser apresentada e recuperada de forma seqencial. No hipertexto, a informao est organizada em uma rede, cujos ns contm informao e esto relacionados por elos. Cada elo est, em geral associado diretamente a uma ncora, que pode ser um boto ou cone, representando a origem de um elo, e ao ativ-la ocorre um salto para um outro n. Quanto a apresentao as ncoras aparecem em geral realadas, ou em cor diferente, na informao que est sendo apresentada na tela. Atravs de ligaes(links), o usurio pode pesquisar apenas os tpicos que lhe interessam e ignorar os que no lhe convm. O hipertexto muito utilizado hoje em dia na multimdia em geral e em pginas na Web.
MULTIMDIA Refere-se a diversos tipos de informao que podem ser editadas e armazenadas em tipos especficos de dispositivos. as apresentaes organizadas de som, imagens grficas estticas, animaes, textos e vdeos em movimento. Esse tipo de informao tem por finalidade esclarecer assuntos, indicar tendncias, informar, formar, demonstrar ou simplesmente divertir.
HIPERMDIA definida pela associao do hipertexto e da multimdia, a qual manipula um conjunto de informaes pertencendo a diferentes tipos de mdia(textos, imagens, sons, animaes e grficos), podendo estas informaes serem recuperadas de forma nolinear atravs de diversos caminhos de acesso disponveis. Em outras palavras, a hipermdia simplesmente uma extenso do hipertexto que incorpora outros tipos de dados alm do texto. HTML - Hiper Text Markup Language a linguagem de marcao de hipertexto, ou seja, e a linguagem na qual so escritas as pginas da Web, interpretada pelo navegador. As informaes esto organizadas na forma de pginas ligadas entre si. Quando se acessa um site, normalmente entra pela porta da frente, onde existe uma mensagem de boas vindas e uma espcie de ndice para as demais pginas. Essa entrada se chama pgina principal, ou home page. Na Web, vamos encontrar tambm outros tipos de documentos alm dessas pginas interligadas. Acessa-se computadores que mantm programas para serem copiados gratuitamente, conhecidos como sendo assim, qualquer usurio pode, somente com o seu mouse, Ter acesso a uma enorme quantidade de informao na forma de textos, imagens, sons, grficos, vdeos, etc..., navegando atravs de palavras chaves e cones. A pgina transferida de um computador remoto para o usurio, onde o browser faz o trabalho de interpretar os cdigos contidos naquele documento e mostra a pgina que o usurio v. A Web est estruturada em dois princpios bsicos: HTTP(Hiper Text Tranfer Protocol) e HTML (Hiper Text Markup Language).
HTTP o protocolo de transferncia de hipertexto, ou seja, o protocolo que permite a navegao na Web, com o simples clicar do mouse sobre o texto(ou imagem) que esteja associado a outro link. Estas ligaes entre as pginas, conhecidas como hiperlinks (ligaes de hipertexto), podem ser de informaes contidas no prprio site, bem como de computadores e empresas em qualquer lugar do mundo. Na Web possvel que uma mquina faa referncia a praticamente qualquer documento disponvel na Internet, e tambm outros tipos de documentos interligadas, alm dessas pginas acessar
podem
computadores que mantm programas para serem copiados gratuitamente, conhecidos como servidores de FTP, grupos de discusso e pginas comuns de texto. Os endereos na web sempre iniciam com HTTP://..., so conhecidos como URL(Uniform Resource Locator) o endereo particular e nico de cada pgina da Web. Uma URL padro possui at trs partes: o domnio(www.terra.com.br),
possivelmente um diretrio ou diretrios e possivelmente um arquivo(web.htm). Um browser um programa navegador de Web. Os mais usados so 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 multimdia acoplados a cada um. Ambos os navegadores, possuem tecnicamente para o usurio leigo pouca diferena. uma questo de escolha. Existem outros navegadores alternativos menos utilizados como o Opera que pequeno, rpido e leve, possui cliente de e-mail e gerenciador de download prprio. Tambm o MSN, novo programa da Microsoft para tornar a Web ainda mais interessante. Funciona como browser, cliente de e-mail, programa de mensagens instantneas, player de som, entre outros recursos. Possui uma interface muito amigvel, com recursos de procura de msica e vdeo, suporta e gerencia mltiplos usurios, e atualizado automaticamente via web. Neoplanet outro Browser alternativo, customizvel e extremamente
Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc 5
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 verso j vem com um programa para download e muito mais. O AWE - Adonay Web Explorer atualmente o web browser com maior nmero de recursos e funes. Multinavegao, bloqueio de janelas PopUps, tradutor web ingls / portugus, zoom, notcias em tempo real, muda cor / imagem de fundo e fontes das pginas, mostra todos os links relacionados, navega em tela cheia, suporta Java, Flash e conexes seguras. importante que os usurios deve sempre usar a verso mais recente de seu navegador para estar sempre atualizado com os novos plugins disponveis para melhor navegabilidade pela Web. Estes navegadores relacionados so totalmente grtis, e podem ser adquiridos em suas empresas ou em inmeros locais disponveis para download na Internet, como o site SuperDownloads no Brasil e o
Download.com internacional. O melhor lugar o seu prprio provedor de acesso.
DESENVOLVENDO UMA PGINA WEB Voc vai precisar: !" Conhecer a linguagem HTML para escrever o cdigo fonte de sua pgina !" Um editor de textos para gerar o seu cdigo fonte (bloco de notas, word, Wordpad) !" Um navegador de internet para visualizar as suas pginas (Netscape, Internet Explorer, Opera) TAGs Os comandos HTML so chamados de TAGs, compreendem de marcas padres que so utilizadas para fazer indicaes a um browsers. Assim como em outras linguagens, os comandos tm uma sintaxe prpria, e seguem algumas regras: #" As TAGs aparecem sempre entre os sinais de menor que(<) e maior que(>); #" Geralmente so utilizadas aos pares, sendo que a TAG de finalizao de um comando qualquer finalizada com a precedncia de uma barra (/). Em geral: <nome da TAG> t e x t o </nome da TAG> onde: <nome da TAG>: indica o incio da TAG </nome da TAG>: indica o fim da TAG Para criar uma pgina Web, voc pode utilizar qualquer editor de texto simples, at mesmo o bloco de notas do Windows. Porm mais prtico 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 opo 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. No esquea da extenso: *.htm ou *.html; 4. Na caixa de texto SALVAR COMO TIPO, selecione todos os arquivos (*.*); 5. Clique em salvar. MODELO BSICO DE PGINA WEB Uma pgina Web criada em HTML, possui trs partes bsicas: estrutura principal, um cabealho e um corpo de pgina. Possui uma estrutura dividida em 4 TAGs bsicas: <HTML> ... <HTML> <HEAD> ... <HEAD> <TITLE> ... <TITLE> <BODY> ... <BODY>
Onde: <HTML> ... <HTML> so usados para delimitar os comandos HTML, indicam o incio 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 seo do cabealho do documento onde sero definidos poucos comandos de linguagem, o mais importante o ttulo que exibido na barra de ttulos do browser. <TITLE> ... </TITLE> Definem o ttulo da pgina que p exibido na barra de ttulos do browser. Estas TAGs devem estar sempre dentro das TAGs <HEAD></HEAD>. <BODY> ... </BODY> Dentro desta TAG esto os elementos da pgina web. W onde esto localizados as os textos, imagens, ligaes com outras pginas, etc... Exemplo:
<HTML> <HEAD> <TITLE> CURSO DE HTML PGINA BSICA </TITLE> </HEAD> <BODY> DESENVOLVENDO PGINAS DE INTERNET </BODY> </HTML>
TTULOS Todo documento em HTML deve possuir um ttulo. De um modo geral aparece em um lugar separado da pgina, na maioria das vezes no alto da tela dos navegadores. Utilizado para identificar o documento. Interessante que possa sugerir claramente o contedo 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:
CABEALHOS: So linhas do documento que so exibidas no browser com letras diferentes do restante do texto chamando a ateno de uma nova seo ou tpico. Sempre que se definir um novo cabealho, uma nova linha inserida em branco aps a sua linha. Ao definir o tamanho de um cabealho, no se est definindo o tamanho da letra, apenas indicado ao navegador de cada usurio 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 nvel 6 (menor nvel) ao 1 (maior nvel). Sintaxe de comando: <Hn> TEXTO DO CABEALHO #" n varia de 1 a 6 #" H1 o maior corpo #" H6 o menor corpo Exemplo: cabealhos.htm <HTML> <HEAD> <TITLE> Cabealhos </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>
</Hn>
10
PARGRAFOS A TAG <P> A TAG responsvel pela quebra de pargrafos a <P> que finaliza o pargrafo e insere automaticamente a um alinha em branco entre pargrafos. Tambm responsvel pelo alinhamento de pargrafos. Sintaxe de comando: <P ALIGN=posio> Texto do pargrafo. Posio pode ser: #" Left: alinhamento a esquerda; #" Center: centralizado #" Right: alinhamento a direita Exemplo: Nome do arquivo: pargrafos.htm <HTML> <HEAD> <TITLE> Alinhamento de Pargrafos </TITLE> </HEAD> <BODY> <P>Este pargrafo utiliza o alinhamento padro dos navegadores de Internet (esquerdo). <P ALIGN=center> Este pargrafo tem o alinhamento centralizado. <P ALIGN=right> Este pargrafo tem o alinhamento a direita. </BODY> </HTML>
11
DEFININDO FONTES A TAG <FONT> Permite que voc insira em sua pgina 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 padro da maioria dos navegadores; FACE=nome: nome da fonte a ser utilizada; $" COLOR=cor: cor da fonte definida em hexadecimal, ou atravs de um nome prdefinido de cores.
$" $"
Exemplo: Formatando_fontes.htm
Observaes: Caso a fonte face indicada para sua pgina no esteja disponvel para o usurio que visitar a sua pgina, a fonte utilizada ento ser a padro do navegador utilizado pelo visitante; Pode-se definir mais de uma fonte face, caso a primeira no esteja instalada no sistema do usurio, o browser reconhece a prxima FACE definida;
Outros exemplos: #" fontes_especiais.htm; #" fontes_especiais2.htm;
12
ESTILOS DE TEXTO Como nos editores de texto, alem dos tamanhos das fontes, voc pode modificar o estilo de texto. Pode-se atribuir o negrito, itlico, sublinhado entre outros, abaixo relacionados: Tabela de estilos: COMANDO Negrito Itlico Sublinhado Strong nfase Typewriter Big Small Sobrescrito Subscrito Pulsante Exemplo: APLICANDO O ESTILO <B> Texto </B> <I> Texto </I> <U> Texto </U> <STRONG> Texto </STRONG> <EM> Texto </EM> <TT> Texto </TT> <BIG> Texto </BIG> <SMALL> Texto </SMALL> <SUP> Texto </SUP> <SUB> Texto </SUB> <BLINK> Texto </BLINK> FUNO Atribui o estilo negrito Atribui o estilo itlico Atribui o estilo sublinhado Semelhante ao estilo negrito Semelhante ao estilo itlico Espao regular ao texto Aumenta a fonte e atribui negrito Reduz e altera a fonte Eleva o texto e eleva o seu corpo Rebaixa o texto e diminui seu corpo Faz o texto ficar pulsante
13
ACENTOS E CARACTERES ESPECIAIS Os arquivos HTML, no podem conter nenhum tipo de formatao ou caracteres especiais(smbolos ou letras acentuadas). Para criar uma pgina com caracteres especiais, deve-se utilizar alguns cdigos especiais que o browser interpreta e substitui por um caractere especfico. 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 cdigos 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 pgina acentos_e_caracteres_especiais.htm, que contem tabela de exemplos
14
QUEBRAS DE LINHA A TAG <BR> Faz uma quebra de linha sem acrescentar espaos extras entre linhas. Finaliza a linha de texto e insere automaticamente uma outra linha em branco. No 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 prxima linha.<BR><BR>O resultado simples. </BODY> </HTML>
15
INFORMAES SOBRE A PGINA A TAG <META> Proporcionam informaes sobre a pgina, para o utilizador e para os motores de pesquisa. Estes tags s necessitam e devem estar presentes na primeira pgina 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 so atualizados manualmente e os spiders so automticos. Deste modo, no Yahoo!, que um index, para que um site seja listado, tem que se preencher um formulrio, envi-lo, e esperar por uma resposta de um responsvel 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 seco "add url" e esperar por uma resposta automtica e quase imediata do robot, a confirmar que o endereo 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 informao disponvel na TAG <META>. NAME: 1. O atributo NAME indica o tipo de informao que o <META> tag apresenta. Pode ter vrios valores, tais como: $" Keywords: indica as palavras chaves da pgina. Exemplo: <META NAME="keywords" CONTENT="HTML, Tags, Atributos"> $" Description: indica uma breve descrio da pgina. Exemplo: <META NAME="description" CONTENT="Uma pgina sobre HTML"> $" Author: indica o autor da pgina. Exemplo: <META NAME="author" CONTENT="Gabriel Augusto"> Visualizando a pgina: http://www.uol.com.br Visualizando o cdigo fonte da pgina do UOL, observe as informaes sobre a pgina neste ponto.
16
INSERINDO COMENTRIOS EM SUA PGINA So utilizados em sua pgina WEB para descrever procedimentos utilizados na criao de sua pgina. O texto de um comentrio no exibido pelo navegador. Alguns navegadores de Internet no reconhecem o uso de TAGs dentro de comentrios, sendo assim quando utilizadas junto ao seu comentrio poder exibir na pgina o seu comentrio. So muito teis na hora de manuteno de uma pgina. Servem como lembretes ou dicas para o programador que far a atualizao da pgina WEB. Sintaxe de Comando: <!Texto do pargrafo --> Exemplo: <HTML> <HEAD> <TITLE> Pgina com comentrios </TITLE> </HEAD> <BODY> Esta pgina contm diversos comentrios    </BODY> </HTML>
Observe que em determinados pontos do cdigo fonte, so inseridos comentrios para prpria orientao do programador da pgina
17
LINHAS HORIZONTAIS A TAG <HR> Insere linhas horizontais no navegador. Este recurso pode ser utilizado para dividir a sua pgina chamando a ateno para algum tpico especfico. Sintaxe de comando: <HR WIDHT=N% ALIGN=Posio 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=posio: posio 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 no 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 pgina: <HR SIZE="05" WIDTH="50%"> Largura 100% da pgina: <HR SIZE="05" WIDTH="100%"> <br> Linhas com alinhamentos - ALIGN - diferentes: Alinhamento a direita da pgina: <HR SIZE="05" ALIGN="RIGHT" WIDTH="80%"> </BODY>
18
CONTROLE DE CORES E GRFICOS DE FUNDO A maioria dos browsers permite a utilizao de cores, apenas 256, mas j o suficiente para voc criar uma pgina com fundo e texto personalizados. As cores so compostas por cdigos RGB(red, green, blue). cada cdigo define a intensidade do vermelho, do verde e do azul, formando uma cor. Cada cdigo varia de 0 a 255, onde 000 equivale ao preto e 255 255 255 equivale ao branco. Devem ser informados no formato hexadecimal. no necessrio decorar os cdigos de uma cor, para isto s verificar a tabela de coresXcdigos em anexo. Para definir cores para sua pgina voc deve utilizar a TAG <BODY> que possui atributos vinculados a ela que personalizam cada pgina de Internet. Pode-se Atribuir RGBs para cor de fundo da pgina, texto e links CORES E ELEMENTOS GRFICOS DE FUNDO Cor de fundo - BGCOLOR: #" a cor do fundo da pgina. 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 seqncia, uma ao lado da outra. Deve ser inseridos a marcao <BODY> e especificar a URL da uma imagem que ser utilizada na pgina. Comando: <BODY BACKGROUND=URL> Corpo da Pgina </BODY>
Exemplo: <body background= "../imagens/fundo1.jpg"> <h3 align="center">IMAGEM DE DE FUNDO<br> BACKGROUND="endereço& quot;</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 no seja prejudicada a leitura do texto. Sempre vale a pena visitar outras pginas que utilizam este recurso para recolher boas idias. Alguns usurios de internet navegam sem a utilizao 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 pgina TEXT=#RRGGBB= a cor do texto, o padro preto; Sintaxe de Comando: <BODY TEXT=#RRGGBB> Corpo da Pgina </BODY>
20
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 pgina.<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 padro azul; !" VLINK=#RRGGBB= a cor dos links visitados, o padro vermelho-prpura; !" ALINK=#RRGGBB= a cor do link ativo, onde o usurio pressionou o boto do mouse, mas ainda no soltou, o padro 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 pgina est com uma cor especial: Lightyellow - RGB:FFFFE0</h3><BR> <h3>A cor do texto : Tomato RGB:FF6347</h3> <BR> LINKs: Greenyellow - RGB:ADFF2F<BR> VLINKs: Aquamarine - RGB:7FFFD4<BR> ALINKs: Mediumblue - RGB:0000CD<BR> </div> </BODY>
21
ALINHANDO ELEMENTOS DE UMA PGINA A TAG <DIV> Permite que voc alinhe horizontalmente qualquer elemento em sua pgina. Esta difere da TAG <CENTER> por permitir alinhamento centralizado. O Alinhamento pode ser left, center ou right. Comando: <DIV ALIGN=posio>Elementos a serem alinhados</DIV> Onde: posio pode ser: #" left: alinhamento a esquerda; #" center: centralizado; #" right: alinhamento a direita O alinhamento padro 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 pgina. <P>Com a TAG DIV voc pode aproveitar o mesmo alinhamento para vrios pargrafos. </DIV> </BODY> </HTML> A TAG <CENTER> Permite centralizar horizontalmente qualquer elemento em sua pgina. O efeito exatamente o mesmo da TAG <DIV ALIGN=CENTER>, porm a TAG CENTER no reconhecida em todos os navegadores. Comando: <CENTER>Elementos a serem centralizados</CENTER>
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 pgina. O efeito exatamente o mesmo da TAG <DIV ALIGN="center"> ELEMENTO A SER CENTRALIZADO </DIV>, porm a TAG CENTER no reconhecida em todos os navegadores.</center> <b></CENTER></b><br> </BODY> </HTML>
23
LISTAS Uma boa forma de organizar as pginas WEB. Podem servir como resumos ou ndices de todo o site, contendo links para as outras pginas criadas por voc ou outras pessoas. TIPOS DE LISTAS: #" Listas no numeradas; #" Listas numeradas; #" Listas de definies; #" Listas intercaladas. #" Listas No Numeradas: A TAG <UL>: Inserem marcadores na frente de cada item. Comando: <UL TYPE=formato> <LI> Tpico 1 <LI> Tpico 2 <LI> Tpico 3 </UL> Onde: 1. <UL>: incio da lista pontuada; 2. TYPE=formato: o formato do marcador pode ser: $" disc: o marcador um ponto (padro utilizado pelos navegadores, no precisa indicar) $" square: o marcador um quadrado $" circle: o marcador um crculo 3. <LI>: tpicos da lista, no e necessrio encerrar com a TAG </LI>; 4. </UL>: fim da lista pontuada.
24
Exemplo: listas_nao_numeradas.htm <HTML> <HEAD> <TITLE> Listas No Numeradas </TITLE> </HEAD> <BODY> <H3>Listas No Numeradas</H3> <UL TYPE="disc"> <LI> TYPE="disc" <LI> Tpico um; <LI> Tpico dois; <LI> Tpico trs. </UL> <UL TYPE="square"> <LI> TYPE="square" <LI> Tpico um; <LI> Tpico dois; <LI> Tpico trs. </UL> <UL TYPE="circle"> <LI> TYPE="circle" <LI> Tpico um; <LI> Tpico dois; <LI> Tpico trs. </UL> </BODY> </HTML> Listas Numeradas: #" A TAG <OL>: Permite inserir em sua pgina uma lista numrica ou alfabtica, com valor pr-definido ou no Sintaxe de comando: <OL TYPE=formato START=n><LI>Tpico 1<LI>Tpico 2<LI>Tpico n</OL> Onde: 1. 2.
<OL>: incio da lista numerada; TYPE=formato: o formato da numerao pode ser: $" 1: lista numrica(no necessrio ser definido); $" A: lista alfabtica com letras maisculas; $" a: lista alfabtica com letras minsculas; $" I: lista numrica com nmeros romanos maisculos; $" i: lista numrica com nmeros romanos minsculos. 3. START=n: o valor inicial da lista numerada; 4. <LI>: tpicos da lista; 5. </OL>: fim da lista numerada.
25
Exemplo: listas_numeradas.htm <HTML> <HEAD> <TITLE> Listas Numeradas </TITLE> </HEAD> <BODY> <H3 align="center">Listas Ordenadas Numeradas</H3> <H4>Lista Numerada Padro:</H4> <OL> <LI> Tpico um; <LI> Tpico dois; <LI> Tpico trs. </OL> <H5>Lista Numerada Padro com START="10":</H5> <OL START="10"> <LI> Tpico um; <LI> Tpico dois; <LI> Tpico trs. </OL> <H5>Lista Alfabtica com Letras Maisculas:</H5> <OL TYPE="A"> <LI> Tpico um; <LI> Tpico dois; <LI> Tpico trs. </OL> </OL> </BODY> </HTML> #" Listas de Definies: A TAG <DL>: So diferentes das outras listas, pois cada item de cada lista possui dois componentes: um tpico e a descrio do tpico. Sintaxe de comando: <DL><DT> Tpico 1<DD> Descrio do tpico 1 <DT> Tpico n <DD> Descrio do Tpico n </DL> Onde: 1. <DL>: incio da lista descritiva; 2. <DT>: tpico da lista descritiva; $" no h limite para o nmero de tpicos; $" no necessrio a TAG </DT>; 3. <DD>: descrio da lista descritiva: $" para cada TAG <DT> existe uma TAG <DD>; $" no necessrio a TAG </DD>; 4. </DL>: fim da lista descritiva.
26
Exemplo: <HTML> <HEAD> <TITLE> Listas Descritivas </TITLE> </HEAD> <BODY> <H3><I>Exemplo de Listas Descritivas</I></H3> <DL> <DT><B>Listas No Ordenadas:</B> <DD>As listas no 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>nmeros</I>&nbspou&nbsp <I>letras</I>&nbsp na frente de cada item. <DT><B>Listas Descritivas:</B> <DD>As listas descritivas ou de grossrio so diferentes das outras listas. Cada item de uma lista descritiva tem dois componetes: um <I>tpico</I> e uma <I>descrio de tpico</I>. </DL> </BODY> </HTML> Listas Intercaladas: #" Pode ser utilizada para voc criar listas hierrquicas, mesclando listas ordenadas e no numeradas. utilizado para melhor organizar a estrutura de tpicos; utilizados como links, mapa de sites.
27
TEXTO ANIMADO O comando MARQUEE orienta o browser a definir o efeito de texto passando na tela para o texto digitado entre o incio e o fim da tag. Permite que uma imagem possa correr de um lado para o outro na pgina tambm. Deve ser utilizado quando voc desejar dar um destaque a uma frase, palavra ou at mesmo a um pargrafo da pgina. Com cautela, sem exageros para no chamar a ateno do usurio ficando voltado somente para o destaque, deixando de lado o restante da pgina. Comando: <MARQUEE> Texto ou imagem </MARQUEE> Atributos: 1. <MARQUEE>: $" abertura da TAG de movimento; 2. ALIGN=posio: Posio em relao 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=direo: Define a direo 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 nmero de vezes. Se n for igual a 1 ou infinite, ele ir passar pelo marquee infinitamente; 11. SCROLLAMOUNT=n:
Controla a velocidade do texto, definindo o nmero 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 rpido o movimento do texto; 13. </MARQUEE>: Encerra a TAG marquee. Visualizando exemplo: Para visualizar o exemplo e necessrio estar com o navegador aberto para execuo da animao.
29
ENDEREOS Normalmente utiliza-se o final da pgina para colocar informaes sobre o autor da pgina, data da ltima alterao e outras informaes que achar necessrio. Para isso utiliza-se: A TAG <ADDRESS> Tudo que fica dentro dela fica em itlico. Comando: <ADDRESS> Informaes 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) 2759023<br> CNPJ: 92.242.080/0001-00 <br> --------------------------------------------------- <br> </ADDRESS> </ADDRESS> </body> </html>
30
INTERLIGANDO DOCUMENTOS LINKS O principal poder do HTML vem da capacidade de interligar partes de um texto, imagens a outros documentos. A interligao entre documentos no se restringe somente as ligaes com outras pginas. Em pginas muito longas onde um assunto tem vrios tpicos, podemos utilizar ndices onde os links tem a funo de interligar os tpicos de um texto e que com apenas um clique em um dos tpicos do ndice, o item exibido. LINKS PARA MESMO DIRETRIO: Voc s precisa especificar o nome do arquivo que ser chamado e a sua extenso. Sintaxe de comando: <A HREF=nome do arquivo.extenso> Texto ou imagem </A> Onde: A: abertura da TAG de link; HREF=nome do arquivo.extenso: deve ser informado o nome completo do arquivo que ser acessado; $" Texto ou imagem: que servir como link; $" /A: encerra a TAG de link.
$" $"
Observao: No deixar espao em branco entre <A> e </A>.
Exemplo:
31
LINKS PARA OUTROS DIRETRIOS OU PASTAS: Para criar links para uma pgina localizada em outros diretrios necessrio 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 diretrios a barra convencional (/); $" O ponto de partida para localizar um arquivo em outro diretrio o atual; $" Para baixar um nvel deve utilizar os sinais ../ ; Exemplo: Neste exemplo foi criado um link na pgina index.htm que acessa a pgina primeira.htm, localizada dentro da pasta pgina.
Para inserir um link na pgina entrada.htm, - localizada dentro da pasta pagina - a pgina index.htm, que esta um diretrio abaixo, temos que descer um diretrio, 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 necessrio indicar a URL do arquivo. URL a abreviatura de Uniform Resource Locator. Tem a funo de especificar a localizao de pginas ou arquivos em servidores da WEB. Composta de duas partes:
#" O protocolo Internet do documento; #" O endereo do servidor da pgina. Comando: <A HREF=protocolo://servidor.arquivo> Texto ou imagem </A>. Onde: protocolo: o tipo de servidor que est sendo acessado; Os mais utilizados so: #" http: Hiper Text Transfer Protocol, um servidor da WWW; #" ftp: File Tranfer Protocol, um servio para a troca de arquivos, programas entre um servidor e um computador remoto; o servidor: o computador que contm a pgina; o arquivo: o nome do arquivo (diretrio e nome do arquivo). O protocolo do servidor deve ser seguido: o Dos smbolos ://; o Do endereo do computador remoto. Exemplo: <body bgcolor="#FFFFFF"> <div align="center"> <h3>LINK PARA OUTROS SERVIDORES</h3> <br> <A HREF="http://www.ufpel.tche.br& quot;><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 PGINA: muito simples. Definem-se sees na pgina, sendo que cada ter um nome que servir de referncia para o link. NCORAS: Para ter links em uma mesma pgina, deve-se criar uma ncora no incio de cada seo que ser acessada por um link. um ponto de referncia ou endereo que ser acessado por um link. Utilizada para marcar o incio de cada seo da pgina. O nome da ncora ser a referncia utilizada pelo link que a acessar. Para criar ou acessar uma ncora deve-se utilizar a TAG de vnculo, com atributos diferenciados.
33
Criando ncoras: Com este atributo voc escolhe um local da pgina para inserir uma ncora. Esta TAG fica invisvel ao usurio. Pode ser visualizada no cdigo fonte. Normalmente utilizado em pginas com mais de uma tela do navegador e inserida no topo do documento <A NAME=nome da seo></A> #" A: abertura da TAG de link; #" NAME=nome da seo: cria o nome da seo, marcando o incio da seo; #" No necessrio 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 usurio que ao clicar neste tipo determinado de link ele ir para o local onde foi inserida uma ncora. <A HREF=#Nome da Seo> Texto ou imagem </A> $" A: abertura da TAG de link; $" HREF=#Nome da Seo: nome da seo que deve ser acessada; $" </A>: encerra a TAG de link IMPORTANTE: O smbolo # indica ao navegador que o link se encontra na mesma pgina. indispensvel o uso de "#. CRIANDO LINKS PARA O SEU E-MAIL: Voc deve informar o seu endereo eletrnico na TAG de LINK. Sintaxe de comando: <A HREF=mailto:endereo> Texto ou imagem </A> $" mailto: informa ao browser que o link para um endereo eletrnico $" endereo: o endereo 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>
34
LINK DE DISPOSIO DE ARQUIVOS PARA DOWNLOADS Basta no link referenciar um arquivo com a extenso *.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 cpia do arquivo e salvamento para o local de destino pr-determinado
Download concludo: - Abrir: executa o arquivo do download; - Abrir pasta: pasta onde foi salvo o arquivo; - Fechar: fecha a janela de download.
35
IMAGENS GRFICAS Atualmente a maioria dos browsers exibe imagens, porm no qualquer tipo de arquivo imagem que deve ser inserido em HTML. Os formatos mais aceitos na WEB so 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 mximo 256 cores e gera arquivos menores , com extenso .gif. este formato muito utilizado para desenhos e grficos. O formato JPEG (Joint Photographic Engineering Group) suporta 16 milhes de cores e pode reduzir o tamanho de uma imagem at dez vezes. Gera arquivos com a extenso .jpg e .jpeg. muito utilizado para fotos. Utilizar imagens de dimenses 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 espao em disco, dependendo do nmero de cores e quadros de animao. Estes cuidados tambm faro a sua pgina carregar mais rapidamente, tornando a visitao mais agradvel. INSERINDO UMA IMAGEM - <IMG SRC=nome do arquivo.extenso> <IMG SRC=nome do arquivo.extenso WIDTH=n HEIGHT=n ALIGN=posio ALT=mensagem BORDER=n> Onde: SRC=nome do arquivo.extenso: o nome do arquivo e sua extenso; Exemplo: imagens_graficas.htm <HTML> <HEAD> <TITLE> Imagens Grficas </TITLE> </HEAD> <BODY> <center> <H2>INSERINDO UMA IMAGEN</H2> <BR> <h3>CANCUN BEACH</h3><BR> <img src="../imagens/cancun_beach.jpg"> </center> </BODY> </HTML>
36
DIMENSIONANDO AS IMAGENS: O tamanho das imagens exibido pelo navegador pode ser alterado. Recurso este muito utilizado para a criao de trumbnails, que so pequenas imagens que servem como links para imagens maiores. O tamanho do arquivo da imagem no alterado. Podemos redimensionar a figura atravs 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 Grficas </TITLE> </HEAD> <BODY> <H2 align="center">Redimensionando<br> Imagens Grficas</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 definio. ALINHAMENTO DA IMAGEM: ALIGN=posio: Em relao ao navegador: $" Right: alinhamento a direita; $" Left: alinhamento a esquerda(padro dos navegadores);
Exemplo: imagens_alinhadaas_navegador.htm
<HTML> <HEAD> <TITLE> Imagens Alinhadas em relao ao navegador </TITLE> </HEAD> <BODY> <h3 align="center"> Imagens Alinhadas em Relao 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 relao 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 Relao 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>
38
DEMAIS ATRIBUTOS ALT=mensagem: Este atributo tem a funo de exibir uma mensagem no lugar da imagem enquanto ela carregada. Quando o navegador no exibe imagem a mensagem exibida em seu lugar. Tambm tem a funo 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>
39
INSERINDO SOM TAG <BGSOUND> - Sem player disponvel ao usurio: Este comando carrega um arquivo de udio como trilha sonora enquanto a pgina esta sendo visualizada. Quando a pgina encerrada a execuo do som tambm finalizada. Comando <BGSOUND SRC=nome_arquivo.extenso LOOP=INFINITE> #" SRC= nome_arquivo.extenso: define o nome de arquivo de udio a ser carregado durante a execuo da pgina. #" 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 pgina. Nota: #" Esta TAG de som pode ser inserida em qualquer ponto da pgina, dentro da marcao <BODY></BODY>; #" Procure no inserir arquivos de udio muito grandes para diminuir o tempo de acesso a pgina para os usurios que tem conexo discada(modem 56Kb). #" Suporta os seguintes formatos de arquivos de udio: o *.wav; o *.midi; o *.au; o *.mp3 TAG <EMBED> - Player visvel ao usurio: Com esta TAG possvel o internauta interagir no som disponvel na pgina. Comando: <embed width="120" height="50" src="nome do arquivo.extenso" 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 informaes #" showdisplay: se 1 exibe informaes sobre o arquivo de midia, se 0 oculta as informaes
40
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>
41
TABELAS Muito utilizadas para organizar as pginas de internet hoje em dia. Tambm para modelar o layout das home pages, organizar dados na web. Pode ser inserido texto, imagens grficas, links. Em primeiro momento voc pode achar difcil a compreenso das TAGs utilizadas nas tabelas, mas isto s num primeiro momento de contato com estes cdigos. Mas depois torna-se muito fcil a sua utilizao e interpretao para corrigir possveis falhas em um editor de HTML qualquer. Pode tambm ser utilizada dentro de outras tabelas, melhorando a disposio dos contedos de sua pgina MARCAES BSICAS 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 clulas, 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 clula </TD><! Aqui foi criada uma clula> <TD>Segunda clula </TD> <TD>Terceira clula </TD> </TR><! Fecha a primeira linha da tabela> <TR><! Abre a segunda linha da tabela> <TD>Primeira clula </TD> <TD>Segunda clula </TD> <TD>Terceira clula </TD> </TR><! Encerra a Segunda linha da tabela> </TABLE><! Encerra a tabela> *Com isto voc j consegue Ter uma idia de como montar suas tabela. O segredo para se conseguir fazer estas tabelas de forma eficiente planejar e ter a idia exata do contedo desta tabela. **Nas clulas da tabela voc pode inserir desde simples frases at figuras inteiras. ***Parmetros podem ser acrescidos s tabelas, tais como : aumentar ou diminuir a largura de uma clula; distanciar as clulas uma das outras; inserir cor de fundo dentro da clula etc.
<TH> </TH>: Table Header Define os ttulos das tabelas. Podem ser posicionados em qualquer clula.Quando inserido como o Table Data, as informaes 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>
43
ATRIBUTOS DE CONTROLE DE TABELAS: WIDTH=valor ou %: Com este atributo possvel alterar a largura da tabela em relao ao navegador. Tambm a largura das clulas, como no exemplo que segue. Para alterar a largura de uma clula da tabela basta acrescentar o parmetro 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 possvel colocar em maior destaque uma determinada tabela. O nmero 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>
<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"&nbsp ; table border="3" width="90%"> <tr> <td width="50%" align="center">Grmio</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">So 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.
45
ALIGN=posio: Este atributo controla o alinhamento do contedo dentro das TAGs 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>P RIMEIRA CLULA</b></td> <td width="147" align="center"><b>S EGUNDA CLULA</b></td> <td width="153" align="center"><b>T ERCEIRA CLULA</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 relao ao navegador, que pode ser: $" ALIGN=left: alinhamento a esquerda (padro, no necessrio especificar); $" ALIGN=center: alinhamento centralizado; $" ALIGN=right: alinhamento a direita.
46
VALIGN=posio: Controla o posicionamento do contedo dentro ds clulas. Pode ser: $" top: alinhamento superior; $" middle: alinhamento centralizado; $" bottom: alinhamento inferior; Pode ser adicionado dentro das TAGs TR,TD, TH. Exemplo: <table border="1" width="474"> <tr> <td width="234" align="center"><b>Controle do posicionamento dos contedos das clulas 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>
47
CELLSPACING=valor em Pixels: Este atributo compreende a distncia entre clulas e linhas. Deve ser adicionado dentro da TAG <TABLE>. Como padro dos navegadores a distncia 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 espao entre o contedo de uma clula e suas bordas em todos os sentidos. aplicado dentro da TAG <TABLE>
48
Exemplo: <table border="1" width="80%" align="center" cellpadding="8"> <tr> <td width="33%" align="center">PRA</td> <td width="33%" align="center">MAMO</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">MELO</td> <td width="34%" align="center">MIRTILO</td> </tr> </table> NOWRAP: sem quebra de linha Este atributo evita a quebra de linha dentro da clula. O texto inserido dentro do campo no 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>Clula com NOWRAP. O texto fica sem quebra de linha.</td> <td width="50%">Ao contrrio desta clula que no foi adicionado, o texto sofre quebra de linha.</td> </tr> </table> *Isto j d uma idia do funcionamento geral das tabelas na WEB. Muito dos alinhamentos que encontramos na Internet feito por intermdio de tabelas.
**Voc tambm pode usar todos os outros recursos j vistos de HTML para otimizar o uso de tabelas. ROWSPAN=n: Define quantas linhas uma mesma clula pode abranger. Por padro, na maioria dos navegadores de internet cada clula 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 clula pode abranger. Por padro, na maioria dos navegadores de internet cada clula adicionada em uma tabela corresponde a uma coluna. Pode ser aplicado em TH ou TD, proporcionando a mesma abrangncia.
50
Exemplo: tabelas_colspan.htm <table border="1" width="80%" align="center"> <tr> <td width="24%" colspan="3">CLULA 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 clula 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>
51
COLOCANDO UMA IMAGEM DE FUNDO NAS TABELAS Um recurso parecido com a cor de fundo , colocar uma imagem como fundo de uma tabela uma tcnica muito usada. Atravs do complemento BACKGROUND dentro da tag TABLE , basta indicar qual o endereo e o nome da figura.
Exemplo: <TABLE BACKGROUND="nome do arquivo.extenso" 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=endereo/nome da figura.extenso> </TD> </TR> </TABLE> Claro que voc deve usar com muito bom senso este artifcio da tag <TABLE>, pois nem sempre uma moldura em uma figura define um bom layout (aparncia) na sua home-page.
52
FORMATANDO LINHAS INTERNAS RULES=complementos Para escolher as linhas internas que sero mostradas dentro da tabela , usamos o atributo RULES , dentro da tag <TABLE> . Os complementos desse atributo so : 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">Ctia</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 visualizao das linhas verticais internas entre cada clula da tabela. No dedixando de permitir a organizao do contedo interno das tabelas.
$"
Exemplo: tabelas_rules_rows.htm <table border="2" RULES="rows" 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%">lapizeira</td> <td width="25%">calculadora</td> </tr> <tr> <td width="25%">tesoura</td> <td width="25%">pincel</td> <td width="25%">lpis</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%">lpis</td> <td width="25%">borracha</td> </tr> </table>
54
Observao: As tabelas so um recurso de modelagem das home-pages hoje em dia. Alguns comandos HTML no 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 no reparou nenhuma diferena no uso destes navegadores para nossos exemplos, a questo que para tabelas mais complexas, com alinhamentos mais precisos cada navegador interpreta estes comandos HTML de tabelas de forma diferenciada. Um exemplo tpico 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 padronizao de seus navegadores. Sendo assim, quando voc construir tabelas deve sempre levar em conta em qual navegador voc dar preferncia para rodar a sua pgina. Por isso nunca demais deixar claro sua home-page em qual navegador ela roda melhor a sua formatao.
55
FRAMES um recurso que permite dividir uma pgina de internet em outras, na mesma pgina. Nada mais que uma pgina que chama outras na pgina inicial que um documento html que contm frames. Tambm chamados de moldura. Alguns programas como o Macromedia Dreamweaver, por exemplo, em portugus. 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 pgina de internet diferente, a ser apresentada em cada frame. Onde cada pgina de uma frame interage com outra. Normalmente utilizado na pgina de abertura (index.htm). Estrutura de um frame So utilizados um conjunto de TAGs, cada qual com sua funo: <FRAMESET>: a TAG de insero para a elaborao de um conjunto de frames com seu elementos. O FRAMESET aceita os atributos COLS e ROWS, referentes a diviso das janelas que pode ser horizontal ou vertical. E internamente s podem ser utilizadas as marcaes FRAMESET, FRAME ou NOFRAMES. Atributos utilizados: #" COLS=colunas, largura: Define o nmero de colunas a ser utilizado, o valor pode ser em pixels ou porcentagem. neste atributo que definido o nmero de quadros usados em um frame. #" ROWS=linhas, altura: Tem a mesma funo 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. No utilizada a Tag de encerramento </FRAME>, pois no necessita. Define cada janela contida em um rea, no necessita da TAG de finalizao (/FRAME). Atributos utilizados: #" SRC=URL: Endereo do arquivo e extenso 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.
56
#" MARGINWIDTH=valor: Controla as margens de cada frame, a direita ou esquerda. Distncia entre os contedos de cada pgina e as margens da janela. #" MARGINHEIGHT=valor: Tem a mesma funo do MARGINWIDTH, s que controla as margens superiores e inferior. #" SCROLLING=yes, no ou auto: um atributo opcional. Define se uma janela deve ou no possuir barra de rolagem. O padro utilizado, caso no especificar auto, sendo assim o seu navegador ir aplicar quando neceessrio. #" NORESIZE: Este atributo no possue complementos. Quando no adicionado a TAG <FRAME>, o usurio poder alterar o tamanho das janelas, movendo as bordas das janelas com o cursor. Por padro todas as janelas podem ter seu tamanho alterado, mas bom colocar este atributo para no modificar o layout de sua pgina. <NOFRAMES>: Esta TAG utilizada para informar a alguns usurios de que seu navegador de internet no suporta FRAMES. Hoje em dia a maioria dos navegadores no tem este problema, como os antigos navegadores IE 2.0. Permite a navegao em primeira pgina somente. Sendo assim colocar as informaes de como atualizar o navegador do usurio para poder visualizar a sua pgina corretamente. Esta TAG deve ser encerrada com </NOFRAMES> e inserida dentro de frameset. Exemplo: <FRAMESET> <NOFRAMES> Informaes a serem dispostas aqui sobre a impossibilidade de navegar com frames em uma pgina. </NOFRAMES> </FRAMESET> INTERLIGANDO DOCUMENTOS ENTRE FRAMES: A marcao: TARGET=complementos: Utilizada opcionalmente na TAG de links, permite controlar o alvo em que uma determinada pgina ir abrir, ou seja, em que frame especfico 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. No necessrio 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 pgina indicada por ele;
57
EXEMPLO USO DE FRAMES: Criar uma pgina 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_2.htm
Nome: frame_1.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 (Pgina 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 Pgina</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> PGINA INICIAL </font> </div> </body> </html>
58
INTERLIGANDO OS DOCUMENTOS PARA A PGINA COM FRAMES: Arquivo: frames.htm <html> <head> <title> *** PGINA 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 no comporta frames <br><br> Atualize a verso do seu navegador: <br><br><a href="http://d ownload.micr osoft.com/do wnload/ie6sp 1/finrel/6_sp 1/ W98NT42K MeXP/PTBR/ie6setup. exe"> --CLIQUE AQUI --</a> </noframes> </frameset> </html>
59
FORMULRIOS um dos recursos mais interessantes em linguagem HTML. Permitem ao usurio de web interagir com o servidor, enviando informaes para o provedor do servio. FINALIDADES DOS FORMULRIOS: !" Venda de produtos; !" Cadastro on-line; !" Pedidos de tele-entrega; !" Reservas em Hotis; !" Solicitao de servios em geral; !" Troca de informaes entre usurios e servidores; Para melhor compreender as notaes utilizadas nos formulrios, primeiro precisamos nos familiarizar melhor com o HTML. Podemos ter tambm mltiplos formulrios em um nico hiperdocumento, certificando-se apenas de que as TAGs <FORM> e </FORM> no se sobrepem. Se um formulrio possuir apenas um campo de entrada de texto, ao teclar ENTER aps inserir determinada informao, o formulrio ser submetido, ou seja, o navegador ir interpretar como se o usurio estivesse acionado o boto de SUBMIT. Para isso utilizar a tecla TAB ou o mouse. Comandos de formulrios So basicamente trs: #" TEXTAREA: define uma rea onde o usurio poder digitar linhas de texto #" SELECT: define opes em um quadro de rolagem, uma lista drop down, permitindo que o usurio selecione a opo desejada. #" IMPUT: definem botes e caixa de seleo, botes para limpar e enviar dados, linhas de texto, etc. As TAGs de um formulrio devem ser iniciadas <FORM> e finalizadas </FORM>. Os comandos de um formulrio devem ser inseridos entre essas TAGs, os quais possuem seus prprios atributos. Comando Geral: <FORM> Define o incio do formulrio Atributos: METHOD= So dois: - POST: o mais utilizado pois envia cada informao de forma separada da URL. Com este mtodo 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 contm informaes para o envio de dados do seu formulrio.
Entre as TAGs do formulrio, so inseridas as TAGs TEXTAREA, SELECT e INPUT. Neste ponto sero inseridas as linhas de comando para o seu formulrio, seguidas da rotina fornecida pelo provedor. </FORM> Finaliza o formulrio TAGs do formulrio: INPUT uma opo para a reunio de informaes, tais como: #" Campos de senha; #" Botes para marcar; #" Caixas de seleo; #" 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 usurio tais como nome, endereo, telefone, cidade, etc <INPUT TYPE=text NAME=telefone SIZE=10 MAXLENGTH=10> #" NAME: nome obrigatrio; #" SIZE: tamanho do campo visualizado no formulrio; #" MAXLENGTH: nmero mximo 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 no aparecem na tela do navegador quando digitados. Por exemplo as senhas. <INPUT TYPE=password NAME=senhas SIZE=15 MAXLENGTH=15> #" NAME: nome obrigatrio; #" SIZE: tamanho do campo visualizado no formulrio; #" MAXLENGTH: nmero mximo de caracteres, a ser determinado para o campo.
61
CHECKBOX Define uma caixa de seleo para o visitante marcar a opo desejada.
<INPUT TYPE=checkbox NAME=opera VALUE=sim> #" NAME: nome obrigatrio; #" VALUE: valor definido para resposta quando selecionado este o item. RADIO
Tambm define uma caixa de seleo, mas que s permite ao usurio selecionar uma das opes.
<INPUT TYPE=radio NAME=nota VALUE=excelente> Excelente #" NAME: define o nome dos dados, obrigatrio. Os itens para seleo devem ter o mesmo NAME; #" VALUE: valor retornado ao autor quando um determinado nome for escolhido. * Voc pode ter diferentes caixas de seleo CHECKBOX em um mesmo formulrio, desde que tenham NAMES diferentes. HIDDEN Com este atributo as informaes dispostas ficam ocultas. Tem a funo de interagir por exemplo com o usurio a preencher um determinado campo que voc determinou obrigatrio. De um modo geral voc configura a interatividade do formulrio com o usurio e tambm a forma de recebimento dos formulrios preenchidos na sua pgina por seus visitantes. Tudo vai depender do seu provedor, das opes que ir dispor para estes fins. <INPUT TYPE=hidden NAME= VALUE= > #" NAME:define o nome dos dados. Obrigatrio. #" VALUE: pode indicar destinos, ou campos obrigatrios utilizando seu nome. RESET Um boto inserido e tem a funo de apagar os dados digitados no formulrio. <INPUT TYPE=reset VALUE=apaga> #" VALUE: define o nome que aparecer no boto.
62
SUBMIT Um boto inserido e tem a funo de submeter as informaes digitadas no formulrio para o servidor. <INPUT TYPE=submit VALUE=enviar> #" VALUE: define o nome que aparecer no boto. SELECT Permite definir uma lista de opes, 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: obrigatrio, serve para identificao da lista; #" OPTION: tem da lista; #" MULTIPLE: com este atributo a lista aparecer sempre aberta; #" SELECTED: indica como valor padro da lista; #" VALUE: valor a ser retornado ao servidor TEXTAREA Insere uma caixa de texto com um nmero prdeterminado de linhas e colunas. Tem a finalidade de o usurio 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 padro digite aqui seus comentrios. </TEXTAREA> #" NAME: obrigatrio, pois define o nome dos dados inseridos #" ROWS: nmero de linhas; #" COLS: nmero de colunas; #" VALUE: no obrigatrio, indica qual o texto ser referenciado ao autor
63
UPLOAD DE ARQUIVOS Hospedando o site: Os programas de ftp fazem a conexo do seu micro com o micro do provedor para que voc possa transmitir o site ou atualizaes feitas em pginas do site para a internet. Ao terminar de construir o site voc precisa transferir todas as pginas que construiu para o provedor de acesso onde vai hospedar o site. atravs dele que qualquer usurio conectado a internet pode navegar no site. Na internet, existem inmeros 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 cpia 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. Alm do programa de FTP, voc vai precisar saber o host address do provedor, ter um login (nome de acesso) e uma senha. O trs sero necessrios para configurar o programa de FTP de forma que ele possa fazer a transmisso. 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 pgina na Web: Coloque o nome de index.htm no arquivo principal de sua home page: Isto facilita o acesso sua pgina, simplificando o endereo 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. Alm disso, caso algum tente acessar sua pgina pelo endereo exemplificado anteriormente, e voc no tenha um arquivo index, o servidor exibir a relao de todos os arquivos contidos no seu diretrio. Use sempre letras minsculas nos nomes dos arquivos e sem acentos: Os sistemas operacionais compatveis com Unix, utilizados na maioria dos servidores Web interpretam caracteres maisculos e minsculos de maneira diferente. Ou seja, os arquivos chamados index.htm, Index.htm e index.HTM so considerados trs arquivos diferentes. Esta a causa principal de links que no funcionam e imagens que no carregam quando a pgina transferida para o servidor. Evite o uso de acentos e espaos em branco nos nomes de arquivos O uso de caracteres acentuados e espaos em branco tambm pode causar problemas na transferncia dos arquivos, ou exibir o endereo de sua pgina de maneira estranha no browser do visitante. Evite os acentos, e em caso de nomes longos use o sublinhado ( _ ) ao invs do espao para separar palavras.
UPLOAD DOS ARQUIVOS DO SITE Para que outras pessoas possam acessar sua pgina atravs da Internet preciso colocar os arquivos em nosso servidor Web, localizado no Centro de Informtica da UFPel, por exemplo. Para realizar a transferncia utiliza-se um programa de FTP (Protocolo de Transferncia de Arquivos). Utilizando o programa WS-FTP: Execute o arquivo ws_ftp32 Clique aqui para descompactar
Informa o local de descompactao do arquivo e que ser numa pasta chamada WS-FTP.
Altera o local de descompactao dos arquivos.
Uma pasta chamada WS-FTP ser criada em seu desktop (rea de trabalho)
Clique aqui para iniciar o programa
Abra esta pasta e d um duplo clique no cone WS_FTP95 para iniciar o prgrama.
Ser exibida a tela de conexo. No campo HostName/Address, indique o endereo do servidor. No campo User ID digite seu username (seu nome de usurio na UFPel - a parte que vem antes de @ufpel.tche.br, por exemplo) e clique em OK. Se a conexo 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.
65
Pronto, voc est conectado ao servidor. Na janela da esquerda, voc visualiza os arquivos gravados em seu disco rgido, enquanto que a janela da direita mostra os arquivos gravados na sua rea de disco na Minerva. Se for sua primeira conexo, a janela da direita deve estar em branco - no se preocupe se houverem alguns arquivos de configurao, entretanto. Para inserir novas pastas ou subdiretrio clique no boto 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 no h nada na pasta que voc acabou de criar. Agora localize, na janela da esquerda, os arquivos de sua pgina 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 boto --> entre as duas janelas, indicando que voc quer transferir os arquivos da janela da esquerda para a da direita. Os arquivos aparecero na janela da direita quando a transferncia se completar. Agora voc j pode testar sua pgina. Se tudo estiver correto sua pgina j deve estar acessvel de qualquer parte do mundo! Se no quiser transferir mais nenhum arquivo, retorne tela do WS-FTP e clique em Close para encerrar a conexo, e em Exit para fechar o programa.
66
DICAS Voc deve indicar aos visitantes do seu site com contedos atualizados para que voc os tenha sempre retornando. Com isso seu site ganhar muitas visitas, sempre. Criar uma tela de abertura ou apresentao dinmica do site. Evitar arquivos pesados, para carregamento rpido da pgina; $" Evitar a construo de pginas com mais de duas telas verticais: Esta regra deve ser seguida pelo menos para as pginas principais, normalmente as que servem de ndice; $" Carregamento rpido de suas pginas: Garantir a exibio de texto e alguma imagem em menos de 15 segundos $" Barra de navegao nas pginas: A elaborao de uma barra de navegao para cada seo do site, com links para retornar as pginas 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 pginas Elas do um toque personalizado e exclusivo ao site. Crie de modo que tenham o menor tamanho possvel. $" Contraste de cores Cuidado na utilizao das cores tanto para imagens quanto para o texto, que possam prejudicar a visualizao de figuras e principalmente do texto em primeiro plano. $" Evitar links quebrados Normalmente causam irritao, vamos dizer assim, por parte dos visitastes que tendem a passar para outro site imediatamente. $" rea da tela utilizada pelas pginas Por padres internacionais, so utilizados na elaborao de sites a resoluo de 800x600 pixels. $" Imagens Disponha no seu site imagens muito pesadas, superiores a 75Kb, pois a quantidade de informao muito elevada nas conexes discadas. Evite mais de 10 imagens por pgina, principalmente para aquelas com tamanho superior a 20Kb $" Uso de fontes e cores De preferncia no utilize a cor branca para texto, o que impedir aos seus visitantes imprimir suas pginas. Evitar o cansao visual, atrapalhando o foco na informao existente. $" Banners Seu visitante com certeza no est olhando sua pgina para apreciar os banners, evite mais de dois por pgina. $" Frames Use de modo que as divises fiquem transparentes. Elabore grficos que se estendam pelos frames. $" Atualizaes Este fator demonstra seu empenho em cuidar, manter e incrementar o site, atualize o visual, pelo menos nas pginas principais, no contedo do site. Disponha no site a data de atualizao.
$" Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc 67

HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML

Enviado por

Direitos autorais:

Formatos disponíveis

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

UNIVERSIDADE FEDERAL DE PELOTAS

Download.com internacional. O melhor lugar o seu prprio provedor de acesso.

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Outros exemplos: #" fontes_especiais.htm; #" fontes_especiais2.htm;

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Verificar a pgina acentos_e_caracteres_especiais.htm, que contem tabela de exemplos

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

Observao: No deixar espao em branco entre <A> e </A>.

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc

UNIVERSIDADE FEDERAL DE PELOTAS

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc