Diseño de páginas WEB

Un sitio de la WWW (World Wide Web) está compuesto por varias páginas de hipertexto, que se
conectan entre sí y con páginas ubicadas en otros sitios, formando una especie de “telaraña” (de ahí el uso
de la palabra Web, que en inglés significa “red”). Las páginas se encuentran grabadas en un formato llamado
HTML (Hyper Text Markup Language).

Para generar un archivo HTML se tipean las instrucciones usando un editor de textos (nosotros
usaremos el Bloc de Notas), y se graba como texto pero con la extensión HTML, en lugar de TXT. A medida
que vamos generando el archivo, conviene ir probándolo en un navegador para ver cómo se verá la página
una vez que esté en funcionamiento. Para revisar sucesivas modificaciones de la página, conviene usar la
opción Actualizar del navegador.

Todo el material del sitio web estará en una carpeta. En tu computadora, creá una carpeta que se
llame Sitio Web TuNombre. En esa carpeta vas a guardar todo lo relacionado con el sitio web. A la primera
página la vamos a llamar “index.html”. Cuando uno arma un sitio web real (es decir, varias páginas), la
principal se suele llamar indice.html (o index.html). Conviene poner nombres que no tengan espacios en
blanco ni acentos. Veamos cómo hacemos para crear esta primera página:

Para crear el archivo HTML:

 Buscar y abrir el Bloc de notas (es una aplicación que ya viene con Windows).
 Clic en Archivo - Guardar como. Se abrirá la ventana "Guardar como".
 En la ventana que se abrió, clic en el menú desplegable "Guardar como tipo". Este menú está en la
parte inferior de la ventana. Dirá "Documentos de texto (*.txt)". Al hacer clic en él, se abrirá un
menú desplegable.
 En el menú desplegable, clic en Todos los archivos. Es una de las opciones del menú desplegable.
De este modo, tu archivo se guardará como un documento HTML.
 Seleccioná la ubicación de destino. En el lado izquierdo de la ventana, seleccioná el nombre de la
carpeta donde quieras guardar el documento (acordate que tenés que tener una carpeta donde
guardes todo lo relacionado con el sitio web, por ejemplo, esta primera página).
 Escribí el nombre de la página y agregale la extensión "html". Haz clic en el cuadro de texto "Nombre
de archivo" y luego escribe el nombre que quieras ponerle al archivo seguido de .html. En nuestro
caso vas a escribir: indice.html
 Clic en Guardar. Al hacerlo, tu documento actual del Bloc de notas se transformará en un documento
HTML.
 Ahora ya podés ir agregando el contenido, que vas a ver lo largo del apunte. A medida que vayas
agregando cosas, vas haciendo clic en Archivo – Guardar (o podés usar CTRL G) para actualizar el
archivo en el disco.

Si el Bloc de notas se cierra inesperadamente o más adelante tenés que regresar para hacer alguna edición
en el documento, buscá el archivo en tu carpeta de trabajo, vas a ver que tiene el ícono que lo identifica
como sitio web. Para editarlo, clic derecho en el archivo HTML y seleccioná Abrir con en el menú que
aparece, y en la lista desplegable elegí bloc de notas.

A lo largo de este apunte vas a generar un sitio web. Cada vez que encuentres un recuadro, significa que
hay que agregar / modificar código en la página. A veces hay que agregar las líneas que se muestran ahí, y
a veces habrá que modificar las líneas para que queden como el modelo. Una vez que agregues / modifiques
el código en la página, tenés que guardar con Archivo – Guardar.

MUY IMPORTANTE: si te equivocás al tipear el código HTML, al probarlo en el navegador nunca te va a

dar un mensaje de error, como ocurre en general con los lenguajes de programación. Esto puede parecer
una ventaja, pero en realidad implica un trabajo mayor para el programador a la hora de detectar errores y
corregirlos. Si al probar una página no ves lo que esperabas ver, hay que empezar a revisar caracter por
caracter. A veces falta cerrar un tag (instrucción), a veces hay dos letras intercambiadas, a veces faltó poner
unas comillas... El navegador no indica cuál es el error, el programador lo tiene que descubrir por sí mismo,
así que a prestar mucha atención al tipear el código.

Empecemos...
 Las instrucciones de HTML se denominan tags. Un tag se escribe entre los símbolos < y >.
Generalmente, los tags se abren y se cierran. Un tag tiene efecto desde que se lo abre hasta que aparece
cerrado. Un tag de cierre es igual al de apertura, pero precedido por /. Por ejemplo, en el recuadro que
sigue, en la segunda línea se abre el tag html y se cierra en la última línea. Una página HTML tiene una
estructura definida que hay que respetar:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

(Antes de seguir leyendo: el texto de acá arriba está dentro de un recuadro, así que deberías escribirlo en
el bloc de notas, en el archivo indice.html)

Lo que está entre <head> y </head> es el encabezado, y lo que está entre <body> y </body> es
el cuerpo de la página, lo que realmente se ve. Dentro del encabezado, se pueden incluir meta-tags
opcionales con los datos del autor, palabras claves, etc.. Para este trabajo vamos a usar los tags TITLE y
META, escritos dentro del encabezado:

<meta charset="UTF-8">
<title>Datos sobre computadoras</title>

 Agregá el código anterior dentro del encabezado, guardá el archivo y recargá la página web. ¿Dónde
quedó la frase “Datos sobre computadoras”? Si no te das cuenta, mirá bien TODA la ventana del
navegador.

¿Ya entendiste para qué sirve el tag TITLE? Vamos a hablar un poco del tag meta: UTF-8 es crucial para
que los navegadores y los motores de búsqueda interpreten correctamente el contenido de tu
página. Es normal que un documento HTML uses caracteres especiales, como la ñ o las tildes. Si no
especificas la codificación de la etiqueta meta charset UTF-8, estos caracteres pueden aparecer como
una serie de símbolos y letras sin sentido. Esto no solo puede dar lugar a una mala experiencia de usuario,
sino que también puede afectar a tu clasificación en los motores de búsqueda. Google y otros motores de
búsqueda le dan mucha importancia a la calidad y la accesibilidad del contenido, por lo que es crucial que
tu página web se muestre de forma correcta en todos los navegadores.

El cuerpo o contenido de la página es la parte que luego se verá en el browser. Dentro del tag BODY
se pueden incluir otros parámetros que veremos más adelante.

<body>

<!-- Contenido principal -->

<h1>Mi primera página</h1>
<p>Las computadoras han revolucionado la vida cotidiana en más de un aspecto.</p>
<p>La gran velocidad a la que trabajan las computadoras con enormes cantidades de información, hacen
que sean útiles para:
- calcular millones de recibos telefónicos
- mantener datos de ventas y pagos
- predecir el tiempo
- mostrar imágenes del interior del cuerpo humano</p>
</body>

(Atención: el recuadro superior indica que hay que agregar / modificar algo en el código, pero los tags
<body> y </body> ya están escritos, así que no hay que repetirlos. Es la última aclaración de este tipo
para este apunte, a prestar atención...)
Página 2
Es el momento de probar la página. Para eso:
 Guardá el documento. Para guardarlo, presiona Ctrl+G. Así te asegurarás de que tu documento
HTML muestre la versión más reciente de tu página web cuando lo abras. No cierres el bloc de notas.
 Buscá la carpeta en la que está el archivo web y hacele doble clic: se va a abrir el navegador que
tengas instalado por default mostrando la página que armaste.
 Revisá si lo que ves es lo que esperabas ver. Si tenés que hacer modificaciones en el código, recuperá
el bloc de notas (si me hiciste caso, no lo cerraste), modificá el código y clic en Archivo – Guardar.
Volvé a la ventana del navegador que mostraba tu página y hacé clic en Actualizar (o la flechita de
recarga de página). El navegador busca el archivo que tenés guardado y lo vuelve a mostrar, si
habías hecho modificaciones, las mostrará.
 Lo indicado en el paso anterior es lo que vas a hacer a lo largo de todo el apunte: actualizás el
código de la página, guardás los cambios, vas al navegador y recargás la página.

A lo largo del apunte vas a ver indicaciones para probar la página armada hasta el momento, para detectar
errores, corregirlos y recién después continuar.

 Probá la página armada.

La frase “Mi primera página” quedó más grande que el resto. Eso se debe al tag <h1>. La letra “h”
proviene del inglés “heading”, que significa “encabezado”.

Para ver otros tags de encabezado, agregá justo antes del tag</body> lo siguiente:

<H1>Este es el tamaño 1</H1>

<H2>Este es el tamaño 2</H2>
<H3>Este es el tamaño 3</H3>
<H4>Este es el tamaño 4</H4>
<H5>Este es el tamaño 5</H5>

 Probá la página armada.

Fijate ahora que a pesar de que escribiste el texto dispuesto de otra forma, el browser muestra el
último párrafo todo escrito de corrido. Veamos entonces cómo poner viñetas:

Listas con viñetas

Una lista con viñetas lleva generalmente una tabulación (es decir, aparece corrida hacia la derecha),
y un pequeño gráfico delante de cada ítem de la lista. El tag de tabulación es <UL>, y afecta a todo el texto
que sigue, hasta encontrar el tag </UL>. El tag de viñetas es <LI>. Modificá tu página para que quede
ahora así:

<p>La gran velocidad a la que trabajan las computadoras con enormes cantidades de información, hacen
que sean útiles para:
<ul>
<li>calcular millones de recibos telefónicos</li>
<li>mantener datos de ventas y pagos</li>
<li>predecir el tiempo</li>
<li>mostrar imágenes del interior del cuerpo humano</li>
y muchas otras actividades más...</p>

 Probá cómo se ve la página. ¿Por qué quedó todo el resto del texto, luego de las viñetas, con una
sangría? Porque no cerraste el tag UL. Modificá el código para que sólo las viñetas tengan sangría y probá
nuevamente la página.

Agregá a continuación estas instrucciones:

Página 3
<ol>
<li>Primera cosa de la lista</li>
<li>Segunda cosa de la lista</li>
<li>Tercera cosa de la lista</li>
</ol>
<ul >
<li>Una cosa de la lista</li>
<li>Otra cosa de la lista</li>
<li>Otra más</li>
</ul>

 Probá cómo queda ahora. Tenemos ahora dos listas: una numerada y otra sin numerar. Ambas se
diferencian porque se abren con OL (Ordered list) o UL (Unordered list). En ambos casos los ítems se
identifican con la etiqueta LI(ListItem).

Imágenes
En los archivos de tipo HTML, no se incorporan las imágenes como en un procesador de textos o en
una presentación sino que se incluye en el archivo un código para mostrar una imagen de un archivo externo
a la página, de tipo JPG, GIF o PNG.

La etiqueta correspondiente a la de las imágenes es img (“imagen”) y se debe especificar el origen

(src=“source”=“origen”) y un texto alternativo (“alt”) que servirá para ofrecer a los no videntes la misma
información que está siendo dada por la imagen:

<img src="archivo de imagen" alt="texto alternativo">

Esta imagen puede estar:

 en la misma carpeta que el archivo HTML, por ejemplo: cuadrilatero.jpg
<img src="cuadrilatero.jpg" alt="esquema de un cuadrilátero">
 en otra carpeta, por ejemplo: imagenes/cuadrilatero.jpg
<img src="imagenes/cuadrilatero.jpg" alt="dibujo de un cuadrilátero">
 puede ser una imagen en línea, por ejemplo:
http://www.mozilla.com/img/tignish/home/sidebar-hiring.png
<img src="hthttp://www.mozilla.com/img/tignish/home/sidebar-hiring.png" alt="Un lápiz
escribiendo">

Si los archivos de imagen no se encuentran disponibles (o si cometimos un error tipográfico al escribir

su nombre, por ejemplo), la página se ve sin la imagen y se muestra el texto alternativo o una cruz roja,
dependiendo del navegador.

Puede ocurrir que nos guste nuestra imagen pero no exactamente su tamaño. Podemos indicarle
un tamaño diferente con los parámetros width (ancho) y height (alto).

Página 4
 En la carpeta de materiales en Teams, está la imagen cuadrilatero.jpg. Dentro de tu carpeta web,
armá una carpeta que se llame imagenes, y dentro de esa carpeta, guardá la imagen cuadrilatero.jpg.
Dentro del cuerpo de la página agregá estas líneas:

<img src="imagenes/cuadrilatero.jpg" ALT="Un cuadrilátero">

<img src="imagenes/cuadrilatero.jpg" ALT="Un cuadrilátero" style="width:50px;height:50px;>

 Probá cómo queda la página con este cambio.

Para aprender más sobre imágenes entrá a: http://www.w3schools.com/html/html_images.asp
Aunque está en inglés, se entiende bien y hacia el final de la página hay ejemplos donde podés
hacer modificaciones y ver el resultado para aprender a ponerle un borde a la imagen, y ubicarla dentro de
un párrafo. El botón Try it yourself te permite entrar a un editor donde podés modificar el código y ver
cómo va quedando. En realidad, es un sitio para aprender HTML y CSS, así que está muy bueno para
consultar todos los temas. Arriba a la derecha hay un ícono para ver el sitio en español, la verdad es que
no lo recomiendo. La traducción no es humana sino automática, y además hay cosas que no se pueden
traducir: instrucciones, nombres de colores, etc..

 Agregale a la página un párrafo que diga: “Yo soy ...” (tu nombre) y a continuación una foto tuya, con
un borde y un tamaño pequeño.

Colores
Probablemente estés viendo texto negro sobre un fondo blanco, 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.

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, justo debajo de la línea <title>:

<style type="text/css"> Las hojas de estilo en CSS están

body { compuestas de reglas. Cada regla tiene
color: purple; tres partes:
background-color: #d8da3d }
</style>  el selector (en el ejemplo sería:
“body”), el cual le dice al
La primera línea dice que eso es una hoja de estilo y navegador la parte del
que está escrita en CSS ("text/css"). La segunda línea indica documento que se verá
que hemos añadido estilo al elemento "body". La tercera afectada por la regla;
línea establece el color del texto como violeta y la siguiente  la propiedad (en el ejemplo,
línea lo que hace es darle al fondo una especie de amarillo 'color' y 'background-color' son
verdoso. ambas propiedades), las cuales
especifican qué aspecto del
La manera de codificar los colores es un poco diseño va a cambiarse;
complicada, pero ahí va la explicación: cada color está  y el valor ('purple' y
formado por distintas combinaciones de rojo, verde y azul. '#d8da3d'), el cual da el valor
Según cuántas “gotas” de cada color se mezclen, se formará para la propiedad.
un color definitivo. La máxima cantidad de “gotas” por color
es 255 y la mínima es 0. De este modo, al mezclar 255 gotas
de rojo, 0 de verde y 0 de azul quedará como color el rojo “puro”.

Esta cantidad de “gotas” por color se expresa en valores hexadecimales (dos caracteres por color).
Para expresarlo, se escribe #RRVVAA, RR es el valor para las gotas de rojo, VV para las gotas de verde y

Página 5
AA para las gotas de azul. Por ejemplo, #000000 es negro y #FFFFFF es blanco. Los colores pueden
especificarse en la CSS de formas diferentes: 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.

El fondo del elemento body será el fondo para todo el documento. A los otros elementos (p, li, etc.)
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.

 Probá cómo queda la página con este cambio.

En el sitio de w3schools (el enlace está en la explicación de imágenes), buscá a la izquierda HTML Colores
HEX. Vas a ver que te muestra deslizadores para el rojo, verde y azul, te muestra qué color se forma y te
indica cuál es el código hexadecimal del color. Del lado derecho, tenés un Color Picker, para elegir un tono
que te guste y obtener el código.

Usando código CSS, podemos cambiar el color de tags (p, li, ul, h1, etc.), o de ciertas porciones de código
que incluyen varios de esos tags. Para eso tenemos que dividir el código en fragmentos usando el tag
DIV. Entrá a w3schools, en la sección HTML, buscá HTML Div, y probá los ejemplos (no te quedes con
dudas, probá, tratá de entender el código, y si no entendés, consultá!!!)

 Modificá la página para que el párrafo que dice Yo soy… (anterior a tu foto) sea de un color que no esté
usando en el resto de la página. Para eso vas a tener que encerrar ese párrafo dentro un tag DIV y aplicar
color de fondo a ese párrafo.

Fuentes
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 instalados, 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 escoger cualquier otro tipo de letra que no sea serif.

Modificá las líneas de formato que ya tenías para que queden así:

<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>

 Probá cómo queda la página con este cambio.

Enlaces hipertextuales
La característica más importante de una página WEB es su capacidad de conectarse con otros sitios.
Los enlaces o links, generalmente en color azul, nos permiten navegar por diferentes páginas, ubicadas o
no dentro de la misma computadora. Un link no tiene que ser necesariamente un texto: también puede ser
una imagen, o una combinación de texto y gráfico. Al hacer clic sobre el link, se cargará la página a la que
apunta ese link.

Página 6
 El tag que se usa para un establecer un enlace es <A HREF=“dirección”> y se cierra con </A>. El
texto o imágenes que haya entre ambos tags apuntarán a la dirección especificada, que puede ser una
página (cualquier documento HTML), una imagen, un archivo, o cualquier otro elemento que circule por
Internet.

 Para ver su funcionamiento, vas a incluir en tu página, luego de la frase “Este es el tamaño 5”, un link
que permite conectar con la página de Netflix:

<p>Haga clic <a href=“https://www.netflix.com”>aquí</a> para ingresar a Netflix.</p>

 Probá cómo queda la página ahora. ¿Cómo se visualiza la palabra “aquí”? ¿Qué ocurre al deslizar el
mouse sobre esta palabra? ¿Qué leyenda aparece en la línea de estado (la de abajo) en ese momento?

 También se puede incluir una imagen como enlace. Probá este ejemplo en tu página: (la imagen
logoML.png está en la carpeta de materiales en Teams)

<p><a href=“https://www.mercadolibre.com.ar”><IMG SRC=“imagenes/logoML.png”></a></p>

TENER EN CUENTA: Para usar la instrucción anterior tal como está, deberías tener una carpeta “imagenes”
dentro de la carpeta donde guardás tu sitio web, y en esa carpeta un archivo llamado “logoML.png”. Si no
es así, cambiá en la instrucción la carpeta y el nombre del archivo.

Para hacer un enlace a una dirección de correo electrónico, hay que incluir dentro de HREF el prefijo
mailto: y la dirección deseada. Por ejemplo, para incluir la posibilidad de mandar un mensaje a la dirección
del colegio, agregá esto a tu página:

<p>Si querés comunicarte con nosotros, escribí a: <a href=“mailto:[email protected]”>

[email protected] </a>Gracias. </p>

 Hacé clic sobre el enlace que recién creaste. ¿Qué ocurre y por qué?

Tablas básicas
Las principales etiquetas de las que disponemos para crear tablas son estas:
<table>: crea la tabla
<caption>: pone título a la tabla
<tr>: crea una fila
<td>: crea una celda
<th>: crea una celda de encabezamiento

Lo veremos con un ejemplo, armando una tabla de dos filas y dos columnas:
<table>
<caption>Libros </caption>
<tr>
<th>Título </th> Libros
<th>Autor</th>
</tr>
<tr>
<td>La Odisea</td>
<td>Homero</td>
</tr>
</table>

Por cada fila, abrimos una etiqueta <tr> e insertamos allí las celdas que correspondan. Dentro de cada
celda podemos incluir prácticamente cualquier cosa, pero debemos tener siempre en mente que el objetivo
de las tablas es tabular información, no “acomodar” objetos en la página.

Página 7
Las tablas se ven sin bordes, salvo que modifiquemos la etiqueta que da comienzo a la tabla del siguiente
modo: <table border="1">

Combinar celdas

Muchas veces necesitamos que una celda ocupe más de un espacio. ¿Qué pasa si en vez de un autor por
cada libro, queremos mencionar tres? Podemos hacer que la celda de autor ocupe tres columnas. Así:

<table>
<caption>Libros </caption>
<tr>
<th>Título </th>
<th colspan="3">Autor</th>
</tr>
<tr>
<td>Cuentos varios</td>
<td>E. A. Poe</td>
<td>Horacio Quiroga</td>
<td>Julio Cortázar</td>
</tr>
</table>

Para expandir una celda por varias columnas hemos utilizado el atributo colspan. Podemos hacer lo mismo
con las filas, mediante rowspan. Vamos a hacer la misma tabla de antes, pero girada 90 grados:

<table>
<caption>Libros </caption>
<tr>
<th>Título </th>
<td>Cuentos varios</td>
</tr>
<tr>
<th rowspan="3">Autor</th>
<td>E. A. Poe</td>
</tr>
<tr>
<td>Horacio Quiroga</td>
</tr>
<tr>
<td>Julio Cortázar</td>
</tr>
</table>

 El tamaño y el formato de una tabla se modifica usando sentencias CSS. Visitá este enlace:
http://www.w3schools.com/css/css_table.asp y agregá dentro de style valores apropiados,
investigando las secciones: Table Borders - Collapse Borders - Table Width and Height - Table Text
Alignment - Table Padding - Table Color

 Menú de navegación
Sabiendo armar listas y enlaces, ya podemos armar un menú. Agregá el siguiente código justo
antes de <!-- Contenido principal -->

<!-- Menú de navegación del sitio -->

<ul class="navbar">
<li><a href=”index.html”>Página principal</a>
<li><a href=”novedades.html”>Novedades</a>
<li><a href=”info.html”>Información</a>
<li><a href=”enlaces.html”>Enlaces</a>
Página 8
</ul>

 Fijate cómo se ve ahora la página.

En realidad no parece un menú. Hay enlaces que no llevan a ninguna parte (¿por qué?), pero además
de eso no tiene aspecto de menú. Vamos a llevar este menú a la izquierda de la página y a cambiarle un
poco el aspecto.

Tenemos que mover la lista a la izquierda y colocar el resto del texto un poco más hacia la derecha,
para dejar espacio para el menú. Las propiedades de CSS que vamos a utilizar son 'padding-left' (para mover
el texto del elemento body) y 'position' (para mover el menú).

Modificá <style> para que quede así:

<style type="text/css"> 'position: absolute' indica que el elemento ul está situado

body { independientemente de cualquier texto que esté antes o después en
padding-left: 11em; el documento. 'left' y 'top' indican cuál es la posición. En este caso,
font-family: Georgia, "Times New Roman", está a 2em de la parte de arriba de la ventana y a 1em del lado
Times, serif; izquierdo.
color: purple;
background-color: #d8da3d }
ul.navbar { '2em' significa 2 veces el tamaño del tipo de letra actual. Por
position: absolute; ejemplo, si el menú se muestra con un tipo de letra de 12 puntos,
top: 2em; entonces '2em' es 24 puntos. 'em' es una unidad muy útil en CSS ya que
left: 1em; se puede adaptar automáticamente al tipo de letra que el usuario esté
width: 9em } utilizando. La mayoría de los navegadores tienen un menú para
h1 { aumentar o disminuir el tamaño de letra: podés probarlo y ver la
font-family: Helvetica, Geneva, Arial, forma en la que el menú aumenta de tamaño a la vez que lo hace el
SunSans-Regular, sans-serif }
tipo de letra, lo que no ocurriría si hubiéramos utilizado un tamaño
</style>
en píxeles.

 Fijate cómo se ve ahora la página. Está mucho mejor, pero todavía falta.
El menú de navegación todavía parece una lista en lugar de un menú. Vamos a cambiar su aspecto.
Quitaremos los puntos que indican los diferentes elementos de la lista y moveremos los elementos a la
izquierda, donde estaban antes los puntos. También le daremos a cada elemento un fondo blanco y un
cuadrado negro. (¿Por qué? Por nada en particular, sólo porque podemos hacerlo).

No hemos especificado el color de los enlaces, vamos a añadirlo también: utilizaremos el azul para
aquellos enlaces que el usuario no ha visitado todavía, y morado para los enlaces que ya ha visitado:

Modificá <style> para que quede así:

<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
Normalmente, los navegadores muestran los
color: purple; hipervínculos subrayados y con color. Los colores son
background-color: #d8da3d } parecidos a los que especificamos aquí: azul para enlaces
ul.navbar { a páginas que no has visitado todavía (o visitaste hace
list-style-type: none; mucho tiempo), morado para páginas que ya has visitado.
padding: 0;
margin: 0; En HTML, los hipervínculos se crean con elementos <a>,
position: absolute; por lo que para especificar el color, necesitamos añadir
top: 2em;
una regla de estilo para "a". Para diferenciar los enlaces
left: 1em;
width: 9em } visitados de los no visitados, CSS proporciona dos
h1 { "pseudo-classes" (:link y :visited). Se llaman “pseudo-
font-family: Helvetica, Geneva, Arial, classes” para distinguirlas de los atributos de clase, que
SunSans-Regular, sans-serif } aparecen directamente en HTML, por ejemplo,
class="navbar". Página 9
 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>

 Fijate cómo se ve ahora la página.

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. Después, cortá y pegá 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 }

Elegí “Guardar como…” del menú Archivo, comprobá que está en el mismo directorio/carpeta que el
archivo mipagina.html, y guardá la hoja de estilo como “miestilo.css”.

Página 10
Volvé a la ventana que muestra el código HTML. Borrá todo lo que hay desde la etiqueta <style> hasta
</style>, ambas inclusive, y reemplazalo por un elemento <link> de la siguiente forma:

<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 guardaste el archivo HTML y lo actualizaste en el navegador, no deberías ver ningún cambio en el

aspecto de la página. Ésta sigue guardando el mismo estilo, pero ahora viene establecido por el archivo
externo.

Página 11