Todo lo que el visitante ve en las páginas del sitio es mostrado por el navegador según las instrucciones detalladas que le envía el servidor. Estas instrucciones se denominan código html de la página y se componen de "etiquetas" independientes que describen el tipo, la apariencia y la ubicación de cada elemento individualmente. Para colocar cualquier elemento nuevo (por ejemplo, una imagen) en una página, debe agregar una instrucción correspondiente, una etiqueta, a su código fuente. Considere la forma más sencilla de hacer esto.
Instrucciones
Paso 1
Si utiliza algún tipo de sistema de gestión de contenidos, es muy probable que incluya un editor de páginas. Primero, debe abrir la página deseada en este editor. Además, las opciones son posibles. En el mejor de los casos, el editor de páginas tendrá un "modo visual", en otras palabras, "modo WYSIWYG" (lo que ves es lo que obtienes, "lo que ves es lo que obtienes"). ¡En este modo, no necesitará tratar con el código html original en absoluto! La página en el editor se verá igual que en el sitio, bastará con colocar el mouse en el lugar deseado y presionar el botón "insertar imagen" en el panel del editor.
Paso 2
Como resultado, se abrirá un cuadro de diálogo en el que debe seleccionar la imagen deseada. Si aún no lo ha cargado, también hay un botón para seleccionar una imagen en su computadora y cargarla en el servidor. Además, en este cuadro de diálogo puede establecer el color y el ancho del marco alrededor de la imagen, la distancia y el color del relleno entre el marco y la imagen, el texto de la información sobre herramientas. No es necesario especificar las dimensiones aquí, pero para acelerar la carga de la página y evitar la distorsión del diseño, es mejor hacerlo. Cuando se hayan completado todos los campos obligatorios del cuadro de diálogo, haga clic en "Aceptar" y luego guarde la página editada.
Paso 3
Debido al hecho de que no existe un estándar único para los sistemas de control, el procedimiento para insertar una imagen en el modo visual de su sistema puede diferir ligeramente, pero el principio será el mismo. Por la misma razón, es posible que el modo WYSIWYG no aparezca en el sistema de gestión de su sitio. Entonces todavía tienes que editar el código fuente de la página en HTML (Lenguaje de marcado de hipertexto - "lenguaje de marcado de hipertexto"). Deberá insertar una etiqueta en el lugar correcto del código que le indique al navegador que muestre la imagen aquí. En su forma más simple, debería verse así: Aquí está la "dirección relativa" de la imagen; en esta dirección, el navegador debe contactar al servidor para obtener el archivo de imagen. Si la dirección es relativa, el navegador asumirá que el archivo está en la misma carpeta del servidor que la página en sí (o en una subcarpeta). Pero, para no equivocarse, es mejor especificar la "dirección absoluta", por ejemplo, así: Naturalmente, para que el servidor encuentre y envíe la imagen al navegador, debe cargarse en el localización. La forma más sencilla de hacerlo es a través del administrador de archivos, que se encuentra en todos los sistemas de administración de contenido, así como en el panel de control de su empresa de alojamiento. También puede hacer esto usando el protocolo FTP (Protocolo de transferencia de archivos - "protocolo de transferencia de archivos"), usando un programa especial - Cliente FTP. Hay muchos de ellos, tanto de pago como gratuitos, por ejemplo, Cute FTP, FlashFXP, WS FTP, etc. Pero, por supuesto, instalar, dominar y configurar el programa llevará tiempo, por lo que un administrador de archivos para descargar todo lo que necesita a través de un navegador es una opción más sencilla.
Paso 4
Además de la dirección en la etiqueta html de la imagen, puede especificar información adicional - "atributos" de la etiqueta. Por ejemplo, el atributo alt="Imagen" contiene el texto de la información sobre herramientas que aparece cuando pasa el cursor del mouse sobre la imagen: se puede reemplazar con el atributo - title: - El tamaño del rectángulo en el que el navegador debe La visualización de la imagen se establece mediante los atributos de ancho y alto: - El atributo de borde especifica el ancho del borde alrededor de la imagen (en píxeles): si la imagen se convierte en un enlace, el navegador dibujará un borde azul alrededor. Para deshacerse de él, establezca el valor del borde en cero: - Los otros dos atributos contienen información sobre la cantidad de sangría de la imagen de elementos adyacentes (de líneas de texto, otras imágenes, etc.) - hspace establece el tamaño del sangría horizontalmente (izquierda y derecha), vspace - verticalmente (abajo y arriba):
