Des Web 1 Semana1

<Ê1Ê>
Prof.ÊMe.ÊRogérioÊPaiva
rogeriopaiva.com.br
BOOTSTRAP
MaterialÊDidá co:ÊDisciplinaÊArteÊeÊDesignÊI
HTMLÊeÊCSS
ProgramaçãoÊWEBÊ1Ê—Informá caÊparaÊInternet—HTMLÊeÊCSS
Prof.ÊRogérioÊB.ÊPaiva
<Ê2Ê>
ApresentaçãoÊdoÊmaterial
VocêÊ estáÊ recebendoÊ umaÊ apos laÊ daÊ disciplinaÊ

HTML5ÊeÊCSS3.
EsteÊmaterialÊdidá coÊestáÊsendoÊcons tuído,ÊlevandoÊ
emÊconsideraçãoÊoÊperfilÊeÊasÊnecessidadesÊdosÊalunos.Ê
OÊ mesmo,Ê recebeÊ melhoriasÊ aÊ cadaÊ novaÊ versão,Ê porÊ
isso,ÊpeçoÊqueÊencaminheÊsuasÊsugestõesÊsempreÊqueÊ
acharÊoportunoÊviaÊcontatoÊdoÊprofessor.
Recomendo,Ê antesÊ deÊ vocêÊ começarÊ osÊ seusÊ estudos,Ê
queÊverifiqueÊasÊdatas-chaveÊeÊelaboreÊoÊseuÊplanoÊdeÊ
estudoÊpessoal,Êgaran ndoÊassimÊaÊboaÊprodu vidadeÊ
doÊcurso.Ê
DesejoÊaÊvocêÊumÊexcelenteÊcurso!
ProfessorÊMe.ÊRogérioÊBarrosÊdeÊPaiva
<Ê3Ê>
PalavraÊdoÊprofessorÊmediador
SaudaçõesÊPessoal!
FelizÊporÊpoderÊatuarÊcomÊvocêsÊnoÊcursoÊINFORMÁTI-
CAÊÊparaÊINTERNET.ÊTenhoÊcertezaÊqueÊiremosÊaprenderÊ
muitoÊjuntos.
Currículo:
RogérioÊBarrosÊdeÊPaivaÊéÊprofessorÊefe voÊnoÊIFÊdoÊSulÊ
deÊMinasÊ–ÊTrêsÊCorações.ÊMestreÊemÊAdministraçãoÊdeÊ
EmpresasÊ pelaÊ FEADÊ naÊ linhaÊ deÊ pesquisaÊ deÊ Estraté- Prof.ÊMe.ÊRogérioÊBarrosÊdeÊPaiva
giasÊAdministra vasÊcomÊfocoÊemÊGestãoÊdoÊConhecimentoÊeÊPortaisÊCorpora vos,ÊpossuiÊ

duasÊEspecializações;ÊaÊprimeiraÊemÊAdministraçãoÊdeÊSistemasÊdeÊInformaçãoÊpelaÊUFLAÊ
eÊaÊsegundaÊemÊMarke ngÊeÊGestãoÊdeÊNegóciosÊpelaÊUninCor,ÊformadoÊpeloÊUNISÊemÊCi-
ênciaÊdaÊComputação,ÊtambémÊéÊTécnicoÊemÊEletrônicaÊeÊumÊeternoÊestudante.ÊSouÊpaiÊdeÊ
MatheusÊeÊPalmeirenseÊfaná co.ÊProfissionalmente,ÊtrabalhoÊcomÊinformá caÊdesdeÊmeusÊ
14ÊanosÊdeÊidade,ÊfuiÊprogramador,ÊwebÊdesignerÊeÊgestorÊdeÊTecnologiaÊdaÊInformação.ÊÊ
AtuoÊnaÊáreaÊacadêmicaÊdesdeÊ2006.ÊAtualmenteÊCoordenadorÊdoÊCEADÊdeÊTrêsÊCorações.
Sí o:Êmeusite.rogeriopaiva.com.br
E-Mail.:Êrogeriobarros.paiva@ifsuldeminas.edu.br
ComunicadoÊimportante!
TodosÊ osÊ dadosÊ apresentadosÊ nasÊ a vidadesÊ desteÊ cursoÊ

sãoÊfic cios,ÊassimÊcomoÊosÊnomesÊdeÊempresasÊqueÊnãoÊ
sejamÊexplicitamenteÊmencionadosÊcomoÊfactuais.
SendoÊassim,ÊqualquerÊ poÊdeÊanáliseÊfeitaÊaÊpar rÊdessesÊ

dadosÊnãoÊtemÊvínculoÊcomÊaÊrealidade,Êobje vandoÊape-
nasÊexplicarÊosÊconteúdosÊdasÊaulasÊeÊpermi rÊqueÊosÊalu-
nosÊexercitemÊaquiloÊqueÊaprenderam.
<Ê4Ê>
1
HTML—Introdução
HTMLÊ(Semân ca)ÊeÊCSSÊÊ
CoresÊeÊTipografia
2
HTMLÊ(Mídias)
3 CSS—IntroduçãoÊ
HTML—Links,
ListasÊeÊFormulários 4
<Ê5Ê>
CSS—PosicionamentosÊ
5 eÊAjustes—Gestalt
HTMLÊeÊCSS,Ê
efeitosÊeÊanimações
6
CONTEÚDOSÊEXTRAS
7
FRAMEWORKS
EÊAPLICATIVOS
8
<Ê6Ê>
SUMÁRIO
SEÇÃOÊ1:ÊINTRODUÇÃO
CAPÍTULOÊ0Ê–ÊE Ê ÊC
0.1Ê–ÊConteúdoÊProgramá co .................................................................................................... 11
0.2Ê–ÊPPCÊ–ÊProjetoÊPedagógico.................................................................................................. 12
0.3Ê–ÊApresentaçãoÊdoÊmaterial ................................................................................................. 12
CAPÍTULOÊIÊ–ÊC ÊB
1.1Ê–ÊConceitoÊdeÊsite,Êportal,Êmini-site,ÊhotsiteÊeÊblog ............................................................. 15
1.2Ê–ÊConceitoÊdeÊbackendÊeÊfrontend ....................................................................................... 16
1.3Ê–ÊCamadasÊdeÊdesenvolvimentoÊWEB .................................................................................. 17
1.4Ê–ÊUmÊpouquinhoÊsobreÊW3CÊeÊHTML ................................................................................... 18
1.5Ê–ÊRegistroÊeÊhospedagem ..................................................................................................... 19
1.6Ê–ÊFerramentasÊparaÊdesenvolvimento ................................................................................. 20
1.7Ê–ÊPrincipaisÊEditores ............................................................................................................. 21
1.8Ê–ÊPrincipaisÊIDE’s ................................................................................................................... 23
1.9Ê–ÊFerramentasÊdoÊdesenvolvedor ........................................................................................ 26
1.10Ê–ÊExibiçãoÊdoÊcódigoÊfonte ................................................................................................. 26
1.11Ê–ÊConceitoÊdeÊcross-browser .............................................................................................. 27
<Ê7Ê>
Ícones
ATENÇÃO:Ê ApontaÊ umaÊ observaçãoÊ significa va.Ê
PodeÊ serÊ encaradoÊ comoÊ umÊ sinalÊ deÊ alertaÊ queÊ oÊ
orientaÊparaÊprestarÊatençãoÊàÊinformaçãoÊindicada.
VÍDEO:Ê ApontaÊparaÊaÊdiscussãoÊsobreÊumÊvídeoÊnaÊ
salaÊvirtual
DISCUSSÃO:Ê IndicaÊ oÊ inícioÊ deÊ umaÊ discussãoÊ u li-

zandoÊaÊsalaÊvirtual.
IMPORTANTE:Ê UsadoÊ paraÊ indicarÊ umÊ conteúdoÊ

importanteÊdaÊdisciplina.
PENSAR:Ê IndicaÊ queÊ vocêÊ deveÊ refle rÊ sobreÊ oÊ as-

suntoÊabordadoÊparaÊumÊpossívelÊques onamento.
PESQUISAR:Ê IndicaÊqueÊ vocêÊdeveÊpesquisarÊ sobreÊ

oÊ assuntoÊ abordadoÊ paraÊ umÊ possívelÊ ques ona-
mento.
REALIZE:Ê DeterminaÊaÊexistênciaÊdeÊa vidadeÊaÊserÊ

realizada.Ê EsteÊ íconeÊ indicaÊ queÊ háÊ umÊ exercício,Ê
umaÊtarefaÊouÊumaÊprá caÊparaÊserÊrealizada.
SAIBAÊ MAIS:Ê ApresentaÊ informaçõesÊ adicionaisÊ

sobreÊ oÊ temaÊ abordadoÊ deÊ formaÊ aÊ possibilitarÊ aÊ
obtençãoÊdeÊnovasÊinformaçõesÊaoÊqueÊjáÊfoiÊrefe-
renciado.
DICASÊDEÊLEITURA:ÊIndicaÊtextosÊ/ÊlivrosÊdeÊreferên-
ciaÊu lizadosÊnoÊcursoÊeÊtambémÊfazÊsugestõesÊparaÊ
leituraÊcomplementar.
REVISÃO:Ê IndicaÊ aÊ revisãoÊ doÊ conteúdoÊ abordadoÊ

naÊdisciplina.
DICASÊ DEÊ LINKS:Ê IndicaÊ umÊ linkÊ (ligação),Ê sejaÊ eleÊ

paraÊoutraÊpáginaÊdoÊmóduloÊimpressoÊouÊendereçoÊ
deÊInternet.
<Ê8Ê>
CAPÍTULO
1—ConceitosÊbásicosÊ
OláÊpessoal,Êsaudações!
SejamÊbem-vindosÊaoÊcursoÊDesenvolvimentoÊWEBÊdoÊIFSULDEMINASÊCampusÊAvançadoÊdeÊTrêsÊCora-
ções.ÊSeÊvocêÊchegouÊatéÊaquiÊéÊporque,ÊdeÊalgumaÊforma,ÊvocêÊtemÊinteresseÊemÊdesenvolverÊsitesÊeÊ
aplicaçõesÊparaÊInternet.
NesteÊprimeiroÊmomento,ÊestudaremosÊaÊlinguagemÊHTML5.ÊAoÊfinalÊdoÊcursoÊvocêÊteráÊplenaÊcapaci-
dadeÊdeÊdesenvolverÊumÊ siteÊu lizandoÊ essaÊ linguagem.Ê FaremosÊumÊprojetoÊ final,Ê emÊ cadaÊumaÊ dasÊ
disciplinas.
EsteÊ cursoÊ éÊ introdutório,Ê garan ndoÊ queÊ vocêÊ daráÊ osÊ primeirosÊ passosÊ comÊ aÊ criaçãoÊ deÊ websites,Ê
masÊvocêÊnãoÊdeveÊpararÊporÊaqui.ÊOÊHTMLÊéÊapenasÊaÊbaseÊparaÊqualquerÊsite,ÊmasÊtenhaÊemÊmenteÊ
que,ÊquantoÊmaisÊrecursosÊoÊsiteÊ verÊparaÊosÊusuáriosÊmaisÊtecnologiaÊestáÊenvolvidaÊnaÊcriaçãoÊdesseÊ
site.
OÊqueÊvamosÊestudarÊnesteÊcapítulo
· ConceitosÊdeÊsiteÊeÊportal; · FerramentasÊparaÊDesenvolvimento;
· ConceitosÊdeÊbackendÊeÊfrontend; · FerramentasÊdoÊDesenvolvedor;
· CamadasÊWEB; · ExibiçãoÊdeÊCódigoÊFonte;
· ConceitoÊeÊhistóricoÊdoÊlinguagemÊ · ConceitoÊdeÊCross-browser;
HTML; · Compa bilidadeÊentreÊnavegadores
· Hospedagens;
<Ê9Ê>
1.1—ConceitosÊdeÊsite,Êportal,Êmini-site,ÊhotsiteÊeÊblog
QuantasÊnomenclaturasÊnão!?ÊBem,ÊéÊimportanteÊterÊemÊmenteÊaÊ
diferençaÊentreÊeles.ÊAÊinternetÊéÊcheiaÊdeÊsurpresasÊeÊtodoÊsiteÊ
precisaÊdeÊacessosÊparaÊseÊmanteremÊnoÊarÊ(SeÊnãoÊháÊacesso,Ê
praÊquêÊexis r?ÊNãoÊéÊmesmo?).ÊNaÊinternetÊexisteÊdiferentesÊ
formasÊparaÊatrairÊoÊpúblicoÊeÊoÊconteúdoÊéÊoÊmaisÊimportante.Ê
VamosÊpar rÊdoÊprincípioÊqueÊtodaÊpessoaÊqueÊnavegaÊnaÊinter-
netÊestáÊàÊprocuraÊdeÊinformação,ÊnãoÊéÊverdade?
Assim,ÊexistemÊdiferentesÊformasÊparaÊpoderÊprenderÊoÊusuárioÊouÊ
mesmoÊorganizarÊaÊinformaçãoÊparaÊqueÊoÊinternautaÊsinta-seÊaÊvontadeÊcomÊoÊconteúdoÊqueÊ
estáÊlendo.
AÊprincipalÊdiferençaÊentreÊosÊconceitos,ÊéÊoÊmodoÊcomoÊaÊinformaçãoÊestáÊorganizada.ÊVejamosÊ
osÊconceitosÊabaixo:
OÊSITE
EmÊportuguês,ÊoÊcorretoÊéÊchama-loÊdeÊsí oÊok!Ê:-)
Então,ÊoÊsí oÊéÊumÊespaçoÊqueÊcontémÊinformaçõesÊcomÊoÊobje voÊdeÊestrutura-laÊdeÊformaÊhi-
erárquicaÊ todoÊ oÊ seuÊ conteúdo.Ê Assim,Ê facilitaráÊ oÊ acessoÊ dosÊ internautasÊ aoÊ conteúdoÊ
(informação)ÊqueÊoÊ sí oÊestáÊcompar lhandoÊnaÊWEB.ÊPorÊisso,ÊantesÊdoÊdesenvolvimentoÊdeÊ
umÊsí o,ÊéÊnecessárioÊumÊplanejamentoÊeÊveremosÊissoÊemÊfuturosÊcapítulos.
PORTAL
ErrouÊquemÊpensouÊqueÊumÊportalÊéÊumÊ“montão”ÊdeÊsitesÊrsrs.ÊAsÊcoisasÊnãoÊfuncionamÊassim.Ê
UmÊportalÊtemÊcomoÊcaracterís caÊprincipalÊoÊfocoÊnoÊpúblicoÊalvoÊdoÊmesmo,ÊgerandoÊconteú-
dosÊespecíficosÊqueÊchamamosÊdeÊ“conteúdosÊver cais”.ÊParaÊa ngirÊesteÊpúblico,ÊoÊportalÊpos-
suiÊ diversosÊ recursosÊ paraÊ construirÊ umÊ relacionamentoÊ sólidoÊ comÊ oÊ internauta.Ê ComoÊ porÊ
exemploÊfóruns,Êenquetes,ÊchatsÊparaÊaÊconstruçãoÊdeÊconhecimento,ÊferramentasÊdeÊrelaciona-
mentoÊentreÊoutros.Ê
HOTSITE
BastanteÊ usadoÊ porÊ umÊ siteÊ ouÊ portalÊ paraÊ oÊ lançamentoÊ deÊ umÊ produto,Ê serviço,Ê eventoÊ ouÊ
mesmoÊ umaÊ grandeÊ promoção.Ê Assim,Ê criamosÊ hotsitesÊ comÊ prazoÊ deÊ validade.Ê ÉÊ comumÊ terÊ
apenasÊumaÊpáginaÊouÊpoucasÊpelasÊcaracterís casÊdoÊconteúdoÊemÊquestão.ÊOÊlayoutÊ(leiauteÊ
emÊ português)Ê éÊ bastanteÊ persuasivoÊ eÊ seuÊ visualÊ eÊ bemÊ diferenciadoÊ doÊ restanteÊ doÊ siteÊ ouÊ
portal.Ê
<Ê10Ê>
MINI-SITES
PodemosÊdizerÊqueÊsãoÊosÊconteúdosÊver caisÊproduzidosÊparaÊosÊportais.ÊOsÊminisitesÊabordamÊ
deÊformaÊdetalhadaÊumÊtemaÊespecíficoÊdoÊ portal.ÊElesÊpodemÊserÊfixosÊouÊ flutuantes.ÊVisual-
mente,Êcomportam-seÊcomoÊosÊhotsites,ÊporémÊcomÊaÊpropriedadeÊessencialmenteÊinforma vo.
BLOG
GeralmenteÊéÊman doÊporÊumaÊpessoa.ÊNeste,ÊsãoÊfeitosÊ“posts”,ÊpostagensÊsobreÊumÊassuntoÊ
qualquerÊdeÊformaÊcronológica.ÊOÊtermoÊblogÊvemÊdeÊweBÊ+ÊlogÊ(queÊsignificaÊregistroÊemÊor-
demÊcronológica)Ê
1.2—ConceitosÊdeÊbackendÊeÊfrontend
BemÊ pessoal,Ê quandoÊ estamosÊ desenvolvendoÊ

paraÊinternet,ÊpodemosÊtrabalharÊcomÊdoisÊ posÊ
deÊ linguagens:Ê asÊ chamadasÊ linguagensÊ cliente-
sideÊ (frontend)Ê eÊ asÊ linguagensÊ server-sideÊ
(backend)
AsÊ linguagensÊ cliente-sideÊ (frontend)Ê sãoÊ lingua-

gensÊondeÊoÊresponsávelÊporÊprocessarÊeÊprinci-
palmenteÊinterpretarÊosÊseusÊcódigosÊéÊoÊBROWSER.ÊIssoÊmesmo,ÊseuÊnavegador.ÊEstasÊlingua-
gensÊirãoÊrodarÊnaÊmáquinaÊdoÊcliente.
JáÊasÊlinguagensÊserver-sideÊ(backend),ÊÊsãoÊlinguagensÊqueÊumÊSERVIDORÊdeveráÊprocessar.ÊAs-
sim,ÊalguémÊescreveÊumÊcódigoÊdeÊprogramaçãoÊeÊesteÊéÊprocessadoÊparaÊoÊservidor,ÊqueÊficaÊ
responsávelÊporÊencaminharÊparaÊoÊnavegadorÊaÊsuaÊresposta.
Ê
PorÊexemplo:ÊseÊcriarmosÊumÊscriptÊemÊlinguagemÊback-endÊ(PHP,ÊAsp,ÊJava,ÊRuby,Êetc)ÊqueÊape-
nasÊcalculaÊaÊsomaÊdeÊ2Ê+Ê2,ÊseráÊoÊSERVIDORÊ(ouÊback,ÊoÊserver)ÊqueÊcalcularáÊesteÊresultadoÊeÊ
encaminharáÊparaÊoÊbrowser.ÊSeÊusarmosÊumaÊlinguagemÊfront-end,ÊcomoÊoÊJavaScript,ÊquemÊ
calcularáÊoÊresultadoÊéÊoÊBROWSERÊdoÊusuário.Ê
Assim,ÊtambémÊexisteÊumaÊcertaÊseparaçãoÊentreÊosÊprogramadoresÊparaÊweb.ÊAlgunsÊsãoÊpro-
gramadoresÊfront-endÊeÊoutrosÊback-end.Ê
PesquiseÊnaÊinternet.ÊQuaisÊasÊlinguagensÊusadasÊcomoÊbackendÊeÊfrontend?
<Ê11Ê>
1.3—CamadasÊdeÊDe-
senvolvimentoÊWEB
ParaÊ programarÊ paraÊ web,Ê precisamosÊ saberÊ queÊ

atualmenteÊexistemÊtrêsÊcamadasÊparaÊpassarÊeÊcon-
cre zarÊumÊbomÊprojeto.
AÊ primeiraÊ camadaÊ éÊ aÊ camadaÊ deÊ conteúdo.Ê EssaÊ

camadaÊéÊformadaÊpelaÊlinguagemÊHTMLÊqueÊatual-
menteÊestáÊemÊsuaÊversãoÊ5.0.ÊÉÊondeÊoÊprograma-
dorÊ temÊ aÊ responsabilidadeÊ deÊ darÊ significadoÊ àÊ in-
formaçãoÊeÊestrutura-laÊdeÊformaÊhierárquica.
AÊsegundaÊcamadaÊéÊaÊcamadaÊdeÊformatação.ÊEssaÊcamadaÊéÊformadaÊpelaÊlinguagemÊCSSÊqueÊ
atualmenteÊestáÊemÊsuaÊversãoÊ3.0.ÊÉÊondeÊoÊprogramadorÊiraÊembelezarÊouÊsejaÊes lizarÊtodoÊoÊ
conteúdoÊinseridoÊnaÊprimeiraÊcamadaÊcomÊoÊHTML.Ê
AÊterceiraÊeÊúl maÊcamadaÊéÊaÊdeÊinteraçãoÊouÊtambémÊchamadaÊdeÊcomportamento.ÊAÊlingua-
gemÊ responsávelÊ porÊ estaÊ camadaÊ éÊ oÊ javaScript.Ê (Cuidado,Ê nãoÊ confundamÊ comÊ aÊ linguagemÊ
java.ÊSãoÊlinguagensÊcompletamenteÊdiferentesÊeÊcomÊfinalidadesÊdiferentes.)ÊÉÊondeÊoÊprogra-
madorÊcontrolaÊoÊcomportamentoÊdoÊconteúdoÊHTML,Êpermi ndoÊaÊinteraçãoÊentreÊusuáriosÊeÊ
oÊsí o.
<Ê12Ê>
1.4—UmÊpouquinhoÊsobreÊÊW3CÊÊeÊHTML
AÊlinguagemÊHTMLÊ(HyperTextÊMarkupÊLanguage).ÊEmÊpor-
tuguês,Ê LinguagemÊ deÊ marcaçãoÊ deÊ hipertexto;Ê foiÊ criadaÊ
peloÊpróprioÊcriadorÊdaÊweb,ÊTimÊBerners-Lee.ÊEleÊlogoÊper-
cebeuÊqueÊeraÊnecessárioÊumÊórgãoÊparaÊregulamentar,Êcri-
arÊ eÊ manterÊ padrõesÊ WEB.Ê SurgiuÊ aíÊ oÊ W3CÊ (WorldÊ WideÊ
WebÊConsor um).ÊEstaÊlinguagemÊéÊinterpretadaÊpelosÊna-
vegadores.Ê EscrevemosÊ emÊ HTMLÊ atravésÊ dasÊ TagsÊ
(E quetas).Ê NaÊ maioriaÊ dasÊ TAGsÊ doÊ HTML,Ê existeÊ umaÊ
aberturaÊ eÊ umÊ fechamento.Ê IssoÊ éÊ importanteÊ paraÊ infor- TimÊBerners-Lee
marÊ aoÊ navegadorÊ quandoÊ começaÊ eÊ quandoÊ terminaÊ umaÊ determinadaÊ CriadorÊdaÊWEBÊeÊHTML
configuração.
EsseÊconsórcioÊnãoÊtemÊfinsÊlucra vosÊeÊéÊapoiadoÊporÊdiversasÊempresasÊcomoÊGoogle,ÊMicro-
so ,Ê Samsung,Ê Apple,Ê MozillaÊ entreÊ outrasÊ (emÊ 13/03/2017Ê eramÊ 451Ê
membros).ÊAcesseÊemÊÊh p://www.w3.org/Consor um/Member/ListÊ.
EssasÊ organizaçõesÊ ajudamÊ naÊ melhoriaÊ doÊ consórcioÊ enviandoÊ anual-

menteÊumaÊsérieÊdeÊsugestõesÊeÊatéÊmesmoÊdisponibilizandoÊseusÊcola-
boradores.
ImportanteÊ dizerÊ queÊ oÊ W3CÊ nãoÊ éÊ responsávelÊ pelaÊ criaçãoÊ deÊ linguagensÊ comoÊ oÊ HTMLÊ porÊ
exemplo.ÊAlguémÊpodeÊcriarÊumaÊlinguagemÊeÊsubmete-laÊaoÊconsórcioÊsugerindoÊqueÊfaçaÊpar-
teÊ doÊ consórcio.Ê IssoÊ ocorreuÊ comÊ aÊ linguagemÊ javaScriptÊ queÊ foiÊ desenvolvidaÊ pelaÊ empresaÊ
EcmaÊeÊatéÊmesmoÊaÊversãoÊnovaÊdoÊHTML,ÊaÊversãoÊ5,ÊiniciadaÊpeloÊgrupoÊdeÊdesenvolvedoresÊ
chamadoÊWhatWG.Ê
ConheçaÊmaisÊem:Êh p://www.w3.org
<Ê13Ê>
1.5—RegistroÊeÊHospedagem
ParaÊqueÊnossaÊpáginaÊestejaÊnoÊ“ar”,Ê
ouÊseja,ÊestejaÊdisponívelÊparaÊoÊmun-
doÊtodoÊacessar,ÊéÊnecessárioÊqueÊte-
nhamosÊumÊservidorÊdeÊhospedagem.Ê
Assim,Ê existemÊ serviçosÊ queÊ sãoÊ pa-
gosÊeÊoutrosÊqueÊsãoÊgratuitos.
PesquisemÊ naÊ internetÊ hospedagensÊ

