Copia de Monografía HTML

Colegio Particular Latino
Monografa de Grado
Manual general de HTML

Bryhan Posligua Andrade
Asesor: Lic. Emerson Lpez
Santo Domingo de los Colorados 2010 2011
Dedicatoria
A mis padres
Que con su trabajo y sacrificio me han podido dar la posibilidad de estudiar y de aprender tanto de ellos como de mis profesores.
Agradecimiento
A todos mis
Profesores por haberme orientado cuando necesitaba ayuda junto con todos mis compaeros que de igual forma me brindaron su ayuda cuando yo la necesitaba.
Pagina De Aceptacin
Colegio Particular Latino
MONOGRAFIA DE GRADO
Manual general de HTML
Prlogo
Este trabajo monogrfico con el tema Manual General de HTML es un trabajo que se a realizado en dos fases, la terica y la prctica, el primer paso lo dimos en clase con nuestro licenciado Emerson Lpez, que fue la persona que nos introdujo a la materia, y la practica fue en el laboratorio del colegio en el que realizamos todas los ejercicios con cada una de las etiquetas, de tal modo que yo, al igual que todos mis compaeros estamos instruidos en el tema, tanto de forma terica como de forma prctica. Este es un manual completo acerca de lo que es la creacin de pginas web con HTML en el que vamos a aprender a usar el Bock de Notas de Windows y todas la pestaas necesarias para la creacin de una pagina web, as como tambin vamos a ver algunos pequeos consejos acerca de la creacin de las mismas. Aqu usted se va a encontrar con todo lo necesario para empezar a realizar su trabajo desde cero, sin conocimientos previos de lo que es la materia en si, y sin necesidad de andar buscando informacin en otros lugares ya que me he tomado la molestia de explicar detalle a detalle cada uno de los pasos que se debe dar y he buscado la forma de explicarme de modo que todos lo usuarios que lean este manual sepan interpretar la informacin, tengan o no tengan conocimientos bsicos de HTML. Este manual esta orientado sobre todo a las personas que no tienen conocimientos bsicos de HTML y que tienen ganas de iniciarse en el tema.
ndice
Introduccin Primeros Pasos con HTML Estructura de una pgina Identificador del tipo de documento <html> Cabecera de la pgina <head> Ttulo de la pgina <title> Cuerpo del documento <body> El texto Caracteres especiales y espacios en blanco Comentarios Saltos de lnea <br> El texto (II) Texto preformateado <pre> Separadores <hr> Sangrado de texto <blockquote> El texto (III) Formatear el texto <font>... Resaltado del texto <b>... El texto (IV) Encabezados <h1> ... Marquesinas <marquee> Hiperenlaces
Hiperenlace <a> Tipos de referencias Hiperenlaces (II) Destino del enlace Formato de los enlaces Hiperenlaces (III) Puntos de fijacin. Anclas Otros tipos de enlaces Imgenes Imagen <img> Texto alternativo Imgenes (II) Borde de una imagen Tamao de una imagen Imgenes (III) Alineacin de una imagen Tablas Tabla <table> Fila <tr> Columna o celda <td> Tablas (II) Formato de la tabla Formato de las celdas Tablas (III) Encabezado de columna <th> Ttulo de tabla <caption> Tablas (IV)
Combinar celdas
Marcos Conjunto de marcos <frameset> Marcos (II) Marco <frame> Marcos (III) Destino del enlace Formularios Formulario <form> reas de texto <textarea> Formularios (II) Elementos de entrada <input> Formularios (III) Campos de seleccin <select>... Multimedia Sonido de fondo <bgsound> Vdeo y audio <embed> Multimedia (II) Pelculas Flash <object>...
Introduccin
El World Wide Web (WWW) es un sistema que contiene una cantidad de informacin casi infinita. Pero esta informacin debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad bsica donde est almacenada esta informacin son las pginas Web. Estas pginas se caracterizan por contener texto, imgenes, animaciones... e incluso sonido y video. Una de las caractersticas ms importantes de las pginas Web es que son hipertexto. Esto quiere decir que las pginas no son elementos aislados, sino que estn unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante activo) de una pgina para navegar hasta otra pgina. Ser cuestin del programador de la pgina inicial decidir que palabras o frases sern activas y a donde nos conducir pulsar sobre ellas. En algunos ambientes se discute que el World Wide Web ya no es un sistema hipertexto sino hipermedia. Los que defienden el cambio se apoyan en que aunque en sus orgenes el WWW constaba nicamente de texto en la actualidad es un sistema principalmente grfico y se puede hacer que las zonas activas sean, no slo texto, sino imgenes, videos, botones,... en definitiva cualquier elemento de una pgina. An as, el trmino original no ha sido reemplazado todava y por tanto ser el empleado a lo largo de esta obra. Aunque al principio el texto predominaba en el WWW, en la actualidad las imgenes son mayora como podemos observar en una de las principales webs del proyecto KDE.
Caractersticas del lenguaje HTML Pero empecemos ya con lo que nos interesa. Cmo se hace una pgina Web? Cuando los diseadores del WWW se hicieron esta pregunta decidieron que se deban cumplir, entre otras, las siguientes caractersticas:
El Web tena que ser distribuido: La informacin repartida en pginas no muy
grandes enlazadas entre s. El Web tena que ser hipertexto y deba ser fcil navegar por l. Tena que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo...) y con todo tipo de sistemas operativos (Windows, MSDOS, UNIX, MAC-OS,...). Deba ser dinmico: el proceso de cambiar y actualizar la informacin deba ser gil y rpido. Estas caractersticas son las que marcaron el diseo de todos los elementos del WWW incluida la programacin de pginas Web. Como respuesta a todos estos requisitos se creo el lenguaje HTML (HiperText Markup Language), cuyas siglas significan "lenguaje hipertexto de marcas". Este lenguaje ser el encargado de convertir un inocente archivo de texto inicial en una pgina web con diferentes tipos y tamaos de letra, con imgenes impactantes, animaciones sorprendentes, formularios interactivos, etc. Qu se necesita para crear una pgina web: Una de las caractersticas de este lenguaje ms importantes para el programador es que no es necesario ningn programa especial para crear una pgina Web. Gracias a ello se ha conseguido que se puedan crear pginas con cualquier ordenador y sistema operativo. El cdigo HTML, como hemos adelantado en el prrafo anterior, no es ms que texto y por tanto lo nico necesario para escribirlo es un editor de texto como el que acompaan a todos los sistemas operativos: edit en MS-DOS, block de notas en Windows,vien UNIX, etc. Por supuesto estos no son los nicos editores de texto que pueden ser usados, sino cualquier otro. Tambin se puede usar procesadores de texto, que son editores con capacidades aadidas, compo pueden ser Microsoft Word o WordPerfect pero hay que tener cuidado porque en ocasiones hacen traducciones automticas del cdigo HTML que no siempre son deseadas. En estos dos ltimos casos, tambin hay que tener en cuenta que deberemos guardar el archivo en modo texto. Un editor de texto simple, como el block de notas de Windows, es todo lo necesario para crear una pgina Web Una vez hemos escrito el cdigo deberemos guardar el archivo (con formato de
texto) con la extensin .html ( o .htm en MS-DOS, Windows 3.1 o cualquier otro sistema que slo acepte tres letras en la extensin. Los siguientes son nombres vlidos de archivos que contengan cdigo HTML: index.html, index.htm,principal.html, PRINCIPAL.htm, etc... NOTA: Si el editor o procesador de textos usado para crear la pgina obliga a usar la extensin .txt al guardar el archivo en modo texto, deberemos guardarlo con esta extensin, por ejemplo como index.txt, y posteriormente cambiar el nombre del archivo desde fuera del programa a index.html o index.htm . Para ello usaremos el comando rename en MS-DOS; en Windows 3.1 lo haremos mediante el administrador de archivos y en Windows 95 con el explorador. En otros entornos, como Linux, es mas raro que se de esta situacin. ATENCIN: El World Wide Web es un sistema que diferencia las maysculas de las minsculas. Es un error comn llamar a un archivo index.html y luego referirse a l como Index.html. Aunque en nuestro ordenador puede funcionar al publicarlo seguramente no lo har. Por esta razn es una norma general usar siempre minsculas para los nombres de los archivos html. ltimamente han aparecido nuevas alternativas que facilitan la programacin de pginas Web. Son los editores HTML. Podemos dividir estos editores en dos grupos:
Asistentes: ayudan a crear el cdigo HTML e incluyen plantillas de cdigo prefabricadas, por ejemplo HotDog (Win), HomeSite(Win),HTML Editor (Mac), Quanta (Linux, KDE) o Bluefish, (Linux, GNOME). Conversores: son programas con otra funcin que la de la programacin Web pero que permiten convertir a HTML. Son ejemplos de conversores Microsoft Word ,Quark XPress y PageMaker. Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes): estos editores permiten crear pginas web sin escribir cdigo HTML como si se tratase de un programa de dibujo por ordenador. Algunos ejemplos de este tipo de editores son Macromedia Dreamweaver, HotMetal o Microsoft Frontpage. Algunos editores WYSIWYG permiten, adems, modificar el cdigo HTML directamente.
Algunas razones para usar HTML Todos estos editores HTML tipos pueden ser de gran ayuda y tienen sus ventajas e inconvenientes, pero la experiencia demuestra que conocer el lenguaje HTML ofrece bastantes ventajas:
Seremos capaces de aprovechar todas las caractersticas de este lenguaje, incluso las ms nuevas. Aunque se use inicialmente un editor WYSWYG tendremos los conocimientos suficientes para modificar posteriormente el cdigo que ste ha creado. As se pueden corregir errores o incluir etiquetas no soportadas por el editor. No dependeremos de la disponibilidad de una herramienta concreta para poder crear pginas web. Con un simple editor de textos ser suficiente. El principal problema de usar editores conversores y WYSIWYG es la necesidad de trabajar con dos archivos-fuentes por separado, por un lado el archivo del editor y por otro el archivo del cdigo HTML una vez generado, lo que nos complica la vida a la hora de realizar cambios en nuestro Web. Sin embargo su utilidad es innegable y su combinacin con un buen conocimiento del lenguaje HTML nos convertir en unos grandes programadores de pginas Web capaces de realizar creaciones impactantes visualmente y de gran calidad tcnica. HTML es un lenguaje descriptivo Probablemente el lector ha usado alguna vez un procesador de texto (Abiword, Microsoft Word o KWord) o un programa de descripcin de pginas (QuarkXPress). Con este tipo de aplicaciones el usuario tiene un control total sobre los elementos del documento: se le puede decir al programa "pon este texto con este tamao", "sitalo a 1 cm. del borde", "usa este sangrado para los prrafos", etc... Con HTML el programador no tiene este tipo de control sobre los elementos que incluir en su pgina. El objetivo de este lenguaje ser simplemente describir cmo es una pgina de manera que examinando esa descripcin el navegador del usuario final sea capaz de mostrarlo de la mejor manera posible. Con HTML podremos indicarle al navegador que este es un
titular, aqu comienza un prrafo, estos son elementos de una lista, etc. posteriormente el navegador decidir como mostrar esos elementos.
Primeros pasos con HTML

