Módulo

Introducción a HTML, CSS y

JavaScript
 Autor del documento:

Centro de Apoyo Tecnológico a Emprendedores

Datos de contacto:

E-Mail: [email protected]
Página Web: www.bilib.es
Teléfono: 967 555 311

Licencia del documento:

Copyright © 2017, Centro de Apoyo Tecnológico a Emprendedores

Publicado bajo licencia Creative Commons By - Sa

Usted es libre de:

• Copiar, distribuir y comunicar públicamente la obra.

• Hacer obras derivadas
• Bajo las condiciones siguientes:

Reconocimiento. Debe reconocer los créditos de la obra de la manera especificada por el autor
o el licenciador (pero no de una manera que sugiera que tiene su apoyo o apoyan el uso que
hace de su obra).

Compartir bajo la misma licencia. Si transforma o modifica esta obra para crear una obra
derivada, sólo puede distribuir la obra resultante bajo la misma licencia, una similar o una
compatible.

Al reutilizar o distribuir la obra, tiene que dejar bien claro los términos de la licencia de esta
obra.

Alguna de estas condiciones puede no aplicarse si se obtiene el permiso del titular de los
derechos de autor.

Nada en esta licencia menoscaba o restringe los derechos morales del autor.

Los logos y marcas anunciados o referidos en este documento son propiedad de sus
respectivos dueños, todos o algunos derechos reservados dependiendo de su Licencia.

1 Introducción a HTML 6
 Índice
Índice ............................................................................................................................... 2

1. Introducción del módulo ........................................................................................ 6

1.1 Objetivos del módulo ........................................................................................ 7

2. Lenguaje HTML ....................................................................................................... 7

3. Características del lenguaje HTML ........................................................................ 10

3.1 Sintaxis del HTML ............................................................................................ 10

3.2 Estructura de un documento HTML ................................................................ 11

3.3 Marcas y atributos ........................................................................................... 12

3.4 Concatenación de marcas ............................................................................... 13

4. Reglas del lenguaje HTML ..................................................................................... 14

4.1 HTML es simplemente texto ........................................................................... 14

4.2 Mayúsculas y minúsculas ................................................................................ 14

4.3 Tabuladores. Saltos de línea............................................................................ 14

4.4 Caracteres especiales ...................................................................................... 15

5. Comandos básicos ................................................................................................ 16

5.1 Definición de párrafos ..................................................................................... 16

5.2 Ruptura de líneas............................................................................................. 17

5.3 Títulos de encabezamiento ............................................................................. 17

5.4 Estilo del texto ................................................................................................. 18

5.5 Listas ................................................................................................................ 21

1 Introducción a HTML 6
 5.6 Comentarios no visibles en pantalla ............................................................... 25

6. Enlaces .................................................................................................................. 27

6.1 A otra zona de la misma página ...................................................................... 28

6.2 A otras páginas ................................................................................................ 31

6.3 A una zona de otra página............................................................................... 33

7. Imágenes ............................................................................................................... 34

7.1 Principales formatos gráficos .......................................................................... 34

7.2 Inclusión de imágenes ..................................................................................... 37

7.2.1 Tamaño de las imágenes .......................................................................... 37

7.2.2 Escalado de imágenes............................................................................... 37

7.2.3 Bordes de la imagen ................................................................................. 38

7.2.4 Alineación de texto con las imágenes ...................................................... 38

7.2.5 Imágenes con texto alternativo................................................................ 38

7.2.6 Uso de imágenes con enlaces................................................................... 38

7.2.7 Imágenes como fondo de un documento ................................................ 39

7.2.8 Mapas sensitivos ...................................................................................... 39

8. Tablas .................................................................................................................... 41

8.1 Título de la tabla .............................................................................................. 42

8.2 Bordes de la tabla ............................................................................................ 42

8.3 Cabeceras de filas y columnas......................................................................... 43

8.4 Tamaño de la tabla .......................................................................................... 43

1 Introducción a HTML 6
 8.5 Justificación de la tabla ................................................................................... 44

8.6 Espacio dentro de las celdas ........................................................................... 44

8.7 Forma de las celdas individuales ..................................................................... 44

8.7.1 Justificación del texto de las celdas .......................................................... 44

8.7.2 Celdas de diferentes tamaños .................................................................. 45

8.7.3 Celdas irregulares ..................................................................................... 45

8.7.4 Color de cada celda .................................................................................. 46

8.7.5 Texto en una sola línea ............................................................................. 46

9. Elementos HTML 5 ................................................................................................ 48

9.1 Introducción .................................................................................................... 48

9.2 Inicializar un documento HTML. <!DOCTYPE> ................................................ 51

9.3 Estructura del cuerpo con HTML5 ................................................................... 52

9.3.1 <header> ................................................................................................... 54

9.3.2 <nav> ........................................................................................................ 55

9.3.3 <section>................................................................................................... 56

9.3.4 <aside> ...................................................................................................... 58

9.3.5 <footer> .................................................................................................... 60

9.4 Elementos HTML5 dentro del cuerpo ............................................................. 62

9.4.1 <article> .................................................................................................... 63

9.4.2 <hgroup>................................................................................................... 66

9.4.3 <figure> y <figcaption> ............................................................................. 68

1 Introducción a HTML 6
 9.5 Formulario web ............................................................................................... 70

9.5.1 El elemento <form> .................................................................................. 71

9.5.2 El elemento <input> ................................................................................. 72

9.6 Listado de todos los elementos HTML5 .......................................................... 77

9.6.1 Elementos raíz .......................................................................................... 78

9.6.2 Metadatos del documento ....................................................................... 78

9.6.3 Scripting .................................................................................................... 78

9.6.4 Secciones .................................................................................................. 78

9.6.5 Agrupación de contenido ......................................................................... 79

9.6.6 Semántica a nivel de texto ....................................................................... 80

9.6.7 Ediciones ................................................................................................... 81

9.6.8 Agrupación de contenido ......................................................................... 82

9.6.9 Datos tabulares ......................................................................................... 82

9.6.10 Formularios ........................................................................................... 83

9.6.11 Otros datos ............................................................................................ 84

10. Glosario de términos del módulo ....................................................................... 84

11. Bibliografía .......................................................................................................... 86

12. Casos prácticos ................................................................................................... 86

12.1 Caso práctico 1 ............................................................................................. 86

12.2 Caso práctico 2 ............................................................................................. 88

13. Cuestionario de autoevaluación ......................................................................... 95

1 Introducción a HTML 6
 1. Introducción del módulo
Este curso está pensado para aprender los principales conceptos necesarios para
construir sus propias páginas Web.

En su confección se ha procurado seguir siempre un criterio eminentemente práctico.

Para mejor asimilar los conceptos tratados, se propone al final de cada apartado un
ejemplo práctico.

Primeras herramientas: Para comenzar sólo son necesarios dos elementos:

• Un editor de texto. Vale cualquiera, siempre que no formatee el texto. Por ello,
los más adecuados son los más sencillos (como por ej., Notepad ++). Si se utilizan
procesadores como el Word, se deben guardar los ficheros como 'Sólo Texto',
para que no introduzca órdenes de formateo, que pueden provocar errores al
cargarlo en el navegador.
• Un visualizador o navegador del Web: Google Chrome, Mozilla Firefox,
Microsoft Edge, Apple Safari, Microsoft Internet Explorer.

El editor de texto lo usaremos para ir escribiendo los documentos HTML, que será
posteriormente interpretado por el navegador, con lo que iremos comprobando los
cambios y añadidos que vayamos efectuando.

Existen ciertos programas que nos ayudan a automatizar este proceso, pero es muy
conveniente comenzar a hacerlo de una manera manual, para comprender bien la
estructura del lenguaje HTML

Método de trabajo: Con el editor de texto crearemos un fichero con el nombre que
queramos (p. ej. ejemplo1), pero que debe tener necesariamente la extensión .html (o
.htm si nuestro sistema operativo no soporta extensiones de más de tres letras).

1 Introducción a HTML 6
 Habrá un fichero distinto para cada apartado; conviene crear un directorio específico
en su ordenador e irlos guardando en él, para poder repasar lo aprendido, aparte de
que pueden ser necesarios para ejecutar otros ejemplos prácticos.

1.1 Objetivos del módulo

El objetivo general de este módulo es proporcionar al alumno los conocimientos

necesarios para construir sus propias páginas Web.

• Saber los conceptos principales del lenguaje HTML.

• Conocer los diferentes elementos estructurales que componen internamente
una página web.
• Utilizar los programas necesarios para programar y corregir y visualizar página
web.
• Practicar todo lo aprendido en este módulo.

2. Lenguaje HTML
Las primeras cosas que debes saber sobre HTML: historia, objetivos y demás
conocimientos donde sentar las bases del manual.

1 Introducción a HTML 6
 HTML es el lenguaje con el que se escriben las páginas web. Las páginas web pueden
ser vistas por el usuario mediante un tipo de aplicación llamada navegador. Podemos
decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar
las páginas webs al usuario, siendo hoy en día la interface más extendida en la red.

Este lenguaje nos permite aglutinar textos, sonidos e imágenes y combinarlos a nuestro
gusto. Además, y es aquí donde reside su ventaja con respecto a libros o revistas, el
HTML nos permite la introducción de referencias a otras páginas por medio de los
enlaces hipertexto.

El HTML se creó en un principio con objetivos divulgativos. No se pensó que la web

llegara a ser un área de ocio con carácter multimedia, de modo que, el HTML se creó
sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos
de gente que lo utilizarían en un futuro. Sin embargo, pese a esta deficiente
planificación, sí que se han ido incorporando modificaciones con el tiempo, estos son
los estándares del HTML. Numerosos estándares se han presentado ya. El HTML 5 es
el último estándar a día de hoy.

Esta evolución tan anárquica del HTML ha supuesto toda una seria de inconvenientes
y deficiencias que han debido ser superados con la introducción de otras tecnologías
accesorias capaces de organizar, optimizar y automatizar el funcionamiento de las
webs. Ejemplos que pueden sonaros son las CSS, JavaScript u otros. Veremos más
adelante en qué consisten algunas de ellas.

Otros de los problemas que han acompañado al HTML es la diversidad de navegadores

presentes en el mercado los cuales no son capaces de interpretar un mismo código de
una manera unificada. Esto obliga al Webmaster a, una vez creada su página,
comprobar que esta puede ser leída satisfactoriamente por todos los navegadores, o

1 Introducción a HTML 6
 al menos, los más utilizados. Las últimas versiones de los navegadores actuales
cumplen gran parte de los estándares web, por lo que no hay tantos problemas en este
sentido como hace algunos años.

Además del navegador necesario para ver los resultados de nuestro trabajo,
necesitamos evidentemente otra herramienta capaz de crear la página en sí. Un
archivo HTML (una página) no es más que un texto. Es por ello que para programar en
HTML necesitamos un editor de textos.

Es recomendable usar el Bloc de notas que viene con Windows, u otro editor de textos
sencillo como Notepad ++. Hay que tener cuidado con algunos editores más complejos
como Wordpad o Microsoft Word, pues colocan su propio código especial al guardar
las páginas y HTML es únicamente texto plano, con lo que podremos tener problemas.

Existen otro tipo de editores específicos para la creación de páginas web los cuales
ofrecen muchas facilidades que nos permiten aumentar nuestra productividad. No
obstante, es aconsejable en un principio utilizar una herramienta lo más sencilla
posible para poder prestar la máxima atención a nuestro código y familiarizarnos lo
antes posible con él. Siempre tendremos tiempo más delante de pasarnos a editores
más versátiles con la consiguiente ganancia de tiempo.

Para tener más claro todo el tema de editores y los tipos que existen, visita los artículos:

• Editores de HTML.
• Bloc de notas.
• También puedes acceder a descripciones editores más complejos que el Block
de Notas, pero más potentes como Homesite o UltraEdit.

1 Introducción a HTML 6
 Es importante tener claro todo ello puesto que en función de vuestros objetivos puede
que, más que aprender HTML, resulte más interesante aprender el uso de una
aplicación para la creación de páginas.

Así pues, una página es un archivo donde está contenido el código HTML en forma de
texto. Estos archivos tienen extensión .html o .htm (es indiferente cuál utilizar). De
modo que cuando programemos en HTML lo haremos con un editor de textos y
guardaremos nuestros trabajos con extensión .html, por ejemplo mipágina.html

3. Características del lenguaje HTML

3.1 Sintaxis del HTML

El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de base al que

llamamos etiqueta. A través de las etiquetas vamos definiendo los elementos del
documento, como enlaces, párrafos, imágenes, etc. Así pues, un documento HTML
estará constituido por texto y un conjunto de etiquetas para definir la forma con la que
se tendrá que presentar el texto y otros elementos en la página.

1 Introducción a HTML 6
 La etiqueta presenta frecuentemente dos partes:

• Una apertura de forma general <etiqueta>

• Un cierre de tipo </etiqueta>

Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que

caracterizan a esta etiqueta. Así, por ejemplo, las etiquetas <b> y </b> definen un texto
en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente
código:

<b>Esto está en negrita</b>

El resultado Será:

