Dominando el Formateo de Código HTML

Introducción

En el desarrollo web, a veces necesitamos mostrar contenido relacionado con la programación o con la informática en nuestras páginas web. Cuando queremos mostrar términos específicos como el nombre de una función o el nombre de una variable, podemos usar la etiqueta <code> para encerrar los mismos. Esta etiqueta cambia la familia de fuentes del texto encerrado a una fuente de ancho fijo como courier.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haz clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puedes actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70725{{"Código de Computadora HTML"}} html/text_head -.-> lab-70725{{"Código de Computadora HTML"}} html/doc_flow -.-> lab-70725{{"Código de Computadora HTML"}} html/inter_elems -.-> lab-70725{{"Código de Computadora HTML"}} html/custom_attr -.-> lab-70725{{"Código de Computadora HTML"}} end

Agregar la etiqueta `<code>`

Primero, crea un archivo index.html en tu sistema local y úbrelo con un editor de código de tu elección.

A continuación, agreguemos la etiqueta <code> a tu archivo HTML. La sintaxis de esta etiqueta es sencilla. Tiene una etiqueta de inicio y una de fin que encierran el texto que quieres mostrar.

<body>
  <!-- Agregar la etiqueta <code> -->
  <p>Este es un ejemplo de uso de la etiqueta <code>code</code> en HTML.</p>
</body>

En el bloque de código anterior, encerramos el término code dentro de la etiqueta <code>. Esto hace que el texto encerrado aparezca en una fuente de ancho fijo.

Agregar la etiqueta

 para mostrar código en múltiples líneas

Si necesitas mostrar código de programación en múltiples líneas, utiliza la etiqueta <pre> junto con la etiqueta <code>. Veamos cómo funciona agregando el siguiente código a tu archivo index.html.

<body>
  <!-- Usando la etiqueta <pre> con la etiqueta <code> -->
  <pre>
      <code>
         function multiply(a, b) {
            return a * b;
         }
         // Llamar a la función
         multiply(2, 3);
      </code>
   </pre>
</body>

En este bloque de código, usamos la etiqueta <pre> para indicar que queremos mostrar el código en un formato de bloque. Dentro de la etiqueta <pre>, agregamos la etiqueta <code> para indicar que estamos encerrando código de programación.

Utilizar atributos globales y atributos de eventos

Puedes utilizar los atributos globales y los atributos de eventos con la etiqueta <code>.

<body>
  <!-- Utilizando atributos globales con la etiqueta <code> -->
  <p>
    <code class="highlight" style="color: red" title="This is a title"
      >Some code</code
    >
  </p>
</body>

En el bloque de código anterior, utilizamos los atributos class, style y title con la etiqueta <code>.

Agregar el estilo CSS predeterminado

Si no especificas ningún estilo para la etiqueta <code>, utilizará los ajustes CSS predeterminados. La mayoría de los navegadores utilizan monospace como la familia de fuentes predeterminada para la etiqueta <code>.

<body>
  <!-- Estilo CSS predeterminado para la etiqueta <code> de HTML -->
  <p>
    <code>Estilo CSS predeterminado</code>
  </p>
</body>

Resumen

La etiqueta <code> se utiliza para encerrar contenido relacionado con la programación o con la informática. Al utilizar esta etiqueta, puedes mostrar el texto encerrado en una fuente de ancho fijo como courier. También puedes utilizar la etiqueta <pre> junto con la etiqueta <code> para mostrar código de programación en múltiples líneas. La etiqueta <code> admite atributos globales y atributos de eventos. Si no especificas ningún estilo para la etiqueta <code>, utilizará los ajustes CSS predeterminados con monospace como la familia de fuentes predeterminada.