¿Qué es HTML?




Un científico llamado Tim Berners-Lee inventó HTML allá por 1990. El objetivo era facilitar a científicos de diferentes universidades el acceso a los documentos de investigación de cada uno de ellos. El proyecto obtuvo un éxito mucho mayor del que Tim Berners-Lee nunca hubiese llegado a imaginar. Al inventar HTML, este científico sentó las bases de la web tal y como la conocemos hoy día.

HTML es un lenguaje que hace posible presentar información en Internet. Lo que ves al visualizar una página en Internet es la interpretación que hace el navegador del código HTML.

Para ver el código HTML de una página debe ir dentro del navegador a :

barra de menu > ver > codigo fuente


¿Qué representan las siglas HTML?




HTML es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de marcado hipertextual"

  • HiperText es lo contrario de lineal. HTML crea un lenguaje no lineal cuya característica principal es el hipertexto, es decir su estructura compuesta por nodos relacionados entre sí a través de vínculos.
  • Marcado es lo que haces con el texto. Se marca el texto del mismo modo que en un programa de edición de textos con encabezados, viñetas, negrita, etc.
  • Lenguaje, por que es un lenguaje específico de programación.

Otras siglas similares son XHTML (Extensible HyperText Mark-up Language, es decir, Lenguaje de marcado hipertextual extensible) que, en pocas palabras, es una forma de escribir HTML nueva y mejor estructurada.

El código HTML se combina con otros lenguajes de programación: CSS, PHP, ASP, Javascript,
Nos permite generar la interfaz para que esta pueda ser vista en diferentes navegadores.

Siempre utilizaremos archivos con extensión HTML para realizar un sitio web on-line.


XHTML
XHTML (Extensible HyperText Mark-up Language, es decir, Lenguaje de marcado hipertextual extensible) es, en pocas palabras, una forma de escribir HTML nueva y mejor estructurada.

¿Qué es un sitio web (website)?



Es un conjunto de archivos de diversa índole, los cuales están organizados entre ellos mediante una estructura jerárquica ("red" o "tela de araña").Podemos desplazarnos de una a otro por las conexiones establecidas por los enlaces o vínculos.
El proyecto web estará formado por diversos tipos de archivos: .html, .gif, .jpg, .css, .js, .php, .mpeg, etc.

A lo largo del tiempo el código HTML va evolucionando, y por eso se crean diferentes versiones: HTML 1,HTML 2, 3, 4.... hasta la versión de código actual que es HTML 5.
Nosotros trabajaremos en la versión HTML4.



Breve historia de HTML



El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web Consortium (http://www.w3.org/), más conocido como W3C. Como se trata de un estándar reconocido por todas las empresas relacionadas con el mundo de Internet, una misma página HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema operativo.

El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar información de forma global". Desde su creación, el lenguaje HTML ha pasado de ser un lenguaje utilizado exclusivamente para crear documentos electrónicos a ser un lenguaje que se utiliza en muchas aplicaciones electrónicas como buscadores, tiendas online y banca electrónica.

La historia completa de HTML es tan interesante como larga, por lo que a continuación se muestra su historia resumida a partir de la información que se puede encontrar en la Wikipedia.

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (http://www.cern.ch/) (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos.
Los sistemas de "hipertexto" habían sido desarrollados años antes. En el ámbito de la informática, el "hipertexto" permitía que los usuarios accedieran a la información relacionada con los documentos electrónicos que estaban visualizando. De cierta manera, los primitivos sistemas de "hipertexto" podrían asimilarse a los enlaces de las páginas web actuales.
Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo presentó a una convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet. Después de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora llamada WorldWideWeb (W3).

El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre "HTML Tags" (Etiquetas HTML) y todavía hoy puede ser consultado online a modo de reliquia informática.
La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del organismo IETF (Internet Engineering Task Force).
Aunque se consiguieron avances significativos (en esta época se definieron las etiquetas para imágenes, tablas y formularios) ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar oficial.

En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el 22 de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML.

A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C. La versión HTML 3.2 se publicó el 14 de Enero de 1997 y es la primera recomendación de HTML publicada por el W3C.

Esta revisión incorpora los últimos avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.
HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión corregida de la publicación original del 18 de Diciembre de 1997) y supone un gran salto desde las versiones anteriores.
Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.

La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se denomina HTML 4.01. Se trata de una revisión y actualización de la versión HTML 4.0, por lo que no incluye novedades significativas.

Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se detuvo y el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG (Web Hypertext Application Technology Working Group).

La actividad actual del WHATWG se centra en el futuro estándar HTML 5, cuyo primer borrador oficial se publicó el 22 de enero de 2008. Debido a la fuerza de
las empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML. De forma paralela a su actividad con HTML, W3C ha continuado con la estandarización de XHTML, una versión avanzada de HTML y basada en XML. La primera versión de XHTML se denomina XHTML 1.0 y se publicó el 26 de Enero de 2000 (y posteriormente se revisó el 1 de Agosto de 2002).

XHTML 1.0 es una adaptación de HTML 4.01 al lenguaje XML, por lo que mantiene casi todas sus etiquetas y características, pero añade algunas restricciones y elementos propios de XML. La versión XHTML 1.1 ya ha sido publicada en forma de borrador y pretende modularizar XHTML.

También ha sido publicado el borrador de XHTML 2.0, que supondrá un cambio muy importante respecto de las anteriores versiones de XHTML.


HTML y CSS



Originalmente, las páginas HTML sólo incluían información sobre sus contenidos de texto e imagenes. Con el desarrollo del estándar HTML, las páginas empezaron a incluir también información sobre el aspecto de sus contenidos: tipos de letra, colores y márgenes.

La posterior aparición de tecnologías como JavaScript, provocaron que las páginas HTML
también incluyeran el código de las aplicaciones (llamadas scripts) que se utilizan para crear páginas web dinámicas.

Incluir en una misma página HTML los contenidos, el diseño y la programación complica en exceso su mantenimiento. Normalmente, los contenidos y el diseño de la página web son responsabilidad de diferentes personas, por lo que es conveniente separarlos.

CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el aspecto que deben presentar esos contenidos.

Una ventaja añadida de la separación de los contenidos y su presentación es que los documentos XHTML creados son más flexibles, ya que se adaptan mejor a las diferentes plataformas: pantallas de ordenador, pantallas de dispositivos móviles, impresoras y dispositivos utilizados por personas discapacitadas.

De esta forma, utilizando exclusivamente XHTML se crean páginas web "feas" pero correctas. Aplicando CSS, se pueden crear páginas "bonitas" a partir de las páginas XHTML correctas.


Aspecto del HTML



El HTML es sólo una representación textual del contenido y de su significado general. Por ejemplo, el código para el encabezamiento "Aspecto del HTML" es el siguiente:
<p>This is a paragraph of text.</p>
La parte <h2> es un marcador (que se conoce como "etiqueta") que significa "lo que sigue se debe considerar como un título de segundo nivel". </h2> es una etiqueta que indica dónde acaba el título de segundo nivel (y se conoce como "etiqueta de cierre"). La etiqueta de apertura, la etiqueta de cierre y todo lo que hay entre ellas se conoce como "elemento". Mucha gente utiliza los términos elemento y etiqueta indistintamente, lo cual no es del todo correcto. id="htmllooks" es un atributo; ya hablaremos de los atributos más adelante.

1. La estructura de un documento HTML

El documento HTML válido más pequeño posible sería algo similar a esto:


<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd">
 <html> <head> <title>Pàgina d'exemple</title>
</head>
<body> <h1>Hola a todos</h1>
</body>
</html>


El documento empieza con un elemento de tipo de documento o doctype. Este elemento describe el tipo de HTML que se utiliza para que los agentes de usuario puedan determinar cómo se debe interpretar el documento y saber si sigue las normas que dice que seguirá.
A continuación, se puede ver la etiqueta de apertura del elemento html. Éste es un elemento que incluye a todo el documento.
La etiqueta html de cierre es lo último que hay en cualquier documento HTML.

Dentro del elemento html está el elemento head. Éste es un elemento que contiene información sobre el documento (los metadatos). Este elemento se describe más detalladamente en el apartado siguiente. En la cabecera está el elemento title, que define el título "Página de ejemplo" de la barra del menú.

Después del elemento head está el elemento body, que es el elemento que incluye el contenido real de la página; en este caso sólo hay un elemento de encabezamiento de nivel uno (h1), que contiene el texto "Hola a todos". Y éste es todo nuestro documento.

Como se puede ver, a menudo los elementos contienen otros elementos. El cuerpo del documento incluirá inevitablemente muchos otros elementos. Las divisiones de página crean la estructura general del documento y contendrán subdivisiones. Éstas contendrán títulos, párrafos, listas, etc. Los párrafos pueden contener elementos que creen enlaces hacia otros documentos, citas, énfasis, etc.

2. Body y Head

Es importante conocer las tres etiquetas principales de un documento HTML (<html>, <head>, <body>):

  • <html>
indica el comienzo y el final de un documento HTML. Ninguna etiqueta o contenido puede colocarse antes o después de la etiqueta <html> (con una sola excepción que se verá más adelante). En el interior de la etiqueta <html> se definen la cabecera y el cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta <html> se ignora.
  • <head>
    delimita la parte de la cabecera del documento. La cabecera contiene información sobre el propio documento HTML, como por ejemplo su título y el idioma de la página. Los contenidos indicados en la cabecera no son visibles para el usuario, con la excepción de la etiqueta <title>, que se utiliza para indicar el título del documento y que los navegadores lo visualizan en la parte superior izquierda de la ventana del navegador (si no te has fijado anteriormente, vuelve a abrir el primer ejemplo en cualquier navegador y observa dónde se muestra el título de la página).
  • <body>
delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se muestran al usuario (párrafos de texto, imágenes, tablas). En general, el <body> de un documento contiene cientos de etiquetas HTML, mientras que el <head> no contiene más que unas pocas.

Esquema de las etiquetas principales que contiene un documento HTML
Esquema de las etiquetas principales que contiene un documento HTML




Las rutas o paths



Una ruta (en inglés path ) es la forma de referenciar un archivo informático o directorio en un sistema de archivos de un sistema operativo determinado.

Una ruta señala la localización exacta de un archivo o directorio mediante una cadena de caracteres concreta. Ésta puede ser de diversas formas dependiendo del sistema operativo y del sistema de archivos en cuestión.

En líneas generales se compondrá de los nombres de los directorios que conforman el camino hasta nuestro archivo o directorio a lo largo del árbol de directorios , y finalmente estará el nombre del archivo o directorio que se quiere referenciar.

Ejemplos:

Rutas a archivos

D:\command.com /home/miusuario/documento.doc

Rutas a directorios:

C:\windows\home/cualquier-usuario/



Rutas relativas y rutas absolutas
En la mayoría de los sistemas operativos y sistemas de archivos una ruta se puede expresar en forma relativa o en forma absoluta:

Las rutas absolutas señalan la ubicación de un archivo o directorio desde el directorio raíz del sistema de archivos. Por ejemplo es una ruta absoluta /home/dir1/arc1.fil que señala la ubicación de arc1.fil desde la raíz del sistema de archivos.


Ejemplo:

C:/Sites/palomab/images/imagen.jpg

http://www.miweb.com/images/imagen.jpg


Las rutas relativas señalan la ubicación de un archivo o directorio a partir de la posición actual del sistema operativo en el sistema de archivos.

Ejemplo:

Si estoy en la carpeta palomab o un archivo ubicado en dicha carpeta, la ruta al archivo imagen será la siguiente:

images/imagen.jpg

En caso de que en la ruta relativa haya que subir un nivel en la estructura de directorios, se escribe así:

../imagenes/imagen.jpg






Recomendaciones a la hora de comenzar un proyecto web



1. Organizar los archivos de forma lógica y ordenada, en carpetas y subcarpetas.

2. Nomenclatura de archivos:

3. Nombrar los archivos de forma identificativa y clara

4. Sistematizar el nombre de los archivos:

index.html > es el nombre de la página inicial

los nombres de los archivos no pueden contener:

  • espacios
  • caracteres especiales : ñ,ç
  • acentos
  • mayusculas

Ejemplo:
no es correcto: sección 1.html, mi imagen.jpg
es correcto: seccion_1.html, mi_imagen.jpg