HTML5 e CSS

Parte 1
Professora: Flávia Balbino da Costa
[email protected]
Bibliografia recomendada on-line:
 HTTPS://DEVELOPER.MOZILLA.ORG/PT-BR/
 https://www.w3.org/standards/ (referência oficial, criada pela WWW)
 https://html.spec.whatwg.org/multipage/ (grupo de estudos para a
evolução do HTML)
 https://www.w3schools.com/ (Elaborada por uma empresa Norueguesa –
Refsnes Data, não tem nada a ver com a W3C)
Bibliografia recomendada – livros:

Ref. Bibliográfica da imagem: Curso de HTML e CSS – Gustavo Guanabara

Bibliografia recomendada – livros:

Ref. Bibliográfica da imagem: Curso de HTML e CSS – Gustavo Guanabara

Bibliografia recomendada – livros:

Ref. Bibliográfica da imagem: Curso de HTML e CSS – Gustavo Guanabara

Vídeo interessante sobre o funcionamento da Internet:

 HTTPS://WWW.YOUTUBE.COM/WATCH?V=TNQSMPF24GO
Introdução
O que é Linguagem HTML?

Para se construir as Home Pages da Internet é

necessário um conjunto de informações
organizadas para se colocar objetos, os textos e os
hipertextos disponíveis para a WWW.
Esse conjunto de elementos que definem os textos,
objetos e layout a serem incorporados à página é
chamado de Linguagem de marcação de
hipertexto, denominada HTML (Hiper Text
Markup Language).
Essa linguagem bastante prática e simples, que
permite ao usuário criar textos formatados de
diferentes formas e cores, permite a criação de
relacionamentos entre o texto ou imagem e outro
documento. A HTML usa um sistema de "Marcas"
no documento para comunicar ao software
(browser) qual deverá ser o formato daquele texto
marcado, quando deverá ser iniciado um novo
parágrafo, que texto será usado como link, etc.
As páginas da internet são arquivos criados através
de textos, imagens, sons, animações e hiperlinks
(também chamados de links ou hipertextos).
A HTML nos permite construir o código desses
arquivos que serão salvos com a extensão .htm
ou .html e posteriormente visualizados no
browser.
O conjunto de várias páginas (arquivos) que falam
da mesma empresa ou um mesmo assunto recebe o
nome de site. A ligação entre elas, palavras chave
ou imagens que ao clicarmos com o mouse são
"carregadas", denominamos link.
A HTML e as CSS?
HTML é uma linguagem de marcação de
hipertexto (clica em uma área e desvia para outro
local), mas não é uma Linguagem de Programação.
HTML é uma linguagem focada em conteúdo.

As CSS são as folhas de estilo em cascata, ou seja,

permite deixar as páginas atrativas.
Exemplo de Linguagens de programação:

JavaScript, PHP, Phyton, etc.

OBS: JavaScript permite que o usuário tenha

interação com o site.
Estrutura básica de um documento
Os elementos de documento inteiro são aqueles
responsáveis pelas formatações e configurações
que servirão para todo o arquivo HTML que você
está construindo.
Eles permitem a padronização da página que está
sendo construída.
Os elementos de documento inteiro são
responsáveis por estabelecer o título que ficará na
barra de títulos da página, o padrão de imagem ou
cor de fundo que serão visualizados na página, pela
cor da fonte que será padrão da página, pelas cores
dos links, links ativos e links visitados.
Na grande maioria os comandos são os pares, do
tipo início e fim, delimitando o bloco de texto no
qual o comando está sendo aplicado. A tag de fim
é idêntica a tag de início, apenas sendo precedida
por uma barra "/".
Em alguns casos as tags são solitárias, bastando
um único elemento para fazer a indicação
necessária.
A grande maioria dos comandos possuem também
atributos, que funcionam como comandos dentro
de comandos. Você precisa separar os atributos
por um espaço e não existe o /atributo. Ao fechar o
comando seus atributos também são fechados.
O Browser não respeita espaços entre palavras ou
mudanças de linhas ou parágrafos que são feitos no
editor de html. Para isso, existem comandos
próprios.
Por uma questão de estética e também para
facilitar uma posterior manutenção na página, é
indicado que você mantenha uma determinada
organização (indentação do código).
Procure escrever os códigos de forma que
realmente facilite o entendimento de qualquer
pessoa que precise entendê-los posteriormente.
 Diz ao navegador que iremos desenvolver Informando o idioma da página
um documento em HTML5 permitimos que o navegador faça
traduções para outros idiomas
<!DOCTYPE html>
<html lang=“pt-br”> O site será compatível com caracteres
<head> UTF-8, como acentos, till, cedilhas, etc.

<meta charset=“UTF-8”> Essa linha indica

que o site irá
Área de <meta name=“viewport” ocupar 100% da
configurações
content=“width=device-width, parte branca do
navegador (padrã
initial-scale=1.0”
<title> Título da página </title>
</head> Título que irá
<body> aparecer na Barra
Área do corpo de Títulos do
da página <h1> Título nível 1 </h1> navegador
</body>
</html>
Front End
Back End
Full Stack
Como html não é uma linguagem de programação,
você não é avisado de erros cometidos na digitação
do seu código. Portanto, fique atento ao digitar os
comandos, pois se houver algum erro de digitação o
browser pode não visualizar a página.
Site estático é quando este é entregue para todos os
clientes, ou seja, os resultados visuais são os
mesmos.
O navegador do lado da máquina cliente é
responsável por executar as tecnologias básicas
client side: HTML, CSS e JavaScript rodando com a
máquina cliente (front end).
Ref. Bibliográfica da imagem: Curso de HTML e CSS – Gustavo Guanabara
O profissional front end irá receber do designer
todas as especificações visuais que serão
implementadase fará o desenvolvimento deste,
preocupando-se com o visual e a interatividade do
site.
O profissional back end irá trabalhar com as
ferramentas que rodam no lado do servidor (server
side), preocupando-se com a interação do código
com o servidor. É necessário conhecer linguagens
como PHP, JavaScript com Node, C#, Phyton, Java,
Ruby, etc.
Ref. Bibliográfica da imagem: Curso de HTML e CSS – Gustavo Guanabara
Um site de vendas não pode ser estático, e sim,
dinâmico, porque seria impossível gerenciar
atualizações de estoque. Seria inviável fazer uma
loja on-line somente com tecnologias cliente-side.
Um site dinâmico é armazenado no lado do
servidor, com uma base de dados (banco de dados).

Ref. Bibliográfica da imagem: Curso de HTML e CSS – Gustavo Guanabara

O profissional full-stack reúne os conhecimentos
e capacidades de front-end e back-end.

Ref. Bibliográfica da imagem: Curso de HTML e CSS – Gustavo Guanabara

Ferramenta – VS Code:
Instalação do Visual Studio Code -
https://code.visualstudio.com/download
Clique na opção Windows;
Siga o instalador;
Na última etapa, clique na opção Concluir, abrindo
logo a seguir o aplicativo.
Na tela de abertura, na parte Customize, tools and
languages, selecione o item JavaScript;
Na tela inicial, clique na opção Extensões (último
botão localizado na parte esquerda da tela;
Em search, digite a palavra portugues.
Clique no botão Instalar (que se encontra na parte
direita), Pacote de Idioma para o VS Code em
Português Brasileiro.
Clique em Arquivo, Preferências, Configurações
(ou clique no botão da engrenagem, localizado no
canto inferior esquerdo);
No lado direito da tela, digite Word wrap, na parte de
pesquisa;
Na opção Word Wrap, marque a opção ON (quebra
de linha do código);
Digite a palavra size, na barra de pesquisa;
Em Editor font size, escolha o tamanho da fonte do
código (coloquei 20);
Digite a palavra theme, na barra de pesquisa;
Na opção Wordbench: Color Theme, escolha a
opção Defaut Dark+ ou Defaut Light+.
Clique em Arquivo, marque a opção Salvamento
automático.
Elementos de documento em HTML
Existe uma estrutura básica que deve ser seguida
na construção do arquivo html para que o browser
possa posteriormente interpretar e traduzir o
documento.
Os comandos html recebem o nome de tag.

Elas são escritas entre os sinais "<" e ">" e podem

ser escritos em letras maiúsculas ou minúsculas
que serão reconhecidos igualmente pelo browser.
HTML – Tags de abertura e fechamento (algumas
não tem tags de fechamento).

Exemplos:

<h1> Título nível 1 </h1>

<p> Texto de um parágrafo </p>

CSS – Fica dentro de uma tag stile, usando
seletores. Dentro dos seletores temos as
declarações. Cada declaração é um par de
propriedades e valores.

Exemplo:

H1{
font-family: Arial;

font-size: 20pt;

color: blue;

}
Criando a primeira página em
HTML no VS Code:
No VS Code, vamos criar uma nova pasta só para
colocar nossos exercícios.
Clique em Arquivo, Abrir Pasta;

Escolha um local e crie uma Nova Pasta, com o

nome de Doacao_Legal. Depois selecione a pasta
criada, clique no botão Selecionar Pasta.
Na coluna da esquerda, clique no botão Novo
Arquivo. Digite Index.html.
Para adicionar com facilidade o escopo básico de
uma página em HTML no VS Code, no lado direito
da tela, digite ! e espere aparecer a opção !
(Abreviação Emet), pressione ENTER.
Aparecerá automaticamente um documento básico
em HTML5.
Marcas de Subtítulo
As marcas de subtítulo são tags do tipo início/fim
e fazem com que o texto digitado entre elas seja
considerado um título, ou subtítulo.
Existem 6 níveis diferentes de títulos que variam
de 1 a 6. O título de nível 6 é o menor e o de nível 1
o maior.
O texto que está digitado entre as tags de subtítulo
já vem em negrito. Este comando é considerado
um comando de linha, o que significa que após o
fechamento da tag, o próximo comando, seja ele a
digitação de um texto, inserção de uma imagem,
etc. virá na linha de baixo.
A tag que determina o subtítulo é <Hn>, onde n
define o tamanho do título e varia de 1 a 6. O
comando Hn possui o atributo align, de extrema
importância para o alinhamento do título em
relação a página.
<Hn> Define o tamanho da fonte para título ou
subtítulos. - n = nº de 1 até 6.
Atributos:
ALIGN="valor" Define que tipo de alinhamento se quer
para o subtítulo – Valor = Left (esquerda)
ou Right (direita) ou Center (centralizado).
Left é o valor default, portanto não é
necessário digitá-lo.
</Hn> Usado para encerrar a marca Hn. Finalizar
o uso desse código de subtítulo n.
Marcas de quebra de Linhas e Parágrafos
As marcas de linha inserem uma linha em branco
no momento em que a página é visualizada no
browser.
As marcas de parágrafo orientam ao browser que
interprete o texto que está entre o início e o fim da
tag seja um parágrafo.
Na prática, a diferença entre eles é que com a
marca de linha o espaçamento vertical entre uma
linha e outra é menor quando comparado ao
espaçamento vertical entre um parágrafo e outro.
Diferente do que você está acostumado ao usar um
editor de texto, um enter em linguagem html não
significa nada. Quando a página é visualizada no
browser é como se aquele enter que foi dado no
editor de html simplesmente não existisse.
O browser muda de linha quando o conteúdo
digitado já ocupou toda a largura da página.
Algumas vezes você vai precisar orientar o browser
a mudar de linha ou de parágrafo, independente da
mesma já ter sido preenchida ou não, exatamente
como você faz num editor de texto. Nesse caso você
vai precisar utilizar os comandos de quebra de
linha ou de novo parágrafo.
A tag <BR> orienta o browser a inserir uma linha
em branco no local onde a mesma é digitada,
fazendo com que tudo que for digitado logo após o
comando seja visualizado na próxima linha. Esse é
um comando que não possui início e fim, o que
significa que não existe a tag </BR>.
As tags <P> </P> devem ser colocadas no início e
fim do bloco de texto que o browser deve
interpretar como um parágrafo. O que vier depois
do comando </P> será inicializado na próxima
linha, porém com um espaço um pouco maior em
relação a linha anterior se comparado com <BR>.
<BR> BR - quebra de linha forçada
<P> Texto do parágrafo </P> P – parágrafo
Atributos:
ALIGN=valor Define que tipo de alinhamento
se quer para o subtítulo – Valor
= Left (esquerda), Right
(direita), Center (centralizado)
ou Justify (justificado).
Left é o valor default, portanto
não é necessário digitá-lo
Dica1: Não crie espaçamento em sua página colocando
um monte de quebra de página <BR><BR><BR>
Através das CSS iremos fazer tais configurações.

Dica2: Para inserir um parágrafo automaticamente,

digite p e dê enter. Dentro da tag <p> digite lorem.

Dica3: Trabalhar com títulos em níveis de forma correta

é se preocupar com a semântica do texto. Usar a tag
<Hn> não é o mesmo que formatar tamanho de fonte.
Dicas:
Caso queira inserir alguns símbolos específicos
(HTML Entities) no seu texto, use os códigos abaixo:
Espaço em branco &nbsp; < Menor que &lt;
® Marca registrada &reg; > Maior que &gt;
© Copyright &copy;
™ Trade Mark &trade;
€ Euro &euro;
£ Libra (pound) &pound;
¥ Yen &yen; OBS: Para saber mais sobre símbolos e seus
¢ Cent &cent; códigos, acesse o W3Schools, na área de Misc
∅ Vazio &empty; Symbols:
∑ Soma &sum; https://www.w3schools.com/charsets/ref_ut
Δ Delta &Delta; f_symbols.asp
← Seta esquerda &larr;
↑ Seta acima &uarr;
→ Seta direita &rarr;
↓ Seta baixo &dar;
Dicas:
Caso queira inserir emojis utilize códigos Unicodes
que estão no site:
https://emojipedia.org/

1) Escolha o emoji de sua preferência;

2) Clicando no botão Copiar, o emoji será
copiado para a área de transferência, porém
poderá não funcionar em todos os navegadores;
4) Role a barra de rolagem e mais para o final da
página, procure pelo Codepoints.
5) Selecione o que está a partir de U+. Por
exemplo: Se o código é U+1F415, selecione
apenas 1F415. No código coloque &#x1F415.
 Marcas de Linha
A marca de linha orienta o browser a inserir uma
linha horizontal na tela.
O comando de marca de linha <HR> é do tipo que
não tem o comando fim, ele é composto apenas do
início e seus atributos.
É uma forma de deixar a página com uma
visualização mais clara, fazendo com que o usuário
tenha mais facilidade em localizar o que procura.
São muito úteis em textos grandes, para separar
assuntos diversos, para dar a idéia de término de um
texto ou ainda para separar um bloco que mereça
destaque.
<HR> HR - traço horizontal na tela
atributos:
SIZE=n Define a espessura do traço que será colocado na
tela.
n = espessura do traço
0 - faz apenas um traço
A partir de 1 - cria um traço em baixo relevo,
quanto maior o número maior a largura do traço.
WIDTH = n% Define o cumprimento do traço na tela
n% = percentual de ocupação do traço com relação
a largura da tela. Se for omitido a linha irá ocupar
toda a largura da tela.
NOSHADE Apresenta o traço sem relevo e sombra, traço
sólido.
COLOR = #cor Define a cor do traço que será colocado na tela.
#cor = código da cor desejada.
ALIGN=valor Alinhamento do traço. Valor poderá ser:
center(centralizado – valor padrão, não precisa ser
digitado), left(esquerdo), right (direito).
Imagens
Existem vários sites que oferecem imagens de
domínio público para serem usados em nossos
projetos. Portanto, é pertinente ler as instruções para
uso dessas imagens. Algumas delas nos deixam usar
a arte apenas se o artista for creditado em um texto
localizado em nosso site.
No Google Images, clique na opção Ferramentas
para colocar filtros.
Na hora de baixar verifique a questão dos direitos
autorais (Creative Commons, Creative Commons 0
ou Copyright).
Onde encontrar imagens de domínio público?
Pxhere - https://pxhere.com/pt/photo/

FreePik

Rawpixel

Pixabay

Livreshot

Wikimedia Commons
Informações sobre Creative Commons:
https://creativecommons.org/licenses/?lang=pt_BR
Adaptação/Remix/ Créditos
Tipo de licença Distribuição Uso comercial Observações
Reutilização obrigatórios
CC BY (Atribuição) Sim Sim Sim Sim Nenhuma

