Clase de diseño web #002
Posted by admin | Posted in diseño web | Posted on 30-11-2009
Tags: background, color, css, curso, diseño web, div, doctype, dont-size, dtd, estilos, font, font-family, font-style, html, table, xhtml
1
La semana pasada dimos los primeros pasos en la construcción de sitios web, hoy evolucionaremos un poco más e incorporaremos nuevos elementos dentro del código y comenzaremos a trabajar con las hojas de estilo.
Primero abrimos el documento anterior, que habiamos denominado “primerdocumento.html” y comenzaremos a trabajar.
En la primer línea del documento vamos a escribir:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DOCTYPE es la declaración de la versión de documento (HTML o XHTML) que vamos a trabajar, y es la información que toman los navegadores para poder trabajar de fomra más eficiente (aunque cuando nos metamos más en tema veremos que algunos navegadores ni se interesan).
DTD (siglas en inglés de document type definition), la función básica es la descripción del formato de datos, para usar un formato común y mantener la consistencia entre todos los documentos que utilicen la misma DTD. De esta forma, dichos documentos, pueden ser validados, conocen la estructura de los elementos y la descripción de los datos que trae consigo cada documento, y pueden además compartir la misma descripción y forma de validación dentro de un grupo de trabajo que usa el mismo tipo de información.
HTML 4.01 DTDs
EL HTML 4.01 Strict no permite marcado de presentación con el argumento de que debería usar CSS en su lugar para eso. Así es como el DOCTYPE Strict luce:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Las DTD transicionales (Transitional DTD) permiten algunos elementos y atributos antiguos que están en desuso:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Además, si está usando frames (marcos), para conseguir resultados válidos desde el validador SGML, necesitará el frameset DOCTYPE como el que sigue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 DTDs
Las DTD XHTML son también Strict, Transitional y Frameset.
El XHTML Strict DTD es la más estricta de las DTD disponibles: no soporta etiquetas antiguas y el código debe estar escrito correctamente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
El XHTML Transitional DTD es como XHTML Strict DTD, pero las etiquetas en desuso están permitidas. Actualmente ésta es la DTD más popular.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
El XHTML Frameset DTD es la única DTD XHTML que soporta Frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Ahora continuamos con la edición del archivo, luego de la etiqueta <head>, pondremos
<link rel="stylesheet" href="estilos_pd.css" type="text/css" media="screen" />
Explicaremos un poco esa línea:
El tag link, se utiliza para definir las relaciones entre los documentos. El atriburo REL justamente es para definir con que tiene relación el documento, que estamos trabajando, el que definiremos siempre com “stylesheet”, el HREF define al archivo que enlazaremos, donde le asignaremos la ruta de acceso, el cual usaremos archivos “css”. El atributo TYPE define el tipo de documento, el que definimos en estos casos como “text/css”. Por último el atributo MEDIA define el o los medios en que debería aplicarse la hoja de estilo.
Ahora incluiremos un link en el cuerpo del archivo. Para incorporar un enlace utilizaremos el tag “a” y lo escribiremos del siguiente modo
<a href="nombredelenlace.html">texto que tendrá el enlace</a>
El tag “a” nos indica que estamos creando un enlace, y el atributo HREF nos indica como mencionamos anteriormente el archivo que enlazamos.
Ahora pasaremos a insertar una imagen
<img width="500" height="250" src="archivo.jpg" alt="Descripción" />
El tag “img” indica que incorporaremos una imagen, el atributo “width” define el ancho, el “hight” define el alto, “src” indica la ruta del mismo y “alt” en este podemos poner una breve descripción de la imagen.
Ahora vamos a darle los estilos. Hoy habiamos definido como hoja de estilo al archivo “estilos_pd.css”, entonces creamos un nuevo documento que lo nombraremos de esa manera y procederemos a escribir el código.
Primero vamos a definir el fondo de la página dándole estilo al body:
body {
background: #000000 url('fondo.jpg') no-repeat top right;
}
Expliquemos lo que hicimos
Primero indicamos a que elemento vamos a asignarle el estilo en este caso “body” y abrimos la llave que siempre entre llaves deben estar los estilos. En este caso utilizamos el parámetro “background” y le definimos #000000 (es el color negro en formato hexadecimal), url(’archivo’) definimos la imagen (si fuese necesaria) que vamos a utilizar en el fondo, el no-repeat indica que no se debe repetir esa imagen, se puede asignar el repeat que completaría el fondo con la imagen, o podemos asignar repeat-x o repeat-y que repite la imagen en el sentido x o y. Y con el top right decimos que la imagen debe estar ubicada arriba a la derecha, tambien podemos definir para el eje y bottom (abajo) center(centro) y para el eje x left (izquierda) center (centro). Y nunca debemos olvidar el “;”
Ahora vamos a definir el h1, h2 y p:
h1 {
font-family: serif;
font-style:italic;
font-size:25 px;
color: #ffffff;
}
h2 {
font-family: san-serif;
font-style:oblique;
font-size:12 px;
color: #cccccc;
}
p {
font-family: san-serif;
font-style:normal;
font-size:10 px;
color: #ffffff;
}
Veamos estos nuevos atributos:
font-family: definimos la familia tipográfica, ahora vimos basicamente sans, o sans-serif, pero despues vamos a ver como explotar mejor este atributo.
font-style: como su nombr lo indica es el estilo de fuente que puede ser itálica u oblicua, o puede ser normal.
font-size: es donde definimos e tamaño de la fuente.
color: donde definimos (en este caso en forma hexadecimal) el color de la fuente.
La imagen de fondo
Hasta acá llegamos hoy, vamos a hablar un poco de div’s y tablas, pero empezaremos a utilizarlas la semana que viene.
En una época las tablas se utilizaban para definir la estuctura del sitio, pero eso hoy en día ya quedó totalmente obsoleto. Las tablas se deben utilizar únicamente para la tabulación de datos, que es su única función. Hoy para crear la estructura de los sitios se utilizan los div’s, que son más dinámico y permite realizar estructuras más fluidas, y generan ventajas como permitir la carga más rápida del sitio, simplifican los re-diseños de los sitios, mayor accesibilidad, y mejor compatibilidad con los buscadores.
La próxima clase veremos como utilizar div’s, crear menues horizontales y verticales, y si tienen alguna pregunta no dejen de realizarla para poder aclarar sus dudas.