|
Concepto de Lenguaje de Marcas |
El HTML (Hyper Text Mark-up Language) es el lenguaje de programación utilizado para crear y reconocer documentos hipermedia a los que accedemos a través de la red Internet. Este lenguaje consiste en un sistema de introducción de marcas de referencia en un fichero de texto, basado en el estilo SGML (Standard Generalized Markup Language), utilizado para la creación de documentos hipertexto, que en WWW generalmente poseen la extensión "html".
Se puede considerar el lenguaje HTML como una colección de estilos que define los diversos componentes de un documento WWW. El código HTML describe cómo serán mostrados los elementos del texto (párrafos, listas, listas numeradas, listas de definición...) en la pantalla del ordenador cliente cuando se esté utilizando lo que denominamos navegador, visualizador o "browser" y tengamos abierta esa página en concreto. El estándar actual del lenguaje HTML (3.2) soporta la creación de documentos hipermedia básicos así como formatos interactivos, imágenes, tablas , opciones de formato, frames, interacción con otros lenguajes de programación como Java o VRML, etc.
HTML utiliza lo que llamamos etiquetas de marca para indicar al browser del Web cómo mostrar el texto.
Las etiquetas de marca que usamos en HTML consisten en un corchete izquierdo(<), (el símbolo "menor que''), al que sigue el nombre de la etiqueta y cerrado por un corchete derecho(>). Las etiquetas por lo general se utilizan en parejas, ej. <B> y </B>. La etiqueta de cierre es exactamente igual que la de inicio, excepto que una diagonal (/) precede al texto entre los corchetes. Así, <B> indica al browser del Web que empiece a formatear texto en negrita, </B> indica al "browser" que finaliza el texto en negrita.
La principal excepción a la regla de pares de etiquetas es la etiqueta <P>, pues no es imprescindible una </P>. De todas formas las reglas de estilo en HTML aconsejan que se coloquen estas etiquetas de cierre.
ATENCIÓN: Es preferible que pongamos etiquetas de cierre innecesarias a que se nos olvide cerrar una sola etiqueta que sí precisa ser cerrada.
Las marcas en HTML adoptan la siguiente forma: <inicio_marca>texto, imagen, etc. </fin_marca>. De tal forma que aquello que se halle comprendido entre la marca de inicio y marca de fin se ve afectado por la marca en cuestión.
En este ejemplo vamos a dar formato de negrita a un texto:
<B>Este texto se verá en negrita</B>. En Netscape veríamos el texto de esta forma:
Este texto se verá en negrita
ATENCIÓN: A HTML le es indiferente el que se escriba con mayúsculas, minúsculas o combinaciones de ambas una instrucción o etiqueta. <title> es equivalente a <TITLE> ó <TiTlE>.
No todas las etiquetas se pueden utilizar en todos los "browsers" del Web. Si un "browser" no puede utilizar una etiqueta en particular, sencillamente la ignora.
Creación de un primer documento WEB |
A continuación presentamos un ejemplo básico de un documento escrito en HTML:
<HTML>
<TITLE>Título de la ventana</TITLE>
<BODY>
....comandos y texto del documento....
</BODY>
</HTML>
Es recomendable que todo fichero HTML siga esta estructura.
El orden en que se suelen insertar los elementos viene a ser el siguiente:
Cada documento de HTML debe tener un título. El título se despliega generalmente separado del documento (aparecerá en la parte superior de la ventana del navegador, normalmente resaltado con el fondo en azul). Se pueden seleccionar aproximadamente unas doce palabras para describir en el título el propósito del documento. En nuestro caso estamos usando un documento titulado " Introducción a HTML ".
HTML tiene seis niveles de encabezados, numerados del 1 al 6, siendo el nivel 1 el que más resalta el texto. Vendría a ser algo parecido a combinar el uso de la negrita y seis tamaños distintos de tipo de letra . Podemos usar estos seis niveles para destacar grados de importancia dentro de las partes del texto, dejando <H1> para lo más importante (título del documento) y <H2>, <H3>... para los distintos subapartados. El primer encabezado en cada documento debe de estar etiquetado de la siguiente manera: <H1>. La sintaxis de la etiqueta del encabezado es:
<Hy>Texto del encabezado</Hy>
donde y es un número entre 1 y 6 que especifica el nivel del encabezado.
Por ejemplo, esta sección la hemos empezado con el siguiente código:
<H2>ENCABEZADOS</H2>
A diferencia de los documentos en la mayoría de los procesadores de textos, las interlíneas en HTML carecen de significado. Carece de importancia la forma en que el documento esté escrito en el código fuente, ya tenga múltiples espacios en blanco, saltos de línea, etc., pues una vez que éste se ejecuta, HTML lo formatea automáticamente y lo adecúa al ancho de la página.
De esta forma, un texto escrito en el código fuente de la siguiente forma :
<P><B>Hola a todos. ¡Estoy
entusiasmado! Este es
mi primer párrafo utilizando HTML.</B> <P>
Aparecería en nuestro visualizador como:
Hola a todos. ¡Estoy entusiasmado! Este es mi primer párrafo utilizando HTML.
En el código fuente anterior, hay dos cambios de línea entre las oraciones, y entre las palabras "a" y "todos" hay más de diez espacios, pero el browser del Web los ignora y separa las palabras con un solo espacio, comenzando un nuevo párrafo sólo cuando llega a la etiqueta de <P>.
ATENCIÓN: Se deben separar los párrafos siempre con <P>. El browser ignora cualquier formato de texto distinto a las etiquetas HTML o los espacios en blanco. Así, debemos prestar mucha atención y no olvidarnos de poner etiquetas de <P> si no queremos que nuestro documento se convierta en un interminable texto con un único y desesperante párrafo. La excepción es el texto etiquetado como 'preformateado' (etiquetas <PRE> y </PRE>), único caso en el que se puede omitir la etiqueta de </P>).
En este apartado ofrecemos la información básica para poder manipular y modificar el aspecto final del texto, tanto en cuanto a la presentación de las fuentes como a la disposición de los párrafos, líneas, etc. en la página. Tambíen te ofrecemos distintas posibilidades de "ornamentación" para que puedas disponer de diversas alternativas en el momento de diseñar la presentación final del documento.
T E Ñ L I O P S E H R R A H Y E P E S J Q I E Q P O J H R E A E M M O L E R T I T O J S I T I P Z O E N J H O V L A F O N T A I N E Ñ E M S H A U S O R N E T E D M I D E L U J K U Ñ A K E E D Z Q O E V O L I A J I M Z E R E Z I H Q U Z E U S
La expresión #RRVVAA hace referencia al color, de forma que los dos primeros digitos representan el rojo, los dos siguientes el verde y los dos últimos el azul. Un 0 indica ausencia de color y F color máximo. Entre ambos hay una gama de colores que se puede modificar indicando una cifra (que deberíamos obtener convirtiendo la cifra del color en hexadecimal, de 0 a 256, a su equivalente decimal) en lugar de 00 o FF. De este modo tenemos las siguientes correspondencias:
Por ejemplo:
<BODY BGCOLOR="#000000"
TEXT="#FFFFFF"> Nos permite tener una página
con fondo negro y texto blanco.
ATENCIÓN: No olvides que estos atibutos sólo se pueden utilizar cuando definimos la instrucción <BODY> al principio del documento.
Si tecleamos el código:
<CENTER>Esto es un párrafo centrado</CENTER>. Obtendremos:
Esto es un párrafo centrado
Un párrafo puede alinearse a la izquierda, centro o derecha. El párrafo en cuestión debe estar contenido entre las órdenes <P Align="left|center|right"></P>(donde el simbolo "|" representa las posibilidades que podemos usar), utilizando la opción correspondiente.
Por ejemplo:
<P Align="left">Este es un párrafo alineado a la izquierda</P>
<P Align="center">Este párrafo está centrado</P>
<P Align="right">Este es un párrafo alineado a la derecha</P>. Nos aparecería como:
Este es un párrafo alineado a la izquierda
Este párrafo está centrado
Este es un párrafo alineado a la derecha
Un recurso para mejorar el aspecto de nuestras páginas son las líneas horizontales, que conseguimos con la orden <HR>. Este separador horizontal puede modificarse en longitud y en altura. La modificación en altura se realiza con la orden <HR size="n"> donde "n" representa la anchura de la línea en puntos. La longitud del separador puede modificarse con la orden <HR width="n">. Ambas órdenes pueden combinarse en un mismo separador, que siempre aparecerá centrado.
Por ejemplo:
<HR>
<HR size="15">
<HR width="100">
<HR size="15, width="100">
En HTML se pueden hacer listas sin numerar, numeradas, listas anidadas y listas de definiciones.
Cuando queramos realizar una lista no numerada,
Ejemplo de una lista de dos elementos:
<UL>
<LI> Billie Holiday</LI>
<LI> Ella Fitzgerald </LI>
</UL>
La salida que veríamos sería:
Los elementos <LI> pueden contener varios párrafos. Simplemente hemos de separarlos con las etiquetas <P>.
Una lista numerada (u ordenada, es igual a una no numerada, pero esta usa la etiqueta <OL> en lugar de <UL>. Los elementos de la lista se etiquetan igual que anteriormente con <LI>. El siguiente código HTML:
<OL>
<LI> Billie Holiday </LI>
<LI> Ella Fitzgerald </LI>
<LI> Nina Simone </LI>
</OL>
Devuelve este tipo de salida:
Una lista de definiciones está formada normalmente por un término ( <DT>) y una definición ( <DD>). Los browsers del Web generalmente formatean la definición en una nueva línea.
Este es un ejemplo de una lista de definición:
<DL>
<DT> DOYLE (Sir Arthur Conan) </DT>
<DD> DOYLE (Sir Arthur Conan). Novelista y médico inglés (Edimburgo
1859 - Crowborough, Sussex, 1930). Creador de Sherlock Holmes. </DD>
<DT> Camus (Albert) </DT>
<DD> Camus (Albert)- Escritor francés (Mondovi, Argelia,
1913 - Villeblevin, Yonne, 1960). </DD>
</DL>
La salida es:
Las entradas <DT> y <DD> pueden contener varios párrafos separados por <P>, listas u otro tipo de definiciones.
Las listas pueden ser anidadas arbitrariamente, aunque en la práctica parece conveniente limitar las anidaciones a tres niveles. También se pueden tener varios parrafos, cada uno conteniendo una lista anidada como un solo elemento de la lista.
Aquí tenemos un ejemplo de una lista anidada:
<UL>
<LI> Ejemplos de grandes músicos de todo el mundo: </LI>
<UL>
<LI> Laura Pausini </LI>
<LI> Bill Clinton </LI>
</UL>
<LI> Algunos grandes músicos o cantantes españoles: </LI>
<UL>
<LI> Luis Cobos </LI>
<LI> Jesulín de Ubrique </LI>
</UL>
</UL>
La salida sería:
IMÁGENES |
La inclusión de imágenes en los documentos es una de las características más importantes y llamativas que nos permite el HTML. Sin embargo, incluir imágenes en nuestros documentos puede ser un arma de doble filo. Un buen diseño en términos estéticos aconseja la inclusión de imágenes en nuestros documentos HTML pues hace más atractiva la página, ayuda a su comprensión, etc. Pero es peligroso excederse en el número de imágenes o en su tamaño, pues son precisamente las imágenes la parte de una página que más uso de memoria requiere y, por lo tanto, es susceptible de dificultar y ralentizar el acceso a esa página.
Para incluir imágenes en nuestros documentos podemos usar las etiquetas <IMG SRC="imagen.gif"> de forma que imagen es el nombre del fichero de imagen y .gif el tipo de formato de imagen, que también podría ser .jpg en nuestro visualizador.
Podemos alterar la posición de la imagen respecto al texto que le rodea y respecto a la pagina.
Respecto del texto lo haremos usando las etiquetas <IMG SRC="imagen.gif" ALIGN="top|middle|bottom"> Respecto a la página las opciones son:
<IMG SRC="imagen.gif" ALIGN="left|right"> para colocar la imagen a izquierda o derecha de la página y <CENTER>...</CENTER> para centrarla.
De este modo, por ejemplo,
<P><CENTER><IMG SRC="Images/odiseo.gif"></CENTER>.Nos permirá que la imagen quede centrada
ENLACES HIPERTEXTO |
Una de las principales ventajas de HTML estriba en su capacidad de enlazar regiones de texto e imágenes con otro documento. El browser enfatiza estas regiones (con un color distinto al resto y subrayadas) para indicar que son enlaces de hipertexto o hiperenlaces. (A menudo descritos como hyperlinks o simplemente links).
Algunos de los recursos externos a los que podemos acceder desde el browser son :
El enlace para los hipertextos es <A>, que significa ancla. Para incluir un ancla en nuestro documento:
A) Un primer ejemplo de referencia de hipertexto:
<P>Puede contactar desde aquí con el WEB de la <A HREF="http://www.um.es">Universidad de Granada</A> Puede contactar desde aquí con el WEB de la Universidad de Granada |
Esto hace que el texto "Universidad de Granada'' actúe como hiperenlace para llevarnos a la página principal del WEB de la Universidad de Granada.
| Puede encontrar sus programas y aplicaciones
Internet en <A
HREF="ftp://ftp.rediris.es">Servicio FTP de
Rediris </A> Puede encontrar sus programas y aplicaciones Internet en Servicio FTP de Rediris |
También se pueden utilizar anclas para moverse a una sección en particular dentro de un documento. Suponga que quiere crear un enlace del documento A hacia una sección en particular del documento B. (Llamémosle el documentoB.html.) Primero necesita poner un ancla con nombre en el documento B. Por ejemplo, para poner un ancla llamada "seccion2'' al documento B, ponga:
Aquí hay <A NAME="seccion2">algún texto</a>
Ahora, al crear el enlace en el documento A, incluiremos no sólo el nombre del archivo, sino el ancla con nombre, separada por el signo (#) o almohadilla.
Este es mi <A HREF="documentoB.html#seccion2">enlace</A> al documento B.
Así, al hacer click en la palabra ''enlace'' en el documento A lleva al lector directamente a las palabras ''algún texto'' en el documento B.
La técnica es exactamente la misma, pero el nombre del archivo se omite. Este tipo de enlaces es el que hemos utilizado para realizar el índice de este documento
Por ejemplo, para ligar el ancla seccion2 dentro del mismo archivo (Documento B), se hace lo siguiente:
Ésta es <A HREF="#seccion2">Enlace seccion2</A> la referencia dentro del documento B.
Un ejemplo de aplicación de este tipo de enlaces es la creación de un sumario con los apartados del documento al inicio del texto. Así, si al principio del documento insertamos:
<A NAME="s0">SUMARI0</A> <UL> <LI><A HREF="#s1">Sección 1</A> <LI><A HREF="#s2">Sección 2</A> <LI><A HREF="#s3">Sección 3</A>
Posteriormente si introducimos el texto del documento colocando marcas al comienzo de cada sección:
<A NAME="s1">Sección 1</A><P> Bla, bla, bla... <A NAME="s2">Sección 2</A> Bla, bla, bla... <A NAME="s3">Sección 3</A> Bla, bla y requetebla...
terminaremos por tener un documento en el que nos será mucho más fácil movernos y orientarnos.
Para utilizar una imagen como enlace basta reemplazar o añadir al texto que sirve de enlace la referencia a una imagen.
De este modo si hacemos:
<P> Pulse en la imagen para conectar con la Universidad de Granada <A HREF="http://www.ugr.es"><IMG SRC="Images/logo_ugr.gif" align="middle"></A>
Obtendremos:
Pulse en la imagen para conectar con la Universidad de Granada
Bastará pinchar en el escudo de la universidad de Granada para irnos a su página WEB.
TABLAS |
A continuación veremos unos rudimentos de creación de tablas.
Empezamos una tabla con los elementos<TABLE BORDER=n> y </TABLE> , de forma que BORDER=n indica el grosor del borde de la tabla. Si este grosor es 0 la tabla aparecerá sin bordes.
Al iniciar nueva fila introducimos <TR>. Las columnas las marcamos con <TH> y las <TD> separan celdas
<TABLE BORDER=1>
<TR><TH>Titulo<TH>Autor
<TR><TD>Cien años de soledad<TD> García
Márquez
<TR><TD>Hamlet<TD> Shakespeare
<TR><TD>Cándido<TD>Voltaire
</TABLE>
| Título | Autor |
|---|---|
| Cien años de soledad | García Márquez |
| Hamlet | Shakespeare |
| Cándido | Voltaire |
ATENCIÓN: Si al iniciar una tabla no indicamos el tamaño del borde de las celdas, la tabla aparecerá sin borde de ningún tipo. Esto, por otro lado, nos puede servir de truco para combinar de forma atractiva texto, imágenes, etc. mediante una tabla sin bordes.
De momento lo dejamos aquí, recomendamos realizar las tablas utilizando un editor HTML.
FORMULARIOS |
Un formulario para el envío de datos tiene la siguiente estructura básica:
<FORM ACTION="mailto:dirección e-mail"
METHOD="POST">
....
</FORM>
Dentro del formulario aparecen los campos que se han de rellenar.
Par ello usamos alguna de las siguientes posibilidades:
Campo de texto: Nombre del campo que se ha de rellenar <INPUT NAME="nombre del campo" size="20">
Area de texto:Texto que acompaña a la ventana: <TEXTAREA NAME="nombre del campo" ROWS="n de filas" COLS="n de columnas"></TEXTAREA>
Listas desplegables: definen campos con valores predefinidos.
Por ejemplo: <SELECT NAME="nombre del campo">
<OPTION>Si
<OPTION>No
<OPTION>No sabe / No contesta
</SELECT>
crea un campo de selección con tres valores, que se desplegarán
al pinchar con el ratón.
Finalmente, para enviar la información a la dirección de
correo previamente señalada, usaremos las instrucciones:
<INPUT TYPE="SUBMIT" VALUE="texto del
botón de enviar datos">
para definir un botón para el envío.
<INPUT TYPE="RESET" VALUE="texto del botón
de borrar datos">
para definir un botón que borre los datos introducidos hasta ese
momento.
Veamos un ejemplo completo:
<FORM ACTION="mailto:gamo@siu.um.es"
METHOD="POST"
¿Cómo te llamas?: <INPUT NAME="nombre"
size="35"><BR>
¿Qué tipo de música prefieres? <SELECT
NAME="interes">
<OPTION>Pop-Rock
<OPTION>Clásica
<OPTION>Jazz
</SELECT><BR>
Cuéntanos algo: <TEXTAREA NAME="comentario"
ROWS="5"
COLS="20"></TEXTAREA><BR>
<INPUT TYPE="SUBMIT" VALUE="Enviar">
<INPUT TYPE="RESET" VALUE="Borrar">
</FORM>