Otros tipos de hipervínculos

Bookmark Hipervínculos

Un vínculo de marcador (comúnmente llamado un enlace ancla) es útil cuando la página web es bastante larga, y los usuarios tienen que desplazarse hacia abajo para leer todo. Puede insertar enlaces favoritos para facilitar la navegación. Cuando los usuarios hacen clic en sus enlaces, van a saltar a la sección diferente de sus páginas web. Usted puede incluso utilizar un vínculo de marcador para saltar a otra página Web, y de vuelta al mismo lugar donde lo habían dejado.
Hay dos partes en el marcador: El enlace puede hacer clic en sí, y el lugar donde usted desea ir.
El lugar donde usted desea ir, el destino para el clic, de nuevo utiliza la etiqueta <A>. Esta vez, el atributo HREF añadido no es sino ID (lo que solía ser el nombre en las versiones anteriores de HTML). A continuación, alrededor del texto o de la imagen de la etiqueta. De esta manera:

 <A ID ="section1"> En </ a> esta primera sección, discutiremos Links

Hemos rodeado la palabra "A" con nuestro destino favorito. El nombre de la propia identidad, la parte que sigue al signo igual, puede ser cualquier cosa que quieras. Pero vamos a usar ese ID en la parte de enlace del marcador. Aquí está el enlace real, la gente parte de ver y haga clic en.

<A HREF = "#section1"> Haga clic aquí para ver la Sección Primera </ A>

Tenga en cuenta que estamos de vuelta en el atributo HREF. Esta vez, después del signo igual, hay un símbolo de hash / libra (#). Después de que el símbolo de hash que escriba el ID que utilizó en el paso uno. A continuación, escriba el texto que la gente haga clic en. Por último, se cierra la etiqueta con </ A>.
Usted puede agregar un marcador a otra página web, si lo desea. En este caso, el enlace sería el siguiente:

<A HREF = "page2.html#section2"> Haga clic aquí para ver la Sección Dos </ A>

Tenga en cuenta que el símbolo de hash es ahora - después de que el nombre de una página web. El ID del marcador destino sigue al símbolo de hash. No hay ningún espacio entre los dos.
El enlace de destino en sí sería entonces ir a un lugar en page2.html. Si tuvieras otro marcador en la página dos, usted podría tener el usuario saltar de nuevo al mismo lugar donde lo habían dejado.

Email Links

Un enlace de correo electrónico se puede añadir a las páginas web, también. Cuando los usuarios hacen clic en este enlace de correo electrónico, su software de correo electrónico se iniciará. En el campo "Para" caja del software de correo electrónico, su dirección de correo electrónico aparecerá. El código de un enlace de correo electrónico es la siguiente:

<A HREF = Email "MailTo:online@homeandlearn.co.uk"> nosotros </ A>

Observe que el enlace es el tipo HREF. Después del signo igual tiene lo siguiente:

Mailto:

Mailto es una sola palabra, y es seguido por dos puntos. Luego, coloque su dirección de correo electrónico después de los dos puntos, sin necesidad de introducir un espacio. A continuación, escriba un corchete angular de cierre (>) antes de escribir el texto que queremos que la gente haga clic en para enviarle un correo electrónico. La etiqueta de cierre del ancla </ A> termina si fuera poco.
Y eso es todo por correo electrónico - muy simple!
Pruebe el código de correo electrónico en una página web, guarde su trabajo y ver qué pasa cuando se ve la página web y haga clic en el enlace de correo electrónico.
Hay, sin embargo, un gran peligro de utilizar un vínculo de correo electrónico en sus páginas web: los spammers han escrito los programas llamados "bots" para rastrear la Internet en busca de MailTo. Si el "bot" que encuentra, su dirección de correo electrónico será cosechado. En resumen, es mejor no utilizar la etiqueta de correo electrónico. Mucho mejor es usar scripting para sus direcciones de correo electrónico. Por ejemplo, es algo de JavaScript que hace el mejor trabajo, ya que los spammers automatizados "robots" no se puede leer:

<SCRIPT Type="text/javascript"> LANGUAGE="JavaScript"

document.write ("<P> </ P> <center> <H1> Contact Me </ H1> </ center>")

document.write ("<P align = Center> Haz clic abajo para enviarme un correo electrónico </ P>")
var atSign = "@"
var firstPart = "my"
var ispP1 = "email"
var ispP2 = "gmail"
var ispP3 = ".com"
var = wholeAddress firstPart  + ispP1 + atSign + ispP2 + ispP3

var mToPart1 = "mai"
mToPart2 var = "lto:"
var mt = mToPart1 + mToPart2
var hrefP1 = "<a href=" + mt + + wholeAddress "> Haga clic aquí para enviarme un correo electrónico </ a> "

document.write ("<center>" + hrefP1 + "</ center>")

</ SCRIPT>

Usted no tiene que ser capaz de entender todo el código de seguridad. Pero note cómo la dirección de correo electrónico está cortada en pedazos con estas líneas:

var atSign = "@"
var firstPart = "my"
var ispP1 = "email"
var ispP2 = "gmail"
ispP3 var = ".com"

La dirección es volver a montar más tarde y ellos escriben.

Los enlaces a otros archivos (documentos de Word, archivos ZIP, PDF, etc)

Usted puede colocar un enlace en su página web a archivos que no sean imágenes y páginas web. Un enlace se puede hacer a todo tipo de diferentes tipos de archivos. Por ejemplo, si usted tiene el archivo PDF que desea compartir con los demás, el código sería el siguiente:

<A HREF = "MyPDF.pdf"> Descarga el PDF </ A>

Cuando el vínculo se hace clic en, el navegador podrá ver la extensión de archivo. Pdf y tratar de abrirlo. Puede hacer que el documento se abren en una nueva ventana añadiendo target = "_blank" href en el código A, al igual que lo hizo anteriormente.
No es necesario añadir nada especial para que la gente descarga archivos como archivos PDF o documentos de Word o archivos comprimidos. Sólo un enlace normal con el nombre del archivo después de la parte HREF lo hará.

Imágenes como enlaces

Usted puede convertir imágenes en hipervínculos. Lo único que tienes que hacer es rodear la imagen con una etiqueta A HREF. De esta manera:

<A HREF="pages/about.html">

<IMG SRC="nav_icon.gif"> About this site
</ A>

El resultado sería este, en el navegador web Firefox:

Sin embargo, Internet Explorer mostrará el icono de la siguiente manera:

Los iconos tienen ahora un rectángulo azul alrededor. Esto se debe a que son hipervínculos primera y segunda imágenes. Para deshacerse del rectángulo azul puede agregar esto a la etiqueta IMG:

<A HREF="pages/about.html">

<IMG SRC="nav_icon.gif" border="0"> About this site

</ A>

Para ello hemos establecido el atributo BORDER a cero. Esto elimina el rectángulo azul en Internet Explorer.
En la siguiente lección, usted aprenderá acerca de CSS e hipervínculos. 

 

 

<< Enlaces a otras páginas | CSS hipervínculos >>

Volver a la Página Principal

Enlaces a otras páginas Web

La vinculación en el código HTML que se hace con la etiqueta de anclaje, la etiqueta <A>. La letra "A" en la etiqueta es seguido por un atributo. Para un enlace a otra página web, la "A" es seguido por "HREF". Para establecer un marcador en la misma página, la "A" es seguido por "NOMBRE", que verá la manera de hacerlo más adelante.
Echa un vistazo a este ejemplo, que es un enlace con el popular motor de búsqueda Google:

<A HREF = "http://www.google.com/"> Google Search Engine </ A>

Observe que todos los soportes de ángulo (<>) están en el enlace. Después de la primera, tenemos la parte "A" de la etiqueta. Luego tenemos la parte HREF, lo que significa un enlace a otra página web. Después de eso viene un signo igual (=). Después del signo igual viene la dirección de la página web en sí. La dirección es sensible a mayúsculas, así que si hay una letra mayúscula en la dirección, asegúrese de incluirlo. Esta dirección www.google.com es diferente de este www.gOOgle.com dirección.
Después de que la dirección viene el corchete angular de cierre (>). Luego viene el texto que la gente ve, el texto que quieres que haga clic. Para cerrar una barra de navegación, se utiliza la etiqueta de anclaje final. ¿Cuál es el siguiente: </ A>
Pero vamos a conseguir algún trabajo práctico realizado.
Abra su archivo de texto de la plantilla. Haga clic en File > Save As en el menú del Bloc de notas (o cualquier editor de texto que esté utilizando). Cuando el cuadro de diálogo Guardar como aparece navegar a la carpeta HTML:

Así que vamos a guardar la nueva página web fuera de la carpeta de páginas.
En el cuadro Nombre de archivo, escriba index.html. Asegúrese de que la opción Save As área Tipo, dice All Files, si utiliza Windows. Antes de hacer clic en el botón Guardar la ventana del Explorador debería tener este aspecto:

Cuando el botón se hace clic en Guardar, usted debe tener una página web llamada index.html en la carpeta HTML:

Lo que vamos a hacer es poner un enlace en nuestra página de índice. Cuando se hace clic en este hipervínculo vamos a decirle al navegador a cargar una página llamada about.html. Vamos a guardar este nuevo relacionado con la página en nuestra carpeta de páginas.
Por lo tanto, utilice el archivo de texto de la plantilla para crear una nueva página web. Al guardar la página, haga doble clic en la carpeta para mover las páginas dentro de él. En el cuadro Nombre de archivo, escriba about.html. A continuación, guarde su página:

Por lo tanto, tenemos una página web en la carpeta HTML y una página web en la carpeta de páginas. Ahora tenemos que unirlos.
Abra usted código de la página index.html. Inserte la siguiente línea entre las dos etiquetas BODY:

<A HREF="pages/about.html"> Sobre este sitio </ A>

El código debería tener este aspecto (¡hemos añadido un título):

Guarde su trabajo y cargar la página en el navegador. Usted debe ver esto:

Y eso es un hipervínculo? Tenga en cuenta que la única cosa en la página visible para el visitante es el texto "Acerca de este sitio". El código que escribimos se convierte en texto normal en un enlace que la gente puede hacer clic en. El código en sí era la siguiente:

<A HREF="pages/about.html"> About This Site </ A>

Así que para convertir texto en un enlace que empezar con una escuadra seguido por la letra A. Luego de un espacio tipo HREF,. Un signo igual viene a continuación. La página que desea establecer el vínculo va entre comillas. Pero note que empezamos con el nombre de la carpeta:. Pages/about.html Esto dice, "Busca una página llamada about.html Esta página se encuentra en la carpeta de pages.".
Escriba un soporte en ángulo hacia la derecha para poner fin a la primera parte del código de enlace. El texto que desea que la gente vea que viene a continuación "Acerca de este sitio". Para envolverlo todo, necesita la etiqueta de cierre hipervínculos: </ A>.
Al hacer clic en su enlace, usted debe encontrar un montón de páginas en blanco en el navegador. Si nos fijamos en la barra de direcciones, verá que dice about.html en el extremo. Ha vinculado a una nueva página!
Para volver a la página de índice, es necesario otro enlace.
Abre tu código de la página about.html. En la página sobre, necesitamos construir el HREF correcta. No podemos hacer esto:

HREF="pages/index.html"> <A Ir a la página de inicio </ A>

El HREF anteriormente apunta a una página de índice en la carpeta de páginas. Pero nuestra página de índice no se encuentra en esta carpeta. Se encuentra en la carpeta HTML, que es una carpeta arriba de las páginas. Al igual que hicimos para las imágenes, podemos utilizar dos puntos y una barra diagonal hacia delante:

<A HREF="../index.html">

Dos puntos y una barra diagonal., Recordar, decir "Ir a la carpeta"
Así que insertar el siguiente código en su página about.html:

HREF="../index.html"> <A Ir a la página de inicio </ A>

Guarde su trabajo y actualiza la página en tu navegador. Haga clic en el hipervínculo en la página about.html. Usted debe saber que la página de índice se carga. Al hacer clic en el enlace de la página de índice, la página sobre se cargará.
Ejercer
Crear una página web de terceros. Guárdalo en tu carpeta de páginas y lo llaman contact.html. Crear un enlace desde la página de índice para esta nueva página. Crear un enlace desde la página de contacto para la página de índice.

Cuando termine el ejercicio anterior, tendrá dos enlaces en la página de índice. Ellos podrían tener este aspecto:

Usted puede utilizar las técnicas de HTML que hayas aprendido hasta ahora para mejorar el aspecto de estos enlaces. Por ejemplo, es posible que los enlaces van verticalmente en lugar de horizontalmente. En ese caso, te rodean hipervínculos código con etiquetas P. Aquí está el código de dos enlaces verticales en la página de índice:

El resultado sería el siguiente:

Sin embargo, no se preocupe demasiado acerca de la presentación por ahora ya verás cómo mejorar los vínculos de navegación con CSS y HTML Muestra un poco más tarde. Pero intenta este ejercicio.

Ejercer
Tiene dos enlaces en cada uno de sus tres páginas. La página about.html debe tener enlaces que llevan a la página de índice y la página de contacto. La página conact.html debe tener enlaces a la página de índice y la página sobre.

La parte difícil sobre el ejercicio anterior está recibiendo la parte HREF derecha. Sólo recuerde que cuando las páginas HTML se encuentran en la misma carpeta que usted sólo tendrá que escribir el nombre de la página que estás enlazando. Así que este:

HREF = "page_name_here.html"

en lugar de esto:

HREF = ".. / Page_name_here.html"

o esta:

HREF = "Páginas / page_name_here.html"

Sólo estás usando las reglas de archivo mismas referencias en que aprendió en la sección de imágenes.

El atributo de destino

Al igual que la etiqueta IMG, la etiqueta A HREF puede tener atributos. Uno de ellos es el llamado TARGET. El atributo TARGET se usa para decirle al navegador en el que desea abrir el enlace. Por ejemplo, se puede decir que el navegador abra la página vinculada en una ventana nueva del navegador. Hay varios valores para elegir:

_blank
_parent
_self
_top

Sin embargo, el único realmente útil en la versión HTML 5 está en blanco. El valor predeterminado es AUTO, así que no es necesario especificar un atributo TARGET mayor parte del tiempo. Si desea que el enlace se abra en una nueva ventana, el código es el siguiente:

<A Target="_blank" HREF="pages/about.html"> Acerca de este sitio </ A>

Tenga en cuenta el carácter de subrayado antes de la palabra "blanco". Pierda ésto y su atributo TARGET no va a funcionar.
Los otros dos atributos Target son para cuando su sitio web utiliza algo llamado MARCOS. Los marcos se va fuera de uso, sin embargo, y no se recomiendan para HTML5.

Los colores de hipervínculo

Puede configurar sus propios colores para hipervínculos. El valor por defecto es cualquier cosa que el usuario ha configurado en el navegador, generalmente azul, con un subrayado azul. Pero usted no tiene que tener color azul. La etiqueta A viene con tres atributos que pueden ayudarle a reemplazar la configuración predeterminada del navegador:
LINK
Establecer el color de un enlace antes de que se ha hecho click en
ALINK
Establecer el color de un enlace cuando el vínculo se hace clic en
VLINK
Establecer el color de un enlace después de que se ha hecho click en
La. A y la V por encima de soporte para activos y visitados Se utilizan de esta manera:

<A HREF="pages/about.html" LINK="red"> Acerca de este sitio </ A>

Así que usted seleccione el atributo que desea utilizar y, a continuación, elija un color para los enlaces. Esto también puede ser un valor hexadecimal o RGB.
Pruebe a cabo por sí mismo con los enlaces en cualquiera de sus tres páginas web. Tenga en cuenta, sin embargo, que la gente espera un hipervínculo a ser azul con un subrayado - es una pista visual que va a asociar a algún contenido extra. También, colores de los enlaces utilizados de esta manera están ahora fuera de moda. Es mejor utilizar los estilos CSS para los hipervínculos. Vas a ver cómo se hace esto en una lección posterior.

En la siguiente lección, usted aprenderá acerca de otros tipos de hipervínculos. 

 

 

<< Hipervínculos  | Otros enlaces >>

Volver a la Página Principal

Los hipervínculos HTML - Hyperlinks HTML

Los hipervínculos son la columna vertebral de la Web. Ellos proporcionan un medio para conectar una pieza de información (una página web, por ejemplo) a otra pieza de información. Si ha diseñado dos páginas web, un hipervínculo proporcionará una forma de saltar de una página a la otra. Si usted tiene una página web de largo, un hipervínculo puede ser utilizado como un marcador para ayudar a la gente saltar de una parte de la página a la otra, y viceversa. Esto es lo que se ve como un hipervínculo (el texto azul subrayado):

Pero vamos a hablar de lo que sucede cuando el vínculo se hace clic sobre.

¿Qué es un Hyperlinks?

Al hacer clic en un hipervínculo a otro sitio web (asumiendo que usted está conectado a Internet), esto es lo que sucede.
Su navegador recopila la información sobre la conexión y envía la solicitud a algo que se llama un servidor de nombres. El servidor de nombres traduce el texto del enlace (tutoriales-equipo.blogspot.com, por ejemplo) a una serie de números. Estos números se llama dirección IP. Estos cambios son necesarios porque las computadoras no hablan en un lenguaje escrito. Así que el equipo necesita algo que puede comprender. Una dirección IP es un conjunto de cuatro números separados por puntos (IP versión 4). Cada conjunto de números es entre 0 y 255. Así que cuando usted haga clic en el vínculo, la dirección de texto será traducido a una dirección IP, algo así como 213.209.156.97.
La dirección IP se usa para identificar un ordenador en particular. Si el equipo, normalmente el servidor de nombres, no tiene la dirección en su base de datos, se pasa la dirección más arriba en la cadena alimentaria servidor de nombres. Si no hay ningún servidor de nombres puede encontrar la dirección IP, la falla se pasa de nuevo a tu navegador. En esta etapa, es probable que vea un mensaje de error 404.
Si la dirección se encuentra, sin embargo, la dirección IP se envía a su navegador. El navegador contacta con el servidor web que tiene la página web solicitada. La página es enviada a su navegador. Sin embargo, ese no es el final porque las solicitudes se hacen uno a la vez. Si la página web contiene imágenes, el navegador se ve esto y luego pedir que las imágenes se trajo de vuelta a la página web también. Una imagen a la vez.

Localizador Uniforme de Recursos

Un localizador uniforme de recursos o URL, que comúnmente se llama una dirección. La dirección de nuestra página web es http://tutoriales-equipo.blogspot.com/. Vamos a desglosarlo un poco.

http://
http significa protocolo de transferencia de hipertexto. Un protocolo es un conjunto de estándares que utiliza un ordenador para hablar con otro. Hay un buen montón de diferentes protocolos. Para las comunicaciones web, los dos protocolos más comunes son el protocolo de transferencia de hipertexto y el protocolo de transferencia de archivos (FTP). Hay otra capa de protocolos debajo de este llamado Transmission Control Protocol / Internet Protocol (TCP / IP). La http en la dirección web es seguida por dos puntos y dos barras diagonales.

tutoriales-equipo.blogspot.com
Este es el nombre de dominio, la parte que se traduce en una dirección IP. El nombre de dominio se divide en tres partes, separadas por puntos:

El nombre de host tutoriales-equipo
blogspot El nombre de dominio de la empresa
.com El nombre de Internet dominio de nivel superior. Otros son .es (espanyol), .Org (organización), .Gov (gobierno)

/
Si no se especifica la página html, la barra diagonal indica al servidor que busque la página web por defecto. Esto es generalmente index.html. La página index.html es la que ha creado. Es por eso que nombrar a la primera página de su sitio de Internet index.html es tan importante.

La página index.html

Su sitio web es probable que tenga un montón de páginas web individuales. Supongamos que alguien llega a su sitio por primera vez. ¿Cómo afecta el navegador de saber cuál de sus muchas páginas para cargar por primera vez? Después de todo, el visitante puede muy bien haber acaba de escribir esto en la barra de direcciones:

tutoriales-equipo.blogspot.com

La respuesta a la pregunta es - "Página predeterminada". Cuando usted compra un espacio web con una empresa de alojamiento web, se le da una carpeta para subir todos los archivos. La empresa de alojamiento se ha especificado una página web predeterminado para esa carpeta. Esto es generalmente index.html. Así que si alguien escribe la dirección antes mencionada, el navegador buscará la página por defecto. Usted no tiene que escribir lo siguiente:

tutoriales-equipo.blogspot.com/index.html

El navegador ya sabe para servir la página predeterminada. Si no ha subido una página llamada index.html entonces sus visitantes bien pueden tener una página de error cuando se va a su sitio. Así que es importante que usted tiene una página web llamada index.html, ya que es la primera página de su sitio a sus visitantes verán al escribir su nombre de dominio en la barra de direcciones del navegador.
OK, hemos aprendido lo que es un enlace, y lo que ocurre al hacer clic en uno, pero vamos a ver cómo crearlos.

<< Pies de fotos | Enlaces a otras páginas >>

Volver a la Página Principal

Agregando subtítulos a las imágenes en HTML

Dos nuevos elementos son la HTML5 etiquetas FIGURE  y FIGCAPTION. La primera de ellas, FIGURE, es bueno para cosas como las imágenes y otros gráficos, mientras que FIGCAPTION se utiliza para decirle a la gente lo que está viendo. A modo de ejemplo, echar un vistazo a el siguiente código:

<FIGURE>

<IMG SRC="york_images/york_minster.jpg">
<FIGCAPTION>A view of York Minster from a side street.</FIGCAPTION>

</FIGURE>

Aquí, hemos rodeado el código IMG con dos etiquetas FIGURE . Etiquetas FIGCAPTION se coloque debajo de la imagen. Esto es lo que el código anterior se ve como en un navegador:

Usted puede tener las etiquetas FIGCAPTION por encima de la imagen, si se prefiere:

<FIGURE>

<FIGCAPTION>A view of York Minster from a side street.</FIGCAPTION>
<IMG SRC="york_images/york_minster.jpg">

</FIGURE>

Nótese, sin embargo, que las etiquetas de las FIGURE y de FIGCAPTIONS no se formatea para usted - usted tiene que hacerlo usted mismo con un poco de CSS:

FIGCAPTION {

font-style: italic;
font-variant: small-caps;

}

Debido a la FIGURE y la FIGCAPTION son nuevas etiquetas HTML5, los navegadores más antiguos no saben lo que son. Así que se representa en la página como etiquetas en línea. Lo que esto significa es que usted no conseguirá un salto de línea automática de los subtítulos de la figura: sólo será de lado a lado con las imágenes. La solución es utilizar la pantalla propiedad CSS con un valor de bloque. De esta manera:

FIGURE, FIGCAPTION {

display: block;
font-style: italic;
font-variant: small-caps;

}

El CSS anterior indica que el navegador muestre etiquetas de las FIGURE y de FIGCAPTION como elementos a nivel de bloque. Debido a que los elementos de bloque de nivel están apilados uno encima del otro, su título será entonces en el lugar correcto - por encima o por debajo de las imágenes. (Usted aprenderá más acerca de los elementos a nivel de bloque en el capítulo de posicionamiento CSS más adelante en el curso.)
Pero vamos a dejar las imágenes allí. En la siguiente sección, vamos a echar un vistazo a los

<< Imágenes  Fondo | Hipervínculos >>

Volver a la Página Principal

Puede establecer sus antecedentes para ser imágenes, si lo prefiere. La propiedad CSS a utilizar es background-image. Para el valor, se especifica la ubicación de la imagen. Esto va entre paréntesis y después de la url la palabra. El nombre de la imagen está rodeada de comillas simples:

BODY {

background-image: url('my_image.gif');

}

Las mismas normas de referencia de la imagen que has aprendido anteriormente se aplican aquí. El código anterior, por lo tanto, hace referencia a una imagen en la misma carpeta que la página web actual. Usted puede colocar las imágenes de fondo en una carpeta llamada backgrounds. El código sería el siguiente:

BODY {

background-image: url('backgrounds/my_image.gif');

}

El valor predeterminado para las imágenes de fondo es para que se repita. Por ejemplo, si la imagen de fondo es de 100 pixeles por 100 pixeles esta imagen se copian hasta la totalidad de la pantalla se llena. Este mosaico puede parecer horrible. La siguiente imagen muestra lo siguiente:

La imagen de fondo que usamos arriba era un 200 por 200 de gradiente. Se ve bien que van de izquierda a derecha (dirección X). Pero ir hacia abajo (en la dirección Y) el mosaico se ve terrible!
Para darle un mayor control de las baldosas de fondo, la propiedad CSS background-repeat se utiliza. La propiedad puede tomar cuatro valores: repeat, repeat-x, repeat-y, y no-repeat. Para nuestro gradiente de arriba, lo que queremos que solo fondo, de izquierda a derecha, en la dirección X. Así que necesitamos repeat-x:

BODY {

background-image: url('backgrounds/my_image.gif');
background-repeat: repeat-x;

}

El fondo entonces se vería así:

Que es muy superior!

Antecedentes Posición

Puede especificar una posición de las imágenes de fondo. Para que la propiedad CSS fondo de posición se utiliza. Esta propiedad tiene los siguientes valores:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

Pero también se puede utilizar píxeles con valores de X e Y. También es posible utilizar un porcentaje página. Como ejemplo práctico, supongamos que quería un logotipo en la parte superior derecha de la página. Podrías hacerlo de esta manera:

BODY {

background-image: url('backgrounds/logo_brolly.gif');
background-position: top right;
background-repeat: no-repeat;

}

El efecto sería el siguiente:

Observe que hemos utilizado background-repeat con un valor de no-repetición, de lo contrario nos íbamos a una página llena de brollies!
Estos son algunos ejemplos de los otros valores que puede utilizar:

background-position: 300px 100px;

background-position: 80% 0%;

Con los valores de píxel (píxeles) la dirección X viene primero, seguido por la dirección y. Un espacio separa los dos. Lo mismo es cierto de los valores porcentuales: primera dirección X, entonces la dirección Y, un espacio como separador.
Pruebe a cabo por sí mismo. Usted encontrará las imágenes de fondo en los archivos adicionales que vienen con este curso, en los extra_files / carpeta fondos. (Si no tienes el resto de ficheros, sin embargo, la ubicación de descarga es aquí, bajo el título Web Design - New Course: Descargar los archivos adicionales necesarios para este curso.
En la siguiente lección, usted aprenderá acerca de los títulos de la imagen.

<< Bordes de la imagen  |  Imagen subtítulos >>

Volver a la Página Principal