aula03(2)

Prévia do material em texto

3ºAula
Fundamentos do HTML
Objetivos de aprendizagem
Ao término desta aula, vocês serão capazes de:
Prezado(a) aluno(a)!
De acordo com o W3C a Web é baseada em três pilares:
 Um esquema de nomes para localização de fontes de informação na Web 
que se chama URI. 
 Um Protocolo de acesso para acessar essas fontes, hoje, o HTTP. 
informação: o HTML.
Os dois primeiros pilares foram introduzidos nas aulas 1 e 2. Vamos agora, na 
Aula 3, focar no terceiro pilar, o HTML.
No decorrer desta aula, vamos conhecer os fundamentos da linguagem HTML 
e conhecer as especificações de desenvolvimento da HTML5. Daremos os primeiros 
passos rumo ao desenvolvimento das primeiras páginas web.
A partir de agora, iniciamos a parte prática. Sendo assim, é de fundamental 
importância que preste atenção, tenha dedicação e acompanhe passo a passo cada 
nova tag, um novo atributo, certifique-se de ter compreendido sua funcionalidade 
e aplicabilidade. Para isso, sugere-se que crie uma página ou várias páginas e vá 
aplicando/testando cada recurso apresentado e visualize no navegador o resultado, 
assim, terá uma melhor compreensão e assimilação do conteúdo.
Agora os convido a iniciar a leitura desta aula. 
Vamos lá?!
Bons estudos!
167
Desenvolvimento Voltado à Web I 20
1 – Introdução ao HTML
2 – HTML 5
3 – Novos Elementos e atributos da HTML5
4 – Elementos e Atributos Globais
linguagem da Internet e ainda continua em primeiro lugar, 
sendo a mais utilizada (MARCONDES, 2007, p. 17). 
O HTML surgiu em 1990, criado pelo cientista Tim 
Berners-Lee (Figura 3.1). A finalidade inicial era a de tornar 
possível o acesso e a troca de informações e de documentação 
de pesquisas entre cientistas de diferentes universidades. 
O projeto inicial tornou-se um sucesso jamais imaginado 
por Tim Berners-Lee. Ao inventar o HTML, ele lançou as 
fundações da Internet, tais como a conhecemos atualmente.
Figura 3.1 – Tim Berners Lee – físico conhecido como 
o “pai da www”
É importante frisarmos essa questão, pois é um assunto 
que, muitas vezes, gera dúvidas e controvérsias. Conforme a 
definição apresentada no primeiro parágrafo, HTML não é 
uma linguagem de programação, mas sim, uma linguagem de 
linear ou de sua localização. De uma maneira mais simples 
forma, qualquer documento pode levar a outro documento 
disponível na rede.
Uma de suas principais características é a facilidade de 
manipulação, pois a HTML é considerada uma das linguagens 
mais fáceis de ser utilizada. Qualquer pessoa pode aprender 
HTML, mesmo quem não conheça lógica de programação.
HTML possui dois objetivos básicos, são eles:
web
Com o HTML, pode-se definir a estrutura e o conteúdo 
criar links para outros documentos, imagens, animações, sons, 
vídeos, entre outras mídias.
De acordo com os Web Standars (padrões web), deve-
se evitar o uso da HTML para definir o layout e a formatação 
visual da página, pois essa prática não é recomendada pela 
W3C, órgão que cria e define os Web Standars.
Silva (2011) destaca que desde a invenção da web por 
Tim Berners-Lee, nos anos 1990, o HTML passou por sete 
versões:
Figura 3.2 – A ideia original da web
Seções de estudo
1 - Introdução ao HTML
Tudo se cria com um proposito, visando um objetivo, não é mesmo? 
Portanto, vamos conhecer os objetivos da HTML? 
HTML é uma linguagem de programação?
Fonte: THEFAMOUSPEOPLE (2017)
Fonte: THEFAMOUSPEOPLE (2017)
 HTML 5 (Atualmente, está em fase de esboço, porém, 
diversos navegadores já implementam algumas ou 
muitas de suas funcionalidades.)
Pode-se dizer que estamos em fase de transição da HTML 
4.01 e HTML5, onde o conteúdo que encontramos na Web 
ainda tem muito de HTML 4.01 e são utilizados, muitas vezes, 
de forma mesclada, tanto recursos novos da especificação 
HTML5 como anterior, visto que a maioria é reconhecida e 
aceita pela W3C:
somente as versões HTML 2.0, HTML 3.2, 
HTML 4.0, HTML 4.01 e HTML 5. As versões 
W3C e a versão HTML 3.0 não chegou a ser 
versão HTML 3.2 (SILVA, 2011, p. 21).
HTML consiste em uma linguagem que possibilita 
apresentar informações (documentação de pesquisas 
científicas) na Internet. O que é visto quando uma página na 
Internet é aberta, é do que a interpretação que seu navegador 
faz da HTML.
Antes de darmos continuidade, faço-lhes uma pergunta:
168
21
Ao construir suas páginas, elas devem ser projetadas para 
que:
 projete suas páginas com base na aparência que elas 