Esto está en negrita

Las etiquetas <p> y </p> definen un párrafo. Si en nuestro documento HTML

escribiéramos:

<p>Hola, estamos en el párrafo 1</p>

<p>Ahora hemos cambiado de párrafo</p>

El resultado sería:

Hola, estamos en el párrafo 1

Ahora hemos cambiado de párrafo

3.2 Estructura de un documento HTML

Además de todo esto, un documento HTML ha de estar delimitado por la etiqueta

<html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes
principales:

1 Introducción a HTML 6
 El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de
índole informativo como por ejemplo el título de nuestra página.

El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos
nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos
visto.

El resultado es un documento con la siguiente estructura:

<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son
importantes para catalogarla: Titulo, palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador:
Texto e imágenes
</body>
</html>

3.3 Marcas y atributos

Como hemos dicho, el lenguaje HTML se estructura utilizando marcas o etiquetas o

comandos (a partir de ahora utilizaremos indistintamente uno de 3 términos para
denominar a los elementos que se estructura HTML).

Hay marcas que se aplican a todo el documento HTML, o sólo desde el punto en que
son insertadas hasta el final del documento. Otras se aplican exclusivamente a un

1 Introducción a HTML 6
 fragmento del texto. En ese caso, el final de la aplicación se especifica con la misma
marca precedida de la barra inclinada hacia atrás (/).

Las marcas pueden contener de forma opcional u obligatoria, lo que se denominan

atributos o modificadores. Los atributos matizan el significado de la marca, y que se
expresan de la siguiente forma:

<marca atrib1=“valor1” atrib2=“valor2”..............>

El valor de los atributos se expresa encerrado entre comillas.

En la mayor parte de los visualizadores es posible omitir las comillas y colocar

directamente el valor del atributo. Esta práctica. a pesar de estar extendida, no es muy
aconsejable ya que no está normalizada, y no está soportada por la totalidad de los
navegadores.

Algunos atributos sólo vienen definidos por su nombre (no tienen valor); son los
atributos llamados compactos.

3.4 Concatenación de marcas

Las marcas se pueden anidar o encadenar una a continuación de otra, de forma que se
pueden aplicar simultáneamente varias propiedades a una misma porción de
documento. Así el texto encerrado en las marcas:

<marca1><marca2> Texto </marca2></marca1>

queda afectado tanto por las propiedades de la <marca1> como por los de la
<marca2>. Todas las marcas son independientes entre sí, por lo que las siguientes
líneas de código HTML, tiene efectos idénticos, sean cuales sean las marcas concretas:

<marca1><marca2> Texto</marca2></marca1>

1 Introducción a HTML 6
 <marca1><marca2> Texto</marca1></marca2>
<marca2><marca1> Texto</marca1></marca2>
<marca2><marca2> Texto</marca2></marca1>

A pesar de que son expresiones completamente idénticas, es recomendable seguir el

orden lógico de la concatenación, ya que esto facilita de forma sustancial la edición de
documentos HTML. De las cuatro opciones anteriores, las correctas serían la primera y
la tercera.

4. Reglas del lenguaje HTML

4.1 HTML es simplemente texto

Lo primero es saber que un documento HTML es un archivo de texto simple, luego, se

puede editar con cualquier editor de texto sencillo, como el Block de Notas de
Windows.

4.2 Mayúsculas y minúsculas

HTML no distingue entre mayúsculas y minúsculas en la especificación de marcas y sus

atributos.

4.3 Tabuladores. Saltos de línea

Los navegadores no toman en cuenta las tabulaciones, los saltos de línea ni los espacios
en blanco extra dentro del código fuente. Esto tiene ventajas y desventajas. La principal
ventaja es que permite obtener resultados uniformes y de buena presentación de
manera bastante fácil.

1 Introducción a HTML 6
 La principal desventaja es que un documento HTML, por lo menos se debe usar las
marcas <p>...</p> o <br> para evitar que quede todo el texto en una sola línea.

4.4 Caracteres especiales

En HTML existen algunos caracteres que son especiales porque juegan un papel dentro
del mecanismo del funcionamiento de HTML, como sucede con los símbolos mayor
que (>) y menor que (<), y otros porque en los primeros tiempos de HTML, no formaban
parte del juego de caracteres internacionales del alfabeto, como sucede con los
acentos.

Sea por los motivos que fuere, el caso es que existen ciertos símbolos que no pueden
escribirse directamente, sino que deben sustituirse por una cadena de caracteres que
el navegador interpretará de forma correcta. Estas cadenas de caracteres comienzan

1 Introducción a HTML 6
 siempre por el símbolo (&) seguido de una combinación de caracteres alfabéticos que
tienen un significado especial en HTML. En la siguiente tabla se muestra cómo escribir
algunos de estos caracteres:

Carácter especial Transcripción HTML Comentario

Los acentos &<vocal a acentuar> acute; En la actualidad la mayoría
de los browsers los
soportan si la codificación
del fichero es UTF8
Símbolo menor que (<) &lt:
Símbolo mayor que (>) &gt;
La eñe &ntilde; En la actualidad la mayoría
de los browsers los
soportan si la codificación
del fichero es UTF8
Espacios en blanco &nbsp; (non breaking space) HTML sólo reconoce un
espacio en blanco entre
palabras

De manera más general, para representar símbolos reservados o símbolos particulares,

se puede utilizar el código ASCII del símbolo mediante la sintaxis siguiente:

&#código_ASCII;

5. Comandos básicos
A continuación, se describen las marcas básicas de HTML que se pueden incluir en el
cuerpo de un documento HTML.

5.1 Definición de párrafos

La marca <p> sirve para separar párrafos en HTML. Además de introducir un retorno
de carro, fuerza un segundo retorno de carro para dejar una línea en blanco entre un

1 Introducción a HTML 6
 párrafo y el siguiente. De esta manera los párrafos quedan más espaciados y el texto
se vuelve más legible

En esta marca la etiqueta de fin es opcional, aunque recomendable para una mayor
legibilidad.

Por defecto, el párrafo de un documento HTML está justificado a la izquierda. Pero

podemos modificar la alineación horizontal de un párrafo mediante el atributo align
de la marca <p>, que puede tomar los valores siguientes.

• left: el párrafo es justificado a la izquierda. Valor por defecto.

• center: el párrafo es centrado.
• right: el párrafo es justificado a la derecha.
• justify: el párrafo es justificado a ambos lados

5.2 Ruptura de líneas

La marca <br /> introduce un retorno de carro (o salto de línea) en el punto del
documento en el que es colocada. Es equivalente al punto y aparte de un texto normal.

Esta marca es vacía de manera que no necesita de la etiqueta de fin de marca.

5.3 Títulos de encabezamiento

HTML dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamaño, que
se utilizan para marcar los títulos o resaltes en las páginas. Se activan con el comando
<hn> y se desactivan con </hn>, donde n es un número de 1 a 6. siendo el número
indicativo del tamaño. El tamaño mayor es el correspondiente al número 1.

1 Introducción a HTML 6
 <h1>Nivel de encabezado 1</h1>
<h2>Nivel de encabezado 2</h2>
<h3>Nivel de encabezado 3</h3>
<h4>Nivel de encabezado 4</h4>
<h5>Nivel de encabezado 5</h5>
<h6>Nivel de encabezado 6</h6>

Puede experimentar en el ejemplo anterior, cambiando el número para comprobar el

efecto que se logra.

Los títulos de encabezado requieren la marca de fin, y siempre provocan un salto de

línea, aunque no se le indique.

5.4 Estilo del texto

Las marcas de estilo de texto especifican el tipo de letra (negrita, cursiva, ..), tamaño,
color que se desea que aparezca el texto.

Tipos de letras

Algunas de las marcas que permiten especificar la tipografía de los caracteres son las
siguientes:

<b>Negrita (Bold)</b>
<I>Cursiva (Italic)</I>
<blink>Parpadeante (blink)</BLINK>
<tt>Tamano fijo (TypeWriter)</tt>
<em>Énfasis (Emphasis)</em>
<strong>Gran énfasis (Strong)</ strong >
<u>Subrayado (Underline)</u>

1 Introducción a HTML 6
 Todas estas marcas requieren etiquetas de comienzo y fin, y se pueden anidar.

Tamaño del texto

Para modificar el tamaño se utiliza el atributo size de la marca <font>, de la manera

siguiente:

<font size="tamaño">Texto</font>

El comando < font > requiere la etiqueta de cierre.

HTML define siete tamaños de letra distintos, siendo el tamaño 3 el que se adopta por
defecto. Sin embargo, la mayoría de los navegadores permiten establecer cuál es la
correspondencia real del tamaño 3. Así, se puede hacer que el tamaño 3 corresponda
a una fuente Arial de 16, o a una Times de 8.

Existen dos formas de establecer el tamaño de un trozo de texto.

• Tamaño de texto absoluto.

<font size=”argumento”>Texto</font>

Donde argumento es un número entre 1 y 7

• Tamaño de letra relativos.

<font size =”argumento”>Texto</font>

Donde argumento es una cadena de caracteres que nos indica, con un signo + ó
-, el número de veces que esa fuente va ser mayor o menor que el tamaño de la
fuente por defecto.

El uso de tamaños relativos nos permite olvidarnos de cuál es el tamaño de letra que
se está utilizando en el momento actual, por lo que, en general, será preferible a utilizar
tamaños de letra absolutos.

1 Introducción a HTML 6
 Si queremos modificar el tamaño de todo el texto del documento, una forma de
hacerlo sería englobar todo el cuerpo del documento en una etiqueta con el tamaño
de letra que queremos utilizar. Así escribiremos algo parecido a lo que sigue:

<html>
<head>
...........
</head>
<body>
<font size=“4”>
........ (contenido del documento) .......
</font>
</body>
</html>

Sin embargo, hay otra forma de hacerlo más elegante y legible, utilizando la siguiente
etiqueta:

<basefont size="tamaño">

Esta etiqueta puede situarse en cualquier lugar del documento. Sin embargo, como se
trata de una etiqueta que afecta a todo el documento, para mantener la legibilidad lo
más lógico es colocarlo en la cabecera.

Si fijamos un tamaño de letra básico distinto del 3, debemos tener en cuenta que es
posible que alguno de los tamaños relativos no pueda llevarse a cabo, puesto que se
sale de los límites especificados.

Colores del texto

Para dar color a un texto se utiliza el comando siguiente:

1 Introducción a HTML 6
 <font color="color">texto</font>

En un principio la forma de especificar un color en HTML, era mediante el formato

hexadecimal. Consistía en tres números hexadecimales (números expresados en base
16) de dos dígitos cada uno.

Con un número hexadecimal de dos dígitos podemos expresar hasta 256 valores
distintos. El primer número hexadecimal nos va a indicar la cantidad de rojo que tiene
nuestro color, el segundo la cantidad de verde, y el tercero la cantidad de azul (el
blanco será FFFFFF, el negro 000000). Esta forma de definir los colores como
combinación de los colores rojo, verde, y azul se denomina RGB (red - green - blue).

Afortunadamente, la mayoría de los visualizadores, al menos en sus últimas versiones,

admiten otra forma de insertar colores. En lugar de expresarlos, en formato
hexadecimal, se expresan como cadena de caracteres. Esta cadena es el nombre del
color en inglés.

Para dar color a todo el texto del documento podemos hacerlo con:

<body text=“blue”>

Para especificar el color de fondo del documento deberemos utilizar:

<body bgcolor=“blue”>

5.5 Listas

Las listas en HTML proporcionan una forma de clasificar la información, y hacer que
ésta sea más inteligible por parte del visitante de las páginas.

Listas ordenadas: <ol>

1 Introducción a HTML 6
 También llamadas listas numeradas son aquellas en las que cada elemento tiene
delante un número que indica el orden del elemento dentro del conjunto de la lista.

La marca para crear una lista ordenada es <ol> .... </ol>. Son obligatorias las etiquetas
de comienzo y fin de estas marcas.

Cada elemento de la lista ordenada se identifica escribiéndolo dentro de la marca <li>

.... </li>. La etiqueta de fin puede ser omitida.

Con la marca li no es necesario introducir un retorno de carro detrás de cada elemento

de la lista.

Es posible especificar el tipo de numeración que se dará (números arábigos, números

romanos, letras, etc.), por defecto se sigue la numeración árabe.

Las listas numeradas pueden ser anidadas una dentro de otra.

Listas desordenadas: <ul>

También llamadas listas no numeradas. Son listas en las que no es necesario numerar
de alguna manera los elementos que la componen, sino que cada elemento tiene
delante un símbolo (un punto, un cuadrado, etc..).

La forma de especificar una lista desordenada es mediante la marca <ul>. Las etiquetas
de comienzo y fin de esta marca son obligatorias.

Cada elemento de la lista se identifica mediante la marca <li>. La etiqueta de fin para
la marca <li> se puede omitir.

También es posible en las listas desordenadas especificar el símbolo que va a aparecer

delante de cada elemento de la lista.

1 Introducción a HTML 6
 Las listas desordenadas también pueden ser anidadas una dentro de otra.

Listas de definición: <dl>

A diferencia de los dos tipos anteriores de listas, las listas de definición, se utilizan para
presentar la información sin marcas, ni números, sino que utiliza los sangrados de los
párrafos.

Las listas de definición están constituidas por términos y su subsiguiente definición.

La forma de implementar las listas de definición es con la marca <dl> de la siguiente

forma:

<dl>
<dt>Nombre del término
<dd>Definición del término
</dl>

Cada término de la lista de definición se indica con la marca <dt> y no sangrará,

mientras que la descripción del término se indica con la marca <dd> y sangrará hacia
la derecha para resaltarla del término.

Antes y después de la descripción de cada palabra clave, las listas de definición

incorporan un retorno de carro,

Las listas de definición también pueden anidarse.

Texto preformateado: <pre>

El hecho de que HTML ignore los retornos de carro a la hora de mostrar un texto no es
un comportamiento arbitrario, sino que es la forma que tenemos de que,

1 Introducción a HTML 6
 independientemente de la ventana del visualizador, nuestro párrafo quede
convenientemente justificado

Sin embargo, es posible que en alguna ocasión queramos que el texto aparezca en el
visualizador tal y como lo hemos introducido, respetando los retornos de carro e
incluso los espacios que podamos haber dejado entre caracteres. Para ello podemos
utilizar la marca <pre> y englobar en ella todo el texto del documento.

La marca <pre> respeta tanto los retornos de carro como los espacios en blanco del
archivo original, y la letra aparece como tipo de letra de espacio no proporcional (El
tipo de letra usado por el texto preformateado es el mismo que el de <tt> ... </tt>), y
no con el tipo de letra habitual del visualizador. Esta marca permite mostrar el texto
preformateado tal cual.

Además, en el texto preformateado no se interpretan los caracteres especiales HTML:

<, > y &.

Esta marca requiere de las etiquetas de comienzo y fin.

Centrando texto

Para centrar una parte del documento, se delimita lo que se desea centrar mediante el
comando <center> ... </center>.

Líneas horizontales

La marca <hr> permite trazar una líneas horizontales para separar distintas secciones
de una página HTML

1 Introducción a HTML 6
 Por defecto, las líneas horizontales van de la parte izquierda de la ventana del
visualizador a la derecha. Por otro lado, tienen la parte superior oscura y la inferior
clara, por lo que dan una sensación de relieve.

Esta marca sólo requiere la etiqueta de comienzo.

Esta etiqueta tiene varios modificadores que permite cambiar el aspecto de la línea
horizontal (ancho, longitud,...).

5.6 Comentarios no visibles en pantalla

A veces es muy útil escribir comentarios en el documento HTML sobre el código que
escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos,
y que no queremos que se vean en pantalla.

Esto se consigue encerrando dichos comentarios entre estos dos símbolos: <!-- y -->

Ejemplo:

<!-- Esto es un comentario que no se verá en pantalla -->

Ejemplo práctico nº2

En el editor de textos copiamos:

<HTML>
<HEAD>
<TITLE>Ejemplo 2 - Comandos básicos</TITLE>
</HEAD>

<BODY>
<CENTER><H1>Comandos básicos</H1></CENTER>

1 Introducción a HTML 6
 <!-- Este documento contiene todo lo que he aprendido
hasta ahora sobre HTML -->
<H2>Párrafos</H2>
<P>Este es mi primer párrafo del ejemplo 2</P>
<P>Este es mi segundo párrafo. Aquí hay una ruptura de
línea<BR>de texto</P>
<HR>
<H2>Listas</H2>
<H3>Ordenadas</H3>
<P>La <FONT SIZE="+1"><I>Música</I></FONT> que más me
gusta es <I> (en orden de preferencia): </I></P>
<OL>
<LI>El rock</LI>
<LI>El jazz <!-- la marca LI no necesita de la
etiqueta de cierre -->
<LI>La música clásica
</OL>
<H3>Desordenadas</H3>
<P>Sin un orden particular, mis <FONT COLOR="green"><B>
aficiones </B></FONT> son las siguientes:</P>
<UL>
<LI>El cine
<LI>El deporte
<LI>Natación
<LI>Baloncesto
</UL>
<H2>De definición</H2>
<DL>

1 Introducción a HTML 6
 <DT>Descripción</DT>
<DD>Es nombrar las propiedades de algo
<DT>Lista descriptiva</DT>
<DD>Es nombrar las propiedades de varios objetos
</DL>

<HR>
<CENTER>También sabemos centrar el texto</CENTER>
<PRE> y escribir preformateado </PRE>
<BLINK>y a escribir texto parpadeante</BLINK>
<HR>
</BODY>
</HTML>

Guardamos el fichero de texto con el nombre ejemplo2.html y lo cargamos en el

navegador.

6. Enlaces
La clave de la facilidad de uso de los documentos HTML, reside fundamentalmente en
los enlaces. Los enlaces (o links) proporciona al que visita las páginas un mecanismo
muy sencillo para moverse entre distintos documentos, permitiéndole moverse en
aquellos aspectos que considere más importantes, mientras que desde el punto de
vista del que crea las páginas permite distribuir de forma transparente al visitante el
lugar o lugares en los que se van a almacenar los distintos documentos.

Para definir enlaces hipertexto se utiliza la marca <A> de la manera siguiente:

<a href=”dirección”>Texto del enlace</a>

1 Introducción a HTML 6
 donde:

• dirección: es el destino del enlace.

• texto del enlace: es el texto indicativo del enlace que aparece en la pantalla
normalmente con color especial y subrayado.

<a> requiere de la marca de fin.

Vamos a distinguir tres tipos de enlaces:

1. Enlaces a otras zonas de la misma página

2. Enlaces a otras páginas.
3. Enlaces a otras zonas de otras páginas.

6.1 A otra zona de la misma página

A veces, en el caso de documentos (o páginas) muy extensos, nos puede interesar dar
un salto desde una posición a otra determinada.

Así es posible hacer enlaces que lleven al usuario de una parte del documento a otra
dentro del mismo documento con solo hacer click. A este tipo de enlaces los
llamaremos enlaces locales.

Estos enlaces constan de dos objetos:

• El enlace:

Corresponde a la zona en la cual el usuario hará click, para viajar a otra parte del
documento.

1 Introducción a HTML 6
 Esta zona aparece subrayada en el documento. Un enlace local se crea
delimitando la zona con el comando <a href="#nombre"> ... </a>, en que
nombre es la etiqueta que se está referenciando.

• El nombre enlazado o referenciado

Corresponde a la zona del documento a la cual el usuario llegará al hacer click

en la referencia correspondiente. Un nombre local se crea delimitando la zona
con el comando <a name="nombre"> ... </a>, en que nombre es la etiqueta que
asignamos a esta zona.

Ejemplo práctico nº 3 de enlaces locales

<HTML>
<HEAD>
<TITLE>Ejemplo 3 - Enlaces locales</TITLE>
</HEAD>
<BODY>
<H2>Enlaces locales</H2>
<H3><A NAME="indice">Índice</A></H3>
<UL>
<LI><A HREF="#uno">Sección uno</A>
<LI><A HREF="#dos">Sección dos</A>
<LI><A HREF="#tres">Sección tres</A>
<LI><A HREF="#cuatro">Sección cuatro</A>
<LI><A HREF="#cinco">Sección cinco</A>
<LI><A HREF="#seis">Sección seis</A>
<LI><A HREF="#siete">Sección siete</A>

1 Introducción a HTML 6
 <LI><A HREF="#ocho">Sección ocho</A>
</UL>
<H3><A NAME="uno">Sección uno</A></H3>
<P>Esta es la sección 1 de la página de enlaces
locales</P>
<P>Click aquí para <A href="#indice">volver al índice</A>
<H3><A NAME="dos">Sección dos</A></H3>
<P>Esta es la sección 2 de la página de enlaces
locales</P>
<P>Click aquí para <A href="#indice">volver al
índice</A>
<H3><A NAME="tres">Sección tres</A></H3>
<P>Esta es la sección n 3 de la página de enlaces
locales</P>
<P>Click aquí para <A href="#indice">volver al
índice</A>
<H3><A NAME="cuatro">Sección cuatro</A></H3>
<P>Esta es la sección 4 de la página de enlaces
locales</P>
<P>Click aqui para <A href="#indice">volver al
índice</A>
<H3><A NAME="cinco">Sección cinco</A></H3>
<P>Esta es la sección 5 de la página de enlaces
locales</P>
<P>Click aquí para <A href="#indice">volver al
índice</A>
<H3><A NAME="seis">Sección seis</A></H3>
<P>Esta es la sección 6 de la página de enlaces
locales</P>
<P>Click aquí para <A href="#indice">volver al
índice</A>

1 Introducción a HTML 6
 <H3><A NAME="siete">Sección siete</A></H3>
<P>Esta es la sección 7 de la página de enlaces
locales</P>
<P>Click aquí para <A href="#indice">volver al
índice</A>
<H3><A NAME="ocho">Sección ocho</A></H3>
<P>Esta es la sección 8 de la página de enlaces
locales</P>
<P>Click aqui para <A href="#indice">volver al
índice</A>
</BODY>
</HTML>

Guardamos el fichero de texto con el nombre ejemplo3.html y lo cargamos en el

navegador.

Como vemos, las referencias locales son muy útiles para crear índices al comienzo del
documento.

6.2 A otras páginas

Para enlazar a otro documento, es necesario conocer la ubicación exacta del

documento que se referenciará. Una ubicación, puede ser referenciada en forma
relativa o absoluta

• Ubicación relativa:

Se indica especificando la posición del documento en la estructura de

subdirectorios a partir de la ubicación del documento actual. Sólo se puede usar
para documentos ubicados en el mismo ordenador.

Una referencia relativa a otro documento se hace usando el comando:

1 Introducción a HTML 6
 <A HREF="ubicación"> ... </A>

• Ubicación absoluta:

Se indica especificando el URL (Uniform Resurce Locator) de la página que se

está referenciando.

Los URL son una manera universal de especificar una dirección. La forma más
básica de referenciar un hypertexto es usar el comando:

<A href="http://ordenador/directorio/archivo"> ...

El ordenador indica la máquina donde se encuentra el documento. El directorio

y archivo indican su posición dentro de ese ordenador. Los URL tienen muchas
formas distintas para referenciar distintos objetos.

Ejemplo práctico nª 4:

<HTML>
<HEAD>
<TITLE>Ejemplo 4 - Enlaces a otras páginas</TITLE>
</HEAD>
<BODY>
<H1>Enlaces a otras páginas</H1>
<H2>Referencias relativas</H2>
<P>Se puede referenciar, por ejemplo, a un archivo
localizado en el mismo directorio, como por ejemplo, al
<A href="ejemplo1.html">ejemplo número 1</A>. También a un
archivo localizado en otro directorio, por ejemplo, esta
<A HREF="../guiahtml.html">guía HTML</a></P>
<H2>Referencias absolutas</H2>
<H3>Algunos servicios WWW en España</H3>

1 Introducción a HTML 6
 <P>La <A HREF="http://www.um.es/~biblio/">biblioteca de la
Universidad de Murcia</A> que permite acceso al catálogo
de la biblioteca. También está el servidor WWW de
<A HREF="http://www.rediris.es/">RedIris</A> y el servidor
de <A HREF="http://www.boe.es/">BOE</A> para leer
consultar de BOEs </P>
<H3>Algunos servicios en el extranjero</H3>
<P>Para informarse de la actualidad mundial, se puede
acceder al servicio <A HREF="http://www.cnn.com/">CNN</A>.
Para los amantes de la música se encuentra el servidor
oficial de la <A HREF="http://mtv.com/">MTV</A> y para
localizar distintos tipos de información está
<A HREF="http://www.yahoo.com/">Yahoo!</A>.
</BODY>
</HTML>

Guardamos el fichero de texto con el nombre ejemplo4.html y lo cargamos en el

navegador.

6.3 A una zona de otra página

Para este tipo de enlaces se utiliza una mezcla de las dos formas anteriores. Se indica
el URL de la página a referenciar, luego un signo # y luego el nombre de la zona a
referenciar.

Ejemplo práctico nº5

<HTML>
<HEAD>
<TITLE>Ejemplo 5- Enlaces a zonas de otras páginas</TITLE>
</HEAD>
<BODY>
<H1>Enlaces a zonas de otras páginas</H1>

1 Introducción a HTML 6
 <P>Enlazamos a la <A HREF="ejemplo3.html#uno">la sección 1
del ejemplo 3</A></P>
<P>Enlazamos a la <A HREF="ejemplo3.html#cinco">la sección
5 del ejemplo 3</A></P>
</BODY>
</HTML>

Guardamos el fichero de texto con el nombre ejemplo5.html y lo cargamos en el

navegador.

7. Imágenes
Las imágenes son un elemento esencial para diseñar páginas atractivas. No obstante,
un excesivo número de imágenes en una página pueden hacer ralentizar el proceso de
visualización (las imágenes son las partes de las páginas que más espacio ocupan, por
lo que su transferencia requiere más tiempo que la del texto). Es importante conseguir
un compromiso entre una página atractiva (lo que lleva incluir gráficos), y una página
que pueda cargarse en un tiempo razonable

7.1 Principales formatos gráficos

Existen una gran cantidad de formatos gráficos en el mundo de los ordenadores, cada
uno de ellos con sus ventajas e inconvenientes. Sin embargo, a la hora de publicar en
Internet, solamente debemos tener en cuenta dos formatos muy específicos: el GIF y
el JPEG. Su elección no es en absoluto un capricho, además de la alta resolución que
consiguen, se trata como veremos, de dos formatos que comprimen el tamaño de las
imágenes, por lo que éstas pueden transmitirse más rápidamente por Internet.

Para crear y manipular imágenes hay que utilizar un editor de imágenes, entre los más
conocidos se encuentran: Paint Shop Pro, Gif Construction Set, y Graphic Workshop.

1 Introducción a HTML 6
 Formato GIF.

Las siglas GIF provienen del inglés Graphics Interchange Format o formato de
intercambio de gráficos. Este formato fue desarrollado por CompuServe para
proporcionar un mecanismo de transmisión de archivos de imágenes mediante líneas
telefónicas. Este mecanismo consiste en comprimir las imágenes para una transmisión
más rápida en un medio de baja capacidad como son los hilos telefónicos.

Las imágenes en formato GIF están limitadas a 256 colores simultáneos.

Una propiedad interesante del formato GIF es la de poder seleccionar un color

“transparente”. Así, cuando la imagen en cuestión es mostrada en un visualizador, la
zona de la imagen con el color transparente toma el color del fondo del documento.

Otra propiedad interesante del formato GIF, es la poder crear gráficos animados, el
formato de este tipo de imágenes se le denomina GIF 89.

Los archivos de imágenes en este formato tienen asociados la extensión .gif.

Formato JPEG.

JPEG son las iniciales de Joint Photographic Expert Group (Grupo de Expertos
Fotográficos Reunidos). Al igual que el formato GIF, comprime las imágenes para una
transmisión más rápida, aunque difiere en el algoritmo de compresión.

Mientras que con el formato GIF la comprensión de un archivo de imágenes viene

determinada, JPEG nos permite especificar la relación de compresión deseada, por lo
que podemos variar el tamaño del archivo. Naturalmente, a mayor relación de
compresión, menor tamaño y peor calidad en la imagen final. Disminuyendo la
compresión obtenemos imágenes de mayor calidad, pero también de mayor tamaño.

1 Introducción a HTML 6
 No debemos obsesionarnos con la calidad de las imágenes. Hay que tener presente
que Internet es en ocasiones un medio de transmisión bastante lento, por lo que a
veces es preferible perder algo de calidad en las imágenes antes de aburrir al visitante
con nuestros documentos.

Los archivos de imágenes en este formato tienen asociado la extensión .jpg.

Formato PNG.

Portable Network Graphics (PNG) (siglas en inglés de Gráficos de Red Portátiles,

pronunciadas "ping") es un formato gráfico basado en un algoritmo de compresión sin
pérdida para bitmaps no sujeto a patentes. Este formato fue desarrollado en buena
parte para solventar las deficiencias del formato GIF y permite almacenar imágenes
con una mayor profundidad de contraste y otros importantes datos.

Las imágenes PNG usan la extensión .png y han obtenido un tipo MIME (image/png)
aprobado el 14 de octubre de 1996.

PNG ofrece una gran variedad de opciones de transparencia: con color verdadero o
escala de grises, incluso un solo píxel puede ser declarado transparente o puede
añadirse un canal alfa. Para imágenes que usan paletas se puede añadir un canal alfa
en las entradas de la paleta. El número de dichos valores almacenados puede ser
menor que el total de entradas en la paleta, de modo que el resto de las entradas se
considerarán completamente opacas. La búsqueda de píxeles con transparencia
binaria debe hacerse antes de cualquier reducción de color para evitar que algunos
píxeles se conviertan en transparentes accidentalmente.

1 Introducción a HTML 6
 A diferencia de la transparencia ofrecida por GIF que sólo puede tomar 2 valores
(completamente transparente o completamente opaco), el canal alfa de PNG permite
utilizar mayor profundidad de bits para lograr efectos de semi-transparencia, propios
de objetos translúcidos. Por ejemplo, con una profundidad de 8 bits para
transparencias se pueden conseguir 28 = 256 grados diferentes de transparencia, como
si se tratara de un color.

7.2 Inclusión de imágenes

La etiqueta que se utiliza para la inclusión de imágenes en una página Web es la

siguiente:

<img src=”imagen.jpg”></img>

donde imagen.jpg es un archivo de imagen

7.2.1 Tamaño de las imágenes

Si no especificamos nada más, las imágenes aparecerán en el navegador con el tamaño
que tienen originalmente.

Para modificar el tamaño de las imágenes se utilizan los siguientes modificadores en la

etiqueta <IMG>:

• WIDTH: especifica la anchura en pixels de la imagen.

• HEIGTH: especifica el número de pixels que tendrá de alto la imagen.

7.2.2 Escalado de imágenes

Con el uso de loa modificadores HEIGHT y WIDTH podemos ampliar, y reducir las
imágenes sin deformarlas, es decir, escalarlas. Una manera cómoda de hacerlo es
solamente especificar una de las dos dimensiones, se asume que la reducción o la
ampliación es proporcional a la otra.

1 Introducción a HTML 6
 7.2.3 Bordes de la imagen
Mediante el modificador BORDER se puede añadir bordes a nuestras imágenes.

7.2.4 Alineación de texto con las imágenes

La alineación del texto con las imágenes se realiza mediante el modificador ALIGN. Los
valores que este modificador puede tomar son: TOP, TEXTOP, CENTER, ABSCENTER,
MIDDLE, ABSMIDDLE, BOTTOM, LEFT, y RIGTH.

Además, podemos especificar la distancia que queremos establecer entre el gráfico y

el texto. Si este parámetro no se establece, el texto es situado justo a continuación de
la imagen. Para introducir espacios horizontales y verticales a continuación de la
imagen se utilizan los modificadores VSPACE y HSPACE.

7.2.5 Imágenes con texto alternativo

Los visualizadores tienen la opción de no mostrar las imágenes, en un intento de
acelerar el acceso a las páginas. Muchas veces, las imágenes incluidas en una página
son fundamentales para comprender la información que se ofrece. Por ejemplo, una
página destinada a alumnos universitarios de asignaturas de estadística o matemáticas
puede contener imágenes de fórmulas matemáticas. Para estos casos se puede añadir
a la imagen un texto ALTernativo, que dé una idea del contenido de la imagen. Para
añadir un texto alternativo, se utiliza la orden como se muestra a continuación:

<IMG SRC="nombre_imagen" ALT="Texto_alternativo">

7.2.6 Uso de imágenes con enlaces

Para utilizar una imagen como enlace a otra parte de la página o a otra página,
simplemente hay que introducirlas dentro de la etiqueta <A HREF> de la siguiente
manera:

<A HREF=”enlace”> <IMG SRC=”imagen”> </A>

1 Introducción a HTML 6
 7.2.7 Imágenes como fondo de un documento
Un efecto muy utilizado es el uso de imágenes como fondo de un documento HTML.
La manera de hacerlo es con el atributo BACKGROUND de la marca <BODY>.

La imagen de fondo en general será más pequeña que el área de documento del
navegador. Lo que hace entonces el navegador es repetir, partiendo de la esquina
superior izquierda, la imagen que hemos elegido como fondo del documento.

A la hora de elegir la imagen de fondo, es preciso tener en cuenta que el texto del
documento debe ser legible por encima de la imagen, por lo que hay que evitar colocar
imágenes con colores demasiado fuertes.

7.2.8 Mapas sensitivos

Los mapas sensitivos o mapas de imágenes son un tipo determinado de enlace
mediante gráficos. Constituyen una herramienta de gran potencia, aunque son algo
complicados de construir y mantener.

Los mapas sensitivos están compuestos de dos elementos fundamentales: la imagen

del mapa y los enlaces de cada zona del mapa.

La imagen del mapa es la imagen que vamos a dividir en zonas distintas. Pulsando en
cada una de esas zonas iríamos a un enlace distinto.

Los mapas sensitivos no se explican en esta guía. Puede encontrar información más
información sobre los mapas sensitivos en las referencias que se incluyen en el
apartado "Direcciones Internet de interés".

Ejemplo práctico nº6

<HTML>

1 Introducción a HTML 6
 <HEAD>
<TITLE>Ejemplo 6 - Imágenes </TITLE>
</HEAD>
<BODY BACKGROUND="nubes.jpg" TEXT="#AA0000">
<CENTER>
<H1>Imágenes</H1>
<HR>
<P>Esta es mi página del Web. No es muy extensa, pero
tiene todos los elementos básicos. Espero que os
guste. Poco a poco le iré añadiendo más cosas
interesantes</P>
<P><A HREF="ejemplo2.html"><IMG SRC="hombre.gif"></A>
<FONT SIZE=+3>Mis aficiones</FONT></P>
<P><A HREF="ejemplo4.html"> <IMG SRC="casa.gif"> </A>
<FONT SIZE=+3>Mis páginas favoritas</FONT></P>
<H3>Un lugar ideal para mis vacaciones</H3>
<IMG SRC="isla.gif" ALT="isla">
<HR>
<H3>Expediente X - Mulder</H3>
<IMG SRC="3mulder.gif" WIDTH=119 HEIGHT=160></CENTER>
</CENTER>
</BODY>
</HTML>

Guardamos el fichero de texto con el nombre ejemplo6.html y lo cargamos en el

navegador.

1 Introducción a HTML 6
 8. Tablas
Una tabla es una manera muy compacta y clara de mostrar la información. Una tabla
en HTML se entiende como un conjunto de filas (fila=horizontal), apiladas una sobre
otra. Cada fila contiene a su vez un conjunto de celdas, puestas una al lado de la otra.

Una tabla se declara usando el comando <TABLE> ... </TABLE>. Dentro de la tabla, se
usa <TR>.. </TR>para indicar una fila y dentro de una fila, <TD> ... </TD> para delimitar
el contenido de una celda. El elemento de cierre de fila y de celda es optativo.

El texto incluido dentro de cada celda puede ser formateado con cualquiera de las
etiquetas vistas anteriormente

Todos estos comandos aceptan numerosos modificadores. Se pueden, entre otras

cosas, unir celdas, especificar la alineación del contenido de la celda, y mucho más.

Para entender mejor el comando <TABLE> ... </TABLE>, está disponible una muy
amplia gama de ejemplos.

Ejemplo de tabla

Aquí se muestra una tabla muy simple:

<TABLE>
<TR><TD>Celda A1</TD><TD>Celda B1</TD><TD>Celda
C1</TD></TR>
<TR><TD>Celda A2</TD><TD>Celda B2</TD><TD>Celda
C2</TD></TR>
<TR><TD>Celda A3</TD><TD>Celda B3</TD><TD>Celda
C3</TD></TR>
</TABLE>

1 Introducción a HTML 6
 8.1 Título de la tabla

Es conveniente que las tablas tengan un título que las identifique y aclare su contenido.
Aunque ese título puede ser contenido colocando texto formateado antes de la tabla,
HTML dispone de la etiqueta <CAPTION> para darle nombre a la tabla, de la siguiente
forma:

<TABLE>
<CAPTION> Nombre de la tabla </CAPTION>
……….
</TABLE>

Esta etiqueta tiene la ventaja que el texto formateado se coloca automáticamente en

el centro de la anchura de la tabla.

8.2 Bordes de la tabla

Para colocar bordes a una tabla en HTML se utiliza el modificador BORDER dentro de
la etiqueta <TABLE>. La sintaxis es:

<TABLE BORDER="anchura">
……….
</TABLE>

donde anchura indica la anchura en pixeles del borde exterior de la tabla.

El modificador BORDER coloca bordes externos e internos en la tabla, pero la anchura

que se especifica solo afecta a los bordes externos.

El efecto de sombreado del borde exterior se produce cuando el modificador BORDER

toma un valor superior a uno. Si queremos que el borde exterior de la tabla sea igual
que los bordes interiores, debemos hacer BORDER=”1”.

1 Introducción a HTML 6
 8.3 Cabeceras de filas y columnas

La inclusión de cabeceras en cada fila y columna ayuda a comprender el contenido de

la tabla.

No hay ninguna dificultad para hacer esto con las etiquetas que hemos visto. Sin
embargo, existe una forma alternativa de indicar la cabecera de una fila o columna
mediante la etiqueta <TH>. La desventaja de usar esta etiqueta es que el texto que va
dentro de ella no admite formateado como el de las otras celdas.

8.4 Tamaño de la tabla

Por defecto el tamaño de la tabla viene dado por el texto o los gráficos que contiene.
Sin embargo, es posible que en ocasiones queramos cambiar la anchura de nuestra
tabla.

La forma de establecer una anchura fija en una tabla es utilizar el modificador WIDTH
dentro de la etiqueta <TABLE>. La sintaxis es:

<TABLE WIDTH="anchura"> ……… </TABLE>

Aquí anchura puede ser un número que especifique en pixeles la anchura absoluta de
la tabla, o bien un porcentaje que indique la anchura de la tabla en relación a la anchura
del área del documento del navegador.

A pesar de que podemos especificar la anchura de la tabla, si el texto de las celdas

ocupa una anchura mayor, la tabla tomará la anchura mínima para que el texto de las
celdas pueda verse íntegramente.

1 Introducción a HTML 6
 8.5 Justificación de la tabla

Por defecto, nuestra tabla quedará justificada a la izquierda. La forma de centrarla es

mediante la etiqueta <CENTER>.

8.6 Espacio dentro de las celdas

Es posible que queramos que nuestro texto no quede apretado dentro de las celdas,
sino que exista más espacio entre los textos de las celdas contiguas de forma que
pueda leerse mejor. Esto puede hacerse mediante los dos siguientes modificadores:

• CELLPADDING: establece la distancia mínima en pixels entre los bordes de cada

celda y el texto que va encerrado en ellas. Su valor por defecto es 1.
• CELLSPACING: establece la anchura en pixels de los bordes de cada celda.

8.7 Forma de las celdas individuales

8.7.1 Justificación del texto de las celdas

HTML permite justificar horizontal y verticalmente el texto dentro de cada celda. Para
ello implementa los modificadores ALIGN y VALIGN dentro de la etiqueta <TD>. La
forma de hacerlo es:

<TABLE>
<TR>
<TD ALIGN=”horizontal” VALIGN=”vertical”>
…
</TD>
</TR>
</TABLE>

1 Introducción a HTML 6
 donde:

• horizontal puede tomar los valores CENTER, LEFT y RIGHT. Por defecto vale LEFT.
• vertical: puede tomar los valores TOP, MIDDLE, BOTTOM, y BASELINE. Por
defecto vale CENTER.

Si queremos que una determinada justificación horizontal o vertical afecte a todas las
celdas de una fila, podemos hacerlo incluyendo el modificador ALIGN o VALIGN dentro
de la etiqueta <TR>.

8.7.2 Celdas de diferentes tamaños

Por defecto, todas las celdas que constituyen una tabla en HTML tienen el mismo
tamaño. Sin embargo, es posible establecer el tamaño de una determinada celda
mediante dos modificadores de la etiqueta <TD>, que son WIDTH y HEIGHT:

• WIDTH: especifica la anchura del texto en una celda concreta. Se puede

especificar como valor absoluto o bien como relativo en forma de porcentaje de
la anchura de la tabla.
• HEIGHT: establece la altura de una celda individual.

No es posible usar los modificadores WIDTH y HEIGTH para aplicarlos a toda una fila.
La única forma de hacerlo es poniendo en cada celda de la fila los valores
correspondientes de WIDTH y HEIGHT.

8.7.3 Celdas irregulares

Podemos desear que una de nuestras celdas ocupe varias filas y/o columnas. La forma
de hacerlo es introducir los modificadores COLSPAN y ROWSPAN en la etiqueta <TD>:

1 Introducción a HTML 6
 • COLSPAN= especifica la altura de una celda en concreta en función de la altura
de las celdas adyacentes. Se especifica en número de celdas adyacentes.
• ROWSPAN: especifica la anchura de una concreta en función de las celdas que
están debajo. Se especifica en número de celdas de debajo.

8.7.4 Color de cada celda

Para especificar el color de cada celda de la tabla se utiliza el modificador BGCOLOR en
la etiqueta <TD>. Como formato de colores se acepta el hexadecimal o una cadena de
caracteres.

8.7.5 Texto en una sola línea

Si hemos indicado la anchura de una celda y ésta es menor que el texto incluido en ella,
y queremos que el texto no ocupe más líneas, sino que se amplíe la anchura de la celda,
debemos añadir el modificador NOWRAP dentro de la etiqueta <TD>.

Ejemplo práctico nº7

<HTML>
<HEAD>
<TITLE>Ejemplo 7 - Tablas</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Tablas</H1></CENTER>
<H2>Demostración de COLSPAN y Encabezados</H2>
<TABLE WIDTH="100%" BORDER="1">
<TR>
<TH COLSPAN="2">Head1</TH>
<TH COLSPAN="2">Head2</TH>

1 Introducción a HTML 6
 </TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
<TD>D</TD>
</TR>
<TR>
<TD>E</TD>
<TD>F</TD>
<TD>G</TD>
<TD>H</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Guardamos el fichero de texto con el nombre ejemplo7.html y lo cargamos en el

navegador.

1 Introducción a HTML 6
 9. Elementos HTML 5
9.1 Introducción

HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siquiera una
mejora de esta ya antigua tecnología, sino un nuevo concepto para la construcción de
sitios web y aplicaciones en una era que combina dispositivos móviles, computación
en la nube y trabajos en red.

Todo comenzó mucho tiempo atrás con una simple versión de HTML propuesta para
crear la estructura básica de páginas web, organizar su contenido y compartir
información. El lenguaje y la web misma nacieron principalmente con la intención de
comunicar información por medio de texto.

El limitado objetivo de HTML motivó a varias compañías a desarrollar nuevos lenguajes

y programas para agregar características a la web nunca antes implementadas. Estos
desarrollos iniciales crecieron hasta convertirse en populares y poderosos accesorios.
Simples juegos y bromas animadas pronto se transformaron en sofisticadas
aplicaciones, ofreciendo nuevas experiencias que cambiaron el concepto de la web
para siempre.

1 Introducción a HTML 6
 De las opciones propuestas, Java y Flash fueron las más exitosas; ambas fueron
masivamente adoptadas y ampliamente consideradas como el futuro de Internet. Sin
embargo, tan pronto como el número de usuarios se incrementó e Internet pasó de
ser una forma de conectar amantes de los ordenadores a un campo estratégico para
los negocios y la interacción social, limitaciones presentes en estas dos tecnologías
probaron ser una sentencia de muerte.

El mayor inconveniente de Java y Flash puede describirse como una falta de

integración. Ambos fueron concebidos desde el principio como complementos (plug-
ins), algo que se inserta dentro de una estructura pero que comparte con la misma solo
espacio en la pantalla. No existía comunicación e integración alguna entre aplicaciones
y documentos.

La falta de integración resultó ser crítica y preparó el camino para la evolución de un

lenguaje que comparte espacio en el documento con HTML y no está afectado por las
limitaciones de los plug-ins. Javascript, un lenguaje interpretado incluido en
navegadores, claramente era la manera de mejorar la experiencia de los usuarios y
proveer funcionalidad para la web. Sin embargo, después de algunos años de intentos
fallidos para promoverlo y algunos malos usos, el mercado nunca lo adoptó
plenamente y pronto su popularidad declinó. Los detractores tenían buenas razones
para oponerse a su adopción.

En ese momento, Javascript no era capaz de reemplazar la funcionalidad de Flash o

Java. A pesar de ser evidente que ambos limitaban el alcance de las aplicaciones y
aislaban el contenido web, populares funciones como la reproducción de video se
estaban convirtiendo en una parte esencial de la web y solo eran efectivamente
ofrecidas a través de estas tecnologías.

1 Introducción a HTML 6
 A pesar del suceso inicial, el uso de Java comenzó a declinar. La naturaleza compleja
del lenguaje, su evolución lenta y la falta de integración disminuyeron su importancia
hasta el punto en el que hoy día no es más usado en aplicaciones web de importancia.
Sin Java, el mercado volcó su atención a Flash. Pero el hecho de que Flash comparte
las mismas características básicas que su competidor en la web lo hace también
susceptible de correr el mismo destino.

Mientras esta competencia silenciosa se llevaba a cabo, el software para acceder a la

web continuaba evolucionando. Junto con nuevas funciones y técnicas rápidas de
acceso a la red, los navegadores también mejoraron gradualmente sus intérpretes
Javascript. Más potencia trajo más oportunidades y este lenguaje estaba listo para
aprovecharlas.

En cierto punto durante este proceso, se hizo evidente para algunos desarrolladores
que ni Java o Flash podrían proveer las herramientas que ellos necesitaban para crear
las aplicaciones demandadas por un número creciente de usuarios. Estos
desarrolladores, impulsados por las mejoras otorgadas por los navegadores,
comenzaron a aplicar Javascript en sus aplicaciones de un modo nunca visto. La
innovación y los increíbles resultados obtenidos llamaron la atención de más
programadores. Pronto lo que fue llamado la “Web 2.0” nació y la percepción de
Javascript en la comunidad de programadores cambió radicalmente.

Javascript era claramente el lenguaje que permitía a los desarrolladores innovar y

hacer cosas que nadie había podido hacer antes en la web. En los últimos años,
programadores y diseñadores web alrededor del mundo surgieron con los más
increíbles trucos para superar las limitaciones de esta tecnología y sus iniciales
deficiencias en portabilidad. Gracias a estas nuevas implementaciones, Javascript,

1 Introducción a HTML 6
 HTML y CSS se convirtieron pronto en la más perfecta combinación para la necesaria
evolución de la web.

HTML5 es, de hecho, una mejora de esta combinación, el pegamento que une todo.
HTML5 propone estándares para cada aspecto de la web y también un propósito claro
para cada una de las tecnologías involucradas. A partir de ahora, HTML provee los
elementos estructurales, CSS se encuentra concentrado en cómo volver esa estructura
utilizable y atractiva a la vista, y Javascript tiene todo el poder necesario para proveer
dinamismo y construir aplicaciones web completamente funcionales.

Las barreras entre sitios webs y aplicaciones finalmente han desaparecido. Las
tecnologías requeridas para el proceso de integración están listas. El futuro de la web
es prometedor y la evolución y combinación de estas tres tecnologías (HTML, CSS y
Javascript) en una poderosa especificación está volviendo a Internet la plataforma líder
de desarrollo. HTML5 indica claramente el camino.

9.2 Inicializar un documento HTML. <!DOCTYPE>

Declarar un documento como HTML5 es extremadamente sencillo. Únicamente

tenemos que indicar al comienzo del todo el DOCTYPE con la siguiente línea:

<!DOCTYPE html>

Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la precedan.
De esta forma, el modo estándar del navegador es activado y las incorporaciones de
HTML5 son interpretadas siempre que sea posible, o ignoradas en caso contrario

1 Introducción a HTML 6
 9.3 Estructura del cuerpo con HTML5

La siguiente ilustración representa un diseño común encontrado en la mayoría de los

sitios webs estos días. A pesar del hecho de que cada diseñador crea sus propios
diseños, en general podremos identificar las siguientes secciones en cada sitio web
estudiado:

Ilustración 1 - Representación visual de un clásico diseño web

En la parte superior, descripto como Cabecera, se encuentra el espacio donde

usualmente se ubica el logo, título, subtítulos y una corta descripción del sitio web o la
página.

Inmediatamente debajo, podemos ver la Barra de Navegación en la cual casi todos los
desarrolladores ofrecen un menú o lista de enlaces con el propósito de facilitar la
navegación a través del sitio. Los usuarios son guiados desde esta barra hacia las
diferentes páginas o documentos, normalmente pertenecientes al mismo sitio web.

1 Introducción a HTML 6
 El contenido más relevante de una página web se encuentra, en casi todo diseño,
ubicado en su centro. Esta sección presenta información y enlaces valiosos. La mayoría
de las veces es dividida en varias filas y columnas. En el ejemplo de la Ilustración 1 se
utilizaron solo dos columnas: Información Principal y Barra Lateral, pero esta sección
es extremadamente flexible y normalmente diseñadores la adaptan acorde a sus
necesidades insertando más columnas, dividiendo cada columna entre bloques más
pequeños o generando diferentes distribuciones y combinaciones. El contenido
presentado en esta parte del diseño es usualmente de alta prioridad. En el diseño de
ejemplo, Información Principal podría contener una lista de artículos, descripción de
productos, entradas de un blog o cualquier otra información importante, y la Barra
Lateral podría mostrar una lista de enlaces apuntando hacia cada uno se esos ítems.
En un blog, por ejemplo, esta última columna ofrecerá una lista de enlaces apuntando
a cada entrada del blog, información acerca del autor, etc…

En la base de un diseño web clásico siempre nos encontramos con una barra más que
aquí llamamos Institucional. La nombramos de esta manera porque esta es el área en
donde normalmente se muestra información acerca del sitio web, el autor o la
empresa, además de algunos enlaces con respecto a reglas, términos y condiciones y
toda información adicional que el desarrollador considere importante compartir. La
barra Institucional es un complemento de la Cabecera y es parte de lo que se considera
estos días la estructura esencial de una página web.

HTML5 considera esta estructura básica y provee nuevos elementos para diferenciar y
declarar cada una de sus partes. A partir de ahora podemos decir al navegador para
qué es cada sección

1 Introducción a HTML 6
 9.3.1 <header>
Uno de los nuevos elementos incorporados en HTML5 es <header>. El elemento
<header> no debe ser confundido con <head> usado antes para construir la cabecera
del documento. Del mismo modo que <head>, la intención de <header> es proveer
información introductoria (títulos, subtítulos, logos), pero difiere con respecto a
<head> en su alcance.

Mientras que el elemento <head> tiene el propósito de proveer información acerca

