Cómo mostrar código en HTML sin necesidad de generar etiquetas div

Escrito por sara williams | Traducido por manuel lama paniagua
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo mostrar código en HTML sin necesidad de generar etiquetas div
Usa códigos de caracteres especiales en HTML para prevenir que se generen etiquetas . (Comstock/Comstock/Getty Images)

Mostrar el código HTML de una página web presenta un problema para los desarrolladores porque no hay ninguna etiqueta especial para "apagar" la representación de etiquetas del navegador. Debes convertir los símbolos "menor que" y "mayor que" que rodean las etiquetas con sus equivalentes en HTML de código de caracteres especiales. Cuando utilices los códigos de caracteres especiales, evita poner los símbolos directamente en el código mientras obtienes el resultado deseado en el navegador. De esta manera puedes mostrar un ejemplo de código -a veces llamado "fragmento"- que contenga etiquetas <div> sin generar DIV en el navegador.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el archivo HTML y busca el lugar donde desees agregar el código <div> de muestra. Utiliza un editor de código como Notepad++, jEdit o BBEdit para obtener los mejores resultados, pero también puedes utilizar el Bloc de notas de Windows si no necesitas coloreado de código o números de línea.

  2. 2

    Escribe tu código de muestra que contiene etiquetas <div> tal y como escribirías HTML. Aquí hay un ejemplo de un fragmento de código con etiquetas <div>:

    <div> Contenido </div>

  3. 3

    Cambia las flechas en "div" y "/ div" en los códigos de caracteres especiales HTML. Estos códigos aparecen como "<" y ">" en los navegadores sin confundirse con marcado HTML real. Aquí está el resultado:

    <div> Contenido </div>

  4. 4

    Envuelve tu código de ejemplo con etiquetas <code> para que el navegador lo formatee usando una fuente de máquina de escribir de monoespaciado como Courier. Este formato hace que el código se destaque del resto del texto y que sea más fácil de leer para sus visitantes.

    <code> <div> Contenido </div> </code>

  5. 5

    Envuelve todo el ejemplo de código con etiquetas para hacer que el navegador muestre el código exactamente como lo escribiste en el archivo HTML, conservando espacios y saltos de línea. Utiliza etiquetas sólo si deseas que el código de ejemplo aparezca como lo has escrito en HTML, de lo contrario usa las etiquetas y CSS para dar formato al código de ejemplo. Las etiquetas van dentro de las etiquetas <code> de este modo:

    <code> <div> Contenido </div> </code>

Consejos y advertencias

  • Consigue un complemento de JavaScript e instálalo en tu sitio web para dar a los fragmentos de código estilo automáticamente, añade la numeración de líneas y el resaltado de código. Si utilizas un Sistema de Gestión de Contenidos, mira si hay complementos o módulos que agreguen esta funcionalidad.
  • Haz siempre copia de seguridad de tus archivos HTML y CSS antes de editarlos.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles