Introduccin histrica

Tim Berners Lee desarrolla HTMLa principios de los aos 90.

En 1995 se publica el primer estndar oficial llamado HTML 2.0

En 1997 se publica la versin HTML 3.2 por la organizacin W3C (World Wide Web
Consortium), que y es el organismo oficial encargado de publicar los estndares.

En 1998 aparece la versin HTML 4.0 que incluye soporte para lenguajes script, hojas de estilo
css, facilidades de impresin etc

En 1999 aparece HTML 4.01 la ltima especificacin oficial hasta el moento.

En 2000 el W3C publica XHTML 1.0 que es una reformulacin de HTML 4.0 basada en XML.
XHTML 1.0 est aceptado y es ampliamente utilizado.

En 2003 aparecen los famosos XFORMS, los formularios de XHTML, que mejoran
considerablemente a los anteriores gracias a que separan el contenido de la presentacin.

En 2004 Apple, Mozilla y Opera crean un grupo de trabajo llamado WHATWG para seguir
desarrollando HTML

En 20008 W3C y WHATWG, unidos, publican el primer borrador de HTML5

Resumen:
HTML 4.01 y XHTML 1.0 son las especificaciones ms utilizadas.
HTML 5 se va incorporando progresivamente.

Introduccin a HTML
Cuando visitamos una pgina web vemos textos, imgenes, colores de fondo, en algunos casos
elementos que se desplazan por la pantalla, en fin, todo el conjunto de elementos que hacen de dicha
pgina un espacio multimedia e interactivo. Aunque podramos pensar que todos esos elementos
estn incluidos en la pgina, no es as. Realmente, el nico de todos ellos que pertenece a la propia
pgina es el texto. Y, entonces, por qu se ve lo que aparece en la pgina? La respuesta es que
una pgina web no es ms que un documento de texto acompaado de una coleccin
de etiquetas que sirven para que el navegador:

interprete de qu forma tiene que presentar el texto.

sepa de dnde tiene que obtener las imgenes y sonidos y cmo mostrarlos.

distribuya todos los contenidos de una forma determinada dentro de la pantalla.

El lenguaje que contiene dichas etiquetas se denomina HTML. Las siglas HTML se corresponden
con la definicin "Lenguaje para marcado de hipertexto" (Hyper-text Markup Language). Este lenguaje
se utiliza para estructurar documentos de texto que puedan ser interpretados por navegadores y
distribuidos a travs de Internet.
Los documentos escritos en HTML estn formados por texto plano. De esta manera, un
documento HTML puede ser visualizado con un editor de textos convencional. Nosotros utilizaremos
el editor Notepad++.

Formato de las etiquetas HTML

Las etiquetas HTML se escriben encerradas entre ngulos (< y >). Normalmente se utilizan dos
etiquetas: una de inicio y otra de fin. La nica diferencia entre ambas es que la de cierre lleva una
barra inclinada (/) antes del cdigo. De esta manera, el texto que aparezca entre ambas etiquetas
presentar el efecto que dichas etiquetas indiquen. Existe una etiqueta para cada tipo de efecto.
Algunos ejemplos de efectos son los siguientes:
<b>Este texto aparecer en negrita en la pantalla.</b>
<i>Este texto aparecer en cursiva en la pantalla.</i>
<font family="Arial">Este texto aparecer en con letra Arial en la pantalla.</font>

En los siguientes apartados iremos estudiando las distintas etiquetas. Se incluye un resumen de
las ms importantes en el enlace Gua de referencia rpida de HTML.

Etiquetas dentro de etiquetas

Se pueden abrir etiquetas dentro de otras etiquetas. Sin embargo, hay que tener en cuenta que
se deben cerrar en orden inverso al orden de apertura. Para facilitar esta tarea, se suelen dejar
sangras cada vez que se inicia una nueva apertura. Por ejemplo:
<etiqueta1>
Este nivel est afectado por la etiqueta 1
<etiqueta2>
Este nivel est afectado por la etiqueta 1 y 2
<etiqueta3>
Este nivel est afectado por la etiqueta 1, 2 y 3
</etiqueta3>
Este nivel est afectado por la etiqueta 1 y 2
</etiqueta2>
Este nivel est afectado por la etiqueta 1
</etiqueta1>

Atributos de las etiquetas

La mayora de las etiquetas admiten atributos. Los atributos ofrecen distintos efectos para las
etiquetas sobre las que se aplican. El formato general de las etiquetas con atributos es el siguiente:
<etiqueta1 atributo1="valor1" atributo2="valor2">
Texto afectado por la etiqueta1
</etiqueta1>

Cada etiqueta tiene sus propios atributos disponibles, que se pueden consultar en la Gua de
referencia rpida de HTML. Los valores de los atributos pueden tomar unos valores determinados
(numricos, texto, valores hexadecimales,...), pero siempre irn entre comillas.

Organizacin de un sitio web

Un sitio web no slo est comprendido por una nica pgina, sino que suele estar compuesto por
varias pginas relacionadas entre s, adems de contar con otros contenidos (imgenes, vdeos,
sonidos,...). Para facilitar la organizacin de dichos contenidos, se suele emplear una estructura de
carpetas como la siguiente:

Todas las prcticas y trabajos del curso debern ajustarse al esquema propuesto.

Etiquetas bsicas
En este punto sabemos que una pgina web est formada exclusivamente por texto: parte de
ese texto aparecer en pantalla (son los contenidos que se quieren mostrar) y el resto estar
formado por etiquetas que no aparecern en pantalla, pero que tendrn algn efecto sobre la
pgina(pondrn parte del texto en negrita, estructurarn los contenidos en forma de tablas o listas,
cambiarn el tipo de letra o el tamao del texto, etc.).
Las etiquetas, as como sus atributos, se suelen indicar en minscula.
Es importante saber que las pginas web estn estructuradas: es decir, que deben seguir una
serie de reglas para que sean interpretadas correctamente por los navegadores web. A continuacin
se explica dicha estructura genrica.

Esquema general de una pgina web

El esquema general de una pgina web tiene el siguiente aspecto:
DECLARACIN DE TIPO DE DOCUMENTO
<html>
<head>
<title>Ttulo de la pgina </title>
Elementos opcionales de la cabecera
</head>
<body>
Contenido del cuerpo
</body>
</html>

Toda la pgina web debe estar almacenada entre las etiquetas <html> </html>, con la excepcin
de la declaracin de tipo de documento. Como puede verse en la figura, hay tres partes diferenciadas
en toda pgina web:

Declaracin de tipo de documento. Es una lnea de texto que especifica el tipo de

documento que hay en el archivo. Se explica en el siguiente apartado. Es la nica parte de la
pgina web que no est almacenada dentro de las etiquetas <html> </html>.

Cabecera. Est delimitada por las etiquetas <head> </head>. En la cabecera se incluye
aquella informacin de la pgina que no va a aparecer en pantalla (salvo el ttulo de la
pgina, que aparece en la barra superior del navegador web). Sirve para indicar el nombre del
autor, palabras clave, programas script que se ejecutarn, etc.

Cuerpo. Est delimitado por las etiquetas <body> </body>. En el cuerpo de la pgina se
incluye aquella informacin que se va a representar en pantalla. En el cuerpo es donde se
almacenan los contenidos de la pgina: texto, imgenes, tablas, listas,...

La declaracin del tipo de documento

El W3C es un organismo que se encarga de fijar las normas que deben seguir los documentos
escritos en HTML. Segn este organismo, todo documento HTML deber contener al principio del
mismo una lnea que indique qu tipo de documento es. Es lo que se llama la declaracin del tipo de
documento.

Al indicar la DTD (Document Type Definition) al principio del documento le estamos diciendo al
navegador cmo interpretar adecuadamente el cdigo. Los tipos de documento vlidos para HTML y
sus declaraciones correspondientes se muestran a continuacin:

Documento HTML estricto. Los documentos de este tipo se ajustan a la especificacin ms

rgida del W3C. Significa que no se pueden usar determinadas etiquetas y atributos HTML
que estn en fase de quedarse obsoletos. HTM 4.01 recomienda separar por completo el
contenido del formato. Si cumplimos escrupulosamente con esta recomendacin, almacenando
toda la informacin sobre el formato en una hoja de estilos CSS, entonces podemos utilizar la
declaracin estricta. Estos documentos debern incorporar el siguiente cdigo al principio:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Documento HTML transicional. Los documentos de este tipo se ajustan a la especificacin

ms permisiva del W3C. Significa que se pueden usar determinadas etiquetas y atributos
HTML que estn en fase de quedarse obsoletos. Si queremos combinar contenido e
informacin de formato en nuestro documento HTML, entonces debemos utilizar la declaracin
de transicin. Estos documentos debern incorporar el siguiente cdigo al principio:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Documento HTML con marcos. Los documentos de este tipo son los que llevan
incorporados marcos (etiquetas <frame> y <frameset>). Estos documentos debern incorporar
el siguiente cdigo al principio:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

En HTML 5. La declaracin es ms sencilla:

<!DOCTYPE html >

Copia el cdigo de abajo en un archivo de texto (con el bloc de notas por ejemplo) con el
nombre Ejemplo_1.html y luego observa el resultado en el navegador.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Mi primer pgina </title>
</head>
<body>
<h1> Hola Mundo </h1>
</body>
</html>

La cabecera
La cabecera almacena informacin sobre el ttulo de la pgina y otros datos importantes, entre
ellos la codificacin de caracteres que emplea la pgina.

Codificacin de caracteres
Todo documento deber incorporar informacin sobre el tipo de codificacin de caracteres
que almacena. La codificacin de caracteres depende del editor utilizado (en el Notepad++ se puede
elegir en el men Codificacin). La eleccin de una codificacin de caracteres u otra tendr como

consecuencia que se puedan escribir los caracteres espaoles (, , , ,...) directamente en el

contenido de la pgina o que se deban emplear caracteres especiales.
La codificacin de caracteres se debe elegir en el editor de pginas web que se utilice (en
nuestro caso, Notepad++) y reflejarlo en el cdigo introduciendo una etiqueta <meta> en la cabecera
de la pgina, de la siguiente manera:
<meta http-equiv="Content-Type" content="text/html; charset=codificacion">

El parmetro codificacion deber ser igual a la codificacin que se haya elegido en el editor. Las
ms usuales para poder escribir los caracteres espaoles son utf-8 (recomendada por ser compatible
a nivel mundial) y iso-8859-1 (compatible a nivel de Europa occidental).
As, para indicar que una pgina est codificada en utf-8 escribiramos:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

http-equiv: indica una propiedad al navegador como si el propio servidor http (Web) hubiera
generado dicha cabecera, de ah viene el nombre "http-equivalent".

La etiqueta <title> y las etiquetas <meta>

La etiqueta <title> sirve para introducir el ttulo de la pgina. El ttulo de la pgina es el que
aparece en la barra superior de la ventana del navegador.
<title>Ttulo de la pgina</title>

La etiqueta <meta> se utiliza para varias funciones. Adems, se pueden poner varias etiquetas
meta en la misma pgina:
<meta
<meta
<meta
<meta
<meta

name="author" content="nombre del autor de la pgina">

name="copyright" content="nombre del propietario de la pgina">
name="description" content="descripcin del contenido de la pgina">
name="keywords" content="Ciclos, Formativos, Informtica, FP, DAW">
name="date" content="12 de Septiembre de 2013 - Fecha de creacin de la pgina">

El texto indicado en "description" es utilizado por los motores de bsqueda para indexar la
pgina. Es el texto que suele aparecer como resultado de la bsqueda realizada por un usuario.
La lista de palabras indicadas en "keywords" son por las que queremos que nuestra pgina sea
localizable. La inclusin de palabras no relacionadas con nuestro sitio con el fin de mejorar el
posicionamiento web, se considera spam y puede ser penalizado por los motores de bsqueda.

El cuerpo
En el cuerpo de la pgina aparece la informacin que se ver en la pantalla del navegador.
En el cuerpo podrn aparecer todas aquellas etiquetas que estudiaremos en las prximas secciones
del tema.
<body>
Atributos

id: sirve para asignar un nombre nico a un elemento. Se utiliza para identificar elementos en
hojas de estilo y en scripts.

class: sirve para asignar un nombre de clase para varios elementos. Es posible usar el mismo
nombre de clase para varios elementos. Se usa para mejorar el rendimiento de las hojas de
estilo.

title: sirve para agregar un comentario asociado a un eemento. Los navegadores muestran
este comentario en una ventana emergente cuando el ratn se sita sobre el elemento.

style: sirve para aplicar informacin de estilo a un elemento.

Atributos desaprobados: background, text, link, alink, vlink, bgcolor.

Estos atributos no deben usarse, ya que la forma correcta es a travs de hojas de estilo o con
estilos en lnea como en el siguiente ejemplo.
<body style="background-color:blue" >
........
<body>

Observa que produce el mismo efecto el cdigo de ms abajo que si sustituimos la lnea
de body por la siguiente:
<body bgcolor="blue">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Mi primer pgina </title>
</head>
<body style="background-color:blue">
<h1> Hola Mundo </h1>
</body>
</html>

Gurdalos con los nombres Ejemplo_2.html y Ejemplo_3.html body por la siguiente:

Eventos Intrnsecos
Hay una serie de atributos que corresponden a eventos. Por ejemplo cuando se carga una
pgina, cuando se hace click sobre un elemento, etc...
Para utilizar estos eventos intrnsecos hay que conocer un lenguaje script, que sirva par ejecutar
una determinada accin cuando se produzca un evento
Ejemplo, modifica la etiqueta body del ejemplo anterior con el cdigo de ms abajo y observa el
resultado. Slvalo como Ejemplo_4.html. Asegrate de utilizar el carcter comilla simple
<body onload="alert('Carga completa');">

Comentarios
Los comentarios se introducen entre los smbolos <!-- y -->. Los comentarios no se pueden
anidar.
<!-- Todo esto, aunque ocupe varias lneas, no aparece en pantalla ni afecta a la pgina web. Se
suelen utilizar para realizar anotaciones tiles para el administrador, como fechas,
explicaciones, etc. -->

Caracteres especiales
Como hemos visto, las etiquetas HTML se incluyen entre los signos < y >. Adems, los atributos
van entre comillas (" "). De esta manera, si introducimos alguno de esos caracteres en el cdigo
HTML, estaremos indicando al navegador que lo que viene a continuacin es una etiqueta o un
atributo. Estos caracteres reciben el nombre de caracteres especiales.
As pues, qu haremos cuando queramos insertar en nuestra pgina web un carcter especial?
La respuesta es que deberemos escribir un cdigo alternativo. En la siguiente tabla se incluyen los
cdigos para los caracteres especiales ms comunes:
Smbolo Cdigo

&copy;

&reg;
<
&lt;
>
&gt;
&
&amp;
Espacio &nbsp;
"
&quot;
Por otro lado, existen una serie de problemas con los caracteres de texto no ingleses (letras
con acento, ees,etc.). Depende de la codificacin de caracteres empleada en la pgina web, estos
caracteres no ingleses se vern o no se vern correctamente en la pgina. Codificaciones de
caracteres como Unicode o ISO-8859-1 no presentan problemas, mientras que otras como ASCII
no mostrarn el contenido correctamente. Por ello, existen tambin una serie de caracteres especiales
para representar los caracteres no ingleses, que funcionarn correctamente independientemente
de la codificacin utilizada en la pgina. En la tabla siguiente se recogen los espaoles:
Smbolo Cdigo

&ntilde;

&aacute;

&eacute;

&iacute;

&oacute;

&uacute;

&agrave;

&egrave;

&igrave;

&ograve;

&ugrave;

Validacin del cdigo HTML

Para
verificar
el
cdigo
de una
pgina
HTML
se
puede
consultar
la
direccin http://validator.w3.org/. En esta pgina se puede insertar el cdigo de la pgina que se
quiera comprobar o bien subir el archivo que contiene dicho cdigo. Tras realizar la comprobacin,
ofrecer un resultado sobre los errores que contiene.
Ojo! Para comprobar el cdigo de una pgina web, dicho cdigo deber
llevar obligatoriamente una declaracin de tipo de documento y una indicacin de la codificacin
de caracteres que utiliza.

En el caso de que el resultado de la validacin sea correcto, nos indicar con un mensaje que
podemos incluir el siguiente elemento en nuestra pgina para indicar que est escrita de acuerdo a
los estndares del W3C:

Tipos de elementos
La mayora de elementos del cuerpo se pueden clasificar en:

Elementos de bloque:
Son elementos que crean estructuras ms grandes que pueden contener a los elementos de
lnea y a otros elementos de bloque. Adems siempre comienzan en una lnea nueva.

Elementos de lnea
Estos elementos solo pueden contener datos y a otros elementos de lnea. No comienzan con
lnea nueva.

Estructura del texto

El texto es el tipo de contenido ms habitual en las pginas web. La correcta estructuracin del
texto facilitar la lectura de nuestra pgina por parte de otras personas. En esta seccin estudiaremos
las etiquetas HTML ms importantes para estructurar el texto de una pgina.

Escribir texto en una pgina web

Tal como hemos estudiado, el texto que escribamos dentro de las etiquetas <body> </body>
aparecer en pantalla cuando se cargue la pgina. No obstante, si hacemos la prueba y escribimos
algn texto, observaremos lo siguiente:

Aunque introduzcamos ms de un espacio entre las palabras, solamente se muestra un

nico espacio en el navegador.

Aunque insertemos un salto de lnea en el cdigo de la pgina (tecla Enter), no aparece

representado cuando cargamos la pgina en el navegador.

Esto se debe a que el lenguaje HTML se cre para estructurar texto. Ello quiere decir que para
realizar cualquier cambio en la estructura del texto (introducir una nueva frase mediante punto y
aparte, crear un prrafo nuevo,...) habr que utilizar una etiqueta. A continuacin veremos las
etiquetas ms importantes.
Si deseamos insertar un espacio ms del normal entre dos palabra es necesario insertar el
carcter &nbsp; (no-break space) por cada espacio que queramos aadir

Salto de lnea
Cuando se desee insertar un cambio de lnea en una pgina web se utilizar la etiqueta <br>.
Esta etiqueta no tiene etiqueta de cierre. Por ejemplo, el cdigo siguiente:
Este
texto
aparece en
la misma lnea.
Este <br> texto<br>

aparece <br> en <br>

lneas <br> distintas.

Produce el siguiente resultado;

Este texto aparece en la misma lnea.
Este
texto
aparece
en
lneas
distintas.

Esta etiqueta no debe usarse ms que cuando sea necesario. En su lugar se suele agrupar el
texto en prrafos, tal como veremos en el siguiente punto.

Prrafos
El prrafo es la estructura ms utilizada. Para indicar que un texto pertenece al mismo prrafo, se
introduce dentro de las etiquetas <p> </p>. Cuando el prrafo termina con la etiqueta de cierre, se
introduce automticamente un salto de lnea. Por ejemplo, el cdigo siguiente:
<p>Este texto forma parte del prrafo 1. </p> <p>Este texto forma parte del prrafo 2. Por eso
est en otra lnea.</p>

Produce el siguiente resultado;

Este texto forma parte del prrafo 1.
Este texto forma parte del prrafo 2. Por eso est en otra lnea.

Es un elemento de bloque y no puede contener otros elementos de bloque.

La etiqueta de cierre es opcional.
El navegador se encarga de que la lnea de texto ocupe todo el ancho disponible, y si el ancho
cambia, el texto se ajusta al nuevo ancho ocupando ms o menos lneas
Todo texto de un HTML que no sea encabezado, lista o celda de una tabla debe estar dentr de
un elemento <p>

Encabezados
Los encabezados son bloques que destacan el texto que contienen. Se utilizan como
delimitadores de seccin dentro de las pginas web. Existen 6 tipos de encabezado, representados
por las etiquetas siguientes (en orden de ms a menos importantes):
<h1 | h2 | h3 | h4 | h5 | h6>
Los encabezados son elementos de bloque.
Las etiquetas de cierre son obligatorias
As, el cdigo:
<body>
<h1>Encabezado
<h2>Encabezado
<h3>Encabezado
<h4>Encabezado
<h5>Encabezado
<h6>Encabezado
</body>

de
de
de
de
de
de

nivel
nivel
nivel
nivel
nivel
nivel

1.</h1>
2.</h2>
3.</h3>
4.</h4>
5.</h5>
6.</h6>

Produce el siguiente resultado;

Encabezado de nivel 1.
Encabezado de nivel 2.
Encabezado de nivel 3.
Encabezado de nivel 4.
Encabezado de nivel 5.
Encabezado de nivel 6.

Los encabezados tambin introducen un salto de lnea al final. El tamao de la letra y el tipo
de destacado dependen del navegador que se utilice. La etiqueta de encabezado no debe utilizarse
dentro de una etiqueta de prrafo y viceversa.

Lnea horizontal
Es una lnea que se suele utilizar de separador. Para ello se utiliza la etiqueta <hr>. As, el
cdigo:
<p>Un prrafo.</p>
<hr>
<p>Otro prrafo.</p>

Produce el siguiente resultado;

Un prrafo.

Otro prrafo.

La lnea o regla horizontal tambin introduce un salto de lnea al final.

Ejercicio 1:
Realiza una pgina web cuya apariencia sea similar a la que aparece en el siguiente cuadro. Gurdala
con el nombre ejercicio1.html.

Formato del texto

En este apartado veremos algunas etiquetas que sirven para dar forma al texto: cursiva, negrita,
subrayado, tipos de letra, tamaos, etc.
No obstante, se debe tener cuidado con estas etiquetas, ya que la mayora han quedado
obsoletas. Esto se debe a que HTML debe utilizarse nicamente para estructurar el texto, no para
dar formato ni mejorar la esttica de la pgina: eso es tarea de las hojas de estilo CSS que
veremos en el tema siguiente.
As, esta seccin se ha dividido en dos partes: en la primera se explican las etiquetas que se
siguen utilizando y en la segunda las que han quedado obsoletas. Las etiquetas obsoletas slo se
utilizarn en los ejercicios de esta seccin, pero en ninguno ms.
Sealar que se pueden combinar estas etiquetas para producir varios efectos a la vez: se
puede subrayar y poner en negrita, o poner en cursiva y cambiar el tipo de letra, etc. Slo es
necesario cerrar las etiquetas de manera correcta (es decir, inversamente a como se han abierto, tal
como se explic en la seccin de Introduccin a HTML).
Son elementos de lnea, por tanto, no hacen salto de lnea y se pueden introducir dentro de un
prrafo <p>

Texto con formato previo

Sirve para que el navegador visualice el texto tal y como aparece en el contenido de esta
etiqueta, respetando tabuladores, espacios y saltos de lnea.
La nica excepcin es que introduzcamos en el contenido otros elementos HHTML, los cuales se
ejecutarn tambin.
Etiqueta final obligatoria
<pre>
EJEMPLO
de
Texto
Preformateado
</pre>

Produce el siguiente resultado;

EJEMPLO
de
Texto
Preformateado

Etiquetas que se siguen utilizando

<b> <i> <big><small><tt><s><strike>

Negrita
Para resaltar un trozo de texto en negrita se utilizan las etiquetas <b> </b>. Estas etiquetas
pueden (y deben) utilizarse dentro de las etiquetas de prrafo. Por ejemplo, el cdigo siguiente:
<p>Este texto forma parte de un prrafo. Y esta <b>palabra</b> est en <b>negrita</b> dentro
del mismo prrafo.</p>

Produce el siguiente resultado;

Este texto forma parte de un prrafo. Y esta palabra est en negrita dentro del mismo prrafo.

Esta etiqueta tiene un

tambin <strong> </strong>

sinnimo:

en

lugar

de

utilizar <b> y </b> se

puede

utilizar

Cursiva
Para resaltar un trozo de texto en cursiva se utilizan las etiquetas <i> </i>. Estas etiquetas
pueden (y deben) utilizarse dentro de las etiquetas de prrafo. Por ejemplo, el cdigo siguiente:
<p>Este texto forma parte de un prrafo. Y esta <i>palabra</i> est en <i>cursiva</i> dentro
del mismo prrafo.</p>

Produce el siguiente resultado;

Este texto forma parte de un prrafo. Y esta palabra est en cursiva dentro del mismo prrafo.

Esta etiqueta tiene

tambin <em> </em>

un

sinnimo:

en

lugar

de

utilizar <i> y </i> se

puede

utilizar

Texto monoespaciado
Para que un trozo de texto se represente con letras monoespaciadas (tambin llamado teletipo,
dado que cada letra ocupa el mismo espacio) se utilizan las etiquetas <tt> </tt>. Estas etiquetas
pueden (y deben) utilizarse dentro de las etiquetas de prrafo. Por ejemplo, el cdigo siguiente:
<p>Este texto forma parte de un prrafo. Y esta <tt>palabra</tt> est en <tt>modo
teletipo</tt> dentro del mismo prrafo.</p>

Produce el siguiente resultado;

Este texto forma parte de un prrafo. Y esta palabra est en modo teletipo dentro del mismo prrafo.

Tamao de letra grande

Para resaltar un trozo de texto con un tamao de letra mayor se utilizan las
etiquetas <big> </big>. Estas etiquetas pueden (y deben) utilizarse dentro de las etiquetas de prrafo.
Por ejemplo, el cdigo siguiente:
<p>Este texto forma parte de un prrafo. Y esta <big>palabra</big> est en <big>tamao
grande</big>dentro del mismo prrafo.</p>

Produce el siguiente resultado;

Este texto forma parte de un prrafo. Y esta palabra est en tamao grande dentro del mismo prrafo.

Tamao de letra pequeo

Para resaltar un trozo de texto con un tamao de letra ms pequeo se utilizan las
etiquetas <small> </small>. Estas etiquetas pueden (y deben) utilizarse dentro de las etiquetas de
prrafo. Por ejemplo, el cdigo siguiente:
<p>Este texto forma parte de un prrafo. Y esta <small>palabra</small> est en <small>tamao
pequeo</small> dentro del mismo prrafo.</p>

Produce el siguiente resultado;

Este texto forma parte de un prrafo. Y esta palabra est en tamao pequeo dentro del mismo prrafo.

Etiquetas obsoletas (no deben utilizarse)

Subrayado
Para resaltar un trozo de texto en subrayado se utilizan las etiquetas <u> </u>. Estas etiquetas
pueden (y deben) utilizarse dentro de las etiquetas de prrafo. Por ejemplo, el cdigo siguiente:
<p>Este texto forma parte de un prrafo. Y esta <u>palabra</u> est <u>subrayada</u> dentro
del mismo prrafo.</p>

Produce el siguiente resultado;

Este texto forma parte de un prrafo. Y esta palabra est subrayada dentro del mismo prrafo.

Tachado
Para tachar un trozo de texto con una lnea a media
etiquetas <s> </s> y <strike> </strike>. Por ejemplo, el cdigo siguiente:

altura

se

utilizan

las

<p>Este texto forma parte de un prrafo. Y

esta <s>palabra</s> est <strike>tachada</strike> dentro del mismo prrafo.</p>

Produce el siguiente resultado;

Este texto forma parte de un prrafo. Y esta palabra est tachada dentro del mismo prrafo.

Cambiar el tipo de letra: la etiqueta <font>

Etiqueta de cierre obligatorio
Est desaprobada
Para resaltar un trozo de texto cambiando su tipo, color o tamao de letra se utilizan las
etiquetas <font> </font>. Estas etiquetas pueden (y deben) utilizarse dentro de las etiquetas de
prrafo. Para controlar los aspectos del texto que se pretenden cambiar se utilizan los
siguientes atributos dentro de la etiqueta:

Atributo size. Permite cambiar el tamao de la letra. Puede tomar valores entre 1 y 7.

Atributo face. Permite cambiar la familia o tipo de letra. Los valores que toma se
corresponden con un tipo de letra: Arial, Tahoma, etc.

Atributo color.
Permite
cambiar
el color de
la
letra.
Puede
tomar valores
hexadecimales precedidos por el signo # seguido de tres parejas de dgitos hexadecimales
que siguen el esquema RRGGBB (los dos primeros indican el nivel de rojo, los de enmedio el
de verde y los de la derecha el de azul) o nombres de colores. En el siguiente enlace puedes
consultar ms informacin sobre los colores HTML: colores HTML en la wikipedia. Y en el
siguiente enlace tienes un editor de colores que proporciona su valor hexadecimal: Editor de
colores. En la imagen que se muestra a continuacin aparecen los colores que se pueden
utilizar con su nombre:

Se puede utilizar uno, dos o tres atributos a la vez dentro de la misma etiqueta <font>. Hay
que recordar que el valor de los atributos se pone siempre entre comillas. Por ejemplo, el cdigo
siguiente:

<p><font color="green" face="Arial">Esta frase est en color verde y letra

Arial.</font> <font color="#FF0000" size="6">Esta frase est en color rojo y tiene tamao
6.</font> <font face="Times">Y esta frase est en letra Times.</font></p>

Produce el siguiente resultado;

Esta frase est en color verde y letra Arial.

tiene tamao 6.

Esta frase est en color rojo y

Y esta frase est en letra Times.

Ejercicio 2:
Realiza una pgina web cuya apariencia sea similar a la que aparece en el siguiente cuadro. Gurdala
con el nombre ejercicio2.html.