Tudo Sobre HTML

11/02/12
T do ob e HTML
INTRODUO A LINGUAGEM HTML

Esta p gina foi adaptada de: Aprenda HTML jeguinho.cjb.net e-mail: maurinho@brazil.zzn.com
Esta pgina tem o objetivo de ensinar as noes bsicas da linguagem HTML, pois para fazer uma Home Page vac pode usar programas que usam uma linguagem visual (como por exemplo, Front Page ou PageMill), ou seja, voc faz a formatao de sua pgina sem precisar saber cdigos. O Que HTML ??? HTML a abreviatura de Hyper Text Markup Language, que pode ser traduzida como Linguagem de Hipertexto Baseada em Cdigos. Define um conjunto de estilos como cabealhos, pargrafos, listas e tabelas que compes uma pgina da WWW e serve para indicarmos formataes para textos, inserir imagens e ligaes de hipertexto. Tags ou Diretivas. A linguagem HTML possui algumas regras de sintaxe que devemos seguir para obter o resultado desejado. Todo documento HTML apresenta elementos entre parnteses angulares (<ELEMENTOS>), esses elementos so as etiquetas da linguagem HTML, que so os comandos de formatao da linguagem. As etiquetas, tags ou diretivas, tem sua correspondente etiqueta de fechamento (<ETIQUETA> ... </ETIQUETA>). Isto nescessrio porque as tags servem para definir a formatao de uma poro de texto, e assim marca-se onde comea e onde termina o texto com formatao especificada por ela. Alguns tags so chamados "va ios" ou unidirecionais, pois no marcam uma regio de texto, apenas inserem alguma coisa no documento. As etiquetas sero escritas em maisculas apenas para facilitar a visualizao, pois voc pode misturar ou colocar tudo minsculo que igualmente aceito pelos Browsers. Como Editar as Pginas em HTML. As pginas desenvolvidas em HTML so arquivos simples e podem ser lidos e confeccionados em qualquer editor de texto (Microsoft Word, Word Pad, Edit do DOS, NotePad). Depois de editar os cdigos e textos s gravar o arquivo mudando a exteno (ex.: .txt) para .html ou .htm. A diferena entre .htm e .html que o .html mais novo e so comandos melhores aceitos e .htm como se iniciou o html mais no mudou praticamente nada. Tanto faz voc salvar em qualquer uma das duas. Ento, basicamente, os arquivos HTML possuem dois componentes: 1. O texto propriamente dito; 2. As tags que indicaro os elementos de pgina: estrutura; formatao; vnculos a outras pginas.
Obs.: Para exibir o resultado do arquivo HTML no nescessrio estar conectado rede, basta acessar um Brow ser (Internet Explorer, Netscape, etc) e utiliza-lo para abrir o arquivo.
Voltar ao topo
Formatao de Textos
Em uma pgina HTML podem existir textos, imagens, itens multimdia e hipertexto. Para isso o documento HTML apresenta a seguinte estrutura:
jcma ell1. ilabol. ol.com.b /H ml/ e o.h ml 1/16
11/02/12
T do ob e HTML
<HTML> <HEAD> <TITLE>Titulo do documento</TITLE> </HEAD> <BODY> texto, imagem, links, etc... </BODY> </HTML> Como o HTML no uma linguagem de programao, voc nunca ser avisado de erros cometidos na edio do seu documento. Um simples esquecimento de uma barra pode mudar toda sua pgina.
Sees
<HTML> e </HTML>: Identifica o documento como sendo HTML. <HEAD> e </HEAD>: o cabechalho e contm as informaes sobre o documento. <TITLE> e </TITLE>: Define um ttulo que mostrado no alto da janela do Browser. Todo documento WWW deve ter um ttulo. Esse ttulo referenciado em busca pela rede, dando uma identidade ao documento, facilitando assim, a classificao em catalogos de busca. <BODY> e </BODY>: Tudo que estiver na seo BODY ser mostrado na janela do browser e, consequentemente, apresentado ao leitor. Esta seo pode conter cabealhos, pargrafor, listas, tabelas, imagens e links para outros documentos. Dentro da tag <BODY> podemos usar as seguintes opes que no so obrigatrias e caso no existam assumem o valor default: BGCOLOR - especifica uma cor de fundo para a pgina; BACKGROUND - especifica a imagem (.gif ou .jpg) usada no fundo da tela; BGPROPERTIES = FIXED - fixa uma imagem no fundo da tela; TEXT - define uma cor para o texto; LINK - define uma cor para os links; VLINK - define uma cor para os links j visitados; ALINK - define uma cor para o link na hora que for ativado. Por exemplo: <BODY BACKGROUND=nome_imagem.extencao BGCOLOR=nome_cor TEXT=nome_cor LINK=nome_cor VLINK=nome_cor ALINK=nome_cor> Ou ento, podemos usar o cdigo equivalente da cor em hexadecimal: <BODY BACKGROUND=nome_imagem.extencao BGCOLOR=#codigo_cor TEXT=#codigo_cor LINK=#codigo_cor VLINK=#codigo_cor ALINK=#codigo_cor> No importa a seqncia dos atributos (BGCOLOR, LINK, VLINK...) e sempre se coloca um espao entre os atributos.
Formatao de Textos
Podemos formatar o texto mudando a fonte do texto, a cor, colocando em itlico, negrito, sublinhado, fonte espaada, subscrito, etc. Para todas elas so nescessrio delimitar o incio e o fim do texto a ser formatado. <FONT COLOR=nome_cor> texto </FONT>: Muda a cor do texto que estiver entre as tags incio e fim. <FONT FACE=nome_letra> texto </FONT>:
11/02/12
T do ob e HTML
Muda o tipo de letra do texto que estiver entre as tags incio e fim. <FONT SIZE=tamanho> texto </FONT> ou <Hn> texto </Hn>: Muda o tamanho da letra do texto que estiver entre as tags incio e fim. O n da tag <Hn> pode variar de 1 (o maior) at 6 (o menor). <B> texto </B>: Coloca o texto que estiver entre as tags incio e fim em negrito. <I> texto </I>: Coloca o texto que estiver entre as tags incio e fim em itlico. <TT> texto </TT>: Coloca o texto que estiver entre as tags incio e fim com fonte monoespaada. <U> texto </U>: Sublinha o texto que estiver entre as tags incio e fim. (No aconselhavel colocar o texto sublinhado, pois os links j so sublinhados e pode confundir). <SUP> texto </SUP>: Coloca o texto que estiver entre as tags incio e fim em sobscrito. <SUB> texto </SUB>: Coloca o texto que estiver entre as tags incio e fim em subscrito. <S> texto </S>: Taxa o texto que estiver entre as tags incio e fim. Ainda falando da disposio de texto na tela, se desejarmos mudar de linha no basta usar o ENTER como em um editor de textos, existem tags especficas para isso, alm de outros recursos para alocar um texto na pgina. So eles: <CENTER> texto </CENTER>: Centraliza o texto em relao pgina. <BR>: Quebra de linha, inicia o texto seguinte na linha logo abaixo. <NOBR> texto </NOBR>: Faz com que o texto no tenha quebras de linhas e crie uma barra de rolagem horizontal para poder ver o texto inteiro. <WBR>: Coloca quebra de linhas no comando <NOBR>.a quebra de linha vai ser onde voc colocou este comando. <P>: Fora o fim de um pargrafo, ou seja, pula uma linha antes de iniciar outro pargrafo. Exite tambm um comando de preformatao (<PRE> texto a ser preformatado </PRE>), ele usado para que o browser aceite seus espaos grandes de uma letra para outra e o ENTER, Se voc colocar a tag <PRE> do jeito que voc digitar o texto ser exatamente como aparecer no Browser. Linhas horizontais so formas de deixar sua pgina com mais facilidade de encontrar coisas e tambm mais apresentvel. Essas linhas so boas sadas para textos grandes em que os assuntos so diversos. <HR>: Inclui uma linah horizontal no texto, separando-o em blocos. Nesta tag podemos especificar: WIDTH - n % do comprimento ou o n em pixel - Ex.: <HR WIDTH=50%> ou <HR WIDTH=100>; SIZE - espessura do trao - Ex.: <HR SIZE=5>.
Exemplo contendo os tags de formatao de texto:

11/02/12
T do ob e HTML
<HTML> <HEAD> <TITLE>Exemplo das tags</TITLE> </HEAD> <BODY BGCOLOR=White TEXT=Black> <HR WIDTH=80% SIZE=3> <PRE>
<CENTER>E
O</CENTER>
</PRE> <HR WIDTH=80% SIZE=3> <P> <H1>Tamanho1</H1> <BR> <H2>Tamanho2</H2> <BR> <H3>Tamanho3</H3> <BR> <H4>Tamanho4</H4> <BR> <H5>Tamanho5</H5> <BR> <H6>Tamanho6</H6> <BR> Texto1 - <FONT COLOR=Blue>Cor Azul</FONT> <BR> Texto2 - <FONT FACE="Times New Roman">Fonte Times New Roman</FONT> <BR> Texto3 - <B>Negrito</B> <BR> Texto4 - <I>Itlico</I> <BR> Texto5 - <TT>Monoespaado</TT> <BR> Texto6 - <U>Sublinhado</U> <BR> Texto7 - <SUP>Sobscrito</SUP> <BR> Texto8 - <SUB>Subscrito</SUB> <BR> Texto9 - <S>Taxado</S> <P> </BODY> </HTML> Para ver como ficar a pgina com estes cdigos na tela do Browser clique aqui:
Caracteres Especiais
Alguns caracteres especiais so tratados de uma maneira diferente na Web, pelo fato de que nem todos os computadores ligados Internet esto configurados para visualizar os acentos. Existe uma codificao que permite a qualquer equipamento interpretar os cdigos e exibir na tela o caracter desejado. Os cdigos funcionam da seguinte maneira: Primeiro colocamos o caracter &; Em seguida a letra que dever ser acentuada; Coloque a acentuao desejada;
11/02/12
T do ob e HTML
Acrescente o ";" (ponto e virgula). Relacionamos abaixo alguns dos caracteres e acentos da HTML:
Acentos e Caracteres Cdigo Agudo Grave Circunflexo Til Trema Cedilha & < > " (espao em branco)
Voltar ao topo
&_acute; &_grave; &_circ; &_tilde; &_uml; &_cedil; & < > © "
ncoras e Links
ncoras (Links)
Para inserir um link, ou seja, uma ligao de uma regio do texto (ou imagem) a um outro documento nescessrio usar o tag <A>, da seguinte forma: <A HREF="arq_dest"> ncora </A> onde arq_dest o URL do documento de destino, ncora o texto ou imagem que servir de ligao hipertexto do documento sendo apresentado para o documento de destino. Existem 3 caminhos para se referir um documento de destino: 1. Caminho relativo - Pode ser usado sempre que quiser fazer referncia a um documento que esteja no mesmo servidor do documento atual. <A HREF="apresentacaodalicao.html">Clique aqui</A>. 2. Caminho Absoluto - Quando se quer fazer referncia a um documento que esteja em outro servidor. <A HREF="http://www.terravista.pt/ancora/3300">Clique aqui</A>. 3. Ligao com trechos da mesma pgina - Desvia para o local do trecho desejado na mesma pgina. Colocarei um exemplo, como se voc quisesse voltar para o incio dessa pgina: Coloque o nome em algum local que voc quer que o link se dirija. Como esse comando colocado no incio da pgina: <A NAME="inicio"></A>. Agora faa o link para essa ncora, como a seguir: <A HREF="#inicio">Clique aqui</A>. NOTA: Para voc colocar o endereo de seu e-mail na sua pgina voc tem que colocar da seguinte forma: <A HREF="mailto:seu_e-mail"> seu_e-mail </A> Voltar ao topo
11/02/12
T do ob e HTML
Imagens e Animaes
Imagens
Com relao de uso de imagens na Web temos que estas se dividem em duas categorias gerais que so as imagens in-line e as externas. As imagens in-line so apresentadas na pgina junto com os vnculos e com o texto e so carregadas automaticamente. J as imagens externas so carregadas somente por demanda (download), atravs de vnculos. Independente de sua categoria, as imagens podem se apresentar em dois formatos: .gif e .jpg. GIF - Este padro mais conhecido e mais compatvel com os navegadores existentes. Recomendado para cones com menos de 256 cores, cores lisas, puras, preto e branco. Sua qualidade bem superior ao formato JPG, pois o tamanho do arquivo maior.Suas imagens podem ser transparentizadas. JPG ou JPEG - Foi o padro proposto pelo comit ISO e geralmente usado para imagens mais complexas (fotogrficas). Permite alta taxa de compresso, por isso gera um arquivo menor, o que implica numa perda de informao e qualidade. O elemento IMG, ou seja, a tag <IMG>, insere as imagens que sero apresentadas junto ao texto. Um atributo SRC, que o mais importante dessa tag, deve estar presente da seguinte forma: Se a imagem estiver na mesma pasta que a sua pgina ento a tag seria assim: <IMG SRC="nome_imagem.exteno"> Se a imagem estiver em uma pasta diferente da que sua pgina est, ento voc tem que colocar o endereo desta pasta e depois o arquivo que contm a sua imagem. Digamos que sua pgina esta na pasta "pagina" e a imagem (img.gif) que voc vai colocar esta na pasta "imagens" que esta dentro da pasta "pagina", ou seja, essa imagem est dentro da pasta "\imagens\img.gif". Ento a tag seria: <IMG SRC="imagens\img.gif"> DICA: Se voc quiser colocar uma imagem que est em outra pgina, basta clicar com o boto direito do mouse em cima da imagem e seleciona o opo propriedades e copiar a endereo URL e colocar no atributo SRC. Juntamente com a tag <IMG> podemos usar alguns parmetros como: BORDER - para determinar a moldura da imagem; WIDTH - para determinar a largura da imagem; HEIGHT - para determinar a altura da imagem; ALIGN - para alinhar as imagens de vrias formas: LEFT - alinha a imagem a esquerda do texto; RIGHT - alinha a imagem a direita do texto; TOP - alinha o texto com o topo da imagem; MIDDLE - alinha o texto com o meio da imagem; BOTTOM - alinah o texto com a parte inferior da imagem. ALT - quando a pessoa deixar o mouse sobre a imagem aparecer o que voc escreveu. Por exemplo: <IMG ALT="explicao da imagem" BORDER=4 WIDTH=50 HEIGHT=20 ALIGN=Left> Uma imagem pode funcionar como vnculo, incluindo-se a tag <IMG> entre as partes de abertura e fechamento de uma tag de vnculo <A>. Assim temos: <A HREF="arq.html"><IMG SCR="img.gif"></A> Para se projetar uma pgina deve-se procurar um equilbrio com relao a quantidade de imagens e cores e a necessidade de transmisso de informaes. O uso excessivo de imagens, imagens grandes, poinis de fundo tornar a pgina mais lenta ao ser carregada e o que, em muitos casos, levar os usurios que tiverem uma conexo lenta de rede a desistirem de carregar esta pgina. Para que isso no acontea, verifique a nexessidade do uso dessa ou daquela imagem, mantenha as imagens pequenas reutilize-as sempre que possvel.
Animaes
11/02/12
T do ob e HTML
Com relao ao uso de mdias em HTML necessrio a utilizao de vnculos correspondente ao caminho URL do arquivo externo que se deseja inserir em sua pgina.<A REF="arq_ext">Arquivo</A>. Neste contexto entram os arquivos de som e vdeo. Som O primeiro caso, o som, utilizado para transmitir informaes que no sejam na forma de ilustrao ou palavras e at mesmo para desejar boas vindas ao usurio que acaba de carregar aquela pgina. Esses arquivos geralmente possuem exteno .waw e .mid. Agora vamos aos comandos: <EMBED> <BGSOUND> Como o comando <EMBED> no aceito pelo IE 3.0 e alguns outros browsers desconhecidos, voc ter que colocar o comando duas vezes, um com o <EMBED> para o Netscape e <BGSOUND> para outros Browsers. Esta tags pode conter os seguintes parmetros: SRC - define o caminho para o arquivo de som; AUTOSTART - define que ao ser carregado ele j deve ser tocado ou que o visitante deve clicar no play para tocar, TRUE para tocar automaticamente e FALSE para quando o visitante apertar play. AUTOLOAD - define que ele deve ser automaticamente comeado a baixar o arquivo de som quando entrar na pgina, ou o visitante deve apertar o play para baixar o arquivo, TRUE para baixar automaticamente e FALSE para quando o visitante apertar play. LOOP - define o nmero de vez que a msica ser tocada, TRUE para tocar infinitas vezes. HIDDEN - define se voc quer que o controle ficam sumidos ou no, TRUE para deixar invisvel e caso queira os controles no precisa colocar FALSE. WIDHT e HIGHT define o tamanho dos controles. Ento os comandos de sua pgina ficariam assim: <EMBED SCR="musica.mid" AUTOSTART="true" AUTOLOAD="true" LOOP="true" HIDDEN="true"> <BGSOUND SCR="musica.mid" AUTOSTART="true" AUTOLOAD="true" LOOP="true" HIDDEN="true"> Vdeo J os arquivos de vdeos fornecem informaes que as imagens estticas no so capazes de transmitir. Suas extenses so geralmente .mpg, .mov, .avi. interessante utilizar informaes sobre o formato e o tamanho do arquivo de mdia externo A tag <IMG> possui atributos que permitem a execuo in-line de arquivos de som e vdeo. O atributo DYNSRC (para IE) inclui arquivos de vdeo: <IMG DYNSRC="arquivo.avi SRC="arquivo.gif ALT="[a arquivo]">. Letreiros Em HTML possvel a criao de letriros, ou seja, uma linha rolvel que se mover de um lado ao outro da pgina da Web. Para que este efeito seja possvel basta alocar o texto que se deseja transformar em letreiro entre as tags de abertura e fechamento <MARQUEE> texto </MARQUEE>. Esta tag possui vrios atributos:
Atributo BEHAVIOR 1. SCROOL 2. SLIPE 3. ALTERNATE
Utilizao 1. Rola de um lado ao outro da tela e at desaparecer. 2. Rola o letreiro da direita para esquerda e para. 3. Faz o letreiro saltar de um lado da tela para outro.
jcma
ell1. ilabol. ol.com.b /H ml/ e o.h ml
7/16
11/02/12
T do ob e HTML
DIRECTION (somente se o letreiro for SCROOL) 1. LEFT 2. RIGHT LOOP SCROLLAMOUNT SCROLLDELAY BGCOLOR HEIGHT WIDTH HSPACE VSPACE ALIGN TOP MIDDLE BOTTOM
1. Move o letreiro da esquerda para direita. 2. Move o letreiro da direita para esquerda.
Define o nmero de vezes que o letreiro ralar na tela. Define o nmero de pixel para locao do letreiro. Define o tempo da animao em milessegundos. Define a cor de fundo da caixa que delimita o letreiro. Define a altura da caixa que delimita o letreiro. Define a largura da caixa que delimita o letreiro. Define o espao entre as bordas esquerda e direita e o texto. Define o espao entre as bordas inferior e superior e o texto.
Define o alinhamento do letreiro com relao ao texto.
Exemplo: <MARQUEE ALIGN=m
Voltar ao topo
Listas
As lista so utilizadas para organizar o texto quando necessrio uma relao de itens ordenados ou no. A
11/02/12
T do ob e HTML
HTML define 3 tipos de listas: Listas Ordenadas ou Numeradas - essas listas so delimitadas pelas tags <OL>(inicializa uma lista) ... </OL>(finaliza uma lista) e cada item desta lista comea com a tag <LI>(sem o fechamento). So aquelas que possui um nmero. O atributo TYPE define o tipo de numerao da lista. Assim, A (letras maisculas), a (letras minsculas), I (algarismos romanos) e 1 (nmeros arbicos). Exemplo:
Cdigo Sada no Browser <OL> <LI>item 1 <LI>item 2 </OL> 1. item 1 2. item 2
Lista No-Ordenadas ou com Marcadores - so aquelas que os itens so marcadores ou outros smbolos. Estas listas so indicadas pelas tags </UL> ... </UL>. Os elementos dessa lista tambm so separados por </LI>. Nesta lista o atributo TYPE define o tipo de marcadores de cada uma delas. Assim, disk (marcador preenchido), square (quadrado), circle (marcador vazado). Exemplo:
Cdigo Sada no Browser <UL> <LI>item 1 <LI>item 2 </UL> item 1 item 2
Listas de Definio ou de Glosrios - so aquelas em que cada item tem dois componetes, um termo e uma definio. Estas listas so indicadas pelas tags <DL> ... </DL>. As tags <DT> e <DD>, unidirecionadas, respectivamente, indicam o termo a ser definido e a definio desse mesmo termo. Exemplo:
Cdigo
Sada no Browser
<DL> item 1 <DT>item 1 item 2 <DD>item 2 item 3 <DD>item 3 </DL>

Voltar ao topo
Tabelas
As tabelas so usadas para organizar o contedo de uma pgina, ou seja, imagens em linhas e colunas. Com tag <TABLE> contedo da tabela </TABLE> indicamos que se trata de uma tabela. <CAPTION> ... </CAPTION> - para acrescentar um ttulo na tabela. <TR> ... </TR> - para informar onde comea (<TR>) e onde termina (</TR>) cada linha da tabela. <TH> ... </TH> ou <TD> ... </TD> - para identificar o incio e o fim de cada clula. A diferena entre <TH> e <TD> que o conteudo da clula da tag <TH> escrita em negrito e centralizada. Agora j podemosfazer uma tabela com estes comandos, que ficaria assim:
Tabela
11/02/12
T do ob e HTML
clula 1 clula 2 clula 3 clula 4

Os comandos da tabela acima seria assim: <TABLE> <CAPTION> Tabela </CAPTION> <TR> <TH> clula 1 </TH> <TH> clula 2 </TH> </TR> <TR> <TD> clula 3 </TD> <TD> clula 4 </TD> </TR> </TABLE> Atributos para a tag <TABLE>: BORDER - define a espessura da borda; WIDTH - define a largura da tabela, pode ser definida em % ou valor absoluto (com nmeros); ALIGN - alinhamento horizontal (Right, Center, Left); BGCOLOR - para alterar a cor de fundo; BACKGROUND - permite colocar uma imagem no fundo; CELLSPACING - define o espao existente entre as clulas da tabela; CELLPADDING - define o espao existente entre as bordas da clula e seu contedo; BORDERCOLOR - usado para alterar a cor da borda. Atributos para as tags <TD> e <TH>: COLSPAN - especifica quantas colunas da tabela a clula vai ocupar; ROWSPAN - especifica quantas linhas da tabela a clula vai ocupar; WIDTH - define a largura de cada clula, pode ser definida em % ou valor absoluto (com nmeros); HEIGHT - define a altura de cada clula, pode ser definida em % ou valor absoluto (com nmeros); ALIGN - alinhamento horizontal (Right, Center, Left); VALIGN - alinhamento vertical (Top, Middle, Bottom); BGCOLOR - alterar a cor de fundo desse elemento. Uma tabela usando alguns elementos destes ficaria assim:
clula 1 clula 2 clula 3

Cdigos da tabela acima; <TABLE BORDER=1 BORDERCOLOR=#ffcc00 BGCOLOR=#6666ff CELLSPACING=2 CELLPADDING=10 ALIGN=center> <TR> <TD COLSPAN=2>clula 1</TD> <TD ROWSPAN=2>clula 2</TD> </TR> <TR> <TD>clula 3</TD> <TD>clula 4</TD> </TR> </TABLE> Voltar ao topo
clula 4
11/02/12
T do ob e HTML
Frames
Os frames permitem a diviso da tela em diferentes regies onde pode-se apresentar diferentes pginas. Isso possibilita, por exemplo, que se determine a rea da tela para ser a pgina principal e outras reas para menus ou links. A tag <FRAMESET> cria um documento de definio de frames, que onde ser criado o layout de cada frame e indicado o nome dos documentos que sero apresentados. Essa tag substitui a tag <BODY> quando for utilizada. Deve-se definir um dos dois atributos a tag <FRAMESET> para se ter o layout desejado: COLS e ROWS. Com o atributo COLS indicamos quantas colunas teremos na pgina - <FRAMESET COLS="lagura_coluna, largura_coluna, *"> (a largura podde ser definida em porcentagem (%) ou em valor absoluto) - Assim, divide-se quantos frames foram indicados e pelo * (asterstico), definimos que o frame ocupar todo o espao restante da tela. O atributo ROWS define quantas linhas a frame ser dividida - <FRAMESET ROWS="50%, 50%"> definimos que a pgina ser dividida em 2 frames horizontais. O atributo SRC indica qual pgina ser chamada em cada frame criado e o atributo NAME atribui o nome a esse frame. Existem ainda outros atributos que esto relacionados abaixo:
Atributos MARGINWIDTH MARGINHIGHT SCROLLING = YES, NO ou AUTO NORESIZE
Utilizao Determina as margens esquerda e direita do frame. Determina as margens superior e inferior do frame. Configura a barra de rolagem, podendo aparecer ou no. Pode ainda, aparecer somente quando o texto ultrapassar o tamanho da clula (AUTO). Impede que as barras que delimitam os frames sejam redimensionados.
O cdigo de um documento HTML contendo frames ficaria assim: <HTML> <HEAD> <TITLE> Ttulo da Pgina </TITLE> </HEAD> <FRAMESET COLS="200, *"> <FRAME SCR="pgina que ficar no 1 frame" NAME="nome do 1 frame"> <FRAME SCR="pgina que ficar no 2 frame" NAME="nome do 2 frame"> </FRAMESET> </HTML> A tag <NOFRAME> ... </NOFRAME> coloca o cdigo que substituir a pgina caso o Browser no d o suporte ao recurso de frames. Caso o Browser entenda frames, tudo que estiver entre tag de abertura e fechamento <NOFRAME> ... </NOFRAME> ser ignorado e o frame funcionar conforme programado. Exemplo: <HTML> <HEAD> <TITLE> Ttulo da Pgina </TITLE> </HEAD> <FRAMESET COLS="200, *"> <FRAME SCR="pgina que ficar no 1 frame" NAME="nome do 1 frame">
11/02/12
T do ob e HTML
<FRAME SCR="pgina que ficar no 2 frame" NAME="nome do 2 frame"> <NOFRAMES> <BODY> Aqui fica sua pgina sem frames para quem no consegue ver sua frames. </BODY> </NOFRAMES> </FRAMESET> </HTML> Alm dos atributos j citados, temos tambm o TARGET. Quando iniciamos um frame, geralmente colocamos um nome para que possa ser identificado. Para acessar esse frame que colocamos nome, usamos TARGET, que define onde a pgina dever ser carregada. O atributo tem quatro valores que so: TARGET="nome do frame" - carrega no frame especificado; TARGET="_top" - limpa a tela e abre o arquivo que esta sendo chamado; TARGET="_blank" - abre uma nova janela para exibir o documento; TARGET="_self" - carrega o documento no mesmo frame que o chamou. Exemplos: <A HREF="http://www.terravista.pt/ancora/3300" TARGET="menuhtml"> <A HREF="apresentacaodalicao.html" TARGET="_top"> Voltar ao topo
Formulrios
Os formulrios em uma pgina WEB permitem coletar informaes das pessoas que visitam a pgina. atravs de algumas diretivas especiais podemos definir as literais e o formato dos objetos de resposta. Tambm definimos que ser tomada assim que o formulrio for preenchido. Para criar um formulrio faz-se necessrio o uso da tag <FORM> onde sero includos os elementos desse formulrio. Essa tag contm dois atributos: METHOD e ACTION. 1) O atributo METHOD pode ter o valor GET ou POST, que determina a maneira como os dados do formulrio sero enviados para processamento. A diferena entre os dois a forma que cada um "empacota" esses dados. 2) O atributo ACTION um ponteiro que indica o script que processa as informaes que se obtm apartir do formulrio. Deve conter a URL completa do programa que ir receber dados do formulrio. Por exemplo http://www.uky.edu/cgi-bin/cgiwrap/~johnr/AnyForm.cgi. Tambm tem o atributo TARGET que opcional e s necessrio quando se utiliza frames, ele indica onde aparecer a pgina de confirmao do formulrio. A tag <INPUT> indica um elemento de formulrio simples e possui dois atributos que so TYPE e NAME. 1) As opes que o atributo TYPE oferece so: TEXT - para campos de entrada de texto; Exemplo: RADIO - para botes de rdio; Exemplo: CHECKBOX - para caixas de verificao; Exemplo: PASSWORD - funciona da mesma forma que o atributo TEXT, exceto que todas as letras digitadas aparecem como um asterstico (*). Exemplo: 2) O atributo NAME, na maioria dos casos, define o nome do campo. 3) O atributo VALUE (valor), neste caso, pode ser usado se voc quiser, ele define um valor prvio para cada campo, de tal forma que quando a pgina seja carregada este valor j esteja preenchido podendo ser alterado pelo visitante. 4) O atributo SIZE define o tamanho do campo e definido no nmero de caracteres. Se voc quiser um
11/02/12
T do ob e HTML
campo de 40 caracteres, voc dever definir como SIZE=40. Mas note que esse valor no limita o campo em 40 caracteres, ele define o tamanho que ele ser mostrado na pgina. 5) O atributo MAXLENGHT (comprimento mximo) define o nmero mximo de caracteres que podem ser digitados nos campos. 6) O atributo CHECKED usado para marcar as opes RADIO e CHECKBOX. Lembrando que a opo RADIO s pode ter um selecionado. Agora vamos ver alguns exemplos:
Botes de escolha <INPUT TYPE=Radio NAME=sexo VALUE=Mas CHECKED>Masculino <INPUT TYPE=Radio NAME=sexo VALUE=Fem>Feminino Masculino Feminino O atributo NAME, neste caso, deve ser igual para todos os campos. O atributo VALUE deve conter o valor deste campo, este ser o valor processado e repassado ao programa.<\TD> Botes de checagem Na sua casa tem:<BR> <INPUT TYPE=Checkbox NAME=eletro1 VALUE=TV>Televiso<BR> <INPUT TYPE=Checkbox NAME=eletro2 VALUE=Radio>Rdio<BR> <INPUT TYPE=Checkbox NAME=eletro3 VALUE=Vidio>Vdeo Cassete<BR> Na sua casa tem: Televiso Rdio Vdeo Cassete O atributo NAME, neste caso, deve ser diferente para cada campo. O atributo VALUE deve conter o valor deste campo, este ser o valor processado e repassado ao programa.<\TD>
A tag <SELECT> ... <SELECT> permite que voc defina uma lista de opes para a seleo do visitante. O atributo NAME define o nome desta lista e SIZE define quantos elementos iro aparecer na tela. Caso ele seja omitido, somente uma opo aparece de cada vez. Cada opo da lista recebe uma tag <OPTION>, e o atributo VALUE deste elemento ir definir o valor de cada opo, que ser a informao fornecida ao programa de acordo com a seleo feita. Agora vamos ver um exemplo:
Seleo Qual o estado que voc mora ???<BR> <SELECT NAME=estado> <OPTION VALUE=SP>SP <OPTION VALUE=RJ>RJ <OPTION VALUE=MG>MG <OPTION VALUE=Outro>Outro </SELECT> Qual o estado que voc mora ???
SP
Se voc colocar SIZE=2 ento fica assim:

11/02/12
T do ob e HTML
Qual o estado que voc mora ???

SP RJ MG Outro As tags <TEXTAREA> ... <TEXTAREA> (rea de texto) permite definir um campo de texto com vrias linhas. O atributo ROWS e COLUMNS definem o tamanho da rea em que o visitante vai escrever, ROWS define o nmero de linhas da caixa de texto e COLUMNS o nmero de colunas, e o atributo COLS define quantos caracteres cada linha possui. O atributo NAME define o nome da caixa de texto. Se voc incluir o atributo WRAP=hard a sua caixa de texto no ira possuir uma barra de scroll horizontal. Agora vamos ver um exemplo:
Caixa de Texto <TEXTAREA NAME=comentarios ROWS=3 COLUMNS=37> Aqui voc coloca o seu comentrio </TEXTAREA>
Au qi vc clc osu o ooa e cmni oetro
Envio e limpeza de dados:

<INPUT TYPE=Reset Value=...> O valor RESET no atributo TYPE define um boto que limpa todos os campos, colocando os mesmos valores de quando a pgina foi carregada. No atributo VALUE pode-se definir o que estar escrito no boto, por exemplo, "Limpar". Caso nenhum valor seja definido aparecer "Reset". <INPUT TYPE=Submit NAME=... Value=...> O valor SUBMIT (submeter) no atributo TYPE define um boto de envio de informaes, ou seja, um boto que ao ser acionado executa o programa associado ao formulrio (aquele que foi definido em ACTION no tag FORM), passando para ele os dados preenchidos. Assim como no tipo RESET, o atributo VALUE define o que estar escrito no boto. O NAME opcional. <INPUT TYPE=Image NAME=... SRC=... ALT=...> Uma outra alternativa para o tipo SUBMIT seria o uso de uma imagem em seu lugar. Para isso, existe o tipo IMAGE. Neste caso, passam a existir os atributos SRC e ALT normalmente usados em elementos que definem uma imagem. <INPUT TYPE=Hidden NAME=... Value=...> O valor HIDDEN (escondido) define dados que devem ser passados ao programa, mas no devem aparecer para quem est vendo a sua pgina. Neste caso, NAME identifica o dado e VALUE define o seu valor.
Para fazer um formulrio tem que ser usado o CGI gratuito (ex.:http://www.uky.edu/cgibin/cgiwrap/~johnr/AnyForm.cgi) e este CGI precisa de alguns comandos: AnyFormMode - deve ser preenchido com o valor "MAIL"; AnyFormDisplay - pode ser preenchido com "SHORT", "STANDARD", com uma URL (endereo) da pgina que ser mostrada aps os dados serem enviados ou com "NONE"; AnyFormTo - deve conter o e-mail no qual sera enviado as informaes do formulrio; AnyFormFrom - deve conter o e-mail de quem est preenchendo o formulrio; AnyFormSubject - deve conter o assunto do formulrio para quando voc receber o e-mail contendo as informaes preenchidas do formulario voc identifica-la. Alguns destes elementos so normalmente definidos no elemento INPUT com o atributo TYPE e o valor
11/02/12
T do ob e HTML
HIDDEN: <INPUT TYPE=Hidden NAME=AnyFormTo VALUE="maurinho@brazil.zzn.com">
Agora vamos ver um exemplo completo de um formulrio: Cdigo: <B>Preencha o formulario e clique no botao ok.:</B> <P> <FORM ACTION="http://www.uky.edu/cgi-bin/cgiwrap/~johnr/AnyForm.cgi" METHOD="POST"> <INPUT TYPE="hidden" NAME="AnyFormDisplay" VALUE=NONE> <INPUT TYPE="hidden" NAME="AnyFormMode" VALUE="mail"> <INPUT TYPE="hidden" NAME="AnyFormSubject" VALUE="e-mails da minha HomePage"> <INPUT TYPE="hidden" NAME="AnyFormTo" VALUE="maurinho@brazil.zzn.com"> <TABLE BORDER="0"> <TR> <TD>Email.:</TD> <TD><INPUT TYPE="text" SIZE="40" NAME="AnyFormFrom"></TD> </TR><TR> <TD>Nome.:</TD> <TD><INPUT TYPE="text" SIZE=35 NAME="Nome.:"></TD> </TR><TR> <TD>Idade.:</TD> <TD><INPUT TYPE="text" SIZE=3 NAME="Idade.:"></TD> </TR><TR> <TD>Sexo.: </TD> <TD> <INPUT TYPE="Radio" NAME=sexo VALUE=Mas CHECKED>Masculino <INPUT TYPE="Radio" NAME=sexo VALUE=Fem>Feminino </TD> </TR><TR> <TD>Cidade.:</TD> <TD><INPUT TYPE="text" SIZE=20 NAME="Cidade.:"></TD> </TR><TR> <TD>Estado.:</TD> <TD> <SELECT NAME="estado"> <OPTION VALUE=SP>SP <OPTION VALUE=RJ>RJ <OPTION VALUE=MG>MG <OPTION VALUE=Outro>Outro </SELECT> </TD> </TR><TR> <TD>Pas.:</TD> <TD><INPUT TYPE="text" SIZE=20 NAME="Pas.:"></TD> </TR><TR> <TD>Mensagem.:</TD> <TD><TEXTAREA NAME="Mensagem" ROWS="4" COLS="35"></TEXTAREA></TD> </TR><TR> <TD></TD> <TD><CENTER><INPUT TYPE="image" SRC="ok.gif"></CENTER></TD> </TABLE> </FORM> Agora veja como ficou este formulrio:
Preencha o form lario e cliq e no bo ao ok.:

11/02/12
T do ob e HTML
Email.: Nome.: Idade.: Sexo.: Cidade.: Estado.: Pas.: Mensagem.:

SP
Masculino
Feminino
Voltar ao topo
UpLoad
Depois que voc termina de fazer a sua pgina, voc tem que coloca-la na internet, este processo chamado de UpLoad. 1) Primeiro voc vai precisar de um programa FTP (transferncia de arquivos por protocolo). O mais conhecido o WS_FTP LE 4.6. Voc pode achar o FTP Explorer mais fcil de usar, faa o DownLoad aqui. 2) Depois de ter o programa, faa a inscrio em qualquer site de hospedagem gratuito (ou pago). Um site de hospedagem gratuito bastante conhecido o www.terravist
jcma
ell1. ilabol. ol.com.b /H ml/ e o.h ml
16/16

