0% acharam este documento útil (0 voto)

15 visualizações56 páginas

105 HTML v9

Este documento fornece uma introdução à linguagem HTML, descrevendo sua estrutura e principais elementos como tags, atributos, cabeçalho, corpo, parágrafos, títulos, listas e imagens.

Enviado por

Timóteo Alberto

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

15 visualizações56 páginas

105 HTML v9

Este documento fornece uma introdução à linguagem HTML, descrevendo sua estrutura e principais elementos como tags, atributos, cabeçalho, corpo, parágrafos, títulos, listas e imagens.

Enviado por

Timóteo Alberto

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 56

1

Introdução à
linguagem HTML

Volnys Borges Bernal

Introdução à linguagem HTML

Sumário

Visão geral
Primeira página
Principais tags
Principais atributos
Formulários
© 2011-2015 Volnys Bernal 3

Visão geral
© 2013-2015 Volnys Bernal 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
© 2013-2015 Volnys Bernal 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>
....
© 2013-2015 Volnys Bernal 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
© 2013-2015 Volnys Bernal 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>
© 2013-2015 Volnys Bernal 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
© 2011-2015 Volnys Bernal 11

Exemplo 1
© 2013-2015 Volnys Bernal 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>
© 2013-2015 Volnys Bernal 13

Exemplo 1

Apresentação no browser
© 2011-2015 Volnys Bernal 14

Estrutura geral de um
documento HTML
© 2013-2015 Volnys Bernal 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)
© 2013-2015 Volnys Bernal 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">
© 2013-2015 Volnys Bernal 17

Estrutura geral

Somente o elemento <body> é apresentado

pelo browser.
© 2011-2015 Volnys Bernal 18

Tipos de elementos HTML

Existem três tipos de elementos HTML:

Raw text
Normal
Void
Tipos de elementos HTML

Elemento “raw text”

Composto por
Start tag, conteudo de texto e end tag
Sintaxe
<tag> conteúdo de texto </tag>
Sendo:
Start tag - <tag>:
Delimitador do início do elemento
Pode incorporar qualquer quantidade de atributos HTML
Conteúdo de texto:
Texto a ser apresentado
Não permite inclusão de outros elementos
End tag - </tag>:
delimitador do término do elemento
Exemplo:
<p> Este é um parágrafo. </p>
Tipos de elementos HTML
Elemento normal
Composto geralmente por:
Start tag, conteúdo e end tag
Sintaxe:
<tag> conteúdo </tag>
Sendo:
Start tag:
Pode incorporar qualquer quantidade de atributos HTML
Conteúdo:
Pode conter texto ou outros elementos
End tag:
Pode ser omitido em algumas situações
Exemplo:
<form>
First name: <br>
<input type="text" name="firstname"> <br>
</form>
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" />
© 2011-2015 Volnys Bernal 23

Principais elementos HTML

Elemento html

Engloba todo o documento 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>
© 2013-2015 Volnys Bernal 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 -->
© 2013-2015 Volnys Bernal 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>
© 2013-2015 Volnys Bernal 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>
© 2013-2015 Volnys Bernal 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>
© 2011-2015 Volnys Bernal 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>
© 2013-2015 Volnys Bernal 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:

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

Formulário

Permite coletar dados do usuário.

Formulários são criados utilizando o

elemento <form>

Principais tipos de entrada de dados

Text – entrada de texto
Radio – seleção de uma ou mais opções
Submit – submissão dos dados ao servidor WEB
© 2013-2015 Volnys Bernal 48

Formulário

Exemplo de entrada de texto:

<form>
Intensidade:
<input type="text" name="intensidade">
<br>
Limiar:
<input type="text" name="limiar">
<br>
</form>
© 2013-2015 Volnys Bernal 49

Formulário

Exemplo de entrada com botão radio:

<form>
<input type="radio" name="estado"
value="apagar" >
Apagar <br>
<input type="radio" name="estado"
value="acender" >
Acender <br>
</form>
© 2013-2015 Volnys Bernal 50

Formulário

Atributo type=“submit”
Ao selecionar o botão submit , o browser gera uma
requisição HTTP GET ou HTTP POST ao servidor.

HTTP GET (default)

Na requisição HTTP GET, os valores são passadas através
da URL. Esta técnica pode ser utilizada para valores não
sensíveis (pois os valores ficam visíveis na URL).
Atributo action
No servidor, deve ser identificada a página que deverá
processar a requisição. Isto pode ser informado no atributo
“action”.
© 2013-2015 Volnys Bernal 51

Formulário

Exemplo de botão submit

<form>
Intensidade:
<input type="text" name="intensidade">
<br>
Limiar:
<input type="text" name="limiar">
<br> <br>
<input type="submit" value="Enviar">
</form>

Formulário

Exemplo de action
<form action=“my_action_function” method=“GET”>
Intensidade:
<input type=“text” name=“intensidade”>
<br>
Limiar:
<input type=“text” name=“limiar”>
<br> <br>
<input type=“submit” value=“Enviar”>
</form>

Formulário

Agrupamento da submissão com <fieldset>

Permite limitar os dados a serem encaminhados

<form action=“action_page.php” method=“GET”>

<fieldset>
Intensidade:
<input type=“text” name=“intensidade”> <br>
Limiar:
<input type=“text” name=“limiar”> <br> <br>
<input type=“submit” name=“Enviar”>
</fieldser>
</form>
Formulário
Atributo type=range

<h2> CONFIGURAÇÃO:</h2>