¿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 páginas web y su funcionamiento. Que es uno de los conceptos básicos que además debes conocer para crear una web.
En esta entrada empezaré por contarte en qué consiste realmente una página web, o más bien, un sitio web (ahora te cuento la diferencia). 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 tienes 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.
Contenidos
Cómo funciona una página web
Creo que para saber cómo funciona una página web, es interesante empezar por el principio y saber qué es.
En este vídeo te hago un resumen:
¿Qué es una página web? o Webpage
Una página web consiste en 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 opción 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.
Sitio web: El término adecuado
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 (y por SEO para serte sincera). Si te empiezo a hablar de sitios web igual te lío un poco y no coincidiría con lo que la gente busca.
¿Para qué puedes utilizar una web?
Puede ser informar, mostrar o promocionar un producto o servicio, buscar en otras web, ofrecer algún tipo de herramienta online… Las posibilidades son ilimitadas realmente.
Por ejemplo: Tiendas online, blogs, currículums, páginas personales, directorios e incluso aplicaciones.
Las finalidades comerciales para un negocio pueden ser muchas, puedes ver aquí algunos tipos de sitios web para un negocio.
¿Qué es el 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.
Tipos de código que forman una página web
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.
(1) 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.
(2) 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.
(3) 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.).
(4) 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 abajo en los comentarios.
Cómo utilizar una página web: Conceptos básicos
Si tu intención es crear una web, te recomiendo empezar por esta entrada: Cómo crear una página web.
Y en caso de que ya tengas una web en WordPress, pero no sepas cómo usarla, te recomiendo echar un vistazo a mi curso de uso de WordPress.
Más Conceptos básicos que pueden interesarte también…
- Empieza a planificar la creación de tu web con la Checklist gratuita: 10 imprescindibles para empezar a crear tu web de servicios.
- Echa un ojo a estas 5 plataformas para crear una web gratis.
- Puedes leer también sobre qué es el hosting o alojamiento web.
- Conoce qué es el SEO y aprende a posicionar en Google.
- Cómo elegir servidor web.
- Más conceptos básicos sobre el mundo online.
Soy Taisa
Informática especializada en diseño web, bloguera, emprendedora, madre de dos niños… y me encanta la tecnología.
Desde hace varios años me dedico a impulsar a emprendedoras y blogueras que desean aumentar la visibilidad y los ingresos de sus negocios.
Por medio del diseño web, consultoría técnica y formación, optimizaremos juntas tu web y le sacaremos todo el partido, para que tu negocio suba de nivel y se convierta en un proyecto rentable y escalable.
