1
Introdução à
linguagem HTML
2
Introdução à linguagem HTML
❑ Sumário
◼ Visão geral
◼ Primeira página
◼ Principais tags
◼ Principais atributos
3
Visão geral
4
Visão geral
❑ HTML
◼ HTML = HyperText Markup Language
◼ Linguagem de marcação (Markup) para criação de
páginas WEB
◼ Padrão W3C (World Wide Web Consortiun)
◼ Versões da linguagem:
◼ HTML 2.0, 1995, RFC 1866
◼ + RFC 1867, RFC 1942, RFC 1980, RFC 2070
◼ HTML 3.2, 1997, W3C Recomendation
◼ HTML 4.0, 1997, W3C Recomendation
◼ HTML 5.0, 2014, W3C Recomendation
5
Visão geral
❑ Marcação (markup)
◼ Realizada através das tags
❑ Tag HTML
◼ Delimitadas por “<“ e “>”
◼ Usadas para descrever um elemento
◼ Exemplo de tags HTML:
◼ <html>
◼ </html>
◼ <head>
◼ <p>
◼ ....
6
Visão geral
❑ Documento HTML
◼ Relação de elementos HTML organizados em árvore
na qual alguns elementos são filhos de outros.
© 2013-2015 Volnys Bernal 7
Exemplo 1
❑ Árvore de elementos
8
Visão geral
❑ Elemento HTML
◼ Geralmente contém três componentes:
◼ Tag incial, conteúdo e Tag final
◼ Sintaxe de um elemento HTML:
◼ <nometag> conteúdo </nometag>
◼ Exemplos:
Tipo de elemento sintaxe
Conteúdo HTML <html> ... </html>
Cabeçalho do documento <head> ... </head>
Título do documento <title> ... </title>
Corpo do documento (área visível do doc) <body> ... </body>
Título de seção nível 1 <h1> ... </h1>
Parágrafo <p> ... </p>
9
Visão geral
❑ Elemento Raiz
◼ O elemento raiz desta grande árvore é sempre o
“elemento HTML” ( <html> )
10
Visão geral
❑ Extensão “.html”
◼ Um arquivo com documento HTML devem ter a
extensão “.html”.
❑ Delimitadores no documento HTML
◼ Equivale a um delimitador qualquer combinação de:
◼ Espaços
◼ Tabulação
◼ Mudança de linha
11
Exemplo 1
12
Exemplo 1
❑ Código html
<!DOCTYPE html>
<html>
<head>
<title> Minha primeira página </title>
</head>
<body>
<p> Hello world! </p>
<hr>
<p> Olá a todos! </p>
</body>
</html>
13
Exemplo 1
❑ Apresentação no browser
14
Estrutura geral de um
documento HTML
15
Estrutura geral
❑ Um documento HTML possui a seguinte
estrutura geral:
◼ Instrução DOCTYPE (identif. do tipo de documento)
◼ Elemento html (descrição do documento html)
◼ Elemento head (cabeçalho do documento)
◼ Elemento body (corpo do documento)
16
Estrutura geral
❑ Instrução DOCTYPE
◼ DOCTYPE não é uma tag, mas uma instrução
◼ Deve ser a primeira linha do código
◼ Indica qual a especificação deve ser utilizada para
interpretar o documento
◼ HTML5
<!DOCTYPE html>
◼ HTML4
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
17
Estrutura geral
❑ Somente o elemento <body> é apresentado
pelo browser.
18
Tipos de elementos HTML
Tipos de elementos HTML
❑ Elemento void
◼ Comporto por
◼ Somente por um start tag
◼ Não possui conteúdo e end tag
◼ Sintaxe
◼ <tag>
◼ Não contém elementos filhos
◼ Start tag geralmente contém vários atributos.
◼ Alguns representam âncoras de localização de documentos
externos, como imagens e especificações
◼ Exemplos:
◼ <br>
◼ <img src=“car.jpg" width=“128” height=“128” >
◼ <link rel="stylesheet" href="fancy.css" type="text/css" />
23
Principais elementos HTML
24
Principais elementos HTML
❑ Elemento html
◼ Engloba todo o documento HTML:
<html> ... </html>
◼ Dividido em duas partes:
◼ Cabeçalho da página
◼ Contém metadados e configurações da página
<head> …. </head>
◼ Corpo da página
◼ Contém os dados que são apresentados no browser
<body> …. </body>
25
Principais elementos HTML
❑ Elemento parágrafo
◼ Usado dentro do elemento body:
<p> Bla bla bla bla </p>
<p> Bla bla bla bla </p>
◼ Sequência de espaços, tabulações e mudança de
linha na apresentação da página são tratados como
um único espaço.
◼ Exemplo:
<p> Este parágrafo contém
vários espaços, tabulações e mudanças de linha,
mas o browser irá ignora-los.
</p>
26
Principais elementos HTML
❑ Elemento quebra de linha
◼ Usado dentro do elemento body:
<br>
<p> Parágrafo com <br> quebra de linha </p>
❑ Elemento Linha divisória horizontal
<hr>
❑ Comentário
<!– Este é um comentário -->
27
Principais elementos HTML
❑ Exemplo:
<!DOCTYPE html>
<html>
<head>
<title> Exemplo de parágrafo </title>
</head>
<body>
<p> Este é um parágrafo. </p>
<br>
<p> Este é outro parágrafo. </p>
<hr>
<p> Este é mais um parágrafo. </p>
</body>
</html>
28
Principais elementos HTML
❑ Elemento título do documento
◼ Metadado (não é apresentado na página)
◼ Deve estar presente somente no elemento head
◼ Deve ocorrer no máximo uma vez
<head>
<title> Título da página </title>
</head>
29
Principais elementos HTML
❑ Elemento título de seções
<body>
<h1> Heading1 </h1>
<h2> Heading2 </h2>
<h3> Heading3 </h3>
<h4> Heading4 </h4>
<h5> Heading5 </h5>
</body>
30
Principais elementos HTML
❑ Exemplo:
<!DOCTYPE html>
<html>
<body>
<h1> Exemplos de titulo
de seções </h1>
<h2> Heading2 </h2>
<h3> Heading3 </h3>
<h4> Heading4 </h4>
<h5> Heading5 </h5>
</body>
</html>
31
Principais elementos HTML
❑ Elemento “ul” (unorded list)
◼ Lista não ordenada de itens
◼ Cada item da lista é apresentado em uma linha
separada com bulet.
◼ Item é representado pelo elemento “li”
<ul>
<li> UOL </li>
<li> Folha </li>
<li> Estadão </li>
</ul>
Principais elementos HTML
❑ Exemplo de elemento “ul” (unorded list) :
<!DOCTYPE html>
<html>
<body>
<p> Notícias: </p>
<ul>
<li> UOL </li>
<li> Folha </li>
<li> Estadão </li>
</ul>
</body>
</html>
33
Principais elementos HTML
❑ Elemento “ol” (orded list)
◼ Lista ordenada de itens
◼ Cada item da lista é apresentado em uma linha
separada com bulet.
◼ Item é representado pelo elemento “li”
<ol>
<li> UOL </li>
<li> Folha </li>
<li> Estadão </li>
</ol>
Principais elementos HTML
❑ Exemplo de elemento “ol” (orded list) :
<!DOCTYPE html>
<html>
<body>
<p> Notícias: </p>
<ol>
<li> UOL </li>
<li> Folha </li>
<li> Estadão </li>
</ol>
</body>
</html>
Principais elementos HTML
❑ Elemento imagem
◼ Permite incluir um objeto tipo imagem à página
◼ Atributos relevantes:
◼ Arquivo fonte (src)
◼ Texto alternativo (atl)
◼ Largura (width)
◼ Altura (height)
◼ Sintaxe:
◼ <img src="url“ demais_atributos>
◼ Exemplo
◼ <img src=“logo3.jpg” alt=“Logo”
width=“100” height=“100” >
© 2013-2015 Volnys Bernal 36
Principais elementos HTML
❑ Elemento link
◼ Metadado que expressa relacionamento entre documentos
◼ Permite definir um objeto (texto ou imagem) que, quando
selecionado, busca outro documento
◼ Atributos relevantes:
◼ Atributo href (hiperlink reference): permite identificar a URL do
documento a ser buscado
◼ Sintaxe:
◼ <a href="url"> link text </a>
◼ Exemplo:
<a href=“http://www.usp.br”>
Universidade de São Paulo
</a>
37
Atributos HTML
© 2013-2015 Volnys Bernal 38
Atributos HTML
❑ Elementos HTML podem conter atributos
❑ Atributos:
◼ Fornecem informações adicionais sobre um
determinado elemento HTML
◼ São sempre especificados no tag inicial do elemento
◼ São definidos na seguinte sintaxe:
◼ nome=“valor”
39
Atributos HTML
❑ Atributo “title”
◼ Permite definir um título a um elemento
◼ O título não é apresentado, aparece na forma de
tooltip somente quando o mouse passa sobre o
elemento
◼ Exemplo:
<p title=“Threads”>
Threads são linhas de execução sobre um
determinado espaço de endereçamento
</p>
40
Atributos HTML
❑ Atributo “href”
◼ href = hiperlink reference
◼ Podem ser
◼ Absolutos: contém o caminho completo, incluindo o site
◼ Relativos: relativo ao site
◼ Exemplo:
<a href=“http://www.usp.br”>
Universidade de São Paulo
</a>
41
Atributos HTML
❑ Exemplo: itens de menu com link
<hr>
<h2> Notícias </h2>
<ul>
<li>
<a href="http://www.uol.com.br/"> UOL </a>
</li>
<li>
<a href="http://www.folha.com.br/"> Folha </a>
</li>
<li>
<a href="http://www.estadao.com.br/"> Estadao </a>
</li>
</ul>
42
Atributos HTML
❑ Exemplo de imagem com hiperlink
<a href="http://google.com">
<img
src ="http://www.google.com.br/images/srpr/logo4w.png"
>
</a>
43
Atributos HTML
❑ Atributos de imagens
◼ Podem ser utilizados em imagens
◼ Exemplo de atributos de imagens:
◼ src – URL da imagem
◼ width – largura da imagem
◼ height – altura a imagem
◼ Exemplos:
<img src=“meulogo.img”>
<img src=“meulogo.img” width=“100” height=“50”>
44
Atributos HTML
❑ Atributo style
◼ Permite alterar o estilo default
◼ Todo elemento HTML possui um estilo default:
◼ Cor background = branco
◼ Cor do texto = preto
◼ Exemplo de subtítulo vermelho
<h2 style=“color:red” >
Subtítulo HTML vermelho
</h2>
45
Atributos HTML
❑ Atributo style
◼ Exemplo: página vermelha
<html>
<head>
</head>
<body style="background-color:red“ >
</body>
<html>
