HTML Aula 01

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


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


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


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


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


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


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


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


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


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

HTML Aula 01

Documents

Transcript of HTML Aula 01