Manual HTML 4.0 y CSS.

Transcripción

1 Manual HTML 4.0 y CSS. Autor: Gorka Calleja Urraca.

2 INDICE 1-INTRODUCCIÓN EL LENGUAJE HTML CARACTERES ESPECIALES LOS MÁS USADOS ESTRUCTURA DOCTYPE ESTRUCTURA DIRECTIVA <META> ATRIBUTOS ETIQUETAS <META> MÁS COMUNES REDIRECCIONAMIENTOS A OTRAS PÁGINAS DIRECTIVA <BASE> FORMATO DE PÁRRAFOS ATRIBUTOS Y JUSTIFICADO DE PÁRRAFOS CONTENEDORES O LAYERS ENCABEZADOS ETIQUETAS VARIAS LINEA HORIZONTAL Y EL COLOR EN HTML FORMATO DE TEXTO COLOR, TAMAÑO Y TIPO DE LETRA LISTAS LISTAS DESORDENADAS LISTAS ORDENADAS LISTAS DE DEFINICIÓN ANIDAR LISTAS ENLACES DIRECCIÓN URL ENLACES INTERNOS ENLACES LOCALES IMÁGENES ELECCIÓN DE FORMATO GRÁFICO IMÁGENES COMO ENLACES TABLAS ATRIBUTOS DE <TABLE>...21 INDICE

3 9.2- ATRIBUTOS DE <tr> ATRIBUTOS DE <td> ANIDAR TABLAS FORMULARIOS CAMPOS DE TEXTO TEXTO CORTO TEXTO OCULTO TEXTO LARGO LISTAS DE OPCIONES BOTONES DE RADIO CAJAS DE VALIDACIÓN BOTONES NORMALES BOTONES DE ENVIO Y BORRADO DATOS OCULTOS FRAMES FRAMES ANIDADOS QUITAR EL BORDE Y EL ESPACIO ENTRE FRAMES DIRIGIR LOS ENLACES VALORES DEL ATRIBUTO TARGET ATRIBUTOS DE <FRAMESET> ATRIBUTOS DE <FRAME> SONIDO SONIDO ACTIVADO POR EL USUARIO SONIDO DE FONDO ATRIBUTOS DE <BGSOUND> ATRIBUTOS DE <EMBED> MAPAS ATRIBUTOS DE <AREA> MARQUESINAS ATRIBUTOS HOJAS DE ESTILO <STYLE> ESTILOS MEDIANTE CLASES IDENTIFICADORES JERARQUÍA ARCHIVOS.CSS UNIDADES DE LONGITUD...41 INDICE

4 15.7- PROPIEDADES DE LAS HOJAS DE ESTILO FUENTES COLORES Y FONDOS TEXTO CAJAS DE TEXTO DISCRIMINAR NAVEGADOR ESTILO EN LOS ENLACES OBJETOS LA ETIQUETA <APPLET> ETIQUETA <PARAM> ATRIBUTOS DE <APPLET> ETIQUETA <EMBED> ATRIBUTOS DE <EMBED> ETIQUETA <OBJECT> ATRIBUTOS...45 INDICE

