P. 1
HTML Con Bloc de Notas

HTML Con Bloc de Notas

|Views: 7.808|Likes:

More info:

Published by: Mario Gabriel Ill Mitã'i Báez on May 17, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

08/01/2013

pdf

text

original

Cómo utilizar el Bloc de notas para crear una página ASP sencilla

1. En el menú Inicio de Windows, seleccione Programas, Accesorios y, a continuación, haga clic en Bloc de notas. 2. Resalte el código siguiente, haga clic con el botón secundario del mouse (ratón) en el mismo y, a continuación, haga clic en Copiar. En el Bloc de notas, haga clic en Pegar en el menú Edición para pegar el siguiente código en el Bloc de notas:

<HTML> <HEAD> <TITLE>Aquí se inserta el título de la página</TITLE> </HEAD> <BODY> <% Aquí se incluye el código ASP entre los delimitadores de apertura y cierre %> </BODY> </HTML>
El código anterior muestra algunas de las etiquetas estándar que se utilizan con frecuencia en el desarrollo de páginas ASP. Tenga en cuenta que puede colocar el código ASP en cualquier lugar del documento, incluso antes o después de las etiquetas <HTML></HTML>. El lugar donde coloque el código ASP en la página depende de la finalidad del código. 3. En el Bloc de notas, haga clic en Guardar, en el menú Archivo. En el cuadro de diálogo Guardar como, en el cuadro de lista desplegable Guardar en, haga clic en C:. Vaya a la ubicación raíz del servidor Web. Generalmente, esta es C:\InetPub\Wwwroot. En el cuadro de lista desplegable Nombre de archivo escriba MiPáginaAsp.asp ). En el cuadro de lista desplegable Guardar como archivo tipo, haga clic en Todos los archivos. Por último, haga clic en Guardar. 4. Para ver la página, abra el explorador Web y escriba la dirección http de la página en la barra de dirección. Si guardó el archivo en la ubicación mencionada anteriormente, escriba la siguiente dirección en la barra de direcciones: http://< nombreServidor >/MiPáginaAsp.asp

Curso de HTML. Índice
1. Introducción a HTML 2. Estructura de una página 3. El texto 4. Hiperenlaces 5. Imágenes 6. Tablas 7. Marcos 8. Formularios 9. Multimedia 10. Capas 11. JavaScript 12. Hojas de estilo 13. Páginas web dinámicas

Índice

detallado

Unidad 1. Introducción a HTML

Qué es HTML Versiones de HTML Los navegadores. Compatibilidad Editores Introducción al Bloc de notas Compaginar dos sesiones Etiquetas Mi primera página
Unidad 2. Estructura de una página

Identificador del tipo de documento <html> Cabecera de la página <head> Título de la página <title> La etiqueta <meta> Cuerpo del documento <body> Colores en hexadecimal
Unidad 3. El texto

Caracteres especiales y espacios en blanco Comentarios Saltos de línea <br> Texto preformateado <pre> Separadores <hr>

Sangrado de texto <blockquote> Formatear el texto <font> Resaltado del texto <b> ... Párrafos <p> ... Encabezados <h1> ... Marquesinas <marquee> Las listas <li> ...
Unidad 4. Hiperenlaces

Hiperenlace <a> Tipos de referencias Destino del enlace Formato de los enlaces Puntos de fijación. Anclas Otros tipos de enlaces
Unidad 5. Imágenes

Imagen <img> Formatos de imagen Texto alternativo Borde de una imagen Tamaño de una imagenAlineación de una imagen
Unidad 6. Tablas

Tabla <table> Fila <tr> Columna o celda <td> Formato de la tabla Formato de las celdas Encabezado de columna <th> Titulo de tabla <caption> Combinar celdas
Unidad 7. Marcos

Conjunto de marcos <frameset> Marco <frame> Sin marcos <noframes> Destino del enlace
Unidad 8. Formularios

Formulario <form> Áreas de texto <textarea> Elementos de entrada <input> Campos de selección <select> ...
Unidad 9. Multimedia

Sonido de fondo <bgsound> Vídeo y audio <embed> Películas Flash <object>
Unidad 10. Capas

Capa <div> ...
Unidad 11. JavaScript

Lenguajes de script JavaScript <script>
Unidad 12. Hojas de estilo

Introducción Vincular una hoja de estilo Sintaxis de las hojas de estilo Las propiedades
Unidad 13. Páginas web dinámicas

HTML dinámico Programación web

XML

Qué es HTML
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas 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 sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web). Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.

Arrancar y cerrar el Bloc de notas
Veamos las dos formas básicas de arrancar el Bloc de notas. Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú; al colocar el cursor sobre Programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar Accesorios, seguidamente Bloc de notas, hacer clic sobre él, y se arrancará el programa. Desde el icono del Bloc de notas del escritorio .

Para cerrar el Bloc de notas, puedes utilizar cualquiera de las siguientes operaciones: Hacer clic en el botón cerrar Pulsar la combinación de teclas ALT+F4. Hacer clic sobre el menú Archivo y elegir la opción Salir. Si el documento ha sido modificado y no ha sido guardado antes de cerrar, se te pedirá confirmación para guardarlo antes de cerrar el programa.

Escribir en el Bloc de notas
Siempre que se abre el bloc de notas aparece un documento en blanco. A la hora de escribir en él, funciona como cualquier otro editor de texto, basta con situar el cursor en el documento y escribir. Es recomendable insertar una nueva línea para cada nueva etiqueta HTML, ya que resulta más facil trabajar de este modo. Si escribiéramos todo el código seguido nos resultaría difícil interpretarlo, por ello es preferible programar insertando las etiquetas por separado, en diferentes líneas.

A través del menú Formato, opción Fuente, puedes cambiar la fuente de todo el documento. Si lo deseas, puedes hacer la letra algo más grande o pequeña.

Abrir y guardar documentos
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones una vez abierto el Bloc de notas. Pulsar la combinación de teclas Ctrl+A. Hacer clic sobre el menú Archivo y elegir la opción Abrir. Nota: Como el Bloc de notas sirve originalmente para escribir documentos de texto, cuando le decimos Abrir, por defecto nos muestra los documentos con extensión .txt, nuestras páginas tienen la extensión .htm o html, por lo que debemos cambiar en el cuadro de diálogo abrir el tipo de archivo para visualizarlos todos y poder ver así nuestras páginas. Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones. Pulsar la combinación de teclas Ctrl+N. Hacer clic sobre el menú Archivo y elegir la opción Nuevo. Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones. Pulsar la combinación de teclas Ctrl+G. Hacer clic sobre el menú Archivo y elegir la opción Guardar. A la hora de guardar un documento no debes olvidar guardarlo con la extensión htm o html. Por ejemplo, puedes guardar un documento con el nombre mipagina.htm.

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. La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 ...> Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos. La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador> Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepción de algunos elementos que no necesitan etiqueta de cierre. También es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre. A continuación tenemos un ejemplo en el que tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.:

.htm. Puedes guardarlo a través del menú Archivo.</font>. Al mismo tiempo.. como puede ser el título. </body> </html> Identificador del tipo de documento <html> Todas las páginas web escritas en HTML tienen que tener la extensión html o htm. estoy haciendo pruebas. éste debería abrirse automáticamente en el navegador que tengas instalado en tu ordenador. La estructura básica de una página es: <html> <head> . MS Sans Serif">Bienvenidos a Utic. la página resultante es una página que solamente tiene una línea de texto.. tienen que tener las etiquetas <html> y </html>. Por ejemplo: <html> <head> . Entre las etiquetas <html> y </html> estará comprendido el resto del código HTML de la página. Como puedes ver. opción Guardar. Si observas la barra de título del navegador. Arial. se ha insertado a través de línea <font color="#CC3300" size="5">Hola. El texto Hola. Por ejemplo: <html> .com</font></p> Mi primera página Seguidamente introduce. </html> Cabecera de la página <head>. estoy haciendo pruebas. Este título ha sido establecido por la línea <title>MI PRIMERA PAGINA</title>. Pulsando dos veces sobre el icono del archivo miprimpag. </head> <body> . estoy haciendo pruebas.. El color de fondo de la página ha sido establecido por la línea <body bgcolor="#FFCC99">. El navegador deberá mostrar una página como la de la derecha..htm. La etiqueta <head> va justo debajo de la etiqueta <html>. con el nombre miprimpag.. verás que el título de la página es MI PRIMERA PAGINA.. en el documento en blanco.<p align="center"><font color="#993366" size="4" face="Comic Sans MS. Está formada por las etiquetas <head> y </head>. </head> .</font></body> </html> Guarda el documento con la extensión htm. La cabecera de la página se utiliza para agrupar información sobre ella. el texto siguiente: <html> <head> <title>MI PRIMERA PAGINA</title> <body bgcolor="#FFCC99"> <font color="#CC3300" size="5">Hola..

La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>. A través de esta etiqueta pueden especificarse los atributos name y content. etc. Por ejemplo. Podríamos utilizar el siguiente código: <html> <head> . y el atributo content indica el valor de dicha información.. como puede ser "Autor".. "Palabras clave". <meta http-equiv="Refresh" content="30"> . <meta name="author" content="aulaclic"> <meta name="description" content="Curso de HTML gratuito"> <meta name="keywords" content="código HTML etiqueta página web gratis curso"> </head> . <meta> y la etiqueta <title> que te explicamos a continuación. <script> (estas etiquetas las veremos más adelante).. La etiqueta <meta> La etiqueta <meta> se utiliza para añadir información sobre la página. La etiqueta <meta> también se utiliza para indicarle al navegador alguna información o alguna acción que debe realizar. y especifica algunas palabras clave a ser consultadas por los buscadores: <html> <head> ... en lugar del atributo name. las etiquetas que podemos encontrar y más se utilizan son: <link>. Los tipos de información más utilizados son los siguientes: Tipo Significado author Autor de la página classification Palabras para clasificar la página en los buscadores description Descripción del contenido de la página generator Programa utilizado para crear la página keywords Palabras clave La etiqueta <meta> no necesita etiqueta de cierre. "Descripción"... <style>. Pero debido a que la mayoría de buscadores están en inglés. buscando coincidencias con lo que el usuario pretende encontrar. </html> Entre las etiquetas <head> y </head>. Para cada etiqueta <meta> solo es posible indicar un tipo de información y su valor. En ese caso. el siguiente código indica que el autor de la página es aulaclic. Esta información puede ser utilizada por los buscadores. Por ejemplo. Para indicar el tipo de información podemos utilizar cualquier palabra que deseemos.. que la página trata sobre un curso de HTML gratuito. pero es posible insertar varias etiquetas <meta> en un mismo documento. es preferible que el tipo de información se especifique en inglés. deberíamos utilizar la acción Refresh (actualizar).. En este caso se utiliza el atributo http-equiv. El atributo name indica el tipo de información. Los buscadores consultan la información de la etiqueta <meta> de las páginas. imaginemos que por algún motivo queremos que nuestra página se actualice automáticamente cada 30 segundos.

al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido. entre las etiquetas <head> y </head>... el texto de la página. Colores en hexadecimal . cuando la página esté cargada en él.htm"> </head> . a los 5 segundos el navegador lo redirija automáticamente a la dirección nueva.com/index. <meta http-equiv="Refresh" content="5.. el navegador realizaría la función de actualizar la página. De este modo. es decir. Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>.com/index. Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <title> y </title>. Por ejemplo: <html> <head> <title> Curso de HTML </title> </head> <body> ... </body> </html> A través de la etiqueta <body> es posible establecer el color o la imagen de fondo de la página. En ese caso podríamos insertar el siguiente código en la página que se encuentra en la dirección antigua: <html> <head> .</head> . </html> Cuerpo del documento <body> El cuerpo del documento contiene la información propia del documento. Por ejemplo: <html> <head> <title> Curso de HTML </title> </head> . Ahora imaginemos que hemos cambiado la dirección en la que se encuentra nuestra página web. El color de fondo puede establecerse a través del atributo bgcolor. pero cargando la que se encontrara en la nueva dirección (URL=http://www. los formularios..aulaclic.. las imágenes. URL=http://www. es decir lo que pqueremos que se visualice. que van justo debajo de la cabecera.aulaclic. y queremos que cuando algún usuario visite la página en la dirección antigua. Estas etiquetas han de estar dentro de la cabecera.htm). Título de la página <title> El título de la página es el que aparecerá en la parte superior de la ventana del navegador... etc..

Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator.Los colores en HTML se representan mediante un número hexadecimal. . como por ejemplo #FFFFFF. modificando los valores de cada uno de los dígitos que forman parte del número hexadecimal. que van del 0 al 9. para que puedas consultarlos cuando lo necesites. y de la A a la F. precedidos por una almohadilla. También podemos personalizar nuestros propios colores. Cada color estará representado por un grupo de seis dígitos en hexadecimal. Un número hexadecimal se diferencia de un número decimal en que no sólo puede tomar valores del 0 al 9. sino que puede tomar hasta dieciséis valores distintos. A continuación se muestran los 216 colores seguros para web. Existen 216 colores seguros para web. tanto en Windows como en Macintosh.

#000000 #003300 #006600 #009900 #00CC00 #00FF00 #330000 #333300 #336600 #339900 #33CC00 #33FF00 #660000 #660033 #666600 #669900 #66CC00 #66FF00 #990000 #993300 #996600 #999900 #99CC00 #99FF00 #CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00 #FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00 #000033 #003333 #006633 #009933 #00CC33 #00FF33 #330033 #333333 #336633 #339933 #33CC33 #33FF33 #660033 #663333 #666633 #669933 #66CC33 #66FF33 #990033 #993333 #996633 #999933 #99CC33 #99FF33 #CC0033 #CC3333 #CC6633 #CC9933 #CCCC33 #CCFF33 #FF0033 #FF3333 #FF6633 #FF9933 #FFCC33 #FFFF33 #000066 #003366 #006666 #009966 #00CC66 #00FF66 #330066 #333366 #336666 #339966 #33CC66 #33FF66 #660066 #663366 #666666 #669966 #66CC66 #66FF66 #990066 #993366 #996666 #999966 #99CC66 #99FF66 #CC0066 #CC3366 #CC6666 #CC9966 #CCCC66 #CCFF66 #FF0066 #FF3366 #FF6666 #FF9966 #FFCC66 #FFFF66 #000099 #003399 #006699 #009999 #00CC99 #00FF99 #330099 #333399 #336699 #339999 #33CC99 #33FF99 #660099 #663399 #666699 #669999 #66CC99 #66FF99 #990099 #993399 #996699 #999999 #99CC99 #99FF99 #CC0099 #CC3399 #CC6699 #CC9999 #CCCC99 #CCFF99 #FF0099 #FF3399 #FF6699 #FF9999 #FFCC99 #FFFF99 #0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC #CC00CC #CC33CC #CC66CC #CC99CC #CCCCCC #CCFFCC #FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC #0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF #3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF #9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF #CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF #FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF .

para hacer que el color de fondo de una página sea de color azul...gif"> .gif. . y son los siguientes: Color Hexadecimal #FFFFFF #000000 #000080 #0000FF #008000 #008080 #00FF00 #00FFFF #800000 #800080 #808000 #808080 #C0C0C0 #FF0000 #FF00FF #FFFF00 Nombre white black navy blue green teal lime aqua maroon purple olive gray silver red fuchsia yellow Por ejemplo.. tendremos que escribir: .gif"> .. </body> </html> Sería equivalente a poner: . que se encuentra en el mismo directorio en el que se encuentra guardada la página.. Estos colores pueden representarse por su nombre. </body> </html> La imagen de fondo puede establecerse a través del atributo background. tendremos que escribir: .. </body> </html> En el caso de que la imagen no se encuentre en el mismo directorio que la página... sin la necesidad de utilizar números en hexadecimal. </body> </html> A través de la etiqueta <body> también es posible establecer el color del texto de la página a través del atributo text. Por ejemplo.. <body background="imagenes/fondo.... <body background="fondo.Existe otra forma de representar algunos colores.. para hacer que la imagen de fondo de una página sea la imagen fondo... indicando la ruta en la que se encuentra la imagen. <body bgcolor="#0000FF"> .. tendremos que escribir: . y se encuentre dentro de la carpeta imagenes. que sí se encuentra en el mismo directorio que la página. <body bgcolor="blue"> .

&Oacute. &ordm. &iquest. &Ccedil. &eacute. cuyo tamaño en píxeles puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior). &uuml. &#153. Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en blanco seguidos sólamente se mostrará uno en el navegador. &oacute. &aacute. para insertarlos como texto habría que escribir el nombre que los representa. y tenga un margen izquierdo de 20 píxeles. &Ntilde. <body text="#FF0000"> . Existen otra serie de caracteres que no se visualizan correctamente en algunos navegadores. para hacer que una página no tenga margen superior.. &gt. &copy. Por ejemplo.Por ejemplo. &ntilde.. &middot. &Uacute. &Iacute. &amp. <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" > . A continuación se muestra una lista con algunos caracteres y el nombre con el que han de ser representados: Carácter < > á Á é É í Í ó Ó ú Ú ñ Ñ ™ Representación &lt.. &ccedil. Para conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos por &nbsp. &iexcl.. .. &Aacute. Carácter € ç Ç ü Ü & ¿ ¡ " · º ª ¬ © ® Representación &euro. para lo cual deben valer cero. Estos atributos no funcionan para el navegador Netscape. pero sí los atributos marginwidth (anchura del margen) y marginheight (altura del margen). &Uuml. Si se desea insertar estos caracteres como texto hay que escribir el nombre que los representa: < Se representa con &lt. &quot. &not.. como es el caso de la ñ y las letras acentuadas. tendremos que escribir: ... por lo que al igual que ocurre con los caracteres especiales < y >. tendremos que escribir: .. </body> </html> Caracteres especiales y espacios en blanco Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. </body> </html> Entre el borde de la ventana y el contenido de la página existe un margen. Estos atributos suelen utilizarse para eliminar el margen. &iacute. &Eacute. &uacute. > Se representa con &gt. para hacer que el color del texto de una página sea de color rojo. &ordf. &reg.

Para insertar comentarios dentro del código. esta es mi 1ª página! Habría que escribir: <!-. esta BIENVENIDOS ES MI PÁGINA WEB y esto un texto preformateado Habría que escribir: <pre>Hola. Por ejemplo.y //-->. Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarán todos los espacios en blanco que se inserten en el texto. tengo el placer de comunicaros que hay una nueva sección. Por ejemplo. de manera que no sean visualizados en el navegador.<br>tengo el placer de comunicaros que hay una nueva secci&oacuten. basta con insertar el texto entre <!-. esta es mi 1&ordf. para insertar el texto: Hola. sin la necesidad de utilizar la etiqueta <br>.&nbsp. La etiqueta <br> no precisa ninguna etiqueta de cierre. p&aacute. Todo el código que se inserte entre estos símbolos no será visualizado en los navegadores. esta es mi 1ª página! Habría que escribir: &iexcl.1&ordf. esta es mi&nbsp. pero sí a la hora de editar el documento. para insertar el texto: ¡Bienvenidos.&nbsp. <sub> ni <sup> Separadores <hr> . <object> (para incluir objetos como animaciones). es utilizando las etiquetas <pre> y </pre>. BIENVENIDOS esta ES MI PÁGINA WEB y esto un texto preformateado</pre> El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se pueden incluir las etiquetas <img> (para incluir imágenes).A continuación aparecerá una línea de texto//--> &iexcl. Por ejemplo. Si pulsamos INTRO en un documento HTML. Texto preformateado <pre> Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del código. para insertar el texto siguiente con un comentario: ¡Bienvenidos.Bienvenidos.&nbsp.Por ejemplo. Para que se produzca el salto de línea en el navegador. el salto de línea se producirá en el código.gina! Saltos de línea <br> En general. cuando trabajamos con un editor de texto se produce un salto de línea al pulsar la tecla INTRO.p&aacute.&nbsp. así como todos los saltos de línea resultantes de pulsar la tecla INTRO. pero no se mostrará en el navegador. ya que dicha etiqueta no existe.gina! Comentarios En ocasiones podemos desear añadir comentarios aclaratorios dentro del código. No hay que insertar la etiqueta </br> después de ella.Bienvenidos. en lugar de pulsar la tecla INTRO hay que insertar la etiqueta <br> donde se desee que se produzca el salto. <big>. para insertar el texto: Queridos usuarios. <small>. Habría que escribir: Queridos usuarios.&nbsp.

Por ejemplo. Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Esta etiqueta en un principio se definió para delimitar citas pero que como la mayoría de los navegadores resuelven la cita incluyendo un sangrado del texto. para insertar el texto y la regla horizontal siguientes: Inicio Bienvenidos a mi página. Es posible especificar algunos atributos de la regla horizontal: Atributo Significado Posibles valores align alineación de la regla dentro de la página left (izquierda) right (derecha) center (centro) width ancho de la regla un número. Para que un texto aparezca sangrado.. El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva línea. acompañado de % cuando se desee que sea en porcentaje size alto de la regla un número noshade eliminar el sombreado de la regla no puede tomar valores Por ejemplo. podemos insertar el texto entre las etiquetas <font> y </font>. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. para insertar el texto: Queridos usuarios. Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los márgenes sean mayores. especificando algunos de los atributos de la etiqueta: Atributo . su uso para sangrar texto se ha generalizado.El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Habría que escribir: Queridos usuarios. Dicha etiqueta no precisa ninguna etiqueta de cierre. tengo el placer de comunicaros que hay una nueva sección. Habría que escribir: Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi p&aacute..gina. </blockquote> </blockquote> Formatear el texto <font> . Sangrado de texto <blockquote> La sangría es una especie de margen que se establece a ambos lados del texto. Para ello. se inserta entre las etiquetas <blockquote> y </blockquote>. <blockquote> <blockquote> tengo el placer de comunicaros que hay una nueva secci&oacuten.

delante del valor Por ejemplo. Para ello. Este código haría que la fuente del documento fuera por defecto de color azul.. añadiendo + o . y generalmente se utilizan para resaltarlo. A continuación se muestran algunas etiquetas asociadas al tipo de letra: Etiqueta <b> <i> <u> <s> <tt> <big> <small> Etiqueta Significado negrita cursiva subrayado tachado teletipo (máquina de escribir) aumenta el tamaño de la fuente disminuye el tamaño de la fuente Ejemplo curso HTML curso HTML curso HTML curso HTML curso HTML curso HTML curso HTML A continuación se muestran algunas etiquetas asociadas al tipo de información: <cite> <code> <dfn> <del> <em> <ins> <kbd> <samp> <strong> Significado cita ejemplo de código definición eliminado énfasis insertado teclado muestra destacado Ejemplo curso HTML curso HTML curso HTML curso HTML curso HTML curso HTML curso HTML curso HTML . Resaltado del texto <b> . la que prevalece es siempre la última que se encuentra. de tamaño 4 y Arial... Si después de indicar la etiqueta <basefont> o <font>. para insertar el texto: Bienvenidos a www. el navegador encuentra otra etiqueta <font>. Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas. siendo por defecto el 3. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre. Por ejemplo: <body> <basefont color="#006699" size="4" face="Arial"> . Arial. o fuentes color color del texto número hexadecimal o texto predefinido size tamaño del texto valores del 1 al 7. y que pueden aplicarse varias etiquetas al mismo texto.aula.com Habría que escribir: <font color="#993366" size="4" face="Comic Sans MS. Estos estilos pueden agruparse según vayan asociados al tipo de letra o a la información que represente el texto. La etiqueta <basefont> no necesita una etiqueta de cierre.com</font> También es posible definir una fuente para todo el documento.Significado Posibles valores face fuente nombre de la fuente..aula. o desplazamiento respecto al tamaño por defecto. y permite modificar los mismos atributos del texto que la etiqueta <font>. hay que insertar la etiqueta <basefont> después de la etiqueta <body>. MS Sans Serif">Bienvenidos a www.

pero que no implican el cambio de línea (como en el caso de <p> y <div>).com Habría que escribir: <font color="#993366" size="4" face="Comic Sans MS. Por ejemplo. Existen una serie de encabezados que suelen utilizarse para establecer títulos dentro de una página. center (centrado) o justify (justificado).aulaclic.</div> <div>Aqu&iacute encontraras cursos de formaci&oacuten muy interesantes. el resultado de aplicar las etiquetas <b> y <strong> es el mismo. cuyos valores pueden ser left (izquierda).</p> <p>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes. Habría que escribir: <div align="center">Bienvenidos a mi p&aacutegina. right (derecha). ya que las etiquetas <p> y </p> hacen que se cambie de línea automáticamente. al igual que la etiqueta <p>. ya que son más fáciles de recordar. Aquí encontraréis cursos de formación muy interesantes.</div> También es posible insertar el texto entre las etiquetas <center> y </center> para que aparezca centrado. para insertar el texto: Bienvenidos a mi página. Aquí encontraras cursos de formación muy interesantes. Incluso a veces algunos estilos asociados al tipo de información pueden representarse de forma distinta según el navegador.</p> Otra forma de cambiar la alineación del texto es mediante las etiquetas <div> y </div>.com</tt></u></b></font> Párrafos <p> . Encabezados <h1> . Arial. Habría que escribir: <center>Bienvenidos a mi p&aacutegina. se utiliza para agrupar bloques de texto.aulaclic. para insertar el texto: Bienvenidos a mi página. para insertar el texto: Bienvenidos a mi página. Hay que tener en cuanta que el navegador del usuario es el que aplicará el estilo . Por ejemplo. Para ello. La etiqueta <div>. El texto de una página puede agruparse en párrafos. son las etiquetas <span> y </span> volveremos a hablar de estas etiquetas cuando veamos las hojas de estilo. Por ejemplo. y la separación existente entre el texto y los elementos que tiene encima y debajo de él. También es posible cambiar la alineación del texto de cada párrafo.</center> Otro par de etiquetas que permiten agrupar bloques de texto. MS Sans Serif">Bienvenidos a <b><u><tt>www.. No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca debajo del anterior. La diferencia entre los distintos tipos de encabezado es el tamaño de la letra. Por ejemplo.. el tipo de resaltado. Habría que escribir: <p align="center">Bienvenidos a mi p&aacutegina. para las que también existe el atributo align.. el texto de cada uno de los párrafos debe insertarse entre las etiquetas <p> y </p>. para insertar el texto: Bienvenidos a www. Para ello se modifica el valor del atributo align.<sub> <sup> <var> subíndice superíndice variable curso HTML curso HTML curso HTML Las etiquetas más utilizadas son las asociadas al tipo de letra.. Por ejemplo. pero con la diferencia de que la separación entre ellos es menor. y en muchos casos los resultados son los mismos que los de aplicar una etiqueta diferente.

