Programación Web I - Instituto Superior Tecnológico San Ignacio de

Instituto de Educación Superior
“San Ignacio de Monterrico”
Programación Web I
Conceptos básicos
1.
World Wide Web (WWW): Digamos, simplemente, que es un sistema de
información, el sistema de información propio de Internet. Sus características
son:
•
Información por hipertexto: Diversos elementos (texto o imágenes) de la
información que se nos muestra en la pantalla están vinculados con otras
informaciones que pueden ser de otras fuentes. Para mostrar en pantalla esta
otra información bastará con hacer clic sobre ellos.
•
Gráfico: En la pantalla aparece simultáneamente texto, imágenes e incluso
sonidos.
•
Global: Se puede acceder a él desde cualquier tipo de plataforma, usando
cualquier navegador y desde cualquier parte del mundo.
•
Pública: Toda su información está distribuida en miles de ordenadores que
ofrecen su espacio para almacenarla. Toda esta información es pública y toda
puede ser obtenida por el usuario.
•
Dinámica: La información, aunque esta almacenada, puede ser actualizada
por el que la publico sin que el usuario deba actualizar su soporte técnico.
•
Independiente: Dada la inmensa cantidad de fuentes, es independiente y
libre.
2.
Navegador: Es el programa que nos ofrece acceso a Internet. Debe
ser capaz de comunicarse con un servidor y comprender el lenguaje de todas
las herramientas que manejan la información de Web. Puede decirse que
cada casa de software podría tener su navegador propio, aunque los mas
populares sean Netscape e Internet Explorer.
3.
Servidor: Se encarga de proporcionar al navegador los documentos y
medios que este solicita. Utiliza un protocolo HTTP para atender las
solicitudes de archivos por parte de un navegador.
Formando Emprendedores De Calidad Para Un Mundo Empresarial1
Instituto de Educación Superior
“San Ignacio de Monterrico”
4.
HTTP: Es el protocolo de transferencia de hipertexto, o sea, el
protocolo que los servidores de World Wde Web utilizan para mandar
documentos HTML a través de Internet.
5.
URL: Es el Localizador Uniforme de Recursos, o dicho mas
claramente, es la dirección que localiza una información dentro de Internet.
6.
HTML: De momento, le basta saber que estas siglas se corresponden
con la definición "Lenguaje para marcado de hipertexto". Más claro aún, se
trata de un lenguaje para estructurar documentos a partir de texto en World
Wide Web. Este lenguaje se basa en tags (instrucciones que le dicen al texto
como deben mostrarse) y atributos (parámetros que dan valor al tag).
Organización de una Web
Para hacer una buena presentación Web lo ideal es crearnos un boceto inicial
de la estructura. Si hacemos esto, no solo estamos procurando una presentación
agradable y facilitando la tarea de navegar sino que también nos facilitamos el
mantenimiento de futuras revisiones y modificaciones.
Objetivos
Lo primero que debemos hacer el fijarnos los objetivos que queremos alcanzar
según la información que vayamos a aportar. Para crear nuestra primera página,
estos objetivos deberían no ser muy pretenciosos o tener un sentido únicamente
personal. Tener claros los objetivos nos ayudara a no plasmar contenidos confusos
o innecesarios.
Contenidos
Una vez tenemos los objetivos, hay que organizar el contenido por temas o
secciones, que se ajusten a nuestros objetivos, reuniendo las informaciones
relacionadas bajo el mismo epígrafe. Es conveniente que los temas sean
razonablemente cortos y si fuera necesario divida en subtemas. Si por el contrario
tenemos temas muy cortos, lo correcto sería agruparlos bajo un encabezado de
tema algo más general.
Formando Emprendedores De Calidad Para Un Mundo Empresarial2
Instituto de Educación Superior
“San Ignacio de Monterrico”
Primer paso
Una presentación Web consiste de una o más páginas Web que contienen texto
y gráficos y que están vinculadas entre si creando un cuerpo de información. La
página principal o página base es desde donde se comienza a visitar la presentación
y su URL será la que figure como dirección de la presentación. Esta página base
debe ofrecer un panorama general del contenido de la presentación.
Organización
Ha llegado la hora de estructurar la información recopilada en un conjunto de
páginas Web. Podemos crearnos una estructura propia pero lo más lógico es
guiarnos por una estructura clásica.
Secuenciación
Consiste en decidir que contenido va en cada página, elaborar la trama de
vínculos para navegar entre ellas e incluso, hacernos una idea de que tipo de
gráficos vamos a poner y que ubicación van a tener. Para ello puede utilizarse un
"Tablero de Secuencia", un esquema gráfico que nos ayudará a recordar en todo
momento donde encaja cada página en el global de la presentación.
Revisión de objetivos
Finalmente y antes de ponernos a crear nuestra presentación Web, debemos
prestar atención a que lo que tenemos plasmado en el "Tablero de Secuencia" cubre
los objetivos que nos habíamos propuesto. Si es así, ya podemos comenzar a
manejarnos con HTML.
El lenguaje HTML
Como ya se ha dicho, este lenguaje estructura documentos. La mayoría de los
documentos tienen estructuras comunes (títulos, parrafos, listas...) que van a ser
definidas por este lenguaje mediante tags. Cualquier cosa que no sea una tag es
parte del documento mismo.
Formando Emprendedores De Calidad Para Un Mundo Empresarial3
Instituto de Educación Superior
“San Ignacio de Monterrico”
Este lenguaje no describe la apariencia del diseño de un documento sino que
ofrece a cada plataforma que le de formato según su capacidad y la de su
navegador (tamaño de la pantalla, fuentes que tiene instaladas...). Por ello y para no
fustrarnos, no debemos diseñar los documentos basándonos en como lucen en
nuestro navegador sino que debemos centrarnos en proporcionar un contenido claro
y bien estructurado que resulte fácil de leer y entender.
No se desespere por lo que acaba de leer. HTML tiene dos ventajas que lo
hacen prácticamente imprescindibles a la hora de diseñar una presentación web: Su
compatibilidad y su facilidad de aprendizaje debido al reducido número de tags que
usa.
Básicamente, los documentos escritos en HTML constan del texto mismo del
documento y las tags que pueden llevar atributos. Esto llevado a la práctica, vendría
a ser:
<tag> texto afectado </tag>
La tag del principio activa la orden y la última (que será la del principio precedida del
signo /) la desactiva. No todas las tags tienen principio y final pero esto lo veremos
más adelante.
Editores y convertidores
Antes de comenzar al trabajar sobre un editor, le recomendaría que visionase el
código fuente de nuestra página principal. Todos los navegadores dan la opción de
editarla (Menú ver / Código fuente). Si visita otras páginas y visualiza su código
fuente encontrará similitudes en la forma en que están organizadas las páginas y en
las tags utilizadas.
¿Dónde hay que editar el código fuente? Pues, si usted es usuario de Windows
le bastaría con el Bloc de Notas y si utiliza Macintosh con el Simple Text. Si utiliza
procesadores de texto más potentes debe guardar sus documentos como "solo
texto" ya que HTML ignora todos los espacios en blanco. Una vez guardado
convierta la extensión de texto por la extensión html o htm (en los sistemas DOS).
Formando Emprendedores De Calidad Para Un Mundo Empresarial4
Instituto de Educación Superior
“San Ignacio de Monterrico”
Los convertidores se utilizan para tomar los archivos de un procesador de textos
y convertirlos a HTML. Pero debido a la propia limitación de este lenguaje, por muy
elegante que hagamos un documento en nuestro procesador, un convertidor no
obrará milagros y quizá acabe por crear cosas ilegibles en HTML. Además, la
mayoría de los convertidores no convierten imágenes y no automatizan los vínculos
hacia los documentos en Web debiendo corregir esto de manera manual.
A través de Internet o de revistas especializadas, usted podrá hacerse con
editores y convertidores gratuitos o de muy reducidos costes. Quizá más adelante,
cuando este acostumbrado a trabajar con HTML, puedan resultarle interesantes pero
eso se lo dejo a su futura elección. De momento, hágame caso, si quiere aprender
HTML use solo un procesador de texto simple.
Documento HTML
<HTML> <HEAD> <TITLE> <BODY>
Estructura básica de un documento HTML: Cabecera y cuerpo del documento
Tres son las tags que describen la estructura general de un documento y dan
una información sencilla sobre él. Estas tags no afectan a la apariencia del
documento y solo interpretan y filtran los archivos HTML.
1.
<HTML>: Limitan el documento e indica que se encuentra escrito en este
lenguaje.
2.
<HEAD>: Especifica el prólogo del resto del archivo. Son pocas las tags que
van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los
marcadores del navegador e identificará el contenido de la página. Solo puede haber
un título por documento, preferiblemente corto aunque significativo, y no caben otras
tags dentro de él. En head no hay que colocar nada del texto del documento.
3.
<BODY>: Encierra el resto del documento, el contenido.
<HTML>
<HEAD>
<TITLE>Primer Ejemplo de codigo Html</TITLE>
</HEAD>
Formando Emprendedores De Calidad Para Un Mundo Empresarial5
Instituto de Educación Superior
“San Ignacio de Monterrico”
<BODY>
Bienvenidos alumnos al Curso de Programación Web I
</BODY>
</HTML>
Primeros pasos
<H1> <P> <BR>
Tres son la tags que describen la estructura general de un documento y dan una
información sencilla sobre él. Estas tags no afectan a la apariencia del documento y
solo interpretan y filtran los archivos HTML.
<H1>, <H2>, <H3>...: Titulares. Sirven para dividir el texto en secciones. Se pueden
definir seis niveles de titulares, el texto que deseamos que sea un titular se pone
entre las tags <H1> Titular </H1>. Se definen mediante las tags <H1>.....</H1>
hasta <H6>.....</H6>
<P>: Párrafos. En principio, sin entrar en detalles de alineación u otras
características, digamos que se definen por las tags <P>.....<P>. Esta tag, en un
principio, se diseñó para saltar de párrafo por lo que puede ir sola "<P>" al final
de un texto indicando que a continuación se quiere una línea en blanco aunque
le recomendamos que se acostumbre a utilizarla abriéndola y cerrándola.
<BR>: Saltos de línea. Esta tag sirve para realizar un salto de linea, puede poner
tantas como desee y realizará un salto de línea por cada una de ellas.
<!-- -->: Comentarios. Son directivas que nunca se mostrarán a través del navegador
y que le servirán para recordatorios en futuras revisiones del documento.
Bien,
recuperemos
nuestro
ejemplo
y
agreguemos
nuestros
nuevos
conocimientos.
<HTML>
<HEAD>
<TITLE>Segundo ejemplo</TITLE>
</HEAD>
<BODY>
<H1>Mi primera página</H1>
<!-- Aquí va un comentario que no es
Formando Emprendedores De Calidad Para Un Mundo Empresarial6
Instituto de Educación Superior
“San Ignacio de Monterrico”
interpretado por el navegador, no será visualizado -->
<P>Bienvenidos, esta es un página con titular,
que tiene también un párrafo y unos cuantos
saltos de línea.</P>
Uno<br>
Dos<br>
Tres<br>
</BODY>
</HTML>
Creación de enlaces
<A>
Lo característico del lenguaje HTML es el poder generar vínculos de hipertexto
para enlazar con ellos todos sus documentos en web.
Para generar un enlace a otro documento necesitamos el nombre de un archivo
(o su dirección URL) y el texto que servirá de punto de activación del otro
documento. Este segundo elemento será el que veamos en pantalla y que se servirá
del primero para saltar de documento.
Los enlaces se generan mediante la tag <A>.....</A> y, a diferencia de los vistos
anteriormente, llevará siempre dentro de la tag un atributo ya sea <A HREF=""> o <A
NAME="">.
1.
<A HREF="URL">.....</A>: Es el más habitual de los atributos y sirve para
saltar entre diferentes URLs. De momento veremos:
•
Saltar en una presentación del archivo 1 al archivo 2: En el archivo
1 incluiremos la directiva <A HREF="archivo2.html">Siguiente página</a>
•
Saltar de nuestra presentación a otra presentación web llamada
www.bienvenidos.es:
<A HREF="http://www.bienvenidos.es">Visita
esta
página</A>
2.
<A NAME="parte1">Primera parte</A>: Utilizamos el atributo name para dar
nombre a una sección de nuestro documento. Posteriormente, cuando en nuestro
Formando Emprendedores De Calidad Para Un Mundo Empresarial7
Instituto de Educación Superior
“San Ignacio de Monterrico”
documento
queramos
incluir
un
vínculo
a
dicha
sección
escribiremos:
<A HREF="#parte1">Ir a la primera parte</A>
<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</HEAD>
<BODY>
<A NAME="arriba"><H1>Página de enlaces</H1></A>
<A HREF="#abajo">Ir abajo</A><br>
<A HREF="ej4.html">Ir a ejemplo 4</A><br><br>
<A HREF="http://www.webestilo.com/">Ir a WebEstilo</A><br>
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br>.<br>.<br>.<br>.<br>.<br>
<A NAME="abajo"><br></A>
<A HREF="#arriba">Ir arriba</A>
</BODY>
</HTML>
URLs
URL: Localizador Universal de Recursos
Los URL son las direcciones de las informaciones que buscamos en Internet.
Los URL constan de tres partes:
1. Protocolo: Es el programa que utilizará el navegador para obtener el archivo
elegido. Les suena HTTP, FTP, Gopher...
1.
Nombre del host: Se trata del sistema donde se encuentra almacenada la
información que buscamos.
2.
Ruta del fichero: Se trata de la ubicación del archivo dentro del host.
http://www.bienvenidos.es/publico/saludos.html
Entre los principales tipos de URL destacan:
Formando Emprendedores De Calidad Para Un Mundo Empresarial8
Instituto de Educación Superior
“San Ignacio de Monterrico”
2. HTTP: Son los más populares ya que son los utilizados por los servidores de
WWW para mandar documentos a través de Internet.
1.
FTP: Se utilizan para apuntar hacia los archivos que estén en servidores que
usan el protocolo FTP (File Transfer Protocol). Este protocolo es normalmente
utilizado para enviar y recibir ficheros. Es el protocolo que se usa para enviar
nuestras páginas al servidor de internet. Como ya se puede imaginar en estos
servidores se almacenan los archivos que forman parte de nuestra presentación
web.
•
File: Apuntan hacia archivos contenidos en el mismo disco que se
encuentra el navegador. No resulta muy interesante poner estos URL en
nuestras presentaciones puesto que otra persona que desde otro sistema
apunte hacia este URL, generalmente fallará en su intento y no podrá tener
acceso a él.
•
Mailto:
Se
usa
para
mandar
correos
electrónicos.
Cuando
seleccionamos este tipo de URL se abre la aplicación de correo electrónico de
nuestro ordenador para enviar un correo a la dirección hacia la que apunta el
URL. La forma estandar es: mailto:[email protected]
•
News: Son URL de grupos de noticias, en estos servidores se
almacenan mensajes el los que se discuten sobre direfentes temas.
<HTML>
<HEAD>
<TITLE>Ejemplo 5</TITLE>
</HEAD>
<BODY>
<H1>Diferentes tipos de URLs</H1>
Enlace a <A HREF="http://www.webestilo.com">WebEstilo</A>.
<br>
Enlace al servidor de FTP
de <A HREF="ftp://ftp.mozilla.org/pub/mozilla/">Mozilla</A>.
<br>
Enlace a <A HREF="file:///C:">la unidad C
de su ordenador</A>.
<br>
Enlace a <a href="mailto:[email protected]">
mailto:[email protected]</a>.
Formando Emprendedores De Calidad Para Un Mundo Empresarial9
Instituto de Educación Superior
“San Ignacio de Monterrico”
<br>
Enlace a las <A HREF="news://msnews.microsoft.com">News de Microsoft</A>.
<br>
</BODY>
</HTML>
Listas
<UL> <OL> <LI>
Junto con encabezados y párrafos, son otro de los elementos HTML más
comunes. Pueden darse cinco tipos diferentes de listas, cada uno con tags distintas
aunque con alguna en común:
1.
Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol> y cada
elemento de la lista estará encabezado por la tag <li> que puede o no llevar la
tag de cierre </li>. Es conveniente que cada elemento de la lista esté en una
línea nueva aunque todo seguido consiga en la presentación el mismo efecto.
Cuando el navegador interpreta una lista ordenada, numera y sangra cada
elemento en forma secuencial, aunque se introduzcan modificaciones.
2.
Listas con viñetas o sin orden: Se engloban por las tags <ul>.....</ul> y cada
elemento de la lista, también estará encabezado por la tag <li>. El resultado es
que el navegador inserta viñetas (marcadores) delante de cada elemento.
3.
Listas de menú y de directorio: Están en desuso puesto que su resultado
suele ser, prácticamente, idéntico al de las listas con viñetas.

Menú: Englobadas por las tags <menu>.....</menu> y
cada elemento encabezado por la tag <li>.

