MD.PlantillaTexto(01)Esp.

dot

MÓDULO

PROGRAMACIÓN WEB HTML/CSS

UNIDAD 2

ELEMENTOS HTML
M051_02_V(03)
 ELEMENTOS HTML

ÍNDICE

TU RETO EN ESTA UNIDAD ........................................................................ 3 

1. ESTRUCTURA DEL ARCHIVO ................................................................. 5 
1.1. ELEMENTO HTML ........................................................................................... 7 
1.2. CABECERA ....................................................................................................... 8 
1.3. BODY ................................................................................................................ 9 
2. META ETIQUETAS................................................................................ 11 
2.1. META ETIQUETAS BÁSICAS ........................................................................ 12 
2.2. OTRAS META ETIQUETAS ............................................................................ 14 
3. ELEMENTOS BÁSICOS ......................................................................... 19 
3.1. PÁRRAFOS ..................................................................................................... 19 
3.2. SALTOS DE LÍNEA ......................................................................................... 20 
3.3. CENTRADO .................................................................................................... 20 
3.4. LÍNEAS ........................................................................................................... 21 
3.5. TABULADO..................................................................................................... 21 
3.6. NEGRITA, SUBRAYADO Y CURSIVA ............................................................. 22 
3.7. SUBÍNDICE, SUPERÍNDICE Y TACHADO ...................................................... 22 
3.8. TÍTULOS ......................................................................................................... 22 
3.9. MOSTRAR ETIQUETAS HTML EN UNA WEB ............................................... 24 
3.10.  ETIQUETAS BÁSICAS DESCONTINUADAS EN HTML 5 ........................... 24 
4. TABLAS................................................................................................ 26 
4.1. TABLAS SIMPLES ......................................................................................... 26 
4.2. CELDAS CABECERA ...................................................................................... 28 

1
ELEMENTOS HTML

4.3. UNIR CELDAS DE UNA TABLA ..................................................................... 29 

4.4. TABLAS ANIDADAS ...................................................................................... 31 
4.5. ATRIBUTOS DE LAS TABLAS ....................................................................... 33 
5. IMÁGENES............................................................................................ 36 
6. ENLACES .............................................................................................. 39 
6.1. ENLACES INTERNOS .................................................................................... 40 
6.2. ENLACES LOCALES ...................................................................................... 41 
6.3. ENLACES REMOTOS ..................................................................................... 43 
6.4. ENLACES A CORREO ELECTRÓNICO .......................................................... 44 
6.5. ENLACES A ARCHIVOS ................................................................................ 44 
6.6. VALORES DE ATRIBUTOS DE ENLACE ........................................................ 45 
7. FORMULARIOS ..................................................................................... 47 
7.1. CAMPOS INPUT ............................................................................................ 48 
7.2. EJERCICIO. CREAR UN FORMULARIO COMO EL SIGUIENTE .................... 61 
8. LISTAS ................................................................................................. 62 
8.1. LISTAS ORDENADAS .................................................................................... 63 
8.2. LISTAS NO ORDENADAS .............................................................................. 63 
8.3. LISTAS DE DEFINICIÓN ................................................................................ 64 
9. CAPAS .................................................................................................. 66  
9.1. ESTRUCTURA MEJORADA: .......................................................................... 67 
10. ETIQUETADO DE ELEMENTOS ........................................................... 71 
11. COMENTAR CÓDIGO .......................................................................... 73 
¿QUÉ HAS APRENDIDO? .......................................................................... 75 
AUTOCOMPROBACIÓN ............................................................................ 77 
SOLUCIONARIO ........................................................................................ 81 
BIBLIOGRAFÍA .......................................................................................... 83 

2
 ELEMENTOS HTML

TU RETO EN ESTA UNIDAD

Vamos a aprender a usar las etiquetas HTML que forman las páginas Web y
aunque a priori puedan parecer demasiadas, veremos durante la unidad que
son bastante intuitivas y fáciles de recordar. Una vez aprendidas, las utilizare-
mos en nuestras páginas Web casi de forma mecánica.

Es importante el estudio de esta unidad porque es la base para poder crear una
página Web bien estructurada.

Imaginemos que quieres crear tu primera página Web corporativa y quieres que
contenga tablas, formularios, imágenes y una buena estructura Web con un
sistema de capas.

Pues cuando acabes esta lección, serás capaz de crear un sitio Web con todos los
elementos necesarios para que se vea correctamente en cualquier navegador.

3
 ELEMENTOS HTML

1. ESTRUCTURA DEL ARCHIVO

Los elementos que se usan para formar un documento HTML se denominan
tags o etiquetas. A continuación, vamos a ver una gran parte de las etiquetas
HTML que nos van a permitir crear nuestra página Web.

Los archivos HTML tienen una estructura definida por el DTD (Document Type
Definition), que veremos a continuación:

DTD. Definición de tipo de documento

Lo primero que debe aparecer en un documento HTML es la definición de la

versión de código HTML que vamos a utilizar (el tipo de documento). Vamos a
ver como se realiza la definición de documentos en HTML 4.01 y en HTML 5
para ver las diferencias entre ambas, aunque ya cada vez usaremos menos el
DTD de HTML 4.01.

Es importante conocer la forma de especificar el DTD

en HTML 4.01 para saber de qué manera está cons-
truido un documento HTML que no hayamos creado
nosotros. Puede resultarte muy útil en el mundo la-
boral, aunque no lo vayas a usar mucho a partir de
ahora.

5
ELEMENTOS HTML

HTML 4.01 especifica tres posibles definiciones de esta etiqueta:

Definición de tipo de documento estricto

<!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01//EN"  
“http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

 <head> 

Incluye todos los elementos y atributos que no han sido desaprobados o que no
aparecen en documentos con marcos.

Definición de tipo de documentos transicional 

<!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01 Transitional// 
EN” “http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

 <head> 

Incluye todo lo que incluye el DTD estricto más los elementos y atributos des-
aprobados. Solía ser el más utilizado.

Definición de tipo para documentos con macros

<!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 

<html> 

 <head> 

Incluye todo lo que incluye el DTD transicional más los marcos (frames).

6
 ELEMENTOS HTML

A partir de HTML 5, ya no existen las versiones de HTML, por lo que la etiqueta

<!DOCTYPE> no sería realmente necesaria en HTML 5 y posteriores. Pero como
algunos navegadores aplican reglas especiales si el documento no incluye
<!DOCTYPE>, la recomendación HTML 5 sigue manteniendo el preámbulo
<!DOCTYPE> en los documentos como algo obligatorio, aunque simplificado al
máximo, quedando así una única estructura mucho más simple y fácil de recor-
dar que será la que utilicemos a partir de ahora:

<!DOCTYPE html> 

<html lang="es"> 

 <head> 

1.1. ELEMENTO HTML

Después de DTD, debe aparecer la definición del documento HTML por medio
de las etiquetas <html> y </html>.

El resto de elementos HTML de la página irán dentro de estas etiquetas que

marcan el comienzo y el final del documento. Es una condición no negociable
en HTML 4.01, pero que en HTML 5 no es necesaria. Si la usamos, podremos
indicar también el idioma de la página por medio del atributo “lang” de la si-
guiente forma:

<html lang=”es”> 

Por estandarización del lenguaje HTML, esta etiqueta tiene unas características
por defecto, que son: el tamaño del documento ocupa toda la pantalla del na-
vegador y el color por defecto del fondo que es blanco. (Por supuesto, con hojas
de estilo podemos cambiar estos y otros aspectos del HTML, como ya veremos
más adelante). En definitiva, una página que utilice solamente la etiqueta
<HTML> se verá totalmente blanca y ocupará la máxima resolución que dé la
ventana del navegador.

7
ELEMENTOS HTML

1.2. CABECERA

Este es el primer elemento que aparecerá dentro de las <html> y </html>. 

Esta viene definida entre las etiquetas <head> y </head>, y se utiliza para con-
tener varios elementos de definición y código:

 Título de la página. En esta etiqueta definida con <title> y </title> es-

cribiremos el título de nuestra página. El título debe definir concreta-
mente el contenido de la página, debe ser escueto y directo, este título
aparecerá en la cabecera del navegador al entrar en la web.
 Meta-tags. Sirven para dar información de nuestra Web a los robots de
los buscadores como Google o Yahoo, más adelante las explicaremos
en profundidad.
 Estilos. La definición de los estilos también se realiza dentro de la ca-
becera, existen dos maneras de definir los estilos en la cabecera:
 Definirlos en la propia cabecera: Para ello los crearemos entre las
etiquetas:

<style type="text/css"> y </style> 

 Crear un link (enlace) a una hoja de estilos: Esta es la forma más

correcta de hacerlo y la que trataremos de usar siempre. El códi-
go es el siguiente:

<link rel="stylesheet" type="text/css" href="miestilo.css" /> 

Donde sustituiremos “miestilo.css” por la ruta en la que tengamos

la hoja de estilos.
En la versión 5 de HTML no es necesario indicar el tipo de enla-
ce, aunque si recomendable. Podríamos escribir simplemente:

<link rel="stylesheet" href="miestilo.css" media=”all” /> 

8
 ELEMENTOS HTML

El gran desconocido en esta línea es el atributo “me-

dia”. Sirve para informar cuando debe utilizarse este
fichero CSS. Aquí hemos dado el valor all porque
queremos que se utilice en todas las ocasiones, pero
si quisiéramos tener una hoja CSS que sólo se inter-
pretase a la hora de imprimir una página, el valor de
“media” sería print en lugar de all.

 “Scripts”. Los scripts son trozos de código, normalmente de lenguaje

JavaScript o basados en él, que también se ponen dentro de la cabe-
cera de la página Web. Suelen ir incluidos entre las etiquetas:

<script> … </script> 

1.3. BODY

Situado entre las etiquetas <body> y </body>, su contenido es el que interpre-

tan los navegadores, aunque en HTML 5 tampoco es necesario establecer estas
etiquetas. Es comúnmente llamado el cuerpo de la Web y puede contener una
diversidad de elementos enorme:

 Párrafos, formularios, tablas, listas, etc.

 Capas: <div>…</div> o <span>…</span>.

 Códigos de lenguajes lado cliente/servidor: JSP, Java, ASP.net, PHP, etc.

 Objetos incrustables: Videos, audios, animaciones, imágenes, etc.

9
ELEMENTOS HTML

Ejemplo de estructura simple de una página Web

<!DOCTYPE html> 

<html lang=”es”> 

<head> 

<title>Mi primera Web HTML 5</title> 

</head> 

<body> 

Hola, soy tu primera Web HTML 5. 

</body> 

</html> 

Cabe mencionar que es una muy buena práctica

realizar lo que se denomina “indentación” de código,
es decir, tabular las etiquetas de forma que se cree
una jerarquía horizontal. Las etiquetas contenedoras
siempre estarán más a la izquierda que las conteni-
das, como puede verse en el ejemplo superior.

10
 ELEMENTOS HTML

2. META ETIQUETAS
HTML permite a los autores especificar meta etiquetas, que contienen informa-
ción sobre un documento más que contenido del propio documento y que van
dirigidos a los robots de los buscadores como Google, Bing o DuckDuckGo.

Existen muchas etiquetas del tipo “Meta”. En esta unidad las vamos a dividir en
dos: primero explicaremos las más importantes y comunes, que son las que
tienen en cuenta los buscadores, y después explicaremos todas aquellas etique-
tas útiles que suelen ponerse en las cabeceras.

Los ejemplos que se pueden ver en el temario afec-

tan únicamente a los elementos y etiquetas descritos
en cada punto. Para comprobarlos de forma inde-
pendiente, hay que insertarlos en una Web con una
estructura simple como la que se ha visto reciente-
mente. Los ejemplos por sí solos no sirven de nada
en un fichero vacío.

11
ELEMENTOS HTML

2.1. META ETIQUETAS BÁSICAS

Descripción

Esta etiqueta proporciona una descripción breve de la página. En algunos casos

esta descripción se utiliza como parte del fragmento que se muestra en los re-
sultados de los buscadores. Su definición es la siguiente:

<meta name="description" content="Descripción de la página"/> 

La longitud de la descripción no debe superar los 150–160 caracteres y debe

describir fielmente el contenido de la Web. Es bastante importante a la hora de
posicionar una Web que esta descripción sea única (no copiada del texto de
nuestra Web o de otra Web) y sea fácil de leer ya que, como hemos comentado,
será el trozo de texto que aparecerá en las búsquedas. (Véase la imagen 1).

Búsqueda en Google de “Ballena Azul”

Robots

Controla el comportamiento del rastreo y la indexación del motor de búsqueda.

La meta etiqueta robots se aplica a todos los motores de búsqueda. Los valores
predeterminados son “index, follow” (igual que “all”) y no es necesario especifi-
carlos. Su definición es la siguiente:

<meta name="robots" content="valores"/> 

12
 ELEMENTOS HTML

Se permite siempre una combinación de indexación y seguimiento pero que

tenga lógica. Los posibles valores para el contenido son:

 index o noindex: Permite o impide que la página se indexe.

 follow o nofollow: Permite o impide que se sigan enlaces de esta pá-

gina.

 Snippet o nosnippet: Permite o impide que un fragmento se muestre

en los resultados de búsqueda.

 Odp o noodp: Permite o impide que se utilice la descripción alternativa

de ODP/DMOZ.

 unavailable_after.[fecha]: Permite especificar la hora y la fecha exactas

en que deseamos detener el rastreo y la indexación de la página. (No
funciona para todos los robots).

 archive o noarchive: Esto permite decidir si deseamos o no que el mo-

tor de búsqueda archive el contenido del sitio Web en su caché interna.
Buscadores como Google tienen una caché y gracias a ella podemos
ver las páginas Web tal y como las tiene almacenadas en dicha caché.
Para ello, en los resultados de las búsquedas aparece un enlace que
pone “caché”. Si decimos que no archive la página, no debería mostrar
ese enlace de caché. Esto en realidad, según Google, no evita que se
guarde en caché la página, sino que no permite verla a los usuarios del
buscador y por lo tanto no muestra el enlace.

Content-Type

Esta meta etiqueta define el tipo de contenido de la página y el conjunto de ca-

racteres. Asegúrate de delimitar el valor del atributo de contenido con comillas;
de lo contrario, el atributo del conjunto de caracteres podría interpretarse de
manera incorrecta. Su definición en HTML 4.01 es la siguiente:

<meta http‐equiv="content‐type" content="text/html; charset=UTF‐8"> 

HTML 5 designa la codificación utf-8 como el estándar por defecto y es el que se

recomienda seguir. Para especificar la codificación se usa una meta etiqueta un
poco distinta de la anterior:

<meta name="encoding" charset="utf‐8" /> 

13
ELEMENTOS HTML

Aunque recomendamos el uso de una más simplificada:

<meta charset=”utf‐8”> 

Esta declaración es casi de uso obligado en HTML 5 y sustituye al modo en

que se declaraba en antiguas versiones de HTML y en XHTML.

No se deben utilizar ambas declaraciones de forma

simultánea. Si usamos HTML 5, utilizaremos la se-
gunda declaración; en cualquier otro caso la primera.

La declaración de codificación siempre tiene que estar en los primeros 1024

bytes del documento HTML.

Las codificaciones de caracteres usadas normalmente en la Web incluyen ISO-

8859-1 (también llamada “Latin-1”; utilizable para la mayor parte de los idiomas de
Europa occidental), ISO-8859-5 (que soporta el alfabeto cirílico), SHIFT_JIS (una codi-
ficación japonesa), EUC-JP (otra codificación japonesa), y UTF-8 (una codificación de
ISO 10646 que utiliza un número diferente de bytes para distintos caracteres). En
los nombres de las codificaciones no se distingue entre mayúsculas y minúsculas,
así que por ejemplo “SHIFT_JIS”, “Shift_JIS”, y “shift_jis” son equivalentes.

Por lo general, usaremos UTF-8 o ISO-8859-1.

2.2. OTRAS META ETIQUETAS

Author

Esta etiqueta nos indica quién es el creador de la web:

<meta name="Author" content=""> 

14
 ELEMENTOS HTML

Keywords

Es una serie de palabras o términos separados por comas que valen para indi-
car a los buscadores las palabras sobre las que puede tratar nuestra Web. No la
hemos incluido en la sección anterior con las etiquetas importantes porque
desde hace algún tiempo los buscadores principales como Google anunciaron
que ya no la utilizaban en sus robots de rastreo.

<meta name="Keywords" content="clave1,clave2…"> 

Locality

Sirve para indicar si la página Web está orientada a una zona en concreto o el
producto que contiene es para un lugar. No es demasiado importante y casi no
se usa, aunque se empieza a comentar que los sistemas Web con GPS para mó-
viles (geolocalización) podrían empezar a utilizarla para dar prioridad a unas u
otras páginas Web.

<meta name="locality" 

content="jaca,Huesca,España,europa,"> 

Language

Le sirve al buscador para indexar la página en el idioma correspondiente. Lo

cierto es que los buscadores captan sin problemas el lenguaje en el que esté
escrita una página Web, siempre que esta etiqueta sea visible.

<meta name="language" content="ES"> 

15
ELEMENTOS HTML

En documentos HTML 5 tal y como ya hemos visto

antes, el atributo de declaración del idioma debe
usarse dentro de la etiqueta <html>, por lo que la
manera anterior quedaría obsoleta y la deberíamos
utilizar siempre de la siguiente forma:
<HTML lang=”es>

Cabe añadir que, si queremos declarar una parte del documento en otro idioma
por necesidades del SEO o para que los robots de los principales buscadores
nos indexen de forma más eficaz, podemos declararlo directamente en la eti-
queta que lo contenga, por ejemplo:

<p lang=”en”> …texto en inglés… </p> 

<p lang=”fr”> …texto en francés… </p> 

Revisit-after

Esta meta etiqueta le dice al buscador que, como cada “x” tiempo se va a modi-
ficar algo de nuestra Web, vuelva a indexarla pasado ese periodo.

<meta name="revisit‐after" content="7 days"> 

Category

Hace referencia a la temática. La estructura que se suele usar para definirla es

“lenguaje, País, temática”.

<meta name="category" content="Spanish, Spain, Viajes y turismo"> 

16
 ELEMENTOS HTML

Viewport (Responsive)

Si utilizamos una plantilla adaptativa en nuestro sitio Web, tipo Bootstrap o

cualquier otro framework adaptativo, también se utilizan meta etiquetas para
dar información de cómo debe verse en cada dispositivo. Con el ejemplo si-
guiente se indica que se debe tener (como ancho base), la anchura del dispositi-
vo e iniciar a escala 1, sin zoom.

<meta name="viewport" content="width=device‐width; initial‐
scale=1.0" /> 

Algunas metaetiquetas HTML5 poco frecuentes

Estas tres metaetiquetas, aunque no suelen usarse habitualmente, conviene

tenerlas en cuenta para conocerlas y saber utilizarlas en caso necesario.

<meta name=”application‐name” content=”Nombre de la app Web” /> 

<meta name=”generator” content=”Joomla 3.5” /> 

<meta name=”google‐site‐verification” content=”7432e7ba674dc” /> 

La primera indica que es una aplicación Web la que se encuentra alojada, y no

