UNIDAD 2
HTML y XHTML. Lenguajes para la WEB
Contenidos teóricos
Índice
1. Objetivos generales de la unidad
2. Competencias y contribución en la unidad
3. Contenidos conceptuales y procedimentales
4. Evaluación
5. Distribución de los contenidos
6. Sesiones
3
1. Objetivos generales de la unidad
Objetivos curriculares
[Link] los lenguajes de marcas 2. Analizar la estructura de un
relacionados con la WEB. documento HTML.
3. Dominar las etiquetas que pueden formar
4. Diferenciar documentos HTML,
parte de la cabecera y cuerpo de un
XML y XHTML.
documento HTML
5. Comprender la estructura y utilidad de documento XHTML.
4
2. Competencias y contribución en la unidad
h)Desarrollar interfaces
gráficos de usuario
Mediante el estudio y manejo
interactivos y con la
de HTML.
usabilidad adecuada,
Su estructura, elementos de
empleando componentes
cabecera y cuerpo, a partir de
visuales estándar o
los cuales se construirá el
implementando
aspecto gráfico de la web.
componentes visuales
específicos.
5
3. Contenidos
CONTENIDOS CONCEPTUALES CONTENIDOS PROCEDIMENTALES
• Conocer los elementos de la estructura básica de un
• Componentes Básicos.
Elementos básicos documento HTML: <html>, <head>, <body>
• Estructura Global.
de HTML • Aprender a hacer comentarios de código en un documento
• Comentarios.
HTML.
• Dominar las etiquetas HTML correspondientes a la cabecera:
<title>, <base>, <meta>, <link>, <script>, <style>.
Estructura del • Contenido de la • Basándose en HTML5, conocer la estructura del cuerpo del
cabecera. documento: <header>, <nav>, <section>, <aside>, <footer>,
documento y • Estructura del cuerpo. <article>, <hgroup>, <figure> y <figcaption>.
contenido. • Contenido del cuerpo. • Controlar los diferentes elementos que pueden incluirse en
secciones HTML: listas, imágenes, enlaces, tablas, objetos
multimedia, formularios, etc.
6
3. Contenidos
CONTENIDOS CONCEPTUALES CONTENIDOS PROCEDIMENTALES
• Estructura y elementos • Diferenciar entre HTML, XML y XHTML.
XHTML del documento. • Conocer la estructura, elementos y normas de un documento
• Normas en XHTML XHTML.
7
4. Evaluación
Se han identificado y clasificado los lenguajes de Se ha analizado la estructura de un documento
marcas relacionados con la web y sus diferentes HTML e identificado las secciones que lo
versiones. componen.
Se han reconocido la funcionalidad de las
Se han establecido las semejanzas y diferencias
principales etiquetas y los atributos del lenguaje
entre los lenguajes HTML y XHTML.
HTML.
Se ha reconocido la utilidad de XHTML en los Se han utilizado herramientas en la creación de
sistemas de gestión de información. documentos web.
8
Sesiones 1 y 2. Contenidos teóricos
1. HTML. HyperText Markup Language
EVOLUCIÓN HISTÓRICA
• Aparece a principios de los noventa para mejorar la colaboración entre físicos e investigadores de la
energía nuclear. Lo desarrolló Tim Berners Lee con el objetivo de enlazar documentos mediante links
(hipervínculos).
• El primer documento formal, llamado 'HTML tags', se publica en 1991 en una versión con muchas
limitaciones.
• En 1993, la versión HTML 1.2 fue un primer intento de especificación. Sin embargo, el primer estándar
oficial reconocido es HTML 2.0, publicado en 1995 por el organismo IETF (Internet Engineering Task
Force).
• La organización W3C publica en 1997 la versión HTML 3.2 y es, desde entonces, el organismo oficial para
publicar estándares. Esta versión incluye tablas y applets de Java.
9
Sesiones 1 y 2. Contenidos teóricos
1. HTML. HyperText Markup Language
EVOLUCIÓN HISTÓRICA
• La versión 4.0 que aparece en 1998, incluye muchas mejoras entre las que destacan el soporte para
lenguajes script y la aparición de hojas de estilo. Surge también, este mismo año, la primera
especificación de XML.
• En el año 2000 se publica XHTML 1.0. Es una reformulación de HTML 4.0 basada en XML. W3C siguió
trabajando por esta línea hacia XHTML 2.0 que ya no era compatible con HTML, ni siquiera con XHTML
1.0.
• En 2003 aparecieron los XFORMS (formularios XHTML) que despertaron, de nuevo, interés por HTML.
• En 2004, empresas como Apple y Mozilla crean el grupo WHATWG con el objetivo de continuar el
desarrollo de HTML.
• En 2007 W3C y WHATWG se unen para desarrollar HTML5 cuyo primer borrador se publica en 2008.
10
Sesiones 1 y 2. Contenidos teóricos
1. HTML. HyperText Markup Language
ESTRUCTURA DEL DOCUMENTO
<!DOCTYPE>
En primer lugar es necesario indicar el tipo
de documento que estamos creando. En
HTML5 es tan sencillo como:
<!DOCTYPE html>
Esta línea debe ser la primera del archivo,
sin espacios ni líneas que la precedan.
11
Sesiones 1 y 2. Contenidos teóricos
1. HTML. HyperText Markup Language
ESTRUCTURA DEL DOCUMENTO
<HTML></HTML>
La estructura en árbol de este lenguaje tiene su raíz en el elemento HTML.
• ATRIBUTOS: dir, lang.
dir: indica el sentido de lectura del texto cuando no corresponde al habitual (árabe). Valores: ltr
(izquierda a derecha) y rtl (derecha a izquierda).
lang: indica el idioma por defecto del
documento. Valores: de (alemán), en (inglés),
es (español), fr (francés), etc.
• CONTENIDO: <head>, <body>
12
Sesiones 1 y 2. Contenidos teóricos
1. HTML. HyperText Markup Language
ESTRUCTURA DEL DOCUMENTO
<!– Comentarios -->
No se pueden anidar y sirven para incluir indicaciones sobre el código que no serán interpretadas por el
navegador.
13
Sesiones 1 y 2. Contenidos teóricos
1. HTML. HyperText Markup Language
ESTRUCTURA DEL DOCUMENTO
<HEAD>
Delimita la cabecera de un documento
• ATRIBUTOS: dir, lang, profile.
profile: indica dónde están los perfiles para interpretar los elementos meta
• CONTENIDO: <title>, <base>, <meta>, <link>, <object>, <script> y <style>
<title>: indica el nombre del sitio Web en la pesataña del navegador. Atributos: lang, dir.
<base>: especifica la dirección raíz del sitio web. Es útil para resolver direcciones relativas. Atributos:
href. Ejemplo:
<base href:"[Link]
14
Sesiones 1 y 2. Contenidos teóricos
1. HTML. HyperText Markup Language
ESTRUCTURA DEL DOCUMENTO
<HEAD>
• CONTENIDO: <title>, <base>, <meta>, <link>, <object>, <script> y <style>
<meta>: incluye propiedades genéricas del documento: autor, descripción, herramienta utilizada,
etc. Atributos:
name: indica el nombre de una propiedad. A pesar de no haber una lista oficial, se pueden citar
algunos valores comúnmente utilizados: abstract, autor, copyright, date, generator, description,
distribution, locality, rating, revist-after, robots, google-site-verification, organization, Keywords,
etc.
content: contiene el valor de la propiedad indicada por name.
<meta name="autor" content="Patricia Santos">
15
Sesiones 1 y 2. Contenidos teóricos
1. HTML. HyperText Markup Language
ESTRUCTURA DEL DOCUMENTO
<HEAD>
• CONTENIDO: <title>, <base>, <meta>, <link>, <object>, <script> y <style>
<meta>: incluye propiedades genéricas del documento: autor, descripción, herramienta utilizada,
etc. Atributos:
http-equiv: ejercen cierto control sobre los navegadores. Atributos: cache-control, content-type,
set-cookie, content-disposition, pics-label, pragma, refresh, resource-type, content-script-type,
content-style-type, Windows-target.
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-15">
scheme: indica al navegador como interpretar metadatos.
<meta scheme="Europe" name="date" content="24-10-2017"> Especifica que la fecha se
leerá según el perfil Europe, es decir dd-mm-aaaa
16
Sesiones 1 y 2. Contenidos teóricos
1. HTML. HyperText Markup Language
ESTRUCTURA DEL DOCUMENTO
<HEAD>
• CONTENIDO: <title>, <base>, <meta>, <link>, <object>, <script> y <style>
<link>: define un vínculo a otro documento. Atributos:
charset: establece el conjunto de caracteres que se utilizan.
href: indica la dirección del documento vinculado.
hreflang: indica el lenguaje del documento vinculado.
type: indica el tipo de contenido del documento vinculado (text/html, text/css, image/png,
video/mpeg, etc.).
rev: indica el vínculo inverso: desde el destino al origen.
media: especifica el medio al que se refieren los datos de estilo en el documento destino.
rel: establece la relación entre los documentos origen y destino. Valores básicos para este
atributo son: stylesheet, alternate, start, next, prev, contents, index, glossary, copyright, etc.
17
Sesiones 1 y 2. Contenidos teóricos
1. HTML. HyperText Markup Language
ESTRUCTURA DEL DOCUMENTO
<HEAD>
• CONTENIDO: <title>, <base>, <meta>, <link>, <object>, <script> y <style>
<script>: para insertar un script en el documento. Atributos:
type: lenguaje de programación en que se escribe el script.
src: URI donde se encuentra el script (si es externo).
<script type="text/javascript"> … </script>
<script type="text/javascript" src="/js/[Link]"></script>
<script type="text/javascript" src="[Link]
18
Sesiones 1 y 2. Contenidos teóricos
1. HTML. HyperText Markup Language
ESTRUCTURA DEL DOCUMENTO
<HEAD>
• CONTENIDO: <title>, <base>, <meta>, <link>, <object>, <script> y <style>
<style>: para insertar una hoja de estilo en el documento. Atributos:
type: tipo d elenguaje de estilos, normalmente "text/css".
media: a qué se dirige la información, por defecto "screen".
title: describe la información de estilo.
<style type="text/css">
body {
margin-left:40px;
margin-top:40px;
margin-right:40px;
}
</style>
19
Sesión 3. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
20
Sesión 3. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
<h1 | h2 | h3 | h4 | h5 | h6>
Seis etiquetas que sirven para establecer encabezados.
21
Sesión 3. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
<p>
Se utiliza para indicar los
diferentes párrafos del texto, al
igual que en un documento en
papel.
Todo el texto que se incluya en
la web que no sea un
encabezado, lista o forme parte
de una celda en una tabla debe
ir encerrado en esta etiqueta.
22
Sesión 3. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
<br>
Si queremos insertar en nuestra web varios espacios en blanco entre dos palabras y utilizamos la barra
espaciadora, estos espacios serán ignorados por el navegador y no conseguiremos nuestro objetivo. Para
ello será necesario incluir el carácter (no-break space).
Por otra parte, en algunas ocasiones queremos incluir un salto de línea dentro del mismo párrafo. En este
caso se utiliza <br> para introducir un retorno de carro explícito. Esta etiqueta no funciona en pareja.
<hr>
Esta etiqueta, que tampoco funciona en pareja, se utiliza, también, para separar texto. En este caso,
mediante la utilización de una línea horizontal.
23
Sesión 3. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
<b> <i> <big> <small> <s> <tt> <u>
• <b>: negrita, <i>: cursiva
• <big>: tamaño grande, <small>: tamaño pequeño
• <s> y <stricke>: tachado mediante una línea a media altura.
• <tt>: texto con apariencia de teletipo.
• <u>: subrayado
<font>
Para establecer tamaño, color y tipo de letra de la fuente.
Se encuentra en desuso debido a que las hojas de estilo ofrecen muchas más posibilidades.
24
Sesión 3. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
<pre>
Con esta etiqueta el navegador visualizará el
texto tal y como aparece. Respetará espacios y
etiquetas entre otros.
25
Sesión 4. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
LISTAS
26
Sesión 4. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
LISTAS
27
Sesión 4. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
LISTAS
28
Sesión 4. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
LISTAS
29
Sesiones 5 y 6. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
TABLAS <table>
ATRIBUTOS
• summary: resumen del contenido y estructura de la tabla.
• width: ancho de la tabla en pixeles o porcentaje.
• frame: especifica qué lados de la tabla serán visibles.
• rules: especifica qué líneas de división entre celdas serán
visibles.
• border: ancho del borde exterior en px.
• cellspacing: espacio entre celdas.
• cellpadding: espacio entre el borde de una celda y su contenido.
30
Sesiones 5 y 6. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
TABLAS <table>
31
Sesiones 5 y 6. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
TABLAS <table> Combinar celdas
• COLSPAN indica el número de columnas que ocupa la celda.
• ROWSPAN indica el número de filas que ocupa la celda.
32
Sesiones 5 y 6. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
TABLAS <table> Tablas con cabecera <TH>
33
Sesiones 5 y 6. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
TABLAS <table>
34
Sesiones 5 y 6. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
TABLAS <table>
35
Sesiones 5 y 6. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
TABLAS <table> Dimensionado de celdas
36
Sesiones 5 y 6. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
TABLAS <table> Dimensionado de celdas
37
Sesiones 5 y 6. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
TABLAS <table> Diseño y tamaño de tablas
38
Sesiones 5 y 6. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
TABLAS <table> Diseño y tamaño de tablas
39
Sesión 7. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
ENLACES <a>
Ya que inspiraron el desarrollo de HTML, los enlaces son los elementos más característicos del mismo. El
elemento <a> sirve para identificar tanto el inicio como el destino de un hipervínculo. Entre sus atributos se
encuentran:
• name: marcador para nombrar el destino del hipervínculo.
• href: especifica la URI destino del hipervínculo
• shape: indica la forma de la imagen que contiene el hipervínculo.
40
Sesión 7. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
ENLACES <a>
• Si el destino se encuentra en el mismo documento se antepondrá al nombre de la sección el símbolo
almohadilla (#): <a href="#A">
• Si el destino es otro documento se indicará la URI (relativa o absoluta:
<a href="[Link]"> - <a href="[Link]
• Si el destino es una sección dentro de otro documento, se mezclarán los dos métodos anteriores: <a
href="[Link]#A">
41
Sesiones 8 y 9. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
BLOQUES <div>
Crea un bloque que agrupa diferentes elementos. De este modo se les puede asignar un nombre común y
un estilo.
• name: marcador para nombrar el destino del hipervínculo.
• href: especifica la URI destino del hipervínculo
• shape: indica la forma de la imagen que contiene el hipervínculo.
42
Sesiones 8 y 9. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
BLOQUES <div>
43
Sesiones 8 y 9. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
BLOQUES <div>
44
Sesiones 8 y 9. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
ELEMENTOS EN LÍNEA <span>
Con él se permite asignar diferentes estilos a elementos que se encuentran en la misma línea.
45
Sesiones 8 y 9. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
IMAGEN <img>
Para insertar una imagen. ATRIBUTOS:
• src: directorio donde se encuentra la imagen.
• alt: texto que describe la imagen (se verá si ésta no se puede visualizar).
• height, width: altura y ancho respectivamente (el navegador modificará el tamaño original de la imagen
con la que se está trabajando).
46
Sesiones 8 y 9. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
MAPAS DE IMÁGENES <map> <area>
Con la etiqueta <map> se crea un mapa de imágenes del lado del cliente y con la etiqueta <area> se
especifica una región geométrica del mapa y el vínculo asociado a esa región.
• El atributo shape de la etiqueta área especifica el tipo de región: rectángulo, círculo u otro polígono
(rect, circle y poly).
• Mediante el atributo coords se establecen las coordenadas de dicho área.
47
Sesiones 8 y 9. Contenidos teóricos
2. HTML. ESTRUCTURA DEL CUERPO
MANEJO DEL TEXTO
MAPAS DE IMÁGENES <map> <area>
48
Sesiones 10 y 11. Contenidos Teóricos
2. HTML. ESTRUCTURA DEL CUERPO
FORMULARIOS
HTML surgió para mostrar información al cliente y no para que el usuario enviase datos al servidor. Este
requisito ganó fuerza, con el tiempo, surgiendo los formularios.
Cabe destacar que únicamente sirven para recabar información y que el tratamiento de la misma se lleva a
cabo mediante algún lenguaje de programación (Perl, ASP, PHP, etc.).
49
Sesiones 10 y 11. Contenidos Teóricos
2. HTML. ESTRUCTURA DEL CUERPO
FORMULARIOS <FORM>
Es la etiqueta principal para insertar un formulario. Puede contener otras como <input>, <button>,
<select>, <option>, <optgroup> y <textarea>.
Atributos:
• action: indica la URI del programa que tratará los datos del formulario.
• method: método utilizado para enviar los datos al programa (GET|POST).
• accept: lista de tipos de contenidos que acepta el servidor.
• onsubmit: para ejecutar alguna acción cuando se envía el formulario.
• onreset: para ejecutar alguna acción cuando se resetea el formulario.
50
Sesiones 10 y 11. Contenidos Teóricos
2. HTML. ESTRUCTURA DEL CUERPO
FORMULARIOS <input>
Incluye un elemento dentro de un formulario. El tipo de elemento se define por el atributo type que puede
tomar valores clásicos como: text, password, checkbox, radio, submit, reset, file, hidden, image, button.
HTL5 incluye otros nuevos como: search, number, range, time, url, email, date y datetime. Otros atributos
son:
• name: nombre del elemento.
• size: ancho del elemento.
• maxlenght: si es de tipo texto o password, indica el máximo de caracteres.
• checked: si el control es de tipo checkbox o radio, marca la casilla.
• src: si es tipo image, indica la URI donde se encuentra.
• disabled: deshabilita el elemento para que no se pueda introducir información.
• readonly: impide que el usuario modifique el control.
• accpet: para subir ficheros, los tipo MIME válidos.
• value: valor inicial que aparece en el control si es un cuadro de texto.
51
Sesiones 10 y 11. Contenidos Teóricos
2. HTML. ESTRUCTURA DEL CUERPO
FORMULARIOS <input>
52
Sesiones 10 y 11. Contenidos Teóricos
2. HTML. ESTRUCTURA DEL CUERPO
FORMULARIOS <input>
53
Sesiones 10 y 11. Contenidos Teóricos
2. HTML. ESTRUCTURA DEL CUERPO
FORMULARIOS <button>
Como hemos visto previamente, a través de la etiqueta input se pueden añadir botones a un formulario,
¿Para qué se utiliza entonces la etiqueta <button>?
Su utilización difiere de la anterior en que con ella contamos con más posibilidades de formato. Un ejemplo
de ello es la inclusión de imágenes dentro del propio botón.
54
Sesiones 10 y 11. Contenidos Teóricos
2. HTML. ESTRUCTURA DEL CUERPO
FORMULARIOS <select> <option>
Sirve para insertar un menú con varias opciones. Entre sus
atributos destacan size, que especifica el número de filas que
se ven a la vez y multiple, booleano que permite una selección
múltiple de opciones.
55
Sesiones 10 y 11. Contenidos Teóricos
2. HTML. ESTRUCTURA DEL CUERPO
FORMULARIOS <textarea>
Se utiliza para insertar un cuadro de entrada de texto con varias líneas. Destacan atributos como rows,
indica el número de líneas de texto visibles y cols, indica el ancho del cuadro (en caracteres).
FORMULARIOS <label>
Asigna un título a un control. Su atributo for especifica el nombre del control al que corresponde (debe
coincidir con el atributo id de dicho elemento).
56
Sesiones 10 y 11. Contenidos Teóricos
2. HTML. ESTRUCTURA DEL CUERPO
FORMULARIOS <fieldset> <legent>
• fieldset: Agrupa controles y sus títulos por temas.
• legent: asigna un rótulo a un fieldset.
57
Sesiones 12 y 20. Contenidos Teóricos
2. HTML. ESTRUCTURA DEL CUERPO
OBJETOS MULTIMEDIA <OBJECT> <PARAM>
• La etiqueta <object> puede corresponder con imágenes, vídeos, animaciones flash, etc. Su tipo se
determina según el valor de sus atributos.
• Por otra parte, la etiqueta <param> se utiliza para inicializar las variables de los elementos tipo <object>.
La lista de parámetros de un objeto dependerá de su tipo.
58
Sesiones 12 y 20. Contenidos Teóricos
2. HTML. ESTRUCTURA DEL CUERPO
OBJETOS MULTIMEDIA <OBJECT> <PARAM>
INSERTAR UN VÍDEO DE YOUTUBE
En la imagen de la derecha se muestra qué
podremos ver haciendo "click" en el botón compartir
en un vídeo en youtube.
Si queremos agregar el vídeo a nuestra página web,
bastará con copiar ese código.
59
Sesiones 12 y 20. Contenidos Teóricos
2. HTML. ESTRUCTURA DEL CUERPO
OBJETOS MULTIMEDIA <OBJECT> <PARAM>
INSERTAR UN PLUGIN SOCIAL
• Si se pretende insertar un botón "Me gusta" de Facebook, debemos consultar en la web
[Link]
(Iniciar sesión → Social Plugins → Like Button)
• De forma similar, se puede agregar el botón +1 de google, si se consulta
[Link]
• Para los botones de twitter la página de sus desarrolladores es: [Link]
60
Sesiones 12 y 20. Contenidos Teóricos
2. HTML. ESTRUCTURA DEL CUERPO
OBJETOS MULTIMEDIA <VIDEO> <AUDIO>
Estas etiquetas se incluyen en HTML5. <VIDEO> sirve para insertar un vídeo o animación. Entre sus
atributos destacan:
• src: URL del vídeo a reproducir.
• poster: muestra una imagen mientras que el vídeo no esté disponible.
• autoplay: booleano que indica si la reproducción del vídeo será automática.
• loop: booleano que indica la repetición automática del vídeo.
• controls: booleano que indica al navegador que muestre controles al usuario.
Los tipos de vídeos utilizados más habitualmente son ogg (ogv, oga…), mp4 (mp4, m4v, 3gp…) y matroska
(mkv, mka, mks…).
Por otra parte, la etiqueta <AUDIO> permite insertar en el documento un archivo de sonido. Entre sus tipos
más habituales se encuentran mp3 y wav.
61
Sesiones 12 y 20. Contenidos Teóricos
3. XHTML
El objetivo de XHTML fue mejorar las deficiencias que tenía HTML incluyéndole las ventajas con las que
contaba XML. De este modo, cuenta con las mismas etiquetas que HTML pero se ajusta a las normas del
segundo lenguaje.
Además, puede incorporar elementos de otros espacios de nombres como MathML y SVG, lo cual, permite
construir documentos cono contenido científico o gráficos vectoriales, de una forma más sencilla.
62
Sesiones 12 y 20. Contenidos Teóricos
3. XHTML
NORMAS XHTML
• Todas las etiquetas y atributos se escriben en minúsculas.
<HEAD> <head>
<TITLE>Ejemplo</TITLE> <title>Ejemplo</title>
</HEAD> </head>
• Todos los elementos deben cerrarse, hasta los individuales vacíos.
<br> <br />
<img src="[Link]"> <img src="[Link]" />
63
Sesiones 12 y 20. Contenidos Teóricos
3. XHTML
NORMAS XHTML
• Todos los valores de atributos deben estar entre comillas (simples o dobles)
<table width=600> <table width=“600">
… …
</table> </table>
• Todos los atributos deben tener un valor.
<input type="checkbox" id="publi" <input type="checkbox" id="publi"
value="si" checked> value="si" checked="checked">
64