{"id":1999,"date":"2023-11-25T09:00:52","date_gmt":"2023-11-25T12:00:52","guid":{"rendered":"https:\/\/stackcodelab.com\/blog\/?p=1999"},"modified":"2023-11-25T09:00:53","modified_gmt":"2023-11-25T12:00:53","slug":"capitulo-2-etiquetas-html5-esenciales","status":"publish","type":"post","link":"https:\/\/stackcodelab.com\/blog\/capitulo-2-etiquetas-html5-esenciales\/","title":{"rendered":"Cap\u00edtulo 2: Etiquetas HTML5 Esenciales"},"content":{"rendered":"\n

Secci\u00f3n 2.1: Etiquetas de Encabezado<\/strong><\/p>\n\n\n\n

Las etiquetas de encabezado en HTML5 son fundamentales para estructurar y dar jerarqu\u00eda a tu contenido. Van desde <h1><\/code> (encabezado de nivel 1) hasta <h6><\/code> (encabezado de nivel 6), siendo <h1><\/code> el m\u00e1s importante y <h6><\/code> el menos importante. Estas etiquetas se utilizan para resaltar t\u00edtulos y subt\u00edtulos en tu p\u00e1gina web. Aqu\u00ed tienes un ejemplo: <h1>Este es un encabezado de nivel 1<\/h1><h2>Este es un encabezado de nivel 2<\/h2><h3>Este es un encabezado de nivel 3<\/h3>
<\/strong><\/p>\n\n\n\n

Secci\u00f3n 2.2: Listas y Enlaces<\/strong><\/p>\n\n\n\n

Las listas y enlaces son componentes clave para la navegaci\u00f3n y organizaci\u00f3n del contenido en tu p\u00e1gina web.<\/p>\n\n\n\n

Listas no ordenadas:<\/strong> Se crean con la etiqueta <ul><\/code> y se componen de elementos de lista <li><\/code>. Aqu\u00ed tienes un ejemplo: <ul>    <li>Elemento 1<\/li>    <li>Elemento 2<\/li>    <li>Elemento 3<\/li><\/ul><\/p>\n\n\n\n

Listas ordenadas:<\/strong> Utiliza la etiqueta <ol><\/code> para crear listas ordenadas. Al igual que las listas no ordenadas, tambi\u00e9n usas <li><\/code> para los elementos de lista. Ejemplo: <ol>    <li>Primer elemento<\/li>    <li>Segundo elemento<\/li>    <li>Tercer elemento<\/li><\/ol><\/p>\n\n\n\n

Enlaces:<\/strong> Los enlaces se crean con la etiqueta <a><\/code>. Para que un enlace funcione, debes proporcionar el atributo \u00abhref\u00bb con la URL de destino. Aqu\u00ed tienes un ejemplo: <a href=\u00bbhttps:\/\/www.ejemplo.com\u00bb>Visitar Ejemplo.com<\/a><\/p>\n\n\n\n

Secci\u00f3n 2.3: Ejercicios Resueltos<\/strong><\/p>\n\n\n\n

Encabezados y T\u00edtulos:<\/strong> Crea una p\u00e1gina HTML que contenga un t\u00edtulo principal (usando <h1><\/code>) y tres subt\u00edtulos (usando <h2><\/code>, <h3><\/code>, y <h4><\/code>) que describan tus pasatiempos o intereses.<\/p>\n\n\n\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>Mis Pasatiempos<\/title>\r\n<\/head>\r\n<body>\r\n    <h1>Mis Pasatiempos Favoritos<\/h1>\r\n    <h2>Pintura al \u00f3leo<\/h2>\r\n    <h3>Senderismo en la monta\u00f1a<\/h3>\r\n    <h4>Cocina internacional<\/h4>\r\n<\/body>\r\n<\/html>\r<\/code><\/pre>\n\n\n\n
Listas de Compras:<\/strong>\u00a0Crea una lista no ordenada que contenga cinco elementos de tu lista de compras en una tienda de comestibles.<\/p>\n\n\n\n
<ul>\r\n    <li>Manzanas<\/li>\r\n    <li>Leche<\/li>\r\n    <li>Pan integral<\/li>\r\n    <li>Huevos<\/li>\r\n    <li>Verduras frescas<\/li>\r\n<\/ul>\r<\/code><\/pre>\n\n\n\n
Sitio Web de Recetas:<\/strong>\u00a0Crea una lista ordenada de tres recetas de cocina con enlaces a p\u00e1ginas web externas. Utiliza la etiqueta\u00a0<a><\/code>\u00a0para enlazar a sitios web de recetas.<\/p>\n\n\n\n
<ol>\r\n    <li><a href=\"https:\/\/www.receta1.com\">Receta de Sopa de Tomate<\/a><\/li>\r\n    <li><a href=\"https:\/\/www.receta2.com\">Receta de Risotto de Champi\u00f1ones<\/a><\/li>\r\n    <li><a href=\"https:\/\/www.receta3.com\">Receta de Tarta de Manzana<\/a><\/li>\r\n<\/ol>\r<\/code><\/pre>\n\n\n\n
Estos ejercicios te permitir\u00e1n practicar el uso de etiquetas de encabezado, listas y enlaces, componentes fundamentales para la estructura y la navegaci\u00f3n en una p\u00e1gina web HTML5.<\/p>\n\n\n\n
Secci\u00f3n 2.4: Im\u00e1genes y Multimedia<\/strong><\/p>\n\n\n\n
HTML5 ofrece una variedad de elementos para mostrar im\u00e1genes y multimedia en una p\u00e1gina web. Aqu\u00ed se detallan algunos de los elementos m\u00e1s comunes:<\/p>\n\n\n\n
Elemento de Imagen <\/strong><img><\/strong><\/code>:<\/strong> Este elemento se utiliza para mostrar im\u00e1genes en una p\u00e1gina web. Debes proporcionar el atributo \u00absrc\u00bb con la URL de la imagen que deseas mostrar. Ejemplo:<\/p>\n\n\n\n
<img src=\"imagen.jpg\" alt=\"Descripci\u00f3n de la imagen\"><\/code><\/pre>\n\n\n\n
Elemento de Audio\u00a0<\/strong><audio><\/strong><\/code>:<\/strong>\u00a0Permite la reproducci\u00f3n de audio en la p\u00e1gina web. Utiliza el elemento\u00a0<source><\/code>\u00a0dentro de\u00a0<audio><\/code>\u00a0para definir diferentes formatos de audio para la compatibilidad con varios navegadores. Ejemplo:<\/p>\n\n\n\n
<audio controls>\r\n    <source src=\"cancion.mp3\" type=\"audio\/mpeg\">\r\n    <source src=\"cancion.ogg\" type=\"audio\/ogg\">\r\n    Tu navegador no admite la reproducci\u00f3n de audio.\r\n<\/audio>\r<\/code><\/pre>\n\n\n\n
Elemento de Video\u00a0<\/strong><video><\/strong><\/code>:<\/strong>\u00a0Similar al elemento de audio, pero se utiliza para mostrar videos. Debes proporcionar varios formatos de video para la compatibilidad cruzada. Ejemplo:<\/p>\n\n\n\n
<video controls width=\"400\" height=\"300\">\r\n    <source src=\"video.mp4\" type=\"video\/mp4\">\r\n    <source src=\"video.webm\" type=\"video\/webm\">\r\n    Tu navegador no admite la reproducci\u00f3n de video.\r\n<\/video>\r<\/code><\/pre>\n\n\n\n
Secci\u00f3n 2.5: Formularios y Entradas de Usuario<\/strong><\/p>\n\n\n\n
Los formularios son fundamentales para la recopilaci\u00f3n de datos y la interacci\u00f3n con los usuarios en una p\u00e1gina web. HTML5 proporciona una variedad de elementos para crear formularios:<\/p>\n\n\n\n
Elemento de Formulario <\/strong><form><\/strong><\/code>:<\/strong> Este elemento se utiliza para crear un formulario que env\u00eda datos a un servidor. Puedes especificar el m\u00e9todo de env\u00edo, como GET o POST, y la URL del servidor de destino.<\/p>\n\n\n\n
<form action=\"procesar.php\" method=\"post\">\r\n    <!-- Campos del formulario se agregan aqu\u00ed -->\r\n<\/form>\r<\/code><\/pre>\n\n\n\n
Elemento de Entrada de Texto\u00a0<\/strong><input><\/strong><\/code>:<\/strong>\u00a0Permite a los usuarios ingresar texto. Puedes usar el atributo \u00abtype\u00bb para especificar el tipo de entrada, como texto, contrase\u00f1a, email, etc.<\/p>\n\n\n\n
<input type=\"text\" name=\"nombre\" placeholder=\"Tu nombre\"><\/code><\/pre>\n\n\n\n
Elemento de \u00c1rea de Texto\u00a0<\/strong><textarea><\/strong><\/code>:<\/strong>\u00a0Proporciona un \u00e1rea de texto de m\u00faltiples l\u00edneas para que los usuarios escriban comentarios m\u00e1s largos.<\/p>\n\n\n\n
<textarea name=\"comentario\" rows=\"4\" cols=\"50\">Escribe tu comentario aqu\u00ed.<\/textarea><\/code><\/pre>\n\n\n\n
Elemento de Bot\u00f3n\u00a0<\/strong><button><\/strong><\/code>:<\/strong>\u00a0Se utiliza para crear botones en formularios que pueden enviar o restablecer datos.<\/p>\n\n\n\n
<button type=\"submit\">Enviar<\/button>\r\n<button type=\"reset\">Restablecer<\/button>\r<\/code><\/pre>\n\n\n\n
Secci\u00f3n 2.6: Ejercicios Resueltos<\/strong><\/p>\n\n\n\n
Mostrar una Imagen:<\/strong> Crea una p\u00e1gina web que muestre una imagen de tu elecci\u00f3n utilizando la etiqueta <img><\/code>. Aseg\u00farate de incluir el atributo \u00absrc\u00bb con la URL de la imagen y proporciona una descripci\u00f3n usando el atributo \u00abalt\u00bb.<\/p>\n\n\n\n
<img src=\"imagen.jpg\" alt=\"Una hermosa imagen\"><\/code><\/pre>\n\n\n\n
Reproductor de Audio:<\/strong>\u00a0Agrega un reproductor de audio a tu p\u00e1gina web. Utiliza la etiqueta\u00a0<audio><\/code>\u00a0y proporciona dos fuentes de audio diferentes, una en formato MP3 y otra en formato OGG.<\/p>\n\n\n\n
<audio controls>\r\n    <source src=\"cancion.mp3\" type=\"audio\/mpeg\">\r\n    <source src=\"cancion.ogg\" type=\"audio\/ogg\">\r\n    Tu navegador no admite la reproducci\u00f3n de audio.\r\n<\/audio>\r<\/code><\/pre>\n\n\n\n
Formulario de Contacto:<\/strong>\u00a0Crea un formulario de contacto que incluya campos para el nombre, el correo electr\u00f3nico y un mensaje. Utiliza los elementos <form><\/code>, <input><\/code>, y <textarea><\/code>.<\/p>\n\n\n\n
<form action=\"procesar.php\" method=\"post\">\r\n    <input type=\"text\" name=\"nombre\" placeholder=\"Tu nombre\">\r\n    <input type=\"email\" name=\"email\" placeholder=\"Tu correo electr\u00f3nico\">\r\n    <textarea name=\"mensaje\" rows=\"4\" cols=\"50\" placeholder=\"Escribe tu mensaje aqu\u00ed.\"><\/textarea>\r\n    <button type=\"submit\">Enviar<\/button>\r\n<\/form>\r<\/code><\/pre>\n\n\n\n
Botones en Formulario: <\/strong>Agrega botones \u00abEnviar\u00bb y \u00abRestablecer\u00bb a tu formulario. Utiliza la etiqueta <button><\/code>.<\/p>\n\n\n\n
<button type=\"submit\">Enviar<\/button>\r\n<button type=\"reset\">Restablecer<\/button>\r<\/code><\/pre>\n\n\n\n
Estos ejercicios te ayudar\u00e1n a comprender c\u00f3mo incorporar im\u00e1genes, audio y video, as\u00ed como la creaci\u00f3n de formularios con entradas de usuario en tus p\u00e1ginas web.<\/p>\n","protected":false},"excerpt":{"rendered":"
Secci\u00f3n 2.1: Etiquetas de Encabezado Las etiquetas de encabezado en HTML5 son fundamentales para estructurar y dar jerarqu\u00eda a tu contenido. Van desde <h1> (encabezado de nivel 1) hasta <h6> (encabezado de nivel 6), siendo <h1> el m\u00e1s importante y <h6> el menos importante. Estas etiquetas se utilizan para resaltar t\u00edtulos y subt\u00edtulos en tu p\u00e1gina web. Aqu\u00ed tienes un ejemplo: <h1>Este es […]<\/p>\n","protected":false},"author":1,"featured_media":2000,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[39],"tags":[],"class_list":["post-1999","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-y-otras-hierbas"],"uagb_featured_image_src":{"full":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Etiquetas-HTML5-Esenciales.jpg",1280,896,false],"thumbnail":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Etiquetas-HTML5-Esenciales-150x150.jpg",150,150,true],"medium":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Etiquetas-HTML5-Esenciales-300x210.jpg",300,210,true],"medium_large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Etiquetas-HTML5-Esenciales-768x538.jpg",768,538,true],"large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Etiquetas-HTML5-Esenciales-1024x717.jpg",1024,717,true],"1536x1536":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Etiquetas-HTML5-Esenciales.jpg",1280,896,false],"2048x2048":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Etiquetas-HTML5-Esenciales.jpg",1280,896,false]},"uagb_author_info":{"display_name":"arquitecto","author_link":"https:\/\/stackcodelab.com\/blog\/author\/arquitecto\/"},"uagb_comment_info":0,"uagb_excerpt":"Secci\u00f3n 2.1: Etiquetas de Encabezado Las etiquetas de encabezado en HTML5 son fundamentales para estructurar y dar jerarqu\u00eda a tu contenido. Van desde <h1> (encabezado de nivel 1) hasta <h6> (encabezado de nivel 6), siendo <h1> el m\u00e1s importante y <h6> el menos importante. Estas etiquetas se utilizan para resaltar t\u00edtulos y subt\u00edtulos en tu p\u00e1gina web. Aqu\u00ed tienes un ejemplo: <h1>Este es…","_links":{"self":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1999","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/comments?post=1999"}],"version-history":[{"count":1,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1999\/revisions"}],"predecessor-version":[{"id":2001,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/1999\/revisions\/2001"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media\/2000"}],"wp:attachment":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media?parent=1999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/categories?post=1999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/tags?post=1999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}