Podemos decir, por lo tanto, que el HTML es el lenguaje usado por los navegadores para mostrar las páginas web al usuario.

Transcripción

1 Qué es el HTML? HTML es el lenguaje con el que se escriben las páginas web. Las páginas web pueden ser vistas por el usuario mediante un tipo de aplicación llamada navegador. Podemos decir, por lo tanto, que el HTML es el lenguaje usado por los navegadores para mostrar las páginas web al usuario. Un fichero HTML contiene el texto más una serie de códigos que permiten dar formato a la página en el navegador como, por ejemplo, distribuir en columnas, poner caracteres en negrita, asignar colores, rodear una imagen con texto... Inconvenientes del HTML Inconveniente del HTML: diversidad de navegadores presentes en el mercado (Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari...) los cuales no son capaces de interpretar un mismo código de una manera unificada. Esto obliga al webmáster a, una vez creada su página, comprobar que ésta puede ser leída satisfactoriamente por todos los navegadores o, al menos, los más utilizados. Qué necesito para programar una web? HTML es únicamente texto, lo que significa que bastará simplemente con el BLOC DE NOTAS (en Windows) para crear una página web. Existen editores específicos que hacen la tarea más sencilla, pero es de suma importancia asentar unos conocimientos básicos para familiarizarnos lo antes posible con el HTML. Y por qué no usar un editor de HTML como Dreamweaver o FrontPage, que facilitan mucho más la tarea? A la pregunta sobre si es necesario hoy en día dominar, o al menos tener una idea de cómo está estructurado el lenguaje html la respuesta es rotundamente SÍ. Francamente, es muy conveniente tener una idea básica. Igual que cuando conducimos un coche, sin necesidad de ser unos diplomados en mecánica, al menos sabemos qué son los componentes principales del coche y para qué sirven... 1

2 Resulta, pues, de suma importancia aprender HTML sin utilizar estas herramientas "más potentes", que lo que hacen es generar código de forma automática. Una vez asentadas las bases sobre el lenguaje procederemos a utilizar estos editores más "avanzados". Los editores HTML permiten diseñar una página de la misma forma que compondríamos un fichero con Word, pudiendo colocar imágenes, utilizar negritas, cursivas... Algunas de las diferencias entre programar con un editor de HTML o haciéndolo "de la forma tradicional" son las siguientes: HTML a.- Se domina con mayor precisión el código y queda mucho más limpio, sin elementos innecesarios. Si se domina bien nunca se tendrán problemas para realizar cualquier cosa que se nos ocurra. El programador domina a la máquina. b.- Su aprendizaje es más complejo, más lento y, a medida que se va avanzando, la complejidad va creciendo. EDITOR HTML a.- El código es de peor calidad, incluso llegando a tener errores más o menos visibles. La máquina domina el trabajo y al programador. b.- Manejo y aprendizaje rápido. Sin embargo, a medida que se profundiza, llega un punto en que se combinan ambas técnicas hasta acabar dominando las dos. Características del lenguaje HTML HTML es un lenguaje de marcas orientado a la publicación de documentos en Internet. La mayoría de las marcas son semánticas. Es un lenguaje extensible, al que se le pueden añadir nuevas características, marcas y funciones, dependiendo de la experiencia y la habilidad del programador. Los documentos HTML están formados por una serie de bloques de texto (titulares, párrafos, listas...). La interpretación de estas entidades se deja al navegador. HTML es un lenguaje estructurado. HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determina la forma en la que debe aparecer el texto en el navegador, así como las imágenes y demás elementos. 2

3 Anatomía de una página web Una página web es superficialmente parecida a cualquier otro documento: un texto, unas imágenes, todo compuesto de una determinada manera. Qué sucede con las imágenes y otros añadidos que la página web, aparentemente, "contiene"? Éstos son ficheros adicionales que NO están dentro del fichero html; están enlazados con un código que indica al navegador qué imagen debe mostrarse, dónde está, sus dimensiones, si es o no un enlace... Viendo el código de una página web Aunque signifique adelantarse a los acontecimientos, es interesante señalar que con una simple acción podemos ver el código fuente de las páginas, es decir, ver cómo están hechas, ver su "esqueleto". Para ello, bastará con abrir una página en el navegador y tras hacer click con el botón derecho escoger la opción "Ver código fuente". Algo tan sencillo como esto será una pista valiosísima para saber la calidad de una web. 3

4 Etiquetas (o tags) HTML Archivos HTML Un lenguaje de etiquetas es un conjunto de palabras o caracteres que se colocan junto al texto de un documento para especificar una propiedad del mismo. Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor que (< >), y algunas tienen atributos que pueden tomar algún valor. Cada etiqueta tiene un significado: <b> significa negrita, <p> significa párrafo, <a> definirá un enlace... Cómo se aplican las etiquetas? En general las etiquetas se aplicarán de dos formas especiales: 1.- Se abren y se cierran, encerrando entre ellas un contenido. Por ejemplo: <b>esto sería un texto en negrita</b> que se vería en su navegador web como Esto sería un texto en negrita. 2.- No pueden abrirse y cerrarse, como <hr /> que se vería en el navegador web como una línea horizontal. Existen otras etiquetas que no tienen su correspondiente de cierre, como <img /> para las imágenes, o <br /> para los saltos de línea; las veremos más adelante. Esto ocurre porque un salto de línea o una imagen no empiezan y acaban más adelante sino que sólo tienen presencia en un lugar puntual. Cada elemento de un documento HTML consta de una etiqueta de comienzo, un bloque de texto y una etiqueta de fin con el siguiente formato: <etiqueta> bloque de texto </etiqueta> Así que la página web, vista con un editor de texto, contiene una mezcla de texto normal y una serie de códigos. Por ejemplo, un párrafo se encierra entre las etiquetas o tags <p> y </p>. 4

5 Atributos de los TAGS Muchos elementos tienen atributos que definen propiedades del elemento: <etiqueta atributo="valor"> bloque de texto </etiqueta> Un atributo no es más que un parámetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta (o TAG) de una forma personalizada. El valor de los atributos deberá ir entre comillas. Estructuración e indentación del código Las etiquetas tienen que seguir un orden piramidal; las primeras que se abren son las últimas que se cierran. <etiqueta 1> <etiqueta 2> <etiqueta 3> Contenido </etiqueta 3> </etiqueta 2> </etiqueta 1> Sin embargo, existen reglas estructurales que indican dónde pueden y no pueden ir los elementos. Tenemos el ejemplo de los títulos, que son independientes entre ellos, no pudiendo contenerse unos a otros. El siguiente código sería incorrecto: <h1> </h1> <h2> </h2> Contenido 5

6 HTML: Estructura básica de un fichero Todo documento HTML deberá estar delimitado por las etiquetas <html> y </html>. Además deberá definirse: 1.- Encabezado (<head> </head>): contendrá información de caracter informativo y no se mostrará en el navegador). Entre otros: Título (<title> </title>) Palabras clave para los buscadores Referencias a archivos externos 2.- Cuerpo (<body> </body>): será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas (como las que hemos visto anteriormente). El resultado será, pues, un documento que seguirá la siguiente estructura (recordar respetar la indentación del texto: permitirá una mejor comprensión del código y un óptimo mantenimiento posterior): <html> <head> Contenido que no se mostrará: título, información para buscadores... </head> <body> Contenido que se mostrará: textos, tablas, listas, imágenes... </body> </html> 6

7 Primer archivo HTML Una vez vistas las características que debe cumplir un fichero HTML y la estructura que debe seguir, ya podemos proceder a crear nuestro primer archivo HTML. Supongamos que queremos crear una página que deba cumplir los siguientes requisitos: 1.- Título: Bienvenidos al curso de diseño 2.- Contenido: Esta es mi primera página en HTML Realizaremos los siguientes pasos: 1.- Abrir el bloc de notas: Inicio - Todos los programas - Accesorios - Bloc de Notas 2.- Escribir todas las etiquetas necesarias y obligatorias que debe contener todo fichero HTML. Es muy importante anidar los tags para que el código sea legible y siga una estructura ordenada. Lo ideal es, para cada nivel de indentación, un nivel de tabulación. El resultado de nuestro fichero debería quedar de la siguiente forma: <html> <head> <title>bienvenidos al curso de diseño</title> </head> <body> Esta es mi primera página en HTML </body> </html> 3.- Guardar el archivo en formato HTML (Archivo - Guardar como...). Bastará con seleccionar dónde almacenar el fichero y guardarlo con el nombre primer-ejemplo.html. 4.- Acceder a la ruta donde se ha almacenado el fichero y abrirlo con el navegador. El resultado será algo así, dependiendo del navegador: 7

8 Posibles problemas con la extensión de archivos HTML y Windows En ocasiones el Bloc de Notas puede ser que no almacene el contenido en formato HTML y lo guarde como fichero de texto (extensión txt). Para conseguir tener el control de las extensiones de los ficheros procederemos de la siguiente manera: Mi PC - Ver - Opciones de Carpeta - Ver - deseleccionar la opción "Ocultar extensiones para los tipos de archivos conocidos" Recomendaciones sobre el nombre de los ficheros HTML Es aconsejable que cada archivo lleve asociado un nombre que haga referencia al contenido que se quiere mostrar (primer-ejemplo.html). Además, para separar palabras es aconsejable el uso del guión medio (-) y no el guión bajo (_). En capítulos posteriores se explicará el por qué. Por otra parte, tampoco se usarán ni acentos, ni ñ, ni caracteres especiales. 8

9 Formato de párrafos en HTML Texto Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos, introducir viñetas, numeraciones o bien poner en negrita, itálica... Párrafos (<p> y </p>) y saltos de línea (<br />) Cada párrafo va definido entre las etiquetas <p> y </p>. Para insertar un salto de línea, lo haremos con la etiqueta simple <br />. La diferencia entre ambos es que br hace un cambio de línea mientras que p inserta una línea en blanco. Es necesario aclarar que insertar un salto de línea cuando se esté creando el código no querrá decir que el navegador lo muestre como tal. Véase el ejemplo; supongamos que se escribe esto en el Bloc de Notas: <p>esto es un simple ejemplo sin saltos de línea</p> Se vería en el navegador de la siguiente forma: Esto es un simple ejemplo sin saltos de línea Si quisiéramos mostrarlo con saltos de línea el código debería ser: <p>esto es un <br />simple<br />ejemplo CON saltos de línea</p> Y el resultado en el navegador, ahora sí: Esto es un simple ejemplo con saltos de línea Justificación de párrafos Los párrafos pueden justificarse a la izquierda, centro o derecha. Para ello deberemos definir el atributo align dentro de la etiqueta <p> especificando dicha justificación en el interior de la etiqueta por medio de un atributo align. 9

10 Justificación a la derecha (align="right") Ejemplo: <p align="right">ejemplo de justificación a la derecha</p>. El resultado en el navegador sería: Justificación al centro (align="center") Ejemplo de justificación a la derecha Ejemplo: <p align="center">ejemplo de justificación al centro</p>. El resultado en el navegador sería: Ejemplo de justificación al centro Justificación a la izquierda (align="left") Ejemplo: <p align="left">ejemplo de justificación a la izquierda</p>. El resultado en el navegador sería: Ejemplo de justificación a la derecha El valor de los atributos deberá ir entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left. 10

11 CASO: Múltiples párrafos con un mismo formato Supongamos que queremos alinear 5 párrafos seguidos a la derecha. Tendremos dos opciones: Alinear cada uno de ellos con su correspondiente atributo (right) <p align="right">párrafo 1</p> <p align="right">párrafo 2</p> <p align="right">párrafo 3</p> <p align="right">párrafo 4</p> <p align="right">párrafo 5</p> Utilizar la etiqueta <div>: de esta manera conseguiremos simplificar nuestro código y evitar introducir continuamente el atributo align sobre cada una de nuestros párrafos: <div align="right"> <p>párrafo 1</p> <p>párrafo 2</p> <p>párrafo 3</p> <p>párrafo 4</p> <p>párrafo 5</p> </div> PRÁCTICA 1: Confeccionar una página que muestre en un párrafo datos referentes a tus estudios y en otro párrafo tu nombre y mail PRÁCTICA 2: Queremos construir una página que tenga, por este orden: 2 Párrafos centrados 3 Párrafos alineados a la derecha Un salto de línea triple 1 párrafo alineado a la izquierda 11

12 Encabezados Las cabeceras fueron creadas para representar con tamaño adecuado los títulos y/o subtítulos de una página. Estos encabezados o cabeceras representan mediante una H (de cabecera - header en inglés) más un número del uno al seis dependiendo de la importancia dentro de nuestro contenido. Las cabeceras son, pues, las siguientes: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, siendo 1 la cabecera más relevante y 6 la que menos. Las cabeceras toman un rol importante en el posicionamiento web, pues cada header representa una importancia dentro de nuestro contenido. Según los estándares web, debe definirse únicamente un título H1 por cada página. Tal y como se comentó en capítulos anteriores, un encabezado no puede estar incluido dentro de otro; deben ser independientes. Ejemplos Un encabezado h1 se definará de la siguiente forma: <h1> Ejemplo de título h1 </h1> Ejemplo de h1 a h6 Combinando encabezados y párrafos El atributo align El atributo align funciona igual que para los párrafos. De esta manera, si quisiéramos alinear un encabezado h1 en el centro, por ejemplo, el tag quedaría de la siguiente manera: <h1 align="center"> Título de ejemplo </h1> 12

13 PRÁCTICA1: Confeccionar una página que contenga 1 título de primer nivel <h1> y luego 2 títulos de nivel <h2>. Definir un párrafo para cada título de segundo nivel. PRÁCTICA2: Confeccionar el titular de un periódico con título de nivel 1 y título "Diario online". Luego definir dos títulos de segundo nivel con los textos "Noticias políticas" y "Noticias deportivas". Para la sección de política definir el titular de tercer nivel "resultado elecciones europeas" y para el apartado de deporte el titular "últimos fichajes" (también de nivel 3). Incluir un párrafo para cada una de las secciones de nivel 3. Al final de la página mostrar un título de cuarto nivel con tu nombre. 13

14 Formateando textos En este capítulo aprenderemos las etiquetas básicas para dar estilos negrita, cursiva, subrayado y tachado estandarizado a nuestros textos. Lamentablemente el estilo de fuente aplicado mediante HTML quedó obsoleto luego de la aparición de CSS, siendo reemplazado por las siguientes propiedades: <b> </b>, reemplazado por la propiedad CSS font-weight:bold (negrita); <i> </i>, reemplazado por la propiedad CSS font-style:italic (itálica o cursiva); <u> </u>, reemplazado por la propiedad CSS text-decoration:underline (subrayado); <s> </s>, reemplazado por la propiedad CSS text-decoration:line-through (tachado); HTML se utilizará para estructurar el contenido mientras que CSS aplicará formatos (colores, estilos...). En próximos capítulos profundizaremos sobre las hojas de estilo. Caso especial, la etiqueta negrita (<b>) Ésta es la única etiqueta que se sigue utilizando en el lenguaje HTML. El motivo es para informar a los principales buscadores de la importancia de esta palabra en el contenido del documento. Recuerda que para dar estilos al texto HTML cumpliendo los estándares usaremos las hojas de estilo (CSS). 14

15 Separador de contenido (<hr />) El separador de contenidos, más que una etiqueta única, es una herramienta útil para ordenar y estructurar contenidos del sitio cuando son muy extensos. La etiqueta muestra una franja horizontal que imprime una línea divisora. Se representa mediante <hr />. Supongamos que esto es la primera parte <hr /> Y ésta es la segunda Se vería así: Supongamos que esto es la primera parte Y ésta es la segunda Colores y tipos de fuente Como hemos comentado en el apartado anterior, para aplicar estilos lo más óptimo es el uso de las hojas de estilo. Sin embargo, daremos una pincelada sobre cómo hacerlo directamente desde HTML. La etiqueta <font> <font> es una etiqueta obsoleta reemplazada por las hojas de estilo. Es común encontrarnos páginas cuyo código aún las incluyen. No es erróneo, pero su uso implicará no cumplir los estándares. Dicha etiqueta incluye atributos como "face" (para especificar el tipo de fuente), "size" (para el tamaño) o color. Como el HTML es un lenguaje sólo para estructurar textos y no para un estilo visual adecuado, se ha eliminado, al igual que otras etiquetas y/o atributos que tienen relación con el aspecto visual de una página web. Véase el siguiente ejemplo: <font face="arial" size="12px" color="#0088aa">texto CON FORMATO</font> 15

16 El resultado sería el siguiente: TEXTO CON FORMATO Subíndicies <sub> y superíndices <sup> El subíndice es una letra, número o signo que se coloca a la derecha y en la parte inferior de un símbolo matemático, químico u otro. El texto irá entre las etiquetas _y. Por otra parte, el superíndice es un número o signo que se coloca en el extremo superior derecho de una palabra o número como indicación de elevación a potencia u otro dato. Se hará mediante las etiquetas ^y. El agua está formada por H₂O. En la tierra hay unos km³ de este compuesto químico. El agua está formada por H2O. En la tierra hay unos km3 de este compuesto químico. 16

17 Listas Qué es una lista? Una lista es un conjunto de datos y/o información ordenados verticalmente. Esta información puede presentarse de 3 maneras: en listas desordenadas, ordenadas y de definición. Las listas son utilizadas para citar, numerar y definir. Listas desordenadas Las listas desordenadas son también las más usadas. Se delimitan por las etiquetas <ul> y </ul> (UL = Unordered List), y cada uno de los atributos se citará mediante la etiqueta <li> y </li> (LI = List Item). Este tipo de listas no siguen ningún orden lógico. Un ejemplo sería el siguiente: <h1>países del mundo</h1> <ul> <li>australia</li> </ul> <li>españa</li> <li>brasil</li> El resultado puede verse aquí. 17

18 Listas dentro de listas (SUBLISTAS) Una anidación de listas consiste en crear la misma estructura de una lista (ordenada o desordenada) dentro de un ítem de lista del primer nivel. Esto quiere decir que integraremos una etiqueta <ul> con sus respectivos ítems de listas dentro de una etiqueta <li>. Podemos crear tantos niveles como queramos siguiendo bien la estructura lógica de las listas, como en el siguiente ejemplo. <h1>países del mundo</h1> <ul> <li>australia</li> <li>españa <ul> </ul> </li> <li>brasil</li> <li>zaragoza</li> <li>sevilla</li> <li>lleida</li> </ul> Así lo mostrará el navegador: 18

19 El atributo TYPE para listas desordenadas Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura <ul> (<ul type="tipo de viñeta">), si queremos que el estilo sea válido para toda la lista,o dentro le la etiqueta <li> (<li type="tipo de viñeta">) si queremos hacerlo específico de un solo elemento. A continuación se definen los posibles valores de TYPE para listas desordenadas: circle disc (es el valor que se toma por defecto) square Vamos a ver un ejemplo de lista con un cuadrado en lugar de la clásica viñeta redondeada. Además, en el último elemento colocaremos un círculo. Para ello vamos a colocar el atributo type en la etiqueta <ul>, con lo que afectará a todos los elementos de la lista: <ul type="square"> <li>elemento 1</li> <li>elemento 2</li> <li>elemento 3</li> <li type="circle">elemento 4</li> </ul> El resultado será el siguiente: Elemento 1 Elemento 2 Elemento 3 o Elemento 4 PRÁCTICA: Confeccionar una página HTML que contenga una lista no ordenada con cuatro lenguajes de programación populares. Agregar al principio un título de segundo nivel. 19

20 Listas ordenadas Las lista ordenadas se utilizan para seguir un orden lógico. Estas listas se delimitarán por <ol> y </ol> (OL = Ordered List). Los tags para definir los items no variarán de las listas ordenadas (<li> y </li>). Un ejemplo sería el siguiente: <h1>lista de países con más población</h1> <ol> <li>china</li> <li>india</li> <li>ee.uu</li> </ol> El resultado puede verse aquí: Listas dentro de listas (SUBLISTAS) El concepto es el mismo que para las listas desordenadas: <h1>lista de países con más población</h1> <ol> <li>china</li> <li>india <ol> <li>damán</li> <li>pondicheri</li> <li>orisa</li> </ol> </li> <li>brasil</li> </ol> Así lo mostrará el navegador: 20

21 Combinando listas ordenadas y desordenadas Es posible combinar listas ordenadas y no ordenadas sin ningún tipo de impedimento: <h1>lista de la compra</h1> <ol> <li>leche</li> </ol> <li>frutas <ul> </ul> </li> <li>carne y pescado</li> <li>manzana</li> <li>pera</li> <li>melocotón</li> Clica aquí para ver el resultado en el navegador: PRÁCTICA: Crea un documento cuyo resultado sea el siguiente: 21

22 El atributo TYPE para listas ordenadas Las listas ordenadas no sólo se pueden ordenar con números. También se pueden utilizar letras y numeración romana tanto en mayúsculas como minúsculas. Para esto se utiliza el atributo TYPE del elemento <ol> con los siguientes valores, entrecomillados: type="1" : Para listas ordenadas con números (1, 2, 3...). Es el valor que se toma por defecto. type="a" : Para listas ordenadas con letras mayúsculas (A, B, C...) type="a" : Para listas ordenadas con letras minúsculas (a, b, c...) type="i" : Para listas ordenadas con numeración romana (I, II, III, IV, V...) type="i" : Para listas ordenadas con numeración romana minúscula (i, ii, iii, iv, v...) El formato será el siguiente: <ol type="a">...</ol> <ol type="a">...</ol> <ol type="i">...</ol> <ol type="i">...</ol> 22

23 El ejemplo muestra listas con los diferentes valores que puede tomar el atributo TYPE. El atributo START para listas ordenadas Puede que en algún caso deseemos comenzar nuestra enumeración por un número o letra que no tiene por qué ser necesariamente el primero de todos. Para solventar esta situación, podemos utilizar un segundo atributo, start, que tendrá como valor un número. Este número, que por defecto es 1, corresponde al valor a partir del cual comenzamos a definir nuestra lista. Para el caso de las letras o los números romanos, el navegador se encarga de hacer la traducción del número a la letra correspondiente. Véanse los siguientes ejemplos: 23

24 Caso 1: <ol start="4">...</ol> Caso 2: <ol type="a" start="3">...</ol> Caso 3: <ol type="i" start="4">...</ol> Caso 4: <ol type="i" start="9">...</ol> Caso 1: lista numerada, empezando por 4 (recordar que el atributo type por defecto es la numeracion común). Caso 2: lista alfabética, empezando por C. Caso 3: lista románica en minúsculas, empezando por IV. Caso 4: lista románica en mayúsculas, empezando por IX. El resultado puede verse aquí: 24

25 PRÁCTICA: Crea un documento que tenga un resultado como el siguiente: 25

26 Listas de definición Cada elemento es presentado junto con su definición, como si de un diccionario se tratase. Estas listas se delimitan por <dl> y </dl> (definition list). La etiquetas del elemento y su definición son <dt> (definition term) y <dd> (definition definition) respectivamente. Véase el ejemplo: <h1>diccionario de la RAE</h1> <dl> <dt>animal</dt> <dd>ser orgánico que vive, siente y se mueve por su propio impulso</dd> </dl> <dt>persona</dt> <dd>perteneciente al hombre, propio de él</dd> Así lo mostrará el navegador: PRÁCTICA: Confeccionar una lista de definición con 3 conceptos relacionados con "programas para Windows" y, para cada uno de ellos, hacer una breve descripción. 26

27 Caracteres especiales Caracteres especiales Una página web ha de poder verse independientemente del país desde donde se esté recibiendo la visita. Cada región utiliza un conjunto de caracteres distintos y, para solventar este problema, HTML nos ofrece una serie de caracteres para que cualquier contenido pueda verse desde cualquier parte del mundo. Además, existen ciertos caracteres en HTML que no pueden mostrarse directamente para que no se creen conflictos, como pueden ser '<' o '>', ya que entrarían en conflicto con los TAGS HTML. Los más habituales son los siguientes: & se utilizará para imprimir el carácter & < se utilizará para imprimir el carácter <. (lt = "Less Than" o "menor que") > se utilizará para imprimir el carácter >. (gt = "Greater Than" o "mayor que") Aunque existen muchos más caracteres no imprimibles (acentos, ñ, letras griegas), los citados anteriormente son los más comunes. PRÁCTICA: Crea un documento que tenga un resultado como el siguiente: Me encanta aprender el <HTML> & estandarizado para todos los navegadores e incluso... teléfonos móviles 27

28 Vínculos Vínculos: qué son? Un vínculo es una conexión desde un recurso web a otro. Aunque es un concepto simple, el vínculo ha sido una de las principales fuerzas que ha hecho posible el éxito de la Web. Para colocar un enlace se usarán las etiquetas <a> y </a>. El atributo href Dentro de la etiqueta de apertura deberemos especificar el destino del enlace mediante el atributo href. La sintaxis sería la siguiente: <a href="destino" atributo="valor"...> texto o imagen </A> El texto o imagen Será la parte que deberemos pulsar para acceder al enlace. El destino será a la página o archivo a la que se accederá. El atributo target La atributo target especificará en qué ventana se va abrir el enlace. Los valores para target pueden ser los siguientes: target = "_self" : El nuevo documento se abrirá en la misma ventana. Es el valor que se tomará por defecto. target = "_blank" : Fuerza que el documento referenciado por el enlace sea mostrado en una nueva ventana del navegador. target = "_parent" : Usado para frames (obsoleto) Este valor provoca que el documento sea mostrado en el FRAMESET padre del frame actual. target = "_top" : Usado para frames (obsoleto). El documento solicitado se cargará en la pantalla actual, ocupando toda la ventana y destruyendo la estructura de frames anterior. 28

29 Tal y comoo se ha comentado en anteriores sesiones, el uso de frames está anticuado y no es óptimo a la hora de indexar en buscadores. Por lo tanto, únicamente deberá recordarsee el valor "_blank" (puesto que si no se dice lo contrario se aplicará "_self"" por defecto). El resultado del siguiente ejemplo sería el mismo para ambos casos misma página en que nos encontramos): (abrir el destino en la <a href="pagina-destino.html" ">Click aquí para abrir en la misma página</a> <a href="pagina-destino.html" target="_self">click aquí para abrir en la misma página< /a> Y el resultado sería el siguiente: Click aquí para abrir en la misma página 29

30 El atributo title Antes de continuar y, para no crear confusiones, debe aclararse que este atributo no tiene nada que ver con el tag title que se define en la cabecera (que vimos aquí). Mediante esta propiedad podrá indicarse un mensaje explicativo sobre el destino del enlace. Este mensaje aparecerá cuando el puntero del ratón se posicione sobre el vínculo. Supongamos que queramos crear un enlace que cumpla las siguientes condiciones: 1.- Texto para el enlace: "Ir a Google" 2.- Dirección de destino: Texto al situar el mouse encima del enlace: "Click para abrir en nueva ventana" 4.- El vínculo deberá abrirse en una nueva página. La solución sería: <a href= title="click para abrir en nueva ventana" target="_blank">ir a Google</a> Y el resultado: Ir a Google 30

31 Tipos de enlaces Los vínculos o enlaces pueden clasificarse en función de su destino (clic sobre cada uno de ellos para ver su funcionamiento): 1.- Enlaces internos: se dirigen a otras partes dentro de la misma página (son vínculos dentro de una misma página). 2.- Enlaces locales: se dirigen a otras páginas del mismo sitio web. 3.- Enlaces remotos: dirigidos hacia páginas de otros sitios web. 4.- Enlaces a archivos. Enlaces internos Los enlaces internos son aquellos que apuntan a un lugar dentro de la misma página. De esta forma, el visitante podrá navegar de forma rápida y acceder rápidamente a las diferentes secciones de la misma. Se utilizan cuando una misma página es tan extensa que es difícil acceder con facilidad a sus contenidos (Wikipedia es un ejemplo). Para crear un vínculo de este tipo es necesario, aparte del enlace de origen propiamente dicho, un segundo enlace que será colocado en el destino. A modo de ejemplo: 1.- Será necesario fijar el punto de la página al cual va a ir el enlace (destino). Para ello se usará la siguiente etiqueta: <a name="enlaces-internos"> </a> 2.- Además deberá definirse el punto (origen) que nos lleve a ese destino ya creado: <a href="#enlaces-internos">ir abajo</a> El corchete (#) indica al navegador que el enlace apunta a una sección/párrafo/parte de la misma página. Estos vínculos son poco utilizados: es más óptimo mostrar la información justa en cada una de las páginas (mejorando así los tiempos de carga y evitando condensar la información en un solo archivo). 31

32 Enlaces locales (a una página del mismo sitio web) Este tipo de enlaces permiten crear vínculos entre páginas del mismo sitio. La sintaxis no diferirá de lo ya explicado hasta el momento: <a href="ruta-destino"> texto o imagen </a> ruta-destino será una página/imagen/archivo que estará ubicado en nuestro servidor. La estructura de todos los archivos que conforman el sitio web estará jerarquizada en una serie de carpetas: una para las páginas HTML, otra para las imágenes, otra para los archivos Javascript, otra con archivos de configuración... Ejemplo 1 El siguiente ejemplo muestra la estructura de carpetas para el sitio Supóngase que nos encontramos en la página: y consideremos los siguientes ejemplos: 1.- Ir a la página 'listas.html': <a href="listas.html"> Click para ir a las listas </a> 2.- Ir a la página 'ejemplo1.html': <a href="ejemplos/ejemplo1.html"> Ver el ejemplo </a> 3.- Ir a la página 'index.html' de la carpeta 'otros': <a href=".../otros/index.html"> Ir a otros </a> 1.- Si la página destino se encuentra en la misma carpeta que la página origen (parrafos.html) bastará con utilizar el nombre directamente. 32