debe usarse si no se trata de una aplicación. La segunda meta etiqueta nos avi-
sa del generador de contenido o CMS con el cual se ha creado dicha página. La
tercera meta etiqueta se usa para indicar a Google que una página es de nues-
tra propiedad.

https://support.google.com/webmasters/answer/79812?hl=es

Amplía información sobre las metaetiquetas que en-

tiende Google.
(Tienes el enlace en el Campus Virtual).

17
ELEMENTOS HTML

https://gist.github.com/lancejpollard/1978404

También puedes obtener un completo listado de me-

taetiquetas.
(Tienes el enlace en el Campus Virtual).

Ejemplo de página con meta etiquetas

<!DOCTYPE html> 

<html lang=”es”> 

<head> 

<title>Mi primera Web con meta etiquetas</title> 

<meta name="robots" content="index,follow"> 

<meta charset=”iso‐8859‐1"> 

<meta name="Author" CONTENT="curso de HTML"> 

<meta name="description" content="Curso de programación en 
HTML, descubre lección a lección como crear tu propia página 
web profesional."> 

<meta name="keywords" content="web, curso HTML, crear web, 
web desde cero”> 

<meta name="locality" conent="zaragoza,aragón,spain,europa"> 

<meta name="revisit‐after" content="7 days"> 

<meta name="category" content="Programación web"> 

</head> 

<body> 

Hola soy la primera Web HTML de este curso con meta etiquetas. 

</body> 

</html>

18
 ELEMENTOS HTML

3. ELEMENTOS BÁSICOS
En este capítulo veremos los elementos básicos que podemos utilizar para dar
formato a nuestra página Web, aunque la mayor parte, por no decir todos, pue-
den ser sustituidos por estilos CSS, pero nunca está de más conocerlos:

 Párrafos.

 Saltos de línea.

 Centrado.

 Líneas.

 Subrayado.

 Negrita, subrayado y cursiva.

 Subíndice, superíndice Y tachado.

 Títulos.

 Mostrar etiquetas HTML en una Web.

 Etc.

3.1. PÁRRAFOS

Este elemento se define entre las etiquetas <p> y </p>. Dentro podremos escri-
bir el texto que deseemos y lo que nos generará será un párrafo independiente
de texto tras el cual aparecerá un salto de línea sin necesidad de indicárselo.

19
ELEMENTOS HTML

Ejemplo

<p>Esto es un ejemplo de párrafo</p><p>Verás que al ver la Web, 
esta frase aparece separada de la anterior</p>. 

3.2. SALTOS DE LÍNEA

Gracias a este elemento podemos insertar saltos de línea dentro del código y no
solo dentro de textos, sino entre enlaces, imágenes… Este elemento se usa para
saltos de líneas dentro de los textos (veremos más adelante que para dejar es-
pacios entre imágenes u otros elementos es más sencillo y limpio con estilos
CSS) y su definición es <br />.

Ejemplo

Esto es un ejemplo de salto de línea <br />Con una sola etiqueta 
bajamos a la línea siguiente, mientras que con dos <br /><br />esta 
frase aparece como si fuera un párrafo. 

Aunque con <br> tendríamos suficiente, si queremos

añadir compatibilidad con XHTML deberemos usar la
etiqueta <br />.

3.3. CENTRADO

Por defecto cualquier elemento o texto que incluyamos en la Web estará ali-
neado a la izquierda. Con esta etiqueta que se define <center></center> po-
dremos centrar un texto por ejemplo, en nuestra Web.

20
 ELEMENTOS HTML

Este elemento ha quedado obsoleto ya que con ho-

jas de estilo CSS se consigue el mismo efecto de
centrado.

Ejemplo

<center>Este texto aparecerá centrado en la página Web</center> 

3.4. LÍNEAS
Si queremos separar un párrafo de otro o una sección de la Web de otra po-
dremos usar <hr>. Esta etiqueta nos dibujará una línea en la Web. Acepta dos
atributos bastante útiles: “size” para darle altura y “width” para darle longitud.

Ejemplo

<hr size="4px" width="200px"> 

3.5. TABULADO
Para conseguir la tabulación inicial o “indentación” de un párrafo existe la eti-
queta <blockquote> … </blockquote>. El texto que insertemos en ella llevará
una tabulación inicial.

Ejemplo

<blockquote> 

Este texto lleva una tabulación inicial, por lo que está indentado. 

</blockquote> 

21
ELEMENTOS HTML

3.6. NEGRITA, SUBRAYADO Y CURSIVA

Para poder dar estos formatos al texto de nuestra Web disponemos de varias
etiquetas: <b></b> y <strong></strong>, para conseguir la letra en negrita;
<u></u>, para conseguir subrayarla; <i></i> y <em></em>, para ponerla en itáli-
ca. Algunas etiquetas están descontinuadas, por lo que se desaconseja su uso
en HTML 5, como veremos un poco más adelante.

Ejemplo

La palabra <strong>Camión</strong> está en negrita, <u>Acera</u> 
esta subrayada y <em>Semáforo</em> está en itálica o cursiva. 

3.7. SUBÍNDICE, SUPERÍNDICE Y TACHADO

Si necesitamos en algún momento poner alguna de estas opciones a un texto

utilizaremos las siguientes etiquetas: , para el subíndice;
, para el superíndice; <del></del>, para el tachado.

Ejemplo

Usado sobre todo para expresiones matemáticas como 34_exp<br/>

O medidas como 30m²<br/> 

O indicar cosas <del>tachadas</del> 

3.8. TÍTULOS

Estas etiquetas son fundamentales para la estructura y comprensión de la Web

por parte de los robots de rastreo de los buscadores. Su formato es <h1></h1>,
<h2></h2>… Van en orden ascendente y ese mismo orden es la importancia que
le dan los buscadores a dichos título, por ejemplo una página Web que venda

22
 ELEMENTOS HTML

ordenadores tendría como h1 algo como “Venta de ordenador por Internet”, un h2

para dicha página podría ser “Venta de ordenadores de segunda mano”, ya que sería
algo que también define una parte de la Web. Estas etiquetas llevan por defecto
unas características de estilos propias y diferentes de tamaño y separación.

Ejemplo

<h1>Título principal</h1><br /> 

<h2>Título 2</h2><br /> 

<h3>Título 3</h3><br /> 

<h4>Título 4</h4><br /> 

<h5>Título 5</h5><br /> 

Este código mostraría algo así en el navegador:

23
ELEMENTOS HTML

3.9. MOSTRAR ETIQUETAS HTML EN UNA WEB

Puede que, por necesidad, tengamos que mostrar la etiqueta HTML o el conjun-
to de código tal y como queremos que se vea, bien para copiarlo o bien porque
no podemos poner una captura de pantalla.

Si escribimos el código directamente para que se muestre, el navegador lo in-

terpretará, y mostrará el resultado, dando lugar a errores en algún caso. Para
mostrar la etiqueta HTML que necesitemos, solamente deberemos cambiar los
caracteres < y > por &lt y &gt respectivamente. Recuerda que debe ir todo junto
para que quede igual que una etiqueta estándar.

Para mostrar <blockquote> por pantalla en el navega-

dor, escribiremos &ltblockquote&gt. Al interpretarlo
el navegador, sustituirá &lt y &gt por los caracteres
correspondientes, mostrando la etiqueta HTML co-
rrectamente donde necesitemos.
¡Haz la prueba!

3.10. ETIQUETAS BÁSICAS DESCONTINUADAS EN HTML 5

ETIQUETA USO OBSERVACIONES

<b>…</b> Poner texto en negrita Puede ser sustituido por CSS.

<strong>…</strong> Poner texto en negrita Puede ser sustituido por CSS.

<i>…</i> Poner texto en cursiva Puede ser sustituido por CSS.

<em>…</em> Poner texto en cursiva Puede ser sustituido por CSS.

<u>…</u> Poner texto subrayado Descontinuada.

<small>…</small> Poner texto más pequeño Puede ser sustituido por CSS.

<big>…</big> Poner texto más grande Puede ser sustituido por CSS.

_… Poner texto subíndice Puede ser sustituido por CSS.

^… Poner texto superíndice Puede ser sustituido por CSS.

<strike>…</strike> Poner texto tachado Descontinuada.

<s>…</s> Poner texto tachado Descontinuada.

<del>…</del> Poner texto tachado Puede ser sustituido por CSS.

24
 ELEMENTOS HTML

En color oscuro, las etiquetas marcadas como descontinuadas y que no se re-

comienda utilizar en HTML 5. La mayoría de navegadores modernos siguen re-
conociéndolas, aunque se desaconseja su uso, debiendo ser sustituidas por
estilos CSS.

Ejercicio 1. De los puntos 1 a 3

Crea una página Web que contenga al menos, la estructura base, las meta eti-
quetas importantes y que tenga el siguiente aspecto:

Para ello, utilizarás lo aprendido hasta ahora en la unidad. Repasa los conceptos
vistos hasta este punto.

25
ELEMENTOS HTML

4. TABLAS
Las tablas son un recurso que durante mucho tiempo ha sido esencial en el
diseño y creación de páginas Web y, aunque poco a poco ha ido dejando paso a
las hojas de estilos y el uso de contenedores, sigue siendo una herramienta muy
útil y utilizada para la generación de cuadros de datos, tablas numéricas, listas
de precios, formularios sencillos…

4.1. TABLAS SIMPLES

Una tabla simple puede ser usada simplemente como un grupo de filas y co-
lumnas para indicar, por ejemplo, los precios de un hotel según el tipo de habi-
tación. Como todos los elementos en HTML, las tablas están creadas en texto
plano con etiquetas. En el caso de una tabla simple, podremos crearla con las
siguientes etiquetas: <table></table> para definir la tabla (el resto de elementos
de la tabla irán dentro de este); <tr></tr> para definir las filas y <td></td>, para
crear las celdas por columnas.

26
 ELEMENTOS HTML