A obra derivada
CC BY-SA
deve utilizar a
(Atribuição- Sim Sim Sim Sim
mesma licença da
CompartilhaIgual)
original
CC BY-ND Somente o
(Atribuição- conteúdo Sim Sim Sim Nenhuma
SemDerivações original
CC BY-NC
(Atribuição- Sim Sim Não Sim Nenhuma
NãoComercial)
CC BY-NC-SA A obra derivada
(Atribuição- deve utilizar a
Sim Sim Não Sim
NãoComercial- mesma licença da
CompartilhaIgual) original
CC BY-NC-ND
Somente o
(Atribuição
conteúdo Não Não Sim Nenhuma
NãoComercial-
original
SemDerivações)
CC0 (Domínio
Sim Sim Sim Não Nenhuma
Público)
Formatos das imagens que podem ser usadas na Internet.
Basicamente JPG ou PNG:

JPG – melhor formato de compactação, criado em 1983.

PNG – criado para substituir o formato GIF (permite

transparência), surgiu em 1996 pela W3C. PNG permite
apenas transparência. Também é compactado, mas não
tanto quanto o JPG.
OBS: Evite usar
Exemplo: imagens pesadas,
que ocupam muito
Imagem para fundo da tela – JPG espaço em bytes.
Imagem para flutuar sobre a tela - PNG
Baixar o aplicativo GIMP, open sourse, para Windows.
Redimensionar imagens usando o GIMP:
Abra a imagem com o GIMP (exemplo: Logo_adocao.jpg);
Clique no menu Imagem;
Clique em Redimensionar a Imagem:
Altere para 400 e aperte a tecla TAB

Mantenha a maior resolução possível

clicar
Exportar a imagem:

Clique em Arquivo,
Exportar;
Altere o nome da imagem
para: <NOME400.jpg>;
Na janela que aparece,
altere a qualidade da
imagem (100%);
Clique no botão Exportar.
Redimensione a clicar
imagem agora para 200,
300 e 500.
OBS: Iremos redimensionar imagens com CSS, porém, dessa forma, não
diminui o tamanho que a imagem ocupa em bytes.
Recortar a imagem:
Clique no botão Ferramenta de corte, que está localizado
na barra de botões a esquerda;
Recorte a imagem conforme o desejado.
As marcas de formatação de imagem orientam o
browser a exibir o arquivo de imagem determinado
pelo comando <IMG> e seus atributos.
As imagens também deixam a página mais bonita e
atraente aos olhos do usuário.
Os comandos de imagem podem também ser
utilizados como links (visto mais adiante).
A tag de formatação de imagem <IMG> possui
apenas início. Ela serve para determinar o endereço e
nome do arquivo da imagem que será visualizada no
browser.
As imagens utilizadas na página não podem ter a
extensão .bmp. Esses arquivos normalmente são
muito grandes, não sendo possível carregá-los na
internet.
Evite usar JPG que ocupam muito espaço em disco.
No VS Code, digite apenas img e dê Enter.
Aparecerá a tag automaticamente com os atributos.
Com o curso piscando entre as aspas, aperte CTRL
+ Espaço e aparecerá a lista de imagens da pasta.
Podemos carregar imagens que estiverem na
mesma pasta do arquivo .HTM;
Podemos carregar imagens que estiverem dentro de
um sub-pasta da pasta atual;
Podemos carregar imagens de links externos.
<IMG> Apresenta IMAGENS no texto do documento.
Atributos:
SRC="endereço" Define o endereço de origem do arquivo e o seu nome.
Endereço = localização do arquivo + nome do arquivo
(extensões JPG ou PNG )
ALT="texto" Exibe uma explicação (pequeno texto) sobre a imagem
quando o usuário posicionar o mouse sobre a mesma.
Texto = texto que será exibido ao parar o mouse sobre a
imagem.
Com o arquivo Index.html aberto VS Code, digite o
comando conforme a figura a seguir. Digite abaixo
do Título Animais para a adoção
Imagens dinâmicas
Vamos trabalhar com uma imagem que está na pasta
do nosso site.
Abra o arquivo kits.jpg no Gimp e faça uma seleção
no formato quadrado em cima da imagem. Para isso
clique na ferramenta Seleção, clique em alguma
parte da imagem, segure a tecla SHIFT, para
conseguir fazer a seleção exatamente quadrada.
Crie três imagens, com os seguintes tamanhos:
300 x 300,
700 x 700 e
1000 x 1000.
 Essas
imagens
serão
carregadas
pelo
navegador
de acordo
com o
tamanho
da janela
atual.
Crie três imagens, com os seguintes tamanhos:
300 x 300 – nome do arquivo: Kits300_300.png
700 x 700 – nome do arquivo: Kits700_700.png
1000 x 1000 - – nome do arquivo: Kits1000_1000.png
Crie uma subpasta abaixo da pasta onde estão os
arquivos do nosso site, chamada
Imagens_Sons_Videos. Insira os três arquivos de
imagens que foram criados anteriormente.

Como exemplo, crie um novo arquivo na pasta do

nosso site, chamado Imagens_Sons_Videos.html,
para estudarmos este recurso. Usaremos a tag
<picture>, que permite que sejam criadas várias
fontes, ou seja, teremos várias opções de imagens.

Dentro da tag <picture> iremos colocar algumas tags

<img>. A novidade é que será concentradas as
outras fontes de imagem. Por padrão, a imagem
Kits1000_1000.png (1000x1000px) será carregada.
Quando a janela do navegador chegar perto dos
1000 pixels de largura, a foto não vai mais caber,
obrigando o usuário a suar barras de rolagem.

Vamos agora adicionar uma linha para resolver esse

problema:
A tag <source> possui três atributos:
‣ type - indica o media type da imagem que usamos.
Para ver a lista completa de media types, acesse o
site da IANA:
https://www.iana.org/assignments/media-types/
media-types.xhtml
‣ srcset - configura o nome da imagem que será
carregada quando o tamanho indicado for atingido
(colocamos a imagem média – Kits700_700.png).
‣ media - indica o tamanho máximo a ser
considerado para carregar a imagem
indicada no atributo srcset. Podemos até colocar o
valor exato de 1000px na propriedade max-width,
mas o resultado melhor é colocar um pouquinho
acima (1050px).
Se diminuirmos mais a janela do browser (ou se
nosso site for visitado através de um smartphone), a
barra de rolagem irá aparecer novamente, porque as
imagens, tanto a de 1000 x 1000, como a de 700 x
700, poderão ficar maiores que o tamanho da janela.

Vamos inserir mais uma tag <source>:

OBS: É importante ressaltar que existe uma ordem
entre os <source>.
Nessa configuração, os itens mais acima devem ser
os menores tamanhos para max-width e os seguintes
devem ser os maiores, de forma crescente.
O último item dentro de <picture> deve ser a
imagem padrão.
Inserindo Áudios
A HTML5 proporcionou inserir áudios em nosso sites
sem depender necessariamente de JavaScript ou
plugins extras.
Como exemplo, vamos baixar um arquivo .mp3 do
YouTube. Para isso, você precisa ter um canal.
Entre na sua conta, clique em YouTube Studio.
No canto esquerdo da tela, clique em Biblioteca de
Áudio.
Clique em Pesquisar ou Filtrar Biblioteca e escolha
a opção Atribuição Não Necessária.
Caso queira, faça outros filtros, tais como: Gênero,
Duração, etc.
Escolha o áudio de sua preferência e clique em
Fazer Download. Copie o arquivo que foi baixado, da
pasta Download do seu computador, para a
subpasta do nosso site, Imagens_sons_vídeos.
Agora vamos usar a tag <audio> e alguns <source>
que irão fazer o site tocar um tipo de arquivo de
áudio.
Abra o arquivo Imagens_Sons_Videos.html, para
estudarmos este recurso.
Insira a seguinte tag no final do código:
Nem todos os navegadores possuem suporte para
execução de arquivos .mp3. Outros tipos de
arquivos podem ser suportados, tais como .wav
e .ogg.
Neste caso, teríamos que ter vários tipos de áudios
dentro da mesma pasta e usaríamos o atributo
<source>, permitindo caminhos para outros tipos de
arquivos.
Atributos da tag <audio>:
 preload - indica se o áudio será pré-carregado ou
não e aceita três valores:

metadata - vai carregar apenas as informações sobre o

arquivo (tamanho, tempo, informações de direitos, etc).
none - não vai carregar absolutamente nada até que o
usuário clique no botão play ou um script inicie a
reprodução.
auto (padrão) - vai carregar o arquivo de áudio inteiro
assim que a página for carregada, mesmo que o
usuário nunca aperte o play.
Atributos da tag <audio> :
 controls - vai apresentar o player na tela. Caso não
seja colocado na tag <audio>, o controle será
transparente e o usuário não poderá interagir com
ele.
 autoplay – inicia a reprodução do áudio assim que
a página for carregada.
 loop – fará com que o áudio seja repetido
automaticamente.
Dentro da tag <audio>, poderíamos adicionar vários
<source> com formatos diferentes do mesmo áudio.
O primeiro <source> deverá ser o padrão a ser
executado (primeiro tentativa de execução). Os
demais só serão carregados caso o de cima falhe.
Caso nenhuma das opções de áudio possam ser
suportadas, podemos colocar um link para que o
visitante faça o download do arquivo.
OBS: Para ver a lista completa de media types, acesse
o site da IANA:
https://www.iana.org/assignments/media-types/media-
types.xhtml
Inserindo Vídeos
Caso o arquivo esteja hospedado no nosso próprio
servidor iremos usar a tag <vídeo> para inserir um
vídeo em nosso site.

OBS: Existem vários sites para baixar arquivos CC0,

dentre eles, podemos citar o pixabay.com.
Baixe um vídeo de sua preferência e depois copie da
pasta Download do seu computador, para a
subpasta do nosso site, Imagens_sons_vídeos.
Abra o arquivo Imagens_Sons_Videos.html, para
estudarmos este recurso.
Insira a seguinte tag no final do código:
Podemos ter várias tags <source> dentro da tag
<vídeo>, para que seja possível a exibição de outros
vídeos, com outras extensões.
Dica: É interessantes ter outros formatos do vídeo a
ser exibido em nossa página, porque nem todos os
navegadores suportam exibir todos os tipos de vídeos
disponíveis.
Existem vários aplicativos para conversão de vídeos
(ex: Handbrake, que é opensource). Use algum
deles e crie outros arquivos de vídeos, com outras
extensões, tais como: MP4, WEBM, MPEG e OGG.

Compatíveis com a maioria dos navegadores

Atributos da tag <vídeo>:
width – indicará a largura que o vídeo será exibido.
Nesse exemplo, 600px.
poster - configurará uma imagem que irá aparecer
como uma capa, enquanto o visitante não aperta o
play para reproduzir o vídeo.
controls - configurará os controles do vídeo que irão
aparecer na parte inferior da mídia. Por padrão, os
controles não aparecem.
autoplay – informa ao navegador que o vídeo irá
tocar automaticamente, assim que a página for
carregada.
OBS: Inserir vídeos locais em nosso site poderá ser
algo complicado, visto que vídeos costumam ocupar
muito espaço em disco, o que tornaria dispendioso,
pois o tráfego de dados poderá ser sobrecarregado.
Além da incompatibilidade entre navegadores.

A solução para este problema é inserir vídeos

externos. Temos duas plataformas que hospedam
vídeos e evitam consumir nossos próprios recursos de
host contratado.

YouTube – ultra rápido, porém não possui mecanismo

de restringir visualizações para um determinado grupo
de usuários.

Vimeo – possui mecanismo de restrição de

visualizações para usuários, não tão rápido e é pago.
Para inserir um vídeo de forma bem simples do
YouTube, basta selecionar o vídeo, clique em
Compartilhar e clique na opção Incorporar.
O YouTube apresenta o código pronto em HTML. Caso
deseje, pode-se fazer alterações, tais como tamanho,
borda, etc. Clique no botão Copiar. Depois insira este
código no final do arquivo
Imagens_Sons_Videos.html.
Favicon – Ícone de Favoritos
Para baixar imagens PNG, para criar ícones, entre
no site:

https://www.iconarchive.com/

Ou se quiser desenhar seu próprio ícone, entre no site:

https://www.favicon.cc/

Para gerar um ícone a partir de um texto, ou uma

imagem png ou um emoji:

https://favicon.io/
Favicon – Ícone de Favoritos
Após colocar o ícone na pasta (.ico), abra o arquivo
principal.html e siga os passos:
a) Na área <head>, em cima da tag <title>, digite link.
b) Na caixa que aparece, escolha a opção
link:favicon.
c) Em href, apague favicon.ico, aperte as tecla
CTRL+espaço.
d) Escolha o arquivo de ícone que vc criou
(favicon_png.ico).
e) Salve e veja no browser o ícone inserido no canto
superior esquerdo do browser.
Favicon – Ícone de Favoritos
Formatação em HTML5
HTML5 trabalha com semântica. A forma fica por
conta das CSS.

Inúmeras tags em HTML4 estão obsoletas, tais como:

<CENTER> <FONT> <MARQUEE>

Isto não significa que estas não irã funcionar, mas é

interessante não usar mais.

Para saber a lista atualizada de tags obsoletas, clique

no link abaixo:

https://www.w3.org/TR/2014/REC-html5-20141028/obs
olete.html
No VS Code para formatar um texto já
digitado rapidamente:
a) Selecione o texto, aperte as teclas
CTRL+SHIFT+P.

b) No menu, digite Emmet Envolver com

Abreviação.

c) Digite a tag a ser usada para formatação (ex:

<i>, <b>, <em>, ...)
Negrito: <b> ou <strong>?
<b> - tag em obsoleta, sem semântica

<Strong> - tag com semântica, usada em HTML5.

Itálico: <i> ou <em>?

<i> - tag obsoleta, sem semântica

<em> - tag com semântica, usada em HTML5

Voltemos a trabalhar com a pasta Doacao_legal e o arquivo
Index.html. Faça as seguintes alterações:

Não iremos usar a tag <i>, por estar obsoleta. Troque por <em>.
Marcado: <mark>
Texto destacado com uma cor de fundo. A cor padrão é
amarelo, mas podemos alterar inserindo a tag style
dentro da tag mark (como um atribulo).

