Información por hipertexto: Diversos elementos (texto o imágenes) de la información que se nos muestra en la pantalla están vinculados con otras informaciones que pueden ser de otras fuentes. Para mostrar en pantalla esta otra información bastará con hacer clic sobre ellos.
Gráfico: En la pantalla aparece simultáneamente texto, imágenes e incluso sonidos.
Global: Se puede acceder a él desde cualquier tipo de plataforma, usando cualquier navegador y desde cualquier parte del mundo.
Pública: Toda su información está distribuida en miles de ordenadores que ofrecen su espacio para almacenarla. Toda esta información es pública y toda puede ser obtenida por el usuario.
Dinámica: La información, aunque esta almacenada, puede ser actualizada por el que la publico sin que el usuario deba actualizar su soporte técnico.
Independiente: Dada la inmensa cantidad de fuentes, es independiente y libre.

Navegador: Es el programa que nos ofrece acceso a Internet. Debe ser capaz de comunicarse con un servidor y comprender el lenguaje de todas las herramientas que manejan la información de Web. Puede decirse que cada casa de software podría tener su navegador propio, aunque los mas populares sean Netscape e Internet Explorer.
Servidor: Se encarga de proporcionar al navegador los documentos y medios que este solicita. Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un navegador.
HTTP: Es el protocolo de transferencia de hipertexto, o sea, el protocolo que los servidores de WorldWde Web utilizan para mandar documentos HTML a través de InTernet.
URL: Es el Localizador Uniforme de Recursos, o dicho mas claramente, es la dirección que localiza una información dentro de Internet.
HTML: De momento, le basta saber que estas siglas se corresponden con la definición "Lenguaje para marcado de hipertexto". Más claro aún, se trata de un lenguaje para estructurar documentos a partir de texto en World Wide Web. Este lenguaje se basa en tags (instrucciones que le dicen al texto como deben mostrarse) y atributos (parámetros que dan valor al tag).



Organización de una Página Web
Para hacer una buena presentación Web lo ideal es crearnos un boceto inicial de la estructura. Si hacemos esto, no solo estamos procurando una presentación agradable y facilitando la tarea de navegar sino que también nos facilitamos el mantenimiento de futuras revisiones y modificaciones.
Objetivos
Lo primero que debemos hacer el fijarnos los objetivos que queremos alcanzar según la información que vayamos a aportar. Para crear nuestra primera página, estos objetivos deberían no ser muy pretenciosos o tener un sentido únicamente personal. Tener claros los objetivos nos ayudara a no plasmar contenidos confusos o innecesarios.
Contenidos
Una vez tenemos los objetivos, hay que organizar el contenido por temas o secciones, que se ajusten a nuestros objetivos, reuniendo las informaciones relacionadas bajo el mismo epígrafe. Es conveniente que los temas sean razonablemente cortos y si fuera necesario divida en subtemas. Si por el contrario tenemos temas muy cortos, lo correcto sería agruparlos bajo un encabezado de tema algo más general.
Primer paso
Una presentación Web consiste de una o más páginas Web que contienen texto y gráficos y que están vinculadas entre si creando un cuerpo de información. La página principal o página base es desde donde se comienza a visitar la presentación y su URL será la que figure como dirección de la presentación. Esta página base debe ofrecer un panorama general del contenido de la presentación.
Organización
Ha llegado la hora de estructurar la información recopilada en un conjunto de páginas Web. Podemos crearnos una estructura propia pero lo más lógico es guiarnos por una estructura clásica.
Secuenciación
Consiste en decidir que contenido va en cada página, elaborar la trama de vínculos para navegar entre ellas e incluso, hacernos una idea de que tipo de gráficos vamos a poner y que ubicación van a tener. Para ello puede utilizarse un esquema gráfico que nos ayudará a recordar en todo momento donde encaja cada página en el global de la presentación.
Revisión de objetivos
Finalmente y antes de ponernos a crear nuestra presentación Web, debemos prestar atención a que lo que tenemos plasmado en el esquema gráfico y cubre los objetivos que nos habíamos propuesto. Si es así, ya podemos comenzar a manejarnos con HTML.


El lenguaje HTML
Como ya se ha dicho, este lenguaje estructura documentos. La mayoría de los documentos tienen estructuras comunes (títulos, parrafos, listas...) que van a ser definidas por este lenguaje mediante tags. Cualquier cosa que no sea una tag es parte del documento mismo.
Este lenguaje no describe la apariencia del diseño de un documento sino que ofrece a cada plataforma que le de formato según su capacidad y la de su navegador (tamaño de la pantalla, fuentes que tiene instaladas...). Por ello y para no frustrarnos, no debemos diseñar los documentos basándonos en como lucen en nuestro navegador sino que debemos centrarnos en proporcionar un contenido claro y bien estructurado que resulte fácil de leer y entender.
No se desespere por lo que acaba de leer. HTML tiene dos ventajas que lo hacen prácticamente imprescindibles a la hora de diseñar una presentación web: Su compatibilidad y su facilidad de aprendizaje debido al reducido número de tags que usa.
Básicamente, los documentos escritos en HTML constan del texto mismo del documento y las tags que pueden llevar atributos. Esto llevado a la práctica, vendría a ser:
<tag> texto afectado </tag>

La tag del principio activa la orden y la última (que será la del principio precedida del signo /) la desactiva. No todas las tags tienen principio y final pero esto lo veremos más adelante.

Editores y convertidores
¿Dónde hay que editar el código fuente? Pues, si usted es usuario de Windows le bastaría con el Bloc de Notas y si utiliza Macintosh con el Simple Text. Si utiliza procesadores de texto más potentes debe guardar sus documentos como "solo texto" ya que HTML ignora todos los espacios en blanco. Una vez guardado convierta la extensión de texto por la extensión html o htm (en los sistemas DOS).
Los convertidores se utilizan para tomar los archivos de un procesador de textos y convertirlos a HTML. Pero debido a la propia limitación de este lenguaje, por muy elegante que hagamos un documento en nuestro procesador, un convertidor no obrará milagros y quizá acabe por crear cosas ilegibles en HTML. Además, la mayoría de los convertidores no convierten imágenes y no automatizan los vínculos hacia los documentos en Web debiendo corregir esto de manera manual.
¿Qué son los elementos y las etiquetas de HTML?
Los elementos son declaraciones para visualizar o dar forma a una página Web.
Las etiquetas(en inglés: tags) son marcas insertadas en un documento HTML para proporcionar información sobre una unidad o contenido.


Reglas básicas
Las etiquetas están encerradas entre los signos "<" y ">".
Generalmente vienen en pares <p> y<⁄p>.
La primera es de apertura y la segunda de cierre.
El texto que se encuentra entre dos etiquetas es el contenido del elemento.
Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea <b> es lo mismo que <B>.


Etiquetas de HTML
Veamos un ejemplo.

<html>
<head>
<title>Una página Web</title>
</head>
<body>
Hola a todos. <b>Este texto es en negrita</b>
</body>
</html>


Esta es una etiqueta HTML:

<b>Este texto es en negrita.</b>


El elemento HTML comienza con la etiqueta de apertura <b>(etiqueta que nos muestra el texto en negrita).
El contenido de dicho elemento es: Este texto es en negrita.
El fin del elemento HTML es con la etiqueta de cierre </b>.


Otro elemento HTML en el ejemplo es:

<body>
Hola a todos. <b>Este texto es en negrita</b>
</body>


EL elemento HTML comienza con la etiqueta de apertura <body>(etiqueta que define el cuerpo del documento).
El contenido de dicho elemento es: Hola a todos. <b>Este texto es en negrita</b>.
El fin del elemento HTML es con la etiqueta de cierre </body>.


¿Qué son los atributos de las etiquetas?
Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML.
Los atributos siempre van con la estructura: nombre="valor".
Los atributos siempre van en la etiqueta de apertura.
Los valores siempre hay que ponerlos entre comillas.


Un ejemplo de los atributos sería:

Código

<body bgcolor="#FFFF00">
Hola a todos. <b>Este texto es en negrita</b>
</body>
Resultado

Hola a todos. Este texto es en negrita


En la etiqueta <body> podemos observar el atributo bgcolor=(color de fondo) y el valor"#FFFF00"(representa el color amarillo en hexadecimal).
Esto quiere decir que el color de fondo de la página será amarillo.


Un consejo con respecto al uso de minúsculas.
Si bien HTML acepta tanto etiquetas en mayúscula <B> como en minúscula <b>, el World Wide Web Consortium (W3C) recomienda el uso de minúsculas. Además XHTML (la siguiente versión de HTML) acepta solo minúsculas.
Es por eso que recomendamos acostumbrarse a usar minúsculas cuando escribas sus códigos HTML.











Documento HTML
<HTML><HEAD><TITLE><BODY>
Estructura básica de un documento HTML: Cabecera y cuerpo del documento
Tres son las tags que describen la estructura general de un documento y dan una información sencilla sobre él. Estas tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML.
<HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.

<HEAD>: Especifica el prólogo del resto del archivo. Son pocas las tags que van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras tags dentro de él. En head no hay que colocar nada del texto del documento.

<BODY>: Encierra el resto del documento, el contenido.
<HTML> 
<HEAD> 
<TITLE>Ejemplo 1</TITLE> 
</HEAD> 
<BODY> 
Holamundo 
</BODY> 
</HTML> 











Primeros pasos
<H1><P><BR>
Tres son la tags que describen la estructura general de un documento y dan una información sencilla sobre él. Estas tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML.
<H1>, <H2>, <H3>...: Titulares. Sirven para dividir el texto en secciones. Se pueden definir seis niveles de titulares, el texto que deseamos que sea un titular se pone entre las tags <H1> Titular </H1>. Se definen mediante las tags <H1>.....</H1> hasta<H6>.....</H6>

<P>: Párrafos. En principio, sin entrar en detalles de alineación u otras características, digamos que se definen por las tags <P>.....<P>. Esta tag, en un principio, se diseñó para saltar de párrafo por lo que puede ir sola "<P>" al final de un texto indicando que a continuación se quiere una línea en blanco aunque le recomendamos que se acostumbre a utilizarla abriéndola y cerrándola.

<BR>: Saltos de línea. Esta tag sirve para realizar un salto de linea, puede poner tantas como desee y realizará un salto de línea por cada una de ellas.

<!-- -->: Comentarios. Son directivas que nunca se mostrarán a través del navegador y que le servirán para recordatorios en futuras revisiones del documento.
Bien, recuperemos nuestro ejemplo y agreguemos nuestros nuevos conocimientos.
<HTML> 
<HEAD> 
<TITLE>Ejemplo 2</TITLE> 
</HEAD> 
<BODY> 
   <H1>Mi primera página</H1> 
    
   <!-- Aqui va un comentario que no es 
      interpretado por el navegador --> 
    
<P>Hola mundo, esta es un página con titular, 
que tiene también un párrafo y unos cuantos 
saltos de línea.</P> 

Uno<br> 
Dos<br> 
Tres<br> 
</BODY> 
</HTML> 



Formato básico del texto
HTML nos permite definir el formato de visualización del texto en la pantalla.

Muy útil para cuando queramos resaltar o enfatizar una un texto en especial.

También muy usado para subrayar o escribir subíndices o superíndices.

Estos son solo algunos ejemplos de lo que podemos hacer con estos elementos

Para ello utilizamos las siguientes etiquetas:
Código

<b>Texto en negrita</b>
<big>Texto grande</big>
<em>Texto enfatizado</em>
<i>Texto en itálica</i>
<small>Texto pequeño</small>
<strong>Texto fuerte</strong>
<sub>Texto subíndice</sub>
<sup>Texto superíndice</sup>
<ins>Texto subrayado</ins>
<del>Texto tachado</del>
<tt>Texto teletipo</tt>
Resultado

Texto en negrita   Texto normal
Texto grande   Texto normal
Texto enfatizado   Texto normal
Texto en itálica   Texto normal
Texto pequeño   Texto normal
Texto fuerte   Texto normal
Texto subíndice   Texto normal
Texto superíndice   Texto normal
Texto subrayado   Texto normal
   Texto normal
Texto teletipo   Texto normal

Fondos de pantalla
El atributo background


Si queremos diseñar sitios más atractivos debemos utilizar imagenes o colores para el fondo de nuestras páginas.
El fondo se define en la etiqueta<body>.

Para insertar una imagen de fondo debemos utilizar el atributobackground dentro de la etiqueta<body>.

El valor de este atributo es la URL de la imagen que deseamos colocar.

Si la imagen es más pequeña que la pantalla del navegador, esta se repetirá tantas veces como sea necesario hasta cubrir toda la pantalla.


Ejemplos
<body background="paisaje.jpg">

<body background="http://www.virtualnauta.com/imagenes/punteado.gif">
El atributo bgcolor


El atributo bgcolor especifica el color de fondo de una página HTML. El valor del mismo puede expresarse con un número hexadecimal, valor RGB, o nombre de color(en inglés).

Este atributo también debe ir dentro de la etiqueta <body>

Ejemplos
<body bgcolor="#FF0000">
<body bgcolor="rgb(255,0,0)">
<body bgcolor="red">

Creación de enlaces
<A>
Lo característico del lenguaje HTML es el poder generar vínculos de hipertexto para enlazar con ellos todos sus documentos en web.
Para generar un enlace a otro documento necesitamos el nombre de un archivo (o su dirección URL) y el texto que servirá de punto de activación del otro documento. Este segundo elemento será el que veamos en pantalla y que se servirá del primero para saltar de documento.
Los enlaces se generan mediante la tag <A>.....</A> y, a diferencia de los vistos anteriormente, llevará siempre dentro de la tag un atributo ya sea <A HREF=""> o <A NAME="">.
<A HREF="URL">.....</A>: Es el más habitual de los atributos y sirve para saltar entre diferentes URLs. De momento veremos:
Saltar en una presentación del archivo 1 al archivo 2: En el archivo 1 incluiremos la directiva <A HREF="archivo2.html">Siguiente página</a>
Saltar de nuestra presentación a otra presentación web llamada www.bienvenidos.es: <A HREF="http://www.bienvenidos.es">Visita esta página</A>

<A NAME="parte1">Primera parte</A>: Utilizamos el atributo name para dar nombre a una sección de nuestro documento. Posteriormente, cuando en nuestro documento queramos incluir un vínculo a dicha sección escribiremos:<A HREF="#parte1">Ir a la primera parte</A>
<HTML> 
<HEAD> 
<TITLE>Ejemplo 3</TITLE> 
</HEAD> 
<BODY> 
   <A NAME="arriba"><H1>Página de enlaces</H1></A> 
   <A HREF="#abajo">Ir abajo</A><br> 

   <A HREF="ej4.html">Ir a ejemplo 4</A><br><br> 
   <A HREF="http://www.webestilo.com/">Ir a WebEstilo</A><br> 

   <br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br> 
   <br><br><br><br><br><br><br><br><br><br><br><br> 
   <br><br><br><br><br><br><br><br><br><br><br><br> 
   <br><br><br>.<br>.<br>.<br>.<br>.<br> 
    
   <A NAME="abajo"><br></A> 
   <A HREF="#arriba">Ir arriba</A> 

</BODY> 
</HTML> 




URLs
URL: Localizador Universal de Recursos
Los URL son las direcciones de las informaciones que buscamos en Internet. Los URL constan de tres partes:
Protocolo: Es el programa que utilizará el navegador para obtener el archivo elegido. Les suena HTTP, FTP, Gopher...
Nombre del host: Se trata del sistema donde se encuentra almacenada la información que buscamos.
Ruta del fichero: Se trata de la ubicación del archivo dentro del host.
http://www.bienvenidos.es/publico/saludos.html
Entre los principales tipos de URL destacan:
HTTP: Son los más populares ya que son los utilizados por los servidores de WWW para mandar documentos a través de Internet.
FTP: Se utilizan para apuntar hacia los archivos que estén en servidores que usan el protocolo FTP (File Transfer Protocol). Este protocolo es normalmente utilizado para enviar y recibir ficheros. Es el protocolo que se usa para enviar nuestras páginas al servidor de internet. Como ya se puede imaginar en estos servidores se almacenan los archivos que forman parte de nuestra presentación web.
File: Apuntan hacia archivos contenidos en el mismo disco que se encuentra el navegador. No resulta muy interesante poner estos URL en nuestras presentaciones puesto que otra persona que desde otro sistema apunte hacia este URL, generalmente fallará en su intento y no podrá tener acceso a él.
Mailto: Se usa para mandar correos electrónicos. Cuando seleccionamos este tipo de URL se abre la aplicación de correo electrónico de nuestro ordenador para enviar un correo a la dirección hacia la que apunta el URL. La forma estandares:mailto:webmaster@bienvenidos.es
News: Son URL de grupos de noticias, en estos servidores se almacenan mensajes el los que se discuten sobre direfentes temas.
<HTML> 
<HEAD> 
<TITLE>Ejemplo 5</TITLE> 
</HEAD> 
<BODY> 

