Post on 07-Jul-2018
8/18/2019 HTML Aula 02
1/8
CURSODESENVOLVIMENTO WEBMÓDULO HTML 2
AULA
CURSO DESENVOLVIMENTOWEB1
Revisão da A!a "
Revise e conclua a atividade da aula 1, tire suas duvidas.
Mi#$a "% &'(i#a We)Nome e nº
Es*o!a Mi*+o&!s Ed*a,ão P+ossio#a!
Hoje os alunos da Escola Microplus do curso de Desenvolvimento Web iniciaram a
edição de p!inas "eb, utili#ando a pro!ramação H$M%.
Desta &orma, em breve eles serão'
We) Desi(#e+s
Ma+*a,.es de /#0ase
(uando )ueremos dar uma *n&ase di&erente a um trec+o de teto,
podemos utili#ar as marcaç-es de *n&ase. odemos deiar um teto
/mais &orte/ com a ta! 0stron! ou deiar o teto com uma /*n&ase
acentuada/ com a ta! 0em. $amb2m + a ta! 0small, )ue diminui
o taman+o do teto.
or padrão, os nave!adores renderi#arão o teto dentro da ta!
0stron! em ne!rito e o teto dentro da ta! 0em em itlico.Eistem ainda as ta!s 0b e 0i, )ue atin!em o mesmo resultado
visualmente, mas as ta!s 0stron! e 0em são mais indicadas por
de3nirem nossa intenção de si!ni3cado ao conte4do, mais do )ue
uma simples indicação visual. 5amos discutir mel+or a )uestão do
si!ni3cado das ta!s mais adiante.
0p6ompre suas roupas e acess7rios na 0stron!Mirror8as+ion09stron!.09p
1 I3a(e#s
: ta! 0im! de3ne uma ima!em em uma p!ina H$M% e necessita
de dois atributos preenc+idos' src e alt. ; primeiro aponta para o local
da ima!em e o se!undo, um teto alternativo para a ima!em caso
essa não possa ser carre!ada ou visuali#ada.
; H$M% < introdu#iu duas novas ta!s espec=3cas para ima!em' 03!ure e
03!caption. : ta! 03!ure de3ne uma ima!em com a con+ecida ta!
0im!. :l2m disso, permite adicionar uma le!enda para a ima!em por
meio da ta! 03!caption.
03!ure
8/18/2019 HTML Aula 02
2/8
CURSODESENVOLVIMENTO WEBMÓDULO HTML 2
AULA
CURSO DESENVOLVIMENTOWEB>
0im! src?/im!9produto1.pn!/ alt?/8oto do produto/
03!caption8u## 6ardi!an por R@ 1>A,AB093!caption
093!ure
A4ividade51. Revise e conclua a atividade da aula 1, tire suas duvidas.
>. Ctili#e as ta!s 0stron! e 0em para dar *n&ase em partes doteto do par!ra&o.
. nsira a ima!em terra.jp! no 3nal da p!ina. 5oc* encontra a ima!em
em 663&se+ve+6*+sos6$43!16i3a(e#s.F. :tuali#e seu site na internet.
7 A es4+4+a dos a+8ivos de 3 &+o9e4o
6omo todo tipo de projeto de so&t"are, eistem al!umasrecomendaç-es )uanto G or!ani#ação dos ar)uivos de um site. Não
+ nen+um ri!or t2cnico )uanto a essa or!ani#ação e, na maioria das
ve#es, voc* vai adaptar as recomendaç-es da maneira )ue &or mel+or
para o seu projeto.
6omo um site 2 um conjunto de p!inas Web sobre um assunto,
empresa, produto ou )ual)uer outra coisa, 2 comum todos os
ar)uivos de um site estarem dentro de uma s7 pasta e, assim como
um livro, 2 recomendado )ue eista uma /capa/, uma p!ina inicial
)ue possa indicar para o visitante )uais são as outras p!inas )ue
8/18/2019 HTML Aula 02
3/8
CURSODESENVOLVIMENTO WEBMÓDULO HTML 2
AULA
CURSO DESENVOLVIMENTOWEB
&a#em parte desse projeto e como ele pode acesslas, como se &osse
o =ndice do site.
Esse =ndice, não por coincid*ncia, 2 convenção adotada pelos
servidores de p!inas Web. Ie desejamos )ue uma determinada
pasta seja servida como um site e dentro dessa pasta eiste umar)uivo c+amado inde.+tml, esse ar)uivo ser a p!ina inicial a
menos )ue al!uma con3!uração determine outra p!ina para esse
3m.
Dentro da pasta do site, no mesmo n=vel )ue o inde.+tml, 2
recomendado )ue sejam criadas mais al!umas pastas para manter
separados os ar)uivos de ima!ens, as &ol+as de estilo 6II e os
scripts. ara iniciar um projeto, ter=amos uma estrutura de pastas
como a demonstrada na ima!em a se!uir'
:i(+a " - Es4+4+a de P+o9e4o
Muitas ve#es, um site 2 servido por meio de uma aplicação Web e,
nesses casos, a estrutura dos ar)uivos depende de como a aplicaçãonecessita dos recursos para &uncionar corretamente. or2m, no !eral,
as aplicaç-es tamb2m se!uem um padrão bem parecido com o )ue
estamos adotando para o nosso projeto.
; Edi4o+es e IDEs
Eistem editores de teto como Jedit K""".!nome.or!L, Iublime
K+ttp'99""".sublimetet.com9L e No4e&ad, )ue possuem realce de sintae e outras &erramentas para&acilitar o desenvolvimento de p!inas.
? P+i3ei+a &'(i#a
: primeira p!ina )ue desenvolveremos para a Mirror Fashion ser a
Sobre, )ue eplica detal+es sobre a empresa, apresenta &otos e a
+ist7ria.
Recebemos o desi!n j pronto, assim como os tetos. Nosso trabal+o,
como desenvolvedores de front-end , 2 codi3car o H$M% e 6II
necessrios para esse resultado.
8/18/2019 HTML Aula 02
4/8
CURSODESENVOLVIMENTO WEBMÓDULO HTML 2
AULA
CURSO DESENVOLVIMENTOWEBF
5eja abaio como 3car a p!ina sobre.html do nosso projeto para as
lojas MIRROR FASHION depois de conclu=do.
8/18/2019 HTML Aula 02
5/8
CURSODESENVOLVIMENTO WEBMÓDULO HTML 2
AULA
CURSO DESENVOLVIMENTOWEB
8/18/2019 HTML Aula 02
6/8
CURSODESENVOLVIMENTO WEBMÓDULO HTML 2
AULA
CURSO DESENVOLVIMENTOWEB
@ Ee+**io5 P+i3ei+os &assos *o3 HTML1 :o lon!o do curso, usaremos diversas ima!ens )ue o nosso desi!ner
preparou. Nesse ponto, vamos importar todas as ima!ens dentro do
projeto )ue criamos antes para )ue possamos uslas nas p!inas.
• 5oc* encontra todos os ar)uivos em66mpserver/cursos/html5/mirror-fashion. Copie osarquivos para sua pasta documentos.
• 5eri3)ue a pasta im!, a!ora c+eia de ar)uivos do desi!n do
site. :l2m desta pasta, teremos as pastas js e css, )ue ainda
não usaremos.
• Em casa voc* pode baiar um com todos os ar)uivos
necessrios para o curso a)ui'
http//microplus.com.!r/"e!.#ip
8/18/2019 HTML Aula 02
7/8
CURSODESENVOLVIMENTO WEBMÓDULO HTML 2
AULA
CURSO DESENVOLVIMENTOWEBS
0+1: Mirror 8as+ion09+1
0p
: Mirror 8as+ion 2 a maior empresa de com2rcio eletrTnicono se!mento
de moda em todo o mundo. 8undada em 1A>, possui3liais
em 1>F pa=ses........
09p
S. Cm teto corrido sem *n&ases 2 di&=cil de ler. Cse ne!ritos e itlicos
para destacar partes importantes.
Cse a ta! 0stron! para a *n&ase mais &orte em ne!rito, por eemplo
para destacar o nome da empresa no teto do primeiro par!ra&o'
0p: 0stron!Mirror 8as+ion09stron! 2 a maior empresacom2rcio eletrTnico.......09p
Cse tamb2m a *n&ase com 0em )ue deiar o teto em itlico. Na
parte da História, colo)ue os nomes das pessoas e da &am=lia em
0em.
. : p!ina deve ter duas ima!ens. : primeira apresenta o centro da
Mirror Fashion e deve ser i#se+ida a&s o se(#do &a+'(+a0o do4e4o. : outra, 2 uma ima!em da Família Pelho e deve ser colocada
a&s o s)44!o da His4+ia.
:s ima!ens podem ser carre!adas com a ta! 0im!, apontando seu
camin+o. :l2m disso, no H$M%
8/18/2019 HTML Aula 02
8/8
CURSODESENVOLVIMENTO WEBMÓDULO HTML 2
AULA
CURSO DESENVOLVIMENTOWEB
093!ure
A. 5eri3)ue o resultado no nave!ador. Devemos j ver o conte4do e as
ima!ens na se)u*ncia, mas sem um desi!n muito interessante.