Scribd Logo
Upload

Welcome to Scribd!

  • Manual de Lenguaje HTML

    Uploaded by

    Jorge Rodriguez
    22 views71 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    22 views71 pages

    Manual de Lenguaje HTML

    Uploaded by

    Jorge Rodriguez

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 71

    manual de lenguaje HTML

    Las pginas que nos encontramos en Internet, las pginas web, estn construidas en un lenguaje de etiquetas denominado lenguaje html. Esto quiere ser un sencillo curso para que seas capaz, en relativamente poco tiempo, de realizar tus primeras pginas web escribiendo el cdigo correspondiente, antes de pasar a ver algn editor de cdigo concreto (Dreamweaver por ejemplo) que simplifican enormemente la tarea. Por qu entonces no empezar directamente con el editor? Porque es muy importante tener ciertos conocimientos del lenguaje ante posibles problemas que, sin lugar a dudas, se nos van a presentar al editar nuestras pginas. La red est llena de cursos sobre el lenguaje HTML. Qu aporta ste que no tengan los dems? Probablemente no mucho. He pretendido la sencillez y la claridad. Al principio quera ser de nivel inicial y, conforme lo he ido ampliando, ya est en un nivel de intermedio. No obstante, los primeros pasos estn pensados para personas con escasos conocimientos de informtica en general, y de pginas web en particular. He recopilado aqu alguno de los otros cursos que sobre este tema hay en la red. El curso puede ser seguido de forma lineal o, a travs de los enlaces a cada uno de los apartados:

    Nota: El curso est creciendo. He introducido unos apartados que los he colocado bajo la etiqueta de "avanzado". No es necesariamente que lo introducido all sea especialmente difcil; a veces s. Otras veces es, simplemente, una ampliacin a lo trabajado en el resto del curso. Se accede,

    desde contenidos, o desde el icono

    desde cada una de las pginas.

    1.- Antes de empezar.


    Sitate con el puntero del ratn sobre cualquier punto vaco de esta pgina que ests leyendo en estos momentos. Pulsa el botn derecho de tu ratn. Se abrir el siguiente men contextual:

    Si, en vez del Explorer, ests leyendo esta pgina con el Firefox, el men contextual ser algo distinto:

    A continuacin elige la opcin sealada en cada uno de los casos. Vers algo as:

    En el caso de que ests con el Explorer. O algo as:

    En el caso del Firefox. Pues bien, en ambos casos, ests visualizando el cdigo fuente que da origen a la pgina que ests leyendo en estos momentos. Es decir, es lo que hay que escribirpara que la pgina se muestre tal cual la ests viendo. Probablemente tanto smbolo extrao y palabras algo raras te sorprendern y te llevarn a la idea de que "esto es muy difcil" y "no es para m". Tranquilo. Sin ser fcil, el lenguaje html est al alcance de cualquier persona, y las cosas, paso a paso, se pueden hacer algo ms sencillas.

    2.- Empezando.
    El cdigo fuente, se escribe en un procesador de texto. Nosotros lo vamos a hacer con el Bloc de notas. Para abrir el Bloc de Notas, le damos a Inicio > Todos los programas > Accesorios > Bloc de notas. Se abrir una ventana como sta:

    Dependiendo de cmo est configurado tu ordenador, quiz no encuentres el Bloc de notas en esta ruta. A continuacin debes saber que las dos etiquetas fundamentales dentro de las cuales tiene que ir nuestro cdigo fuente son <html> como etiqueta de apertura y</html> como etiqueta de cierre. Despus, todo lo que ser visible al visitar la pgina con el navegador, debe de estar entre las etiquetas <body> cuerpo, en ingls, como etiqueta de apertura y </body> como etiqueta de cierre.
    Nota: Las etiquetas tambin se pueden escribir con letras maysculas: <HTML> <BODY>...Nosotros vamos a optar por las minsculas por ser lo que se est imponiendo de acuerdo con las ltimas normas.

    Vamos a escribir algo en nuestra pgina. Por ejemplo Bienvenid@. Lo escribiremos entre <body> y </body>. Nuestro cdigo quedar as:

    Ahora tenemos que guardar nuestro documento en alguna parte del ordenador y muy importante! con un nombre y una extensin especial. El nombre va a ser index(ya veremos porqu este nombre ms adelante) y su extensin .html Tambin se podra guardar con la extensin .htm (el resultado es exactamente el mismo). El sitio puede ser cualquier parte del ordenador. Para tenerlo accesible, lo vamos a guardar en el Escritorio: Le damos a Archivo > Guardar

    Nos aparecer la ventana de seleccin de directorio:

    Elegimos Escritorio y le llamamos index.html Observa que en Tipo no hemos cambiado nada. No es necesario al haber includo la extensin .html en el nombre del archivo. Podemos visualizarlo para ver si la pgina funciona....

    2002 a 2006

    manual de lenguaje html

    ngel R. Puente Prez

    3.- Mi primera pgina.


    Ya podemos ir al Escritorio para abrir nuestra pgina. Si el navegador predeterminado es el Explorer, el icono de nuestra

    pgina se visualizar as . Si, en cambio, es el Firefox el navegador predeterminado, el icono de nuestra pgina ser

    ste: . En ambos casos es conveniente que visualicemos la pgina con los dos navegadores para controlar posibles fallos en la escritura del cdigo ya que, puede ocurrir, que un navegador sea sensible al fallo y otro no. Nota: Estoy dando por hecho que tienes dos navegadores como mnimo instalados en el ordenador. El Internet Explorer y el Firefox. Es muy importante que tengas otro navegador, aparte del Explorer. Yo te recomiendo el Firefox. Si no lo tienes instalado, lo puedes descargar e instalar desde este vnculo. Como todava la mayora de los usuarios utilizan el Internet Explorer ms que ningn otro navegador, vamos a tenerlo como navegador predeterminado (de momento). Si no lo tienes as, lo puedes hacer abriendo el Explorer y en el men superior eliges Herramientas > Opciones de Internet...

    Elegimos la pestaa Programas:

    Y pinchamos en el botn Restablecer configuracin Web...

    Desactiva la opcin Restablecer tambin la pgina principal y le das al S Aparecer el mensaje de confirmacin que debers Aceptar:

    Observa que el icono de nuestra pgina en el escritorio tiene el

    del Explorer: Si haces doble clic sobre l, se te abrir la pgina con este navegador. Para abrirlo con el Firefox, una posibilidad es hacerlo pinchando con el botn derecho del ratn y, en el men contextual, elegir la opcin del Firefox

    Vamos a ver nuestra pgina: Hacemos doble clic sobre el icono y ...

    2002 a 2006

    manual de lenguaje html

    ngel R. Puente Prez

    4.- El otro navegador.


    Hemos quedado que nuestra pgina deba visualizarse, tambin, con el Firefox. Y ya hemos dicho tambin, que una forma era hacerlo desde el men contextual pinchando con el botn derecho del ratn sobre el icono del archivo. Otra forma es hacerlo abriendo el programa y yendo a buscar el archivo a abrir. Le damos a Inicio > Todos los programas > Mozilla Firefox > Mozilla Firefox Y, cuando se abra el programa, darle a Archivo > Abrir archivo...

    Para elegir el archivo a abrir:

    Vemos nuestro trabajo abierto con el Firefox:

    A partir de este momento, es conveniente tener los dos navegadores minimizados en la barra de tareas para actualizar y visualizar rpidamente con cada uno de los navegadores los cambios efectuados.

    5.- Mejorando la pgina.


    5.1.- Centrar el texto. Si queremos que nuestro saludo: Bienvenid@ aparezca en el centro de la pgina, escribimos delante del saludo la etiqueta <center> y al final del mismo la etiqueta de cierre </center> El cdigo quedara as:

    Guardamos los cambios:

    Minimizamos y comprobamos los resultados con el Explorer (lo recuperamos desde la barra de tareas): Si observamos que nuestro mensaje no aparece centrado le damos al botn . Puede ocurrir que no haya puesto al da los cambios:

    Minimizamos y abrimos el Firefox. Lo mismo. Si observamos que no ha puesto los cambios al da le damos al botn .

    Minimizamos.
    Nota: Es conveniente tener los tres programas abiertos: Los dos navegadores y el Bloc de notas. Si cerramos los programas, podemos recuperar el Bloc de notas a partir del Explorer. Botn derecho del ratn > Ver cdigo fuente. Se abrir el Bloc de notas. Puedo hacer los cambios que se sealan en este manual, guardar y minimizar. Abrir cada navegador y Actualizar o Recargar. Otra forma de recuperar el Bloc de notas es abrirlo desde Inicio > Todos los programas > Accesorios > Bloc de notas. Una vez abierto el programa,

    buscamos nuestro index.html en el escritorio. Archivo > Abrir y buscamos el escritorio. Tienes que observar que en Tipo est seleccionado Todos los archivos. En caso contrario no vers el index.html

    5.2.- Aumentar el tamao del texto. Nuestro mensaje es algo pequeo. Podemos aumentar su tamao empleando las etiquetas de encabezados. Las etiquetas van desde el <h1> (h de head, en ingls,cabeza) para la ms grande, al <h6> para la ms pequea. Vamos a poner el tamao mayor:

    Le damos a Archivo > Guardar , minimizamos y comprobamos los cambios con cada uno de los navegadores

    No olvidarse de dar al botn Actualizar en el caso de no ver los cambios a la primera.

    5.3.- Poner un color de fondo. Si deseamos poner un color de fondo a toda la pgina, lo tenemos que hacer dentro de la etiqueta <body> pues afecta a todo el documento. Esto que se escribe dentro de una etiqueta se denomina atributo. Los colores deben escribirse mediante el denominado cdigo hexadecimal que consiste en 6 cifras/letras agrupadas de dos en dos, que nos indican la cantidad de rojo, verde y azul que contiene ese color, o bien, con la palabra inglesa que corresponde al color. Nosotros vamos a poner el color rojo al fondo de la pgina. Lo conseguimos escribiendo la etiqueta <body> con su atributo como sigue: <body bgcolor="red"> ( bgde background ).

    Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los resultados:

    Si deseas profundizar en este tema de los colores, pulsa el botn...

    5.4.- Cambiar el color del texto. Para cambiar el color del texto empleamos la etiqueta <font> con su atributo color. Vamos a cambiar el color negro del texto, al color blanco.

    Podramos emplear el nombre en ingls del color, igual que hemos hecho con el fondo. La etiqueta quedara <font color="white">. Vamos ahora, a colocar el cdigo hexadecimal de este color que es el ffffff. La etiqueta quedara as: <font color="#ffffff">. La etiqueta se debe cerrar sin su atributo.

    Guardamos los cambios, minimizamos y abrimos los navegadores actualizando si es necesario:

    5.5.- Saltos de lnea. A partir de este momento ya no vamos a incluir en este manual la imagen de cada uno de los navegadores abriendo la pgina. En su lugar vamos a hacer un enlace para que se abra una ventana nueva de tu navegador al leer estas pginas. Pero el proceso que se debe seguir para construir las pginas no ha cambiado: 1. 2. 3. 4. Modificar/ampliar el cdigo en el bloc de notas. Guardar los cambios. Abrir el Explorer y Actualizar si es necesario. Abrir el Firefox y Recargar si es necesario.

    Vamos, ahora, a incluir una nueva lnea en nuestra pgina: Por ejemplo vamos a poner: A mi primera pgina web:

    Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los resultados: index.html Qu ha pasado? Esto no era lo previsto. Lo que ocurre es que el salto de lnea que hemos hecho en el cdigo no lo reconocen los navegadores. Para que el salto de lnea se incorpore hay que hacerlo con la etiqueta <br> del ingls break, romper. Esta etiqueta no tiene cierre. El cdigo quedara as:

    Veamos ahora el resultado: index.html Ahora s que es lo que queramos.

    Nota: Puedes comprobar el cdigo que genera la pgina que visualizas en la ventana emergente pinchando con el botn derecho del ratn y eligiendo Ver cdigo fuente (si lo ves con el I. Explorer) o Ver cdigo fuente de la pgina (si lo ves con el Firefox).

    5.6.- Prrafos. Cuando queremos introducir una lnea en blanco, utilizamos la etiqueta <p> de prrafo. Esta etiqueta admite su correspondiente cierre </p>, aunque no es necesario.

    Veamos ahora el resultado: index.html Si queremos separar ms no es suficiente repetir la etiqueta <p>. Hay que unir las dos etiquetas y repetir ambas:

    Veamos ahora el resultado: index.html Existe otra posibilidad: Consiste en combinar la etiqueta de apertura de prrafo con la de cierre escribiendo dentro un caracter invisible: &nbsp; (non breaking space):

    Veamos ahora el resultado: index.html La cadena &nbsp; tambin se puede utilizar para aadir un espacio en blanco extra a la separacin entre dos palabras, repitindolo cuantas veces haga falta. Aunque, su definicin inicial, era para aadir un espacio de separacin entre dos palabras "que no se pueda romper" caiga, por las configuraciones de pantalla diferenciadas, donde caiga.

    6.- La cabecera.
    Cmo van las cosas? Espero que, hasta aqu al menos, todo est yendo bien. Por simplificar un poco no habamos comentado nada de una parte importante que tienen las pginas web: Es la cabecera. Como has podido comprobar, no es imprescindible pero s muy importante. La cabecera se coloca entre las etiquetas <head> y </head> . Va justo despus de la primera etiqueta <html> y antes del<body>. Constituye la parte no visible del documento:

    <html> <head> </head> <body> Slo se ve este texto </body> </html>

    resultado De momento, lo que ms nos interesa poner dentro de la cabecera del documento es el ttulo de la pgina. Observa que en la barra de ttulo, la barra superior aparece:

    Para arreglar esto, para poner el ttulo al documento, hay que introducir dos nuevas etiquetas dentro de la cabecera. Son las etiquetas <title> de apertura y </title> de cierre. Y, entre ellas ponemos la frase que defina nuestro documento:
    <html> <head> <title> Ejercicio 1 </title> </head> <body> Slo se ve este texto </body> </html>

    resultado Comprueba que, en la barra superior del navegador, barra de ttulo, aparece el ttulo que acabamos de poner al documento:

    Si tienes experiencia en internet, probablemente te hayas encontrado con pginas en las que aparece Documento sin ttulo o Untitled document. Bien, ya sabes el porqu: No pusieron nada entre <title> y </title> Por ejemplo, esto es uno de los enlaces que aparece en la bsqueda con del trmino Tutorial html:

    En la cabecera pueden ir muchas ms cosas pero, de momento, es lo nico que necesitamos.

    7.- Listas.
    A menudo hay que hacer listas de objetos, de conceptos, de definiciones... Las listas pueden ser no numeradas (el orden no importa) y numeradas: 7.1.- Listas no numeradas. Comienza el listado con la etiqueta <ul> (unordered list) y su final con la etiqueta de cierre </ul>. Cada objeto que forma la lista va precedido de la etiqueta <li> (list item) sin etiqueta de cierre.
    <html> <head> <title> Listas no numeradas </title> </head> <body> Mis aficiones: <ul> <li> El cine. <li> La montaa. <li> La msica. </ul> </body> </html>

    resultado 7.2.- Listas numeradas. Comienza el listado con la etiqueta <ol> (ordered list) y su final con la etiqueta </ol>. Cada objeto que forma la lista va precedido, igual que en las anteriores de la etiqueta <li> sin cierre.

    <html> <head> <title> Listas numeradas </title> </head> <body> Mis preferencias: <ol> <li> Viajar. <li> Salir con mis amigos. <li> Dormir. </ol> </body> </html>

    resultado 7.3.- Listas anidadas. Se pueden combinar unas listas dentro de otras: No numeradas y/o numeradas. Hay que tener, simplemente, cuidado en la colocacin de las etiquetas de apertura y cierre.
    <html> <head> <title> Listas anidadas </title> </head> <body> <h3>Animales:<h3> <ul> <li> VERTEBRADOS. <ul> <li>Anfibios <li>Peces <li>Reptiles <li>Aves <li>Mamferos </ul> <li> INVERTEBRADOS. <ul> <li>Insectos <li>Arcnidos <li>Crustceos <li>Miripodos </ul> </ul> </body> </html>

    resultado

    Hemos incorporado la etiqueta de encabezado de tercer orden <h3> para resaltar el concepto que se va a clasificar. (Recuerda que los encabezados van del <h1> el mayor al <h6> el menor). 7.4.- Listas de definiciones. Son apropiadas, como su nombre indica, para establecer listados de trminos con sus definiciones. Las etiquetas de apertura y cierre son <dl> y </dl> (definition list). Los conceptos a definir van con la etiqueta <dt> (definition term) y las definiciones con la etiqueta <dd> (definition definition).
    <html> <head> <title> Listas de definiciones </title> </head> <body> <dl> <dt>Concepto 1 <dd>Definicin del Concepto 1 <dt>Concepto 2 <dd>Definicin del concepto 2 </dl> </body> </html>

    resultado

    8.- Sangrados.
    Se realizan con la etiqueta <blockquote> de apertura y su correspondiente de cierre. Aumentan, tambin, el interlineado, por eso se emplean para hacer una cita textual.
    <html> <head> <title> Sangrados </title> </head> <body> Este texto est justificado a la izquierda. <blockquote> ste est sangrado respecto del

    anterior </blockquote> ste vuelve a estar justificado a la izquierda. </body> </html>

    resultado Se puede utilizar ms de una etiqueta si deseamos un sangrado mayor:


    <html> <head> <title> Sangrados mltiples </title> </head> <body> Este texto est justificado a la izquierda. <blockquote> <blockquote> <blockquote> ste est ms sangrado </blockquote> </blockquote> </blockquote> ste vuelve a estar justificado a la izquierda. </body> </html>

    resultado

    9.- Negrita, cursiva y subrayado.


    Para remarcar una cadena de caracteres empleamos las etiquetas <b> y </b> (bold). Para hacer que un texto se muestre en cursiva: <i> e </i> (italic). Para subrayar empleamos <u> y </u> (underlined).
    <html> <head> <title> Negrita, cursiva y subrayado </title> </head>

    <body> Los textos siguientes:<p> <b>ste est en negrita</b><br> <i>ste est en cursiva</i><br> <u>ste est subrayado</u> </body> </html>

    resultado

    10.- Ms formato: Subndices y superndices.


    El subndice se consigue con la etiqueta <sub> y su correspondiente de cierre. El superndice con la etiqueta <sup> y su correspondiente de cierre.
    <html> <head> <title> Subndices y superndices </title> </head> <body> f<sub>(x)</sub>= X<sup>2</sup> + 5X </body> </html>

    resultado
    Si deseas saber sobre caracteres especiales ...

    11.- Lnea de separacin.


    Se consigue con la etiqueta <hr> (horizontal rule) sin etiqueta de cierre.
    <html> <head> <title> Barra de separacin </title> </head>

    <body> Pongamos una separacin: <hr> </body> </html>

    resultado
    Si deseas profundizar en este tema, pulsa el botn...

    12.- Comentarios.
    Si queremos introducir texto que sirva de recordatorio de lo que hicimos o dejamos de hacer o para dar explicaciones a otras personas que pueden acceder al cdigo pero que no queremos que se visualicen en pantalla empleamos la etiqueta (medio etiqueta) <!-para el comienzo y la etiqueta --> para el final del comentario.
    <html> <head> <title> Comentarios </title> </head> <body> Los textos siguientes:<p> <!-- Voy a aadir un sangrado --> <blockquote> <b>ste est en negrita</b><br> <i>ste est en cursiva</i><br> <u>ste est subrayado</u> </blockquote> </body> </html>

    resultado

    13.- Tablas.
    Empezamos con un tema algo complejo. Una tabla se define entre las etiquetas <table> y </table>

    A partir de este momento hay que definir las filas de la tabla que se definen con <tr> y </tr> (table row). Un par de etiquetas para cada una de las filas. Dentro de cada fila se definen las celdas que forman esa fila con las etiquetas <td> y </td> (table data). Vamos a empezar definiendo una tabla de 3 filas y 3 columnas (para nuestro lenguaje sern tres filas, cada una de ellas con tres celdas):
    <html> <head> <title> Tablas 1 </title> </head> <body> <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </body> </html>

    resultado Qu ha pasado? No se ve nada. Esto ocurre porque: 1. Dentro de las celdas no hemos puesto nada. 2. La tabla no tiene bordes. 13.1.- Tablas con borde y con casillas vacas. Vamos a arreglar estos dos temas: Por un lado vamos a indicar que queremos una tabla con borde. Esto se hace dentro de la etiqueta <table> con el atributo border. As: <table border>.

    Por otro lado, vamos a poner algo dentro de cada celda. Pero, en lugar de poner algo concreto y visible, vamos a utilizar una cadena de caracteres que ya hemos visto que se utilizaba para aadir un espacio a la separacin entre palabras: &nbsp;
    <html> <head> <title> Tablas 2 </title> </head> <body> <table border> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </body> </html>

    resultado 13.2.- Otros atributos de la tabla. Podemos hacer que nuestra tabla est centrada en la pgina con el atributo align="center". O "left" o "right" Que ocupe una determinada proporcin del espacio en horizontal con el atributo width="50%". O "30%" o "70%" o... Que el borde sea mayor que el establecido por defecto (que es 1): border="3". O ... Que tenga un color de fondo con el atributo bgcolor="#6699FF" . O cualquier otro (ver colores html).
    <html>

    <head> <title> Tablas 3 </title> </head> <body> <table border="3" align="center" width="50%" bgcolor="#ffcccc"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </body> </html>

    resultado 13.3.- Atributos de las filas y las celdas. De manera similar a los atributos de la tabla, podemos definir todos esos parmetros a las filas o a las celdas. Por ejemplo podemos empezar asignando a las celdas de la primera fila un ancho diferente. Si a este respecto no hago nada ms en las otras celdas, lo que haga afectar a todas las columnas. Puedo definir colores diferenciados. En este caso, el color de la fila o de la celda prevalecer sobre el definido en el conjunto de la tabla
    <html> <head> <title> Tablas 4 </title> </head> <body> <table border="3" align="center" width="50%" bgcolor="#ffcccc"> <tr>

    <td width="10%">&nbsp;</td> <td width="30%">&nbsp;</td> <td width="60%">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td bgcolor="#ff00cc">&nbsp;</td> <td bgcolor="#ffcc00">&nbsp;</td> <td bgcolor="#00cccc">&nbsp;</td> </tr> </table> </body> </html>

    resultado 13.4.- Tablas con celdas de distinto tamao. Es bastante habitual tener que disear este tipo de tablas: Una celda puede ocupar dos columnas, tres,... o dos filas, tres,... Supongamos que tenemos que disear una tabla como sta:

    Para no liarse, lo primero que hay que tener claro es el nmero mximo de columnas y filas que tiene la tabla: En este caso es 4 columnas y 3 filas. Pues bien, tendremos que establecer 4 celdas en cada una de las 3 filas. Luego, agruparemos celdas con las etiquetas correspondientes. Empezamos con la primera fila. Se extiende ocupando las 4 columnas. La etiqueta que debemos emplear es un atributo para la primera celda de la primera fila (debe"extenderse" sobre las cuatro columnas) <td colspan="4">. Lgicamente la primera fila ya se ha acabado. Pasamos a la segunda fila. La primera celda se extiende sobre 2 filas. Escribiremos <td rowspan="2">. Despus de esta celda siguen las otras tres que son normales.

    Por ltimo definimos la tercera fila. Como la primera celda ya ha sido definida en la fila anterior, slo nos queda la segunda celda, que es normal, y la tercera que se extiende sobre dos columnas <td colspan="2"> Pondremos un &nbsp; para meter algo aunque no se vea y, para asegurarnos de la simetra de la tabla, estableceremos el ancho con el atributo width en la tabla (30% por ejemplo) y una proporcin del espacio total de la tabla en cada columna (25%) y lo haremos en las celdas que nos parezca (en las "normales" de ancho). El cdigo podra quedar as:
    <html> <head> <title> Tablas 5 </title> </head> <body> <table border align="center" width="30%" bgcolor="#ffcccc"> <tr> <td colspan="4">&nbsp;</td> </tr> <tr> <td rowspan="2" width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td colspan="2">&nbsp;</td> </tr> </table> </body> </html>

    resultado 13.5.- Ttulo de la tabla. Disponemos de una etiqueta para poner el ttulo de la tabal. Es <caption> con su correspondiente de cierre. Se coloca despus de la etiqueta de definicin de la tabla y aade un texto por encima de la tabla y centrado con sta.
    <html>

    <head> <title> Tablas 6 </title> </head> <body> <table border align="center" width="30%" bgcolor="#ffcccc"> <caption>ste es el ttulo de la tabla</caption> <tr> <td colspan="4">&nbsp;</td> </tr> <tr> <td rowspan="2" width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td colspan="2">&nbsp;</td> </tr> </table> </body> </html>

    resultado 13.6.- Celdas de cabecera. Disponemos de una etiqueta especial para aquellas celdas que son cabecera respecto de las celdas situadas debajo de ellas. Son las etiquetas <TH> (table header). El texto situado en ellas queda centrado y en negrita. Lo nico que hay que hacer es sustituir la etiqueta normal de celda por esta otra.
    <html> <head> <title> Tablas 7 </title> </head> <body> <table border align="center" width="50%" bgcolor="#ffcccc"> <caption>Ejemplo de celdas de cabecera</caption> <tr> <th>Nombre</th> <th>Apellido 1</th> <th>Apellido 2</th> </tr>

    <tr> <td width="25%">Jos</td> <td width="25%">Prez</td> <td width="25%">Prez</td> </tr> <tr> <td>Luis</td> <td>Romn</td> <td>Snchez</td> </tr> </table> </body> </html>

    resultado 13.7.- Alineaciones dentro de las celdas. Veamos como se pueden alinear los objetos dentro de las celdas de una tabla:
    xxx xxx xxx xxx xxx xxx

    Primera fila (alineacin horizontal):

    En la primera celda el texto est alineado a la izquierda. No hay que hacer nada, es la alineacin que se establece por defecto. (Podra escribirse, de todas formas: <td align="left">). En la segunda celda el texto est alineado en el centro: <td align="center">. En la tercera celda el texto est alineado a la derecha: <td align="right">.

    Segunda fila (alineacin vertical):


    En la primera celda el texto est alineado en la parte superior: <td valign="top">. En la segunda celda el texto est alineado en la parte central. No hay que hacer nada, es la alineacin vertical establecida por defecto. (Podra escribirse, de todas formas: <td valign="middle">) .

    En la tercera celda el texto est alineado en la parte inferior: <td valign="bottom">.

    Para observar mejor los resultados se ha forzado la altura de las celdas a 50 pxeles. Basta escribirlo en la primera celda de cada fila: <td height="50"> pero podra escribirse en todas ellas.
    <html> <head> <title> Tablas 8 </title> </head> <body> <table border width="60%" align="center" bgcolor="#ffffcc"> <caption>Alineaciones de celdas</caption> <tr> <td width="33%" height="50">xxx</td> <td width="34%" align="center">xxx</td> <td width="33%" align="right">xxx</td> </tr> <tr> <td height="50" valign="top">xxx</td> <td align="center">xxx</td> <td align="right" valign="bottom">xxx</td> </tr> </table> </body> </html>

    resultado 13.8.- Separaciones entre celdas y entre borde y contenidos. La separacin por defecto entre las celdas es de 2 pxeles. Se puede modificar esta distancia con el atributo de table cellspacing. Tabla con cellspacing de 15 pxeles:

    xxxx

    xxxx

    xxxx

    xxxx xxxx xxxx

    La separacin entre el borde la tabla y el contenido de las celdas es de 1 pxel. Se puede modificar con el atributo cellpadding de la etiqueta table. Tabla con cellpadding de 15 pxeles:

    xxxx

    xxxx

    xxxx

    xxxx xxxx xxxx

    En la segunda tabla se ha aumentado la altura de las celdas a 70 pxeles para observar la alineacin vertical. Veamos los cdigos:
    <html> <head> <title> Tablas 9 </title> </head> <body> <table border width="60%" align="center" bgcolor="#ffffcc" cellspacing="15"> <caption> Tabla con espacio entre celdas de 15 pxeles </caption> <tr> <td width="33%" height="50">xxxx</td> <td width="34%" align="center">xxxx</td> <td width="33%" align="right">xxxx</td>

    </tr> <tr> <td height="50" valign="top">xxxx</td> <td align="center">xxxx</td> <td align="right" valign="bottom">xxxx</td> </tr> </table> </body> </html>

    resultado

    <html> <head> <title> Tablas 10 </title> </head> <body> <table border width="60%" align="center" bgcolor="#ffffcc" cellpadding="15"> <caption> Tabla con "cellpadding" de 15 pxeles </caption> <tr> <td width="33%" height="70">xxxx</td> <td width="34%" align="center">xxxx</td> <td width="33%" align="right">xxxx</td> </tr> <tr> <td height="70" valign="top">xxxx</td> <td align="center">xxxx</td> <td align="right" valign="bottom">xxxx</td> </tr> </table> </body> </html>

    resultado

    14.- Imgenes.
    La etiqueta para introducir una imagen en nuestra pgina es <img src="nombre.gif"> (src de source en ingls fuente u origen de la

    imagen) y siendo nombre el nombre que tiene la imagen y .gif su formato. La etiqueta funcionar bien siempre y cuando la imagen est en la misma carpeta en la que se encuentra la pgina web desde la que la llamamos. Es habitual (y recomendable) colocar todas las imgenes en otra carpeta interna, en ese caso, habr que darle la ruta en la cual se encuentra nuestra imagen. Supongamos que la imagen nombre.gif se encuentra en una carpeta denominada imag, pues bien, la etiqueta sera <img src="imag/nombre.gif"> Veamos un ejemplo:

    En este caso el formato de la imagen es .jpg (junto con el .gif y el .png los formatos de imgenes ms habituales en internet). La imagen se denomina riglos2.jpg
    <html> <head> <title> Imgenes 1 </title> </head> <body> <center> <img src="imag/riglos2.jpg"> </center> </body> </html

    resultado

    14.1.- Atributos de la imagen width y height. Es muy importante introducir las medidas de la imagen (las podemos averiguar desde un programa grfico como PhotoShop) dentro de la etiqueta <img>. De esta manera cuando el navegador va recorriendo la pgina reserva el espacio justo para la imagen y, el resto de la pgina se va cargando sin problemas mientra se acaba de cargar la imagen. En nuestro caso la imagen tiene 150 de ancho y 230 de alto. Escribiramos:
    <html> <head> <title> Imgenes 2 </title> </head> <body> <center> <img src="imag/riglos2.jpg" width="150" height="230"> </center> </body> </html>

    resultado 14.2.- Texto alternativo. Es otro atributo que se coloca por varios motivos, el principal es que aquellas personas que visiten nuestra pgina sin descargarse las imgenes (habitual en los que tienen una mala conexin y no desean eternas descargas) tengan, al menos, una orientacin del contenido de la misma. Debe ser una descripcin corta del tema de la imagen. Se introduce con la cadena alt="descripcin de la imagen" y, al ser un atributo, se coloca como los dos anteriores, dentro de la etiqueta <img>.
    <html> <head> <title> Imgenes 3 </title> </head> <body> <center> <img src="imag/riglos2.jpg" width="150"

    height="230" alt="Mallos de Riglos (Huesca)"> </center> </body> </html>

    resultado Cuando el visitante (si navega con el Internet Explorer) se acerque con el cursor a la imagen, aparecer un rectngulo con el texto alternativo:
    Nota: El hecho de que aparezca el texto alternativo al acercarnos con el cursor a la imagen, es una desviacin del Explorer. Existe otro atributo para que esto se produzca independientemente del navegador que empleemos. Es el atributo title.

    Y cuando navegue sin bajarse las imgenes se ver as:

    14.3.- Colocar una imagen como fondo de la pgina. Simplemente tenemos que colocar dentro de la etiqueta <body> el atributo background con el nombre y/o direccin de la imagen que queremos colocar. Supongamos que quiero colocar una imagen denominada claro1.gif que est dentro de la carpeta imag. El cdigo ser el siguiente:

    <html> <head> <title> Imagen como fondo de pgina </title> </head> <body background="imag/claro1.gif"> <center> <h2> Esta pgina tiene una imagen de fondo. </h2> </center> </body> </html>

    resultado

    15.- Vnculos.
    Es una de las herramientas ms interesantes de los documentos html. La sintaxis para establecer un enlace es: <a href="destino">texto</a> Donde destino es el documento con el que se enlaza y texto es la palabra o palabras que, al pulsar, nos llevan a ese destino (tambin puede ser una imagen). 15.1.- Vnculos a otro documento del mismo sitio. Nuestro sitio estar formado por varios archivos generadores de varios documentos. Los documentos tendrn la extensin .html (o .htm). Para establecer el vnculo escribiremos sencillamente el nombre del documento en el destino y, entre las etiquetas de apertura y cierre la palabra o palabras que activarn el vnculo. Como ejemplo vamos a establecer un enlace a la primera pgina de este sitio (primer documento) cuyo archivo tiene como nombre index.htm
    <html> <head> <title> Vnculos 1 </title>

    </head> <body> <center> <a href="index.htm"> Ir al inicio de este curso </a> </center> </body> </html>

    resultado 15.2.- Vnculos a otro documento externo al sitio. En este caso en destino deberemos escribir toda la direccin URL del sitio. Vamos a establecer un enlace a la pgina del buscador Google cuya direccin URL es http://www.google.es
    <html> <head> <title> Vnculos 2 </title> </head> <body> <center> <a href="http://www.google.es"> Ir a Google </a> </center> </body> </html>

    resultado Muchas veces puede resultar interesante escribir la propia direccin URL como activador del vnculo:
    <html> <head> <title> Vnculos 3 </title> </head> <body> <center> Ir a Google:<br> <a href="http://www.google.es">

    http://www.google.es</a> </center> </body> </html>

    resultado 15.3.- Vnculos a otra parte del mismo documento. A veces cuando el documento es muy extenso conviene establecer formas rpidas para subir o bajar a una parte determinada del documento. Para realizar esto, primero hay que establecer un ancla o marca en la/s parte/s del documento a los que queremos acceder de forma rpida. La sintaxis del ancla es <a name="ancla1"></a> ponindolo en el punto de destino. No hace fata que haya nada entre la etiqueta de apertura y cierre. En el punto activador escribiremos <a href ="#ancla1"> Ir a la parte tal </a>. Como ejemplo vamos a movernos por las partes anteriores a esta lnea del punto en el que estamos. En primer lugar hemos nombrado las anclas con el mismo nombre que tienen los diferentes apartados (cambiando el punto por un guin bajo) a los que vamos a desplazarnos:
    cdigo Ir al apartado 15 Ir al apartado 15.1 Ir al apartado 15.2 Ir al apartado 15.3 <a href="#15>Ir al apartado 15</a> <a href="#15_1>Ir al apartado 15.1</a> <a href="#15_2>Ir al apartado 15.2</a> <a href="#15_3>Ir al apartado 15.3</a>

    15.4.- Vnculos a una parte concreta de otro documento de nuestro sitio. Se pueden combinar este ltimo tipo de enlaces con el vnculo a otro documento de nuestro sitio.

    La sintaxis sera <a href="paginax.htm#ancla"> Ir al apartado tal de tal pgina </a>


    <html> <head> <title> Vnculos 4 </title> </head> <body> <center> <a href="diez.htm#13_2"> Ir al apartado 13.2 de este curso </a> </center> </body> </html>

    resultado (maximiza la ventana)

    15.5.- Vnculos de correo electrnico. Vamos a ver los enlaces a una direccin de correo electrnico. Cuando el navegante pinche sobre el activador del vnculo, se abrir el programa de correo con la direccin del destinatario ya escrita en el mensaje. La sintaxis es <a href="mailto:login@servidor.es"> Mndame un mensaje </a>
    <html> <head> <title> Vnculos 5 </title> </head> <body> <center> <a href="mailto:apuente@roble.pntic.mec.es"> Dime lo que piensas de este curso </a> </center> </body> </html>

    resultado

    15.6.- Imagen como vnculo a otro documento. En lugar de texto podemos utilizar una imagen como vnculo. En primer lugar deberemos escribir la etiqueta de apertura del vnculo y luego la etiqueta de inclusin de la imagen cerrando, posteriormente, la etiqueta del vnculo. Para este tipo de vnculos se suelen emplear pequeas imgenes, aunque, a veces, tambin se utilizan imgenes de gran formato (sobre todo en los portales de los sitios).
    <html> <head> <title> Vnculos 6 </title> </head> <body> <center> Visita la pgina de TERRA:<P> <a href="http://www.terra.es"> <img src="imag/logo_terra.gif"> </a> </center> </body> </html>

    resultado Para eliminar este borde tan antiesttico que se coloca alrededor de la imagen tenemos el atributo border="0"
    <html> <head> <title> Vnculos 7 </title> </head> <body> <center> Visita la pgina de TERRA:<p> <a href="http://www.terra.es"> <img src="imag/logo_terra.gif" border="0"> </a>

    </center> </body> </html>

    resultado

    16.- Marcos.
    La estructura de los marcos o frames es un poco compleja. Empezamos definiendo una estructura de marcos: Consiste en una divisin de la pantalla en varias zonas de tal forma que, en una de las partes, puede haber un men de vnculos, por ejemplo, que permanecer constante y, en la otra, parte principal o main frame, se cargarn las pginas pinchadas desde el frame de vnculos. Puede haber ms partes, por ejemplo, una parte superior con el ttulo del sitio que permanecer constante segn vayamos navegando. Vamos a empezar definiendo una estructura de dos frames: Una columna izquierda, ms estrecha, y una columna derecha, ms ancha, como frame principal o main frame. Para empezar hay que saber que, de entrada, tenemos que generar tres documentos (tres archivos .html):

    El primero, el ms extrao, que definir la estructura de los marcos. El segundo, que se cargar en el marco izquierdo. El tercero que se cargar en el marco derecho.

    Por otro lado, tenemos que decidir, cunto espacio vamos a asignar a cada marco: Decidimos que el marco izquierdo ocupar el 15% del espacio y el marco derecho, el resto (o el 85%). Veamos la sintaxis del primer archivo, la estructura de los marcos:
    <html> <head> <title> Estructura de marcos </title> </head>

    <frameset cols="15%,*"> <frame src="indice.html"> <frame src="saludo.html" name="principal"> </frameset> </html>

    Esto lo guardamos con el nombre index.html porque va a ser lo que se abra al principio. Vamos a comentar un poco la sintaxis empleada:

    Lo primero que observamos es que, en vez de la etiqueta <body> hemos empleado la etiqueta <frameset> en ingls algo as como estructura de marcos. El atributo cols est definiendo las columnas y el espacio reservado a cada una. Si, en vez de columnas hubiramos querido establecer dos filas, hubiramos empleado el atributo rows. A continuacin decimos que la primera columna va a ocupar el 15% del espacio. Y, la segunda, el resto. Esto indica el asterisco *. Hubiramos podido, perfectamente, escribir el tanto por ciento que queda, es decir, el 85%: <frameset cols="15% , 85%>. A continuacin viene la etiqueta <frame> (del primer frame, el de la izquierda) con el atributo src para indicar qu archivo se va a cargar en ese espacio. En nuestro caso, el archivo se llama indice.html . Despus viene la etiqueta del segundo marco. En l se cargar el archivo que he llamado saludo.html . En este marco principal hay otro atributo que es el nombre que le vamos a dar. Esto es necesario porque, en este espacio, se van a cargar otros documentos cuando pulsemos los enlaces y hay que ponerle un nombre para decrselo a los enlaces. El nombre que yo le he puesto es principal.

    Si abrimos, en estos momentos nuestro index.html nos va a salir: resultado Esto ocurre porque no hemos creado los dos archivos que se tienen que cargar en cada uno de los dos marcos. Pero ya vemos que el espacio s que se ha diferenciado.

    Creo el archivo indice.html que se cargar en el marco de la izquierda:


    <html> <head> <title> Marco de la izquierda </title> </head> <body bgcolor="#dfdfdf"> Esto se cargar en la izquierda </body> </html>

    Y lo guardo como indice.html Creo el archivo saludo.html que se cargar en el marco de la derecha:
    <html> <head> <title> Marco de la derecha </title> </head> <body bgcolor="#ff9999"> <center> <h1> Bienvenido a mi pgina web </h1> </center> </body> </html>

    Lo guardamos con el nombre saludo.html Veamos ahora el resultado Nos queda por crear un cuarto documento, un cuarto archivo .html para que sirva de ejemplo en la sintaxis a emplear para que los enlaces se carguen en el frame principal. Para ello, primero tendremos que crear el documento. Sea algo as:
    <html> <head> <title> Documento a cargar en marco principal </title>

    </head> <body bgcolor="#ffcccc"> <center> <h2> Has pulsado el enlace correctamente </h2> </center> </body> </html>

    Lo guardamos con el nombre enlace.html Por otro lado, tendremos que modificar el documento indice para poner el vnculo:
    <html> <head> <title> Marco de la izquierda con enlace </title> </head> <body bgcolor="#dfdfdf"> <a href="enlace.html" target="principal"> enlace </body> </html>

    Lo guardamos con el mismo nombre que tena: indice.html Veamos el resultado

    17.- Formularios.
    El formulario es una interesante herramienta de toda pgina web. Permite recabar informacin ordenada de los visitantes, y almacenar esa informacin de alguna manera. Nosotros vamos a trabajar un formulario cuyos datos sean enviados a una direccin de correo electrnico normal y como datos no encriptados. La otra forma, ms compleja, es ser envado a nuestro servidor a travs de un programa determinado que deber estar instalado en ese servidor, para almacenar la informacin y procesarla. Como

    esto no est al alcance del usuario corriente, vamos a centrarnos en el primer tipo de formularios. Los formularios estn dentro de las etiquetas <form> y </form>. Los atributos de la etiqueta de apertura del formulario indicarn la forma de enviar la informacin:

    action="mailto:direcciondecorreo". El formulario ser enviado a la direccin de correo que pongamos. method="post". Los datos se enviarn inmediatamente por correo electrnico. enctype="text/plain". Las respuestas se enviarn sin codificacin.

    17.1.- Campo de texto de una lnea.


    <html> <head> <title> Formulario 1 </title> </head> <body> <form action="mailto:login@servidor.es" method="post" enctype="text/plain"> <table align="center"> <tr> <td width="50%" align="right"> Escribe tu nombre: </td> <td width="50%" alignn="left"> <input type="text" name="Nombre" size="10" maxlength="15"> </td> </tr> </table> </form> </body> </html>

    resultado Guardamos el formulario con el nombre form1.html Hemos colocado, dentro del formulario, una tabla con dos columnas para mejorar la presentacin de los datos: En la columna izquierda, y alineado a la derecha, colocamos el texto de lo que se pide (en

    este caso el nombre) y, en la columna de la izquierda y, alineado a la derecha, el campo de texto:


    input type (entrada de tipo) texto. name es lo que aparecer en el mensaje de correo delante de lo que introduzca el ususario. size nos indica el tamao de la caja de texto de una lnea. En este caso 10 caracteres. maxlenght indica la cantidad mxima de caracteres que puede introducir el usuario.

    De poco sirve el formulario si no tenemos la opcin de enviarlo. As que vamos a proceder a la introduccin del cdigo necesario. Normalmente, adems del botn de enviar se suele poner otro para borrar los datos introducidos.
    <html> <head> <title> Formulario 2 </title> </head> <body> <form action="mailto:login@servidor.es" method="post" enctype="text/plain"> <table align="center"> <tr> <td width="50%" align="right"> Escribe tu nombre: </td> <td width="50%" alignn="left"> <input type="text" name="Nombre" size="10" maxlength="15"> </td> </tr> <tr> <td width="50%" align="right"> <input type="submit" value="Enviar"> </td> <td width="50%" align="left"> <input type="reset" value="Borrar"> </td> </tr> </table> </form> </body> </html>

    resultado

    Guardamos el archivo con el nombre form2.html Hemos introducido otra fila en la tabla con:

    input type submit (enviar). value ser lo que aparezca escrito en el botn. input type reset en ingls borrar. value ser lo que aparezca escrito en el botn.

    Cuando, una vez escrito el dato, el usuario pulse el botn de enviar, aparecer el siguiente mensaje:

    Hay que aceptar para que el formulario sea enviado. Supongamos que un tal Federico ha rellenado el formulario. En el correo del destinatario aparecer este mensaje:

    Observa como coincide el Nombre con lo que diseamos en el formulario en el campo name 17.2.- Campo de texto de varias lneas. Se consigue con la etiqueta <textarea> y su correspondiente de cierre. Repetimos el formulario anterior eliminando la opcin <text> para simplificar la lectura del cdigo. Pero, evidentemente, se podran juntar todas las opciones en un nico formulario.

    <html> <head> <title> Formulario 3 </title> </head> <body> <form action="mailto:login@servidor.es" method="post" enctype="text/plain"> <table align="center"> <tr> <td width="50%" align="right"> Escribe tus comentarios: </td> <td width="50%" alignn="left"> <textarea name="Comentarios" cols="30" rows="5"> </textarea> </td> </tr> <tr> <td width="50%" align="right"> <input type="submit" value="Enviar"> </td> <td width="50%" align="left"> <input type="reset" value="Borrar"> </td> </tr> </table> </form> </body> </html>

    resultado Guardamos el formulario con el nombre de form3.html Observa las diferencias entre la etiqueta de introduccin de texto en una lnea y la que acabamos de colocar:

    En este caso, la etiqueta tiene apertura y cierre. El atributo cols indica el ancho del cuadro de texto en nmero de caracteres. El atributo rows indica el nmero de filas del cuadro de texto. Si el ususario quiere escribir ms de 5 lneas, el formulario se lo permite.

    He hecho una prueba con mi correo. ste es el mensaje recibido:

    17.3.- Men de opcin. Permite elegir entre varias opciones, una nica. Se introduce de forma similar al cuadro de texto de una lnea <input> pero, ahora el type es radio el name es el nombre que le damos a ese grupo de opcin, el value lo que aparecer en el mensaje de correo delante de la opcin elegida. Hay que repetir la etiqueta tantas veces como opciones de elegir haya. Si queremos introducir una segunda posibilidad de eleccin deberemos repetir el proceso pero cambiando el name del grupo de opciones:
    <html> <head> <title> Formulario 4 </title> </head> <body> <form action="mailto:login@servidor.es" method="post" enctype="text/plain"> <table border align="center"> <tr> <td width="50%" align="right"> Elige el grupo de edad en el que te encuentras: </td> <td width="50%" alignn="left"> <input type="radio" name="Edad" value="Menor de 18"> Tengo menos de 18 aos.<br> <input type="radio" name="Edad" value="De 18 a 50">

    Tengo entre 19 y 50 aos.<br> <input type="radio" name="Edad" value="Ms de 51"> Tengo ms de 51 aos. </td> </tr> <tr> <td width="50%" align="right"> Valora este curso de HTML: </td> <td width="50%" alignn="left"> <input type="radio" name="Valoracion" value="Muy bueno"> Me parece muy bueno.<BR> <input type="radio" name="Valoracion" value="Regular"> Bueno... No est del todo mal.<BR> <input type="radio" name="Valoracion" value="Malo"> Me parece horroroso </td> </tr> <tr> <td width="50%" align="right"> <input type="submit" value="Enviar"> </td> <td width="50%" align="left"> <input type="reset" value="Borrar"> </td> </tr> </table> </form> </body> </html>

    resultado Observa como las opciones de cada grupo son excluyentes: Slo podemos elegir una. Esta es una imagen del resultado del envo de una respuesta:

    17.4.- Men de opcin mltiple. Casillas de verificacin. Es parecido al anterior cambiando el atributo radio por checkbox. Los dems atributos son similares.

    <html> <head> <title> Formulario 5 </title> </head> <body> <form action="mailto:login@servidor.es" method="post" enctype="text/plain"> <table border align="center"> <tr> <td width="50%" align="right"> Elige tus aficiones: </td> <td width="50%" alignn="left"> <input type="checkbox" name="Gustos" value="Leer"> Me gusta leer.<BR> <input type="checkbox" name="Gustos" value="Cine"> Ir al cine.<BR> <input type="checkbox" name="Gustos" value="Gimnasio"> Machacarme en el gimnasio.<BR> <input type="checkbox" name="Gustos" value="Botelln"> Hacer botelln con los amigos.<BR> <input type="checkbox" name="Gustos" value="Caminar"> Salir al campo a caminar. </td> </tr> <tr> <td width="50%" align="right"> <input type="submit" value="Enviar"> </td> <td width="50%" align="left"> <input type="reset" value="Borrar"> </td> </tr> </table> </form> </body> </html>

    resultado

    Este es el resultado de un envo:

    17.5.- Men desplegable. Las opciones de eleccin se despliegan en un men para que el visitante elija una.
    <html> <head> <title> Formulario 6 </title> </head> <body> <form action="mailto:login@servidor.es" method="post" enctype="text/plain"> <table border align="center"> <tr> <td width="50%" align="right"> Elige tu mejor da de la semana: </td> <td width="50%" alignn="left"> <select name="Mejor_dia"> <option value=""></option> <option value="Lunes">Lunes</option> <option value="Martes">Martes</option> <option value="Mircoles">Mircoles</option> <option value="Jueves">Jueves</option> <option value="Viernes">Viernes</option> <option value="Sbado">Sbado</option> <option value="Domingo">Domingo</option> </select> </td> </tr> <tr> <td width="50%" align="right"> <input type="submit" value="Enviar"> </td> <td width="50%" align="left"> <input type="reset" value="Borrar"> </td> </tr> </table>

    </form> </body> </html>

    resultado Esta la imagen de una respuesta:

    17.6.- Campo de contrasea. Para hacer que un determinado campo de texto no sea visible para las personas que estn alrededor del usuario (tipo contrasea), empleamos la misma sintaxis que en el campo de texto de una lnea sustituyendo type="text" por type="password"
    <html> <head> <title> Formulario 7 </title> </head> <body> <form action="mailto:login@servidor.es" method="post" enctype="text/plain"> <table align="center"> <tr> <td width="50%" align="right"> Escribe tu contrasea: </td> <td width="50%" alignn="left"> <input type="password" name="Contrasea" size="8" maxlength="8"> </td> </tr> <tr> <td width="50%" align="right"> <input type="submit" value="Enviar"> </td> <td width="50%" align="left"> <input type="reset" value="Borrar"> </td> </tr> </table> </form> </body>

    </html>

    resultado Observa que, aunque al escribir la contrasea aparecen los tpicos asteriscos, en el mensaje de correo aparece el texto tecleado:

    19.-Redireccionamiento automtico de un documento. Si queremos que, transcurridos unos segundos, el documento actual se cambie por otro, debemos incluir, en la cabecera del documento el siguiente cdigo:
    <meta http-equiv="refresh" content="10;URL=uno.htm">

    Siendo uno.htm el nombre del documento al que queremos que se cambie el y el nmero 10 el nmero de segundos de espera antes de producirse el cambio. Este ejemplo se ha tomado de la pgina inicial de este sitio. Si esperas los 10 segundos (puede ser que el nmero de segundos sea otro!), la pgina inicial se cambia automticamente al documento uno.htm. Comprobacin. Esta misma etiqueta permite cambios de sitio. En este caso hay que escribir la direccin completa:
    <meta http-equiv="refresh" content="5;URL=http://www.educa.madrid.org/cepa.colmenarviejo">

    Esta etiqueta es muy interesante cuando, por las razones que sean, decidimos cambiar nuestra pgina de servidor. La pgina del servidor antiguo se redirecciona automticamente a la pgina inicial del nuevo sitio. De esta forma, conservamos los posibles vnculos que tengamos desde otros sitios de internet y los posibles visitantes podrn llegar a la nueva direccin a partir de los antiguos datos.

    La direccin puesta como ejemplo ha sido sacada de un caso real: La pgina del centro educativo en el que trabajo se ha tenido que trasladar, desde el servidor del Ministerio de Educacin, al servidor de la Consejera de Educacin de la Comunidad de Madrid. Gracias a esta herramienta, no se pierden los antiguos vnculos que hay repartidos por muchas otras pginas. Y, por otro lado, nicamente hay que mantener al da el sitio colocado en el nuevo servidor. Ver el ejemplo concreto. Tanto en un caso como en otro, es interesante colocar un vnculo manual, para asegurarnos de que, en caso de que el refresh automtico tuviera algn problema, se pueda ir de todas formas al nuevo sitio. 20.- Publicacin del sitio. Ya tenemos nuestra pgina creada y, salvo modificaciones y posteriores actualizaciones, dispuesta para ser publicada. Cmo proceder? Lo primero es encontrar un servidor que acepte alojar nuestro sitio. Hay servidores de pago y servidores gratuitos a costa de la pesadsima publicidad. De estos ltimos, uno de ellos es Geocities. Primero hay que abrirse una cuenta con Yahoo y, despus, darse de alta para activar el sitio web. Una vez que tenemos el espacio reservado hay que conocer las caractersticas del mismo que el propio servidor nos tiene que proporcionar: Por ejemplo cmo se debe llamar nuestra primera pgina? Normalmente index.htm Hay que alojar nuestra primera pgina dentro de alguna carpeta especial dentro de nuestro espacio web? Normalmente no; pero hay algunos servidores como el CNICE del Ministerio de Educacin espaol que obliga a publicar el sitio dentro de una carpeta que debe llamarse public_html. Cul es el nombre del servidor? y el del usuario? y la contrasea? Todos estos datos deben ser proporcionados por el servidor as que no hay que preocuparse demasiado.

    Una vez que tengamos estos datos, hay que hacerse con un programa de transmisin de ficheros va FTP. Uno de los ms sencillos de utilizar es el WS_FTP. Se descarga desde la red. No es software libre...

    Al abrir el programa, se abre una ventana como sta.

    Pincho en el icono de Connect...

    Y, ahora en Create Site... Y escribo un nombre para el sitio web. Yo, por ejemplo, puedo poner Manual HTML este sitio).

    Voy avanzando. Elijo FTP como protocolo de transferencia. En la siguiente ventana, escribo el nombre del servidor:

    En la siguiente el nombre de usuario y la contrasea:

    Si todo ha ido bien se abre ya la doble ventana anterior con el sitio remoto (el del servidor) en la derecha:

    Ahora me muevo con la flechita en la ventana izquierda para encontrar la carpeta de mi disco duro en la que tengo los archivos.

    Para publicar simplemente elijo el archivo en la ventana de My Computer y pincho en la flecha La prxima vez que tenga que conectar ya no necesitar escribir todos los datos. Bastar dar a Connect, elegir el sitio al que quiera conectar (puedo tener tantos sitios como sea necesario...) y pulsar Connect

    21.- Publicitar el sitio. En el apartado 6.1.- se explicaba la importancia de las meta etiquetas para que los buscadores encuentren nuestro sitio. Para ayudarles en esta labor, hay que dar de alta nuestra pgina en los buscadores ms importantes (o en todos los que podamos). Normalmente se produce un efecto multiplicador: En la medida que una determinada pgina es encontrada por ms buscadores o robots de bsqueda, otros buscadores la encontrarn de manera ms fcil. Es una tarea bastante pesada. Hay que rellenar un formulario con los datos de la pgina: La direccin URL, el ttulo, la descripcin, las palabras clave, la persona responsable, su direccin de correo, ... Los resultados, normalmente, no son inmediatos. El buscador se reserva el derecho de mirar la pgina e incluirla en su base de datos. El proceso, cuando el alta no es de pago, puede durar un par de meses... pero, al final, y tras perder unas cuntas horas en este trabajo, el resultado es positivo. En el apartado 6.1.- ya mencionado pona un ejemplo de bsqueda de una de mis pginas.

    Ahora pongo otro:

    Que corresponde a mi pgina Colores En ninguno de los casos me he gastado un slo euro en promocionarlas. Ahora, eso s, las meta tags estn muy pensadas y, sobre todo, he dedicado bastante tiempo a dar de alta cada una de las pginas en todos los buscadores que me han dejado hacerlo de forma gratuita. En casi todos los casos te van a pedir una cuenta de correo activa, algunas veces tendrs que contestar el mensaje de correo que te manden. Es aconsejable crearse una cuenta especfica para este menester. De esta forma evitas ver tu correo habitual inundado de publicidad y mensajes que no te interesan lo ms mnimo. Aqu te pongo unas cuntas pginas que facilitan la tarea de darse de alta en varios buscadores a la vez: http://www.losbuscadores.net/alta.html http://usuarios.lycos.es/altagratis/ http://www.altas-buscadores.com/infogratis.htm http://www.wguia.com/altaenbuscadores/gratis/ http://www.afiliacion-web.com/ Otro dato importante es que, en la pgina inicial, debes colocar una frase que se corresponda con el contenido del sitio. Esto suele ser

    normal, excepto cuando la primera pgina est ocupada por una imagen o una animacin flash,... En este caso suele funcionar un truco (ver la nota inmediatamente inferior) que consiste en escribir en los mrgenes de la imagen, con el mismo color de fondo, el ttulo del sitio. El navegador no lo visualizar pero s el robot que recoger la informacin y la expondr en los resultados de la bsqueda. Este truco lo he empleado en la pgina inicial de este sitio. Pincha con el botn derecho del ratn y selecciona Ver cdigo fuente para comprobar que antes de la tabla en la que se inserta la imagen, est colocado el ttulo del sitio: Manual de lenguaje html y alguna descripcin ms del mismo.
    Nota muy importante: Google es un buscador muy "refinado" y, el truco que acabo de explicar no ha funcionado... De hecho me penaliz este sitio por hacer exactamente lo que he comentado. Entenda, que ocultar la descripcin del sitio escribiendo con el mismo color que tiene el fondo es una forma de "engaar" o "querer engaar". As, he estado varios meses sin que este buscador localizase este sitio. Extraado por lo que ocurra, me puse en contacto con ellos y, sin que me diesen pistas explcitas, descubr que era se el motivo por el que me haban penalizado el sitio, no mostrando los resultados de la bsqueda. Quit esa informacin y, al tiempo, mi sitio era encontrado. Tambin de manera espectacular en el primer puesto, si escribo en la cadena de texto "manual de lenguaje html"

    En mi bitcora expliqu en su da estos avatares: http://angelpuente.acelblog.com/mis-problemas-con-google.html

    You might also like