HTML

Prof. Sungo Afonso

 Conteúdo das Aulas
• HTML 5

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 2
Introdução à HTML 5
Parte 01
 Sumário
• O que é HTML?
• Evolução da web e da HTML
• Editores HTML

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 4
 O que é HTML?
• HyperText Markup Language;
• Linguagem de Marcação de Hipertexto;

• Um documento HTML é um arquivo texto que emprega

marcações (tags) para descrever o conteúdo de páginas web, que
será interpretado e renderizado pelos navegadores.

https://developer.mozilla.org/pt-BR/docs/Web/HTML

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 5
 Evolução da web
• Pré-web
• Dados isolados (sem uma grande rede de comunicação e acesso aos dados);
• A Internet nasceu, mas faltava uma ferramenta para facilitar o
compartilhamento de informações por meio dela;
• Surge a World Wide Web!
• Desafio
• O que é a World Wide Web?
• Quem definiu/inventou a Web?

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 6
 Evolução da web
• Web 1.0
• Conceito surgiu em 1990, por Tim Bernes Lee;
• Junção de três tecnologias simples: HTML, HTTP e Hyperlinks;
• Web meramente informativa (estática).

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 7
 Evolução da web
• Web 2.0
• Termo surgiu em meados de 2004, por Dale Dougherty;
• Desenvolvimento de tecnologias (linguagens de programação) server-
side;
• Todos passam a ser produtores e consumidores de informação;
• Redes sociais, blogs e sites de compartilhamento de multimídia;
• Crescimento exponencial do volume de dados.
• Web colaborativa (dinâmica).

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 8
 Evolução da web
• Web 3.0
• Processar volumes enormes de dados exige que computadores
compreendam suas informações para filtragem e processamento;
• Nesse cenário, encontramos a HTML 5, que permite uso de marcações
para melhor definir o significado de conteúdos em páginas Web;
• Web semântica.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 9
 Evolução da web
• Web 4.0
• “Segundo Seth Godin, será como um gigantesco SO inteligente e dinâmico,
que irá suportar as interações dos indivíduos, utilizando os dados disponíveis,
instantâneos ou históricos, para propor ou suportar a tomada de decisão”
(NETO, s.d.);
• Web inteligente;
• As tecnologias para tal experiência web ainda estão em desenvolvimento.
• Desafio
• Para você, o que será a “web do futuro”?

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 10
 Editores HTML
• Pode-se escrever páginas HTML em qualquer editor de texto...
• Bloco de Notas, Notepad++ etc.
• Lembre-se apenas de salvar com a extensão “.htm” ou “.html”!

• ...e ver o resultado produzido em qualquer navegador...

• Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera etc.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 11
 Editores HTML
• Entretanto, há editores HTML que oferecem facilidades e
recursos para o trabalho do desenvolvedor Web:
• Adobe Dreamweaver (desktop pago)
• http://www.adobe.com/products/dreamweaver.html
• Visual Studio Code (desktop gratuito)
• https://code.visualstudio.com/download
• Sublime Text 3 (desktop gratuito)
• https://www.sublimetext.com/download

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 12
Estrutura básica de um
documento HTML
Parte 02
 Sumário
• Estrutura básica de uma tag
• Estrutura básica de um documento HTML
• Atributos globais mais comuns
• Tag Head
• Tag Body

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 14
 Recordando...
• O que é HTML?
• O que é a Web 2.0? E a Web 3.0?
• O que significa semântica?

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 15
 Estrutura básica de uma tag
<tag atributo=“valor”> • Tags que apresentam conteúdo
Conteúdo da tag devem ser abertas (<tag>) e
fechadas (</tag>);
</tag>
• Algumas tags não apresentam
conteúdo (ex: <br>). Nesses casos
ou
a tag é somente aberta;
<tag atributo=“valor”>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 16
 Estrutura básica de uma tag
<tag atributo="valor"> • Atributos definem certas
Conteúdo da tag características de uma tag;

</tag> • A partir da HTML 5, todos os

atributos antes usados para
formatação de uma tag foram
ou
removidos. Agora a formatação
da mesma será feita por meio de
<tag atributo="valor">
CSS 3!

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 17
 Estrutura básica de um documento HTML
<!DOCTYPE html> • Declaração DOCTYPE –
<html> define o tipo de documento;
<head> • Tag html – envolve todo o
conteúdo de uma página web;
</head>
<body>
</body>
</html>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 18
 Estrutura básica de um documento HTML
<!DOCTYPE html> • Tag head – define um
<html> “cabeçalho” (informações
referentes à página em si);
<head>
• Tag body – apresenta o
</head> conteúdo a ser renderizado
<body> pelo navegador.
</body>
</html>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 19
 Estrutura básica de um documento HTML
<!DOCTYPE html> • Tags não são case-sensitive (sensíveis
<html> à caixa);
<head> • Toda tag aberta deve ser fechada –
exceto tags que não apresentam
</head> conteúdo!
<body> • Tags mais internas devem ser
</body> fechadas antes das tags mais
externas.
</html>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 20
 Exercício
• Crie um documento HTML que, ao ser aberto no navegador, exiba a
seguinte mensagem:
Olá, mundo!

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 21
 Atributos globais mais comuns
Atributo Descrição
class Especifica um ou mais nomes de classes (da folha de
estilos) para um elemento
id Especifica um identificador único para o elemento
style Especifica o estilo CSS “inline” para o elemento
title Especifica informação extra sobre o elemento, visível ao
passar o mouse sobre ele

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 22
 Tag HEAD
