Módulo 1: HTML Básico
Lección 1: Introducción a HTML
Objetivos:
· Entender qué es HTML y su importancia en la web.
· Conocer la estructura básica de un documento HTML.
· Aprender las etiquetas más comunes.
1. ¿Qué es HTML?
HTML (HyperText Markup Language) es el lenguaje de marcado estándar para crear páginas web. Describe la estructura de una página web utilizando una serie de elementos y etiquetas. Cada elemento tiene un propósito específico y define una parte del contenido de la página web.
2. Estructura básica de un documento HTML
Un documento HTML tiene una estructura definida con varias etiquetas que organizan su contenido. Aquí tienes un ejemplo básico:
<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página Web</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Este es mi primer párrafo en HTML.</p>
</body>
</html>
- Espacio de trabajo.
Te preguntaras que es el espacio de trabajo. Este espacio de trabajo es una carpeta donde tendrás que guardar tu trabajo.En esta carpeta tendrás todos tus archivos es decir el html.index el css, javascript, php, spq, imágenes.
Programas para practicar en este curso.
Visual Studio code: Enlace para su descarga. https://www.mediafire.com/file/s729nbhnnda02pr/VSCodeUserSetup-x64-1.94.2.exe/file
Las etiquetas más utilizadas
· <!DOCTYPE html>: Declara el tipo de documento y la versión de HTML.
· <html>: El contenedor principal de todo el documento HTML.
· <head>: Contiene metadatos sobre el documento, como el título.
· <title>: Define el título de la página que aparece en la barra del navegador.
· <body>: Contiene todo el contenido visible de la página web.
· <h1>: Define un encabezado de nivel 1.
· <p>: Define un párrafo de texto.
3. Etiquetas más comunes en HTML
Aquí hay algunas etiquetas básicas que se utilizan con frecuencia en HTML:
Encabezados: <h1> a <h6>
html
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
Párrafos: <p>
html
<p>Este es un párrafo.</p>
Enlaces: <a>
html
<a href="https://www.ejemplo.com">Visita Ejemplo</a>
Imágenes: <img>
html
<img src="imagen.jpg" alt="Descripción de la imagen">
Listas: <ul> para listas no ordenadas y <ol> para listas ordenadas
html
<ul>
<li>Elemento de lista</li>
</ul>
<ol>
<li>Elemento de lista</li>
</ol>
Ejercicio práctico:
Crea un archivo HTML y escribe el siguiente código. Luego, ábrelo en tu navegador para ver el
resultado.
<!DOCTYPE html>
<html>
<head>
<title>Práctica HTML Básica</title>
</head>
<body>
<h1>Bienvenido a mi página web</h1>
<p>Este es un párrafo de ejemplo para practicar HTML.</p>
<a href="https://www.tusitiofavorito.com">Visita mi sitio favorito</a>
<img src="imagen.jpg" alt="Una imagen de ejemplo">
<ul>
<li>Elemento de lista 1</li>
<li>Elemento de lista 2</li>
</ul>
</body>
</html>
Prueba a cambiar los textos y observa cómo cambia la página web. ¡Diviértete practicando!.
