Buscar

Exercicio HTML em aula

•

ESTÁCIO

7
Dislike0
7
Dislike0
Comment0
User badge image

Ueslei Mendes

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

LikeFooter
DislikeFooter

Tecnologias Web

5.992 Materiais compartilhados

mobile

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Ficha de Trabalho nº1 – HTML
	Temas abordados: Definição de um documento HTML; Cabeçalho; Corpo; Titulo da página; Parágrafos; Quebras de linha; Títulos.
Abra o Bloco de Notas e digite o seguinte código:
<html>
<head>
<title>Título da minha página</title>
</head>
<body>
<p align=”right”>Isto é um parágrafo alinhado à direita.</p>
<p align=”center”>Isto é outro parágrafo com uma quebra de linha pelo meio.<br> Este parágrafo encontra-se centrado na horizontal.</p>
<h1 align=”left”> Isto é um cabeçalho h1 alinhado à esquerda </h1>
<h2 align=”left”> Isto é um cabeçalho h2 alinhado à esquerda </h1>
<h3 align=”left”> Isto é um cabeçalho h3 alinhado à esquerda </h1>
<h4 align=”left”> Isto é um cabeçalho h4 alinhado à esquerda </h1>
<h5 align=”left”> Isto é um cabeçalho h5 alinhado à esquerda </h1>
<h6 align=”left”> Isto é um cabeçalho h6 alinhado à esquerda </h1>
<body>
</htlm>
Grave o documento com o nome “htmlexerc01.htm”.
Abra o ficheiro com o Internet Explorer, browser utilizado para testar os nossos documentos HTML.
�
Ficha de Trabalho nº2 – HTML
	Temas abordados: Inserção de uma linha horizontal; Formatação de texto; Estilos de fonte.
Abra o Bloco de Notas e digite o seguinte código:
<html>
<head>
<title>Exercício 2</title>
</head>
<body>
<font face=”arial” color=”#ff0000” size=”6”>Texto com font Arial, de cor vermelha e tamanho 6</font><br><br>
<font face=”Times New Roman” color=”green” size=”2”>Texto com font Times New Roman, de cor verde e tamanho 2</font><br><br>
<hr color=#ff0000”align=”left” width=”50%” size=”1” noshade><br>
<b> Este texto está a negrito </b><br><br>
<i> Este texto está em itálico </i><br><br>
<u> Este texto está sublinhado </u><br><br>
<strike>Risco a meio da frase</strike><br><br>
Texto normal <sup>Texto um pouco acima da linha</sup><sub> Texto um pouco abaixo da linha</sub><br><br>
<blink>Texto a piscar (Não funciona no Internet Explorer)<blink><br><br>
<font face=”Times New Roman” color=”blue” size=”2”>O objectivo destes exercícios é a compreensão da linguagem HTML, pois essa linguagem é a base da construção de páginas para a Internet.</font><br><br>
<body>
</htlm>
Grave o documento com o nome “htmlexerc02.htm”.
Abra o ficheiro com o Internet Explorer.
�
Ficha de Trabalho nº3 – HTML
	Temas abordados: Comentário em HTML; Hiperligações em texto para fora do documento; Hiperligações em texto para dentro do documento; Hiperligações para e-mails.
Abra o Bloco de Notas e digite o seguinte código:
<html>
<head>
<title>Exercício 3</title>
</head>
<body>
<!-- Cabeçalho (isto é um comentátio) -->
<h4 align=”left”><font face=”arial” color=”#0000CC” size=”3”>Links úteis</font></h4>
<!-- Formatação dos links (isto é um comentátio) -->
<font face=”arial, helvética, sans-serif” size=”2”>
<!-- Vai abrir a página na própria janela -->
<a href=”http://www.microsoft.pt/”>Microsoft, Lda.</a> - Site da Microsoft Portugal<br>
<!-- Com o target vai abrir a página numa nova janela -->
<a href=”http://etic.no.sapo.pt/” target=”_blank”>Tecnologias de Informação e Comunicação</a> - Site de apoio<br>
<!-- Hiperligação para o exercício 2 que vai abrir numa nova página -->
<a href=”htmlexerc02.htm”>Exercício 2</a> - Hiperligação para o exercício anterior<br>
<!-- Hiperligação para uma ancora dentro desta página -->
<a href=”#resposta””>Para que serve uma ancora? </a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- Definição da ancora através do atributo name -->
<a name=”resposta””>O atributo name é usado para criar o nome de uma ancora. O nome da ancora pode ser qualquer texto que deseje usar.</a>
<!-- Definição de um link para uma conta de e-mail -->
<a href=”mailto:karlosilvestre@sapo.pt”>E-mail do professor</a>
<body>
</htlm>
Grave o documento com o nome “htmlexerc03.htm”.
Abra o ficheiro com o Internet Explorer.
Na sua pasta, crie uma directoria com o nome “3b” e faça uma cópia do ficheiro “htmlexec01.htm” para o seu interior.
Abra novamente o documento “htmlexerc03.htm” e faça a seguinte alteração:
Onde diz: 
<!-- Hiperligação para o exercício 2 que vai abrir numa nova página -->
<a href=”htmlexerc02.htm”>Exercício 2</a> - Hiperligação para o exercício anterior<br>
Altere para
<!-- Hiperligação para o exercício 1 que vai abrir numa nova página -->
<a href=”3b/htmlexerc01.htm” target=”_blank”>Exercício 1</a> - O primeiro exercício de HTML<br>
Grave o novo documento com o nome “htmlexerc03b.htm”.
Abra o ficheiro com o Internet Explorer.
�
Ficha de Trabalho nº4 – HTML
	Temas abordados: Inserção de imagens.
Vá à pasta “As minhas imagens” e copie o ficheiro “#####.jpg”� para a sua pasta.
 
Abra o Bloco de Notas e digite o seguinte código:
<html>
<head>
<title>Exercício 4</title>
</head>
<body>
<p>Uma imagem
<img src="#####.jpg" alt="texto alinhado com o rodapé da imagem" align="bottom" width="80" height="71">
entre o texto</p>
<p>Uma imagem
<img src="#####.jpg" alt="texto alinhado com o centro da imagem" align="middle" width="80" height="71">
entre o texto</p>
<p>Uma imagem
<img src="#####.jpg" alt="texto alinhado com o topo da imagem" align="top" width="80" height="71">
entre o texto</p>
<h3>Por defeito a imagem encontra-se alinhada por baixo</h3>
<p>Uma imagem
<img src="#####.jpg" alt="alinhada por baixo" width="80" height="71">
entre o texto</p>
<img src="#####.jpg" alt="antes do texto" width="80" height="71">
Uma imagem antes do texto</p>
<p>Uma imagem depois do texto
<img src="#####.jpg" alt="depois do texto" width="80" height="71"></p>
<body>
</htlm>
Grave o documento com o nome “htmlexerc04.htm”.
Abra o ficheiro com o Internet Explorer.
�
Ficha de Trabalho nº5 – HTML
	Temas abordados: Criação de Tabelas.
Copie o ficheiro “#####.jpg”� para a sua pasta.
 
Abra o Bloco de Notas e digite o seguinte código:
<html>
<head>
<title>Exercício 5</title>
</head>
<body>
<!-- tabela com 3 linhas e 4 células em cada linha -->
<table width="381" border="1" bordercolor=#"ff00ff">
 <tr>
	<!--A única diferença dos th para os td está no facto de os th serem a negrito-->
	<td height="37" align="center" valign="middle">Vendas/Mês</td>
	<th align="left" valign="bottom">Janeiro</th>
	<th align="left" valign="bottom">Fevereiro</th>
	<th align="left" valign="bottom">Março</th>
 </tr>
 <tr>
	<td height="36" align="right" valign="top">Computadores</td>
	<th align="center" valign="middle">10</th>
	<th align="center" valign="middle">15</th>
	<th align="center" valign="middle">15</th>
 </tr>
 <tr>
	<td height="46" align="left" valign="bottom">Monitores</td>
	<th align="center" valign="middle">9</th>
	<th align="center" valign="middle">12</th>
	<th align="center" valign="middle">14</th>
 </tr>
</table>
<br>
<p>Utilizando mais atributos</p>
<br>
<table width="381" bgcolor=#"cc0000" cellspacing="4">
 <tr>
	<!--A única diferença dos th para os td está no facto de os th serem a negrito-->
	<td height="37" align="center" valign="middle" bgcolor="#cc0000">Vendas/Mês</td>
	<th align="left" valign="bottom">Janeiro</th>
	<th align="left" valign="bottom">Fevereiro</th>
	<th align="left" valign="bottom">Março</th>
 </tr>
 <tr>
	<th rowspan="2" height="36" align="center" valign="middle">Computadores</th>
	<td align="center" valign="middle" bgcolor=#"cccccc">10</td>
	<td align="center" valign="middle" bgcolor=#"cccccc">15</td>
	<td align="center" valign="middle" bgcolor=#"cccccc">15</td>
 </tr>
 <tr>
	<td align="center" valign="middle" bgcolor=#"cccccc">9</td>
	<td align="center" valign="middle" bgcolor=#"cccccc">12</td>
	<td align="center" valign="middle" bgcolor=#"cccccc">14</td>
 </tr>
</table>
<body>
</htlm>
Grave o documento com o nome “htmlexerc04.htm”.
Abra o ficheiro com o Internet Explorer.
EXERCÍCIO1 – Estrutura Básica de uma página Web
1º) Abrir um editor de texto ( por exemplo o Bloco de Notas)
2º) Digitar o código:
 
<html>
<head>
<title>COLOCAR O TÍTULO DA PÁGINA</title>
</head>
<body>
DAQUI EM DIANTE DESENVOLVEMOS A NOSSA PÁGINA
</body>
</html>
Exercício 2 – FACILITAR A LEITURA DO CÓDIGO
Abra o bloco de notas e escreva o seguinte código:
<html>
<head>
<title>Melhorar a minha Home Page</title>
<meta name=”autor” content=”luis”>
</head>
<!– Início do Corpo da Página –>
<body>
<h1>Este é o título Principal</h1>
<h2>Este é o título Secundário</h2>
<h3> Estou a adorar criar páginas</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 Página –>
</body>
</html>
Exercício 4 – FORMATAÇÃO DE ESTILOS
<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 Itálico</i><br>
<u>Texto sublinhado</u><br>
<tt>Texto Monoespaçado</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 combinações</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 espaços feitos no código fonte sejam respeitados.
</pre>
</body>
</html>
Exercício 5 – CRIAÇÃO DE ITEMS
<html>
<head><title>Listas</title>
</head>
<body>
<h3>Isto é uma lista</h3>
<! Início dos Numeradores>
<ol>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
<! Fim dos Numeradores>
<hr width=50% size=5 align=left>
<! Início dos Marcadores>
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
<! Fim dos Marcadores>
</body>
</html>
CRIAÇÃO DE ITEMS
EXERCICIO 5.2
<html>
<head><title>Listas 2</title>
</head>
<body>
<h3>Isto é uma listagem iniciando no número 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>Fábio
<li>Miguel
<li>Rafael
</ol>
<h3>Isto é uma listagem em algarismo romano</h3>
<ol type=I>
<li>Inês
<li>Marcia
<li>Vera
</ol>
 
<h3>Esta é uma listagem em algarismo romanos a partir do número 3</h3>
 
<ol type=I start=3>
<li>Luis
<li>Zé
<li>Carlos
</ol>
</body>
</html>
CRIAÇÃO DE ITEMS
<html>
<head><title>Listas</title>
</head>
<body>
<h3>Listagem e SubListagem</h3>
<ol><! Início do Numerador>
<li>Item 1
<ul><! Início do Marcador dentro do Numerador>
<li type=disc>Item 1.1
<li type=disc>Item 1.2
<li type=disc>Item 1.3
</ul><! Fim do Marcador dentro do Numerador>
 
<li> Item 2
<ul><! Início do Marcador dentro do Numerador>
<li type=square>Item 2.1
<ul><!Início do Marcador dentro do Marcador>
<li type=circle>Item 2.1.1
<li type=circle>Item 2.1.2
<li type=circle>Item 2.1.3
</ul><!Fim do Marcador dentro do Marcador>
 
<li type=circle>Item 2.2
<li type=disc>Item 2.3
 
</ul><! Fim do Marcador dentro do Numerador>
<li> Item 3
</ol><! Fim do Numerador>
</body>
</html>
Exercício 6 – DEFININDO O CORPO DA PÁGINA (BODY)
<html>
<head>
<title>Página com Fundo Colorido</title>
</head>
<body bgcolor=”grey” text=”blue”>
 
<h3>Defino a cor de fundo cinzento para o fundo da página</h3>
<h3>Defino a cor padrão do texto da página azul</h3>
 
</body>
</html>
DEFININDO O CORPO DA PÁGINA (BODY)
<html>
<head><title>Inserir uma imagem no fundo da Página</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>
Exercício 7 – 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>
� Onde está “#####.jpg” é o nome de um ficheiro qualquer de imagem, de preferência não muito grande.
� Onde está “#####.jpg” é o nome de um ficheiro qualquer de imagem, de preferência não muito grande.

Continue navegando

Materiais relacionados

17 pág.
gabarito_Programação para Web I

Uniasselvi

User badge image

Júlia Marques

99 pág.
HTML5 e CSS Tutorial

User badge image

Paulo Renato

54 pág.
Linguagem de Programação WEB

ESTÁCIO

User badge image

Taiza Frosino

50 pág.
Apostila de HTML

Anhanguera

User badge image

Maércio Rogers

Perguntas relacionadas

Question Icon

Assinale qual a sintaxe correta para uma estrutura básica da marcação HTML. a) < xhtml >< head >< title>< /title>< /head >< html> < /html> < /xhtm...

User badge image

Exercícios Para o Conhecimento

Question Icon

Neste exercício, veremos alguns exemplos de uso de gradientes. Considere o seguinte código HTML: A continente Africano ...

User badge image

Questões Para a Compreensão

Question Icon

Toda página HTML precisa conter um conjunto base essencial de elementos, sendo eles: a. html, head e body b. title, main, footer c. html, mai...

User badge image

Katia Karoline

Question Icon

Qual é o comando que deve ser utilizado para iniciar e finalizar um formulário em HTML? FORMULARIO e /FORMULARIO BODY e /BODY HTML e /HTML FORM e...

User badge image

Progresso com Exercícios

Outros materiais