Caso queira colocar estilos em todas as tags mark

desta página, crie um seletor dentro da tag style,
localizada no campo <head>, conforme a figura a
seguir:
Tamanho do texto: <big> e <small>?
<big> - Tag obsoleta. Só se refere ao tamanho da fonte
e isso é a forma apenas, não tem semântica.

<small> - Tag com semântica, usada em HTML5.

Refere-se ao significado da letra quando escrita em
letras menores em um termo ou contrato.

Texto sublinhado: <u> <ins>

<u> - Tag obsoleta. Só se refere ao texto sublinhado,
não tem semântica.

<ins> - Tag com semântica, usada em HTML5. Refere-

se ao significado de quando queremos escrever para o
usuário preencher uma lacuna, ou preencher um texto.
Texto tachado: <del>
Texto inserido, mas não considerado.

Texto sobrescrito: <sup>

Para escrever 210.

Texto subscrito: <sub>

Para escrever H2O.
Continue fazendo as alterações no arquivo Index.html,
conforme a seguir:
Texto código: <code>
Quando um texto são linhas de um código fonte de um
programa.
Considerar identação de código e quebras
de linha: <pre>
Caso sejam digitadas uma sequência de linhas de
código, use a tag <pre> para que sejam mostradas as
quebras de página e identação.

OBS: Escrito dessa forma,

o código irá aparecer
avançado com tabulação.
Para resolver esta
questão, selecione o texto,
aperte as teclas shift+tab.
Citação: <q> e <blockquote>
<q> citação simples - Quando fazemos uma citação de
algum autor em nosso texto. O texto entre as tags
<q></q> aparecem entre aspas. Tag com semântica.
<blockquote> citação completa -Tag usada para fazer
uma citação no texto recuada na página. Pode-se usar
o atributo cite dentro desta tag para inserir o link do
livro no google books.
Continue fazendo as alterações no arquivo Index.html,
conforme a seguir:
Abreviações: <abbr>
Tag que permite inserir um title, ou seja, o significado
de uma sigla. Quando o visitante da página passar o
mouse em cima da abreviatura, o browser exibe o texto
que foi inserido dentro do atributo title. Insira após a
tag <blockquote> o texto:
Elementos de Tabela
Num editor de textos você possui ícones e menus
próprios para a construção de tabelas, mas na
maioria dos editores de código html você precisa
construir uma tabela através de códigos.
As tabelas dão uma aparência bonita à página, além
de permitirem orientar o browser a posicionar
textos e imagens.
Uma das utilidades da tabela é quando você precisa
colocar uma imagem ao centro e o texto deve ser
escrito ao seu redor.
Você pode inserir o texto e as imagens dentro de
células da tabela. Neste caso o usuário não deverá
visualizar as bordas da tabela.
Outra grande utilidade do recurso tabela é quando
você precisa construir realmente uma tabela de
dados. Pode ser uma tabela de preços, de endereços,
de telefones, de departamentos e tantas outras.
As tags de tabela são do tipo início e fim <TABLE>
</TABLE>. Além dos atributos, aqueles que ficam
dentro da tag, ainda existem diversos comandos, que
inseridos entre as tags de tabela permitem trabalhar
bem as linhas e colunas da tabela.
<TABLE> Para se definir uma tabela HTML
Atributos
BORDER = valor Define a largura da borda externa da tabela
(contorno). Se não incluir a atribuição da
borda aparecerá uma tabela sem bordas.
CELLSPACING= valor Define o espaçamento horizontal entre uma
célula e outra. Refletirá na largura da
borda.
CELLPADDING= valor Define o espaçamento vertical entre uma
célula e outra. Sem refletir na largura da
borda.
WIDTH=valor % Define a porcentagem de largura deverá
conter a tabela em relação à largura da tela.
HEIGHT=valor % Define a porcentagem de altura deverá
conter a tabela em relação à altura da tela.
BGCOLOR=#cor Define a cor de fundo da tabela.
BACKGROUND=imagem Define uma imagem como fundo da tabela.
Comandos Serão inseridos entre as tags <TABLE> </TABLE>
<CAPTION> Define o Título da Tabela e ALINHA de acordo com o
</CAPTION> tamanho da tabela.
<TR> </TR> Para se definir o início e o fim de cada linha da tabela(table
row).
Atributos
ALIGN=v Define alinhamento do texto dentro da tabela.
alor LEFT= alinhamento à esquerda.
RIGHT=alinhamento à direita.
CENTER= alinhamento ao centro.
VALIGN= Define o alinhamento vertical dentro da célula.
valor TOP = Alinha no topo da célula.
MIDDLE = Alinha no meio das células.
BOTTON = Alinha na parte inferior da célula.
Comandos Serão inseridos entre as tags <TABLE> </TABLE>
<TH> </TH> Define o cabeçalho da tabela (table header). Iniciar e finalizar
cada célula do cabeçalho.
Atributos
ALIGN= Define alinhamento horizontal dentro da célula.
valor Se o alinhamento já foi definido em TR não é necessário defini-
lo aqui.
LEFT=alinhamento à esquerda.
RIGHT=alinhamento à direita.
CENTER=alinhamento ao centro.
VALIGN=v Define o alinhamento vertical dentro da célula.
alor Se o alinhamento já foi definido em TR não é necessário defini-
lo aqui. TOP = Alinha no topo da célula. MIDDLE = Alinha no
meio das células. BOTTON = Alinha na parte inferior da célula.
COLSPAN Instrui o visualizador (browser) a unir um número específico de
=valor colunas da tabela. (Ocupar lugar de duas células, mesclar).
ROWSPAN Instrui o visualizador a unir um número específico de linhas da
=valor tabela (Mesclar duas linhas).
NOWRAP Instrui o visualizador a não distribuir o texto do cabeçalho dentro
da célula da tabela
Comandos Serão inseridos entre as tags <TABLE> </TABLE>
<TD> </TD> Define como ficará o conteúdo de cada célula da Linha
(table data)
Atributos
ALIGN= Define o alinhamento horizontal dentro da célula.
valor Se o alinhamento já foi definido em TR não é necessário
defini-lo aqui. LEFT=alinhamento à esquerda.
RIGHT=alinhamento à direita. CENTER=alinhamento ao
centro.
VALIGN=v Define o alinhamento vertical dentro da célula.
alor Se o alinhamento já foi definido em TR não é. necessário
defini-lo aqui.
TOP = Alinha no topo da célula.
MIDDLE = Alinha no meio das células.
BOTTON = Alinha na parte inferior da célula.
COLSPAN Instrui o visualizador (browser) a unir um número específico
=valor de colunas da tabela. (Ocupar lugar de duas células, mesclar).
ROWSPAN Instrui o visualizador a unir um número específico de linhas
=valor da tabela (Mesclar duas linhas).
Abra o arquivo Index.html e insira uma tabela a fim
de organizar o texto e a imagem.
Listas
As listas são utilizadas para fazer listagens
numeradas ou com tópicos. Imagine que na página
de animais disponíveis para adoção, você precisa
colocar algumas informações sobre os mesmos:
1. Informações:
 Nome: Pepita
 Gênero: Fêmea
 Castrado: Sim
 Idade: 2 anos
 Vacina: Sim
 Contato: (21) 00000-0000
As tags que determinam o início e o fim dos
marcadores e numeradores são diferentes, variam de
acordo com o tipo de lista que você deseja, mas cada
linha da lista é iniciada sempre com o comando <LI>,
que não é um comando do tipo início fim.
<OL> OL - Construção de LISTAS NUMERADAS, requer o comando
<LI> <LI> para digitar os dados da lista.
LI - Define cada linha da lista numerada - digitar o texto logo em
</OL> frente.
/OL - Finaliza a lista numerada.
Atributos:
TYPE=valor Lista numerada Tipo:
valor = a -> Caracteres de numeração como letras
minúsculas.
valor = A -> Caracteres de numeração como letras
maiúsculas.
valor = I -> Caracteres de numeração como numerais
romanos em maiúsculas.
valor = i -> Caracteres de numeração como numerais
romanos em minúsculas.
valor = 1 -> Caracteres de numeração como números
padrão).
START=valor Em que nº ou letra vai se iniciar a enumeração da lista.
Ex.: para iniciar na letra E - valor = 5
Para iniciar no numeral IV - valor = 4
<UL> UL - Construção de LISTAS NÃO ORDENADAS,
requer o uso do comando <LI> para cada linha de
<LI> dados.
</UL> LI - Define cada linha da lista não ordenada - digitar
o texto logo em frente.
/UL - Finaliza a lista não ordenada.
Atributos:
TYPE=valor Define marcador do tipo:
valor=SQUARE -Define marcador do tipo quadrado
sólido (preenchido).
valor=DISC -Define marcador do tipo círculo sólido
(preenchido) – PADRÃO.
valor=CIRCLE -Define marcador do tipo círculo
transparente.
Exemplo:
<OL type=1>
<LI> Abaixo exemplo lista não ordenada
<UL type=square>
<LI> Dados da lista não ordenada
<LI> Linha dois da lista
</UL>

RESULTADO:
1. Abaixo exemplo lista não ordenada
Dados da lista não ordenada
Linha dois da lista
Para fixar melhor as tags de listas, crie um novo
arquivo, com o nome Animais.html.
Perceba que nesta página foi inserida uma tabela
com duas linhas e duas colunas, onde na primeira
linha foram inseridas duas imagens e na segunda
linha, foram inseridas informações sobre os animais
disponíveis para adoção, em uma lista não ordenada,
e dentro destas, listas não ordenadas.

Dica: Caso queira alterar várias tags OL ou UL de

uma vez só, clique na primeira tag a ser alterada,
segure a tecla ALT e vai clicando nas outras tags a
serem alteradas.
Lista de definições:
Uma lista de definições é semelhante a um
dicionário, onde temos um termo e sua definição.
As tags para criar uma lista de definição são:

<dl> Criação da lista de definição

<dt> Termo

<dd> Descrição
</dd>
</dt>
</dl>
Marcas de Âncoras ou Link

As marcas de âncoras ou links permitem que uma

palavra ou imagem que se encontra em uma página
seja vinculada a outra página, endereço de e-mail ou
outro ponto da mesma página.
Um link pode ser:
Externo ao site - quando fazem a ligação de um site
com outro.
Interno ao site - quando permite que você navegue
entre as páginas de um mesmo site.
E ainda pode ser um link para outra posição na
mesma página, muito utilizado quando a página fica
grande.
Download – quando é permitida o download de um
arquivo PDF.
O comando link se assemelha muito ao comando de
imagem, mas suas tags são do tipo início e fim.
<A> texto a ser clicado</A> Âncora para chamar uma referência.
O texto a ser clicado é uma palavra ou
pode ser uma imagem que ao ser clicada
levará para a referência determinada por
um dos atributos mostrados a seguir.
Atributos:
HREF="endereço" Endereço= arquivo a ser chamado para
abertura de uma nova página.
Pode ser um endereço de e-mail, de uma
página interna ou externa ao site
Existe um texto ou imagem para funcionar
como o Link (o texto que será clicado para
levar ao arquivo especificado).
HREFLANG=“en” Atributo que permite indicar o
idioma principal do site para onde o link
está apontando. Isso permitirá avisar ao
navegador e a softwares de tradução
como lidar com a possível tradução
automática do google dos conteúdos.
TARGET=“ ” _blank – abre o link em uma nova
janela em branco
_self – abre o link na janela ou frame
atual (padrão)
_top – desfaz todos os frames e abre o
destino no navegador completo
_parent - similar ao uso do _top em
uma referência à janela mãe
nome-do-frame - caso esteja usando
frames, indicar o nome da janela a abrir
(Não será muito usado)
REL=“ ” – Atributo que ajuda o Atributo que indica a natureza do destino.
Google a entender o sistema de next - indica que o link é para a próxima parte
navegação no nosso site. do documento atual
Visualmente não irá aparecer prev - indica que o link é para a parte anterior
modificação alguma. do documento atual
author - indica que é um link para o site do
autor do artigo atual
external - indica que é um link para outro site
que não faz parte do site atual
nofollow - indica que é um link para um site
não endossado, como um link pago
NAME= “nome do lugar” Atributo usado para nomear um certo lugar da
página.
Marcar um lugar com um nome, lugar onde a
qualquer momento possamos voltar através de
um Link.
É combinado com o atributo HREF, que ao
invés de chamar uma nova página poderá
chamar um lugar da página atual. Usado
comumente para se voltar ao início da página,
quando esta é grande.
 DOWNLOAD = “ ” Valor configurado para o nome do
arquivo a ser baixado.
TYPE= “ ” Indica ao navegador que tipo de arquivo
será baixado.

Aqui vão alguns media types bem usados no nosso dia-a-dia:

‣ application/zip
‣ text/html
‣ text/css
‣ text/javascript
‣ video/mp4
‣ video/H264
‣ video/JPEG
‣ audio/aac
‣ audio/mpeg
‣ font/ttf
‣ image/jpeg
‣ image/png
Lista completa:
https://www.iana.org/assignments/media-types/media-types.xhtml
Exemplos:

Link para endereço de página externa ao site: <a

href="http://https://www.suipa.org.br/"> SUIPA </a>
(o texto SUIPA aparecerá no browser grifado e de cor
diferente)
Link para endereço de página interna ao site: <a
href=“Animais.html"> Clique aqui para ver os animais
disponíveis</a> (o texto Segunda página aparecerá no
browser grifado e de cor diferente).
Dica:

Servidores Web normalmente rodam em Linux. Caso

precisemos colocar links em nossas páginas que apontem
para pastas locais, temos que colocar a referência certa.
Se estivermos nos referindo à pasta atual do servidor, vamos
colocar ./ antes do nome do arquivo. Se estivermos nos
referindo à pasta imediatamente superior na hierarquia,
usaremos ../ para voltar um nível para a pasta mais externa.

Exemplo:
<a href=“../Index.html”> Voltar </a>
Link para outra posição da página:
No início da página se cria um lugar chamado, por
exemplo, “topo".
<a name=“topo”></a>
No final da página se cria um link:
<a href=“#topo">Voltar ao início da página </a>
(é indispensável colocar #).
Link para downloads:
<a href="termo_adocao.pdf" download="termo_adocao"
type="application/pdf">Baixar o Termo de Adoção</a>
1. Para compreender melhor as marcas de link, abra o
arquivo Index.html e insira o link no final do
código um link externo:
2. Ainda com o arquivo Index.html, crie um link para
página interna ao site apontando para o arquivo
Animais.html:
2. Abra o arquivo Animais.html e insira a opção para
voltar para a página anterior:
3. Volte para o arquivo Index.html e insira um nome
para uma parte da página (topo), com a seguinte
tag:
3. Ainda com o arquivo Index.html aberto, insira a
tag de link no final da página como mostra a figura
abaixo:
4. Com o arquivo Animais.html aberto, insira um
link para download no final da página. O arquivo
disponibilizado será Termo_adoção.pdf, que está
na mesma pasta de todos os arquivos do nosso site.