Introducción a la Programación Básica con HTML
En esta serie de artículos, exploraremos los fundamentos de la programación web comenzando con HTML. HTML, o Lenguaje de Marcado de Hipertexto, es el bloque de construcción esencial para crear páginas web. Aprenderemos cómo estructurar contenido en la web y crear nuestras primeras páginas web.
SV-CODE
08 Apr, 2025
¿Que es HTML?
HTML(HyperText Markup Language) es el estandar para crear y diseñar páginas web. Utiliza una serie de elementos y etiquetas que indican al navegador cómo mostrar el contenido.
Estructura Básica de un Documento HTML
Cada página HTML sigue una estructura básica que incluye las siguientes partes:
<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página HTML</title>
</head>
<body>
<h1>¡Hola Mundo!</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>
<!DOCTYPE html>: Define el tipo de documento.<html>: Es el elemento raíz de la página.<head>: Contiene meta-información sobre el documento.<title>: Define el título de la página que aparece en la pestaña del navegador.<body>: Contiene el contenido visible de la página.
Etiquetas HTML Comunes
Aquí hay algunas etiquetas HTML básicas que debes conocer:
- Encabezados:
<h1>a<h6>son usados para definir encabezados, siendo<h1>el más importante. - Párrafos:
<p>se usa para definir párrafos. - Enlaces:
<a href="https://www.example.com">Enlace</a>se usa para definir enlaces. - Imágenes:
<img src="ruta-de-la-imagen.jpg" alt="Descripción de la imagen">se usa para insertar imágenes.
Creando tu Primera Página Web
Vamos a crear una página web sencilla que incluya un título, un párrafo, un enlace y una imagen.
<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página HTML</title>
</head>
<body>
<h1>Bienvenido a mi Blog de Programación</h1>
<p>En este blog, aprenderás los conceptos básicos de HTML.</p>
<a href="https://www.example.com">Visita mi página web</a>
<img src="https://www.example.com/imagen.jpg" alt="Descripción de la imagen">
</body>
</html>
Guardando y Visualizando tu Página
- Guardar el Archivo: Guarda tu archivo con la extensión
.html, por ejemplo,index.html. - Abrir en un Navegador: Abre tu archivo HTML en un navegador web para ver tu primera página web en acción.
Conclusión
¡Felicidades! Has creado tu primera página web utilizando HTML. En los próximos artículos, profundizaremos en otros temas esenciales como CSS para estilizar tus páginas y JavaScript para agregar interactividad.
Próximos Pasos
- CSS: Aprende cómo estilizar tu página web para que se vea atractiva.
- JavaScript: Añade interactividad a tu página web para mejorar la experiencia del usuario.
- Proyectos Prácticos: Aplica tus conocimientos creando proyectos web reales.
Espero que hayas disfrutado esta introducción a la programación básica con HTML. ¡Sigue practicando y experimentando con nuevas etiquetas y elementos!