h t t p : / / w w w. t i a g o s o u z a. c o m
E s t e G u i a f o i e s c r i t o p o r T i a g o D a n i e l d e S o u z a E m a i l : t i a g o c o p a [ a t ] g m a i l [ d o t ] c o m S i t e d o A u t o r : h t t p : / / w w w. t i a g o s o u z a. c o m
T h i s w o r k i s l i c e n s e d u n d e r a C r e a t i v e C o m m o n s A t t r i b u t i o n - N o n C o m m e r c i a l - S h a r e A l i k e 2. 0 B r a z i l L i c e n s e. h t t p : / / c r e a t i v e c o m m o n s. o r g / l i c e n s e s / b y - n c - s a / 2. 0 / b r
h t t p : / / w w w. t i a g o s o u z a. c o m
h t t p : / / w w w. t i a g o s o u z a. c o m
As pessoas imaginam que é muit o difícil co nst ruir um s ite. Isto não é ve rdade !! Qua lque r um po de a pre nde r como cons t ruir uma pá gina. Se você continua r le ndo, esta rá apto a co nst ruir um ra pida me nte, quando me nos es pera r.
caros para cons t ruir w e bsites. É ve rda de que ex ist em muitos so ftwa res capazes de cria r um w e bsite para vo cê. Alguns ma is fe chados que o ut ros. Mas, s e você prete nde trilhar o ca minho ce rto, de verá cria r vo cê mes mo o w e bsite. Fe lizmente, isto é s imples é você já te m a sua dis pos ição to dos os so ft wa res que nece ssita.
O o bjet ivo des ta minha a pos t ila é fo rnece r os conhecime nto s bás icos que pe rmitirão cons truir um we bs it e de fo rma co rret a. A apost ila pa rt e da estaca ze ro e não re que r qualquer conhe cimento pré vio de pro gramação.
Obvia me nte , a a pos tila não e ns ina tudo. Dia nt e disto, se rá ne cessá rio que você se empenhe , prat ique e co nso lide os e ns ina mentos a qui contidos. Mas, não se aborreça, pois a pre nde r como co nstruir um w ebs ite é bem dive rt ido e bast ante sa tis fa tó rio quando você trilha o ca minho cert o do a prendiza do.
OK. Che ga de conve rsa. Va mos co me ça r...
O H TML é uma L in gu agem de ma rca ção de texto. M ais e spe cificamente , uma linguage m de marca ção de hipertex to. Porta nto, a nt es de co me ça r a fa la r de HTM L, va mos e nt ender o que vem a s er uma linguage m de marca ção.
combinam t ext o com info rmaçõ es ex tras sobre o tex to. Essa informação ex tra po de se r re pres enta da po r diversos s ímbolos o u pa lavras- cha ve dife re ntes, de pe nde ndo da linguage m de marca ção com que est ivermos trabalhando.
O H TML não e ra uma linguage m de formata ção de t extos qualque r, e la poss ibilita va liga r t extos que esta va m num computa dor a te xtos que e sta va m num o ut ro co mputa do r, usa ndo co mo me io a internet. O processa do r e vis ua lizador de HTML são chama dos de na ve ga dor, pe la caracte ríst ica do hipertex to que permite ao usuário "na da r" na informação.
a rquivos de co mputado r e, ca so esses a rquivos co nt enha m código s HTML, inte rpretá -los se gundo o pa drão do hipe rt ex to e ge ra r a "página ht ml", que é
t e rminam com .h tml. Exemplo: index.h tml, foo.ba r.h tml e etc.hml
usuá rio que usa o nave ga do r qua nto e m out ros co mputa do res : o nave gado r é capaz de a brir es ses a rquivos des de que e les est eja m acess íve is - as ta is pá ginas w eb.
h t t p : / / w w w. t i a g o s o u z a. c o m
O te xto ent re as ta gs < title> ... < /title> é o t ít ulo de se u do cume nt o. O t ítulo se rá e xibido na le ge nda do na vega do r, na pa rt e de cima do bro wse r.
Os no mes dos a rquivos escritos e m HTM L de ve m t er a e xte nsão .h tml, mas a
e m que os no mes dos a rquivo s t inha m no máximo 8 ca racte res e as suas e xte nsõ es não podiam te r ma is de 3 ca racte res.
Essas de ficiê ncias, que no passado o briga ra m a usa r a ex te nsão .h tm em ve z de .h tml já fo ra m e limina das. Po r isso de ve mos usa r a ext ensão .h tml, a não
Ex is te m duas fo rmas de s e cria r um te xto fo rmata do at ra vés de lingua ge ns de ma rca ção. A prime ira cons is te em es creve r o tex to, usa ndo as inst ruçõe s da linguagem, num e ditor de te xto puro. E m se guida , usa-se o processa do r de t ext o pa ra produzir o t ext o fo rma tado.
comprida, o conce it o é s imples: esse t ipo de pro grama é co mpost o po r um e dito r de t ext o que t ambém é um processa do r de te xtos fo rmata dos. A diferença aqui é que o tex to que o us uá rio es tá e dit ando e vis ua lizando não é o t ext o puro, mas s im o t exto já fo rma ta do graficament e, o u s eja, o qu e v ocê v ê é o qu e você tem.
ge ra m ut ilizam L ingua gens de ma rcação.
Depois que eu editei meu a rqu ivo H TML, eu n ão cons igo v is ua liz ar o resu ltado em meu na vega dor. Por quê?! Ve rifique se vo cê sa lvou o a rquivo co m o nome correto e que s ua ex te nsão se ja .h tm. Confira t ambé m em s ua barra de e nde re ços do na vega do r, ve rifique quanto ao dire tório se es tá co rre to.
Qu a l nav ega dor eu dev o u tiliz a r?! Vo cê po de ut iliza r qualquer browse r, co mo o Inte rnet Ex plo re r, Mo zilla, Opera, e tc. .. pa rticula rmente recomendo o Fire fox e o Inte rne t Ex plorer.
h t t p : / / w w w. t i a g o s o u z a. c o m
P orque u tiliz amos ta gs com letras minú scu la s?! E m HTM L os nomes das tags e ele me ntos po de m se r es crit os ta nto com let ras ma iús culas qua nto com le tras minús culas, t anto que é a mes ma co isa que . Se você obse rva r e m t ut oria is enco nt ra dos pe la Web, vai no tar que os mais a nt igos ge ra lme nte ut ilizam le tras ma iús culas para es creve r os no mes das ta gs, mas os mais mo de rnos ut iliza m e xclusiva ment e le tras minúsculas. Nes ta minha a post ila ut ilizo se mpre let ras minúsculas porque ex ist e uma razão muit o fo rt e para isso.
A nov a gera ção do H TML é uma a plicaçã o do XML e é des ignada po r XHTML. O XHTML é a melho r linguagem pa ra se cria r páginas para a We b,
U m e le mento é uma es trut ura se mâ nt ica, compos ta de ta g de ab ertura, con teú do e ta g de fecha mento.
se us conteúdos. A lis ta se guint e indica a lgumas de suas cara ct eríst icas :
< h t m l > < h e a d > < t i t l e > T í t u l o d a P á g i n a < / t i t l e > < / h e a d > < b o d y > E s t a é m i n h a p r i m e i r a p á g i n a. < b > E s t e t e x t o e s t á e m n e g r i t o < / b > < / b o d y > < / h t m l >
h t t p : / / w w w. t i a g o s o u z a. c o m
a prese nt ado a se guir, es tamos dize ndo ao nave gado r pa ra não co lo car as
indica uma espess ura nula para a linha de conto rno da ta be la) :
< h t m l > < b o d y > < t a b l e b o r d e r = " 0 " > < t r > < t d > E s t a é a m i n h a p r i m e i r a t a b e l a. < / t d > < / t r > < / t a b l e > < / b o d y > < / h t m l >
Já no exe mplo a ba ixo es ta mos dize ndo ao na ve ga do r pa ra des enha r uma linha
de conto rno com es pess ura 2 ( bo rde r="2" )
< h t m l > < b o d y > < t a b l e b o r d e r = " 2 " > < t r > < t d > E s t a é a m i n h a s e g u n d a t a b e l a. < / t d > < / t r > < / t a b l e > < / b o d y > < / h t m l >
Os at ributos s empre e nt ra m e m pa res nome/ va lo r ( na me/va lue), ass im:
n ame="v alu e"
N ota 1: Os at ributos só po de m a pa re ce r nas t ags de início. É pro ibido co locar a tributos nas ta gs de fe cha me nto.
N ota 2: Pa ra ga rantir a co mpa tibilida de com a lingua ge m X HTML, utilize le tras minúsculas para es cre ve r o nome dos a tributos, e s empre co lo que os va lores e ntre as pas.
4.2.1 - Atributos podem ser aplicados à maioria das tags
Vo cê no rma lme nte usa rá a tributos co m mais fre qüência e m a lgumas t ags, ta is como a tag body e ra ra me nte usa rá e m o ut ras, como por exe mplo, a ta g br que é um comando pa ra pula r de linha e não pre cisa de ne nhuma info rma ção a dicio na l.
Assim co mo ex ist em muit as ta gs, ta mbém e x iste m muitos at ributos. Alguns a tributos são e mpre ga dos em ta gs específicas enqua nto outros s erve m pa ra vá rias ta gs. E vice-ve rsa : a lgumas ta gs po de m co nt er somente um t ipo de a tributo, enqua nto o ut ras po de m co nt e r vá rios t ipos.
Isto po de pa re ce r um po uco co nfuso, mas à me dida que vo cê fo r prat icando va i cons tata r que t udo é fácil e ló gico, bem co mo vai ve rifica r as inúmeras poss ibilidades que os at ributos o fe re ce m.
h t t p : / / w w w. t i a g o s o u z a. c o m
4.3 - Devemos usar aspas ou plicas/apóstrofos (escrevemos
"texto" ou 'texto')?
Aca ba mos de ver que o s valores dos at ributos devem se r se mpre co locados e nt re as pas. No rmalmente ut iliza mos as as pas no rmais ( " ), mas os a pós tro fos ( ' ) ta mbém s ão permit ido s.
E m alguns casos, o valo r do at ributo co nt ém o próprio ca ra ct ere as pas. Numa
s it ua ção dess as, de ve mos usa r a pós tro fos (que a qui funciona m co mo as pas
s imples ) pa ra co lo ca r e m to rno do valo r do at ributo, ass im:
a lt ='E le disse : "Nã o !" '
4.4 – Notas Rápidas
- As Ta gs HTM L são ut ilizada s pa ra ma rca r e lementos HTM L. E las estão
ce rca das pe los do is ca ra cte re s < ( me no r que) e > (ma ior que)
- As ta gs no rma lmente a pa re ce m e m pares, como e < /b>
- A prime ira ta g e m um pa r é sempre a ta g de início, a se gunda t ag do pa r é a ta g de fim
- O tex to e ntre o co meço e o fim da ta g é o co nt eúdo do e le me nto.
- HTM L nã o é s ens it ive, o u s eja , é a mes ma co isa que
- Se por a caso vo cê es cre ve u os códigos HTM L e rrado - por e xe mplo
b> invés de - não se des espe re, po is o máx imo que po de a conte ce r é o se u nave ga do r int e rpre ta r sua pá gina de fo rma dife re nte
do es pe ra do e des enhá- la de um je ito maluco.
5. O CABEÇALHO DE UM DOCUMENTO HTML
5.1 - O Elemento
(cabeçalho do documento) O e le me nt o co nté m informa ção de caracte re ge ra l, ta mbé m des ignada po r me ta- info rma ção, s obre o co nt eúdo do document o e so bre a fo rma como e le de ve se r a presenta do.
Pode mos dize r que o t e rmo meta- informa ção ( o u meta- da dos ) s ignifica da dos
que descreve m outro s dados ou info rma ções.
5.1.1 - A Informação Contida no Elemento
Os elementos co nt idos dentro do e le me nto não s ão exibidos na te la do na ve gado r.
O pa drão HTM L estabe le ce que só um pequeno núme ro de e leme ntos pode a pa re ce r de nt ro do ca beça lho. E les são : , < link>, < meta> , < title> , e .
h t t p : / / w w w. t i a g o s o u z a. c o m
continuam a s er t idas e m co nsideração pe los a gentes ( ro bo ts) dos bus ca do res,
como po r ex emplo, as indica ções da das so bre as pastas em que não de ve se r fe ita qualque r indexação.
Alguns s ist emas de bus ca ( não muitos) usa m a info rmação co nt ida nos
e lemento met a pa ra indexa r as pá ginas. No fra gmento de có digo s eguinte , o e lemento < meta> co nt ém uma breve descrição da pá gina :
< m e t a n a m e = " d e s c r i p t i o n " c o n t e n t = " T u t o r i a i s e r e f e r ê n c i a s t é c n i c a s d e H T M L , C S S , J a v a S c r i p t , X M L , X S L T , S V G " >
Na parte do código aba ixo o e le me nt o conté m uma pa lavras -chave pa ra indexa r a pá gina:
< m e t a n a m e = " k e y w o r d s " c o n t e n t = " H T M L , D H T M L , C S S , X M L , X H T M L , J a v a S c r i p t , X S L T , S V G " >
Co mo acaba mos de ver, os no mes da dos ao a tributo na me indicam cla ra ment e a fina lidade da info rmaçã o co ntida no e leme nto meta.
Infelizmente , muitos cria do res de páginas pa ra a Web a busa ram do eleme nt o met a e usara m de fo rma contrária à s ua filoso fia para e nga na r os mot ores de pes quis a. E m cons e qüê ncia disso, os s it es de bus ca passa ra m a ignorar ca da ve z ma is o e le me nto < meta>, o que a cabo u dificult ando to dos aque les que pret endia m us á-lo de fo rma co rre ta.
5.2.2 - Valores desconhecidos para o atributo name do
elemento
Algumas ve zes enco nt ra mos s ituaçõ es e m que o a tributo na me do e le mento < meta> co nt ém um va lor des conhecido, co mo no exe mplo se guinte :
< m e t a n a m e = " s e c u r i t y " c o n t e n t = " l o w " >
Numa s itua ção des tas de ve mos inte rpretar o e lement o meta co mo contendo info rmaçã o que é espe cífica do w e bsite. Essa info rmação po de se r impo rtante pa ra o a uto r da pá gina, mas pro va ve lmente é irreleva nt e para os vis ita ntes. É poss íve l que essas info rma ções se jam úteis pa ra a lgum so ftw are que le ia a pá gina.
6. MODIFICANDO O CORPO DO DOCUMENTO
Co mo dito a nt erio rme nte , o e lemento b ody englo ba o corpo do s eu do cume nto H TML. E le poss ui muit os a tributos que possibilitam mo dificar a a pa rê ncia da s ua página, co mo co r de fundo o u das let ras. Esse s at ribut os t ambé m po de m se r ut iliza dos junto com o at ributo td. Aqui mo st ra remos a pe nas os a tributos que int e rfere m nas co res da s ua pá gina :
- b gcolor: de fine a co r de fundo de um documento
- text: a co r do tex to
- link : a co r dos links
- a link: a cor dos links at ivos at ua lmente ( a pá gina que você está
vis itando )
- v link : co r dos links já vis it ado s
h t t p : / / w w w. t i a g o s o u z a. c o m
Os a rgumentos são o no me ou o número de uma cor, exata mente co mo no caso do a t ributo color us ado no e lemento fon t. Po r ex emplo:
< h t m l > < h e a d > < t i t l e > I s s o é u m a c o n f u s ã o! < / t i t l e > < / h e a d > < b o d y b g c o l o r = " b l a c k " t e x t = " g r a y " l i n k = " r e d " a l i n k = " w h i t e " >
I s s o é u m a p á g i n a e m h t m l.
< / b o d y > < / h t m l >
Essa é uma pá gina HTM L o nde o fundo s erá pre to, com le tras cinza s, links e m ve rme lho e links a tivos e m bra nco. Essas são as de finições glo ba is de co r para se u docume nt o, e a qua lquer inst ante você po de mudar as co re s com o e lemento fon t.
7. ELEMENTOS BÁSICOS DA LINGUAGEM HTML
7.1 - Cabeçalhos
Os ca be ça lhos ( també m cha mados de H ea dings ) s ervem pa ra cria r t ít ulos
diferencia r as seções da s ua pá gina. E le s possuem se is valores dife re nt es, se ndo que a de va lo r 1 é a que poss ui a ma io r fonte e a de valo r 6 po ssui a me no r fo nte.
Por exe mplo, usando o se guint e có digo :
< h 1 > T í t u l o 1 < / h 1 > < h 2 > T í t u l o 2 < / h 2 > < h 3 > T í t u l o 3 < / h 3 > < h 4 > T í t u l o 4 < / h 4 > < h 5 > T í t u l o 5 < / h 5 > < h 6 > T í t u l o 6 < / h 6 >
No código a cima, o HTM L automa tica me nte so lta uma linha em branco e ntre um t ítulo e o ut ro.
7.2 - Parágrafos
Os pa rá grafos são de finidos com a ta g < p>
< p > E s t e é u m p a r á g r a f o < / p > < p > E s t e é u m o u t r o p a r á g r a f o < / p >
No có digo a cima, o HTM L a uto ma tica me nte a cres ce nta uma linha em bra nco a nt es e depo is de um parágra fo.
7.2.1 - Alinhamentos de parágrafo
Vo cê já deve te r visto que em certos docume nt os o text o a pa re ce o ra a linha do à direita, o ra à es que rda, no ce nt ro ou e nt ão ocupando unifo rme me nte o
es pa ço da pá gina ( te xto jus tifica do ). Isso po de ser obt ido fa cilme nt e e m
HTM L. Ve ja a ta be la aba ixo :
ELE MEN TO DES CRI ÇÃO < p a l i g n = ” l e f t ” > A l i n h a o t e x t o à e s q u e r d a
h t t p : / / w w w. t i a g o s o u z a. c o m
Ex perime nte muda r os at ributos do alinhame nto pra ve r o que a conte ce !! Na pa rte de Folha s de E s tilo most ra re i co mo utilizar o e le me nto div pa ra criar se çõ es ló gicas e m do cumentos.
7.4 – Quebras de Linha
A ta g é ut ilizada quando vo cê que r t e rmina r uma linha , mas não quer começa r um no vo pará gra fo. Com est e comando você faz co m que oco rra uma que bra de linha, o nde você po sicio na r a ta g.
Not e que pa ra o e leme nto
não exist e o co ma ndo < /br>, ist o é, a que bra de linha nã o age numa região de t ext o delimitada, mas sim num po nt o do tex to. Co mplicado?! E ntão va mos lá, ma is uma ve z explica ndo de uma o ut ra fo rma : coma ndos co mo , < i> e < u> a gem so bre uma re gião do t ext o e pre cisa m se r fe cha dos com s eus res pe ct ivos < /b>, e < /u> , po is do co nt rá rio esse s co mandos a girão a té o fim do documento. Já o comando de que bra de linha, < /b r>, e a lguns out ros at uam somente no po nto o nde e les a pa rece m.
Ve ja o ex emplo a ba ixo da utilização da ta g
< p > E s t e < b r > é u m p a r á < b r > g r a f o c o m q u e b r a d e l i n h a < / p >
A ta g é uma e tiqueta vazia, e la não poss ui tag fina l.
7.5 – Comentários
A ta g de comentá rio é ut iliza da para inse rir co me ntários no có digo font e HTM L. To do tipo de comentá rio é ignorado pe lo na ve ga do r, isto é, e le não se rá ex ibido na t ela. Vo cê po de ut iliza r es ta t ag pa ra e xplicar se u có digo fonte ou pa rt e de le , que po de rá ajudá- lo quando você est ive r e dita ndo se us có digos post e rio rme nt e.
Not e que vo cê precisa de um po nto de excla ma ção de po is do pa rê nt eses de a be rt ura, e nã o antes do parênteses fina l.
7.6 – Informações Úteis
Qua ndo você escreve r um text o em HTML, est eja cie nt e de que o t exto que você está vis ua lizando nã o s erá ex ibido igualmente em todos os na ve ga do res. Algumas pess oas poss ue m comput adores co m reso luçõ es ma io res, out ros me no res, tudo isso influi na quest ão da ex ibição da pá gina, o que pode a conte ce r são os t extos e as jane las que po de m se r re dime nsiona dos.
As difere nças nos t ama nhos das jane las dos na ve ga do res fa ze m co m que o núme ro de caracte res que cabem numa linha va rie muit o. Po r esse mo tivo não se remos capa zes de co nt ro la r nem o núme ro de linhas ne m os locais e m que a conte ce m as mudanças de linha. Nunca te nte formatar o te xto inse rind o es pa ços ou linhas va zias, po rque os res ulta dos não se rão a queles que você es pera va.
h t t p : / / w w w. t i a g o s o u z a. c o m
O HTM L quando encontra dois o u ma is es pa ços se guidos, e le trata -os como se fosse um único es pa ço. Quando você es cre ve uma s e qüê ncia de es pa ços se guidos, o result ado é o mes mo de es creve r um único es pa ço. E m HTML, as t eclas Tab e E n ter e quiva le m a um es pa ço.
Se mpre que vo cê quis e r inse rir linhas em bra nco, ut ilize a ta g
. Ex is te m pessoas que ut iliza m pará grafos vazios para obt er o mesmo resultado, mas isso es tá erra do. A ta g < p> de ve s er usa da apena s pa ra de finir pa rá gra fos, e o e le mento não de ve se r usa do, po r ex emplo, pa ra cria r listas, pois ex ist em ta gs co ncebida s es pecificamente pa ra isso. Se mpre que você pre cisa r de o bte r uma fo rmata ção es pe cial, você deve usa r o e le mento que fo i criado para esse efeito.
E m muitas pá ginas, os pará grafos est ão es critos s em a e t iqueta de
fe cha me nto (< /p>) Apesa r dos na ve ga dores ace ita re m est a omiss ão, tenha
se mpre ate nção para fe cha r todos os e leme ntos que re que rem uma tag d e fe cha me nto. Se você t enta r va lida r uma página que co nt enha est es erros, ve rá que e la não passa rá no tes te de valida ção.
- Os e le me nt os < p> e <h 1> ... < h 6> o na ve gado r a dicio na a uto ma ticame nte uma linha em branco a ntes do início e o ut ra depo is do fim.
7.7 – Lista de elementos básicos do HTML
TAG DES CRI ÇÃO < h t m l > D e f i n e u m d o c u m e n t o H T M L < b o d y > D e f i n e o c o n t e ú d o p r i n c i p a l , o c o r p o d o d o c u m e n t o < h 1 > a t é < h 6 > D e f i n e t í t u l o s , d e 1 a 6 < p > D e f i n e p a r á g r a f o < b r > I n s e r e l i n h a s e m b r a n c o , q u e b r a d e l i n h a < h r > I n s e r e u m a l i n h a h o r i z o n t a l
D e f i n e u m c o m e n t á r i o 8. FORMATAÇÃO DE TEXTO
A linguagem HTM L de fine vá rios elementos pa ra s e formata r um t exto , co mo po r ex emplo, escre ve r e m ne grito, it álico, s ublinhado, e tc. O exe mplo a ba ixo most ra a lguns de les :
< h t m l > < b o d y > E s t e e x e m p l o t e m t e x t o e m < i > i t á l i c o < / i > , < b > n e g r i t o < / b > , < e m > e n f a t i z a d o < / e m > , < u > s u b l i n h a d o < / u > e t i p o < c o d e > c ó d i g o d e c o m p u t a d o r < / c o d e > < / b o d y > < / h t m l >
8.1 – Elementos para formatação de texto
TAG DESCRIÇÃO < b > D e f i n e s e u t e x t o e m n e g r i t o < b i g > D e f i n e s e u t e x t o g r a n d e < i > D e f i n e s e u t e x t o e m i t á l i c o < s m a l l > D e f i n e s e u t e x t o p e q u e n o < s t r o n g > D e f i n e s e u t e x t o f o r t e
h t t p : / / w w w. t i a g o s o u z a. c o m
Os e nde re ços s ão es critos na forma de URL (U nifo rm R esource Loca to rs), que
é uma mane ira que inventa ram para s e es pe cificar o caminho at é se che ga r num arquivo que est eja nalgum lo ca l da inte rne t.
O fo rmato da URL é :
p r o t o c o l o : / / n o m e - d o - c o m p u t a d o r / p a s t a s / a r q u i v o
O protocolo indica como o nave ga dor irá buscar o arquivo. N ome d o compu ta dor é aque le ende re ço do t ipo w ww. ningue m. co m.br e as pasta s são os diret órios dentro de sse co mputa dor o nde es tão os a rquivos. U ma UR L de um a rt igo do s it e da CM I Bras il é, po r e xe mplo, htt p:/ /ww w. midia indepe nde nte. org/ pt/ blue/2004/ 09/290669.shtml, o nde
h ttp: // é o protocolo , pt, b lue, 2004 e 09 s ão pas tas ( uma fica dent ro da
o ut ra) e 290669.sh tml é o nome do a rqu iv o.
htt p:/ / -- - www.midia indepe nde nt e.o rg \ --- pt -- blue -- - 2004 - -- 09 - -- 290669.shtml
Le mbre-se ta mbém que qua ndo você acessa o endereço htt p:/ /ww w. ninguem.co m. br, por e xe mplo, es tá na verdade ve ndo o a rquivo htt p:/ /ww w. ninguem.co m. br/ index. ht ml. Os arquivos do t ipo in dex.h tml se mpre são procurados pe lo nave ga do r quando vo cê solicita a pe nas o nome do site o u uma pas ta de um computa do r.
E m html, ex ist em t rês fo rmas poss íve is de se fa ze r links : os link s internos,
os link s loca is (ou relat ivos) e os link s externos.
9.1 - Links internos
L ink s in tern os s ão a que les que liga m uma se ção de uma página co m uma o ut ra se ção da mes ma página. Po r exe mplo, se e u quise r fazer uma re fe rência pa ra a s eção H ipe rt ex to de ssa nossa apost ila, basta que e u prime iro de fina um no me pa ra a se ção H ipe rt ex to e e nt ão a dicio ne um link pra e la. Isso é fe ito da seguint e fo rma:
1 - Vou at é o início da s eçã o H ipe rtex to e adicio no o se guinte código , ao invés de s implesme nte escre ve r o t ít ulo da se ção:
< a n a m e = " H i p e r t e x t o " > H i p e r t e x t o < / a >
2 - Adicio no o link pra ess a s eção com o se guinte código ,
< a h r e f = " # H i p e r t e x t o " > V á p a r a a s e ç ã o h i p e r t e x t o < / a >
O a tributo n ame s e rve a pe nas pa ra da r um no me para uma pos ição de uma
pá gina ht ml. O va lo r de na me po de s er qua lquer um ( nes se caso eu co lo que i
"H ipertex to").
Qua ndo você fizer uma re fe rência a um link inte rno utiliza ndo o at ributo h ref ,
você precisa ne cess ariamente adicio nar o caracte re # (jo go da ve lha) ant es
h t t p : / / w w w. t i a g o s o u z a. c o m
do nome da s ua s eção - no nosso caso, #H ipertexto - po is do cont rário se u
nave ga dor t enta rá a bri- lo co mo um link local.
9.2 - Links locais ou relativos
L ink s locais s ão a que les que re ferenciam um a rquivo que es teja no mesmo computa dor que a sua pá gina. L ink s locais nã o cont ém o ht tp: // no início do e nde re ço. Por ex emplo, se no me u do cume nto html e u quise r fa ze r um link pa ra o a rquivo link s .h tml que es tá na mes ma pasta do meu docume nto, não preciso digita l o e ndere ço co mple to, mas ape nas :
< a h r e f = " l i n k s. h t m l " > A c e s s e o s l i n k s! < / a >
Ess e t ipo de a rgumento pa ra o h ref t ambé m é chama do de link s rela tiv os.
Se vo cê quise r linka r uma pá gina que es teja do diretó rio ( pasta) s uperio r da
s ua pá gina, use dois po ntos e uma ba rra antes do nome do arquivo:
< a h r e f = ".. / l i n k s. h t m l " > A c e s s e o s l i n k s! < / a >
A va nta gem de você usa r links relat ivos é que vo cê po de mo ve r to do o se u s it e pa ra um no vo ende re ço na inte rne t e não precisa r ree dita r to dos os links que apontam pa ra pá gina s do se u pró prio site.
9.3 - Links externos
L ink s externos são a que les que po dem a ponta r pa ra qualquer arquivo disponíve l na int erne t, como po r ex emplo :
< a h r e f = " h t t p : / / p t. w i k i p e d i a. o r g " > A c e s s e a W i k i p e d i a! < / a >
Os link s externos precisa m ne cess aria me nt e co nter o pre fixo htt p: // e o e nde re ço co mpleto do a rquivo.
9.4 - Alvo (target)
U m a t ributo inte ressante pa ra o e le me nto é o ta rget, que pe rmit e que o link se ja a be rt o numa outra janela do se u na ve ga do r.
< a h r e f = " h t t p : / / p t. w i k i p e d i a. o r g " t a r g e t = " _ b l a n k " > A c e s s e a W i k i p e d i a! < / a >
O a rgument o do a tributo ta rget é o nome da ja ne la do navegado r que a brirá o link. Se você quiser que o link se ja a be rt o numa no va jane la, s imples mente es co lha qua lquer no me como argumento.
9.5 – Elementos para fazer ligações
ELE MEN TO DES CRI ÇÃO
< a > D e f i n e u m a â n c o r a o u u m a l i g a ç ã o d e h i p e r t e x t o
