UNIDAD 1 – DISEÑO, EDICIÓN Y GESTIÓN DE PÁGINAS WEB (I)
ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML
Los documentos HTML son básicamente documentos de texto plano (sin formatear), con las extensiones .htm o .html, por este motivo pueden ser creados y modificados por cualquier editor de texto simple, como puede ser el bloc de notas. Para facilitar la programación utilizaremos un editor WYSIWYG como Notepad++. Este tipo de documentos son visualizados por medio de un navegador.
El principio esencial del lenguaje HTML es el uso de las etiquetas (tags). Funcionan de la siguiente manera:
<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.
Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente.
Lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML>:
<HTML> [Todo el documento] </HTML>
Un documento HTML en sí está dividido en dos zonas principales:
- El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>
- El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>
Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal del navegador que es utilizado para visualizar el documento HTML, principalmente la información encontrada en el encabezamiento es el título del documento, comprendido entre las etiquetas <TITLE> y </TITLE>.
Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.)
Por tanto, la estructura de un documento HTML queda de esta manera:
<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
[Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>
EMPEZANDO A CONSTRUIR UNA PÁGINA HTML
2.1.- Metadatos básicos
Para indicar que se trata de un documento en HTML 5, y así poder utilizar todas las oportunidades que nos proporciona esta última versión del lenguaje, añadiremos la siguiente línea al comienzo del documento:
<!DOCTYPE html>
Además, para poder mostrar todos los caracteres que empleamos en castellano (acentos, letra ‘ñ’, etc.), incluiremos la siguiente línea dentro de la parte del HEAD:
<meta charset=»utf-8″>
2.2.- Formato de párrafos
Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que éste se acomoda a ella, sin que tengamos que pulsar el retorno del carro. Si queremos separar el texto en distintos párrafos debemos usar la etiqueta <P></P>. Su atributo align permitirá alinear el párrafo (left/right/center). La alineación por defecto de cualquier texto es a la izquierda.
El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1.
Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER> (no la soportan todos los navegadores, aunque sí la mayoría de ellos). Nos centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc.
También tenemos los separadores, que se consiguen con la etiqueta <HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal. Podemos modificar propiedades de la línea con los atributos:
align: alineación (right, left, center)
width: anchura (en % o en píxeles)
size: altura (grosor) de la línea (en píxeles)
EJEMPLO:
<HTML>
<HEAD>
<TITLE> Mi pagina en el Web – 1 </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Primera Pagina </CENTER> </H1>
<HR>
Esta es mi primera pagina, aunque todavía es muy sencilla. Como el
lenguaje HTML no es difícil, pronto estaré en condiciones de hacer
cosas más interesantes.
<P> Aquí va un segundo párrafo.
</BODY>
</HTML>
Una etiqueta puede estar anidada dentro de otra. En el ejemplo anterior cómo lo está la etiqueta <CENTER> dentro de la etiqueta <H1>.
Si queremos separar los párrafos, o cualquier otra cosa, pero sin dejar una línea en blanco, usamos una etiqueta parecida <BR> (break, o romper). Tampoco tiene etiqueta de cierre.
Al escribir el texto, si ponemos más de un espacio en blanco entre dos palabras observamos que el navegador sólo reconoce uno de ellos. Si queremos forzarle a que lo haga, debemos poner el código « » (non-breaking space).
Para destacar alguna parte del texto se pueden usar:
<B> y </B> para poner algo en negrita (bold).
<I> y </I> para poner algo en cursiva (italic).
A menudo nos interesará presentar las cosas en forma de listas. Hay varios tipos de listas, pero básicamente veremos dos:
- Listas desordenadas (no numeradas)
- Listas ordenadas (numeradas)
Las listas desordenadas (Unordered Lists) sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Su estructura es la siguiente:
<UL>
<LI> Un elemento
<LI> Otro elemento
<LI> Otro más
<LI> etc.
</UL>
Las listas ordenadas (Ordered Lists) sirven para presentar elementos en un orden determinado. Su estructura es muy similar a la anterior. La diferencia estriba en que en el resultado aparecerá automáticamente un número correlativo para cada elemento.
<OL>
<LI> Primer Elemento
<LI> Segundo Elemento
<LI> Tercer Elemento
<LI> etc.
</OL>
2.3.- Comentarios en el código
A veces es muy útil escribir comentarios en el documento HTML sobre el código que escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en pantalla.
Esto se consigue encerrando dichos comentarios entre estos dos símbolos: <!– y –>
Mejorando la página
3.1.- Fondo de la página
Podemos establecer un color mediante el atributo BGCOLOR de la etiqueta <BODY> (situada al principio del documento), de la siguiente manera:
<BODY BGCOLOR="#XXYYZZ">
| XX | Es un número indicativo de la cantidad de color rojo |
| YY | Es un número indicativo de la cantidad de color verde |
| ZZ | Es un número indicativo de la cantidad de color azul |
Estos números están en numeración hexadecimal. Esta numeración se caracteriza por tener 16 dígitos (en lugar de los diez de la numeración decimal habitual). Estos dígito son: 0 1 2 3 4 5 6 7 8 9 A B C D E F
Es decir, que en nuestro caso, el número menor es el 00 y el mayor el FF. Así, por ejemplo, el color rojo es el #FF0000, porque tiene el máximo de rojo y cero de los otro dos colores. Los colores primarios son:
| #FF0000 | Rojo |
| #00FF00 | Verde |
| #0000FF | Azul |
Otros colores son:
| #FFFFFF | Blanco |
| #000000 | Negro |
| #FFFF00 | Amarillo |
Para hacer un color más oscuro, hay que reducir el número de su componente, dejando los otros dos invariables. Así, el rojo #FF0000 se puede hacer más oscuro con #AA0000, o aún más oscuro con #550000.
Para establecer algunos colores también podemos emplear su nombre en inglés (ej: red, black, white …)
El fondo de una página puede mostrar, además de un color, una imagen. Esta imagen, por defecto, se repite por toda la página si su tamaño es inferior al de ésta:
<BODY BACKGROUND="IMAGEN\imagen.xxx">
Para indicar el archivo tendremos que poner todo el camino relativo de la imagen.
3.2.- Texto
Las propiedades de una parte del texto se pueden modificar mediante la etiqueta FONT, especificando sus atributos:
face: nombre de la fuente
color: color de la fuente
size: tamaño
Por ejemplo:
<FONT COLOR="#FF1122"> Este texto es de color FF1122 </FONT>
También podemos aplicar un color a todo el texto de una página empleamos el atributo text de la etiqueta body:
<BODY TEXT="#FF0000">
Podemos resaltar el texto empleando diferentes etiquetas, entre otras podemos señalar las siguientes:
<b>: negrita
<i>: cursiva
<u>: subrayado
<big>: aumenta el tamaño de la fuente
<small>: disminuye el tamaño de la fuente
<b> En negrita </b>
3.3.- Imágenes
La etiqueta que nos sirve para incluir imágenes en nuestras páginas web es:
<IMG SRC="imagen.gif">
Con el atributo SRC (image source, fuente de la imagen) se indica el archivo (dirección relativa) que se quiere cargar
Dentro de la etiqueta se pueden añadir otros atributos, como ALT:
<IMG SRC="imagen.gif" ALT="descripción">
En el atributo ALT se introduce una descripción de la imagen que puede verse al pasar el ratón por encima de ella o mostrarse en lugar de la imagen, si ésta no puede cargarse.
Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes, pues una imagen grande supone un archivo grande, y esto puede resultar en un tiempo excesivo de carga.
La imagen la podemos alinear con respecto a los elementos que tiene alrededor. Para ello se añade el comando ALIGN a la etiqueta, de la siguiente manera:
| <IMG SRC=»imagen.gif» ALIGN=TOP> | Alineada arriba |
| <IMG SRC=»imagen.gif» ALIGN=MIDDLE> | Alineado en medio |
| <IMG SRC=»imagen.gif» ALIGN=BOTTOM> | Alineada abajo |
| <IMG SRC=»imagen.gif» ALIGN=LEFT> | Alineada izquierda |
| <IMG SRC=»imagen.gif» ALIGN=RIGHT> | Alineada derecha |
Otra posibilidad interesante es la de utilizar una imagen como enlace a otra página:
<A HREF="mipag2.html"><IMG SRC="hombre.gif"></A>
Las imágenes también pueden mostrar un borde, para ello utilizaremos el atributo Border, para el que debemos indicar un tamaño:
<A HREF="mipag2.html"><IMG SRC="hombre.gif" BORDER=2></A>
Para establecer las dimensiones de la imagen disponemos de los atributos WIDTH (ancho) y HEIGHT (alto), a los que se asigna una cantidad en píxeles (teóricamente HTML5 no soporta indicar la anchura en %, pero en la práctica la mayoría de los navegadores lo aceptan).
<IMG SRC="imagen.gif" WIDTH=120 HEIGHT=94>
Enlaces
Una característica fundamental que proporcionan las páginas web es la posibilidad de unir distintos documentos por medio de enlaces hipertexto.
En general, los enlaces tienen la siguiente estructura:
<A HREF="XXX"> YYY </A>
Donde XXX es el destino del enlace. YYY es el texto que se mostrará para el enlace.
Tipos de enlaces
1. Enlaces dentro de la misma página
A veces, en el caso de páginas muy extensas, puede interesar dar un salto desde una posición a otra determinada. En este caso, el destino del enlace, tendrá el formato #MARCA. Donde MARCA es el nombre que le damos a un punto exacto de nuestro documento.
<A HREF="#PrimerPunto"> Ir al primer punto </A>
Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:
<A NAME="PrimerPunto"> </A>
2. Enlaces con otra página del mismo sitio web
En el enlace indicamos el nombre del archivo (dirección relativa: para separar carpetas usamos ‘ / ‘ y para salir de una carpeta se utiliza ‘..’):
<A HREF="mipag2.html"> Mi segunda pagina </A>
Si queremos que vaya a un sitio concreto de otra página en vez de ir al principio de la página, adonde va por defecto, en ese sitio tenemos que colocar una marca y completar el enlace con la referencia a esa marca.
<A HREF="mipag2.html#PrimerPunto"> Al primer punto de la página 2 </A>.
3. Enlaces con una página fuera de nuestro sistema
Si queremos enlazar con una página que esté fuera de nuestro sistema (es decir, que esté en un servidor distinto al que soporta nuestra página), es necesario conocer su dirección completa, o URL.
Una vez conocida la URL, la colocamos en el destino del enlace:
<A HREF="http://publico.com/"> Ir al periódico Publico </A>
4. Enlaces con una dirección de e-mail
En este caso, el destino del enlace será la dirección de correo precedida por mailto: :
<A HREF= “mailto: pepe@yahoo.es”> Enviar correo a Pepe </A>
Colores de los enlaces
Cada navegador tiene unos colores por defecto para los enlaces, pero pueden ser modificados con los siguientes atributos de la etiqueta BODY:
| LINK | color de los enlaces |
| VLINK | color de los enlaces visitados |
| ALINK | color de los enlaces activos (el que adquieren en el momento de ser pulsados) |
<BODY BGCOLOR="#XXYYZZ" TEXT="#XXYYZZ" LINK="#XXYYZZ" VLINK="#XXYYZZ" ALINK="#XXYYZZ">
Target
A los enlaces también les podemos indicar donde se abrirá la página vinculada. Existen hasta 5 posibilidades, pero nos vamos a quedar con las dos siguientes, ya que el resto ha quedado obsoletas en HTML5:
<a target="_blank|_self">
Donde:
| _blank | Abre el documento vinculado en una nueva ventana o pestaña. |
| _self | Abre el documento vinculado en la misma ventana o pestaña. |