html hardcore parte 1 - conceitos
DESCRIPTION
HTML conceptsTRANSCRIPT
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 [email protected]
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