Puede tomar los valores alternate (de lado a lado de la ventana. continuamente) o slide (de un lado a otro. Para insertar una marquesina. tablas y otros elementos entre las etiquetas <marquee> y </marquee>. Todas estas etiquetas precisan una etiqueta de cierre. up (de abajo a arriba). Puede tomar los valores down (de arriba a abajo). A continuación se muestran los distintos encabezados existentes: Etiqueta Ejemplo <H1> <H2> <H3> <H4> <H5> <H6> Título 1: HTML Título 2: HTML Título 3: HTML Título 4: HTML Título 5: HTML Título 6: HTML Para todas estas etiquetas es posible especificar el valor del atributo align. por defecto. como si rebotara en los extremos).. Por ejemplo. pero una sola vez). es necesario insertar el texto entre las etiquetas <marquee> y </marquee>.  Elemento de lista <li> Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y </li>. no sólamente texto. <li>Perro</li> <li>Gato</li> . Por ejemplo. Existen seis etiquetas que representan seis tipos de cabeceras distintas. pero si lo deseas puedes hacer que estas propiedades varíen. Por ejemplo. También es posible establecer un color de fondo. para insertar el texto: El lenguaje HTML Apartado 1: Las etiquetas Habría que escribir: <H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4> Marquesinas <marquee> Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea. A través del atributo behavior puede modificarse el tipo de movimiento. La marquesina. para insertar la siguiente marquesina: Habría que escribir: <marquee bgcolor="#006699" behavior="alternate" direction="right"> <b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b> </marquee> También es posible insertar imágenes.. para insertar en una lista los siguientes elementos: • Perro • Gato • Periquito Habría que escribir: . se desplaza de derecha a izquierda indefinidamente. a través del atributo bgcolor. left (de derecha a izquierda) o left (de izquierda a derecha). A través del atributo direction puede modificarse la dirección en la que se moverá el texto. scroll (de un lado a otro.del encabezado por lo que el mismo título se puede visualizar de forma diferente según el navegador.

que puede ser 1 (números). Lunes   2. Estas listas pueden ser tanto desordenadas como ordenadas. a (letras minúsculas). Por ejemplo.. Perro Gato Periquito Habría que escribir: <ol type="i"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ol> Anidar listas Es posible anidar listas dentro de otras. Correccion de ejercicios Proponer ejercicios Habría que escribir: <ol> <li>Lunes <ul type="square"> <li>Ingles</li> <li>Frances</li> </ul> </li> <li>Martes .<li>Periquito</li> . que puede ser circle (círculo). Lista desordenada <ul> Para que una lista sea desordenada.. A través del atributo type es posible elegir el tipo de numeración. Por ejemplo. disc (disco) o square (cuadrado). Todos los elementos de la lista deberán encontrarse entre las etiquetas que indiquen si la lista es desordenada (con viñetas) u ordenada (numerada) como veremos a continuación. ii. iii. i (numeros romanos en minúsculas) o I (números romanos en mayúsculas). Ingles Frances   Martes Ingles A. sus elementos deberán encontrarse entre las etiquetas <ul> y </ul>. Por ejemplo. B. sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>. para insertar la siquiente lista: i. para insertar la siquiente lista: o Perro o Gato o Periquito Habría que escribir: <ul type="circle"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ul> Lista ordenada <ol> Para que una lista sea ordenada. A (letras mayúsculas). para insertar la siquiente lista: 1. A través del atributo type es posible elegir el tipo de viñeta.

. Esta barra inclinada indica la carpeta raíz del sitio. conocida como carpeta raíz del sitio.aulaclic. Por ejemplo.htm se encontrara. "http://www.com Habría que escribir: <a href="http://www.htm" Para insertar el enlace: Visita www. para insertar el enlace: Visita www. o vínculo. Por ejemplo. esta lista tiene dos elementos <li>Lunes y <li>Martes. A través del atributo href se especifica la página a la que está asociado el enlace.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>.com">Visita www.aulaclic.htm se encuentra directamente dentro de la carpeta raíz del sitio.aulaclic. no es más que un enlace. en este caso hay que empezar la referencia por http:// . la página que se visualizará cuando el usuario haga clic en el enlace.com</a> Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. con un diseño similar o un objetivo común. imágenes.aulaclic.aulaclic. estando todos ellos dentro de una misma carpeta.com</a> Tipos de referencias Existen diferentes formas de expresar una referencia a una página a través del atributo href.htm">Enlace a Tema 4: Hiperenlaces</a> Observa como aparece el símbolo "/" delante del nombre del documento.com" tendrá el mismo efecto que "http://www. relacionados entre sí. que al ser pulsado lleva de una página o archivo. Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio. Si el documento t_4_1. La ubicación es en Internet. El elemento Lunes contiene una lista desordenada con tipo cuadrado <ul type="square"> que tiene dos elementos <li>Ingles</li> y <li>Frances</li>.aulaclic. hipervínculo. Aquellos elementos (texto. Por ejemplo. el nombre del dominio y algunas veces el nombre de la página. por ejemplo. Referencia absoluta: Conduce a una ubicación externa al sitio en el que se encuentra el documento.aulaclic. teniendo en cuenta que el documento t_4_1.aulaclic.com/index.com">Visita www. El elemento Martes contiene una lista ordenada de un sólo elemento <li>Ingles</li> elemento que contiene a su vez una lista desordenada de tipo letras mayúsculas <ol type="A"> con los dos elementos <li>Correccion de ejercicios</li> y <li>Proponer ejercicios </li> Hiperenlace <a> Un hiperenlace. etc. para insertar el enlace: Enlace a Tema 4: Hiperenlaces Habría que escribir: <a href="/t_4_1. Un sitio web es un conjunto de archivos y carpetas.com Habría que escribir: <a href="http://www.<ol> <li>Ingles</li> <ol type="A"> <li>Correccion de ejercicios</li> <li>Proponer ejercicios </li> </ol> </li> </ol> </li> </ol> Empezamos por la lista ordenada (la más externa) <ol>.

ya que se volverán a ver en el tema de Marcos. aparece el contorno de esa zona. habría que escribir: <a href="/tema4/t_4_1. _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. un texto que tiene un vínculo asociado suele aparecer subrayado.aulaclic.aulaclic. Al final de este tema verás cómo definir el punto de fijación. por ejemplo. se especifica a través del atributo target al que se le puede asignar los siguientes valores: _blank: Abre el documento vinculado en una ventana nueva del navegador. Por ejemplo. No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de destino. Abre el documento vinculado en el mismo marco o ventana que el vínculo. Por ejemplo. en el borde aparecen una serie de puntitos al pulsar sobre ella. pero partiendo del directorio en el que se encuentra el actual. dentro de una carpeta llamada tema4. De momento sólo te interesa retener la opción _blank y _self.com en una ventana nueva Habría que escribir: <a href="http://www. Formato de los enlaces En general. y esta estuviera dentro de la misma carpeta que el documento actual. Aqui tienes dos vínculos similares de ejemplo: . para insertar el enlace: Punto de fijacion Tipos de enlaces Habría que escribir: <a href="t_4_1. se encuentre automáticamente en la página desde la que había salido (que vuelva a nuestro sitio). Para insertar el enlace: Visita www.htm">Enlace a Tema 4: Hiperenlaces</a> Punto de fijación: Conduce a un punto dentro de un documento. Si el documento t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a> Teniendo en cuenta que el documento se llama t_4_1. Para ello el vínculo debe ser "nombre_de_documento#nombre_de_punto". ya sea dentro del actual o de otro diferente.htm se encuentra dentro de la misma carpeta que el documento actual. Destino del enlace El destino del enlace determina en qué ventana va a ser abierta la página vinculada.htm">Enlace a Tema 4: Hiperenlaces</a> Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual. y esta estuviera dentro de la carpeta raíz del sitio. teniendo en cuenta que el documento t_4_1.aulaclic.com" target ="_blank">Visita www.dentro de una carpeta llamada tema4. para insertar el enlace: Enlace a Tema 4: Hiperenlaces Habría que escribir: <a href="t_4_1. Cuando el vínculo está definido sobre una zona de una imagen (un mapa). _top: Abre el documento vinculado en la ventana completa del navegador. habría que escribir: <a href="tema4/t_4_1. Cuando el vínculo está definido sobre una imágen.com en una ventana nueva</a> Es interesante utilizar esta opción cuando la página de destino está fuera de nuestro sitio para que cuando el usuario cierre la ventana del explorador. _self: Es la opción predeterminada.htm y el punto de fijación se llama tipos.htm se encontrara.htm">Enlace a Tema 4: Hiperenlaces</a> Observa que en este caso no aparece el símbolo "/" delante del nombre del documento.

htm#miancla">Enlace al ancla</a> Si pulsas sobre el enlace verás como se vuelve a cargar el documento actual. el enlace será de color naranja (#FF9900): www. link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez). podríamos crear un enlace que nos llevara directamente a la línea de texto en la que se encuentra el ancla. Estos colores se asignan a través de los atributos link (vínculo).com.aulaclic.Como puedes ver. Normalmente los vínculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el puntero del ratón se posiciona sobre él.aulaclic. Por ejemplo: Enlace al ancla Habría que escribir: <a href="t_4_3. <body link="#FF0000" vlink="#FF0099" alink="#FF9900"> .. muy útiles a la hora de crear índices. Para ello se utilizan las anclas. no es necesario insertar nada entre las etiquetas <a> y </a>. pero nosotros podemos cambiar esos colores. o puntos de fijación.com. en la etiqueta <body>. y vlink (vínculo visitado).... con el atributo name. alink (vínculo activo). Teniendo en cuenta que el documento actual se llama t_4_3. como veremos más adelante. <a href="http://www. Por ejemplo. Tanto si el vínculo se asigna a un texto como a una imagen. . Un ancla necesita que se inserten las <a> y </a>. divididos en varios apartados.com" target ="_blank">www. se recomienda no utilizar caracteres especiales. vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).. podemos prescindir de poner el nombre de la página en el atributo href.aulaclic. el enlace será de color rojo (#FF0000): www. Suele adquirir la apariencia de una mano señalando. la segunda imagen que hace de vínculo contiene un recuadro alrededor. para insertar un punto de fijación delante del siguiente texto: Texto con ancla Habría que escribir: <a name="miancla"></a>Texto con ancla Como puedes ver. al insertar el siguiente código: . como ocurre en este caso.com</a> . pero en lugar de cargarse desde el principio. alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).com Puntos de fijación. el cursor cambia de forma al situarse encima del vínculo. y que el ancla anterior se llama miancla.. es preferible poder ir directamente al apartado deseado. en lugar de ir al comienzo del documento. Esto ocurre debido a que se ha establecido un borde para la imagen. estos cambios están predefinidos en cada navegador. Mientras no se visite la página www.aulaclic. el enlace será de color fucsia (#FF0099): www.com sea la última visitada. Por ejemplo.aulaclic.aulaclic.aulaclic. que puede tomar cualquier valor inventado por el usuario.com Cuando se haya visitado la página www.htm. Los colores de los vínculos pueden especificarse a través de las propiedades de la página. Anclas Cuando se tienen documentos extensos. y que sin mirar el código no hay nada que indique que delante del texto haya un ancla. Cuando el ancla se encuentra en el mismo documento que el enlace.aulaclic.com Mientras la página www. la primera línea de texto será la línea en la que hemos insertado el ancla.

en la carpeta donde se encuentra esta página tenemos el fichero Word carta. los veremos a continuación: Correo electrónico: Abre la aplicación Outlook Express para escribir un correo electrónico. Por ejemplo. .doc y queremos que nuestros visitantes puedan visualizar e incluso descargar el fichero en su disco duro. El navegador reconoce algunas extensiones como asociadas a un determinado programa (por ejemplo la extensión . un documento Word. tal como este: e-mail para aulaclic Habría que escribir: <a href="mailto:webmaster@aulaclic. Por ejemplo. una referencia externa. Podemos hacer que esté rellenado algún campo más como es el asunto.. En este caso habría que escribir: <a href="mailto:webmaster@aulaclic..pdf al programa Acrobar Reader.) pero también puede ser un fichero comprimido. una hoja de Excel.com?subject=el asunto del mensaje">e-mail para aulaclic</a> Vínculo a ficheros para descarga: El valor del atributo href normalmente será una página web (con extensión htm. para insertar un enlace que permita enviar un correo electrónico a aulaClic. Vínculo vacío: Al pulsar sobre un enlace vacío no se abre ninguna página ni archivo. para insertar el enlace vacío: vinculo vacio Habría que escribir: <a href="#">vinculo vacio</a> Este tipo de enlace resulta útil para trabajar con comportamientos javascript.doc" tarjet=_blank >haz clic aqu&iacute. cuyo destinatario será el especificado en el enlace.En el ejemplo anterior podríamos haber escrito: <a href="#miancla">Enlace al ancla</a> Otros tipos de enlaces Existen otros tipos de enlaces que no conducen a otra página web. un documento con extensión pdf. la de abrir el fichero sin descargarlo en el disco duro del usuario. en este caso definiremos el enlace: haz clic aquí para descargarte el fichero De la siguiente forma: <a href="carta.) en este caso en el cuadro de diálogo aparece una nueva opción. php. Por ejemplo. una referencia relativa al sitio o una referencia relativa al documento. . para descargarte el fichero</a> En este caso hemos utilizado una referencia relativa al documento ya que la carta se encuentra en la misma carpeta que nuestra página. Para ello la referencia del vínculo debe ser "mailto:direcciondecorreo". Para nombrar el fichero podemos utilizar según el caso. El vínculo debe ser el símbolo almohadilla "#"..doc está asociada al programa Word.. .xls al programa Excel.com">e-mail para aulaclic</a> Después de hacer clic en el enlace se abrirá el Outlook Express (si el usuario lo tiene instalado) con la pantalla para redactar un nuevo mensaje y con el campo destinatario rellenado con la direcciondecorreo. Cuando el enlace no es a una página Web nos aparecerá el cuadro de diálogo que seguro habrás visto alguna vez en el que el navegador le pide al usuario permiso para descargar el fichero en su ordenador. asp. html. pero el formato es el mismo que el de cualquier otro enlace.

que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento). aparece un recuadro blanco con una X roja en su lugar.Imagen <img> Todas las páginas web acostumbran a tener un cierto número de imágenes. El atributo border puede tomar valores numéricos. El texto alternativo es muy útil a la hora de diseñar páginas más asequibles a los invidentes ya que los programas lectores son capaces de leer el texto alternativo. Para insertar una imagen es necesario insertar la etiqueta <img>. ya que dicha imagen no se encuentra en el mismo directorio que el documento actual. es recomendable que todos los documentos html se encuentren en un mismo directorio. o dotarla de una mayor información visual. Para trabajar de una forma más sencilla y ordenada. cosa que puede ocurrir al especificar mal el valor del atributo src. Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos. para insertar la siguiente imagen: Habría que escribir: <img src="imagenes/logo_animales. sino que se encuentra dentro de la carpeta imagenes. Borde de una imagen En general. El nombre de la imagen ha de especificarse a través del atributo src. y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos. . verás como aparece el texto Imagen gato. junto con el nombre de la imagen. para ello insertamos el siguiente código: <img src="gatito.gif" alt="Imagen gato" > Pero hemos cometido un error. En lugar de la imagen se mostrará lo siguiente: Si en lugar del código anterior hubiéramos insertado el siguiente código: <img src="imagenes/gatito. que permiten mejorar su apariencia. Por ejemplo.gif y que está dentro de la carpeta imagenes.gif" alt="Imagen gato" > La imagen habría mostrado correctamente: El texto alternativo se muestra también al situar el puntero sobre la imagen. Si situas el puntero sobre la imagen durante unos segundos. gracias al atributo alt. o una carpeta destinada a almacenar archivos de audio. etc. como puede ser una carpeta destinada a almacenar imagenes. al visualizar una página en un navegador las imágenes aparecen sin ningún borde alrededor. Por ejemplo.gif. Dicha etiqueta no necesita etiqueta de cierre. con el texto alternativo Imagen gato. pero es posible establecer uno a través del atributo border. Texto alternativo Cuando una imagen no puede ser visualizada en el navegador. que indican el grosor en píxeles del borde.gif"> Teniendo en cuentra que la imagen se llama logo_animales. imagina que deseamos mostrar una imagen llamada gatito.

esta se muestra en los navegadores con su tamaño original.aulaclic.Por ejemplo. para insertar la siguiente imagen (cuyo tamaño original era de 122 píxeles de anchura y 71 píxeles de altura) con 200 píxeles de anchura y 80 píxeles de altura: Habría que escribir: <img src="imagenes/logo_animales. Por ejemplo. es necesario establecer border="0". como Fireworks.com" target ="_blank" ><img src="imagenes/logo_animales. Alineación de una imagen La alineación de las imágenes se establece a través del atributo align.gif" border="4" > Hay que tener en cuenta que el borde de la imagen siempre será de color negro. para insertar la siguiente imagen con borde: Habría que escribir: <img src="imagenes/logo_animales. en cuyo caso el color del borde será el color establecido para los vínculos. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen. Tamaño de una imagen Cuando insertamos una imagen. sino que lo que varía es la visualización de la imagen en el navegador. a no ser que la imagen contenga un enlace. en comparación de cómo podría quedar modificándola desde un editor externo.gif" width="200" height="80"> Al modificar el tamaño de la imagen a través de estos atributos es muy probable que la imagen resultante no sea de buena calidad. Por ejemplo.gif" border="4" ></a> Si se desea establecer un vínculo sobre una imagen y no se desea que se muestre el borde (que por su color indica que existe dicho vínculo). para insertar la siguiente imagen con borde y con un enlace: Habría que escribir: <a href="http://www. acompañado de % cuando se desee que sea en porcentaje con respecto a la página. El valor que pueden tomar los atributos width y height ha de ser un número. Este atributo indica la alineación de las imágenes con respecto a la línea de texto en la que se encuentran. pero por diversos motivos puede interesarnos modificar dicho tamaño. Los valores del atributo align pueden ser los siguientes: Valor Significado Ejemplo absbottom inferior absoluta absmiddle medio absoluta baseline bottom línea de base inferior Imagen con texto Imagen con texto Imagen con texto Imagen con texto . A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño de la imagen.

que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna. como ocurre con los valores baseline y bottom.. por lo que podremos especificar el número de celdas por fila..</tr> <tr>..gif" align="middle">Una web de animales Tabla <table> Las tablas están formadas por celdas. Estas etiquetas deberán insertarse entre las etiqetas <table> y </table>... Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla.left middle right texttop top derecha texto superior superior izquierda medio Imagen con texto Imagen con texto Imagen con texto Imagen con texto Imagen con texto El resultado de aplicar uno u otro valor puede tener el mismo resultado. que equivale a especificar el número de columnas por fila.. habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>. Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. para crear una tabla con cinco filas escribiríamos: <table> <tr>.. Para insertar el texto y la imagen siguientes: PerrosGatos Una web de animales Habría que escribir: PerrosGatos<img scr="imagenes/logo_animales. Una celda es el resultado de la intersección entre una fila y una columna.. Fila <tr> Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla.</tr> <tr>. imagen y texto COLUMNA Texto dentro de una celda FILA CELDA Para crear una tabla hay que insertar las etiquetas <table> y </table>.</tr> </table> Columna o celda <td> Para crear una tabla no basta con especificar el número de filas. Por lo tanto.</tr> <tr>... o con los valores texttop y top. Por ejemplo.</tr> <tr>. es necesario también especificar el número de columnas. .

acompañado de % cuando se desee que sea en porcentaje height altura de la tabla un número. </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 verás que el ancho de la tabla varía para ocupar siempre la mitad de la ventana).Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas. para modificar la tabla de la página anterior para que quedase como la siguiente: Sabado Domingo Curso HTML Curso Dreamweaver Curso Frontpage Curso Flash Habría que escribir: <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> . Por ejemplo. acompañado de % cuando se desee que sea en porcentaje cellpadding espacio entre el contenido de las celdas y el borde un número cellspacing espacio entre celdas un número border grosor del borde un número align alineación de la tabla dentro de la página left (izquierda) right (derecha) center (centro) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal Por ejemplo.. que la tabla está alineada al centro (center) de la ventana. que el borde (border) tiene un grosor de dos píxeles (es más ancho que las separaciones internas de la tabla que tienen grosor 1). Formato de las celdas Es posible modificar los siguientes atributos de una celda: Atributo Significado Posibles valores . que no hay espacio entre las celdas (cellspacing="0"). para insertar la siguiente tabla: Sabado Domingo Curso HTML Curso Dreamweaver Curso Frontpage Curso Flash Habría que escribir: <table border="1"> <tr> <td>Sabado</td> <td>Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table> Formato de la tabla Es posible modificar los siguientes atributos de una tabla: Atributo Significado Posibles valores width ancho de la tabla un número.. que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99).

Encabezado de columna <th> Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas. Se trata del atributo nowrap. si escribiéramos el siguiente código: . en lugar de en la etiqueta <td>. Por ejemplo. Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita. tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla. a través de la línea <td bgcolor="#66CC99">Domingo</td> por lo que esta fila en vez de ser azul será verde. pero con la línea de código <tr align="center" bgcolor="#0099CC"> se ha establecido el color azul como color de fondo de la primera fila. Por ejemplo. acompañado de % cuando se desee que sea en porcentaje height altura de la tabla un número. Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>. Al mismo tiempo. si escribiéramos el siguiente código: <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> Obtendríamos la siguiente tabla: Sabado Curso HTML Curso Frontpage Domingo Curso Dreamweaver Curso Flash Se ha establecido el color naranja como fondo de toda la tabla.width ancho de la tabla un número. Al mismo tiempo. Este atributo no toma ningún valor. que hace que el contenido de la celda no se ajuste de manera automática al ancho de la columna sino que el ancho de la celda se adapta al ancho del contenido para que el contenido ocupe una sólo fila. Existe otro atributo que puede establecerse sobre las celdas. se ha cambiado el color de la segunda celda de la primera fila por el color verde. y no de color naranja. simplemente se añade o no a las etiqueta <td>. acompañado de % cuando se desee que sea en porcentaje align alineación horizontal del contenido de la celda left (izquierda) right (derecha) center (centro) valign alineación vertical del contenido de la celda baseline (línea de base) bottom (inferior) middle (medio) top (superior) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal También es posible modificar estos atributos de toda una fila. por lo que dicha fila se mostrará de color azul. especificándolos en la etiqueta <tr>. por lo que se utiliza para definir los encabezados o títulos de las columnas. pero podemos poner en su lugar las etiquetas <th> y </th>. los atributos de celda tienen prioridad sobre los de la fila.

si escribiéramos el siguiente código: <table width="50%" border="1" align="center"> <caption align="right" valign="top">Titulo de la tabla<tr> <tr> <th>Sabado</td> ..<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> Obtendríamos la siguiente tabla: Sábado Curso HTML Curso Frontpage Domingo Curso Dreamweaver Curso Flash Título de tabla <caption> No solamente es posible establecer títulos para las columnas. y puede especificarse el valor de los atributos align (con los valores bottom. </tr> </table> Obtendríamos la siguiente tabla con título: Titulo de la tabla Sábado Curso HTML Curso Frontpage Domingo Curso Dreamweaver Curso Flash El título aparece ajustado a la margen derecho de la tabla (align="right") y encima de la tabla (valign="top"). center. Combinar celdas Para las etiquetas <td> y <th> existen los atributos colspan y rowspan. Estas etiquetas han de ir después de la etiqueta <table>. Por ejemplo. también es posible establecer un título para la tabla mediante las etiquetas <caption> y </caption>. y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda. left. Para que quede más claro. para insertar la siguiente tabla: DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE DIFERENCIAS PERRO HOMBRE PEQUEÑO GRANDE Duración crecimiento 10 meses 18 a 24 meses 16 años Tiempo de gestación 58 a 63 días 9 meses Duración de vida del pelo/cabello 1 año 2 a 7 años Habría que escribir el siguiente código: <table width="575" border="2" cellspacing="2"> <tr align="center" valign="middle"> . que se utilizan para combinar celdas. Por ejemplo.. A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda. right y top) y valign (con los valores bottom y top). vamos a ver un ejemplo de su uso.

Por ejemplo. En la segunda fila. como pueden ser el logotipo y la barra de navegación. Cada uno de los marcos de una página. El uso de los atributos colspan y rowspan puede resultar algo complicado al principio.n</td> <td colspan="2">58 a 63 d&iacute. Ya hemos definido dos celdas de la segunda fila. no hay que definir más celdas para esa misma fila.<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&Ntilde.os</td> </tr> </table> Vamos a explicar un poco cómo funciona dicho código. en la imagen de la derecha puedes ver una página con dos marcos.O</th> y <th>GRANDE</th>. aunque sería conveniente que primero intentaras entender el código comparándolo con la tabla que de él se obtiene. El marco izquierdo . ya que permiten mantener fijas algunas partes. Para saber el número de columnas total de la tabla. Además de mejorar la funcionalidad. tenemos que ver el número máximo de columnas que ha de tener la tabla.n de vida del pelo/cabello</td> <td colspan="2">1 a&ntilde. la línea <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th> indica que la celda ocupará cuatro columnas de la tabla (la columna actual y las 3 siguientes). Lo mismo ocurre con la línea <th rowspan="2">HOMBRE</th>. Sabemos que la tabla tiene como mucho cuatro columnas. la línea <th rowspan="2">DIFERENCIAS</th> indica que la celda ocupará dos filas de la tabla (la actual y la siguiente). y no cuatro.os</td> </tr> <tr align="center" valign="middle"> <td>Tiempo de gestaci&oacute. En la segunda fila hemos definido dos celdas que se expanden por dos filas. ya que dos de sus celdas se corresponden con las definidas en la fila anterior. por lo que como en la línea <th colspan="2">PERRO</th> el atributo colspan vale dos. ya tenemos las cuatro celdas. por lo que en la tercera fila habrá que definir solamente dos celdas. mientras que otras sí pueden cambiar. contiene un documento HTML individual.n crecimiento</td> <td>10 meses</td> <td>18 a 24 meses</td> <td>16 a&ntilde.o</td> <td>2 a 7 a&ntilde. En primer lugar.O</th> <th>GRANDE</th> </tr> <tr align="center" valign="middle"> <td>Duraci&oacute. Conjunto de marcos <frameset> Los marcos o frames sirven para distribuir mejor los datos de las páginas.as</td> <td>9 meses</td> </tr> <tr align="center" valign="middle"> <td>Duraci&oacute. Como la tabla tiene como mucho cuatro columnas y el atributo colspan de la celda vale cuatro. pueden mejorar también la apariencia. En la primera fila. tenemos que fijarnos en el número total de celdas que podemos obtener por fila al trazar las líneas verticales que separan las columnas entre sí. En este caso serían cuatro columnas. Es cuestión de práctica. Las dos nuevas celdas son <th>PEQUE&Ntilde.

htm..contiene el documento menu. la tercerá del 25% de la ventana. ya que el cuerpo del documento será el cuerpo de las páginas que se carguen en cada uno de los marcos del conjunto de marcos. frameborder aparece o no el borde de los marcos yes no framespacing separación entre los marcos número border grosor del borde número. es posible dividir marcos en otros marcos.htm). Los conjuntos de marcos se definen a través de las etiquetas <frameset> y </frameset>. por lo que vemos solamente algunos conteptos básicos y ejemplos sencillos.</frameset> Como el atributo rows tiene el valor asterisco. A través de estas etiquetas se indica el número de marcos en que se dividirá la ventana. Por ejemplo. Como hemos visto si queremos utilizar marcos debemos crear una página con la definición del conjunto de marcos (en el ejemplo anterior la página marcos.htm.htm y el derecho el documento perros. rows tamaño de cada una de las columnas en que se divide el documento un número (acompañado de % cuando se desee que sea en porcentaje) por cada fila. que ocuparía todo el alto de la ventana. La primera columna sería de 142 píxeles de ancho. El trabajar con marcos puede resultar una tarea algo complicada. Cuando existan varias columnas o filas con este valor. Como el atributo cols tiene tres valores.*. Es decir. Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las etiquetas <body> y </body>. acompañado de % cuando se desee que sea en porcentaje bordercolor color del borde hexadecimal un un número También es posible incluir asteriscos como valores para los atributos cols y rows. estaríamos dividiendo el documento en tres columnas.. si insertáramos la siguiente línea de código: <frameset rows="*" cols="142. si insertáramos el siguiente código: . y la segunda columna ocuparía lo que quedará de ventana (el 75% de la ventana menos 142 píxeles). que van después de la etiqueta <head>. También es posible anidar marcos. Para poder visualizar la página de este modo. separados por comas. solo habría una fila. separados por comas. que es el que en este caso contiene el grupo de marcos. cada uno de los cuales será una especie de subventana. sobretodo al principio. se repartirán de forma equitativa lo que quede de ventana. Por ejemplo. hemos tenido que abrir en el navegador el documento marcos. En este caso concreto no haría falta poner el atributo rows. Este valor indica que dicha fila o columna ocupará todo lo que quede de ventana o subventana. Los atributos que pueden especificarse sobre la etiqueta <frameset> son los siguientes: Atributo Significado Posibles valores cols tamaño de cada una de las columnas en que se divide el documento un número (acompañado de % cuando se desee que sea en porcentaje) por cada columna.25%">.

*">. y no necesitan etiqueta de cierre..htm" name="marcoizquierdo" scrolling="NO" noresize> <frame src="derecho.htm" name="marcosuperior" frameborder="yes" scrolling="NO" noresize> <frameset cols="150.<frameset cols="142. pero no hemos visto cómo hacer que se carguen las distintas páginas en cada uno de los marcos.*">. y las otras dos se repartirían el resto a partes iguales (se repartirían el 75% de la subventana).*.*"> <frameset rows="80. acompañado de % cuando se desee que sea en porcentaje scrolling se mostrará o no la barra de desplazamiento cuando la página del marco no se pueda visualizar completamente en él yes no auto src documento documento que se cargará en el marco ruta y nombre del Por ejemplo. Estas etiquetas estarán entre las etiquetas <frameset> y </frameset>. La primera sería de 142 píxeles.*" frameborder="yes" framespacing="3" border="3" bordercolor="#FF9900"> <frame src="izquierdo. La segunda columna o subventana de la ventana principal se dividiría a su vez en tres columnas.htm" name="marcoderecho"> . Por último debemos saber que entre las etiquetas <frameset> y </frameset> sólo se pueden encontrar la etiquetas <head> <noframe> <frameset> <frame> y sus correspondientes etiquetas de cierre. Al mismo tiempo. la primera columna o subventana estaría dividida en dos filas o subventanas horizontales. Es posible modificar los siguientes atributos de un marco: Atributo Significado Posibles valores frameborder aparece o no el borde del marco yes o 1 no o 0 name nombre del marco cualquier valor noresize si aparece. el usuario no podrá redimensionar el tamaño de este marco no puede tomar valores marginwidth anchura del margen con respecto a los bordes del marco un número. Marco <frame> Ya hemos visto cómo dividir un documento en varias subventanas o marcos. la primera de ellas del 25% de la subventana. tendríamos que escribir: <frameset cols="150..htm" name="marcoizquierdo" frameborder="no" scrolling="no" noresize> <frame src="derecho. y la otra abarcaría el resto de la ventana. acompañado de % cuando se desee que sea en porcentaje marginheight altura del margen con respecto a los bordes del marco un número.</frameset> <frameset cols="25%. 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.*" framespacing="3" frameborder="yes" border="3" bordercolor="#FF9900"> <frame src="izquierdo. la primera de ellas de 80 píxeles.</frameset> </frameset> Estaríamos dividiendo el documento en dos columnas. tendríamos que escribir: <frameset rows="90.*" framespacing="3" frameborder="yes" border="3" bordercolor="#FF9900"> <frame src="superior.. para crear el conjunto de marcos de la página que aparece si pulsas aquí..htm" name="marcoderecho" frameborder="no" scrolling="auto"> </frameset> Y para crear el conjunto de marcos de la página que aparece si pulsas aquí.

Destino del enlace Como recordarás. en el tema de hipervínculos vimos los posibles destinos de los enlaces.htm">Pulsa aqui para visualizar la página sin marcos. De este modo. . en el caso de que el navegador no soporte los marcos.*").</a> </body> </noframes> </html> Cuando la página intentara ser visualizada en un navegador que no soportase los marcos.. pero que permitan pasar de unos a otros dentro de la misma ventana. si escribiéramos el siguiente código: . por lo que el hecho de que hayan usuarios cuyos navegadores no soportan los marcos puede resultar un problema. _blank: Abre el documento vinculado en una ventana nueva del navegador. <noframes> <body> Este documento tiene marcos y tu navegador no los soporta. Por ejemplo. </body> </noframes> </html> Obtendríamos una página con dos marcos. _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. Estos destinos podían ser _blank.. _parent. podemos incluir un enlace a una de estas páginas. Una buena solución para que el mayor número de usuarios pueda visitar nuestra página. han de introducirse las etiquetas <body> y </body> entre las etiquetas <noframes> y </noframes>. <a href="sinmarcos. Si un navegador no soporta los marcos. aparecería el enlace Pulsa aqui para visualizar la página sin marcos. mostraría una página con el texto Este documento tiene marcos y tu navegador no los soporta. Las etiquetas <noframes> y </noframes> se utilizan para que su contenido sea visualizado en aquellos navegadores que no soportan los marcos. Sin marcos <noframes> Siempre que creamos una página queremos que pueda ser visitada por el mayor número de usuarios. Por ejemplo. no cargará ningún documento en ningún marco.*"). Por ello. a una ventana sin marcos.</frameset> </frameset> Esta última página está dividida en dos marcos horizontales (rows="90. estando el inferior de ellos dividido en dos marcos verticales (cols="150.htm" name="marcoizquierdo"> <frame src="derecho.. y _top. por lo que tendremos que mostrar el cuerpo del documento actual de algún modo. ya que ahora que sabes trabajar con marcos te serán más fáciles de entender.htm" name="marcoderecho"> </frameset> <noframes> <body> Este documento tiene marcos y tu navegador no los soporta. si escribiéramos el siguiente código: <html> <head> . que en el caso de intentar ser visualizada en un navegador que no soportase marcos. </head> <frameset cols="150. es crear nuevas páginas con el contenido de los documentos que deberían mostrarse en los marcos. _self. Vamos a recordar para qué servía cada uno de ellos.*"> <frame src="izquierdo..

etc. Esta tarea puede resultar algo pesada. la etiqueta <form> tiene los siguientes atributos: El atributo action indica una dirección de correo electrónico a la que mandar el formulario._self: Es la opción predeterminada. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario. en una ventana nueva. campos de texto. Por ejemplo. Formulario <form> Un formulario es un elemento que permite recoger datos introducidos por el usuario. Se recomienda utilizar el valor post. menús desplegables. tienen multitud de aplicaciones. El valor post se utiliza cuando sí se van a producir cambios. Los formularios se insertan a través de las etiquetas <form> y </form>. un elemento Flash. Utilizando tablas se consigue una mejor distribución de los elementos del formulario. . Un formulario está formado. una imágen. Su valor puede ser get o post. lo cual quiere decir que los marcos de la ventana desaparecerán al abrir el vínculo en ella. por etiquetas. y al principio complicada. etc. pero da muy buenos resultados finales. El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario. o la dirección del programa que se encargará de procesar el contenido del formulario. en toda la ventana. Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Abre el documento vinculado en el mismo marco o ventana que el vínculo. El atributo method indica el metodo mediante el que se transferirán las variables del formulario. un mapa de imagen. Gracias a todo esto podremos hacer que las barras de navegación y el resto de enlaces funcionen a nuestro antojo. y otra serie de datos sobre los usuarios. El atributo enctype indica el modo en que será cifrada la información para su envío. entre otras cosas. como ocurre cuando se realizan consultas sobre una base de datos.aulaclic. lo que facilita su comprensión y mejora su apariencia. ya sea texto. podríamos insertar el enlace: <a href="http://www. Además de estos destinos para los enlaces. dudas. _top: Abre el documento vinculado en la ventana completa del navegador. y botones. para introducir pedidos a través de la red. Los formularios se utilizan para conocer las opiniones. Podemos añadir todos estos nuevos destinos a cualquier elemento de la página que contenga algún enlace. si tuvieramos un marco con el nombre marcoderecho. Por defecto tiene el valor application/x-www-form-urlencoded. también podrás utilizar los nombres de los distintos marcos de la página. cargando unas u otras páginas en alguno de los marcos. como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos.com" target="marcoderecho">Aulaclic en el marco derecho</a> Este enlace cargaría la página de aulaclic en el marco llamado marcoderecho.

El atributo maxlenght indica el número de caracteres que podrán ser insertados en el campo de texto. y el atributo type indica el tipo de elemento de entrada. El atributo value indica el valor inicial del campo de texto. El atributo name indica el nombre que se desea dar al elemento de entrada. Por ejemplo. </form> A continuación veamos los distintos elementos que se pueden incluir en un formulario. podríamos insertar un formulario escribiendo el siguiente código: <form action="mailto:formularios@aulaclic.Por ejemplo. Es necesario dar nombres diferentes a cada uno de los elementos de un formulario. El atributo size indica el número de caracteres que podrán ser visualizados en el campo de texto. suelen utilizarse para que incluyan comentarios. el atributo type debe tener el valor text. para insertar el campo de texto: þÿ Habría que escribir: <input name="campo" type="text" value="Campo de texto" size="20" maxlength="15"> Campo de contraseña: Para insertar un campo de contraseña.. Para que el área de texto tenga algún valor inicial. para poder identificarlos a la hora de procesarlos. Gracias a las barras de desplazamiento. el atributo type debe tener el valor password. Campo de texto: Para insertar un campo de texto. El atributo cols indica el número de caracteres por línea que podrán ser visualizados en el área de texto por lo que determina al ancho del área de texto. El atributo rows indica el número de líneas que podrán ser visualizadas en el área de texto por lo que determina al alto del área de texto. y el resto de atributos que pueden definirse para cada uno de ellos. mediante el cual será evaluado.. Para insertar un área de texto es necesario incluir las etiquetas <textarea> y </textarea> entre las etiquetas <form> y </form> del formulario. determina el ancho de la caja. El atributo name indica el nombre del área de texto. para insertar el campo de contraseña: Habría que escribir: . es posible insertar más líneas de las especificadas en el atributo rows. Áreas de texto <textarea> Las áreas de texto permiten a los usuarios insertar varias líneas de texto. para insertar el área de texto: Escribe el texto que quieras Habría que escribir: <textarea name="ejemploarea" cols="30" rows="3">Escribe el texto que quieras</textarea> Elementos de entrada <input> Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas <form> y </form> del formulario. Vamos a ver los diferentes tipos de elementos de entrada. Por ejemplo. La única diferencia es que todas las letras escritas en el campo de contraseña serán visualizadas como asteriscos. Por ello.com" method="post" enctype="text/plain" > . y más caracteres por línea de los especificados en el atributo cols. Por ejemplo. habrá que insertarlo entre las etiquetas <textarea> y </textarea>. El resto de atributos son los mismos que para un campo de texto normal.

al pulsar sobre el botón no se realizará ninguna acción. si es el segundo el activado. este tipo hay que utilizarlo con mucho cuidado ya que si permitimos que cualquier internauta nos envie cualquier tipo de fichero nos podríamos encontrar con sorpresas no siempre agradables. Este atributo no toma valores. El atributo value indica el valor asociado al botón de opción. Es el valor a enviar. El atributo value indica el texto que mostrará el botón. Es necesario poner este atributo. para insertar los botones de opción: Habría que escribir: <input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar"> Cuando se envíe el formulario. el atributo type debe tener el valor submit. en este caso habría que incluir el atributo value para que el formulario pase ese valor al programa que recoge los datos del formulario. se insertan varios botones de opción con el mismo nombre (que indica la variable) y con distintos valores. si el primer botón está activado la variable prefiere será igual a estudiar. Campos de selección <select> . La aparición del atributo checked indica que la casilla aparecerá activada inicialmente.. Es necesario poner este atributo. al pulsar sobre el botón se restablecerá el formulario. al pulsar sobre el botón se enviará el formulario. borrándose todos los campos del formulario que hayan sido modificados y adquiriendo su valor inicial. el que esté activado cuando se envia el formulario. restore o button. si es el segundo el activado. Para que el usuario envie un fichero suyo a través del formulario tenemos el tipo file. Por ejemplo. el atributo type debe tener el valor radio. Por ejemplo. La aparición del atributo checked indica que el botón aparecerá activado inicialmente. Sólamente uno de estos botones podrá estar activado. Si el valor es submit. <input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar"> Cuando se envíe el formulario. la variable prefiere valdrá trabajar. Este atributo no toma valores. aunque el usuario no pueda ver su valor. Si el valor es button. Los botones de opción se utilizan cuando se desea que una variable del formulario pueda tomar un solo valor de entre varios posibles. Si el valor es restore. Observa que lo que ponemos como valor no aparece escrito en la página es un datos interno. . si el primer botón está activado la variable prefiere será igual a estudiar. Para ello. para insertar la casilla: Habría que escribir: <input name="casilla" type="checkbox" value="acepto" checked> Botón de opción: Para insertar un botón de opción. Por ejemplo.<input name="contra" type="password" value="contraseña" size="20" maxlength="15"> Botón: Para insertar un botón. Es el valor a enviar. campo que no ve el usuario. aunque el usuario no pueda ver su valor. la variable prefiere valdrá trabajar.. Existen otros tipos como el tipo hidden que sirve para definir un campo oculto. El atributo value indica el valor asociado a la casilla de verificación. el atributo type debe tener el valor checkbox. su valor será el que tendrá la variable. Observa que lo que ponemos como valor no aparece escrito en la página es un datos interno. para insertar el botón: Habría que escribir: <input name="boton" type="submit" value="Enviar"> Casilla de verificación: Para insertar una casilla de verificación.

El atributo value indica el valor a enviar si se selecciona el elemento. se enviará el texto de la opción. Los formatos de sonido más habituales en Internet son el WAV. ayudándose de la tecla Ctrl. Si no se especifica este atributo. Este atributo no toma valores. podríamos insertar un sonido de fondo escribiendo el siguiente código: <bgsound src="varios/audio. Esta nueva etiqueta no necesita etiqueta de cierre. El navegador Internet Explorer puede reconocer la etiqueta <bgsound>. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio. aunque existen otros formatos diferentes que también pueden utilizarse. si el sonido es apropiado al contenido de la página. por lo que el escuchar también sonido en cada página que visita puede resultar algo molesto. habrá que asignarle el valor infinite o -1. Para insertar uno de estos menús o listas es necesario insertar las etiquetas <select> y </select> en un formulario. que se utiliza para incluir sonido de fondo. A través del atributo src hay que especificar la ruta y el nombre del archivo de audio. para insertar el menú: þÿ Habría que escribir: <select name="mascota"> <option selected>--. por lo que el usuario no podrá seleccionar sus elementos. La aparición del atributo selected indica que el elemento aparecerá seleccionado. Si se desea que el archivo de audio se reproduzca continuamente en un bucle. Cada uno de los elementos de la lista ha de insertarse entre las etiquetas <option> y </option>. Por ejemplo. El atributo name indica el nombre del menú o lista será el nombre de la variable que contendrá el valor seleccionado. determina el alto de la lista. Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Por ejemplo. y que no por ello sea de mala calidad. El atributo size indica el número de elementos de la lista que pueden ser visualizados al mismo tiempo. el MP3 y en algunas ocasiones el MIDI. Este atributo tampoco toma valores. La aparición del atributo multiple indica que el usuario podrá seleccionar varios elementos de la lista al mismo tiempo. Este atributo no toma valores.Elige animal ---</option> <option>Perro</option> <option>Gato</option> </select> Y para insertar la lista: þÿ Habría que escribir: <select name="animal" size="3" multiple> <option selected>---Elige animales---</option> <option value="ave">Loro</option> <option>Perro</option> <option>Gato</option> <option>Pez</option> </select> Sonido de fondo <bgsound> Añadir una música de fondo a una página tiene pros y contras.Los campos de selección se utilizan para insertar menús y listas desplegables. La aparición del atributo disabled indica que la lista estará desactivada. que se encuentra entre las etiquetas <option> y </option>.mid" loop="-1"> . puede hacerla más atractiva en contrapartida la descarga del archivo de sonido supone una carga que puede ralentizar la visualización de la página y además muchos usuarios suelen estar escuchando otro tipo de música cuando navega en Internet.

Los formatos de vídeo que suelen utilizarse en Internet son el AVI.avi" autostart="false" loop="true"> Existen algunos navegadores que no reconocen la etiqueta <bgsound>. Puedes reproducirlo pulsando sobre los controles. Cuando su valor estrue.mid" autostart="false" loop="true"> Si no se desea que se muestren los controles de un archivo de audio. En su lugar. archivos de vídeo. pero en realidad no es necesaria. se podría escribir: <embed src="varios/cotorra.La etiqueta <bgsound> puede situarse en cualquier parte del documento. No hay que olvidar que para los archivos de audio también se mostrarán los controles de reproducción. Estos atributos pueden tomar como valor un número. Esto puede cambiarse a través de los atributos autostart y loop. La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. y necesitan que el usuario tenga instalado el plug-in para poder ser visualizadas. y puede tomar los valores true o false. Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página. pero debido a que tiene más posibilidades de que se . por ejemplo. Para insertar el vídeo anterior. Si no se especifican estos atributos. por lo que no es posible utilizar esta etiqueta para incluir un sonido de fondo.mid" autostart="true" loop="true" width="0" height="0" > Películas Flash <object> . A la derecha tienes un ejemplo de un archivo de video. Las animaciones Flash se insertan del mismo modo que los archivos de audio y de vídeo. Si lo deseas. como pueden ser archivos de audio. se ocultan los controles de reproducción. el MPEG y el MOV. porque va a ser utilizado como sonido de fondo. puedes reproducirlo pulsando sobre los controles. 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. Estas películas pueden crearse mediante el programa Flash de Macromedia. para el que se muestran los controles de video. ya que entre las etiquetas <embed> y </embed> no hay que insertar nada. y se reproducen solamente una vez. se podría escribir: <embed src="varios/audio. para el que se muestran los controles de audio. y por lo tanto. que funciona del mismo modo para los archivos de audio y de vídeo. Puede incluirse la etiqueta de cierre. se utiliza la etiqueta <embed>.. También puede utilizarse el atributo hidden. El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la página. y se utilizan a modo de presentación hacia los usuarios. pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco. Para insertar el archivo de audio anterior. Suelen incluirse en las páginas iniciales de los sitios web. incluirla justo debajo de la etiqueta <body>. Las películas Flash son animaciones con la extensión SWF. por si deseamos hacerle alguna modificación. la consola de control de vídeo se mostrará con el tamaño más adecuado al tamaño del vídeo. A la derecha tienes un ejemplo de un archivo de sonido. etc. Por ejemplo.. Vídeo y audio <embed> En ocasiones puede interesar incluir algún vídeo en una página web.mid" autostart="true" loop="true" hidden="true" > O también: <embed src="varios/audio. También pueden utilizarse como botones de las barras de navegación. y también puede tomar los valores true o false. con los valores true o false. La etiqueta <object> puede utilizarse para insertar diferentes objetos dentro de la página. precisan de mucho tiempo para descargarse. imágenes. Podríamos. pero es preferible que la situemos siempre en un sitio fácil de encontrar. Los atributos width (anchura) y height (altura) sirven para especificar el tamaño de la consola de control de vídeo. A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo. a través de la etiqueta <embed>. para insertar sonido de fondo se podría escribir: <embed src="varios/audio. puede hacerse que los atributos width (anchura) y height (altura) valgan cero. El atributo loop indica si el archivo se reproducirá continuamente en un bucle. que indica el tamaño en píxeles.

A través del atributo pluginspage se especifica la página desde la que se podrá descargar el plug-in necesario para reproducir la animación Flash. es necesario incluir también una etiqueta <param>.0" width="200" height="100"> <param name="movie" value="graficos/pelicula.swf">. Como el uso de la etiqueta <object> puede resultar bastante complicado. y ha de contener los atributos name y value.swf"> <param name="quality" value="high"> <embed src="graficos/pelicula. se considera que la calidad será automáticamente alta. para indicar la ruta del archivo. Para hacer que una animación no se reproduzca automáticamente. necesita también de la etiqueta <object>. Por ejemplo. y deben tener el mismo valor. para que si algún usuario no lo tiene aún instalado en su ordenador pueda descargarlo. A través del atributo classid se identifica al objeto. Por último. autolow (baja automática). Por eso aparece la línea <param name="quality" value="high">.0. En ella aparecen tres atributos que no conocíamos. para que el navegador pueda saber qué tipo de programa necesita ejecutar para reproducir la animación. que en la etiqueta <embed>. La etiqueta <param> no necesita etiqueta de cierre. el atributo classid debe valer clsid:D27CDB6E-AE6D-11cf-96B8-444553540000. o low (baja).com/go/getflashplayer" type="application/x-shockwave-flash"></embed> </object> En primer lugar vamos a analizar la etiqueta <embed>.ca b#version=6. en la que name tenga el valor quality. Para que la animación no se reproduzca automáticamente. en la que name tenga el valor movie. . Por eso aparece la línea <param name="movie" value="graficos/pelicula.com/pub/shockwave/cabs/flash/swflash. que debe incluirse dentro de la etiqueta <embed>. el valor de play debe ser false. A través del atributo quality se especifica la calidad con la que se reproducirá la animación Flash. A través del atributo codebase se especifica la dirección en la que se encuentran los componentes externos necesarios para reproducir la animación.swf" width="200" height="100" quality="high" pluginspage="http://www. habrá que indicarlo mediante el atributo play. A través del atributo type se especifica el tipo de fichero. Cuando el objeto es una animación Flash. El atributo name indica el nombre de la característica que va a ser definida.macromedia. Por ejemplo.macromedia. y su reproducción es continua. es necesario incluir también una etiqueta <param>. que en la etiqueta <embed> aparece especificado por el atributo src. y value indica su valor. Ahora vamos a analizar la etiqueta <object>. vamos a analizar el código que habría que escribir para insertar la animación Flash de la derecha. vamos a analizar la etiqueta <param>. El código a escribir sería el siguiente: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download. Los atributos width y height se utilizan del mismo modo. Si no se incluye este atributo. El atributo play puede valer true o false.produzcan incompatibilidades entre los distintos navegadores.29. vamos a ver solamente un caso concreto para la inserción de un archivo SWF. que en la etiqueta <embed> aparece especificado por el atributo quality. Para indicar la calidad de reproducción. Puede valer high (alta). Las animaciones Flash se reproducen de forma automática al cargarse la página. Esta etiqueta se utiliza para especificar los valores necesarios para la inicialización de un objeto.

Si no se estableciera este valor.. El tercer valor ha de ser la distancia del margen superior. Pueden tomar un número como valor. hasta la que no se visualizará el contenido de la capa. aunque la capa a la que pertenece no se esté viendo) y hidden (la capa está oculta). La ruta y el nombre de la imagen han de aparecer entre paréntesis. Puede tomar los valores visible (se muestra todo el contenido de la capa. Para que la animación no se reproduzca continuamente. A través de la propiedad z-index puede establecerse el índice de la capa dentro de la página. en los que podemos insertar contenido HTML. el valor de loop debe ser false. sirven para agrupar bloques de texto. A través de la propiedad visibility puede establecerse la visibilidad de la capa. A través de las propiedades width (anchura) y height (altura) se establece el tamaño de la capa. . aunque el contenido de la capa pueda ser visualizado totalmente) y auto (se muestra la barra de desplazamiento cuando sea necesario).También habrá que insertar la línea <param name="play" value="false">. Podemos insertar una capa a través de las etiquetas <div> y </div>. por ser la capa demasiado pequeña. es necesario incluir también la propiedad position con el valor absolute. visible (muestra la capa. lo que indica que la distancia se corresponderá con los bordes de la capa. hidden (no es posible visualizar el contenido de la capa que no quepa en ella). acompañado de px cuando haga referencia a píxeles. solo se reproducirá una vez. haciendo que partes de ella no sean visibles. A través de las propiedades layer-background-color y background-color se puede establecer un color de fondo para la capa. y acompañado de % cuando haga referencia a un porcentaje. El cuarto valor ha de ser la distancia del margen izquierdo. A través del atributo id se le da un nombre a la capa. Ha de ser un número hexadecimal. Para que la capa aparezca en la posición establecida. El segundo valor ha de ser la distancia del margen izquierdo. lo que proporciona grandes posibilidades de diseño. después de la palabra url. Puede tomar los valores inherit (se muestra la capa mientras la capa a la que pertenece también se esté mostrando).. A través de la propiedad clip puede establecerse el área de la capa que podrá ser visualizado. que como ya vimos. De este modo. Siempre es un valor numérico. A través de la propiedad overflow puede establecerse si se mostrará o no el contenido de la capa cuando no pueda ser visualizado en su totalidad. Las capas no son más que unos recuadros. Dichas capas pueden ocultarse y solaparse entre sí. después de la palabra url. en la posición en la que hubiera sido insertada dentro del código. Lo que hace es recortar la capa. El primer valor ha de ser la distancia (se asume que está en píxeles) del margen superior. También es posible incluir auto como valor de alguna de estas distancias. Pueden tomar un número como valor. A través de las propiedades layer-background-image y background-image se puede establecer una imagen de fondo para la capa. aunque esto implique hacer que la capa sea más grande). Una capa podrá ser solapada por aquellas capas cuyo índice sea mayor. También habrá que insertar la línea <param name="loop" value="false">. Ha de especificarse la distancia de los márgenes de la capa entre paréntesis. que pueden situarse en cualquier parte de la página. la capa se mostraría pegada al margen izquierdo. scroll (se muestra la barra de desplazamiento. hasta la que no se visualizará el contenido de la capa. Habrá que insertar el atributo loop en la etiqueta <embed>. y a través del atributo style se establecen el resto de propiedades de la capa. hasta la que se visualizará el contenido de la capa. acompañado de px cuando haga referencia a píxeles. A través de las propiedades left (izquierda) y top (superior) se establece la posición de la capa respecto a los márgenes izquierdo y superior de la página. El atributo loop puede valer true o false. Lo mismo ocurre para hacer que la reproducción no sea continua. Capa <div> . hasta la que se visualizará el contenido de la capa. y acompañado de % cuando haga referencia a un porcentaje.

clip: rect(1 auto auto 3). la capa volverá a ocultarse. ni tampoco muy complicados. La utilización de JavaScript permite variar dinámicamente el contenido del documento. width:200px. es que las propiedades de la capa se especifican como atributos independientes. También existen las etiquetas <layer> y </layer>. dentro de una capa. pero solamente son reconocidas por el navegador Netscape. Situa el puntero sobre la imagen del gato para ver lo que ocurre. Dos de los lenguajes de script más utilizados hoy en día son JavaScript y VBScript. lo normal es que los programas no sean muy extensos. dentro de una capa. Por ejemplo. ya que puede ser reconocido por un mayor número de navegadores. Estás visualizando una capa que estaba oculta. Al mismo tiempo.Todas estas propiedades se especifican a través del atributo style. validar formularios. y es compatible con un mayor número de navegadores. cadenas de caracteres. son lenguajes que sólo funcionan en las aplicaciones para las que han sido creados. . height:115px. etc. podríamos insertar una capa escribiendo el siguiente código: <div id="capa" style="position:absolute. sino que se utiliza el símbolo : (dos puntos). </layer> Lenguajes de script Los lenguajes de script. al igual que el resto de lenguajes de programación. visibility: visible.gif). La principal diferencia de la etiqueta <layer>. y deben aparecer entre comillas dobles. </div> Otra forma de insertar capas es utilizando las etiquetas <span> y </span>. La etiqueta <span> se utiliza del mismo modo que la etiqueta <div>. layer-background-color: #0099CC. etc.).gif"> Este texto est&aacute. por lo que la ejecución puede resultar más lenta que en el caso de estar ejecutando un archivo ejecutable. disponen de variables. Son lenguajes para ser interpretados. en lo que se refiere a las otras dos.gif). lo que puede producir errores y dificultar la depuración de los programas. por lo que no generan ningún archivo ejecutable. podríamos insertar una capa escribiendo el siguiente código: <layer name="capa" width="200px" height="115px" z-index="3" visibility="show" bgcolor="#0099CC" background="imagenes/fondocapa."> Este texto est&aacute. layer-background-image: url(imagenes/fondocapa. Por ejemplo. pero un menor control sobre los tipos de variables (enteros. El lenguaje VBScript fue creado por Microsoft. Si dejas de situar el puntero sobre la imagen. Los lenguajes de script pretenden ser sencillos a la hora de programar. z-index:3. Los lenguajes de script. por lo que es posible asignar valores de distintos tipos a una misma variable. Pero no es recomendable utilizar este lenguaje de script en nuestras páginas. Para asignar los valores a las propiedades no se utiliza el símbolo = (igual). background-image: url(imagenes/fondocapa. ya que solamente podría ser interpretado por el navegador Internet Explorer. Las aplicaciones se encargan de ejecutar los programas mientras van interpretando el código. Por ejemplo. background-color: #0099CC. no para ser compilados. también conocidos como lenguajes de macros. Es más recomendable utilizar el lenguaje JavaScript. con un punto y coma detrás de cada una. métodos y objetos predefinidos. creado por Netscape. y no como valores dentro del atributo style. podemos crear funciones que permitan mostrar y ocultar capas. en lugar de las etiquetas <div> y </div>. y hay muchos usuarios que utilizan navegadores diferentes. por lo que puede ser interpretado por todas sus aplicaciones.

las funciones se insertan como comentarios. como Dreamweaver. } //--> </script> La función que hemos insertado es una función muy sencilla. mostrará el código de las funciones que ésta contenga. Introducción Los estilos CSS (Cascading Style Sheets) son hojas de estilo de actualización automática. En las funciones no hay que insertar caracteres especiales.Si utilizáramos un editor visual. que muestra un mensaje de alerta. es necesario insertar las etiquetas <script> y </script> dentro de la cabecera (entre las etiquetas <head> y </head>) o dentro del cuerpo de la página. activado por una función javascript"). entre <!-y //-->. podríamos insertar el siguiente código: <script> <!-function Muestramensaje() { alert("Esto es un mensaje. Esta aplicación permite insertar comportamientos a través de menús y paneles. Por ejemplo. que en este caso será JavaScript. Entre las etiquetas <script> y </script> habrá que insertar las funciones JavaScript. Si dentro del documento insertáramos el siguiente código: <img src="imagenes/logo_animales. que al ser pulsada llama a la función. Para que esto no ocurra. Podemos utilizar muchos otros atributos para llamar a funciones. podríamos insertar algunos comportamientos de este tipo sin la necesidad de escribir ni una sola línea de código JavaScript. como pueden ser onDblClick (al hacer doble clic). generando automáticamente el código JavaScript necesario. JavaScript <script> Para insertar funciones JavaScript en un documento. . onMouseOver (mientras el cursor este encima) o onMouseOut (cuando el cursor deje de estar encima).gif" onClick="Muestramensaje"> Obtendríamos una imagen como la que aparece a continuación. debido a un fallo de Netscape corremos el riesgo de que al ejecutarse la función en un ordenador con un juego de caracteres distinto se produzcan fallos. A través del atributo language hay que especificar el lenguaje de script. Pulsa sobre la imagen para ver lo que ocurre: A través del atributo onClick hemos definido la función que será llamada al pulsarse sobre el objeto. Si un navegador no reconoce la etiqueta <script>.

o el nombre de una etiqueta HTML. Para poder utilizar un nombre inventado. Por ejemplo. para aplicar ese estilo al siguiente párrafo del documento: <p>texto con estilo</p> Habría que escribir: <p class="mitexto">texto con estilo</p> .Helvetica. De este modo. sino que se utiliza el símbolo : (dos puntos). font-size:18px. A través del atributo href se especifica la hoja de estilo que se va a vincular al documento. todos los hiperenlaces de la página o del sitio adquirirían la apariencia definida en ese estilo y con un sólo cambio en la hoja de estilos podemos cambiar de golpe el estilo de todos los enlaces en todas las páginas vinculadas a este estilo. Esto es debido a que se está especificando un estilo. con un punto y coma detrás de cada una. podríamos vincular una hoja de estilo escribiendo el siguiente código. Esta etiqueta no necesita etiqueta de cierre. con sintaxis CSS. o por el nombre de una etiqueta seguida de un punto. y aparecen entre comillas dobles. para especificar las propiedades de una capa no se utilizan etiquetas normales de HTML. En cambio. entre las etiquetas <head> y </head>. y entre llaves se especifica la lista de propiedades (en minúsculas) que se corresponden con dicho estilo. y pueden guardarse con la extensión TXT. por lo que su valor ha de ser stylesheet. Se pueden definir estilos independientes o estilos asociados a determinadas etiquetas por ejmplo a la etiqueta <a> (que corresponde a los hiperenlaces). Al estar la definición de los estilos en un archivo externo a las páginas y común a todas las páginas del sitio (es recomendable) el aspecto de nuestras páginas será más homogéneo y además podremos cambiar ese aspecto de manera segura e inmediata cambiando únicamente la hoja de estilos. no existe ninguna etiqueta <mitexto>. habría que insertar el atributo class en su etiqueta. Para aplicar este estilo a un elemento.txt" rel="stylesheet" type="text/css" > Sintaxis de las hojas de estilo Como recordarás. Todas las propiedades se especifican a través del atributo style. aunque estos navegadores suelen ser versiones antiguas.Se usan principalmente para definir estilos que luego se aplicarán a las páginas de nuestro sitio. pero sin vincular ninguna hoja de estilo a la página. tiene que estar precedido por un punto. se aplicarían directamente las propiedades especificadas para la etiqueta <body>. Un documento puede tener varias hojas de estilo vinculadas. incluso a veces permiten definir características que no permiten definir los estilos HTML. <link href="misestilos.mitexto {font-family: Arial. El inconveniente que tiene trabajar con hojas de estilos es que algunos navegadores no las soportan y las ignoran. Para asignar los valores a las propiedades no se utiliza el símbolo = (igual). El nombre del estilo puede ser un nombre inventado por nosotros. Por ejemplo. Para especificar las propiedades dentro de una hoja de estilo. Cada una de estas propiedades tiene que tener un punto y coma detrás. A través del atributo rel se tiene que especificar que se está vinculando una hoja de estilo. A través del atributo type se tiene que especificar que el archivo es de texto. por lo que ocurrirá en pocos casos. por lo que para aplicar este estilo a algún elemento de la página habría que indicarlo de algún modo. como el color de fondo para el texto por ejemplo.Helvetica.} Si vinculáramos esta hoja de estilo a un documento. En primer lugar se pone el nombre del estilo. font-family: Arial. Las hojas de estilo pueden crearse con cualquier editor de texto. por lo que su valor ha de ser text/css.} . Para vincular una hoja de estilo a un documento es necesario insertar la etiqueta <link> en el documento. en una hoja de estilo podríamos tener lo siguiente: body {background-color: #006699. Vincular una hoja de estilo Para poder incluir las propiedades de una hoja de estilo en un documento. la sintaxis es muy similar. Por ejemplo. y los valores se asignan con el símbolo : (dos puntos). hay que vincularla a él. como puede ser el Bloc de notas.

entre otras cosas. de applets java y de hojas de estilo CSS. Al mismo tiempo. por lo que los programas estarán protegidos ante plagios. el servidor ejecuta los scripts y genera otra página como resultado. PHP. sería necesario incluir la etiqueta <span> (que agrupa bloques. Por ejemplo. es que los usuarios no tienen acceso al código original. El lenguaje PHP (Hipertext Preprocesor) permite realizar muchos tipos de aplicaciones web gracias su gran librería de funciones y documentación. y que contiene efectos especiales. etc. Ofrece muchas ventajas frente a ASP. Es necesario combinar HTML con otros lenguajes. gracias. Otras ventajas que proporciona programar con lenguajes interpretados por el servidor. ASP. Para crear una página de este tipo no basta con programar en HTML. al no existir las etiquetas necesarias para ello.Pero para aplicar el estilo únicamente a una parte del contenido de la etiqueta. Actualmente se ha presentado. XML El lenguaje HTML ha ido evolucionando rápidamente. ASP tiene un gran inconveniente. sin producir un cambio de línea). pero existen otros lenguajes que son interpretados por el servidor.NET. Pensaron que el webmaster estaba utilizando su programa y habían comprobado que no figuraba como comprador en sus archivos. y es la que visualiza el navegador del usuario. pidió explicaciones a un webmaster tras visitar su página web. También puede hacerse uso de capas. por lo que la empresa tuvo que disculparse por la acusación. PHP o JSP (Java). Aunque los navegadores aún no soportan toda la potencia de XML. Esta nueva página sólamente contiene HTML. una nueva versión llamada ASP. ya que este lenguaje es muy limitado. Programación web En el tema anterior hablamos de JavaScript y VBScript. poseedora de un programa que permite "dar vida" a las páginas web. fue creado por Microsoft. A la combinación de estos elementos se le conoce como DHTML (HTML dinámico). de animaciones Flash. Estos lenguajes son interpretados y ejecutados directamente por el navegador del usuario que visualiza la página. que ofrece bastantes mejoras en lo que se refiere a posibilidades y rapidez de ejecución. Existe una anécdota muy curiosa sobre DHTML : Una conocida marca. cada vez está siendo más utilizado. se puede acceder a mayor número de recursos almacenados en el servidor. y creó el lenguaje XML (Extensible Markup Language). El lenguaje ASP (Active Server Pages). sino HTML dinámico. Consiste en incluir instrucciones Visual Basic Script o Jscript dentro del documento HTML. y no nos permite hacer en nuestras páginas todo lo que nos gustaría. Esto evita que se puedan producir errores al interpretar el código. como ocurre con VBScript si intenta ser interpretado por un navegador que no sea Internet Explorer. como es el caso de ASP. dos lenguajes de programación web. VBScript. al igual que VBScript. que es más seguro. Cuando un usuario pretende visualizar una página. Esto demuestra lo que se puede llegar a hacer con HTML dinámico. como pueden ser bases de datos. entre ellas. y que es gratuito. habría que escribir: <p>texto con <span class="mitexto">estilo</span></p> HTML dinámico Una página dinámica es una página que permite al usuario interactuar con ella. . para aplicar el estilo únicamente a la palabra estilo. Los lenguajes de este tipo más utilizados hoy en día son ASP y PHP. como podría ser en este caso una palabra del párrafo. con algunas diferencias en la sintaxis. que es más rápido. como JavaScript. ya que aporta muchas ventajas. El webmaster respondió que no estaba utilizando el programa en cuestión. Pero este lenguaje es bastante rígido. ya que precisa que el servidor funcione sobre Windows NT o 2000. El comité W3C comenzó a desarrollar nuevas versiones de HTML para permitir nuevas posibilidades a la hora de programar. Java. a su sencillez.

tulo de las canciones que incluye</b></a></font> Mientras que en XML podríamos escribir: <?xml version="1. Practicar las operaciones que hay que realizar para insertar una imagen. y no pensar directamente en cómo se mostrarán los datos. Ejercicio paso a paso. Pero no existe ninguna DTD que defina la estructura y el contenido de un documento XML. (con un descuento del 10% de su precio original)</b></font> </blockquote> <font size="2"><a href="tragickingdom. utilizando cualquier editor de texto. es más sencilla la programación con XML. ya que permite incluir cualquier carácter que se esté utilizando hoy en día.a en 1995</b></font></em> <blockquote> <font size="2"><b>A la venta por solo 16 &euro. y permite definir nuestros propios tipos de documentos.htm"><font size="2">Tragic Kingdom</font></a></b> <br> <em><font color="#CC3366" size="2"><b>Publicado en Espa&ntilde. Cualquier programa podrá trabajar de forma más eficiente con XML. que descarta aquellas partes del SGML que raramente se utilizan. Por ejemplo.htm"><b>Puedes consultar el t&iacute.XML es un lenguaje comprensible para las personas.htm"/> </cdaudio> A simple vista. En realidad. XML también ofrece la posibilidad de gestionar cualquier conjunto de caracteres internacional. y estos datos resultan muy útiles para realizar búsquedas o filtrar información.0"?> <cdaudio> <grupo>No Doubt</grupo> <titulo>Tragic Kingdom</titulo> <publicacion>1995</publicacion> <precio cantidad="16" moneda="euro"/> <descuento porcentaje="20"/> <enlacecanciones href="tragickingdom. Incluso estructuras de datos tan complicadas como gráficos pueden representarse en forma de árbol. Por ello. basados en el SGML (Standard Generalized Markup Language). XML es más sencillo que SGML. Insertar una imagen Objetivo. Los documentos escritos en este lenguaje pueden leerse. crearse y modificarse de forma sencilla. En realidad. el SGML define la estructura y el contenido de cada tipo de documento. . Con XML lo que se pretende es etiquetar e identificar el contenido de las páginas. XML es una versión resumida del SGML.. para insertar esto en una página web: NO DOUBT Tragic Kingdom Publicado en España en 1995 A la venta por solo 16 € (con un descuento del 10% de su precio original) Puedes consultar el título de las canciones que incluye En HTML habría que escribir: <font color="#006699" size="4"><b>NO DOUBT </b></font> <b><a href="tragickingdom. lo que facilita el comercio internacional a través de Internet. como pueden ser caracteres en chino o en árabe. Por ejemplo. SGML es el estándar internacional para la definición de la estructura y el contenido de diferentes tipos de documentos electrónicos. Es capaz de expresar estructuras complejas de datos. Esta es una característica muy útil. con nuestras propias etiquetas. Mediante una DTD (Definición de Tipo de Documento). existe una DTD que define cómo han de ser los documentos HTML. XML y HTML son lenguajes distintos. Puede utilizarse para definir muchas más características referentes al contenido de los documentos de las que permite la etiqueta <meta> de HTML.

. que acabas de guardar. Ahora vamos a sustituir las palabras INICIO PERROS GATOS y CONSULTAS por botones Flash.jpg que se encuentra en la directorio imagenes dentro de la carpeta animales (la carpeta donde se encuentra el archivo inicio. No olvides encender unos altavoces que estén conectados a tu ordenador. . que acabas de guardar..htm.htm. 1 Abre el archivo inicio. en un navegador. ábrelo para realizar el ejercicio. y comprueba que obtienes una página como la que aparece si pulsas aquí. Ejercicio 2. 1 Abre el documento menu.MID como sonido de fondo de la página. que se encuentra en la carpeta animales. que acabas de guardar. para comprobar que el archivo de audio se reproduce correctamente. en un navegador.jpg" alt="visita aulaclic" width="90" height="32" border="4"> Con este código estarás asociando el enlace con la imagen aulaclic.MID" loop="-1"> Con este código estarás estableciendo el archivo audioanimales. y escribe el siguiente código en ella: <bgsound src="varios/audioanimales. 4 Abre el documento menu. 4 Abre el documento menu. 3 Haz clic sobre la opción Guardar del menú Archivo. al ser este color el definido para los enlaces de esta página. 2 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales 2 Añade delante de la primera etiqueta <p . en un navegador. Primero añadiremos una música de fondo a una página. y 32 píxeles de alto (atributos width y height).gif" alt="gatito" border="0"> 3 Haz clic sobre la opción Guardar del menú Archivo. 3 Haz clic sobre la opción Guardar del menú Archivo. 2 Inserta una línea en blanco debajo de la etiqueta <basefont>. se mostrará el texto visita aulaclic (atributo alt).htm. la siguiente línea: <p align="center"><img src="imagenes/logo_animales. 1 Abre el archivo menu. que se encuentra en la carpeta animales. Ejercicio 1. 4 Abre el documento menu. Ejercicio 3. 2 Sustituye la línea <b> visita aulaclic </b> que está incluida dentro de un hiperenlace.htm. y comprueba que obtienes una página como la que aparece si pulsas aquí. 1 Abre el archivo gatos. que acabas de guardar.htm. Practicar las operaciones que hay que realizar para insertar sonido de fondo. de la carpeta originales/animales del curso. Tendrá un borde de 4 píxeles (atributo border). en un navegador.htm. que se reproducirá continuamente en un bucle infinito (loop="-1"). 2 Añade detrás de la etiqueta </ul> la línea: <img src="imagenes/gatito. 4 Abre el documento inicio.htm.htm.gif" width="122" height="85"> </p> El párrafo se añade para centrar la imagen. Insertar sonido de fondo Objetivo. La imagen medirá 90 píxeles de ancho. y comprueba que obtienes una página como la que aparece si pulsas aquí. y comprueba que obtienes Ejercicio paso a paso.htm. o se situe el puntero sobre ella.Si no tienes abierto el Bloc de notas. En el caso de que la imagen no pueda ser visualizada. que aparecerá de color rojo. que se encuentra en la carpeta ejercicios_html/animales. por la línea <img src="imagenes/aulaclic. 3 Haz clic sobre la opción Guardar del menú Archivo.

4 En Tipo:.0.macromedia.macromedia. 3 Sustituye la palabra PERROS por el siguiente código: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.0.com/pub/shockwave/cabs/flash/swflash.macromedia.cab #version=6.macromedia.0" width="100" height="23"> <param name="movie" value="binicio.0" width="100" height="23"> <param name="movie" value="bconsultas.29.swf" width="100" height="23" quality="high" pluginspage="http://www. y comprueba que obtienes una página como la que aparece si pulsas aquí.com/go/getflashplayer" type="application/xshockwave-flash" base="."> </embed> </object> 6 Haz clic sobre la opción Guardar del menú Archivo.swf" width="100" height="23" quality="high" pluginspage="http://www.swf"> <param name="quality" value="high"> <embed src="bperros.0" width="100" height="23"> <param name="movie" value="bperros. 1 Si no tienes abierto el Bloc de notas.swf" width="100" height="23" quality="high" pluginspage="http://www.1 Abre otra vez el archivo menu.29. 2 Haz clic sobre el menú Archivo.cab #version=6.htm.macromedia.0.com/go/getflashplayer" type="application/xshockwave-flash" > </embed> </object> 4 Sustituye la palabra GATOS por el siguiente código: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.swf"> <param name="quality" value="high"> <embed src="binicio. Practicar las operaciones que hay que realizar para crear una capa y modificar sus propiedades.com/pub/shockwave/cabs/flash/swflash. elige Todos los archivos."> </embed> </object> 5 Sustituye la palabra CONSULTAS por el siguiente código: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.macromedia. en un navegador.0" width="100" height="23"> <param name="movie" value="bgatos.htm.29.com/go/getflashplayer" type="application/xshockwave-flash" > </embed> </object> Nota: se ha escrito en el color de los valores del usuario unicamente los valores que cambian al insertar un botón Flash.swf"> <param name="quality" value="high"> <embed src="bconsultas.swf" width="100" height="23" quality="high" pluginspage="http://www.macromedia.com/pub/shockwave/cabs/flash/swflash. que acabas de guardar.cab #version=6. ábrelo para realizar el ejercicio.com/go/getflashplayer" type="application/xshockwave-flash" base=".29.0. 2 Sustituye la palabra INICIO por el siguiente código: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download. Objetivo.swf"> <param name="quality" value="high"> <embed src="bgatos. 3 Haz clic sobre la opción Abrir. 7 Abre el documento menu.com/pub/shockwave/cabs/flash/swflash. . Se abrirá una nueva ventana. que se encuentra en la carpeta animales.cab #version=6.

8 Abre el documento gatos.length) { d=parent. width:320px. Practicar las operaciones que hay que realizar para hacer llamadas a funciones javascript. onresize=MM_reloadPage. que acabas de guardar.document. if(!d) d=document. layer-backgroundcolor:#FFFF99. después de layer-background-color:#FFFF99.forms[i][n].v.i.MM_pgW=innerWidth. } function MM_showHideLayers() { //v6.gif" ></p> <p align="center"><a href="#"><font color="#000000" size="4">Cerrar</font></a></p> </div> Este código define una capa llamada gatosemana.) 7 Haz clic en la opción Guardar del menú Archivo.i++) x=MM_findObj(n.htm. top: 69px. n=n.x. background-color:#FFFF99.!x&&d. 11 Abre el documento gatos.0 var i.htm. y comprueba que la capa ya no aparece. d) { //v4." > <p align="center">&nbsp.all) x=d. } MM_reloadPage(true). document.01 var p. for (i=0. La capa se mostrará a la distancia de los márgenes especificada mediante width y height por el atributo position:absolute. y comprueba que obtienes una página como la que aparece si pulsas aquí.frames[n.length.5 Selecciona el archivo gatos. La capa será de color amarillo (background-color:#FFFF99.} if(!(x=d[n])&&d.</p> <p align="center"><font size="4">Este es Golfo y es de Valencia</font></p> <p align="center"><img src="imagenes/gato1. left: 10px.reload().substring(p+1)]. en un navegador. return x.MM_pgH) location. 10 Haz clic en la opción Guardar del menú Archivo. que se encuentra en la carpeta animales.!x&&i<d.args=MM_showHideLayers. layer-backgroundcolor:#FFFF99. } } .document). 9 Esta capa no la queremos ver de momento por eso añade visibility: hidden. de 320 píxeles de anchura (width:) y altura (height:).style.all[n].forms.getElementById(n).style) { obj=obj. 2 Abre el archivo gatos. que se encuentra en la carpeta animales. zindex:1. y pulsa sobre el botón Aceptar. que acabas de guardar. for(i=0.d.MM_pgH=innerHeight. ábrelo para realizar el ejercicio. }} else if (innerWidth!=document. Llamadas a javascript Objetivo. y a 69 píxeles del margen superior (top).p).getElementById) x=d. if (obj.arguments.length. for (i=0. v=(v=='show')?'visible':(v=='hide')?'hidden':v. if((p=n..frames.indexOf("?"))>0&&parent. 1 Si no tienes abierto el Bloc de notas.htm. if(!x && d. 6 Añade a la página detrás de la etiqueta </table> el siguiente código: <div id="gatosemana" style="position:absolute.i++) x=d.substring(0.layers[i]. situada a 10 píxeles del margen izquierdo (left). 3 Copia el siguiente código delante la etiqueta </head>: <script language="JavaScript" type="text/JavaScript"> <!-function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.obj. function MM_findObj(n. i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2].length-2).p. en un navegador. } obj. height:320px.MM_pgW || innerHeight!=document.layers.layers&&i<d.visibility=v.htm. i<(args. Ejercicio paso a paso.

por lo que la función cambiará la visibilidad de la capa gatosemana por el valor show (mostrar). que se encuentra casi al final del documento. con este código. color: #FF0000. que se encuentra al principio del documento. de la carpeta originales/animales del curso. 5 Inserta el siguiente código en el documento en blanco: body { background-color: #FFCC00. 4 Abre el Bloc de notas si no lo tienes abierto o sino.'show')" después de border="0". estarás llamando a la función javascript MM_showHideLayers. } . Este código hace referencia a la imagen gatito.''. La llamada a la función se realizará cuando hagas clic sobre el texto (onClick). Esta función se encarga de cambiar la visibilidad de las capas. 6 Haz clic sobre el menú Archivo. 8 Haz clic sobre la opción Guardar.//--> </script> 4 Busca la línea <a href="#"><img src="imagenes/gatito. la imagen tiene asociado un vínculo vacío (<a href="#">). 5 Añade antes de la etiqueta </td> el siguiente código <p align="center"><font size="2">Pulsa sobre la imagen para ver el gato de la semana</font></p> para que el texto aparezca debajo de la imagen. 7 Haz clic sobre el menú Archivo. Guarda el documento con el nombre estilosa. 2 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales 3 Abre el documento conestilos.gif" alt="gatito" border="0"></a>.'hide')" después de size="4" dentro de la etiqueta <font. 7 Haz clic sobre la opción Guardar. Añade onClick="MM_showHideLayers('gatosemana'. Al igual que en el punto anterior. y cómo al pulsar sobre el texto Cerrar. Lo que hace es convertir el texto en mayúsculas (uppercase) y que sea de color #FF0000 (rojo). . 1 Abre el documento conestilos. ésta vuelve a ocultarse. 9 Abre el documento gatos. } Con este texto se define que el color del documento será #FFCC00 (calabaza) al estar especificado para la etiqueta body. que tiene borde 0 y el texto alternativo gatito. y comprueba que obtienes una página como la que aparece si pulsas aquí. De esta manera cuando hagas clic sobre el texto cerrar se esconderá la capa.htm en un navegador. y que el fondo de la página es blanco. Añade onClick="MM_showHideLayers('gatosemana'.htm. que se encuentra en la capa. dentro de la carpeta Mis documentos/ejercicios_html/animales. le estás pasando como parámetros el nombre de la capa que tiene que mostrar gatosemana y lo que tiene que hacer show (mostrar) .''. Comprueba cómo al pulsar sobre la imagen del gato se muestra la capa. Ejercicio paso a paso.mitexto { text-transform: uppercase. Al mismo tiempo. estarás llamando a la función javascript MM_showHideLayers. En este caso. pero para cambiar la visibilidad de la capa gatosemana por el valor hide (ocultar). en un navegador. La llamada a la función se realizará cuando hagas clic sobre la imagen (onClick). Crear hoja de estilos Objetivo. Este código hace referencia a un vínculo vacío (<a href="#">) con el texto Cerrar. que acabas de guardar. abre un nuevo documento en blanco. Practicar las operaciones que hay que realizar para crear una hoja de estilos.gif.htm. El estilo mitexto no se corresponde con ninguna etiqueta en concreto. Con este código.txt. 6 Busca la línea <p align="center"><a href="#"><font color="#000000" size="4">Cerrar</font></a></p>. Cierra el navegador. Comprueba que la página solo muestra una línea de texto.

htm en un navegador. .8 Abre de nuevo el documento conestilos. y comprueba que obtienes una página como la que aparece si pulsas aquí.

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->