Crear tu propia página web, escribiendo tu propio código, sin ayuda de generadores, builders o de inteligencia artificial es muy fácil. Sí te enseña el profesor correcto, obviamente. Lo primero que debes aprender en tu carrera como desarrollador web es el lenguaje HTML con el cual se escriben todas las páginas web. Pero no te asustes, porque aunque es código de computadora, es bastante sencillo de entender por qué no es un lenguaje de programación. Su función es etiquetar los elementos de una página web. Como quien etiqueta productos en un almacén.
En este blog voy a mostrarte lo sencillo que es aprender HTML e iniciar tu carrera como programador web, porque tú sabes que en español, #NadieExplicaMejor que EDteam.
Por cierto, hay quienes piensan que no vale la pena aprender porque le puedes pedir a una inteligencia artificial que escriba el código por ti. Pues, una cosa es todo el hype del lanzamiento de ChatGPT y otra cosa es un año después, cuando ya sabemos que no es tan mágica como creíamos y que miente y se inventa respuestas más veces de las que nos gustaría.
¿Ahorra tiempo? Por supuesto, pero se necesita la experiencia humana para revisar y validar las respuestas que te da. Así que vamos a empezar con HTML.
1. Comienza tu proyecto con HTML
Para crear tus páginas web, solo necesitas dos cosas: un editor de código y un navegador de Internet. Como editor de código, te recomiendo usar Visual Studio Code. Sin embargo, ten cuidado, jamás uses bloc de notas, Word, o una cosa horrenda llamada Dreamweaver. Para el navegador, puedes usar el que te guste, ya sea Chrome, Edge, Firefox, Brave, etc. ¡Ni siquiera necesitas conexión a Internet!
Ahora sí, vamos con el paso a paso para comenzar tu proyecto:
Paso 1. Crea una carpeta en tu disco duro, donde irá tu página web. Como será tu primera página web, la puedes llamar: “Mi primera chamba”.
Paso 2. Luego abres la carpeta con Visual Studio Code. Puedes hacerlo con el atajo CTRL O en Windows / Linux o CMD O en Mac.
Paso 3. Desde la sección Explorador, verás la carpeta que acabas de abrir. Claramente, está vacía (porque la acabas de crear), así que le darás clic al ícono de nuevo archivo y crearás uno nuevo llamado: index.html. Y si te fijas en el lado derecho, allí te aparecerá el archivo.
Paso 4. Ahora, escribirás ! (el signo de cierre de admiración), luego TAB y observa la magia. Esa es la estructura básica de una página web (que te voy a explicar más adelante).
Paso 5. En toda esa estructura, casi al final, hay algo llamado “body”. Allí, va todo lo que se verá en la página web, y lo que está fuera del body, las personas no lo verán. Hagamos una prueba, escribe: “En español, nadie explica mejor que EDteam” y dale a guardar.
Paso 6. Desde el navegador, presiona CTRL O en Windows / Linux o CMD O en Mac, buscas el archivo en tu disco duro y listo. Acabas de crear tu primera web.
El problema es que no sabes cómo lo hiciste, solo has seguido las instrucciones. El siguiente paso es entender la sintaxis, cómo se escribe este código y luego hacerlo solo. Así que vamos a explicarte más a fondo.
2. Estructura base
Todas las páginas web tienen la misma estructura básica. Es como el esqueleto que todas tienen y cumplen, sin excepción.
1.- El Doctype indica que es un documento HTML. Esto es obvio, pero es requisito colocarlo, de lo contrario, puede darte error. 2.- La etiqueta HTML envuelve a toda la página web. En ella se indica el idioma. Puedes cambiarla a español si lo deseas. Pero ten presente, que no significa que se traduzca en español, solo que el navegador sabe en qué idioma está la página web.
Dentro de HTML, hay dos secciones: head (cabeza en inglés) y body (cuerpo). Estas son las dos secciones más importantes.
1.- Dentro de cabeza (Head), van datos importantes que tú no los ves, pero que son necesarios, como la codificación de caracteres, el viewport para que un celular reconozca la página web, el título y otras cosas más. 2.- Dentro del cuerpo (del body) va lo que sí puedes ver en la web. Por ejemplo, el contenido.
Te muestro como se ve todo esto en código:
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 En español, nadie explica mejor que EDteam. 10 </body> 11</html>
3. Sintaxis de HTML
El código HTML sigue un patrón muy sencillo, y se basa en el uso de etiquetas. Las etiquetas son palabras que indican al navegador web cómo debe mostrar el contenido que las rodea. La mayoría de las etiquetas HTML vienen en pares, una de apertura y otra de cierre, y el contenido va entre ellas.
En palabras más sencillas:
1.- Etiqueta de apertura y cierre: La mayoría de las etiquetas HTML se escriben con una apertura y un cierre, como esta: <h1>Hola mundo</h1>
2-. Elementos anidados: Puedes guardas elementos HTML dentro de otros elementos. Ejemplo:
1 <head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <title>Mi primera chamba</title> 5 </head>
3.- Atributos: Algunas etiquetas pueden tener atributos, que se encargan de proporcionar información adicional sobre el elemento. Se escriben dentro de la etiqueta de apertura y suelen tener un nombre y un valor. Por ejemplo:
1 <cabeza> 2 <cabello color="negro"> 3 <ojo color="marron"> 4 </cabeza>
4.- Comentarios: Sirven para darnos mensajes a nosotros mismos o a nuestros compañeros de trabajo. En HTML, los comentarios se escriben así: <!-- Este es un comentario que el navegador va a ignorar -->
4. Aprende HTML en EDteam
Ahora que entiendes la importancia de HTML, conoces cómo crear tu primera página web y aprendiste la sintaxis, es momento de dar el siguiente paso y dominar completamente este lenguaje de marcado. En EDteam tenemos el mejor curso en español, con el mejor profesor en español. ¿Y lo mejor? Este curso es completamente EN VIVO. Así que no te pierdas las clases todos los martes y jueves a las 5:00 pm (Pe/Col). Entra en ed.team/cursos/html ¡y no te lo pierdas!
Y si no lo sabías, #LoAprendisteEnEDteam.
Amplía esta información en nuestro video de Youtube: