Ex 1

Tcnico de Multimdia
Desenho de Pginas e Documentos com HTML e CSS
GUIA DE LABORATRIO 1 PGINA BASE EM HTML
OBJECTIVOS
Conhecer ou rever os elementos bsicos de HTML
Construir uma pgina bsica em HTML ao qual aplicaremos estilos CSS nos laboratrios seguintes
Familiarizao com as ferramentas utilizadas
INSTRUES
1.
Numa localizao apropriada crie uma pasta com o ttulo LabsCSS . Nesta pasta ir guardar o
material desenvolvido neste e nos prximos laboratrios.
PARTE I Elementos bsicos de HTML

2.
Crie uma pasta Lab1 dentro da pasta LabsCSS. Nesta pasta ir guardar o material desenvolvido
neste laboratrio. (Sugesto: pode guardar aqui o enunciado deste mesmo laboratrio)
3.
Inicie o Notepad++ (NP).
O Notepad++ um editor de texto grtis especialmente vocacionado para

a produo de cdigo em diversos tipos linguagens. desenvolvido em
regime de Open Source nos termos da licena GPL e suporta apenas a
plataforma Windows (Win32 API). Reconhece muitas linguagens, sendo
desenvolvido em C++.
4.
Crie um novo ficheiro na pasta Lab1 e d-lhe o nome Parte1.html .
5.
Acrescente as seguintes instrues:

<html><head></head><body>A minha pgina Web</body></html>
Encontramos aqui trs tipos de comandos ou, na terminologia do HTML, etiquetas. Na maioria das vezes, as
etiquetas HTML andam aos pares. Todo o documento est compreendido entre <html> e </html>. A
primeira a etiqueta da abertura, ou inicial, e a segunda a da fecho, ou final.
Entre as etiquetas <head> e </head> colocamos informao de controlo da pgina como, por exemplo, o
ttulo e a localizao de ficheiros auxiliares -, informao essa que no exibida na pgina.
Todo o contedo a exibir aparece entre as etiquetas <body> e </body> (ou, dito de forma mais simples,
dentro do body). Nesta caso, o contedo apenas a mensagem A minha pgina Web.
(c) 2012 - 2015 Joo Galamba
1/4
GUIA DE LABORATRIO 1
PGINA BASE EM HTML
DESENHO DE PGINAS E DOCUMENTOS COM HTML E CSS

UFCD(s) 151, 154
6.
Abra e visualize o ficheiro no navegador de Internet.
7.
Acrescente um ttulo ao documento inserindo a seguinte etiqueta title dentro do head:

<title>Pgina bsica</title>
8.
Visualize novamente o ficheiro (refrescando o navegador). Nota alguma diferena?
9.
Alinhe as etiquetas do ficheiro de modo a torn-lo mais legvel:

<html>
<head>
<title>Pgina bsica</title>
</head>
<body>
A minha pgina Web!
</body>
</html>
Note que o navegador exibe o texto da esquerda para a

direita e s quando no cabe no ecr que passa para a
linha de baixo. O navegador ignora linhas em branco e
quaisquer espaos em branco extra (alm do espao
necessrio para separar palavras) so tambm ignorados.
10. Utilizando a etiqueta p acrescente os seguintes pargrafos:
<p>Um pargrafo consiste de um bloco de linhas com espao extra para o

distanciar do prximo pargrafo.</p> <p>Aqui est mais um pargrafo. No editor,
estes 2 pargrafos esto colados, mas o navegador exibe-os com (pelo menos) uma
linha em branco de intervalo.</p>
11. Envolva a frase A minha pgina Web! num cabealho de nvel 1 usando, para tal, a etiqueta h1:
<h1>A minha pgina Web!</h1>

12. Agora acrescente os seguintes cabealhos:
<h2>Agora, um cabealho de nvel 2</h2>

<h3>Seguido de um outro de nvel 3</h3>
<h4>Outro, mas de nvel 4</h4>
<h5>No h 4 sem 5, j diz o povo</h5>
<h6>Mas 6a de vez</h6>
13. Comee por inserir um novo pargrafo:
<p>Vamos utilizar este pargrafo para conhecer novos elementos para dar nfase
a palavras e frases.</p>
2/4
PGINA BASE EM HTML

UFCD(s) 151, 154
14. Realce a palvra pargrafo envolvendo-a na etiqueta b (de bold, ou seja, negrito):
<b>pargrafo</b>
15. Realce a palavra novos envolvendo-a na etiqueta strong (forte ou destacado):
<strong>novos</strong>
16. D nfase s palavras palavras e frases utilizando as etiquetas i (de itlico) e em (de emphasize):
<i>palavras</i> e <em>frases</em>
Um dos objectivos das CSS, que vamos utilizar nos laboratrios seguintes, consiste em
separar a apresentao do contedo e da estrutura do documento. Entre outras vantagens,
esta separao permite adaptar aspectos relacionados com a apresentao, como os estilos
das cores, letras, etc., a diferentes situaes e personalizaes. Aplicando estes princpios
logo na elaborao do html, notamos que bold uma palavra que sugere um estilo de
impresso, ao passo que strong sugere um tipo de contedo importante. Veremos que, a
partir das CSS podemos controlar o modo como o naveagador exibe o texto marcado com
strong. Da preferimos utilizar strong em vez de bold e em em vez i.
17. Finalmente, acrescente uma quebra de linha utilizando a etiqueta br aps a palavra elementos:
elementos <br/> para dar nfase
Ao contrrio das outras etiquetas, a etiqueta br no

necessita de uma etiqueta de fecho (nem tem sentido
neste caso). Sempre que uma etiqueta no possui ou no
necessita de uma de etiqueta de fecho, deve ter o nome
sucedido de uma barra /.
PARTE II Iniciar a pgina bsica em HTML que servir como exemplo

18. Crie um novo ficheiro no NP e d-lhe o nome Parte2-Exemplo.html.
19. Crie a estrutura base da pgina:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
A etiqueta !DOCTYPE indica ao navegador que tipo de HTML
</html>
estamos a utilizar. No nosso caso, estamos a utilizar XHTML 1.1,
uma verso mais rigorosa de HTML e com regras de XML.
3/4
PGINA BASE EM HTML

UFCD(s) 151, 154
20. Acrescente o seguinte ttulo: Tcnico de Multimdia X (substitua X pelo nmero da aco).
21. Acrescente o body ao documento. Doravante, os passos seguintes referem-se a instrues que devem
ser colocadas dentro do body.

22. As seguintes instrues correspondem ao menu de navegao da pgina:


<ul class="nav">
<li><a href="index.html">Principal</a></li>
<li><a href="areas.html">reas Temticas</a></li>
<li><a href="modulos.html">Mdulos</a></li>
<li><a href="formadores.html">Formadores</a></li>
<li><a href="formandos.html">Formandos</a></li>
<li><a href="ligacoes.html">Ligaes</a></li>
</ul>
23. Vamos agora adicionar o contedo da pgina:


<h1>Pgina principal</h1>
O texto entre  , que serve

de comentrio para quem escreve o
documento, ignorado pelo navegador.
A etiqueta ul (Unordered List) permite
a introduo de listas no numeradas.
Cada uma das marcas da lista
indicada pela etiqueta li (List Item).
Por seu turno, a etiqueta a (Anchor)
serve para introduo de ligaes
(links).
O menu da nossa pgina consiste de
uma lista de ligaes para outras
pginas. Esta pgina , assim, a pgina
principal de um hipottico site. Cada
<p>Bem vindo pgina com informao sobre a

organizao do curso Tcnico de Multimdia X</p>
pgina dever possuir um menu

semelhante a este.
<p>Como ainda est por acabar, faltam imagens e as ligaes no levam a lado
nenhum.</p>
<p>Talvez devssemos colocar mais informao aqui.</p>
24. Finalmente, terminamos a pgina adicionando a etiqueta de endereo.


<address>Feito por [NOME] ([EMAIL]) a [DIA]/[MS]/[ANO]</address>
4/4

Ex 1

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Ex 1

Enviado por

Direitos autorais:

Formatos disponíveis

Tcnico de Multimdia

Desenho de Pginas e Documentos com HTML e CSS

GUIA DE LABORATRIO 1 PGINA BASE EM HTML

Conhecer ou rever os elementos bsicos de HTML

Familiarizao com as ferramentas utilizadas

PARTE I Elementos bsicos de HTML

Inicie o Notepad++ (NP).

O Notepad++ um editor de texto grtis especialmente vocacionado para

Crie um novo ficheiro na pasta Lab1 e d-lhe o nome Parte1.html .

Acrescente as seguintes instrues:

DESENHO DE PGINAS E DOCUMENTOS COM HTML E CSS

Abra e visualize o ficheiro no navegador de Internet.

Acrescente um ttulo ao documento inserindo a seguinte etiqueta title dentro do head:

Visualize novamente o ficheiro (refrescando o navegador). Nota alguma diferena?

Alinhe as etiquetas do ficheiro de modo a torn-lo mais legvel:

Note que o navegador exibe o texto da esquerda para a

10. Utilizando a etiqueta p acrescente os seguintes pargrafos:

<p>Um pargrafo consiste de um bloco de linhas com espao extra para o

<h1>A minha pgina Web!</h1>

<h2>Agora, um cabealho de nvel 2</h2>

(c) 2012 - 2015 Joo Galamba

DESENHO DE PGINAS E DOCUMENTOS COM HTML E CSS

elementos <br/> para dar nfase

Ao contrrio das outras etiquetas, a etiqueta br no

PARTE II Iniciar a pgina bsica em HTML que servir como exemplo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

(c) 2012 - 2015 Joo Galamba

DESENHO DE PGINAS E DOCUMENTOS COM HTML E CSS

ser colocadas dentro do body.

O texto entre  , que serve

<p>Bem vindo pgina com informao sobre a

pgina dever possuir um menu

(c) 2012 - 2015 Joo Galamba

Você também pode gostar