• Responsável por prover informações sobre a página;
• Algumas tags que podem ser usadas aqui:
• title – define um título para a página;
• meta – provê metadados (dados sobre os dados), como tipo
de codificação, palavras-chave, descrição etc.
• link – estabelece uma relação entre o documento e um
arquivo externo (estilo css, ícone etc.);

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 23
 Tag HEAD
• Algumas tags que podem ser usadas aqui: (cont.)
• style – define regras de estilo (CSS) diretamente no
documento;
• script – provê instruções em linguagem de programação client-
side (geralmente em JavaScript).

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 24
 Tag HEAD - exemplo
<head>
<title>HTML Editors</title>
<meta charset="utf-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Well organized and easy to understand Web
bulding tutorials with lots of examples...">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/lib/w3.css">
</head>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 25
 Tag BODY
• Descreve todo o conteúdo a ser renderizado pelo navegador;
• Algumas tags que podem ser usadas aqui:
• Tags de cabeçalho: <h1>, <h2>... <h6>;
• Tag de parágrafo: <p>;
• Tags para formatação: <b> ou <strong>, <i> ou <em>, <u> etc.
• Tags para hyperlink: <a>;
• Tags de imagem: <img>;

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 26
 Tag BODY
• Algumas tags que podem ser usadas aqui: (cont.)
• Tags para listas: <ol>, <ul> e <li>;
• Tags para tabelas: <table>, <tr>, <th> e <td>;
• Tags para blocos: <div> e <span>;
• Tags para layout: <header>, <nav>, <section>, <article>
etc.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 27
 Tag BODY – exemplo
<body>
<h1>Linguagens para Programação Web</h1>
<p>As linguagens de programação web são utilizadas especificamente para o
desenvolvimentos das camadas de apresentação e de lógica de negócio de web sites,
portais e aplicações web em geral. Entenda nesse link um pouco do conceito de
camadas.</p>
<p>Na verdade, HTML não é uma linguagem de programação, é uma linguagem
de marcação. Bem resumidamente, linguagem de marcação é um conjunto de regras e
códigos que define como os elementos da página são exibidos.</p>
</body>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 28
 Exercício
• Crie um documento HTML (biografia.html) com a sua
“biografia”, isto é, o título da página (a aparecer na barra do
navegador) deve ser o seu nome e no corpo da página escreva um
parágrafo descrevendo a sua rotina diária.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 29
Tags HTML Básicas
Parte 03
 Sumário
• Tags Cabeçalhos (h1...h6)
• Tag Parágrafo (p)
• Tag Quebra de Linha (br)
• Tag Linha Horizontal (hr)
• Tag Hyperlink (a)

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 31
 Recordando...
• Qual o papel da tag head?
• Qual o papel da tag body?
• Qual tag uso para especificar o título de minha página?

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 32
 Tags Cabeçalhos
• São usadas para identificar títulos de seção dentro de um
documento HTML;

• Podem variar de h1 até h6, onde h1 é a mais importante

(geralmente contendo o título da página) e h6 é a menos
importante;

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 33
 Tags Cabeçalhos
• Não confundir com a tag head!
• h1...h6 – definem títulos e subtítulos de seções dentro da
página, usadas dentro da tag body;
• head – define informações sobre a página, como título da
mesma, descrição, palavras-chave etc.
• title – define o título da página que aparecerá na barra do
navegador.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 34
 Tags Cabeçalhos - exemplo
<h1>Lista de plantas silvestres na Amazônia</h1>
<p>A lista de plantas silvestres da Amazônia inclui todas as espécies endêmicas
da vegetação da Amazônia. Segundo Giacometti (1990), é estimada a existência de
800 espécies vegetais de valor econômico ou social nesta floresta. Elas foram
listadas abaixo de acordo com a família à qual pertencem.</p>
<h2>Bromeliaceae</h2>
<p>Bromeliaceae Juss. é uma família de monocotiledôneas, que segundo a
classificação filogenética AGP III (2009) pertence à ordem dos Poales, com
plantas terrestres, rupícolas ou, principalmente epífitas, possui 3.172 espécies,
distribuídas em 58 gêneros.</p>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 35
 Tag Parágrafo
• Cada parágrafo em um documento pode (e deveria) estar envolto
por uma tag p;

• Caso uma tag p não seja fechada corretamente, a maioria dos

navegadores o faz de forma implícita toda vez que encontra uma
nova tag p aberta;
• Afinal de contas, não dá para ter um parágrafo dentro de outro!

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 36
 Tag Parágrafo
• Por padrão, os navegadores acrescentam algum espaço extra
(margem) entre dois parágrafos consecutivos;

• Forma mais adequada de usar:

<p>Conteúdo aqui.</p>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 37
 Exercício
• Vamos agora atualizar o documento da última aula
(biografia.html) da seguinte forma:
• Acima do parágrafo com a biografia, deve aparecer um título para a
página com o seu nome;
• Abaixo do referido parágrafo, teremos uma nova seção chamada
“Encontre-me”, na qual você deve colocar seu e-mail e nome no
Facebook.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 38
 Tag Quebra de Linha
• Ao inserir uma tag para quebra de linha (br) em uma página, “quebra-se”
a linha e inicia uma nova, mas sem iniciar um novo parágrafo;
• Assim, a quebra de linha não acrescenta um espaço entre parágrafos,
como ocorre com o uso da tag p;
• Como se trata somente de uma quebra de linha, não é possível aninhar
outras tags dentro dela;
• Forma mais adequada de usar:
<br>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 39
 Tag Quebra de Linha - exemplo
<h1>Cavalo de fogo</h1>
<p>No meu sonho eu ja vivi<br />
Um lindo conto infantil<br /></p>
<p>Tudo era magia,<br />
Era um mundo fora do meu<br />
E ao chegar desse sono acordei<br /></p>
<p>Foi quando correndo eu vi<br />
Um cavalo de fogo ali<br />
… </p>
Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 40
 Tag Linha Horizontal
• Permite a inserção de uma linha horizontal na página;

• Pode ser usada para separar visualmente conteúdos em uma

página;

• Forma mais adequada de usar:

<hr>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 41
 Tag Linha Horizontal - exemplo
<h1>Lista de plantas silvestres na Amazônia</h1>
<p>A lista de plantas silvestres da Amazônia inclui todas as espécies endêmicas da vegetação da
Amazônia. <br> Segundo Giacometti (1990), é estimada a existência de 800 espécies vegetais de
valor econômico ou social nesta floresta. Elas foram listadas abaixo de acordo com a família à
qual pertencem.</p>
<hr>
<p>Bromeliaceae Juss. é uma família de monocotiledôneas, que segundo a classificação
filogenética AGP III (2009) <br> pertence à ordem dos Poales, com plantas terrestres, rupícolas
ou, principalmente epífitas, possui 3.172 espécies, distribuídas em 58 gêneros.</p>
<hr>
<p>Chrysobalanaceae é uma família de plantas angiospérmicas (plantas com flor - divisão
Magnoliophyta), pertencente à ordem Malpighiales.</p>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 42
 Tag Hyperlink
• Usada para criar uma ligação (hyperlink) com outro documento
ou arquivo disponível na web;
• Também pode ser usada para disparar funções JavaScript!

• Ligação com outro documento:

<a href="http://www.google.com.br">Ir para o Google</a>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 43
 Tag Hyperlink
• Ligação com outra parte do mesmo documento:
<a href="#dicas">Visite a seção de dicas</a>
…
<h2 id="dicas">Seção de Dicas</h2>

• Ligação com outra parte em outro documento:

<a href="capitulo2.html#secao3">Ir para seção 3 do capítulo 2</a>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 44
 Tag Hyperlink - principais atributos
Atributo href:

• Especifica a URL da página ou arquivo alvo após o clique;

• Pode referir-se a outro documento, outra parte do documento atual ou

outra parte de outro documento;

• Mais importante de todos os atributos desta tag!

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 45
 Tag Hyperlink - principais atributos
Atributo href: (cont.)
Exemplos:
<a href="http://www.w3schools.com/tags/tag_a.asp">clique</a>
Abrirá a referida página
<a href="#main">clique</a>
Irá para a seção referida (elemento HTML com id="main")
<a href="https://www.w3schools.com/tags/tag_a.asp#main">clique</a>
Abrirá a referida página na seção indicada
<a href="mailto:[email protected]">enviar e-mail</a>
Abrirá o cliente de e-mail instalado com o destinatário já preenchido.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 46
 Tag Hyperlink - principais atributos
Atributo target:
• Especifica onde abrir o documento linkado;
• Valores mais comuns:
• _blank – abrirá em nova aba/janela;
• _parent – abrirá no “frame pai” (se hyperlink estiver dentro de frame);
• _self – abrirá na janela/frame atual;
• _top – abrirá ocupando toda a janela atual, mesmo se estiver em um
frame;
• nome_do_frame – abrirá na janela/aba/frame que tiver aquele nome.
Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 47
 Tag Hyperlink - principais atributos
Atributo target: (cont.)
Exemplo:
<a href="http://www.google.com.br" target= "_blank">visitar</a>
Abrirá a página em uma nova aba/janela.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 48
 Exercício
• Ainda no documento “biografia.html”, vamos incluir dois
hyperlinks:
• Um no endereço de e-mail para abri-lo em um cliente de e-mail;
• Outro no nome do Facebook para abrir sua página no Facebook.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 49
Tags para multimídia
Parte 04
 Sumário
• Imagem
• Áudio
• Vídeo

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 51
 Recordando...
• Qual o nome da tag para:
• Título de seção / cabeçalho?
• Parágrafo?
• Quebra de linha?
• Hyperlink?

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 52
 Tag Imagem
• Especifica as informações acerca de uma imagem a ser exibida no
documento;

• Formatos de imagem mais utilizados: jpg/jpeg, png, gif e bmp.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 53
 Tag Imagem – principais atributos
Atributo src:
• Especifica a URL da imagem a ser exibida;
• O atributo mais importante para a tag imagem.

Exemplos:
<img src="https://treinp.ao/wp-content/images/logotipo.png">
Especificando o caminho completo (absoluto) para a imagem
<img src="wp-content/images/logotipo.png">
Especificando o caminho relativo para a imagem

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 54
 Tag Imagem - principais atributos
Atributo alt:
• Especifica um texto alternativo para a imagem;
• Útil tanto para fins explicativos, de acessibilidade e otimização para motores de
busca.

Exemplo:
<img src="logotipo.png" alt="Logomarca do Centro">
Texto alternativo descrevendo a logomarca do website

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 55
 Tag Imagem - principais atributos
Atributos width e height:
• Especificam as dimensões em pixels da imagem (width=largura, height=altura);
• Se não forem especificadas, a imagem será exibida com 100% de seu tamanho. Se
o valor especificado for diferente do tamanho real da imagem, ela será
redimensionada.
Exemplo:
<img src="logotipo.png" width="300" height="300">
A imagem será redimensionada para 300x300

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 56
 Hyperlink com imagem
