HTML e XHTML

(Estrutura Bsica)




Curso: Licenciatura em Informtica
Disciplina: Web Design CHT: 60h
Professor: Mauro Lopes
E-mail: [email protected]
Turma: 2010.1 e .2 Perodo: 5 e 6
Ano/Semestre: 2013.1


Plano de Aula
O que o HTML e o XHTML
Comandos
Estrutura Hierrquica
Estrutura Fsica de um Site

O que HTML ?
HTML uma abreviao de Hypertext Markup Language -
Linguagem de Marcao de Hipertexto;
Um documento HTML ou pgina, nada mais que um
arquivo de texto simples contendo cdigos (comandos)
baseado em etiquetas de identificao, tambm conhecidos
pelo termo ingls tags que so os comandos de formatao
da linguagem e especificam cada elemento de texto, como
por exemplo, ttulo, pargrafo, tabela, etc;
Verso atual: O HTML est na verso 5.

3
O que HTML ?
4
LEITURA OBRIGATRIA PARA SABER MAIS
entenda um pouco mais sobre o HTML 5, acesse o link abaixo e boa leitura.

http://www.w3c.br/cursos/html5/conteudo/capitulo1.html
(Acessado em 12.03.2011)

O que XHTML ?
Antes de definirmos o que o XHTML, precisamos entender
alguns conceitos anteriormente:
O que XML ?
XML (eXtensible Markup Language) uma recomendao da W3C
para gerar linguagens de marcao para necessidades especiais. Ela
denominada uma metalinguagem, isto XML serve para definir
outras linguagens, por exemplo:
XHTML: O XHTML, ou eXtensible Hypertext Markup Language, uma
reformulao da linguagem de marcao HTML baseada em XML.
GML: Geography Markup Language uma sintaxe XML desenvolvida
pela OGC para descrever feies geogrficas.
DOCBOOK: uma linguagem de marcao para autoria de documentos.
5
O que XHTML ?
O XHTML, ou eXtensible Hypertext Markup Language, uma
reformulao da linguagem de marcao HTML baseada em
XML.
Combina as tags de marcao HTML com regras da XML
(mais rgidas). No XHTML as tags so escritas em caixa baixa
(letras minsculas).
Enquanto HTML uma aplicao da SGML, XHTML uma
aplicao da XML.
XHTML no a verso atual de HTML. Enquanto HTML est
na verso 5, XHTML est na verso 1.1 (com a 2.0 em draft)
6
O que XHTML ?
A Linguagem XHTML mais rgida se comparada a suas
antecessoras, mas em contrapartida possibilita a
construo de sites com menor nmero de linhas e possui
total integrao com os recursos baseados em CSS (Folha
de Estilo).
Nos ltimos anos o mercado ficou mais sensvel a busca
por uma padronizao um pouco mais rgida na Internet,
devido a grande dificuldade gerada ao pessoal do
desenvolvimento de sites.
Com a padronizao, por exemplo, ferramentas de
validao foram criadas: ( http://validator.w3.org/ )

7
O que XHTML ?
8
SOPA DE LETRINHAS PARA SABER MAIS
entenda um pouco mais sobre todas estas siglas (HTML, XHTML, XML, SGML,etc) -
acesse o link abaixo e boa leitura.

http://www.ic.unicamp.br/~celio/inf533/docs/markup.html
(Acessado em 12.09.2013)

Comandos
As Linguagens de marcao de hipertextos HTML e
XHTML, assim como qualquer outra linguagem
computacional, so formados por um conjunto de
palavras reservadas que possibilitam estabelecer o
trabalho que um determinado computador vai realizar;
Os comandos HTML e XHTML so chamados de tags
(etiquetas) e interpretados pelo programa de navegao
(browser).
9
Comandos
As tags so geralmente usadas em dupla (tag de
inicializao <tag> e tag de finalizao </tag>),
envolvendo o objeto (texto, imagem, ponto de ligao
etc.) que ser tratado.

Existem algumas tags que so consideradas rfs por
no possurem uma outra tag que indique finalizao,
devendo ser escritas como <tag />.
10
tags
Comandos Sintaxe
A sintaxe bsica de tags duplas a seguinte:
<[nome da tag inicializao] [atributos]>
[Texto marcado pela tag]
</[nome da tag finalizao]>
Exemplo de uma tag dupla:
<p align=left>Aula de XHTML</p>
nome da tag: p paragraph atributo: align - alinhamento
Se uma tag for orf, possui a seguinte sintaxe:
<[nome da tag orf] [atributos] />
Exemplo de uma tag orf:
<br /> br -Tag responsvel pela quebra de linha.
11
Estrutura Hierrquica
As linguagens HTML e XHTML possuem uma estrutura
bsica (mnima) para a formatao de um documento
(pgina).
As partes de uma pgina escrita em HTML/XHTML so
formadas pelas estruturas:
principal : representado pelas tags <html></html>
cabealho: representado pelas tags <head></head>
ttulo para a barra de ttulos do navegador: representado
pelas tags <title></title>
corpo do documento: representado pelas tags
<body></body>
12
Estrutura Hierrquica
1: <html>
2: <head>
3: <title>Pgina de Saudao</title>
4: </head>
5: <body>
6: <p>Al Pessoal !</p>
7: </body>
8: </html>
13 Autoria Web Prof. Mauro Lopes
Vamos ver isso um
pouco mais de perto!
Estrutura Hierrquica
<html>
...
</html>
14 Autoria Web Prof. Mauro Lopes
Linha 1 e 8
Esta tag indica o incio e a finalizao da nossa pgina em formato HTML.
Quando o cdigo da pgina esta escrito em HTML 5, a tag <html> ser
escrita simplesmente como <html>, geralmente acompanhada de um atributo
que indica a lngua na qual a pgina foi escrita. Mas se o cdigo da pgina
estiver escrito em XHTML 1.0 ou XHTML 1.1, ser usada a declarao
<!DOCTYPE>. No HTML 5 tambm teremos a declarao <!DOCTYPE>,
mas esta muito mais simples.

Uma pgina HTML/XHTML sempre encerrada pela tag </html>.
Estrutura Hierrquica
<head>
<title>Pgina de Saudao</title>
</head>
15 Autoria Web Prof. Mauro Lopes
Linhas 2 a 4
As tags <head></head>, determinam o incio e o fim do cabealho da pgina.
Dentro da tag <head> h a tag <title></title> que especifica o ttulo da pgina
apresentada na barra de ttulos do navegador.
No nosso exemplo apareceria a mensagem Pgina de Saudao na barra
de ttulos do navegador.

Estrutura Hierrquica
<body>
<p>Al Pessoal !</p>
</body>
16
Linhas 5 a 7
As tags <body></body>, determinam o incio e o fim do corpo do nosso
documento. Tudo o que for colocado entre estas tags ter efeito na rea
disponvel para a pgina no navegador. Por exemplo esta sendo usado a tag
<p></p>, que identifica a construo de um pargrafo. O efeito ser a
visualizao da informao Al Pessoal ! em formato de um pargrafo na
rea disponvel para a pgina no navegador.

Estrutura Hierrquica
17
Vamos Praticar !!!
Vamos fazer como nosso amigo ao lado.
Vamos entender o funcionamento
de uma pgina XHTML praticando
um pouco !!!
Estrutura Fsica de um Site
De forma geral pode-se dizer que um site um conjunto de
pginas que esto relacionadas entre si com o objetivo de
apresentar um conjunto de informaes.
um excelente hbito quando do planejamento de um site,
organizar sua estrutura em diretrios para melhor organizar e
distribuir seus arquivos;

Por exemplo, criar um diretrio somente para imagens, para
que os arquivos de imagem fiquem em um s lugar.

Outro ponto importante que todo site tem de ter uma pgina
inicial, que geralmente denominada index.html (esta pode ter
outras extenses como .php, .asp, etc).
18
Atividade:
Pesquise:
O que um Servidor Web ?
Pesquise sobre o Servidor Apache e o Servidor IIS (Internet
Information Service)
Pesquise sobre servios de hospedagem gratuitos na Internet

19
Estrutura Fsica de um Site
Perguntas
Referncias
Materiais avulsos da Internet e o Livro Guia de
Orientao e Desenvolvimento de Sites - Html ,
Xhtml , Css e Javascript / Jscript, Jose Augusto N. G.
Manzano, 1 Edio - Editora rica, 382 pginas.

21 Autoria Web Prof. Mauro Lopes