Click here to load reader

CURSO BÁSICO DE HTML - contilnet.com.brCurso_Tecnico/Instrutor%20Rodrigo/Diversos/... · Salve o arquivo como teste.html e abra com um navegador. ... Os novos padrões da web

  • View
    219

  • Download
    0

Embed Size (px)

Text of CURSO BÁSICO DE HTML - contilnet.com.brCurso_Tecnico/Instrutor%20Rodrigo/Diversos/... · Salve o...

  • CURSO BSICO DE HTML

    Apostila desenvolvida para ser usada em um curso bsico de HTML do comit Fome-Zero Joinville.

    Quaisquer dvidas, sugestes, reclamaes enviar e-mail para felipe_at_gallois_dot_us.

    Felipe Gallois2008

  • Este trabalho est licenciado sob uma Licena Creative Commons Atribuio-UsoNoComercial-Compartilhamento pela mesma licena. Para ver uma cpia desta licena, visite http://creativecommons.org/licenses/by-nc-sa/2.5/br/ ou envie uma carta para Creative Commons, 559 Nathan Abbott Way, Stanford,

    California 94305, USA.

  • SumrioIntroduo.............................................................................................................................................4 Elementos............................................................................................................................................5 Comeando sua pgina........................................................................................................................6 Hyperlinks.........................................................................................................................................11 Imagens..............................................................................................................................................14Listas...................................................................................................................................................17 Tabelas...............................................................................................................................................20 Frames...............................................................................................................................................25 Forms.................................................................................................................................................28 Consideraes Finais.........................................................................................................................32Lista de caracteres especiais...............................................................................................................32Lista de tags........................................................................................................................................33

  • Introduo

    Uma pgina da web (webpage) uma fonte de informaes que adequada World Wide Web e que pode ser acessada por um navegador web. Isso quer dizer que ela um documento que feito de modo atender requisitos da rede mundial de computadores e capaz de ser visualizada a partir de um programa especfico para esse fim.

    As pginas web esto localizadas ou em um computador local ou remoto e disponibilizadas atravs de um servidor web. O acesso a elas pode ser restringido redes locais, apenas ao prprio computador ou ainda ser publicada na Internet. A requisio e o acesso a elas feita por meio de um protocolo chamado HTTP (Hypertext Transfer Protocol, ou Protocolo de transferncia de hipertexto).

    Originalmente, as pginas web eram arquivos estticos de texto guardados dentro de servidores web. Atualmente, entretanto, comum encontrarmos servidores que geram dinamicamente os arquivos (x)HTML de acordo com a requisio do navegador. Existem ainda maneiras de obtermos comportamento dinmico pelo lado do cliente (navegador) por meio de implementaes de Ajax e JavaScript, por exemplo.

    As webpages utilizam de HTML (Hypertext Markup Language) para fazer a formatao dos dados. importante notar que HTML no uma linguagem de programao, mas sim de formatao. Isso guarda diferenas fundamentais entre HTML e, por exemplo, JavaScript, uma vez que a primeira limita-se apenas a mudar a maneira como os dados so dispostos na tela.

    Para melhorar a aparncia das webpages possvel usar cdigo CSS (Cascading Style Sheet) que pode ser escrito em um arquivo em separado ou dentro do prprio HTML. prefervel valer-se da primeira opo uma vez que isso torna seu cdigo mais reutilizvel e, alm disso, o uso de CSS torna-se mais eficiente j que aproveita-se melhor da maneira como o HTTP trabalha, com o navegador baixando uma nica vez as informaes e guardando-as em cache.

    As imagens so armazenadas tambm como arquivos separados em servidores web. O navegador faz o trabalho de baixar todas as imagens enquanto a pgina processada, mantendo a conexo com o servidor at que todas as informaes sejam baixadas e fornecidas. A grande maioria deles renderiza as imagens juntamente com os textos e outros materiais na pgina a ser exibida.

  • Elementos

    Uma pgina web apresenta uma srie de elementos que sero usados para a interao com o usurio. Eles dividem-se em duas grandes categorias, os que so mostrados e os que no so.

    Entre os mostrados, temos as informaes textuais, com diversas variaes de renderizao; as informaes no-textuais, como imagens estticas (gif, jpg, png, etc) ou animadas (animated gif, flash, shockwave), udio (midi, wav) e vdeo (wmv, rm, mov, etc), e; informaes interativas que so mais complexas, atreladas interface. Nesse ponto, temos textos interativos, ilustraes interativas, botes, hyperlinks e formulrios.

    Como elementos no mostrados temos os comentrios, meta dados(DTD), informaes de diagramao e estilo (CSS) e scripts (JavaScript).

    Nem todos esses elementos sero tratados no escopo do curso. Muitos deles requerem ferramentas adicionais e uma grande quantidade de recursos do computador, tanto para a criao quanto para a exibio e so usados apenas para tornar mais agradvel a experincia de navegao do usurio.

  • Comeando sua pgina

    Para criar suas prprias pginas no necessrio um vasto arsenal de ferramentas, apenas um editor de texto e um navegador j so suficientes. Para um iniciante at melhor que no sejam usados recursos muito complexos, eles podem fazer com que muitos detalhes triviais, mas importantes, passem despercebidos. Para o nosso curso, usaremos um editor de texto simples de sua preferncia (como o kwrite, o gedit ou o Mousepad). Recursos como o syntax highlighting (ou destaque de sintaxe) so realmente teis durante a criao da sua pgina ao mesmo tempo que no "fazem o trabalho" por voc, ento prudente que voc deixe-o ligado. Qualquer navegador que tenha interface grfica serve para o nosso curso, fique a vontade para escolher o de sua preferncia.

    Comearemos com algo bem simples, abra o editor de texto e insira o seguinte

    Ttulo da pgina

    Essa a minha primeira pgina. Esse texto est em

    negrito.

    Salve o arquivo como teste.html e abra com um navegador. Voc ver o seguinte

    Agora vamos explicar algumas coisas sobre o exerccio acima. Primeiramente, tudo que estiver entre os sinais de menor que e maior que (''), incluindo eles so chamadas 'tags'. As tags so partes importantes em documentos HTML, elas so as responsveis por toda a formatao do texto. Com elas voc pode dividir o documento em rea de cabealho e corpo, colocar ttulos, criar tabelas, divises, formulrios e ainda formatar trechos especficos do texto, como a parte em negrito acima.

    A primeira tag . Ela diz ao navegador que esse ponto marca o incio de um documento HTML, enquanto que a ltima tag diz a ele exatamente o que esperado, que esse o fim do documento HTML. O texto que est compreendido entre as tags e informao sobre a rea de cabealho, como voc pode perceber com e onde o texto que est entre essas tags aparecer no ttulo da janela do navegador.

    Prosseguindo, temos as tags e que so responsveis por guardar os dados referentes ao corpo do documento. Isso significa que o texto que estiver entre elas ser exibido pelo navegador. Por fim, as tags e faro com que o texto entre elas seja exibido em negrito (em ingls, bold).

    Voc j deve ter percebido que as tags utilizadas sempre tm um "fechamento" como

  • por exemplo, -> , -> e -> . Isso realmente valido para uma grande quantidade delas, mas no ser onipresente, portanto fique atento.

    Uma considerao a ser feita sobre as tags que elas no so sensveis caixa, o que significa que o mesmo que embora as convenes atuais incentivem o uso de todas as tags em letras minsculas. Ento, para seguir os mais novos padres web voc deve usar letras minsculas. O padro xHTML demanda necessariamente o uso delas.

    Uma outra questo que pode surgir sobre a extenso dos arquivos. Antigamente, muitos sistemas no permitiam salvar extenses que tivessem mais do que trs caracteres e por isso era comum ver arquivos com nomes como 'index.htm' ou 'home.htm'. Hoje em dia raro encontrarmos um sistema moderno que no permita extenses com um nmero de caracteres que vai muito alm de trs, logo totalmente aceitvel usar 'index.html' ou 'home.html' como o caso do nosso ltimo exemplo (teste.html).

    Os espaos utilizados para separar uma palavra da outra aparecero normalmente na sua visualizao, porm, caso voc use mais de um espao, eles no sero considerados. Para que isso ocorra, preciso usar uma tag especial.

    Trataremos agora dos elementos HTML. Considerando o nosso ltimo exemplo, 'Esse texto est em negrito' um elemento onde: 1) o elemento HTML inicia-se com a tag de incio ''; 2) o contedo do elemento 'Esse texto est em negrito', e; 3) o elemento HTML termina com a tag de fim ''.

    Tambm um elemento HTML o seguinte trecho:

    Essa a minha primeira pgina. Esse texto est em

    negrito.

    O incio do elemento '' e o fim ''.Um detalhe importante a ser mostrado aqui o que diz respeito acentuao. Voc

    deve ter notado algumas coisas "estranhas" nos exemplos acima, como '' ou ''. Essas so referncias para os caracteres especiais como '' ou '' no exemplo acima, mas que tambm so utilizados em outros casos. O uso deles se deve ao fato de que alguns caracteres so reservados, facilmente perceptvel em '' que servem para abrir e fechar tags. O que faramos para inserir esses caracteres em um texto dentro do HTML? Usamos referncias especiais para tal, seguindo o exemplo ''. Falaremos mais sobre eles na hora devida.

    Usaremos agora algumas tags para tornarmos nosso texto mais complexo. Abra o editor de textos e crie o arquivo 'teste2.html'. Escreva o cdigo a seguir.

    Cabealhos, pargrafos e quebras de linha

    Exemplos de texto com cabealho, pargrafos e quebras

    de linha

    Esse um cabealho muito grandeEsse um cabealho um pouco menor, mas bem grande

    aindaEsse um cabealho nem to grande assimEsse um cabealho mdioEsse um cabealho pequenoEsse um cabealho muito pequeno

    Agora faremos um pargrafo. A tag '' no

    cdigo serve para inserir uma linha horizontal, voc pode v-la acima.

    Note que ao criarmos outro, temos uma linha branca adicionada entre eles

    Agora o texto est sendo escrito diretamente no corpo do documento, sem nenhuma formatao.

    Use a tag vazia '
    ' para quebrar linhas (saltar

  • linhas) seno o seu texto vai ficar bem estranho.

    Agora vamos explicar um pouco mais sobre as tags usadas nesse exemplo. Preservamos a mesma estrutura de '', mas acrescentamos diversas outras tags. As que se iniciam com o 'h' e so seguidas por um nmero de 1 a 6 ('' e '', por exemplo) servem para fazer um cabealho, um texto que se destacar do restante. O nmero determina o tamanho do mesmo, quanto menor o nmero, maior a tipografia. A tag '' serve para inserir uma linha horizontal ao longo de todo o documento enquanto a '
    ' apenas salta para a prxima linha. Uma observao sobre essas duas tags que ambas podem ser escritas da seguinte maneira: '
    ' ou ''. A razo pela qual se coloca a barra no final dela que elas so tags vazias, isto , no precisam de uma tag para inici-las e outra para termin-las. Os novos padres da web determinam que toda e qualquer tag deve ser fechada, incluindo as tags vazias. Por isso colocamos a barra no final, para indicar que ela se inicia e se fecha nela mesma. Dessa maneira, garantimos que nosso cdigo possibilite sua reutilizao no futuro, quando as novas normas estiverem em vigor. Alm dessas tags temos os pargrafos, representados por '

    ' e '

    '. O texto compreendido entre elas ser colocado como um pargrafo separado e ao trmino da tag uma nova linha ser inserida.

  • Fora isso, vale ainda comentar no momento sobre os caracteres especiais utilizados. Temos vrios deles nesse exemplo:

    '', ""'', ""''', "'"'

    Mudar o valor dos atributos aumenta ou diminui a imagem conforme o que for indicado.

  • Listas

    Ns temos trs tipos de listas em HTML, listas ordenadas, listas no ordenadas e listas de definies. Uma lista no ordenada simplesmente coloca um marcador antes de cada um de seus elementos enquanto a lista ordenada numera-os. Alm delas temos a lista de definies, que se difere por no ser uma lista de itens. Ela uma lista de termos e definies. Vamos mostrar alguns exemplos para que voc veja melhor. Crie um novo arquivo de texto como nome 'listas.html'.

    Alguns exemplos de listas

    Vejamos abaixo algumas listas e suas diferentes

    caractersticas.


    Primeiramente, uma lista no ordenada.

    Frutas

    MaMorangoLaranjaLimoAbacaxi


    Veja agora uma lista ordenada.

    Resultados finais do campeonato de Frmula 1 de 1991.

    SennaMansellPatreseBergerProstPiquet


    Vamos definir algumas coisas abaixo.

    Bebidas

    Caf

    Bebida quente e pretaCh

    Tem de vrias cores e pode ser servido tanto quente como gelado

    guaSem cor, e com certeza gelada! ;)

    O exemplo auto-explicativo com relao aos tipos de listas empregados, mas alguns detalhes sero deixados para voc praticar. As listas possuem atributos tambm. Alguns deles

  • sero explicados aqui.Em essncia, voc usa tags '' ou '' para iniciar suas listas (no ordenada e

    ordenada), e '' para cada um dos itens listados. As tags devem sempre ser acompanhadas de fechamento. No caso da lista de definio voc tem uma pequena alterao. Alm da sua tag, que '' cada um dos elementos dela devem ter duas tags diferentes, a '' para o item em si e '' para a definio do mesmo.

    Para mudar um pouco suas listas ordenadas, tente coisas como:

    Isso far que ao invs de nmeros, a lista seja ordenada com letras do alfabeto maisculas.

    A. MaB. MorangoC. LaranjaD. LimoE. Abacaxi

    Usar

    far a mesma coisa, s que desta vez com letras minsculas. ainda possvel usar algarismos romanos para a numerao. Para isso, faa o seguinte.

    O resultado ser

    I. MaII. MorangoIII. LaranjaIV. LimoV. Abacaxi

    Quer algarismos romanos minsculos?

    Prontinho =)Para mudar o tipo de marcadores usados nas listas no ordenadas, use:

    O primeiro valor do atributo type far com que os marcadores sejam discos preenchidos, o segundo discos vazios no meio (crculos) e o ltimo mostrar quadrados. bem simples, tente todos eles.

    Outra idia interessante de listas que possvel aninhar vrias delas. No seu arquivo 'listas.html', adicione o seguinte cdigo.

    Uma lista aninhada para complicar um pouco

    Bebidas e alguns de seus tipos

    Caf

    com leitepretofrapp

  • Ch

    mateerva docecamomila

    gua

    com gssem gs

    Agora voc tem uma lista aninhada dentro do seu documento e pode ver como ela funciona. possvel aninhar vrios nveis, o que pode ser til dependendo do tipo de lista que voc pretende criar. Isso pode ser usado, por exemplo, para definir a rvore genealgica de uma famlia, embora provavelmente isso te dar muito trabalho! Use sua imaginao.

  • Tabelas

    As tabelas so em HTML exatamente o que so em qualquer outro lugar. Elas servem para organizar os dados de uma maneira que fique mais fcil para as pessoas entenderem ou tornar mais rpida a comunicao em determinadas ocasies.

    Vamos diretamente ao uso dessas tabelas para depois entrarmos em detalhes. Crie um arquivo chamado 'tabelas.html' e coloque o seguinte cdigo.

    Uma pgina com tabelas

    Parte do computadorO que ela faz

    TecladoOnde voc digita

    MouseOnde voc mexe a seta

    Voc vai criar uma tabela com a tag ''. A partir da, voc deve definir as linhas com a tag '' e as colunas com ''. Cada um dos valores colocados entre as tags '' considerado estar dentro de uma clula. A tag '' usada para o cabealho da tabela, um texto destacado para explicar um pouco sobre a coluna em questo. O atributo 'border' da tag '' determina a largura da borda da tabela, experimente usar um valor diferente para ver o resultado.

    Agora insira dentro da tabela, depois dos outros itens as seguintes linhas:

    Adesivo no monitor

    Recarregue o arquivo e voc notar que a clula onde no h nada tambm ficar sem borda, o que pode dar uma aparncia desagradvel para o usurio, solucione o problema colocando o caracter especial '' nela.

    Adesivo no monitor

    Ele faz com que serja inserido um caracter em branco (non-breaking space), diferente de se colocar um espao normal l, que o navegador deixa de interpretar. Dessa forma, voc engana a tabela como se tivesse realmente algo escrito l, que de fato h, mas o usurio no ver isso.

    possvel tambm fazer tabelas sem bordas, dependendo do seu objetivo:

    A mesma tabela, sem bordas e com legenda

  • Minha legendaMinha outra legenda, abaixo da

    tabela

    Parte do computadorO que ela faz

    TecladoOnde voc digita

    MouseOnde voc mexe a seta

    Adesivo no monitor

    Alm da borda de tamanho zero (ou sem borda, se preferir), temos mais duas tags que at ento no havamos apresentado, uma delas se refere tabela e a outra no. A tag '' serve para se colocar uma legenda na tabela e pode carregar o atributo 'align', que determinar se ela aparecer em cima ou em baixo. A outra tag, '', pode ser usada em qualquer lugar do texto e serve para deixar o texto que est entre seu incio e fechamento em itlico, assim como a tag '' faz ao passar para negrito.

    Agora mostraremos alguns exemplos onde queremos que um determinado campo ocupe mais de uma clula.

    Telefone de algumas pessoas que acabei de inventar

    NomeTelefone

    Joo Frango33 2548 354933 2544 3578

    Valpano44 2578 325844 2566 5799


    Telefone das mesmas pessoas que acabei de inventar, formatando

    diferente

    NomeJoo FrangoValpano

    Telefone33 2548 354933 2544 3578

  • 44 2578 325844 2566 5799

    O exemplo acima, alm da utilidade proposta, mostra mais uma coisa: os cabealhos no precisam necessariamente ser o primeiro elemento da coluna. Na segunda tabela percebemos que ele est na verdade referindo-se linha onde ele est. Voltando ao tema, usamos os atributos 'colspan' e 'rowspan' para estendermos uma clula, ambos esto disponveis tanto para '' quanto para ''. O valor do atributo determinar quantas clulas o campo ocupar, 'colspan' para colunas e 'rowspan' para linhas.

    Vale notar que possvel alinhas tabelas e colocar quaisquer outras tags dentro das clulas. possvel, por exemplo, fazer uma lista dentro de uma clula de uma tabela, inclusive aninh-las. S tome cuidado para no fazer algo to complicado que voc possa se perder ao desenvolver.

    Outra possibilidade ao trabalhar com tabelas alterar a distncia entre o texto e as bordas da tabela. Esse parmetro controlado pelo atributo 'cellpadding' e pode ser observado no exemplo a seguir.

    Tabela sem espaamento entre texto e bordas

    12

    34


    Tabela com espaamento entre texto e bordas

    12

    34

    Alm de espaamento entre texto e bordas tambm podemos deixar uma distncia entre uma clula e outra com o atributo 'cellspacing', confira nesse outro exemplo.

    Tabela sem espaamento entre clulas

    12

    34


    Tabela com espaamento entre clulas

  • amarelovermelho

    verdeazul

    Tanto a tabela toda como cada uma das clulas tratam do atributo background, assim como fizemos anteriormente com a tag ''. Desse modo, possvel alterar a cor desses elementos, como voc pode observar no exemplo acima.

    Ainda podemos alinhar o texto dentro de uma clula pelo atributo 'align' da mesma maneira como fizemos em outros lugares, o exemplo abaixo uma alterao daquela nossa "agenda de telefones".

    Telefone das mesmas pessoas que acabei de inventar, formatando diferente

    NomeJoo FrangoValpano

    Telefone33 2548 354933 2544 3578

    44 2578 325844 2566 5799

    Note que o nome das pessoas agora esto centralizados nas clulas.Existem outros atributos que no apresentaremos aqui para no alongarmos demais

    essa parte, com o contedo apresentando at aqui j possvel construir tabelas bem completas.

  • Frames

    Com frames voc pode inserir mais de um documento dentro da mesma tela do navegador. Voc pode fazer frames horizontais ou verticais, que determinaro a maneira como os documentos sero exibidos. Cada documento HTML ser chamado frame e cada frame independente do outro.

    Embora isso ajude bastante a organizar o contedo das pginas, algumas desvantagens so notveis, como a maior necessidade de ateno do desenvolvedor para manter os documentos HTML e a dificuldade para a impresso de uma pgina inteira.

    Basicamente, o frame faz com que o documento se divida todo e em cada uma dessas partes voc possa criar uma pgina independente e diferente de todas as outras que voc est utilizando. Imagine uma bandeja de refeitrio toda dividida onde em cada lugar seja possvel colocar um alimento diferente sem que ele se misture com o outro.

    Para colocar frames eu suas pginas, primeiramente voc tem que utilizar a tag '' que o conjunto de frames que sero usados. Essa tag trar definies bsicas, como se os frames estaro divididos em linhas ou colunas e o tamanho das mesmas. Veja abaixo um exemplo de utilizao.

    Esse exemplo mostra a diviso dos frames com porcentagem de tamanho a ser ocupado na tela. Existe uma outra maneira de fazer isso, que com o nmero de pixels que cada um utilizar.

    Ou ainda voc pode querer um frame use o espao restante, como no exemplo abaixo:

    Use os cdigos abaixo para ter uma idia do funcionamento dos frames.

    frames.html

    Vamos usar uns frames

    O seu navegador no suporta frames!

    uma_pagina.html

    Essa uma pgina

    Uma pgina qualquer! =)

  • outra_pagina.html

    Essa outra pgina

    O seu navegador no suporta frames!

    oi.html

    O seu navegador no suporta frames!

    oi1.html

    oi um

    oi2.html

    oi dois

    oi3.html

    oi trs

  • tudo_bem.html

    Tudo bem?

    tchau.html

    TCHAU! =D

    Como vrios documentos foram usados, organize-os de maneira a conseguir um resultado parecido com a imagem acima. Alm dos frames tivemos algumas outras tags de formatao. '' faz basicamente o mesmo que a tag '', isto , deixa o texto em negrito, mas na verdade um texto forte com nfase. '' deixa o texto em tamanho maior na tela. Outro detalhe a ser observado que no caso dos frames que so compostos pelos documentos oi1, oi2 e oi3.html, cada um tem uma cor de fundo diferente. Isso foi usado apenas para mostrar que cada um dos frames totalmente independente do outro, no compartilhando o mesmo plano de fundo.

    Apenas para complementar, aconselhvel o uso da tag '' nos documentos que contenham frames. Essa tag especifica o que dever ser feito caso o navegador no seja capaz de trabalhar com frames.

  • Forms

    Um form uma rea que contm elementos de formulrio em um documento HTML. Esses elementos so responsveis por permitir que o usurio entre com informaes (como campos de texto, reas de texto, menus, etc.) em um formulrio. So definidos pela tag ''.

    Os formulrios so constantes nas pginas encontradas na internet e basicamente todo cliente de webmail tem elementos de formulrio, mais precisamente campo de texto e campo de senha para poder fazer a entrada de seu login e senha. Mesmo que voc no se lembre deles agora, provavelmente ver que eles so familiares depois de alguns exemplos.

    Faremos nosso primeiro exerccio exatamente em cima destes dois exemplos.Os formulrios so constantes nas pginas encontradas na internet e basicamente todo

    cliente de webmail tem elementos de formulrio, mais precisamente campo de texto e campo de senha para poder fazer a entrada de seu login e senha. Mesmo que voc no se lembre deles agora, provavelmente ver que eles so familiares depois de alguns exemplos.

    Faremos nosso primeiro exerccio exatamente em cima destes dois exemplos:

    Estamos quase acabando, pacincia com os forms

    Veja se isto te lembra algo em clientes de e-mail

    Login:
    Senha:

    Logo acima podemos ver algumas coisas a respeito dos forms. Uma delas que eles no tm muita serventia se no tivermos outros elementos dentro deles, os '' (Lembre-se de fechar a tag com um '/' no final dela. Como j disse, todas as tags devem ser fechadas!). So eles os responsveis por mostrar no navegador os campos que sero responsveis por possibilitar a entrada de algum tipo de informao por parte do usurio. O atributo 'type' determina o tipo do elemento, veja abaixo alguns deles:

    text: Usado quando voc quer inserir caracteres, nmeros e afins no formulrio.password: Bem parecido com o 'text' mas sua entrada de dados no aparecer

    explicitamente para o usurio. Usada principalmente, como o prprio nome sugere, para a entrada de senhas.

    radio: So os radio buttons, ou botes de opo. Elas permitem que o usurio seja capaz de escolher um elemento entre um nmero limitados deles.

    checkbox: As check boxes, ou caixas de seleo, tm uma finalidade parecida com a dos botes, com a diferena de permitir que sejam selecionados mais de um elementos.

    submit: O boto submit serve para enviar os dados.reset: O boto reset serve para apagar todas as entradas do formulrio.

    Uma outra tag que bem comum nas pginas a '' que geralmente tambm esto dentro de formulrios. El ter sub-elementos que sero as tags '' que sero valores que popularo o menu drop-down. O exemplo abaixo clarifica o seu uso

    E-mailAgendaNotciasJogos

    Podemos usar os botes de opo para fazer algo semelhante ao select

  • E-mail
    Agenda

    Notcias
    Jogos

    Os botes de opo precisam basicamente de dois atributos para funcionar corretamente. Um deles o 'name', que diz o grupo ao qual ele pertence. Os botes devem estar agrupados para quando os dados forem recuperados na pgina que receber o formulrios, as aes corretas sejam tomadas. O atributo 'value' o valor do boto em si, dentro do grupo e sabendo qual o nome da opo, possvel tratar de maneira precisa o que dever ocorrer com os dados do formulrio.

    O mesmo conceito de grupos e valores individuais tambm se aplica s caixas de seleo. Da mesma maneira elas devem ser agrupadas e depois receber um valor especfico para cada uma delas. O exemplo abaixo mostra isso.

    E-mail:
    Agenda:
    Notcias:
    Jogos:

    Como voc pode perceber, elas possuem igualmente os campos 'name' e 'value' que funcionam da mesma maneira.

    possvel colocar alguns botes tambm, eles podem ter vrias utilidades, mas usando apenas HTML pouco provvel que voc encontre alguma utilidade prtica para eles. De qualquer maneira, veja abaixo como utiliz-los:

    No h muito mistrio quanto sua sintaxe, o tipo deve ser 'button' e o atributo 'value' dir o que aparecer no texto do boto.

    Vamos agora tratar o caso de dois botes bem comuns em formulrios, 'submit' e 'reset'. Cada um deles um tipo especial de elemento usados, respectivamente, para enviar o formulrio e apagar tudo que foi entrado no mesmo. Para us-los, o tipo (type) da tag '' deve ser 'submit' ou 'reset'. Alm disso, voc pode dar um outro nome para o boto, alterando o valor do atributo 'value'.

    As linhas acima mostram o exemplo de um boto 'submit' e um 'reset', os dois esto com seus 'value's alterados para poder exibir nomes em portugus. Coloque-os em um documento de exemplo, junto com mais campos de formulrio e clique em ambos para entender o funcionamento deles. O boto reset tem uma caracterstica mais explcita, voc ver os campos que j estavam preenchidos serem todos esvaziados, e exatamente isso que ele deve fazer. No caso do 'submit' os dados tambm sero apagados, mas algo mais acontece. Veja na barra de endereos do navegador que o URL ser alterado de acordo com os dados que voc tiver inserido. exatamente dessa maneira que as pginas se comunicam.

    verdade que no faz muito sentido esse exerccio, j que os dados inseridos no so utilizados para nada. O tratamento dessas informaes feita, de maneira mais bsica, pelo CGI mas podem tambm ser usadas diversas linguagens de programao para os mais variados fins. Isso, porm, foge do escopo do presente material e portanto no ser explicado. Entretanto, fica aqui mais um instruo referente formulrios, eles podem ser usados para redirecionar alguma outra pgina com as informaes que foram fornecidas. Isso feito atravs do atributo 'action' da tag ''.

    Esse atributo est intimamente ligado ao boto 'submit', uma vez que esse endereo ser acessado ao clicar nele. Resumindo, voc coloca em um formulrio a ao que dever ser

  • desempenhada ao se clicar no boto 'submit'. O documento receber as informaes que estavam contidas no formulrio e podero, conseqentemente, ser tratadas para algum fim especfico. Faa o teste preenchendo um formulrio e em seguida clicando no boto 'submit' que redirecione para uma pgina local vlida, voc poder ver que no final do URL havero os dados que estavam no formulrio da pgina anterior.

  • Consideraes Finais

    Bom, com isso conclumos a apostila. Espero que seja til como aprendizado e como referncia rpida. Alguns tpicos interessantes para aprofundar o que foi mostrado aqui so:

    JavaScript: linguagem de programao extremamente til para lidar dinamicamente com os contedos.

    CGI: Um protocolo usado para tratar requisies do cliente web e retornar contedo.XML: Uma outra linguagem de formatao, pode ser usada para vrios propsitosCSS: Linguagem para descrever a apresentao de um documento HTML (entre outros).

    Responsvel por muitos dos layouts presentes nas pginas.: Tags de HTML que no foram abordadas aqui. Em conjunto com CSS, compem

    uma grande parte das pginas atuais da internet.Por fim, fique com uma lista de tags e cdigos para caracteres especiais.

    Lista de caracteres especiais< < > >& & " "

  • Lista de tags

    tag descrio define um comentrio define o tipo do documento define uma ncora define uma abreviao define um acrnimo define um elemento de endereo define uma rea dentro de um mapa de imagem define texto em negrito define o URL base para todos os links da pgina define a direo em que o texto ser mostrado define texto grande define uma longa citao define o elemento de corpo
    insere uma quebra de linha define um boto define a legenda de uma tabela define uma citao define um texto de cdigo de computador define atributos para as colunas de tabela define um grupo de colunas de tabela define a descrio de uma definio define texto apagado define uma seo no documento define uma definio de termo define uma lista de definies define um termo de definio define um texto enfatizado define um arranjo de campos define um formulrio define uma sub-janela (frame ou quadro) define um arranjo de frames to define cabealhos 1 a 6 define informaes sobre o documento define uma linha horizontal define um documento HTML define um texto em itlico define um frame em linha define uma imagem define um campo de entrada define um texto inserido define um texto de teclado define um rtulo para controle de formulrio define o ttulo de um arranjo de campos define um item de lista

  • define uma referncia de recurso define um mapa de imagem define meta-informao define uma seo sem frames define uma seo sem scripts define um objeto embarcado define uma lista ordenada define um grupo de opes define uma opo em uma lista drop-down

    define um pargrafo define um parmetro para um objeto define texto pr-formatado (respeita espaos e

    pargrafos) define uma citao curta define um exemplo de cdigo de computador define um script define texto selecionvel define um texto pequeno define uma seo em um documento define texto destacado define uma definio de estilo define texto subscrito define texto sobrescrito define uma tabela define o corpo de uma tabela define uma clula de uma tabela define uma rea de texto define o rodap de uma tabela define o cabealho de uma tabela define o cabealho de uma tabela define o ttulo de um documento define uma linha de tabela define texto monoespaado define uma lista no ordenada define uma varivel

    IntroduoElementosComeando sua pginaHyperlinksImagensListasTabelasFramesFormsConsideraes FinaisLista de caracteres especiaisLista de tags