La etiqueta del enlace define el color. El coqueteo masculino no tiene sentido y es despiadado. ¿Qué es una pseudoclase?

Los enlaces se pueden dividir en dos categorías:
enlaces a recursos externos— se crean mediante una etiqueta y se utilizan para ampliar las capacidades del documento actual cuando lo procesa el navegador;
hipervínculos— enlaces a otros recursos que el usuario puede visitar o descargar.

Cómo hacer hipervínculos en un sitio web

1. Estructura de enlaces

Los hipervínculos se crean usando par de etiquetas. El texto que se mostrará en la página web se coloca dentro de la etiqueta. El texto del enlace se muestra en el navegador subrayado, el color de fuente es azul y cuando pasa el cursor sobre el enlace, el cursor del mouse cambia de apariencia.

Parámetro de etiqueta requerido es el atributo href, que especifica la URL de la página web.

índice de enlaces

El enlace consta de dos partes: puntero Y parte de la dirección. índice de enlaces Es un fragmento de texto o imagen visible para el usuario. Parte de la dirección El enlace no es visible para el usuario; representa la dirección del recurso al que debe acceder.

La parte de dirección del enlace consta de URL. URL(Localizador uniforme de recursos): dirección uniforme de recursos. Al crear direcciones, se recomienda utilizar un guión en lugar de un guión bajo para separar las palabras. EN vista general URL que tiene el siguiente formato:

Método de acceso://nombre del servidor:puerto/ruta

Método de acceso, o protocolo, intercambia datos entre estaciones de trabajo en diferentes redes. Los protocolos de transferencia de datos más comunes:

file proporciona la lectura de un archivo desde el disco local:

Archivo:/gallery/pictures/summer.html

http proporciona acceso a una página web utilizando el protocolo HTTP:

http://site.ru/

https es una implementación especial del protocolo HTTP que utiliza cifrado (generalmente SSL o TLS)

https://site.ru/

ftp realiza una solicitud al servidor FTP para recibir un archivo:

Ftp://pgu/directorio/biblioteca

mailto inicia una sesión servicio postal con el destino y host especificados:

Enviar a: [correo electrónico protegido]

Nombre del servidor describe nombre completo máquinas en la red, por ejemplo, site.ru. Si no se especifica el nombre del servidor, entonces el enlace se considera local, es decir. está en la misma máquina que el documento HTML que contiene el enlace.

Número Puerto TSR , en el que opera el servidor web. Este es un número que debe especificarse si el método requiere un número de puerto (los servidores individuales pueden tener su propio número de puerto distintivo). Si no se especifica ningún puerto, el puerto 80 se utiliza de forma predeterminada. Puertos estándar son:
21-FTP
23-Telnet
70 - tuza
80-HTTP

Camino contiene el nombre de la carpeta en la que se encuentra el archivo.

2. Camino absoluto y relativo

Cuando un enlace especifica solo un nombre de archivo, el navegador asume que el archivo está en la misma carpeta que el documento que contiene el hipervínculo. En la práctica, los sitios web contienen cientos de documentos que se publican en carpetas separadas para que sean más fáciles de gestionar. Para crear un vínculo a un archivo fuera de la carpeta que contiene el documento actual, debe especificar la ubicación o ruta del archivo. HTML admite dos tipos de ruta: absoluta y relativa.

Arroz. 1. Ejemplo de estructura de carpetas

2.1. camino absoluto

camino absoluto indica la ubicación exacta del archivo dentro de toda la estructura de carpetas en la computadora (servidor). La ruta absoluta al archivo brinda acceso al archivo desde recursos de terceros y contiene los siguientes componentes:
1) protocolo, por ejemplo, http (opcional);
2) dominio ( nombre de dominio o dirección IP de la computadora);
3) carpeta (el nombre de la carpeta que indica la ruta al archivo);
4) archivo (nombre del archivo).

Hay dos tipos de grabación. camino absoluto- con o sin protocolo:

Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

Si el archivo está en la carpeta raíz, la ruta al archivo será la siguiente:

http://site.ru/index.html

Si no hay ningún nombre de archivo, se cargará la página web que está configurada de forma predeterminada en la configuración del servidor web (el llamado archivo de índice).

http://site.ru/

Generalmente como archivo de índice actúa como un documento llamado index.html. La presencia de una barra diagonal / significa que el acceso va a la carpeta; si no está allí, va directamente al archivo.

2.2. Camino relativo

Camino relativo describe la ruta al documento especificado en relación con el actual. La ruta se determina en función de la ubicación de la página web en la que se encuentra el enlace. Los enlaces relativos se utilizan al crear enlaces a otros documentos en el mismo sitio. Cuando el navegador no encuentra el enlace protocolo http://, busca el documento especificado en el mismo servidor.

Una ruta relativa contiene los siguientes componentes:
1) carpeta (nombre de la carpeta que indica la ruta al archivo);
2) archivo (nombre del archivo).

Camino para enlaces relativos tiene tres designaciones especiales:
/ señala a directorio raíz y dice que debe iniciar la ruta desde el directorio raíz del documento y bajar a la siguiente carpeta
./ apunta a carpeta actual
../ subir una carpeta (directorio)

La principal diferencia entre una ruta relativa y una ruta absoluta es que camino relativo no contiene el nombre de la carpeta raíz ni de las carpetas principales, lo que acorta la dirección y, si pasa de un dominio a otro, no necesita ingresar una nueva dirección absoluta. pero si recurso de terceros enlazará, por ejemplo, a sus imágenes con direcciones relativas, luego no se mostrarán en otro sitio.

3. Anclas

Anclas, o enlaces internos, crean transiciones a diferentes secciones de la página web actual, lo que le permite moverse rápidamente entre secciones. Esto resulta muy conveniente cuando hay demasiado texto en la página. Los enlaces internos también se crean usando la etiqueta con la diferencia de que el atributo href contiene el nombre del puntero, el llamado ancla, no la URL. El nombre del puntero siempre va precedido del signo #.

Puedes aplicar todo lo que aprendiste en lecciones anteriores a los enlaces (por ejemplo, cambiar la fuente, el color, el subrayado, etc.). La novedad es que en CSS estas propiedades se pueden definir de forma diferente, dependiendo de si el enlace ya ha sido visitado, si está activo o si el puntero del ratón está sobre el enlace. Esto le permite agregar efectos interesantes a su sitio web. Para ello se utilizan las llamadas pseudoclases.

¿Qué es una pseudoclase?

La pseudoclase te permite tener en cuenta varias condiciones o eventos al definir las propiedades de una etiqueta HTM.

a: enlace(color: azul;) a:visitado(color: rojo;)

Utilice |a:enlace| y |a:visitado| para enlaces no visitados y visitados, respectivamente. Los enlaces activos tienen la pseudoclase a:active y a:hover cuando el puntero está sobre el enlace.

Examinaremos cada una de estas cuatro pseudoclases con ejemplos y explicaciones.

Pseudoclase: enlace

La pseudoclase:enlace se utiliza para vincular a páginas que el usuario aún no ha visitado.

a: enlace(color: #6699CC;)

La pseudoclase:visitada se utiliza para vincular a páginas que el usuario ha visitado.

a:visitado En el ejemplo de código, los enlaces visitados son de color violeta.

(color: #660099;)

Pseudoclase: activa

La pseudoclase:activa se utiliza para enlaces activos. a: activo

(color de fondo: #FFFF00;)

Pseudoclase: flotar

La pseudoclase:hover se utiliza para enlaces sobre los cuales se desplaza el puntero del mouse. Esto se puede utilizar para crear. Por ejemplo, si queremos que los enlaces se vuelvan naranjas y en cursiva cuando el puntero pasa sobre ellos, entonces nuestro CSS debería verse así:

a: flotar(color: naranja; estilo de fuente: cursiva;)

Ejemplo 1: Efecto cuando el puntero está sobre un enlace

Los efectos sobre la posición del puntero del ratón sobre un enlace se han convertido en algo habitual. Veremos algunos ejemplos adicionales para pseudoclase: hover .

Ejemplo 1a: espaciado entre letras

Como recordará de la Lección 5, el espacio entre caracteres se puede establecer con la propiedad de espacio entre letras. Esto se puede aplicar a un enlace:

a: flotar(espacio entre letras: 10 px; peso de fuente: negrita; color: rojo;)

Ejemplo 1b: MAYÚSCULAS y minúsculas

En la Lección 5, analizamos la propiedad de transformación de texto, que puede cambiar caracteres de arriba a abajo. minúscula. Esto también se puede utilizar para crear efectos en un enlace:

a: flotar(transformación de texto: mayúsculas; peso de fuente: negrita; color: azul; color de fondo: amarillo;)

Estos dos ejemplos muestran casi posibilidades ilimitadas combinatorio varias propiedades. Puedes crear tus propios efectos: ¡pruébalo!

Ejemplo 2: eliminar el subrayado de enlaces

Pregunta común- ¿Cómo eliminar el subrayado de los enlaces?

Debe determinar cuidadosamente si necesita eliminar el subrayado de enlaces, ya que esto puede reducir significativamente el uso de su sitio web.

La gente está acostumbrada a ver enlaces subrayados en azul en las páginas web y sabe hacer clic en ellos. ¡Incluso mi mamá lo sabe! Si eliminas el subrayado y cambias el color de los enlaces, es muy probable que esto confunda a los usuarios y les impida acceder a todo el contenido de tu sitio web. De hecho, eliminar los subrayados de los enlaces es muy sencillo. Como recordarás de la Lección 5, propiedad de decoración de texto

se puede utilizar para determinar si el texto está subrayado. Para eliminar el subrayado, simplemente establezca la decoración del texto en ninguno. A ( }

decoración de texto: ninguna;

Alternativamente, también puedes configurar text-decoration, junto con otras propiedades, para las cuatro pseudoclases. A ( A: enlace (color: azul; A () a:visitado (color: morado; A () a:activo (color de fondo: amarillo; A ( }

) a: pasar el cursor ( color: rojo;

Reanudar

En esta lección, aprendió qué son las pseudoclases utilizando algunas de las propiedades de lecciones anteriores. Esto debería mostrarle lo que CSS tiene para ofrecer. En la próxima lección te enseñaremos cómo definir propiedades. elementos específicos

02.10.16 730
y grupos de elementos.

enlace HTML se utiliza para vincular a otros recursos utilizados en el documento.

Hay muchos tipos de recursos a los que se puede vincular un documento. Esto se hace usando palabras clave especificado en el atributo de relación ( rel). Deben usarse en la sección como metadatos:

• alternativo;
• autor ;
• ayuda ;
• icono;
• licencia;
• próximo ;
• captación previa;
• anterior;
• buscar ;
• hoja de estilo

Etiqueta en HTML colocado en Y , aunque es más común en como metadatos. Etiqueta puede referirse a un hipervínculo tradicional utilizado para navegar o adjuntar a un documento recursos externos, como CSS y Javascript.

Alternar

Utilizado como alternativa Vistas HTML documento

El siguiente ejemplo muestra dos idiomas alternativos Para de este documento HTML en inglés - francés y español. El atributo hreflang se utiliza para indicarle al agente de usuario qué Código de país ISO 639-1:

<relación de enlace="alternativo" hreflang="fr" type="text/html" href="http://www.site.com/lang/fr/html/this-doc.html"/>

Otro ejemplo usando HTML link rel ofrece tres diferentes documento de texto en inglés, francés y español:

Autor

Se utiliza para obtener información sobre el autor. Normalmente, el hipervínculo conduce a la página del autor. EN atributo dado sólo se puede especificar una etiqueta

Finalmente, puedes agregar la metaetiqueta de autor:

Ayuda

Le permite brindar asistencia a los visitantes de la página. Un agente de usuario que admita ayuda puede tener dos vistas: una pestaña principal para mostrar el documento y otra para mostrar ayuda:

Icono

Este valor HTML link rel apunta al ícono de la página. Puede haber muchos iconos que representen una página. Se utiliza el que sea más adecuado:

Licencia

Próximo

apunta a página siguiente en el documento HTML. Para motores de búsqueda Es bastante útil saber qué página es la siguiente:

captación previa

Este valor de relación de enlace HTML proporciona una pista al agente de usuario de que debe almacenar en caché el recurso para acelerar la carga y el procesamiento. Esto se hace cuando el desarrollador sabe con certeza que se solicitarán los recursos utilizados en la página:

Anterior

define pagina anterior en el documento HTML. Útil para la navegación de páginas.

Lección #8
Implementamos código CSS usando la etiqueta.

Veamos la tercera forma de incrustar código CSS en un documento HTML: Incrustar usando una etiqueta

Entonces, descubrimos que usar etiquetas se puede cambiar apariencia etiquetas en una página, usando global atributo de estilo=" ", puedes cambiar la apariencia etiqueta específica.

Pero ¿qué pasa si necesitas cambiar la apariencia de las etiquetas? en todas las paginas sitio al mismo tiempo? Para esto necesitamos una etiqueta. , debe colocarse al principio de cada documento HTML. Etiqueta debe hacer referencia, para ello tiene el atributo href="".

Cree una carpeta Mi sitio en su escritorio y cree tres archivos HTML en la carpeta:
índice.html
poliarnyi-volk.html
poliarnaya-sova.html
y un archivo CSS:
estilo.css

En archivos HTML, coloque el siguiente código HTML:
índice.html

Onza

El leopardo de las nieves (irbis, ak leopardo) es un gran mamífero depredador de la familia de los felinos. Vive en las montañas de Afganistán, Birmania, Bután, India, Kazajstán, Kirguistán, China, Mongolia, Nepal, Pakistán, Rusia, Tayikistán y Uzbekistán. El leopardo de las nieves es delgado, largo, cuerpo flexible, patas relativamente cortas, cabeza pequeña y cola muy larga.

La longitud del leopardo de las nieves, incluida la cola, es de 200 a 230 cm y pesa hasta 55 kg.

El color del pelaje es gris claro ahumado con manchas oscuras sólidas o en forma de anillo.

El leopardo de las nieves caza principalmente cabras montesas y ovejas; su dieta también incluye jabalíes, faisanes e incluso tuzas. Debido a la inaccesibilidad del hábitat de la especie, los leopardos de las nieves aún siguen siendo poco estudiados. Sin embargo, según estimaciones aproximadas, su número varía en torno a los 10 mil individuos. A partir de 2013, la caza de leopardos de las nieves está prohibida en todas partes.

poliarnyi-volk.html

Página del lobo polar

lobo polar El lobo ártico polar es una subespecie de lobo. Vive en el Ártico y la tundra, en amplias zonas de las regiones del norte, que permanecen inmersas en la oscuridad durante cinco meses al año. Para sobrevivir, el lobo se ha adaptado a comer casi cualquier alimento que se le presente. Los lobos polares se han adaptado bien a la vida en el Ártico: pueden vivir años a temperaturas bajo cero y pasar meses sin ver

El color del pelaje es gris claro ahumado con manchas oscuras sólidas o en forma de anillo.

luz del sol

La esperanza de vida de un lobo polar es de unos 7 años. Su dieta incluye: lemings, liebres, bueyes almizcleros, ciervos y aves.

El búho polar (búho blanco) es un ave de la familia de los búhos. El ave más grande, del orden de los búhos, de la tundra. El búho blanco tiene una cabeza redonda, ojos amarillos, la longitud del cuerpo alcanza los 70 cm, el peso es de 3 kg, la envergadura de las alas es de 165 cm. Área de distribución - territorio de la tundra: Eurasia, América del norte, Groenlandia.

El búho polar suele vivir en área abierta, es raro en los bosques. Se alimenta principalmente de pequeños roedores: lemmings; puede llegar a comer más de 1.600 lemmings al año. La dieta del búho también incluye liebres, pequeños depredadores, pájaros, peces e incluso carroña.

El color del pelaje es gris claro ahumado con manchas oscuras sólidas o en forma de anillo.

Ahora, para cambiar el color de un título, párrafo, enlace, etc., en todas las páginas del sitio a la vez, solo necesita realizar cambios en un archivo: style.css

Hagamos que el texto de los párrafos p de todas las páginas sea verde. Para hacer esto, en style.css, en lugar del valor azul, ingrese el valor verde

PAG (color: verde; )

Ahora el color del texto en los párrafos, todas las páginas del sitio, entre las etiquetas se volvió verde.

Tarea: hacer que el color de los enlaces sea naranja

El atributo rel=" " y su valor de hoja de estilo

Atributo rel=" " etiqueta de enlace le dice al navegador qué tipo de archivo se cargará en la página HTML, significado de la hoja de estilo indica que se cargará un archivo CSS.

En las tres lecciones anteriores, aprendimos tres formas de incrustar código CSS en un documento HTML:

1. La inyección usando el atributo style=" " afecta a una etiqueta, este método también llamado incorporado
2. Incrustar usando etiquetas, afecta a toda la página, este método también se llama interno
3. Incrustar usando una etiqueta , afecta a todo el sitio, este método también se llama externo

¿Te gustaron las lecciones? Apoya el proyecto "Tutoriales para webmasters"!
Puedes enviar desde una tarjeta, teléfono móvil o Yandex.wallet.
El monto mínimo de transferencia es de 30 rublos.

Artículo actualizado: 5 de febrero de 2016

Todo lo que hay en Internet está conectado entre sí mediante hipervínculos. Casi cada transición de una página a otra implica hacer clic primero en un enlace específico. ¿Cómo darle al visitante del sitio una señal de que ya visitó la página a la que conduce un determinado enlace?

Existen muchos métodos para ello, pero ¿cuál es el más adecuado? ¿Definición de color de los enlaces? ¿Subrayado? ¿Imagen? No te olvides de las personas daltónicas, de los ordenadores portátiles y, por supuesto, no te olvides de los navegadores, o mejor dicho, del navegador, el burro favorito de todos. Explorador de Internet. La séptima versión que ha aparecido de este navegador ahora se puede llamar de forma más impresionante: burro. Pero este es un tema para un artículo aparte.

Entonces, comencemos con Jakob Nielsen, un reconocido experto en comodidad y simplicidad. Resumen sus artículos sobre visualización de enlaces (Pautas para visualizar enlaces):

Según él, se pueden evitar los subrayados en el menú de navegación del sitio y en las listas de enlaces. Al mismo tiempo, el visitante debe tener muy claro el papel que desempeñan estos objetos de la página. Por ejemplo, si usa rojo y colores verdes, entonces es necesario subrayar las referencias debido a las formas más comunes de daltonismo.

También es necesario subrayar si la accesibilidad del sitio es una de las prioridades, porque Mucha gente tiene problemas de visión.

Aproximadamente el 74% de todos los sitios utilizan definición de color Enlaces visitados y no visitados. Ésta es una buena tradición de diseño a la que todo el mundo está acostumbrado.

El color de los enlaces no visitados debe ser más claro, más brillante y más saturado que el color de los enlaces visitados, que deben aparecer más descoloridos y apagados. Los dos colores que diferencian un tipo de enlace (que no fue abierto) de otro tipo de enlace (que sí estuvo abierto previamente) deben ser de una tonalidad del mismo color. Sombras color azul más que otros indican que se trata de un vínculo.

El método de Simon Collison ha sido reconocido como uno de los más prácticos y métodos originales. La idea es bastante simple y funciona bien para listas con enlaces. En la imagen puede ver una marca de verificación que aparece frente al enlace en el que el visitante ya hizo clic o estuvo anteriormente en la página a la que conduce la dirección del enlace. Todo el efecto es creado enteramente por ayuda CSS, es decir. El código HTML de la página permanece intacto. Con algunos cambios en el código CSS de Simon, este método se puede aplicar a enlaces normales que no están en listas. El código CSS para este método es:

Ul ( tipo de estilo de lista: ninguno; relleno: 3px; ) li a ( display:block; altura de línea: 150%; ancho: 239px; fondo: URL (ticks_grey.gif); decoración de texto: ninguno; ) li a:enlace, a:activo ( color:#666; ) li a:hover ( color:#F33; posición de fondo: 0 -20px; ) li a:visitado (posición de fondo: 0 -40px; )

En el código escrito anteriormente, el papel de un tick lo desempeña una imagen (ticks_grety.gif), que se eleva (en 20 o 40 píxeles) dependiendo de la acción del visitante (en condición normal Si no se visita el enlace, la imagen no será visible).

El código HTML de la página parece muy simple:

Enlaces visitados y elementos CSS antes y después.

Internet Explorer está inhibiendo el uso generalizado de los pseudoelementos establecidos desde hace mucho tiempo:before y:after , que funcionan perfectamente función requerida determinar los enlaces visitados. Casi todo navegadores modernos sustentan estos elementos.

Para los pseudoelementos:antes y:después, Mike Davidson (y varias personas antes que él) sugirieron usar un radical (una especie de marca de verificación) en lugar de texto. Pero esta marca de verificación no es una imagen, sino un símbolo Unicode (\221A), que aparece después de un enlace al que ya ha estado un visitante específico. Todo el código también está en el archivo CSS y tiene este aspecto.