Para irnos haciendo una idea de cmo crear una pgina HTML a travs del Bloc de notas, vamos a crear una pgina web sencilla, con una lnea de texto.
Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes dirigirte al men Inicio, Programas, Accesorios, opcin Bloc de notas. Seguidamente introduce, en el documento en blanco, el texto siguiente: <html> <head> <title>MI PRIMERA PAGINA</title> </head> <body bgcolor="#FFCC99"> <font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font> </body> </html>
Guarda el documento con la extensin htm, con el nombre miprimpag.htm. Puedes guardarlo a travs del men Archivo, opcin Guardar. Pulsando dos veces sobre el icono del archivo miprimpag.htm, ste debera abrirse automticamente en el navegador que tengas instalado en tu ordenador. El navegador deber mostrar una pgina como la de la derecha.
Como puedes ver, la pgina resultante es una pgina que solamente tiene una lnea de texto.
Si observas la barra de ttulo del navegador, vers que el ttulo de la pgina es MI PRIMERA PAGINA. Este ttulo ha sido establecido por la lnea <title>MI PRIMERA PAGINA</title>. El color de fondo de la pgina ha sido establecido por la lnea <body bgcolor="#FFCC99">. El texto Hola, estoy haciendo pruebas. se ha insertado a travs de la lnea <font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>.
Estructura de una Pgina

A lo largo de este tema vamos a aprender a crear una pgina bsica. La estructura bsica de una pgina es: <html> <head> ... </head> <body> ... </body> </html> Ahora veamos cmo funcionan estas etiquetas.
Identificador del tipo de documento <html>
Todas las pginas web escritas en HTML tienen que tener la extensin html o htm. Al mismo tiempo, tienen que tener las etiquetas <html> y </html>. Entre las etiquetas <html> y </html> estar comprendido el resto del cdigo HTML de la pgina. Por ejemplo: <html> ... </html>
Cabecera de la pgina <head>

La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el ttulo. Est formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html>. Por ejemplo: <html> <head> ... </head> ... </html> Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y ms se utilizan son:
<link>, <style>, <script> (estas etiquetas las veremos ms adelante), <meta> ) y la etiqueta <title> que te explicamos a continuacin.
Ttulo de la pgina <title>

El ttulo de la pgina es el que aparecer en la parte superior de la ventana del navegador, cuando la pgina est cargada en l. Para asignar un ttulo a una pgina es necesario escribir el texto deseado entre las etiquetas <title> y </title>.
Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>. Por ejemplo: <html> <head> <title> Curso de HTML </title> </head> ... </html>
Cuerpo del documento <body>

El cuerpo del documento contiene la informacin propia del documento, es decir lo que pqueremos que se visualice, el texto de la pgina, las imgenes, los formularios, etc. Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que van justo debajo de la cabecera. Por ejemplo: <html> <head> <title> Curso de HTML </title> </head> <body> ... </body> </html> A travs de la etiqueta <body> es posible establecer el color o la imagen de fondo de la pgina. El color de fondo puede establecerse a travs del atributo bgcolor, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido.
Por ejemplo, para hacer que el color de fondo de una pgina sea de color azul, tendremos que escribir: ... <body bgcolor="#0000FF"> ... </body> </html> Sera equivalente a poner: ... <body bgcolor="blue"> ... </body> </html> La imagen de fondo puede establecerse a travs del atributo background, indicando la ruta en la que se encuentra la imagen. Por ejemplo, para hacer que la imagen de fondo de una pgina sea la imagen fondo.gif, que se encuentra en el mismo directorio en el que se encuentra guardada la pgina, tendremos que escribir: ... <body background="fondo.gif"> ... </body> </html>
En el caso de que la imagen no se encuentre en el mismo directorio que la pgina, y se encuentre dentro de la carpetaimagenes, que s se encuentra en el mismo directorio que la pgina, tendremos que escribir: ... <body background="imagenes/fondo.gif"> ... </body> </html>
A travs de la etiqueta <body> tambin es posible establecer el color del texto de la pgina a travs del atributo text. Por ejemplo, para hacer que el color del texto de una pgina sea de color rojo, tendremos que escribir:
... <body text="#FF0000"> ... </body> </html>
Entre el borde de la ventana y el contenido de la pgina existe un margen, cuyo tamao en pxeles puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior). Estos atributos no funcionan para el navegador Netscape, pero s los atributos marginwidth (anchura del margen) y marginheight (altura del margen). Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero. Por ejemplo, para hacer que una pgina no tenga margen superior, y tenga un margen izquierdo de 20 pxeles, tendremos que escribir: ... <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" > ... </body> </html>
El texto
A lo largo de este tema vamos a aprender a cambiar las propiedades del texto, as como a insertar caracteres especiales o separadores.
Caracteres especiales y espacios en blanco

Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. Si se desea insertar estos caracteres como texto hay que escribir el nombre que los representa: < Se representa con < > Se representa con > Existen otra serie de caracteres que no se visualizan correctamente en algunos navegadores, como es el caso de la y las letras acentuadas, por lo que al igual que ocurre con los caracteres especiales < y >, para insertarlos como texto habra que escribir el nombre que los representa. A continuacin se muestra una lista con algunos caracteres y el nombre con el que han de ser representados: Carcter < > Representacin < > á Á é É í Í ó Ó Carcter & " Representacin € ç Ç ü Ü & ¿ ¡ " ·
ú Ú ñ Ñ
º ª ¬ © ®
Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en blanco seguidos slamente se mostrar uno en el navegador. Para conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos por . Por ejemplo, para insertar el texto: Bienvenidos, esta es mi 1 pgina! Habra que escribir: ¡Bienvenidos, esta es mi 1ª página!
Comentarios
En ocasiones podemos desear aadir comentarios aclaratorios dentro del cdigo, de manera que no sean visualizados en el navegador, pero s a la hora de editar el documento. Para insertar comentarios dentro del cdigo, basta con insertar el texto entre . Todo el cdigo que se inserte entre estos smbolos no ser visualizado en los navegadores. Por ejemplo, para insertar el texto siguiente con un comentario: Bienvenidos, esta es mi 1 pgina! Habra que escribir:  ¡Bienvenidos, esta es mi 1ª página!
Saltos de lnea <br>

En general, cuando trabajamos con un editor de texto se produce un salto de lnea al pulsar la tecla INTRO. Si pulsamos INTRO en un documento HTML, el salto de lnea se producir en el cdigo, pero no se mostrar en el navegador. Para que se produzca el salto de lnea en el navegador, en lugar de pulsar la tecla INTRO hay que insertar la etiqueta <br> donde se desee que se produzca el salto. La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br> despus de ella, ya que dicha etiqueta no existe. Por ejemplo, para insertar el texto: Queridos usuarios,
tengo el placer de comunicaros que hay una nueva seccin. Habra que escribir: Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva secci&oacuten.
El texto (II)
Texto preformateado <pre>

Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del cdigo, es utilizando las etiquetas <pre> y </pre>. Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarn todos los espacios en blanco que se inserten en el texto, as como todos los saltos de lnea resultantes de pulsar la tecla INTRO, sin la necesidad de utilizar la etiqueta <br>. Por ejemplo, para insertar el texto: Hola, esta BIENVENIDOS ES MI PGINA WEB
y esto un texto preformateado Habra que escribir:
<pre>Hola, BIENVENIDOS esta ES MI PGINA 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 imgenes), <object> (para incluir objetos como animaciones), <big>, <small>, <sub> ni <sup> (las veremos en este tema).
Separadores <hr>
El elemento que suele utilizarse para separar secciones dentro de una misma pgina es la regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta<hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre. Es posible especificar algunos atributos de la regla horizontal:
Atributo
Significado alineacin de la regla dentro de la pgina ancho de la regla
Posibles valores
align width size
left (izquierda) right (derecha) center (centro)

un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero no puede tomar valores
alto de la regla eliminar el sombreado de la noshade regla
Por ejemplo, para insertar el texto y la regla horizontal siguientes: Inicio
Bienvenidos a mi pgina. Habra que escribir: Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi página.
Sangrado de texto <blockquote>

La sangra es una especie de margen que se establece a ambos lados del texto. Para que un texto aparezca sangrado, se inserta entre las etiquetas <blockquote> y</blockquote>. Esta etiqueta en un principio se defini para delimitar citas pero que como la mayora de los navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se ha generalizado. El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva lnea. Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los mrgenes sean mayores. Por ejemplo, para insertar el texto: Queridos usuarios, tengo el placer de comunicaros que hay una nueva seccin. Habra que escribir: Queridos usuarios, <blockquote> <blockquote> tengo el placer de comunicaros que hay una nueva secci&oacuten. </blockquote> </blockquote>
El texto (III)
Formatear el texto <font>...

Las propiedades del texto pueden modificarse a travs de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta:
Atributo Significado fuente color del texto tamao del texto Posibles valores nombre de la fuente, o fuentes nmero hexadecimal o texto predefinido valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamao por defecto, aadiendo + o - delante del valor
face color size
Por ejemplo, para insertar el texto:
Bienvenidos a www.Bryhan.com
Habra que escribir: <font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.aulaclic.com</font>
Tambin es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta <basefont> despus de la etiqueta <body>. La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta <font>. Por ejemplo: <body> <basefont color="#006699" size="4" face="Arial"> ... Este cdigo hara que la fuente del documento fuera por defecto de color azul, de tamao 4 y Arial. Si despus de indicar la etiqueta <basefont> o <font>, el navegador encuentra otra etiqueta <font>, la que prevalece es siempre la ltima que se encuentra.
Resaltado del texto <b>...

Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse segn vayan asociados al tipo de letra o a la informacin que represente el texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto. A continuacin se muestran algunas etiquetas asociadas al tipo de letra:
Etiqueta
<b> <i> <u> <s> <tt> <big> <small>
Significado negrita cursiva subrayado tachado teletipo (mquina de escribir) aumenta el tamao de la fuente disminuye el tamao de la fuente
Ejemplo curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic
curso HTML aulaclic
curso HTML aulaclic

curso HTML aulaclic
A continuacin se muestran algunas etiquetas asociadas al tipo de informacin:
Etiqueta
<cite> <code> <dfn> <del> <em> <ins> <kbd> <samp> <strong> <sub> <sup> <var>
Significado cita ejemplo de cdigo definicin eliminado nfasis insertado teclado muestra destacado subndice superndice variable
Ejemplo curso HTML aulaclic

curso HTML aulaclic
curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic
curso HTML aulaclic
curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic
Las etiquetas ms utilizadas son las asociadas al tipo de letra, ya que son ms fciles de recordar, y en muchos casos los resultados son los mismos que los de aplicar una etiqueta diferente. Por ejemplo, el resultado de aplicar las etiquetas <b> y <strong> es el mismo. Incluso a veces algunos estilos asociados al tipo de informacin pueden representarse de forma distinta segn el navegador. Por ejemplo, para insertar el texto:
Bienvenidos a
Habra que escribir:
www.Bryhan.com
<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a <b><u><tt>www.Bryhan.com</tt></u></b></font>
El texto (IV)
Prrafos <p>...
El texto de una pgina puede agruparse en prrafos. Para ello, el texto de cada uno de los prrafos debe insertarse entre las etiquetas <p> y </p>. No es necesario insertar la etiqueta <br> para que un nuevo prrafo aparezca debajo del anterior, ya que las etiquetas <p> y </p> hacen que se cambie de lnea automticamente. Tambin es posible cambiar la alineacin del texto de cada prrafo. Para ello se modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right (derecha),center (centrado) o justify (justificado). Por ejemplo, para insertar el texto: Bienvenidos a mi pgina. Aqu encontraris cursos de formacin muy interesantes. Habra que escribir: <p align="center">Bienvenidos a mi p&aacutegina.</p> <p>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</p> Otra forma de cambiar la alineacin del texto es mediante las etiquetas <div> y </div>, para las que tambin existe el atributo align. La etiqueta <div>, al igual que la etiqueta <p>, se utiliza para agrupar bloques de texto, pero con la diferencia de que la separacin entre ellos es menor. Por ejemplo, para insertar el texto: Bienvenidos a mi pgina. Aqu encontraris cursos de formacin muy interesantes.
Habra que escribir: <div align="center">Bienvenidos a mi p&aacutegina.</div> <div>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</div> Tambin es posible insertar el texto entre las etiquetas <center> y </center> para que aparezca centrado. Por ejemplo, para insertar el texto:
Bienvenidos a mi pgina. Habra que escribir: <center>Bienvenidos a mi p&aacutegina.</center> Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el cambio de lnea (como en el caso de <p> y <div>), son las etiquetas <span> y</span> volveremos a hablar de estas etiquetas cuando veamos las hojas de estilo.
Encabezados <h1> ...

Existen una serie de encabezados que suelen utilizarse para establecer ttulos dentro de una pgina. La diferencia entre los distintos tipos de encabezado es el tamao de la letra, el tipo de resaltado, y la separacin existente entre el texto y los elementos que tiene encima y debajo de l. Hay que tener en cuanta que el navegador del usuario es el que aplicar el estilo del encabezado por lo que el mismo ttulo se puede visualizar de forma diferente segn el navegador. Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una etiqueta de cierre. A continuacin se muestran los distintos encabezados existentes: Etiqueta Ejemplo
<H1> <H2> <H3> <H4> <H5> <H6>
Ttulo 1: HTML
Ttulo 2: HTML
Ttulo 3: HTML Ttulo 4: HTML Ttulo 5: HTML Ttulo 6: HTML
Para todas estas etiquetas es posible especificar el valor del atributo align.
Por ejemplo, para insertar el texto:
El lenguaje HTML
Apartado 1: Las etiquetas
Habra que escribir: <H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4>
Marquesinas <marquee>
Las marquesinas son lneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de lnea. Para insertar una marquesina, etiquetas <marquee> y </marquee>. es necesario insertar el texto entre las
La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varen. A travs del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos),scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez). A travs del atributo direction puede modificarse la direccin en la que se mover el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha). Tambin es posible establecer un color de fondo, a travs del atributo bgcolor. Por ejemplo, para insertar la siguiente marquesina:
Habra que escribir: <marquee bgcolor="#006699" behavior="alternate" direction="right"> <b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b> </marquee> Tambin es posible insertar imgenes, tablas y etiquetas <marquee> y </marquee>, no slamente texto. otros elementos entre las
Hiperenlaces
Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento esencial para cualquier pgina web.
Hiperenlace <a>
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo. Aquellos elementos (texto, imgenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>. A travs del atributo href se especifica la pgina a la que est asociado el enlace, la pgina que se visualizar cuando el usuario haga clic en el enlace. Por ejemplo, para insertar el enlace:
Visita www.Bryhan.com
Habra que escribir: <a href="http://www. Bryhan.com">Visita www. Bryhan.com</a>
Tipos de referencias
Existen diferentes formas de expresar una referencia a una pgina a travs del atributo href. Referencia absoluta: Conduce a una ubicacin externa al sitio en el que se encuentra el documento. La ubicacin es en Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de la pgina. Si no se escribe el nombre de la pgina se cargar la pgina de inicio asociada al dominio. Por ejemplo, "http://www. Bryhan.com" tendr el mismo efecto que "http://www. Bryhan.com/index.htm" Para insertar el enlace:
Visita www. Bryhan.com

Habra que escribir: <a href="http://www. Bryhan.com">Visita www. Bryhan.com</a>
Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn, estando todos ellos dentro de una misma carpeta, conocida como carpeta raz del sitio. Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra directamente dentro de la carpeta raz del sitio, para insertar el enlace:
Enlace a Tema 4: Hiperenlaces

Habra que escribir: <a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a> Observa como aparece el smbolo "/" delante del nombre del documento. Esta barra inclinada indica la carpeta raz del sitio. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raz del sitio, habra que escribir: <a href="/tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual. Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra dentro de la misma carpeta que el documento actual, para insertar el enlace:
Enlace a Tema 4: Hiperenlaces

Habra que escribir: <a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a> Observa que en este caso no aparece el smbolo "/" delante del nombre del documento. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamadatema4, y esta estuviera dentro de la misma carpeta que el documento actual, habra que escribir:
<a href="tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Punto de fijacin: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vnculo debe ser "nombre_de_documento#nombre_de_punto". Por ejemplo, para insertar el enlace:
Punto de fijacion Tipos de enlaces

Habra que escribir: <a href="t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a> Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijacin se llama tipos. Al final de este tema vers cmo definir el punto de fijacin.
Hiperenlaces (II)
Destino del enlace
El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, se especifica a travs del atributo target al que se le puede asignar los siguientes valores: _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. _self: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo. _top: Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de destino, ya que se volvern a ver en el tema de Marcos. De momento slo te interesa retener la opcin _blank y _self. Para insertar el enlace:
Visita www.Bryhan.com en una ventana nueva

Habra que escribir: <a href="http://www.aulaclic.com" target ="_blank">Visita www.aulaclic.com en una ventana nueva</a> Es interesante utilizar esta opcin cuando la pgina de destino est fuera de nuestro sitio para que cuando el usuario cierre la ventana del explorador, se encuentre automticamente en la pgina desde la que haba salido (que vuelva a nuestro sitio).
Formato de los enlaces

En general, un texto que tiene un vnculo asociado suele aparecer subrayado. Cuando el vnculo est definido sobre una imgen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vnculo est definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona. Aqui tienes dos vnculos similares de ejemplo:
Como puedes ver, la segunda imagen que hace de vnculo contiene un recuadro alrededor. Esto ocurre debido a que se ha establecido un borde para la imagen, como veremos ms adelante. Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vnculo. Suele adquirir la apariencia de una mano sealando. Normalmente los vnculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el puntero del ratn se posiciona sobre l, estos cambios estn predefinidos en cada navegador, pero nosotros podemos cambiar esos colores. Los colores de los vnculos pueden especificarse a travs de las propiedades de la pgina, en la etiqueta <body>. Estos colores se asignan a travs de los atributos link(vnculo), alink (vnculo activo), y vlink (vnculo visitado).
link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez). alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado). vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados). Por ejemplo, al insertar el siguiente cdigo: ... <body link="#FF0000" vlink="#FF0099" alink="#FF9900"> ... <a href="http://www. Bryhan.com" target ="_blank">www. Bryhan.com</a> ... Mientras no se visite la pgina www.Bryhan.com, el enlace ser de color rojo (#FF0000):
www. Bryhan.com
Mientras la pgina www.aulaclic.com sea la ltima visitada, el enlace ser de color fucsia (#FF0099):
www. Bryhan.com
Cuando se haya visitado la pgina www.aulaclic.com, el enlace ser de color naranja (#FF9900):
www. Bryhan.com
Hiperenlaces (III)
Puntos de fijacin. Anclas

Cuando se tienen documentos extensos, divididos en varios apartados, es preferible poder ir directamente al apartado deseado, en lugar de ir al comienzo del documento. Para ello se utilizan las anclas, o puntos de fijacin, muy tiles a la hora de crear ndices. Un ancla necesita que se inserten las <a> y </a>, con el atributo name, que puede tomar cualquier valor inventado por el usuario, se recomienda no utilizar caracteres especiales. Por ejemplo, para insertar un punto de fijacin delante del siguiente texto:
Texto con ancla
Habra que escribir: <a name="miancla"></a>Texto con ancla Como puedes ver, no es necesario insertar nada entre las etiquetas <a> y </a>, y que sin mirar el cdigo no hay nada que indique que delante del texto haya un ancla. Teniendo en cuenta que el documento actual se llama t_4_3.htm, y que el ancla anterior se llama miancla, podramos crear un enlace que nos llevara directamente a la lnea de texto en la que se encuentra el ancla. Por ejemplo:
Enlace al ancla
Habra que escribir: <a href="t_4_3.htm#miancla">Enlace al ancla</a> Si pulsas sobre el enlace vers como se vuelve a cargar el documento actual, pero en lugar de cargarse desde el principio, la primera lnea de texto ser la lnea en la que hemos insertado el ancla. Cuando el ancla se encuentra en el mismo documento que el enlace, como ocurre en este caso, podemos prescindir de poner el nombre de la pgina en el atributo href. En el ejemplo anterior podramos haber escrito: <a href="#miancla">Enlace al ancla</a>
Otros tipos de enlaces

Existen otros tipos de enlaces que no conducen a otra pgina web, los veremos a continuacin: Correo electrnico: Abre la aplicacin Outlook Express para escribir un correo electrnico, cuyo destinatario ser el especificado en el enlace. Para ello la referencia del vnculo debe ser"mailto:direcciondecorreo". Por ejemplo, para insertar un enlace que permita enviar un correo electrnico a aulaClic, tal como este:
e-mail para Bryhan

Habra que escribir: <a href="mailto:bryhan_132hotmail.es.com">e-mail para aulaclic</a>
Despus 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. Podemos hacer que est rellenado algn campo ms como es el asunto. En este caso habra que escribir: <a href="mailto:bryhan_13@hotmail.es?subject=el asunto del mensaje">e-mail para Bryhan</a> Vnculo a ficheros para descarga: El valor del atributo href normalmente ser una pgina web (con extensin htm, html, asp, php...) pero tambin puede ser un fichero comprimido, una hoja de Excel, un documento Word, un documento con extensin pdf. Cuando el enlace no es a una pgina Web nos aparecer el cuadro de dilogo que seguro habrs visto alguna vez en el que el navegador le pide al usuario permiso para descargar el fichero en su ordenador.
El navegador reconoce algunas extensiones como asociadas a un determinado programa (por ejemplo la extensin .doc est asociada al programa Word, .pdf al programa Acrobar Reader, .xls al programa Excel...) en este caso en el cuadro de dilogo aparece una nueva opcin, la de abrir el fichero sin descargarlo en el disco duro del usuario. Para nombrar el fichero podemos utilizar segn el caso, una referencia externa, una referencia relativa al sitio o una referencia relativa al documento. Por ejemplo, en la carpeta donde se encuentra esta pgina tenemos el fichero Word carta.doc y queremos que nuestros visitantes puedan visualizar e incluso descargar el fichero en su disco duro, en este caso definiremos el enlace:
haz clic aqu para descargarte el fichero

De la siguiente forma: <a href="carta.doc" tarjet=_blank >haz clic aquí 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 pgina. Vnculo vaco:
Al pulsar sobre un enlace vaco no se abre ninguna pgina ni archivo, pero el formato es el mismo que el de cualquier otro enlace. El vnculo debe ser el smbolo almohadilla"#". Por ejemplo, para insertar el enlace vaco:
vinculo vacio
Habra que escribir: <a href="#">vinculo vacio</a> Este tipo de enlace resulta til para trabajar con comportamientos javascript.
Imgenes
Vamos a ver cmo insertar imgenes, y cmo modificar algunas de sus propiedades.
Imagen <img>
Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su apariencia, o dotarla de una mayor informacin visual. Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a travs del atributo src. Por ejemplo, para insertar la siguiente imagen:
Habra que escribir: <img src="imagenes/logo_animales.gif"> Teniendo en cuentra que la imagen se llama logo_animales.gif y que est dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento). Para trabajar de una forma ms sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imagenes, o una carpeta destinada a almacenar archivos de audio, etc.
Texto alternativo
Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen. Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt.
Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente cdigo: <img src="gatito.gif" alt="Imagen gato" > Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el documento actual, sino que se encuentra dentro de la carpeta imagenes. En lugar de la imagen se mostrar lo siguiente:
Si en lugar del cdigo anterior hubiramos insertado el siguiente cdigo: <img src="imagenes/gatito.gif" alt="Imagen gato" > La imagen habra mostrado correctamente:
El texto alternativo se muestra tambin al situar el puntero sobre la imagen. Si situas el puntero sobre la imagen durante unos segundos, vers como aparece el texto Imagen gato. El texto alternativo es muy til a la hora de disear pginas ms asequibles a los invidentes ya que los programas lectores son capaces de leer el texto alternativo.
Imgenes (II)
Borde de una imagen

En general, al visualizar una pgina en un navegador las imgenes aparecen sin ningn borde alrededor, pero es posible establecer uno a travs del atributo border. El atributo border puede tomar valores numricos, que indican el grosor en pxeles del borde. Por ejemplo, para insertar la siguiente imagen con borde:
Habra que escribir: <img src="imagenes/logo_animales.gif" border="4" > Hay que tener en cuenta que el borde de la imagen siempre ser de color negro, a no ser que la imagen contenga un enlace, en cuyo caso el color del borde ser el color establecido para los vnculos. Por ejemplo, para insertar la siguiente imagen con borde y con un enlace:
Habra que escribir: <a href="http://www.aulaclic.com" target ="_blank" ><img src="imagenes/logo_animales.gif" border="4" ></a> Si se desea establecer un vnculo sobre una imagen y no se desea que se muestre el borde (que por su color indica que existe dicho vnculo), es necesario establecerborder="0".
Tamao de una imagen

Cuando insertamos una imagen, esta se muestra en los navegadores con su tamao original, pero por diversos motivos puede interesarnos modificar dicho tamao. A travs de los atributos width (anchura) y height (altura) puede modificarse el tamao de la imagen. Dicho cambio de tamao no se aplica directamente sobre el archivo de imagen, sino que lo que vara es la visualizacin de la imagen en el navegador. El valor que pueden tomar los atributos width y height ha de ser un nmero, acompaado de % cuando se desee que sea en porcentaje con respecto a la pgina. Por ejemplo, para insertar la siguiente imagen (cuyo tamao original era de 122 pxeles de anchura y 71 pxeles de altura) con 200 pxeles de anchura y 80 pxeles de altura:
Habra que escribir: <img src="imagenes/logo_animales.gif" width="200" height="80"> Al modificar el tamao de la imagen a travs de estos atributos es muy probable que la imagen resultante no sea de buena calidad, en comparacin de cmo podra quedar modificndola desde un editor externo, como Fireworks.
Imgenes (III)
Alineacin de una imagen

La alineacin de las imgenes se establece a travs del atributo align. Este atributo indica la alineacin de las imgenes con respecto a la lnea de texto en la que se encuentran. Los valores del atributo align pueden ser los siguientes:
Valor
Significado
Ejemplo
absbottom inferior absoluta

Imagen con texto
absmiddle
medio absoluta
Imagen con texto
baseline bottom left
lnea de base
Imagen con texto
inferior
Imagen con texto
izquierda
Imagen con texto
middle
medio
Imagen con texto
right texttop
derecha
Imagen con texto Imagen con texto
texto superior
Imagen con texto
top
superior
El resultado de aplicar uno u otro valor puede tener el mismo resultado, como ocurre con los valores baseline y bottom, o con los valores texttop y top. Para insertar el texto y la imagen siguientes:
PerrosGatos
Una web de animales
Habra que escribir: PerrosGatos<img scr="imagenes/logo_animales.gif" align="middle">Una web de animales Este tipo de alineacin la recomendamos cuando es una imagen pequea que queremos fundir con la lnea de texto sin que por ello cree una separacin demasiado grande entre la lnea donde se encuentra la imgen y las lneas superior y inferior. Por ejemplo para la imagen de un icono de cualquier programa, de un botn, etc... Si la imagen es muy grande, conviene dejarla aislada del texto (no ajustarla a la derecha ni a la izaquierda sino colocarla en un bloque aparte).
Tablas
En este tema vamos a ver cmo trabajar con tablas. Podremos insertar tablas, filas y columnas, y modificar sus propiedades. Hoy en dia, la mayora de las pginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseo. Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imgenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas seran imposibles de realizarse.
Tabla <table>
Las tablas estn formadas por celdas, que son los recuadros que se obtienen como resultado de la interseccin entre una fila y una columna.
imagen y texto Texto dentro de una celda
COLUMNA
FILA
CELDA
Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habr que especificar las filas y columnas que formarn la tabla.
Fila <tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas debern insertarse entre las etiqetas <table> y </table>. Por ejemplo, para crear una tabla con cinco filas escribiramos: <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table>
Columna o celda <td>

Para crear una tabla no basta con especificar el nmero de filas, es necesario tambin especificar el nmero de columnas. Una celda es el resultado de la interseccin entre una fila y una columna, por lo que podremos especificar el nmero de celdas por fila, que equivale a especificar el nmero de columnas por fila. Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habr que insertar esas etiquetas entre las etiquetas <tr> y </tr>. Entre las etiquetas <td> y </td> se podr especificar el contenido de cada una de las celdas. Por ejemplo, para insertar la siguiente tabla:
Sabado Curso HTML
Domingo Curso Dreamweaver
Curso Frontpage Curso Flash
Habra 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>
Tablas (II)
Formato de la tabla
Es posible modificar los siguientes atributos de una tabla:
Atributo
Significado ancho de la tabla
width height
altura de la tabla
Posibles valores un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero un nmero un nmero left (izquierda) right (derecha) center (centro) nmero hexadecimal nmero hexadecimal nmero hexadecimal
espacio entre el cellpadding contenido de las celdas y el borde cellspacing espacio entre celdas grosor del borde border
align bgcolor background bordercolor
alineacin de la tabla dentro de la pgina color de fondo imagen de fondo color del borde
Por ejemplo, para modificar la tabla de la pgina anterior para que quedase como la siguiente:
Sabado Curso HTML Curso Frontpage

Habra que escribir:
Domingo Curso Dreamweaver Curso Flash
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgco lor="#FFCC99"> ... </table> Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y vers que el ancho de la tabla vara para ocupar siempre la mitad de la ventana), que el borde (border) tiene un grosor de dos pxeles (es ms ancho que las separaciones internas de la tabla que tienen grosor 1), que la tabla est alineada al centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99).
Formato de las celdas