terão no seu navegador.
 sejam responsivos, ou seja, se adaptem aos diferentes 
dispositivos e tamanhos de tela.
As páginas HTML podem ser escritas em um simples 
Para que o navegador reconheça sua página como uma página 
os arquivos (páginas html, imagens etc.) dentro do mesmo 
diretório, para que a página html carregue-os em seu conteúdo.
Quando você visualiza uma página Web em seu navegador, 
sons. Por trás disso, as tags HTML fazem todo o trabalho e 
mostram esses itens em seu navegador.
Trata-se de uma linguagem altamente visual, baseada 
em códigos especiais denominados tags (lê-se: tegs), também 
conhecidas como elementos HTML.
Conceito
Tags é o nome dado aos comandos HTML. As tags também 
são chamadas de elementos HTML.
tag é:
As tags HTML são facilmente identificadas por serem 
tag.
A maioria das tags é utilizada aos pares, ou seja, são iniciadas 
e o altera.
Aninhar é seguir uma sequência na hora de abrir e fechar 
as tags. Ou seja, a primeira tag a ser aberta sempre deverá ser 
a última a ser fechada. A segunda tag aberta é a penúltima a 
ser fechada e assim por diante, conforme podemos ver no 
Uma dica a ser seguida é o uso de indentação em seus 
códigos. Embora na maioria das linguagens a indentação 
código fonte muito mais fácil, facilitando também as futuras 
modificações, do código fonte. 
Após mais de uma década sem atualizações, no início de 
2008 a W3C anunciou a primeira especificação da HTML5. 
No entanto, até agora o HTML5 ainda se encontra em fase de 
testes, não sendo uma recomendação oficial. Esse processo é 
longo. A discussão em torno da HTML 5 ainda não tem data 
prevista para a versão final, mas já é amplamente utilizada pela 
maioria dos navegadores em suas versões atuais.
2
Indentação é o recuo de um texto em relação a sua margem. Em 
de um programa para ressaltar a hierarquia entre os elementos 
W3C – World Wide Web Consortion 
a interpretação dos conteúdos web. 
HTML, ou seja, inicia o documento HTML. A tag com a barra 
“ / “ indica que ali é o término/fim do documento HTML.
Algumas das coisas que as tags HTML podem fazer: 
 criam formulários e links para outras páginas, entre 
outras.
Como vimos anteriormente, toda tag aberta deve 
ser fechada. Algumas poderão até “funcionar” caso não 
sejam fechadas. Poderão até mostrar o resultado desejado 
dependendo do navegador utilizado, porém, estará fora dos 
padrões web. Caso seja submetido a um serviço de validação, 
o documento não terá a correta interpretação e não será 
validado. 
Porém, no decorrer da aula, veremos que, há algumas 
não possuem finalização. Iremos 
conhecer e comentar sobre elas conforme forem sendo 
apresentadas.
É preciso também ter muita atenção com o aninhamento 
das tags. É preciso aninhá-las corretamente. 
169
Desenvolvimento Voltado à Web I 22
Figura 3.3: Logo HTML5
funcionalidades são fornecidas por todos os navegadores. 
Vamos então, começar a conhecer a estrutura de uma página web, e 
conhecer as tags HTML e construir nossas primeiras páginas HTML?
Antes de começar, reforço aqui o que já havia mencionado no início 
sendo apresentados, é aconselhável que realize os testes em seu editor 
e, em seguida, visualize o resultado em seu navegador. Dessa forma, 
poderá acompanhar passo a passo o funcionamento e aos poucos ir se 
familiarizando com a linguagem.
já possui um editor Web instalado, pode utilizá-lo. E para os que ainda 
não utilizam nenhum editor, sugiro o Dreamweaver da Micromedia. 
Apesar de ser um software pago, sua utilização é bem simples. Ou 
então, o NetBeans, PHP Editor, Notepad ++ que são free.Ou ainda, o 
Bloco de Notas do Windows. Conforme dito anteriormente, é muito fácil 
e simples usar o HTML, qualquer pessoa, pode aprender usando até 
mesmo o bloco de notas. 
Após ter escolhido seu editor, crie em seu computador um diretório 
onde serão armazenadas suas páginas. Abra o editor e vá digitando 
os trechos de códigos, em seguida, salve-o no diretório criado com um 
evolução do modelo concebido por Tim Berners-Lee nos 
anos 1990. 
As principais diferenças entre a HTML5 e HTML4 
consistem no fato de que HTML5 foi desenvolvida com o 
propósito de substituir tanto a HTML criada nos anos 90 
que foi uma tentativa frustrada de reformulação da HTML4 
como uma aplicação XML (eXtensible Markup Language).
HTML5 representa dois conceitos diferentes:
 É uma nova versão da linguagem HTML, com 
novos elementos, atributos, e comportamentos.
 É um conjunto maior de tecnologias que permite 
o desenvolvimento de aplicações e web sites mais 
diversos e poderosos.
HTML5 está classificado em diversos grupos, baseando-
 semântica: permite você descrever mais precisamente 
o seu conteúdo.
 conectividade: permite uma comunicação com o 
servidor de formas modernas e inovadoras.
 offline e armazenamento: permite que páginas web 
armazenem dados localmente do lado do cliente e 
opere de forma offline mais eficientemente.
 multimídia: viabiliza a utilização de áudio e vídeo de 
forma primorosa na web aberta.
 gráficos e efeitos 2d/3d: viabiliza um leque 
diversificado de opções de representação gráfica. 
 performance e integração: fornece grande 
otimização de velocidade e melhor utilização do 
hardware do computador.
 acesso ao dispositivo: viabiliza a utilização de 
diversos métodos e dispositivos de entrada e saída.
 estilização: permite aos desenvolvedores a escrita de 
temas mais sofisticados.
HTML5 traz em seu esboço consideráveis mudanças 
por meio de novas funcionalidades, como principalmente 
a semântica e acessibilidade. Possibilita o uso de novos 
recursos antes possíveis apenas com a aplicação de outras 
tecnologias. Sua essência tem sido melhorar a linguagem 
com o suporte para as mais recentes multimídias, enquanto 
mantém suas características de ser uma linguagem simples, 
legível por seres humanos comuns (ou seja, sem grandes 
conhecimentos técnicos) e consistentemente compreendida 
por computadores e outros dispositivos (navegadores, parsers 
etc.)
Fonte: <https://pt.wikipedia.org/wiki/HTML5>. Acesso em 30 set 2017.
A forma como se escrevem páginas na Internet passa 
por uma considerável transformação. O HTML5 oferece 
navegadores, como Edge, Opera, Google Chrome, Safari 
incluindo tags de vídeo e suporte à tecnologia Canvas. 
Essa evolução da linguagem padrão para web pode 
eliminar a necessidade de plug-ins para aplicações multimídia 
Adobe, dentre outros. A maioria dos navegadores atuais possui 
suporte e reconhecem as tags da HTML 5 e seus atributos.
As tecnologias viabilizadas pelo HTML5 como o Canvas, 
para desenhos 2D e o armazenamento de conteúdos no 
desktop, permitirão que usemos mais o browser do que nunca.
O HTML 5 propõe várias mudanças importantes aos 
seguintes:
 novos elementos para tipos comuns de dados (por 
 Novos valores para o atributo type de elementos 
input, para que aceitem componentes comuns de 
 alterações nos significados de alguns elementos e 
 remoção de muitos elementos e atributos que se 
tornaram obsoletos em versões anteriores da HTML.
antes usada em HTML e XHTML.
170
23
contendo a versão do (X)HTML, no caso acima, a versão 
utilizada é o XHTML 1.0. 
Uma definição assim é chamada de “Document 
Type Definition”, (Definição do Tipo de Documento), ou 
simplesmente DTD. Uma declarção DTD usualmente é 
chamada de “Doctype” (MAUJOR, 2017).
O doctype para o HTML5 foi simplificado, não havendo 
mais necessidade do uso do link. Para indicar que seu conteúdo 
HTML usa HTML5, simplesmente use:
Figura 3.5: Doctype – HTML5
Esse simples doctype forcará até os navegadores que não 
oferecem suporte ao HTML5 a entrar no modo dos padrões, 
isso significa que eles interpretarão as partes já estabelecidas 
pelo HTML em um modo “compatível” com HTML5, 
ignorando as novas funcionalidades que ele não suporta.
Fonte: o autor
Fonte: o autor
2.1 
Dessa sessão em diante, vamos conhecer a estrutura básica 
de um documento HTML e vamos começar a desenvolver as 
primeiras páginas .html. 
A estrutura básica de um documento HTML sofreu 
poucas alterações no decorrer da sua evolução até a versão 
5. Como podemos ver a seguir, ela se mantém praticamente 
Primeiro passo: O doctype da HTML5
2.1.1 
instrução que indica para o navegador o tipo do documento, ou 
seja, para que o navegador saiba qual versão da HTML está 
sendo utilizado, é fundamental para que o navegador processe 
corretamente o documento. Por isso, é de suma importância 
sempre adicionar essa declaração em todos os documentos 
HTML.
documentos HTML e XHTML. Nas versões anteriores ao 
Figura 3.4: Doctype – versões anteriores ao HTML5
suas páginas.
Após escrever e salvar seu documento HTML, vá ao diretório onde a 
página foi salva e abra-a (duplo clique), ou então, localize a opção 
documento criado.
nem mesmo uma linha em branco.
Segundo Passo: após a declaração do Doctype, iniciamos 
o código HTML. Na árvore de elementos do código, a 
elementos filhos. 
Figura 3.6: HTML5 – Estrutura básica
O resultado da Figura 3.6 visualizado no browser é o 
mesmo que o mostrado na Figura 3.7. 
Figura 3.7: Estrutura.html
2.1.2
Entendendo o código da Figura 3.6: 
Doctype, representa a identificação, início de uma página 
HTML, ou seja, é ela que diferencia um documento HTML 
principal do documento. O atributo lang especifica a língua 
primária da página. Útil para ajudar o buscador a classificar 
seu site no idioma apropriado. Alguns valores possíveis:
 pt – Português
 pt-br - Português do Brasil
 en – Inglês
 en-us Inglês dos EUA
 en-gb Inglês Britânico
 fr - Francês
 de – Alemão
 es – Espanhol
 it – Italiano
 ru – Russo
 zh – Chinês
 ja – Japonês
Lembre-se que o atributo lang não é restrito ao elemento 
HTML, ele pode ser utilizado em qualquer outro elemento 
Fonte: o autor
Fonte: o autor
171
Desenvolvimento Voltado à Web I 24
2.1.3
Metatags 
Conceito
Metatags ou Metadados são um conjunto de informações 
que descrevem o conteúdo a respeito da página e do 
conteúdo nela publicado. Essas informações são usadas pelos 
os sistemas de busca. As metatags são invisíveis para os 
usuários finais que visualizam o documento na web. Todos os 
É nelas que você vai inserir as palavras-chave que 
facilitarão a vida do usuário na hora de encontrar seu site, por 
site, declarando sua autoria sobre o código fonte.
Figura 3.8: Metatags
Fonte: o autor
pesquise por conjuntos de caracteres IANA.
Para saber mais sobre as meta tags, conhecer todos os atributos e 
<title>
título de sua página. Ela sempre deve ser inserida entre as tags 
da página que é mostrado na barra de título do navegador.
<link> e <script>
serão usados em nossa página. O atributo rel indica o tipo de 
Onde:
 http-equiv – recebe o valor “refresh”, ou seja, 
atualizar.
 content – recebe o número em segundo para o 
de 5 segundos) 
 URL - recebe o nome da página para onde o 
navegador será redirecionado após o tempo definido 
em content.
Observe que quando se deseja apenas recarregar/refresh a 
página atual não há a necessidade do atributo URL (Figura 3.8). 
Quando o interpretador não encontra a URL, ele já subentende 
que se trata da página atual.
Figura 3.11: Metatag – Atualizar página
Name - Determina o identificador que você adicionará à 
sua página. Os principais valores aceitos são:
 author – 
 keywords – palavras-chave, utilizados por ferramentas 
de busca como Google, Cadê e outros, para que seu 
Informações como Title e Description
usadas pelos mecanismos de busca para montar uma SERP 
(Search Engine Results Page).
Conforme citado no início da seção 2, algumas tags não 
possui finalização. A tag
A tag
Charset -O atributo Charset (Linha 4 da Figura 3.8) 
especifica a codificação de caracteres para o documento 
HTML. O atributo charset é novo no HTML5 e substitui a 
forma: 
Figura 3.9: Http-equiv
Embora especificar o conjunto de caracteres usando o 
atributo http-equiv ainda é permitido pelos padrões W3C, 
seu uso não é recomendado, e a nova forma requer menos 
código, sendo mais simples de ser aplicada. Os valores mais 
comumente utilizados são:
 UTF-8 - Codificação de caracteres para Unicode
 ISO-8859-1 - Codificação de caracteres para o 
alfabeto latino
Fonte: o autor
site seja incluído na lista de resultados.
 Description – O valor deve ser uma sequência de 
