Aprenda HTML en 5 minutos

Un tutorial rápido que le ayudará a empezar a crear sitios web.

HTML es el lenguaje de marcado que se usa para estructurar y presentar contenido en la World Wide Web. Junto con CSS y JavaScript, nos permite tener sitios web atractivos e interactivos.

Dado que HTML es la base de la web, también es el lenguaje más esencial para cualquier carrera de desarrollo web. En este tutorial de ritmo rápido, te enseñaré los conceptos básicos.

Y cuando haya terminado, ya he lanzado un curso gratuito de 14 partes sobre HTML5 en Scrimba.com , una plataforma interactiva en la que puede saltar al código de un screencast en reproducción en cualquier momento.

Puedes ver la primera conferencia aquí:

Muy bien, antes de pasar al HTML, quiero comenzar contándoles un poco sobre la arquitectura de la web. Esto nos pondrá en perspectiva el papel del HTML.

Arquitectura web básica

Una vez que haya desarrollado un sitio web, deberá alojarlo en un servidor para que sea accesible en Internet. Todos los servidores tienen una dirección IP (es decir, 149.56.240.169) que puede considerar como un número de teléfono. Normalmente colocamos un nombre de dominio (es decir, scrimba.com) sobre esa dirección IP, para que sea más fácil de recordar.

Cuando escriba ese nombre de dominio en el navegador, llamará al servidor. Luego, el servidor enviará un montón de archivos HTML, CSS y JavaScript, como este:

Su navegador comienza cargando el archivo HTML principal, antes de continuar con CSS y JavaScript. Estos archivos permiten que el navegador genere un sitio web atractivo e interactivo.

Ahora echemos un vistazo más de cerca a los roles que juegan estos tres idiomas.

¿Qué es HTML?

Imaginemos un sitio web como una persona. Usaremos esta analogía para entender nuestro sitio web. El HTML se describe mejor como el esqueleto:

¿Qué es CSS?

Sin embargo, un sitio web HTML simple se ve bastante feo, por lo que deberá diseñarlo con CSS. Puede verse como la piel y la ropa del sitio web.

¿Qué es JavaScript?

Una vez que domine CSS, debe continuar con JavaScript. En nuestra analogía, esto es como el cerebro y los músculos de nuestro sitio web:

Escribiendo su primer archivo HTML

Para poder escribir HTML, necesitará un documento HTML, que es solo un documento con una extensión .html . No importa qué editor de texto uses, pero los más populares en estos días son Sublime Text, VS Code y Atom. También puede utilizar Scrimba como editor en el navegador.

Creemos un nuevo archivo, llamémoslo index.html y escribamos Hello world!en él.

Hello world!

Si arrastramos este archivo al navegador, o apuntamos el navegador a la dirección de este archivo, obtendremos lo siguiente.

¡Felicidades, ya ha creado su primer sitio web!

Tu primera etiqueta HTML

Sin embargo, todavía no hemos escrito ninguna etiqueta HTML. Para hacer eso, envolvemos el Hello world!texto en <etiquetas h1>, así:

Hello world!

La primera <h1> es una etiqueta de apertura y la segunda one,es una etiqueta de cierre. Como puede ver, la diferencia es solo la barra invertida en la etiqueta de cierre. Esto resultará en lo siguiente en la página:

Ahora le ha dicho al navegador que desea que el Hello world!texto sea un encabezado. Por lo tanto, el navegador le aplica algo de estilo, básicamente aumentando el tamaño del texto.

Así de fácil es empezar a escribir HTML.

Escribir un documento HTML adecuado

Pero este no es realmente un documento HTML válido, ya que deben seguir una estructura claramente definida. A los efectos de este tutorial, simplemente se lo mostraré brevemente y luego continuaremos con las cosas divertidas.

Así es como Hello world!debería verse nuestro ejemplo:

Hello world!

No tiene que preocuparse por el ; y etiqueta por ahora, ya que simplemente escribiremos o tienda en la etiqueta. ¡Sigamos con eso! PE>, tml> ur con

Párrafos

Debajo de la etiqueta h1 agregaremos un párrafo. Esta etiqueta se usa generalmente para, bueno, párrafos de texto.

Hello world!

Hello, and welcome to my website!

Así es como se ve:

Liza

Ahora agreguemos una lista. Para hacer eso, necesitamos agregar dos etiquetas diferentes, <ul> ; and

  • . El primero representa una lista no ordenada y el segundo representa un elemento de lista. Necesitaremos to wrap el
  • ; tags dentro del
      etiqueta.

      
            
      • Eat
      • Sleep
      • Code

      Si cambia <ul> to an

        , entonces las viñetas se reemplazarán con números, ya que significa lista ordenada.

        Campos de entrada

        Obtener aportes de los usuarios es una actividad crítica en los sitios web. Agreguemos un campo de entrada.

        Lo que agregaría el campo de entrada en la parte inferior de nuestro sitio:

        Ahora hay dos nuevos conceptos para aprender aquí: atributos y etiquetas de cierre automático . El primero, atributos , proporciona información adicional sobre los elementos HTML.

        En nuestro caso, estamos agregando dos atributos: tipo y marcador de posición. El tipo le dice al navegador que debe ser un campo de texto. Aquí, podríamos haber elegido entre una variedad de tipos (radio, selección, casilla de verificación, fecha) que lo hubieran convertido en elementos completamente diferentes.

        El marcador de posición dicta el texto de ayuda dentro del elemento.

        Finalmente, la etiqueta de entrada también es un elemento de cierre automático (también conocido como elemento vacío) , lo que significa que no consiste en una etiqueta de apertura y cierre, sino solo una etiqueta que se cierra sola.

        Próximos pasos

        Hay muchas más cosas que aprender en HTML y no es nada difícil. Mi curso completo se puede completar en menos de una hora, y te dará una comprensión sólida de los conceptos básicos y te permitirá comenzar a construir sitios web reales.

        Si tiene hambre de más, tenemos una comida gratuita de 14 platos ...

        en mi curso Learn HTML5 for Free en Scrimba.com.

        Te veo allí. ?