<H1>Diferentes tipos de URLs</H1> 

Enlace a <A HREF="http://www.webestilo.com">WebEstilo</A>. 
<br> 
Enlace al servidor de FTP 
de <A HREF="ftp://ftp.mozilla.org/pub/mozilla/">Mozilla</A>. 
<br> 
Enlace a <A HREF="file:///C:">la unidad C 
de su ordenador</A>. 
<br> 
Enlace a <a href="mailto:webmaster@bienvenidos.es"> 
mailto:webmaster@bienvenidos.es</a>. 
<br> 
Enlace a las<A HREF="news://msnews.microsoft.com">News de Microsoft</A>. 
<br> 

</BODY> 
</HTML> 

Listas
<UL><OL><LI>
Junto con encabezados y párrafos, son otro de los elementos HTML más comunes. Pueden darse cinco tipos diferentes de listas, cada uno con tags distintas aunque con alguna en común:
Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol> y cada elemento de la lista estará encabezado por la tag <li> que puede o no llevar la tag de cierre </li>. Es conveniente que cada elemento de la lista esté en una línea nueva aunque todo seguido consiga en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones.

Listas con viñetas o sin orden: Se engloban por las tags <ul>.....</ul> y cada elemento de la lista, también estará encabezado por la tag <li>. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento.

Listas de menú y de directorio: Están en desuso puesto que su resultado suele ser, prácticamente, idéntico al de las listas con viñetas.
Menú: Englobadas por las tags <menu>.....</menu> y cada elemento encabezado por la tag <li>.
Directorio: Englobadas por las tags <dir>.....</dir> y cada elemento encabezado por la tag <li>.

Listas de glosario: Cada elemento de la lista está compuesto por un término y una definición y cada una de estas partes tiene su propia tag. Estas listas se engloban con las tags <dl>.....</dl>. Para el término se usa la tag <dt> y para la definición la tag <dd>. Generalmente el navegador colocará término y definición en dos líneas diferentes pero esto se puede evitar añadiendo a la tag de apertura el atributo compact: <dl compact>.

Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal englobarán todo el conjunto de las listas y las tags de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir sangrar el propio código conforme lo va escribiendo en HTML.
<HTML> 
<HEAD> 
<TITLE>Ejemplo 6</TITLE> 
</HEAD> 
<BODY> 

<H1>Listas</H1> 
Una lista ordenada 
<ol> 
<li>Uno</li> 
<li>Dos</li> 
<li>Tres</li> 
</ol> 
<br><br> 
Una lista sin ordenar 
<ul> 
<li>Uno</li> 
<li>Dos</li> 
<li>Tres</li> 
</ul> 
<br><br> 
Una lista de glosario 
<dl> 
<dt>T&eacute;mino 1</dt> 
<dd>Definici&oacute;n 1</dd> 
<dt>T&eacute;mino 2</dt> 
<dd>Definici&oacute;n 2</dd> 
</dl> 
<br><br> 

Listas anidadas 
<ul> 
<li>Uno 
   <ul> 
   <li>Uno</li> 
   <li>Dos</li> 
   <li>Tres</li> 
   </ul> 
</li> 
<li>Dos</li> 
<li>Tres</li> 
</ul> 
</BODY> 
</HTML> 

Estilos de caracter
<B><U><I>
Estos estilo son tags que afectan a palabras o carácteres dentro de otras entidades de HTML modificando el aspecto de ese texto para que sea diferente del texto que lo rodea. Existen dos tipos de estilos:
Estilos lógicos: Indican como se va a emplear el texto que realzamos, no el como se va a formatear.
<em>.....</em>: Indica que los carácteres estarán enfatizados de alguna manera, generalmente en cursiva aunque dependerá del navegador.
<strong>.....</strong>: Los carácteres tendrán mayor énfasis, generalmente en negrita.
<code>.....</code>: Muestra como una fuente monoespaciada, generalmente Courier.
<samp>.....</samp>: Muy similar a code.
<kdb>.....</kdb>: Texto que el usuario debe escribir.
<var>.....</var>:Nombre de una variable que deba ser reemplazada por su valor real. Generalmente en cursiva o subrayada.
<dfn>.....</dfn>:Se usa para resaltar una palabra que se va a definir.
<cite>.....</cite>: Se usa para citas cortas.

Estilos físicos: Modifican la presentación real del texto.
<b>.....</b>: Pone el texto en negrita.
<i>.....</i>: Pone el texto en cursiva.
<tt>.....</tt>: Pone el texto en fuente monoespaciada.
<u>.....</u>: Subraya el texto afectado.
<HTML> 
<HEAD> 
<TITLE>Ejemplo 7</TITLE> 
</HEAD> 
<BODY> 

<H1>Estilos de caracter</H1> 
Un ejemplo de texto de <EM>realzado</EM>.<br> 
Un ejemplo de texto de <STRONG>realzado</STRONG>.<br> 
Un ejemplo de texto de <CODE>realzado</CODE>.<br> 
Un ejemplo de texto de <SAMP>realzado</SAMP>.<br> 
Un ejemplo de texto de <KDB>realzado</KDB>.<br> 
Un ejemplo de texto de <VAR>realzado</VAR>.<br> 
Un ejemplo de texto de <DFN>realzado</DFN>.<br> 
Un ejemplo de texto de <CITE>realzado</CITE>.<br> 
<br> 
Un ejemplo de texto de <B>realzado</B>.<br> 
Un ejemplo de texto de <I>realzado</I>.<br> 
Un ejemplo de texto de <U>realzado</U>.<br> 
Un ejemplo de texto de <TT>realzado</TT>.<br> 

</BODY> 
</HTML> 

Texto preformateado
<PRE>
Ya dijimos que HTML elimina cualquier espacio en blanco adicional que se inserte pero nos encontramos con una excepción a esta regla cuando utilizamos las tags<pre>.....</pre>. Sin embargo esta tag convertirá el texto afectado a fuente monoespaciada (posiblemente Courier).
Esta tag se usaba para hacer tablas en versiones anteriores del lenguaje HTML ahora su utilidad puede reducirse a convertir a HTML, rápida y fácilmente, archivos de correo electrónico y publicaciones de grupos Usenet.
<HTML> 
<HEAD> 
<TITLE>Ejemplo 8</TITLE> 
</HEAD> 
<BODY> 

<H1>Texto preformateado</H1> 

Diferencia entre un texto normal y 
un texto preformateado. En el texto 
preformateado, se respetan los 
car&aacute;cteres y los espacios.<br> 
iiiiii<br> 
wwwwww<br> 

<PRE> 
Diferencia entre un texto normal y 
un texto preformateado. En el texto 
preformateado, se respetan los 
car&aacute;cteres y los espacios.<br> 
iiiiii<br> 
wwwwww<br> 
</PRE> 

</BODY> 
</HTML> 

Saltos y lineas
<HR><BR>
Líneas divisorias: Se crean con la tag <hr> que no tiene tag de cierre ni lleva texto asociado. Se puede especificar el ancho de la línea con el siguiente atributo
<hrwidth="80%">.

Saltos de línea: La tag <br> inserta un salto de línea donde se coloque. Puede colocar tantas como desee y se insertará un salto de línea por cada una de ellas.
<HTML> 
<HEAD> 
<TITLE>Ejemplo 9</TITLE> 
</HEAD> 
<BODY> 

<H1>Saltos y lineas</H1> 

<HR> 
<HR width="80%"> 
<HR width="60%"> 
<HR width="40%"> 
<HR width="20%"> 

---- 
<br><br><br> 
---- 
</BODY> 
</HTML> 





Imágenes
<IMG>
El uso de imágenes es uno de los factores que ha popularizado tanto World Wide Web. Incluir imágenes en una presentación web es muy sencillo, solo debe de tener en cuenta que las imágenes tienen que tener los formatos GIF, JPEG o PNG. Las imágenes en línea, se especifican a partir de la tag <img> que no tiene una tag correspondiente de cierre pero que puede acompañarse de los siguientes atributos:
src= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar.

Align= Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los tres valores posibles son los ya conocidos left, right, top, middle y bottom.

Alt= Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima.

WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar.

HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen.

BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un bebé">





<HTML> 
<HEAD> 
<TITLE>Ejemplo 12</TITLE> 
</HEAD> 
<BODY> 

<H1>Im&aacute;genes</H1> 

   <IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un beb&eacute;" ALIGN="RIGHT"> 
   <IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=3 ALT="Un beb&eacute;" ALIGN="LEFT"> 
Un texto cualquiera. 
</BODY> 
</HTML> 
Mapas de imágenes
<MAP><AREA>
Puede hacer que parte de la imagen sea un enlace a otra página, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces. Las tags usadas para esto son:
Las tags <map>.....</map> identifican que vamos a crear un mapa de imágenes. Generalmente, lleva asociado el atributo name= al que le sigue entre comillas el nombre del mapa.
La tag <area> define las áreas que vamos a poder activar en esa imagen. A esta tag le acompañan los siguientes atributos:
shape= Entre comillas estableceremos el tipo de área a definir. Puede tratarse de rect (rectangular), poly (poligonal) o circle (circular).
Coords= Entre comillas indicaremos los pares de coordenadas de cada punto del área a activar. Estas coordenadas las podemos averiguar utilizando un programa de edición de imágenes. En las áreas rectangulares deben especificarse las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. En las poligonales especificaremos las coordenadas de todos los vértices del área. En las circulares indicaremos las coordenadas del centro del circulo y el valor del radio.
Href= Como ya sabe, indica la dirección, entre comillas, de la página web a la que accede si pinchamos en un área determinada.
Finalmente, debe saber que para que una imagen sea tratada como un mapa, además de el código anteriormente descrito, debe incluir en la tag de imagen correspondiente a la imagen a mapear el atributo usemap="#nombre del mapa".


<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210
BORDER=0 ALT="Un bebé" USEMAP="#bebe1">

<MAP NAME="bebe1">
<AREA SHAPE=CIRCLE COORDS="60,56,47"
HREF="#" ALT="Cabeza">
<AREA SHAPE=POLY COORDS="3,182,36,178,
44,165,60,169,66,184,62,196,
43,201,35,190,0,193,0,183"
HREF="#" ALT="Sonajero">
</MAP>




Tablas
<TABLE><TR><TD>
Las tablas surgieron con la versión HTML 3.0. Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente.
El contenido de una tabla lo debemos desarrollar entre las tags <table>.....</table>.
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se calcularán automáticamente según las celdas que hay en cada fila.
Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las tags <th> y <td>con sus correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags <td>.....</td> indican que se trata de celdas comunes.
<HTML> 
<HEAD> 
<TITLE>Ejemplo 10</TITLE> 
</HEAD> 
<BODY> 

<H1>Tablasb&aacute;sicas</H1> 

<TABLE BORDER="1"> 
<TR> 
   <TH>Cabereca 1</TH> 
   <TH>Cabereca 2</TH> 
   <TH>Cabereca 3</TH> 
</TR> 
<TR> 
   <TD>Dato 1</TD> 
   <TD>Dato 2</TD> 
   <TD>Dato 3</TD> 
</TR> 
<TR> 
   <TD>Dato 4</TD> 
   <TD>Dato 5</TD> 
   <TD>Dato 6</TD> 
</TR> 
</TABLE> 

</BODY> 
</HTML> 




















Accesorios
Título
Cuando queramos titular una tabla, podemos escribirlo como texto normal o usando las tags <caption>.....</caption>. Las tags de título van dentro de las tags de la tabla y son opcionales, el título no es obligatorio. La tag de apertura puede llevar consigo el atributo align que indicará si el título va encima o debajo de la tabla. align="top" indicaría encima de la tabla y align="bottom" indicaría en la parte de abajo.
Alineación de celdas
Una vez colocadas las celdas, hay que alinear los datos dentro de cada celda. Así, dentro de cada tag de celda podemos encontrar:
El atributo align= define horizontalmente los datos al margen izquierdo (left), al derecho (right) o centrado (center).
El atributo valign= define verticalmente los datos en la parte superior (top), en la parte inferior (bottom) o centrado (middle).
Celdas extendidas
Para crear una celda que abarque varias filas o columnas, debemos colocar en las tags<th> o <td> los atributos:
rowspan= más un valor para indicar el número de filas que se quiere abarcar.
colspan= más un valor para indicar el número de columnas que se quiere abarcar.
Si opta por poner celdas extendidas en su presentación web, la cosa se complica bastante. Nuestra recomendación: Coja lápiz y papel y dibuje la tabla con todas las filas y columnas que se quieren formar porque así tendrá mucho más claro los valores que debe asignar a los atributos rowspan y colspan y las tags a las que hay que asignarlos.
][/color]

Comenten o hay tabla!!!!!!!!!!!!