Академический Документы
Профессиональный Документы
Культура Документы
DESENVOLVIMENTO WEB
MDULO HTML
AUL
A
Reviso da Aula 1
Revise e conclua a atividade da aula 1, tire suas duvidas.
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
Atividade:
1. Revise e conclua a atividade da aula 1, tire suas duvidas.
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:
CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT
CURSO
DESENVOLVIMENTO WEB
MDULO HTML
AUL
A
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
Voc
encontra
todos
os
arquivos
//mpserver/cursos/html5/mirror-fashion.
Copie
arquivos para sua pasta documentos.
em
os
<!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.
<img src="img/logo.png">
CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT
CURSO
DESENVOLVIMENTO WEB
MDULO HTML
AUL
A
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.
<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