Escolar Documentos
Profissional Documentos
Cultura Documentos
Dragn Systems
Qu es HTML.El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las pginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que est compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no slo se compone de texto, puede contener imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las pginas web). Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios las pginas web resultantes del cdigo interpretado.
Versiones de HTMLEn noviembre de 1995 se aprob el estndar HTML 2.0. para la creacin de pginas web. Se cre con objetivos divulgativos, orientado a la actividad acadmica, en el que el contenido de las pginas era ms importante que el diseo. Pero esta versin del HTML careca de muchas herramientas que permitieran controlar el diseo de las pginas y aadir contenido multimedia, por lo que Netscape (cuyos navegadores eran los ms utilizados por aquellos aos) comenz a incluir nuevas etiquetas que no existan en el estndar. El comit encargado de establecer los estndares dentro de Internet, comenz a trabajar en el borrador de una nueva versin de HTML, el borrador de HTML 3.0. Pero este borrador result demasiado extenso, al intentar incluir numerosos nuevos atributos para etiquetas ya existentes, y la creacin de otras muchas etiquetas nuevas. Por ello, no fue bien aceptado por el mercado y varias compaas se unieron para formar un nuevo comit encargado de establecer los estndares del HTML. Este comit pas a llamarse W3C. En enero de 1997 se aprob el estndar HTML 3.2. Este nuevo estndar inclua las mejoras proporcionadas por los navegadores Internet Explorer y Netscape Navigator, que ya haban realizado extensiones sobre el estndar HTML 2.0. En diciembre de 1997 se aprob el estndar HTML 4.0, creado para estandarizar los marcos (frames), las hojas de estilo y los scripts. En septiembre de 2001 se aprob el estndar HTML 4.01.
Los navegadores. Compatibilidad.Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el cdigo HTML de la pgina que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma pgina de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador. Los navegadores de hoy en da pretenden ser compatibles con la ltima versin de HTML. Es necesario realizar extensiones de los navegadores para que puedan ser compatibles con esta ltima versin. Dos de los navegadores que continuamente estn realizando extensiones son Internet Explorer y Netscape Navigator, que realizan extensiones incluso antes de que se establezcan los estndares, intentando incluir las nuevas funciones incluidas en los borradores. Los navegadores tienen que ser compatibles con la ltima versin HTML para poder interpretar el mayor nmero posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretenda la etiqueta no queda reflejado en la pgina.
Dragn Systems
I. S. T.
MPB
Uno de los retos de los diseadores de pginas web es hacer las pginas ms atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el mayor nmero de internautas vean sus pginas tal como las ha diseado.
Editores.Un editor es un programa que nos permiten redactar documentos. Hoy en da existen un gran nmero de editores que permiten crear pginas web sin la necesidad de escribir ni una sola lnea de cdigo HTML. Estos editores disponen de un entorno visual, y generan automticamente el cdigo de las pginas. Al poder ver en todo momento cmo quedar la pgina en el navegador, se facilita la creacin de las pginas, y el uso de mens permite ganar rapidez. Estos editores visuales pueden generar en ocasiones cdigo basura, es decir, cdigo que no sirve para nada, en otras ocasiones puede ser ms efectivo corregir directamente el cdigo por lo que resulta necesario saber HTML para poder depurar el cdigo de nuestra pginas. Algunos de los editores visuales con los que podrs crear tus pginas web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos.
Es aconsejable comenzar utilizando una herramienta lo ms sencilla posible, para tener que insertar nosotros mismos el cdigo HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algn editor visual posteriormente, y depurar el cdigo cuando fuera necesario. Para crear pginas web escribiendo directamente el cdigo HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows.A lo largo de este curso vamos a trabajar con el Bloc de notas para crear nuestras pginas, ya que se trata de un editor de textos muy sencillo de manejar, que nos permitir crear pginas a travs del cdigo HTML.
Etiquetas.Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. Dragn Systems Lic. Pariona Quispe, Teodosio 3
<p..>.: <p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.istbellido.edu.pe</font></p>
Bienvenidos a www.istbellido.edu.pe
Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado por la etiqueta <p..>, antes de cerrar esta etiqueta hemos puesto la <font..> por lo que antes de cerrar la etiqueta <p..> debemos cerrar la etiqueta etiqueta <font..>.
Mi primera pgina.Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes dirigirte al men Inicio, Programas, Accesorios, opcin Bloc de notas. Seguidamente introduce, en el documento en blanco, el texto siguiente: <html> <head> <title>MI PRIMERA PAGINA</title> <body bgcolor="#FFCC99"> <font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font> </body> </html>
Dragn Systems
Guarda el documento con la extensin htm, con el nombre miprimpag.htm. Puedes guardarlo a travs del men Archivo, opcin Guardar. Pulsando dos veces sobre el icono del archivo miprimpag.htm, ste debera abrirse automticamente en el navegador que tengas instalado en tu ordenador. El navegador deber mostrar una pgina como la del imagen.
Si observas la barra de ttulo del navegador, vers que el ttulo de la pgina es MI PRIMERA PAGINA. Este ttulo ha sido establecido por la lnea <title>MI PRIMERA PAGINA</title>. El color de fondo de la pgina ha sido establecido por la lnea <body bgcolor="#FFCC99">. El texto Hola, estoy haciendo pruebas. se ha insertado a travs de lnea <font color="#CC3300"
Identificador del tipo de documento <html>.Todas las pginas web escritas en HTML tienen que tener la extensin html o htm. Al mismo tiempo, tienen que tener las etiquetas <html> y </html>. Entre las etiquetas <html> y </html> estar comprendido el resto del cdigo HTML de la pgina. Ejemplo: <html> ... </html>
Cabecera de la pgina <head>.La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el ttulo.
Dragn Systems
<html>.
Ejemplo: <html> <head> ... </head> ... </html> Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y ms se utilizan son: <link>, <style>, <script> (estas etiquetas las veremos ms adelante).
Ttulo de la pgina <title>.El ttulo de la pgina es el que aparecer en la parte superior de la ventana del navegador, cuando la pgina est cargada en l. Para asignar un ttulo a una pgina es necesario escribir el texto deseado entre las etiquetas <title> y
</title>.
Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>. Ejemplo: <html> <head> <title> Curso de HTML </title> </head> ... </html>
Cuerpo del documento <body>.El cuerpo del documento contiene la informacin propia del documento, es decir lo que queremos que se visualice, el texto de la pgina, las imgenes, los formularios, etc. Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que van justo debajo de la cabecera. Ejemplo: <html> <head> <title> Curso de HTML </title> </head> <body> ... </body> </html> A travs de la etiqueta <body> es posible establecer el color o la imagen de fondo de la pgina.
Dragn Systems
Caracteres especiales y espacios en blanco.Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. Si se desea insertar estos caracteres como texto hay que escribir el nombre que los representa:
Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en blanco seguidos slamente se mostrar uno en el navegador. Para conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos por . Ejemplo, para insertar el texto:
Comentarios.En ocasiones podemos desear aadir comentarios aclaratorios dentro del cdigo, de manera que no sean visualizados en el navegador, pero s a la hora de editar el documento. Para insertar comentarios dentro del cdigo, basta con insertar el texto entre <!-- y //-->. Dragn Systems Lic. Pariona Quispe, Teodosio 8
<!-- A continuacin aparecer una lnea de texto//--> ¡Bienvenidos, esta es mi 1ª página!
Saltos de lnea <br>.En general, cuando trabajamos con un editor de texto se produce un salto de lnea al pulsar la tecla INTRO. Si pulsamos INTRO en un documento HTML, el salto de lnea se producir en el cdigo, pero no se mostrar en el navegador. Para que se produzca el salto de lnea en el navegador, en lugar de pulsar la tecla INTRO hay que insertar la etiqueta <br> donde se desee que se produzca el salto. La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br> despus de ella, ya que dicha etiqueta no existe. Ejemplo, para insertar el texto:
Queridos usuarios, tengo el placer de comunicaros que hay una nueva seccin.
Habra que escribir:
Texto preformateado <pre>.Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del cdigo, es utilizando las etiquetas <pre> y </pre>. Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarn todos los espacios en blanco que se inserten en el texto, as como todos los saltos de lnea resultantes de pulsar la tecla INTRO, sin la necesidad de utilizar la etiqueta <br>. Ejemplo, para insertar el texto:
Hola, esta
Dragn Systems
Separadores <hr>.El elemento que suele utilizarse para separar secciones dentro de una misma pgina es la regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre. Es posible especificar algunos atributos de la regla horizontal: Atributo-Significado-Posibles valores
align-alineacin de la regla dentro de la pgina-left (izquierda) right (derecha) center (centro) width-ancho de la regla-un nmero, acompaado de % cuando se desee que sea en porcentaje size-alto de la regla-un nmero noshade-eliminar el sombreado de la regla-no puede tomar valores
Inicio
Bienvenidos a mi pgina.
Habra que escribir:
Sangrado de texto <blockquote>.La sangra es una especie de margen que se establece a ambos lados del texto. Para que un texto aparezca sangrado, se inserta entre las etiquetas <blockquote> y </blockquote>. Esta etiqueta en un principio se defini para delimitar citas pero que como la mayora de los navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se ha generalizado. El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva lnea. Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los mrgenes sean mayores. Ejemplo, para insertar el texto:
Queridos usuarios, tengo el placer de comunicaros que hay una nueva seccin.
Habra que escribir:
Queridos usuarios,
<blockquote> <blockquote> tengo el placer de comunicaros que hay una nueva sección.
Dragn Systems
10
face-fuente-nombre de la fuente, o fuentes color-color del texto-nmero hexadecimal o texto predefinido size-tamao del texto-valores del 1 al 7, siendo por defecto el 3,
o desplazamiento respecto al tamao por defecto, aadiendo + o - delante del valor Ejemplo, para insertar el texto:
Bienvenidos a www.istbellido.edu.pe
Habra que escribir: <font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.istbellido.edu.pe</font> Tambin es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta
Ejemplo:
<body> <basefont color="#006699" size="4" face="Arial"> ... Este cdigo hara que la fuente del documento fuera por defecto de color azul, de tamao 4 y Arial. Si despus de indicar la etiqueta <basefont> o <font>, el navegador encuentra otra etiqueta <font>, la que prevalece es siempre la ltima que se encuentra.
Resaltado del texto <b> ...Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse segn vayan asociados al tipo de letra o a la informacin que represente el texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto. A continuacin se muestran algunas etiquetas asociadas al tipo de letra:
Etiqueta-Significado-Ejemplo
<b>-negrita-curso HTML SoftDragon <i>-cursiva-curso HTML SoftDragon <u>-subrayado-curso HTML SoftDragon <s>-tachado-curso HTML SoftDragon <tt>-teletipo (mquina de escribir)-curso HTML SoftDragon <big>-aumenta el tamao de la fuente-curso HTML SoftDragon <small>-disminuye el tamao de la fuente-curso HTML SoftDragon
A continuacin se muestran algunas etiquetas asociadas al tipo de informacin: Dragn Systems Lic. Pariona Quispe, Teodosio 11
<cite>-cita-curso HTML SoftDragon <code>-ejemplo de cdigo-curso HTML SoftDragon <dfn>-definicin-curso HTML SoftDragon <del>-eliminado<em>-nfasis-curso HTML SoftDragon <ins>-insertado-curso HTML SoftDragon <kbd>-teclado-curso HTML SoftDragon <samp>-muestra-curso HTML SoftDragon <strong>-destacado-curso HTML SoftDragon <sub>-subndice-curso HTML SoftDragon <sup>-superndice-curso HTML SoftDragon <var>-variable-curso HTML SoftDragon
Las etiquetas ms utilizadas son las asociadas al tipo de letra, ya que son ms fciles de recordar, y en muchos casos los resultados son los mismos que los de aplicar una etiqueta diferente. Ejemplo, el resultado de aplicar las etiquetas <b> y <strong> es el mismo. Incluso a veces algunos estilos asociados al tipo de informacin pueden representarse de forma distinta segn el navegador. Ejemplo, para insertar el texto:
Bienvenidos a www.istbellido.edu.pe
Habra que escribir: <font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a <b><u><tt>www.istbellido.edu.pe</tt></u></b></font>
Prrafos <p> ...El texto de una pgina puede agruparse en prrafos. Para ello, el texto de cada uno de los prrafos debe insertarse entre las etiquetas <p> y </p>. No es necesario insertar la etiqueta <br> para que un nuevo prrafo aparezca debajo del anterior, ya que las etiquetas <p> y </p> hacen que se cambie de lnea automticamente. Tambin es posible cambiar la alineacin del texto de cada prrafo. Para ello se modifica el valor del atributo
align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado).
Ejemplo, para insertar el texto:
Bienvenidos a mi pgina.
Habra que escribir:
<center>Bienvenidos a mi página.</center>
Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el cambio de lnea (como en el caso de <p> y <div>), son las etiquetas <span> y </span> volveremos a hablar de estas etiquetas cuando veamos las hojas de estilo.
Encabezados <h1> ...Existen una serie de encabezados que suelen utilizarse para establecer ttulos dentro de una pgina. La diferencia entre los distintos tipos de encabezado es el tamao de la letra, el tipo de resaltado, y la separacin existente entre el texto y los elementos que tiene encima y debajo de l. Hay que tener en cuanta que el navegador del usuario es el que aplicar el estilo del encabezado por lo que el mismo ttulo se puede visualizar de forma diferente segn el navegador. Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una etiqueta de cierre. A continuacin se muestran los distintos encabezados existentes:
Etiqueta-Ejemplo
<H1><H2>-
Ttulo 1: HTML
Ttulo 2: HTML
3: HTML
<H3>-Ttulo
Para todas estas etiquetas es posible especificar el valor del atributo align. Ejemplo, para insertar el texto:
Dragn Systems
13
El lenguaje HTML
Las etiquetas
Habra que escribir: <H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4>
Marquesinas <marquee>.Las marquesinas son lneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de lnea. Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varen. A travs del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez). A travs del atributo direction puede modificarse la direccin en la que se mover el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha). Tambin es posible establecer un color de fondo, a travs del atributo bgcolor. Ejemplo, para insertar la siguiente marquesina:
Hiperenlace <a>.Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo. Aquellos elementos (texto, imgenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>. A travs del atributo href se especifica la pgina a la que est asociado el enlace, la pgina que se visualizar cuando el usuario haga clic en el enlace. Ejemplo, para insertar el enlace:
Visita www.istbellido.edu.pe
Habra que escribir: <a href="http://www.istbellido.edu.pe">Visita www.istbellido.edu.pe</a>
Dragn Systems
14
Tipos de referencias.Existen diferentes formas de expresar una referencia a una pgina a travs del atributo href. Referencia absoluta: Conduce a una ubicacin externa al sitio en el que se encuentra el documento. La ubicacin es en Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de la pgina. Si no se escribe el nombre de la pgina se cargar la pgina de inicio asociada al dominio. Ejemplo, "http://www.istbellido.edu.pe" tendr el mismo efecto que "http://www.istbellido.edu.pe/index.htm " Para insertar el enlace:
Visita www.istbellido.edu.pe
Habra que escribir:
Dragn Systems
15
Destino del enlace.El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, se especifica a travs del atributo target al que se le puede asignar los siguientes valores:
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador. No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de destino, ya que se volvern a ver en el tema de Marcos. De momento slo te interesa retener la opcin _blank y _self. Para insertar el enlace:
Dragn Systems
16
Formato de los enlaces.En general, un texto que tiene un vnculo asociado suele aparecer subrayado. Cuando el vnculo est definido sobre una imgen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vnculo est definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona. Aqui tienes dos vnculos similares de ejemplo:
http://www.gatos.com/
Como puedes ver, la segunda imagen que hace de vnculo contiene un recuadro alrededor. Esto ocurre debido a que se ha establecido un borde para la imagen, como veremos ms adelante. Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vnculo. Suele adquirir la apariencia de una mano sealando. Normalmente los vnculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el puntero del ratn se posiciona sobre l, estos cambios estn predefinidos en cada navegador, pero nosotros podemos cambiar esos colores. Los colores de los vnculos pueden especificarse a travs de las propiedades de la pgina, en la etiqueta
<body>. Estos colores se asignan a travs de los atributos link (vnculo), alink (vnculo activo), y vlink
(vnculo visitado).
link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez). alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado). vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).
Ejemplo, al insertar el siguiente cdigo: ... <body link="#FF0000" vlink="#FF0099" alink="#FF9900"> ... <a href="http://www.istbellido.edu.pe" target ="_blank">www.istbellido.edu.pe</a> ... Mientras no se visite la pgina www.istbellido.edu.pe, el enlace ser de color rojo (#FF0000):
www.istbellido.edu.pe
Mientras la pgina www.istbellido.edu.pe sea la ltima visitada, el enlace ser de color fucsia (#FF0099):
www.istbellido.edu.pe
Cuando se haya visitado la pgina www.istbellido.edu.pe, el enlace ser de color naranja (#FF9900):
www.istbellido.edu.pe
Puntos Cuando se tienen documentos extensos, divididos en varios apartados, es preferible poder ir directamente al apartado deseado, en lugar de ir al comienzo del documento.
Para ello se utilizan las anclas, o puntos de fijacin, muy tiles a la hora de crear ndices. Dragn Systems Lic. Pariona Quispe, Teodosio 17
Enlace al ancla
Habra que escribir: <a href="t_4_3.htm#miancla">Enlace al ancla</a> Si pulsas sobre el enlace vers como se vuelve a cargar el documento actual, pero en lugar de cargarse desde el principio, la primera lnea de texto ser la lnea en la que hemos insertado el ancla. Cuando el ancla se encuentra en el mismo documento que el enlace, como ocurre en este caso, podemos prescindir de poner el nombre de la pgina en el atributo href. En el ejemplo anterior podramos haber escrito: <a href="#miancla">Enlace al ancla</a>
Otros tipos de enlaces.Existen otros tipos de enlaces que no conducen a otra pgina web, los veremos a continuacin: Correo electrnico: Abre la aplicacin Outlook Express para escribir un correo electrnico, cuyo destinatario ser el especificado en el enlace. Para ello la referencia del vnculo debe ser "mailto:direcciondecorreo". Ejemplo, para insertar un enlace que permita enviar un correo electrnico a SoftDragon, tal como este:
Dragn Systems
18
El navegador reconoce algunas extensiones como asociadas a un determinado programa (Ejemplo la extensin .doc est asociada al programa Word, .pdf al programa Acrobar Reader, .xls al programa Excel...) en este caso en el cuadro de dilogo aparece una nueva opcin, la de abrir el fichero sin descargarlo en el disco duro del usuario. Para nombrar el fichero podemos utilizar segn el caso, una referencia externa, una referencia relativa al sitio o una referencia relativa al documento. Ejemplo, en la carpeta donde se encuentra esta pgina tenemos el fichero Word carta.doc y queremos que nuestros visitantes puedan visualizar e incluso descargar el fichero en su disco duro, en este caso definiremos el enlace:
vinculo vacio
Habra que escribir: <a href="#">vinculo vacio</a>
Imagen <img>.Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su apariencia, o dotarla de una mayor informacin visual. Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a travs del atributo src. Ejemplo, para insertar la siguiente imagen:
Texto alternativo.Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen. Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt. Ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente cdigo:
El texto alternativo se muestra tambin al situar el puntero sobre la imagen. Si sitas el puntero sobre la imagen durante unos segundos, vers como aparece el texto Imagen gato.
Dragn Systems
20
Borde de una imagen.En general, al visualizar una pgina en un navegador las imgenes aparecen sin ningn borde alrededor, pero es posible establecer uno a travs del atributo border. El atributo border puede tomar valores numricos, que indican el grosor en pxeles del borde. Ejemplo, para insertar la siguiente imagen con borde:
Tamao de una imagen.Cuando insertamos una imagen, esta se muestra en los navegadores con su tamao original, pero por diversos motivos puede interesarnos modificar dicho tamao. A travs de los atributos width (anchura) y height (altura) puede modificarse el tamao de la imagen. Dicho cambio de tamao no se aplica directamente sobre el archivo de imagen, sino que lo que vara es la visualizacin de la imagen en el navegador. El valor que pueden tomar los atributos width y height ha de ser un nmero, acompaado de % cuando se desee que sea en porcentaje con respecto a la pgina. Ejemplo, para insertar la siguiente imagen (cuyo tamao original era de 122 pxeles de anchura y 71 pxeles de altura) con 200 pxeles de anchura y 80 pxeles de altura:
Dragn Systems
21
Tabla <table>.Las tablas estn formadas por celdas, que son los recuadros que se obtienen como resultado de la interseccin entre una fila y una columna.
COLUM NA
FILA
CELDA
Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habr que especificar las filas y columnas que formarn la tabla.
Fila <tr>.Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas debern insertarse entre las etiquetas <table> y </table>. Ejemplo, para crear una tabla con cinco filas escribiramos: <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table>
Columna o celda <td>.Para crear una tabla no basta con especificar el nmero de filas, es necesario tambin especificar el nmero de columnas. Una celda es el resultado de la interseccin entre una fila y una columna, por lo que podremos especificar el nmero de celdas por fila, que equivale a especificar el nmero de columnas por fila. Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habr que insertar esas etiquetas entre las etiquetas <tr> y </tr>. Entre las etiquetas <td> y </td> se podr especificar el contenido de cada una de las celdas. Ejemplo, para insertar la siguiente tabla:
Sabado Curso HTML Domingo Curso Dreamweaver
Dragn Systems
22
Formato de la tabla.Es posible modificar los siguientes atributos de una tabla: Atributo Significado ancho de la tabla altura de la tabla espacio entre el contenido de las celdas y el borde espacio entre celdas grosor del borde alineacin de la tabla dentro de la pgina color de fondo imagen de fondo color del borde Posibles valores un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero un nmero un nmero
Ejemplo, para modificar la tabla de la pgina anterior para que quedase como la siguiente: Sabado Curso HTML Curso Frontpage Habra que escribir: <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> ... </table> Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y vers que el ancho de la tabla vara para ocupar siempre la mitad de la ventana), que el borde (border) tiene un grosor de dos pxeles (es ms ancho que las separaciones internas de la tabla que tienen grosor 1), que la tabla est alineada al centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99). Dragn Systems Lic. Pariona Quispe, Teodosio 23 Domingo Curso Dreamweaver Curso Flash
Formato de las celdas.Es posible modificar los siguientes atributos de una celda: Atributo Significado ancho de la tabla altura de la tabla alineacin horizontal del contenido de la celda alineacin vertical del contenido de la celda color de fondo imagen de fondo color del borde Posibles valores un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero, acompaado de % cuando se desee que sea en porcentaje left (izquierda) right (derecha) center (centro)
Tambin es posible modificar estos atributos de toda una fila, especificndolos en la etiqueta <tr>, en lugar de en la etiqueta <td>. Hay que tener en cuenta que los atributos tienen ms prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen ms prioridad los atributos establecidos para una fila que los establecidos para toda la tabla. Ejemplo, si escribiramos el siguiente cdigo: <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> <tr align="center" bgcolor="#0099CC"> <td>Sabado</td> <td bgcolor="#66CC99">Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table> Obtendramos la siguiente tabla:
Sbado Curso HTML Curso Frontpage Domingo Curso Dreamweaver Curso Flash
Se ha establecido el color naranja como fondo de toda la tabla, pero con la lnea de cdigo <tr align="center" bgcolor="#0099CC"> se ha establecido el color azul como color de fondo de la primera fila, por lo que dicha fila se mostrar de color azul, y no de color naranja. Al mismo tiempo, se ha cambiado el color de la segunda celda de la primera fila por el color verde, a travs de la lnea <td Dragn Systems Lic. Pariona Quispe, Teodosio
24
Encabezado de columna <th>.Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos poner en su lugar las etiquetas <th> y </th>. Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o ttulos de las columnas. Ejemplo, si escribiramos el siguiente cdigo: <table width="50%" border="1" align="center"> <tr> <th>Sabado</td> <th>Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table> Obtendramos la siguiente tabla:
Sbado Curso HTML Curso Frontpage Domingo Curso Dreamweaver Curso Flash
Ttulo de tabla <caption>.No solamente es posible establecer ttulos para las columnas, tambin es posible establecer un ttulo para la tabla mediante las etiquetas <caption> y </caption>. Estas etiquetas han de ir despus de la etiqueta <table>, y puede especificarse el valor de los atributos align (con los valores bottom, center, left, right y top) y valign (con los valores bottom y top). Ejemplo, si escribiramos el siguiente cdigo: <table width="50%" border="1" align="center"> <caption align="right" valign="top">Titulo de la tabla <tr> <tr> <th>Sabado</td> ... </tr> </table>
Dragn Systems
25
El ttulo aparece ajustado a la margen derecho de la tabla (align="right") y encima de la tabla (valign="top").
Combinar celdas.Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas. A travs del atributo colspan se especifica el nmero de columnas por las que se extender la celda, y a travs del atributo rowspan se especifica el nmero de filas por las que se extender la celda. Para que quede ms claro, vamos a ver un ejemplo de su uso. Ejemplo, para insertar la siguiente tabla: DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE DIFERENCIAS Duracin crecimiento Tiempo de gestacin Duracin de vida del pelo/cabello Habra que escribir el siguiente cdigo: <table width="575" border="2" cellspacing="2"> <tr align="center" valign="middle"> <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th> </tr> <tr align="center" valign="middle"> <th rowspan="2">DIFERENCIAS</th> <th colspan="2">PERRO</th> <th rowspan="2">HOMBRE</th> </tr> <tr align="center" valign="middle"> <th>PEQUEÑO</th> <th>GRANDE</th> </tr> <tr align="center" valign="middle"> <td>Duración crecimiento</td> <td>10 meses</td> <td>18 a 24 meses</td> <td>16 años</td> </tr> <tr align="center" valign="middle"> <td>Tiempo de gestación</td> <td colspan="2">58 a 63 días</td> <td>9 meses</td> </tr> <tr align="center" valign="middle"> <td>Duración de vida del pelo/cabello</td> <td colspan="2">1 año</td> <td>2 a 7 años</td> </tr> </table> Dragn Systems Lic. Pariona Quispe, Teodosio 26 PERRO PEQUEO 10 meses GRANDE 18 a 24 meses 1 ao HOMBRE 16 aos 9 meses 2 a 7 aos
58 a 63 das
Conjunto de marcos <frameset>.Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras que otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la apariencia. Cada uno de los marcos de una pgina, contiene un documento HTML individual. Ejemplo, en la imagen de la derecha puedes ver una pgina con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento perros.htm. Para poder visualizar la pgina 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.
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que vemos solamente algunos conceptos bsicos y ejemplos sencillos. Dragn Systems Lic. Pariona Quispe, Teodosio 27
cols
rows
yes no
un nmero un nmero, acompaado de % cuando se desee que sea en porcentaje nmero hexadecimal
Tambin 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 repartirn de forma equitativa lo que quede de ventana. Ejemplo, si insertramos la siguiente lnea de cdigo:
Dragn Systems
28
Marco <frame>.Ya hemos visto cmo dividir un documento en varias subventanas o marcos, pero no hemos visto cmo hacer que se carguen las distintas pginas 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 estarn entre las etiquetas <frameset> y </frameset>, y no necesitan etiqueta de cierre. Es posible modificar los siguientes atributos de un marco:
Atributo frameborder name noresize marginwidth marginheight scrolling src Significado aparece o no el borde del marco nombre del marco si aparece, el usuario no podr redimensionar el tamao de este marco anchura del margen con respecto a los bordes del marco altura del margen con respecto a los bordes del marco se mostrar o no la barra de desplazamiento cuando la pgina del marco no se pueda visualizar completamente en l documento que se cargar en el marco Posibles valores yes o 1 no o 0 cualquier valor no puede tomar valores un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero, acompaado de % cuando se desee que sea en porcentaje yes no auto ruta y nombre del documento
Ejemplo, para crear el conjunto de marcos de la pgina que aparece, tendramos que escribir: <frameset cols="150,*" frameborder="yes" framespacing="3" border="3" bordercolor="#FF9900"> <frame src="izquierdo.htm" name="marcoizquierdo" frameborder="no" scrolling="no" noresize> <frame src="derecho.htm" name="marcoderecho" frameborder="no" scrolling="auto"> </frameset> Y para crear el conjunto de marcos de la pgina que aparece, tendramos 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 pgina est dividida en dos marcos horizontales (rows="90,*"), estando el inferior de ellos dividido en dos marcos verticales (cols="150,*").
Dragn Systems
29
los soporta.
Una buena solucin para que el mayor nmero de usuarios pueda visitar nuestra pgina, es crear nuevas pginas con el contenido de los documentos que deberan 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 pginas. Ejemplo, si escribiramos el siguiente cdigo:
...
<noframes> <body> Este documento tiene marcos y tu navegador no los soporta. <a href="sinmarcos.htm">Pulsa aqui para visualizar la pgina sin marcos.</a> </body> </noframes> </html>
Destino del enlace.Como recordars, en el tema de hipervnculos vimos los posibles destinos de los enlaces. Estos destinos podan ser _blank, _parent, _self, y _top. Vamos a recordar para qu serva cada uno de ellos, ya que ahora que sabes trabajar con marcos te sern ms fciles de entender.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. Dragn Systems Lic. Pariona Quispe, Teodosio 30
_top:
Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecern al abrir el vnculo en ella. Adems de estos destinos para los enlaces, tambin podrs utilizar los nombres de los distintos marcos de la pgina. Ejemplo, si tuviramos un marco con el nombre marcoderecho, podramos insertar el enlace:
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 travs de la red, tienen multitud de aplicaciones. Dragn Systems Lic. Pariona Quispe, Teodosio 31
Los formularios se insertan a travs de las etiquetas <form> y </form>. Entre dichas etiquetas habr que insertar los diferentes objetos que formarn el formulario. la etiqueta <form> tiene los siguientes atributos: El atributo action indica una direccin de correo electrnico a la que mandar el formulario, o la direccin del programa que se encargar de procesar el contenido del formulario. El atributo enctype indica el modo en que ser cifrada la informacin para su envo. Por defecto tiene el valor application/x-www-form-urlencoded. El atributo method indica el mtodo mediante el que se transferirn las variables del formulario. Su valor puede ser get o post. El valor get se utiliza cuando no se van a producir cambios en ningn 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. Ejemplo, podramos insertar un formulario escribiendo el siguiente cdigo:
reas de texto <textarea>.Las reas de texto permiten a los usuarios insertar varias lneas de texto. Por ello, suelen utilizarse para que incluyan comentarios. Para insertar un rea de texto es necesario incluir las etiquetas <textarea> y </textarea> entre las etiquetas <form> y </form> del formulario. Dragn Systems Lic. Pariona Quispe, Teodosio 32
</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 nmero de lneas que podrn ser visualizadas en el rea de texto por lo que determina al alto del rea de texto. El atributo cols indica el nmero de caracteres por lnea que podrn 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 ms lneas de las especificadas en el atributo
Elementos de entrada <input>.Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas <form> y
Dragn Systems
33
Dragn Systems
34
Habra que escribir: <input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar"> Cuando se enve el formulario, si el primer botn 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 pgina es un datos interno.
Campos de seleccin <select> ...Los campos de seleccin se utilizan para insertar mens y listas desplegables. Para insertar uno de estos mens 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 nmero de elementos de la lista que pueden ser visualizados al mismo tiempo, determina el alto de la lista. La aparicin del atributo mltiple indica que el usuario podr seleccionar varios elementos de la lista al mismo tiempo, ayudndose de la tecla Ctrl. Este atributo no toma valores.
Dragn Systems
35
Habra que escribir: <select name="mascota"> <option selected>--- Elige animal ---</option> <option>Perro</option> <option>Gato</option> </select> Y para insertar la lista:
---Elige animales--Loro Perro
Habra 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>
Sonido de fondo <bgsound>.Aadir una msica de fondo a una pgina tiene pros y contras, si el sonido es apropiado al contenido de la pgina, puede hacerla ms atractiva en contrapartida la descarga del archivo de sonido supone una carga que puede ralentizar la visualizacin de la pgina y adems muchos usuarios suelen estar escuchando otro tipo de msica cuando navega en Internet, por lo que el escuchar tambin sonido en cada pgina que visita puede resultar algo molesto. Los formatos de sonido ms habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir algn 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 travs del atributo src hay que especificar la ruta y el nombre del archivo de audio. Con el atributo loop indicamos el nmero 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. Ejemplo, podramos insertar un sonido de fondo escribiendo el siguiente cdigo: Dragn Systems Lic. Pariona Quispe, Teodosio 36
Vdeo y audio <embed>.En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta que los vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse. Los formatos de vdeo 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 vdeo. 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. A travs del atributo src hay que especificar la ruta y el nombre del archivo de vdeo. Los videos insertados a travs de esta etiqueta se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Esto puede cambiarse a travs de los atributos autostart y loop. El atributo autostart indica si el archivo se reproducir automticamente al cargarse la pgina, y puede tomar los valores true o false. El atributo loop indica si el archivo se reproducir continuamente en un bucle, y tambin puede tomar los valores true o false. Los atributos width (anchura) y height (altura) sirven para especificar el tamao de la consola de control de vdeo. Estos atributos pueden tomar como valor un nmero, que indica el tamao en pxeles. Si no se especifican estos atributos, la consola de control de vdeo se mostrar con el tamao ms adecuado al tamao del vdeo. 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.-
Pelculas Flash <object> ...Las pelculas Flash son animaciones con la extensin SWF. Suelen incluirse en las pginas iniciales de los sitios web, y se utilizan a modo de presentacin hacia los usuarios. Tambin pueden utilizarse como botones de las barras de navegacin. Estas pelculas 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 pgina, como pueden ser archivos de audio, archivos de vdeo, imgenes, 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. Las animaciones Flash se insertan del mismo modo que los archivos de audio y de vdeo, a travs de la etiqueta <embed>, pero debido a que tiene ms posibilidades de que se produzcan incompatibilidades entre los distintos navegadores, necesita tambin de la etiqueta <object>. Como el uso de la etiqueta <object> puede resultar bastante complicado, vamos a ver solamente un caso concreto para la insercin de un archivo SWF. Ejemplo, vamos a analizar el cdigo que habra que escribir para insertar la animacin Flash de la derecha.-
Bienvenido
a esta pgina
Pelcula en Flash
El cdigo a escribir sera el siguiente: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.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" Dragn Systems Lic. Pariona Quispe, Teodosio 38
<embed>.
Por ltimo, vamos a analizar la etiqueta <param>. Esta etiqueta se utiliza para especificar los valores necesarios para la inicializacin 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 caracterstica que va a ser definida, y value indica su valor. Ejemplo, para indicar la ruta del archivo, que en la etiqueta <embed> aparece especificado por el atributo src, es necesario incluir tambin una etiqueta <param>, en la que name tenga el valor movie. Por eso aparece la lnea <param name="movie" value="graficos/pelicula.swf">. Para indicar la calidad de reproduccin, que en la etiqueta <embed> aparece especificado por el atributo quality, es necesario incluir tambin una etiqueta <param>, en la que name tenga el valor quality. Por eso aparece la lnea <param name="quality" value="high">. Las animaciones Flash se reproducen de forma automtica al cargarse la pgina, y su reproduccin es continua. Para hacer que una animacin no se reproduzca automticamente, habr que indicarlo mediante el atributo
HTML dinmico.Una pgina dinmica es una pgina que permite al usuario interactuar con ella, y que contiene efectos especiales. Para crear una pgina 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. Tambin puede hacerse uso de capas, de animaciones Flash, de applets java y de hojas de estilo CSS. A la combinacin de estos elementos se le conoce como DHTML (HTML dinmico). Existe una ancdota muy curiosa sobre DHTML : Una conocida marca, poseedora de un programa que permite "dar vida" a las pginas web, pidi explicaciones a un webmaster tras visitar su pgina web. Pensaron que el webmaster estaba utilizando su programa y haban comprobado que no figuraba como comprador en sus archivos. El webmaster respondi que no estaba utilizando el programa en cuestin, sino HTML dinmico, por lo que la empresa tuvo que disculparse por la acusacin. Esto demuestra lo que se puede llegar a hacer con HTML dinmico.
Programacin web.En el tema anterior hablamos de JavaScript y VBScript, dos lenguajes de programacin web. Estos lenguajes son interpretados y ejecutados directamente por el navegador del usuario que visualiza la pgina, 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 pgina, el servidor ejecuta los scripts y genera otra pgina como resultado. Esta nueva pgina slamente contiene HTML, y es la que visualiza el navegador del usuario. Esto evita que se puedan producir errores al interpretar el cdigo, 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 cdigo original, por lo que los programas estarn protegidos ante plagios. Al mismo tiempo, se puede acceder a mayor nmero de recursos almacenados en el servidor, como pueden ser bases de datos. Los lenguajes de este tipo ms utilizados hoy en da 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 versin llamada ASP.NET, que ofrece bastantes mejoras en lo que se refiere a posibilidades y rapidez de ejecucin. ASP tiene un gran inconveniente, ya que precisa que el servidor funcione sobre Windows NT o 2000.
Dragn Systems
40
XML.El lenguaje HTML ha ido evolucionando rpidamente, gracias, entre otras cosas, a su sencillez. Pero este lenguaje es bastante rgido, y no nos permite hacer en nuestras pginas todo lo que nos gustara, al no existir las etiquetas necesarias para ello. 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 an no soportan toda la potencia de XML, cada vez est siendo ms 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 grficos pueden representarse en forma de rbol. Con XML lo que se pretende es etiquetar e identificar el contenido de las pginas, y no pensar directamente en cmo se mostrarn los datos. Puede utilizarse para definir muchas ms caractersticas referentes al contenido de los documentos de las que permite la etiqueta <meta> de HTML, y estos datos resultan muy tiles para realizar bsquedas o filtrar informacin. XML tambin ofrece la posibilidad de gestionar cualquier conjunto de caracteres internacional. Esta es una caracterstica muy til, ya que permite incluir cualquier carcter que se est utilizando hoy en da, como pueden ser caracteres en chino o en rabe, lo que facilita el comercio internacional a travs de Internet. En realidad, XML y HTML son lenguajes distintos, basados en el SGML (Standard Generalized Markup Language). SGML es el estndar internacional para la definicin de la estructura y el contenido de diferentes tipos de documentos electrnicos. Mediante una DTD (Definicin de Tipo de Documento), el SGML define la estructura y el contenido de cada tipo de documento. Ejemplo, existe una DTD que define cmo han de ser los documentos HTML. Pero no existe ninguna DTD que defina la estructura y el contenido de un documento XML. En realidad, XML es una versin resumida del SGML, que descarta aquellas partes del SGML que raramente se utilizan. Por ello, XML es ms sencillo que SGML, y permite definir nuestros propios tipos de documentos, con nuestras propias etiquetas. Dragn Systems Lic. Pariona Quispe, Teodosio 41
Dragn Systems
42