¿Te pierdes con toda la terminología que se usa hoy en día para las páginas web o blogs? ¿Te gustaría tener más claro cómo funciona una página web? Voy a intentar aclararte algunos conceptos básicos de las páginas web y su funcionamiento.

En esta entrada empezaré por contarte en qué consiste realmente una página, o más bien, un sitio web. También intentaré darte una idea de cómo funciona realmente una página web.

Espero que os aclare algunas ideas. Y si tenéis dudas, sólo tenéis que preguntar.

Y una vez aclarado qué es y cómo funciona, en la próxima entrada abordaré el “dónde está” la página web.

 

Conceptos básicos sobre páginas web

Qué es una página web – Webpage

Creo que es interesante empezar por el principio.

Una página web es una serie de códigos que los navegadores pueden leer. En base a la información que incluye este código, podrán mostrar la página de forma adecuada.

El código le va diciendo al navegador qué partes son texto, qué partes son referencias, qué partes son imágenes.También dónde se debe mostrar cada cosa, los colores, etc. Con esta información, el navegador luego monta lo que vemos realmente cuando entramos en una página web.

Si tienes curiosidad, puedes pulsar botón derecho en tu navegador y usar la opcion de “Inspeccionar” o “Ver código” (según el navegador). Con esto podrás ver y hacerte una idea de cómo son realmente las “tripas” de una página web.

Cómo ver el código de una página

 

Sitio web / : El término adecuado pero en desuso

Realmente, lo que normalmente llamamos en castellano “Página web” debería llamarse un sitio web (del inglés Website).

Una página sería en realidad sólo una parte de tu sitio. Igual que un libro tiene distintas páginas, un sitio web también. Pero yo también suelo utilizar el concepto página, porque es como se le suele decir más a menudo. Si te empiezo a hablar de sitios web igual te lío un poco.

 

Código de la página web

Las páginas web se componen de una serie de código, como ya te comentaba antes.

El código incluye tanto los contenidos, como la información necesaria para que el navegador sepa cómo deben verse (de qué color, en qué orden, en qué ubicación…).

Puedes observar la imagen que puse más arriba, y verás que hay códigos muy distintos.

Este código puede ser de varios tipos. En una web de las que se usan hoy día, como una página de wordpress hay al menos 3-4 tipos: HTML, PHP, CSS y en algunos casos, también Javascript.

Para que te hagas una idea, sería algo así:

 

Ahora te cuento un poco más en detalle para que te hagas una idea de qué es cada cosa.

 

  • HTML – Código que llega al navegador

Este código es el que llegará finalmente al navegador. Realmente, se puede hacer una página sólo a base de HTML y así se hacían inicialmente.

El código HTML es el que establece la estructura de la información. Qué apartados hay, qué orden, cómo se organizan, los títulos…

Si manejas una página web o Blog seguro los has visto, en la pestaña de HTML o código.

Con una etiqueta que “abre” la sección tipo <algo> y la que lleva la barrita delante que la cierra < /algo>. El algo indica a qué corresponde lo que haya entre esas dos etiquetas.

 

  • Ejemplos de código HTML de uso común

Para que te hagas una idea…

Por ejemplo para los títulos se usan h1, h2, que viene del inglés heading.

<h1> Primer titulo </h1>

O un enlace por ejemplo en código se ve así. Como ves, dentro de las etiquetas de sección se pueden meter “cosas” adicionales.

<a href=”direccion_enlace”> texto que se verá </a>

Seguro que has oído también hablar del “alt” de las imágenes. Esto es el “texto alternativo” que se muestra si no se puede cargar la imagen (si no se encuentra, si está estropeado el fichero, o por ejemplo, cuando la persona decide no cargar imágenes con alguna opción del navegador o en los gestores de correo).

En este caso además, verás que no hay etiqueta de cierre, porque la imagen ya es un elemento por sí misma. Por ello tiene la barrita al final, aunque a veces también puede no llevarla.

<img src=”ruta de la imagen” alt=”Texto que se ve cuando no sale la imagen”/>

Pues así con todo lo que ves. Los títulos, párrafos, la negrita, la cursiva y un montón de cosas, tienen estas etiquetas. Más luego toda una serie de etiquetas adicionales para añadir información adicional o para estructurar los bloques.

 

  • PHP – Código que se ejecuta en el servidor

También hay código adicional (php) que se ejecuta en el servidor antes de que la página se envíe al navegador.

Este código se encuentra junto al html y hará que se cargue una u otra información dentro de ese html, o según ciertas condiciones que se cargue una u otra variante del html.

 

  • Javascript – Funcionalidades adicionales

Adicionalmente, algunas páginas pueden incluir funciones adicionales como Scripts. Estos añadirán funcionalidad adicional, que puede estar contenida dentro del mismo código HTML anterior, o hacer una referencia a un fichero con extensión “.js” donde están estas funciones.

En las páginas de Worpdress se incluyen scripts también en el fichero de “functions.php”.

Por ejemplo, muchos de los menús “chulos” incluyen scripts. (Para que se abran al hacer click, para que se queden fijos arriba cuando haces scroll por la página, etc.).

 

  • CSS – El código de estilos

Esto es algo relativamente reciente. Inicialmente, estos estilos iban mezclados dentro del código html.

Luego, que lo que hizo fue “separar” el diseño de la página (colores, fuentes, estilos, ubicación de los bloques, elementos, imágenes, etc.) de lo que es el código de estructura.

De esta forma, se puede crear un fichero adicional que sólo tenga “el estilo” o diseño de la página.

 

¿Tienes ya más claro como funciona una página web?

¡Esto es todo por hoy! Espero os haya resultado interesante.

¿No te ha quedado claro del todo?

Si tienes alguna duda, la puedes dejar en los comentarios.

En próximas entradas, abordaré el “dónde está” realmente una página web, o la diferencia entre WordPress.com y WordPress.org.