Esta guía la dividiremos en varios apartados

El HTML ( HiperText Markup Language ) es el lenguaje utilizado para representar documentos en la WWW (World Wide Web). Además de texto normal incluye también, elementos multimedia (gráficos, vídeo, audio) y existen enlaces (links) que permiten saltar a otras partes del documento o a otro sitio cualquiera de Internet.

Las etiquetas constituyen la filosofía de este lenguaje. Por medio de ellas se pueden controlar los elementos tipográficos del texto: tipo, color y tamaño de las fuentes, el estilo ( negrita, cursiva, etc ), así como también la inclusión de tablas, listas, formularios, la inserción de fotos, sonidos, fondos, los enlaces mencionados anteriormente. etc.
Las etiquetas se pueden modificar por medio de sus atributos, éstos son del tipo atributo="valor" y se colocan detrás del nombre de la etiqueta
El nombre de la etiqueta y sus atributos se colocan entre los símbolos < y > y normalmente se usan dos, una de inicio y otra final, para conseguir el efecto deseado.
Por ejemplo si escribimos
<FONT COLOR="#ff0000" size="2">El texto se verá rojo y en tamaño un poco menor de lo normal </font>

Se verá como El texto se verá rojo y en tamaño un poco menor de lo normal

El uso de estas etiquetas, y por ende el aprendizaje del HTML, no es difícil. Precisamente el objetivo de esta pequeña guía es servir de introducción y referencia de las características más usadas del HTML

 

Probablemente la característica que más ha influido, junto con las imágenes, en el espectacular desarrollo de la Web hayan sido los enlaces (links). Un enlace aparece generalmente como un texto azul subrayado y cuando situamos el cursor sobre él se transforma en una mano con el dedo índice extendido. Si pulsamos sobre el enlace saltamos a otra parte del documento, a otro documento situado en cualquier lugar, o incluso se abre el programa de correo para enviar un mensaje a la dirección indicada.

En general los enlaces tienen la siguiente estructura

<A HREF="URL"> Texto del enlace</A>

El texto del enlace es lo que se visualizará en el navegador. La URL es la dirección donde apunta el enlace y puede ser de estos tipos:

  Enlace a otro lugar del mismo documento

En este caso la URL se sustituye por un marcador en la misma página. El marcador puede ser texto colocado en el lugar al que queremos saltar. No importa lo que sea ya que no se verá.
Veamos un ejemplo para saltar al inicio de esta página. Escribiríamos en el lugar desde el que queremos saltar:

<A HREF="#inicio"> Ir al Inicio</A>

Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta:

<A NAME="inicio"> </A>

Una vez escrito esto y guardada la página veríamos al abrirla con el Navegador

Ir al Inicio

Al pulsar sobre ella nos llevaría al principio de la página ya que fue allí donde coloqué el marcador

 Enlace a otra página local

Debemos escribir

<a href="pagina2.htm">Ir a pagina2</a>

Con esto es suficiente, no hay que crear ningún marcador a no ser que quieras ir a un sitio concreto de la pagina2.htm. En ese caso tendrías que poner en el sitio adonde quieres llegar de la pagina2.htm
<a name="sitio"></a>
y en la pagina1.htm
<a href="pagina2.htm#sitio>Ir a sitio de la página 2</a>

 Enlaces usando imágenes

Con frecuencia se emplean imágenes como enlaces. A veces son enlaces a las mismas imágenes con más resolución, como en el caso de fotos. Otras veces nos llevan a una localización cualquiera.
Para que una imagen sea un enlace hay que colocarla en el lugar del texto del enlace, si además queremos que vaya a otra imagen, ésta la debemos poner en el lugar de la URL.
Veamos unos ejemplos Supongamos para ello. Si escribo en la página actual.

<A HREF=" #inicio"><img src="http://images.neopets.com/help/h_0.gif"></A>
obtengo una imagen que al pulsarla me lleva al inicio de este apartado, exactamente como esta:

Para que una imagen sea un enlace a otra imagen se debe escribir:

<a href="http://images.neopets.com/template_images/acara_baby_angry.gif"><img src="http://images.neopets.com/images/petcentral_4.gif" ></a>

