O HTML possui sintaxes para os tags na ordem LIFO, ou seja, o último tag a ser digitado é o primeiro a ser fechado, por exemplo:

(1)

HTML é a sigla usada para Hyper Text Markup Language (linguagem de Marcação de Hipertexto). É a linguagem destinada a criação de páginas para a WEB.

Ao contrário do que muita gente boa pensa, HTML não é uma linguagem de programação, não sendo necessário nenhum conhecimento anterior de programação.

A organização que cuida da especificação e padronização da linguagem HTML é a World Wide Web Consortium (W3C).

Uma página HTML pode ter um desvio para um outro ponto do mesmo documento. Um link pode ser palavras, textos e até uma imagem. As páginas WEB podem ser usadas para interagir com tecnologias como ASP, PERL, JAVA SCRIPT, etc.

Usaremos como editor de nossas páginas, o visualizador Microsoft Visual Interdev 6.0; podemos utilizar vários outros como o Front Page e até mesmo o Bloco de Notas.

Para comerçarmos a construi uma página HTML, devemos observar a seguinte condição inicial em qualquer página(excetuando-se a linha 3):

(2)

Todos os tag´s e atributos, excetuando-se o título da página fica dentro da

área de influência de <body> </body>.

O HTML possui sintaxes para os tags na ordem LIFO, ou seja, o último tag a ser digitado é o primeiro a ser fechado, por exemplo:

<div><h1>Veja como terei que fechar o ultimo primeiro</h1></div>

Os tags <HEAD> e </HEAD> definem o cabeçalho de uma aplicação em HTML.

<TITLE> e </TITLE> definem o título da página, que aparecerá na barra de tarefas.

Tamanho dos cabeçalhos -> O tamanho das letras em HTML varia de seis níveis (de <h1> até <h6>, com seus tags de fechamento); assim, para aumentar ou diminuir o tamanho de uma letra em HTML, devemos proceder da seguinte forma:

<h1>Insira seu texto aqui </h1> h1 é o maior nível, diminuindo até h6.

Opções de Formatação de Texto <b> e </b> - > negrito

<I> e </I> -> itálico

<br> -> insere uma quebra de linha no texto

para colocar linhas em branco, basta colocar o tag <br> seguidos. <hr> -> coloca uma linha horizontal no texto.

Atributos do tag <hr>:

è ALIGN: alinha a linha. Valores: “left”, “center”, “right”. è SIZE: espessura da linha.

è WIDTH: largura da linha, em porcentagem. Exemplo de sintaxe

<hr align= “center” widht= “35%”> <div> e </div> -> formata o texto em blocos distintos.

O tag <div> possui as seguintes opções de formatação: left, right ou justify.

Exemplo:

<div align= “center”> texto pre-formatado </div> <p> -> áreas de parágrafos no texto.

(3)

Possui um atributo align para alinhar um texto: center, left, right ou justify.

Opções de formatação

<u> e </u> - > sublinha um texto (underline). <sub> e </sub> -> subscreve um texto.

<sup> e </sup> -> coloca um texto em sobrescrito. <s> e </s> - > coloca o texto cortado (strike through).

<pre> e </pre> -> coloca o texto pré-formatado usado na formatação, geralmente usando a fonte courier new.

Usa-se geralmente quando é necessário a formatação do texto. Comentários-> Sintaxe:

A seguinte tela de código:

(4)

Listas

Existem três tipos de listas em HTML:

è listas não ordenadas: apresenta os itens que a compões sem enumerá-las.

è Listas ordenadas: atribuem números em seqüências dos itens de cada item da lista.

è Listas de definição: sem nenhum tipo de marcação, identa uma ou mais definições para cada item da lista.

Listas não-ordenadas: o tag <UL> define o início de uma lista não ordenada.

Pode-se alterar o tipo de marcador de uma lista não-ordenada através do atributo TYPE

<UL TYPE= “circle”> : circulo vazado <UL TYPE= “disc”> : círculo cheio <UL TYPE= “square” : quadrado

o tag <OL> define o início de uma lista ordenada.

(5)

O atributo START define o ponto onde a lista se iniciará. Exemplo: <OL START= “5”>

O atributo TYPE indica que tipo de seqüência iremos usar. Letras, números ou algarismos romanos.

<ol type= “a”> letras minúsculas <ol type= “A”> letras maiúsculas

<ol type= “i” > algarismos romanos minúsculos <ol type= “I” > algarismos romanos maiúsculos <ol type= “1”> números

As listas de definição são utilizadas quando se deseja identar um texto quando necessário.

O tag <dl> inicia uma lista de definição. O tag <dt> indica o item da lista.

O tag <dd> indica a descrição para cada item da lista. O seguinte código

(6)

Imagens

São arquivos separados das páginas HTML.

Na página existe apenas uma refência das páginas dos arquivos de imagem e o browser se encarrega de buscá-las e exibi-las.

Só é permitido usar imagens .jpg(JPEG) ou .gif nas páginas HTML. Deve-se usar letras minúsculas, sem espaço e sem acento, para evitar erros em diferentes sistemas operacionais.

O arquivos .jpeg tem nível de compressão máxima. O tag <IMG> é usado para inserir uma imagem na página.

O atributo SRC indica a path do arquivo de imagem.

O atributo ALT serve para exibir um texto enquanto a imagem está sendo carregada, ou quando não puder ter sido exibido por motivos técnicos.

Toda imagem possui um valor para seu comprimento e largura. Os browser calculam esse valor automaticamente, mas podemos informá-lo para dar mais rapidez ao carregamento da pagina. Assim, o browser pode montar esse página e exibi-la antes do carregamento da imagem.

(7)

Os valores de altura e largura de uma imagem são HEIGHT e WIDTH. Os valores são em pixels. A sintaxe ficaria então:

Com essa técnica podemos distorcer uma imagem ou comprimi-la. O atributo ALIGN alinha uma imagem de acordo com o texto; são possíveis os seguintes valores:

Left => alinha a imagem a esquerda; Rigth => alinha a imagem a direita;

MIDDLE => alinha a imagem no centro do texto; TOP => alinha a imagem no topo do texto;

BOTTOM => alinha a imagem na base do texto.

Para um alinhamento horizontal ou vertical, sem a interferência do texto subseqüente, usa-se o tag <div>

O atributo <border> exibe uma borda ao redor da imagem, seus valores variam de 1 a 7

Tempo de carga da Imagem -> Cores escuras com fontes escuras, letras pequenas e cores berrantes podem causar confusão.

Deve haver harmonia entre as cores das fontes e das páginas. Tag <BASEFONT> -> DETERMINA O TAMANHO PADRÃO PARA A FONTE DA PÁGINA.

Pode ser usado em qualquer parte da página, mas é geralmente definido no cabeçalho da página HTML entre os tag´s <head> e </head>.

Os valores permitidos para os atributos SIZE variam de 1 a 7. O valor 3 é o valor padrão.

Existem peculiaridades do Internet Explores que permitem definir no tag basefont a família da fonte (Arial , Verdana, etc.) e a cor da fonte.

O tag <font> permite personalizar o tamanho da fonte, o tipo e a cor de uma fonte em um determinado trecho da página.

Atributos do tag <font>:

(8)

Face -> Tipo de fonte (Arial, Verdana, etc.)

Color -> Nome ou valor do RGB que determina a cor.

Tag <nobr> -> evita a quebra de linha automática do browser.

BGCOLOR -> Define a cor de fundo. É um atributo do tag <BODY> <BODY BGCOLOR= “yellow”>

aqua, black, fuchsia, gray, green, lime, marrom, navy, olive, purple, red, silver, teal, yellow, white.

Atributo BGBACKGROUND -> Usado para definir qual imagem irá compor o fundo de tela.

Sintaxe:

Atributo TEXT -> altera a cor padrão do texto. Em geral acompanham a declaração <BODY>.

<FONT> -> alteram a cor padrão de parte do texto. Atributo Link, vLink, e aLink

São atributos usados para alterar a cor de um link de uma página. LINK -> determina a cor do link que não foram ativados.

VLINK -> determina a cor dos links que já foram ativados.

ALINK -> determina a cor do link no momento em que este já foi processado.

CORES NO HTML

O html possui TAGs que tem o atributo COLOR usado para definir uma cor, que pode ser do texto, do fundo de página, link, etc.

Os nomes das cores padrão são:

Aqua gray navy silver black green

Black green olive teal blue lime

Purple yellow fuchsia marron red white

Cores em Hexadecimal -> Além de escolher uma cor pelo seu nome, podemos fazê-lo pelo seu valor hexadecimal no padrão RGB.

São atribuídos valores para Red(vermelho), Green(verde) e Blue(Azul.). Os valores hexadecimal para o RGB variam de 00 a FF.

(9)

Por exemplo:

- FF0000 é o vermelho - 00FF00 é o Verde - 0000FF é o Azul

As variações destes valores é que vão determinar a cor exata.

Para usar esse método, temos que indicar que estamos usando cores em hexadecimal.

Indicamos isso no próprio atributo colocando o caracter “#” antes do valor hexadecimal da cor.

Inserindo Som

Para inserirmos som no Internet Explores utilizamos o tag <BGSOUND>.

O atributo SRC indica qual arquivo de áudio será reproduzido. O atribulo LOOP indica quantas vezes a reprodução do arquivo se repetirá.

para inserirmos som no Netscape utilizamos o TAG <EMBED>.

Ferramentas de Busca

As ferramentas de busca são sites na Web que tem por objetivo catalogar home-pages. Permite que o usuário procure por palavras, frases ou assuntos de seu interesse.

Podemos cadastrar nosso site em uma ferramenta de busca para que nosso site seja incluído na base de dados dela.

São exemplos de ferramentas de busca:

] Altavista www.altavista.com Yahoo www.yahoo.com Lycos www.lycos.com Cadê www.cade.com.br Miner www.miner.com.br

(10)

É possível controlar como a página vai ser catalogada utilizando o TAG <META>.

O tag <META> permite informar quais palavras-chave e descrição deve ser utilizadas pela ferramenta de busca.

O tag <META> fica dentro da área de influência do TAG <HEAD>. Os atributos NAME pode conter os valores description (descrição) e keywords(palavras-chave).

Ex.: <META name= “keywords” content= “Internet, intranet, cursos, treinamento, WEB, WWW”>

O tag <META> também é utilizado para recarregar automaticamente a página em um intervalo pré-estabelecido de segundos.

O atributo HTTP-EQUIV deve ter o valor refresh. CONTENT é usado para estabelecer o intervalo em segundos.

Exemplo <META HTTP-EQUIV= “refresh” CONTENT= “10”; URL= “pagina.htm”>

O parâmetro URL é usado para indicar qual página será carregada no intervalo.

Entidades de Caracteres

Existem caracteres que não podem ser obtidos através do teclado. Esses caracteres podem ser obtidos através de uma codificação especial que o browser é capaz de interpretar.

Existem dois tipos de entidades: a do html e a do ISO-Latin1.

A Iso-latin1 usa um código composto pelo caracter & seguido do símbolo #.

O HTML usa o caracter # seguido de uma combinação de letras. Ex. Caracter “<” - > < “>” -> >

Caracteres em Branco

O html entende e respeita um único espaço em branco, com separador de palavras em um texto.

Caso seja necessário inserir mais de um espaço em branco entre palavras, devemos usar o caractere especial  

(11)

Alguns países não possuem acentos. Com isso, o uso de acentos pode causar algum transtorno aos usuários que não possuem suporte à nossa língua.

As entidades cedilha possuem a seguinte forma: ç e o atil possui a seguinte forma ã

Com isso, garantimos que nossa acentuação deverá ser vista em qualquer parte do mundo.

Tabelas

As tabelas do html têm a estrutura parecidas com as tabelas feitas em processadores de texto ou por planilhas eletrônicas.

Uma tabela é composta por linhas e colunas.

As intercessões das linhas e das colunas formam as células da tabela.

As céluilas de uma tabela html podem conter um texto simples, um link ou uma imagem, etc.

O html pode controlar a formatação da tabela: borda, alinhamento, espaço entre as células, tamanho, altura, etc.

Uma tabela é criada usando os TAGs <TABLE> e </TABLE>. Nas áreas de influência desses tags estrarão as tags responsáveis pela criação de linhas e células.

Como padrão, a tabela é criada sem bordas.

O TAG <tr> é utilizado para criar linhas em uma tabela.

Toda a linha de uma tabela possui uma ou mais células. Não há limites para a quantidade de linhas que podem ser criadas em uma tabela.

O TAG <TD> é usado para criar células em uma tabela. Exemplo: <TABLE> <TR> <TD> Linha1xCélula1 </TD> <TD> Linha1xCélula2 </TD> </TR> </TABLE>

(12)

Atributos de TABLE

-> WIDTH é utilizado para definir a largura da tabela em pixels ou porcentagem da largura do documento. <TABLE WIDTH=80%>

-> BORDER é utilizado para exibir bordas na tabela. Pode assumir os valores a partir de zero(sem borda) e reflete o número de pixels da borda. <TABLE BORDER= 2>

-> CELLSPACING é usado para inserir uma quantidade de espaço, em pixels, entre a célula da tabela.

-> CELLPADING é usado para inserir uma quantidade de espaço, em pixels, entre as bordas da célula e seu conteúdo.

-> BGCOLOR é utilizado para definir a cor de fundo da tabela. <TABLE BGCOLOR= “ff0010”>

-> BACKGROUND é usada para definir a imagem de fundo da tabela. <TABLE BACKGROUND= “exemplo.gif”>

-> ALIGN é usado para alinhar a tabela em relação ao resto do documento. Funciona de maneira semelhante ao atributo ALIGN do tag IMG.

-> Pode assumir os valores left, right ou center. <TABLE ALIGN=”center”>

Atributos de TR

ALIGN é usado para definir o alinhamento das células de uma linha. Pode ter os valores left, right, center.

VALIGN é usado para definir o alinhamento vertical das células de uma linha. Pode ter os valores top, bottom, e middle.

BGCOLOR é usado para definir uma cor de fundo para uma linha da tabela.

Atributos de TD

ALIGN é usado para definir o alinhamento das células. Pode ter os valores left, right, center.

VALIGN é usado para definir o alinhamento vertical das células. Pode ter os valores top, bottom, e middle.

WIDTH é usado para definir a largura de uma célula em pixels ou a percentagem da largura total da tabela.

(13)

HEIGHT é usado para definir a altura da célula, sempre em pixels. <TD HEIGHT=15>

URL e Links

Uma URL (Uniform Resource Location) é usada para especificar a localização de uma página na WEB.

É montada da seguinte maneira: Protocolo://servidor/página Ex.: www.dba.com.br

Em alguns casos o nome da página pode ser omitido. Alguns dos protocolos usados na URL:

http:// para servidores da WEB.

ftp:// para servidores de transferência de arquivos news:// para servidores de grupos de discussão telnet:// para acessar um servidor

file:// para abrir páginas localmente

Os hiperlinks (lins) são desvios usados para guiar a navegação de um site da WEB.

Quando um hyperlink é acionado, uma ação é realizada: um desvio para outra página, o envio de um mail, etc.

Sintaxe de um link:

è O Tag <A> é usado para definir um link

è O atribulo HREF é usado para definir o destino do link

è A frase ou texto que servirá de link fica entre o <A> e o fechamento </A>

è O Tag de fechamento é obrigatório

Tipos de Links

- Links para a WEB;

- Links para outras páginas dentro do mesmo site; - Links para pontos na mesma página(links internos);

(14)

- Links de e-mail; - Links para scripts;

Links para a WEB

Os links para a WEB são muito comuns. Devemos colocar a URL completa, incluindo o protocolo (http://)

<A HREF= “http://www.dba.com.br” > DBA Engenharia de Sistemas> </a>

Links para dentro do Site

Esse tipo de link permite que outra página dentro do site seja carregada.

Um site é formado por várias páginas. É através deste tipo de link que as ligamos.

Os diretórios também fazem parte do nome, se necessária, dentro do caminho especificado por HREF.

<A HREF= “pagina2.html”> Página</a>

Links internos

Esse tipo de link permite que uma página seja dividida em seções e cada seção possua uma marca de destino.

Através do atributo NAME criamos essas marcas. <A NAME=“cap1sec1”>

Após marcar o texto em todas as posições desejadas usando <A HREF= “#alvo”>

podemos fazer referência a essas marcações usando: <A HREF= “#alvo”> Link </A>

O caracter # é usado para indicar que o link é interno. Logo após o caracter # aparece o destino do link (posição dentro da página).

Links de correio eletrônico

O TAG <A> permite que seja ativado o envio de mensagens eletrônicas pelo programa de correio associado ao browser.

Usamos o atributo HREF com a referência ao “protocolo” de envio de e-mail MAILTO:

(15)

<A HREF= “mailto: “www.sancreyr.dba.com.br” > Tutorial de Web </a>

Navegabilidade

É muito importante a navegabilidade de um site.

Quando um site não possui boa navegabilidade, geralmente ficamos perdidos sem saber como avançar ou como voltar.

É importante sempre existir uma integração entre as páginas de um site.

Links para a página principal e para os tópicos mais importantes sempre são de grande utilidade.

Quando a navegação por um documento for extensa, coloque links para a página anterior, próxima página e página índice, fazendo um encadeamento das páginas. Desse modo, evitamos que os usuários fiquem perdidos.

Muitos sites possuem um link para uma seção chamada Mapa do Site ou Sitemap.

Essa seção permite que o usuário possa saber como está dividido o site e assim ter uma navegação melhor pelas páginas.

Applets

Um applet é um programa em Java executando dentro de uma página HTML.

Esse programa é multi-plataforma, ou seja, um applet é um programa que pode ser executado em qualquer browser que suporte Java em qualquer sistema operacional.

Os applets em Java ainda são muito lentos na sua execução, pois eles são interpretados pelo browser antes da sua execução.

Outro problema é a instabilidade do applet; muitas das vezes o computador fica lento e o browser trava durante sua execução.

Use applet somente quando necessário.

A linguagem Java é bastante complexa. É uma linguagem de programação parecida com C++ em sua sintaxe.

Os applets são formados por mais de um arquivo chamados classes. esses arquivos possuem a extensão .class e eles que são responsáveis pela execução do applet dentro da página.

Elas contém todas as informações necessárias para o applet funcionar.

(16)

è O TAG <APPLET> é usado para inserir um programa Java na página. è O atributo CODE indica qual o arquivo .class será executado dentro

da página.

è O atributo CODEBASE indica onde o arquivo .class está localizado. Pode ser referência a uma URL ou ao diretório onde o arquivo .class está localizado. Caso seja omitido será considerada a URL da página. è O atributo WIDTH indica a largura em pixels do applet.

è O atributo HEIGHT indica a altura em pixels do applet. Exemplo de applet em uma página:

è O tag <PARAM> é usado para passar informações complementares (parâmetros) para o applet.

è Esse tag somente é usado quando o applet necessita de parâmetros. è O atributo NAME indica o nome do parâmetro.

è O atributo VALUE indica o valor do parÂmetro.

Exemplo: <APPLET CODE= “applet.class” WIDTH=100 HEIGHT=100> <PARAM NAME= “texto” VALUE= “curso de HTML”>

Frames

É um recurso utilizado para dividir a janela do browser em partes diversas.

Cada uma dessas páginas do frame pode ser manipulada individualmente.

Cada frame pode conter um documento diferente, ou seja, as frames funcionam como página HTML juntas em uma mesma janela.

Isso ajuda a organizar a navegação no site.

Documentos de Layout -> as divisões das frames são feitas em páginas (documentos de layout) que contém as informações sobre

as estruturas dos documentos (linhas e colunas).

Os documentos de conteúdo são páginas HTML que serão apresentadas por cada frame.

O tag <FRAMESET> é responsável pela divisão da página em frames que podem ser linhas ou colunas.

(17)

Dentro da área de influência do tag <FRAMESET> e </FRAMESET> existem os elementos que definem o conteúdo de cada frame ou outras definições do <FRAMESET> (encadeamento).

O atributo ROWS é usado para dividir a janela em frames horizontais (linhas). Pode haver mais de uma linha definida por esse atributo.

Os valores de ROWS podem ser em pixels, valores percentuais ou relativamente uns aos outros.

o atributo COLS é usado para dividir as frames verticalmente (colunas). Podem haver mais de um atributo definido por essa coluna.

o tag <FRAME> é usado para definir o conteúdo (página) será usado para carregar o frame.

É usado na área de influência do TAG <FRAMSET> <FRAME SRC= “doc1.html” NAME= “frm01”>

o atributo SRC define o nome do documento (página) que será carregado na FRAME.

O atributo NAME associa um nome a uma frame.

O nome da frame é importante pois através dele conseguiremos referenciá-lo por um link.

O atributo NORESIZE impede que o usuário altere o tamanho da frame.

Alguns browser não entendem frames. São eles: - Internet Explorer 3.0

- Netscape 2.0 - Mosaic 3.0 - Opera 2.1

O atributo <NOFRAME> é usado para exibir mensagens que será interpretada somente pelos browsers que não suportam o uso de frames. <NOFRAME> Desculpe, seu site nao suporta frame </NOFRAME>

(18)

<TITLE> FRAMES LAB </TITLE> <FRAMESET ROWS= “50%,*”>

</FRAMESET> </HEAD> </HTML>

Links entre frames -> como um documento de conteúdo pode ser uma

página HTML comum, pode também possuir links.

Podemos carregar esses links na própria frame ou em uma frame qualquer.

Por isso se faz necessário que um frame possua um nome, associado ao atributo NAME, que o identifique de forma única.

Links entre os Frames: no documento de conteúdo, será escrito um

link usando um novo atributo TARGET que identifica o nome da frame onde o link será exibido.

Saindo de um Frame -> Todo o link em um documento de conteúdo será carregado em uma outra frame caso o atributo TARGET esteja presente.

Se o atributo não estiver presente o link será carregado na mesma frame.

Dessa forma “ficamos” presos dentro das frames.

O atributo TARGET possui um valor especial para que possamos finalizar o uso das frames.

O valor _top elimina as frames que estão sendo exibidas, carregando um link em uma janela inteira. Esse valor deve ser escrito em letras minúsculas.

Abrindo outra janela do Browser

Podemos carregar um link em uma nova janela do browser as invés de carregá-la na mesma janela.

(19)

Ao colocarmos um valor inexistente no atributo TARGET, o browser irá abrir uma nova janela deixando as janelas das frames intacta.

<A HREF= “pag.HTML” TARGET=”xpto”> Frames Disfarçadas

Podemos apresentar frames sem bordas, definir a largura e a altura de uma frame e excluir as barras de rolagem.

Para isso é preciso usar uns atributos que influenciam as frames. Atributos:

FRAMEBORDER -> pode assumir dois valores: 0 (esconde as bordas) ou 1 (exibe as bordas).

Esse é um atributo do tag <FRAMESET>. Se o atributo não for informado, as bordas irão aparecer.

FRAMESPACING altera o espaçamento entre as frames. Seu valor é definido em pixels. Esse é um atributo do tag <FRAMESET>.

O atributo MARGINWIDTH estabelece um valor para as margens direita e esquerda frame.

O atributo MARGINHEIGHT estabelece um valor para a margem superior da frame.

<FRAME SRC=”pag.htm” MARGINHEIGHT=35 MARGINWIDTH=50> Esses são atributos do TAG <FRAME>.

O atributo SCROLLING define a presença, ausência ou atribuição automatica pelo browser das barras de rolagem.

Seu valor pode ser YES, NO ou AUTO.

<FRAME SRC= “pag.htm” NAME= “frm3” SCROLLING=”YES”> Atributo do TAG <FRAME>.

Formulários

Os formulários permite a interação do usuário com a aplicação server-side. É através de formulários que iniciamos pesquisas em base de dados como o altavista.

Os formulários permitem que informações diversas, como dados pessoais, sejam enviados para banco de dados.

Geralmente, um formulário é usado para executar um SCRIPT(PERL, ASP, etc.) no servidor, que irá processar as informações enviadas.

(20)

O tag <FORM> é usado para criar uma área de página onde serão inseridos elementos do formulário.

Os elementos de um formulário são os campos usados para captar e enviar informações.

O atributo ACTION indica a localização URL do script ou programa que será executado para processar os dados enviados pelo formulário.

<FORM ACTION =”http:\\www.infnet.com.br/cgi-bin/script”> Esse comando executa o programa “script” do diretório “/cgi-bin” do servidor infnet.

O atributo METHOD indica o formato no qual os dados serão enviados para o servidor.

Esse atributo pode possui os valores GET ou POST.

Os elementos de um formulário deve ficar entre a área de influência do TAG <FORM>.

É através desses elementos que o formulário tomará forma, exibindo campos de texto, lista de seleção, caixa de diálogo e botões.

Os TAG <INPUT>, <SELECT> e <TEXTAREA> e seus atributos são responsáveis por essa formatação.

Elementos de um Formulário

Esses elementos tem em comum alguns atributos importantes. O atributo NAME indica o nome do campo usado pelo script para recuperação do valor digitado pelo usuário.

O atributo VALUE permite que seja inserido um valor padrão para o campo.

O tag <INPUT> é usado para exibir a caixa de texto, enviar um valor oculto em uma página, botões, elementos de múltipla escolha, etc.

Este tag não possui fechamento.

O valor do atributo TYPE indica qual tipo de texto será exibido. O atributo SIZE indica o tamanho, em caracteres, que o campo texto terá.

O atributo MAXLENGHT indica o número de caracteres que poderão ser digitados em um campo de texto.

Esse atributo só deve ser digitado quando o atributo TYPE for text, password ou hidden.

Atributo TYPE=”password”, substitui o texto por “*” <IMPUT TYPE=”password” SIZE=7 NAME=”senha”>

Campos Ocultos -> permite passar um valor para o script. Esse valor não é exibido na página.

Os atributos NAME e VALUE devem ser informados. Atributo TYPE= “hidden”

Elementos Checkbox

Atributo TYPE=”checkbox” permite escolher uma entre várias opções.

(21)

Se for usado o atributo CHECKED, a caixa já aparecerá ativada. <IMPUT TYPE=”checkbox” NAME=”opcao” VALUE=”on” CHECKED>

O atributo TYPE= “radio”

Permite escolher uma única opção em uma página. Uma das opções também pode receber o atributo CHECKED.

Botão de Envio –> o atributo TYPE= “submit” envia os dados para o servidor, usando o endereço do atributo ACTION do tag <FORM>.

Botão Reset -> Retorna os valores default do formulário. <IMPUT TYPE= “reset” VALUE=”apagar”>

Botão de Imagem -> Permite que uma imagem seja usada no lugar de um botão de envio.

Elemento TEXTAREA -> o tag <TEXTAREA> cria uma área de digitação de várias linhas de texto em uma página.

O atributo COLS define a quantidade de colunas dessa área. O atributo ROWS define a quantidade de linhas da área. Esse tag possui fechamento.

<TEXT AREA NAME=”OBS” ROWS=10 COLS=50> Esta é uma área de texto

</TEXTAREA>

Menus Pull-Down -> São caixas de seleção onde podemos optar por um dos valores da lista.

O tag <SELECT> é utilizado para criar menus pull-down. O tag <OPTION> são usados para definir os itens da lista. O tag <SELECT> possui fechamento.

O atributo size define o número de opções que serão exibidas simultaneamente.

Se o atributo MULTIPLE for informado, o tag select permitirá que mais de um item seja selecionado.

O atributo NAME identifica o nome do objeto que será usado pelo script para envio de informações selecionadas.

Ex.: <SELECT NAME= “UF” SIZE=”1” MULTIPLE> <OPTION VALUE= “RJ” > Rio de Janeiro <OPTION VALUE= “SP”> São Paulo </SELECT>

(22)

Tag <OPTION> -> deve ser usado dentro da área de influência do tag <SELECT> para definir as opções disponíveis ao usuário.

O atributo VALUE define a opção que será enviada ao script, caso seja selecionada.

O atributo SELECTED delimita qual a opção será selecionada como default.

(23)

Tutorial de HTML

(24)

Introdução

Bem-vindos ao mundo HTML, com a ajuda desse hipertexto, vocÊ será capaz de construir home-pages.

A função desse tutorial é puramente acadêmica; tentar ajudar pessoas experientes, intermediárias ou leigas a desenvolver boas aplicações com o HTML.

Futuramente estaremos colocando um tutorial sobre Java Script a fim de que você possa melhoras sua técnica.

Espero que você se divirta bastante ao fazer páginas HTML. Vale lembrar que para isso somente é preciso um browser (Netscape, Internet Explorer, Pegasus, etc.) e o seu Notepad do Windows. Basta salva no notepad com extensão .htm ou .HTML e acessar o caminho pelo browser.

Sugestões, dúvidas e reclamações favor enviar um e-mail para: