PASO 1:
Escribir el codigo html.
Por ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
Por ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi primera página con
estilo</title>
</head>
<body>
<!-- Menú de navegación del sitio -->
<ul class="navbar">
<li><a
href="indice.html">Página principal</a>
<li><a
href="meditaciones.html">Meditaciones</a>
<li><a href="ciudad.html">Mi
ciudad</a>
<li><a
href="enlaces.html">Enlaces</a>
</ul>
<!-- Contenido principal -->
<h1>Mi primera página con estilo</h1>
<p>¡Bienvenido a mi primera página con
estilo!
<p>No tiene imágenes, pero tiene estilo.
También tiene enlaces, aunque no te lleven a ningún
sitio…
<p>Debería haber más cosas aquí, pero todavía
no sé qué poner.
<!-- Firma y fecha de la página, ¡sólo por
cortesía! -->
<address>Creada el 5 de abril de
2004<br> por mí mismo.</address>
</body>
</html>
De las etiquetas del ejemplo, <ul> crea una
“lista desordenada”, es decir, una lista en la cual los elementos no están
numerados. La etiqueta <li> indica el comienzo de un “elemento lista”.
<p> es un “párrafo”. Y <a> es un “enlace”, que es lo que crea un
hipervínculo.
- “ul” representa una lista con un
hipervínculo por cada elemento. Esto mostrará nuestro “menú de navegación del
sitio” con enlaces a otras páginas (ficticias) del sitio Web. Supuestamente,
todas las páginas de nuestro sitio Web tienen un menú similar.
- Los elementos “h1” y “p” componen el único
contenido de esta página, mientras que la firma al final (“address”) será la
misma para todas las páginas del sitio.
PASO 2: Añadir algunos colores:
Necesitamos añadir un elemento <style> en el
archivo HTML. La hoja de estilo estará en el interior de ese elemento.
<!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.
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.
PASO
3: Añade el tipo de letra:
<!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.]
PASO 4: Añade una barra de navegacion:
Las propiedades de CSS que vamos a utilizar son
'padding-left' (para mover el texto del elemento body) y 'position' (para mover
el menú).
<!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
{
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[etc.]
'position: absolute' indica que el elemento ul está situado
independientemente de cualquier texto que esté antes o después en el documento.
'left' y 'top' indican cuál es la posición. En este caso, está a 2em de la
parte de arriba de la ventana y a 1em del lado izquierdo.
'2em' significa 2 veces el tamaño del tipo de letra actual. Por ejemplo,
si el menú se muestra con un tipo de letra de 12 puntos, entonces '2em' es 24
puntos. 'em' es una unidad muy útil en CSS ya que se puede adaptar
automáticamente al tipo de letra que el usuario esté utilizando.
PASO
5: Da estilo a los enlaces:
<!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 }
</style>
</head>
<body>
[etc.]
En HTML, los hipervínculos se crean con elementos
<a>, por lo que para especificar el color, necesitamos añadir una regla
de estilo para "a". Para diferenciar los enlaces visitados de los no
visitados, CSS proporciona dos "pseudo-classes" (:link y :visited).
Se llaman “pseudo-classes” para distinguirlas de los atributos de
clase, que aparecen directamente en HTML, por ejemplo,class="navbar".
PASO 6: Añade una linea horizontal:
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.]
PASO
7: Poner la hoja de estilo en un archivo separado.
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.
No hay comentarios:
Publicar un comentario