Embed Size (px)
Citation preview
Tema I - Princípios da programação Web
MSc. Yoenis Pantoja Zaldívar
O linguagem XHTML. Principais
etiquetas.
Conferencia 2
Na aula anterior…
Modelo Cliente-
Servidor
Internet WWWpágina
Web
Tecnologías para
programación Cliente-
Servidor
Resumo
1. Presentação dos linguagems de marcado
2. Linguagem XHTML
3. Tipos de definições de documentos XHTML
4. Estrutura de um documento XHTML
5. Elementos Básicos de XHTML
Objectivos
• Caracterizar os linguagems de
marcado, estabelecendo as
diferenças entre o lenguaje HTML,
XML e XHTML.
• Reconocer as principais etiquetas do
linguagem XHTML através de suas
principais atributos e exemplos de
seus usos para desenvolver
documentos Web.
Bibliografía
1. Valentine Chelsea and Minnick
Chris, Serie Práctica XHTML,
Editorial Prentice Hall. 2001.
Disponible en:
http://progwebisutic.wordpress.com
2. Eguíluz Javier, Introducción a
XHTML. Disponible en:
http://www.librosweb.es/xhtml
“Ponga estilo de carta, ponga
comillas, ponga mayúsculas,
‘estimado Juan’, ponga dos puntos,
aparte, sangría, ponga primera letra
mayúscula, ‘te escribo esta carta’,
ponga negrillas, ‘de forma muy
urgente’, cierre negrilla, ya que no me
has enviado... etc., etc.”
Linguagem de marcado
• Forma de codificar um documento
que, junto com o texto, incorpora
etiquetas ou marcas que contem
informação adicional sobre a estrutura
do texto ou sua apresentação.
GML(Generalized Markup
Language)
crea
anos 70
SGML(Standard
Generalized
Markup Language)
trabalharon
nas
normativas
1986 HTML
(HyperText Markup
Language)
ampliação de
SGML, 1993
XML(Extensible Markup
Language)
1998XHTML
(Extensible HyperText
Markup Language)
HTML (HyperText Markup Language)
• Permite descrever hipertexto
• Forma estruturada e agradável
• Com enlaces (hyperlinks)
• Inserções multimedia (gráficos,
son...)
• Universal
• Problemas de estandarização
• Não é suficientemente robusto
XML (Extensible Markup Language)
• Linguagem que permite definir outros
linguagems
• Informação etiquetada reutilizável
• Demanda especial atenção às
maiúsculas e minúsculas, as
citações, etiquetas de cierre e outros
detalhes.
Exemplo XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE lista_persoas SYSTEM “ejemplo.dtd">
<lista_persoas>
<!–- comentario -->
<persoa>
<nome>José García</nome>
<idad>25</idad>
<sexo>Home</sexo>
</persoa>
</lista_persoas>
XML (Extensible Markup Language)
• Tem todas as características de
HTML.
• Ganha toda a potencia e flexibilidade
de XML.
• Base perfeita para CSS.
HTML + XML = XHTML
Tipos de definições de documentos
• Para ayudar à transição rumo XHTML,
a versión 1.0 tem diferentes tipos de
definições
–XHTML Transitional
–XHTML Strict
–XHTML Frameset
XHTML e os DTD
• XHTML é definido utilizando um DTD
(Document Type Definition de XML)
• Para criar um documento XHTML
válido, tem que escolher umo e criar
tal documento de acordo a suas
regras
XHTML e os DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
Elementos de um documento XHTML
1. Declaração de XML, DOCTYPE e o
namespace asociado à inicio.
<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="es" xml:lang="es">
…
</html>
Elementos de um documento XHTML
• Um documento XHTML ao igual que
um documento HTML, está dividido
en duas zonas principais.
– O encabezamento,
compreendido entre as
etiquetas <head> e
</head>
– O corpo, compreendido
entre as etiquetas
<body> e </body>
Elementos de um documento XHTML
• Elementos que descrevem conteúdo
a. Elementos estándar que descrevem
dados. Tem uma etiqueta de inicio e
uma de fin. Por exemplo: <p> Isto é
um parágrafo </p>
b. Elementos vazíos que não descrevem
dados, mas incluem informação no
documento. Por exemplo: <img src=
minha_imagem.gif />
Elementos HTML
• Uma etiqueta de apertura.
• Zero ou mais atributos.
• Texto encerrado pela etiqueta.
• Uma etiqueta de fechamento.
91 Etiquetas HTML
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var
Etiquetas mais usadas
html, head, body
title, link, style, script, noscript
div, p, h1, h2, h3, h4, h5, h6, strong, em
a, br, img, ol, ul, li, span
form, label, input, fieldset, legend,
textarea, select, option
table, thead, tbody, tfoot, tr, th, td
Atributos Básicos
id = “texto”
Estabelece um identificador único a cada elemento
class = “nombre”
Estabelece a clase CSS que se aplica ao elemento
style = “texto”
Estabelece de forma direita os estilos CSS
title = “texto”
Estabelece o título a um elemento
Atributos de Eventos
onclick, ondblclick, onmousedown,
onmouseup, onmouseover,
onmousemove, onmouseout,
onkeypress, onkeydown, onkeyup
Permitem controlar os eventos produzidos sobre a cada elemento da página
XHTML Restricciones básicas
1) As etiquetas tem que se fechar de
acordo a como se abrem
<p>Isto é um parágrafo com <a>um
enlace</a></p>
<p>Este es un párrafo con <a>un
enlace</p></a>
XHTML Restricciones básicas
2) Os nomes das etiquetas e atributos
siempre se escrevem em minúsculas
<p>Este é um parágrafo con <a
href="http://www.google.com">um
enlace</a></p>
<P>Este é um parágrafo con <A
HREF="http://www.google.com">um
enlace</A></P>
XHTML Restricciones básicas
3) O valor dos atributos sempre se
encierra entre aspas
<p>Este é um parágrafo con <a
href="http://www.google.com">um
enlace</a></p>
<p>Este é um parágrafo con <a
href=http://www.google.com>um
enlace</a></p>
XHTML Restricciones básicas
4) Os atributos não se podem
comprimir
<textarea readonly="readonly">Solo-
lectura</textarea>
<textarea readonly>solo-
lectura</textarea>
XHTML Restricciones básicas
5) Todas as etiquetas tem que cerrarse
sempre
<br />
<br>
XHTML Otras Restricciones
Las páginas XHTML deben prescindir
del atributo name para identificar de
forma única a los elementos. En su
lugar, siempre debe utilizarse el
atributo id
Conclusões
• Principais diferenças entre HTML e
XHTML.
• Regras para conformar documentos
XHTML válidos.
Estudio Independiente
• Estudar as demais etiquetas não
vistas em aula
Tema I - Princípios da programação Web
MSc. Yoenis Pantoja Zaldívar
O linguagem XHTML. Principais
etiquetas.
Conferencia 2
