HTML

1.- ¿QUÉ ES HTML?

El HTML (Hyper Text Markup Language) fue el lenguaje pionero para la

creación de páginas web estáticas, páginas que siempre tienen los mismos contenidos salvo
que se modifique el archivo.
Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de
forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de
cada elemento del documento. Un documento hipertexto no sólo se compone de texto,
puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse
como un documento multimedia.
Los documentos HTML deben tener la extensión html o htm, para que puedan
ser visualizados en los navegadores (programas que permiten visualizar las páginas
web).Los navegadores se encargan de interpretar el código HTML de los documentos, y de
mostrar a los usuarios las páginas web resultantes del código interpretado.

2.- VERSIONES DE HTML

• En noviembre de 1995 se aprobó el estándar HTML 2.0. para la creación de

páginas web. Se creó con objetivos divulgativos, orientado a la actividad
académica, en el que el contenido de las páginas era más importante que el
diseño.
• Pero esta versión del HTML carecía de muchas herramientas que permitieran
controlar el diseño de las páginas y añadir contenido multimedia, por lo que
Netscape (cuyos navegadores eran los más utilizados por aquellos años)
comenzó a incluir nuevas etiquetas que no existían en el estándar.
• El comité encargado de establecer los estándares dentro de Internet, comenzó a
trabajar en el borrador de una nueva versión de HTML, el borrador de HTML
3.0.
• Pero este borrador resultó demasiado extenso, al intentar incluir numerosos
nuevos atributos para etiquetas ya existentes, y la creación de otras muchas
etiquetas nuevas. Por ello, no fue bien aceptado por el mercado y varias
compañías se unieron para formar un nuevo comité encargado de establecer los
estándares del HTML. Este comité pasó a llamarse W3C.

• En enero de 1997 se aprobó el estándar HTML 3.2. Este nuevo estándar incluía
las mejoras proporcionadas por los navegadores Internet Explorer y Netscape
Navigator, que ya habían realizado extensiones sobre el estándar HTML 2.0.
• En diciembre de 1997 se aprobó el estándar HTML 4.0, creado para estandarizar
los marcos (frames), las hojas de estilo y los scripts.
• En septiembre de 2001 se aprobó el estándar HTML 4.01.
• Buscad en Internet la continuación. ********************

3.- ETIQUETAS
HTML, es un lenguaje de marcas, es decir, es la forma de indicar el aspecto que
va a presentar un documento, mediante una serie de etiquetas incluidas en el propio
documento. Las etiquetas le indicarán al navegador la posición relativa de los elementos de
la página, su tamaño, los colores, etc.

1
 Una etiqueta o marca está formada por una o varias palabras reservadas, es
decir, palabras que tienen un significado especial en el lenguaje. Se diferencian de la
información del documento propiamente dicha porque se encuentran encerradas entre los
símbolos menor que “<” y mayor que “>”.

Por ejemplo, una marca o etiqueta como la siguiente:

[comienzo_negrita] ESI [fin_negrita]

Indica que el texto “ESI” debe aparecer en negrita.

3.1.- TIPOS DE ETIQUETAS.-

Las etiquetas son equivalentes a instrucciones o sentencias en los lenguajes de
programación tradicionales y las encargadas de indicar al navegador como mostrar la
información. Existen tres tipos de etiquetas:
 Etiquetas de sólo apertura o vacías.- Se utilizan para introducir saltos de línea,
líneas horizontales, y otros elementos no asociados al formato de textos o imágenes.
Tiene el siguiente formato:
<etiqueta>

 Etiquetas de apertura y cierre o contenedoras.- Constan de una marca inicial

y una marca final, pero con el carácter “/”. Todo lo que esté contenido entre ambas
marcas quedará sujeto al formato indicado por la etiqueta. Tiene el siguiente formato:

<etiqueta> ……… </etiqueta>

En el ejemplo anterior, para poner ESI en negrita, sería:

<b> ESI </b>

 Etiquetas de cierre opcional.- Pueden adoptar uno de los dos formatos

anteriores aunque se aconseja cerrarlas para estructurar mejor el documento y dotarlo de
mayor claridad.

 Las etiquetas con apertura y cierre deben estar “balanceadas”. Si se abren en un orden
determinado, se deben cerrar en el orden inverso para que las primeras engloben a las
siguientes. Siguiendo con el ejemplo anterior, ahora si quisiéramos que ESI estuviera en
negrita y cursiva pondríamos:
<b><i> ESI </i></b>

 HTML no diferencia entre mayúsculas y minúsculas a hora de escribir e interpretar las

etiquetas. Con el fin de lograr una mayor uniformidad en el código, lo normal es que
siempre se escriban de la misma forma, prefiriendo la mayoría de desarrolladores ponerlas
en mayúscula para que resaltan más a pesar de las recomendaciones de W3C en el sentido
contrario.

3.2.- ATRIBUTOS.- Muchos elementos (etiquetas) tienen atributos que definen

propiedades del elemento, por ejemplo, que cierta palabra aparezca de color verde, para ello

2
necesitamos suministrar el valor del color como parámetro. La mayoría de las etiquetas
tienen parámetros para indicar múltiples aspectos del formato, como el color, el tamaño, la
posición, etc.
El formato de una etiqueta con parámetro es:

<etiqueta parámetro1=”valor1” parámetro2=”valor2” ………>

En el ejemplo anterior, para poner ESI en rojo, utilizamos la etiqueta font con el
parámetro color igual a red:

<font color=”red”> ESI </font>

4.- COMENTARIOS

Al igual que los lenguajes de programación utilizan los comentarios para

comentar o aclarar operaciones concretas dentro del propio código, HTML, permite el
uso de comentarios con el mismo fin.
Los comentarios se escriben en HTML de la siguiente forma:

<!-- Esto es un comentario >

Los caracteres de inicio del comentario, <!-- deben ir juntos, pero se permiten
espacios entre los -- y el > del final. Los comentarios pueden expandirse varias líneas,
aunque lo correcto es que los comentarios sean breves y concisos.

5.- INTERPERTACIÓN DE ESPACIOS, TABULACIONES Y RETORNOS DE

CARRO.-
Los espacios, tabulaciones, líneas en blanco y retornos de carro del documento
HTML se ignoran, tomándose como un único espacio en blanco. Esto permite añadir
espacios para aumentar la claridad del documento, y en particular utilizar la indentación
para distinguir distinto bloque de texto anidados.
Cuando se quiere forzar un espacio en blanco, se hace de la siguiente forma:

&snbp;

Estoes particularmente interesante en la utilización de tablas.

6.- CARACTERES ESPECIALES

Son válidos todos los caracteres incluidos en el estándar ISO 8859-1
Aunque podemos decir que el formato de un documento HTML, es bastante
flexible existen ciertas restricciones o reglas a tener en cuenta.

Caracteres de significado especial

< Marca el comienzo de una etiqueta

> Marca el final de una etiqueta
& Marca el comienzo de una referencia o entidad

3
 Estos caracteres, en caso de utilizarlos, se sustituyen por el nombre de la entidad
que los representa en el repertorio ISO latín 1 (ISO 8859-1)

¡ &iexcl;
¿ &queso;
“ &quot;
< &lt;
> &gt;
& &amp;

En algunos navegadores las letras acentuadas y algunos caracteres como la”ñ”

no se visualizan correctamente, por lo cual deben ser sustituidos por la referencia a su
entidad.

ñ &ntilde;
á &aacute;
é &eacute
í &iacute
ó &oacute
ú &uacute

7.- ESTRUCTURA DE UN DOCUMENTO EN HTML

Para crear un documento:

 Se edita con un editor de texto ASCII. Por ejemplo: el block de notas

Para guardar un documento, y que éste sea interpretado por el navegador:

 Para que el navegador aplique el intérprete correcto a la página

Web en cuestión, debe saber el lenguaje en la que está escrita. Esto se le indica
de dos formas:
 El documento llevará la extensión html. Se guarda con extensión html o htm (la
extensión .htm proviene de los sistemas de 16 bits, cuyos sistemas de archivos
sólo permiten archivos con 8 caracteres para el nombre, y 3 para la extensión).
 El documento debe comenzar por la etiqueta <html> y terminar con </html>

Se deben utilizar nombres significativos, que no lleven espacios en blanco ni

caracteres como ñ o tildes que no se reconocen en todos los idiomas.

Para ejecutar un documento:

 Abrir el documento a través del navegador.

4
Una vez establecido el lenguaje que se utiliza, se escribe el esqueleto del documento.
Éste está constituido por dos partes: la cabecera y el cuerpo. La primera está delimitada
por las etiquetas <head> </head> y la segunda por <body> </body>.

De esta forma, la estructura de un documento genérico en HTML será:

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

"[Link]

<html>
<head>
Elementos de la cabecera
</head>
<body>
Contenido del documento
</body>
</html>

La primera línea de un documento HTML debe indicar que versión de HTML utiliza el
documento.
Las etiquetas head y body son opcionales aunque se recomienda introducirlas para
identificar mejor las partes del documento y estructurar el código. En caso de que un
documento HTML no presente estas etiquetas de identificación, el navegador
considerará que todo lo que se defina en el fichero forma parte del cuerpo del
documento.

7.1.- LA CABECERA <head>

Se incluirán las definiciones generales que afectan a todo el documento, el título,
el autor, y otra característica para facilitar su indexación como meta tags. También se
deben incluir los scripts que necesite el documento (JavaScript) y las definiciones de
estilo si se utilizan hojas de estilo.

 Etiqueta title: Sirve para especificar el título que tendrá el documento.

<title>Título del documento</title>

Dicho título no aparecerá en la página Web en sí sino en la barra del navegador. Tiene
gran utilidad puesto que facilita un elemento de identificación cuando una página se
agrega a los favoritos o se vea en el historial de navegación. Además, es común en
algunos buscadores utilizar este título como resultado de las búsquedas (por ello debe
llevar un título significativo). Es preferible que el título no sea muy largo ya que
dependiendo del tamaño de la ventana del navegador, puede verse cortado y, por tanto,
ilegible.

 Etiqueta meta: En la navegación a través de diferentes páginas de Internet, es

muy fácil encontrarse con páginas que ya no están donde deberían estar, sino que en su
antigua URL hay una página intermedia que redirecciona al usuario hacia la nueva
ubicación del documento. Con esta etiqueta podemos introducir en una página Web un

5
refresco automático de unos segundos. Para ello se indica la URL del documento que
va a sustituir al actual y el número de segundos que debe esperar el navegador para
efectuar el refresco. Su sintaxis:

<meta http-equiv=”refresh” content=”segundos;URL=nuevaURL”>

El atributo content lleva especificado un valor que consta de dos partes: segundos y
nueva URL. La primera adopta un formato numérico que expresa el número de
segundos que deben transcurrir hasta que se refresque la página, la segunda indica la
URL de la página que debe sustituir a la actual, como ejemplo:

<meta http-equiv=”refresh” content=”5;URL=[Link]

Si se quiere que el cambio entre páginas sea inmediato, el valor segundos deberá dejarse
vacío, si lo que se quiere es refrescar el contenido de la página actual, se debe dejar
vacío el valor URL.

La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es
posible indicar un tipo de información y su valor, pero es posible insertar varias
etiquetas <meta> en un mismo documento.
Por ejemplo, el siguiente código indica que el autor de la página es aulaesi, que la
página trata sobre un curso de informática, y especifica algunas palabras clave a ser
consultadas por los buscadores:
<html>
<head>
...
<meta name="author" content=“aulaesi">
<meta name="description" content="Curso de informática">
<meta name="keywords" content=“aprenda informática on line">
</head>

Tenemos otras que describimos a continuación, aunque no se emplean.

TIPO SIGNIFICADO
author Autor de la página
Palabras para clasificar la página en los
classification
buscadores
description Descripción del contenido de la página
generator Programa utilizado para crear la página
keywords Palabras clave

7.1.- EL CUERPO <body>

Es la parte del documento que se circunscribe entre las etiquetas <body> y
</body>. En él se incluye la página propiamente dicha, es decir, el texto y el material
del documento que se va a mostrar.
La etiqueta <body>, a diferencia de <head>, admite una serie de atributos que
son de carácter global para todo el documento. Es decir, definen aspectos generales del

6
documento, como la imagen de fondo de la página o el color de la misma, del texto o de
los vínculos visitados o no.

 Aributos de la etiqueta body

etiqueta atributo Valor significado

body bgcolor color Define el color de fondo del documento
Indica la dirección Web de imagen de fondo,
background URL
puede ser absoluta o relativa
Establece el color en el que aparecerá el texto
text color
del documento
Establece el color en el que aparecerá el texto de
link color
los enlaces del documento
Determina el color en el aparecerá el texto de los
vlink color
enlaces visitados

 Los atributos bgcolor, text, link y vlink ( los veremos más adelante), modifican
el color de algunos elementos básicos del documento como son el fondo de la página o
el texto. Simplemente habrá que prestar atención al necesario contraste entre el fondo y
los textos para garantizar la legibilidad del documento.
Por otra parte, el cambio de color de los enlaces no siempre tiene el
comportamiento deseado en todos los navegadores por lo que es conveniente realizar
una comprobación.

 La imagen de fondo puede establecerse a través del atributo background,

indicando la ruta en la que se encuentra la imagen.

Por ejemplo, para hacer que la imagen de fondo de una página sea la imagen
[Link], que se encuentra en el mismo directorio en el que se encuentra guardada
la página, tendremos que escribir:
...
<body
background="[Link]">
...
</body>
</html>
En el caso de que la imagen no se encuentre en el mismo directorio que la
página, y se encuentre dentro de la carpeta imagenes, que sí se encuentra en el
mismo directorio que la página, tendremos que escribir:
...
<body
background="imagenes/[Link]">
...
</body>
</html>

Estas imágenes se muestran por debajo del texto y los elementos que compongan
el documento. Si el navegador no pudiera encontrar la imagen definida, mostraría
simplemente el color de fondo establecido.

7
 Hay que prestar atención para que la imagen tenga el tamaño adecuado, ya que si
es menor que la ventana del navegador del usuario, la imagen será reproducida como un
mosaico por toda la ventana hasta rellenarla por competo. Si éste no es el efecto
deseado, lo mejor es utilizar una imagen que sea del tamaño concreto para el que se
realice la página, indiciando en ésta que se ha optimizado para una resolución
determinada. Si el usuario decide utilizar otra resolución de pantalla, sabe que se
arriesga a visualizar mal la página.

 El color de fondo se especifica con el atributo bgcolor, con el siguiente formato:

<body bgcolor=color background=imagen>

……………………
</body>

El color se debe expresar de dos formas:

 Por su nombre en inglés: color=”purple”
 Por su anotación hexadecimal: color=”#800080”

Ésta última resulta de calcular la proporción rojo, verde y azul (los tres colores
básicos en los sistemas RGB que utilizan los monitores) que componen el color final.
Su anotación está basada en números con base 16 que van del 0 al 9 y de la a la f. ff es
el número más alto en este sistema, se corresponde al 255 decimal, es decir, un color
que sea 100% rojo, sin nada de verde o azul, se debería consignar como #ff0000
(rojo=255, verde=0, azul= 0).

Black = ”#000000” Silver = “#C0C0C0” Lime = “#00FF00”

White= ”#FFFFFF” Gray = “#808080” Olive = “#808000”
Red = ”#FF0000” Marron = “#800000” Yellow = “FFFF00”
Green = ”#008000” Purple = “#800080” Navy = “#000080”
Blue = ”#0000FF” Fucsia = “#FF00FF” Aqua = “00FFFF”
Teal = ”#008000” x= “#FF8000” y= “#339966”

Las tablas de colores vienen definidas con los nombres y su código #RGB anteriores, he
añadido dos colores que debéis decir su nombre.

8.- URI

Uniform Resource Identifier, identificador uniforme de recurso, definido en RFC 2396

(Uniform Resource Identifiers: Generic Syntax). Algunos URI pueden ser URL, URN o
ambos.

Un URI es una cadena corta de caracteres que identifica unívocamente un recurso

(servicio, página, documento, dirección de correo electrónico, enciclopedia, etc.).
Normalmente estos recursos son accesibles en una red o sistema.

Un URI consta de las siguientes partes:

8
  Esquema: nombre que se refiere a una especificación para asignar los
identificadores, e.g. urn:, tag:, cid:. En algunos casos también identifica el protocolo
de acceso al recurso, por ejemplo http:, [Link] ftp:.
 Autoridad: elemento jerárquico que identifica la autoridad de nombres (por
ejemplo //[Link]).
 Ruta: Información usualmente organizada en forma jerárquica, que identifica al
recurso en el ámbito del esquema URI y la autoridad de nombres (e.g.
/wiki/Uniform_Resource_Identifier).
 Consulta: Información con estructura no jerárquica (usualmente pares
"clave=valor") que identifica al recurso en el ámbito del esquema URI y la autoridad de
nombres. El comienzo de este componente se indica mediante el carácter '?'.

 Fragmento: Permite identificar una parte del recurso principal, o vista de una
representación del mismo. El comienzo de este componente se indica mediante el
carácter '#'. Por ejemplo, un URI que apunta a una zona interna llamada “datosesi” del
documento html/[Link] , localizado en el servidor [Link].

[Link]

Los URIs relativos se convierten en URIs completos a partir de un URI base. Por
ejemplo al utilizar un enlace

<a href="[Link]">alumnos</a>

sería:

"[Link]

También lo podríamos utilizar con una imagen:

<img src="../images/[Link]">

se expandiría al URI completo "[Link]

Dentro de un documento HTML, los URIs se utilizarán cuando queramos:

 Crear un vínculo a otro documento o recurso.

 Crear un vínculo a una hoja de estilo o script externos.
 Incluir una imagen, objeto o aplicación en una página, bien de fondo o como
parte. O crear un mapa de imágenes.
 Trabajar con los formularios.

9
9.- ELEMENTOS GENERALES DEL LENGUAJE

Si se escriben varios espacios en blanco o se introducen tabuladores o saltos de línea en

el texto tal y como se puede hacer en un documento cualquiera, estos formatos no se
visualizarán en el navegador. Esto es debido a que en HTML se necesitan unas etiquetas
concretas para definir la estructura que va a tener el texto y los espacios que se quieran
introducir en el mismo.

 Cambio de línea <br>

Para forzar a la ruptura de una línea de texto independientemente del formato en
que se esté trabajando.
o <br clear=left> Busca el primer margen libre a la izquierda.
o <br clear=right> Busca el primer margen libre a la derecha.
o <br clear=all> Busca el primer margen libre a ambos lados.

 Línea horizontal <hr>

Dibuja una línea horizontal <hr width= align= size= >

o width Tamaño en puntos o porcentaje.

o align Alineación en la página: left, rigth, center
o size Grosor de la línea en puntos o porcentaje.
o noshade Elimina el efecto tridimensional de la línea

 Ejemplo

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

"[Link]

<html>
<head>
Elementos de la cabecera
</head>
<body>
<hr>
<hr width= "50 %" size = "3" align = "center">
<hr width= "50 %" size = "3" align = "right">
<hr width= "50 %" size = "3" align = "left">

</body>
</html>

Algunos navegadores utilizan color para asignar color a la línea, y otros utilizan
background-color.

 Centrar un texto <center>

Centra el texto en la página

<center>texto</center>

10
  Etiquetas para el resaltado de caracteres

Todas las etiquetas tienen el mismo formato:

<etiqueta>texto</etiqueta>

 Asociados a distintos tipos de información:

<cite> Cita
<code> Ejemplo de código
<em> Énfasis
<kbd> Entrada de teclado
<samp> Muestra
<strong> Énfasis fuerte
<var> Variable
<sup> Superíndice
<sub> Subíndice
Citas Largas <blockquote></blockquote>
Citas Cortas <q></q>

 Asociados a distintos tipos de letra.

<b> Letra en negrita

<i> Letra cursiva
<tt> Letra de máquina de escribir
<u> Letra subrayada
<big> Aumenta el tamaño de la
fuente
<small> Disminuye el tamaño de la
fuente

10.- CABECERAS

En HTML se pueden definir diferentes jerarquías de títulos tal y como hacen algunos
procesadores de texto como Word. Para definir estos títulos de cabecera se utilizan etiquetas
que siguen la estructura: <hnúmero_nivel1> </hnúmero_nivel1>
Existen 6 niveles de cabeceras:
<h1>cabecera de nivel 1</h1>
……..
<h6>cabecera de nivel 6</h6>

Por defecto, los títulos aparecerán alineados a la izquierda. Esto puede ser modificado
mediante la introducción del atributo align, y valores como center, right o left.

Están desaconsejadas frente a las hojas de estilo.

11.- INSERCIÓN DE TEXTOS

11
  Creación de párrafos <p>
La inserción de párrafos se realiza mediante la utilización de la etiqueta:

<p>texto del párrafo</p>

La marca p indica un comienzo del párrafo. Los navegadores la interpretan como

una línea en blanco. La marca /p es opcional. Si no existe, el párrafo finaliza cuando
comienza el siguiente o aparece un elemento HTML que comienza otro bloque de
texto.
Podemos modificar la justificación del texto mediante el atributo align, que
puede tomar los valores left, right, justify o center. Por defecto aparece alineado a la
izquierda.
 Ejemplo:

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

"[Link]

<html>
<head>
<title>Creación de párrafos</title>
</head>
<body>
<p align=”right”>párrafo alineado a la derecha</p>
<p align=”center”>párrafo centrado</p>
<p>párrafo de dos líneas <br>alineado a la izquierda</p>

</body>
</html>

 Dar formato al texto <font>

El texto también se puede formatear cambiando la fuente, el tamaño, su color o

resaltando ciertas palabras mediante el uso de negritas o cursivas. Aunque desde HTML
4.0, se prefiere que el formato se aplique a través del lenguaje CSS.
Se puede modificar el tipo de fuente, el color y el tamaño.
 Tipo de fuente se incluye entre
<font face=”tipo de letra”
…….
</font>

ej : <p><font face=”tipo de letra”>texto que deseemos</font></p>

 Color de la fuente

12
 <font color=”tipo de color”
…….
</font>
Los tipos de colores los hemos visto anteriormente.

 Tamaño de la fuente
<font size=”tamaño”
…….
</font>

El parámetro tamaño debe recibir un valor número que puede indicar el tamaño
absoluto (utilizando valores comprendidos entre 1 y 7, ambos inclusive) o el relativo.
Por ejemplo, si se utiliza size=”4” el texto se mostrará en tamaño 4. Si se utiliza
size=”+4”, se le indicará al navegador que muestre el texto 4 veces más grande que el
tamaño definido por defecto. El caso contrario a esto último lo tendríamos con valores
negativos. (-4)

Con <basefont> podemos definir el tamaño base de fuente (usando el atributo

size. También está desaconsejado frente a las hojas de estilo.

Por supuesto, existe la posibilidad de combinar los tres modificadores anteriores en un

mismo tag <font>, para especificar el tamaño, color y tipo de fuente en una sola vez.

Ej: <p><font face=”courier” color=”purple” size=”10”> el texto que deseemos

</font></p>

 Preformatear el texto <pre>

El texto que se escriba con las etiquetas <pre> </pre> respetará los espacios, las
tabulaciones y los retornos de carro.
Podemos utilizar el atributo width que indica el número de caracteres máximos
por línea.
No se recomienda porque puede darnos problemas cuando la línea es demasiado
larga, el navegador no la corta y la muestra tal y como aparece en el fichero fuente.
Además, la presentación tienen menor calidad respecto al texto normal puesto que no
admite la mayoría de las instrucciones HTML, pudiéndose utilizar tan sólo
hiperenclaces o etiquetas de formato de texto (negrita, cursiva, etc.)

 Sangría <blockquote>

La sangría es una especie de margen que se establece a ambos lados del texto. Para
que un texto aparezca sangrado, se inserta entre las etiquetas <blockquote> y
</blockquote>.
Esta etiqueta en un principio se definió para delimitar citas pero que como la
mayoría de los navegadores resuelven la cita incluyendo un sangrado del texto, su uso
para sangrar texto se ha generalizado.

13
 El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva
línea.
Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se
consigue que los márgenes sean mayores.
Por ejemplo, para insertar el texto:
Queridos alumnos,
<blockquote>
<blockquote>
tengo el placer de comunicaros que hay un nuevo ejercicio.
</blockquote>
</blockquote>

EJERCICIOS:

1.- ¿Habría alguna diferencia para escribir el código de las formas siguientes?. Explica
tu respuesta:
a) <font color=”red”> ESI </font>
b) <FONT color=”red”> ESI </font>
c) <FONT color=”red”> ESI </FONT>
d) <FONT color=”red”> esi </FONT>
e) <FONT color=”RED”> ESI </FONT>
f) <FONT color=”red”> ESI
g) <FONT COLOR=”red”> ESI </FONT>
h) < color=”red”> ESI </FONT>
i) <FONT color=red> ESI </FONT>
j) <FONT color=”red> ESI </FONT>

2.- Crea una página Web con tu nombre escrito en tu color preferido. Llámala
minombre

3.- Resolver los dos colores x e y propuestos en la tabla de colores.

4.-Crea una página Web llamada tipo-color donde aparezca la tabla de colores. El
nombre del color debe aparecer con el color que representa. El blanco irá también en
negro.
Color negro----- y estar escrito en negro.

5.- Crea una página Web llamada tipo_letras como el ejercicio anterior pero con algunos
tipos de letras. Con cuatro es suficiente.

6.- Realizar una página Web llamada fondo_ranas que contenga la imagen [Link]
como fondo y se refresque a los 3 segundos con otra URL.

7.- Realiza una página Web llamada cabecera donde escribas tu nombre con los
diferentes tipos de encabezado.

14
8.- Crea una página Web llamada texto_formateado que contenga el texto formateado
de forma similar a como se presenta en Word.

9.- Modifica el ejemplo de Creación de párrafos, para que la última línea salga en el
navegador en dos líneas.

10.- Crea una página Web con 7 etiquetas de resaltado de caracteres. El fondo debe ser
negro y las letras amarillas y en verdana.

11.- Comprueba los siguientes formatos: n será un valor que debéis escribir
<body>
Esto aparecerá en n líneas de texto.
Una debajo de otra
hola
estoy
estudiando
informática
en
el IES Leonardo Da Vinci
</body>
-------------
<body>
Esto aparecerá en n líneas de texto.
Con espacios aleatorios
hola estoy estudiando
informática en
el IES Leonardo Da Vinci

<body>
-------------

<body>
Esto aparecerá en n líneas de texto.
Con br
Hola estoy estudiando
Informática<BR>
En el IES Leonardo Da Vinci
</body>
-------------

<body>
<p align="justify">este párrafo tiene el atributo
center, justificación, derecha o izquierda</p>
</body>

-------------

<pre>
Al escribir este texto preformateado:
los espacios que ponga se respetarán

y los saltos de línea también</pre>

</body>
12.- Realiza una página de estilo y texto libre, donde insertes lo que hemos aprendido

15