HTML

Conceitos

Bacharel em Ciência da Computação (UFG)

Especializando em Gestão de TI (Instituto AVM)

Analista de Sistemas – SIGMA / MDIC

Professor Formador EAD – NEAD/ETEB
george@georgemendonca.com.br
http://www.georgemendonca.com.br
 HTML
– HTML é simplesmente indispensável no desenvolvimento
de sistemas aplicativos para Internet.
– Sua importância é fundamental de tal forma que sem a
linguagem HTML nada do que existe na Internet seria
possível.
– Nos últimos tempos com o aparecimento de tantas
novidades, interatividade na Web e recursos diversos, a
HTML tem sido deixada um pouco de lado pelos
desenvolvedores e entusiastas.
– No entanto conhecê-la bem é fundamental para o
desenvolvimento de projetos de aplicativos para Web,
seguindo as recomendações dos Web Standards.
13/02/2011 2
 HTML
• Linguagem de Marcação
– É um conjunto de códigos aplicados a um texto ou a dados,
com o objetivo de adicionar informações particulares
sobre esse texto ou dado, ou sobre trechos específicos.
– São usadas, por exemplo, na indústria editorial para
marcar a formatação (exibição gráfica) de páginas.
– Em resumo, uma linguagem de marcação é um conjunto
de marcação de tag’s (etiquetas).

13/02/2011 3
 HTML
• A linguagem de marcação da Web
– É o HyperText Markup Language ( HTML), é a Linguagem
padrão para a Marcação de Hipertexto, utilizada para
descrever páginas Web.
– Não é uma linguagem de programação, mas uma
linguagem de marcação de texto.
– Utiliza tags (etiquetas) de marcação para descrever os
elementos de uma página Web.

13/02/2011 4
 HTML
• Tag's ou Etiquetas de marcação HTML
– São palavras chave cercadas por parênteses angulares
seguindo a lei de formação:
<nomeDaTag atributo="valor">

– Sendo que pode haver mais de um atributo para uma tag e

também tags sem atributos. Além disso, normalmente
possuem as seguintes características:
<!-- Tags de abertura e fechamento -->
<tag1></tag1>

<!-- Tag sem fechamento -->

<tag2>

<!-- Forma correta de implementar uma tag sem fechamento -->

<tag3 />
13/02/2011 5
 HTML
• Tag's ou Etiquetas de marcação HTML

– Onde tag1 de é uma tag de abertura e fechamento, tag2 é

uma tag sem fechamento e tag3 a forma correta de
implementar uma tag sem fechamento, segundo os padrões e
recomendações do W3C.

<!-- Tags de abertura e fechamento -->

<tag1></tag1>

<!-- Tag sem fechamento -->

<tag2>

<!-- Forma correta de implementar uma tag sem fechamento -->

<tag3 />
13/02/2011 6
 HTML
• Documentos HTML são páginas Web!
– Pois contém tag’s HTML e textos simples.

– Hipertextualizam, ou seja, criam páginas dinâmicas com

hipertextos. Descrevem as páginas da Web.

– Como mencionado na introdução deste tutorial, documentos

HTML são fundamentais para a criação de qualquer página na
Internet.

13/02/2011 7
 HTML
• Mas... e o navegador?
– O objetivo dos navegadores web como o Opera, IE ou o Fire
Fox é a interpretação de documentos HTML e exibi-los como
páginas web.

– O navegador não exibe tag’s HTML, mas as utilizam para

interpretar o conteúdo da página web.

13/02/2011 8
 HTML
• Quais ferramentas você precisa para desenvolver?
– Você não precisa de um Editor HTML, nem de um servidor
web ou um site em um provedor.
– Basta um editor de texto simples para fazer diversos
exemplos de implementações em seu computador pessoal.
– Para facilitar nosso trabalho e agilizar nossos estudos
podemos utilizar o editor de texto Notepad++, um bloco de
notas um pouco mais turbinado que identifica diversas
linguagens de programação.
13/02/2011 9
 HTML
• Quais ferramentas você precisa para desenvolver?
– Certamente esta é a melhor forma de aprender HTML.

– No entanto, os desenvolvedores de web profissionais,

preferem muitas vezes os editores HTML e IDEs (Integrated
Development Enviroment) mais completas em vez de um
editor de texto simples.

13/02/2011 10
 HTML
• Extensão de arquivos HTML
– Antigamente quando o sistema operacional só permitia 3
caracteres como extensão de arquivos, utilizava-se a extensão
*.htm. Atualmente, como não temos mais esta limitação,
normalmente utilizamos a extensão *.html.
– Qualquer uma destas extensões são permitidas como
extensões de arquivos HTML.
– Exemplo: o nome do meu arquivo HTML poderia ser
meusite.html ou meusite.htm.
13/02/2011 11
 HTML
• A versão atual é a HTML 4.1
– Publicada pelo W3C no final de 1999,

– se tornando em 2000 a norma internacional ISO/IEC

15445:2000.

– Uma errata desta recomendação foi publicada no ano de

2001.

13/02/2011 12
 HTML
• A versão atual é a HTML 4.1
– Para que um documento HTML seja válido, deve-se declarar
qual a versão HTML usada no documento.
– A declaração do tipo de documento indica-nos a definição do
tipo de documento (DTD) em uso no referido documento.
– O HTML 4.01 especifica três DTDs, as quais uma delas deve
ser escolhida pelo desenvolvedor para o projeto do
documento HTML a ser implementado.
– Elas se diferenciam pelos elementos suportados.
13/02/2011 13
 HTML
• Tipo de documento (DTD)
– A DTD HTML 4.01 Strict: Inclui todos os elementos e atributos
que não foram depreciados ou que não aparecem nos
documentos contendo conjuntos de molduras ("framesets").
Para os documentos que usem este tipo de DTD, utilize esta
declaração do tipo de documento:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"

"http://www.w3.org/TR/html4/strict.dtd">

13/02/2011 14
 HTML
• Tipo de documento (DTD)
– A DTD HTML 4.01 Transitional: Inclui todos os pormenores da
DTD Estrita mais os elementos e atributos depreciados (a
maioria dos quais se relacionam com a apresentação visual
de um documento). Para os documentos que se sirvam desta
DTD, utilize esta declaração do tipo de documento:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

13/02/2011 15
 HTML
• Tipo de documento (DTD)
– A DTD HTML 4.01 Frameset: Inclui tudo aquilo que a DTD
Transitiva inclui mais o conjunto de molduras ou "frames".
Para os documentos que usem este tipo de DTD, utilize esta
declaração do tipo de documento:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01

Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

13/02/2011 16
 HTML
• Interpretando o código HTML
– Codificar HTML é realmente muito simples e fácil.
Implementaremos aqui nosso primeiro código e
interpretaremos o significado de cada parte deste código.

– Utilize o bloco de notas ou o notepad++ como recomendado

ou um editor HTML de sua preferência.

13/02/2011 17
 HTML
• Interpretando o código HTML
– Implemente o código abaixo, criando então o seu primeiro
código HTML neste tutorial, salvando-o em uma pasta
qualquer em seu computador com o nome primeiro-
documento.html:
<html>
<head>
<title>O meu primeiro documento HTML</title>
</head >
<body>
<p>HTML é uma linguagem de marcação simples!</p>
</body>
13/02/2011 18
</html>
 HTML
• Interpretando o código HTML
– <html> e </html> definem a página web
– <head> e </head> definem o cabeçalho do documento HTML
– <title> e </title> definem o título da página (barra título)
– <body> e </body> o corpo do documento (documento
– visível)
<html>
<head>
<title>O meu primeiro documento HTML</title>
</head >
<body>
<p>HTML é uma linguagem de marcação simples!</p>
</body>
13/02/2011 19
</html>
 HTML
• Referência bibliográfica e leituras
complementares recomendadas
– http://www.pt-br.html.net/
– W3Schools
– http://pt.wikipedia.org/wiki/HTML
– Tutorial HTML – USP
– HTML Cod Tutorial
– HTML Goodies
– HTML Dog
– Página oficial do HTML na W3C
– Especificação do HTML 4.01
– Especificação do HTML 4.01 em português
– https://developer.mozilla.org/pt/HTML
13/02/2011 20