HTML (HyperText Markup Language) es el código en el que se
Anuncio
HTML HTML (HyperText Markup Language) es el código en el que se escriben los documentos de hipertexto leídos por los navegadores web, de tal forma que éstos reciben indicaciones sobre cómo debe presentarse el documento en pantalla. Para escribir un documento html tan sólo se necesita el bloc de notas (es texto plano, sin formato) y un navegador donde visualizar el resultado. Es necesario que el documento se grabe con extensión htm o html. El navegador interpreta cómo debe visualizar el documento a través de las etiquetas, que se escriben encerradas entre los símbolos <>. La mayoría van en parejas, de tal forma que se requieren dos etiquetas, una de apertura (por ejemplo, <b>) y otra de cierre (</b>). Las etiquetas pueden completarse con atributos, parámetros que definen las propiedades o comportamiento de las etiquetas. Se ponen siempre en la de apertura. Por ejemplo, para definir en azul el color de una fuente se escribiría: <font color=blue>...</font> ESTRUCTURA DE UN DOCUMENTO HTML Todo documento html debe tener al menos tres etiquetas: • <html>...</html> Indica que el texto entre las dos etiquetas es código html. • <head>...</head> Encabezado. Tiene información sobre la página. En concreto, entre estas dos etiquetas se puede poner el título de la página, que aparecerá en la barra del navegador, entre las etiquetas <title>...</title> • <body>...</body> Parte principal de la página web. Aquí se encuentra lo que aparece en la pantalla del navegador. Por lo tanto, la estructura típica de un documento html será: <html> <head> <title> . . . </title> </head> <body> . . . </body> </html> Es fundamental acordarse de escribir la etiqueta de cierre cuando (y donde) sea necesario. No hacerlo puede provocar errores. 1 REFERENCIAS ABSOLUTAS Y RELATIVAS Un sitio web es un conjunto más o menos complejo de páginas web relacionas entre sí. Es muy habitual que usemos las mismas imágenes varias veces, que pueden estar archivadas en carpetas diferentes a aquella en la que está la página donde haya que insertarla. También puede ocurrir que hagamos hipervínculos a páginas del sitio que se graben en otra carpeta. Cuando el usuario crea su sitio web, a su vez crea una estructura de carpetas en la unidad de disco donde la esté almacenando. En el caso de la imagen, podemos ver que el sitio web está en la ruta /media/Datos/Web. Sin embargo, cuando la página es colgada en un servidor y es leída por un usuario, éste no tiene por qué tener esta misma estructura en su ordenador. Por ejemplo, si dentro de la página index.html (que está en /media/Datos/Web) queremos insertar la imagen palasatenea_sept.jpg, (grabada a su vez en /media/Datos/Web/Images), tendremos que usar la etiqueta correspondiente, indicando el nombre y ubicación del archivo. Si usamos una referencia absoluta escribiremos toda la ruta que nos lleva a la imagen: <img src=/media/Datos/Web/Images/palasatenea_sept.jpg> Si guardamos el documento y vemos el resultado en nuestro ordenador, comprobaremos que la foto de la diosa Palas Atenea se ha cargado perfectamente, con el aspecto de la imagen de la derecha. Sin embargo, si grabamos en un soporte de almacenamiento nuestro sitio web para verlo en otro ordenador, lo más probable es que, en vez de la imagen de la diosa, obtengamos algo tan patético como o similar. Lo que ha ocurrido, es que al usar referencias absolutas, el navegador busca la imagen exactamente en la ruta especificada. Al grabar en otro soporte, la carpeta /media/Datos probablemente no exista, por lo que no encuentra la imagen donde le hemos indicado que la busque. Para solucionar este problema, lo que se hace es usar referencias relativas, en las que las rutas no se indican referidas a la unidad de almacenamiento, sino a la ubicación de la página en la que estemos. En nuestro caso, dado que estamos trabajando con la página index.html (dentro de la capeta Web), y queremos mostrar una imagen que está en la carpeta Images (que a su vez está dentro de Web), tomamos como carpeta de referencia Web, ya que en ella está la página index.html. Como la imagen está en una subcarpeta dentro de la carpeta de referencia (Images dentro de Web) sólo tenemos que escribir la ruta que hay que tomar para llegar a ella desde Web: <img src=Images/palasatenea_sept.jpg> Imaginemos ahora que deseamos usar esta misma imagen en la página pag1.html, que está en la subcarpeta Pag1, dentro de la carpeta Web. En este caso la carpeta de la imagen no está en una 2 subcarpeta, sino que primero debemos salir a la carpeta Web para entrar después en la carpeta Images. Cuando queremos salir desde una subcarpeta a la carpeta “contenedora”, usamos ../, y una vez que nos situemos en la carpeta Web, podemos acceder a la subcarpeta Images como antes: <img src=../Images/palasatenea_sept.jpg>1 PRINCIPALES ETIQUETAS Tipo y Características de las fuentes Para modificar el tipo y características de las fuentes usaremos la etiqueta <font>...</font>, con sus correspondientes atributos: Color <font color=>...</font> Después del igual escribiremos el color. Admite Black, White, Grey, Yellow, Red, Green, Blue, Brown, Orange, Fuchsia, Silver, Lime, Navy, Teal, Aqua, Maroon. El color por defecto es negro. También se puede usar el código RGB en hexadecimal, precedido por #. Por ejemplo, podemos escribir con caracteres rojos de dos formas: <font color=Red>...</font> <font color=#FF0000>...</font> En cualquiera de los dos casos, todo lo que se escriba entre las etiquetas de apertura y cierre aparecerá en rojo2. Tamaño <font size=n>...</font> Donde n es un número entero entre 1 y 7. Si no se pone, el valor por defecto es 3. Tipo de letra <font face=>...</font> Por defecto es Times. Si queremos escribir un texto en Arial, tamaño 4 y en azul tendremos que combinar los tres atributos separados por comas: <font face=Arial, size=4, color=blue>...</font> Encabezamientos Existen tamaños de letra especiales para encabezamientos. Se usa la etiqueta <hn>...</hn>, donde n es un número entero entre 1 (<h1>...</h1>, el mayor) y 6 (<h6>...</h6>, el menor) Alineación de párrafos Por defecto, los párrafos se alinean a la izquierda. Si queremos cambiarlo, usaremos la etiqueta: <div align=x>...</div> Donde x puede ser left, right, center o justify. También se puede usar <p align=x>...</p> 1 Hay que usar ../ cada vez que queramos subir una carpeta. Si en vez de una, tuviésemos que “escalar” dos carpetas en la estructura del sitio web, habría que escribir ../../ 2 Si se quiere usar como color el amarillo Simpson, su código RGB es FFD90F (255/217/15 en decimal) 3 O incluso, si no estamos tratando con un párrafo entero, podemos prescindir de <div align> y escribir directamente <center>...</center> Cuerpo La etiqueta <body>...</body>, que recordemos marca lo que aparecerá en el navegador, también posee atributos, que pueden ser combinados: <body bgcolor= >...</body> Cambia el color de fondo de la página (por defecto es blanco) <body leftmargin = >...</body> Pone un margen a la izquierda (en píxeles) <body rightmargin = >...</body> Pone un margen a la derecha (en píxeles) <body background = >...</body> Inserta una imagen de fondo (en mosaico) Otras etiquetas interesantes <p> Salto de párrafo (deja espaciado) <i>...</i> Cursiva <br> Salto de línea (no deja espaciado) <u>...</u> Subrayado <hr> Inserta una línea horizontal. Tiene atributos: witdh <sub>...</sub> Subíndice (longitud), size (grosor), align <b>...</b> Negrita <sup>...</sup> Superíndice Caracteres especiales. Dependiendo del navegador que usemos, puede ocurrir que no se reconozcan acentos, eñes, y otros caracteres propios del castellano. En ese caso, no queda más remedio que usar la siguiente ortografía: &aacute á &oacute ó &iquest ¿ &eacute é &uacute ú &iexcl ¡ &iacute í &ntilde ñ Imágenes Para insertar una imagen en la página, debemos usar la etiqueta que ya hemos visto antes, indicando dónde debe buscarla (ésta es una de las etiquetas que no tiene cierre). Además, podemos hacer que aparezca un texto si ponemos el ratón sobre la imagen, usando el atributo alt=”Texto” (aunque no funciona siempre en todos los navegadores) <img src=Images/palasatenea_sept.jpg alt=”Palas Atenea”> No olvidemos que las etiquetas pueden combinarse, por lo que si queremos que la imagen aparezca en el centro de la pantalla, deberemos escribir: <center><img src=Images/palasatenea_sept.jpg alt=”Palas Atenea”></center> Se puede cambiar el tamaño de la imagen en pantalla (entre comillas se colocará el tamaño ebn píxeles): <img src=Images/palasatenea_sept.jpg alt=”Palas Atenea” width=”” height=””> 4 Hipervínculos Si queremos insertar un hipervínculo, tenemos que usar la etiqueta <a href=>...</a> Después del igual se escribe o bien la dirección URL de la página web externa a la que queramos ir o a otra página de nuestro propio sitio web. Entre las etiquetas pondremos el texto o la imagen que aparecerá en pantalla como enlace. Imaginemos que queremos hacer un enlace que nos lleve al museo de ciencias de Londres. En ese caso, debemos escribir la URL completa (incluyendo http://) y el texto que queramos que aparezca en pantalla: <a href=http://www.sciencemuseum.org.uk>Museo de Ciencias de Londres</a> En este caso, sobre el texto “Museo de Ciencias de Londres” el puntero del ratón se transformará en un dedo cuando lo pasemos sobre él, indicando que existe un hipervínculo. Volvamos a la estructura de nuestro sitio web mostrada en la página 2. Imaginemos que estamos en la página index.html y queremos hacer un hipervínculo a la página pag1.html, que está en la carpeta pag1. Como la página de destino está en una carpeta diferente a la de origen, debemos indicar la ruta a seguir, pero recordando que hay que utilizar una referencia relativa: <a href=Pag1/Pag1.html>P&aacutegina 1</a> Si queremos abrir en una pestaña nueva, debemos usar el atributo target=”_blank”. Así, la etiqueta anterior quedaría como: <a target=”_blank” href=Pag1/Pag1.html>P&aacutegina 1</a> También podemos hacer un hipervínculo sobre una fotografía. En ese caso, en lugar del texto, usamos la etiqueta que inserta una fotografía. <a href=http://es.wikipedia.org/wiki/Templo_de_Atenea_Nik&eacute><img src=../Images/palasatenea_sept.jpg alt="Templo de Atenea Nik&eacute"></a> Podemos cambiar los colores que se asignan por defecto a los enlaces visitados y no visitados (diferentes tonos de azul). Hay que incluir un atributo en la etiqueta body: <body link=color deseado> para los enlaces no visitados y <body vlink=color deseado> para los visitados. Tablas Una de las grandes limitaciones del código HTML es que lo que escribamos aparecerá en pantalla o bien todo seguido o bien unas cosas debajo de otras, si hemos introducido líneas. Para organizar la información en pantalla, podemos usar tablas. En ese caso, hay que ser muy cuidadoso para poner la información que queramos con el formato que deseemos en la celda adecuada. Para insertar una tabla, tenemos que usar tres etiquetas diferentes: <table>...</table>, para definir la tabla, <tr> para definir las fila y <td> para las celdas de cada fila. Supongamos que queremos insertar una tabla de 2 filas y 3 columnas. Toda ella deberá estar incluida entre las etiquetas <table> y </table>. Luego procederemos a definir las filas y posteriormente las celdas de cada fila (las columnas). Dado que la etiqueta <tr> no tiene cierre, cada vez que se escriba una se añadirá una fila nueva. Lo mismo ocurre con <td>. El código necesario 5 quedará entonces como: <table> <tr><td>fila1-celda1<td>fila1-celda2<td> fila1-celda3 <tr><td>fila2-celda1<td>fila2-celda2<td> fila2-celda3 </table> El resultado que aparecería en el navegador sería como el de la imagen de abajo. Obviamente, no es una tabla especialmente estética. Como se puede ver, no tiene bordes (lo que por otra parte puede ser útil si uno no quiere que parezca que hay una tabla) ni ningún tipo de formato. Para ello las etiquetas de la tabla admiten atributos. Si se ponen en la etiqueta <table> afectarán a todas las celdas, en <tr> a toda la fila y a <td> sólo a la celda correspondiente. Las más usadas son: Border (grosor del borde) Cellspacing (espaciado entre Width (ancho de tabla en celdas, en píxeles) píxeles o %) Align (alineación de la tabla, Bgcolor (color de fondo. Puede Bordercolor (color del borde) entre comillas) aplicarse a toda la tabla, a filas o a celdas) Y para las celdas se puede usar además height y width para el alto y ancho de las mismas, respectivamente. Como ejemplo, modifiquemos la tabla anterior para que el grosor del borde sea 3, ocupe el 50% de la pantalla y esté centrada. Además, haremos que la primera fila tenga fondo gris y la segunda verde. El código quedaría: <table border=3, width=50%, align="center", bordercolor=blue> <tr bgcolor=grey><td>fila1-celda1<td>fila1-celda2<td> fila1-celda3 <tr bgcolor=green><td>fila2-celda1<td>fila2-celda2<td> fila2-celda3 </table> Y el resultado en pantalla: Dentro de cada celda se pueden insertar imágenes, hipervínculos, etc, así como variar todos los formatos de texto como hemos visto antes. Listas Podemos incluir también listas, tanto numeradas (<ul>...</ul>) como no numeradas (<ol>...</ol>) Para terminar, recordar que si anidamos etiquetas unas de entro de otras, debemos cerrarlas en el orden inverso al que se han abierto. Es conveniente que la página de inicio de un sitio web se llame index.html 6 7
