Curso prático do HTML

8/6/2019 Curso prtico do HTML

1/63


2/63

1. INTRODUO

As pessoas imaginam que muito difcil construir um site. Isto no verdade! Qualquer umpode aprender como construir uma pgina. Se voc continuar lendo, estar apto a construir

um rapidamente, quando menos esperar.

Outros pensam - erroneamente - que sero necessrios softwares avanados e caros paraconstruir websites. verdade que existem muitos softwares capazes de criar um website paravoc. Alguns mais fechados que outros. Mas, se voc pretende trilhar o caminho certo, devercriar voc mesmo o website. Felizmente, isto simples voc j tem a sua disposio todos ossoftwares que necessita.

O objectivo desta minha apostila fornecer os conhecimentos bsicos que permitiroconstruir um website de forma correcta. A apostila parte da estaca zero e no requer qualquerconhecimento prvio de programao.

Obviamente, a apostila no ensina tudo. Diante disto, ser necessrio que voc se empenhe,pratique e consolide os ensinamentos aqui contidos. Mas, no se aborrea, pois aprendercomo construir um website bem divertido e bastante satisfatrio quando voc trilha ocaminho certo do aprendizado.

OK. Chega de conversa. Vamos comear...

2. SOBRE O HTML

O HTML uma Linguagem de marcao de texto. Mais especificamente, uma linguagem demarcao de hipertexto. Portanto, antes de comear a falar de HTML, vamos entender o quevem a ser uma linguagem de marcao.

Linguagens de marcao (markup languages em ingls) so linguagens que combinam textocom informaes extras sobre o texto. Essa informao extra pode ser representada pordiversos smbolos ou palavras-chave diferentes, dependendo da linguagem de marcao comque estivermos trabalhando.

O HTML no era uma linguagem de formatao de textos qualquer, ela possibilitava ligartextos que estavam num computador a textos que estavam num outro computador, usandocomo meio a internet. O processador e visualizador de HTML so chamados de navegador,pela caracterstica do hipertexto que permite ao usurio "nadar" na informao.

O navegador (tambm chamado de browser), nada mais faz do que abrir arquivos decomputador e, caso esses arquivos contenham cdigos HTML, interpret-los segundo o padrodo hipertexto e gerar a "pgina HTML", que a manifestao grfica dos cdigos - aquilo quevoc usualmente v quando navega pela internet. Por conveno, os nomes dos arquivos emHTML terminam com .HTML. Exemplo: index.html, foo.bar.html e etc.html (existem tambmarquivos HTML que terminam com .shtmle outras extenses malucas). Observe que essesarquivos podem estar tanto no computador do usurio que usa o navegador quanto em outroscomputadores: o navegador capaz de abrir esses arquivos desde que eles estejam acessveis- as tais pginas Web.

3. SUA PRIMEIRA PGINA EM HTML


3/63

Uma pgina HTML dividida em duas partes, a cabea e o corpo. Na cabea (ou cabealho) sodefinidos os atributos principais do documento, como o ttulo e as palavras-chave. O corpocontm a parte visvel do documento, I.E, aquela que voc ver processada em seu navegador.Existe ainda uma regio da pgina que est tanto fora da cabea quanto do corpo (no! no

a falta de juzo!), mas no iremos entrar nesse mrito.

3.1 - O que est dentro de um arquivo em HTML?!

Um arquivo HTML constitudo por textos que definem os elementos da linguagem HTMLusando "etiquetas de marcao";

As etiquetas de marcao do instrues ao navegador sobre a estrutura do documento esobre a forma de como a pgina deve ser apresentada graficamente;

Os arquivos HTML podem ser escritos usando um simples editor de textos e seus nomesdevem possuir a extenso .html

3.2 - Experimente voc mesmo

Bom, se voc utiliza o Windows (95, 98, 2000, XP, etc.), inicie o Bloco de Notas (Notepad).

Agora digite o seguinte texto:

Ttulo da Pgina Esta minha primeira pgina. Este texto est em negrito

Salve este arquivo com o nome index.htm

Abra o seu navegador. Agora abra o arquivo que voc salvou acima, chamado index.htmutilizando as opes do menu ou arrastando o cone do arquivo para dentro da janela donavegador. Observe o resultado.

3.3 - Explicao do Exemplo

A primeira tag em seu documento HTML . Esta tag define o incio de um documentoHTML e indica ao navegador que todo contedo posterior deve ser tratado como uma srie decdigos HTML. A ltima tag em seu documento dever ser . Esta tag indica aonavegador que o fim de seu documento HTML.

O texto entre as tags ... a informao do cabealho. Nenhuma informaocontida no cabealho exibida na janela do navegador.


4/63

O texto entre as tags ... o ttulo de seu documento. O ttulo ser exibido nalegenda do navegador, na parte de cima do browser.

O texto entre as tags ... so as informaes que sero exibidas na pgina.

O texto entre ... ficar com o estilo Negrito (Bold)

3.4 - Devemos usar a extenso .htm ou .html?

Os nomes dos arquivos escritos em HTML devem ter a extenso .html, mas a extenso .htmainda utilizada. Este fato uma herana dos tempos (pr-histricos no que diz respeito Internet) do MS-DOS e do Windows 16 bits, em que os nomes dos arquivos tinham no mximo8 caracteres e as suas extenses no podiam ter mais de 3 caracteres.

Essas deficincias, que no passado obrigaram a usar a extenso .htm em vez de .html j foram

eliminadas. Por isso devemos usar a extenso .html, a no ser que exista uma boa razo paravoc estar utilizando .htm (pouco provvel).

3.5 - Editores "Puros" versus WYSIWYG

Existem duas formas de se criar um texto formatado atravs de linguagens de marcao. Aprimeira consiste em escrever o texto, usando as instrues da linguagem, num editor de textopuro. Em seguida, usa-se o processador de texto para produzir o texto formatado.

A outra maneira usar um editor de textos WYSIWYG (What You See Is What You Get - O QueVoc V O Que Voc Tem). Apesar de a sigla ser comprida, o conceito simples: esse tipo deprograma composto por um editor de texto que tambm um processador de textosformatados. A diferena aqui que o texto que o usurio est editando e visualizando no otexto puro, mas sim o texto j formatado graficamente, ou seja, o que voc v o que voctem.

Voc provavelmente j usou editores desse tipo. Os editores como o Word, oAbiWorde oOpenOffice Writerso WYSIWYG e os documentos que eles geram utilizam Linguagens demarcao.

3.6 - FAQ (Perguntas Frequentes)

Depois que eu editei meu arquivo HTML, eu no consigo visualizar o resultado em meunavegador. Por qu?!Verifique se voc salvou o arquivo com o nome correcto e que sua extenso seja .htm. Confiratambm em sua barra de endereos do navegador, verifique quanto ao directrio se estcorrecto.

Qual navegador eu devo utilizar?!Voc pode utilizar qualquer browser, como o Internet Explorer, Mozilla, Opera, etc.particularmente recomendo o Firefox e o Internet Explorer.


5/63

Porque utilizamos tags com letras minsculas?!Em HTML os nomes das tags e elementos podem ser escritos tanto com letras maisculasquanto com letras minsculas, tanto que a mesma coisa que . Se voc observar emtutoriais encontrados pela Web, vai notar que os mais antigos geralmente utilizam letrasmaisculas para escrever os nomes das tags, mas os mais modernos utilizam exclusivamente

letras minsculas. Nesta minha apostila utilizo sempre letras minsculas porque existe umarazo muito forte para isso.

A nova gerao do HTML uma aplicao do XML e designada por XHTML. O XHTML amelhor linguagem para se criar pginas para a Web, mas mais restrita do que o HTML(rouba algumas das liberdades que o HTML oferece). Ao contrrio do que acontece emHTML, em XML as etiquetas e representam elementos diferentes, visto que emXHTML foi adoptado uma conveno segundo a qual todas as etiquetas devem ser escritascom letras minsculas. Por este motivo extremamente recomendvel que se escreva todasas etiquetas com letras minsculas. Deste modo, voc estar adquirindo bons modos e quaseno ter trabalho de converter suas pginas HTML para XHTML.

4. ELEMENTOS E ATRIBUTOS

4.1 - Elementos

Um elemento uma estrutura semntica, composta de tag de abertura, contedo e tag defechamento.

Os documentos HTML so simples arquivos de texto que contm "tags de marcao". Essasetiquetas definem os elementos da linguagem HTML e os seus contedos. A lista seguinteindica algumas de suas caractersticas:

As "tags de marcao" do HTML so usadas para definir os elementos.

As tags HTML escrevem-se utilizando os caracteres < e > , entre eles o nome do elemento e osseus atributos.

A primeira tag do par a tag de incio (ou de abertura) e a segunda do par a tag de fim (ou defechamento).

Tudo o que se encontrar entre as tags de incio e de fim faz parte do contedo do elemento.

Em XHTML as tags devem ser escritas sempre com letras minsculas, e as tags e norepresentam o mesmo elemento.

Voc se lembra de nosso primeiro exemplo mostrado?!

Ttulo da Pgina Esta minha primeira pgina. Este texto est em negrito


6/63

Esta parte abaixo um elemento HTML:

Este texto est em negrito

Repare alguns aspectos do cdigo acima:

Este elemento inicia com a tag: O contedo do elemento este: Este texto est em negritoO elemento termina com a tag final:

O propsito da tag colocar o contedo do elemento HTML em negrito (bold)

Um exemplo mais complexo

Este exemplo abaixo tambm um elemento do HTML (mais complexo):

Esta minha primeira pgina. Este texto est em negrito

Este elemento HTML inicia com tag e termina com a tag

O propsito da tag definir o contedo principal, o corpo do documento.

4.2 Atributos das Tags

