Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • 2928 HTML

    Enviado por

    Elton L. Barbosa
    10 visualizações19 páginas

    Título original

    2928_HTML

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    10 visualizações19 páginas

    2928 HTML

    Enviado por

    Elton L. Barbosa

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 19

    HTML

    Autor: Bruno Aparecido Albino

    HTML-CURSO
    HTML - Hypertext Markup Language, em ingls, ou em portugus que significa Linguagem de Marcao de Hipertexto. uma linguagem dedicada construo de pginas Web. Os dois objetivos bsicos da HTML so: Formatao do contedo de uma pgina Web Criar ligaes entre vrias pginas HTML uma linguagem Visual baseada em cdigos especiais denominados tags. Hipertexto o conceito que possibilita a "navegao" entre segmentos de texto independentemente de sua seqncia linear ou de sua localizao. Uma pgina Web um documento criado atravs do cdigo HTML, que pode ser visualizado na rede mundial de computadores. Alm de textos, as pginas Web aceitam imagens, animaes, sons e vdeos. O cdigo HTML, utilizado na criao da pgina Web, pode ser escrito em qualquer editor de textos, por mais simples que seja, como o Bloco de Notas do Windows. Visualize abaixo, um exemplo de cdigo-fonte de uma pgina HTML.

    Neste curso utilizaremos os termos "Pgina Web" e "Pgina HTML" como sinnimos. O navegador um interpretador, ou seja, ele interpreta a linguagem HTML e exibe no monitor a formatao da pgina, definida atravs dos cdigos, conhecidos como tags. As tags so identificadas facilmente por serem envolvidas pelos sinais "< >" (menor e maior) e "< / >" (menor, barra, maior). O formato genrico de uma tag : <nome da tag>texto</nome da tag>. A barra indica que a tag est sendo fechada. As tags so utilizadas aos pares. Elas "cercam" uma faixa de texto e o altera. Exemplo: <i>texto em itlico</i> faz com que o texto entre as tags aparea assim em um browser: texto em itlico. A tag com a barra " / " indica que ali fecha-se o cerco que envolve um texto. Veremos, no decorrer do curso, algumas tags que no precisam ser fechadas. Nos prximos tpicos voc ver como utilizar as principais tags, mas antes conhea a estrutura de uma pgina HTML. As tags <html> e </html> so a identificao de uma pgina HTML, ou seja, fazem com que a pgina no seja considerada um documento de texto comum. Voc deve utilizar a tag <html> para iniciar a estrutura de uma pgina HTML e a tag </html> para encerrar esta estrutura. O par de tags <head> e </head> usado para especificar o cabealho da pgina. O cabealho contm informaes sobre a pgina que no aparecem no navegador.

    Entre as tags <body> e </body> se constri o corpo da pgina HTML, ou seja, entre elas so colocados os textos, imagens e links. Visualize, logo abaixo, a estrutura bsica de uma pgina HTML. <html> <head> </head> <body> </body> </html> Uma pgina HTML composta basicamente por ttulo, texto, imagem e links. Esses elementos so posicionados na pgina atravs de comandos especficos da linguagem HTML.

    Veja como simples inserir ttulo e texto em uma pgina HTML. Abra o arquivo "exemplo1.htm" salvo anteriormente e crie uma estrutura bsica. <html> <head> </head> <body> </body> </html> Insira um ttulo em sua pgina digitando entre as tags <head> e </head> o comando: <title>Minha Primeira Pgina</title>. O nome dado ao ttulo ser exibido na barra de ttulos do navegador. Insira um texto em sua pgina digitando: Minha Primeira Pgina HTML entre as tags <body> e </body>. Aps inserido o ttulo e o texto, a estrutura do arquivo ficar assim: <html> <head><title>Minha Primeira Pgina</title> </head> <body>Minha Primeira Pgina HTML </body> </html> Tenha cuidado ao criar a estrutura da pgina, pois se uma tag estiver aberta, ou seja, sem um dos caracteres <, > ou /, voc no visualizar corretamente a pgina em um browser Aps ter inserido o ttulo e o texto em sua pgina, voc visualizar o resultado em seu navegador. Antes de mais nada, salve o arquivo "exemplo1.htm" clicando no menu ARQUIVO e em SALVAR do Bloco de notas. Aps inserir o texto, aprenda como alinh-lo em sua pgina HTML.

    As tags de alinhamento do texto so: <div> e </div>. O atributo de alinhamento : align. As opes de alinhamento so: center - texto centralizado right - texto direita left - texto esquerda Volte ao Bloco de notas, usando a combinao das teclas Alt+TAB. Com o arquivo "exemplo1.htm" aberto: 1. Posicione o cursor antes da expresso "Minha Primeira Pgina HTML " 2. Digite o comando para centralizar o texto: <div align="center">Minha Primeira Pgina HTML</div> 3. Salve a pgina clicando no menu ARQUIVOS e em SALVAR. 4. Volte ao navegador, clique no boto Atualizar (Explorer) ou Reload (Navigator) para ver o texto centralizado, Note que a tag <div> foi finalizada com a tag </div>. O recurso align=center, no precisa ser repetido no fechamento do comando, pois ele no uma tag e sim um atributo das tags <div> e </div>. 1. Em seguida, abra o Windows Explorer, clicando no boto INICIAR da Barra de tarefas do Windows. 2. Clique em PROGRAMAS, Windows Explorer. 3. Abra a pasta "curso_html" e clique duas vezes sobre o arquivo "exemplo1.htm", para abri-lo. O seu navegador se abrir, exibindo o arquivo com o ttulo e o texto inserido.. Responda s Perguntas abaixo: segundos para realizar essa atividade.

    O formato genrico de uma tag : </nome da tag>texto</nome da tag>. <nome da tag\>texto<nome da tag>. <nome da tag>texto</nome da tag>. <nome da tag>texto</nome da tag/>. N.D.A Para especificar o cabealho da pgina html qual comando e usado : <nome da tag\><nome da tag>. <nome da tag>texto</nome da tag/>. </head> e <head/> <head> e </head> N.D.A O comando <div> e </div> serve para : Serve para criar camadas logicas Alinhamento da tabela. Especificar o titulo da pgina html Especificar o cabealho da pgina html N.D.A Voc acertou 3 de 3 perguntas

    Uma das diferenas na confeco de pginas HTML e textos tradicionais que no possvel adicionar pargrafo em HTML apenas pressionando a tecla Enter. necessrio forar o fim do pargrafo ou a quebra de linha utilizando comandos especiais. As tags de pargrafos so: <p> e </p>. Com o arquivo "exemplo1.htm" aberto no Bloco de notas: 1. Posicione o cursor aps a tag </div>. Voc pode iniciar uma nova linha pressionando a tecla Enter. 2. Digite: <p>Inserindo um pargrafo HTML</p>. 3. Salve o arquivo, clicando no menu ARQUIVO e em SALVAR. 4. V para o navegador e d um clique no boto Atualizar (Explorer) ou Reload (Navigator), para visualizar o pargrafo inserido em sua pgina. A tag </p> no precisa do fechamento para funcionar. No entanto, em documentos que usam componentes avanados da linguagem, a correspondente de fechamento necessria. Por isso melhor se habituar a colocar o par de tags. Veja como simples inserir quebras de linhas em seu texto. A tag para quebra de linha : <br>. Esta tag pode ser inserida em qualquer ponto do corpo de sua pgina HTML. 1. Volte ao arquivo "exemplo1.htm" no Bloco de notas. 2. Aps a tag </p> digite: quebra de linha. Em seguida, digite a tag <br> e novamente digite: quebra de linha. A estrutura ficar assim: quebra de linha <br> quebra de linha. Obs: A tag <br> no utiliza a tag de fechamento.

    3. Salve o arquivo no Bloco de notas e atualize-o no navegador. Note que entre as duas frases, houve uma quebra de linha automtica. O cabealho uma tag que define o tamanho de cada linha de um texto da pgina. O tamanho do cabealho pode ser diferenciado. 1. No Bloco de notas, posicione o cursor aps o texto "quebra de linha" e pressione a tecla Enter para iniciar uma nova linha. 2. Digite: <h1>Cabealho<h1>. 3. Pressione a tecla Enter e digite: <h2>Cabealho</h2>. 4. Pressione a tecla Enter novamente e repita estes passos at checar a <h6>. 5. Salve o arquivo no Bloco de notas e atualize-o no navegador. A tag cabealho possui 6 opes de tamanho: de <h1> <h6>. As listas permitem que voc faa algumas listagens na pgina. As listas podem ser numeradas ou apenas sinalizadas com marcadores a cada pargrafo. As listas so utilizadas para fazer listagens numeradas ou com tpicos. Imagine que na pgina da BH Veculos que voc est construindo seja necessrio colocar o seguinte: Oferecemos veculos para todos os gostos: Novos

    Usados Passeio Lazer Populares Luxuosos E muito mais... Veja alguns de nossos modelos: Astra e Vectra Audi Blazer Voc j deve ter percebido que o bloco de notas no tem os cones de numerador e marcador para voc clicar e os mesmos serem automaticamente inseridos. Isso porque para que o browser seja capaz de reconhecer os marcadores no bastaria clicar em um ou dois cones, mas necessrio colocar o texto desejado entre as tags com os comandos que iro orientar o browser a exibir os marcadores ou os numeradores. As tags que determinam o incio e o fim dos marcadores e numeradores so diferentes, variam de acordo com o tipo de lista que voc deseja, mas cada linha da lista iniciada sempre com o comando <LI>, que no um comando do tipo incio fim. Listas Numeradas: <OL> <LI> </OL>

    1. <OL> usa na construo de LISTAS NUMERADAS, requer o comando <LI> para digitar os dados da lista. 2. <LI> usado para a definio de cada linha na lista numerada, digitar o texto logo em frente. 3. </OL> finaliza a lista numerada. Atributos: TYPE=valor, lista numerada tipo: 1. Valor = a -> Caracteres de numerao como letras minsculas. 2. Valor = A -> Caracteres de numerao como letras maisculas. 3. Valor = I -> Caracteres de numerao como numerais romanos em maisculas. 4. Valor = i -> Caracteres de numerao como numerais romanos em minsculas. 5. Valor = 1 -> Caracteres de numerao como nmeros padro. START=valor, em que nmero ou letra vai se iniciar a enumerao da lista. Ex.: Para iniciar na letra E - valor = 5 Ex.: Para iniciar no numeral IV - valor = 4 Ex.: Para iniciar no nmero 10 - valor = 10 Estrutura de uma lista com os atributos acima: <OL type=A> <LI> Primeira linha de texto da lista <LI> Segunda linha de texto da lista

    </OL> Listas no ordenadas (Marcadores) <UL> <LI> </UL> 1. <UL> usado na construo de LISTAS NO ORDENADAS, requer o uso do comando <LI> para cada linha de dados. 2. <LI> para a definio de cada linha da lista no ordenada, digitar o texto logo em frente. 3. </UL> finaliza a lista no ordenada. Atributos: TYPE=valor, define marcador do tipo: 1. Valor=SQUARE -Define marcador do tipo quadrado slido (preenchido). 2. Valor=DISC -Define marcador do tipo crculo slido (preenchido) PADRO. 3. Valor=CIRCLE -Define marcador do tipo crculo transparente. Estrutura de uma lista com os atributos acima: <OL type=1> <LI> Abaixo exemplo lista no ordenada <UL type=square> <LI> Dados da lista no ordenada <LI> Linha dois da lista </UL> Link um "atalho" que pode lev-lo a outras partes do documento ou a outros documentos. Em pginas HTML, os links so representados por textos sublinhados ou imagens. Quando voc aponta o mouse para um link, o cursor se transforma em uma mozinha apontando. Existem dois tipos de imagens que podem ser inseridas em uma pgina. Os formatos de imagens reconhecidos pelos navegadores so: formato .jpg e formato .gif. O formato jpg ou jpeg (Joint Photografic Experts Group) mais utilizado para fotos. O formato gif (Graphics Interchange Format) mais utilizado para desenhos vetoriais, como os cliparts. Para criar uma imagem com extenso .gif ou .jpg necessrio utilizar um programa de edio grfica, como por exemplo o Photoshop, Fireworks ou o CorelDRAW. A incluso de imagens em uma pgina HTML d mais qualidade ao trabalho. fcil incluir uma imagem na pgina HTML. A sintaxe :<img src="nome da imagem"> No necessrio fechar esta tag. A imagem criada deve ser salva na mesma pasta que contm as pginas HTML, caso utilize uma pasta diferente da qual as pginas HTML esto salvas deve se utilizar a sintaxe da seguinte maneira: <img src="PASTA/nome da imagem">, esse procedimento deve ser feito para que o navegador possa exibir as imagens.

    possvel inserir uma imagem de fundo na pgina HTML, caso no queira utilizar uma nica cor. O comando de insero de imagem "background", um atributo da tag <body>. Ao digitar a estrutura bsica, substitua a tag <body> por este comando: <body background= "nome da imagem.gif ou .jpg">. A imagem precisa estar arquivada na pasta onde se encontra a pgina HTML correspondente, caso esteja em uma pasta diferente utilize o comando da seguinte maneira <body background= "PASTA/nome da imagem.gif ou .jpg">. Exemplo: <html> <head> <title>Titulo do Site</title> </head> <body bgcolor=#FFFF00> <a href="pasta/pagina.htm">clique aqui</a> <img src=pasta/imagem.jpg> <b>texto em negrito</b> </html> Note que sempre iniciamos um codigo com sinal de menor < e sempre finalizamos com sinal de maior > sobre tudo, em sua maioria os codigos HTML so finalizados com barra antes do ultimo argumento, observe a linha 3 antes do ultimo title, podemos facilmente visualizar a / demonstrando o final do argumento. Tabelas so usadas na maioria das pginas da Web. Elas do uma aparncia mais elegante a pgina alm de permitirem orientar o browser a posicionar textos e imagens lado-alado na pgina. Uma das utilidades da tabela quando voc precisa colocar uma imagem de uma lado e o texto deve ser escrito do outro lado. Com o que voc j conhece do html, j pode perceber que isso no possvel. Uma forma de conseguir posicionar os objetos e textos na pgina atravs do recurso tabela. Voc pode inserir o texto e as imagens dentro de clulas da tabela. Neste caso o usurio no deve visualizar as bordas da tabela, o que voc ver que muito simples de resolver. Outra grande utilidade do recurso tabela quando voc precisa construir realmente uma tabela de dados. Pode ser uma tabela de e-mails, de nomes, de sites e etc. As tags de tabela so do tipo incio e fim <TABLE> e </TABLE>. Alm dos atributos que voc j conhe da linguagem HTML, aqueles que ficam dentro da tag, ainda existem diversos comandos, que inseridos entre as tags de tabela permitem trabalhar bem as linhas e colunas da tabela. Os comandos inseridos entre os comandos de tabela tambm possuem seus atributos. <TABLE> usado para se definir uma tabela HTML, seus atributos so: 1. BORDER ="valor" define a largura da borda externa da tabela (contorno). Se no incluir a atribuio da borda aparecer uma tabela sem bordas. 2. CELLSPACING="valor" define o espaamento horizontal entre uma clula e outra. Refletir na largura da borda. 3. CELLPADDING="valor" define o espaamento vertical entre uma clula e outra. Sem refletir na largura da borda.

    4. WIDTH="valor %" define a quantos % de largura dever conter a tabela em relao largura da tela. 5. HEIGHT="valor %" define quantos % de altura dever conter a tabela em relao altura da tela. 6. BGCOLOR="#cor" define a cor de fundo da tabela. 7. BACKGROUND="imagem" define uma imagem como fundo da tabela. Comandos que sero inseridos entre as tags <TABLE> </TABLE>: 1. <CAPTION> e </CAPTION> definem o Ttulo da Tabela e ALINHA de acordo com o tamanho da tabela. 2. <TR> e </TR> para se definir o incio e o fim de cada linha da tabela (table row) Atributos: 1. ALIGN="valor" define alinhamento do texto dentro da tabela. 2. LEFT= alinhamento esquerda. 3. RIGHT= alinhamento direita. 4. CENTER= alinhamento ao centro. 5. VALIGN="valor" define o alinhamento vertical dentro da clula. 6. TOP = Alinha no topo da clula. 7. MIDDLE = Alinha no meio das clulas 8. BOTTON = Alinha na parte inferior da clula.

    <TH> e </TH> Define o cabealho da tabela (table header)Iniciar e finalizar cada clula do cabealho. Atributos: ALIGN= valor Define alinhamento horizontal dentro da clula. Se o alinhamento j foi definido em TR no necessrio defini-lo aqui. LEFT=alinhamento esquerda. RIGHT=alinhamento direita. CENTER=alinhamento ao centro. VALIGN=valor Define o alinhamento vertical dentro da clula. Se o alinhamento j foi definido em TR no necessrio defini-lo aqui. TOP = Alinha no topo da clula. MIDDLE = Alinha no meio das clulas. BOTTON = Alinha na parte inferior da clula. COLSPAN=valor Instrui o visualizador (browser) a unir um nmero especfico de colunas da tabela. (Ocupar lugar de duas clulas, mesclar).

    ROWSPAN=valor Instrui o visualizador a unir um nmero especfico de linhas da tabela (Mesclar duas linhas).

    NOWRAP Instrui o visualizador a no distribuir o texto do cabealho dentro da clula da tabela <TD> </TD> Define como ficar o contedo de cada clula da Linha (table data) Atributos ALIGN= valor Define o alinhamento horizontal dentro da clula. Se o alinhamento j foi definido em TR no necessrio defini-lo aqui. LEFT=alinhamento esquerda. RIGHT=alinhamento direita. CENTER=alinhamento ao centro. VALIGN=valor Define o alinhamento vertical dentro da clula. Se o alinhamento j foi definido em TR no . necessrio defini-lo aqui. TOP = Alinha no topo da clula. MIDDLE = Alinha no meio das clulas. BOTTON = Alinha na parte inferior da clula. COLSPAN=valor Instrui o visualizador (browser) a unir um nmero especfico de colunas da tabela. (Ocupar lugar de duas clulas, mesclar). ROWSPAN=valor Instrui o visualizador a unir um nmero especfico de linhas da tabela (Mesclar duas linhas). Vamos construir um pgina com o nome de exemplo2..htm. Abra o bloco de notas e no arquivo em branco que surge, voc ir digitar o cdigo da pgina exemplo2.htm. Salve o arquivo com o formato htm para poder visualizar no Browser. Clique no menu Arquivo e escolha a opo Salvar como. Abra a pasta Meus Documentos e dentro dela vai existir uma pasta chama "curso_html" caso no tenha crie uma. Abra ento a pasta. Na caixa de texto Nome do arquivo, digite exemplo2.htm. No deixe de digitar a extenso e em seguida na caixa de texto Salvar com o tipo, selecione Todos os arquivos (*.*). Agora clique no boto Salvar.

    Para visualizar o arquivo exemplo2.htm voc precisa abrir o Browser. Minimize todas as janelas e d um duplo clique no cone do Internet Explorer que se encontra na rea de trabalho. Na Barra de Menu do Internet Explorer, clique na opo Arquivo, selecione Abrir, clique no boto Procurar, abra a pasta Meus Documentos, em seguida abra a pasta curso_html, selecione o arquivo exemplo2.htm, clique no boto Abrir. Na janela Abrir o caminho do arquivo j foi preenchido, bastando agora clicar no boto OK O formulrio uma forma que o webmaster da pgina possui de colher os dados que o interessam. Para manipular a pgina ou receber informaes que o interessa. Funciona como um questionrio ou uma ficha de inscrio, onde o proprietrio da pgina faz perguntas e o usurio responde. Como o webmaster da pgina que est fazendo as perguntas, ele pode coletar os dados que precisa e posteriormente poder estar cadastrando esses dados num banco de dados ou usando para manipaular alguns elementos da pgina. importante, no entanto, tomar cuidado para que no se torne desagradvel para o usurio preencher um formulrio muito grande. Voc mesmo j deve ter preenchido um formulrio alguma vez e com certeza teve vontade de deixar uma srie de campos, ou de nem mesmo preencher nenhum. Para que o formulrio se torne atraente aos olhos do usurio, ele tem que oferecer algo mais, como algum bom servio, envio de algum conteudo de qualidade aps o cadastro do formulrio e etc. Ao termino do preenchimento do formulrio, o usurio direciona o formulrio ao seu destino final. Para que isso seja possvel, necessrio que exista uma rotina, algumas linhas de cdigo, normalmente fornecidas pelo provedor que vai hospedar o site. Os comando de formulrio so basicamente trs: 1. TEXTAREA: define uma rea onde o usurio poder digitar linhas de texto. 2. SELECT: define opo em um quadro de rolagem, um lista drop down, permitindo que o usurio selecione a opo desejada. 3. INPUT: define botes e caixas de seleo, botes para limpar ou enviar os dados, linhas de texto, etc. As tags de formulrio so do tipo incio e fim <FORM> </FORM>. Alm dos atributos que voc j est habituado a utilizar, aqueles que ficam dentro da tag, os comandos de formulrio devem ser inseridos entre as tags <FORM> e </FORM>, de maneira semelhante ao que foi feito com os comandos de tabela. Os comandos inseridos entre os comandos de formulrio possuem tambm seus prprios atributos. <FORM> Define o incio do formulrio, atributos: 1. METHOD="POST" o mtodo mais utilizado o POST, que envia cada informao do formulrio de forma separada para o URL (endereo de origem). 2. ACTION="email ou pgina que receber as informaes" fique atento pois cada provedor pode disponibilizar bibliotecas que contero as ferramentas para que o envio dos dados do formulrio sejam possveis. ENTRE O <FORM> E O </FORM> SERO INSERIDAS AS TAGS TEXTAREA, SELECT E INPUT, que voc ver ao decorrer do curso. Essa ser a primeira linha do formulrio.

    </FORM> Finaliza as operaes de formulrio. Na construo de formulrios um comando que pode ser muito til o <PRE> ele do tipo incio fim. Voc ainda no viu esse comando porque existe um inconveniente ele usa uma fonte padro no muito bonita e no permitir a formatao. Em um formulrio porm, ele pode ser de grande utilidade, evitando que voc tenha que usar diversos <BR> ou <P>. <INPUT TYPE="HIDDEN" NAME="email" VALUE= "email@servidor.com.br"> No tipo HIDDEN podem ser utilizados os seguintes atributos: 1. NAME define o Nome dos dados. 2. VALUE indica para onde sero enviados os dados de todo o formulrio. OBS: Deve ser colocado logo abaixo do elemento FORM. Dica para todos os atributos input: Em vrios tipos de INPUT que voc ver a seguir (PASSWORD, RADIO, TEXT, CHECKBOX) o atributo NAME, apesar de no ser um campo obrigatrio, seu uso indicado, pois ele que define o nome dos dados, significa muito mais. ele que no e-mail recebido pelo proprietrio do site aparece do lado esquerdo, na frente do que foi marcado ou digitado no campo pelo usurio.

    Utilizado quando se deseja armazenar dados comuns digitados pelo usurio, email, username, idade, etc. <INPUT TYPE="TEXT" NAME="EMAIL" SIZE="15" MAXLENGTH="35"> No tipo TEXT podem ser utilizados os seguintes atributos: NAME = define o Nome dos dados. SIZE = define o tamanho do campo que aparecer na tela. MAXLENGTH = define o tamanho mximo de caracteres que podem ser digitados no campo pelo usurio. Utilizado quando se deseja armazenar dados confidenciais que no aparecero na tela ao serem digitados, por exemplo uma senha. <INPUT TYPE="PASSWORD" NAME="SENHA" SIZE="10" MAXLENGTH="6"> No tipo PASSWORD podem ser utilizados os seguintes atributos: NAME = define o Nome dos dados. SIZE = define o tamanho do campo que aparecer na tela.

    MAXLENGTH = define o tamanho mximo do texto a ser digitado pelo usurio. Define uma caixa de seleo para o usurio marcar a opo desejada. <INPUT TYPE="CHECKBOX" NAME= "CURSANDO" VALUE="HTML">Curso HTML No tipo CHECKBOX pode ser utilizados os seguintes atributos: NAME = define o Nome dos dados. VALUE = define o valor a ser retornado para o Nome escolhido.

    Quando os dados forem enviados ao servidor aparecero assim: CURSANDO HTML (de acordo com o exemplo acima). Um boto aparece indicando uma funo de APAGAR todos os dados preenchidos na pgina (caso o usurio desista das opes que selecionou): <INPUT TYPE="RESET" VALUE="APAGAR"> VALUE = Define o texto que aparecer no Boto. Um boto aparece indicando uma funo de MANDAR todos os dados preenchidos para o servidor. <INPUT TYPE="SUBMIT" VALUE="MANDAR"> VALUE = Define o nome que aparecer no Boto. Veja o formulrios com dados j preenchidos pelo usurio.

    Aps preencher o formulrio o usurio pode clicar no boto limpar e apagar todos os campos do formulrio ou clicar em um boto Enviar. Veja a seguir de que forma os dados chegaro por e-mail:

    nome: Dione Neris da Silva email: dioneneris@msn.com mensagem: Cursos HTML A tag textarea permite que voc defina uma caixa de texto com um determinado nmeros de linhas e colunas para que o usurio digite comentrios, idias, crticas e etc. um comando do tipo incio e fim determinado pelos comandos <TEXTAREA> e </TEXTAREA>. Veja a seguir os cdigos do comando TEXTAREA: <TEXTAREA NAME="Area de Texto" ROWS=4 COLS=40 VALUE= "Comentrios"> Texto Padro </TEXTAREA> 1. NAME="nome", apesar de no ser obrigatrio, ele define o nome dos dados. O nome deve ser escolhido como um indicativo do que ser contido na caixa de texto. 2. ROWS= "n" no obrigatrio mas importante para se definir quantas linhas ter a caixa de texto na tela. "n" indica o nmero de linhas da caixa. 3. COLS="n" No obrigatrio. "n" indica o nmero de colunas da caixa 4. VALUE="texto" no obrigatrio, mas indica qual o texto ser enviado como ttulo daquele comentrio quando for enviado para o local de origem. 5. Texto Padro o texto que aparecer dentro da caixa de texto na Home Page afim de identific-la para o usurio. Pode usar textos como: Caixa de Comentrios, Idias, Crticas e etc. Qualquer texto entre as tags <TEXTAREA> e </TEXTAREA> aparecer dentro da caixa de texto. Agora que a pgina est pronta, voc precisa inserir os cdigos fornecidos pelo provedor no local correto para poder receber o formulrio de volta na sua caixa de mensagens. Este cdigo depende dos servios que seu provedor disponibiliza para voc ou dos recursos que ele suporta, como recursos de linguagens dinmicas. Um exemplo de cdigo fornecido pelo provedor mostrado abaixo: <form method="POST" action="http://www.provedor.com.br/cgi-bin/mailform.exe" name="formmail"> <input type="hidden" name="_1_MailFrom"value="emailde@provedor.com"> <input type="hidden" name="_1_MailServer" value="smpt.provedor.com.br"> <input type="hidden"name="_1_MailSubject" value="FORMULRIO ENVIADO"> <input type="hidden" name="_1_MailTo" value="emailpara@provedor.com.br"> <input type="hidden" name="_1_SuccessDocument" value="http://www.domnio.com.br/sucesso.htm"> Como dito anteriormente, este cdigo muda de provedor para provedor, assim voc pode at inseri-lo no cdigo da pgina, mas no ir funcionar. Para colocar este cdigo em sua pgina, faa o seguinte: Na pgina que contem o formulrio, encontre a linha onde est <FORM METHOD="..." ACTION="...">

    Selecione esta linha e apague-a, no lugar dela, digite o cdigo que o provedor forneceu para voc.

    Voc j percebeu que vai precisar construir uma pgina de resposta, que ser carregada pelo browser do usurio no momento em que ele postar os dados no formulrio. Essa pgina pode ter uma mensagem de confirmao, um boto para voltar para a pgina inicial e etc. Frame um recurso muito utilizado na internet, pois facilita a navegao no site, seu gerenciamento e manuteno. O frame divide a janela do browser em quadros e abre uma pgina diferente em cada quadro. O nmero de quadros e tamanho e posio de cada um deles determinado por quem constri o site. Voc pode perceber que no site que est construindo precisou fazer um link para voltar pagina principal em quase todas as pginas do site. Imagine agora que o usurio esteja navegando no site da BH Veculo e se encontra no momento na pgina veic1.htm. Se ele quiser assinar o livro de visitas (preencher o formulrio) deve votar pgina principal, onde encontrar o link para a pgina form.htm. Para facilitar a vida do usurio, seria interessante que em cada pgina tivesse um link para todas as outras. Num site pequeno voc pode at pensar em fazer isso, mas quando o site possui um nmero grade de pginas, j comea a ficar muito trabalhoso e pior ainda quando voc precisar fazer alguma alterao no site, do tipo mudar o nome de um arquivo ou acrescentar uma nova pgina. Nos dois casos voc precisaria entrar em todas as pginas do site alterando ou acrescentando os links. Com o recurso frame o problema resolvido de forma muito simples, bastando modificar a pgina que possui os links O frame uma pgina cujo contedo no visualizado em nenhum momento. Ela serve para dividir o browser em quadros, determinar a quantidade de quadros, a posio e tamanho de cada um deles e mais, qual arquivo (pgina) ser aberto em cada um dos quadros. A nica coisa que o usurio v da pgina de frame o title, o que significa numa pgina de frame no existe o comando <BODY> e uma srie de outros. Antes de construir o frame, imagine exatamente qual o resultado que voc deseja obter. As figuras a seguir o ajudaro a entender melhor. A primeira mostra uma pgina com 2 quadros horizontais, de tamanhos diferentes e a segunda com 2 frames verticais, tambm de tamanhos O comando <FRAME> do tipo incio e fim, possui atributos que so inseridos dentro da tag e comandos que ficam entre <FRAME> e </FRAME>. Veja a seguir: <FRAMESET> Responsvel pela criao dos FRAMES atributos: COLS ="n%,m%" Define que a diviso desejada em COLUNAS, onde n% determina a porcentagem de ocupao da primeira coluna em relao a tela e m% a porcentagem de ocupao da segunda coluna. Obs: os valores podem ser dados tambm em pixels e a quantidade de valores entre vrgulas determina o nmero de divises na tela.

    ROWS ="n%,m%" Define que a diviso desejada em LINHAS, onde n% determina a porcentagem de ocupao da primeira linha em relao a tela e m% a porcentagem de ocupao da segunda linha. Obs: os valores podem ser dados tambm em pixels e a quantidade de valores entre vrgulas determina o nmero de divises na tela. BORDER ="n" Define a espessura da borda. <FRAME> Comando onde ser mostrado o que deve ser carregado em cada diviso do frame. Para cada frame definido no comando <FRAMESET> necessrio a utilizao de um comando <FRAME> atributos: SRC = "nome do arquivo" Define o nome do arquivo que ser carregado no frame NAME = "nome" Define o nome ou apelido do frame que ser muito til quando voc quiser que um arquivo aparea em um dos frames atravs de um link NORESIZE Impossibilita que o usurio redimensione a largura do frame. SCROLLING = valor Define quando a barra de rolagem ser apresentada no frame. Valor = Never (nunca), Always (sempre) e se voc no especificar esse atributo a barra de rolagem aparecer se necessrio. </FRAMESET> Fecha o comando <FRAMESET> OBS: Para que a pgina que ser carregada ao abrir o site j mostre o frame na tela, ela deve ser a pgina index.htm. O <TITLE> escolhido para ela ser exibido em todo o site. O comando <FRAME> do tipo incio e fim, possui atributos que so inseridos dentro da tag e comandos que ficam entre <FRAME> e </FRAME>. Veja a seguir: <FRAMESET> Responsvel pela criao dos FRAMES atributos: COLS ="n%,m%" Define que a diviso desejada em COLUNAS, onde n% determina a porcentagem de ocupao da primeira coluna em relao a tela e m% a porcentagem de ocupao da segunda coluna. Obs: os valores podem ser dados tambm em pixels e a quantidade de valores entre vrgulas determina o nmero de divises na tela. ROWS ="n%,m%"

    Define que a diviso desejada em LINHAS, onde n% determina a porcentagem de ocupao da primeira linha em relao a tela e m% a porcentagem de ocupao da segunda linha. Obs: os valores podem ser dados tambm em pixels e a quantidade de valores entre vrgulas determina o nmero de divises na tela. BORDER ="n" Define a espessura da borda. <FRAME> Comando onde ser mostrado o que deve ser carregado em cada diviso do frame. Para cada frame definido no comando <FRAMESET> necessrio a utilizao de um comando <FRAME> atributos: SRC = "nome do arquivo" Define o nome do arquivo que ser carregado no frame NAME = "nome" Define o nome ou apelido do frame que ser muito til quando voc quiser que um arquivo aparea em um dos frames atravs de um link NORESIZE Impossibilita que o usurio redimensione a largura do frame. SCROLLING = valor Define quando a barra de rolagem ser apresentada no frame. Valor = Never (nunca), Always (sempre) e se voc no especificar esse atributo a barra de rolagem aparecer se necessrio. </FRAMESET> Fecha o comando <FRAMESET> OBS: Para que a pgina que ser carregada ao abrir o site j mostre o frame na tela, ela deve ser a pgina index.htm. O <TITLE> escolhido para ela ser exibido em todo o site. TARGETS Este comando indicar ao navegador em qual dos frames a pgina solicitada atravs de um link, dever ser aberta. Por exemplo, voc dever acrescentar uma target para que ao clicar em um link na parte superior, a pgina a que o link se refere, aparea na parte inferior da tela. Tomando como base que o "menu" ser o arquivo "menu.htm", voc dever cri-lo colocando os links que voc deseja, porm, de uma forma especial, onde ser usada uma target. Esta target dever vir logo aps o comando do link, antecedida de um simples espao e tambm, acompanhada do nome que voc deu frame direita. Observe em frames o comando: <frame name="inferior", onde inferior o atributo NAME do comando FRAME, inserido no arquivo index.htm. Exemplo de um link com uma Target: <A HREF="script.htm" target="INFERIOR">Scripts</A>

    Onde script.htm o nome da pgina que voc deseja que seja aberta na parte inferior do browser quando o usurio clicar no link que voc nomeou como Scripts. No se esquea de que a target sempre cobrar o nome do frame com os mnimos detalhes. Se h letras maisculas no nome da Frame, voc dever tambm, colocar letras maisculas na target.

    Boa sorte .. ass: bruno

    Você também pode gostar