Formato de Texto HTML: Estructura Contenido Web

Introducción

¡Bienvenido al laboratorio de formato de texto HTML! En esta sesión práctica, aprenderá a estructurar y formatear texto en una página web utilizando etiquetas HTML fundamentales. El texto formateado correctamente es crucial para crear contenido web legible, accesible y bien organizado.

Trabajará con un único archivo HTML, index.html, y aprenderá a utilizar las siguientes etiquetas:

<h1>: Para encabezados principales.
<p>: Para párrafos.
<strong>: Para dar al texto una gran importancia, que normalmente se muestra en negrita.
<em>: Para enfatizar texto, que normalmente se muestra en cursiva.
<br>: Para insertar un salto de línea.

A lo largo del laboratorio, podrá ver sus cambios en tiempo real guardando el archivo y visualizándolo en la pestaña "Web 8080" de su espacio de trabajo.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 86%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Añadir etiqueta h1 para el título principal

En este paso, añadirá un título principal a su página web. En HTML, los encabezados se definen con las etiquetas <h1> a <h6>. <h1> define el encabezado más importante y se utiliza típicamente para el título principal de una página.

Primero, abra el archivo index.html ubicado en el directorio ~/project utilizando el explorador de archivos en el lado izquierdo del WebIDE.

Ahora, añada una etiqueta <h1> dentro de la sección <body> de su archivo index.html. Reemplace el comentario  con la siguiente línea de código:

<h1>Welcome to My Web Page</h1>

Su sección <body> debería verse ahora así:

<body>
  <h1>Welcome to My Web Page</h1>
</body>

Después de añadir el código, guarde el archivo (Ctrl+S o Cmd+S). Para ver el resultado, haga clic en la pestaña "Web 8080" en la parte superior de la interfaz. Debería ver su encabezado mostrado en la página.

Insertar etiqueta p para texto de párrafo

En este paso, añadirá un párrafo de texto debajo de su encabezado. La etiqueta <p> se utiliza para definir un párrafo en HTML. Los navegadores añaden automáticamente un espacio en blanco (un margen) antes y después de un párrafo.

En el archivo index.html, añada una nueva línea después de su etiqueta <h1> e inserte la siguiente etiqueta <p>:

<p>
  This is a paragraph of text. It contains some introductory information about
  this page. HTML is great for structuring content, and this paragraph is an
  example of that. It also contains some important information.
</p>

Su sección <body> ahora debería contener tanto el encabezado como el nuevo párrafo:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some important information.
  </p>
</body>

Guarde el archivo index.html y actualice la pestaña "Web 8080" para ver el párrafo recién añadido mostrado debajo del encabezado.

Usar etiqueta strong para texto en negrita

En este paso, aprenderá cómo hacer que el texto aparezca en negrita. La etiqueta <strong> se utiliza para indicar que el texto tiene una importancia, seriedad o urgencia fuerte. Los navegadores suelen renderizar el contenido dentro de una etiqueta <strong> en negrita.

Modifiquemos el párrafo que añadió en el paso anterior para resaltar la frase "important information". Envuelva esta frase con las etiquetas <strong> y </strong>.

Modifique la etiqueta <p> en su archivo index.html para que se vea así:

<p>
  This is a paragraph of text. It contains some introductory information about
  this page. HTML is great for structuring content, and this paragraph is an
  example of that. It also contains some <strong>important information</strong>.
</p>

El <body> completo de su archivo debería ser ahora:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some
    <strong>important information</strong>.
  </p>
</body>

Guarde el archivo y compruebe la pestaña "Web 8080". Notará que el texto "important information" ahora está en negrita.

Aplicar etiqueta em para texto en cursiva

En este paso, aprenderá cómo enfatizar texto, que normalmente se muestra en cursiva. La etiqueta <em> (abreviatura de "emphasis" o énfasis) se utiliza para este propósito. Indica que el texto encerrado debe ser acentuado o enfatizado.

Añadamos un nuevo párrafo que incluya texto enfatizado. Añada el siguiente código debajo de su párrafo existente en index.html:

<p>
  You can also use other tags to format text. For example, the em tag is used
  for <em>emphasized</em> text.
</p>

La sección <body> de su archivo debería verse ahora así:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some
    <strong>important information</strong>.
  </p>
  <p>
    You can also use other tags to format text. For example, the em tag is used
    for <em>emphasized</em> text.
  </p>
</body>

Guarde el archivo y vea la pestaña "Web 8080". Verá un nuevo párrafo, y la palabra "emphasized" estará en cursiva.

Insertar etiqueta br para saltos de línea

En este paso, aprenderá cómo forzar un salto de línea dentro de un bloque de texto. La etiqueta <br> inserta un único salto de línea. Es una etiqueta vacía, lo que significa que no tiene etiqueta de cierre.

Añadamos un salto de línea en medio del segundo párrafo que creó. Esto es útil cuando desea iniciar una nueva línea sin iniciar un nuevo párrafo.

Modifique la segunda etiqueta <p> en su archivo index.html para incluir una etiqueta <br>:

<p>
  You can also use other tags to format text. <br />For example, the em tag is
  used for <em>emphasized</em> text.
</p>

El contenido final de su <body> debería ser:

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some
    <strong>important information</strong>.
  </p>
  <p>
    You can also use other tags to format text. <br />For example, the em tag is
    used for <em>emphasized</em> text.
  </p>
</body>

Guarde el archivo y actualice la pestaña "Web 8080". Verá que el segundo párrafo ahora está dividido en dos líneas.

Resumen

¡Felicitaciones por completar el laboratorio! Ha aprendido con éxito los fundamentos del formato de texto HTML.

En este laboratorio, practicó el uso de:

<h1> para crear un encabezado principal.
<p> para estructurar el contenido en párrafos.
<strong> para dar al texto una gran importancia (negrita).
<em> para enfatizar texto (cursiva).
<br> para insertar saltos de línea.

Estas etiquetas son los bloques de construcción esenciales para crear contenido bien estructurado y legible en cualquier página web. Siga practicando y explorando otras etiquetas HTML para mejorar sus habilidades de desarrollo web.