5 1- INTRODUCCIÓN Hyper Text Markup Language, más conocido como HTML es el lenguaje usado por los navegadores para mostrar las páginas webs al usuario. Con HTML podemos utilizar textos, sonidos, imágenes, y lo más importante, enlaces a otras páginas. Este lenguaje surge en principio con fines divulgativos y no se tuvo en cuenta que la web llegara a ser un área de ocio con carácter multimedia, debido a esto, el HTML ha ido necesitando actualizaciones con el paso del tiempo y la introducción de otras tecnologías complementarias como es el caso de CSS y JavaScript. Otro problema al que se enfrenta HTML son los distintos navegadores, los cuales, no interpretan un mismo código de manera unificada. Por lo tanto el creador de una página web (webmáster) ha de verse obligado a comprobar que su página es interpretada correctamente por todos los navegadores (en especial Internet Explorer y Netscape). Una página web es un archivo que contiene código HTML en forma de texto. Estos archivos tienen la extensión.html o.htm. Para la creación de un archivo HTML tan sólo necesitamos un sencillo editor de textos como puede ser el Bloc de notas (notepad) de Windows, o el Vi de Linux. También disponemos de herramientas más especializadas como HTML Builder y Macromedia Dreamweaver, los cuales nos permiten aumentar considerablemente nuestra eficiencia debido a las muchas facilidades que nos ofrecen. Nota del autor: Todos los ejemplos del manual que aparezcan numerados están disponibles en archivo HTML. Puedes conseguirlos descargándolos de nuestra página web: 2- EL LENGUAJE HTML La sintaxis del lenguaje HTML se basa en la denominada etiqueta. La etiqueta tiene dos partes: una apertura y un cierre. <etiqueta> texto afectado </etiqueta> La etiqueta del principio activa la orden y la última (que será la del principio precedida del signo /) la desactiva. No todas las etiquetas tienen principio y final pero esto lo veremos más adelante. Es importante resaltar que las mayúsculas o minúsculas son indiferentes a la hora de escribir las etiquetas. De todas formas, resulta aconsejable el acostumbrarse a escribirlas en minúsculas debido a que otras tecnologías que pueden utilizar nuestro HTML necesitan caracteres en minúsculas. Ejemplo: Las etiquetas <b> y </b> muestran un texto en negrita. El código sería: <b>texto en negrita</b> Resultado: Texto en negrita 2.1- CARACTERES ESPECIALES HTML dispone de un mecanismo que permite que una serie de caracteres raros o exclusivos de un país se vean correctamente en todos los ordenadores del mundo. Cuando queramos poner alguno de estos caracteres en una pagina, tenemos que sustituirlo por su correspondiente código LOS MÁS USADOS Significado Código < signo menor que < > signo mayor que > & signo ampersand & comillas " espacio en blanco ñ ñ minúscula ñ Ñ ñ mayúscula Ñ á a minúscula acentuada á Á a mayúscula acentuada Á é e minúscula acentuada é copyright marca registrada Observamos que para acentuar un carácter tenemos que escribir el signo ampersand (&) seguido del carácter en cuestión (en mayúsculas o minúsculas según corresponda) y terminando con acute;. Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 5 de 48

6 3- ESTRUCTURA 3.1- DOCTYPE El estándar HTML 4.0 exige que todos los ficheros que quieran considerarse documentos HTML, deban tener, al menos, dos elementos: un comentario especial SGML que describe el lenguaje y versión utilizado, y un título. El primer componente (DOCTYPE) indica la versión de HTML en la que está codificado el documento y no es más que una referencia al DTD que describe el lenguaje (HTML 4.0, versión de transición). Aunque es ignorado por la mayoría de los browsers (navegadores), se recomienda su utilización, ya que permite a todo tipo de agentes conocer la versión concreta del lenguaje y poder así sacar el máximo partido de las funcionalidades disponibles. El DOCTYPE es lo primero que se escribe en un documento HTML. Tenemos tres versiones distintas: HTML 4.0 Strict DTD: incluye todos los componentes excepto los frames. La declaración es la siguiente: <!DOCTYPE HTML PUBLIC!-//W3C//DTD HTML 4.0//EN > nada del texto del documento. 3.<body>: Encierra el resto del documento, el contenido. ejemplo01: <HTML> <HEAD> <TITLE>Ejemplo01</TITLE> </HEAD> <BODY> Hola mundo </BODY> </HTML> Guardamos este texto como ejemplo01.html y para poder abrirlo simplemente hacemos doble clic sobre el archivo y se lanzará el navegador que tengamos por defecto: HTML Transitional DTD: incluye todos los componentes de HTML 4.0 Strict más aquellos desaconsejados de versiones anteriores, sin incluir los frames. Es la versión más utilizada aunque no obtenga todas las ventajas que persigue HTML 4.0, tiene un soporte mayor por parte de los browsers. <!DOCTYPE HTML PUBLIC!-//W3C//DTD HTML 4.0 Transitional//EN > HTML Frameset: incluye los componentes del HTML Transitional más los frames. <!DOCTYPE HTML PUBLIC!-//W3C//DTD HTML 4.0 Frameset//EN > Debido a la gran difusión de las nuevas versiones de navegadores cuyo soporte es bastante completo, se recomienda utilizar la versión Strict de HTML 4.0. Sólo se debería usar las otras dos versiones en el caso de que utilicemos frames, o bien, nos enfrentemos a navegadores antiguos. El otro elemento que no puede faltar en un documento HTML es el título. Este componente es el que habitualmente emplean los navegadores para encabezar la ventana en la que se muestra el documento, y que se utiliza para identificar el documento en bookmarks, índices,... El título lo veremos en el siguiente apartado ESTRUCTURA Tres son la etiquetas que describen la estructura general de un documento y dan una información sencilla sobre él. Estas etiquetas no afectan a la apariencia del documento y sólo interpretan y filtran los archivos HTML. 1.: Limitan el documento e indica que se encuentra escrito en este lenguaje. 2.: Especifica el prólogo del resto del archivo. Son pocas las etiquetas que van dentro de ella, destacando la de <title> (título) que será utilizado por los marcadores del navegador e identificará el contenido de la página. Sólo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras etiquetas dentro de él. En head no hay que colocar 3.3- DIRECTIVA <META> Tiene dos usos: contenedor de metainformación sobre el documento, e información adicional, incluidos comandos, relacionada con el protocolo HTTP. Por norma general, se añaden directivas META para dejar en ellas información que pueda identificar al documento y su contenido, información que utilizan aplicaciones externas como buscadores e índices (Yahoo, Google,...). Todos los <META> son insertados entre las secciones y. El orden no es importante ATRIBUTOS name: identifica la información que se va a exportar. content: contenido de la información. http-equiv: es el nombre de un comando HTTP ETIQUETAS <META> MÁS COMUNES Las vamos a clasificar según su atributo name: AUTHOR: Para definir quién construyó la página web: <META NAME="AUTHOR" CONTENT="Su nombre aquí"> COPYRIGHT: Para el copyright: Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 6 de 48

7 <META NAME="COPYRIGHT" CONTENT="Ingrese aquí el nombre de su compañía"> CONTACT_ADDR: Para definir la dirección de correo electrónico que la gente debería usar para hacer contacto con usted: <META NAME="CONTACT_ADDR" CONTENT="Aquí su dirección "> RATING: Para indicar hacia qué tipo de audiencia está orientado su sitio web disponemos de cuatro posibles valores:? general: para todas las edades.? 14 years: para mayores de 14 años.? mature: para adultos.? restricted: para adultos con restricciones. La etiqueta sería: <META NAME="RATING" CONTENT="El Rating aquí"> ROBOT: Cuando un motor de búsqueda visite su página tratará de seguir sus links e indexará cada página que encuentre. Posibles valores:? all: dirá al robot del motor de búsqueda que siga todos los links sobre su página web, e indexe todos los que encuentre.? noindex: para que el robot no indexe esa página. Pero puede seguir los links sobre ella.? nofollow: que indexe esta página pero que no siga los links sobre ella.? none: que no indexe esta página ni siga los links sobre ella. La etiqueta sería: <META NAME="ROBOT" CONTENT="Ingrese el valor aquí"> REVISIT-AFTER: Para indicar a un robot cuando debe regresar e indexar el sítio de nuevo. Los posibles valores pueden ser la cantidad de tiempo que usted quiera: 10 days, 2 months, 1 week,... La etiqueta sería: <META NAME="REVISIT-AFTER" CONTENT="Ingrese el valor aquí"> Ejemplo: <TITLE>Concentración Motera Acelerados</TITLE> <META NAME="keywords" CONTENT="acelerados, concentración, motos, moteros"> <META NAME="description" CONTENT="Información, programa, rutas, fotos... de la Concentración Motera Acelerados 2004."> <META NAME="rating" CONTENT="General"> <META NAME="expires" CONTENT="never"> <META NAME="language" CONTENT="es"> <META NAME="charset" CONTENT="ISO "> <META NAME="distribution" CONTENT="Global"> <META NAME="robots" CONTENT="INDEX,FOLLOW"> <META NAME="revisit-after" CONTENT="7 Days"> <META NAME=" " CONTENT="olivawdaneel@msn.com"> <META NAME="author" CONTENT="Gorka"> REDIRECCIONAMIENTOS A OTRAS PÁGINAS Puedes enviar a los visitantes a una página específica, diferente, al incluir este marcador: <META HTTP-EQUIV="REFRESH" CONTENT= 2 ;URL= tml"> En content, el atributo de valor numérico ( 2 ) indica la cantidad de segundos de pausa antes de cargar el destino, que se encuentra especificado a continuación. De esta manera al cargarse esta página se presentará al visitante durante 2 segundos, dirigiéndose luego a otra_página.html DIRECTIVA <BASE> Sirve para especificar un directorio base para todas las referencias (direcciones URL) relativas del documento. Esta directiva se ha de situar en la cabecera (head) del documento. Mediante el atributo href especificamos la ruta o dirección donde se ha de buscar cualquier página o archivo referido en el documento. Sólo afecta al documento en el que aparece. Por ejemplo, si se apunta a la imagen../imagenes/dibujo.gif, se la buscará en el directorio anterior (superior o previo) al tomado como referencia, es decir, el que contiene el documento. Usando por ejemplo: <base href= > hacemos que, con independencia de donde almacenemos el documento html, el directorio donde va a buscar cualquier referencia relativa va a ser, en nuestro caso, siempre el directorio dirpag. Es decir, a la hora de buscar el archivo dibujo.gif lo buscará en esta ruta: if Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 7 de 48

8 4- FORMATO DE PÁRRAFOS Formatear un texto consiste en definir los párrafos, justificarlos, poner en negrita, en itálica... Para definir los párrafos nos servimos de la etiqueta <p> que introduce un salto y deja una línea en blanco antes de continuar con el resto del documento. Con la etiqueta <br> podemos realizar un salto de linea, puede poner tantas como desee y realizará un salto de línea por cada una de ellas. En esta etiqueta, al igual que sucede en otras tantas, no existe su cierre correspondiente, esto se debe a que un salto de línea no empieza y acaba más adelante sino que sólo tiene presencia en un lugar puntual. Por medio de: <!-- --> <p align="right">texto alineado a la derecha.</p> <p align= "center">texto centrado.</p> </body> podemos insertar comentarios en nuestro código que nos servirán de recordatorios en futuras revisiones del documento. Estos comentarios no se mostrarán a través del navegador ATRIBUTOS Y JUSTIFICADO DE PÁRRAFOS Para justificar un párrafo utilizamos el atributo align. Un atributo es un parámetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma más personal. Los atributos tienen sus valores indicados entre comillas ( ) pero si no los indicamos entre comillas también funcionará en la mayoría de los casos. Eso si, en caso de que el valor del atributo contenga espacios las comillas son obligatorias. De todas maneras, para evitar posibles errores es mejor acostumbrarse a ponerlas siempre. El atributo align puede tener 3 valores: 1. left: texto alineado a la izquierda. 2. right: alineado a la derecha. 3. center: alineado al centro. Para centrar el texto también podemos utilizar la etiqueta <center> seguida del texto que queremos centrar y posteriormente el cierre correspondiente: </center>. ejemplo01: <title>ejemplo01</title> <body> <p>esto es un párrafo, se introduce un salto y deja una línea en blanco antes de continuar con el resto del documento.</p> Vemos que ha dejado un espacio en blanco.<br><br> A través de la etiqueta <br> <br> hacemos un salto de carro. <!-- Esto es un comentario. Los comentarios no son mostrados por el navegador --> <p><center>texto centrado utilizando la etiqueta center.</center></p> <p align="left">texto alineado a la izquierda.</p> 4.2- CONTENEDORES O LAYERS Para cuando tengamos un texto largo y queramos que todos los párrafos estén justificados de alguna manera lo ideal es utilizar la etiqueta <div> denominada contenedor, o comunmente layer (capa). Todo lo que esté incluido dentro de esta etiqueta será alineado tal y como hayamos especificado en el atributo align. Con la versión 4.0 de HTML disponemos también de un nuevo valor para el atributo align, que es justify. Este valor nos permite justificar el texto a ambos márgenes del navegador. ejemplo02: <body> <title>ejemplo02</title> <p>para simplificar el código a la hora de justificar utilizamos la <div align="right"> etiqueta <div>.</p> <p>centrado a la derecha</p> <p>insisto en que está centrado a la derecha</p> </div> <div align="center"> </div> <p>todo lo incluido dentro estará centrado</p> <p>insisto en que está centrado</p> Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 8 de 48

9 <div align="justify"> </div> </body> <p>con el valor "justify" hacemos un justificado a ambos márgenes. A partir de HTML 4.0</p> 4.4- ETIQUETAS VARIAS Disponemos de etiquetas muy útiles como las siguientes: <blockquote>: nos permite indentar un texto. ejemplo04: 4.3- ENCABEZADOS <blockquote>esto está indentado<br>como bien podemos apreciar.<br></blockquote>y esto no está indentado. Los encabezados (headers) son etiquetas que formatean un texto como un titular asignando un tamaño de letra y texto en negrita. Hay seis tipos de encabezados. ejemplo03: <body> <title>ejemplo03</title> <p>vamos a ver los 6 tipos de encabezados:<br> </p> </body> <h1>encabezado de nivel 1</h1> <h2>encabezado de nivel 2</h2> <h3>encabezado de nivel 3</h3> <h4>encabezado de nivel 4</h4> <h5>encabezado de nivel 5</h5> <h6>encabezado de nivel 6</h6> <cite>: para textos que representen citas de autor. ejemplo05: <cite>tanto va el cantaro a la fuente<br>que al final aprende a ir sólo.<br>pedro Reyes.</cite> Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 9 de 48

10 <var>: para representar variables de un código. ejemplo08: La variable <var>x</var> <code>: para representar código. ejemplo06: <p>para cuando queramos mostrar código utilizamos este formato<br>a través de la etiqueta <code>:<code>public int x=0;</code></p> <samp>: para representar literales. ejemplo09: esto es un <samp>literal</samp> <kbd>: para representar texto que ha de teclear el usuario. ejemplo07: El usuario debe teclear: <kbd>supercalifragilisticoespialidoso</kbd> <abbrr>: para representar abreviaturas. Es una etiqueta perteneciente a la versión 4.0 de HTML. ejemplo10: una abreviarura como <abbr>http</abbr> o <abbr>www</abbr> Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 10 de 48

11 <pre>: permite respetar la forma escrita en el código html, a la hora de mostrar la página en el navegador. ejemplo11: <pre>la etiqueta <pre> permite en la que respetar la forma <address>: para escribir direcciones correspondientes a calles... ejemplo13: Ejemplo: <address>c/sierpe Nº1 <br> Valladolid<br> </address> se edito el documento html.</pre> 4.5- LINEA HORIZONTAL Y EL COLOR EN HTML <tt>: para escribir con tipo de letra de paso fijo (estilo teletipo). ejemplo12: Ejemplo: <tt>tipo de letra de paso fijo (estilo teletipo) utilizando la etiqueta <tt>.</tt> Para insertar una línea horizontal tenemos que utilizar la etiqueta <hr>. El resultado final difiere respecto a grosor entre verlo en Netscape y verlo en Internet Explorer. La etiqueta <hr> presenta los siguientes atributos: 1. color: para establecer el color de la línea. Los valores para los colores más frecuentes se pueden asignar a través de su nombre en inglés: Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 11 de 48

12 Nombre aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow Color 5- FORMATO DE TEXTO Y en el caso de querer otra combinación de color debemos utilizar valores RGB. RGB son las abreviaruras de Red (rojo), Green (verde) y Blue (azul), es decir, que para conseguir otro color debemos mezclar cantidades de verde, rojo y azul. Esas cantidades se han de indicar en numeración hexadecimal: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Los valores los daremos en este formato: #RRGGBB donde cada valor de color puede crecer desde 00 a FF. Vamos a ver de que etiquetas disponemos para poder poner el texto en negrita, itálica... <strong>: por medio de esta etiqueta resaltamos el texto incluido en ella. No es lo mismo que poner en negrita, aunque el resultado sea muy similar en algunos navegadores. ejemplo01: Ejemplo: <strong>texto resaltado utilizando la etiqueta <strong></strong><br> Ejemplo: Naranja #ff8000 Verde turquesa # Azul oscuro # size: número entero de pixels o tanto por ciento para asignar el grosor de la línea. 3. width: número de pixels o tanto por ciento para asignar la anchura, es decir, la longitud de lado a lado del navegador. ejemplo14: <p>podemos modificar su color, tamaño y anchura: <hr color="red"> <b>: para poner el texto en negrita. ejemplo02: Ejemplo: <b>texto en negrita utilizando la etiqueta <b></b> <hr size=6> <hr width=50%> <hr noshade> </p> Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 12 de 48

13 <em>: texto enfatizado. ejemplo03: Ejemplo: <em>texto enfatizado utilizando la etiqueta <em></em> <u>: texto subrayado. <i>: texto tachado. <blink>: sólo funciona en el navegador Netscape. Sirve para hacer que el texto parpadee. ejemplo05: <u>texto subrayado utilizando la etiqueta <u></u><br> <s>texto tachado </s> utilizando la etiqueta <s&gt<br> <i>: texto en itálica. ejemplo04: Ejemplo: <i>texto en italic utilizando la etiqueta <i></i> <sup>: para hacer superíndices. <sub>: para hacer subíndices. <big>: para aumentar el tamaño de la letra. <small>: para disminuir el tamaño de la letra. ejemplo06: <p>letra superíndice utilizando <sup>: E = mc²</p> <p>letra subíndice utilizando <sub>: a_{i, j} = Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 13 de 48

14 b_{i, j}+ 1</p> <big>aumentamos el tamaño de la letra por medio de <big>.</big><br> <small>disminuimos el tamaño utilizando <small>.</small><br> mediante valores RGB. ejemplo07: Ejemplo: <font face="comic Sans MS,arial,verdana">Este texto tiene otra tipografía</font><br> <font size="+1">aumentamos 1 nivel mediante +1</font><br> <font size="5">este texto es más grande</font><br> <font color ="red">color en rojo</font><br> <font color ="#339966">Color en verde turquesa</font> 5.1- COLOR, TAMAÑO Y TIPO DE LETRA Este tipo de formatos son controlados actualmente mediante hojas de estilo, las cuales veremos más adelante. La forma clásica de definir el color, tamaño y tipo del letra de un texto determinado es a través de la etiqueta <font> y su cierre correspondiente. Dentro de esta etiqueta especificaremos los atributos correspondientes a cada uno de los parámetros que queramos definir: face: este atributo define el tipo de letra. Hay que tener cuidado porque el usuario puede que no disponga del tipo de letra que nosotros establecemos con lo que el navegador mostrará la fuente que exista por defecto. Para subsanar este problema dentro del atributo pueden seleccionarse varios tipos de letra separados por comas, de tal manera que si el navegador no dispone del primer tipo del letra pasará al segundo y así sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto. size: define el tamaño de letra. El tamaño se puede asignar de manera absoluta (número entero de 1 a 7 como máximo) o de manera relativa con respecto al texto mostrado precedentemente (estableciendo el número de niveles que queramos aumentar o disminuir por medio de un signo + o -). De manera relativa si definimos nuestro atributo como size= +2 lo que haremos es aumentar en dos niveles el tamaño de letra, es decir, si anteriormente estábamos escribiendo en un nivel 3, pasaremos ahora a un nivel 5. El tamaño que veremos en pantalla dependerá de la definición y del tamaño de fuente elegido por el usuario en el navegador. Debido a esto se suelen emplear las hojas de estilo en cascada (las cuales veremos más adelante) para llevar a cabo una prefijación. color: este atributo define el color del texto. Su valor puede ser asignado utilizando el nombre del color en inglés para los colores más frecuentes, o bien, Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 14 de 48

15 6- LISTAS Las listas sirven para citar, numerar y definir elementos. También son utilizadas para desplazar el comienzo de línea hacia la derecha. Tenemos tres tipos de listas: 6.1- LISTAS DESORDENADAS <li type="square">"square"</li> </ul> <ul compact type="square"> <li>elemento 1</li> <li>elemento 2</li> </ul> Son delimitadas mediante la etiqueta <ul> (unordered list) y la correspondiente etiqueta de cierre </ul>. Y cada uno de los elementos de la lista se establece a través de una etiqueta <li>, la cual no hace falta cerrar. ejemplo01: <ul> <li>la etiqueta <UL> nos permite presentar listas de <br>elementos sin orden alguno.</li> <li>cada elemento de la lista irá normalmente<br>precedido por un círculo.</li> </ul> 6.2- LISTAS ORDENADAS. Son listas en las cuales los elementos aparecen numerados. La viñeta de las listas desordenadas se sustituye por ordenaciones (alfabéticas o numéricas). La numeración se establece automáticamente. Para ello utilizamos la etiqueta <ol> (ordered list) y su correspondiente etiqueta de cierre. Y para cada elemento seguimos utilizando la etiqueta <li>. ejemplo03: <ol> Dentro de la etiqueta de apertura de la lista, <ul>, podemos utilizar el atributo type para cambiar el tipo de viñeta de todos los elementos de la lista. En el caso de que queramos cambiar solamente el de un elemento en especial utilizamos el atributo type sobre la etiqueta de elemento, es decir, sobre <li>. Los valores de type pueden ser: circle: la viñeta es un círculo negro. <li>primer elemento.</li> <li>segundo elemento.</li> <li>tercer elemento.</li> </ol> disc: la viñeta es una circunferencia negra. square: la viñeta es un cuadrado. También disponemos del atributo compact, el cual nos permite compactar el espacio existente entre el texto y la viñeta. Este atributo no requiere valores. ejemplo02: <ul> <li type="disc">"disc"</li> <li type="circle">"circle"</li> Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 15 de 48

16 Utilizando el atributo type podemos especificar el tipo de numeración empleado eligiendo entre números (1, 2, 3...), letras (a, b, c...) y sus mayúsculas (A, B, C...) y números romanos en mayúsculas (I, II, III...) y minúsculas (i, ii, iii...). Los valores son: 1: para ordenar por números. ejemplo04: <ol type= "1"> <li>primer elemento.</li> <li>segundo elemento.</li> <li>tercer elemento.</li> </ol> i: por números romanos. I: por números romanos en mayúsculas. ejemplo06: <ol type= "i"> a: por letras. A: por letras mayúsculas. ejemplo05: <li>primer elemento.</li> <li>segundo elemento.</li> <li>tercer elemento.</li> </ol> <ol type= "I"> <li>primer elemento.</li> <li>segundo elemento.</li> <li>tercer elemento.</li> </ol> <ol type= "a"> <li>primer elemento.</li> <li>segundo elemento.</li> <li>tercer elemento.</li> </ol> <ol type= "A"> <li>primer elemento.</li> <li>segundo elemento.</li> <li>tercer elemento.</li> </ol> Para indicar el número a partir del cual queremos empezar a contar utilizamos el atributo start de la etiqueta <ol>. El valor que se le ha de asignar es un número entero tanto para los números como para las letras o los números romanos, ya que el navegador se encarga de hacer la traducción del número al carácter correspondiente. Por defecto el valor es 1. ejemplo07: Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 16 de 48

17 <ol start="8" type="i"> <li>he puesto que start sea igual a 8.</li> <li>vemos que luego continua por sí sólo.</li> <li>demostrado.</li> </ol> elementos seguido de su definición correspondiente. La etiqueta principal es<dl> (definition list), y las etiquetas de elemento y su definición son <dt> (definition term) y <dd> (definition definition) respectivamente. La etiqueta <dd> desplaza la línea hacia la izquierda, por este motivo este tipo de etiqueta es utilizado para desplazar texto. ejemplo09: <dl> </dl> <dt>primer elemento<dd>esta es la definición del primer elemento. <dt>segundo elemento<dd>esta es la definición del segundo elemento. Para alterar la numeración de la lista a partir de un ítem, utilizamos el atributo value de la etiqueta del elemento en cuestión, la etiqueta <li>. ejemplo08: <ol> <li>primer elemento.</li> </ol> <li>segundo elemento.</li> <li value="15"><strong>utilizamos value="15".</strong></li> <li>automáticamente continúa la numeración a partir del nuevo valor.</li> 6.4- ANIDAR LISTAS Podemos crear listas dentro de otras listas, es decir, anidar listas. ejemplo10: <dl> <dt>españa:<dd>equipos españoles de fútbol LISTAS DE DEFINICIÓN. En este tipo de lista se muestra cada uno de los s <ul> <li>real Madrid</li> <ol> <li value="7"> Raúl</li> <li>figo</li> </ol> <li>valladolid</li> </ul> <dt>alemania:<dd>equipo alemanes de Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 17 de 48

18 ol. </dl> fútb <ul> <li>bayer de Munich</li> <li>borusia Dortmund</li> </ul> 7- ENLACES HTML es un lenguaje para hipertexto, es decir, enlaces. Un enlace o link es una zona de texto o imagen que si son seleccionados nos trasladan a otro documento de hipertexto o a otra posición dentro del documento actual. Para crear un enlace hay que utilizar la etiqueta <a>. Todo lo que encerremos entre <a> y </a>, ya sea texto o imágenes, será considerado como enlace y sufrirá dos modificaciones: 1. Se visualizará de manera distinta en el navegador: el texto aparecerá subrayado y de un color distinto y las imágenes estarán rodeadas por un borde del mismo color que el del texto del enlace. Este color dependerá de la configuración que tenga el usuario en su navegador. 2. Al pulsar sobre el enlace, seremos enviados hacia donde apunte el enlace. El enlace en la página normalmente aparecerá subrayado y en color azul, y al deslizar el puntero del ratón sobre él cambiará su forma original transformándose por regla general en una mano con el dedo índice extendido. Para indicarle la dirección utilizamos el atributo href y le asignamos la dirección entre comillas dobles ( ). La dirección estará en formato URL (Uniform Resource Locator). La sintaxis general de un enlace es: <a href= dirección >contenido</a> Siendo el contenido un texto o imagen que será la parte activa de la página donde deberemos pulsar para acceder al enlace DIRECCIÓN URL A través de una URL podemos indicar tanto una dirección de Internet como un servicio que tenga el servidor al que corresponde la dirección. El formato es: servicio://maquina:puerto/ruta/fichero/fi chero@usuario El servicio puede ser: http: para páginas web. https: es una innovación sobre el anterior, que nos deja acceder a servidores que nos ofrecen el uso de técnicas de encriptación para proteger los datos que intercambiemos con él de terceras personas. ftp: para transmitir ficheros desde servidores de ftp anónimo, y utilizando podemos acceder a servidores privados. mailto: para poder mandar un mensaje . news: para acceder a foros de discusión. Para ello se ha de indicar el servidor y el grupo. telnet: nos permite conectarnos a otro ordenador y entrar en ellos como si nuestro ordenador fuese una terminal del mismo. La dirección de la máquina puede ser indicada también a través de su dirección IP. La ruta es una serie de directorios separados por la barra / donde indicamos el camino hacia el archivo Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 18 de 48

19 que vamos a utilizar. Cuando queremos acceder a un fichero situado en la misma máquina que la página web que estamos creando podemos utilizar rutas relativas: <!--Este es el ancla: --> <a name="abajo"></a> ruta_relativa/fichero En la ruta relativa podremos utilizar los dos puntos (..) para acceder al directorio padre o comenzar con la barra diagonal (/) para acceder a una ruta absoluta dentro de nuestro ordenador. ejemplo01: <a href="http// a Google.com</a><br> Enlace ftp: <a href="ftp://anonymous@ftp.rediris.es">ftp.redi ris.es</a><br> Enlace con una dirección <a href="mailto:gorka@usuarios.retecal.es">gorka@ usuarios.retecal.es</a><br> Enlace con news: <a href="news://news.ibernet.es/es.comp.demos">ne ws</a><br> También podemos acceder a anclas situadas en documentos remotos. Para ello añadimos el nombre del ancla al URL: <a href="enlaces.html#abajo">ir abajo</a> 7.3- ENLACES LOCALES A través de estos enlaces relacionamos los distintos documentos html que componen nuestro sitio web. Para ello en la dirección escribimos la ruta y el nombre del archivo html al que queremos enlazar ENLACES INTERNOS Son los enlaces que apuntan a un lugar diferente dentro de la misma página. Para crearlos necesitamos, aparte del enlace origen, un segundo enlace que será colocado en el destino y que comunmente se denomina ancla. A este enlace destino le hemos de asignar un nombre que le identifique y que en nuestro ejemplo es abajo : <a name="abajo"></a> De la misma manera podemos hacer enlaces a todo tipo de archivos como podría ser un archivo zip. En este tipo de enlaces al pinchar en él el navegador descargará el fichero, no sin antes preguntarnos sobre qué queremos hacer con el archivo: abrirlo o guardarlo en disco. ejemplo03: Enlace con otra página web: <a href="ejemplo01.html">ir al Ejemplo 10</a><br> Enlace con un archivo comprimido (archivo zip): <a href="archivos/ejemplo.zip">archivo.zip</a> Este ancla lo situaremos dentro del código justo en el lugar al que queremos movernos al pulsar en el enlace. El ancla permanecerá invisible para el usuario. ejemplo02: Enlace para ir a la parte de abajo de este documento: <a href="#abajo">ir abajo</a> <!-- se enlaza al ancla de mas abajo--> <!-- Aqui deberíamos de meter texto de relleno para poder comprobar que nos movemos hacia el ancla --> Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 19 de 48

20 height=100 width=160 alt="ordenador saltando"><br> <img src="../imagenes/happysmclr.gif" border="5"> <img src="../imagenes/happysmclr.gif" hspace="75" vspace="50"> 8- IMÁGENES Para hacer que aparezcan imágenes en nuestro documento utilizamos la etiqueta <img> (image) y el atributo src (source) para indicar la ruta. La etiqueta <img> no tiene cierre. Es decir: <img src= ruta a la imagen > Vamos a ver algunos atributos: alt Dentro de las comillas de este atributo colocaremos una breve descripción de la imagen, de tal forma que este comentario se mostrará en lugar de la imagen en el caso de que el navegador no pueda cargar la imagen o durante el tiempo que tarde en cargarla. Una vez cargada la imagen si colocamos el puntero del ratón sobre ella también se nos mostrará la descripción escrita en este atributo. height y width Definen la altura (height) y anchura (width) en pixels de la imagen. border Define el tamaño en pixels del cuadro que rodea a la imagen. En caso de que no queramos que aparezca el borde, damos el valor cero ( 0 ). atributos vspace y hspace Sirven para indicar el espacio libre vertical (vspace) y horizontal (hspace), en pixeles, que tiene que colocarse entre la imagen y los otros elementos que la rodean, como texto, imágenes... lowsrc Con este atributo indicamos un archivo de la imagen que está en baja resolución, de tal forma que cuando el navegador detecta este atributo primero descarga y muestra la imagen de baja resolución y luego descarga la imagen con la resolución correcta. ejemplo01: <img src="../imagenes/happysmclr.gif" alt="ordenador saltando"><br> <img src="../imagenes/happysmclr.gif" align Mediante este atributo alineamos la imagen con respecto al texto. Este atributo puede tener estos valores:? top: coloca el punto más alto de la imagen coincidiendo con el más alto de la línea de texto actual.? middle: alinea el punto medio (en altura) de la imagen con la base del texto.? bottom: alinea el punto más bajo de la imagen con la base del texto.? left: coloca la imagen a la izquierda del texto.? right: a la derecha del texto. Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes extensiones de la etiqueta <br>: ejemplo02: <dl>? <br clear =left> Busca el primer margen libre (clear) a la izquierda.? <br clear = right> Busca el primer margen libre a la derecha.? <br clear =all> Busca el primer margen libre a ambos lados. Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 20 de 48