Curso de diseño Web con HTML. Cursosindustriales. Programación HTML Página 1

Transcripción

1 Curso de diseño Web con HTML. Cursosindustriales. Programación HTML Página 1

2 LENGUAJE HTML. En esta parte del curso HTML, vamos a conocer las etiquetas comunes HTML que usarás en tu página Web. Te recuerdo que el conocimiento de las etiquetas HTML es hoy en día mera curiosidad, pues con los programas de desarrollo Web actuales, se pueden crear y páginas complejas sin apenas necesidad de usar código. Pero en un mundo marcado por normas y reglas, el que conoce los secretos del código, tiene una ventaja sobre aquellos que no lo conocen. En este capítulo solo veremos las etiquetas reconocidas por la 3WC y anteriores a HTML5 ya que las nuevas etiquetas que se usan actualmente se explicarán en detalles en posteriores capítulos. OBJETIVOS DEL TEMA. Qué es HTML? Estructura de una página Web Nuestra primera página Web con notepad PRACTICA. EDITORES WEB. Cursosindustriales. Programación HTML Página 2

3 ATRIBUTOS Se define como atributos a las acciones que complementan la etiqueta. Así por ejemplo, en una etiqueta de formato de texto de alineación, la alineación ALIGN es un atributo (y que curiosamente en inglés significa alineación). Por ejemplo, una etiqueta completa de alineación podría ser así: Este texto irá centrado en la página Web Los atributos se caracterizan porque se les tiene que asignar un valor y dicho valor, casi siempre irá puesto entre comillas. En nuestro ejemplo anterior, utilizamos la etiqueta de párrafo y le incluimos el atributo align para que el párrafo aparezca centrado en el elemento Web en el que se ha utilizado. Observa como se ha establecido después de la etiqueta principal su atributo y se ha asignado un valor entre comillas dobles (que podrían ser también comillas simples si utilizases este atributo dentro de una función). Existen muchos tipos de atributos y los iremos viendo según vayamos estudiando las etiquetas HTML. ETIQUETAS HTML Como ya he mencionado, en este capítulo solamente veremos etiquetas y atributos comunes al lenguaje HTML ya que dicho lenguaje está sufriendo constantemente una actualización de etiquetas, atributos, métodos y objetos que harían muy difícil exponer en esta primera parte todas sus instrucciones. Por esa razón, a continuación voy a mostrar las etiquetas comunes, los procesos usados y la forma de proceder anterior a la nueva versión HTML5, y que todavía no es oficial, del lenguaje HTML para así dejar para más adelante las actualizaciones de dicho lenguaje de programación. Cursosindustriales. Programación HTML Página 3

4 Para crear una página web se precisa de instrucciones de formato, de estilo, estructura, y efecto varios que atraigan la atención a los internautas, los cuales, al enfrentarse a páginas como está, en la que hay que leer, se aburren fácilmente. Para conseguir esto hay que utilizar las etiquetas correspondientes, ya que cada una tiene asociada una función específica. A continuación se muestran las etiquetas usadas en HTML en orden alfabético mostrándote un uso de la misma y cerrándola en el caso de que sea cerrada. NOTA: Existen todavía una gran cantidad de etiquetas que no salen en la lista y que obviamente no las he incluido porque estarán presentes en siguientes capítulos. Cursosindustriales. Programación HTML Página 4

5 <A></A> Esta etiqueta se utiliza para realizar enlaces o hipervínculos a otros sitios u otras partes del documento. Entre esta etiqueta debe ir acompañada de atributos para que se consiga la acción deseada, ya que por sí sola no hace nada de nada. El atributo mínimo que debe de tener es el atributo href, que asigna la ruta del enlace del hipervínculo, sea interno a la propia página o externo a la misma. Esta etiqueta se debe usar dentro de la etiqueta <BODY></BODY>. El tipo de enlaces existentes que puede realizarse con esta etiqueta y sus atributos son: Enlaces a la misma página. Cuando los enlaces van a la misma página. (Ancla). Se suele usar un iniciador y un receptor del enlace. El iniciador siguiente: <a href= #enlaceinterno >Ir a enlaceinterno</a> Utiliza el operador # para indicar que es un enlace a la misma página. Al tener el signo # el navegador Web buscará dentro de la propia página un identificador con el nombre de enlaceinterno para realizar el enlace. Por lo tanto el receptor siguiente: <a name= enlaceinterno >Aquí empieza el enlace</a> Utiliza el atributo name para indicar que es el destino interno del enlace anterior. Observa que en el destino no se utiliza el operador #, pues solo se utiliza en el origen. Enlaces a páginas del servidor. Siendo locales, estos enlaces apuntan a páginas Web del mismo sitio Web o servidor. Pueden ser relativos o absolutos, pero HTML es un estándar y es preferible usar enlaces relativos. Los enlaces absolutos se suelen utilizar en enlaces a sitios fuera de tu Web. Cursosindustriales. Programación HTML Página 5

6 <a href=../estudiantes/index.php >Ir a la página principal</a> Los enlaces relativos hacen referencia en un sistema de archivos a la posición en la cual está el archivo respecto a directorios y archivos, por lo que si quieres ir un nivel hacía atrás se utiliza la síntesis de../ como puedes ver en el ejemplo anterior. Por ejemplo supón que tienes una carpeta principal en la cual se alojan todos los archivos, carpetas y elementos que forman tu servidor local. Imagina que en la carpeta A1, tienes un archivo llamado "index.html" y quieres realizar un enlace hacia otro archivo llamado "contacto.php" alojado en la carpeta A. Como puedes ver en la imagen, la carpeta A1 es hija de la carpeta A, y esta, a su vez es hija de carpeta principal. Podemos ver que de A1 hacía A solo hay un salto de directorio, por lo que para acceder al archivo "contacto.php" de A, desde "index.html" de A1 debemos de utilizar, al ser un único salto de directorio la forma expresada anteriormente../ + Nombre directorio; pues le dice al navegador que se realiza un cambio de directorio. En la página index.html, quedaría el enlace local así: <a href="../a/contacto.php">enlace hacia el directorio inmediato</a> Este enlace te abre la página contacto.php en la misma ventana en la que estabas. Ahora supón que quieres hacer un enlace inverso. Valdría el mismo tipo de enlace? La respuesta es no, pues se debería de cambiar el enlace, ya que, ahora acceder a un subdirectorio y no a un directorio anterior. Sería de la forma: Cursosindustriales. Programación HTML Página 6

7 <a href="a1/index.html">enlace hacia un subdirectorio</a> También podríamos tener archivos dentro de la carpeta principal, y para acceder a otro archivo, por ejemplo, visitanos.php, desde este subdirectorio A1 tendríamos que usar, al ser dos directorios, dos../ para acceder. <a href="../../carpetaprincipal/visitanos.php">principal desde un subsubdirectorio</a> El enlace recíproco quedaría de la siguiente forma: <a href="a/a1/index.html">ir al subsubdirectorio desde el principal</a> Abren páginas de otros sitios Web. Enlaces remotos. Se suele utilizar el atributo target para adecuar la forma de apertura del enlace, bien en la misma ventana del navegador o en una ventana nueva. Utilizan direcciones absolutas para realizar el enlace. <a href= target= _blank >Cursosindustriales</a> Enlaces de descargas. Cuando el destino del enlace es un archivo, de un formato distinto al que manipula el navegador, éste lo considera como un archivo y te muestra la opción de descargarte el mismo. No tiene por qué ser un archivo para descargar. Cursosindustriales. Programación HTML Página 7

8 Cualquier tipo MIME que no entienda el navegador en el enlace, lo descargará al directorio de descargas del PC (previo consentimiento del usuario). <a href= lista.doc >Descargar</a> Los atributos que más se usan con la etiqueta son los siguientes: Href. Que sirve para realizar Hiperenlaces de texto asignándole un directorio o una dirección Web. Si va precedido de #, significa que el enlace es a la misma página. Name. Para enlaces a la misma página, cuando se ha realizado un enlace previo con el condicional #. Rel. Este atributo se utiliza para relacionarlo con el siguiente enlace. No es importante y no es obligatorio su uso. Así podríamos decir que teniendo un sitio Web con 2 páginas, en la primera, pondríamos un enlace a la segunda y en el atributo REL (relative) pondríamos un identificador del destino: <A HREF="pagina2.html" REL="siguiente_pagina">Ir a la página.</a> Se puede usar un valor predefinidos con este atributo: Nofollow. Que indica a los algoritmos de posicionamiento (la máquina de google que busca páginas Web), que dicho enlace no debe de ser incluido dentro del análisis. Por lo que nuestro enlace quedaría así: <A HREF="pagina2.html" REL="nofollow">Ir a la página siguiente</a> Cursosindustriales. Programación HTML Página 8

9 Rev. Igual que el anterior, pero hace referencia a la procedencia de ese enlace. En nuestro ejemplo quedaría así: <A HREF="pagina2.html" REV="siguiente_pagina">Volver a la página principal</a> Title. Da una descripción al enlace mostrando un mensaje cuando pase el ratón sobre el enlace. No es obligatorio. <A HREF="estilo.css" REL"text/css" TITLE="Enlace a una hoja de estilo">abre la hoja de estilo</a> Target. Este atributo se usa definir donde se va a ver el enlace. Por defecto, la etiqueta <A></A> hace que el enlace se muestre en la misma ventana que estás visualizando en el momento. Pero con el atributo TARGET, puedes hacer que el enlace se abra en una ventana nueva del navegador. Este atributo maneja varios valores: _blank: Abre en una nueva ventana el enlace. _self: Se refresca la página en la cual donde está situado el enlace. Es el valor por defecto. _parent: Utilizado con Iframes, actualiza la ventana principal o actual como _self si solo hay una ventana. _top: En enlaces con iframes, se carga la página a tamaño completo. <ADDRESS></ADDRESS> Es una etiqueta en desuso ya que pocos administradores la usan. El texto que esté comprendido entre esta etiqueta tiene un formato general. Servía para escribir la dirección de la empresa y que los programas de reconocimiento algorítmico Web, lo usarán. No tiene mayor interés. Cursosindustriales. Programación HTML Página 9

10 Esta etiqueta representativa del formato del texto, muestra en NEGRITA la letra que esté entre esta etiqueta. Ya no se usa en HTML 5.0 porque se ha sustituido por la etiqueta que realiza lo mismo. Esta etiqueta tiene su cosilla... <BASE></BASE> Ya hemos visto en enlaces al mismo servidor, que cuando queremos ir a otro directorio inferior tenemos que asignar el cambio con "../". A mi parecer, esta es la mejor forma de realizar los enlaces, pero para gusto los colores. La etiqueta <BASE></BASE> sustituye estos 2 puntos y la barra invertida al agregar la dirección del servidor entre las etiquetas de la forma: <BASE>carpeta principal/a/</base> De forma que cuando creemos un enlace hacia un archivo incluido en la carpeta A1, por ejemplo index.html, simplemente debemos de llamar al archivo de la carpeta A1, porque la etiqueta base ya agrega la mayoría de la dirección del enlace. El enlace quedaría como si fuese un enlace al mismo directorio. <A HREF="index.html">Enlace a index.html</a> Y recuerda que si quisiéramos hacer el enlace desde un archivo contacto.php desde la carpeta principal el enlace quedaría así: Cursosindustriales. Programación HTML Página 10

11 <A HREF="A/A1/index.html">Enlace a 2 directorios</a> Por lo que la etiqueta base, sirve para simplificar los enlaces y hacerlos más accesibles. Pero pienso que cuando tienes muchas carpetas en tu servidor, se puede producir error al tratar con mucha información, un error, por supuesto humano. Otro de los usos de esta etiqueta es cuando quieres que todos tus enlaces se abran en la misma ventana, cosa que pasa si no modificas nada con el atributo TARGET. Pero si quieres que todos los enlaces se abran en la misma ventana ignorando el objetivo TARGET de algún enlace que hiciste en un pasado, utiliza esta etiqueta de la forma siguiente: <BASE TARGET="main_window"></BASE> <BASEFONT SIZE> Esta etiqueta sirve para establecer el tamaño por defecto de la fuente utilizada en la página cuando se utilizan tamaños de fuentes relativos. Su uso es el siguiente: <BASEFONT SIZE=6> Para que veas el efecto crear este documento: <html> <head><title>prueba de tamaños de fuentes</title></head> <body> esta fuente está a tamaño relativo 2 <basefont size=6>esta fuente está a tamaño base 6</basefont size> Esta es la fuente predeterminada </body> <html> Guárdalo con el nombre que quieras, pero en formato.html. Verás que diferencia entre uno y otro. Cursosindustriales. Programación HTML Página 11

12 <BIG></BIG> Resalta el texto introducido entre la etiqueta aumentando su tamaño respecto al tamaño predeterminado de la página. Ya no se usa en HTML 5.0. <BGSOUND></BGSOUND> Esta etiqueta prácticamente en desuso, sirve para cargar un sonido de fondo mientras se ejecuta la Web. En la actualidad el uso esta etiqueta ha sido sustituida por la etiqueta EMBED que estudiarás más tarde. Esta etiqueta es exclusiva de Internet Explorer, por lo que solo puede reproducir unos tipos especiales de archivos de sonido: Wav. Este formato de archivo es característico de Windows ya que lo tiene integrado el reproductor Windows Media. Su tono de 44kHz. Tiene el inconveniente de que los archivos WAV, son pesados, por lo que su uso queda limitado a para pequeñas frase o sonidos graciosos. Au. Con extensión.au, es un formato de Apple, por lo que navegadores específicos necesitarán un Pluggin para reproducir el sonido. MP3. Es un formato de sonido comprimido que permite obtener calidad alta de sonido comprimido (pesa menos que el Wav). MIDI. Traducido por las tarjetas de sonido del propio ordenador, es un fichero de sonido convertido en un formato de ondas de sonido. El "beep" del ordenador al encenderse es un sonido MIDI. A la hora de asignar el sonido a la Web, tendremos que elegir como queremos que se reproduzca, es decir, si queremos que se reproduzca directamente por el navegador o queremos que se reproduzca por un programa en nuestro ordenador. Cursosindustriales. Programación HTML Página 12

13 Otro problema añadido con esta etiqueta es que, algunos sistemas operativos no reconocen algunos formatos, como el, por ejemplo.au, que solo lo reconoce Mac, pero en Internet Explorer se puede bajar un pluggin. Pero lo normal es realizar un enlace hacia el archivo de sonido para que se reproduzca el mismo con nuestro reproductor de audio. En este caso: <A HREF="archivo.mp3" target="_blank">pincha para reproducir el archivo</a> Y al pinchar el enlace se abrirá el reproductor multimedia o el programa predefinido instalado en tu ordenador para que se reproduzca el archivo en formato, en este caso.mp3. Con esta etiqueta, esta opción anterior no es aplicable, ya que <BGSOUND></BGSOUND>incorpora un sonido como fondo de la página. <BGSOUNG SRC="ruta_archivo"></BGSOUND> Junto a esta etiqueta se suele utilizar atributos para complementar la acción de la misma: Src. Entre comillas se debe de escribir la ruta al archivo de sonido. Este atributo es de propósito general, como la mayoría de los atributos, se usarán en otras etiquetas que verás más tarde. src="ruta_hacia_archivo" Loop. Este atributo le indica al navegador si debe o no repetir el archivo de sonido a su finalización. Se puede elegir un número establecido: loop="x" ó loop="true" ó loop="false" Siendo X, un número entero, true, que se repetirá infinitamente y false, que se reproducirá solo una vez en la carga. Type. Este atributo declara el tipo de fichero que reproducirá el navegador. Es importante este atributo pues así el navegador ejecuta el plugin correspondiente Cursosindustriales. Programación HTML Página 13

14 Autostart. Indica si el archivo se reproduce automáticamente o necesita del usuario para empezar a reproducirse. autostart="true/false" Siendo true afirmativo y, false que necesita la acción de reproducción. Name. Es el identificador que se le agrega a la etiqueta que podría ser llamada desde una función de un Script. El nombre va entre comillas dobles. Existen otros atributos para controlar la descarga del Pluggin del reproductor, y del control de volumen, pero no los voy a describir, pues no los vamos a usar en nuestro curso, ya que por defecto, el volumen del archivo reproducido, será de un 50% del total y lo podrás subir, aumentando el volumen del altavoz. Ya no se usa en HTML 5.0. <BLOCKQUOTE></BLOCKQUOTE> Esta etiqueta se encarga de dar formato con sangría al texto dentro de la etiqueta. Se puede enlazar varias etiquetas unas dentro de otras para dar varios espacios de sangrías: <BLOCKQUOTE>Este texto tiene una sangría</blockquote> <BLOCKQUOTE><BLOCKQUOTE>Este texto tiene una sangría doble</blockquote></blockquote> <BODY></BODY> Clasificada como una etiqueta principal, la etiqueta BODY sirve como tapiz de todo el material multimedia, texto, tablas, formularios, ventanas, etc., que quieras agregar a tu página Web. Es en esta etiqueta en la cual se suelen añadir atributos de formato de texto como el tipo de letra, el color de fondo, el color de la fuente predeterminado, la imagen de fondo, entre otros, pero por lo general se suele utilizar una hoja de estilo anexa o un estilo en la propia página para definir estos valores. Cursosindustriales. Programación HTML Página 14

15 Por lo general entre esta etiqueta se inserta la mayoría de todo el código fuente de la página Web. Esta etiqueta única sirve para realizar un salto de línea inmediato (lo que se suele ser un retorno de carro) y es una etiqueta de formato de texto. Se puede utilizar la barra invertida o no, pues el navegador lo entiende perfectamente ( = ). <CENTER></CENTER> Su uso más que etiqueta es un atributo de formato y alinea al centro el elemento multimedia o texto que lo contiene: <html> <head><title>prueba de tamaños de fuentes</title></head> <body> <center> esta fuente está a tamaño relativo 2 <basefont size=6>esta fuente está a tamaño base 6</basefont size> Esta es la fuente predeterminada </center> </body> <html> <CITE></CITE> Esta etiqueta pone en cursiva el texto contenido entre ella. Se usa para diferenciar texto a modo de comentario. Cursosindustriales. Programación HTML Página 15

16 <html> <head><title>prueba de tamaños de fuentes</title></head> <body> <center> <cite>deimoshack es un desarrollador informático.</cite> esta fuente está a tamaño relativo 2 <basefont size=6>esta fuente está a tamaño base 6</basefont size> Esta es la fuente predeterminada </center> </body> <html> <CODE></CODE> Sirve para poner el texto en formato de código fuente". El uso es similar al anterior. <DD> Desplaza a la derecha el texto introducido en la etiqueta. Se usa para dar formato al texto (un margen izquierdo) <DL></DL> Esta es la etiqueta principal de alineación de texto, para utilizar la etiqueta anterior. Dentro de esta etiqueta irán las etiquetas que generen un margen en la página Web. <DT> Alinea al margen izquierdo de la página Web el texto de la página existente dentro de la etiqueta. Se usa dentro de la etiqueta principal <DL></DL>. Por ejemplo: Cursosindustriales. Programación HTML Página 16

17 <html> <body> alineación de texto <dl> <dt>este texto está alineado a la izquierda de la página. <dd>este texto está tiene un margen izquierdo. <dt>aquí se vuelve a alinear a la izquierda. </dl> </body> </html> <DFN></DFN> Muestra en itálica el texto introducido en esta etiqueta. Solo sirve para Internet Explorer. No se usa en HTML5.0. <DIR></DIR> Reorganiza los elementos de la etiqueta <LI> y los coloca un "square" sea una lista ordenada numérica o no. Dentro de esta etiqueta debe de haber una lista. Convierte el texto dentro de la etiqueta en formato itálica. Funciona en cualquier navegador. Se ha despreciado en HTML5. <EMBED> Esta etiqueta usada como tal solo lo soporta NESCAPE. En la actualidad es más usada como atributo que como etiqueta. Esta etiqueta necesita de los mismos atributos que la etiqueta BGSOUND para funcionar, y al igual que la anterior etiqueta, sirve para poner un sonido de fondo. En el actual HTML 5 tiene un mayor uso. Cursosindustriales. Programación HTML Página 17

18 Tal como indica la traducción, esta etiqueta sirve para tratar la fuente del texto de la página. Hay 2 formas de tratarla, o bien parcial, o bien, general para designar el tipo de fuente de la página. En este sentido, se suele usar más bien como atributo, pero también lo puedes definir después del cuerpo principal. Utiliza 2 atributos principales: Size. Determina el tamaño de la fuente respecto al tamaño por defecto. Color. Define el color de la fuente. Este se puede definir directamente nombrando el color en inglés y entre paréntesis, o bien escribiendo el código Hexadecimal del color (mas adelante sabrás hacerlo). Face. Solo para Internet Explorer, determina el tipo de fuente (Arial, black, MS, etc.). <H></H> Esta etiqueta determina el tamaño de los títulos de la página. Se utiliza con una numeración de entre 1 y 6 siendo H1 el mayor encabezado y H6 el menor. Esta etiqueta se suele anidad con otras etiquetas de formato de texto. Su uso es: <H1>texto grande</h1> <HEAD></HEAD> Está etiqueta es la principal de cabecera. En ella se van a dar a agregar el título de la página, las etiquetas META y las funciones y Script de la página, aunque también se pueden poner en el cuerpo de la página. Cursosindustriales. Programación HTML Página 18

19 </HR> Crea una línea horizontal en la página. Se pueden usar los siguientes atributos: Noshade. Le dice al navegador que la línea sea sólida y no una sombra. Su uso es: <HR NOSHADE="noshade"/> Size. Le indica al navegador el tamaño de la línea: <HR SIZE=32/> Width. Establece el ancho de la línea. Por defecto es el ancho de la página, y al darle un ancho, se alinea al centro. Su uso: <HR WIDTH="400"/> Siendo la cantidad en pixeles o en porcentaje (usando %). Align. Alinea la línea según se desee a la izquierda, derecha o centro. Por defecto se alinea al centro. Su uso es: <HR ALIGN="center"/> Color. Solo para Internet Explorer, define un color para la línea. <HTML></HTML> Esta es la etiqueta principal de la página Web en la cual se va a insertar todas las etiquetas principales de formato, formularios, tablas, etc. Cursosindustriales. Programación HTML Página 19

20 Letra en itálica. Todos los navegadores la entienden. <IMG> Esta etiqueta se usa para insertar imágenes en la página Web. Se utilizan atributos para la etiqueta: Src. Indica la dirección de origen de la imagen. Se aplica la misma forma de uso que en los enlaces, pues si la imagen está guardada en una carpeta de nuestro servidor, hay que llamarla igual que si hiciésemos un enlace local. Align. Alinea la imagen dependiendo del usuario. Su uso es left, right, justify o center (entre comillas dobles) Alt. Descripción de la imagen que servirá para lectura de clientes con dificultades visuales. La descripción se pone entre comillas dobles. Width. Establece el ancho de la imagen en pixeles. Height. Establece el alto de la imagen en pixeles. Vspace. Le dice al navegador si necesita poner la barra de navegación vertical, cuando la imagen supera el tamaño de la resolución de pantalla vertical. Hspace. Le dice al navegador si necesita poner la barra de navegación horizontal, cuando la imagen supera el tamaño de la resolución de pantalla horizontal. Cursosindustriales. Programación HTML Página 20

21 Ismap. Le dice al navegador que la imagen se dividirá en porciones que el usuario establecerá para crear varios hipervínculos dentro de ella. Más adelante aprenderemos a hacer este tipo de enlaces mediante imágenes. La etiqueta <IMG> que no tiene cierre podría quedar así: <IMG SRC="../img/foto.jpg" ALIGN="center" WIDHT=200 HEIGHT=200 VSPACE=TRUE/> <MAP> Esta etiqueta sirve para realizar enlaces parciales dentro de una imagen. En la siguiente imagen, he creado unos enlaces utilizando la etiqueta <MAP> Esta etiqueta requiere de atributos para asignar las coordenadas de la imagen para el nuevo hiperenlace. En una imagen puede haber tantos hiperenlaces como quieras, pero ten en cuenta las coordenadas establecidas, para que no se mezclen los enlaces unos con otros. Cursosindustriales. Programación HTML Página 21

22 Al pasar el ratón te muestra el hiperenlace. El uso de esta etiqueta dentro de la imagen se debe de llamar en forma de atributo dentro de la etiqueta <IMG> con el atributo USEMAP y un nombre de identificador: <IMG SRC="../../img/mapa españa-gif" ALT="Mapa de imagenes" WIDTH="454" HEIGHT="368 BORDER="0" USEMAP="#Map2" /> Después se abre la etiqueta <MAP> llamando al identificador con el atributo creado anteriormente NAME igual que un hipervínculo a la misma página: <MAP NAME="Map2" ID="Map2"> Dentro de la etiqueta <MAP> se abren otras etiquetas para designar las coordenadas que tendrá el hipervínculo. Para ello se utiliza la etiqueta <AREA SHAPE> que puede coger los valores "rect", "circle" o "poly" siendo cada uno la forma geométrica que tenga el hiperenlace para hacer el hipervínculo. Las coordenadas de la imagen se establecen según el eje X y el eje Y de la imagen. Dividiéndose la imagen en pixeles, la esquina superior izquierda de la imagen es el pixel 0,0; así que cuando hacemos un hiperenlace en una imagen estamos designando los valores que comprende el área del mismo según los pixeles X,Y de la misma. En el siguiente etiqueta <AREA SHAPE> se ha elegido la forma poligonal, por lo que se escriben los conjuntos X,Y de la imagen que hacen falta para crear el hipervínculo de la zona de esa imagen: <area shapa="poly" coords="29,30,45,51,44,72,57,85,82,87,101,84,110,69,103,57,107,46,108,33,1 02,17,98,13,86,8, 69,10,55,14,41,18,33,26,28, 28,30,38,38,50,41,62,41,77,55,85" href=" /> Si eres observador, habrás podido observar que las coordenadas están agrupadas en conjuntos X, Y de la imagen, es decir, siempre un eje X y después un eje Y, y vuelve a empezar en otra posición. <area shape="poly" coords="105,15,124,11,150,11,175,20,189,23,186,30,172,33,163,37,153,38,14 4,38,131,39,124, 40,112,44,109,39,102,16,104,13" href=" /> Cursosindustriales. Programación HTML Página 22

23 Al final de los grupos X, Y de coordenadas, el atributo HREF incluye la dirección del hiperenlace. El resto del código que hace posible la imagen superior es la siguiente: <area shape="poly" coords="180,33,186,42,199,41,203,49,209,49,218,37,224,35,233,36,228,29,231,23,219,18,203,20,189,23,183,30" href=" /> <area shape="poly" coords="235,35,237,44,242,49,234,46,241,56,251,65,257,65,263,64,258, 59,267,56,270,48,278,41, 281,30,281,25,264,27,254,22,242,22,235,23,233,26,232,30" href=" /> <area shape="poly" coords="264,66,275,72,288,81,285,88,296,94,298,85,301,71,305,60,315,57,315, 48,306,44,297,36,291,26,286,24,280,26,265,61" href=" /> <area shape="poly" coords="286,92,281,104,281,109,277,113,276,120,275,127,279,134,289,136,292,144,292,154, 287,159,284,164,288,171, 299,177,309,178,313,188,319,192,319,180,327,172,337,168,337,157,333,151,336,146,342,14 5,349,150,355,149, 355,138,355,132,356,127,358,123,358,117,357,112,361,109,357,102,362,96,371,82,372,70,37 2,61,370,57,354,58, 340,56,327,55,318,50,313,53,307,58,300,76,296,92,287,93" href=" /> <area shape="poly" coords="355,149,361,157,366,152,382,136,398,123,411,121,427,112,443,100,453,90,451,59,4 33,70,420,67,398,69,394,64, 384,56,371,55,370,65,367,88,358,102,359,120,356,135,355,146" href=" /> <area shape="poly" coords="110,46,125,40,147,39,166,37,176,33,183,41,195,42,202,48,212,47,222,38,231, 39,233,38,239,47,234,50,241,58,251,66,263,64,240,64,243,77,240,82,254,84,268,84,279,90,2 83,97,278,107,275,119,273, 126,272,131,263,134,238,123,227,124,214,132,202,142,196,153,191,161,182,170,171,173,16 4,178,158,175,154,168,149, 166,143,163,137,163,132,160,125,160,116,164,103,164,104,151,105,137,99,127,110,123,119, 117,124,107,127,102,121,100, 117,97,117,85,110,85,106,81,105,76,111,69,108,62,103,55" href=" /> <area shape="poly" coords="243,62,254,64,269,69,285,77,289,88,285,93,272,85,265,85,252,84,246,82,244,79,242,69,242,66" href=" /> <area shape="poly" coords="184,170,191,163,199,150,209,141,217,131,227,125,228,137,226,145,225,152,231,15 7,236,168,236,179,226,181, 219,180,212,186,210,179,206,174,193,170" href=" /> <area shape="poly" coords="234,126,257,133,269,133,278,129,289,135,292,153,285,162,284,162,288,171,298,18 1,305,193,297,202,293,210, 304,214,301,224,309,235,314,243,305,246,296,250,296,258,288,259,281,263,268,270,264,27 5,256,271,258,262,251,253, 238,256,225,256,209,257,198,259,189,258,176,249,165,240,170,230,169,224,178,217,176,20 8,168,207,162,202,162,195, 156,190,156,177,165,177,177,173,196,174,206,176,211,186,222,182,234,181,237,170,230,15 5,229,140,229,129" href=" /> <area shape="poly" coords="334,150,347,149,358,151,361,159,353,174,344,188,337,209,341,226,347,237,354,24 0,349,250,337,260,329,269, 322,281,314,279,313,260,313,243,305,228,304,218,303,212,297,206,305,195,302,185,295,17 5,304,179,318,190,320,182, 330,175,337,168,337,158" href=" /> "area shape="poly" coords="266,272,283,268,291,259,299,253,313,247,314,260,315,278,319,283,320,292,319,29 9,306,298,297,301,291,305, 282,298,276,288,275,279, 267,280" Cursosindustriales. Programación HTML Página 23

24 href=" /> "area shape="poly" coords="94,165,109,165,126,163,140,164,153,171,156,185,162,197,168,208,175,211,177,218, 171,227,166,238,157,244, 144,253,147,265,135,263,135,267,127,276,115,270,105,269,99,261,91,260,85,253,84,244,91, 232,93,226,97,220, 90,210,85,199,83,193,92,191,99,188,101,180,99,172,93,167" href=" /> <area shape="poly" coords="98,263,90,268,78,276,74,288,72,302,76,309,92,311,105,317,113,331,119,341,121,35 2, 130,361,148,360,160,352,172,345,185,338,201,338,215,337,236,335,253,335,264,329,271,33 1,280,318,286,313,289,306, 288,300,276,289,275,283,269,277,254,273,256,265,254,255,234,254,208,258,190,259,178,25 3,170,246,163,242, 156,247,147,254,148,260,146,266,137,266,132,273,130,275,118,275,107,270,101,265" href=" /> </map> Esta etiqueta es un poco difícil de usar en modo código, pero los programas de desarrollo Web la tratan con total transparencia. <LI></LI> Esta etiqueta se usa dentro de otra etiqueta para crear puntos de listas. Me adelantaré a las etiquetas para que lo veas: <UL></UL> Esta etiqueta de lista principal, sirve junto a las etiquetas <LI></LI> para representar datos de listas ordenadas con iconos de lista. <OL></OL> Esta etiqueta de lista principal, sirve para que, junto a las etiquetas de lista <LI></LI> se ordenen las listas pero de forma numérica. Habiendo visto las etiquetas de lista, hacemos un ejemplo para que lo entiendas: <html> <head> <title>ejemplo de lista</title></head> <body> ejemplo de Lista convencional <ul> <li>nómina primera:...</li> <li>nómina segunda:...</li> <li>nómina tercera:...</li> </ul> ejemplo de lista ordenada Cursosindustriales. Programación HTML Página 24

25 <ol> <li>nómina de A.</li> <li>nómina de B.</li> <li>nómina de C.</li> </ol> </body> </html> Esta etiqueta se puede anidar junto con otras para conseguir una presentación visual agradable. <MARQUEE></MARQUEE> Esta etiqueta marquesina, muestra un texto que se desplaza desde un lado al otro de la pantalla. Se debe de tener especial cuidado en que el texto que se introduce dentro de esta etiqueta no sea muy grande, pues de lo contrario podría producir un salto de línea automático y el efecto quedaría feo. Esta etiqueta viene acompañada de varios atributos que designarán la velocidad, el color de fondo, que salga de un lado u otro. Son estos los atributos que necesitarás: Align. Que alineará el texto en la etiqueta. Los valores posibles son "center", "left" y "right". Width. Establece el ancho del marquee teórico. Es decir si pones un ancho, el marquee no deberá superar ese ancho. Pero si pones demasiado texto, el marquee empezará a contar desde el ancho que tiene estipulado, pero será grande, pues necesita espacio para mostrar los datos. Height. Establece el alto del marquee. Por lo general no se suele utilizar a menos que desees crear una especie de ventana única para el marquee. Bgcolor. Establece el color de fondo para el marquee. Puedes poner el nombre del color en inglés, o bien poner el color en sí mediante el código hexadecimal propio del color. A la etiqueta marquee, no se la pueden agregar imágenes de fondo. Cursosindustriales. Programación HTML Página 25

26 Behavior. Tiene varios opciones y establece la forma de movimiento del marquee. Por defecto tiene el valor en "scroll" que significa que se mueve infinitamente de un lado hacia el otro. Otros valores son "alternate" que sale de un lado, llega al otro extremo y vuelve; y el valor "slide" que solo sale un lado y llega al extremo una única vez. Direction. Establece la dirección del marquee tanto horizontal como vertical. Puede tomar 4 valores. Por defecto es "left" y "center", así que el otros valores son "right", "up" y "down". Scrollamount. Es la velocidad de desplazamiento del marquee. Está expresado en milisegundos, de la forma que 1000 es la velocidad de una letra por segundo. Scrolldelay. Al igual que el anterior, pero éste retrasa el movimiento de las letras el tiempo estipulado. También se expresa en milisegundos. Loop. Por defecto es indefinido. Es el número de veces que se repite el marquee. Hspace. Es el espacio horizontal que se deja para diferenciarlo de otro elemento que, por ejemplo esté continuo al marquee. Es el espacio vertical de otro elemento. Vspace. <MENU></MENU> Agrega un estilo de formato básico al contenido de esta etiqueta. Cursosindustriales. Programación HTML Página 26

27 <META></META> Esta etiqueta se suele usar para realizar una descripción de la página de cara al servidor y a los buscadores Webs. Se utilizan atributos para su funcionalidad: Establece el tipo de la etiqueta Meta. Name. Por lo general es Keyword (palabra clave) y description (descripción). No tiene una funcionalidad importante, salvo la de establecer el tipo de meta que es. Content. Literalmente contenido, establece el texto que describirá la página o las palabras claves de búsqueda Web. También sirve para establecer los valores de los atributos Id. Http-equiv. Este atributo puede sustituir al atributo name. El servidor analiza el contenido de http-equiv y devuelve un encabezado con información en el protocolo HTML. Un ejemplo de este código es: <meta http-equiv="content type" content="text/html; charset=iso "> Siendo el atributo charset es código de cada país para el acentuado. En España el código iso es <NEXTID/> Es un parámetro que identifica al documento. Se usa en Javascript. Cursosindustriales. Programación HTML Página 27

28 Elimina el salto de línea de todo el documento. Esta etiqueta de formato de texto, sirve para establecer un salto de párrafo. La diferencia con la etiqueta es que, ésta establece un salto de línea. Al igual que casi cualquier etiqueta tiene atributos que asignan funcionalidad a la etiqueta: Align. Este atributo establece la alineación del texto pudiendo coger 3 valores principales: "left" (izquierda), "right" (derecha), justify (justificar) y "center" (centro). El uso de la etiqueta: Este texto está formateado al centro Se puede usar esta etiqueta sola como si fuese una etiqueta para establecer un único cambio de párrafo. <PRE></PRE> Esta etiqueta curiosa sirve para reducir el código que establezcas editando mediante código. Me explico. Cuando en un código haces: <html> <head><title>prueba de texto</title></head> <body> estás en el párrafo 2. estás en el párrafo 4. </body> </html> Cursosindustriales. Programación HTML Página 28

29 Por muchos que realices, solo se tiene en cuenta uno en HTML, si repites esa etiqueta. Si tu deseo es dejar los espacios en blanco que desees, debes de utilizar la etiqueta <PRE></PRE>: <html> <head><title>prueba de texto</title></head> <body> <pre>estás en la línea 1. Estás en la línea 7</pre> </body> </html> Ahora si notas la diferencia: <S></S> Tacha el texto introducido entre la etiqueta. Sirve para dar un efecto de rectificado de texto. Hoy en día es algo tonto. Reduce un punto el tamaño de la fuente establecida por defecto. Igual que la etiqueta pero de mayor efecto visual. Es la más usada en HTML5.0. Cursosindustriales. Programación HTML Página 29

30 Esta etiqueta sirve para establecer subíndices. Se puede poner cualquier carácter alfanumérico como subíndice, pero es más común para los números: El Hz es el símbolo del Herzio Igual que la etiqueta anterior, pero establece un índice, que puede ser cualquier carácter alfanumérico. Es más común para expresar potencias: El número 64 es igual a 88 En este capítulo hemos aprendido algunos comandos necesarios para configurar y diseñar la página Web. En el siguiente capítulo entraremos a estudiar la definición y construcción del color en HTML, el uso de las tablas, y los formularios y su tratamiento, entre otros. Cursosindustriales. Programación HTML Página 30