de todo el documento, <header> es usado solo para el cuerpo o secciones específicas
dentro del cuerpo:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
</body>
</html>

1 Introducción a HTML 6
 9.3.2 <nav>
Siguiendo con nuestro ejemplo, la siguiente sección es la Barra de Navegación. Esta
barra es generada en HTML5 con el elemento:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
</body>
</html>

1 Introducción a HTML 6
 Como se puede apreciar en el Listado 1-11, el elemento <nav> se encuentra dentro de
las etiquetas <body> pero es ubicado después de la etiqueta de cierre de la cabecera
(</header>), no dentro de las etiquetas <header>. Esto es porque <nav> no es
parte de la cabecera sino una nueva sección.

La estructura y el orden que elegimos para colocar los elementos HTML5 dependen de
nosotros. Esto significa que HTML5 es versátil y solo nos otorga los parámetros y
elementos básicos con los que trabajar, pero cómo usarlos será exclusivamente
decisión nuestra. Un ejemplo de esta versatilidad es que el elemento <nav> podría ser
insertado dentro del elemento <header> o en cualquier otra parte del cuerpo. Sin
embargo, siempre se debe considerar que estas etiquetas fueron creadas para brindar
información a los navegadores y ayudar a cada nuevo programa y dispositivo en el
mercado a identificar las partes más relevantes del documento. Para conservar nuestro
código portable y comprensible, recomendamos como buena práctica seguir lo que
marcan los estándares y mantener todo tan claro como sea posible.

El elemento <nav> fue creado para ofrecer ayuda para la navegación, como en menús
principales o grandes bloques de enlaces, y debería ser utilizado de esa manera.

9.3.3 <section>
Siguiendo nuestro diseño estándar nos encontramos con las columnas que en la
Ilustración 1 llamamos Información Principal y Barra Lateral.

Como explicamos anteriormente, la columna Información Principal contiene la

información más relevante del documento y puede ser encontrada en diferentes
formas (por ejemplo, dividida en varios bloques o columnas). Debido a que el propósito
de estas columnas es más general, el elemento en HTML5 que especifica estas
secciones se llama simplemente <section>:

1 Introducción a HTML 6
 <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
</body>
</html>

1 Introducción a HTML 6
 Al igual que la Barra de Navegación, la columna Información Principal es una sección
aparte. Por este motivo, la sección para Información Principal va debajo de la etiqueta
de cierre </nav>.

Las etiquetas que representan cada sección del documento están localizadas en el
código en forma de lista, unas sobre otras, pero en el sitio web algunas de estas
secciones se ubicarán lado a lado (las columnas Información Principal y Barra Lateral
son un claro ejemplo). En HTML5, la responsabilidad por la representación de los
elementos en la pantalla fue delegada a CSS. El diseño será logrado asignando estilos
CSS a cada elemento HTML. Estudiaremos CSS en el próximo capítulo.

9.3.4 <aside>
En un típico diseño web, la columna llamada Barra Lateral se ubica al lado de la
columna Información Principal. Esta es una columna o sección que normalmente
contiene datos relacionados con la información principal pero que no son relevantes o
igual de importantes.

En el diseño de un blog, por ejemplo, la Barra Lateral contendrá una lista de enlaces.
La información dentro de esta barra está relacionada con la información principal pero
no es relevante por sí misma.

Siguiendo el mismo ejemplo podemos decir que las entradas del blog son relevantes
pero los enlaces y las pequeñas reseñas sobre esas entradas son solo una ayuda para
la navegación, pero no lo que al lector realmente le interesa.

En HTML5 podemos diferenciar esta clase secundaria de información utilizando el

elemento <aside>:

<!DOCTYPE html>

1 Introducción a HTML 6
 <html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>

1 Introducción a HTML 6
 </body>
</html>

El elemento <aside> podría estar ubicado del lado derecho o izquierdo de nuestra
página de ejemplo, la etiqueta no tiene una posición predefinida. El elemento
<aside> solo describe la información que contiene, no el lugar dentro de la
estructura. Este elemento puede estar ubicado en cualquier parte del diseño y ser
usado siempre y cuando su contenido no sea considerado como el contenido principal
del documento. Por ejemplo, podemos usar <aside> dentro del elemento
<section> o incluso insertado entre la información relevante, como una cita.

9.3.5 <footer>
Para finalizar la construcción de la plantilla o estructura elemental de nuestro
documento HTML5, solo necesitamos un elemento más. Ya contamos con la cabecera
del cuerpo, secciones con ayuda para la navegación, información importante y hasta
una barra lateral con datos adicionales, por lo tanto, lo único que nos queda por hacer
es cerrar nuestro diseño para otorgarle un final al cuerpo del documento. HTML5
provee un elemento específico para este propósito llamado <footer>:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>

1 Introducción a HTML 6
 <body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados &copy; 2010-2018
</footer>
</body>
</html>

En el típico diseño de una página web (Ilustración 1) la sección llamada Institucional

será definida por etiquetas <footer>. Esto es debido a que la barra representa el final

1 Introducción a HTML 6
 (o pie) del documento y esta parte de la página web es normalmente usada para
compartir información general sobre el autor o la organización detrás del proyecto.

Generalmente, el elemento <footer> representará el final del cuerpo de nuestro

documento y tendrá el propósito descripto anteriormente. Sin embargo, <footer>
puede ser usado múltiples veces dentro del cuerpo para representar también el final
de diferentes secciones (del mismo modo que la etiqueta <header>). Estudiaremos
esta última característica más adelante.

9.4 Elementos HTML5 dentro del cuerpo

El cuerpo de nuestro documento está listo. La estructura básica de nuestro sitio web
fue finalizada, pero aún tenemos que trabajar en el contenido. Los elementos HTML5
estudiados hasta el momento nos ayudan a identificar cada sección del diseño y asignar
un propósito intrínseco a cada una de ellas, pero lo que es realmente importante para
nuestro sitio web se encuentra en el interior de estas secciones.

La mayoría de los elementos ya estudiados fueron creados para construir una

estructura para el documento HTML que pueda ser identificada y reconocida por los
navegadores y nuevos dispositivos. Aprendimos acerca de la etiqueta <body> usada
para declarar el cuerpo o parte visible del documento, la etiqueta <header> con la
que agrupamos información importante para el cuerpo, la etiqueta <nav> que provee
ayuda para la navegación del sitio web, la etiqueta <section> necesaria para
contener la información más relevante, y también <aside> y <footer> para ofrecer
información adicional de cada sección y del documento mismo. Pero ninguno de estos
elementos declara algo acerca del contenido. Todos tienen un específico propósito
estructural.

1 Introducción a HTML 6
 Más profundo nos introducimos dentro del documento más cerca nos encontramos de
la definición del contenido. Esta información estará compuesta por diferentes
elementos visuales como títulos, textos, imágenes, videos y aplicaciones interactivas,
entre otros.

Necesitamos poder diferenciar estos elementos y establecer una relación entre ellos
dentro de la estructura.

9.4.1 <article>
El diseño considerado anteriormente (Ilustración 1) es el más común y representa una
estructura esencial para los sitios web estos días, pero es además ejemplo de cómo el
contenido clave es mostrado en pantalla. Del mismo modo que los blogs están
divididos en entradas, sitios web normalmente presentan información relevante
dividida en partes que comparten similares características. El elemento <article>
nos permite identificar cada una de estas partes:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>

1 Introducción a HTML 6
 </header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
Este es el texto de mi primer mensaje
</article>
<article>
Este es el texto de mi segundo mensaje
</article>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados &copy; 2010-2018
</footer>
</body>
</html>

1 Introducción a HTML 6
 Como puede observarse en este código, las etiquetas <article> se encuentran
ubicadas dentro del elemento <section>. Las etiquetas <article> en nuestro
ejemplo pertenecen a esta sección, son sus hijos, del mismo modo que cada elemento
dentro de las etiquetas <body> es hijo del cuerpo. Y al igual que cada elemento hijo
del cuerpo, las etiquetas <article> son ubicadas una sobre otra, como es mostrado
en la Ilustración 2.

Ilustración 2 - Representación visual de las etiquetas <article> que fueron incluidas

El elemento <article> no está limitado por su nombre (no se limita, por ejemplo, a
artículos de noticias). Este elemento fue creado con la intención de contener unidades
independientes de contenido, por lo que puede incluir mensajes de foros, artículos de
una revista digital, entradas de blog, comentarios de usuarios, etc…

Lo que hace es agrupar porciones de información que están relacionadas entre sí

independientemente de su naturaleza.

1 Introducción a HTML 6
 9.4.2 <hgroup>
Dentro de cada elemento <header>, en la parte superior del cuerpo o al comienzo de
cada <article>, incorporamos elementos <h1> para declarar un título.
Básicamente, las etiquetas <h1> son todo lo que necesitamos para crear una línea de
cabecera para cada parte del documento, pero es normal que necesitemos también
agregar subtítulos o más información que especifique de qué se trata la página web o
una sección en particular.

Para construir este tipo de cabeceras, podemos aprovechar el resto de las etiquetas H,
como <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, pero siempre considerando que, por
propósitos de procesamiento interno, y para evitar generar múltiples secciones
durante la interpretación del documento por parte del navegador, estas etiquetas
deben ser agrupadas juntas. Por esta razón, HTML5 provee el elemento <hgroup>:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>

1 Introducción a HTML 6
 <nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<hgroup>
<h1>Título</h1>
<h2>Subtítulo</h2>
</hgroup>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados &copy; 2010-2018
</footer>
</body>
</html>

Las etiquetas H deben conservar su jerarquía, lo que significa que debemos primero
declarar la etiqueta <h1>, luego usar <h2> para subtítulos y así sucesivamente. Sin

1 Introducción a HTML 6
 embargo, a diferencia de anteriores versiones de HTML, HTML5 nos deja reusar las
etiquetas H y construir esta jerarquía una y otra vez en cada sección del documento.

Navegadores y programas que ejecutan y presentan en la pantalla sitios webs leen el

código HTML y crean su propia estructura interna para interpretar y procesar cada
elemento. Esta estructura interna está dividida en secciones que no tienen nada que
ver con las divisiones en el diseño o el elemento <section>. Estas son secciones
conceptuales generadas durante la interpretación del código. El elemento <header>
no crea una de estas secciones por sí mismo, lo que significa que los elementos dentro
de <header> representarán diferentes niveles e internamente pueden generar
diferentes secciones. El elemento <hgroup> fue creado con el propósito de agrupar
las etiquetas H y evitar interpretaciones incorrectas por parte de los navegadores.

9.4.3 <figure> y <figcaption>

La etiqueta <figure> fue creada para ayudarnos a ser aún más específicos a la hora
de declarar el contenido del documento. Antes de que este elemento sea introducido,
no podíamos identificar el contenido que era parte de la información, pero a la vez
independiente, como ilustraciones, fotos, videos, etc… Normalmente estos elementos
son parte del contenido relevante, pero pueden ser extraídos o movidos a otra parte
sin afectar o interrumpir el flujo del documento. Cuando nos encontramos con esta
clase de información, las etiquetas <figure> pueden ser usadas para identificarla:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">

1 Introducción a HTML 6
 <title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>
<figure>
<img src=”http://www.bilib.es/imagen.jpg”>
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure>

1 Introducción a HTML 6
 </section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados &copy; 2010-2018
</footer>
</body>
</html>

9.5 Formulario web

La Web 2.0 está completamente enfocada en el usuario. Y cuando el usuario es el

centro de atención, todo está relacionado con interfaces, en cómo hacerlas más
intuitivas, más naturales, más prácticas, y por supuesto más atractivas. Los formularios
web son la interface más importante de todas, permiten a los usuarios insertar datos,
tomar decisiones, comunicar información y cambiar el comportamiento de una
aplicación.

Durante los últimos años, códigos personalizados y librerías fueron creados para
procesar formularios en el ordenador del usuario. HTML5 vuelve a estas funciones
estándar agregando nuevos atributos, elementos y una API completa. Ahora la
capacidad de procesamiento de información insertada en formularios en tiempo real
ha sido incorporada en los navegadores y completamente estandarizada.

1 Introducción a HTML 6
 9.5.1 El elemento <form>
Los formularios en HTML no han cambiado mucho. La estructura sigue siendo la misma,
pero HTML5 ha agregado nuevos elementos, tipos de campo y atributos para
expandirlos tanto como sea necesario y proveer así las funciones actualmente
implementadas en aplicaciones web.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Formularios</title>
</head>
<body>
<section>
<form name="miformulario" method="get">
<input type="text" name="nombre" id="nombre">
<input type="submit" value="Enviar">
</form>
</section>
</body>
</html>

En este código hemos creado una plantilla básica para formularios. Como puede ver,
la estructura del formulario y sus atributos siguen siendo igual que en especificaciones
previas. Sin embargo, existen nuevos atributos para el elemento <form>:

• Autocomplete: Este es un viejo atributo que se ha vuelto estándar en esta

especificación. Puede tomar dos valores: on y off. El valor por defecto es on.
Cuando es configurado como off los elementos <input> pertenecientes a ese

