AFJÍHÀVAJLI
:IIMIL
A vannumnçgyuxçxqrarlg,  :em; mjnumugaçnnngilpxçn)
“f- ' V |  I A IILYIFVCIIRGI¡ Anal-num:  -nla-vw-uulrw)
; FA AFÀ...
numa:  !UL IÇJÃIIIÇI A FIIIYIII_

I  Inpxaaigxcim Llvllnñ)

L l Iluminada¡ dum lnifdujm aka 34th' ! jInIàI 'làinliííalííei...
"i Í 'll
É _ÍQIT_I-'_: !IL tri_ : :IA

l'

! ÍÊÊÍCÍFIÍHÉ
CI : hminiirei a:  ,af-Jr _Iiiiallplíaiial-IIQI : Elim Í-Iiowbiál...
HTML

 

ESTRUTURA

 

Dw : Ie Em »Im Insert Madih Farma!  Command;  SIÍE Window Help @v p» g. . Designer . 
UnIIIlea-x' X...
HTML

 

é - SINTAXE

O código HTML é formado por elementos (ou tags),  e cada elemento pode receber
múltiplos atributos (...
HTML

 

SINTAXE

Dw File Edil View IVTSER I-'Iudlwlj'
WML¡

I cade ÊPII( I Dawn LIVE

Format Command;  si-. e xviiiaaii -...
É “ÇUIÀII-. ÇÂXIÍIÇÊI /  FIIEIi1tARiíC1IJ. lA. 

l'

A ; I-iil! l'l! I'I_= ,I : Im allmlt.  “Eiilwlãlsi sita . uam hnalpal...
;EI . =~! III_L= !nrr<i K1 . lYllíâlxlãí I tIÍIL. . 5.2x: : II:  5:1

'IJXC ÍÇR. 

fiat.  Ir;  ist,  te'.  “Ibi,  lua.  bz...
HTML

 

ELEMENTOS MAIS UTILIZADOS

 

 

Dw : IIQ EEIK Ievs Insert Nlndif;  Format Command;  SIÍE Window Help @- nv gv De...
HTML

 

;  . FORMULÁRIOS

Os elementos de formulários renderizam na tela do usuário campos digitar/ selecionar. 
Esses da...
HTIIL

 

FORMULÁRIOS

Dw riIe : ai:  Liei.  Insert medir,  Forma:  Command;  siie Window -Ieip @v -nv gv

unmienq- xl UII...
HTML

 

;  . FORMULÁRIOS

 

Dw me m m.  Insert mamy Format Command;  Sue Wmdow -mp @- -nv a! ” Deàwgnev .  p
UnmIrn-l- x...
ÍVANSLÉl *t5 " CICÍLYUZÍEÊTFII?  '. E'A§1L. _=! LE. 'Â'3

_LT_ _F AA, 

: iliiliiffhl
. illuzxqíkm ; quim -ziçi-«r-iiaxvle...
HTML

 

;  - TABELAS X CONCEITO TABLELESS

 

   

Dw File Em¡ um ; um miami,  Format (ommands SHE Wmdm:  Help @v av à.  ...
HTML

 

TABELAS X CONCEITO TABLELESS

DW me

Unmlnnq- xl umiklcmz' x
i 'me Split ' Desagn Live

Em:  Ma'.  Insert

media ...
SAIN( n:  kits: :

r il_: izfíríl_: eitiri e: 

Zimlçzelrnsmm
! ar : Fim - ; llfglfnliçllii-E
ÍQIÍIIQÍÍQE¡ Lanna¡ trr

¡an...
.ÂIIIIÉUÍIIÂÊAÊÊ3 : i n_li: iãirtfil. :eitlr: al

_-1I: iaerãi: iiç»›: 
?tira allêlhilaluiískí *guia ! Glitter-in : ítgumf...
HTML

 

SEMÂNTICA E ACESSIBILIDADE

SEO em HTML: 

Search Engine Optimization.  É uma técnica de escrever um Código limpo...
HTML

 

;  _ ATIVIDADE

Construa uma página WEB simples contendo elementos que aprendeu nesta aula. 

Você pode fazer um ...
Próximos SlideShares
Carregando em…5
×

Introdução ao HTML

181 visualizações

Publicada em

Apresentação da aula 01 do curso de HTML5 e CSS do Senac Scipião

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
181
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução ao HTML

  1. 1. AFJÍHÀVAJLI
  2. 2. :IIMIL A vannumnçgyuxçxqrarlg, :em; mjnumugaçnnngilpxçn) “f- ' V | I A IILYIFVCIIRGI¡ Anal-num: -nla-vw-uulrw) ; FA AFÀ›A_: I á -Ag. -_4,, ›- l! ,_¡, .I , l›-l_ . . › 'JIEMLIKYIIQLWFAYAI ÍÁIIIIIZIAIDIQE v HÇIRWAIÇItqAÍRIIQE r 7M? ÍIIVAEÇZCKQIBICJHIÍOITñãllllinü» »invasão «amaro» Asaammnnrç:
  3. 3. numa: !UL IÇJÃIIIÇI A FIIIYIII_ I Inpxaaigxcim Llvllnñ) L l Iluminada¡ dum lnifdujm aka 34th' ! jInIàI 'làinliííalííeióra ; mm ! I EISÍÍIFÍÍÍÓL, *galiza ; pra m ¡¡I; I.1¡¡Ig› 'glgLjgr-_I lniialmglr* ! IOIÍII pintar-guria: ;II- nnsniixata. an¡ : i : m: @LL-t 92h ¡illill-IIÕA, stixqlulmv: : ; Inu állgljilfê àltpillàraiíivloi: : 912ml aliialíiplilçiiíçlcg, ?iálÍ-Ifaílfi- a WCÊ»
  4. 4. "i Í 'll É _ÍQIT_I-'_: !IL tri_ : :IA l' ! ÍÊÊÍCÍFIÍHÉ CI : hminiirei a: ,af-Jr _Iiiiallplíaiial-IIQI : Elim Í-Iiowbiálrl C7:|5I_= LÇ; :|! :l6I A ? liam _ "vital iliiçIaml ' êiíali" 'E "Im giiíg- ÍhiÍgHiIiE/ LÕ , links aralr. tígllilals- : te: êhiíllçs, e1cliipiik; gàidl. CI em, its iiiiullà, çlçbríolfíbñín, fito »iãllãl íãlll-Iiâlílhãl! ,L O: :EIÍàVEIIÍÍâÍÊ a¡ pnjgiuis rqglkgl>rílãkgí 'nasua íIIaIr-_I Czeldrw
  5. 5. HTML ESTRUTURA Dw : Ie Em »Im Insert Madih Farma! Command; SIÍE Window Help @v p» g. . Designer . UnIIIlea-x' XI S* I I di suit Des-un Live EQ. IU. 4m. u: t4. We- n. Í <IDOCTYPE htm1> 2 <htm1> f: z< <head> w S L/ head> a <bOdy> E </ body> e </ html> l<heaa>l Mayana IK/ lse( Ur¡1›dENI'F$)J ' : mma-w Ínr mu. " L I-dx 555m5 . All ; img M¡ as musas wy m 02 mnznl selection Please ; sem : uma clamam m se: whdi css provem; apdy. m. . ' I m css Mes »dv m me : :lema lag. a _ã Deskíw Items
  6. 6. HTML é - SINTAXE O código HTML é formado por elementos (ou tags), e cada elemento pode receber múltiplos atributos (alguns opcionais e outros não). Sua estrutura funciona assim: Elementos que recebem conteúdo: Estes elementos precisam abrir e fechar, descrito dessa forma: <elemento> </ elemento> <elemento atributo= "vaIor" atributo2="valor"> conteúdo </ elemento> Elementos que não recebem conteúdo: Estes elementos não abrigam nenhum conteúdo dentro deles, portanto fecham na mesma linha com um espaço e uma barra, dessa forma: <elemento / > <elemento atr¡buto= "valor" atributo2="valor" / >
  7. 7. HTML SINTAXE Dw File Edil View IVTSER I-'Iudlwlj' WML¡ I cade ÊPII( I Dawn LIVE Format Command; si-. e xviiiaaii -ielp @v o. g. . Designer . a . hà. o. Im. v'. m'. I'M: : Wmdapáa-va 555m. ; , NI : Mag <bodv> v I 2 s, < I DOCTYPE html> <htm1> <head> <meta charset: "utf-8" / > <title>TítulO da página</ tit1e> </ head> <body> <h1>Tome muito líquido. </h1> <p> O1á! <br / > Eu sou O Dollyinho. Seu amiguinho! </ p> <img srC: "imagens/ dollyinho. jpg" </ bOdy> </ htm1> alt: "DOllyinhO" / > »</ 15s: Urlmde (uma) 4 ' ' Summlw Inrsukmnn Nu css Vüüahes awty m me mnent ; amam Please selada sMed elevam( m see mai css nmoerhesawlv. Nu css HÀQSEPPIY ln lhe ; gema lag. Pvdilmu Lli-j. ” i_ iii_ a 3 Deifw icms
  8. 8. É “ÇUIÀII-. ÇÂXIÍIÇÊI / FIIEIi1tARiíC1IJ. lA. l' A ; I-iil! l'l! I'I_= ,I : Im allmlt. “Eiilwlãlsi sita . uam hnalpalrquílai 01h12"? 'êlialillãlliiolsg“ÇILEIHEIÉIEI dia : nraç-iílíczgi. !Ia-iam *Tenma ? IQBTFÍÍÍYÍÊÍI : atuar mm ! me : Ilan-s: #lamentou-i qmiítannhnmi quiilw. . 316: sem¡ 1-jII= I7'; ›:(; IíI¡IpIIoI'Ê›- ip: - E 'tardio WÂp» 41-113;a-r-: Winnrany-Ialqlçnllmnlinsxayg” zniañrmltunhuorl' b «Arleikm ! laliílálíiiélsi ¡Iliaiiíaiblinili i'll linrini ¡ÉÍIQJ pIçI-: Içtni IIIoII-_ní- “oiililiàla : Itannuçaniiçgqgtnigw ; OÍQÍÊÉÍUÍI éieliliiíisllslélzalli f_ . #tati
  9. 9. ;EI . =~! III_L= !nrr<i K1 . lYllíâlxlãí I tIÍIL. . 5.2x: : II: 5:1 'IJXC ÍÇR. fiat. Ir; ist, te'. “Ibi, lua. bz, :Ipir-. Ini, 'suenig ; m1, í-Ir, lili, QII, :II IIVÃVAXÉÍEÍIVAIE Illilg; ilsfllllnlllilií: QM, daloiü-IIL, inutil-az, °isroiftaw elíitdla, “again, íIr-. nu, ?Lil-ZH #QRJIVAIÉILÂJIÍELY ? gnt-t numa, ailíalcii. , “terceira, ;hatch-iai ÍVÀTEJaLIrA-*j ? Lari-Ita "ig, "till, 1h, lilllêlàlifl, iE-Ioniw item?
  10. 10. HTML ELEMENTOS MAIS UTILIZADOS Dw : IIQ EEIK Ievs Insert Nlndif; Format Command; SIÍE Window Help @- nv gv Designs . ;s - 5 X Untitled-l' xl a : sw é I ; E su. . Design LIVE HQ_ Ig_ as), sv_ F4, nas: PevmnagawsdeTI/ eãames M lí, V i ra_ ' <body> Summawlnvsclxvnn : ~ <section id: "conteudo"> gâíçwggalgsfgglmzmàtm 3 2 <h1>Personagens e suas frases</ h1> *= W"<**C55W"R= '°= “WV- t: ,li <artíc1e>| 'f <h2>Dollynho. </h2> , q. <p> _w_ R olá I<br / > ": ':sss, .aii. .i. ,=s_i * IZI u. Eu sou o Dollyínho. j: Seu amlgulnho! _NNW I ! â V: : </ p> m: DCEI'. T ' <img srC: "imagens/ dollyinho. jpg" a1t: "DollyinhO" / > l: :a </ article> ' v <artic1e> : a ! Alt <h2>Mario. </h2> as f! , <p> ? lg It'srarme! <br / > m Mario! *e* _ m. </ p> 'E ! AF <img srcdlimagens/ mario. jpg" a1t: "Mario" / > 4%' : A: </ artic1e> ; r um 'E 'I </ section> E g "' “Mm” a a'. Rede ; ny y </ body> a 3 Dednnvitzrvrs <body> <sechmamnremo> «ma» IK/ lse( urImdENTF$7
  11. 11. HTML ; . FORMULÁRIOS Os elementos de formulários renderizam na tela do usuário campos digitar/ selecionar. Esses dados podem ser armazenados em um banco de dados, por exemplo, enviados por e-mail, etc. Normalmente os campos são contidos dentro da tag <form>. EXEMPLO DE TIPOS DE INPUT: - text - radio - button - checkbox - submit - email - hidden OUTROS ELEMENTOS: - label, select, textarea, fieldset, legend
  12. 12. HTIIL FORMULÁRIOS Dw riIe : ai: Liei. Insert medir, Forma: Command; siie Window -Ieip @v -nv gv unmienq- xl UIIIIKIQGJ' x cesignei . fu I Enviar sai. ' ueegn LIVE MQ_ L9_ Im_ ev_ F4_ t' me: r¡ v <body> 1 "get" "backenmphp" 2 ¡ t? . "nome" Nome 3' : "text" "nome" "nome" o¡ z (à) KI : ~ Sexo: s; 2 '_ I» Masculino ITI "radio" "sexo" Ú o I? ! nl . z Feminino "radio" "sexo" "submit" "Enviar" "Mn n Fu IK/ lse: urlmdeñflTâ) 'ass-nei Vau have . me warm-s e. . the andei Yo Lvdaoe me (S5 Panel DV edit CSS properties : iddleíredw or press F5 o Refresh Ela; Asris L r Dskmp v Manag sms; loulñlu su Íyp E mesmo g z! - cm-mrami n a'. Rede a : i Deáífnwtzns
  13. 13. HTML ; . FORMULÁRIOS Dw me m m. Insert mamy Format Command; Sue Wmdow -mp @- -nv a! ” Deàwgnev . p UnmIrn-l- x' Unimed-Z' x a Í _ 555m5 1 WE! saint ' Dawn we FÉ. U 50v v'. F4, me: M ¡É! r¡ v <body> ' mmwummmn u, "get I' lvbackend _ php " na css Dmbühasaodvmmemnenl amam Nesse : dada ; mea mm: m see ma» css pmuemsapdy. ; If . "assunto" °~' "" Selecione um assunto o¡ z "Dúvidas" Dúvidas _e ¡ _ na. ; '= “ "Sugestões" Sugestões Nucssnksapñvtumesekmdtzq. 21 : m f* 3 movem: : _ l» "mensagem" Mensagem > V. J "mensagem" "mensagem" m a ~" . . . z "submlt" "Envlar" p: Í. "Í. </ body> mm a5) m. ; um; ír_ um» v Manag Sites loulñlu su Íyp E Deskhw g z! - cmrmramv 7¡ a'. Rede a : v Deáífnwltns <body> <inrm> lK/ lse: ummermraa 4 * ~
  14. 14. ÍVANSLÉl *t5 " CICÍLYUZÍEÊTFII? '. E'A§1L. _=! LE. 'Â'3 _LT_ _F AA, : iliiliiffhl . illuzxqíkm ; quim -ziçi-«r-iiaxvlelr +. › aapr, ¡r. LaÉ1s› 61h : IIMIL m n¡¡llt4eL-ñíe› , Élfiêlilêlkltl ; tem Mimi-Jair »sua EVIL¡ ; #19915111 alpilamlnhrdtenrall ta. ,-4 n _ EEE : Içküçi ! unxih x V _ Clima* ! it kit M¡ 'pfelllnanoíigti alan-kn: ÍEÍQIIJÍÉIEÍ! . VBICIÉ-nr' pIlêllllÍlll. E$3, Iáhiiílústr. , até; Lêkiijlliiillüil eu : :nuns _orâiígúllãü ! hi W135i,
  15. 15. HTML ; - TABELAS X CONCEITO TABLELESS Dw File Em¡ um ; um miami, Format (ommands SHE Wmdm: Help @v av à. uma» w ; a Umillcd-l' X Unimed-Z' X E* l _ (gsm- . E i Cade i spin Design Lim um_ 5,_ m, [>*'_ : z: f' Nie: 77v Vouhavemdedlamrsmihemde. n, <body> I rouvdaremecsspanzioredtcss ~ wwmsdidnnefyzyuurwrssñ. a x' t aula > ? r ¡ LL/ e Reis-à! l 1? e íth>segunda</ tní *I : 'tiwTerçaí/ th* n. z ~*h“>Sexta</ ti1 > (É) - s_ u_ . > l . lt L! .. z x / Lable» gi_ g. </ body> s; à , Q 'É v Managesites sn 11g
  16. 16. HTML TABELAS X CONCEITO TABLELESS DW me Unmlnnq- xl umiklcmz' x i 'me Split ' Desagn Live Em: Ma'. Insert media Format Command; Site Window -mp i3¡- «nv hà. su M. v'. F4. t' me: a! ” Designa . 'ass-ne¡ . .,. ,. m. . <body> < LaLL/ a LheaJ/ ítr h>Segundaf/ tn* h>Terça</ th> x: n>sexta</ Lh> / LL» / thoni “tr: dy* / fr> >HTML5 e CSSx/ >HTML5 e CS >Fireworks: / “/ tr* rfr> -'A2HTML5 e CSSx ~ >HTML5 e CS : td>Fireworks: /t “/ trà </ tr*1y> ~/ LaLle> num: umndemrrs) P -a Vau have . me manga e. . the mag. Yo Lvdaoe me (S5 Darei m edit CSS progamas, :iddleíredw ur press F5 o Reims! ! m_ um; . Dskmv v Manag se; loulñlu su Íyp a E mama g z! - : nv-mamy Wúnà a : v Deáífnviltns
  17. 17. SAIN( n: kits: : r il_: izfíríl_: eitiri e: Zimlçzelrnsmm ! ar : Fim - ; llfglfnliçllii-E ÍQIÍIIQÍÍQE¡ Lanna¡ trr ¡anabrsnuptívxalírr praia». linitss-: l: 'giram um rival-t). _ n = liçlmçinike› A ~ : m9 im' - 91h¡ . a w : i-: aqrânçraalãn elhvlñãléi! 4 _ÍIIIIQI »Iüguit-m: aq¡ ârtáíefWiíipril/ uuúunwléuzgllá. àiolnWiiáflígiliã'. qIylIN/ QP- ! hits “Inítçiuixgur 4:/ iiráífâvozâira. àmar/ 'üsvoüitç ! I ííüilflíwfiñí/ ek* . Immanuel, mike: ;qióliieiljl agrlikçxçpgm, llliíçllilgij) a nico mai, que É-uépjiaifn¡ ? à 1I| §IId= ^I'r“§IaII: i
  18. 18. .ÂIIIIÉUÍIIÂÊAÊÊ3 : i n_li: iãirtfil. :eitlr: al _-1I: iaerãi: iiç»›: ?tira allêlhilaluiískí *guia ! Glitter-in : ítgumfran xaiafànn-íhi il : Itauna EIÍÉIUÍYÍQ¡ Iii-nim! m. : íálfliléíítll, «gi-mm , lJÍlr-_I iiiraigginn¡ 9lI. l ! meu aux-rpm», íkçxvxgxíf-"Eíiêlliiãlf" : :Langue -iiçihllhnmz A! :(! ,l! l.v19l ; mx L'l_I§Í. -ÍÍ. 'AY_A mu m: QIQIIÃVMIHIQLJ __; :1:(el!1lY19› ami ! Imm : us-rm ! liinlliül _II: L§: I! I:r. -: tunaugçi¡pyleiçnliunhmpig Állifêllllilâl ! I'll ! llYAll #LUVA : Iklllibñ ! IA ANUAL: : . ,,iozksillun'nro›. iipxg; : i:(g1!iiv1ç› @ill evíxçumx ; um ! nviiaungi 50ICl§| :lñlÇ› kliiwilqllêel): j¡a¡nI/ lvlvmvmvzggxçmalignas¡n¡
  19. 19. HTML SEMÂNTICA E ACESSIBILIDADE SEO em HTML: Search Engine Optimization. É uma técnica de escrever um Código limpo e bem estruturado que pode ser lido por aparelhos de busca de forma a facilitar o entendimento do conteúdo da página, para que os usuários encontrem o que procuram na WEB. SEMÂNTICA: Basicamente é significado. O HTML5 trouxe uma série de tags para aprimorar a contextualização das páginas, como section, article, header, etc. Uma página semântica é uma página da qual uma pessoa ou robô que nunca viu o código consiga identificar o que é cabeçalho, rodapé, navegação, conteúdo, dados de contato, etc. ACESSIBILIDADE: Deficientes visuais, auditivos também acessam sites através de ferramentas como leitores de tela por exemplo. É sempre importante pensar em todos os tipos de usuário. O atributo alt por exemplo é essencial em imagens para descrever o que é aquele item.
  20. 20. HTML ; _ ATIVIDADE Construa uma página WEB simples contendo elementos que aprendeu nesta aula. Você pode fazer um currículo seu (com link para redes sociais por exemplo), uma lista de filmes que mais gosta, um formulário para enviar um e-mail de dúvidas, etc. DICAS: Tente desenhar no papel ou imaginar como é sua página e depois faça o exercício de escolher os elementos que usará no HTML para exibi-Ios. Não deixe de perguntar para os colegas e ao professor quando tiver dúvidas

×