Pagina de Programación

Lección 01. Introducción a HTML.

HTML significa HyperText Markup Language, o en español, Lenguaje de Marcado de Hipertexto.

Aunque HTML es un lenguaje... NO es un lenguaje de programación. Su función es estructurar el contenido de una página web.

Gracias a HTML, un navegador como Chrome, Firefox o Edge puede mostrar elementos como títulos, párrafos, imágenes y enlaces.

La web funciona mediante el protocolo HTTP, que consiste en realizar peticiones a un servidor (dominio) para obtener archivos que el navegador interpreta.

Dentro del ecosistema web existen dos áreas principales:

Front-end: cliente (HTML, CSS, JS).
Back-end: servidor.

HTML pertenece al lado front-end.

Archivos básicos del Front-end_

.html — Estructura.
.css — Estilos y diseño.
.js — Interactividad.

Existen otros archivos si se usan frameworks o librerías, pero estos tres son los principales.

Nombres comunes de archivos_

El archivo principal del sitio suele llamarse:

index.html

Nota: Es la página principal que el usuario ve al ingresar al dominio. Hoy en día, algunos hostings permiten cambiar este nombre.

Para estilos, se acostumbra usar:

style.css

Nota: Aunque no es obligatorio, es un estándar para identificar los estilos generales.

Para JavaScript, se suele usar:

script.js

Nota: Su nombre se debe a que “script” es una forma de llamar a la funcionalidad agregada al sitio. También es común nombrarlos según su función, por ejemplo:

carrusel.js
formulario.js

Nota: Siempre es buena práctica nombrarlos en inglés.

Crear tu primer archivo .html_

Para empezar, crea un archivo con la extensión .html, por ejemplo:

index.html

Dentro de este archivo escribimos la estructura básica de una página web:

<!DOCTYPE html>
<html>
  <head>
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>Hola mundo</h1>
    <p>Este es mi primer documento HTML.</p>
  </body>
</html>

Abrir un archivo HTML en el navegador_

Para ver tu página solo debes abrir el archivo index.html en cualquier navegador.

El navegador mostrará lo que esté dentro de la etiqueta <body>.

¿Qué significado tienen las etiquetas?_

HTML funciona mediante etiquetas o tags, que indican al navegador qué tipo de contenido representan.

<h1>Esto es un título</h1>
<p>Esto es un párrafo dentro de HTML.</p>

Conclusión._

En resumen, para comenzar a usar HTML debes:

- Crear un archivo .html.
- Escribir la estructura básica.
- Agregar contenido usando etiquetas.
- Abrirlo en el navegador.

Menú Siguiente ➡