IntroducciónalHTML

Cuando miras una página web en el navegador, lo que ves a simple vista son palabras. Estas
palabras normalmente tienen algunas características, como diferentes tamaños y colores. En
algunos casos la página web puede mostrar imágenes o incluso vídeos. Otras veces, formularios
donde puedes introducir o buscar información, o personalizar la apariencia de la página que
estás viendo. La página también puede contener animaciones y contenidos que cambian mientras
el resto de la página se mantiene sin cambios.

Varias tecnologías (como CSS, JavaScript, Flash, AJAX, JSON) pueden usarse para definir los
elementos que componen una página web. Sin embargo, en el nivel más bajo, una página web se
define usando HTML (HyperText Markup Language). Sin HTML, no habría páginas web.

Este artículo proporciona una introducción al HTML. Si alguna vez te has preguntado qué ocurre
detrás de tu navegador web, este artículo es el mejor lugar para empezar a aprender.

Una breve historia del HTMLEdit

A finales de la década de los 80s, Tim Berners-Lee estuvo trabajando como físico en CERN (las
siglas inglesas de la Organización Europea para la Investigación Nuclear). Ideó un sistema para
que los científicos pudieran compartir documentos a través de internet. Antes de su invención,
las comunicaciones por Internet sólo permitían transmitir texto plano, empleando tecnologías
como el email, FTP (File Transfer Protocol), y Usenet- tecnología en la que se basan los foros de
internet. La invención del HTML permitió el uso de un modelo de contenido almacenado en un
servidor central, que podía ser mostrado en un terminal local mediante un navegador. Esto
simplificó el acceso al contenido y habilitó la posibilidad de mostrar contenido "enriquecido"
(como un sofisticado texto formateado y visualización de imagenes).

¿Qué es el HTML?Edit

HTML es un lenguaje de etiquetas. Indica al navegador como tiene que mostrar el contenido. El
HTML separa el "contenido" (palabras, imágenes, audio, video, etc.) de la "presentación" (la
definición del tipo de contenido y las instrucciones de cómo esos contenidos tienen que
mostrarse). El HTML emplea un conjunto de elementos predefinidos que permiten identificar los
distintos tipos de elementos. Estos elementos contienen una o más etiquetas que contienen o
expresan el contenido. Estas etiquetas suelen ir encapsuladas entre los símbolos <>, y las
etiquetas de cierre (que indican el final de un determinado contenido) están precedidas por una
barra /.

Por ejemplo, el elemento párrafo consiste en una etiqueta de inicio como esta "<p>" y una de
cierre "</p>". El siguiente ejemplo muestra un párrafo que está contenido dentro del elemento
párrafo en HTML:

<p>Mi perro odia el pescado.</p>

Cuando este contenido se muestra en una página web, mediante un navegador, aparece así:

Abrir en codepen Abrir en jsfiddle

El navegador emplea las etiquetas como guías para saber cómo debe ser mostrado el contenido
que hay dentro de dichas etiquetas.

Los elementos que se encuentran contenidos, normalmente suelen contener también otros
elementos. Por ejemplo, el elemento énfasis (etiqueta <em>) puede estar dentro del elemento
párrafo:

<p>Mi perro <em>odia</em> el pescado.</p>

Cuando se muestre se verá del siguiente modo:

Abrir en codepen Abrir en jsfiddle

Algunos elementos no contienen otros elementos. Como es el caso de la etiqueta imagen

("<img>") que simplemente especifica el nombre del archivo que contiene la imagen como
atributo:

<img src="smileyface.jpg">

En ocasiones, suele ponerse una barra "/" al final de la etiqueta, justo antes del cierre de la misma
">" para indicar el final de la misma "/>". Aunque se trata de algo opcional en HTML,
en XHTML es obligatoria (que es un lenguaje que permite una forma de poder implementar XML
en los elementos del HTML).

El resto de este artículo describe con un mayor detalle los conceptos descritos en esta sección.
Además, si quieres ver HTML en acción, pásate por Mozilla Thimble, que es un editor online
interactivo que enseña cómo escribir HTML. Además, en el HTML Elements podrás ver una lista
de los elementos HTML disponibles, así como una descripción de los mismos y el uso de cada
uno de ellos.

Elementos — los bloques básicos de construcción

El HTML consiste en una serie de elementos. Los Elementos definen el significado semántico del
contenido. Todos los Elementos están incluídos entre dos grandes etiquetas, que a su vez
contienen otras etiquetas. Por ejemplo, el elemento "<p>" indica un párrafo; el elemento "<img>"
indica una imagen. Mira la página HTML Elements para ver una lista completa de todos los
elementos.

Algunos elementos tienen un significado muy preciso, como "esto es una imagen", "esto es un
encabezado" o "esto es una lista ordenada". Otros elementos resultan menos específicos, como
"esto es una sección de una página" o "esto es parte de un texto". Finalmente otros elementos son
usados por razones técnicas, como "esto es la información identificativa de la página que no debe
ser mostrada". De un modo y otro, todos los elementos del HTML tienen un determinado valor
semántico.

Muchos elementos contienen otros elementos, formando una estructura jerárquica. Un ejemplo
simple, pero completo de una página web sería este:
<html>

<body>

<p>Mi perro <em>odia</em> el pescado.</p>

</body>

</html>

Como puedes ver, los elementos <html> encierran el resto del documento, y el elemento <body>
encierra el contenido de la página. Esta estructura crece con las ramas de un árbol, donde los
elementos <body> y <p> son las ramas que crecen del tronco que es <html>. Esta estructura
jerárquica es lo que se denomina DOM: siglas inglesas del "Modelo de Objetos del Documento"
(Document Object Model).

EtiquetasEdit

Los documentos HTML están escritos en texto plano. Pueden ser escritos mediante editores de
texto capaces de guardar contenido de texto plano (aunque la mayor parte de los creadores de
código HTML prefieren editores especializados que resaltan las partes de código propias de la
sintaxis del HTML y muestran el DOM). Los nombres de las Etiquetas, pueden escribirse en
mayúsculas o en minúsculas. Aunque, el W3C (Asociación Global que vela por mantener los
estándares HTML) recomiendan usar minúsculas (y además el XHTML requiere de las
minúsculas).

El código HTML contenido entre los signos de menor que ("<") al comienzo y mayor que (">") al
final, tienen un significado especial. Es lo que denominamos etiquetas. He aquí un ejemplo
sencillo:

<p>Esto es texto dentro de un párrafo.</p>

En este ejemplo hay una etiqueta de comienzo y otra de cierre. Las etiquetas de cierre son las
mismas que las etiquetas de comienzo sólo que contienen una barra justo después del signo
menor que. Muchos elementos de HTML se escriben empleando las dos etiquetas de comienzo y
final. Las etiquetas de comiezo y final de un elemento deben estar adecuadamente anidadas, esto
significa que las etiquetas de cierre deben escribirse en el orden inverso al de las etiquetas de
inicio. La regla del anidamiento de etiquetas tiene que cumplirse de forma escrupulosa para
poder escribir código válido.

Esto es un ejemplo de código válido:

<em>Me <strong>refiero</strong> a eso</em>.

Esto es un ejemplo de código inválido:

Invalido: <em>Me <strong>refiero</em> a eso</strong>.

Observa que en el ejemplo válido, la etiqueta de cierre para el elemento anidado está situada
antes de la etiqueta de cierre del elemento que la contenedor.

Hasta la adopción de las reglas revisadas del HTML5, los navegadores no interpretaban los
códigos no válidos del mismo modo y provocaban distintos resultados cuando se encontraban
con estas partes de código. Los navegadores eran tolerantes con los autores de código Web, pero
por desgracia no todos de la misma forma, llevando a situaciones impredecibles a la hora de
interpretar códigos no válidos de HTML. Pero esos días han acabado tras la última evolución de
los navegadores como Internet Explorer 10, Firefox 4, Opera 11.60, Chrome 18 o Safari 5, a
medida que han implementado las nuevas normas de interpretación de código HTML no válido.
Aquí puede ver el resultado de un código invalido para el mismo arbol DOM en todos los
navegadores modernos.

Algunos elementos no contienen texto o ningún otro elemento. Es lo que se denominan

elementos vacíos y no necesitan etiquetas de cierre. Este es un ejemplo:

<img src="smileyface.jpg"/>

Mucha gente marca los elementos vacíos usando una barra al final de la etiqueta, justo antes del
simbolo mayor que (necesario en los códigos de XHTML).

<img src="smileyface.jpg"/>

En HTML esta barra no aporta ninguna funcionalidad técnica y su uso es solamente una elección
de estilo.

AtributosEdit

La etiqueta de comienzo puede contener información adicional, tal y como puede verse en el
siguiente ejemplo. Dicha información es lo que se conoce como atributos. Los atributos suelen
consistir en dos partes:

 Un atributo nombre (name).

 Un atributo valor (value).

Algunos atributos sólo pueden tener un único valor. Son atributos Booleanos y pueden ser
incluidos para especificar el nombre del atributo, o dejar su valor vacío. Así los siguientes tres
ejemplos tienen el mismo significado:

<input required="required">
<input required="">

<input required>

Los valores de los atributos que constan de una sola palabra o un número se pueden escribir tal
cual, pero en cuanto hay dos o más cadenas de caracteres en el valor, éstos deben escribirse entre
comillas. Están permitidas tanto las comillas simples ('), como las comillas dobles (") aunque
muchos desarrolladores prefieren utilizar siempre comillas simples para que el código sea menos
ambiguo para la vista y para evitar errores como el siguiente:

<p class=foo bar> (Ten cuidado, esto probablemente no quiere decir lo que piensas que significa.)

En este ejemplo suponemos que el valor del atributo es "foo bar" pero al no haber comillas en el
código se interpreta como si se hubiera escrito así:

<p class="foo" bar="">

Nombre de caracteres referenciadosEdit

Los Caracteres Referenciados (a veces llamados entidades) son combinaciones de caracteres que
sirven para mostrar en el navegador símbolos que tienen un significado especial en el código
HTML. Por ejemplo, HTML interpreta que el símbolo menor que y mayor que son delimitadores
de una etiqueta. Si quieres que estos simbolos sean mostrados en el contenido del texto, debemos
usar los nombres de referencia de estos caracteres. Aquí están los cuatro caracteres referenciados
más comunes, que no estaría de más que memorizases:

 &gt; representa el caracter mayor que (>)

 &lt; representa el caracter menor que (<)
 &amp; representa el caracter ampersand (&)
 &quot; representa el caracter de comillas dobles (")

Hay muchas más entidades, pero estas cuatro son las más importantes por que representan
caracteres que tienen un significado especial en HTML.

Tipo de documento y comentariosEdit

Además de las etiquetas, el contenido y las entidades, un documento de HTML debe contener
una declaración doctype en la primera línea. En el HTML actual esto se escribe del siguiente
modo:

<!DOCTYPE html>

El doctype tiene una historia larga y complicada, pero todo lo que necesitas saber ahora es que el
doctype le dice al navegador que interprete el código HTML y CSS de acuerdo a los estándares
web del W3C y que no trate de emular que se trata de un Internet Explorer de los 90's. (Consultar
peculiaridades.)

HTML tiene un mecanismo para poder introducir comentarios al código que no serán mostrados
en la página cuando esta sea interpretada o leída por un navegador web. Esto suele emplearse
para añadir explicaciones al código, o dejar notas para explicar a otras personas cómo trabaja el
código de la página, o simplemente para dejar recordatorios para uno mismo. Los comentarios en
HTML están contenidos entre los siguientes símbolos:

<!-- Esto es un comentario de texto -->

Un pequeño documento pero completoEdit

Colocando todas estas explicaciones juntas, aquí les dejamos un pequeño ejemplo de un
documento HTML completo. Puedes copiar este código en un editor de textos, guardarlo como
miprimerdoc.html y cargarlo en un navegador. Asegurate de estar usando los códigos de caracteres
UTF-8. Dado que este documento no utiliza estilos (CSS) su apariencia será muy plana, pero sólo
se trata de un pequeño comienzo.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>Un pequeño documento</title>

</head>

<body>

<h1>Titulo principal de mi documento</h1>

<!-- Los titulos usan "h" + "n", siendo "n" un numero del 1 al 6 -->

<p>Mira Ma, estoy programando con <abbr title="Hyper Text Markup

Language">HTML</abbr>.</p>

</body>

</html>

Frames
Los frames (marcos o cuadros) permiten dividir la ventana en varias más pequeñas, de
modo que en cada una de ellas se cargua una página html distinta. Las versiones más
antiguas de los navegadores no tienen implementada esta característica, por lo que no
podrán verlos.

Sintaxis

Los frames se declaran con la etiqueta <FRAMESET>, que debe ser colocada antes de
la etiqueta <BODY>. Si no se cumple este requisito, la etiqueta se ignorará.
Un ejmplo sencillo es el siguiente: (puedes ver el ejemplo real pulsando aquí)

<HTML>
<HEAD><TITLE> Título de la página </TITLE></HEAD>

<FRAMESET ROWS=75,*>

<FRAME SRC="frames1.htm" >

<FRAME SRC="frames2.htm" >

</FRAMESET>

<NOFRAMES>
<BODY>
Lo siento,su navegador no soporta frames.
Pulse <a href="frames1.htm>aquí </A>
para acceder a los contenidos de estas páginas.
</BODY>
</NOFRAMES>

</HTML>

EL atributo ROWS (filas) es el que define el número y el tamaño de los frames, en este
caso dos filas, de 75 píxels la primera y el resto de la ventana la segunda. También se
puede dividir en columnas mediante COLS

El tamaño de los frames se puede especificar de más formas:

COLS=*,5* dos columnas, la segunda cinco veces mayor que la primera
COLS=150,*,150 tres colunmas, la primera y tercera de 150 píxels, la segunda ocupa el
resto.
ROWS=20%,80% dos filas que ocupan el 20 % y el 80 % del espacio respectivamente.

Las etiquetas NOFRAMES y BODY solamente se usan por cortesía, de hecho se

pueden suprimir.

Las etiquetas FRAME SRC="frames.htm" cargan las página indicadas en el frame

correspondiente.
También es posible anidar frames, llamando a una página que tenga de nuevo frames o
bien declarándolo explicitamente. Un ejemplo de esto último es el que aparece abajo (el
real aquí )

<FRAMESET COLS=20%,*>

<FRAME SRC="frames1.htm">

<FRAMESET ROWS=20%,*>
<FRAME SRC="frames2.htm">
<FRAME SRC="frames3.htm">
</FRAMESET>

</FRAMESET>

Este código divide la ventana en dos columnas, la primera del 20 % del ancho total, y la
segunda queda dividida a su vez en dos filas, siendo la primera de ellas un 20 % del
total

El atributo TARGET

Lo más interesante de los frames es la posibilidad que tienen de interactuar entre si, es
decir pulsar un enlace en el frame 1 y cargar el contenido en el frame 2.
Para conseguir esto hay que darle un nombre a los frames y luego indicar en el enlace
donde se va a cargar mediante el atributo TARGET. Veamos un ejemplo

<HTML>
<HEAD><TITLE> Frames --Ejemplo 3--</TITLE></HEAD>

<FRAMESET COLS=150,*>

<FRAME SRC="frames4.htm" NAME=margen>

<FRAME SRC="frames5.htm" NAME=principal>

</FRAMESET>

</HTML>

Los enlaces de la página frames4.htm , que es la que se carga en el margen

izquierdo,se escriben de la forma:
<A HREF="frames1.htm" TARGET=principal>Frame 1 </A>

Hay ciertos valores reservados para TARGET, estos son

TARGET=_top, hace que la página se cargue en la ventana completa del navegador.

TARGET=_self, hace que la página se cargue en la misma ventana del frame actual.
TARGET=_parent, hace que la página se cargue en el frame "padre", del que
desciende el actual
TARGET=_blank, hace que la página se cargue en una nueva ventana.
TARGET=nombre, hace que la página se cargue en el frame llamado nombre. Si no
existe se carga en una ventana nueva

Atributos de FRAME

En los frames se pueden modificar algunas de sus características por medio de las
etiquetas que siguen:

SCROLLING= yes, no , auto . Indica si el frame llevará siempre, nunca o cuando lo

necesite, barra de deslizamiento vertical

BORDERCOLOR="color" . Indica el color del borde

MARGINWIDTH=n . Indica el margen horizontal, tanto derecho como izquierdo, en

píxels

MARGINHEIGHT=n . Indica el margen vertical, tanto superior como inferior, en píxels

NORESIZE . Indica que el frame no se puede redimensionar. Si no se pone este atributo

colocando el cursor en el borde del frame, permitiría su deslizamiento

Atributo de FRAMESET

FRAMEBORDER=yes, no . Indica si los frames tendrán bordes o no.

Puedes ver un ejemplo más de frames aquí

Colores

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

Ejemplo 1: <FONT SIZE=+2 COLOR=#FF00FF>Esto esta en color fucsia</FONT>

Ejemplo 2: Este color es #C1E1F8

c
Codigos ASCII e ISO-8859-1

Como muchos sistemas tienen distintos juegos de caracteres ASCII, se emplean

códigos para representarlos por igual en cualquiera de ellos. De esta manera se
asegura que cualquiera que vea nuestra página lo hará de igual modo que nosotros.

Estos símbolos especiales permiten también escribir en distintos lenguajes,ya que

incluyen los acentos, diéresis, etc. Para incluirlos en la página se usan las etiquetas
mostradas en la tabla. Como vemos, todos empiezan por & y acaban en ; y se deben
escribir respetando las mayúsculas y minúsculas

Símbolo Etiqueta Símbolo Etiqueta Símbolo Etiqueta Símbolo Etiqueta

á &aacute; Á &Aacute; à &agrave; À &Agrave;
é &eacute; É &Eacute; è &egrave; È &Egrave;
í &iacute; Í &Iacute; ì &igrave; Ì &Igrave;
ó &oacute; Ó &Oacute; ò &ograve; Ò &Ograve;
ú &uacute; Ú &Uacute; ù &ugrave; Ù &Ugrave;
ä &auml; Ä &Auml; â &acirc; Â &Acirc;
ë &euml; Ë &Euml; ê &ecirc; Ê &Ecirc;
ï &iuml; Ï &Iuml; î &icirc; Î &Icirc;
ö &ouml; Ö &Ouml; ô &ocirc; Ô &Ocirc;
 ü &uuml; Ü &Uuml; û &ucirc; Û &Ucirc;
ñ &ntilde; Ñ &Ntilde; ý &yacute; ÿ &yuml;
ç &ccedil; Ç &Ccedil; æ &aelig; Æ &AElig;
ø &oslash; Ø &Oslash; © &copy; ® &reg;
& &amp; " &quot; < &lt; > &gt;
(espacio) &nbsp;

Otra forma de representar estos caracteres especiales es por medio del código estándar
ISO-8859-1. En este caso para incluirlos debemos escribir &#nn; donde nn representa
el número dado en la tabla de abajo

Juego de caracteres ISO-8859-1

32 ! 33 " 34 # 35 $ 36 % 37 & 38 ' 39
( 40 ) 41 * 42 + 43 , 44 - 45 . 46 / 47
0 48 1 49 2 50 3 51 4 52 5 53 6 54 7 55
8 56 9 57 : 58 ; 59 < 60 = 61 > 62 ? 63
@ 64 A 65 B 66 C 67 D 68 E 69 F 70 G 71
H 72 I 73 J 74 K 75 L 76 M 77 N 78 O 79
P 80 Q 81 R 82 S 83 T 84 U 85 V 86 W 87
X 88 Y 89 Z 90 [ 91 \ 92 ] 93 ^ 94 _ 95
` 96 a 97 b 98 c 99 d 100 e 101 f 102 g 103
h 104 i 105 j 106 k 107 l 108 m 109 n 110 o 111
p 112 q 113 r 114 s 115 t 116 u 117 v 118 w 119
x 120 y 121 z 122 { 123 | 124 } 125 ~ 126 &127; 127
€ 128  129 ‚ 130 ƒ 131 „ 132 … 133 † 134 ‡ 135
ˆ 136 ‰ 137 Š 138 ‹ 139 Œ 140  141 Ž 142  143
 144 ‘ 145 ’ 146 “ 147 ” 148 • 149 – 150 — 151
˜ 152 ™ 153 š 154 › 155 œ 156  157 ž 158 Ÿ 159
160 ¡ 161 ¢ 162 £ 163 ¤ 164 ¥ 165 ¦ 166 § 167
¨ 168 © 169 ª 170 « 171 ¬ 172 173 ® 174 ¯ 175
° 176 ± 177 ² 178 ³ 179 ´ 180 µ 181 ¶ 182 · 183
¸ 184 ¹ 185 º 186 » 187 ¼ 188 ½ 189 ¾ 190 ¿ 191
À 192 Á 193 Â 194 Ã 195 Ä 196 Å 197 Æ 198 Ç 199
È 200 É 201 Ê 202 Ë 203 Ì 204 Í 205 Î 206 Ï 207
Ð 208 Ñ 209 Ò 210 Ó 211 Ô 212 Õ 213 Ö 214 × 215
Ø 216 Ù 217 Ú 218 Û 219 Ü 220 Ý 221 Þ 222 ß 223
à 224 á 225 â 226 ã 227 ä 228 å 229 æ 230 ç 231
è 232 é 233 ê 234 ë 235 ì 236 í 237 î 238 ï 239
ð 240 ñ 241 ò 242 ó 243 ô 244 õ 245 ö 246 ÷ 247
ø 248 ù 249 ú 250 û 251 ü 252 ý 253 þ 254 ÿ 255