Curso gratis en español para aprender HTML5 y CSS3 desde cero

¿Qué es HTML5 y CSS3?

HTML y CSS son dos lenguajes informáticos claves para desarrollar un sitio web. Si no lo sabías, no te preocupes. Una vez hayas terminado de leer este artículo, entenderás muchas de las cosas que pasan en el desarrollo front-end de todo sitio web.

Así que te adelantamos que HTML siempre representará contenido y CSS siempre representará la apariencia de ese contenido.

¿Qué significa el lenguaje HTML?

Entonces, el HTML es un lenguaje que permite definir la estructura del contenido de una página web a través del uso de elementos envueltos en etiquetas compatibles universalmente. Esto permite que cualquier persona en el mundo con acceso a internet pueda visualizarlo.

Se le denomina como lenguaje ya que tiene palabras en código y sintaxis como cualquier otro lenguaje. Los buscadores como Mozilla Firefox, Google Chrome, Safari o Microsoft Edge procesan toda la información en código HTML y nos la muestra con las estructuras con la que fue creada. Pero para darle más “vida” a los elementos de HTML aparecieron los estilos del lenguaje CSS.

¿Qué significa CSS?

En términos simples, el lenguaje CSS es el que describe cómo nuestros elementos en HTML serán mostrados en una pantalla de computadora, celular u otro dispositivo multimedia. Las hojas de estilos CSS son de gran ayuda y ahorran mucho trabajo al momento de programar un sitio web, ya que pueden controlar el aspecto de múltiples páginas dentro del sitio a la vez con una sola hoja de estilos o documento de CSS.

Entonces, a través del CSS tendrás la capacidad de determinar el diseño, color, fuente, entre otras características de tus elementos.

¿Qué son las etiquetas HTML?

Las etiquetas dentro del lenguaje de programación HTML son fragmentos de código que nos facilitan la creación de elementos HTML para crear una página web. Estos luego son procesados por los navegadores como ya te hemos explicado.

La sintaxis o formato en el que se escriben estas etiquetas es a través del uso de corchetes angulares < >.

La gran mayoría de elementos HTML tienen una etiqueta de inicio o apertura, por ejemplo <button>, y luego se finaliza con una etiqueta de cierre que lleva una diagonal al inicio, por ejemplo </button>.

Estos elementos HTML tienen también dos propiedades básicas. Unos son los atributos, que se encuentran en la etiqueta de apertura y sirven para asignarle información relevante para tu sitio como un identificador, y luego se ingresa el contenido, que comprende el texto que se mostrará a los usuarios, y se ingresa dentro de las dos etiquetas (la de apertura y la de cierre).

¿Cuál es la estructura y sintaxis de CSS?

Selector: se utiliza para llamar al elemento HTML al cual queremos modificar. Este es el primer parámetro que necesitamos para asignar estilos a nuestro contenido.
Propiedad: especifica qué característica queremos alterar de nuestro elemento HTML como el color, tipo de letra, opacidad, entre otros.
Valor de propiedad: define cómo o en qué cantidad vamos a aplicar el cambio de la propiedad.
Declaración: especifica cuál de las propiedades del elemento queremos darle un estilo.

Diferencias entre HTML y CSS

HTML y CSS son los principales lenguajes de programación web, como ya te hemos enseñado, y uso principal es crear páginas y aplicaciones web.

La diferencia crucial entre los dos es que el HTML se utiliza para la creación de las páginas web y el CSS se utiliza para controlar el estilo y el diseño de las páginas web.

En HTML, primero se escriben palabras y luego se añaden elementos o etiquetas, que luego aparecen en la página. De este modo, el navegador conoce el título de la página, el comienzo y el final del párrafo, etc.

En CSS, las reglas se usan utilizando las propiedades CSS, las cuales se clasifican generalmente en dos categorías principales.

Ventajas y Desventajas del Lenguaje HTML

Ventajas:

Fácil de usar.
Sintaxis suelta (aunque ser demasiado flexible no cumplirá con los estándares).
Bastante fácil de escribir.
Permite el uso de plantillas, lo que facilita el diseño de una página web.
Fácil de aprender y codificar incluso para programadores novatos.
Compatible con casi todos los navegadores, si no con todos los navegadores.
Ampliamente utilizado; establecido en casi todos los sitios web, si no en todos los sitios web.
Muy similar a la sintaxis XML, que se utiliza cada vez más para el almacenamiento de datos.
Gratis: no necesitas comprar ningún software.

Desventajas:

No puede producir una salida dinámica por sí solo.
A veces, la estructuración de documentos HTML es difícil de comprender.
Los errores pueden resultar costosos.
El tiempo que lleva para crear algunos elementos como: listas y tablas.
Debe mantenerse al día con las etiquetas obsoletas y asegurarse de no utilizarlas. Las etiquetas obsoletas aparecen porque otro lenguaje que funciona con HTML ha reemplazado el trabajo original de la etiqueta; por lo tanto, es necesario aprender el otro idioma (la mayoría de las veces, es CSS)
Las funciones de seguridad que ofrece HTML son limitadas.

Ventajas y Desventajas del Lenguaje CSS

Ventajas

Unificar todo lo referente al diseño visual en un solo documento
Se pueden hacer modificaciones en un solo lugar sin tener que recurrir a los archivos HTL por separado
Es menor la probabilidad de que exista duplicación de estilos en diferentes lugares, debido a esto es más fácil de organizar y hacer cambios. A esto debemos añadir que la información a transmitir es considerablemente menor y por tanto las páginas también se descargan más rápido
La creación de versiones para otros dispositivos: tablets o smartphones es muy simple.

Desventajas

Compatibilidad con algunos buscadores.

Lo que qprenderas en este curso

Aprenderás a maquetar sitios web con HTML5 y CSS3Aprenderás a escribir etiquetas HTML5, cómo se clasifican y cuáles son sus funciones.

Conocerás las etiquetas más importantes de HTML5, desde la cabecera hasta el cuerpo del sitio web.

Conocerás la clasificación de las propiedades CSS para dar la mejor apariencia a cada una de esas etiquetas que creamos en HTML5.

Aprenderás las buenas prácticas del diseño web responsivo y a construir tu propio sistema de filas y columnas utilizando sólo HTML5 y CSS3 sin ayuda de ningún framework.