[UFMS Digital] Fundamentos de Web - Videoaula do Módulo 1 - Unidade 2

Prévia do material em texto

Fundamentos de Web
Prof. Dr. Leonardo Souza Silva
Módulo 1 — Introdução à 
Linguagem de Marcação
Unidade 2 — A Linguagem HTML
Resumindo
● Conhecemos a evolução até chegarmos a Web.
● Compreendemos as linguagens de marcação e tivemos nosso 
primeiro contato com a linguagem HTML.
○ Entendemos a origem da linguagem HTML.
HTML
● Linguagem de Marcação de Hipertexto.
○ HyperText Markup Language.
○ Tim Berners-Lee, 1991.
● Hipertexto
Documento ou sistema formado por blocos distintos de 
informação interligados por elos de ligação.
HTML - Estrutura Básica
Fonte: Própria
HTML
● Principal linguagem utilizada na Web.
○ Permite a criação de documentos estruturados em títulos, 
parágrafos, listas, links, tabelas, formulários, dentre outros 
elementos.
○ Um elemento HTML é definido por uma marcação (tag) de 
abertura, algum conteúdo e uma tag de fechamento, por 
exemplo:
 Conteúdo 
HTML - Marcações (tags)
● Palavras-chave entre parênteses angulares(), representam 
comandos de formatação. 
○ Atributos → modificam os resultados padrões dos elementos.
Fonte: W3Schools, 2025 (com adaptações)
MARCAÇÃO
ATRIBUTOS
VALORES
HTML 5 - Estrutura Básica
Fonte: Própria
HTML 5 - Estrutura Básica
Fonte: Própria
Informa ao navegador o tipo do documento 
e a versão (no caso, HTML5)
HTML 5 - Estrutura Básica
Fonte: Própria
Raiz do modelo de objetos do documento 
(DOM) o atributo lang indica o idioma.
HTML 5 - Estrutura Básica
Fonte: Própria
Especifica a codificação de caracteres que 
será usada no documento.
HTML 5 - Estrutura Básica
Fonte: Própria
utf-8 é o padrão da Web, abrange caracteres 
de todos os idiomas (incluindo pt-br e en).
Alguns elementos 
HTML
HTML 5 - Arquivo base (aula M1U2.html)
Fonte: Própria
HTML 5 - Arquivo base (aulaM1U2.html)
Fonte: Própria
Os exemplos apresentados serão inseridos 
neste entre as marcações e .
HTML - Títulos e Parágrafo
Fonte: Própria
HTML - Tabela
Fonte: Própria
HTML - Imagem
Fonte: Própria
HTML - Imagem (alterando o tamanho)
Fonte: W3 Schools, com adaptações
HTML - Lista Não Ordenadas
Fonte: Própria
HTML - Listas Ordenadas
Fonte: Própria
HTML - Lista aninhada
Fonte: Própria
HTML - Links
Fonte: Própria
Abre em uma nova janela do 
navegador
HTML - Links
Fonte: W3 Schools, com adaptações
HTML - Formatação de Textos
Fonte: Própria
HTML - Formatação de Textos
Fonte: Própria
Para finalizar…
● É importante que você pratique a construção de páginas em 
HTML e explore as marcações.
○ Use o W3 Schools como fonte de consulta, para conhecer 
novas marcações e atributos.
○ Para traduzir a página para o português: 
■ Chrome: você deve clicar com botão direito do mouse em 
algum ponto da página e escolher a opção Traduzir;
■ Firefox: Clicar no botão localizado no canto superior 
direito da página e escolher a opção Traduzir página.
○
https://www.w3schools.com/html/
Nesta aula
● Conhecemos a Linguagem HTML e entendemos o seu 
funcionamento.
● Tivemos contato com algumas marcações que os permitem 
criar páginas em HTML.
○ Percebemos que ao estruturar o documento devemos 
combinar as marcações.
Referências
FLATSCHART, Fábio. Html 5: embarque imediato. 1. ed. Rio de Janeiro: Brasport, 2011. Recurso on-line. ISBN 
9788574525778. Capítulo 1, Capítulo 2 e Capítulo 3. Disponível na Biblioteca Digital da UFMS. 
MAZZA, Lucas. HTML5 e CSS3: domine a web do futuro. São Paulo, SP: Casa do Código, 2014. Recurso 
on-line. ISBN 9788566250909. Capítulo 1 e Capítulo 2. Disponível na Biblioteca Digital da UFMS. 
W3 Schools. HTML Tutorial. Disponível em: https://www.w3schools.com/html/, Acesso em maio de 2025.
https://pergamum.ufms.br/
https://pergamum.ufms.br/
https://www.w3schools.com/html/
Licenciamento
Respeitadas as formas de citação formal de autores de acordo com as normas 
da ABNT NBR 6023 (2018), a não ser que esteja indicado de outra forma, todo 
material desta apresentação está licenciado sob uma Licença Creative Commons 
- Atribuição 4.0 Internacional. 
https://creativecommons.org/licenses/by/4.0/
https://creativecommons.org/licenses/by/4.0/