Saltar al contenido

¿Cómo trabajan juntos HTML, CSS, Javascript, PHP y MySQL?

como-trabajan-juntos-php-html-javascript-css-mysql

Si estas empezando a interesarte por el desarrollo web te darás cuenta rápidamente de la cantidad de tecnologías que se emplean en cualquier página actual. De entre las más populares están HTML, CSS, Javascript, PHP y MySQL. ¿Quieres saber de que se encarga cada una y cómo trabajan juntas cuando consultamos una web?

HTML

Es un lenguaje de marcado, sin estructuras lógicas, que nos permite estructurar la información de forma que los navegadores puedan entenderla. Gracias a HTML podemos cual va a ser el título de la página, cual el menú de navegación, etc. Es una estructura en forma de árbol que nos permite definir no solo que es cada elemento si no quien lo contiene.

¿Es HTML un lenguaje de programación?

Una de las preguntas más habituales es la de si HTML es un lenguaje de programación. A pesar de que algunas veces sea referido como tal, no es un lenguaje de programación pues carece de estructuras de control.

CSS

Es un lenguaje de diseño gráfico que nos permite definir la presentación de un determinado documento estructurado. Si con HTML definimos que es cada elemento y donde se sitúa, con CSS vamos a definir como queremos presentarlo. Su principal utilidad es la de separar la presentación de la propia estructura del documento. De esa forma podríamos aplicar los mismos estilos a varios documentos similares o aplicar distintas presentaciones al mismo elemento

¿Es CSS un lenguaje de programación?

Aunque es un error menos común que en el caso de HTML también suele haber confusión en este punto. CSS no es un lenguaje de programación pues carece de ciertas características necesarias como estructuras de control.

Javascript

Javascript es un lenguaje de programación que puede ser incorporado a un documento HTML. Aunque se han desarrollado usos externos a la web, se usa mayoritariamente en este ámbito en el lado del cliente. Es decir se ejecuta dentro del navegador que ha cargado el documento HTML. Esto nos permite dotar de cierto dinamismo a nuestro documento y añade comportamientos más complejos, mejorando la usabilidad para el usuario. Hoy en día es rara la página que no contiene algún elemento javascript pero su uso es totalmente opcional.

PHP

Es un lenguaje de programación del lado del servidor que nos permite generar documentos HTML de forma dinámica. De este modo podemos generar distintos documentos en función de variables pasadas por el usuario, ya sea desde la propia URL o desde un formulario. Aunque existen muchos lenguajes que nos permiten generar documentos HTML, PHP es uno de los más extendidos en Internet.

MySQL

Es el sistema de base de datos relacional más popular del mundo. Su función es la de almacenar datos de forma perdurable en el tiempo y entre sesiones. Al igual que ocurre con PHP, existen multitud de soluciones alternativas para el almacenado de datos pero si estas empezando en el mundo web te aconsejo que empieces con MySQL (o MariaDB que viene a ser lo mismo).

Cómo trabajan juntos HTML, CSS, Javascript, PHP y MySQL

Cada vez que usamos un navegador web y accedemos a una determinada url iniciamos un proceso que como sabemos termina con la carga en el navegador de una determinada información. Supondremos que tenemos una página web como la que estas viendo actualmente y que un visitante accede a un determinado artículo (quizás éste mismo).

En primer lugar, el navegador lanza una petición a nuestro servidor web para que le de un determinado recurso, identificado por la url del artículo.

Ese recurso es en realidad un script PHP que a partir de la url pide un determinado artículo a la base de datos MySQL, que es la encargada de guardar toda esa información.

Una vez tenemos todos los datos, PHP genera un documento HTML donde hemos estructurado toda la información del artículo.

Para que esa información se presente de forma más atractiva hemos enlazado al documento HTML hojas de estilo CSS que le indican al navegador como debe de decorar todos los elementos para que se vean de la forma que lo hacen.

Adicionalmente en el mismo documento HTML hay enlazados componentes Javascript. Estos nos permiten mostrar menús desplegables, enlazar con redes sociales o enviar comentarios.

¿Qué es lo mínimo que necesitas para tener una web?

Existen dos respuestas a esta pregunta: una teórica y una práctica. Teóricamente lo único que necesitamos es un documento HTML (o varios enlazados) subido a un servidor. Los distintos elementos ya tienen un comportamiento y una presentación por defecto que viene dada por el navegador.

Sin embargo, en la práctica necesitamos que la web se vea atractiva por lo que usamos CSS. Para actualizar la información es más práctico almacenarla en una base de datos. Esto nos lleva a generar los documentos dinámicamente usando un lenguaje como PHP. Cuando queremos ofrecer animaciones o comportamientos avanzados en nuestra página debemos agregar un lenguaje del lado del cliente como Javascript. Por lo que en la práctica la estructura más simple y común que te vas a encontrar es la compuesta por PHP, MySQL, Javascript, HTML,y CSS.

16 comentarios en «¿Cómo trabajan juntos HTML, CSS, Javascript, PHP y MySQL?»

  1. Alberto Muy interesante su manera de explicar que es cada elemento y cómo interactúan entre si. Ahora entiendo muy bien Gracias. Buen aporte.

  2. Gracias por explicar en un momento lo que me ha costado cuatro meses (y tres kilos de libros) entender.
    Creo que nos falta un servidor en nuestro PC y también un editor. Deberías mojarte y recomendar uno y uno porque llevo estos cuatro meses eligiendo (con mucho trabajo y sin mucho criterio).
    En resumen, ahora justo que estoy en el principio de todo: estoy agotado.
    Una pregunta: ¿Por qué un fichero .html que funciona perfectamente, ignora totalmente el codigo PHP que le incorporas?… Solución que funciona (cuatro semanas clavado en esto): Cambia descaradamente la extensión de .html a .php, aunque el fichero siga iniciándose así: . Me parece estúpido. ¿Conoces alguna solución mas elegante?.
    Por cierto… Mi WEB creo que es un bodrio que metí ahí igual hace 20 años. La posibilidad de contar algunas cosas interesantes es por lo que me he iniciado en esto.
    Gracias otra vez.

    1. Buenas Eduard,

      Siento haber tardado tanto en contestarte pero hemos estado de vacaciones.

      Para hacer pruebas puedes instalar xampp que incluye un servidor web local, php y mysql (mariadb). Con eso puedes trabajar en local y crear la web que quieras.

      Respecto a tu pregunta, para que el servidor de php intercepte la petición y busque código php en un fichero debe tener extensión php. También se puede configurar el servidor para que incluya en estos ficheros a los html o htm. No lo he probado pero supuestamente añadiendo unas lineas a los ficheros .htaccess (https://www.ntchosting.com/encyclopedia/scripting-and-programming/php/php-in/). También es posible hacer una redirección para que el cliente cuando ponga la url acabada con .html lo lleve a un fichero .php.

      Saludos y muchas gracias por tu comentario.

  3. Hola Alberto, soy nuevo en esto. Quisiera hacerte una pregunta: Es necesario saber HTML antes de pasar a aprender PHP ?
    Gracias por tu respuesta.
    Saludos cordiales

    1. Buenas,

      No es obligatorio pero la mayoría de aplicaciones en PHP acaban mostrando código HTML por lo que quieras o no vas a acabar aprendiendolo. Sin embargo, puedes ir aprendiendolo a la vez pues no es complicado.

      Un saludo

  4. Muy buen día.

    Quiero aprender html, css, php, javascript y mysql, la pregunta es, ¿en qué orden sería la mejor opción?

    De ante mano gracias

    1. Pues tienes un camino muy interesante por delante. Si tu objetivo es aprenderlos todos empezaría por PHP y el resto vas a ir aprendiéndolo sobre la marcha. Una vez tengas los rudimentos de cada uno puedes estudiarlos por separado para mejorarlos pero dado que están muy relacionados creo que es más interesante ir sabiendo un poco de cada uno.

      Si quieres aprenderlos uno a uno, puedes empezar por HTML. Luego a decorarlo mediante CSS. Mas tarde aprendes PHP para generar HTML de forma dinámica y MySQL para tener persistencia de datos. Finalmente con Javascript puedes hacer tus aplicaciones más dinámicas.

      Un saludo y gracias por comentar.

  5. No entendia muy bien este lenguaje de programación, queria crear una app para mi empresa asi que me comunique con Mitsofware, que es otra empresa española que ayuda a personas como yo, que no entienden muy bien de esto, me crearon 3 apps que ahora me funcionan muy bien y van de maravilla.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.