HTML_Iniciación

 toc



** Lenguaje HTML ** =**Introducción** =  **HTML**, siglas de **HyperText Markup Language** (//Lenguaje de Marcas de Hipertexto//), es el **lenguaje de marcado** predominante para la con strucción de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.

Por convención, los archivos de formato HTML usan la extensión .htm o .html.

El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser: Bloc de notas o WordPad en Windows, o el Gedit en Linux, o cualquier otro editor que admita texto sin formato.

HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determina la forma en la que deben aparecer en el navegador los textos, así como también las imágenes y los demás elementos de la página. Las etiquetas se presentan rodeadas por corchetes angulares (<,>).

Seleccionando la opción **Ver código fuente** en el navegador, se puede ver realmente la información que está recibiendo éste y cómo la está interpretando. Por ejemplo: en Internet Explorer o FireFox, simplemente hay que desplegar el menú **Ver** y luego elegir **Código fuente**. De esta forma, se abrirá el editor de texto configurado como predeterminado en el sistema con el código fuente de la página que se esté viendo en ese momento en el navegador. Otra forma más rápida consiste en hacer clic con el botón derecho del ratón en cualquier punto del área donde el navegador muestra la página web y elegir **Ver código fuente**. Para el navegador Firefox existe el plugin FireBug, un depurador que permite entre otras cosas visualizar el código HTML de la página que estamos visualizando de forma dinámica, y que incluso resalta el trozo de código por el que está pasando el ratón en cada momento, por lo que es una herramienta muy útil para aprender diversos conceptos de este lenguaje. 

=** 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: ** ** para abrir y ** ** para cerrar. Un ejemplo práctico: Si queremos que el nombre "InfoAula" se visualice en negrita, tenemos que utilizar la etiqueta " B " ( del inglés //Bold//) de la siguiente manera: ** InfoAula .** Algunas etiquetas no tienen //etiqueta de cierre.// Esto ocurre cuando por ejemplo queremos poner un gráfico, que se utiliza algo como **.** 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> ..... .** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">** Estructura de un documento ** = <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Un documento HTML comienza con la etiqueta y termina con. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Dentro del documento hay dos partes fundamentales: **la cabecera** y **el cuerpo**, separadas por las etiquetas:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><HEAD> Inicio de la cabecera <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"></HEAD> Fin de la cabecera

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"> Inicio del cuerpo. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"></BODY> Fin del cuerpo <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">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. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">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 curso. 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. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Para crear una página utilizaremos un editor de texto ASCII como el Bloc de notas. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">El fichero resultante lo grabaremos como “nombre_pagina.html” (la extensión del fichero será .html). Después de grabar el fichero se ejecuta con el navegador que utilizamos habitualmente y se verá el resultado. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">Cabecera de la página = <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el título. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Está formada por las etiquetas ** ** y ** **. La etiqueta ** ** va justo debajo de la etiqueta ** **. Por ejemplo: <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**...** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**...** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** **

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Entre las etiquetas ** ** y ** **, las etiquetas que podemos encontrar y que más se utilizan son: <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** **, ** **, ** ** ,** ** y ** ** que es la que se explica a continuación. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">**Título de la página ** =

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">El título de la página es el que aparecerá en la parte superior de la ventana del navegador, cuando la página esté cargada en él. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas ** ** y ** **. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas ** ** y ** **. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo: <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** Prácticas de HTML ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**...** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">**Cuerpo del documento ** = <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">El cuerpo del documento contiene la información propia del documento, es decir lo que queremos que se visualice: el texto de la página, las imágenes, los formularios, etc. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Todos estos elementos tienen que encontrarse entre las etiquetas ** ** y ** **, que van justo debajo de la cabecera.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 120%; text-align: start;">**Atributos del Body**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Junto con la etiqueta de **** pueden aparecer ciertos atributos, como:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**BGCOLOR=”red”** para seleccionar un color de fondo para a página. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**BACKGROUND=”imagen.jpg”** para poner una imagen como fondo de la página- <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**TEXT="#rrggbb"** para seleccionar el color por defecto del texto. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**LINK="#rrggbb"** para seleccionar el color de los enlaces que haya en la página. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**VLINK="#rrggbb"** para seleccionar el color de los enlaces visitados.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Para hacer referencia a los colores podemos escribir el nombre predefinido del color o su código en hexadecimal. Por ejemplo, para hacer que el color del fondo de una página sea de color azul podríamos escribir:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**<body bgcolor = #0000FF” > o <body bgcolor = “blue”>**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">La imagen de fondo puede establecerse a través del atributo **background**, indicando la ruta en la que se encuentra la imagen. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo, para hacer que la imagen de fondo de una página sea la imagen **//fondo.gif//**, que se encuentra en el mismo directorio en el que se encuentra guardada la página, tendremos que escribir:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**<body background=//"fondo.gif"//>** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**...** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** **

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">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: <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**...** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**<body background=//"imagenes/fondo.gif"//>** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">... <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">** Comentarios ** =

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">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. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">**Saltos de línea ** =

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Si pulsamos **INTRO** en un documento HTML, el salto de línea se producirá en el código, **pero no se mostrará en el navegador**. Para que se produzca el salto de línea en el navegador, en lugar de pulsar la tecla **INTRO** hay que insertar la etiqueta ** ** donde se desee que se produzca el salto. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">La etiqueta ** ** no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta ** ** después de ella, ya que dicha etiqueta no existe.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo, para insertar el texto:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**Queridos alumnos,** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**tengo el placer de comunicaros que el próximo jueves realizaremos una salida.**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Habría que escribir:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**Queridos alumnos, tengo el placer de comunicaros que el próximo jueves realizaremos una salida.** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">**Separadores ** = <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">El elemento que suele utilizarse para separar secciones dentro de una misma página es la **regla horizontal**. Para insertar una regla horizontal hay que insertar la etiqueta ** **. Dicha etiqueta no precisa ninguna etiqueta de cierre. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Es posible especificar algunos atributos de la regla horizontal:


 * = **Atributo** ||= **Significado** ||= **Posibles valores** ||
 * = **align** ||= alineación de la regla dentro de la página ||= **left** (izquierda)
 * right** (derecha)
 * center** (centro) ||
 * = **width** ||= ancho de la regla ||= un número, acompañado de % cuando se desee que sea en porcentaje ||
 * = **size** ||= alto de la regla ||= un número ||

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo, para insertar el texto y la regla horizontal siguientes:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**Inicio**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**Bienvenidos al aula virtual TIC.**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Habría que escribir en el body:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**//Inicio//****<hr align="left" width=//"300%"// size=//"5"// >//Bienvenidos al aula virtual TIC.//** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">** Encabezados <hn> ** = <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Existen una serie de encabezados que suelen utilizarse para establecer **títulos** dentro de una página. La diferencia entre los distintos tipos de encabezado es el tamaño de la letra, el tipo de resaltado, y la separación existente entre el texto y los elementos que tiene encima y debajo de él. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una etiqueta de cierre. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">A continuación se muestran los distintos encabezados existentes:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Para todas estas etiquetas es posible especificar el valor del atributo **align**. Por ejemplo, para insertar el texto: <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** //El lenguaje HTML// **

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Mostraría el texto “El lenguaje HTML” con el tamaño más grande de los encabezados y centrado. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">**Formato de texto** = <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Las propiedades del texto pueden modificarse a través de la etiqueta ** **. Para ello, podemos insertar el texto entre las etiquetas ** ** y ** **, especificando algunos de los atributos de la etiqueta:


 * = Atributo ||= Significado ||= **Posibles valores** ||
 * **face** || fuente || nombre de la fuente, o fuentes ||
 * **color** || color del texto || número hexadecimal o texto predefinido ||
 * **size** || tamaño del texto || valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo **+** o **-** delante del valor ||

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo, para insertar el texto: <span style="font-family: 'Comic Sans MS',cursive; font-size: 140%;">Bienvenidos a mi página web

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Habría que escribir:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**<font color=//"#993366"// size=//"4"// face=//"Comic Sans MS, Arial, MS Sans Serif"//>//Bienvenidos a mi página web// **

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">También es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta ** ** después de la etiqueta ** **. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">La etiqueta ** ** no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta ** **.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo: <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**<basefont color=//"#006699"// size=//"4"// face=//"Arial"//>**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Este código haría que la fuente del documento fuera por defecto de color azul, de tamaño 4 y Arial. Si después de indicar la etiqueta ** ** o ** **, el navegador encuentra otra etiqueta ** **, la que prevalece es siempre la última que se encuentra.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">**Resaltado del texto** = <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">A continuación se muestran algunas etiquetas asociadas al tipo de letra:


 * <span style="background-color: #bfcef8; color: #000080; display: block; text-align: center; vertical-align: sub;">**Etiqueta** || <span style="background-color: #bfcef8; color: #000080; display: block; text-align: center; vertical-align: sub;">**Significado** || <span style="background-color: #bfcef8; color: #000080; display: block; text-align: center; vertical-align: sub;">**Ejemplo** ||
 * **<b>** || Negrita || **curso HTML** ||
 * **<i>** || Cursiva || //curso HTML// ||
 * ** ** || Subrayado || __curso HTML__ ||
 * ** ** || Tachado || curso HTML ||
 * ** ** || aumenta el tamaño de la fuente || curso HTML ||
 * ** ** || disminuye el tamaño de la fuente || curso HTML ||
 * ** ** || subíndice ||  ||
 * ** ** || Superíndice ||  ||
 * ** ** || Texto parpadeando (solo en Mozilla Firefox) ||  ||

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo, para insertar el texto: <span style="color: #00ff00; font-family: 'Comic Sans MS',cursive; font-size: 130%; text-align: start;">Bienvenidos a **__www.google.es__**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Habría que escribir:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**<font color=//"#993366"// size=//"4"// face=//"Comic Sans MS, Arial, MS Sans Serif"//>//Bienvenidos a//  //www.google.es//  ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">**Párrafos ** = <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe insertarse entre las etiquetas ** ** y ** **. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">No es necesario insertar la etiqueta ** ** para que un nuevo párrafo aparezca debajo del anterior, ya que las etiquetas ** ** y ** ** hacen que se cambie de línea automáticamente. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">También es posible cambiar la alineación del texto de cada párrafo. Para ello se modifica el valor del atributo **align**, cuyos valores pueden ser **left** (izquierda), **right** (derecha), **center** (centrado) o **justify** (justificado). <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Otra forma de cambiar la alineación del texto es mediante las etiquetas ** ** y ** **, para las que también existe el atributo **align**. La etiqueta ** **, al igual que la etiqueta ** **, se utiliza para agrupar bloques de texto, pero con la diferencia de que la separación entre ellos es menor. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo, para insertar el texto:


 * **Bienvenidos a mi página.**

**Aquí encontraréis cursos de formación muy interesantes.** ||

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Habría que escribir:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** //Bienvenidos a mi página.// ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** //Aquí encontraréis cursos de formación muy interesantes.// ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">**Preformato** = <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">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. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">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.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Entre las etiquetas **<PRE>** y **</PRE>** no debemos utilizar etiquetas de formato <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">(FONT, BR, P, B, U,...)

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"> <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><PRE> <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Texto preformateado <span style="color: #000000; font-family: 'Courier New',Courier,monospace; font-size: 13px; text-align: start;"> <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><span style="font-family: 'Courier New',Courier,monospace;">| 1 | <span style="color: #ffffff; font-family: 'Courier New',Courier,monospace;">1 <span style="font-family: 'Courier New',Courier,monospace;">2 | 13 | <span style="color: #ffffff; font-family: 'Courier New',Courier,monospace;">1 <span style="font-family: 'Courier New',Courier,monospace;">4 | <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><span style="font-family: 'Courier New',Courier,monospace;">| 5 | <span style="color: #ffffff; font-family: 'Courier New',Courier,monospace;">1 <span style="font-family: 'Courier New',Courier,monospace;">6 | 17 | <span style="color: #ffffff; font-family: 'Courier New',Courier,monospace;">1 <span style="font-family: 'Courier New',Courier,monospace;">8 | <span style="color: #000000; font-family: 'Courier New',Courier,monospace; font-size: 13px; text-align: start;">| 9 | 10 | 11 | 12 | <span style="color: #000000; font-family: 'Courier New',Courier,monospace; font-size: 13px; text-align: start;"> <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"></PRE> <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"></BODY>

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">El Navegador utiliza una fuente de paso fijo como Courier para poder respetar tabulados, espacios, intros... <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">**Sangría** = <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Para hacer una sangría dentro de nuestro documento, se puede utilizar la etiqueta **"**Esta etiqueta provoca un retorno de carro al cerrarla con**".**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"> =<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">**Centrado** = <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Para centrar texto (o, en general, cualquier cosa: un gráfico, por ejemplo) se usa la directiva ** … **Todo lo que halla entre esta etiqueta quedará centrado. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">**Marquesinas ** =

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Las **marquesinas** son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Para insertar una marquesina, es necesario insertar el texto entre las etiquetas ** ** y ** **. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">A través del atributo **behavior** puede modificarse el tipo de movimiento. Puede tomar los valores **alternate** (de lado a lado de la ventana, como si rebotara en los extremos), **scroll** (de un lado a otro, continuamente) o **slide** (de un lado a otro, pero una sola vez).

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">A través del atributo **direction** puede modificarse la dirección en la que se moverá el texto. Puede tomar los valores **down** (de arriba a abajo), **up** (de abajo a arriba), **left** (de derecha a izquierda) o **left** (de izquierda a derecha).

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">También es posible establecer un color de fondo, a través del atributo **bgcolor**.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo, para insertar la siguiente marquesina:


 * Esto es una marquesina...... vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv . . ||

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Habría que escribir:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**<marquee bgcolor=//"#006699"// behavior="alternate" direction="right"> <font color=//"#FFFFCC"// size=//"5"//>//Esto es una marquesina//  **

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">También es posible insertar imágenes, tablas y otros elementos entre las etiquetas ** ** y <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** **, no sólamente texto. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">**Hiperenlaces** = <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva a una página o archivo.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas **<a>** y **</a>**.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">A través del atributo **href** se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario haga clic en el enlace.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo, para insertar un enlace a la página del colegio:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**Visita** **__www.peleteiro.com__**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Habría que escribir:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**Visita <a href=//"http://www.peleteiro.com"//>//www.peleteiro.com//</a>**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 110%; text-align: start;">** Tipos de referencias ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Existen diferentes formas de expresar una referencia a una página a través del atributo **href**.

<span style="color: #145714; font-family: arial,helvetica,sans-serif; font-size: 110%; text-align: start;">** * Referencia absoluta: ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por http: //,// el nombre del dominio y algunas veces el nombre de la página. Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Para insertar el enlace: //**Visita** **__www.peleteiro.com__**//

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Habría que escribir:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">//**Visita <a href=**//**"http://www.peleteiro.com"//>//www.peleteiro.com//</a>//**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** * Referencia relativa al sitio: ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un **conjunto de archivos y carpetas**, relacionados entre sí, con un diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como **carpeta raíz del sitio**.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo, si tenemos un documento llamado **productos.htm** que se encuentra en la carpeta raíz del sitio, y queremos enlazar nuestra página actual con él (la página actual también esta en la carpeta raíz del sitio):

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**__Consulte nuestros productos__**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Habría que escribir:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">//**<a href="**//**/productos.htm"//>// Consulte nuestros productos //</a>//**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Observa como aparece el símbolo "**/**" delante del nombre del documento. Esta barra inclinada indica la carpeta raíz del sitio. Si el documento **productos.htm** se encontrara, por ejemplo, dentro de una carpeta llamada **catalogo**, y esta estuviera dentro de la carpeta raíz del sitio, habría que escribir:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">//**<a href=****"catalogo/productos.htm">Consulte nuestros productos</a>**//

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 110%; text-align: start;">** Destino del enlace ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del atributo **target** al que se le puede asignar los siguientes valores:


 * **_blank:** || Abre el documento vinculado en una ventana nueva del navegador. ||
 * **_parent:** || Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. ||
 * **_self:** || Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. ||
 * **_top:** || Abre el documento vinculado en la ventana completa del navegador. ||

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Para insertar el enlace:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">//**__Visita www.peleteiro.com en una ventana nueva__**//

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Habría que escribir:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">//**<a href=**//**"http://www.peleteiro.com" //target ="_blank">//Visita www.peleteiro.com en una ventana nueva//</a>//**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Es interesante utilizar esta opción cuando la página de destino está fuera de nuestro sitio para que cuando el usuario cierre la ventana del explorador, se encuentre automáticamente en la página desde la que había salido (que vuelva a nuestro sitio).

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 110%; text-align: start;">** Vínculos de correo electrónico ** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Este tipo de enlaces o vínculos abren la aplicación Outlook Express para escribir un correo electrónico, cuyo destinatario será el especificado en el enlace. Para ello la referencia del vínculo debe ser **"mailto:direcciondecorreo"**.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo, para insertar un enlace que permita enviar un correo electrónico al colegio, tal como este:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**__Pulsa aquí para enviar un e-mail para al Colegio Peleteiro__**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Habría que escribir:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">//**<a href=**//**"//mailto://webmaster@peleteiro.com"//>//Pulsa aquí para enviar un e-mail para el Colegio Peleteiro//</a>//**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Después de hacer clic en el enlace se abrirá el Outlook Express (si el usuario lo tiene instalado) con la pantalla para redactar un nuevo mensaje y con el campo destinatario completado con la **dirección de correo**. Podemos hacer que esté completado algún campo más como es el asunto.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">En este caso habría que escribir:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">//**<a href=**//**"//mailto://webmaster@peleteiro.com//?subject=//el asunto del mensaje"//>//e-mail para el Colegio Peleteiro//</a>//**

<span style="color: #000080; font-family: arial,helvetica,sans-serif; font-size: 140%; text-align: start;">**Vínculos a ficheros para descarga** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">El valor del atributo **href** normalmente será una página web (con extensión htm, html, asp, php...) pero también puede ser un fichero comprimido, una hoja de Excel, un documento Word, un documento con extensión pdf. Cuando el enlace no es a una página Web nos aparecerá el cuadro de diálogo que seguro habrás visto alguna vez en el que el navegador le pide al usuario permiso para descargar el fichero en su ordenador. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">El navegador reconoce algunas extensiones como asociadas a un determinado programa (por ejemplo la extensión .doc está asociada al programa Word, .pdf al programa Acrobar Reader, .xls al programa Excel...) en este caso en el cuadro de diálogo aparece una nueva opción, la de abrir el fichero sin descargarlo en el disco duro del usuario. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Para nombrar el fichero podemos utilizar según el caso, una referencia externa, una referencia relativa al sitio o una referencia relativa al documento.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo, en la carpeta donde se encuentra esta página tenemos el fichero Word carta.doc y queremos que nuestros visitantes puedan visualizar e incluso descargar el fichero en su disco duro, en este caso definiremos el enlace:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**__haz clic aquí para descargarte el fichero__**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">De la siguiente forma:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">//**<a href=**//**"carta.doc" //target=_blank >//haz clic aquí para descargarte el fichero//</a>//**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">En este caso hemos utilizado una referencia relativa al documento ya que la carta se encuentra en la misma carpeta que nuestra página. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">**Imágenes** =

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">En una página web podemos incluir elementos multimedia (vídeo, sonido, imágenes,...) <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Para colocar una imagen en un documento debemos utilizar la etiqueta <IMG> <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Estas imágenes son archivos externos al archivo html, es decir, las imágenes son archivos independientes al archivo donde serán insertadas. Los archivos de las imágenes deben encontrarse en Internet y serán descargados en la máquina cliente que esté visualizando la página web, es decir, formarán parte del sitio web de la página donde han sido insertadas. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">El lugar de la página donde aparecerán será donde hayamos incorporado el tag <IMG> <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">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:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**<IMG SRC = “nombrearchivo.extension”>**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Para una correcta administración de los archivos de un sitio web crearemos una carpeta, por ejemplo **imágenes** en el directorio donde grabemos los archivos html, para guardar las imágenes.

**<IMG SRC = “NombreCarpeta/nombrearchivo.extension”>**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">__Ejemplo:__ <IMG SRC = “imagenes/claveles.gif”>

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">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. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">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.

<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 110%; text-align: start;">**Imágenes como fondo de una página** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Otra forma de usar las imágenes en tus páginas web es la de usarlas como fondo. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">El navegador coloca en modo de mosaico la imagen utilizada. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">La colocación de fondos gráficos se hace mediante un atributo de BODY **BACKGROUND =** “ruta/nombre_imagen.extensión”

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**RECUERDA:** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imágenes, o una carpeta destinada a almacenar archivos de audio,** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**etc.**

<span style="color: #000080; font-family: arial,helvetica,sans-serif; font-size: 110%; text-align: start;">**Texto alternativo** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">El texto alternativo se muestra al situar el puntero sobre la imagen. También nos sirve en caso de que no se encuentre la imagen y así pueda mostrar un mensaje de error relativo al nombre de la imagen. Por ejemplo:

**<img src=****"imagenes/rosas.jpg" alt="Ramo de rosas rojas" >**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Al situar el puntero sobre la imagen durante unos segundos, verías como aparece el texto: **Ramo de rosas rojas**. Y en caso de no encontrar la imagen aparecería el siguiente mensaje de error:


 * ** X ** Ramo de rosas rojas ||

<span style="color: #000080; font-family: arial,helvetica,sans-serif; font-size: 110%; text-align: start;">**Borde de una imagen** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">En general, al visualizar una página en un navegador las imágenes aparecen sin ningún borde alrededor, pero es posible establecer uno a través del atributo **border**. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">El atributo **border** puede tomar valores numéricos, que indican el grosor en píxeles del borde.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo, para insertar una siguiente imagen con borde habría que escribir:

**<img src=****"imagenes/patio.jpg" border="4" >**

<span style="color: #000080; font-family: arial,helvetica,sans-serif; font-size: 110%; text-align: start;">**Tamaño de una imagen** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Cuando insertamos una imagen, ésta se muestra en los navegadores con su tamaño original, pero por diversos motivos puede interesarnos modificar dicho tamaño. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">A través de los atributos **width** (anchura) y **height** (altura) puede modificarse el tamaño de la imagen. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la imagen en el navegador. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">El valor que pueden tomar los atributos **width** y **height** ha de ser un número, acompañado de % cuando se desee que sea en porcentaje con respecto a la página.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo, para insertar una imagen (cuyo tamaño original era de 510 píxeles de anchura y 341 píxeles de altura) con 320 píxeles de anchura y 100 píxeles de altura habría que escribir:

**<img src=****"imagenes/santiago.jpg" width="320" height="100">**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Al modificar el tamaño de la imagen a través de estos atributos es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo, como Photoshop o Gimp. Por tanto esta técnica no la utilizaremos demasiado porque será preferible redimensionar las imágenes desde un editor como Photoshop o Gimp.

<span style="color: #000080; font-family: arial,helvetica,sans-serif; font-size: 110%; text-align: start;">**Alineación de una imagen** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">La alineación de las imágenes se establece igual que con los textos a través de la etiqueta ** o **

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo, para alinear una imagen en las siguientes posiciones de la página utilizaríamos:


 * = **EXPRESIÓN** ||= **SIGNIFICADO** ||
 * <div align= “left**”>**<img src="imagenes/EQUIPO.JPG"> || Alinear la imagen a la izquierda de la pantalla ||
 * <div align= “center**”>**<img src="imagenes/EQUIPO.JPG"> || Alinear la imagen en el centro de la pantalla ||
 * <div align= “right**”>**<img src="imagenes/EQUIPO.JPG"> || Alinear la imagen a la derecha de la pantalla ||

<span style="color: #000080; font-family: arial,helvetica,sans-serif; font-size: 110%; text-align: start;">**Imágenes con hipervínculo** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Para insertar una imagen con un enlace utilizaremos la sintaxis ya vista en el apartado de hiperenlaces. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">En este caso en concreto habría que escribir:

**<a href="http://www.perrosygatos.com" target ="_blank" ><img src="imagenes/8232.jpg" border="0" ></a>**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Si se desea establecer un vínculo sobre una imagen y no se desea que se muestre el borde (que por su color indica que existe dicho vínculo), es necesario establecer **border=****"0".**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**Consulta en el siguiente PDF como hacer una galería de fotos en HTML** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">**Tablas ** 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.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Dentro de la tabla tienen que existir filas y columnas. En las tablas de HTML, crearemos cada una de las filas utilizando las etiquetas **<TR></TR>** y dentro de la fila definimos cada columna 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>**. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Si queremos añadir un título a la tabla, lo introduciremos entre las etiquetas: **<CAPTION>** y **</CAPTION>**.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**En resumen:**


 * ** ** || Definen el principio y el final de la tabla ||
 * **<TR></TR>** || Definen una fila de la tabla ||
 * **<TH>** y **</TH>** || Permite definir la fila que será cabecera de la tabla. ||
 * **<TD>** y **</TD>**. || Define cada una de las celdas que forman una fila. Se utilizan dentro de las etiquetas **<TR></TR> o <TH>** y **</TH>** ||
 * **<CAPTION>** y **</CAPTION>**. || Se utilizará para poner un título en la tabla ||

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Es posible modificar los siguientes **atributos de una tabla** :


 * **Atributo** || **Significado** || **Posibles valores** ||
 * **width** || ancho de la tabla || un número, acompañado de % cuando se desee que sea en porcentaje ||
 * **height** || altura de la tabla || un número, acompañado de % cuando se desee que sea en porcentaje ||
 * **cellpadding** || espacio entre el contenido de las celdas y el borde || un número ||
 * **cellspacing** || espacio entre celdas || un número ||
 * **border** || grosor del borde || un número ||
 * **align** || alineación de la tabla dentro de la página || **left** (izquierda)
 * right** (derecha)
 * center** (centro) ||
 * **bgcolor** || color de fondo || número hexadecimal ||
 * **background** || imagen de fondo || archivo de imagen ||
 * **bordercolor** || color del borde || número hexadecimal ||

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">__Ejemplo__:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** **

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">//Con esto indicamos que el ancho (**width**) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y verás que el ancho de la tabla varía para ocupar siempre la mitad de la ventana), que el borde (**border**) tiene un grosor de dos píxeles, que la tabla está alineada al centro (**center**) de la ventana, que no hay espacio entre las celdas (**cellspacing**="0"), que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99).//

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Es posible modificar los siguientes **atributos de una celda** :


 * **Atributo** || **Significado** || **Posibles valores** ||
 * **width** || ancho de la tabla || un número, acompañado de % cuando se desee que sea en porcentaje ||
 * **height** || altura de la tabla || un número, acompañado de % cuando se desee que sea en porcentaje ||
 * **align** || alineación horizontal del contenido de la celda || **left** (izquierda)
 * right** (derecha)
 * center** (centro) ||
 * **valign** || alineación vertical del contenido de la celda || **baseline** (línea de base)
 * bottom** (inferior)
 * middle** (medio)
 * top** (superior) ||
 * **bgcolor** || color de fondo || número hexadecimal ||
 * **background** || imagen de fondo || Nombre de archivo de imagen ||
 * **bordercolor** || color del borde || número hexadecimal ||

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">También es posible modificar estos atributos en toda una fila, especificándolos en la etiqueta ** **, en lugar de en la etiqueta ** **.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla.

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Por ejemplo, si escribiéramos el siguiente código:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** **

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Obtendríamos la siguiente tabla:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"> <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Se ha establecido el color naranja como fondo de toda la tabla, pero con la línea de código **<tr align="center" bgcolor=//"#0099CC"//>** y un color azul como color de fondo de la primera fila, por lo que dicha fila se mostrará de color azul, y no de color naranja. Al mismo tiempo, se ha cambiado el color de la segunda celda de la primera fila por el color verde, a través de la línea **<td bgcolor=//"#66CC99"//>//Domingo// ** por lo que esta fila en vez de ser azul será verde, los atributos de celda tienen prioridad sobre los de la fila. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">

=<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 22.4px; text-align: start;">**Listas** = <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">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). <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">Podemos recurrir a tres tipos distintos de listas, cada una con una presentación diferente: no numeradas, numeradas y listas de definiciones (glosarios). <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">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 ||

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">** Ejemplo 1 **: Lista no numerada: <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**<UL>** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><LI>Tomates <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><LI>Zanahorias <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><LI>Puerros <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**</UL>**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"> **Ejemplo 2** : Lista numerada: <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**<OL>** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><LI>Miguel Induráin <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><LI>Tony Rominger <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><LI>Eugeni Berzin <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**</OL>**

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">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>).

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"> **Ejemplo 3** : Lista de definición:

<span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**<dl>** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><dt>Perro (n. masc.) <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><dd>Animal de cuatro patas que ladra. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><dt>Gato (n. masc.) <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><dt>Pescadilla (n. fem.) <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;"><dd>Animal que vive en el mar y está recubierto de escamas. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**</dl>**

<span style="color: #800000; font-family: arial,helvetica,sans-serif; font-size: 110%; text-align: start;">**Atributos para las Listas** <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">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. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">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). <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">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 <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">**START**=5 se mostraría como 'E', 'e', 'V', 'v', o '5' según el tipo. <span style="color: #000000; font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: start;">