<Código-Web>
Elementos HTML
y Reglas CSS

  1. TEXTOS
  2. ENLACES
  3. LISTAS
  4. IMÁGENES
  5. TABLAS
  6. FORMULARIOS
  7. MAQUETACIÓN

Lenguaje HTML(1-4), XHTML, HTML 5

 

¿Cómo se hacen las páginas Web?

Hace una década, para crear páginas Web solamente era necesario conocer el lenguaje HTML (HyperText Markup Language). Como su nombre indica, es un lenguaje que "marca" el contenido de una página Web para que el navegador la interprete y la página aparezca tal y como la vemos.

La W3C (organismo que tiene como fin establecer normas para el desarrollo y uso de tecnologías Web) nos dice que el lenguaje HTML se compone de elementos (aproximadamente 100) formados por una etiqueta de apertura, un contenido y una etiqueta de cierre; además, en la etiqueta de apertura puedemos incluir atributos con determinados valores y las etiquetas deben encerrarse entre los signos de menor "<" y mayor ">".

Es decir, el lenguaje HTML es un lenguaje de "marcas" y todo lo que aparece en una página web lo debemos marcar antes, de manera que el contenido de la página más las marcas forman el archivo HTML.

*

Los elementos pueden tener o no una o varias parejas "atributo-valor" y algunos elementos se consideran vacios y no tienen contenido ni etiqueta de cierre.

Toda página Web se incluye dentro del elemento "html", es decir comienza con la etiqueta <html> y termina por </html>. Estos archivos se guardan normalmente con extensión .html, podemos crearlos incluso con el bloc de notas y es norma que el primer archivo de nuestro sitio web se llame index.html o default.html para que no tengamos que acordarnos de la página de inicio cuando le indicamos a alguien la dirección de una página web (URL).

Además, toda página Web tiene dos partes: la cabecera o elemento "head" y el cuerpo o elemento "body", de manera que el esqueleto, por así llamarlo, de una página Web es:

<html>
    <head>
      ...
    </head>
    <body>
      ...
    </body>
</html>


Antes solo se utilizaba código html para realizar páginas Web, el diseño de los elementos se realizaba directamente en el archivo html. Como un Sitio Web (Website) normalmente se compone de cientos de páginas Web, cambiar el aspecto, aunque sólo fuera el fondo, suponía un trabajo tan grande que no se lo deseo a nadie.

Por suerte, con el tiempo el lenguaje HTML dio paso a XHTML (Extensible Hypertext Markup Language, que podemos decir que es como una actualización de HTML) y posteriormente a HTML5 que, claramente será un nuevo estandar, y el diseño se separó del código html para escribirse sólamente en las llamadas Hojas de Estilo en Cascada (CSS).

 

CSS: Hojas de Estilo en Cascada

La W3C decidió que HTML y XHTML no deberían contener directamente información de cómo debe verse un elemento sino que esa información debe estar especificada en una hoja de estilos. Las hojas de estilos css utilizan un lenguaje para controlar la presentación del código html de forma que, actualmente, una página Web se hace así:

Página Web = código (XHTML o HTML o HTML 5) + hoja de estilos CSS.

*

Además, lo más normal y conveniente es que la hoja de estilos css sea un archivo independiente que enlazaremos con nuestro archivo html mediante la línea <link> que te indico en la cabecera de la página.

Un archivo de hojas de estilo se compone de una o más "reglas" con esta sintaxis:

*

Básicamente, en CSS existen 3 tipos de selectores:

  1. Los selectores por TIPO (que se corresponden con elementos del lenguaje HTML)
  2. los selectores por CLASE (que se corresponden con el atributo CLASS de ciertos elementos HTML) y que en la hoja CSS comienzan por un punto (.)
  3. los selectores por IDENTIFICADOR (que se corresponden con el atributo ID de algunos elementos HTML y que son únicos en el archivo HTML) y que en la hoja CSS comienzan por el signo de almohadilla (#)

 

Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.

 

Páginas Web Estáticas

Se puede realizar una página Web escribiendo directamente en HTML y CSS, de hecho, este resumen lo he hecho así. Si creas un website de este modo te encontrarás con que cada página es un archivo con extensión .html.

Si quiero crear un nuevo artículo, como este que lees a hora, debo utilizar, como "plantilla", un archivo html que he creado previamente y así ahorrame tiempo y esfuerzo.

Existen estupendos programas que hacen que esta tarea de programar en HTML sea muy sencilla, y sin duda, el más utilizado desde hace tiempo es Adobe Dreamweaver.

Las páginas que se realizan así: creando directamente contenido en .html y utilizando CSS para su diseño se denominan páginas Web estáticas.

Son páginas sencillas que tienen dos característica principales: el contenido no varía casi nada y el sitio web no es demasiado grande.

 

Páginas Web Dinámicas

Para un Website que contenga cientos de páginas se necesita "algo" para administrar tanto contenido. Imagina por un momento que tu Sitio contiene 100 páginas... esto supone que tienes 100 archivos .html (sin contar con los archivos de imágenes, videos, CSS y javaScript que necesites utilizar), vamos, por esperiencia te digo que esto no se monta en una tarde.

Si a esto añadimos que modificar, por ejemplo, el contenido del pie de página, supone editar y modificar todas esas páginas, llegamos a la conclusión de que trabajar así es de "locos".

Para solucionar esto se han creado los Sistemas de Gestión de Contenidos o CMS (Content Management System) que facilitan enormemente el trabajo de crear Website medianos o grandes. Seguro que conoces WordPress, uno de los CMS más utilizados hoy día para crear los habituales Blogs.

Utilizando un CMS, la modificación del pie de página, cambiar el menú principal o añadir el enlace de twitter en todo el sitio se hace en pocos segundos.

Un CMS trabaja, normalmente, con un servidor de páginas (Apache), una base de datos (MySQL) y un lenguaje de programación (PHP). Y la gran ventaja es que utilizando un CMS no es necesario tener grandes conocimientos de todo esto y sin embargo, se pueden crear Website realmente complejos.

Resumiendo

Puedes crear un Sitio Web directamente en html y css. Puedes programar un Sitio Web en PHP empleando MySQL como base de datos y Apache como servidor Web o puedes utilizar un Sistema de Gestión de Contenidos. Existen muchos CMS pero, en la actualidad, los más utilizados son: WordPress, Joomla! y Drupal.

La elección dependerá básicamente de tus conocimientos y del tiempo de que dispongas.

 

 


- (cc) 2012, 3con14 -