CURSO

DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

Reviso da Aula 1
Revise e conclua a atividade da aula 1, tire suas duvidas.

Minha 1 pgina Web

Nome e n
Escola Microplus Educao Profissional
Hoje os alunos da Escola Microplus do curso de Desenvolvimento Web iniciaram a
edio de pginas web, utilizando a programao HTML.
Desta forma, em breve eles sero:

Web Designers
Marcaes de nfase
Quando queremos dar uma nfase diferente a um trecho de texto,
podemos utilizar as marcaes de nfase. Podemos deixar um texto
"mais forte" com a tag <strong> ou deixar o texto com uma "nfase
acentuada" com a tag <em>. Tambm h a tag <small>, que diminui
o tamanho do texto.
Por padro, os navegadores renderizaro o texto dentro da tag
<strong> em negrito e o texto dentro da tag <em> em itlico.
Existem ainda as tags <b> e <i>, que atingem o mesmo resultado
visualmente, mas as tags <strong> e <em> so mais indicadas por
definirem nossa inteno de significado ao contedo, mais do que
uma simples indicao visual. Vamos discutir melhor a questo do
significado das tags mais adiante.
<p>Compre suas roupas e acessrios na <strong>Mirror
Fashion</strong>.</p>
5. Imagens
A tag <img> define uma imagem em uma pgina HTML e necessita
de dois atributos preenchidos: src e alt. O primeiro aponta para o local
da imagem e o segundo, um texto alternativo para a imagem caso
essa no possa ser carregada ou visualizada.
O HTML 5 introduziu duas novas tags especficas para imagem: <figure> e
<figcaption>. A tag <figure> define uma imagem com a conhecida tag
<img>. Alm disso, permite adicionar uma legenda para a imagem por
meio da tag <figcaption>.

<figure>

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

<img src="img/produto1.png" alt="Foto do produto">

<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>

Atividade:
1. Revise e conclua a atividade da aula 1, tire suas duvidas.

2. Utilize as tags <strong> e <em> para dar nfase em partes do

texto do pargrafo.
3. Insira a imagem terra.jpg no final da pgina. Voc encontra a imagem
em //mpserver/cursos/html5/imagens.
4. Atualize seu site na internet.

6. A estrutura dos arquivos de um projeto

Como todo tipo de projeto de software, existem algumas
recomendaes quanto organizao dos arquivos de um site. No
h nenhum rigor tcnico quanto a essa organizao e, na maioria das
vezes, voc vai adaptar as recomendaes da maneira que for melhor
para o seu projeto.
Como um site um conjunto de pginas Web sobre um assunto,
empresa, produto ou qualquer outra coisa, comum todos os
arquivos de um site estarem dentro de uma s pasta e, assim como
um livro, recomendado que exista uma "capa", uma pgina inicial
que possa indicar para o visitante quais so as outras pginas que

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

fazem parte desse projeto e como ele pode acess-las, como se fosse
o ndice do site.
Esse ndice, no por coincidncia, conveno adotada pelos
servidores de pginas Web. Se desejamos que uma determinada
pasta seja servida como um site e dentro dessa pasta existe um
arquivo chamado index.html, esse arquivo ser a pgina inicial a
menos que alguma configurao determine outra pgina para esse
fim.
Dentro da pasta do site, no mesmo nvel 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, teramos uma estrutura de pastas
como a demonstrada na imagem a seguir:

Figura 1 - Estrutura de Projeto

Muitas vezes, um site servido por meio de uma aplicao Web e,

nesses casos, a estrutura dos arquivos depende de como a aplicao
necessita dos recursos para funcionar corretamente. Porm, no geral,
as aplicaes tambm seguem um padro bem parecido com o que
estamos adotando para o nosso projeto.
7. Editores e IDEs
Existem editores de texto como Gedit (www.gnome.org), Sublime
(http://www.sublimetext.com/) e Notepad++ (http://notepad-plusplus.org), que possuem realce de sintaxe e outras ferramentas para
facilitar o desenvolvimento de pginas.
8. Primeira pgina
A primeira pgina que desenvolveremos para a Mirror Fashion ser a
Sobre, que explica detalhes sobre a empresa, apresenta fotos e a
histria.
Recebemos o design j pronto, assim como os textos. Nosso trabalho,
como desenvolvedores de front-end, codificar o HTML e CSS
necessrios para esse resultado.

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

Veja abaixo como ficar a pgina sobre.html do nosso projeto para as

lojas MIRROR FASHION depois de concludo.

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

AUL
A

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

9. Exerccio: 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 pginas.

Voc
encontra
todos
os
arquivos
//mpserver/cursos/html5/mirror-fashion.
Copie
arquivos para sua pasta documentos.

Verifique a pasta img, agora cheia de arquivos do design do

site. Alm desta pasta, teremos as pastas js e css, que ainda
no usaremos.

Em casa voc pode baixar um ZIP com todos os arquivos

necessrios
para
o
curso
aqui:
http://microplus.com.br/web.zip

em
os

5. Dentro da pasta mirror-fashion, vamos criar o arquivo sobre.html

com a estrutura bsica contendo o DOCTYPE e as tags html, head e
body:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sobre a Mirror Fashion</title>
</head>
<body>
</body>
</html>
6. A pgina deve ter uma imagem com o logo da empresa, um ttulo e
um texto falando sobre ela.

O texto para ser colocado na pgina est no arquivo sobre.txt

disponvel na pasta //mpserver/cursos/html5/textos. So vrios
pargrafos que devem ser adaptados com o HTML apropriado.
Aps copiar o texto do arquivo sobre.txt coloque cada um dos
pargrafos dentro de uma tag <p>. Coloque tambm o ttulo Histria
dentro de uma tag <h2>.
Use a tag <img> para o logo e a tag <h1> para o ttulo. Seu HTML
deve ficar assim, no final:

<img src="img/logo.png">

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

<h1>A Mirror Fashion</h1>

<p>
A Mirror Fashion a maior empresa de comrcio eletrnico
no segmento
de moda em todo o mundo. Fundada em 1932, possui
filiais
em 124 pases........
</p>
7. Um texto corrido sem nfases difcil de ler. Use negritos e itlicos
para destacar partes importantes.

Use a tag <strong> para a nfase mais forte em negrito, por exemplo
para destacar o nome da empresa no texto do primeiro pargrafo:
<p>A <strong>Mirror Fashion</strong> a maior empresa
comrcio eletrnico.......</p>
Use tambm a nfase com <em> que deixar o texto em itlico. Na
parte da Histria, coloque os nomes das pessoas e da famlia em
<em>.
8. A pgina deve ter duas imagens. A primeira apresenta o centro da
Mirror Fashion e deve ser inserida aps o segundo pargrafo do
texto. A outra, uma imagem da Famlia Pelho e deve ser colocada
aps o subttulo da Histria.

As imagens podem ser carregadas com a tag <img>, apontando seu

caminho. Alm disso, no HTML5, podemos usar as tags <figure> e
<figcaption> para destacar a imagem e colocar uma legenda em
cada uma.
A imagem do centro de distribuio est em img/centrodistribuicao.png:

<figure>
<img src="img/centro-distribuicao.png">
<figcaption>Centro
Fashion</figcaption>

de

distribuio

da

Mirror

</figure>
A imagem da famlia a img/familia-pelho.jpg e deve ser colocada
na parte de Histria:
<figure>
<img src="img/familia-pelho.jpg">
<figcaption>Famlia Pelho</figcaption>

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

</figure>
9. Verifique o resultado no navegador. Devemos j ver o contedo e as
imagens na sequncia, mas sem um design muito interessante.

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT