HTML, ¿Qué es HTML? Códigos HTML, Colores HTML, Etiquetas HTML, Lenguage, Manual, Plantillas

HTML (Acrónimo del inglés "Hyper Text Markup Language" - Lenguaje de Marca de Hipertexto) es un lenguaje de marcado, diseñado para estructurar textos y relacionarlos en forma de hipertexto. Es un subconjunto de la especificación de SGML.

Fue definido en 1990 por Tim Berners-Lee. La versión actual es la 4.0 y su estándar está mantenido por la World Wide Web Consortium.

Gracias a Internet y a los navegadores, se ha convertido en uno de los lenguajes de marcas más extendidos.

Estructura

Dentro de la cabecera <HEAD> podemos encontrar:

<TITLE>

<META>

Dentro del cuerpo <BODY> podemos encontrar:

<H1>, <H2>,... <H6>: encabezados o títulos del documento, suelen distinguirse por tamaño.

<P>: define un párrafo nuevo

<BR>: salto de línea forzado.

<TABLE>: indica el comienzo de una tabla,luego habrá que definir las filas con <TR> y las celdas dentro de las filas con <TD>.

<UL>: indica el comienzo de una lista desordenada (sin numerar), los distintos ítems se definen con <LI>.

<OL>: indica el comienzo de una lista ordenada (numerada), los distintos ítems de definen con <LI>.

<A HREF>: define un elemento de enlace.

<IMG SRC>: muestra una imagen.

¿Qué es HTML?

El HTML (Hyper Text Markup Language) es un sistema para estructurar documentos. Estos documentos pueden ser mostrados por los visores de paginas Web en Internet, como Netscape, Mosaic o Microsoft Explorer. Por el momento no existe un estandar de HTML ya que tanto Netscape como Microsoft se empeñan en incluir directivas que solo funcionan con sus respectivos navegadores. De cualquier manera existen diferentes revisiones o niveles de estandarización, el 1.0, el 2.0 y el 3.0, lo que produce que algunos visores no "comprendan" en su totalidad el contenido de un documento. En este manual se ha utilizado la revisión 3.0 de HTML. Esto quiere decir que algunas de las órdenes de HTML que aquí se indican puede que no sean reconocidas por algunos visores de páginas Web. Netscape 2.x y Microsoft Explorer 3.x reconocen prácticamente todas las órdenes HTML vistas en este manual.

Básicamente, el HTML consta de una serie de órdenes o directivas, que indican al visor que estemos utilizando, la forma de representar los elementos (texto, gráficos, etc...) que contenga el documento. En este manual nos referiremos a estas órdenes con la palabra "directiva".

Las directivas de HTML pueden ser de dos tipos, cerradas o abiertas. Las directivas cerradas son aquellas que tienen una palabra clave que indica el principio de la directiva y otra que indica el final. Entre la directiva inicial y la final se pueden encontrar otras directivas. Las directivas abiertas constan de una sola palabra clave. Para diferenciar las directivas del resto del texto del documento se encierran entre los símbolos < y >. Las directivas cerradas incluyen el carácter / antes de la palabra clave para indicar el final de la misma. Una directiva puede contener "parámetros". Estos parámetros se indican a continuación de la palabra clave de la directiva.

Ejemplos :

Directiva cerrada

<CENTER> Mi página Web </CENTER>

Directiva abierta

<HR>

Directiva con parámetros

<BODY bgcolor="#FFFFFF"> </BODY>

Los ficheros que contienen documentos HTML suelen tener la extensión .html o .htm. En este manual se han fijado los siguientes criterios a la hora de escribir la sintaxis de las directivas de HTML:

  1. Las directivas se indican en letra mayúscula y en negrilla.

  2. Los parámetros de las directivas se indican en letra minúscula y negrilla.

  3. El resto de elementos se indican en letra normal.

  4. Las palabras a resaltar en el texto se indican en cursiva y negrilla.

Estructura básica de un documento HTML

Un documento escrito en HTML contendría básicamente las siguientes directivas :

<HTML>

<HEAD>

<TITLE>

</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Indica el inicio del documento.

Inicio de la cabecera.

Inicio del título del documento.

Final del título del documento.

Final de la cabecera del documento.

Inicio del cuerpo del documento.

Final del cuerpo del documento.

Final del documento.

El documento se hallará situado en algún ordenador al que se pueda acceder a traves de Internet. Para indicar la situación del documento en Internet se utiliza la URL (Uniform Resource Locator). La URL es el camino que ha de seguir nuestro visor a traves de Internet para acceder a un determinado recurso, bien sea una página Web, un fichero, un grupo de noticias, etc. Es decir, lo que el visor de páginas Web hace es acceder a un fichero situado en un ordenador que está conectado a la red Internet. La estructura de una URL para una página Web suele ser del tipo http://dominio/directorio/fichero. El dominio indica el nombre del ordenador al que accedemos, el directorio es el nombre del directorio de ese ordenador y fichero el nombre del fichero que contiene la página Web escrita en HTML. Por ejemplo :

http://www.santos-catolicos.com/santos/santa-brigida-de-suecia/revelaciones-de-santa-brigida-de-suecia.php

Donde ....

http://
www.santos-catolicos.com
/santos/santa-brigida-de-suecia/
revelaciones-de-santa-brigida-de-suecia.php

es el indicador de pagina Web
es el Dominio (nombre) del ordenador
es el Directorio dentro del ordenador
es el Fichero que contiene la página Web

Códigos HTML

  • Un documento HTML comienza siempre con la etiqueta <HTML>, que indica que el documento en cuestión está construido con dicho lenguaje.

  • La mayoría de las etiquetas son pareadas, es decir, <...> corresponde al principio de la acción y </...> indica el fin de dicha acción.

  • Por tanto, una página web estará siempre contenida entre las etiquetas <HTML> y </HTML>.

  • Por otra parte, todo documento HTML consta de dos partes: la cabecera (head) y el cuerpo del documento (body).

    1. La cabecera contiene básicamente información destinada al browser (o navegador), que queda oculta al usuario. Su etiqueta (pareada) es <HEAD>.

    2. El cuerpo es el documento que ve el usuario. Su etiqueta (pareada) es <BODY>.

  • Ya estamos en condiciones de componer nuestra primera página web. Basta con escribir las siguientes etiquetas en nuestro editor de texto y salvar el resultado con la extensión *.HTML o *.HTM:

EJEMPLO 1

<HTML>

  <HEAD>

  </HEAD>

  <BODY>

  </BODY>

</HTML>

  • He introducido una pequeña tabulación a la hora de escribir las etiquetas de cabecera y cuerpo, simplemente para facilitar su compresión gráfica, puesto que esta cuestión es totalmente indiferente. El resultado no variaría de haber colocado las etiquetas de cualquier otra manera. Por ejemplo:

EJEMPLO 1: Variantes de escritura

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>


<HTML><HEAD></HEAD><BODY></BODY></HTML>


<HTML>
<HEAD></HEAD>
<BODY></BODY>
</HTML>

  • Esta primera página web está, lógicamente, vacía, pero es perfectamente operativa. Para modificarla, basta con modificar sus códigos en el editor de texto. No hace falta cerrar para ello el navegador: una vez modificado –y salvado– el fichero, basta con utilizar el comando Actualizar (o Refresh) para ver los cambios.

  • Al visualizar los resultados del Ejemplo 1, en la barra de título de la ventana correspondiente sólo aparece el nombre del navegador (con Netscape) o la trayectoria completa del archivo (con Explorer). Esto sucede porque nuestro documento no posee un título propio. Para crearlo, debemos introducir una nueva etiqueta (pareada) en la cabecera: <TITLE>. Nuestro página web podría quedar, por tanto, así:

EJEMPLO 2

<HTML>

<HEAD>

<TITLE>Ejemplo 2</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

  • Ya sabemos crear el esqueleto de una página web. La siguiente tarea será aprender a introducir texto (entre los tags <BODY> y </BODY>) y controlar sus etiquetas elementales.

  • El texto básico de un documento HTML puede escribirse sin etiquetas. Cada navegador lo visualiza entonces con el tipo y tamaño de caracteres escogidos en su configuración por defecto, e introduce un salto de línea cuando los caracteres alcanzan el borde de la ventana.

  • Para dominar las cuestiones de formato (de caracteres, de párrafo, etc.) es necesario utilizar las etiquetas correspondientes.

