Hojas de estilo

En este tema vamos a ver qué son las hojas de estilo, y cómo trabajar con ellas.
Introducción

Los estilos CSS (Cascading Style Sheets) son hojas de estilo de actualización automática. Se usan principalmente para definir estilos que luego se aplicarán a las páginas de nuestro sitio, incluso a veces permiten definir características que no permiten definir los estilos HTML, como el color de fondo para el texto por ejemplo. Al estar la definición de los estilos en un archivo externo a las páginas y común a todas las páginas del sitio (es recomendable) el aspecto de nuestras páginas será más homogéneo y además podremos cambiar ese aspecto de manera segura e inmediata cambiando únicamente la hoja de estilos. Se pueden definir estilos independientes o estilos asociados a determinadas etiquetas por ejmplo a la etiqueta (que corresponde a los hiperenlaces). De este modo, todos los hiperenlaces de la página o del sitio adquirirían la apariencia definida en ese estilo y con un sólo cambio en la hoja de estilos podemos cambiar de golpe el estilo de todos los enlaces en todas las páginas vinculadas a este estilo.
El inconveniente que tiene trabajar con hojas de estilos es que algunos navegadores no las soportan y las ignoran, aunque estos navegadores suelen ser versiones antiguas, por lo que ocurrirá en pocos casos. Las hojas de estilo pueden crearse con cualquier editor de texto, como puede ser el Bloc de notas, y pueden guardarse con la extensión TXT.
Vincular una hoja de estilo Para poder incluir las propiedades de una hoja de estilo en un documento, hay que vincularla a él. Un documento puede tener varias hojas de estilo vinculadas. Para vincular una hoja de estilo a un documento es necesario insertar la etiqueta en el documento, entre las etiquetas y . Esta etiqueta no necesita etiqueta de cierre.
A través del atributo href se especifica la hoja de estilo que se va a vincular al documento.
A través del atributo rel se tiene que especificar que se está vinculando una hoja de estilo, por lo que su valor ha de ser stylesheet.
A través del atributo type se tiene que especificar que el archivo es de texto, con sintaxis CSS, por lo que su valor ha de ser text/css.
Por ejemplo, podríamos vincular una hoja de estilo escribiendo el siguiente código.

Sintaxis de las hojas de estilo
Como recordarás, para especificar las propiedades de una capa no se utilizan etiquetas normales de HTML. Todas las propiedades se especifican a través del atributo style, y aparecen entre comillas dobles, con un punto y coma detrás de cada una. Para asignar los valores a las propiedades no se utiliza el símbolo = (igual), sino que se utiliza el símbolo : (dos puntos).
Esto es debido a que se está especificando un estilo, pero sin vincular ninguna hoja de estilo a la página. Para especificar las propiedades dentro de una hoja de estilo, la sintaxis es muy similar. En primer lugar se pone el nombre del estilo, y entre llaves se especifica la lista de propiedades (en minúsculas) que se corresponden con dicho estilo. Cada una de estas propiedades tiene que tener un punto y coma detrás, y los valores se asignan con el símbolo : (dos puntos).
El nombre del estilo puede ser un nombre inventado por nosotros, o el nombre de una etiqueta HTML. Para poder utilizar un nombre inventado, tiene que estar precedido por un punto, o por el nombre de una etiqueta seguida de un punto.
Por ejemplo, en una hoja de estilo podríamos tener lo siguiente: body {background-color: #006699; font-family: Arial,Helvetica;} .mitexto {font-family: Arial,Helvetica; font-size:18px;} Si vinculáramos esta hoja de estilo a un documento, se aplicarían directamente las propiedades especificadas para la etiqueta . En cambio, no existe ninguna etiqueta , por lo que para aplicar este estilo a algún elemento de la página habría que indicarlo de algún modo. Para aplicar este estilo a un elemento, habría que insertar el atributo class en su etiqueta. Por ejemplo, para aplicar ese estilo al siguiente párrafo del documento:

texto con estilo

Habría que escribir:

texto con estilo

Pero para aplicar el estilo únicamente a una parte del contenido de la etiqueta, como podría ser en este caso una palabra del párrafo, sería necesario incluir la etiqueta (que agrupa bloques, sin producir un cambio de línea). Por ejemplo, para aplicar el estilo únicamente a la palabra estilo, habría que escribir:

texto con estilo

Enlaces

Enlaces

---

Probablemente la característica que más ha influido, junto con las imágenes, en el espectacular desarrollo de la Web hayan sido los enlaces (links). Un enlace aparece generalmente como un texto azul subrayado y cuando situamos el cursor sobre él se transforma en una mano con el dedo índice extendido. Si pulsamos sobre el enlace saltamos a otra parte del documento, a otro documento situado en cualquier lugar, o incluso se abre el programa de correo para enviar un mensaje a la dirección indicada.
En general los enlaces tienen la siguiente estructura
<A HREF="URL"> Texto del enlace</A>
El texto del enlace es lo que se visualizará en el navegador. La URL es la dirección donde apunta el enlace y puede ser de estos tipos:

 Enlace a otro lugar del mismo documento

En este caso la URL se sustituye por un marcador en la misma página. El marcador puede ser texto colocado en el lugar al que queremos saltar. No importa lo que sea ya que no se verá.
Veamos un ejemplo para saltar al inicio de esta página. Escribiríamos en el lugar desde el que queremos saltar:
<A HREF="#inicio"> Ir al Inicio</A>

Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta:

<A NAME="inicio"> </A>
Una vez escrito esto y guardada la página veríamos al abrirla con el Navegador
Ir al Inicio
Al pulsar sobre ella nos llevaría al principio de la página ya que fue allí donde coloqué el marcador

 Enlace a otra página local

En este caso la URL se dará de forma relativa (igual que para poner un fondo a la página). Por ejemplo si tenemos dos páginas en el mismo directorio pagina1.htm y pagina2.htm y queremos poner un enlace desde la pagina1.htm a la pagina2.htm debemos escribir
<a href="pagina2.htm">Ir a pagina2</a>
Con esto es suficiente, no hay que crear ningún marcador a no ser que quieras ir a un sitio concreto de la pagina2.htm. En ese caso tendrías que poner en el sitio adonde quieres llegar de lapagina2.htm
<a name="sitio"></a>
y en la pagina1.htm
<a href="pagina2.htm#sitio>Ir a sitio de la página 2</a>
Las palabras forma relativa, al principio de esta sección, constituyen un enlace de este último tipo

Enlace a una dirección de Internet

Ahora la URL debe darse de forma absoluta, tal como la ves en la ventana de dirección del navegador, es decir:
<A HREF="http://centros4.pntic.mec.es/ies.de.cistierna">IES Cistierna</A>
te llevaría a la página de entrada del IES Cistierna

 Enlaces usando imágenes

Con frecuencia se emplean imágenes como enlaces. A veces son enlaces a las mismas imágenes con más resolución, como en el caso de fotos. Otras veces nos llevan a una localización cualquiera.
Para que una imagen sea un enlace hay que colocarla en el lugar del texto del enlace, si además queremos que vaya a otra imagen, ésta la debemos poner en el lugar de la URL.
Veamos unos ejemplos Supongamos para ello, que la estructura de nuestras páginas es la indicada en la imagen. Si escribo en la página actual localizada en Aprendiendo Html
<A HREF=" #inicio"><img src="gifs/imagen.gif"></A>
obtengo una imagen que al pulsarla me lleva al inicio de esta página, exactamente como esta: 
Para que una imagen sea un enlace a otra imagen se debe escribir:
<a href="gifs/sky.jpg"><img src="gifs/ojo.gif" ></a>
que da como resultado 

 Enlace con una dirección de correo

Este es un enlace un poco diferente, veamos un ejemplo
<A HREF="mailto: abercian@pntic.mec.es"> abercian@pntic.mec.es </A>
que se ve como abercian@pntic.mec.es y que si lo pulsas se abre el programa de correo que tengas configurado, con la dirección en el campo correspondiente

 Enlace con un grupo de noticias

Como antes la sintaxis es un poco diferente
<A HREF="news://news.pntic.mec.es/"> Mira en las noticias del MEC para encontrar profesores colgados</A>
que se vería
Mira en las noticias del MEC para encontrar profesores colgados

 Enlace para descargar un fichero

En la URL se poner la ruta donde está el fichero. Por ejemplo, para descargar un fichero de nombre guiahtml.zip se debe poner
<A HREF="../zip/guiahtml.zip">guiahtml.zip</A>
que se vería así guiahtml.zip. Si pulsas sobre él se abrirá una ventana avisándote de una descarga de archivos y preguntándote qué deseas hacer

 Enlace que se abre en una nueva ventana

Si quieres que la página que enlazas aparezca en una nueva ventana del navegador, solamente tienes que poner target="nombre" como atributo del enlace, es decir:
<a href="index.htm" target="nueva">Indice</a>
que se verá como Indice

Aún hay más tipos de enlaces, pero éstos son los más importantes

---

Formatos

Formatos del texto

---

El texto del documento se puede modificar de muchas formas, vamos a ver las más usuales:

 Títulos

Los títulos o encabezamientos se emplean al comienzo de una sección. Las etiquetas que se usan son:

Etiqueta	Se ve
<h1> Título </h1>	Título
<h2> Título </h2>	Título
<h3> Título </h3>	Título
<h4> Título </h4>	Título
<h5> Título </h5>	Título
<h6> Título </h6>	Título

 Estilos de fuentes

Como ves en la tabla es muy sencillo conseguir los efectos deseados, solamente tienes que colocar el texto entre las etiquetas adecuadas.

Etiqueta

Se ve

<B>Texto en Negrita</b> <I>Itálica</i> <B><I>Negrita e Itálica</i></b> <U>Subrayado</u> <EM>Enfatizado</em> <STRONG>Fuerte</strong> <CODE>Code Texto</code> <CITE> Citation Text</cite> <KBD>Keyboard Text</kbd> <SAMP>Sample Text</samp> <TT>Teletype Text</tt> <VAR>Variable Element Text</var> <BIG>Texto grande</big> <SMALL>Texto pequeño</small> <SUB>Subindice</SUB> <SUP>Superíndice</SUP> <BLINK> Texto intermitente</blink> <STRIKE>Texto tachado</STRIKE>

Texto en Negrita Itálica Negrita e Itálica Subrayado Solo Explorer Enfatizado Fuerte Code Texto Citation Text Keyboard Text Sample Text Teletype Text Variable Element Text Texto grande Texto pequeño Subíndice Solo Explorer Superíndice Solo Explorer Texto intermitente Solo Netscape Texto tachado

Algunas etiquetas funcionan solamente con alguno de los navegadores, tenlo en cuenta si las usas.

 Tamaño de fuentes

El tamaño de las fuentes se puede especificar de dos maneras, una de ellas por medio de un número del 1 al 7 (de más pequeño a más grande) del siguiente modo
<font size=1> Esta es la letra más pequeña que se puede conseguir </font>que se verá como
Esta es la letra más pequeña que se puede conseguir
Otra forma es por medio de una referencia relativa:<font size="+1"> Esto es igual que poner size=4 </font>
que se ve comoEsto es igual que poner size=4
El tamaño por defecto es el 3

 Tipos de fuentes

El tipo de fuente es un atributo de FONT y tiene la siguiente sintaxis<font face="Courier">Eso se verá en la fuente Courier</font>
que se ve como:
Eso se verá en la fuente Courier

 Color de las fuentes

Es otro atributo de FONT. Mira en la página de colores para saber cómo se especifican los colores. La sintaxis es la siguiente:<font size=2 face="MS Sans Serif" color="navy">Como ves se pueden poner varios atributos separados por un espacio</font>que se verá así:
Como ves se pueden poner varios atributos separados por un espacio

 Párrafos y bloques

Para definir y separar bloques de texto se emplean una serie de etiquetas que definen los párrafos, texto preformateado o bloques con significado especial como direcciones o citas.
Etiquetas de bloques:
<P> Se utiliza para que los párrafos queden separados por una línea en blanco. Si solo quieres escribir un punto y aparte debes usar <BR>. Las marcas inicial y final son <P> y </P>. La etiqueta<P> admite los atributos:

ALIGN="left" , ALIGN="right" , ALIGN="center" y ALIGN="justify" para alinearlo a la izquierda, a la derecha, centrarlo o justificarlo totalmente. Por defecto está alineado a la izquierda.

<PRE> El texto insertado entre las marcas <PRE> y </PRE> será visualizado por el navegador respetando el formato con el que fue escrito en el fichero fuente HTML. Esta etiqueta es muy útil para escribir más de un espacio o para hacer pequeñas tablas
<ADDRESS> empleada para indicar que un texto representa una dirección o una firma. Generalmente se presenta en cursiva y tabulado.
<BLOCKQUOTE> Se representa con tabulaciones a la izquierda y derecha. Toda los párrafos de esta página están entre las etiquetas <BLOCKQUOTE> y </BLOCKQUOTE>, de ese modo se consigue que el texto se presente con márgenes a ambos lados.
<BR> Este elemento sólo tiene marca inicial e indica un salto de línea, es decir un punto y aparte sin separar el párrafo. Esta etiqueta no tiene su correspondiente de cierre
<HR> Se emplea para representar una línea horizontal. Tampoco tiene pareja de cierre. Se pueden emplear los atributos

ALIGN="left" , ALIGN="right" , para alinearla a la izquierda o a la derecha. Por defecto aparece centrada
WIDTH="66%" SIZE="3", para especificar el ancho en % y el alto en píxels
COLOR="#0000FF" , para especificar el color

Estructura Basica

Estructura básica de un documento HTML

---

 Todos los documentos Html tienen la estructura que se muesta a continuación, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).

<HTML>
    <HEAD>
        <TITLE>Título de la página</TITLE>
        ...
    </HEAD>

    <BODY>
        Aquí iría el contenido de la página
    </BODY>
</HTML>

Vamos a analizar más detenidamente las distintas secciones que componen la página
 Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:

<meta name="description" content="Información sobre el Centro,las enseñanzas que se pueden cursar, los departamentos didácticos">
<meta name="keywords" content="educación,enseñanza,instituto, profesores, alumnos">

En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.
 La cabecera es la sección comprendida entre <head> y </head>. En ella se encuentra necesariamente el título (entre las etiquetas <title> y </title>).

El título de la página debe describir su contenido por ejemplo:
<TITLE>Colegio Público de Villamañán - Ámbito de Influencia - </TITLE> 
no valdría en cambio
<TITLE>Página de Inicio</TITLE> ya que esto no dice nada por si solo

Dentro de la cabecera también se suele incluir código en JavaScript, que se reconoce porque va comprendido entre las etiquetas

<script language="JavaScript">
<!--
Aquí iría el código
// -->
</SCRIPT>

 El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.
El cuerpo está delimitado por las etiquetas <body> y </body> La etiqueta <body> suele contener algunos atributos, a saber:

BGCOLOR parámetro usado para especificar el color de fondo de la página. El color se define como una terna de números (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.
Sintaxis: <BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>
Una buena ayuda para la seleccion de colores con #rrggbb la puedes encontrar en: Paleta de Colores
TEXT, parametro usado para definir el color del texto por omision. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro.
LINK, VLINK, ALINK, parámetros usados para especificar el color por omision de: texto con enlace, enlace ya visitado y enlace activo.
Los colores por omision son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que BGCOLOR.
BACKGROUND, parámetro usado para especifica la ruta y nombre de archivo (URL) de la imagen que será usanda como fondo del documento. Esta se verá como mosaico para cubrir toda la ventana si es pequeña (lo habitual).
Sintaxis: <BODY BACKGROUND="ruta/archivo.gif">
Es conveniente especificar la ruta de modo relativo, esto quiere decir que si cambiamos el directorio completo donde están nuestras páginas, desde C:\ a C:\webs por ejemplo, la ruta especificada debe seguir siendo válida.
Por ejemplo si la página desde la que hacemos el enlace se encuentra en el directorio Aprendiendo Html y queremos poner como fondo la imagen fondo.gif, que se encuentra en gifs, se debe poner:
<BODY BACKGROUND="gifs/fondo.gif">

Si la página estuviese en ejemplos se pondría:<BODY BACKGROUND="../gifs/fondo.gif">
Fíjate en ../ pues es lo que indica al navegador que debe acudir al directorio superior

Html

Introducción HTML

¿Qué es el HTML?

El HTML ( HiperText Markup Language ) es el lenguaje utilizado para representar documentos en la WWW (World Wide Web). Además de texto normal incluye también, elementos multimedia (gráficos, vídeo, audio) y existen enlaces (links) que permiten saltar a otras partes del documento o a otro sitio cualquiera de Internet.
Otra característica muy importante de este lenguaje es que es portable, es decir, se pueden visualizar las páginas con cualquier sistema operativo y, por supuesto también crearlas.
En la actualidad (noviembre 1999), Netscape y Microsoft siguen sin ponerse de acuerdo en el estándar del lenguaje. Microsoft ha asumido las directrices del ww3, pero no así Netscape, que implementa etiquetas propias, de modo que las páginas no se visualizan igual en el Navigator y en el Explorer.
Las etiquetas constituyen la filosofía de este lenguaje. Por medio de ellas se pueden controlar los elementos tipográficos del texto: tipo, color y tamaño de las fuentes, el estilo ( negrita, cursiva, etc ), así como también la inclusión de tablas, listas, formularios, la inserción de fotos, sonidos, fondos, los enlaces mencionados anteriormente. etc.
Las etiquetas se pueden modificar por medio de sus atributos, éstos son del tipo atributo="valor" y se colocan detrás del nombre de la etiqueta
El nombre de la etiqueta y sus atributos se colocan entre los símbolos < y > y normalmente se usan dos, una de inicio y otra final, para conseguir el efecto deseado.
Por ejemplo si escribimos
<FONT COLOR="#ff0000" size="2">El texto se verá rojo y en tamaño un poco menor de lo normal </font>
Se verá como El texto se verá rojo y en tamaño un poco menor de lo normal
El uso de estas etiquetas, y por ende el aprendizaje del HTML, no es difícil. Precisamente el objetivo de esta pequeña guía es servir de introducción y referencia de las características más usadas delHTML

¿Cómo empiezo a escribir HTML?

Para comenzar tan sólo necesitas un editor de texto para escribir las páginas y un navegador para visualizarlas.
El editor no debe formatear el texto. Usa el Bloc de notas ( Notepad ) en Windows 95 o 98. Se carga muy rápido y además es el programa que se abrirá por defecto desde el navegador.
Las etiquetas y sus atributos se pueden escribir en mayúsculas o minúsculas. El lenguaje ignora, también, los espacios en blanco seguidos, donde sólo cuenta uno de ellos.
Una vez que hayas escrito una página, guárdala en un fichero con extensión .htm o .html. Cuando hagas doble click sobre él se abrirá el navegador y te mostrará la página.
Para ver el contenido de los ficheros anteriores (los acabados en htm o html ) con el Bloc de notas puedes crear un acceso directo al mismo en la carpeta "SendTo" del directorio "Windows" y te aparecerá como opción en "Enviar a " cuando hagas click con el botón dereho del ratón sobre el fichero.
Otro modo es abrir el fichero con el Explorer y luego, con el cursor colocado sobre el texto (no sobre imágenes ) pulsar el botón derecho y elegir "Ver código fuente". En el Comunicator también se puede "Ver el origen" pero en un visor propio que no permite modificar el texto
Ten cuidado con el nombre de los ficheros, pues los servidores donde se alojan las páginas sí distinguen mayúsculas de minúsculas y no es lo mismo Inicio.htm queinicio.htm

 ¿Qué necesito para crear una página Web?

Lo primero que debes tener claro es qué contenidos va a tener tu página. Por ejemplo, si vas a hacer una página sobre tu Instituto, ¿qué vas a poner?: las enseñanzas que se cursan, los proyectos que estáis llevando a cabo, un poco de historia del pueblo o ciudad donde esté enclavado el centro, las actividades extraescolares que realiza el centro, etc.
Una vez decidido esto ¿qué necesitas?. De entrada, el doble de tiempo que calcules para realizarla. Además necesitarás:

 Un navegador. Aunque hay más, parece que el Explorer y el Netscape son los mejores.
 Un editor de Html (que bien puede ser el que viene con los navegadores) o bien escribir todo el código a mano.
 Hacer las fotos que vas a poner y escanearlas ( esto suele llevar bastante tiempo si no se ha hecho antes) Puedes hacerlo en el CPR.
 Un programa gráfico para retocar las imágenes, mira en la página de imágenes.
 Espacio en un servidor que albergue la página. Si tienes cuenta en el PNTIC puedes subir unos 250 KB, que son suficientes para una página sencilla
 Un programa para subir la página al servidor, puede ser el WS_FTP que localizarás en http://www.ipswitch.com
 Dar de alta la página en algunos buscadores (Alta Vista, Olé, etc) y también en el PNTIC si la página está relacionada con la educación. Si no haces esto, solamente podrán visitar tu página quienes conozcan la dirección exacta.