HTML5

•
UAM

Raul Ferreira
27/09/2018
E aí, curtiu este material?
Ajude a incentivar outros estudantes a melhorar o conteúdo
Gostou desse material? Compartilhe! 🧡
Html 5

220 Materiais compartilhados
Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Prévia do material em texto
UNIVERSIDADE ANHEMBI MORUMBI
HTML
HTML
Hyper Text Markup Language
HTML
+JAVASCRIPT
+CSS
Hyper Text Markup Language
Cascading Style Sheets
HTML
+JAVASCRIPT
+CSS
DHTML
Hyper Text Markup Language
Dynamic
Cascading Style Sheets
HTML
+JAVASCRIPT
+CSS
DHTML
+XML
Hyper Text Markup Language
Dynamic
Cascading Style Sheets
HTML
+JAVASCRIPT
+CSS
DHTML
+XML
XHTML
Hyper Text Markup Language
Dynamic
eXtensible
Cascading Style Sheets
HTML
+JAVASCRIPT
+CSS
DHTML
+XML
XHTML
+JAVASCRIPT
Hyper Text Markup Language
Dynamic
eXtensible
Cascading Style Sheets
HTML
+JAVASCRIPT
+CSS
DHTML
+XML
XHTML
+JAVASCRIPT
+jQuery
Hyper Text Markup Language
Dynamic
eXtensible
Cascading Style Sheets
HTML
+JAVASCRIPT
+CSS
DHTML
+XML
XHTML
+JAVASCRIPT
+jQuery
+CSS3
Hyper Text Markup Language
Dynamic
eXtensible
Cascading Style Sheets
HTML
+JAVASCRIPT
+CSS
DHTML
+XML
XHTML
+JAVASCRIPT
+jQuery
+CSS3
HTML5
Hyper Text Markup Language
Dynamic
eXtensible
Cascading Style Sheets
HTML
+JAVASCRIPT
+CSS
DHTML
+XML
XHTML
+JAVASCRIPT
+jQuery
+CSS3
HTML5
Hyper Text Markup Language
Dynamic
eXtensible
Cascading Style Sheets
World Wide Web Consortium (W3C)
Web Hypertext Application Technology 
Working Group (WHATWG).
HTML
HTML é uma linguagem para descrever páginas web.
HTML significa Hyper Text Markup Language
É uma linguagem de marcação, que usa um conjunto de tags (etiquetas) que descrevem o conteúdo do documento
O navegador (browser) interpreta estas tags e exibe o resultado
EXEMPLO:
<html>
<body>
<h1>CABEÇALHO</h1>
<p>PARÁGRAFO.</p>
<p><img src="logohtml5.jpg" width="248" height="323"></p>
</body>
</html>
DHTML
Dynamic HTML, ou DHTML, não é uma linguagem mas sim a união das tecnologias HTML, JAVASCRIPT e uma linguagem de apresentação, como folhas de estilo CSS através de uma interface conhecida como DOM (Document Object Model) permitindo que uma página web seja modificada dinamicamente na própria máquina cliente, sem necessidade de novos acessos ao servidor web.
EXEMPLO:
<html>
 <head>
 <title>Exemplo Dhtml </title>
 <style type="text/css">
 .classe { position: absolute; top: 0px; left: 120px; font-size:96px;
 color: #00ff00; }
 </style>
 <body>
 <div id="seletor" class="classe">DHTML</div>
 <form>
 <input type="button" value="Vermelho" onClick="document.all.seletor.style.color='red'"><br>
 <input type="button" value="Azul" onClick="document.all.seletor.style.color='blue'"><br>
 <input type="button" value="Ocultar" onClick="document.all.seletor.style.visibility='hidden'"><br>
 <input type="button" value="Exibir" onClick="document.all.seletor.style.visibility='visible'"><br>
 <input type="button" value="Direita" onClick="document.all.seletor.style.left=250"><br>
 <input type="button" value="Esquerda" onClick="document.all.seletor.style.left=120"><br>
 <input type="button" value="Para Baixo" onClick="document.all.seletor.style.top=50"><br>
 <input type="button" value="Para Cima" onClick="document.all.seletor.style.top=0"><br>
 </form>
 </body>
 </html>
CSS
O CSS (Cascading Style Sheets) – folhas de estilo em cascata - foi introduzido junto com o HTML 4, para fornecer uma maneira melhor impor um estilo aos elementos HTML.
EXEMPLO:
<!DOCTYPE html>
<html>
<body style="background-color:white;">
<h1>Veja! Estilos e cores</h1>
<p style="font-family:verdana;color:red;">
Este texto está em VERDANA e VERMELHO</p>
<p style="font-family:times;color:green;">
Este texto está em TIMES e VERDE</p>
<p style="font-size:30px;">
Este este tem 30 pixels de altura
</p>
</body>
</html>
RESULTADO
JAVASCRIPT
• JavaScript é uma linguagem para páginas Web. 
• Os scripts escritos com JavaScript podem ser colocados dentro das suas páginas HTML. 
• Com JavaScript é possível melhorar a sua página HTML com elementos interessantes. 
• É possível responder muito facilmente a eventos iniciados pelo usuário. 
• Você pode achar também muitos exemplos de scripts de Javascript na Internet. 
• JavaScript foi pensado como algo fácil de compreender e de usar.
Como usar o JavaScript? 
Para usar o JavaScript é preciso um conhecimento básico de HTML.
Os scripts são implementados nos documentos em HTML.
EXEMPLO:
<html> 
<head> 
<meta charset="UTF-8" /> 	
Meu primeiro JavaScript! 
</head> 
<body> 	
<br> Este é um documento HTML normal. <br> 
<script language="JavaScript"> 	
document.write("Este é um JavaScript!") 	
</script> 		
<br> 
De volta ao HTML. 
</body> 
</html>
JAVASCRIPT
RESULTADO
XHTML
•	XHTML significa EXtensible HyperText Markup Language
•	XHTML é uma versão mais rigorosa e mais limpa de HTML 
•	XHTML é HTML definida como uma aplicação XML
•	XHTML é suportado por todos os principais navegadores.
Muitas páginas na internet contêm HTML "ruim", mesmo assim os navegadores funcionam, mas nem sempre de forma adequada. O XTHML trouxe um sistema mais rigoroso e que leva a menos erros.
Hoje além dos navegadores serem executados em computadores, há alguns navegadores que rodam em telefones celulares ou outros dispositivos pequenos. Dispositivos menores muitas vezes não têm os recursos ou o poder de interpretar a linguagem de marcação "ruim” ou mal feita.
XHTML
Diferenças do XHTML
Estrutura do Documento
•	XHTML DOCTYPE é obrigatório
•	<head>, <html>, <title>, e <body> são obrigatórios
Elementos XHTML
•	Elementos XHTML devem estar devidamente aninhados
•	Elementos XHTML devem sempre ser fechados
•	Elementos XHTML devem estar em minúsculas
•	Documentos XHTML devem ter um elemento raiz
XML
•	XML significa eXtensible Markup Language.
•	XML é uma linguagem de marcação muito parecida com HTML
•	XML foi projetado para transportar dados, não para exibir dados
•	Tags XML não são predefinidas. Você deve definir suas próprias tags
•	XML é projetado para ser auto-descritivo
<POEMAS>
<poema><titulo>José</titulo>
<estrofe>
 <linha>E agora, José? </linha>
 <linha>A festa acabou, </linha>
 <linha>a luz apagou, </linha>
 <linha>o povo sumiu, </linha>
 <linha>a noite esfriou, </linha>
 <linha>e agora, José? </linha>
 <linha>e agora, Você? </linha>
</estrofe>
<estrofe>
	<linha> .... </linha>
	<linha> .... </linha>
</estrofe>
</poema>
<poema><titulo> .... </titulo>
 ...
</poema>
</POEMAS>
XML
O exemplo a seguir mostra um documento XHTML com um mínimo de etiquetas necessárias:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
...... 
</body>
</html>
CSS3
CSS3 é o mais recente padrão para CSS.
A especificação CSS3 ainda está em desenvolvimento pelo W3C. No entanto, muitas das novas propriedades CSS3 têm sido implementadas em navegadores modernos.
<!DOCTYPE html>
<html>
<body>
<p style="background-color:#FFFF00">
Uso da cor com código hexadecimal
</p>
<p style="background-color:rgb(255,255,0)">
Uso da cor com valores RGB
</p>
<p style="background-color:yellow">
Uso da cor pelo nome
</p>
</body>
</html>
EXEMPLO:
Outras cores:
jQuery
Trata-se de uma biblioteca JavaScript.
O objetivo do jQuery é para tornar muito mais fácil o uso do JavaScript em seu website. No jQuery muitas tarefas comuns que requerem muitas linhas de código JavaScript para realizar, são separadas em métodos que você pode chamar com uma única linha de código.
jQuery também simplifica muito as coisas complicadas de JavaScript, como chamadas de AJAX e manipulação DOM.
A biblioteca jQuery contém as seguintes características:
•	manipulação de HTML / DOM 
•	Manipulação de CSS 
•	HTML - métodos de eventos
•	Efeitos e animações
•	AJAX
•	Utilitários, aplicativos.
jQuery
Adicionando jQuery para suas páginas web:
Para usar o jQuery, você precisa baixar a biblioteca jQuery (www.jquery.com),e incluí-lo nas páginas que você deseja usá-lo. A biblioteca jQuery é um arquivo JavaScript único, e você faz referência a ele usando a tag <script> HTML:
<head>
 <script src="jquery.js"></script>
</head>
jQuery
EXEMPLO:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
 $("button").click(function(){
 $("p").hide();
 });
});
</script>
</head>
<body>
<h2>CABEÇALHO</h2>
<p>PARÁGRAFO 1</p>
<p>PARÁGRAFO 2 </p>
<button>Esconder!</button>
</body>
</html> 
HTML5
HTML5 será o novo padrão de HTML.
O HTML 4.01, data de 1999. A web mudou muito desde então. O HTML5 ainda é um trabalho em progresso. No entanto, os principais navegadores suportam muitos dos elementos do HTML5 e novas APIs. É uma cooperação entre o World Wide Web Consortium (W3C) e a Web Hypertext Application Technology Working Group (WHATWG).
WHATWG trabalhava com formulários web e aplicativos, e W3C estava trabalhando com XHTML 2.0. Em 2006, eles decidiram cooperar e criar uma nova versão do HTML.
Algumas regras para HTML5 foram estabelecidos:
•	Novos recursos devem ser baseados em HTML, CSS, DOM e JavaScript
•	Reduzir a necessidade de plugins externos 
•	Melhor tratamento de erro
•	Mais tags de marcação para substituir o script
•	HTML5 deve ser independente do dispositivo
•	O processo de desenvolvimento deve ser visível para o público
HTML5
EXEMPLOS:
http://www.thewildernessdowntown.com/
http://andrew-hoyer.com/experiments/rain/
http://www.ro.me/
http://cinema-series.orange.fr/evenement/universeries/en/
http://agent8ball.com/
http://www.thisshell.com/
http://benthebodyguard.com/
http://www.nakshart.com/#
http://www.toyotapriusprojects.com/
http://rumpetroll.com/
http://www.openrise.com/lab/FlowerPower/
http://mrdoob.com/129/Voxels
http://mrdoob.com/96/Google_Sphere
http://www.mta.me/
http://mrdoob.com/projects/chromeexperiments/ball-pool/
http://hakim.se/experiments/html5/magnetic/02/
http://lab.hakim.se/zoom-js/
<!doctype html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="chrome=1">
		<meta http-equiv="Content-Type" content="text/html; charset = UTF-8" />
		<title>Ball Pool</title>
		<style>
			body {
				overflow: hidden;
				background-color: #000000;
				user-select: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-o-user-select: none;
				-ms-user-select: none;
			}
		</style>
	</head> 
<body>
	<div id="canvas"></div>
	<script src="js/protoclass.js"></script>
	<script src='js/box2d.js'></script>
	<script src='js/Main.js'></script>
	<script type="text/javascript">
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
	</script>
	<script type="text/javascript">
	try {
	var pageTracker = _gat._getTracker("UA-86951-7");
	pageTracker._trackPageview();
	} catch(err) {}</script>
	</body>
</html>
<!DOCTYPE html>
<html lang="pt-pt">
<head>
 <meta charset="utf-8">
 <title>Olá HTML5</title>
 <script src="ex1.js"></script>
 <link href="estilos.css" rel="stylesheet">
</head>
<body>
 <h1>Primeira página de HTML 5</h1>
 <p>Olá mundo!</p>
 <input type="button" value="Imprime mensagem" />
</body>
</html>
EXEMPLO:
ARQUIVOS
RESULTADO
p {
 color: Blue;
}
h1 {
 color: Red;
 text-decoration: underline;
 background-color: Gray;
 border-radius:15px;
 padding: 5px;
}
EXEMPLO:
ARQUIVOS
RESULTADO
window.addEventListener("load",
 function () {
 var input = document.getElementsByTagName("input")[0]; 
//apenas um elemento input
//uma vez mais, tratamento de eventos deveria ser feito com 
//metodo addEventListener
 input.onclick = function () {
 var p = document.getElementsByTagName("p")[0];
 alert(p.innerText);
 }
 },
 false);
EXEMPLO:
ARQUIVOS
RESULTADO
ELEMENTOS HTML5
http://www.w3schools.com/html/html5_new_elements.asp
ELEMENTOS HTML5
CANVAS
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Seu browser não suporta o elemento CANVAS
</canvas>
</body>
</html>
RESULTADO:
EXEMPLO:
Usado para desenhar gráficos, em tempo real, através de scripting (normalmente JavaScript)
ELEMENTOS HTML5
CANVAS
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Seu browser não suporta o elemento CANVAS
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
RESULTADO:
EXEMPLO:
Usado para desenhar gráficos, em tempo real, através de scripting (normalmente JavaScript)
ELEMENTOS HTML5
CANVAS
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Seu browser não suporta o elemento CANVAS
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
RESULTADO:
EXEMPLO:
Usado para desenhar gráficos, em tempo real, através de scripting (normalmente JavaScript)
ELEMENTOS HTML5
CANVAS
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Seu browser não suporta o elemento CANVAS
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script> 
</body>
</html>
RESULTADO:
EXEMPLO:
Usado para desenhar gráficos, em tempo real, através de scripting (normalmente JavaScript)
ELEMENTOS HTML5
CANVAS
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Seu browser não suporta o elemento CANVAS
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
</script>
</body>
</html>
RESULTADO:
EXEMPLO:
Usado para desenhar gráficos, em tempo real, através de scripting (normalmente JavaScript)
ELEMENTOS HTML5
CANVAS
<!DOCTYPE html>
<html lang="pt-pt">
<head>
 <meta charset="utf-8">
 <title>Canvas</title>
 <style>
 body{margin: 0px;}
 canvas {
 border: 1px solid red; 
 width: 800px; 
 height: 600px; 
 display:block;
 }
 </style>
 <script src="modernizr-1.5.min.js"></script>
