HTML
HTML
HTML
El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta. La
etiqueta presenta frecuentemente dos partes:
Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que caracterizan a esta
etiqueta. Así por ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML
escribimos una frase con el siguiente código:
El resultado Será:
El resultado sería:
Además de todo esto, un documento HTML ha de estar delimitado por la etiqueta <html>
y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales:
El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos
nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.
El resultado es un documento con la siguiente estructura:
<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo,
palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador: Texto e imágenes
</body>
</html>
A notar que las etiquetas pueden ser escritas con cualquier tipo de combinación de mayúsculas y
minúsculas. <html>, <HTML> o <HtMl> son la misma etiqueta. Resulta sin embargo aconsejable
acostumbrarse a escribirlas en minúscula ya que otras tecnologías que pueden convivir con
nuestro HTML (XML por ejemplo) no son tan permisivas y nunca viene mal coger buenas
costumbres desde el principio para evitar fallos triviales en un futuro.
Tu primera página
Podemos ya con estos conocimientos, y alguno que otro más, crear nuestra primera página. Para
ello, abre tu editor de textos y copia y pega el siguiente texto en un nuevo documento.
<html>
<head>
<title>Cocina Para Todos</title>
</head>
<body>
<p><b>Bienvenido,</b></p>
<p>Estás en la página <b>Comida para Todos</b>.</p>
<p>Aquí aprenderás recetas fáciles y deliciosas.</p>
</body>
</html>
Ahora guarda ese archivo con extensión .html o .htm en tu disco duro. Para ello accedemos al
menú Archivo y seleccionamos la opción Guardar como. En la ventana elegimos el directorio
donde deseamos guardarlo y colocaremos su nombre, por ejemplo mi_pagina.html
Consejo: Utiliza nombres en tus archivos que tengan algunas normas básicas para ahorrarte disgustos y lios.
Nuestro consejo es que no utilices acentos ni espacios ni otros caracteres raros. También te ayudará escribir
siempre las letras en minúsculas.
Esto no quiere decir que debes hacer nombres de archivos cortos, es mejor hacerlos descriptivos para que te
aclaren lo que hay dentro. Algún caracter como el guión "-" o el guión bajo "_" te puede ayudar a separar las
palabras. Por ejemplo quienes_somos.html
Con el documento HTML creado, podemos ver el resultado obtenido a partir de un navegador. Es
conveniente, llegado a este punto, hacer hincapié en el hecho de que no todos los navegadores
son idénticos. Desgraciadamente, los resultados de nuestro código pueden cambiar de uno a otro
por lo que resulta aconsejable visualizar la página en varios. Generalmente se usan Internet
Explorer y Netscape como referencias ya que son los más extendidos.
A decir verdad, en el momento que estas líneas son escritas, Internet Explorer acapara la inmensa
mayoría de usuarios (90% más o menos) y Netscape esta relegado a un segundo plano. Esto no
quiere decir que lo debemos dejar totalmente de lado ya que el 10% de visitas que puede
proporcionarnos puede resultar muy importante para nosotros. Por otra parte, parece que se ha
hecho publica la intención de Netscape de desviar un poco su temática de negocios hacia otros
derroteros y abandonar esta llamada "lucha de navegadores" en la cual estaba recibiendo la peor
parte.
Pues bien, volviendo al tema, una vez creado el archivo .html o .htm, podemos visualizar el
resultado de nuestra labor abriendo dicha página con un navegador. Para hacerlo, la forma resulta
diferente dependiendo del navegador:
La cosa no resulta más difícil para Netscape. En este caso, nos dirigimos también a la barra de
menú principal y elegimos File y a continuación Open File. La misma ventana de búsqueda nos
permitirá escudriñar el contenido de nuestro PC hasta dar con el archivo buscado.
Nota: También puedes abrir el archivo si accedes al directorio donde lo guardaste. En él podrás encontrar tu
archivo HTML y verás que tiene como icono el logotipo de Netscape o el de Internet Explorer. Para abrirlo
simplemente hacemos un doble click sobre él.
Una vez abierto el archivo podréis ver vuestra primera página web. Algo sencillita pero por algo se
empieza. Ya veréis como en poco tiempo seremos capaces de mejorar sensiblemente.
Fijaos en la parte superior izquierda de la ventana del navegador. Podréis comprobar la presencia
del texto delimitado por la etiqueta <title>. Esta es una de las funciones de esta etiqueta, cuyo
principal cometido es el de servir de referencia en los motores de búsqueda como Altavista o
Yahoo.
Por otro lado, los elementos que colocamos entre la etiqueta <body> y </body> se pueden ver
en el espacio reservado para el cuerpo de la página.
Si ahora hacéis click con el botón derecho sobre la página y elegís Ver código fuente (o View page
source) veréis como en una ventana accesoria aparece el código de nuestra página. Este recurso
es de extremada importancia ya que nos permite ver el tipo de técnicas empleadas por otros para
la confección de sus páginas.
Con todo esto asimilado ya estamos en condiciones de adentrarnos un poco más en la descripción
de algunas de las etiquetas más empleadas del HTML.
Posible problema: Al utilizar el Block de Notas en Windows en ocasiones, aunque le digamos que es un
archivo .html, el documento se guarda como si fuera un texto y no una página web. Lo que está pasando es
que el Block de Notas tiene predeterminado guardar sus archivos con extensión .txt y en realidad lo que está
guardando en el disco duro es mi_pagina.html.txt
Para conseguir tener el control de las extensiones en el block de notas y en Windows en general podemos
acceder a MI-PC y en el menú de Ver seleccionáis "Opciones de carpeta". En la ventana que sale pulsamos en
la solapa "Ver" y nos permite deseleccionar una caja de selección que pone algo como "Ocultar extensiones
para los tipos de archivos conocidos". (Así se hace en Win98, puede variar un poco en otras versiones de
Windows.)
Con ello conseguiremos que se vea siempre la extensión del archivo con el que estamos trabajando y que el
Block de Notas nos haga caso cuando le indicamos que grabe el archivo con otra extensión que no sea .txt
En los capítulos anteriores hemos presentado a titulo de ejemplo algunas etiquetas que permiten
dar formato a nuestro texto. En este capitulo veremos con más detalle las más ampliamente
utilizadas y ejemplificaremos algunas de ellas posteriormente.
Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos,
introducir viñetas, numeraciones o bien poner en negrita, itálica...
Hemos visto que para definir los párrafos nos servimos de la etiqueta <p> que introduce un salto
y deja una línea en blanco antes de continuar con el resto del documento.
Podemos también usar la etiqueta <br>, de la cual no existe su cierre correspondiente (</br>),
para realizar un simple retorno de carro con lo que no dejamos una línea en blanco sino que solo
cambiamos de línea.
Nota: Existen otras etiquetas que no tienen su correspondiente de cierre, como <img> para las imágenes, las
veremos más adelante. Esto ocurre porque un salto de línea o una imagen no empiezan y acaban más
adelante sino que sólo tienen presencia en un lugar puntual.
Podéis comprobar que cambiar de línea en nuestro documento HTML sin introducir alguna de estas
u otras etiquetas no implica en absoluto un cambio de línea en la página visualizada. En realidad
el navegador introducirá el texto y no cambiara de línea a no ser que esta llegue a su fin o bien lo
especifiquemos con la etiqueta correspondiente.
Los párrafos delimitados por etiquetas <p> pueden ser fácilmente justificados a la izquierda,
centro o derecha especificando dicha justificación en el interior de la etiqueta por medio de un
atributo align. Un atributo no es más que un parámetro incluido en el interior de la etiqueta que
ayuda a definir el funcionamiento de la etiqueta de una forma más personal. Veremos a lo largo
de este manual cantidad de atributos muy útiles para todo tipo de etiquetas.
El resultado seria:
que daría:
Como veis, en cada caso el atributo align toma determinados valores que son escritos entre
comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto
funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por
defecto. Para el caso de align, el valor por defecto es left.
Nota: Los atributos tienen sus valores indicados entre comillas ("), pero si no los indicamos entre comillas
también funcionará en la mayoría de los casos. Sin embargo, es aconsejable que pongamos siempre las
comillas para acostumbrarnos a utilizarlas, por dar homogeneidad a nuestros códigos y para evitar errores
futuros en sistemas más quisquillosos.
El atributo align no es exclusivo de la etiqueta <p>. Otras etiquetas muy comunes, que veremos
más adelante, entre las cuales se introducen texto o imágenes, suelen hacer uso de este atributo
de una forma habitual.
Imaginemos un texto relativamente largo donde todos los párrafos están alineados a la izquierda
(por ejemplo). Una forma de simplificar nuestro código y de evitar introducir continuamente el
atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>.
Esta etiqueta por si sola no sirve para nada. Tiene que estar acompañada del atributo align y lo
que nos permite es alinear cualquier elemento (párrafo o imagen) de la manera que nosotros
deseemos.
Así, el código:
<p align="left">Parrafo1</p>
<p align="left"> Parrafo3</p>
<p align="left"> Parrafo2</p>
es equivalente a:
<div align="left">
<p>Parrafo1</p>
<p>Parrafo2</p>
<p>Parrafo3</p>
</div>
Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un mismo tipo de
alineado.
Ejemplo práctico:
Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que podéis resolver
en vuestros ordenadores. Simplemente queremos construir una página que tenga, por este orden:
2 Párrafos centrados
3 Párrafos alineados a la derecha
Un salto de línea triple
1 párrafo alineado a la izquierda
No vamos a escribir en esta ocasión el código fuente del ejercicio. Podemos verlo en
funcionamiento en nuestro navegador y en la ventana podemos obtener el código fuente
seleccionando en el menú Ver la opción Código fuente.
Encabezados
Existen otras etiquetas para definir párrafos especiales, formateados como títulos. Son los
encabezados o Header en inglés. Como decimos, son etiquetas que formatean el texto como un
titular, para lo cual asignan un tamaño mayor de letra y colocan el texto en negrita.
Hay varios tipos de encabezados, que se diferencian en el tamaño de la letra que utilizan. La
etiqueta en concreto es la <h1>, para los encabezados más grandes, <h2> para los de segundo
nivel y así hasta <h6> que es el encabezado más pequeño.
Los encabezados implican también una separación en párrafos, así que todo lo que escribamos
dentro de <h1> y </h1> (o cualquier otro encabezado) se colocará en un párrafo independiente.
Encabezado de nivel 1
Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de
encabezado de nivel 2 alineado al centro.
Encabezado de nivel 2
Otro ejercicio interesante es construir una página web que contenga todos los encabezados
posibles. Se puede ver a continuación.
<html>
<head>
<title>Todos los encabezados</title>
</head>
<body>
</body>
</html>
Consejo: No debemos utilizar las etiquetas de encabezado para formatear el texto, es decir, si queremos
colocar un tipo de letra más grande y en negrita debemos utilizar las etiquetas que existen para ello (que
veremos en seguida). Los encabezados son para colocar titulares en páginas web y es el navegador el
responsable de formatear el texto de manera que parezca un titular. Cada navegador, pues, puede formatear
el texto a su gusto con tal de que parezca un titular.
formateando el texto
Además de todo lo relativo a la organización de los párrafos, uno de los aspectos primordiales del
formateo de un texto es el de la propia letra. Resulta muy común y práctico presentar texto
resaltado en negrita, itálica y otros. Paralelamente el uso de índices, subíndices resulta vital para
la publicación de textos cient&iaacute;ficos. Todo esto y mucho más es posible por medio del
HTML a partir de multitud de etiquetas entre las cuales vamos a destacar algunas.
Negrita
Podemos escribir texto en negrita incluyéndolo dentro de las etiquetas <b> y </b> (bold). Esta
misma tarea es desempeñada por <strong> y </strong> siendo ambas equivalentes. Nosotros
nos inclinamos por la primeras por simple razon de esfuerzo.
<b>Texto en negrita</b>
Texto en negrita
Aunque las dos etiquetas hacen el mismo efecto, tienen una peculiaridad que las hace distintas. La etiqueta
<b> indica negrita, mientras que la etiqueta <strong> indica que se debe escribir resaltado. El HTML lo
interpretan los navegadores según su criterio, es por eso que las páginas se pueden ver de distinta manera en
unos browsers y en otros. La etiqueta <H1> quiere decir "encabezado de nivel 1", es el navegador el
responsable de formatear el texto de manera que parezca un encabezado de primer nivel. En la práctica los
encabezados de Internet Explorer y Netscape son muy parecidos (tamaño de letra grande y en negrita), pero
otro navegador podría colocar los encabezados con subrayado si le pareciese oportuno.
La diferencia entre <b> y <strong> se podrá entender ahora. Mientras que <b> significa simplemente negrita
y todos los navegadores la interpretarán como negrita, <strong> es una etiqueta que significa que se tiene
que resaltar fuertemente el texto y cada navegador es el responsable de resaltarlo como desee. En la práctica
<strong> coloca el texto en negrilla, pero podría ser que un navegador decidiese resaltar colocando negrilla,
subrayado y color rojo en el texto.
Itálica
También en este caso existen dos posibilidades, una corta: <i> e </i> (italic) y otra un poco más
larga: <em> y </em>. En este manual, y en la mayoría de las páginas que veréis por ahí, os
encontraréis con la primera forma sin duda más sencilla a escribir y a acordarse.
<i>Texto en itálica</i>
Texto en itálica
Subrayado
El HTML nos propone también para el subrayado el par de etiquetas: <u> y </u> (underlined).
Sin embargo, el uso de subrayados ha de ser aplicado con mucha precaución dado que los enlaces
hipertexto van, a no ser que se indique lo contrario, subrayados con lo que podemos confundir al
lector y apartarlo del verdadero interés de nuestro texto.
Subíndices y supraíndices
Este tipo de formato resulta de extremada utilidad para textos científicos. Las etiquetas
empleadas son:
El resultado:
13
La CC3H4ClNOS es un heterociclo alergeno enriquecido
Anidar etiquetas
Todas estas etiquetas y por supuesto el resto de las vistas y que veremos más adelante pueden
ser anidadas unas dentro de otras de manera a conseguir resultados diferentes. Así, podemos sin
ningún problema crear texto en negrita e itálica embebiendo una etiqueta dentro de la otra:
Consejo: Cuando anides etiquetas HTML hazlo correctamente. Nos referimos a que si abres etiquetas dentro
de otra más principal, antes de cerrar la etiqueta principal cierres las etiquetas que hayas abierto dentro de
ella.
Esto es muy aconsejable, aunque los navegadores entiendan bien las etiquetas mal anidadas, por dos
razones:
1. Sistemas como XML no son tan permisivos con estos errores y puede que en el futuro nuestras
páginas no funcionen correcamente.
2. A los navegadores les cuesta mucho tiempo de procesamiento resolver este tipo de errores, incluso
más que construir la propia página y debemos evitarles que sufran por una mala codificación.
A pesar de que por razones de homogeneidad y sencillez de codigo este tipo de formatos son
controlados actualmente por hojas de estilo en cascada (de las cuales ya tendremos tiempo de
hablar), existe una forma clásica y directa de definir color tamaño y tipo de letra de un texto
determinado.
Esto se hace a partir de la etiqueta <font> y su cierre correspondiente. Dentro de esta etiqueta
deberemos especificar los atributos correspondientes a cada uno de estos parámetros que
deseamos definir. A continuación os comentamos los atributos principales de esta etiqueta:
Atributo face
Define el tipo de letra. Este atributo es interpretado por versiones de Netscape a partir de la 3 y
de MSIE 3 o superiores. Otros navegadores las ignoran completamente y muestran el texto con la
fuente que utilizan.
Hay que tener cuidado con este atributo ya que cada usuario, dependiendo de la plataforma que
utilice, puede no disponer de los mismos tipos de letra que nosotros con lo que, si nosotros
elegimos un tipo del que no dispone, el navegador se verá forzado a mostrar el texto con la fuente
que utiliza por defecto (suele ser Times New Roman). Para evitar esto, dentro del atributo suelen
seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobará
que dispone del primer tipo enumerado y si no es así, pasará al segundo y así sucesivamente
hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto. Veamos un
ejemplo.
Nota: Aquí tenemos un ejemplo de atributo cuyo valor debe estar limitado por comillas ("). Habíamos dicho
que las comillas eran opcionales en los atributos, sin embargo esto no es así siempre. Si el valor del atributo
contiene espacios, como es el caso de:
se entendería que face=Comic, pero no se tendría en cuenta todo lo que sigue, porque HTML no lo asociaría al
valor del atributo. En este caso HTML pensaría que las siguientes palabras (después del espacio) son otros
atributos, pero como no los conoce como atributos simplemente los desestimará.
Atributo size
Atributo color
El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por
un número hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes
representa la contribución del rojo, verde y azul al color en cuestión.
Podéis entender cómo funciona esta numeración y cuáles son los colores que resultan más
compatibles a partir de este artículo: Los colores y HTML.
Por otra parte, es posible definir de una manera inmediata algunos de los colores más
frecuentemente usados para los que se ha creado un nombre más memotécnico:
Nombre Color
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
Con todo esto estamos ya en disposicion de crear un texto formateado de una forma realmente
elaborada.
Pongamos pues en practica todo lo que hemos aprendido en estos capitulos haciendo un ejercicio
consistente en una página que tenga las siguientes características:
Se puede ver una posible solución del ejercicio en este enlace. (Ver el código fuente de la página
para ver cómo lo hemos resuelto)