DESENVOLVIMENTO EM AMBIENTES WEB

Siglas e Termos usados:

•DTD = Document Type Definition / Definição de Tipo de

Documento
•HTML = HyperText Markup Language / Linguagem de
Marcação de Hipertexto
•SGML = Standard Generalized Markup Language /
Linguagem de Marcação Generalizada Padrão
•XHTML = eXtensible Hypertext Markup Language /
Linguagem Extensível de Marcação de Hipertexto
•XML = EXtensible Markup Language / Linguagem
eXtensível de Marcação
1

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Apresentação WEB

• De acordo com o W3C a Web é baseada em 3 pilares:

➢ Um esquema de nomes para localização de fontes de
informação na Web, esse esquema chama-se URI.
➢ Um Protocolo de acesso para acessar estas fontes, hoje
o HTTP.
➢ Uma linguagem de Hypertexto, para a fácil navegação
entre as fontes de informação: o HTML.

Vamos nos focar no terceiro pilar, o HTML.

2

Prof. Samuel Rodrigues

 DESENVOLVIMENTO EM AMBIENTES WEB
Apresentação
Hypertexto:

HTML é uma abreviação de Hypertext Markup Language -

Linguagem de Marcação de Hypertexto. Resumindo em uma frase: o
HTML é uma linguagem para publicação de conteúdo (texto,
imagem, vídeo, áudio e etc) na Web.
O HTML é baseado no conceito de Hipertexto. Hipertextos são
conjuntos de elementos – ou nós – ligados por conexões. Estes
elementos podem ser palavras, imagens, vídeos, áudio, documentos
etc. Estes elementos conectados formam uma grande rede de
informação.
Para distribuir informação de uma maneira global, é necessário
haver uma linguagem que seja entendida universalmente por 3
diversos meios de acesso. O HTML se propõe a ser esta linguagem.
Prof. Samuel Rodrigues
 DESENVOLVIMENTO EM AMBIENTES WEB
Apresentação
HTML:
Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou
popularidade quando o Mosaic, browser foi desenvolvido por Marc
Andreessen na década de 1990, ganhou força. A partir daí,
desenvolvedores e fabricantes de browsers utilizaram o HTML
como base, compartilhando as mesmas convenções.
“Em 1989, Tim Berners-Lee inventou a World Wide Web (veja o documento com a
proposta original).Ele cunhou o termo "World Wide Web", desenvolveu o primeiro
servidor Web, "httpd", e o programa primeiro cliente (um navegador e um editor)
"WorldWideWeb", em Outubro de 1990. Também escreveu a primeira versão do
"HyperText Markup Language (HTML), a linguagem de formatação de documentos
com a capacidade de links de hipertexto e que tornou-se o formato básico para
publicação na web. Suas especificações iniciais para URIs, HTTP e HTML foram
refinadas e discutidas em círculos mais amplos para propagar a tecnologia web.”
4
Fonte: http://www.w3c.br/Sobre/ConhecendoW3C acessado em 05/03/2018.
Prof. Samuel Rodrigues
 DESENVOLVIMENTO EM AMBIENTES WEB
Apresentação
W3C:

O Consórcio World Wide Web (W3C) é um consórcio

internacional no qual organizações filiadas, uma equipe em tempo
integral e o público trabalham juntos para desenvolver padrões
para a Web. Liderado pelo inventor da web Tim Berners-Lee e o
CEO Jeffrey Jaffe, o W3C tem como missão Conduzir a World
Wide Web para que atinja todo seu potencial, desenvolvendo
protocolos e diretrizes que garantam seu crescimento de longo
prazo.

Disponível em: http://www.w3c.br/Sobre/ 5

Prof. Samuel Rodrigues

 DESENVOLVIMENTO EM AMBIENTES WEB
Apresentação
W3C:

Entre 1993 e 1995, o HTML ganhou as versões HTML+,

HTML2.0 e HTML3.0, onde foram propostas diversas mudanças
para enriquecer as possibilidades da linguagem. Contudo, até aqui
o HTML ainda não era tratado como um padrão. Apenas em
1997, o grupo de trabalho do W3C responsável por manter o
padrão do código, trabalhou na versão 3.2 da linguagem, fazendo
com que ela fosse tratada como prática comum.
Após a versão 4.01 surge o XHTML – União de XML com
HTML, Sua 1ª versão XHTML 1.0 foi lançada apenas no ano
2000, a versão XHTML 1.1 saiu em 2001. 6

Prof. Samuel Rodrigues

 DESENVOLVIMENTO EM AMBIENTES WEB
Apresentação
WHAT Working Group:
O Web Hypertext Application Technology Working Group
(WHATWG) é uma comunidade de pessoas interessadas em
evoluir a web através de padrões e testes.
O WHATWG foi fundado por indivíduos da Apple, Mozilla
Foundation e Opera Software em 2004, após uma oficina do
W3C. A Apple, a Mozilla e a Opera estavam cada vez mais
preocupadas com a direção do W3C com o XHTML, a falta de
interesse em HTML e o desprezo aparente pelas necessidades dos
desenvolvedores web do mundo real. Então, em resposta, essas
organizações partiram com uma missão para resolver essas
preocupações e o WHATWG nasceu.
7
Disponível em: https://whatwg.org/faq
Prof. Samuel Rodrigues
 DESENVOLVIMENTO EM AMBIENTES WEB
Apresentação
HTML5:

Enquanto o W3C focava suas atenções para a criação da segunda

versão do XHTML, um grupo chamado Web Hypertext
Application Technology Working Group ou WHATWG
trabalhava em uma versão do HTML que trazia mais flexibilidade
para a produção de websites e sistemas baseados na web. Eles não
estavam felizes com o caminho que a Web tomava e nem com o
rumo dado ao XHTML. Por isso, estas organizações se juntaram
para escrever o que seria chamado hoje de HTML5

Prof. Samuel Rodrigues

 DESENVOLVIMENTO EM AMBIENTES WEB
Apresentação
HTML5:

Por volta de 2006, o trabalho do WHATWG passou ser conhecido

pelo mundo e principalmente pelo W3C - que até então
trabalhavam separadamente - que reconheceu todo o trabalho do
grupo. Em Outubro de 2006, Tim Berners-Lee anunciou que
trabalharia juntamente com o WHATWG na produção do HTML5
em detrimento do XHTML 2. Contudo o XHTML continuaria
sendo mantido paralelamente de acordo com as mudanças
causadas no HTML.

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Histórico e versões do HTML
O HTML 1.0 nunca existiu, foi definido como todo o
trabalho antes do HTML realmente se tornar um padrão,
criando então o HTML 2.0 que foi publicado pelo IETF
RFC 1866. Novos suplementos foram adicionados:
• Novembro de 1995: RFC 1867 (formulário base para
upload de arquivos)
• Maio 1996: RFC 1942 (tabelas)
• Agosto 1996: RFC 1980 (mapas de imagem do lado
cliente)
• Janeiro 1997: RFC 2070 (Internacionalização)
Em junho de 2000, todos esses se tornaram obsoletos/
registro no RFC 2854.
10

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Janeiro de 1997
• HTML 3.2 é publicado como uma recomendação do
W3C. Foi a primeira versão desenvolvida e padronizada
pelo W3C, pois o IETF havia fechado o seu grupo de
trabalho em setembro de 1997.
• O HTML 3.2 omitiu várias fórmulas matemáticas,
sobrepôs várias extensões proprietárias e adotou
Markup tags do Netscape. Tags como <blink> da
Netscape e <marquee> da Microsoft foram omitidas
após um acordo mútuo entre as duas empresas.
• A capacidade de incluir fórmulas matemáticas no HTML
não foi padronizado até anos mais tarde, com o MathML.
11

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Dezembro de 1997
O HTML 4.0 é publicado como uma recomendação
do W3C. Foram criadas 3 versões:
• Strict: elementos em desuso são proibidos
• Transitional: elementos em desuso aqui são
permitidos
• Frameset: utilizado em documentos que fazem o
uso de frames. Inicialmente sob o codinome
“Cougar”, o HTML 4.0 adotou vários elementos e
atributos, mas ao mesmo tempo procurou eliminar
marcação proprietária e em desuso a favor das
folhas de estilo. 12

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Abril de 1998
HTML 4.0 foi lançado em edições menores mais sem aumentar o
número de versão.

Dezembro de 1999
HTML 4.01 foi publicado como uma recomendação do W3C. Ele
possuía as mesmas versões do HTML 4.0 e sua errata foi publicada
em 12 de Maio de 2001.

Maio de 2000
ISO/IEC 15445:2000 (“ISO HTML”, baseado no HTML 4.01 Strict), foi
publicado como uma norma ISO / IEC padrão internacional. Em
meados de 2008, HTML 4.01 e ISO / IEC 15445:2000.

• Desenvolvido em paralelo, o XHTML, baseado em XML ocupava

o grupo de trabalho do W3C até meados de 2000. 13

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Janeiro de 2008
HTML5 é publicado como um novo projeto do W3C. Apesar
de sua sintaxe ser semelhante a do SGML, o HTML5
abandonou qualquer tentativa de ser uma aplicação SGML, e
tem definido seu próprio vocabulário HTML, além de uma
alternativa baseada em XML, o XHTML 5.

Outubro de 2014
HTML5 é publicado como uma recomendação do W3C

Novembro de 2016
HTML 5.1 é publicado como uma recomendação do W3C
14

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Histórico e versões do XHTML
XHTML é uma linguagem que começou como uma reformulação
do HTML 4.01 usando XML 1.0:

• XHTML 1.0: Publicado em 26 de Janeiro de 2000 como uma

recomendação do W3C, posteriormente revisto e republicado
em 1 de Agosto de 2002, ele oferece as mesmas três “versões”
que o HTML 4.0 e HTML 4.01, baseado em XML, com menores
restrições.

• XHTML 1.1: Publicado em 31 de Maio de 2001 como uma

recomendação W3C. É baseado em XHTML 1.0 Strict, mas inclui
alterações menores, podem ser personalizadas, e é reformulado
utilizando módulos de modularização do XHTML. Foi publicado
em 10 de abril de 2001 como uma Recomendação W3C. 15

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Histórico e versões do XHTML

• XHTML 2.0: Ainda é um projeto de trabalho do W3C. XHTML

2.0 é compatível com XHTML 1.1, e, portanto, seria mais
adequado caracterizar como uma nova linguagem inspirada
em XHTML do que uma atualização para XHTML 1.1. Html e
Xhtml.

16

Prof. Samuel Rodrigues

DESENVOLVIMENTO EM AMBIENTES WEB
Diferenças entre HTML 4.01 e XHTML 1.0
As tags e atributos deste capítulo não apresentam
nenhuma diferença entre HTML e XHTML.

Abandone
1 – Em versões HTML 4.0 e anteriores, existem
algumas tags de estilo físico como as tags <s>,
<strike>, <u>, que já estão depreciadas (em desuso).
Ao invés disto use folha de estilos CSS.

17

Prof. Samuel Rodrigues

 DESENVOLVIMENTO EM AMBIENTES WEB
Tag <u>: (underline/sublinhado) abandonado para não ser
confundido com hyperlink, que por padrão é sublinhado.
Deve ser substituído por qualquer outro efeito que não seja
sublinhado.

Tags <strike> e <s> (riscado) devem ser substituídos por

<del>, pois possui semântica (significado), que indica que o
texto foi deletado.
<p>Texto normal <u>Texto em destaque</u> Texto
normal</p>
<p>Texto normal <s>Texto riscado</s> Texto normal</p>
<p>Texto normal <strike>Texto riscado</strike> Texto
normal</p>
Se usar alguma das tags acima, mude o DOCTYPE do seu 18
HTML para transitional.
Prof. Samuel Rodrigues
 DESENVOLVIMENTO EM AMBIENTES WEB
O Início...
Em 1990, surgiu o HTML, que é uma linguagem usada para
escrever páginas da WEB, desenvolvida com base na SGML. O
objetivo principal do HTML é estruturar o conteúdo de um
documento, identificando elementos como parágrafos, listas,
tabelas, títulos, etc., através de tags (etiquetas).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Primeira Aula</title>
</head>
<body>
<p>Olá mundo!</p>
</body>
</html>
19

Prof. Samuel Rodrigues

 DESENVOLVIMENTO EM AMBIENTES WEB
Evolução do HTML
O HTML evoluiu muito e em 1999 já possuía algumas
definições para aparência, tabelas e formulários, além de passar a
trabalhar com “extensões” como JavaScript (linguagem que
permite executar scripts em objetos) e CSS (padrão de
formatação de página).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Primeira Aula</title>
</head>
<body bgcolor="#999999">
<p align="right">Olá mundo!</p>
</body>
</html>
20

Prof. Samuel Rodrigues

 DESENVOLVIMENTO EM AMBIENTES WEB
O HTML não tem “padrão”

Embora tenha se tornado uma grande solução, o HTML não

impõe um padrão de desenvolvimento e isto provocou:

• Dificuldade de atualização;
• Necessidade de reconstrução para evolução de design e conteúdo;
• Escrita diferente para browsers (navegadores) e dispositivos
diferentes;
• Consumo desnecessário de recursos de sistema

21

Prof. Samuel Rodrigues

 DESENVOLVIMENTO EM AMBIENTES WEB
Semântica Forte - A Solução dos Problemas

Para tornar a semântica forte o HMTL precisava sofrer algumas

mudanças e o XML era a solução, já que é uma linguagem que,
embora permita a criação de tags, não é tolerante a escrita ruim.

<?xml version="1.0" encoding="ISO-8859-1"?>

<database>
<banco>oracle</banco>
<servidor>192.168.0.1</servidor>
<porta>1521</porta>
<instancia>teste</instancia>
<usuario>sistema</usuario>
<senha>RQmCkAQF18U=</senha>
</database>
</xml> 22

Prof. Samuel Rodrigues

 DESENVOLVIMENTO EM AMBIENTES WEB
O XHTML exige que:

• todas as tags e atributos sejam escritos em letras minúsculas;

• os elementos (tags) estejam aninhados (respeitando sequência de
fechamento);
• todas as tags sejam fechadas e que as tags individuais sejam
acompanhadas de uma “/”. Ex.: <br />;
• o valor de todos os atributos estejam delimitados por aspas;
• todos os atributos tenham um valor. Ex.: selected=“selected”.

23

Prof. Samuel Rodrigues

 DESENVOLVIMENTO EM AMBIENTES WEB
Elementos Obrigatórios

• DOCTYPE (DTD)
Define o tipo de documento e em qual tipo de transação se encaixa.
• <html>
Indica que o conteúdo do documento segue a codificação padrão
HTML. Deve vir logo após o identificador DOCTYPE.
• <head>
Define a área de introdução (prólogo). Receberá elementos de
definição do documento.
• <body>
Área do conteúdo a ser exibido na página. Nesta área serão incluídos
os elementos de texto, parágrafo, tabela, links, figuras, etc..
• <title>
Identifica o título da página. Deve fica dentro da área de <head> e 24
será utilizado pelos browsers e dispositivos de busca.
Prof. Samuel Rodrigues
 DESENVOLVIMENTO EM AMBIENTES WEB
Tipos de DOCTYPE

• Versão de Transição
Define que nem toda formatação utilizará folha de estilo, permitindo maior
compatibilidade com browsers antigos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• Versão Estrita
Define que toda formatação será feita através de folha de estilo. Compatível
apenas com navegadores com suporte às folhas de estilo em cascata.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• Versão Frames
Usado quando o documento emprega conjunto de frames.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
25
Disponível em 01/03/2017 http://www.w3.org/TR/xhtml1/#dtds
Prof. Samuel Rodrigues
 DESENVOLVIMENTO EM AMBIENTES WEB
Estrutura Hello World

• Versão de Transição

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World!</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

26

Prof. Samuel Rodrigues