EntradaImágenes en páginas web. Gráficos en la página web en HTML
Para insertar la imagen en el texto de la página web, use una sola etiqueta (Tabla. P 1). Los atributos de esta etiqueta establecen todos los parámetros de la imagen publicada en la página. Obligatorio es el atributo SRC que determina la dirección y el nombre del archivo gráfico. Si el atributo SRC no está instalado, solo se mostrará un icono de imagen vacío.
Estructura de etiqueta El atributo SRC es:
.
Si el archivo gráfico llamado Institute está en la misma carpeta que la página web, debe escribirse en su colocación:
.
Formato de nombre de archivo
Para acomodar un archivo gráfico con el nombre Minsk, en la dirección D: \\ Collection \\ City \\ Minsk.gif, usted debe grabar .
Usando etiqueta La página web alberga un archivo gráfico ubicado en otra computadora en el Internet global "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
Higo. 4.1. Página web con fotografía 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 acomodar la foto, se crea un párrafo con alineación en el centro.
Lineas horizontales
El alojamiento en la línea web de línea horizontal se lleva a cabo utilizando una sola etiqueta
. Usando los atributos Tamaño, ancho, color y alineado, el grosor, el ancho, el color y el método de alineación de las líneas se cambian en consecuencia.
Considere algunos ejemplos que explican la colocación de las líneas de Gori-Umbrella:
1.
- Línea horizontal para toda la página con un grosor de 2 píxeles.
2.
Ancho \u003d "200" Align \u003d "Derecho"\u003e - Una línea horizontal de color verde 15 píxeles, un ancho de 200 píxeles y saliendo en el borde derecho.
3.
- Línea azul horizontal en toda la página con un espesor de 25 píxeles.
4.
Ancho \u003d "300" Align \u003d "Izquierda"\u003e - Una línea horizontal de color rojo 20 píxeles grueso, 300 píxeles y alineación a lo largo del borde izquierdo.
La muestra de las líneas para cuatro ejemplos grabados se muestra en la FIG. 4.2.
Higo. 4.2. Líneas en la página web.
Mesas
Creando tablas
Crear una tabla se realiza utilizando una etiqueta de pareja
En el código HTML.
Cualquier tabla consiste en líneas, y las líneas son de las células. Para las filas de apareamiento de formulario y las celdas celulares, se utilizan las siguientes etiquetas:
Estas etiquetas se registran dentro de la etiqueta de par.
La formación de la tabla se produce en las filas: se especifica una línea y se especifica el número requerido de celdas, luego la segunda línea, etc.
Para obtener una tabla en la página web que se muestra en la FIG. 5.1, debe marcar el siguiente código HTML:
| Carros | Precio | Vado | 5000 | Golf | 6000 |
|---|
el grosor del límite exterior será igual a 6 píxeles. A los límites de la tabla no se muestran, el atributo de borde es necesario para asignar un valor igual a 0, o simplemente omitir este atributo.
Hola queridos listas de blogs! En este artículo aprenderás todo acerca de cómo insertar una imagen en la página HTML. ¿Tiene varias imágenes que desea poner en su página o desea poner un logotipo en su sitio web? Todo esto es fácil. Después de leer este artículo, puede insertar imágenes en sus páginas HTML sin ninguna dificultad. Para hacer esto, hablemos en detalle sobre Etiqueta img Y sus atributos, consideran brevemente los formatos de archivos gráficos, como GIF, JPEG y PNG, así como vemos las nuevas características de HTML5, que simplifican la inserción de video y audio en el sitio.
Debido al hecho de que los datos gráficos y el texto HTML no se pueden combinar en un archivo, se usa otro enfoque para mostrarlos en el sitio, en lugar de con otras páginas HTML. En primer lugar, las imágenes gráficas y otros datos multimedia se almacenan en archivos separados. Y para su implementación, las etiquetas especiales se utilizan en la página web que contienen enlaces a estos archivos individuales. En particular, la etiqueta es etiqueta img. Habiendo cumplido con una etiqueta de este tipo con la dirección, el navegador primero solicita el archivo apropiado con la imagen, el audio o el video, y solo la muestra en la página web.
Todas las imágenes gráficas son generalmente, se llaman los datos almacenados en archivos individuales de la página web. implementado Elementos de la página.
Antes de insertar imágenes y considerar la etiqueta "IMG" en detalle, vale la pena un poco de aprendizaje sobre los formatos gráficos.
Formatos de imagen gráfica.
Hay muchos formatos gráficos diferentes, pero los navegadores apoyan solo unos pocos. Considera tres de ellos.
1. Formato JPEG(Joint Photographic Experts Group). Formato bastante popular utilizado para almacenar imágenes. Admite un color de 24 bits y retiene todo el tono en las fotos sin cambios. Pero JPEG no admite la transparencia y distorsiona los pequeños detalles y el texto en las imágenes. JPEG se utiliza principalmente para el almacenamiento de fotos. Estos archivos de formato tienen extensiones JPG, JPE, JPEG.
2. Formato GIF(Formato de gráficos intercambeable.). La principal ventaja de este formato es la capacidad de almacenar varias imágenes en un archivo a la vez. Esto le permite crear rodillos animados enteros. En segundo lugar, apoya la transparencia. La desventaja principal es el soporte para solo 256 colores, lo que no es adecuado para almacenar fotos. GIF se utiliza principalmente para almacenar logotipos, banners, imágenes con sitios transparentes y que contiene texto. Estos archivos de formato tienen una extensión GIF.
3. Formato png(Gráficos de red portátiles.). Este formato se desarrolló como reemplazo del GIF desactualizado, así como en cierta medida, JPEG. Apoya la transparencia, pero no permite la creación de animación. Este formato tiene una extensión de PNG.
Al crear sitios, generalmente use imágenes en formato JPEG o GIF, pero a veces use PNG. Lo principal es comprender en qué casos es mejor usar el formato. Si brevemente, entonces:
- El GIF se usa principalmente para la animación;
- PNG es un formato para el resto (iconos, botones, etc.).
JPEG se utiliza mejor para almacenar fotos o imágenes de semitono que no contienen texto;
Insertar imágenes en páginas HTML
Entonces, ¿cómo sigue insertando la imagen en la página web? Insertar la imagen permite soltero etiqueta img. El navegador coloca la imagen en el lugar de la página web donde se reunirá IMG.
Insertar imágenes de código en HTML La página tiene este tipo:
Este código HTML colocará la imagen almacenada en el archivo Image.jpg en la página web, que se encuentra en la misma carpeta con una página web. ¿Cómo podría notar la dirección de la imagen indicada en atributo src. Lo que ya le dije. Por lo tanto, el atributo SRC es un atributo obligatorio que sirve para especificar la dirección del archivo con la imagen. Sin un atributo de la SRC, la etiqueta IMG no tiene sentido..
Le daré algunos ejemplos más para especificar la dirección de la imagen del archivo:
este código HTML insertará una imagen con el nombre Image.jpg a la página, que se almacena en la carpeta de imágenes ubicada en la raíz del sitio web.
En el atributo SRC, puede especificar no solo enlaces relativos a las imágenes. Dado que las imágenes se almacenan en la red junto con las páginas HTML, por lo que cada archivo con la imagen tiene su propia URL. Por lo tanto, el atributo SRC puede insertar la URL de la imagen. Por ejemplo:
Este código insertará la imagen de MySite.RU a la página. URL ADPEC generalmente se aplica si especifica una imagen en otro sitio. Para las imágenes almacenadas en su sitio, es mejor usar enlaces relativos.
La etiqueta IMG es un elemento de mayúsculas, por lo que es mejor colocarlo dentro del elemento de bloque, por ejemplo, dentro de la etiqueta "P" - Párrafo:
Vamos a practicar e insertar la imagen en nuestra página de artículos anteriores en la imagen HTML. Crearé junto al archivo HTML de la carpeta "Images" de la página "y coloque el archivo con la imagen" bmw.jpg ", que se parece a esto:
Luego, la página HTML de la página con la imagen insertada será así:
Y nos fijamos en el resultado de la pantalla en el navegador:
Como no vemos nada complicado en la colocación de imágenes en páginas web. A continuación, considere varios otros atributos importantes de la etiqueta "IMG".
Atributo alt - como opción de repuesto
Dado que los archivos de imagen se almacenan por separado de las páginas web, luego para su recibo, el navegador tiene que realizar solicitudes separadas. Y, y si las imágenes en la página habrá mucho y la velocidad de conexión a la red es pequeña, entonces la descarga de archivos adicionales requerirá un tiempo considerable. Y peor si la imagen se eliminó del servidor sin su conocimiento.
En estos casos, la página web en sí se cargará con éxito, solo se mostrarán rectángulos blancos en lugar de imágenes. Por lo tanto, para informar a la información del usuario que se usa la imagen. Usando este atributo, se indica el llamado texto de reemplazo, que se mostrará en un rectángulo vacío mientras la imagen no arranca:
Y se ve así:
Establecer el tamaño de la imagen.
Todavía hay un par de atributos de etiqueta IMG que debe saber. Este es un par de atributos. ancho. y altura. Puedes usarlos para especificar las dimensiones de la imagen:
En ambos atributos, el tamaño se indica en píxeles. El atributo de ancho indica el navegador de qué ancho debe ser una imagen y el atributo de altura de qué altura. Estos dos atributos se pueden aplicar juntos y por separado. Por ejemplo, si solo especifica el atributo de ancho, el navegador seleccionará la altura proporcional automáticamente al ancho especificado y también, si solo se usa el atributo de altura. Si no especifica estos atributos en absoluto, el navegador puede determinar automáticamente el tamaño de la imagen antes de la salida en la pantalla. Solo vale la pena señalar que el tamaño de la imagen especifica ligeramente acelera el trabajo del navegador cuando se muestra la página.
Sobre esto acerca de insertar imágenes en las páginas, todos, considere cómo insertar audio o video al sitio ...
Inserte video y audio con HTML 5
En la nueva especificación HTML5, aparecieron varias etiquetas nuevas con las que puede insertar fácilmente archivos multimedia. Esto se refiere principalmente a video y audio.
Para insertar audio HTML5 proporciona una etiqueta de pareja Audio.. La dirección del archivo en la que se almacena el anillo de audio, está indicado por el atributo SRC ya familiar para nosotros:
La etiqueta "Audio" crea un elemento de bloque en la página. De forma predeterminada, el navegador no reproducirá el anillo de audio. Lo que hizo, en la etiqueta de audio, debe especificar un atributo especial auto-reproducción. Especial, porque no importa. Una de las presencia de este atributo en la etiqueta para que comenzara a actuar.
De forma predeterminada, el anillo de audio no se muestra en la página web. Pero si en la etiqueta "Audio" pone un atributo sin sentido control S.El navegador se mostrará en el lugar de la página web donde se encuentra la etiqueta de audio, los controles de reproducción del anillo de audio. Incluyen el botón de inicio y pausar la reproducción, las escalas de reproducción y el control de volumen.
Definición 1.
La página web es un archivo de texto creado en HTML y se encuentra en World Wide Web (www). La página web, excepto el texto, puede contener enlaces de hipertexto para los que puede realizar la transición a otras páginas web y verlas, así como las inserciones en forma de gráficos, animaciones, videoclips y música.
Usando el idioma HTML, puede:
- Crea y edita páginas web.
- Edite documentos de formato HTML de Internet, teniendo en cuenta el funcionamiento de todos los objetos implementados en el documento (imágenes, animaciones, etc.).
- Usando los enlaces de hipertexto y la capacidad de introducir en un documento de dibujos, diagramas, animaciones, videoclips, acompañamiento musical y de habla, efectos especiales de texto, creación de presentaciones multimedia, presentaciones de diapositivas, proyectos de demostración.
Nota 1.
Las imágenes gráficas generalmente se almacenan en archivos separados. En HTML, hay etiquetas especiales, con la ayuda de las cuales en los códigos de páginas web se prescriben enlaces que son direcciones reales de estos archivos en Internet. Reunión de tales etiquetas, el navegador web hace una solicitud al servidor web al archivo apropiado con la imagen, un audio o video y lo lleva a la página web en la ubicación de esta etiqueta. Cualquier dato (imágenes, audio y videos, etc.), que se almacenan en archivos individuales de la página web, se denominan páginas web incorporadas. Considere una lea más del proceso de agregar una imagen a la página web.
Añadiendo imágenes a una página web
El atractivo de las páginas web está precisamente en los gráficos y otros objetos diferentes utilizados en ellos. Añadir imagen a la página no es difícil. Y agregue gráficos capaces de hacer que el aspecto de la página web sea más presentable y profesional, se requerirá mucho más difícil, se requerirá un conocimiento especial.
Agregar una imagen a la página puede estar usando una etiqueta de origen de una imagen que se vea:
donde - la etiqueta en sí, y SCR es su atributo. Dado que el atributo SCR es obligatorio, se puede decir que toda esta entrada es una etiqueta común. En la etiqueta de origen, la parte de cierre correspondiente no se usa, ya que la etiqueta de origen es autosuficiente y, por lo tanto, cuando se usa, es necesario agregar una línea oblicua de cierre al final :.
Añadiendo inscripciones alternativas
En Internet, a menudo puede encontrar varias inscripciones que se muestran cuando pase el puntero del mouse a cualquier objeto gráfico de la página web. Estas inscripciones generalmente contienen información adicional sobre la propia imagen o sobre el área de la página en la que se encuentra.
A continuación se muestra el código NTML en el que se agrega el atributo ALT dentro de la etiqueta. Este atributo es similar al atributo SRC informa al navegador para obtener información adicional sobre la imagen y también se puede usar junto con el TEG.
alt \u003d "(! Lang: ¡Es una foto!" />!}
La función de atributo Alt es determinar para el elemento gráfico del texto alternativo agregado a la página web. Se llama alternativa porque se muestra en la pantalla como una alternativa para la imagen misma. El atributo ALT realiza otra característica importante. Le permite al diseñador web estar seguro de que si el visitante de la página no ve la imagen en su pantalla, de todos modos, al menos, puede familiarizarse con la información textual agregada a esta imagen.
Cuando se utiliza el atributo ALT para cada etiqueta, es importante estar atento a no asignar mensajes de texto en elementos gráficos. Por ejemplo, no tiene sentido agregar inscripciones alternativas de texto a los elementos de la aparición de la página. Para evitar dichos errores, puede asignar un atributo de valor vacío de estos elementos (Alt \u003d "). Si no especifica los valores a otros atributos, el navegador reproducirá la imagen en el tamaño original, mientras que las líneas del borde superior de la imagen con el borde superior de una serie de cadenas de texto. Sin embargo, puede cambiar los dos parámetros usando las etiquetas de estilo.
Atributos de la imagen
La etiqueta tiene atributos que le permiten cambiar el tamaño de las imágenes. Aquí hay algunos de ellos:
- altura: con ella, está determinada por la altura de la imagen en píxeles o porcentajes;
- ancho: use el ancho de la imagen en píxeles o porcentajes.
Ajuste de la altura y el ancho de la imagen.
Las dimensiones de las imágenes publicadas en las páginas web se pueden configurar utilizando los atributos anteriores. Además, sus valores se especifican como un número fijo de píxeles, o como un porcentaje en relación con el tamaño de la página. En el código HTML a continuación, la primera etiqueta contiene los tamaños de la imagen original en píxeles (60 píxeles verticalmente y 60 píxeles horizontalmente), el segundo ancho de etiqueta de la misma imagen se establece igual al 6% del ancho de la página, y el La altura es del 10% en relación con la altura de la página.
alt \u003d "¡Esta es una foto!" Peso \u003d "60" ancho \u003d "60" /\u003e
alt \u003d "¡Esta es una foto!" Altura \u003d "10%" ancho \u003d "6%" /\u003e
Nota 2.
Al reproducir imágenes en su ventana, el navegador está igualmente bien afrontar el procesamiento de los valores de ambas especies. Sin embargo, es necesario recordar que los visitantes de las páginas web en las computadoras se pueden instalar en la resolución en pantalla que no sea la suya. Por lo tanto, cuando el tamaño de la imagen cambia, definitivamente debe configurar ambos valores de imagen (altura y anchura). Cuando cambia solo uno de estos valores, la imagen se puede estirar en la pantalla u horizontalmente.
Puede usar la creación de una ilusión de una carga de imagen más rápida. Para hacer esto, siempre debe especificar los valores de los atributos de altura y anchura independientemente de si las dimensiones de la imagen se cambian o no. Dado que informan al navegador información importante sobre el número de espacio requerido para colocar la imagen en la página. En respuesta, el navegador indica el espacio que necesita para la imagen y continúa construyendo otros elementos de la página, sin detener la descarga de la imagen en sí. En este sentido, parece que la página está cargada más rápido, ya que sus visitantes no tienen que esperar una carga completa de la imagen para ver otra información en la página.
Para que la imagen en cualquier pantalla, independientemente de su permiso, tomó exactamente un espacio específico sobre el ancho de la página, debe usar valores porcentuales. Si es necesario que el permanente sea el permiso del dibujo en sí (su tamaño en los píxeles), es necesario usar valores en píxeles.
Nivelación de texto y gráficos.
Para alinear la imagen a la derecha (derecha) o hacia la izquierda (izquierda), el borde de la cadena de texto usa el atributo de etiqueta de alineación. Por ejemplo:
alt \u003d "¡Esta es una foto!" Peso \u003d "60" ancho \u003d "60" align \u003d "Derecho" /\u003e
Para alinear la imagen verticalmente en relación con la cadena de texto, también puede usar este atributo que pueda tomar valores superior, inferior y central. El valor superior indica la alineación del borde superior de la imagen a lo largo del borde superior de su texto circundante. El valor inferior indica la alineación del borde inferior de la imagen a lo largo del borde inferior de su texto circundante. El valor central indica la alineación del centro de imágenes en el centro de cadena de texto.
Usando imágenes como referencias
Las imágenes también se utilizan para diseñar hipervínculos a otros documentos. En el HTML, la imagen se convierte en un hipervínculo, así como la inscripción. Para hacer esto, el TEG se usa en el que el elemento de la página es (en nuestro caso, la imagen), que debería ser una referencia. El siguiente enlace se cambiará a esta imagen.
Miniaturas de imágenes
Además del método anterior, en el que la imagen actúa como un hipervínculo, también se puede usar como un hipervínculo que la transición de una imagen a otra. Esto es necesario en los casos en que el tamaño de la imagen que se quiere publicar en la página web es bastante grande y se cargará durante mucho tiempo, lo que es inaceptable para muchos visitantes. Por lo tanto, cree una copia reducida de esta imagen (miniatura) y represente el hipervínculo. Si el visitante de la página está interesado en esta imagen, él, al hacer clic en la miniatura, podrá ir a ver la imagen de pleno derecho. Damos un código de ejemplo:
alt \u003d "Haga clic para ver la imagen normal".
peso \u003d "60" ancho \u003d "60" /\u003e
Secretos de uso exitoso de imágenes.
Las imágenes llevan mucha información visual para los visitantes, y los hace atractivos, además, son bastante bonitos para agregar a la página web, pero al mismo tiempo necesitas adherirse a ciertas reglas para crear el sitio, si lo queremos para hacerse popular en la red.
Al crear páginas, debe intentar colocar imágenes de tamaños pequeños en ellos, ya que las imágenes de dimensión general requerirán un montón de tiempo para descargar, y algunos usuarios aún utilizan canales de ancho de banda bajos para acceder a la red, y por lo tanto el tamaño de la descarga. Los archivos tienen para ellos fundamental importancia.
Nota 3.
El tamaño total de todo el archivo de documento HTML completo es importante, lo que, a su vez, dependerá no solo del tamaño de las imágenes contenidas en ella, sino también en su cantidad. Debe estar atento al usar el atributo ALT para que el contenido del mensaje de texto siempre corresponda a la imagen misma. Y en el caso opuesto: es necesario asegurarse de que la imagen corresponda a la información de texto presentada en la página.
Cuando se usa imágenes prestadas en Internet, en la página que se está creando, debe verificar si estas imágenes están protegidas por derechos de autor.
Imágenes html añadido a las páginas web usando una etiqueta . El uso de gráficos hace que las páginas web sea visualmente más atractiva. Las imágenes ayudan mejor transmitir la esencia y el contenido del documento web.
Con la ayuda de etiquetas HTML.
Inserte imágenes en el documento HTML
1. Etiqueta ![]()
Elemento Representa la imagen y su contenido de copia de seguridad que se agrega utilizando el atributo ALT. Como elemento
es una línea, entonces se recomienda colocarlo dentro del elemento de bloque, por ejemplo,
O
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:
| 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 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). Las imágenes JPEG son ideales 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 del 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í. La profundidad de color en este formato puede ser 1, 2, 4, 8, 16, 24, 32, 48 bits por píxel.
Formato ICO (Icono de Windows). Formato de almacenamiento de iconos 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.
| 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: El suplente es un enlace a una versión alternativa del documento (por ejemplo, un formulario impreso de una página, 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: evita que el motor de búsqueda vaya a los enlaces en esta página o por 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: especifica la 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 una tarjeta. 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
Colores en mesa
Cómo construir en la tabla de mesa
Listas en listas
LISTAS DE DEFINICIONES
Lista numerada
Lista
Cómo crear en la lista de lista
Hay tres tipos principales de listas: listas marcadas, numeradas y de definición. La principal diferencia en los tipos enumerados es el método de numeración y estructura.
Más a menudo se usa no medido, o una lista etiquetada. La lista de etiquetas está configurada por etiquetas y los puntos de lista entre estas etiquetas, usando la etiqueta
Lista numerada Muy recordamientos marcados. La única diferencia es que en una lista numerada antes de cada punto en lugar de marcadores gráficos, los números de serie o las letras se colocan automáticamente.
La lista numerada se establece usando etiquetas. Como en la lista marcada, cada artículo está configurado por la etiqueta
- Cinta de la palabra clave.
- . Etiqueta
- Especifica un elemento separado, es decir, el término definido y la etiqueta
- - El resto de la información que se muestra en la siguiente línea con el guión. Se llama la segunda línea de información. definición. La lista de definiciones se especifica de la misma manera que otras listas. La única diferencia es dos etiquetas para cada elemento.
Una de las propiedades maravillosas de las listas es la capacidad de invertirlos entre sí. Un archivo adjunto de la lista a la lista se realiza de la misma manera que sea fácil de crear una lista. No hay etiquetas HTML especiales para esto. Para no confundir el navegador, asegúrese de haber cerrado cada lista interna usando la etiqueta. Incluso puedes invertir diferentes tipos de listas.
Juega todas las listas anteriores
Las listas tienen un inconveniente, son unidimensionales. Esto significa que solo puede tener información sobre las siguientes líneas. Las tablas también le permiten localizar datos no solo por líneas, sino también por columnas.
Para configurar tablas use una serie de etiquetas. Etiquetas
y
Enmarque la tabla completa, y varias otras etiquetas determinan cómo se mostrará la información. La tabla muestra una descripción completa de las etiquetas de la tabla.Etiquetas HTML para construir tablas:
Etiquetas Descripción
Y estas etiquetas cubren la mesa. Etiqueta
Cinta \u003d 1 - Numeración estándar (1,2,3,4,5, ...)
Cinta \u003d a - letras mayúsculas (A, B, C, D, ...)
Cinta \u003d letras urgentes (A, B, C, D, ...)
Cinta \u003d I - Números romanos (I, II, III, IV, ...)
Cinta \u003d i - Números romanos en minúscula (I, II, III, IV, ...)
Las listas de definiciones se consideran algo diferentes a otros tipos de listas. Para describir cada elemento de la lista en este caso, se aplican dos etiquetas, y no una etiqueta