Aprendizaje activo: Añadir algunas características a un documento HTML
Si quieres escribir algo de HTML en tu ordenador local para experimentar, puedes:
- Copiar el ejemplo de la página HTML del punto anterior.
- Crear un archivo nuevo en un editor de texto.
- Pegar el código en el nuevo archivo de texto.
- Guardar el archivo como index.html.
Ahora puedes abrir este archivo en un navegador web para ver cómo se ve el código renderizado. Edita el código y actualiza el navegador para ver cuál es el resultado. En principio se verá algo así:
En este ejercicio, puedes editar el código en tu ordenador como se indica arriba, o puedes editarlo en la ventana editable que tienes a continuación (la ventana editable representa solo el contenido del elemento <body>, en este caso). Intenta reproducir los siguientes pasos:
- Justo debajo de la etiqueta de apertura <body>, añade un título principal para el documento. Este deberá estar dentro de una etiqueta de apertura <h1> y una etiqueta de cierre </h1>.
- Edita el contenido del párrafo e incluye algún texto sobre algo que te interese.
- Pon las palabras importantes dentro de etiquetas <strong> de apertura y </strong> de cierre para que destaquen en negrita.
- Añade un enlace a tu párrafo, como se ha explicado anteriormente en este mismo artículo.
- Agrega una imagen a tu documento. Colócala debajo del párrafo, como se explicó anteriormente en el artículo. Ganarás puntos extra si consigues enlazar a una imagen diferente (de tu propio ordenador o de cualquier otro lugar de la web).
Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente atascado, pulsa el botón Mostrar la solución para ver la solución.
Los espacios en blanco en HTML
En los ejemplos anteriores se han incluido espacios en blanco y saltos de línea en el código. Esto realmente no es necesario. Los dos siguientes fragmentos de código son equivalentes:
.png "carbon(38).png")
No importa cuántos espacios en blanco se utilicen (incluye tanto caracteres de espacio como saltos de línea) el intérprete de HTML reduce cada secuencia de espacio en blanco a un único espacio al interpretar el código. Entonces, ¿por qué utilizar espacios en blanco? La respuesta está en la legibilidad.
Es más fácil comprender lo que está sucediendo en tu código si lo tienes bien formateado. En nuestro HTML cada elemento anidado está sangrado dos espacios más con respecto al exterior. Depende de ti qué estilo de formato utilizas (cuántos espacios para cada nivel de sangría, por ejemplo) pero debes plantearte el uso de algún tipo de formato.