Actividades en HTML Practica de codigos
1. La Estructura Fundamental (El Esqueleto)
Todo archivo HTML válido debe empezar con esta estructura base. Sin esto, el navegador no sabe qué tipo de documento está leyendo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título en la pestaña</title>
</head>
<body>
<!-- Todo el contenido visible va aquí -->
</body>
</html>
<!DOCTYPE html>: Declara que el documento utiliza HTML5.
<html>: La etiqueta raíz que envuelve todo el código.
<head>: Contiene metadatos, configuración técnica (como el conjunto de caracteres UTF-8 para tildes y eñes) y el título de la pestaña. No es visible en la página.
<body>: El lienzo blanco donde va todo el contenido visible para el usuario.
2. Textos y Jerarquía (El Contenido)
Enseñan a estructurar la información para que sea legible tanto para los usuarios como para los buscadores.
| Etiquetas | Nombre | Uso principal |
<h1> a <h6> | Encabezados / Títulos | Establecen la jerarquía visual y de contenido. <h1> es el título principal (solo debe haber uno por página), <h2> subtítulos, <h3> secciones, etc. |
| <p> | Párrafo | Agrupa bloques de texto corrido. |
<b> / <strong> | Negrita / Importancia | Destacan texto en negrita. <strong> añade peso semántico. |
<i> / <em> | Cursiva / Énfasis | Aplican formato itálico a un texto o cita. |
| <br> | Salto de línea | Fuerza un salto de línea dentro de un párrafo (etiqueta que no se cierra). |
3. Multimedia y Enlaces (La Interactividad)
Hacen que la web deje de ser un documento plano y se convierta en una experiencia hipertextual.
<a>(Anchor / Enlace):HTML<a href="https://www.google.com" target="_blank">Ir a Google</a>href: La URL de destino.target="_blank": Hace que el enlace se abra en una nueva pestaña.
<img>(Imagen):HTML<img src="foto.jpg" alt="Descripción de la imagen">src: La ruta o enlace a la imagen.alt: Texto alternativo esencial para accesibilidad (lectores de pantalla) y si la imagen no carga.
4. Listas y Agrupación (La Organización)
Sirven para estructurar conjuntos de datos de forma clara.
Listas desordenadas (
<ul>) y ordenadas (<ol>):Usa la etiqueta
<li>(List Item) para cada elemento individual.HTML<!-- Lista con viñetas --> <ul> <li>Elemento 1</li> <li>Elemento 2</li> </ul>Contenedores genéricos (
<div>y<span>):<div>: Contenedor en bloque. Sirve para agrupar secciones de HTML y aplicarles diseño con CSS.<span>: Contenedor en línea. Sirve para aislar un fragmento de texto dentro de un párrafo sin romper la línea.
5. Maquetación Semántica (Estructura Moderna)
En HTML5, en lugar de usar <div> para todo, se enseñan las etiquetas que describen el significado de cada parte de la página:
<header>: Cabecera principal (suele llevar el logo y el título).
<nav>: Menú o barra de navegación.
<main>: El contenido principal y único de esa página.
<section> y <article>: Bloques temáticos o entradas/tarjetas independientes.
<footer>: Pie de página (derechos de autor, redes sociales, contacto).
6. Formularios Básicos (Entrada de Datos)
La forma en que el usuario envía información a la página web.
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" placeholder="Escribe tu nombre">
<button type="submit">Enviar</button>
</form>
<form>: Envoltorio de los controles.
<input>: Control de entrada cuyo comportamiento cambia según el parámetro
type(text,email,password,number,date,checkbox).<button>: Botón ejecutor de acciones.
Comentarios
Publicar un comentario