registro.br
gratuitasÊeÊpagas.ÊQuaisÊasÊvantagensÊeÊdesvantagens?
ImportanteÊlembrarÊqueÊoÊendereçoÊdeÊumÊsí o,ÊaquiÊnoÊBrasilÊéÊcontrola-
doÊpeloÊwww.registro.br.ÊAssim,ÊcasoÊdesejaÊterÊumÊendereçoÊcomoÊ
www.nomesuaempresa.com.brÊéÊnecessárioÊacessar,ÊcadastrarÊeÊverificarÊaÊdisponibilidadeÊdoÊ
endereçoÊdesejado.
<Ê14Ê>
1.6—FerramentasÊparaÊdesenvolvimento
ParaÊoÊdesenvolvimentoÊdeÊnossasÊpáginasÊWEB,ÊvamosÊprecisarÊdeÊferramentasÊparaÊaÊinserçãoÊ
dosÊcódigos.ÊAÊinternetÊhojeÊpossuíÊumaÊinfinidadeÊdeÊferramentasÊparaÊajudarÊoÊdesenvolvedorÊ
naÊ produção.Ê ExistemÊ duasÊ categorias:Ê AsÊ ferramentasÊ EditoresÊ eÊ asÊ ferramentasÊ IDEsÊ
(IntegratedÊDevelopmentÊEnvironment)ÊouÊAmbienteÊIntegradoÊdeÊDesenvolvimento.
AÊdiferençaÊentreÊelesÊestáÊprincipalmenteÊnaÊquan dadeÊdeÊrecursos.Ê
OsÊ Editores,Ê sãoÊ ferramentasÊ maisÊ simplesÊ eÊ naÊ maioriaÊ dasÊ vezesÊ maisÊ rápidas;Ê sãoÊ bastanteÊ
usadosÊporÊprogramadoresÊfront-end.
ExistemÊ muitosÊ editoresÊ queÊ trabalhamÊ comÊ oÊ recursoÊ deÊ apresentaçãoÊ dosÊ diretóriosÊ
(GeralmenteÊissoÊéÊfeitoÊatravésÊdeÊcriaçãoÊdeÊprojeto).ÊIssoÊfacilitaÊbastanteÊaÊvidaÊdoÊdesenvol-
vedorÊqueÊnãoÊprecisaÊficarÊabrindoÊpastasÊoÊtempoÊtodo.
AsÊ IDEsÊ sãoÊ própriasÊ paraÊ desenvolvimentosÊ deÊ sistemasÊ WEBÊ grandesÊ eÊ comÊ complexidadeÊ
maisÊalta;Êestas,ÊsãoÊmaisÊusadasÊporÊprogramadoresÊback-end.ÊPossuemÊdiversosÊrecursosÊex-
trasÊemÊrelaçãoÊaosÊeditoresÊcomo:
¨ PodemÊcontrolarÊversõesÊdeÊso ware;
¨ SincronizaçãoÊdeÊarquivosÊporÊdiversosÊprotocolos;
¨ DepuraçãoÊdeÊcódigos;
¨ TestesÊentreÊoutros.
TantoÊosÊeditoresÊquantoÊasÊIDEs,ÊpossuemÊoÊrecursoÊSyntaxÊHighligh ng,ÊqueÊsãoÊrecursosÊqueÊ
ajudamÊnaÊvisualizaçãoÊdoÊcódigoÊatravésÊdaÊdiferenciaçãoÊdeÊcores
AÊescolhaÊdeÊsuaÊferramentaÊdeÊproduçãoÊéÊtotalmenteÊpessoal.ÊAssim,ÊvamosÊdarÊumaÊolhadaÊ
emÊalgumasÊdisponíveisÊnoÊmercado.ÊInstale-asÊeÊmãosÊaoÊmouse!
<Ê15Ê>
1.7—PrincipaisÊEDITORES
SublimeÊText
sublimetext.com
Notepad++
notepad-plus-plus.org
<Ê16Ê>
PrincipaisÊEDITORESÊ(Continuação)
Atom
atom.io
PhpStorm
www.jetbrains.com
<Ê17Ê>
1.8—PrincipaisÊIDE’s
Eclipse
eclipse.org
NetBeans
netebeans.org
<Ê18Ê>
PrincipaisÊIDE’sÊ(Continuação)
VisualÊStudio
visualstudio.com/pt-br/
VisualÊStudioÊCode
code.visualstudio.com
Atenção
EsteÊéÊumÊEDITORÊdaÊMicroso
<Ê19Ê>
Aptana
aptana.com
<Ê20Ê>
1.9—FerramentasÊdoÊdesenvolvedor
QuandoÊestamosÊdesenvolvendo,ÊmuitasÊvezesÊéÊnecessárioÊverificarÊoÊqueÊoÊnavegadorÊinter-
pretouÊ deÊ nossoÊ código.Ê Assim,Ê todosÊ osÊ navegadoresÊ modernosÊ possuemÊ oÊ recursoÊ
“FerramentaÊdoÊDesenvolvedor”.ÊNaÊmaioriaÊdosÊnavegadoresÊeleÊpodeÊserÊacessadoÊpelaÊteclaÊ
F12.Ê
1.10—ExibiçãoÊdoÊcódigoÊfonte
DeÊumaÊformaÊmaisÊsimples,ÊéÊpossívelÊvisualizarÊoÊcódigoÊfonteÊdeÊumaÊpágina.ÊGeralmenteÊ
pressionamosÊoÊbotãoÊdireitoÊsobreÊelaÊeÊclicamosÊemÊCódigoÊFonteÊ(EssaÊnomenclaturaÊvariaÊ
deÊnavegadorÊparaÊnavegador,ÊmasÊtodosÊaÊpossuem).
<Ê21Ê>
1.11—ConceitoÊdeÊcross-browser
NemÊ tudoÊ queÊ desenvolvemosÊ éÊ compa velÊ comÊ todosÊ osÊ navegadoresÊ noÊ mercado.Ê Bem,Ê oÊ
conceitoÊdeÊcross-browserÊéÊoÊdeÊdesenvolverÊumaÊaplicaçãoÊtendoÊemÊmenteÊestaÊpreocupa-
ção.Ê
NemÊtodosÊosÊrecursosÊHTMLÊeÊCSSÊestãoÊdisponíveisÊemÊtodosÊosÊnavegadores.ÊPorÊisso,ÊmuitosÊ
recursosÊdevemÊserÊusadosÊcomÊjavaScriptÊcomoÊoÊHTML5Shiv,ÊcriadoÊporÊRemyÊSharp,ÊeleÊfazÊ
comÊqueÊosÊnavegadoresÊqueÊnãoÊconhecemÊaindaÊosÊnovosÊrecursosÊdoÊHTML5,ÊpassemÊaÊreco-
nhece-los.
ParaÊusa-lo,Êincluindo-oÊdiretamenteÊemÊseuÊcódigoÊdentroÊdaÊtagÊ<head>.

NãoÊprecisaÊseÊpreocuparÊcomÊaÊsintaxeÊapresentada.ÊNoÊdecorrerÊdoÊcurso,ÊestudaremosÊcomÊ
maisÊdetalhes.
PorÊenquanto,ÊesteÊcódigoÊestáÊdizendoÊqueÊcasoÊaÊpessoaÊestejaÊu lizandoÊoÊIEÊversãoÊ9ÊouÊan-
terior,ÊoÊscriptÊdeveráÊserÊexecutadoÊeÊcarregadoÊparaÊaÊcompa bilidade.
RecomendoÊfortementeÊaÊu lizaçãoÊdoÊcódigoÊacimaÊemÊtodosÊosÊprojetosÊqueÊforÊtrabalhar.
ParaÊconhecerÊasÊcompa bilidadesÊdosÊrecursos,ÊrecomendoÊfortementeÊverificarÊaÊdocumenta-
çãoÊnoÊW3C.ÊPorém,ÊexistemÊdiversosÊsitesÊqueÊapresentamÊdeÊformaÊbacanaÊasÊcompa bilida-
des .
<Ê22Ê>
CAPÍTULO
2—EstruturaÊbásicaÊdeÊumaÊpáginaÊHTML
OÊqueÊéÊHTML?
HTMLÊéÊaÊlinguagemÊdeÊmarcaçãoÊpadrãoÊparaÊaÊcriaçãoÊdeÊpáginasÊdaÊWeb.
HTMLÊsignificaÊHyperÊTextÊMarkupÊLanguage.ÊAssim,ÊaÊlinguagemÊHTMLÊnãoÊéÊumaÊlinguagemÊdeÊ
programaçãoÊeÊsimÊdeÊmarcação.ÊElaÊéÊlida/interpretadaÊpelosÊnavegadores.ÊElaÊpossuíÊelementosÊ
eÊatributosÊqueÊveremosÊmaisÊadiante.
<!DOCTYPE html>
<html lang=“pt-br”>
<head>
<meta charset=“UTF-8”>
<title>Titulo da Página</title>
</head>
<body>
<h1>Minha Primeira Página</h1>

<p>My first paragraph.</p>
</body>
</html>
PodemosÊexemplificarÊdeÊou-
traÊmaneira:
VejaÊaÊimagemÊ:
Somente o conteúdo da
seção body (área em
branco) é exibida em
um navegador.
<Ê23Ê>
ÉÊimportanteÊaquiÊsaberÊondeÊasÊlinguagensÊCSSÊeÊJavaScriptÊpodemÊserÊ
inseridasÊnesteÊcontextoÊdaÊestrutura.
ReparemÊqueÊambosÊosÊcódigosÊCSSÊeÊJavaScriptÊestãoÊdentroÊdaÊtagÊ
<head>.Ê
ComoÊditoÊanteriormente,ÊoÊCSSÊficaráÊresponsávelÊpelaÊcamadaÊdeÊapre-
sentaçãoÊdasÊinformaçõesÊemÊHTMLÊeÊoÊJavaScriptÊresponsávelÊpelaÊinte-
2.1—DeclaraçãoÊÊ<!doctypeÊÊhtml> Ela não é considerada uma tag
AÊdeclaraçãoÊ<!ÊDOCTYPE>ÊrepresentaÊoÊ poÊdeÊdocumentoÊeÊajudaÊosÊnavegadoresÊaÊinterpreta-
remÊaÊversãoÊcorretaÊdaÊlinguagemÊHTMLÊusada.Ê
EleÊsóÊdeveÊaparecerÊumaÊvez,ÊnoÊtopoÊdaÊpáginaÊ(antesÊdeÊquaisquerÊtagsÊHTML).
AÊdeclaraçãoÊ<!ÊDOCTYPE>ÊnãoÊéÊcaseÊsensi veÊouÊseja,ÊsensívelÊaÊmaiúsculas.
<!DOCTYPE html>
2.2—AÊtagÊ<HTML>
AÊtagÊ<html>ÊéÊaÊprincipalÊtagÊdeÊaberturaÊdeÊnossoÊdocumentoÊemÊHTML.ÊElaÊéÊabertaÊcomÊaÊtagÊ
<html>ÊeÊfechadaÊcomÊ</html>.ÊÉÊcomumÊoÊusoÊdoÊatributoÊ“lang”,ÊparaÊqueÊosÊuser-agentsÊsai-
bamÊqualÊaÊlinguagemÊqueÊseráÊusadaÊnoÊdocumento,Êporém,ÊesseÊatributoÊpodeÊserÊdefinidoÊemÊ
qualquerÊoutraÊtag,ÊnãoÊseÊrestringindoÊapenasÊaÊtagÊ<html>.
<html lang=”pt-BR”> Os comentários em HTML são feitos atra-

 vés das marcações 
