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 Conceitos

– 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.

HTML

13/02/2011 2

• 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).

HTML

13/02/2011 3

• 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.

HTML

13/02/2011 4

• Tag's ou Etiquetas de marcação HTML

– São palavras chave cercadas por parênteses angulares seguindo a lei de formação:

– 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:

HTML

13/02/2011 5

<nomeDaTag atributo="valor">

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

<tag1></tag1>

<!-- Tag sem fechamento -->

<tag2>

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

<tag3 />

• 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.

HTML

13/02/2011 6

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

<tag1></tag1>

<!-- Tag sem fechamento -->

<tag2>

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

<tag3 />

• 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.

HTML

13/02/2011 7

• 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.

HTML

13/02/2011 8

• 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.

HTML

13/02/2011 9

• 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.

HTML

13/02/2011 10

• 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.

HTML

13/02/2011 11

• 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.

HTML

13/02/2011 12

• 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.

HTML

13/02/2011 13

• 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:

HTML

13/02/2011 14

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

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

• 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:

HTML

13/02/2011 15

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

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

• 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:

HTML

13/02/2011 16

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

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

• 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.

HTML

13/02/2011 17

• 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

13/02/2011 18

<html>

<head>

<title>O meu primeiro documento HTML</title>

</head >

<body>

<p>HTML é uma linguagem de marcação simples!</p>

</body>

</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

13/02/2011 19

<html>

<head>

<title>O meu primeiro documento HTML</title>

</head >

<body>

<p>HTML é uma linguagem de marcação simples!</p>

</body>

</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

HTML