Você está na página 1de 7

HTML Faa j sua home page!!!

HTML Bsico
Para voc que est iniciando a programar em HTML desejo boa sorte, e vai uma sugesto, se no entender alguma tag (comando), no desista esperimente em algum documento HTML e talve! vendo como ela "unciona ira entende l mais "acilmente# $ recomendado que principiantes usem o bloco de notas do %indo&s '( para elaborarem suas primeiras pginas (depois de uma ol)ada no editor HTML para iniciantes que se encontra na se*o +a*a sua HP), deve se salvar esses arquivos com e,tenso #)tm ou #)tml (escol)a um padro, pre"iro )tml) e depois voc pode visuali!ar suas pginas usando seu bros&er, sendo ele o -etscape ou o .nternet /,plorer# 0ma pgina )tml bsica tem a "ormula parecida com a seguinte1
2HTML3 2H/453 2T.TL/3T6tulo da pgina27title3 27H/453 2895: 8;<9L9=>?cor@de@"undo? T/AT>?cor@dos@te,tos? L.-B>?cor@dos@linCs? DL.-B>?cor@dos@linCs@j@visitados? 84<B;=90-5>?arquivo@de@"undo?3 27895:3 <onteEdo da pgina###### 27HTML3

Elementos <title> e <body>


2title3 Ferve para colocar um titulo na pgina, que ir aparecer na parte mais acima do navegador# 4o cabar de colocar o t6tulo coloque1 27title3 /,emplo1
2title3%ild%eb27title3

2bodG3 Ferve para con"igurar algumas coisas da pgina, como cor de "undo(bgcolor>cor),"igura de "undo(bacCground>imagem),cor do te,to(te,t>cor),cor dos linCs(linC>cor), cor dos linCs j vistos(vlinC>cor)e cor dos linCs abertos naquele momento(alinC>cor)# /,emplo1
2bodG bacCground>?bacC#jpg? bgcolor>?&)ite? te,t>?HIJIJIJ? linC>?blue? vlinC>?red?327bodG3

t!ibutos pa!a te"tos


/m HTML praticamente tudo "unciona com comandos, se voc quiser "a!er um paragra"o ou uma quebra de lin)a no poder simplesmente apertar /-T/= e escrever na lin)a abai,o como em editores de te,to, ter que usar os comandos de paragra"o e de quebra de lin)as que so seguidamentes 2p3 e 2br3 /,emplo de te,to com Paragra"os e quebra de lin)as1 2p39lK 2br39iK 2p3Tc)au Lue "icaria1
9lK 9iK Tc)au

Existem outros atributos para textos, conhea alguns deles abaixo:

2center3Te,to27center3

Te,to centrali!ado

Te,to em #eg!ito Te,to Fublin)ado 2i3Te,to27i3 Te,to em Italico 2)H3Te,to27)H3 Te,to com o nivel H 2pre3Te,to27pre3 Te,to pre"ormatado 2blocCquote3Te,to27blocCquote3 8loco de notas 2address3Te,to27address3 /ndere*os 2code3Te,to27code3 <arecteres de taman)os "i,os
2b3Te,to27b3 2u3Te,to27u3

Fontes
0sando "ontes voc poder mudar as cores de um te,to, aumentar ou diminuar seu taman)o e mudar o estilo da "onte# 9 comando M o seguinte1 Mudar a cor de um te,to Mudar o taman)o para H 2+ont "ace>?estilo?3Te,to27"ont3 Mudar o estilo da "onte
2+ont color>?cor@do@te,to?3Te,to27"ont3 2+ont si!e>H3Te,to27"ont3

Ba!!as
Fe voc quiser adicionar uma barra a sua pgina, use o comando1 (9nde H M a largura) /,#1 2)r si!e>N3 Lue "icaria assim1
2)r si!e>H3

Lin$s
LinCs so cone,Oes para outros endere*os usados geralmente para acessar outras pginas ou pegar algum arquivo 4 "ormula para inserir um linC M a seguinte1
2a )re">?arquivo#e,ten*o?3Te,to LinC27a3

-o caso de "rames ou se voc quiser que o endere*o apare*a em outra janela voc pode selecionar o alvo com o seguinte comando1
2a )re">?arquivo#e,ten*o? target>?alvo?3Te,to LinC27a3

0m e,emplo, para criar um linC para a .nter%eb adicione1 2 a


)re">?)ttp177&&&#inter&eb#com#br?3.nter%eb27a3

nc%!as
Para criar um linC que acesse determinada parte de uma pgina voc deve usar ancPras# Para criar uma ancPra "a*a o seguinte1 -a pgina que ter a ancPra adicione1
2a name>nome@da@ancPra3Parte27a3

/ no linC use a seguinte "ormula1


2a )re">?pagina#e,tHnome@da@ancora?3Te,to LinC27a3

&magens

4dicionar imagens em uma pgina M uma coisa que no pode "altar na )ora de tornar a pgina bonita# 9 comando para adicionar imagens M1
2img src>?imagem#e,t?3

-o caso se quiser "a!er uma imagem que seja um linC, em ve! de colocar o te,to linC adicione o comando citado# Lembre se de botar apQs o src>?imagem#e,t? a lin)a1 border>J se voc no quiser que a imagem ten)a borda Para selecionar o alin)amento de uma imagem use1 2img src>?imagem#e,t? align>?alin)amento?3 (Lembre se de colocar os alin)amentos em ingls como1 Le"t, =ig)t etc)

Listas -o numeradas
.nicie uma lista no numerada com a etiqueta1 2ul3 4dicione um item a lista com a estiqueta1 2li3.tem =epita a etiqueta para adicionar items quantas ve!es quiser e depois "inali!e a lista com a etiqueta1 27ul3

-umeradas
2ul3 e 27ul3

Fe voc quiser "a!er uma lista numerada, simplesmente substitua os comandos por 2ol3 e 27ol3 seguidamente da lista no numerada

5escritivas
0ma lista de descricao usualmente consiste em alternar um descricao do titulo (abreviado como dt) e 0m descricao descricao (abreviado como dd)# 4 descricao geralmente inicia em uma nova lin)a, porque o vie&er dei,a toda lin)a para o conteudo da descricao do titulo dt Fegue um e,emplo de linguagem HTML, de listas descritivas1
25L3 25T3 -ational <enter "or Fupercomputing 4pplications 2553 Fe locali!a no campus da 0niversidade de .llinois, em 0rbana <)ampaign# -<F4 eR uma das quatro instituicoes membro, no -acional Metacenter "or <omputational Fcience and /ngineering# 25T3 <ornell T)eorG <enter 2553 9 <T< se locali!a no campus da <ornell 0niversitG, in .t)aca, -e& :orC# <T< eR outra instituicao membro do -acional Metacenter "or <omputational Fcience and /ngineering# 275L3

9 resultado se parece com1

-ational <enter "or Fupercomputing 4pplications Fe locali!a no campus da 0niversidade de .llinois, em 0rbana <)ampaign# -<F4 eR uma das quatro instituicoes membro, no -acional Metacenter "or <omputational Fcience and /ngineering# <ornell T)eorG <enter 9 <T< se locali!a no campus da <ornell 0niversitG, in .t)aca, -e& :orC# <T< eR outra instituicao membro do -acional Metacenter "or <omputational Fcience and /ngineering# 4s entradas com etiquetas
25T3

and

2553

podem conter1

multiplos paragra"os (separados por etiquetas de paragra"o), listas, ou outra in"ormacao da descricao#

Tabelas
.nicie uma tabela com1
2table border>?largura@da@borda?3

4pQs isso selecione os campos usando1 2tr32td3<ampoS27td32td3<ampoN27td3 e assim seguidamente# Luando acabar de selecionar os campos, "inali!e os campos com1 27tr3 5epois M sQ adicionar os items usando1 2tr32td3.temS27td32td3.temN27td327tr3 e depois criando uma nova lista de items com1 2tr32td3.temS27td32td3.temN27td327tr3 +inali!e a tabela com1 27table3 <omo e,emplo, ol)e como "icaria uma tabela parecida com essa citada1

Campo1 Campo2 Item1 Item1 Item2 Item2 '!onto


ProntoK 4gora voc j sabe o bsico sobre )tml, j pode ate criar uma primeira pgina#

HTML

(anado

4qui voc ir encontrar vrias coisas para incrementar sua pgina, entre elas1 +rames, Tava, Musica de +undo e /tc#

F!ames
+rames so atributos que se usa muito em pginas )tml para dividir a pgina e N ou mais telas# <om os "rames, se pode colocar telas dividas, e muitas ve!es se usa uma dessas telas para se colocar os linCs da pgina, e aquela tela com os linCs nunca vai mudar# 9bs1 4lguns navegadores no suportam "rames

F!ame Basic 2"rameset3 ### 27"rameset3


2"rame src>?url?3 2no"rames3 ### 27no"rames3 Feu bro&ser no suporta brames 2no"rames3 2HTML3 2H/453 27H/453 2+=4M/F/T3 2+=4M/ F=<>?url?3 2-9+=4M/F3 ### 27-9+=4M/F3 27+=4M/F/T3 2HTML3 F!ame )i*e

<+!ameset cols,->
<frameset cols=30%,20%,50%> <frame src="A.html"> <frame src="B.html"> <frame src="C.html"> </frameset>

A B

<+!ameset !o.s,->

A B C
<frameset rows=25%,25%,50%> <frame src="A.html"> <frame src="B.html"> <frame src="C.html"> </frameset>

/0L) 1 203)

B A C

<frameset cols=20%, > <frame src="A.html"> <frameset rows=!0%, > <frame src="B.html"> <frame src="C.html"> </frameset> </frameset>

F!ame 0ption +rame -ame 2"rame name>H3 2a )re">url target>H3


<frameset cols=50%,50%> <frame src="A.html"> <frame src="B.html" "ame="#$%%&"> </frameset>

)pecial Ta!get

2a )re">url target>@blanC3 2a )re">url target>@sel"3 2a )re">url target>@parent3 2a )re">url target>@top3 F!ame ppea!ance F!ame Bo!de! <+!ame +!amebo!de!,-> -,yes4 no

<frameset rows=30%, > <frame src="Acol.html" frame'or(er="o> <frameset cols=30%, > <frame src="Bcol.html" frame'or(er="o> <frame src="Ccol.html" frame'or(er="o> </frameset> </frameset>

F!ame )pacing <+!ameset +!amespacing,-> -,)pace )i*e

<frameset rows=30%, framespac)"*=100> <frame src="Acol.html"> <frameset cols=30%, > <frame src="Bcol.html"> <frame src="Ccol.html"> </frameset> </frameset>

Bo!de! /olo! <+!ameset bo!de!colo!,-> H>rrggbb He, -umber, or -ame1 8lacC, 9live, Teal, =ed, 8lue, Maroon, -avG, ;raG, Lime, +uc)sia, ;reen, Purple, Filver, :ello&, 4qua

<frameset rows=30%, 'or(ercolor=re(> <frame src="Acol.html"> <frameset cols=30%, > <frame src="Bcol.html"> <frame src="Ccol.html"> </frameset> </frameset>

Ma!gin <+!ame ma!gin.idth,- ma!ginheight,-> AA AA


<frameset cols=50%,50%> <frame src="A.html"> <frame src="A.html" mar*)"w)(th=50 mar*)"he)*ht=50> </frameset>

AAAA

)c!ollba! <+!ame sc!olling,-> -,yes4 no4 auto

+)spla, A.html

%oa( A %oa( B

<ce"ter> <)frame src="A.html" "ame="w)"(ow"> #ere )s a -loat)"* -rame </)frame> <'r><'r> <a href="A.html" tar*et="w)"(ow">%oa( A</A><B.> <a href="B.html" tar*et="w)"(ow">%oa( B</A><B.> <a href="Ccol.html" tar*et="w)"(ow">%oa( C</A><B.> </ce"ter>

%oa( C

Musica de +undo Fe voc quiser que quando uma pessoa entre em sua pgina ela escute uma musica de "undo, adicione o seguinte comando1
2embed src>?arquivo#e,t? autostart>?true? loop>?numero@de@ve!es@que@vai@tocar?3

Most!ando a page p!o mundo!!!


4gora dicas de como publicar sua pgina de gra*a e tambem de como conseguir contadores de pginas # /omo consegui! contado!5 )e a pgina +o! no 6eocities voc tem que acessar

)ttp177&&&#geocities#com7cgi bin7counter7member@name#pass&ord

9 contador ser ento iniciali!ado7!erado# 5epois, M sQ colocar na pgina re"erncia ao contador1


2.M; F=<>?7cgi bin7counter7member@name?3

9bviamente, ?member@name? e ?pass&ord? devem ser substituidos pelos dados correspondentes# 7tili*ando8se do se!(io do 3eb8/ounte! para tal preenc)a o "ormulrio na pgina <reating 4 %eb <ounter, in"ormando nome para o contadorU sen)aU nEmero inicial para o contadorU e mailU 0=L e nome da pgina# -a sua pgina M sQ incluir a seguinte lin)a no ponto onde "or para aparecer o contador1
2.M; F=<>?)ttp177counter#digits#com7&c7 d7V7nome?3

9nde ?nome? M o nome dado ao contador durante o cadastramento no %eb <ounter# 7tili*ando o 9!agon+i!e:s 3eb 'age /ounte! basta adionar na pgina

2.M; F=<>?)ttp177&&&#dragon"ire#net7cgi bin7counterWsua 0=L?3

9nde ?sua 0=L? M M o endereco da pgina (e,# )ttp177&&&#inter&eb#com#br)# -o 5ragon"ireRs voc pode obter in"orma*Oes adicionais#

Todos os 5ireitos =eservados X .nter%eb