</html
ExisteÊaindaÊoÊcomentárioÊcondicionalÊqueÊexecutaÊalgoÊseÊdeterminadaÊcondiçãoÊforÊverdadeira.ÊEx.

<Ê24Ê>
2.3—AÊtagÊ<HEAD>
AÊtagÊ<head>ÊéÊoÊ“cabeçalho”ÊdeÊnossoÊdocumentoÊHTML.ÊElaÊdeveÊserÊabertaÊcomÊaÊtagÊ<head>ÊeÊ
fechadaÊcomÊaÊtagÊ</head>.
AÊsuaÊprincipalÊfinalidadeÊéÊaÊdeÊinformarÊaoÊnavegadorÊcomoÊeleÊdeveÊseÊcomportar.ÊDentroÊdela,Ê
temosÊoutrasÊtagsÊimportantesÊcomoÊaÊ< tle>,ÊinserçãoÊdeÊMetaÊTagsÊeÊondeÊoÊnavegadorÊdeveráÊ
buscarÊasÊfolhasÊdeÊes losÊ(CSS)ÊeÊjavascriptÊ(JS)ÊqueÊserãoÊvistosÊadiante.
VejamosÊumÊexemplo:
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<title> Aprendendo HTML </title>
<meta charset=”UTF-8” />
<link rel=”stylesheet” type=”text/css” src=”css/meuestilo.css” />
</head>
<body>
<p> Este é o corpo da página – Veja que agora a acentuação está correta :) </
p>
</body>
</html>
2.4—TagÊ<BODY>
InseridaÊlogoÊapósÊaÊtagÊ<head>,ÊéÊondeÊosÊoutrosÊelementosÊhtmlÊestarãoÊinseridos.ÊÉÊnestaÊtagÊqueÊficaÊ
oÊconteúdoÊ“visível”ÊdoÊsite.Ê
<body>
<p> Conteúdo do nosso site </p>
<h1> Texto chamativo </h1>
</body>
<Ê25Ê>
2.5—AÊtagÊ<TITLE>
AÊtagÊ< tle>ÊéÊresponsávelÊporÊinserirÊumÊ tuloÊnaÊpágina.ÊElaÊficaÊnoÊtopoÊdoÊseuÊnavegador.
VejaÊaÊimagemÊabaixo:
2.6—AsÊMETA-TAGS
AtravésÊdasÊMETA-TAGSÊinformamosÊoÊautorÊdaÊpágina,ÊdescriçãoÊdoÊsite,Êpalavras-chaves,Ê posÊdeÊ
caracteresÊqueÊdeveráÊserÊusadoÊentreÊoutrasÊcoisas.Ê
ÉÊextremamenteÊimportanteÊu lizarmosÊasÊmeta-tagsÊparaÊqueÊosÊmotoresÊdeÊbuscaÊ(Ex.ÊgoogleÊeÊ
bing)ÊpossamÊclassificarÊseuÊsiteÊnasÊbuscasÊpelosÊusuários.Ê
Importante ressaltar que hoje em dia, os motores utilizam além das meta-tags os
conceitos das áreas de páginas em HTML5 para a classificação. Veremos estas áreas
na unidade III.
<Ê26Ê>
MetaÊCharset
ElaÊdefineÊoÊ poÊdeÊcaracteresÊqueÊoÊnavegadorÊdeveráÊinterpretar.ÊÉÊextremamenteÊimportanteÊ
suaÊdeclaraçãoÊparaÊqueÊosÊcaracteresÊacentuadosÊpossamÊaparecerÊcorretamente.ÊPode-seÊu li-
zarÊcódigosÊqueÊgeramÊoÊcaractereÊdesejado,ÊporémÊéÊbemÊmaisÊtrabalhoso.Ê
<head>
<meta charset="UTF-8"/>
</head>
Observações:
As tags <meta> sempre devem estar dentro do elemento <head>.
Os metadados são sempre passados como pares nome / valor.
Esta tag não precisa de fechamento como as outras. Charset é um atributo e UTF-8 é
o valor escolhido.
Viewport
DefinirÊaÊjanelaÊdeÊexibição
HTML5ÊintroduziuÊumÊmétodoÊparaÊdeixarÊwebÊdesignersÊterÊcontroleÊsobreÊaÊvisualizaçãoÊdoÊusu-
ário,ÊatravésÊdaÊtagÊ<meta>.
AÊjanelaÊdeÊvisualizaçãoÊéÊaÊáreaÊvisívelÊdoÊusuárioÊdeÊumaÊpáginaÊweb. ElaÊvariaÊdeÊacordoÊcomÊoÊ
disposi vo,ÊeÊseráÊmenorÊemÊumÊtelefoneÊmóvelÊdoÊqueÊnumÊmonitorÊdeÊcomputador.
VocêÊdeveÊincluirÊoÊseguinteÊelementoÊ<meta>ÊjanelaÊdeÊexibiçãoÊemÊtodasÊasÊsuasÊpáginasÊweb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
EsteÊéÊoÊconceitoÊmaisÊbásicoÊdeÊresponsividadeÊexistente.
Desenvolver uma página responsiva, significa desenvolver para diversos dispositivos

e resoluções de tela ao mesmo tempo. Então, você pode desenvolver um site que se
apresente tanto em uma TV de 60” quanto para um smartphone.
<Ê27Ê>
ç Sem a tag meta viewport
Com a meta tag view-

port è
OutrasÊmeta-tags
keywordsÊ-ÊDefinirÊpalavras-chaveÊparaÊosÊmotoresÊdeÊbusca:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Descrip onÊ-ÊDefinaÊumaÊdescriçãoÊdeÊsuaÊpáginaÊweb:
<meta name="description" content="Curso HTML5—IF Três Corações">
authorÊ-ÊDefinaÊoÊautorÊdeÊumaÊpágina:
<meta name="author" content="Rogério Paiva">
<meta name="robots" content=“index, nofollow">
robots
refreshÊ-ÊdocumentoÊdeÊatualizaçãoÊaÊcadaÊ30Êsegundos:
<meta http-equiv="refresh" content="30">
<Ê28Ê>
ExemploÊinteressanteÊparaÊredirecionamentoÊdeÊpáginaÊWEB
<html>
<title>Titulo do site</title>
<head>
<meta http-equiv="refresh" content=1;url="http://www.site_a_ser_redirecionado.com">
</head>
<body>
Tempo de redirecionamento em segundos
</body>
</html>
copyrightÊ-ÊDefinirÊosÊdireitosÊdaÊpágina
<meta name="copyright" content="2017 Rogério Paiva – IFSULDEMINAS TC">
2.7—TagÊ<link>
ÉÊaÊtagÊresponsávelÊporÊinserirÊarquivosÊexternosÊqueÊafetamÊoÊcomportamentoÊ(javascript)Êe/ouÊ
es lizaçãoÊ(CSS)ÊdoÊdocumentoÊhtml.ÊVeremosÊcomÊmaisÊdetalhesÊnaÊdisciplinaÊdeÊcssÊeÊjavascript.
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
Importante ressaltar que esta tag <link> é para fonte de documentos externos que
serão utilizadas na página em questão. Para links que levam usuários a outras pági-
nas html, usa-se a tag <a>, que será estudada na unidade V.
2.8—TagÊ<hr>
ÉÊaÊtagÊresponsávelÊporÊinserirÊumaÊlinhaÊhorizontalÊdividindoÊáreas.
Esta tag não tem fechamento ok!
ExistemÊoutrasÊtagsÊcomoÊspanÊeÊcenter...Ê.pesquisemÊsobreÊelas.ÊHojeÊnãoÊéÊcomumÊoÊ
desenvolvimentoÊcomÊestas.
<Ê29Ê>
2.9—AtributosÊ
ExistemÊdiversosÊ posÊdeÊatributos,ÊosÊglobais,ÊespecíficosÊeÊosÊcustomizados.ÊEsteÊéÊumÊassuntoÊ
bastanteÊvastoÊeÊcomplexo.ÊAssim,ÊdeÊinício,ÊireiÊapresentarÊsomenteÊalgunsÊqueÊconsideroÊimpor-
tantesÊnoÊmomentoÊeÊnoÊdecorrerÊdoÊcursoÊapresentareiÊoutrosÊconformeÊaÊnecessidade.
OÊusoÊdosÊatributos,ÊseÊfazÊnecessárioÊparaÊpermi rÊaÊu lizaçãoÊdeÊeventosÊemÊjavascriptÊouÊnaÊ
es lizaçãoÊcomÊoÊCSS.
AtributosÊÊGlobais
Atributo Exemplo Observação
id <h1 id=“meuCabecalho”> Texto </h1> Iden ficadorÊúnico.ÊNãoÊdeveÊserÊrepe do.
EsteÊpodeÊserÊrepe doÊinúmerasÊvezesÊdentroÊdeÊumÊdocumentoÊ
class <p class=“minhaClasse”> Texto </p>
HTML
NãoÊusar,ÊouÊevitarÊseuÊuso.ÊFoiÊbastanteÊusadoÊantesÊdoÊCSS.Ê
style <p style=“color:blue;”>Texto</p>
HojeÊaprenderemosÊrecursoÊmelhor.
<h1 title=“Cadastro”> Cadastro </ MostraÊoÊvalorÊdoÊatributoÊquandoÊoÊusuárioÊpassaÊcomÊoÊmouseÊ

