Introducción a HTML5 - Biombo Interactivo

Introducción a HTML5

Aprende los conceptos básicos mientras construyes tu biombo digital

□ Etiquetas Básicas

HTML5 utiliza etiquetas para estructurar el contenido:

                    <div>Contenedor genérico</div>

                    <h1>Título principal</h1>

                    <p>Párrafo de texto</p>

                    <a href="#">Enlace</a>

                    <img src="imagen.jpg" alt="descripción">

                    <form>Formulario</form>

Ejemplo en acción:

¡Hola Mundo!

Este es un párrafo de ejemplo.

Enlace de ejemplo

□ Listas y Tablas

Estructuración de contenido en listas y tablas:

                    <!-- Listas no ordenadas -->

                    <ul>

                      <li>Elemento 1</li>

                      <li>Elemento 2</li>

                    </ul>

                    <!-- Listas ordenadas -->

                    <ol>

                      <li>Primer elemento</li>

                      <li>Segundo elemento</li>

                    </ol>

                    <!-- Tablas -->

                    <table>

                      <tr>

                        <th>Encabezado</th>

                      </tr>

                      <tr>

                        <td>Dato</td>

                      </tr>

                    </table>

Ejemplo en acción:

Elemento de lista
Otro elemento

Nombre	Edad
Ana	25

⚙️ Atributos HTML

Los atributos proporcionan información adicional sobre los elementos:

                    <div class="container" id="main">

                      <a href="https://ejemplo.com" target="_blank">Enlace</a>

                      <img src="imagen.jpg" alt="Texto alternativo" width="500">

                    </div>

Explicación:

class: Define una clase para aplicar estilos CSS
id: Identificador único para un elemento
href: Especifica la URL de un enlace
src: Define la fuente de medios externos

Prueba los atributos:

□️ Imágenes y Multimedia

HTML5 incluye soporte nativo para multimedia:

                    <!-- Imágenes -->

                    <img src="foto.jpg" alt="Descripción" width="300">

                    <!-- Audio -->

                    <audio controls>

                      <source src="audio.mp3" type="audio/mp3">

                    </audio>

                    <!-- Video -->

                    <video width="320" height="240" controls>

                      <source src="video.mp4" type="video/mp4">

                    </video>

Ejemplo de imagen:

□ Formularios

Los formularios permiten interactuar con los usuarios:

                    <form action="/procesar" method="post">

                      <label for="nombre">Nombre:</label>

                      <input type="text" id="nombre" name="nombre">

                      <label for="email">Email:</label>

                      <input type="email" id="email" name="email">

                      <input type="submit" value="Enviar">

                    </form>

Formulario de ejemplo:

□ Divisiones y Etiquetas Especiales

Elementos para organizar el contenido semánticamente:

                    <!-- Elementos de división -->

                    <div>Contenedor genérico</div>

                    <span>Contenedor en línea</span>

                    <!-- Elementos semánticos -->

                    <header>Encabezado</header>

                    <nav>Navegación</nav>

                    <main>Contenido principal</main>

                    <section>Sección</section>

                    <article>Artículo</article>

                    <footer>Pie de página</footer>

Estructura semántica:

Header

Nav

Main Content

Section

Footer