Table of Contents
Al querer iniciar en el mundo de la programación siempre nos preguntamos: ¿Por dónde debo empezar? ¿Qué lenguaje de programación debo de aprender? y aprender HTML desde cero siempre es una respuesta bastante común y segura para aprender, es por ello que en este momento te empezaré a explicar HTML desde cero.
¿Qué necesito para poder aprender HTML desde cero?
Para poder empezar, necesitamos un editor de textos, comúnmente en las escuelas siempre nos dicen que el bloc de notas en Windows es una buena opción, sin embargo, es importante mencionarte que no es su función principal, tenemos muchas otras herramientas específicas para el desarrollo.
¿Por qué no debo utilizar el Bloc de notas para aprender HTML desde cero? Es muy sencillo, en una analogía, es como si quisieramos poner un clavo en la pared con un zapato, probablemente lo podrémos hacer, pero el zapato no fue creado para realizar esta función
Es por eso que lo primero que debemos de instalar siempre es un editor de textos y en este caso el más utilizado hasta el momento es Visual Studio Code.
Visual Studio Code (VSCode), es un editor de código desarrollado por Microsoft, que nos permite agregar una serie de Plugins o Extensiones que nos facilitan el desarrollo de código.
No es el objetivo de este curso enseñarte a instalar Visual Studio Code o sus extensiones, sin embargo, aquí te dejo una recomendación de las mejores extensiones visual studio code para HTML e inicies a aprender HTML desde cero.
Mejores extensiones visual studio code para HTML
Cuando empezamos a aprender HTML desde cero, siempre se nos complican las etiquetas, es por eso que en principio tenemos a Auto Rename Tag, utilizada para renombrar tanto las etiquetas de inicio y fin de HTML
Después podemos continuar con Live Server, que nos genera un servidor local, que si bien ahora no lo necesitamos, creéme, luego será muy necesario para simplificar tareas.
Otra extensión muy utilizada es Prettier, el cual es un formateador de código que nos ayuda mucho a trabajar y formatear nuestro código cuando estamos aprendiendo HTML desde cero.
Por el momento, creo que con estos bastarán sin embargo, te invito a revisar mi canal de Youtube, en donde subí un video explicando las extensiones que ocupo en mi VSCode, además también te dejo esta otra lista que desarrollé sobre las 3 mejores extensiones de Visual Studio Code.
Adicional, muchas veces me preguntan por el tema que ocupo, ese se llama Andrómeda y la tipografía que utilizo se denomina Fira Code
Seguro te pasarás un montón de tiempo añadiendo y eliminando extensiones y temas hasta que quedes a gusto con tu configuración, así que podemos dejarlo para otro momento y continuar con nuestro curso de HTML desde cero.
Una vez que ya tenemos instalado nuestro Visual Studio Code, podemos crear una carpeta en nuestro escritorio, o en el lugar en donde te quede más cómodo, comúnmente creamos una carpeta dentro de nuestros documentos o si tienes instalado Github Desktop, utilizamos esa carpeta, en fin, ten en consideración que probablemente generarás más adelante muchos proyectos.
Es por eso que te recomiendo que empieces a utilizar un único directorio para poder guardar ahí todos tus proyectos y no estén dispersos por todo el disco duro, Para este ejemplo, yo cree la carpeta curso-html dentro del escritorio.
Una vez dentro de la carpeta curso-html, es necesario que generemos un archivo index.html, ¿Por qué ese nombre tan raro? Te explico, Index es el primer nombre que buscan los navegadores para poder acceder a una página web,
¿Has notado que cuando accedes a google.com o a facebook.com, aparece una página al principio?, probablemente esa página puede ser su index, por lo que probablemente si accedes a www.google.com/index.html será lo mismo que acceder a google.com
Por otra parte el .html es la extensión del archivo, con ello le estamos indicando al navegador que el tipo de documento que estamos creando es un documento HTML desde cero.
y una vez que hayas generado la carpeta curso-html y dentro de ella el archivo index.html lo podrás abrir en el VSCode, la forma más sencilla es teniendo abierto el VSCode puedes arrastrar la carpeta hacia el espacio de trabajo y te aparecerá algo como esto:
Como puedes observar ya tenemos nuestro primer documento creado de HTML desde cero, Ahora empezaremos a explicar el código.
HTML desde Cero: Estructura Básica
Todos los documentos de HTML desde cero deberán contar con una estructura básica la cual es la siguiente y que puedes copiar y pegar en tu documento
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>No te espantes, iré explicandote cada parte, sin embargo, para que puedas apresurar un poco esta escritura de código, Visual Studio Code te ayuda con Snippets, los cuales son fragmentos de código que ya están guardados en VSCode esperando ser ocupados,
Ejemplo, si tu documento está totalmente en blanco y quieres agregar la estructura básica, simplemente tienes que escribir el símbolo ! seguido de la tecla de tabulación (La que está arriba de donde activas las mayúsculas y minúsculas)
Otra forma sería escribir html:5 y de igual manera presionar tabulación para que nos ayude a autocompletar
Una vez explicado esto, ya solo queda explicarte el código:
Aprender HTML desde cero, es tener que decirte que HTML es un lenguaje de etiquetas, lo que quiere decir que cada instrucción que nosotros queramos darle al navegador, tendrá que ser mediante una etiqueta.
Todas las etiquetas se encuentran entre corchetes angulares (<>) y dentro de los corchetes el nombre de la etiqueta, en el ejemplo de arriba podrás ver que tenemos la etiqueta Doctype, HTML, Head, Meta, Title, Body.
También podrás observar que hay algunas etiquetas que tienen un espacio de separación y luego una palabra, que está dentro de la etiqueta se denomina atributo, en una analogía, la etiqueta puede ser una parte de tu cuerpo, como tu mano y un atributo es una característica que tiene esa parte de tu cuerpo, como el color de piel.
También puedes observar que la mayor parte de las etiquetas están escritas 2 veces, pero que a la segunda se le antepone una diagonal, algo como <html></html>, Esto es para poder representar las etiquetas de inicio y etiquetas de cierre, A las etiquetas de cierre se les antepone la / y todo lo que esté entre o dentro de las dos etiquetas, es lo la parte de código que afectarán.
Existen algunas etiquetas como las meta, que no cuentan con una etiqueta de cierre, luego te iré contando de ellas, pero por el momento, es importante que sepas que hay algunas etiquetas especiales como esta.
Ahora si, te explico las líneas de código, en la primera línea se establece el Doctype, pero ¿qué significa Doctype?, como te podrás imaginar, es para indicarle al navegador que tipo de documento estamos creando, en este caso le estamos diciendo que es un documento HTML.
Después de ello, en la segunda línea viene la etiqueta HTML, dentro de la cual le podemos asignar un atributo lang o de lenguaje, en este caso tiene EN de English, pero le podemos decir que sea ES o Español.
Un documento HTML siempre deberá contener 2 secciones la etiqueta HEAD y la etiqueta BODY, dentro de la etiqueta HEAD tenemos que poner toda la metadata que nos pueda ayudar como hojas de estilo, set de caractéres o el viewport, por el momento no entraremos en detalle.
Por otro lado, dentro de la etiqueta BODY deben de ir todas las etiquetas que se vayan a utilizar en la página, es decir, todos los elementos que querramos contenga nuestra página deberán ir dentro de la etiqueta BODY
La etiqueta title en la línea 7, es la etiqueta que agrega texto dentro de la barra de título o pestañas de los navegadores por lo que todo lo que pongamos se verá reflejado en la barra de título o pestañas.
Si en este momento guardamos la información que hemos creado y abrimos el documento en el navegador, podremos observar que ya tenemos una página totalmente en blanco, esto es porque como recordarás, no existe nada dentro de la etiqueta BODY por lo que no aparece ningún elemento,
Así que vamos a agregar un poco de información para que tenga más sentido.
Etiquetas de Encabezado o Heading en HTML desde cero
Lo primero que tendremos que ver serán las etiquetas de encabezado o Headings, existen 6 y se representan con la letra H, entonces, podemos escribir algo como esto:
<body>
<h1>Este es el Título de mi primera página web</h1>
<h2>Este es el Subtítulo de mi primera página web</h2>
</body>Observa que te puse solo la referencia de la etiqueta BODY, sin embargo, tu documento debe tener toda la estructura básica.
Después de ello como te comentaba, existen 6 Headings en HTML, El h1 es la etiqueta de mayor jerarquía, después la etiqueta h2 y así sucesivamente hasta h6.
TIP: De acuerdo con las reglas de SEO o posicionamiento web, solo podremos tener un h1 dentro de cada archivo HTML.
Etiquetas de Párrafo en HTML desde cero
Una vez que hayamos escrito los títulos, podremos añadir también párrafos de texto, esto es mediante la etiqueta <p>, debo informarte que hasta este momento, si pones texto dentro o fuera de etiquetas, probablemente no verás un cambio sustancial, sin embargo, recuerda que hasta este punto solo estamos creando estructuras, que nos serán de gran ayuda a la hora de agregar otros lenguajes de programación.
Entonces, vamos a escribir esto:
<body>
<h1>Este es el Título de mi primera página web</h1>
<p>Este es mi primer párrafo de texto dentro de HTML, estoy aprendiendo HTML desde Cero</p>
<h2>Este es el Subtítulo de mi primera página web</h2>
</body>Como puedes observar tanto las etiquetas Heading como las etiquetas de Párrafo tiene inicio y cierre por lo que es importante que observes que el texto esté dentro de las dos etiquetas, adicional, también verifica que la etiqueta de cierre contenga la diagonal antes de la instrucción, ya que es muy común que al principio se nos olvide escribirla.
Si seguiste todos los pasos de nuestro curso HTML desde cero, hasta este momento deberás tener en el navegador algo como esto:
Esto sería todo por hoy, parece poco pero te pido repases a profundidad cada cosa que te estoy comentando, ya que la única forma para que se nos quede grabado es la repetición. Recuerda que estaré subiendo más información sobre HTML desde cero, para que aprendas todo lo que necesitas saber.
Si te ha gustado este artículo te pido me sigas en mi:
🖥️ Youtube: https://www.youtube.com/@eightdev?sub_confirmation=1
🎵 Tik Tok: https://www.tiktok.com/@8devmx
✅ Facebook: https://www.facebook.com/8devmx/
📸 Instagram: https://www.instagram.com/8devmx/
Sin más, ¡nos vemos la próxima!
