HMTL

El lenguaje HTML
Índice
Origen y generalidades
Tipo de Lenguaje
Estructura de un documento
Etiquetas HTML
Etiquetas y efectos básicos
Marcado de caracteres
Formato del texto
Símbolos especiales
Listas
Atributos para listas
Tablas
Atributos para tablas
Hipervínculos
Enlaces entre páginas (Links y Anchors)
Imágenes
Atributos para imágenes
Frames
Enlaces en Frames
Formularios
Metas
Archivos:
Anclas.txt
Formulario.pdf
Pag. 1 Manual HTML

El lenguaje HTML
Orígenes y Generalidades
El HTML es una aplicación del SGML ( Standard Generalized Markup Language),
que es un sistema para generar documentos estructurados y lenguajes de marcas.
HTML ( Hyper Text Markup Language), es decir, lenguaje de definición por marcas
para hipertexto, es un lenguaje muy sencillo que permite definir documentos
hipertexto a base de ciertas etiquetas que marcan partes del documento dándoles
una estructura o jerarquía, y que permite presentar el texto de una manera
estructurada y agradable, con enlaces (hyperlinks) que conducen a otros
documentos o fuentes de información relacionadas, y con inserciones multimedia
(gráficos, sonido, video... ). El lugar donde se encuentra esta información puede ser
el mismo documento o cualquier otro lugar de Internet. Es esta una de las
cualidades que le ha dado tanta difusión a Internet, ya que permite a cualquier
usuario sin conocimientos de informática la navegación por la Red.
Para crear un documento hipertexto para la WWW sólo debemos añadir las
etiquetas adecuadas al texto para especificar la estructura lógica ( títulos, párrafos
de texto normal, definiciones, citas...) del contenido y los diferentes efectos (
especificar los lugares del documento dónde se debe de poner cursiva, negrita o un
gráfico determinado) que se quieren dar. La presentación final se realiza por un
programa especializado llamado genéricamente Navegador o Browser, como
Netscape Navigator o Microsoft Internet Explorer. Esta presentación no será igual
en todos los visualizadores, por lo que al confeccionarlo debemos prestar más
atención a la estructura y organización que a la apariencia del documento.
Tipo de Lenguaje
El HTML es un lenguaje basado en etiquetas, que aportan al texto información
sobre la forma en que será mostrado. La mayoría de los efectos se realizan de la
misma forma: se rodea el texto que se quiere marcar entre dos etiquetas ( tags),
que definen el efecto deseado. Las etiquetas están formadas por unos códigos
metidos entre los signos "<" y ">" y con la barra "/" cuando se trata de la etiqueta
de cierre. Por ejemplo: <efecto> para abrir y </efecto> para cerrar. Un ejemplo
práctico: Si queremos que el nombre "Grupo A+L" se visualice en negrita, tenemos
que utilizar el comando " B " ( del inglés Bold) de la siguiente manera: <B> Grupo
A+L </B>.
Algunas etiquetas no tienen etiqueta de cierre. Esto ocurre cuando por ejemplo
queremos poner un gráfico, que se utiliza algo como <poner_gráfico_aquí>.
Otras veces es necesario añadir datos adicionales a la etiqueta. Por ejemplo, al
definir un hiperenlace o Link hay que especificar el destino. Para ello se añaden
parámetros en la etiqueta de apertura, quedando la de cierre igual: <efecto
parametro1 parametro2> ..... </efecto>.
Pag. 2 Manual HTML

Estructura de un documento.
Un documento HTML comienza con la etiqueta <html> y termina con </html>.
Dentro del documento hay dos partes fundamentales: la cabecera y el cuerpo,
separadas por las etiquetas:
<HEAD> Inicio de la cabecera
</HEAD> Fin de la cabecera
<BODY> Inicio del cuerpo.
</BODY> Fin del cuerpo
La cabecera sirve para definir diversos valores válidos en todo el documento.

Dentro de la cabecera podemos utilizar la etiqueta <TITLE> título </TITLE> que
permite especificar el título del documento, que no forma parte del documento en
sí, pero suele servir como título de la ventana que nos lo muestra.
Dentro del cuerpo se incluye el documento, incluyendo el texto, las imágenes, los
enlaces, etc. Es aquí donde se podrán aplicar los efectos que se explicarán a lo
largo de este manual. Dichos efectos se especifican exclusivamente a través de
etiquetas (tags). Esto quiere decir que los espacios, tabulaciones y retornos de carro
que se introduzcan en el fichero fuente no tienen ningún efecto a la hora de la
presentación final del documento.
Para crear una página utilizaremos un editor de texto ASCII como el Bloc de notas,
el UltraEdit o cualquier otro editor de Windows, el vi de Unix, etc. El fichero
resultante lo grabaremos como “nombre_pagina.html”(la extensión del fichero
habrá de ser .html) si no es posible elegir esta extensión lo grabaremos con la que
se pueda y luego cambiaremos el nombre del fichero a “pagina.html”. Después de
grabar el fichero hay que ejecutar el navegador que utilizamos habitualmente y ver
el resultado.
EJERCICIO UNO
Escriba en su editor ASCII el siguiente texto, ésta será su primera página web.
<HTML>
<HEAD>
<TITLE>EJERCICIO 1</TITLE>
</HEAD>
<BODY>
Estas
palabras
forman una
frase.
</BODY>
</HTML>
Grabar como ejercicio1.html y abrir el archivo grabado desde el Navegador
Pag. 3 Manual HTML

EJERCICIO DOS
<HTML>
<HEAD><TITLE>EJERCICIO 2</TITLE></HEAD>
<BODY>
Estas palabras forman una frase.
</BODY>
</HTML>
En ambos casos (ejercicio1 y ejercicio2), a la hora de la verdad lo que se ve es:

Estas palabras forman una frase.
Esto significa que el navegador no distingue los retornos de carro generados en el
editor ASCII.
Más adelante veremos cómo incluir etiquetas que generen dichos saltos.
ATRIBUTOS DE BODY
Junto con la etiqueta de <BODY> pueden aparecer ciertos atributos, como:
BGCOLOR=color_de_fondo
TEXT="#rrggbb" para seleccionar el color por defecto del texto.
LINK="#rrggbb" para seleccionar el color de los enlaces que haya en la página.
VLINK="#rrggbb" para seleccionar el color de los enlaces visitados.
Para hacer refencia a los colores podemos escribir el nombre del color o su
formato RGB 24 bits #rrggbb (r red, g green, b blue) Estos valores están en
formato hexadecimal. Se puede poner cualquier combinación de números y las
letras A B C D E y F.
La lista de colores sugerida es: aqua, black, blue, fuchsia, gray, green, maroon,
navy, olive, purple, red, silver, teal, white, yellow. Estos 15 colores se han tomado
de la paleta VGA de Windows.
EJERCICIO TRES
Cambiar en ejercicio2.html los atributos de BODY
<BODY BGCOLOR="green" TEXT="#550010">

Escriba aquí un texto
Pag. 4 Manual HTML

Comentarios
Para incluir comentarios en HTML se emplea la declaración de comentarios. Una
declaración de comentarios comienza con <!, le siguen uno o varios comentarios y
termina con >. Cada comentario comienza con –o ** e incluye todo el texto hasta
la siguiente aparición de –o ** . Dentro de una declaración de comentarios, se
pueden poner espacios en blanco después de cada uno de ellos, pero no antes del
primero. Toda la declaración del comentario se ignora.
EJERCICIO CUATRO
Titulo de la ventana: Ejercicio Comentarios

<BODY>
< !--Este es un comentario que no aparecerá en la presentación -->
Este texto sí aparece
</BODY>
Etiquetas HTML
Estilos y Efectos Básicos
Mediante los títulos, en sus diferentes niveles de importancia, podemos definir el
esqueleto del documento, su estructura básica. La etiqueta es <Hn> .... </Hn> ,
que define el título de nivel n, existiendo 6 niveles (n=1...6). La número 1 se
mostrará con un tamaño de letra mayor, disminuyendo hasta la 6.
Ejemplo: Efecto
<HTML> Indica inicio de una pagina HTML
<HEAD> Inicio de la cabecera
<TITLE> Títulos </TITLE> Presenta el título de la página
</HEAD> Fin de la cabecera
<BODY> Inicio del cuerpo
<H1>Ejemplo de Headings</H1>
Ejemplo de
Headings
<H1>Heading 1</H1>
Heading 1
<H2>Heading 2</H2>
Heading 2
<H3>Heading 3</H3>
Heading 3
<H4>Heading 4</H4>
Heading 4
<H5>Heading 5</H5> Heading 5
<H6>Heading 6</H6> Heading 6
</BODY> Fin del cuerpo

</HTML> Fin del documento HTML
Pag. 5 Manual HTML

EJERCICIO CINCO
Hacer una página que muestre en el navegador lo siguiente:

- Fondo : Color amarillo
- Encabezado al mayor tamaño: TITULAR UNO
- Encabezado al menor tamaño: SUBTITULAR UNO
- Texto : Escribe un párrafo cualquiera de un mínimo de tres líneas
Marcado de caracteres
En un documento HTML debemos distinguir dos tipos de estilos: los físicos y los
lógicos. Los primeros son aquellos que determinan exactamente como se
presentará el texto, y los segundos son aquellos que dan cierta cualidad al texto y
cuya visualización concreta dependerá del visualizador. Los más usuales son:
Estilos físicos Estilos lógicos
<B>...</B> Negrita <ADDRESS>...</ADDRESS> Dirección
<I>...</I> Cursiva-Itálica <CITE>...</CITE> Cita
<U>...</U> Subrayado <CODE>...</CODE> Código
<STRIKE>...</STRIKE> Tachado <DFN>...</DFN> Definición
<BLINK>...</BLINK> Texto parpadeando (sólo <EM>...</EM> Énfasis
en Netscape) <KEY>...</KEY> Palabra Clave
<SUB>...</SUB> Subíndice <KBD>...</KBD> Teclado
<SUP>...</SUP> Superíndice <SAMP>...</SAMP> Ejemplo
<TT>...</TT> Teletipo (" Máquina de escribir”) <STRONG>...</STRONG> Fuerte
EJERCICIO SEIS
Titulo de la Ventana : Ejercicio de Estilos.

Cree una página donde pruebe todas y cada una de las etiquetas propuestas. Si le
es posible pruebe con dos navegadores distintos (si no intente conseguir un
segundo navegador será interesante más adelante, lo ideal sería utilizar los dos
más usados Netscape e Internet Explorer)
Pruebe a combinar entre sí varias etiquetas.
Podemos observar que para los marcados lógicos cada navegador utiliza un tipo
de marcado físico para representarlos.
FONT
Con el nuevo elemento FONT se puede cambiar el tamaño de los tipos, usando la
marca <FONT SIZE=valor>Texto</FONT>. Los tamaños van de 1 a 7. Los
valores dados en el atributo SIZE pueden tener un signo + o - delante, indicando
un incremento o disminución del tamaño respecto al tamaño base de la página. El
tamaño base por defecto es 3.
Otro atributo es FACE para especificar el tipo de letra a emplear. Por ejemplo
FACE="arial" indica que el tipo a emplear es el arial. Es necesario saber los
nombres y tener los tipos instalados para que esto funcione.
Pag. 6 Manual HTML

También tenemos el atributo COLOR, que permite especificar el valor RGB (de la
misma manera que en el cuerpo de la página) empleado para mostrar un bloque
de texto en ese color.
Los colores básicos puede escribirse directamente substituyendo al valor RGB de la
forma: <font color=”red”> texto rojo </font> E igualmente con blue, yellow,
green, cyan…
Ejemplo: <font size=4 color=”#FF00FF”> Texto coloreado</font>
EJERCICIO SIETE
Titulo de la Ventana : Ejercicio de Formato de Fuentes.

Cree una página donde pruebe todas y cada una de los atributos de la etiqueta
FONT.
Puede utilizar para ello el párrafo de tres líneas del ejercicio cinco.
Observe que puede ir alternando diferentes fuentes y colores a lo largo del párrafo.
Formato del texto

En un documento HTML el texto carece de formato, será el tamaño de la ventana
del visualizador y el tipo de letra elegido por el usuario el que determine la
disposición del texto. No obstante, se dispone de ciertas etiquetas HTML que
permiten controlar el aspecto del texto.
En lo primero que nos deberíamos detener es en el texto normal entendiendo como
tal el que no tiene ninguna característica especial. Para definir un párrafo como
normal no es necesario poner ninguna etiqueta. Lo único que hay que tener en
cuenta, como ya se ha dicho antes, es que al presentar el documento se hace caso
omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el
texto fuente. Por ello cuando se quiera forzar un final de línea es necesario utilizar
dos etiquetas especiales: <P> para marcar un fin de párrafo, y <BR> para un
único retorno de carro. La diferencia entre ambas es que la separación de líneas
que provoca <P> es algo mayor que la de <BR>, para que los párrafos se
distingan bien entre sí. Las dos etiquetas mencionadas se sitúan en el punto en que
queremos poner la separación. Por supuesto, estas dos etiquetas se puede aplicar
donde queramos, no sólo en el texto normal.
EJERCICIO OCHO
Titulo de la Ventana : Ejercicio de Párrafos y saltos de líneas
<BODY>
Este será un texto normal (párrafo 1, línea 1).<BR>
El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2).
<P>Este ya es el segundo párrafo (párrafo 2, línea 1).</P>
</BODY>
Observa la diferencia entre un salto de línea <BR> y una marca de párrafo

