 |
 |
 |
 |
||
|
| Home / Docencia / I. Telecomunicación / Sistemas de Información |
  |
|
|
|
|
Tutorial de HTML 4.0Fecha: 6 de octubre de 2005
|
|
|
| Este documento es un tutorial del lenguaje HTML V4.0. Esta diseñado para aprender desde un nivel básico, sin embargo también puede ser utilizado por aquellas personas que tengan ya conocimientos de HTML y deseen profundizar en alguno de los temas que se presentan. Los ejercicios que componen el tutorial han sido probados con Netscape v4, pero deberían funcionar con cualquier herramienta que interprete correctamente HTML V4.0.
|
|||
|
|||
|
|
Tarea:
Crear un documento básico en HTML y visualizarlo en el navegador
Pasos:
<html>
<head>
<title>Mi página de HTML</title>
</head>
<body>
<H1>Esta es mi página de HTML</H1>
Contiene una línea de texto.
</body>
</html>
Debería verse:
Observaciones:
|
|||
|
|||
|
|
Tarea:
Añadir texto y observar el tratamiento de espacios en blanco
Pasos:
Esto demuestra cómo se usan los espacios en blanco (espacio, tabuladores y fines de línea) son agrupados como un único espacio en blanco en HTML. Puede que no se vea como se esperaba. Debería verse:
Observaciones:
Intenta estos cambios:
|
|||
|
|
|||
|
|
Tarea:
Conseguir que el navegador muestre el texto formateándolo tal y
como aparece en el ejemplo 2.
Pasos:
Esto demuestra cómo se usan los espacios en blanco<P> (espacio, tabuladores y fines de línea)<P> son agrupados como un único espacio en blanco en HTML.<BR> Puede que no se vea como se esperaba. Debería verse:
Observaciones:
Intenta estos cambios:
Esto demuestra cómo se usan los espacios en blanco<P> (espacio, tabuladores y fines de línea)<P> son agrupados como un único espacio en blanco en HTML.<BR>Puede que no se vea como se esperaba. |
|||
|
|
|||
|
|
Tarea:
El texto en el navegador se muestra de una forma bastante
parecida a la forma en la que se introdujo en el ejercicio 2, excepto que
la línea que comienza "(espacio, ..." no está indentada
(sangrada). Esto es un problema común en HTML. Puede ser
muy difícil conseguir que el texto se posicione horizontalmente
como se desea. Hay unas cuantas etiquetas que ayudan a lograr el efecto
deseado:
Pasos:
Esto demuestra cómo se usan los espacios en blanco<BLOCKQUOTE> (espacio, tabuladores y fines de línea) </BLOCKQUOTE> son agrupados como un único espacio en blanco en HTML.<BR> Puede que no se vea como se esperaba. Debería verse:
Observaciones:
Intenta estos cambios:
|
|||
|
|
|||
|
Tarea:
Ahora se añadirá una nueva sección con su propio titular.
Estará separada de la anterior con una línea horizontal y servirá
para mostrar algunos ejemplos de alteración de tipos de letra.
Pasos:
<HR> <h2>Una nueva sección con tipos de letra</h2> Algunos tipos de letra que se pueden usar son:<P> <b>Texto en negrita</b>,<BR> <i>Texto en itálica</i>,<BR> <tt>Texto en TeleType (fixed-width font)</tt>,<BR> <strong>Texto reforzado</strong>,<BR> <em>Texto con énfasis</em>.<P> Se pueden combinar los anteriores de forma que se tenga <b>negritas e <i>itálicas y <tt>texto fijo</tt></i></b> todo junto.<P> Asegúrese de <b>cerrar las etiquetas <i>en el mismo orden</i> en el que han sido abiertas</i>, (no como en este ejemplo). Debería verse:
Observaciones:
Intenta estos cambios:
|
|||
|
|
|||
|
Tarea:
Las listas sirven para representar enumeraciones o puntos. Hay tres tipos
de listas en HTML:
Pasos:
<HR> <h3>Una sección de listas</h3> Los tres tipos de listas son:<P> Una lista numerada que contiene <OL> <LI>Un primer elemento <LI>Un segundo elemento </OL> Y todos los que potencialmente se le quieran añadir <P> Una lista no numerada que contiene <UL> <LI>Un primer punto <LI>Un segundo punto </UL> Una lista de definiciones que contiene <DL> <DT>Un elemento <DD>... y su definición. <DT>Otro elemento <DD>Otra definición de elemento <DD>¡Con quizá otra definición! </DL> Otras cosas que se pueden hacer con las listas son: <OL> Tener texto al principio de una lista que no es un elemento pero que aparece indentado. <LI>Usar ambas etiquetas<BR> de ruptura de línea y<P> etiquetas de párrafos. <LI>Se pueden anidar listas como esta: <UL> <LI>También se pueden usar los <i>estilos <b>de texto</b></i> <LI>e incluso las <HR>líneas horizontales </UL> <LI>Pero todo puede no servir de nada si no se tiene cuidado. </LI> ¿Qué está mal? Debería verse:
Observaciones:
|
|||
|
|
|||
|
Tarea:
Ahora se agregarán enlaces de hipertexto (hiperenlaces) al
documento HTML. Estos enlaces proporcionan una forma para moverse de un
documento a otro pulsando sobre una porción del texto. Generalmente
estas porciones del texto se muestran subrayadas y en un color distinto
al resto del texto.
Para agregar un enlace de hipertexto se utiliza la etiqueta
<A>. Cualquier texto que se encuentre entre las etiquetas
<A> y </A> será el texto sobre el que se
pueda pulsar para cambiar de página. Ahora el problema es cómo
indicar a dónde se quiere saltar. Esto se define mediante un
argumento adicional a la etiqueta <A>. Este argumento,
llamado atributo, aparece dentro de la etiqueta, después
del nombre de la etiqueta y antes del carácter que indica el final de
ella (<A atributo>). Existe una gran cantidad de
atributos que se aplican a las diferentes etiquetas; en este caso el
atributo que se usa es HREF y el valor que se le asigna es un
URL entre comillas. De esta forma, un hiperenlace se ve así:
<A HREF="URL_DESTINO">Texto sobre el que se pulsa</A> Pasos:
<A
HREF="http://www.elpais.es/">Esto te lleva a la página principal
de El País Digital</A>. Debería verse:
Observaciones:
Intenta estos cambios:
|
|||
|
|
|||
|
Tarea: Una vez que se han insertado hiperenlaces en
un documento HTML, se mostratá con mayor detalle la forma en que se pueden
usar estas direcciones.
A la dirección que se utilizó en el ejercicio anterior http://www.elpais.es/ se le llama URL absoluta. Esto es porque no importa cúal sea la página que contiene el código en HTML, siempre se llega al mismo sitio al pulsar sobre el enlace. Se puede decir que ese enlace es absoluto porque contiene la parte http:// del URL. Existe otro tipo de URL que se conoce como URL relativo, al usar este tipo de enlaces se determina la página a la que se quiere llegar en base a la página que contiene el código <A HREF=...>. Para tener una idea más clara del funcionamiento de estos enlaces se deben examinar con cuidado los ejemplos siguientes. Los URL relativos son muy útiles si se quiere llevar las páginas de un lugar a otro. Por ejemplo, si se han diseñado las páginas usando enlaces relativos (excepto para los enlaces a las páginas de otras personas), será posible colocar todo el conjunto de páginas en un nuevo servidor con sus enlaces funcionando correctamente. Esto no sería posible si se utilizan sólamente enlaces absolutos, al pulsar sobre un enlace el navegador buscaría la página en el lugar en el que se encontraba antes y no en el servidor actual. Pasos:
Debería verse:
Observaciones:
Intenta estos cambios:
|
|||
|
|
|||
|
Tarea:
Además de crear enlaces para ir de una página HTML a otra, también es posible
crear enlaces para ir de un lugar a otro del mismo documento, de modo similar
a como el índice de este documento te lleva directamente a cada una de
las secciones sin necesidad de utilizar el scroll del navegador. A estos enlaces
se les llama enlaces internos.
Para usar un enlace interno se necesita un hiperenlace de la forma: <A HREF="#primeraseccion">Va directamente a la primera sección de esta página</A> Al pulsar sobre este enlace, el navegador se colocará en la sección llamada primeraseccion del documento HTML. Para que el navegador sepa en que lugar del documento está dicha sección, se debe colocar explícitamente una señal. Esto se logra mediante la siguiente etiqueta: <A NAME="primeraseccion">Este es el inicio de la primera sección</A>. Date cuenta de que se ha usado un nuevo atributo de la etiqueta <A>, el atributo NAME. En el enlace, se ha utilizado el símbolo # antes de primeraseccion, esto le indica al navegador que el lugar al que tiene que ir se encuentra en el mismo documento, en vez de cargar una página con URL primeraseccion. Pasos:
<h1>Contenido de este documento</H1> <UL> <LI><A HREF="#demopage">Mi página de HTML</A> <LI><A HREF="#textstyles">Tipos de letra</A> <LI><A HREF="#lists">Listas</A> <LI><A HREF="#hyperlinks">Hiperenlaces</A> </UL> Debería verse:
Observaciones:
Intenta estos cambios:
|
|||
|
|
|||
|
Tarea:
En este ejercicio se agregarán imágenes a los documentos. Para hacerlo, se
utilizará la etiqueta <IMG> con uno o más atributos. La forma
básica de emplear esta etiqueta es:
<IMG SRC="URL">en donde el URL indica cual es la imagen que se desea insertar; esta imagen puede estar en cualquiera de los formatos que reconocen los navegadores. Existen otros atributos que no son obligatorios pero es recomendable usarlos dentro de las etiquetas <IMG>. Estos atributos son alt (que indica el texto que se observa cuando el navegador no puede mostrar la imagen) y los atributos que modifican el tamaño de la imagen, width y height. El siguiente es un ejemplo completo: <IMG SRC="cat.gif" alt="Un lindo gatito" height=100 width=200> Pasos:
Debería verse:
Observaciones:
Intenta estos cambios:
|
|||
|
|
|||
|
Tarea:
En esta sección se trabajará con algunas de las etiquetas más
útiles, como <CENTER>, <FONT>,
<BODY> y <PRE>.
Pasos:
Debería verse:
Observaciones:
Intenta estos cambios:
|
|||
|
|
|||
|
Tarea:
En este ejercicio se estudiará como crear tablas utilizando la etiqueta
<table>. Esta etiqueta tiene asociadas otras
etiquetas, entre las cuales las más importantes son la etiqueta
<tr>, para la definición de las
filas de la tabla (de table row), y la
etiqueta <td>, para la definición de las celdas del cuerpo de la
tabla (que contienen los datos de la tabla, de table
data). También existe la etiqueta <th>, para la
definición de las celdas de la cabecera de la tabla (de
table header)
Dentro de las etiquetas <table>...</table>, puede haber múltiples pares de etiquetas <tr>...</tr>, donde cada par define una fila. Asimismo, dentro de cada fila puede haber múltiples pares de etiquetas <td>...</td>, donde cada par define una celda. El código entre las etiquetas <td> y </td>, o entre <th> y </th>, se presenta en formato de tabla. Todo lo que no está dentro de un par <td> y </td> o dentro de un par <th> y </th> se presenta fuera de la tabla. Pasos:
Debería verse:
Observaciones:
Intenta estos cambios:
Observaciones sobre los atributos de <tr> y <td>:
Intenta estos cambios adicionales:
Observaciones sobre atributos "desaconsejados" de <tr> y <td>:
Intenta estos cambios adicionales:
Más observaciones:
|
|||||
|
|
|||||
|
Tarea:
Los formularios generan en la pantalla cuadros de diálogo con el
lector, permitiendo así la interacción con el usuario (envío de
información personalizada en función de los datos que proporciona)
para consultas de bases de datos, solicitudes de documentación etc.
Como en un formulario en papel, se podrá disponer de zonas para la introducción de texto, casillas de verificación, listas de selección, etc. que se identificarán con un nombre simbólico. Una vez cumplimentado el formulario, el usuario lo enviará al servidor por uno de los dos modos posibles. La respuesta automática al envío del usuario exige la ejecución de un programa en el servidor receptor que utiliza los datos del formulario como entrada. Existen dos modos de recibir los datos de entrada correspondientes a los dos modos de envío del formulario. El procesamiento del formulario y el envío consiguiente de una respuesta tiene lugar mediante el mecanismo denominado CGI (Common Gateway Interface). Aquí no se trabajará con este mecanismo, solo con las etiquetas del formulario. Además de los CGI existen otros mecanismos para procesar formularios como los servlets. Para la creación de formularios se utilizarán las etiquetas siguientes:
Pasos:
Debería verse:
Observaciones:
Intenta estos cambios:
|
|||
|
|
|||
|
Tarea:
En este ejercicio se estudiará cómo definir un color transparente
dentro de una imagen GIF, de forma que en la parte de la imagen
que contenía ese color se vea el fondo definido para la página
HTML. Para ello se utilizará la herramienta lview
 que
puede descargarse en la dirección http://www.uca.es/taller-html/softw-html.html.
Esta herramienta funciona en el sistema Windows'95, para efectuar una
tarea similar en algún otro sistema operativo se necesitará una
herramienta que tenga una función equivalente.
Para hacer este ejercicio puedes descargar las imágenes directamente de esta página pinchando sobre ellas con el botón derecho del ratón y seleccionando la opción salvar enlace como. Pasos:
 Debería verse:
Observaciones:
|
|||
|
|
|||
|
Tarea:
Un GIF animado consiste en un único fichero GIF que incluye varias
imágenes que se van mostrando de forma sucesiva, formando de esta
manera una animación. En esta sección se aprenderá
a manejar una herramienta para la creación de gifs animados, y se
creará un gif como este:
Pasos:
También se puede indicar si se desea que la imagen tenga un fondo transparente. 
Debería verse:
Observaciones:
 para que cada imagen se sustituya por el fondo antes de dibujar la siguiente, de no hacerlo las imágenes se superpondrían unas sobre otras y no se daría el efecto de animación. Intenta estos cambios:
|
|||
|
|
|||
|
Tarea:
En esta sección se explica cómo crear imágenes sensibles o "mapas". En estas imágenes
se definen diversas zonas que activan distintos hiperenlaces, de modo que al pulsar
con el cursor sobre una de estas zonas se active el hiperenlace que define. En
este ejemplo se creará una imagen sensible a partir de un gráfico que representa
tres botones, de modo que al pulsar sobre cada uno de los botones aparezca una
página que ponga "He pulsado el botón 1", "he pulsado el botón 2" o "he pulsado
el botón 3".
Para efectuar esta tarea se utilizará la etiqueta <IMG> que se ha usado en el ejercicio 11, y dos nuevas etiquetas <MAP> y <AREA> que permitirán declarar el mapa, así como los atributos ISMAP y USEMAP que permitirán hacer referencias a mapas creados para ser interpretados en el servidor o en el cliente respectivamente. Pasos:
en la que nos informa que es necesario abrir una imagen que servirá como
base para el mapa. Pulsa el botón de OK y selecciona en la nueva ventana la
imagen que guardaste al principio del ejercicio. Pulsas abrir y se abrirá
una nueva ventana que tenga cargada la imagen: 
Se puede elegir entre varios formatos de mapa de imágenes. Si no tiene ninguna preferencia deje seleccionada la opción que aparezca por defecto.
default default.html
rect boton1.htm 9,12 62,66
rect boton2.htm 62,10 134,36
rect boton3.htm 62,36 134,64
<HTML> <BODY> <A HREF="mapa.map"><IMG SRC="imgmap.gif" ISMAP> </A> </BODY> </HTML>
<HTML>
<BODY>
<MAP NAME="ejemplo">
<AREA SHAPE=RECT COORDS="9,12,62,66"
HREF="boton1.htm">
<AREA SHAPE=RECT COORDS="62,10,134,36"
HREF="boton2.htm">
<AREA SHAPE=RECT COORDS="62,36,134,64 "
HREF="boton3.htm">
</MAP>
<CENTER>
<A HREF="mapa.map"><IMG SRC="imgmap.gif"
ISMAP USEMAP="#ejemplo"> </A>
</BODY>
</HTML>
Debería verse:Observaciones:
Intenta estos cambios:
|
|||
|
|
|||
|
Tarea:
Hasta ahora las posibilidades multimedia de HTML se reducían a insertar
imágenes dentro de un texto. En esta sección se verá
como insertar otros ficheros multimedia (audio, vídeo) en un documento
HTML. Para poder disfrutar de contenido multimedia en un navegador
es necesario instalar un plug-in o una aplicación externa que se
encarge de ejecutar estos ficheros. Hay que tener en cuenta que el
soporte para ellos depende de la configuración de cada equipo y
de cada navegador. Hay extensiones multimedia que sólo soporta un
tipo de navegador (ej las etiquetas BGSOUND y DINSRC que utiliza IExplorer
para ejecución de audio y video respectivamente). Hay otras etiquetas
que soportan la mayoría de los navegadores como por ejemplo (EMBED,
IMG, APPLET, etc. HTML 4.0 pretende sustituir este conjunto tan dispar
por una sóla etiqueta OBJECT que sustituya a todas las anteriores
y englobe toda su funcionalidad.
En este ejercicio se va a practicar la inclusión de audio y video con la etiqueta EMBED que es una de las más ampliamente soportadas por todos los navegadores. Esta etiqueta sólo tiene tres atributos (WIDTH, HEIGTH y SRC) pero hay muchas extensiones que se pueden emplear dependiendo del plug-in instalado: LOOP (para indicar cuantas veces debe ejecutarse el fichero de audio o video), CONTROLS (para indicar que controles deben mostrarse: start, stop, etc,), CONSOLE para indicar si se muestra o no la consola con todos los controles y a que tamaño), ALIGN (para indicar en que posición aparecerá el video o la consola que controla el audio), etc. Pasos:
<HTML> <BODY> Este es un fichero de sonido para netscape. <P><EMBED SRC="bach.mid" HEIGTH> </BODY> </HTML> Debería verse:
<HTML> <BODY> Debería verse:
Observaciones:
Intenta estos cambios:
|
|||
|
|
|||
|
Tarea:
En este ejercicio se aprenderá a utilizar los Frames. Los Frames
permiten dividir la ventana del navegador en varias subregiones llamadas
marcos o frames. En cada una de estas regiones se puede mostrar una URL
distinta.
Los Frames resultan muy útiles para los documentos que necesitan mantener una región estática, por ejemplo una lista de contenidos, y otra zona dinámica en la que se muestra el resultado de las operaciones sobre la zona estática. Pasos:
<HTML>
<FRAMESET ROWS="100, 50%, *">
<FRAME SRC="enun_archivos/frame1.html"
NAME="frame1">
<FRAME SRC="enun_archivos/frame2.html"
NAME="frame2">
<FRAME SRC="enun_archivos/frame3.html"
NAME="frame3">
</FRAMESET>
</HTML>
Debería verse:
Observaciones:
Intenta estos cambios: |
|||
|
|
|||
|
Tarea:
El contenido de un frame puede ser una página normal u otra página
con frames. En este ejercicio vamos a crear frames dentro de otros frames.
Esto puede hacerse dentro del mismo fichero y sólo necesitamos
incluir la etiqueta FRAMESET una vez por cada nueva página con frames.
Pasos:
<FRAMESET ROWS="100, 50%, *">
<FRAME SRC="enun_archivos/frame1.html"
NAME="frame1">
<FRAMESET COLS="2*,*">
<FRAME SRC="enun_archivos/frame2.html"
NAME="frame2">
<FRAME SRC="enun_archivos/frame3.html"
NAME="frame3">
</FRAMESET>
<FRAMESET COLS="50%, 30%, 20%">
<FRAME SRC="enun_archivos/frame4.html"
NAME="frame4">
<FRAME SRC="enun_archivos/frame5.html"
NAME="frame5">
<FRAME SRC="enun_archivos/frame6.html"
NAME="frame6">
</FRAMESET>
</FRAMESET>
Guarda el fichero y vuelvelo a cargar en el navegador.
Debería verse:
Observaciones:
Intenta estos cambios:
Basandose en el frame que se ha creado en el ejercicio anterior, y que constaba
de cuatro columnas, intenta los siguientes cambios:
|
|||
|
|
|||
|
Tarea:
El uso de frames introduce un nuevo atributo a algunas de las etiquetas
especificadas anteriormente. Este es el atributo TARGET.
Este atributo se puede usar con las siguientes etiquetas:
Pasos:
<HTML>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="target.html" NAME="frame1" >
<FRAME SRC="enun_archivos/frame2.html"
NAME="frame2">
</FRAMESET>
</HTML>
<HTML>
<HEAD>
<TITLE>target</TITLE>
<BASE TARGET = "frame2">
</HEAD>
<BODY>
<H3>Casos especiales</H3>
<UL>
<LI>
<A HREF="enun_archivos/frame1.html" TARGET="frame2">Nombre de frame</A>
</LI>
<LI>
<A HREF="enun_archivos/frame1.html" TARGET="_blank">Nueva página</A>
</LI>
<LI>
<A HREF="enun_archivos/frame1.html" TARGET="_self">En este frame</A>
</LI>
<LI>
<A HREF="enun_archivos/frame1.html" TARGET="_parent">En el frame "padre"</A>
</LI>
<LI>
<A HREF="enun_archivos/frame1.html" TARGET="_top">Elimina estructura de frames)</A>
</LI>
</UL>
</BODY>
</HTML>
Debería verse:
Intenta estos cambios:
|
|||
|
|
|||
|
Tarea: Hasta ahora has visto las etiquetas básicas
de HTML para poder crear un documento web. Una vez creado un fichero.html
puedes hacerlo accesible a traves de internet para todo el que tenga una
conexión colocándolo en un servidor de acceso público.
Hay muchos servidores comerciales en internet que ofrecen este servicio ("www.terra.es", "ya.com", "navegalia.com", etc.) vamos a utilizar el de Yahoo "http://geocities.yahoo.com/".
Toma nota de estos datos para recordarlos más adelante. |
|||
|
|
|||
|
Este tutorial ha sido elaborado a partir de los siguientes documentos: |
|||
|
|
|||
|
Este tutorial ha sido elaborado por: M. Carmen Fernández Panadero, Salvador López Mendoza, Vicente Luque Centeno y Simon Pickin en la Universidad Carlos III de Madrid. Para desarrollarlo se han consultado gran cantidad de documentos en la red. Parte de los ejercicios se han desarrollado en el Área de Ingeniería Telemática de la Universidad Carlos III de Madrid, España. |
|||
|
|
|||
| Última actualización: |
|
|
.
Se puede modificar el tamaño de la imagen, para ello se emplean los
atributos height y width:
el tamaño de esta imagen es la mitad del ejemplo anterior:
.
Pincha sobre ella con el botón derecho del ratón y elije la opción guardar
imagen como.
en una carpeta. (Pulsa con el botón derecho sobre la imagen
y selecciona la opción guardar imagen como).
