Insertar código html en una página. ¿Cómo agregar su código HTML? Insertar un fragmento de html en una página separada
El método para insertar el código html es ligeramente diferente dependiendo de dónde exactamente necesite pegarlo. En consecuencia, consideraremos diferentes opciones.
Para insertar código html en el sitio, y en particular en el texto de un artículo en una de las páginas del sitio, vaya al panel administrativo, seleccione y abra el artículo deseado para editarlo. A continuación, el modo de editor visual debe cambiarse al modo de edición. Cuando trabaje con un sistema CMS, para cambiar el modo, simplemente presione . Luego copie y pegue el código html en el lugar planeado.
A menudo, después de pegar, desea formatear un poco el código, por ejemplo, configurar el texto para que se ajuste al código del otro lado. Hay una manera fácil de hacer esto usando las propiedades CSS.
Usando la etiqueta
Para que al guardar un artículo, el editor visual no recorte cambios que, en su opinión, no son código html, es mejor desactivarlo al insertar el código. El corte de cambios del editor está diseñado para prevenir la amenaza de posibles códigos maliciosos.
¿Cómo deshabilitar el editor visual?
En el panel administrativo, haga clic en "Sitio" - "Configuración general" - "Sitio" y en la línea "Editor visual" seleccione "Sin editor". Ahora será posible editar e insertar código html en el modo de código html. Una vez que haya pegado el código y guardado los cambios, se puede volver a habilitar el editor visual.
Si desea volver a editar el artículo, también deberá volver a insertar el código html. A veces se requiere que el código html se muestre en cada una de las páginas del sitio. Insertando código html para que se muestre en cada una de las páginas del sitio.
Para resolver este problema, use el bloc de notas u otro editor para ingresar al archivo del sitio principal (el valor predeterminado es index.php o index.html). En un archivo abierto, elija su ubicación preferida para pegar el código. Para mayor comodidad, puede especificar una frase en la búsqueda, ubicada en el lugar donde necesita pegar el código, para que pueda encontrarlo más rápido. Luego copia el código y pégalo donde quieras. Si es necesario, se puede formatear el código de la misma manera que se describió para formatear el código en el artículo.
¿Quieres publicar un código en el sitio con algún tipo de solución o instrucción, pero tienes problemas con esto? Aprenda cómo hacerlo bien y mostrar el código tal como aparece en el editor de código.
Parecería que no es una tarea difícil insertar el código, pero pueden surgir dificultades si no conoce algunas de las reglas que se discutirán.
Pegar código como código
Para insertar el código en el sitio, está envuelto en etiquetas
Y . Esto da como resultado la siguiente construcción:
Aquí está el código
Para explicar brevemente y al grano, en esta construcción, la etiqueta de código le dice al navegador que hay un código de programa dentro de él, y la etiqueta pre guarda saltos de línea, tabulaciones (sangrías) de líneas y espacios.
Todo parece estar claro y no hay nada complicado, pero el problema es que si desea insertar código html o código que contiene caracteres< , >, & , " , ` , entonces pueden surgir problemas: el navegador procesará su código como html. Por ejemplo, si desea mostrar el código del formulario con un botón, campos de entrada, etc. en el código, el navegador mostrará el forma, no su código.
escape de código
Para evitar que esto suceda, hacen el llamado escape de código: esto es cuando los caracteres mencionados anteriormente se reemplazan por sus códigos UTF.
Esquema para reemplazar caracteres con códigos utf
Los símbolos y códigos que los reemplazan se muestran a continuación:
Por supuesto, nadie hace el reemplazo manual de caracteres, esto se hace mediante programación. La herramienta más accesible para esto es el escape de código en línea, donde en un instante se reemplazarán todos los caracteres y el código guardará todos los espacios y guiones y estará completamente listo para insertarse en la construcción de la etiqueta.
Como resultado, después de escapar, puede insertar cualquier código. Puede ver un ejemplo de tal inserción después de escapar del código a continuación:
encabezamiento
Artículos Relacionados
Además, me gustaría aclarar de inmediato que insertaremos el código en el artículo mismo, para que nuestros lectores puedan copiarlo sin perder tiempo escribiendo el texto. Por lo tanto, aumentaremos la conveniencia () de nuestro recurso, esta vez. Sí, y los artículos se verán más profesionales y terminados: estos son dos.
También me gustaría señalar que la información en este artículo será útil para las personas que, como le decimos, cómo hacer varios tipos de complementos en el sitio, o para los usuarios que simplemente les gusta compartir información útil. Y no importa que esta información sea un código 🙂 Por cierto, revelaré un pequeño secreto, en este proyecto lo mostramos usando el complemento Wp-Syntex.
Usted pregunta: "¿Por qué lo usamos?" La respuesta es simple: no hay camaradas para el gusto y el color. Broma. De hecho, elegimos este complemento porque es fácil de usar, agrega perfectamente estilo visual a varios lenguajes de programación (css, html, java, javascript, perl, sql, etc.) y no carga nuestro servidor.
Bueno, ya que dejé escapar Wp-Syntex, usémoslo como ejemplo para mostrar cómo insertar código en los artículos de WordPress.
Primero necesitas instalar este plugin. Hablamos sobre cómo hacer esto en un artículo sobre .
Por lo tanto, no describiré esta acción aquí.
Como resultado, tendrá el siguiente resultado:
El código que quieres que se muestre
Además, en lugar de php en este código, puede insertar otro lenguaje de programación, como css o java. Al mismo tiempo, el estilo de apariencia cambiará.
Características adicionales de Wp-Syntex
Si agrega el atributo a la etiqueta de apertura "pre" línea, es decir, el código que tendrás que pegar comenzará así:
El código que quieres que se muestre
Espero que notes la diferencia.
Hay un pequeño atributo más que puede necesitar: este es escapado. Le permite convertir códigos de caracteres html directamente en los propios caracteres. Por ejemplo, ">" se convertirá en ">". Para que esta función funcione, inserte el siguiente atributo en la etiqueta "pre" de apertura:
escapó = "verdadero"
En consecuencia, la etiqueta comenzará así:
<
pre lang=
"php"
line=
"1"
escaped=
"true"
>
También en Internet, encontré información de que puede instalar otro complemento (WP-Syntax Button), que funciona junto con nuestro complemento y agrega un botón de inserción de código al editor de WP. Yo no era demasiado perezoso y decidí probarlo.
Inmediatamente después de instalarlo, me alertó que hacía mucho tiempo que no se actualizaba y no estaba probado con nuestra versión de WordPress. Bueno, qué puedo decir, mis temores estaban justificados.
Después de activar el botón WP-Syntax, decidí en uno de nuestros artículos que intenté insertar un script java. Hice todo como estaba indicado en la montaña de instrucciones y recomendaciones. Pegó el guión en el artículo, lo resaltó y presionó el botón "código".
Después de eso, indicó el lenguaje de programación y el número de línea desde donde debería comenzar la salida del script.
Puede preguntar por qué escribí sobre este experimento en este artículo. Con esto quería decir que cuando busquen alguna información en Internet, presten atención a la fecha de publicación. Después de todo, existe una probabilidad muy alta de que la información en el artículo anterior fuera relevante hace varios años, pero en este momento simplemente no funciona, y su uso o implementación puede llevar a la vulnerabilidad de su proyecto.
En nuestro blog, trato de mantener todo el material actualizado, monitorear constantemente las actualizaciones y, si es necesario, hacer ajustes a los artículos ya escritos.
Si desea recibir información actualizada en su correo electrónico, entonces lo recomiendo.
Video "Cómo insertar código HTML en un artículo"
Amigos, si alguien prefiere ver cómo se hace esto, entonces grabé un video para usted. Y te recuerdo que también tenemos un canal de youtube al que también te puedes suscribir.
Artículos relacionados:
Bueno, espero que el artículo no haya resultado difícil y que haya podido explicarle en detalle cómo puede insertar código html en el sitio sin problemas innecesarios.
No descuides la estética de tu blog. Después de todo, nuestro lector, como en la vida, se encuentra con la ropa, pero ve con la mente.
¡Eso es todo para mí!
¡Adiós!
Saludos, Anton Kalmykov
¿Sabes cuál es una de las principales ventajas del editor de Wix? El hecho de que da la oportunidad a todo el mundo sin necesidad de ningún conocimiento especial en el campo de la programación. Esta es una plataforma muy simple e intuitiva donde puede agregar, eliminar, mover y editar fácilmente cualquier elemento de todas las formas posibles sin tocar una sola línea de código.
Pero, ¿qué pasa si necesitas agregar una función a tu sitio que no está disponible en el editor de Wix? Solo por esto, hemos desarrollado un widget HTML aparentemente simple, pero de hecho, mega funcional, del que le hablaremos hoy. Con la ayuda de una aplicación HTML, puede agregar literalmente todo al sitio (excepto tal vez, aproximadamente ed.), incluido cualquier tipo de contenido, widgets y aplicaciones de terceros.
¿Qué más es una aplicación HTML?
Dibujemos un paralelo con la creatividad para mayor claridad. Imagina que estás haciendo un collage. Por lo tanto, la aplicación HTML es algo con lo que puede insertar fácil y rápidamente cualquier imagen que desee en su collage.
Una "imagen", es decir, un elemento en línea, puede ocupar toda la página de su sitio o parte de ella y ubicarse junto a otras secciones, imágenes o texto. Puede cambiar fácilmente la posición de los elementos, aumentarlos o disminuirlos; en general, haga todo lo que normalmente hace en el editor de Wix.
La aplicación HTML se puede utilizar de dos formas:
Para incrustar sitios a través de iframe. Adecuado para agregar páginas de otros recursos. Esto podría ser un artículo de Wikipedia o un perfil de IMDB publicado en su totalidad en su sitio.
Para incrustar código HTML. Se utiliza en los casos en que desea instalar un widget en el sitio que no se encuentra entre las aplicaciones en .
Para comprender mejor cómo funciona esto, sugerimos ver un breve video tutorial sobre cómo agregar código HTML en el editor de Wix:
Usos geniales del código HTML en un sitio web
Una aplicación HTML es algo muy útil. Aquí hay una lista de muestra de lo que se puede agregar al sitio con él:
Reproductores de audio y video y listas de reproducción. Casi todos los recursos con contenido multimedia le permiten insertarlo en otros sitios.
La capacidad de colocar su propio código HTML solo está disponible en . Esta funcionalidad está pensada para aquellos que tienen experiencia profesional en la web, necesitan funciones avanzadas y saben exactamente lo que harán con ellas.
¡Atención!
Trabajar con este widget requiere conocimientos de HTML, CSS y JavaScript. Escribir código con errores puede conducir a un trabajo y visualización incorrectos del sitio.
Puedes publicar tu código HTML:
Importante:
El sitio debe estar publicado para que los cambios surtan efecto.
Trabajar con secuencias de comandos jQuery
Si desea utilizar secuencias de comandos jQuery en su sitio, debe hacerlo de una manera especial, ya que la biblioteca jQuery está incluida en uKit de una manera no estándar. Todos los scripts de jQuery deben colocarse en el panel de control de su sitio en la sección "Código personalizado". En este caso, se debe colocar el código " En el final
". Todos sus scripts deben estar envueltos en una biblioteca requerir.js de la siguiente manera: