Curso de HTML

Programa, o que voc ir aprender:

Primeiros passos
Passo 2
Hyperlinks e Texto dentro de uma caixa
Tag para cores e Tabelas
Formatar o Texto
Download
Frame
Java e Exerccio
Finaliando
!uando algo da errado
Tornando sua P"gina con#ecida
Introduo:
$ linguagem Html % Hypertext &arkup 'anguage ( 'inguagem de &arca)*o de Hipertexto+
, usada para criar as p"ginas divulgadas na -orld -ide -eb. o servi)o mais popular na
/nternet0 1 com ela 2ue s*o 3eitos os #yperlinks 2ue permitem navegar pela -eb0 Para isso.
utilia marca)4es. c#amadas tags. no ponto da p"gina em 2ue , 3eito um #yperlink com
outra p"gina0 Para criar uma p"gina Html. usaremos o 5loco de 6otas. um editor de texto
simples 2ue acompan#a o -indows0 /sto , tudo 2ue voc7 precisa0
1 !"ra o #$oco de %otas&
8li2ue em Editar e mar2ue o item &udan)a $utom"tica de lin#a caso #ouver. se n*o
aparecer esta op)*o ignore este primeiro passo0
' (igite o seguinte te)to:
9#tml:
Todas as p"ginas Html devem iniciar com essa tag0
* (igite :
;
9#ead:
< cabe)al#o deve ser delimitado pelas tags 9#ead: e 9=#ead:
+ (igite:
9title:
<nde deve 3icar o ttulo da p"gina0
Fec#e com 9=title:0
Exemplo>
9title:teste #tml9=title:
, (igite:
9=#ead: para 3ec#ar o cabe)al#o da p"gina
- (igite:
9body:
<nde deve 3icar o corpo da sua p"gina0
Depois deve inserir o ttulo para o texto0 Para isso voc7 usar" as tags 9#;: e
9=#;:
Exemplo9#;:&in#a primeira Home Page9=#;:
< taman#o vai de 9#;: taman#o maior para 9#?: taman#o menor0
. Para co$ocar um te)to digite :
9p:Texto a2ui
Fec#e com 9=p:
Exemplo>
9p:P"ginas Html podem ser criadas em 2ual2uer editor ou processador de texto 9=p:
/ Co$ocando uma imagem :
Exemplo>
9img src@Abrasil0gi3A alt@A imagem do 5rasilA align@AcenterA #eig#t@2BC
widt#@2DC:
$ imagem deve estar na mesma pasta 2ue o ar2uivo Html0 <u aponte para a pasta certa0
/mg src , re3erente a imagem 2ue precisar ser indicado sua extens*o Ei3 ou Jpg0 Heig#t e
2
-idt# s*o as dimens4es da 3igura em pixels. modi3i2ue a seu gosto0 $lt , um texto
alternativo en2uanto a p"gina , carregada ou 2uando se passa com o mouse sobre a 3igura0
0 1amos 2ec3ar o corpo do te)to e terminar com a tag de 2ec3amento&
Exemplo>
9=body:
9=#tml:
14 5a$ve com e)tenso &3tm$ ou &3tm &
Exemplo>
teste0#tml ou teste0#tm
$brindo e vendo o resultado0 $bra seu navegador padr*o% /nternet Explorer ou 6etscape+0
8li2ue em $r2uivo =$brir ou $brir p"gina= Procurar 0 $bra a pasta onde voc7 salvou sua
p"gina cli2ue no ar2uivo #tml de sua p"gina e de <k0
6)emp$o comp$eto
9#tml:
9#ead:
9title:teste #tml9=title:
9#ead:
9body:
9#;:&in#a primeira Home Page9=#;:
9p:P"ginas Html podem ser criadas em 2ual2uer editor ou processador de texto 9=p:
9img src@Abrasil0gi3A alt@A5rasilA align@Ale3tA #eig#t@;FC widt#@;2C:
9=body:
9=#tml:
GeHa o resultado teste&3tm
Tanto as 3igura como o texto ou mesmo os #yperlinks podem ser alin#ados no canto
es2uerdo. direito ou centraliados0
8omo 3aer0
9p align@AcenterA:texto alin#ado ao centro9=p:
9p align@Arig#tA:texto alin#ado a direita9=p:
8aso voc7 n*o escol#a nen#uma dessas duas tags o alin#amento ser" autom"tico0
I
Passo '
$gora 2ue voc7 3e sua primeira Home Page vamos modi3icar e tornar( l" mais atraente
com as seguintes tags>
Para Internet 6)p$orer
9mar2uee: Hunto ao 9#;:0
Dessa 3orma seu ttulo vai ser um letreiro 2ue vai passar de um lado para outro0
6*o es2ue)a de 3ec#ar com a tag 9=mar2uee: e 9=#;:
E 93ont color@AredA: Hunto a tag 9p:0
$ssim seu texto vai ter a cor vermel#a0 Gamos tamb,m centraliar a imagem0
E Jalvaremos como teste20#tm0 8om a tag9p align@AcenterA:e 3ec#ar com a tag 9=p:
6)emp$o:
9#tml:
9#ead:
9title:teste #tml9=title:
9#ead:
9body:
9#;:9mar2uee:&in#a primeira Home Page9=mar2uee:9=#;:
9p:93ont color@AredA: P"ginas Html podem ser criadas em 2ual2uer editor ou processador
de texto 9=3ont:9=p:
9p align@AcenterA:
9img src@Abrasil0gi3A alt@A5rasilA align@AcenterA #eig#t@;FC widt#@;2C:
9=p:
9=body:
9=#tml:
Goc7 pode modi3icar tamb,m o 3undo. colocando uma imagem ou uma cor0
Exemplo9body bgcolor@AtealA: ou 9body background@A3undo20gi3A:
$ 3igura A 3undo20gi3A , um exemplo enviado Hunto com a apostila 0 6o seu caso ser"
necess"rio colocar o nome da 3igura e a extens*o% gi3 ou Hpg+0 6*o , aconsel#"vel usar
imagens 0bmp % 5itmap + por ser bem maior 2ue as imagens Ei3 e Jpg0
H7per$in8s
Para inserir um #yperlink 2ue aponte para uma outra Home Page. digite>
9a #re3@A#ttp>==www0google0com0brA:P'$K5<K9=a:0 Este exemplo abre a p"gina da
Eoogle0
D
Para inserir um #yperlink 2ue aponte para sua prLpria p"gina como exemplo usamos 9a
#re3@Atabela0#tmA:Tabela9=a:0
Para inserir um 3igura 2ue 2uando clicada abre uma outra p"gina ou um link para enviar e(
mail 0
(igite :
9p align@AcenterA:
9a #re3@Amailto>idealgratisMidealgratis0com N:
9img src@Aemail0gi3A alt@Aenviar e( mailA #eigt#@IC widt#@IC:9=a:9=p:
'embrando 2ue email0gi3 , uma imagem 2ual2uer 2ue deve estar na mesma pasta0
Ela precisa estar na mesma pasta 2ue o ar2uivo Html0 E idealgratisMidealgratis0com , um
endere)o eletrOnico0 8om este exemplo 3ica 3"cil voc7 criar outro #yperlinks usando outra
3iguras e suas p"ginas0 $ltere #eig#t e widt# 2ue s*o largura e altura da 3igura email0gi3. se
n*o colocar nada de3inindo o #eig#t e widt# ent*o 3icar" o taman#o padr*o da imagem0
Te)to dentro de uma cai)a
(igite:
9p align@AcenterA:9textarea name@AJ;P rowsAFP cols@AIFP:
&uitos 2uerem saber 2uem , o dono da /nternet ou 2uem administra os mil#ares de
computadores e lin#as 2ue a 3aem 3uncionar0 Gamos voltar um pouco no tempo0
6os anos ?C. 2uando a Euerra Fria pairava no ar. grandes computadores espal#ados pelos
Estados Qnidos armaenavam in3orma)4es militares estrat,gicas em 3un)*o do perigo de
um ata2ue nuclear sovi,tico0 Jurgiu assim a id,ia de interconectar os v"rios centros de
computa)*o de modo 2ue o sistema continuasse 3uncionando. mesmo 2ue um desses
centros 3osse destrudo0
< Departamento de De3esa. atrav,s da $RP$% $dvanced Researc# ProHects $gency+.
mandou pes2uisar 2ual seria a 3orma mais segura de interconectar esses computadores0
8#egou( se a um es2uema c#amado c#aveamento de pacotes0
8om base nisso. em ;SBC 3oi criada a semente do 2ue viria a ser a /nternet0 $ Euerra Fria
acabou mas a #eran)a da2ueles dias rendeu bastante0 9=textarea:9=p: &odi3icando o
#yperlink deixando de 3orma 2ue pare)a um bot*o0
(igite:
93orm met#od@get action@A#ttp>==www0microso3t0com=brasilA:
9input type@submit value@A&icroso3tA:
9=3orm:
Inserindo uma imagem como 37per$in8 &
F
1 comum usar bot4es para entrar e sair de uma p"gina0 Gamos usar um bot*o para voltar
para a primeira p"gina teste0
Digite>9a #re3@Ateste0#tmA: /sso aponta para a p"gina teste0
/nsera a tag da 3igura agora. neste caso um bot*o para voltar0
Digite>9img src@Avoltar0gi3A alt@AvoltarA #eig#t@IC widt#@?C:
$gora 3ec#e o #yperlink com9=a:
6)emp$o comp$eto:
9a #re3@Ateste0#tmA:
9img src@Avoltar0gi3A alt@AvoltarA #eig#t@IC widt#@?C:
9=a:
Tag para cores
(igite:
93ont color@AredA:Texto a2ui9=3ont:
5ranco -#ite
Preto 5lack
$ul 5lue
$marelo Kellow
Gerde Ereen
'aranHa <range
Germel#o Red
Rosa Pink
8ina Eray
<uro Eold
Gerde aulado Teal
$ul marin#o 6avy
Prata Jilver
9esu$tado vai ser:
9p:93ont color@AredA:como vai9=3ont:9=p:
Ta"e$a
Gamos criar uma tabela para apostilas com pre)os e in3orma)4es sobre cada apostila0
8omo criar uma tabela com a linguagem Html0
Digite>
?
9p align@AcenterA:8ompre uma apostila9=p:
9table border@A2P cellpadding@A2P cellspacing@A;P widt#@ATCUA:
9tr:
9td widt#@AIIUA:$postila9=td:
9td widt#@AIIUA:$tributos9=td:
9td widt#@AIIUA:Galor em reais9=td:
9=tr:
9tr:
9td widt#@AIIUA:Delp#i I9=td:
9td widt#@AIIUA:$prenda a programar em Delp#i9=td:
9td widt#@AIIUA:RV 2C. CC 9=td:
9=tr:
9tr:
9td widt#@AIIUA:Gisual 5asic9=td:
9td widt#@AIIUA:$prenda a programar em Gisual 5asic9=td:
9td widt#@AIIUA:RV DC. CC 9=td:
9=tr:
9=table:
9esu$tado da ta"e$a acima&
8ompre uma apostila
$postila $tributos Galor em reais
Delp#i I
$prenda a programar
em Delp#i
RV 2C. CC
Gisual 5asic
$prenda a programar
em Gisual 5asic
RV DC.CC
GeHa o resultado ta"e$a&3tm
< 2ue voc7 precisa saber , 2ue. 2uanto mais voc7 inserir 9td: entre 9tr: e 9=tr: mais partes
sua tabela ter"0 $ Tabela come)a com 9table: e termina com a tag de 3ec#amento9=table:0
-idt# 3a re3er7ncia a largura0 5order a borda. se voc7 n*o colocar border sua tabela n*o
vai ter bordas0 TR signi3ica% Table row+. 2ue marca uma lin#a de tabela0 TD% Table Data+
2ue s*o as c,lulas para os dados0 <s valores em U. indica o taman#o ocupado em cada
espa)o na tabela 0 Podendo ser um maior e outro menor0
:ormatar o te)to
Gamos ver agora alguns complementos 2ue 3uncionem em ambos browser0
6egrito e it"lico0
5asta digitar
B
9p:9i:texto a2ui9=i:9=p:0 Resultado 9p:9i:como vai 9=i:9=p:
6egrito digite
9p:9b:texto a2ui9=b:9=p:0 Resultado9p:9b:como vai 9=b:9=p:
'in#a divisLria>
9#r:
&arcadores >
9li:texto a2ui9=li:
/sso 3a com 2ue o texto 2ue voc7 ten#a digitado ten#a uma pe2uena bolin#a em sua 3rente0
< resultado vai ser este
W tudo bem0
Teste de taman#os 0
9#;:taman#o maior e 9#?: taman#o menor0
9#;:Texto a2ui9=#;:
9#2:Texto a2ui9=#2:
9#I:Texto a2ui9=#I:
9#D:Texto a2ui9=#D:
9#F:Texto a2ui9=#F:
9#?:Texto a2ui9=#?:
Para %etscape:
Qm testo 2ue pisca 0
9blink: texto a2ui9=blink:
Texto em duas colunas>
9multicol :
Exemplo>
9 multicol cols@2:
texto a2ui
9=multicol:
(o;n$oad
8omo 3aer com 2ue o visitante possa baixar um ar2uivo ou mesmo um programa0
Download , simplesmente baixar para sua m"2uina algum ar2uivo0 Ent*o para 2ue algu,m
baixe um ar2uivo de sua p"gina 3a)a assim0
T
(igite :
9a #re3@Anome0extens*oA:5aixar9=a:
6ome signi3ica o nome do ar2uivo e extens*o nada mais , do 2ue o 3ormato do ar2uivo.
geralmente 0ip0 6o seu caso poderia ser
9a #re3@Aprograma0ipA:5aixar9=a: 0
!uando voc7 baixou esta apostila0 Estava na verdade clicando em
9a #re3@A#tmlD0ipA:5aixar9=a:0
8omo exemplo voc7 pode abrir o ar2uivo download da apostila e clicar em baixar. voc7 vai
est" baixando ou neste caso trans3erindo logotipos para alguma pasta>
9#tml:
9#ead:
9title:Download9=title:
9#ead:
9body:
9#;:Download9=#;:
9#I:$postila Html9=#I:
9a #re3@Adown=logo0ipA:5aixar9=a:
9=body:
9=#tml:
8omo pode observar a tag para 3aer download , a mesma 2ue a tag usada para #yperlinks
sL mudando a extens*o0
Goc7 pode modi3icar usando tamb,m tabelas e o m,todo para 2ue pare)a um bot*o0 <u
como o exemplo download0#tm. inserir uma 3igura 2ue de3ine mel#or a palavra download0
:rame
< 3rame permite 2ue voc7 veHa o ndice e o conteXdo em uma Xnica p"gina0 <u ver duas
p"ginas de uma sL ve. bonito e pr"tico0
(igite:
9#tml:
9title:3rame9=title:
93rameset cols@AFCU.FCUA:
93rame src@Atabela0#tm N:
93rame src@Ateste20#tm N:
9=3rameset:
9=#tml:
GeHa o resultado 2rame&3tm
S
'embre 2ue tabela0#tm e teste20#tm s*o p"ginas de demonstra)*o0 Jua p"gina de 3rame ou
outra 2ual2uer dever" ter nomes di3erentes0
< mesmo exemplo mas com um visual di3erente. ao inv,s do 3rame ser em colunas cols
vamos deixar com a divisLria na #oriontal0 &odi3icando o nome cols por rows0
9#tml:
9title:3rame9=title:
93rameset rows@AFCU.FCUA:
93rame src@Atabela0#tmA:
93rame src@Ateste20#tmA:
9=3rameset:
9=#tml:
8aso o browser% navegador+ do usu"rio n*o suportar 3rame digite>
9no3rame:Jeu 5rowser n*o suporta 3rame 0 8li2ue no bot*o voltar9=no3rame:0
Podemos ter tamb,m mais de dois 3rame% 2uadros em um p"gina+0
Exemplo>
9#tml:
9title:3rame9=title:
93rameset rows@AFCU.2FU.2FUA:
93rame src@Ateste0#tmA:
93rame src@Ateste20#tmA:
93rame src@AHava0#tmA:
9=3rameset:
9=#tml:
Ent*o 3ica assim ;Y 3rame9 3rame src@Ateste0#tmA: o 2Y 3rame9 3rame src@Ateste20#tmA: e
o IY 3rame93rame src@AHava0#tmA:0
<ava
Qsando JavaJcript> < JavaJcript , uma implementa)*o da linguagem Java. sL 2ue
interpretada0 < programa browser% navegador+ l7 o cLdigo 3onte em JavaJcript. interpreta
as instru)4es e as executa0
$ linguagem Havascript come)a com 9script: e termina com 9=script:
< 2ue vamos 3aer , ter um bot*o uma resposta para este bot*o0 <u seHa 2uando algu,m
clicar neste bot*o ser" c#amado um evento0 < evento no caso , o on8'ick0 Para 2ue
3uncione precisamos , claro de uma pergunta e ter aten)*o ao script 2ue est" na se)*o
9#ead:. mas , executado na se)*o
9body:0
;C
(igite:
9#tml:
9#ead:
9#I:!ual , o navegador mais usado no 5rasil. /nternet Explorer ou
6etscape 6avegator9=#I:
9script:
9Z[
3unction clicou% 3orm+
\
3orm0caixa0value@A/nternet Explorer FBUA]
^
==[:
9=script:
9=#ead:
9body:
93orm:
9input type@AbuttonA value@AResultadoA on8lick@Aclicou%t#is03orm+A:
9input type@AtextA name@AcaixaA:
9=3orm:
9=body:
9=#tml:
GeHa o resultado =ava&3tm
GeHa mais sobre Javascript e Gbscript em script ;. script2. script I e e3eitos0
6)erc>cio
Fa)a agora uma Home Page com 3rame. tabela. imagens. #yperlinks0 Qtilie 3iguras. tais
como voltar0gi3. brasil0gi3. anuncie0gi3. 3undo20gi3. 3ag0gi30 8aso ten#a alguma imagem nos
3ormatos Ei3 e Jpg utilie para dar seu prLprio to2ue a sua p"gina0
:ina$i?ando
6ada disso adianta muito se voc7 n*o publicar sua p"gina na internet0 8omo 3aer isso.
alguns provedores de acesso. a ttulo de promo)*o d*o ;&b de espa)o para 2uem 3a uma
assinatura0
8onverse com seu provedor de acesso sobre a 3orma de #ospedar sua Home Page. o 2ue ,
preciso para enviar suas p"ginas0 6*o se es2ue)a de enviar tamb,m as 3otos0
Estes exemplos a2ui explicados 3oram testados nas mais novas vers4es dos browser
6etscape 6avigator D0I e /nternet Explorer D0C0 Existem algumas di3eren)as. mas nada 2ue
atrapal#e o desenvolvimento de sua Home Page0
;;
8omo 3aer uma Home Page visualmente bonita e de r"pido carregamento0 Gisitantes
acabam desistindo de carregar uma p"gina 2ue est" demorando0 &uitas 3iguras em uma sL
p"gina 3a com 2ue toda p"gina 3i2ue lenta0
Escol#a de 3orma correta seus 3rames0 Frames 2ue 3aem voltar para a p"gina principal
acaba resultando em um erro0 Goc7 pode 3aer duas vers4es da mesma p"gina ou um
camin#o sem 3rame. ou mesmo sL com texto sem 3iguras0 Qse e abuse de 3rame. #yperlink.
tabela. cores. Havascript em sua p"gina0
Qm Ltimo local para #ospedar uma p"gina ou at, mesmo ;C &5 de ar2uivos e o Eeocities0
Ent*o visite o www0geocities0com e cli2ue em 3ree mail e Home Page0 Escol#a um local
2ue n*o esteHa sendo ocupado0 Preenc#a todos os dados e logo voc7 estar" recebendo um e(
mail com sen#a e local para enviar seus ar2uivos0
@uando a$go no 2unciona
Texto a2ui n*o signi3ica 2ue voc7 deve digitar estas palavra. mas colocar um texto neste
local0
Je o letreiro n*o anda. o texto n*o est" dentro de uma caixa. tente usar o /nternet Explorer I
ou superior0
8rie um pasta com seu nome ou algum nome de sua pre3er7ncia para salvar suas p"ginas 0
8olo2ue tamb,m nesta pasta todas 3iguras 2ue 3oram usadas0
Geri3i2ue se as 3otos est*o na mesma pasta 2ue o ar2uivo Html0
!uando uma p"gina n*o abre. pode ser problema com um #yperlink0
Fotos n*o carregam. voc7 n*o deve ter digitado o camin#o correto0
Qtilie o 5loco de 6otas como seu editor de p"ginas Html0
$s p"ginas n*o gravam como Html. tente salvar novamente como nome N0#tmA 0 < letreiro
n*o 3unciona voc7 deve estar usando o 6etscape 8ommunicator0 Qma boa 3orma de 3aer
sua p"gina agrad"vel para todos os 5rowser , inserindo tag 2ue 3uncionem em ambos
browser0 Qm bom exemplo , a tag 9multicol: texto em mXltiplas colunas0
Exemplo> 9multicol cols@2:Texto em duas colunas9=multicol:0 6o 6etscape o texto vai
3icar em duas colunas. como se 3osse um Hornal mas no /nternet Explorer ser" normal0
Tornando sua pgina con3ecida
Para 2ue sua p"gina possa ser visitada por muitas pessoas , necess"rio 2ue voc7 3a)a uma
inclus*o em alguns sistemas de busca como o 8ad7_. $c#eiZ. Radar Qol. `ee. Jur3. Ka#oo.
$ltavista. 'ycos. etca
Je voc7 #ospedar sua p"gina em um servi)o como o EE<8/T/EJ n*o , necess"rio digitar o
camin#o completo de um link para o outro0
Exemplo 9a #re3@Aindex0#tmA:P"gina Principal9=a:0
;2
8aso ten#a criado sua Home Page utiliando como exemplo esta apostila noti3i2ue o
endere)o. ser" um praer criar um Hyperlink para sua p"gina0
;I