PROGRAMAÇÃO EM

APLICAÇÕES WEB
Introdução à Linguagem HTML 2
Eng.º Yuri Anderson Manuel Pedro
yuri23pedro@gmail.com
1. Prover aos alunos conhecimentos
fundamentais que lhes permitam
utilizar as linguagens HTML em
seus projectos informáticos;
OBJETIVO
2. Identificar a estrutura de um
documento HTML a partir da DA AULA
sintaxe da linguagem;
3. Identificar os comandos básicos
para formatação de textos.
HTML
É uma linguagem para descrever páginas web. HTML vem
do ingles Hyper Text Markup Language que significa
Linguagem de Marcação de Hipertexto.
Linguagem: é um método/maneira padronizada para
comunicar instruções para um computador.
Marcação: representa a anotação de algum elemento
dentro do documento.
Em HTML, a marcação é feita com tags para indicar a
estrutura do documento.
HTML
O HTML é uma linguagem, como o próprio
nome diz, de marcação de texto; ela é simples,
composta por marcações de formatação e
diagramação de informações como textos,
imagens, sons e também possibilita a inclusão
de hipertexto.
HTML
Ele é o responsável por mostrar ao navegador
como um conteúdo deve estar estruturado. No
caso, é uma linguagem que pega o conteúdo
“cru” e organiza na tela. Sem o HTML, a web
seria uma espécie de TXT básico, sem a
presença de nenhum link sequer.
HTML
Tags: são marcas especiais definidas por uma etiqueta que
descreve o papel de cadaelemento dentro do texto. As tags
em HTML permitem ao browser interpretar e exibir a página
conforme ela foi concebida.
Hipertexto: é um modelo de documento que contem blocos
de textos, palavras, imagens entre outros e que têm
referências específicas denominadas hiperlinks (ou
simplesmente links) que ligam o documento com outros
documentos de hipertexto.
HTML - HISTÓRIA
Utilizada para criar e exibir conteúdo na web. A sua
evolução começou em 1989, quando Tim Berners-Lee, um
cientista da computação britânico que trabalhava no CERN
(Organização Europeia para a Pesquisa Nuclear),
desenvolveu a ideia da World Wide Web.
HTML - HISTÓRIA
A primeira versão do HTML, conhecida como HTML 1.0, foi
lançada em 1991. Essa versão incluía tags básicas para
formatar o texto, como tags para títulos, para parágrafos e
para links. Também incluía imagens, embora apenas em
preto e branco.
HTML - HISTÓRIA
Em 1995, a especificação do HTML foi actualizada para o
HTML 2.0, que incluía suporte a tabelas, formulários e
framesets (permitindo que diferentes páginas da web
fossem exibidas dentro de uma única janela). Nesse mesmo
ano, foi lançado o navegador Mosaic, que se tornou popular
entre os usuários da web.
HTML - HISTÓRIA
Em 1997, o HTML 3.0 foi lançado, trazendo suporte para
folhas de estilo (CSS) e elementos multimídia, como vídeo e
som. No mesmo ano, a Netscape lançou o navegador
Netscape Navigator, que se tornou o navegador mais popular
da época.
HTML - HISTÓRIA
Em 1999, foi lançado o HTML 4.0, que incluía novos recursos
como tabelas avançadas, frames e suporte para scripts do
lado do cliente (JavaScript). O HTML 4.0 também incluía a
especificação de documentos XHTML (Extensible Hypertext
Markup Language), que combinava o HTML com o XML.
HTML - HISTÓRIA

Em 2000, o W3C (World Wide Web Consortium) lançou o

HTML 4.01, que era uma atualização menor do HTML 4.0,
corrigindo alguns erros e inconsistências.
HTML - HISTÓRIA
Em 2004, o desenvolvimento do HTML foi retomado com a
criação do grupo de trabalho HTML da W3C. Esse grupo de
trabalho trabalhou no desenvolvimento do HTML5, que foi
lançado em 2014. O HTML5 incluiu muitos novos recursos,
como elementos semânticos, suporte para vídeo e áudio,
geolocalização e capacidade de armazenamento local.
HTML - HISTÓRIA

A Semântica HTML é o uso correto das tags HTML para

indicar o significado do conteúdo de uma página web. Isso
significa que cada tag deve ser usada de forma apropriada
para descrever o que o conteúdo representa.
HTML - HISTÓRIA

Desde então, o HTML5 se tornou a versão mais utilizada do

HTML e é suportado por todos os principais navegadores da
web. Além disso, o HTML5 continua a ser atualizado com
novos recursos e funcionalidades para acompanhar as
demandas em constante evolução da web.
HTML - SINTAXE
HTML usa tags para descrever um documento.
Todas as tags começam com um sinal de menor ‘‘<’’ e
acabam com um sinal de maior “>’’ como por exemplo
<html>.
Usualmente encontramos dois tipos de tags:
• tags de abertura: <comando>
• tags de fechamento: </comando>.
A diferença entre elas é que na tag de fechamento existe um
barra "/".
HTML - SINTAXE
O conteúdo que estiver contido entre uma tag de abertura e
uma tag de fechamento será processado segundo o
comando (nome-tag) contido na tag como mostra a figura a
seguir:

<COMANDO>CONTEÚDO</COMANDO>
Exemplo: As tags <p> e </p> informam ao navegador que
todo o texto colocado entre elas, é um parágrafo.

<p>Este conteúdo é um parágrafo.</p>

HTML - ATRIBUTOS
As tags podem ter atributos. Os atributos podem prover
informação adicional sobre os elementos HTML na sua
página.
Os atributos vem em pares nome/valor como este:
nome="valor“ e são sempre adicionados à tag de abertura
de um elemento HTML.

<p class=‘‘normal’’>Este conteúdo é um parágrafo</p>

HTML5 – ESTRUTURA BÁSICA
<!DOCTYPE html>
<html>
<head>
<title> Meu título </title>
</head>
<body>
Olá, mundo
</body>
</html>
HTML5 – ESTRUTURA BÁSICA
<html> Esta tag é usada para definir o início do documento
HTML.
<head> Esta tag é usada para incluir informações sobre a
página, como o título da página, meta tags e scripts.
<title> Esta tag é usada para definir o título da página, que
aparece na barra de título do navegador.
<body> Esta tag é usada para definir o conteúdo da página,
como textos, imagens, vídeos, links e outros elementos.
 HTML – COMANDOS BÁSICOS
Tag Função Principal Atributo Tag Função
<h1>…<h6> Títulos <b> Negrito
<p> Parágrafo <i> Itálico
<a> Links href, target, <em> Enfatizado
<img> Imagem src <strong> Texto importante
<br> Quebra de linha <sub> Subescrito
<ul>, <ol>, <dl> Listas <sup> Superescrito
<hr> Linha horizontal <ins> Inserido
<del> Riscado
HTML – ALGUNS ATRIBUTOS
Atributo Função
width Largura
heigth Altura
bgcolor Cor de fundo
background Imagem de fundo
color Cor
align Alinhamento
CONCLUSÃO