Apuntes HTML

TIC II – 2º bachillerato
HTML
TODAS las páginas que nos encontramos en Internet, las páginas web, están construidas en un
lenguaje denominado lenguaje HTML (HyperText Markup Language)
(Lenguaje de Etiquetas de Hipertexto)
Existen otros lenguajes y tecnologías para la edición de páginas web como Javascript, VBScript,
ASP, etc, etc. Sin embargo, ABSOLUTAMENTE TODOS tienen como base al lenguaje HTML.
Por lo tanto, si quisiéramos dedicarnos al diseño y creación de páginas web, ya sea para crear
nuestra propia página o para trabajar en el sector, es imprescindible un profundo conocimiento de
HTML.
Los identificadores que forman el lenguaje HTML se llaman Etiquetas. La notación de las
etiquetas consiste en los símbolos < > encerrando la instrucción correspondiente.
Existen tres tipos de etiquetas:
Etiquetas llenas
Se forman escribiendo la etiqueta correspondiente seguida del texto al que se quiere aplicar la
instrucción de dicha etiqueta y se termina repitiendo la etiqueta pero con una barra inclinada
inmediatamente antes de la instrucción de la etiqueta.
Ejemplo:
<h1> texto de prueba </h1>
El resultado de esta línea de código es que aparecerá en pantalla:
texto de prueba
(ya veremos más adelante que <h1> se utiliza para darle al texto un tamaño “grande”.
Etiquetas vacías
Las etiquetas vacías se escriben como las llenas, pero no es necesario repetir al final la etiqueta
con la barra inclinada. Esto se debe a que estas etiquetas no producen ningún efecto sobre el texto.
Ejemplo:
<hr>
Esta etiqueta haría aparecer un línea horizontal en la pantalla.
Etiquetas con argumento

Algunas etiquetas se escriben con argumento. Es como pasarle parámetros a la instrucción, y se
llaman Atributos de la etiqueta.
Ejemplo
La etiqueta <a> ... </a> sirve para hacer un link (enlace) a otro documento o a otra página. Se
escribirá:
<a href=http://”www.google.es”> enlace de prueba </a>
Esta es una etiqueta llena donde al atributo href se le asigna el valor que aparece entre comillas:
“http://www.google.es”
El texto al que afecta este elemento es enlace de prueba. Este texto realiza un link a la página
www.google.es
Las etiquetas pueden anidarse unas con otras, teniendo cuidado de poner los cierres en el lugar
adecuado.
Ejemplo:
La etiqueta <b> ... <b> sirve para que aparezca el texto en negrita.
<h1><b> texto de prueba </b></h1>
1
Esta línea hará aparecer el texto “texto de prueba” con el tamaño visto antes y además en negrita.
¡¡Qué lío!! ¿Verdad? Tranquil@. Vamos por partes:

¿Qué programas vamos a utilizar?
Como hasta que nuestra página web no esté terminada (final de mayo) no la vamos a “colgar” en
ningún servidor, ahora mismo no necesitamos ni siquiera conexión a internet.
Necesitamos:
- Un navegador (Internet Explorer. Mozilla Firefox, Chrome...).
- Un procesador de texto (Bloc de notas) o Bluefish (Linux).
¡¡Importante!!
Escribiremos el código HTML en el bloc de notas, lo guardamos con extensión *.htm o
*.html y visualizamos los resultados abriendo ese archivo con Internet Explorer.
Antes de empezar:
Ejercicio 0
Crea en tu escritorio una carpeta llamada HTML. Dentro de esta crea otra llamada Ejercicios.
Empezamos ...
1.- ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML
En toda página web (documento html) existen dos partes claramente diferenciadas:
- la cabecera o head
- el cuerpo o body
En la cabecera se define una serie de datos generales acerca del documento. El más evidente de
estos datos es el título de la página, que aparecerá en la barra de título del navegador.
En el cuerpo se define el contenido de la página en sí. Lo que aparecerá en el área de navegación.
Ejercicio 1
Crea con el bloc de notas en la carpeta Ejercicios un archivo llamado ejercicio1.htm que
contenga exactamente el siguiente código:
<html>
<head>
<title>
Título de la página
</title>
</head>
<body>
Esto es una línea de texto.
</body>
</html>
Por lo tanto, para incluir texto en el área de navegación, basta con incluir dicho texto en el cuerpo
(body) de la página.
Ya has creado tu primera página web. ¡Deja mucho que desear! ¿verdad?
Sigamos...
 Con el tabulador organiza el texto del ejercicio1.

 Familiarízate con el código de ejercicio1 ya que es la estructura básica de cualquier web.
2
Si te fijas, las tildes no aparecen de forma correcta. Para ello debemos indicarle a nuestro
documento HTML, que codifique el texto usando la siguiente etiqueta incluida dentro del head:
<meta charset="utf-8">
Además, no está de más indicar el lenguaje en el que vamos a desarrollar nuestro HTML y la
versión que vamos a utilizar:
<!DOCTYPE html>
<html lang="es-ES">
<head>
<title>Título de la página</title>
</head>
<body>
Esto es una línea de texto.
</body>
</html>
Ejercicio 2 (este archivo no es de código)

1. Abre cualquier página web de internet.
2. Haz clic en Ver/Código fuente para ver el código HTML de la página.
3. Crea un documento de texto en la carpeta Ejercicios con el bloc de notas llamado
ejercicio2 que contenga:
- Dirección URL de la página web elegida.
- Primera línea de código de la cabecera (head).
- Primera línea de código del cuerpo (body).
2.- ESTILOS
Para cambiar el estilo en el que por defecto se visualizan los elementos de un documento HTML
en un navegador web, existen varios métodos:
• Estilo en línea (Inline): utilizando el atributo style.
• Estilo interno (Internal): usando un elemento “style”.
• Estilo externo (External): empleando un archivo CSS (Cascading Style Sheets) externo al
documento HTML.
Para documentos HTML de corta extensión, es preferible utilizar un estilo en línea o interno. Pero
para documentos pesados y extensos, lo más sensato es utilizar la hoja de estilos y así tener por un
lado estructura y contenido y, por otro, todos los estilos.
Para utilizar el estilo externo, debemos crear un archivo con extension .css (por ejemplo,
estilos.css) e insertarlo desde nuestro documento HTML de la siguiente manera:
<!DOCTYPE html>
<html lang="es-ES">
<head>
<title>Ejemplo de estilo externo</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>Esto es un párrafo de color rojo.</p>
</body>
</html>
3
Véase que, en el atributo rel se indica la relación que existe entre el archivo HTML y el archivo
CSS. Por otro lado, por medio del atributo href se ha enlazado el documento HTML con el
archivo “estilos.css”, que es donde está definido el estilo del párrafo:
p{
color:red;
}
3.- CONFIGURACIÓN DEL FONDO
Vamos a ver cómo podemos poner de fondo el color amarillo para la página del ejercicio1.
Necesitamos usar un atributo. Los atributos son parámetros que se añaden a las etiquetas para
configurar su funcionamiento. Veámoslo:
Ejercicio 3
Abre el código de ejercicio1. (Botón derecho/Abrir con/Bloc de notas)
Inserta la línea que permite usar hoja de estilos:
<link rel="stylesheet" href="estilos.css">
Incluye en la hoja de estilos el siguiente contenido:

body{
background-color: yellow;
}
Guarda el nuevo documento con el nombre ejercicio3.htm y estilos.css

Comprueba su funcionamiento con el navegador.
¿Qué hemos hecho?
Asignarle el atributo background-color, que es el encargado de establecer el color, con el valor

yellow a la etiqueta <body>, que es la encargada de definir el área de navegación.
Los colores en HTML
Se pueden establecer los colores de fondo (y de cualquier elemento de una página web, ya veremos
cómo) con su nombre en inglés:
red – pink – black – blue – maroon – white – fuchsia – orange – violet – turquoise – salmon - ...
Pero, casi nunca se emplean este tipo de llamada para los colores. Los colores suelen codificarse
mediante un número hexadecimal. Por ejemplo, en lugar de “silver” podríamos haber escrito su
código, que es “#C0C0C0”. Aquí tienes algunos posibles colores:
Black (negro) #000000 Maroon (marrón) #800000

White (blanco) #FFFFFF Navy (azul marino) #000080
Aqua (azul claro) #00FFFF Olive (verde oliva) #808000
Blue (azul) #0000FF Purple (púrpura) #800080
Fuschia (rosa) #FF00FF Red (rojo) #FF0000
Gray (gris) #808080 Silver (plateado) #C0C0C0
Green (verde) #008000 Silver (plateado oscuro) #008080
Lime (verde claro) #00FF00 Yellow (amarillo) #FFFF00
4
Puedes consultar el número hexadecimal de cualquier color en diversas páginas web, por ejemplo
en https://htmlcolorcodes.com/es/.
Prueba en el ejercicio3.html a utilziar diversos colores HTML.
4.- CONFIGURACIÓN DEL TEXTO

A la hora de configurar el texto, existen muchas posibilidades. Podemos cambiar la tipografía, el
color, el tamaño, la posición, etc.
Color del texto

Para establecer el color del texto en toda la página tendremos que utilizar otro atributo para la
etiqueta body dentro de nuestra hoja de estilos. Se trata del atributo text-color, que recibirá un
valor para determinar el color del texto en toda la página. Los valores que puede recibir son los
colores escritos en inglés, exactamente igual que el atributo ya visto background-color o los
colores en formato hexadecimal.
Ejercicio 4
Crea un documento con este código y guárdalo con el nombre ejercicio4.html
<html>
<head>
<title> Colores </title>
</head>
<body>
Texto azul sobre fondo verde.
</body>
</html>
Añade la hoja de estilos y la propiedad para poner fondo a la página verde y color azul al texto.
Comprueba su funcionamiento.
Observa como dentro de una etiqueta se pueden utilizar mas de un atributo.
El orden en el que se pongan los atributos con sus valores dentro de la etiqueta no importa.
Saltos de línea
Los navegadores no reconocen los saltos de línea (cambios de renglón) a no ser que se lo
indiquemos específicamente. Para ello emplearemos una nueva etiqueta. Se trata de <br>. Esta es
una etiqueta vacía, porque ni recibe ningún atributo ni tiene cierre, es decir, no establece ningún
efecto sobre ningún elemento, sino que ejecuta una acción puntual: pasar al siguiente renglón.
Ejercicio 5
Crea un documento con este código y guárdalo con el nombre ejercicio5.html
<html>
<head>
<title> Organización </title>
</head>
<body>
Esto debería de ser una línea de texto.
Y esto debería ser otra.
</body>
</html>
Comprueba el funcionamiento.
Como podemos ver, dentro del cuerpo <body> hemos escrito el texto en dos renglones y al
ejecutarlo en el navegador aparece en uno.
5
Ejercicio 6
Abre el código del ejercicio5 y modifícalo utilizando la etiqueta <br> en el lugar adecuado para
que el texto aparezca en dos renglones. Guarda el nuevo documento como ejercicio6.htm y
comprueba su funcionamiento.
Ejercicio 7
¿Y si quisiéramos que entre los dos renglones aparecieran tres renglones en blanco?. Modifica el
ejercicio6 para conseguirlo y guarda el resultado como ejercicio7.htm. Pruébalo.
Párrafos
En HTML se nos va a presentar la necesidad (o conveniencia) en muchas ocasiones de dividir el
texto de la página en párrafos. La razón principal es que existen muchas etiquetas que son
aplicables a párrafos completos.
Para ello utilizamos la etiqueta <p> ... </p>
Ejercicio 8
Crea un documento con este código y guárdalo con el nombre ejercicio8.htm. Pruébalo.
<html>
<head>
<title>
Uso de párrafos en HTML
</title>
</head>
<body>
<p>
Con cien cañones por banda, <br>
viento en popa a toda vela, <br>
no corta el mar, si no vuela <br>
un velero bergantín.
</p>
<p>
La luna en el mar riela, <br>
en la lona gime el viento <br>
y alza, en blando movimiento, <br>
olas de plata y azul.
</p>
<p>
Y va el capitán pirata, <br>
cantando alegre en la popa. <br>
Asia a un lado, al otro, Europa <br>
y allá, a su frente, Estambul.
</p>
</body>
</html>
Observa que los párrafos se separan como si se hubieran empleado dos saltos de línea <br> <br>
después del último renglón de cada párrafo. Y no se ha empleado ninguno.
Márgenes
Se pueden controlar los márgenes izquierdo y superior. Para ello utilizamos dos nuevos atributos
en la etiqueta body dentro de nuestra hoja de estilos: margin-left y margin-top. El valor que
pueden tomar es nº de píxeles.
6
Ejercicio 9
Crea un documento con este código y guárdalo con el nombre ejercicio9.htm
<html>
<head>
<title>
Eliminar márgenes
</title>
</head>
<body>
Esto está sin márgenes.
</body>
</html>
La hoja de estilos:
body{
margin-left: 10px;
margin-top: 15px
}
Juega con el número de pixels y comprueba el resultado.
Alineaciones
Podemos darle a nuestros contenidos (texto u otros elementos que ya iremos viendo) una
alineación. Para ello utilizaremos el atributo text-align. Este atributo podrá tomar dos valores:
center o right.
Nota: Es obvio que para la alineación izquierda no es necesario utilizar nada, es la de por defecto.
Existe la posibilidad de asignar un identificador o una clase a un etiqueta en concreto para luego
darle estilos de una manera más cómoda y que no afecte a todo el documento, sólo a esa clase o
identificador.
La clase se signa con la porpiedad class=”nombrequequeramos” dentro de la etiqueta. Por ejemplo
<p class=”parrafo1”> Esto es un parrafo <p>
Las clases pueden ser compartidas por varias etiquetas. Los identificadores, no. Un identificador se
asigna a una etiqueta de la siguiente manera:
<p id=”parrafo1”> Esto es un parrafo <p>
En nuestra hoja de estilos, las llamadas a esas clases o identificadores se realizan así:
.clase{
estilos necesarios
}
#identificador{
estilos necesarios
}
Ejercicio 10
Crea un documento con este código y guárdalo con el nombre ejercicio10.htm
7
<html>
<head>
<title>
Ejemplo de alineaciones
</title>
</head>
<body>
Este texto aparece a la izquierda.
<div class=”div1”>
Este texto aparece centrado.
</div>
<div class=”div2”>
Este texto aparece a la derecha.
</div>
</body>
</html>
Añade la hoja de estilos necesaria y comprueba el funcionamiento.
Efectos simples en el texto

Como efectos simples entendemos entre otros:
negrita – cursiva – subrayado – tachado
Evidentemente, estos efectos los conseguiremos con etiquetas llenas, ya que afectan a una parte
del texto, que será la que irá entre la apertura y cierre de la etiqueta.
<b> ... </b> negrita <u> ... </u> subrayado

<i> ... </i> cursiva <s> ... </s> tachado
Ejercicio 11
Crea un código cuya página muestre:
El título de la página es Efectos simples
Una frase con texto en negrita.
Una frase con el texto en cursiva y subrayado.
Las frases aparecerán en distinto renglón y con dos renglones en blanco entre ellas.
La alineación de la primera es centrada y la de la segunda a la derecha.
Los márgenes de la página serán: Izq:0, Der:0 y Sup: 50 píx.
Guárdalo como ejercicio11.htm y pruébalo.
Para anidar distintas etiquetas, el orden que se utiliza no importa, pero sí hay que tener en cuenta
que primero se cierra el último que se abre, y viceversa, es decir, el orden de apertura es inverso al
de cierre.
Ejemplo: <b><s> Este texto está tachado y en negrita </s></b>
Encabezamientos y pies de página
Para poner encabezados, pies de página, notas, títulos, etc, se suelen utilizar las etiquetas:
<h1> <h2> <h3> <h4> <h5> <h6> con sus cierres respectivos.
Los números que acompañan a la “h” hacen referencia al tamaño del texto.
1 mayor tamaño – 6 menor tamaño
Ejercicio 12
<html>
<head>
<title>
Encabezamientos
8
</title>
</head>
<body>
<h1>
Esto es el titular.
</h1>
Esto es el texto normal.<br>
Como ves, continúa debajo del titular y dejando un espacio mayor.
</body>
</html>
Observa que la etiqueta <h1>, además de crear el texto de gran tamaño, también ha incluido un
salto de línea (doble) sin necesidad de usar ni <br> ni <p>.
¿Te acuerdas de las etiquetas <br> y <p>?. ¿Si?. Vale. Seguimos ...
Ejercicio 13
<html>
<head>
<title>
Encabezamientos
</title>
</head>
<body>
<h1> Esto es texto con h1. </h1>
Esto es el texto normal. Observa que continúa debajo del titular.
</body>
</html>
Las etiquetas <h1> <h2> <h3> <h4> <h5> <h6> NO son las específicas para cambiar el tamaño
del texto, se suelen utilizar para TÍTULOS y SUBTÍTULOS de las páginas... más adelante
veremos cómo cambiar el tamaño de letra independientemente de la etiqueta que utilizemos.
Superíndices y subíndices
Se crean con las etiquetas

<sup> ... </sup>
<sub> ... </sub>
Ejercicio 14
Crea un código cuya página muestre:
El título de la página es: Superíndices y subíndices
Estos dos renglones:
23=8
A1 es mayor que A2
Guárdalo como ejercicio14.htm. Pruébalo.
9
Efectos avanzados en el texto
Hasta ahora hemos visto cómo aplicar algunos efectos sencillos al texto. La verdad es que, con las
combinaciones adecuadas de esos efectos sencillos ya se pueden hacer bastantes cosas.
Pero vamos a sacarle más jugo al texto.
Veamos cómo podemos configurar partes independientes de texto en color, tipografía y tamaño.
Para configurar el texto de toda la página utilizaremos los siguientes estilos en nuestra hoja
estilos.css
color (color). El color por defecto es “negro”.

font-family (tipo de letra). El tipo de letra por defecto es Times New Roman.
font-size (tamaño). En píxeles. (10px, 14px...)
Ejercicio 15
<html>
<head>
<title> Uso de fuentes </title>
</head>
<body>
<p class=”parrafo1”>
El texto de esta página es arial, color azul y tamaño 12px.
</p>
El texto de esta página es lucida console, color rojo y tamaño 14px.
</p>
El texto de esta página es courier, color verde y tamaño 24px.
</p>
</body>
</html>
Los estilos correspondientes (estilos.css):
.parrafo1{
color: blue;
font-size: 12px;
font-family: "Arial";
}
.parrafo2{
color: red;
font-size: 14px;
font-family: "Lucida Console";
}
.parrafo3{
color: green;
font-size: 24px;
font-weight: bold;
font-family: "Courier";
}
10
Ejercicio 16
Crea un documento HTML en el que se visualice el siguiente texto.
¡Algo a tener en cuenta!
Las tipografías (tipos de letra) se almacenan en archivos con extensión *.ttf o *.fon. Estos
archivos deben estar en el disco duro para poder usar esos tipos de letras. Si en nuestra página
utilizamos un tipo de letra algo fuera de lo común, es posible que quede de lujo... en nuestro
ordenador, pero que usuarios que no tengan los archivos correspondientes no la puedan ver.
Hay una forma de prever esto. Se trata de al usar dentro del atributo font-family de nuestro
estilo.css, una lista de varias tipografías separadas por comas.
Veamos un ejemplo:
font-family: Arial, Helvetica, sans-serif;
De este modo, lo que hacemos es proporcionarle varias alternativas al navegador.

Cuando nuestra página se descarga en el ordenador de cualquier usuario (vía internet), su
navegador comprueba la primera tipografía (arial), si no la tiene, lo hace con la segunda, y así
sucesivamente. En caso de que no encuentre ninguna de las tres, utilizará la que tenga por defecto
(normalmente Times New Roman).
La etiqueta span
Hasta ahora todos nuestros párrafos tenían los mismos estilos, es decir, únicamente cambiábamos
de estilo entre párrafos. PERO... ¿puede haber dentro de un párrafo parte del texto con otros
estilos? La respuesta es SI...
Para ello utilizaremos una nueva etiqueta llamada <span></span>. Se trata de un contenedor en
línea que sirve para aplicar estilo al texto.
Por ejemplo, dentro de un párrafo puedo “seleccionar” parte del texto con esta etiqueta y aplicarle
los estilos que quiera:
<p> Esto es un párrafo con <span>parte del texto</span> con estilo diferente</p>
Si te fijas, se ha incluido la etiqueta span que engloba a solo una parte del texto. A esta etiqueta
podemos asignarle una clase o identificador y añadirle los estilos que queramos.
Ejercicio 17
Crea un documento html cuyo código haga que aparezca en el navegador un solo renglón
(cualquier frase más o menos larga) con tipo de letra “Tahoma”, color rosa y tamaño 20px.
¡Ojo!
Una de las palabras (que no sea la última) de la frase debe tener tipo de letra “Batang”,
11
color verde y tamaño 14px.
Además, la última palabra de la frase debe estar en negrita y subrayada.
Guarda el documento como ejercicio17.htm y pruébalo.
Separar bloques de texto (líneas horizontales)
Cuando en una página hay mucho texto, a menudo, es conveniente de cara a la presentación,
separarlo en distintos bloques. Para ello, la solución más simple, aunque muy eficaz, es el uso de
líneas horizontales.
Ejercicio 18
<html>
<head>
<title> Líneas horizontales </title>
</head>
<body>
<p>Esto es una parte del texto.</p>
<hr>
<p>Esto es otra parte.</p>
</body>
</html>
Observa que <hr> además de crear la línea horizontal inserta un salto de línea, sin necesidad de
utilizar la etiqueta <br>.
Además, por defecto, la línea ocupa todo el área de navegación, de izquierda a derecha, con
alineación centrada.
<hr> es una etiqueta SIN cierre, ya que no afecta a ningún elemento. Donde se coloca, ahí aparece
la línea.
Pero si que admite atributos CSS que son los que van a determinar las características de la línea.
Estos son:
width: Establece la anchura de la línea. Los valores pueden ser:
Número de píxeles.
Porcentaje del área de navegación.
height: Establece el grosor de la línea, en pixeles.
background-color: Establece el color.
Ejercicio 19
Crea un código, utilizando (entre otras) la etiqueta <p>...</p>, que haga aparecer en el
navegador dos párrafos, de dos o tres renglones cada uno, separados por una línea horizontal de
70% de ancha, 15 píxeles de grosor, de color #D84FE8.
Guárdalo como ejercicio19.htm. Pruébalo
12
5.- CREACIÓN DE LISTAS
Listas de viñetas
El conjunto de toda la lista se inserta en la etiqueta <ul> ... </ul>.
Cada uno de los elementos de la lista se insertan en la etiqueta <li> ... </li>.
Ejercicio 20
<html>
<head>
<title> Uso de listas </title>
</head>
<body>
<h1><u> Menú de la casa. </u></h1>
<ul>
<li>Sopa castellana</li>
<li>Bacalao al Pil-Pil</li>
<li>Tortilla</li>
<li>Ternera asada</li>
<li>Besugo al horno</li>
</ul>
</body>
</html>
Vamos a crear ahora una sub-lista (nivel 2).

En este restaurante, la especialidad son las tortillas. Las hacen de: patatas, atún, jamón y chorizo.
Ejercicio 21
A partir del ejercicio 21, teclea el siguiente código entre las líneas
<li>Tortilla</li> y <li>Ternera asada</li>
<ul>
<li>De patatas</li>
<li>De atún</li>
<li>De jamón</li>
<li>De chorizo</li>
</ul>
Observa que:
 Para crear una sub-lista basta con insertar un nuevo bloque <ul>...</ul> entre los dos
elementos que correspondan.
 El navegador se encarga de interpretar, muy adecuadamente, el objetivo final de estas
listas.
 Las viñetas son diferentes para las distintas sub-listas (distintos niveles).
 Las etiquetas <ul> y <li> crean los saltos de línea sin usar <br>.
 Cada vez que añadimos una sub-lista a un nivel de jerarquía inferior, los elementos se
desplazan hacia la derecha de forma automática. Este desplazamiento se conoce con el
nombre de indentación. (Este término lo manejaremos con bastante frecuencia).
13
Ejercicio 22
A partir del código de ejercicio21.htm, realiza las modificaciones necesarias para que en el menú
de este restaurante, en la tortilla de jamón, se pueda elegir entre jamón serrano o jamón de york.
Además, el jamón serrano puede ser: normal - superior - pata negra.
Como hemos visto antes, el navegador crea automáticamente las viñetas, cambiando la imagen
para los distintos niveles.
Pero... podemos aplicarle estilos CSS a las listas.
Para poder cambiar la imagen de las viñetas utilizaremos el atributo list-style-type, que puede
tomar los siguientes valores, que se encuentran en esta página. Donde destacan: disc, circle,
square, decimal (para listas numeradas)...
Ejercicio 23
Modifica el código del ejercicio 22 para que TODAS las viñetas del menú de este restaurante
sean un círculo hueco.
Listas numeradas
Dentro de los estilos de listas, tenemos las listas numeradas. Destacan las siguientes categorías:
– Números list-style-type: decimal 1, 2, 3...

– letras may. list-style-type: upper-latin A, B, C...
– Núm romanos list-style-type: lower-roman i, ii, iii, iv, v...
Ejercicio 24
Modifica el código del ejercicio 23 de forma que:
Para el nivel 1: números.
Para el nivel 2: letras mayúsculas.
Para el nivel 3: números romanos en minúscula.
Para el nivel 4: cuadraditos.
El menú de un sitio web se escribe haciendo uso de listas pero en este

caso horizontales, para ello se añade el atributo CSS display: inline a
las etiquetas li. Pruébalo en algún ejercicio.
14
6.- IMÁGENES
Imágenes como fondo de página
Uno de los recursos más empleados en el diseño de páginas web es colocar una imagen de fondo.
No es un objeto colocado en la página, sino una simple decoración del fondo.
Para ello se utiliza el estilo background-image, colocado en la etiqueta body de nuestro CSS.
El valor que se le da a este atributo es el nombre del archivo que contiene la imagen.
background-image: url("imagen.gif");
En principio, el archivo de la imagen debe estar en la misma carpeta que el archivo de la página.
Ya veremos más adelante que no es necesario.
Ejercicio 25
Crea un documento con este código y guárdalo con el nombre ejercicio25.htm. Añade en el css
la imagen paper.gif como fondo de página
<html>
<head><title> Uso de imágenes </title></head>
<body>
<p>He insertado mi primera imagen de fondo</p>
</body>
</html>
Prueba ahora con la imagen rugoso.gif

Observa que la imagen, al ser más pequeña que el área de navegación, se repite como un mosaico
hasta completar toda el área. Esto tiene una ventaja importante: el ser la imagen pequeña implica
que el archivo que la contiene es de poco peso (poco tamaño).
Esta forma de proceder del navegador la podremos cambiar más adelante.
Hay que tener en cuenta que la imagen quedará de fondo, es decir, que todo el texto que pongamos
en la página quedará “montado” sobre ella. Por lo tanto tendremos que buscar un color, tamaño y
tipografía de texto que contraste bien con el fondo elegido.
Imágenes contenidas en la página
Como contenido de la página, una imagen es un objeto más de los que componen la página, esto
significa que podremos actuar sobre ella igual que lo hacemos con las líneas de texto, párrafos, etc.
Para colocar una imagen en nuestra página utilizaremos la etiqueta: <img>.
Esta etiqueta no tiene cierre, dónde se coloca, ahí aparece la imagen.
<img> hace una llamada a al archivo que contiene la imagen mediante el atributo src.
Ejercicio 26
<html>
<head><title>Insertar imágenes</title></head>
<body>
<p>A continuación insertamos una imagen en la página.</p>
<hr>
<img src="cd.gif">
<hr>
<p>Encima de este párrafo hay una imagen.</p>
</body>
</html>
15
Esta no es la única manera de insertar imágenes. Más adelante iremos viendo otras, dada la
importancia de este aspecto. ¿Acaso puede hoy concebirse un sitio web sin un uso adecuado de
imágenes?. ¿No, verdad?.
¡Ojo! Una misma imagen se puede insertar varias veces en una página. Eso es evidente, ¿no?. Pero
hay que tener en cuenta que se hace con el mismo archivo. Es decir, la etiqueta <img> sólo es una
llamada al archivo que contiene la imagen, no es la imagen en sí.
Alineación de una imágen, la etiqueta DIV

Para alinear una imagen en una posición distinta a la izquierda (es obvio), debemos primero
contener la imagen en una etiqueta para ese proposito.
La etiqueta <div></div> (CONTENEDOR O BLOQUE) se utiliza para crear secciones o agrupar
contenidos. Entre otras funciones podemos incluir dentro de la etiqueta DIV una imagen y alinear
el contenido de la etiqueta al centro o a la derecha. A esta etiqueta se le pueden dar propiedades
css como: width, height, margin, background-color...Veámoslo en un ejercicio:
Ejercicio 27
Vamos a crear en el BODY, 3 contenedores DIV para alinear texto e imagen en varias
posiciones.
Crear un código que contenga:
Una etiqueta DIV alineada a la izquierda que contenga:
- Un párrafo de texto.
- En el siguiente renglón, la imagen del CD.
- El color de fondo del div es verde-claro
Una etiqueta DIV alineada al centro que contenga:
- En el siguiente renglón, la imagen del CD.
- El color de fondo del div es azul-claro
Una etiqueta DIV alineada a la derecha que contenga:
- En LA MISMA LÍNEA DEL TEXTO, la imagen del CD.
- El color de fondo del div es amarillo-claro
Guárdalo como ejercicio27.htm.
Utiliza el atributo text-align para los tres DIV creados, para alinear tanto texto como imágenes,
es decir, todo lo que incluya el DIV.
Propiedades y estilos CSS de las imágenes
Border
Uno de los estilos cuando insertamos una imagen, es hacer que salga recuadrada con un borde.
Para ello se utiliza el atributo border. El valor que puede tomar este atributo es el número de
píxeles de grosor del recuadro, seguido del estilo y el color. Ejemplo:
Border: 1px solid red;
Ejercicio 28
Modifica el código del ejercicio 26 de forma que la imagen aparezca en un recuadro de grosor 4,
línea contínua y color verde.
Juega con más propiedades de borde, aquí tienes una página con ejemplos. Y aquí los posibles
estilos del borde.
Alt
16
La etiqueta <img> puede tener otro atributo muy interesante: alt.
El valor que se le puede dar a alt es un texto que no puede exceder de 1024 caracteres y va entre
comillas.
¿Para que sirve?. Supongamos que por cualquier circunstancia, el archivo con la imagen ha
desaparecido. O se le ha cambiado el nombre por error. Es decir, <img> no puede insertar la
imagen en la página. En este caso veremos, en el lugar de la imagen, el texto que contiene el
atributo alt, con un pequeño cuadrito de color blanco con un aspa roja en su interior.
Ejercicio 29
A partir del código del ejercicio 28, haz que cuando la imagen no esté disponible, aparezca el
siguiente mensaje:
Esto es un CD
Comprueba los resultados en el navegador.
Cambia el nombre de la imagen y ponle cddd.gif
Margin
En el último apartado del ejercicio 27 colocamos texto e imagen en la misma línea, ¿lo recuerdas?.
Si no es así, échale un vistazo y recuérdalo.
La imagen aparece a continuación del texto, o viceversa, ¿verdad?.
Pues bien, es posible que deseemos establecer un espaciado mínimo entre el texto y la imagen.
Para ello utilizamos los atributos margin-left, margin-right, margin-top y margin-bottom donde
indicamos el número de píxeles que queremos dejar de margen.
Ejercicio SIN NÚMERO, SÓLO ESTILOS

En el código del ejercicio 27, haz que la imagen se separe del texto 50 píxeles a su izquierda.
Tamaño
Además, podemos conseguir que la imagen tenga unas dimensiones distintas a las originales. Para
ello, utilizamos los atributos:
width: ancho de la imagen en píxeles.

height: altura de la imagen en píxeles.
¡Ojo! Si ponemos sólo uno de los atributos (width o height) con el valor en píxeles que deseemos,
el otro se modifica automáticamente, para mantener el tamaño de la imagen proporcional a la
original.
Por ejemplo, si sólo ponemos que el ancho de la imagen sea de 100 píxeles (width=100), la altura
se modificará automáticamente en proporción.
Si lo que queremos es deformar la imagen ampliando (o disminuyendo) en mayor proporción el
ancho que la altura (o viceversa), entonces tendremos que colocar los dos atributos.
Ejercicio 30
Crea un código que haga que aparezca en el navegador la imagen del CD de tres formas:
1.- Con el tamaño original.
2.- Proporcional a la original pero bastante más grande.
3.- Aumentando el ancho mucho más que el alto.
7.- RUTAS Y SITIOS

17
Hasta ahora, los archivos de las imágenes que hemos utilizado, los hemos tenido almacenados en
la misma carpeta donde se encontraba el archivo html. Pero esto no tiene por qué ser así. De
hecho, lo normal es que los ficheros de imagen se encuentren en una carpeta aparte.
Es lógico: si tenemos archivos HTML, archivos de imagen, de sonido, multimedia, etc, todos ellos
perteneciente a nuestra web, y los almacenamos todos en la misma carpeta, o nos organizamos un
poco o acabaremos con un lío de archivos terrible.
Lo normal es hacerlo de la siguiente manera. Tendremos una carpeta raíz, con todos los archivos
de nuestra web. Y dentro, otras carpetas, una para los archivos con las imágenes, otra para los
archivos de sonido y otra para los multimedia.
Ejercicio
En la carpeta HTML que tienes crea una carpeta con el siguiente nombre:
imagenes
La cuestión ahora es la siguiente:

Si tenemos las imágenes necesarias en una carpeta diferente a la carpeta raíz, cada vez que usemos
la etiqueta <img> para llamar a una imagen, además de especificar el nombre del archivo de la
imagen, también tendremos que indicar la subcarpeta en la que se encuentra. Esto es lo que se
conoce como ruta de un archivo.
La sintaxis de la etiqueta <img> sería:
<img src=imagenes/nombreimagen.jpg>
Ejercicio 31
Crea un código que haga aparecer en el navegador el texto
Esto es una imagen en una carpeta distinta a la actual
seguido de la imagen del archivo cd.gif que hay en la carpeta Imágenes.
¡Ojo! Cuando hablamos de una página web, en realidad nos estamos refiriendo a un sitio web. Un
sitio es un conjunto de páginas relacionadas entre sí que se alojan en un mismo servidor bajo
el mismo nombre de dominio.
Nuestro sitio estará compuesto de una página principal (página de inicio o índice) y un conjunto de
páginas relacionadas entre sí.
A esta página principal la llamaremos index.htm. Es así como nos exigen la mayoría de servidores
que se llame. Cuando un usuario descarga nuestra página, el servidor busca el archivo index.html.
Luego hará clic aquí y allá e irá visualizando el resto de las páginas.
Otros servidores exigen que esta página principal se llame home.html o default.html.
8.- ENLACES
18
Un sitio web es necesario que esté organizado en distintas páginas y que sea navegable, es decir,
que pueda desplazarse entre páginas haciendo clic en los lugares adecuados. A estos lugares se les
conoce con los nombres:
Enlaces – Links – Vínculos – Hiperenlaces – Hipervínculos
Enlaces externos
Un enlace externo es aquel que permite al usuario saltar de la página actual a otra página, bien sea
de nuestro propio sitio o de otro sitio diferente.
Ejercicio 32
Dentro de la carpeta Ejercicios, crea una carpeta llamada Ejercicio32.
Dentro de Ejercicio32 crea tres códigos html:
index.htm – pagina1.htm – pagina2.htm
pagina1.htm debe mostrar en el navegador el texto “Esta es la primera página”.
pagina2.htm debe mostrar en el navegador el texto “Esta es la segunda página”.
El código de index.htm es el siguiente:
<html>
<head><title> Sitio Sencillo </title></head>
<body>
<a href="pagina1.htm" title=”Enlace a página 1”>
Ir a la primera página.
</a>
<br>
<a href="pagina2.htm" title=”Enlace a página 2”>
Ir a la segunda página
</a>
</body>
</html>
Pruébalo.
Estudiemos el código de index.htm:
Los enlaces obedecen a la etiqueta <a> ... </a>. Esta etiqueta recibe el atributo href., que recibe,
como valor, el nombre (o ruta) del archivo que queremos abrir con el enlace. Ademas, el atributo
title establece un texto que se muestra cuando el cursor del ratón se encuentra encima del enlace
(desde el navegador, claro).
El texto que hay entre <a> y </a> es donde el usuario tendrá que hacer clic para activar el enlace.
¡Fácil!, ¿verdad?.
Comprueba que podemos navegar con los botones [ATRÁS] y [ADELANTE] por este mini-sitio
web que hemos creado.
Los enlaces aparecen subrayados y en color azul. Esto es típico de todos los enlaces. El subrayado
y el color podríamos quitarlo desde CSS. Para ello utilizamos las siguintes propiedades:
text-decoration: decoración para el texto. Puede tomar los valores: underline, none,
color: color del texto. (en hexadecimal o el nombre en inglés).
Background-color, para el color de fondo del link.
Ejercicio 33
Haz una copia de la carpeta Ejercicio32 (con todo su contenido) y llámala Ejercicio33.
Modifica los estilos para que los enlaces, tengan color de fondo, color de texto y NO estén
subrayados.
19
Comprueba el funcionamiento navegando por el mini-sitio.
Una cosa más sobre los enlaces externos:
Hemos visto que en la etiqueta <a>...</a>, al atributo href hay que darle como valor exactamente
el nombre del archivo (o su ruta) que queremos ejecutar.
¡Ojo! Si lo que queremos es un enlace a una página de otro sitio web, deberemos especificar la
dirección absoluta, es decir, el nombre completo del dominio que deseamos visitar.
Ejemplo:
Si en nuestra página queremos incluir un enlace al buscador Google, habrá que hacerlo de una
manera similar a la siguiente:
<a href=http://www.google.es>
Ejercicio 34
Crea un código que haga aparecer en el navegador un enlace a la web que tu quieras con el
siguiente texto:
Clic aquí para entrar a .............................
El enlace serán las palabras Clic aquí
Guarda el archivo como ejercicio34.htm y comprueba su funcionamiento.
Enlaces internos
Son aquellos que permiten al usuario desplazarse de un punto a otro dentro de una misma página.
Se suelen utilizar en páginas cuyo contenido es más extenso que el área de navegación.
Con el fin de avanzar y ver más herramientas de HTML para el diseño de nuestra web, estos
enlaces los vamos a dejar de momento.
Enlaces de descarga
En nuestra página podemos poner enlaces que permitan al usuario la descarga de archivos. Esto
presupone, que además de los archivos de nuestro sitio web, tendremos en el servidor los archivos
que el usuario podrá descargarse.
Estos archivos pueden ser, documentos de texto, imágenes, juegos, programas, etc.
En esto hay que tener en cuenta dos cosas:
1. Técnicamente, los archivos no deben tener mucho peso (mucho tamaño). Hay páginas
en internet que tienen archivos para descargar de tamaños tan exagerados (150, 200
Mb) que es mejor ni intentar descargarlos. En cualquier caso, es recomendable el uso
de técnicas como la compresión de archivos.
2. Jurídicamente, es evidente que no debemos colocar en nuestra página enlaces para la

descarga de software comercial, música, cine, etc. El hecho de que nosotros hayamos
comprado una licencia, un disco, etc, no nos da derecho a regalarla. Hay que tener en
cuenta que a una página de internet, tiene acceso todo el mundo (nunca mejor dicho).
Dicho esto, vamos a ver cómo se crean estos enlaces de descarga:
20
Ejercicio 35
Vamos a preparar el montaje de este ejercicio:
Crea una carpeta (en Ejercicios) llamada Ejercicio35.
Crea los dos siguientes archivos:
ejercicio35.html Es el código HTML de nuestra página, es decir, nuestra página.
fichero.rar Es el archivo que el usuario podrá descargarse de nuestra página.

(Este archivo pídeselo al profesor).
¿Entendido hasta aquí?. Si no lo entiendes pregunta, es fundamental.
Lo único que nos queda por hacer es crear el código del archivo ejercicio35.html. Este código
debe, simplemente, mostrar en el navegador un enlace de descarga del tipo:
Clic aquí para descargar el archivo fichero.rar
¿Cómo se hace?
EXACTAMENTE IGUAL que los enlaces externos ya vistos. Recuerda:
<a href=fichero.rar>
Clic aquí para descargar el archivo fichero.rar
</a>
La única diferencia es que en los enlaces externos, el archivo al que se llama SIEMPRE tiene
extensión htm (o html). Evidente, ¿no?. Y en los enlaces de descarga puede tener cualquier
extensión, ya que puede ser un archivo de cualquier tipo.
Al igual que en los externos, dependiendo de dónde esté el archivo, puede que haya que poner su
ruta completa. En este caso no porque lo tenemos en la misma carpeta que la página (Servidor).
Enlaces sobre imágenes
Hasta ahora hemos creado enlaces sobre una palabra o frase. Al hacer clic sobre esa palabra o frase
se activa el enlace correspondiente y se abre la nueva página de destino.
Recuerda:
<a href=pagina_destino.html>
Frase o palabra del enlace.
</a>
Para que el enlace sea sobre una imagen, basta con insertar la imagen en el cuerpo del enlace:
<a href=pagina_destino.html>
<img src=imagen_enlace.gif>
</a>
Ejercicio 36
Realiza un ejercicio similar al 32, llamando a la carpeta Ejercicio36.
Los archivos pagina1.htm y pagina2.htm pueden ser los mismos que en el ejercicio 32.
Los enlaces del nuevo archivo index.htm se deben ejecutar sobre las imágenes de los archivos
imagen1.gif e imagen2.gif que tienes en la carpeta Imágenes.
21
Haz que las dos imágenes aparezcan en el mismo renglón.
Observa que para que el archivo index.htm localice a los archivos imagen1.gif e imagen2.gif, al
no estar en la misma carpeta que ellos (ni tampoco en la misma carpeta que la carpeta que los
contiene), hay que especificarle la ruta completa y exacta de la carpeta que los contiene (en este
caso la carpeta Imágenes).
¿Recuerdas los atributos de la etiqueta <img>: alt, src?. ¿Si?. Vale.
Pues atent@ al siguiente ejercicio:
Ejercicio 37
Haz una copia de la carpeta Ejercicio36 y llámala Ejercicio37.
Modifica el archivo index.htm de tal forma que:
Las dos imágenes deben aparecer centradas en la página y con una separación de 100 píx.
Las imágenes deben aparecer sin el borde que tienen.
Al pasar el puntero del ratón sobre ellas, deben aparecer los mensajes:
Ir a página 1.
Ir a página 2.
Esta técnica de usar imágenes como enlaces se emplea con mucha asiduidad en los famosos
banners publicitarios. Un banners es una imagen con el logo del anunciante que se inserta en
nuestra página como un enlace a la página del anunciante. ¡¡Seguro que los has visto!!.
-------------------------------------
22
9.- TABLAS
Hasta ahora hemos visto cómo incluir en una página web textos, imágenes, enlaces, saltos de línea,
etc. Vamos a ver ahora cómo organizar todos estos elementos de una forma más precisa.
En HTML básico lo que se hace es dividir la página en una “parrilla”, llamada tabla, y colocar los
objetos (textos, imágenes, etc) dentro de las celdas de dicha tabla.
Con esto, podremos lograr efectos muy interesantes.
Creación de tablas
Para crear la primera tabla, hagámoslo con el siguiente ejercicio:
Ejercicio 38
Crea un documento con este código y guárdalo con el nombre ejercicio38.html. Pruébalo.
<html>
<head>
<title>Uso de tablas</title>
</head>
<body>
<table>
<tr>
<td> Día 1 </td>
<td> Día 2 </td>
<td> Día 3 </td>
</tr>
<tr>
<td> Yogurt </td>
<td> Café </td>
<td> Tostada </td>
</tr>
<tr>
<td> Carne </td>
<td> Pescado </td>
<td> Pasta </td>
</tr>
<tr>
<td> Verdura </td>
<td> Fruta </td>
<td> Pescado </td>
</tr>
</table>
</body>
</html>
Se ha creado una tabla de 4 filas y 3 columnas. Analicemos y estudiemos este código:

Una tabla siempre se define entre la etiqueta <table> ... </table>.
Las tablas se definen fila a fila. Cada fila se define con la etiqueta <tr> ... </tr>.
Cada una de las celdas de esa fila se definen con la etiqueta <td> ... </td>
A la etiqueta table, podemos ponerle los siguientes atributos CSS:
width: Establece la anchura total que tendrá la tabla en píxeles o en %.

¡Ojo!
Dependiendo de la resolución a la que esté el monitor del usuario (normalmente 800x600
píxeles o 1024x768 píxeles) puede que nuestra página no ocupe todo el área de navegación,
ocupe justo el área de navegación u ocupe más del área de navegación. Preferiblemente
vamos a pensar en una resolución de 800x600 y añadiremos un fondo de página adecuado
por si acaso el usuario tiene mayor resolución (algo habitual por otra parte).
23
La etiqueta <td> ... </td>, puede recibir varios atributos CSS, entre ellos:
width: Establece el ancho de la celda en píxeles.
height: Establece la altura de la celda en píxeles.
border: Establece el grueso del borde de la tabla en píxeles. Si le asignamos el valor

de 0 píxeles, los bordes de la tabla serán invisibles.
Ojo, por defecto los bordes no se colapsan, para ello, debes poner a la
etiqueta table la propiedad CSS border-collapse: collapse;
¡Ojo! El ancho de una celda también se puede establecer como un porcentaje respecto del ancho
total de la tabla.
Ejercicio
Modifica el Css para que la tabla del ejercicio anterior tenga un tamaño del 50% de la página. La
altura de cada fila sea de 40 px y el borde de la tabla con estilo contínuo, 4 px de grosor y color
marrón. El texto de toda la tabla debe estar centrado.
¡Importante!
Al definir cada una de las celdas, entre <td> y </td> se incluye el contenido (texto, imagen, etc)
que queremos que aparezca en la celda.
HTML no permite crear celdas vacías en una tabla. Cuando queremos que una celda aparezca sin
contenido, debemos insertar dentro de ella un espacio en blanco:
La secuencia especial es un espacio en blanco.
Ejercicio 39
Modifica el código del ejercicio38 para que la 1ª fila tenga dos celdas y la 3ª sólo una.
Ejercicio 40
Crea un documento HTML con el horario de vuestro curso. Guárdalo con el nombre
ejercicio40.htm.
Pruébalo.
Colocación de contenidos
Como ya hemos visto, para colocar contenido (texto, imágenes, etc) dentro de una celda, hay que
colocarlo entre <td> y </td>.
Observa que por defecto, la alineación del texto dentro de cada celda es:
Alineación horizontal: Izquierda.
Alineación vertical: Centrada.
24
Esto lo podemos cambiar insertando en la etiqueta <td> ... </td> los atributos CSS:
text-align Para la alineación horizontal. Sus valores son: left – center – right
vertical-align Para la alineación vertical. Sus valores son: top – middle – bottom
Estos atributos con sus valores también se pueden usar en la etiqueta <tr> ... </tr>, para cambiar
la alineación de todas las celdas de una misma fila.
Ejercicio 41
Crea el archivo ejercicio41.html, para que el navegador muestre lo mismo que la imagen de
abajo.
Observa que cuando alineamos el texto arriba, abajo, a la izquierda o a la derecha de la celda, este
queda pegado totalmente al borde de la misma. Esto se puede modificar.
Supongamos que queremos que los contenidos de las celdas estén alineados a la izquierda pero no
pegados al borde de la tabla, queremos que estén a una distancia de 15 píxeles.
Para ello utilizamos la etiqueta CSS padding.-left, padding-right, padding-top o padding-bottom.

Esta propiedad establece el espacio entre el texto y el borde del elemento. A diferencia del margin,
que establece el margen a partir del borde.
Ejercicio 42
Modifica el código del ejercicio 41 para que los textos estén separados del borde 20 píxeles en el
inferior, 30 a derecha e izquierda y 40 superior.
Guárdalo como ejercicio42.html y pruébalo.
Combinación de celdas
Dentro de las celdas de una tabla, hasta ahora, sólo hemos insertado texto. Pero iremos viendo que
podemos insertar cualquier objeto que se pueda insertar en una página web (texto, imágenes,
enlaces, formularios, etc).
Combinar celdas es convertir dos o más celdas en una sola.