1 Introducción a HTML 6
 formulario tendrán la función de autocompletar desactivada, sin mostrar
entradas previas como posibles valores. Puede ser implementado en el
elemento <form> o en cualquier elemento <input> independientemente.
• Novalidate: Una de las características de formularios en HTML5 es la capacidad
propia de validación. Los formularios son automáticamente validados. Para
evitar este comportamiento, podemos usar el atributo novalidate. Para lograr
lo mismo para elementos <input> específicos, existe otro atributo llamado
formnovalidate. Ambos atributos son booleanos, ningún valor tiene que ser
especificado (su presencia es suficiente para activar su función).

9.5.2 El elemento <input>

El elemento más importante en un formulario es <input>. Este elemento puede
cambiar sus características gracias al atributo type (tipo).

Este atributo determina qué clase de entrada es esperada desde el usuario. Los tipos
disponibles hasta el momento eran el multipropósitos text (para textos en general) y
solo unos pocos más específicos como password o submit.

HTML5 ha expandido las opciones incrementando de este modo las posibilidades para
este elemento. En HTML5 estos nuevos tipos no solo están especificando qué clase de
entrada es esperada sino también diciéndole al navegador qué debe hacer con la
información recibida. El navegador procesará los datos ingresados de acuerdo al valor
del atributo type y validará la entrada o no.

El atributo type trabaja junto con otros atributos adicionales para ayudar al navegador
a limitar y controlar en tiempo real lo ingresado por el usuario.

Tipo email

1 Introducción a HTML 6
 Casi todo formulario en la web ofrece un campo para ingresar una dirección de email,
pero hasta ahora el único tipo de campo disponible para esta clase de datos era text.
El tipo text representa un texto general, no un dato específico, por lo que teníamos
que controlar la entrada con código Javascript para estar seguros de que el texto
ingresado correspondía a un email válido. Ahora el navegador se hace cargo de esto
con el nuevo tipo email:

<input type="email" name="miemail" id="miemail">

El texto insertado en el campo generado por este código será controlado por el
navegador y validado como un email. Si la validación falla, el formulario no será
enviado.

Cómo cada navegador responderá a una entrada inválida no está determinado en la

especificación de HTML5. Por ejemplo, algunos navegadores mostrarán un borde rojo
alrededor del elemento <input> que produjo el error y otros lo mostrarán en azul.
Existen formas de personalizar esta respuesta, pero las veremos más adelante.

Tipo search

El tipo search (búsqueda) no controla la entrada, es solo una indicación para los
navegadores. Al detectar este tipo de campo algunos navegadores cambiarán el diseño
del elemento para ofrecer al usuario un indicio de su propósito.

<input type="search" name="busqueda" id="busqueda">

Tipo url

Este tipo de campo trabaja exactamente igual que el tipo email pero es específico para
direcciones web. Está destinado a recibir solo URLs absolutas y retornará un error si el
valor es inválido.

1 Introducción a HTML 6
 <input type="url" name="miurl" id="miurl">

Tipo tel

Este tipo de campo es para números telefónicos. A diferencia de los tipos email y url,
el tipo tel no requiere ninguna sintaxis en particular. Es solo una indicación para el
navegador en caso de que necesite hacer ajustes de acuerdo al dispositivo en el que la
aplicación es ejecutada.

<input type="tel" name="telefono" id="telefono">

Tipo number

Como su nombre lo indica, el tipo number es sólo válido cuando recibe una entradan
numérica. Existen algunos atributos nuevos que pueden ser útiles para este campo:

• Min: El valor de este atributo determina el mínimo valor aceptado para el

campo.
• Max: El valor de este atributo determina el máximo valor aceptado para el
campo.
• Step: El valor de este atributo determina el tamaño en el que el valor será
incrementado o disminuido en cada paso. Por ejemplo, si declara un valor de 5
para step en un campo que tiene un valor mínimo de 0 y máximo de 10, el
navegador no le permitirá especificar valores entre 0 y 5 o entre 5 y 10.

<input type="number" name="numero" id="numero" min=”0”

max=”10” step=”5”>

Tipo range

Este tipo de campo hace que el navegador construya una nueva clase de control que
no existía previamente. Este nuevo control le permite al usuario seleccionar un valor a

1 Introducción a HTML 6
 partir de una serie de valores o rango. Normalmente es mostrado en pantalla como un
puntero deslizable o un campo con flechas para seleccionar un valor entre los
predeterminados, pero no existe un diseño estándar hasta el momento.

El tipo range usa los atributos min y max estudiados previamente para configurar los
límites del rango. También puede utilizar el atributo step para establecer el tamaño en
el cual el valor del campo será incrementado o disminuido en cada paso.

<input type="range" name="numero" id="numero" min=”0” max=”10”

step=”5”>

Podemos declarar el valor inicial utilizando el viejo atributo value y usar Javascript para
mostrar el número seleccionado en pantalla como referencia. Experimentaremos con
esto y el nuevo elemento <output> más adelante.

Tipo date

Este es otro tipo de campo que genera una nueva clase de control. En este caso fue
incluido para ofrecer una mejor forma de ingresar una fecha. Algunos navegadores
muestran en pantalla un calendario que aparece cada vez que el usuario hace clic sobre
el campo. El calendario le permite al usuario seleccionar un día que será ingresado en
el campo junto con el resto de la fecha. Un ejemplo de uso es cuando necesitamos
proporcionar un método para seleccionar una fecha para un vuelo o la entrada a un
espectáculo. Gracias al tipo date ahora es el navegador el que se encarga de construir
un almanaque o las herramientas necesarias para facilitar el ingreso de este tipo de
datos.

<input type="date" name="fecha" id="fecha">

1 Introducción a HTML 6
 La interface no fue declarada en la especificación. Cada navegador provee su propia
interface y a veces adaptan el diseño al dispositivo en el cual la aplicación está siendo
ejecutada. Normalmente el valor generado y esperado tiene la sintaxis año-mes-día.

Tipo week

Este tipo de campo ofrece una interface similar a date, pero solo para seleccionar una
semana completa. Normalmente el valor esperado tiene la sintaxis 2011-W50 donde
2011 es al año y 50 es el número de la semana.

<input type="week" name="semana" id="semana">

Tipo month

Similar al tipo de campo previo, éste es específico para seleccionar meses.

Normalmente el valor esperado tiene la sintaxis año-mes.

<input type="month" name="mes" id="mes">

Tipo time

El tipo de campo time es similar a date, pero solo para la hora. Toma el formato de
horas y minutos, pero su comportamiento depende de cada navegador en este
momento. Normalmente el valor esperado tiene la sintaxis hora:minutos:segundos,
pero también puede ser solo hora:minutos.

<input type="time" name="hora" id="hora">

Tipo datetime

El tipo de campo datetime es para ingresar fecha y hora completa, incluyendo la zona
horaria.

1 Introducción a HTML 6
 <input type="datetime" name="fechahora" id="fechahora">

Tipo datetime-local

El tipo de campo datetime-local es como el tipo datetime sin la zona horaria.

<input type="datetime-local" name="tiempolocal"

id="tiempolocal">

Tipo color

Además de los tipos de campo para fecha y hora existe otro tipo que provee una
interface predefinida similar para seleccionar colores. Normalmente el valor esperado
para este campo es un número hexadecimal, como #00FF00.

<input type="color" name="micolor" id="micolor">

9.6 Listado de todos los elementos HTML5

Hemos visto los nuevos elementos HTML5 más importantes, pero en este apartado
listaremos todos los que incluye este nuevo estándar, descritos por su etiqueta de
apertura y agrupados por su función.

En la especificación HTML5, HTML está a cargo de la estructura del documento y

provee un grupo completo de nuevos elementos para este propósito. La especificación
también incluye algunos elementos con la única tarea de proveer estilos. Esta es una
lista completa de todos los elementos del estándar HTML5.

El símbolo indica que el elemento fue añadido en HTML5. Nótese que otros
elementos listados aquí pueden haber sido modificados o extendido en su significado
por la especificación HTML5.

1 Introducción a HTML 6
 9.6.1 Elementos raíz
Elemento Descripción
<!doctype html> Define que el documento está bajo el estándar de HTML 5
<html> Representa la raíz de un documento HTML o XHTML. Todos los
demás elementos deben ser descendientes de este elemento.

9.6.2 Metadatos del documento

Elemento Descripción
<head> Representa una colección de metadatos acerca del documento,
incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
<title> Define el título del documento, el cual se muestra en la barra de título
del navegador o en las pestañas de página. Solamente puede contener
texto y cualquier otra etiqueta contenida no será interpretada.
<base> Define la URL base para las URLs relativas en la página.
<link> Usada para enlazar JavaScript y CSS externos con el documento HTML
actual.
<meta> Define los metadatos que no pueden ser definidos usando otro
elemento HTML.
<style> Etiqueta de estilo usada para escribir CSS en línea.

9.6.3 Scripting
Elemento Descripción
<script> Define ya sea un script interno o un enlace hacia un script externo. El
lenguaje de programación es JavaScript
<noscript> Define un contenido alternativo a mostrar cuando el navegador no
soporta scripting.

9.6.4 Secciones
Elemento Descripción
<body> Representa el contenido principal de un documento HTML. Solo hay un
elemento <body> en un documento.
<section> Define una sección en un documento.
<nav> Define una sección que solamente contiene enlaces de navegación

1 Introducción a HTML 6
 <article> Define contenido autónomo que podría existir independientemente del
resto del contenido.
<aside> Define algunos contenidos vagamente relacionados con el resto del
contenido de la página. Si es removido, el contenido restante seguirá
teniendo sentido
<h1>
<h2> Los elementos de cabecera implementan seis niveles de cabeceras de
<h3> documentos; <h1> es la de mayor y <h6> es la de menor importancia.
<h4> Un elemento de cabecera describe brevemente el tema de la sección
<h5> que introduce.
<h6>
<header> Define la cabecera de una página o sección. Usualmente contiene un
logotipo, el título del sitio Web y una tabla de navegación de
contenidos.
<footer> Define el pie de una página o sección. Usualmente contiene un mensaje
de derechos de autoría, algunos enlaces a información legal o
direcciones para dar información de retroalimentación.
<address> Define una sección que contiene información de contacto.
Define el contenido principal o importante en el documento.
<main> Solamente existe un elemento <main> en el documento.
<noscript> Define un contenido alternativo a mostrar cuando el navegador no
soporta scripting.

9.6.5 Agrupación de contenido

Elemento Descripción
<p> Define una parte que debe mostrarse como un párrafo.
Representa un quiebre temático entre párrafos de una sección o
<hr>
articulo o cualquier contenido.
Indica que su contenido está pre-formateado y que este formato debe
<pre>
ser preservado.
<blockquote> Representa un contenido citado desde otra fuente.
<ol> Define una lista ordenada de artículos.
<ul> Define una lista de artículos sin orden.
<li> Define un artículo de una lista enumerada.
Define una lista de definiciones, es decir, una lista de términos y sus
<dl>
definiciones asociadas.
<dt> Representa un término definido por el siguiente <dd>.

1 Introducción a HTML 6
 <dd> Representa la definición de los términos listados antes que él.
<figure> Representa una figura ilustrada como parte del documento.
<figcaption> Representa la leyenda de una figura.
<div> Representa un contenedor genérico sin ningún significado especial.

9.6.6 Semántica a nivel de texto

Elemento Descripción
<a> Representa un hiperenlace, enlazando a otro recurso.
<em> Representa un texto enfatizado, como un acento de intensidad.
<strong> Representa un texto especialmente importante.
<small> Representa un comentario aparte, es decir, textos como un descargo de
responsabilidad o una nota de derechos de autoría, que no son esenciales
para la comprensión del documento.
<s> Representa contenido que ya no es exacto o relevante.
<cite> Representa el título de una obra.
<q> Representa una cita textual inline.
<dfn> Representa un término cuya definición está contenida en su contenido
ancestro más próximo.
<abbr> Representa una abreviación o un acrónimo; la expansión de la abreviatura
puede ser representada por el atributo title.
<data> Asocia un equivalente legible por máquina a sus contenidos. (Este
elemento está solamente en la versión de la WHATWG del estándar
HTML, y no en la versión de la W3C de HTML5).
<time> Representa un valor de fecha y hora; el equivalente legible por máquina
puede ser representado en el atributo datetime.
<code> Representa un código de ordenador.
<var> Representa a una variable, es decir, una expresión matemática o contexto
de programación, un identificador que represente a una constante, un
símbolo que identifica una cantidad física, un parámetro de una función o
un marcador de posición en prosa.
<samp> Representa la salida de un programa o un ordenador.
<kbd> Representa la entrada de usuario, por lo general desde un teclado, pero
no necesariamente, este puede representar otras formas de entrada de
usuario, como comandos de voz transcritos.
<sub>,<sup> Representan un subíndice y un superíndice, respectivamente.

1 Introducción a HTML 6
 <i> Representa un texto en una voz o estado de ánimo alterno, o por lo
