Introdução Ao HTML5

Técnico em Informática para Internet Integrado ao Ensino Médio - IFNMG Campus Januária
Desenvolvimento Web I - Prof. Welington Silva – welington.silva@ifnmg.edu.br
Apostila Introdução ao HTML5

Professor Welington Silva
IFNMG Campus Januária
História da Internet
A história da internet começa no ambiente da Guerra Fria (1945-1991) onde as duas
superpotências envolvidas, Estados Unidos e URSS, estavam divididos nos blocos
socialista e capitalista e disputavam poderes e hegemonias.
Origem da Internet
Nesse panorama, os Estados Unidos, temendo ataques da Rússia, criou um sistema de
compartilhamento de informações, a fim de facilitar as estratégias de guerra.
Nesse momento, surge o protótipo da primeira rede de internet, a “Arpanet” (Advanced

Research Projects Agency Network).
Mapa logico da rede ARPANet.

Parece meio embolado, mas o sistema era organizado e quase indestrutível.
1
Assim, no dia 29 de outubro de 1969 foi estabelecida a primeira conexão entre a

Universidade da Califórnia e o Instituto de Pesquisa de Stanford. Foi um momento
histórico, uma vez que o primeiro e-mail foi enviado.
Já na década de 90, o cientista, físico e professor britânico Tim Berners-Lee desenvolveu

um navegador ou browser, a World Wide Web (www), a Rede Mundial de Computadores -
Internet.
Tim Berners-Lee, criador da World Wide Web
A partir disso, a década de 90 ficou conhecida como o “boom da internet”, pois foi
quando ela se popularizou pelo mundo com o surgimento de novos browsers ou
navegadores (Internet Explorer, Netscape, Mozilla Firefox, Google Chrome, Opera,
Lynx) e o aumento do número de usuários, navegadores da internet.
Diante disso, ocorre uma grande proliferação de sites, chats, redes sociais (orkut,
facebook, msn, twitter), tornando a internet a rede ou teia global de computadores
conectados.
Alguns estudiosos acreditam que a Internet foi um marco importante e decisivo na

evolução tecnológica. Isso porque ultrapassou barreiras ao aproximar pessoas, culturas,
mundos e informações. Fato este que, segundo eles, não acontecia desde a chegada
da televisão, na década de 50.
Hoje em dia, a Internet é utilizada mundialmente como ferramenta de trabalho, diversão,

comunicação, educação, informação. Por isso, é comum ouvir: “eu não vivo sem internet”.
Além disso, pelo fato de os impostos serem menores, muitos produtos são
comercializados em sites de compras.
2
3
Internet no Brasil
No Brasil, a Internet surgiu no final da década de 80, quando as universidades brasileiras
começam a compartilhar algumas informações com os Estados Unidos.
Entretanto, foi a partir de 1989, quando fundou-se a Rede Nacional de Ensino e

Pesquisa (RNP), que o projeto de divulgação e acesso ganhou força.
O intuito principal era difundir a tecnologia da Internet pelo Brasil e facilitar a troca de
informações e pesquisas.
Em 1997, criou-se as “redes locais de conexão” expandindo, dessa forma, o acesso a

todo território nacional.
Em 2011, segundo dados do Ministério da Ciência e Tecnologia, aproximadamente 80%

da população teve acesso à internet. Isso corresponde a 60 milhões de computadores em
uso.
Meios de Comunicação
Os Meios de Comunicação representam os veículos ou instrumentos designados para

difundir a informação entre os homens, por exemplo, o rádio, a televisão, o telefone, o
jornal, a revista, a internet, o cinema, dentre outros.
A partir do desenvolvimento da ciência e das novas tecnologias, os meios de comunicação

têm avançado significativamente, proporcionando a difusão dos conhecimentos e da
comunicação no mundo.
4
Comunicação
Segundo a “Teoria da Comunicação”, o emissor (locutor) é aquele que emite a
mensagem e, por sua vez, o receptor (interlocutor) é aquele que a recebe e a decodifica.
O “canal de comunicação” designa o local, ou o meio pelo qual a mensagem será

enviada para o receptor.
Assim, os meios de comunicação social se aproximam do “canal”, na medida em que ele

representa o veículo entre o emissor e o receptor, que pode ser linguagem escrita,
sonora, audiovisual, por exemplo, o jornal, revista (comunicação escrita), rádio e
televisão (comunicação audiovisual), etc.
História
Se pensarmos que a história e origem dos meios de comunicação surgem da necessidade
humana de se expressar, a arte rupestre (desenhos primitivos dentro das cavernas ou
grutas), característico da pré-história, já aponta essa importância na vida dos homens.
Desde o surgimento da escrita e do alfabeto, o homem vem desenvolvendo maneiras de

expandir o conhecimento e criar uma “cultura” humana.
Note que isso é justamente o que nos difere dos animais, ou seja, a criação de uma
cultura (gerada pela comunicação humana), posto que as espécies animais não possuem
5
uma “linguagem” que os permitam criar culturas, crenças e tradições, as quais serão
passadas de geração em geração.
Feita essa afirmação, foram séculos de desenvolvimento até chegarmos ao ponto de

comunicação que chegamos, ou seja, na era das tecnologias da informação e da cultura
de massa, onde esses meios representam, em grande parte, fatores de desenvolvimento
da sociedade humana, uma vez que disseminou (e continua disseminando) o
conhecimento pelo mundo, em diversos tempos e espaços.
Depois da escrita, surgiram os suportes como o papiro, os pergaminhos, e mais tarde,

os livros, que no início era objeto de poucos, sendo difundido a partir da criação da
imprensa no século XIV.
Papiro
O correio é considerado um dos mais antigos meios de comunicação, de forma que os

egípcios já utilizavam para enviar documentos e cartas.
Antigamente, as aves, como pombas e corvos, eram utilizadas para o envio das
mensagens.
Com o desenvolvimento dos estudos sobre eletricidade, já no século XVIII, surge

o telégrafo, instrumento ligado por fios e eletroímãs, baseado na emissão de impulsos
eletromagnéticos, encarregado de enviar mensagens a longas distâncias.
6
Telégrafo
Foi considerado uma das grandes revoluções dos meios de comunicações sendo um dos
primeiros sistemas modernos de comunicação.
Os telégrafos foram essencialmente utilizados pelos governos, sendo que a mensagem

(escrita ou visual) era transmitida por códigos, donde surge o Código Morse, inventado
pelo pintor estadunidense Samuel Morse (1791-1872).
No século XIX, o rádio e o telefone foram os principais meios de comunicação.
Por meio de ondas eletromagnéticas, o rádio foi criado e utilizado para propagar as
informações, bem como servir de entretenimento, com as músicas e radionovelas.
Note que foi um importante instrumento de comunicação utilizado durante os períodos

de guerra.
Já o telefone, representou a evolução do telégrafo uma vez que representa um

instrumento ligado por fios, entretanto, que emite mensagens de voz a longas distâncias
em tempo real, enquanto os telégrafos só enviavam desenhos ou mensagens de texto.
Todavia, diferente do telégrafo, esse meio de comunicação se expandiu sendo muito

utilizado atualmente: telefone público, analógico, digital, sem fio e celulares.
No século XX, sem dúvida, a televisão e a internet foram (e continuam sendo) os

principais meios de comunicação.
7
A televisão é um instrumento de reprodução de som e imagem simultâneos, por meio de

ondas eletromagnéticas.
Já a internet, representa um sistema global de redes de computadores que utiliza das

mais variadas tecnologias de rede: eletrônica, sem fio e óptica.
Pesquisas apontam que a televisão ainda é o meio de comunicação mais utilizado pelo
homem, e, em segundo lugar está a internet, que cada vez mais se expande pelo mundo
no campo das comunicações instantâneas.
Tipos de meio de comunicação

De acordo com o campo e atuação, existem dois tipos de meios de comunicação, a
saber:
• Individual: os meios de comunicações individuais estão pautados na comunicação

interna, interpessoal (entre as pessoas), por exemplo, a carta (correio), telefone, fax.
• Massa: os meios de comunicação de massa, é mais ampla e externa, como intuito de

comunicar um grande número de pessoas, por exemplo, jornais, revistas, internet,
televisão, rádio.
Classificações de comunicação
Segundo o tipo de linguagem utilizada (escrita, sonora, audiovisuais, multimídia,
hipermídia), os meios de comunicação social classificam-se em:
• Escritos: linguagem escrita dos jornais, livros e revistas.

• Sonoros: linguagens através de sons, por exemplo, o rádio e o telefone.
• Audiovisuais: fusão de som e imagem, por exemplo, a televisão e o cinema.
• Multimídias: reunião de diversos meios de comunicação diferentes (texto, áudio,
vídeo, etc.).
• Hipermídias: fusão de meios de comunicação por meio dos sistemas eletrônicos de
comunicação, por exemplo, CD-ROM, TV digital e internet.
Domínios de Internet
O registro de domínio é um endereço, uma identidade ou uma marca constituída na
internet que realiza a relação entre nomes e endereços IP (Internet Protocol),
permitindo as pessoas ou empresas utilizar nomes e não números para acessar websites
e enviar e-mails.
8
Cada servidor na internet tem endereço de IP próprio, representado por uma série de
quatro números separados por pontos, por exemplo, 31.13.85.36.
O domínio é classificado como nacional e internacional, sem necessidade do conteúdo

em português e inglês.
Domínios nacionais são terminados em “.br”.
O mais comum é o “.com.br”. Também há as opções de entidades de classe, como

advogados “.adv.br”, médicos “.med.br”, dentre outros.
São regulamentados pela Registro.br, órgão ligado ao Governo Federal.
Para registrar um domínio com terminação “.br” deve-se informar um número de CPF
ou CNPJ que será definido como proprietário deste domínio.
Domínios internacionais são regulamentados por uma entidade específica, o ICANN, e

as terminações mais comuns são “.com”, .”net” e “.org”.
Embora sejam internacionais, podem ser utilizados normalmente para websites

brasileiros.
Site registro.br
9
Servidor Web
O servidor web é a peça mais importante da infraestrutura de um site na internet.
Ele é um programa que usa o HTTP (Hypertext Transfer Protocol) para servir os
arquivos que formam páginas da web para os usuários, em resposta aos seus pedidos,
que são encaminhadas pelos clientes HTTP de seus computadores.
Computadores dedicados e equipamentos podem ser referidos como servidores web

também.
Existem servidores web como software livre (Apache e Nginx) ou software proprietário
(dedicado), que é adquirido com um fornecedor especializado geralmente por empresas.
Falando genericamente, o servidor web é responsável por armazenar e intercambiar

informações com outras máquinas.
Para que isso aconteça ao menos dois participantes estão envolvidos nesta troca de
informações: os usuários/clientes (solicitantes) e os servidores (atendentes).
Requisição HTTP
Tipos de redes de computadores mais conhecidas
10
LAN – Rede Local
As chamadas Local Area Networks, ou Redes Locais, interligam computadores presentes

dentro de um mesmo espaço físico.
Isso pode acontecer dentro de uma empresa, de uma escola ou dentro da sua própria
casa, sendo possível a troca de informações e recursos entre os dispositivos
participantes.
MAN – Rede Metropolitana
Imaginemos, por exemplo, que uma empresa possui dois escritórios em uma mesma
cidade e deseja que os computadores permaneçam interligados.
Para isso existe a Metropolitan Area Network, ou Rede Metropolitana, que conecta
diversas Redes Locais dentro de algumas dezenas de quilômetros.
WAN – Rede de Longa Distância
A Wide Area Network, ou Rede de Longa Distância, vai um pouco além da MAN e
consegue abranger uma área maior, como um país ou até mesmo um continente.
Intranet e Extranet
A Intranet é uma rede de computadores, que disponibiliza um conjunto de serviços
análogo à Internet, também baseada na pilha de protocolos TCP/IP. Porém, a Intranet é
restrita a um local físico. Ou seja, é uma rede fechada, interna e exclusiva.
11
Empresas, órgãos públicos e outros tipos de organizações normalmente possuem

Intranets, pois precisam de uma rede de computadores similar à Internet para manter os
seus serviços, como os seus Portais Corporativos e outros recursos on-line.
Contudo, por questões de segurança, não há interesse que tais serviços estejam
disponíveis para livre acesso pela Internet. Daí a necessidade de se implantar uma
Intranet.
A Extranet, por fim, funciona como uma extensão da Intranet a computadores que
estejam fora dos domínios físicos da Intranet.
Não raro, é necessário que parceiros, clientes, fornecedores, e até mesmo funcionários
da organização precisem acessar alguns serviços da Intranet, mesmo estando fora da
organização.
E, nesse contexto, a Extranet torna-se ferramenta essencial para a organização.
Servidor DNS
De forma clara e objetiva, um servidor DNS é um computador que contém um
banco de dados com endereços de IP públicos e os seus respectivos domínios
associados.
Vale ressaltar que existem diversos deles por aí: eles executam softwares específicos e se
comunicam entre si com base em protocolos especiais.
Em termos práticos, eles fazem a ligação entre um domínio e um número de IP,

que nada mais é do que a identificação do servidor para qual o domínio está
apontado.
Para facilitar ainda mais, um servidor DNS é o sistema que traduz o “facebook.com”
para um endereço de IP, por exemplo, 31.13.85.36. Isso ocorre quando o domínio é
digitado nos navegadores.
12
Desse modo, não é necessário ter que decorar sequências enormes de números, apenas o
domínio. E é justamente essa a serventia do DNS, fazer com que você encontre os
conteúdos da web pelo seu próprio nome.
Para contextualizar, podemos dizer que o DNS desempenha uma função bastante similar
a uma lista telefônica. Porém, em vez de associar pessoas/empresas aos seus telefones,
ele relaciona os nomes aos seus endereços de IP.
Ao requisitar um domínio, o pedido é encaminhado ao servidor responsável pelo

atendimento de tal, o qual estará o redirecionando para outro servidor que atende
a hospedagem do site.
Quais são os servidores DNS mais populares?

Você até configurar um caseiro, mas os públicos são melhores, mais rápidos e mais
seguros.
Google Public DNS
O Google Public DNS é um serviço bem simples, oferecendo apenas a tradução dos
domínios para os seus IPs. Para utilizá-lo, o computador ou roteador deve conter os
seguintes endereços:
• 8.8.8.8 (servidor primário);

• 8.8.4.4 (servidor secundário).
OpenDNS
Outro muito conhecido é OpenDNS, que oferece recursos adicionais como sistemas de
proteção parental e proteção contra sites falsos. Seus endereços são:
• 208.67.222.222 (servidor primário);

• 208.67.220.220 (servidor secundário).
Servidor FTP
FTP é a sigla para File Transfer Protocol, um termo que, traduzido para o português,
significa Protocolo de Transferência de Arquivos.
Ele é basicamente um tipo de conexão que permite a troca de arquivos entre dois
computadores conectados à internet.
13
Com ela, você pode enviar qualquer coisa para uma outra máquina ou armazená-los em
um servidor FTP, ficando ela sempre disponível para o usuário acessar.
A tecnologia foi desenvolvida por Abhay Bhushan, na época, um estudante de

engenharia elétrica no MIT (Massachussets Institute of Technology), um dos centros de
ensinos acadêmicos mais conceituados do mundo.
O FTP apareceu inicialmente com a proposta de criar um fluxo de transferência segura

de arquivos entre os computadores e os servidores da ARPANET Network Control
Program.
Como funciona o FTP?

No processo de transferência e recebimento de arquivos pela internet, o FTP funciona
em torno de dois protagonistas: o cliente e o servidor.
O cliente é o computador que solicita a conexão para ter acesso aos dados já hospedados
na internet. Já o servidor é um outro computador que atua como um ambiente virtual,
recebendo a solicitação do cliente para a transferência dos arquivos nele hospedados.
O computador que atua como cliente consegue acesso aos arquivos hospedados na
internet através de um programa que se conecta ao computador que atua como servidor.
É ele quem também faz a transferência dos arquivos do computador para o servidor.
Já o computador que atua como servidor geralmente possui programas disponíveis para
permitir a conexão de computadores externos a ele. Ele simplesmente autoriza a
transferência dos arquivos armazenados nele para o cliente que está solicitando o
acesso.
Essa é a dinâmica de comunicação entre usuários de computadores que querem

compartilhar dados, informações ou conteúdos entre si, seja para fins pessoais ou
profissionais.
Essa operação precisa ser segura. Por isso, ela sempre pede alguma autenticação para
proteger as transferências de dados. Ou seja, é obrigatório ter um login e uma senha de
acesso para transferir arquivos pelo FTP.
Segue, abaixo, um resumo do passo a passo do que acontece ao usar usar um sistema
FTP.
• Você inicia um programa de FTP no seu computador que atua como cliente;
• Você insere um usuário e senha de acesso no programa de FTP;
14
• O servidor recebe o pedido de conexão, reconhece os dados e redireciona o seu

acesso para o diretório onde estão os arquivos;
• Você já fez o intercâmbio de dados, transferindo arquivos do seu computador
para o servidor e vice-versa;
• Depois de realizar todas as tarefas, a conexão entre computador e servidor é
encerrada.
Servidor de hospedagem
Hospedagem de site é um serviço online que permite a publicação de um site ou
aplicação na internet.
Quando você adquire uma hospedagem, basicamente você está alugando um espaço
dentro de um servidor.
Nele ficam armazenados todos os arquivos e dados necessários para o bom

funcionamento do site.
Um servidor é um computador físico que nunca é desligado para que seu site ou
aplicação esteja sempre online.
Seu provedor de hospedagem é responsável por manter o site no ar e funcionando,

proteger de ataques maliciosos e transferir seu conteúdo (texto, imagens, arquivos) do
servidor até o navegador do visitante.
Desenvolver Front-end
O desenvolvedor front-end é responsável por “dar vida” à interface.
Trabalha com a parte da aplicação que interage diretamente com o usuário. Por isso, é
importante que esse desenvolvedor também se preocupe com a experiência do usuário.
Na parte de estudo, este profissional foca em HTML (linguagem de marcação), CSS

(linguagem de estilo) e JavaScript (linguagem de script/programação).
É comum alguns profissionais de front-end trabalharem mais com a parte “criativa” e

“artística” da aplicação.
Assim como também há os que possuem um perfil mais voltado ao back-end, mesmo
atuando como front-end.
Esses possuem mais familiaridade com programação e suas nuances. Um tipo de perfil
não invalida o outro.
15
Desenvolvedor Back-end
Como o nome sugere, o desenvolvedor back-end trabalha na parte de “trás” da
aplicação. Ele é o responsável, em termos gerais, pela implementação da regra de
negócio.
Em uma aplicação web, este desenvolvedor, quando focado, não toca na parte visual da
aplicação. Por lidar com a regra de negócio, às vezes um programador de sistemas, como
de aplicações comerciais e até científicas, pode ser chamado de desenvolvedor back-end.
Quando falamos de back-end em desenvolvimento web, nos deparamos com várias

linguagens, como Go, Clojure, C#, PHP, Java, Python, Ruby, entre outras.
Cada uma possui vantagens e desvantagens em relação ao uso no desenvolvimento web,

bem como no mercado de trabalho. Algumas linguagens são mais atuais e com poucos
profissionais no mercado. Desta forma, há uma grande demanda por elas (ex: Go e
Clojure).
Outras são mais tradicionais, fazem parte de um mercado já consolidado e possuem uma
grande gama de material de estudo (ex: C#, PHP, Java e Ruby).
Para quem está iniciando, é recomendável focar nas linguagens mais tradicionais, pois o
aprendizado será mais completo, dado o número extenso de materiais disponíveis.
Isso também facilitará o posicionamento no mercado de trabalho, já que essas

linguagens possuem mais oportunidades de emprego disponíveis.
Para que o aprendizado em back-end seja ainda mais completo, é preciso ter
conhecimento em banco de dados (ex: MySQL, SQL Server, PostgreSQL, entre outros).
Normalmente o banco de dados é escolhido com base no que possuir mais recursos
disponíveis na linguagem que será utilizada na aplicação.
16
Editores HTML
Editor HTML ou editor Web é um software para a criação de páginas web utilizando a
linguagem de marcação HTML.
Embora a edição em linguagem HTML de uma página web possa ser feita com qualquer
editor de texto, editores HTML específicos oferecem vários recursos extras para auxiliar
na criação de páginas.
Acrescentam outras funcionalidades, e muitos dão a opção de visualização do projeto,

tanto em linhas de código HTML quanto o resultado delas no design da página.
Alguns editores conhecidos: SublimeText, Notepad++, NVU, Atom, WebStorm,

PHPEditor, Dreamweaver, KompoZer, Amaya, Bloco de Notas do Windows.
17
Introdução a HTML5
Logotipo do HTML
HTML é uma linguagem de marcação originalmente proposta por Tim Berners-Lee no

final da década de 1980. O objetivo do Tim Barners-Lee era criar um mecanismo
simples que pudesse ser utilizado por qualquer pessoa que quisesse disseminar
documentos científicos.
Tim Berners-Lee, criador da World Wide Web
Desde sua proposta até os dias de hoje, a linguagem HTML sofreu diversas alterações. A
cada versão, novos recursos são adicionados e problemas corrigidos. A versão mais atual
da especificação da linguagem HTML é a 5.
As especificações da linguagem HTML são publicadas pelo World Wide Web

Consortium mais conhecido por sua sigla W3C.
18
Além do HTML, o W3C também é responsável por linguagens como o XML, o SVG e
pela interface DOM (Document Object Model), por exemplo. Site oficial do W3C
https://www.w3.org/TR/html5/
Basicamente, um documento HTML é composto por elementos hierarquicamente
organizados.
Para inserir um elemento em um documento HTML, devemos utilizar as tags
correspondentes a esse elemento.
As tags são definidas com parênteses angulares (< e >).
Os elementos podem possuir atributos e conteúdo. Os atributos são formados por
nome e valor.
Normalmente, os valores dos atributos são definidos dentro de aspas dupla e o conteúdo
dos elementos é um texto ou outros elementos.
De acordo com a especificação da linguagem HTML, alguns elementos são

denominados Normal Elements. Esses elementos são abertos com uma tag e fechados
com outra tag. Por exemplo, o elemento p é um Normal Element.
Observe a utilização da tag de abertura e da tag de fechamento do elemento p.
<p>Welington Tutoriais - Canal de Educação e Tecnologia</p>
19
Há também elementos denominados Void Elements. Esses elementos não possuem

conteúdo.
Na sintaxe HTML, esses elementos são abertos e fechados com apenas uma tag com ou
sem o caractere “/”. Um exemplo de Void Element é o elemento br.
<p>Welington Tutoriais <br> Canal de Educação e Tecnologia</p>
<p>Welington Silva<br/>Professor de Informática</p>
<!DOCTYPE>
Para um navegador exibir corretamente uma página web, devemos informar

explicitamente o tipo do documento.
O tipo do documento é informado com a declaração <!DOCTYPE>.
Quando conveniente, discutiremos as principais diferenças entre os tipos de documentos
mais importantes.
Veja a declaração <!DOCTYPE> para os principais tipos de documentos.
Doctype para HTML 4.01:

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
Doctype para HTML 2.0:

1 <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
Doctype para XHTML 1.0:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
20
3 <html xmlns="http://www.w3.org/1999/xhtml">
Em sua própria maneira o doctype está dizendo que “este documente é escrito em
HTML 4.01” ou “Este documente está escrito em XHTML 1.0”.
Para HTML 5 o doctype não informa a versão em lugar algum, só informa que o
documento é do tipo HTML.
Doctype para HTML5:
1 <!DOCTYPE html>
<html>
Os elementos HTML, com exceção do DOCTYPE, devem ser inseridos no conteúdo

do elemento html.
Esse elemento é aberto com a tag <html>, fechado com a tag </html> e deve conter
exatamente um elemento head seguido de exatamente um elemento body.
Diversos autores recomendam a utilização do atributo lang. Esse atributo indica a língua
utilizada no documento HTML ou na maior parte dele.
Algumas ferramentas de leitura ou de tradução de texto podem utilizar esse atributo para
descobrir facilmente em qual língua os textos contidos no
documento HTML ou na maior parte dele foram escritos.
<head>
A principal função do elemento head é agrupar informações sobre o documento HTML
(metainformação).
São exemplos de metainformações: o encoding, a taxa de atualização, o autor, a
descrição e as palavras chaves do documento HTML.
O elemento head é aberto e fechado pelas tags <head> e </head> respectivamente.
21
Obrigatoriamente, salvo algumas poucas exceções, o corpo do head deve conter

exatamente uma ocorrência do elemento title. Esse elemento define o título do
documento HTML.
<body>
O conteúdo de uma página web deve ser definido no corpo do elemento body.
Por exemplo, podemos inserir no corpo do body cabeçalhos, textos, listas, tabelas, entre
outros componentes.
Esse elemento é aberto pela tag <body> e fechado pela tag </body>.
Comentários
Podemos adicionar comentários em um documento HTML dentro das tags .
Os comentários são ignorados pelos navegadores.
Exercícios
1. Crie um documento HTML e salve com o nome index.html em uma pasta de sua
preferência.
2. Escreva a estrutura básica do HTML com doctype, html, head, body, title, charset,
dois parágrafos com quebra de linha. Invente um texto.
3. Lembre-se sempre de salvar os arquivos com letras minúsculas e sem caracteres
especiais. Os comandos também devem ser em letras minúsculas. Faça endentação do
código para organizar o documento.
4. Sempre salve o arquivo (ctrl+s) e envie para seu e-mail ou drive como backup.
Web Semântica
As placas de sinalização são fundamentais para manter a ordem no trânsito.
Cada placa possui um significado específico. A utilização equivocada das placas de
trânsito pode causar problemas como colisões de veículos.
22
Considere um cruzamento no qual é proibido virar a esquerda ou a direita (exemplo:

Av. Rebouças com Av Brasil ou Av. Prof. Francisco Morato com Av. Vital Brasil).
Nesse cruzamento, o funcionário encarregado de instalar as placas de trânsito decidiu
utilizar a sinalização abaixo.
Essa sinalização está totalmente equivocada.

Ela indica a existência de obstáculos na pista que obrigam a passagem dos veículos pelo
lado direito ou pelo lado esquerdo.
O motorista que conhece o significado correto dessa placa pode decidir virar à direita ou
à esquerda e sofrer uma colisão.
Para não gerar confusão o funcionário poderia utilizar a placa abaixo.
Para manter a organização no trânsito, a semântica(significado) das sinalizações deve ser

respeitada.
Analogamente, no desenvolvimento web, é fundamental respeitar o significado dos
elementos HTML.
23
De acordo com a especificação da linguagem HTML, a maior parte dos elementos

possuem um propósito bem definido.
Para o funcionamento correto das páginas de uma aplicação web, é fundamental
respeitar o propósito de cada elemento e utilizá-lo nas condições corretas.
Muitos autores utilizam o termo semântica HTML ao se referirem ao uso correto dos
elementos da linguagem HTML.
Títulos
Assim como em um livro, uma página web pode conter uma hierarquia de títulos para
estabelecer uma divisão do seu conteúdo.
Para inserir títulos em uma página web, devemos utilizar os elementos h1, h2, h3, h4, h5
e h6.
Os sufixos numéricos de 1 a 6 indicam o nível do título dentro da hierarquia
de títulos do documento.
Observe que os títulos não foram exibidos lado a lado e sim um embaixo do outro.
Geralmente, os navegadores exibem os títulos como blocos.
Por padrão, esses blocos ocupam todo o espaço horizontal do elemento onde os títulos
estão contidos.
No exemplo, os títulos estão contidos no corpo da página. Portanto, ocupam todo o
espaço horizontal da página.
Esse é o comportamento padrão dos block-level elements.
24
Geralmente, os navegadores utilizam tamanhos diferentes de fonte para cada título.

Não existe um padrão de tamanho e de fonte entre os navegadores. Em outras palavras,
os títulos de uma página web podem ser exibidos de maneiras diferentes em navegadores
distintos.
Para padronizar a exibição dos títulos, podemos aplicar as regras CSS.
Devemos utilizar os títulos com cautela, pois eles são usados como critério de
ranqueamento por buscadores como Google, Yahoo e Bing.
O uso correto dos elementos de título é fortemente recomendado pelos especialistas em
SEO (Search Engine Optimization). Para utilizá-los corretamente, devemos respeitar
basicamente as seguintes regras.
• Manter a ordem lógica dos títulos. Um elemento h2 deve ser precedido de um
elemento h1. Um elemento h3 deve ser precedido de um elemento h2. E assim
sucessivamente.
• O título de uma seção deve descrever bem o conteúdo dela.
Parágrafos
Os parágrafos de uma página web são definidos através do elemento p.
Assim como os títulos, normalmente, os navegadores definem os parágrafos como
block-level elements.
Dessa forma, por padrão, eles ocupam horizontalmente todo o espaço do elemento pai.
Os navegadores ajustam os textos dos parágrafos à largura do elemento pai. As quebras
de linha necessárias são inseridas automaticamente.
Os espaços excedentes definidos em um documento HTML entre as palavras de um
parágrafo são desconsiderados pelos navegadores na exibição das páginas web.
Analogamente, as quebras de linha presentes no documento HTML também são
desconsideradas pelos navegadores.
Caso seja necessário forçar uma quebra de linha entre duas palavras contidas em um
parágrafo, podemos utilizar o elemento br.
Quando um parágrafo contém palavras muito longas, os navegadores podem ter
dificuldades para ajustar as quebras de linha.
Podemos indicar explicitamente com o elemento wbr, como as palavras podem ser
“quebradas”.
25
Exercícios
Crie um documento html com um texto de parágrafo que tenham palavras grandes para
serem quebradas conforme a imagem. Coloque o título principal e três subtítulos entre os
textos. Salvar com o nome titulo.html.
Character Entities
Para inserir determinados caracteres em um documento HTML, devemos utilizar o código do

caractere desejado.
A utilização desses códigos evita problemas de encoding na exibição das páginas web.
26
Para mais códigos: https://dev.w3.org/html5/html-author/charref
Textos
Texto pré-formatado
Como vimos, os navegadores desconsideram os espaços excedentes entre as palavras contidas

em um documento HTML assim como desconsideram as quebras de linha.
Contudo, é possível inserir texto formatado com quantos espaços e quebras de linha
desejarmos através do elemento pre.
O texto contido no conteúdo de um elemento pre é exibido com todos os espaços e quebras
de linha inseridos no documento HTML.
Além disso, os navegadores costumam utilizar fonte mono espaçada para mostrar esse texto.
27
Para adicionar códigos em um documento HTML, devemos utilizar o elemento code.
Normalmente, esse elemento é utilizado para definir códigos escritos em alguma linguagem de
programação.
Normalmente, os navegadores utilizam fonte mono espaçada para exibir o conteúdo desse
elemento.
Elemento i
A especificação da linguagem HTML 5 não é muito precisa na definição da semântica do
elemento i.
28
Ela indica a utilização desse elemento para definir nomes científicos, termos técnicos,
expressões idiomáticas em outras línguas, transliterações, pensamentos.
Esse elemento também pode ser utilizado para determinar textos que devem ser lidos com voz
ou humor alterado.
Dessa forma, os sintetizadores de voz podem fazer a leitura do texto de forma mais adequada.
Normalmente, os navegadores definem o i como inline-level element e exibem o seu

conteúdo em itálico.
29
Elemento b
A especificação da linguagem HTML 5 não é muito precisa na definição da semântica do
elemento b.
Ela indica, por exemplo, a utilização desse elemento para definir as palavras chave do resumo
de um documento e o nome do produto em texto de avaliação.
Normalmente, os navegadores definem o b como inline-level element e exibem o conteúdo

em negrito.
30
Texto importante ou enfatizado
Podemos definir textos importantes ou enfatizados com os elementos strong e em

respectivamente.
Por padrão, nos navegadores, o conteúdo de um elemento strong é exibido em negrito e o

conteúdo de um elemento em é exibido em itálico.
Normalmente, os navegadores definem esses elementos como inline-level elements.
Citações
Podemos definir citações longas ou curtas com os elementos blockquote e q respectivamente.
Por padrão, o elemento blockquote é exibido como elemento de bloco e o elemento q é

exibido como elemento de linha.
31
Esses dois elementos possuem o atributo cite que deve ser utilizado para indicar a fonte da
citação.
Também podemos citar, com o elemento cite, títulos de trabalhos, livros, músicas, filmes,
programas de TV, peças de teatro, entre outros. Por padrão, esse elemento é exibido como
elemento de linha.
32
Abreviações
Podemos definir abreviações com o elemento abbr. Por padrão, esse elemento é exibido como
elemento de linha. O atributo title desse elemento é utilizado para definir um tooltip.
Texto marcado
O elemento mark permite que determinados trechos de um texto sejam marcados.
33
Exercícios
Agora é sua vez fazer um textão. Reproduza a imagem abaixo com os códigos estudados sobre
formatação de textos.
34
Listas
A linguagem HTML define três tipos distintos de listas.
- Lista de descrições;
- Lista com ordem;
- Lista sem ordem.
Lista de descrições
Para criar uma lista de descrições, devemos utilizar o elemento dl.
Essas listas são formadas por termos ou nomes e as suas respectivas descrições.
Os termos ou nomes são definidos com o elemento dt.
As descrições são definidas com o elemento dd.
35
Lista com ordem

Para criar uma lista com ordem, devemos utilizar o elemento ol.
Os itens de uma lista com ordem são definidos com o elemento li.
36
Lista sem ordem

Para criar uma lista sem ordem, devemos utilizar o elemento ul.
Os itens de uma lista sem ordem são definidos com o elemento li.
37
Listas aninhadas
Uma lista pode ser definida dentro de outra lista. Quando listas sem ordem são aninhadas,
normalmente, os navegadores alternam o marcadores dos itens.
38
Exercícios
Faça as listas conforme enunciado.
1. Crie uma lista de descrição de 4 alimentos que são ótimas para dieta e 4 alimentos que
não são recomendados.
2. Crie uma lista com marcadores com 5 coisas que você gosta de fazer no final de semana.
3. Crie uma lista numerada com as coisas / pessoas mais importantes da sua vida.
Obs.: são sugestões. Se quiser escrever outra coisa fique à vontade.
4. Faça uma lista aninhada com filmes e séries para assistir nas férias. Para cada tipo de
vídeo (filme ou série) faça 3 gêneros: Ex.: ação, terror, comédia. Em cada gênero colocar
classificação para menores e maiores que 13 anos. Coloque 4 filmes cada em gênero,
sendo 2 filmes para cada faixa etária.
Filmes:
Ação:
Maior que 13 anos:
Filme 1
Filme 2
Menor que 13 anos:
Filme 1
Filme 2
(repetir mais dois gêneros)
Séries:
Comédia:
Maior que 13 anos:
Filme 1
Filme 2
Menor que 13 anos:
Filme 1
Filme 2
(repetir mais dois gêneros)
39
Iframes
Um documento HTML pode conter outros documentos HTML. Para adicionar um documento
HTML dentro de outro, devemos utilizar o elemento iframe.
Esse elemento possui o atributo src. Esse atributo indica o caminho absoluto ou relativo de um
documento HTML.
Exercícios
1. Crie duas páginas: uma com um título e iframe chamando outra página com um título e
texto e uma parágrafo.
2. Coloque na primeira página um vídeo do Youtube com a função embed no site do

Youtube.
Links
Normalmente, um site é formado por um conjunto de páginas que estão interligadas de alguma
forma. Para permitir que um usuário navegue de uma página para outra, devemos utilizar os
links.
Basicamente, um link faz a ligação de uma página para outra do mesmo site (link interno) ou
para uma página de outro site (link externo).
Para criarmos um link, devemos utilizar o elemento a. Esse elemento possui um atributo
chamado href.
O valor desse atributo indica o caminho relativo ou absoluto de uma outra página.
40
Para abrir o link em uma nova aba ou página do navegador deve-se usar o atributo
target=“_blank” no elemento a.
Exercícios
1. Crie uma página com um título e um parágrafo. Coloque no título um link para o site do
IFNMG. Dentro do texto escolha duas palavras e coloque links do site do MEC para
abrir em outra janela.
Âncoras
Além de criar links para outras páginas, podemos criar um link para uma determinada seção
de um documento HTML. Esse recurso é chamado de ancoragem.
O primeiro passo para utilizar esse recurso é identificar a seção que será o destino desse link.
Essa identificação é realizada com o atributo id. O id é um atributo global, ou seja, todos os
elementos possuem esse atributo.
O segundo passo é criar os links utilizando os identificadores das seções de acordo com a
sintaxe do exemplo a seguir. Observe a utilização do caractere #.
41
Exercícios
1. Criar uma página estilo Wikipédia com título principal, uma lista para o sumário,
subtítulos para cada tópico do sumário e um texto de parágrafo para item. Faça textos
grandes para ter uma barra de rolagem. Coloque no sumário um link para o item
correspondente na página. Ao final de cada parágrafo colocar um link para quando o
usuário clicar subir para o topo da página.
2. Agora crie outra página estilo Wikipédia igual ao exercício anterior. Entretanto, o menu
de navegação deverá ficar em outro arquivo. Ao clicar no menu presente nesse arquivo
secundário o usuário deverá ir até o tópico correspondente na outra página.
42
Imagens
Os sites seriam muito entediantes se não fosse possível adicionar imagens ao conteúdo das
páginas. Podemos adicionar imagens em documento HTML com o elemento img.
Esse elemento possui um atributo chamado src. Esse atributo indica o caminho absoluto ou
relativo da imagem que queremos adicionar.
O elemento img possui um atributo obrigatório chamado alt.
Esse atributo define um texto alternativo que pode ser utilizado, por exemplo, se houver um
problema ao carregar a imagem ou por softwares de leitura de tela.
Exemplo:
<img src=“nome_do_arquivo.jpg” alt= “Foto do Simpósio” title= “Foto do Simpósio”>
URLs absolutas e relativas

Os links e as imagens podem ser adicionados em um documento HTML com URLs absolutas
ou relativas.
No exemplo acima temos o primeiro código depois do primeiro h1 com um endereço relativo
de uma imagem que está no servidor. Depois do segundo h1 temos um código de imagem com
endereço relativo. Vamos ver como funciona uma estrutura de diretórios no Windows para
entender como é.
43
Um sistema é salvo em diretório e esse chamado de “raiz”. Quando precisamos entrar em uma
pasta a partir da raiz precisamos informar qual o diretório e o arquivo queremos depois da raiz.
Entendeu? Não, né?
Por exemplo: temos uma pasta em C: chamada “site”. Nessa pasta temos um arquivo
“index.html”. Para inserir uma imagem vamos usar o código
<img src=“nome_do_arquivo.jpg”>.
Se existir* uma pasta chamada “imagens” e a foto estiver nessa pasta o código para inserir a
imagem no index.html será <img src=“nome_do_arquivo.jpg”>.
Agora se o index.html estiver na pasta imagens e a imagem estiver na raiz devemos usar o
seguinte código: <img src=“../nome_do_arquivo.jpg”>. O “../” serve para voltar um
diretório acima.
Vamos tentar?
Exercícios
1. Crie uma pasta no computador e dentro da pasta crie outra com o nome “imagens”.
2. Na raiz crie o arquivo index.html e insira 3 imagens que estarão salvas na pasta imagens
(baixe as imagens do Google Imagens). Coloque imagens do mesmo tamanho.
3. Crie outra pasta na raiz com o nome “paginas”. Crie um arquivo chamado “sobre.html”
na pasta “paginas”.
4. No arquivo sobre.html insira 2 imagens que estão salvas na pasta imagens.
5. Crie um link no arquivo sobre.html para voltar para página index.html que está na raiz.
Tabelas
Suponha que você esteja desenvolvendo o site de uma empresa e precisa apresentar alguns
relatórios em documentos HTML. Considere que os dados desses relatórios são obtidos a
partir de planilhas. Daí surge a necessidade de exibir dados de forma tabular em páginas web.
Para resolver esse problema, podemos utilizar o elemento table.
Esse elemento permite apresentar dados de forma tabular.
As linhas de uma tabela são definidas com o elemento tr, as células de títulos com o elemento
th e as células de dados com o elemento td.
Os elementos th e td possuem um atributo chamado colspan e outro chamado rowspan.
O colspan define quantas colunas uma célula deve ocupar e o rowspan define quantas linhas
uma célula deve ocupar.
44
Para mostrar as linhas da tabela coloque o atributo border com o valor 1 no elemento table.
45
Para mesclar as colunas e linhas acrescente o código a seguir:
Foram inseridos os comandos rowspan e colspan e mais uma linha com a tag tr.
46
Exercícios
Reproduza a tabela abaixo:
47
Cabeçalho, corpo e rodapé
Para melhorar a semântica das tabelas, podemos definir explicitamente o cabeçalho, o corpo e o
rodapé de uma tabela através dos elementos thead, tbody e tfoot respectivamente.
Visualmente não mudará nada.
48
Qual é a semântica desses elementos?

• thead: define o cabeçalho da tabela
• tfoot: define o rodapé da tabela
• tbody: define o corpo da tabela
Por que complicar? Qual o motivo da existência desses elementos?
• O elemento thead, assim como o tfoot, servem para agrupar as linhas de cabeçalho e de
rodapé, respectivamente.
• O código fica mais claro.
• Facilita a aplicação de estilos CSS (através do seletor de elemento).
• Os navegadores podem utilizar barras de rolagem para exibir o conteúdo de uma tabela longa.
Essa característica não é obrigatória.
• Na impressão de uma tabela longa, a ferramenta utilizada pode replicar o cabeçalho e o

rodapé em todas as páginas. Essa característica não é obrigatória.
Podemos também definir um título para a tabela semanticamente falando com o elemento
caption. Esse deve ser o primeiro filho de table.
49
Exercícios
Crie a estrutura abaixo:
✓ Pesquise pelas imagens semelhantes no Google Imagens.

✓ Coloque links fictícios nos menus de navegação.
✓ Coloque links nas imagens das opções. Ao clicar abrir uma nova janela escrito: “Registro
excluído com sucesso” se clicar em excluir. “Não é possível editar” se clicar em editar.
Mostrar um relatório simples com nome, cpf e e-mail de um cliente.
50
Formulários
Para tornar os sites e as aplicações web mais interativos, podemos utilizar formulários. Por
meio dos formulários, os usuários podem enviar informações aos servidores web.
Para criar um formulário, devemos utilizar o elemento form. Esse elemento possui um atributo
chamado action. O valor desse atributo indica para qual endereço os dados do formulário
serão enviados.
Os formulários são compostos por caixas de texto, checkboxes, radios, caixas de seleção,
botões, senhas, entre outros componentes.
Os dados enviados no formulários serão recebidos no arquivo resposta.html. No entanto, nada

será processado. É necessário usar um arquivo PHP para isso.
Caixas de texto
As caixas de texto são adicionadas nos documentos HTML por meio do elemento input.
Esse elemento possui um atributo chamado type. Para definir uma caixa de texto, o valor do
atributo type deve ser text.
Imagine que você queira enviar vários campos de formulários com valores distintos. Para o
servidor web saber o que o usuário preencheu deve-se usar o atributo name no elemento
input.
51
Quando o arquivo resposta.html receber os dados enviados os valores serão armazenados em

variáveis em tempo de execução do navegador. As variáveis serão nome e email. Observe
como ficou a url do site depois de enviar. Foi acrescentando após o html o valor
“?nome=&email=”.
Parâmetros GET e POST

Muitas vezes, não é adequado exibir os valores dos atributos na barra de endereço dos
navegadores.
Podemos ocultar esses valores adicionando o atributo method com o valor post no elemento
form. Esse atributo aceita apenas dois valores: get e post.
Ele define o tipo de requisição HTTP que o navegador deve realizar para enviar o formulário.
Nas requisições do tipo GET, os parâmetros são adicionados na URL da requisição.
Nas requisições do tipo POST, os parâmetros são adicionados no conteúdo da requisição.
Rótulos
Nos formulários, os rótulos são fundamentais para informar aos usuários quais dados devem
ser preenchidos. Para adicionar um rótulo, devemos utilizar o elemento label. Os textos dos
rótulos são definidos no conteúdo desse elemento.
52
Para melhorar a acessibilidade dos documentos HTML, os rótulos devem ser explicitamente
associados aos campos dos formulários.
Para estabelecer esse vínculo, o primeiro passo é identificar os campos através do atributo id.
O segundo passo é definir o atributo for do elemento label com o identificador do campo
correspondente ao rótulo.
Ao clicar no label o cursor do mouse vai para o campo correspondente.
Placeholders
Os rótulos são utilizados para informar aos usuários quais dados devem ser preenchidos nos
formulários.
Além dos rótulos, podemos utilizar placeholders para dar dicas ou exemplos do conteúdo que
desejamos em cada caixa de entrada. Um placeholder é criado com o atributo placeholder do
elemento input.
Quando o usuário preencher o texto do placeholder vai desaparecer.
Botões de submit
Para adicionar um botão de submit em um formulário, podemos utilizar o elemento input com
type igual a submit. Esse tipo de botão envia os dados do formulário para o servidor web. Os
textos desses botões são definidos com o atributo value.
53
Faça o veja o resultado.
Podemos adicionar botões também usando o elemento button com type igual a submit. A
diferença desse em relação ao input é que podemos adicionar imagens no botão.
Exercícios
Crie um formulário simples de cadastro com os campos a seguir:
- nome;
- e-mail;
- profissão
- botão de salvar
- botão cancelar;
Coloque imagens nos botões. Pesquise por ícones sem fundo no Google Imagens. Esconda os
valores da url quando o formulário for enviado. Envie os dados para o próprio arquivo.
No HTML5 foram criadas outras caixas de textos específicas para alguns tipos de dados. A
caixa de texto era muito usada para vários valores, mas era muito genérica. Semanticamente
tornou-se inviável.
Caixas de busca
As caixas de busca são adicionadas nos formulários com o elemento input. A diferença é que o
valor do atributo type deve ser search ao invés de text.
Caixas de números
54
Para campos numéricos temos os inputs do tipo number e range. Os dois aceitam valores
numéricos. O primeiro o usuário digita o valor ou clica nas setinhas. No segundo aparece uma
barra de rolagem para escolher os valores.
Por padrão o input do tipo range não mostra o número para o usuário. É preciso incrementar
um código simples no input em javascript que chama o evento oninput que altera o valor de
outro input. Veja abaixo:
Podemos definir a sequencia de números usando os atributos min, max e step. Sendo o min o
valor mínimo, max o valor máximo e step o intervalo entre os valores. Por exemplo se o valor
mínimo for 1, o valor máximo for 10 e o intervalor for 0.5. Ao arrastar os controles ou clicar
nas setinhas do number os valores serão alterados a cada 0.5. Ou seja, 1, 1.5, 2, 2.5...
Para inserir caixas de texto para valores de e-mail, site e telefone no HTML5 usamos o
elemento input com o type definido para email, url e tel.
55
Esses tipos de campos melhoram a usabilidade em dispositivos móveis pois ao serem acessados
o teclado do dispositivo mudará de acordo com cada campo.
Por exemplo, o campo e-mail mostrará o teclado com o @, o campo site mostrará o teclado
com @ e .com e o campo telefone será mostrado um teclado numérico.
Se você tentar enviar um e-mail ou site errado não vai dar certo. Uma mensagem de erro será
exibida. O formato para site deve ter o http://.
Caixas de data e hora

Para coletar data e hora alguns campos são usados com o elemento input. São eles: date,
datetime-local, month, time e week.
Escreva o código e veja o resultado.
Caixas de senha
As caixas de senha são usadas para coletar valores de senha e são exibidos símbolos quando é
preenchido. Para isso basta usar o elemento input com type igual a password.
56
Faça o teste.
Caixa de texto longo

São usadas para coletar textos com várias linhas. O tamanho da caixa de texto pode ser
configura por meio de CSS ou ser dimensionada com o mouse.
Se quiser definir limite de caracteres pode ser usado o atributo maxlenght com a quantidade
desejada. Um texto padrão pode ser definido colocando como conteúdo do elemento.
Checkboxes e radios
Os checkboxes são campos de formulário em que podemos escolher mais de uma opção. Para
criarmos usamos o elemento input com o type checkbox. É obrigatório definir o atributo
value com o valor do campo. Além do atributo name. Um conjunto de checkbox precisa os
names iguais para formar o grupo.
Vamos fazer uma lista de seleção de melhores séries de 2019.
Os radios são campos de formulários semelhantes aos checkboxes com a diferença que apenas
uma seleção pode ser feita. Da mesma forma o atributo name deve ser igual para fazer o
agrupamento de valores. Para criar bastar usar o elemento input com o type radio.
Veja esse exemplo que escolhe o melhor canal de tutoriais do Youtube.
57
Por padrão os campos não são marcados. Há situações que é preciso carregar selecionados. O
atributo checked funciona em ambos campos de seleção. É um atributo que não tem valor.
Exercícios
Faça um formulário de cadastro de currículo com os seguintes campos:
Nome, Endereço, Data de Nascimento (pra mostrar o calendário), Sexo (pra pessoa escolher),
Estado Civil (pra pessoa escolher), E-mail (pra ser validado), Escolaridade (ensino fundamental,
Ensino Médio, Ensino Superior, Especialização, Mestrado e Doutorado), Conhecimentos em
Informática (pra pessoa escolher: Windows, Linux, Editor de Texto, Planilha Eletrônica,
Internet e Design Gráfico). Um caixa de texto longo para a pessoa escrever suas experiências e
habilidades. Botão de Enviar com o texto “Salvar registro”.
Nos campos de texto coloque placeholders para orientar o usuário.
Seleção de cores
Se você estiver criando algum sistema que precise selecionar o elemento input com type color
vai te ajudar.
Faça o teste!
Botões genéricos
Estes botões são criados para alguns fins específicos. As ações desses componentes são criadas
por meio de Javascript. No elemento é criado um atributo que é um evento do Javascript.
Cada evento tem uma ação específica como: clicar, passar o mouse, retirar o mouse, receber
foco, sair do foco, etc. Os textos exibidos nos botões genéricos são definidos com o atributo
value. O tipo desse botão é o button.
58
Perceba que nesse exemplo acima tem o atributo onclick que é um evento do Javascript. Esse
chama uma função chamada alert que serve para emitir uma mensagem na tela. Faça o teste!
O elemento button também é usado para criação de botões específicos e com inserção de
imagens como visto anteriormente.
Veja no exemplo abaixo o evento onclick sendo usado de maneira semelhante com o elemento
button.
Escreva esse código e veja no resultado no navegador.
Drop-down list
O drop-down list é usado para criar uma seleção de vários itens de uma lista.
Muitos formulários permitem que os usuários selecionem um ou mais itens de uma lista de
opções. Essa seleção pode ser realizada através de um drop-down list. Para adicionar esse tipo
de componente, devemos utilizar o elemento select.
Normalmente, o select é definido pelos navegadores como inline-level element.
59
Para escolher mais de uma opção no select podemos usar o atributo “multiple=multiple”.
Faça o teste e clique em mais de uma opção com a tecla CTRL pressionada no teclado.
Nos drop-down lists com muitas opções, é interessante agrupar as opções em categorias. Esse
agrupamento pode ser realizado com o elemento optgroup.
Para que um item seja carregado já marcado podemos usar o atributo selected no option. Veja
abaixo:
Fieldset
Os campos de um formulário muito longo podem ser agrupados logicamente com o elemento
fieldset. No conteúdo desse elemento, podemos utilizar o elemento legend para definir a
legenda do fieldset.

60
Estrutura semântica do HTML5

header
O <header> é utilizado para representar o cabeçalho de um documento ou seção declarado no
HTML. Nele podemos inserir elementos de <h1> a <h6>, até elementos para representar
imagens, parágrafos ou mesmo listas de navegação.
section
O elemento <section> representa uma seção dentro de um documento e geralmente contém
um título, o qual é definido por meio de um dos elementos entre <h1> e <h6>. Podemos
utilizar o <section>, por exemplo, para descrever as seções/tópicos de um documento.
article
Utilizamos o elemento <article> quando precisamos declarar um conteúdo que não precisa de
outro para fazer sentido em um documento HTML, por exemplo, um artigo em um blog. É
recomendado identificar cada <article> com um título.
61
nav
O elemento <nav> é utilizado quando precisamos representar um agrupamento de links de
navegação, que, por sua vez, são criados com os elementos <ul>, <li> e <a>.
aside
O elemento <aside> é utilizado quando precisamos criar um conteúdo de apoio/adicional ao
conteúdo principal. Por exemplo, ao falar de HTML semântico, podemos indicar ao leitor
outros conteúdos sobre a linguagem HTML como sugestão de leitura complementar.
main
O elemento <main> especifica o conteúdo principal e, consequentemente, de maior relevância
dentro da página. Para ser considerada bem construída, uma página deve apresentar apenas um
conteúdo principal.
62
figure
O elemento <figure> é uma marcação de uso específico para a inserção de uma figura. Para
incluir a descrição dessa figura, podemos utilizar o elemento <figcaption>.
footer
O elemento <footer> representa um rodapé de um documento, como a área presente no final
de uma página web. Normalmente é utilizado para descrever informações de autoria, como
nome e contato do autor, e data de criação do conteúdo.
63

Introdução Ao HTML5

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Introdução Ao HTML5

Enviado por

Direitos autorais:

Formatos disponíveis

Técnico em Informática para Internet Integrado ao Ensino Médio - IFNMG Campus Januária

Desenvolvimento Web I - Prof. Welington Silva – welington.silva@ifnmg.edu.br

Apostila Introdução ao HTML5

Nesse momento, surge o protótipo da primeira rede de internet, a “Arpanet” (Advanced

Mapa logico da rede ARPANet.

Assim, no dia 29 de outubro de 1969 foi estabelecida a primeira conexão entre a

Já na década de 90, o cientista, físico e professor britânico Tim Berners-Lee desenvolveu

Tim Berners-Lee, criador da World Wide Web

Alguns estudiosos acreditam que a Internet foi um marco importante e decisivo na

Hoje em dia, a Internet é utilizada mundialmente como ferramenta de trabalho, diversão,

Entretanto, foi a partir de 1989, quando fundou-se a Rede Nacional de Ensino e

Em 1997, criou-se as “redes locais de conexão” expandindo, dessa forma, o acesso a

Em 2011, segundo dados do Ministério da Ciência e Tecnologia, aproximadamente 80%

Os Meios de Comunicação representam os veículos ou instrumentos designados para

A partir do desenvolvimento da ciência e das novas tecnologias, os meios de comunicação

O “canal de comunicação” designa o local, ou o meio pelo qual a mensagem será

Assim, os meios de comunicação social se aproximam do “canal”, na medida em que ele

Desde o surgimento da escrita e do alfabeto, o homem vem desenvolvendo maneiras de

Feita essa afirmação, foram séculos de desenvolvimento até chegarmos ao ponto de

Depois da escrita, surgiram os suportes como o papiro, os pergaminhos, e mais tarde,

O correio é considerado um dos mais antigos meios de comunicação, de forma que os

Com o desenvolvimento dos estudos sobre eletricidade, já no século XVIII, surge

Os telégrafos foram essencialmente utilizados pelos governos, sendo que a mensagem

No século XIX, o rádio e o telefone foram os principais meios de comunicação.

Note que foi um importante instrumento de comunicação utilizado durante os períodos

Já o telefone, representou a evolução do telégrafo uma vez que representa um

Todavia, diferente do telégrafo, esse meio de comunicação se expandiu sendo muito

No século XX, sem dúvida, a televisão e a internet foram (e continuam sendo) os

A televisão é um instrumento de reprodução de som e imagem simultâneos, por meio de

Já a internet, representa um sistema global de redes de computadores que utiliza das

Tipos de meio de comunicação

• Individual: os meios de comunicações individuais estão pautados na comunicação

• Massa: os meios de comunicação de massa, é mais ampla e externa, como intuito de

• Escritos: linguagem escrita dos jornais, livros e revistas.

O domínio é classificado como nacional e internacional, sem necessidade do conteúdo

Domínios nacionais são terminados em “.br”.

O mais comum é o “.com.br”. Também há as opções de entidades de classe, como

São regulamentados pela Registro.br, órgão ligado ao Governo Federal.

Domínios internacionais são regulamentados por uma entidade específica, o ICANN, e

Embora sejam internacionais, podem ser utilizados normalmente para websites

Computadores dedicados e equipamentos podem ser referidos como servidores web

Falando genericamente, o servidor web é responsável por armazenar e intercambiar

Tipos de redes de computadores mais conhecidas

LAN – Rede Local

As chamadas Local Area Networks, ou Redes Locais, interligam computadores presentes

MAN – Rede Metropolitana

WAN – Rede de Longa Distância

Empresas, órgãos públicos e outros tipos de organizações normalmente possuem

E, nesse contexto, a Extranet torna-se ferramenta essencial para a organização.

Em termos práticos, eles fazem a ligação entre um domínio e um número de IP,

Ao requisitar um domínio, o pedido é encaminhado ao servidor responsável pelo

Quais são os servidores DNS mais populares?

Google Public DNS

• 8.8.8.8 (servidor primário);

• 208.67.222.222 (servidor primário);

A tecnologia foi desenvolvida por Abhay Bhushan, na época, um estudante de

O FTP apareceu inicialmente com a proposta de criar um fluxo de transferência segura

Como funciona o FTP?

Essa é a dinâmica de comunicação entre usuários de computadores que querem

• O servidor recebe o pedido de conexão, reconhece os dados e redireciona o seu

Nele ficam armazenados todos os arquivos e dados necessários para o bom

Seu provedor de hospedagem é responsável por manter o site no ar e funcionando,