Ficha1 8

Sistema de Aprendizagem
Exerccio 1
Estrutura bsica de uma pgina Web -
1) Abrir um editor de texto ( por exemplo o Bloco de Notas)

2) Digitar o cdigo:
<html>
<head>
<title>COLOCAR O TTULO DA PGINA</title>
</head>
<body>
DAQUI EM DIANTE DESENVOLVEMOS A NOSSA PGINA
</body>
</html>
. 3) Gravar sempre com a extenso .html ou .htm
. 4) Visualizar no Internet Explorer ou no Firefox
Objectivos a aprender:
TAG
O QUE FAZ
<html>
Marca o incio e o fim do documento HTML. Com ele iniciamos e finalizamos a

construo da pgina Web.
<head>
Marca o incio e do fim do cabealho, ou seja, a rea onde sero descritos

cabealhos e o ttulo da pgina
<title>
Marca o incio e o fim do ttulo do cabealho. O ttulo da pgina aparecer na barra

superior do browser.
<body>
Marca o incio e o fim do do corpo da pgina
Exerccio 2
- Leitura do cdigo HTML
Abra o bloco de notas e escreva o seguinte cdigo:
<!Incio do Documento HTML>
<html>
<head>
<title>Melhorar a minha Home Page</title>
<meta name=autor content=luis>
</head>
<! Incio do Corpo da Pgina >
<body>
<h1>Este o ttulo Principal</h1>
<h2>Este o ttulo Secundrio</h2>
<h3> Estou a adorar criar pginas</h3>
<hr>
<p>Este o 1 Primeiro Paragrafo </br> Esta 2 Linha do 1 Paragrafo
<p>Com este recurso inicio um paragrafo</br> E Com este recurso quebro
uma linha
<hr>
<! Fim do Corpo da Pgina >
</body>
</html>
<! Fim do Documento HTML >
Grave o documento numa pasta conhecida do seu computador nos Meus Documentos como:
exer2.html
Clique duas vezes em cima do documento e visualize o resultado no Internet Explorer, Firefox
ou outro browser.
Objectivos:
TAG
O que representam?
<!Comentrios >
Insere comentrios nas pginas.
<meta name=Author
content=luis >
Marcas Metas. Servem para especificarmos certas variveis

especficas pgina como o autor(author), palavraschaves(Keyword), descrio da pgina(Description), etc..
Dentro do tag<meta>, tem os comandos name e o content. No
comando name especificamos que informao queremos dar, e no
content descrevemos a informao
<hn> (sendo n um
nmero)
Marca um ttulo. Sendo que n representa um valor que pode ser de