caracteres livre que descreva a página. O valor deve 
ser apropriado para uso em um diretório de páginas, 
Content - Determina o conteúdo do identificador. Se 
o item possuir mais de um identificador, estes devem ser 
separados por vírgula.
As meta tags não servem só para divulgar seu conteúdo. 
Basicamente, a função delas é fornecer informações adicionais 
sobre seu site. Mas há outras funcionalidades disponíveis na tag 
Recarregar (Refresh) ou redirecionar a outra página
Esta metatag é muito útil quando queremos 
REDIRECIONAR para outra página ou RECARREGAR a 
mesma de forma automática, como a home page de um portal 
Figura 3.10: Metatag – Direcionar Página
Fonte: o autor
Fonte: o autor
172
25
segui-lo em todas as páginas de seu site. O recomendado é escrever 
Vejamos a seguir alguns dos novos elementos/tags e 
atributos propostos pelo HTML 5.
Iniciamos nossa seção relembrando e frisando um ponto 
importantíssimo: uma das maiores evoluções da HTML5 foi 
na sua semântica. “Escrever algo semanticamente correto, 
nada mais é do que utilizar-se desses símbolos (leia-se tags) 
considerando o significado real pelo qual foram criados.” 
(PEREIRA, 2017).
referentes aos tipos de conteúdo que são colocados em cada 
parte do layout, como cabeçalho, rodapé ou menu de navegação.
Todos os dias sites e mais sites são publicados na internet, 
porém, nas versões anteriores da HTML não haviam tags com 
uma semântica apropriada para cada uma dessas divisões. 
Dessa forma, os desenvolvedores acabavam usando a tag 
próprios padrões de nomenclaturas através dos atributos id 
ou class, sem nenhum padrão de nomenclatura que possamos 
No HTML5 foram criadas diversas tags semânticas 
padrão de forma a suprir essas necessidades, ajudando os 
desenvolvedores a marcar essas estruturas, indicando aos 
user-agents quais conteúdos estão sendo inseridos em cada 
o rel=”alternate” indicando uma forma alternativa de acessar 
o conteúdo do site via feed, ou o rel=”stylesheet” fazendo 
referência à folha de estilo CSS usadas para formatar a página.
será abordada na Aula 7. Aguarde para saber mais.
Quando trabalhamos com scripts em nossas páginas, 
estamos habituados a declarar o tipo de linguagem que estamos 
usando através do atributo type. No HTML5, o atributo 
type passa a ser opcional, pois se entende que o Javascript 
é a linguagem padrão de scripts
script
2.1.4
imagens e links, enfim, todo o conteúdo que irá compor o 
documento e que será visualizado no browser. Veja na Figura 
3.7.
Você acabou de conhecer a estrutura básica, comum 
a todas as páginas web. Reforçando que as tags sempre são 
única tag, por mais que seja a abertura e o fechamento da tag.
3 - Novos Elementos e atributos da 
uma das divisões da página, organizando e padronizando 
o desenvolvimento. A ideia é substituir esse amontoado de 
DIVS por elementos que se encarreguem dessas funções. 
A figura 3.11 mostra como era realizada a divisão 
de conteúdo nas versões anteriores (à esquerda), e como 
é realizado o equivalente com o uso de tags semânticas da 
HTML5 (à direita).
Figura 3.13 – Divisão de conteúdo Versões anteriores X 
HTML5
Vamos entender um pouco cada um destes elementos 
estruturais:
 Header 
 Nav 
 Section - define uma seção do layout em um 
determinado elemento. Ele pode conter um header 
 Article - define uma parte da página que tem uma 
pode ser um post de fórum, blog, comentários etc. 
 Aside - consiste em envolver informações que tem 
algo a ver com o conteúdo principal do site. Pode 
ser um menu lateral, um sidebar padrão com menu, 
 Footer - define o rodapé do elemento ou do layout 
principal da página.
Entenda que agora qualquer elemento pode ter seu 
conteúdo separado por seções com o elemento section. Note 
também que os elementos podem ter também um header e 
um footer independentes do resto do layout conforme pode 
ser visto na Figura 3.13.
Fonte: o autor
Fonte: <https://medium.com/@eduagni/html5-entendendo-a-estrutura-e-a-
sem%C3%A2ntica-db5f17808c7>. Acesso em: 02 out. 2017
173
Desenvolvimento Voltado à Web I 26
Figura 3.14: Uso do elemento header
Canvas
finalidade é a criação de desenhos/gráficos em uma página 
é o elemento canvas, o resto t é feito via Javascript. A Canvas 
API permite desenhar na tela do navegador via Javascript. 
Veja como inserir o elemento canvas em uma página:
Figura 3.15: canvas.html
Resultado:
A figura 3.16 mostra o resultado do script da Figura 3.15 
um simples retângulo vazio. Para desenhar nele, primeiro 
Javascript. 
Fonte: EIS (2017)
Fonte: o autor
Fonte: o autor
através do método fillRect (Linha 15), onde são passados como 
parâmetro as dimensões desejadas para o retângulo. 
Há muito mais para ser estudado se quiser se aprofundar 
na Canvas API. Porém, como requer conhecimentos em 
JavaScript, não iremos nos estender mais por aqui. O objetivo 
sombras, gradientes, incluir imagens no canvas, manipular os 
4 - Elementos e Atributos Globais
E então, como está se saindo na construção de suas primeiras páginas 
e aplicação das tags e seus recursos? Simples, não é mesmo? Demanda 
apenas um pouco de prática para a melhor familiarização com a 
linguagem. Sendo assim, vamos prosseguir com o estudo das tags 
HTML? Vamos conhecer agora algumas tags e atributos de uso global.
Evite o uso de tags dentro dos comentários, pois isso 
poderá confundir o navegador e em alguns casos resultar em 
Vamos agora iniciar o processo de conhecimento das tags 
de formatação.
 
4.2 - Cabeçalhos
O cabeçalho é uma tag que define o tamanho de cada 
Elementos ou tags de uso global são aqueles que podem 
ser usados com todos os elementos da HTML5, ou seja, 
não somente com os elementos novos, mas também com os 
elementos da HTML 4 que agora fazem parte da HTML5.
A maioria dos elementos e atributos HTML4 continuam 
sendo válidos no HTML5 e, os conhecidos elementos h1, a, p, 
div, span, blockquote, class, title, acceskey, name, value e tantos outros 
estão ainda sendo utilizados em HTML5 com as mesmas 
finalidades. Na maior parte dos casos, estes elementos estão 
inseridos 
4.1 - Comentários
Uma boa prática de desenvolvimento é a inserção de 
comentários, pois, os comentários servem para realizar uma 
uma breve descrição sobre a função de um determinado bloco. 
Os comentários são ignorados pelos navegadores e não são 
mostrados na tela para o usuário. Todo comentário HTML 
pois o desenvolvedor pode relembrar itens importantes sobre 
o código-fonte, e serve para um melhor entendimento do 
código-fonte por outros integrantes da equipe de projeto do 
web site.
174
27
A tag de quebra de linha é muito utilizada pelos desenvolvedores, 
porém, foi apresentada aqui com o intuito de alertar quanto às boas 
práticas de desenvolvimento, ela é considerada uma tag “ruim”, ou seja, 
ela deve ser evitada. Não simule parágrafos, forçando pular linhas com 
4.3 - Parágrafos e quebra de linha
Uma das diferenças na confecção de páginas HTML e 
HTML apenas pressionando a tecla Enter. É necessário forçar 
o fim do parágrafo ou a quebra de linha utilizando comandos 
especiais.
corpo de uma página HTML. Pode-se dizer de forma informal 
possui finalização. 
Figura 3.19: Paragrafos.html
subtítulos. 
Figura 3.17: cabeçalhos.html
Resultado:
Figura 3.18: Tags para definição de cabeçalhos
Resultado:
Figura 3.20: Tags para definiçãode parágrafos e quebra 
de linha
4.4 – Listas
As listas permitem que você faça algumas listagens na 
página, e insira marcações. As listas podem ser classificadas 
em: não numeradas e numeradas.
Vamos conhecê-las?
De acordo com a especificação W3C, a partir da HTML5, 
a recomendação é que os grupos de cabeçalhos, como títulos 
e subtítulos sejam agrupados em grupos através do elemento 
Figura 3.18: hgroup.html
Fonte: o autor
Fonte: o autor
Fonte: o autor
Fonte: o autor
Fonte: o autor
175
Desenvolvimento Voltado à Web I 28
Listas não numeradas - As listas não numeradas são 
geradas através da tag
é definido através da tag
representadas por marcadores (por defaul, é representado por 
Figura 3.21: Lista não numerada.html
Fonte: o autor
Resultado:
Figura 3.22: Tag para inserção de listas não numeradas
Resultado:
Figura 3.24: Tag para inserção de listas numeradas
Resultado:
Figura 3.26: Lista numerada inversa
E então, todos já estão se familiarizando com o HTML?
 Mesmo que já estejam, é importante averiguar 
questões semânticas e o bom uso delas, principalmente em 
relação ao uso de tags, que podem ser evitadas e substituídas 
por outros recursos.
Loudon (2010) aborda o conceito de tags ruins. O 
que seria isso? Justamente as tags que devem ser evitadas, 
geralmente por serem obsoletas. Utilize sempre as tags boas 
que são aceitas e validadas pelos padrões web. 
Finalizamos aqui o conteúdo da nossa aula 3. Espera-
em torno da HTML. Após a leitura do tópico “Retomando 
a conversa inicial”, você poderá desenvolver as atividades 
postadas na plataforma de ensino e em seguida enviá-las 
através do portfólio. Tendo dúvidas, não hesite, poste-as no 
quadro de avisos ou no fórum. 
1 – Introdução ao HTML
Na Seção 1, conhecemos o conceito de HTML, sua 
origem, objetivos e seus fundamentos básicos, conheceu o 
2 – HTML5
Aqui, aprendemos a construir documentos .html. 
Conhecemos o Doctype e as demais tags que formam a 
estrutura básica de um documento HTML. 
3 – Novos Elementos e Atributos HTML5
Na seção 3, conhecemos os principais elementos e 
atributos semânticos da HTML5, tais como: header, section, 
article, nav e footer. 
4 – Elementos e Atributos Globais
Na última seção da aula 03, vimos alguns elementos da 
HTML que são definidos como globais, pois são elementos 
criados em versões anteriores ao HTML5 e que continuam 
sendo utilizadas em HTML5.
A partir destes elementos se tornou possível a criação 
de páginas com títulos, parágrafos, links de acesso a outros 
HTML5 adicionou o atributo reversed ao elemento ol. 
Esse atributo destina-se a criar uma lista de ordem inversa. 
Figura 3.25: Lista_inversa.html
Listas numeradas - As listas numeradas são 
As listas numeradas são representadas por números.
Figura 3.23: Listas numeradas.html
Fonte: o autor
Fonte: o autor
Fonte: o autor
Fonte: o autor
Fonte: o autor
Retomando a aula
Antes de encerrar a Aula 3, vamos rever um breve 
176
29
documentos, imagens, listas numeradas e não numeradas e 
aprendeu também a incluir comentários nas páginas web.
LOUDON, Kyle. Desenvolvimento de Grandes Aplicações 
Web. São Paulo: Novatec, 2010.
MARCONDES, Christian Alfim. HTML 4.0 
Fundamental: a base da programação web. 2. ed. São Paulo: 
Érica, 2007.
SILVA, Maurício Samy. HTML 5 a linguagem de marcação 
que revolucionou a web. São Paulo: Novatec, 2011.
AGNI, Edu. HTML5: entendendo a estrutura 
e a semântica. Disponível em: <https://medium.
com/@eduagni/html5-entendendo-a-estrutura-e-a-
. Acesso em: 01 out. 2017.
EIS, Diego. A Web Semântica. Disponível em:<https://
. Acesso em: 28 set. 
2017.
MAUJOR. Não esqueça do doctype em seu documento. 
Disponível em: <http://maujor.com/w3ctuto/qatips/
. Acesso em: 30 set. 2017.
PEREIRA, HENRIQUE C. Introdução a Semântica 
Web. Disponível em: <http://revolucao.etc.br/archives/
 . Acesso em 01 out. 2017.
THEFAMOUSPEOPLE. Tim Berners-Lee Biografy. 
Disponível em: <https://www.thefamouspeople.com/
. Acesso em: 29 set. 
2017.
WIKIPEDIA. Identação. Disponível em: <https://
Acesso em: 29 set. 2017.
Vale a pena
Vale a pena ler
Vale a pena acessar
GUANABARA, Gustavo. História da HTML. 
Disponível em: <https://www.youtube.com/
. Acesso em: 01 out. 2017.
_____. Tags Básicas em HTML5. Disponível em: 
. 
Acesso em: 01 out. 2017.
. 
Acesso em 01 out. 2017.
Vale a pena assistir
_____. Curso de HTML5 - Parágrafos, Quebras e 
Símbolos Especiais. Disponível em: <https://www.youtube.
. Acesso em: 01 out. 2017.
_____. Curso de HTML5 - Listas em HTML5 com 
OL e UL. Disponível em: https://www.youtube.com/
watch?v=EbVG8_5Pyz0. Acesso em: 30 set. 2017.
Minhas anotações
177