You are on page 1of 34

I.E.S.

Suárez de Figueroa
@vanza
C.F.G.S. Administración de Sistemas Informáticos en Red
Módulo "Lenguaje de Marcas y Sistemas de Gestión de la Información"

Unidad 2. Utilización de lenguajes de marcas en entornos web.

1. Del HTML al XHTML: evolución y versiones.
HTML es un lenguaje de marcas, utilizado para crear la mayor parte de las páginas
webs. Es un estándar reconocido en todos los navegadores, por lo tanto, todos ellos visualizan
una página HTML de forma muy similar independientemente del sistema operativo sobre el
que se ejecutan.

La evolución de sus versiones, desde su creación hasta la creación del XHTML podemos
verla a continuación.

El origen de HTML fue un sistema de hipertexto para compartir documentos electrónicos
en 1980. La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993.
Aunque ninguna de las dos propuestas de estándar que se hicieron (HTML y HTML+)
consiguieron convertirse en estándar oficial. Después vino el siguiente desarrollo:

 HTML 2.0 fue la primera versión oficial de HTML. El IETF publicó el estándar en
septiembre de 1995.

 HTML 3.2 se publicó el 14 de Enero de 1997 por el W3C. Incorpora los applets de Java
y texto alrededor de las imágenes.

 HTML 4.0 se publicó el 24 de Abril de 1998. Entre las novedades que presenta se
encuentran las hojas de estilos CSS y la posibilidad de incluir pequeños programas en
las páginas webs.

 HTML 4.01 se publicó el 24 de diciembre de 1999. Es una actualización de la versión
anterior. En ese momento el W3C detuvo la actividad de estandarización de HTML
hasta marzo de 2007, momento en que se retoma debido a la fuerza de las empresas
que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, que
será la siguiente versión de este lenguaje.

 HTML 5.0 se utilizó como borrador durante varios años, pero no se publicó hasta el 28
de octubre de 2014, fecha en la que finalmente el W3C lo aceptó. Esta versión elimina
algunos elementos o etiquetas (obsoletos o "deprecated"), añade otros y algunos
otros los modifica, respecto a la versión anterior.

Tras la publicación del estándar HTML 4.01 se detecta su incompatibilidad con
herramientas basadas en XML. Para evitar estos problemas se crea lenguaje XHTML, que
combina la sintaxis de HTML 4.0 con la de XML. Se puede decir que XHTML es una versión más
estricta de HTML. XHTML pretende combinar la sintaxis HTML para mostrar datos, con la
sintaxis de XML para describir los datos.

 XHTML 1.0 fue la primera versión, se publicó el 26 de Enero de 2000. Es una
adaptación de HTML 4.01 al lenguaje XML, por lo que mantiene sus características y
añade algunas restricciones y elementos de XML.

 La versión XHTML 1.1, del 31 de mayo de 2001, añade el concepto de modularización
al XHTML 1.0, es decir que permite el uso de módulos o componentes.

 El grupo de trabajo de desarrollo de XHTML 2.0 se disolvió antes de finalizar
completamente su trabajo; por ello, lo que se ha publicado de esta versión es un
borrador, que presenta importantes modificaciones respecto a la versión anterior.

Los distintos navegadores actuales siguen reconociendo y mostrando correctamente
páginas webs creadas con versiones de HTML anteriores a la 5. Por ejemplo, el elemento <font
...> ya no existe en HTML5, sin embargo los navegadores lo siguen reconociendo e
interpretando correctamente.

Nosotros sólo podremos utilizar estrictamente los elementos (etiquetas) de HTML5 y
para comprobar si una página está bien creada utilizaremos el validador HTML de W3C. Esto
quiere decir que aunque una página se muestre bien en un navegador, puede que la página no
sea correcta, por utilizar elementos (etiquetas) que ya no corresponden al HTML5 (elementos
obsoletos). Por tanto, si en un página se utiliza por ejemplo la etiqueta <font...> no será
correcta.

2. Documento HTML.

2.1. Edición y validación de un documento HTML.
Al igual que XML, para escribir código HTML se puede utilizar cualquier editor de texto,
pero existen programas que aportan ciertas ayudas en esta tarea. Uno de ellos es el editor
Notepad++, de licencia libre. Puedes descargarlo de http://notepad-plus-plus.org. Este editor
colorea las distintas etiquetas, hace sugerencias al iniciar la escritura de elementos, añade los
espacios por la izquierda para ordenar el código, etc. Para aprovechar esas características, al
comenzar al escribir el código HTML, debe guardarse con la extensión .html pulsando en
Archivo - Guardar como. Una vez guardado, el archivo puede abrirse con un navegador web
para ver el resultado. Esto puede hacerse sin salir del Notepad++, en la opción "Ejecutar" del
menú superior.

Nosotros usaremos el programa "XML Copy Editor", que puede descargarse de
http://xml-copy-editor.sourceforge.net de forma gratuita (licencia GNU). Además de ofrecer
un editor de código, también permite comprobar si el fichero .html es correcto
sintácticamente, es decir si está "Bien-Formado" (well-formed) en cuanto a la estructura XML
(un documento HTML debe cumplir la sintaxis XML), pulsando en la marca azul.

- Marca azul de la izquierda: "Comprobar Bien-Formado".
- Marca verde de la derecha: "Validar" (de momento no la usamos).

Un documento guardado con la extensión .html podrá abrirse con un navegador web
para ver el resultado.

Como hemos indicado antes, para comprobar si un documento cumple la norma
HTML5 usaremos el validador HTML de W3C. Una página puede mostrarse bien en el
navegador, aun siendo incorrecta. Para asegurarnos si es correcta debemos pasar la página por
dicho validador.

El validador de W3C es: http://validator.w3.org/

En ese validador, en el apartado "More Options" debemos elegir en el campo
"Document Type" o "Doctype" la opción "HTML5 (experimental)", para asegurarnos que es la
versión 5 la que utilizará para validar. Si al validar no aparecen errores se debe a que el
documento es válido HTML5.

Este validador permite validar una dirección web (URI), un fichero que sea subido o un
código que se escriba directamente en el validador; para ello se usarán las pestañas superiores
"Validate by URI", "Validate by File Upload" o "Validate by Direct Input" respectivamente.
Nosotros usaremos sobre todo la última opción, "Validate by Direct Input", copiando
directamente nuestro código en la ventana correspondiente.

2.2. Estructura de un documento HTML.
Tanto XML como HTML tienen su origen en el lenguaje SGML, por lo que, aunque
presentan diferencias funcionales, la estructura del documento es semejante en ambos.

La estructura de una página HTML ha de ser coherente con la que hemos visto en el
tema anterior para cualquier documento XML. Por ello tendrá un prólogo y un ejemplar:

 Prólogo: Todo documento HTML ha de tener una declaración del tipo de documento
donde se le indica al navegador el tipo de documento que se va a iniciar y la versión de
HTML utilizada para la codificación del mismo y, además, le permite interpretarlo
correctamente.
Para la versión HTML 4.0, hay tres prólogos distintos que definen tres tipos de
documentos HTML:

o HTML 4.0 Strict. Es la DTD utilizada por defecto con HTML 4.0. En estos
documentos no se permite el uso de los elementos declarados deprecated
(obsoletos) en otras versiones o recomendaciones HTML. La declaración del
tipo de documento correspondiente es:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

o HTML 4.0 Transitional. Permite el uso de todos los elementos que permite el
HTML 4.0 Strict, además de los elementos deprecated. La declaración del tipo
de documento correspondiente es:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

o HTML 4.0 Frameset. Es una variante de HTML 4.0 Transitional para
documentos que usan frames. En estos documentos el elemento body hay que
reemplazarlo por un elemento frameset. La declaración del tipo de documento
correspondiente es:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">

o HTML 5. En HTML 5 esta etiqueta queda resumida respecto a las versiones
anteriores, del modo:

Esta información no se presentará en la ventana del navegador. la estructura general de un documento HTML podría expresarse como sigue: <!DOCTYPE html> <html> <head> <title>Título de la página</title> </head> <body> Contenido de la página </body> </html> Si se guarda ese código en un fichero con extensión . mientras que en HTML están predefinidos. para ello se usan las etiquetas <title> </title>. que contiene la información que se va a presentar en la pantalla. palabras clave. Contiene la información sobre el título de la página.html y ese fichero se abre con un navegador web se mostrará una página con la frase "Contenido de la página". Está limitado por las etiquetas <body> y </body>. Cada atributo tiene predefinido un conjunto de valores posibles. etc. delimitada por las etiquetas <head> y </head>. . salvo en los documentos de tipo HTML 4. o El cuerpo.0 Frameset donde éstas se sustituyen por <frameset> y </frameset>. "Título de la página" se mostrará en la barra superior (o pestaña) del navegador. el autor. la otra frase. Aunque HTML define una gran cantidad de etiquetas. Dentro de esta sección es obligatorio definir el título del documento. </etiqueta>. las etiquetas pueden ser de apertura. 3. Una de las diferencias con XML es que la cantidad de etiquetas de HTML está limitada a aquellas que están definidas por el lenguaje. Un documento HTML está formado por etiquetas y atributos. salvo el título que aparecerá en la barra de título de la parte superior. <!DOCTYPE html>  Ejemplar: En un documento HTML está delimitado por las etiquetas <html> y </html>. Si el valor de un atributo no es válido. Identificación de etiquetas y atributos de HTML. o de cierre. Como no es posible crear una etiqueta por cada elemento diferente. estas no son suficientes para crear páginas complejas. como las imágenes y los enlaces. El ejemplar puede a su vez dividirse en dos partes: o La cabecera. ya que la definición completa de ciertos elementos. el navegador lo ignora. requiere información adicional. se añade la información adicional a las etiquetas mediante los atributos dando lugar a los elementos. Por tanto. Al igual que en XML. <etiqueta>. En XML las etiquetas y los atributos los define el programador.

Sólo es útil cuando se trabaja con CSS y con Javascript. style = "texto" Permite aplicar al elemento HTML el estilo "texto" directamente. class = "texto" Permite aplicar al elemento HTML el estilo "texto" definido en las CSS. para un párrafo: <p name="parrafo1">Esto es un p&aacute. Éste será mostrado cuando se pase el ratón por encima del elemento en cuestión.1. números y guiones medios y bajos. Por ejemplo. de derecha a izquierda. veremos que esos atributos son necesarios para algunas tareas.</p> <p dir="rtl">Este texto se pega a la derecha de la ventana. 3. un párrafo escrito de izquierda a derecha y el siguiente de derecha a izquierda: <p dir="ltr">Este texto se pega a la izquierda de la ventana. title="titulo" Asigna un título a un elemento. de izquierda a derecha (es el valor por defecto). Se verá en detalle más adelante. El "identificador" no puede empezar por número y sólo puede contener letras.Atributos para internacionalización: los utilizan las páginas que muestran sus contenidos en varios idiomas o aquellas que quieren indicar de forma explícita el idioma de sus contenidos. Algunos de los valores posibles son: en Inglés (Gran Bretaña) en-US Inglés americano . Por ejemplo.rrafo con nombre</p> id="identificador" Asigna un identificador único a un elemento. Se verá en detalle más adelante. En función del elemento. o rtl (right to left). name="texto" Asigna el nombre "texto" a un elemento. no puede coincidir con otros id del documento HTML. Los posibles valores de este atributo se encuentran en el documento RFC 1766. dir="ltr" o dir="rtl" Indica la dirección del texto por lo que sólo puede tomar dos valores: ltr (left to right). No puede empezar por número y sólo puede contener letras. Ayuda a representar la información de la forma más adecuada para un idioma dado.</p> lang="codigo" Especifica el idioma del elemento mediante un código predefinido. aunque algunos de ellos son comunes a muchas etiquetas. . mientras que ltr lo ajusta a la izquierda. Cada etiqueta HTML define los atributos que puede utilizar. . El valor rtl ajusta el texto a la parte derecha.Atributos básicos: se pueden usar en casi todas las etiquetas HTML. Clasificación de los atributos comunes según su funcionalidad. números y guiones medios y bajos.

. sección <div>.  Una etiqueta de cierre. etc. Elementos HTML. no todas las etiquetas encierran texto. etc.es">Entrar</a>. Su contenido puede ser texto. <b>Texto en negrita.. un texto en negrita <b>.. Su contenido puede ser texto u otros elementos en línea (un elemento en línea dentro de otro).unapagina. Algunos elementos en línea son: un enlace o link <a . aunque sus contenidos no lleguen hasta el final.  Cero o más atributos. Algunos elementos de bloque son: párrafo <p>. el elemento que haya a continuación (sea en línea o de bloque) se mostrará en una nueva línea. <div>Este texto comenzará siempre en una nueva línea.</b> Todo ese texto se mostrará en la misma línea. Un elemento HTML está formado por:  Una etiqueta de apertura. se mostrarán ambos seguidos en la misma línea. elementos en línea u otros elementos de bloque. el atributo xml:lang tiene más prioridad que lang y es obligatorio incluirlo siempre que se incluye el atributo lang. el <b>. <a href="http://www.. incluido el enlace.<h1> Esto se mostrará en la línea siguiente y en grande por tener encabezado h1..2. Por tanto.  Elementos de bloque (block elements). Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. Tenemos un elemento en línea. es Español fr Francés fr-CA Francés de Canadá ja Japonés xml:lang="codigo" Especifica el idioma del elemento mediante un código definido según la recomendación RFC 1766.. En las páginas XHTML. una imagen <img . Sólo ocupan el espacio necesario para mostrar sus contenidos.>.</div> Veamos un caso concreto de elementos en línea y de bloque: <!DOCTYPE html> <html> <head> <title>Ejemplo: elementos en línea y de bloque</title> </head> <body> . es opcional. un texto en cursiva<i>.</h1> <b>Y esto aparecerá en otra nueva línea en negrita</b>. el link <a>.  Texto encerrado por la etiqueta. 3. encabezados <h1> . <h6>. Según el modo en que ocupan el espacio disponible en la página los elementos pueden ser de dos tipos:  Elementos en línea (inline elements). que incluye otro elemento en línea. Si a continuación de un elemento en línea hay otro elemento en línea.>. sigue en negrita.

</b> Existen elementos cuyo comportamiento puede ser en línea o de bloque según las circunstancias.</i> </body> </html> Al guardar ese código en un fichero con extensión . <title></title> Título de la página web: aparecerá en el borde superior de la ventana del navegador. La estructura básica de un documento viene determinada por las siguientes etiquetas: <html></html> Abre y cierra un documento HTML Es el ejemplar o elemento raíz. 3. Por ejemplo: <b>Esto está en negrita.</h1><p>Esto saldrá en la tercera línea <b>y esto en negrita sigue en la tercera línea</b>.html y abrirlo con el navegador.</p> Sigue texto en negrita. Comprueba la posición donde se muestra el título y el contenido. Permite definir formatos que se aplican a los elementos de la página de manera global. guárdalo en un archivo con extensión . Ejemplo 1: escribe el siguiente código con "XML Copy Editor".</p> <i>Esto se muestra en otra nueva línea. etiquetas meta e información para buscadores entre otras cosas.2. los márgenes.html y abre dicho archivo con un navegador web. Dentro de esta etiqueta va toda la parte visible de la página web. El navegador web lo mostrará sin errores. <head></head> Encabezado de la página: aquí se coloca titulo. <h1>Texto con encabezado h1. como son el color del fondo del texto. junto con <a href="http://www. pero el validador de W3C avisará del error. Valida el código para HTML5 con el validador de W3C. que dará error en el validador W3C. el color de los enlaces. etc.1. . en cursiva. Está información no es visible. se mostrará: Un elemento de bloque no puede estar dentro de un elemento en línea. Aparece en la segunda línea. Esta etiqueta se coloca dentro del elemento <head> anterior. <p>Esto es un elemento de bloque dentro de un elemento en línea.es"> este enlace</a>. Elementos sobre la estructura básica del documento.suarezdefigueroa. <body></body> Cuerpo del documento.Esta es la primera línea.

