Scribd
Carregar
112 visualizações29 páginas

Manual HTML5

Este documento fornece instruções para criar um site em HTML5, incluindo tags básicas, parágrafos, formatação de texto, cores, imagens, listas e links.

Enviado por

manuel lourenço
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
112 visualizações29 páginas

Manual HTML5

Este documento fornece instruções para criar um site em HTML5, incluindo tags básicas, parágrafos, formatação de texto, cores, imagens, listas e links.

Enviado por

manuel lourenço
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 29

Criação de Site em HTML5

1 - TAGS BÁSICAS EM HTML5


• Criar pasta com nome IOT_SEUNOME
• Criar um ficheiro index.html de forma que contenha o seguinte texto:

IOT - Internet of Things


IOT
A Internet das coisas
Menu Principal
- Pagina Principal
- Especificações
- Fotos
- Multimédia
- Fale Connosco

Tecnologia > Inovações


Tudo sobre IOT
Aprendizagem
Junho de 2017
O que é o IOT?
A Internet das coisas é uma revolução tecnológica com o objetivo de
conectar dispositivos eletrónicos utilizados no dia-a-dia à Internet,
cujo desenvolvimento depende da inovação técnica dinâmica em campos
tão importantes como os sensores wireless, a inteligência artificial
e a nanotecnologia.

Estrutura básica

<!DOCTYPE html> (indica ao Browser que estamos a utilizar HTML5)


<html lang="pt-pt"> (indicar que a linguagem deste documento é português de Portugal)
<head> (Cabeçalho)
<title>IOT - Internet of Things</title>
<meta charset="UTF-8"> (Resolve problema de acentuação)
</head>
<body>
<hgroup> (Agrupar títulos – significado semântico apenas, sem efeito visual)
<h1>IOT</h1>
<h2>A Internet das coisas</h2>
</hgroup>
<img src="_imagens/glass-oculos-preto-peq.png"/> (Inserir foto)

2 – PARÁGRAFOS E QUEBRAS
<hgroup>
<h3>Tecnologia > &nbsp; &nbsp; &nbsp; &nbsp; Inovações </h3>
<h1>Tudo sobre IOT</h1>
<h2>Aprendizagem</h2>
<h3>Junho de 2017</h3>

Página 1
</hgroup>

&nbsp = Non-breaking Space

<br> quebra de linha (break rule)

<h2>O que é o IOT? </h2>


<p> A Internet das coisas é uma <b><i>revolução</i></b> tecnológica com o objetivo de
conectar dispositivos eletrónicos utilizados no dia-a-dia à Internet, cujo desenvolvimento
depende da inovação técnica dinâmica em campos tão importantes como os sensores
wireless, a inteligência artificial e a nanotecnologia.</p>

3 – FORMATAÇÃO DE TEXTO COM HTML5 E CSS3


A formatação em HTML5 é feita em CSS

<head>
<title>IOT - Internet of Things</title>
<meta charset="UTF-8">
<style>
p{
text-align: justify;
text-ident: 50px;
}
</style>
</head>

4 – CÓDIGOS DE CORES EM HTML5 E CSS3


Existem mais de 16 milhões de cores
<head>
<title>IOT - Internet of Things</title>
<meta charset="UTF-8">
<style>
body {
background-color: #dddddd; (representação em
hexadecimal)
color: rgba(0,0,0,1); (vermelho, verde, azul e alfa)
}
p{
texto-align: justify;
texto-ident: 50px;
}
</style>
</head>
5 – IMAGENS EM HTML5
<figure> (atribui significado semântico à imagem)
<img src="imagens/quadroHomemMulher.jpg" width="500"/>
<figcaption> (atribui legenda na imagem, para ser mais fácil a pesquisa da imagem no
browser)

Página 2
<h3>IOT</h3>
</figcaption>
</figure>

<h2>O que é o IOT? </h2>


<p> A Internet das coisas é uma <b><i>revolução</i></b> tecnológica com o objetivo de
conectar dispositivos eletrónicos utilizados no dia-a-dia à Internet, cujo desenvolvimento
depende da inovação técnica dinâmica em campos tão importantes como os sensores
wireless, a inteligência artificial e a nanotecnologia.</p>

6 – FORMATAÇÃO DE IMAGENS COM CSS3


Como <style> está a ter uma dimensão grande, devemos criar um ficheiro css à parte, com
nome estilo.css

estilo.css (vai servir para todas as páginas)

@charset "UTF-8";
body {
font-family: Arial, sans-serif;
background-color: #dddddd;
color: rgba(0,0,0,1);
}
p{
text-align: justify;
text-indent: 50px;
}

index.html

Em index.html, deverá ser apagado o conteúdo desde <style> a </style> e acrescentar a


ligação ao ficheiro estilo.css

<head>
<title>IOT - Internet of Things</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/estilo.css"/>
</head>

Formatação da imagem:

index.html

class: indentifica um grupo de elementos. Podemos atribuir formatação a vários elementos