Directorio: Englobadas por las tags <dir>.....</dir> y cada
elemento encabezado por la tag <li>.
4.
Listas de glosario: Cada elemento de la lista está compuesto por un término y
una definición y cada una de estas partes tiene su propia tag. Estas listas se
engloban con las tags <dl>.....</dl>. Para el término se usa la tag <dt> y para la
Formando Emprendedores De Calidad Para Un Mundo Empresarial10
Instituto de Educación Superior
“San Ignacio de Monterrico”
definición la tag <dd>. Generalmente el navegador colocará término y definición en
dos líneas diferentes pero esto se puede evitar añadiendo a la tag de apertura el
atributo compact: <dl compact>.
5.
Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la
lista secundaria sangre respecto a la principal. Puede jugar con los diferentes
tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal
englobarán todo el conjunto de las listas y las tags de las listas secundarías se
cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir
sangrar el propio código conforme lo va escribiendo en HTML.
<HTML>
<HEAD>
<TITLE>Ejemplo 6</TITLE>
</HEAD>
<BODY>
<H1>Listas</H1>
Una lista ordenada
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
<br><br>
Una lista sin ordenar
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
<br><br>
Una lista de glosario
<dl>
<dt>Témino 1</dt>
<dd>Definición 1</dd>
<dt>Témino 2</dt>
<dd>Definición 2</dd>
</dl>
<br><br>
Listas anidadas
<ul>
<li>Uno
<ul>
Formando Emprendedores De Calidad Para Un Mundo Empresarial11
Instituto de Educación Superior
“San Ignacio de Monterrico”
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</BODY>
</HTML>
Estilos de caracter
<B> <U> <I>
Estos estilo son tags que afectan a palabras o carácteres dentro de otras
entidades de HTML modificando el aspecto de ese texto para que sea diferente del
texto que lo rodea. Existen dos tipos de estilos:
1.
Estilos lógicos: Indican como se va a emplear el texto que realzamos, no el
como se va a formatear.
•
<em>.....</em>: Indica que los carácteres estarán enfatizados de
alguna manera, generalmente en cursiva aunque dependerá del navegador.
•
<strong>.....</strong>: Los carácteres tendrán mayor énfasis,
generalmente en negrita.
•
<code>.....</code>: Muestra como una fuente monoespaciada,
generalmente Courier.
•
<samp>.....</samp>: Muy similar a code.
•
<kdb>.....</kdb>: Texto que el usuario debe escribir.
•
<var>.....</var>:Nombre de una variable que deba ser reemplazada
por su valor real. Generalmente en cursiva o subrayada.
•
<dfn>.....</dfn>:Se usa para resaltar una palabra que se va a
definir.
•
2.
<cite>.....</cite>: Se usa para citas cortas.
Estilos físicos: Modifican la presentación real del texto.
Formando Emprendedores De Calidad Para Un Mundo Empresarial12
Instituto de Educación Superior
“San Ignacio de Monterrico”
•
<b>.....</b>: Pone el texto en negrita.
•
<i>.....</i>: Pone el texto en cursiva.
•
<tt>.....</tt>: Pone el texto en fuente monoespaciada.
•
<u>.....</u>: Subraya el texto afectado.
<HTML>
<HEAD>
<TITLE>Ejemplo 7</TITLE>
</HEAD>
<BODY>
<H1>Estilos de caracter</H1>
Un ejemplo de texto de <EM>realzado</EM>.<br>
Un ejemplo de texto de <STRONG>realzado</STRONG>.<br>
Un ejemplo de texto de <CODE>realzado</CODE>.<br>
Un ejemplo de texto de <SAMP>realzado</SAMP>.<br>
Un ejemplo de texto de <KDB>realzado</KDB>.<br>
Un ejemplo de texto de <VAR>realzado</VAR>.<br>
Un ejemplo de texto de <DFN>realzado</DFN>.<br>
Un ejemplo de texto de <CITE>realzado</CITE>.<br>
<br>
Un ejemplo de texto de <B>realzado</B>.<br>
Un ejemplo de texto de <I>realzado</I>.<br>
Un ejemplo de texto de <U>realzado</U>.<br>
Un ejemplo de texto de <TT>realzado</TT>.<br>
</BODY>
</HTML>
Texto preformateado
<PRE>
Ya dijimos que HTML elimina cualquier espacio en blanco adicional que se inserte
pero nos encontramos con una excepción a esta regla cuando utilizamos las tags
<pre>.....</pre>. Sin embargo esta tag convertirá el texto afectado a fuente
monoespaciada (posiblemente Courier).
Esta tag se usaba para hacer tablas en versiones anteriores del lenguaje HTML
ahora su utilidad puede reducirse a convertir a HTML, rápida y fácilmente, archivos
de correo electrónico y publicaciones de grupos Usenet.
Formando Emprendedores De Calidad Para Un Mundo Empresarial13
Instituto de Educación Superior
“San Ignacio de Monterrico”
<HTML>
<HEAD>
<TITLE>Ejemplo
8</TITLE>
</HEAD>
<BODY>
<H1>Texto
preformateado</H1>
Diferencia entre un texto normal y
un texto
preformateado. En el texto
preformateado, se respetan los
carácteres y los espacios.<br>
iiiiii<br>
wwwwww<br>
<PRE>
Diferencia entre un texto normal y
un texto preformateado. En el texto
preformateado, se respetan los
carácteres y los espacios.<br>
iiiiii<br>
wwwwww<br>
</PRE>
</BODY>
</HTML>
Saltos y lineas
<HR> <BR>
1.
Líneas divisorias: Se crean con la tag <hr> que no tiene tag de cierre ni lleva
texto asociado. Se puede especificar el ancho de la línea con el siguiente atributo
<hr width="80%">.
2.
Saltos de línea: La tag <br> inserta un salto de línea donde se coloque. Puede
colocar tantas como desee y se insertará un salto de línea por cada una de ellas.
Formando Emprendedores De Calidad Para Un Mundo Empresarial14
Instituto de Educación Superior
“San Ignacio de Monterrico”
<HTML>
<HEAD>
<TITLE>Ejemplo 9</TITLE>
</HEAD>
<BODY>
<H1>Saltos y lineas</H1>
<HR>
<HR width="80%">
<HR width="60%">
<HR width="40%">
<HR width="20%">
---<br><br><br>
---</BODY>
</HTML>
Tablas
<TABLE> <TR> <TD>
Las tablas surgieron con la versión HTML 3.0. Las tablas nos permiten
representar y ordenar cualquier elemento de nuestra presentación en diferentes filas
y columnas de modo que podamos resumir grandes cantidades de información de
una manera que puede representarse rápida y fácilmente.
El contenido de una tabla lo debemos desarrollar entre las tags <table>.....</table>.
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda
superior izquierda. Las columnas se calcularán automáticamente según las celdas
que hay en cada fila.
Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las tags <th> y
<td> con sus correspondientes tags de cierre, indican para indicar las filas
individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de celdas
que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags
<td>.....</td> indican que se trata de celdas comunes.
<HTML>
<HEAD>
Formando Emprendedores De Calidad Para Un Mundo Empresarial15
Instituto de Educación Superior
“San Ignacio de Monterrico”
<TITLE>Ejemplo 10</TITLE>
</HEAD>
<BODY>
<H1>Tablas básicas</H1>
<TABLE BORDER="1">
<TR>
<TH>Cabereca 1</TH>
<TH>Cabereca 2</TH>
<TH>Cabereca 3</TH>
</TR>
<TR>
<TD>Dato 1</TD>
<TD>Dato 2</TD>
<TD>Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 5</TD>
<TD>Dato 6</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Título
Cuando queramos titular una tabla, podemos escribirlo como texto normal o
usando las tags <caption>.....</caption>. Las tags de título van dentro de las tags de
la tabla y son opcionales, el título no es obligatorio. La tag de apertura puede llevar
consigo el atributo align que indicará si el título va encima o debajo de la tabla.
align="top" indicaría encima de la tabla y align="bottom" indicaría en la parte de
abajo.
Alineación de celdas
Una vez colocadas las celdas, hay que alinear los datos dentro de cada celda.
Así, dentro de cada tag de celda podemos encontrar:
1.
El atributo align= define horizontalmente los datos al margen izquierdo (left), al
derecho (right) o centrado (center).
Formando Emprendedores De Calidad Para Un Mundo Empresarial16
Instituto de Educación Superior
“San Ignacio de Monterrico”
El atributo valign= define verticalmente los datos en la parte superior (top), en
2.
la parte inferior (bottom) o centrado (middle).
Celdas extendidas
Para crear una celda que abarque varias filas o columnas, debemos colocar en
las tags <th> o <td> los atributos:
1.
rowspan= más un valor para indicar el número de filas que se quiere abarcar.
2.
colspan= más un valor para indicar el número de columnas que se quiere
abarcar.
Si opta por poner celdas extendidas en su presentación web, la cosa se
complica bastante. Nuestra recomendación: Coja lápiz y papel y dibuje la tabla con
todas las filas y columnas que se quieren formar porque así tendrá mucho más claro
los valores que debe asignar a los atributos rowspan y colspan y las tags a las que
hay que asignarlos.
Espaciado
Podemos modificar el aspecto de la tabla cambiando el ancho de los bordes, el
espaciado entre celdas y el ancho de las mismas.
1.
width= Acompaña a <table> y especifica el ancho de la tabla, tanto en número
de pixeles como en porcentaje respecto al ancho de la pantalla. También puede
acompañar a las tags <th> o <td> para especificar el ancho de las columnas.
2.
Border= Anteriormente, ya hemos hablado de este atributo. Ahora le diremos
que puede darle un valor que indicará el ancho del borde en pixeles. Border="0"
indicaría la ausencia de borde.
3.
Cellspacing= Suele acompañar a la tag <table>. Indica el número de pixeles
que separan cada celda. El valor predeterminado suele ser 2.
4.
Cellpadding= También acompaña a la tag <table>. Indica el espacio en
pixeles entre el borde de la celda y su contenido. El valor predeterminado suele ser 1
<HTML>
<HEAD>
<TITLE>Ejemplo 11</TITLE>
Formando Emprendedores De Calidad Para Un Mundo Empresarial17
Instituto de Educación Superior
“San Ignacio de Monterrico”
</HEAD>
<BODY>
<H1>Tablas avanzadas</H1>
<TABLE WIDTH="50%" BORDER="1" CELLSPACING="3" CELLPADDING="2">
<TR>
<TD COLSPAN="2" ALIGN="right">Dato 1</TD>
<TD>Un texto cualquiera</TD>
<TD ROWSPAN="2">Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 4</TD>
<TD ALIGN="center">Dato 5</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Imágenes
<IMG>
El uso de imágenes es uno de los factores que ha popularizado tanto World
Wide Web. Incluir imágenes en una presentación web es muy sencillo, solo debe de
tener en cuenta que las imágenes tienen que tener los formatos GIF, JPEG o PNG.
Las imágenes en línea, se especifican a partir de la tag <img> que no tiene una tag
correspondiente de cierre pero que puede acompañarse de los siguientes atributos:
1.
src= Este atributo es obligatorio e indica el nombre del archivo de imagen
(entre comillas) o la URL que se va a representar.
2.
Align= Permite controlar la alineación de una imagen con respecto a una línea
de texto adyacente o a otras imágenes en esa línea. Los tres valores posibles son
los ya conocidos left, right, top, middle y bottom.
3.
Alt= Es la alternativa que se estableció cuando todavía existían visualizadores
de solo texto. Entre comillas podremos escribir un texto que suplantara a esta
imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen,
pasamos el ratón por encima.
Formando Emprendedores De Calidad Para Un Mundo Empresarial18
Instituto de Educación Superior
“San Ignacio de Monterrico”
4.
WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar
al navegador a representar la imagen, significa el ancho de la imagen que vamos a
representar.
5.
HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo,
este significa el alto de la imagen.
6.
BORDER= Con BORDER especificamos el ancho de un borde que rodea la
imagen.
Ejemplo:
Código Html
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un
bebé">
Resultado en Navegador:
<HTML>
<HEAD>
<TITLE>Ejemplo 12</TITLE>
</HEAD>
<BODY>
<H1>Imágenes</H1>
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un
bebé" ALIGN="RIGHT">
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=3 ALT="Un
bebé" ALIGN="LEFT">
Un texto cualquiera.
Formando Emprendedores De Calidad Para Un Mundo Empresarial19
Instituto de Educación Superior
“San Ignacio de Monterrico”
</BODY>
</HTML>
Marcos
En este tema vamos a ver qué son los marcos, para qué se utilizan, y cómo
insertarlos.
Conjunto de marcos <frameset>
Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que
permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de
navegación, mientras que otras sí pueden cambiar. Además de mejorar la
funcionalidad, pueden mejorar también la apariencia.
Cada uno de los marcos de una página, contiene un documento HTML individual.
Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. El
marco izquierdo contiene el documento menu.htm y el derecho el documento
perros.htm. Para poder visualizar la página de este modo, hemos tenido que abrir
en el navegador el documento marcos.htm, que es el que en este caso contiene el
grupo de marcos.
Formando Emprendedores De Calidad Para Un Mundo Empresarial20
Instituto de Educación Superior
“San Ignacio de Monterrico”
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al
principio, por lo que vemos solamente algunos conteptos básicos y ejemplos
sencillos.
Como hemos visto si queremos utilizar marcos debemos crear una página con la
definición del conjunto de marcos (en el ejemplo anterior la página marcos.htm).
Los conjuntos de marcos se definen a través de las etiquetas <frameset> y
</frameset>, que van después de la etiqueta <head>. A través de estas etiquetas
se indica el número de marcos en que se dividirá la ventana, cada uno de los
cuales será una especie de subventana.
Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar
las etiquetas <body> y </body>, ya que el cuerpo del documento será el cuerpo
de las páginas que se carguen en cada uno de los marcos del conjunto de marcos.
Los atributos que pueden especificarse sobre la etiqueta <frameset> son los
siguientes:
Atributo
cols
rows
frameborder
Significado
Posibles valores
tamaño de cada una de las
un número (acompañado de % cuando se
columnas en que se divide el
desee que sea en porcentaje) por cada
documento
columna, separados por comas.
tamaño de cada una de las
un número (acompañado de % cuando se
columnas en que se divide el
desee que sea en porcentaje) por cada fila,
documento
separados por comas.
aparece o no el borde de los
yes
marcos
no
framespacing separación entre los marcos
border
grosor del borde
bordercolor
color del borde
un número
un número, acompañado de % cuando se
desee que sea en porcentaje
número hexadecimal
También es posible incluir asteriscos como valores para los atributos cols y rows.
Este valor indica que dicha fila o columna ocupará todo lo que quede de ventana o
subventana. Cuando existan varias columnas o filas con este valor, se repartirán
de forma equitativa lo que quede de ventana.
Formando Emprendedores De Calidad Para Un Mundo Empresarial21
Instituto de Educación Superior
“San Ignacio de Monterrico”
Por ejemplo, si insertáramos la siguiente línea de código:
<frameset rows="*" cols="142,*,25%">...</frameset>
Como el atributo rows tiene el valor asterisco, solo habría una fila, que ocuparía
todo el alto de la ventana. En este caso concreto no haría falta poner el atributo
rows.
Como el atributo cols tiene tres valores, estaríamos dividiendo el documento en
tres columnas. La primera columna sería de 142 píxeles de ancho, la tercerá del
25% de la ventana, y la segunda columna ocuparía lo que quedará de ventana (el
75% de la ventana menos 142 píxeles).
También es posible anidar marcos. Es decir, es posible dividir marcos en otros
marcos.
Por ejemplo, si insertáramos el siguiente código:
<frameset cols="142,*">
<frameset rows="80,*">...</frameset>
<frameset cols="25%,*,*">...</frameset>
</frameset>
Estaríamos dividiendo el documento en dos columnas. La primera sería de 142
píxeles, y la otra abarcaría el resto de la ventana.
Al mismo tiempo, la primera columna o subventana estaría dividida en dos filas o
subventanas horizontales, la primera de ellas de 80 píxeles.
La segunda columna o subventana de la ventana principal se dividiría a su vez en
tres columnas, la primera de ellas del 25% de la subventana, y las otras dos se
repartirían el resto a partes iguales (se repartirían el 75% de la subventana).
Por último debemos saber que entre las etiquetas <frameset> y </frameset> sólo
se pueden encontrar la etiquetas <head> <noframe> <frameset> <frame> y sus
correspondientes etiquetas de cierre.
Formando Emprendedores De Calidad Para Un Mundo Empresarial22
Instituto de Educación Superior
“San Ignacio de Monterrico”
Ya hemos visto cómo dividir un documento en varias subventanas o marcos, pero
no hemos visto cómo hacer que se carguen las distintas páginas en cada uno de
los marcos.
Para indicar qué documento se cargará en cada uno de los marcos habrá que
insertar la etiqueta <frame> por cada uno de los marcos de la ventana. Estas
etiquetas estarán entre las etiquetas <frameset> y </frameset>, y no necesitan
etiqueta de cierre.
Es posible modificar los siguientes atributos de un marco
Atributo
Significado
frameborder
aparece o no el borde del marco
name
nombre del marco
Posibles valores
yes o 1
no o 0
cualquier valor
si aparece, el usuario no podrá redimensionar el
noresize
tamaño de este marco
anchura del margen con respecto a los bordes
marginwidth
del marco
un número, acompañado de %
cuando se desee que sea en
porcentaje
altura del margen con respecto a los bordes del
marginheight
no puede tomar valores
marco
un número, acompañado de %
cuando se desee que sea en
porcentaje
se mostrará o no la barra de desplazamiento
yes
cuando la página del marco no se pueda
no
visualizar completamente en él
auto
documento que se cargará en el marco
ruta y nombre del documento
scrolling
src
Por ejemplo, para crear el conjunto de marcos, tendríamos que escribir:
<frameset
cols="150,*"
frameborder="yes"
framespacing="3"
border="3"
bordercolor="#FF9900">
<frame
src="izquierdo.htm"
name="marcoizquierdo"
scrolling="no"
<frame
src="derecho.htm"
frameborder="no"
noresize>
name="marcoderecho"
frameborder="no"
scrolling="auto">
</frameset>
Formando Emprendedores De Calidad Para Un Mundo Empresarial23
Instituto de Educación Superior
“San Ignacio de Monterrico”
Y para crear el conjunto de marcos de la página que aparece si pulsas aquí,
tendríamos que escribir:
<frameset
rows="90,*"
framespacing="3"
frameborder="yes"
border="3"
bordercolor="#FF9900">
<frame
src="superior.htm"
name="marcosuperior"
frameborder="yes"
scrolling="NO" noresize>
<frameset
cols="150,*"
framespacing="3"
frameborder="yes"
border="3"
bordercolor="#FF9900">
<frame src="izquierdo.htm" name="marcoizquierdo" scrolling="NO" noresize>
<frame src="derecho.htm" name="marcoderecho">
</frameset>
</frameset>
Esta última página está dividida en dos marcos horizontales (rows="90,*"),
estando el inferior de ellos dividido en dos marcos verticales (cols="150,*").
Sin marcos <noframes>
Siempre que creamos una página queremos que pueda ser visitada por el mayor
número de usuarios, por lo que el hecho de que hayan usuarios cuyos
navegadores no soportan los marcos puede resultar un problema.
Las etiquetas <noframes> y </noframes> se utilizan para que su contenido sea
visualizado en aquellos navegadores que no soportan los marcos.
Si un navegador no soporta los marcos, no cargará ningún documento en ningún
marco, por lo que tendremos que mostrar el cuerpo del documento actual de algún
modo. Por ello, han de introducirse las etiquetas <body> y </body> entre las
etiquetas <noframes> y </noframes>.
Por ejemplo, si escribiéramos el siguiente código:
Formando Emprendedores De Calidad Para Un Mundo Empresarial24
Instituto de Educación Superior
“San Ignacio de Monterrico”
<html>
<head>
...
</head>
<frameset cols="150,*">
<frame src="izquierdo.htm" name="marcoizquierdo">
<frame src="derecho.htm" name="marcoderecho">
</frameset>
<noframes>
<body>
Este documento tiene marcos y tu navegador no los soporta.
</body>
</noframes>
</html>
Obtendríamos una página con dos marcos, que en el caso de intentar ser
visualizada en un navegador que no soportase marcos, mostraría una página con
el texto Este documento tiene marcos y tu navegador no los soporta.
Una buena solución para que el mayor número de usuarios pueda visitar nuestra
página, es crear nuevas páginas con el contenido de los documentos que deberían
mostrarse en los marcos, pero que permitan pasar de unos a otros dentro de la
misma ventana.
De este modo, en el caso de que el navegador no soporte los marcos, podemos
incluir un enlace a una de estas páginas. Por ejemplo, si escribiéramos el siguiente
código:
...
<noframes>
<body>
Este documento tiene marcos y tu navegador no los soporta.
<a href="sinmarcos.htm">Pulsa aqui para visualizar la página sin marcos.</a>
</body>
Formando Emprendedores De Calidad Para Un Mundo Empresarial25
Instituto de Educación Superior
“San Ignacio de Monterrico”
</noframes>
</html>
Cuando la página intentara ser visualizada en un navegador que no soportase los
marcos, aparecería el enlace Pulsa aqui para visualizar la página sin marcos. a
una ventana sin marcos.
Formularios
En este tema vamos a ver qué son los formularios, para qué se utilizan, y qué
elementos pueden contener.
Formulario <form>
Un formulario es un elemento que permite recoger datos introducidos por el
usuario.
Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos
sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de
aplicaciones.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto,
menús desplegables, y botones.
Es muy recomendable utilizar tablas para organizar los elementos de los
formularios. Utilizando tablas se consigue una mejor distribución de los elementos
del formulario, lo que facilita su comprensión y mejora su apariencia.
Formando Emprendedores De Calidad Para Un Mundo Empresarial26
Instituto de Educación Superior
“San Ignacio de Monterrico”
Los formularios se insertan a través de las etiquetas <form> y </form>. Entre
dichas etiquetas habrá que insertar los diferentes objetos que formarán el
formulario. la etiqueta <form> tiene los siguientes atributos:
El atributo action indica una dirección de correo electrónico a la que mandar el
formulario, o la dirección del programa que se encargará de procesar el contenido
del formulario.
El atributo enctype indica el modo en que será cifrada la información para su
envío. Por defecto tiene el valor application/x-www-form-urlencoded.
El atributo method indica el metodo mediante el que se transferirán las variables
del formulario. Su valor puede ser get o post.
El valor get se utiliza cuando no se van a producir cambios en ningún documento o
programa que no sea el navegador del usuario que pretende mandar el formulario,
como ocurre cuando se realizan consultas sobre una base de datos.
El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando
el usuario manda datos que deben ser almacenados en una base de datos.
Se recomienda utilizar el valor post.
Por ejemplo, podríamos insertar un formulario escribiendo el siguiente código:
<form action="mailto:[email protected]" method="post"
enctype="text/plain" >
...
</form>
A continuación veamos los distintos elementos que se pueden incluir en un
formulario.
Áreas de texto <textarea>
Las áreas de texto permiten a los usuarios insertar varias líneas de texto. Por ello,
suelen utilizarse para que incluyan comentarios.
Formando Emprendedores De Calidad Para Un Mundo Empresarial27
Instituto de Educación Superior
“San Ignacio de Monterrico”
Para insertar un área de texto es necesario incluir las etiquetas <textarea> y
</textarea> entre las etiquetas <form> y </form> del formulario.
Para que el área de texto tenga algún valor inicial, habrá que insertarlo entre las
etiquetas <textarea> y </textarea>.
El atributo name indica el nombre del área de texto. Es necesario dar nombres
diferentes a cada uno de los elementos de un formulario, para poder identificarlos a
la hora de procesarlos.
El atributo rows indica el número de líneas que podrán ser visualizadas en el área
de texto por lo que determina al alto del área de texto.
El atributo cols indica el número de caracteres por línea que podrán ser
visualizados en el área de texto por lo que determina al ancho del área de texto.
Gracias a las barras de desplazamiento, es posible insertar más líneas de las
especificadas en el atributo rows, y más caracteres por línea de los especificados
en el atributo cols.
Por ejemplo, para insertar el área de texto:
Escribe el texto que quieras
Habría que escribir:
<textarea name="ejemploarea" cols="30" rows="3">Escribe el texto que
quieras</textarea>
Elementos de entrada <input>
Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre
las etiquetas <form> y </form> del formulario.
El atributo name indica el nombre que se desea dar al elemento de entrada,
mediante el cual será evaluado, y el atributo type indica el tipo de elemento de
entrada.
Formando Emprendedores De Calidad Para Un Mundo Empresarial28
Instituto de Educación Superior
“San Ignacio de Monterrico”
Vamos a ver los diferentes tipos de elementos de entrada, y el resto de atributos
que pueden definirse para cada uno de ellos.
Campo de texto:
Para insertar un campo de texto, el atributo type debe tener el valor text.
El atributo size indica el número de caracteres que podrán ser visualizados en el
campo de texto, determina el ancho de la caja.
El atributo maxlenght indica el número de caracteres que podrán ser insertados en
el campo de texto.
El atributo value indica el valor inicial del campo de texto.
Por ejemplo, para insertar el campo de texto:
Habría que escribir:
<input name="campo"
maxlength="15">
type="text"
value="Campo
de
texto"
size="20"
Campo de contraseña:
Para insertar un campo de contraseña, el atributo type debe tener el valor
password.
El resto de atributos son los mismos que para un campo de texto normal. La única
diferencia es que todas las letras escritas en el campo de contraseña serán
visualizadas como asteriscos.
Por ejemplo, para insertar el campo de contraseña:
Habría que escribir:
<input
name="contra"
type="password"
value="contraseña"
size="20"
maxlength="15">
Botón:
Formando Emprendedores De Calidad Para Un Mundo Empresarial29
Instituto de Educación Superior
“San Ignacio de Monterrico”
Para insertar un botón, el atributo type debe tener el valor submit, restore o
button.
Si el valor es submit, al pulsar sobre el botón se enviará el formulario.
Si el valor es restore, al pulsar sobre el botón se restablecerá el formulario,
borrándose todos los campos del formulario que hayan sido modificados y
adquiriendo su valor inicial.
Si el valor es button, al pulsar sobre el botón no se realizará ninguna acción.
El atributo value indica el texto que mostrará el botón.
Por ejemplo, para insertar el botón:
Habría que escribir:
<input name="boton" type="submit" value="Enviar">
Casilla de verificación:
Para insertar una casilla de verificación, el atributo type debe tener el valor
checkbox.
El atributo value indica el valor asociado a la casilla de verificación. Es necesario
poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.
La aparición del atributo checked indica que la casilla aparecerá activada
inicialmente. Este atributo no toma valores.
Por ejemplo, para insertar la casilla:
Habría que escribir:
<input name="casilla" type="checkbox" value="acepto" checked>
Botón de opción:
Para insertar un botón de opción, el atributo type debe tener el valor radio.
Formando Emprendedores De Calidad Para Un Mundo Empresarial30
Instituto de Educación Superior
“San Ignacio de Monterrico”
El atributo value indica el valor asociado al botón de opción. Es necesario poner
este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.
La aparición del atributo checked indica que el botón aparecerá activado
inicialmente. Este atributo no toma valores.
Los botones de opción se utilizan cuando se desea que una variable del formulario
pueda tomar un solo valor de entre varios posibles. Para ello, se insertan varios
botones de opción con el mismo nombre (que indica la variable) y con distintos
valores. Sólamente uno de estos botones podrá estar activado, el que esté
activado cuando se envia el formulario, su valor será el que tendrá la variable.
Por ejemplo, para insertar los botones de opción:
Habría que escribir:
<input
name="prefiere"
type="radio"
value="estudiar"
checked>
<input name="prefiere" type="radio" value="trabajar">
Cuando se envíe el formulario, si el primer botón está activado la variable prefiere
será igual a estudiar, si es el segundo el activado, la variable prefiere valdrá
trabajar. Observa que lo que ponemos como valor no aparece escrito en la página
es un datos interno.
<input
name="prefiere"
type="radio"
value="estudiar"
checked>
<input name="prefiere" type="radio" value="trabajar">
Cuando se envíe el formulario, si el primer botón está activado la variable prefiere
será igual a estudiar, si es el segundo el activado, la variable prefiere valdrá
trabajar. Observa que lo que ponemos como valor no aparece escrito en la página
es un datos interno.
Formando Emprendedores De Calidad Para Un Mundo Empresarial31
Instituto de Educación Superior
“San Ignacio de Monterrico”
Existen otros tipos como el tipo hidden que sirve para definir un campo oculto,
campo que no ve el usuario, en este caso habría que incluir el atributo value para
que el formulario pase ese valor al programa que recoge los datos del formulario.
Para que el usuario envie un fichero suyo a través del formulario tenemos el tipo
file, este tipo hay que utilizarlo con mucho cuidado ya que si permitimos que
cualquier internauta nos envie cualquier tipo de fichero nos podríamos encontrar
con sorpresas no siempre agradables.
Campos de selección <select> ...
Los campos de selección se utilizan para insertar menús y listas desplegables.
Para insertar uno de estos menús o listas es necesario insertar las etiquetas
<select> y </select> en un formulario.
El atributo name indica el nombre del menú o lista será el nombre de la variable
que contendrá el valor seleccionado.
El atributo size indica el número de elementos de la lista que pueden ser
visualizados al mismo tiempo, determina el alto de la lista.
La aparición del atributo multiple indica que el usuario podrá seleccionar varios
elementos de la lista al mismo tiempo, ayudándose de la tecla Ctrl. Este atributo no
toma valores.
La aparición del atributo disabled indica que la lista estará desactivada, por lo que
el usuario no podrá seleccionar sus elementos. Este atributo tampoco toma
valores.
Cada uno de los elementos de la lista ha de insertarse entre las etiquetas <option>
y </option>.
El atributo value indica el valor a enviar si se selecciona el elemento. Si no se
especifica este atributo, se enviará el texto de la opción, que se encuentra entre las
etiquetas <option> y </option>.
Formando Emprendedores De Calidad Para Un Mundo Empresarial32
Instituto de Educación Superior
“San Ignacio de Monterrico”
La aparición del atributo selected indica que el elemento aparecerá seleccionado.
Este atributo no toma valores.
Por ejemplo, para insertar el menú:
Habría que escribir:
<select name="mascota">
<option selected>--- Elige animal ---</option>
<option>Perro</option>
<option>Gato</option>
</select>
Y para insertar la lista:
Habría que escribir:
<select name="animal" size="3" multiple>
<option selected>---Elige animales---</option>
<option value="ave">Loro</option>
<option>Perro</option>
<option>Gato</option>
<option>Pez</option>
</select>
Multimedia
Sonido de fondo <bgsound>
Añadir una música de fondo a una página tiene pros y contras, si el sonido es
apropiado al contenido de la página, puede hacerla más atractiva en contrapartida
la descarga del archivo de sonido supone una carga que puede ralentizar la
visualización de la página y además muchos usuarios suelen estar escuchando
otro tipo de música cuando navega en Internet, por lo que el escuchar también
sonido en cada página que visita puede resultar algo molesto.
Formando Emprendedores De Calidad Para Un Mundo Empresarial33
Instituto de Educación Superior
“San Ignacio de Monterrico”
Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en
algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también
pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho
espacio, y que no por ello sea de mala calidad.
El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se
utiliza para incluir sonido de fondo. Esta nueva etiqueta no necesita etiqueta de
cierre.
A través del atributo src hay que especificar la ruta y el nombre del archivo de
audio.
Con el atributo loop indicamos el número de veces que se tienen que reproducir el
sonido. Si se desea que el archivo de audio se reproduzca continuamente en un
bucle, habrá que asignarle el valor infinite o -1.
Por ejemplo, podríamos insertar un sonido de fondo escribiendo el siguiente
código:
<bgsound src="varios/audio.mid" loop="-1">
La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es
preferible que la situemos siempre en un sitio fácil de encontrar, por si deseamos
hacerle alguna modificación. Podríamos, por ejemplo, incluirla justo debajo de la
etiqueta <body>.
Vídeo y audio <embed>
En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que
tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo
tanto, precisan de mucho tiempo para descargarse.
Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el
MOV.
La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede
incluirse la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las
etiquetas <embed> y </embed> no hay que insertar nada.
Formando Emprendedores De Calidad Para Un Mundo Empresarial34
Instituto de Educación Superior
“San Ignacio de Monterrico”
A través del atributo src hay que especificar la ruta y el nombre del archivo de
vídeo.
Los videos insertados a través de esta etiqueta se reproducen automáticamente al
cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a
través de los atributos autostart y loop.
El atributo autostart indica si el archivo se reproducirá automáticamente al
cargarse la página, y puede tomar los valores true o false.
El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y
también puede tomar los valores true o false.
Los atributos width (anchura) y height (altura) sirven para especificar el tamaño de
la consola de control de vídeo. Estos atributos pueden tomar como valor un
número, que indica el tamaño en píxeles. Si no se especifican estos atributos, la
consola de control de vídeo se mostrará con el tamaño más adecuado al tamaño
del vídeo.
A la derecha tienes un ejemplo de un archivo de video, para el que se muestran los
controles de video. Puedes reproducirlo pulsando sobre los controles.
Para insertar el vídeo anterior, se podría escribir:
<embed src="varios/cotorra.avi" autostart="false" loop="true">
Existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que
no es posible utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se
utiliza la etiqueta <embed>, que funciona del mismo modo para los archivos de
audio y de vídeo.
No hay que olvidar que para los archivos de audio también se mostrarán los
controles de reproducción.
A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los
controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles.
Formando Emprendedores De Calidad Para Un Mundo Empresarial35
Instituto de Educación Superior
“San Ignacio de Monterrico”
Para insertar el archivo de audio anterior, se podría escribir:
<embed src="varios/audio.mid" autostart="false" loop="true">
Si no se desea que se muestren los controles de un archivo de audio, porque va a
ser utilizado como sonido de fondo, puede hacerse que los atributos width
(anchura) y height (altura) valgan cero.
También puede utilizarse el atributo hidden, con los valores true o false. Cuando
su valor estrue, se ocultan los controles de reproducción.
Por ejemplo, para insertar sonido de fondo se podría escribir:
<embed src="varios/audio.mid" autostart="true" loop="true" hidden="true" >
O también:
<embed
src="varios/audio.mid"
autostart="true"
loop="true"
width="0"
height="0" >
Películas Flash <object>
Las películas Flash son animaciones con la extensión SWF. Suelen incluirse en
las páginas iniciales de los sitios web, y se utilizan a modo de presentación hacia
los usuarios. También pueden utilizarse como botones de las barras de
navegación.
Estas películas pueden crearse mediante el programa Flash de Macromedia, y
necesitan que el usuario tenga instalado el plug-in para poder ser visualizadas.
La etiqueta <object> puede utilizarse para insertar diferentes objetos dentro de la
página, como pueden ser archivos de audio, archivos de vídeo, imágenes, etc.
El objetivo del uso de la etiqueta <object> es la de que no se produzcan
incompatibilidades por las distintas etiquetas soportadas por unos u otros
navegadores.
Formando Emprendedores De Calidad Para Un Mundo Empresarial36
Instituto de Educación Superior
“San Ignacio de Monterrico”
Las animaciones Flash se insertan del mismo modo que los archivos de audio y de
vídeo, a través de la etiqueta <embed>, pero debido a que tiene más posibilidades
de que se produzcan incompatibilidades entre los distintos navegadores, necesita
también de la etiqueta <object>
Como el uso de la etiqueta <object> puede resultar bastante complicado, vamos a
ver solamente un caso concreto para la inserción de un archivo SWF.
Por ejemplo, vamos a analizar el código que habría que escribir para insertar una
animación Flash.
El código a escribir sería el siguiente:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swfla
sh.cab#version=6,0,29,0" width="200" height="100">
<param name="movie" value="graficos/pelicula.swf">
<param name="quality" value="high">
<embed src="graficos/pelicula.swf" width="200" height="100" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"></embed>
</object>
En primer lugar vamos a analizar la etiqueta <embed>. En ella aparecen tres
atributos que no conocíamos.
A través del atributo quality se especifica la calidad con la que se reproducirá la
animación Flash. Puede valer high (alta), autolow (baja automática), o low (baja).
Si no se incluye este atributo, se considera que la calidad será automáticamente
alta.
A través del atributo pluginspage se especifica la página desde la que se podrá
descargar el plug-in necesario para reproducir la animación Flash, para que si
algún usuario no lo tiene aún instalado en su ordenador pueda descargarlo.
Formando Emprendedores De Calidad Para Un Mundo Empresarial37
Instituto de Educación Superior
“San Ignacio de Monterrico”
A través del atributo type se especifica el tipo de fichero, para que el navegador
pueda saber qué tipo de programa necesita ejecutar para reproducir la animación.
Ahora vamos a analizar la etiqueta <object>.
A través del atributo classid se identifica al objeto. Cuando el objeto es una
animación Flash, el atributo classid debe valer clsid:D27CDB6E-AE6D-11cf-96B8444553540000.
A través del atributo codebase se especifica la dirección en la que se encuentran
los componentes externos necesarios para reproducir la animación.
Los atributos width y height se utilizan del mismo modo, y deben tener el mismo
valor, que en la etiqueta <embed>.
Por último, vamos a analizar la etiqueta <param>. Esta etiqueta se utiliza para
especificar los valores necesarios para la inicialización de un objeto.
La etiqueta <param> no necesita etiqueta de cierre, y ha de contener los atributos
name y value. El atributo name indica el nombre de la característica que va a ser
definida, y value indica su valor.
Por ejemplo, para indicar la ruta del archivo, que en la etiqueta <embed> aparece
especificado por el atributo src, es necesario incluir también una etiqueta
<param>, en la que name tenga el valor movie.
Por eso aparece la línea <param name="movie" value="graficos/pelicula.swf">.
Para indicar la calidad de reproducción, que en la etiqueta <embed> aparece
especificado por el atributo quality, es necesario incluir también una etiqueta
<param>, en la que name tenga el valor quality.
Por eso aparece la línea <param name="quality" value="high">.
Las animaciones Flash se reproducen de forma automática al cargarse la página, y
su reproducción es continua.
Formando Emprendedores De Calidad Para Un Mundo Empresarial38
Instituto de Educación Superior
“San Ignacio de Monterrico”
Para hacer que una animación no se reproduzca automáticamente, habrá que
indicarlo mediante el atributo play, que debe incluirse dentro de la etiqueta
<embed>.
El atributo play puede valer true o false. Para que la animación no se reproduzca
automáticamente, el valor de play debe ser false.
También habrá que insertar la línea <param name="play" value="false">.
Lo mismo ocurre para hacer que la reproducción no sea continua. Habrá que
insertar el atributo loop en la etiqueta <embed>.
El atributo loop puede valer true o false. Para que la animación no se reproduzca
continuamente, el valor de loop debe ser false. De este modo, solo se reproducirá
una vez.
También habrá que insertar la línea <param name="loop" value="false">.
Capas
Vamos a ver algunas de las características básicas sobre las capas, para poder
insertarlas en nuestras páginas.
Capa <div>
Las capas no son más que unos recuadros, que pueden situarse en cualquier parte
de la página, en los que podemos insertar contenido HTML. Dichas capas pueden
ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño.
Podemos insertar una capa a través de las etiquetas <div> y </div>, que como ya
vimos, sirven para agrupar bloques de texto.
A través del atributo id se le da un nombre a la capa, y a través del atributo style
se establecen el resto de propiedades de la capa.
A través de las propiedades left (izquierda) y top (superior) se establece la
posición de la capa respecto a los márgenes izquierdo y superior de la página.
Pueden tomar un número como valor, acompañado de px cuando haga referencia
a píxeles, y acompañado de % cuando haga referencia a un porcentaje.
Formando Emprendedores De Calidad Para Un Mundo Empresarial39
Instituto de Educación Superior
“San Ignacio de Monterrico”
Para que la capa aparezca en la posición establecida, es necesario incluir también
la propiedad position con el valor absolute. Si no se estableciera este valor, la
capa se mostraría pegada al margen izquierdo, en la posición en la que hubiera
sido insertada dentro del código.
A través de las propiedades width (anchura) y height (altura) se establece el
tamaño de la capa. Pueden tomar un número como valor, acompañado de px
cuando haga referencia a píxeles, y acompañado de % cuando haga referencia a
un porcentaje.
A través de la propiedad z-index puede establecerse el índice de la capa dentro de
la página. Una capa podrá ser solapada por aquellas capas cuyo índice sea mayor.
Siempre es un valor numérico.
A través de la propiedad visibility puede establecerse la visibilidad de la capa.
Puede tomar los valores inherit (se muestra la capa mientras la capa a la que
pertenece también se esté mostrando), visible (muestra la capa, aunque la capa a
la que pertenece no se esté viendo) y hidden (la capa está oculta).
A través de las propiedades layer-background-image y background-image se
puede establecer una imagen de fondo para la capa. La ruta y el nombre de la
imagen han de aparecer entre paréntesis, después de la palabra url.
A través de las propiedades layer-background-color y background-color se
puede establecer un color de fondo para la capa. Ha de ser un número
hexadecimal.
A través de la propiedad overflow puede establecerse si se mostrará o no el
contenido de la capa cuando no pueda ser visualizado en su totalidad, por ser la
capa demasiado pequeña. Puede tomar los valores visible (se muestra todo el
contenido de la capa, aunque esto implique hacer que la capa sea más grande),
hidden (no es posible visualizar el contenido de la capa que no quepa en ella),
scroll (se muestra la barra de desplazamiento, aunque el contenido de la capa
pueda ser visualizado totalmente) y auto (se muestra la barra de desplazamiento
cuando sea necesario).
Formando Emprendedores De Calidad Para Un Mundo Empresarial40
Instituto de Educación Superior
“San Ignacio de Monterrico”
A través de la propiedad clip puede establecerse el área de la capa que podrá ser
visualizado. Lo que hace es recortar la capa, haciendo que partes de ella no sean
visibles. Ha de especificarse la distancia de los márgenes de la capa entre
paréntesis, después de la palabra url.
El primer valor ha de ser la distancia (se asume que está en píxeles) del margen
superior, hasta la que no se visualizará el contenido de la capa.
El segundo valor ha de ser la distancia del margen izquierdo, hasta la que no se
visualizará el contenido de la capa.
El tercer valor ha de ser la distancia del margen superior, hasta la que se
visualizará el contenido de la capa.
El cuarto valor ha de ser la distancia del margen izquierdo, hasta la que se
visualizará el contenido de la capa.
También es posible incluir auto como valor de alguna de estas distancias, lo que
indica que la distancia se corresponderá con los bordes de la capa.
Todas estas propiedades se especifican a través del atributo style, y deben
aparecer 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).Por ejemplo, podríamos insertar una capa
escribiendo el siguiente código:
<div id="capa" style="position:absolute; width:200px; height:115px; z-index:3;
visibility: visible; background-color: #0099CC; layer-background-color:
#0099CC; background-image: url(imagenes/fondocapa.gif); layer-backgroundimage: url(imagenes/fondocapa.gif); clip: rect(1 auto auto 3);">
Este texto está dentro de una capa.
</div>
Otra forma de insertar capas es utilizando las etiquetas <span> y </span>, en
lugar de las etiquetas <div> y </div>.
Formando Emprendedores De Calidad Para Un Mundo Empresarial41
Instituto de Educación Superior
“San Ignacio de Monterrico”
La etiqueta <span> se utiliza del mismo modo que la etiqueta <div>, y es
compatible con un mayor número de navegadores.
También existen las etiquetas <layer> y </layer>, pero solamente son reconocidas
por el navegador Netscape.
La principal diferencia de la etiqueta <layer>, en lo que se refiere a las otras dos,
es que las propiedades de la capa se especifican como atributos independientes, y
no como valores dentro del atributo style.
Por ejemplo, podríamos insertar una capa escribiendo el siguiente código:
<layer name="capa" width="200px" height="115px" z-index="3"
visibility="show" bgcolor="#0099CC" background="imagenes/fondocapa.gif">
Este texto está dentro de una capa.
</layer>
JavaScript
Lenguajes de script
Los lenguajes de script, también conocidos como lenguajes de macros, son
lenguajes que sólo funcionan en las aplicaciones para las que han sido creados.
Son lenguajes para ser interpretados, no para ser compilados, por lo que no
generan ningún archivo ejecutable.
Las aplicaciones se encargan de ejecutar los programas mientras van
interpretando el código, por lo que la ejecución puede resultar más lenta que en el
caso de estar ejecutando un archivo ejecutable.
Los lenguajes de script, al igual que el resto de lenguajes de programación,
disponen de variables, métodos y objetos predefinidos, pero un menor control
sobre los tipos de variables (enteros, cadenas de caracteres, etc.), por lo que es
posible asignar valores de distintos tipos a una misma variable, lo que puede
producir errores y dificultar la depuración de los programas.
Formando Emprendedores De Calidad Para Un Mundo Empresarial42
Instituto de Educación Superior
“San Ignacio de Monterrico”
Los lenguajes de script pretenden ser sencillos a la hora de programar. Al mismo
tiempo, lo normal es que los programas no sean muy extensos, ni tampoco muy
complicados.
Dos de los lenguajes de script más utilizados hoy en día son JavaScript y
VBScript.
El lenguaje VBScript fue creado por Microsoft, por lo que puede ser interpretado por
todas sus aplicaciones. Pero no es recomendable utilizar este lenguaje de script en
nuestras páginas, ya que solamente podría ser interpretado por el navegador
Internet Explorer, y hay muchos usuarios que utilizan navegadores diferentes.
Es más recomendable utilizar el lenguaje JavaScript, creado por Netscape, ya que
puede ser reconocido por un mayor número de navegadores.
La utilización de JavaScript permite variar dinámicamente el contenido del
documento, validar formularios, etc.
Por ejemplo, podemos crear funciones que permitan mostrar y ocultar capas.
Si utilizáramos un editor visual, como Dreamweaver, podríamos insertar algunos
comportamientos de este tipo sin la necesidad de escribir ni una sola línea de
código JavaScript. Esta aplicación permite insertar comportamientos a través de
menús y paneles, generando automáticamente el código JavaScript necesario.
JavaScript <script>
Para insertar funciones JavaScript en un documento, es necesario insertar las
etiquetas <script> y </script> dentro de la cabecera (entre las etiquetas <head> y
</head>) o dentro del cuerpo de la página.
A través del atributo language hay que especificar el lenguaje de script, que en este
caso será JavaScript.
Entre las etiquetas <script> y </script> habrá que insertar las funciones JavaScript.
Formando Emprendedores De Calidad Para Un Mundo Empresarial43
Instituto de Educación Superior
“San Ignacio de Monterrico”
Si un navegador no reconoce la etiqueta <script>, mostrará el código de las
funciones que ésta contenga. Para que esto no ocurra, las funciones se insertan
como comentarios, entre <!-- y //-->.
En las funciones no hay que insertar caracteres especiales, debido a un fallo de
Netscape corremos el riesgo de que al ejecutarse la función en un ordenador con un
juego de caracteres distinto se produzcan fallos.
Por ejemplo, podríamos insertar el siguiente código:
<script>
<!-function Muestramensaje()
{
alert("Esto es un mensaje, activado por una función javascript");
}
//-->
</script>
La función que hemos insertado es una función muy sencilla, que muestra un
mensaje de alerta.
Si dentro del documento insertáramos el siguiente código:
<img src="imagenes/logo_animales.gif" onClick="Muestramensaje">
Obtendríamos una imagen como la que aparece a continuación, que al ser pulsada
llama a la función.
A través del atributo onClick hemos definido la función que será llamada al pulsarse
obre el objeto.
Formando Emprendedores De Calidad Para Un Mundo Empresarial44
Instituto de Educación Superior
“San Ignacio de Monterrico”
Podemos utilizar muchos otros atributos para llamar a funciones, onDblClick (al
hacer doble clic), onMouseOver (mientras el cursor este encima) o onMouseOut
(cuando el cursor deje de estar encima).onMouseOut (cuando el cursor deje de
estar encima).
Hojas de estilo
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 ejemplo a la etiqueta <a> (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.
Formando Emprendedores De Calidad Para Un Mundo Empresarial45
Instituto de Educación Superior
“San Ignacio de Monterrico”
Para vincular una hoja de estilo a un documento es necesario insertar la etiqueta
<link> en el documento, entre las etiquetas <head> y </head>. 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.
<link href="misestilos.txt" rel="stylesheet" type="text/css" >
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).
Formando Emprendedores De Calidad Para Un Mundo Empresarial46
Instituto de Educación Superior
“San Ignacio de Monterrico”
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 <body>.
En cambio, no existe ninguna etiqueta <mitexto>, 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:
<p>texto con estilo</p>
Habría que escribir:
<p class="mitexto">texto con estilo</p>
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 <span> (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:
<p>texto con <span class="mitexto">estilo</span></p>
Las propiedades
Vamos a ver algunas propiedades que pueden especificarse en los estilos, así
como los valores que pueden tomar.
Familia de la fuente:
Formando Emprendedores De Calidad Para Un Mundo Empresarial47
Instituto de Educación Superior
“San Ignacio de Monterrico”
La propiedad es font-family.
Puede tomar como valor varios nombres de fuentes, separados por comas, como
pueden ser arial, helvetica, etc. La ventana de definir una familia de fuentes es
que si el ordenador del visitante no tiene instalada la primera fuente, entonces se
aplicará la segunda, así sucesivamente hasta encontrar una de las fuentes.
Grosor del texto:
La propiedad es font-weight.
Sus valores pueden ser: bold (negrita), bolder (mas negrita), lighter (ligera) o
un número del 100 al 900.
Tamaño de la fuente:
La propiedad es font-size.
Puede tomar como valor un número.
Espacio entre líneas:
La propiedad es line-height.
Puede tomar como valor un número.
Espacio entre caracteres:
La propiedad es letter-spacing.
Puede tomar como valor un número.
Estilo de la fuente:
La propiedad es font-style.
Puede tomar como valor italic, cuando se desee que el texto aparezca en cursiva.
Decoración de la fuente:
Formando Emprendedores De Calidad Para Un Mundo Empresarial48
Instituto de Educación Superior
“San Ignacio de Monterrico”
La propiedad es text-decoration.
Puede tomar como valor none (ninguno), underline (subrayado), line-through
(una línea encima), overline (tachado) o blink (parpadeo).
Si se aplica none a los hiperenlaces, puede evitarse que aparezcan subrayados.
Transformar el texto:
La propiedad es text-transform.
Puede tomar como valor capitalize (la inicial de cada palabra aparecerá en
mayúsculas), uppercase (todo en mayúsculas) o lowercase (todo en minúsculas).
Alineación del texto:
La propiedad es text-align.
Puede tomar como valor center (centrado), left (izquierda), right (derecha) o
justify (justificado).
Sangrado del texto:
La propiedad es text-indent.
Puede tomar como valor un número.
Color:
La propiedad es color.
Puede tomar como valor un número en hexadecimal.
Si se aplica esta propiedad a los hiperenlaces, serán de este color, en lugar de los
indicados por los atributos link (vínculo), vlink (vínculo activo), y alink (vínculo
visitado) de la etiqueta <body>.
Color de fondo:
Formando Emprendedores De Calidad Para Un Mundo Empresarial49
Instituto de Educación Superior
“San Ignacio de Monterrico”
La propiedad es background-color.
Puede tomar como valor un número en hexadecimal.
Imagen de fondo:
La propiedad es background-image.
La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la
palabra url.
Márgenes:
Las propiedades son margin-top (margen superior), margin-right (margen
derecho), margin-bottom (margen inferior), margin-left (margen izquierdo), o
margin (los valores de los márgenes superior, derecho, inferior e izquierdo,
separados por espacios).
Pueden tomar como valor un número (cuatro números separados por espacios en el
caso de margin).
Ancho de bordes:
La propiedad es border-width.
Puede tomar como valor un número.
Color del borde:
La propiedad es border-color.
Puede tomar como valor un número en hexadecimal.
No hay que olvidar, en el caso de los valores numéricos, especificar la unidad de
medida a utilizar: cm (centímetros), pt (puntos), px (píxeles), o % (porcentaje).
Existen muchas otras propiedades además de éstas. En el tema de capas puedes
consultar las propiedades que se pueden definir sobre ellas en las hojas de estilo (zindex, visibility, etc.).
Páginas web dinámicas
Formando Emprendedores De Calidad Para Un Mundo Empresarial50
Instituto de Educación Superior
“San Ignacio de Monterrico”
HTML dinámico
Una página dinámica es una página que permite al usuario interactuar con ella, y
que contiene efectos especiales.
Para crear una página de este tipo no basta con programar en HTML, ya que este
lenguaje es muy limitado. Es necesario combinar HTML con otros lenguajes, como
JavaScript, VBScript, Java, ASP, PHP, etc.
También puede hacerse uso de capas, de animaciones Flash, de applets java y de
hojas de estilo CSS.
A la combinación de estos elementos se le conoce como DHTML (HTML dinámico).
Existe una anécdota muy curiosa sobre DHTML :
Una conocida marca, poseedora de un programa que permite "dar vida" a las
páginas web, pidió explicaciones a un webmaster tras visitar su página web.
Pensaron que el webmaster estaba utilizando su programa y habían comprobado
que no figuraba como comprador en sus archivos.
El webmaster respondió que no estaba utilizando el programa en cuestión, sino
HTML dinámico, por lo que la empresa tuvo que disculparse por la acusación.
Esto demuestra lo que se puede llegar a hacer con HTML dinámico.
Programación web
En el tema anterior hablamos de JavaScript y VBScript, dos lenguajes de
programación web.
Estos lenguajes son interpretados y ejecutados directamente por el navegador del
usuario que visualiza la página, pero existen otros lenguajes que son interpretados
por el servidor, como es el caso de ASP, PHP o JSP (Java).
Cuando un usuario pretende visualizar una página, el servidor ejecuta los scripts y
genera otra página como resultado. Esta nueva página sólamente contiene HTML, y
es la que visualiza el navegador del usuario.
Formando Emprendedores De Calidad Para Un Mundo Empresarial51
Instituto de Educación Superior
“San Ignacio de Monterrico”
Esto evita que se puedan producir errores al interpretar el código, como ocurre con
VBScript si intenta ser interpretado por un navegador que no sea Internet Explorer.
Otras ventajas que proporciona programar con lenguajes interpretados por el
servidor, es que los usuarios no tienen acceso al código original, por lo que los
programas estarán protegidos ante plagios.
Al mismo tiempo, se puede acceder a mayor número de recursos almacenados en
el servidor, como pueden ser bases de datos.
Los lenguajes de este tipo más utilizados hoy en día son ASP y PHP.
El lenguaje ASP (Active Server Pages), al igual que VBScript, fue creado por
Microsoft. Consiste en incluir instrucciones Visual Basic Script o Jscript dentro del
documento HTML.
Actualmente se ha presentado, con algunas diferencias en la sintaxis, una nueva
versión llamada ASP.NET, que ofrece bastantes mejoras en lo que se refiere a
posibilidades y rapidez de ejecución.
ASP tiene un gran inconveniente, ya que precisa que el servidor funcione sobre
Windows NT o 2000.
El lenguaje PHP (Hipertext Preprocesor) permite realizar muchos tipos de
aplicaciones web gracias su gran librería de funciones y documentación. Ofrece
muchas ventajas frente a ASP, entre ellas, que es más rápido, que es más seguro,
y que es gratuito
XML
El lenguaje HTML ha ido evolucionando rápidamente, gracias, entre otras cosas, a
su sencillez. Pero este lenguaje es bastante rígido, y no nos permite hacer en
nuestras páginas todo lo que nos gustaría, al no existir las etiquetas necesarias
para ello.
Formando Emprendedores De Calidad Para Un Mundo Empresarial52
Instituto de Educación Superior
“San Ignacio de Monterrico”
El comité W3C comenzó a desarrollar nuevas versiones de HTML para permitir
nuevas posibilidades a la hora de programar, y creó el lenguaje XML (Extensible
Markup Language).
Aunque los navegadores aún no soportan toda la potencia de XML, cada vez está
siendo más utilizado, ya que aporta muchas ventajas.
XML es un lenguaje comprensible para las personas. Los documentos escritos en
este lenguaje pueden leerse, crearse y modificarse de forma sencilla, utilizando
cualquier editor de texto.
Es capaz de expresar estructuras complejas de datos. Incluso estructuras de datos
tan complicadas como gráficos pueden representarse en forma de árbol.
Con XML lo que se pretende es etiquetar e identificar el contenido de las páginas,
y no pensar directamente en cómo se mostrarán los datos. Puede utilizarse para
definir muchas más características referentes al contenido de los documentos de
las que permite la etiqueta <meta> de HTML, y estos datos resultan muy útiles
para realizar búsquedas o filtrar información.
XML también ofrece la posibilidad de gestionar cualquier conjunto de caracteres
internacional. Esta es una característica muy útil, ya que permite incluir cualquier
carácter que se esté utilizando hoy en día, como pueden ser caracteres en chino o
en árabe, lo que facilita el comercio internacional a través de Internet.
En realidad, XML y HTML son lenguajes distintos, basados en el SGML (Standard
Generalized Markup Language).
SGML es el estándar internacional para la definición de la estructura y el contenido
de diferentes tipos de documentos electrónicos.
Mediante una DTD (Definición de Tipo de Documento), el SGML define la
estructura y el contenido de cada tipo de documento. Por ejemplo, existe una DTD
que define cómo han de ser los documentos HTML.
Formando Emprendedores De Calidad Para Un Mundo Empresarial53
Instituto de Educación Superior
“San Ignacio de Monterrico”
Pero no existe ninguna DTD que defina la estructura y el contenido de un
documento XML.
En realidad, XML es una versión resumida del SGML, que descarta aquellas
partes del SGML que raramente se utilizan. Por ello, XML es más sencillo que
SGML, y permite definir nuestros propios tipos de documentos, con nuestras
propias etiquetas.
Por ejemplo, para insertar esto en una página web:
NO DOUBT Tragic Kingdom
Publicado en España en 1995
A la venta por solo 16 € (con un descuento del 10% de su precio original)
Puedes consultar el título de las canciones que incluye
En HTML habría que escribir:
<font color="#006699" size="4"><b>NO DOUBT </b></font>
<b><a href="tragickingdom.htm"><font size="2">Tragic
Kingdom</font></a></b>
<br>
<em><font color="#CC3366" size="2"><b>Publicado en España en
1995</b></font></em>
<blockquote>
<font size="2"><b>A la venta por solo 16 € (con un descuento del 10%
de su precio original)</b></font>
</blockquote>
<font size="2"><a href="tragickingdom.htm"><b>Puedes consultar el
título de las canciones que incluye</b></a></font>
Mientras que en XML podríamos escribir:
<?xml version="1.0"?>
<cdaudio>
<grupo>No Doubt</grupo>
<titulo>Tragic Kingdom</titulo>
<publicacion>1995</publicacion>
<precio cantidad="16" moneda="euro"/>
Formando Emprendedores De Calidad Para Un Mundo Empresarial54
Instituto de Educación Superior
“San Ignacio de Monterrico”
<descuento porcentaje="20"/>
<enlacecanciones href="tragickingdom.htm"/>
</cdaudio>
A simple vista, es más sencilla la programación con XML. Cualquier programa
podrá trabajar de forma más eficiente con XML.
Formando Emprendedores De Calidad Para Un Mundo Empresarial55
Instituto de Educación Superior
“San Ignacio de Monterrico”
ADOBE DREAMWEAVER CS3
Dreamweaver CS3 es un software fácil de usar que permite crear páginas web
profesionales.
Las funciones de edición visual de Dreamweaver CS3 permiten agregar rápidamente
diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el
código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos
JavaScript, etc., de una forma muy sencilla y visual.
Además incluye un software de cliente FTP completo, permitiendo entre otras cosas
trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor
sin salir del programa.
Novedades de Dreamweaver CS3
En este punto comentaremos las características que aporta esta nueva versión
sobre la anterior.
•
Mejoras en Spry. El "Framework" o estructura Spry ha recibido un fuerte
impulso en esta versión de Dreamweaver. Spry es un conjunto de archivos
JavaScript que permiten la inclusión de elementos dinámicos en las páginas
HTML. Por ejemplo se pueden incluir acordeones, barras de menus,
validación de formularios, acceso a datos XML, etc.
•
También se han incluido efectos spry que se aplican a elementos ya
existentes en la página HTML para hacer que se desvanezcan, reduzcan su
tamaño, se resalten, etc.
•
Mayor integración con Photoshop y Fireworks. Ahora es posible pegar
directamente imágenes desde Photoshop en una página HTML de
Dreamweaver. Luego con un doble clic podremos ir a editar la imagen en
Photoshop. Se pueden importar imágenes con capas.
Formando Emprendedores De Calidad Para Un Mundo Empresarial56
Instituto de Educación Superior
“San Ignacio de Monterrico”
•
Mejoras en la comprobación de la compatibilidad con diferentes navegadores.
Dreamweaver CS3 puede generar informes con los problemas de
visualización de elementos CSS en los navegadores más utilizados.
•
Adobe CSS Advisor es un sitio web accesible desde Dreamweaver que
contiene información útil para resolver los problemas de compatibilidad entre
navegadores.
•
Mejoras en CSS. La administración de CSS es más fácil, ahora se pueden
trasladar elementos CSS entre diferentes hojas de estilo. También ha
aumentado la cantidad de plantillas CSS disponibles para aplicar a nuestras
páginas web.
•
Adobe Device Central, incluido en la Adobe Creative Suite, facilita la
publicación en dispositivos móviles, PDAs, etc..
Editar páginas web
Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario
crear los documentos con la extensión HTML o HTM, e incluir como contenido del
documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas para
hacerlo.
Pero crear páginas web mediante el código HTML es más costoso que hacerlo
utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar
cada uno de los elementos de la página, al mismo tiempo que es más complicado
crear una apariencia profesional para la página.
Hoy en día existe una amplia gama de editores de páginas web. Uno de los más
utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye,
es Adobe Dreamweaver.
Además de Dreamweaver, existen otra serie de buenos editores de páginas web,
como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects
Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia,
algunos de los cuales tienen la ventaja de ser gratuitos.
Formando Emprendedores De Calidad Para Un Mundo Empresarial57
Instituto de Educación Superior
“San Ignacio de Monterrico”
Primeros pasos con Dreamweaver
Lo primero que tienes que hacer es abrir Dreamweaver. Abres un documento nuevo
y seleccionas la Categoría: Página básica  HTML.
El entorno de trabajo
Vamos a ver cuáles son los elementos básicos de Dreamweaver CS3, la pantalla,
las barras, los paneles, etc., para saber diferenciar entre cada uno de ellos.
Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos
cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando.
Cuando conozcamos todo esto estaremos en disposición de empezar a crear
páginas web.
Formando Emprendedores De Calidad Para Un Mundo Empresarial58
Instituto de Educación Superior
“San Ignacio de Monterrico”
Las barras
•
La barra de título
La barra de título contiene el nombre del programa (Adobe Dreamweaver CS3) y
seguidamente el nombre del documento que aparecerá en el explorador y entre
paréntesis, su ubicación y el nombre del archivo en formato html. En el extremo de
la derecha están los botones para minimizar, maximizar/restaurar y cerrar.
•
La barra de menús
La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menús
desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones
relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver.
Muchas de las operaciones se pueden hacer a partir de estos menús, pero para
algunas es preferible o indispensable hacerlas desde los paneles.
Formando Emprendedores De Calidad Para Un Mundo Empresarial59
Instituto de Educación Superior
“San Ignacio de Monterrico”
•
La barra de herramientas estándar
La barra de herramientas estándar contiene iconos para ejecutar de forma
inmediata algunas de las operaciones más habituales, como Abrir
, Guardar
, etc.
•
La barra de herramientas de documento
La barra de herramientas de documento contiene iconos para ejecutar de forma
inmediata algunas otras operaciones habituales que no incluye la barra de
herramientas estándar. Estas operaciones son las de cambio de vista del
documento, vista previa, etc.
•
La barra de estado
La barra de estado nos indica en cada momento en qué etiqueta HTML nos
encontramos (en la imagen al encontrarnos en un documento en blanco estamos
directamente sobre la etiqueta <body>).
También nos es posible alternar entre los modos de selección, mano (para arrastrar
la página), o zoom. En cualquier momento puedes seleccionar el zoom preferido
desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto
siempre viene al 100%).
Los paneles e inspectores
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que
se conocen como paneles o inspectores. La diferencia entre panel e inspector es
que, en general, la apariencia y opciones de un inspector cambian dependiendo del
objeto seleccionado.
Formando Emprendedores De Calidad Para Un Mundo Empresarial60
Instituto de Educación Superior
“San Ignacio de Monterrico”
A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar
cada uno de los paneles o inspectores. Vamos a ver los más importantes.
•
El inspector de Propiedades
El inspector de Propiedades muestra y permite modificar las propiedades del
elemento seleccionado que son usadas de forma más frecuente. Por ejemplo,
cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación,
si está en negrita o cursiva, etc.
Pulsando sobre el botón se despliega para mostrar más opciones. Este botón se
encuentra en la esquina inferior-derecha.
Seguramente será la herramienta de Dreamweaver que más vayas a utilizar.
•
La barra de herramientas Insertar o panel de objetos
La barra de herramientas Insertar o panel de objetos permite insertar elementos
en un documento sin la necesidad de recurrir al menú Insertar. Los elementos están
clasificados según su categoría: tablas, texto, objetos de formulario, etc.
Formando Emprendedores De Calidad Para Un Mundo Empresarial61
Instituto de Educación Superior
“San Ignacio de Monterrico”
Es posible configurar este panel para que en los botones se muestren los iconos de
los objetos (como ocurre en la imagen anterior), para que se muestren los nombres
de los objetos, o para que se muestren ambos a la vez.
Vistas de un documento
Puedes cambiar la vista del documento a través de la barra de herramientas de
documento
•
La vista Diseño
permite trabajar con el editor visual. Es la vista
predeterminada de Dreamweaver y la que se suele utilizar habitualmente.
•
La vista Código
se utiliza para poder trabajar en un entorno
totalmente de programación, de código fuente. No permite tener directamente
una referencia visual de cómo va quedando el documento según se va
modificando el código.
•
La vista Código y Diseño
permite dividir la ventana en dos zonas.
La zona superior muestra el código fuente, y la inferior el editor visual.
Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica
directamente sobre la otra.
Configuración de un sitio local
Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un
diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web
antes de crear las páginas que va a contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local.
Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que
para contener las imágenes, las animaciones, las hojas de estilo, etc., se deben
crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor
organización de los archivos a la hora de trabajar. Esto es lo que se conoce como
sitio local.
Después se podrán copiar los archivos en un servidor web, en el denominado sitio
remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en
Internet.
Formando Emprendedores De Calidad Para Un Mundo Empresarial62
Instituto de Educación Superior
“San Ignacio de Monterrico”
La organización de los archivos en un sitio permite administrar y compartir archivos,
mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en
el servidor, etc.
Es conveniente que la página inicial del sitio tenga el nombre index.htm o index.html,
ya que los navegadores buscan una página con ese nombre cuando se intenta
acceder a una URL genérica.
Por ejemplo, si escribiéramos la dirección genérica http://www.gruposidem.com
en
el
navegador,
éste
intentaría
cargar
la
página
http://www.gruposidem.com/index.htm, por lo que se produciría un error en el
caso de que no existiera ninguna página con el nombre index.htm.
Crear o editar un sitio web sin conexión a
Internet
Una vez creadas las carpetas que formarán un sitio
local, ya es posible definir el sitio en Dreamweaver.
Para ello hay que dirigirse al menú Sitio, a la opción
Administrar sitios....
Recuerda que a través del panel Archivos,
pestaña Archivos, se puede acceder a cada
uno de los sitios creados y a la opción
Administrar sitio.
En el caso de haber seleccionado la opción
Administrar sitios, aparece una ventana que
contiene la lista de sitios locales definidos con
anterioridad.
Por supuesto, pueden existir varios sitios locales en un mismo ordenador.
Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se
mostrará la misma ventana en la que definir las características del sitio.
Formando Emprendedores De Calidad Para Un Mundo Empresarial63
Instituto de Educación Superior
“San Ignacio de Monterrico”
Las características del sitio se agrupan en diferentes categorías que aparecen en la
parte izquierda.
Para visualizar las características de una categoría basta con seleccionarla de la
lista haciendo clic en ella.
Vamos a ver los datos que hay que editar para la categoría Datos locales.
Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se
encuentra el sitio dentro del disco duro local.
Después, si se desea, a través de la categoría Mapa de diseño del sitio puede
definirse la página principal del sitio, de la que colgarán el resto de documentos
HTML dentro del sitio, si en la carpeta raíz del sitio existe una página con el nombre
index.htm, Dreamweaver la cogerá por defecto.
Estas tres características son las imprescindibles para definir un sitio local.
Las demás opciones en este momento no nos interesan, ya que estamos definiendo
el sitio local, y no es necesario establecer los datos del servidor en el que estará el
sitio remoto.
Formando Emprendedores De Calidad Para Un Mundo Empresarial64
Instituto de Educación Superior
“San Ignacio de Monterrico”
Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.
Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que
seleccionar la pestaña Básicas, en vez de la pestaña Avanzadas.
Propiedades del documento
Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan
un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc.
Puede definirse el formato de cada una de las páginas a través del cuadro de
diálogo Propiedades de la página.
Este cuadro se puede abrir de tres modos diferentes:
•
Pulsar la combinación de teclas ctrl.+J.
•
Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la
página.
•
Hacer clic con el botón derecho del ratón sobre el fondo de la página.
Aparecerá al final del menú contextual la opción Propiedades de la página. Se
abrirá el cuadro de diálogo siguiente
Las propiedades están organizadas en categorías.
Formando Emprendedores De Calidad Para Un Mundo Empresarial65
Instituto de Educación Superior
“San Ignacio de Monterrico”
•
En la categoría Aspecto, como ves en la imagen anterior, encontramos las
propiedades:
o
Imagen de fondo: permite especificar una imagen de fondo para el
documento. Dicha imagen se muestra en mosaico. Es importante al elegir una
imagen de fondo tener en cuenta que según los colores de la imagen será necesario
establecer unos u otros colores para el texto, así como que no es conveniente tener
un gif animado como fondo.
o
Color de fondo: permite especificar un color de fondo para el
documento, pero dicho color solo se mostrará en el caso de no haber establecido
ninguna imagen de fondo.
o
Tamaño: permite definir el tamaño de la letra.
o
Color del texto: es el color de la fuente.
o
Márgenes: permiten establecer márgenes en el documento. Los
márgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer,
mientras que el ancho y el alto de márgen solo funcionan para Netscape Navigator.
Ninguno de estos márgenes aparece en la ventana de documento de Dreamweaver,
solo se mostrarán en los navegadores.
•
o
En la categoría Título/Codificación encontramos la propiedad:
Título: es el título del documento, que aparecerá en la barra de título
del navegador y de la ventana de documento de Dreamweaver.
•
o
En la categoría Vínculos encontramos las propiedades:
Color de vínculo: es el color de los vínculos, que ayuda al usuario a
distinguir entre el texto normal y los vínculos que sirven de enlace a otras páginas.
o
Vínculos visitados: es el color de los vínculos visitados, que permite
distinguir al usuario si unos vínculos ya han sido visitados o no.
o
Vínculos activos: es el color de los vínculos activos.
Formando Emprendedores De Calidad Para Un Mundo Empresarial66
Instituto de Educación Superior
“San Ignacio de Monterrico”
Estilo subrayado: por defecto, cuando tenemos un texto con un
o
vínculo asociado, el texto aparece subrayado, con esta opción podemos elegir otro
tipo de estilo por ejemplo para que no aparezca subrayado.
•
En la categoría Imagen de rastreo encontramos las propiedades:
Imagen de rastreo: permite establecer una imagen como fondo del
o
documento, pero que sólo se mostrará en la ventana de documento de
Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla
gráfica sobre la que crear el documento.
Transparencia: permite establecer la opacidad de la imagen de
o
rastreo.
Hay que tener cuidado de no crear páginas que tarden mucho tiempo en cargarse
en el navegador.
Los colores
Para asignar colores es posible desplegar una paleta
de colores como ésta. Al seleccionar un color de
estas paletas, se muestra el valor hexadecimal del
color en la parte superior.
Las paletas de colores de Dreamweaver utilizan la
paleta de 216 colores seguros para web. Éstos son
los colores que se muestran de la misma forma en Microsoft Internet Explorer y en
Netscape Navigator, tanto en Windows como en Macintosh.
También es posible personalizar los colores a través del botón
de la parte superior
de la paleta.
Los colores pueden asignarse a través de los botones:
. Estos botones
suelen aparecer en el inspector de propiedades de muchos objetos, y también en
algunas ventanas que permiten especificar propiedades (sobre todo propiedades de
texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la página,
que tienes más arriba.
Formando Emprendedores De Calidad Para Un Mundo Empresarial67
Instituto de Educación Superior
“San Ignacio de Monterrico”
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro
gris
, lo que hace que se despliegue la paleta de colores. El otro modo es
introduciendo directamente el número hexadecimal del color en el recuadro blanco.
Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el
color azul con valor #3399FF, el botón quedaría del siguiente modo:
El texto (Características del texto)
Las características del texto seleccionado pueden ser definidas a través del menú
Texto, y a través del inspector de propiedades. Vamos a ver las posibilidades que se
nos ofrecen a través del inspector de propiedades, aunque sean menos que las que
se nos ofrecen a través del menú Texto.
•
Formato:
Permite seleccionar un formato de párrafo
ya definido para HTML, que puede ser encabezado, párrafo o preformateado. Los
encabezados se utilizan para establecer títulos dentro de un documento. El formato
preformateado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo,
si entre dos palabras se introducen varios espacios solo se considera uno, pero al
establecer el formato preformateado se respetará que hayan varios espacios en
lugar de solo uno.
•
Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de
fuentes en lugar de una sola, ya que es
posible que al establecer una única fuente
el usuario no la tenga en su ordenador. El
seleccionar
un
conjunto
de
fuentes
posibilita que en el caso de que el usuario
no tenga una fuente se aplique otra del
conjunto. Por ejemplo, si seleccionamos
Formando Emprendedores De Calidad Para Un Mundo Empresarial68
Instituto de Educación Superior
“San Ignacio de Monterrico”
Arial, Helvetica, Sans-serif, el texto se verá con la fuente Arial, pero si esta no
existe se verá en Helvetica.
•
Tamaño:
Permite cambiar el tamaño del texto. El
tamaño lo podemos indicar en diversas unidades, en píxeles, centímetros, etc...
•
Color:
Permite seleccionar el color de la fuente, ignorando el
color que se haya definido en las propiedades de la página. Si no se ha establecido
ningún color en las propiedades de la página ni aquí, el color del texto por defecto
será el negro.
•
Estilo:
Estos botones permiten establecer si el texto aparecerá en
negrita o en cursiva. A través del menú Texto también se puede, entre otras cosas,
subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de
normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el
subrayar texto normal podría hacer que el usuario pensara que se trata de un
vínculo.
•
Alinear:
A través de estos botones es posible establecer la
alineación del texto de una de estas cuatro formas distintas: izquierda, centrada,
derecha y justificada.
•
Lista:
Estos botones permiten crear listas con viñetas o listas
numeradas.
•
Sangria:
Estos dos botones permiten sangrar el texto y anular la
sangría. La sangría es una especie de márgen que se establece a ambos lados del
texto. En este caso caso los botones se refieren a sangría a la izquierda del texto.
Hiperenlaces
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser
pulsado lleva de una página o archivo a otra página o archivo.
Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.
Tipos de enlaces
Formando Emprendedores De Calidad Para Un Mundo Empresarial69
Instituto de Educación Superior
“San Ignacio de Monterrico”
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.
Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa
del archivo.
La
ubicación
es
en
Internet,
por
ejemplo,
http://www.sidem.edu.pe
o
http://www.misitio.com/pagina/pagina1.html.
Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el documento actual,
pero partiendo del directorio en el que se encuentra el documento actual.
Si queremos referinos a carpetas que están por encima del nivel donde nos
encontramos deberemos utilizar ../
Por
ejemplo,
imagina
que
estamos
en
la
http://www.misitio.com/pagina/informacion/index.html.
queremos
mostrar
una
imagen
que
se
siguiente
En
encuentra
http://www.misitio.com/pagina/secciones/seccion1.html,
dirección
esta
página
la
carpeta
en
¿cómo
podemos
hacerlo? Fácil. Deberemos llamarla haciendo referencia al nivel superior
(http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.
El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.
De esta forma, mientras nos encontramos en la carpeta informacion, subimos un
nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo
seccion1.html.
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual.
En este método los enlaces se crean indicando la ruta a partir de la raíz del sitio.
En
el
ejemplo
anterior
http://www.misitio.com/,
si
un
tuviesemos
enlace
en
definido
como
cualquier
sitio
página
la
del
carpeta
sitio
a
Formando Emprendedores De Calidad Para Un Mundo Empresarial70
Instituto de Educación Superior
“San Ignacio de Monterrico”
http://www.misitio.com/pagina/secciones/seccion1.html
se
crearía
como
/pagina/secciones/seccion1.html.
Como puedes ver ahora el vínculo a un archivo en todas las páginas es igual
porque se define dependiendo del sitio raíz y no de la ubicación donde se
encuentra.
Puntos de fijación:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro
diferente.
Para ello el vínvulo debe ser
nombre_de_documento.extension#nombre_de_punto.
El punto se define dentro de un documento a través del menú Insertar, opción
Anclaje con nombre.
Podríamos referenciar de este modo a un anclaje llamado parte2 de la siguiente
forma: ../secciones/seccion1.html#parte2
Estos tipos de enlace que hemos visto son válidos tanto para referenciar páginas
(para crear hiperenlaces) o incluso imágenes u otro tipo de objetos (como veremos
en temas posteriores).
Deberás tener siempre en cuenta que los nombres de las rutas se
correspondan perfectamente a los nombres de los archivos y carpetas en el
servidor (local o remoto).
Por ello, es muy recomendable que utilices siempre minúsculas para evitar fallos
en los enlaces.
También deberás evitar utilizar caracteres especiales como acentos o
espacios, así no tendrás problemas a la hora de referenciar tus objetos.
Crear enlaces
Formando Emprendedores De Calidad Para Un Mundo Empresarial71
Instituto de Educación Superior
“San Ignacio de Monterrico”
La forma más sencilla de crear un enlace es a través del inspector de
propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir
de enlace, y seguidamente establecer el Vínculo en el inspector.
Por ejemplo, aquí hay un enlace a www.sidem.edu.pe, que es de referencia
absoluta, por eso contiene HTTP://
Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan
comportamientos, etc. Para ello es necesario escribir en Vínculo únicamente una
almohadilla #.
Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.
Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos que
explicaremos a continuación y el enlace se colocará en el lugar en el que estaba
situado el cursor.
Texto: es el texto que mostrará el enlace
Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace
externo deberás escribirla empezando siempre por HTTP://. Haz clic sobre el icono
Formando Emprendedores De Calidad Para Un Mundo Empresarial72
Instituto de Educación Superior
“San Ignacio de Monterrico”
de carpeta para buscar los archivos que existan dentro del sitio. Por defecto
dreamweaver te creará un enlace relativo al documento.
Destino: la página donde se abrirá la página, este campo se explica en el siguiente
apartado.
Título: se trata de la ayuda contextual del vínculo, es equivalente al atributo ALT
de las imágenes.
Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el
acceso al enlace mediante la pulsación de la tecla Alt más la tecla de acceso
indicada.
Índice de tabulador : Como habrás podido observar puedes saltar a través de los
enlaces pulsando la tecla Tabulador. En este campo podrás establecer un índice
indicando la prioridad del enlace y así configurar el modo en el que actuará el
Tabulador es sus diferentes saltos.
Destino del enlace
El destino del enlace determina en qué ventana va a ser abierta la página
vinculada, puede variar dependiendo de los marcos de que disponga el documento
actual.
Puede especificarse en el inspector de propiedades a través de Dest, o en la
ventana que aparece a través del menú Insertar, opción Hipervínculo.
_blank: Abre el documento vinculado en una ventana nueva del navegador.
_parent: Abre el documento vinculado en la ventana del marco que contiene el
vínculo o en el conjunto de marcos padre.
_self: Es la opción predeterminada. Abre el documento vinculado en el mismo
marco o ventana que el vínculo.
_top: Abre el documento vinculado en la ventana completa del navegador.
Formando Emprendedores De Calidad Para Un Mundo Empresarial73
Instituto de Educación Superior
“San Ignacio de Monterrico”
Las plantillas
Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que
las páginas deben seguir un formato uniforme.
La mayoría de nosotros solemos hacer copias de los documentos ya creados, y
trabajar sobre estas copias, modificando simplemente su contenido. Esta es la
forma más sencilla de tener páginas con una estructura basada en la estructura de
otras ya creadas previamente.
Las plantillas son una especie de copia de la página en la que van a estar
basadas el resto de páginas del sitio web, pero que incluyen la posibilidad de
establecer unas zonas editables y otras zonas que serán fijas, que no podrán
ser modificadas.
No es posible modificar las propiedades de una página que está basada en una
plantilla, a excepción del título. Cuando se desea que existan páginas con, por
ejemplo, diferente color de fondo, es necesario crear plantillas diferentes con los
distintos colores, y basar las páginas en una u otra plantilla, según el color de fondo
que se desee para cada una.
Cuando se modifica el diseño de una plantilla, se pueden actualizar todas las
páginas basadas en ella.
Las plantillas son archivos con la extensión DWT que se guardan en el sitio web,
dentro de una carpeta llamada Templates.
Crear plantillas
Las plantillas pueden crearse desde cero, o a partir de una página ya existente.
Una forma de crear una plantilla desde cero es a través del panel Archivos,
pestaña Activos.
La pestaña Activos se puede abrir a través del menú Ventana, opción Activos.
También pulsando F11.
Una vez abierto el panel hay que seleccionar el botón
las plantillas.
, para poder trabajar con
Formando Emprendedores De Calidad Para Un Mundo Empresarial74
Instituto de Educación Superior
“San Ignacio de Monterrico”
Los botones inferiores del panel Activos
Estilos CSS.
son similares a los del panel
El único botón diferente es el primero, que en este caso sirve para actualizar la
lista, el resto permiten crear una nueva plantilla, editar una plantilla
seleccionada en la lista, o eliminarla.
Para crear una nueva plantilla hay que pulsar sobre el
botón
(Si este botón no está activado, pulsa con el
botón derecho del ratón y elige Nueva Plantilla).
Cuando se pulsa ese botón aparece un nuevo
documento en la lista de plantillas, al que es posible
cambiarle el Nombre pulsando previamente sobre él.
Para modificar una plantilla la seleccionamos de la lista
y pulsamos el botón
.
Paraeliminar una plantilla la seleccionamos de la lista y
pulsamos el botón
.
Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates,
que se crea automáticamente.
Para crear una plantilla a partir de un archivo existente es necesario abrir dicho
archivo, y después guardarlo como plantilla a través del menú Archivo, opción
Guardar como plantilla.
Cuando se pulsa dicha opción, aparece una ventana como la de la derecha.
En ella es necesario especificar el nombre con el que va a ser guardada la plantilla,
a través del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el
que se va a guardar
Formando Emprendedores De Calidad Para Un Mundo Empresarial75
Instituto de Educación Superior
“San Ignacio de Monterrico”
Establecer regiones editables en una plantilla
Todos los elementos de una plantilla están bloqueados por defecto, no se pueden
modificar.
Es necesario establecer las zonas que sí podrán ser editadas en las páginas que
se basen en dicha plantilla.
Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a
través del panel Activos, pulsando dos veces sobre ella, o estando seleccionada
pulsando sobre el botón
como ya hemos visto.
Una vez abierta la plantilla es posible establecer sus propiedades a través de la
ventana Propiedades de la página.
Como recordarás, para abrir esta ventana puedes:
Pulsar la combinación de teclas Ctrl+J.
Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
Pulsar con el botón derecho sobre el documento abierto en Dreamweaver, y en el
menú contextual que aparece seleccionar la opción Propiedades de la página.
Para insertar una región editable hay que situar el puntero en el lugar en el que se
desea insertar, y después dirigirse al menú Insertar, Objetos de plantilla, opción
Región editable, o pulsar la combinación de teclas Ctrl+Alt+V.
En la nueva ventana hay que establecer un Nombre para la región editable.
Dentro de la plantilla no pueden existir dos regiones editables con el mismo
nombre.
Formando Emprendedores De Calidad Para Un Mundo Empresarial76
Instituto de Educación Superior
“San Ignacio de Monterrico”
Posteriormente puede modificarse el nombre a través del inspector de propiedades
de la región editable.
La zonas editables aparecen representadas en Dreamweaver como un recuadro
con una etiqueta de color turquesa. En la etiqueta aparece el nombre de la zona
editable.
Dentro del recuadro es posible insertar objetos, que aparecerán por defecto en
aquellos documentos que se basen en la plantilla. Estos objetos, al estar dentro de
la zona editable, podrán ser modificados en las páginas.
Todos los objetos que se encuentren fuera de estas zonas editables aparecerán
también en las páginas, pero no podrán ser modificados.
En este caso, las partes de la plantilla aparecerían en todas las páginas que se
basaran en esta plantilla, mientras que todo lo que insertáramos dentro de la zona
editable podría ser modificado.
Formando Emprendedores De Calidad Para Un Mundo Empresarial77
Instituto de Educación Superior
“San Ignacio de Monterrico”
Estilos CSS avanzados
En este tema aprenderemos más sobre CSS, pero orientándonos más a qué es
CSS y cómo crear estilos CSS para crear páginas que sigan los fundamentos y
reglas marcadas por el W3C (Word Wide Web Consortium).
Esta metodología exige que el archivo HTML solamente muestre datos
organizados y estructurados con etiquetas de marcación HTML, mientras que la
parte de formato recaería sobre los estilos CSS única y exclusivamente.
Para poder lograr esto deberemos dominar en profundidad CSS para poder
posicionar, modificar o adornar la página de un modo eficiente.
En este tema aprenderemos controles que nos ayudarán a presentar el texto e
imágenes de nuestras páginas de una forma mucho más limpia y cómoda.
Aplicar estilos CSS
Hasta ahora, si has entrado un poco en el código de las páginas, habrás visto
etiquetas que introducían estilos CSS en ellas.
La forma más habitual de presentarse es en la sección head de la página de esta
forma:
<style type="text/css">
<!-body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background: url('imagenes/fondo.gif') repeat-x bottom;
}
//->
</style>
Formando Emprendedores De Calidad Para Un Mundo Empresarial78
Instituto de Educación Superior
“San Ignacio de Monterrico”
Este método lo utilizaremos para incrustar el código directamente sobre el
archivo HTML.
También es posible importar archivos de hojas de estilos (de extensión .css)
que hayamos creado. Como ya hemos visto esta opción es mucho mejor porque
así podemos aplicarla sobre varias páginas a la vez sin la necesidad de escribir el
código en cada una de ellas.
En este caso deberemos crear un archivo CSS (Archivo → Nuevo y
seleccionando CSS) donde escribiremos las reglas de estilo del mismo modo en el
que hemos visto más arriba pero eliminado el componente HTML:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background: url('imagenes/fondo.gif') repeat-x bottom;
}
Luego deberíamos vincularlo en la página HTML utilizando la etiqueta link:
<link rel="stylesheet" href="ruta/del/estilo/nombre.css" />
Una página puede contener ambos tipos de estilos CSS, como por ejemplo, tener
un archivo vinculado y luego un bloque de estilo incrustado. O incluso tener varias
hojas de estilo asociadas.
La organización de los estilos debes decidirla tú. Pero recuerda que cuanto menos
código repitas en tus páginas, más fácil será luego de modificar o exportar.
También es posible declarar el estilo en línea. Es decir, tal y como se van creando
las etiquetas HTML, para ello deberás utilizar el atributo style:
<p style="color: red; font-size: 30px;">Este texto está en rojo y con un
tamaño de 30 píxeles</p>
El estilo en línea es más desaconsejado porque es más difícil de modificar al tener
que buscarlo por el texto y modificándolo uno a uno.
Formando Emprendedores De Calidad Para Un Mundo Empresarial79
Instituto de Educación Superior
“San Ignacio de Monterrico”
Estructura CSS
Un archivo CSS (por suerte) tiene una estructura muy bien definida, por lo que
bastará con que nos aprendamos unas cuantas reglas para poder empezar a
familiarizarnos con su creación.
Su estructura siempre es la siguiente:
selector { propiedad:valor; }
Esto es lo que podríamos llamar una regla CSS. Podemos escribir tantas reglas
CSS como queramos, siempre una después de otra.
Entre llaves se encierra la definición del estilo, que viene dada por una lista de
propiedades y sus valores separados por puntos y comas.
Los selectores son aquellos sobre los que se aplica la definición del estilo CSS.
Hay 3 tipos de selectores:
•
Etiqueta HTML
•
Clase
•
Identidad
Cualquier etiqueta HTML es un selector (eliminando los < y >). Por lo que cualquier
elemento de una página puede ser modificado genéricamente para que tome un
mismo aspecto, por ejemplo:
p {font: 13px bold Arial;}
Hace que todos los párrafos (la etiqueta P) tendrán la fuente de un tamaño de 13
píxeles, estará en negrita y será del tipo Arial.
Una clase es un selector que afectará sólo a aquellas etiquetas que nosotros
decidamos, por ejemplo:
.rojo {color: red;}
Formando Emprendedores De Calidad Para Un Mundo Empresarial80
Instituto de Educación Superior
“San Ignacio de Monterrico”
Hemos creado una clase que hace que el color de la letra que tenga asociada esta
clase sea rojo. Como puedes ver, la clase se define porque tiene un punto delante.
Ahora podríamos aplicar este estilo sobre cualquier etiqueta que queramos.
<p class="rojo">Este es un texto en rojo</p>
<div class="rojo">Este es un bloque con el texto rojo</div>
En este ejemplo estaríamos creando un párrafo o un bloque y ambos tendrían el
texto de color rojo por habérseles aplicado la misma regla CSS.
Los selectores de clase deben estar siempre escritos con carácteres alfanuméricos
y sin utilizar espacios (utiliza el subrayado _ para separar palabras).
Por último encontraríamos los selectores de identidad. Estos sólo se aplican una
vez y se asocian a una etiqueta.
#contenedor {width: 600px;}
Más tarde en el código podremos encontrar:
<div id="contenedor">Este es un bloque que contiene texto</div>
Las clases de identidad se identifican por empezar el selector con un signo #. En el
código deberá establecerse la regla CSS asociándosela al atributo ID.
Este atribudo (id) recoge el nombre del elemento que se ha creado con la etiqueta
HTML.
A partir de ese momento se podría referenciar a ese cuadro de texto como
contenedor utilizando JavaScript.
Selectores CSS
Aunque sólo hay tres tipos de selectores diferentes hay diversas formas de
combinarlos para producir hojas de estilo más complejas.
Ahora veremos estos tipos de combinación:
Formando Emprendedores De Calidad Para Un Mundo Empresarial81
Instituto de Educación Superior
“San Ignacio de Monterrico”
Agrupación: Los selectores se pueden agrupar separados por comas, por lo que:
p { background-color: #000033; }
.azul_oscuro { background-color : #000033; }
#cabecera { background-color: #000033; }
Puede escribirse como:
p, .azul_oscuro, #cabecera { background-color: #000033; }
Descendencia: Podemos obligar que un estilo sólo se aplique sobre un elemento
que esté dentro de otro. Por ejemplo:
h1 {
color: #0000FF;
font-weight: bold;
}
b { color: #0000FF; }
Esto hará que todos los encabezados H1 de la página sean de color azul y en
negrita, y que los textos en negrita se muestren azules.
Pero, ¿qué pasa si queremos resaltar texto en los encabezados, no podremos
utilizar la negrita?
<h1>Título: El uso de la <b>Negrita</b></h1>
En este caso deberemos hacer uso de la descendencia:
h1 b { color: red; }
Ahora los textos marcados con la etiqueta B en los encabezados H1 serán de color
rojo.
Al escribir dos selectores seguidos obligamos a que el segundo tenga que estar
dentro del anterior.
Formando Emprendedores De Calidad Para Un Mundo Empresarial82
Instituto de Educación Superior
“San Ignacio de Monterrico”
Puedes utilizar todas las anidaciones que quieras y mezclar los selectores, por
ejemplo:
#contenedor p .derecha { float: right; }
En este caso todas las etiquetas con la clase derecha que se encuentren dentro de
un párrafo del elemento definido como contenedor flotarán a la derecha.
Selectores de Atributo
Hasta ahora hemos visto que los selectores se pueden combinar de bastantes
formas. Veamos que el poder de CSS no sólo se queda ahí sino que avanza un
poco más para ayudarnos a establecer estilos según el tipo de atributos que
tenga una etiqueta.
Un atributo es una parte de la descripción de un selector HTML. Por ejemplo, en:
<a href="http://www.aulaclic.es" target="_blank">Enlace</a>
A es el selector de la etiqueta, mientras que href y target son atributos.
CSS permite entrar en el contenido de las etiquetas para cambiar sus estilos.
Veamos cómo hacerlo:
Nombre
de
Atributo:
Podemos
establecer
estilos
para
etiquetas
con
determinados atributos definidos, por ejemplo:
a[href] { font-family: Arial, Helvetica; }
En esta línea estamos estableciendo que cualquier etiqueta a que tenga el atributo
href cambie su tipo de letra a Arial o Helvética.
Valor de Atributo: Podemos aplicar estilos a etiquetas que tengan determinado
valor en un atributo, por ejemplo:
a[target="_blank"] { font-weight: bold; }
Esta línea hará que se convierta en negrita cualquier enlace que abra una nueva
ventana al hacer clic.
Formando Emprendedores De Calidad Para Un Mundo Empresarial83
Instituto de Educación Superior
“San Ignacio de Monterrico”
Pseudo-clases y Pseudo-elementos CSS
Por último, y para terminar con los selectores veremos las pseudo-clases,
elementos que añadiremos a los selectores para evidenciar algún estado.
Y los pseudo-elementos, que aplicaremos sobre los selectores en dos casos
muy sencillos.
Primero veremos 4 tipos diferentes de pseudo-clases, que hasta ahora sólo
pueden aplicarse sin ningún problema sobre la etiqueta A (que utilizamos
para crear vínculos). Son: :link, :visited, :hover y :active.
Incluyendo estas pseudo-clases en nuestros estilos CSS podremos
modificar el modo en el que se visualizarán los enlaces.
Veamos el siguiente ejemplo:
a:link { color: red; }
a:visited { color: blue; }
a:hover { color: green; }
a:active { color: yellow; }
Esto hará que los enlaces se muesten de color rojo (red) en nuestra página.
Es el estado link.
Cuando ya hayan sido visitados por el usuario se quedarán de color azul
(blue). Es el estado visited. Este estado se renovará dependiendo del
navegador utilizado y se mostrará durante un tiempo determinado (una
sesión, etc...).
En el momento en que coloques el ratón sobre él se mostrará de color
verde (green). Es el estado hover.
Formando Emprendedores De Calidad Para Un Mundo Empresarial84
Instituto de Educación Superior
“San Ignacio de Monterrico”
Y finalmente en el momento que se haga clic sobre él, y mientras se
mantenga pulsado el botón se verá de color amarillo (yellow). Es el estado
active.
Puedes aplicar estas pseudo-clases de cualquier forma de las anteriores.
a.menu:hover { text-decoration: none; }
Esta línea hará que los elementos A de la clase menu no muestren
subrayado (ni ningún tipo de decoración) cuando se coloque el ratón sobre
él.
Puedes utilizarlas todas a la vez o descartar los estados que no quieras
tratar. Pero recuerda, deberán estar declaradas en el estilo CSS en este
orden para que funcionen correctamente. Si los cambias de orden es
posible que no te funcionen.
Luego tenemos dos pseudo-elementos que actuarán sobre el texto del
documento, son: :first-letter y :first-line (primera letra y primera línea
respectivamente).
p:first-letter { font-size: 26px; }
p:first-line { font-variant: small-caps; }
Controles de fuente
Ya hemos visto cómo manejarnos con los selectores, ahora veremos cómo
deberemos crear las definiciones de los estilos.
Empezaremos viendo los controles de modificación de fuentes:
font-family: indica la familia de fuente en la que se mostrará el texto, puede tomar
los valores serif, sans-serif, cursive, fantasy y monospace:
serif, sans-serif, cursive, fantasy, monospace...
Formando Emprendedores De Calidad Para Un Mundo Empresarial85
Instituto de Educación Superior
“San Ignacio de Monterrico”
Aunque esta propiedad también soporta que nombres un listado de diferentes
fuentes. El navegador las buscará en el equipo del usuario y si la encuentra la
mostrará. El orden en este caso también es importante, pues mostrará la que
primero encuentre.
Es recomendable, aun así, indicar siempre una familia en el caso de que no se
encontrase ninguna de las fuentes instaladas, ejemplo:
p { font-family: Arial, Helvetica, sans-serif; }
font-style: indica el estilo de la fuente, puede tomar los valores italic y oblique.
italic, oblique
Algunas fuentes están hechas especialmente para tener una variante en italic
(cursiva), para aquellas que no lo tengan implementado utiliza el atributo oblique
que hace que el navegador incline automáticamente la fuente para mostrarla en
cursiva.
font-variant: establece la variante de la fuente. Puede tomar el valor small-caps
(versales). El valor normal hará que se muestre el estado por defecto de la fuente.
SMALL-CAPS, Normal
font-weight: indica el peso de la fuente. Los valores más utilizados son: bolder,
bold y lighter. También puedes utilizar valores del 100 al 900, siendo el primero la
fuente más ligera y el último el más pesado.
bolder, bold, lighter
font-size: establece el tamaño de la fuente. Puedes utilizar lo valores predefinidos
smaller, larger, xx-small, x-small, small, medium, large, x-large y xx-large. Los
dos primeros valores establecen el tamaño de la fuente en comparación a la
definida en el elemento padre donde se encuentra, así se mostrará más pequeña
(smaller) o más grande (larger).
xx-small,
x-small,
small,
medium,
large,
x-large,
xx-
large
Formando Emprendedores De Calidad Para Un Mundo Empresarial86
Instituto de Educación Superior
“San Ignacio de Monterrico”
También es posible establecer el tamaño del texto utilizando porcentajes. Que
también mostrará el texto en relación a su elemento padre.
Pero, de lejos, la forma más utilizada es especificando expresamente el tamaño de
la fuente en una cifra.
Las unidades utilizadas son varias, ems, puntos, píxeles... El sistema de puntos
(pt) varía un poco según los sistemas operativos, por lo que es aconsejable utilizar
alguno de los restantes:
a { font-size: 12em; }
p { font-size: 14px; }
Es posible definir todos estos estilos que hemos visto en una sola definición. Para
ello utilizaremos font:.
Así una retaíla de reglas como esta:
p { font-style: italic; }
p { font-variant: small-caps; }
p { font-weight: bold; }
p { font-size: large; }
p { font-family: monospace; }
Puede escribirse como:
p{
font: italic small-caps bold large monospace;
}
Recuerda que el orden debe ser siempre el mismo: style, variant, weight, size y
family.
Si no vas a utilizar una de las definiciones puedes omitirla como en este ejemplo:
p{
font: bold sans-serif;
}
Formando Emprendedores De Calidad Para Un Mundo Empresarial87
Instituto de Educación Superior
“San Ignacio de Monterrico”
Espaciado
Continuando con los controles de texto tenemos la propiedad word-spacing que
establece la separación entre las palabras de un texto.
Este texto tiene una separación de 18 píxeles entre sus palabras.
Este, sin embargo, tiene una separación de -5 píxeles.
También podemos utilizar la propiedad letter-spacing para establecer la distancia
aplicada entre los caracteres del texto:
Este texto tiene una
entre sus palabras.
separación
de
5
píxeles
Este,sin embargo, tieneuna separación de-2 píxeles.
vertical-align establece la alineación vertical del texto. Puede tomar los valores
baseline, sub, super, top, text-top, middle, bottom, text-botom.
baseline, sub, super, top,
text-top, middle, bottom, text-bottom
Observa como los valores sub, super, text-bottom y text-top toman como
referencia el tamaño del texto, mientras que top, middle y bottom toman como
referencia el alto del párrafo completo (en este caso lo marca la imagen de
aulaClic).
line-height indica el alto de línea del texto, igual que el resto de propiedades
puedes establecer esta altura en píxeles, ems o puntos.
Este texto tiene un alto de línea de 30 píxeles. Puedes ver que la separación entres
estas líneas es mayor que la definida por defecto.
Este texto tiene un alto de línea de 10 píxeles. Puedes ver que la separación entres
estas líneas es menor que la definida por defecto.
Si estableces simplemente valores numéricos podrás indicar el alto respecto a su
tamaño normal. Por ejemplo:
p { line-height: 2; }
Esta línea muestra el texto con un interlineado doble. Si hubiesemos escrito 1.5 el
interlineado sería un 50% más alto de lo normal.
Formando Emprendedores De Calidad Para Un Mundo Empresarial88
Instituto de Educación Superior
“San Ignacio de Monterrico”
text-align establece la alineación horizontal del texto. Sus valores ya te deben ser
familiares: left, right, center y justify.
Este texto está alineado a la izquierda con left.
Este texto está alineado a la derecha con right.
Este texto está alineado al centro con center.
Este texto está justificado, ambos márgenes del texto tocarán los bordes. Si es
necesario estirar las líneas se hará.
text-indent indica el tamaño de identación (o sangría) del texto. Tomará valores en
puntos, píxeles o ems, como prefieras.
Texto identado 24px
Texto identado 48px
Texto identado 72px
white-space, esta propiedad es muy útil para evitar que el ancho del navegador
modifique el ancho de las líneas del texto.
Puede tomar el valor nowrap para que el texto se muestre en una sóla línea sin
insertar saltos no deseados:
Este texto no tiene saltos de línea, así que se mostrará en toda su
anchura aunque el navegador sea más estrecho.
También puedes establecer esta propiedad al valor pre. En este caso todos los
espacios insertados en el texto se mostrarán y no se convertirán en uno sólo como
ocurre normalmente:
En este texto
podemos introducir tantos espacios como queramos. Da igual si son más
de uno, se
mostrarán igualmente.
Este último valor no funciona correctamente en Internet Explorer así que es
recomendable utilizar la entidad HTML ( ) para mostrar más de un espacio.
Formando Emprendedores De Calidad Para Un Mundo Empresarial89
Instituto de Educación Superior
“San Ignacio de Monterrico”
Aspecto del texto
text-decoration establece si el texto llevará decoración o no. Esta propiedad es
muy útil para modificar el estilo de los enlaces. Los valores que puede tomar esta
propiedad son none, underline, overline, line-through, blink.
none, underline, overline, line-through, blink
El valor blink hace que el texto parpadee. Este valor sólo funciona en
determinados navegadores (no en Internet Explorer).
Con la propiedad text-transform puedes indicar la transformación del texto
de la siguiente forma. Capitalize cambia la primera letra de cada palabra a
mayúsculas. Uppercase y lowercase cambian el texto a mayúsculas o
minúsculas respectivamente.
Este texto tiene el valor capitalize, las primeras letras serán en mayúsculas, el
resto se mostrará en minúsculas automáticamente
ESTE TEXTO TIENE EL VALOR UPPERCASE, AUNQUE ESTE ESCRITO EN
MINÚSCULAS SE CAMBIARÁ A MAYÚSCULAS
Este texto tiene el valor lowercase, aunque este escrito en mayúsculas se
cambiará a minúsculas
Por último veremos la propiedad color que establece el color del texto.
Esta propiedad puede tomar un valor hexadecimal (como vimos en el
apartado de colores del tema 3).
De modo que simplemente haría falta especificar el color de este modo:
p { color: #006600; }
Unos ejemplos serían los siguientes:
#006600
#00FF00
#003399
#33CC99
#66CCFF
#00CCCC
#990000
#999900
#FF9933
#996699
#CCFF33
#CCFF99
Formando Emprendedores De Calidad Para Un Mundo Empresarial90
Instituto de Educación Superior
“San Ignacio de Monterrico”
También existe la posibilidad de utilizar unas palabras reservadas para
nombrar unos cuantos colores básicos.
El modo en el que se definiría el estilo sería el mismo:
p { color: red; }
Aunque en este caso en vez de introducir su equivalente hexadecimal,
referenciaríamos directamente su nombre.
Puedes encontrar el listado de los nombres de color que puedes utilizar en
el sitio de la W3C.
Controles de ratón
Hemos decidido dedicar este apartado a la propiedad cursor que modifica la
apariencia del ratón cuando se sitúa sobre una etiqueta afectada por esta
propiedad CSS.
Puedes aplicarla sobre párrafos, enlaces o incluso sobre el body mismo (así el
cursor tendrá una forma personalizada en toda la página!).
El modo en el que se utiliza es igual que el resto:
p{
cursor: pointer;
}
Y puede tomar los valores auto, crosshair, pointer, move, n-resize, ne-resize, eresize, se-resize, sw-resize, w-resize, nw-resize, text, wait y help.
Aquí tienes un ejemplo de cada uno de los cursores.
auto
crosshair
pointer
move
text
wait
help
n-resize
ne-resize
e-resize
se-resize
sw-resize
w-resize
nw-resize
Formando Emprendedores De Calidad Para Un Mundo Empresarial91
Instituto de Educación Superior
“San Ignacio de Monterrico”
Controles de lista
Hemos visto muchas propiedades que afectan al modo en el que se muestran los
textos de nuestras páginas.
Ahora haremos un alto para ver unas cuantas propiedades que utilizaremos para
dar estilo a nuestras listas.
list-style-type permite establecer el tipo de viñeta utilizada en las listas, puede
tomar los valores disc, circle, square, decimal, lower-roman, upper-roman,
lower-alpha, upper-alpha y none.
•
•
disc 1
disc 2
o
o
circle 1
circle 2


square 1
square 2
•
disc 3
o
circle 3

square 3
i.
1. decimal 1
2. decimal 2
3. decimal 3
ii.
iii.
lower-roman
1
lower-roman
2
lower-roman
3
a. lower-alpha
1
b. lower-alpha
2
A. upper-alpha
1
B. upper-alpha
2
c. lower-alpha
3
C. upper-alpha
3
I.
II.
III.
upper-roman
1
upper-roman
2
upper-roman
3
•
•
none 1
none 2
•
none 3
Este estilo debe ir asociado a la etiqueta li, ul o ol.
list-style-image permite mostrar una imagen en lugar de una viñeta.
La forma en la que lo haremos será la siguiente:
ul { list-style-image: url(graficos/lista.gif); }
Así declararemos el estilo. Luego bastará con escribir una lista desordenada, pues
hemos utilizado el selector ul para marcar el estilo.
Formando Emprendedores De Calidad Para Un Mundo Empresarial92
Instituto de Educación Superior
“San Ignacio de Monterrico”
•
elemento 1
•
elemento 2
•
elemento 3
•
elemento 4
Observa que hemos utilizado una URL. Esta ruta debe ser o bien absoluta, o
relativa a la hoja de estilos. Nunca al documento donde se aplica!
list-style-position sirve para establecer sangrados colgantes. Puede tomar dos
valores outside (fuera) e inside (dentro).
Veamos un ejemplo que lo ilustrará perfectamente:
•
elemento 1
•
elemento 2 con valor outside
•
elemento 3
•
elemento 4 con valor inside
•
elemento 5
Como puedes ver el valor inside alinea la viñeta con el principio del texto del
elemento anterior. Outside alinea la viñeta del elemento en la posición predefinida.
Utiliza este último valor para destacar listas definidas como inside.
Por último, como en los controles de fuente, existe un modo en el que podemos
escribir todas estas reglas sin tener que escribirlas una a una. Para ello
utilizaremos la propiedad list-style.
De este modo el siguiente bloque:
ol {
list-style-type: upper-alpha;
list-style-position: outside;
list-style-image: url(imagenes/bullet.gif);
}
Formando Emprendedores De Calidad Para Un Mundo Empresarial93
Instituto de Educación Superior
“San Ignacio de Monterrico”
Puede escribirse como:
ol {
list-style: upper-alpha outside url(imagenes/bullet.gif);
}
Ten en cuenta siempre el orden type, position e image. Si no quieres utilizar
alguna de ellas, simplemente omítela.
Controles de fondo
En este apartado veremos las propiedades que pueden aplicarse sobre el fondo.
Estas propiedades se pueden aplicar sobre muchos de los elementos, tanto celdas,
párrafos o el body de la página.
background-color permite establecer el color de fondo. Utiliza los mismos códigos
hexadecimales o los nombres de color que vimos en la propiedad color del texto.
La sintaxis es igual a la que hemos visto hasta ahora:
td.rojo {
background-color: red;
}
background-image establece una imagen de fondo para el elemento.
body {
background-image: url(imagenes/fondo.jpg);
}
Por defecto, las imágenes se posicionarán en la esquina superior izquierda y en
mosaico.
background-repeat indica el modo de repetición de la imagen establecida para el
fondo.
Puede tomar los siguientes valores:
Formando Emprendedores De Calidad Para Un Mundo Empresarial94
Instituto de Educación Superior
“San Ignacio de Monterrico”
repeat: la imagen se repite a modo de mosaico hasta ocupar la página completa.
repeat-x: la imagen se repite a lo largo del eje horizontal.
repeat-y: la imagen se repite a lo largo del eje vertical.
no-repeat: la imagen no se repite.
Por omisión, el valor que se toma es repeat, por lo que se genera un mosaico con
la imagen del fondo.
Deberás declarar la URL de la imagen para poder utilizar esta propiedad:
#menu {
background-image: url(imagenes/menu.gif);
background-repeat: repeat-x;
}
background-attachment se utiliza para indicar si la imagen de pantalla es fija o se
desplaza con el movimiento de las barras de desplazamiento.
Esta opción se usa sobre todo para las imágenes del body.
Puede tomar los valores fixed y scroll. El primer valor dejará la imagen fija, el
segundo hará que la imagen se desplace junto con las barras (como el fondo de
esta página).
background-position permite el posicionamiento de la imagen de fondo.
Selecciona entre los valores top, center, bottom y left, center, right.
En este caso podremos combinar dos de los valores, por ejemplo:
.cita {
background-image: url(imagenes/quote.gif);
background-repeat: no-repeat;
background-position: right top;
}
Formando Emprendedores De Calidad Para Un Mundo Empresarial95
Instituto de Educación Superior
“San Ignacio de Monterrico”
Aunque puedes omitirlos, pero recuerda que si lo haces por omision los valores
serán top y left.
Igual que en algunos de los apartados anteriores puedes utilizar la propiedad
background para resumir las reglas CSS.
Así el siguiente bloque:
.cita {
background-color: gray;
background-image: url(imagenes/quote.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right top;
}
Puede ser escrito de la siguiente forma:
.cita {
background: gray url(imagenes/quote.gif) no-repeat scroll right top;
}
Recuerda mantener el orden color, image, repeat, attachment y position.
Controles de margen
Ahora veremos unas cuantas reglas que afectarán a los bordes y márgenes de los
elementos.
Para ello utilizaremos el mismo ejemplo: dos cajas, una dentro de la otra.
margen
texto
margen
margin-top, margin-right, margin-bottom y margin-left establecen la distancia
de los bordes del elemento al elemento padre.
Puedes utilizar píxeles o porcentajes para indicar estas distancias.
Formando Emprendedores De Calidad Para Un Mundo Empresarial96
Instituto de Educación Superior
“San Ignacio de Monterrico”
Por ejemplo, en la siguente caja se le ha dado al bloque interior la siguiente clase:
.bloque_interior {
margin-top: 20px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: -10px;
}
margen
texto
margen
Los márgenes superiores e inferiores se pueden ver en la distancia que hay de la
caja interior a las palabras margen.
Observa cómo el margen 0 del lado derecho hace que los bordes queden pegados,
mientras que un valor negativo hace que el bloque salga de la caja.
La propiedad margin te permite unificar varias propiedades en una sola:
.bloque_interior {
margin-top: 20px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: -10px;
}
Este bloque se podría reescribir como:
.bloque_interior {
margin: 20px 0px 5px -10px;
}
Recuerda que deberás seguir el orden top, right, bottom y left.
Formando Emprendedores De Calidad Para Un Mundo Empresarial97
Instituto de Educación Superior
“San Ignacio de Monterrico”
En el caso de que los valores arriba y abajo (top y bottom) e izquierda y derecha
(left y right) sean iguales entre sí se puede escribir en dos valores, como:
.bloque_interior {
margin: 20px 5px;
}
En este caso los márgenes superior e inferior serán de 20px y los de los lados de
5.
En caso de que quieras que todos los margenes tengan la misma distancia
puedes escribirlo sólo una vez:
.bloque_interior {
margin: 20px;
}
Ahora todos los márgenes serán de 20 píxeles.
También se pueden establecer estas propiedades a auto. Dejando que los bordes
del elemento sean determinados por el navegador.
Esta opción, sin embargo, no se trata del mismo modo en todos los navegadores.
Internet Explorer no sigue los estándares y no la maneja de un modo correcto.
Por lo que cuando con otros navegadores centrar un elemento es muy sencillo con
el valor auto, para IE hay que hacer una pequeña trampa.
Veamos el siguiente ejemplo:
margen
texto
margen
El código CSS de la caja interior es:
.bloque_interior {
margin-right: auto;
margin-left: auto;
}
Formando Emprendedores De Calidad Para Un Mundo Empresarial98
Instituto de Educación Superior
“San Ignacio de Monterrico”
Si intentas hacerlo sobre el body, en IE no funcionará. Los márgenes auto no
centrarán el bloque.
Deberás darle la siguiente propiedad al body para que funcione:
text-align: center;
Esto simplemente alineará el texto al centro en el resto de navegadores (donde
deberemos seguir utilizando el valor auto para los márgenes) y hará que los
bloques se alineen en el centro de la pantalla.
padding-top, padding-left, padding-bottom y padding-right establecerán la
distancia del borde de un elemento con sus etiquetas interiores.
Lo entenderás mucho mejor con el siguiente ejemplo:
texto
A esta caja le hemos aplicado el siguiente estilo:
.bloque {
padding-top: 20px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 10px;
}
Como puedes ver la distancia de la palabra texto a los bordes derecho e inferior es
de 5px.
Y lo mismo pasa con los márgenes superior (20px) e izquierdo (10px).
Igual que con los márgenes podemos abreviar las reglas CSS utilizando la
propiedad margin.
Así, el bloque anterior:
.bloque {
Formando Emprendedores De Calidad Para Un Mundo Empresarial99
Instituto de Educación Superior
“San Ignacio de Monterrico”
padding-top: 20px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 10px;
}
Se podrá reescribir como:
.bloque {
padding: 20px 5px 5px 10px;
}
Recuerda, también, mantener el orden top, left, bottom, right.
Los casos de repetición se aplican igual que en los márgenes, por lo que podrás
escribir los siguientes casos:
.bloque1 {
padding: 20px 5px 5px 10px;
}
.bloque2 {
padding: 20px 7px;
}
.bloque3 {
padding: 5px;
}
Bordes
También tenemos las propiedades de borde.
La primera es border-width que indica el ancho de un borde.
Formando Emprendedores De Calidad Para Un Mundo Empresarial100
Instituto de Educación Superior
“San Ignacio de Monterrico”
Puede tomar los valores medium, thin y thick. Aunque también se aceptan
valores en píxeles y porcentajes que son más fáciles de manejar a la hora de crear
bordes con una anchura exacta.
texto
texto
En este caso hemos utilizado:
.borde1 {
border-width: 1px;
}
.borde2 {
border-width: 5px;
}
border-style muestra el borde del elemento de una forma determinada, existen
varios tipos:
border-color establece en forma hexadecimal o con nombre el color del borde de
un elemento.
texto
En este caso ha sido:
.borde {
border-color: #FFFF00;
}
Como en el resto de propiedades, utilizaremos la propiedad border para resumir
estas tres últimas.
De modo que el siguiente bloque:
.borde {
Formando Emprendedores De Calidad Para Un Mundo Empresarial101
Instituto de Educación Superior
“San Ignacio de Monterrico”
border-width: 10px;
border-style: groove;
border-color: black;
}
Podría escribirse más fácilmente:
.borde { border: 10px groove black; }
Debes mantener el orden width, style y color, y en este caso deberás especificar
cada uno de los valores para que la regla se comporte normalmente.
También para los bordes es posible utilizar las mismas propiedades pero indicando
a qué lado nos referimos:
.borde {
border-top-width: 10px;
border-top-style: groove;
border-top-color: black;
border-left-width: 10px;
border-left-style: groove;
border-left-color: black;
border-bottom-width: 10px;
border-bottom-style: groove;
border-bottom-color: black;
border-right-width: 10px;
border-right-style: groove;
border-right-color: black;
}
Que a su vez podría reescribirse como:
.borde {
border-top: 10px groove black;
border-left: 10px groove black;
Formando Emprendedores De Calidad Para Un Mundo Empresarial102
Instituto de Educación Superior
“San Ignacio de Monterrico”
border-bottom: 10px groove black;
border-right: 10px groove black;
}
Y si todos los valores son iguales para cada uno de los bordes, volvemos a utilizar
la propiedad border:
.borde {
border: 10px groove black;
}
Controles de posición
En este apartado veremos cómo posicionar el contenido de la página web
utilizando únicamente estilos CSS.
Existen unas propiedades CSS que combinadas con las siguientes nos ayudarán a
mover el contenido de la página.
Estas son top, left, bottom y right.
Con estas propiedades podremos establecer la distancia a los bordes de la
ventana del navegador.
Recordemos que top equivale a la parte superior.
Left al lado izquierdo.
Bottom al borde inferior.
Y finalmente right al derecho.
Normalmente daremos valores a estas propiedades utilizando píxeles o
porcentajes.
Veamos ahora cómo las utilizaremos para ello deberemos declarar también la
propiedad position.
Formando Emprendedores De Calidad Para Un Mundo Empresarial103
Instituto de Educación Superior
“San Ignacio de Monterrico”
Esta es sin duda la más compleja de este apartado así que la veremos con
detenimiento.
Esta propiedad puede aceptar 4 valores: static, absolute, relative y fixed.
Vayamos uno a uno.
El valor static es el valor por defecto de un elemento, ocupa su lugar en el flujo de
la página y no puede ser modificado utilizando las propiedades top/bottom y
left/right.
p{
position: static;
}
Con el valor absolute puedes colocar un elemento en cualquier parte de la ventana
con sólo darle las coordenadas.
Así deberíamos declarar la posición utilizando un par de propiedades top/bottom y
left/right.
Un ejemplo podría ser este:
#capa_flotante {
position: absolute;
top: 100px;
left: 300px;
width: 30px;
height: 125px;
}
Esta declaración de estilos es muy habitual en las capas. Se posiciona
absolutamente el objeto y luego se le da un ancho y un alto.
El valor relative también nos permite mover el elemento. Este, en principio, ocupa
su lugar en el flujo normal de la página y utilizaremos las propiedadeas top/bottom
Formando Emprendedores De Calidad Para Un Mundo Empresarial104
Instituto de Educación Superior
“San Ignacio de Monterrico”
y left/right para desplazarlo tomando como referencia ese lugar y no los bordes de
la página.
Por ejemplo:
p.especial {
position: relative;
top: 20px;
}
Esta regla hará que los párrafos marcados con la clase especial se desplacen 20
píxeles hacia abajo de su positión normal en el flujo de la página.
Piensa que lo que estamos diciendo en la definición de la regla es que va a haber
una desfase de 20 píxeles desde la parte superior de donde se encontraba en
un principio, por lo que el elemento se verá desplazado hacia abajo.
Finalmente encontramos el valor fixed. Este valor, desgraciadamente, no funciona
en algunas versiones de Internet Explorer por lo que no te será de mucho uso
aunque sea una muy buena regla de estilo.
Asignándole este valor a la propiedad position podemos hacer que un elemento se
quede fijo en la ventana aunque se muevan las barras de desplazamiento. Un
comportamiento muy útil para los menús o algunos gráficos que queramos que
permanezcan siempre a la vista.
También acepta los pares top/bottom y left/right para definir la posición en la que
se mostará fijo.
Por ejemplo:
#menu {
position: fixed;
top: 0px;
Formando Emprendedores De Calidad Para Un Mundo Empresarial105
Instituto de Educación Superior
“San Ignacio de Monterrico”
right: 0px;
}
Esta regla de estilo posicionaría un elemento con identidad menu en la esquina
superior derecha de la ventana y aunque utilicemos el scroll (las barras de
desplazamiento) permanecerá allí fijo.
Claro está, este valor no funciona en IE 6, aunque es posible que en futuras
versiones puedan arreglar este problema.
Formando Emprendedores De Calidad Para Un Mundo Empresarial106