Introdução ao HTML 5 do Básico ao avançado

1
Fonte: https://www.w3schools.com
1
INTRODUÇÃO AO HTML5

2
EDITOR
Notepad++
• Bloco de notas evoluído,
• Cheio de recursos e ideal para programar
2

3
EDITOR NOTEPAD++
3

4
1. Abra o Editor
2. Digite algum texto
3. Grave o ficheiro como index.html
4. Abra no browser
5. Pré-visualização ao vivo no Notepad++
O meu nome num Browser, [nome]!
4

5
COMO FUNCIONA A INTERNET?
• Os browsers da Web renderizam a página de acordo com o
código HTML
• O CSS permite estilo e visual personalizado com o código
HTML
• O JavaScript permite criar interação dinâmica e é capaz de
manipular elementos html usando o modelo de objeto
Document
5

6
RECURSOS E CONFIGURAÇÃO
É necessário um lugar para escrever o código e ser capaz de
salvar os ficheiros.
‘editor’
É necessário um lugar para visualizar o código, que o
transforma em ficheiro.
‘browser’
6

7
RECURSOS E CONFIGURAÇÃO
Browsers
• Chrome
• Edge
• Firefox
• Internet Explorer
• Safari
• Opera

8
CONTEÚDOS
• Sintaxe básica - todas as tags comuns usadas para
desenvolver conteúdo web
• Como e onde programar em HTML - principais recursos e
links incluídos
• A estrutura HTML dentro de páginas da Web
• Explorar elementos semânticos HTML5
8

9
CONTEÚDOS
• Construir o próprio modelo HTML
• Criar listas HTML, hiperlinks e adicionar imagens
• Construir tabelas
• Criar formulários e explicações de tag HTML
• Adicionar iframes e elementos HTML
9

10
CONTEÚDOS
• Como usar classes e ID para selecionar elementos
• Explorar cores para fontes e fundos
• Mover propriedades de exibição de conteúdo
• Aprender a aplicar estilo ao HTML comum como Listas e
Tabelas
10

11
CONTEÚDOS
• Estilizar texto e torná-lo fantástico com Google Fonts
• Floats para posicionar elementos e conteúdo
• O MODELO BOX - preenchimento , margens, borda, altura e
largura
• Pseudo ClassJavaScript Section
11

12
CONTEÚDOS
• Escrever o básico do JavaScript
• Tipos de dados e blocos de construção da codificação
• Usar variáveis para manter dados
• Funções invocando blocos de operadores de código
JavaScript e atribuição de sintaxe JavaScript
12

13
CONTEÚDOS
• Objetos e Arrays
• Condições e Switches para aplicar loops lógicos
• Objeto de documentos para manipular conteúdo de
elemento HTML
13

14
BÁSICO DO HTML
A declaração <! DOCTYPE>
A <!DOCTYPE> declaração representa o tipo de documento
e ajuda os navegadores a exibir as páginas da web
corretamente.
Deve aparecer apenas uma vez, no topo da página (antes de
quaisquer tags HTML).
A <!DOCTYPE> declaração não diferencia maiúsculas de
minúsculas.
A <!DOCTYPE> declaração para HTML5 é
<!DOCTYPE html>
14

15
BÁSICO DO HTML
Os elementos HTML
Os elementos HTML é tudo desde a tag inicial até a tag final
< tagname > O conteúdo vai aqui ... < / tagname >
• Nunca ignorar a tag final.
• O HTML não é case sensitive.
15

16
BÁSICO DO HTML
Os elementos HTML
Exemplos de alguns elementos HTML:
< h1 > Meu primeiro título < / h1 >
< p > Meu primeiro parágrafo. < / p >
Alguns elementos HTML não têm conteúdo (como o elemento
<br>). Esses elementos são chamados de elementos vazios. Os
elementos vazios não possuem uma tag de finalização!
16

