Herramientas para desarrolladores : Cursos, manuales y guías de referencia : Cursos : Introducción al HTML :
Capítulo 1: Fundamentos del HTML
1. ¿Qé es el HTML?
La world wide web tiene una arquitectura cliente / servidor. Un programa cliente que se ejecuta en tu ordenador (el navegador o browser) solicita información de un programa servidor que se ejecuta en una máquina en cualquier otro lugar. El servidor envía la informción solicitada de vuelta a través de la red al programa navegador, el cual la interpreta para mostrarla en la pantalla.
Para que el intercambio de información entre el cliente y el servidor se realice de acuerdo a unos parámetros que ambos puedan entender, se utilizan protocolos de comunicaciones. Internet se fundamenta en el protocolo TCP/IP, sobre el cual se construyen otros protocolos de aplicación. En el caso de la world wide web, el protocolo utilizado es el HTTP (Hipertext Transfer Protocol).
Cuando el navegador recibe la información, la interpreta para mostrarla en la pantalla. Las páginas que se visualizan están formadas, fundamentalmente, por textos e imágenes, con una estructura y un formato específicos. El HTML (Hipertext Markup Language) es lo que nos permite decirle al navegador cómo debe mostrar la información: formato de los textos, colores, orden de los párrafos, etc.
A menudo observamos como una misma página puede visualizarse de manera diferente (colores, ancho de tablas, formato de textos, etc.) en función del navegador que se utilice: el HTML no es una forma de codificar la información, sino de especificar el formato que debe darse a la información. Por ejemplo, podemos transmitir la palabra "¡Hola!" que tenemos guardada en un fichero de texto. Pero, ¿cómo decirle al navegador que la muestre de color rojo y centrada? El HTML es la respuesta.
2. El concepto de etiqueta (tag)
El HTML describe el aspecto visual que debe tener una
página mediante la utilización de etiquetas (tags). Las
etiquetas le indicarán al navegador la posición relativa de los
elementos de la página, su tamaño, las tipografías y
colores a utilizar, etc.
Las etiquetas son como instrucciones que le
indican al navegador como mostrar la información. Existen dos clases de
etiquetas:
- Etiquetas vacías
Tiene el siguiente formato:
<etiqueta>
Se utilizan para introducir saltos de línea, líneas horizontales, y otros elementos no asociados al formato de textos o imágenes.
- Etiquetas contenedoras
Tienen el siguiente formato:
<etiqueta> ... </etiqueta>
Estas etiquetas dan un formato al texto o porción del documento que engloban. Este tipo de etiquetas tiene una marca inicial, y una marca final igual que la inicial, pero con el caracter "/". Todo lo que esté contenido entre ambas marcas quedará sujeto al formato indicado por la etiqueta. Por ejemplo, podemos mostrar la palabra "¡Hola!" en cursiva de la siguiente forma:
<i>¡Hola!</i>
La mayoria de estas etiquetas pueden, a su vez, contener otras etiquetas, de cualquiera de los dos tipos. Por ejemplo, para mostrar la palbra "¡Hola!" en cursiva y negrita:
<i><b>¡Hola!</b></i>
3. El concepto de argumento
Las etiquetas pueden especificar, por ejemplo, que cierta palabra aparezca en negrita. Pero si queremos que cierta palabra aparezca de color rojo, necesitamos suministrar un parámetro: el color. La mayoría de las etiquetas tienen parámetros para indicar múltiples aspectos del formato, como el color, el tamaño, la posición, etc.
El formato de una etiqueta con parámetros es el siguiente:
<etiqueta parametro1="valor1" parametro2="valor2" ... > ... </etiqueta>
Por ejemplo, para mostrar la palabra "¡Hola!" en rojo, utilizamos la etiqueta font con el parametro color igual a red:
<font color="red">¡Hola!</font>
4. Mi primera página
Toda página HTML debe comenzar por la etiqueta <html> y terminar con </html>. Todo lo que figure entre estas etiquetas será interpretado por el navegador como un documento HTML. Lo que quede fuera de ellas será, en la mayoría de los casos, ignorado.
El documento HTML se divide siempre en dos partes: cabecera y cuerpo.
4.1. Cabecera
La cabecera figura entre las etiquetas <head> y </head>. En ella se especifica el título, el autor, y otras características del documento que no se muestran físicamente en la página y que sirven para facilitar su indexación (son lo que se conoce como meta tags). En la cabecera también deben incluirse los scripts que necesite el documento (JavaScript, JScript, etc.) y las definiciones de estilos (si se utilizan hojas de estilos).
4.2. Cuerpo
El cuerpo es la parte del documento que se circunscribe entre las etiquetas <body> y </body>. En esta parte se incluye la página propiamente dicha.
Teniendo esto en cuenta podemos construir ya nuestra primera página HTML con los elementos mínimos necesarios para que sea interpretada correctamente por un navegador:
<html>
<head>
<title>Mi primera pagina HTML</title>
</head>
<body>
Mi primera página HTML
</body>
</html>
Como se observa en el ejemplo, podemos insertar saltos de línea en cualquier parte del documento.
