HTML 5 PDF

Html 5 – EàD
Curso de Aprendizagem
Lisboa 06-04-2020
[ Html 5 ]
O HTML
 O HTML é uma linguagem de formatação
de texto.
 A formatação é realizada através de tags

– MARCAS OU ETIQUETAS.
 Uma tag consiste em < nome_da_tag >
3
O HTML
 Normalmente são usadas aos pares, por

exemplo, <h1> </h1>
 O texto formatado encontra-se entre as

duas tags, por exemplo, <b>olá</b>
resulta em olá.
4
O HTML
 As tags não são case sensitive. <h1> é

equivalente a <H1>
 Algumas tags têm atributos, por

exemplo,
<body bgcolor=“white”>.
5
As tags estruturais
 Apesar de não ser obrigatório um documento
HTML deve conter as seguintes tags:
 <!DOCTYPE html>- Indica documento em HTML5
<html lang=“pt”> - Indica que a página é portuguesa
<html></html> - Indicam o início e o fim do

documento.
<head></head> - Delimitam a secção de cabeçalho do

documento.
<meta charset=“utf-8”/>
6
<TITLE></TITLE> - Indicam o título do
documento que será exibido na barra superior
do browser. É colocado dentro da secção do
cabeçalho.
<BODY></BODY> - Corpo do documento.

Entre estas marcas estará contida a maior parte
do conteúdo a ser apresentado, como os
Textos, Figuras, Tabelas, etc...
7
Estrutura Base de uma Página
<!DOCTYPE html>
<HTML lang=“pt”>
<HEAD>
<TITLE>A Minha Home Page</TITLE>
</HEAD>
<BODY>
Conteúdo da página, como figuras,
textos, tabelas, etc...
</BODY>
</HTML>
8
Um Exemplo de página
<!DOCTYPE html >
<html langh=“pt”>
<HEAD>
<TITLE>Um Pequeno Exemplo</TITLE>
</HEAD>
<BODY>
<H1>HTML é fácil de aprender</H1>
<P>Aqui está o primeiro parágrafo</P>
<P>E aqui está o segundo</P>
</BODY>
</HTML>
9
A Tag <Body>: Corpo da página
 A marca <BODY> permite estabelecer várias
configurações que têm efeito em toda a página.
As configurações podem ser, entre outras:
⚫ Fundo (BackGround) da página:

 Cor de fundo → Background-color: yellowgreen
 Imagem de Fundo → Background-image:url(“fundo.jpg”)
⚫ Cor do texto da página:

 Cor do texto → color:red
 color: #60453e
 color:rgba(0,0,0,0.5) r-red g-green b-blue
 a- opacidade da letra
10
HTML - Formatação
Mudanças de Linha e Parágrafos
11
A Tag <BR>: Quebra de linha
 As mudanças de linha de texto no HTML
são ignoradas.
 Para mudar de linha é necessário utilizar

a tag <BR>.
 A marca <BR> não tem a marca de fim

de quebra de linha </BR>.
12
A Tag <P>: Parágrafo
 Para se definir um parágrafo é necessário utilizar
a tag <P>.
 A tag <P> também admite como opcional o

argumento ALIGN. Este pode tomar os valores
LEFT, CENTER e RIGHT. Por omissão é LEFT.
 Sintaxe: <P style=“text-align:center;text-ident:

50px”>
13
A Tag <P>: Parágrafo
 Por exemplo:
<P>isto é um parágrafo</P>
<P style=“text-align:center;”>isto é outro
parágrafo, <BR>mas centrado</P>
 Terá o seguinte resultado, com uma linha de

intervalo entre os dois parágrafos:
14
HTML - Formatação
Espaços
15
Espaços
 Os espaços não funcionam da forma a que
estamos habituados.
 Por mais espaços seguidos que se

coloquem num texto todos, excepto o
primeiro, desaparecem quando a página é
mostrada no browser.
 Para dar vários espaços, utiliza-se o

(em minúsculas e com o “;” no
fim).
16
 nbsp → No Breaking SPaces.

Formatação pequenos textos
 Utiliza-se a Tag <span> </span>
⚫ <span style=“text-decoration:underline;”>
⚫ <span style=“font-weight:Bold;”>
17
HTML - Formatação
Fontes de letras
<p style="font-size:160%;">This is a paragraph.</p>
Alinhamento do Texto
<p style="text-align:center;">Centered paragraph.</p>
COR de fundo
<body style="background-color:powderblue;”>
COR de texto
<p style="color:red;">This is a paragraph.</p>
Tamanho 18
<p style="font-size:160%;">This is a paragraph.</p>
HTML - Formatação
Elementos
<b> - Texto em negrito
<strong> - texto Importante
<i> - O texto em itálico
<em> - texto enfatizado
<mark> - texto marcado
<small> - texto pequeno
<del> - texto excluído
<ins> - Texto inserido
<sub> - Texto Subscrito
<sup> - texto sobrescrito
19
 Exemplos:
 <b>This text is bold</b>
 <strong>This text is strong</strong>
 <i>This text is italic</i>
 <em>This text is emphasized</em>
 <h2>HTML <small>Small</small> Formatting</
h2>
 <h2>HTML <mark>Marked</mark> Formatting
</h2>
HTML - Formatação
Headings (cabeçalhos)
21
As Tags <H>: Headings
 Os headings servem para estruturar

o documento em títulos. Existem 6
níveis de headings h1, ..., h6.
 Exemplo:
<HTML>
<HEAD>
<TITLE>Headings</TITLE>
</HEAD>
<BODY>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</BODY>
</HTML>
◼ Sintaxe: <Hn [ALIGN = “LEFT | RIGHT | CENTER”]>

22
HTML - Formatação
Tamanho, Tipo e Cor do Texto
23
Tamanho, Tipo e cor das Letras declarados internamente em CSS
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
24
</html>
Tamanho, Tipo e cor das Letras
 Cor
⚫ Definido pelo atributo COLOR.
⚫ O atributo pode ser definido pelo código em

hexadecimal da cor, ou pelo nome da cor.
⚫ !!! As cores vão ser vistas mais em pormenor

já de seguida !!!
25
Cores
 RGB Valor
 Em HTML, uma cor pode ser especificado como um valor RGB,
usando a seguinte fórmula:
 RGB ( vermelho, verde , azul )
 Cada parâmetro (vermelho, verde e azul) define a intensidade da
cor entre 0 e 255.
 Por exemplo, RGB (255, 0, 0) é apresentado como vermelho,
vermelho porque é definido para o valor mais alto (255) e os
outros são definidos como 0.
 Para exibir preto, definir todos os parâmetros de cor para 0,
assim: rgb (0, 0, 0).
 Para exibir branco, definir todos os parâmetros de cor a 255,
como este: rgb (255, 255, 255).
26
Cores
• HEX Valor
❑ Em HTML, uma cor pode ser especificado utilizando

um valor hexadecimal no formulário:
❑ # rrggbb
❑ Onde rr (vermelho), GG (verde) e bb (azul) são
valores hexadecimais entre 00 e seguintes (o
mesmo que decimal 0-255).
❑ Por exemplo, # ff0000 é exibida como vermelho,
porque o vermelho está definido para seu valor mais
alto (ff) e os outros estão definidas para o valor
mais baixo (00).
Cores
 HSL Valor
 Em HTML, uma cor pode ser especificado usando tonalidade, a
saturação, e luminosidade (HSL), sob a forma:
 HSL ( tonalidade , saturao , luminosidade )
 A tonalidade é um grau na roda de cores de 0 a 360. 0 é
vermelho, verde é 120, e 240 é azul.
 A saturação é um valor percentual, 0% significa um tom de
cinzento, e 100% é a cores.
 Claridade é também uma percentagem, 0% é preto, 50% não é
clara ou escura, de 100% é branco
Tamanho, Tipo e cor das Letras
 Notas:
⚫ Na mesma marca (<FONT>) podemos utilizar
1, 2 ou os três atributos.
⚫ Depende apenas da formatação que pretender
dar ao texto.
⚫ A cor estipulada nesta marca sobrepõe-se à
cor do texto estipulado na marca <BODY
text=“cor”>.
29
HTML - Formatação
Linhas Horizontais
30
Linhas Horizontais
 São formadas pela marca <HR> (não
existe </HR>);
 Admite como atributos:
⚫ ALIGN = “LEFT | RIGHT | CENTER”;
⚫ COLOR = Cor;
⚫ NOSHADE – Desenha a linha sem a sombra
3D;
⚫ SIZE = nº de pontos de altura;
⚫ WIDTH = % da largura do ecrã que a linha
deve abranger.
31
Linhas Horizontais
 Exemplos:
<HR>Uma linha horizontal foi colocada em cima
<P>A linha horizontal abaixo foi criada com WIDTH = 50%
<HR ALIGN = "RIGHT" WIDTH=50%>
A linha horizontal abaixo foi criada com SIZE = 10
<HR SIZE = 10>
A linha horizontal abaixo foi criada com SIZE = 10 e
NOSHADE
<HR SIZE = 10 NOSHADE>
32
Linhas Horizontais
 Resultado:
33
Linhas Horizontais
 Notas:
⚫ Por defeito as linhas horizontais estão
centradas;
⚫ Os autores das páginas utilizam imagens
como linhas horizontais em substituição da
marca <HR>.
34
HTML - Formatação
Listas
35
Listas
 Em HTML podem ser criadas três tipos
de listas:
⚫ Listas não-ordenadas;
⚫ Listas ordenadas;
⚫ Listas de definições.
36
Listas Não Ordenadas
 Uma lista não ordenada é iniciada pela
marca <UL> e finalizada com </UL>;
 Os itens da lista são definidos com a
marca <LI> (o fecho da marca </LI> é
opcional);
 Admite como atributo opcional:
⚫ TYPE=[“Circle” | “Square” | “Disc”]
37
 Exemplo 1
<h1>Lista com um nível apenas</h1>
<UL>
<LI>Primeiro item da lista
<LI>Segundo item da lista
<LI>Terceiro item da lista
<LI>Quarto item da lista
</UL>
38
 Exemplo 2
<H1>Lista com vários níveis</h1>
<UL>
<UL>
<LI>Primeiro sub-item
<UL>
<lI>Único sub-sub-item</LI>
<UL>
<LI>Único sub-sub-sub-item</LI>
</UL>
</UL>
<LI>Segundo sub-item
<LI>terceiro sub-item
</UL>
</UL>
39
Listas Ordenadas
 Uma lista ordenada é iniciada pela marca
<OL> e finalizada com </OL>;
 Os itens da lista são definidos com a
marca <LI> (o fecho da marca </LI> é
opcional).
40
Listas Ordenadas
 Admite como atributos opcionais:
⚫ TYPE=[1 | “A” | “a” | “I” | “i”]
 1 – Lista formada por números;
 A – Lista formada por LETRAS MAIUSCULAS;
 a – Lista formada por letras minúsculas;
 I – Lista em numeração romana com LETRAS

MAIUSCULAS;
 i – Lista em numeração romana com letras
minúsculas;
41
Listas Ordenadas
⚫ START= nº de inicio da lista.
 Pode conter uma lista não ordenada (ver

exemplo 3).
42
Listas Ordenadas
 Exemplo 1
<OL>
</OL>
43
Listas Ordenadas
 Exemplo 2
<OL>
<OL>
<LI>Terceiro sub-item
</OL>
</OL>
44
Listas Ordenadas
 Exemplo 3
<OL>
<UL>
<LI>terceiro sub-item
</UL>
</OL>
45
Listas de Definições
 Esta lista é iniciada pela marca <DL> e
finalizada com </DL>;
 É composta por:
⚫ Título – definido por <DT> </DT>
(opcional)
⚫ Item – Definido por <DD> </DD>
(opcional)
 Não contém Bullets.
46
Listas de Definições
 Exemplo 1
<DL>
<DT>Título da lista
<DD>Primeiro item da lista
<DT>Segundo Título
<DD>Segundo item da lista
<DD>Terceiro item da lista
<DL>
<DT><B>Primeiro sub-título</B>
<DD>Primeiro sub-item
<DL>
<DD>Único sub-sub-item
</DL>
<DD>Segundo sub-item
<DD>Terceiro sub-item
</DL>
<DD>Quarto item da lista
47
</DL>
HTML
Imagens
48
Imagens
 HTML Imagens de Sintaxe
 Em HTML, imagens são definidas com a
<img>tag.
 A <img>tag está vazio, contém atributos

somente, e não tem uma marca de
fechamento.
 O src atributo especifica a URL (endereço

web) da imagem:
<img src="url"> 49
Imagens
 O atributo alt
 O altatributo fornece um texto alternativo para uma imagem, se o
usuário por algum motivo não pode vê-lo (por causa da conexão
lenta, um erro no atributo src, ou se o usuário usa um leitor de
tela).
 O valor do alt atributo deve descrever a seguir:

<img src="img_chania.jpg" alt="Flowers in Chania">
 Se um navegador não
encontrar uma imagem, ele irá mostrar o valor do alt atributo.

Imagens
 Tamanho da imagem - Largura e Altura
 Pode usar o style atributo para especificar a largura e a altura

de uma imagem.
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
 Alternativamente, você pode usar o width e height atributos:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

HTML mapas de imagem
 Mapas de imagem
 A <map>tag define uma imagem-mapa. Uma imagem-mapa é uma
imagem com áreas clicáveis.
Exemplo:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone"
href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee"
href="coffee.htm">
</map>
52
HTML Imagens de Fundo
 Para adicionar uma imagem de fundo em HTML, use a propriedade
CSS background-image.
⚫ Para adicionar uma imagem de fundo num elemento
HTML, pode usar o style atributo:
<div style="background-image: url('img_girl.jpg');">
⚫ também pode especificar a imagem de fundo no

elemento <style>:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
53
Imagem de fundo em uma página
 Se desejar que a página inteira tenha uma imagem de

fundo, deve especificar a imagem de fundo no
<body>elemento:
<style>
body {
}
</style>
Repetição da imagem de fundo
 Se a imagem de fundo é menor do que o elemento, a
imagem irá repetir-se, horizontalmente e verticalmente, até
que tenha atingir a extremidade do elemento.
 Para explicar, ver o que acontece quando usamos uma

pequena imagem como fundo dentro de um grande
elemento div:
 A propriedade background-image vai tentar preencher o
elemento div com imagens até que ele tem ao fim.
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
 Para evitar a imagem de fundo se repita, use a propriedade

background-repeat.
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Capa fundo
 Se quiser que a imagem de fundo cobra o elemento inteiro,
pode definir a propriedade background-size para “cover”.
 Além disso, para se certificar de todo o elemento está

sempre coberto, defina a propriedade background-
attachment para fixo.
 a imagem vai cobrir o elemento inteiro, sem alongamento,
a imagem irá manter suas proporções originais.
<style>
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
HTML
Links
58
Links
 Um Link (também conhecido como
Âncora) é uma ligação que pode ser
efectuada:
⚫ Entre dois documentos;
⚫ Entre dois documentos, mas direccionado
para um ponto específico do documento
destino; ou
⚫ Entre dois pontos no mesmo documento.
59
Links
 Um documento é transformado num
hipertexto através da:
⚫ Introdução de âncoras destino;
⚫ Marcação de âncoras fonte.
60
Links
 O facto dos Links (ligações entre
documentos) não se restringirem ao
servidor onde está colocado o Site:
⚫ Tornou o HTML extremamente poderoso; e
⚫ Permitiu o aparecimento da WWW.
61
Links
 Para inserir Links é utilizada a tag <A>;
 A tag <A> utiliza o argumento HREF, o

qual permite definir o URL para o qual se
quer fazer o Link.
62
Links
 Exemplo:
<A HREF=“HTTP://www.igf.min-financas.pt”>Inspecção-Geral
de Finanças</A>
Resultado → Inspecção-Geral de Finanças
63
LINKS - Referências absolutas e
relativas
 Suponhamos que nos encontramos na seguinte

página:
www.pagina.pt/index.html
 A referência <A
HREF=“estudo.html”>estudo</A> é relativa.
 E é relativa à página actual. Portanto obtemos:

www.pagina.pt/estudo.html
64
relativas
 Um outro link relativo é:
<A HREF=“trabalhos/relatorio.html”>Relatório</A>
 O resultado é → www.pagina.pt/trabalhos/relatorio.html
 A referência absoluta para o mesmo endereço seria:

<A HREF=“http://www.pagina.pt/trabalhos/relatorio.html”>
Relatório</A>
 A vantagem das referências relativas é a mobilidade do trabalho,

pois todas as páginas são relativas à primeira.
65
relativas
 Como regra devemos utilizar:

⚫ Referências relativas – em todos os Links
internos ao nosso Site;
⚫ Referências absolutas – em todos os Links

que ligam o nosso Site com Sites, páginas,
ficheiros ou serviços externos.
66
LINKS - Secções de documentos
 A tag <A> permite que sejam criados

Links internos ao documento.
 Para tal é utilizado o argumento NAME:
⚫ <A NAME=“seccao”>…</A> - Define uma
secção dentro do texto do documento;
⚫ <A HREF=“#seccao”>…</A> - Estabelece o
Link que permite “saltar” para a posição do
texto marcada pelo tag <A NAME>.
67
 Para “saltar” para uma determinada

secção de texto de um outro documento
apenas teria-mos de adicionar o nome do
documento.
68
 Exemplo:
⚫No doc2.html é colocado:
<A NAME=“seccao”>…</A>
⚫No doc1.html o Link para “saltar” para essa

secção seria:
<A HREF=“doc2.html#seccao”>…</A>
 As regras de referência absoluta e relativa

mantêm-se.
69
LINKS – Janela destino
 O argumento TARGET permite indicar a
janela do browser em que será aberta a
página designada pelo URL do Link.
⚫ Sintaxe:
TARGET=“_BLANK | _PARENT | _SELF | _TOP |

NOME”
70
LINKS – Janela destino
 TARGET=“_BLANK” → A página do Link é
carregada numa janela nova (sem nome).
 TARGET=“_PARENT” → A página do Link é

carregada na página “Pai” da página que contém
o Link.
 TARGET=“_SELF” → A página do Link é aberta na

página que contém o Link.
 TARGET=“_TOP” → A página do Link é aberta na

janela que contém a estrutura do Frame.
 Target=“NOME” → A página do Link é aberta na

71
janela ou Frame com a designação NOME.

HTML
Tabelas
72
Tabelas
 São, por excelência, o elemento
estruturante do conteúdo das páginas.
 Ajudam a controlar a localização do

texto, imagens e outros elementos de
uma página.
73
Tabelas
 Marcas:
⚫ <TABLE> … → Cria a tabela;
 <TR> … → (Table Row) Cria uma linha da
tabela;
⚫ <TD> … → (Table Division) Cria uma célula (divisão)
dentro da linha;
 Conteúdo → É aqui que colocado o conteúdo da
célula.
⚫ </TD> → Fecha a célula;
 </TR> → Fecha a linha;
⚫ </TABLE> → Fecha a tabela.
74
Tabelas - Atributos
 Tabela HTML - Adicionar um Border
o Se não especificar uma borda para a tabela, ela será exibida sem
fronteiras.
o A fronteira é definida usando o CSS a propriedade border:

table, th, td {
border: 1px solid black;
}
 Tabela HTML - Fronteiras Collapsed

o Se não quiser ter uma risca a volta da tabela adicione a propriedade
border-colapse.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
75
 Tabela HTML - Adiciona Preenchimento à
célula
 Preenchimento da célula especifica o espaço entre o conteúdo da
celula e sua borda.
 Se não especificar um preenchimento, as células da tabela serão

exibidos sem espaçamento entre a escrita e a borda.
 Para definir o preenchimento, use a propriedade padding do CSS:

th, td {
padding: 15px;
}
 Tabela HTML - Left-align Títulos
Por padrão, títulos de tabela estão em negrito e centrado.
Para alinhar os títulos de tabela, use a propriedade text-align do CSS :
th {
text-align: left;
}
 Tabela HTML – Adicionar espaço entre células
Espaçamento da borda especifica o espaço entre as células.
Para definir o espaço entre células, use a propriedade border-spacing do
CSS :
table {
border-spacing: 5px;
}
 Tabela HTML – Unir várias células duma
linha
Para unir várias células de uma linha, utilize o atributo colspan:
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
 Tabela HTML - Células que abrangem
várias linhas
Para unir várias células de uma coluna, utilize o atributo rowspan:
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
HTML Multimédia
Multimédia na web é som, música, vídeos, filmes e animações.
O que é Multimédia?
Multimédia vem em muitos formatos diferentes. Pode ser
quase qualquer coisa que podes ouvir ou ver.
Exemplos: imagens, música, som, vídeos, discos, filmes,
animações e muito mais.
Formatos de vídeo comuns
Apenas MP4, WebM e Ogg de vídeo são suportados pelo padrão HTML5.
Formatos de áudio
MP3 é o mais novo formato para música gravada

comprimida. O termo MP3 se tornou sinônimo de música
digital.
Apenas MP3, WAV e Ogg são suportados pelo padrão HTML5.

HTML5 Vídeo
Reprodução de vídeos em HTML

Antes do HTML5, um vídeo só poderia ser visto num navegador com um plug-
in (como o flash).
<video> este elemento especifica uma forma padrão de inserir um vídeo

numa página web.
Suporte do browser
A tabela especifica a primeira versão do browser que suporta
plenamente o elemento <video>.
O elemento <video>
Para mostrar um vídeo em HTML, use o elemento <video>:
Como funciona
O atributo controls adiciona controlos de vídeo, como play, pause e
volume.
É uma boa idéia para incluir sempreos atributos width e height. Se a

altura e largura não estão definidas, a página pode piscar durante o
carregamento do vídeo.
O elemento <source> permite que
especifique o arquivo de vídeo. Existem
vários tipos do mesmo arquivo. O
navegador escolhe o arquivo.
O texto entre as tags <video>e </video>

só será exibido em browsers que não
suportam o <video>elemento.
HTML <video> Autoplay
Para iniciar um vídeo automaticamente use o atributo
autoplay, como rep
resenta a imagem seguinte:
Nota: O atributo autoplay não funciona em dispositivos móveis como iPad e

iPhone.
Vídeo HTML - Suporte a navegadores
Em HTML5, existem 3 formatos de vídeo suportados: MP4, WebM e Ogg.
O suporte do browser para os diferentes formatos é:

Vídeo HTML - Tipos de Média
HTML5 áudio
Áudio na Web
Antes do HTML5, os arquivos de áudio só poderia ser ouvidos
num navegador com um plug-in (como flash).
O elemento<audio> especifica uma forma padrão de áudio a

incorporar numa página da web.
Suporte de Browser
A tabela especifica a primeira versão do browser que suporta
plenamente o elemento <audio>.
O Elemento <audio> do Html
Para reproduzir um arquivo de áudio em HTML, use o elemento
<audio>:
Áudio HTML - Como Funciona

O atributo <controls> adiciona controlos de áudio como, executar, parar e
aumentar ou diminuir o volume.
O elemento <source> permite que especifique arquivos alternativos de áudio

que o browser pode escolher.
O texto entre as tags <audio> e </audio> só serão exibidos em browsers que

não suportam o elemento <audio>.
Áudio HTML - Suporte dos Browsers
Em HTML5, existem 3 formatos de áudio suportados: MP3, WAV e
OGG.
O suporte do browser para os diferentes formatos é:

Áudio HTML - Tipos de Mídia
HTML Forms
O elemento <form> define uma forma que é utilizada para

entrada de utilizador recolher.
Um formulário HTML contém elementos de formulário .

Os elementos de um formulário são de diferentes tipos.
Elementos de entrada, como: campos de texto, caixas de
selecção, botões de rádio, botões de envio, e muito mais.
O elemento <input>
O elemento<input> é exibido de várias maneiras, dependendo do

tipo de atributo.
Aqui estão alguns
exemplos:
Campos de texto
<input type="text"> define um campo de entrada de dados
única para entrada de texto .
A figura seguinte é o resultado:

O elemento <label>
Observe a utilização do elemento <label> no exemplo acima.
A tag <label> define um rótulo para muitos elementos do formulário.
O elemento<label> é útil para utilizadores, porque assim saberá o

que vai introduzir no campo.
O elemento <label> também ajuda os utilizadores que têm

dificuldade em clicar em espaços muito pequenos (como botões de
rádio ou caixas).
O atributo for do <label> deve ser igual ao id do atributo do
elemento <input> para vincular os dois.
Botões do rádio
<input type="radio">define um botão de rádio
Botões Rádio permitem que um utilizador selecione uma de

várias opções.
Isto é como o código HTML acima será exibido no browser:
O botão Enviar
<input type="submit"> define um botão para enviar os dados do

formulário.
A forma de manipulador é tipicamente uma página no servidor com
um script para processar dados de entrada.
A forma de manipulador é especificado no formulário atributo ação.

<action>
Exemplo:
Isto é como mostra o browser o código acima descrito:

O atributo action
O atributo action define a ação a ser executada quando o formulário
é enviado.
Normalmente, os dados do formulário são enviados para uma página

no servidor quando o utilizador clica no botão enviar.
No exemplo acima, os dados do formulário são enviados para uma

página no servidor chamado "/action_page.php".
Esta página contém um script do lado do servidor que lida com os
dados do formulário:
Se o atributo action for omitido, a ação fica definida para a página

atual.
O atributo target
O atributo target especifica se o resultado apresentado será aberto
numa nova aba do browser, um quadro, ou na janela atual.
O valor padrão é " _self", que significa o formulário será aberto na

janela atual.
Para tornar o resultado “formulário aberto” numa nova aba do

browwser, use o valor " _blank".
Exemplo:
Pode ter outros valores como, " _parent", " _top", ou um nome que
representa o nome de um iframe.
O atributo method
O atributo method especifica o método HTTP ( GET ou POST ) para
enviar dados do fromulário.
Usando o method GET
Quando usar GET?
O método Get é padrão quando envia os dados do formulário.

Mas tem o inconveniente que utilizando este método vê.-se a
passagem dos dados na linha de URL, como se mostra a seguir.
Quando usar POST?
Use o POST se os dados do formulário contém informações

confidenciais ou pessoais.
O método POST não exibe os dados do formulário no campo
de endereço de página.
Criar um Menu de navegação
Passo 1) Adicionar HTML:

Passo 2) Adicionar CSS:
Para consultar sobre mais informação
https://www.w3schools.com/html/default.asp
[ Contactos ]
Morada | Avenida Marquês de Tomar, nº91
1069-181 LISBOA
Tel | 217994560
E-mail | geral@citeforma.pt
www.citeforma.pt

HTML 5 PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML 5 PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Html 5 – EàD

 A formatação é realizada através de tags

 Uma tag consiste em < nome_da_tag >

 Normalmente são usadas aos pares, por

 O texto formatado encontra-se entre as

 As tags não são case sensitive. <h1> é

 Algumas tags têm atributos, por

<html lang=“pt”> - Indica que a página é portuguesa

<html></html> - Indicam o início e o fim do

<head></head> - Delimitam a secção de cabeçalho do

<BODY></BODY> - Corpo do documento.

⚫ Fundo (BackGround) da página:

⚫ Cor do texto da página:

 Para mudar de linha é necessário utilizar

 A marca <BR> não tem a marca de fim

 A tag <P> também admite como opcional o

 Sintaxe: <P style=“text-align:center;text-ident:

 Terá o seguinte resultado, com uma linha de

 Por mais espaços seguidos que se

 Para dar vários espaços, utiliza-se o

 nbsp → No Breaking SPaces.

 Utiliza-se a Tag <span> </span>

 Os headings servem para estruturar

◼ Sintaxe: <Hn [ALIGN = “LEFT | RIGHT | CENTER”]>

Tamanho, Tipo e Cor do Texto

⚫ O atributo pode ser definido pelo código em

⚫ !!! As cores vão ser vistas mais em pormenor

❑ Em HTML, uma cor pode ser especificado utilizando

 a – Lista formada por letras minúsculas;

 I – Lista em numeração romana com LETRAS

 Pode conter uma lista não ordenada (ver

 A <img>tag está vazio, contém atributos

 O src atributo especifica a URL (endereço

 O valor do alt atributo deve descrever a seguir:

encontrar uma imagem, ele irá mostrar o valor do alt atributo.

 Pode usar o style atributo para especificar a largura e a altura

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

 Alternativamente, você pode usar o width e height atributos:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

<div style="background-image: url('img_girl.jpg');">

⚫ também pode especificar a imagem de fundo no

 Se desejar que a página inteira tenha uma imagem de

 Para explicar, ver o que acontece quando usamos uma

 Para evitar a imagem de fundo se repita, use a propriedade

 Além disso, para se certificar de todo o elemento está

⚫ Marcação de âncoras fonte.

⚫ Permitiu o aparecimento da WWW.

 A tag <A> utiliza o argumento HREF, o

Resultado → Inspecção-Geral de Finanças

 Suponhamos que nos encontramos na seguinte

 E é relativa à página actual. Portanto obtemos:

 A referência absoluta para o mesmo endereço seria:

 A vantagem das referências relativas é a mobilidade do trabalho,

 Como regra devemos utilizar:

⚫ Referências absolutas – em todos os Links

 A tag <A> permite que sejam criados

 Para “saltar” para uma determinada

⚫No doc1.html o Link para “saltar” para essa

 As regras de referência absoluta e relativa

TARGET=“_BLANK | _PARENT | _SELF | _TOP |

 TARGET=“_PARENT” → A página do Link é

 TARGET=“_SELF” → A página do Link é aberta na

 TARGET=“_TOP” → A página do Link é aberta na