que da como resultado

  Enlace que se abre en una nueva ventana

Si quieres que la página que enlazas aparezca en una nueva ventana del navegador, solamente tienes que poner target="nombre" como atributo del enlace, es decir:

<a href="index.htm" target="nueva">Indice</a>

Aún hay más tipos de enlaces, pero éstos son los más importantes

La etiqueta para incluir una imagen es la siguiente:

<IMG SRC="URL"> (no tiene etiqueta de cierre)

donde URL es la dirección de la imagen.

Puedes buscar la imagen que quieras subir por la web o poner una tuya propia, para subir tus imagenes a la web te recomiendo que la subas en imageshack.us.

Ejemplo: <IMG SRC="http://images.neopets.com/art/petpets/babaa7.gif"> insertaría en el lugar del documento donde hubieras puesto la etiqueta un Babaa.

 

  Atributos de IMG

Los atributos de la imagen pueden ser los siguientes:
  ALIGN= Nos indica la posición de la imagen respecto del texto. Después del signo igual, pueden ir los valores:
TOP si queremos que el texto esté alineado con la parte superior de la imagen
MIDDLE alinea el texto con la parte central de la imagen
BOTTOM alinea el texto con la parte inferior de la imagen
LEFT alinea la imagen a la izquierda de la página forzando la colocación del texto en la parte derecha y arriba
RIGHT alinea la imagen en la derecha de la página forzando la colocación del texto en la parte izquierda y arriba.

Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes extensiones de la etiqueta <br>:
<br clear =left > Busca el primer margen libre a la izquierda.
<br clear = right> Busca el primer margen libre a la derecha.
<br clear =all > Busca el primer margen libre a ambos lados.

WIDTH=80, HEIGTH=100 Indican la anchura y altura de la imagen en píxels, en este caso 80x100 píxels.
Si especificamos las dimensiones de las imágenes, las páginas se cargan más rápido, debido a que el navegador reserva el espacio para ellas y sigue cargando el texto
  BORDER=2 Añade un borde, a modo de marco, a la imagen. En este caso de 2 píxels.
  HSPACE=10 , VSPACE=15 Especifican el espacio horizontal y vertical que separa la imagen del texto que la rodea, en este caso 10 píxels horizontales y 15 verticales

 Formatos de imágenes

Existen muchos formatos para guardar imágenes que tienen diferentes extensiones bmp, tiff, dib, wmf, etc. En internet se usan básicamente dos: GIF y JPG. Ambos formatos comprimen las imágenes para reducir su tamaño, de este modo se asegura una transferencia más rápida por la red. Esto es importante, ya que si la imagen se tarda en cargar, es posible que el visitante de nuestra pàgina la abandone por ello. En los casos en que es necesario poner una imagen con una resolución elevada para ver los detalles, es mejor colocar una imagen pequeña y usarla como enlace que nos conduzca a la imagen final. De ese modo el visitante ya sabe la imagen que va a cargar y puede ser más paciente.
Esto se hace como se explica en la zona de enlaces
<a href="URL de la imagen final"><img src="URL de la imagen que se ve con la página"></a>

Cuando se carga una imagen normal en el navegador, éste va mostrándola de arriba a abajo . Se puede conseguir que se visualize por capas. En la primera capa vemos la imagen de un modo borroso y luego se va haciendo cada vez más nítida. Esto tiene la ventaja de que se da uno cuenta enseguida, del tema de la imagen y si no es lo que buscas, puedes interrumpir la descarga. Se puede conseguir en los dos formatos y es una característica muy conveniente en las imágenes web

Esta imagen tiene los atributos: y como quiero que después de estos comentarios el texto salte debajo de la imagen escribo:
<br clear=all>

Como ves, ésto está debajo de la foto

Esta otra tiene los atributos: También debería de escribir <br clear=all > para que el final de página aparezca en su sitio. Como no lo hago queda a la izquierda de la imagen. Fíjate en el borde

Imagen de fondo

Para poner la imagen tiene dos modos con la etiqueta

<body background="imagen">
o
<style>body { background-image: url("imagen"); background-repeat:meep ._. ; background-position: center}</style>


