HTML es uno de los componentes básicos de la web, ya que encapsula el contenido de los sitios web que visita. Sin embargo, a pesar de su enorme influencia, muy pocas personas saben realmente cómo funciona.
Entonces, para mejorar la alfabetización tecnológica del mundo, nos hemos asociado con el desarrollador, diseñador y profesor Eric Tirado y hemos creado un curso gratuito sobre HTML5.
A lo largo del curso, Eric lo llevará desde principiante hasta experto en HTML y le mostrará cómo crear un sitio web. Y la mejor parte es: ¡te llevará menos de una hora completar el curso!
Ahora echemos un vistazo a cómo está construido.
Contenido del curso
El curso contiene 14 screencasts interactivos. Cada elenco maneja un concepto central de HTML, y la mayoría dura entre tres y seis minutos. En algunos de ellos, se le animará a saltar al código y experimentar por sí mismo, ya que eso es posible con la plataforma Scrimba.
Lección n. ° 1: Introducción a la web
Comienza enseñándole un poco sobre la web en general, observando los clientes, los servidores y los tres idiomas que hablan los navegadores: HTML, CSS y JavaScript.
Esto le brinda una buena base para las próximas lecciones, ya que comprenderá mejor el papel general de HTML en la World Wide Web.
Lección # 2: Crear un documento HTML
El siguiente paso es crear su primer documento HTML. Esta lección explicará cómo funcionan los archivos HTML y también le dará una introducción rápida a la barra de URL en el navegador.
Lección # 3: Elementos de anidamiento
El anidamiento es un concepto fundamental en HTML, por lo que se tratará en la tercera lección. Anidar básicamente significa que puede anidar etiquetas una dentro de la otra. Para anidar un elemento HTML, simplemente agréguelo entre las etiquetas de apertura y cierre de otro elemento HTML.
Lección # 4: Elementos principales y guiones
Learning HTML h1 { text-align: center; } document.getElementById("h1").innerHTML = "Hello Universe!"; El elemento head es la primera etiqueta HTML después de la propia etiqueta. Es un contenedor de metadatos y, a menudo, define el título **, ** juego de caracteres, estilos, enlaces, scripts y otra metainformación.
Entonces, en esta lección, aprenderá cómo completar la metaetiqueta con un montón de diferentes tipos de contenido, como puede ver en el fragmento de arriba.
Lección # 5: Elementos de diseño
HTML5 introdujo una serie de elementos de diseño que hacen que HTML sea más semántico. Estas nuevas etiquetas ahora refuerzan el significado de los elementos de diseño más utilizados, como y , mientras que en el pasado solo teníamos un elemento sin sentido como usar. En este screencast, aprenderá los más útiles e importantes.
Lección # 6: Elementos de figura e imagen
Las imágenes son una parte fundamental de casi todos los sitios web. En esta conferencia, aprenderá cómo agregar imágenes al sitio y también cómo agregarles subtítulos.
Lección # 7: Insertar videos
Es posible que haya notado que los videos de YouTube están en toda la web, ¿verdad? No solo en youtube.com. Eso es posible gracias a una de las funciones HTML para incrustar medios en una página desde cualquier otro lugar de la web. En esta lección, cubrimos los métodos para incrustar videos de sitios como YouTube y también directamente desde un archivo de video.
Lección # 8: Barra de navegación y elementos de lista
En esta lección, aprenderá a construir la barra de navegación usando una lista desordenada y elementos de lista. Esto implica una barra de navegación horizontal y vertical, para usar en el encabezado y en la barra lateral de nuestro sitio.
Lección # 9: Encabezados
Los encabezados se crean usando la etiqueta, donde el signo * se debe reemplazar con números del 1 al 6. La importancia del encabezado disminuye a medida que aumenta el número, es decir
es el que normalmente usaría para el título o texto más importante de su página.
Lección # 10: Formato de texto y párrafo (parte 1)
También es importante conocer el formato del texto para crear sitios web y, en esta lección, aprenderá los conceptos básicos. Probablemente reconocerá muchos de los conceptos aquí de procesadores de texto como Word y Pages.
Lección # 11: Formato de texto (parte 2)
En esta lección, aprenderá más sobre el formato, pero con etiquetas que afectan a grandes bloques de texto. Ejemplos de esto son los element and the element.
Lesson #12: Tables (part 1)
Original text
Tables can be a bit complicated, but this lecture tries to explain it as simply as possible. Secondly, two lectures will be dedicated to this subject so that you’ll properly understand it.
Lesson #13: Tables (part 2)
In this lesson, you’ll learn more advanced elements in tables, like
You’ll also be exposed to the
Lesson #14: Page linking and final touches
In the final screencast, we’ll wrap it all up and finish the website. We’ll add a link from the navigation to various sections on the page, and also introduce another page so that you understand how links between pages work.
By this point, you should have a solid understanding of HTML, and the most important tags of the language.
Note: Eric will also be launching a follow-up course in April, which will tackle CSS for beginners. Leave your email here if you want early access.
The Scrimba format
Finally, let’s also have a look at the technology behind the course, as it’s pretty slick. The course is built using Scrimba, an interactive coding screencast tool. Scrimba looks like normal videos, but they’re fully interactive. You can edit the code inside the casts!
Here’s a gif which explains the concept:
Pause the screencast → Edit the code → Run it! → See your changes
This is great for when you feel you need to experiment with the code in order to properly understand it, or when you simply want to copy a piece of the code.
So what are you waiting for? Head over to the course page and get started today!
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.