de um só vez.

<figure class="foto">
<img src="imagens/quadroHomemMulher.jpg" width="500"/>
<figcaption>
estilo.css

figure.foto {

Página 3
position: relative; (em posição relativa no codigo HTML)
border: 8px solid white; (colocar uma borda)
box-shadow: 1px 1px 4px black; ( sombra - deslocamento horizontal, vertical,
expansão e cor)
}
figure.foto img {
width: 100%;
height: 100%;
}
figure.foto figcaption{
position: absolute; (dentro da borda branca)
top:0px; (com top: 0px, a legenda colocou no topo de tudo – colocar posição
relativa em figure.foto)
background-color: rgba(0,0,0,.4); (fundo na legenda)
color: white;
width: 100%; (fundo preto ocupa toda a foto)
height:100%; (fundo preto ocupa toda a foto)
padding: 10px; (adiciona espaço entre foto e legenda)
box-sizing: border-box; (cria box dentro da borda porque foi para além da
borda)
opacity:0;
transition: opacity 1s;
}
figure.foto:hover figcaption {
opacity:1;
}

7 – LISTAS EM HTML5 COM OL E UL


ORDENADAS
<ol> (<ol type=”A”> <ol type=”a”> <ol type=”i”> <ol type=”I”> <ol type=”1” start=”3”>)
<li>inicio</li>
<li>Hardware</li>
<li>Software</li>
<li>Multimédia</li>
<li>Fale Connosco</li>
</ol>

NÃO ORDENADAS
<ul> (<ul type=”square”> <il type=”circle”> <ul type=”disc”>)
<li>inicio</li>
<li>Hardware</li>
<li>Software</li>
<li>Multimédia</li>
<li>Fale Connosco</li>
</ul>
8 – LINKS EM HTML5
<h1> Menu Principal</h1>

Página 4
<ul type="disc">
<li ><a href="index.html" target=”_self”>Início</a></li> (target=”self” abre a página
no mesmo separador enquanto target=”_blank” abre num novo separador)
<li><a href="hardware.html" target=”_self”>Hardware</a></li>
<li ><a href= "software.html" target=”_self”>Software</a></li>
<li ><a href="multimedia.html" target=”_self”>Multimedia</a></li>
<li><a href="fale-connosco.html" target=”_self”>Fale Connosco</a></li>
</ul>

9– MENU COM CSS3


index.html

<nav id=”menu”> (a tag nav permite criar uma área de navegação no site)

<h1> Menu Principal</h1>


…
</ul>
</nav>

estilo.css

nav#menu{

display:block;
}
nav#menu ul {
list-style: none; (retira item de lista)
text-transform:uppercase; (transforma em maíusculas)
position:absolute; (flutua para cima)
top:-20px; (para menu ficar colado mesmo no topo)
left:800px;
}
nav#menu li {
display:inline-block;
background-color: #dddddd; (cinza claro)
padding:10px; (aumenta a caixa do menu)
margin:2px; (espaço entre as caixas)
transition:background-color 1s;
}
nav#menu li:hover{
background-color:#606060;
}
nav#menu h1{
display:none; (Menu principal não se visualiza mas continua pesquisável)
}
nav#menu a{
color:#000000;
text-decoration: none; (retirar sublinhado)
}

Página 5
nav#menu a:hover{
text-decoration:underline;
}

10 – FORMATAÇÃO DE INTERFACES COM HTML5

index.html

Com a tag div Podemos configurar a interface do site sem alterar a posição do menu que está
em posição absoluta não relativa
<body>
<div id="interface">
<hgroup>
<h1>IOT</h1>
<h2>A Internet das Coisas</h2>
</hgroup>
<img src="imagens/oculosPequenos.jpg"/>
…
</div>
</body>

estilo.css

div#interface{
width:1200px; (delimitar a largura)
background-color: #ffffff; (fundo branco na interface e o resto do site em
cinza #dddddd)
margin: -20px auto 0px auto; (cima, direita, baixo, esquerda)
box-shadow:0px 0px 10px rgba(0,0,0,.5);
padding: 10px;
}

Configuração da imagem oculos pequenos

Para que seja possível alterar a posição da imagem dos óculos é necessário criar um
cabeçalho com a tag header.

index.html

<body>
<div id="interface">
<header id="cabecalho">
<hgroup>
<h1>IOT</h1>
<h2>A Internet das Coisas</h2>
</hgroup>
<img id="icone" src="imagens/oculosPequenos.jpg"/>

Página 6
<nav id="menu">
<h1> Menu Principal</h1>
…
</ul>
</nav>
</header>

estilo.css

header#cabecalho img#icone{ (alterar a posição da imagem dos óculos)


position:absolute;
left: 1000px;
top: 40px;
}
header#cabecalho{
border-bottom:1px #606060 solid; (criar uma linha inferior)
height: 150px;
background: url("../imagens/glass-logo-peq.jpg") no-repeat 200px 0px; (sem
repetições – deslocamento horizontal e vertical)
}
header#cabecalho h1{
font-family: ‘Arial’,sans-serif;
font-size: 30pt;
color:#606060;
text-shadow:1px 1px 1px rgba(0,0,0,.6); (deslocamento horizontal, vertical,
expansão, preta com 60% de transparência – 0.6)
padding:0px; (espaço interno)
margin-bottom: 0px; (espaço externo)
}
header#cabecalho h2{
font-family: 'Arial', sans-serif;
color: #888888;
font-size: 15pt;
padding:0px;
margin-top:0px;
}

11 – FONTES EM CSS3
Fontes próprias:
estilo.css

@font-face{
font-family:'fonteNova';
src:url("../_fonts/bubblegum-sans-regular.otf")
}

Utilizar a fonte:

Página 7
header#cabecalho h1{
font-family: ‘fonteNova’,sans-serif;
font-size: 30pt;
color:#606060;
text-shadow:1px 1px 1px rgba(0,0,0,.6);
padding:0px;
margin-bottom: 0px;
}
header#cabecalho h2{
font-family: ‘fonteNova, sans-serif;
color: #888888;
font-size: 15pt;
padding:0px;
margin-top:0px;
}

Fontes públicas:
@import url (http://fonts.googleapis.com/css?family=Titillium+web);

Utilizar a fonte:

font-family: ‘Titillium Web’, sans-serif;

12 – Seções

Section (seção) Aside (conteúdo lateral)

Footer (rodapé)

index.html

<section id="corpo"> (seção principal do site atribuir identificador corpo)

Página 8
<hgroup>
<h3>Tecnologia > Inovações</h3>
<h1>Tudo sobre IOT</h1>
<h2> Aprendizagem</h2>
<h3 class="direita"> Setembro de 2020</h3>

…..
</section>
<aside id="lateral"> (área lateral)
<h1> Outras Informações </h1>
<h2>A saber!</h2>
<P> Experimente usar internet nos seus eletrodomésticos
e verá como é facil controlar por exemplo, o seu frigorifico
a partir do seu escritório</p>
</aside>

<footer id="rodape"> (rodapé)


<p>
copyright &copy;
Curso de HTML5
</p>
</footer>

</div>
</body>
</html>

estilo.css

.direita{
text-align:right;
}

section#corpo{
display: block; (para ser mostrada como um bloco)
width: 750px; (definir a largura da seção)
float: left; (para flutuar para o lado esquerdo)
border-right: 1px solid #606060;
padding-right: 20px;
}

aside#lateral{
display:block;
width: 400px;
float: right;
background-color: #dddddd;

Página 9
padding:10px;
margin-top: 5px;
box-shadow: 2px 2px 2px rgba(0,0,0,.5);
}
aside#lateral h1{
font-family: 'fonteNova', sans-serif;
font-size: 13pt;
color: #606060;
}
aside#lateral h2{
background-color: #606060;
font-size: 13pt;
color: #ffffff;
padding: 10px;
}
footer#rodape{
clear: both;
border-top:1px solid #606060;
}
footer#rodape p {
text-align: center;
}

13 – Tabelas em HTML5

index.html

<figure class="foto-legenda">
<img src="imagens/quadroHomemMulher.jpg" width="500"/>
<figcaption>
<h3>IOT</h3>
</figcaption>
</figure>
<h2>O que é IOT</h2>

Página 10
<p><a href="https://www.infowester.com/iot.php" target="_blank">A Internet
das coisas</a> é uma revolução tecnológica com o objetivo de
conectar dispositivos eletrónicos utilizados no dia-a-dia à Internet,
cujo desenvolvimento depende da inovação técnica dinâmica em campos
tão importantes como os sensores wireless, a inteligência artificial
e a nanotecnologia.</p>

<table id="tabelaC">
<caption>Internet das Coisas - Aplicações</caption> (titulo da tabela)
<tr><td class="ce">Agricultura</td><td class="cd">Sensores de controle de
pesticidas</td></tr> (table row – linha; table data – celula)
<tr><td class= "ce" rowspan="2">Comércio</td><td class="cd">Estantes
inteligentes</td></tr> (rowspan – expansão de linha)
<tr><td class="cd">Agendar entregas</td></tr>
<tr><td class="ce">Indústria Automóvel</td><td class="cd">Monitorização
dos veículos em tempo real</td></tr>
</table>

</section>

estilo.css

table#tabelaC{
border: 1px solid #606060;
border-spacing:0px;
margin-left: auto;
margin-right: auto;
}

table#tabelaC td{
border: 1px solid #606060;
padding: 10px;
text-align:center;
vertical-align:middle;
}

table#tabelaC td.ce{
color:#ffffff;
background-color: #606060;
vertical-align: top;
font-weight:bold;

table#tabelaC td.cd{
background-color: #cecece;

Página 11
}

table#tabelaC caption{
color:#888888;
font-size:15pt;
font-weight: bolder;

14 – Interfaces

Numa página web, podemos ter mais do que uma notícia, ou artigo dentro de uma
seção, ou seja, uma section pode ter vários article.

index.html

<section id="corpo">
<article id="noticia-principal">
<hgroup>
…

<tr><td class= "ce" rowspan="2">Comércio</td><td class="cd">Estantes


inteligentes</td></tr>
<tr><td class="cd">Agendar entregas</td></tr>
<tr><td class="ce">Indústria Automóvel</td><td class="cd">Monitorização
dos veículos
em tempo real</td></tr>
</table>
</article>
</section>

estilo.css

article#noticia-principal h2{
font-size: 13pt;
color: #606060;
background-color: #dddddd;
padding: 5px 0px 5px 10px;
margin: 10px 0px 10px 0px;
}

Página 12
Como formatei todos os estilos h2 mas, nem todos deverão ter a mesma
formatação, vamos proceder à criação de um header para o article e formatar
diversos estilos:

index.html

<article id="noticia-principal">

<header id="cabecalho-artigo">
<hgroup>
<h3>Tecnologia > Inovações</h3>
<h1>Tudo sobre IOT</h1>
<h2> Aprendizagem</h2>
<h2 class="direita"> Maio de 2017</h2>

</hgroup>
</header>

<figure class="foto-legenda">

estilo.css

header#cabecalho-artigo h1{
font-family: 'fonteNova',sans-serif;
font-size: 20pt;
color:#606060;
margin-bottom: 0px;
margin-top: 0px;
}
header#cabecalho-artigo h2{
font-size:13pt;
color: #cecece;
background-color: #ffffff;
margin: 0px;
}
header#cabecalho-artigo h3{
font-size:12px;
color:#606060;
}

15 - Javascript
Página 13
1 – EXEMPLO: Crie um novo ficheiro html com nome teste01.html

