O l á m u nd o ! < /p > body > < / html >
Código HTML 2.1: Exemplo da estrutura básica de um documento HTML
www.k19.com.br
3
HTML
4
Figura 2.1: Exemplo da estrutura básica de um documento HTML
No exemplo acima temos um elemento HTML representado por sua tag "p"e um filho de texto simples "Olá Mundo!".
Exercícios de Fixação Na pasta Desktop do seu usuário crie uma nova pasta com o seu primeiro nome. Dentro dessa pasta crie outra pasta com o nome html (para facilitar, utilize apenas letras minúsculas em todas as pastas e arquivos que criarmos durante o curso). 1
Agora utilizando um editor de texto crie um novo arquivo com o nome ola-mundo.html e salve dentro da pasta html . Em seguida insira o seguinte código dentro do arquivo ola-mundo.html : 2
1 2 3 4 5 6 7 8 9
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E x e mp l o d a e s t ru t u r a b á s i c a d e u m d o c u m e n to H T ML < /title > head > < body >
O l á m u nd o ! < /p > body > < / html > Código HTML 2.2: ola-mundo.html
Abra o arquivo ola-mundo.html em um navegador e veja o resultado. 4
www.k19.com.br
5
HTML
Semântica HTML De acordo com a especificação, cada tag possui um significado, isto é, o que o conteúdo de um determinado elemento representa. Muitos autores utilizam o termo semântica HTML ao se referirem ao uso correto dos significados de cada tag. Por exemplo: 1 2 3 4 5 6 7 8 9
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E x e mp l o d e u s o c o r r e to d a s e m â n t i ca H T ML < /title > head > < body >
E st e é u m t e x to p a ra m o st r ar o s i gn i fi c ad o d a t a g p . < /p > body > < / html > Código HTML 2.3: Exemplo de uso correto da semântica HTML
Neste exemplo utilizamos novamente a tag p e de acordo com a especificação o elemento p representa um parágrafo. Neste caso, o elemento de tag p foi utilizado de maneira correta. Vejamos outro exemplo: 1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > M eu s a m ig o s - S it e d o J on a s head > < body > < a d d r e s s> Ra fae l Co s en t in o ra fae l. co se nt ino @k 19 .com .br Sóci o f u nd ad or da K19 T r e in a m en t o s Av . B ri ga de ir o F ar ia Lima , 15 71 - J ar di m P au li st an o - Sã o P au lo , SP CEP 1452 - 1 a d d r e s s> < a d d r e s s> Ma rc el o Ma rt in s ma rc el o. ma rt ins @k 19 . com .br Sóci o f u nd ad or da K19 T r e in a m en t o s Av . B ri ga de ir o F ar ia Lima , 15 71 - J ar di m P au li st an o - Sã o P au lo , SP CEP 1452 - 1 a d d r e s s> body > < / html > Código HTML 2.4: Exemplo de uso incorreto da semântica HTML
Dessa vez utilizamos a tag address e, de acordo com a especificação, "O elemento address deve ser utilizada pelos autores para fornecer informações de contato de um documento ou para a maior parte de um documento. Este elemento normalmente aparece no início ou no final de um documento". Se observarmos o exemplo mais atentamente, trata-se de uma página do site do Jonas (repare no título da página), portanto provavelmente o autor da página é o Jonas e não o Rafael nem o Marcelo. Além disso, devemos evitar o uso da tag address para informar endereços postais a menos que ele seja relevante ao documento no qual ela foi inserida. www.k19.com.br
5
HTML
6
Parágrafos Os parágrafos dentro de um documento HTML, em geral, são representados através da tag p . Uma das características da tag p é que ela ocupa horizontalmente todo o espaço definido pelo elemento pai. Esse é o comportamento dos elementos de bloco que discutiremos com mais detalhes no tópico sobre CSS. Por enquanto o importante é termos em mente que, pelo fato da tag p se um elemento de bloco, o navegador irá ajustar o texto à largura do elemento pai realizando todas as quebras de linha necessárias. Caso seja necessário forçar uma quebra de linha no meio de um texto, podemos utilizar a tag br . Confira o exemplo: 1 2 3 4 5 6 7 8 9 1 11 12 13
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e q ue b ra d e l in h a e m u m p a rá g ra f o head > < body >
U m t e x t o b e m l o n go . L o ng o m e s mo ! E s te p a r á gr a f o s e r v e p a ra d e m o ns t r a r o c om po rt am et o da q ue br a de l in ha a ut om át ic a , ou seja , s em u ti li za r n enh um r ecu rs o pa ra que a q ueb ra oc orr a .< /p >
Já e st e p a rá g ra f o d e mo n st r a a q ub r a d e l in h a f or ç ad a .
P e r c e b e u ? < /p > body > < / html > Código HTML 2.5: Exemplo de quebra de linha em um parágrafo
Figura 2.2: Exemplo de quebra de linha em um parágrafo
6
www.k19.com.br
7
HTML
Exercícios de Fixação Crie um novo documento HTML, insira o código abaixo e salve-o com o nome p-quebra-delinha.html na pasta html . Em seguida abra o arquivo em um navegador (se necessário, redimensione a janela do navegador para verificar o comportamento da quebra de linha). 3
1 2 3 4 5 6 7 8 9 1 11 12 13
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e q ue b ra d e l in h a e m u m p a rá g ra f o head > < body >
U m t e x t o b e m l o n go . L o ng o m e s mo ! E s te p a r á gr a f o s e r v e p a ra d e m o ns t r a r o c om po rt am et o da q ue br a de l in ha a ut om át ic a , ou seja , s em u ti li za r n enh um r ecu rs o pa ra que a q ueb ra oc orr a .< /p >
Já e st e p a rá g ra f o d e mo n st r a a q ub r a d e l in h a f or ç ad a .
P e r c e b e u ? < /p > body > < / html >
Código HTML 2.6: p-quebra-de-linha.html
Cabeçalhos Assim como em um livro, uma página HTML pode conter uma hierarquia de títulos para estabelecer uma divisão de seu conteúdo. Para conseguirmos realizar essa tarefa devemos utilizar as tags de cabeçalho h1, h2, h3, h4, h5 e h6. Os sufixos numéricos de 1 a 6 indicam o nível do título dentro da hierarquia de títulos do documento. Veja o exemplo: 1 2 3 4 5 6 7 8 9 1 11 12 13 14
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E x e mp l o d e c a b e ça l h o s < /title > head > < body >
A t u al m en t e , p r a t ic a m e nt e t o do s o s s i s te m a s c o r p or a t i vo s p o s su e m i nt er fa ce s w eb . P ar a q ue m d es ej a a tu ar no m er ca do de d es en vo lv im en to de s of tw ar e , é o br ig at ór io o c on he ci me nt o d as l in gu ag en s: HTML , C SS e J av a S cr i pt .
E s s as l i n g ua g e n s s ã o u t i l iz a d as p a ra o d e s e nv o l v im e n t o d a c a m ad a d e a pr es en ta çã o da s a pl ic aç õe s w eb .
< h2 > P r é - r e q u i s i t o s < /h2 >F a m i l ia r i d ad e c o m a l g u m s i s te m a o p e r ac i o n al ( W i n d ow s / L i n ux / M a c O S X ) < /p >
L ó g ic a d e p r o g ra m a ç ão < /p > < h2 > A g e n d a < /h2 > < h3 > A o s d o m i ng o s < /h3 >
x x / xx / x x x x d a s 8 : à s 1 4 : < /p >
x x / xx / x x x x d a s 1 4 : à s 2 : < /p > < h3 > A o s s á b ad o s < /h3 >
x x / xx / x x x x d a s 8 : à s 1 4 : < /p >
x x / xx / x x x x d a s 1 4 : à s 2 : < /p > body > < / html >
Código HTML 2.8: cabecalhos-1.html
Imagine que você possua um site de culinária no qual você disponibiliza algumas receitas. Crie uma página com uma receita fictícia utilizando cabeçalhos para organizar o seu documento. Utilize quantos níveis de título achar necessário. 5
Links Normalmente um site é formado por um conjunto de páginas que estão interligadas de alguma forma. Para permitir que um usuágio navegue de uma página para outra devemos utilizar os links. Um link pode fazer a ligação de uma página para outra do mesmo site (link interno) ou para uma página de outro site (link externo). Para criarmos um link devemos utilizar a tag a . Porém, a tag a sem atributos não irá criar nenhum link interno ou externo. Para que um link seja criado devemos, no mínimo, utilizar o atributo href com o caminho relativo ou absoluto de uma outra página. Veja o exemplo: 1 2 3 4 5 6 7 8 9 1 11
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u s o d a t a g a < /title > head > < body >
E x e mp l o d e l i nk r e l at i v o < /a > p > O u t ro e x e mp l o d e l i n k r e l at i v o < /a > p > E x e mp l o d e l i n k a b s ol u t o < /a > p > body > < / html > A b re e m o u t r a j a n el a / a b a < /a > p > A b re n a m e s m a j a n el a < /a > p > A b re n a m e s m a j a n el a < /a > p > body > < / html > Código HTML 2.11: Exemplo de uso da tag a com o atributo target V e ja m a is i n f or m a ç õe s < /a > p > Â n c or a e m o u tr a p á g in a < /a > p > ... ... ... M a is i n f o rm a ç õ es < /a > ... ... ... ... ... ... body > < / html > te xt : < i n p ut t y pe=" t e x t " / > p as sw or d : < i n p ut t y pe=" p a s s w o r d " / > c he c k bo x es : < i n p ut t y pe=" c h e c k b o x " name =" c h e c k g r o u p " / > < i n p ut t y pe=" c h e c k b o x " name =" c h e c k g r o u p " / > < i n p ut t y pe=" c h e c k b o x " name =" c h e c k g r o u p " / > ra dio s : < i n p ut t y pe=" r a d i o " name =" c h e c k g r o u p " / > < i n p ut t y pe=" r a d i o " name =" c h e c k g r o u p " / > < i n p ut t y pe=" r a d i o " name =" c h e c k g r o u p " / > bu tto n : < i n p ut t y pe=" b u t t o n " value =" B o t ã o " / > su bmi t : < i n p ut t y pe=" s u b m i t " value =" E n v i a r " / > fi le : < i n p ut t y pe=" f i l e " / > rese t : < i n p ut t y pe=" r e s e t " value = " D e s c ar t a r a l t er a ç õ es " / > imag e : < input type =" i m a g e " sr c =" h t t p : / / w w w . k 1 9 . c o m . b r / c s s / i m g / m a i n - h e a d e r - l o g o . p n g" / > hi dde n : < i n p ut t y pe=" h i d d e n " value =" v a l or e s c on d i d o " / > S el e ci on e uma ci da de : < select > < o p t io n v a l ue=" s a o - p a u l o " > S ã o P a u lo < /option > < o p t io n v a l ue=" r i o - d e - j a n e i r o "> R i o d e J a n ei r o < /option > < o p t io n v a l ue=" p o r t o - a l e g r e " > P o r to A l e gr e < /option > < o p t io n v a l ue=" c u r i t i b a " > C u r i t i b a < /option > select > S el eci on e uma ou mais c ate gor ias de p ro dut os ( ma nt en ha a tec la " c o n t r o l " ( ou " c o m m a n d " n o M ac ) p r es s io n ad a p ar a e s co l he r m ai s d e u ma c at e go ri a ) : < s e l e c t m u l t i p l e= " m u l t i p l e "> < o p t io n v a l ue=" d e s k t o p s " > D e s k t o p s < /option > < o p t io n v a l ue=" n o t e b o o k s " > N o t e b o o k s < /option > < o p t io n v a l ue=" t a b l e t s "> T a b l e t s < / option > < o p t io n v a l ue=" c e l u l a r e s " > C e l u l a r e s < /option > select > S el e ci on e uma ci da de : < select > < o p t g r o u p l a b e l=" R e g i ão S u d es t e "> < o p t io n v a l ue=" s a o - p a u l o "> S ã o P a ul o < /option > < o p t io n v a l ue=" r i o - d e - j a n e i r o "> R i o d e J a n ei r o < /option > o p t g r o u p> < o p t g r o u p l a b e l=" R e g i ão S u l "> < o p t io n v a l ue=" p o r t o - a l e g r e "> P o r to A l e gr e < /option > < o p t io n v a l ue=" c u r i t i b a "> C u r i t i b a < / option > o p t g r o u p> select > S el eci on e uma ou mais c ate gor ias de p ro dut os ( ma nt en ha a tec la " c o n t r o l " ( ou " c o m m a n d " n o M ac ) p r es s io n ad a p ar a e s co l he r m ai s d e u ma c at e go ri a ) : < s e l e c t m u l t i p l e= " m u l t i p l e "> < o p t g r o u p l a b e l=" D e m e s a "> < o p t io n v a l ue=" d e s k t o p s "> D e s k t o p s < / option > o p t g r o u p> textarea : < t e x t a r e a> a> < l a b el el f o r= r= " n o m e " > N o m e : < /label / label > < i n p ut ut t y pe pe = " t e x t " id = " n o m e " / > O l á m u n do ! < /p > O l á m u nd o n o v am e n t e ! < /p > body > < / html > Código HTML 3.1: Exemplo de aplicação das propriedades CSS inline O l á m u nd o ! < /p > O l á m u nd o n o v am e n t e ! < /p > body > < / html > O l á m u nd o ! < /p > O l á m u nd o n o v am e n t e ! < /p > body > < / html > < /p > body > < / html > Código HTML 4.1: Inserindo código JavaScript em um documento HTML C om e st a r e ce i ta v oc ê s e t o rn a rá u m p r of i ss i on a l n a a rt e d e pr ep ar ar um m ac a rr ão in s ta n t ân e o . M a c a rr ã o i n s ta n t â ne o d e s u a m a r ca f a v or i t a < /p > 6 ml d e á g ua < /p > < h2 > M o do d e p r e pa r o < /h2 > < h3 > N o m i c r oo n d as < /h3 > I ns i ra o m a ca r rã o i n st a nt â ne o e m u m r e ci p ie n te c om 6 m l d e á gu a e p ro gr am e o mi cr oo nd as p or 6 mi nu to s. A pe rt o o bo tã o in ic ia r ou eq u i va l e nt e . U t i li z e u m r e c i pi e n t e q u e p e r mi t a o m a c ar r ã o f i c a r t o t a lm e n te s u b me r s o na água . Q u a nd o o u vi r o b i p n ã o s a ia c o r re n d o . O m i c ro o n d as n ã o i r á e x pl o di r , p oi s o bi p s ig ni fi ca qu e o ma ca rr ão es tá pr on to . F er v a a á gu a e m u ma p an e la . < /p > I n s ir a o m a c a rr ã o e c o zi n he - o p o r 3 m i n ut o s < /p > < h4 > P o n to i m p o rt a n t e < /h4 > U t i li z e u m a p a n e l a q u e p e r m i t a o m a c ar r ã o f i ca r t o t a lm e n t e s u b m e r s o na água . N ão s e d i st r ai a c om a t e le v is ã o o u q u al q ue r o u tr a c oi sa . V oc ê p o de rá qu eim ar a sua re f ei çã o L i nk e x t er n o < /a > p > L i nk i n t er n o < /a > p > L i nk i n t er n o < /a > p > L i nk i n t er n o < /a > < /p > body > < / html > Código HTML 2.12: Resposta do exercício - pagina1.html S o b re o t e xt o d e s sa p á g in a < /a > p > L o r em i p s um d o lo r s i t a m e t , c o n s ec t e t ur a d i pi s c i ng e l i t . D o n e c j u s t o massa , so da le s sit amet e le if en d a , el eme ntu m eu nibh . Don ec e ge st as do lor quis t ur pis di ct um t in ci d un t . Don ec bl an di t t em pus velit , sit amet ad ipi sci ng veli t c ons equ at pl ac era t. C ur abi tu r id ma uri s fa cil is is dui i ac ul is a uct or quis vel lacu s. Ve sti bu lu m ante ips um p ri mis in f au ci bu s orci l uc tus et ul t ri ce s po su er e cu bi li a C urae ; Ut au cto r diam in ma gna f eu gi at in va riu s l ig ula f au ci bus . Su sp en di ss e te mp or mi nec sem fe rm ent um ma le sua da . In sit amet enim vel leo bi be ndu m cur su s. Cu rab it ur nec velit at nisi i m pe r di et la cin ia . Ut quis arcu at nisl o rna re v ive rr a . Duis vel tr is tiq ue tel lus . Ma ec en as ul tr ice s pl ac era t tor to r. P el le nte sq ue fe ug iat a c cu ms an c om mo do . P roin non urna justo , id p u lv in ar la cus . D on e c d i ct um s em u t o rc i o r na r e u l tr i ce s . C ra s b l an d it n ib h s ed e ro s s u sc ip it in f eu gi at nunc t i nc id u nt . Pr ae s en t sem pe r lo rem sed i psum ← placerat po rta . In arcu massa , di gn i ss i m ut el em e nt u m nec , lu ctu s nec sem . Nam ut pu rus urna . Cla ss a pt ent ta ci ti so cio sq u ad l it ora t or qu ent per c on ub ia nostra , per i nc ep tos h ime na eos . C ur ab itu r f er men tum d ap ib us u ll am co rp er . V iv am us ante tellus , f aci li sis v itae i nt er du m eget , m oll is eget ips um .< /p > P r a es e n t d a p i b u s r i s u s e u q u am e g e st a s u l t r ic i e s . N u n c s e d a r c u p u ru s . I nt eg er vehicula , nisl sit amet t in ci dun t accumsan , nisi f elis v en ena ti s ← ante, non a uct or feli s t ell us te mpo r quam . P el le nt es qu e la or ee t fe ug ia t l acus ac co nv all is . V es ti bu lum quis el eme ntu m ero s. Q ui sq ue conval lis , j usto nec c ong ue consequ at , nisl f elis d api bu s mi , vel f ac il isi s ris us enim ut ← turpis. Nam r ho nc us tu rp is at nibh vu l pu t at e nec pl a ce ra t nib h a liq ua m . A e n ea n v e s t ib u l u m p u r u s e g e t n u nc v a r iu s t e m po r . N u l la p l a ce r a t s u s c i p i t m i fe rm ent um mat tis . A en ean id fe ug ia t eros . Don ec tr is tiq ue lib er o nec ← sapien e l ei fe nd vel vu l pu t at e nib h f ac i li s is . P el l e n te s q ue d olor massa , ← c o n v al l i s e u l obo rt is sed , fe rme ntu m eu lec tus . Ma ec en as eget m etus tellus , non dic tu m erat . Sed al iq ua m lo bo rt is nunc , in c on se ct etu r ri sus al iq ue t et . F usce ← quam arcu , t in ci dun t quis pe ll en te sq ue sit amet , t em pus eu nulla . P el le nt es qu e ante diam , t r i st iq ue a di ctu m nec , rut rum sed ma ur is . Cum so cii s na to que pe na tib us et m agn is dis p ar tu ri ent montes , n asc et ur ri di cul us mus . In te ge r nunc sapien , bi be n du m et m att is sit amet , p u lv in ar ut mi . P e l le n t es q u e h abi ta nt mo rbi t ri st iqu e s en ec tus et netu s et m al esu ada fam es ac t urp is e ge st as . Nunc al iq uet l ibe ro sed dui eu is mo d so da le s .< /p > O texto des sa pág ina foi ge ra do at ra vé s do site : h t t p : / / w w w . l i p s u m . c o m / < /a > S o b re o t e xt o d e s sa p á g in a < /a > p > Â n c or a e m o u tr a p á g in a < /a > p > L o r em i p s um d o lo r s i t a m e t , c o n s ec t e t ur a d i pi s c i ng e l i t . D o n e c j u s t o massa , so da le s sit amet e le if en d a , el eme ntu m eu nibh . Don ec e ge st as do lor quis t ur pis di ct um t in ci d un t . Don ec bl an di t t em pus velit , sit amet ad ipi sci ng veli t c ons equ at pl ac era t. C ur abi tu r id ma uri s fa cil is is dui i ac ul is a uct or quis vel lacu s. Ve sti bu lu m ante ips um p ri mis in f au ci bu s orci l uc tus et ul t ri ce s po su er e cu bi li a C urae ; Ut au cto r diam in ma gna f eu gi at in va riu s l ig ula f au ci bus . Su sp en di ss e te mp or mi nec sem fe rm ent um ma le sua da . In sit amet enim vel leo bi be ndu m cur su s. Cu rab it ur nec velit at nisi i m pe r di et la cin ia . Ut quis arcu at nisl o rna re v ive rr a . Duis vel tr is tiq ue tel lus . Ma ec en as ul tr ice s pl ac era t tor to r. P el le nte sq ue fe ug iat a c cu ms an c om mo do . P roin non urna justo , id p u lv in ar la cus . D on e c d i ct um s em u t o rc i o r na r e u l tr i ce s . C ra s b l an d it n ib h s ed e ro s s u sc ip it in f eu gi at nunc t i nc id u nt . Pr ae s en t sem pe r lo rem sed i psum ← placerat po rta . In arcu massa , di gn i ss i m ut el em e nt u m nec , lu ctu s nec sem . Nam ut pu rus urna . Cla ss a pt ent ta ci ti so cio sq u ad l it ora t or qu ent per c on ub ia nostra , per i nc ep tos h ime na eos . C ur ab itu r f er men tum d ap ib us u ll am co rp er . V iv am us ante tellus , f aci li sis v itae i nt er du m eget , m oll is eget ips um .< /p > P r a es e n t d a p i b u s r i s u s e u q u am e g e st a s u l t r ic i e s . N u n c s e d a r c u p u ru s . I nt eg er vehicula , nisl sit amet t in ci dun t accumsan , nisi f elis v en ena ti s ← ante, non a uct or feli s t ell us te mpo r quam . P el le nt es qu e la or ee t fe ug ia t l acus ac co nv all is . V es ti bu lum quis el eme ntu m ero s. Q ui sq ue conval lis , j usto nec c ong ue consequ at , nisl f elis d api bu s mi , vel f ac il isi s ris us enim ut ← turpis. A e n ea n v e s t ib u l u m p u r u s e g e t n u nc v a r iu s t e m po r . N u l la p l a ce r a t s u s c i p i t m i fe rm ent um mat tis . A en ean id fe ug ia t eros . Don ec tr is tiq ue lib er o nec ← sapien e l ei fe nd vel vu l pu t at e nib h f ac i li s is . P el l e n te s q ue d olor massa , ← c o n v al l i s e u l obo rt is sed , fe rme ntu m eu lec tus . Ma ec en as eget m etus tellus , non dic tu m erat . Sed al iq ua m lo bo rt is nunc , in c on se ct etu r ri sus al iq ue t et . F usce ← quam arcu , t in ci dun t quis pe ll en te sq ue sit amet , t em pus eu nulla . P el le nt es qu e ante diam , t r i st iq ue a di ctu m nec , rut rum sed ma ur is . Cum so cii s na to que pe na tib us et m agn is dis p ar tu ri ent montes , n asc et ur ri di cul us mus . In te ge r nunc sapien , bi be n du m et m att is sit amet , p u lv in ar ut mi . P e l le n t es q u e h abi ta nt mo rbi t ri st iqu e s en ec tus et netu s et m al esu ada fam es ac t urp is e ge st as . Nunc al iq uet l ibe ro sed dui eu is mo d so da le s .< /p > O texto des sa pág ina foi ge ra do at ra vé s do site : h t t p : / / w w w . l i p s u m . c o m / < /a > L o r em i p s um d o lo r s i t a m e t , c o n s ec t e t ur a d i pi s c i ng e l i t . D o n e c j u s t o massa , so da le s sit amet e le if en d a , el eme ntu m eu nibh . Don ec e ge st as do lor quis t ur pis di ct um t in ci d un t . Don ec bl an di t t em pus velit , sit amet ad ipi sci ng veli t c ons equ at pl ac era t. C ur abi tu r id ma uri s fa cil is is dui i ac ul is a uct or quis vel lacu s. Ve sti bu lu m ante ips um p ri mis in f au ci bu s orci l uc tus et ul t ri ce s po su er e cu bi li a C urae ; Ut au cto r diam in ma gna f eu gi at in va riu s l ig ula f au ci bus . Su sp en di ss e te mp or mi nec sem fe rm ent um ma le sua da . In sit amet enim vel leo bi be ndu m cur su s. Cu rab it ur nec velit at nisi i m pe r di et la cin ia . Ut quis arcu at nisl o rna re v ive rr a . Duis vel tr is tiq ue tel lus . Ma ec en as ul tr ice s pl ac era t tor to r. P el le nte sq ue fe ug iat a c cu ms an c om mo do . P roin non urna justo , id p u lv in ar la cus . D on e c d i ct um s em u t o rc i o r na r e u l tr i ce s . C ra s b l an d it n ib h s ed e ro s s u sc ip it in f eu gi at nunc t i nc id u nt . Pr ae s en t sem pe r lo rem sed i psum ← placerat po rta . In arcu massa , di gn i ss i m ut el em e nt u m nec , lu ctu s nec sem . Nam ut pu rus urna . Cla ss a pt ent ta ci ti so cio sq u ad l it ora t or qu ent per c on ub ia nostra , per i nc ep tos h ime na eos . C ur ab itu r f er men tum d ap ib us u ll am co rp er . V iv am us ante tellus , f aci li sis v itae i nt er du m eget , m oll is eget ips um .< /p > P r a es e n t d a p i b u s r i s u s e u q u am e g e st a s u l t r ic i e s . N u n c s e d a r c u p u ru s . I nt eg er vehicula , nisl sit amet t in ci dun t accumsan , nisi f elis v en ena ti s ← ante, non a uct or feli s t ell us te mpo r quam . P el le nt es qu e la or ee t fe ug ia t l acus ac co nv all is . V es ti bu lum quis el eme ntu m ero s. Q ui sq ue conval lis , j usto nec c ong ue consequ at , nisl f elis d api bu s mi , vel f ac il isi s ris us enim ut ← turpis. Nam r ho nc us tu rp is at nibh vu l pu t at e nec pl a ce ra t nib h a liq ua m . A e n ea n v e s t ib u l u m p u r u s e g e t n u nc v a r iu s t e m po r . N u l la p l a ce r a t s u s c i p i t m i fe rm ent um mat tis . A en ean id fe ug ia t eros . Don ec tr is tiq ue lib er o nec ← sapien e l ei fe nd vel vu l pu t at e nib h f ac i li s is . P el l e n te s q ue d olor massa , ← Se v oc ê c h eg o u a qu i d eu t ud o c er to ! : ) body > < / html > t ex ta re a : < t e x t a r e a> t e x t a r e a> < l a b el f o r=" n o m e " > N o m e : < /label > < i n p ut t y pe=" t e x t " id = " n o m e " / > < l a b el f o r=" s e n h a " > S e n h a : < /label > < i n p ut t y pe=" p a s s w o r d " id = " s e n h a " / > Se xo : < l a b el f o r=" m e n s a g e m " > M e n s a g e m : < /label > < t e x ta r e a i d= " m e n s a g e m "> t e x t a r e a>
www.k19.com.br
9
HTML
10
Código HTML 2.10: Exemplo de uso da tag a
Além do atributo href podemos utilizar atributo target no qual informamos onde iremos abrir o documento. Os possíveis valores para o atributo target são: • _blank - em uma nova janela ou aba • _self - na mesma janela ou frame do documento que contém o link • _parent - em um frame que seja o "pai"do frame no qual o link se encontra • _top - na mesma janela do documento que contém o link Ao testar os valores acima, logo percebemos que _self e _top possuem o mesmo comportamento se a página que contém o link não estiver em um frame. Caso o link esteja em um frame e com o valor _top no atributo target , o link será aberto na janela na qual o frame se encontra. Se o valor for _self, o link será aberto no próprio frame. Dentro de uma única página podemos ter diversos frames e, às vezes, queremos que um link de um determinado frame seja aberto em outro. Para realizarmos tal tarefa devemos inserir como o valor do atributo target o nome do frame no qual o link será aberto. O comportamento padrão de um link é abrir o documento na mesma página ou frame caso o atributo target não seja utilizado. 1 2 3 4 5 6 7 8 9 1 11
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u s o d a t a g a c om o a t ri b ut o t a rg e t head > < body >
Importante Ao longo da evolução do HTML as tags frame e iframe foram caindo em desuso até que no HTML5 foram totalmente retiradas da especificação. Contudo a grande maioria dos navegadores ainda interpretam as duas tags corretamente mesmo dentro de um documento HTML5, porém devemos nos lembrar que ainda estamos num momento de transição para o HTML5. Logo, para evitar problemas no futuro, evite o uso das tags frame e iframe ao máximo.
Exercícios de Fixação Crie um documento HTML dentro da pasta html e em seu corpo crie quatro links: um que aponte para uma página externa e outros três que apontem para uma página interna de maneiras diferentes. Lembre-se de criar também a página para a qual o seu link interno irá apontar. 6
10
www.k19.com.br
11
HTML
Exercícios Complementares Pesquise na internet como criar um iframe dentro de um documento HTML. Em seguida crie uma página com alguns links e um iframe . Crie também alguns links na página contida pelo iframe . Para cada link em ambas as páginas utilize valores diferentes para o atributo target e observe os resultados. 1
Âncoras Além de criar links para outras páginas o HTML nos permite criar links para uma determinada seção dentro da própria página na qual o link se encontra ou dentro de outra página. Esse recurso chama-se ancoragem , pois as seções para as quais queremos criar um link devem possuir uma âncora . Para criarmos uma âncoradevemos utilizar novamente a tag a,porémsemoatributo href. Dessa vez utilizaremos o atributo name para identificar a seção através de um nome. O link também muda levemente, pois agora ao invés de passar somente o nome do arquivo da página como valor do atributo href devemos passar o nome da seção prefixada com o caractere #. 1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u s o d a t a g a c om o â nc o ra < /title > head > < body >
Lembre-se Até a versão 4 do HTML e no XHTML a especificação dizia para utilizarmos o atributo name para criarmos as âncoras. Porém, no HTML5, a recomendação do W3C é que se utilize o atributo id. Desenvolvedores mais preocupados em estar sempre atualizados podem ficar tranquilos e utilizar somente o atributo id ao invés do name, pois os navegadores mais modernos conseguem interpretar o uso de ambos os atributos em qualquer versão do HTML. www.k19.com.br
11
HTML
12
Exercícios de Fixação Crie um documento HTML que contenha um link que aponta para uma âncora dentro da própria página. Dica: insira um conteúdo suficientemente grande para que a barra de rolagem vertical do navegador apareça e coloque a âncora no final da página. 7
Continuando o exercício anterior, crie um novo link que aponte para uma âncora localizada em outra página. Crie uma página com uma âncora para a qual o link que você acabou de criar irá apontar. 8
Imagens Provavelmente os sites na internet seriam muito mais entediantes se não fosse possível adicionar algumas imagens ao conteúdo das páginas. Como não queremos que as nossas páginas fiquem muito monónotonas, neste capítulo iremos utilizar a tag img e melhorar um pouco a aparência das páginas com algumas imagens. A tag img possui o atributo src que utilizaremos para informar qual imagem queremos carregar dentro de um documento HTML. O valor do atributo pode ser o caminho absoluto ou relativo de uma imagem. 1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u s o d a t a g i mg < /title > head > < body > K 1 9 T r e i na m e n to s < /h1 > < i m g s r c =" h t t p : / / w w w . k 1 9 . c o m . b r / c s s / i m g / m a i n - h e a d e r - l o g o . p n g" / >
C u r s o s < /h2 >
/>
/>
/>
/>
/>
Código HTML 2.18: Exemplo de uso da tag img
12
www.k19.com.br
13
HTML
Figura 2.4: Exemplo de uso da tag img
Exercícios de Fixação Escolha uma ou mais imagens quaisquer no computador ou na internet. Crie um documento HTML que contenha um ou mais elementos com a tag img para exibir as imagens escolhidas. 9
Tabelas Suponha que você esteja desenvolvendo o site de uma empresa que necessita divulgar alguns relatórios em uma de suas páginas. Existe uma grande chance que os dados dos relatórios venham de planilhas eletrônicas. Como os navegadores interpretam apenas código HTML, você ficará encarregado de tranferir para o formato HTML as informações dos relatórios que estão no formato da planilha eletrônica. Surge aí uma necessidade: exibir no navegador um conjunto de informações de forma organizada. Para resolver esse problema temos a tag table do HTML que nos premite apresentar um con junto de dados em forma de tabelas. Veja o exemplo: 1 2 3 4 5
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u so d a t ag t ab l e head >
www.k19.com.br
13
HTML 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35
14 < body > C a r r o s < /h1 >
< table > M a r c a < /th > M o d e l o < /th > A n o < /th > tr > T o y o t a < /td > C o r o l l a < /td > 2 1 < /td > tr > H o n d a < /td > C i v i c < /td > 2 1 1 < /td > tr > M i t s u b i s h i < /td > L a n c e r < /td > 2 1 2 < /td > tr >
Figura 2.5: Exemplo de uso da tag table
14
www.k19.com.br
15
HTML
Perceba que a tag table não é utilizada sozinha. Ela necessita pelo menos um ou mais elementos com a tag tr que, por sua vez, necessita de pelo menos um ou mais elementos com a tag th ou td. O que significam essas tags?
• tr - define uma linha da tabela
• th - define uma célula de cabeçalho
• td - define uma célula
Existe uma outra forma de criar a mesma tabela: 1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u so d a t ag t ab l e head > < body > C a r r o s < /h1 > < table > < thead >
thead > < tfoot > M a r c a < /th > M o d e l o < /th > A n o < /th > tfoot > < tbody > T o y o t a < /td > C o r o l l a < /td > 2 1 < /td > H o n d a < /td > C i v i c < /td > 2 1 1 < /td > tbody > table > body > < / html > M i t s u b i s h i < /td > L a n c e r < /td > 2 1 2 < /td >
Código HTML 2.21: Exemplo de uso da tag table
www.k19.com.br
15
HTML
16
Figura 2.6: Exemplo de uso da tag table
Repare que visualmente não mudou absolutamente nada. Além disso, apareceram mais algumas tags: thead , tfoot e tbody. O que significam essas tags? • thead - define o cabeçalho da tabela • tfoot - define o rodapé da tabela • tbody - define o corpo da tabela Por que complicar? Qual o motivo da existência dessas tags? • A tag thead, assim como a tfoot, servem para agrupar as linhas de cabeçalho e de rodapé, respectivamente. • O código fica mais claro. • Facilita a aplicação de estilos CSS (através do seletor de elemento) • Pode permitir que o conteúdo do corpo da tabela possua rolagem*. • Ao imprimir a página com uma tabela muito extensa, pode permitir que o cabeçalho e rodapé sejam replicados em todas as páginas*. * Esses recursos podem existir ou não, pois os desenvolvedores de navegadores podem decidir não implementá-los. Esses recursos são sugestões da especificação. 16
www.k19.com.br
17
HTML
Outros dois atributos importantes para a construção de tabelas são colspan e rowspan que podem ser aplicados nos elementos com a tag td e th. Como podemos observar nos exemplos dados, o atributo colspan faz com que a célula ignore o número de colunas definidas em seu valor. Analogamente, o atributo rowspan faz o mesmo, porém com linhas.
Exercícios de Fixação 10
Crie uma página que contenha uma tabela de acordo com a imagem abaixo:
Figura 2.7: Exercício para a tag table
As linhas vermelhas foram colocadas na imagem apenas para facilitar a visualização do problema.
Listas Em um documeno HTML podemos ter três tipos de listas e cada uma delas deve ser utilizada de acordo com a sua semântica, ou seja, você deve escolher um tipo de l ista para cada situação. Os três tipos possíveis de listas são: • Lista de definição - utilizada para exibir definições de termos. Funciona como nos dicionários, www.k19.com.br
17
HTML
18
no qual temos uma palavra e em seguida o seu significado.
• Lista ordenada - utilizada para exibir qualquer conteúdo de forma ordenada.
• Lista sem ordem - utilizada para exibir qualquer conteúdo sem ordenação.
Lista de definição
Para criarmos uma lista de definição devemos utilizar a tag dl. O elemento com a tag dl deve possuir pelo menos um filho com a tag dt seguido de um elemento com a tag dd, isto é, um item na lista de definição é composto por um par de elementos com as tags dt e dd. 1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u s o d a t a g d l head > < body > K 1 9 T r e i na m e n to s < /h1 >
C u r s o s < /h2 >
body > < / html >
Código HTML 2.23: Exemplo de uso da tag dl
18
www.k19.com.br
19
HTML
Figura 2.8: Exemplo de uso da tag dl
Exercícios de Fixação Crie um documento HTML que contenha o cardápio de um restaurante com os nomes dos seus pratos e uma breve descrição sobre os mesmos. 11
Lista ordenada Para criarmos uma lista ordenada devemos utilizar a tag ol. O elemento com a tag ol deve possuir pelo menos um filho com a tag li. 1 2 3 4 5 6 7 8 9 1 11 12 13 14 15
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u s o d a t a g o l head > < body > K 1 9 R e c ei t a s < /h1 >
M a c a rr ã o i n s t an t â n eo < /h2 >
M o d o d e p r e pa r o < /h3 >
body > < / html > Código HTML 2.25: Exemplo de uso da tag ol
www.k19.com.br
19
HTML 16 17 18 19
20
Figura 2.9: Exemplo de uso da tag ol
Exercícios de Fixação Crie um documento HTML que contenha um manual que explica passo-a-passo o uso de um caixa eletrônico para a operação de saque. 12
Lista sem ordem Para criarmos uma lista sem ordem devemos utilizar a tag ul. O elemento com a tag ul deve possuir pelo menos um filho com a tag li. 1 2 3 4 5 6
20
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u s o d a t a g d l head > < body >
www.k19.com.br
21 7 8 9 1 11 12 13 14 15 16
HTML K 1 9 T r e i na m e n to s < /h1 >
K 2 - D e se n vo l vi m en t o W eb c om H TM L , C SS e J a va S cr i pt < /h2 >
P r é - r e q u i s i t o s < /h3 >
body > < / html > Código HTML 2.27: Exemplo de uso da tag ul
Figura 2.10: Exemplo de uso da tag ul
Exercícios de Fixação 13
Crie um documento HTML que contenha a lista dos cursos da Formação Básica da K19.
Formulário Para trazermos um pouco mais de interatividade para as nossas páginas podemos utilizar os elementos de formulário. Esses elementos recebem algum tipo de entrada do usuário, seja através de um clique ou digitando algum valor. www.k19.com.br
21
HTML
22
A tag input A tag input permite que o elemento que a contenha assuma diversas formas dependendo do seu atributo type. O atributo type pode receber os seguintes valores: • text - cria uma caixa de texto de uma linha. • password - cria uma caixa de texto de uma linha escondendo os caracteres digitados. • checkbox - cria uma caixa que assume dois estados: checado e "deschecado". Em conjunto com o atributo name é possível que se crie um grupo de checkboxes no qual um ou mais checkboxes seja "checado". • radio - cria uma caixa que assume dois estados: checado e "deschecado". Em conjunto com o atributo name é possível que se crie um grupo de radios no qual apenas um radio seja "checado". • button - cria um botão. Através do atributo value definimos o texto do botão. • submit - cria um botão para o envio do formulário. Através do atributo value definimos o texto do botão. • file - cria um botão que, ao ser clicado, abre uma caixa de diálogo paraa escolha de um arquivo no computador do usuário. • reset - cria um botão que descarta todas as alterações feitas dentro de um formulário. Através do atributo value definimos o texto do botão. • image - cria um botão para o envio do formulário. Dese ser utilizado em conjunto com o atributo src para que uma imagem de fundo seja utilizada no botão. • hidden - cria um elemento que não fica visível para o usuário, porém pode conter um valor que será enviado pelo formulário. Existem outros valores possíveis para o atributo type, porém eles fazem parte da especificação do HTML5 e nem todos os navegadores suportam tais valores. 1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26
22
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u so d a t ag i np u t head > < body > < f o rm a c t io n= " p a g i n a . h t m l " method = " g e t " >
www.k19.com.br
23 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55
HTML
Figura 2.11: Exemplo de uso da tag input
www.k19.com.br
23
HTML
24
A tag select
A tag select permite ao usuário escolher um ou mais itens de uma lista. O atributo multiple , quando presente, informa ao navegador que mais de um item pode ser selecionado. A lista de itens deve ser informada através de elementos com a tag option . Tais elementos devem ser filhos diretos ou indiretos do elemento com a tag select. Além disso, cada item pode conter o atributo value para informar o valor associado a uma determinada opção. 1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u so d a t ag s e le c t head > < body > < f o rm a c t io n= " p a g i n a . h t m l " method = " g e t " >
Código HTML 2.30: Exemplo de uso da tag select
24
www.k19.com.br
25
HTML
Figura 2.12: Exemplo de uso da tag select
Caso exista a necessidade de agrupar as opções de um elemento com a tag select , podemos utilizar utilizar a tag optgroup em conjunto com o atributo label . Veja o exemplo: 1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u so d a t ag s e le c t head > < body > < f o rm a c t io n= " p a g i n a . h t m l " method = " g e t " >
www.k19.com.br
25
HTML 3 31 32 33 34 35 36 37 38 39
26
< o p t g r o u p l a b e l= l = " P o r t á t e i s "> "> < o p t io io n v a l ue ue = " n o t e b o o k s "> " > N o t e b o o k s < / option > < o p t io io n v a l ue ue = " t a b l e t s "> " > T a b l e t s < /option / option > < o p t io io n v a l ue ue = " c e l u l a r e s "> " > C e l u l a r e s < / option > < / o p t g r o u p> p> < / select >
Figura 2.13: Exemplo de uso da tag select
A tag textarea A tag textarea exibe uma caixa de texto na qual o usuário poderá inserir um texto qualquer. A diferença para a tag input com o atributo atributo type com o valor text é que a tag textarea permite permite a inserção de textos mais longos e com quebras de linha. 1 2 3 4 5 6 7 8 9 1
26
< html > < head > < meta h t t p - e q u i v ="Content = "Content -Type" c o n t e n t= t = " t e x t / h tm tm l ; c h a rs rs e t = U TF TF - 8 "> "> < title > E xe x e m pl pl o d e u so so d a t ag a g t e xt xt a re re a < /title /title > head > < body > < f o rm rm a c t io io n= n = " p a g i n a . h t m l " method = " g e t " >
www.k19.com.br
27 11 12 13 14 15
HTML < / t e x t a r e a> a>
Figura 2.14: Exemplo de uso da tag textarea
Exer Exercíc cícios ios de Fixa Fixação ção Crie Crie um docu docume ment nto o HTML HTML com com formu formulá lári rio o que que cont conten enha ha uma uma caix caixaa de text texto o que que acei aceite te mais mais de uma linha. 14
A tag label Em alguns dos exemplos anteriores foram inseridos textos ao lado dos elementos de formulário apresentados. Podemos pensar nesses textos como rótulos de cada elemento e é exatamente para esse fim que devemos utilizar a tag label do HTML. Além de servir como rótulo, a tag label auxi auxilia lia o usuá usuário rio a inte intera ragi girr com com os elem elemen ento toss do form formuulário. Utilizando o atributo for podemos fazer com que um elemento do formulário receba o foco. Veja Veja o exemplo: www.k19.com.br
27
HTML 1 2 3 4 5 6 7 8 9 1 11 12 13 14
28
< html > < head > < meta h t t p - e q u i v ="Content = "Content -Type" c o n t e n t= t = " t e x t / h tm tm l ; c h a rs rs e t = U TF TF - 8 "> "> < title > E xe x e m pl pl o d e u so so d a t ag a g l ab a b e l head > < body > < f o rm rm a c t io io n= n = " p a g i n a . h t m l " method = " g e t " >
Figura 2.15: Exemplo de uso da tag label
Repa Repare re que que o atri atribu buto to for da tag tag label deve deve cont conter er um valo valorr igua iguall ao do atri atribu buto to id do element elemento o que desejamos focar f ocar..
Exer Exercíc cícios ios de Fixa Fixação ção Crie Crie um docu docume ment nto o HTML HTML com com dive divers rsos os ele eleme ment ntos os de form formulá ulário rio e para para cada cada elem element ento o crie crie um rótulo. Cada rótulo deve focar o elemento de formulário correspondente. 15
28
www.k19.com.br
29
HTML
A tag form Desde o momento em que começamos a falar sobre os elementos de formulário utilizamos a tag form, porém não falamos nada sobre ela. A tag form irá definir, de fato, o nosso formulário. Todos os elementos de formulário que vimos anteriormente devem ser filhos diretos ou indideros de um elemento com a tag form para que os dados vinculados a esses elementos sejam enviados. O papel do formulário é enviar os dados contidos nele para algum lugar, mas para onde? O atributo action é quem diz para onde os dados de um formulário deve ser enviado. Além disso, devemos informar a maneira como queremos que esses dados sejam enviados, ou seja, se queremos que eles sejam enviados através de uma requisição do tipo GET ou POST (métodos de envio definidos no protocolo HTTP).
www.k19.com.br
29
HTML
30
30
www.k19.com.br
O L U T Í P A
CSS
C
3
Até o momento trabalhamos apenas com os elementos HTML sem nos preocuparmos com a questão visual dos mesmos. Durante os exemplos mostrados no capítulo anterior, cada elemento estava utilizando a formatação padrão fornecida pelo navegador. A formatação padrão pode variar de navegador para navegador, pois apesar de todos os navegadores tentarem seguir as sugestões do W3C, às vezes ocorrem erros de interpretação da especificação ou erros de implementação. Além disso, o W3C sugere, ou seja, não obriga. Portanto, seria uma boa prática formatarmos cada elemento para que o efeito visual seja o mesmo em todos os navegadores. E esse não é o único motivo, pois na grande maioria das vezes, desejamos aplicar em nossas páginas um design único, com a identidade visual da nossa empresa ou cliente. Os elementos HTML possuem alguns atributos para formatarmos a sua aparência, porém, além de serem limitados, o uso desses atributos estão caindo em desuso. Inclusive existem elementos cuja única função é alterar a aparência de um texto, por exemplo. Contudo, esses elementos também cairam em desuso e provavelmente não estarão nas próximas especificações do HTML. Para alterarmos o aspecto visual dos elementos do HTML, o W3C recomenda que utilizemos o CSS (Cascading Style Sheets - Folhas de Estilo em Cascata). Atualmente o CSS encontra-se em sua terceira versão, porém nem todos os navegadores implementaram todos os novos recursos. Podemos aplicar o CSS de três formas em um documento HTML: • Definindo as propriedades CSS diretamente no elemento HTML através do seuatributo style. • Definindo as regras CSS dentro de um elemento com a tag style . • Definindo as regras CSS em arquivo à parte do documento HTML. Mas o que são essas regras e propriedades? Como elas são definidas? Propriedade CSS é uma característica visual de um elemento HTML. Já a regra é um conjunto de propriedades definidas para um elemento ou para um grupo de elementos HTML. Vamos ver um exemplo de aplicação das propriedades CSS diretamente em um elemento HTML: 1 2 3 4 5 6 7 8 9 1
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E x e mp l o d e C S S d i r e t a m en t e e m u m e l e m e n t o < /title > head > < body >
www.k19.com.br
31
CSS
32
Figura 3.1: Exemplo de aplicação das propriedades CSS inline
Quando utilizamos as propriedades CSS diretamente em um elemento, dizemos que aplicando o CSS inline . Essa prática não é recomendada, pois dessa forma não é possível reaproveitar o código CSS, além de dificultar a leitura do código HTML. Vamos ver agora a aplicação das regras CSS utilizando a tag style : 1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e a p li c aç ã o d as r eg r as C SS a t ra v és d a t ag s ty le < /title > < s t y le t y pe=" t e x t / c s s "> p { font - size : 4 px ; co lor : # f f ; } style > head > < body >
Código HTML 3.2: Exemplo de aplicação das regras CSS através da tag style
32
www.k19.com.br
33
CSS
Figura 3.2: Exemplo de aplicação das regras CSS através da tag style
Como vimos anteriormente, também podemos definir as regras CSS em um arquivo à parte. Com esse arquivo em mãos, dentro de um documento HTML, para indicarmos qual o arquivo que contém as regras CSS, devemos utilizar a tag link. Veja o exemplo: 1 2 3 4 5 6 7 8 9 1 11
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e a p li c aç ã o d as r eg r as C SS a t ra v és d e u m a r qu i vo < /title > < l i nk r e l=" s t y l e s h e e t " type = " t e x t / c s s " href =" e s t i l o . c s s " / > head > < body >
Código HTML 3.3: Exemplo de aplicação das regras CSS através de um arquivo
1 2 3 4
p { font - size : 4 px ; color : # f f ; }
Código CSS 3.1: estilo.css
www.k19.com.br
33
CSS
34
Figura 3.3: Exemplo de aplicação das regras CSS através de um arquivo
Perceba que o efeito foi o mesmo de quando aplicamos as regras CSS através da tag style. Isso se deve ao fato de estarmos utilizando a mesma regra. O que mudamos foi apenas onde a definimos.
Estrutura de uma regra CSS Uma regra CSS é composta por três partes como podemos observar na imagem abaixo: Seletor
p
Corpo
{ font-size: 40px;
Propriedade
} Figura 3.4: Estrutura de uma regra CSS
34
www.k19.com.br
35
CSS
Podemosleraregraacimadaseguinteforma: seráatribuídoovalor 4px à propriedade font-size em todos os elementos que forem selecionados pelo seletor p. Como no exemplo acima utilizamos aquilo que chamamos de seletor de tipo , todos os elementos com a tag p receberão as propriedades definidas no corpo da regra.
Tipos de seletores No CSS temos definidos sete tipos de seletores que podem ser utilizados sozinhos ou em con junto: • Seletor universal • Seletor de tipo • Seletor de descendentes • Seletor de filhos • Seletor de irmão adjacente • Seletor de atributos • Seletor de id • Seletor de classe
Seletor universal O seletor universal seleciona todos os elementos de um documento HTML. No exemplo a seguir iremos fazer com que todos os elementos tenham margem igual a px. 1 2 3
* { margin : p x ; } Código CSS 3.2: Usando o seletor universal
Seletor de tipo O seletor de tipo seleciona todos os elementos cuja tag seja igual ao tipo indicado pelo seletor na declaração da regra CSS. No exemplo a seguir iremos selecionar todos os elementos que possuem a tag textarea . 1 2 3
te xt ar ea { border : 1 p x s o l id r ed ; } Código CSS 3.3: Usando o seletor de tipo
www.k19.com.br
35
CSS
36
Seletor de descendentes Chamamos de seletor de descendentes a seleção de um ou mais elementos fazendo o uso de outros seletores separados por espaços. Um espaço indica que os elementos selecionados pelo seletor à sua direita são filhos diretos ou indiretos dos elementos selecionados pelo seletor à sua esquerda. No exemplo a seguir iremos selecionar todos os elementos que possuem a tag input e que sejam filhos diretos ou indiretos de elementos com a tag p. 1 2 3
p inpu t { border : 1 p x s o l id r ed ; } Código CSS 3.4: Usando o seletor de descendentes
Seletor de filhos Chamamos de seletor de filhos a seleção de um ou mais elementos fazendo o uso de outros seletores separados pelo caractere >. Um caractere > indica que os elementos selecionados pelo seletor à sua direita são filhos diretos dos elementos selecionados pelo seletor à sua esquerda. No exemploa seguir iremos selecionar todos os elementos que possuem a tag a equesejamfilhos diretos de elementos com a tag p. 1 2 3
p > a { color : g r ee n ; } Código CSS 3.5: Usando o seletor de filhos
Seletor de irmão adjacente Chamamos de seletor de irmão adjacente a seleção de um ou mais elementos fazendo o uso de outros seletores separados pelo caractere +. Um caractere + indica que os elementos selecionados pelo seletor à sua direita sejam irmãos e imediatamente precedidos pelos elementos selecionados pelo seletor à sua esquerda. No exemplo a seguir iremos selecionar todos os elementos que possuem a tag input e que sejam irmãos e imediatamente precedidos por elementos com a tag label . 1 2 3
l abel + in put { color : g r ee n ; } Código CSS 3.6: Usando o seletor de irmão adjacente
Seletor de atributos O seletor de atributos seleciona um ou mais elementos que possuam o atributo ou o atributo juntamente com o seu valor da mesma forma como é indicada pelo seletor na declaração da regra 36
www.k19.com.br
37
CSS
CSS. Os atributos são informados dentro parênteses retos []. No exemplo abaixo iremos selecionar todos os elementos que possuam o atributo name igual a cidade . 1 2 3
* [ na me = ci da de ] { font - weight : i t a li c ; } Código CSS 3.7: Usando o seletor de atributos
Se desejarmos também podemos informar apenas o atributo. No exemplo a seguir iremos selecionar todos os elementos com a tag img que possuam o atributo title . 1 2 3
i mg [ ti tl e] { width : 1 p x ; } Código CSS 3.8: Usando o seletor de atributos
Seletor de id O seletor de id seleciona um único elemento cujo atributo id possui o valor indicado pelo seletor na declaração da regra CSS. No exemplo abaixo iremos selecionar o elemento cujo atributo id possui o valor cidade . Repare que o seletor de id começa com o caractere #. 1 2 3
# cid ad e { font - weight : b ol d ; } Código CSS 3.9: Usando o seletor de id
Seletor de classe O seletor de classe seleciona todos os elementos cujo atributo class possui o valor indicado pelo seletor na declaração da regra CSS. No exemplo abaixo iremos selecionar todos os elementos cujo atributo class possui o valor titulos . Repare que o seletor de classe começa com o caractere . (ponto). 1 2 3
. ti tu lo s { font - size : 4 px ; } Código CSS 3.10: Usando o seletor de classe
Exercícios de Fixação www.k19.com.br
37
CSS
38
Crie uma nova página com diversos elementos HTML. Altere a formatação dos elementos utilizando os seletores que você acabou de aprender. Tente usar todos os seletores. 1
Principais propiedades CSS Propriedades de background • background-attachment - define se a imagem de background deve se mover com a rolagem de um elemento ou não. • background-color - define a cor do background de um elemento. • background-image - define a imagem de background de um elemento. • background-position - define a posição do background de um elemento. • background-repeat - define se o background de um elemento de se repetir caso este seja menor que a parte visível do elemento. • background - define todas as propriedades de background em uma única linha. 1 2 3 4 5 6 7 8 9 1 11 12
body { background - a t t a c hm e n t : f i x ed ; background - color : # d d dd d d ; background - i m a ge : u r l ( ’ h tt p :/ / w w w . k 1 9 . c o m . b r / c s s / i m g / m a i n - h e a d e r - l o g o . p n g ’ ) ; background - p o s i t i o n: l e f t t o p; background - r e p e at : r e p ea t ; } div { b a c k g r o u n d: # d d d dd d u r l ( ’ ht t p :/ / w w w . k 1 9 . c o m . b r / c s s / i m g / m a i n - h e a d e r - l o g o . p n g ’ ) no - r ep ea t c en te r c en te r f ix ed ; } Código CSS 3.11: Propriedades de background
Propriedades de texto • color - define a cor do texto. • direction - define a direção do texto. • letter-spacing - define o espaçamento entre as letras do texto. • line-height - define a altura das linhas de um texto. • text-align - define o alinhamento horizontal do texto. • text-decoration - define uma "decoração"ou efeito para um texto. • text-indent - define a identação da primeira linha de um bloco de texto. • text-transform - define a capitalização do texto. • vertical-align - define o alinhamento vertical do texto. • white-space - define como os espaços do texto serão tratados. • word-spacing - define o espaçamento entre as palavras do texto. 38
www.k19.com.br
39 1 2 3 4 5 6 7 8 9 1 11 12 13
CSS p { color : g r ee n ; d ir e ct i on : rtl ; l ett er - s pa ci ng : 1 px ; line - heig ht : 3 px ; text - ali gn : right ; text - d ec or at io n: b li nk ; text - inde nt : 5 px ; t ex t - tr an sf or m : u pp er ca se ; v er ti ca l - a li gn : m id dl e ; white - space : n o w ra p ; word - s pa ci ng : 3 px ; } Código CSS 3.12: Propriedades de texto
Propriedades de fonte • font-family - define a família de fontes a ser utilizada. • font-size - define o tamanho da fonte. • font-style - define o estilo de fonte. • font-variant - define se a fonte será utilizada no formato small-caps ou não. • font-weight - define a espessura dos traços de uma fonte. • font - define todas as propriedades de fonte em uma única linha. 1 2 3 4 5 6 7 8 9 1 11
p { font - family : s an s - s e r if , s e ri f , m o n os p a c e ; font - size : 1 4 px ; font - style : i t a li c ; font - v a r i an t : s m al l - c a p s ; font - weight : b ol d ; } a { font : i t a li c s m al l - c a p s b o ld 1 4 p x / 2 p x s an s - s e r if , s e ri f , m o n os p a c e ; } Código CSS 3.13: Propriedades de fonte
Propriedades de lista • list-style-image - define qual será o indicador de item da lista. • list-style-position - define se o indicador de item da lista será exibido do lado de dentro ou de fora do elemento do item. • list-style-type - define qual o tipo de indicador de item será usado na lista. • list-style: define todas as prorpiedades de lista em uma única linha. 1 2 3 4 5 6 7
ul { list - style - i m a ge : u r l ( ’ h tt p :/ / w w w . k 1 9 . c o m . b r / c s s / i m g / b o x - d o t - o r a n g e . p n g ’ ) ; list - style - p o s i t i o n: i n s id e ; list - style - t y p e : d i s c ; } ol {
www.k19.com.br
39
CSS 8 9 1
40 list - style : s q u ar e o u t si d e url ( ’ http :/ / w w w . k 1 9 . c o m . b r / c s s / i m g / b o x - d o t - o r a n g e . p n g ’ ) ; } Código CSS 3.14: Propriedades de lista
Propriedades de tabela • border-collapse - faz com que as bordas das células não fiquem duplicadas quando estas possuirem bordas. 1 2 3 4 5 6
t able { border - c o l l a ps e : c o l la p s e ; } ta bl e ,th , td { border : 1 p x s o l id b lu e ; } Código CSS 3.15: Propriedades de tabela
Propriedades de dimensão • width - define a largura de um elemento. • min-width - define a largura mínima de um elemento. • max-width - define a largura máxima de um elemento. • height - define a altura de um elemento. • min-height - define a altura mínima de um elemento. • max-height - define a altura máxima de um elemento. 1 2 3 4 5 6 7 8 9 1 11
div { width : 3 p x ; he igh t : 3 px ; } h1 { mi n - width : 1 px ; max - width : 3 p x ; mi n - h e i g ht : 1 p x ; max - he ig ht : 3 px ; } Código CSS 3.16: Propriedades de dimensão
Box model O termo box model é utilizado para explicar o comportamento visual dos elementos HTML, pois podemos imaginar que cada elemento em uma página está envolvido por uma caixa. Essa caixa possui três partes: uma margem interna (padding ), uma borda (border ) e uma margem externa (margin ). 40
www.k19.com.br
41
CSS
Margem externa (margin) Borda (border) Margem interna (padding)
conteúdo
Figura 3.5: Box model
Um erro muito comum quando estamos começando a aprender CSS é que nos esquecemos de considerar as dimensões das margens internas e externas no cálculo das dimensões de um elemento. Vamos pensar no seguinte caso: suponha que você possua um espaço de 3px para encaixar um conteúdo dentro da sua página. Você poderia incluir no HTML um elemento com a tag div e a seguinte regra CSS: 1 2 3 4 5 6
div { width : 3 p x ; p a d d i n g: 1 px ; margin : 1 px ; border : 1 p x s o l id g re e n ; } Código CSS 3.17: Exemplo de uso incorreto das dimensões de um elemento
Num primeiro momento pode parecer que tudo está correto, porém ao abrir a página você perceberá que seu elemento está ultrapassando o limite dos 3px. Isso ocorre porque devemos incluir as margens internas, as margens externas e a borda na hora de calcular as dimensões finais de um elemento. No exemplo acima, o correto seria: 1 2 3 4 5 6
div { width : 2 58 p x ; p a d d i n g: 1 px ; margin : 1 px ; border : 1 p x s o l id g re e n ; } Código CSS 3.18: Exemplo de uso correto das dimensões de um elemento
Posicionando elementos www.k19.com.br
41
CSS
42
Para posicionar um elemento dentro de um documento HTML o CSS possui os seguintes atibutos: • position - define o tipo de posicionamento. • top - define a distância do topo do elemento em relação a outro elemento ou em relação a janela. • left - define a distância do lado esquerdo do elemento em relação a outro elemento ou em relação a janela. • bottom - define a distância da base do elemento em relação a outro elemento ou em relação a janela. • right - define a distância do lado direito do elemento em relação a outro elemento ou em relação a janela. Ao posicionarmos um elemento utilizando os atributos acima devemos nos lembrar que o sistema de coordenadas dentro de um documento HTML possui a coordenada (0,0) no canto superior esquerdo de um elemento ou da janela. Também devemos nos lembrar que se definirmos uma distância para o atributo left, não devemos utilizar o atributo right. A mesma idéia vale para os atributos top e bottom .
Posicionamento estático Este tipo de posicionamento, em geral, não precisa ser definido, pois é o tipo de posicionamento padrão de todos os elementos. O posicionamento estático é definido através do atributo position com o valor static e não é afetado pelos atributos top, bottom , left e right.
Posicionamento fixo Um elemento com posicionamento fixo é posicionado em relação à janela do navegador. É definido através do atributo position com o valor fixed e sua posição é definida pelos atributos top, bottom , left e/ou right. Todos os elementos posicionados fixamente não mudam de posição mesmo quando ocorrer uma rolagem vertical ou horizontal.
Posicionamento relativo Um elemento com posicionamento relativo é posicionado em relação à sua posição original. É definido através do atributo position com o valor relative e sua posição é definida pelos atributos top, bottom , left e/ou right .
Posicionamento absoluto Um elemento com posicionamento absoluto é posicionado em relação à um elemento ancestral ou à janela do navegador. É definido através do atributo position com o valor absolute e sua 42
www.k19.com.br
43
CSS
posição é definida pelos atributos top, bottom , left e/ou right . Quando nenhum dos ancestrais de um elemento posicionado absolutamente define um tipo de posicionamento, o posicionamento absoluto ocorre em relação à janela do navegador. Para que ele ocorra em relação a um ancestral, o elemento ancestral deve definir um posicionamento relativo, por exemplo.
Cores em CSS Em uma propriedade CSS na qual que devemos atribuir uma cor, podemos utilizar três formas diferentes de se escrever esse valor: nome da cor, valor hexadecinal ou RGB. Nem todas as cores possuem um nome e é por esse motivo que normalmente utilizamos a forma hexadecimal ou RGB na grande maioria das vezes. Uma cor heaxadecimal é definida da seguinte forma: #RRGGBB , na qual RR, GG e BB devem variar de a FF e representam os componentes vermelho, verde e azul de uma cor. Para definirmos uma cor utilizando a notação RGB devemos utilizar a função rgb(R, G, B) substituindo as letras R, G e B por valores de a 255 ou por uma porcentagem de % a 1%. Em CSS3 ainda possuimos mais três formas: RGBA, HSL e HSLA. O HSL define as cores através da matiz, saturação e luminosidade (hue, saturation e lightness). Devemos utilizar a função hsl(H, S, L), na qual H pode variar de a 36 e S e L de % a 1%. As formas RGBA e HSLA utilizam as funções rgba(R, G, B, A) e hsla(H, S, L, A) , respectivamente. Ambas as funções possuem um último parâmetro que significa a opacidade da cor (alpha). Esse valor varia de a 1 ao passo de .1.
Unidades de medida Em CSS possuímos diversas unidades de medida como podemos verificar na listagem abaixo: • in - polegada. • cm - centrímentro. • mm - milímetro. • em - tamanho relativo ao tamanho de fonte atual no documento. 1em é igual ao tamanho da fonte atual, 2em o dobro do tamanho da fonte atual e assim por diante. • ex - essa unidade é igual à altura da letra "x"minúscula da fonte atual do documento. • pt - ponto (1pt é o mesmo que 1/72 polegadas). • px - pixels (um ponto na tela do computador). Da lista acima, as unidades mais utilizadas são px e em.
Desafios www.k19.com.br
43
CSS
44
Observe a página inicial da K19. Utilizando todos os seus conhecimentos em CSS, faça uma página que siga a mesma estrutura da página inicial da K19. Não se preocupe com as cores e imagens, no lugar das imagens da K19 você pode usar uma imagem qualquer e escolher livremente as cores que desejar. 1
Figura 3.6: Box model
44
www.k19.com.br
J AVA S CRIPT
O L U T Í P A
C
4
Para que possamos criar uma página que possua um comportamento e oferecer aos nossos usuários um site mais interativo e dinâmico, com certeza trabalharemos com a linguagem JavaScript. Um código JavaScript pode ser inserido em um documento HTML de duas formas: colocando o código JavaScript como filho de um elemento com a tag script ou utilizando o atributo src de um elemento com a tag script no qual devemos passar o caminho relativo ou absoluto para um arquivo que contenha o código JavaScript. 1 2 3 4 5 6 7 8 9 1 11 12 13 14 15
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > I n s e ri n d o c ó d ig o J a v a Sc r i pt e m u m d o c u me n t o H T ML < /title > < s c r ip t t y pe=" t e x t / j a v a s c r i p t " sr c =" c o d i g o . j s " > script > < s c r ip t t y pe=" t e x t / j a v a s c r i p t "> wi ndo w . o nl oad = fu nc t io n () { d ocu me nt . get El em en tB yI d( ’ola - mundo ’) .i nn erH TM L = ’ Olá Mundo ! ’; } script > head > < body >
Declarando e inicializando variáveis em JavaScript Em JavaScript podemos declarar e inicializar uma variável da seguinte maneira: 1 2 3 4 5
va r va r va r va r va r
n u me ro = ; n u m e r oC o m C a sa s D e ci m a i s = 1 . 4 5 ; t e xt o = ’ V a r i áv e l c o m u m t e x to ’; o u t ro T e x to = " O u tr a v a ri á ve l c om u m t ex to "; v a l o rB o o l ea n o = true ; Código Javascript 4.1: Declarando e inicializando variáveis em JavaScript
Operadores Para manipular os valores das variáveis de um programa, devemos utilizar os operadores oferecidos pela linguagem de programação adotada. A linguagem JavaScript possui diversos operadores e os principais são categorizados da seguinte forma: • Aritmético (+, -, *, /, %) www.k19.com.br
45
J AVA S CRIPT
46
• Atribuição (=, +=, -=, *=, /=, %= ) • Relacional (==, !=, <, <=, >, >= ) • Lógico (&&, ||)
Aritmético Os operadores aritméticos funcionam de forma muito semelhante aos operadores na matemática. Os operadores aritméticos são: • Soma + • Subtração • Multiplicação * • Divisão / • Módulo % 1 2 3 4 5 6 7 8
va r va r va r va r va r x = x = x =
umMaisUm = 1 + 1; t r es V ez e sD o is = 3 * 2 ; q u at r oD i vi d id o Po r 2 = 4 / 2 ; s e is M od u lo C in c o = 6 % 5 ; x = 7; x + 1 * 2; x - 4; x / ( 6 - 2 + ( 3*5) /(16 -1) );
// // // //
u m M a is U m = 2 t r es V ez e sD o is = 6 q u a t r oD i v i di d o P o r2 = 2 s e is M od u lo C in c o = 1
// x = 9 // x = 1 // x = 2
Código Javascript 4.2: Exemplo de uso dos operadores aritméticos.
Importante O módulo de um número x , na matemática, é o valor numérico de x desconsiderando o seu sinal (valor absoluto). Na matemática expressamos o módulo da seguinte forma: | − 2| = 2. Em linguagens de programação, o módulo de um número é o resto da divisão desse número por outro. No exemplo acima, o resto da divisão de 6 por 5 é igual a 1. Além disso, lemos a expressão 6%5 da seguinte forma: seis módulo cinco.
Importante As operações aritméticas em JavaScript obedecem as mesmas regras da matemática com relação à precedência dos operadores e parênteses. Portanto, as operações são resolvidas a partir dos parênteses mais internos até os mais externos, primeiro resolvemos as multiplicações, divisões e os módulos. Em seguida, resolvemos as adições e subtrações.
Atribuição Nas seções anteriores, já vimos um dos operadores de atribuição, o operador = (igual). Os operadores de atribuição são: 46
www.k19.com.br
47
J AVA S CRIPT
• Simples = • Incremental += • Decremental -= • Multiplicativa *= • Divisória /= • Modular %= 1 2 3 4 5 6
va r v a lo r = 1 ; v alor += 2; v alor -= 1; v alor *= 6; v alor /= 3; v alor %= 3;
// // // // // //
valor valor valor v a lo r valor valor
= = = = = =
1 3 2 12 4 1
Código Javascript 4.3: Exemplo de uso dos operadores de atribuição.
As instruções acima poderiam ser escritas de outra forma: 1 2 3 4 5 6
va r v a lo r = 1 ; v alor = v alor + v alor = v alor v alor = v alor * v alor = v alor / v alor = v alor %
// // // // // //
2; 1; 6; 3; 3;
v a lo r v a lo r v a lo r v a lo r v a lo r v a lo r
= = = = = =
1 3 2 12 4 1
Código Javascript 4.4: O mesmo exemplo anterior, usando os operadores aritméticos.
Como podemos observar, os operadores de atribuição, com exceção do simples (=), reduzem a quantidade de código escrito. Podemos dizer que esses operadores funcionam como “atalhos” para as operações que utilizam os operadores aritméticos.
Relacional Muitas vezes precisamos determinar a relação entre uma variável ou valor e outra outra variável ou valor. Nessas situações, utilizamos os operadores relacionais. As operações realizadas com os operadores relacionais devolvem valores booleanos. Os operadores relacionais são: • Igualdade == • Diferença != • Menor < • Menor ou igual <= • Maior > • Maior ou igual >= 1 2 3 4 5 6 7
va r va r t = t = t = t = t =
v a lo r = 2 ; t = false ; ( valor = = 2) ; ( valor ! = 2) ; (v alor < 2) ; (v alor < = 2) ; (v alor > 1) ;
www.k19.com.br
// // // // //
t t t t t
= = = = =
true f al se f al se true true
47
J AVA S CRIPT 8
48
t = (v alor > = 1) ;
// t = true
Código Javascript 4.5: Exemplo de uso dos operadores relacionais em JavaScript.
Lógico A linguagem JavaScript permite verificar duas ou mais condições através de operadores lógicos. Os operadores lógicos devolvem valores booleanos. Os operadores lógicos são: • “E” lógico && • “OU” lógico || 1 2 3 4 5 6 7
int v alor = 3; boolean t e st e = t es te = v al or < t es te = v al or < t es te = v al or > t es te = v al or > t es te = v al or <
false ; 4 & & v al or 4 & & v al or 3 | | v al or 3 | | v al or 5 & & v al or
> 2 ; > 3 ; > 2 ; < 2 ; == 3 ;
// // // // //
t e s te t es t e t e s te t es t e t e s te
= = = = =
t ru e f al s e t ru e f al s e t ru e
Código Javascript 4.6: Exemplo de uso dos operadores lógicos em JavaScript.
Controle de fluxo if e else O comportamento de uma aplicação pode ser influenciado por valores definidos pelos usuários. Por exemplo, considere um sistema de cadastro de produtos. Se um usuário tenta adicionar um produto com preço negativo, a aplicação não deve cadastrar esse produto. Caso contrário, se o preço não for negativo, o cadastro pode ser realizado normalmente. Outro exemplo, quando o pagamento de um boleto é realizado em uma agência bancária, o sistema do banco deve verificar a data de vencimento do boleto para aplicar ou não uma multa por atraso. Para verificar uma determinada condição e decidir qual bloco de instruções deve ser executado, devemos aplicar o comando if . 1 2 3 4 5
if ( p re co < ) { aler t (’ O p re ç o d o p r od u to n ão p od e s er n e ga t iv o ’) ; } else { aler t (’ P r o d ut o c a d as t r a do c o m s u c es s o ’) ; } Código Javascript 4.7: Comando if
O comando if permite que valores booleanos sejam testados. Se o valor passado como parâmetro para o comando if for true, o bloco do if é executado. Caso contrário, o bloco do else é executado. 48
www.k19.com.br
49
J AVA S CRIPT
O parâmetro passado para o comando if deve ser um valor booleano, caso contrário o código não compila. O comando else e o seu bloco são opcionais.
while Em alguns casos, é necessário repetir um trecho de código diversas vezes. Suponha que seja necessário imprimir 10 vezes na página a mensagem: “Bom Dia”. Isso poderia ser realizado colocando 10 linhas iguais a essa no código fonte: 1
d o cu m en t . w ri t el n (’ B o m D i a ’) ; Código Javascript 4.8: “Bom Dia”
Se ao invés de 10 vezes fosse necessário imprimir 100 vezes, já seriam 100 linhas iguais no código fonte. É muito trabalhoso utilizar essa abordagem para solucionar esse problema. Através do comando while, é possível definir quantas vezes um determinado trecho de código deve ser executado pelo computador. 1 2 3 4 5 6
va r c o nt a do r = ; while ( c o nt a do r < 1 ) { d oc um en t .w ri te ln (’ B o m D i a ’) ; c on ta do r ++; } Código Javascript 4.9: Comando while
A variável contador indica o número de vezes que a mensagem “Bom Dia” foi impressa na tela. O operador ++ incrementa a variável contador a cada rodada. O parâmetro do comando while tem que ser um valor booleano. Caso contrário, ocorrerá um erro na execução do script.
for O comando for é análogo ao while. A diferença entre esses dois comandos é que o for recebe três argumentos. 1 2 3
for ( va r c o nt a do r = ; c o nt a do r < 1 ; c o nt a do r + +) { d oc um en t .w ri te ln (’ B o m D i a ’) ; } Código Javascript 4.10: Comando for
Exercícios de Fixação Crie uma pasta com o nome javascript. Crie um documento HTML com um código JavaScript que imprima na página o seu nome 100 vezes. Salve o documento na pasta javascript e em seguida abra o arquivo no navegador. 1
www.k19.com.br
49
J AVA S CRIPT 1 2 3 4
50
for ( va r c o nt a do r = ; c o nt a do r < 1 ; c o nt a do r + +) { d oc um en t .w ri te ln (’ R a f ae l C o s en t i n o ’) ; d oc um en t .w ri te ln (’ < br / > ’) ; } Código Javascript 4.11: imprime-nome.js
Crie um documento HTML com um código JavaScript que imprima na página os números de 1 até 100. Salve o documento na pasta javascript e em seguida abra o arquivo no navegador. 2
1 2 3 4
for ( va r c o nt a do r = 1 ; c o nt a do r < = 1 ; c o nt a do r + +) { d oc um en t . wr it el n ( co nt ad or ) ; d oc um en t .w ri te ln (’ < br / > ’) ; } Código Javascript 4.12: imprime-ate-100.js
Crie um documento HTML com um código JavaScript que percorra todos os número de 1 até 100. Para os números ímpares, deve ser impresso um “*”, e para os números pares, deve ser impresso dois “**”. Veja o exemplo abaixo: 3
* ** * ** * **
Salve o documento na pasta javascript e em seguida abra o arquivo no navegador. 1 2 3 4 5 6 7 8 9 1
for ( va r c o nt a do r = 1 ; c o nt a do r < = 1 ; c o nt a do r + +) { va r r es t o = c o nt a do r % 2 ; if ( r es to = = 1 ) { do cu me n t .wr it eln (’* ’) ; } else { do cu me n t .wr it eln (’ * * ’) ; } d oc um en t .w ri te ln (’ < br / > ’) ; } Código Javascript 4.13: imprime-padrao-1.js
Crie um documento HTML com um código JavaScript que percorra todos os número de 1 até 100. Para os números múltiplos de 4, imprima a palavra “PI”, e para os outros, imprima o próprio número. Veja o exemplo abaixo: 4
1 2 3 PI 5 6 50
www.k19.com.br
51
J AVA S CRIPT
7 PI
Salve o documento na pasta javascript e em seguida abra o arquivo no navegador. 1 2 3 4 5 6 7 8 9 1
for ( va r c o nt a do r = 1 ; c o nt a do r < = 1 ; c o nt a do r + +) { va r r es t o = c o nt a do r % 4 ; if ( r es to = = ) { do cu me n t .wr it eln (’ P I ’) ; } else { d oc um en t. wr it el n( co nt ad or ) ; } d oc um en t .w ri te ln (’ < br / > ’) ; } Código Javascript 4.14: imprime-padrao-2.js
Salve o documento na pasta javascript e em seguida abra o arquivo no navegador.
Exercícios Complementares Crie um documento HTML com um código JavaScript que imprima na página um triângulo de “*”. Veja o exemplo abaixo: 1
* ** *** **** *****
Crie um documento HTML com um código JavaScript que imprima na tela vários triângulos de “*”. Observe o padrão abaixo. 2
* ** *** **** * ** *** ****
Os números de Fibonacci são uma sequência de números definida recursivamente. O primeiro elemento da sequência é 0 e o segundo é 1. Os outros elementos são calculados somando os dois antecessores. 3
, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233... www.k19.com.br
51
J AVA S CRIPT
52
Crie um documento HTML com um código JavaScript para imprimir os 30 primeiros números da sequência de Fibonacci.
Funções JavaScript Uma função JavaScript é uma sequência de instruções JavaScript que serão executadas quando você chamá-la através do seu nome.
Definindo uma função Definindo uma função simples em JavaScript: 1 2 3 4
f u n c t i o n i m p r im e O l a Mu n d o ( ) { d oc um en t .w ri te ln (’ O l á M u n do ! ’) ; d oc um en t .w ri te ln (’ < br / > ’) ; } Código Javascript 4.18: Definindo uma função
Definindo uma função que recebe parâmetros: 1 2 3 4
function imprimeMensagem(mensagem) { d oc um en t . wr it el n ( me ns ag em ) ; d oc um en t .w ri te ln (’ < br / > ’) ; } Código Javascript 4.19: Definindo uma função que recebe parâmetros
Definindo uma função que retorna um valor: 1 2 3
function criaSaudacaoPersonalizada(nome) { return ’ Ol á , ’ + n o m e + ’ ! ’; } Código Javascript 4.20: Definindo uma função que retorna um valor
Chamando uma função dentro do código JavaScript Chamando uma função dentro do código JavaScript: 1
i m pr i me O la M un d o () ; Código Javascript 4.21: Chamando uma função
Chamando uma função que recebe parâmetros: 1
i m pr i me M en s ag e m (’ 1 2 3 t e s ta n d o ! ! ’) ; Código Javascript 4.22: Chamando uma função que recebe parâmetros
Chamando uma função que retorna um valor: 52
www.k19.com.br
53 1
J AVA S CRIPT va r s a u da c a o = c r i a S au d a c a oP e r s o na l i z a da (’ J o n a s ’) ; Código Javascript 4.23: Chamando uma função que retorna um valor
Chamando uma função JavaScript pelo HTML Os elementos HTML possuem alguns eventos que podem ser associados a funções JavaScript através de alguns atributos especiais cujos nomes começam com o prefixo on. 1 2 3 4 5 6 7 8 9 1 11 12 13 14
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > C h a ma n d o u m a f u n çã o J a v a Sc r i p t p e l o H T ML < /title > < s c r ip t t y pe=" t e x t / j a v a s c r i p t "> f un ct io n e x i be O l a M un d o () { al ert ( ’ Olá Mund o ! ’) ; } script > head > < body > < i n p ut t y pe=" b u t t o n " value =" E x i b e s a u d aç ã o " onclick =" e x i b e O l a M u n d o ( ) " / > body > < / html > Código HTML 4.2: Chamando uma função JavaScript pelo HTML
Objetos JavaScript Qualquer desenvolvedor acostumado com linguagens orientadas a objetos como Java e C# pode estranhar um pouco a forma como trabalhamos com objetos em JavaScript. Apesar do JavaScript ser uma linguagem de script baseada em protótipos, ela oferece suporte à programação orientada a objetos. Portanto, muitos dos conhecimentos que um desenvolvedor tenha adquirido com Java ou C# com relação a orientação a objetos pode ser reaproveitado ao se programar em JavaScript.
Criando um objeto Existe mais de uma maneira de se criar um objeto em JavaScript. A maneira mais simples podemos acompanhar no código abaixo: 1 2 3 4 5 6 7 8 9 1 11 12 13
va r c o n t aB a n c ar i a = ne w O b j e c t ( ) ; c o nt a Ba n ca r ia . n u me r o = 1 23 4 ; c o nt a Ba n ca r ia . s a ld o = 1 ; c o nt a Ba n ca r ia . d e po s it a = f u n c t i o n( v a lo r ) { if ( v al or > ) { this . s a l do + = v a l o r ; } else { a lert (’ V a l or i n v ál i d o ! ’) ; } }; Código Javascript 4.24: Criando um objeto
www.k19.com.br
53
J AVA S CRIPT
54
Outra maneira de se criar um objeto é utilizando a notação literal mais conhecida como JSON (JavaScript Object Notation): 1 2 3 4 5 6 7 8 9 1 11 12
va r c o n t aB a n c ar i a = { nu mer o : 1234 , sald o : 1 , d ep os it a : f u n c t i o n( v a lo r ) { if ( v al or > ) { this . s a l do + = v a l o r ; } else { aler t (’ V a l or i n v ál i d o ! ’) ; } } } Código Javascript 4.25: Criando um objeto utilizando a notação literal
Arrays Os arrays em JavaScript são objetos e, portanto, possuem atributos e métodos para nos ajudar na manipulação de seus dados.
Declarando um array Podemos declarar um array de três maneiras: através do protótipo Array sem parâmetros, através do protótipo Array com parâmetros e através da forma literal. 1 2 3 4 5 6 7 8
va r n u m er o s = ne w A r r a y ( ) ; n um er os [ ] = 34; n um er os [ 1] = 52; n um er os [ 2] = 83; va r n o me s = ne w A r r a y (’ J o n a s ’, ’ R a f a e l ’, ’ M a r c e l o ’) ; va r c i da d es = [’ S ã o P a u l o ’, ’ R i o d e J a n ei r o ’, ’ C u r i t i b a ’]; Código Javascript 4.26: Criando um array
Métodos do array Um array possui diversos métodos para nos auxiliar nas tarefas mais comuns quando trabalhamos com arrays. Os mé todos são: • concat() - concatena dois ou mais arrays e retorna uma cópia ro resultado. • indexOf() - procura por um objeto dentro do array e retorna o índice caso o encontre. • join() - concatena todos os elementos de um array em uma string. • lastIndexOf() - procura, de trás para frente, por um objeto dentro array e retorna o índice caso o encontre. • pop() - remove o último objeto de um array e retorna o objeto removido. 54
www.k19.com.br
55
J AVA S CRIPT
• push() - adiciona um objeto no final do array e retorno o novo tamanho do array. • reverse() - inverte a ordem dos objetos de um array. • shift() - remove o primeiro objeto de um array e retorna o objeto removido. • slice() - seleciona parte de um array e retorna um copia da parte selecionada. • sort() - ordena os objetos de um array. • splice() - adiciona e/ou remove objetos de um array. • toString() - converte um array em uma string e retorna o resultado. • unshift() - adiciona um objeto no começo do array e retorna o novo tamanho do array. • valueOf() - retorna o valor primitivo de um array.
Exercícios de Fixação Crie um documento HTML com um código JavaScript que armazene 10 números inteiros em um array. Preencha todas as posições do array com valores sequenciais e em seguida imprima-os na tela. Em seguida, escolha duas posições aleatoriamente e troque os valores de uma posição pelo da outra. Repita essa operação 10 vezes. Ao final, imprima o array novamente. 5
Crie um documento HTML com um código JavaScript que armazene 10 números inteiros em um array. Preencha todas as posições do array com valores aleatórios e em seguida imprima-os na tela. Após imprimir o array, ordene o array do menor valor para o maior. Ao final, imprima o array ordenado. 6
www.k19.com.br
55
J AVA S CRIPT
56
56
www.k19.com.br
E C I D N Ê P
R ESPOSTAS
A
A
Resposta do Exercício 2.5 1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > C o mo p r e p ar a r u m d e l i ci o s o m a c a r r ã o i n s t a n t ân e o e m 6 m i n . head > < body > C o m o p r e p a ra r u m d e l i c i o so m a c ar r ã o i n s t a n t â ne o e m 6 m i n . < /h1 >
Resposta do Exercício 2.6
1
< html >
www.k19.com.br
57
R ESPOSTAS 2 3 4 5 6 7 8 9 1 11 12
58
< head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u s o d a t a g a c om o a t ri b ut o t a rg e t head > < body >
1 2 3 4 5 6 7 8 9
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u s o d a t a g a c om o a t ri b ut o t a rg e t head > < body > P á g in a 2 < /h1 > body > < / html > Código HTML 2.13: Resposta do exercício - pagina2.html
Resposta do Exercício 2.7
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33
58
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E x e r cí c i o s o b re â n c or a s < /title > head > < body >
www.k19.com.br
59 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54
R ESPOSTAS
S o b re o t e xt o d e s sa p á g in a < /a >
Resposta do Exercício 2.8
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E x e r cí c i o s o b re â n c or a s < /title > head > < body >
www.k19.com.br
59
R ESPOSTAS 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55
60 Nam r ho nc us tu rp is at nibh vu l pu t at e nec pl a ce ra t nib h a liq ua m .
S o b re o t e xt o d e s sa p á g in a < /a >
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37
60
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E x e r cí c i o s o b re â n c or a s < /title > head > < body > P á g in a 2 < /h1 >
www.k19.com.br
61 38 39 4 41 42 43 44 45 46 47 48 49 5 51
R ESPOSTAS c o n v al l i s e u l obo rt is sed , fe rme ntu m eu lec tus . Ma ec en as eget m etus tellus , non dic tu m erat . Sed al iq ua m lo bo rt is nunc , in c on se ct etu r ri sus al iq ue t et . F usce ← quam arcu , t in ci dun t quis pe ll en te sq ue sit amet , t em pus eu nulla . P el le nt es qu e ante diam , t r i st iq ue a di ctu m nec , rut rum sed ma ur is . Cum so cii s na to que pe na tib us et m agn is dis p ar tu ri ent montes , n asc et ur ri di cul us mus . In te ge r nunc sapien , bi be n du m et m att is sit amet , p u lv in ar ut mi . P e l le n t es q u e h abi ta nt mo rbi t ri st iqu e s en ec tus et netu s et m al esu ada fam es ac t urp is e ge st as . Nunc al iq uet l ibe ro sed dui eu is mo d so da le s .< /p >
M a is u m a â n c o r a < /a >
Resposta do Exercício 2.9
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u s o d a t a g i mg < /title > head > < body > K 1 9 T r e i na m e n to s < /h1 > < i m g s r c =" h t t p : / / w w w . k 1 9 . c o m . b r / c s s / i m g / m a i n - h e a d e r - l o g o . p n g" / >
C u r s o s < /h2 >
www.k19.com.br
/>
/>
/>
/>
/>
/>
/>
/>
61
R ESPOSTAS
62
Código HTML 2.19: Resposta do exercício
Resposta do Exercício 2.10
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E x e r cí c i o p a r a a t a g t a b l e < /title > head > < body > < table > < thead > M a r c a < /th > M o d e l o < /th > A n o < /th > tr > thead > < tfoot > C o r o l l a < /td > 2 1 < /td > tr > C a m r y < /td > 2 1 1 < /td > tr > C i v i c < /td > 2 4 < /td > tr > F i t < /td > 2 1 2 < /td > tr > C i t y < /td > 2 1 1 < /td > tr > M i t s u b i s h i < /td > L a n c e r < /td > 2 1 2 < /td > tr > tbody > table > body > < / html > Código HTML 2.22: Resposta do exercício
Resposta do Exercício 2.11 62
www.k19.com.br
63
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25
R ESPOSTAS
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > M en u - K 19 P i zz a ri a < /title > head > < body >
body > < / html > Código HTML 2.24: Resposta do exercício K 1 9 P i z z ar i a < /h1 >
M e n u < /h2 >
Resposta do Exercício 2.12
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > O pe r aç ã o d e s aq ue - K 19 B an k < /title > head > < body >
body > < / html > Código HTML 2.26: Resposta do exercício K 1 9 B a nk < /h1 >
M a n ua l d o c a i xa e l e t rô n i co < /h2 >
O p e r aç ã o d e s a q ue < /h3 >
Resposta do Exercício 2.13
www.k19.com.br
63
R ESPOSTAS 1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18
64
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > K - F o r ma ç ã o B á s i c a - K 1 9 T r e i n a m en t o s < /title > head > < body >
body > < / html > Código HTML 2.28: Resposta do exercício K 1 9 T r e i na m e n to s < /h1 >
K - F o r ma ç ã o B á s ic a < /h2 >
Resposta do Exercício 2.14
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > E xe m pl o d e u so d a t ag t e xt a re a < /title > head > < body > < f o rm a c t io n= " p a g i n a . h t m l " method = " g e t " >
Resposta do Exercício 2.15
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17
64
< html > < head > < meta h t t p - e q u i v ="Content -Type" c o n t e n t=" t e x t / h tm l ; c h a rs e t = U TF - 8 "> < title > A t ag l a be l e o s e l em e nt o s d e f o rm u lá r io < /title > head > < body > < f o rm a c t io n= " p a g i n a . h t m l " method = " g e t " >
www.k19.com.br
65 18 19 2 21 22 23 24 25 26 27 28 29
R ESPOSTAS < i n p ut t y pe=" r a d i o " name =" s e x o " id = " m a s c u l i n o " / > < l a b el f o r=" m a s c u l i n o " > M a s c u l i n o < /label > < i n p ut t y pe=" r a d i o " name =" s e x o " id = " f e m i n i n o " / > < l a b el f o r=" f e m i n i n o " > F e m i n i n o < /label >
Resposta do Complementar 4.1
1 2 3 4 5 6
va r l i nh a = ’* ’; for ( va r c o nt a do r = 1 ; c o nt a do r < = 1 ; c o nt a do r + +) { d oc um en t . wr it el n ( li nh a ); d oc um en t .w ri te ln (’ < br / > ’) ; linh a += ’* ’; } Código Javascript 4.15: imprime-padrao-3.js
Resposta do Complementar 4.2
1 2 3 4 5 6 7 8 9 1 11
va r l i nh a = ’* ’; for ( va r c o nt a do r = 1 ; c o nt a do r < = 1 ; c o nt a do r + +) { d oc um en t . wr it el n ( li nh a ); d oc um en t .w ri te ln (’ < br / > ’) ; va r r es t o = c o nt a do r % 4 ; if ( r es to = = ) { l inha = ’* ’; } else { l inha += ’ * ’; } } Código Javascript 4.16: imprime-padrao-4.js
Resposta do Complementar 4.3
1 2 3 4 5 6 7 8 9 1 11
va r p e n ul t i m o = ; va r u l ti mo = 1 ; d o c um e n t . w r it e l n ( p e n ul t i m o ) ; d o cu m en t . w ri t el n ( u lt i mo ) ; for ( va r c o nt a do r = ; c o nt a do r < 2 8; c o nt a do r + +) { va r p r o xi m o = p e n u lt i m o + u l t im o ; d oc um en t . wr it el n ( pr ox im o ); d oc um en t .w ri te ln (’ < br / > ’) ;
www.k19.com.br
65
Sign In