menos de diferente calidad, como una designación taxonómica, un
término técnico, una frase idiomática, un pensamiento o el nombre de un
barco.
<b> Representa un texto hacia el cual se llama la atención para propósitos
utilitarios. No confiere ninguna importancia adicional y no implica una voz
alterna.
<u> Representa una anotación no textual sin-articular, como etiquetar un
texto como mal escrito o etiquetar un nombre propio en texto en chino.
<mark> Representa texto resaltado con propósitos de referencia, es decir por su
relevancia en otro contexto.
<ruby> Representa contenidos a ser marcados con anotaciones ruby, recorridos
cortos de texto presentados junto al texto. Estos son utilizados con
regularidad en conjunto a lenguajes de Asia del Este, donde las
anotaciones actúan como una guía para la pronunciación, como
el furigana japonés.
<rt> Representa el texto de una anotación Ruby.
<rp> Representa los paréntesis alrededor de una anotación Ruby, usada para
mostrar la anotación de manera alterna por los navegadores que no
soporten despliegue estándar para las anotaciones.
<bdi> Representa un texto que debe ser aislado de sus alrededores para el
formateado bidireccional del texto. Permite incrustar un fragmento de
texto con una direccionalidad diferente o desconocida.
<bdo> Representa la direccionalidad de sus descendientes con el fin de anular de
forma explícita al algoritmo bidireccional Unicode.
<span> Representa texto sin un significado específico. Este debe ser usado
cuando ningún otro elemento semántico le confiere un significado
adecuado, en cuyo caso, provendrá de atributos globales como class, lang,
o dir.
<br> Representa un salto de línea.
<wbr> Representa una oportunidad de salto de línea, es decir, un punto sugerido
de envoltura donde el texto de múltiples líneas puede ser dividido para
mejorar su legibilidad.

9.6.7 Ediciones
Elemento Descripción
<ins> Define una adición en el documento.
<del> Define una remoción del documento.

1 Introducción a HTML 6
 9.6.8 Agrupación de contenido
Elemento Descripción
<img> Representa una imagen.
<iframe> Representa un contexto anidado de navegación, es decir, un
documento HTML embebido.
<embed> Representa un punto de integración para una aplicación o contenido
interactivo externo que por lo general no es HTML.
<object> Representa un recurso externo, que será tratado como una imagen, un
sub-documento HTML o un recurso externo a ser procesado por
un plugin.
<param> Define parámetros para el uso por los plugins invocados por los
elementos <object>.
<video> Representa un video, y sus archivos de audio y capciones asociadas, con
la interfaz necesaria para reproducirlos.
<audio> Representa un sonido o stream de audio.
<source> Permite a autores especificar recursos multimedia alternativos para los
elementos multimedia como <video> o <audio>.
<track> Permite a autores especificar una pista de texto temporizado para
elementos multimedia como <video> o <audio>.
<canvas> Representa un área de mapa de bits en el que se pueden utilizar scripts
para renderizar gráficos como gráficas, gráficas de juegos o cualquier
imagen visual al vuelo.
<map> En conjunto con <area>, define un mapa de imagen.
<area> En conjunto con <map>, define un mapa de imagen.
<svg> Define una imagen vectorial embebida.
<math> Define una fórmula matemática.

9.6.9 Datos tabulares

Elemento Descripción
<table> Representa datos con más de una dimensión.
<caption> Representa el título de una tabla.
<colgroup> Representa un conjunto de una o más columnas de una tabla.
<col> Representa una columna de una tabla.
<tbody> Representa el bloque de filas que describen los datos concretos de una
tabla.

1 Introducción a HTML 6
 <thead> Representa el bloque de filas que describen las etiquetas de columna de
una tabla.
<tfoot> Representa los bloques de filas que describen los resúmenes de
columna de una tabla.
<tr> Representa una fila de celdas en una tabla.
<td> Representa una celda de datos en una tabla.
<th> Representa una celda encabezado en una tabla.

9.6.10 Formularios
Elemento Descripción
<form> Representa un formulario, conteniendo controles que puede ser
enviado a un servidor para procesamiento.
<fieldset> Representa un conjunto de controles.
<legend> Representa el título de un <fieldset>.
<label> Representa el título de un control de formulario.
<input> Representa un campo de datos escrito que permite al usuario editar los
datos.
<button> Representa un botón.
<select> Representa un control que permite la selección entre un conjunto de
opciones.
<datalist> Representa un conjunto de opciones pre-definiddas para otros
controles.
<optgroup> Representa un conjunto de opciones, agrupadas lógicamente.
<option> Representa una opción en un elemento <select>, o una sugerencia de
un elemento <datalist>.
<textarea> Representa un control de edición de texto multi-línea.
<keygen> Representa un control de par generador de llaves.
<output> Representa el resultado de un cálculo.
<progress> Representa el progreso de finalización de una tarea.
<meter> Representa la medida escalar (o el valor fraccionario) dentro de un
rango conocido.

1 Introducción a HTML 6
 9.6.11 Otros datos
Elemento Descripción

<details> Representa un widget desde el que un usuario

puede obtener información o controles
adicionales.
<summary> Representa un resumen, título o leyenda para un
elemento <details> dado.
<command> Representa un comando que un usuario puede
invocar.

10. Glosario de términos del módulo

<header> Este elemento presenta información introductoria y puede ser aplicado en
diferentes secciones del documento. Tiene el propósito de contener la cabecera de una
sección, pero también puede ser utilizado para agrupar índices, formularios de
búsqueda, logos, etc...

<nav> Este elemento indica una sección de enlaces con propósitos de navegación,
como menús o índices. No todos los enlaces dentro de una página web tienen que estar
dentro de un elemento <nav>, solo aquellos que forman partes de bloques de
navegación.

<section> Este elemento representa una sección general del documento. Es

usualmente utilizado para construir varios bloques de contenido (por ejemplo,
columnas) con el propósito de ordenar el contenido que comparte una característica
específica, como capítulos o páginas de un libro, grupo de noticias, artículos, etc...

<aside> Este elemento representa contenido que está relacionado con el contenido
principal pero no es parte del mismo. Ejemplos pueden ser citas, información en barras
laterales, publicidad, etc...

1 Introducción a HTML 6
 <footer> Este elemento representa información adicional sobre su elemento padre.
Por ejemplo, un elemento <footer> insertado al final del cuerpo proveerá información
adicional sobre el cuerpo del documento, como el pie normal de una página web.
Puede ser usado no solo para el cuerpo sino también para diferentes secciones dentro
del cuerpo, otorgando información adicional sobre estas secciones específicas.

<article> Este elemento representa una porción independiente de información

relevante (por ejemplo, cada artículo de un periódico o cada entrada de un blog). El
elemento <article> puede ser anidado y usado para mostrar una lista dentro de otra
lista de ítems relacionados, como comentarios de usuarios en entradas de blogs, por
ejemplo.

<hgroup> Este elemento es usado para agrupar elementos H cuando la cabecera tiene
múltiples niveles (por ejemplo, una cabecera con título y subtítulo).

<figure> Este elemento representa una porción independiente de contenido (por

ejemplo, imágenes, diagramas o videos) que son referenciadas desde el contenido
principal. Esta es información que puede ser removida sin afectar el fluido del resto del
contenido.

<figcaption> Este elemento es utilizado para mostrar una leyenda o pequeño texto
relacionado con el contenido de un elemento <figure>, como la descripción de una
imagen.

<mark> Este elemento resalta un texto que tiene relevancia en una situación en
particular o que ha sido mostrado en respuesta de la actividad del usuario.

<small> Este elemento representa contenido al margen, como letra pequeña (por
ejemplo, descargos, restricciones legales, declaración de derechos, etc...).

1 Introducción a HTML 6
 11. Bibliografía
https://www.uv.es/jac/guia/index.html

http://www.juntadeandalucia.es/averroes/centros-
tic/14005663/helvia/aula/archivos/repositorio/0/164/html/html/manual_html.html

http://www.bolivia-internet.com/html/manualhtml.pdf

http://aprende-web.net/html/

https://www.htmlcinco.com/manual-de-html5-en-espanol/

12. Casos prácticos

12.1 Caso práctico 1

En el código base que se te proporciona debes realizar los siguientes cambios:

• Las siglas HTML deben aparecer como texto destacado en toda la página.
• Tim Berners-Lee debe aparecer como texto enfatizado en toda la página.
• Debes añadir el siguiente contenido:
o Un encabezado de nivel 1 con el texto "HTML" antes de "HTML son las
siglas de..."
o Un encabezado de nivel 2 con el texto "Historia de HTML" antes de "Los
inicios del lenguaje HTML..."
o Un encabezado de nivel 2 con el texto "Versiones de HTML" antes de dos
nuevos párrafos que contienen el texto "Tim Berners-Lee definió la
primera versión de HTML en el año 1991" y "En la actualidad, la última
versión de HTML es HTML5".

1 Introducción a HTML 6
 El resultado final debe ser una página web que tenga el mismo aspecto que la siguiente
imagen:

Código base

<!DOCTYPE html>

<html>

<head>

<title>El título de la página</title>

</head>

<body>

<p><strong>HTML</strong> son las siglas de <em>HyperText

Markup Language</em>, que puede traducirse como lenguaje de
marcas o marcado de hipertexto.

</p>

1 Introducción a HTML 6
 <p>El lenguaje HTML se emplea para crear las páginas web. Es
muy fácil ver el código HTML de una página web, la opción
exacta cambia de un navegador a otro y también puede cambiar
de una versión a otra de un mismo navegador, pero suelen tener
un nombre similar.

</p>

<p>HTML se compone de etiquetas que se escriben entre los

símbolos menor que y mayor que.</p>

<p>Los inicios del lenguaje HTML se remontan al año 1990,

cuando Tim Berners-Lee creó la primera página web.</p>

</body>

</html>

12.2 Caso práctico 2

A partir del texto que se te proporciona, debes crear una página web que tenga el
mismo aspecto que la siguiente imagen:

1 Introducción a HTML 6
 Código base

<!DOCTYPE html>

<html>

<head>

<title>Desempleo</title>

<style>

table, tr, th, td {

border: 1px solid black;

</style>

</head>

<body>

El desempleo en España

La siguiente tabla muestra la evolución del desempleo en

España, comparado con la media de los 27 países de la Unión
Europea, Grecia, que compite con España en ser el primero en
esta vergonzosa competición y Estados Unidos y Japón, dos de
las primeras economías mundiales.

País

2000

2001

2002

1 Introducción a HTML 6
 2003

2004

2005

2006

2007

2008

2009

2010

2011

2012

2013

UE (27 países)

8.9

8.7

9.1

9.3

8.2

7.2

1 Introducción a HTML 6
 7

9.6

9.6

10.4

10.8

España

11.9

10.6

11.5

11.5

11

9.2

8.5

8.2

11.3

17.9

19.9

21.4

24.8

1 Introducción a HTML 6
 26.1

Grecia

11.2

10.7

10.3

9.7

10.6

10

8.4

7.8

9.6

12.7

17.9

24.5

27.5

Estados Unidos

4.8

5.8

1 Introducción a HTML 6
 6

5.5

5.1

4.6

4.6

5.8

9.3

9.6

8.9

8.1

7.4

Japón

4.7

5.4

5.3

4.7

4.4

4.1

3.9

1 Introducción a HTML 6
 4

5.1

5.1

4.6

4.3

Fuente: Índice de desempleo anual, Eurostat

</body>

</html>

1 Introducción a HTML 6
 13. Cuestionario de autoevaluación
1. ¿Cuál es el último estándar de HTML?
a) HTML 4
b) HTML 5
c) HTML 6

2. ¿Cómo se abren y se cierran las etiquetas en HTML?

a) Se abren con (etiqueta) y se cierran con (ETIQUETA)
b) Se abren con <etiqueta> y se cierran con </etiqueta>
c) Se abren con <etiqueta> y se cierran con <etiqueta>

3. ¿Cómo se escriben los comentarios en HTML?

a) Es escribe <!-- al comienzo y --> al final
b) Se escribe /* al comienzo y */ al final
c) Se escribe // al comienzo

4. ¿Cómo se declara una fila en una tabla HTML?

a) Con <tr> al comienzo y </tr> al final
b) Con <td> al comienzo y </td> al final
c) Con <row> al comienzo y </row> al final

5. ¿Cómo inicializamos un documento en HTMl 5?

a) Con <!html5>
b) Con <DOCTYPE html>
c) Con <!DOCTYPE html>

1 Introducción a HTML 6
 6. ¿Para qué sirve la etiqueta <header>?
a) Para inicializar los parámetros de HTML
b) Para contener la cabecera de una sección
c) Para contener la cabecera del documento HTML

7. ¿Para qué sirve HTML?

a) Para crear la estructura de una página web
b) Para conectar con la base de datos de una página web
c) Para cambiar los estilos de una página web

8. ¿Qué tipo de programa hay que utilizar programar una página web HTML?
a) Un navegador web
b) Un editor de texto
c) Microsoft Word

9. ¿Cuál es la mejor forma de maquetar una página web?

a) Por medio de tablas
b) Por medio de párrafos
c) Por medio de capas

10. ¿Qué formato de imágenes no permite transparencias?

a) GIF
b) PNG
c) JPG

1 Introducción a HTML 6