Post on 13-Apr-2018
7/26/2019 HTML Aula 01
1/10
CURSODESENVOLVIMENTO WEBMDULO HTML 1
AULA
CURSO DESENVOLVIMENTOWEB1
Introduo
Sobre o curso - o com!e"o mu#$o $o %ro#&-e#$
"Ao a chave fundamental para todo sucesso"
Vivemos hoje numa era em que a Internet ocupa um espao cada vezmais importante em nossas vidas pessoais e profssionais. Osurgimento constante de Aplicaes e!" para as mais diversasfnalidades" # um sinal claro de que esse mercado est$ em %rancae&panso e traz muitas oportunidades. Aplicaes corporativas"com#rcio eletr'nico" redes sociais" flmes" m(sicas" not)cias e tantas
outras $reas esto presentes na Internet" %azendo do navegador*o browser+ o so%t,are mais utilizado de nossos computadores.
-sse curso pretende a!ordar o desenvolvimento de front-end*inter%aces+ para Aplicaes e! e ites que acessamos por meiodo navegador de nossos computadores" utilizando padres atuais dedesenvolvimento e conhecendo a %undo suas caracter)sticas t#cnicas./iscutiremos as implementaes dessas tecnologias nos di%erentesnavegadores" a adoo de frameworksque %acilitam e aceleramnosso tra!alho" al#m de dicas t#cnicas que destacam um profssional
no mercado. 023" 4 e 5avacript sero vistos em pro%undidade.Al#m do acesso por meio do navegador de nossos computadores"hoje o acesso 6 Internet a partir de dispositivos m7veis representa umgrande avano da plata%orma" mas tam!#m implica em um poucomais de ateno ao tra!alho que um programador front-endtem querealizar. 8o decorrer do curso" vamos conhecer algumas dessasnecessidades e como utilizar os recursos dispon)veis para atendertam!#m a essa nova necessidade.
O curso e os e"erc'c(os
-sse # um curso pr$tico que comea nos %undamentos de 023 e4" incluindo t7picos relacionados 6s novidades das verses 0239e 4:. /epois" # a!ordada a linguagem de programao 5avacript"para enriquecer nossas p$ginas com interaes e e%eitos" tanto com
5avacript puro quanto com a !i!lioteca j;uer
7/26/2019 HTML Aula 01
2/10
CURSODESENVOLVIMENTO WEBMDULO HTML 1
AULA
CURSO DESENVOLVIMENTOWEB=
assumimos o papel do Pro)r*m*$or front-end" quais so osdesafos mais comuns e quais so as t#cnicas e padresrecomendados para atingirmos nosso o!jetivo" trans%ormandoimagens est$ticas *os layouts+ em c7digo que os navegadores
entendem e e&i!em como p$ginas da e!.Os e&erc)cios propostos so %undamentais para o acompanhamentodo curso" desde os mais iniciais" j$ que so incrementados nodecorrer das aulas. Igualmente importante # a participao ativa nasdiscusses e de!ates em sala de aula.
>em vindo ao 4urso /esenvolvimento e! da -scola 2icroplus.
7/26/2019 HTML Aula 01
3/10
CURSODESENVOLVIMENTO WEBMDULO HTML 1
AULA
CURSO DESENVOLVIMENTOWEB:
I#&ro$u+,o * HTML e CSS
"Quanto mais nos elevamos, menores parecemos
aos olhos daqueles que no sabem voar."
1 E"(b(#$o (#%orm*+es #* Web
A (nica linguagem que o navegador consegue interpretar para ae&i!io de conte(do # o 023. ?ara iniciar a e&plorao do 023"vamos imaginar o seguinte caso@ o navegador realizou umarequisio e rece!eu como corpo da resposta o seguinte conte(do@
2irror ashion.
>emBvindo 6 2irror ashion" sua loja de roupas e acess7rios.4onfra nossas promoes.
Cece!a in%ormaes so!re nossos lanamentos por eBmail.
8avegue por todos nossos produtos em cat$logo.
4ompre sem sair de casa.
?ara conhecer o comportamento dos navegadores quanto aoconte(do descrito antes" vamos reproduzir esse conte(do em umarquivo de te&to comum" que pode ser criado com qualquer editor de
te&to puro. alve o arquivo como (#$e"./&m!e a!raBo a partir donavegador 6 sua escolha.
0()ur* 1 - Cr(*#$o o $ocume#&o #o B!oco $e No&*s
7/26/2019 HTML Aula 01
4/10
CURSODESENVOLVIMENTO WEBMDULO HTML 1
AULA
CURSO DESENVOLVIMENTOWEBD
0()ur* - V(su*!(2*#$o o $ocume#&o #o bro3ser 4#*5e)*$or6.
?arece que o!temos um resultado um pouco di%erente do esperado"noE Apesar de ser capaz de e&i!ir te&to puro em sua $rea principal"algumas regras devem ser seguidas caso desejemos que esse te&toseja e&i!ido com alguma %ormatao" para %acilitar a leitura pelousu$rio fnal.
Fsando o resultado acima podemos concluir que o navegador porpadro@
?ode no e&i!ir caracteres acentuados corretamenteG
8o e&i!e que!ras de linha.
?ara que possamos e&i!ir as in%ormaes desejadas com a%ormatao" # necess$rio que cada trecho de te&to tenha
uma m*rc*+,oindicando qual # o signifcado dele. -ssa marcaotam!#m inHuencia a maneira com que cada trecho do te&to ser$e&i!ido. A seguir # listado o te&to com uma marcao correta@
0()ur* 7 - Te"&o *)or* com *s m*rc*+es $()(&*$o #o B!oco $e No&*s.
Ceproduza o c7digo anterior em um novo arquivo de te&to puro esalveBo como (#$e"-./&m!. 8o se preocupe com a sinta&e" vamos
7/26/2019 HTML Aula 01
5/10
CURSODESENVOLVIMENTO WEBMDULO HTML 1
AULA
CURSO DESENVOLVIMENTOWEB9
conhecer detalhadamente cada caracter)stica do 023 nos pr7&imoscap)tulos. A!ra o arquivo no navegador.
0()ur* 8 - V(su*!(2*#$o #o #*5e)*$or I#&er#e& E"!orer.
Agora" o resultado # e&i!ido de maneira muito mais agrad$vel eleg)vel. ?ara isso" tivemos que utilizar algumas marcaes do 023.-ssas marcaes so chamadas de &*)s" e elas !asicamentedo s()#(9c*$oao te&to contido entre sua a!ertura e %echamento.
Apesar de estarem corretamente marcadas" as in%ormaes noapresentam nenhum atrativo est#tico e" nessa defcincia do 023"reside o primeiro e maior desafo do programador %rontBend.
O 023 %oi desenvolvido para e&i!io de documentos cient)fcos.?ara termos uma comparao" # como se a e! %osse desenvolvidapara e&i!ir monografas redigidas e %ormatadas pela 2etodologia do
ra!alho 4ient)fco da A>8. ?or#m" com o tempo e a evoluo dae! e de seu potencial comercial" tornouBse necess$ria a e&i!io dein%ormaes com grande riqueza de elementos gr$fcos e deinterao.
1. S(#&*"e $o HTML
O 023 # um conjunto de &*)srespons$veis pela marcao do
conte(do de uma p$gina no navegador. 8o c7digo que vimos antes"as tags so os elementos a mais que escrevemos usando a
sinta&e . /iversas tags so disponi!ilizadas pela
linguagem 023 e cada uma possui uma %uncionalidade espec)fca.
8o c7digo de antes" vimos por e&emplo o uso da tag . -la
representa o t)tulo principal da p$gina.
:/1;2irror ashion:
7/26/2019 HTML Aula 01
6/10
CURSODESENVOLVIMENTO WEBMDULO HTML 1
AULA
CURSO DESENVOLVIMENTOWEBJ
*"Mirror Fashion"+. 8esse caso" para determinar onde o conte(doaca!a" usamos uma tag de fechamentocom a !arra antes do
nome@ .
Algumas tags podem rece!er *&r(bu&osdentro de sua defnio. o
parKmetros usando a sinta&e de nome=valor. ?ara defnir uma
imagem" por e&emplo" usamos a tag e" para indicar qual
imagem carregar" usamos o atri!uto src@
:(m)srcLM..NimagensNcasadepraia.jpgM;
Cepare que a tag imgno possui conte(do por si s7. 8esses
casos" #,o# necess$rio usar uma tag de %echamento como antes
no h1.
. Es&ru&ur* $e um $ocume#&o HTML
Fm documento 023 v$lido precisa seguir o!rigatoriamente a
estrutura composta pelas tags " e e a
instruo . Vejamos cada uma delas@
A &*) :/&m!;
8a estrutura do nosso documento" antes de tudo" inserimos umatag . /entro dessa tag" # necess$rio declarar outras duas
tags@ e . -ssas duas tags so MirmsM" pois esto nomesmo n)vel hier$rquico em relao 6 sua tag MpaiM" que # .
:/&m!;
:/e*$;:
7/26/2019 HTML Aula 01
7/10
CURSODESENVOLVIMENTO WEBMDULO HTML 1
AULA
CURSO DESENVOLVIMENTOWEBP
caracteres como acentos e cedilha" # a confgurao da codifcaode caracteres" chamado dee#co$(#)ou c/*rse&.
?odemos confgurar qual codifcao queremos utilizar em nosso
documento por meio da confgurao de charsetna tag .
Fm dos valores mais comuns usados hoje em dia # o UT0->" tam!#mchamado de U#(co$e. 0$ outras possi!ilidades" como o !*&(#1" muitousado antigamente.
O UT0-># a recomendao atual para encoding na e! por seramplamente suportada em navegadores e editores de c7digo" al#mde ser compat)vel com praticamente todos os idiomas do mundo. Q oque usaremos no curso.
:/&m!;
:/e*$; :&(&!e;2irror ashion:
7/26/2019 HTML Aula 01
8/10
CURSODESENVOLVIMENTO WEBMDULO HTML 1
AULA
CURSO DESENVOLVIMENTOWEBR
A (#s&ru+,o DOCT?PE
O DOCTYPEno # uma tag 023" mas uma instruo especial. -la
indica para o navegador qual 5ers,o $o HTMLdeve ser utilizada
para renderizar a p$gina. Ftilizaremos " que
indica para o navegador a utilizao da verso mais recente do 023B a verso 9" atualmente.
0$ muitos comandos complicados nessa parte de DOCTYPEque
eram usados em verses anteriores do 023 e do S023. 0oje emdia" nada disso # mais importante. O recomendado # semre us*r *@!&(m* 5ers,o $o HTML" usando a declarao
de DOCTYPEsimples@
7. T*)s HTML
O 023 # composto de diversas tags" cada uma com sua %uno esignifcado. O 023 9" ento" adicionou muitas novas tags" queveremos ao longo do curso.
8esse momento" vamos %ocar em tags querepresentam &'&u!os" *r)r*%oe#%*se.
T'&u!os
;uando queremos indicar que um te&to # um t)tulo em nossa p$gina"utilizamos as tags de headingem sua marcao@
:/1;2irror ashion.:emBvindo 6 2irror ashion" sua loja de roupas eacess7rios.:ing ou Uahoo levam em considerao essa ordem erelevKncia. Os navegadores especiais para acessi!ilidade tam!#m
7/26/2019 HTML Aula 01
9/10
CURSODESENVOLVIMENTO WEBMDULO HTML 1
AULA
CURSO DESENVOLVIMENTOWEBW
interpretam o conte(do dessas tags de maneira a di%erenciar seuconte(do e %acilitar a navegao do usu$rio pelo documento.
P*r)r*%os
;uando e&i!imos qualquer te&to em nossa p$gina" # recomendadoque ele seja sempre conte(do de alguma tag flha da tag . A
marcao mais indicada para te&tos comuns # a tag de *r)r*%o@
:;8enhum item na sacola de compras.:para separ$Blos@
:;Fm par$gra%o de te&to.:
7/26/2019 HTML Aula 01
10/10
CURSODESENVOLVIMENTO WEBMDULO HTML 1
AULA
CURSO DESENVOLVIMENTOWEB1X
Atividade4rie a seguinte p$gina ,e! para e&i!ir o seguinte conte(do@
M(#/* 1 )(#* Web
8ome e nY
Esco!* M(cro!us E$uc*+,o Pro9ss(o#*!
0oje os alunos da -scola 2icroplus do curso de /esenvolvimento e! iniciaram aedio de p$ginas ,e!" utilizando a programao 023.
/esta %orma" em !reve eles sero@
Web Des()#ers