La etiqueta básica

  • La etiqueta básica, que controla el tipo de fuente utilizado, es <FONT>.

  • <FONT> es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos entre <FONT> y </FONT>. Pero sin más especificaciones, la etiqueta aún no sirve para nada.

  • Se puede especificar el tipo de letra (es decir, la fuente de caracteres) añadiéndolo a la etiqueta, de la siguiente manera (en este caso, la fuente escogida es Arial): <FONT FACE="Arial">...</FONT>.

  • Se puede especificar el color de la fuente con la etiqueta <FONT COLOR="?">...</FONT>. Para especificar los colores, conviene saber al menos lo siguiente:

    1. Cada color posee su correspondiente código.

    2. Hay dos códigos: hexadecimal –lo más habitual– o RGB. En ambos casos se trata de expresar las proporciones de tres colores básicos: rojo, verde y azul.

    3. Los valores hexadecimales de los tres colores se expresan de la siguiente manera:

      1. Rojo: color:#ff0000;

      2. Verde: color:#00ff00;

      3. Azul: color:#0000ff;

    4. Los mismos colores, expresados con los valores RGB (red, green, blue), son los siguientes:

      1. Rojo: color:rgb(255,0,0);

      2. Verde: color:rgb(0,255,0);

      3. Azul: color:rgb(0,0,255);

    5. Todos los colores se expresan mediante combinaciones de estos tres colores básicos. Existen muchos programas que proporcionan los valores de todos los colores que el usuario puede componer. También en internet existen muchas páginas con los Códigos de colores.

    6. Los colores más básicos pueden especificarse sin código, simplemente escribiendo la palabra correspondiente (por supuesto en inglés). Por ejemplo: <FONT COLOR="blue">...</FONT><FONT COLOR="red">...</FONT>, etc.

  • Se puede especificar el tamaño de la fuente con la etiqueta <FONT SIZE="?">...</FONT>. El valor del tamaño ("?") deseado puede suministrarse de manera absoluta (un número del 1 al 7) o relativa (+1, +2, -1, -2, etc., teniendo en cuenta que el valor por defecto es 3).

  • Todas estas etiquetas se pueden combinar, de modo que con una sola se controla, por ejemplo, el tipo, el tamaño y el color de los caracteres: <FONT FACE="Arial" COLOR="#0000FF" SIZE="5">...</FONT>.

Con esta etiqueta hemos visto ya la sintaxis básica de las etiquetas HTML, que podíamos formalizar así: <ETIQUETA [ATRIBUTO="valor"]>.

Lo anterior quiere decir que una etiqueta HTML (por ejemplo, FONT) puede llevar uno o varios atributos (FACE, COLOR, SIZE), cuyos valores se colocan entrecomillados tras el signo igual (="arial", ="#0000FF", etc.).

Esto será válido para todas las etiquetas HTML que veamos a partir de este momento.

  • Volvamos a nuestro documento web y practiquemos con las posibilidades de la etiqueta <FONT>. Por ejemplo:

EJEMPLO 3

<HTML>

<HEAD>

<TITLE>Ejemplo 3</TITLE>

</HEAD>

<BODY>

Esto es texto simple: cada navegador lo visualizará según su configuración por defecto.

<FONT SIZE="1">Este texto es tamaño 1.</FONT>

<FONT SIZE="2">Este texto es tamaño 2.</FONT>

<FONT SIZE="4">Este texto es tamaño 4.</FONT>

<FONT SIZE="+1">Este texto es tamaño +1 (que es lo mismo que tamaño 4).</FONT>

<FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto posee varias especificaciones de formato.</FONT>

</BODY>

</HTML>

  • Nuestra página web, tal y como está diseñada en el Ejemplo 3, no posee ninguna especificación de líneas. A pesar de que las etiquetas están ordenadas en varias líneas, el navegador coloca todos los caracteres seguidos (sólo tiene en cuenta un único espacio entre palabras). Para corregir este problema podemos utilizar la etiqueta <BR>, que introduce un salto de línea. Nuestro página quedaría entonces así:

EJEMPLO 4

<HTML>

<HEAD>

<TITLE>Ejemplo 4</TITLE>

</HEAD>

<BODY>

Esto es texto simple: cada navegador lo visualizará según su configuración por defecto.<BR>

