Scribd Logo
Upload

Welcome to Scribd!

  • 2618 - Introducao Sobre HTML

    Uploaded by

    Maycon Sanches
    19 views52 pages

    Original Title

    2618_Introducao Sobre HTML

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    19 views52 pages

    2618 - Introducao Sobre HTML

    Uploaded by

    Maycon Sanches

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 52

    Introduo sobre HTML

    A HTML (Hyper Text Markup Language) uma linguagem utilizada para edio de documentos da web que possui etiquetas para formatar o texto e figuras que sero apresentados pelo navegador e criar ligaes entre paginas, criando o conceito de hipertexto. Ela composta por comandos colocados entre parnteses (<e>). Estes comandos so chamados de etiquetas (tags), que informam ao navegador como os textos e imagens sero exibidos na paginas.

    Toda

    pagina

    web

    um

    arquivo

    de

    texto

    gravado

    com

    extenso.htm(Windows) ou.html (Unix) que possui comandos HTML e esta gravada em um servidor. Quando o computador cliente solicita uma pagina, o servidor envia para ele o arquivo que o navegador se recarregar de interpretar e exibir pagina solicitado.

    Objetivo desta apostila e proporcionar um treinamento terico e pratico e eficaz que o usurio consiga criar sites na internet, utilizando a linguagem HTML. Utilizaremos uma linguagem simples e clara alm de darmos exemplos prticos, mostrando passo a passo a construo de paginas, permitindo que todos compreendem e assimilem as informaes e consigam executar seus trabalhos de forma pratica e eficiente.

    COMANDO DE HTML
    Como voc j sabe, um documento HTML, possui tags que informam como a pagina ser exibida pelo navegador. A maioria dessas tags possui tambm sua correspondente de fechamento.

    <nome da tag> texto formatado</nome da tag> Este fechamento necessrio porque estas tags servem para definir a formatao de uma poro de texto, e por isso devemos marcar onde comea e termina com a formatao especifica por ela.

    Comentrios
    Todo bom programador inclui comentrios em seu cdigo para uma posterior manuteno feita por ele ou por outra pessoa. Estes comentrios no interpretados pelo navegador, sendo teis no entendimento de como o cdigo esta sendo executado. Um comentrio em HTML comea com <! e termina com ->, no podendo ser utilizados - dentro do comentrio. Por exemplo<!- Este texto um comentrio->

    A estrutura bsica de um documento HTML : <html> <head> <title> </title> </head> <body> </body> </html>

    <html> </html>

    Marca o inicio e o final do documento html

    <head> </head>

    Os cabealhos contem informaes sobre o documento

    <title> </title>

    A principal informao contida no cabealho o titulo do documento que aparece na barra do navegador e est delimitado pela etiqueta

    <body> </body>

    Os corpos do documento contem as informaes que sero exibidas pelo navegador, tais como pargrafos, imagens , listas e etc. e determinado pela etiqueta <body>

    EXEMPLO
    Para iniciar temos: Criar uma pasta no diretrio (c) Obs.: toda vez que voc for criar seu programa salve na pasta que voc criou O programa BLOCO DE NOTAS

    Para funcionar o primeiro programa: Salve este documento com o nome de 1.htm na pasta que voc criou. Clique 2 vezes no navegador Voc ir ao navegador na barra de menu arquivo e escolha a opo abrir

    Clique no menu arquivo

    Escolha a opo abrir

    Abrir uma janela e depois voc ir clicar no boto procurar

    Abrir uma janela no diretrio meus documento e voc ir clicar em cima de sua pasta que voc criou 2 vezes

    Depois voc ira clicar em cima do seu documento uma vez e clicar no boto abrir

    Logo aparecer a janela e depois s clicar no boto ok

    Ai esta seu 1 programa

    Agora voc aprendeu a editar, salvar como html e abrir um documento no navegador est na hora de comear aprender como formatar o texto, inserir figuras e links e criar tabelas.

    CABEALHOS
    O HTML possui a etiqueta <H> que cria cabealhos na rea de visualizao das paginas. Existem seis tipos de cabealhos indo de <H1> a <H6>. Sendo <H1> de tamanho maior que <H6>. Agora faa esse pequeno exemplo: <html> <head> <title> Testando Cabealhos</title> </head>

    <body> <H1>Cabealho de nvel 1</H1> <H2>Cabealho de nvel 2</H2> <H3>Cabealho de nvel 3</H3> <H4>Cabealho de nvel 4</H4> <H5>Cabealho de nvel 5</H5> <H6>Cabealho de nvel 6</H6> </body> </html> Agora visualize o exemplo

    Os cabealhos possuem atributo ALIGN que faz o alinhamento do texto. ALIGN= (left, center, right e justify)

    justificado esquerda direita

    centralizado

    Defina o atributo ALIGN para as etiquetas de cabealhos como mostra no exemplo a seguir: <html> <head> <title>Testando Cabealhos</title> </head> <body> <H1 align=center> Cabealho de nvel 1</H1> <H2 align=left>Cabealho de nvel 2</H2> <H3 align=right>Cabealho de nvel 3</H3> </body> </html> Salve seu programa e depois visualize

    PARGRAFOS
    Como vimos no primeiro exemplo, o HTML no quebra ou avana linhas quando pressionamos a tecla enter, ele s avana uma linha aps um comando especifico que mande ele fazer isto. Existem duas etiquetas quer permitem uma quebra de linha, so elas: <BR> e <P>. A primeira avana uma linha imediatamente aps ser encontrada, e a segunda fora um novo pargrafo inserindo uma linha em branco separando blocos de texto.

    <BR>
    Este comando quebra uma linha em determinado ponto, dando

    continuidade ao texto em outra linha, no possuindo seu correspondente fechamento (etiqueta vazia). Exemplo: <html> <head>

    <title> exemplo</title> </head> <body> <H1 align=center>Etiqueta BR</H1> Chama-se genericamente informtica ao conjunto das Cincias da Informao, estando includas neste grupo: a teoria da informao, o processo de clculo, a anlise numrica e os mtodos tericos da representao dos conhecimentos e de modelagem dos problemas. Habitualmente usa-se o termo informtica para referir<br> especificamente o processo de tratamento automtico da informao por meio de mquinas eletrnicas definidas como computadores. O estudo da informao comeou na matemtica quando nomes como Alan <br>Turing, Kurt Gdel e Alonzo Church, comearam a estudar que tipos de problemas poderiam ser resolvidos, ou computados, por elementos humanos que seguissem uma srie de instrues simples de forma automtica, independente do tempo requerido para isso. </body> </html> Visualize seu programa

    <P>
    Esta tag alm de causar uma quebra de linha, tambm adicionar um alinha em branco. Esta etiqueta pode ser utilizada somente no final do pargrafo ou juntamente com sua correspondente de fechamento</p>. Como a tag <H>, ela tambm possui o atributo ALIGN. Modifique o exemplo anterior pela etiqueta <p> e visualize no navegador o resultado. <html> <head> <title> exemplo</title> </head> <body>

    <p align=center>Etiqueta P</p> Chama-se genericamente informtica ao conjunto das Cincias da Informao, estando includas neste grupo: a teoria da informao, o processo de clculo, a anlise numrica e os mtodos tericos da representao dos conhecimentos e de modelagem dos problemas.

    Habitualmente usa-se o termo informtica para referir<br> especificamente o processo de tratamento automtico da informao por meio de mquinas eletrnicas definidas como computadores. O estudo da informao comeou na matemtica quando nomes como Alan <br>Turing, Kurt Gdel e Alonzo Church, comearam a estudar que tipos de problemas poderiam ser resolvidos, ou computados, por elementos humanos que seguissem uma srie de instrues simples de forma automtica, independente do tempo requerido para isso. </body> </html> Visualize seu programa

    SEPARADORES <HR>
    Separadores so linhas horizontais que dividem o documento, destacando ttulos e separadores diferentes tipos de informao. <html> <head> <title> exemplo </title> </head> <body> <h1 align=center>Separadores</h1><hr> Chama-se genericamente informtica ao conjunto das Cincias da Informao, estando includas neste grupo: a teoria da informao, o processo de clculo, a anlise numrica e os mtodos tericos da representao dos conhecimentos e de modelagem dos problemas. <hr> Exemplo muito bom </body> </html> Visualize seu programa

    FORMATAO DE TEXTO
    O texto em uma pagina Web pode ser formatado como se estivesse em um programa editor de texto. O html possui etiquetas que realizam esta formatao sendo necessrio utilizarem em todas elas a sua correspondente de fechamento, o inicio e o fim, pois seno espalhar em toda sua pagina e no s onde voc escolheu.

    ETIQUETAS <B> TEXTO </B> <I> TEXTO </I> <U> TEXTO </U> <IT> TEXTO </IT> <STRIKE> TEXTO </STRIKE> <SUP> TEXTO </SUP> <SUB> TEXTO </SUB> <BIG> TEXTO </BIG> <SMALL> TEXTO </SMALL> <MARQUEE>TEXTO</MARQUEE>

    FNES NEGRITO ITALICO SUBLINHADO TELETIPO RISCADO SOBRESCRITO SUBSCRITO FONTE UM POUCO MAIOR FONTE UM POUCO MAIOR LETREIRO DIGITAL

    Digite o exemplo abaixo: <html> <head> <title>exerccio</title> </head> <body> <b><i><u>EXERCICO DE FORMATAO</b></i></u> <marquee> MEU NOME FULANO DE TAL</marquee> </body> </html>

    Visualize o exemplo

    BLOCOS
    Com o HTML podemos tambm criar blocos de texto destacando-os do restante da pagina. As etiquetas utilizadas so as seguintes: <BLOCKQUOTE> E <PRE>

    BLOCKQUOTE
    BLOCKQUOTE destaca um bloco de texto separando-o em um novo pargrafo. Ele pode tanto aparecer itlico quando endentado, dependendo do navegador utilizado. Digite exemplo abaixo:

    <html> <head> <title>blockquote</title> </head> <body> <h2>BLOCKQUOTE</h2><hr> Os dias esto passando muito rpido, por isso: <blockquote> Nunca deixe de realizar as tarefas de sua responsabilidade <br> O mais rpido possvel, </blockquote> Tenha isso em mente </body> </html> Visualize o programa

    PRE
    Utilizamos etiqueta PRE para inserir na pagina um texto com o mesmo formato que ele foi digitado, respeitando os espaamentos, fontes, marcas de tabulao e quebras de linhas com a tecla enter. Digito exemplo abaixo <html> <head> <title>Pre</title> </head> <body> <h2>PRE</h2><hr> POPULAO BRASILEIRA <PRE> <b>ANO</b> 1940 1950 1960 1970 1980 1990 </pre> FONTE: IBGE <b>TOTAL</b> 41.236 51.944 95.589 120.659 150.056 190.965

    </body> </html> Visualize o programa

    Agora retire a etiqueta pr e visualize como que fica o programa

    Fonte
    A linguagem HTML possui um recurso par alterar o tipo, cor e tamanho da fonte utilizada nos textos. Estes recursos so implementados com a etiqueta <FONTE> e seus atributos SIZE (tamanho), FACE (tipo) e COLOR (cor). O atributo SIZE determina o tamanho da fonte a ser mostrada e varia em numero inteiros de 1 at 7, sendo que o numero 3 o padro. <font>Fonte tamanho 3<font><br> <font size=5> Fonte tamanho 5</font><br> <font size=2>Fonte tamanho 2</font>

    Como o atributo FACE altera o nome da fonte que ser mostrada pelo navegador. Caso a fonte especificada no esteja instalada no computador do usurio, o sistema substituir pela fonte padro. Mas possvel evitar esta substituio criando uma lista preferencial de fonte, onde se no for encontrada a primeira, a segunda ser utilizada e assim por diante.

    <html> <head> <title> Testando Cabealhos</title> </head> <body> <H1 align=left>Poema</H1>

    <font face='comic sans ms'> meu corao desmaia pensativo, </font><br>. <font face='verdana'>Cismado em tua rosa predileta. </font><br> </body> </html>

    Por ltimo temos COLOR que especifica a cor do texto. A cor e escolhida utilizando-se o formato hexadecimal, RGB ou entre as dezesseis constantes para o nome de cor. O formato hexadecimal composto de um numero nesta base precedida pelo caracter# indicando a intensidade de cada cor primaria (red, gren e blue) na composio da cor final. Estes valores variam de 00 (0) a FF (255) para cada uma das cores.

    <font color=green>texto em verde</font> <font color=oliver>texto em verde</font> COR BLACK SILVER GRAY WHITE MAROON RED PURPLE FUCHIA HEXADECIMAL #000000 #C0C0C0 #808080 #000000 #800000 #FF0000 #800080 #FF00FF COR GREEN LIME OLIVE YELLOW NAVY BLUE TEAL AQUA HEXADECIMAL #008000 #00FF00 #808000 #FFFF00 #0000080 #0000FF #008080 #00FFFF

    No exemplo a seguir mostrado o uso do atributo COLOR, e repare que esta sendo usado um encadeamento da etiqueta FONT. A primeira etiqueta

    determina a fonte utilizada e o tamanho do texto e as outras determinam a cor de cada palavra <html> <head> <title>fonte de cores</title> </head> <body> <H3>Olhe abaixo e diga as <u> cores </u>, no as palavras</H3><hr>.

    <font face='arial black'size=5> <font color=green>verde</font><hr> <font color=yellow>amarelo</font><hr> <font color=blue>azul</font><hr> <font color=pink>roseo</font><hr> <font color=red>vermelho</font><hr> <font color=lime>verde limo</font><hr> </body> </html>

    Listas
    Em alguma paginas de internet til colocar listas formatadas com itens para enumerar informaes. O cdigo HTML suporta os seguintes tipos de listas: Listas no ordenadas: so aquelas que acrescentam uma marca no inicio de cada linha do texto. Listas ordenadas: so aquelas que enumeram cada item com nmeros ou letras Listas no ordenadas. Criamos uma lista no ordenada com duas etiquetas, uma para iniciar a lista (UL)e a outra para indicar cada linha desta lista (LI). O comando<ul>e seu correspondente de fechamento</ul> devem envolver todos os itens da lista. <html> <head> <title>listas</title> </head> <body> <h1><b>Paises da Amrica do Sul</b></h1><hr> <ul> <li> Argentina <li> Brasil <li> Colmbia </ul> <li>Bolvia <li>Chile <li>Equador

    </body> </html>

    Listas ordenadas A lista ordenada utilizada quando desejamos enumerar os itens apresentados. Ela criada com a tag <ol> e sua correspondente de fechamento </ol>, mas a tag<li> para cada item da lista, da mesma forma que na lista no ordenada. <html> <head> <title>listas</title> </head> <body> <h1><b>Paises da Amrica do Sul</b></h1><hr> <ol> <li> Argentina <li> Brasil <li>Bolvia <li>Chile

    <li> Colmbia </ol> </body> </html>

    <li>Equador

    IMAGENS
    Incluir uma imagem na sua pagina bem simples. S exige apenas que voc tenha disponvel a imagem que ser exibida, e que ela esteja em um dos formatos aceitos pelo browser. O formato mais usado e aceito pela WEB e o formato GIF. Esse formato uma abreviao de Graphics Interchange Format. Se comparando com o formato padro no Windows (BMP-Bitmaps, tambm aceitos pelo browsers) ele gera um arquivo de tamanho bem menor.

    Outro formato bastante usado na WEB JPG. Ele consegui reduzir o tamanho da imagem em ate 10 vezes. Mas ateno no encha sua pagina de imagem, pois se lembre de que, ao usar a rede para transmitir sua paginas e sua imagens, a velocidade de transmisso muito reduzida, girando em torno de 1KB por segundo ou, dependendo do trafego, ela cai ainda mais. Portanto uma imagem de 100KB pode levar vrios minutos para ser exibida, frustrando a assim o usurio.

    INSERINDO IMAGENS
    Usamos o elemento IMG para inserir imagens na pagina na linha de texto. Este elemento possui obrigatoriamente o atributo SRC que contem a localizao d a imagem, que pode estar tanto no mesmo diretrio quanto em qualquer lugar na web. Os conjuntos destes dois elementos formam a etiqueta<IMG

    SRC=nome_da_imagem> indicando uma imagem no cdigo HTML. Quando voc salvar alguma imagem para colocar na sua pagina sempre salve na sua pasta, pois l que o HTML vai buscar no seu diretrio que esta salvo a imagem. <html> <head> <title>imagens</title> </head> <body> <h1><font color= red>IMAGENS</font></h1><hr>

    esta a imagem do corao <img src="corao.jpg"><hr> <img src="pinheiro.jpg"> esta a imagem do pinheiro </body> </html>

    IMAGENS E FUNDO
    A imagem de fundo ou segundo plano elimina o fundo branco ou cinza, trazendo mais vida as paginas. Figura de fundo e adicionado ao cdigo HTML

    utilizando-se o parmetro BACKROUND da etiqueta BODY juntamente com o nome da imagem desejada. <body background= nome_da _imagem > <html> <head> <title>imagens</title> </head> <body background="paisagem.jpg"> <h1><font color= red>IMAGENS</font></h1><hr> <h1><font color=red>esta a imagem do corao</font></h1> <img src="corao.jpg"><hr> <img src="pinheiro.jpg"> <h1><font color=red>esta a imagem do pinheiro</font></h1> </body> </html>

    LIGAES
    A principal atrao da internet a criao de documentos com o conceito de hipertexto, ou seja, um documento que se vincula a outros documentos por meios de ligaes especiais chamadas links ou hiperlinks. Com esse conceito, voc pode criar documentos que faam referencias e permitem ao usurio acessar tais referencias no importando se elas esto em outra pagina da web, no seu micro ou em algum servidor da rede. O uso do hipertexto tambm facilita a criao de documentos extensos cujos tpicos podem ser rapidamente acessados por meio de links. Imagine que voc crie uma pagina de um determinado assunto em vrios tpicos abordados. Assim como em um livro voc cria todo o texto do documento e depois cria, no inicio, um sumario indicando os tpicos do documento. Se quiser acessar diretamente o texto de um tpico, basta dar um clique sobre o item do tpico do sumario e ele ser imediatamente exibido.

    Um link reconhecido em uma pagina por estar em cor normalmente diferente do resto do texto e, ao passar com o mouse sobre esse texto o curso muda para uma mo apontando para o link.

    LINKS PARA OS ARQUIVOS LOCAIS


    Fazer a ligao de um texto com outra pagina, ou figura tarefa bastante simples. Voc precisa apenas especificar o nome completo do arquivo que ser chamado atravs da tag A HREF.

    Digite este exemplo e salve como bandeira.htm <html> <head> <title>figuras</title> <body> <h1><font color=red>BANDEIRA</font></h1><hr> Esta a bandeira do brasil; <img src="brasil.gif"><p> ela foi criada para a republica<p> A Bandeira da argentina <img src=argentina.jpg> pouco conhecida<p> </body> </html>

    Agora abre um novo documento em branco e digite este exemplo e salve com pais.htm <html> <head> <tilte>Paises</title> <head> <body bg color=ciano> <h1>Futebol</h1> As <a href="bandeira.htm"> Bandeira</a> dos paises, mas rivais no futebol. </body> </html>

    Quando voc clicar vai aparecer uma pagina q foi demonstrado no exemplo anterior

    TABELAS
    As tabelas so utilizadas para controlar vrios aspectos da formatao de uma pagina, organizando informaes atravs de linhas e colunas. Com elas podemos criar layouts de paginas utilizando-as para demarcar regies onde sero colocados textos e figuras. Uma tabela e construda com a tag<table>e </table> que mancam o seu inicio e fim e pelas tags <tr>e<td>que informam onde comeam as linha e as colunas. A tabela construda linha a linha com o

    tag<tr>inicio de uma linha e para cada coluna nesta linha, utilizamos a tag<td>, formando com isso uma clula. Digite este exemplo e salve como tabela.htm <html> <head> <title>TABELAS</title> </head> <h2>Construindo Tabelas em HTML</h2><hr> <table border=1> <tr> <td><b>Pais</b> <td><b>Populao</b> <td><b>Area</b> </tr> <tr>

    <td><b>Argentina <td><b>34.000 <td><b>2.780 </tr> <tr> <td><b>Brasil <td><b>157.070 <td><b>8.547 </tr> </table> </html> Visualize o programa

    MESCLANDO UMA CLULA


    Quando voc desejar que uma determinada clula ocupe duas ou mais linhas necessrio utilizar o atributo ROWSPAN juntamente com a tag TD informando quantas linhas est clula ocupar. As clulas podem ser mescladas ocupando alem de linhas, duas ou mais colunas utilizando-se o atributo COLSPAN. Digite o exemplo usando a etiqueta Rowspan: <html> <head> <title>TABELAS</title> </head> <h2>Construindo Tabelas em HTML</h2><hr> <table border=2 cellpadding=2> <tr> <td rowspan=2><b>exemplo do uso do ROWSPAN</b> <td>celula1</td> </tr> <tr> <td>celula2</td> </tr> </table> </html>

    Visualize o programa

    Digite este exemplo utilizando o Colspan. <html> <head> <title>TABELAS</title> </head> <h2>Construindo Tabelas em HTML</h2><hr> <table border=2 cellpadding=2> <tr> <td colspan=2><b>exemplo do uso do COLSPAN</b> <tr><td>celula1</td><td>celula2</td> </tr>

    </table> </html> Visualize o programa

    FRAMES
    Frame so relativamente usadas na WEB. H os que adoram o uso de frames e no admitem que suas home-pages fiquem sem elas, por outro lado h os que abominam o uso de frames, porque julgam que eles estragam o layout da home-page. Fazer frames tem o mesmo procedimento que confeco de homepages simples, a diferena <frameset>. Para termos uma home-page com frame devemos ter trs paginas uma com o cdigo que contem a tag <frameset> e duas outras com cdigos onde sero inseridas as paginas de cada frame. Ento o que devemos fazer? Devemos criar dois documentos HTML normais e um documento HTML de frames. que se deve trocar a tag <body> pela tag

    Digite este exemplo de frames e salve como exemplo.htm <html> <head> <title>EXEMPLO DE FRAMES</title> </head> <frameset cols=20%,80%> <frame src=frame1.htm> <frame src=frame2.htm> </frameset> </html> Abra um novo documento e digite este outro exemplo e salve como frame1.htm <html> <head> <title>Pagina Simples</title> </head> <body> aqui entra a primeira pagina normal </body> </html> Abra um novo documento e digite este exemplo e salve como frame2.htm <html> <head> <title>Pagina simples</title>

    </head> <body> aqui entra a segunda pagina normal </body> </html> V ao navegador e abra o arquivo exemplo.htm

    FORMULRIOS
    Os formulrios so bastante utilizados no sites da web, pois atravs deles possvel coletar informaes de varias pessoas, solicitar a opinio dos visitantes, fazer uma votao e etc., mas para que este formulrio funcione, preciso que no servidor tenha um programa, escrito em uma outra linguagem, responsvel em receber e processar o formulrio.

    Obs: neste curso ser ensinada apenas a linguagem HTML referente criao e envio de formulrio.

    OS OBJETOS DE FORMULRIOS.
    Os formulrios so compostos por vrios objetos, onde uns oferecem opes para serem clicados e outros exibem campos de texto editveis (atravs da utilizao de comportamentos, voc poder validar as informaes digitadas pelo usurio). A prxima figura exibe um simples formulrio que foi criado em uma pagina. Os itens enumerados na figura anterior representam alguns dos objetos de formulrios, os quais so denominados: 1,2e 5: campo texto 3 e 4: Menu lista 6: botes de opo 7:rea de texto 8 e 9:botes de comando

    1 2 6

    4 3 5 7

    Campo de texto: tambm chamados de caixa de texto, so utilizadas para coletar informaes dos usurios, onde estes podero digitar qualquer tipo de texto: alfabtico e numrico. Botes: realizam tarefas quando so clicados, ou seja, so aquilo que faz o formulrio fazer algo, como enviar as informaes e redefinir os dados dos formulrios. Campos de imagens: podem ser utilizados no lugar do boto enviar, onde este pode ser substitudo por um boto de imagens. Caixas de seleo: permitem que o usurio faa uma ou mais selees em um conjunto de opes. Botes de opes: enquanto as caixas podem aparecer individualmente e ou em grupos, os botes de opo aparecem sempre em grupos. A seleo de um dos botes do grupo cancela a seleo de todos os outros.

    Menu de lista: apresentam um conjunto de valores que os usurios podero escolher. Campo e arquivos: permitem que o usurio procure os arquivos nos disco rgidos, carregando-os como dados do formulrio. Campos ocultam: permite armazenar informaes (como o destinatrio dos dados do formulrio ou assunto do formulrio) que no forem relevantes ao usurio, mas que sero utilizadas pelo aplicativo que processa o formulrio. Menu de salto: permite inserir um menu no qual cada opo se vincula a um documento ou arquivo. rea de texto: uma caixa de texto onde o usurio pode digitar inmeras palavras com linhas mltiplas.

    INSERINDO OBJETOS
    Para construirmos um formulrio utilizamos a tag<form>e sua

    correspondente de fechamento<form>. entre elas que sero colocados os elementos que formam uns formulrios interativos. A tag form possui os seguintes atributos: ACTION= URL especifica o endereo onde est o programa que ir processar o formulrio. METHOD=[get post] indica o mtodo utilizado pelo servidor para processar o formulrio. <form method =pst action =http//:servofor.br/cgi-bin/cadastro>

    Um campo para entrada de dados definido com a tag <imput>, tendo os dados digitados pelo o usurio atribudo a uma varivel com o nome e tipos especficos. Esta tag possui os seguintes atributos: Type: [text, password,checkbox,radio,submit,reset,file,hidden,image,buttun] Text: campo de texto. Password: campo texto que mostra asteristicos no lugar do texto digitado. Checkbox: caixa de seleo. Submit: boto para envio dos dados do formulrio. File: campo de arquivo Hidden: campo de arquivo Image: campo de imagem Button: boto de comando Name: varivel-nome da varivel que receber o contedo do campo. Value: texto-representa o valor padro do campo. Checked: seleciona o campo do tamanho, sugerindo um numero de caracteres. Maxlentght: numero-numero Maximo de caracteres para a entrada de texto. O menu de lista criado com a tags <select> e o seu fechamento </select>, que define a lista e seu comportamento , e <option >, que define os elementos de escolha da lista. Numa lista de usurio escolhe um ou mais itens aps dar um clique na seta. A tag select possui os seguintes atributos: Name: varivel- Nome davariavel que receber o contedo do campo. Multiple: permite selees mltiplas

    Size:numero- define o numero de opes visveis na lista Digite este exemplo abaixo: <html> <head> <title>formularios</title> </head> <body> <p align="center"><Font="arial" color="#3300cc" size="5">EXEMPLO DE

    FORMULARIO SIMPLES</font></p><hr> <form method="post" action="url do cgi"> <p><b>nome</b>: <input type="text"name="nome" size="25"></p> <p><b>e-mail</b> <input type="text" name="campoemail" size"30"></p> </p><b>Opes de uso da internet</b> <input type="radio" name="opo" value="estudo">Estudo <input type="radio" name="opo" value="pesquisa">Pesquisa <input type="radio" name="opo" value="trabalho">Trabalho <input type="radio" name="opo" value="laser" checked>Lazer </p> <table> <tr> <td valign="top"><b>Possui em sua casa</b>:

    <td> <input type="checkbox" name="bens" value="geladeira">Geladeira<br> <input type="checkbox" name="bens" value="automovel">Automovel<br> <input type="checkbox" name="bens" value="Televiso">Televiso<br> </td> </table> <p><b> Data do nacimento:</b> <select name="dia"> <option selected>01 <option>02 <option>03 <option>04 <option>05 <option>06 <option>07 <option>08 <option>09 <option>10 <option>11 <option>12 <option>13 <option>14 <option>15

    <option>16 <option>17 <option>18 <option>19 <option>20 <option>21 <option>22 <option>23 <option>24 <option>25 <option>26 <option>27 <option>28 <option>29 <option>30 <option>31 </select> <select name="Ms"> <option select>Janeiro <option>fevereiro <option>Maro <option>Abril <option>MAio

    <option>Junho <option>Julho <option>Agosto <option>Setembro <option>Outubro <option>Novembro <option>Dezembro </select> <select name="Ano"> <option select>1950 <option>1951 <option>1952 <option>1953 <option>1954 <option>1955 <option>1956 <option>1957 <option>1958 <option>1959 <option>1960 <option>1961 <option>1962 <option>1963

    <option>1970 <option>1975 <option>1979 <option>1980 <option>1985 <option>1990 <option>1995 <option>2000 <option>2005 <option>2007 </select> </p> <li><b>Digite aqui sua sugesto <textarea name="sugesto" cols=30 rows=5> </textarea><p> <input type="submit"name="ENVIAR" value="ENVIAR"> <input type="reset" name="APAGAR" VALUE="REDEFINIR"></p> </form> </body> </html> Salve como formulrio.htm e depois visualize

    You might also like