Académique Documents
Professionnel Documents
Culture Documents
HTML
HTML
NDICE
INTRODUO 1. O QUE A LINGUAGEM HTML? 2. O QUE UM DOCUMENTO HIPERTEXTO? 3. ESTRUTURA GERAL DE UM DOCUMENTO HTML 4. CABEALHOS 5. PARGRAFOS E QUEBRAS DE LINHA 6. FORMATANDO TEXTOS 6.1. Tags Fsicas de Formatao 6.2. Tags Lgicas de Formatao 6.3. Alterando o tamanho da fonte 7. 8. CARACTERES ESPECIAIS LISTAS 8.1. Listas Ordenadas 8.2. Listas No Ordenadas 8.3. Listas de Definio
9. LINKS DE HIPERTEXTO 10. URLS 11. LINKANDO SEES DE UMA PGINA 11.1. Criando uma ncora 11.2. Criando um link para a ncora 11.3. Linkando arquivos locais 11.4. Linkando arquivos de outros diretrios 11.5. Linkando aquivos de outros computadores 12. IMAGENS 12.1. Opes importantes da tag <IMG> 12.2. Usando imagens como links 12.3. Links para imagens 13. CORES E PADRES DE FUNDO 13.1. Backgrounds com imagens 14. REFINANDO A PGINA 14.1. Alinhando pargrafos 14.2. Alinhando o texto com a tag <DIV> 14.3. Alinhando cabealhos 14.4. Bordas de imagens usadas como links 14.5. Melhorando as Listas Ordenadas
HTML
15. TABELAS 15.1. Criando uma tabela simples 15.2. Alterando as bordas da tabela 16. TPICOS AVANADOS 16.1 Frames 16.2 Folhas de Estilo 16.3 Formulrios 17. HOSPEDAGEM 17.1 Como hospedar 17.2 Utilizao de FTP Cliente GLOSSRIO
HTML
INTRODUO
Esta apostila tem como um de seus objetivos, servir de apoio ao curso HTML oferecido pela Seo Tcnica de Informtica da Faculdade de Filosofia, Letras e Cincias Humanas da Universidade de So Paulo, e tambm dar um embasamento tcnico a um estudo mais detalhado sobre o assunto. Outro objetivo fornecer uma viso geral dos recursos mais importantes, permitindo que o usurio possa iniciar o uso desta linguagem. Assumimos que o usurio tenha conhecimentos bsicos sobre Windows e Internet. A inteno mostrar, atravs de exemplos, usos prticos de HTML. Vale lembrar que um melhor aproveitamento, demanda por parte do usurio um grande empenho para aprofundar-se nas peculiaridades da linguagem em estudos individuais.
HTML
HTML
HTML
Lembraremos trs coisas: - Podemos colocar comentrios em qualquer parte do programa, para isso basta colocarmos o mesmo dentro de <! Aqui um comentrio... >. - Espaos em branco so ignorados pelo interpretador HTML, portanto o cdigo acima poderia ter sido escrito da seguinte forma:
<HTML><! **** Isto um comentrio *****><HEAD><TITLE>Meu primeiro documento HTML</TITLE></HEAD><BODY><!**** Isto um outro comentrio **** >Textos e mais textos, imagens, tabelas etc...</BODY></HTML>
Isto certamente economiza espao em disco, porm, trata-se de uma maneira muito prolixa de programar e muito complexa de se entender. - As tags HTML no so sensveis caixa, ou seja, tanto faz escrever <HTML>, <Html>, <html>, <HtMl> etc. Como sugesto escreva todas as tags em caixa alta (letras maisculas). O corpo do documento todo texto e imagens, hiperlinkados ou no, contidos entre as tags <BODY> e </BODY>. a pgina propriamente dita, aquilo que ser mostrado na tela do monitor. Veremos, aqui, como formatar o seguinte: Textos de cabealho ou de titulamento (headings)
HTML
Pargrafos de texto Listas de itens (lists) Listas de definio (definition lists) Links e ncoras de hipertextos (links) Imagens (images) Links utilizando imagens
HTML
4. CABEALHOS
Apesar de no ser exigido, uma boa prtica escrever seus documentos de forma que os nveis dos tpicos e subtpicos reflitam sua organizao. Por exemplo, o primeiro tpico deveria ter nvel 1, subtpicos comeariam com nvel 2 e assim por diante. A tag de cabealho definida pelo par <Hn>...</Hn> onde n representa seu nvel, que varia de 1 at 6. Exemplo:
<HTML> <HEAD> <TITLE>Titulo </HEAD> <BODY> <H1> este o <H2> este o <H3> este o <H4> este o <H5> este o <H6> este o </BODY> </HTML>
da pagina</TITLE> primeiro nvel de cabealho</H1> segundo nvel de cabealho</H2> terceiro nvel de cabealho</H3> quarto nvel de cabealho</H4> quarto nvel de cabealho</H5> quarto nvel de cabealho</H6>
As tags de cabealhos inserem, alm do texto, uma linha em branco antes e depois do texto. Existe, tambm, a tag <HR> que usada para inserir uma linha horizontal no local onde foi especificada. Esta tag no precisa ser fechada, isto , no preciso utilizar um par <HR>.</HR>.
HTML
resultaria em: Este o primeiro pargrafo Este o segundo pargrafo Se no tivesse colocado a tag <P>, o resultado seria este: Este o primeiro pargrafoEste o segundo pargrafo Ou seja, voc no obteria a separao entre os dois pargrafos nem a quebra de linha. Caso queira apenas quebrar a linha, voc deve inserir a tag <BR>. Esta tag tambm no precisa ser fechado, isto , no precisamos utilizar um par <BR>.</BR>. A linguagem HTML permite definir formatao de textos, fsicas e lgicas. Na tela do monitor eles podero ter o mesmo resultado. Entretanto, sua utilidade ficar mais evidente aps a leitura do que se segue.
HTML
10
6. FORMATANDO TEXTOS
6.1. Tags Fsicas de Formatao
Todas as tags so contenedores: <B>.</B>: texto em negrito. <I>.</I>: texto em itlico. <TT>.</TT>: texto escrito com alguma fonte monoespaada, geralmente Courier. <U>.</U>: texto sublinhado. <SUP>.</SUP>: eleva o texto e diminui seu corpo. Texto sobrescrito <SUB>.</SUB>: rebaixa o texto e diminui seu corpo. Texto subscrito Exemplo:
<BODY> Meu caro surfista, <B>nao se esqueca</B> de configurar as fontes de seu <I>browser</I>, <U>antes</U> de iniciar seu trabalho. Utilize como segunda fonte a Courier <TT>monoespaada</TT>. </BODY>
resultaria em: Meu caro surfista, nao se esquea de configurar as fontes de seu browser, antes de iniciar seu trabalho. Utilize como segunda fonte a Courier monoespaada.
<CODE>...</CODE>
Utilizada para relacionar o cdigo-fonte de programas. Geralmente ser visualizado em fonte monoespaada.
<STRONG>...</STRONG>
Utilizada para dar nfase especial a um trecho de texto. Geralmente ser visualizado em fonte negritada.
<DFN>...</DFN>
Utilizada para destacar um definio. Geralmente ser visualizado em fonte itlica.
<CENTER>...</CENTER>
Utilizada para centralizar um texto na tela.
<PRE>...</PRE>
Permite criar textos pr-formatados semelhantes aos produzidos em editores de texto. Espaos em branco, marcas de tabulao e quebras de linha so reconhecidos e colocados nos respectivos pontos de insero. Textos pr-formatados so representados pela fonte monoespaada definida pelo usurio. Dentro de um texto pr-formatado: permitido utilizar links e ncoras. Entretanto, no existe certeza de como o browser interpretar essas marcaes.
HTML
11
A tag <P> no deve ser utilizado. No devem ser usados outros comandos de formatao, tais como os de listas e de cabealhos. Exemplo:
<HTML> <HEAD> <TITLE>Titulo da Pagina</TITLE> </HEAD> <BODY> <PRE> Diretrio de arquivo EXEMPLO: EXEMPLO1.DOC 5,760 bytes 18/09/95 EXEMPLO2.DOC 13,280 bytes 15/09/95 EXEMPLO3.DOC 4,562 bytes 21/08/95 IMAGEM1.GIF 143,218 bytes </PRE> </BODY> </HTML>
que resultaria na seguinte representao na tela: Diretrio de arquivo EXEMPLO: EXEMPLO1.DOC EXEMPLO2.DOC EXEMPLO3.DOC IMAGEM1.GIF 5,760 bytes 18/09/95 13,280 bytes 15/09/95 4,562 bytes 21/08/95 2:34 pm 7:45 pm 6:19 am 10:56 pm
<ADDRESS>.</ADDRESS>
Formata informaes tais como o endereo, a assinatura e a autoria de quem publicou a pgina. Normalmente, estes dados so colocados no final de um documento e, geralmente, sero visualizados em itlico. Exemplo:
<ADDRESS> Pgina atualizada em: 13/01/03.<BR> Criada por Antonio Joo<BR> Email: <A HREF="mailto:goncalves@hotmail.com.br">antonio@hotmail.com.br</ A> </ADDRESS>
O resultado seria: Pgina atualizada em: 13/01/03. Criada por Antonio Joo Email: antonio@hotmail.com.br
HTML
12
O resultado seria:
fontes e mais fontes...
Uma novidade vista aqui que algumas tags aceitam opes para definir alguma caracterstica referente propria tag. No caso da tag <FONT> sua opes so: SIZE=n - Esta opo especifica o tamanho da fonte utilizada; FACE="name"- Esta opo permite que seja definida uma fonte diferente para o texto; COLOR=cor - Esta opo especifica a cor do texto. Seu valor pode ser especificado pelo cdigo hexadecimal ou, para algumas cores, pelo seu nome em ingls (blue, black, white etc.). Uma relao com alguns cdigos de cores pode ser vista no captulo 13. Cores e Padres de Fundo.
HTML
13
7. CARACTERES ESPECIAIS
No recomendvel digitar caracteres acentuados e smbolos tipogrficos especiais diretamente em strings ou em valores de opes. Se fizer isto, os browsers podem trunc-los ou representar outros caracteres especiais. Exemplo: Se voc escrever:
<OL> <LI>Este um pargrafo </OL>
o resultado na tela, usando algum navegador poderia ser: Este / um parWgrafo Para obter a representao correta, voc ter de utilizar caracteres-entidade padronizados pela ISO. No exemplo anterior, o correto seria codificar o seguinte:
<LI> Este é um parágrafo</LI>
e o resultado na tela, seria: Este um pargrafo Segue abaixo uma relao com os caracteres-entidades mais utilizados. Alm desses caracteres, existem seis caracteres de escape importantes.
Obs.: Os browsers Navigator 4.0 ou superior e Internet Explorer 5.0 ou superior reconhecem os caracteres especiais sem a necessidade de colocarmos o seu cdigo.
HTML
14
8. LISTAS
A linguagem HTML permite definir trs tipos distintos de listas: ordenadas, no ordenadas e uma especial, chamada lista de definio. As listas ordenadas so numeradas. As listas no ordenadas utilizam um marcador para demarcar cada uma das suas linhas.
HTML
15
O prximo exemplo produz uma lista endentada. Voc pode endentar tantas listas quantas quiser, desde que envolva cada nvel de endentamento com <OL></OL> ou <UL></UL>.
<HTML> <HEAD> <TITLE>Titulo da Pagina</TITLE> </HEAD> <BODY> <OL> <LI> Primeiro item de uma lista endentada. <LI> Segundo item de uma lista endentada. <UL> <LI> Terceiro item de uma lista endentada. <LI> Quarto item de uma lista endentada. </UL> <LI>Quinto item de uma lista endentada. </OL> </BODY> </HTML>
Observe que a numerao das listas obedece ao nvel de encadeamento das respectivas linhas. Outra coisa interessante que as tags de listas foram uma quebra de linha automaticamente.
HTML
16
Uma lista de definio um tipo especial de lista extremamente til. Ela permite criar diagramaes endentadas em vrios nveis, sem que sejam colocados smbolos especiais na frente de cada uma de suas linhas. Exemplo:
<HTML> <HEAD> <TITLE>Titulo da Pagina</TITLE> </HEAD> <BODY> <DL> <DT>HTML:</DT> <DD>HyperText Markup Language</DD> <DD>Linguagem de Marcadores de Hipertexto</DD> <DT>URL:</DT> <DD>Uniform Resource Locator</DD> <DD>Endereo Uniforme de Recurso</DD> <DT>HTTP:</DT> <DD>HyperText Transfer Protocol</DD> <DD>Protocolo de Transferncia de Hipertexto</DD> <DT>FTP:</DT> <DD>File Transfer Protocol</DD> <DD>Protocolo de Transferncia de Arquivos</DD> </DL> </BODY> </HTML>
Fica fcil perceber que uma lista de definio utiliza o par <DL> </DL> para estabelecer esta relao. Ela tambm permite encadeamentos. Existem dois nveis adicionais de formatao: <DT> estabelece a frase a ser definida e <DD> a definio propriamente dita.
HTML
17
9. LINKS DE HIPERTEXTO
Uma das grandes vantagens da linguagem HTML a possibilidade de linkar (ligar) um documento a um outro documento quer esteja este no mesmo computador ou em outro computador em qualquer lugar do mundo. Este link poder ser feito no s para outro arquivo HTML mas, principio para qualquer tipo de arquivo, seja ele uma imagem, um arquivo de som, um arquivo de programa etc. A tag utilizada para criar links <A HREF>.</A> que basicamente tem a seguinte sintaxe:
<A HREF=URL do link>Texto que vai servir como link</A>
Exemplo:
<HTML> <HEAD> <TITLE>Titulo da Pagina</TITLE> </HEAD> <BODY> <A HREF="http://www.fflch.usp.br/sti">Site da STI</A> <A HREF="http://www.fflch.usp.br">Site da FFLCH</A> <A HREF="http://www.fflch.usp.br"><IMG SRC="../imagem/fflch.gif"></A> <A HREF="http://www.usp.br">Site da USP</A> </BODY> </HTML>
possvel, como no ltimo exemplo, usar uma imagem como link e assim sendo quando a imagem clicada o endereo definido ser alcanado. Praticamente possvel utilizar qualquer pedao do arquivo HTML para servir como link, esteja ele em uma tabela, em uma lista etc. Na linguagem HTML existe uma outra tag utilizada para marcar um pedao de um documento para ser utilizado em conjunto com a tag <A HREF>. A tag <A NAME> define um local no documento atribuindo um nome para o mesmo. Exemplo:
<A NAME="Capitulo10">Captulo 10 Back up</A>
Assim podemos criar um link diretamente para esse pedao do documento utilizando a tag <A HREF>. Exemplo:
<A HREF= "www.fflch.usp.br/curso/windows#Capitulo10">Captulo 10</A>
HTML
18
10. URLS
Uniform Resource Locator (URL) o que movimenta toda a Internet. Sem este recurso, seria impossvel "navegar" na "Rede das Redes". URL considerado o endereo de cada computador ligado na rede. Acontece que, no sentido tecnicamente exato, URL no apenas um endereo e sim um protocolo de comunicao associado a um endereo virtual que identifica um documento em um computador qualquer. Eis alguns exemplos de URL: http://www1.50megs.com/odisseus http://www.fflch.usp.br/sti http://www.receita.fazenda.gov.br http://www.estadao.com.br Observe que no existem espaos em branco entre as diversas partes de um endereo URL. Se voc colocar algum espao em branco, o browser vai se perder! Os protocolos de Internet mais comuns so: http:- World Wide Web usado para acesso s pginas Web; ftp: - File Transfer Protocol usado para transferncia de arquivos; mailto - usado para acesso s caixas postais eletrnicas. Para dominar o uso do hipertexto, deve-se conhecer bem o funcionamento das duas tags da linguagem: a tag <A NAME> e a tag <A HREF>. A maioria dos endereos dos sites na Internet segue um determinado padro. Eles geralmente seguem o formato: http:// + www. + nome + .com + .br onde: http:// determina a forma de comunicao com o computador onde o site mantido; www. padro e em alguns poucos endereos pode no aparecer; nome determina a empresa ou entidade responsvel pelo site; .com determina que o site comercial e, portanto, alguns sites podem no ter essa indicao; .br determina a sigla do pas onde o site est localizado e se no houver essa indicao, o site geralmente mantido nos Estados Unidos; Com base nisso, se voc quiser acessar o site da Nestl no Brasil voc digitaria http:// www.nestle.com.br. Se quisesse acessar o site do Banespa, voc digitaria http://www.banespa.com.br, e assim por diante.
HTML
19
O smbolo # avisa o browser para procurar o link no documento atual. Quando voc d um clique no hipertexto, ele exibe a parte do documento que contm a ncora, colocando-a, sempre que possvel, no alto da tela.
O comando abaixo:
<A HREF="documento2.htm#parte5">Documento2 - Seo E</A>
vai um pouco mais longe e faz referncia a uma ncora chamada parte5 do documento2. Note que uma ncora sempre identificada pelo smbolo #.
HTML
20
Se o diretrio a ser acessado estiver abaixo do diretrio atual basta especificar o nome do subdiretrio sem nenhum smbolo. Para acessar um arquivo chamado legal.htm que se encontra no diretrio DEMO abaixo do diretrio atual, o caminho para seu link seria:
<A HREF="DEMO/legal.htm">
A incluso de imagens nas pginas da Web deu uma nova dimenso para a distribuio da informao. A incluso de uma imagem torna a informao muito mais atraente, e, como diz o ditado, uma imagem vale mais do que mil palavras. Incluir uma imagem na sua pgina uma tarefa bem fcil. Ela exige apenas que voc tenha disponvel a imagem que ser exibida, e que ela esteja em um dos formatos aceitos pelo browser. O formato de arquivo grfico padro aceito pela Web o formato GIF; outro formato o JPG. Antes de inundar suas pginas com muitas imagens, lembre-se de que, ao usar a rede para transmitir suas imagens, a velocidade de transmisso muito reduzida. Portanto, uma imagem de 100KB pode levar vrios minutos para ser exibida, frustando o navegador. Para facilitar as coisas, coloque os arquivos de imagem no mesmo diretrio da pgina. A tag HTML usado para inserir uma imagem o seguinte:
<IMG SRC="NomeDoArquivo.gif"> ou <IMG SRC="NomeDoArquivo.jpg">
HTML
21
12. IMAGENS
12.1. Opes Importantes da tag <IMG>
Se voc colocar uma imagem perto de um texto, poder especificar o alinhamento da imagem com relao ao texto que est ao seu redor. Como padro, a imagem alinhada colocando-se o seu fundo (parte de baixo) na mesma linha do texto. Atravs da diretiva ALIGN, voc pode alinhar o texto pelo fundo (bottom), que o padro, pelo meio (middle) e por cima (top):
<IMG ALIGN="top" SRC="imagem.gif"> <IMG ALIGN="middle" SRC="imagem.jpg"> <IMG ALIGN="bottom" SRC="imagem.gif">
Para exibir uma imagem sem texto ao seu redor, utilize a tag <IMG> e depois a tag <BR>.
HTML
22
onde #xxxxxx deve ser substitudo por um cdigo que identifique a cor desejada para aquela opo. BGCOLOR: a cor do background, cujo padro cinza. TEXT: a cor do texto, e o seu padro preto. LINK: a cor do texto do link, e o seu padro azul. VLINK: a cor do link que j foi visitado e o padro vermelho-prpura. ALINK: a cor do link ativo, selecionado. Veja o cdigo de algumas cores e lembre-se de que voc poder colocar o nome da cor, em ingls, no lugar de colocar o cdigo: Black (Preto) - #000000 White (Branco) - #FFFFFF Blue (Azul) - #0000FF Yellow (Amarelo) - #FFFF00 Green (Verde) - #00FF00 Cyan (Ciano) - #00FFFF Red (Vermelho) - #FF0000 Magenta - #FF00FF Dark green (Verde escuro) - #2F4F2F Brown (Marrom) - #A62A2A
HTML
23
<BODY BACKGROUND="imagem.gif">
HTML
24
HTML
25
O exemplo ficaria assim: 25. primeiro item 26. segundo item 27. terceiro item j. primeiro item k. segundo item l. terceiro item
HTML
26
15. TABELAS
As tabelas tm uma estrutura parecida com a de uma planilha eletrnica. Elas so compostas por linhas e colunas cujas interseces formam o que se chama de uma clula. Uma clula pode conter um texto simples, um hipertexto ou at mesmo uma imagem. A seguir, daremos uma olhada geral nas tags relativas a tabelas.
<TABLE>.</TABLE>
Uma tabela criada com pelas tags <TABLE> e </TABLE>. Entre estas devem ser especificados as demais tags responsveis pela criao das linhas e clulas, ttulos, bordas e alinhamento da tabela. Como padro, uma tabela criada sem borda, ou seja, no aparecem as linhas horizontais e verticais que separam as clulas.
<TR>.</TR>
Abreviao de Table Row, esta tag usada para criar uma linha da tabela. Se uma tabela tiver cinco linhas, devero ser especificados cinco pares deste comando.
<TD>.</TD>
Abreviao de Table Data, estes comandos so usados para especificar o contedo de uma clula. Estes comandos devem ser especificados em pares para cada clula da linha. Eles devem ser usados entre os comandos <TR> e </TR>. Ao contrrio das planilhas, uma tabela no precisa ter todas as linhas com o mesmo nmero de clulas. A largura de uma coluna definida pela largura da maior clula que faz parte da coluna. O contedo de uma clula alinhado pela opo ALIGN. Como padro, o alinhamento horizontal do texto esquerda (ALIGN=left) e o alinhamento vertical, no meio da clula (VALIGN=middle).
BORDER
Este parmetro pertence ao comando <TABLE>. Se for especificado sem nenhum valor, uma linha fina criada em volta de todas as clulas. O valor 0 equivalente a no ter borda. Quanto maior o valor especificado, mais grossa a borda.
COLSPAN
Este parmetro pode aparecer em qualquer clula da tabela e especifica quantas colunas da tabela a clula deve ocupar. O valor padro 1.
ROWSPAN
Este parmetro funciona como o anterior, s que especifica quantas linhas, para baixo, a clula deve ocupar. O valor padro 1.
HTML
27
<TD>Linha <TD>Linha </TR> <TR> <TD>Linha <TD>Linha <TD>Linha </TR> <TR> <TD>Linha <TD>Linha <TD>Linha </TR> </TABLE> </BODY> </HTML>
1 Coluna 2</TD> 1 Coluna 3</TD> 2 Coluna 1</TD> 2 Coluna 2</TD> 2 Coluna 3</TD> 3 Coluna 1</TD> 3 Coluna 2</TD> 3 Coluna 3</TD>
Note que, na tag <TABLE>, existe a opo Border. ela que cria a borda que envolve as clulas da tabela. Se voc no a especificar, a tabela montada normalmente, porm sem a borda. Agora, faremos um exemplo que mostra o uso da opo COLSPAN, isto , faz com que a clula ocupe colunas adjacentes. Note que o contedo desta clula est centralizado pelo comando ALIGN.
<HTML> <HEAD> <TITLE>Titulo da Pagina</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TD>Linha 1 Coluna 1</TD> <TD ALIGN=center COLSPAN=2>Linha 1 Coluna 2-3</TD> <TD>Linha 1 Coluna 4</TD> </TR> <TR> <TD>Linha 2 Coluna 1</TD> <TD>Linha 2 Coluna 2</TD> <TD>Linha 2 Coluna 3</TD> <TD>Linha 2 Coluna 4</TD> </TR> <TR> <TD>Linha 3 Coluna 1</TD> <TD>Linha 3 Coluna 2</TD> <TD>Linha 3 Coluna 3</TD> <TD>Linha 3 Coluna 4</TD> </TR>
HTML
28
O prximo exemplo, mostra o uso da opo ROWSPAN para aumentar o tamanho de uma clula e fazer com que ela ocupe linhas adjacentes. Note que o contedo desta clula est alinhado pelo comando VALIGN=top.
<HTML> <HEAD> <TITLE>Titulo da Pagina</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TD>Linha 1 Coluna 1</TD> <TD>Linha 1 Coluna 2</TD> <TD>Linha 1 Coluna 3</TD> </TR> <TR> <TD>Linha 2 Coluna 1</TD> <TD rowspan=2>Linhas 2-3 Coluna 2</TD> <TD>Linha 2 Coluna 3</TD> </TR> <TR> <TD>Linha 3 Coluna 1</TD> <TD>Linha 3 Coluna 3</TD> </TR> </TABLE> </BODY> </HTML>
HTML
29
Coluna 1</TD> Coluna 2</TD> Coluna 1</TD> Coluna 2</TD> Coluna 1</TD> Coluna 2</TD>
<TABLE> <TR> <TD>Linha 1 Coluna 1</TD> <TD>Linha 1 Coluna 2</TD> </TR> <TR> <TD>Linha 2 Coluna 1</TD>
HTML
30
<TD>Linha 2 Coluna 2</TD> </TR> <TR> <TD>Linha 3 Coluna 1</TD> <TD>Linha 3 Coluna 2</TD> </TR> </TABLE> </BODY> </HTML>
Veja o resultado:
Voc pode criar uma tabela sem bordas para montar um menu onde as opes no fiquem unicamente na vertical, como o caso quando voc usa os comandos para a criao de listas.
HTML
31
Criando Quadros
Para se trabalhar com frames, necessrio criar uma pgina HTML especial, que informar em quantos quadros a tela ser dividida, qual o tamanho ter cada um e qual o contedo ser visto em cada quadro. A estrutura dessa pgina especial um pouco diferente de uma estrutrutura comum. No lugar das tags <BODY>.<BODY> aparecem:
<HTML> <HEAD> <TITLE> MOLDURAS (FRAMES) </TITLE> </HEAD> <FRAMESET atributo1 atributo2 ...> <FRAME src="pgina1.html" atributo1 atributo2 ...> <FRAME src="pgina2.html" atributo1 atributo2 ...> ... </FRAMESET> <HTML>
Tag Frameset
Essa tag responsvel pela diviso da rea da tela dos navegadores em colunas ou linhas. Ela possui trs atributos: Cols: Divide a rea em quadros posicionados horizontalmente. Deve ser preenchido com a altura de cada quadro em pixels, percentual ou com tamanhos relativos. Exemplos:
<FRAMESET COLS="20%, 20%, *">
Divide a tela em trs colunas: duas com vinte por cento do espao da tela e a ltima com o restante do espao (sessenta por cento, no caso).
<FRAMESET COLS="20, 20%, *">
Divide a tela em trs colunas: uma com 20 pixels de tamanho, outra com 20% do espao e a terceira com o restante.
<FRAMESET COLS="2*, *">
Divide a tela em dois quadros: um com o dobro do tamanho do outro (eqivale a um frame ocupando 33,33% e outro 66,66% do espao da tela). Rows: Usado como o atributo Cols, s que dispe em quadros verticais. Exemplos:
<FRAMESET ROWS="10%, 50, *">
Sero criados trs quadros, um com o tamanho de 10% da tela, outro com tamanho de 50 pixels e
HTML
32
o ltimo com o restante do espao. Framespacing: Define um afastamento, em pixels, entre os quadros
<FRAMESET ROWS="20%, *" FRAMESPACING=10>
Sero criados dois quadros, um com o tamanho de 20% da tela e outro com 80%. Entre eles haver uma boda de 10 pixels.
Tag Frame
Essa tag responsvel pela apresentao do contedo de cada quadro. Dever haver uma tag <FRAME> para cada quadro criado. usada com as seguintes propriedades: Name: atribui um nome ao quadro para poder ser identificado e utilizado como alvo para insero de outras pginas com o atributo target. Src: define o endereo da pgina que ser mostrada no quadro. Noresize: estabelece que o quadro no poder ter o tamanho reajustados pelo usurio. Scrolling: Mostra ou esconde as barras de rolagem. As opes possveis so: auto insere caixas de rolagem vertical e/ou horizontal cada vez que o tamanho do quadro; yes insere sempre as barras de rolagem no quadro; no nunca insere caixas de rolagem, independentemente do contedo do quadro. Frameborder: Define se uma borda (moldura) ser mostrada ou no na juno entre dois quadros diferentes. Os valores possveis so: 1, mostra a borda; 2, no mostra. Marginwidth: Define a largura da margem esquerda e direita de um quadro em pixels. Marginheight: Define a altura da margem superior e inferior de um quadro em pixels. Exemplos:
<FRAME NAME="menuvertical" SRC="http:www.xxx.com.br" FRAMEBORDER=0>
Carrega uma pgina da Web, nomeando esse quadro de menuvertical e no mostra a borda.
<FRAME SRC="TESTE.HTML" MARGINHEIGHT=10> SCROLLING=auto NORESIZE MARGINWIDTH=10
Carrega a pgina teste.html, insere caixas de rolagem vertical e horizontal, se necessitar, no d a possibilidade do usurio redimensionar o tamanho do quadro e define as margens superiores, inferiores, da esquerda e da direita em 10 pixels.
Frames aninhados
possvel aninhar os comandos para subdividir uma linha em colunas ou vice-versa. O exemplo listado a seguir mostra como dividir a tela em trs quadros verticais, sendo que o do meio dever ser subdividido em dois outros quadros horizontais:
<FRAMESET COLS="33%, 33%, 34%"> contedo do primeiro quadro vertical <FRAMESET ROWS="50%, 50%"> contedo do segundo quadro vertical, primeira linha contedo do segundo quadro vertical, segunda linha </FRAMESET> contedo do terceiro quadro vertical </FRAMESET>
Tag Noframes
Os navegadores mais antigos no suportam a navegao com o uso de quadros. Se uma pgina
HTML
33
com quadros carregada por um navegador que no os suporta, no ser possvel visualizar corretamente o seu contedo. Para contornar esse obstculo, coloca-se a tag <NOFRAMES> que possibilita a insero de avisos e at pginas inteiras dentro das pginas que criam a estrutura de quadros.
<HTML> <FRAMESET ...> <FRAME ...> ... </FRAMESET> <NOFRAMES> <BODY ...> ... contedo da pgina sem quadros ... </BODY> </HTML>
O exemplo acima mostra a utilizao geral que inclui uma pgina sem frames.
A sintaxe das folhas de estilo bastante simples e pode ser escrita genericamente: Para folhas de estilo incorporadas na pgina ou em um arquivo externo: comando {propriedade1: valor atribudo; propriedade2: valor atribudo...} Para folhas de estilo incorporadas diretamente ao comando:
<comando STYLE="propriedade1: valor atribudo; propriedade2: valor atribudo..."> Assim, poderamos atribuir a fonte Arial a todos os textos inseridos com o comando <P> de dois modos: p {font: Arial} ou <P STYLE="font: Arial">
Font: define qual fonte ser utilizada no comando. O nome das fontes deve ser escrito respeitando a grafia disponvel nos aplicativos Windows.
{font: Garamond}
Font-family: define um conjunto de fontes a ser utilizado. Na ausncia da primeira no computador do internauta, a segunda ser usada. Cada nome de fonte deve ser separado por vrgulas.
{font-family: Arial, Courier, Garamond}
Font-size: define o tamanho da fonte a ser utilizado. Devem ser usados valores numricos acompanhados das seguintes unidades: pt (pontos), in (polegadas), cm (centmetros) e px (pixels).
{font-size: 12pt}
Font-weight: define a espessura do traado da fonte. As opes disponveis so: extra-light, light, demi-light, medium, demi-bold, bold e extra-bold.
{font-weight: extra-bold}
Text-align: Define o alinhamento do texto em: left (esquerdo), center (centralizado) ou right (direito).
{text-align: center}
Text-indent: Define a orientao do texto, ou seja, o recuo do texto com relao margem esquerda. Deve ser utilizado um valor numrico com as mesmas unidades mostradas na propriedade font-size.
{text-indent: 6pt}
Line-heignt: Define o espaamento entre linhas de um pargrafo. Deve ser usado um valor numrico com as mesmas unidades da propriedade anterior, mas podendo-se utilizar ainda a unidade % (valor percentual)
{line-height: 30pt}
Margin-left: Ajusta o tamanho da margem esquerda. Deve ser usado um valor numrico com as mesmas unidades da propriedade font-size.
{margin-left: 50px}
Margin-right: Ajusta o tamanho da margem direita. Deve ser usado um valor numrico com as mesmas unidades da propriedade font-size.
{margin-rignt: 50px}
Margin-top: Ajusta o tamanho da margem superior. Deve ser usado um valor numrico com as mesmas unidades da propriedade font-size.
{margin-rignt: 5pt}
HTML
35
{background: #FF0000}
define a imagem para ser utilizada como fundo. possvel ajustar, utilizando quatro parmetros, o comportamento de uma imagem de fundo com relao cobertura da pgina:
Repeat
Este comportamento padro e permite repetir uma imagem horizontal e verticalmente de modo que seja obtida uma cobertura total do fundo da pgina. Vale lembrar que ele s possvel no caso de imagens cujas dimenses sejam menores do que as da pgina Web onde forem inseridas.
BODY {BACKGROUND: URL(fundo.gif) repeat}
No-repeat
um atributo de comportamento inverso do anterior: no permite que a figura seja repetida at cobrir todo o fundo da janela. S eficaz quando a figura tiver uma dimenso menor que a pgina onde for inserida.
BODY {BACKGROUND: URL(fundo.gif) no-repeat}
Scroll
um atributo padro de comportamento que faz com que a imagem seja tratada como se estivesse presa a pgina. Caso seja preciso rolar a pgina, a imagem de fundo ser rolada tambm.
BODY {BACKGROUND: URL(fundo.gif) scroll}
Fixed
um atributo de comportamento inverso do anterior. Ele impede que a imagem seja tratada como se estivesse presa a pgina. Caso seja preciso rolar a pgina, a imagem de fundo ficar parada.
BODY {BACKGROUND: URL(fundo.gif) fixed}
Nesse caso, foram utilizados duas propriedades: Type: define o tipo de linguagem utilizado no estilo
HTML
36
Media: define o dispositivo em que o estilo ser apresentado. As opes so: screen (monitor) o padro; tty para monitores com capacidade limitada de resoluo como terminais e teletipo; tv para monitores tipo TV de baixa resoluo; projection para projetores tipo datashow; handheld para monitores de dispositivos portteis (cristal lquido de baixa resoluo); print para impressora ou monitores no modo de visualizao de impresso; braille para dispositivos com sada em braille; aural para dispositivos de sintetizao de voz; all para todos os dispositivos.
Definindo um estilo
Essa a terceira opo de se colocar um estilo em uma pgina. Nesse caso, servir para incorporar um estilo diretamente a um comando especfico, em que, por exemplo, apenas um comando <p> deva ser diferente dos demais. Para isso, basta incorporar as instrues diretamente ao comando utilizado. O exemplo seguinte mostra um estilo sendo definido para um nico pargrafo:
... <p> pargrafo comum ... <p STYLE=font-family: Arial, serif; font-weight: bold; textdecoration= underline> Este texto ser apresentado em Arial, negrito e sublinhado. ...
17.3. FORMULRIOS
Formulrios so home pages que permitem o internauta preencher campos e submet-los para algum. Os formulrios podem ser utilizados para praticamente qualquer entrada de dados em home pages. O objetivo permitir que um visitante da home page envie informaes para o responsvel pela pgina.
Controles
Existem diversos tipos de controles diferentes para formulrios. Cada um permite a entrada de um determinado tipo de dado. Qualquer campo possui o seguinte formato: <input type=tipo name=nome >. O tipo ser discutido abaixo e o nome utilizado para identificar os campos no formulrio. Os tipos de controles disponveis so: type=text: controle de entrada de texto comum;
type=password: controle de entrada senhas (o texto no mostrado para o usurio); type=checkbox: botes do tipo liga/desliga;
type=radio: botes seletores (iguais os seletores de radio FM/AM) que permitem que somente um seja acionado de cada vez;
HTML
37
type=hidden: controle escondido (serve para passar algum dado que o usurio no deva ver para o destinatrios do formulrio); type=submit: boto de envio do formulrio (os botes so considerados campos tambm); type=image: boto de envio do formulrio (funciona exatamente igual ao anterior, mas apresenta uma imagem ao invs de texto); type=reset: boto para apagar os dados do formulrio para que o usurio reinicie a entrada Para completar a funcionalidade selecionada por cada tipo mensionado acima, existem ainda os seguintes atributos permitidos para a tag HTML input que podem ser utilizados para otimizar um determinado campo de um formulrio: value=valor: inicializa o controle com um determinado valor; disabled: quando presente determina que o controle no pode ser modificado pelo usurio, funcionando como um controle para exibio de dados somente; checked: quando presente em um controle do tipo checkbox determina que o campo seja inicializado marcado; size: tamanho: indica qual ser o tamanho visivel do campo na tela em caracteres; maxlength: entrada mxima, indica qual o nmero de caracteres permitidos para entrada no controle; min: valor mnimo, indica qual ser o menor valor numrico aceito no controle; max: valor mximo, indica qual ser o maior valor numrico aceito no controle; Existe um controle de entrada adicional utilizado para a entrada de texto. o controle TEXTAREA, cuja sintaxe mostrada a seguir:
<textarea name="nome" rows=linhas cols=colunas> texto inicial do textarea </textarea>
O mtodo do form usado para especificar como o formulrio ser enviado para o servidor. O action a URL (endereo WWW) do CGI (common gateway interface) que far o tratamento dos dados do formulrio. O CGI o programa que reconhece os dados enviados pelo usurio e o envio do formulrio para o destinatrio.
HTML
38
18. HOSPEDAGEM
18.1. Como hospedar
Para se hospedar um site com o intuito de que o mesmo seja acessvel pela Internet necessrio que as pginas criadas sejam colocadas em um computador que possua um programa que efetuar o gerenciamento WEB, normalmente um computador servidor. Dentre os gerenciadores mais conhecidos citamos os seguintes: IIS - Internet Information Server (para o ambiente Windows NT e 2000 Server), Apache (para ambientes UNIX, LINUX etc) e o WPS - Windows Personal Server (para o ambiente Windows 98). Outro servio normalmente gerenciado por estes programas o FTP (File Transfer Protocol) ou protocolo de transferncia de arquivos. Trata-se de um protocolo (conjunto de regras) para se efetuar a troca de arquivos entre computadores por meio da Internet. a maneira mais fcil para se efetuar UPLOADS (envio de arquivos) e DOWNLOADS (recebimento de arquivos). Quando fazemos o download de um arquivo da WEB normalmente estamos acessando a rea FTP de um site, porm, nesse caso, via de regra, nosso acesso annimo, ou seja, na maioria das vezes no nos pedem identificao para efetuar o download. O acesso para manuteno de uma pgina pelo contrrio, normalmente, controlado, precisamos de um Login (nome de usurio) e de um Password (senha) para conseguir a conexo. Outra prtica recomendada a utilizao de um programa cliente FTP que ir facilitar a comunicao entre nossa mquina e o Servidor que hospeda nossa pgina WEB.
HTML
39
Como voc pode ver na figura acima, existem outros campos a serem preenchidos, porm estes no so essenciais podendo at, em alguns casos, permanecerem em branco: Profile Name: um nome aleatrio que podemos dar nossa conexo. Por meio deste nome e tendo tomado o cuidado de marcar a opo Auto Save Config, podemos facilmente nos reconectar bastando especificar o nome da conexo. O WS_FTP permite que tenhamos diversas conexes com diversos servidores ou com diversas contas, tambm pode ser usado por diversos usurios cada um com suas caractersticas de usurios e senhas diferentes. Host Type: A opo default (que j vem escolhida) Automatic detect, convm deixar esta opo ativa, pois ela atender a mais de 90% dos casos. Caso queira e saiba, poder escolher entre os diversos tipos de Servidores disponveis. Local PC: Como veremos a seguir o WS-FTP abrir uma tela dividida em esquerda e direita, sendo que a parte esquerda representar nossa mquina (cliente) e o lado direito a mquina remota (servidor). Com a opo Remote Host, como j foi visto, definimos nosso diretrio no servidor e com a opo Local PC definimos a rea em nossa mquina onde colocamos os dados referentes a nossa pgina. A mudana de diretrios em nossa mquina normalmente livre, podemos ir para qualquer drive ou diretrio, j na mquina servidora, normalmente, haver limitaes. O que escolhemos aqui s a rea ou diretrio inicial, tanto no cliente como no servidor. Aps a conexo com o servidor a tela do WS_FTP que surgir ser semelhante apresentada a seguir:
HTML
40
Como j comentamos, a tela essencialmente dividida em duas partes, a da esquerda refere-se nossa mquina cliente (Local System) e a da direita ao servidor (Remote System). Para efetuarmos a troca de arquivos basta que os selecionemos e, em seguida cliquemos nas setas existentes entre as duas divises: , ou seja estaremos selecionando algo do lado direito , selecionaremos algo
em nossa mquina (cliente) e a enviaremos para o servidor. A parte superior indica o local onde estamos atuando naquele momento em cada um dos equipamentos, portanto ser para onde as transferncias sero completadas. Vamos esclarecer os outros botes existentes em cada uma das duas telas, ele nos ajudaro a organizar as tarefas. ChgDir: Mudar de diretrio; MkDir: Criar diretrio; RmDir: Apagar diretrio; View: Ver o que esta selecionado; Exec.: Executar o que esta selecionado; Rename: Renomear; Delete: Apagar; Refresh: Atualizar; DirInfo: Mostra contedo do diretrio corrente. Aquele que est marcado na parte de cima.
HTML
41
GLOSSRIO
A
<A HREF> - usada para criar os links entre pginas e servidores da Internet. Ele tambm tem a funo de definir quais reas do texto ou quais imagens sero usadas para ligar as diversas pginas. Exemplo:
<A HREF=http://www.fflch.usp.br>Site da FFLCH</A> <A HREF=http://www.usp.br target=blank>Site da USP</A> <A HREF=mailto:fflchsti@usp.br>fflchsti@usp.br</A>
<A NAME> - define uma rea dentro de uma pgina HTML e atribui um nome a essa rea. Dessa forma, a regio criada com a tag <A NAME> pode ser chamada diretamente, usando a tag <A HREF>. Exemplos:
<A NAME="Area51">Essa rea do arquivo foi marcada como Areal</A><P> <A HREF="www.tcinet.com.br/arquivo.html#Areal">Clique para ir Area51</A><P>
<ABBR> - serve para indicar os significados de abreviaes, como fax, Corp., Av. etc. <ABBR> no modifica a exibio das pginas HTML, mas fornece dados para mecanismos que interpretam dados em uma pgina, como sistemas de busca, corretores ortogrficos, sintetizadores de voz e sistemas de traduo. Exemplo:
<ABBR TITLE="Avenida">Av.</ABBR>
<AREA> - usada para determinar quais reas de uma imagem sero clicveis e quais os links relacionados com cada uma dessas imagens. Pode-se, por exemplo, dividir uma imagem em quatro partes, cada uma com links para pginas diferentes dentro de um site. <AREA> deve ser usado com a tag <MAP> para criar imagens mapeadas. Exemplo:
<MAP NAME="mapal"> <AREA SHAPE=rect COORDS="0,0,200,100" HREF="http://www.tcinet.com.br/exemplo 1.html"> <AREA SHAPE="circle" COORDS="100,85,10" HREF="http://www.tcinet.com.br/exemplo2.htm1"> <AREA SHAPE="poly" COORDS="10,80,15,80,0,110" www.tcinet.com.bT/exemplo3.htrnl"> </MAP>
HREF="http://
B
<B> - Uma das tags mais simples de HTML. usada para aplicar negrito em textos. Exemplo:
<B>Texto</B>
<BASE> - Em HTML, os links para outros documentos e imagens que podem ser exibidos em uma pgina so especificados por meio de URLs. As URLs so os endereos na Internet. Por exemplo, uma foto pode estar no endereo http://www.fotos.com/foto.jpg. A tag <BASE> usada para facilitar o trabalho dos programadores e estabelece um endereo comum, onde os objetos so encontrados. Exemplo:
HTML
42
<BASE HREF=http://www.teinet.com.br> Com esse endereo especificado, elimina-se a necessidade de digitar o endereo http:// www.teinet.com.br toda vez que for preciso chamar uma pgina ou imagem do site. Um link para uma pgina de notcias, por exemplo, ficaria dessa forma: <A HREF="noticias.html">. Ou ento para uma imagem: <IMG SRC="../imagens/imagem.gif">. A tag <BASE> deve ser usado sempre entre os elementos <HEAD> e </HEAD> e obrigatrio o uso do atributo HREF para especificar um endereo. <BASEFONT> - usada para modificar os atributos das fontes exibidas em uma pgina HTML. Com ele, possvel determinar o tamanho, cor e o tipo da fonte. Funciona exatamente como o elemento <FONT>. Exemplo:
<BASEFONT SIZE="3" FACE="Arial" COLOR="#000000">Texto escrito com fonte arial, tamanho 3 e cor preta</BASEFONT>
<BIG> - serve para destacar uma palavra, frase ou bloco de texto em uma pgina HTML, aumentando o tamanho da fonte especificada. Em alguns casos, esta tag pode substituir a tag <FONT> para fazer pequenas mudanas nas fontes usadas em um documento. Exemplo:
<BIG>Aumente o tamanho deste texto</BIG>
<BLINK> - Faz com que o texto pisque na tela. Suportado apenas pelo Netscape. Exemplo:
<blink>Texto que pisca</blink>
<BODY> - a presena da tag <BODY> obrigatria em praticamente todas as pginas HTML. Junto com este elemento, so colocadas todas as especificaes de um documento, desde o tamanho e tipo da fonte at a cor da pgina e at mesmo uma imagem para ser usada como fundo de tela. Exemplo:
<HTML> <HEAD> <TITLE>Exemplo 1</TITLE> </HEAD> <BODY BGCOLOR="ffffff"> Esta pgina tem fundo branco </BODY> </HTML>
<BR> - indica uma quebra de linha em um determinado local de uma pgina HTML. Atributos usados com este elemento: ID, CLASS, TITLE, STYLE e CLEAR Exemplo:
Esta a primeira linha.<BR> Esta a segunda linha.
<BUTTON> - usada para criar botes em documentos HTML. Ao contrrio da tag <INPUT>, que pode ser usada para a mesma funo, esta tag permite que se criem botes com imagens e at
HTML
43
mesmo com formatao de texto em HTML. O tamanho dos botes ajustado automaticamente para acomodar as imagens e textos acrescentados. Exemplo:
<BUTTON NARRE="submit" VALUE="Submit" TYPE="submit" WIDTH="64" HEIGHT="25"> <IMG SRC="http://www.tclnet.com.br/imagens/hit.gif" ALT="Clique aqui" WIDTH="65" HEIGHT="25"> </BUTTON>
C
<CAPTION> - usada sempre depois da tag <TABLE> e serve para mostrar o nome ou ttulo de uma tabela. Atributos usados com este elemento: ALIGN, VALIGN, ID, CLASS LANG, DIR, TITLE, STYLE, ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP Exemplo:
<HTML> <HEAD> <TITLE>Exemplo do elemento <CAPTION></TITLE> </HEAD> <BODY> <TABLE BORDER="1" ALIGN="left" BORDERCOLOR="#OOOOFF" WIDTH="100%"> <CAPTION ALIGN="bottom">Exemplo do uso do CAPTION</CAPTION> <TR><TH>Texto A</TH> <TH>Texto B</TH></TR> <TR> <TD>Texto C</TD> <TD>Texto D</TD> </TR> <TR> <TD>Texto E</TD> <TD>Texto F</TD> </TR> </TABLE> </BODY> </HTML>
<CENTER> - usada para alinhar um texto, tabelas e imagens, no centro da pgina. Este tag pode ser substituda pela tag <DIV>. Exemplo:
<CENTER>Esta frase fica no centro da tela</CENTER>
<CODE> - usada para formatar cdigo de programao em pginas HTML. Os textos colocados entre a tag <CODE> so apresentados em uma fonte fixa, que na maioria dos casos a fonte Courier New. Exemplo:
<CODE>Texto</CODE>
<COL> - permite que sejam criadas colunas em uma tabela e determina as propriedades para cada uma delas isoladamente. Deve ser usada juntamente com a tag <COLGROUP>, que usada para criar e definir as propriedades gerais de um grupo de colunas. Exemplo:
<TABLE> <COLGROUP> <COL> <COL SPAN="2"> </COLGROUP> <TR> <TD>...</TD> <TD>...</TD> <TD>...</TD> </TR> </TABLE>
<COLGROUP> - Este elemento permite que seja determinado um grupo de colunas dentro de uma tabela, bem como as propriedades destas colunas. No exemplo, o <COLGROUP> foi usado
HTML
44
para criar uma tabela com uma linha e cinco colunas com 50 pixels de largura cada. A tag <COL> usada para determinar as propriedades das colunas separadamente. Exemplo:
<TABLE> <COLGROUP span="5" width="0"></COLGROUP> <TR> <TD>...</TD> <TD>...</TD> <TD>...</TD> <TD>...</TD> <TD>...</TD> </TR> </TABLE>
D
<DD> - mostra a definio de um termo em uma lista de definies de termos. usada junto com as tags <DL> (Definition List) e <DT> (Definition Term). Atributos usados com este elemento: ID, CLASS, LANG, DIR, TITLE, STYLE, ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP. Exemplo:
<DL> <DT>Termo 1</DT> <DD>Definio do Termo 1 </DD> <DT>Termo 2</DT> <DD>Definio do Termo 2</DD> </DL>
<DEL> - usado junto com o elemento <INS> para indicar textos ou palavras que foram apagados da verso original e inseridos em uma verso editada. Um trao colocado sobre as palavras ou frases marcadas com este elemento. Exemplo:
Este texto foi <DEL>apagado</DEL>, mas esta <INS>frase foi inserida</ INS>
<DIR> - desenvolvida para criar listas desordenadas. Entretanto, foi substituda pela tag <UL>. Exemplo:
<DIR> <LI>Item 1 <LI>Item 2 <LI>Item 3 </DIR>
F
<FONT> - usada para modificar os atributos das fontes exibidas em uma pgina. Com ela, possvel determinar o tamanho, cor e o tipo da fonte. Funciona exatamente como o elemento <BASEFONT>. Exemplo:
<FONT SIZE="4" FACE="impact" COLOR="#ffffff">Texto escrito com fonte Impact, tamanho 4 e cor branca</FONT>
HTML
45
para definir como esses dados sero processados. A tag geralmente usada com a tag <INPUT>. Exemplo:
<FORM METHOD="post" ACTION="http://www.exemplo.com.br/cgi-bin/query"> <INPUT TYPE="text" NAME="exemplo"> </FORM>
<FRAME> - usada, basicamente, para especificar um endereo ou documento de onde as informaes dos quadros sero retiradas. Exemplo:
<FRAMESET COLS="30%,70%"> <FRAMESET ROWS="40%,60%"> <FRAME SRC="arquivo framel.html"> <FRAME SRC="arquivo frame2.html"> </FRAMESET> <FRAME SRC="arquivo frame3.html"> </FRAMESET>
<FRAMESET> - usada para determinar as caractersticas de cada um dos frames de um documento, como a largura das colunas. Exemplo:
<FRAMESET COLS="200, 400"> <FRAME SRC="arquivo_framel.html"> </FRAMESET>
H
<Hn> - usada para descrever ttulos de uma sentena. Entre os seis nveis, o primeiro o mais importante e o ltimo, o menos importante. Exemplo:
<H1>Este ttulo mais importante ... </H1> <H2> ...do que este outro ttulo...</H2> <H3> ...e assim por diante...<H3>
<HEAD> - traz informaes sobre um documento HTML, como o ttulo, palavras-chave que podem ser teis para mecanismos de busca e outros dados que no so considerados como parte do contedo de um documento. Exemplo:
<HEAD> <TITLE>Novo Documento</TITLE> <META HTTP-EQUIV="Content-Language" CONTENT="pt"> </HEAD>
<HR> - cria uma linha horizontal entre duas sees de um documento HTML. A linha costuma ser acinzentada e ocupa toda a largura da tela. Essas caractersticas, entretanto, podem ser alteradas. Exemplo:
<HR WIDTH=50% SIZE=10 COLOR=BLUE>
<HTML> - indica que tudo o que est na pgina deve ser interpretado como elementos para marcao de texto no padro HTML. Exemplo:
<HTML> <HEAD> <TITLE>Uma pgina HTML</TITLE>
HTML
46
I
<I> - usada para formatar textos em itlico. Exemplo:
<I>Texto</I>
<IFRAME> - permite a incluso de um frame em uma pgina HTML da mesma forma que uma imagem ou outro objeto includo. Na prtica, como se voc estivesse incluindo uma pgina HTML dentro de outra pgina. No entanto, s suportado pelo Internet Explorer (verso 3.0 ou superior) e pelo Netscape 6 ou superior. Exemplo:
<IFRAME SRC="http://www.tcinet.com.br/noticias.html" width="300" height="200" scrolling="auto" frameborder="0"></IFRAME> <P> HTML<BR> <IFRAME SRC="http://www.tcinet.com.br" width="200" height="150" bcrolling="auto" frameborder="0"></IFRAME>
<IMG> - serve para inserir uma imagem em uma pgina. A propriedade SRC deve sempre ser usada para identificar a origem da imagem utilizada. Exemplo:
<IMG SRC="http://www.tcinet.com.br/imagens/estrela.gif">
<INPUT> - cria campos de formulrios para a entrada de dados. possvel criar caixas de entrada para textos, botes para enviar os dados etc. Exemplo:
<DIV ALIGN="USTIFY"><FONT FACE="ARIAL" SIZE="3" COLOR="#000000"> Nome: <INPUT TYPE="text" NARRE="nome" SIZE="l00"><BR> Sobrenome: <INPUT TYPE="text" NARRE="nome" SIZE="100"><BR> E-mail: <INPUT TYPE="text" NARRE="nome" SIZE="100"><BR> <INPUT TYPE="radio" NARRE="sexo" VALUE="Homem">Homem<BR> <INPUT TYPE="radio" NARRE="sexo" VALUE="Mulher">Mulher<BR> </DIV>
K
<KBD> - usada para indicar textos que foram digitados pelo usurio. Os textos colocados entre a tag <KBD> so apresentados em uma fonte fixa, que na maioria dos casos Courier New. Exemplo:
<KBD>Texto em fonte fixa</KBD>
L
<LABEL> - serve para associar dois objetos diferentes em um documento. No modifica a exibio de uma pgina, mas um recurso importante para a manipulao de dados em formulrios. Exemplo:
HTML
47
<FORM ACTION= METHOD="post"> <TABLE> <TR> <TD><LABEL for="pnome">Nome</LABEL> <TD><INPUT type="text" narre="pnmeironome" id="pnome"> <TR> <TD><LABEL for="snome">Last Narre</LABEL> <TD><INPUT type="text" narre="sobrenome" id="sname"> </TABLE> </FORM>
<LI> - usado para criar itens de uma lista, que pode ser desordenada ou ordenada. Exemplo:
<UL> <LI>Um item <LI>Outro item </UL>
M
<MAP> - usada para criar um mapa, que posteriormente ser aplicado a uma imagem. usada para definir um nome para o mapa e tambm quais as partes de uma imagem que sero clicveis e quais os endereos relacionados com essas partes. Exemplo:
<MAP NAME="mapal"> <P>Navigando pelo site: <A HREF="intro.html" SHAPE="rect" COORDS="0,0,118,28">Introduo</A> <A HREF="news.html" SHAPE="rect" COORDS="118,0,184,28">Novidades</A> <A HREF="search.html" SHAPE="circle" COORDS="184,200,60">Pesquisa</A> <A HREF="links.html" SHAPE="poly" COORDS="276,0,276,28,100,200,50,50,276,0">Links</A> </MAP>
<MARQUEE> - movimenta um texto de um lado para outro da tela. Interpretado somente pelo Internet Explorer. Exemplo:
<MARQUEE>Texto</MARQUEE>
<META> - usada para indicar diversas propriedades de um documento, como, por exemplo, o autor da pgina, a linguagem utilizada, o assunto do documento etc. Deve ser colocada entre a tag <HEAD> e no produz nenhuma informao visvel em uma pgina HTML. Em compensao, ela contm informaes teis para mecanismos de busca e outros sistemas de tratamento de dados. Exemplo:
<META NAME="Author" LANG="pt" CONTENT="Jose da Silva"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=windows-1252">
N
HTML 48
<NOFRAMES> - especifica um contedo que deve ser exibido apenas por navegadores mais antigos, que no conseguem exibir frames. Exemplo:
<FRAMESET cols="30%, 70%"> <FRAME SRC="principal.html"> <FRAME SRC="secundario.html"> <NOFRAMES> <P> O seu navegador no suporta frames. Por favor, copie o Netscape Navigator 3 ou o Internet Explorer 3<P> </NOFRAMES> </FRAMESET>
<NOSCRIPT> - quando os comandos de um script no podem ser interpretados por um navegador, os autores podem usar a tag <NOSCRIPT> para exibir um contedo alternativo. sempre usada com a tag <SCRIPT>. Exemplo:
<SCRIPT TYPE="text/tcl"> ...alguns comandos do script... </SCRIPT> <NOSCRIPT> <P> <A HREF="http://www.exemplo.com.br/noscript.hml">Clique aqui para ver o contedo desta pgina</A> </NOSCRIPT>
O
<OBJECT> - a maioria dos navegadores tem mecanismos prprios para exibir imagens, fontes diferentes, tabelas etc. Quando um browser no tem um mecanismo para exibir um determinado objeto (um arquivo de msica ou um documento do Word, por exemplo) ele pode usar aplicativos externos para mostrar esses objetos. A tag <OBJECT> define exatamente qual o arquivo que o browser ter que interpretar e qual o aplicativo externo que ser usado para executar a tarefa. possvel usar aplicaes em Java e diversos plug-ins, como o Real Player, Flash, Adobe Acrobat. Exemplo:
<OBJECT CLASSID="http://www.exemplo.com.br/filmes/filme.mpeg" TYPE="application/mpeg" STANDBY="Carregando vdeo"> </OBJECT>
<OL> - cria listas ordenadas em um documento. Os itens em uma lista ordenada so numerados. Exemplo:
<OL> <LI>Primeiro item da lista <LI>Segundo item da lista <LI>Terceiro item da lista </OL>
<OPTION> - define quais as opes que sero listadas em um menu criado com a tag <SELECT>. Exemplo:
<FORM> <SELECT NAME="menul" MULTIPLE> <OPTION VALUE="Escolha1">Item 1 <OPTION VALUE="Escolha2">Item 2 <OPTION VALUE="Escolha3">Item 3 </SELECT> </FORM>
HTML
49
P
<P> - serve para criar pargrafos em documentos. Depois de posicionado, a tag <P> cria duas quebras de linha. Exemplo:
<P>Paragrafo</P>
<PRE> - indica que o texto seguinte pr-formatado. Dessa forma, os espaos, tabulaes entre outros caracteres que normalmente so ignorados pelo HTML, so exibidos corretamente. Esta tag exibe o contedo com uma fonte fixa. Exemplo:
<PRE>Texto com formatao original.</PRE>
S
<SELECT> - usada para criar menus. usada sempre com a tag <OPTION>, que define quais opes de escolha o menu oferece. Exemplo:
<FORM> <SELECT NAME="menul" MULTIPLE> <OPTION VALUE="Escolha1">Item 1 <OPTION VALUE="Escolha2">Item 2 <OPTION VALUE="Escolha3">Item 3 </SELECT> </FORM>
<SMALL> - exibe o texto num tamanho de fonte menor do que o padro. Exemplo:
<SMALL>Texto em fonte menor do que a normal</SMALL>
<SPAN> - usada para formatar blocos com textos, tabelas e imagens em um documento e funciona de maneira semelhante a tag <DIV>. A diferena que esta fora uma quebra de linha. Com o uso de Style Sheets, pode ser usada para definir estruturas de bancos de dados em pginas HTML. No primeiro exemplo, ela define apenas o alinhamento do texto. J no segundo caso, a tag usada para criar a estrutura de um banco de dados de clientes. Exemplo:
<SPAN ALIGN="CENTER">Este texto aparecer no centro da tela</SPAN> <SPAN ID="client-silva" class="client"> <P> <TABLE CLASS="client-data"> <TR><TH>Nome:<TD>Mario</TR> <TR><TH>Sobrenome:<TD>Silva</TR> <TR><TH> e-mail:<TD>mariosilva@exemplo.com.br</TR> </TABLE> </SPAN>
<STYLE> - usada para determinar diversas caractersticas de Style Sheets dentro de um documento. Deve ser usada dentro do cabealho de uma pgina e permite modificar as propriedades de praticamente todas as tags de HTML. As tags <LINK> e <META> oferecem outros mtodos para incluir Style Sheets em documentos. Exemplo:
<HEAD>
HTML
50
<STYLE type"text/css"> Hl.meuexemplo {border-width: 1; border: solid; color: blue; text-align: center} </STYLE> </HEAD> <BODY> <H1 class-"meuexemplo">Esta frase vai aparecer com uma borda e ser azul</H1> <H1> Mas essa continuar normal </H1> </BODY>
<SUB> - diminui o tamanho do texto e o coloca um pouco abaixo do alinhamento normal. til para notaes cientficas. Exemplo:
3 <SUB>12</SUB>
<SUP> - Semelhante tag <SUB>. A diferena que esta tag alinha o texto um pouco acima do nvel normal. til para notaes matemticas envolvendo potncias ou abreviaturas. Exemplo:
2<SUP>o</SUP> grau; 3<SUP>10</SUP>
T
<TABLE> - cria tabelas. Contm todas as definies de fontes, linhas, clulas, cabealho e rodap de uma tabela. Exemplo:
<TABLE BORDER="1" BORDERCOLOR="#OOOOFF" CELLPADDING="10" WIDTH="50%"> <CAPTION>Exemplo de tabela</CAPTION> <TR><TH>Texto 1</TH><TH> Texto 2</TH><TH> Texto 3</TH> </TR><TR><TD>Continuao do texto 1 </TD> <TD> Continuao do texto 2</TD> <TD> Continuao do texto 3</TD> </TR> <TR><TD> Continuao do texto 1 </TD> <TD> Continuao do texto 2</TD> <TD> Continuao do texto 3</TD> </TR> <TFOOT> <TR><TH CO LSPAN="4">Este apenas um pequeno exemplo</TH></TR> </ TFOOT> </TABLE>
<TBODY> - usada para especificar o contedo da tabela. Dentro esto as tags que criam as linhas e colunas da tabela. O uso desta tag, no entanto, no necessria. Exemplo:
<TABLE> <TBODY> <TR><TD>Este um exemplo</TD></TR> <TR><TD>Este outro exemplo<lTD></TR> </TBODY> </TABLE>
<TD> - todo o contedo que exibido em uma tabela deve ser inserido dentro de uma clula criada com a tag <TD> ou <TH>. Exemplo:
<TABLE> <TR><TD>Primeira clula da tabela</TD><TD>Segunda clula da tabela<ITD><TD>Terceira clula da tabela</TD></TR> <TR><TD COLSPAN=3> </TD> </TABLE>
HTML
51
<TEXTAREA> - usada para criar caixas de entrada de texto em pginas HTML. Exemplo:
<FORM ACTION="http://www.tcinet.com.br/cgi-bin/pegar-texto" method="post"> <P> <TEXTAREA NARRE="texto" ROCAS="25" COLS="60"> </TEXTAREA> <INPUT TYPE="submit" VALUE="Enviar"><INPUT TYPE="reset" VALUE="Limpar"> </P> </FORM>
<TFOOT> - usada para exibir contedo no rodap de uma tabela. Deve haver, pelo menos, uma linha de dados, criada com a tag <TD>. Exemplo:
<TABLE BORDER="1" CELLPADDTNG="10" CELLSPACING="0" WIDTH="50%"> <TR> <TD>Texto A</TD> <TD>Texto B</TD> <TD>Texto C</TD> </TR> <TFOOT> <TR><TH COLSPAN=3>Fim da tabela</TH></TR> </TFOOT> </TABLE>
<TITLE> - usada para identificar o ttulo de um documento. Esta tag deve sempre ser colocada no cabealho de uma pgina. Exemplo:
<HEAD> <TITLE>Exemplos de HTML</TITLE> </HEAD>
<TR> - define as linhas de uma tabela. Toda linha deve ter pelo menos uma tag <TD>, para exibir o contedo da tabela. Exemplo:
<TABLE BORDER="1" BORDERCOLOR="#000000"> <TR ID="primeiralinha"><TD>Esta a primeira linha de uma tabela</ TD> <TR ID="segundalinha"><TD>Esta a segunda linha de uma tabela</TD> </TABLE>
<TT> - usada para exibir textos com fontes fixas, como Courier New. Exemplo:
<TT>Um texto com fonte fixa</TT>
U
<U> - uma das tags mais simples de HTML. Usada para sublinhar textos. Exemplo:
<U>Texto</U>
HTML
52
Universidade de So Pa ulo Reitor: Prof. Dr. Adolpho Jos Melfi Vice-Reitor: Prof. Dr. Hlio Nogueira da Cruz
Faculdade de Filosofia, Letras e Cincias Humanas Diretor: Prof. Dr. Sedi Hirano Vice-Diretor: Profa. Dra. Eni de Mesquita Samara
Seo Tcnica de Informtica Chefe: Augusto Csar Freire Santiago Chefe-substituta: Nli Maximino Ttulo: HTML Elaborao: Seo Tcnica de Informtica Organizao: Seo Tcnica de Informtica Reviso: Augusto Csar Freire Santiago Diagramao: Patrcia Carla dos Santos e Marcelo Marcos Benedito Bibliografia: Cintra, Glauber - Construo de pginas na WWW: HTML e CGI - verso 1.3 - 1996. ICMC / USP - Tutorial HTML - [http://www.icmsc.sc.usp.br/manuals/HTML/] - 1999. INET - Tutorial HTML - [http://www.inet.com.br/suporte/home03.htm] - 1999.
HTML
53