tle h1> (cursor)ÊsobreÊaÊtagÊespecífica.
OÊnavegadorÊcarregaÊaÊtag,ÊporémÊnãoÊmostraÊaoÊusuário.ÊUsadoÊ
hidden <p hidden=“true”>Ocultar</p>
principalmenteÊparaÊcálculos.
InformaÊaoÊnavegadorÊaÊsequênciaÊdeÊnavegaçãoÊquandoÊoÊusuá-
tabindex <p tabindex=“1”> Contato </p>
rioÊpressionaÊaÊteclaÊtab.Ê
AtributosÊÊEspecíficosÊeÊCustomizados
ExistemÊinúmerosÊatributosÊespecíficos.ÊOÊimportanteÊaÊseÊentenderÊnesteÊmomentoÊéÊqueÊosÊatri-
butosÊespecíficosÊsãoÊaquelesÊusadosÊsomenteÊporÊumaÊdeterminadaÊtag,ÊnãoÊpodendoÊserÊusadaÊ
porÊoutra.ÊOsÊcustomizadosÊsãoÊatributosÊcriadosÊpeloÊpróprioÊdesenvolvedorÊdoÊsite.
Para o nosso curso, é importante guardar os atributos id e class. No CSS, pesquisa-

remos o ID pelo símbolo # (hashtag), e as classes pelo . (ponto).
<Ê30Ê>
CAPÍTULO
3—ÁreasÊdaÊpáginaÊHTML5Ê(EstruturaÊSemântica)
MuitoÊ bemÊ pessoal!Ê AgoraÊ

queÊ jáÊ temosÊ umaÊ noçãoÊ daÊ
estruturaÊbásicaÊdeÊumÊdocu-
mentoÊ HTML,Ê vamosÊ estudarÊ
asÊáreasÊdoÊHTML5.ÊAntesÊdaÊ
versãoÊ5ÊdoÊHTML,ÊeraÊneces-
sárioÊ queÊ nossoÊ documentoÊ
fosseÊ separadoÊ porÊ blocosÊ
chamadosÊ deÊ <div’s>Ê atravésÊ
daÊtagÊ<div>.ÊHojeÊemÊdiaÊissoÊ
nãoÊ éÊ maisÊ necessárioÊ e,Ê éÊ
extremamenteÊ importanteÊ
inserirÊ asÊ tagsÊ corretasÊ emÊ
cadaÊumaÊdasÊáreasÊdoÊdocumento.ÊIssoÊseÊdeveÊnãoÊsóÊparaÊfacilitarÊaÊmanutençãoÊdoÊarquivoÊ
html,ÊcomoÊtambémÊparaÊqueÊosÊmotoresÊdeÊbuscaÊpossamÊclassificarÊseuÊsite.
Assim,ÊnaÊnovaÊversãoÊHTMLÊéÊimportanteÊqueÊu lizamosÊaÊseguinteÊestrutura
<Ê31Ê>
VejamosÊcomÊoÊexemploÊdeÊnossoÊsite:
header
CabeçalhoÊdoÊsite
nav
aside
BarrasÊdeÊnavegaçãoÊdoÊsite
U lizadoÊparaÊas-
PodeÊserÊtambémÊnaÊhorizontal
suntosÊnãoÊtãoÊim-
portantes.
section
U lizadoÊparaÊcriarÊ
seções
article
U lizadoÊparaÊorga-
nizarÊar gos.
footer
<Ê32Ê>
3.1—TagÊ<header>
OÊelementoÊ<header>ÊéÊu lizadoÊparaÊdefinirÊoÊcabeçalhoÊdoÊdocumentoÊHTML.ÊPodemosÊincluirÊ
aÊlogomarcaÊdaÊempresa,ÊcamposÊdeÊbusca,Êíndices,ÊtagsÊdeÊ tulosÊ(h1..h6)ÊeÊatéÊmesmoÊaÊtagÊ
<nav>ÊdependendoÊdaÊestruturaÊdoÊprojetoÊaÊserÊdesenvolvido.
<body>
<header>
<img src=”img/logo.jpg” />
<h1> Educação gratuita e de qualidade </h1>
</header>
</body>
3.2—TagÊ<nav>
AÊtagÊ<nav>ÊcontémÊosÊprincipaisÊlinksÊdoÊseuÊsite.ÊElaÊseráÊoÊmenuÊdeÊnavegaçãoÊdoÊsite.ÊGeral-
menteÊu lizamosÊlistasÊparaÊdefinirÊoÊmenuÊeÊformatamosÊcomÊCSS.ÊVeremosÊmaisÊadianteÊesteÊ
procedimento.
<body>
<header>
<h1> Exemplo de Menu </h1>
<nav>
<ul>
<li><a href=”#”> Home</a></li>
<li><a href=”#”> Sobre nós!</a></li>
<li><a href=”#”> Contato</a></li>
<li><a href=”#”> Vagas</a></li>
</ul>?
</nav>
</header>
</body>
3.3—TagÊ<aside>
GeralmenteÊéÊu lizadaÊparaÊdefinirÊconteúdosÊcomoÊanúncios,ÊlinksÊparaÊblogsÊentreÊoutrosÊex-
ternosÊaoÊnossoÊsite.ÊPorém,ÊhojeÊemÊdia,ÊalgunsÊdesenvolvedoresÊpassaramÊaÊu lizarÊaÊtagÊ
<aside>ÊdentroÊdeÊumÊelementoÊ<ar cle>ÊeÊseuÊconteúdoÊdeveÊserÊespecificamenteÊrelacionadoÊ
aoÊconteúdoÊdoÊmesmo,ÊporÊexemplo,ÊlinksÊdeÊreferênciaÊsobreÊoÊassuntoÊdoÊar go.
<Ê33Ê>
3.4—TagÊ<section>
TagÊ extremamenteÊ importanteÊ cujaÊ aÊ finalidadeÊ éÊ principalmenteÊ “fa ar”,Ê organizarÊ oÊ docu-
mentoÊemÊgrupos.ÊCadaÊgrupoÊcomÊsuasÊcaracterís cas.ÊPodemosÊterÊumaÊ<sec on>ÊnoÊdocu-
mentoÊarmazenandoÊar gosÊdaÊempresaÊeÊoutraÊ<sec on>ÊarmazenandoÊcomentáriosÊdosÊar -
gos.
<body>
<header>
...
<nav>
...
</nav>
</header>
<section>
<article>
<h1> Artigo 1 </h1>
<p> Conteúdo do artigo 1 </p>
</article>
</section>
<section>
<h2> Comentários </h2>
<article>
<p> Legal a matéria </p>
</article>
<article>
<p> Parabéns pela reportagem </p>
</article>
</section>
</body>
3.5—TagÊ<article>
ComoÊvistoÊnoÊexemploÊacima,ÊaÊtagÊ<ar cle>ÊtemÊcomoÊfinalidadeÊarmazenarÊoÊconteúdoÊouÊ
outrosÊelementosÊHTML.
3.6—TagÊ<footer>
AÊtagÊ<footer>ÊcriaÊumaÊseçãoÊparaÊoÊrodapéÊdeÊnossoÊsite.ÊGeralmenteÊincluímosÊoÊendereçoÊdaÊ
empresaÊeÊpossíveisÊlinksÊrápidos.
<Ê34Ê>
<body>
<header>
...
<nav>
...
</nav>
</header>
<section>
<article>
...
</article>
</section>
<footer>
<h4> Todos os direitos reservados – 2017-1 </h4>
<h5> Endereço da empresa, telefone, cidade </h5>
</footer>
</body>
3.7—TagÊ<main>
AÊtagÊ<main>ÊtemÊumaÊúnicaÊfunçãoÊsemân ca;ÊdefinirÊoÊconteúdoÊprincipalÊdeÊumÊdocumentoÊ
html,ÊouÊseja,ÊoÊconteúdoÊmaisÊimportanteÊdaquelaÊpáginaÊqueÊestáÊdiretamenteÊrelacionadoÊaoÊ
tópicoÊcentralÊdoÊassuntoÊaÊserÊabordadoÊnaÊmesma.ÊEstaÊtagÊseráÊsempreÊumaÊtagÊpai,ÊouÊseja,Ê
elaÊnãoÊpodeÊserÊfilhaÊdeÊnenhumaÊtag,ÊcomoÊaside,Ênav,Êar cleÊetc.ÊElaÊtambémÊnãoÊtemÊmar-
gin,Êpadding,ÊbordaÊouÊqualquerÊoutroÊvalorÊpadrão.
3.8—TagÊ<div>
ÉÊumaÊtagÊbastanteÊusadaÊjuntamenteÊcomÊCSS.ÊAprenderemosÊemÊtópicosÊfuturos.ÊTemÊcomoÊ
finalidade,ÊcriarÊseçõesÊdentroÊdeÊnossoÊarquivoÊhtml.
TagÊ bastanteÊ usadaÊ antesÊ daÊ versãoÊ 5Ê doÊ HTML,Ê issoÊ devidoÊ aÊ poucaÊ semân caÊ existenteÊ naÊ
época.
HojeÊemÊdia,Êu lizeÊaÊtagÊ<div>ÊdepoisÊdeÊusarÊaÊsemân caÊapresentadaÊanteriormenteÊcomÊasÊ
tagsÊinseridasÊnaÊversãoÊ5ÊdoÊHTML.
<Ê35Ê>
<Ê36Ê>
CAPÍTULO
TrabalhandoÊcomÊtextos
NesteÊcapítuloÊaprenderemosÊaÊformatar/manipularÊtextos.
4.1—Cabeçalhos
AsÊtagsÊdeÊcabeçalhoÊouÊheadings,ÊsãoÊmuitoÊimportantesÊemÊnossoÊdocumentoÊHTML.ÊQuandoÊ
precisamosÊdarÊdestaquesÊaÊumÊtextoÊespecífico,ÊcomoÊoÊsloganÊouÊoÊnomeÊdaÊempresa,Êpode-
mosÊu liza-las.
SãoÊ6ÊosÊníveisÊdeÊcabeçalhos,ÊcomeçandoÊdoÊdeÊmaiorÊimportânciaÊparaÊoÊmenosÊimportante.Ê
SãoÊeles:Ê<h1>,Ê<h2>,<h3>,<h4>,<h5>,<h6>.
<!DOCTYPE html>
<head>
<title>IFSULDEMINAS - Três Corações</title>
</head>
<body>
<section>
<header>
<h1>IFSULDEMINAS </h1>
<h2>Campus Avançado de Três Corações</h2>
<h3>Curso de Desenvolvedor WEB </h3>
<h4> *= C U R S O D E H T M L =* </h4>
<h5>Prof. Ms. Rogério B. Paiva </h5>
<h6>Contato.: rogeriobarros.paiva@ifsuldeminas.edu.br </h6>
</header>
</section>
</body>
</html>
<Ê37Ê>
Resultado:
4.2—Parágrafos
AÊtagÊ<p>ÊéÊu lizadaÊparaÊdefinirÊparágrafos,ÊporÊpadrão,ÊessaÊtagÊocupaÊ100%ÊdoÊelementoÊpaiÊ
eÊdefineÊapenasÊasÊquebrasÊdeÊlinhaÊquandoÊultrapassaÊosÊ100%ÊdoÊpai.
VejamosÊumÊexemplo:
<!DOCTYPE html>
<head>
</head>
<body>
<section>
<header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas

congue arcu nibh, sit amet commodo est scelerisque venenatis. Vestibulum lacinia ri-
sus ante, et rhoncus urna ullamcorper eu. Proin molestie quam eget varius suscipit.
Praesent posuere nunc elit, sed rhoncus lorem facilisis in. Aliquam massa elit,
eleifend a fermentum vel, faucibus a ante. Suspendisse lobortis varius neque, vulpu-
tate maximus nisl gravida non. Pellentesque habitant morbi tristique senectus et ne-
tus et malesuada fames ac turpis egestas. Integer sodales fermentum consequat. Morbi
et maximus quam, ac convallis tortor. Duis auctor nisl a urna euismod, sit amet vul-
putate metus euismod. Pellentesque ut imperdiet nulla. Proin imperdiet augue ut auc-
tor auctor.</p>
Continua ->
<Ê38Ê>
<p> Vestibulum ut accumsan odio. Duis eu velit in nisl porttitor ma-

ximus sit amet vitae mauris. Donec ultricies tincidunt risus ut aliquam. Fusce do-
lor justo, scelerisque nec scelerisque sit amet, laoreet id orci. Nunc malesuada
nulla non elit molestie tempor. Ut pulvinar risus erat, et viverra tortor aliquam
vitae. Mauris tempor eros nisi, quis sollicitudin nisl vestibulum et.</p>
<p>Curabitur tellus diam, lobortis a blandit sit amet, malesuada eget mauris. Etiam
ullamcorper purus sit amet consequat varius. Vivamus euismod condimentum nisi, in
fringilla ex pharetra non. Duis commodo, quam ut convallis blandit, nulla massa
gravida turpis, sit amet imperdiet augue augue sed sem. Proin metus ex, bibendum
non imperdiet quis, efficitur sodales nulla. Sed interdum diam vel ipsum hendrerit,
nec dictum nisi laoreet. Proin magna elit, tempus in quam ut, tempus dictum libero.
Pellentesque in sagittis mi, id scelerisque nisi. Donec eu eros accumsan, malesuada
urna vitae, facilisis nibh. Integer tincidunt tortor ornare sapien semper, eget va-
rius orci semper. Aenean posuere enim sit amet ante iaculis accumsan. Aliquam erat
volutpat. Sed egestas imperdiet sapien a dictum. Nullam aliquam nulla risus, at ul-
lamcorper mi maximus nec. Aliquam ante tellus, maximus eu libero rhoncus, lobortis
cursus eros.</p>
</header>
</section>
</body>
</html>
Resultado:
<Ê39Ê>
AindaÊ falandoÊ sobreÊ parágrafos,Ê temosÊ aÊ tagÊ <pre>Ê queÊ temÊ porÊ funçãoÊ definirÊ umÊ textoÊ pré-
formatado.
TextoÊemÊumÊelementoÊ<pre>ÊéÊexibidoÊemÊumaÊfonteÊdeÊlarguraÊfixaÊ(geralmenteÊCourier)ÊeÊ
mantémÊosÊespaçosÊeÊquebrasÊdeÊlinha,ÊdiferentementeÊdaÊtagÊ<p>.Ê
<!DOCTYPE html>
<head>
</head>
<body>
<section>
<header>
<pre>
Este é texto que possui muitos espaçoes e
quebra de linha. Veja que esta tag os manteve.
</pre>
<br /> ==> Esta tag quebra a linha, não deixando espaços como os cabeçalhos ou o parágrafo
<p>
Este é texto que possui muitos espaçoes e
quebra de linha. Veja que a tag os remove.
</p>
</header>
</section>
</body>
</html>
Resultado:
<Ê40Ê>
4.3—TagÊ<code>
CasoÊvocêÊdesejeÊmontarÊumaÊpáginaÊqueÊu lizeÊcódigosÊdeÊprogramação,ÊaÊtagÊ<code>ÊéÊaÊmaisÊ
indicadaÊparaÊrepresentarÊosÊcódigosÊfontes.Ê
<!DOCTYPE html>
<head>
</head>
<body>
<section>
<header>
<h3> Para imprimir na tela usando linguagem java </h3>
<code> System.out.println("Olá Mundo"); </code>
</header>
</section>
</body>
</html>
Resultado:
<Ê41Ê>
4.4—TagsÊdiversasÊdeÊformataçãoÊdeÊtextos
VouÊapresentarÊdiversasÊformataçõesÊdeÊtextoÊnesteÊcapítulo.ÊAoÊfinal,ÊdareiÊumÊexemploÊcomÊaÊ
u lizaçãoÊdeÊtodos.
TagÊ<i>ÊItálico
TagÊ usadaÊ principalmenteÊ paraÊ indicarÊ termosÊ emÊ la m,Ê nomesÊ cien ficos,Ê termosÊ técnicos,Ê
pensamentosÊdeÊoutrosÊautoresÊentreÊoutros.ÊMantémÊoÊtextoÊemÊitálico.
TagÊ<b>ÊNegrito
TagÊusadaÊparaÊdestacarÊdeterminadasÊáreasÊdoÊdocumento.ÊMantémÊoÊtextoÊemÊboldÊouÊsejaÊ
negrito.
TagÊ<sub>ÊSubrescritoÊeÊTagÊ<sup>ÊSobrescrito
AÊtagÊ<sub>ÊéÊusadaÊparaÊsubscreverÊtextosÊouÊnúmeros.ÊEx.:ÊH2O.
TagÊ<strongÊ>ÊeÊTagÊ<em>
QuandoÊ aplicamosÊ estasÊ tagsÊ noÊ texto,Ê visualmenteÊ nãoÊ percebemosÊ nenhumaÊ diferençaÊ emÊ
relaçãoÊasÊtagsÊdeÊnegritoÊeÊitálicoÊvistasÊanteriormente.ÊPorém,ÊvaleÊlembrarÊqueÊestamosÊpro-
gramandoÊeÊaÊacessibilidadeÊporÊpessoasÊcomÊnecessidadesÊespeciaisÊéÊextremamenteÊimpor-
tante.ÊAssim,ÊquandoÊu lizamosÊumaÊdestasÊtags,ÊoÊtomÊdaÊnarraçãoÊdeÊseuÊsiteÊnosÊleitoresÊdeÊ
telaÊdeveráÊterÊumaÊênfaseÊmaior.
<Ê42Ê>
4.5—TagÊ<blockquote>,ÊTagÊ<q>ÊeÊTagÊ<cite>
PrimeiramenteÊiremosÊfalarÊsobreÊasÊtagsÊ<blockquote>ÊeÊ<q>,ÊambasÊsãoÊusadasÊparaÊcitações.Ê
AÊtagÊ<blockquote>ÊporÊpadrão,ÊéÊconsideradoÊumÊelementoÊdeÊbloco,ÊjáÊaÊtagÊ<q>ÊéÊconsidera-
daÊumÊelementoÊdeÊlinha.ÊTodasÊduasÊpossuemÊoÊatributoÊ“cite”ÊparaÊreferenciarÊaÊfonteÊ(oÊlo-
cal)ÊdaÊcitação.
NoÊcasoÊdaÊtagÊ<cite>Ê(diferentementeÊdoÊatributoÊciteÊcitadoÊacima),ÊestaÊpodeÊserÊusadaÊparaÊ
citaçãoÊdeÊnomeÊdeÊséries,Êfilmes,ÊpeçasÊteatrais,Êetc.
<!DOCTYPE html>
<head>
</head>
<body>
<section>
<header>
<h2> Uso do blockquote </h2>
<blockquote cite="http://www.ifsuldeminas.edu.br">
Aprenda a não depender da ajuda dos outros para seguir sua jorna-
da. Incentivo e apoio sempre serão bem vindos mas, se eles não vierem... que isso
não o impeça de seguir com os olhos voltados para o horizonte, rumo a realização de
seus ideais. <i>Cika Parolin </i>
</blockquote>
<h3> Será que eu consigo aprender html? </h3>
<h2> Como dizia Mark Zuckerberg </h2>
<h2> Uso do q </h2>
<q cite=http://pensador.uol.com.br> É melhor você tentar algo, vê
-lo não funcionar e aprender com isso, do que não fazer nada.</q> <br /><br />
<h2> Uso do cite </h2>
<cite> Eu quero aprender mais, compreender mais, evoluir sempre.
Quero ter direito a sonhar alto e alcançar meus objetivos com garra e determinação.
Quero conquistar novos conhecimentos, todos os dias. E fazer de cada dia uma lição
de vida. Quero desenvolver os meus talentos e alcançar meus objetivos, sem deixar de
olhar para o mundo ao meu redor. Quero encarar cada desafio como oportunidade. E fa-
zer dos obstáculos minha maior motivação. Eu sei o que eu quero. Eu quero é vencer.
<i> Joana Darc Sanguinette </i> </cite>
</header>
</section>
</body>
</html>
<Ê43Ê>
Reparem no código que foi incluída a tag <br />, esta tag é bastante simples, ela é
responsável por quebra de linhas e não possui fechamento.
Resultado:
<Ê44Ê>
4.6—TagÊ<hrÊ/>
EstaÊtagÊtemÊaÊfinalidadeÊdeÊinserirÊumaÊlinhaÊhorizontalÊnoÊtexto.ÊSeguindoÊoÊprincípioÊdaÊtagÊ
<brÊ/>,ÊelaÊnãoÊprecisaÊdeÊfechamento.
4.7—TagÊ<big>,ÊTagÊ<small>ÊeÊTagÊ<del>
AsÊtagsÊ<big>ÊeÊ<small>ÊsãoÊresponsáveisÊpeloÊtamanhoÊdoÊtexto,ÊmaiorÊouÊmenor,Êrespec va-
mente,ÊemÊrelaçãoÊaÊumÊcabeçalhoÊ(h1,Êh2...).
AsÊtagsÊ<ins>ÊeÊ<del>ÊsãoÊresponsáveisÊporÊinserçãoÊouÊexclusãoÊ(formatoÊtachado)ÊdeÊtextosÊemÊ
umÊparágrafo.ÊSãoÊtagsÊbastanteÊusadasÊemÊcitesÊqueÊpossuemÊmuitasÊalteraçõesÊeÊasÊpessoasÊ
precisamÊsaberÊoÊqueÊfoiÊinseridoÊdeÊdiferenteÊeÊoÊqueÊfoiÊexcluído.Ê(VejamÊqueÊnossasÊleisÊusamÊ
bastanteÊesseÊrecurso).
<!DOCTYPE html>
<head>
</head>
<body>
<section>
<header>
<p> Este é um texto <ins> novo </ins> no parágrafo </p>
<p> Desde <del> Ontem</del> hoje, o IF abriu cursos de <del>
mestrado </del> doutorado </p>
<h2> O título do artigo é: <big> HTML5: Vantagens e Desvantagens
</big> Autor.: <small> Prof. José de Arimatéia</small>
</h2>
</header>
</section>
</body>
</html>
Resultado:
<Ê45Ê>
4.8—CaracteresÊEspeciais
MuitasÊvezes,ÊprecisamosÊusarÊcaracteresÊqueÊnãoÊestãoÊemÊnossoÊteclado,ÊporÊexemploÊ±Ê(sinalÊ
deÊmaisÊeÊdeÊmenos).ÊComoÊusamosÊoÊmodeloÊUTF-8ÊapresentadoÊemÊcapítulosÊanteriores,ÊéÊ
possívelÊqueÊoÊnavegarÊinterpreteÊesteÊsinalÊcomÊoÊcódigoÊ&plusmn.
VejaÊoÊexemploÊeÊoÊresultado:
<!DOCTYPE html>
<head>
</head>
<body>
<section>
<header>
<h2> O valor foi de aproximadamente &plusmn 450,00 <h2>
</header>
</section>
</body>
</html>
ParaÊconhecerÊtodosÊosÊcaracteresÊespeciais,Ê
visite:Êh ps://www.w3schools.com/charsets/
ref_u _la n1_supplement.asp
SaibaÊmaisÊem:Êh ps://www.w3schools.com/
html/html_en es.aspÊ

Des Web 1 Semana1

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Des Web 1 Semana1

Enviado por

Direitos autorais:

Formatos disponíveis

<Ê1Ê>

VocêÊ estáÊ recebendoÊ umaÊ apos laÊ daÊ disciplinaÊ

giasÊAdministra vasÊcomÊfocoÊemÊGestãoÊdoÊConhecimentoÊeÊPortaisÊCorpora vos,ÊpossuiÊ

TodosÊ osÊ dadosÊ apresentadosÊ nasÊ a vidadesÊ desteÊ cursoÊ

SendoÊassim,ÊqualquerÊ poÊdeÊanáliseÊfeitaÊaÊpar rÊdessesÊ

DISCUSSÃO:Ê IndicaÊ oÊ inícioÊ deÊ umaÊ discussãoÊ u li-

IMPORTANTE:Ê UsadoÊ paraÊ indicarÊ umÊ conteúdoÊ

PENSAR:Ê IndicaÊ queÊ vocêÊ deveÊ reﬂe rÊ sobreÊ oÊ as-

PESQUISAR:Ê IndicaÊqueÊ vocêÊdeveÊpesquisarÊ sobreÊ

REALIZE:Ê DeterminaÊaÊexistênciaÊdeÊa vidadeÊaÊserÊ

SAIBAÊ MAIS:Ê ApresentaÊ informaçõesÊ adicionaisÊ

REVISÃO:Ê IndicaÊ aÊ revisãoÊ doÊ conteúdoÊ abordadoÊ

DICASÊ DEÊ LINKS:Ê IndicaÊ umÊ linkÊ (ligação),Ê sejaÊ eleÊ

BemÊ pessoal,Ê quandoÊ estamosÊ desenvolvendoÊ

AsÊ linguagensÊ cliente-sideÊ (frontend)Ê sãoÊ lingua-

ParaÊ programarÊ paraÊ web,Ê precisamosÊ saberÊ queÊ

AÊ primeiraÊ camadaÊ éÊ aÊ camadaÊ deÊ conteúdo.Ê EssaÊ

EssasÊ organizaçõesÊ ajudamÊ naÊ melhoriaÊ doÊ consórcioÊ enviandoÊ anual-

PesquisemÊ naÊ internetÊ hospedagensÊ

<h1>Minha Primeira Página</h1>

2.1—DeclaraçãoÊÊ<!doctypeÊÊhtml> Ela não é considerada uma tag

<html lang=”pt-BR”> Os comentários em HTML são feitos atra-

<!-- [if lt IE 9]>

AÊtagÊ< tle>ÊéÊresponsávelÊporÊinserirÊumÊ tuloÊnaÊpágina.ÊElaÊﬁcaÊnoÊtopoÊdoÊseuÊnavegador.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Desenvolver uma página responsiva, significa desenvolver para diversos dispositivos

ç Sem a tag meta viewport

Com a meta tag view-

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

<meta name="description" content="Curso HTML5—IF Três Corações">

<meta name="robots" content=“index, nofollow">

<meta http-equiv="refresh" content="30">

<meta name="copyright" content="2017 Rogério Paiva – IFSULDEMINAS TC">

Atributo Exemplo Observação

id <h1 id=“meuCabecalho”> Texto </h1> Iden ﬁcadorÊúnico.ÊNãoÊdeveÊserÊrepe do.

<h1 title=“Cadastro”> Cadastro </ MostraÊoÊvalorÊdoÊatributoÊquandoÊoÊusuárioÊpassaÊcomÊoÊmouseÊ

Para o nosso curso, é importante guardar os atributos id e class. No CSS, pesquisa-

MuitoÊ bemÊ pessoal!Ê AgoraÊ

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas

<p> Vestibulum ut accumsan odio. Duis eu velit in nisl porttitor ma-

Você também pode gostar