1 a 6, o tamanho muda de forma decrescente, ou seja, o nmero 1
o maior tamanho do ttulo.
<hr>
Insere uma linha horizontal. (tem mais atributos como o tamanho)
<p>
Marca um pargrafo e acrescenta uma linha em branco.
</br>
Insere uma quebra de linha.
Exerccio 4
FORMATAO DE ESTILOS Exercicio 4.1
<html>
<head>
<title>Formatar Estilos</title>
</head>
<body>
<center>Mudar o Estilo dos Caracteres</center>
<p>
<b>Texto em Negrito</b><br>
<i>Texto em Itlico</i><br>
<u>Texto sublinhado</u><br>
<tt>Texto Monoespaado</tt><br>
<br><font color=red>Texto em Vermelho</font>
<br><font size=5>Texto em Tamanho 5</font>
<br><font face=verdana>Texto com a letra Verdana</font>
<br><font face=arial black> Podemos fazer combinaes</font>
<br><center>
<font
color=blue
face=verdana
size=5><b>Editora
rica</b></font></center>
<br>Podemos colocar os atributos para cada tipo de letra!
<br>
<font color=blue size=6>E</font><font color=red size=4>ditora
rica</font>
<br>
<pre>
Estamos a progredir
em HTML.
Este tag permite que todos os espaos feitos no cdigo fonte
sejam respeitados.
</pre>
</body>
</html>
Objectivos:
TAG
<b>
<i>
<u>
<tt>
<font>
<pre>
<basefont>
O QUE FAZ
Coloca o texto em negrito
Coloca o texto em itlico
Coloca o texto sublinhado
Coloca o texto em fonte monoespaada. (fonte Courier,como mquina de
escrever)
Modifica a formatao do texto.
Atributos:
Size = define o tamanho da letra. Ex: <font size=5>Texto</font>
Face = define o estilo da letra. Ex: <font face=verdana>Texto</font>
Color = define a cor da letra. Ex:<font color=red>Texto</font>
Marca um trecho formatado com fonte monoespaada. A formatao com
espaos e entrada de pargrafos respeitada.
Modifica a formatao padro do texto.
Ex: <basefont size=5>
Exerccio 5
Criao De Items<html>
<head><title>Listas</title>
</head>
<body>
<h3>Isto uma lista</h3>
<! Incio dos Numeradores>
<ol>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
<! Fim dos Numeradores>
<hr width=50% size=5 align=left>
<! Incio dos Marcadores>
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
<! Fim dos Marcadores>
</body>
</html>
Objectivos:
TAG
<ol>
<ul>
O QUE FAZ
Marca o incio e o fim de uma lista ordenada. Recebem na primeira linha um nmero ou
letra. Devem ser usados com tag <LI>
Atributos
Start = especifica o nmero a partir do qual os itens comeam a ser contados. Ex: <ol
start=3>
Type = modifica o tipo do numerador que pode ser: nmero, letras ou algarismo
romano.
Ex: <ol type=A> <ol type=I>
Marca o incio e o fim de uma lista no ordenada, ou seja, os itens da lista recebem
smbolos na primeira linha. Devem ser usados com tag <LI>
Atributos
Type = modifica o tipo do marcador (smbolo), que pode ser:
Circle = um crculo vazio. Ex: <ul type=circle>
Disc = um crculo cheio. Ex: <ul type=disc>
Square = um quadrado cheio Ex: <ul type=square>
Exerccio 5.2
Criao de Items<html>
<head><title>Listas 2</title>
</head>
<body>
<h3>Isto uma listagem iniciando no nmero 4</h3>
<ol start=4>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
<h3>Isto uma listagem com letras</h3>
<ol type=A>
<li>Fbio
<li>Miguel
<li>Rafael
</ol>
<h3>Isto uma listagem em algarismo romano</h3>
<ol type=I>
<li>Ins
<li>Marcia
<li>Vera
</ol>
<h3>Esta uma listagem em algarismo romanos a partir do
nmero 3</h3>
<ol type=I start=3>
<li>Luis
<li>Z
<li>Carlos
</ol>
</body>
</html>
Exerccio 5.3
Listas e Items<html>
<head><title>Listas</title>
</head>
<body>
<h3>Listagem e SubListagem</h3>
<ol><! Incio do Numerador>
<li>Item 1
<ul><! Incio do Marcador dentro do Numerador>
<li type=disc>Item 1.1
</ul><! Fim do Marcador dentro do Numerador>
<li> Item 2
<ul><! Incio do Marcador dentro do Numerador>
<li type=square>Item 2.1
<ul><!Incio do Marcador dentro do Marcador>
<li type=circle>Item 2.1.1
</ul><!Fim do Marcador dentro do Marcador>
<li type=circle>Item 2.2
</ul><! Fim do Marcador dentro do Numerador>
<li> Item 3
</ol><! Fim do Numerador>
</body>
</html>
Exerccio 6.1
DEFININDO O CORPO DA PGINA (BODY)<html>
<head>
<title>Pgina com Fundo Colorido</title>
</head>
<body bgcolor=grey text=blue>
<h3>Defino a cor de fundo cinzento para o fundo
pgina</h3>
<h3>Defino a cor padro do texto da pgina azul</h3>
da
</body>
</html>
TAG
O QUE FAZ
<body> Marca o incio e o fim do corpo da pgina
Atributos
Bgcolor = define a cor do fundo da pgina
Text = define a cor do texto padro da pgina
Background = permite inserir uma imagem como fundo da pgina
Bgproperties = fixa a imagem no fundo da pgina quando a pgina
rolada, criando um efeito de marca dgua.
Exerccio 6.2
DEFININDO O CORPO DA PGINA (BODY)<html>
<head><title>Inserir uma imagem no fundo da Pgina</title>
</head>
<body background=parede.gif bgproperties=fixed>
<h1 align=center>Editora Viterbo</h1>
<font size=4 face=verdana>
<ul>
<li>Livros
<li>Dicas
<li>Volte Sempre
</ul>
</font>
</body>
</html>
Exerccio 7.1
Imagens <html>
<head><title>Imagens</title>
</head>
<body>
<h1>Agora estamos a trabalhar com imagens</h1>
<h3> Esta a sua primeira imagem. </h3>
<img src=fig.jpg align=left>
</body>
</html>
Objectivos:
TAG
O QUE FAZ
<img> Insere uma imagem

Atributos
src nome da imagem a ser mostrada.
align=middle centra a base do texto com o centro da imagem
align=left faz a imagem flutuar esquerda enquanto o texto circunda a
imagem direita.
align=top alinha o texto no topo
align=right faz a imagem flutuar direita enquanto o texto circunda
imagem esquerda.
alt=n indica o texto a ser exibido quando o navegador no exibe a
imagem. Sendo que n o ttulo que identifica a imagem.
Exemplo: <img src=fig.jp alt=Esta uma imagem>
Exerccio 8.1
Tabelas<html>
<head>
<title>Criar Tabelas</title>
</head>
<body>
<table border=2><! Aqui comea a Tabela>
<tr><! Aqui Comea uma linha>
<td>Clula1</td>
<td>Clula2</td>
<td>Clula3</td>
</tr><! Aqui termina uma linha>
<tr><! Aqui Comea outra linha>
<td>Frase 1</td>
<td>Frase 2</td>
<td>Frase 3</td>
</tr><! Fim da outra linha>
</table><! Fim da Tabela>
</body>
</html>
TAG
<table>
O QUE FAZ
Marca o incio e o fim de uma tabela

Atributos
Width define a largura da tabela ou da clula
Height define a altura da tabela ou da clula
Cellpadding define a margem dentro das clulas
Cellspacing define o espao entre as clulas
Bgcolor define a cor de fundo da tabela ou da clula
<tr>
Marca o incio e o fim de uma linha
<td>
Marca o incio e o fim de uma clula
border=n
Coloca uma borda na tabela, onde n o valor em pixels da borda
align=left
Alinha o contedo da clula a esquerda na horizontal
align=right
Alinha o contedo da clula a direita na horizontal
align=center
Alinha o contedo da clula ao centro na horizontal
valign=top
Alinha o contedo da clula no topo (vertical)
valign=bottom Alinha o contedo da clula na base da clula (vertical)
valign=middle Alinha o contedo da clula no centro na vertica
Exerccio 8.2
TABELAS<html>
<head>
<title>Criar Tabelas</title>
</head>
<body>
<table
border=1
width=400
cellspacing=5>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
</tr>
<tr>
<td>Item 4</td>
<td>Item 5</td>
<td>Item 6</td>
</tr>
</table>
</body>
</html>
height=50
cellpadding=5
Exercicio 8.3
Tabelas e o colspanCria uma nova pgina HTML e grava com o nome exerc83.html
Na estrutura do BODY passa o seguinte cdigo e explica o resultado da
utilizao da propriedade colspan.
<table border=1 >
<tr>
<td
align=center
colspan=4
bgcolor=red><font
size=9><i>Vendas por Ms</i></font></td>
</tr>
<td>Cdigo</td>
<td>Jan</td>
<td>Fev</td>
<td>Mar</td>
</tr>
<tr>
<th>Lpis</th>
<th>23</th>
<th>43</th>
<th>54</th>
</tr>
<tr>
<td align=right>Caneta</td>
<td align=right>12</td>
</tr>
</table>
color=yellow

Ficha1 8

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Ficha1 8

Diunggah oleh

Hak Cipta:

Format Tersedia

Sistema de Aprendizagem

1) Abrir um editor de texto ( por exemplo o Bloco de Notas)

Marca o incio e o fim do documento HTML. Com ele iniciamos e finalizamos a

Marca o incio e do fim do cabealho, ou seja, a rea onde sero descritos

Marca o incio e o fim do ttulo do cabealho. O ttulo da pgina aparecer na barra

Marca o incio e o fim do do corpo da pgina

Insere comentrios nas pginas.

Marcas Metas. Servem para especificarmos certas variveis

Marca um ttulo. Sendo que n representa um valor que pode ser de

Insere uma linha horizontal. (tem mais atributos como o tamanho)

Marca um pargrafo e acrescenta uma linha em branco.

Insere uma quebra de linha.

<img> Insere uma imagem

Marca o incio e o fim de uma tabela

Anda mungkin juga menyukai