25
Esto, a menudo es necesario.
Para combinar celdas se utiliza la etiqueta colspan dentro de un <td> en concreto. La etiqueta
colspan proporciona el número de celdas que ocupa esa misma en la que estamos definiendo el
atributo. Por ejemplo, el siguiente texto HTML, nos dice que la celda ocupa 3 celdas.
<td colspan=”3”></td>
En el siguiente ejercicio crearemos una tabla con 3 filas y 3 columnas (9 celdas).
Ejercicio 43
Crea un documento con este código y guárdalo con el nombre ejercicio43.html. Pruébalo.
<html>
<head><title>Uso de tablas</title></head>
<body>
<table>
<tr>
<td>&nbsp:</td>
<td> </td>
<td>Un texto.</td>
</tr>
<tr>
<td>Otro texto</td>
<td>Otro texto</td>
<td> </td>
</tr>
<tr>
<td>Otro texto</td>
<td>Otro texto</td>
<td> </td>
</tr>
</table></body></html>
Todas las celdas van a tener 100 píxeles de ancho y otros 100 de alto.
En la última celda de la primera fila habrá un texto que cabe perfectamente.
Y habrá otro texto en las dos primeras celdas de cada una de las otras dos filas.
En el resto de las celdas, de momento, no vamos a colocar nada (&nbsp).
Ahora, fusiona la tabla para que en la primera fila solo aparezca una celda con el texto, en la
segunda fila, aparezcan dos celdas, la segunda ocupa el tamaño de 2 celdas. La tercera fila, igual
pero la primera celda ocupa el tamaño de 2. A continuación tienes el esquema.
Un texto
Otro texto Otro texto
Otro texto Otro texto
Al igual que podemos combinar celdas de columnas contiguas, también podemos combinar celdas
de filas contiguas.
En el siguiente ejercicio, vamos a combinar la tercera celda de la segunda y tercera fila.
Para ello utilizamos el atributo rowspan en la etiqueta <td>...</td> de la celda deseada. En este
caso sería en la tercera celda de la segunda fila. No olvides eliminar la tercera celda de la tercera
fila.
Ejercicio 44
A partir del ejercicio 43, crea la siguiente tabla:
26
a
Un texto
Un texto e
i Un texto
¡Importante!
En ningún caso es aconsejable que en la misma celda (o combinación de ellas) haya dos o más
elementos. Es decir, si en una celda tenemos una imagen, y queremos un texto asociado a ella,
deberemos poner ese texto en otra celda contigua a la anterior, nunca en la misma.
Color de fondo de tabla
Todas las tablas que hemos usado hasta ahora tienen un color de fondo blanco, ¿verdad?.
PUES NO. Son transparentes y se ve el blanco de fondo de la página.
El atributo que utilizaremos para cambiar el color de fondo de la tabla es el ya estudiado
background-color.
Lo mismo que lo utilizábamos en la etiqueta <body> para el color de fondo de la página, lo
podemos utilizar en las etiquetas:
<table> para el color de fondo de toda la tabla.
<tr> para el color de fondo de una fila.
<td> para el color de fondo de una celda.
Ejercicio 45
En el código del ejercicio 41, haz que la tabla presente los siguientes colores de fondo:
Primera, segunda y cuarta fila: Azul
En la tercera fila:
1ª celda: rojo
2ª y 3ª celda: verde
Además, el fondo de la página será amarillo.
Imágenes como fondo de tabla
¿Recuerdas el atributo background-image que insertábamos en la etiqueta <body>?.
Pues igual que establecemos una imagen como fondo de la página, podemos hacerlo como fondo
de tabla, de fila y de celda. Insertando background-image en las etiquetas <table>, <tr> y <td>
respectivamente.
¡Ojo!
Ejercicio 46
A partir del código del ejercicio 45, haz que el navegador muestre la tabla con las siguientes
modificaciones:
- La tabla tendrá como fondo la imagen del archivo rugoso.gif. Excepto la primera celda
de la primera fila que tendrá como fondo la imagen del archivo paper.gif.
- Tendrá un borde de 20 píxeles de grosor y de color violeta.
¡¡Importantísimo!!  Verdadera razón de ser de las tablas.

Una tabla NO es un objeto más en una página web, sino una parrilla para permitirnos colocar los
demás objetos en el lugar deseado. Por lo tanto:
“No diseñaremos la página para que quede bien la tabla,
sino la tabla para que quede bien la página”.
27
Ejercicio final 1
Vamos a crear el sitio web de un gimnasio.
El sitio web tendrá 5 páginas:

- Página de Inicio: dando la bienvenida y con los datos de contacto. Habrá un menú con
actividades y tarifas. También hay un enlace a los beneficios del yoga, a esta web:
https://www.escueladeyoga.com/beneficios-yoga/
- Página actividades
28

Apuntes HTML

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Apuntes HTML

Cargado por

Copyright:

Formatos disponibles

TIC II – 2º bachillerato

Existen tres tipos de etiquetas:

Etiquetas con argumento

¡¡Qué lío!! ¿Verdad? Tranquil@. Vamos por partes:

 Con el tabulador organiza el texto del ejercicio1.

Ejercicio 2 (este archivo no es de código)

3.- CONFIGURACIÓN DEL FONDO

Incluye en la hoja de estilos el siguiente contenido:

Guarda el nuevo documento con el nombre ejercicio3.htm y estilos.css

¿Qué hemos hecho?

Asignarle el atributo background-color, que es el encargado de establecer el color, con el valor

Los colores en HTML

Black (negro) #000000 Maroon (marrón) #800000

Prueba en el ejercicio3.html a utilziar diversos colores HTML.

4.- CONFIGURACIÓN DEL TEXTO

Color del texto

Juega con el número de pixels y comprueba el resultado.

La clase se signa con la porpiedad class=”nombrequequeramos” dentro de la etiqueta. Por ejemplo

<p class=”parrafo1”> Esto es un parrafo <p>

<p id=”parrafo1”> Esto es un parrafo <p>

Efectos simples en el texto

<b> ... </b> negrita <u> ... </u> subrayado

Encabezamientos y pies de página

Se crean con las etiquetas

color (color). El color por defecto es “negro”.

Los estilos correspondientes (estilos.css):

¡Algo a tener en cuenta!

De este modo, lo que hacemos es proporcionarle varias alternativas al navegador.

Guarda el documento como ejercicio17.htm y pruébalo.

Separar bloques de texto (líneas horizontales)

height: Establece el grosor de la línea, en pixeles.

background-color: Establece el color.

Guárdalo como ejercicio19.htm. Pruébalo

El conjunto de toda la lista se inserta en la etiqueta <ul> ... </ul>.

Vamos a crear ahora una sub-lista (nivel 2).

Pero... podemos aplicarle estilos CSS a las listas.

– Números list-style-type: decimal 1, 2, 3...

El menú de un sitio web se escribe haciendo uso de listas pero en este

Imágenes como fondo de página

Prueba ahora con la imagen rugoso.gif

Imágenes contenidas en la página

Alineación de una imágen, la etiqueta DIV

Propiedades y estilos CSS de las imágenes

Ejercicio SIN NÚMERO, SÓLO ESTILOS

width: ancho de la imagen en píxeles.

7.- RUTAS Y SITIOS

La cuestión ahora es la siguiente:

La sintaxis de la etiqueta <img> sería:

Estudiemos el código de index.htm:

Una cosa más sobre los enlaces externos:

2. Jurídicamente, es evidente que no debemos colocar en nuestra página enlaces para la

Dicho esto, vamos a ver cómo se crean estos enlaces de descarga:

Crea los dos siguientes archivos:

ejercicio35.html Es el código HTML de nuestra página, es decir, nuestra página.

fichero.rar Es el archivo que el usuario podrá descargarse de nuestra página.

¿Entendido hasta aquí?. Si no lo entiendes pregunta, es fundamental.

EXACTAMENTE IGUAL que los enlaces externos ya vistos. Recuerda:

Enlaces sobre imágenes

¿Recuerdas los atributos de la etiqueta <img>: alt, src?. ¿Si?. Vale.

Pues atent@ al siguiente ejercicio:

Se ha creado una tabla de 4 filas y 3 columnas. Analicemos y estudiemos este código:

A la etiqueta table, podemos ponerle los siguientes atributos CSS:

width: Establece la anchura total que tendrá la tabla en píxeles o en %.