42
HTML5 - Prof. Rodrigo Gidra 1

Aula html5

Embed Size (px)

Citation preview

Page 1: Aula html5

HTML5 - Prof. Rodrigo Gidra

1

Page 2: Aula html5

2

dispositivos mobile com browsers modernos em 2013

de Web developers em 2013

dos developers de Mobile apps estão explorando o HTML5

das Mobile Apps usarão HTML5 até 2015

Page 3: Aula html5

História

• Departamento de Defesa (DoD) norte americano cria ARPANET -> tcp/ip -> liberado para universidades e publico em geral

• Sir Tim berners-lee em 1989 trabalhava no CERN(organização europeia para a pesquisa nuclear) e criou o HTTP, o HTML e codificou o primeiro browser, o WWW -> é fundada a W3C – World Wide Web Consortium

• HTML1-5 - draft em 1993, HTML2 em 1995, HTML3 em 1997,HTML4 em 1999 -> WHATWG (Web Hypertext Application Technology Working Group) -> HTML5, recomendation desde outubro de 2014.

• CSS – 1994 CERN – se torna recomendação oficial W3C em 1996

• Javascript – lançado em 1995 junto com navegador Netscape.

Em 1996 se torna Padrão “ECMAScript” e é então adotado por todos browsers 3

Page 4: Aula html5

Arquitetura Web

• TCP/IP

• URI

• HTTP

• HTML

• Sockets4

request request

responseresponse

Servidor Web

web

TCP/IPNavegador

HTTP HTTP

HTMLHTML

Sockets Sockets

URI

Page 5: Aula html5

HTMLLinguagem de marcação, tags:<tag propriedade=“valor”></tag> ou <tag propriedade=“valor”/>

• Estrutura básica HTML<!DOCTYPE html>

<html>

<head>

<title>Minha primeira página HTML</title>

</head>

<body>

<p>Esta é a minha primeira página</p>

</body>

</html>

5

Page 6: Aula html5

HTML 5

6

CSS

Javascript

http://www.w3.org/TR/html5/

Page 7: Aula html5

Estrutura Básica HTML 5http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_basic

<!DOCTYPE HTML>

<HTML lang=“pt-br”>

<HEAD>

<META charset=“UTF-8”/>

<TITLE>Titulo</TITLE>

</HEAD>

<BODY>

<HEADER>Titulo</HEADER>

<NAV>Navegação</NAV>

<ARTICLE>

<HEADER>

<H1>Artigo</H1>

</HEADER>

<DIV>Conteudo</DIV>

</ARTICLE>

<FOOTER>copyright</FOOTER>

</BODY>

</HTML> 7

Page 8: Aula html5

Semântica

8

Page 9: Aula html5

Layout HTML5

9

Page 10: Aula html5

Elementos

10

Page 11: Aula html5

Suporte aos elementos semânticos X Browser

11

Page 12: Aula html5

Imagem

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_img

<img src=“imagem.jpg” alt=“texto imagem” height=“50” width=“50”>

<figure><img src="imagem.jpg" alt=“texto alternativo" width="304" height="228"><figcaption>Legenda da imagem</figcaption>

</figure>

12

Page 13: Aula html5

Âncoras - Links

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_link

<a href="http://www.w3c.org” target=“_self”>World Wide Web Consortium</a>

• A tag <a> define um hyperlink, que é usado para ligar uma página à outra.

• O atributo mais importante do elemento <a> é o atributo href, que indica o destino do link.

• Por padrão, links aparecerão da seguinte forma em browsers:• Um link não visitado aparece sublinhado e azul• Um link visitado é sublinhado e purpura• Um link ativo é sublinhado e vermelho

13

Page 14: Aula html5

Áudio e Vídeohttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_audio

• <audio src=“arquivo.mp3” controls autoplay loop></audio>

<audio controls>

<source src="arquivo.mp3" type="audio/mp3">

<source src="arquivo.ogg" type="audio/ogg">

</audio>

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video

• <video src=“arquivo.mp4” poster=“imagem.jpg” controls><vídeo>

<video controls width="700" height="400">

<source src=“arquivo.mp4" type="video/mp4">

<source src=“arquivo.ogv" type="video/ogg">

</video>

14

Page 15: Aula html5

Áudio e Vídeo

15

Page 16: Aula html5

Listas Ordenadas

http://www.w3schools.com/tags/tag_ol.asp

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists

<!DOCTYPE html>

<html>

<body>

<ol type=1>

<li>Café</li>

<li>Chá</li>

</ol>

</body>

</html>

16

Page 17: Aula html5

Listas não ordenadashttp://www.w3schools.com/tags/tag_ul.asp

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists4

<!DOCTYPE html>

<html>

<body>

<ul>

<li>Café</li>

<li>Chá</li>

<li>Leite</li>

</ul>

</body>

</html>17

Page 18: Aula html5

Listas de descriçãohttp://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_description

<!DOCTYPE html>

<html>

<body>

<dl>

<dt>Café</dt>

<dd>- Bebida quente e preta</dd>

<dt>Leite</dt>

<dd>- bebida fria e branca</dd>

</dl>

</body>

</html>18

Page 19: Aula html5

Radio Buttons

• <input type="radio"> define um radio button. Radio buttons permitem que o usuário selecione SOMENTE UMA de um numerolimitado de escolhas:

<form><input type="radio" name="sex" value="male“ selected>Male<br><input type="radio" name="sex" value="female">Female

</form>

19

Page 20: Aula html5

Checkboxes• <input type="checkbox"> define um checkbox. Checkboxes permite o

usuário selecionar ZERO or MAIS opções de um numero limitado de opções.