<P></P>
Pag. 7 Manual HTML

PREFORMATO
El texto preformateado (etiqueta <PRE>) se aplica cuando queremos que en la
presentación final del documento se respeten los espacios y retornos de carro que
hayamos puesto en el texto fuente.
Además se utilizará un tipo de letra de espaciado fijo, parecido al de una máquina
de escribir, más pequeño que el del texto normal. Este estilo de texto puede ser
adecuado, por ejemplo, para incluir el código fuente de un listado en un lenguaje
de programación.
Entre las etiquetas <PRE> y </PRE> no debemos utilizar etiquetas de formato
(FONT, BR, P, B, U,...)
EJERCICIO NUEVE
Titulo de la Ventana : Ejercicio de Texto Preformateado
<BODY>
<PRE>
Texto preformateado
--------------------
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
--------------------
</PRE>
</BODY>
El Navegador utiliza una fuente de paso fijo como Courier para poder respetar
tabulados, espacios, intros...
SANGRÍA
Para hacer una sangría dentro de nuestro documento, se puede utilizar la etiqueta
<blockquote>Esta etiqueta provoca un retorno de carro al cerrarla
con</blockquote>.
CENTRADO
Para centrar texto (o, en general, cualquier cosa: un gráfico, por ejemplo) se usa la
directiva <center>…</center> Todo lo que halla entre esta etiqueta quedará
centrado.
LÍNEAS SEPARADORAS
Para insertar una línea de separación se utiliza la etiqueta <HR>, que genera una
línea horizontal, cuyo grosor se puede regular con el parámetro SIZE="n", la
anchura con WIDTH="n"), y la alineación con ALIGN="left" ( puede ser left, right,
center).
Pag. 8 Manual HTML

EJERCICIO DIEZ
Titulo de la Ventana: Ejercicio Diez
Cree la página siguiente:
(Fondo de la página de color #FFF8A4 )
(Texto en fuente de tipo Arial, subrayado tamaño 2 y color rojo)

CITA
(El siguiente párrafo debe aparecer sangrado y en color negro)

Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano
Buendía había de recordar aquella tarde remota en que su padre lo llevó a
conocer el hielo.
(salto de línea)
Gabriel García Márquez, Cien años de soledad
(Línea de separación con un ancho de 300 píxels, un alto de 4 píxels y alineada a la

derecha)
(El siguiente párrafo debe aparecer centrado)

Esto es un texto centrado
(No olvide de iniciar el documento con <html> y cerrar las etiquetas al final de su
utilización)
Símbolos especiales
Los símbolos especiales permiten escribir en distintos lenguajes, incluyendo los
acentos, diéresis, etc. Para incluirlos se usan las etiquetas mostradas en la tabla.
Como vemos, todos empiezan por & y acaban en “;”
A continuación se muestra una tabla con el código y entidad de estos símbolos:
Pag. 9 Manual HTML

TABLA DE CARACTERES
Carácter Código Entidad Carácter Código Entidad Carácter Código Entidad

! ! -- " " -- ì ì igrave
# # -- $ $ -- î î icirc
% % -- & & -- ð ð eth
' ' -- ( ( -- ò ò ograve
) ) -- * * -- ô ô ocirc
+ + -- , , -- ö ö ouml
- - -- . . -- ø ø oslash
/ / -- : : -- ú ú uacute
; ; -- < < lt- ü ü uuml
= = -- > > gt þ þ thorn
? ? -- @ @ -- í í iacute
[ [ -- \ \ -- ï ï iuml
] ] -- ^ ^ -- ñ ñ ntilde
_ _ -- ` ` -- ó ó oacute
{ { -- | | -- õ õ otilde
} } -- ~ ~ -- ÷ ÷ divide
nbsp ¡ ¡ iexcl ù ù ugrave
¢ ¢ cent £ £ pound û û ucirc
¤ ¤ curren ¥ ¥ yen ý ý yacute
¦ ¦ brvbar § § sect ÿ ÿ yuml
¨ ¨ uml © © copy
ª ª ordf « « laquo
¬ ¬ not - shy
® ® reg ¯ ¯ macr
° ° deg ± ± plusmn
² ² sup2 ³ ³ sup3
´ ´ acute µ µ micro
¶ ¶ para · · middot
¸ ¸ cedil ¹ ¹ sup1
º º ordm » » raquo
¼ ¼ frac14 ½ ½ frac12
¾ ¾ frac34 ¿ ¿ iquest
À À Agrave Á Á Aacute
Â Â Acirc Ã Ã Atilde
Ä Ä Auml Å Å Aring
Æ Æ AElig Ç Ç Ccedil
È È Egrave É É Eacute
Ê Ê Ecirc Ë Ë Euml
Ì Ì Igrave Í Í Iacute
Î Î Icirc Ï Ï Iuml
Ð Ð ETH Ñ Ñ Ntilde
Ò Ò Ograve Ó Ó Oacute
Ô Ô Ocirc Õ Õ Otilde
Ö Ö Ouml × × times
Ø Ø Oslash Ù Ù Ugrave
Ú Ú Uacute Û Û Ucirc
Ü Ü Uuml Ý Ý Yacute
Þ Þ THORN ß ß szlig
à à agrave á á aacute
â â acirc ã ã atilde
ä ä auml å å aring
æ æ aelig ç ç ccedil
è è egrave é é eacute
Ê ê ecirc ë ë euml
Pag. 10 Manual HTML

EJERCICIO ONCE
Titulo de la Ventana: Ejercicio Símbolos Especiales
Cree una página donde pruebe la utilización de los caracteres especiales de la

tabla anterior, por ejemplo:
- Incluya el símbolo de copyright ©

- Haga que se vea una fórmula del tipo:
x>y
- Haga que se vea el siguiente texto del mismo modo que a continuación:
Entre las palabras de este texto hay
una separación de diez espacios.
Listas
Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde
empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada
caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo
espacios o tabulaciones)
Podemos recurrir a tres tipos distintos de listas, cada una con una presentación
diferente: no numeradas, numeradas y listas de definiciones (glosarios)
Las listas se pueden anidar, es decir, en el lugar donde debería ir uno de los
términos de la lista se pone una nueva lista, que por supuesto no tiene porqué ser
del mismo tipo. Estas son las etiquetas que se utilizan para cada tipo:
<UL>...</UL> Lista sin numerar

<OL>...</OL> Lista numerada
<DIR>...</DIR> Directorio
<MENU>...</MENU> Menú
<LI> Elemento de la lista

<DL>...</DL> Lista de definiciones
<DT> Elemento a definir
<DD> Definición
EJERCICIO DOCE
Titulo de la Ventana: Ejercicio Listas
<B>Esto es una lista no numerada:</B>

<UL>
<LI>Tomates
<LI>Zanahorias
<LI>Puerros
</UL>
Pag. 11 Manual HTML

<B>Esto una lista numerada:</B>
<OL>
<LI>Miguel Induráin
<LI>Tony Rominger
<LI>Eugeni Berzin
</OL>
Un glosario está formado por una serie de parejas de término (marcado con <dt>
al principio de línea) y definición (con <dd>). Por ejemplo, podríamos crear un
pequeño diccionario con los términos perro, gato y pescadilla.
EJERCICIO TRECE
Titulo de la Ventana: Ejercicio Glosario de Términos
<B>Esto es un lista de definición</B>

<dl>
<dt>Perro (<i>n. masc.</i>)
<dd>Animal de cuatro patas que ladra.
<dt>Gato (<i>n. masc.</i>)
<dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro.
<dt>Pescadilla (<i>n. fem.</i>)
<dd>Animal que vive en el mar y está recubierto de escamas.
</dl>
Atributos para las Listas

Básicamente se trata de atributos para controlar el aspecto de las marcas de cada
línea de la lista y los números en las listas ordenadas.
Para la lista desordenada (<UL>), se emplean por defecto marcas circulares en

cada línea, que van cambiando conforme las listas se van anidando. El atributo
TYPE permite especificar que tipo de símbolo queremos emplear en nuestras líneas
independientemente del nivel de anidamiento: TYPE=disc, TYPE=circle o
TYPE=square (disco, círculo o cuadrado).
Las listas ordenadas (<OL>) siempre comienzan en 1 y van subiendo
progresivamente. Se han añadido a este elemento dos atributos: TYPE y START. El
primero permite indicar que letras se deben emplear para cada línea: letras
mayúsculas (TYPE=A), letras minúsculas (TYPE=a), números romanos en
mayúscula (TYPE=I), números romanos en minúscula (TYPE=i) o números
(TYPE=1). El atributo START permite especificar el nivel del primer ítem de la lista,
para cuando queramos que comiencen en un valor distinto al primero. El orden se
da siempre en número, y se presenta según el tipo especificado. Por ejemplo
START=5 se mostraría como 'E', 'e', 'V', 'v', o '5' según el tipo.
Pag. 12 Manual HTML

EJERCICIO CATORCE
Titulo de la Ventana: Ejercicio Listas
Cree una página que muestre el siguiente texto:
Diarios de :
1. ESPAÑA...
a. El Mundo
b. El País
c. La Vanguardia
2. EE.UU.
I. New York Times
II. The Washington Post
3. ARGENTINA
? ? El Clarín
Tablas
Las tablas poseen gran utilidad para la creación de páginas web, no sólo para
crear una distribución ordenada sino también para lograr un mayor control sobre la
distribución espacial de texto e imágenes.
Una tabla en HTML se encierra en la etiquetas <TABLE> y </TABLE> y tiene la
opción de crear un borde que separe los distintos elementos de la tabla con el
atributo "BORDER = N", donde N es el grosor que queremos que posea la línea de
separación.
Dentro de la tabla tienen que existir filas y columnas. En las tablas de HTML,
crearemos una cada fila encerrándola en la etiqueta <TR></TR> y dentro de esta
fila definimos cada columna o dato con <TD></TD>. Si queremos que ciertas
celdas de la tabla sean cabeceras y aparezca resaltadas, podemos delimitar estas
celdas con las etiquetas <TH> y </TH> en lugar de con <TD> y </TD>.
Si queremos añadir un título a la tabla, lo introduciremos entre las etiquetas:
<CAPTION> y </CAPTION>.
Es importante señalar que dentro de una tabla podemos utilizar casi todos los
comandos HTML con lo que nos brinda la posibilidad de insertar imágenes, texto,
otras tablas…
Pag. 13 Manual HTML

EJERCICIO QUINCE
Titulo de la Ventana: Ejercicio Tablas
<TABLE BORDER = 1>

<CAPTION>Título de la Tabla</CAPTION>
<TR>
<TD>Datos de la celda 1</TD>
<TD>Datos de la celda 2</TD>
</TR>
<TR>
<TD> Datos de la celda 3</TD>
<TD> Datos de la celda 4</TD>
</TR>
</TABLE>
Atributos de TABLE
Los atributos de la etiqueta <TABLE> son:
WIDTH=Valor o porcentaje Anchura de la tabla.
HEIGHT =Valor o porcentaje Altura de la tabla.
CELLSPACING=Valor Espacio en píxeles entre celdas.
CELLPADING=Valor Espacio entre el borde de la celda y el dato.
Nota: Tanto en WIDTH como en HEIGHT, podemos indicar un valor en píxeles o

un porcentaje de visualización de nuestro navegador. Para ello, debemos poner el
signo "%" si queremos esto último.
Los atributos de <TD> y <TR> son:

VALIGN=Top|Middle|Bottom Sitúa el texto verticalmente.
ALIGN= Left|Right|Center Sitúa el texto horizontalmente.
WIDTH=Valor o porcentaje Igual que en las tablas.
Resumiendo:
<TABLE>… </TABLE> El delimitador de la tabla.
<TR> … </TR> Delimitador de las filas
<TD>… </TD> Delimitador de las celdas
<TH>… </TH> Celda con título
<CAPTION>… </CAPTION> Título de la tabla
WIDTH=Valor o porcentaje Anchura
HEIGHT =Valor o porcentaje Altura
CELLSPACING=Valor Espacio en píxeles entre celdas
CELLPADING=Valor Espacio entre el marco y el dato
VALIGN=Top|Middle|Bottom Sitúa el texto verticalmente
ALIGN= Left|Right|Center Sitúa el texto horizontalmente
Pag. 14 Manual HTML

EJERCICIO DIECISEIS
Titulo de la Ventana: Ejercicio Tablas Avanzado
Cree una página web que muestre el siguiente resultado:
EJEMPLO AVANZADO
Esto intenta ser un ejemplo Para ello se ha utilizado
de las posibilidades de las unas tablas dentro de
tablas simulando lo que otras, así como nuevos
sería las columnas de un atributos como WIDTH,
Aquí periódico HEIGHT, ALIGN..
iría
una
imagen
Aquí iría una imagen Aquí iría una imagen
También se muestra la posibilidad de añadir imágenes en

cualquier celda de la tabla
Enlaces entre páginas (Links y Anchors)

Los "anchors" (anclas en castellano) son la esencia del HTML. Es el elemento que
indica el inicio y/o destino de un enlace de hipertexto. Los enlaces son definidos
por la etiqueta <A… > … </A>.
Aceptan muchos atributos, pero siempre tiene que estar acompañado o bien por
NAME o bien por HREF.
Los atributos son:
HREF=documento Si este atributo está presente, el texto o imagen entre la <A..> y
</A> se convierte en un hipertexto. Si este hipertexto es seleccionado por los
lectores, se les llevará al documento que indique el valor del atributo. Este
documento puede localizarse en cualquier servidor accesible de Internet, pero
siempre siguiendo unos ciertos protocolos como se verá a continuación:
<A HREF="http://..."> Realiza un enlace con otro documento en otro servidor de
World Wide Web.
<A HREF="ftp://..."> Realiza una conexión anónima con un servidor de ficheros o
ftp.
<A HREF="mailto:..."> Activar este enlace mostrará la ventana de correo del
navegador permitiendo al usuario mandar mensajes al autor del documento o
cualquiera que sea el destinatario indicado.
<A HREF="news:..."> Realiza un enlace con un grupo de noticias.
Pag. 15 Manual HTML

Si no indicamos ningún de los protocolos anteriores, el navegador buscará en la
misma localización (directorio del servidor) en la que se encuentra el documento
original.
EJERCICIO DIECISIETE
Para este ejercicio debemos tener un archivo zipado al que llamamos ejercicios.zip
que contenga todos los documentos de ejercicios realizados (Usar Winzip)
Cree una página web que muestre el siguiente resultado:
Titulo de la Ventana: Ejercicio Enlace
Ejercicios del curso:

(Cada línea debe ser un enlace con el documento html correspondiente)
? ? Ejercicio 1
? ? Ejercicio 2
.
.
.
? ? Ejercicio 16
(Enlace que debe remitir a la página web www.amasl.com)

Ir a la página principal de Grupo A+L
(Enlace que debe traer al lector el archivo ejercicios.zip)

Download Ejercicios
(Enlace que debe abrir al lector la ventana de redacción de un email con destino a
tu dirección de correo, si no tienes usa amasl@amasl.com)
Contactar
Recuerde que BODY tiene unos atributos para definir los colores de los enlaces
Guarde el archivo como indice.html
EJERCICIO DIECIOCHO
(en cada uno de los documentos ejercicios.html añadir el enlace siguiente que
debe remitir al lector a indice)
Volver al índice
Pag. 16 Manual HTML

ENLACES INTERDOCUMENTALES
Si incluimos el signo "#", podemos hacer referencias dentro de un mismo

documento gracias al atributo NAME.
Si está presente, sirve como referencia para hacer un enlace dentro de un mismo
documento, por lo que debe ser un nombre identificador único para cada página.
Colocaremos en el punto de destino la siguiente etiqueta para definir la ancla

destino:
<A NAME=”NombreAncla”>
Y en los enlaces usaremos el nombre dado al ancla precedido por un signo de #

para indicar su destino:
<A HREF= “#NombreAncla”>Pulsar aquí para ir al ancla</A>
EJERCICIO DIECINUEVE
Abra el archivo anclas.html con su editor de ASCII y conviértalo en una página web
añadiendo los TAGS de HTML necesarios. Guárdelo con el nombre de
ejercicio19.html
Titulo de la Ventana: Ejercicio Anclas
Añada el siguiente índice al principio de la página:
El señor de los anillos

- Introducción
- Los Personajes
- Frodo
- Gandalf
- Bilbo
- Sauron
- Saruman
- Gollum
- Galadriel
- Aragorn
Coloque las anclas necesarias y convierta cada línea del índice en un enlace que
lleve al ancla correspondiente dentro de ese documento.
Pag. 17 Manual HTML

IMAGENES
En un documento web podemos incluir elementos multimedia (vídeo, sonido,
imágenes,...)
Para colocar una imagen en un documento debemos utilizar la etiqueta <IMG>
Estas imágenes son archivos externos al archivo html. Dichos archivos (los de las
imágenes) deben encontrarse en Internet y serán descargados en la máquina cliente
que esté visualizando la página web.
El lugar de la página donde aparecerán será donde hayamos incorporado el tag.

Para indicar al navegador que archivo es el que debe mostrar, debemos utilizar el
atributo SRC del tag indicando la ruta y el nombre del archivo:
<IMG SRC = “nombrearchivo.extension”>
Para una correcta administración de los archivos de un site crearemos una carpeta
imágenes en el directorio donde grabemos los archivos html, para guardar las
imágenes.
<IMG SRC = “NombreCarpeta/nombrearchivo.extension”>
Ejemplo:
<IMG SRC = “imagenes/imagen001.gif”>
Los formatos que permiten los navegadores son: GIF, JPG (JPEG) y PNG. Son
formatos de compresión, por lo que los archivos serán de menor tamaño.
Se aconseja utilizar imágenes de poco peso. Existen en el mercado programas para
la optimización de imágenes que reducen considerablemente el tamaño de los
archivos sin variar la calidad.
Las diferencias entre los formatos viene dada por la paleta de colores utilizada en
su creación:
GIF: de 0 a 256 colores
JPG (JPEG): de 256 a 16’ 7 millones de colores
PNG: de 16’ 7 a 65.000
La resolución estándar de Internet es de 72 dpi.
El formato GIF permite Gifs animados y Gifs transparentes
Imágenes como fondo de sus páginas

Otra forma de usar las imágenes en sus páginas web es la de usarlas como fondo.
El navegador coloca en modo de mosaico la imagen utilizada.
La colocación de fondos gráficos se hace mediante un atributo de BODY

BACKGROUND = “ruta/nombre_imagen.extensión”
Pag. 18 Manual HTML

EJERCICIO VEINTE
Abra con su editor de ASCII los archivos de ejercicios y añádale fondos gráficos
con imágenes de tipo fondo a su gusto. Aproveche para añadir los enlaces con los
nuevos archivos de ejercicios creados.
Abra con su editor de ASCII el archivo ejercicio16.html y añada imágenes en el

lugar correspondiente.
Otros atributos de IMG

LOWSRC = ruta/archivo Primera imagen que se carga. Es apto sólo para
Explorer y Netscape a partir de la versión 4 (en el caso de Netscape debemos
utilizar dos imágenes del mismo tamaño físico.
ALT = “texto” Texto alternativo a la imagen
WIDTH Ancho (En píxeles o %).
HEIGHT Alto (En píxeles o %).
BORDER Indica el grosor del borde del recuadro (0 = sin borde)
ALIGN Alineación de la imagen. Permite: left y rigth para la imagen.
y top, middle, bottom para la alineación del texto que haya antes
o después de la imagen
VSPACE
y HSPACE Crea un medianil. Espacio vertical o horizontal entre el texto y la
imagen. Sólo para imágenes flotantes. Especificar en píxeles.
EJERCICIO VEINTIUNO
Coloque en todos los archivos de ejercicios un titular que indique el contenido del
documento y a continuación una imagen del tipo barra como separador del titular
y el texto.
Elimine de todos los archivos de ejercicios los enlaces creados anteriormente para
volver al índice y coloque en su lugar una imagen del tipo flecha.
Convierta esa imagen en un vínculo cuyo destino sea el principio del propio
documento.
Coloque texto alternativo en todas las imágenes de sus páginas, esto sirve para los
navegadores que no ven gráficos y para los casos en que la imagen no sea
descargada del servidor. Pruebe de apuntar con el mouse las imágenes con texto
alternativo para ver cómo lo utiliza su navegador.
Pag. 19 Manual HTML

FRAMES
Los frames o marcos extienden la flexibilidad de presentación de las páginas web
permitiendo que el área visible del navegador se divida en más de una sub-región.
Cada sub-región o marco tiene diversas propiedades:
Puede cargar un documento, independientemente de los demás marcos.
Se le puede dotar de un NOMBRE, permitiendo que este marco sea el objetivo de
otros URLs
Se redimensiona dinámicamente en respuesta a los cambios de tamaño del
navegador, y permite elegir si el usuario puede cambiar de tamaño.
Un documento con frames

Un documento con frames tiene una estructura básica muy parecida a la de un
documento HTML cualquiera, excepto que la etiqueta <BODY> es reemplazada
por un contenedor de marcos FRAMESET el cual describe los sub-documentos, o
frames, que se van a mostrar. Su principal atributo son las columnas
COLS="xx,yy,..,nn" y las filas ROWS="xx,yy,..,nn" donde xx,yy,..,nn indican el
tamaño de cada sub-ventana, en píxels o porcentaje. También se puede usar el
comodín o asterisco "*" que le indica al navegador que ese marco ocupará todo lo
restante de la zona visualizable.
Resumen de parámetros de FRAMESET

ROWS Y COLS = num o % (Separados por comas. * = COMODIN)
FRAMESPACING=pixeles ? Ancho del borde para IE
Para quitar el borde:

Para Netscape:
BORDER="false"
para IE: (se deben poner ambos)

FRAMEBORDER = NO
FRAMESPACING="0"
Dentro del FRAMESET, debemos definir cada marco con la etiqueta <FRAME>
indicándole con el atributo SRC="url" la dirección del documento al que deseamos
apuntar, además de dándole un nombre mediante NAME=nombre_de_la_ventana.
Los visores que no soportan la característica de subventanas, no mostrarán nada de

lo indicado con estas directivas. Todo los indicado entre esta directiva será lo que
muestren los visores sin capacidad para visualizar Frames.
<NOFRAMES>
Texto para los navegadores sin frames
</NOFRAMES>
Pag. 20 Manual HTML

EJERCICIO VEINTIDOS
<HTML>
<HEAD>
<TITLE>
PRUEBA DE FRAMES
</TITLE>
</HEAD>
<FRAMESET ROWS="150,150,* ">

<FRAME SCROLLING="yes" NAME="uno" SRC="ejercicio1.html">
<FRAME SCROLLING="yes" NAME="dos" SRC="ejercicio2.html">
<FRAME SCROLLING="no" NAME="tres" NORESIZE SRC="ejercicio3.html">
</FRAMESET>
<NOFRAMES>
Su navegador no soporta frames.
Haga clic <A HREF.=”indice.html”>aquí </A>para ver una versión sin
divisiones.
</NOFRAMES>
</HTML>
Como podemos observar, en cada recuadro o frame aparece una página html
distinta con código propio que el navegador debe cargar de un servidor (no hace
falta que sea el mismo).
Resumen de atributos de FRAME

name = "nombre" ? Indica el nombre por el que nos referiremos a esa
subventana.
src = "URL" ? La ventana mostrará en principio el contenido del documento HTML
que se indique.
marginwidth = num. ? Indica el margen izquierdo y derecho de la subventana en
puntos.
marginheight = num ? Indica el margen superior e inferior de la subventana en
puntos.
scrolling = "yes / no / auto" ? Indica si se aplica una barra de desplazamiento a la
subventana
noresize ? Si se indica este parámetro, el usuario no podrá "redimensionar" las
subventanas con el visor
bordercolor = color ? color del borde
Pag. 21 Manual HTML

EJERCICIO VEINTITRES
Crear una nueva página que contenga una imagen y un titular semejando una
página corporativa de empresa, guardarla como cabecera.html.
Crear una página de frames que divida el navegador en dos sub-regiones

horizontales, la superior de 60 píxeles y la otra del resto. Ambas sin posibilidad de
redimensión por el usuario.
La superior debe mostrar el documento cabecera.html

La inferior estará dividida en dos sub-regiones verticales, una de un 30% de la
ventana y la otra del restante. Ambas sin posibilidad de redimensión por el usuario.
La región de la izquierda debe mostrar el archivo indice.hml y la de la derecha el

archivo ejercicio1.html
Guardar con el nombre de index.html
ENLACES EN FRAMES
Al clicar sobre los enlaces del índice en el ejercicio anterior se observa que el
navegador muestra el documento indicado en toda la ventana, perdiendo la
página de frames.
El control para mostrar las páginas en una venta u otra de una página de frames se
establece con el atributo TARGET de la etiqueta <A REF.=”“>
TARGET = "nombre_ventana" ? Muestra el enlace en la ventana cuyo nombre se

indica.
TARGET = "_blank" ? Abre una nueva copia del visor y muestra el enlace en ella.
TARGET = "_self" ? Se muestra el enlace en la subventana activa.
TARGET = "_top" ? Suprime todas las subventanas de la pantalla y muestra el
enlace a pantalla completa.
TARGET = "_parent" ? El enlace se muestra en el <FRAMESET> definido
anteriormente al actual. Si no hay ningún <FRAMESET> actúa como el top
EJERCICIO VEINTICUATRO
Modificar la página índice para que los enlaces que contiene abran:
- Los ejercicios deben mostrarse en la sub-división derecha de la ventana

- El enlace con la web de GRUPO A+L debe abrirse en una nueva ventana.
Pag. 22 Manual HTML

FORMULARIOS
Los formularios son usados frecuentemente en las páginas Web para recoger y
proveer información dinámica. Algunos ejemplos son formularios que dan
información de una base de datos según la petición que se realice, formularios de
registro para asociarse a un grupo o apuntarse a eventos, y formularios que
ayudan a los usuarios a dar su opinión sobre algo.
Funcionan de este modo:
? ? El usuario rellena el formulario.
? ? La información llega al servidor web.
? ? El servidor hace funcionar un programa determinado.
? ? El servidor devuelve la información.
Un formulario contiene elementos como cajas de texto, combos, botones, casillas

de verificación, botones de opción, etc. y cuya directiva básica es <INPUT>
Para colocar estos elementos en el documento HTML debemos primero definir el
área de formulario mediante las directivas <FORM></FORM>
En el interior del área de formulario se colocan los elementos de formulario que el
usuario verá en la página web. Una vez el usuario rellena los campos que se le
piden, elige las opciones de los combos, etc debe pulsar sobre el botón “Enviar”,
todos los valores que ha escrito son enviados al servidor destino. Para definir dónde
y cómo van a ser enviados los datos, la directiva <FORM> tiene los siguientes
parámetros:
METHOD = ”POST”/”GET”
Sirve para indicar el modo en que se transfieren las variables a su destino.
Podemos enviarlas mediante el método "POST" que es el que utilizaríamos para
enviarlas por correo electrónico o el método “GET”que usaremos cuando el
destino sea un programa.
ACTION = ” “
Sirve para indicar la url destino de los datos.
Por ejemplo: <FORM ACTION="http://www.servidor.com/cgi-bin/progr.exe”>
ENCTYPE = “tipo de MIME”>
Tipo de archivo de Internet que se transmite: “text/plain”, “multimedia”...
CAMPOS BÁSICOS DE UN FORMULARIO

Los campos se incluyen en el formulario mediante la directiva <INPUT> que tiene
diferentes parámetros
TYPE indica que tipo de campo es:
<INPUT TYPE =”TEXT”> Campo de texto
<INPUT TYPE =”PASSWORD”> Password (sustituye lo introducido por
asteriscos)
<INPUT TYPE =”SUBMIT”> Botón para el envío de datos
<INPUT TYPE =”RESET”> Botón para limpiar la pantalla
<INPUT TYPE =”BUTTON”> Botón que podemos programar.
NAME= para dar un nombre a la variable
MAXLENGTH= Número máximo de caracteres que permite introducir
SIZE= Número de caracteres que muestra en pantalla
VALUE= Valor por defecto. En el caso de los botones es el texto que muestran.
Pag. 23 Manual HTML

EJERCICIO VEINTICINCO
Crea una nueva página web donde se vea el siguiente formulario.
Tu nombre: caja de texto de tamaño 20

Tu dirección de correo: caja de texto de tamaño 20
Tu contraseña: caja de texto tipo contraseña de tamaño 8
Guarda y prueba en el navegador como se visualiza este documento.
Cambia los parámetros de las cajas de texto para cambiar el tamaño y el máximo
de caracteres que permiten.
OTROS CAMPOS DE FORMULARIO

Aparte de los ya vistos exiten más tipos de INPUTs por ejemplo:
TYPE =”CHECKBOX”Para las casillas de verificación
TYPE =”RADIO”Para los botones de opción. Nota importante: para que varios
botones de opción sean excluyentes entre sí todos ellos deben tener el mismo
nombre de variable.
Para incorporar listas de selección tenemos una directiva nueva dentro de los
formularios, el <SELECT> Las diferentes opciones de la lista se indican con la
directiva <OPTION> Después de todas las opciones debemos cerrar el select
Ejemplo:
<SELECT NAME="Lista">
<OPTION >Opción 1
<OPTION>Opción 2
<OPTION>Opción 3
<OPTION>Opción 4
<OPTION SELECTED>Opción por defecto
</SELECT>
<TEXTAREA></TEXTAREA> es la directiva para las áreas de texto.
Sus parámetros son:

COLS Numero de columnas de texto visibles
ROWS Numero de filas de texto visibles
WRAP Define como se recibe el texto. VIRTUAL envía el texto todo seguido y
PHYSICAL lo envía separado en líneas físicas
El resultado es:
Pag. 24 Manual HTML

EJERCICIO VEINTISEIS
Añada al formulario anterior
Navegador que utiliza:

lista de selección con 4 opciones con nombres de navegadores
Tus comentarios:
Un área de texto de 10 filas y 40 columnas
Un botón para enviar los datos y otro para limpiar pantalla
Cambia las etiquetas de los botones por “Enviar datos”y “Borrar datos”
EJERCICIO VEINTISIETE
Haga una página web con un formulario igual al que se ve en el archivo PDF
formulario.pdf
META TAGS
Son etiquetas para información sobre la página. Son específicas del HEAD.
Tienen dos parámetros: NAME y CONTENT:
Tipos de Metas:
<META NAME = "Author" CONTENT = "Jose Javier Domínguez">
Indica al visor el nombre del autor de la página
<META NAME = "Description" CONTENT = "Mi pagina personal, Música y Películas">

Indica el contenido de la página.
<META NAME="keywords" CONTENT="holistic, massage, reflexology, shiatsu,

manipulation, stress, stressbuster, relax, relaxation, ease, pain reduction, pain ">
Keywords=Palabras clave. Sirven para las búsquedas por clave de los buscadores.
<META NAME="generator" CONTENT="Dreamweaver 4.0 Macromedia”>

Indicamos el software utilizado para la creación de la página.
<META HTTP-EQUIV= "refresh" CONTENT = "15;URL=http://www.amasl.com">

Pasados 15 segundos se accederá automáticamente a la Web de Grupo A+L.
<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=”iso-8859-1">

Definimos el tipo de contenido: text/html y los caracteres especiales utilizados, en
este caso los occidentales (iso)
Pag. 25 Manual HTML

HMTL

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HMTL

Caricato da

Copyright:

Formati disponibili

El lenguaje HTML

Pag. 1 Manual HTML

Pag. 2 Manual HTML

La cabecera sirve para definir diversos valores válidos en todo el documento.

Grabar como ejercicio1.html y abrir el archivo grabado desde el Navegador

Pag. 3 Manual HTML

Grabar como ejercicio2.html y abrir el archivo grabado desde el Navegador

En ambos casos (ejercicio1 y ejercicio2), a la hora de la verdad lo que se ve es:

Cambiar en ejercicio2.html los atributos de BODY

<BODY BGCOLOR="green" TEXT="#550010">

Grabar como ejercicio3.html y abrir el archivo grabado desde el Navegador

Pag. 4 Manual HTML

Titulo de la ventana: Ejercicio Comentarios

</BODY> Fin del cuerpo

Pag. 5 Manual HTML

Hacer una página que muestre en el navegador lo siguiente:

Titulo de la Ventana : Ejercicio de Estilos.

Pag. 6 Manual HTML

Ejemplo: <font size=4 color=”#FF00FF”> Texto coloreado</font>

Titulo de la Ventana : Ejercicio de Formato de Fuentes.

Formato del texto

Titulo de la Ventana : Ejercicio de Párrafos y saltos de líneas

Observa la diferencia entre un salto de línea <BR> y una marca de párrafo

Pag. 7 Manual HTML

Titulo de la Ventana : Ejercicio de Texto Preformateado

Pag. 8 Manual HTML

Titulo de la Ventana: Ejercicio Diez

Cree la página siguiente:

(Fondo de la página de color #FFF8A4 )

(Texto en fuente de tipo Arial, subrayado tamaño 2 y color rojo)

(El siguiente párrafo debe aparecer sangrado y en color negro)

(Línea de separación con un ancho de 300 píxels, un alto de 4 píxels y alineada a la

(El siguiente párrafo debe aparecer centrado)

A continuación se muestra una tabla con el código y entidad de estos símbolos:

Pag. 9 Manual HTML

Carácter Código Entidad Carácter Código Entidad Carácter Código Entidad

Pag. 10 Manual HTML

Titulo de la Ventana: Ejercicio Símbolos Especiales

Cree una página donde pruebe la utilización de los caracteres especiales de la

- Incluya el símbolo de copyright ©

<UL>...</UL> Lista sin numerar

<LI> Elemento de la lista

Titulo de la Ventana: Ejercicio Listas

<B>Esto es una lista no numerada:</B>

Pag. 11 Manual HTML

Titulo de la Ventana: Ejercicio Glosario de Términos

<B>Esto es un lista de definición</B>

Atributos para las Listas

Para la lista desordenada (<UL>), se emplean por defecto marcas circulares en

Pag. 12 Manual HTML

Titulo de la Ventana: Ejercicio Listas

Cree una página que muestre el siguiente texto:

Pag. 13 Manual HTML

Titulo de la Ventana: Ejercicio Tablas

<TABLE BORDER = 1>

Nota: Tanto en WIDTH como en HEIGHT, podemos indicar un valor en píxeles o

Los atributos de <TD> y <TR> son:

Pag. 14 Manual HTML

Titulo de la Ventana: Ejercicio Tablas Avanzado

Cree una página web que muestre el siguiente resultado:

También se muestra la posibilidad de añadir imágenes en

Enlaces entre páginas (Links y Anchors)

Pag. 15 Manual HTML

Cree una página web que muestre el siguiente resultado: