Guia rapida - HTML Básico 1.2

1. Etiqueta `<a>`: Enlaces

a. Estructura básica

La etiqueta <a> se utiliza para crear enlaces en HTML. La estructura básica es:

<a href="URL">Texto del enlace</a>

b. Rutas absolutas y relativas

Ruta absoluta: Especifica la dirección completa de un recurso.
```
<a href="https://www.google.com">Ir a Google</a>
```
Ruta relativa: Especifica la ubicación del recurso en relación con la página actual.
```
<a href="contacto.html">Ir a la página de contacto</a>
```

c. Atributo `target`

El atributo target se utiliza para especificar dónde se abrirá el enlace.

_self: (por defecto) abre el enlace en la misma pestaña.

<a href="https://www.google.com" target="_self">Abrir en la misma pestaña</a>

_blank: abre el enlace en una nueva pestaña.

<a href="https://www.google.com" target="_blank">Abrir en una nueva pestaña</a>

d. Vínculos de mail y WhatsApp

Correo electrónico:

<a href="mailto:correo@ejemplo.com">Enviar un correo</a>

WhatsApp:

<a href="https://wa.me/1234567890">Enviar un mensaje de WhatsApp</a>

e. Vínculos ancla

Los vínculos ancla permiten saltar a una sección específica de la misma página.

Crear un ancla:

<h2 id="seccion1">Sección 1</h2>

Enlazar al ancla:

<a href="#seccion1">Ir a Sección 1</a>

Enlaces útiles

2. Etiqueta `<img>`: Imágenes

a. Estructura básica

La etiqueta <img> se utiliza para insertar imágenes. Es un elemento vacío, lo que significa que no tiene etiqueta de cierre.

<img src="ruta/de/la/imagen.jpg" alt="Descripción de la imagen">

b. Atributos `width` y `height`

Estos atributos definen el ancho y alto de la imagen en píxeles.

<img src="ruta/de/la/imagen.jpg" alt="Descripción de la imagen" width="300" height="200">

Enlaces útiles

3. Listas: `<ol>` y `<ul>`

a. Lista ordenada (`<ol>`)

Las listas ordenadas muestran los elementos en un orden numérico.

<ol>
  <li>Primer ítem</li>
  <li>Segundo ítem</li>
  <li>Tercer ítem</li>
</ol>

b. Lista desordenada (`<ul>`)

Las listas desordenadas muestran los elementos con viñetas.

<ul>
  <li>Primer ítem</li>
  <li>Segundo ítem</li>
  <li>Tercer ítem</li>
</ul>

Enlaces útiles

4. Tooltips

Un tooltip es un pequeño cuadro de texto que aparece cuando se coloca el cursor sobre un elemento, generalmente un enlace o una imagen. Esto se logra usando el atributo title.

<a href="https://www.ejemplo.com" title="Esto es un tooltip">Pasa el cursor aquí</a>

Recursos adicionales

¡Claro! A continuación, te proporciono un ejemplo consolidado que combina todos los conceptos básicos de HTML que se enseñan en la clase 1. Este ejemplo muestra cómo estructurar una página HTML utilizando todas las etiquetas y conceptos mencionados:

Ejemplo Consolidado: Mi Primera Página Web

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Primera Página Web</title>
</head>

<body>
    <!-- Título principal -->
    <h1>Bienvenido a Mi Página Web</h1>

    <!-- Párrafo introductorio -->
    <p>Esta es mi primera página web creada con HTML. Aquí aprenderé a usar etiquetas básicas y a estructurar correctamente un documento HTML.</p>

    <!-- Subtítulo para listas -->
    <h2>Mis Hobbies</h2>

    <!-- Lista desordenada -->
    <ul>
        <li>Leer libros</li>
        <li>Escuchar música</li>
        <li>Jugar videojuegos</li>
    </ul>

    <!-- Subtítulo para lista ordenada -->
    <h2>Mis Metas para Aprender HTML</h2>

    <!-- Lista ordenada -->
    <ol>
        <li>Entender la estructura básica de HTML</li>
        <li>Crear enlaces y listas</li>
        <li>Aprender sobre estilos y CSS en clases futuras</li>
    </ol>

    <!-- Enlace externo -->
    <h2>Recursos Útiles</h2>
    <p>Visita <a href="https://www.w3schools.com" target="_blank">W3Schools</a> para aprender más sobre HTML.</p>

    <!-- Comentarios en HTML -->
    <!-- Este es un comentario que no será visible en la página web -->

</body>

</html>

Descripción del Ejemplo:

<!DOCTYPE html>: Indica que el documento está escrito en HTML5.
<html lang="es">: La etiqueta <html> envuelve todo el contenido y el atributo lang="es" especifica que el idioma del documento es español.
<head>: Contiene metadatos, como la codificación de caracteres (<meta charset="UTF-8">), el título de la página (<title>), y la configuración de viewport para dispositivos móviles (<meta name="viewport">).
<body>: Contiene todo el contenido visible de la página.
- Encabezados (<h1>, <h2>): Se utilizan para los títulos y subtítulos.
- Párrafos (<p>): Se usan para bloques de texto.
- Listas (<ul>, <ol>, <li>): Muestran elementos en listas desordenadas (con viñetas) y ordenadas (con números).
- Enlaces (<a>): Crea un enlace a otro sitio web, con el atributo target="_blank" para abrir en una nueva pestaña.
- Comentarios (): Se añaden comentarios en el código que no se muestran en la página.

Guia rapida - HTML Básico 1.2

1. Etiqueta <a>: Enlaces

a. Estructura básica

b. Rutas absolutas y relativas

c. Atributo target

d. Vínculos de mail y WhatsApp

e. Vínculos ancla

Enlaces útiles

2. Etiqueta <img>: Imágenes

a. Estructura básica

b. Atributos width y height

Enlaces útiles

3. Listas: <ol> y <ul>

a. Lista ordenada (<ol>)

b. Lista desordenada (<ul>)

Enlaces útiles

4. Tooltips

Recursos adicionales

Ejemplo Consolidado: Mi Primera Página Web

Descripción del Ejemplo:

Read more

Textos para primer HTML

Guía Rápida - Estructura Básica de HTML

1. Etiqueta `<a>`: Enlaces

c. Atributo `target`

2. Etiqueta `<img>`: Imágenes

b. Atributos `width` y `height`

3. Listas: `<ol>` y `<ul>`

a. Lista ordenada (`<ol>`)

b. Lista desordenada (`<ul>`)