.

Etiqueta Tiene un atributo SRC obligatorio, cuyo valor es un camino absoluto o relativo a la imagen:

Para etiqueta Los siguientes atributos están disponibles:

Tabla 1. Atributos de la etiqueta

Atributo	Descripción
Alt.	El atributo ALT agrega texto alternativo a la imagen. Se muestra en la apariencia del sitio antes de cargarla o cuando la gráfica está deshabilitada, y también se muestra con una punta emergente cuando flote el cursor del mouse a la imagen. Sintaxis: Alt \u003d "(! Lang: Descripción de la imagen" . !}
Crossorigin.	El atributo CrossOrigin le permite cargar imágenes de otros recursos de dominio utilizando las consultas de CORS. Las imágenes cargadas en lienzo usando las consultas de CORS se pueden reutilizar. Valores permisibles: Anónimo: la consulta de origen cruzado se realiza utilizando un encabezado HTTP, y las credenciales no se transmiten. Si el servidor no le da las credenciales al servidor desde donde se solicita el contenido, la imagen se dañará y su uso será limitado. Uso-credenciales: la consulta de origen cruzado se ejecuta con la transferencia de credenciales. Sintaxis: CrossOrigin \u003d "Anónimo".
Altura	El atributo de altura establece la altura de la imagen en PX. Sintaxis: altura \u003d "300".
ismap	El atributo ISMAP indica que la imagen es parte de una tarjeta de imagen ubicada en el servidor (imagen de mapa, una imagen con áreas interactivas). Cuando hace clic en el mapa de imágenes, las coordenadas se transmiten al servidor como una URL de cadena de consulta. El atributo IsMap se permite solo si el elemento Es un elemento descendiente Con el atributo real de HREF. Sintaxis: IsMap.
Longdesc.	Imagen ampliada Descripción URL que complementa el atributo alt. Sintaxis: LongDesc \u003d "http://www.example.com/description.txt".
SRC	El atributo SRC establece la ruta a la imagen. Sintaxis: src \u003d "flower.jpg".
Tamaños.	Especifica el tamaño de la imagen dependiendo de los parámetros de la pantalla. Funciona solo con un atributo SRCSet específico. El valor del atributo es una o más líneas especificadas a través de la coma.
Srcset.	Crea una lista de fuentes para la imagen que se seleccionará en función de la resolución de la pantalla. Se puede utilizar juntos o en lugar del atributo SRC. El valor del atributo es una o más filas separadas por la coma.
USEMAP	El atributo USEMAP define la imagen como imagen de mapa. El valor debe comenzar con el símbolo #. El valor está asociado con el valor del atributo Nombre o ID de etiqueta
ancho.	El atributo de ancho establece el ancho de la imagen en PX. Sintaxis: Ancho \u003d "500".

1.1. Dirección de la imagen

La dirección de la imagen puede estar completamente indicada (URL absoluta), por ejemplo:
URL (http://anysite.ru/images/anyphoto.png)

O a través del camino relativo de documento o catálogo de raíces Sitio:
URL (../ images / anyphoto.png) - Ruta relativa del documento,
URL (/images/anyphoto.png) es una ruta relativa del catálogo de raíces.

Esto se interpreta de la siguiente manera:
../ - significa subir un nivel, al catálogo de la raíz,
Imágenes / - Ir a la carpeta de la imagen,
Anyphoto.png - Indica el archivo de imagen.

1.2. Dimensiones de la imagen

Sin especificar el tamaño de la imagen, el dibujo se muestra en una página de tamaño real. Puede editar las dimensiones de la imagen utilizando atributos de ancho y altura. Si solo se especifica uno de los atributos, el segundo se calculará automáticamente para preservar las proporciones de patrón.

1.3. Formatos de archivos gráficos.

Formato JPEG (Joint Photographic Experts Group). Imágenes de JPEG Ideal para fotos, pueden contener millones de colores diferentes. Aqueje las imágenes mejor que el GIF, pero el texto y las áreas grandes con color sólido se pueden cubrir con manchas.

Formato GIF Formato de gráficos intercambeable). Ideal para comprimir imágenes en las que hay áreas con color sólido, como los logotipos. Los archivos GIF le permiten establecer uno de los colores transparentes, de modo que el fondo de la página web se puede manifestar a través de parte de la imagen. Además, los archivos GIF pueden incluir una animación simple. Las imágenes GIF contienen solo 256 tonos, debido a que las imágenes parecen el color manchado y poco realista como carteles.

