Recursos necesarios.
Sublime Text es un editor de texto para escribir código en casi cualquier formato de archivo. Está especialmente pensado para escribir sin distracciones. Es decir, que visualmente ofrece un entorno oscuro donde las líneas de código que escribas resaltarán para que puedas centrarte exclusivamente en ellas. De una forma sencilla podemos decir que Sublime Text, es un editor de texto ligero, pensado desde un inicio en la velocidad, haciendolo uno de los editores de texto más rápido y facil de usar.
Visual Studio Code es un editor de código fuente ligero pero eficaz que se ejecuta en el escritorio y está disponible para Windows, macOS y Linux. Incluye compatibilidad integrada con JavaScript, TypeScript y Node.js, y cuenta con un amplio ecosistema de extensiones para otros lenguajes y entorno de ejecución (como C++, C#, Java, Python, Go, .NET).
Lección 1, ¿Qué es HTML?
HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web. Además de HTML, generalmente se utilizan otras tecnologías para describir la apariencia/presentación de una página web CSS o la funcionalidad/comportamiento (JavaScript).
Un elemento HTML se distingue de otro texto en un documento mediante «etiquetas», que consisten en el nombre del elemento rodeado por «<» y «>«. El nombre de un elemento dentro de una etiqueta no distingue entre mayúsculas y minúsculas. Es decir, se puede escribir en mayúsculas, minúsculas o una mezcla. Por ejemplo, la etiqueta <title> se puede escribir como <Title>, <TITLE> o de cualquier otra forma.
Estructura básica de HTML
La estructura HTML hace uso de etiquetas y atributos predefinidos para indicarle al navegador cómo mostrar su contenido; es decir, en qué formato, estilo, tamaño de fuente, imágenes o videos se debe configurar. Básicamente, su función es describir la estructura general de una página y organizar la forma en que los usuarios podrán visualizarla.
La estructura HTML de una página web se compone de las etiquetas <html>, que indica el comienzo de la página; <head>, que contiene información más descriptiva sobre el sitio; y <body>, que conforma todos los elementos visibles de la página.
En la siguiente imagen te mostramos un ejemplo de cómo se ve una etiqueta básica de HTML con su apertura y cierre:
Ejemplo de una estructura HTML
En la imagen siguiente puedes ver cómo se visualiza la estructura básica en lenguaje HTML para formar una página web:
- <!DOCTYPE html>: se utiliza para indicar la versión HTML 5.0 (la usada actualmente).
- <html> </html>: es el elemento raíz y es el más importante dentro de la estructura HTML, pues es el que contendrá el resto de las etiquetas de atributos de la página web.
- <head> </head>: es la etiqueta principal que incluye metadatos; son atributos que no se muestran al usuario, solo describen referencias de la página, por ejemplo, título o página CSS.
- <body> </body>: es la etiqueta para desarrollar todo el cuerpo de la página web y engloba datos desde textos hasta enlaces.
Actividad 1:
Genera el siguiente sitio web, con el código y etiquetas sencillas de HTML, imagen del resultado como se muestra en seguida:
NOTA: Terminado el ejercicio mandarlo por correo a edgar.e.g@unicla.edu.mx
