desarrollo de páginas web_lenguaje_html

Argentina

, si queremos que el estilo sea vlido para toda la lista, o dentro de la etiqueta

si queremos hacerlo especfico de un solo elemento. La sintaxis es del siguiente tipo:

Donde tipo de vieta puede ser uno de los siguientes: circle disc square Listas ordenadas Las listas ordenadas sirven tambin para presentar informacin, en diversos elementos o items, con la particularidad que stos estarn predichos de un nmero o una letra para enumerarlos, siempre por un orden. Para realizar las listas ordenadas usaremos las etiquetas

(ordered list) y su cierre. Cada elemento ser igualmente indicado por la etiqueta

, que ya vimos en las listas desordenadas. Ejemplo: Reglas de comportamiento en el trabajo

El jefe siempre tiene la razn

En caso de duda aplicar regla 1

Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la posibilidad de modificar el estilo. En concreto nos es posible especificar el tipo de numeracin empleado eligiendo entre nmeros (1, 2, 3...), letras (a, b, c...) y sus maysculas (A, B, C,...) y nmeros romanos en sus versiones maysculas (I, II, III,...) y minsculas (i, ii, iii,...).

Para realizar dicha seleccin hemos de utilizar, como para el caso precedente, el atributo type, el cual ser situado dentro de la etiqueta

. Los valores que puede tomar el atributo en este caso son: 1 Para ordenar por nmeros a Por letras del alfabeto A Por letras maysculas del alfabeto i Ordenacin por nmeros romanos en minsculas I Ordenacin por nmeros romanos en maysculas Nota: Recordamos que en algunos navegadores no funciona la opcin de cambiar el tipo de vieta a mostrar Puede que en algn caso deseemos comenzar nuestra enumeracin por un nmero o letra que no tiene por qu ser necesariamente el primero de todos. Para solventar esta situacin, podemos utilizar un segundo atributo, start, que tendr como valor un nmero. Este nmero, que por defecto es 1, corresponde al valor a partir del cual comenzamos a definir nuestra lista. Para el caso de las letras o los nmeros romanos, el navegador se encarga de hacer la traduccin del nmero a la letra correspondiente. Ejemplo Ordenamos por nmeros romanos empezando por el 10

Elemento x

Elemento xi

El resultado: Ordenamos por nmeros romanos empezando por el 10 x. Elemento x xi. Elemento xi Listas de definicin Las listas de definicin sirven para hacer un conjunto de elementos con pares concepto-descripcin. Es decir, se especificarn varios trminos por su nombre y se escribir una definicin para cada uno. Cada elemento es presentado junto con su definicin, uno detrs de otro. Para realizar una lista de definicin, la etiqueta principal es y (definition list). La etiquetas del elemento y su definicin son (definition term) y (definition definition) respectivamente. Ejemplo: Diccionario de la Real Academia Brjula Serula montada en una escbula Oreja Sesenta minutejos El efecto producido: Diccionario de la Real Academia Brjula Serula montada en una escbula Oreja Sesenta minutejos Anidando listas Nada nos impide utilizar todas estas etiquetas de forma anidada como hemos visto en otros casos. De esta forma, podemos conseguir listas mixtas como por ejemplo: Ciudades del mundo

Mxico

Distrito Federal

Tlaxcala

Uruguay

Montevideo

Punta del Este

De esta forma creamos una lista como esta: Ciudades del mundo Mxico 1. Distrito Federal 2. Tlaxcala Uruguay 1. Montevideo 2. Punta del Este Caracteres especiales Una pgina web se ha de ver en pases distintos, que usan conjuntos de caracteres distintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los ordenadores del mundo, independientemente de su juego de caracteres. Este conjunto son los caracteres especiales. Cuando queremos poner uno de estos caracteres en una pgina, debemos sustituirlo por su cdigo. Por ejemplo, la "" (a minscula acentuada) se escribe "" de modo que la palabra pgina se escribira en una pgina HTML de este modo: pgina Caracteres especiales bsicos En realidad estos caracteres se usan en HTML para no confundir un principio o final de etiqueta, unas comillas o un & con su correspondiente carcter. < < > >

& & " "

Caracteres especiales del HTML 2.0

Caracteres especiales del HTML 3.2

Otros caracteres especiales

Hipervnculos o enlaces El atractivo original del HTLM radica en la posible relacin haca otros archivos introduciendo referencias bajo forma de enlaces que permitan un acceso rpido a la informacin deseada. De poco servira en la red tener pginas aisladas a las que la gente no puede acceder y desde las que la gente no puede llegar a otras. Un enlace puede ser fcilmente detectado en una pgina. Basta con deslizar el puntero del ratn sobre las imgenes o el texto y ver cmo cambia de su forma original transformndose por regla general en una mano con un dedo sealador. Adicionalmente, estos enlaces suelen ir, en el caso de los textos, coloreados y subrayados para que el usuario no tenga dificultad en reconocerlos. Si no especificamos lo contrario (ya tendremos ocasin de explicar cmo), estos enlaces texto estarn subrayados y coloreados en azul. En el caso de las imgenes que sirvan de enlace, veremos que estn delimitadas por un marco azul por defecto. Para colocar un enlace, nos serviremos de las etiquetas y . Dentro de la etiqueta de apertura deberemos especificar asimismo el destino del enlace. Este destino ser introducido bajo forma de atributo, el cual lleva por nombre href. La sintaxis general de un enlace es por tanto de la forma: contenido Siendo el contenido un texto o una imagen. Es la parte de la pgina que se colocar activa y donde deberemos pulsar para acceder al enlace. Por su parte, destino ser una pgina, un correo electrnico o un archivo. En funcin del destino los enlaces son clasificadamente agrupados del siguiente modo: Enlaces internos: los que se dirigen a otras partes dentro de la misma pgina. Enlaces locales: los que se dirigen a otras pginas del mismo sitio web. Enlaces remotos: los dirigidos hacia pginas de otros sitios web. Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a una direccin. Enlaces con archivos: para que los usuarios puedan hacer descargas de ficheros. Enlaces Internos Son los enlaces que apuntan a un lugar diferente dentro de la misma pgina. Este tipo de enlaces son esencialmente utilizados en pginas donde el acceso a los contenidos puede verse dificultado debido al gran tamao de la misma. Mediante estos enlaces podemos ofrecer al visitante la posibilidad de acceder rpidamente al principio o final de la pgina o bien a diferentes prrafos o secciones. Para crear un enlace de este tipo es necesario, aparte del enlace de origen propiamente dicho, un segundo enlace que ser colocado en el destino. Veamos ms claramente cmo funcionan estos enlaces con un ejemplo sencillo: Supongamos que queremos crear un enlace que apunte al final de la pgina. Lo primero ser colocar nuestro enlace origen. Lo pondremos aqu mismo y lo escribiremos del siguiente modo: Ir abajo Como se puede ver, el contenido del enlace es el texto "Ir abajo" y el destino, abajo, es un punto de la misma pgina que todava no hemos definido. Hay que poner atencin al smbolo # ya que es el que especifica al navegador que el enlace apunta a una seccin en particular. En segundo lugar, hay que generar un enlace en el destino. Este enlace llevara por nombre abajo para poder distinguirlo de los otros posibles enlaces realizados dentro de la misma pgina. En este caso, la etiqueta que escribiremos ser sta: A decir verdad, estos enlaces, aunque tiles, no son los ms extendidos de cuantos hay. La tendencia general es la de crear pginas (archivos) independientes con tamaos ms reducidos enlazados entre ellos por enlaces locales (los veremos enseguida). De esta forma evitamos el exceso de tiempo de carga de un archivo y la introduccin de exceso de informacin que pueda desviar la atencin del usuario. Una aplicacin comn de estos enlaces consiste en poner un pequeo ndice al principio de nuestro documento donde introducimos enlaces origen a las diferentes secciones. Paralelamente, al final de cada seccin introducimos un enlace que apunta al ndice de manera que podamos guiar al usuario en la bsqueda de la informacin til para l.

Enlaces locales

Este tipo de enlaces nos permiten hacer referencia a archivos dentro del mismo sitio web. Para crear este tipo de enlaces, hemos de crear una etiqueta de la siguiente forma: contenido Por regla general, para una mejor organizacin, los sitios suelen estar ordenados por directorios. Estos directorios suelen contener diferentes secciones de la pgina, imgenes, sonidos...Es por ello que en muchos casos no nos valdr con especificar el nombre del archivo, sino que tendremos que especificar adems el directorio en el que nuestro archivo.html est alojado. 1. Hay que situarse mentalmente en el directorio en el que se encuentra la pgina con el enlace. 2. Si la pgina destino est en un directorio incluido dentro del directorio en el que nos encontramos, hemos de marcar el camino enumerando cada uno de los directorios por los que pasamos hasta llegar al archivo y separndolos por el smbolo barra "/". Al final obviamente, escribimos el archivo. 3. Si la pgina destino se encuentra en un directorio que incluye el de la pgina con el enlace, hemos de escribir dos puntos y una barra "../" tantas veces como niveles subamos en la arborescencia hasta dar con el directorio donde est emplazado el archivo destino. 4. Si la pgina se encuentra en otro directorio no incluido ni incluyente del archivo origen, tendremos que subir como en la regla 3 por medio de ".." hasta encontrar un directorio que englobe el directorio que contiene a la pgina destino. A continuacin haremos como en la regla 2. Escribiremos todos los directorios por los que pasamos hasta llegar al archivo. Ejemplo: Para clarificar este punto podemos hacer un ejemplo a partir de la estructura de directorios de la imagen. Para hacer un enlace desde index.html hacia yyy.html:

contenido Para hacer un enlace desde xxx.html hacia yyy.html: contenido Para hacer un enlace desde yyy.html hacia xxx.html: contenido

Los enlaces locales pueden a su vez apuntar tambin ms precisamente a una seccin concreta. Este tipo de enlaces resultan ser un hbrido de interno y local. La sintaxis es de este tipo: contenido Como para los enlaces internos, en este caso hemos de marcar la seccin con otro enlace del tipo: Enlaces externos Son los enlaces que se dirigen hacia pginas que se encuentran fuera de nuestro sitio web, es decir, cualquier otro documento que no forma parte de nuestro sitio. Este tipo de enlaces es muy comn y no representa ninguna dificultad. Simplemente colocamos en el atributo HREF de nuestra etiqueta la URL o direccin de la pgina con la que queremos enlazar. Ser algo parecido a esto. ir a google.com Slo cabe destacar que todas las direcciones web (URLs) empiezan por http://. Esto indica que el protocolo por el que se accede es HTTP, el utilizado en la web. No debemos olvidarnos de colocarlas, porque si no los enlaces sern tratados como enlaces locales a nuestro sitio.

Enlaces a direcciones de correo

Los enlaces a direcciones de correo son aquellos que al darles clic nos abre un nuevo mensaje de correo electrnico dirigido a una direccin de mail determinada. Estos enlaces son muy habituales en las pginas web y resultan la manera ms rpida de ofrecer al visitante una va para el contacto con el propietario de la pgina. Para colocar un enlace dirigido hacia una direccin de correo colocamos mailto: en el atributo href del enlace, seguido de la direccin de correo a la que se debe dirigir el enlace. [email protected] Consejo: Al colocar enlaces a direcciones de correo se debe procurar indicar en el contenido del enlace (lo que hay entre y ) la direccin de correo a la que se debe escribir. Esto es porque si un usuario no tiene configurado un programa de correo en su ordenador no podr enviar mensajes, pero por lo menos podr copiar la direccin de mail. Adems de la direccin de correo del destinatario, tambin podemos colocar en el enlace el asunto del mensaje. Esto se consigue colocando despus de la direccin de correo un interrogante, la palabra subject, un signo igual (=) y el asunto en concreto. [email protected] Enlaces con archivos Este no es un tipo de enlace propiamente dicho, pero lo sealamos aqu porque son un tipo de enlaces muy habitual. El mecanismo es el mismo que hemos conocido en los enlaces locales y los enlaces remotos, con la nica particularidad de que en vez de estar dirigidos hacia una pgina web est dirigido hacia un archivo de otro tipo. Si queremos enlazar con un archivo mi_fichero.zip que se encuentra en el mismo directorio que la pgina se escribira un enlace as. Descarga mi_fichero.zip Al dar clic al enlace de este tipo nuestro navegador descargar el fichero, haciendo la pregunta tpica de "Qu queremos hacer con el archivo. Abrirlo o guardarlo en disco". https://www.youtube.com/watch?v=mkRZBQZiUps Imgenes Las imgenes son almacenadas en forma de archivos, principalmente GIF (para dibujos) o JPG (para fotos). Estos archivos los podemos obtener desde diversas vas, como por ejemplo nuestra cmara digital, aunque tambin pueden ser creados por nosotros mismos con algn editor grfico o pueden ser descargados gratuitamente en sitios web especializados. La etiqueta que utilizaremos para insertar una imagen es (image). Esta etiqueta no posee su cierre correspondiente y en ella hemos de especificar obligatoriamente el origen de nuestro archivo grfico mediante el atributo src (source). La sintaxis queda entonces de la siguiente forma: Para expresar el camino, lo haremos de la misma forma que vimos para los enlaces. Las reglas siguen siendo las mismas, lo nico que cambia es que, en lugar de una pgina destino, el destino es un archivo grfico. Aparte de este atributo, indispensable obviamente para la visualizacin de la imagen, la etiqueta nos propone otra serie de atributos de mayor o menor utilidad, que listamos a continuacin: Atributos Atributo alt Dentro de las comillas de este atributo colocaremos una brevsima descripcin de la imagen. Esta etiqueta no es indispensable pero presenta varias utilidades. Primeramente, durante el proceso de carga de la pgina, cuando la imagen no ha sido todava cargada, el navegador mostrara esta descripcin, con lo que el navegante se puede hacer una idea de lo que va en ese lugar. Atributos height y width Definen la altura y anchura respectivamente de la imagen en pxeles. Todos los archivos grficos poseen unas dimensiones de ancho y alto. Estas dimensiones pueden obtenerse a partir del propio diseador grfico o bien haciendo clic con el botn derecho sobre la imagen vista por el navegador para luego elegir propiedades sobre el men que se despliega. Atributo border Definen el tamao en pxeles del cuadro que rodea la imagen. De esta forma podemos recuadrar nuestra imagen si lo deseamos. Es particularmente til cuando deseamos eliminar el borde que aparece cuando la imagen sirve de enlace. En dicho caso tendremos que especificar border="0". Atributos vspace y hspace Sirven para indicar el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los otros elementos que la rodean, como texto, otras imgenes, etc. Atributo lowsrc Con este atributo podemos indicar un archivo de la imagen de baja resolucin. Cuando el navegador detecta que la imagen tiene este atributo primero descarga y muestra la imagen de baja resolucin (que ocupa muy poco y que se transfiere muy rpido). Posteriormente descarga y muestra la imagen de resolucin adecuada (sealada con el atributo src, que se supone que ocupar ms y ser ms lenta de transferir). Este atributo est en desuso, aunque supone una ventaja considerable para que la descarga inicial de la web se realice ms rpido y que un visitante pueda ver una muestra de la imagen mientras se descarga la imagen real. Alineacin de imgenes Vimos en su momento el atributo align que nos permita alinear el texto a derecha, izquierda o centro de nuestra pgina. Dijimos que este atributo no era exclusivo de la etiqueta sino que poda ser encontrado en otro tipo de etiquetas. Pues bien, resulta ser una de esas etiquetas que aceptan este atributo aunque en este caso el funcionamiento resulta ser diferente, estos son relativos a la alineacin vertical de la imagen. Supongamos que escribimos una lnea al lado de nuestra imagen. Esta lnea puede quedar por ejemplo arriba, abajo o al medio de la imagen. Asimismo, puede que en una misma lnea tengamos varias imgenes de alturas diferentes que pueden ser alineadas de distintas formas. Estos valores adicionales del atributo align son: top Ajusta la imagen a la parte ms alta de la lnea. Esto quiere decir que, si hay una imagen ms alta, ambas imgenes presentaran el borde superior a la misma altura. bottom Ajusta el bajo de la imagen al texto. Absbottom Colocara el borde inferior de la imagen a nivel del elemento ms bajo de la lnea. middle Hace coincidir la base de la lnea de texto con el medio vertical de la imagen. absmiddle Ajusta la imagen al medio absoluto de la lnea. Tablas Una tabla es un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos. En un principio nos podra parecer que las tablas son raramente tiles y que pueden ser utilizadas principalmente para listar datos como agendas, resultados y otros datos de una forma organizada. Nada ms lejos de la realidad. Pero adems, una tabla nos permite organizar y distribuir los espacios de la manera ms ptima. Nos puede ayudar a generar texto en columnas como los peridicos, prefijar los tamaos ocupados por distintas secciones de la pgina o poner de una manera sencilla un pie de foto a una imagen. Por dnde empezar, nada ms sencillo que por el principio: las tablas son definidas por las etiquetas y . Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e imgenes que darn forma y contenido a la tabla. Las tablas son descritas por lneas de izquierda a derecha. Cada una de estas lneas es definida por otra etiqueta y su cierre: y Asimismo, dentro de cada lnea, habr diferentes celdas. Cada una de estas celdas ser definida por otro par de etiquetas: y . Dentro de estas etiquetas ser donde coloquemos nuestro contenido. Aqu est un ejemplo de estructura de tabla: Celda 1, lnea 1 Celda 2, lnea 1 Celda 1, lnea 2 Celda 2, lnea 2 Podemos especificar el formato de nuestras celdas a partir de etiquetas introducidas en su interior o mediante atributos colocados dentro de la etiqueta de celda o bien, en algunos casos, dentro de la etiqueta , si deseamos que el atributo sea vlido para toda la lnea. La forma ms til y actual de dar forma a las celdas es a partir de las hojas de estilo en cascada. Veamos a continuacin algunos atributos tiles para la construccin de nuestras tablas. Empecemos viendo atributos que nos permiten modificar una celda en concreto o toda una lnea: Align Justifica el texto de la celda del mismo modo que si fuese el de un prrafo. Valign Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda. Bgcolor Da color a la celda o lnea elegida. bordercolor Define el color del borde. Otros atributos que pueden ser nicamente asignados a una celda y no al conjunto de celdas de una lnea son: background Nos permite colocar un fondo para la celda a partir de un enlace a una imagen. height Define la altura de la celda en pixeles o porcentaje. width Define la anchura de la celda en pixeles o porcentaje. colspan Expande una celda horizontalmente. rowspan Expande una celda verticalmente. Ejemplos: Dar una anchura de 80 pixeles a la celda. Sin embargo, Dar una anchura a la celda del 80% de la anchura de la tabla. Hay que tener en cuenta que, definidas las dimensiones de las celdas, el navegador va a hacer lo que pueda para satisfacer al programador. Esto quiere decir que puede que en algunas ocasiones el resultado que obtengamos no sea el esperado. Concretamente, si el texto presenta una palabra excesivamente larga, puede que la anchura de la celda se vea aumentada para mantener la palabra en la misma lnea. Por otra parte, si el texto resulta muy largo, la celda aumentara su altura para poder mostrar todo su contenido. Anlogamente, si por ejemplo definimos dos anchuras distintas a celdas de una misma columna, el navegador no sabr a cual hacer caso. Es por ello que resulta conveniente tener bien claro desde un principio como es la tabla que queremos disear. No est de ms si la pre diseamos en papel si la complejidad es importante. El HTML resulta en general fcil pero las tablas pueden convertirse en un verdadero quebradero de cabeza si no llegamos a comprenderlas debidamente. Los atributos rowspan y colspan son tambin utilizados frecuentemente. Gracias a ellos es posible expandir celdas fusionando stas con sus vecinas. El valor que pueden tomar estas etiquetas es numrico. El nmero representa la cantidad de celdas fusionadas. As, fusionara la celda en cuestin con su vecina derecha. Esta celda tiene un colspan="2"

Celda normal Otra celda

Del mismo modo, expandir la celda hacia abajo fusionndose con la celda inferior. Esta celda tiene rowspan="2", por eso tiene fusionada la celda de abajo. Celda Normal

Otra celda normal

Bordes de Tabla En HTML 4 existen otros atributos para definir cmo queremos que sean los bordes de las tablas. Bordes externos de las tablas El atributo en concreto para definir el tipo de borde externo se llama FRAME y se utiliza en la misma etiqueta TABLE. Sus valores posibles son los siguientes: frame = void | above | below | hsides | lhs | rhs | vsides | box | border Paso a describir cada uno de los distintos valores posibles, que afectan slo al borde externo de la tabla, quedando los bordes de las celdas inalterados: void: Ningn borde externo above: Slo aparece el borde superior below: Slo el borde inferior de la tabla hsides: Se mostrar slo el borde de arriba y abajo. vsides: Slo los bordes de los lados izquierdo y derecho lhs: Se mostrar tan solo el borde izquierdo rhs: Se mostrar solamente el borde derecho box: Los 4 bordes border: Tambin se mostrarn los 4 bordes Veamos un par de ejemplos de uso del atributo FRAME en tablas: Tabla sin bordes externos (frame="void") 1 2 3

4 5 6

7 8 9

Tabla con borde externo arriba y abajo (frame="hsides") 1 2 3

4 5 6

7 8 9

Bordes internos de las tablas Tambin podemos definir el aspecto de los bordes internos de las tablas con HTML 4. El atributo que debemos utilizar para especificar qu bordes internos deben mostrarse es RULES, que tambin se utiliza en la etiqueta TABLE. Como bordes internos nos referimos a los bordes de las celdas de la tabla, puesto que cuando se define un borde en una tabla no slo tiene borde la parte externa de la tabla, sino tambin cada una de sus casillas. Los distintos valores que puede llevar el atributo RULES para definir los bordes internos son los siguientes: rules = none | groups | rows | cols | all Cuya explicacin podemos ver a continuacin: none: No se coloca ningn borde interno groups: Slo se mostrarn bordes n los grupos de columnas o filas. (veremos ms adelante como agrupar columnas o filas rows: Slo aparecern bordes entre filas. cols: Los bordes internos slo aparecern para separar columnas all: Se mostrarn todos los bordes internos Ahora mostramos un par de ejemplos del atributo rules: Sin ningn borde interno (rules="none") 1 2 3

4 5 6

7 8 9

Con borde interno para separar filas (rules="rows") 1 2 3

4 5 6

7 8 9

Formularios Los formularios son bsicamente cajas de texto y botones que podemos encontrar en muchas pginas web. Son muy utilizados para realizar bsquedas o bien para introducir datos personales por ejemplo en sitios de comercio electrnico. Los datos que el usuario introduce en estos campos son enviados al correo electrnico del administrador del formulario o bien a un programa que se encarga de procesarlo automticamente. En este Manual nos limitaremos a explicar la creacin de formulario, la manipulacin de estos datos es alcance de otro curso. Los formularios son definidos por medio de las etiquetas y . Entre estas dos etiquetas colocaremos todos los campos y botones que componen el formulario. Dentro de esta etiqueta debemos especificar algunos atributos. Atributos action Define el tipo de accin a llevar a cabo con el formulario. Como ya hemos dicho, existen dos posibilidades: El formulario es enviado a una direccin de correo electrnico El formulario es enviado a un programa o script que procesa su contenido En el primer caso, el contenido del formulario es enviado a la direccin de correo electrnico especificada por medio de una sintaxis de este tipo: Si lo que queremos es que el formulario sea procesado por un programa, hemos de especificar la direccin del archivo que contiene dicho programa. La etiqueta quedara en este caso de la siguiente forma: method Este atributo se encarga de especificar la forma en la que el formulario es enviado. Los dos valores posibles que puede tomar este atributo son post y get. A efectos prcticos daremos siempre el valor post. enctype Se utiliza para indicar la forma en la que viajar la informacin que se mande por el formulario. En el caso ms sencillo, enviar el formulario por correo electrnico, el valor de este atributo debe de ser "text/plain". As conseguimos que se enve el contenido del formulario como texto plano dentro del email. Elementos de formulario Etiqueta INPUT Las cajas de texto son colocadas por medio de la etiqueta . Dentro de esta etiqueta hemos de especificar el valor de dos atributos: type y name. La etiqueta tendr la siguiente forma: El aspecto de este tipo de cajas es como se muestra a continuacin: Principio del formulario Final del formulario El nombre del elemento del formulario es de gran importancia para poder identificarlo en nuestro programa de procesamiento o en el mail recibido. Por otra parte, es importante indicar el atributo type, ya que, como veremos, existen otras modalidades de elementos de formulario que usan esta misma etiqueta INPUT. size Define el tamao de la caja de texto, en nmero de caracteres visibles. Si al escribir el usuario llega al final de la caja, el texto que escriba a continuacin tambin cabr dentro del campo pero ir desfilando, a medida que se escribe, haciendo desaparecer la parte de texto que queda a la izquierda. maxlength Indica el tamao mximo del texto, en nmero de caracteres, que puede ser escrito en el campo. En caso que el campo de texto tenga definido el atributo maxlength, el navegador no permitir escribir ms caracteres en ese campo que los que hayamos indicado. value En algunos casos puede resultarnos interesante asignar un valor definido al campo en cuestin. Esto puede ayudar al usuario a rellenar ms rpidamente el formulario o darle alguna idea sobre la naturaleza de datos que se requieren. Este valor inicial del campo puede ser expresado mediante el atributo value. Veamos su efecto con un ejemplo sencillo: Genera un campo de este estilo: Pepe Prez

Final del formulario Veremos posteriormente que este atributo puede resultar bastante relevante en determinadas situaciones. Etiqueta INPUT con texto oculto Hay determinados casos en los que podemos desear esconder el texto escrito en el campo INPUT, por medio de asteriscos, de manera que aporte una cierta confidencialidad. Este tipo de campos son anlogos a los de texto, con una sola diferencia: remplazamos el atributo type="text" por type="password": En este caso, podis comprobar que, al escribir dentro del campo, en lugar de texto veris asteriscos. Etiqueta TEXTAREA Si deseamos un campo de texto donde pueda escribir cmodamente sobre un espacio compuesto de varias lneas, hemos de invocar una nueva etiqueta: y su cierre correspondiente. Este tipo de campos son prcticos cuando el contenido a enviar no es un nombre, telfono, edad o cualquier otro dato breve, sino ms bien, un comentario, opinin, etc. en los que existe la posibilidad que el visitante desee rellenar varias lneas. Dentro de la etiqueta textarea deberemos indicar, como para el caso visto anteriormente, el atributo name para asociar el contenido a un nombre que ser asemejado a una variable en los programas de proceso. Adems, podemos definir las dimensiones del campo a partir de los atributos siguientes: rows Define el nmero de lneas del campo de texto. cols Define el nmero de columnas del campo de texto. La etiqueta queda por tanto de esta forma: El resultado es el siguiente: Principio del formulario Final del formulario

Asimismo, es posible predefinir el contenido del campo. Para ello, no usaremos el atributo value, sino que escribiremos dentro de la etiqueta el contenido que deseamos atribuirle. Por ejemplo: Escribe tu comentario.... Dar como resultado: Principio del formulario Escribe tu comentario....

Listas de opciones Las listas de opciones son ese tipo de mens desplegables que nos permiten elegir una (o varias) de las mltiples opciones que nos proponen. Para construirlas emplearemos una etiqueta , con su respectivo cierre: Como para los casos ya vistos, dentro de esta etiqueta definiremos su nombre por medio del atributo name. Cada opcin ser incluida en una lnea precedida de la etiqueta . Podemos ver, a partir de estas directivas, la forma ms tpica y sencilla de esta etiqueta: Primavera Verano Otoo Invierno El resultado es: Principio del formulario Final del formulario Esta estructura puede verse modificada principalmente a partir de otros dos atributos: size Indica el nmero de valores mostrados a la vez en la lista. Lo tpico es que no se incluya ningn valor en el atributo size, en ese caso tendremos un campo de opciones desplegable, pero si indicamos size aparecer un campo donde veremos las opciones definidas por size y el resto podrn ser vistos por medio de la barra lateral de desplazamiento. mltiple Permite la seleccin de ms varios elementos de la lista. La eleccin de ms de un elemento se hace como con el explorador de Windows, a partir de las teclas ctrl o maysculas (la flecha hacia arriba, tambin llamada shift). Este atributo se expresa sin valor alguno, es decir, no se utiliza con el igual: simplemente se pone para conseguir el efecto, o no se pone si queremos una lista desplegable comn. Principio del formulario PrimaveraVeranoOtoo Final del formulario La etiqueta puede asimismo ser matizada por medio de otros atributos selected Del mismo modo que mltiple, este atributo no toma ningn valor sino que simplemente indica que la opcin que lo presenta esta elegida por defecto. As, si cambiamos la lnea del cdigo anterior: Otoo por: Otoo El resultado ser: Otoo

Final del formulario Value Define el valor de la opcin que ser enviado al programa o correo electrnico si el usuario elige esa opcin. Este atributo puede resultar muy til si el formulario es enviado a un programa para su procesamiento, puesto que a cada opcin se le puede asociar un nmero o letra, lo cual es ms fcilmente manipulable que una palabra o texto podramos as escribir lneas del tipo: Primavera Botones de radio Existe otra alternativa para plantear una eleccin, en este caso, obligamos al usuario a elegir nicamente una de las opciones que se le proponen. La etiqueta empleada en este caso es en la cual tendremos el atributo type ha de tomar el valor radio. Veamos un ejemplo: Primavera
Verano
Otoo
Invierno

Nota: Hay que fijarse que la etiqueta slo coloca la casilla en la pgina. Los textos que aparecen al lado, as como los saltos de lnea los colocamos con el correspondiente texto en el cdigo de la pgina y las etiquetas HTML que necesitemos. El resultado es el siguiente: Principio del formulario Primavera Verano Otoo Invierno Final del formulario Como puede verse, a cada una de las opciones se le atribuye una etiqueta input dentro de la cual asignamos el mismo nombre (name) para todas las opciones y un valor (value) distinto. Cabe sealar que es posible preseleccionar por defecto una de las opciones. Esto puede ser conseguido por medio del atributo checked: Verano Veamos el efecto:

Cajas de validacin Este tipo de elementos pueden ser activados o desactivados por el visitante por un simple clic sobre la caja en cuestin. La sintaxis utilizada es muy similar a las vistas anteriormente: Me gusta el arroz El efecto: Principio del formulario Me gusta el arroz Final del formulario La nica diferencia fundamental es el valor adoptado por el atributo type. Del mismo modo que para los botones de radio, podemos activar la caja por medio del atributo checked. Frames Una de las ms modernas caractersticas de HTML son los frames. Los frames -que significan en espaol marcos- son una manera de dividir la pgina en distintos espacios independientes los unos de los otros, de modo que en cada espacio se coloca una pgina fichero HTML distinto. Una de las principales ventajas del uso de frames viene derivada de la independencia de los distintos frames, pues podemos navegar por los contenidos de nuestro web con la barra de navegacin siempre visible, y sin que se tenga que recargar en cada una de las pginas que vamos visitando. Ejemplos de frames, donde cada color es una pgina HTML diferente.

La definicin est compuesta por etiquetas y , con las que se indicamos la disposicin de todos los cuadros. La etiqueta indica las particiones de la ventana del navegador y la etiqueta indica cada uno de los cuadros donde colocaremos una pgina independiente. Atributos Cols y Rows En el atributo COLS o ROWS -slo podemos elegir uno de los dos- colocamos entre comillas el nmero de particiones que deseamos realizar, indicando de paso el tamao que va a asignarse a cada una. Un valor tpico de estos atributos sera el siguiente: cols="20%,80%" Indica que se deben colocar dos columnas, la de la izquierda tendra un 20% del espacio total de la ventana y la de la derecha un 80%. cols="200,600" Para indicar que la columna de la izquierda debe tener 200 pixeles de ancho y la de la derecha 600. cols="200,*" As indicamos que la primera columna ha de medir 200 pixeles y que el resto del espacio disponible -que ser mayor o menor dependiendo de la definicin de la pantalla del usuario- se le asignar a segunda columna. rows="100,*,12%" Definimos tres filas, la primera con 100 pixeles de ancho, la segunda con el espacio que sobre de las otras dos, y la tercera con un 12% del espacio total. cols="10%,50%,120,*" Estamos indicando cuatro columnas. La primera del 10% del espacio de la ventana, la segunda con la mitad justa de la ventana, la tercera con un espacio de 120 pixeles y la ltima con la cantidad de espacio que sobre al asignar espacio a las dems particiones. Etiqueta Frame Una vez hemos indicado el nmero de filas o columnas y el espacio reservado a cada una con la etiqueta , debemos especificar con la etiqueta la procedencia de cada uno de los frames en los que hemos partido la ventana. Para ello, disponemos del atributo SRC, que se ha de definir para cada una de las filas o columnas. De esta manera. As queda indicado que el frame que estamos definiendo debe mostrar la pgina marco1.html en su interior. Un ejemplo completo lo podemos ver en la siguiente imagen: La cual se definira de la siguiente manera:

Definicin de Frames

Utilidad del atributo target Cuando usamos hipervnculos dentro de frames, podemos hacer que el hipervnculo se habr en un marco diferente, para ello debemos: 1. Darle un nombre al frame que deseamos actualizar. Dicho nombre se indica en la etiqueta de la definicin de frames. Para ello utilizamos el atributo name, igualado al nombre que le queremos dar a dicho marco. 2. Dirigir los enlaces hacia ese frame. Para ello debemos colocar en el atributo target de los enlaces -etiqueta - el nombre del frame que deseamos actualizar al pulsar el enlace. Despus de darle un nombre al frame principal, nuestra declaracin de frames quedara de la siguiente manera. Portada | Productos | Contacto

Adems, deberamos colocar el atributo target a los enlaces, tal como sigue. Observa en el cdigo anterior como se relacionan el nombre del marco con el destino de los hipervnculos. Mdulo 2. Hojas de Estilo Introduccin El lenguaje HTML est limitado a la hora de aplicarle forma a un documento. Esto es as porque fue concebido para otros usos (cientficos sobre todo), distinto a los actuales, mucho ms amplios. Para solucionar estos problemas se han utilizado tcnicas tales como la utilizacin de tablas imgenes transparentes para ajustarlas, utilizacin de etiquetas que no son estndares del HTML y otras. Estas soluciones han causado a menudo problemas en las pginas a la hora de su visualizacin en distintas plataformas. Finalmente, otro antecedente que ha hecho necesario el desarrollo de esta tecnologa consiste en que las pginas web tienen mezclado en su cdigo HTML el contenido del documento con las etiquetas necesarias para darle forma. Esto tiene sus inconvenientes ya que la lectura del cdigo HTML se hace pesada y difcil a la hora de buscar errores o depurar las pginas. Utilizacin de CSS Aplicado a travs de la etiqueta span Para definir estilos en secciones reducidas de una pgina se utiliza la etiqueta . Con su atributo style indicamos en sintaxis CSS las caractersticas de estilos. Lo vemos con un ejemplo, pondremos un prrafo en el que determinadas palabras las vamos a visualizar en color verde. Aunque tambin podemos aplicar el atributo style directamente sobre cualquier etiqueta de la pgina. Esto es un prrafo en varias palabras en color verde. Resulta muy fcil.

Que tiene como resultado: Esto es un prrafo con varias palabras en color verde. Resulta muy fcil. Aplicado como atributo de una etiqueta De este modo podemos hacer que toda una etiqueta muestre un estilo determinado. Por ejemplo, podemos definir un prrafo entero en color rojo y otro en color azul. Para ello utilizamos el atributo style, que es admitido por todas las etiquetas del HTML (siempre y cuando dispongamos de un navegador compatible con CSS). Esto es un prrafo de color rojo. Esto es un prrafo de color azul. Que tiene como resultado: Esto es un prrafo de color rojo. Esto es un prrafo de color azul. Aplicado a una capa y todo su contenido Con la etiqueta podemos definir secciones de una pgina y aplicarle estilos con el atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la pgina. Estas etiquetas van en azul y negrita Seguimos dentro del DIV, luego permanecen los estilos

Que tiene como resultado: Estas etiquetas van en azul y negrita Seguimos dentro del DIV, luego permanecen los estilos Aplicado a toda la pgina Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la pgina. Es una manera muy cmoda de darle forma al documento y muy potente, ya que estos estilos sern seguidos en toda la pgina y nos ahorraremos as muchas etiquetas HTML que apliquen forma al documento. Adems, si deseamos cambiar los estilos de la pgina lo haremos de una sola vez. A grandes rasgos, entre de y , se coloca el nombre de la etiqueta que queremos definir los estilos y entre llaves -{}- colocamos en sintaxis CSS las caractersticas de estilos. Ejemplo de estilos para toda una pgina Pagina con estilos Bienvenidos... Primer ejemplo

Como se puede apreciar en el cdigo, hemos definido que la etiqueta se presentar 1. Subrayado 2. Centrada Tambin, por ejemplo, hemos definido que el cuerpo entero de la pgina (etiqueta ) se le aplique los estilos siguientes: Color del texto negro Color del fondo grisceo Margen lateral de 1 centmetro Caber destacar que si aplicamos estilos a la etiqueta , estos sern heredados por el resto de las etiquetas del documento. Esto es as siempre y cuando no se vuelvan a definir esos estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta ms concreta ser el que mande. Puede verse este detalle en la etiqueta , que tiene definidos estilos que ya fueron definidos para . Los estilos que se tienen en cuenta son los de la etiqueta . Aplicado para todo un sitio Web Una de las caractersticas ms potentes de la programacin con hojas de estilos consiste en que, de una vez, podemos definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan slo colocamos las declaraciones de estilos de la pgina y enlazando todas las pginas del sitio con ese archivo. De este modo, todas las pginas comparten una misma declaracin de estilos y, por tanto, si la cambiamos, cambiarn todas las pginas. Con las ventajas aadidas de que se ahorra en lneas de cdigo y se evita la molestia de definir una y otra vez los estilos con el HTML, tal como se coment anteriormente. Veamos ahora cmo el proceso para incluir estilos con un fichero externo. Podemos ver un ejemplo a continuacin. P { font-size : 12pt; font-family : arial,helvetica; font-weight : normal; } H1 { font-size : 36pt; font-family : verdana,arial;

1. Creamos el fichero con la declaracin de estilos. Este es un fichero de texto normal, al que le asignaremos de preferencia la extensin .css. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS. text-decoration : underline; text-align : center; background-color : Teal; } TD { font-size : 10pt; font-family : verdana,arial; text-align : center; background-color : 666666; } BODY { background-color : #006600; font-family : arial; color : White; } 2. Enlazamos la pgina web con la hoja de estilos. Para ello, vamos a colocar

a etiqueta con los atributos rel="STYLESHEET" indicando que el enlace es con una hoja de estilos type="text/css" porque el archivo es de texto, en sintaxis CSS href="estilos.css" indica el nombre del fichero fuente de los estilos Veamos una pgina web entera que enlaza con la declaracin de estilos anterior: Pgina que lee estilos Pgina que lee estilos Esta pgina tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fcil.

Esto est dentro de un TD, luego tiene estilo propio, declarado en el fichero externo La segunda fila del TD

Selectores CSS Para aplicar los estilos podemos hacer uso de los selectores, los cuales nos permiten elegir un elemento (o varios) entre todos los que tenemos en nuestro HTML. Similar al funcionamiento de las expresiones regulares para el texto, los selectores nos permiten usar caracteres especiales para referirnos a un elemento o un rango de los mismos. Ejemplos de selectores: Selector Descripcin

* Selector universal, son todos los elementos del CSS

E E representa cualquier elemento del tipo E (span, p, div, etc.)

E F Todos los elementos F que sean descendentes de E

E > F Todos los elementos F que sean hijos de E

E:first-child De esta forma podemos seleccionar el primer elemento de tipo E

E:link , E:visited Selecciona los elementos E que sean un enlaces y no hayan sido visitados (:link) y los si visitandos (:visited)

E:active , E:hover , E:focus Selecciona los elementos de tipo E , en sus correspondientes acciones.

E + F Se trata de cualquier elemento F inmediatamente despus del elemento del tipo E

E[foo] Elementos del tipo E con el atributo foo

E[foo="ejemplo"] Elementos del tipo E con el atributo foo igual a ejemplo

E[foo~="ejemplo"] Elementos del tipo E con el atributo foo contenga ejemplo. Se pueden aadir varias palabras separadas por espacios. ( ~ =ALT + 0126)

E[lang|="es"] Similar al anterior, pero se referir a todos los elemento E tal que su atributo lang comience por es. Por ejemplo: es_ES, es_CA,

E[foo$="ejemplo"] Elementos del tipo E en el que el atributo foo termine con ejemplo.

DIV.ejemplo Todos los elementos DIV que sean de la clase ejemplo

E#miID El elemento E en el que su ID sea igual miID

Unidades de Medida Dentro de los ejemplos que hemos mencionado nos hemos referido a medidas de longitud dentro de los valores de algunas propiedades. Por ejemplo, los valores de font-size y text-indent. Las unidades de longitud consisten en un nmero seguido de una unidad de medida (cm, em, in, pt, px). Hay dos tipos de unidades: absolutas y relativas. Unidades absolutas: pulgadas (in). Una pulgada=2.54 cm. centmetros (cm). milmetros (mm) puntos (pt). Un punto=1/72 de pulgada. picas (pc). Una pica=12 puntos Unidades relativas em ex px Unidades de procentaje 100% La unidad em es igual a la altura (font-size) de la letra del elemento en el que se usa. Por ejemplo si para un prrafo especificamos un identado de 2em, el largo de la sangra ser igual a dos veces el tamao de la letra de ese prrafo. Cuando empleamos la unidad de medida 'em' para especificar el tamao de la letra (font-size) entonces el valor de 'em' viene dado por el tamao de la fuente del elemento padre. El siguiente ejemplo equivale a un indentado de 22 px para el prrafo a que se aplica p { font-size:11px;text-indent: 2em; } En el siguiente ejemplo, si el prrafo est contenido en un elemento div, el tamao de la letra sera un 20% mayor que el especificado para dicho div. O si no estuviera contenido en un div, un 20% mayor que el tamao de letra del elemento del que descienda (por ejemplo, body). div { font-size:15px;} p { font-size:1.2em;} Es importante mencionar que no hay que dejar espacios en el valor de longitud y la unidad de medida. La siguiente imagen muestre ejemplos ms claros. Respecto a los valores de porcentaje se fijan en relacin a otro. Generalmente, el valor de porcentaje es relativo al tamao de fuente del elemento. Modelo de Caja Cada elemento al cual le aplicamos un estilo, se puede ver como una caja de contenido, con reas circundantes cuyas propiedades pueden ser modificadas, de acuerdo al siguiente modelo.

Margin, border y padding pueden ser divididos en los segmentos left, right, top y bottom (ej., en el diagrama, "LM" para left margin, "RP" para right padding, "TB" para top border, etc.). El siguiente cdigo CSS muestra cmo se puede aprovechar de estas caractersticas del modelo de caja. Estilo1. { margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; border-top: 20px; border-bottom: 20px; } Propiedades de Estilo CSS Formato de prrafo Se pueden aplicar a todos los textos. Para definir un estilo para un texto podemos usar, entre otros, los siguientes atributos: font-family, font-style, font-weight y font-size. La propiedad font-family se usa para determinar la fuente con la que se quiere representar el texto. Se pueden indicar varias de modo que si el visitante no dispone de la primera, se pasa a comprobar la segunda y as sucesivamente hasta encontrar una. De todas formas, si usas fuentes estndar o comunes no debe haber problema, con lo que bastar con poner una o dos solamente. .parrafouno { font-family: Arial,Verdana,Helvetica,sans-serif ; } Se puede observar que cada tipo de fuente est separada por una coma.

Para poner el texto en cursiva se usa la propiedad font-style, cuyo valor es italic para cursivas y normal para el texto normal. .parrafodos { font-style:italic ; } Con la propiedad font-weight definimos el grosor de la letra y puede tomar los valores bold, bolder, 900, 800, ....300, 200, 100 y lighter. El primero es el ms "negrito" y el ltimo el ms grosor ms fino. Un ejemplo para un texto en negrita sera: .textonegrito { font-weight:bold ; } A veces no se diferencian bien los valores muy cercanos (200 y 300 por ejemplo), aunque eso depende del Navegador. Para definir el tamao del texto usaremos la propiedad font-size indicando su valor y sin olvidar las unidades de medida. .selector { font-size : 20px ; } El atributo text-decoration, puede tomar los valores none, overline, underline, through y blink, aunque es conveniente comprobarlos, pues algunos no funcionan correctamente en determinados Navegadores que no siguen correctamente las indicaciones de CSS (de las Hojas de Estilo). none es el valor por defecto e indica que no se representar el texto con ningn tipo de decoracin. overline mostrar una lnea por encima del texto escogido. underline representa el texto subrayado. through tacha el texto y blink lo muestra parpadeante, cuando al navegador le da la gana, por cierto. Un texto tachado y de color rojo se podra definir con: .textotachado { text-decoratin:through ; color:red ; } Para mostrar un texto alineado podemos usar la propiedad text-align que puede

tomar los valores left, right, justify o center que lo alinearn respecto al lugar donde se encuentre dicho texto. La forma de definirlo es, por ejemplo: .parrafojustificao { text-align:justify ; } Para definir un prrafo con la primera lnea un poco metida hacia dentro (sangra) se puede hacer con la propiedad text-indent, cuyo valor hay que especificar con unidades de medida por ejemplo: p { text-indent:50px ; } Formato de color Color de texto Mediante la propiedad color se define el color del texto de un elemento. El color se forma de la misma manera como se defini en la Seccin color del Mdulo 1 HTML. Para crear un estilo caracterizado por un color de texto rojo, llamado por ejemplo textorojo, escribiramos: .textorojo { color:red ; } Expresado de otra manera: .textorojo { color:#FF0000;} Color de fondo Para definir el color de fondo de utiliza la propiedad background-color, la cual aplica el color al elemento al que se aplica. Si se aplica por ejemplo a BODY, corresponder al color de fondo de la pgina. Si se aplica a una celda, ser el del fondo de la celda, etc. Esta propiedad se define de la siguiente manera: .selector { background-color:red ; } El valor de la propiedad background-color se indica de la misma manera que el color del texto. As, para hacer que las pginas tengan un color de fondo amarillo, redefiniramos la etiqueta de la siguiente manera: BODY { background-color:yellow ; } Imagen de Fondo Es similar a los ejemplos de color de fondo, pero en lugar de indicar un color de fondo, indica una imagen de fondo. La Regla CSS para esta propiedad es: .selector {background-image:url(rutadelaimagen); } En donde rutadelaimagen, tendremos que indicar la ruta del archivo de la imagen que queremos que aparezca de fondo. Por ejemplo, si queremos que en todas las pginas de nuestra web aparezca una imagen de fondo dada por el archivo fondo1.jpg que est en la carpeta "imagenes" que hay en la carpeta donde se encuentran esas pginas, pondramos lo siguiente: BODY { background-image:url("imagenes/fondo1.jpg"); } Lo mismo podemos hacer para una tabla o para una celda. En esos casos en lugar de BODY pondramos las etiquetas de la Tabla o de la Celda, que son TABLE y TD respectivamente. Propiedades de bordes Estas propiedades nos permiten definir el grosor que queremos que tenga el borde de una imagen o de una celda, o incluso de un prrafo. El atributo para definir el grosor de borde de un elemento es border-width y utiliza unidades de medida como las ya comentadas, aunque suele emplearse el pixel (px). Este atributo define el ancho de los cuatro lados que rodean el elemento en cuestin, pero si queremos definir distintos bordes para cada uno de los lados podemos usar los atributos: border-top-width: que define el grosor del borde de arriba. border-bottom-width: para el grosor del borde de abajo border-left-width: para el izquierdo border-right-width: para el derecho. De manera rpida border-width se usa para poner el mismo grosor a los cuatro costados. Si queremos que uno de ellos no se vea simplemente le ponemos un grosor nulo, es decir, cero. Veamos un ejemplo. Si queremos que las celdas de todas las tablas de mi web aparezcan con bordes superior e inferior de 10 pixeles de grosor y de 20 por los lados, con un color de fondo negro y color de texto blanco, se utilizar el siguiente cdigo: td { border-top-width:10px; border-bottom-width:10 px ; border-left-width:20px ; border-right-width:20px ; background-color:black ; color:white ; } Tambin podemos definir el color de ese borde mediante el atributo border-color. En cuanto al estilo del borde, se define mediante el atributo border-style y puede tomar los siguientes valores: solid, inset, groove, outset y double. Mdulo 3. Herramientas de diseo. Introduccin a Dreamweaver Dreamweaver CS5 es un software fcil de usar que permite crear pginas web profesionales. Las funciones de edicin visual de Dreamweaver CS5 permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos Javascript, etc., de una forma muy sencilla y visual. Las Barras La barra de ttulo La barra de ttulo contiene el nombre del programa (Macromedia Dreamweaver CS5) y seguidamente el nombre del documento que aparecer en el explorador y entre parntesis, su ubicacin y el nombre del archivo en formato html. En el extremo de la derecha estn los botones para minimizar, maximizar/restaurar y cerrar. La barra de mens La barra de mens contiene las operaciones de Dreamweaver, agrupadas en mens 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 mens, pero para algunas es preferible o indispensable hacerlas desde los paneles. La barra de herramientas estndar

La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las operaciones ms 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 estndar. 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 ). Tambin nos es posible alternar entre los modos de seleccin, mano (para arrastrar la pgina), 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 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. A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los ms importantes. El inspector de Propiedades El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma ms frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrar el tipo de fuente, la alineacin, si est en negrita o cursiva, etc. Pulsando sobre el botn se despliega para mostrar ms opciones. Este botn se encuentra en la esquina inferior-derecha. 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 estn clasificados segn su categora: tablas, texto, objetos de formulario, etc. 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 Las vistas son una parte muy importante para comprender el funcionamiento de Dreamweaver, ya que desde ellas podemos manipular muy rpidamente nuestra pgina HTML. Puedes cambiar la vista del documento a travs de la barra de herramientas de documento. La vista Diseo

La vista Diseo permite trabajar con el editor visual. Es la vista predeterminada de

Dreamweaver y la que se suele utilizar habitualmente. La vista Cdigo

La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo fuente. No permite tener directamente una referencia visual de cmo va quedando el documento segn se va modificando el cdigo. La vista Cdigo y Diseo

La vista Cdigo y Diseo permite dividir la ventana en dos zonas. La zona superior muestra el cdigo 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. Creacin de un Sitio en Dreamweaver Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas 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 imgenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local. Despus se podrn 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. La organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los vnculos de forma automtica, utilizar FTP para cargar el sitio local en el servidor, etc. Es conveniente que la pgina inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una pgina con ese nombre cuando se intenta acceder a una URL genrica. Una vez creadas las carpetas que formarn un sitio local, ya es posible definir el sitio en Dreamweaver. Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios.... Recuerda que a travs del panel Archivos, pestaa Archivos, se puede acceder a cada uno de los sitios creados y a la opcin Administrar sitio. En el caso de haber seleccionado la opcin 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 opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la misma ventana en la que definir las caractersticas del sitio. Las caractersticas del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda. Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo clic en ella. Vamos a ver los datos que hay que editar para la categora Datos locales. Debe definirse el Nombre del sitio y la Carpeta raz local, que es en la que se encuentra el sitio dentro del disco duro local. Estas tres caractersticas son las imprescindibles para definir un sitio local. Las dems opciones en este

desarrollo de páginas web_lenguaje_html

Documents