<FONT SIZE="1">Este texto es tamaño 1.</FONT><BR>

<FONT SIZE="2">Este texto es tamaño 2.</FONT><BR>

<FONT SIZE="4">Este texto es tamaño 4.</FONT><BR>

<FONT SIZE="+1">Este texto es tamaño +1 (que es lo mismo que tamaño 4).</FONT><BR>

<FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto posee varias especificaciones de formato.</FONT>

</BODY>

</HTML>

Hay otra cuestión importante que debe saberse sobre la etiqueta <FONT>: es la etiqueta más básica, y conviene empezar a aprender por ella, pero está en desuso y desaparecerá en las versiones futuras de HTML. En su lugar, existen otras etiquetas más potentes, que iremos viendo en su momento.

Etiquetas de formato de caracteres

  • A partir de este momento, se trata simplemente de añadir más etiquetas a nuestra aún pequeña colección, de modo que vayamos teniendo cada vez más control sobre el formato de los caracteres. La tabla siguiente muestra las más comunes:

Código

Función

<B>...</B>

Negrita

<I>...</I>

Cursiva

<U>...</U>

Subrayado

<SUB>...</SUB>

Subíndice

<SUP>...</SUP>  

Superíndice

  • Hay que realizar algunos comentarios sobre las etiquetas precedentes:

    1. Existe otra etiqueta similar a <B>, menos utilizada porque depende de las opciones de configuración del navegador: <STRONG>...</STRONG>.

    2. Existe otra etiqueta similar a <I>, menos utilizada porque depende de las opciones de configuración del navegador: <EM>...</EM>.

    3. Conviene tener cuidado a la hora de manejar el subrayado, puesto que éste se utiliza convencionalmente para indicar los hiperenlaces, y podría por tanto resultar confuso para el usuario.

  • Es normal utilizar varias etiquetas para un mismo elemento de texto. En ese caso, hay que tener cuidado para encajarlas correctamente. Por ejemplo:
    <FONT FACE="Courier"><B><I>...</I></B></FONT> es correcto, pero
    <FONT FACE="Courier"><B><I>...</FONT><B></I> es incorrecto.

Colores HTML

Todos los colores se forman a partir de tres básicos: rojo, verde y azul (red, green, blue, RGB).

Cada código HTML comprende el símbolo «#» seguido de una combinación de 6 números hexadecimales. Los números hexadecimales, se forman utilizando 16 dígitos (en lugar de los diez de la numeración decimal habitual). Estos dígitos, de menos a más cantidad de color, son: 0 1 2 3 4 5 6 7 8 9 A B C D E F.

Por ejemplo, «FF» en hexadecimal representaría el número 255 en numeración decimal. La intensidad de cada componente se expresa como un número hexadecimal del 00 al FF (del 0 al 255 en base diez). La combinación de rojo, verde y azul (cada uno del 0 a 255), ofrece más de 16 millones de colores diferentes (256 x 256 x 256).

Colores basicos

El color rojo se representa como #ff0000, porque tiene toda la intensidad de rojo y nada de verde y azul.

El color verde se representa como #00ff00, porque tiene toda la intensidad de verde y nada de rojo y azul.

El color azul se representa como #0000ff, porque tiene toda la intensidad de azul y nada de verde y rojo.

El color blanco es la mezcla de todos los colores: #ffffff.

El color negro representa la ausencia de color, por tanto su valor será #000000.

Para hacer un color más oscuro, hay que reducir la intensidad del componente principal, dejando los otros dos iguales.

Así, el rojo (#ff0000) se hace más oscuro así: #cc0000, #990000, #660000, #330000, etc.

Para hacer un color más pastel (más claro), hay que variar los otros dos colores dejando igual el principal.

Así, el rojo (#ff0000) se hace más claro asi: #ff3333, #ff6666, #ff9999, #ffCCCC etc.

Código

Color

Color

#ff0000

rojo

red

#0000ff

azul

blue

#000080

azul marino

navy

Código

Color

Color

#ffff00

amarillo

yellow

#ffffff

blanco

white

#000000

negro

black

#800000

granate

maroon

Código

Color

Color

#00FFFF

cian

cyan

#FF00FF

magenta

fuchsia

#C0C0C0

plata

silver

#808080

gris

gray

#FFA500

naranja

orange

Código

Color

Color

#008080

verde azulado

teal

#00ff00

verde

green

#808000

verde oliva

olive

Colores pastel

Código

Color

#EEEEFF

#F8F8F8

#F5F5F5

#F0F8FF

#F0FFFF

#F5FFFA

#F0FFF0

Código

Color

#FAFAD2

#FFFACD

#FFF8DC

#FFF8DC

#FFFFE0

#FFFFEE

#FFFFCC

Código

Color

#FFFFF0

#FFFAF0

#FAF0E6

#FDF5E6

#FAEBD7

#FFE4C4

#FFE4B5

Código

Color

#FFDEAD

#FFEFD5

#FFF5EE

#FFF0F5

#FFE4E1

#FFEEFF

#FFFAFA

Otros colores

Código

Color

#000000

#000033

#000066

#000099

 

#0000CC

 

#0000FF

 

#003300

 

#003333

 

#003366

 

#003399

 

#0033CC

 

#0033FF

 

#006600

 

#006633

 

#006666

 

#006699

 

#0066CC

 

#0066FF

 

#009900

 

#009933

 

#009966

 

#009999

 

#0099CC

 

#0099FF

 

#00CC00

 

#00CC33

 

#00CC66

 

#00CC99

 

#00CCCC

 

#00CCFF

 

#00FF00

 

#00FF33

 

#00FF66

 

#00FF99

 

#00FFCC

 

#00FFFF

 

Código

Color

#330000

 

#330033

 

#330066

 

#330099

 

#3300CC

 

#3300FF

 

#333300

 

#333333

 

#333366

 

#333399

 

#3333CC

 

#3333FF

 

#336600

 

#336633

 

#336666

 

#336699

 

#3366CC

 

#3366FF

 

#339900

 

#339933

 

#339966

 

#339999

 

#3399CC

 

#3399FF

 

#33CC00

 

#33CC33

 

#33CC66

 

#33CC99

 

#33CCCC

 

#33CCFF

 

#33FF00

 

#33FF33

 

#33FF66

 

#33FF99

 

#33FFCC

 

#33FFFF

 

Código

Color

#660000

 

#660033

 

#660066

 

#660099

 

#6600CC

 

#6600FF

 

#663300

 

#663333

 

#663366

 

#663399

 

#6633CC

 

#6633FF

 

#666600

 

#666633

 

#666666

 

#666699

 

#6666CC

 

#6666FF

 

#669900

 

#669933

 

#669966

 

#669999

 

#6699CC

 

#6699FF

 

#66CC00

 

#66CC33

 

#66CC66

 

#66CC99

 

#66CCCC

 

#66CCFF

 

#66FF00

 

#66FF33

 

#66FF66

 

#66FF99

 

#66FFCC

 

#66FFFF

 

Código

Color

#990000

 

#990033

 

#990066

 

#990099

 

#9900CC

 

#9900FF

 

#993300

 

#993333

 

#993366

 

#993399

 

#9933CC

 

#9933FF

 

#996600

 

#996633

 

#996666

 

#996699

 

#9966CC

 

#9966FF

 

#999900

 

#999933

 

#999966

 

#999999

 

#9999CC

 

#9999FF

 

#99CC00

 

#99CC33

 

#99CC66

 

#99CC99

 

#99CCCC

 

#99CCFF

 

#99FF00

 

#99FF33

 

#99FF66

 

#99FF99

 

#99FFCC

 

#99FFFF

 

Código

Color

#CC0000

 

#CC0033

 

#CC0066

 

#CC0099

 

#CC00CC

 

#CC00FF

 

#CC3300

 

#CC3333

 

#CC3366

 

#CC3399

 

#CC33CC

 

#CC33FF

 

#CC6600

 

#CC6633

 

#CC6666

 

#CC6699

 

#CC66CC

 

#CC66FF

 

#CC9900

 

#CC9933

 

#CC9966

 

#CC9999

 

#CC99CC

 

#CC99FF

 

#CCCC00

 

#CCCC33

 

#CCCC66

 

#CCCC99

 

#CCCCCC

 

#CCCCFF

 

#CCFF00

 

#CCFF33

 

#CCFF66

 

#CCFF99

 

#CCFFCC

 

#CCFFFF

 

Código

Color

#FF0000

 

#FF0033

 

#FF0066

 

#FF0099

 

#FF00CC

 

#FF00FF

 

#FF3300

 

#FF3333

 

#FF3366

 

#FF3399

 

#FF33CC

 

#FF33FF

 

#FF6600

 

#FF6633

 

#FF6666

 

#FF6699

 

#FF66CC

 

#FF66FF

 

#FF9900

 

#FF9933

 

#FF9966

 

#FF9999

 

#FF99CC

 

#FF99FF

 

#FFCC00

 

#FFCC33

 

#FFCC66

 

#FFCC99

 

#FFCCCC

 

#FFCCFF

 

#FFFF00

 

#FFFF33

 

#FFFF66

 

#FFFF99

 

#FFFFCC

 

#FFFFFF

 

Etiquetas HTML

La estructura básica de las etiquetas HTML se caracteriza por ir encerradas entre los símbolos <> para las de apertura y </> para las de cierre, como podemos ver en el siguiente ejemplo:

<p>Esto es un párrafo.</p>

Si queremos hacer comentarios dentro del código html para ayudarnos a identificarlo y comprenderlo rápidamente utilizaremos la siguiente sintaxis:

<!-- Aquí va el comentario -->

Sin embargo, algunas etiquetas especiales llamadas “etiquetas vacías” no necesitan encerrar ningún texto. La etiqueta <br> por ejemplo, se utiliza para indicar el comienzo de una nueva línea. Por sus características, la etiqueta <br> nunca encierra ningún contenido de texto. En lugar de abrir y cerrar de forma consecutiva la etiqueta (<br></br>) se puede utilizar la sintaxis <br/> para indicar que es una etiqueta vacía que se abre y se cierra en ese mismo punto.

La estructura básica de una página HTML con sus etiquetas principales es la siguiente:

 <!-- Aquí comienza la página html -->
<html>
<head>
<title>Aquí se pone el título de la página HTML</title>
</head>
<body>
Aquí va el contenido de la página.
</body>
 <!-- Aquí termina la página html -->
</html>

Dentro de la etiqueta <html> se incluye la cabecera, el cuerpo y todo el contenido de la página.

Dentro de la etiqueta <head> se incluye la cabecera, donde además del título de la página se pueden incluir más cosas, como el idioma de la misma, por ejemplo. Más adelante explicaré todo lo que puede contener esta etiqueta.

Dentro de la etiqueta <body> va el contenido de la página, ya sea texto, imágenes, listas, etc.

Si quieres ver como queda la página con el ejemplo anterior solo tienes que copiar el código en un archivo de texto de bloc de notas y guardarlo con la extensión .html

Después abre el archivo con tu navegador y observa el resultado.

HTML define 91 etiquetas diferentes.

Lista completa de las etiquetas con su función correspondiente:

1. <a> Inserta vínculos o marcadores.

2. <abbr> Explica/expande abreviaciones.

3. <acronym> Explica/expande acrónimos.

4. <address> Muestra información de contacto del autor.

5. <applet> Inserta un applet (script)

6. <area> Define sectores para un mapa de imagen

7. <b> Convierte texto en negrita

8. <base> Establece la URI base, usada para resolver URIs relativas

9. <basefont> Establece el tamaño de fuente por defecto para todo el documento

10. <bdo> Anula el algoritmo bidireccional para su contenido

11. <big> Muestra el texto en estilo de fuente “grande”

12. <blockquote> Inserta una cita en forma de párrafo

13. <body> Actúa como contenedor para toda la parte representable del documento (cuerpo)

14. <br> Forza un quiebre de línea

15. <button> Crea un botón que permite contenido HTML (elementos)

16. <caption> Establece un título para una tabla

17. <center> Muestra su contenido centrado

18. <cite> Inserta una cita o referencia

19. <code> Declara a su contenido como código de computadora

20. <col> Establece atributos generales para las columnas de una tabla

21. <colgroup> Agrupa un número de columnas en una tabla

22. <dd> Muestra una definición en una lista de términos y definiciones

23. <del> Incluye texto que debería ser borrado o reemplazado (ya no válido)

24. <dfn> Asigna una definición a un término

25. <dir> Inserta una lista de directorio (árbol)

26. <div> Define un bloque de contenido

27. <dl> Inserta una lista de términos y definiciones

28. <dt> Inserta un término en una lista de términos y definiciones

29. <em> Indica énfasis para su contenido

30. <fieldset> Agrupa controles en un formulario

31. <font> Establece el estilo de fuente para su contenido

32. <form> Inserta un formulario

33. <frame> Inserta un marco simple

34. <frameset> Inserta un conjunto de marcos

35. <h1> Define un encabezado de nivel 1

36. <h2> Define un encabezado de nivel 2

37. <h3> Define un encabezado de nivel 3

38. <h4> Define un encabezado de nivel 4

39. <h5> Define un encabezado de nivel 5

40. <h6> Define un encabezado de nivel 6

41. <head> Encierra el bloque de encabezado del documento (para las declaraciones globales)

42. <hr> Dibuja una línea horizontal

43. <html> Actúa como contenedor para el documento entero (encabezado y cuerpo)

44. <i> Muestra su contenido con estilo de fuente itálica

45. <iframe> Inserta un marco dentro del contenido del documento

46. <img> Inserta una imagen

47. <input> Muestra un control de entrada (texto, contraseña, casillas de verificación, etc.)

48. <ins> Indica que su contenido ha sido insertado a un texto anterior en una actualización

49. <isindex> Provee una entrada de una sola línea

50. <kbd> Representa texto que es ingresado por el usuario

51. <label> Establece una etiqueta para un control en un formulario

52. <legend> Asigna un título para un “fieldset” (grupo de controles en un formulario)

53. <li> Inserta un ítem en una lista (para listas ordenadas y desordenadas)

54. <link> Da información relacional acerca del documento al vincularlo con otros recursos

55. <map> Define un mapa de imagen del lado cliente

56. <menu> Inserta una lista menu

57. <meta> Provee información acerca del documento en la forma de variables (nombre y valor)

58. <noframes> Provee contenido alternativo para marcos, mostrado cuando los mismos no son soportados

59. <noscript> Provee texto alternativo para scripts, mostrado cuando los mismo no son soportados

60. <object> Inserta aplicaciones externas (por ejemplo, animaciones /películas Flash)

61. <ol> Inserta una lista ordenada

62. <optgroup> Agrupa las opciones en un contro “select”

63. <option> Define una opción en un control “select”

64. <p> Inserta un párrafo

65. <param> Establece un parámetro para un objeto insertado

66. <pre> Muestra texto preformateado, usualmente con fuente de ancho fijo y respetando espacios

67. <q> Inserta una cita a nivel de línea

68. <s> Muestra texto tachado

69. <samp> Representa la salida de un programa

70. <script> Actúa como contenedor para scripts del lado cliente

71. <select> Crea un control select (lista desplegable de opciones)

72. <small> Muestra texto en duente “pequeña”

73. <span> Encierra un trozo de texto (en línea), útil para asignar atributos a su contenido

74. <strike> Muestra texto tachado

75. <strong> Indica énfasis fuerte para su contenido

76. <style> Contiene código de hojas de estilo que definen atributos visuales para el documento

77. <sub> Inserta texto como subíndice

78. <sup> Inserta texto como superíndice

79. <table> Actúa como contenedor para la información de una tabla

80. <tbody> Define un cuerpo en una tabla

81. <td> Inserta una celda regular en un tabla

82. <textarea> Crea una entrada de líneas múltiples

83. <tfoot> Define un pie para una tabla

84. <th> Inserta una celda de encabezado en una tabla

85. <thead> Define un encabezado en una tabla

86. <title> Define un título para el documento completo

87. <tr> Inserta una fola de celdas en una tabla

88. <tt> Muestra texto de máquina de escribir

89. <u> Muestra texto subrayado

90. <ul> Inserta una lista desordenada

91. <var> Indica una instancia de una variable

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

Manual de HTML

¿Has conseguido crear algunas páginas tú solo? Si no es así, aquí tienes un ejemplo:

        
        <html>

          <head>
          <title>Mi sitio web</title>
          </head>

          <body>
          <h1>Encabezado de nivel 1</h1>
          <p>texto, texto, texto, texto</p>
          <h2>Encabezado de nivel 2</h2>
          <p>texto, texto, texto, texot</p>
          </body>
          
        </html>
        
        

¿Y ahora qué?

Pues ha llegado el momento de aprender siete nuevos elementos.

Del mismo modo que enfatizamos el texto al incluirlo entre la etiqueta de inicio <em> y la etiqueta de cierre </em>, se puede acentuar más ese énfasis usando la etiqueta de inicio<strong> y la etiqueta de cierre </strong>.

Ejemplo 1:

<strong>Énfasis acentuado</strong> 

y se verá así en el navegador:

Énfasis acentuado.

Asimismo, puedes hacer que el texto sea más pequeño usando small:

Ejemplo 2:

<small>Este texto tendría que ser un poco más pequeño.</small> 

y se visualizará así en el navegador:

Este texto tendría que ser un poco más pequeño.

¿Puedo usar varios elementos a la misma vez?

Sí, se pueden usar fácilmente varios elementos a la vez siempre que evitemos elementos superpuestos. Esto lo entenderemos mejor con un ejemplo:

Ejemplo 3:

Si quieres que el texto aparezca enfatizado y más pequeño, se debe hacer de la siguiente manera:

<em><small>Texto enfatizado más pequeño</small></em> 

y NO de la siguiente manera:

<em><small>Texto enfatizado más pequeño</em></small> 

La diferencia estriba en que, en el primer ejemplo, cerramos en último lugar el elemento que abrimos primero. De este modo evitamos confundir al navegador y a nosotros mismos.

¡Más elementos!

Como mencionábamos en la lección 3, existen una serie de elementos que se abren y cierran con la misma etiqueta. Estos elementos conocidos como elementos vacíos no están relacionados con un pasaje específico del texto sino que son más bien etiquetas aisladas. Un ejemplo de dichas etiquetas es <br /> que crea un salto de línea forzado.

Ejemplo 4:

Algo de texto <br />y algo más de texto en una nueva línea 

que se visualizará así en el navegador:

Algo de texto
y algo más texto en una nueva línea

Fíjate en que la etiqueta parece una forma contraída de la etiqueta de inicio y de la etiqueta de cierre con un espacio en blanco y una barra al final: <br />.

Otro elemento que se abre y cierra con la misma etiqueta es <hr />, que se usa para trazar una línea horizontal ("hr" es la abreviatura de "horizontal rule"):

Ejemplo 5:

<hr /> 

que se verá así en el navegador:


Otros ejemplos de elementos que necesitan tanto la etiqueta de inicio como de cierre -la mayoría de elementos cumplen esta norma- son: ul, ol y li. Estos tres elementos se usan para crear listas.

ul is la forma abreviada de "unordered list" (es decir, lista no ordenada) e inserta viñetas para cada elemento. ol es la abreviatura de "ordered list" (es decir, lista ordenada) y numera cada elemento de la lista. Para crear elementos de lista use la etiqueta li ("list item", o sea, elemento de lista). Parece algo confuso, ¿no? Veamos, entonces, algunos ejemplos:

Ejemplo 7:

        <ul> 
          <li>Un elemento de lista</li> 
          <li>Otro elemento de lista</li> 
        </ul> 

que se verá así en el navegador:

  • Un elemento de lista

  • Otro elemento de lista

Ejemplo 8:

        <ol>
          <li>Primer elemento de lista</li> 
          <li>Segundo elemento de lista</li> 
        </ol> 

que se visualizará así en el navegador:

  1. Primer elemento de lista

  2. Segundo elemento de lista

¡Uf! ¿Eso es todo?

De momento, sí. Una vez más, experimenta y crea tus propias páginas usando alguno de los siete nuevos elementos que acabas de aprender en esta lección:

        <strong>Énfasis más fuerte</strong> 
        <small>Texto pequeño</small> 
        <br />Salto de línea 
        <hr />Línea horizontal 
        <ul>Lista sin ordenar</ul> 
        <ol>Lista ordenada</ol> 
        <li>Elemento de lista</li> 
Vídeos Gratis
www.Santos-Catolicos.com
¡DVDs, Artículos y Libros Gratis!
FREE DVDS & VIDEOS
WATCH & DOWNLOAD ALL THE DVDS & VIDEOS FOR FREE!