• Caso deseje que, ao clicar em uma imagem, o usuário seja
redirecionado para uma nova página, deve-se utilizar a tag <a> e
colocar a tag <img> como seu conteúdo.

Exemplo:
<a href="https://treinp.ao">
<img src="https://treinp.ao/logomarca.png">
</a>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 57
 Tag Áudio
• A tag áudio é empregada para a execução de arquivos de áudio em um
navegador;
• Essa tag suporta três formatos de arquivos diferentes: mp3, wav e ogg. Mas o
formato mp3 é o mais amplamente suportado pelos navegadores!

• Exemplo:
<audio src="http://www.w3schools.com/tags/horse.mp3" controls>
Seu navegador não suporta a tag audio.
</audio>
Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 58
 Tag Áudio – principais atributos
• autoplay – especifica que o áudio deve ser reproduzido assim que
estiver pronto;
• controls – especifica que os controles do áudio deveriam ser
exibidos;
• loop – especifica que o áudio deve ser executado “em loop”;
• src – especifica a URL do arquivo de áudio.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 59
 Tag Vídeo
• De forma análoga à tag áudio, a tag vídeo é usada para a reprodução de
vídeos;
• Essa tag suporta três formatos de arquivo diferentes: MP4, WebM, Ogg.
Entretanto, MP4 é o formato mais amplamente suportado pelos
navegadores;
• Exemplo:
<video src="https://www.w3schools.com/tags/movie.mp4" controls>
Seu navegador não suporta a tag vídeo.
</video>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 60
 Tag Vídeo – principais atributos
• autoplay – especifica que o vídeo deve ser reproduzido assim
que estiver pronto;
• controls – especifica que os controles do vídeo deveriam ser
exibidos;
• height – especifica a altura do vídeo em pixels;
• loop – especifica que o vídeo deve ser executado “em loop”;
• src – especifica a URL do arquivo de vídeo.
• width – especifica a largura do player de vídeo em pixels.
Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 61
 Exercício
• Atualize o arquivo “biografia.html” para conter as seguintes informações:
• Uma foto sua, se não tiver:
• Homem: https://treinp.ao/files/cs1/avatar-homem.jpg
• Mulher: https://treinp.ao/files/cs1/avatar-mulher.jpg
• Um vídeo seu, se não tiver:
• https://www.w3schools.com/tags/movie.mp4
• Uma música de fundo, em loop:
• https://treinp.ao/files/cs1/musica01.mp3
• https://treinp.ao/files/cs1/musica02.mp3
• https://treinp.ao/files/cs1/musica03.mp3

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 62
Tags para Formatação
Parte 05
 Sumário
• Tags para negrito, itálico e sublinhado

• Saiba mais
• Tag para texto pré-formatado
• Tags para subscrito e sobrescrito
• Tags para marcado, deletado e inserido

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 64
 Recordando...
• Como proceder para exibir/executar os seguintes arquivos em
uma página web:
• figura.jpg
• musica.mp3
• filme.mp4

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 65
 Tags para negrito
• É possível aplicar negrito, itálico ou sublinhado tanto por meio de
tags quanto por meio de definição de CSS;
• Quanto às tags para negrito, pode-se utilizar a tag <b> ou a tag
<strong>;
• <b>Texto</b> - texto é destacado em negrito, mas não é dada ênfase
ao seu conteúdo;
• <strong>Texto</strong> - texto é destacado em negrito e dada ênfase
ao seu conteúdo (útil para motores de busca).

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 66
 Exercício
• Abra o arquivo “biografia.html” e destaque em negrito as palavras mais
importantes.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 67
 Tags para itálico
• Quanto às tags para itálico, pode-se utilizar a tag <i> ou a tag
<em>;
• <i>Texto</i> - texto é destacado em itálico, mas não é dada ênfase ao
seu conteúdo;
• <em>Texto</em> - texto é destacado em itálico e dada ênfase ao seu
conteúdo (útil para motores de busca).

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 68
 Exercício
• Ainda no arquivo “biografia.html”, inclua abaixo do parágrafo
com sua descrição uma citação que goste muito (em itálico) e o
nome do autor. Exemplo:
“Só sei que nada sei.” ~Sócrates

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 69
 Tag para sublinhado
• Quanto à tag para sublinhado, pode-se utilizar a tag <u>;
• <u>Texto</u> - texto é destacado com um sublinhado.
• Entretanto, não se recomenda seu uso para evitar confusão entre texto
sublinhado e hyperlinks;
• Recomenda-se seu uso apenas para destacar textos estilisticamente
diferentes do texto normal, como palavras escritas incorretamente
(propositalmente!) ou nomes próprios em chinês;
• Ex: <p>A palavra <u>estrambólico</u> na verdade se escreve
estrambótico.</p>
Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 70
 Tags para texto pré-formatado
• Ao usar a tag p ou mesmo escrevendo livremente no corpo do
documento, o navegador ignorará quebras de linhas e espaços
múltiplos presentes no texto.
Código HTML
<p> No navegador
Era uma casa Era uma casa Muito engraçada Não tinha
Muito engraçada teto Não tinha nada
Não tinha teto
Não tinha nada
</p>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 71
 Tags para texto pré-formatado
• Para manter a mesma formatação quanto a espaços e quebras de
linha que apresente no código, pode-se usar a tag <pre>:

Código HTML No navegador

<pre>
Era uma casa Era uma casa
Muito engraçada Muito engraçada
Não tinha teto Não tinha teto
Não tinha nada Não tinha nada
</pre>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 72
 Tags para subscrito e sobrescrito
