HTML (Lenguaje de Marcado de Hipertexto)
1. Estructura Básica de un Documento HTML
Todo documento HTML tiene una estructura esencial, como esta:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la página</title>
</head>
<body>
<!-- Contenido visible aquí -->
</body>
</html>
Explicación:
1. <!DOCTYPE html>: Indica que el documento es HTML5.
2. <html>: Contiene todo el contenido del documento.
3. Atributo lang="es": Define el idioma del contenido.
4. <head>: Contiene metadatos (no visibles en la página).
5. <body>: Contiene el contenido visible en el navegador.
2. Principales Etiquetas HTML y su Uso
2.1. Encabezados
Los encabezados (<h1> a <h6>) organizan el contenido jerárquicamente.
Ejemplo:
<h1>Este es un título principal</h1>
<h2>Este es un subtítulo</h2>
<h3>Encabezado de tercer nivel</h3>
2.2. Texto y Párrafos
● <p>: Define párrafos.
● <br>: Salto de línea.
● <strong> y <em>: Negrita e itálica semántica.
● <mark>: Resaltar texto.
● <code>: Muestra texto como código.
,Ejemplo:
<p>Este es un párrafo.</p>
<p>Texto con <strong>negrita</strong> y <em>cursiva</em>.</p>
<p>Texto <mark>resaltado</mark>.</p>
<code>console.log('Hola, Mundo');</code>
2.3. Listas
Listas ordenadas (<ol>):
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ol>
Listas no ordenadas (<ul>):
<ul>
<li>Elemento A</li>
<li>Elemento B</li>
</ul>
Listas de definición (<dl>):
<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcado.</dd>
<dt>CSS</dt>
<dd>Lenguaje de estilos.</dd>
</dl>
2.4. Enlaces
Los enlaces (<a>) conectan documentos o recursos.
Ejemplo:
<a href="https://example.com">Visita Example</a>
<a href="#seccion2">Ir a la sección 2</a>
<a href="archivo.pdf" download>Descargar PDF</a>
, ● Atributos importantes:
○ href: Define la URL.
○ target="_blank": Abre en una nueva pestaña.
○ download: Descarga el archivo.
2.5. Imágenes
Las imágenes se insertan con <img>.
Ejemplo:
<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200">
● Atributos importantes:
○ src: Ruta de la imagen.
○ alt: Texto alternativo.
○ width y height: Dimensiones de la imagen.
2.6. Tablas
Las tablas permiten estructurar datos tabulares.
Ejemplo básico:
<table border="1">
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ana</td>
<td>25</td>
</tr>
<tr>
<td>Juan</td>
<td>30</td>
</tr>
</tbody>
</table>
Explicación:
, ● <table>: Define la tabla.
● <thead>, <tbody>, <tfoot>: Cabecera, cuerpo y pie.
● <tr>: Define filas.
● <th>: Define encabezados de columnas.
● <td>: Define celdas.
2.7. Formularios
Los formularios permiten recolectar datos del usuario.
Ejemplo básico:
<form action="procesar.php" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad">
<button type="submit">Enviar</button>
</form>
Atributos importantes:
● action: URL a la que se envían los datos.
● method: Método HTTP (get o post).
2.8. Multimedia
Audio:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta audio.
</audio>
Video:
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta video.
</video>
1. Estructura Básica de un Documento HTML
Todo documento HTML tiene una estructura esencial, como esta:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la página</title>
</head>
<body>
<!-- Contenido visible aquí -->
</body>
</html>
Explicación:
1. <!DOCTYPE html>: Indica que el documento es HTML5.
2. <html>: Contiene todo el contenido del documento.
3. Atributo lang="es": Define el idioma del contenido.
4. <head>: Contiene metadatos (no visibles en la página).
5. <body>: Contiene el contenido visible en el navegador.
2. Principales Etiquetas HTML y su Uso
2.1. Encabezados
Los encabezados (<h1> a <h6>) organizan el contenido jerárquicamente.
Ejemplo:
<h1>Este es un título principal</h1>
<h2>Este es un subtítulo</h2>
<h3>Encabezado de tercer nivel</h3>
2.2. Texto y Párrafos
● <p>: Define párrafos.
● <br>: Salto de línea.
● <strong> y <em>: Negrita e itálica semántica.
● <mark>: Resaltar texto.
● <code>: Muestra texto como código.
,Ejemplo:
<p>Este es un párrafo.</p>
<p>Texto con <strong>negrita</strong> y <em>cursiva</em>.</p>
<p>Texto <mark>resaltado</mark>.</p>
<code>console.log('Hola, Mundo');</code>
2.3. Listas
Listas ordenadas (<ol>):
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ol>
Listas no ordenadas (<ul>):
<ul>
<li>Elemento A</li>
<li>Elemento B</li>
</ul>
Listas de definición (<dl>):
<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcado.</dd>
<dt>CSS</dt>
<dd>Lenguaje de estilos.</dd>
</dl>
2.4. Enlaces
Los enlaces (<a>) conectan documentos o recursos.
Ejemplo:
<a href="https://example.com">Visita Example</a>
<a href="#seccion2">Ir a la sección 2</a>
<a href="archivo.pdf" download>Descargar PDF</a>
, ● Atributos importantes:
○ href: Define la URL.
○ target="_blank": Abre en una nueva pestaña.
○ download: Descarga el archivo.
2.5. Imágenes
Las imágenes se insertan con <img>.
Ejemplo:
<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200">
● Atributos importantes:
○ src: Ruta de la imagen.
○ alt: Texto alternativo.
○ width y height: Dimensiones de la imagen.
2.6. Tablas
Las tablas permiten estructurar datos tabulares.
Ejemplo básico:
<table border="1">
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ana</td>
<td>25</td>
</tr>
<tr>
<td>Juan</td>
<td>30</td>
</tr>
</tbody>
</table>
Explicación:
, ● <table>: Define la tabla.
● <thead>, <tbody>, <tfoot>: Cabecera, cuerpo y pie.
● <tr>: Define filas.
● <th>: Define encabezados de columnas.
● <td>: Define celdas.
2.7. Formularios
Los formularios permiten recolectar datos del usuario.
Ejemplo básico:
<form action="procesar.php" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad">
<button type="submit">Enviar</button>
</form>
Atributos importantes:
● action: URL a la que se envían los datos.
● method: Método HTTP (get o post).
2.8. Multimedia
Audio:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta audio.
</audio>
Video:
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta video.
</video>