Ejemplo de página con Tabla

<HTML> 

<head> 

<title>Ejemplo de Tabla simple</title> 

</head> 

<body> 

<table border=”1”> 

<tr> 

<td>Habitación Doble</td><td>100 €</td> 

</tr> 

<tr> 

<td>Habitación Triple</td><td>200 €</td> 

</tr> 

<tr> 

<td>Habitación President</td><td>400 €</td> 

</tr> 

</table> 

</body> 

</HTML> 

Resultado

27
ELEMENTOS HTML

Como se puede observar en la imagen izquierda, al poner a la definición de ta-

ble el atributo “Border = ‘1’” conseguimos que la tabla tenga un borde que defina
las celdas; la imagen de la derecha muestra cómo se vería sin dicho atributo.

Ten en cuenta que las celdas vacías igual deben ser declaradas utilizando sus
respectivas etiquetas. Cuando el contenido de una celda debe quedar vacío,
deberás usar siempre un espacio en blanco (&nbsp;) en su lugar. Esto se hace
porque ciertos navegadores no interpretan las celdas vacías y siempre deben
tener algo de contenido.

4.2. CELDAS CABECERA

Es un tipo de celda especial (etiqueta th) que contiene información de encabeza-

do para todas las celdas en la columna (pertenecientes al mismo grupo horizon-
tal). Los navegadores pueden mostrar por defecto el contenido de las celdas de
encabezado en una manera especial (usualmente, texto centrado y en negrita).

Este tipo de celda se encuentra normalmente en el encabezado de una tabla.

Copia y pega el siguiente código en el cuerpo (<body>) del anterior ejemplo para
probarlo.

Ejemplo

<table border=”1”> 

<tr> 

<th>Tipo de habitación</th><th>Precio</th> 

</tr> 

<tr> 

<td>Habitación Doble</td><td>100 €</td> 

</tr> 

<tr> 

<td>Habitación Triple</td><td>200 €</td> 

28
 ELEMENTOS HTML

</tr> 

<tr> 

<td>Habitación President</td><td>400 €</td> 

</tr> 

</table> 

Resultado

4.3. UNIR CELDAS DE UNA TABLA

En ocasiones nos podemos encontrar con la situación de tener que crear la ta-
bla con una celda doble o una celda que ocupa varias alturas. Para ello, utiliza-
remos la etiqueta <td></td> con dos atributos posibles: colspan para unir celdas
horizontalmente y rowspan para unirlas verticalmente.

Ya sabes qué hacer para probar los siguientes códigos de ejemplo…

Ejemplo “colspan”

<table border="1"> 

<tr> 

<td>Campo 1</td> 

<td>Campo 2</td> 

<td>Campo 3</td> 

</tr> 

29
ELEMENTOS HTML

<tr> 

<td colspan="2">Campos 4 y 5</td> 

<td>Campo 6</td> 

</tr> 

<tr> 

<td>Campo 7</td> 

<td>Campo 8</td> 

<td>Campo 9</td> 

</tr> 

</table> 

Resultado

Ejemplo “rowspan”

<table border="1"> 

<tr> 

<td rowspan="3">Campo unificado</td> 

<td>Campo 2</td> 

<td>Campo 3</td> 

</tr> 

<tr> 

<td>Campo 5</td> 

30
 ELEMENTOS HTML

<td>Campo 6</td> 

</tr> 

</table> 

Resultado

4.4. TABLAS ANIDADAS

Muy útil también es el uso de tablas anidadas. Las tablas pueden ser incluidas
dentro de otras y así, podemos incluir una tabla dentro de la celda de otra. El
modo de funcionamiento sigue siendo el mismo aunque la situación puede
complicarse si el número de tablas embebidas dentro de otras es elevado. Esta
forma de anidar nos puede ser útil para plasmar cuadros de valores o cuadros
con listas.

Ejemplo

<table border="1"> 

<tr> 

<td> 

Celda de la tabla principal 

</td> 

<td> 

<table border="1"> 

<tr> 

31
ELEMENTOS HTML

<td>Tabla anidada, celda 1</td> 

<td>Tabla anidada, celda 2</td> 

</tr> 

<tr> 

<td>Tabla anidada, celda 3</td> 

<td>Tabla anidada, celda 4</td> 

</tr> 

</table> 

</td> 

</tr> 

</table> 

Resultado

32
 ELEMENTOS HTML

4.5. ATRIBUTOS DE LAS TABLAS

Las etiquetas de las tablas tienen una serie de atributos de los que nos pode-
mos valer para darle formato a la tabla. Explicaremos etiqueta a etiqueta los
atributos que podemos usar, aunque como ya hemos observado en el resto de
etiquetas vistas hasta ahora, con CSS podremos modificar muchos aspectos
estéticos:

 Etiqueta <table>

 border: nos dibuja un borde alrededor de las celdas de la tabla y

de la propia tabla.

 align: alinea la tabla con relación al entorno, por ejemplo, si la ta-

bla está antes de un texto y le ponemos un align=”right” quedaría
a la derecha del texto, no debajo.

 background: nos permite poner una imagen de fondo a la tabla.

Ejemplo: <table background="imagen1.jpg">.

 bgcolor: nos permite poner un color de fondo a la tabla mediante

codificación hexadecimal. Ejemplo: <table bgcolor="#ff0000">.
 bordercolor: dibuja el borde de la tabla en un color mediante co-
dificación en hexadecimal. Ejemplo: <table border="1" borderco-
lor="#ff0000">.
 height: define la altura en pixels o en porcentaje. Ejemplo: <table
height="300px">.
 width: define la anchura en pixels o porcentaje. Ejemplo: <table
width="500px">.
 cellpadding: define, en pixels, el espacio entre los bordes de la
celda y el contenido de la misma.
 cellspacing: define el espacio entre los bordes (en pixels).

33
ELEMENTOS HTML

En la siguiente imagen quedan mejor explicados los atributos cellpadding y cells-

pacing:

Ejemplo de “cellpadding” y “cellspacing”

<table cellspacing="20" cellpadding="10" border="1"> 

<tr> 

<td>Tabla anidada, celda 1</td> 

<td>Tabla anidada, celda 2</td> 

</tr> 

<tr> 

<td>Tabla anidada, celda 3</td> 

<td>Tabla anidada, celda 4</td> 

</tr> 

</table> 

Resultado

34
 ELEMENTOS HTML

Ejercicio

Crea una página Web que contenga una tabla como la que se muestra en la
siguiente imagen:

Para ello, utilizarás lo aprendido hasta ahora en el curso.

35
ELEMENTOS HTML

5. IMÁGENES
El uso de imágenes es uno de las características más utilizadas en el diseño
Web. Incluir imágenes en una página Web es muy sencillo… solo se debe tener
en cuenta que las imágenes deben tener los formatos GIF, JPEG/JPG o PNG. Su
etiqueta es <img src=” ” />, para poder incluir una imagen en nuestra Web de-
bemos conocer los posibles parámetros de la etiqueta:

 src. Este atributo es obligatorio e indica el nombre del archivo de ima-

gen (entre comillas) o la URL que se va a mostrar.

 align. Permite controlar la alineación de una imagen con respecto a

una línea de texto adyacente o a otras imágenes en esa línea. Los valo-
res posibles son left, right, top, middle y bottom.

 alt. Este atributo acepta un texto entre comillas. Dicho texto debería
indicar fielmente en contenido de la imagen. Este texto se usa con dos
fines: el primero, para facilitar la navegación a gente con alguna disca-
pacidad y, el segundo, para que los robots de los buscadores (que no
saben interpretar imágenes) sepan qué hay en la imagen. Esencial para
ayudar al SEO (Search Engine Optimization) de nuestra página.

 width. Este atributo es opcional pero es recomendable ponerlo para

ayudar al navegador a representar la imagen. Especifica el ancho de la
imagen que vamos a representar. Al ponerlo conseguimos que el nave-
gador pueda seguir interpretando la Web sin que la imagen haya ter-
minado de descargarse.

36
 ELEMENTOS HTML

 height. Al igual que el atributo width, es opcional, pero recomendable

ponerlo. Especifica el alto de la imagen.

 border. Con este atributo especificamos el ancho de un borde que ro-

dea la imagen.

La etiqueta <img> puede cerrarse a sí misma, sin necesidad de invocar ninguna

etiqueta de cierre. Es decir, podemos usarla simplemente escribiendo:

<img src=”ruta/fichero.png” alt=”Texto Descriptivo” /> 

Como verás, esta etiqueta debe usarse con esta ligera variación, ya que se cierra
ella misma.

Debes también tener en cuenta que, aunque los PNG están permitidos, hay al-
gunos navegadores antiguos como Internet Explorer (en su versión 6.0 y arre-
glado a partir de la versión 8), que no soportan las transparencias por defecto
que incluyen estas imágenes.

Actualmente, la totalidad de navegadores Web mo-

dernos aceptan el formato PNG con transparencias.

Ejemplo

<img src=”imagenes/oso.jpg” alt=”Oso blanco en el hielo” 
width=”200” height=”320” border=”0” Align=”right”/> Este es un oso 
blanco. Como se puede ver está en el hielo, esperando a ver si caza 
algo. 

37
ELEMENTOS HTML

38
 ELEMENTOS HTML

6. ENLACES
Los enlaces son una de las herramientas más importantes y utilizadas en la web,
ya que nos proporcionan la posibilidad de navegar entre diferentes archivos
HTML de nuestra página, enlazar con páginas externas o enlazar con archivos
de descarga. La etiqueta de los enlaces es <a href=” ”></a>, dentro de las comi-
llas del href pondremos la ruta de envío, y entre <a href=” ”> y </a> el ‘anchor-
text’ o texto ancla que es lo que se mostrará en la página. Para saber qué parte
de un texto en una página es un enlace, basta con pasar el ratón por encima del
texto. Al pasar por encima de un enlace, el puntero cambiará, y en la barra infe-
rior del navegador aparecerá la ruta de enlace (siempre que no se haya modifi-
cado por estilos).

