100% acharam este documento útil (1 voto)
75 visualizaçõesCaelum HTML Css Javascript
Enviado por
flavio gustavoDireitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF ou leia on-line no Scribd
100% acharam este documento útil (1 voto)
75 visualizaçõesCaelum HTML Css Javascript
Enviado por
flavio gustavoDireitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF ou leia on-line no Scribd
/ 286
Desenvolvimento Web
com HTML, CSS e
JavaScript
Curso WD-43
7 )Jcaelum
ensino e inovacao caelum
nsino e inovacao
Conhega também:
glura alura.com.br
casadocodigo.com.br
EY blog.caelum.com.br caelum.com.br/newsletter
— facebook.com.br/caelumbr ‘twittercom/caelum SOBRE ESTA APOSTILA
Esta apostila da Caelum visa ensinar de uma maneira elegante, mostrando apenas o que é necessério ¢
quando é necessério, no momento certo, poupando 0 leitor de assuntos que nao costumam ser de seu
interesse em determinadas fases do aprendizado.
A Calum espera que vocé aproveite esse material. Todos os comentarios, criticas e sugestoes serio
muito bem-vindos.
Essa apostila é constantemente atualizada e disponibilizada no site da Caelum. Sempre consulte 0
site para novas vers6es e, a0 invés de anexar o PDF para enviar a um amigo, indique o site para que ele
possa sempre baixar as tiltimas verses. Vocé pode conferir 0 cédigo de versio da apostila logo no nal do
indice.
Baixe sempre a versio mais nova em: www.caclum.com br/apostilas
Esse material é parte integrante do treinamento Desenvolvimento Web com HTML, CSS e JavaScript
e distribuido gratuitamente exclusivamente pelo site da Caelum. Todos os direitos sao reservados 4
Caelum. A distribuigio, cépia, revenda e utilizagéo para ministrar treinamentos sao absolutamente
vedadas. Para uso comercial deste material, por favor, consulte a Caelum previamente. aelum
Sumétio
Sumario
1 Sobre o curso - 0 complexo mundo do front-end
1.10 curso e os exercicios
1.2.0 projeto de e-commerce
1.3 Tirando duividas com instrutor
1.4 Tirando dividas online no GU]
15 Bibliografia
1.6 Para onde ir depois?
2 Introdugio a HTML e CSS
2.1 Exibindo informagoes na Web
2.2 Sintaxe do HTML
2.3 Estrutura de um documento HTML
2.4 Tags HTML
2.5 Imagens
2.6 A estrutura dos arquivos de um projeto
2.7 Editores e IDEs
2.8 Primeira pégina
2.9 Exercicios: primeiros passos com HTML
2.10 Estilizando com CSS
2.11 Sintaxe e inclusio de CSS
2.12 Propriedades tipogrificas ¢ fontes
2.13 Alinhamento e decoragio de texto
2.14 Imagem de fundo
2.15 Bordas
2.16 Exercicios: primeiros passos com CSS
2.17 Cores na Web
2.18 Listas HTML
2.19 Espacamento, margem e dimensoes
2.20 Exercicios: listas e margens
Ee eaa Sumério Caelum
2.21 Links HTML, 33
2.22 Exercicios: links 34
2.23 Elementos estruturais 35
2.24 CSS; Seletores de ID e filho 36
2.25 Fluxo do documento e float 37
2.26 Exercicios: seletores CSS ¢ flutuasao de elementos 38
2.27 O futuro e presente da Web com o HTMLS 40
3 HTML semintico e posicionamento no aL
3.1 processo de desenvolvimento de uma tela 4
3.2.0 projeto Mirror Fashion B
3.3 Analisando o Layout “4
3.4 HTML semintico 46
3.5 Pensando no header a7
3.6 Estilizagao com classes, 48
3.7 Exercicios: header semantico 50
3.8 CSS Reset 32
3.9 Block vs Inline 53
3.10 Exercfcios: reset e display oA
3.11 Position: static, relative, absolute 55
3.12 Exercfcios: posicionamento 58
3.13 Para saber mais: suporte HTMLS no Internet Explorer antigo 58
3.14 Bxercicios opcionais 60
4 Mais HTML ¢ CSS 61
4.1 Analisando o miolo da pigina 6
4.2 Formulérios 6
4.3 Posicionamento com float e clear a
4.4 Decoragio de texto com CSS 68
4.5 Cascata ¢ heranga no CSS 64
4.6 Para saber mais: o valor inherit 65
4.7 Exercicios: menu e destaque 66
4.8 Display inline-block 69
4.9 Exercicios: painéis flutuantes 70
4.10 Seletores de atributo do CSS3 B
4.11 Rodapé ”
4.12 Substituigdo por Imagem 8
4.13 Estilizagdo e posicionamento do rodapé 5
4.14 Exercicios: rodapé 7 aun, Sumério
4.15 Exercicios opcionais n
5 CSS Avangado 80
5.1 Seletores avangados 80
5.2 Psendo-classes 8
5.3 Pseudo elementos 85
5.4 Exercicios: seletores, pseudo-classes e pseudo-elementos. 87
5.5 Exercicios opcionais, 89
5.6 CSS3: border-radius 90
5.7 CSS3: text-shadow a1
5.8 C883: box-shadow 93
5.9 Opacidade e RGBA 93
5.10 Prefixos 99
5.11 CSS3: Gradientes, 98
5.12 Progressive Enhancement 100
13 Exercicios: visual CS$3 101
5.14 CSS3 Transitions 103
5.15 CSS3 Transforms 104
5.16 Exercfcios: CSS3 transform e transition 106
5.17 Para saber mais: especificidade de seletores CSS 109
6 Web para dispositivos méveis 113
6.1 Site mobile ou mesmo site? U3
6.2 CSS media types 6
6.3 CSS3 media queries uy
6.4 Viewport uy
6.5 Exercicios: adaptagdes para mobile ug
6.6 Responsive Web Design 124
6.7 Mobile-first 124
6.8 Exercicios opcionais: versio tablet 125
7 Progressive enhancement e mobile-first 127
7.1 Formulério de compra 127
7.2 Exercicios: formulirio da pagina de produto 130
7.3 Design mobile-first 131
7.4 Progressive enhancement 132
7.5 Box model e box-sizing 133
7.6 Exercicios: pagina de produto 134
7.7 Evoluindo o design para desktop 138 Sumério caeum
7.8 Media queries de contetido 139
7.9 Exercicios: responsive design 140
7.10 HTMLS Input range a2
7.11 Exercicios: seletor de tamanho 143
7.12 Tabelas 144
7.13 Exercicios: detalhes 14s
7.14 Exercicios opcionais: fundo 148
8 Bootstrap e formulérios HTMLS 149
8.1 Bootstrap e frameworks de CSS 149
8.2 Estilo e componentes base 150
8.3 A pagina de checkout da Mirror Fashion 150
8.4 Exercicios: pagina de checkout 152
8.5 Formulérios a fando 155
8.6 Novos componentes do HTMLS 159
8.7 Novos atributos HTMLS em elementos de formulétio 163
8.8 feones 165
8.9 Exercicios: Formulérios 166
8.10 Validagao HTMLS 168
8.11 Exercfcios: validagao com HTMLS 170
8.12 Grid responsivo do Bootstrap 170
8.13 Bxercfcios: grids a
8.14 Para saber mais: componentes JS do Bootstrap 175
8.15 Exercicios opcionais: navbar ¢ JavaScript 175
8.16 Para saber mais: outros frameworks CSS v7
9 JavaScript e interatividade na Web 179
9.1 Porque usamos JavaScript? 179
9.2 Um pouquinho da histéria do JavaScript 180
9.3 Caracteristicas da linguagem 181
9.4 Console do navegador 181
9.5 Sintaxe basica 182
9.6 A tag script 184
9.7 DOM: sua pagina no mundo JavaScript 185
9.8 FungGes ¢ os eventos do DOM 187
9.9 Exercicios: mostrando tamanho do produto com javascript 188
9.10 Fungées Andnimas 190
9.11 Manipulando strings 191
9.12 Manipulando nimeros 192 aun, Sumério
9.13 Concatenasées 192
9.14 Exercicios: Calculando o total da compra 193
9.15 Array 195
9.16 Blocos de Repeticéo 196
9.17 Fungées temporais, 197
9.18 Exercicios opcionais: banner rotativo 198
9.19 Para saber mais: varios callbacks no mesmo elemento 200
9.20 Para saber mais: controlando as validagées HTMLS 201
10 jQuery, 203
10.1 jQuery - A fungao $ 203
10.2 jQuery Selectors 204
10,3 Filtros customizados e por DOM 205
104 Utilitario de iteragéo do jQuery 205
10.5 Caracteristicas de execugao 206
10.6 Mais produtos na home 207
10.7 Bxercicios: jQuery na home 208
10.8 Plugins jQuery an
10.9 Exercicios: plugin an
11 IntegracGes com servigos Web 213
11.1 Web 2.0 ¢ integragses 213
11.2 iframes 213
11.3 Video embutido com YouTube 24
114 Exercicios: iframe 24
11.5 Exercicios opcionais: Google Maps 24
11.6 Fontes customizadas com @font-face 215
11,7 Servigos de web fonts 216
118 Exercicios: Google Web Fonts 216
12 Apéndice - Otimizagées de front-end 218
12.1 HTML e HTTP - Como funciona a World Wide Web? 219
12.2 Principios de programasao distribuida 221
12.3 Ferramentas de diagnéstico - YSlow e PageSpeed 22
12.4 Compressio e minificacdo de CSS e JavaScript 223
12.5 Compressio de imagens 224
12.6 Diminuir o mimero de requests 226
12.7 Juntar arquivos CSS e JS 27
12.8 Image Sprites 228 Sumério Caen
12.9 Para saber mais 231
12.10 Exercicios: otimizagées Web 231
13 Apéndice - LESS 233
13.1 Variaveis 233
13.2. Contas 234
13.3 Hierarquia 235
13.4 Fungées de cores e palhetas automiticas 235
13.5 Reaproveitamento com mixins 236
13.6 Executando o LESS 237
13.7 Para saber mais: recursos avancados ¢ alternativas 237
13.8 Exercicios: LESS 238
14 Apéndice - Introducio a PHP 242
14.1 Libertando 0 HTML de suas limitagoes m2
14.2. Como funciona um servidor HTTP 243
14,3 Como funciona o PHP no servidor 243
1444 Para saber mais; instalagto do PHP em casa 244
14.5 Exercicios: executando o PHP 245
146 Reaproveitamento de cédigo com include 246
147 Exercicios: include 247
148 Para saber mais: ainda mais flexibilidade com vatiaveis 249
149 Exercicios opcionais: variéveis em PHP 249
15 Apéndice - PHP: parametros e paginas dinamicas 251
15.1 Submissdo do formulério 251
15.2 Parametros com PHP 252
15.3 Listas de definicéo no HTML 253
15.4 Exercicios: checkout da compra 253
16 Apéndice - PHP: Banco de dados e SQL. 256
16.1 MySQL e phpMyAdmin 287
16.2 Para saber mais: instalagio do MySQL em casa 258
16.3 Buscas no MySQL com PHP 258
16-4 Refinando as buscas com WHERE 259
16.5 Exercicios: phpMyAdmin 260
16.6 Exercicios: PHP com MySQL 261
16:7 Busca de muitos resultados 262
16.8 Ordenagao dos resultados 263
16.9 Exercicios: mais buscas com PHP 263 aelum Sumitio
16.10 Exercicios opcionais, 265
17 Apéndice - Subindo sua aplicagao no cloud 266
17.1 Como escolher um provedor 266
17.2.0 Jelastic Cloud Locaweb 267
17.3 Criando a conta 267
17.4 Importando dados no MySQL. 268
17.5 Preparando o projeto 269
17.6 Enviando o projeto e iniciaizando servidor 270
18 Apéndice - Mais integracées com servigos Web 272
18.1 Botio de curtir do Facebook 272
18.2 Exercicios: Facebook 273
18.3 Para saber mais: Twitter 274
18.4 Para saber mais: Google+ 274
18.5 Exercicios opcionais: Twitter e Google+ 275
‘Versio: 22.026 CariruLo 1
SOBRE O CURSO - O COMPLEXO MUNDO
DO FRONT-END
"Ado é a chave fundamental para todo sucesso" -- Pablo Picasso
‘Vivemos hoje numa era em que a Internet ocupa um espaso cada vez mais importante em nossas
vidas pessoais e profissionais. O surgimento constante de Aplicagdes Web, para as mais diversas
finalidades, ¢ um sinal claro de que esse mercado esta em franca expansio e traz muitas oportunidades.
Aplicacées corporativas, comércio eletrénico, redes sociais, filmes, misicas, noticias e tantas outras Areas
estio presentes na Internet, fazendo do navegador (0 browser) o software mais utilizado de nossos
computadores
Esse curso pretende abordar o desenvolvimento de front-end (interfaces) para Aplicagdes Web ¢ Sites
que acessamos por meio do navegador de nossos computadores, utilizando padroes atuais de
desenvolvimento ¢ conhecendo a fundo suas caracteristicas técnicas. Discutiremos as implementagoes
dessas tecnologias nos diferentes navegadores, a adogao de frameworks que facilitam ¢ aceleram nosso
trabalho, além de dicas téenicas que destacam um profissional no mercado. HTML, CSS e JavaScript
serdo vistos em profundidade
Além do acesso por meio do navegador de nossos computadores, hoje o acesso & Internet a partir de
dispositivos méveis representa um grande avango da plataforma, mas também implica em um pouco
mais de atencéo ao trabalho que um programador front-end tem que realizar. No decorrer do curso,
vamos conhecer algumas dessas necessidades ¢ como utilizar os recursos disponiveis para atender
também a essa nova necessidade.
1.1 O CURSO E OS EXERCICIOS
Esse € um curso pritico que comesa nos fundamentos de HTML ¢ CSS, incluindo tépicos
relacionados as novidades das versées HTMLS ¢ CSS3. Depois, é abordada a linguagem de programacio
JavaScript, para enriquecer nossas paginas com interagdes e efeitos, tanto com JavaScript puro quanto
com a biblioteca jQuery, hoje padrao de mercado.
Durante o curso, serdo desenvolvidas paginas de um Site de comércio eletrdnico. Os exercicios foram
projetados para apresentar gradualmente ao aluno quais sio as técnicas mais recomendadas ¢ utilizadas
quando assumimos o papel do Programador front-end, quais sio os desafios mais comuns e quais sio as técnicas e padres recomendados para atingirmos nosso objetivo, transformando imagens estaticas (os
layouts) em cédigo que os navegadores entendem ¢ exibem como paginas da Web.
Os exercicios propostos so fundamentais para o acompanhamento do curso, desde os mais iniciais,
j4 que so incrementados no decorrer das aulas. Igualmente importante ¢ a participacao ativa nas
discussdes e debates em sala de aula.
Seus livros de tecnologia parecem do século pasado?
Conheca a Casa do Cédigo, uma nova editora, com autores de destaque no
mercado, foco em ebooks (PDF, epub, mobi), presos imbativeis ¢ assuntos
atuais.
Com a curadoria da Caelum e excelentes autores, é uma abordagem diferente
para livros de tecnologia no Brasil
Casa do Cédigo, Livros de Tecnologia
1.2 O PROJETO DE E-COMMERCE
Durante o curso, vamos produzir um site para um e-commerce de moda chamado Mirror Fashion.
Construiremos virias paginas da loja com intuito de aprender os conceitos de HTML, CSS e JS
Os contetidos 0 design da loja jé foram pré-definidos. Vamos, aqui, focar na implementacio, papel
do programador front-end.
1.3 TIRANDO DUVIDAS COM INSTRUTOR
Durante o curso, tire todas as suas diividas com o instrutor. HTML, CSS e JavaScript, apesar de
parecerem simples e bésicos, tém muitas caracteristicas complexas que nao podem deixar de ser
totalmente compreendidas pelo aluno. Os instrutores também estéo disponiveis para tirar as diividas do
aluno apés o término do treinamento, basta entrar em contato direto com 0 instrutor ou com a Caelum,
teremos o prazer em ajudé-lo,
Se vocé esté acompanhando essa apostila em casa, pense também em fazer o curso presencial na
Caclum. Vocé ter contato direto com o instrutor para esclarecer suas diividas, aprender mais tépicos
além da apostila, ¢ trocar experiéncias.
1.4 TIRANDO DUVIDAS ONLINE NO GUJ Recomendamos fortemente a busca de recursos ¢ a participagio ativa na comunidade por meio das
listas de discussio relacionadas a0 contetido do curso.
© GUJ.com.br é um site de perguntas ¢ respostas para desenvolvedores de software que abrange
diversas reas, sendo que front-end & um dos principais focos. A comunidade do GUJ tem mais de 150
mil usudrios € 1 milhao e meio de mensagens. f 0 lugar ideal pra vocé tirar suas diividas e encontrar
outros desenvolvedores.
Attp://wwwguj.com br
Agora éa melhor hora de respirar mais tecnologia!
Se vocé est gostando dessa apostila, certamente vai aproveitar os cursos
a U fad online que lanamos na plataforma Alura, Vocé estuda a qualquer momento
com a qualidade Caelum. Programacio, Mobile, Design, Infra, Front-End e
Business! Ex-aluno da Caelum tem 15% de desconto, siga o link!
Conheca a Alura Cursos Online,
1.5 BIBLIOGRAFIA
Além do conhecimento disponivel na Internet pela comunidade, existem muitos livros interessantes
sobre o assunto, Algumas referéncias
« HTMLS e CSS3: Domine a web do futuro - Lucas Mazza, editora Casa do Cédigo;
«A Web Mobile: Design Responsivo e além para uma Web adaptada ao mundo mobile - Sérgio
Lopes, editora Casa do Cédigo;
« A Arte EA Ciéncia Do CSS - Adams & Cols;
« Pro JavaScript Techniques - John Resig;
« ‘The Smashing Book - smashingmagazine.com
1.6 PARA ONDE IR DEPOIS?
Este curso é parte da Formacéo Front-end da Caelum que engloba também o treinamento Web
Apps com JavaScript Moderno, DOM e jQuery. Vocé pode obter mais informagées aqui:
https://www.caclum.com.br/formacao-frontend
Se 0 seu desejo é entrar mais a fundo no desenvolvimento Web, incluindo a parte server-side, oferecemos 0 curso Desenvolvimento Web com PHP e MySQL, a Formagao Java ¢ a Formacéo NET
que abordam trés caminhos possiveis para esse mundo.
Mais informagées em:
«© htps://www.caelum.com br/curso-php-mysql
# htps://www.caelum.com.br/formacao-java
@ https://www.caelum.com.br/formacao-dotnet Capiruo 2
INTRODUGAO A HTML E CSS
"Quanto mais nos elevamos, menores parecemos aos olhos daqueles que ndo sabem voar.” — Friedrich
Wilhelm Nietzsche
2.1 EXIBINDO INFORMAGOES NA WEB
A tinica linguagem que o navegador consegue interpretar para a exibigto de conteiido é 0 HTML.
Para iniciar a exploracéo do HTML, vamos imaginar o seguinte caso: 0 navegador realizou uma
requisigéo e recebeu como corpo da resposta o seguinte conteitdo:
Harror Fashion.
Ben-vindo a Mirror Fashion, sua loja de roupas e acessérios
Confira nossas prosogses
Receba informagdes sobre nossos langanentos por email
Navegue por todos nossos produtos en cataloga
conpre sen sair de casa
Para conhecer 0 comportamento dos navegadores quanto a0 contetido descrito antes, vamos
reproduzir esse contetido em um arquivo de texto comum, que pode ser criado com qualquer editor de
texto puro. Salve o arquivo como index.html e abra-o a partir do navegador A sua escolha, BI rei eS
SG file:/slocathost/Users/Gabriel/Documents/Caelum/Ap... vz | @ HI O A
‘Mirror Fashion. Bern-vindo A Mirror Fashion, sua lof de roupas e aoessA?xis. Confira nossas
promo §Ayres. Reoeba informaA§Ayes sobre nossos lanASumentos por email. Navegue por
Todos noss0s produtas em catAjlogo. Compre som sat do case
Parece que obtemos um resultado um pouco diferente do esperado, nao? Apesar de ser capaz de
exibir texto puro em sua area principal, algumas regras devem ser seguidas caso desejemos que esse texto
seja exibido com alguma formatagio, para facilitar a leitura pelo usuério final
Usando o resultado acima podemos concluir que o navegador por padrio:
« Pode nao exibir caracteres acentuados corretamente;
«Nao exibe quebras de linha.
Para que possamos exibir as informagoes desejadas com a formatagao, & necessirio que cada trecho
de texto tenha uma marcagdo indicando qual ¢ o significado dele. Essa marcacéo também influencia a
maneira com que cada trecho do texto seré exibido. A seguir é listado o texto com uma marcacio
correta:
<1D0cTYPE heml>
‘
‘
neta charset="utf
mirror Fashion. . Diversas tags sio disponibilizadas pela linguagem HTML e cada uma possui uma
funcionalidade especifica
No cédigo de antes, vimos por exemplo o uso da tag
Bem-vindo & Mirror Fashion, sua loja de roupas acessérios.
. Ela representa o titulo principal da pagina.
Note a sintaxe. Uma tag é definida com caracteres < e >, ¢ seu nome (hl no caso). Muitas tags
possuem contetido, como o texto do titulo ("Mirror Fashion’). Nesse caso, para determinar onde 0
contetido acaba, usamos uma fag de fechamento com a barra antes do nome:
Algumas tags podem receber atributos dentro de sua definicio. Sio parimetros usando a sintaxe de
nome=valor . Para definir uma imagem, por exemplo, usamos a tag ![]()
¢, para indicar qual
imagem carregar, usamos 0 atributo src
img sro=",./imagens/casa_de_praia.jpg">
Repare que a tag img nao possui contetido por si s6. Nesses casos, nao é necessério usar uma tag de
fechamento como antes no ht
2.3 ESTRUTURA DE UM DOCUMENTO HTML Um documento HTML vilido precisa seguir obrigatoriamente a estrutura composta pelas tags
, € ea instrugdo . Vejamos cada uma delas:
Atag
Na estrutura do nosso documento, antes de tudo, inserimos uma tag . Dentro dessa tag, é
necessirio declarar outras duas tags: e . Essas duas tags sio "irmas’, pois estio no
mesmo nivel hierdrquico em relacao & sua tag "pai", que €
chtml>
‘chead>
-
A tag
A tag contém informagées sobre nosso documento que séo de interesse somente do
navegador, e nio dos visitantes do nosso site, S40 informagées que nao serio exibidas na area do
documento no navegador.
A especificagio obriga a presenca da tag de conteido dentro do nosso <head> ,
permitindo especificar o titulo do nosso documento, que normalmente seré exibido na barra de titulo da
jancla do navegador ou na aba do documento.
Outra configuragao muito utilizada, principalmente em documentos cujo contetido ¢ escrito em um
idioma como o portugués, que tem caracteres como acentos ¢ cedilha, é a configuracio da codificasio de
caracteres, chamado de encoding ou charset.
Podemos configurar qual codificagio queremos utilizar em nosso documento por meio da
configuragao de charset _natag <meta> . Um dos valores mais comuns usados hoje em dia é o UTE-8,
também chamado de Unicode. Hé outras possibilidades, como o latin], muito usado antigamente.
© UTF-8 é a recomendacao atual para encoding na Web por ser amplamente suportada em
navegadores editores de cédigo, além de ser compativel com praticamente todos os idiomas do mundo.
Eo que usaremos no curso.
<html>
‘cheaa>
neta charset="utf-2">
ctitlesMirror Fashion
A tag
Atag contém o corpo do nosso documento, que é exibido pelo navegador em sua janela, E necessério que 0 tenha ao menos um elemento "filho’, ou seja, uma ou mais tags HTML dentro
dele
sheml>
‘
‘eneta charset="utf 8
-titleomirror Fashione/title>
chiA Mirror Fashione/ii>
Nesse exemplo, usamos a tag , que indica um titulo,
A instrugao DOCTYPE
© boctyPE nao é uma tag HTML, mas uma instrugio especial. Ela indica para o navegador qual
versio do HTML deve ser utilizada para renderizar a pagina. Utilizaremos , que
indica para o navegador a utilizagao da versio mais recente do HTML - a versio 5, atualmente.
Ha muitos comandos complicados nessa parte de DOCTYPE que eram usados em versdes anteriores
do HTML e do XHTML. Hoje em dia, nada disso é mais importante. O recomendado é sempre usar a
liltima versio do HTML, usando a declaragio de voctvPe simples:
<1D0cTYPE heml>
2.4 TAGS HTML
© HTML ¢ composto de diversas tags, cada uma com sua fungio ¢ significado. O HTML 5, entio,
adicionou muitas novas tags, que veremos ao longo do curso.
Nese momento, vamos focar em tags que representam titulos, paragrafo e énfase.
Titulos
Quando queremos indicar que um texto é um titulo em nossa pagina, utilizamos as tags de heading
em sua marcacio:
, que indica um titulo,
A instrugao DOCTYPE
© boctyPE nao é uma tag HTML, mas uma instrugio especial. Ela indica para o navegador qual
versio do HTML deve ser utilizada para renderizar a pagina. Utilizaremos , que
indica para o navegador a utilizagao da versio mais recente do HTML - a versio 5, atualmente.
Ha muitos comandos complicados nessa parte de DOCTYPE que eram usados em versdes anteriores
do HTML e do XHTML. Hoje em dia, nada disso é mais importante. O recomendado é sempre usar a
liltima versio do HTML, usando a declaragio de voctvPe simples:
<1D0cTYPE heml>
2.4 TAGS HTML
© HTML ¢ composto de diversas tags, cada uma com sua fungio ¢ significado. O HTML 5, entio,
adicionou muitas novas tags, que veremos ao longo do curso.
Nese momento, vamos focar em tags que representam titulos, paragrafo e énfase.
Titulos
Quando queremos indicar que um texto é um titulo em nossa pagina, utilizamos as tags de heading
em sua marcacio:
Ben-vindo & Mirror Fashion, sua loja de roupas e acesséries.
As tags de heading sio tags de contesido e vio de a , seguindo a ordem de importancia,
sendo 0 titulo principal, o mais importante, e 0 titulo de menor importincia
Utilizamos, por exemplo, a tag para o nome, titulo principal da pagina, e a tag como
subtitulo ou como titulo de segdes dentro do documento,
A ordem de importancia, além de influenciar no tamanho padrio de exibigio do texto, tem impacto nas ferramentas que processam HTML. As ferramentas de indexagao de conteiido para buscas, como o
Google, Bing ou Yahoo! levam em consideragao essa ordem ¢ relevancia. Os navegadores especiais para
acessibilidade também interpretam 0 contetido dessas tags de maneira a diferenciar seu contedido ¢
facilitar a navegasao do usuério pelo documento.
Paragrafos
Quando exibimos qualquer texto em nossa pégina, é recomendado que ele seja sempre conteiido de
alguma tag filha da tag . A marcagio mais indicada para textos comuns é a tag de paragrafo:
Se vocé tiver varios parégrafos de texto, use varias dessas tags para separé-los
Marcagoes de énfase
Quando queremos dar uma énfase diferente a um trecho de texto, podemos utilizar as marcagées de
énfase. Podemos deixar um texto "mais forte” com a tag ou deixar o texto com uma "énfase
acentuada’ com a tag . Também hd a tag , que diminui o tamanho do texto.
Por padréo, os navegadores renderizario o texto dentro da tag em negrito € o texto
dentro da tag em itilico, Existem ainda as tags e , que atingem 0 mesmo resultado
visualmente, mas as tags ¢ sio mais indicadas por definirem nossa intengao de
significado ao contetido, mais do que uma simples indicacio visual. Vamos discutir melhor a questio do
significado das tags mais adiante
Mirror Fashion .
Aprenda se divertindo na Alura Start!
Vocé conhece alguém que tem potencial para
tecnologia ¢ programagio, mas que nunca
d U fd S of escreveu uma linha de cédigo? Pode ser um filho,
sobrinho, amigo ou parente distante. Na Alura
Start cla vai poder criar games, apps, sites ¢ muito mais! B 0 comego da jornada com
Programagao e a porta de entrada para uma possivel carreira de sucesso. Ela vai estudar em seu
Proprio ritmo e com a melhor didatica. A qualidade da conceituada Alura, agora para Starters.
nheca os cursos online da Alura Start!
2.5 IMAGENS
‘Alag define uma imagem em uma pigina HTML e necessita de dois atributos preenchidos
sre e alt . O primeiro é um atributo obrigatério ¢ aponta para o local da imagem e o segundo, um
texto alternativo para a imagem caso essa nao possa ser carregada ou visualizada. O atributo alt nao é
obrigatério, mas é importante ser preenchido para que leitores de tela e robs de busca como 0 Google
consigam ler 0 contetido da imagem.
OHTML 5 introduziu duas novas tags especificas para imagem: e . A tag
define uma imagem com a conhecida tag . Além disso, permite adicionar uma
legenda para a imagem por meio da tag
‘cing sre="ing/produtet.png" alt="Foto do Fuze Cardigan">
Fuzz Cardigan por RS 129,98
2.6 A ESTRUTURA DOS ARQUIVOS DE UM PROJETO.
Como todo tipo de projeto de software, existem algumas recomendagdes quanto A organizagio dos
arquivos de um site, Nao hé nenhum rigor técnico quanto a essa organizacio e, na maioria das vezes,
vocé vai adaptar as recomendagées da maneira que for melhor para o seu projeto.
Como um site é um conjunto de paginas Web sobre um assunto, empresa, produto ou qualquer
outra coisa, é comum todos os arquivos de um site estarem dentro de uma s6 pasta ¢, assim como um
livro, é recomendado que exista uma "capa", uma pagina inicial que possa indicar para o visitante quais
sio as outras paginas que fazem parte desse projeto e como ele pode acessé-las, como se fosse o indice do site
Esse indice, ndo por coincidéncia, ¢ convencao adotada pelos servidores de péginas Web. Se
desejamos que uma determinada pasta seja servida como um site ¢ dentro dessa pasta existe um arquivo
chamado index.html, esse arquivo seré a pagina inicial a menos que alguma configuracao determine
outra pagina para esse fim,
Dentro da pasta do site, no mesmo nivel que o index.html , é recomendado que sejam criadas mais
algumas pastas para manter separados os arquivos de imagens, as folhas de estilo CSS e os scripts. Para
iniciar um projeto, teriamos uma estrutura de pastas como a demonstrada na imagem a seguir:
Vproot
Peas
> img
eis
2 Indexheml
8 sobrenemt
‘Muitas vezes, um site & servido por meio de uma aplicagao Web e, nesses casos, a estrutura dos
arquivos depende de como a aplicacdo necesita dos recursos para funcionar corretamente. Porém, no
geral, as aplicagdes também seguem um padrdo bem parecido com o que estamos adotando para 0 nosso
projeto,
2.7 EDITORES E IDES
Existem editores de texto como Gedit (www.gnome.org), Sublime (http://www.sublimetext.com/),
Atom (http://atom.io/) ¢ Notepad++ (http://notepad-plus-plus.org), que possuem realce de sintaxe ¢
outras ferramentas para facilitar 0 desenvolvimento de paginas. H4 também IDEs (Integrated
Development Environment), que oferecem recursos como autocompletar ¢ pré-visualizagao, como
Eclipse e Visual Studio. ‘Seus livros de tecnologia parecem do século pasado?
Conhesa a Casa do Cédigo, uma nova editora, com autores de destaque no
mercado, foco em ebooks (PDF, epub, mobi), precos imbativeis ¢ assuntos
atuais.
Com a curadoria da Caelum e excelentes autores, é uma abordagem diferente
para livros de tecnologia no Brasil
© a t
2.8 PRIMEIRA PAGINA
A primeira pagina que desenvolveremos para a Mirror Fashion serd a Sobre, que explica detalhes
sobre a empresa, apresenta fotos e a histéria.
Recebemos o design ja pronto, assim como os textos. Nosso trabalho, como desenvolvedores de
front-end, é codificar o HTML e CSS necessarios para esse resultado, MIRAOR
cen cata. Euan, De sem A ie ut true ote
hacer ea
Compre ja em nossa loja! 2.9 EXERCICIOS: PRIMEIROS PASSOS COM HTML
1. Ao longo do curso, usaremos diversas imagens que o nosso designer preparou, Nesse ponto, vamos
importar todas as imagens dentro do projeto que criamos antes para que possamos usé-las nas
paginas,
+ Copie a pasta mirror-fashion de dentro da pasta Caelum/43 para a rea de trabalho de sua
maquina.
+ Verifique a pasta img, agora cheia de arquivos do design do site. Além desta pasta, teremos as
pastas js e css, que ainda nao usaremos.
Em casa
Vocé pode baixar um ZIP com todos os arquivos necessirios para 0 curso aqui:
https://s3.amazonaws.com/caelum.com br/caelum-arquivos-curso-web.zip
2. Dentro da pasta mirror-fashion, vamos criar 0 arquivo sobre.html com a estrutura basica contendo
© DOCTYPE eastags html, head e body
<100¢
meta charset="utt-8">
3. A pagina deve ter uma imagem com o logo da empresa, um titulo ¢ um texto falando sobre ela,
O texto para ser colocado na pagina esté no arquivo sobre.txt disponivel na pasta Caelum/43/textos.
Sao varios pardgrafos que devem ser adaptados com o HTML apropriado.
Apés copiar o texto do arquivo sobre.txt coloque cada um dos pardgrafos dentro de uma tag
Coloque também o titulo Histéria dentro de uma tag
Useatag ![]()
para ologo ea tag parao titulo. Seu HTML deve ficar assim, no final:
<
<>
‘A Mirror Fashion 6 a maior empresa de conércio eletronico no segaento
de moda en todo o mundo, Fundada en 1932, possui Tliais
fem 124 paises...
4. Um texto corrido sem énfases é dificil de ler. Use negritos ¢ itélicos para destacar partes importantes.
Use a tag para a énfase mais forte em negrito, por exemplo para destacar o nome da
empresa no texto do primeiro pardgrafo:
A € a maior enpresa conéreio eletrénico......-
Use também a énfase com que deixar o texto em itélico, Na parte da Histéria, coloque os
nomes das pessoas ¢ da familia em
5. A pagina deve ter duas imagens. A primeira apresenta o centro da Mirror Fashion e deve ser inserida
apés o segundo pardgrafo do texto. A outra, é uma imagem da Familia Pelho deve ser colocada
apés o subtitulo da Histéria.
‘As imagens podem ser carregadas com a tag ![]()
, apontando seu caminho. Além disso, no
HITMLS, podemos usar as tags e para destacar a imagem e colocar uma
legenda em cada uma
A imagem do centro de distribuigao esté em img/centro-distribuicao.png:
centro de distribuiggo da Mirror Fashion
‘A imagem da familia é a img/familia-pelho.jpg ¢ deve ser colocada na parte de Histéria:
![]()
Fanilia Pelho
Foto da familia Pelho">
6. Confira se o seu cédigo final esta como a seguir:
<1D0cTYPE heml>
eneta charset="Utr
Sobre a Mirror Fashion
a Marror Fashione/ha>
loge da Mirror Fashion">
‘A € a maior empresa conércio eletrénico no segnento de
moda em todo o mundo. Fundada en 1932, possui filiais em 124 paises, sendo lider de
mercado com mais de 90% de participagdo em 128 deles
>
Nossa centro de distribuicdo fica en Jacarezinho, no Parand. De 1a, saem 48 avides que
distribues nossos produtes as casas do mundo todo. Nosso centro de distribuigio
-ing/eentro-distribuleao. png”
Foto do centro de distribuicao da Mirror Fashion">
onecentro de distribuisao da Mirror Fashion
Compre suas roupas ¢ acessérios na Mirror Fashion. Acesse nossa loja ou entre en contato
se tiver divigas, Conheca também nossa historia e nossos diferenciais
chasiisterdac/h2>
Fanilia Pelho
‘A fundagao em 1932 ocorreu no momento da descoberta econdmica do interior do Parana. A
familia Pelho, tradicional da regiao, investiu todas as suas economias nessa nova
Aniciativa, revoluciondria para a época. 0 fundador Eduardo Sindes Pelho ,
Gotado de particular visio administrativa, guiou os negécios da ompresa durante mais
de 50 anos, muitos deles ao lado de seu filha E, S, Pelho Filho , atual CEO,
© none da enpresa ¢ inspirado no none da familia.
<>
0 crescinento da empresa fol praticasente instantineo, Nos prineiros S anos, ja atendia
18 paises. Bateu a marca de 169 paises em apenas 15 anos de existéncia. até hoje, jé
atendeu 740 milhdes de usuarios diferentes, em bilhées de diferentes pedidos
<>
© crescimento en ndnero de funciondrios é também assonbroso. Hoje, é a maior enpregadora
do Brasil, mas mesmo apos apenas 5 anos de sua existéncia, j4 possuia 39 mil funcionarios.
Fora do Brasil, hé 240 mil funcionarios, além dos 890 mil brasileiros nas instalacdes de
Jacarezinho e nos escritérios em todo pais.
Dada a inportancia econdmica da empresa para o Grasil, a familia Pelho j4 recebeu diversos
pramias, honenagens @ condecoragdes. Todos os presidentes do Srasil ja visitaram as
instalagSes da Mirror Fashion, além de presidentes da Unido Européia, Asia eo
secretario-geral da ONU.
7. Verifique o resultado no navegador. Devemos ja ver 0 contetido e as imagens na sequéncia, mas sem
‘um design muito interessante, Boa PRATICA - INDENTAGKO
‘Uma pratica sempre recomendada, ligada 8 limpeza e utilizada para facilitar a leitura do cédigo,
€ 0 uso correto de recuos, ou indentagao, no HTML. Costumamos alinhar elementos "irmaos" na
‘mesma margem e adicionar alguns espacos ou um fab para elementos “filhos’.
A maioria dos exercicios dessa apostila utiliza um padrio recomendado de recuos.
Boa prarica - CoMENTARIOS
Quando iniciamos nosso projeto, utilizamos poucas tags HTML. Mais tarde adicionaremos uma
quantidade razodvel de elementos, o que pode gerar uma certa confusio. Para manter o cédigo mais
legivel, & recomendada a adigéo de comentarios antes da abertura ¢ apés o fechamento de tags
estruturais (que conterio outras tags). Dessa maneira, nés podemos identificar claramente quando
um elemento est dentro dessa estrutura ou depois dela.
Esse parégrafo esta "depois" da area principal.
2.10 ESTILIZANDO COM CSS
Quando escrevemos o HTML, marcamos o contetido da pagina com tags que melhor representam 0
significado daquele contetido. Ai quando abrimos a pagina no navegador é possivel perceber que ele
mostra as informagdes com estilos diferentes.
‘Um hl, por exemplo, fica em negrito numa fonte maior. Paragrafos de texto séo espacados entre si, ¢
assim por diante. Isso quer dizer que o navegador tem um estilo padrdo para as tags que usamos. Mas,
claro, pra fazer sites bonitdes vamos querer customiizar o design dos elementos da pigina.
Antigamente, isso era feito no préprio HTML. Se quisesse um titulo em vermelho, era sé fazer:
Mirror Fashion anos 99
Além da tag
© conteudo desta tag sera exibido en azul com fundo anarelo no navegador
Mas tinhamos acabado de discutir que uma das grandes vantagens do CSS era manter as regras de
estilo fora do HTML. Usando esse atributo style nao parece que fizemos isso. Justamente por isso nio
se recomenda esse tipo de uso na pritica, mas sim os que veremos a seguir
A tag style
A outra maneira de se utilizar 0 CSS é declarando suas propriedades dentro de uma tag
<>
© conteddo desta tag ser exibido em azul com fundo anarelo!
Tambénc/strong> sera exibido em a7vl con fundo amarelo!
© cédigo dentro da tag
Ben-vindo & Mirror Fashion, sua loja de roupas e acesséries.
As tags de heading sio tags de contesido e vio dea , seguindo a ordem de importancia,
sendo 0 titulo principal, o mais importante, e
0 titulo principal, o mais importante, e 0 titulo de menor importincia
Utilizamos, por exemplo, a tag para o nome, titulo principal da pagina, e a tag como
subtitulo ou como titulo de segdes dentro do documento,
A ordem de importancia, além de influenciar no tamanho padrio de exibigio do texto, tem impacto nas ferramentas que processam HTML. As ferramentas de indexagao de conteiido para buscas, como o
Google, Bing ou Yahoo! levam em consideragao essa ordem ¢ relevancia. Os navegadores especiais para
acessibilidade também interpretam 0 contetido dessas tags de maneira a diferenciar seu contedido ¢
facilitar a navegasao do usuério pelo documento.
Paragrafos
Quando exibimos qualquer texto em nossa pégina, é recomendado que ele seja sempre conteiido de
alguma tag filha da tag . A marcagio mais indicada para textos comuns é a tag de paragrafo:
Se vocé tiver varios parégrafos de texto, use varias dessas tags para separé-los
Marcagoes de énfase
Quando queremos dar uma énfase diferente a um trecho de texto, podemos utilizar as marcagées de
énfase. Podemos deixar um texto "mais forte” com a tag ou deixar o texto com uma "énfase
acentuada’ com a tag . Também hd a tag , que diminui o tamanho do texto.
Por padréo, os navegadores renderizario o texto dentro da tag em negrito € o texto
dentro da tag em itilico, Existem ainda as tags e , que atingem 0 mesmo resultado
visualmente, mas as tags ¢ sio mais indicadas por definirem nossa intengao de
significado ao contetido, mais do que uma simples indicacio visual. Vamos discutir melhor a questio do
significado das tags mais adiante
Mirror Fashion .
Aprenda se divertindo na Alura Start!
Vocé conhece alguém que tem potencial para
tecnologia ¢ programagio, mas que nunca
d U fd S of escreveu uma linha de cédigo? Pode ser um filho,
sobrinho, amigo ou parente distante. Na Alura
Start cla vai poder criar games, apps, sites ¢ muito mais! B 0 comego da jornada com
Programagao e a porta de entrada para uma possivel carreira de sucesso. Ela vai estudar em seu
Proprio ritmo e com a melhor didatica. A qualidade da conceituada Alura, agora para Starters.
nheca os cursos online da Alura Start!
2.5 IMAGENS
‘Alag define uma imagem em uma pigina HTML e necessita de dois atributos preenchidos
sre e alt . O primeiro é um atributo obrigatério ¢ aponta para o local da imagem e o segundo, um
texto alternativo para a imagem caso essa nao possa ser carregada ou visualizada. O atributo alt nao é
obrigatério, mas é importante ser preenchido para que leitores de tela e robs de busca como 0 Google
consigam ler 0 contetido da imagem.
OHTML 5 introduziu duas novas tags especificas para imagem: e . A tag
define uma imagem com a conhecida tag . Além disso, permite adicionar uma
legenda para a imagem por meio da tag
‘cing sre="ing/produtet.png" alt="Foto do Fuze Cardigan">
Fuzz Cardigan por RS 129,98
2.6 A ESTRUTURA DOS ARQUIVOS DE UM PROJETO.
Como todo tipo de projeto de software, existem algumas recomendagdes quanto A organizagio dos
arquivos de um site, Nao hé nenhum rigor técnico quanto a essa organizacio e, na maioria das vezes,
vocé vai adaptar as recomendagées da maneira que for melhor para o seu projeto.
Como um site é um conjunto de paginas Web sobre um assunto, empresa, produto ou qualquer
outra coisa, é comum todos os arquivos de um site estarem dentro de uma s6 pasta ¢, assim como um
livro, é recomendado que exista uma "capa", uma pagina inicial que possa indicar para o visitante quais
sio as outras paginas que fazem parte desse projeto e como ele pode acessé-las, como se fosse o indice do site
Esse indice, ndo por coincidéncia, ¢ convencao adotada pelos servidores de péginas Web. Se
desejamos que uma determinada pasta seja servida como um site ¢ dentro dessa pasta existe um arquivo
chamado index.html, esse arquivo seré a pagina inicial a menos que alguma configuracao determine
outra pagina para esse fim,
Dentro da pasta do site, no mesmo nivel que o index.html , é recomendado que sejam criadas mais
algumas pastas para manter separados os arquivos de imagens, as folhas de estilo CSS e os scripts. Para
iniciar um projeto, teriamos uma estrutura de pastas como a demonstrada na imagem a seguir:
Vproot
Peas
> img
eis
2 Indexheml
8 sobrenemt
‘Muitas vezes, um site & servido por meio de uma aplicagao Web e, nesses casos, a estrutura dos
arquivos depende de como a aplicacdo necesita dos recursos para funcionar corretamente. Porém, no
geral, as aplicagdes também seguem um padrdo bem parecido com o que estamos adotando para 0 nosso
projeto,
2.7 EDITORES E IDES
Existem editores de texto como Gedit (www.gnome.org), Sublime (http://www.sublimetext.com/),
Atom (http://atom.io/) ¢ Notepad++ (http://notepad-plus-plus.org), que possuem realce de sintaxe ¢
outras ferramentas para facilitar 0 desenvolvimento de paginas. H4 também IDEs (Integrated
Development Environment), que oferecem recursos como autocompletar ¢ pré-visualizagao, como
Eclipse e Visual Studio. ‘Seus livros de tecnologia parecem do século pasado?
Conhesa a Casa do Cédigo, uma nova editora, com autores de destaque no
mercado, foco em ebooks (PDF, epub, mobi), precos imbativeis ¢ assuntos
atuais.
Com a curadoria da Caelum e excelentes autores, é uma abordagem diferente
para livros de tecnologia no Brasil
© a t
2.8 PRIMEIRA PAGINA
A primeira pagina que desenvolveremos para a Mirror Fashion serd a Sobre, que explica detalhes
sobre a empresa, apresenta fotos e a histéria.
Recebemos o design ja pronto, assim como os textos. Nosso trabalho, como desenvolvedores de
front-end, é codificar o HTML e CSS necessarios para esse resultado, MIRAOR
cen cata. Euan, De sem A ie ut true ote
hacer ea
Compre ja em nossa loja! 2.9 EXERCICIOS: PRIMEIROS PASSOS COM HTML
1. Ao longo do curso, usaremos diversas imagens que o nosso designer preparou, Nesse ponto, vamos
importar todas as imagens dentro do projeto que criamos antes para que possamos usé-las nas
paginas,
+ Copie a pasta mirror-fashion de dentro da pasta Caelum/43 para a rea de trabalho de sua
maquina.
+ Verifique a pasta img, agora cheia de arquivos do design do site. Além desta pasta, teremos as
pastas js e css, que ainda nao usaremos.
Em casa
Vocé pode baixar um ZIP com todos os arquivos necessirios para 0 curso aqui:
https://s3.amazonaws.com/caelum.com br/caelum-arquivos-curso-web.zip
2. Dentro da pasta mirror-fashion, vamos criar 0 arquivo sobre.html com a estrutura basica contendo
© DOCTYPE eastags html, head e body
<100¢
meta charset="utt-8">
3. A pagina deve ter uma imagem com o logo da empresa, um titulo ¢ um texto falando sobre ela,
O texto para ser colocado na pagina esté no arquivo sobre.txt disponivel na pasta Caelum/43/textos.
Sao varios pardgrafos que devem ser adaptados com o HTML apropriado.
Apés copiar o texto do arquivo sobre.txt coloque cada um dos pardgrafos dentro de uma tag
Coloque também o titulo Histéria dentro de uma tag
Useatag ![]()
para ologo ea tag parao titulo. Seu HTML deve ficar assim, no final:
<
<>
‘A Mirror Fashion 6 a maior empresa de conércio eletronico no segaento
de moda en todo o mundo, Fundada en 1932, possui Tliais
fem 124 paises...
4. Um texto corrido sem énfases é dificil de ler. Use negritos ¢ itélicos para destacar partes importantes.
Use a tag para a énfase mais forte em negrito, por exemplo para destacar o nome da
empresa no texto do primeiro pardgrafo:
A € a maior enpresa conéreio eletrénico......-
Use também a énfase com que deixar o texto em itélico, Na parte da Histéria, coloque os
nomes das pessoas ¢ da familia em
5. A pagina deve ter duas imagens. A primeira apresenta o centro da Mirror Fashion e deve ser inserida
apés o segundo pardgrafo do texto. A outra, é uma imagem da Familia Pelho deve ser colocada
apés o subtitulo da Histéria.
‘As imagens podem ser carregadas com a tag ![]()
, apontando seu caminho. Além disso, no
HITMLS, podemos usar as tags e para destacar a imagem e colocar uma
legenda em cada uma
A imagem do centro de distribuigao esté em img/centro-distribuicao.png:
centro de distribuiggo da Mirror Fashion
‘A imagem da familia é a img/familia-pelho.jpg ¢ deve ser colocada na parte de Histéria:
![]()
Fanilia Pelho
Foto da familia Pelho">
6. Confira se o seu cédigo final esta como a seguir:
<1D0cTYPE heml>
eneta charset="Utr
Sobre a Mirror Fashion
a Marror Fashione/ha>
loge da Mirror Fashion">
‘A € a maior empresa conércio eletrénico no segnento de
moda em todo o mundo. Fundada en 1932, possui filiais em 124 paises, sendo lider de
mercado com mais de 90% de participagdo em 128 deles
>
Nossa centro de distribuicdo fica en Jacarezinho, no Parand. De 1a, saem 48 avides que
distribues nossos produtes as casas do mundo todo. Nosso centro de distribuigio
-ing/eentro-distribuleao. png”
Foto do centro de distribuicao da Mirror Fashion">
onecentro de distribuisao da Mirror Fashion
Compre suas roupas ¢ acessérios na Mirror Fashion. Acesse nossa loja ou entre en contato
se tiver divigas, Conheca também nossa historia e nossos diferenciais
chasiisterdac/h2>
Fanilia Pelho
‘A fundagao em 1932 ocorreu no momento da descoberta econdmica do interior do Parana. A
familia Pelho, tradicional da regiao, investiu todas as suas economias nessa nova
Aniciativa, revoluciondria para a época. 0 fundador Eduardo Sindes Pelho ,
Gotado de particular visio administrativa, guiou os negécios da ompresa durante mais
de 50 anos, muitos deles ao lado de seu filha E, S, Pelho Filho , atual CEO,
© none da enpresa ¢ inspirado no none da familia.
<>
0 crescinento da empresa fol praticasente instantineo, Nos prineiros S anos, ja atendia
18 paises. Bateu a marca de 169 paises em apenas 15 anos de existéncia. até hoje, jé
atendeu 740 milhdes de usuarios diferentes, em bilhées de diferentes pedidos
<>
© crescimento en ndnero de funciondrios é também assonbroso. Hoje, é a maior enpregadora
do Brasil, mas mesmo apos apenas 5 anos de sua existéncia, j4 possuia 39 mil funcionarios.
Fora do Brasil, hé 240 mil funcionarios, além dos 890 mil brasileiros nas instalacdes de
Jacarezinho e nos escritérios em todo pais.
Dada a inportancia econdmica da empresa para o Grasil, a familia Pelho j4 recebeu diversos
pramias, honenagens @ condecoragdes. Todos os presidentes do Srasil ja visitaram as
instalagSes da Mirror Fashion, além de presidentes da Unido Européia, Asia eo
secretario-geral da ONU.
7. Verifique o resultado no navegador. Devemos ja ver 0 contetido e as imagens na sequéncia, mas sem
‘um design muito interessante, Boa PRATICA - INDENTAGKO
‘Uma pratica sempre recomendada, ligada 8 limpeza e utilizada para facilitar a leitura do cédigo,
€ 0 uso correto de recuos, ou indentagao, no HTML. Costumamos alinhar elementos "irmaos" na
‘mesma margem e adicionar alguns espacos ou um fab para elementos “filhos’.
A maioria dos exercicios dessa apostila utiliza um padrio recomendado de recuos.
Boa prarica - CoMENTARIOS
Quando iniciamos nosso projeto, utilizamos poucas tags HTML. Mais tarde adicionaremos uma
quantidade razodvel de elementos, o que pode gerar uma certa confusio. Para manter o cédigo mais
legivel, & recomendada a adigéo de comentarios antes da abertura ¢ apés o fechamento de tags
estruturais (que conterio outras tags). Dessa maneira, nés podemos identificar claramente quando
um elemento est dentro dessa estrutura ou depois dela.
Esse parégrafo esta "depois" da area principal.
2.10 ESTILIZANDO COM CSS
Quando escrevemos o HTML, marcamos o contetido da pagina com tags que melhor representam 0
significado daquele contetido. Ai quando abrimos a pagina no navegador é possivel perceber que ele
mostra as informagdes com estilos diferentes.
‘Um hl, por exemplo, fica em negrito numa fonte maior. Paragrafos de texto séo espacados entre si, ¢
assim por diante. Isso quer dizer que o navegador tem um estilo padrdo para as tags que usamos. Mas,
claro, pra fazer sites bonitdes vamos querer customiizar o design dos elementos da pigina.
Antigamente, isso era feito no préprio HTML. Se quisesse um titulo em vermelho, era sé fazer:
Mirror Fashion anos 99
Além da tag
© conteudo desta tag sera exibido en azul com fundo anarelo no navegador
Mas tinhamos acabado de discutir que uma das grandes vantagens do CSS era manter as regras de
estilo fora do HTML. Usando esse atributo style nao parece que fizemos isso. Justamente por isso nio
se recomenda esse tipo de uso na pritica, mas sim os que veremos a seguir
A tag style
A outra maneira de se utilizar 0 CSS é declarando suas propriedades dentro de uma tag
<>
© conteddo desta tag ser exibido em azul com fundo anarelo!
Tambénc/strong> sera exibido em a7vl con fundo amarelo!
© cédigo dentro da tag
para o nome, titulo principal da pagina, e a tag como
subtitulo ou como titulo de segdes dentro do documento,
A ordem de importancia, além de influenciar no tamanho padrio de exibigio do texto, tem impacto nas ferramentas que processam HTML. As ferramentas de indexagao de conteiido para buscas, como o
Google, Bing ou Yahoo! levam em consideragao essa ordem ¢ relevancia. Os navegadores especiais para
acessibilidade também interpretam 0 contetido dessas tags de maneira a diferenciar seu contedido ¢
facilitar a navegasao do usuério pelo documento.
Paragrafos
Quando exibimos qualquer texto em nossa pégina, é recomendado que ele seja sempre conteiido de
alguma tag filha da tag . A marcagio mais indicada para textos comuns é a tag de paragrafo:
Se vocé tiver varios parégrafos de texto, use varias dessas tags para separé-los
Marcagoes de énfase
Quando queremos dar uma énfase diferente a um trecho de texto, podemos utilizar as marcagées de
énfase. Podemos deixar um texto "mais forte” com a tag ou deixar o texto com uma "énfase
acentuada’ com a tag . Também hd a tag , que diminui o tamanho do texto.
Por padréo, os navegadores renderizario o texto dentro da tag em negrito € o texto
dentro da tag em itilico, Existem ainda as tags e , que atingem 0 mesmo resultado
visualmente, mas as tags ¢ sio mais indicadas por definirem nossa intengao de
significado ao contetido, mais do que uma simples indicacio visual. Vamos discutir melhor a questio do
significado das tags mais adiante
Mirror Fashion .
Aprenda se divertindo na Alura Start!
Vocé conhece alguém que tem potencial para
tecnologia ¢ programagio, mas que nunca
d U fd S of escreveu uma linha de cédigo? Pode ser um filho,
sobrinho, amigo ou parente distante. Na Alura
Start cla vai poder criar games, apps, sites ¢ muito mais! B 0 comego da jornada com
Programagao e a porta de entrada para uma possivel carreira de sucesso. Ela vai estudar em seu
Proprio ritmo e com a melhor didatica. A qualidade da conceituada Alura, agora para Starters.
nheca os cursos online da Alura Start!
2.5 IMAGENS
‘Alag define uma imagem em uma pigina HTML e necessita de dois atributos preenchidos
sre e alt . O primeiro é um atributo obrigatério ¢ aponta para o local da imagem e o segundo, um
texto alternativo para a imagem caso essa nao possa ser carregada ou visualizada. O atributo alt nao é
obrigatério, mas é importante ser preenchido para que leitores de tela e robs de busca como 0 Google
consigam ler 0 contetido da imagem.
OHTML 5 introduziu duas novas tags especificas para imagem: e . A tag
define uma imagem com a conhecida tag . Além disso, permite adicionar uma
legenda para a imagem por meio da tag
‘cing sre="ing/produtet.png" alt="Foto do Fuze Cardigan">
Fuzz Cardigan por RS 129,98
2.6 A ESTRUTURA DOS ARQUIVOS DE UM PROJETO.
Como todo tipo de projeto de software, existem algumas recomendagdes quanto A organizagio dos
arquivos de um site, Nao hé nenhum rigor técnico quanto a essa organizacio e, na maioria das vezes,
vocé vai adaptar as recomendagées da maneira que for melhor para o seu projeto.
Como um site é um conjunto de paginas Web sobre um assunto, empresa, produto ou qualquer
outra coisa, é comum todos os arquivos de um site estarem dentro de uma s6 pasta ¢, assim como um
livro, é recomendado que exista uma "capa", uma pagina inicial que possa indicar para o visitante quais
sio as outras paginas que fazem parte desse projeto e como ele pode acessé-las, como se fosse o indice do site
Esse indice, ndo por coincidéncia, ¢ convencao adotada pelos servidores de péginas Web. Se
desejamos que uma determinada pasta seja servida como um site ¢ dentro dessa pasta existe um arquivo
chamado index.html, esse arquivo seré a pagina inicial a menos que alguma configuracao determine
outra pagina para esse fim,
Dentro da pasta do site, no mesmo nivel que o index.html , é recomendado que sejam criadas mais
algumas pastas para manter separados os arquivos de imagens, as folhas de estilo CSS e os scripts. Para
iniciar um projeto, teriamos uma estrutura de pastas como a demonstrada na imagem a seguir:
Vproot
Peas
> img
eis
2 Indexheml
8 sobrenemt
‘Muitas vezes, um site & servido por meio de uma aplicagao Web e, nesses casos, a estrutura dos
arquivos depende de como a aplicacdo necesita dos recursos para funcionar corretamente. Porém, no
geral, as aplicagdes também seguem um padrdo bem parecido com o que estamos adotando para 0 nosso
projeto,
2.7 EDITORES E IDES
Existem editores de texto como Gedit (www.gnome.org), Sublime (http://www.sublimetext.com/),
Atom (http://atom.io/) ¢ Notepad++ (http://notepad-plus-plus.org), que possuem realce de sintaxe ¢
outras ferramentas para facilitar 0 desenvolvimento de paginas. H4 também IDEs (Integrated
Development Environment), que oferecem recursos como autocompletar ¢ pré-visualizagao, como
Eclipse e Visual Studio. ‘Seus livros de tecnologia parecem do século pasado?
Conhesa a Casa do Cédigo, uma nova editora, com autores de destaque no
mercado, foco em ebooks (PDF, epub, mobi), precos imbativeis ¢ assuntos
atuais.
Com a curadoria da Caelum e excelentes autores, é uma abordagem diferente
para livros de tecnologia no Brasil
© a t
2.8 PRIMEIRA PAGINA
A primeira pagina que desenvolveremos para a Mirror Fashion serd a Sobre, que explica detalhes
sobre a empresa, apresenta fotos e a histéria.
Recebemos o design ja pronto, assim como os textos. Nosso trabalho, como desenvolvedores de
front-end, é codificar o HTML e CSS necessarios para esse resultado, MIRAOR
cen cata. Euan, De sem A ie ut true ote
hacer ea
Compre ja em nossa loja! 2.9 EXERCICIOS: PRIMEIROS PASSOS COM HTML
1. Ao longo do curso, usaremos diversas imagens que o nosso designer preparou, Nesse ponto, vamos
importar todas as imagens dentro do projeto que criamos antes para que possamos usé-las nas
paginas,
+ Copie a pasta mirror-fashion de dentro da pasta Caelum/43 para a rea de trabalho de sua
maquina.
+ Verifique a pasta img, agora cheia de arquivos do design do site. Além desta pasta, teremos as
pastas js e css, que ainda nao usaremos.
Em casa
Vocé pode baixar um ZIP com todos os arquivos necessirios para 0 curso aqui:
https://s3.amazonaws.com/caelum.com br/caelum-arquivos-curso-web.zip
2. Dentro da pasta mirror-fashion, vamos criar 0 arquivo sobre.html com a estrutura basica contendo
© DOCTYPE eastags html, head e body
<100¢
meta charset="utt-8">
3. A pagina deve ter uma imagem com o logo da empresa, um titulo ¢ um texto falando sobre ela,
O texto para ser colocado na pagina esté no arquivo sobre.txt disponivel na pasta Caelum/43/textos.
Sao varios pardgrafos que devem ser adaptados com o HTML apropriado.
Apés copiar o texto do arquivo sobre.txt coloque cada um dos pardgrafos dentro de uma tag
Coloque também o titulo Histéria dentro de uma tag
Useatag ![]()
para ologo ea tag parao titulo. Seu HTML deve ficar assim, no final:
<
<>
‘A Mirror Fashion 6 a maior empresa de conércio eletronico no segaento
de moda en todo o mundo, Fundada en 1932, possui Tliais
fem 124 paises...
4. Um texto corrido sem énfases é dificil de ler. Use negritos ¢ itélicos para destacar partes importantes.
Use a tag para a énfase mais forte em negrito, por exemplo para destacar o nome da
empresa no texto do primeiro pardgrafo:
A € a maior enpresa conéreio eletrénico......-
Use também a énfase com que deixar o texto em itélico, Na parte da Histéria, coloque os
nomes das pessoas ¢ da familia em
5. A pagina deve ter duas imagens. A primeira apresenta o centro da Mirror Fashion e deve ser inserida
apés o segundo pardgrafo do texto. A outra, é uma imagem da Familia Pelho deve ser colocada
apés o subtitulo da Histéria.
‘As imagens podem ser carregadas com a tag ![]()
, apontando seu caminho. Além disso, no
HITMLS, podemos usar as tags e para destacar a imagem e colocar uma
legenda em cada uma
A imagem do centro de distribuigao esté em img/centro-distribuicao.png:
centro de distribuiggo da Mirror Fashion
‘A imagem da familia é a img/familia-pelho.jpg ¢ deve ser colocada na parte de Histéria:
![]()
Fanilia Pelho
Foto da familia Pelho">
6. Confira se o seu cédigo final esta como a seguir:
<1D0cTYPE heml>
eneta charset="Utr
Sobre a Mirror Fashion
a Marror Fashione/ha>
loge da Mirror Fashion">
‘A € a maior empresa conércio eletrénico no segnento de
moda em todo o mundo. Fundada en 1932, possui filiais em 124 paises, sendo lider de
mercado com mais de 90% de participagdo em 128 deles
>
Nossa centro de distribuicdo fica en Jacarezinho, no Parand. De 1a, saem 48 avides que
distribues nossos produtes as casas do mundo todo. Nosso centro de distribuigio
-ing/eentro-distribuleao. png”
Foto do centro de distribuicao da Mirror Fashion">
onecentro de distribuisao da Mirror Fashion
Compre suas roupas ¢ acessérios na Mirror Fashion. Acesse nossa loja ou entre en contato
se tiver divigas, Conheca também nossa historia e nossos diferenciais
chasiisterdac/h2>
Fanilia Pelho
‘A fundagao em 1932 ocorreu no momento da descoberta econdmica do interior do Parana. A
familia Pelho, tradicional da regiao, investiu todas as suas economias nessa nova
Aniciativa, revoluciondria para a época. 0 fundador Eduardo Sindes Pelho ,
Gotado de particular visio administrativa, guiou os negécios da ompresa durante mais
de 50 anos, muitos deles ao lado de seu filha E, S, Pelho Filho , atual CEO,
© none da enpresa ¢ inspirado no none da familia.
<>
0 crescinento da empresa fol praticasente instantineo, Nos prineiros S anos, ja atendia
18 paises. Bateu a marca de 169 paises em apenas 15 anos de existéncia. até hoje, jé
atendeu 740 milhdes de usuarios diferentes, em bilhées de diferentes pedidos
<>
© crescimento en ndnero de funciondrios é também assonbroso. Hoje, é a maior enpregadora
do Brasil, mas mesmo apos apenas 5 anos de sua existéncia, j4 possuia 39 mil funcionarios.
Fora do Brasil, hé 240 mil funcionarios, além dos 890 mil brasileiros nas instalacdes de
Jacarezinho e nos escritérios em todo pais.
Dada a inportancia econdmica da empresa para o Grasil, a familia Pelho j4 recebeu diversos
pramias, honenagens @ condecoragdes. Todos os presidentes do Srasil ja visitaram as
instalagSes da Mirror Fashion, além de presidentes da Unido Européia, Asia eo
secretario-geral da ONU.
7. Verifique o resultado no navegador. Devemos ja ver 0 contetido e as imagens na sequéncia, mas sem
‘um design muito interessante, Boa PRATICA - INDENTAGKO
‘Uma pratica sempre recomendada, ligada 8 limpeza e utilizada para facilitar a leitura do cédigo,
€ 0 uso correto de recuos, ou indentagao, no HTML. Costumamos alinhar elementos "irmaos" na
‘mesma margem e adicionar alguns espacos ou um fab para elementos “filhos’.
A maioria dos exercicios dessa apostila utiliza um padrio recomendado de recuos.
Boa prarica - CoMENTARIOS
Quando iniciamos nosso projeto, utilizamos poucas tags HTML. Mais tarde adicionaremos uma
quantidade razodvel de elementos, o que pode gerar uma certa confusio. Para manter o cédigo mais
legivel, & recomendada a adigéo de comentarios antes da abertura ¢ apés o fechamento de tags
estruturais (que conterio outras tags). Dessa maneira, nés podemos identificar claramente quando
um elemento est dentro dessa estrutura ou depois dela.
Esse parégrafo esta "depois" da area principal.
2.10 ESTILIZANDO COM CSS
Quando escrevemos o HTML, marcamos o contetido da pagina com tags que melhor representam 0
significado daquele contetido. Ai quando abrimos a pagina no navegador é possivel perceber que ele
mostra as informagdes com estilos diferentes.
‘Um hl, por exemplo, fica em negrito numa fonte maior. Paragrafos de texto séo espacados entre si, ¢
assim por diante. Isso quer dizer que o navegador tem um estilo padrdo para as tags que usamos. Mas,
claro, pra fazer sites bonitdes vamos querer customiizar o design dos elementos da pigina.
Antigamente, isso era feito no préprio HTML. Se quisesse um titulo em vermelho, era sé fazer:
Mirror Fashion anos 99
Além da tag
© conteudo desta tag sera exibido en azul com fundo anarelo no navegador
Mas tinhamos acabado de discutir que uma das grandes vantagens do CSS era manter as regras de
estilo fora do HTML. Usando esse atributo style nao parece que fizemos isso. Justamente por isso nio
se recomenda esse tipo de uso na pritica, mas sim os que veremos a seguir
A tag style
A outra maneira de se utilizar 0 CSS é declarando suas propriedades dentro de uma tag
<>
© conteddo desta tag ser exibido em azul com fundo anarelo!
Tambénc/strong> sera exibido em a7vl con fundo amarelo!
© cédigo dentro da tag
para separé-los
Coloque também o titulo Histéria dentro de uma tag
Useatag ![]()
para ologo ea tag parao titulo. Seu HTML deve ficar assim, no final:
<
<>
‘A Mirror Fashion 6 a maior empresa de conércio eletronico no segaento
de moda en todo o mundo, Fundada en 1932, possui Tliais
fem 124 paises...
4. Um texto corrido sem énfases é dificil de ler. Use negritos ¢ itélicos para destacar partes importantes.
Use a tag para a énfase mais forte em negrito, por exemplo para destacar o nome da
empresa no texto do primeiro pardgrafo:
A € a maior enpresa conéreio eletrénico......-
Use também a énfase com que deixar o texto em itélico, Na parte da Histéria, coloque os
nomes das pessoas ¢ da familia em
5. A pagina deve ter duas imagens. A primeira apresenta o centro da Mirror Fashion e deve ser inserida
apés o segundo pardgrafo do texto. A outra, é uma imagem da Familia Pelho deve ser colocada
apés o subtitulo da Histéria.
‘As imagens podem ser carregadas com a tag ![]()
, apontando seu caminho. Além disso, no
HITMLS, podemos usar as tags e para destacar a imagem e colocar uma
legenda em cada uma
A imagem do centro de distribuigao esté em img/centro-distribuicao.png:
centro de distribuiggo da Mirror Fashion
‘A imagem da familia é a img/familia-pelho.jpg ¢ deve ser colocada na parte de Histéria:
![]()
Fanilia Pelho
Foto da familia Pelho">
6. Confira se o seu cédigo final esta como a seguir:
<1D0cTYPE heml>
eneta charset="Utr
Sobre a Mirror Fashion
a Marror Fashione/ha>
loge da Mirror Fashion">
‘A € a maior empresa conércio eletrénico no segnento de
moda em todo o mundo. Fundada en 1932, possui filiais em 124 paises, sendo lider de
mercado com mais de 90% de participagdo em 128 deles
>
Nossa centro de distribuicdo fica en Jacarezinho, no Parand. De 1a, saem 48 avides que
distribues nossos produtes as casas do mundo todo. Nosso centro de distribuigio
-ing/eentro-distribuleao. png”
Foto do centro de distribuicao da Mirror Fashion">
onecentro de distribuisao da Mirror Fashion
A
‘A
chasiisterdac/h2>
‘A fundagao em 1932 ocorreu no momento da descoberta econdmica do interior do Parana. A
familia Pelho, tradicional da regiao, investiu todas as suas economias nessa nova
Aniciativa, revoluciondria para a época. 0 fundador
Dada a inportancia econdmica da empresa para o Grasil, a familia Pelho j4 recebeu diversos pramias, honenagens @ condecoragdes. Todos os presidentes do Srasil ja visitaram as instalagSes da Mirror Fashion, além de presidentes da Unido Européia, Asia eo secretario-geral da ONU.
7. Verifique o resultado no navegador. Devemos ja ver 0 contetido e as imagens na sequéncia, mas sem ‘um design muito interessante, Boa PRATICA - INDENTAGKO ‘Uma pratica sempre recomendada, ligada 8 limpeza e utilizada para facilitar a leitura do cédigo, € 0 uso correto de recuos, ou indentagao, no HTML. Costumamos alinhar elementos "irmaos" na ‘mesma margem e adicionar alguns espacos ou um fab para elementos “filhos’. A maioria dos exercicios dessa apostila utiliza um padrio recomendado de recuos. Boa prarica - CoMENTARIOS Quando iniciamos nosso projeto, utilizamos poucas tags HTML. Mais tarde adicionaremos uma quantidade razodvel de elementos, o que pode gerar uma certa confusio. Para manter o cédigo mais legivel, & recomendada a adigéo de comentarios antes da abertura ¢ apés o fechamento de tags estruturais (que conterio outras tags). Dessa maneira, nés podemos identificar claramente quando um elemento est dentro dessa estrutura ou depois dela.Esse parégrafo esta "depois" da area principal.
2.10 ESTILIZANDO COM CSS Quando escrevemos o HTML, marcamos o contetido da pagina com tags que melhor representam 0 significado daquele contetido. Ai quando abrimos a pagina no navegador é possivel perceber que ele mostra as informagdes com estilos diferentes. ‘Um hl, por exemplo, fica em negrito numa fonte maior. Paragrafos de texto séo espacados entre si, ¢ assim por diante. Isso quer dizer que o navegador tem um estilo padrdo para as tags que usamos. Mas, claro, pra fazer sites bonitdes vamos querer customiizar o design dos elementos da pigina. Antigamente, isso era feito no préprio HTML. Se quisesse um titulo em vermelho, era sé fazer:Mirror Fashion anos 99Além da tag © conteudo desta tag sera exibido en azul com fundo anarelo no navegador Mas tinhamos acabado de discutir que uma das grandes vantagens do CSS era manter as regras de estilo fora do HTML. Usando esse atributo style nao parece que fizemos isso. Justamente por isso nio se recomenda esse tipo de uso na pritica, mas sim os que veremos a seguir A tag style A outra maneira de se utilizar 0 CSS é declarando suas propriedades dentro de uma tag <> © conteddo desta tag ser exibido em azul com fundo anarelo!
Tambénc/strong> sera exibido em a7vl con fundo amarelo!
© cédigo dentro da tag