Lenguajes de Marcas: HTML y XHTML
Cargado por
Daniel Mora MartinezLenguajes de Marcas: HTML y XHTML
Cargado por
Daniel Mora MartinezLENGUAJE DE MARCAS
TEMA 2: UTILIZACIÓN DE LENGUAJES DE MARCAS EN ENTORNOS WEB.
HTML y XHTML
• INTRODUCCIÓN
•
ADMINISTRACIÓN
EVOLUCIÓN DE HTML
• SISTEMAS
ESTRUCTURA DE UN DOCUMENTO HTML
• ELEMENTOS DEINFORMÁTICOSRED
HTML
• XHTML
• ESTRUCTURA DE UN DOCUMENTO XHTML
• NORMAS DE XHTML
INTRODUCCIÓN
HTML (HyperText Markup Language) es un lenguaje de marcas
definido para la creación de páginas web. Permite mezclar texto
con contenido multimedia además de enlazar con otras páginas.
Fue creado por Tim Berners a principios de los 90.
ADMINISTRACIÓN
SISTEMAS
Ha evolucionado sin ninguna planificación y en muchas ocasiones
de forma anárquica.
INFORMÁTICOSRED
Esta evolución anárquica, ha hecho la aparición de otras
tecnologías para solucionar las deficiencias, como CSS y Javascript.
EVOLUCIÓN DE HTML
HTML es desarrollado en el CERN a principios de los años 90 por el
investigador Tim Berners Lee, para compartir documentos entre
diferentes investigadores.
• HTML nace en 1991
• ADMINISTRACIÓN
En 1993 aparece HTML 1.2
•
•
SISTEMAS
En 1995 aparece HTML 2.0 (Primer estándar oficial)
En 1997 se publica HTML 3.2 (Por W3C)
• INFORMÁTICOSRED
En 1997 nace HTML4 publicado por el W3C como estándar de
diseño web.
• En 1999 nace XHTML 1.0 que extiende HTML4
• En 2001 se publica la nueva versión de XHTML, la 1.1
• En 2002 se prepara un borrador para una nueva versión de XHTML
• En 2008 nace HTML5 como el sucesor de HTML4 y XHTML 1.1
ESTRUCTURA DE UN DOCUMENTO HTML
Los documentos html, son ficheros de texto plano cuyo nombre
tiene la extensión .html. Estos ficheros están formados por etiquetas
de apertura y cierre (no siempre), que permiten indicar el propósito
del texto.
<!DOCTYPE … > ADMINISTRACIÓN
<html>
<head>
SISTEMAS
INFORMÁTICOSRED
<title>Título de la página</title>
Elementos de la cabecera
</head>
<body>
Contenido del cuerpo
</body>
</html>
ESTRUCTURA DE UN DOCUMENTO HTML
Ejemplo:
<!DOCYTPE html>
<html>
<head> ADMINISTRACIÓN
SISTEMAS
<title>Página Ejemplo</title>
</head>
<body> INFORMÁTICOSRED
<p class='parrafo1'>
Hola mundo.
</p>
</body>
</html>
ESTRUCTURA DE UN DOCUMENTO HTML
Ejecución del ejemplo:
ADMINISTRACIÓN
SISTEMAS
INFORMÁTICOSRED
ELEMENTOS DE HTML
Los elementos son los componentes fundamentales de HTML. Estos
elementos tienen estas partes básicas: las etiquetas (de apertura y
cierre), los atributos y el contenido.
ADMINISTRACIÓN
Los elementos se definen con una etiqueta de apertura y otra de
cierre:
<p> </p>
SISTEMAS
INFORMÁTICOSRED
Los atributos se colocan dentro de la etiqueta de apertura y el
contenido entre la etiqueta de apertura y la cierre:
<p class='parrafo1'> Hola mundo. </p>
Los elementos que no tienen contenido se les llaman vacíos y no
tienen etiqueta de cierre:
<br>
ELEMENTOS DE HTML
Los elementos son los componentes fundamentales de HTML. Estos
elementos tienen estas partes básicas: las etiquetas (de apertura y
cierre), los atributos y el contenido.
ADMINISTRACIÓN
SISTEMAS
INFORMÁTICOSRED
ELEMENTOS DE HTML
Los elementos son los componentes fundamentales de HTML. Estos
elementos tienen estas partes básicas: las etiquetas (de apertura y
cierre), los atributos y el contenido.
HTML clasifica a los elementos en:
ADMINISTRACIÓN
• Elementos de bloque: Empiezan en una nueva línea y ocupan
SISTEMAS
todo el espacio hasta el final de la línea, aunque su contenido no
ocupe todo el espacio. De este tipo son entre otros: h1, p, div, hr,
INFORMÁTICOSRED
table, ul, ol, fieldset, etcétera.
• Elementos de línea: No empiezan en una nueva línea y sólo
ocupan el espacio necesario para mostrar su contenido. De este
tipo son entre otros: a, img, input, label, textarea, select, etcétera.
• Hay elementos que no son ni de bloque ni de línea, como son los
subordinados. Por ejemplo: legend, li, etcétera.
Los elementos en línea pueden ser contenido de elementos en
bloque, pero
no al revés.
XHTML
XHTML (eXtensible HyperText Markup Language) aparece en 1998
con el objetivo de mejorar las deficiencias que tenía HTML,
añadiendo las ventajas del nuevo (en aquél momento) lenguaje
XML.
XHTML es un lenguaje que está formado por los mismos elementos
ADMINISTRACIÓN
del lenguaje HTML (versión 4) y que se ajusta a las normas del
lenguaje XML. SISTEMAS
INFORMÁTICOSRED
ESTRUCTURA DE UN DOCUMENTO XHTML
Los documentos xhtml, al igual que los documentos html son
ficheros de texto plano cuyo nombre tiene la extensión .html.
<!DOCTYPE … > ADMINISTRACIÓN
<html>
<head>
SISTEMAS
INFORMÁTICOSRED
<title>Título de la página</title>
Elementos de la cabecera
</head>
<body>
Contenido del cuerpo
</body>
</html>
ESTRUCTURA DE UN DOCUMENTO XHTML
La estructura de los documentos HTML y XHTML, son idénticas, con
la diferencia que en XHTML todas las partes del documento son
obligatorias, mientras que en HTML, son opcionales.
ADMINISTRACIÓN
SISTEMAS HTML XHTML
Etiqueta
INFORMÁTICOSRED
<!DOCTYPE … >
<html> … </html>
OPCIONAL OBLIGATORIO
OPCIONAL OBLIGATORIO
<head> … </head> OPCIONAL OBLIGATORIO
<title> … </title> OPCIONAL OBLIGATORIO
<body> … </body> OPCIONAL OBLIGATORIO
NORMAS DE XHTML
Para que un documento XHTML esté bien formado debe seguir una
serie de normas, heredadas de XML.
ADMINISTRACIÓN
• Los nombres de las etiquetas y atributos deben ir en minúsculas.
• SISTEMAS
Todas los elementos deben cerrarse, incluso los elementos vacíos.
• INFORMÁTICOSRED
Al anidar etiquetas, éstas deben cerrarse en orden inverso a
como se abrieron.
• El valor de los atributos, deben ir entrecomillados, ya sea de
forma simple o doble.
• Todos los atributos deben tener un valor.
NORMAS DE XHTML
Los nombres de las etiquetas y atributos deben ir en minúsculas,
excepto el <!DOCTYPE >.
EJEMPLO
ADMINISTRACIÓN
XHTML COMENTARIO
<P> SISTEMAS
Incorrecto. Es incorrecto en XHTML, aunque correcto en HTML.
Hola Mundo.
</P>
INFORMÁTICOSRED
<p> Correcto. Es correcto tanto en XHTML, como en HTML.
Hola Mundo.
</p>
NORMAS DE XHTML
Todas los elementos deben cerrarse, incluso los elementos vacíos.
En este caso, se puede utilizar la forma abreviada, que consiste en
poner al final del nombre de la etiqueta de apertura /. De esta
forma no es necesario la etiqueta de cierre
ADMINISTRACIÓN
EJEMPLO SISTEMAS
XHTML COMENTARIO
<br> INFORMÁTICOSRED
Incorrecto. Es incorrecto en XHTML, aunque correcto en
HTML.
<br></br> Correcto. Correcto tanto en XHTML, como en HTML.
<br/> Correcto. Correcto tanto en XHTML, como en HTML.
Utiliza la forma abreviada (Recomendada).
NORMAS DE XHTML
Al anidar etiquetas, éstas deben cerrarse en orden inverso a como
se abrieron.
EJEMPLO
<p>
ADMINISTRACIÓN
XHTML COMENTARIO
Incorrecto. Es incorrecto en XHTML, correcto en HTML.
Párrafo con SISTEMAS
INFORMÁTICOSRED
<a ref='[Link]'>un
enlace
</p></a>
<p> Correcto. Correcto tanto en XHTML, como en HTML.
Párrafo con
<a ref='[Link]'>un
enlace</a>
</p>
NORMAS DE XHTML
El valor de los atributos, deben ir entrecomillados, ya sea de forma
simple o doble.
EJEMPLO
<p>
ADMINISTRACIÓN
XHTML COMENTARIO
Incorrecto. Es incorrecto en XHTML, correcto en HTML.
Párrafo con SISTEMAS
INFORMÁTICOSRED
<a ref=[Link]>un enlace
</p></a>
<p> Correcto. Correcto tanto en XHTML, como en HTML.
Párrafo con
<a ref='[Link]'>un
enlace</a>
</p>
NORMAS DE XHTML
Todos los atributos deben tener un valor, incluidos los atributos
minimizados. En este caso se pone como valor el nombre del
atributo.
EJEMPLO
ADMINISTRACIÓN
<option value='1‘ selected>
XHTML
Incorrecto.
COMENTARIO
Es incorrecto en XHTML, correcto
Uno SISTEMAS en HTML.
INFORMÁTICOSRED
</option>
<option value='1' selected='selected'> Correcto. Correcto tanto en XHTML, como
Uno en HTML.
</option>