Introducción

HTML es un conjunto de códigos lógicos (markup) que constituyen la apariencia de un documento web y la información que contiene.

Ejemplo: <B>Este texto aparece en negrita en el navegador</B>

Los códigos se encierran entre los caracteres menor que "<" y mayor que ">". Estos códigos encerrados entre estos dos caracteres son llamados comúnmente etiquetas (tags). Siempre van entre los caracteres "< >" y no importa si los codificamos en mayúsculas o en minúsculas ya que no son sensibles a este hecho. Sin embargo, podremos reconocer de manera más sencilla las etiquetas en un documento web si éstas se codifican en mayúsculas

La mayor parte de los elementos de un documento HTML tienen una etiqueta de inicio y una de fin. Esta última se distingue por la barra inclinada "/" que aparece dentro de los corchetes.

Ejm: <FONT color="blue">Este texto aparecerá en azul</FONT>

Básicamente, los documentos escritos en HTML constan del texto mismo del documento y las etiquetas que pueden llevar atributos. Esto llevado a la práctica, vendría a ser:

<etiqueta> texto afectado </etiqueta>

La etiqueta del principio activa la orden y la última (que será la del principio precedida del signo /) la desactiva

Estructura de un documento básico

Todo va encerrado entre las etiquetas <HTML> y </HTML>
<HTML>
cabecera
Cuerpo
</HTML>

Cabecera <HEAD>... </HEAD>: es donde se define entre otras cosas el título del documento.
Cuerpo <BODY> ... </BODY>: Es la información que aparecerá en la página

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

     Hola mundo
  </BODY>
</HTML>

la salida se veria como:

ver ejemplo

Etiquetas Importantes:

La etiqueta BODY

En ésta se puede establecer entre otras cosas el color de fondo y el color del texto, así como una imagen de fondo.

<BODY

TEXT=“#RRGGBB” | “algún color”

BGCOLOR=“#RRGGBB” | “algún color”

LINK= “#RRGGBB” | “algún color”

VLINK=“#RRGGBB” | “algún color”

BACKGROUND=“alguna imagen”

>
Titulares

<H1>, <H2>, <H3>...: . 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árrafos.

<P>: 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.
Saltos de línea.
<BR> 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.

<HTML> 
<HEAD> 
<TITLE>Ejemplo 2</TITLE> 
</HEAD> 
<BODY BGCOLOR="#AAFFAA" > 

<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>

ver ejemplo

Formato básico

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>

he aqui la salida:

Estilos de caracter

Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.

Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.

ver ejemplo

Listas

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émino 1</dt>
<dd>Definición 1</dd>
<dt>Témino 2</dt>
<dd>Definició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>

Salida del código anterior

Listas

Una lista ordenada

Uno
Dos
Tres

Una lista sin ordenar

Uno
Dos
Tres

Una lista de glosario

Témino 1: Definición 1
Témino 2: Definición 2

Listas anidadas

Uno
- Uno
- Dos
- Tres
Dos
Tres

ver ejemplo

Tipos de Letra

<FONT

FACE=“Fuente1,Fuente2,...,fuenteN“

COLOR=“Color” | “#RRGGBB”

SIZE=“Numero entre 1 y 7”

> Texto afectado </FONT>

Los colores pueden ser una combinación en Rojo, verde y azul, o nombres predefinidos en el lenguaje como:

Nombre	Color
Aqua
Black
Blue
Fuchsia
Gray
Green
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow

La enumeración de los tipos de letra, tienen la función de tener una lista de posibles tipos de letra, por cuestiones de que las páginas pueden ser vistas en distintos sistemas que tienen diversos tipos de fuentes instaladas. Entonces se aplicará el primer tipo de letra que encuentre en el sistema.

<HTML>
<HEAD>
<TITLE>Ejemplo 6</TITLE>
</HEAD>
<BODY>
<font color="#FF0000"> este texto es rojo </font> <br>
<font size="4" color="#0000FF"> texto tamaño 4 y color azul</font> <br>
<font size="4" color="navy"> texto tamaño 4 y color azul marino <font size="+2" color="yellow"> este texto es más grande y amarillo</font>
</font> <br>
<font face="Arial, Helvetica, sans-serif"> usando distintos tipos de letra: Arial, Helvetica, sans-serif</font> <br>
<font face="Verdana, Arial, Helvetica, sans-serif"> usando distintos tipos de letra: Verdana, Arial, Helvetica, sans-serif</font><br>
<font face="Courier New, Courier, monospace"> usando distintos tipos de letra: Courier New, Courier, monospace</font><br>
</BODY>
</HTML>

y la salida es:

