Introducción al HTML,CSS y JS

¿Qué es HTML, quién lo creó y para qué sirve? Ejemplos de uso con HTML, CSS y JAVASCRIPT. Guía básica para principiantes y estudiantes.

Introducción al HTML,CSS y JS

¿Qué es HTML, quién lo creó y para qué sirve?

HTML fue desarrollado por Tim Berners-Lee en el año 1990 (el padre de la World Wide Web), HTML quiere decir Hypertext Markup Language.

Se utiliza para crear páginas que se muestran en internet. Cada página tiene una serie de conexiones a otras páginas (internas o externas) llamadas hipervínculos o enlaces.

El código de programación HTML garantiza una correcta visualización de texto e imágenes en el navegador del usuario.

Es el encargado de proporcionar una estructura básica en la página, sobre la cual se superponen hojas de estilo en cascada para cambiar su apariencia (CSS).

El HTML viene a ser la estructura de una página web y el CSS se encarga de darle un formato y un estilo deseado a la página web.

Ejemplos y uso de HTML

Como no hay nada mejor para aprender que ponerse a practicar, vamos a ver unos ejemplos muy básicos escritos en HTML.

Un ejemplo muy básico de HTML sería:

<html>
    <head>
        <title>Mi nueva página web en Benidorm</title>
    </head>
    <body>
        ¡Hola La Nucía, somos vecinos!
    </body>
</html>

Esto produciría una página web muy simple, con un texto en ella (ver resultado).

Si quisiéramos adornarlo un poquito más, deberíamos hacer uso hojas de estilo CSS, o algún framework más avanzado.

Aplicando estilos CSS

En este caso, vamos a aplicar un estilo CSS en la clase .texto-rojo:

<html>
    <head>
        <title>Mi nueva página web en Benidorm</title>
        <style>
            .texto-rojo{
                color: #FF0000;
            }
        </style>
    </head>
    <body>
        <span class="texto-rojo">¡Hola La Nucía, somos vecinos!</span>
    </body>
</html>

De esta forma el resultado sería un texto de color rojo (ver resultado).

Aquí tienes la documentación de HTML. Ideal y esencial para aquellos que quieran iniciarse en la programación web.
Y también te dejamos la documentación de CSS.

Mismo ejemplo, pero usando JAVASCRIPT

Un elemento también básico para los que nos dedicamos a esto, sería el JavaScript (JS). Gracias al JAVASCRIPT podemos hacer que una página web sea «interactiva», o proporcione elementos que el HTML y CSS no pueden hacer porque no tienen la capacidad para ello.

Por ejemplo que se muestre una alerta en el navegador a los 3 segundos de que se cargue la página:

<html>
    <head>
        <title>Mi nueva página web en Benidorm</title>
        <style>
            .texto-rojo{
                color: #FF0000;
            }
        </style>
    </head>
    <body>
        <span class="texto-rojo">¡Hola La Nucía, somos vecinos!</span>
    </body>
    <script>
        document.onload = setTimeout(function () { alert('Aprende HTML,CSS y JAVASCRIPT con BUSILEVEL'); }, 3000);
    </script>
</html>

Ver resultado

En los últimos años JavaScript se ha modernizado, han nacido nuevos frameworks que nos permiten realizar aplicaciones web con una experiencia de usuario fantástica. Véase VUE, o AlpineJS.

En futuros posts, explicaremos que es un framework y cuales son los más usados últimamente.

Ver documentación sobre JavaScript.

¿Te animas a diseñar una página web?

Si tienes pensando crear una página web para ti, o dedicarte a esto profesionalmente, deberías conocer HTML, CSS y JAVASCRIPT. Además, es una forma muy fácil, bonita y recomendable de empezar en la programación.

Ahora que ya sabes los 3 elementos básicos que componen una página web, ¿te animas a crear algo y compartirlo con nosotros?

En próximos posts nos adentraremos un poco más en el código HTML para que tengas un poquito más de conocimiento y explicaremos las diferencias entre página web estática y dinámica.

Si necesitas ayuda para diseñar un logo, hace poco redactamos unas entradas que te vendrá bien leer, por ejemplo Como crear un logo para mi empresa o Consejos para crear un buen logotipo.

Si no tienes tiempo para aprender todo esto y necesitas que alguien diseñe tu página web ¡Estaremos encantados de ofrecerte nuestros servicios de diseño, desarrollo y mantenimiento web!

Febrero 12, 2022