miércoles, 18 de noviembre de 2015

Comienza trabajando con HTML + CSS

Probablemente estés viendo texto negro sobre un fondo blando, pero esto depende de cómo esté tu navegador configurado. Para que la página tenga algo más de encanto podemos añadir algunos colores. (Deja el navegador abierto, lo utilizaremos más tarde).
Comenzaremos con una hoja de estilo interna en el archivo HTML. Más adelante, pondremos el HTML y el CSS en archivos diferentes. La separación de estos archivos es recomendable ya que facilita la utilización de la misma hoja de estilo para diferentes archivos HTML: sólo tienes que escribir la hoja de estilo una vez. Pero en este paso, vamos a dejarlo todo en el mismo archivo.
Necesitamos añadir un elemento <style> en el archivo HTML. La hoja de estilo estará en el interior de ese elemento. Volvamos entonces a la ventana del editor y añadamos las siguientes cinco líneas en la parte de la cabecera del archivo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[etc.]
Las líneas que tienes que añadir están marcadas en rojo. La primera línea dice que eso es una hoja de estilo y que está escrita en CSS ("text/css"). La segunda línea indica que hemos añadido estilo al elemento "body". La tercera línea establece el color del texto como morado y la siguiente línea lo que hace es darle al fondo una especie de amarillo verdoso.
Avanzado: Las hojas de estilo en CSS están compuestas de reglas. Cada regla tiene tres partes:
  1. el selector (en el ejemplo sería: “body”), el cual le dice al navegador la parte del documento que se verá afectada por la regla;
  2. la propiedad (en el ejemplo, 'color' y 'background-color' son ambas propiedades), las cuales especifican qué aspecto del diseño va a cambiarse;
  3. y el valor ('purple' y '#d8da3d'), el cual da el valor para la propiedad.
El ejemplo muestra que es posible combinar las reglas. Hemos establecido dos propiedades, por lo que podemos tener dos reglas separadas:
body { color: purple }
body { background-color: #d8da3d }
ya que las dos reglas van a afectar al elemento body, sólo tenemos que escribir "body" una vez, y poner juntas las propiedades y valores. Para obtener más información sobre selectores, revisa el capítulo 2 de Lie & Bos.
El fondo del elemento body será el fondo para todo el documento. A los otros elementos (p, li, address…) no se les ha dado ningún fondo en concreto, por lo que de forma predeterminada no tendrán ninguno (o serán transparentes). La propiedad 'color' establece el color del texto que se encuentra en el elemento body, pero los otros elementos que se encuentran dentro de body heredarán ese color, a no ser que se especifique lo contrario. (Más adelante añadiremos más colores).
Ahora guarda el archivo (utiliza “Guardar” del menú Archivo) y vuelve a la ventana del navegador. Si haces clic en "Actualizar", la página "aburrida" que se mostraba al principio, pasará a ser una página con colores (pero aún sigue siendo muy aburrida). Aparte de la lista de enlaces que se encuentra al principio, el texto debería tener ahora el color morado sobre un fondo de color amarillo verdoso.
Imagen de la página con color en Firefox
Presentación de la página en el navegador tras añadirle colores.
Avanzado: Los colores pueden especificarse en la CSS de formas diferentes. El siguiente ejemplo muestra dos de ellas: por el nombre (“purple”) y por el código hexadecimal (“#d8da3d”). Hay aproximadamente 140 nombres de colores y más de 16 millones de colores disponibles en código hexadecimal. Agregar un toque de estilo, ofrece más información sobre esos códigos.

PASO 3: AÑADIR TIPO DE LETRA

Otra cosa que es muy fácil de hacer es añadir diferentes tipos de letra para los diversos elementos de la página. Veamos el texto con el tipo de letra “Georgia”, excepto la cabecera h1, que irá con “Helvetica”.
En la Web, nunca puedes estar seguro de los tipos de letra que los usuarios tienen en sus ordenadores, por lo que añadiremos algunas alternativas: si Georgia no está disponible, Times New Roman o Times también pueden valer, y si ninguna de esas está presente, el navegador puede utilizar cualquier otro tipo de letra con serifs. Si Helvetica no está, Geneva, Arial y SunSans-Regular son bastante similares, y si ninguna de estas funciona, el navegador puede escoge cualquier otro tipo de letra que no sea serif.
Añade en el editor de texto las siguientes líneas:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]
Si guardas otra vez el archivo y haces clic en "Actualizar" en el navegador, deberían aparecer tipos de letra diferentes para el encabezado y para el otro texto.
Imagén con los tipos de letra añadidos
Ahora el texto tiene un tipo de letra diferente al del encabezado.

PASO 6: AÑADIR UNA LÍNEA HORIZONTAL

El último elemento a añadir en la hoja de estilo es una regla horizontal para separar el texto de la firma que se encuentra al final. Utilizaremos 'border-top' para añadir una línea punteada encima del elemento <address>:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[etc.]
Ahora, ya hemos terminado de darle estilo a la página. Lo siguiente es ver cómo se pone la hoja de estilo en un archivo diferente para que de esta forma otras páginas puedan utilizar el mismo estilo.

PASO 7: PONER LA HOJA DE ESTILO EN UN ARCHIVO SEPARADO

Ahora tenemos un archivo HTML con una hoja de estilo en su interior. Pero si nuestro sitio crece desearemos añadir más páginas que compartan el mismo estilo. Hay un método más adecuado que copiar la hoja de estilo dentro de cada página y que es: colocar la hoja de estilo en un archivo separado, haciendo que todas las páginas estén enlazadas a esa hoja.
Para separar la hoja de estilo del archivo HTML, necesitamos crear otro archivo de texto, que esté vacío. Puedes escoger "Nuevo" del menú Archivo del editor para crear una ventana vacía.
Después, corta y pega en la nueva ventana todo lo que hay dentro del elemento <style> del archivo HTML. No copies las etiquetas <style> y </style>. Éstas pertenecen a HTML, no a CSS. En la nueva ventana del editor, deberías tener la hoja de estilo completa:
body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }
Elige “Guardar como…” del menú Archivo, comprueba que está en el mismo directorio/carpeta que el archivo mipagina.html, y guarda la hoja de estilo como “miestilo.css”.
Vuelve a la ventana que muestra el código HTML. Borra todo lo que hay desde la etiqueta <style> hasta </style>, ambas inclusive, y reemplázalo por un elemento <link> de la siguiente forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <link rel="stylesheet" href="miestilo.css">
</head>

<body>
[etc.]
De esta forma, se le indicará al navegador que la hoja de estilo se encuentra en el archivo llamado "miestilo.css". Al no especificarse ningún directorio, el navegador mirará en el mismo directorio en el que se encuentra el archivo HTML.
Si has guardado el archivo HTML y lo has actualizado en el navegador, no deberías apreciar ningún cambio en el aspecto de la página. Ésta sigue guardando el mismo estilo, pero ahora viene establecido por el archivo externo.
El resultado final
Resultado final
El siguiente paso es poner ambos archivos, mipagina.html y miestilo.css, en vuestro sitio Web. (Quizá queráis primero cambiarlos un poco…), pero la forma de realizar esto depende de vuestro proveedor de Internet.


Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información
Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Entradas populares