Dados do Aluno

Nome: _________________________________________________
Número da matrícula: _____________________________________
Endereço: ______________________________________________
Bairro: _________________________________________________
Cidade: ________________________________________________
Telefone: _______________________________________________
Anotações Gerais: ________________________________________
_______________________________________________________
_______________________________________________________

HTML5
 Apresentação do HTML5
HTML (abreviação para a expressão inglesa HyperText Markup
Language, que significa Linguagem de Marcação de Hipertexto) é uma
linguagem de marcação utilizada para produzir páginas na Web.
Nosso curso de HTML aborda de maneira clara o funcionamento
dessa linguagem, ele coloca através das listagens de código escrito,
todos os principais comandos utilizados na linguagem e faz com que o
aluno pratique a construção e acabamento das páginas de internet.

Marcas Registradas:
Todas as marcas e nomes de produtos apresentados nesta apostila são
de responsabilidade de seus respectivos proprietários, não estando a
editora associada a nenhum fornecedor ou produto apresentado nesta
apostila.

Método CGD® - Todos os direitos reservados.

Protegidos pela Lei 5988 de 14/12/1973.
Nenhuma parte desta apostila poderá ser copiada sem prévia autorização.
O Método CGD é um produto da Editora CGD.
 Controle de Presença

Data Lição e Passo Anotações

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

____/____/_____ ___________ ________________

 Índice
MÓDULO 1 - INTRODUÇÃO AO HTML .................................................. 7
● BROWSER OU NAVEGADOR .................................................................. 7
● O QUE É O HTML ............................................................................ 7
● O QUE É “SEMÂNTICA”? ..................................................................... 7
● O PRIMEIRO CONTATO COM O HTML ...................................................... 8
● A INDENTAÇÃO DO CÓDIGO ................................................................. 9
● A CRIAÇÃO DE UMA PÁGINA HTML ........................................................11
● SALVANDO UM ARQUIVO NO FORMATO HTML ...........................................11
● A ESTRUTURA DO CÓDIGO ..................................................................12
● TÍTULO DA PÁGINA <TITLE> ...............................................................12
● O CORPO DE UMA PÁGINA HTML ..........................................................13
● CRIANDO UM ARQUIVO HTML NO NOTEPAD++ .........................................13
● ATRIBUTOS ...................................................................................14
● ALTERANDO A COR DE FUNDO DA PÁGINA COM O ATRIBUTO STYLE .....................14
MÓDULO 2 - HTML E SUAS TAGS BÁSICAS (PARTE 1) ...................... 15
● CRIANDO UM CABEÇALHO <HEADER> ....................................................15
● TÍTULOS E SUBTÍTULOS <H1>, <H2>, <H3> ........................................15
● CRIANDO UM ARTIGO <ARTICLE>.........................................................16
● CRIANDO UM PARÁGRAFO <P> ............................................................16
● QUEBRA DE LINHA <BR /> .................................................................17
● CRIANDO LINHAS HORIZONTAIS COM A TAG <HR /> ....................................18
● CRIANDO UM RODAPÉ <FOOTER> .........................................................19
● CRIANDO UM “MENU” <NAV> .............................................................20
● INSERINDO IMAGENS ATRAVÉS DA TAG <IMG> ..........................................21
MÓDULO 3 – HTML E SUAS TAGS BÁSICAS (PARTE 2) ...................... 24
● ENTENDENDO O INDEX.HTML ...............................................................24
● CRIANDO UMA LISTA ........................................................................25
● CRIANDO UMA TABELA <TABLE> ..........................................................26
● O ATBRIBUTO STYLE (BACKGROUND-COLOR; FONT-FAMILY; COLOR) ..................27
MÓDULO 4 – PRÁTICA 1 ................................................................... 29
● O QUE VIMOS ATÉ AQUI? ...................................................................29
MÓDULO 5 – OS ATRIBUTOS E A TAG STYLE .................................... 30
● CRIANDO LINKS COM A TAG <A>..........................................................30
● AS INSTÂNCIAS DE UM LINK ................................................................30
● UTILIZANDO A TAG STYLE ...................................................................31
● A PROPRIEDADE MARGIN ....................................................................31
● A PROPRIEDADE PADDING ..................................................................31
● A PROPRIEDADE TEXT-ALIGN ...............................................................32
MÓDULO 6 – PRÁTICA 2 ................................................................... 33
● O QUE VIMOS ATÉ AQUI? ...................................................................33
MÓDULO 7 – O PODER DO HTML5 .....................................................34
● UTILIZANDO UMA FONTE DO GOOGLE FONTS ............................................ 34
● O HTML5SHIV ............................................................................. 35
MÓDULO 8 – FORMULÁRIOS HTML (PARTE 1) ..................................36
● CRIANDO FORMULÁRIOS COM A TAG FORM................................................ 36
● CRIANDO CAMPOS NO FORMULÁRIO COM A TAG <INPUT> .............................. 36
● CRIANDO BOTÕES PARA O FORMULÁRIO................................................... 37
● A TAG LABEL ................................................................................. 38
MÓDULO 9 - FORMULÁRIOS HTML (PARTE 2) ...................................39
● A TAG FIELDSET ............................................................................. 39
● CRIANDO UMA LISTA DROP-DOWN ......................................................... 39
● A TAG TEXTAREA ............................................................................ 40
● CRIANDO UM CHECKBOX .................................................................... 41
● ALTERANDO O TIPO DO CAMPO ............................................................. 41
● ALTERANDO A APARÊNCIA DO FORMULÁRIO ............................................... 41
MÓDULO 10 – PRÁTICA 3 .................................................................42
● O QUE VIMOS ATÉ AQUI? ................................................................... 42
MÓDULO 11 – HTML5 MULTIMEDIA ..................................................43
● INSERINDO UM CSS EXTERNO ............................................................ 43
● INSERINDO VÍDEOS NA PÁGINA ............................................................ 43
● INSERINDO ÁUDIO NA PÁGINA ............................................................. 44
● AS PROPRIEDADES CSS .................................................................... 44
MÓDULO 12 – PRÁTICA 4 .................................................................46
● O QUE VIMOS ATÉ AQUI? ................................................................... 46
Módulo 1 - Introdução ao HTML
● Browser ou Navegador
● Um navegador, também conhecido pelos termos ingleses web browser ou
simplesmente browser, é um programa de computador que habilita seus
usuários a interagirem com documentos virtuais da Internet, também
conhecidos como páginas da web, que podem ser escritas em linguagens
como HTML, ASP, PHP, com ou sem folhas de estilos em linguagens como
o CSS e que estão hospedadas num servidor.

● Os navegadores mais famosos são: Google Chrome, Mozilla Firefox e o

Internet Explorer, que será substituído pelo Spartan no Windows 10, cada
navegador possui um “motor” próprio, ele é responsável por “rodar” e
interpretar as tags que compõem a sua página, confira a lista destes
motores abaixo:
● Blink – Google Chrome
● Gecko – Mozilla Firefox
● Trident – Internet Explorer (Spartan)

● O que é o HTML
● HTML é o acrônimo da expressão HyperText Markup Language que
significa Linguagem de Marcação de Hipertexto, é uma linguagem de
programação criada para produção de páginas da web, na época de sua
invenção a linguagem veio para resolver um problema de Tim Berners
Lee: a comunicação e disseminação das pesquisas entre ele e seu grupo
de colegas. Sua solução, combinada com a então emergente “internet
pública” ganhou atenção mundial.

● Atualmente o HTML encontra-se na sua quinta versão, confira as versões

e os anos de lançamento abaixo:
o HTML – 1991
o HTML 2.0 – 1995
o HTML 3.2 – 1997
o HTML 4.01 – 1999
o HTML5* – 2014

*a versão “final” do HTML5 foi lançada em 2014, porém ele está em

funcionamento desde meados de 2009.

● O que é “Semântica”?
● A semântica existe para “dar significado” a web, permitindo que pessoas,
máquinas e computadores compreendam a página da mesma maneira,
através dela, os mecanismos de busca podem localizar a informação
facilmente, isso também permite que a página seja acessível a pessoas
com deficiência visual utilizando leitores de voz.
HTML5 7
● O Primeiro Contato com o HTML
● Todo código HTML é composto por algumas tags, pense em tags como
etiquetas, que servem para identificar ao navegador o "produto" daquele
trecho. Toda tag (etiqueta) é apresentada entre os sinais de menor e
maior <> e ao encerrar o uso da tag ela deve ser fechada </>.

<h1>Cabeçalho de nível 01</h1>

<p>Parágrafo 01</p>

● Note que as tags estão dentro dos sinais de maior (<) e menor (>), ou
seja, no exemplo acima as tags são: <p> e <h1>.
● Toda página HTML é composta por uma sequência de tags que deve
sempre ser respeitada.

● Confira abaixo a estrutura utilizada para a criação de uma página em

HTML4.

● Confira a estrutura utilizada no HTML5.

8 HTML5
● A Indentação do Código
● Dentro da computação, indentação (recuo, neologismo derivado da
palavra em inglês indentation) é um termo aplicado ao código fonte de
um programa ou página da web para indicar os elementos
hierarquicamente.

● Confira abaixo a diferença entre os códigos com e sem indentação...

● Um sem indentação fica assim:

HTML5 9
● Um código indentado fica assim:

● Note que ambos os códigos são iguais, porém a visualização do primeiro,

permite a localização de atributos mais rapidamente, devido ao recuo que
realça os elementos hierárquicos.

● O espaçamento fora das tags não interfere em nada a criação de uma

página HTML, um exemplo disso é o fato de você poder montar toda a
estrutura do código em uma única linha.

10 HTML5
● A criação de uma página HTML
● Como visto na página anterior, existe uma sequência de tags que são
utilizadas para a criação de uma página HTML, porém, onde você deve
utilizar essas tags?

● Existem diversos editores para arquivos HTML, até mesmo um editor de

texto comum, como o Bloco de Notas do Windows, possui a capacidade
de editar um arquivo HTML.

● Durante o curso, iremos utilizar o Notepad++ (https://notepad-plus-

plus.org/), que é um editor de texto leve e simples, que possui a
capacidade de trabalhar com diversas linguagens de programação e
possui uma função muito interessante, ele colore as tags para você,
separando-as do texto normal.

● Salvando um Arquivo no Formato HTML

● Uma página HTML deve possuir a extensão .html – Para salvar um arquivo
com esta extensão, no notepad, você deve:
● Clicar no menu “Arquivo” e na opção “Salvar como...”

● Selecionar o tipo de arquivo “Todos os arquivos (*.*)” e salvar a página

com o nome seguido de .html

HTML5 11
● A estrutura do código
● Lembre-se: Toda a página HTML segue uma estrutura de tags, confira a
seguir a estrutura indentada e a explicação de cada tag.

● A primeira linha <!DOCTYPE html> serve para “avisar” o navegador o

tipo de arquivo que ele irá interpretar.
● Logo depois temos a tag <html> acompanhada de um atributo
responsável por indicar o idioma do texto escrito.
● Depois temos a tag <head>, dentro dela temos outras duas tags, a
<meta> responsável por indicar a tabela de caracteres que o navegador
deve utilizar e a <title> responsável por determinar o título da página.
● Após o fechamento da tag head (</head>) temos a tag <body> onde o
conteúdo da página é construído...

● Título da página <title>

● Todas as páginas da internet têm um título para identificação, esse título
é feito através da tag <title>, a tag title deve ser inserida entre as tags
<head> e </head>.

● O título da página sempre é exibido no topo do navegador

12 HTML5
● O corpo de uma página HTML
● Todo conteúdo do site deve ser inserido entre as tags <body> e </body>,
como a própria tag diz, é entre elas que existe o corpo da página (body
significa corpo em inglês), ou seja, todos os textos, links, imagens, tabelas
e demais objetos.

● Como você pode ver acima, o conteúdo da página sempre deve ficar entre
as tags <body> </body>.

● Criando um Arquivo HTML no Notepad++

● O Notepad++ permite que você defina o tipo de arquivo que irá criar, isso
é útil pois, inicialmente ele irá destacar as tags, deixando-as com outra
cor, e na hora de salvar o arquivo a extensão já estará selecionada.

● Para definir o tipo do arquivo, clique no menu “Linguagem”, posicione o

mouse na opção “H” e clique em “HTML”.

● Também é muito útil definir a formatação utilizada na página, para isso,

clique no menu “Formatar” e selecione a opção “Codificação em UTF-
8 (sem BOM)”

● A principal diferença entre o UTF-8 e o ANSI é que a codificação UTF-8

