<!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</title>
<meta name="description" content="Esta es una página de ejemplo para aprender la estructura básica de HTML.">
</head>
<body>
<!-- Aquí va el contenido visible en la web -->
</body>
</html>
Explicación:
<!DOCTYPE html>: Indica que usamos HTML5.<html lang="es">: Elemento raíz, define el idioma del sitio.<head>: Contiene información no visible directamente, como el título, codificación, descripción, etc.<title>: Título que se muestra en la pestaña del navegador.<meta name="description">: Importante para SEO, describe de qué trata la página.<body>: Todo lo que el usuario ve.
2. Encabezados y párrafos
<h1><span class="ez-toc-section" id="Titulo_principal_de_la_pagina_H1"></span>Título principal de la página (H1)<span class="ez-toc-section-end"></span></h1>
<h2><span class="ez-toc-section" id="Subtitulo_o_seccion_H2"></span>Subtítulo o sección (H2)<span class="ez-toc-section-end"></span></h2>
<h3><span class="ez-toc-section" id="Subseccion_o_tema_especifico_H3"></span>Subsección o tema específico (H3)<span class="ez-toc-section-end"></span></h3>
<h4>Subsección o tema específico (H4)</>
<h5>Subsección o tema específico (H5)</h5>
<h6>Subsección o tema específico (H6)</h6>
<p>Este es un párrafo de texto. HTML permite agregar contenido de forma estructurada y clara.</p>
Reglas clave:
Solo debe haber un
<h1>por página.Usa los niveles siguientes (
h2ah6) para ordenar el contenido jerárquicamente.<p>define un párrafo de texto.
3. Formularios
Los formularios permiten recoger información del usuario. Ejemplo básico:
<h2><span class="ez-toc-section" id="Formulario_con_distintos_tipos_de_input"></span>Formulario con distintos tipos de input<span class="ez-toc-section-end"></span></h2>
<form action="/enviar" method="post">
<input type="text" name="nombre" placeholder="Nombre" >
<input type="email" name="email" placeholder="Correo electrónico" >
<input type="password" name="clave" placeholder="Contraseña" >
<input type="url" name="sitio_web" placeholder="Tu sitio web" >
<input type="color" name="color_favorito" value="#ff0000">
<input type="date" name="fecha_nacimiento">
<input type="number" name="edad" placeholder="Edad">
<input type="checkbox" name="acepta" required> Acepto los términos
<input type="radio" name="genero" value="hombre"> Hombre
<input type="radio" name="genero" value="mujer"> Mujer
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
<label id="apbct_label_id_2040" class="apbct_special_field"><input
class="apbct_special_field apbct__email_id__elementor_form"
name="apbct_email_id__elementor_form"
type="text" size="30" maxlength="200" autocomplete="off"
value=""
/></label></form>
Explicación:
<form>: Contenedor del formulario.action: A dónde se enviarán los datos.method="post": Se usa para enviar los datos de forma segura.<label>: Descripción del campo.<input>: Campo de entrada (texto, correo, etc).<textarea>: Área para textos más largos.required: Hace obligatorio llenar el campo antes de enviar.
4. Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registro de Estudiantes UPTM</title>
<meta name="description" content="Formulario básico en HTML para registrar estudiantes de la UPTM.">
</head>
<body>
<h1><span class="ez-toc-section" id="Bienvenidos_al_Portal_de_Registro"></span>Bienvenidos al Portal de Registro<span class="ez-toc-section-end"></span></h1>
<p>Utiliza este formulario para inscribirte como estudiante en nuestro sistema. Todos los campos son obligatorios.</p>
<h2><span class="ez-toc-section" id="Datos_personales"></span>Datos personales<span class="ez-toc-section-end"></span></h2>
<form action="/registro" method="post">
<p>
<strong>Nombre completo:</strong><br>
<input type="text" name="nombre" placeholder="Ej: Juan Pérez" required>
</p>
<p>
<strong>Correo electrónico:</strong><br>
<input type="email" name="email" placeholder="ejemplo@correo.com" required>
</p>
<p>
<strong>Contraseña:</strong><br>
<input type="password" name="password" placeholder="Crea una contraseña segura" required>
</p>
<p>
<strong>Fecha de nacimiento:</strong><br>
<input type="date" name="fecha_nacimiento" required>
</p>
<p>
<strong>Género:</strong><br>
<input type="radio" name="genero" value="masculino" required> Masculino
<input type="radio" name="genero" value="femenino"> Femenino
<input type="radio" name="genero" value="otro"> Otro
</p>
<p>
<strong>Color favorito:</strong><br>
<input type="color" name="color_favorito">
</p>
<p>
<strong>¿Aceptas los términos y condiciones?</strong><br>
<input type="checkbox" name="acepta" required> Sí, acepto
</p>
<p>
<input type="submit" value="Registrarse">
</p>
<label id="apbct_label_id_2040" class="apbct_special_field"><input
class="apbct_special_field apbct__email_id__elementor_form"
name="apbct_email_id__elementor_form"
type="text" size="30" maxlength="200" autocomplete="off"
value=""
/></label></form>
<h2><span class="ez-toc-section" id="%C2%BFPor_que_registrarte"></span>¿Por qué registrarte?<span class="ez-toc-section-end"></span></h2>
<p>Al registrarte tendrás acceso a materiales exclusivos, podrás participar en clases en línea y formar parte de nuestra comunidad de aprendizaje.</p>
</body>
</html>