background-repeat: no-repeat; = Para que el fondo no se repita
background-attachment: fixed = Para que el fondo no se mueva cuando subes o bajas con la barra 

Recuerda cada posición u opción debe ser separada con un ";"
 

Otras cosillas

Poner la imagen en escalas de grises
<img src="imagen" style="Filter: Gray">
=

Poner niebla
<img src="imagen" style="Filter: Blur(Add=0, Direction=225, Strength=10)">
=

Ondular la imagen
<img src="imagen" style="Filter: Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10)">
=

Clarear los bordes
<img src="imagen" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)">
=

Poner un marco
<img src="imagen" style="border-color:#9900FF;border-style:dashed;border-width:5;">

Otro tipo de marco
<img src="imagen" style="border-color:#9900FF;border-style:dotted;border-width:5;">

Los colores se forman a partir de tres básicos, que son el rojo, verde y azul. La intensidad de cada componente se expresa como un número hexadecimal del 00 al FF (del 0 al 255 en base diez)
Los números hexadecimales, se forman utilizando 16 dígitos (en lugar de los diez de la numeración decimal habitual o dos en la binaria). Estos dígitos son: 0 1 2 3 4 5 6 7 8 9 A B C D E F
Así:, por ejemplo, el color rojo se representa como #FF0000, porque tiene el toda la intensidad de rojo y nada de verde y azul.

Los colores basicos son:
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul

Otros colores son:
#FFFFFF - Blanco
#000000 - Negro
#FFFF00 - Amarillo

