Selecciona tema:
- Introducción
- Desarrollo del tutorial
- Advertencia
- Cómo referenciar el tutorial
- Capítulo 1 - HTML y CSS
- HTML y CSS
- Implementación de CSS
- Definición de estilos
- Selectores ID y Class
- Imágenes y CSS
- Alineación en CSS
- Estructura de sitio con CSS
- Capítulo 2 - ASP y PHP
- ¿Qué son ASP y PHP?
- Instalación de IIS
- Instalación de PHP
- Variables en ASP
- Variables en PHP
- Includes en ASP
- Includes en PHP
- Página ejemplo ASP y PHP
- Capítulo 3 - El sitio
- Actualizaciones
- Comentarios
- Donativos
Tutorial HTML Nivel Intermedio del Bicentenario
Capítulo 1 - Implementación de imágenes en CSS
Las imágenes pueden implementarse de dos formas en una página web: como un fondo (background) o como
una imagen normal. En el HTML tradicional era bastante sencilla la forma de hacerlo y a continuación
conocerás cómo se realiza su implementación desde CSS.
Me enfocaré al código HTML que debe aparecer entre las etiquetas <body> para ahorrar espacio. Lo que debe ir antes y después ya ha sido presentado, explicado y comentado varias veces en forma previa.
En el archivo pruebaCSS.html anota el siguiente código HTML:
Ahora aprenderás a remover la referencia a la imagen para pasarla al archivo prueba.css. Para ello, debes recordar que siempre se requiere un elemento HTML al cual hacer referencia para presentar las reglas o estilos definidos dentro del archivo CSS.
Lo primero que debes hacer es remover la segunda línea del código anterior y suplirla por el elemento HTML que vamos a utilizar como punto de referencia para presentar el estilo respectivo. En nuestro caso, vamos a utilizar las etiquetas <span></span> como la referencia a la cual aplicaremos el estilo.
Un pasador (quarterback) de un equipo de americano no puede lograr completar un pase si carece de un jugador que actúe como receptor. Un saque en el tenis, de esos llamados "as", no puede ser respondido, por mucho y cuanto sea idéntico a los de Pete Sampras, si no se tiene a un rival.
Como puedes comprender, en el terreno de juego se requiere de más de un jugador. Sí, sí, el golf se puede jugar con tan sólo un jugador, por esa razón no lo mencioné de ejemplo, ¡ja! Pero hagamos caso de los argentinos y esa fantástica frase que estilan se requieren dos para bailar tango.
En el archivo prueba.css deberemos hacer referencia a la imagen que hemos removido del código HTML. Por tanto, procedemos a implementar el código CSS respectivo. Primero debemos definir un nombre para el selector. Utilicemos algo simple y sencillo: imgPrueba
Ahora agregamos la referencia a la imagen que utilizaremos como fondo:
Debemos especificar la posición que tendrá la imagen en el lugar en que aparecerá. Existen varias opciones, pero generalmente se utilizan las que a continuación presento. Las demás las conocerás por tu cuenta una vez aprendas más sobre CSS.
Especificamos si la imagen deberá repetirse y en qué sentido. Al respecto, una imagen puede repetirse en forma vertical u horizontal o no hacerlo. Para este ejemplo, vamos a especificar que la imagen no debe repetirse:
Supongo que has visto en algunos sitios una imagen de fondo que se queda fija y no se mueve al desplazarte hacia abajo de la página. Ese tipo de imagen es un fondo, en nada difiere de lo que hemos visto en el ejemplo anterior, sólo se debe agregar el siguiente código CSS para lograr ese efecto:
Pasemos a ver el tipo de alineación que se puede aplicar, no sólo a las imágenes, sino a cualquier elemento HTML a través de CSS.
Me enfocaré al código HTML que debe aparecer entre las etiquetas <body> para ahorrar espacio. Lo que debe ir antes y después ya ha sido presentado, explicado y comentado varias veces en forma previa.
En el archivo pruebaCSS.html anota el siguiente código HTML:
La siguiente es una imagen normal.<br /><br />
<img src="prueba.gif" width="150" height="150" alt="Prueba" title="Prueba" border="0" />
Con el código anterior se solicita al navegador que presente la imagen prueba.gif
con un ancho y altura de 150 pixeles. Nada de otro mundo. Es algo que ya se ha visto en el
Tutorial HTML Básico.<img src="prueba.gif" width="150" height="150" alt="Prueba" title="Prueba" border="0" />
Ahora aprenderás a remover la referencia a la imagen para pasarla al archivo prueba.css. Para ello, debes recordar que siempre se requiere un elemento HTML al cual hacer referencia para presentar las reglas o estilos definidos dentro del archivo CSS.
Lo primero que debes hacer es remover la segunda línea del código anterior y suplirla por el elemento HTML que vamos a utilizar como punto de referencia para presentar el estilo respectivo. En nuestro caso, vamos a utilizar las etiquetas <span></span> como la referencia a la cual aplicaremos el estilo.
La siguiente es una imagen implementada a través de CSS.<br /><br />
<span></span>
¿Cuál es la importancia del elemento HTML que debe utilizarse como referencia? Un par de analogías servirán
para explicarlo en mejor forma.<span></span>
Un pasador (quarterback) de un equipo de americano no puede lograr completar un pase si carece de un jugador que actúe como receptor. Un saque en el tenis, de esos llamados "as", no puede ser respondido, por mucho y cuanto sea idéntico a los de Pete Sampras, si no se tiene a un rival.
Como puedes comprender, en el terreno de juego se requiere de más de un jugador. Sí, sí, el golf se puede jugar con tan sólo un jugador, por esa razón no lo mencioné de ejemplo, ¡ja! Pero hagamos caso de los argentinos y esa fantástica frase que estilan se requieren dos para bailar tango.
En el archivo prueba.css deberemos hacer referencia a la imagen que hemos removido del código HTML. Por tanto, procedemos a implementar el código CSS respectivo. Primero debemos definir un nombre para el selector. Utilicemos algo simple y sencillo: imgPrueba
.imgPrueba {
}
Recuerda que es una clase la que utilzaremos como estilo, por esa razón hemos colocado el punto precediendo el
nombre de la misma.}
Ahora agregamos la referencia a la imagen que utilizaremos como fondo:
.imgPrueba {
background-image:
}
Definimos la forma en que se presentará la imagen:background-image:
}
.imgPrueba {
background-image:url();
}
Y, finalmente, colocamos la ruta, entre los paréntesis, en que se encuentra ubicada la imagen. En nuestro caso,
todas las imágenes las tenemos ubicadas en un directorio/folder llamado /imagenes/background-image:url();
}
.imgPrueba {
background-image:url(/imagenes/prueba.gif);
}
Ahhhh, ¡pero no hemos terminado aún!background-image:url(/imagenes/prueba.gif);
}
Debemos especificar la posición que tendrá la imagen en el lugar en que aparecerá. Existen varias opciones, pero generalmente se utilizan las que a continuación presento. Las demás las conocerás por tu cuenta una vez aprendas más sobre CSS.
.imgPrueba {
background-image:url(/imagenes/prueba.gif);
background-position:top left;
}
Lo que se instruye, con el código CSS anterior, es que la imagen aparezca en la parte superior y que no deje
espacio a su izquierda. ¿Recuerdas la forma en que te pido recordar cómo manejar el margen para la página?
Bueno, pues esa misma forma la puedes utilizar para especificar la posición de tu imagen dentro de la página.background-image:url(/imagenes/prueba.gif);
background-position:top left;
}
Especificamos si la imagen deberá repetirse y en qué sentido. Al respecto, una imagen puede repetirse en forma vertical u horizontal o no hacerlo. Para este ejemplo, vamos a especificar que la imagen no debe repetirse:
.imgPrueba {
background-image:url(/imagenes/prueba.gif);
background-position:top left;
background-repeat:no-repeat;
}
Instruímos sobre las dimensiones de la imagen. Aquí es importante notar que deberá especificarse cuál es el
ancho y alto que el elemento HTML (en nuestro caso <span>) deberá abarcar
dentro de la página. Se hace de la siguiente forma:background-image:url(/imagenes/prueba.gif);
background-position:top left;
background-repeat:no-repeat;
}
.imgPrueba {
background-image:url(/imagenes/prueba.gif);
background-position:top left;
background-repeat:no-repeat;
width:150px;
Height:150px;
}
¿Has notado que cada línea de código CSS termina con punto y coma (;)? ¿Sí?
Bueno, pues no lo olvides. Es importantísimo que siempre termines cada línea de código o definición con punto y
coma.background-image:url(/imagenes/prueba.gif);
background-position:top left;
background-repeat:no-repeat;
width:150px;
Height:150px;
}
Supongo que has visto en algunos sitios una imagen de fondo que se queda fija y no se mueve al desplazarte hacia abajo de la página. Ese tipo de imagen es un fondo, en nada difiere de lo que hemos visto en el ejemplo anterior, sólo se debe agregar el siguiente código CSS para lograr ese efecto:
.imgPrueba {
background-image:url(/imagenes/prueba.gif);
background-position:top left;
background-repeat:no-repeat;
background-attachment:fixed;
width:150px;
Height:150px;
}
Ahora regresamos a nuestro archivo pruebaCSS.html para agregar la referencia de la
clase o estilo que le vamos a implementar.background-image:url(/imagenes/prueba.gif);
background-position:top left;
background-repeat:no-repeat;
background-attachment:fixed;
width:150px;
Height:150px;
}
La siguiente es una imagen implementada a través de CSS.<br /><br />
<span class="imgPrueba"></span>
¿Eso es todo? Sí.<span class="imgPrueba"></span>
Pasemos a ver el tipo de alineación que se puede aplicar, no sólo a las imágenes, sino a cualquier elemento HTML a través de CSS.
Registro al Newsletter
Mantente al día con tutoriales más cortos sobre desarrollo de sitios web. Políticas de Privacidad
Términos de uso
Mantente al día con tutoriales más cortos sobre desarrollo de sitios web. Políticas de Privacidad
Términos de uso