msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1dc5586366'
${ noResults }
Web-Dev-For-Beginners/translations/es/3-terrarium/1-intro-to-html/assignment.md

4.2 KiB
Raw Blame History Escape

Asignación de Práctica HTML: Crear un Modelo de Blog

Objetivo

Diseñar y codificar manualmente la estructura HTML para la página principal de un blog personal. Este ejercicio te ayudará a practicar HTML semántico, planificación de diseño y organización de código.

Instrucciones

  1. Diseña el Modelo de tu Blog

    • Haz un boceto visual de la página principal de tu blog. Incluye secciones clave como encabezado, navegación, contenido principal, barra lateral y pie de página.
    • Puedes usar papel y escanear tu boceto, o utilizar herramientas digitales (por ejemplo, Figma, Adobe XD, Canva o incluso PowerPoint).

  2. Identifica los Elementos HTML

    • Haz una lista de los elementos HTML que planeas usar para cada sección (por ejemplo, <header>, <nav>, <main>, <article>, <aside>, <footer>, <section>, <h1>–<h6>, <p>, <img>, <ul>, <li>, <a>, etc.).

  3. Escribe el Código HTML

    • Codifica manualmente el HTML para tu modelo. Enfócate en la estructura semántica y las mejores prácticas.
    • Incluye al menos 10 elementos HTML distintos.
    • Agrega comentarios para explicar tus elecciones y estructura.

  4. Entrega tu Trabajo

    • Sube tu boceto/modelo y tu archivo HTML.
    • Opcionalmente, proporciona una breve reflexión (2–3 oraciones) sobre tus decisiones de diseño.

Rúbrica

Criterios Sobresaliente Adecuado Necesita Mejorar
Modelo Visual Modelo claro y detallado con secciones etiquetadas y diseño bien pensado Modelo básico con algunas secciones etiquetadas Modelo mínimo o poco claro; carece de etiquetas en las secciones
Elementos HTML Usa 10+ elementos HTML semánticos; demuestra comprensión de estructura y mejores prácticas Usa 5–9 elementos HTML; algo de estructura semántica Usa menos de 5 elementos; carece de estructura semántica
Calidad del Código Código bien organizado, legible y con comentarios; sigue los estándares HTML Código mayormente organizado; pocos comentarios Código desorganizado; carece de comentarios
Reflexión Reflexión profunda sobre las decisiones de diseño y los desafíos Reflexión básica Sin reflexión o carece de relevancia

Consejos

  • Usa etiquetas HTML semánticas para mejorar la accesibilidad y el SEO.
  • Organiza tu código con indentación y comentarios.
  • Consulta la Referencia de Elementos HTML de MDN para orientación.
  • Piensa en cómo tu diseño podría ampliarse o estilizarse en futuras asignaciones.

Descargo de responsabilidad:
Este documento ha sido traducido utilizando el servicio de traducción automática Co-op Translator. Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.