Principais TAGs em HTML

•

ESTÁCIO EAD

0

Lino Villela

10/05/2020

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Tecnologias Web

6.055 Materiais compartilhados

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

Tecnologias Web
João Paulo 
Brognoni Casati
Aula 6
*
Conteúdo da Aula
Páginas em HTML
Principais TAGs utilizadas
Formatação de Texto
Links (Ancoragem)
Manipulação de Imagens
Formatação de tabelas
*
*
TAGs: Formatação de Texto
TAGs de texto:
<p> Parágrafo </p>
<h1> Título </h1> (h1 a h6)
<br/> ou <br> Pular linha
<hr/> ou <hr> Régua horizontal
<sub> Subscrito </sub>
<sup> Sobrescrito </sup>
*
*
TAGs: Formatação de Texto
Código HTML:
*
<!DOCTYPE html>
<html>
	<head>
		<title>PG Teste 01</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<h1>Título 1</h1>
		<h2>Título 2</h2>
		<h3>Título 3</h3>
		<h4>Título 4</h4>
		<h5>Título 5</h5>
		<h6>Título 6</h6>
	</body>
</html>
*
TAGs: Formatação de Texto
Resultado:
*
*
TAGs: Formatação de Texto
Código HTML:
*
<!DOCTYPE html>
<html>
	<head>
		<title>PG Teste 02</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<h2>Título</h2>
		<p>Parágrafo de Texto.</p>
		<p>
		Outro parágrafo de texto.
		<br/>
		Mesmo parágrafo, linha de baixo.	
		</p>
	</body>
</html>
*
TAGs: Formatação de Texto
Resultado:
*
*
TAGs: Formatação de Texto
*
*
TAGs: Formatação de Texto
Código HTML:
*
<!DOCTYPE html>
<html>
	<head>
		<title>PG Teste 03</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<h2>Texto em negrito</h2>
		<strong>Este texto está em negrito usando a TAG STRONG.</strong> <br/>
		<b>Este aqui usa a TAG B.</b>
		<h2>Texto sublinhado</h2>
		<ins>Este texto está sublinhado
 usando a TAG INS.</ins> <br>
 <u>Este aqui usa a TAG U.</u>
	</body>
</html>
*
TAGs: Formatação de Texto
Resultado:
*
*
TAGs: Formatação de Texto
Código HTML:
*
<!DOCTYPE html>
<html>
	<head>
		<title>PG Teste 04</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<p>Texto sobrescrito: <sup>Estou aqui em cima!</sup></p>
		<p>Texto subscrito: <sub>Estou aqui em baixo!</sub></p>
	</body>
</html>
*
TAGs: Formatação de Texto
Resultado:
*
*
TAGs: Links
Links (ancoragem):
Alteram a visualização de um arquivo HTML para outro em um navegador web
Permitem navegar para diferentes sites na web
Podem apontar para outras páginas, arquivos, etc...
*
*
TAGs: Links
Links em HTML:
*
<a href=“http://www.site.com.br"/>
Caminho do html/site a ser exibido
Abertura da TAG
Fechamento da TAG
Propriedade de referência
*
TAGs: Links
Código HTML (teste02.html):
*
<!doctype html>
<html>
 <head>
 <title>Página Teste 02</title>
 </head>
 <body>
 <h1>Mudança de Página</h1>
 <p><a href="teste03.html">
	Ir para Teste03</a></p>
 </body>
</html>
*
TAGs: Links
Resultado:
*
*
TAGs: Links
Resultado:
*
*
TAGs: Links
Código HTML (teste03.html):
*
<html>
 <head>
 <title>Página Teste 03</title>
 </head>
 <body>
 <h1>Chegamos!!!</h1>
 <p><a href="teste02.html">Voltar para Teste02</a></p>
 </body>
</html>
*
TAGs: Imagens
Imagens em HTML:
*
<img src="img/imagem.jpg"/>
Caminho da imagem a ser exibida
Abertura da TAG
Fechamento da TAG
*
TAGs: Imagens
Resultado:
*
*
TAGs: Imagens
Página com imagem do ENIAC
*
<!DOCTYPE html>
<html>
 <head>
 <meta charset=”utf-8”>
 <title>HTML: Exemplo 07</title>
 </head>
 <body>
 <h1>Inserção de imagens</h1>
 <img src=”eniac.jpg” height=”305” width=”400”/>
 <p>
 <i> Foto do computador ENIAC (Electronic 
 Numerical Integrator And Computer) da 
 década de 40. </i>
 </p>
 </body>
<html>
*
TAGs: Imagens
Resultado:
*
*
TAGs: Tabelas
Tabelas em HTML:
*
<table border="1">
 <tr>
 <td colspan="2">Carros</td>
 </tr>
 <tr>
 <td>Palio</td>
 <td>2012</td>
 </tr>
 <tr>
 <td>Gol</td>
 <td>2014</td>
 </tr>
</table>
Inicia a Tabela
Nova Linha
Colunas
*
TAGs: Tabelas
Resultado:
*
*
TAGs: Tabelas
Código de tabela em HTML
*
<!DOCTYPE html>
<html>
 <head>
 <title>Carros</title>
 </head>
 <body>
 <table border="1">
 <tr>
 <td rowspan="2">Carros</td>
 <td>Palio</td>
 </tr>
 <tr>
 <td>Gol</td>
 </tr>
 </table>
 </body>
</html>
*
TAGs: Tabelas
Resultado:
*
Tecnologias Web
João Paulo 
Brognoni Casati
Atividade 6
*
*
Atividades
1 – Dê um exemplo de um link para a página do google.
Resposta:
<a href=“http://www.google.com.br”> Clique Aqui! </a>.
*
*
Atividades
2 – Quais são as TAGs de título do HTML?
Resposta:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
*
*
Atividades
3 – Qual a utilidade da propriedade colspan na coluna de uma tabela?
Resposta:
Ocupar mais de uma coluna com a mesma célula.
*
*
Atividades
4 – Qual a propriedade que indica o caminho do arquivo de imagem a ser inserido na página HTML?
Resposta:
A propriedade src.
*
*
Atividades
5 – O que acontece se a TAG <br/> for utilizada várias vezes seguidas?
Resposta:
São puladas várias linhas na página, deixando um espaço em branco.