El HTML es es lenguaje básico de la Web. La 4.01 es la última versión. Primero vamos a definir y detallar lo que es y lo que no es este lenguaje.
Lo que es...
Es un lenguaje de etiquetas, lo que significa que se insertan etiquetas en el texto para definir propiedades. Es un lenguaje de maquetación y presentaci&oacun de documentos. Esto es, que es una herramienta para describir como han de mostrarse los elementos de una pagina. Tama�os, textos, colores, imágenes, enlaces, espacios, listas, tablas, todo esto es lo que podemos definir con este lenguaje. Es un lenguaje abierto y libre. Cualquiera puede leer las publicaciones de las especificaciones, aprenderlo y usarlo. Para escribir código HTML no es necesario ninguna herramienta especial. Con un editor de texto sin formato podemos crear todo tipo de paginas. Si bien es cierto que exiten herramientas que automatizan ciertos procesos de la creación de paginas. Cada una con sus ventajas e inconvenientes. Si bien es un lenguaje case-insensitive (no sensible al caso, o que no distingue entre mayúsculas y minúsculas), se aconseja que todas las etiquetas estén en minúsculas.
... y lo que no
No es un lenguaje de programación. Esto quiere decir que usted no puede realizar un programa, no tiene variables, ni estructuras de control, ni bucles, ni una librería de funciones. Ha he quedar claro que no es un lenguaje de programación. El HTML no es un lenguaje definido por ninguno de los grandes navegadores (Netscape, Opera, IE, Firefox, Mozilla, Safari) sino por un comité conocido como World Wide Web Consortium.
Las Etiquetas (tags)
Todo el HTML son etiquetas. (Si nos olvidamos de momento de los caracteres especiales). Las etiquetas son uans marcas que se introducen en un documento para estructurarlo. La mayoría de las etiquetas se abren y se cierran. Lo que queda en el interior es lo definido, y la etiqueta es la caracterísitica definida.
Las etiquetas tienen esta forma <algo>. Aunque por supuesto la etiqueta 'algo' no existe. Las etiquetas existentes son un conjunto finito. Nuestra etiqueta inventada se cerraría así: </algo>. No todas las etiquetas se cierran. Por ejemplo, la inserción de una imagen o la de una barra horizontal, (<img> y <hr> respectivamente) no tiene sentido cerrarlas.
En un documento .html los saltos de línea o retornos de carro (las pulsaciones de 'Intro') y los espacios en blanco no tienen sentido. Es decir, no son reconocidos por los navegadores. Para ellos existe <br> y el carácter especial . Más tarde hablaremos en profundidad acerca de los códigos de caracteres.
Estructura de una pagina
Todas las paginas webs tienen cierta estructura básica en común. Toda pagina bien programada debe presentar esta estructura. Primero la escribiré aquí y luego la comentaremos línea a línea.
<html>
<head>
<title>Nuestra primera pagina</title>
</head>
<body>
<p>Yo soy el cuerpo de la pagina. Aquí pondremos todo lo que se ve.</p>
</body>
</html>
(Puedes copiar y pegar este texto en un editor de texto plano (vi, notepad, etc), guardarlo como "ejemplo.html" y abrirlo con tu navegador favorito. Veras que todas las etiquetas han desaparecido, y tendras tu primera pagina cargada)
Bueno tampoco ha sido tan malo ¿no? Como ves, lo primero que hay que escribir es la etiqueta <html> y lo ultimo cerrarla con </html>. Como ya dijimos antes, todo lo que queda encerrado entre dos etiquetas recibe esa propiedad. Esto quiere decir, que todo lo que hay entre esas dos etiquetas es código html.
Luego vemos que una página se divide claramente en dos partes, la cabecera (<head> del ingles) y el cuerpo (<body> del ingles también).
En la cabecera incluiremos información acerca de la pagina misma, pero que no forma parte del contenido. En nuestro ejemplo tan solo hemos definido el titulo de la pagina, que es lo que aparece en el titulo de las ventanas del navegador que usemos (en la mayoría de los casos) y el nombre por el que se conocera la pagina en los favoritos. Además de esta información, podemos incluir una descripción de la pagina, palabras clave de esta, el tipo de tabla de caracteres en el que esta programada, datos acerca del autor, de la herramienta con la que se programo, etc.
En el otro lado, en el cuerpo, es donde programaremos lo que es el contenido de la pagina. Todos los textos, fotografías, enlaces y demás los situaremos aquí. En nuestro ejemplo tan solo hemos incluido un simple párrafo de texto.
Formateo de texto
Ahora vamos a aprender unas cuantas etiquetas básicas con las que empezar a formatear un poco el texto, pues ese párrafo de ahí arriba nos ha quedado un poco soso. Recuerda siempre que todos tus textos que no sean títulos, serán normalmente párrafos, y deberán ir entre las etiquetas <p> y </p> . Los formateos mas conocidos suelen ser negrita, cursiva y subrayado ¿verdad? ;)
Las etiquetas que necesitas son:
<b> Para un texto en negrita </b>
<i> Para un texto en cursiva o itálica </i>
<u> Para un texto subrayado </u>
Pero ahora viene lo verdaderamente interesante. ¡Las etiquetas se pueden anidar! Gracias a esto, podemos definir varias propiedades simultaneas para un mismo párrafo. Por ejemplo:
Yo soy un texto muy formateado, algo extravagante.
Ahora puedes modificar ese primer párrafo simple que pusimos y empezar a personalizar tu pagina. Aunque todavía es un formateo un poco flojo. Estaría bien poder cambiar los colores y los tama�os. Para ello vamos a usar la etiqueta <font>, que si bien su uso es desaconsejado para un programador/dise�ador de Webs avanzado, no hay problema por usarlo en un curso introductorio. Veamos como se hace esto, aquí tenéis unos ejemplos:
<font color="red"> Soy un texto en rojo </font>
<font size="5"> Soy un texto grande </font>
<font size="5" color="green"> <u> Soy un texto verde grande, y subrayado </u> </font>
<font face="Comic Sans MS"> Soy un texto en Comic Sans MS </font>
Con esto ya podemos hacer un formateo de texto mucho mas serio, y además hemos introducido el concepto de 'parámetro', lo que elegantemente me lleva a nuestro siguiente capitulo:
Atributos
En el ejemplo anterior, hemos visto que la etiqueta <font> tenia cierta información extra. Esto se llama atributos y valores. Cada etiqueta tiene sus propios atributos, y en algunos casos no tienen ninguno. En el caso que nos ocupa, la etiqueta <font> tiene tres parámetros principales: color, size y face. Los tres respectivamente se refieren al color, tama�o y tipo de letra. Para estos atributos concretos, los posibles valores serian:
En el caso del color, hay dos opciones, o un nombre de color, escrito en ingles (como "red", "blue", "green" o "yellow") o un código de color. Dicho código, tiene esta forma: #xxyyzz, donde cada pareja de digitos es una cantidad de un color primario, rojo, verde o azul, según su posición. Es un código RGB. Veamos, R serian las dos 'xx', mientras que G serian las dos 'yy' y por ultimo B (blue, azul) serian las dos 'zz'. Cada dígito esta en base hexadecimal, con lo que puede tomar 16 valores, como obviamente los números se nos quedan cortos, usamos las primeras letras del alfabeto. Así, los posibles valores son: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. Veamos unos ejemplos:
Este color es "red"
Este color es "#FF0000"
Este color es "#000000", negro
Este color es "#FFFFFF", blanco
Este color es "#AAAAAA", gris
Este color es "#FFFF00", rojo+verde=amarillo
Este color es "#22BB44", un poco de rojo, un mucho de verde y un poco de azul.
En el caso del size, el valor será un numero entero positivo. Cuanto más grande este, mayor será la fuente.
En el caso de face, el valor del atributo será el nombre de un tipo de letra. Como por ejemplo "Verdana" o "Courier". Ojo, debemos poner una fuente mas o menos estándar, pues si no, corremos el riesgo de que el dispositivo que visualiza nuestra pagina no lo tenga instalado, con lo que vera el texto en su fuente por defecto y no en la que nosotros hemos especificado.
Barras horizontales
A veces nos interesa separar una información de otra en una pagina, para ello, uno de los métodos mas usados y más sencillos es insertar una barra horizontal. Para ello existe la etiqueta <hr>. Veamos su efecto en su forma más sencilla:
Una sencilla pero útil barra horizontal. Esta etiqueta acepta dos propiedades, size y width. Con la primera especificamos el alto de la linea, y con la segunda el ancho. Ejemplos:
<hr size="30" width="50%">
<hr size="5" width="100%">
Alineación
Otro de los formateos básicos del texto consiste en la alineación. Básicamente, podemos decir que exiten tres tipos: de izquierdas, de centro y de derechas. (¿A que tu también has pensado en política? Jajaja). La manera correcta de alinear un texto es mediante la etiqueta <p> y el atributo align. Este puede obtener uno de los tres valores siguientes: left, center y right. El primero es el valor por defecto.
Yo estoy alineado a la izquierda.
Yo a la derecha.
Yo en cambio, prefiero el centro.
Encabezamientos
Además de párrafos, para programar una buena pagina necesitaremos títulos. Podríamos utilizar la etiqueta <font> para ajustar los tama�os de cada titulo o subtítulo, pero esto es un poco engorroso y sucio. La mejor manera es indicando mediante unas etiquetas lo que es un titulo de primer orden, uno de segundo, uno de tercero, etc. Para ellos están las etiquetas <h1>, <h2>, <h3>, etc. La primera es la de mayor rango, y según las numeramos en orden creciente, anidamos mas el titulo. Así se pueden crear subtítulos y subsubtítulos.
Título de la obra
Capítulo 1
Capítulo 2
Comentarios
Todo buen código debe llevar comentarios. Los comentarios posibilitan que otras personas entiendan nuestro código fácilmente. O incluso nosotros mismos despu´s de alg´n tiempo olvidaremos detalles acerca de como lo programamos. Para ello son necesarios los comentarios. En HTML los comentarios también son posibles. La manera mas estándar es mediante la etiqueta <!-- comentario -->, donde debemos substituir 'comentario' con el texto que queramos.
Enlaces
Los enlaces son el alma de la Web. Es la característica fundamental que lo une todo. Antes de la WWW ya había mucho intercambio de información en Internet, principalmente en las BBS. Pero eran islas de información sin conexión. El hyper-enlace es el punto fuerte de la Web. Tu página puede ser más o menos bonita, contener más o menos información, pero ha de tener enlaces. Tanto apuntando hacia ella, como saliendo de ella.
La etiqueta que nos permite construir enlaces es <a>. Claro, que para poder programar un enlace a algún sitio, seria interesante decir a donde. por ejemplo, un enlace a google seria algo como <a href="http://www.google.com">Hola, soy un enlace a google</a>. El valor del atributo href ha de ser una URL preferiblemente valida, para no tener desagradables 404s. Para saber mas acerca de las URLs mira en la sección dedicada de Conceptos básicos.
Esta etiqueta también admite muchos parámetros, como charset, coords, href, hreflang, name, rel, rev, shape, target y type. Explicar semejante detalle queda fuera del horizonte de esta guía. Para ello hay otras guías mas especificas en Internet.
En nuestro enlace de ejemplo, el objeto del enlace era un texto. Como sabrás, también se puede enlazar una imagen, esto me vuelve a llevar grácilmente a nuestra próxima parada...(De algo me tenia que servir leer tanto a Shakespeare).
Imágenes
Una imágen vale mas que mil palabras. Bueno, yo nunca he estado demasiado seguro de esto. Una imagen puede tener mucho contenido visual, pero eso no quiere decir que entendamos lo que vemos. En fin, dejare de ponerme metafísico y vayamos al grano, digo, a la imagen.
En la Web, las imágenes son una parte vital de algunas paginas, mientras que en otras son tan solo un estorbo que además desperdicia el preciado y limitado ancho de banda. De usted depende un correcto uso de las imágenes. Puede encontrar mas información en la Guía de dise�o.
La etiqueta que nos va a permitir insertar imágenes en nuestra web es <img>. De nuevo, tenemos que hacer uso de varios parámetros y valores para que nos quede bien la imagen. Como m´nimo tendremos que especificar que imagen poner, es decir, escribir otra vez una URL. Una etiqueta de imágen completita sería: <img src="girl.jpg">
Ahora veamos los parámetros más interesantes, width, height y border. EL primero y el segundo nos permite especificar el ancho y el alto de la imagen, es decir, que independientemente del tama�o original, yo puedo rellenar cualquier área con esa imagen. Cuidado con mantener el ratio o aspecto. El valor va especificado en pixeles absolutos o en un porcentaje. El tercer parámetro es el borde de la imagen, tambián en pixeles. Veamos unos ejemplos:
<img src="girl.jpg" width="200" height="50">
¡Ojo! El parámetro border esta deprecado, esto significa que aunque todavía esta soportado por compatibilidad con páginas más antiguas, su uso esta desaconsejado. En lugar de ello, para establecer marcos a las imágenes la técnica correcta seria usar hojas de estilo (CSS).
Otro parámetro interesante es alt, que nos permite definir un texto que se mostrara en lugar de la imagen, en caso de que esta no pueda cargarse. Y por ultimo el parámetro title con el que podemos crear pesta�itas pop-up de texto a las imágenes. El problema es que si bien la mayoría de los navegadores usan estos parámetros de la forma correcta, el Internet Explorer los confunde, y es difícil saber como se comportara.
Tablas (de queso, de jamon...)
No, las tablas que vamos a ver aquí son las tablas estructuras de información. Las típicas de dos dimensiones con sus filas y sus columnas. Hasta hace unos pocos a�os, la mayoría de las paginas basaban todo su dise�o en tableados más o menos complejos. Esto sigue siendo cierto para un numero de paginas, si bien cada vez menor. La tecnología mas puntera para maquetado de información ahora mismo es CSS, pero para llegar ahi seria mejor empezar desde el principio....
Hab´a una vez una tabla en una página, esta se programó gracias a la etiqueta <table>. Ésta etiqueta es un poco mas compleja que las que hemos visto hasta ahora, pues además de tener parametros, contiene sub-etiquetas. Las dos subetiquetas que puede (y debe) contener son <tr> y <td>. Estas dos solo pueden aparecer dentro de una tabla, es decir, entre la etiqueta <table> y </table>. Fuera de este contexto no tienen ningún sentido y no deben usarse.
Veamos un ejemplo y luego lo comentaremos:
<table border="1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
| a | b | c |
| 1 | 2 | 3 |
Como podemos ver, las filas vienen dadas por la etiqueta <tr> mientras que las columnas son los datos definidos entre <td>. Veamos los para´metros y los valores que pueden tener todo esto.
Uno de los par´metros más importantes de la tabla y de las celdas individuales es la anchura de estas. Esto lo programamos con width que puede aceptar tanto un valor en pixeles como un porcentaje del total de ancho de pantalla disponible. Lo mismo es aplicable para la altura de una celda con height. Ilustremos estos nuevos conceptos con otro ejemplo:
<table border="7" width="100%">
<tr>
<td width="50" height="50">a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td width="75%">3</td>
</tr>
</table>
| a | b | c |
| 1 | 2 | 3 |
¿Que tal quedo eso? Ahora tenemos un control mucho mayor de nuestras tablas, con lo que podemos maquetar información en la pantalla de una forma muy precisa. Veamos ahora otro atributo interesante, el de cambiar el color de fondo de una tabla, con bgcolor (este atributo esta deprecado en HTML 4.01 pero lo expondré aquí con fines educativos, no es una buena idea usarlo para algo muy serio).
<table border="0" width="80%">
<tr>
<td></td>
<td align="center" bgcolor="#551010"><font color="white">Junio</font> </td>
<td align="center" bgcolor="#551010"><font color="white">Septiembre</font> </td>
<td align="center" bgcolor="#551010"><font color="white">Diciembre</font> </td>
</tr>
<tr>
<td bgcolor="#eeeeee">Julio Arcos</td>
<td bgcolor="#eeeeee">3.7</td>
<td bgcolor="#eeeeee">6.0</td>
<td bgcolor="#eeeeee">n/a</td>
</tr>
<tr>
<td bgcolor="#cccccc">Juan Rea</td>
<td bgcolor="#cccccc">1.2</td>
<td bgcolor="#cccccc">n/p</td>
<td bgcolor="#cccccc">4.5</td>
</tr>
<tr>
<td bgcolor="#eeeeee">Ana Escudero</td>
<td bgcolor="#eeeeee">7.8</td>
<td bgcolor="#eeeeee">n/a</td>
<td bgcolor="#eeeeee">n/a</td>
</tr>
</table>
| Junio | Septiembre | Diciembre | |
| Julio Arcos | 3.7 | 6.0 | n/a |
| Juan Rea | 1.2 | n/p | 4.5 |
| Ana Escudero | 7.8 | n/a | n/a |
La tabla de las notas de los alumnos, en sus tres convocatorias, Junio, Septiembre y Diciembre. Esto ya empieza a mostrar un look más profesional :)
Ahora ya puedes hacer tablas mas complicadas. Incluso puedes anidar unas tablas dentro de otras. Otros parámetros interesantes son: cellpadding, cellspacing, frame, rules, summary y align (deprecado). Los dos primeros sirven para unir celdas unas con otras, y crear tablas más acordes con los datos que muestren.
Head: a fondo
La etiqueta head es una de las más importantes. Dentro de ella queda definida toda la información referente a la página misma. Como el nombre del autor, la herramienta con la que se creo, si tiene enlazadas hojas de estilo, el directorio base de enlaces, titulo, etc.
Solo admite un parámetro, y en la practica no se usa mucho, se trata de profile, cuyos valor es una lista de URLs separadas por espacios, en las que se encuentra más etiquetas meta con información acerca de la página misma.
Más interesante que los parámetros, son las etiquetas exclusivas que posee. Las siguientes etiquetas, de vital importancia, solo pueden aparecer entre <head> y </head>.
Son: <title>, <base>, <isindex>, <link>, <meta> y <nextid>. Las mas usadas son <title> y <meta>, estando la segunda compuesta de varias partes.
<meta name="description" content="Guía de dise�o y programación web">
<meta name="keywords content="dise�o web html css javascript guia curso aprender lenguajes programación páginas">
<meta name="Author" content="James">
Body: a fondo
La etiqueta <body> es una de las mas importantes, pues encierra todo el contenido de la página. Solo debe aparecer una vez en la página, normalmente después del </head>. Algunos de los parámetros que admite son:
background, este valor lo igualamos a la URL de una imágen que queramos poner de fondo en la web.
bgcolor, especificamos el color de fondo. Su valor puede ser tanto una cadena numerica ('red', 'blue', 'black') como un código de color en hexadecimal (#40FFAA)
text, define el color base de todo nuestro texto.
link, es el color de los enlaces.
vlink, es el color de los enlaces ya visitados.
alink, es el color de los enlaces activos.