o linguagem xhtml. principais etiquetas.€¦ · diferenças entre o lenguaje html, xml e xhtml....
TRANSCRIPT
![Page 1: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/1.jpg)
Tema I - Princípios da programação Web
MSc. Yoenis Pantoja Zaldívar
O linguagem XHTML. Principais
etiquetas.
Conferencia 2
![Page 2: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/2.jpg)
Na aula anterior…
Modelo Cliente-
Servidor
Internet WWWpágina
Web
Tecnologías para
programación Cliente-
Servidor
![Page 3: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/3.jpg)
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
![Page 4: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/4.jpg)
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.
![Page 5: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/5.jpg)
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
![Page 6: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/6.jpg)
“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.”
![Page 7: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/7.jpg)
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.
![Page 8: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/8.jpg)
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)
![Page 9: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/9.jpg)
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
![Page 10: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/10.jpg)
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.
![Page 11: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/11.jpg)
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>
![Page 12: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/12.jpg)
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
![Page 13: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/13.jpg)
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
![Page 14: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/14.jpg)
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
![Page 15: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/15.jpg)
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">
![Page 16: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/16.jpg)
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>
![Page 17: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/17.jpg)
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>
![Page 18: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/18.jpg)
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 />
![Page 19: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/19.jpg)
Elementos HTML
• Uma etiqueta de apertura.
• Zero ou mais atributos.
• Texto encerrado pela etiqueta.
• Uma etiqueta de fechamento.
![Page 20: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/20.jpg)
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
![Page 21: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/21.jpg)
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
![Page 22: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/22.jpg)
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
![Page 23: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/23.jpg)
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
![Page 24: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/24.jpg)
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>
![Page 25: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/25.jpg)
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>
![Page 26: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/26.jpg)
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>
![Page 27: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/27.jpg)
XHTML Restricciones básicas
4) Os atributos não se podem
comprimir
<textarea readonly="readonly">Solo-
lectura</textarea>
<textarea readonly>solo-
lectura</textarea>
![Page 28: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/28.jpg)
XHTML Restricciones básicas
5) Todas as etiquetas tem que cerrarse
sempre
<br />
<br>
![Page 29: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/29.jpg)
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
![Page 30: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/30.jpg)
Conclusões
• Principais diferenças entre HTML e
XHTML.
• Regras para conformar documentos
XHTML válidos.
![Page 31: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/31.jpg)
Estudio Independiente
• Estudar as demais etiquetas não
vistas em aula
![Page 32: O linguagem XHTML. Principais etiquetas.€¦ · diferenças entre o lenguaje HTML, XML e XHTML. • Reconocer as principais etiquetas do linguagem XHTML através de suas principais](https://reader033.vdocuments.pub/reader033/viewer/2022051310/6006ccdd0d8b4e79150804bf/html5/thumbnails/32.jpg)
Tema I - Princípios da programação Web
MSc. Yoenis Pantoja Zaldívar
O linguagem XHTML. Principais
etiquetas.
Conferencia 2