Apunts Pràctics HTML 4.0 - 2 Estructura d'una pàgina Web

APUNTS PRÀCTICS HTML 4.0

2- Estructura d'una pàgina Web

En aquest capítol es tracten els següents elements:

!DOCTYPE	!	TITLE	BASE
ISINDEX	LINK	META	SCRIPT
STYLE	HEAD	BODY	HTML
NOSCRIPT	BDO

Contingut del capítol:

1. El tipus de document

Els documents escrits en HTML, versió 4.0, comencen amb la declaració <!DOCTYPE>.
Aquesta declaració és necessària per a distingir els documents que fan servir extensions HTML 4.0 de d’altres versions anteriors. La sentència sencera seria:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

De qualsevol forma, si no existeix aquesta declaració de tipus de document, la pàgina es veu igualment, i és el visualitzador de pàgines Web que ha de deduir la versió del llenguatge HTML. Igualment, si una instrucció o TAG no és suportada pel visualitzador, no la té en compte i no es penja.

En qualsevol lloc del document en llenguatge HTML hi podem posar anotacions o comentaris que ens serveixen a nosaltres a l'hora de fer el document, però que en un visualitzador de pàgines Web, no es veuen. El text ha d'anar entre, el començament per <!--, i al final per -->.

Comentari de qui ha fet la pàgina

A continuació ve la instrucció <HTML>. Aquest informa que el que ve a continuació són instruccions de llenguatge HTML. A l’acabar el document, s’ha de tancar la instrucció, amb </HTML>

2. L'Encapçalament del document

L’encapçalament d’un document HTML conté una sèrie de paràmetres, en qualsevol ordre, que donen informació sobre el document. Aquests paràmetres van entre la instrucció <HEAD> i </HEAD>

TITLE	Títol del document
BASE	Defineix la URL per a les adreces relatives
ISINDEX	Per a buscadors de paraules simples
LINK	Relacions amb d'altres documents
META	Informació suplementària del document
SCRIPT	Reservat per a la inserció de llenguatges
STYLE	Definir fulls d'estil

Títol: L’element <TITLE> és obligat. Aquest identifica el contingut del document o pàgina. La longitud no està limitada, però hauria de ser no massa llarg, amb una màxim de 64 caràcter, per evitar ser retallat. Aquest títol és el que se’ns guarda quan afegim una adreça al nostre visualitzador. També és el títol que se’ns mostra en el visualitzador de la pàgina, al cap de munt d’aquest. Un exemple, seria: <TITLE>Pàgina Personal del Tirant</TITLE>.

Aquestes altres instruccions a dins HEAD són opcionals.

Adreça bàsica: BASE: Serveix per a definir l'adreça real per a URL's relatives.

Quan tenim <BASE href="http://www.cfi.es/index.htm" en l'apartat HEAD,
i quan a dins de l'apartat BODY, en qualsevol referència fem servir una de relativa com <IMG SRC ="imatges/barra.gif"> o en un altre <A HREF="pag02.htm", aquestes són adreces relatives, que havent definit BASE, les anirà a buscar a <IMG SCR= "http://www.cfi.es/imatges/barra gif"> i a <A HREF="http://www.cfi.es/pag02.htm">. Només es pot definir un cop BASE en un document. En absència de l'element BASE, l'URL del document és en sí mateix l'URL base.

Búsquedes simples de paraules clau: ISINDEX: Mostra una caixa de diàleg a on es pot introduir les paraules a buscar. Aquest element treballa amb combinació d'algun programa CGI que estigui en el servidor (no funciona la búsqueda si només s'inserta ISINDEX i no es té el CGI). Pot anar acompanyat de l'atribut PROMPT, que es fa servir per a especificar el text que d'entrada es mostrarà en la caixa.

Per a més flexibilitat, cal fer servir l'element FORM.

Connexions: LINK: Aquest element indica les relacions entre el document i algun altre objecte. Un document pot tenir molts elements LINK. Es fa servir per a indicar els autors, l'índex, les versions del document. També pot ser usat per a apuntar a Fulls d'Estil externs per a ser usats en el document. La informació aquí posada, no es visualitza en un browser.

Informació associada: META: Proporciona al document informació associada, com pot ser l'autor, la data de caducitat del document, una llista de paraules claus, etc. La informació aquí posada, no es visualitza en un browser. L'atribut NAME especifica la propietat del nom, i per altra banda l'atribut CONTENT especifica el valor. <META NAME="Author" CONTENT="Melcior">. Una variant, i més usada, de NAME és HTTP-EQUIV. Un exemple seria: <META HTTP-EQUIV="Author" CONTENT="Melcior">.

Un altre valor seria la data d'expiració: <META HTTP-EQUIV="Expires" CONTENT="Sat, 31 Oct 1998 14:25.27 GMT">.
Una altra variació seria carregar una pàgina, i després d'uns quants segons, anar a una altra: <META HTTP-EQUIV="Refresh" CONTENT="5"; URL=http://www.cfi.es/pag6.htm">

SCRIPT: Element reservat per a la inserció d'escripts, o trossos de programa, que fan funcions que amb HTML no es poden fer. L'element comença amb <SCRIPT> i segueix el llenguatge utilitzat. A continuació <!-- i ja tota la subrutina.

<html>
<head>
<title>Script en VBscript</title>
</head>
<body bgcolor="#FFFFFF"

</body>
Script en VBscript
</html>

En el cas de que el navegador emprat no suportés l'aplicació del Script, en VBScript, Javascript, etc, es pot fer que es mostri un text alternatiu, amb l'element NOSCRIPT. L'ordre seria:

<NOSCRIPT>El navegador no suporta JavaScript.</NOSCRIPT>

STYLE: És l'element que defineix els fulls d'estil, o aparença de la pàgina, d'acord amb l'especificació CSS1 (Cascade Style Sheets, versió 1).

Com a resum de l'encapçalament HEAD, i que com a mínim ha d'estar definit el TITLE, l'aparença seria aquesta:

<html>
<head>
<title>Apunts Pràctics HTML 4.0 - 2 Estructura d'una pàgina Web</title>
</head>
<body>
</body>
</html>

3. El cos del document

En l'apartat BODY és a on hi ha tot el contingut de la pàgina web, el text, les imatges, els sons, vídeos i les connexions o links a d'altres llocs.

Una estructura senzilla, però funcional del cos
d'una pàgina HTML podria ser aquest:

<BODY>
Benvinguts a la meva pàgina
</BODY>

Aquest apartat permet algunes possibilitats complementàries, però opcionals, com poden ser:

BGCOLOR: Per a especificar el color de fons de la pàgina web. (Background Color)

TEXT: Per a especificar, per defecte, el color del text en la pàgina.

LINK: Per a especificar el color dels links que encara no s'han visitat.

VLINK: Per a especificar el color dels links ja visitats. (Visited Link)

ALINK: Per a especificar el color dels links en el moment que l'usuari fa click sobre d'ell. (Active Link)

BACKGROUND: Per a especificar l'arxiu de format GIF o JPG que servirà de color de fons, especificant l'adreça URL.

Alguns colors:

Blanc		<body bgcolor="#FFFFFF">
Groc		<body bgcolor="#FFFF00">
Verd		<body bgcolor="#00FF00">
Blau clar		<body bgcolor="#00FFFF">
Blau fosc		<body bgcolor="#0000FF">
Fucsia		<body bgcolor="#FF00FF">
Gris		<body bgcolor="#C0C0C0">
Vermell		<body bgcolor="#FF0000">
Negre		<body bgcolor="#000000">

Els elements TEXT, LINK, VLINK i ALINK, en els visualitzadors de pàgines WEB ja estan definits. Només caldrà definir-ho en la pàgina WEB quan volguem obligar a que, per qüestions visuals, en tots els visualitzadors tinguin els mateixos color quan visitin la nostra pàgina. Aquestes definicions de colors no canvien als predifinits pel visualitzador.
Els colors, són donats en format RGB, Red, Green i Blue, en format hexadecimal, començant amb 000000 que és el negre, i acabant en FFFFFF que és el blanc. Al davant de la numeració del color, s'ha d'indicar que és en hexadecimal amb el signe #.

Exemples:

Fons de color vermell	<body bgcolor="#FF0000">
Fons de la imatge a.gif	<body background="a.gif">
Fons blau+link verd	<body bgcolor="#0000FF" link="#00FF00">

*© Melcior Oliveras 1998 melcior@intercom.es*