Usado para desenhar gráficos, em tempo real, através de scripting (normalmente JavaScript)
modernizr-1.5.min.js
Modernizr é uma pequena biblioteca JavaScript criada por Faruk Ateş e Paul Irish que tem por finalidade detectar o suporte do navegador para algumas das novas funcionalidades da HTML5 e das CSS3. 
EXEMPLO:
ELEMENTOS HTML5
CANVAS
 <script> 
 function draw() {
 if (!Modernizr.canvas) return;
 var canvas = document.getElementById("mycanvas");
 var ctx = canvas.getContext("2d");
 ctx.beginPath();
 ctx.moveTo(100, 50);
 ctx.lineTo(0, 100);
 ctx.lineTo(0, 0);
 ctx.closePath();
 ctx.fillStyle = "#ff0000";
 ctx.fill();
 ctx.stroke();
	}
Usado para desenhar gráficos, em tempo real, através de scripting (normalmente JavaScript)
ELEMENTOS HTML5
CANVAS
window.addEventListener("load", draw, true);
 </script>
</head>
<body>
 <canvas id="mycanvas" width="800" height="600">
	Este browser não suporta o elemento canvas.
 </canvas> 
</body>
</html>Usado para desenhar gráficos, em tempo real, através de scripting (normalmente JavaScript)
RESULTADO:
ELEMENTOS HTML5
VÍDEO
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
 <title>Elemento video</title>
 <style>
 video{border: 4px solid red}
 </style>
<script>
 </script>
</head>
<body>
 <video src="teste.mp4" width="300" height="200" controls autoplay></video>
</body>
</html>
EXEMPLO:
Usado para inserir e controlar vídeos.
ELEMENTOS HTML5
VÍDEO
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls">
 <source src="movie.mp4" type="video/mp4">
 <source src="movie.ogg" type="video/ogg">
Seu browser não aceita a tag video.
</video>
</body>
</html>
Usado para inserir e controlar vídeos.
ELEMENTOS HTML5
AUDIO
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
 <source src="jingle.mp3" type="audio/mpeg">
	Seu browser não suporta a tag audio.
</audio>
</body>
</html>
Usado para inserir e controlar audios.
EXEMPLO:
ELEMENTOS HTML5
AUDIO
<!DOCTYPE html>
<html>
<title> CAIXA DE MÚSICA</title>
<body>
<h1>GRUPO ABBA</h1>
<audio controls="controls">
 <source src="abba.mp3" type="audio/mpeg">
	Seu browser não suporta a tag audio.
</audio>
<br><br>
<h1>CAETANO VELOSO</h1>
<audio controls="controls">
 <source src="caetano.mp3" type="audio/mpeg">
	Seu browser não suporta a tag audio.
</audio>
<br><br>
<h1>BEATLES</h1>
<audio controls="controls">
 <source src="beatles.mp3" type="audio/mpeg">
	Seu browser não suporta a tag audio.
</audio>
</body>
</html>
Usado para inserir e controlar audios.
EXEMPLO:
ELEMENTOS HTML5
SVG
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
 <polygon points="100,10 40,180 190,60 10,60 160,180"
 style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
 
</body>
</html>
SVG significa Scalable Vector Graphics
SVG é usado para definir gráficos vetoriais para a web
SVG define os gráficos em formato XML
Gráficos SVG não perder nenhuma qualidade se forem ampliada ou redimensionada
Cada elemento e cada atributo em arquivos SVG pode ser animado
SVG é uma recomendação da W3C
RESULTADO:
EXEMPLO:
ELEMENTOS HTML5
SVG
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
 <polygon points="100,10 40,180 190,60 10,60 160,180"
 style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
 
</body>
</html>
SVG significa Scalable Vector Graphics
SVG é usado para definir gráficos vetoriais para a web
SVG define os gráficos em formato XML
Gráficos SVG não perder nenhuma qualidade se forem ampliada ou redimensionada
Cada elemento e cada atributo em arquivos SVG pode ser animado
SVG é uma recomendação da W3C
RESULTADO:
ELEMENTOS HTML5
SVG
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
 <polygon points="100,10 40,180 190,60 10,60 160,180"
 style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
 
</body>
</html>
SVG significa Scalable Vector Graphics
SVG é usado para definir gráficos vetoriais para a web
SVG define os gráficos em formato XML
Gráficos SVG não perder nenhuma qualidade se forem ampliada ou redimensionada
Cada elemento e cada atributo em arquivos SVG pode ser animado
SVG é uma recomendação da W3C
RESULTADO:
ELEMENTOS HTML5
SVG
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>SVG</title>
</head>
<body>
<svg width="400" height="400">
 <!-- Um retângulo: -->
 <rect x="10" y="10" width="150" height="50" stroke="#000000" stroke-width="5" fill="#FF0000" />
 <!-- Um polígono: -->
 <polygon fill="red" stroke="blue" stroke-width="10"
 points="250,75 279,161 369,161 297,215
 323,301 250,250 177,301 203,215
 131,161 221,161" />
 <!-- Um círculo -->
 <circle cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5" fill="#FFFFFF" />
 </svg>
 </body>
 </html>
RESULTADO:
ELEMENTOS HTML5
Drag and Drop
dragstart
O objeto começou a ser arrastado. O evento que a função recebe tem um atributo target, que contém o objeto sendo arrastado.
drag
O objeto está sendo arrastado
dragend
A ação de arrastar terminou
O objeto sobre o qual outro é arrastado sofre os seguintes eventos:
dragenter
O objeto sendo arrastado entrou no objeto target
dragleave
O objeto sendo arrastado deixou o objeto target
dragover
O objeto sendo arrastado se move sobre o objeto target
drop
O objeto sendo arrastado foi solto sobre o objeto target
A API de Drag and Drop é relativamente simples. Basicamente, inserir o atributo draggable=”true” num elemento o torna arrastável. E há uma série de eventos que você pode tratar. Os eventos do objeto sendo arrastado são:
BIBLIOGRAFIA
http://www.w3schools.com/html/html5_intro.asp
ABREU, Luís. HTML 5. Lisboa: FCA
Editora de Informática, Lda. 2011.
LAWSON, Bruce. SHARP, Remy. 
Introducing HTML 5. Alta Books. 2011.
HTML5
Curso W3C Escritório Brasil