• Caso precise representar letras ou números em subscrito (como
em H2O) ou sobrescrito (como em 30 m3), é possível fazer isso
por meio das seguintes tags:
• _Texto - O texto dentro da tag ficará subscrito.
H₂O
• ^Texto - O texto dentro da tag ficará sobrescrito.
30 m³

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 73
 Exercício
• Crie um novo documento HTML, contendo as seguintes frases:
A fórmula da água é H2O, já o ozônio é O3.
Tenho uma casa de 90 m2.
1000 litros de água ocupam 1 m3.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 74
 Tags para marcado, deletado e inserido
• Às vezes, queremos destacar com maior ênfase visual (tag
<mark>) ou deixar claro que um trecho do texto foi removido
(tag <del>) ou inserido (tag <ins>). Abaixo, exemplos de como
usar tais tags:
• HTML <mark>Marked</mark> Formatting

• HTML <del>Deleted</del> Formatting

• HTML <ins>Inserted</ins> Formatting

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 75
Tabelas, Listas e Iframes
Parte 06
 Sumário
• Tags para tabelas
• Tags para listas
• Tags para iframes

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 77
 Recordando...
• Qual tag posso usar para:
• Negrito?
• Itálico?
• Sublinhado?

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 78
 Tabelas
• Podemos exibir dados em formato tabular (linhas e colunas). Para tal,
precisamos conhecer as tags para criar uma tabela, suas linhas e células,
que são:
• <table> – define a tabela em si. É composta por um conjunto de linhas;
• <tr> – define cada linha, isto é, conjunto de células dispostas horizontalmente;
• <td> - define cada célula de uma linha, dentro da qual podemos colocar a
informação desejada;
• <th> - um “tipo especial” da tag td, usada para identificar as células que fazem
parte do cabeçalho da tabela.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 79
 Tabelas
• Por padrão, uma tabela em HTML aparecerá sem as bordas.
Aprenderemos mais tarde como definir suas bordas em CSS 3,
mas por agora usaremos o antigo atributo border para defini-la,
assim:
<table border="1">

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 80
 Tabelas - exemplos
<table border="1">
<tr>
<td>Aluno</td><td>Nota</td>
</tr> Aluno Nota
<tr> Ana 15,0
<td>Ana</td><td>15,0</td>
António 12,0
</tr>
<tr>
<td>António</td><td>12,0</td>
</tr>
</table>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 81
 Tabelas - exemplos
<table border="1">
<tr>
<th>Aluno</th><th>Nota</th>
</tr>
Aluno Nota
<tr>
<td>Ana</td><td>15,0</td> Ana 15,0
</tr>
<tr>
António 12,0
<td>António</td><td>12,0</td>
</tr>
</table>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 82
 Tabelas – rowspan e colspan
• Em certas situações, precisamos expandir uma célula para que a mesma
ocupa mais de uma linha ou coluna. Nesses casos, podemos utilizar o
atributo da célula (tag td) colspan para definir o número de colunas que ela
ocupará ou o atributo rowspan para definir o número de linhas.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 83
 Tabelas – exemplo com colspan
<table border="1">
<tr>
<th>Aluno</th><th>Nota</th>
</tr> Aluno Nota
<tr>
<td colspan="2">Ana</td>
Ana
</tr> António 12,0
<tr>
<td>António</td><td>12,0</td>
</tr>
</table>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 84
 Tabelas – exemplo com rowspan
<table border="1">
<tr>
<th>Aluno</th><th>Nota</th>
</tr>
<tr>
Aluno Nota
<td rowspan="2">Ana</td> Ana 15,0
<td>15,0</td>
</tr> 12,0
<tr>
<td>12,0</td>
</tr>
</table>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 85
 Tabelas - caption
• Além disso, é possível definir um rótulo a aparecer no topo da
tabela, junto à mesma, especificando uma tag caption logo após
abrir a tag table. Exemplo:
<table border="1"> Resultado 1º Trimestre
<caption>Resultado 1º Trimestre</caption>
Aluno Nota
<tr><th>Aluno</th><th>Nota</th></tr>
Ana 15,0
<tr><td>Ana</td><td>15,0</td></tr>
<tr><td>António</td><td>12,0</td></tr>
António 12,0
</table>
Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 86
 Exercício
• Crie um documento HTML contendo a seguinte tabela:
Resultados do 1º Trimestre

Resultados
Aluno Situação Nota 1 Nota 2
Ana Matriculado 15,0 11,0
António Matriculado 12,0 13,5
José Anulado

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 87
 Exercício
• Crie um documento HTML contendo a seguinte tabela:
Resultados do 1º Trimestre

Português Matemática
Situação Aluno Nota 1 Nota 2 Nota 1 Nota 2
Matriculado Ana 15,0 11,0 8,5 11
António 12,0 13,5 9,5 10
Trancado José

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 88
 Listas
• Se desejarmos exibir vários itens organizados em uma lista,
podemos fazer isso por meio das tags <ul> ou <ol> e <li>:
• <ul> - Descreve uma lista não ordenada, isto é, que usará símbolos
como marcadores e não números;
• <ol> - Descreve uma lista ordenada, isto é, que usará números em
ordem crescente para marcar cada item da lista;
• <li> - Esta tag representa cada um dos itens de uma lista e é a mesma
para ambos os tipos de lista.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 89
 Listas - exemplos
Código HTML No navegador
<ul> • Tomate;
<li>Tomate;</li> • Arroz;
<li>Arroz;</li> • Feijão.
<li>Feijão.</li>
</ul>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 90
 Listas - exemplos
Código HTML No navegador
<ol> 1. Tomate;
<li>Tomate;</li> 2. Arroz;
<li>Arroz;</li> 3. Feijão.
<li>Feijão.</li>
</ol>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 91
 Listas ordenadas – alterando os marcadores
• No caso de listas ordenadas, pode-se utilizar o atributo type da
tag <ol> para definir como os itens da lista devem ser numerados.
Type pode assumir os seguintes valores:
• “1” – Serão usados números (comportamento padrão);
• “A” – Serão usadas letras maiúsculas;
• “a” – Serão usadas letras minúsculas;
• “I” – Serão usados algarismos romanos maiúsculos;
• “i” – Serão usados algarismos romanos minúsculos.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 92
 Listas ordenadas - exemplo
Código HTML No navegador
<ol type=“A”> A. Tomate;
<li>Tomate;</li> B. Arroz;
<li>Arroz;</li> C. Feijão;
<li>Feijão;</li>
</ol>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 93
 Exercício
• Escreva o código HTML para a seguinte lista:

1. Plantas:
a. Palma;
b. Comigo-ninguém-pode;
2. Animais:
i. Curió;
ii. Sabiá;
iii. Macaco-prego.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 94
 Iframes
• Um iframe é utilizado quando precisamos exibir o conteúdo de
outra página web dentro de uma página web;
• Por exemplo, para exibir a página do motor de busca do Google ou um
vídeo do YouTube em uma área de meu website.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 95
 Iframes
• Exemplos:
• <iframe src=“http://www.google.com.br”>Seu browser não suporta
iframes</iframe>
• <iframe width="560" height="315"
src="https://www.youtube.com/embed/7CfiS_U9V9s"
frameborder="0" allowfullscreen></iframe>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 96
 Iframes - atributos
• src – especifica o endereço do documento a incorporar no
mesmo;
• name – especifica um nome;
• height – especifica (em pixels) a sua altura;
• width – especifica (em pixels) a sua largura.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 97
 Exercício
• Crie um documento chamado “animais.html”, contendo:
• Título da página: Animais em extinção;
• Dois ou três parágrafos contendo informações sobre animais em
extinção;
• Destaque duas ou três palavras importantes do texto em negrito;
• Uma lista não-ordenada contendo o nome de dez animais em extinção;
• Um vídeo do YouTube sobre animais em extinção (você usará a tag
iframe).

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 98
 Exercício
• Crie uma página chamada “manual-do-investidor.html”,
contendo:
• Título da página: Manual do Investidor;
(continua...)

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 99
 Exercício
(continuando...)
• Quatro hyperlinks que devem “abrir” em um iframe abaixo:
• Gastar, poupar ou investir?
https://christianosantos.com/files/cs1/manual-do-investidor/pagina-01.html
• Renda fixa ou variável?
https://christianosantos.com/files/cs1/manual-do-investidor/pagina-02.html
• Conhecendo o seu perfil de investidor
https://christianosantos.com/files/cs1/manual-do-investidor/pagina-03.html
• Planejamento financeiro
https://christianosantos.com/files/cs1/manual-do-investidor/pagina-04.html
(continua...)

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 100
 Exercício
(continuando...)
• Iframe (1000px de largura, 500px de altura) que exibirá
inicialmente a página do primeiro hyperlink.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 101
Tags para formulários
Parte 07
 Sumário
• Tags form, legend e fieldset
• Principais atributos

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 103
 Recordando...
• Quais as tags usadas para criar:
• Uma tabela?
• Uma lista não-ordenada?
• Uma lista ordenada?
• Para que serve a tag iframe?

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 104
 Tag form
• Um formulário HTML é usado para receber entrada de
dados do usuário;
• Exemplos de formulário:
• Formulário para login;
• Caixa de busca;
• Página de contato;
• Subscrição em newsletter;
• Cadastro de produtos.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 105
 Tag form
• Sintaxe básica de um formulário:

<form action="pagina-para-envio.jsp">
Aqui vão os elementos HTML que o usuário preencherá!
</form>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 106
 Tag form - exemplos
• Formulário para login
<form action="login.jsp">
Nome do usuário: <input type="text" name="usuario"><br>
Senha: <input type="password" name="senha"><br>
<input type="submit" value="Login">
</form>

Obs: Para testar qualquer exemplo de formulário, defina

action="https://www.w3schools.com/action_page.php"

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 107
 Tag form - exemplos
• Caixa de busca
<form action="buscar.jsp">
<input type="text" name="busca" placeholder="Digite um filme">
<input type="submit" value="Procurar">
</form>

Digite um filme

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 108
 Tag form - exemplos
• Página de contato
<form action="contato.jsp">
Nome: <input type="text" name="nome"><br>
E-mail: <input type="text" name="email"><br>
Assunto: <input type="text" name="assunto"><br>
Mensagem: <textarea name="mensagem"></textarea><br>
<input type="submit" value="Enviar">
</form>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 109
 Tag form - exemplos
• Subscrição em newsletter
<form action="subscricao.jsp">
Nome: <input type="text" name="nome"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit" value="Assinar">
</form>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 110
 Tag form – tags fieldset e legend
• A tag fieldset pode ser usada para agrupar todos os elementos
relacionados a um formulário;
• Visualmente, ela criará uma borda em torno de todo o agrupamento.
• A tag legend pode ser usada dentro de uma tag fieldset para dar
um rótulo ao agrupamento.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 111
 Tag form – tags fieldset e legend - exemplos
• Formulário de login
<form action="login.jsp">
<fieldset>
<legend>Login</legend>
Nome do usuário: <input type="text" name="usuário"><br>
Senha: <input type="password" name="senha"><br>
<input type="submit" value="Login">
</fieldset>
</form>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 112
 Tag form – tags fieldset e legend - exemplos
• Cadastro de produtos
<form action="cadastrar-produto.jsp">
<fieldset>
<legend>Cadastro de produto</legend>
Nome do produto: <input type="text" name="nome"><br>
Código de barras: <input type="text" name="codigo"><br>
Preço: <input type="text" name="preco"><br>
Seção: <select name="secao">
<option value="hortifruti">Hortifrúti</option>
<option value="carnes">Carnes</option>
</select><br>
<input type="submit" value="Cadastrar">
</fieldset>
</form>
Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 113
 Tag form – principais atributos
Action
Especifica o endereço URL onde submeter os dados do formulário.

Exemplo:
<form action="buscar.jsp">
<input type="text" name="busca">
<input type="submit" value="Procurar">
</form>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 114
 Tag form – principais atributos
Method
Especifica o método HTTP usado quando submetendo o formulário.
Valores: GET (valor padrão) ou POST.

Exemplo:
<form action="buscar.jsp" method="POST">
<input type="text" name="busca">
<input type="submit" value="Procurar">
</form>
Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 115
 Tag form – principais atributos
Target
Especifica a janela/frame alvo para abrir a página descrita em action.
Valores: _blank, _parent, _self, _top, nome_do_frame.

Exemplo:
<form action="buscar.jsp" target="_blank">
<input type="text" name="busca">
<input type="submit" value="Procurar">
</form>
Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 116
 Tag form – principais atributos
Enctype
Especifica o tipo de codificação dos dados submetidos.
Valores:
• application/x-www-form-urlencoded (padrão);
• multipart/form-data;
• text/plain.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 117
 Exercício
• Crie três páginas HTML:
• Uma página para login com os campos “nome de usuário” e
“senha” (login.html);
• Uma página para contato com os campos “nome”, “e-mail”,
“assunto” e “mensagem” (contato.html);
• Uma página para solicitação de filme com os campos
“nome” e “ano” (solicitacao.html).

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 118
Tags Input, TextArea e
Select
Parte 08
 Sumário
• Tag Input e seus tipos
• Tag TextArea
• Tag Select

• Saiba mais
• Tag input com datalist

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 120
 Recordando...
• Para que servem os atributos da tag form:
• action
• method
• target
• enctype

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 121
 Tag input
• Trata-se de uma tag para entrada (input) de dados do
usuário;
• Uma das tags mais importantes e versáteis em um
formulário. A depender de seu atributo type, ela poderá
assumir vários papéis.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 122
 Tag input - exemplos
<input type="text" name="usuario" value="Mickey">

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 123
 Tag input - exemplos
<input type="password" name="senha" value="Mouse">

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 124
 Tag input - exemplos
<input type="date" name="dataEntrada">

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 125
 Tag input - exemplos
<input type="email" name="emailPrincipal" value="[email protected]">

Obs: Uma vantagem de usar um input do tipo email é que, ao

clicar no botão para submissão, o mesmo verifica automaticamente
se o conteúdo corresponde a um endereço de e-mail válido.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 126
 Tag input - exemplos
<input type="color" name="corDeFundo">

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 127
 Tag input - exemplos
<input type="radio" name="genero" value="homem" checked>Homem<br>
<input type="radio" name="genero" value="mulher">Mulher<br>
<input type="radio" name="genero" value="outro">Outro<br>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 128
 Tag input - exemplos
<input type="checkbox" name="preferencia" value="homem" >Homem<br>
<input type="checkbox" name="preferencia" value="mulher">Mulher<br>
<input type="checkbox" name="preferencia" value="outro">Outro<br>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 129
 Tag input - exemplos
<input type="hidden" name="id" value="17">

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 130
 Tag input - exemplos
<input type="file" name="arquivo">
<input type="file" name="arquivo" accept=".pdf">
<input type="file" name="arquivo" accept="image/*">

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 131
 Tag input - exemplos
<input type="submit" name="btnEnviar" value="Enviar">

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 132
 Tag input – atributos úteis
value – informação (valor) a ser exibida dentro do campo;

maxlength – limita a quantidade máxima de caracteres que pode

ser digitada;

required – informa que o preenchimento do campo é obrigatório.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 133
 Tag input – outros tipos
• Todos os valores possíveis para type: button, checkbox, color, date,
datetime, datetime-local, email, file, hidden, image, month, number,
password, radio, range, reset, search, submit, tel, text, time, url,
week;

• Mais informações sobre tipos e atributos de input:

https://www.w3schools.com/tags/tag_input.asp

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 134
 Tag textarea
• Trata-se de uma tag para entrada de dados em formato de texto
(aceita, inclusive, quebras de linha).

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 135
 Tag textarea
• Exemplo
<textarea rows="4" cols="50">Este é o conteúdo de um textarea
com 4 linhas de altura e 50 caracteres de largura.
Esta foi uma quebra de linha.</textarea>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 136
 Tag select
• É usada para construir uma lista com várias opções, das quais o
usuário poderá escolher uma ou mais;
• Cada elemento presente na lista será criado por meio de uma tag
option.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 137
 Tag select
• Exemplo de lista para selecionar um valor:
<select name="secao">
<option value="hortifruti">Hortifrúti</option>
<option value="carnes">Carnes</option>
<option value="limpeza">Material de limpeza</option>
</select>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 138
 Tag select
• Exemplo de lista para selecionar múltiplos valores (linhas):
<select name="secao" multiple>
<option value="hortifruti">Hortifrúti</option>
<option value="carnes">Carnes</option>
<option value="limpeza">Material de limpeza</option>
</select>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 139
 Exercício
• Crie uma página para cadastro de usuário (cadastro.html) contendo os
seguintes campos:
• Nome;
• E-mail;
• Senha;
• Data de nascimento;
• Sexo;
• Estado.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 140
 Tag input com datalist
• Pode-se usar uma tag datalist associada a uma tag input para
oferecer um conjunto de opções pré-definidas para o
preenchimento;
• Nesse caso, o atributo “list” da tag input deve corresponder ao
atributo “id” do datalist, a fim de fazer a associação entre eles.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 141
 Tag input com datalist
• Exemplo
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 142
Outras Tags Úteis
Parte 09
 Sumário
• Tags Div, Span e Label
• Tags não-semânticas x tags semânticas
• Novas tags semânticas

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 144
 Recordando...
• Quando usar a tag textarea em vez de um input?
• Cite três tipos da tag input;
• Para que serve a tag select?

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 145
 Tag div
• A tag div define uma seção em um documento, podendo conter quaisquer outras
tags e/ou conteúdo textual;
• Pode ser formatada por meio de CSS, permitindo assim sua formatação e de seus
elementos bem como o uso de tal tag para definição de layout de páginas web
(tableless);
• Exemplo:
<div>
<h3>Este é um cabeçalho</h3>
<p>Este é um parágrafo.</p>
</div>
Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 146
 Tag div – exemplo (a)
<div>
<h3>Esportes</h3>
<p>Notícia 1</p><p>Notícia 2</p><p>Notícia 3</p>
</div>
<div>
<h3>Culinária</h3>
<p>Notícia 1</p><p>Notícia 2</p><p>Notícia 3</p>
</div>
<div>
<h3>Carros</h3>
<p>Notícia 1</p><p>Notícia 2</p><p>Notícia 3</p>
</div>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 147
 Tag div – exemplo (b)
<div style="background-color:#FF0000;">
<h3>Esportes</h3>
<p>Notícia 1</p><p>Notícia 2</p><p>Notícia 3</p>
</div>
<div style="background-color:#00FF00;">
<h3>Culinária</h3>
<p>Notícia 1</p><p>Notícia 2</p><p>Notícia 3</p>
</div>
<div style="background-color:#0000FF;">
<h3>Carros</h3>
<p>Notícia 1</p><p>Notícia 2</p><p>Notícia 3</p>
</div>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 148
 Tag div – exemplo (c)
<div style="background-color:#FF0000;width:200px;">
<h3>Esportes</h3>
<p>Notícia 1</p><p>Notícia 2</p><p>Notícia 3</p>
</div>
<div style="background-color:#00FF00; width:200px;">
<h3>Culinária</h3>
<p>Notícia 1</p><p>Notícia 2</p><p>Notícia 3</p>
</div>
<div style="background-color:#0000FF; width:200px;">
<h3>Carros</h3>
<p>Notícia 1</p><p>Notícia 2</p><p>Notícia 3</p>
</div>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 149
 Tag div – exemplo (d)
<div style="background-color:#FF0000;
width:200px;float:left;">
<h3>Esportes</h3>
<p>Notícia 1</p><p>Notícia 2</p><p>Notícia 3</p>
</div>
<div style="background-color:#00FF00; width:200px; float:left;">
<h3>Culinária</h3>
<p>Notícia 1</p><p>Notícia 2</p><p>Notícia 3</p>
</div>
<div style="background-color:#0000FF; width:200px; float:left;">
<h3>Carros</h3>
<p>Notícia 1</p><p>Notícia 2</p><p>Notícia 3</p>
</div>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 150
 Tag span
• A tag span é usada para agrupar elementos inline (“em linha”)
em um documento;
• Exemplo: <p>Minha mãe tem olhos <span>azuis</span>.</p>
• Pode ser utilizada para aplicar estilo com CSS, incluir um
identificador (a ser usado como “âncora interna” no documento)
ou para manipulação via JavaScript.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 151
 Tag label
• Pode-se usar a tag label para definir rótulos para os vários
elementos HTML estudados nesta seção;
• Algumas vantagens de utilizar uma tag label em vez de
simplesmente escrever antes do elemento:
• Possibilidade de aplicar estilo CSS aos labels;
• Possibilidade de acesso aos labels por meio de seu identificador;
• Possibilidade de manipulação da tag label a partir de script.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 152
 Tag label
• Exemplo
<label>Usuário</label> <input type="text" name="usuario">

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 153
 Tags semânticas
• Tags como div e span, apesar de servirem para organizar o
conteúdo em blocos ou “em linha”, não explicam muito do que se
trata o conteúdo presente nas mesmas;
• Já tags como form, table e img conseguem definir claramente o
tipo de conteúdo que carregam;
• A HTML5 introduz um novo conjunto de tags que, apesar de não
serem obrigatórias, permitem uma melhor diferenciação quanto às
diversas seções e conteúdos presentes na página.

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 154
 Novas tags semânticas
• <article> • <main>
• <aside> • <mark>
• <details> • <nav>
• <figure> • <section>
• <figcaption> • <summary>
• <footer> • <time>
• <header>

Programação Web | HTML | Professor Eng.º Sungo Afonso | Email: [email protected] 11/02/2020 155