Tudo Sobre HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tudo Sobre HTML

Transféré par

Droits d'auteur :

Formats disponibles

11/02/12

INTRODUO A LINGUAGEM HTML

Exemplo contendo os tags de formatao de texto:

Atributo BEHAVIOR 1. SCROOL 2. SLIPE 3. ALTERNATE

ell1. ilabol. ol.com.b /H ml/ e o.h ml

Define o alinhamento do letreiro com relao ao texto.

Exemplo: <MARQUEE ALIGN=m

Cdigo Sada no Browser <OL> <LI>item 1 <LI>item 2 </OL> 1. item 1 2. item 2

Cdigo Sada no Browser <UL> <LI>item 1 <LI>item 2 </UL> item 1 item 2

<DL> item 1 <DT>item 1 item 2 <DD>item 2 item 3 <DD>item 3 </DL>

clula 1 clula 2 clula 3 clula 4

clula 1 clula 2 clula 3

Atributos MARGINWIDTH MARGINHIGHT SCROLLING = YES, NO ou AUTO NORESIZE

Se voc colocar SIZE=2 ento fica assim:

Qual o estado que voc mora ???

Envio e limpeza de dados:

HIDDEN: <INPUT TYPE=Hidden NAME=AnyFormTo VALUE="maurinho@brazil.zzn.com">

Preencha o form lario e cliq e no bo ao ok.:

Email.: Nome.: Idade.: Sexo.: Cidade.: Estado.: Pas.: Mensagem.:

ell1. ilabol. ol.com.b /H ml/ e o.h ml

Vous aimerez peut-être aussi