Se utiliza una sola etiqueta para insertar una imagen en el texto de una página web. (Tabla P 1). Los atributos de esta etiqueta establecen todos los parámetros de la imagen colocada en la página. Se requiere el atributo SRC, que define la dirección y el nombre del archivo gráfico. Si el atributo SRC no está configurado, solo se mostrará el icono de imagen en blanco.

Estructura de etiquetas con el atributo SRC se ve así:

.

Si un archivo gráfico llamado Instituto se encuentra en la misma carpeta que la página web, entonces para colocarlo debes escribir:

.

Nombre de archivo Formato

Para colocar un archivo gráfico con el nombre MINSK, ubicado en D:\Collection\Cities\MINSK.GIF, se debe escribir .

Usando una etiqueta La página web contiene un archivo gráfico ubicado en otra computadora en Internet.

Para crear una página Web con una foto de nuestro instituto, que se muestra en la Fig. 4.1, debe ingresar el siguiente código HTML:

Nuestro Instituto

Arroz. 4.1. Página web con foto del instituto.

En el ejemplo anterior, la altura de la foto (ALTURA) es de 200 píxeles y el ancho (ANCHO) es de 300 píxeles. Para colocar la foto, se crea un párrafo con alineación central.

Líneas horizontales

Las líneas horizontales se colocan en una página web usando una sola etiqueta.

---

. Los atributos TAMAÑO, ANCHO, COLOR y ALINEAR cambian el grosor, ancho, color y alineación de las líneas, respectivamente.

Veamos algunos ejemplos para explicar la ubicación de las líneas horizontales:

1.

---

- una línea horizontal a lo largo de toda la página, de 2 píxeles de grosor.

2.

---

WIDTH = "200" ALIGN="RIGHT"> – una línea horizontal de color verde, de 15 píxeles de grosor, 200 píxeles de ancho y alineada a la derecha.

3.

---

– una línea azul horizontal que cubre toda la página, de 25 píxeles de grosor.

4.

---

WIDTH = "300" ALIGN = "LEFT"> – una línea horizontal de color rojo, de 20 píxeles de grosor, 300 píxeles de ancho y alineada a la izquierda.

La visualización de líneas para los cuatro ejemplos grabados se muestra en la Fig. 4.2.

Arroz. 4.2. Líneas en una página web

MESAS

Creando tablas

La tabla se crea usando una etiqueta emparejada.

… . Esta etiqueta crea una tabla en la ubicación donde se agrega.
en código HTML.

Cualquier tabla consta de filas y las filas, de celdas. Las siguientes etiquetas se utilizan para formar filas y celdas de la tabla:

... – nueva línea;

... – celda de encabezamiento;

... – una celda de tabla normal.

Estas etiquetas están escritas dentro de una etiqueta emparejada.

… .

La tabla se forma fila por fila: primero se especifica una fila y en ella se indica el número requerido de celdas, luego la segunda fila, etc.

Para obtener la tabla que se muestra en la Fig. 5.1, debe escribir el siguiente código HTML:

Arroz. 5.1. Página de tabla

El texto en las celdas del encabezado de la tabla (Fig. 5.1) se muestra en fuente seminegrita y alineado con el centro de la celda, mientras que en las celdas normales el texto no está resaltado y está alineado hacia la izquierda.

Cabe señalar que en el código HTML de la página anterior la etiqueta

Coches	Precio	Vado	5000	Golf	6000

contiene el atributo BORDER con el valor "1". Esto significa que en la tabla que se muestra en la Fig. 5.1, el espesor del borde exterior es
1 píxel. si escribimos

… ,

entonces el grosor del borde exterior será de 6 píxeles. Para evitar que se muestren los bordes de la tabla, debe establecer el atributo BORDER en 0 o simplemente omitir este atributo.

La mayoría de las páginas web contienen gráficos. Le permite presentar información de forma colorida y clara. En muchos casos, es mejor mostrar una imagen que dar una descripción de texto larga.

Hay dos formas de colocar gráficos en una página:

• inserción de imágenes individuales;
• llenando el fondo con una imagen.

En cualquier caso, la imagen gráfica está extraída del archivo.

Insertar gráficos

La inserción de una imagen gráfica desde un archivo de formato gráfico en una página se realiza mediante la etiqueta (del inglés, imagen - imagen) indicando la dirección del archivo como argumento del atributo SRC:

< IMG SRC = "адрес_графического_файла" >

La dirección del archivo gráfico es una URL o un nombre de archivo, posiblemente con una ruta. Por ejemplo, para mostrar un archivo gráfico logotip.jpg debes escribir la etiqueta:

< IMG SRC = "logotip.jpg" >

Para aumentar la velocidad de transferencia de una imagen gráfica en una etiqueta puedes usar el atributo ( parámetro adicional) LOWSRC, que toma la dirección de un archivo de gráficos como argumento. Puede crear dos archivos gráficos: uno (por ejemplo, logotip.jpg) contiene una imagen de alta resolución y el otro (por ejemplo, logotip.gif) contiene una imagen de baja resolución. Luego la etiqueta:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

...indica al navegador que primero descargue el archivo logotip.gif y luego lo reemplace con el archivo logotip.jpg tal como lo recibe.

Otra forma de acelerar la carga de gráficos es establecer el tamaño del área rectangular en la que se colocará el gráfico mediante atributos. ANCHO(ancho) y ALTURA(alto), medido en píxeles. Si especifica estos atributos, el navegador primero asignará espacio para los gráficos, preparará el diseño del documento, mostrará el texto y solo luego cargará los gráficos. Tenga en cuenta que el navegador comprime o estira la imagen para que quepa dentro del tamaño de marco especificado. Un ejemplo de especificación de dimensiones de imagen:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Los gráficos generalmente se usan junto con el texto, por lo que surge el desafío de alinear el texto y los gráficos. Este problema se resuelve usando el atributo ALINEAR etiqueta utilizando diversos argumentos. Por ejemplo, es posible que queramos que el texto fluya alrededor de una imagen hacia la derecha o hacia la izquierda. Por lo general, la imagen está incrustada muy cerca del texto, lo que puede resultar feo. Para evitar esto, puede establecer márgenes vacíos alrededor de la ilustración. Los campos se crean usando atributos. ESPACIO V para los márgenes superior e inferior y НESPACIO para márgenes laterales en una etiqueta . Los argumentos de estos atributos se especifican como números que especifican el tamaño de los campos en píxeles. Para cancelar el ajuste del texto alrededor de los gráficos, utilice la etiqueta
.

La siguiente etiqueta configura los gráficos del archivo logotip.jpg para que se ajusten hacia la derecha (la imagen se ubicará a la izquierda del texto):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Si desea colocar una imagen a la derecha del texto, entonces necesita el atributo ALINEAR asignar argumento BIEN:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Para establecer los márgenes alrededor de la imagen, debe escribir una etiqueta como:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Aquí los números 20 y 10 determinan el tamaño de los campos.

Veamos un ejemplo intercambio gráficos y textos. Abra el Bloc de notas (editor de texto Bloc de notas) de Windows. Escriba código HTML en él utilizando las etiquetas comentadas anteriormente. A continuación se muestra un programa que genera texto y gráficos. Puedes utilizar cualquiera de los archivos que tengas como archivo gráfico. El archivo utilizado aquí es logotip.gif.

< HTML >

< HEAD >

< TITLE >Ejercicio 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 >El texto se ajusta alrededor de los gráficos a la derecha< / H1 >

Arroz. 657. El texto se ajusta alrededor de la imagen a la derecha.

Amplias posibilidades para el posicionamiento preciso de imágenes (así como otros elementos) en la página proporcionan mesas Y estilos. Estos elementos HTML se discutirán más adelante. Por ejemplo, puede definir una tabla sin marcos visibles y colocar imágenes, textos y otros elementos en las celdas de esta tabla.

Definición 1

La página web es archivo de texto, creado en HTML y alojado en la World Wide Web (WWW). Además de texto, una página web puede contener enlaces de hipertexto a través de los cuales puede navegar y ver otras páginas web, así como inserciones en forma de gráficos, animaciones, videoclips y música.

Usando HTML puedes:

1. Crear y editar páginas web.
2. Editar documentos HTML desde Internet, teniendo en cuenta el funcionamiento de todos los objetos incrustados en el documento (imágenes, animaciones, etc.).
3. Utilizando enlaces de hipertexto y la capacidad de incrustar dibujos, diagramas, animaciones, videoclips, música y acompañamiento de voz, efectos especiales de texto en un documento HTML, cree presentaciones multimedia, presentaciones de diapositivas, proyectos de demostración.

Nota 1

Las imágenes gráficas suelen almacenarse en archivos separados. El lenguaje HTML tiene etiquetas especiales con las que se escriben enlaces en los códigos de las páginas web, que son las direcciones reales de estos archivos en Internet. Cuando encuentra dichas etiquetas, el navegador web solicita al servidor web el archivo correspondiente con una imagen, audio o video y lo muestra en la página web en la ubicación de esta etiqueta. Cualquier dato (imágenes, audio y videos, etc.) que se almacene en archivos separados de la página web se denomina elementos incrustados de las páginas web. Echemos un vistazo más de cerca al proceso de agregar una imagen a una página web.

Agregar imágenes a una página web

El atractivo de las páginas web reside precisamente en los gráficos y otros objetos diversos que se utilizan en ellas. Agregar una imagen a una página no es difícil. Y agregue gráficos que puedan hacer apariencia Las páginas web son más presentables y profesionales, mucho más complejas y requerirán conocimientos especiales.

Puede agregar una imagen a una página usando la etiqueta de origen de la imagen, que se ve así:

¿Dónde está la etiqueta en sí y scr es su atributo? Dado que el atributo scr es obligatorio, podemos decir que toda esta entrada es una etiqueta común. La etiqueta de origen de la imagen no utiliza una etiqueta de cierre correspondiente porque la etiqueta de origen es independiente y, por lo tanto, requiere una barra diagonal al final cuando se usa: .

Agregar subtítulos alternativos

En Internet, a menudo puede encontrar varias inscripciones que se muestran al pasar el mouse sobre cualquier objeto gráfico en una página web. Estos títulos suelen contener información adicional sobre la imagen en sí o sobre el área de la página en la que se encuentra.

A continuación se muestra el código HTML con el atributo alt agregado dentro de la etiqueta. Este atributo, similar al atributo src, le brinda al navegador información adicional sobre la imagen y también se puede usar siempre junto con una etiqueta.

alt="¡Esta es una imagen!" />!}

La función del atributo alt es definir texto alternativo para un elemento gráfico agregado a una página web. Se llama alternativa porque se muestra en la pantalla como alternativa a la propia imagen. El atributo alt realiza otra función importante. Permite al diseñador web estar seguro de que si el visitante de la página no ve la imagen en su pantalla, al menos podrá ver la información de texto agregada a esta imagen.

Al utilizar el atributo alt para cada etiqueta, es importante tener cuidado de no asignar mensajes de texto inapropiados a elementos gráficos. Por ejemplo, no tiene sentido agregar etiquetas de texto alternativas a los elementos de diseño de la página. Para evitar este tipo de errores, puede establecer el atributo alt de estos elementos en un valor vacío (alt=" "). Si no establece ningún otro atributo, el navegador representará la imagen en su tamaño original, pero alineará el borde superior de la imagen con el borde superior de la cadena de texto adyacente. Sin embargo, puedes cambiar ambas configuraciones usando etiquetas de hojas de estilo.

Atributos de imagen

La etiqueta tiene atributos que le permiten cambiar el tamaño de las imágenes. Éstos son algunos de ellos:

• altura – se utiliza para determinar la altura de la imagen en píxeles o porcentajes;
• ancho: se utiliza para determinar el ancho de la imagen en píxeles o porcentajes.

Ajustar la altura y el ancho de la imagen

Los tamaños de las imágenes colocadas en páginas web se pueden configurar utilizando los atributos anteriores. Además, sus valores se establecen como un número fijo de píxeles o como un porcentaje relativo al tamaño de la página. En el código HTML siguiente, la primera etiqueta contiene las dimensiones de la imagen original en píxeles (60 píxeles verticalmente y 60 píxeles horizontalmente), la segunda etiqueta establece el ancho de la misma imagen en el 6% del ancho de la página y el alto en 10% de la altura de la página.

alt="¡Esta es una imagen!" altura="60" ancho="60" />

alt="¡Esta es una imagen!" altura="10%" ancho="6%" />

Nota 2

Al mostrar imágenes en su propia ventana, el navegador hace un trabajo igualmente bueno al procesar ambos tipos de valores. Sin embargo, debe recordar que los visitantes de las páginas web pueden tener una resolución de pantalla diferente a la suya en sus computadoras. Por lo tanto, al cambiar el tamaño de una imagen, debe especificar ambos valores de la imagen (alto y ancho). Si cambia solo uno de estos valores, la imagen en la pantalla puede aparecer estirada vertical u horizontalmente.

Se puede utilizar para crear la ilusión de una carga de imágenes más rápida. Para hacer esto, siempre debes especificar los valores de los atributos de alto y ancho, independientemente de si la imagen ha sido redimensionada o no. Porque le brindan al navegador información importante sobre la cantidad de espacio requerido para colocar una imagen en una página. En respuesta, el navegador asigna el espacio necesario para la imagen y continúa creando otros elementos de la página sin dejar de cargar la imagen. Esto hace que la página parezca cargarse más rápido porque los visitantes no tienen que esperar a que la imagen se cargue por completo antes de ver otra información en la página.

Para garantizar que la imagen en cualquier pantalla, independientemente de su resolución, ocupe exactamente una determinada cantidad de espacio a lo ancho de la página, es necesario utilizar valores porcentuales. Si desea que la resolución de la imagen en sí sea constante (su tamaño en píxeles), debe utilizar valores en píxeles.

Alinear texto y gráficos

Para alinear una imagen con el borde derecho o izquierdo de una línea de texto, utilice el atributo de alineación de la etiqueta. Por ejemplo:

alt="¡Esta es una imagen!" altura="60" ancho="60" align="derecha" />

Para alinear una imagen verticalmente con respecto a una cadena de texto, también puede utilizar este atributo, que puede tomar los valores superior, inferior y central. El valor top especifica que el borde superior de la imagen debe estar alineado con el borde superior del texto circundante. El valor inferior especifica que el borde inferior de la imagen debe estar alineado con el borde inferior del texto circundante. El valor central especifica que el centro de la imagen debe estar alineado con el centro de la línea de texto.

Usar imágenes como enlaces

Las imágenes también se utilizan para crear hipervínculos a otros documentos. En HTML, una imagen se convierte en un hipervínculo del mismo modo que un cuadro de texto. Para hacer esto, se utiliza una etiqueta que encierra un elemento de la página (en nuestro caso, una imagen) que debería convertirse en un enlace. El enlace se seguirá haciendo clic en esta imagen.

Imágenes en miniatura

Además del método anterior, en el que una imagen actúa como hipervínculo, también se puede utilizar como un hipervínculo que pasa de una imagen a otra. Esto es necesario en los casos en que el tamaño de la imagen que desea publicar en una página web es bastante grande y tardará mucho en cargarse, lo cual es inaceptable para muchos visitantes. Por ello, crean una copia reducida de esta imagen (miniatura) y la representan con un hipervínculo. Si un visitante de la página está interesado en esta imagen, puede hacer clic en la miniatura para ver la imagen completa. Aquí hay un ejemplo de código:

alt="Haga clic para ver la imagen normal."

altura="60" ancho="60" />

Secretos para utilizar imágenes con éxito

Las imágenes proporcionan mucha información visual a los visitantes, y esto las hace atractivas, y además son bastante sencillas de agregar a una página web, pero existen ciertas reglas para crear un sitio que se deben seguir si queremos que se vuelva popular en La Internet.

Al crear páginas, debe intentar colocar imágenes pequeñas en ellas, ya que las imágenes grandes tardarán mucho en cargarse y algunos usuarios todavía utilizan canales de comunicación de baja velocidad para acceder a la red. rendimiento, y por tanto el tamaño de los archivos descargados es de fundamental importancia para ellos.

Nota 3

También es importante el tamaño total del archivo de todo el documento HTML, que, a su vez, dependerá no sólo del tamaño de las imágenes contenidas en él, sino también de su número. Debes tener cuidado al utilizar el atributo alt para que el contenido del mensaje de texto siempre coincida con la imagen misma. Y en el caso contrario: es necesario asegurarse de que la imagen corresponda a la información textual presentada en la página.

Cuando utilice imágenes tomadas prestadas de Internet en la página que está creando, debe verificar si estas imágenes están protegidas por derechos de autor.

Como se mencionó, HTML hoy es la base para escribir cualquier página web en la World Wide Web. Cuando usas CSS, la creación de código HTML cambia dramáticamente. Puede decir adiós a la reutilización de etiquetas HTML anticuadas sólo para lograr ciertos efectos visuales. Acerca de algunas etiquetas o atributos HTML, como la etiqueta obsoleta...

Hogar

¡Solicite un sitio web y comience a hacer negocios!

Esta frase se puede escuchar y ver en muchos sitios, ¡y no en vano!

Sitio web — esta es la cara de la empresa. Y es el canal de comunicación más moderno y eficaz con los potenciales consumidores. Solo las capacidades de un sitio de Internet le permiten utilizar plenamente todos los métodos para transmitir un mensaje de información al usuario. Se puede presentar información de texto, audio y video dentro de un sitio para familiarizar al consumidor con ellos.

Al usar software En el sitio puede aceptar pagos, hablar por teléfono, mantener bases de datos, enviar y recibir faxes, intercambiar mensajes SMS y realizar muchas otras acciones. Un sitio de Internet moderno es un centro de información no sólo para cualquier empresa, sino también para cualquier usuario de Internet.

Y esta es una forma beneficiosa para todos de transmitir de manera efectiva y, al mismo tiempo, simple y clara sus ideas o desarrollos a una audiencia más amplia. Y hoy en día, los documentos web escritos en el lenguaje de marcado de hipertexto HTML siguen siendo la principal forma de presentación de datos en el entorno web.

Las ventajas más importantes del HTML son:

• simplicidad, permitiéndole aprender HTML en el menor tiempo posible.
• capacidad de crear sus propias páginas web
• y HTML funciona exactamente igual en todas las plataformas existentes en la actualidad; no es necesario comprar equipo adicional. Y es suficiente usar cualquiera disponible. editor de texto, por ejemplo el Bloc de notas.

En este sitio, intenté describir en detalle todo el proceso de creación de su propio sitio web, es decir, publicar el proyecto terminado en Internet para brindar acceso a él a todos los usuarios.

Espero que mis artículos sean de gran utilidad para muchos, porque yo mismo no soy programador, pero este trabajo me inspira mucho.

Las imágenes gráficas colocadas en una página web no sólo contribuyen a una mejor percepción de la información, sino que también hacen que las páginas sean más vívidas y memorables. Puede preparar imágenes gráficas usted mismo o utilizar los servicios de diseñadores. También puede utilizar bibliotecas de archivos gráficos de productos de software como oficina de microsoft, Corel Draw, etc.

Coloquemos una imagen gráfica de la biblioteca Clip Art incluida en Microsoft Office en la página de inicio del sitio web que estamos creando. Para hacer esto, siga estos pasos:

1. Abra el sitio web creado.
2. Abierto pagina de inicio haciendo doble clic en el nombre del archivo index.htm en el panel Lista de carpetas(Lista de carpetas).
3. en el menú Insertar(Insertar) seleccionar comando Dibujo Fotos(Clipart). Aparece un panel en la ventana del programa FrontPage. Insertando una imagen(Insertar imagen prediseñada).
4. Seleccione el comando de este panel colección de fotos(Galería de medios). Se abre un cuadro de diálogo que le permite seleccionar una imagen gráfica (Fig. 15.8).

Arroz. 15.8.

En la parte superior del cuadro de diálogo, además de los botones que controlan la visualización de los objetos que se muestran en la ventana, así como la copia y eliminación de objetos, hay botones de asignación (ver tabla).

1. Panel Lista de colecciones contiene las carpetas de su computadora con archivos multimedia, así como archivos de imágenes de la biblioteca de imágenes prediseñadas. Abra la carpeta de la categoría de imágenes que le interesen. Las imágenes de esta categoría aparecerán en el área de trabajo de la ventana. Cuando coloca el cursor sobre una imagen, aparece una pista que indica el nombre, el tamaño de la imagen y el archivo que contiene, así como el formato de la imagen gráfica (Fig. 15.9).

1. Haga clic en el botón de flecha en el lado derecho de la imagen seleccionada. Aparece un menú contextual.
2. Seleccione el comando del menú contextual Copiar(Sora).
3. Vaya a una página web y pegue en ella una imagen del portapapeles utilizando cualquier herramienta conveniente. Por ejemplo, presione la combinación de teclas +.
4. Guarde la página web que contiene la imagen gráfica haciendo clic en el botón Ahorrar(Guardar) en la barra de herramientas estándar. Aparece un cuadro de diálogo Guardar archivos incrustados(Guardar archivos incrustados) (Fig. 15.10), ofreciendo guardar la imagen colocada en la página en una carpeta imágenes Sitio web con el nombre con el que se ubicó el archivo en la biblioteca. Esta ventana contiene los siguientes botones:
   • Rebautizar(Cambiar nombre): le permite cambiar el nombre del archivo.
   • Cambiar carpeta(Cambiar carpeta): abre un cuadro de diálogo Cambiar carpeta(Cambiar carpeta), que contiene carpetas del sitio web actual, lo que le permite seleccionar una carpeta diferente para guardar el archivo.
   • Acción(Establecer acción) abre un cuadro de diálogo tarea de acción, permitiéndole cambiar el valor Ahorrar Guarde la columna Acción en no guardar(No guardar). Ahorrar El dibujo se guarda en la carpeta del sitio web que especificó; de lo contrario, la página web contendrá un enlace a la imagen ubicada en la biblioteca de imágenes prediseñadas.

Región Dibujo(Vista previa de la imagen) muestra la imagen que se está colocando. Configurando en el cuadro de diálogo Guardar archivos incrustados parámetros deseados, presione el botón DE ACUERDO. El archivo gráfico se guardará en la carpeta del sitio web que especificó.

Arroz. 15.10.

Colocar una imagen gráfica de un archivo

Analizamos la posibilidad de colocar una imagen gráfica de la biblioteca Clip Ait en una página web. Para colocar una imagen gráfica de un archivo en una página, realice una de las siguientes acciones:

• en el menú Insertar(Insertar) seleccionar comando Dibujo(Imagen), y luego en el submenú que se abre, la opción Desde archivo(De archivo)
• Haga clic en el botón Agregar una imagen desde un archivo(Insertar imagen desde archivo) en la barra de herramientas estándar
• Haga clic en el botón Agregar una imagen desde un archivo(Insertar imagen desde archivo) en la barra de herramientas Dibujos(Fotos)

Cuando realiza cualquiera de estas acciones, se abre un cuadro de diálogo Dibujo(Imagen) (Figura 15.11). Usando esta ventana, busque el archivo gráfico requerido y haga clic en el botón para colocarlo en la página web. Insertar(Insertar). El cuadro de diálogo se cerrará y la imagen se colocará en la página.

Arroz. 15.11.

Configurar propiedades de imagen

Después de colocar una imagen en una página web, debe configurar sus propiedades usando el cuadro de diálogo Propiedades de la imagen(Propiedades de imagen) (Fig. 15.12). Para abrirlo, haga clic en la imagen y luego realice una de las siguientes acciones:

• en el menú Formato(Formato) seleccione comando Propiedades(Propiedades)
• Selecciona un equipo menú contextual Propiedades de la imagen(Propiedades de imagen)
• Presione la combinación de teclas +

Caja de diálogo Propiedades de la imagen contiene tres pestañas: General(General), Grabación de vídeo(Video) Vista(Apariencia). Echemos un vistazo más de cerca a las opciones de personalización usando esta ventana de visualización.