HTML Aula 02

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


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


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


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


AULA


8/18/2019 HTML Aula 02

6/8


AULA


@ 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


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


AULA


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.

HTML Aula 02

Documents

Transcript of HTML Aula 02