Título Título - WordPress.com
Anuncio
CURSO DE HTML ¿Qué es HTML? El HTML (Hyper Text Markup Language o Lenguaje de Marcas de Hipertexto) es el lenguaje con el que se escriben las páginas web. Por hipertexto se entiende texto estructurado y que no es secuencial, de modo que un determinado elemento de una página, ya sea palabra o imagen, sirve de enlace a otra página. El diseño de las páginas así enlazadas. Se denomina de marcas porque se utilizan marcas o etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Estos documentos HTML son archivos con extensión html o htm, que se pueden visualizar con los navegadores. Los navegadores son programas se encargan de interpretar el código HTML de los documentos, y de mostrar las páginas web. Etiquetas Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. La etiqueta de comienzo se escribe: <nombre_etiqueta atributo1 atributo2 …>. Los atributos siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos. La etiqueta de final se escribe: </nombre_etliqueta> y no contiene atributos. Las etiquetas pueden escribirse en mayúsculas o minúsculas indistintamente. Notas: Algunos elementos no necesitan etiqueta de cierre. Es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre. En este caso ¡cuidado!: <etiqueta1> ……. <etiqueta2>….. </etiqueta1> …. Esto es incorrecto </etiqueta2> <etiqueta1> ……. Esto es correcto <etiqueta2>….. </etiqueta2> …. </etiqueta1> Estructura de una página A lo largo de este tema vamos a aprender a crear una página básica. La estructura básica de una página es: <html> <head> Zona de cabecera del documento </head> <body> Zona del cuerpo del documento </body> </html> Tipo de documento <html> Todas las páginas web escritas en HTML tienen que empezar con la etiqueta <html> y terminar con la etiqueta </html>. Con estas etiquetas se identifica el tipo de archivo Cabecera del documento <head> En esta zona se agrupa la información sobre la página web , como puede ser el título, el autor, etc. Esta zona podemos poner otras etiquetas: <title> El título de la página es el texto que aparecerá en la parte superior de la ventana del navegador, cuando la página sea cargada. <meta> La etiqueta <meta> se utiliza para añadir información sobre la página que pueda ser utilizada por los buscadores y navegadores. En el caso de buscadores, estos consultan la información de la etiqueta <meta> de las páginas. De este modo los buscadores clasifican las páginas de forma automática y pueden mostrar al usuario las páginas que busca a través de las palabras clave contenidas en esta etiqueta. Así cuando buscamos “carpintería” los buscadores muestran las páginas que contienen la palabra clave carpintería en su etiqueta <meta>. Los atributos de esta etiqueta deben especificarse mediante: Nombre del atributo (name) Valor del atributo (content) Los tipos de información más utilizados son los siguientes: author Autor de la página classification. Palabras para clasificar la página en los buscadores keywords. Palabras clave description. Descripción del contenido de la página Ejemplo: <html> <head> ... <meta name="author" content="José Pérez"> <meta name="description" content="Monasterio de El Escorial"> <meta name="keywords" content="Monasterio Escorial Felipe II "> </head> <body> ... </body> </html> Como se puede ver no es necesario poner la etiqueta de cierre y se necesita una etiqueta por cada valor. Los valores de name y content se escriben entre comillas. En el caso de navegadores la etiqueta <meta> se utiliza para indicarles alguna información o alguna acción que deben realizar. Este es el caso del atributo http-equiv. La acción más típica es Refresh (actualizar). Un caso típico de uso de Refresh es actualizar una página cada t segundos así si queremos actualizarla cada 15 segundos escribiríamos: <meta http-equiv="Refresh" content="15"> Otro caso típico es que la dirección de nuestra página haya cambiado y queramos que cuando sea visitada la página en la dirección antigua, a los 5 segundos el navegador redirija la petición a la dirección nueva de forma automática: <meta http-equiv="Refresh" content="5; URL=http://www.miweb.com/index.htm"> Obsérvese el punto y coma delante de URL. Cuerpo del documento <body> El cuerpo del documento contiene la información propia del documento, es decir lo que queremos que se visualice, el texto de la página, las imágenes, los formularios, etc. Atributos Color de fondo de la página (bgcolor): Es posible asignar un color de fondo representado en hexadecimal o por un nombre predefinido. Así para establecer el fondo de color rojo podemos escribir <body bgcolor="#FF0000"> O bien <body bgcolor="red"> Las comillas no son necesarias, pero hacen el código más legible. Para ver los códigos de los distintos colores ver ANEXO-COLORES al final del documento. Imagen de fondo (background): Para establecer una imagen de fondo se debe indicar el archivo que contiene la imagen. Si éste se encuentra en la misma carpeta que el fichero html basta con poner su nombre, si está en otra carpeta se debe escribir la ruta. Supongamos que el archivo html se encuentra en la carpeta miweb y la imagen se encuentra en el archivo foto.jpg que a su vez se encuentra en la carpeta miweb, escribimos entonces: <body background="foto.jpg"> Supongamos ahora que el archivo html se encuentra en la carpeta miweb y la imagen se encuentra en el archivo foto.jpg que a su vez se encuentra en la carpeta miweb\imagenes, escribimos entonces: <body background=”imágenes/foto.jpg” Color del texto (text): Establece el color de la letra del texto que contendrá el cuerpo del documento. Para escribir el texto en azul escribimos: <body text=”#0000FF> O bien <body text=”blue”> Márgenes: Se entiende por margen la distancia entre el contenido de la página y el borde de la ventana. Existen cuatro atributos: o leftmargin (izquierdo) o topmargin (superior) Por ejemplo para determinar un margen izquierdo de 20 y uno superior de 30 escribiremos: <body leftmargin=”20” topmargin=”30”> Caracteres especiales Al escribir texto en el cuerpo del documento no existen restricciones, sin embargo existen caracteres que no se visualizan correctamente en algunos navegadores, como es el caso de la ñ y las letras acentuadas o los caracteres < y > que forman parte de las etiquetas, si colocáramos el carácter < en un texto el intérprete del navegador entendería que empieza una etiqueta y no se visualizaría bien el contenido de la página. A continuación se muestra una lista con algunos caracteres y como se representan: Carácter Representación < &lt; > &gt; á &aacute; Á &Aacute; é &eacute; É &Eacute; Carácter Representación ñ &ntilde; Ñ &Ntilde; ó &oacute; Ó &Oacute; ú &uacute; Ú &Uacute; Carácter Representación ñ &ntilde; Ñ &Ntilde; ¿ &iquest; ¡ &iexcl; í &iacute; Í &Iacute; Nota: Si insertamos varios espacios en blanco seguidos sólo se mostrará uno en el navegador. Para conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos por &nbsp;. Ejemplo: Para escribir: José María Pérez Escultor Escribiremos: Jos&eacute; Mar&iacute;a P&eacute;rez &nbsp;&nbsp;&nbsp&nbsp;Escultor Comentarios En ocasiones desearemos añadir al código comentarios que indiquen alguna información de los distintos elementos del archivo, de manera que no sean visualizados en el navegador, pero sí a la hora de editar el documento. Lo que nos permite, queremos revisar el documento al cabo del tiempo, saber por qué pusimos tal texto o elemento. Para insertar comentarios dentro del código, basta con insertar el texto entre l<!-- y //-->. Ejemplo: <! – Este texto debo revisarlo en el 2007 //--> Durante este año 2006 hemos recogido gran cantidad de ……. Saltos de línea <br> La etiqueta <br> introduce un salto de línea en la posición del documento donde se haya insertado. No existe la etiqueta de cierre. Texto preformateado <pre> Con la etiqueta se inserta el texto tal cual lo escribimos, con los espacios en blanco que hayamos introducido con la barra espaciadora, sin tener que escribir &nbsp; y los saltos de línea que hayamos introducido con la tecla intro sin tener que escribir <br>. Por contra no se puede modificar el tipo de letra y no se pueden incluir las etiquetas <img>, <object>, <big>, <small>, <sub> ni <sup>. Separadores <hr> Introduce una línea horizontal y se suele utilizar para separar secciones de la página. No tiene etiqueta de cierre. Atributos: align: Alineación dentro de la página. Puede tomar los valores: left, right, center. width: Ancho. Puede tomar valores absolutos, por ejemplo 100, o tomar valores en porcentaje del tamaño de la página, por ejemplo 20%. size: Grosor. noshade: Sin sombreado. Ejemplo: <hr align="center" width=100 size=10 noshade> Nota: Si escribimos el valor de size entre comillas “10” no funciona. Sangrado de texto <blockquote> La etiqueta <blockquote> produce un salto de línea. Se pueden anidar para producir distintos niveles de sangrado. Ejemplo: El código: Produce: Cabeza <blockquote> Ojos <br> Nariz <br> Boca <br> <blockquote> Dientes <br> Lengua <br> </blockquote> </blockquote> Tronco <br> Extremidades Cabeza Ojos Nariz Boca Dientes Lengua Tronco Extremidades Formatear el texto <font> Establece las propiedades del texto Atributos: face. Nombre de la fuente color. En hexadecimal o nombre predefinido. size. Toma valores del 1 al 7. El valor por defecto es 3. Se puede variar el tamaño respecto al valor por defecto poniendo delante del número + o -. Ejemplo: <font color=blue size=6 face="times new roman” > Texto formateado de color azul, tamaño 6 y fuente Times New Roman </font> Para definir las características de la fuente para todo el documento se inserta inmediatamente detrás de la etiqueta <body> la etiqueta <basefont>. Tiene los mismos atributos que <font> y no tiene etiqueta de cierre. La etiqueta <basefont> no afecta al texto que se introduzca entre las etiquetas <font> y </font> del documento. Otras etiquetas de formato de texto <b> negrita <i> cursiva <u> subrayado <big> aumenta el tamaño de la fuente. Añadiendo varias se va agrandando progresivamente el tamaño de la fuente. <small> disminuye el tamaño de la fuente. Añadiendo varias va disminuyendo progresivamente el tamaño de la fuente. <sub> subínice <sup> superíndice Párrafos <p> Esta etiqueta se utiliza para dividir el texto en párrafos de modo que se puede cambiar la alineación de cada párrafo. Para delimitar un párrafo se utilizan las etiquetas <p> y </p>. Ambas etiquetas insertan un salto de línea. Para cambiar la alineación se utiliza el atributo align que toma los valores: left, right, center y justify. Ejemplo: <p align=right> Este es un ejemplo de párrafo </p> <div> Esta etiqueta es análoga a <p>. La diferencia estriba en que <p> separa más los párrafos. Tiene también el atributo align. <center> Para centrar texto. Etiquetas para títulos <hN> Existen una serie de etiquetas que suelen utilizarse para establecer títulos dentro de una página. La diferencia entre las distintas etiquetas es el tamaño de la letra, el tipo de resaltado, y la separación existente entre el texto y los elementos que tiene encima y debajo de él. Nota: Cada navegador aplica su estilo del encabezado por lo que el mismo título se puede visualizar de forma diferente según el navegador. Los distintos tamaños se muestran en la siguiente tabla: <h1> <h2> <h3> <h4> <h5> <h6> Título Título Título Título Título Título Esta etiqueta admite el atributo align. Marquesinas <marquee> Las marquesinas son elementos que se desplazan de un lado a otro de la ventana. Por defecto se desplaza de derecha a izquierda indefinidamente. Pueden contener texto, imágenes, etc. Atributos: direction. Establece la dirección en la que se moverá el texto. Puede tomar los valores: o up (hacia arriba) o down (hacia abajo) o left (hacia la izquierda) o right (hacia la derecha). behavior. Establece el tipo de movimiento. Puede tomar los valores o slide (una sola vez) o scroll (continuo) o alternate (“rebota” en los extremos) bgcolor. Color de fondo. Ejemplo: <marquee bgcolor=cyan direction=left behavior=alternate > <b><font color=red size=7>MARQUESINA </font></b> </marquee> Las listas Las listas pueden ser desordenadas (viñetas) u ordenadas (numeradas), cada tipo utiliza una etiqueta distinta. Sin embargo cada elemento de la lista, ya sea ordenada o desordenada debe escribirse entre las etiquetas <li> y </li> Listas desordenadas <ul> Para crear una lista desordenada debe colocarse al comienzo de la misma la etiqueta <ul> y al final la etiqueta </ul>. La etiqueta tiene un atributo type que puede tomar los valores: disc, circle y square. Por defecto el valor es disc y no hay que escribirlo. Ejemplo: El código: Da lugar a: <ul> <li> Uno </li> Uno <li> Dos </li> Dos <li> Tres </li> Tres </ul> Listas ordenadadas <ol> Su sintaxis es análoga a la de las listas desordenadas. Tiene un atributo type que permite establecer el tipo de numeración. En la siguiente tabla se muestran los distintos valores de type y la numeración mostrada. Valor de type 1 i I a A Numeración Números Números romanos en minúsculas Números romanos en mayúsculas Letras minúsculas Letras mayúsculas Por defecto el valor de type es 1 (y no hay que escribirlo). Ejemplo: El código: Da lugar a: <ol type=”a”> <li> Uno </li> a. Uno <li> Dos </li> b. Dos <li> Tres </li> c. Tres </ol> Es posible anidar listas dentro de otras. Pueden insertarse listas ordenadas en desordenadas y viceversa, como puede verse en el siguiente ejemplo. Ejemplo: El código: Da lugar a: <ol type=”a”> <li> Uno a. Uno <ul> <li> Uno.uno </li> <li> Uno.dos </li> </ul> </li> <li> Dos </li> <li> Tres </li> </ol> b. Dos c. Tres Uno.uno Uno.dos Hiperenlace <a> Un hiperenlace o hipervínculo es un enlace a una página o archivo. Para insertar un enlace, los elementos sobre los que se desee insertar deben estar entre las <a> y </a>. Su atributo es href su valor es la dirección de la página a la que está asociado el enlace. Ejemplo: Si escribimos: <a href=http://www.google.es> Aquí puedes buscar lo que necesites <a> En la página aparecerá: Aquí puedes buscar lo que necesites Al poner el cursor sobre el hipervínculo cambiará de forma (mano) y al hacer clic sobre él nos mostrará la página de Google. Tipos de referencias Para trabajar de una forma más 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 imágenes, o una carpeta destinada a almacenar archivos de audio, etc. Referencia absoluta. El archivo al que apunta el enlace está en un sitio web distinto. Ver ejemplo anterior. Referencia relativa al sitio. El archivo al que apunta el enlace está en el mismo sitio web. En este caso se pueden presentar varias opciones. Imaginemos las siguientes situaciones: CASO1 CASO2 CASO 1: <A HREF=”fotos.html”> Página de fotos </A> CASO 2: <A HREF=”imagenes/fotos.html”> Página de fotos </A> CASO 3: <A HREF=”/imagenes/fotos.html”> Página de fotos </A> CASO 3 Referencia a un punto dentro de un documento. Hay veces que el documento html es muy extenso, por lo que se utilizan índices o enlaces para ir a distintas partes del documento. En este caso hay que marcar el punto final del enlace y escribir: <A HREF=”nombreDelArchivo#marcaDelPunto "> Para marcar el punto de la página donde se dirigirá el enlace se escribe: <A NAME=”nombreDelPunto”> donde nombreDelPunto es una palabra cualquiera (aconsejable que sea descriptiva del enlace). Ejemplo: Supongamos que tenemos al inicio de la página quimica.html un índice en el que uno de los ítems es Alcanos. Y más adelante, en el documento tenemos un apartado titulado ALCANOS Para enlazar el item con el apartado debemos escribir en apartado: <A NAME=”alcanos”></A> y en el índice escribiremos: <A HREF=quimica#alcanos> Alcanos </A> Vínculos sobre textos Como ya hemos visto cuando un hipervínculo se establece sobre texto este aparece subrayado y de un determinado color. Cuando hemos hecho clic sobre el enlace el texto cambia de color. Podemos modificar estos colores con tres atributos de la etiqueta <body>: Link. Color del hipervínculo sin visitar. Alink. Color cuando el hipervínculo está activo (acaba de ser pulsado). Vlink. Color cuando ya ha sido visitado. Vínculos sobre imágenes Cuando un hipervínculo está fijado sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona. Tipos de enlaces Al establecer el hipervínculo podemos indicar que protocolo se va a utilizar, así podemos realizar un hipervínculo a: Una página web: <A HREF=http://”www.google.es> El google </A> Correo electrónico: <A HREF=mailto:[email protected]> Para enviar correo a Juan </A>. En este caso se abre la aplicación Outlook Express (si el navegador es IExplorer) o ........... En el destinatario del mensaje aparece la dirección incluida en el hipervínculo. Descarga de ficheros: <A HREF=ftp://”www.descargas.es> Para descargar el fichero </A> Imagen <img> Para insertar una imagen se utiliza la etiqueta <img> y no necesita etiqueta de cierre. Atributos Nombre del archivo imagen (src). Si la imagen no está en la misma carpeta que el archivo donde se va a insertar hay que indicar la ruta (ver lo relativo a rutas de ficheros en tema de Hipervínculos) Ejemplo: <img src="imagenes/miFoto.gif"> Texto alternativo (alt). A veces una imagen no puede ser visualizada en el navegador y aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen. Podemos hacer que en vez del nombre de la imagen, que en general no será descriptivo, aparezca un texto alternativo. El texto alternativo se muestra también al situar el puntero sobre la imagen. Ejemplo: <img src="imagenes/miFoto.gif" alt=”Mi foto”> Borde de la imagen (border). Al visualizar una páginas aparecen sin ningún borde alrededor, pero es posible establecer uno. Este atributo toma valores numéricos que expresan el grosor del borde número en pixels. Ejemplo: <img src="imagenes/miFoto.gif" alt=”Mi foto” border=4> Tamaño de una imagen. Se establece por dos atributos que toman valores numéricos y expresan la anchura (width) y altura (height) en pixels. Ejemplo: <img src="imagenes/miFoto.gif" alt=”Mi foto” border=4 width=100 height=150> Alineación de una imagen (align).Indica la alineación de las imágenes con respecto a la línea de texto en la que se encuentran. Los valores del atributo align pueden ser los siguientes: absbottom (inferior), absmiddel (medio), baselíne, texttop, top, bottom, left, middle y right. Ejemplo: <img src="imagenes/miFoto.gif" alt=”Mi foto” border=4 aling=”top”> Tabla <table> Las tablas están formadas por filas y columnas. La intersección de una fila y una columna es una celda. Para crear una tabla se incluyen entre las etiquetas <table> y </table>. Fila <tr> Cada fila se inserta con las etiquetas <tr> y </tr>. Columna <td> Cada columna se inserta con las etiquetas <td> y </td> Ejemplo: La código: Se vería: <table> <tr> 1º A 1º B 1º C 1º D <td> 1º A </td> <td> 1º B </td> </tr> <tr> <td> 1º C </tr> <td> 1º D </tr> </tr> </table> Atributos de tabla Ancho de la tabla (width). Valor absoluto o tanto por ciento del tamaño de página. Altura de tabla (height). Valor absoluto o tanto por ciento del tamaño de página. Espacio entre el contenido de las celdas y el borde (cellpadding). Espacio entre celdas (cellspacing) Grosor del borde (border) Alineación de la tabla dentro de la página (align). Toma los valores left, center y right. Color de fondo (bgcolor) Imagen de fondo (background) Color del borde (bordercolor) Ejemplo: Si añadimos los siguientes atributos de tabla al ejemplo anterior: <table bgcolor=cyan border=3 bordercolor=#AA2277 cellpading=7 width=200 height=100> produce: Atributos de las celdas Ancho de la tabla (width). Valor absoluto o tanto por ciento del tamaño de página. Altura de tabla (height). Valor absoluto o tanto por ciento del tamaño de página. Grosor del borde (border) Alineación horizontal del contenido de la celda (align). Toma los valores left, center y right. Alineación vertical del contenido de la celda (valign). Toma los valores baseline, bottom, middle, top. Color de fondo (bgcolor) Imagen de fondo (background) Color del borde (bordercolor) El ancho de columna se ajusta al contenido (nowrap). No toma valores. Combinar celdas Colspan. Toma el valor de columnas que se unen. Rowspan. Toma el valor de filas que se unen. Ejemplo. El código: <table bgcolor=cyan border=3 bordercolor=#AA2277 cellpading=7 width=200 height=100> <tr align=middle> <td bgcolor=yellow> 1º A </td> <td> 1º B </td> </tr> <tr> <td> 1º C </tr> <td> 1º D </tr> </tr> </table> Produce: Encabezado de columna <th> Esta etiqueta se puede utilizar sustituyendo a <td>, sin embargo, al utilizar <th> el texto de la celda aparece centrado y en negrita por lo que se utiliza para escribir encabezados de columna (se utiliza en la primera fila). Se pueden utilizar los atributos vistos en el punto anterior. Título de tabla <caption> Debe ir detrás de la etiqueta <table>. Atributos. Align. Toma los valores: bottom, center, left, right y top Por defecto es center. Valign. Toma los valores bottom (debajo de la tabla) y top (encima de la tabla). Por defecto es top. Marcos Los marcos (frames) sirven para distribuir la información en las páginas de forma más eficiente. Cada marco es una subventana de la ventana principal y contiene un documento HTML individual. Esto permite mantener fijas unas partes de la página mientras otras pueden cambiar. Por ejemplo, podemos tener un índice de forma permanente en una parte de la página, al hacer clic en un ítem el índice permanece inalterado, mientras en otra parte de la página aparece la página enlazada. Conjunto de marcos <frameset> Para utilizar marcos creamos una página con la definición del conjunto de marcos (frameset). Para ello se utilizan las etiquetas <frameset> y </frameset> indicando el número de marcos en que se dividirá la ventana. Estas etiquetas van después de la etiqueta <head>. Si utilizamos <frameset> no hay que utilizar la etiqueta <body>, ya que el cuerpo del documento será el cuerpo de las páginas que se carguen en cada uno de los marcos. Atributos. Definir marcos es como crear una tabla de ventanas en que se dividirá la ventana principal. Tamaño de cada una de las filas en que se divide el documento (rows). En valor absoluto o en porcentaje del tamaño de página. Se pone un valor por cada fila y se separan por comas. Si se escribe como valor asterico la fila ocupará todo lo que quede de ventana. Si se escriben varios asteriscos el espacio se repartirá equitativamente. Tamaño de cada una de las columnas en que se divide el documento (cols). En valor absoluto o en porcentaje del tamaño de página. Se pone un valor por cada columna y se separan por comas. Si se escribe como valor asterico la columna ocupará todo lo que quede de ventana. Si se escriben varios asteriscos el espacio se repartirá equitativamente. Borde (frameborder). Toma los valores yes ó 1 y no ó 0. Separación entre marcos (framespacing). Grosor de borde (border). En valor absoluto o porcentaje. Color del borde (bordercolor). Ejemplo. <frameset cols="250,*" bordercolor="red"> </frameset> rows=”400,* ”frameborder="yes" framespacing="3" border="5" Podemos dividir marcos en otros marcos. Así el siguiente código divide la ventana en dos columnas iguales y la primera columna se divide en dos filas una de150 pixels de altura y la otra el resto. <frameset cols="*,*"> <frameset rows="150,*"> </frameset> </frameset> Nota. Entre las etiquetas <frameset> y </frameset> sólo se pueden encontrar la etiquetas <head> <frameset> <frame> y sus correspondientes etiquetas de cierre. Marco <frame> Esta etiqueta indica qué documento se cargará en cada marco. No necesita etiqueta de cierre. Atributos. Nombre del marco (name). Conveniente para dirigir los hipervínculos a un marco determinado. Documento que se cargará en el marco (src). Ver <href> para saber como indicar la ruta. Anchura del margen con respecto a los bordes del marco (marginwidth). Valor absoluto o porcentaje. Altura del margen con respecto a los bordes del marco (marginheight). Valor absoluto o porcentaje. Borde (frameborder). Toma los valores yes ó 1 y no ó 0. El usuario no puede redimensionar el marco (noresize). No toma valores. Mostrar la barra deslizadora (scrolling). Toma los valores yes, no y auto. Este último indica que muestre la barra si el documento no cabe en el marco. Ejemplo. <frameset cols="*,*" frameborder=1 border=5 bordercolor=red> <frameset rows="150,*" frameborder=1 border=5 bordercolor=blue> <frame src=”docum2.html” name= “marcoIzdo” frameborder=1 scrolling=”no” noresize> <frame src=”docum3.html name=”marcoDcho” scrolling=”auto” noresize> </frameset> <frame src=marco1.html></frame> </frameset> Marco destino del hipervínculo Cuando hacemos un hipervínculo podemos indicar en qué marco se mostrará el documento. Par ello utilizamos el atributo de <href> target que puede tomar los valores: _blank. El documento se abre en una página nueva. _parent. El documento se abre en el marco que contiene el vínculo o en el conjunto de marcos padre. _self. El documento se abre en el mismo marco. Es la opción por defecto. _top. El documento se abre en la ventana completa. Esto significa que los marcos desaparecerán. Nombre del marco destino. Formularios Un formulario es un elemento que permite recoger datos introducidos por el usuario. Tienen muchas aplicaciones como recoger opiniones, datos de los usuarios, etc. Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones. Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia. Formulario <form> Atributos. Programa destino (action). Dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario. Tipo de cifrado (enctype). Por defecto tiene el valor application/x-www-form-urlencoded. Cómo se transmitirán los datos del formulario (method). Toma los valores: get. Los datos no sufrirán modificaciones cuando sean procesados. post. Los datos sufrirán modificaciones cuando sean procesados. Los formularios deben crearse sobre una tabla para que queden ordenados o introducir saltos de línea. Si no se hace así los distintos elementos aparecerán en línea. Elementos de los formularios Se introducen entre las etiquetas <form> y </form>. Área de texto <textarea> Es una zona donde el usuario puede insertar líneas de texto. Atributos Para que el área de texto tenga algún valor inicial, habrá que insertarlo entre las etiquetas <textarea> y </textarea>. Nombre del área de texto (name). Número de líneas que se verán (rows). El atributo rows indica el en el área de texto por lo que determina al alto del área de texto. Número de caracteres por línea que se verán (cols) Para introducir un texto por defecto, escribimos dicho texto entre las etiquetas <textarea> y </textarea>. Elementos de entrada <input> Para introducir datos. Atributos Nombre (name). Tipo (type). Los valores que puede tomar son text, password, checkbox, submit, restore, button, radio, select y file. Cada uno de estos elementos de entrada tiene sus propios atributos. Tipo text (campo de texto) Atributos Número de caracteres que se visualizarán (size). Longitud máxima que tendrá el campo (maxlenght). Valor por defecto (value) Ejemplo. <input name="Direccion" type="text" size="50" maxlength="70"> Tipo password (campo de contraseña) Los caracteres introducidos aparecen como asteriscos. Tiene los mismos atributos que un campo de texto. Ejemplo. <input name="Contrasenia" type="password" size="50" maxlength="70"> Tipo enviar (submit) Es un tipo de botón que se utiliza para enviar el formulario. El atributo es value que indica el texto que se mostrará. Ejemplo. <input name="botonEnviar" type="submit" value="Enviar formulario"> Este código mostrará un botón con la palabra Enviar sobre él. Al pulsar enviará el formulario. Tipo reiniciar (restore) Es un tipo de botón que se utiliza para borrar el formulario y volver a los valores por defecto. El atributo es value que indica el texto que se mostrará. Ejemplo. <input name="botonLimpiar" type="restore" value="Limpiar formulario"> Tipo botón (button) No realiza ninguna acción. El atributo es value que indica el texto que se mostrará. Tipo checkbox (casilla de verificación) Atributos Valor asociado (value). Es el valor que se enviará al enviar el formulario. Activación por defecto (checked). No toma valores. Si se escribe este atributo la casilla aparecerá activada inicialmente. Ejemplo. <input name="chbxGrande" type="checkbox" value="grande”> Tipo radio (botón de opción) Los botones de opción se utilizan cuando se desea que un valor del formulario tome un valor de entre varios posibles. Atributos Valor asociado (value). Es el valor que se enviará al enviar el formulario. Activación por defecto (checked). No toma valores. Si se escribe este atributo la casilla aparecerá activada inicialmente. Ejemplo. <input name="rdTamanio" type="radio" value="grande”><br> <input name="rdTamanio" type=" radio " value="normal” checked><br> <input name="rdTamanio" type=" radio " value="pequenio”> <br> Obsérvese que tienen el mismo nombre y tipo solo varía el valor de cada uno. Solo uno está activado por defectol. Tipo file (enviar fichero) En este caso aparecerá un campo de texto y un botón examinar. Podemos escribir en el campo de texto la ruta del fichero o con el botón examinar buscarlo. Ejemplo. <input name="fchTrabajo" type="file"> Tipo select (campo de selección) El campo de selección se utiliza para listas desplegables. Atributos Nombre (name) Número de items visualizados (size). Tipo de selección (multiple). No toma valores. Si aparece el usuario puede seleccionar varios elementos de la lista al mismo tiempo pulsando la tecla Ctrl. Activación (disabled). No toma valores. Si aparece la lista estará desactivada Elementos de la lista <option> Para escribir los elementos de la lista desplegable se utiliza la etiqueta <option>. Atributos Valor que se enviará (value). Si no se escribe se enviará el valor que aparece en la lista. Seleccionado (selected). No toma valores. Si se escribe el elemento aparece seleccionado. Ejemplo. <select name=”slJuego” size=3 multiple> <option selected> Mus </option> <option> Tute </option> <option value=Resolanio”> Resolaño </option> <option> Brisca </option> <option> Escoba </option> </select> Se mostrará una lista con tres items y una barra de deslizamiento para visualizar las cinco. Como no se admite la ñ en la mayoría de lenguajes de programación, en vez de transmitir el valor Resolaño se transmite el valor Resolanio (value). Por defecto la opción seleccionada es Mus (selected) y se permite seleccionar varias opciones (multiple). Multimedia Sonido de fondo <bgsound> Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al contenido de la página, puede hacerla más atractiva en contrapartida la descarga del archivo de sonido supone una carga que puede ralentizar la visualización de la página y además muchos usuarios suelen estar escuchando otro tipo de música cuando navega en Internet, por lo que el escuchar también sonido en cada página que visita puede resultar algo molesto. Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad. Esta etiqueta no necesita etiqueta de cierre. Atributos src. Ruta y el nombre del archivo de audio. loop. Número de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle el valor infinite o -1. Ejemplo. <bgsound src="sonidos/letItBe.mp3" loop="-1"> Este ejemplo reproduce el sonido de fondo “letItBe” contenido en la carpeta “sonidos” continuamente. La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible que la situemos siempre en un sitio fácil de encontrar, por si deseamos hacerle alguna modificación. Podríamos, por ejemplo, incluirla justo debajo de la etiqueta <body>. Vídeo y audio <embed> Al incluir un vídeo en una página web hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse. Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV. La etiqueta de cierre no es necesaria. Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Con esta etiqueta también se puede insertar sonidos. Atributos src. Ruta y el nombre del archivo de vídeo. autostart. Si toma el valor true el archivo se reproducirá automáticamente al cargarse la página (valor por defecto). Para que no se reproduzca automáticamente debe tomar el valor false. loop. Si toma el valor true el archivo se reproducirá continuamente. Para que no ocurra así debe tomar el valor false. width (anchura) y height (altura) especifican el tamaño de la consola de control de vídeo. Sus valores son el tamaño en píxeles. Si no se especifican estos atributos, la consola de control de vídeo se mostrará con el tamaño más adecuado al tamaño del vídeo. Hidden. Oculta los controles de reproducción. Toma los valores true y false. Ejemplo. <embed src="videos/Concierto.avi" autostart="false" loop="true"> Se carga el video “Concierto” que se encuentra en la carpeta “videos”, no arranca automáticamente y se repite continuamente. Capas Capa <span> ... Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño. Atributos id. Da un nombre a la capa. style. Establecen el resto de propiedades de la capa. o left (izquierda) y top (superior). Posición de la capa respecto a los márgenes izquierdo y superior de la página. Pueden tomar un número como valor, acompañado de px cuando haga referencia a píxeles, y acompañado de % cuando haga referencia a un porcentaje. o position. Para fijar la capa en la posición establecida. El valor que toma es absolute. Si no se estableciera este valor, la capa se mostraría pegada al margen izquierdo, en la posición en la que hubiera sido insertada dentro del código. o width (anchura) y height (altura). Determinan el tamaño de la capa. Pueden tomar un número como valor, acompañado de px cuando haga referencia a píxeles, y acompañado de % cuando haga referencia a un porcentaje. o z-index. Determina el índice de la capa dentro de la página. Una capa podrá ser solapada por aquellas capas cuyo índice sea mayor. Siempre es un valor numérico. o visibility. Determina la visibilidad de la capa. Puede tomar los valores inherit (se muestra la capa mientras la capa a la que pertenece también se esté mostrando), visible (muestra la capa, aunque la capa a la que pertenece no se esté viendo) y hidden (la capa está oculta). o layer-background-image y background-image. Para determinar una imagen de fondo para la capa. La ruta y el nombre de la imagen han de aparecer entre paréntesis, después de la palabra url. o layer-background-color y background-color. Para determinar un color de fondo para la capa. Ha de ser un número hexadecimal. o overflow. Para indicar si se mostrará o no el contenido de la capa cuando no pueda ser visualizado en su totalidad, por ser la capa demasiado pequeña. Puede tomar los valores visible (se muestra todo el contenido de la capa, aunque esto implique hacer que la capa sea más grande), hidden (no es posible visualizar el contenido de la capa que no quepa en ella), scroll (se muestra la barra de desplazamiento, aunque el contenido de la capa pueda ser visualizado totalmente) y auto (se muestra la barra de desplazamiento cuando sea necesario). o Clip. Determina establecerse el área de la capa que podrá ser visualizado. Lo que hace es recortar la capa, haciendo que partes de ella no sean visibles. Ha de especificarse la distancia de los márgenes de la capa entre paréntesis, después de la palabra url. El primer valor ha de ser la distancia (se asume que está en píxeles) del margen superior, hasta la que no se visualizará el contenido de la capa. El segundo valor ha de ser la distancia del margen izquierdo, hasta la que no se visualizará el contenido de la capa. El tercer valor ha de ser la distancia del margen superior, hasta la que se visualizará el contenido de la capa. El cuarto valor ha de ser la distancia del margen izquierdo, hasta la que se visualizará el contenido de la capa. También es posible incluir auto como valor de alguna de estas distancias, lo que indica que la distancia se corresponderá con los bordes de la capa. Para establecer las propiedades del atributo style se escriben entre comillas dobles, con un punto y coma detrás de cada una. Para asignar los valores a las propiedades no se utiliza el símbolo = (igual), sino que se utiliza el símbolo : (dos puntos). Ejemplo <span id="capa" style="position:absolute; width:200px; height:115px; z-index:3; visibility: visible; background-color: #0099CC; background-image: url(imagenes/fondocapa.gif">Este texto est&aacute; dentro de una capa.</span> ANEXO. COLORES #000000 #003300 #006600 #009900 #00CC00 #00FF00 #330000 #333300 #336600 #339900 #33CC00 #33FF00 #660000 #660033 #666600 #669900 #66CC00 #66FF00 #990000 #993300 #996600 #999900 #99CC00 #99FF00 #CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00 #FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00 #000033 #003333 #006633 #009933 #00CC33 #00FF33 #330033 #333333 #336633 #339933 #33CC33 #33FF33 #660033 #663333 #666633 #669933 #66CC33 #66FF33 #990033 #993333 #996633 #999933 #99CC33 #99FF33 #CC0033 #CC3333 #CC6633 #CC9933 #CCCC33 #CCFF33 #FF0033 #FF3333 #FF6633 #FF9933 #FFCC33 #FFFF33 #000066 #003366 #006666 #009966 #00CC66 #00FF66 #330066 #333366 #336666 #339966 #33CC66 #33FF66 #660066 #663366 #666666 #669966 #66CC66 #66FF66 #990066 #993366 #996666 #999966 #99CC66 #99FF66 #CC0066 #CC3366 #CC6666 #CC9966 #CCCC66 #CCFF66 #FF0066 #FF3366 #FF6666 #FF9966 #FFCC66 #FFFF66 #000099 #003399 #006699 #009999 #00CC99 #00FF99 #330099 #333399 #336699 #339999 #33CC99 #33FF99 #660099 #663399 #666699 #669999 #66CC99 #66FF99 #990099 #993399 #996699 #999999 #99CC99 #99FF99 #CC0099 #CC3399 #CC6699 #CC9999 #CCCC99 #CCFF99 #FF0099 #FF3399 #FF6699 #FF9999 #FFCC99 #FFFF99 #0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC #CC00CC #CC33CC #CC66CC #CC99CC #CCCCCC #CCFFCC #FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC #0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF #3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF #9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF #CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF #FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF Existe otra forma de representar algunos colores, sin la necesidad de utilizar números en hexadecimal. Estos colores pueden representarse por su nombre, y son los siguientes: Color Hexadecimal #FFFFFF #000000 #000080 #0000FF #008000 Nombre white black navy blue green #008080 #00FF00 #00FFFF #800000 #800080 #808000 #808080 #C0C0C0 #FF0000 #FF00FF #FFFF00 teal lime aqua maroon purple olive gray silver red fuchsia yellow