Es posible modificar los siguientes atributos de una celda:
Atributo
Significado ancho de la tabla
width height
altura de la tabla alineacin horizontal del contenido de la celda alineacin vertical del contenido de la celda
align
valign
Posibles valores un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero, acompaado de % cuando se desee que sea en porcentaje left (izquierda) right (derecha) center (centro) baseline (lnea de base) bottom (inferior) middle (medio) top (superior)
bgcolor background bordercolor
color de fondo imagen de fondo color del borde
nmero hexadecimal nmero hexadecimal nmero hexadecimal
Tambin es posible modificar estos atributos de toda una fila, especificndolos en la etiqueta <tr>, en lugar de en la etiqueta <td>. Hay que tener en cuenta que los atributos tienen ms prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen ms prioridad los atributos establecidos para una fila que los establecidos para toda la tabla. Por ejemplo, si escribiramos el siguiente cdigo: <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgco lor="#FFCC99"> <tr align="center" bgcolor="#0099CC"> <td>Sabado</td> <td bgcolor="#66CC99">Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table>
Obtendramos la siguiente tabla:
Sabado Curso HTML Curso Frontpage
Se ha establecido el color naranja como fondo de toda la tabla, pero con la lnea de cdigo <tr align="center" bgcolor="#0099CC"> se ha establecido el color azul como color de fondo de la primera fila, por lo que dicha fila se mostrar de color azul, y no de color naranja. Al mismo tiempo, se ha cambiado el color de la segunda celda de la primera fila por el color verde, a travs de la lnea <td bgcolor="#66CC99">Domingo</td> por lo que esta fila en vez de ser azul ser verde, los atributos de celda tienen prioridad sobre los de la fila.
Existe otro atributo que puede establecerse sobre las celdas. Se trata del atributo nowrap, que hace que el contenido de la celda no se ajuste de manera automtica al ancho de la columna sino que el ancho de la celda se adapta al ancho del contenido para que el contenido ocupe una slo fila. Este atributo no toma ningn valor, simplemente se aade o no a las etiqueta <td>.
Tablas (III)
Encabezado de columna <th>

Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos poner en su lugar las etiquetas <th> y </th>. Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o ttulos de las columnas. Por ejemplo, si escribiramos el siguiente cdigo: <table width="50%" border="1" align="center"> <tr> <th>Sabado</td> <th>Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table> Obtendramos la siguiente tabla:
Sbado Curso HTML Curso Frontpage
Ttulo de tabla <caption>
No solamente es posible establecer ttulos para las columnas, tambin es posible establecer un ttulo para la tabla mediante las etiquetas <caption> y </caption>. Estas etiquetas han de ir despus de la etiqueta <table>, y puede especificarse el valor de los atributos align (con los valores bottom, center, left, right y top) yvalign (con los valores bottom y top). Por ejemplo, si escribiramos el siguiente cdigo: <table width="50%" border="1" align="center"> <caption align="right" valign="top">Titulo de la tabla<tr> <tr> <th>Sabado</td> ... </tr> </table> Obtendramos la siguiente tabla con ttulo:
Titulo de la tabla Sbado Domingo Curso HTML Curso Dreamweaver Curso Frontpage Curso Flash
El ttulo aparece ajustado a la margen derecho de la tabla (align="right") y encima de la tabla (valign="top").
Tablas (IV)
Combinar celdas
Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas. A travs del atributo colspan se especifica el nmero de columnas por las que se extender la celda, y a travs del atributo rowspan se especifica el nmero de filas por las que se extender la celda.
Para que quede ms claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar la siguiente tabla:
DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE PERRO DIFERENCIAS HOMBRE PEQUEO GRANDE Duracin crecimiento 10 meses 18 a 24 meses 16 aos Tiempo de gestacin 58 a 63 das 9 meses Duracin de vida del pelo/cabello 1 ao 2 a 7 aos
Habra que escribir el siguiente cdigo: <table width="575" border="2" cellspacing="2"> <tr align="center" valign="middle"> <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th> </tr> <tr align="center" valign="middle"> <th rowspan="2">DIFERENCIAS</th> <th colspan="2">PERRO</th> <th rowspan="2">HOMBRE</th> </tr> <tr align="center" valign="middle"> <th>PEQUEÑO</th> <th>GRANDE</th> </tr> <tr align="center" valign="middle"> <td>Duración crecimiento</td> <td>10 meses</td> <td>18 a 24 meses</td> <td>16 años</td> </tr> <tr align="center" valign="middle"> <td>Tiempo de gestación</td> <td colspan="2">58 a 63 días</td> <td>9 meses</td> </tr> <tr align="center" valign="middle"> <td>Duración de vida del pelo/cabello</td> <td colspan="2">1 año</td> <td>2 a 7 años</td> </tr> </table> Vamos a explicar un poco cmo funciona dicho cdigo, aunque sera conveniente que primero intentaras entender el cdigo comparndolo con la tabla que de l se obtiene.
En primer lugar, tenemos que ver el nmero mximo de columnas que ha de tener la tabla. En este caso seran cuatro columnas. Para saber el nmero de columnas total de la tabla, tenemos que fijarnos en el nmero total de celdas que podemos obtener por fila al trazar las lneas verticales que separan las columnas entre s. En la primera fila, la lnea <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). Como la tabla tiene como mucho cuatro columnas y el atributo colspan de la celda vale cuatro, no hay que definir ms celdas para esa misma fila. En la segunda fila, la lnea <th rowspan="2">DIFERENCIAS</th> indica que la celda ocupar dos filas de la tabla (la actual y la siguiente). Lo mismo ocurre con la lnea <throwspan="2">HOMBRE</th>. Ya hemos definido dos celdas de la segunda fila. Sabemos que la tabla tiene como mucho cuatro columnas, por lo que como en la lnea <th colspan="2">PERRO</th> el atributo colspan vale dos, ya tenemos las cuatro celdas. En la segunda fila hemos definido dos celdas que se expanden por dos filas, por lo que en la tercera fila habr que definir solamente dos celdas, y no cuatro, ya que dos de sus celdas se corresponden con las definidas en la fila anterior. Las dos nuevas celdas son <th>PEQUEÑO</th> y <th>GRANDE</th>. El uso de los atributos colspan y rowspan puede resultar algo complicado al principio. Es cuestin de prctica.
Marcos
En este tema vamos a ver qu son los marcos, para qu se utilizan, y cmo insertarlos.
Conjunto de marcos <frameset>

Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras que otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la apariencia. Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una pgina con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documentoperros.htm. Para poder visualizar la pgina de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es el que en este caso contiene el grupo de marcos.
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que vemos solamente algunos conteptos bsicos y ejemplos sencillos. Como hemos visto si queremos utilizar marcos debemos crear una pgina con la definicin del conjunto de marcos (en el ejemplo anterior la pgina marcos.htm). Los conjuntos de marcos se definen a travs de las etiquetas <frameset> y </frameset>, que van despus de la etiqueta <head>. A travs de estas etiquetas se indica el nmero de marcos en que se dividir la ventana, cada uno de los cuales ser una especie de subventana. Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las etiquetas <body> y </body>, ya que el cuerpo del documento ser el cuerpo de las pginas que se carguen en cada uno de los marcos del conjunto de marcos.
Los atributos que pueden especificarse sobre la etiqueta <frameset> son los siguientes:
Atributo
cols
rows
Posibles valores un nmero (acompaado de % cuando se desee que tamao de cada una de las columnas en sea en que se divide el documento porcentaje) por cada columna, separados por comas. un nmero (acompaado de % cuando se desee que tamao de cada una de las columnas en sea en que se divide el documento porcentaje) por cada fila, separados por comas. Significado aparece o no el borde de los marcos separacin entre los marcos
frameborder framespacing
yes no
un nmero un nmero, acompaado de % cuando se desee que sea en porcentaje nmero hexadecimal
border
grosor del borde
bordercolor
color del borde
Tambin es posible incluir asteriscos como valores para los atributos cols y rows. Este valor indica que dicha fila o columna ocupar todo lo que quede de ventana o subventana. Cuando existan varias columnas o filas con este valor, se repartirn de forma equitativa lo que quede de ventana. Por ejemplo, si insertramos la siguiente lnea de cdigo:
<frameset rows="*" cols="142,*,25%">...</frameset> Como el atributo rows tiene el valor asterisco, solo habra una fila, que ocupara todo el alto de la ventana. En este caso concreto no hara falta poner el atributo rows. Como el atributo cols tiene tres valores, estaramos dividiendo el documento en tres columnas. La primera columna sera de 142 pxeles de ancho, la tercer del 25% de la ventana, y la segunda columna ocupara lo que quedar de ventana (el 75% de la ventana menos 142 pxeles). Tambin es posible anidar marcos. Es decir, es posible dividir marcos en otros marcos. Por ejemplo, si insertramos el siguiente cdigo: <frameset cols="142,*"> <frameset rows="80,*">...</frameset> <frameset cols="25%,*,*">...</frameset> </frameset> Estaramos dividiendo el documento en dos columnas. La primera sera de 142 pxeles, y la otra abarcara el resto de la ventana. Al mismo tiempo, la primera columna o subventana estara dividida en dos filas o subventanas horizontales, la primera de ellas de 80 pxeles. La segunda columna o subventana de la ventana principal se dividira a su vez en tres columnas, la primera de ellas del 25% de la subventana, y las otras dos se repartiran el resto a partes iguales (se repartiran el 75% de la subventana). Por ltimo debemos saber que entre las etiquetas <frameset> y </frameset> slo se pueden encontrar la etiquetas <head> <noframe> <frameset> <frame> y sus correspondientes etiquetas de cierre.
Marcos (II)
Marco <frame>
Ya hemos visto cmo dividir un documento en varias subventanas o marcos, pero no hemos visto cmo hacer que se carguen las distintas pginas en cada uno de los marcos. Para indicar qu documento se cargar en cada uno de los marcos habr que insertar la etiqueta <frame> por cada uno de los marcos de la ventana. Estas etiquetas estarn entre las etiquetas <frameset> y </frameset>, y no necesitan etiqueta de cierre. Es posible modificar los siguientes atributos de un marco:
Atributo
Significado
Posibles valores
frameborder aparece o no el borde del marco name noresize

nombre del marco
yes o 1 no o 0
cualquier valor
si aparece, el usuario no podr redimensionar el tamao de este no puede tomar valores marco un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero, acompaado de % cuando se desee que sea en porcentaje
marginwidth
anchura del margen con respecto a los bordes del marco
marginheight
altura del margen con respecto a los bordes del marco
scrolling
se mostrar o no la barra de desplazamiento cuando la pgina del marco no se pueda visualizar completamente en l documento que se cargar en el marco
yes no auto
ruta y nombre del documento
src
Por ejemplo, para crear el conjunto de marcos como el de esta pgina, tendramos que escribir: <frameset cols="150,*" frameborder="yes" framespacing="3" border="3" bordercolor="#FF9 900"> <frame src="izquierdo.htm" name="marcoizquierdo" frameborder="no" scrolling="no" nor esize> <frame src="derecho.htm" name="marcoderecho" frameborder="no" scrolling="auto"> </frameset> Y para crear el conjunto de marcos de esta pgina, tendramos que escribir:
<frameset rows="90,*" framespacing="3" frameborder="yes" border="3" bordercolor="#FF9 900"> <frame src="superior.htm" name="marcosuperior" frameborder="yes" scrolling="NO" nore size> <frameset cols="150,*" framespacing="3" frameborder="yes" border="3" bordercolor="#FF 9900"> <frame src="izquierdo.htm" name="marcoizquierdo" scrolling="NO" noresize> <frame src="derecho.htm" name="marcoderecho"> </frameset> </frameset> Esta ltima pgina est dividida en dos marcos horizontales (rows="90,*"), estando el inferior de ellos dividido en dos marcos verticales (cols="150,*").
Sin marcos <noframes>

Siempre que creamos una pgina queremos que pueda ser visitada por el mayor nmero de usuarios, por lo que el hecho de que hayan usuarios cuyos navegadores no soportan los marcos puede resultar un problema. Las etiquetas <noframes> y </noframes> se utilizan para que su contenido sea visualizado en aquellos navegadores que no soportan los marcos. Si un navegador no soporta los marcos, no cargar ningn documento en ningn marco, por lo que tendremos que mostrar el cuerpo del documento actual de algn modo. Por ello, han de introducirse las etiquetas <body> y </body> entre las etiquetas <noframes> y </noframes>. Por ejemplo, si escribiramos el siguiente cdigo: <html> <head> ... </head> <frameset cols="150,*"> <frame src="izquierdo.htm" name="marcoizquierdo"> <frame src="derecho.htm" name="marcoderecho"> </frameset> <noframes> <body> Este documento tiene marcos y tu navegador no los soporta. </body> </noframes> </html> Obtendramos una pgina con dos marcos, que en el caso de intentar ser visualizada en un navegador que no soportase marcos, mostrara una pgina con el texto Este documento tiene marcos y tu navegador no los soporta.
Una buena solucin para que el mayor nmero de usuarios pueda visitar nuestra pgina, es crear nuevas pginas con el contenido de los documentos que deberan mostrarse en los marcos, pero que permitan pasar de unos a otros dentro de la misma ventana. De este modo, en el caso de que el navegador no soporte los marcos, podemos incluir un enlace a una de estas pginas. Por ejemplo, si escribiramos el siguiente cdigo: ... <noframes> <body> Este documento tiene marcos y tu navegador no los soporta. <a href="sinmarcos.htm">Pulsa aqui para visualizar la pgina sin marcos.</a> </body> </noframes> </html> Cuando la pgina intentara ser visualizada en un navegador que no soportase los marcos, aparecera el enlace Pulsa aqui para visualizar la pgina sin marcos. a una ventana sin marcos.
Marcos (III)
Destino del enlace

Como recordars, en el tema de hipervnculos vimos los posibles destinos de los enlaces. Estos destinos podan ser _blank, _parent, _self, y _top. Vamos a recordar para qu serva cada uno de ellos, ya que ahora que sabes trabajar con marcos te sern ms fciles de entender.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecern al abrir el vnculo en ella.
Adems de estos destinos para los enlaces, tambin podrs utilizar los nombres de los distintos marcos de la pgina. Por ejemplo, si tuvieramos un marco con el nombremarcoderecho, podramos insertar el enlace: <a href="http://www.Bryhan.com" target="marcoderecho">Aulaclic en el marco derecho</a> Este enlace cargara la pgina de aulaclic en el marco llamado marcoderecho. Podemos aadir todos estos nuevos destinos a cualquier elemento de la pgina que contenga algn enlace, ya sea texto, una imgen, un mapa de imagen, un elemento Flash, etc. Gracias a todo esto podremos hacer que las barras de navegacin y el resto de enlaces funcionen a nuestro antojo, cargando unas u otras pginas en alguno de los marcos, en una ventana nueva, en toda la ventana, etc. Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados finales.
Formularios
En este tema vamos a ver qu son los formularios, para qu se utilizan, y qu elementos pueden contener.
Formulario <form>
Un formulario es un elemento que permite recoger datos introducidos por el usuario. Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a travs de la red, tienen multitud de aplicaciones. Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones. Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribucin de los elementos del formulario, lo que facilita su comprensin y mejora su apariencia.
Los formularios se insertan a travs de las etiquetas <form> y </form>. Entre dichas etiquetas habr que insertar los diferentes objetos que formarn el formulario. la etiqueta <form> tiene los siguientes atributos: El atributo action indica una direccin de correo electrnico a la que mandar el formulario, o la direccin del programa que se encargar de procesar el contenido del formulario. El atributo enctype indica el modo en que ser cifrada la informacin para su envo. Por defecto tiene el valor application/x-www-form-urlencoded.
El atributo method indica el metodo mediante el que se transferirn las variables del formulario. Su valor puede ser get o post. El valor get se utiliza cuando no se van a producir cambios en ningn documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos. El valor post se utiliza cuando s se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos. Se recomienda utilizar el valor post. Por ejemplo, podramos insertar un formulario escribiendo el siguiente cdigo: <form action="mailto:formularios@bryhan.com" method="post" enctype="text/plain" > ... </form> A continuacin veamos los distintos elementos que se pueden incluir en un formulario.
reas de texto <textarea>

Las reas de texto permiten a los usuarios insertar varias lneas de texto. Por ello, suelen utilizarse para que incluyan comentarios. Para insertar un rea de texto es necesario incluir las etiquetas <textarea> y </textarea> entre las etiquetas <form> y </form> del formulario. Para que el rea de texto tenga algn valor inicial, habr que insertarlo entre las etiquetas <textarea> y </textarea>. El atributo name indica el nombre del rea de texto. Es necesario dar nombres diferentes a cada uno de los elementos de un formulario, para poder identificarlos a la hora de procesarlos. El atributo rows indica el nmero de lneas que podrn ser visualizadas en el rea de texto por lo que determina al alto del rea de texto. El atributo cols indica el nmero de caracteres por lnea que podrn ser visualizados en el rea de texto por lo que determina al ancho del rea de texto. Gracias a las barras de desplazamiento, es posible insertar ms lneas de las especificadas en el atributo rows, y ms caracteres por lnea de los especificados en el atributocols. Por ejemplo, para insertar el rea de texto:
Escribe el texto que quuieras
Habra que escribir: <textarea name="ejemploarea" cols="30" rows="3">Escribe el texto que quieras</textarea>
Formularios (II)
Elementos de entrada <input>

Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas <form> y </form> del formulario. El atributo name indica el nombre que se desea dar al elemento de entrada, mediante el cual ser evaluado, y el atributo type indica el tipo de elemento de entrada. Vamos a ver los diferentes tipos de elementos de entrada, y el resto de atributos que pueden definirse para cada uno de ellos. Campo de texto: Para insertar un campo de texto, el atributo type debe tener el valor text. El atributo size indica el nmero de caracteres que podrn ser visualizados en el campo de texto, determina el ancho de la caja. El atributo maxlenght indica el nmero de caracteres que podrn ser insertados en el campo de texto. El atributo value indica el valor inicial del campo de texto. Por ejemplo, para insertar el campo de texto:
Campo de texto
Habra que escribir: <input name="campo" type="text" value="Campo de texto" size="20" maxlength="15">
Campo de contrasea: Para insertar un campo de contrasea, el atributo type debe tener el valor password. El resto de atributos son los mismos que para un campo de texto normal. La nica diferencia es que todas las letras escritas en el campo de contrasea sern visualizadas como asteriscos.
Por ejemplo, para insertar el campo de contrasea:

**********
Habra que escribir: <input name="contra" type="password" value="contrasea" size="20" maxlength="15"> Botn: Para insertar un botn, el atributo type debe tener el valor submit, restore o button. Si el valor es submit, al pulsar sobre el botn se enviar el formulario. Si el valor es restore, al pulsar sobre el botn se restablecer el formulario, borrndose todos los campos del formulario que hayan sido modificados y adquiriendo su valor inicial. Si el valor es button, al pulsar sobre el botn no se realizar ninguna accin. El atributo value indica el texto que mostrar el botn. Por ejemplo, para insertar el botn:
Habra que escribir: <input name="boton" type="submit" value="Enviar">
Casilla de verificacin: Para insertar una casilla de verificacin, el atributo type debe tener el valor checkbox. El atributo value indica el valor asociado a la casilla de verificacin. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar. La aparicin del atributo checked indica que la casilla aparecer activada inicialmente. Este atributo no toma valores. Por ejemplo, para insertar la casilla:
Habra que escribir: <input name="casilla" type="checkbox" value="acepto" checked>
Botn de opcin:
Para insertar un botn de opcin, el atributo type debe tener el valor radio. El atributo value indica el valor asociado al botn de opcin. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar. La aparicin del atributo checked indica que el botn aparecer activado inicialmente. Este atributo no toma valores. Los botones de opcin se utilizan cuando se desea que una variable del formulario pueda tomar un solo valor de entre varios posibles. Para ello, se insertan varios botones de opcin con el mismo nombre (que indica la variable) y con distintos valores. Slamente uno de estos botones podr estar activado, el que est activado cuando se envia el formulario, su valor ser el que tendr la variable. Por ejemplo, para insertar los botones de opcin:
Habra que escribir: <input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar"> Cuando se enve el formulario, si el primer botn est activado la variable prefiere ser igual a estudiar, si es el segundo el activado, la variable prefiere valdr trabajar. Observa que lo que ponemos como valor no aparece escrito en la pgina es un datos interno.
<input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar"> Cuando se enve el formulario, si el primer botn est activado la variable prefiere ser igual a estudiar, si es el segundo el activado, la variable prefiere valdr trabajar. Observa que lo que ponemos como valor no aparece escrito en la pgina es un datos interno. Existen otros tipos como el tipo hidden que sirve para definir un campo oculto, campo que no ve el usuario, en este caso habra que incluir el atributo value para que el formulario pase ese valor al programa que recoge los datos del formulario. Para que el usuario envie un fichero suyo a travs del formulario tenemos el tipo file, este tipo hay que utilizarlo con mucho cuidado ya que si permitimos que cualquier internauta nos envie cualquier tipo de fichero nos podramos encontrar con sorpresas no siempre agradables.
Formularios (III)
Campos de seleccin <select>...

Los campos de seleccin se utilizan para insertar mens y listas desplegables. Para insertar uno de estos mens o etiquetas <select> y </select> en un formulario. listas es necesario insertar las
El atributo name indica el nombre del men o lista ser el nombre de la variable que contendr el valor seleccionado. El atributo size indica el nmero de elementos de la lista que pueden ser visualizados al mismo tiempo, determina el alto de la lista. La aparicin del atributo multiple indica que el usuario podr seleccionar varios elementos de la lista al mismo tiempo, ayudndose de la tecla Ctrl. Este atributo no toma valores. La aparicin del atributo disabled indica que la lista estar desactivada, por lo que el usuario no podr seleccionar sus elementos. Este atributo tampoco toma valores. Cada uno de los elementos etiquetas <option> y </option>. de la lista ha de insertarse entre las
El atributo value indica el valor a enviar si se selecciona el elemento. Si no se especifica este atributo, se enviar el texto de la opcin, que se encuentra entre las etiquetas<option> y </option>. La aparicin del atributo selected indica que el elemento aparecer seleccionado. Este atributo no toma valores. Por ejemplo, para insertar el men:
Habra que escribir: <select name="mascota"> <option selected>--- Elige animal ---</option> <option>Perro</option> <option>Gato</option> </select>
Y para insertar la lista:
Habra que escribir: <select name="animal" size="3" multiple> <option selected>---Elige animales---</option> <option value="ave">Loro</option> <option>Perro</option> <option>Gato</option> <option>Pez</option> </select>
Multimedia
En este tema vamos a ver cmo insertar elementos multimedia.
Sonido de fondo <bgsound>

Aadir una msica de fondo a una pgina tiene pros y contras, si el sonido es apropiado al contenido de la pgina, puede hacerla ms atractiva en contrapartida la descarga del archivo de sonido supone una carga que puede ralentizar la visualizacin de la pgina y adems muchos usuarios suelen estar escuchando otro tipo de msica cuando navega en Internet, por lo que el escuchar tambin sonido en cada pgina que visita puede resultar algo molesto. Los formatos de sonido ms habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir algn archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad. El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre. A travs del atributo src hay que especificar la ruta y el nombre del archivo de audio. Con el atributo loop indicamos el nmero de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habr que asignarle el valor infinite o -1. Por ejemplo, podramos insertar un sonido de fondo escribiendo el siguiente cdigo: <bgsound src="varios/audio.mid" loop="-1"> La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible que la situemos siempre en un sitio fcil de encontrar, por si deseamos hacerle alguna modificacin. Podramos, por ejemplo, incluirla justo debajo de la etiqueta <body>.
Vdeo y audio <embed>