Ú &Uacute. í &iacute. <script></script> Permite insertar códigos script (como JavaScript). é &eacute. ó &oacute. É &Eacute. Elementos de la sección de cabecera.<!DOCTYPE html> <html> <head> <title>Título de la página</title> </head> <body> Contenido de la página </body> </html> La mejor manera de evitar problemas con las vocales con tilde y con la ñ es escribirlas en código nemotécnico (o entidad HTML).  Elementos no contenedores: <base> . Ó &Oacute. ñ &ntilde. Éstos son: Minúsculas Mayúsculas á &aacute. ú &uacute. la á se sustituye por &aacute. Por ejemplo. Ñ &Ntilde.2. que comienza por &. del modo: <body>Contenido de la p&aacute. <style></style> Estilo aplicado al documento utilizando CSS. en cualquier parte de un documento HTML puede insertarse un comentario con el mismo formato que en XML. es decir: <!-.comentario --> Los navegadores ignoran los comentarios. 3.2. Á &Aacute. Lo veremos más adelante.  Elementos contenedores: <title></title> Título de la página web: aparecerá en el borde superior de la ventana del navegador. Í &Iacute. Se coloca dentro de <head>.gina</body> Por otra parte. éstos son usados por el creador de la página web para dejar una explicación o información que puede ser útil para otra persona que lea el código HTML.

3. Esta línea viene después de una línea en blanco. etc. Esta línea viene después de una línea en blanco. <meta></meta> Permite indicar el tipo de codificación de nuestro documento. </pre> </body> El navegador respetará el formato y mostrará: Varios espacios en blanco seguidos en esta línea. El siguiente código: <body> Varios espacios en blanco seguidos en esta línea. <h1></h1> hasta <h6></h6> Encabezados (h de head): texto del más grande hasta el más pequeño.2. ni el espacio por la izquierda. Otra línea que comienza más a la derecha. Sin embargo. Otra línea que comienza más a la derecha. Indica el URI (la dirección) base del elemento. ni los saltos de línea. Esta etiqueta se usa normalmente para realizar la carga de hojas de estilo CSS. como veremos más adelante. Otra línea que comienza más a la derecha. Con el código siguiente: <body> . Elementos que dan formato al texto. Los distintos elementos que podemos utilizar para dar formato a nuestro texto son: <pre></pre> Texto pre-formateado. Esta línea viene después de una línea en blanco. Esta línea viene después de una línea en blanco. Otra línea que comienza más a la derecha. sin respetar varios espacios juntos. quedando: Varios espacios en blanco seguidos en esta línea. nombre. </body> El navegador mostrará ese texto seguido. autor. si se utiliza la etiqueta <pre> del modo: <body> <pre> Varios espacios en blanco seguidos en esta línea. información que agiliza la búsqueda del documento en buscadores. <link></link> Enlaces a documentos externos de librerías. 3.

4. . lo decide el navegador. soy yo</i></h1> <h6><b><u>Hola. <!DOCTYPE html> <html> <head> <title>Ejemplo 2</title> </head> <body> <h1><i>Hola.2. Elementos sobre formatos de presentación. Valida el código en W3C. soy yo" en el tamaño más grande en cursiva y en la siguiente línea en el tamaño más pequeño en negrita y subrayado. soy yo</u></b></h6> </body> </html> 3. <strong></strong> Negrita <sub></sub> Subíndice: xi se escribe con el código x<sub>i</sub> <sup></sup> Superíndice: x2 se escribe con el código x<sup>2</sup> Ejemplo 2: escribe un código para mostrar el texto "Hoya. con negrita o cursiva. <h1>Texto más grande</h1> <h6>Texto más pequeño</h6> </body> El navegador mostrará: <b></b> Negrita <u></u> Subrayado <i></i> Cursiva <cite></cite> Cursiva (cite viene de cita) <em></em> Resalta una palabra.

Aunque al escribirlo en el XML Copy Editor hemos puesto saltos de línea. es decir un párrafo es siempre rectangular (puede comprobarse en el segundo párrafo). Por ejemplo: Este párrafo tiene un color de fondo. como veremos más adelante). muestra todo el texto seguido. No se ha usado etiqueta de párrafo. porque el navegador muestra este texto a continuación del primero. <!DOCTYPE html> <html> <head> <title>Ejemplo 3</title> </head> <body> Este es el primer párrafo. por ejemplo el color de fondo (se aplica con CSS. Este sería el tercer párrafo. Por tanto todo este texto está en un mismo párrafo. Este NO es el segundo párrafo. se genera una espacio antes de comenzar el siguiente elemento. es decir entre <p> y </p>. sino que llega hasta los bordes de la ventana. escribe los códigos y muéstralos en el navegador. Aunque una línea acabe en mitad de la ventana. Este es el segundo párrafo. También vemos que al finalizar el párrafo. el párrafo llega siempre hasta el final. </body> </html> Resultado en el navegador. que puede ser otro párrafo. Cuando se cierra el párrafo (con </p>) automáticamente se inserta un salto de línea y además se añade un espacio de separación con el elemento siguiente que tenga la página. Ejemplo 3: uso de etiqueta <p> para insertar saltos de línea. Una ventaja de utilizar párrafos es que se podrán aplicar propiedades al párrafo completo. sin los saltos de línea escritos en el código HTML: <!DOCTYPE html> <html> <head> <title>Ejemplo 3</title> </head> <body> .<p></p> Inserta un nuevo párrafo. Valida los códigos en W3C. Un párrafo está formado por los elementos incluidos entre esas etiquetas. Puede verse que el párrafo no acaba donde finaliza el texto.

Esta etiqueta no necesita la pareja de cerrado. </body> </html> . porque al utilizar la etiqueta de párrafo aplica un cambio de párrafo y pasa a la siguiente línea.</p></body> </html> Resultado en el navegador. esto se tratará más adelante): <br/> Inserta un salto de línea. Ejemplo 4: <!DOCTYPE html> <html> <head> <title>Ejemplo 4</title> </head> <body> Esta frase la escribo en una línea. el navegador lo mostrará todo seguido en la misma línea. sino que se escribe como ahí se indica.<p>Este es el primer párrafo. Si se desea que un elemento se muestre en la siguiente línea debe utilizarse <br/> para saltar. es decir que además de cambiar de línea añade un espacio de separación con el siguiente párrafo. entre los párrafos queda un espacio. El navegador muestra estas tres líneas juntas. como un punto y aparte.</p> <p>Este SÍ es el segundo párrafo. con la / al final: <br/> Aunque al escribir el código se usen distintas líneas. Esta frase está en la segunda línea del código. el segundo párrafo tiene un color de fondo distinto del resto (está aplicado con style de CSS.</p> <p style="background-color: yellow">Este sería el tercer párrafo.

<!DOCTYPE html> <html> <head> <title>Ejemplo 4</title> </head> <body> Esta frase la escribo en una línea.<br/> Esta frase aparecerá en la segunda línea en el navegador. <q></q> Para insertar una cita. <dd></dd> Para indicar la definición del término. como un glosario.</q> Veamos las listas de definiciones. por lo que sí tendrá esa sangría. <dt></dt> Para indicar cada término de la lista de definición. Automáticamente se le inserta un espacio por la izquierda. <dl></dl> Lista de definiciones. Este texto no tiene espacio por la izquierda. desordenadas y listas de definición. </body> </html> <blockquote> </blockquote> Sangría o espacio por la izquierda. Una lista que incluye una serie de términos y cada uno de ellos lleva su definición. por lo que no tendrá esa sangría. Este texto sí tiene espacio por la izquierda. ya que he insertado un br o salto de línea. El navegador le añade las comillas al texto. está escrito sin las etiquetas blockquote. ya que en el código se ha escrito entre las etiquetas blockquote. <q>Este texto se mostrará entre comillas en el navegador. Hay tres tipos de listas: ordenadas. el navegador insertará saltos de línea en las posiciones donde haya etiqueta br. Se pueda aplicar a otros usos. <dl> <dt>Etiqueta p</dt> <dd>Inserta un párrafo</dd> <dt>Etiqueta br</dt> <dd>Inserta un salto de línea</dd> .<br/> Aunque en el código escriba todo seguido.

3. cada elemento llevará una marca que lo ordena. type="A" A. VI . B. <ol type="I"> <li>XML</li> <li>HTML</li> <li>XHTML</li> </ol> Se puede crear listas anidadas: <ol type="1"> <li>XML</li> <li>HTML</li> . ii.. c .. IV. v. 3 . C . del modo <ol type="1">. III. iv. II. o a... <dt>Etiqueta blockquote</dt> <dd>Inserta sangría </dd> </dl> <ol></ol> Lista ordenada. vi .. como 1. b. 2. (romanos en minúsculas) <li></li> Cada entrada de una lista ordenada. los valores posibles de type son: type="1" 1. (romanos) type="i" i. (es el type por defecto. c. type="a" a... V... 2... iii. Se le inserta un espacio por la izquierda.. b.. si no se pone type se usa éste). Para elegir la marca se puede usar el atributo type.. type="I" Es i mayúscula: I. u otros.

square. circle. Los elementos se indican como en el caso de las listas ordenadas. como círculo. <ol type="a"> <li>Prólogo</li> <li>Cabecera</li> <li>Cuerpo</li> </ol> <li>XHTML</li> </ol> <ul></ul> Lista sin ordenar con viñeta. del modo: <ul style="list-style-type:disc"> En el lugar de "disc" los valores posibles son: disc (por defecto. <ul> <li>XML</li> <li>HTML</li> <li>XHTML</li> </ul> Para elegir el tipo de viñeta se utiliza el estilo. Cada elemento de la lista será marcado con una viñeta que puede ser elegida. cuadrado. con <li></li>. si no se pone estilo se usará disc). disco o nada. none (ninguno). <ul style="list-style-type:circle"> <li>XML</li> <li>HTML</li> <li>XHTML</li> </ul> .

</p> <div style="color:red"> <p>Este párrafo y el siguiente tienen color de texto en rojo. en lugar de tener que ir aplicando el color a cada párrafo de forma separada. que se ha aplicado a la vez a los dos párrafos utilizando div.</p> </body> 3.5. Por ejemplo: <!DOCTYPE html> <html> <head> <title>Enlace a google</title> </head> <body> Pulsa <a href="http://www. si una página tiene una serie de párrafos con color de texto en negro. que se ha aplicado a la vez a los dos párrafos utilizando div. <body> <p>Este es el primer párrafo. que ya está fuera de la sección div.google.2. URL será la dirección del enlace. excepto dos párrafos consecutivos que llevan color de texto en rojo. el "Texto" quedará marcado como enlace y es donde debe pulsarse para entrar en ese enlace. esos dos párrafos pueden colocarse dentro de una sección <div> y así se le aplica el color a los párrafos de una vez. que está antes de la sección div. Por ejemplo. </body> </html> El navegador muestra: . por tanto no tiene color rojo. Elementos sobre enlaces (links) de una página web.</p> <p>Este párrafo y el anterior tienen color de texto en rojo. <a href="URL">Texto</a> Inserta un enlace o hipervínculo (link).</p> </div> <p>Este es el último párrafo.<div></div> Se puede utilizar para marcar una sección o un grupo de elementos a los que se desea aplicar alguna característica común.es">aquí</a> para entrar en google.

<a href="#Inicio">Pulsa para ir al inicio de la página</a> 3. ) instalado en el equipo (si hay alguno instalado). es decir la posición donde queremos saltar. La palabra "ancla" debe coincidir con la palabra usada en la etiqueta <a id=. simplemente es una marca interna que tiene la página. debemos colocar un ancla al inicio de la página.> es target="_blank". para poder enviar un email a la dirección indicada. Si la imagen está en la misma carpeta que la página web. que puede ser .. es decir un salto a una posición de la misma página en la que está esa etiqueta.jpg.6. se suele escribir simplemente: <img src=".gif./fichero. Elementos sobre imágenes.es" target="_blank">Ia a Google</a> <a href="mailto:EMAIL">Texto</a> Inserta un enlace a la dirección de email indicada en "EMAIL". Al pulsar en "Texto" se abre automáticamente el gestor de correo electrónico (por ejemplo. si una página es muy grande (ocupa muchas líneas). En "name" se coloca la ruta (directorio o carpeta) y el nombre del fichero donde está la imagen. Outlook. etc. . El "Texto" es la palabra donde se debe pulsar para saltar a la posición mencionada.2. <a href="#ancla">Texto</a> Inserta un enlace interno de la página.es">Enviar email a prueba</a> <a id="ancla"></a> Coloca un ancla en la posición del documento donde esté esta etiqueta y le da el nombre "ancla". Un atributo que puede resultar práctico con <a href. en esa situación. Un ejemplo puede ser: <a href="http://www. Thunderbird. existe otra carpeta llamada "imagenes" donde están las imágenes usadas en la página.google. que puede ser muy largo y ocupar varias pantallas hacia abajo. Por ejemplo. El enlace que se debe poner al final se llama enlace interno de la página y la etiqueta es la siguiente..png. <img src="name"/> Insertar una imagen. Por ejemplo: <a id="Inicio"></a> Aquí va todo el contenido de la página. se escribiría: . que se puede usar para saltar a ella de forma directa mediante un enlace interno de la propia página.> anterior. Un ancla no se ve. resulta conveniente colocar al final un enlace para que al pulsar sobre él vayamos al inicio de la página de forma directa. Por ejemplo: <a href="mailto:prueba@servidor. que abrirá el enlace en una nueva ventana del navegador web..jpg"/> Si dentro de la carpeta donde está la página. .. etc.

jpg"/> La imagen podría estar en otro servidor.jpg"/> Es obligatorio que una imagen lleve el atributo alt="texto descriptivo".200.200. por ejemplo: <img src=".150") salte a la página caceres. mientras que el segundo número indica la coordenada del eje de arriba a abajo. del modo: <img src=".otroservidor./imagen. mientras que al pulsar en la mitad inferior (coords="0.151./caceres. Cada área tendrá una breve descripción con el atributo alt. ya que en caso contrario el validador oficial W3C mostrará error.0.jpg" alt="Mapa" style="width:200px. <img src=". por lo que se pondría la dirección donde está la imagen en el otro servidor incluyendo las carpetas.html. la imagen se muestra con su tamaño real. el primer número indica la coordenada del eje de izquierda a derecha.es/imagenes/fichero. se podrá saltar a un enlace distinto al pulsar en cada zona. como puede verse en la siguiente figura: .html"> <area shape="rect" coords="0./badajoz.jpg" alt="Mapa local" style="width:200px. pero puede mostrarse con otro tamaño usando style con width (ancho) y height (alto). <img src=". El texto debe describir la imagen.200. En cada pareja de números. del modo siguiente: <img src="http://www. es decir delimitar diferentes zonas de la misma. Podemos hacer que al pulsar en la mitad superior (coords="0.height:300px" usemap="#mapaimg"> <map name="mapaimg"> <area shape="rect" coords="0. la primera pareja indica la esquina superior izquierda del rectángulo y la segunda indica la esquina inferior derecha.html. Las coordenadas son 2 parejas de números. Cada área es delimitada por sus coordenadas.151. el valor del atributo usemap (mapaimg en este ejemplo) de la imagen debe coincidir con el valor del atributo name (mapaimg) de la etiqueta map./fichero.200.300") salte a badajoz. En el ejemplo anterior tenemos un mapa de 200 píxeles de ancho y 300 de alto (por ejemplo de Extremadura).300" alt="Badajoz" href="./imagenes/fichero. para asociar un enlace (link) a cada zona.0.150" alt="Caceres" href=".html"> </map> Como vemos. Por tanto./imagenes/fichero.jpg" alt="Mapa local"/> Si no se indica lo contrario.height:200px"/> <map></map> Permite mapear una imagen.

el contenido de esa celda se mostrará en negrita y centrado. Eso corresponde a shape="rect" (forma rectangular). debe haber al menos tres parejas de números.7. Elementos sobre tablas. que delimitaría un triángulo. donde cada pareja indicará las coordenadas de cada vértice del polígono. es decir una estructura compuesta de filas (horizontales) y columnas (verticales).150. <tr></tr> Inserta una fila (row) dentro de una tabla. <hr/> Inserta una línea horizontal.2. <td></td> Inserta una columna (la d es de data. por ejemplo para mostrar los títulos de cada columna: <table style="width:100%"> <tr> <th>Nombre</th> . en coords se ponen 3 números. Por ejemplo. pero si se desea delimitar un área circular (shape="circle"). lógicamente. donde los dos primeros son las coordenadas del centro del círculo y el tercero será el radio.html"> Incluso se puede usar shape="poly" para delimitar un área en forma de un polígono cualquiera. 3. sería: <area shape="circle" coords="100. datos) dentro de una fila de una tabla.50" alt="Centro" href=". Si en lugar de td se usa th. <table></table> Inserta una tabla. una tabla con 2 filas y en cada fila 3 columnas o datos sería: <table style="width:100%"> <tr> <td>Juan</td> <td>Gómez</td> <td>43</td> </tr> <tr> <td>José</td> <td>López</td> <td>32</td> </tr> </table> <th></th> Encabezamiento (heading) de tabla. cuando esa primera fila es diferente del resto. en tal caso en coords se pondrá una sucesión de parejas de números. se suele utilizar para la primera fila de la tabla./centro. si en la imagen anterior de 200x300 de tamaño queremos delimitar un área circular justo en el centro de radio 50 píxeles. La intersección de una fila con una columna será una celda de la tabla. a modo de encabezamiento. Por ejemplo.

apartando cabecera y pie. <th>Apellidos</th> <th>Edad</th> </tr> <tr> <td>Juan</td> <td>Gómez</td> <td>43</td> </tr> <tr> <td>José</td> <td>López</td> <td>32</td> </tr> </table> <thead></thead> En una tabla. <tfoot></tfoot> Una tabla puede tener pie. etc. Al igual que con thead. el navegador mostrará esa fila al final. <table> <thead> <tr> <th>Cliente</th> <th>Saldo</th> </tr> </thead> <tfoot style="color:red"> <tr> <td>Total</td> <td>210</td> </tr> </tfoot> <tbody> <tr> <td>Juan</td> <td>90</td> </tr> <tr> <td>Jos&eacute. para englobar el cuerpo de la tabla. es decir que la última fila no es como las anteriores. podremos aplicar estilos que afecten sólo al cuerpo de la tabla. la fila de la cabecera puede incluirse entre las etiquetas <thead></thead>. sino que se usa para mostrar totales u otros datos distintos del resto de filas. La ventaja de tener esa etiqueta es que podremos aplicar un estilo (style) propio a esa fila. tipos de letras. <tbody></tbody> Para usar thead y/o tfoot es conveniente aplicar las etiquetas tbody. diferente de las otras filas (colores distintos. Al usar tbody. la ventaja de tener esa etiqueta es que podremos aplicar un estilo (style) propio a esa fila. Aunque tfoot se escriba al inicio de la tabla.). La fila del pie puede incluirse entre las etiquetas <tfoot></tfoot>.</td> <td>120</td> </tr> </tbody> </table> . diferente de las otras filas. en el pie.

<caption></caption> La etiqueta caption permite poner un título fuera de la tabla.</td> <td>655555999</td> <td>jose@servidor. si una tabla tiene 4 columnas.es</td> <td>800</td> </tr> <tr> . Por ejemplo. de modo: <table border="2"> <caption>Usuarios con edad<caption> <tr> <td>Juan</td> <td>Gómez</td> <td>43</td> </tr> <tr> <td>José</td> <td>López</td> <td>32</td> </tr> </table> <colgroup></colgroup> Permite especificar un grupo de columnas. centrado. Colgroup debe escribirse dentro de table. <col></col> Se utiliza dentro de colgroup para ir indicando el estilo de cada columna o grupo de columnas de la tabla.es</td> <td>1000</td> </tr> <tr> <td>Jos&eacute. Esta etiqueta se coloca debajo de table. sino a todas las columnas indicadas de una vez. La etiqueta span permitirá indicar cuantas columnas abarca el elemento col en cuestión. para poder aplicarle un estilo que sólo afecte a ese grupo y no al resto de columnas de la tabla. podremos aplicar un estilo a la primera y otro estilo a las 3 siguientes. tbody y tr. de la manera: <table> <colgroup> <col style="background-color:blue"> <col span="3" style="background-color:green"> </colgroup> <tr> <th>Cliente</th> <th>Tfno</th> <th>Email</th> <th>Saldo</th> </tr> <tr> <td>Juan</td> <td>666777666</td> <td>juan@servidor. tfoot. Nos ofrece la ventaja de no tener que ir aplicando un mismo estilo columna por columna o celda por celda. después de caption (si lo hay) y antes de thead.

. Con HTML5. el navegador mostrará: .. aunque este atributo ha quedado obsoleto para otros elementos. para los bordes es conveniente utilizar los estilos (style de CSS). muchos de los atributos de los elementos tratados en este capítulo se aplican utilizando CSS. </table> El numero 2 de border="2" indicará la anchura de la línea del borde.. Con el atributo colspan de una celda (en td o th) se puede indicar cuántas columnas abarcará (span) hacia la derecha la celda donde se coloque el colspan. . <table border="1"> <tr> <th>Nombre</th> <th colspan="2">Apellidos</th> <th>Edad</th> </tr> <tr> <td>Juan</td> <td>Pinto</td> <td>Fdez. De todos modos. podemos también destacar que las líneas de las tablas (bordes) pueden indicarse con el atributo border en HTML5. <table border="2"> .. <td>David</td> <td>644555444</td> <td>david@servidor. la celda "Apellidos" de la cabecera abarcará dos columnas. como veremos más adelante.es</td> <td>1100</td> </tr> </table> Aparte de todos esos elementos de tablas. como las imágenes.</td> <td>43</td> </tr> <tr> <td>Pedro</td> <td>Pons</td> <td>Tella</td> <td>32</td> </tr> </table> Con ese código.

8.html" width="300" height="100"></iframe> <iframe src=". una página web principal puede ser dividida en tres zonas (marcos) para mostrar una página distinta en cada zona del siguiente modo: <!DOCTYPE html> <html> <head> <title>T&iacute.s contenido de la p&aacute./alumnos.tulo de la p&aacute.gina en cada uno:<br/> <iframe src=".gina tiene 3 marcos.gina principal. el navegador mostrará: 3. éstos se muestran en la misma línea.html" width="300" height="100"></iframe> <br/>Despu&eacute.html" width="300" height="100"></iframe> <iframe src=". Con el atributo rowspan de una celda (en td o th) se puede indicar cuántas filas abarcará (span) hacia abajo la celda en cuestión. Elementos sobre marcos (frames). la celda "Tfnos:" abarcará dos filas. El marco no ocupa la línea completa./profesores. para mostrar una p&aacute.GINA WEB PRINCIPAL<br/> Esta p&aacute. Por ejemplo. <iframe></iframe> Inserta un marco en línea (inline frame) dentro de una página. En ese marco puede colocarse cualquier recurso. etc./modulos. una imagen. </body> . como otra página web. por lo que si después del marco hay más elementos.gina</title> </head> <body> P&Aacute.2.s de los marcos puede haber m&aacute. <table border="1"> <tr> <td>Nombre:</td> <td>Juan Pinto</td> </tr> <tr> <td rowspan="2">Tfnos:</td> <td>924000000</td> </tr> <tr> <td>567567567</td> </tr> <tr> <td>Edad:</td> <td>32</td> </tr> </table> Con ese código.

).</html> El navegador mostrará: Como vemos en el ejemplo. Elementos sobre formularios. <form></form> Inserta un formulario./modulos. no uno debajo del anterior.2. sino a continuación. el valor del atributo name del iframe tiene que coincidir con el valor del atributo target del enlace (<a href. se abra dicho enlace en el iframe indicado. <iframe src=".html" width="300" name="Marco1"></iframe> Ese nombre puede ser utilizado para que al pulsar en un enlace (link) de la página principal. Los tres marcos se muestran en línea (inline).es" target="Marco1">I.es) se abrirá en el iframe cuyo nombre coincida con el target del enlace. Por ejemplo: <body> <iframe width="500" src="alumnos. Para colocar uno debajo del anterior se podría colocar un salto de línea <br/> después de cada iframe. <body> <form> Nombre:<br/> <input type="text" name="Nombre"> <br/> Apellidos:<br/> <input type="text" name="Apellidos"> </form> </body> El navegador mostrará: .E. Algunos de estos tipos de campos son los siguientes. Su&aacute. en lugar de ocupar la ventana completa del navegador. que en este caso es "Marco1".rez de Figueroa</a> </body> Como se ve en el ejemplo.suarezdefigueroa. <input type="text" name="name"> Elemento que permite introducir un texto en el campo llamado "name". se puede indicar la anchura y altura de los marcos con width y height respectivamente. Se le puede asignar un nombre a un iframe con el atributo name. en el que se podrá introducir valores en distintos tipos de campos..S.9. El enlace (www.html" name="Marco1"></iframe> <br/> <a href="http://www.. 3.suarezdefigueroa.

en este caso es "Escriba aquí las observaciones". El primer campo se muestra por defecto activado. El valor elegido (indicado en el atributo value) se guarda en el campo con nombre "name". Uno de los valores puede mostrarse ya seleccionado por defecto con el atributo "checked". <body> <form> Observaciones:<br/> <textarea name="Obser" rows="5" cols = "25"> Escriba aqu&iacute. <br/> <input type="radio" name="voto" value="NO">No <br/> <input type="radio" name="voto" value="NSNC">No sabe/No contesta </form> Vemos en el ejemplo que los tres atributos name tienen el mismo valor. <form> <input type="radio" name="voto" value="SI" checked>S&iacute. Todos los campos de tipo "radio" de un mismo conjunto deben tener el mismo valor en el atributo name. Sólo se permitirá elegir uno de los tres valores (SI. El navegador mostrará: <input type="radio" name="name" value="valor"> Elemento que permite elegir un solo valor de un conjunto de valores posibles. "voto". por tener "checked". NO o NSNC). El navegador mostrará: . En la zona donde se va a teclear se visualizará de inicio el texto entre <textarea> y </textarea>. El campo donde se almacena el texto tecleado se llamará "name". El número de filas y columnas que ocupa el campo en pantalla se indicará con los atributos rows y cols respectivamente. La longitud del campo donde se introduce el dato puede especificarse con el atributo size. por ejemplo: <input type="text" name="Apellidos" size="50"> <textarea name="name" ></textarea> Permite intruducir texto en un campo de varias líneas. las observaciones </textarea> </form> </body> El texto introducido se guarda en el campo Obser.

El "valor" del checkbox marcado se guarda en el campo con nombre "name" de ese checkbox. Geo e Ing). lógicamente se podrán elegir varias asignaturas. El texto indicado fuera del <input. ningún valor aparecerá ya seleccionado por defecto.ticas <br/> <input type="checkbox" name="Geo" value="Geografia">Geograf&iacute.. del modo siguiente: <select name="Modulo"> <option value="LMSGI" selected>Lenguajes de marcas</option> <option value="REDES">Planificaci&oacute. Cada etiqueta checkbox debe tener un valor distinto en el atributo name. El valor elegido se guarda en el campo con nombre "name".. cada name debe tener un valor distinto (Len.> es el que se muestra en pantalla. Mat. El navegador mostrará de inicio: . Si se escriben varias etiquetas del tipo checkbox. "Lenguajes de marcas" en el ejemplo. porque ningún checkbox tiene el atributo checked. mientras que el valor indicado en el value de la opción elegida es el que se guarda en el campo cuyo nombre se indica en "name". El navegador mostrará: <select name="name"></select> Inserta una lista desplegable de valores de los que sólo se puede elegir uno. se pueden elegir varios valores. Para indicar la lista de valores se utilizan etiquetas option dentro del select. mientras que el valor indicado en value es el que se guarda en el campo "name" si se marca el checkbox. <body> Elige las asignaturas:<br/> <form> <input type="checkbox" name="Len" value="Lengua">Lengua <br/> <input type="checkbox" name="Mat" value="Matematicas">Matem&aacute.s <br/> </form> </body> En ese ejemplo.<input type="checkbox" name="name" checked value="valor"> Elemento que permite seleccionar un valor.a <br/> <input type="checkbox" name="Ing" value="Ingles">Ingl&eacute.n de Redes</option> <option value="SO">Sistemas Operativos</option> </select> El texto indicado fuera del <option.> es el que se muestra en pantalla.. Con el atributo selected en uno de los option indicamos el valor que aparecerá elegido por defecto. Con el atributo "checked" se mostrará por defecto seleccionado..

El navegador muestra: <label></label> Permite poner una etiqueta (o título) a un elemento del formulario.ticas <br/> . Al pulsar en el campo se mostrará la lista. para ello deben coincidir el atributo for del label con el atributo id del elemento. <legend></legend> Permite poner un título al grupo de elementos de fieldset. <datalist></datalist> Para un campo de introducción de texto.ceres"> <option value="M&eacute. Veamos un código y lo que muestra el navegador: <label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre"> <fieldset></fieldset> Este elemento permite agrupar una serie de elementos del formulario. Al pulsar sobre el texto del label el cursor se posicionará en el campo a teclear. en lugar de teclear todo el texto. el valor del atributo list del input debe coincidir con el valor del atributo id de datalist. <input list="Ciudades" name="Ciudad"> <datalist id="Ciudades"> <option value="Badajoz"> <option value="C&aacute.rida"> <option value="Almendralejo"> <option value="Zafra"> </datalist> Como vemos. la etiqueta y el elemento irán asociados. los enmarca y les pone un título con la etiqueta legend. Al pulsar en la flecha hacia abajo se despliega la lista con todas las opciones (tres en nuestro ejemplo) para poder elegir una de ellas. el datalist permite mostrar una lista de opciones para elegir una de ellas. <form> <fieldset style="width:300px"> <legend>Elige asignaturas:</legend> <input type="checkbox" name="Len" value="Lengua">Lengua <br/> <input type="checkbox" name="Mat" value="Matematicas">Matem&aacute.

teniendo en cuenta los ejemplos anteriores.> debe añadirse el atributo action para indicar la página donde se envían los datos para que los procese. para almacenarlos en una base de datos. A esa página llegará el nombre de cada campo (indicado en name) con el valor elegido. Con GET los datos se muestran en la barra de direcciones del navegador (junto con la página web)..a <br/> <input type="checkbox" name="Ing" value="Ingles">Ingl&eacute. por ejemplo.php) que se ocupará de procesarlos. pero con POST no./paginaprocesa. El texto que aparece en el botón será el valor colocado en el atributo value. del modo siguiente: <form action=". vemos que con style="width:300px" se puede indicar el ancho del marco del fieldset. por lo que POST es más seguro. para reiniciarlo o empezar de nuevo. para enviarlos a un email o para otra acción. Los datos se envían a una página (generalmente en . <input type="submit" value="name"> Inserta un botón para enviar los datos introducidos en el formulario. pero sí se abordarán en otro módulo del ciclo formativo. En la etiqueta <form .php" method="GET"> En el atributo method se puede indicar valor GET (es el valor por defecto) o valor POST. <input type="reset" value="name"> Inserta un botón para que al pulsarlo se borren los datos introducidos en los campos del formulario. <input type="checkbox" name="Geo" value="Geografia">Geograf&iacute. El texto que aparece en el botón será el valor colocado en el atributo value. Podemos probarlo con una .s <br/> <br/> <label for="alu">Alumno:</label> <input type="text" name="alumno" id="alu"> </fieldset> </form> En el ejemplo. a la página le llegaría algo como: Nombre=José Voto=SÍ Len=Lengua Mat=Matemáticas Modulo=LMSGI Estos procesos quedan fuera de los objetivos de este módulo..

como en el caso anterior "submit".a el p&aacute. De ese modo podrás incluir fácilmente en tu propia web una opción de búsqueda en google. .jpg (podría ser . <p style="color:red"> Este p&aacute. <span> </span> Permite aplicar un estilo a un grupo de elementos.10.<br/> Para ello viene bien el uso de la etiqueta span del modo <span style="color:blue">.gif.google.</span> Ahora ya vuelve a aparecer el texto en rojo. porque se ha cerrado el span. y dentro de esa parte se quiere aplicar un estilo diferente a un grupo de elementos.png. 3. etc./fichero.rrafo. color de texto en rojo).).es/search" method="GET"> Teclee el texto a buscar en google: <input type="text" name="q"> <input type="submit" value="Buscar"> </form> El navegador muestra: La web http://www.es/search está programada para buscar el valor que se le envíe en un campo llamado "q".web de google que está programada para procesar el dato que se le envíe (un texto a buscar).n en azul (blue) en el navegador. Otros elementos. Esa web está programada para ese método. de forma que con el atributo title se especifica a qué se refiere la abreviatura. Veremos en la barra de direcciones superior que se muestra el texto introducido. pero ahora el botón es la imagen de fichero.rrafo. pero contin&uacute. con POST no funciona.rrafo se muestra con color de texto rojo (red).google. Por tanto. del siguiente modo: <form action="http://www. pero puede resultar interesante que una serie de palabras consecutivas se muestren en color azul. El uso de esta etiqueta aporta más información de la página web a los motores de búsqueda. <input type="image" name="name" src=".2. </p> El navegador mostrará: <abbr> </abbr> Permite insertar abreviaturas. El title será mostrado al dejar el ratón encima de la abreviatura. Cuando se tiene una parte de una página web con un estilo definido (por ejemplo.n dentro de p&aacute. Al pulsar el botón "Buscar" en nuestro navegador se abre la web de google y busca el texto introducido. al pulsar en la imagen se envían los datos del formulario. estas palabras saldr&aacute. . por ser método GET.jpg"> Inserta un botón para enviar los datos. aunque est&eacute. por ello a nuestro campo de introducción de texto le hemos dado ese nombre (name="q"). se aplica <span> a este grupo.

