1. O documento discute HTML5, apresentando sua história, arquitetura, elementos e semântica. Também aborda CSS3 e JavaScript.
2. São apresentados diversos elementos HTML5 como vídeo, áudio, listas e formulários, além de CSS como fontes, cores e bordas.
3. O documento fornece links e exemplos para auxiliar no aprendizado de HTML5, CSS3 e JavaScript.
2. 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
3. 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 WideWeb 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
4. Arquitetura Web
HTTP HTTP
Navegador TCP/IP
Sockets Sockets
• TCP/IP
• URI
• HTTP
• HTML
• Sockets
4
request request
response response
Servidor Web
web
HTML HTML
URI
5. HTML
Linguagem 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
13. Â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
18. Listas de descrição
http://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
19. Radio Buttons
• <input type="radio"> define um radio button. Radio buttons
permitem que o usuário selecione SOMENTE UMA de um numero
limitado de escolhas:
<form>
<input type="radio" name="sex" value="male“ selected>Male<br>
<input type="radio" name="sex" value="female">Female
</form>
19
20. 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
23. 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
27. 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
31. 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
32. 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
33. CSS3 – fluxo do conteúdo
• Columns
• Floats
• Regions
• Grids
• Flexbox
34. 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
40. 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