Curso de Desarrollo Web con Django y React

HTML

Html5

La estructura semántica de HTML5 es una de las características más importantes que lo distingue de versiones anteriores de HTML.

Permite a los desarrolladores web crear páginas más accesibles y fáciles de entender para los motores de búsqueda y los usuarios.

Desarrollo del Tema 📚

Estructura y Semántica de Html5
Estructura Basica
Etiquetas Semanticas en Html5
Elemento <head> y metadatos
Elemento <body>
Listas y tablas
Formularios y elementos de entrada

Estructura y Semántica de HTML5

La estructura semántica de HTML5 es una de las características más importantes que lo distingue de versiones anteriores de HTML. Permite a los desarrolladores web crear páginas más accesibles y fáciles de entender para los motores de búsqueda y los usuarios.

Estructura Básica

La estructura básica de un documento HTML5 es la siguiente:


              <!DOCTYPE html>
              <html>
                <head>
                  <title>Título de la página</title>
                </head>
                <body>
                  <h1>Título principal</h1>
                  <p>Párrafo de texto.</p>
                </body>
              </html>

Etiquetas Semánticas en HTML5

HTML5 introduce una serie de etiquetas semánticas que permiten a los desarrolladores web crear páginas más accesibles y fáciles de entender para los motores de búsqueda y los usuarios.

<header>
<nav>
<main>
<article>

<section>
<aside>
<footer>

Elemento <head> y metadatos

El elemento <head> de un documento HTML5 contiene metadatos sobre la página, como el título, la codificación de caracteres, la descripción y las palabras clave.


              <head>
                <title>Título de la página</title>
                <meta charset="UTF-8">
                <meta name="description" content="Descripción de la página">
                <meta name="keywords" content="Palabras clave de la página">
              </head>

Elemento <body>

El elemento <body> de un documento HTML5 contiene el contenido de la página, como títulos, párrafos, imágenes, enlaces, listas, tablas, formularios, etc.


              <body>
                <h1>Título principal</h1>
                <p>Párrafo de texto.</p>
                <img src="imagen.jpg" alt="Descripción de la imagen">
                <a href="enlace.html">Enlace</a>
                <ul>
                  <li>Elemento de lista 1</li>
                  <li>Elemento de lista 2</li>
                </ul>
                <table>
                  <tr>
                    <td>Celda 1</td>
                    <td>Celda 2</td>
                  </tr>
                </table>
                <form>
                  <input type="text" name="nombre">
                  <input type="submit" value="Enviar">
                </form>
              </body>

Listas y Tablas

HTML5 permite a los desarrolladores web crear listas y tablas de forma sencilla y semántica.


              <ul>
                <li>Elemento de lista 1</li>
                <li>Elemento de lista 2</li>
              </ul>
              <table>
                <tr>
                  <td>Celda 1</td>
                  <td>Celda 2</td>
                </tr>
              </table>

Formularios y Elementos de Entrada

HTML5 permite a los desarrolladores web crear formularios y elementos de entrada de forma sencilla y semántica.


              <form>
                <input type="text" name="nombre">
                <input type="submit" value="Enviar">
              </form>

Formularios y Elementos de Entrada

HTML5 permite a los desarrolladores web crear formularios y elementos de entrada de forma sencilla y semántica.


              <form>
                <input type="text" name="nombre">
                <input type="submit" value="Enviar">
              </form>

¡Gracias!

Facilitador: Diego Saavedra

Correo: dsaavedra@codingsacademy.com