HTML
HyperText Markup Language
(Linguagem de marcação de hypertext)
Tags de marcação
Referência
v1.1 2008-2017 © Rui Menino
tags
• Para formatar e paginar o texto dentro de
uma página html, foi definido o conceito
tag de marcação.
• Uma tag é composta por um inicio, um
conteúdo e um fim
<em>
mais texto e mais tags
</em>
Documento html
• O próprio documento html é definido por
várias tag:
<!DOCTYPE html>
<html>
<head>
<title>espaa</title>
<link rel="icon" type="image/gif" href="[Link]" />
<meta name="author" content="Rui Menino" />
<meta name="description" content="canários e gatos" />
<meta name="keywords" content="canário, gato, mascote" />
<meta charset= "utf-8" />
</head>
<body >
aqui fica o conteúdo da página
</body>
</html>
HTML5
• A primeira linha é:
<!DOCTYPE html>
…que define que a página está a usar a
norma HTML5
Dentro da tag <head> (1)
<title>espaa</title>
<link rel="icon" type="image/gif" href="[Link]" />
• Resultado:
• Gif com dimensões 48x48 pixeis
Dentro da tag <head> (2)
• Autor da página:
<meta name="author" content="Rui Menino" />
• Descrição do conteúdo da página (no máximo 90 caracteres):
<meta name="description" content="canários e gatos" />
• Palavras chaves que descrevem a página, curtas, máximo 150
caracteres:
<meta name="keywords" content="canário, gato, mascote" />
Dentro da tag <head> (3)
• Tabela de caracteres a ser usada:
<meta charset= "utf-8" />
• Outra tabela muito usada, especialmente para caracteres latinos
(ansi):
<meta charset= "iso-8859-1" />
• Atenção, a tabela de caracteres
tem que ser a mesma que estiver
definida no notepad++
isso-8859-1 = ansi
Alguns parâmetros da tag
BODY
• bgcolor =grey
• background="[Link]"
• Exemplos
• <body bgcolor=red>
• <body bgcolor= #ff0000>
exemplos
• Exemplos de tag
– <strong>ola</strong> ola
– <em> ola </em> ola
– <strong> ou <b>- negrito
– <em> ou <i> - itálico
Combinação de tags
<strong><em> ola </em></strong>
ou
<b>
<i> olá </i>
</b>
olá
Tags para cabeçalho
• <h1> título </h1>
• <h2> sub - título </h2>
• <h3> texto </h3>
• Etc
Alinhar parágrafos
• Parágrafo centrado
<p align="center"> ola </p>
• Align pode ser “center”, “left” ou “right”
• Align =alinhar
<img > e <br >
tags sem terminador
• mudança de linha (break)
<br />
• imagem
<img src="[Link]" width="32" height="32" />
Width = largura
Height = altura São facultativos
Linha horizontal
<hr />
– exemplo
<hr align="center" width="300px" size="5"
color=red />
distancias
• As distancias usadas nas tabelas (ou em
outras tags html) podem ser em:
– Pixeis
width =“300px” ou width =“300”
– Percentagem
• width =“50%”
– Exemplo
• <hr width="50%" />
• Esta linha vai ter comprimento de 50% da largura
Fazer listas não ordenadas
<ul>
<li>gato</li>
<li>cão</li>
<li>cavalo</li>
</ul>
• medalha de ouro
• medalha de prata
• medalha de bronze
Fazer listas ordenadas
<ol>
<li>medalha de ouro</li>
<li>medalha de prata</li>
<li>medalha de bronze</li>
</ol>
1. medalha de ouro
2. medalha de prata
3. medalha de bronze
Listas dentro de listas
<ul>
<li>medalha de ouro
<ul>
<li>Natação</li>
<li>Corrida</li> •medalha de ouro
•Natação
<li>Hipismo</li> •Corrida
</ul> •Hipismo
•medalha de prata
•medalha de bronze
</li>
<li>medalha de prata</li>
<li>medalha de bronze</li>
</ul>
Hyperlink (1)
• Um exemplo de uma tag Hyperlink
<a href="[Link]">a nossa escola</a>
a nossa escola
Hyperlink (2)
• Um exemplo de uma imagem dentro da
tag Hyperlink
<a href="[Link]">
<img src="[Link]" />
</a>
Os hyperlinks costumam estar sublinhados.
nossa es
cores
<font color=“blue" > Sou azul
Sou azul
</font>
De que cor sou?
<font color=#FF0080 >
De que cor sou?
</font>
Formatação de texto com <font>
• Formatar texto, com cor amarela, tamanho 3, e font ”arial”
<font color="yellow" size="3" face="Arial">
Domingo de Páscoa
</font>
Formatação de texto com tags
• texto negrito, grande e azul
<b>
<font color="blue" size=14 face="verdana" >
A nossa Escola
</font>
</b>
A nossa Escola
Painel rolante,
<marquee> ola </marquee>
<marquee > ola </marquee>
<marquee direction=left> ola </marquee>
<marquee bgcolor=pink>
as rosas têm espinhos
</marquee>
<marquee width=400 > Yuppi!</marquee>
Parametros do <Marquee>
• WIDTH: largura
• HEIGHT: altura
• DIRECTION=LEFT | RIGHT: direcção
• BEHAVIOR=SCROLL | SLIDE |ALTERNATE : tipo de movimento
• SCROLLDELAY: tempo que espera antes de mover
• SCROLLAMOUNT: distancia que move
• LOOP: qtd de ‘voltas’ que dá
• BGCOLOR: cor de fundo
• HSPACE: espaço horizontal à volta
• VSPACE: espaço vertical à volta
• <marquee width=400 BGCOLOR=white BEHAVIOR=alternate > Yuppi!</marquee>
• [Link]
Tabelas
As seguintes tag formam uma tabela de 2 linhas e
5 colunas
<table>
<tr>
<td >nome</td>
<td >idade</td>
<td >modalidade</td>
</tr>
<tr>
<td> rui</td>
<td>17</td>
<td>basketball</td>
</tr>
</table>
A mesma tabela com alguma
formatação
<table width="240" border="1" bordercolor="#FF0000"
bgcolor="#FFFFCC">
<tr>
<td width="70">nome</td>
<td width="80">idade</td>
<td width="90">modalidade</td>
</tr>
<tr> nome idade modalidade
<td> rui</td>
rui 17 basketball
<td>17</td>
<td>basketball</td>
</tr>
</table>
Tabelas-1
• Alguns parâmetros usados nas tabelas
– <table Cellspacing = "3" Cellpadding = "4 "
border = "3" >
– Border = espessura das linhas
– Cellspacing = distancia entre células
– Cellpadding = margens interna das
células
Tabelas-2
• <tr align="" valign="" >
– align: alinhamento horizontal do conteúdo da
linha (center, left, right )
– valign: alinhamento vertical do conteúdo da
linha (top, middle, bottom)
Tabelas-3
• bgcolor= "red" cor de fundo da tabela,
linha ou coluna
• background="dragon_5.gif“cor de fundo
da tabela, linha ou coluna
• width="400" height="100" comprimento e
altura da tabela, linha ou coluna
Sobre as tabelas
• [Link]
.asp
• É possível, mas não é aconselhado usar
tabelas para fazer o layout das páginas
DIV e SPAN
• 2 tags que não têm nenhuma
característica, mas são muito usadas em
CSS
• <span> *AQUI * </span>
• <div> *AQUI * </div>
NORMAS
• Até agora, html referia-se à norma
– HTML 4.0
• Strict ou Transitional
• A tendencia é começar a usar a norma
– XHTML 1.0 + CSS
• Strict ou Transitional
• [Link]
• [Link]
história
• Publicação do HTML 3.5 no final de 1997
• 2002 a 2006, desenvolvimento do XHTML,
uma especificação HTML baseada em
XML
• O XHTML faz uso de uma sintaxe mais
rigorosa e menos ambígua para tornar o
HTML mais simples de ser usado
XHTML
Extended HyperText Markup Language
• Nesta variante mais moderna, todos os
tags tem que terminar
Ou
• conterem o terminador
Ex.: <br />
história
• Em 2008 foi criada a primeira definição
de HTML5.
Referências
• [Link]