En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta que los vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse. Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
La etiqueta <embed> es la que se utiliza para insertar archivos de vdeo. Puede incluirse la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas<embed> y </embed> no hay que insertar nada. A travs del atributo src hay que especificar la ruta y el nombre del archivo de vdeo. Los videos insertados a travs de esta etiqueta se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Esto puede cambiarse a travs de los atributos autostart y loop. El atributo autostart indica si el archivo se reproducir automticamente al cargarse la pgina, y puede tomar los valores true o false. El atributo loop indica si el archivo se reproducir continuamente en un bucle, y tambin puede tomar los valores true o false. Los atributos width (anchura) y height (altura) sirven para especificar el tamao de la consola de control de vdeo. Estos atributos pueden tomar como valor un nmero, que indica el tamao en pxeles. Si no se especifican estos atributos, la consola de control de vdeo se mostrar con el tamao ms adecuado al tamao del vdeo. A la derecha tienes un ejemplo de un archivo de video, para el que se muestran los controles de video. Puedes reproducirlo pulsando sobre los controles.
Para insertar el vdeo anterior, se podra escribir: <embed src="varios/cotorra.avi" autostart="false" loop="true">
Existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que no es posible utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta <embed>, que funciona del mismo modo para los archivos de audio y de vdeo. No hay que olvidar que para los archivos de audio tambin se mostrarn los controles de reproduccin. A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles.
Para insertar el archivo de audio anterior, se podra escribir: <embed src="varios/audio.mid" autostart="false" loop="true"> Si no se desea que se muestren los controles de un archivo de audio, porque va a ser utilizado como sonido de fondo, puede hacerse que los atributos width (anchura) yheight (altura) valgan cero. Tambin puede utilizarse el atributo hidden, con los valores true o false. Cuando su valor estrue, se ocultan los controles de reproduccin. Por ejemplo, para insertar sonido de fondo se podra escribir: <embed src="varios/audio.mid" autostart="true" loop="true" hidden="true" > O tambin: <embed src="varios/audio.mid" autostart="true" loop="true" width="0" height="0" >
Multimedia (II)
Pelculas Flash <object>...

Las pelculas Flash son animaciones con la extensin SWF. Suelen incluirse en las pginas iniciales de los sitios web, y se utilizan a modo de presentacin hacia los usuarios. Tambin pueden utilizarse como botones de las barras de navegacin.
Estas pelculas pueden crearse mediante el programa Flash de Macromedia, y necesitan que el usuario tenga instalado el plug-in para poder ser visualizadas. La etiqueta <object> puede utilizarse para insertar diferentes objetos dentro de la pgina, como pueden ser archivos de audio, archivos de vdeo, imgenes, etc. El objetivo del uso de la etiqueta <object> es la de que no se produzcan incompatibilidades por las distintas etiquetas soportadas por unos u otros navegadores. Las animaciones Flash se insertan del mismo modo que los archivos de audio y de vdeo, a travs de la etiqueta <embed>, pero debido a que tiene ms posibilidades de que se produzcan incompatibilidades entre los distintos navegadores, necesita tambin de la etiqueta <object>.
Como el uso de la etiqueta <object> puede resultar bastante complicado, vamos a ver solamente un caso concreto para la insercin de un archivo SWF. Por ejemplo, vamos a analizar el cdigo que habra que escribir para insertar la animacin Flash de la derecha.
El cdigo a escribir sera el siguiente: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/s wflash.cab#version=6,0,29,0" width="200" height="100"> <param name="movie" value="graficos/pelicula.swf"> <param name="quality" value="high"> <embed src="graficos/pelicula.swf" width="200" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed> </object> En primer lugar vamos a analizar la etiqueta <embed>. En ella aparecen tres atributos que no conocamos. A travs del atributo quality se especifica la calidad con la que se reproducir la animacin Flash. Puede valer high (alta), autolow (baja automtica), o low (baja). Si no se incluye este atributo, se considera que la calidad ser automticamente alta.
A travs del atributo pluginspage se especifica la pgina desde la que se podr descargar el plug-in necesario para reproducir la animacin Flash, para que si algn usuario no lo tiene an instalado en su ordenador pueda descargarlo. A travs del atributo type se especifica el tipo de fichero, para que el navegador pueda saber qu tipo de programa necesita ejecutar para reproducir la animacin. Ahora vamos a analizar la etiqueta <object>. A travs del atributo classid se identifica al objeto. Cuando el objeto es una animacin Flash, el atributo classid debe valer clsid:D27CDB6E-AE6D-11cf-96B8-444553540000. A travs del atributo codebase se especifica la direccin en la que se encuentran los componentes externos necesarios para reproducir la animacin. Los atributos width y height se utilizan del mismo modo, y deben tener el mismo valor, que en la etiqueta <embed>. Por ltimo, vamos a analizar la etiqueta <param>. Esta etiqueta se utiliza para especificar los valores necesarios para la inicializacin de un objeto. La etiqueta <param> no necesita etiqueta de cierre, y ha de contener los atributos name y value. El atributo name indica el nombre de la caracterstica que va a ser definida, y value indica su valor. Por ejemplo, para indicar la ruta del archivo, que en la etiqueta <embed> aparece especificado por el atributo src, es necesario incluir tambin una etiqueta <param>, en la que name tenga el valor movie. Por eso aparece la lnea <param name="movie" value="graficos/pelicula.swf">. Para indicar la calidad de reproduccin, que en la etiqueta <embed> aparece especificado por el atributo quality, es necesario incluir tambin una etiqueta <param>, en la que name tenga el valor quality. Por eso aparece la lnea <param name="quality" value="high">. Las animaciones Flash se reproducen de forma automtica al cargarse la pgina, y su reproduccin es continua. Para hacer que una animacin no se reproduzca automticamente, habr que indicarlo mediante el atributo play, que debe incluirse dentro de la etiqueta <embed>. El atributo play puede valer true o false. Para que la animacin no se reproduzca automticamente, el valor de play debe ser false. Tambin habr que insertar la lnea <param name="play" value="false">. Lo mismo ocurre para hacer que la reproduccin no sea continua. Habr que insertar el atributo loop en la etiqueta <embed>.
El atributo loop puede valer true o false. Para que la animacin no se reproduzca continuamente, el valor de loop debe ser false. De este modo, solo se reproducir una vez. Tambin habr que insertar la lnea <param name="loop" value="false">.

Copia de Monografía HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Copia de Monografía HTML

Transféré par

Droits d'auteur :

Formats disponibles

Colegio Particular Latino

Manual general de HTML

Santo Domingo de los Colorados 2010 2011

Colegio Particular Latino

Manual general de HTML

El Web tena que ser distribuido: La informacin repartida en pginas no muy

Primeros pasos con HTML

Estructura de una Pgina

Identificador del tipo de documento <html>

Cabecera de la pgina <head>

Ttulo de la pgina <title>

Cuerpo del documento <body>

... <body text="#FF0000"> ... </body> </html>

Caracteres especiales y espacios en blanco

&uacute; &Uacute; &ntilde; &Ntilde; &#153;

&ordm; &ordf; &not; &copy; &reg;

Saltos de lnea <br>

Texto preformateado <pre>

y esto un texto preformateado Habra que escribir:

Significado alineacin de la regla dentro de la pgina ancho de la regla

align width size

left (izquierda) right (derecha) center (centro)

alto de la regla eliminar el sombreado de la noshade regla

Por ejemplo, para insertar el texto y la regla horizontal siguientes: Inicio

Sangrado de texto <blockquote>

Formatear el texto <font>...

face color size

Por ejemplo, para insertar el texto:

Resaltado del texto <b>...

curso HTML aulaclic

A continuacin se muestran algunas etiquetas asociadas al tipo de informacin:

Ejemplo curso HTML aulaclic

Encabezados <h1> ...

<H1> <H2> <H3> <H4> <H5> <H6>

Por ejemplo, para insertar el texto:

Habra que escribir: <H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4>

Visita www. Bryhan.com

Enlace a Tema 4: Hiperenlaces

Enlace a Tema 4: Hiperenlaces

<a href="tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Punto de fijacion Tipos de enlaces

Visita www.Bryhan.com en una ventana nueva

Formato de los enlaces

Puntos de fijacin. Anclas

Texto con ancla

Otros tipos de enlaces

e-mail para Bryhan

haz clic aqu para descargarte el fichero

Borde de una imagen

Tamao de una imagen

Alineacin de una imagen

absbottom inferior absoluta

Imagen con texto

baseline bottom left

Imagen con texto

Imagen con texto Imagen con texto

Una web de animales

imagen y texto Texto dentro de una celda

Columna o celda <td>

Sabado Curso HTML

Domingo Curso Dreamweaver

Curso Frontpage Curso Flash

<td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table>

Significado ancho de la tabla

ú Ú ñ Ñ

º ª ¬ © ®