este texto es rojo
texto tamaño 4 y color azul
texto tamaño 4 y color azul marino este texto es más grande y amarillo
usando distintos tipos de letra: Arial, Helvetica, sans-serif
usando distintos tipos de letra: Verdana, Arial, Helvetica, sans-serif
usando distintos tipos de letra: Courier New, Courier, monospace

ver ejemplo

Enlaces o ligas

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>
Ejemplo:

<HEAD>
<TITLE>Ejemplo 6</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> Estamos abajo</A>
<A HREF="#arriba">Ir arriba</A>

</BODY>
</HTML>

La salida es como esta:

Página de enlaces

Ir abajo
Ir a ejemplo 4

Ir a WebEstilo

.
.
.
.
.
.
.

.
.
.
.
.

Estamos abajo Ir arriba

ver ejemplo

Formularios

La declaración de formulario queda recogida por las tags <form>.....</form> y dentro de ellas se recogerán todas las variables de entrada.

A la tag de apertura <form> le acompañarán estos atributos:

action="" Entre comillas se indica el programa que va a tratar las variables enviadas con el formulario, un guión CGI o la URL mailto.
Method="" Indica el método de transferencia de las variables. Post, si se envía a través del STDIO. Get, si se envía a través de la URL.

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

<H1>Formularios</H1>

<FORM ACTION="mailto:unaprueba" METHOD="POST">
<INPUT TYPE="text" NAME="nombre"><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>

</BODY>
</HTML>

Formularios

ver ejemplo

Campos de entrada

<INPUT>

La tag <input> define la introducción de variables. Junto a esta tag encontraremos los siguientes atributos:

type="" Indicará el tipo de variable a introducir.
- text Indica que el campo a introducir será un texto. Sus atributos:
  - maxlenght="" Seguido de un valor que limitará el número máximo de carácteres a introducir en ese campo.
  - size="" Seguido de un valor que limitará el numero de carácteres a mostrar en pantalla.
  - value="" Indica que no hay valor inicial del campo.
- Password Indica que el campo a introducir será una palabra de paso. Mostrará asteriscos en lugar de letras escritas. Sus atributos serán los mismos que para text.
- Checkbox El campo se elegirá marcando de entre varias opciones una casilla cuadrada.
  - value="" Entre comillas se indicará el valor de la casilla.
  - checked La casilla aparecerá marcada por defecto.
- Radio El campo se elegirá marcando de entre varias opciones una casilla circular.
  - value="" Entre comillas se indicará el valor de la casilla.
- Image El campo contendrá el valor en coordenadas del punto de la imagen que haya pinchado. Atributo obligatorio:
  - src="" Entre comillas escribiremos el nombre del archivo de imagen.
- hidden El visitante no puede modificar su valor ya que no está visible. Se manda siempre junto al atributo value= seguido de su valor entre comillas.

Ejemplo:

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

<H1>Formularios</H1>

<FORM ACTION="mailto:unaprueba" METHOD="POST">
Texto: <INPUT TYPE="text" NAME="nombre"><BR>
Password: <INPUT TYPE="password" NAME="contra"><BR>
Sexo:<INPUT TYPE="radio" NAME="boton1" VALUE="1"> Hombre
<INPUT TYPE="radio" NAME="boton1" VALUE="2">Mujer<BR>
Vehiculo:<INPUT TYPE="checkbox" NAME="Moto" VALUE="Si">Moto
<INPUT TYPE="checkbox" NAME="Coche" VALUE="" CHECKED>Coche

<BR><BR>
<INPUT TYPE="submit"><INPUT TYPE="Reset">
</FORM>

</BODY>
</HTML>

Salida

Formularios

ver ejemplo

<table border="0" cellspacing="0" cellpadding="0">  
  <tr>   
    <td bgcolor="#DDE0FC" width="20"><img src="/graficos/esq1.gif" width="20" height="20"></td>  
    <td bgcolor="#DDE0FC">&nbsp;</td>  
    <td bgcolor="#DDE0FC" width="20"><img src="/graficos/esq2.gif" width="20" height="20"></td>  
  </tr>  
  <tr>  
    <td bgcolor="#DDE0FC" width="20">&nbsp;</td>  
    <td bgcolor="#DDE0FC">Puedes poner aquí el contenido<BR>que quieras.</td>  
    <td bgcolor="#DDE0FC" width="20">&nbsp;</td>  
  </tr>  
  <tr>  
    <td bgcolor="#DDE0FC" width="20"><img src="/graficos/esq4.gif" width="20" height="20"></td>  
    <td bgcolor="#DDE0FC">&nbsp;</td>  
    <td bgcolor="#E5E7FD" width="20"><img src="/graficos/esq3.gif" width="20" height="20"></td>  
  </tr>  
</table>