<form><input type="checkbox" name="veiculo" value="Bicicleta“ checked>

Eu tenho uma bicicleta<br><input type="checkbox" name="veiculo" value="Carro">Eu

tenho um carro </form>

20

Page 21: Aula html5

Tabelashttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_test

http://www.w3schools.com/html/html_tables.asp

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_colspan

<table>

<tr>

<th>Mês</th>

<th>Economias</th>

</tr>

<tr>

<td>Janeiro</td>

<td>R$100</td>

</tr>

<tr>

<td>Fevereiro</td>

<td>R$80</td>

</tr>

</table> 21

Page 22: Aula html5

CSS3

22

Page 23: Aula html5

CSS – Cascading Style Sheets

Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

http://pt.wikipedia.org/wiki/Cascading_Style_Sheets

http://www.w3schools.com/cssref/default.asp

23

Page 24: Aula html5

CSS – Cascading Style Sheets

24

http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element

Page 25: Aula html5

CSS Interno• usando o elemento <style> na sessão <head> da página

<style>

body {

background-color: #d0e4fe;

}

h1 {

color: orange;

text-align: center;

}

p {

font-family: "Times New Roman";

font-size: 20px;

}

</style> 25

Page 26: Aula html5

CSS Externo

• usando arquivos CSS externos

<head>

<meta charset=“utf-8”

<title>TITULO<title>

<link rel="stylesheet" href="styles.css">

<head>

26

Page 27: Aula html5

CSS Inline

• CSS na propriedade style da tag

<body style="background-color:lightgrey;">

<p style="color:green;margin-left:20px;">Isto é um parágrafo</p>

27

Page 28: Aula html5

CSS FONThttp://www.w3schools.com/css/css_font.asp

article { font-family: "Times New Roman", Times, serif;}

h1 {font-size: 40px;}

p.normal {font-style: normal;}

p.ex1 {

font: 15px arial, sans-serif;

}

28

Page 29: Aula html5

CSS Color

< style >

h1{ color: #00FF00; }

h2 { color: green; }

h3{ color: rgb( 0,255,0); }

</ style >

29

Page 30: Aula html5

CSS Border

p {border-style: solid ; border-color: black; border-spacing: 250px; border-width: 5px;

}

p { border: 5px solid black;

}

30

Page 31: Aula html5

CSS Mobile

http://www.w3.org/standards/techs/cssmobile

@media (media-query-property-name: value) { /* Aqui vai o estilo */ }

@media (min-width: 400px) and (max-width: 700px) {

/* se aplica a janelas de 400 a 700 pixels de largura. */

}

@media (max-width: 480px) { ... }

31

Page 32: Aula html5

Propriedades CSS Específicas por Navegador

• “-moz-” -> Firefox

• “-webkit-” -> Chrome and Safari (the same rendering engine powers both browsers)

• “-ms-” -> Internet Explorer

• “-o-” -> Opera

.stylishBox { background: yellow; background-image: -moz-radial-gradient(circle, green, yellow); background-image: -webkit-radial-gradient(circle, green, yellow); background-image: -o-radial-gradient(circle, green, yellow); background-image: -ms-radial-gradient(circle, green, yellow);

}

32

Page 33: Aula html5

• Columns

• Floats

• Regions

• Grids

• Flexbox

CSS3 – fluxo do conteúdo

Page 34: Aula html5

Design Tableless<html>

<head>

<style>

/* Propriedades que ambas listas tem em comum */

div.link-list {

width:10.2em; position:absolute; top:0; font-size:80%; padding-left:1%; padding-right:1%;

margin-left:0; margin-right:0;

}

/* cria uma margem */

#main {

margin-left:10.2em; margin-right:10.2em; padding-left:1em; padding-right:1em;

}

/* coloca cada lista em seu lugar */

#list1 {

left:0;

}

#list2 {

right:0; }

</head>

<body><div id="main"> <div id="list1" class="link-list"> <div id="list2" class="link-list">

</body>

<//html> 34

Page 35: Aula html5

Input Type

35

Page 36: Aula html5

FORMS

<style>

input[ required] { border: 1px red solid; }

<style>

<FORM name=“Contact” action=“contact.cgi”>

<FIELDSET>

<LEGEND>Contato</LEGEND>

<LABEL for=“nome”>Nome:</LABEL><INPUT id=“nome” required></br>

<LABEL for=“nome”>Telefone:</LABEL><INPUT id=“telefone” type=“tel” required></br>

<LABEL for=“email”>Email:</LABEL><INPUT id=“email” type=“email”></br>

</FIELDSET>

<INPUT type="submit" value=“Enviar“ >

</FORM>

36

http://www.w3schools.com/html/html_forms.asphttp://www.w3schools.com/tags/tag_input.asp

Page 37: Aula html5

FORMS

37

Page 38: Aula html5

Atributo Pattern do elemento <INPUT>

<form action="demo_form.asp">

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code“ required>

<input type="submit"></form>

38

http://www.w3schools.com/tags/att_input_pattern.asp

Page 39: Aula html5

Forms Fieldset

39

Page 40: Aula html5

Submissão de Form

• <input type="submit"> define um botão de submissão de form.

• Um botão de submissão é usado para mandar dados a um servidor. O dado é mandado para a pagina especificada no atributo action do form usando o método especificado no atributo method.

<form name="input" action="demo_form_action.asp" method=“POST">Username: <input type="text" name="user"><input type="submit" value="Submit">

</form>

40

Page 41: Aula html5

JavaScript

http://www.w3schools.com/js/js_intro.asp

41

Page 42: Aula html5

http://bit.ly/1uJkIVq

42