<!DOCTYPE html>
<html lang="pt-pt">
<head>
<title>Teste JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Teste de JavaScript</h1>
<script>
alert (“Isto é um teste!”); abre uma caixa com mensagem
document.write("Experimentar JavaScript!”); Escreve texto no site
</script>

OU

<script>
document.write("Hoje é dia"+ Date());
</script>
</body>
</html>

2 – EXEMPLO: Crie um novo ficheiro html com nome teste02.html

<!DOCTYPE html>
<html lang="pt-pt">
<head>
<title>Teste JavaScript</title>
<meta charset="UTF-8">
<script>
function semaforoYellow(){
document.getElementById("liga").src="imagens/semaforoYellow.jpg";
}
function semaforoRed(){
document.getElementById("liga").src="imagens/semaforoRed.jpg";
}
</script>
</head>
<body>
<h1>Exemplo de aplicação</h1>
<img src="imagens/semaforoRed.jpg" id="liga"
onmousemove="semaforoYellow()" onmouseout="semaforoRed()"/>
</body>
</html>

Crie uma nova pasta com nome javaScript onde irá guardar um novo ficheiro em
javascript com o nome funcoes.js

Página 14
function mudafoto (foto)
{
document.getElementById("icone").src=foto;
}

index.html

<html>
<head>
<title>IOT - Internet of Things</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/estilo.css"/>
<script src="javaScript/funcoes.js"></script>
</head>
<body>
…..
<nav id="menu">
<h1> Menu Principal</h1>
<ul type="disc">
<li onmouseover="mudafoto('imagens/home.png')"
onmouseout="mudafoto('imagens/oculosPequenos.jpg')"><a
href="index.html">Inicio</a></li>
<li onmouseover="mudafoto('imagens/hardware.png')"
onmouseout="mudafoto('imagens/oculosPequenos.jpg')"><a
href="hardware.html">Hardware</a></li>
<li onmouseover="mudafoto('imagens/software.png')"
onmouseout="mudafoto('imagens/oculosPequenos.jpg')"><a href=
"software.html">Software</a></li>
<li
onmouseover="mudafoto('imagens/multimedia.png')"
onmouseout="mudafoto('imagens/oculosPequenos.jpg')"><a
href="multimedia.html">Multimedia</a></li>
<li onmouseover="mudafoto('imagens/contato.png')"
onmouseout="mudafoto('imagens/oculosPequenos.jpg')"><a
href="fale-connosco.html">Fale Connosco</a></li>
</ul>
</nav>

16 – Documentos Adicionais

Neste próximo exemplo, vamos colocar dois documentos na mesma página –


hardware.html e hard.html
Na realidade vamos trabalhar nesta página com uma imagem e um IFRAME.
Crie um novo ficheiro: hardware.html.

Página 15
hardware.html

<!DOCTYPE html>
<html>
<head>
<title>IOT - Internet of Things</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/estilo.css"/>
<link rel="stylesheet" href="css/hardware.css"/>
<script src="javaScript/funcoes.js"></script>
</head>
<body>
<div id="interface">
<header id="cabecalho">
<hgroup>
<h1>IOT</h1>
<h2>A Internet das Coisas</h2>
</hgroup>
<img id="icone" src="imagens/oculosPequenos.jpg"/>
<nav id="menu">
<h1> Menu Principal</h1>
<ul type="disc">
<li onmouseover="mudafoto('imagens/home.png')"
onmouseout="mudafoto('imagens/hardware.png')"><a
href="index.html">Inicio</a></li>
<li onmouseover="mudafoto('imagens/hardware.png')"
onmouseout="mudafoto('imagens/hardware.png')"><a
href="hardware.html">Hardware</a></li>
<li onmouseover="mudafoto('imagens/software.png')"
onmouseout="mudafoto('imagens/hardware.png')"><a href=
"software.html">Software</a></li>

Página 16
<li onmouseover="mudafoto('imagens/multimedia.png')"
onmouseout="mudafoto('imagens/hardware.png')"><a
href=multimedia.html">Multimedia</a></li>
<li onmouseover="mudafoto('imagens/contato.png')"
onmouseout="mudafoto('imagens/hardware.png')"><a href="fale-
connosco.html">Fale Connosco</a></li>
</ul>
</nav>
</header>
<section id="corpo-full">
<article id="noticia-principal">
<header id="cabecalho-artigo">
<hgroup>
<h3>Hardware - Especificações</h3>
<h1>É fácil aprender</h1>
<h2 class="direita"> Atualizado em Junho de 2017</h2>
</hgroup>
</header>
<p>Clique em qualquer área destacada da imagem para ter mais
informações</p>
<section id="conteudo">
<img src="imagens/glass-esquema-marcado.jpg"
usemap="#meumapa"/>
<map name="meumapa">
<area shape="rect" coords="179,202,270,260"
href="hard.html#ecra" target="janela"/>
<area shape="circle" coords="158,243,12" href="hard.html#camara"
target="janela"/>
<area shape="circle" coords="73,52,12" href="hard.html#gadgets"
target="janela"/>
<area shape="poly" coords="28,143,83,216,84,249,27,169"
href="hard.html#sensores" target="janela"/>
<iframe src="hard.html" name="janela" id="frame-hard"></iframe>

IFRAME

</article>
</section>
<footer id="rodape">

Página 17
<p>
copyright &copy;
Curso de HTML5
</p>
</footer>
</div>
</body>
</html>
Para que ao clicarmos nas áreas delimitadas dos óculos se posicione na zona de
texto certa, do documento lateral, será necessário criar artigos.

hard.html

<!DOCTYPE html>
<html lang="pt-pt">
<head>
<meta charset="UTF-8">
<title>Especificações</title>
<style>
body{
font-family: arial;
font-size: 10pt;
}
p{
text-align: justify;
text-indent: 20px;
}
article h1{
font-size: 15pt;
color:#ffffff;
background-color: rgba(0,0,0,.3);
padding: 5px;
margin:0px;
}
article h2{
font-size: 13pt;
color: #888888;
margin: 0px;
}
article{
margin-bottom: 800px; (desta forma cada artigo fica separado para
visualizarmos um de cada vez quando clicamos)
}

Página 18
</style>
</head>
<body>
<article id="topo">
<header>
<h2>Clique sobre as áreas destacadas em vermelho<h2>
</header>
<img src="imagens/mao.png" alt="Mão aponta para esquerda"/> (alt é
um texto alternativo para descrever a imagem importante nos mecanismos de
pesquisa nos browsers)
</article>
<article id="ecra">
<header>
<h1>Ecrã</h1>
<h2>Como o mundo vai aparecer</h2>
</header>
<p>Os óculos vão conter um pequeno ecrã de LCD ou AMOLED
na parte superior e em frente aos olhos do utilizador. Com o uso de uma
câmara e GPS, podemos
selecionar opções com o movimento da cabeça.</p>
<img src="imagens/det-tela.jpg"/>
</article>
<article id="camara">
<header>
<h1>Câmara</h1>
<h2>Para filmar e fotografar a qualquer momento</h2>
</header>
<img src="imagens/det-camera.jpg"/>
<p>Com o Google Glass é possível tirar fotos com até 5 megapixels e gravar
vídeos com 720
linhas de resolução.</p> </article>
<article id="sensores">
<header>
<h1>Sensores</h1>
<h2>A sensibilidade de uns simples óculos</h2>
</header>
<p>O dispositivo vem com vários tipos de sensores e microfones embutidos.
Para indicar um comando,
basta falar ou passar o dedo na lateral do óculos.</p>
<img src="Imagens/det-touch.jpg"/>
</article>
<article id="gadgets">
<header>
<h1>Bateria e Gadgets</h1>

Página 19
<h2>Quais são os dispositivos que o complementam</h2>
</header>
<img src="imagens/det-bateria.jpg"/>
<p>O Glass vem com uma bateria que tem autonomia suficiente
para durar um dia inteiro. Apenas algumas atividades como videoconferências
e longas filmagens vão
exigir um pouco mais. Além disso tem WiFi, Bluetooth, 3G/4G e muito
mais.</p>
</article>
</body>
</html>

hardware.css

@charset "UTF-8";
section#conteudo {
width: 1000px;
margin: auto; (margens automáticas, ou seja, o conteúdo (óculos
interativos) vai ficar centrado no ecrã, independentemente do espaço que
ocupe)
}
iframe#frame-hard{
width: 380px;
height: 280px;
border: none; (esconde os limites do IFRAME – não funciona em todos os
browsers)
overflow: hidden; (esconde as barras de deslocamento – não funciona em
todos os browsers)
}
iframe#frame-hard::-webkit-scrollbar{
display:none; (esconde as barras de deslocamento)
}

17 - Album de fotos

software.html

<!DOCTYPE html>
<html>
<head>
<title>IOT - Internet of Things</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/estilo.css"/>
<link rel="stylesheet" href="css/software.css"/>
</head>

Página 20
<script src="javaScript/funcoes.js"></script>
<body>
<div id="interface">
<header id="cabecalho">

<hgroup>
<h1>IOT</h1>
<h2>A Internet das Coisas</h2>
</hgroup>
<img id="icone" src="imagens/oculosPequenos.jpg"/>

<nav id="menu">
<h1> Menu Principal</h1>
<ul type="disc">
<li onmouseover="mudafoto('imagens/home.png')"
onmouseout="mudafoto('imagens/software.png')"><a
href="index.html">Inicio</a></li>
<li onmouseover="mudafoto('imagens/hardware.png')"
onmouseout="mudafoto('imagens/software.png')"><a
href="hardware.html">Hardware</a></li>
<li onmouseover="mudafoto('imagens/software.png')"
onmouseout="mudafoto('imagens/software.png')"><a href=
"software.html">Software</a></li>
<li onmouseover="mudafoto('imagens/multimedia.png')"
onmouseout="mudafoto('imagens/software.png')"><a
href="multimedia.html">Multimedia</a></li>
<li onmouseover="mudafoto('imagens/contato.png')"
onmouseout="mudafoto('imagens/software.png')"><a href="fale-
connosco.html">Fale Connosco</a></li>
</ul>
</nav>
</header>
<section id="corpo-full">
<article id="noticia-principal">
<header id="cabecalho-artigo">
<hgroup>
<h3>Hardware - Especificações</h3>
<h1>É fácil aprender</h1>
<h2 class="direita"> Atualizado em Junho de 2017</h2>
</hgroup>
</header>
<body>

<ul id="album-fotos">
<li id="foto01"><span> Foto 01</span></li>
<li id="foto02"><span> Foto 02</span></li>
<li id="foto03"><span> Foto 03</span></li>
<li id="foto04"><span> Foto 04</span></li>
<li id="foto05"><span> Foto 05</span></li>
<li id="foto06"><span> Foto 06</span></li>
</ul>
</body>
<footer id="rodape">
<p>
copyright &copy;
Curso de HTML5
</p>

Página 21
</footer>

</div>

</body>
</html>

software.css

@charset "UTF-8";

Formatar dimensão de todo o álbum

ul#album-fotos{
width: 700px; (largura 700 pixels)
margin: 0 auto; (margem zero na esquerda e automática em todas as outras)
padding: 50px;
overflow: none; (esconde o scroll)
list-style: none;
}

ul#album-fotos li{ (cada item, neste caso cada foto vai ser formatada)
float: left;
width: 200px; (largura de cada foto)
height: 200px; (altura de cada foto)
margin: 10px;
border: 5px solid #ffffff;
background-color: #ffffff;
box-shadow: 1px 1px 3px rgba(0,0,0,.4);
-webkit-transition: all 0.4s ease-in;

ul#album-fotos li#foto01{
background:url('../imagens/galeria-01.jpg') no-repeat;
background-position: 50% 50%; (50% lateral e 50% vertical, desta forma a
foto fica centrada na previsualização)
background-size: 400px 400px; (colocar tamanho original da foto)
background-color: #ffffff;
}

ul#album-fotos li#foto01:hover{
background-position: 0px 0px; (Quando rato passa por cima reduz tamanho
para vermos a foto toda)
background-size: 200px 200px;
}

ul#album-fotos li#foto02{
background:url('../imagens/galeria-02.jpg') no-repeat;
background-position: 50% 50%;
background-size: 400px 400px;
background-color: #ffffff;
}

ul#album-fotos li#foto02:hover{

Página 22
background-position: 0px 0px;
background-size: 200px 200px;
}

ul#album-fotos li#foto03{
background:url('../imagens/galeria-03.jpg') no-repeat;
background-position: 50% 50%;
background-size: 400px 400px;
background-color: #ffffff;
}

ul#album-fotos li#foto03:hover{
background-position: 0px 0px;
background-size: 200px 200px;
}

ul#album-fotos li#foto04{
background:url('../imagens/galeria-04.jpg') no-repeat;
background-position: 50% 50%;
background-size: 400px 400px;
background-color: #ffffff;
}

ul#album-fotos li#foto04:hover{
background-position: 0px 0px;
background-size: 200px 200px;
}

ul#album-fotos li#foto05{
background:url('../imagens/galeria-05.jpg')no-repeat;
background-position: 50% 50%;
background-size: 400px 400px;
background-color: #ffffff;
}
ul#album-fotos li#foto05:hover{
background-position: 0px 0px;
background-size: 200px 200px;
}

ul#album-fotos li#foto06{
background:url('../imagens/galeria-06.jpg')no-repeat;
background-position: 50% 50%;
background-size: 400px 400px;
background-color: #ffffff;
}

ul#album-fotos li#foto06:hover{
background-position: 0px 0px;
background-size: 200px 200px;
}

ul#album-fotos li:hover{
-webkit-transform: scale(1.5); (faz o zoom em cada item li, logo em cada foto)

Página 23
ul#album-fotos li span{
opacity:0;
color: #ffffff;
text-shadow: 1px 1px 1px #ffffff;
background-color: rgba(0,0,0,.3);
font-size: 9pt;
line-height: 370px;
padding: 5px;
}

ul#album-fotos li:hover span{


opacity: 1;
}

18 – Multimédia

multimedia.html

<!DOCTYPE html>
<html>
<head>
<title>IOT - Internet of Things</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/estilo.css"/>
<link rel="stylesheet" href="css/media.css"/>
</head>
<script src="javaScript/funcoes.js"></script>
<body>
<div id="interface">
<header id="cabecalho">
<hgroup>
<h1>IOT</h1>
<h2>A Internet das Coisas</h2>
</hgroup>
<img id="icone" src="imagens/multimedia.png"/>
<nav id="menu">
<h1> Menu Principal</h1>
<ul type="disc">
<li onmouseover="mudafoto('imagens/home.png')"
onmouseout="mudafoto('imagens/multimedia.png')"><a
href="index.html">Inicio</a></li>
<li onmouseover="mudafoto('imagens/hardware.png')"
onmouseout="mudafoto('imagens/multimedia.png')"><a
href="hardware.html">Hardware</a></li>
<li onmouseover="mudafoto('imagens/software.png')"
onmouseout="mudafoto('imagens/multimedia.png')"><a href=
"software.html">Software</a></li>
<li onmouseover="mudafoto('imagens/multimedia.png')"
onmouseout="mudafoto('imagens/multimedia.png')"><a
href="multimedia.html">Multimedia</a></li>
<li onmouseover="mudafoto('imagens/contato.png')"
onmouseout="mudafoto('imagens/multimedia.jpg')"><a href="fale-
connosco.html">Fale Connosco</a></li>

Página 24
</ul>
</nav>
</header>
<section id="corpo-full">
<article id="noticia-principal">
<header id="cabecalho-artigo">
<hgroup>
<h3>Multimédia</h3>
<h1>Sons e Videos</h1>
<h2 class="direita"> Atualizado em Junho de 2017</h2>
</hgroup>
</header>
<div id="tvradio">
<audio id="musica" controls="controls">
<source src="media/2009-lovers-carvings-bibio.mp3"
type="audio/mpeg"/>
Desculpe, mas não foi possível carregar o áudio.
</audio>
<video id="filme" controls="controls" poster="imagens/video-
mini01.jpg">
<source src="media/getting-started.mp4" type="video/mp4"/>
Desculpe, mas não foi possível carregar o vídeo.
</video>
</div>
</article>
</section>
<footer id="rodape">
<p>
copyright &copy;
Curso de HTML5
</p>
</footer>
</div>
</body>
</html>

media.css

@charset "UTF-8";
div#tvradio{
width: 900px;
height: 580px;
margin: auto;
background: url("../imagens/radio-tv.png") no-repeat;
}
audio#musica{
display: block;
position: relative;
left: 575px;
top: 500px;
width: 300px;
}

video#filme{
display: block;
position: relative;
left: 90px;

Página 25
top: 85px;
width: 440px;
}

19- Formulário
Algumas tags utilizadas:
Fieldset: conjunto de campos;
Legend: define títulos para blocos;
Size: tamanho máximo visível de caracteres
Maxlenght: tamanho máximo de caracteres permitido
Placeholder: dica que damos ao utilizador

Método Post – São enviados por pacotes, sistema mais lento mas, mais seguro
Método Get – Todos os dados são colocados e visíveis após o URL, mais rápido,
porem menos seguro

Action: para onde os dados são enviados. Se for para email é preciso ter cliente
de email instalado no computador.
Select: caixas combinadas.
Label: ao clicar no texto ao lado do item é possível selecionar
Step: avança de 2 em 2 tempos

fale-connosco.html

<!DOCTYPE html>

<html>
<head>
<title>IOT - Internet of Things</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/estilo.css"/>
<link rel="stylesheet" href="css/form.css"/>
<script src="javaScript/funcoes.js"></script>
</head>

<body>
<div id="interface">
<header id="cabecalho">
<hgroup>
<h1>IOT</h1>
<h2>A Internet das Coisas</h2>
</hgroup>
<img id="icone" src="imagens/contato.png"/>

<nav id="menu">
<h1> Menu Principal</h1>
<ul type="disc">
<li onmouseover="mudafoto('imagens/home.png')"
onmouseout="mudafoto('imagens/contato.png')"><a
href="index.html">Inicio</a></li>
<li onmouseover="mudafoto('imagens/hardware.png')"
onmouseout="mudafoto('imagens/contato.png')"><a
href="hardware.html">Hardware</a></li>
<li onmouseover="mudafoto('imagens/software.png')"
onmouseout="mudafoto('imagens/contato.png')"><a href=
"software.html">Software</a></li>

Página 26
<li onmouseover="mudafoto('imagens/multimedia.png')"
onmouseout="mudafoto('imagens/contato.png')"><a
href=multimedia.html">Multimedia</a></li>
<li onmouseover="mudafoto('imagens/contato.png')"
onmouseout="mudafoto('imagens/contato.png')"><a href="fale-
connosco.html">Fale Connosco</a></li>
</ul>
</nav>
</header>
<section id="corpo-full">
<article id="noticia-principal">
<header id="cabecalho-artigo">
<hgroup>
<h3>Fale Connosco</h3>
<h1>Formulário de contato</h1>
<h2 class="direita"> Atualizado em Junho de 2017</h2>
</hgroup>
</header>
<form method="post" id="fcontato"
action="mailto:[email protected]">
<fieldset id="user"><legend> Identificação do Utilizador</legend>
<p><label for="cNome">Nome:<input type="text" name="tNome"
id="cNome"/></label></p>
<p><label for="cPassword">PassWord:<input type="password"
name="tPassword" id="cPassword" size="8" maxlength="8" placeholder="8
digitos"/></label></p>
<P><label for="cEmail">E-mail:<input type="email"
name="tEmail" id="cEmail" size="20" maxlength="40"></label></p>
<fieldset id="sexo"><legend>Sexo:</legend>
<label for="cMasc"><input type="radio" name="tSexo"
id="cMasc">Masculino</label><br>
<label for="cFen"><input type="radio" name="tSexo"
id="cFem">Feminino</label><br>
</fieldset>
<p><label for=cNasc>Data de Nascimento:<input type="date"
name="tNasc" id="cNasc"/></label></p>
</fieldset>
<fieldset id="endereco"><legend>Endereço do Utilizador:</legend>
<p><label for="cRua">Rua:<input type="text" name="tRua"
id="cRua" size="13" maxlength="100" placeholder="Rua, Av., Trav,
..."/></label></p>
<p><label for="cNum">Número:<input type="number"
name="tNum" id="cNum" min="0" max="9999"/></label></p>
<p><label for="cLoc">Localidade: <input type="text"
name="tLoc" id="cLoc" size="13" maxlength="80"
placeholder="Localidade"></p>
<p>Código postal:
<select name="tCod" id="cCod">
<option>6000-246 Castelo Branco</option>
<option>6200-054 Covilhã</option>
</select></p>
</fieldset>
<fieldset id="mensagem"><legend>Mensagens do
utilizador:</legend>
<p>Grau de urgência:
<input type="range" name="tUrg" id="cUrg" min="0" max="10"
step="2"/></p>

Página 27
<p>Mensagem:</p>
<textarea name="tMsg" id="cMsg" cols="45" rows="5"
placeholder="Escreva aqui a sua mensagem"></textarea>
</fieldset>
<fieldset id="pedido"><legend>Quero participar na conferência sobre
IOT:</legend>
<p><input type="checkbox" name="tPed" id="cPed"
checked="true">Gostaria de participar</p>
<p>Data:<input type="date" name="tData" id="cData"/></p>
</fieldset>
<input type="submit" value="Enviar"/>
</form>
</article>
</section>
<footer id="rodape">
<p>
copyright &copy;
Curso de HTML5
</p>
</footer>
</div>
</body>
</html>

form.css

@charset "UTF-8";
form{
width: 800px;
margin:auto;
}
input , textarea {
font-family: sans-serif;
font-weight: normal;
font-size: 13pt;
background-color: rgba(255,255,255,.8);
}
input:hover, textarea:hover {
background-color: #dddddd;
}
legend {
color:#888888;
font-weight: bold;
font-size: 13pt;
font-family: sans-serif;
}
fieldset {
border-color: #cecece;
margin: 20px;
}
fieldset#sexo{
width: 150px;
}
fieldset#user{
background: url('../imagens/icone-contato.png') no-repeat 95% 95%;
}
fieldset#endereco{

Página 28
background: url('../imagens/icone-endereco.png') no-repeat 95% 95%;
}
fieldset#mensagem{
background: url('../imagens/icone-mensagem.png') no-repeat 95% 95%;
}

Página 29

Você também pode gostar