/audio. Se admitirán algunas acciones en el reproductor de vídeo que aparece: pausar.ogg" type="video/ogg"> <source src="video. .wav" type="audio/wav"> </audio> <video controls></video> Permite insertar en la web un control para reproducir un fichero de vídeo (mp4. etc. para que sea más probable que el navegador reconozca alguno de ellos. Como ocurre con el audio. con los atributos width y height se indica el ancho y alto respectivamente de la ventana del reproductor de vídeo.mp3" type="audio/mpeg"> </audio> <audio controls> <source src="http://www. Algunos navegadores no admiten estos controles o sólo permiten algunos formatos de audio.mp3" type="audio/mpeg"> </audio> Si el fichero de sonido no está en la misma carpeta que la página web. incluso podría estar en un servidor distinto. pausar y subir o bajar volumen./sonidos/audio. En la página web se mostrará sólo un reproductor de audio <audio controls> <source src=".webm" type="video/webm"> </video> Como vemos en el ejemplo.suarezdefigueroa. ogg o wav). <audio controls> <source src=". <audio controls> <source src=". se puede indicar la ruta o incluso su URL (dirección web).es/files/audio. el fichero de sonido podría estar en una carpeta distinta que la página. <video controls width="640" height="480"> <source src="video.<abbr title="HyperText Markup Language">HTML</abbr> <audio controls></audio> Permite insertar en la web un control para reproducir un fichero de sonido (mp3. Se pueden incluir varios formatos de vídeo como ocurre con el audio./audio.mp4" type="video/mp4"> <source src="video.ogg" type="audio/ogg"> <source src=".mp3" type="audio/mpeg"> <source src=". control del volumen./audio.mp3" type="audio/mpeg"> </audio> Se suele poner el fichero de audio en distintos formatos./audio. por lo que en el atributo src puede indicarse la ruta del fichero o el URL. Algunos navegadores no admiten estos controles o sólo permiten algunos formatos de audio. El control de audio que se muestra en el navegador permite reproducir. ogg o webm).

