ESTRUCTURA DE UN DOCUMENTO HTML

Transcripción

1 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

2 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 indexhtml (que está en /media/datos/web) queremos insertar la imagen palasatenea_septjpg, (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_septjpg> 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 indexhtml (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 indexhtml 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_septjpg> Imaginemos ahora que deseamos usar esta misma imagen en la página pag1html, que está en la subcarpeta Pag1, dentro de la carpeta Web En este caso la carpeta de la imagen no está en una 2

3 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: PRINCIPALES ETIQUETAS Tipo y Características de las fuentes <img src=/images/palasatenea_septjpg> 1 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 rojo 2 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: Encabezamientos <font face=arial, size=4, color=blue></font> 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

4 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) <br> Salto de línea (no deja espaciado) <hr> Inserta una línea horizontal Tiene atributos: witdh (longitud), size (grosor), align <b></b> Negrita <i></i> Cursiva <u></u> Subrayado <sub></sub> Subíndice <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_septjpg 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_septjpg alt= Palas Atenea ></center> Se puede cambiar el tamaño de la imagen en pantalla (entre comillas se colocará el tamaño en píxeles): <img src=images/palasatenea_septjpg alt= Palas Atenea width= height= > 4

5 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 y el texto que queramos que aparezca en pantalla: <a href= 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 indexhtml y queremos hacer un hipervínculo a la página pag1html, 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/pag1html>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/pag1html>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= src=/images/palasatenea_septjpg 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

6 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 celdas, en píxeles) Align (alineación de la tabla, entre comillas) Bgcolor (color de fondo Puede aplicarse a toda la tabla, a filas o a celdas) Width (ancho de tabla en píxeles o %) Bordercolor (color del borde) 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 indexhtml 6