La sintaxis de un enlace es por tanto de la forma:

<a href="destino">texto ancla</a>. 

Pudiendo ser texto ancla un texto o una imagen. Por su parte, “destino” será una
página, un correo electrónico o un archivo.

En función del destino, los enlaces son clásicamente agrupados del siguiente
modo:

 Enlaces internos: los que se dirigen a otras partes dentro de la misma

página.

 Enlaces locales: los que se dirigen a otras páginas del mismo sitio
Web.

39
ELEMENTOS HTML

 Enlaces remotos: los dirigidos hacia páginas de otros sitios Web.

 Enlaces con direcciones de correo: para crear un mensaje de correo

dirigido a una dirección.

 Enlaces con archivos: para que los usuarios puedan hacer descargas
(downloads) de ficheros.

A continuación, veremos con más detalle estos tipos de enlace.

6.1. ENLACES INTERNOS

Son aquellos enlaces que apuntan a diferentes partes dentro del HTML. Este
tipo de enlaces no son muy utilizados ya que, por lo general, todas las páginas
Web tienen varios y suelen generarse varios HTML, tantos como apartados. Me-
diante estos enlaces internos podemos crear una navegación dentro de un úni-
co HTML para poder ir al principio o al final del archivo o movernos por los dife-
rentes párrafos o secciones.

Supongamos que queremos poner un enlace que navegue al final de la página.

Lo primero será colocar nuestro enlace origen. Lo podemos poner en el lugar
que queramos.

<a href="#abajo">Ir abajo</a> 

Podemos observar que dentro del atributo href aparece el nombre de la etique-
ta que definiremos al final del documento (el nombre puede ser cualquiera)
precedido de una almohadilla #.

Por último, debemos crear un enlace con el nombre que le hayamos da-
do dentro del anterior href y lo colocaremos al final del documento o en el pun-
to al que queramos que dirija.

<a name="abajo"></a> 

Y con esto, tendríamos creado el enlace a la parte inferior. En un mismo HTML

podemos poner tantos enlaces de este tipo como queramos.

40
 ELEMENTOS HTML

En HTML5, usar name está obsoleto aunque todavía sigue siendo válido, pero no
es recomendable. La forma correcta sería establecer un id.

<h2 id="abajo">Abajo</a> 

6.2. ENLACES LOCALES

Estos enlaces son normalmente utilizados en sitios Web con varias páginas.
Cualquier sitio que vaya a tener más de un fichero HTML y más de una sección,
contendrá enlaces de este tipo. Estos enlaces nos permiten navegar entre los
diferentes archivos HTML que hemos creado para nuestro sitio Web.

Para crear este tipo de enlaces, tenemos que crear una etiqueta de la siguiente
forma:

<a href="archivo.html">texto ancla</a> 

En muchos casos, las páginas Web tienen tantos apartados que se tiende a or-
ganizar los archivos de los aparatados por carpetas dentro del sitio Web. En
estos casos, hay que tener en cuenta que no valdrá con hacer referencia al
nombre del archivo sino que tendremos que generar la ruta de directorio. A
continuación se explica con unos ejemplos cómo generar rutas cuando tene-
mos una organización en carpetas:

41
ELEMENTOS HTML

Ejemplo 1

Enlazar en el archivo ‘base.html’ el archivo llamado ‘archivo_1.html’. Este está

dentro de una carpeta llamada ‘carpeta_1’.

<a href=”carpeta_1/archivo_1.html”>Enlace con archivo_1</a> 

Para cada carpeta en la que entremos pondremos una “/” y al final el nombre
del archivo.

Ejemplo 2

Enlazar en el archivo ‘archivo_1.html’, el archivo ‘base.html’ que está en la raíz de

mi sitio Web.

<a href=”../base.html”>Enlace con base</a> 

En este caso usamos ‘../’ para descender un nivel en la jerarquía de carpetas.

Tendremos que poner tantos como sea necesario hasta llegar a la carpeta
deseada. Esta clase de ruta se llama “relativa”, ya que es relativa a la ubicación
del archivo desde el que invocamos al otro archivo del enlace.

Ejemplo 3

Enlazar desde el archivo ‘archivo_1.html’ al archivo ‘archivo_2.html’, contenido en

una carpeta diferente llamada ‘carpeta_2’.

<a href=”../carpeta_2/archivo_2.html”>Enlace con archivo_2</a> 

Por último, en este ejemplo indicamos con ‘../’ que debe descender un nivel
desde ‘carpeta_1’ hasta ‘mi_web’ y luego entrar en ‘carpeta_2’ para enlazar con
‘archivo_2.html’.

42
 ELEMENTOS HTML

Los enlaces locales pueden a su vez contener enlaces internos, por ejemplo en
el caso de que quisiéramos que desde ‘base.html’ enlazara con ‘archivo_1.html’ y
además fuera al final de la página, bastaría con crear en ‘archivo_1.html’ un en-
lace como este en la parte inferior:

<a name=”abajo”></a> 

y en el archivo “base.html” poner este enlace:

<a href=”/carpeta_1/archivo_1.html#abajo”>enlace</a> 

6.3. ENLACES REMOTOS

Son los enlaces que se dirigen hacia páginas que se encuentran fuera de nues-
tro sitio Web, es decir, cualquier otro documento que no forma parte de nues-
tro sitio.

Son muy comunes para indicar enlaces de páginas Web del mismo tema que la
nuestra o en las ocasiones que realicemos algún intercambio de enlaces con
otras webs.

El formato es el siguiente:

<a href=”http://www.masterd.com”>Master.D</a> 

Cabe destacar que para que el enlace funcione hay que indicarle la ruta completa,
incluida la cabecera de protocolo ‘http://’, ya que es la que indica a los navegado-
res que la página está colgada en Internet, no de forma interna en tu sitio Web.

En algunos casos esta cabecera podría variar y apuntar a ‘ftp://’ generalmente

cuando se apunta a algún recurso que se encuentra en servidores de datos FTP
o por ejemplo ‘https://’ que nos enlaza con páginas en servidor seguro o con
cifrado SSL/TLS.

43
ELEMENTOS HTML

6.4. ENLACES A CORREO ELECTRÓNICO

Los enlaces de correo son muy utilizados en páginas Web que no llevan ningún
tipo de programación (ASP, PHP, JSP…). En los otros casos, los lenguajes de pro-
gramación disponen de librerías para mandar correos electrónicos. En caso de
ser una página sencilla podemos usar esta opción pero teniendo en cuenta algo
fundamental: estos enlaces lo que hacen es una llamada al programa de correo
configurado por defecto en el equipo, por ejemplo Outlook de Microsoft, Thun-
derbird o cualquier otro que tengamos instalado, y en caso de que no se tuviera
configurado ningún programa, el enlace no generaría el correo. Por eso, el texto
ancla debe ser siempre el propio correo electrónico para que en esto casos el
usuario pueda al menos copiar la dirección para enviar el correo desde su ges-
tor on-line de correos electrónicos (Yahoo, Gmail, Hotmail…).

El formato es el siguiente:

<a href="mailto:[email protected]">[email protected]</a> 

También podemos indicarle el asunto o si queremos que lleve copia adjunta a

algún otro e-mail.

<a href="mailto: [email protected]?subject=contacto&cc= prueba2@ 
prueba.com "> [email protected] </a> 

6.5. ENLACES A ARCHIVOS

Este tipo de enlaces se utiliza para permitir al usuario descargarse archivos que
queramos compartir o para abrir archivos tipo .pdf, .doc, .xls…

El formato es el mismo que para un enlace normal pero apuntando al nombre

del archivo:

<a href=”documentos/tarifas.pdf”>Tarifas PDF</a> 

<a href=”documentos/tarifas.zip”>Tarifas ZIP</a> 

44
 ELEMENTOS HTML

Con el primer enlace se abrirá el programa que tengamos asignado a los PDF en
nuestro equipo y se mostrará el documento. Con el segundo enlace nos apare-
cerá la típica ventana de ‘Abrir’ o ‘Guardar’ de nuestro Sistema Operativo.

6.6. VALORES DE ATRIBUTOS DE ENLACE

A la hora de establecer atributos a los enlaces, disponemos de algunos muy

interesantes para usar en nuestro sitio Web:

 Atributo Nofollow.

Nofollow es un atributo de los links HTML (etiqueta <a>) que sirve pa-
ra definir o marcar el comportamiento de los buscadores cuando ras-
trean nuestra página Web en busca de contenidos para indexarlos.
Por defecto, cuando un buscador visita una página Web va recorrien-
do todos sus enlaces y va indexando su contenido en su base de da-
tos de páginas. Esto es algo que hacen automática y periódicamente.
Ocurre tanto con los enlaces internos a otras páginas de nuestro sitio
como con los enlaces externos a otras páginas Web. Los motores que
recorren las webs enlace a enlace, se llaman arañas (crawlers).

Ahora bien, nosotros podemos, a través del atributo rel="nofollow", de-

cirle a un buscador que no siga indexando los contenidos de la página
a la que lleva un enlace en particular. Lo haríamos así:

<a href="enlace" rel="nofollow">texto ancla</a> 

 Atributo target.

Con la etiqueta <a> podemos hacer referencia a cualquier página Web y

abrir cualquier recurso Web, pero si le añadimos el atributo target cam-
biamos el modo de abrir las páginas Web. Por defecto, cuando hacemos
click en un enlace, la página Web solicitada sustituye la página actual y se
abre en la misma ventana. Por medio de valores asignables al atributo,
podemos realizar cambios en el comportamiento de los enlaces.

A modo de curiosidad, y aunque se verá posteriormente, el atributo

target se utiliza también para identificar los frames (marcos), ventanas
que podemos crear o abrir dentro de otras ventanas.

45
ELEMENTOS HTML

En este modo podemos especificar en que frame queremos abrir la pá-

gina Web (el frame tiene que ser nombrado con el atributo @id y el va-
lor del atributo target debe ser el nombre del frame).

El atributo target tiene cuatro valores principales posibles:

 _self.

Con este valor se identifica la ventana desde la que se hace la re-

ferencia. Es el valor por defecto y equivale a no poner nada, es
decir, a cargar el documento en la propia ventana.

 _top.

Identifica a la ventana de nivel superior en el contexto de navega-

ción. Cuando desde una ventana se crea otra, la primera esta
"por encima" en el contexto de navegación, y si hay varios niveles,
_top designa al primero.

 _parent.

Se refiere al nivel de navegación inmediatamente superior. En ca-

so de existir un único nivel, _top y _parent coinciden.

 _blank.

Es un valor especial que fuerza la creación de una nueva ventana

y envía el contenido del enlace allí. Esta ventana no tiene nombre
por lo que no es posible hacer nuevas referencias a ella. Cada en-
lace con este valor produce una nueva ventana cada vez que se
active.

El uso de estos atributos sería, por ejemplo:

<a href=”enlace” target=”_blank”>texto ancla</a> 

46
 ELEMENTOS HTML

7. FORMULARIOS
Los formularios son una herramienta muy utilizada en todo tipo de páginas
web. En las páginas web sencillas (sin programación) suelen ser utilizados para
generar un sistema de toma de datos para envío de correos electrónicos de
contacto, encuestas, etc.

En páginas que lleven programación, se utilizan para pasar datos entre páginas,
generar formularios complejos con respuestas dinámicas…

Los formularios se definen entre las etiquetas: <form> y </form> y entre ellas
se definen los objetos de formulario que explicaremos detenidamente más
adelante.

Lo primero que hay que saber de los formularios son los atributos posibles de
la etiqueta <form>, y estos son:

 name: con este atributo le daremos un nombre al formulario. Es muy

útil en webs con programación javascript, ya que el nombre nos permi-
te acceder a él y sus funciones desde el lenguaje javascript.

 method: nos indica el tipo de envío de datos que se va a utilizar. Las

dos opciones más utilizadas son POST y GET la diferencia entre ellos es
que con GET los datos que se envíen en dicho formulario serán visibles
en la barra de navegación, mientras que con POST estos datos se pasan
ocultos. Esta es la razón por la que el 90% de los formularios usan el
método POST.

47
ELEMENTOS HTML

 action: nos indica la acción a realizar cuando el usuario envíe el formu-

lario. Puede ser: otra página Web, con lo que nos enviaría los paráme-
tros del formulario a esta nueva Web; la propia Web; o algún CGI * de
envío de correo o similar.

*CGI: estos son pequeños programas accesibles desde la Web que nos dan
algún tipo de funcionalidad. Los más comunes se usan para utilizar el formulario
sencillo (sin programación) para enviar un e-mail desde la Web. La mayoría de
las empresas que dan servicio de alojamiento Web disponen de estos CGI’s para
que en cualquier Web se pueda incluir un envío de correo.

Ejemplo de creación de un formulario

<form name=”formulario” method=”post” action=”envio.html”/> 

Ahora explicaremos los posibles elementos y sus atributos que podemos incluir
en los formularios:

7.1. CAMPOS INPUT

Los input son las áreas donde introducimos los datos a un formulario, normal-
mente se les identifica por un type, como el que veremos a continuación, <input
type=”text”> que lo denomina como un pequeño área de texto que nos permite
escribir.

Campos de texto (input)

Este es posiblemente el elemento más utilizado en los formularios. Nos permite

solicitar al usuario una cadena de texto en forma de campo a rellenar y su eti-
queta es: <input type=”text” name=”texto” id=”texto” value=””/>.

48
 ELEMENTOS HTML

En este ejemplo podemos ver que para definirlo usamos el tipo text. Además
existen una serie de parámetros o atributos de restricción que podemos definir
en el input:

 name: con este atributo daremos un nombre al elemento. Es la forma

de definir el sistema con el que si por ejemplo el formulario es enviado
a otra web, podremos recoger los datos del mismo gracias a su nom-
bre. (Los elementos son enviados como variables con dicho nombre).

 id: este es utilizado en programación javascript. Es una forma de darle

un valor único dentro de toda la página Web mediante el cual (y una
instrucción javascript) podemos acceder en dinámico a este objeto y
modificar sus datos, valores o atributos.

 value: es el valor del campo. Si está vacío el atributo, se mostrará una

caja vacía. Si ponemos algún valor, aparecerá dicho valor en la caja.

Existen también otra serie de atributos no obligatorios pero que nos serán de
utilidad en algunas ocasiones:

 disabled: si indicamos esta propiedad, el campo aparecerá deshabilita-

do (no podremos escribir en él). Es utilizado en páginas Web con pro-
gramación para obligar al usuario a escribir un campo antes que otro.

 maxlength: limita el número de caracteres que podemos escribir en el

campo.

 size: define la longitud del campo. (Menos usado ya que puede definir-
se por estilos CSS).

 placeholder: especifica un texto por defecto en el input que aparecerá

hasta que comencemos a escribir el él.

 autofocus: establece el foco de escritura automáticamente en el primer

input que posea este atributo.

 readonly: establece como no editable un campo de texto. Solo puede

verse la información en él mostrada.

En HTML 5 contamos con nuevos atributos de res-

tricción para los cuadros de texto. Puedes verlos a
continuación.

49
ELEMENTOS HTML

 max: especifica el valor máximo para un campo de texto.

 min: especifica el valor mínimo para un campo de texto.

 pattern: especifica una expresión regular contra la que comprobar el

texto introducido.

 required: especifica que el campo debe rellenarse para poder enviar el

formulario.

 step: especifica el número de intervalos legales para un campo de texto.

Ejemplo.

Nombre: <input type=”text” name=”nombre” id=”nombre” value=”” /> 

Áreas de texto

Estos elementos se utilizan cuando queremos que el usuario pueda escribir un

texto más largo o que contenga varias líneas. Este elemento nos permite definir
el ancho y altura de las líneas a mostrar. Se define mediante la etiqueta: <texta-
rea> </textarea>, y los atributos que pueden ser utilizados son los siguientes:

 cols: define las columnas que tendrá la caja de texto.

 rows: define las líneas (altura) que tendrá la caja de texto.

Además, posee también los atributos comunes a elementos de formularios

name e id que hemos definido para el elemento anterior. En este caso no existe
el atributo value, pero sí que podemos dar un valor al contenido escribiendo el
texto entre las etiquetas del elemento.

50
 ELEMENTOS HTML

Ejemplo.

<textarea cols=”30” rows=”6” name=”prueba”>Prueba caja de 
texto</textarea> 

Campos de claves (input)

Existe una opción para poder crear campos de claves (o password) para nues-
tros formularios. Son muy utilizados para páginas en las que se requiera un re-
gistro y la introducción de claves para acceder. Este campo lo que hace es mos-
trar una caja de texto en la que al escribir aparecen asteriscos en vez de los ca-
racteres tecleados. Su etiqueta es como la de una caja de texto normal pero con
tipo password:

<input type=”password” name=”clave” /> 

Checkbox o casillas de verificación (input)

Este elemento nos permite crear casillas de verificación. Son unos elementos
cuadrados que podemos marcar o desmarcar como deseemos. Suelen utilizar-
se en formularios para pedir al usuario que elija algo o que marque sus prefe-
rencias, etc.

51
ELEMENTOS HTML

Su etiqueta es <input type=”checkbox” name=”casilla”/> además de los atribu-

tos de name, id y de value (este último tendrá valor si la casilla está marcada,
sino pasará una valor vacío), tiene también un atributo propio:

 checked: cuando se indica esta propiedad el elemento aparecerá mar-

cado por defecto en el HTML.

Ejemplo.

Color preferido : <br/> 

<input type=”checkbox” name=”casilla” value=”rojo” /> 

<input type=”checkbox” name=”casilla” value=”azul” checked/> 

RadioButtons o botones de opciones (input)

Estos elementos nos permiten mostrar al usuario una serie de opciones prece-
didas por un círculo de selección. Al seleccionar una de las opciones
nos deselecciona la que tuviéramos marcada. Su etiqueta es <input ty-
pe=”radio”>, para una lista de selección todos los elementos deben tener el
mismo nombre, y un valor diferente. Este elemento posee los atributos de
name, id, value y checked, ya explicados en los elementos anteriores.

Ejemplo.

Color preferido <br/> 

<input type=”radio” name=”opcion” value=”rojo” /> Rojo<br/> 

<input type=”radio” name=”opcion” value=”verde” /> Verde<br/> 

<input type=”radio” name=”opcion” value=”amarillo” checked /> 
Amarillo<br/> 

52
 ELEMENTOS HTML

Desplegable de selección

Nos permite mostrar una lista de opciones en un campo desplegable para que
el usuario pueda seleccionar el deseado. Se suele usar en listas muy amplias,
por ejemplo, para preguntar por el país o la provincia de origen. Su etiqueta es
<select name=”selección”></selecct> y dentro de ellas para cada elemento de la
lista pondremos <option value=””>valor</option>, este elemento posee los
atributos name e id.

Además, posee otros atributos específicos del elemento:

 size: define el número de opciones que se muestran en pantalla cuan-

do el elemento no está desplegado.

 multiple: cuando un desplegable es múltiple el visitante puede selec-

cionar más de una opción (manteniendo la tecla ‘Control’ presionada)

 selected: este es del subelemento option y nos indica si esta seleccio-

nado por defecto.

Ejemplo.

<select name=”selección”> 

<option value=”rojo”>rojo</option> 

<option value=”azul”>azul</option> 

<option value=”amarillo”>amarillo</option> 

</select> 

53
ELEMENTOS HTML

Botones

Los botones en los formularios nos permiten interactuar con la página y el mis-
mo formulario. Existen tres tipos de botones con la etiqueta <input>:

 Botón de envío de formulario, su etiqueta es submit y lo que hace es

enviar el formulario a la orden que se encuentre dentro del action del
mismo.

<input type=”submit” name=”boton” value=”enviar”/> 

 Botón de vaciado de formulario, su etiqueta es reset y nos permite

vaciar todo lo que se encuentre ya escrito o seleccionado en el formu-
lario y reestablecer los valores iniciales.

<input type=”reset” name=”boton” value=”vaciar” /> 

 Botón simple, su etiqueta es button y no tiene ninguna acción vincula-

da, ni envía el formulario, ni lo resetea. Es menos usado en páginas
sencillas ya que para que sea útil hay que usarlo con JavaScript.

La etiqueta button reúne todas estas funciones (submit, reset, button) bajo una
sola directiva, es decir, a diferencia de <input /> que se utiliza para introducir
varios elementos en una pagina Web, <button> es especializado y se ocupa so-
lamente de botones.

<button type="submit" autofocus>Enviar</button> 

<button type="reset">Restablecer</button> 

<button type="button">Botón</button> 

¿Cómo podemos saber cuándo utilizar una u otra

etiqueta? Sigue leyendo…

54
 ELEMENTOS HTML

La etiqueta input es más de formularios, es decir se identifica mucho con la di-

rectiva form. Por eso cuando quieres un botón para el envío o reseteo de un
formulario, input es la solución. En cambio cuando quieres un botón que te abra
alguna aplicación, página Web, que cambie colores o que inicie la reproducción
de un video, la etiqueta button es la solución.

El navegador entiende que cuando se utilizan los valores submit o reset en la

etiqueta input, se trata de botones con papeles definidos y claros, es decir, se
envía o reestablece un formulario. Por eso aplica por defecto un texto descripti-
vo al botón (enviar o reestablecer).

La etiqueta button en cambio, se puede utilizar para cualquier cosa en una pági-
na Web y por ese motivo el navegador no sabe de antemano para qué sirve.
Debido a eso, el navegador espera una descripción, rodeada de las etiquetas de
inicio y de cierre de button.

Lo mismo pasa con input cuando el atributo type es utilizado con la etiqueta
button. Como puede ser utilizado de varias formas, el navegador deja de aplicar
descripciones por defecto y espera una descripción mediante el atributo value.

Los atributos que podemos utilizar con botones son los siguientes:

 autofocus: Indica que el botón recibe automáticamente el foco al car-

garse la página Web. Es compatible y se puede usar con todos los ele-
mentos del formulario, no solo con el botón.

 disabled: Indica que el botón está desactivado.

 form: Permite asociar el botón a un formulario determinado aunque

esta fuera del espacio delimitado por <form>.

 name: Cuando se utilizan lenguajes de programación como JavaScript o

PHP, el atributo name sirve como conexión. Su valor (cadena de texto)
es guardado como variable y es utilizada para modificar el funciona-
miento de las directivas HTML.

 type: Atributo que establece el tipo y la función del botón.

 value: Envía valores mediante lenguajes de programación.

55
ELEMENTOS HTML

Los botones HTML con la etiqueta <button> vienen con una serie de atributos
comunes que tienen como prefijo la palabra form. Son los siguientes:

 formaction.

 formenctype.

 formmethod.

 formnovalidate.

 formtarget.

El prefijo form es una forma de conectar el sufijo (action, enctype, etc.) al formula-
rio, pero solamente representan extensiones de los atributos originales de la
directiva <form>. Es recomendable utilizar estos atributos solo cuando los boto-
nes están fuera del espacio delimitado por <form>.

Para poder asignar un botón externo a un formulario, el botón debe tener asig-
nado el atributo form con la id del formulario al que haga referencia.

Ejemplo.

<form id="formulario"> 

</form> 

<button type="submit" form="formulario" formaction="alta.php" 
formmethod="POST">Enviar</button> 

De todas formas, el uso de los atributos form en formularios se reserva más

para uso con lenguajes como JavaScript o PHP, que permiten interactuar con la
información que se trata en el formulario. De momento solamente es necesario
que conozcas dichos atributos. No te preocupes si aún no sabes utilizarlos con
otros lenguajes… todo llega, y en esta unidad nos centraremos en lo que pode-
mos utilizar únicamente con HTML y CSS.

56
 ELEMENTOS HTML

Usar una imagen como botón (input)

También podemos usar una imagen como botón de un formulario (sin necesi-
dad de programación) para ello usaremos un objeto con etiqueta image, este
objeto nos permite poner una imagen que tendrá las mismas características
que un botón submit, es decir, enviará el formulario a la acción que se encuen-
tre en el action del mismo.

Ejemplo.

<input type=”image” src=”imagen1.jpg” name=”boton” /> 

<button type="submit"> <img src="foto.png" /> </button> 

Campos de archivo (input)

Este elemento nos permite incluir un archivo en el formulario a la hora de hacer

el envío. Es muy usado en páginas con programación PHP o ASP para que el
usuario pueda subir, por ejemplo, fotografías, documento. También existen
CGI’s de correo que nos permiten adjuntar archivos en los envíos desde Web.

Ejemplo.

<input type=”file” name=”fichero” /> 

color

Este tipo de input permite obtener un elemento de selección de color, común-

mente denominado “paleta de color” o “color picker”.

<input type="color" name=”color”> 

57
ELEMENTOS HTML

date, datetime y datetime-local

Estos tipos de input nos obligan a insertar una fecha concreta (y una hora en los
dos últimos). En algunos navegadores nos permitirá desplegar un calendario
para realizar una selección del día concreto que elijamos, eludiendo la escritura
manual de la fecha.

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

email

Este tipo de input comprueba que el texto introducido corresponde a la estruc-

tura de una dirección de correo electrónico.

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

month

Este tipo de input nos permite seleccionar un mes y un año concreto.

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

58
 ELEMENTOS HTML

number

Este tipo de input nos obliga a introducir un valor numérico. En móviles, el tecla-
do se cambia a uno de tipo numérico.

<input type="number" name="numero" id="numero"> 

range

Este tipo de input nos permite seleccionar por medio de un deslizante, un valor
entre un rango que podemos definir.

<input type="range" name="rango" id="rango" min="0" max="10" > 

search

Este tipo de input establece una caja de texto donde podremos realizar bús-
quedas, ofreciendo un icono de borrado en el propio campo en cuanto comen-
zamos a escribir.

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

tel

Este tipo de input nos obliga a introducir una numeración telefónica con la es-
tructura que le indiquemos. Podemos utilizarlo junto al atributo pattern para
especificar una expresión regular que evaluar.

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

59
ELEMENTOS HTML

time

Este tipo de input nos permite seleccionar una hora en formato 00:00 – 24h.

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

url

Este tipo de input nos valida una URL. En móviles, el teclado suele incluir la tecla
“.com”.

<input type="url" name="url" id="url"> 

week

Este tipo de input permite seleccionar una semana de un año concreto, de for-
ma numérica.

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

60
 ELEMENTOS HTML

7.2. EJERCICIO. CREAR UN FORMULARIO COMO EL

SIGUIENTE

Con todo lo aprendido en el punto 7, crearemos el siguiente formulario:

Puedes practicar con otros elementos vistos en este punto, para coger soltura
con el uso de etiquetas HTML y atributos.

61
ELEMENTOS HTML

8. LISTAS
Estos elementos HTML nos permiten generar listas de datos para mostrar de
una forma sencilla.

Existen tres tipos de listas:

 Listas ordenadas.
 Listas no ordenadas.
 Listas de definición.

62
 ELEMENTOS HTML

8.1. LISTAS ORDENADAS

Estas muestran sus datos numerados, su etiqueta es <ol>.

Ejemplo

<p>Nacionalidades</p> 

<ol> 

 <li>Italiano</li> 

 <li>Español</li> 

 <li>Frances</li> 

</ol> 

Hay que tener en cuenta que con estilos CSS podemos cambiar el tipo de nu-
meración que se asigna en las listas ordenadas mediante la propiedad de CSS
list-‘style-type’ (que veremos en la segunda parte del temario dedicada a estilos).

8.2. LISTAS NO ORDENADAS

Muestran los elementos de la lista con un círculo delante y su etiqueta es <ul>.

63
ELEMENTOS HTML

Ejemplo

<p>Lista de la compra </p> 

<ul> 

 <li>leche</li> 

 <li>huevos </li> 

 <li>ternera</li> 

</ul> 

8.3. LISTAS DE DEFINICIÓN

Estas listas están compuestas de dos elementos, un término y la definición del

mismo. Su etiqueta para crear la lista es <dl>, para el término se usa <dt> y para
la definición <dd>.

Ejemplo

<p>Términos Informáticos</p> 

<dl> 

 <dt>CPU</dt> 

 <dd>Unidad de control de procesamiento</dd> 

 <dt>RAM</dt> 

 <dd>Memoria volátil</dd> 

64
 ELEMENTOS HTML

 <dt>Ratón</dt> 

 <dd>Periférico para interactuar</dd> 

</dl> 

65
ELEMENTOS HTML

9. CAPAS
Las capas son un método muy utilizado en páginas web que usan CSS como
modo de dar forma a los elementos representados en dicha web. Una capa es
como una caja que ponemos en la web (a esta caja podemos darle estilos de
colores, forma, tamaños, posición…) y dentro de ella introducimos el código que
nos interesa. En la sección de CSS del curso veremos con detenimiento cómo
construir estas cajas. Ahora explicaremos los dos tipos de cajas que existen:

div

La etiqueta DIV define una división o sección en una página Web o documento
HTML. Es un elemento denominado de bloque, es decir, que añade un salto de
línea al resultado en pantalla y se usa normalmente para agrupar elementos y
aplicarles formato con CSS.

span

Es un elemento neutro, es decir, que no introduce nada adicional (a menos que

se le indique por estilos). Se le denomina elemento de línea.

La diferencia entre ambos la vemos con un ejemplo: si ponemos un span dentro

de un texto, se leerá el texto seguido sin ningún problema; si por el contrario
ponemos un div nos generará un salto dentro del texto.

66
 ELEMENTOS HTML

Ejemplo

Este coche es de color rojo <span> oscuro </span> mientras que aquel es de
color verde <br/><br/>.

Este coche es de color amarillo <div> claro </div> mientras que aquel es de co-
lor azul.

9.1. ESTRUCTURA MEJORADA:

Estas etiquetas son usadas en sustitución de las etiquetas div y span para la
creación de la página manteniéndola más estructurada y fácil de leer para los
navegadores y cualquier otra aplicación de interpretación web, para mantener
su diferenciación de otras etiquetas similares su comportamiento es modificado
vía CSS.

header

El header es un elemento introductorio de la página o un artículo, normalmente

es el padre de algunos enlaces de la página, típicamente contiene, ‘headings’
(<h1> - <h6>), logos, textos cortos en caso de un artículo….

<header> 

<h1>titulo</h1>   

</header> 

67
ELEMENTOS HTML

section

Se utiliza para denominar a una sección general del documento, como sería por
ejemplo un capítulo de este manual. Puede contener subsecciones y además
favorece la jerarquización de la página, permitiendo así un mejor posiciona-
miento.

<section>Noticias</section> 

article

Es un elemento autónomo dentro de una página, es decir, no se trata de una

sección sino más bien de aquellos elementos más dados a repeticiones o reuti-
lización, como podrían ser los comentarios a un artículo en una página de gas-
tronomía, artículos de una revista, entradas de blogs…

Si los elementos de article son anidados, los interiores son los que deberán ir
relacionados y definiendo al exterior.

<article> Elementos Destacados</article> 

aside

Este elemento se utiliza para insertar contenido que no tenga que ver directa-
mente con el contenido de la página, y así separar lo que sí es relevante de la
página web con lo que no. Podría usarse para publicidad, elementos de navega-
ción, barras laterales…

<aside></aside> 

68
 ELEMENTOS HTML

nav

Este elemento se utiliza para definir en los enlaces de navegación entre páginas
o partes dentro de la misma página. Es una especie de caja de navegación que
funciona en conjunción con listas.

No todos los enlaces de una página deben estar contenidos en este tipo de
elementos. Se usará para contener las secciones principales de navegación, es
decir, lo que sería la estructura principal de enlaces de la web.

Ejemplo.

<nav> 

 <ul> 

<li><a href="inicio.html">Inicio</a></li> 

<li><a href="servicios.html">Servicios</a></li> 

 </ul> 

</nav> 

footer

Este elemento representa el pie de sección normalmente usado para un pie

común con todas las páginas web. Suele contener el copyright, políticas de pri-
vacidad, autor, enlaces, logos…

<footer></footer> 

Ejemplo final

69
ELEMENTOS HTML

70
 ELEMENTOS HTML

10. ETIQUETADO DE ELEMENTOS

Una de las cosas más importantes que debemos tener en cuenta a la hora de
crear nuestra Web es el etiquetado de los elementos. Esto nos permitirá hacer
nuestra Web mucho más accesible y amigable a los robots de los buscadores
como Google, Bing, DuckDuckGo o Yahoo.

Los más extendidos y que hay que tener en cuenta son:

Title

Esta etiqueta se debe insertar en los enlaces con el atributo title.

<a href=”pagina2.html” title=”pagina2”>pagina2</a> 

Hay que tener en cuenta que en este atributo title podemos poner lo que que-
ramos pero para conseguir que nuestra Web sea accesible y amigable para bus-
cadores tenemos que ser fieles al enlace, es decir, si el enlace nos manda a otra
página de nuestro sitio que habla de tipos de café, el title debe ir relacionado
con ello y no poner por ejemplo “tipos de motos”. Además, el title debe ser des-
criptivo y breve, por ejemplo, para la página que comentábamos de tipos de
café podría ser: “Tipos de café del mundo”.

71
ELEMENTOS HTML

Alt

Esta etiqueta se inserta en los elementos tipo imagen, con el atributo alt.

<img src=”oso.jpg” alt=”Oso polar tumbado” /> 

Las personas con alguna discapacidad concreta y los buscadores, no son capa-
ces de procesar las imágenes. Por eso, cuando, por ejemplo, la araña de Google
llega hasta nuestra Web y se encuentra con una imagen, sabe que es una ima-
gen… pero sin un atributo alt no sabe qué es esa imagen y no la tendría en
cuenta. Tal y como pasa con el title de los enlaces, el texto del atributo alt debe
ser fiel al contenido, descriptivo y breve.

72
 ELEMENTOS HTML

11. COMENTAR CÓDIGO

En ocasiones en las que nuestro código sea muy extenso podemos querer in-
sertar comentarios para cuando tengamos que retocar algo y entender mejor el
código fuente que creamos. Para ello, se utilizan los caracteres <!--y --> para
HTML pero para que te sirva para el futuro vamos a explicar cómo realizar los
comentarios en los lenguajes más comunes que interactúan con HTML.

Lenguaje Comentario

HTML <!--y -->

PHP //

JavaScript //

CSS /* y */

Python #

Ejemplo

HTML 

<!‐‐ Este es un ejemplo de código comentado que no aparecerá en la 
Web ‐‐> 

PHP 

// Este texto no aparecerá. 

JavaScript 

73
ELEMENTOS HTML

// Este texto no aparecerá. 

CSS 

/* Este texto no aparecerá. */ 

Pytho 

# Este texto no aparecerá. 

74
 ELEMENTOS HTML

¿QUÉ HAS APRENDIDO?

Tras esta unidad, habrás adquirido los conocimientos básicos para:

 Conocer los elementos de programación HTML.

 Crear una página Web sencilla desde cero.

 Conseguir que nuestra página Web sea profesional.

75
 ELEMENTOS HTML

AUTOCOMPROBACIÓN

1. ¿Cuál es la posición de la etiqueta head?

a) Debe ir al final del documento antes del cierre del cuerpo </body> e indi-
ca características de la web.
b) Debe ir como la primera etiqueta dentro del <HTML> y en ella definimos
el tipo de documento (DOCTYPE).
c) Debe ir como la primera etiqueta dentro del <HTML> y en ella definimos
las metaetiquetas y estilos.

d) Ninguna de las respuestas anteriores.

2. En el meta dato Robots con un valor “noindex” ¿Qué indica “follow” a los
buscadores?

a) Que no indexen la Web y no sigan los enlaces.

b) Que no indexen la Web y sigan los enlaces.
c) Que indexen la Web y sigan los enlaces.
d) Que indexen la Web pero solo sigan los enlaces de un nivel.

3. El meta dato lang, ¿para qué sirve?

a) Sirve para definir la longitud de la Web.

b) Nos permite indicar el lenguaje de uso de la Web al buscador.
c) Evita que entren en la página Web personas que no hablen el idioma in-
dicado.
d) Ninguna de las respuestas anteriores.

77
ELEMENTOS HTML

4. Para generar un párrafo que nos “auto-inserte” un salto de línea al ter-

minar, ¿qué utilizaremos?

a) Usaremos la etiqueta <p> </p>.

b) Usaremos la etiqueta <br/>.

c) Usaremos la etiqueta <p></p> con un <br/> dentro.

d) Usaremos <parraf></parraf>.

5. La etiqueta <hr>, ¿qué nos permite?

a) Insertar una línea.

b) Insertar dos saltos de línea consecutivos.

c) Poner un texto en negrita.

d) Crear una caja con borde.

6. Cada columna dentro de una tabla, ¿entre qué etiquetas se define?

a) <cols></cols>.

b) <tr></tr>.
c) <ul></ul>.
d) <td></td>.

7. Si en una tabla queremos unir dos columnas de una fila, ¿qué pon-
dremos?

a) <td merge="2">.

b) <td rowspan="2">.

c) <td colspan="2">.
d) <td union=”2”>.

8. ¿Cuál de las siguientes definiciones es la correcta para una imagen?

a) <image source='imagen.jpg' />

b) <img source=”imagen.jpg” />.

c) <img src:”imagen.jpg” />.

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

78
 ELEMENTOS HTML

9. ¿Qué son los enlaces internos?

a) Los que desde dentro de nuestra Web nos envían a otras webs.

b) Los que desde nuestra Web nos envían a otra página de nuestro sitio.

c) Cualquier enlace que este dentro de nuestra Web.

d) Ninguna de las respuestas anteriores.

10. Con el atributo nofollow en un enlace, ¿qué conseguimos?

a) Que nadie vea el enlace, aparece oculto.

b) Que ese enlace esté desactivado y no pueda ser pulsado.

c) Indicamos a los robots que no naveguen por él.

d) Que Google indexe antes nuestra Web.

79
 ELEMENTOS HTML

SOLUCIONARIO

1. c 2. b 3. b 4. a 5. a

6. d 7. c 8. d 9. b 10. c

81
 ELEMENTOS HTML

BIBLIOGRAFÍA

Libro de iniciación al HTML:

 WILLARD, W. HTML: A Beginner's Guide. California: McGraw Hill, 2009.

83