GENERAL, ayuda informatica, trucos, problemas, internet, messenger, software, programas, solidaridad, P2P > Manuales y tutoriales Webmaster
Tutorial de diseño web
Gepetto:
Capítulo6: Inclusión de un texto
Ya tenemos el menu y el baner. Así que ahora vamos a incluir un poco de contenido, que será un texto de presentación para la página.
El texto a incluir podría ser el siguiente:
--- Citar ---<h1>Página principal</h1>
<h5>Presentación</h5>
<p>Bienvenid@ a mi nueva página web. Una sencilla página personal creada con xhtml y estilos css.</p>
<p>Aquí encontraras algunas imagenes, textos, descargas variadas y enlaces a otras páginas interesantes. </p>
--- Fin de la cita ---
<h1> <- Título de página con un tamaño predefinido (podríamos definir <h2>, <h3>, etc... para tamaños más pequeños).
<h5> <- Título del contenido de texto.
<p> <- Etiqueta que sirve para introducir un párrafo.
-De momento, el texto se vería así con el navegador:
*Al tener sólo esos dos párrafos, puedes ver que en la imagen aperece una molesta línea cortando el menu y que se situa inmediatamente después del texto. Esto a primera vista se podría corregir aplicando un ancho de página, pero nosotros lo solucionaremos de otra manera un poco más práctica en capítulos posteriores.
--------------
Ahora vamos a aplicarle unos estilos al texto:(Copialos en la hoja de estilos).
--- Citar ---#contenido
{
width: 500px;
float: right;
border: 1px solid #000099;
margin-top: 15px;
margin-right: 37px;
padding: 9px;
}
h1 {
float: left;
margin-left: 30px;
margin-bottom: 0px;
margin-top: 0px;
}
h5 {
text-decoration: underline;
margin: 0px;
}
p.inicial:first-letter {
font-size: 18px;
font-weight: bolder;
margin-left: 10px;
}
--- Fin de la cita ---
h1 { y h5 { <- Aplicamos estilos a todas las etiquetas <h1> y <h5> que pongamos en la página.
text-decoration: underline; <- Hacemos que el texto aparezca subrayado.
p.inicial:first-letter { <- Esta línea aplica un estilo de clase a la primera letra de un párrafo (Nota que si en vez de poner p.inicial hubiesemos puesto sólo p, entonces ese estilo se aplicaría a todos los párrafos de la página).
font-weight: bolder; <- La primera letra en negrita.
margin-left: 10px; <- Separo la primera letra 10 pixeles del borde de la caja. Esto también se podía haber conseguido con una propiedad llamada "text-indent" y que sirve para sangrar la primera linea.
Y ahora vamos a añadir y modificar algunas etiquetas de nuestro texto para aplicarle estos estilos (código coloreado):
--- Citar ---<h1>Página principal</h1>
<div id="contenido">
<h5>Presentación</h5>
<p class="inicial">Bienvenid@ a mi nueva página web. Una sencilla página personal creada con xhtml y estilos css.</p>
<p class="inicial">Aquí encontraras algunas imagenes, textos, descargas variadas y enlaces a otras páginas interesantes.</p>
</div>
--- Fin de la cita ---
Recordemos:
<div id="contenido"></div> <- Aplicamos un estilo al bloque que contengan estas dos etiquetas.
<p class="inicial"> <- Aplicamos un estilo especial a una parte del contenido y no a todo el bloque como haríamos con "div".
-Ahora el bloque de texto se debería ver perfectamente alineado (excepto con internet explorer):
--------------
**La página tal y como la tenemos, no se verá bien en navegadores internet explorer hasta su versión 6. Esto es debido a que internet explorer interpreta de manera diferente los estilos css. En realidad IE suma de manera diferente el margin que aplicamos al contenido, lo cual hace que nuestro texto se pegue al menu.
Teniendo presente que nuestro fin es que la página se vea bien en cualquiera de los navegadores (cumplan o no los estándares), en el próximo capítulo veremos unas etiquetas especiales que nos servirán para adaptar nuestra página al navegador de Microsoft.
--------------
(En el siguiente capítulo: Inclusión de un segundo texto y adaptación a Internet Explorer).
Gepetto:
Capítulo7: Inclusión de un segundo texto y adaptación a Internet Explorer
Incluir un segundo texto nos resultará sencillo, ya que tenemos habíamos definido un estilo para el primer bloque en el capítulo anterior y para conseguir cierta homogeneidad, será ese estilo el que utilizaremos también en este bloque de texto. Recordemos que esto lo aplicabamos mediante la etiqueta "div="contenido".
Además, vamos a adornar el texto con una imágen para conseguir un aspecto más vistoso. Para esto vamos a incluir en nuestra hoja de estilos un poco de código que aplicaremos a la imagen y que a su vez aplicaremos dentro de el bloque "div="contenido".
-Esta es la imagen que voy a utilizar. Si quieres, puedes descargarla para hacer pruebas en tu propio diseño (para llevarlo todo con un poco de orden, guarda la imagen en la carpeta "imagenes"):
--------------
Este sería el código a incluir en la hoja de estilos:
--- Citar ---.imagen {
float: left;
border: solid 1px #000099;
padding: 2px;
margin-top: 12px;
margin-right: 4px;
}
--- Fin de la cita ---
-En este caso vemos que el selector va precedido por un punto. Esto es debido a que vamos a aplicar una clase a la etiqueta de imagen "img".
Y este sería el código a incluir en el index:
--- Citar ---<div id="contenido">
<h5>Noticias</h5>
<img class="imagen" src="imagenes/maleducado.gif" alt="Una fea costumbre" width="80" height="80" /><p class="inicial">Recientes estudios han demostrado que urgarse la nariz puede acarrear la desventura, entre otras cosas, de convertirse en protagonista de un tutorial de diseño web. Además, es más rápido usar las dos manos para escribir código, por lo que se recomienda que se abstengan de tan fea costumbre y que para las "molestias nasales", utilicen los pañuelos destinados a tal efecto.</p>
</div>
--- Fin de la cita ---
<img class="imagen" <- Aplicamos el estilo "imagen" a la etiqueta <img>.
src="imagenes/maleducado.gif" <- Esta es la ruta donde tenemos guardada la imagen (en ete caso apunta a la carpeta "imagenes").
alt="Una fea costumbre" <- Esto es un texto descriptivo, que, si bien no es obligatorio para que se vea la imagen, es recomendable acordarse de incluirlo siempre.
width="75" height="75" <- Podemos definir las dimensiones de la imagen, aunque si ya la tenemos al tamaño necesario, o es necesario aplicar estos atributos. Aquí he reducido la imagen a 75px de largo por 75px de ancho.
/> <- Asi es como cerramos las etiquetas de imagen en xhtml (en html "normal" se aplicaría la respectiva etiqueta de cierre </img>).
Así se debería ver en el navegador.
--------------
Ya tenemos listo nuestro segundo párrafo, pero como vimos en el anterior capítulo, si abrimos la página en internet explorer los párrafos de texto no se verían bien posicionados, tal como podemos apreciar en la siguiente captura:
Para solucionar esto, tenemos que aplicar un estílo específico para internet explorer, pero que no modifique los estilos anteriormente creados. Para eso añadimos antes de la etiqueta de cierre </head>, lo siguiente:
--- Citar ---<!--[if IE]>
<style>
#contenido {
margin-right: 19px;
}
</style>
<![endif]-->
--- Fin de la cita ---
-Este pequeño código simplemente reemplaza el estilo de margen de el bloque #contenido en la hoja de estilos. <!--[if IE]>, simplemente indica que sólo se reemplace si el navegador del visitante es internet explorer (IE).
--------------
*A riesgo de ser pesado, vuelvo a recordarte que no olvides nunca de recordad el texto "alt" de las imágenes. Es imprescindible si quieres que tu página valide como xhtml (una cuestión de accesibilidad que quizá tratemos más adelante).
--------------
Ya casi tenemos la estructura casi terminada, pero aun nos faltan algunas cosas importantes. En el siguiente capítulos veremos como cerrar el borde de la página, además del código denominado "doctype", imprescindible en toda página web.
--------------
(En el siguiente capítulo: Pie de página e información sobre el tipo de documento).
Gepetto:
Capítulo8: Pie de página e información sobre el tipo de documento
Continuamos con el pie de página, que será la parte donde escribiremos los "créditos", es decir, nuestro nombre, licencia, año de creación, y cualquier añadido que queramos hacer sobre la creación de la página.
Abre la hoja de estilos y añade lo siguiente:
--- Citar ---#creditos{
clear : both;
text-align: center;
font-size: 80%;
color: Gray;
padding-top: 10px;
padding-bottom:10px;
}
--- Fin de la cita ---
font-size: 80%; <- Además de en pixeles, podemos indicar el tamaño de fuente en porcentaje. En esta línea aplicamos un tamaño al 80% del tamaño por defecto.
color: Gray; <- A parte de los colores en hexadecimal, también hay una serie de colores que se pueden aplicar simplemente escribiendo su nombre. Aquí indicamos que el color del texto será "Gris".
clear: both; <- Esta línea es muy importante. Significa que el texto no podrá alinearse con ninguna otro bloque CSS, por lo tanto se situará debajo o encima de los demás, pero nunca al lado. Esto es lo que hace que ahora si aparezca la línea que delimita la página.
Ahora añade el código respectivo en el index:
--- Citar ---<div id="creditos">
-Tutorial de maquetación con CSS-<br />
Daboweb (cc) 2006.
</div>
--- Fin de la cita ---
Pie y línea que delimita la página.
*Si no se viese parecido a como está en la captura, comprueba que has añadido el código del index antes del último </div>, que es el que cierra la étiqueta "página" (la que delimita la los límites de la web y que incluye todos los bloques de contenido).
-------------
Bueno, ya tenemos la "tarta" casi terminada, pero aun nos falta la guinda.
El DTD o Doctype son dos líneas de código que se situan antes de la etiqueta <html>. significa "Document Type Definition" y hace precisamente eso, define el tipo de documento que estamos creando (en este caso ya lo hemos creado).
Existen 6 tipos de Doctype, 3 para html y 3 para xhtml. En este caso, como nuestra página es xhtml, debemos aplicar uno de los tres que hacen referencia a este lenguaje y que son los siguientes:
--- Citar ---<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
--- Fin de la cita ---
--- Citar ---<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
--- Fin de la cita ---
--- Citar ---<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
--- Fin de la cita ---
-El primero es el "estricto" (Strict). Incluir este tipo nos obligaría a utilizar todas las etiquetas en xhtml y cumplir a "rajatabla" la presentación en CSS.
-El segundo es el "transicional" (Transitional). Es bastante más flexible que el estricto, ya que aquí podemos mezclar etiquetas HTML con etiquetas xhtml, estilos aplicados a etiquetas y tablas para maquetación.
-El tercero "conjunto de frames" (frameset), se debe utilizar cuando la página contenga marcos o frames.
*Para esta página puedes utilizar cualquiera de los dos primeros, pero yo aconsejaría utilizar el segundo por lo ya mencionado, su flexibilidad.
-------------
Con esto ya tenemos una página más o menos estructurada y aunque a primera vista es agradable, quizá también resulta excesivamente sencilla. En el siguiente capítulo como poner un fondo gráfico que hará que la página muestre un aspecto un poco más sofisticado.
--------------
(En el siguiente capítulo: Utilización de un fondo gráfico).
Gepetto:
Capítulo8: Utilización de un fondo gráfico
En editores como photoshop o gimp, es muy sencillo crear fondos web. Esto nos da la oportunidad de crear fondos gráficos con efectos y colores personalizados (sin tener que limitarnos a los "colores seguros web").
A la hora de crear tu propio fondo, es importante tener en cuenta la resolución de pantalla que podrán utilizar nuestros visitantes. Una buena idea es la de crear el fondo adaptado a resoluciones 1280 x 1024, que a pesar de no ser la más utilizada, siempre es bueno que el fondo no se vea "cortado".
-------------
-En este caso yo he creado un fondo muy simple, pero que dará una sensación de profundidad a la página. Las medidas son 1300 x 20 pixels:
Clic en la imagen para ampliarla.
*Guárdalo si quieres en la carpeta "otros" donde ya teníamos el baner y lo enlazaremos desde alli.
-------------
En la hoja de estilos añade el siguiente código:
--- Citar ---body {
background-image: url(otros/fondo.gif);
background-position: center;
background-repeat: repeat-y;
margin: 0px;
}
--- Fin de la cita ---
body { <- Como el fondo es para todo el cuerpo de la página, aplicaremos el estilo a la etiqueta <body>.Escribiendo "body", hacemos referencia a esa etiqueta.
background-position: center; <- La centramos para que la parte blanca quede sobre el contenido.
background-image: url(otros/fondo.gif); <- Establecemos la ruta de la imagen de fondo.
background-repeat: repeat-y; <- Repetimos la imagen sobre el "eje y", es decir, hacemos que la imagen se vea como mosaico.
margin: 0px; <- Eliminamos los márgenes para que no quede hueco por arriba ni por abajo del contenido de la página (si esto último no te queda claro, prueba el código sin añadir esta línea).
Ahora eliminamos los bordes que delimitan la página para que parezca que es la sombra del fondo la que la delimita. Para esto, en la hoja de estililos ve al bloque #pagina y elimina la línea del borde (border: 1px solid #000099;).
El resultado final sería el siguiente:
-------------
Caso a parte, me imagino que te habrás dado cuenta de que la carpeta "archivos" que creaste en el primer capítulo no la hemos tocado.Pues bien, vamos a ver un pequeño ejemplo de enlace para descarga.
-He creado un archivo ficticio llamado "pañuelos.zip" y lo he guardado dentro de la carpeta "archivos". Seguidamente he incluido el siguiente código en el segundo bloque de texto del index, al final del párrafo (antes de la etiqueta de cierre </p>):
--- Citar ---<br /><a href="archivos/pañuelos.zip">Descargar pañuelos</a>
--- Fin de la cita ---
<br /> <- Recordemos que esto era una etiqueta de salto de línea en xhtml.
<a href="archivos/pañuelos.zip" <- Etiqueta de enlace href con la ruta del archivo entre comillas.
>Descargar pañuelos</a> <- Texto que aparecerá como enlace y cierre de la etiqueta.
Asi se verá el enlace. Al hacer clic sobre el, se abrirá el diálogo de descarga del navegador:
-------------
*Con este capítulo doy por terminado el tutorial. Espero que no haya resultado excesivamente complicado de entender, no obstante, cualquier duda puede ser preguntada en el foro. Y si te apetece ir "un poco mas allá", no olvides echar un vistazo al resto de manuales sobre diseño web.
-------------
PD: Aunque el responsable de este tutorial soy yo (incluido cualquier error que pueda contener); me gustaría dar las gracias a Liamngls, Ladyblues, Dabo y Destroyer. Por su ayuda, sus consejos y sobre todo por su paciencia ;-)
Navegación
[*] Página Anterior
Ir a la versión completa