Tag um cdigo usado para marcar o incio e, onde for requerido, o fim de um elementoHTML. H, como exposto acima, tags de abertura e de fechamento. Uma tag de abertura representada por sinal de menor ( < ), um nome de elemento HTML, e um sinal de maior ( > )(ex.

) e deve ser colocada imediatamente antes do incio do contedo do elemento. Umatag de fechamento se diferencia de uma tag de abertura apenas por uma barra ( / ) antes donome do elemento (ex.
) e deve ser colocada imediatamente aps o fim do contedo doelemento.
Os Atributos servem para definir uma propriedade de um elemento HTML. Os atributos HTMLdevem ser colocados sempre na tag de abertura, logo aps o nome do elemento, precedido deum espao e composto de um nome de atributo, um sinal de igual ( = ) e um valor deatributo, cercado por aspas duplas ( " ) ou simples ( )

A tag define o corpo ( body ) de uma pgina HTML. No exemplo seguinte adicionei oatributo bgcolor (que significa "background color", ou cor de fundo) para indicarmos quequeremos que a pgina fique com uma cor vermelha em seu plano de fundo.

Esta a minha primeira pgina da web.Este texto est em negrito


7/63

Vamos considerar agora a tag , que define um elemento de uma tabela. Ao juntarmos oatributo border (que significa borda) com o valor apresentado a seguir, estamos dizendo aonavegador para no colocar as bordas da tabela ( indica uma espessuranula para a linha de contorno da tabela):

Esta a minha primeira tabela.

J no exemplo abaixo estamos dizendo ao navegador para desenhar uma linha de contornocom espessura 2 ( border="2" )

Esta a minha segunda tabela.

Os atributos sempre entram em pares nome/valor (name/value), assim: name="value"

Nota 1: Os atributos s podem aparecer nas tags de incio. proibido colocar atributos nastags de fechamento.

Nota 2: Para garantir a compatibilidade com a linguagem XHTML, utilize letras minsculas paraescrever o nome dos atributos, e sempre coloque os valores entre aspas.

4.2.1 - Atributos podem ser aplicados maioria das tags

Voc normalmente usar atributos com mais frequncia em algumas tags, tais como a tagbody e raramente usar em outras, como por exemplo, a tag
que um comando parapular de linha e no precisa de nenhuma informao adicional.

Assim como existem muitas tags, tambm existem muitos atributos. Alguns atributos soempregados em tags especficas enquanto outros servem para vrias tags. E vice-versa:algumas tags podem conter somente um tipo de atributo, enquanto outras podem contervrios tipos.


8/63

Isto pode parecer um pouco confuso, mas medida que voc for praticando vai constatar quetudo fcil e lgico, bem como vai verificar as inmeras possibilidades que os atributosoferecem.

4.3 - Devemos usar aspas ou plicas/apstrofos (escrevemos "texto" ou 'texto')?

Acabamos de ver que os valores dos atributos devem ser sempre colocados entre aspas.Normalmente utilizamos as aspas normais ( " ), mas os apstrofos ( ' ) tambm so permitidos.

Em alguns casos, o valor do atributo contm o prprio carcter aspas. Numa situao dessas,devemos usar apstrofos (que aqui funcionam como aspas simples) para colocar em torno dovalor do atributo, assim:

alt='Ele disse: "No!" '

4.4 Notas Rpidas

As Tags HTML so utilizadas para marcar elementos HTML. Elas esto cercadas pelos doiscaracteres (maior que)

As tags normalmente aparecem em pares, como e

A primeira tag em um par sempre a tag de incio, a segunda tag do par a tag de fim

O texto entre o comeo e o fim da tag o contedo do elemento.

HTML no sensitive, ou seja, a mesma coisa que

Se por acaso voc escreveu os cdigos HTML errado - por exemplo >b> invs de - no sedesespere, pois o mximo que pode acontecer o seu navegador interpretar sua pgina deforma diferente do esperado e desenh-la de um jeito maluco.

5. O CABEALHO DE UM DOCUMENTO HTML

5.1 - O Elemento (cabealho do documento)

O elemento contm informao de carcter geral, tambm designada por meta-informao, sobre o contedo do documento e sobre a forma como ele deve ser apresentado.

Podemos dizer que o termo meta-informao (ou meta-dados) significa dados que descrevemoutros dados ou informaes.

5.1.1 - A Informao Contida no Elemento

Os elementos contidos dentro do elemento no so exibidos na tela do navegador.


9/63

O padro HTML estabelece que s um pequeno nmero de elementos pode aparecer dentrodo cabealho. Eles so: , , , , e .

A construo seria o seguinte:

Aqui temos algum texto

Nesta situao acima, o navegador pode reagir de duas formas:

Apresentar o texto porque ele se encontra dentro de um elemento

Esconde o texto porque ele pertence ao cabealho.

Se voc colocar um elemento no autorizado, como ou

, dentro do cabealho, a

maioria dos navegadores vai escrever este elemento na pgina.

Aparentemente, as pessoas que so responsveis pela concepo dos browsers acham queeste gnero de erros aceitvel. Esta e outras deficincias dos browsers so parcialmenteresponsveis pelas ms prticas de codificao adquiridas por muitos criadores de pginasHTML. Uma das razes que levaram criao da linguagem XHTML foi a necessidade de acabarcom estas situaes de uma vez por todas.

5.1.2 - Elementos de cabealho ( )

Elemento Descrio

Contm informao importante a respeito do documento mas que nodeve ser apresentada no corpo da pgina

Define o ttulo da pgina

Define um URL base comum para todas as ligaes relativas da pgina

Faz referncia a um recurso externo e estabelece a ligao com ele

D informao sobre aquilo que o documento contm

5.1.3 - A declarao DOCTYPE

A declarao DOCTYPE serve para indicar o DTD a usar para validar na pgina. Quandoutilizada, deve aparecer logo no incio da pgina, antes do elemento

Declarao Descrio

Define o tipo de documento. Deve ser colocada antes de qualquerelemento pelo que fica mesmo antes do elemento

5.2 - O elemento

O elemento contm informao de carcter geral (meta-informao) sobre odocumento e deve ser colocado dentro do elemento . Sua finalidade fornecerinformao que descreve o documento.


10/63

5.2.1 - Palavras-chave para os motores de pesquisa

Durante alguns anos a utilizao mais frequente da informao fornecida pelo elemento

foi a criao de ndices para sites de busca. Actualmente somente alguns motores debusca ainda usam esta informao para indexar pginas, e os de maior sucesso ignoram esteelemento. No entanto, h partes que continuam a ser tidas em considerao pelos agentes(robots) dos motores de busca, como por exemplo, as indicaes dadas sobre as pastas em queno deve ser feita qualquer indexao.

Alguns sistemas de busca (no muitos) usam a informao contida nos elementos meta paraindexar as pginas. No fragmento de cdigo seguinte, o elemento contm uma brevedescrio da pgina:

Na parte do cdigo abaixo o elemento contm umas palavras-chave para indexar apgina:

Como acabamos de ver, os nomes dados ao atributo name indicam claramente a finalidade dainformao contida no elemento meta.

Infelizmente, muitos criadores de pginas para a Web abusaram do elemento meta e usaramde forma contrria sua filosofia para enganar os motores de pesquisa. Em consequnciadisso, os sites de busca passaram a ignorar cada vez mais o elemento , o que acaboudificultando todos aqueles que pretendiam us-lo de forma correcta.

5.2.2 - Valores desconhecidos para o atributo name do elemento

Algumas vezes encontramos situaes em que o atributo name do elemento contmum valor desconhecido, como no exemplo seguinte:

Numa situao destas devemos interpretar o elemento meta como contendo informao que especfica do website. Essa informao pode ser importante para o autor da pgina, masprovavelmente irrelevante para os visitantes. possvel que essas informaes sejam teispara algum software que leia a pgina.

6. MODIFICANDO O CORPO DO DOCUMENTO

Como dito anteriormente, o elemento body engloba o corpo do seu documento HTML. Elepossui muitos atributos que possibilitam modificar a aparncia da sua pgina, como cor defundo ou das letras. Esses atributos tambm podem ser utilizados junto com o atributo td.Aqui mostraremos apenas os atributos que interferem nas cores da sua pgina:

bgcolor: define a cor de fundo de um documento


11/63

text: a cor do textolink: a cor dos linksalink: a cor dos links activos actualmente (a pgina que voc est visitando)vlink: cor dos links j visitados

Os argumentos so o nome ou o nmero de uma cor, exactamente como no caso do atributocolorusado no elementofont. Por exemplo:

Isso uma confuso!

Isso uma pgina em html.

Essa uma pgina HTML onde o fundo ser preto, com letras cinzas, links em vermelho e linksactivos em branco. Essas so as definies globais de cor para seu documento, e a qualquerinstante voc pode mudar as cores com o elemento font.

7. ELEMENTOS BSICOS DA LINGUAGEM HTML

7.1 - Cabealhos

Os cabealhos (tambm chamados de Headings) servem para criar ttulos diferenciar asseces da sua pgina. Eles possuem seis valores diferentes, sendo que a de valor 1 a quepossui a maior fonte e a de valor 6 possui a menor fonte.

Por exemplo, usando o seguinte cdigo:

Ttulo 1 Ttulo 2 Ttulo 3 Ttulo 4 Ttulo 5 Ttulo 6

No cdigo acima, o HTML automaticamente solta uma linha em branco entre um ttulo eoutro.

7.2 - Pargrafos

Os pargrafos so definidos com a tag

Este um pargrafo

Este um outro pargrafo

No cdigo acima, o HTML automaticamente acrescenta uma linha em branco antes e depois deum pargrafo.


12/63

7.2.1 - Alinhamentos de pargrafo

Voc j deve ter visto que em certos documentos o texto aparece ora alinhado direita, ora

esquerda, no centro ou ento ocupando uniformemente o espao da pgina (texto justificado).Isso pode ser obtido facilmente em HTML. Veja a tabela abaixo:

ELEMENTO DESCRIO

Alinha o texto esquerda

Alinha o texto direita

Alinha o texto centralizado

Alinha o texto justificado

Note que entre os delimitadores < e > no encontra-se apenas o elemento

. Alm dele,existe o texto align="alinhamento". Dizemos que align um atributo do elemento p e

alinhamento o valor desse atributo. No caso de

, o valor do atributo align(que significa alinhamento em ingls) justify(justificado).

Os atributos, as palavras que seguem o elemento, informam o navegador a respeito daspropriedades que os elementos podem assumir. Confuso?! Pode parecer um pouco confuso,mas no . Como disse a Toya, "Um disco de banda punk pode ter diversas propriedades ou'atributos' - a cor do disco, tamanho, velocidade, etc., tudo isso so atributos." E eu digo mais:se voc coloca o disco num toca-discos, voc pode ouvi-lo em duas ou no mximo trsvelocidades. s vezes d para ouvir ao contrrio. Mas se voc arremessar seus discos do Fofo,garanto que eles podero girar em muitas outras velocidades. Assim o HTML, com muitasopes para voc exibir seu texto.

No HTML, os valores dos atributos podem ser definidos da forma atributo=valor ouatributos="valor"(como em align="justify"), que mais recomendada.Como voc viu, nem todos os cdigos em HTML necessitam de atributos, em especial oscomandos de modificao de texto como negrito, itlico, sublinhado, etc.

Resumindo, os atributos definem caractersticas adicionais aos elementos. Nas secesseguintes veremos elementos com vrios atributos. Por exemplo, no adianta dizer ao seunavegador para por um link em alguma parte do seu texto, preciso dizer ao navegador, porexemplo, para que lugar esse link aponta. isso o que um atributo faz.

7.3 - Criando uma diviso

Existem momentos em que queremos que vrios pargrafos possuam um mesmo valor deatributo - centralizado, por exemplo. Ao invs de escrevermos align="justify" a cada aberturade novo pargrafo, podemos usar o elemento div, que cria uma "diviso" no documento naqual alguns atributos so preservados. Vejamos o exemplo:

Pargrafo 1

Pargrafo 1Pargrafo 1


13/63

Pargrafo 2Pargrafo 2Pargrafo 2

Pargrafo 3Pargrafo 3Pargrafo 3

Experimente mudar os atributos do alinhamento para ver o que acontece!! Na parte de Folhasde Estilo mostrarei como utilizar o elemento div para criar seces lgicas em documentos.

7.4 Quebras de Linha

A tag
utilizada quando voc quer terminar uma linha, mas no quer comear um novopargrafo. Com este comando voc faz com que ocorra uma quebra de linha, onde vocposicionar a tag.

Note que para o elemento
no existe o comando , isto , a quebra de linha no agenuma regio de texto delimitada, mas sim num ponto do texto. Complicado?! Ento vamos l,mais uma vez explicando de uma outra forma: comandos como , e agem sobreuma regio do texto e precisam ser fechados com seus respectivos , e , pois docontrrio esses comandos agiro at o fim do documento. J o comando de quebra de linha,, e alguns outros actuam somente no ponto onde eles aparecem.

Veja o exemplo abaixo da utilizao da tag

Este
um par
grafo com quebra de linha

A tag
uma etiqueta vazia, ela no possui tag final.

7.5 Comentrios

A tag de comentrio utilizada para inserir comentrios no cdigo fonte HTML. Todo tipo decomentrio ignorado pelo navegador, isto , ele no ser exibido na tela. Voc pode utilizaresta tag para explicar seu cdigo fonte ou parte dele, que poder ajud-lo quando voc estivereditando seus cdigos posteriormente.

Note que voc precisa de um ponto de exclamao depois do parnteses de abertura, e noantes do parnteses final.

7.6 Informaes teis


14/63

1) Quando voc escrever um texto em HTML, esteja ciente de que o texto que voc estvisualizando no ser exibido igualmente em todos os navegadores. Algumas pessoas possuemcomputadores com resolues maiores, outros menores, tudo isso influi na questo daexibio da pgina, o que pode acontecer so os textos e as janelas que podem serredimensionados.

2) As diferenas nos tamanhos das janelas dos navegadores fazem com que o nmero decaracteres que cabem numa linha varie muito. Por esse motivo no seremos capazes decontrolar nem o nmero de linhas nem os locais em que acontecem as mudanas de linha.Nunca tente formatar o texto inserindo espaos ou linhas vazias, porque os resultados nosero aqueles que voc esperava.

3) O HTML quando encontra dois ou mais espaos seguidos, ele trata-os como se fosse umnico espao. Quando voc escreve uma sequncia de espaos seguidos, o resultado omesmo de escrever um nico espao. Em HTML, as teclas Tab e Enter equivalem a um espao.

4) Sempre que voc quiser inserir linhas em branco, utilize a tag
. Existem pessoas queutilizam pargrafos vazios para obter o mesmo resultado, mas isso est errado. A tag

deveser usada apenas para definir pargrafos, e o elemento
no deve ser usado, por exemplo,para criar listas, pois existem tags concebidas especificamente para isso. Sempre que vocprecisar de obter uma formatao especial, voc deve usar o elemento que foi criado paraesse efeito.

5) Em muitas pginas, os pargrafos esto escritos sem a etiqueta de fechamento (
)Apesar de os navegadores aceitarem esta omisso, tenha sempre ateno para fechar todos oselementos que requerem uma tag de fechamento. Se voc tentar validar uma pgina quecontenha estes erros, ver que ela no passar no teste de validao.
6) Os elementos

e ... o navegador adiciona automaticamente uma linha embranco antes do incio e outra depois do fim.

7.7 Lista de elementos bsicos do HTML

TAG DESCRIO

Define um documento HTML

Define o contedo principal, o corpo do documento

at Define ttulos, de 1 a 6

Define pargrafo
Insere linhas em branco, quebra de linha

Insere uma linha horizontal

Define um comentrio

8. FORMATAO DE TEXTO

A linguagem HTML define vrios elementos para se formatar um texto, como por exemplo,escrever em negrito, itlico, sublinhado, etc. O exemplo abaixo mostra alguns deles:
http://www.w3schools.com/tags/tag_comment.asphttp://www.w3schools.com/tags/tag_comment.asp


15/63


16/63

Define uma pequena citao

Define a citao

Define um termo de citao

9. LIGAES DE HIPERTEXTO ("LINKS")

Essa uma das seces mais importantes desta apostila, pois afinal estamos falando dehipertexto. Queremos que uma pgina HTML possa fazer referncia a outras pginas html oupara qualquer outro tipo de arquivo que se encontre em outros lugares da web. No jargo dainternet, voc quer ligar (link) parte da sua pgina com outras.

Isso feito de modo muito simples com o elemento a, como segue:

CMI Brasil

Como voc deve ter percebido, o atributo href(Hipertext Reference / Referncia de Hipertexto)indica o endereo da pgina que voc quer "linkar" (ligar) ao seu documento. No exemploacima, o texto CMI Brasil aparece como uma referncia para o link. Se voc clicar sobre essetexto, seu navegador automaticamente tentar abrir a pginahttp://www.midiaindependente.org

Os endereos so escritos na forma de URL (Uniform Resource Locators), que uma maneiraque inventaram para se especificar o caminho at se chegar num arquivo que esteja nalgumlocal da internet.

O formato da URL :

protocolo://nome-do-computador/pastas/arquivo

O protocolo indica como o navegador ir buscar o arquivo. Nome do computador aqueleendereo do tipo www.ninguem.com.br e as pastas so os directrios dentro dessecomputador onde esto os arquivos. Uma URL de um artigo do site da CMI Brasil , porexemplo, http://www.midiaindependente.org/pt/blue/2004/09/290669.shtml, onde http:// o protocolo, pt, blue, 2004 e 09so pastas(uma fica dentro da outra) e 290669.shtml onome do arquivo.

http://

\--- www.midiaindependente.org

\--- pt

\-- blue

\--- 2004


17/63

\--- 09

\---290669.shtml

Lembre-se tambm que quando voc aceder o endereo http://www.ninguem.com.br, porexemplo, est na verdade vendo o arquivo http://www.ninguem.com.br/index.html. Osarquivos do tipo index.html sempre so procurados pelo navegador quando voc solicitaapenas o nome do site ou uma pasta de um computador.

Em html, existem trs formas possveis de se fazer links: os links internos, os links locais(ourelativos) e os links externos.

9.1 - Links internos

Links internos so aqueles que ligam uma seco de uma pgina com uma outra seco damesma pgina. Por exemplo, se eu quiser fazer uma referncia para a seco Hipertexto dessanossa apostila, basta que eu primeiro defina um nome para a seco Hipertexto e entoadicione um link para ela. Isso feito da seguinte forma:

1 - Vou at o incio da seco Hipertexto e adiciono o seguinte cdigo, ao invs desimplesmente escrever o ttulo da seco:

Hipertexto

2 - Adiciono o link para essa seco com o seguinte cdigo,

V para a seco hipertexto

O atributo name serve apenas para dar um nome para uma posio de uma pgina html. Ovalor de name pode ser qualquer um (nesse caso eu coloquei "Hipertexto").

Quando voc fizer uma referncia a um link interno utilizando o atributo href, voc precisanecessariamente adicionar o carcter # (jogo da velha) antes do nome da sua seco - nonosso caso, #Hipertexto - pois do contrrio seu navegador tentar abri-lo como um link local.

9.2 - Links locais ou relativos

Links locais so aqueles que referenciam um arquivo que esteja no mesmo computador que asua pgina. Links locais no contm o http:// no incio do endereo. Por exemplo, se no meudocumento html eu quiser fazer um link para o arquivo links.html que est na mesma pasta domeu documento, no preciso digital o endereo completo, mas apenas:

Acesse os links!

Esse tipo de argumento para o hreftambm chamado de links relativos. Se voc quiserlinkar uma pgina que esteja do directrio (pasta) superior da sua pgina, use dois pontos euma barra antes do nome do arquivo:


18/63

Acesse os links!

A vantagem de voc usar links relativos que voc pode mover todo o seu site para um novoendereo na internet e no precisar reeditar todos os links que apontam para pginas do seu

prprio site.

9.3 - Links externos

Links externos so aqueles que podem apontar para qualquer arquivo disponvel na internet,como por exemplo:

Acesse a Wikipedia!

Os links externos precisam necessariamente conter o prefixo http:// e o endereo completo

do arquivo.

9.4 - Alvo (target)

Um atributo interessante para o elemento o target, que permite que o link sejaaberto numa outra janela do seu navegador.

Acesse a Wikipedia!

O argumento do atributo target o nome da janela do navegador que abrir o link. Se vocquiser que o link seja aberto numa nova janela, simplesmente escolha qualquer nome comoargumento.

9.5 Elementos para fazer ligaes

ELEMENTO DESCRIO

Define uma ncora ou uma ligao de hipertexto

10. LISTAS

A linguagem HTML contm elementos que permitem criar listas de definies, listasordenadas e listas no ordenadas.

10.1 - Listas No Ordenadas

Uma lista no ordenada contm vrios itens marcados todos com o mesmo smbolo

(normalmente um crculo pequeno ou um quadrado pequeno).


19/63

Para criar uma lista no ordenada, utilizamos o elemento ("unordered list"). Dentro desseelemento, os vrios itens so criados com o elemento ("list item").

O exemplo seguinte mostra uma lista simples:

RumBagao

Este o aspecto de como vai ficar em seu navegador:

Rum

Bagao

Dentro de uma lista no ordenada podemos colocar pargrafos, quebras de linha, imagens,

outras listas, etc.

10.2 - Listas Ordenadas

Uma lista ordenada contm vrios itens numerados e criada com o elemento ("orderedlist"). Os itens da lista definem-se com o elemento ("list item").

RumBagao


1. Rum2. Bagao

Dentro de uma lista ordenada podemos colocar pargrafos, quebras de linha, imagens, outraslistas, etc.

10.3 Listas de Definies

Uma lista de definies no constituda por uma srie de itens, mas sim por vrios termosacompanhados de descries de seus significados.

As listas de definies so criadas com o elemento ("definition list") O nome de cadatermo fica dentro de um elemento ("definition term") e a sua descrio fica no elemento("definition description")

RumBebida espirituosa muito apreciada pelos piratas do CaribeBagaoBebida com elevado teor alcolico. A sabedoria popular


20/63

atribui-lhe fortes propriedades teraputicas.


RumBebida espirituosa muito apreciada pelos piratas do CaribeBagaoBebida com elevado teor alcolico. A sabedoria popular reconhece-lhe fortes propriedadesteraputicas.

Dentro de um elemento podemos colocar pargrafos, quebras de linha, imagens, outraslistas, etc.

10.4 Elementos para Listas

ELEMENTO DESCRIO

Define uma lista ordenada

Define uma lista no ordenada

Insere um item na lista

Insere uma lista de definies

Apresenta a definio de um termo

Insere a definio de um termo

Desuso. Utilize

Desuso. Utilize

11. IMAGENS

Alm de manipular texto, o html tambm serve para exibir imagens de uma maneira muitosimples, usando para isso o elemento :

O atributo src - source, fonte em ingls - d o nome do arquivo da imagem e o nico atributoobrigatrio para o elemento img. Os atributos para a largura (width) e a altura (height) noso necessrios, mas sero muito teis quando as pessoas estiverem navegando em seu site:

quando seu navegador abre um arquivo html e encontra o elemento img, ele usar orespectivo atributo src como o endereo onde est o arquivo de imagem a ser exibido. Emoutras palavras, o elemento img apenas passa uma referncia do arquivo de imagem aonavegador, ou seja, voc no est colocando esse arquivo de imagem dentro do seu arquivohtml, voc est apenas colocando em seu arquivo html uma referncia a esse arquivo deimagem. O navegador, por sua vez, comea a baixar essa imagem a partir desse endereoatributo enquanto termina de exibir o documento.

Dependendo do tipo de arquivo de imagem, ela s ser exibido pelo navegador quandoterminar de ser baixada. Se isso ocorrer e voc no utilizou os atributos width e height no seudocumento, o navegador s reservar espao na tela do seu computador para a exibio da

imagem quando ela tiver sido baixada, e durante esse intervalo a formatao do seudocumento pode ficar diferente. Para evitar isso - somente por uma questo de estilo -


21/63

recomendamos que voc sempre use os atributos width e height, que informam ao navegadoro tamanho da imagem, antes mesmo de ele comear a baix-la, e assim o espao na tela doseu computador ser apropriadamente reservado para ela.

11.1 - Tamanho de exibio da imagem

Os atributos width e height merecem um pouco mais de ateno. Como vimos, so osatributos que determinam o tamanho que a imagem ser exibida. Existem duas formas de sefazer isso, utilizando o tamanho em pixis (tamanho absoluto) e em valores relativos aotamanho disponvel da tela do computador, isto , em percentagem.

Um pixel a menor unidade luminosa da tela do seu computador que os programas podemmanipular, e isso depende muito da resoluo da tela do seu computador. Um pixel umquadradinho luminoso. Actualmente as telas de computador tm uma resoluo de 800 pixisde comprimento e 600 de altura, s vezes pode ser de 1024 de comprimento e 768 na altura

ou resolues at maiores, de tal modo que nossos olhos j no conseguem distinguir entrepixis contguos.

O tamanho das imagens computadorizadas tambm pode ser medido em pixis, que otamanho que a imagem vai ocupar na tela do seu computador quando ela for exibida. Para quevoc descubra qual o tamanho da sua imagem, voc ter que usar algum programa de ediode imagens ou ento abri-la directamente no seu navegador. Experimente ir no menu Arquivoe depois em Abrir, no seu navegador, ou ento digitar a localizao da imagem directamentena barra de endereos. Quando a imagem for exibida, clique sobre ela com o boto direito doseu mouse e em seguida v em Propriedades. Uma janela com as informaes da imagens -inclusive seu tamanho - dever aparecer. De posse desses valores, basta coloc-los dentro dado img. No exemplo anterior, onde usamos o cdigo width="221"height="300", a imagem foiexibida com 221 pixis de largura e 300 de altura, coincidentemente sendo seu tamanhooriginal. Poderamos ter escrito:

Ou seja, a imagem foi mostrada com um tamanho menor do que o original. Tambmpoderamos usar tamanhos maiores que original... que tal voc experimentar algo comowidth="2210" height="3000"?!

O segundo modo de determinar o tamanho de exibio das imagens no navegador consiste emutilizar percentagem. Por exemplo:

Resultar numa imagem exibida com um dcimo (10%) do espao disponvel da tela docomputador.

Nos dois modos de determinar o tamanho - em pixis e em percentagem - podemos escolhervalores independentes para a altura e a largura, de tal forma que a imagem fique distorcida.Olha que engraado:

11.2 - Texto alternativo


22/63

Existem ainda outros atributos interessantes para a exibio de imagens. Voc pode incluiruma descrio da imagem para que se, por qualquer razo, algum no consiga ver a imagemela possa ler uma descrio no espao vazio. Essa descrio tambm aparecer quando vocpassar o mouse por sobre a imagem.

Voc pode adicionar uma pequena descrio desta maneira:

O atributo alt(texto alternativo) utilizado para dar a pequena descrio, neste caso "EmmaGoldman!".

11.3 - Borda da imagem

Uma borda (contorno) da imagem pode ser adicionada com o atributo :

O valor do atributo border indicar o tamanho dessa moldura.

11.4 - Alinhamento da imagem

possvel ainda colocar imagens e texto um do lado do outro, de diversas formas. Vamossupor a mais simples:

O texto aparece ao lado da imagem.

Esse cdigo pode funcionar muito bem, mas s vezes acontece do texto aparecer abaixo daimagem. Para fazer o posicionamento da imagem e do texto correctamente, basta utilizar oatributo align, que funciona de modo anlogo ao do alinhamento de pargrafos:

O texto vai aparecer esquerda da imagem (o atributo rightfaz que a imagem fique direitada tela), mesmo tendo escrito aps o cdigo sobre a imagem. Enquanto o texto puder ficar aolado da imagem, ele ficar. Quando ele no mais couber nesse espao, ele comear a serexibido abaixo da imagem, como voc pode ver aqui.

Utilizar o alinhamento de imagens a melhor maneira de garantir que ela aparecer no localdesejado.

11.5 - Espaamento da imagem

Notou como o texto do exemplo anterior saiu colado imagem?! possvel definir umespaamento entre a imagem e qualquer objecto (texto, imagem, tabelas) que esteja ao seulado, acima ou abaixo, usando para isso os atributos vspace(espaamento vertical) e hspace(espaamento horizontal).


23/63

O valor desses atributos diz ao navegador qual ser o espao em pixis entre a imagem equalquer objecto:

O texto vai aparecer direita da imagem, a cinco pixis de distncia dela. Deu para notar adiferena?! Utilizando todos esses atributos para a exibio de imagens voc obtm um textobem diagramado e bonito de ser lido.

Nota: Ao utilizar imagens, lembre-se de que elas podem aumentar consideravelmente otempo de carregamento para ver o contedo de suas pginas, por isso, use-as com cuidado.

11.6 Elementos relacionados com imagens

ELEMENTO DESCRIO

Insere uma imagem

Define um mapeamento sobre a imagem ("image map")

Define uma rea clicvel sobre um mapa de imagem

11.7 Fundos de Pgina

Uma cor ou uma imagem de fundo bem escolhido podem melhorar o aspecto da pgina, masuma m escolha capaz de causar danos muito graves na legibilidade e no aspecto geral da

pgina.

11.7.1 - O atributo bgcolor do elemento

O elemento possui atributos que nos permitem especificar as cores do texto e a cor defundo. Tambm podemos usar uma imagem como padro de fundo.

O atributo bgcolor nos permite escolher a cor de fundo da pgina. O quadro seguinte mostratrs formas de indicar a cor de fundo da pgina usando um cdigo de cor hexadecimal, umcdigo RGB e um nome de cor (veja mais frente o tpico sobre cores).

As linhas apresentadas mais acima usam formas diferentes (mas todas vlidas) para dar a corpreta ao fundo da pgina.

Nota: a forma recomendada para formatar o texto e os fundos de pgina baseia-se em estilosCSS. A utilizao do atributo bgcolor s se justifica se precisarmos de manter a compatibilidadecom navegadores antigos que no suportam CSS (veremos sobre CSS no fim da apostila).


24/63

11.7.2 - O atributo background

O atributo background estabelece que o padro de fundo da pgina ser uma imagem. O valor

deste atributo indica o local onde se encontra a imagem. Se as dimenses da imagem foreminferiores s dimenses da pgina, o navegador repetir a imagem (como num cho demosaicos ou em uma parede de azulejos), de forma a ocupar todo o fundo da pgina.

O exemplo abaixo mostra bem como se faz isso:

O valor do atributo background uma URL (site) que define o local onde se encontra aimagem. Na primeira linha mais acima, demos uma URL relativa e na segunda demos uma URL

absoluta.

Nota: a forma recomendada para formatar o texto e os fundos de pgina baseia-se em estilosCSS. A utilizao deste atributo s se justifica se precisarmos de manter a compatibilidade comnavegadores antigos que no suportam CSS (veremos sobre CSS no fim da apostila).

11.8 Dicas

Sempre que utilizar uma imagem de fundo na pgina, no se esquea destes aspectos:

Certifique-se de que o tamanho da imagem (em KBytes) no muito grande, pois em casoafirmativo, o tempo para carregar a pgina aumentaria consideravelmente.

Certifique-se de que a imagem de fundo combina bem com a cor do texto.

Certifique-se de que o fundo combina bem com as outras imagens da pgina.

Verifique se a repetio da imagem de fundo em mosaico resulta em um padro perfeito.Se voc perceber algumas falhas aparentes, utilize outra imagem de fundo ou faa uma edionesta actual.

Certifique-se de que a imagem no incmoda e que no desvia a ateno do texto.

Os atributos bgcolor, background e text do elemento foram reprovados nasrecomendaes mais recentes da W3C para a linguagem HTML (HTML 4 e XHTML). A formarecomendada para obter os mesmos resultados baseia-se na utilizao de estilos CSS. Autilizao destes atributos s se justifica se precisarmos de manter a compatibilidade comnavegadores antigos que no suportam CSS.

So poucos os sites de qualidade que utilizam imagens de fundo, e aqueles que o fazem, usamfundos que no atrapalham a visualizao do site.

12 CORES


25/63

Podemos obter qualquer cor que desejarmos combinando propores correctas de trs coresbases: Vermelho (Red), Verde (Green) e Azul (Blue).

12.1 - Formas de exprimir cores

Em CSS a forma recomendada para utilizar cores usando cdigo (notaes) hexadecimal.Desta forma as cores exprimem usando trs nmeros hexadecimais que definem asquantidades de vermelho, verde e azul que entram na composio de uma determinada cor. Ovalor mais baixo de uma determinada cor 0(#00na notao hexadecimal usada em CSS) e ovalor mais alto 255(#FFem cdigo hexadecimal). Assim, a cor preta tem 0 de vermelho, 0 deverde e 0 de azul, escrevendo na forma #000000. J o branco possui 255 de vermelho, 255 deverde e 255 de azul, sendo seu cdigo #FFFFFF. O amarelo forte possui 255 de vermelho, 255de verde e 0 de azul, sendo seu cdigo #FFFF00

A tabela abaixo mostra os resultados de diversas combinaes de cores:

COR CDIGO HEXADECIMAL VALOR RGB (DECIMAL)#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)

12.2 Nomes de cores

A tabela seguinte mostra as 16 cores cujos nomes foram definidos oficialmente pelo W3C.Todos os navegadores reconhecem estes nomes pelo que podem us-los sem qualquerproblema:

Cores com Nomes Atribudos Oficialmente

Aqua(#00FFFF)

Black(#000000)

Blue(#0000FF)

Fuchsia(#FF00FF)

Green(#008000)

Gray(#808080)

Lime(#00FF00)

Maroon(#800000)

Navy(#000080)

Olive(#808000)

Purple(#800080)

Red(#FF0000)

Silver(#C0C0C0)

Teal(#008080)

White(#FFFFFF)

Yellow(#FFFF00)

Apesar de no estarem definidos oficialmente, os nomes das cores apresentados a seguir soreconhecidos por todos os navegadores relevantes, com excepo das verses mais antigas.


26/63

Nota: Estes nomes de cores no esto definidos em nenhum padro do W3C, apesar de seremreconhecidos pelos principais navegadores, esse reconhecimento no exigido a nenhumnavegador para estar conforme com as recomendaes oficiais. pouco provvel que nosanos mais prximos os navegadores para PDA e telefones mveis consigam reconhecer estesnomes de cor. Se quiser garantir a apresentao correcta das cores das suas pginas em todos

os navegadores conformes com as normas do W3C, em vez dos nomes apresentados natabela, utilize os cdigos hexadecimais apresentados junto das cores.

COR CDIGO HEXADECIMAL NOME DA COR

#F0F8FF AliceBlue

#FAEBD7 AntiqueWhite

#7FFFD4 Aquamarine

#000000 Black

#0000FF Blue

#8A2BE2 BlueViolet

#A52A2A Brown

12.3 Cores seguras da Web

Problemas causados por um nmero reduzido de cores

Todos os computadores modernos so capazes de mostrar dezenas de milhar ou milhes decores em simultneo. Contudo, at meados da dcada de 1990 muitos sistemas apenasconseguiam apresentar 256 cores diferentes de cada vez. Esta limitao obrigava osnavegadores a trabalharem com uma paleta fixa que continha apenas 256 cores.

Os navegadores eram obrigados a usar apenas 256 cores para simular todas as cores que noconseguiam apresentar. Os efeitos destas aproximaes eram visveis na forma pontosadjacentes com cores diferentes e de manchas de cor. Actualmente estas limitaes j quaseno existem.

Como acabamos de ver, na primeira metade da dcada de 1990, a maioria dos computadoreseram capazes de apresentar apenas 256 cores diferentes de cada vez. Dessas 256 cores, ossistemas operativos Windows eApple Macintosh reservavam 20 cores cada um (40 no total)para desenhar suas interfaces grficas. Assim, de um total de 256 cores possveis, apenas 216podiam ser escolhidas livremente com a garantia de poderem ser apresentadas tanto numamquina Windows como em um Mac. Estas 216 cores receberam a designao de coresseguras da Web.

A forma encontrada para limitar as consequncias resultantes da utilizao de uma paleta comapenas 216 cores consiste em usar apenas cores cujos cdigos hexadecimais usam apenascombinaes dos nmeros indicados na tabela seguinte:

RGB 00 51 102 153 204 255


27/63

Hex 00 33 66 99 CC FF

A tabela abaixo mostra todas as 216 combinaes de cores que podemos formar com osvalores apresentados na tabela anterior. Estas so, portanto, as 216 cores seguras da Web,que mostramos juntamente com seus cdigos hexadecimais (o carcter # no incio foi omitido):

000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF

006600 006633 006666 006699 0066CC 0066FF

009900 009933 009966 009999 0099CC 0099FF

00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF

00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF

330000 330033 330066 330099 3300CC 3300FF

333300 333333 333366 333399 3333CC 3333FF

336600 336633 336666 336699 3366CC 3366FF

339900 339933 339966 339999 3399CC 3399FF



660000 660033 660066 660099 6600CC 6600FF

663300 663333 663366 663399 6633CC 6633FF

666600 666633 666666 666699 6666CC 6666FF

669900 669933 669966 669999 6699CC 6699FF



990000 990033 990066 990099 9900CC 9900FF

993300 993333 993366 993399 9933CC 9933FF

996600 996633 996666 996699 9966CC 9966FF

999900 999933 999966 999999 9999CC 9999FF



CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF




CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF


28/63

CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF

FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF

FF6600 FF6633 FF6666 FF6699 FF66CC FF66FFFF9900 FF9933 FF9966 FF9999 FF99CC FF99FF

FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF

FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

Actualmente qualquer computador consegue apresentar milhes de cores diferentes aomesmo tempo, no havendo necessidade de usar apenas cores seguras da Web. Apesar disso,este tema continua a ser focado em quase todas as introdues construo de pginas.12.4 - Formas de exprimir os valores das cores

As cores definem-se usando notao hexadecimal que exprime as quantidades de Vermelho(Red), Verde (Green) e Azul (Blue) que entram em sua composio. A quantidade mnima deuma cor 0(#00em cdigo hexadecimal) e a quantidade mxima 255(#FFem cdigohexadecimal) Assim, a cor branca escreve-se na forma #FFFFFF e a cor preta na forma#000000. Uma forma mais antiga que ainda funciona a forma decimal. Na forma decimal acor branca exprime-se como rgb(255,255,255) e a cor preta exprime-se como rgb(0,0,0). Entreestes dois extremos, temos toda a gama de cores que podem ser apresentadas em ummonitor.

Nada de Vermelho

Se desligarmos completamente a cor Vermelha, ficamos com 65536 cores diferentes queresultam de combinar 256 quantidades de verde com 256 quantidades de azul (65536 = 256 256).

A tabela seguinte mostra algumas destas combinaes:

003300 006600 009900 00CC00 00FF00

003333 006633 009933 00CC33 00FF33

003366 006666 009966 00CC66 00FF66

003399 006699 009999 00CC99 00FF99

0033CC 0066CC 0099CC 00CCCC 00FFCC

0033FF 0066FF 0099FF 00CCFF 00FFFF

Vermelho ao Mximo

Se colocarmos a quantidade de Vermelho com seu valor mximo, que 255(#FFem cdigohexadecimal) ficamos ainda com 65536 (256 x 256) cores diferentes que resultam decombinarmos todos os valores possveis de Verde com todos os valores possveis de Azul.

A tabela seguinte mostra algumas destas combinaes:


29/63

FF3300 FF6600 FF9900 FFCC00 FFFF00




FF33CC FF66CC FF99CC FFCCCC FFFFCC

FF33FF FF66FF FF99FF FFCCFF FFFFFF

Tons de Vermelho

A tabela apresentada abaixo mostra o resultado obtido variando a quantidade de cor vermelhade 0 at 255 ao mesmo tempo que se mantm em zero as quantidades de verde e de azul.Existem 256 tons diferentes de vermelho puro e muitas outras que contm misturas de outras

cores.

TONS DE VERMELHO HEXADECIMAL RGB

#000000 rgb(0,0,0)

#080000 rgb(8,0,0)

#100000 rgb(16,0,0)

#180000 rgb(24,0,0)

#200000 rgb(32,0,0)

#280000 rgb(40,0,0)

#300000 rgb(48,0,0)#380000 rgb(56,0,0)

#400000 rgb(64,0,0)

#480000 rgb(72,0,0)

#500000 rgb(80,0,0)

#580000 rgb(88,0,0)

#600000 rgb(96,0,0)

#680000 rgb(104,0,0)

#700000 rgb(112,0,0)

#780000 rgb(120,0,0)

#800000 rgb(128,0,0)#880000 rgb(136,0,0)

#900000 rgb(144,0,0)

#980000 rgb(152,0,0)

#A00000 rgb(160,0,0)

#A80000 rgb(168,0,0)

#B00000 rgb(176,0,0)

#B80000 rgb(184,0,0)

#C00000 rgb(192,0,0)

#C80000 rgb(200,0,0)

#D00000 rgb(208,0,0)#D80000 rgb(216,0,0)
http://www.w3schools.com/html/html_colorsmore.asp?color=0http://www.w3schools.com/html/html_colorsmore.asp?color=0http://www.w3schools.com/html/html_colorsmore.asp?color=0http://www.w3schools.com/html/html_colorsmore.asp?color=0http://www.w3schools.com/html/html_colorsmore.asp?color=8http://www.w3schools.com/html/html_colorsmore.asp?color=8http://www.w3schools.com/html/html_colorsmore.asp?color=8http://www.w3schools.com/html/html_colorsmore.asp?color=8http://www.w3schools.com/html/html_colorsmore.asp?color=16http://www.w3schools.com/html/html_colorsmore.asp?color=16http://www.w3schools.com/html/html_colorsmore.asp?color=16http://www.w3schools.com/html/html_colorsmore.asp?color=16http://www.w3schools.com/html/html_colorsmore.asp?color=24http://www.w3schools.com/html/html_colorsmore.asp?color=24http://www.w3schools.com/html/html_colorsmore.asp?color=24http://www.w3schools.com/html/html_colorsmore.asp?color=24http://www.w3schools.com/html/html_colorsmore.asp?color=32http://www.w3schools.com/html/html_colorsmore.asp?color=32http://www.w3schools.com/html/html_colorsmore.asp?color=32http://www.w3schools.com/html/html_colorsmore.asp?color=32http://www.w3schools.com/html/html_colorsmore.asp?color=40http://www.w3schools.com/html/html_colorsmore.asp?color=40http://www.w3schools.com/html/html_colorsmore.asp?color=40http://www.w3schools.com/html/html_colorsmore.asp?color=40http://www.w3schools.com/html/html_colorsmore.asp?color=48http://www.w3schools.com/html/html_colorsmore.asp?color=48http://www.w3schools.com/html/html_colorsmore.asp?color=48http://www.w3schools.com/html/html_colorsmore.asp?color=48http://www.w3schools.com/html/html_colorsmore.asp?color=56http://www.w3schools.com/html/html_colorsmore.asp?color=56http://www.w3schools.com/html/html_colorsmore.asp?color=56http://www.w3schools.com/html/html_colorsmore.asp?color=56http://www.w3schools.com/html/html_colorsmore.asp?color=64http://www.w3schools.com/html/html_colorsmore.asp?color=64http://www.w3schools.com/html/html_colorsmore.asp?color=64http://www.w3schools.com/html/html_colorsmore.asp?color=64http://www.w3schools.com/html/html_colorsmore.asp?color=72http://www.w3schools.com/html/html_colorsmore.asp?color=72http://www.w3schools.com/html/html_colorsmore.asp?color=72http://www.w3schools.com/html/html_colorsmore.asp?color=72http://www.w3schools.com/html/html_colorsmore.asp?color=80http://www.w3schools.com/html/html_colorsmore.asp?color=80http://www.w3schools.com/html/html_colorsmore.asp?color=80http://www.w3schools.com/html/html_colorsmore.asp?color=80http://www.w3schools.com/html/html_colorsmore.asp?color=88http://www.w3schools.com/html/html_colorsmore.asp?color=88http://www.w3schools.com/html/html_colorsmore.asp?color=88http://www.w3schools.com/html/html_colorsmore.asp?color=88http://www.w3schools.com/html/html_colorsmore.asp?color=96http://www.w3schools.com/html/html_colorsmore.asp?color=96http://www.w3schools.com/html/html_colorsmore.asp?color=96http://www.w3schools.com/html/html_colorsmore.asp?color=96http://www.w3schools.com/html/html_colorsmore.asp?color=104http://www.w3schools.com/html/html_colorsmore.asp?color=104http://www.w3schools.com/html/html_colorsmore.asp?color=104http://www.w3schools.com/html/html_colorsmore.asp?color=104http://www.w3schools.com/html/html_colorsmore.asp?color=112http://www.w3schools.com/html/html_colorsmore.asp?color=112http://www.w3schools.com/html/html_colorsmore.asp?color=112http://www.w3schools.com/html/html_colorsmore.asp?color=112http://www.w3schools.com/html/html_colorsmore.asp?color=120http://www.w3schools.com/html/html_colorsmore.asp?color=120http://www.w3schools.com/html/html_colorsmore.asp?color=120http://www.w3schools.com/html/html_colorsmore.asp?color=120http://www.w3schools.com/html/html_colorsmore.asp?color=128http://www.w3schools.com/html/html_colorsmore.asp?color=128http://www.w3schools.com/html/html_colorsmore.asp?color=128http://www.w3schools.com/html/html_colorsmore.asp?color=128http://www.w3schools.com/html/html_colorsmore.asp?color=136http://www.w3schools.com/html/html_colorsmore.asp?color=136http://www.w3schools.com/html/html_colorsmore.asp?color=136http://www.w3schools.com/html/html_colorsmore.asp?color=136http://www.w3schools.com/html/html_colorsmore.asp?color=144http://www.w3schools.com/html/html_colorsmore.asp?color=144http://www.w3schools.com/html/html_colorsmore.asp?color=144http://www.w3schools.com/html/html_colorsmore.asp?color=144http://www.w3schools.com/html/html_colorsmore.asp?color=152http://www.w3schools.com/html/html_colorsmore.asp?color=152http://www.w3schools.com/html/html_colorsmore.asp?color=152http://www.w3schools.com/html/html_colorsmore.asp?color=152http://www.w3schools.com/html/html_colorsmore.asp?color=160http://www.w3schools.com/html/html_colorsmore.asp?color=160http://www.w3schools.com/html/html_colorsmore.asp?color=160http://www.w3schools.com/html/html_colorsmore.asp?color=160http://www.w3schools.com/html/html_colorsmore.asp?color=168http://www.w3schools.com/html/html_colorsmore.asp?color=168http://www.w3schools.com/html/html_colorsmore.asp?color=168http://www.w3schools.com/html/html_colorsmore.asp?color=168http://www.w3schools.com/html/html_colorsmore.asp?color=176http://www.w3schools.com/html/html_colorsmore.asp?color=176http://www.w3schools.com/html/html_colorsmore.asp?color=176http://www.w3schools.com/html/html_colorsmore.asp?color=176http://www.w3schools.com/html/html_colorsmore.asp?color=184http://www.w3schools.com/html/html_colorsmore.asp?color=184http://www.w3schools.com/html/html_colorsmore.asp?color=184http://www.w3schools.com/html/html_colorsmore.asp?color=184http://www.w3schools.com/html/html_colorsmore.asp?color=192http://www.w3schools.com/html/html_colorsmore.asp?color=192http://www.w3schools.com/html/html_colorsmore.asp?color=192http://www.w3schools.com/html/html_colorsmore.asp?color=192http://www.w3schools.com/html/html_colorsmore.asp?color=200http://www.w3schools.com/html/html_colorsmore.asp?color=200http://www.w3schools.com/html/html_colorsmore.asp?color=200http://www.w3schools.com/html/html_colorsmore.asp?color=200http://www.w3schools.com/html/html_colorsmore.asp?color=208http://www.w3schools.com/html/html_colorsmore.asp?color=208http://www.w3schools.com/html/html_colorsmore.asp?color=208http://www.w3schools.com/html/html_colorsmore.asp?color=208http://www.w3schools.com/html/html_colorsmore.asp?color=216http://www.w3schools.com/html/html_colorsmore.asp?color=216http://www.w3schools.com/html/html_colorsmore.asp?color=216http://www.w3schools.com/html/html_colorsmore.asp?color=216http://www.w3schools.com/html/html_colorsmore.asp?color=216http://www.w3schools.com/html/html_colorsmore.asp?color=216http://www.w3schools.com/html/html_colorsmore.asp?color=208http://www.w3schools.com/html/html_colorsmore.asp?color=208http://www.w3schools.com/html/html_colorsmore.asp?color=200http://www.w3schools.com/html/html_colorsmore.asp?color=200http://www.w3schools.com/html/html_colorsmore.asp?color=192http://www.w3schools.com/html/html_colorsmore.asp?color=192http://www.w3schools.com/html/html_colorsmore.asp?color=184http://www.w3schools.com/html/html_colorsmore.asp?color=184http://www.w3schools.com/html/html_colorsmore.asp?color=176http://www.w3schools.com/html/html_colorsmore.asp?color=176http://www.w3schools.com/html/html_colorsmore.asp?color=168http://www.w3schools.com/html/html_colorsmore.asp?color=168http://www.w3schools.com/html/html_colorsmore.asp?color=160http://www.w3schools.com/html/html_colorsmore.asp?color=160http://www.w3schools.com/html/html_colorsmore.asp?color=152http://www.w3schools.com/html/html_colorsmore.asp?color=152http://www.w3schools.com/html/html_colorsmore.asp?color=144http://www.w3schools.com/html/html_colorsmore.asp?color=144http://www.w3schools.com/html/html_colorsmore.asp?color=136http://www.w3schools.com/html/html_colorsmore.asp?color=136http://www.w3schools.com/html/html_colorsmore.asp?color=128http://www.w3schools.com/html/html_colorsmore.asp?color=128http://www.w3schools.com/html/html_colorsmore.asp?color=120http://www.w3schools.com/html/html_colorsmore.asp?color=120http://www.w3schools.com/html/html_colorsmore.asp?color=112http://www.w3schools.com/html/html_colorsmore.asp?color=112http://www.w3schools.com/html/html_colorsmore.asp?color=104http://www.w3schools.com/html/html_colorsmore.asp?color=104http://www.w3schools.com/html/html_colorsmore.asp?color=96http://www.w3schools.com/html/html_colorsmore.asp?color=96http://www.w3schools.com/html/html_colorsmore.asp?color=88http://www.w3schools.com/html/html_colorsmore.asp?color=88http://www.w3schools.com/html/html_colorsmore.asp?color=80http://www.w3schools.com/html/html_colorsmore.asp?color=80http://www.w3schools.com/html/html_colorsmore.asp?color=72http://www.w3schools.com/html/html_colorsmore.asp?color=72http://www.w3schools.com/html/html_colorsmore.asp?color=64http://www.w3schools.com/html/html_colorsmore.asp?color=64http://www.w3schools.com/html/html_colorsmore.asp?color=56http://www.w3schools.com/html/html_colorsmore.asp?color=56http://www.w3schools.com/html/html_colorsmore.asp?color=48http://www.w3schools.com/html/html_colorsmore.asp?color=48http://www.w3schools.com/html/html_colorsmore.asp?color=40http://www.w3schools.com/html/html_colorsmore.asp?color=40http://www.w3schools.com/html/html_colorsmore.asp?color=32http://www.w3schools.com/html/html_colorsmore.asp?color=32http://www.w3schools.com/html/html_colorsmore.asp?color=24http://www.w3schools.com/html/html_colorsmore.asp?color=24http://www.w3schools.com/html/html_colorsmore.asp?color=16http://www.w3schools.com/html/html_colorsmore.asp?color=16http://www.w3schools.com/html/html_colorsmore.asp?color=8http://www.w3schools.com/html/html_colorsmore.asp?color=8http://www.w3schools.com/html/html_colorsmore.asp?color=0http://www.w3schools.com/html/html_colorsmore.asp?color=0


30/63

#E00000 rgb(224,0,0)

#E80000 rgb(232,0,0)

#F00000 rgb(240,0,0)

#F80000 rgb(248,0,0)

#FF0000 rgb(255,0,0)

Tons de Cinza

As cores cinzas obtm-se combinando quantidades iguais de vermelho, verde e azul. A corbranca corresponde ao cinza mais claro de todos e obtm-se juntando 255 de vermelho, 255de verde e 255 de azul (#FFFFFFem hexadecimal). O preto o cinza mais escuro de todos eobtm-se colocando todas as cores em 0 (#000000em hexadecimal). Entre estes dois valoresextremos, temos 254 graus de intensidade possveis.

A tabela seguinte d uma ideia dos tons de cinza que podemos obter:

RGB(0,0,0) #000000

RGB(8,8,8) #080808

RGB(16,16,16) #101010

RGB(24,24,24) #181818

RGB(32,32,32) #202020

RGB(40,40,40) #282828

RGB(48,48,48) #303030

RGB(56,56,56) #383838

RGB(64,64,64) #404040

RGB(72,72,72) #484848

RGB(80,80,80) #505050

RGB(88,88,88) #585858

RGB(96,96,96) #606060

RGB(104,104,104) #686868

RGB(112,112,112) #707070

RGB(120,120,120) #787878

RGB(128,128,128) #808080

RGB(136,136,136) #888888

RGB(144,144,144) #909090

RGB(152,152,152) #989898

RGB(160,160,160) #A0A0A0

RGB(168,168,168) #A8A8A8

RGB(176,176,176) #B0B0B0

RGB(184,184,184) #B8B8B8

RGB(192,192,192) #C0C0C0

RGB(200,200,200) #C8C8C8

RGB(208,208,208) #D0D0D0

RGB(216,216,216) #D8D8D8

RGB(224,224,224) #E0E0E0

RGB(232,232,232) #E8E8E8

RGB(240,240,240) #F0F0F0
http://www.w3schools.com/html/html_colorsmore.asp?color=224http://www.w3schools.com/html/html_colorsmore.asp?color=224http://www.w3schools.com/html/html_colorsmore.asp?color=224http://www.w3schools.com/html/html_colorsmore.asp?color=224http://www.w3schools.com/html/html_colorsmore.asp?color=232http://www.w3schools.com/html/html_colorsmore.asp?color=232http://www.w3schools.com/html/html_colorsmore.asp?color=232http://www.w3schools.com/html/html_colorsmore.asp?color=232http://www.w3schools.com/html/html_colorsmore.asp?color=240http://www.w3schools.com/html/html_colorsmore.asp?color=240http://www.w3schools.com/html/html_colorsmore.asp?color=240http://www.w3schools.com/html/html_colorsmore.asp?color=240http://www.w3schools.com/html/html_colorsmore.asp?color=248http://www.w3schools.com/html/html_colorsmore.asp?color=248http://www.w3schools.com/html/html_colorsmore.asp?color=248http://www.w3schools.com/html/html_colorsmore.asp?color=248http://www.w3schools.com/html/html_colorsmore.asp?color=255http://www.w3schools.com/html/html_colorsmore.asp?color=255http://www.w3schools.com/html/html_colorsmore.asp?color=255http://www.w3schools.com/html/html_colorsmore.asp?color=255http://www.w3schools.com/html/html_colorsmore.asp?color=255http://www.w3schools.com/html/html_colorsmore.asp?color=255http://www.w3schools.com/html/html_colorsmore.asp?color=248http://www.w3schools.com/html/html_colorsmore.asp?color=248http://www.w3schools.com/html/html_colorsmore.asp?color=240http://www.w3schools.com/html/html_colorsmore.asp?color=240http://www.w3schools.com/html/html_colorsmore.asp?color=232http://www.w3schools.com/html/html_colorsmore.asp?color=232http://www.w3schools.com/html/html_colorsmore.asp?color=224http://www.w3schools.com/html/html_colorsmore.asp?color=224


31/63

RGB(248,248,248) #F8F8F8

RGB(255,255,255) #FFFFFF

12.5 - Mais de 16 milhes de cores diferentes

Combinando as 256 cores de Vermelho com as 256 cores de Verde e as 256 cores do Azul,conseguimos criar mais de 16 milhes de cores diferentes (256256256).

Praticamente todos os monitores dos computadores modernos esto preparados paraapresentar mais de 16 milhes de cores diferentes. No entanto, preciso ter em mente que osnovos sistemas mveis (celulares, PDA, etc.), geralmente possuem paletas mais reduzidas.Alguns mostram apenas 256 cores, outros 4096 ou 65536.

12.6 - Mais nomes de cores

As cores mostradas no site abaixo possuem diversos cdigos hexadecimais relacionados acores, todos esto definidos nos padres do W3C.

http://www.criarweb.com/artigos/exemplos/tallerjs/tabelacores.html

13. ENTIDADES, ACENTUAO E CARACTERES ESPECIAIS

Alguns caracteres em HTML so chamados de caracteres reservados ou marcadores, queseriam os (maior que), que quando aparecem num documento HTML so

interpretados pelo navegador como delimitadores de instruo. Mas e se eu quisersimplesmente que esses caracteres faam parte do meu texto e no sejam interpretados comomarcadores?!

No HTML, todos os caracteres tm um nome especial, ou cdigo. Para acessar um carcter,voc precisa usar a seguinte conveno:

&nome-especial;

onde o nome-especial o nome ou um nmero associado ao smbolo grfico que voc desejamostrar no seu documento. Isso define algo que podemos chamar de sequncia reservada,

que um grupo de caracteres que quando interpretado pelo navegador produzir umcarcter, que inclusive pode ser um carcter reservado. No HTML, os nomes especiais sochamados de entidades.

Na prxima tabela mostramos alguns nomes especiais de caracteres e suas respectivassequncias reservadas para acede-los:

CARACTERES NOME ESPECIAL SEQUNCIA RESERVADA

aacute

Aacute

eacute

atilde
http://www.criarweb.com/artigos/exemplos/tallerjs/tabelacores.htmlhttp://www.criarweb.com/artigos/exemplos/tallerjs/tabelacores.htmlhttp://www.criarweb.com/artigos/exemplos/tallerjs/tabelacores.html


32/63

ocirc

& amp &

< lt gt >

cent

pound

yen

section

copyright

registered trademark

multiplication

division

Veja a lista completa de entidades HTML no link abaixo:

http://www.w3.org/TR/REC-html40/sgml/entities.html

14. TABELAS

Tabelas auxiliam na visualizao de dados ou na diviso de sua pgina em sectores. Entendapor uma tabela HTML como sendo semelhante a uma tabela que voc desenharia numa folhade papel ou num outro programa de computador. O elemento principal de uma tabela otable e aqui segue um exemplo simples de tabela:

PrimeiraSegunda

TerceiraQuarta

Cujo resultado :

Primeira SegundaTerceira Quarta

Em HTML, as tabelas so divididas em linhas e clulas. Na tabela acima, a primeira linhacontm as clulas Primeira e Segunda, enquanto que a segunda linha contm as clulasTerceira e Quarta.

Dentro de um bloco table, os principais elementos que voc utilizar so o tr, ou table row(linha), e o td, ou table data (clula). Dessa forma, podemos definir as linhas e as clulas databela. obrigatrio que um bloco td esteja definido dentro de um bloco tr, ou seja, que asclulas estejam dentro de linhas.
http://www.w3.org/TR/REC-html40/sgml/entities.htmlhttp://www.w3.org/TR/REC-html40/sgml/entities.htmlhttp://www.w3.org/TR/REC-html40/sgml/entities.html


33/63

No exemplo anterior, criamos uma linha com tr e em seguida, dentro de um bloco td,escrevemos o texto da clula (Primeira). Abrimos outro bloco td nesse mesmo bloco tr, ondecolocamos o texto da segunda clula (Segunda). Depois, fechamos a linha com o para emseguida abrir uma nova linha, onde criamos as clulas contendo os textos Terceira e Quarta.

O atributo border no elemento table serve para dar borda tabela. Sem o ele no ficariamuito distinto onde comea e termina cada uma das clulas:

PrimeiraSegunda

TerceiraQuarta

Primeira Segunda

Terceira Quarta

Dentro de um bloco td possvel colocar cdigos HTML e inclusive criar at tabelas dentro declulas! Veja s:

PrimeiraSegunda

Terceira

QuartaQuinta

Primeira Segunda

Terceira Quarta Quinta

O cdigo fica complicado o tanto quanto se queira.

Agora que voc captou a essncia das tabelas, vamos mostrar dois trs atributos que podemser utilizados em tabelas.


34/63

14.1 - Espaamento entre clulas

Para controlarmos a distncia entre duas clulas, utilizamos o atributo cellspacing, cujoargumento dado em pixis:

PrimeiraSegunda

TerceiraQuarta

Primeira Segunda

Terceira Quarta

Para controlar o espaamento vertical, utilizamos o cellpadding:

PrimeiraSegunda

TerceiraQuarta

Primeira Segunda

Terceira Quarta


35/63

14.2 - Preenchimento de clulas

Pode ser que voc queira uma tabela onde a primeira linha tenha duas clulas, a segunda comapenas uma clula e a terceira com trs clulas. Faremos o seguinte:

PrimeiraSegunda

Terceira

Quarta

QuintaSexta

Primeira Segunda

Terceira

Quarta Quinta Sexta

Percebeu como a tabela ficou cheia de buracos?! Para que as clulas preencham os buracos,

utilizaremos o atributo colspan:

PrimeiraSegunda

Terceira

QuartaQuintaSexta

Primeira Segunda

Terceira

Quarta Quinta Sexta


36/63

Da mesma forma, se quisermos uma coluna com apenas uma clula e outra com duas,poderamos usar o atributo rowspan. Veja a diferena entre usarmos e no usarmos orowspan:

PrimeiraSegunda

Terceira

Primeira Segunda

Terceira

PrimeiraSegunda

Terceira

PrimeiraSegunda

Terceira

14.3 - Largura de clulas e tabelas

Para escolher a largura de tabelas e clulas, utiliza-se o j conhecido atributo width, cujoargumento idntico para o caso de imagens:

PrimeiraSegunda

TerceiraQuarta

Primeira Segunda

Terceira Quarta


37/63

Note que quando o width utilizado com o elemento table, a largura refere-se largura dapgina, enquanto que quando usado dentro de um td a largura referente ao tamanho databela. Isso tudo desde que o argumento seja dado em percentagem e no em pixis.

14.4 - Uso de tabelas

Aqui exploramos poucas possibilidades das tabelas HTML. Voc pode utiliz-las para construiruma simples caixa para exibio de informaes como fazer uma pgina inteira utilizandotabelas. Existem muitos outros elementos e atributos para ajud-lo nessa tarefa. Consulte asreferncias para mais informaes sobre tabelas.

14.5 - Dicas

Os elementos , e ainda so pouco usados devido ao suporte

deficiente oferecido pelos navegadores antigos. Os navegadores modernos j suportam bemestes elementos.

14.6 Elementos relativos a tabela

ELEMENTO DESCRIO

Define uma tabela

Define um cabealho para uma tabela

Insere uma nova linha numa tabela

Insere uma clula numa tabela

Define uma legenda para uma tabela

Agrupa colunas numa tabela

Define os valores dos atributos para uma ou mais colunas da tabela

Define um cabealho de uma tabela

Define um corpo numa tabela

Define o rodap de uma tabela

15. FORMULRIOS

Os formulrios servem para recolher dados introduzidos pelos visitantes e envi-las para voc,

atravs de seu servidor.

15.1 Criar Formulrios

Um formulrio uma seco da pgina HTML que contm elementos que permitem aovisitante inserirem dados (elementos e vrios tipos de elementos , e ). Estes elementos permitem inserir dados numricos, textos pequenos, textoslongos, seleccionar elementos em uma lista com vrias escolhas, responder facilmente comrespostas do tipo "sim"ou "no", seleccionar rapidamente uma opo em um pequeno grupo,etc.


38/63

Os formulrios so criados com o elemento . Dentro desse elemento principalcolocamos diversos elementos para a insero dos dados.

..

.

O elemento por si s no faz com que o navegador desenhe nada na pgina nempermite inserir dados. Ele contm elementos que recolhem os dados e possui atributos quedizem ao navegador como e para onde devem ser enviados os dados inseridos pelo visitante.

15.2 - input

O elemento que encontramos com maior frequncia em formulrios o elemento . Oexemplo abaixo mostra um formulrio simples com dois elementos input:

Primeiro nome:
ltimo nome:

O formulrio acima ficar sendo exibido desta forma em seu navegador:

Primeiro nome:

ltimo nome:

O elemento pode assumir diversas formas com finalidades diferentes.

15.3 - "Radio Buttons"

Os "Radio Buttons" so utilizados para se criar um grupo pequeno de opes em que apenaspodemos seleccionar uma de cada vez.

Masculino
Feminino

O exemplo acima ficar sendo exibido desta maneira em seu browser:


39/63

Masculino

Feminino

Repare que s podemos seleccionar uma das opes acima.

15.4 Checkboxes

As caixas de validao ("checkboxes") devem ser usadas sempre que queremos que o visitanteaceite (ou no) os itens dentro de um pequeno grupo. permitido validar mais de uma oposimultaneamente.

Eu tenho um carro

Eu tenho uma prancha de surf

O exemplo acima ficar sendo exibido desta forma em seu browser:

Eu tenho um carro

Eu tenho uma prancha de surf

Repare que podemos seleccionar vrias opes ao mesmo tempo.

15.5 - O atributo action e o boto de submisso

Quando o visitante clica sobre o boto "Submeter"(ou "Submit"), as opes marcadas e otexto que foram inseridos no formulrio so enviados para voc (ou para seu servidor). Oatributo action do elemento contm o endereo (URL) do recurso da Web (site,download, email, etc.) que est encarregado de realizar este processamento. para l que ocontedo do formulrio ser enviado.

Nome de usurio:

O exemplo acima ficar sendo exibido da seguinte forma em seu navegador:

Nome de usurio:Submeter

15.6 - Elementos para Formulrios


40/63

ELEMENTO DESCRIO

Define um formulrio para recolher dados inseridos pelo utilizador

Insere um campo para introduzir dados

Define uma rea de texto (permite inserir texto com vrias linhas e umnmero ilimitado de caracteres)

Define um nome para um elemento

Agrupa elementos num formulrio

Define uma legenda para um grupo de elementos do formulrio

Define uma lista com vrias opes seleccionveis

Define um grupo de opes

Insere mais uma opo em uma lista com vrias opes seleccionveis

Define um boto que pode ser pressionado

Desuso. Utilize com o atributo type="button"

16. FRAMES HTML

As molduras ("frames") so subjanelas definidas sobre a janela principal do browser. Estassubjanelas so criadas dividindo a janela em vrias partes. Cada uma dessas partes podeapresentar uma pgina da Web diferente. As subjanelas so habitualmente designadas pormolduras, ou "frames".

16.1 - Vantagens e desvantagens das molduras

As molduras ("frames") nos permitem apresentar mais do que uma pgina HTML numa nicajanela do browser. Cada pgina est dentro da sua prpria moldura (subjanela) e independente das restantes pginas. Apesar de oferecerem alguma liberdade ao facilitarembastante a criao de barras de navegao em conjuntos de documentos com muitas pginas ede tornarem bastante mais rpido o carregamento das pginas, as molduras tambm podemdar origem a algumas dificuldades, tais como:

O criador de pginas v-se obrigado a lidar com um nmero maior de pginas aomesmo tempo.

A impresso do contedo do navegador fica mais difcil. Algumas vezes ser necessrio a utilizao de um nico elemento , para que ele

realize a ligao de duas ou mais pginas, o que obriga a utilizar JavaScript.

16.2 - O Elemento frameset

O elemento define a forma como a janela do browser se subdivide paraacomodar as molduras.

Este elemento divide a janela do browser em linhas e colunas. Os valores atribudos s linhas e s colunas indicam a quantidade de rea de cran que

cada linha e cada coluna devem ocupar.


41/63

16.3 O Elemento frame

O elemento define qual o documento HTML a colocar numa determinada moldura.

No exemplo apresentado abaixo, temos um conjunto de molduras com duas colunas. Aprimeira coluna ocupa 25% da largura da janela do navegador, enquanto a segunda colunaocupa 75% da largura. O documento moldura_a.html ocupa a primeira coluna e o documentomoldura_b.html ocupa a segunda coluna:

16.4

Dicas

Quando uma moldura possui linhas de contorno visveis, voc pode alterar suas dimensesarrastando as linhas de limite com o mouse. Para impedir que isso acontea, utilize o atributonoresize="noresize" dentro da tag

Utilize a tag para que os navegadores que no suportam frames possam mostrarum aviso na janela de quem est acessando o site.

Pgina 1
Pgina 2
Pgina 3

Ao clicar num link dentro da moldura de navegao a nova pgina abre-se na segunda moldura( direita), que tem por nome "principal.

16.5 Elementos para Frames

ELEMENTO DESCRIO

Define um conjunto de molduras

Define o contedo de uma subjanela (moldura, ou "frame")

Define uma seco "noframes" para ser usada pelos browsers que nosuportam molduras

Define uma subjanela (moldura) interior ("inline frame")

17. INSERO DE SCRIPTS

A insero de scripts em suas pginas escritas em HTML podem fazer com que elas sejamcapazes de reagir de forma dinmica e interagir com seus visitantes.

17.1 - Inserir um script numa pgina HTML

A insero de um script em HTML faz-se atravs do elemento


42/63

document.write("Ol Mundo!");

O script acima far o seguinte resultado:

Ol Mundo!

17.1.1 - Um exemplo prtico

17.2 - Como lidar com os browsers antigos

Um navegador que no reconhece o elemento muito antigo e a sua utilidade naWeb actual muito reduzida. Estes browsers, ao encontrarem um elemento (cujosignificado desconhecem), limitam-se a apresentar o texto que est dentro do elemento comose tratasse de contedo normal. Para impedir que isso acontea, deve-se colocar o contedodo elemento dentro de um comentrio. Deste modo, os navegadores que nosuportam scripts ignoram-nos, mas os outros navegadores reconhecem os scripts e executam-nos (apesar dos comentrios). Mesmo com browsers modernos, a utilizao de comentriosnos scripts uma prtica recomendvel porque evita muitos problemas que surgem quandoutilizamos scripts na linguagem XHTML.

17.2.1 - O Elemento

Alm de escondermos o cdigo dentro de um comentrio, uma outra forma de ajudar osbrowsers muito antigos seria utilizar o elemento para oferecer contedosalternativos.

O elemento usado para compensar de alguma forma a falta de execuo de umscript. O contedo deste elemento ser apresentado pelos browsers que no reconhecemscripts, mas ser ignorado pelos browsers mais modernos e no interfere na apresentao dapgina.


43/63

17.2.2 - Um exemplo

O seu browser no suportaJavaScript!

17.3 - Elementos para inserir scripts e cdigo

Elemento Descrio

Define um bloco que contm um script

Define texto alternativo para ser apresentado sempre que o script no executado

Insere um objeto na pgina

Define parmetros para controlar o objeto

Desuso. Use

18. OUTRAS POSSIBILIDADES

O princpio de funcionamento do HTML j deve estar slido em sua mente, se que voc leutudo o que antecede esta seco. Para que este texto no se torne enfadonho, passaremospara a Especificao HTM, desenvolvida pelo consrcio da web, a tarefa de detalhar cada umdos tpicos listados a seguir.

Especificao HTML (em ingls)http://www.w3.org/TR/html4Especificao HTML (em espanhol)http://html.conclase.net/w3c/html401-es/cover.html

Consrcio da webdocs.indymedia.org/view/Sysadmin/GuiaHtml#O_cons_rcio_da_Web

Texto estruturado: blocos que permitem estruturar lgica e visualmente seu textohttp://www.w3.org/TR/html4/struct/text.html

Listas: blocos para a criao de listagenshttp://www.w3.org/TR/html4/struct/lists.html

Frames: permite que a pgina exibida no navegador seja formada por mais de umarquivo html (no recomendado, veja emAcessibilidade)

http://www.w3.org/TR/html4/present/frames.html

Formulrios: possibilita a interaco do seu html com aplicaes web.
http://www.w3.org/TR/html4http://www.w3.org/TR/html4http://www.w3.org/TR/html4http://html.conclase.net/w3c/html401-es/cover.htmlhttp://html.conclase.net/w3c/html401-es/cover.htmlhttp://html.conclase.net/w3c/html401-es/cover.htmlhttp://www.linhadecodigo.com.br/docs.indymedia.org/view/Sysadmin/GuiaHtml#O_cons_rcio_da_Webhttp://www.linhadecodigo.com.br/docs.indymedia.org/view/Sysadmin/GuiaHtml#O_cons_rcio_da_Webhttp://www.linhadecodigo.com.br/docs.indymedia.org/view/Sysadmin/GuiaHtml#O_cons_rcio_da_Webhttp://www.w3.org/TR/html4/struct/text.htmlhttp://www.w3.org/TR/html4/struct/text.htmlhttp://www.w3.org/TR/html4/struct/lists.htmlhttp://www.w3.org/TR/html4/struct/lists.htmlhttp://www.w3.org/TR/html4/present/frames.htmlhttp://www.w3.org/TR/html4/present/frames.htmlhttp://www.w3.org/TR/html4/present/frames.htmlhttp://www.w3.org/TR/html4/struct/lists.htmlhttp://www.w3.org/TR/html4/struct/text.htmlhttp://www.linhadecodigo.com.br/docs.indymedia.org/view/Sysadmin/GuiaHtml#O_cons_rcio_da_Webhttp://html.conclase.net/w3c/html401-es/cover.htmlhttp://www.w3.org/TR/html4


44/63

http://www.w3.org/TR/html4/interact/forms.html

Scripting: permite a automatizao de certas seces do seu documento.http://www.w3.org/TR/html4/interact/scripts.html

Meta-informaes: fornecem dados a respeito do prprio documento, como data,conjunto de caracteres usado, data de validade, etc.

http://www.w3.org/TR/html4/struct/global.html#h-7.4.4

Essas funcionalidades permitiro que voc faa documentos HTML bem completos.Prosseguiremos agora a parte final desta apostila, onde sero abordados alguns temas bemfixes ;-)

19. COLOCANDO SEU SITE NO AR

At agora somente voc conseguiu visualizar suas pginas. Chegou a hora de mostr-las para omundo todo.

Para publicar seu trabalho na Internet, voc precisa somente de espao em um servidor e umprograma FTP gratuito.

Se voc costuma acessar a Internet j deve ter visto que existem vrios servios gratuitos dehospedagem de sites. Seu endereo no servidor ser alguma coisa parecida comhttp://home.servidor.com/~nomedousuario. Voc tem que activar o servio. Informe-se comofazer isto na documentao fornecida pelo servio de hospedagem.

Outra opo obter um espao gratuito de um servidor na Internet. Isto igual a registar umaconta de e-mail (como por exemplo, obter um endereo de e-mail do Hotmail) voc poderegistar-se gratuitamente para obter um espao em um servidor na Internet. Existem vriascompanhias que oferecem este servio gratuito - entre elas a Angelfire (clique em "Sign Up" eescolha membro gratuito - ou veja mais abaixo uma lista com srvios gratuitos dehospedagem) - isto um processo bem rpido.Angelfirehttp://angelfire.lycos.com

Para acessar o servidor voc precisa conhecer o "Nome do seu servidor" (por exemplo,ftp.angelfire.com) e ter um nome de usurio e senha.

19.1 Isto tudo que eu preciso?!

Para acessar o servidor e publicar as pginas voc precisa de um programa FTP. Voc no deveter um programa destes ainda, mas existem vrios deles na Internet para download e sogratuitos.

Existem muitos programas FTP. Um dos melhores o FileZilla, e gratuito . Voc pode obter oFileZilla emhttp://filezilla.sourceforge.net

19.2 - Como eu fao envio os arquivos do meu site?!
http://www.w3.org/TR/html4/interact/forms.htmlhttp://www.w3.org/TR/html4/interact/forms.htmlhttp://www.w3.org/TR/html4/interact/scripts.htmlhttp://www.w3.org/TR/html4/interact/scripts.htmlhttp://www.w3.org/TR/html4/struct/global.html#h-7.4.4http://www.w3.org/TR/html4/struct/global.html#h-7.4.4http://angelfire.lycos.com/http://angelfire.lycos.com/http://angelfire.lycos.com/http://filezilla.sourceforge.net/http://filezilla.sourceforge.net/http://filezilla.sourceforge.net/http://filezilla.sourceforge.net/http://angelfire.lycos.com/http://www.w3.org/TR/html4/struct/global.html#h-7.4.4http://www.w3.org/TR/html4/interact/scripts.htmlhttp://www.w3.org/TR/html4/interact/forms.html


45/63

Abaixo fornecemos um exemplo de como fazer isto usando o servidor Angelfire e o programaFileZilla. Este procedimento mais ou menos igual para qualquer programa FTP.

Conecte-se Internet e abra o programa FTP. Insira "Host Name" ("ftp.angelfire.com" no"Address"), nome do usurio(em "User") e senha(em "Password") clique "Connect". Voc

agora tem acesso ao servidor. Em um lado da janela do programa voc ver os directrios earquivos do seu computador ("Local Site"), e no outro o do servidor ("Remote Site"):

Ache os seus documentos HTML e imagens a serem publicadas (no "Local site") e transfira parao servidor ("Remote site") simplesmente dando um clique duplo nos arquivos. Agora o mundotodo poder ver seu site.

D a uma das pginas o nome de "index.htm" (ou "index.html") e ela ser automaticamente apgina de entrada no site, ou seja, basta digitar http://www.angelfire.com/folk/htmlnet (semqualquer nome de arquivo) e abrir http://www.angelfire.com/folk/htmlnet/index.htm

Para mais adiante ser uma boa ideia comprar um domnio (espao no servidor) s para voc(www.seu-nome.com) e assim ter um nome do site bem mais curto e fcil de guardar queaqueles fornecidos por um servio gratuito da Internet. Voc pode encontrar na Internet vriasfirmas que vendem domnio. Faa uma busca do Google.

LISTA DE SITES COM INFORMAES SOBRE HOSPEDAGEM GRATUITALink 01http://neosite.ilogic.com.br/artigos/hospedagemgratis.htm

Link 02http://criandosite.virgula.com.br/

20. HTML AVANADO

Esta parte assume que voc j treinou HTML o suficiente para estar familiarizado com alinguagem e fazer sites na internet. Daqui em diante, este artigo apenas far um tourporoutras linguagens e tecnologias que podem

Curso prático do HTML

Documents

Transcript of Curso prático do HTML