Formato png Gráficos de red portátiles). Incluye las mejores características de los formatos GIF y JPEG. Contiene 256 colores y hace posible realizar uno de los colores transparentes, al tiempo que comprime las imágenes en un tamaño más pequeño que el archivo GIF.

Formato de apnito Gráficos de red portátil animada). Formato de imagen basado en formato png. Le permite almacenar la animación, y también admite la transparencia.

Formato svg Gráficas vectoriales escalables). El dibujo SVG consiste en un conjunto de formas geométricas descritas en formato XML: línea, elipse, polígono, etc. Apoyado tanto a gráficos estáticos como animados. Un conjunto de funciones incluye varias conversiones, máscaras alfa, efectos de filtro, la capacidad de usar plantillas. Las imágenes en formato SVG pueden variar en tamaño sin reducir la calidad.

Formato BMP (Imagen de mapa de bits). Es un mapa de bits no comprimido (original), cuya plantilla es una cuadrícula de píxeles rectangulares. El archivo de mapa de bits consiste en un encabezado, paleta y datos gráficos. El título almacena la información de gráficos y archivos (profundidad de píxeles, altura, ancho y número de colores). La paleta solo se indica en los archivos de mapa de bits que contienen imágenes de paleta (8 y menos bits) y constan de no más de 256 elementos. Los datos gráficos representan la imagen en sí. Profundidad de color B. este formato Tal vez 1, 2, 4, 8, 16, 24, 32, 48 bits por píxel.

Formato ICO (Icono de Windows). Iconos de almacenamiento de archivos en Microsoft Windows.. Además, el icono de Windows se usa como un icono en los sitios web en Internet. Es una imagen de este formato que se muestra junto a la dirección del sitio o marcador en el navegador. Un archivo ICO contiene uno o más iconos, el tamaño y la cromaticidad de cada uno de los cuales se establece por separado. El tamaño del icono puede ser cualquiera, pero los iconos cuadrados más utilizados con las partes 16, 32 y 48 píxeles.

2. Etiqueta

Etiqueta

La etiqueta está disponible en el atributo Nombre, que especifica el nombre del mapa. Nombre Valor de atributo para etiqueta

Elemento

3. Etiqueta

Etiqueta Describe solo un área activa como parte de las tarjetas de imagen en el lado del cliente. El elemento no tiene una etiqueta de cierre. Si un área activa se superpone al otro, el primer enlace se implementará desde la lista de áreas.

Tabla 2. Atributos de la etiqueta

Atributo	Breve descripción
Alt.	Especifica texto alternativo para el mapa activo.
Coords.	Define la posición del área en la pantalla. Las coordenadas se establecen en unidades de longitud y están separadas por comas: por circulo - Coordenadas del centro y radio del círculo; por rectángulo - Coordenadas de las esquinas inferiores superior izquierda y derecha; por polígono - Las coordenadas de los vértices del polígono en el orden deseado, también se recomienda indicar las últimas coordenadas iguales a la primera, para la finalización lógica de la figura.
Descargar	Complementa el atributo HREF y le indica al navegador que el recurso debe cargarse en el momento en que el usuario hace clic en el enlace, en lugar de, por ejemplo, para pre-abrirlo (como un archivo PDF). Al especificar el nombre del atributo, establecemos el nombre en el objeto descargable. Se permite usar el atributo sin especificar su valor.
href.	Especifica la URL para referencia. Se puede especificar una dirección de enlace absoluta o relativa.
hreflang.	Especifica el idioma del documento web asociado. Se utiliza solo con el atributo HREF. Los valores recibidos son una abreviatura que consiste en un par de letras que denotan el código de idioma.
Medios de comunicación	Determina qué tipos de dispositivos se optimizarán el archivo. El valor puede ser cualquier consulta de medios.
Rel.	Complementa el atributo HREF con información sobre la relación entre el documento actual y asociado. Valores totales: Alternativa: referencia a una versión alternativa del documento (por ejemplo, formulario de impresión Páginas, traducción o espejo). Autor - Enlace al autor del documento. Marcar es una URL permanente utilizada para los marcadores. Ayuda - Enlace de referencia. Licencia: referencia a información de derechos de autor en este documento web. Siguiente / Anterior: especifica el enlace entre la URL individual. Gracias a este marcado, Google puede determinar que el contenido de los datos de la página está conectado en una secuencia lógica. Nofollow - prohíbe buscador Vaya en los enlaces en esta página o para un enlace específico. Noreferrer: indica que el enlace del navegador no debe enviar el encabezado de solicitud HTTP (referencia), que registra el visitante del sitio de qué página. Prefetch: indica que el documento objetivo debe estar en caché, es decir, El navegador en el fondo carga los contenidos de la página a su caché. Búsqueda: indica que el documento de destino contiene una herramienta de búsqueda. TAG - Indica palabra clave Para el documento actual.
forma	Especifica la forma de un área activa en el mapa y sus coordenadas. Puede tomar los siguientes valores: Rect - Área activa de forma rectangular; El círculo es un área activa en forma de círculo; Poly es un área activa en forma de un polígono; Predeterminado: el área activa lleva todo el área de la imagen.
objetivo.	Especifica dónde se descargará el documento cuando se muestre el enlace. Toma los siguientes valores: _Self: la página se carga en la ventana actual; _Blank: la página se abre en una nueva ventana del navegador; _Parent: la página se carga en el padre-padre; _Top - página se carga en la ventana del navegador completo.
Tipo	Especifica el tipo MIME de archivos de referencia, es decir. extensión de archivo.

4. Un ejemplo de la creación de una imagen de mapa.

1) Ubicación de la imagen original en las áreas activas del formulario deseado. Las coordenadas de las áreas se pueden calcular utilizando un programa para procesar fotos, por ejemplo, Adobe Photoshop. o Pintura..

Higo. 1. Un ejemplo de una marca de imagen para crear un mapa.

2) Preguntamos el nombre de la tarjeta agregándolo a la etiqueta