suporta um maior número de caracteres, incluindo acentos (´`^~),
cedilhas (ç) e caracteres especiais (& $ %) diretamente, ou seja,
independente de um código para inseri-los, com isso essa codificação vem
sendo adotada (lentamente) como um padrão para email, páginas web e
etc.

HTML5 13
● Atributos
● A maioria das tags possuem atributos que servem para providenciar
informações adicionais sobre a tag, por exemplo, um link precisa ter um
atributo para indicar para onde ele irá.

● Todas as tags e seus atributos devem sempre ser digitados com letras
minúsculas, isso é uma regra criada pela W3C.

● Todos atributos HTML são inseridos dentro da tag de abertura.

● Exemplo: <body style="valor aqui dentro">

● O valor do atributo deve sempre ser inserido dentro de aspas. Para a

criação de um link, por exemplo, a tag ficaria dessa maneira:
<a href=“home.html”>visitar</a>.

● A tag <a> é responsável por indicar que o texto visitar é um link que
leva para a página home.html, essa por sua vez é indicada através do
atributo href. Iremos ter uma explicação mais aprofundada sobre links
adiante.

● No HTML5, alguns atributos responsáveis por modificações visuais foram

descontinuados, isso acontece pois no HTML as modificações visuais
devem ser feitas através do CSS...

● Alterando a cor de fundo da página com o atributo style

● O atributo style é utilizado para que você insira um CSS INLINE, porém,
esta forma de aplicação deixou de ser comum no HTML5.

● O atributo style é sempre preenchido com o CSS responsável por

modificar a tag, no caso, para alterar a cor de fundo da página, você deve
utilizar a propriedade background-color com a cor, em hexadecimal,
desejada...

● No exemplo acima nós usamos o código "#ff0000" para fazer a página na

cor vermelha.

14 HTML5
Módulo 2 - HTML e Suas Tags Básicas (Parte 1)
● Criando um Cabeçalho <header>
● O HTML5 introduziu diversas tags novas, a <header> é uma delas, essa
tag não possui características visuais, ou seja, ao inseri-la na página, ela
não fará modificações visuais na mesma, precisando ser modificada
através do uso de CSS.

● Porém, sua principal função é semântica, ela serve para indicar ao

navegador um grupo de títulos ou o cabeçalho de uma determinada seção
da página.

● Títulos e Subtítulos <h1>, <h2>, <h3>

● Uma boa página possui títulos e subtítulos para seu conteúdo, por isso o
HTML possui uma tag própria para os textos de título, elas variam de <h1>
até <h6>, sendo o <h1> para os títulos de maior importância e <h6>
para os de menor importância, geralmente uma página chega a utilizar,
no máximo, até o <h4>.

● Como Usar?
● <h1> Deve ser considerado um título principal da seção em que se irá
trabalhar. (Recomenda-se possuir apenas UM <h1> por página)
● <h2> Deve ser apresentado como um subtítulo da seção.
● <h3> Para tópicos.
● <h4> Para títulos inferiores.

Exemplo: .

HTML5 15
● Abaixo, confira a criação de um cabeçalho com um título e um subtítulo:

● Criando um Artigo <article>

● A tag <article> é responsável por identificar uma área que possui um
artigo, texto, redação e etc., um artigo deve fazer sentido sozinho,
possibilitando a distribuição de forma individual, independente do restante
do site.
● Esta tag, assim como a header, não possui características visuais, tendo
como principal função a melhora na semântica da página.

● Criando um Parágrafo <p>

● Todo o texto “comum” inserido em sua página deve estar indicado pela
tag <p>, ela é responsável pela criação dos parágrafos do seu texto, ou
seja, cada parágrafo deverá ter uma tag <p>;

● Um parágrafo, pode ser criado após um título, dentro de um artigo, o

código seria este:

● Lembre-se, uma página não deve ter as tags de título repetidas, se o

<h1> e o <h2> foram utilizados para o cabeçalho, o restante da página
deverá utilizar <h3>, <h4> e assim por diante.

16 HTML5
● Quebra de linha <br />
● As formatações feitas no Notepad++ não afetam a página HTML, isso
inclui quebras de linha inseridas no texto. Sendo assim, existe a
necessidade de criar a quebra de linha através do código, e para isso
existe a tag <br />
● Veja que por se tratar de uma tag com elemento vazio, que não terá
nenhum conteúdo inserido, ela necessita ter um fechamento próprio,
adicionando "/>" nela mesma.
● Veja o código abaixo:

● O texto foi digitado com quebra de linha no código, porém o resultado

seria este:

● Para inserir a quebra de linha, você precisaria inserir a tag <br /> no fim
das linhas, deixando assim:

● Esse é o resultado obtido através do uso da tag <br />

HTML5 17
● Criando linhas horizontais com a tag <hr />
● A tag <hr /> desenha uma linha horizontal que geralmente é utilizada
como separador de seção, pode ser utilizada para separar o cabeçalho do
restante da página por exemplo.
Assim como a tag <br />, a <hr /> é uma tag de elemento vazio, por isso
existe a necessidade de um fechamento próprio.

● Essa é a página criada através do código anterior

18 HTML5
● Basta inserir a tag <hr /> entre os dois trechos de código para separá-
los com uma linha.

● O resultado é este abaixo:

● Criando um rodapé <footer>

● Toda a página deve possuir um rodapé, nele você pode inserir informações
de contato, links entre outros, para isso o HTML5 possui a tag <footer>,
ela serve para definir o rodapé de uma página ou seção...
● Esta tag não possui características visuais, tendo como principal função a
melhora na semântica da página.

HTML5 19
● O rodapé inserido na página, fica assim:

● Criando um “Menu” <nav>

● Quase todas as páginas possuem um menu com links, que permitem que
o usuário navegue entre as páginas que compõem o site, no HTML5 existe
uma tag própria para definir o espaço que receberá os links de navegação,
ela é a tag <nav>.

● IMPORTANTE: Como visto durante o curso, um menu funcional não é

montado desta maneira...

20 HTML5
● Inserindo imagens através da tag <img>
● A tag <img /> também é uma tag de elemento vazio, por isso tem que
ter o fechamento nela mesma. Ela serve para inserir uma imagem na
página, tendo dois atributos obrigatórios, o src="" que serve para
especificar o local onde a imagem está, e o alt="" que serve como texto
alternativo, caso a imagem não carregue, o usuário poderá saber do que
ela tratava...
● Como foi dito o SRC serve para especificar o local em que a imagem está,
veja o exemplo abaixo:

● O segundo modelo é mais comum e usual em sites, pois com ele você
pode manter seu servidor sempre organizado...

● Veja o código abaixo:

● Essa é a página que foi criada através do código acima:

HTML5 21
● Veja a pasta onde o site está salvo:

● Para inserir a imagem mpb (do tipo .png) que está na mesma pasta da
página (index.html) o código utilizado deverá ser o seguinte:

● Este é o resultado obtido através do código acima:

● Agora, se a imagem mpb.png for movida para dentro de uma pasta

chamada imagens

22 HTML5
● E o código da página não for alterado, esse será o resultado obtido:

● Veja que a imagem não está sendo exibida pois ela não pode ser
localizada, porém, o valor inserido no atributo alt é exibido.

● Para solucionar o problema, basta inserir a pasta onde a imagem está

localizada, desta maneira a imagem voltaria a ser exibida.

HTML5 23
Módulo 3 – HTML e Suas Tags Básicas (Parte 2)
● Entendendo o Index.html
● A página index.html é a página principal dentro do servidor, ou seja, é o
arquivo principal do site (site é um conjunto de páginas).

● Ao acessar um site, por exemplo: www.sobikes.com.br, o servidor localiza

a página “index” dentro dele e exibe-a.

● Se os arquivos estivessem dentro de uma pasta chamada “site”, o acesso

deveria ser feito da seguinte maneira: www.sobikes.com.br/site/.

24 HTML5
● Criando uma Lista
● O HTML possui um código específico para a criação de listas, ou seja, você
não deve fazê-las manualmente e sim utilizar o código existente. Existem
três tipos de listas, as ordenadas, as não ordenadas e as de definição.
● Os códigos para criação de listas seguem o mesmo padrão utilizado para
as outras tags HTML, a primeira tag define o tipo da lista e as demais tags
criadas abaixo representam os itens, após o término dos itens deve-se
fechar a tag inicial.

● Lista ordenada
As listas ordenadas são utilizadas para indicar uma sequência ou uma
numeração, confira abaixo o código para a criação e o resultado do
mesmo:

● Lista não-ordenada
As listas não ordenadas são utilizadas para listar itens sem se preocupar
com sua sequência, confira abaixo o código para a criação e o resultado
do mesmo:

● Lista de definição
As listas de definição são usadas em assuntos onde há uma definição após
o item listado, estilo perguntas e respostas, confira abaixo o código para
a criação e o resultado do mesmo:

HTML5 25
● Criando uma tabela <table>
● Uma tabela é um conjunto de células organizadas, dentro das quais
podemos alojar distintos conteúdo. Antigamente as tabelas eram usadas
para desenhar o layout da página, atualmente essa ideia está
TOTALMENTE descartada, o HTML5 limita a tabela a sua verdadeira
função: auxiliar a organização de dados tabulares.
● Assim como a criação de listas, uma tabela não depende apenas das tags
de abertura e fechamento, ela também precisa de tags que identifiquem
as linhas e os dados da mesma.
● Uma tabela semântica possui tags para identificar o corpo, cabeçalho e
rodapé, facilitando assim a vida de quem utiliza leitores de tela para
acessar o seu site, confira todas as tags abaixo.

● <table> - Serve para identificar o início da tabela.

● <caption> - Define o assunto da tabela, funciona como uma espécie de
subtítulo.
● <thead> e <tfoot> - Define o cabeçalho e o rodapé da tabela.
● <tbody> - Define o corpo da tabela.
● <tr> - Cria uma linha da tabela.
● <th> - Define os itens do cabeçalho e do rodapé.
● <td> - Define os itens da tabela.

● Confira o código responsável pela criação de uma tabela

26 HTML5
● Como a formatação da página e seus elementos é feita através do CSS,
uma tabela sem inicialmente fica assim:

● Após um pouco de CSS, ela poderá ficar assim:

● O atributo style (background-color; font-family; color)

● O atributo style permite que você insira o CSS diretamente na tag, criando
um CSS INLINE.
● A propriedade background-color, permite que você altere o fundo de um
objeto, se ela for aplicada diretamente na tag body, você poderá alterar a
cor do fundo da página, confira um exemplo abaixo:

● Já a propriedade font-family, permite que você altere a fonte utilizada em

um determinado texto, ao aplicá-la na tag body, toda a página será
afetada, como ocorre com o background-color

HTML5 27
● E por último, a propriedade color, permite que você altere a cor do texto

28 HTML5
Módulo 4 – Prática 1
● O que vimos até aqui?
● Existe uma estrutura básica que deve ser respeitada na criação de todo
arquivo HTML.

● A tag <header> é utilizada para definir o cabeçalho da página, e as tags

<h1> e <h2> são utilizadas para os títulos e subtítulos da página

● A tag <p> é utilizada para a criação de parágrafos

● As tags <ul>, e <li> são utilizadas na criação de listas

● A tag <img> é utilizada para a inserção de imagens

HTML5 29
Módulo 5 – Os Atributos E A Tag Style
● Criando links com a tag <a>
● Links são ligações de uma página a outra, ou até mesmo para outra seção
da mesma página, são caracterizados como locais clicáveis no documento
HTML e podem ser feitos com texto ou com imagens, a tag para criação
de links é a seguinte:

● Porém para determinar o local para onde o link lhe enviará, você precisa
de um atributo nessa tag (ele é de uso OBRIGATÓRIO), o href, assim
como imagem, basta especificar o nome (e o local se necessário) da
página que você irá acessar.

● Outro atributo interessante é o target, com ele você pode definir onde a
página abrirá, se será em uma nova aba (ou janela), se será em algum
frame, ou simplesmente abrir na mesma página, você verá maiores
detalhes em breve, veja agora dois exemplos de link:

● As instâncias de um link
● O HTML possui algumas instâncias para os links, elas permitem que o
visitante identifique os links que ele já visitou, no total existem 4
instâncias, cada uma com uma cor para os links, são elas:

o Link não visitado: Azul

o Link visitado: Roxo
o Link com mouse em cima: Ponteiro vira uma mão e o link
mantém a mesma cor.
o Link ativo (quando clicado): Vermelho.

● Essas instâncias podem ser modificadas via CSS.

30 HTML5
● Utilizando a tag style
● Ao utilizar o atributo style diretamente em uma tag, o html consegue
identificar que ele será responsável por modifica-la, como ocorreu com a
tag <body> quando inserimos o parâmetro background-color, porém ao
utilizar a tag <style> você precisa indicar qual a tag irá modificar...

● A propriedade margin
● A propriedade margin define a margem ao redor do local onde foi
adicionada, se você desejar adicionar a propriedade margin à tag body,
você poderá definir as margens da página.

● Ao inserir o valor desejado, apenas com o parâmetro margin, ele é

aplicado aos quatro cantos da página...

● Para determinar o canto, você deve utilizar um dos parâmetros abaixo:

o margin-top: para o topo do elemento.
o margin-bottom: para o canto inferior do elemento.
o margin-right: para o canto direito do elemento.
o margin-left: para o canto esquerdo do elemento.

● A propriedade padding
● A propriedade padding também é responsável por alterar o espaçamento
de um elemento, porém, diferente da propriedade margin que aplica o
espaço para o lado de fora do elemento, a propriedade padding aplicar a
margem para dentro do elemento html...

● Para determinar o canto, você deve utilizar um dos parâmetros abaixo:

o padding-top: para o topo do elemento.
o padding -bottom: para o canto inferior do elemento.
o padding -right: para o canto direito do elemento.
o padding -left: para o canto esquerdo do elemento.

HTML5 31
● A propriedade text-align
● Assim como as outras alterações gráficas feitas na página, o alinhamento
horizontal do texto deve ser modificado através do CSS, para isso, deve-
se utilizar o atributo text-align.
● Por padrão, todo texto criado fica alinhado à esquerda (left) – utilizando
o text-align você pode deixar o texto centralizado (center) ou alinhado à
direita (right).

32 HTML5
Módulo 6 – Prática 2
● O que vimos até aqui?
● Os links são criados através da tag <a href=”endereço”>Clique aqui</a>

● A tag <style> é responsável pelo CSS da página

● As listas não ordenadas são criadas através da tag <ul> e <li>

● A propriedade margin, do css, é responsável por ajustar a margem dos

elementos HTML

HTML5 33
Módulo 7 – O Poder do HTML5
● Utilizando uma Fonte do Google Fonts
● Antigamente, as páginas da internet eram montadas com base em fontes
comuns, disponíveis no sistema, isso era necessário pois, para renderizar
uma página o navegador acessa as fontes disponíveis no computador,
porém, atualmente é possível fazer o navegador “baixar” uma fonte da
internet apenas para a renderização da página, sem depender dos
arquivos locais do computador.
● Isso é possível através do uso do Google Fonts, um catálogo online e
gratuito de fontes...

● Para utilizar o google fonts, acesse: http://www.google.com/fonts

● Localize a fonte desejada e clique no botão “Add to Collection”

● Clique no botão “Use”

● Selecione os estilos desejados da fonte

● Clique na guia “Standard”

● Copie o conteúdo existente dentro da caixa

● Na sua página HTML, cole o código dentro da tag <head>, esse é o código
que adiciona a fonte à página, para aplicar, basta usar a propriedade font-
family no local desejado

34 HTML5
● O HTML5Shiv
● Navegadores antigos não possuem suporte a algumas tags do HTML5.
Quando o navegador se depara com uma tag que ele não suporta, ele a
ignora, não aplicando nenhum estilo nela, podendo resultar em
modificações drásticas na página... Para solucionar esse problema, o
holandês Sjoerd Visscher criou o HTML5Shiv, um javascript que força
a aplicação dos estilos nos locais necessários, deixando a sua página do
jeito que ela realmente é!
● Para usar o HTML5Shiv, basta adicionar o código na página dentro da tag
body:

<!--[if lt IE 9]>
<script
src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/ht
ml5shiv.min.js"></script>
<![endif]-->

HTML5 35
Módulo 8 – Formulários HTML (Parte 1)
● Criando formulários com a tag form
● Formulários HTML são usados constantemente em páginas da internet
para contato, cadastro, busca e login.

● Assim como as tabelas e as listas, o formulário depende de uma tag

principal, para determinar que ele realmente é um formulário, e só após
inseri-la você pode criar os objetos que formarão o formulário (caixa de
texto, caixa de seleção e etc.), esta tag é chamada de <form>.

● A tag <form> determina alguns comportamentos do formulário, como os

seguintes:
• id: é um nome dado ao formulário, usado na validação do css ou
javascript.
• method: determina o método em que os dados serão enviados,
existem dois valores possíveis:
post: que envia os dados internamente, ou seja, o usuário não
pode ver o que foi enviado.
get: onde os dados são enviados pela URL, ou seja, estão
acessíveis ao usuário.
• action: indica para onde os dados serão enviados após o usuário
concluir o preenchimento e clicar no botão para enviar.

● Veja um exemplo da tag form:

● Criando campos no formulário com a tag <input>

● A tag input deverá estar sempre acompanhada do atributo ID que
permitirá identificá-la e do atributo TYPE que permitirá a identificação do
tipo do campo, o atributo TYPE pode ter os seguintes valores:

● text: campo de texto simples.

● radio: cria botões de seleção única.
● submit: cria o botão responsável pelo envio do formulário.
● reset: cria um botão que apaga todos os campos ao ser clicado (reseta o
formulário).

● Veja que a tag input não possui um elemento, sendo assim, ela deve ser
fechada na mesma tag, assim como a quebra de linha, as linhas
horizontais e a tag img.

36 HTML5
● Foram criados dois campos de texto simples.

● Para adicionar botões do tipo radio para a seleção de sexo por exemplo,
você deve adicionar os seguintes códigos.

● Foram criados dois botões do tipo radio.

● Veja que o atributo name deve possuir o mesmo valor em ambos, para
permitir que o usuário selecione apenas uma opção.

● Criando botões para o formulário

● O processo para inserção de um botão é basicamente o mesmo que o
utilizado para o campo de texto, utiliza-se a tag <input> e então se deve
escolher o tipo, id, nome e valor do botão, você verá como criar ambos os
botões a seguir.

● O tipo SUBMIT é responsável pelo envio do formulário ao servidor, o

atributo ID e NOME servem para identificação do botão, e o atributo
VALUE representa o texto que será exibido no botão.
● No caso do botão que reseta o formulário, o tipo é RESET.

HTML5 37
● A tag label
● A tag label serve para associar o rótulo (texto) ao item do formulário,
unindo os dois itens, essa associação é feita através do valor do atributo
id que deverá ser repetido no valor do atributo for (que faz parte da tag
label).

38 HTML5
Módulo 9 - Formulários HTML (Parte 2)
● A tag fieldset
● A tag fieldset serve para agrupar os elementos que estão dentro dela,
separando-os do restante da página com uma borda.

● Este é o resultado da adição de um fieldset:

● Criando uma lista drop-down

● A tag select é responsável pela criação de uma lista do tipo dropdown,
dentro dela devem ser inseridas as tags option, que são responsáveis
pelas opções que compõem a lista...

HTML5 39
● A tag textarea
● A tag textarea cria uma caixa de texto com suporte a múltiplas linhas,
utilizada várias vezes para caixa de comentários em blogs e em
formulários de contato.
● Diferente do restante dos campos do formulário, a tag textarea necessita
ser fechada separadamente, pois você pode inserir um conteúdo nela, o
conteúdo que for inserido entre as tags será exibido inicialmente na caixa
de texto.

● O código acima criaria uma caixa de texto básica e pequena, veja que o
conteúdo inserido entre as tags é exibido dentro da caixa.

● Você pode alterar o tamanho das caixas de texto através dos atributos
cols e rows.

● Esse é o resultado da alteração acima

40 HTML5
● O atributo rows é responsável por alterar a altura da caixa, e o atributo
cols altera a largura da caixa.

● Criando um checkbox
● Diferente dos objetos de seleção do tipo radio, os objetos do tipo
checkbox servem para a criação de listas com múltipla escolha, como por
exemplo, uma lista de estilos musicais, onde o usuário poderá selecionar
quantas opções desejar...

● Alterando o tipo do campo

● Existem alguns tipos de campos exclusivos do HTML5, porém, nem todos
os navegadores são compatíveis com estes campos...
● Os tipos de campo e os navegadores compatíveis podem ser vistos no
site: www.w3schools.com/html/html_form_input_types.asp

● Alterando a aparência do formulário

● No HTML5, a aparência do formulário deve ser alterada através do CSS,
com ele você pode deixar seu formulário com uma aparência agradável.

HTML5 41
Módulo 10 – Prática 3
● O que vimos até aqui?
● Um formulário é criado através da tag <form>

● É importante que os objetos do formulário sejam sempre acompanhados

de um label

● Uma lista drop-down é criada através da tag <select>

● O fieldset deve ser utilizado para separar os campos que tratam de um

mesmo assunto no formulário, podendo apresentar uma legenda
indicativa.

● O botão de envio e de reset de um formulário é feito através da tag input.

42 HTML5
Módulo 11 – HTML5 Multimedia
● Inserindo um CSS Externo
● CSS é uma parte muito importante em uma página, ele que dá toda a
aparência para a mesma, durante o curso, nós utilizamos o CSS
Incorporado, ou seja, criado dentro do próprio HTML através da tag
<style>, porém, existe também a possibilidade de linkar um arquivo CSS
externo, ou seja, que está fora da página HTML, para isso você deve
utilizar a tag link.
● A tag link precisa de dois atributos, o href para indicar o local/nome do
arquivo css, e o rel para indicar que arquivo será utilizado como um
stylesheet.

● No exemplo acima, o arquivo estilo.css foi inserido na página html.

● Inserindo vídeos na página

● No HTML5 é possível inserir arquivos de vídeo diretamente na página,
utilizando apenas uma tag própria, esse recurso não existia antigamente.
Atualmente, todos os principais browsers oferecem suporte a essa tag,
porém, como nem tudo é perfeito, não são todas as extensões de vídeo
que funcionam, inicialmente, a única extensão suportada por todos os
browsers é a MP4.
● A inserção de vídeos é feita através das tags <video> e </video>

● Para o funcionamento correto desta tag, você deve adicionar um atributo

chamado src que será responsável por indicar onde o video está, assim
como acontece com a tag img.

● O autoplay é um atributo próprio do HTML5, através dele o navegador

identifica que o vídeo deve ser reproduzido automaticamente, assim que
o vídeo for carregado, sendo assim, a reprodução irá variar de acordo com
a velocidade da internet do visitante...

● Para exibir os controles, botão de pause/play e volume, basta adicionar o

atributo controls na tag video

HTML5 43
● A tag video permite que você insira o vídeo na página utilizando uma outra
tag para identificá-lo, ela é chamada de source, desta forma, você pode
manter a tag video apenas com os atributos responsáveis pelo player...

● Inserindo áudio na página

● A tag de audio funciona da mesma forma que a tag para videos, basta
inserir a tag <audio>, indicar o local do audio com a tag source e
habilitar os atributos controls e autoplay se desejar...

● As propriedades CSS
● Abaixo você tem uma lista de propriedades CSS que podem ser utilizadas
na criação de suas páginas.

● width = determina a largura do objeto

● height = determina a altura do objeto

● margin = forma resumida de aplicar margem ao objeto, aplicando uma

margem idêntica em todos os lados
● margin-left = determina a margem que o objeto terá à esquerda
● margin-right = determina a margem que o objeto terá à direita
● margin-top = determina a margem que o objeto terá na parte superior
● margin-bottom = determina a margem que o objeto terá na parte
inferior

● padding = determina o espaçamento entre a borda do elemento e seu

conteúdo
● padding-left = determina o espaçamento existente na parte esquerda do
objeto
● padding-right = determina o espaçamento existente na parte direita do
objeto
● padding-top = determina o espaçamento existente na parte superior do
objeto
44 HTML5
● padding-bottom = determina o espaçamento existente na parte ido
objeto

● background-color = define uma cor para ser utilizada no fundo do objeto

● background-image = define uma imagem para ser utilizada no fundo do
objeto

● font-family = determina a fonte que será utilizada no texto

● font-size = determina o tamanho da fonte

● a:link = determina as propriedades dos links

● a:visited = determina as propriedades dos links que já foram visitados
● a:hover = determina as propriedades do link quando o mouse estiver
sobre ele
● a:active = determina as propriedades do link quando selecionado

● Você pode conhecer mais sobre CSS acessando o seguinte site:

http://www.w3schools.com/css/

HTML5 45
Módulo 12 – Prática 4
● O que vimos até aqui?
● A inserção de vídeos pode ser feita das seguintes maneiras:

- OU –

● A inserção de um áudio segue o mesmo padrão, porém, com a tag audio

no lugar da tag vídeo

● Você pode especificar o tamanho do player do seu vídeo através dos

atributos width e height

46 HTML5
HTML5 47
 FIM DA APOSTILA
Método CGD ® - Todos os direitos reservados.
Protegidos pela Lei 5988 de 14/12/1973.
Nenhuma parte desta apostila poderá ser copiada sem prévia
autorização.

48 HTML5