incluso los numéricos.w3.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. El lenguaje XHTML es muy similar al lenguaje HTML. El espacio nominal para XHTML es http://www. XHTML soluciona estos problemas añadiendo ciertas normas en la forma de escribir las etiquetas y atributos.Debes conocer HTML5. por ejemplo.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.  Los nombres de las etiquetas y atributos siempre se escriben en minúsculas. 4.  El elemento raíz del documento debe indicar el espacio nominal XHTML usando el atributo xmlns. XHTML frente a HTML. El estándar XHTML 1.01 Strict a XHTML no requiere casi ningún cambio. no es más que una adaptación de HTML al lenguaje XML. por lo que éste último está prácticamente incluido en el primero. nunca pueden solaparse. difícil de mantener y muy poco profesional.01.  El valor de los atributos.org/TR/xhtml1/DTD/xhtml1-frameset.0 Frameset//EN" "http://www.org/TR/xhtml1/DTD/xhtml1-strict. El esquema básico del documento XHTML. siempre se encierra entre comillas. De hecho. El valor de los atributos de las etiquetas se puede indicar con o sin comillas. Las etiquetas. . XHTML: diferencias sintácticas y estructurales con HTML.1.0 sólo añade pequeñas mejoras y modificaciones menores al estándar HTML 4. Además.0 Transitional//EN" "http://www.w3. por lo que es posible escribir sus etiquetas y atributos de muchas formas diferentes. 4. podían escribirse en mayúsculas. El lenguaje HTML tiene una sintaxis muy permisiva.dtd"> Las restricciones básicas que introduce XHTML respecto a HTML en la sintaxis de sus etiquetas:  Las etiquetas se tienen que cerrar en orden inverso al que se abren.org/1999/xhtml  Debe haber una declaración DOCTYPE en el prólogo del documento. deberá cumplir las siguientes condiciones:  El elemento raíz del documento debe ser <html>.org/TR/xhtml1/DTD/xhtml1-transitional. en minúsculas e incluso combinando mayúsculas y minúsculas. para considerarse conforme a la especificación.w3. Recomendación del W3C.w3. lo que hace que pasar del HTML 4. El identificador público incluido en la declaración DOCTYPE debe hacer referencia a alguna de las tres DTD definidas por el W3C usando el Identificador Formal Público correspondiente: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. La flexibilidad de HTML da lugar a páginas con un código desordenado. el orden en el que se abrían y cerraban las etiquetas no era importante.

 Todas las etiquetas deben cerrarse siempre. etc. o Un mismo documento puede adoptar diseños radicalmente distintos en diferentes apartados.  El código JavaScript debe encerrarse entre las etiquetas especiales <![CDATA[ . Es recomendable dar formato a los datos por medio del uso de las CSS.. o Es compatible con los estándares que está desarrollando el W3C como recomendación para futuros agentes de usuario o navegadores. se eliminan todos los espacios en blanco que se encuentran antes y después del valor. Además. ]]> para evitar que el navegador interprete de forma errónea caracteres como & y <. no se pueden comprimir.  En XHTML es necesario separar el formato del contenido. entre ellas son:  Antes de acceder al valor de un atributo. Este tipo de atributos no son muy habituales. Ventajas e inconvenientes de XHTML sobre HTML. 4. no puede darse el valor por entendido.. aunque sin formato. XHTML permite que en lugar de abrir y cerrar de forma consecutiva la etiqueta (<br></br>) se puede utilizar la sintaxis <br/> para indicar que es una etiqueta vacía que se abre y se cierra en ese mismo punto. o Los documentos escritos conforme a XHTML 1. Las ventajas son: o Compatibilidad parcial con navegadores antiguos: la información se visualiza..  Las páginas XHTML deben prescindir del atributo name. XHTML incluye otros cambios más avanzados respecto a HTML..2. código . en su lugar siempre debe utilizarse el atributo id.. pantallas de dispositivos móviles.0 presentan mejor rendimiento en las actuales herramientas web que aquellos escritos conforme a HTML.. Los párrafos deben separarse consistentemente y las cabeceras h1-h6 sólo deben usarse para destacar los diferentes apartados. o La separación de los contenidos y su presentación hace que los documentos XHTML se adapten mejor a las diferentes plataformas: pantallas de ordenador. Además de las cinco restricciones básicas. es decir.. o Sencillez a la hora de editar y mantener el código.. . se eliminan todos los espacios en blanco sobrantes dentro del valor de un atributo.  Los atributos en los que el nombre coincide con su valor.

es un sitio web que nos vende fuentes que pueden ser utilizadas para la web. o Kuler.  NetObjects Fusion. Herramientas de diseño web. logos. etc. o Macromedia Fireworks o Adobe Illustrator para diseñar botones. .  Amaya es una herramienta de libre distribución creada por el W3C que permite visualizar y editar páginas HTML y XHTML con hojas de estilo CSS. o Yafla Color. o moreCrayons. que pueden votar sus favoritas. Está disponible para plataformas Windows. es una aplicación online de Adobe Labs en la que se puede elegir una combinación de colores y compartirla con otros usuarios. Las más populares:  Macromedia Dreamweaver. etc. se pueden utilizar fácilmente herramientas creadas para procesar documentos XML genéricos (editores. tiene interesante información sobre el uso de los colores y su influencia en la web.  Microsoft Front Page. GNU/Linux. una paleta de colores web seguros (Pues no todos los colores se ven iguales en distintos sistemas operativos). Requiere registro. o Como ocurre con XML. 5. permite crear una gama a partir de un color y además calcula equivalencias de colores entre RGB. o Muchas herramientas de diseño web aún no generan código XHTML correcto. permite crear la gama a partir del color que se elija como principal además funciona como conversor entre los modelos de color RGB y HSV. lo que hace que las páginas no siempre se muestren correctamente. para generar páginas web son útiles algunas de las siguientes herramientas:  Software de diseño o Macromedia Flash para hacer animaciones. entre otras. imágenes. Actualmente hay herramientas que permiten diseñar un sitio web sin necesidad de saber programar HTML. Esto cada vez es menos problemático ya que estos navegadores van cayendo en desuso. XSLT. para retocar fotografías y trabajar con imágenes. HSV y CMYK.).  Adobe Go live. o Color Voodoo. Además de las anteriores.  Recursos: diseño web o My Fonts. además de documentos XML. Mac OS X. Los inconvenientes de XHTML sobre HTML son: o Algunos navegadores antiguos no son totalmente compatibles con los estándares. o Adobe Photoshop o Gimp. o ColorJack. expresiones MathML y dibujos SVG. banners o sitios enteros con esta tecnología.

CSS 2. . La guerra de navegadores y la falta de un estándar para la definición de los estilos dificultaban la creación de documentos que tuvieran igual apariencia en distintos navegadores. alrededor del año 1970. Una vez creados los contenidos. Desde la creación de SGML. se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos. se publicó en 1996. utilizando para ello programas como "XML Copy Editor" y "Notepad++". texto destacado. Tenemos las versiones: . Antes del uso de CSS. 6. . para designar la función de cada elemento dentro de la página: párrafo. Para ello se define en una zona reservada el formato de cada uno de los elementos de la web.1. desarrollada en módulos. lo cual hace que sea muy difícil de actualizar. . se encuentra en desarrollo. Las hojas de estilo están compuestas por una o más reglas de estilo aplicadas a un documento HTML o XML. Al crear una página web.CSS 1. se observó la necesidad de definir un mecanismo que permitiera aplicar estilos a los documentos electrónicos. Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML. es la primera recomendación oficial. El principal problema de esta forma de definir el aspecto de los elementos es que habría que definir el formato de cada uno de los elementos que formen la página. CSS permite separar los contenidos de la página y su aspecto.CSS 2. sino que realizaremos la programación de la página web escribiendo directamente el código en modo texto. es la segunda recomendación oficial. reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes. En 1995. cabecera. mejora la accesibilidad del documento. . es decir. El organismo W3C propuso la creación de un lenguaje de hojas de estilos específico para el lenguaje HTML. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a ella en las que aparezca ese elemento. Hojas de estilo o CSS. no fue aceptada por W3C hasta 2011. publicada en 1998. algunos aceptados desde 2011.CSS 4. CSS obliga a crear documentos semánticos HTML/XHTML. etc. . los diseñadores de páginas webs debían definir el aspecto de cada elemento dentro de las etiquetas HTML de la página. CSS (Cascading Style Sheets) permite a los desarrolladores web controlar el estilo y el formato de múltiples páginas webs al mismo tiempo. el W3C añadió a su grupo de trabajo de HTML el desarrollo y estandarización de CSS. se utiliza el lenguaje CSS para definir el formato de cada elemento. Nosotros no utilizaremos ninguna de esas herramientas indicadas.CSS 3.