"Lección 2", 2=>"Lección 3"); $ruta=array(1=>"../lec2.html", 2=>"../bases_de_datos_mysql.html"); ?> Crear un archivo css - Crear hoja de estilos - Vincular css a html - Como crear webs

  • En espera
atras

1.3 Creando los estilos css

adelante

Un poco más de html

En el primer capítulo nos quedamos en nuestra primera página de la web, y la dejamos con el siguiente código:

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Éste es el título de la página</title>

</head>
<body>

Aquí va lo que se ve

</body>
</html>

Entonces cuando abríamos la página en el explorador se veía la frase "Aquí va lo que se ve". Si le dais a enter para ir a otra línea en el código, escribís otra línea, por ejemplo así:

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Éste es el título de la página</title>

</head>
<body>

Aquí va lo que se ve
Ésta es otra línea

</body>
</html>

y haceis una previzualización de la página verás que las dos líneas las ves en la misma, que no ha surtido efecto el pulsar enter. Esto se debe a que en el código html es igual dejar un espacio que saltar a otra línea. ¿Entonces cómo hacemos para escribir en otra línea? Pues tenemos dos opciones. Una es el código del salto de línea, que es <br>, con el que en el caso anterior lo haríamos así (a partir de ahora cuando trate el contenido sólo pondré el body):

<body>

Aquí va lo que se ve<br>Esto ahora aparece en otra línea

</body>

Así hemos hecho un salto de línea, pero hay otra forma que es mucho más utilizada, que es organizar nuestro texto por párrafos. En este caso el párrafo hay que abrirlo con <p> y cerrarlo con </p>. De esta forma, en el caso anterior haríamos dos párrafos, y lo haríamos así:

<body>

<p>Aquí va lo que se ve</p>
<p>Esto ahora aparece en otra línea</p>

</body>

La diferencia entre el párrafo y el br es que el párrafo es una separación más grande, equivale a unos dos br, pero se puede cambiar esa separación entre párrafos en los llamados estilos, que ya lo veremos más adelante.

Crear hoja de estilos css

Ahora vamos a pasar a definir los estilos (colores, posiciones, tamaños,...), y para eso tenemos que crear un nuevo archivo. Los estilos vamos a situarlos en un archivo aparte, lo que nos ayudará a una cosa, y es que si todas las páginas que vayamos a poner en nuestra web tienen el mismo estilo y queremos cambiar un color sólo tenemos que cambiarlo en la hoja de estilos, y no ir cambiando una a una todas las páginas.

Las hojas de estilos son archivos que llevan la extensión css (no son html). Vamos a crear nuestro primer archivo css, y vamos a llamarlo "estilo" (de forma que será estilo.css). El archivo lo vamos a situar junto al index, en la misma carpeta.

Vincular el css al html

Antes de introducir códigos en el archivo css vamos a hacer que el index.html lea ese archivo de estilos, que esté vinculado a él. Para eso sólo tenemos que introducir este código en el head: <link href="rutadelcss" media="screen" rel="StyleSheet" type="text/css">

Donde pone rutadelcss tenemos que poner la dirección relativa del archivo (las rutas o direcciones las veremos en el siguiente capítulo). Para no adelantar, en este caso la ruta del archivo css, al estar junto al index, es el mismo nombre del archivo (se distingue minúsculas de mayúsculas) junto con la extensión. De esta forma, si al archivo le llamamos estilo.css, el código completo de la index.html nos va quedando así:

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Éste es el título de la página</title>
<link href="estilo.css" media="screen" rel="StyleSheet" type="text/css">

</head>
<body>

<p>Aquí va lo que se ve</p>
<p>Ésta es otra línea</p>

</body>
</html>

Si hay algo que no comprendes o tienes alguna duda no dudes en preguntar en el foro, donde te ayudaremos lo mejor que podamos.

atras
adelante

Volver a crear webs>>


Creada el 20/04/08 21:03
Copyright © - Todos los derechos reservados - Página creada por Juanma