17
BÁSICO DO HTML
Elementos HTML encadeados
Os elementos HTML podem ser encadeados (isso significa que
os elementos podem conter outros elementos).
Todos os documentos HTML consistem em elementos HTML
encadeados.
<a href="https://www.google.com" alt="Site da Google">
<img src="Floresta.jpg" alt="Texto alternativo‚ width="50%;‚ height="50%;‚ />
</a>
17

18
BÁSICO DO HTML
Atributos HTML
Os atributos HTML fornecem informações adicionais sobre os
elementos HTML.
• Todos os elementos HTML podem ter atributos
• Os atributos fornecem informações adicionais sobre os
elementos
• Os atributos são sempre especificados na tag inicial
• Os atributos geralmente vêm em pares nome / valor como:
nome = "valor"
18

19
BÁSICO DO HTML
Atributos HTML – href
A tag <a> define um hiperlink. O atributo href especifica o
URL da página para a qual o link vai:
<a href="https://www.google.com" alt="Site da Google"></a>
19

20
BÁSICO DO HTML
Atributos HTML – src
A tag <img> é usada para inserir uma imagem em
uma página HTML. O atributo src especifica o
caminho para a imagem a ser exibida :
<img src="Floresta.jpg" alt="Texto alternativo" width="50%;" height="50%;‚ />
20

21
BÁSICO DO HTML
Existem duas maneiras de especificar o URL no src atributo:
1. URL absoluto - Links para uma imagem externa hospedada
noutro site.
Exemplo: src = "https://www.florestas.com/images/floresta.jpg"
Observações: as imagens externas podem estar protegidas
por direitos autor. Se não tiver permissão para usá-lo, pode
estar violando as leis de direitos de autor. Além disso, não
podes controlar imagens externas; elas podem ser removidas
ou alteradas de um momento para o outro.
21

22
BÁSICO DO HTML
Existem duas maneiras de especificar o URL no src atributo:
2. URL relativo - Links para uma imagem hospedada no
site. Aqui, o URL não inclui o nome do domínio.
Se o URL começar sem barra, ele será relativo à página
atual.
Exemplo: src = “floresta.jpg"
Se o URL começar com uma barra, será relativo ao
domínio.
Exemplo: src = “/images/floresta.jpg"
22

23
BÁSICO DO HTML
Atributos HTML – width, height
A tag <img> também deve conter os atributos width
e height, que especificam a largura e a altura da imagem
(em pixels ou percentagem):
<img src="Floresta.jpg" alt="Texto alternativo" width="50%;" height="50%;‚ />
23

24
BÁSICO DO HTML
Atributos HTML – style
O atributo style é utilizado para adicionar estilos a um
elemento, como cor, fonte, tamanho e outros.
O atributo style tem a seguinte sintaxe:
<tagname style="propriedade:valor;">
Exemplo: <p style=‚color:red;‚>Isto é um texto a vermelho</p>
24

25
BÁSICO DO HTML
<!DOCTYPE html>
<html>
<body>
<p style="color:red;">Eu sou vermelho</p>
<p style="color:blue;"> Eu sou azul</p>
<p style="font-size:50px;"> Eu sou grande</p>
</body>
</html>
25

26
BÁSICO DO HTML
- Cor de fundo -
A propriedade CSS background-color define a cor de
fundo de um elemento HTML.
Exemplo: Defina a cor de fundo de uma página
<body style="background-color:blue;">
<h1>Isto é o cabeçalho</h1>
<p>Isto é um parágrafo</p>
</body>
26

27
BÁSICO DO HTML
- Cor de texto -
A propriedade CSS color define a cor do texto de um
elemento HTML.
Exemplo:
<body>
<h1 style ="color:blue ;‛>Isto é o cabeçalho em azul</h1>
</body>
27

28
BÁSICO DO HTML
- Fonte -
A propriedade CSS font-family define a fonte utilizada
num elemento HTML.
Exemplo:
<body>
<h1 style=‚font-family:verdana;‛>Isto é o cabeçalho em fonte Verdana</h1>
</body>
28

29
BÁSICO DO HTML
- Tamanho do texto -
A propriedade CSS font-size define o tamanho da fonte
utilizada num elemento HTML.
Exemplo:
<body>
<h1 style =‚font-size:300% ;‛>Isto é o cabeçalho</h1>
</body>
29

30
BÁSICO DO HTML
- Alinhamento do texto -
A propriedade CSS texto-align define o alinhamento do
texto utilizado num elemento HTML.
Exemplo:
<body>
<h1 style=‚text-align:center;‛>Isto é o cabeçalho</h1>
</body>
30

31
BÁSICO DO HTML
- Alinhamento do texto -
31
Estilo
left Texto à esquerda
center Texto ao centro
rigth Texto à direita
justify Texto justificado

32
BÁSICO DO HTML
Elementos de formatação HTML
<b> Texto a negrito
<strong> Texto importante
<i> Texto em itálico
<em> Texto enfatizado
<mark> Texto marcado
<small> Texto menor
<del> Texto excluído
<ins> Texto inserido
<sub> Texto subscrito
<sup> Texto sobeescrito
32

33
BÁSICO DO HTML
Elementos de formatação HTML
33

34
BÁSICO DO HTML
Atributos HTML – lang
O atributo lang deve ser incluído dentro da tag <html>,
para declarar o idioma da página web. E serve para auxiliar os
mecanismos de pesquisa e dos browsers.
O exemplo a seguir especifica o português como o idioma:
<!DOCTYPE html>
<html lang=‚pt-PT">
<body>
...
</body>
</html>
34

35
BÁSICO DO HTML
Atributos HTML – lang
Os códigos de país também podem ser adicionados ao código
de idioma no lang atributo. Portanto, os dois primeiros
caracteres definem o idioma da página HTML e os dois
últimos caracteres definem o país.
35

36
BÁSICO DO HTML
Atributos HTML – title
O atributo title define algumas informações extras sobre
um elemento.
O valor do atributo title será exibido como uma “tip” quando
se passar com o rato sobre o elemento.
Exemplo:
<!DOCTYPE html>
<html lang=‚pt-PT">
<body>
<p title=‚Isto é uma tooltip">Texto de um paragrafo.</p>
</body>
</html>
36

37
BÁSICO DO HTML
Cabeçalhos HTML
Os cabeçalhos HTML são definidos com as tags <h1> para
<h6>. <h1> define o título mais importante. <h6> define o
título menos importante.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
37

38
BÁSICO DO HTML
Cabeçalhos HTML
Os mecanismos de pesquisa usam os títulos para indexar a
estrutura e o conteúdo de suas páginas da web. Os
utilizadores costumam folhear uma página pelos títulos.
É importante usar cabeçalhos para mostrar a estrutura do
documento. os cabeçalhos <h1> devem ser usados para os
cabeçalhos principais, seguidos dos cabeçalhos<h2>, depois
os menos importantes <h3> e assim por diante.
38

39
BÁSICO DO HTML
Parágrafos HTML
O elemento <p> HTML define um parágrafo.
Um parágrafo começa sempre numa linha nova e os browsers
adicionam automaticamente espaço em branco (uma
margem) antes e depois de um parágrafo.
39

40
BÁSICO DO HTML
Visualização em HTML
Nunca se tem a certeza de como o HTML será exibido.
Ecrãs grandes ou pequenos e janelas redimensionadas criarão
resultados diferentes.
Com HTML, não se pode alterar a exibição adicionando
espaços extras ou linhas extras no código HTML.
O browser removerá automaticamente quaisquer espaços e
linhas extras quando a página for exibida.
40

41
BÁSICO DO HTML
Regras horizontais HTML
A tag <hr> define uma quebra temática numa página HTML e
geralmente é exibida como uma régua horizontal.
O elemento <hr> é usado para separar o conteúdo (ou definir
uma mudança) numa página HTML.
A tag <hr> é uma tag vazia, o que significa que não possui
tag final.
41

42
BÁSICO DO HTML
Quebras de linha HTML
A tag <br> define uma quebra de linha.
Use <br> quando quiser uma quebra de linha (uma
nova linha) sem iniciar novo parágrafo.
Exemplo:
<p>Isto é<br>um paragrafo<br>com quebras de linha.</p>
42

43
BÁSICO DO HTML
O elemento HTML <pre>
O elemento <pre> define o texto pré-formatado.
O texto dentro de um elemento <pre> é exibido numa fonte
de largura fixa (geralmente Courier) e preserva os espaços e
as quebras de linha.
43

44
BÁSICO DO HTML
Citações HTML
O elemento <blockquote> define uma secção citada de
outra fontes.
Exemplo:
<body>
<p>Aqui está uma citação do site Melhores Destinos:</p>
<blockquote cite="https://www.melhoresdestinos.com.br/ilha-da-madeira-
em-portugal.html">
A Ilha da Madeira está entre os melhores destinos de Portugal e do mundo
para os viajantes apaixonados por paisagens espetaculares. É o lugar
ideal para quem busca novidades em meio à Europa ou deseja ir um pouco
além de Lisboa.
</blockquote>
</body>
44

45
BÁSICO DO HTML
Citações HTML
O elemento <q> tem por objetivo realçar citações curtas.
Exemplo:
<body>
<p>Aqui está uma citação sobre restaurantes em Lisboa.</p>
<q>
O Restaurante Típico Ilha da Madeira, convida-o a experimentar o sabor
verdadeiro da cozinha tradicional madeirense em Lisboa.
</q>
</body>
45

46
BÁSICO DO HTML
Citações HTML
O elemento <abbr> define uma abreviatura ou acrónimo
como "HTML", "CSS", "Sr.", "Dr.", "ASAP", "ATM".
As abreviações de marcação podem fornecer informações
úteis para navegadores, sistemas de tradução e mecanismos
de pesquisa.
Podemos usar o atributo <title> para mostrar a descrição da
abreviatura / acrônimo ao passar o mouse sobre o elemento.
46

47
BÁSICO DO HTML
Citações HTML
Exemplo:
<body>
<p>Este Arquipelago da Madeira foi descoberto em 1419, por navegadores
<abbr title=‚Tristão Vaz Teixeira, Bartolomeu Perestrelo e João
Gonçalves Zarco"> Portugueses</abbr> .</p>
</body>
47

48
BÁSICO DO HTML
Citações HTML
O elemento <cite> define o título de um trabalho criativo
(por exemplo, um livro, um poema, uma música, um filme,
uma pintura, uma escultura, etc.)
Nota: o nome de uma pessoa não é o título de uma obra.
O texto no <cite>elemento geralmente é processado
em itálico
48

49
BÁSICO DO HTML
Citações HTML
Exemplo:
<body>
<p><cite>O Grito</cite> por Edvard Munch. Foi pintado em 1893.</p>
</body>
49

50
BÁSICO DO HTML
Cometários HTML
Os comentários HTML não são exibidos no navegador, mas
podem ajudar a documentar seu código-fonte.
Exemplo:
<body>
<p><cite>O Grito</cite> por Edvard Munch. Foi pintado em 1893.</p>
<!– Falta adicionar a imagem da pintura, verificar direitos de uso -->
</body>
50

51
BÁSICO DO HTML
Links HTML
Os cabeçalhos HTML são definidos com as tags <a>
<a href="https://www.google.com">Isto é um link</a>
O destino do link é especificado no href atributo.
Os atributos são usados para fornecer informações adicionais
sobre os elementos HTML.
51

52
BÁSICO DO HTML
Links HTML
Por padrão, os links aparecerão da seguinte forma em todos
os navegadores:
• Um link não visitado está sublinhado e em azul
• Um link visitado está sublinhado e roxo
• Um link ativo está sublinhado e vermelho
Os links podem, é claro, ser estilizados com CSS, para obter
outra aparência!
52

53
BÁSICO DO HTML
Links HTML - target
O atributo target especifica onde abrir o documento
vinculado.
Por padrão, a página vinculada será exibida na janela do
navegador atual. Para alterar isso, você deve especificar outro
destino para o link.
53

54
BÁSICO DO HTML
Links HTML - target
O target atributo pode ter um dos seguintes valores:
_self Padrão. Abre o documento na mesma janela /
tabulador em que foi clicado
_blank Abre o documento numa nova janela.
_parente Abre o documento no “frame” parente.
_top Abre o documento em todo o corpo da janela
54

55
BÁSICO DO HTML
Links HTML - title
O atributo title especifica informações extras sobre um
elemento. As informações geralmente são mostradas como
um texto de dica de ferramenta quando o mouse se move
sobre o elemento.
Exemplo:
<a href=‚https://www.google.com‛ title=‚Vá para o site da Google.‛>Isto é um link</a>
55

56
BÁSICO DO HTML
Links HTML – imagem como link
Para usar uma imagem como link, basta colocar a <img> tag
dentro da <a> tag.
Exemplo:
<p>Site da Google!
<a href="https://www.google.com">
<br/><img src="Floresta.jpg" width="50%;" height="50%;" >
</a>
</p>
56

57
BÁSICO DO HTML
Links HTML – endereço de e-mail
Use mailto: dentro do atributo href para criar um link que
abre o programa de e-mail do utilizador (para permitir que ele
envie um novo e-mail).
Exemplo:
<a href="mailto:conta.de.email@dominio.pt">Enviar correio electronico</a>
57

58
BÁSICO DO HTML
Links HTML – botão
Para usar um botão HTML como link é necessário adicionar
código em JavaScript.
O JavaScript vai permitir que se defina o que vai acontecer em
certos eventos, como o clique de um botão.
<button onclick="document.location='contas.html’‛>Use a nossa calculadora</button>
58

59
BÁSICO DO HTML
Imagens HTML
As imagens podem melhorar o design e a aparência de uma
página da web.
Sintaxe de imagens HTML
A tag <img> é usada para inserir uma imagem em uma
página web.
59

60
BÁSICO DO HTML
Imagens HTML
As imagens não são tecnicamente inseridas numa página da
web; as imagens estão vinculadas a páginas da web. A tag
<img> cria um espaço de retenção para a imagem
referenciada.
A tag <img> está vazia, contém apenas atributos e não possui
uma tag de fecho.
60

61
BÁSICO DO HTML
Imagens HTML
A tag <img> tem dois atributos obrigatórios:
- src especifica o caminho para a imagem
- alt especifica um texto alternativo para a imagem
<img src="url" alt=“texto alternativo">
61

62
BÁSICO DO HTML
Imagens HTML
O atributo src especifica o caminho (URL) para a imagem.
Quando uma página da web é carregada, é o broswer, naquele
momento, que obtém a imagem do servidor web e a insere na
página. Portanto, certifique-se de que a imagem realmente
permanece no mesmo lugar em relação à página da web, caso
contrário, os visitantes receberão um ícone de link partido. O
ícone de link partido e o alt texto são mostrados se o
navegador não conseguir encontrar a imagem.
62

63
BÁSICO DO HTML
Imagens HTML
O atributo alt é obrigatório e fornece um texto alternativo
para uma imagem, que deve corresponder a uma breve
descrição da imagem.
Se o utilizador por algum motivo não conseguir visualizar
(devido à ligação lenta, um erro no atributo src).
O valor do atributo alt deve descrever à imagem:
<img src="img_chania.jpg" alt="Flowers in Chania">
63

64
BÁSICO DO HTML
Imagens HTML
Os atributos width e height definem a largura e a altura
da imagem em pixels.
<img src="Floresta.jpg" alt="Imagem Floresta." width="600px;" height="398px;">
Também se pode utilizar o atributo style para especificar a
largura e a altura de uma imagem.
<img src="Floresta.jpg" alt="Imagem Floresta." style=‚width:600px;height:398px;">
64

65
BÁSICO DO HTML
Imagens HTML
Por norma as imagens ficam numa pasta diferente dos
ficheiros html, principalmente, por uma questão de
organização. Neste caso o caminho correto para a imagem
deve ser incluída no atributo src.
<img src="/imagens/Floresta.jpg" alt=‚Imagem de floresta." style="width:600px;height:400px;">
65

66
BÁSICO DO HTML
Imagens HTML
Alguns sites apontam para uma imagem em outro servidor.
Neste caso o URL completo para a imagem deve ser incluído
no atributo src.
<img src="https://www.florest.com/imagens/floresta.jpg" alt="Imagem de Floresta.">
As imagens externas podem estar protegidas por direitos de
autor. Se você não obtiver permissão para usá-lo, pode estar
violando as leis de direitos autorais. Além disso, você não
pode controlar imagens externas; elas pode ser removidas ou
alteradas.
66

67
BÁSICO DO HTML
Imagens HTML - Base 64
Podemos ainda ter as imagens embutidas na própria pagina
de html. Neste caso o atributo src deve ser informado que a
imagem está codificada em Base64.
Este tipo de codificação pode ser executada com o auxilio de
sites como o
https://www.base64-image.de/ ou https://base64.guru/
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q …. eMEqCC9YmBEoiezvAMtIuiSV7z//Z" alt=‚Imagem de
Floresta." style="width:600px;height:400px;">
67

68
BÁSICO DO HTML
Imagens HTML - Flutuante
A propriedade CSS float faz com que a imagem possa
flutuar à direita ou à esquerda de um texto.
<p><img src=‚Floresta.jpg" alt=‚Floresta‛ style="float:right;width:60px;heig
ht:40px;"> A Floresta irá flutuar a direita do texto.</p>
<p><img src=‚Floresta.jpg" alt=‚Floresta‛ style="float:left;width:60px;heigh
t:40px;"> A Floresta irá flutuar a esquerda do texto.</p>
68

69
BÁSICO DO HTML
Imagens HTML - Formatos
69
Abreviatura Fomato do Ficheiro Extensão
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

70
BÁSICO DO HTML
Imagens HTML - mapa de imagens
A tag <map> é usada para definir um mapa de imagem. Um
mapa de imagem é uma imagem com áreas clicáveis.
O elemento <map> contém vários elementos <area>, que
definem as áreas clicáveis no mapa de imagem.
70

71
BÁSICO DO HTML
<img src=‚floresta.jpg" alt=‚Floresta" usemap="#forestmap">
<map name=‚forestmap">
<area shape="rect" coords="34,44,270,350" alt=‚Tree01" href=‚tree01.htm">
<area shape="rect" coords="290,172,333,250" alt=‚Tree02" href=‚tree02.htm"
>
<area shape="circle" coords="337,300,44" alt=‚Bush01" href=‚bush01.htm">
</map>
71

72
BÁSICO DO HTML
Como funciona?
A ideia por trás de um mapa de imagem, é que o utilizador
deve conseguir dependendo de onde se clica, ter varias
opções de escolha.
A imagem
A imagem é inserida usando a tag <img> e adicionalmente
configuramos o atributo usemap
72

73
BÁSICO DO HTML
<img src=‚floresta.jpg" alt=‚Floresta" usemap="#forestmap">
O valor de usemap começa com uma hash tag # ,seguida pelo
nome do mapa de imagem e é usado para criar um
relacionamento entre a imagem e o mapa de imagem.
Qualquer imagem pode ser um mapa de imagens!
73

74
BÁSICO DO HTML
Criar Mapa de Imagem
Em seguida, adicione um elemento <map>. O elemento
<map> é usado para criar um mapa de imagem e está
vinculado à imagem usando o atributo name, obrigatório.
…
</map>
O atributo name deve ter o mesmo valor do atributo usemap
no elemento <src>.
74

75
BÁSICO DO HTML
Áreas
Em seguida, vamos adicionar as áreas clicáveis. Cada área
clicável é definida usando um elemento <area>.
75

76
BÁSICO DO HTML
Formas
As áreas clicáveis podem ter uma destas 4 formas, a saber,
• rect - define uma região rectangular
• circle - define uma região circular
• poly - define uma região poligonal
• default - define toda a região
76

77
BÁSICO DO HTML
Coordenadas
As coordenadas dos pontos são em para o eixo do x e outra
para o eixo do y.
As coordenadas tem sintaxes diferentes de configuração,
consoante o tipo de forma que estamos a configurar.
77

78
BÁSICO DO HTML
A forma rect:
• 34 - o rectângulo inicia a 34 pixéis da esquerda da imagem principal
• 44 - o rectângulo inicia a 44 pixéis do topo da imagem principal
• 270 - o rectângulo termina a 270 pixéis da esquerda da imagem principal
• 350 - o rectângulo termina a 350 pixéis do topo da imagem principal
78

79
BÁSICO DO HTML
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355
,58,352,37,322,40,259,103,161,128,147" href=‚who_knows.htm">
A forma poly contém vários pontos de coordenadas, o que
cria uma forma formada com linhas retas (um polígono). Isso
pode ser usado para criar qualquer forma.
Cada par x,y é um ponto a contar sempre de 0,0. O polígono é
criado desenhando linhas retas entre os pontos, formando o
objeto desejado.
79

80
BÁSICO DO HTML
Imagens HTML - mapa de imagens e JavaScript
Uma área clicável também pode acionar uma função
JavaScript.
Adicione um evento click ao elemento <area> para executar
uma função em JavaScript.
80

81
BÁSICO DO HTML
Imagens HTML - mapa de imagens e JavaScript
<script type="text/javascript">
function funcao_java(){
alert(‚Imagemap‛);
}
</script>
<area shape="rect" coords="34,44,270,350" alt=‚Tree01" onclick=‚funcao_java()‛ href=‚tree01.htm">
</map>
81

82
BÁSICO DO HTML
Imagens HTML - imagens de fundo
Uma imagem de fundo pode ser especificada para quase qualquer elemento
HTML.
Para adicionar uma imagem de fundo em um elemento HTML, use o atributo
style HTML e a propriedade background-image CSS.
<div style="background-image: url(‘floresta.jpg');">
Adicionar uma imagem de fundo a uma página
No elemento body, configuramos um propriedade style da seguinte forma:
<style>
body {
background-image: url(‘floresta.jpg');
}
</style>
82

83
BÁSICO DO HTML
Fundo de repetição
Se a imagem de fundo for menor que o elemento, a imagem se repetirá,
horizontal e verticalmente, até chegar ao final do elemento.
<style>
body {
background-image: url(‘floresta.jpg');
}
</style>
Para evitar que o fundo se repita, adicionamos a seguinte propriedade
configurada da seguinte forme:
background-repeat: no-repeat;
83

84
BÁSICO DO HTML
Capa de fundo
Se se quiser que a imagem de fundo cubra todo o elemento, você pode
definir a propriedade background-size para cover.
Depois, para garantir que todo o elemento é sempre coberto, defina a
propriedade background-attachment como fixed:
Desta forma, a imagem de fundo cobrirá todo o elemento, sem alongamento
(a imagem manterá suas proporções originais)
<style>
body {
background-image: url(‘floresta.jpg’);
background-attachment: fixed;
background-size: cover;
}
</style>
84

85
BÁSICO DO HTML
Alongamento de fundo
Se se quiser que a imagem de fundo se estique para caber em todo o
elemento, você pode definir a propriedade background-size para 100% 100%.
Se tentarmos redimensionar a janela do Browser , vamos assistir a que a
imagem será esticada, mas sempre cobrindo todo o elemento.
<style>
body {
background-image: url(‘floresta.jpg’);
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
85

86
BÁSICO DO HTML
Tabelas HTML
As tabelas HTML permitem que os programadores
da web organizem os dados em linhas e colunas.
Definir uma tabela HTML
A tag <table> define uma tabela HTML.
Cada linha da tabela é definida com um tag <tr>.
Cada cabeçalho da tabela é definido com um tag <th>.
Cada célula da tabela é definido com uma tag <td>.
Por pré definição, o texto nos elementos <th> estão
em negrito e centralizado, e nos elementos <td> é
regulado e alinhado à esquerda.
86
<table style="width:100%">
<tr>
<th>Nome</th>
<th>Apelido</th>
<th>Idade</th>
</tr>
<tr>
<td>Antonio</td>
<td>Silva</td>
<td>34</td>
</tr>
<tr>
<td>Jose</td>
<td>Maria</td>
<td>27</td>
</tr>
</table>

87
BÁSICO DO HTML
Tabelas HTML
Adicionar um limite
Para adicionar um limite numa tabela, use a popriedade border CSS.
<style>
table, th, td {
border: 1px solid black;
}
</style>
87

88
BÁSICO DO HTML
Tabelas HTML
Limites recolhíeis
Para permitir que os limites se contraiam, adicione a propriedade border-
collapse CSS
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
88

89
BÁSICO DO HTML
Tabelas HTML
Adicionar espaçamento nas células
Preenchimento da célula especifica o espaço entre o conteúdo da célula e os
seus limites.
Se não se especificar um preenchimento, as células da tabela serão exibidas
sem preenchimento.
Para definir o preenchimento, use a propriedade padding CSS
<style>
table, th, td {
padding : 15px;
}
</style>
89

90
BÁSICO DO HTML
Tabelas HTML
Alinhar títulos à esquerda
Por padrão, os títulos das tabelas estão em negrito e centralizados.
Para alinhar à esquerda os títulos da tabela, use a propriedade text-align CSS
<style>
th {
text-align : left;
}
</style>
90

91
BÁSICO DO HTML
Tabelas HTML
Unir colunas no cabeçalho
Para fazer uma célula ocupar mais de uma coluna, use o atributo colspan
<tr>
<th>Nome</th>
<th colspan="2">Telefone</th>
</tr>
<tr>
<td>José Maria</td>
<td>915577854</td>
<td>935577855</td>
</tr>
</table>
91

92
BÁSICO DO HTML
Tabelas HTML
Unir colunas nas células
Para fazer uma célula ocupar mais de uma linha, use o atributo rowspan
<tr>
<th>Nome</th>
<td>José Maria</td>
</tr>
<tr>
<th rowspan=‚2‛>Telefone</th>
<td>935577854</td>
</tr>
<tr>
<td>935577855</td>
</tr>
</table>
92

93
BÁSICO DO HTML
Tabelas HTML
Adicionar um Título
Para adicionar uma legenda a uma tabela, use a tag <caption>
<caption>Despesas Mensais</caption>
<tr>
<th>Mês</th>
<th>Despesas</th>
</tr>
<tr>
<td>Janeiro</td>
<td>300€</td>
</tr>
<tr>
<td>Fevereiro</td>
<td>350€</td>
</tr>
</table>
93

94
BÁSICO DO HTML
Tabelas HTML
Adicionar um estilo
Para definir um estilo especial a uma tabela, adicione um atributo id.
<table id=‚t01‛>
…
</table>
<style>
#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
94

95
BÁSICO DO HTML
Tabelas HTML
Configurar cores as linhas e cabeçalhos
<table id=‚t01‛>
…
</table>
<style>
#t01 tr:nth-child(even) {
background-color: #eee;
}
#t01 tr:nth-child(odd) {
background-color: #fff;
}
#t01 th {
width: 100%;
color: white;
background-color: black;
}
</style>
95

Introdução ao HTML 5 do Básico ao avançado

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Introdução ao HTML 5 do Básico ao avançado

Semelhante a Introdução ao HTML 5 do Básico ao avançado (20)

Introdução ao HTML 5 do Básico ao avançado