Jpg "alt \u003d" (! Lang: flores_foto" width="680" height="383" usemap="#flowers"> !}
Higo. 2. Un ejemplo de la creación de una imagen de mapa, cuando presiona el cursor del mouse en la flor, la transición a la página que describe

La mayoría de las páginas web están programadas. Le permite colorear y presentar claramente información. En muchos casos, es mejor mostrar una imagen que dar una descripción de texto largo.

Hay dos formas de colocar páginas de imagen en la página:

• insertar imágenes individuales;
• llenando el fondo con una imagen.

En cualquier caso, la imagen gráfica se toma del archivo.

Insertar imágenes gráficas

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

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

La dirección del archivo gráfico es una URL Etolybo, o el nombre del archivo, posiblemente indicando la ruta. Por ejemplo, para mostrar un archivo gráfico logotip.jpg debe escribirse etiqueta:

< IMG SRC = "logotip.jpg" >

Para aumentar la velocidad de la transmisión de la imagen gráfica en la etiqueta. Puedes usar el atributo ( parámetro adicional) LOWSRC, que toma la dirección del archivo gráfico como argumento. Puede crear dos archivos gráficos: uno (por ejemplo, deje que el archivo logotip.jpg) contiene una imagen obtenida con alta resolución, y la otra (por ejemplo, logotip.gif) es una imagen obtenida con una resolución baja. Luego etiqueta:

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

... Primero presione el navegador para descargar el archivo logotip.gif, y luego a la que reciba para reemplazarlo con el archivo logotip.jpg.

Otra forma de acelerar la descarga de gráficos es especificar el tamaño del área rectangular, en la que se colocará la imagen gráfica utilizando los atributos Ancho (ancho) y Altura (Altura) medido en píxeles. Si especifica estos atributos, el navegador primero resaltará el lugar bajo la programación, prepare el diseño del documento, muestra el texto y solo luego cargue el horario. Tenga en cuenta que el navegador comprime o estira la imagen, incrustándola en el marco tamaño especificado. Un ejemplo de una indicación del tamaño de la imagen:

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

Los gráficos se usan comúnmente con el texto, por lo que se produce la tarea de alineación del texto y la imagen gráfica. Esta tarea se resuelve utilizando el atributo. Alinear. Etiqueta. Con el uso de varios argumentos. Por ejemplo, podemos desear el texto en la derecha o la izquierda. Por lo general, la imagen está incrustada estrechamente con el texto, que puede ser feo. Para evitar esto, puede configurar campos vacíos alrededor de la ilustración. Los campos se crean usando atributos. Vsras Para campos superior e inferior y Nspace. Para campos laterales en la etiqueta . Los argumentos de estos atributos se indican en forma de números que determinan el tamaño de los campos en los píxeles. Para cancelar el flujo alrededor de gráficos, el texto sirve una etiqueta.
.

La siguiente etiqueta establece el flujo alrededor de los gráficos del archivo de logotip.jpg a la derecha (la imagen se dejará del texto):

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

Si desea localizar la imagen a la derecha del texto, entonces necesita un atributo Alinear. Asignar un argumento Derecha:

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

Para establecer campos alrededor de la imagen, debe escribir una etiqueta del formulario:

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

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

Considere un ejemplo de compartir gráficos y textos. Abra el bloc de notas (Notepad del editor de texto) Windows. Escriba en su código HTML usando etiquetas discutidas anteriormente. A continuación se muestra un programa que muestra algunos texto y gráficos. Como un archivo gráfico, puede usar cualquiera de sus archivos disponibles. Aquí se usa logotip.gif.

< HTML >

< HEAD >

< TITLE > Ejercicio 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

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

< H1 > El texto transmite el horario a la derecha.< / H1 >

Higo. 657.. El texto fortalece la imagen a la derecha.

Las amplias posibilidades de posicionamiento preciso de las 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 en las celdas de esta tabla, son imágenes, textos y otros elementos.

Hay cientos de formatos gráficos, pero solo algunos de ellos son compatibles con los navegadores web. En este artículo describimos varios formatos gráficos de archivos disponibles para diseñadores web y, inversamente, deben usarse.

Los formatos gráficos de archivos que son compatibles con la mayoría de los navegadores web populares son: Formato de intercambio gráfico (GIF), grupo de expertos fotográficos conjuntos (JPEG), gráficos de red portátiles (PNG) y gráficos vectoriales. Algunas propiedades de los archivos gráficos:

• Transparencia: esta propiedad permite que la imagen esté en diferentes grados de transparencia de un estado sólido a completamente transparente.
• La compresión es una propiedad que permite que la imagen se almacene en un archivo mucho más pequeño, utilizando algoritmos matemáticos para procesar un grupo de píxeles como un elemento único.
• Weave: permite que la imagen sea cargada primero por líneas impares, y luego, incluso. Esto le permite al visitante ver más la imagen.
• Animación: crea la visibilidad del movimiento utilizando una serie de instantáneas consecutivas. Para un GIF animado, no se requiere un complemento en el navegador y puede funcionar casi en todos los dispositivos.
• La carga progresiva es similar a la obligación por el hecho de que carga solo una parte de la imagen inicialmente, pero no se basa en líneas alternas.

GIF se fundó en 1980 y aceptado por diseñadores web a principios de la década de 1990 como el formato gráfico principal para páginas web. Los archivos GIF utilizan el algoritmo de compresión que hace que el tamaño del archivo sea pequeño para una descarga rápida. GIF está limitado a 256 colores (8 bits), soporte para transparencia y firmware. También es posible crear gráficos animados usando este formato. Todos los navegadores pueden mostrar archivos GIF sin problemas.

Ventajas GIF:

• El formato gráfico más ampliamente compatible.
• Los esquemas se ven mejor en este formato.
• Apoyo la transparencia

Los archivos están comprimidos, pero admiten "colores verdaderos" (24 bits) y son un formato preferido para las fotos donde la pregunta de calidad es muy importante. JPEG admite un formato progresivo que le permite ver casi instantáneamente una imagen que mejora de la calidad cuando la descarga ha terminado.

A diferencia de los archivos GIF, los diseñadores web pueden controlar los archivos JPEG comprimidos, lo que le permite tener diferentes niveles de calidad de imagen y tamaños de archivos.

Ventajas JPEG:

• Gran compresión significa una velocidad de descarga más rápida.
• Produce excelente calidad para fotos y dibujos complejos.
• Soporte de color de 24 bits.

PNG es un formato relativamente reciente que se ingresó como una alternativa para los archivos GIF. PNG admite un color, transparencia, entrelazamiento y puede contener una descripción de texto corta de la imagen que se usa en los motores de búsqueda.

Ventajas de PNG:

• Supera el color de las restricciones de 8 bits en GIF
• Permite el texto Descripción de las imágenes para los motores de búsqueda.
• Apoya la transparencia
• Los esquemas se ven mejor que JPEG

Gráficos vectoriales

La mayoría de los gráficos web son imagen de la trama O un patrón que consiste en una cuadrícula de píxeles de color. Las ilustraciones deben crearse en un gráfico vectorial, que consiste en una descripción matemática de cada elemento que conforma líneas y colores de imagen. Los gráficos vectoriales se crean al atraer programas como Adobe Illustrator o CorelDRAW. Los gráficos vectoriales deben convertirse en cualquier formato GIF, JPEG o PNG para su uso en páginas web.

¿Qué formato debe usarse?

El diseñador web puede elegir el formato GIF o JPEG para la mayoría de las aplicaciones. Pero dado que el tamaño de los archivos GIF suele ser pequeño en comparación con el tamaño archivo jpegLa mayoría de los diseñadores web usarán formato GIF Para el fondo, las cajas, los marcos y cualquier otro elemento gráfico que parezcan perfectamente usando un color de 8 bits.

La mayoría de los diseñadores elegirán formato JPEG Para fotos e ilustraciones donde la compresión no compromete la calidad de la imagen visual.

Como se mencionó, HTML es hoy la base para escribir cualquier página web en la World Wide Web. Al usar CSS, los códigos en el idioma HTML cambian radicalmente. Puedes despedirte de la repuGrnation of Clumsy. Html Tagov solo para lograr uno u otro efectos visuales. En algunas etiquetas HTML o atributos, como, por ejemplo, una etiqueta obsoleta ...

el principal

¡Ordene un sitio web y trato con los negocios!

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

Sitio web — Este es el rostro de la empresa. Y es el canal de comunicación más moderno y eficiente con un posible consumidor. Solo las capacidades del sitio de Internet le permiten usar plenamente todas las formas de informar el mensaje de información al usuario. La información de texto, audio y video se puede presentar dentro de un sitio para familiarizar el consumidor con ellos.

Vía software El sitio puede ser recibido por pagos, hablar en el teléfono, la base de datos, enviar y recibir faxes, intercambiar mensajes SMS y hacer muchas otras acciones. El sitio moderno de Internet es un centro de información, no solo ninguna empresa, sino también de cualquier usuario de Internet.

Y este es un método de ganar-ganar efectivo y, al mismo tiempo, un informe simple y visual de sus ideas o desarrollos a la audiencia más amplia. Y hoy en día, los documentos web escritos en el lenguaje HTML HyperText Markup continúan siendo la forma principal de la presentación de datos en el entorno web.

Las ventajas más importantes de HTML son:

• Fácil, lo que le permite aprender HTML en el momento más corto.
• Posibilidad de crear tus propias páginas web.
• Y HTML funciona absolutamente lo mismo en todas las plataformas existentes de hoy, la compra de equipos adicionales no es necesaria. Y es suficiente para usar cualquier disponible. editor de texto, por ejemplo, Bloc de notas.

En este sitio, intenté describir en detalle todo el proceso de crear el propio sitio web de un sitio web, a saber, publicar un proyecto terminado en Internet para proporcionar acceso a todos los usuarios.

Espero que muchos de mis artículos serán muy útiles, porque yo mismo soy programador, pero este trabajo está muy inspirado por mí.