2-HTML 5
Programação para a
Web I Prof. Bruno
Silvério Costa
1-Introdução
• HTML (HyperText Markup Language – Linguagem de
Marcação de Hipertexto) é a principal linguagem para a
criação de páginas Web, criada em 1990;
• Hipertexto é todo texto inserido em documento Web,
permitindo a interligação de seu conteúdo com o conteúdo de
outros textos;
• Com ela é possível construir documentos com títulos,
parágrafos, listas, links, tabelas, formulários, incorporar vídeos e
imagens.
• Resumidamente, a HTML é a linguagem padrão de
formatação para a exibição de documentos oriundos da Web
nos dispositivos que assumam o papel de cliente;
1-Introdução
• Versões da HTML:
• HTML 2.0 (1995) - estabeleceu as bases da linguagem. A primeira versão oficial que introduziu
elementos fundamentais como títulos, links, listas e formulários;
• HTML 3.2 (1997) - Trouxe novas funcionalidades, como tabelas, frames e applets, e corrigiu
problemas de compatibilidade;
• HTML 4.01 (1999) - que introduziu o suporte a CSS e scripts, encorajando aos desenvolvedores a
separar a parte funcional do layout;
• XHTML 1.0 (2000) - adaptação do HTML para a sintaxe do XML, tornando a linguagem mais rigorosa e
coesa; • HTML 5 (2014) - A versão mais recente, projetada para a web moderna, com novos elementos
semânticos como <video>, <audio> e <nav>, além de APIs para funcionalidades avançadas, melhorando
a experiência para usuários e desenvolvedores;
• HTML 5.1 e 5.2 (2016-2022) - trouxeram refinamentos e adições à especificação. Elementos e
atributos foram ajustados para melhorar a semântica e a acessibilidade. APIs foram expandidas para
oferecer mais controle aos desenvolvedores na criação de experiências interativas e responsivas.
1-Introdução
• A linguagem HTML é escrita na forma de tags delimitadas pelos sinais
< > (início da tag) e
< /> (fim da tag), que identificam a função e o conteúdo de cada
elemento da linguagem.
• Os nomes das tags foram escolhidos levando-se em conta o seu
objetivo. • Exemplos:
• <p> Estas são tags delimitadoras de parágrafo </p>
• <title> Agora, as tags delimitadoras de título do documento HTML </title>
• <html> Tags que identificam o começo e o fim do documento HTML </html>
2- HTML 5
• Recomendada como padrão em 28 de outubro de 2014 pelo W3C;
• Desenvolvida a partir de 2004 pelo grupo WHATWG (Web
Hypertext Application Technology Working Group) formado
pelas empresas Opera, Mozilla e Apple;
• Seu reconhecimento pelo W3C só ocorreu tardiamente, em 2006;
• Propõe o enriquecimento do conteúdo semântico dos documentos
da web, além de eliminar o uso de plug-ins (como Flash,
SilverLight)
• A estrutura básica da linguagem HTML5 continua sendo a mesma
das versões anteriores, com exceção na escrita do Doctype que foi
simplificada;
2- HTML5
• A estrutura básica de um documento HTML5 é composta por:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Título ou nome do documento que será mostrado
na aba do navegador</title>
</head>
<body>
conteúdo do documento...
</body>
</html>
2- HTML 5
• A W3C disponibiliza um validador da estrutura de um
documento HTML, acessível por [Link]
• A validação de HTML 5 garante a conformidade com padrões
web, assegurando interoperabilidade, acessibilidade e
renderização consistente entre navegadores. Ela identifica
erros de sintaxe (como tags não fechadas) e melhora a
manutenção do código, prevenindo bugs e facilitando a
renderização rápida.
3-Elementos em Bloco (block) e em
Linha (inline)
• Um navegador renderiza os elementos HTML em dois tipos
de conteúdos:
• Blocos;
• Linhas.
• Um elemento em bloco ocupa uma linha inteira ou mais da
página e descreve um agrupamento que pode ser visível ou
não.
• Pode conter outros elementos em bloco dentro dele e
quaisquer elementos em linha.
• Exemplos: <p>, <ul>, <blockquote>, <table>, <div>,
<header>, <nav>, <article>, <footer>, <section>, <aside>,
<hgroup>.
3-Elementos em Bloco (block) e em
Linha (inline)
• Um elemento em linha geralmente marca apenas o espaço que
o elemento necessita Exemplos de elementos em linha: <a>,
<strong>, <em>, <span>, <img>, <b>, <abbr>.
4-Cabeçalho <head> - metadados
• O elemento head oferece informações ao navegador e
aos mecanismos de busca;
• No escopo deste elemento podemos inserir outros
elementos, que são: title, meta, script, style, link e base;
4-Cabeçalho <head> - metadados
4-Cabeçalho <head> - metadados
4-Cabeçalho <head> - metadados
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<meta name="author" content="Prof Beltrano" />
<meta name="description" content=“Página de teste HTML5" />
<meta name="keywords" content="HTML5, Teste" /> <title>Elementos
head do HTML5</title>
</head>
<body>
<h1>Elementos head do HTML5 para demonstração </h1>
<p> Exemplo com: title, meta</p>
<p> Verifique que os metadados inseridos não aparecem na execução
</p>
</body>
</html>
4-Cabeçalho <head> - metadados
JavaScript
4-Cabeçalho <head> - metadados CSS e
comentário
5-Corpo <body>
• O elemento body contem as informações que serão exibidas
ao usuário pelo navegador;
• Essas informações podem aparecer na forma de textos,
listas, links, tabelas, imagens e objetos incorporados;
• A seguir, serão apresentados os elementos pertencentes
ao corpo (body) do documento:
5.1-Títulos
• <h1> – título primário de um documento;
• É utilizado por mecanismos de busca;
• Recomenda-se que apenas um título h1 deva ser inserido por
página. • <h2> - <h6> – subtítulos
5.1-Títulos
5.2-Quebra de textos, espaços em
branco e outros elementos
5.2-Quebra de textos, espaços em
branco e outros elementos
5.3-Listas
• Há basicamente três tipos de listas em HTML :
• Listas ordenadas: exibição de uma lista com itens ordenados numérica
ou alfabeticamente;
<ol>
<li>
</ol>
Listas não ordenadas: exibição de itens de maneira sequencial; separação de
itens através de caractere em forma de bola, quadrado etc.;
<ul>
<li>
</ul>
• Listas de descrição: utilizadas para descrever termos:
<dl>
<dt>
<dd>
</dl>
5.3-Listas
5.4-Links
<body>
<h1> Estudo para Uso de Links</h1>
<h2>Listas do Exemplo Anterior</h2>
<ul>
<!-- 3 links relativos para a pasta chamada conteudo-->
<li><a href=".\conteudo\[Link]">Lista
ordenada</a></li>
<li><a href=".\conteudo\nao_ordenada.html">Lista não
ordenada</a></li>
<li><a href=".\conteudo\[Link]">Lista de
descrição</a></li>
<!-- 1 link absoluto -->
<li><a href="[Link]
saber mais</a></li>
</ul>
</body>
5.5-Links relativos (mesma página)
<ul>
<!-- observe o uso do caractere # -->
<li><a href="#Info1">Informática</a></li>
<li><a href="#Computacao">Ciência da computação</a></li>
</ul>
...
<a name="Info1" title="Definição de informática">
<h2>Informática</h2> </a>
...
<a name="Computacao" title="Definição de ciência da
computação"> <h2>Ciência da Computação</h2> </a>
Exercício
• Crie um pequeno projeto, formado por uma estrutura de 5
arquivos HTML 5. Desses arquivos, um deve ser de índice
e os disponibilizar conteúdos para a leitura;
• Cada arquivo de conteúdo deve possuir um sumário local
construído através de uma lista de descrição, apontando para
a localização no texto de cada tema tratado.
5.6-Tabelas
• Uma tabela é uma representação tabular e organizada
de determinados dados.
• Elementos que compõem uma tabela (<table>)são:
5.6-Tabelas
5.6-Tabelas </tr>
</table>
<h4>Uma coluna:</h4>
<table>
<h4>Uma linha e três
<tr>
colunas:</h4>
<td>100</td>
<table> <td>300</td>
<tr> </tr>
<td>100</td> </table>
<td>200</td>
5.7-Imagens
• O elemento <img> permite exibir imagens em uma página
web; • Os formatos normalmente utilizados são GIF, JPEG,
PNG;
• Atributos que compõem uma imagem <img> são
descritos abaixo:
5.7-Imagens
5.7-Imagens
<img src=".\imagens\[Link]" alt="Flor
Laranja">
<img src=".\imagens\[Link]" alt="Flor Laranja"
height="120" width="140">
Exercícios
Desconsiderando aspectos especiais de formatação, construa
em HTML uma versão para a página exibida na imagem abaixo:
5.8-Quebra de linha <BR/>
• A tag <br/> produz uma quebra de linha no
documento, permitindo criar espaçamentos verticais
para a devida formatação.
<p> Este é um teste de quebra de linha
</p> <br/>
<br/>
<p> Dois parágrafos depois </p>
5.9-Formulários
• Formulários são componentes que permitem o envio de
informações através da rede diretamente a um script hospedado no
servidor Web. • Formulário com componentes input text:
<form method=“post” action=“/[Link]”>
<label for=“fname”>Primeiro nome:</label><br/>
<input type=“text” id=“fname” name=“fname”/><br/>
<label for=“lname”>Sobrenome:</label><br/>
<input type=“text” id=“lname” name=“lname”/><br/><br/>
<input type="submit" value="Enviar"/>
</form>
5.9-Formulários
5.9-Formulários
• Aqui estão os diferentes tipos de entrada que você pode usar em HTML:
<input
<input type="button"> type="password">
<input <input type="radio">
type="checkbox"> <input type="range">
<input type="color"> <input type="reset">
<input type="date"> <input type="search">
<input <input type="submit">
type="datetime-local"> <input type="tel">
<input type="email"> <input type="text">
<input type="file"> <input
<input type="hidden"> type="time">
<input type="image"> <input type="url">
<input type="month"> <input type="week">
<input type="number">
5.9-Formulários
• Formulário com componentes select:
<form action="/action_page.php"> <label
for="cars">Choose a car:</label> <select
id="cars" name="cars"> <option
value="volvo">Volvo</option> <option
value="saab">Saab</option> <option
value="fiat">Fiat</option> <option
value="audi">Audi</option> </select>
<input type="submit">
</form>
5.9-Formulários
5.9-Formulários
• Formulário com áreas para texto:
<form action="/action_page.php">
<textarea name="message" rows="10" cols="30">The cat
was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>
5.9-Formulários
5.9-Formulários
• Permite consulta em um conjunto de dados:
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
5.9-Formulários
5.9-Formulários
• O elemento <output> representa o resultado de um cálculo (como um realizado por
um script):
<form action="/action_page.php“
oninput="[Link]=parseInt([Link])+parseInt([Link])">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
5.9-Formulários
5.9-Formulários
• Os botões de opção permitem que um usuário selecione apenas uma de um número
limitado de opções:
<form action="/action_page.php">
<p>Please select your favorite Web language:</p>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br/>
<input type="submit" value="Submit">
</form>
5.9-Formulários
5.9-Formulários
• Permite múltipla escolha dentre as opções disponíveis no formulário:
<h1>Show Checkboxes</h1>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1"
value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
5.9-Formulários
5.10 - <DIV>
• Div é uma tag que pode ser utilizada para criar seções em
um documento html, encapsulando blocos que possibilitam
a atribuição de características em lote aos elementos;
• Muito utilizada para a criação de layouts
tableless; • Sem um estilo associado, as divs não
são visíveis.
<div>
<p>Elementos internos</p>
<img src=“[Link]” alt=“imagem
exemplo”/> </div>
5.11-Linha Horizontal <HR>
• Permite inserir uma linha horizontal no meio de um texto:
<p> teste de parágrafo nonono nonono nonono nonono
nonono nonono nonono nonono nonono nonono nonono nonono
nonono nonono nonono nonono nonono nonono nonono nonono
nonono nonono nonono nonono nonono nonono <hr/>
nonono nonono nonono nonono nonono nonono nonono
nonono nonono nonono nonono nonono nonono nonono
nonono nonono nonono nonono nonono nonono nonono
nonono nonono nonono nonono nonono nonono nonono
nonono </p>
<hr/>
5.11-Linha Horizontal <HR>
5.12 - Áudio
• Permite que arquivos de áudio sejam tocados diretamente
pelo navegador, conforme dados apontados no HTML:
<audio controls>
<source src=“[Link]" type="audio/ogg">
<source src=“teste.mp3" type="audio/mpeg"> Seu
navegador não é compatível com a tag <áudio> do
HTML5
</audio>
5.13 - Vídeo
• Permite que arquivos de vídeo sejam exibidos diretamente
pelo navegador, conforme dados apontados no HTML:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4"> <source
src="[Link]" type="video/ogg"> Seu navegador não
é compatível com a tag <vídeo> do HTML5
</video>
5.13 - Vídeo
Exercício
• Construa um micro aplicação estática que permita a execução
de áudios e vídeos embutidos em um catálogo local. Através
de componentes HTML 5, você deverá criar uma indexação
estática de 5 vídeos e 5 sons. Ao clicar no link referente à
mídia selecionada, o arquivo selecionado deverá ser aberto e
disponibilizar controles para a execução do conteúdo.
Referências
• [Link]
• MAUJOR, Marício. Fundamentos de HTML5 E CSS3. São
Paulo: Novatec, 2015.
• SCARELLI, Ariane; ZAMBON, Kátia. Apostila HTML 5 -
Disciplina LPII (PHP). Bauru: UESP, 2017.