Para hacer un color más oscuro, reduce la intensidad del componente, dejando los otros dos iguales. Así, el rojo (#FF0000) se hace más oscuro así: #CC0000, #990000, #660000, #330000 etc

Para hacer que un color más pastel, simplemente variar los otros dos colores dejando igual el principal. Así, el rojo (#FF0000) se hace más claro asi: #FF3333, #FF6666, #FF9999, #FFCCCC etc

Para seleccionar el color también se puede poner su nombre en inglés

Lista de colores:

aliceblue		darkslategray		lightsalmon		palevioletred
antiquewhite		darkturquoise		lightseagreen		papayawhip
aqua		darkviolet		lightskyblue		peachpuff
aquamarine		deeppink		lightslateblue		peru
azure		deepskyblue		lightsteelblue		pink
beige		dimgray		lightyellow		plum
bisque		dodgerblue		lime		powderblue
black		firebrick		limegreen		purple
blanchedalmond		floralwhite		linen		red
blue		forestgreen		magenta		rosybrown
blueviolet		fuchsia		maroon		royalblue
brown		gainsboro		mediumaquamarine		saddlebrown
burlywood		ghostwhite		mediumblue		salmon
cadetblue		gold		mediumorchid		sandybrown
chartreuse		goldenrod		mediumpurple		seagreen
chocolate		gray		mediumseagreen		seashell
coral		green		mediumslateblue		sienna
cornflowerblue		greenyellow		mediumspringgreen		silver
cornsilk		honeydew		mediumturquoise		skyblue
crimson		hotpink		mediumvioletred		slateblue
cyan		indianred		midnightblue		slategray
darkblue		indigo		mintcream		snow
darkcyan		ivory		mistyrose		springgreen
darkgoldenrod		khaki		moccasin		steelblue
darkgray		lavender		navajowhite		tan
darkgreen		lavenderblush		navy		teal
darkkhaki		lawngreen		oldlace		thistle
darkmagenta		lemonchiffon		olive		tomato
darkolivegreen		lightblue		olivedrab		turquoise
darkorange		lightcoral		orange		violet
darkorchid		lightcyan		orangered		wheat
darkred		lightgoldenrodyellow		orchid		white
darksalmon		lightgreen		palegoldenrod		whitesmoke
darkseagreen		lightgrey		palegreen		yellow
darkslateblue		lightpink		paleturquoise		yellowgreen

Tabla de colores en hexadecimal:

El texto del documento se puede modificar de muchas formas, vamos a ver las más usuales:

 Estilos de fuentes

Como ves en la tabla es muy sencillo conseguir los efectos deseados, solamente tienes que colocar el texto entre las etiquetas adecuadas.

Algunas etiquetas funcionan solamente con alguno de los navegadores, tenlo en cuenta si las usas.

Tamaño de fuentes

El tamaño de las fuentes se puede especificar de dos maneras, una de ellas por medio de un número del 1 al 7 (de más pequeño a más grande) del siguiente modo
<font size=1> Esta es la letra más pequeña que se puede conseguir </font>
que se verá como
Esta es la letra más pequeña que se puede conseguir

Otra forma es por medio de una referencia relativa:
<font size="+1"> Esto es igual que poner size=4 </font>
que se ve como
Esto es igual que poner size=4

El tamaño por defecto es el 3

Tipos de fuentes

El tipo de fuente es un atributo de FONT y tiene la siguiente sintaxis
<font face="Courier">Eso se verá en la fuente Courier</font>
que se ve como:
Eso se verá en la fuente Courier

  Color de las fuentes

Es otro atributo de FONT.La sintaxis es la siguiente:
<font size=2 face="MS Sans Serif" color="navy">Como ves se pueden poner varios atributos separados por un espacio</font>
que se verá así:

Como ves se pueden poner varios atributos separados por un espacio

 Párrafos y bloques

Para definir y separar bloques de texto se emplean una serie de etiquetas que definen los párrafos, texto preformateado o bloques con significado especial como direcciones o citas.
Etiquetas de bloques:

<P> Se utiliza para que los párrafos queden separados por una línea en blanco. Si solo quieres escribir un punto y aparte debes usar <BR>. Las marcas inicial y final son <P> y </P>. La etiqueta <P> admite los atributos:

ALIGN="left" , ALIGN="right" , ALIGN="center" y ALIGN="justify" para alinearlo a la izquierda, a la derecha, centrarlo o justificarlo totalmente. Por defecto está alineado a la izquierda.

<BR> Este elemento sólo tiene marca inicial e indica un salto de línea, es decir un punto y aparte sin separar el párrafo. Esta etiqueta no tiene su correspondiente de cierre

<HR> Se emplea para representar una línea horizontal. Tampoco tiene pareja de cierre. Se pueden emplear los atributos

ALIGN="left" , ALIGN="right" , para alinearla a la izquierda o a la derecha. Por defecto aparece centrada

WIDTH="66%" SIZE="3", para especificar el ancho en % y el alto en píxels

COLOR="#0000FF" , para especificar el color

¿porqué no intentas usar el mismo código con imágenes?

Sonido de fondo al cargar la página

En este caso la etiqueta depende del navegador, ya que se implementa de forma diferente en el Explorer y el Netscape. Los formatos más usados son mid (para temas musicales sin voces) , wav y au. 

 

La etiqueta básica para que se cargue la música con la página es:

<BGSOUND SRC="fichero de sonido" LOOP= n ó INFINITE>

donde n es el número de veces que se oye el fichero: 1, 2, 3 ... o infinitas

Recuerda que sólo funciona en el Explorer

Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas listas con viñetas sencillas o también letras o números. Para dar más vistosidad a las páginas, se suelen emplear también imágenes que se colocan delante de cada párrafo. Vamos a ver algunas de las posibilidades que tenemos.

  Listas con viñetas desordenadas

He aquí el ejemplo más sencillo de una de estas listas:

escribimos en html	se verá como
<ul> <li>Primer término de la lista <li>Segundo término <li>Tercer término </ul>	Primer término de la lista Segundo término Tercer término

Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma </UL>. También podemos modificar las viñetas por medio del atributo TYPE= circle, disc o square (círculo, disco o cuadrado) y añadir sublistas.

escribimos en html	se verá como
<ul> <li type= disc>Primer término de la lista <ul> <li>Sublista <li>Otro elemento </ul> <li type=circle>Segundo término <li type=square>Tercer término </ul>	Primer término de la lista Sublista Otro elemento Segundo término Tercer término

 Listas con viñetas ordenadas

Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan sus elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo TYPE toma ahora los valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente

escribimos en html	se verá como
<ol type=i> <li >Primer término de la lista <li >Segundo término <li>Tercer término <li>Cuarto <li>Quinto </ol>	Primer término de la lista Segundo término Tercer término Cuarto Quinto

 Listas de definición

Estas listas se forman con el elemento que se define y su definición. Las etiquetas son <DL> y </DL> para la lista y <dt> y <dd> para los elementos y sus definiciones. Un ejemplo:

escribimos en html	se verá como
<dl> <dt >Término 1º <dd>Definición del elemento 1º <dt>Término 2º <dd>Definición del elemento 2º <dt>Término 3º <dd>Definición del elemento 3º </dl>	Término 1º Definición del elemento 1º Término 2º Definición del elemento 2º Término 3º Definición del elemento 3º

Son muy utiles para tener ordenadas las cosas

 Una tabla básica

Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio. Para definir una tabla se usan las etiquetas:

<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla
<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera)
<TD> y </TD> señalan una celda.

La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas.

La tabla (2x2) más sencilla que podemos hacer es la siguiente

Escribimos:	Visualizamos
<TABLE >      <TR>           <TD>1 </TD> <TD> 2 </TD>      </TR> <TR>           <TD>3 </TD> <TD> 4</TD> </TR> </TABLE>	1 2 3 4

El resultado no es muy brillante, pero vamos a ir viendo las distintas posibilidades que tenemos para mejorarlo.

  Atributos de la etiqueta TABLE

Todos los atributos son opcionales

BORDER="4". Indica el tamaño del borde en píxels, en este caso 4. Si no se indica nada carece de borde
WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor absoluto (5 píxels) o como un porcentaje (50% del ancho disponible)
CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2
CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto es 1
ALIGN=" left", "right", "center". Alinea la tabla a la izquierda , derecha o en el centro.

Otro ejemplo

Escribimos:	Visualizamos
<TABLE BORDER="3" CELLSPACING="5" WIDTH="150">      <TR>           <TD>1 </TD> <TD> 2 </TD>      </TR> <TR>           <TD>3 </TD> <TD> 4</TD> </TR> </TABLE>	1 2 3 4

 Atributos de las etiquetas de fila y celda

Las etiquetas que soportan las filas y las celdas son

WIDTH="30". Ancho de toda la fila o celda. También se puede dar en %
ALIGN=" left", "right", "center". Alinea el contenido a la izquierda, derecha o centro
VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o abajo
BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila
COLSPAN=3. Especifica el número de columnas que abarca la fila
ROWSPAN=2. Especifica el número de filas que abarca la columna

Tercer ejemplo. Fijate en la etiqueta TH, que sustituye a TR, resalta su contenido con negrita, por eso se usa para los títulos

Escribimos:	Visualizamos
<TABLE BORDER="3" CELLSPACING="5" WIDTH="200"> <TH COLSPAN=2 BGCOLOR="#6D8FFF> Este es el título</TH> <TR align="center"> <TD>Esta es la celda de la 1ª fila y de la 1ª columna</TD> <TD> Esta es de la 1ª fila y de la 2ª columna</TD> </TR> <TR BGCOLOR="#6D8FFF> <TD>Esto está con un fondo azul</TD> <TD align="right" valign="bottom">Y esto también</TD> </TR> </TABLE>	Este es el título Esta es la celda de la 1ª fila y de la 1ª columna Esta es de la 1ª fila y de la 2ª columna Esto está con un fondo azul Y esto también

Como ves, se pueden ir modificando los comandos básicos para obtener la tabla que deseemos.

 Es frecuente no escribir las etiquetas de cierre de fila y celda, los navegadores presentan la tabla igual y nos ahorramos unas cuantas pulsaciones de teclas.

¿porqué no pruebas ahora a hacer una de colorines?

En neopets es muy fácil. Ve a http://www.neopets.com/edithomepage.phtml y allí selecciona editar en la página del pet que desees editar acontinuación escribo tu codigo HTMl, acepta y ya tienes tu página en neopets

Esto seguro que ya lo sabias

<textarea>"tu texto"</textarea>

tu texto

Recuerda que dentro de los cuadros de texto puedes usar otras de las cosas que aprendas aquí

Debido a que estos códigos son algo más extensos he decidido meterlos en una area de texto