Añadir títulos a las imágenes

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

Read More

Imágenes de fondo y posiciones de fondo

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.

Read More

CSS bordes de la imagen

Usted puede tener un borde agradable alrededor de sus imágenes. Hay un buen montón de fronteras CSS para elegir. Pero no todos son compatibles con todos los navegadores. Por ejemplo, el estilo de borde inset puede funcionar bien con un borde negro en Firefox pero no en Internet Explorer. (Mayoría de los estilos de fronteras debería funcionar bien, sin embargo.)
Las propiedades de borde que usted más utiliza son las siguientes:

border-style
border-width
border-color

Los valores de estilo de borde que puede utilizar son los siguientes (también puede utilizar un principio, oculta, y ninguno, pero no lo haremos):

dotted
dashed
solid
double
groove
ridge
inset

Ancho de la frontera viene en tres sabores: delgados, medianos y gruesos. Pero también se puede especificar el ancho en píxeles.
El color del borde puede ser algo así como "red" o un número hexadecimal / valor RGB.
Ejercer
Agregue lo siguiente a su estilo TextWrap:

Aquí, hemos establecido una frontera sólida con un ancho de 2 píxeles. También hemos establecido un color.
Guardar y cargar en su navegador para ver lo que parece.

Ejercer
Pruebe los estilos de los bordes mencionados anteriormente. Experimente con el ancho y los valores de color para ver cómo funcionan.
Usted puede agregar un borde CSS para otros elementos HTML. Por ejemplo, si desea un borde alrededor de un párrafo de texto, crear un estilo y agregarlo a la etiqueta p. De esta manera:

(La propiedad padding arriba te llevará un poco de espacio entre el borde y el texto.)

El Fondo de Propiedad CSS

Elementos HTML pueden tener un conjunto de propiedades de fondo. (Por los elementos que queremos decir casi cualquier cosa entre las dos etiquetas BODY.) La etiqueta BODY en sí mismo puede tomar la propiedad de  Background. Por ejemplo, si desea una página de crema de luz en lugar de papel blanco, puede utilizar la propiedad background-color. De esta manera:

Con este estilo, el conjunto de la página será un color diferente. Eso es porque hemos aplicado a la etiqueta BODY sí mismo.
Usted también puede crear una clase CSS y sólo el color de un párrafo, tal vez con un borde a su alrededor:

El resultado sería el siguiente:

En este sentido, tienen un color verde para el background del texto. La frontera tiene 20 píxeles de padding entre la frontera y el texto. Este tipo de estilo es bueno para cosas como callout cajas, cuando se quiere hacer hincapié en un punto determinado. Usted podría incluso tener una fantasía llamada caja, si usted experimentar con las propiedades de borde CSS:

El resultado del código anterior sería la siguiente:

Note como hemos utilizado tres valores CSS con una propiedad:

border-top: 2px #159648 dotted;
border-bottom: 2px #159648 dotted;

Hemos establecido un ancho de borde, a continuación, un color, a continuación, un estilo de borde. Cada valor es separado por un espacio.
En la siguiente lección, usted aprenderá acerca de CSS y las imágenes de fondo.

Read More

Ajustar texto alrededor de una imagen con CSS

Algunos de los atributos de IMG de la versión anterior de HTML han sido desaprobados en HTML 5. Una de las más utilizadas fueron los atributos de alineación de la imagen. Usted tuvo un buen número para elegir:

Absbottom
Absmiddle
Bottom
Middle
Left
Right
Texttop
Top

Así que usted puede hacer esto:

<IMG SRC="york_images/york_minster.jpg" ALIGN="Top">

Lo que estaba haciendo aquí era ajustar el texto alrededor de una imagen. No se alinear una imagen independiente de texto. Usted decía, "ajustar el texto a la parte superior de la imagen".
En el ajuste de texto HTML5 se hace con CSS. Vamos a ver cómo conseguir el siguiente estilo:

Como puede ver, la imagen está a la derecha y el texto fluye alrededor de ella. También hay espacio entre la imagen y el texto.
La primera cosa a hacer es crear un STYLE en la sección HEAD del código HTML. Agregue el código resaltado que su propio código HTML:

El estilo que hemos creado se llama TextWrap. Entre las dos llaves que tenemos esto:

float: right;
margin: 10px;

La propiedad CSS que necesitamos con el fin de mover la imagen se llama float. La propiedad float puede tomar tres valores: la left, right and none. Para obtener un poco de espacio entre la imagen y el texto se puede utilizar la propiedad margin . Ya lo hemos establecido en 10 píxeles. Esto le dará espacio a su alrededor toda la imagen. Si sólo desea un espacio en los lados específicas de la imagen se puede utilizar los siguientes:

margin-left
margin-right
margin-top
margin-bottom

Así que podría haber hecho esto:

margin-left: 10px;
margin-bottom: 10px;

Esto nos obtener un margen de 10 píxeles a la izquierda de la imagen y pixeles 10 en la parte inferior.
Para aplicar el estilo a la imagen, es necesario agregar el atributo CLASS a la tag IMG:

<IMG SRC="york_images/york_minster_2.gif" CLASS="TextWrap">

El atributo de clase no tiene que ir al final. Si lo prefiere, se puede poner después de la etiqueta IMG:

<IMG CLASS="TextWrap" SRC="york_images/york_minster_2.gif" >

Sólo tome nota de que todos los espacios están en el código anterior.
Enmendar su propia etiqueta IMG y añadir CLASS = "TextWrap" en el código IMG propia. Antes de probarlo, añada un párrafo de texto debajo de la imagen:

<IMG class="TextWrap" SRC="york_images/york_minster_2.gif">
<P>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra.
</P>

Puede, por supuesto, usar su propio texto, y no sólo el texto Lorem ipsum. Asegúrese de que su código de IMG está por encima de la primera etiqueta P, sin embargo.
Guarde su trabajo y ver los resultados en su navegador.
Hay, sin embargo, un problema con el código anterior. Supongamos que queremos un segundo párrafo de texto con otra imagen flotando a la izquierda. Queremos hacer esto:

Aquí, la segunda imagen está muy bien alineado abajo ya la izquierda de la primera imagen. El texto está en el lugar correcto, también.
Para lograr esto, se podría pensar en añadir un segundo estilo y luego aplicarlo a la segunda imagen. De esta manera:

En el segundo estilo, hemos utilizado float: left y se añade un margen de 10 pixeles como antes. En la etiqueta IMG en segundo lugar, hemos utilizado la clase TextWrapLeft nuevo.
Sin embargo, guardar el trabajo y refrescante que ofrece en el navegador:

En esta versión, la segunda imagen empieza a los dos tercios del camino hacia la primera imagen. El texto no fluye como lo desea, también.
La forma de corregir esto es utilizar una propiedad CSS llamada clear. Esto borra todos los elementos flotantes y le lleva de nuevo al flujo normal por defecto para los navegadores. La propiedad clear puede tomar cuatro valores: izquierda, derecha, ambos, ninguno. Debido a que nuestra primera imagen se dejó flotar a la derecha, queremos aclarar a la derecha. Podemos añadir que se trata de el segundo estilo:

Si nuestra primera imagen había sido de la izquierda, que habría utilizado clear: left..
En la lección LEXT, usted aprenderá acerca de cómo agregar bordes a las imágenes con CSS.

Read More

Antes de empezar, asegúrese de copiar las imágenes más pequeñas a su york_images carpeta de imágenes, como se explicó anteriormente . No debe haber cinco de ellos en los archivos descargados en este curso: (Si no tienes el resto de ficheros, sin embargo, la ubicación de descarga es aquí, bajo el título Diseño Web - Nuevo curso: Descargar los archivos adicionales necesarios para este curso

york_minster.jpg
york_minster_2.gif
york_minster_3.gif
york_minster_4.gif
york_minster_5.gif

Los más pequeños son todas las imágenes GIF.
En HTML5, alineación de la imagen se hace uso de CSS. Sin embargo, si lo que desea la izquierda de base, a la derecha o la alineación de centro entonces la tag DIV es muy útil. La tag DIV es una etiqueta para todo uso. Es algo así como la tag de P en el que se obtiene un salto de línea después de usarlo.
Para ver la tag DIV en la acción, modificar el código HTML para esto (que hemos perdido la tag DOCTYPE en la parte superior):

En este caso, estamos usando un par de tagsDIV: <DIV> </ DIV>. Después de un espacio, hemos añadido el atributo ALIGN="right". Esto se aplicará a cualquier cosa entre la apertura y cierre de tagsDIV. Para nosotros, esta es la segunda de las imágenes de York Minster GIF.
Guarde su trabajo y volver a cargar la página web en su navegador. Usted debe ver esto:

Los otros dos valores horizontales para el atributo ALIGN son izquierda y el centro (la ortografía americana). Pruebe a cabo mediante la supresión de "right" y su sustitución por primera <DIV ALIGN="left"> continuación <DIV ALIGN="center">. Guarde su trabajo y ver cuáles son los resultados en su navegador. (Si lo que desea la alineación izquierda, entonces usted no necesita las tags DIV en absoluto, porque la izquierda es la alineación predeterminada.)
El atributo ALIGN también puede utilizarse con la tag P:

<P ALIGN ="center">

<IMG SRC="york_images/york_minster.jpg">

</P>

De nuevo, esto se aplicará a cualquier cosa entre las dos etiquetas, incluyendo el texto.
Ahora agregue un poco de texto por encima y por debajo de las dos tags DIV:

Cuando guarde su trabajo y ver los resultados, usted debe ver esto con una imagen de la izquierda alineados:

Tenga en cuenta que las tags DIV ha puesto un poco de espacio por encima y por debajo de sí mismo: no es necesario agregar una tag P para el texto. Pero usted puede si usted quiere - que siempre es bueno tener el texto entre las tag P.
En la siguiente lección, veremos cómo ajustar el texto alrededor de una imagen con CSS.

Read More