HTML: Estructura básica
Cualquier documento HTML se puede dividir en varios componentes principales:
- El bloque
head, que contiene metainformación sobre nuestro sitio web. Los datos de este bloque no se muestran directamente en la página, sino que se utilizan para describirla, para conectar estilos y scripts. - El bloque
bodyes el lugar principal donde se construye el marcado HTML. Los datos en este bloque se procesarán y se mostrarán en el navegador.
El marcado más básico en HTML5 se ve así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Markup básico de HTML</title>
</head>
<body>
<h1>Code Basics</h1>
<p>Lecciones gratuitas de programación y HTML para principiantes</p>
</body>
</html>
Presta atención a la primera línea <!DOCTYPE html>. DOCTYPE (tipo de documento) es información de servicio para el navegador, donde se describe el estándar HTML que se debe procesar. El estándar actual HTML5 es compatible con todos los navegadores, por lo que es suficiente especificar en la primera línea del documento <!DOCTYPE html>, que indica que nuestro documento está marcado según el estándar HTML5.
A continuación, se abre la etiqueta de pareja <html> con el atributo lang="es". Es necesario especificar el idioma para los navegadores, especialmente si el sitio está dirigido a una audiencia masiva, incluyendo en el extranjero.
Para evitar errores, ambas construcciones descritas anteriormente se agregarán automáticamente por el navegador si no están presentes. En algunas situaciones, los navegadores pueden agregar líneas incorrectas que no desea, y en lugar de procesar la página según el estándar HTML5, el navegador procesará todo como HTML4, lo que puede causar muchos problemas, ya que los estándares antiguos pueden no conocer la existencia de muchas etiquetas, como <main>, <nav>, etc.
Tarea
Copia el marcado básico de HTML del ejemplo anterior. Dentro de la etiqueta <body>, inserta cualquier marcado. Prueba diferentes etiquetas de las que se han cubierto en cursos anteriores.
¿El ejercicio no pasa la prueba, qué debo hacer? 😶
Si te quedaste atascado, es el momento perfecto para hacer una pregunta en las "Discusiones".
* Asegúrate de incluir la salida de las pruebas. Sin ella, es casi imposible entender qué está mal, incluso si muestras tu código. Los programadores tienen dificultades para ejecutar el código en su mente, pero casi siempre es posible entender a dónde mirar a partir del error que recibiste.
Mi código funciona en mi entorno, pero no aquí 🤨
Las pruebas están diseñadas de manera que verifican la solución de diferentes maneras y con diferentes datos. A menudo, una solución funciona con ciertos datos de entrada pero no con otros. Para entender este punto, revisa la pestaña "Pruebas" y presta atención a los mensajes de error, que suelen contener pistas.
Mi código es diferente a la solución del profesor 🤔
Esto es normal 🙆. En programación, una tarea puede tener muchas soluciones diferentes. Si tu código pasa la prueba, cumple con los requisitos de la tarea.
En raras ocasiones, la solución puede estar ajustada para pasar las pruebas, pero esto suele ser evidente.
Leí la lección, pero no entendí nada 🙄
Crear materiales de aprendizaje comprensibles para todos es bastante difícil. Hacemos nuestro mejor esfuerzo, pero siempre hay margen para mejorar. Si encuentras material que no entiendes, describe el problema en las "Discusiones". Es ideal si puedes formular los aspectos que no entiendes en forma de preguntas. Por lo general, necesitamos unos días para hacer mejoras.
Por cierto, tú también puedes contribuir a mejorar los cursos: en la parte inferior hay un enlace al código fuente de las lecciones, que se puede modificar directamente en el navegador.