Investigar los elementos de HTML5 para formar la estructura general de documentos:
DOM (Document Object Model) y Etiquetas de presentación.
Elementos HTML5 para la Estructura General de Documentos:
<!DOCTYPE>: Define la versión de HTML utilizada en el documento.
<html>: Define el inicio y el final del documento HTML.
<head>: Contiene metadatos del documento, como el título, la codificación de caracteres y enlaces a hojas de estilo y scripts.
<title>: Define el título del documento, que aparece en la barra de título del navegador.
<meta>: Proporciona metadatos adicionales sobre el documento, como la descripción, las palabras clave y la autoría. También se utiliza para especificar la codificación de caracteres.
<link>: Se utiliza para enlazar el documento HTML con hojas de estilo externas, iconos de página, fuentes y otros recursos.
<style>: Contiene reglas de estilo CSS que se aplican al documento.
<script>: Define scripts JavaScript que se ejecutan en el documento.
<body>: Contiene el contenido visible del documento, como texto, imágenes, enlaces y otros elementos HTML.
DOM (Document Object Model):
El DOM es una representación jerárquica de la estructura de un documento HTML, XML o XHTML, que define la manera en que los programas pueden acceder y manipular los elementos de un documento. En JavaScript, por ejemplo, el DOM proporciona una interfaz estándar para acceder, modificar, agregar o eliminar elementos y contenido de un documento HTML.
Etiquetas de Presentación:
Las etiquetas de presentación en HTML5 son elementos que se utilizan para dar formato y estructura visual al contenido de una página web. Algunas de las etiquetas de presentación más comunes son:
- <h1> - <h6>: Define encabezados de diferentes niveles de importancia.
- <p>: Define un párrafo de texto.
- <ul> y <ol>: Definen listas sin ordenar (viñetas) y listas ordenadas (números o letras).
- <li>: Define un elemento de lista dentro de <ul> o <ol>.
- <br>: Inserta un salto de línea.
- <hr>: Inserta una línea horizontal.
- <strong> y <em>: Aplican negrita y cursiva, respectivamente, al texto.
Investigar los elementos de HTML5 para formar la estructura general de documentos:
Etiquetas de estructura y Metadatos.
Etiquetas de Estructura en HTML5:
<!DOCTYPE>: Define la versión de HTML utilizada en el documento.
<html>: Define el inicio y el final del documento HTML.
<head>: Contiene metadatos del documento, como el título, la codificación de caracteres y enlaces a hojas de estilo y scripts.
<title>: Define el título del documento, que aparece en la barra de título del navegador.
<meta>: Proporciona metadatos adicionales sobre el documento, como la descripción, las palabras clave y la autoría. También se utiliza para especificar la codificación de caracteres.
<link>: Se utiliza para enlazar el documento HTML con hojas de estilo externas, iconos de página, fuentes y otros recursos.
<style>: Contiene reglas de estilo CSS que se aplican al documento.
<script>: Define scripts JavaScript que se ejecutan en el documento.
<body>: Contiene el contenido visible del documento, como texto, imágenes, enlaces y otros elementos HTML.
Etiquetas de Metadatos en HTML5:
Las etiquetas de metadatos se utilizan dentro de la sección <head> del documento para proporcionar información adicional sobre el contenido y el comportamiento del mismo. Algunas etiquetas de metadatos comunes incluyen:
- <meta charset="utf-8">: Especifica la codificación de caracteres del documento como UTF-8, que admite una amplia gama de caracteres Unicode.
- <meta name="description" content="Descripción del contenido">: Proporciona una breve descripción del contenido de la página. Es importante para los motores de búsqueda y redes sociales.
- <meta name="keywords" content="palabras clave, separadas, por, comas">: Define las palabras clave relacionadas con el contenido de la página. Ayuda a los motores de búsqueda a indexar y clasificar el contenido.
- <meta name="author" content="Nombre del autor">: Especifica el autor del documento.
- <meta http-equiv="refresh" content="5; url=http://example.com/">: Redirige automáticamente a otra página después de un cierto período de tiempo (en este caso, 5 segundos).
Investigar los componentes y sintaxis de HTML5 en la creación de formularios.
Componentes de un Formulario HTML5:
<form>: Define el inicio y el final de un formulario en HTML5. Todos los elementos del formulario deben estar contenidos dentro de esta etiqueta.
<input>: Se utiliza para crear controles de entrada en un formulario, como campos de texto, casillas de verificación, botones de radio, botones de envío, etc.
<textarea>: Crea un área de texto multilínea para que los usuarios ingresen texto largo o comentarios.
<select>: Define un menú desplegable (lista de selección) donde los usuarios pueden seleccionar una opción de una lista.
<option>: Define una opción dentro de un elemento <select>. Puede tener atributos como value para especificar el valor asociado con la opción y selected para indicar que la opción está seleccionada por defecto.
<label>: Proporciona una etiqueta descriptiva para un elemento de formulario. Mejora la accesibilidad y la usabilidad al asociar texto descriptivo con elementos de formulario.
<button>: Crea un botón en el formulario que los usuarios pueden hacer clic para enviar los datos del formulario.
<fieldset> y <legend>: <fieldset> agrupa elementos de formulario relacionados y <legend> proporciona una leyenda descriptiva para el grupo de elementos.
<datalist> y <option>: <datalist> proporciona una lista de opciones predefinidas para un campo de entrada <input>. <option> dentro de <datalist> define las opciones que se muestran al usuario.
Sintaxis de un Formulario HTML5:
Un formulario HTML5 típico sigue la siguiente estructura básica:
<form action="procesar.php" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" rows="4" cols="50"></textarea><br>
<input type="submit" value="Enviar">
</form>
action: Especifica la URL del script que procesará los datos del formulario cuando se envíe.
method: Define el método HTTP utilizado para enviar los datos del formulario al servidor (generalmente GET o POST).
for: Asocia una etiqueta <label> con un control de formulario mediante su atributo id.
type: Especifica el tipo de entrada del control de formulario (text, email, checkbox, radio, submit, etc.).
name: Define el nombre del control de formulario, que se utilizará para identificar el dato enviado al servidor.
required: Indica que un campo de entrada es obligatorio y no puede estar vacío antes de enviar el formulario.
