Aula 02

História do HTML
● A primeira versão do HTML foi baseada na linguagem
SGML.
● O SGML era utilizado para a estruturação de
documentos, sendo dele que o HTML herdou
diversas tags tais como: título <h1> ao <h6>,
cabeçalho <head> e parágrafo <p>.
● Mas a principal diferença entre essas duas
linguagens de marcação é que o HTML implementava
a tag <a> com o atributo href, permitindo assim a
ligação (links)

História do HTML
● O HTML surgiu em 1990 e até o seu quinto ano
de vida sofreu várias revisões e alterações na
sua especificação. Nesta época, quem
controlava o padrão era o CERN e a IETF.
● Após 1995, o padrão passou a ser
regularizado pela W3C, entidade que regula os
padrões Web e que será detalhada com maior
profundidade posteriormente.

História do HTML
● W3C (World Wide Web Consortium) é um
consórcio de empresas de tecnologia. Fundado
por Tim Berners-Lee em 1994 para levar a Web
ao seu potencial máximo.

HTML
● O Web Standards Project (WaSP) é um grupo
formado em 1998 com o objetivo de promover os
Padrões Web, assegurando desse modo um acesso
simples e com menos custos para todos.
● Vem encorajando e persuadindo os fabricantes de
Browsers a fornecerem suporte aos padrões, como o
XHTML, CSS, ECMAScript (a versão standard do
JavaScript) e o DOM.

História do HTML
● Em 1993, Dave Raggett propôs uma evolução do padrão
HTML, denominada HTML+. Entretanto tal proposta nunca
foi implementada.
● O verdadeiro sucessor do HTML foi o HTML 2.0, o qual foi
apresentado na primeira conferência mundial sobre Web,
a World Wide Web Conference.
● Essa versão do HTML pode ser vista apenas como uma
correção da versão anterior, ou seja, apenas formalizava
as características do HTML que já estavam em uso.

Evolução do HTML
● Versões do HTML:
● HTML 2.0 (Novembro de 1995)
● HTML 3.2 (Janeiro de 1997)
● HTML 4.0 (Dezembro de 1997)
● HTML 4.01 (Dezembro de 1999)
● ISO/IEC 15445:2000 "ISO HTML" (Maio de 2000)
● HTML 5 (Janeiro de 2008)

HTML 5
● O HTML5 será o novo padrão para HTML,
XHTML, e HTML DOM. Atualmente, está em
fase de esboço, porém diversos navegadores
já implementam algumas de suas
funcionalidades.

HTML 5
● Web dividida em três camadas:
– Conteúdo (XHTML)
– Apresentação (CSS)
– Comportamento (Javascript)
Devem ser desenvolvidas de forma independente,
porém uma complementa a outra.

HTML
● Semântica:
– Semântica refere-se ao estudo do significado.
– Quando utilizamos cada marcação para o que ela
realmente foi criada, estamos construindo um
“Código Semântico”.
– Parar de pensar em “isso vem aqui, isso vai
ali...” e pensar na “Estrutura da Informação”
– Criar uma “Marcação com Significado”.

HTML
● Marca ou Tag HTML:
– Marca ou Tag do Html é tudo aquilo que você
escreve entre < > (maior que e menor que)
● EX:
– <html></html>
– A maioria das Tag HTML possui uma abertura e um
fechamento.
– Algumas Tags não tem fechamento

HTML
● OBS:
– Importante lembrar que o HTML esta na versão 5,
então para informar o navegador que estamos
trabalhando com HTML5 colocamos a teg no inicio
do codigo <!DOCTYPE HTML>

HTML
● OBS:
– Para informar para o navegador que iremos
trabalhar com a linguagem português Brasil, dentro
da Tag HTML colocamos a linguagem para ajudar
os mecanismos de buca.
– EX:
<html lang= ”pt-br ”>
</html>

HTML
● A Tag Head:
– A Tag Head serve para indicar a área de cabeçalho
do site
● Ex:
<head>
</head>

HTML
● A Tag Body que serve para indicar o corpo do
seu site.
– Ex:
<body>
</body>

HTML
● Essa é estrutura básica de um site em HTML

HTML
● A Tag meta serve para traduzir para linguagem
portuguesa juntamente com as acentuações
nescessárias.
– EX:
<meta charset=”utf-8”>
Quando não tem a
tag meta

HTML
Quando se coloca a
Tag meta

HTML
● A seção <BODY>
– Tudo que estiver contido em <BODY> será
mostrado na janela principal do browser, sendo
apresentado ao leitor. <BODY> pode conter
cabeçalhos, parágrafos, listas, tabelas, links para
outros documentos, imagens, formulários,
animações, vídeos, sons e scripts embutidos.

HTML
● Atributos de <BODY>
– Através de atributos de <BODY> , podemos definir
cores para os textos, links e para o fundo das
páginas, bem como uma imagem de fundo (marca
d’água):
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb"
ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL">

HTML
● BGCOLOR
– cor de fundo (quando não é indicada, o
browser irá mostrar uma cor padrão,
geralmente o cinza ou branco; alguns
editores poderão estabelecer o branco para
o fundo da página)
● TEXT
– cor dos textos da página (padrão: preto)

HTML
● LINK
– cor dos links (padrão: azul)
● ALINK
– cor dos links, quando acionados (padrão:
vermelho)
● VLINK
– cor dos links, depois de visitados (padrão:
azul escuro ou roxo)

HTML
● Seus valores são dados em hexadecimal,
equivalentes a cores no padrão RGB ( Red,
Green, Blue ).
● Existem tabelas de cores com esses valores,
mas grande parte dos editores já oferece uma
interface bem amigável através da qual
escolhemos as cores desejadas, sem nos
preocuparmos com números esdrúxulos tais
como #FF80A0 .

HTML
● Browsers que seguem a definição de HTML 3.2
em diante, também aceitam 16 nomes de
cores, tirados da paleta VGA do Windows - por
exemplo, podemos escrever
BGCOLOR="BLUE" .
● Porém, browsers mais antigos não
apresentarão as cores indicadas.

HTML
● BACKGROUND
– indica o URL da imagem a ser replicada no fundo da
página, como uma marca d’água.
– Veja o exemplo de uma página cuja imagem de fundo
é.
– Para efeitos de design, é possível fixar a imagem de
fundo, para que ela não se mova junto com o texto ao
se rolar a página.
– Esse efeito não é padrão e funciona no Internet
Explorer.

HTML
● Títulos:
– Há seis níveis de Títulos em HTML, de <H1> a
<H6> :

HTML
● Parágrafos
– Quando exibimos qualquer texto em nossa página,
é recomendado que ele seja sempre conteúdo de
alguma tag filha da tag <body> .
– A marcação mais indicada para textos comuns é a
tag de parágrafo:
<p>Exemplo de parágrafo</p>
<p>Outro Parágrafo</p>

HTML
● Marcações de ênfase
– Quando queremos dar uma ênfase diferente a um
trecho de texto, podemos utilizar as marcações de
ênfase.
– Podemos deixar um texto “mais forte” com a tag
<strong> ou deixar o texto com uma “ênfase
acentuada” com a tag <em> . Também há a tag
<small> , que diminui o tamanho do texto.
<p>Estude para passar no<strong>ENEM</strong></p>

HTML
● Imagens:
– A tag <img> define uma imagem em uma página HTML e
necessita de dois atributos preenchidos: src e alt .
– O primeiro aponta para o local da imagem e o segundo, um
texto alternativo para a imagem caso essa não possa ser
carregada ou visualizada.
– O HTML 5 introduziu duas novas tags específicas para
imagem: <figure> e <figcaption> .
– A tag <figure> define uma imagem com a conhecida tag
<img> . Além disso, permite adicionar uma legenda para a
imagem por meio da tag <figcaption> .

HTML
<figure>
<img src=”img/produto.jpg” alt=”Foto do produto”>
<figcaption>essa figura é um exemplo</figcaption>
</figure>

HTML
● Tag LINK:
– Há dois tipos de links no HTML: a tag A, que são
links que levam o usuário para outros documentos
e a tag LINK, que são links para fontes externas
que serão usadas no documento.

HTML
● No nosso exemplo há uma tag LINK que
importa o CSS para nossa página:
<link rel=”stylesheet” type=”text/css”
href=”estilo.css”>
● O atributo rel=”stylesheet” indica que aquele
link é relativo a importação de um arquivo
referente a folhas de estilo.
●

HTML
● Há outros valores para o atributo REL, como
por exemplo o ALTERNATE:
<link rel=”alternate” type= ”application/atom+xml”
title=”feed” href= ”/feed/”>
● Neste caso, indicamos aos user-agents que o
conteúdo do site poder ser encontrado em um
caminho alternativo via Atom FEED.

HTML
● No HTML5 há outros links relativos que você
pode inserir como o rel=”archives” que indica
uma referência a uma coleção de material
histórico da página.
● Por exemplo, a página de histórico de um blog
pode ser referenciada nesta tag.

Aula 02

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Aula 02

Semelhante a Aula 02 (20)

Mais de Jorge Ávila Miranda

Mais de Jorge Ávila Miranda (20)

Aula 02