HTML

Llenguatge HTML

Jaume Brufau i Galitó

Desembre 2000

Continguts

HTML	1
Llenguatge HTML	5
Capçaleres i peus	6
Temporitzador per saltar a una altra pàgina o URL	6
Cos del document	6
Fons de la pantalla	6
·	Color  (Programa ColorWize)	6
·	Imatge (fitxer gràfic que omple tota la pantalla)	6
Text	6
·	Color de la font de lletra (Programa ColorWize)	6
·	Encapçalaments (cada encapçalament implica un salt de paràgraf)	6
·	Grandària de la lletra	6
·	Font de lletra (per defecte és Times New Roman)	7
·	Atributs	7
Paràgraf	7
·	Salts de paràgraf	7
·	Alineació	7
Amb línia de separació entre paràgrafs	7
Sense línia de separació entre paràgrafs	7
Adreça (Contingut en cursiva)	7
Separador (per defecte en relleu i centrat)	7
Paràgraf scroll	7
Columnes en la mateixa pàgina	8
Comentari	8
Llistes	8
·	Llista Numerada	8
·	Llista amb símbols tipogràfics	8
·	Llista de definicions (menús i submenús)	8
Taules	8
·	Generalitats	8
·	Colors de les cel·les   (Programa ColorWize)	9
·	Connexió de cel·les: Columnes	9
·	Connexió de cel·les: Files	9
·	Espaiat entre les cel·les: CELLPADDING (valor per defecte = 2)	9
·	Espai entre el costat i el contingut de les cel·les: CELLSPACING (valor per defecte = 1)	9
·	Alineació (justificació)	9
·	Posició del text	10
·	I encara més: Una taula que conté taules	10
Imatges	10
·	Alineació	10
Dalt - mig - baix	10
Esquerra - dreta (et text voreja el dibuix)	10
·	Grandària	10
·	Mapes gràfics	11
·	Separació imatge - text	11
·	Imatges BMP (Explorer no ho suporta)	11
·	Sons: wav i mid (Netscape no ho suporta)	11
Enllaços amb altres pàgines	11
·	Dins de la mateixa pàgina	11
·	Enllaç amb una altra pàgina	11
·	Enllaç amb una pàgina fora del nostre sistema	11
·	En una altra finestra	11
Formularis	12
·	Definició	12
·	Input TEXT: Entrada de text	12
·	Input CHECKBOX: Botó actiu o no	12
·	Input RADIO: Sèrie alternativa de botons	12
·	Input HIDDEN: Dades ocultes per a ser enviades	12
·	Input SUBMIT: Botó per enviar les dades del formulari	12
·	Input RESET: Botó per retornar als valors per defecte del formulari	12
·	TEXTAREA: Text en múltiples línies	12
·	SELECT: Llista desplegable	12
Frames: Finestres com a subregions de la pantalla	12
·	Definició de frames	12
·	FRAMESET	13
ROWS: Frames en fila	13
COLS: Frames en columna	13
ROWS i COLS	13
Algunes utilitats	13
·	Pàgina amb missatges a l’entrar o sortir	13
·	Accés a una altra pàgina:	13
·	Missatge de correu:	14
·	Actualitzar la pàgina actual:	14
·	Link automàtic (a l’assenyalar amb el ratolí):	14
·	Enllaç en un botó	14
·	Tancar la pàgina	14
·	Informació del sistema operatiu	14
·	Detecció del navegador	14
·	Detecció del navegador i del sistema	15
·	Resolució de pantalla (sols en navegadors 4.x o superiors)	15
·	Imatges alternatives si no són existents	15
Accents i altres caràcters especials	16

Capçaleres i peus
<HTML>
<HEAD>
<TITLE> Pàgina de l'IES ... </TITLE>
<META NAME="xxx" CONTENT="yyy">
META: Informació optativa que podria necessitar el servidor per incloure-la en el document. Sols és visible en codi HTM.
NAME	CONTENT
Autor	Nom de l'autor
GENERATOR	Programa generador HTM
Description	Descripció de la pàgina
KeyWorks	Paraules clau per indexació
...	...
</HEAD>
...
...
</HTML>
Temporitzador per saltar a una altra pàgina o URL
<HTML>
<HEAD>
<META HTTP-EQUIV="Refresh" CONTENT="n_seg; URL=http://www.xtec.es/dtlleida">
	n_seg	Pausa en segons abans de saltar a la URL
<TITLE> Pàgina de l'IES ... </TITLE>
</HEAD>
Cos del document
<BODY>
...
...
</BODY>
Fons de la pantalla
•	Color  (Programa ColorWize)
<BODY BGCOLOR="#FFDFBF" TEXT="#000000" LINK="#008200" VLINK="#551A8B" ALINK="#EE0000">
(numeració hexadecimal): xxyyzz	xx = vermell, yy = verd, zz = blau
BGCOLOR	Color de fons
TEXT	Color del text normal en el document
LINK	Color del text enllaçat (encara no visitat)
VLINK	Color del text enllaçat ja visitat
ALINK	Color del text enllaçat actiu (seleccionat)
•	Imatge (fitxer gràfic que omple tota la pantalla)
<BODY BACKGROUND="gif/fons.gif">
Text
•	Color de la font de lletra (Programa ColorWize)
<FONT COLOR=#ff0000> Aquest text és de color vermell. </FONT>
<FONT COLOR=Red> Aquest text és de color vermell. </FONT>
•	Encapçalaments (cada encapçalament implica un salt de paràgraf)
<H1> Encapçalament 1 </H1>	(Més gran)
<H2> Encapçalament 2 </H2>
<H3> Encapçalament 3 </H3>
<H4> Encapçalament 4 </H4>
<H5> Encapçalament 5 </H5>
<H6> Encapçalament 6 </H6>	(Més petit)
		<Hn ALIGN=CENTER>	Alineació de la capçalera 
•	Grandària de la lletra
<BASEFONT SIZE=5> Grandària base de la font. 	El valor per defecte és 3
<FONT SIZE=n> Grandària de lletra </FONT>	Entre 1 (menor) i 7 (major)
<FONT SIZE=+n> Grandària de lletra </FONT>	Increment relatiu al base
<FONT SIZE=-n> Grandària de lletra </FONT>	Decrement relatiu al base
•	Font de lletra (per defecte és Times New Roman)
<FONT FACE="Arial","Lucida Sans"> 	Text Arial, Lucida Sans, o Times New Roman (defecte).
</FONT>
•	Atributs
<B> Text amb lletra negreta </B>	Equival a <STRONG> ... </STRONG>
<I> Text amb lletra cursiva (itàlica) </I>
Equival a <EM> ... </EM>
Equival a <DFN> ... </DFN>
Equival a <CITE> ... </CITE>
<U> Subratllat </U>

<STRIKE> Text barrat </STRIKE>
<BLINK> Text que pampallugueja </BLINK> (Explorer no ho suporta)
<SUB> Subíndex </SUB>
<SUP> Superíndex </SUP>
<SMALL> Text de menor grandària </SMALL>	Equival a <FONT SIZE="-1">
<BIG> Text de major grandària </BIG>	Equival a <FONT SIZE="+1">
<TT> Lletra monoespaiada (courier)</TT>
Equival a <SAMP> ... </SAMP>
Equival a <VAR> ... </VAR>
<KBD> Lletra courier i negreta </KBD>
<PRE> Respecta espais i retorns de carro amb lletra courier </PRE>
<BLOCKQUOTE>		Canvi de paràgraf i sagnat de 6 caràcters
Paràgraf sagnat. 
</BLOCKQUOTE>
&nbsp; 	Espais en blanc
Paràgraf
•	Salts de paràgraf
<P> paràgraf </P>	Línia en blanc entre paràgrafs.
<H1> ... <H6> 	Impliquen un salt de línia. 
<BR>		Força un salt, sense línia en blanc.
•	Alineació
Amb línia de separació entre paràgrafs
<P ALIGN="left"> 		Paràgraf a l'esquerra 
<P ALIGN="center">	Paràgraf centrat
<P ALIGN="right">		Paràgraf a la dreta 
En alguns visualitzadors, l'alineació a la dreta no funciona. 
<CENTER> 		Centra textos i imatges </CENTER>
Sense línia de separació entre paràgrafs
<DIV ALIGN="left"> Paràgraf a l'esquerra </DIV> 
<DIV ALIGN="center"> Paràgraf centrat </DIV> 
<DIV ALIGN="right"> Paràgraf a la dreta </DIV>
Adreça (Contingut en cursiva)
<ADDRESS>
<A HREF="mailto:jbrufau@pie.xtec.es"><IMG SRC=gif/bustia.gif BORDER=0></A>
</ADDRESS>
Separador (per defecte en relleu i centrat)
<HR SIZE=n>		Gruix de línia
<HR WIDTH=n>		Amplada (picsels o percentatge pàgina) de línia
<HR ALIGN=left|right|center>	Alineació (esquerra, dreta o centrada)
<HR NOSHADE>		Sense ombra (relleu)
Paràgraf scroll						
(Netscape no ho suporta)
<MARQUEE>Escroll de dreta a esquerra</MARQUEE>
<MARQUEE BEHAVIOR=SCROLL>Escroll de dreta a esquerra"</MARQUEE>
<MARQUEE BEHAVIOR=ALTERNATE>Escroll d'esquerra a dreta i viceversa"</MARQUEE>
<MARQUEE BEHAVIOR=SLIDE>Escroll de dreta a esquerra i fixació"</MARQUEE>
<MARQUEE HEIGHT=20% WIDTH=80%>Escroll de dreta a esquerra iniciant-se en el 80% d'amplada i deixant per sota un 20% de la pantalla lliure</MARQUEE>
<MARQUEE SCROLLDELAY=5 SCROLLAMOUNT=50>Escroll de dreta a esquerra a la velocitat 50</MARQUEE>
Columnes en la mateixa pàgina			
(Explorer no ho suporta)
<MULTICOL COLS="3" GUTTER="25">
Text a encolumnar en 3 columnes i amb una distància entre columnes de 25 picsels.
</MULTICOL>
Comentari
<!-- Comentari que no es visualitza amb el navegador -->
Llistes
•	Llista Numerada
<OL>
	<LH> Títol de la llista </LH>	(Opcional)
	<LI> Primer
	<LI> Segon
	<LI> Tercer
</OL>
Per escollir el tipus de numeració cal indicar-ho en la marca <OL>. Les opcions possibles són:
	<OL TYPE = 0>			Tipus numèric per defecte, no cal indicar-ho
	<OL TYPE = A>
	<OL TYPE = a>
	<OL TYPE = I>
	<OL TYPE = i>
Es pot indicar el valor d'inici (si és diferent a 1):
	<OL START = n TYPE = A> 
•	Llista amb símbols tipogràfics
<UL>			Equival a <MENU> . . . </MENU>
	<LH> Títol de la llista </LH>	(Opcional)
	<LI> Naturals
	<UL>
		<LI> Biologia
		<LI> Botànica
	</UL>
	<LI> Socials
	<UL>
		<LI> Geografia
		<LI> Història
	</UL>
</UL>
Per escollir el símbol tipogràfic cal indicar-ho en la marca <UL>. Les opcions possibles són: (Explorer no ho suporta)
	<UL TYPE=DISC>			Tipus per defecte
	<UL TYPE=SQUARE>
	<UL TYPE=CIRCLE>
•	Llista de definicions (menús i submenús)
<DL>
	<LH>Títol de la llista </LH>	(Opcional)
	<DT> Animals
		<DD> Són uns éssers vius que...
	<DT> Plantes
		<DD> Són uns éssers vius que...
</DL>
<DD> sense <DL> fa una sagnia a la dreta per a la resta de la pàgina.
Taules
•	Generalitats
<TABLE WIDTH=600 HEIGHT=500 BORDER=1>	A l'inici
BORDER: amplada costats visibles (0=no visible)
WIDTH: amplada taula en picsels o percentatge
HEIGHT: alçada taula en picsels o percentatge (innecessari)
</TABLE>			Al final 
<TR> </TR>		Defineixen les files
<TD WIDTH=50 HEIGHT=30> </TD>	Defineixen les columnes, amplada=50 i alçada=30.
Si s’utilitza <TH> ... </TH> es defineixen les capçaleres en negreta i centrades
•	Colors de les cel·les   (Programa ColorWize) 
(Netscape no ho suporta)
<TABLE BORDER BGCOLOR=Silver BORDERCOLOR=Black WIDTH=50%>
BGCOLOR: Color de les cel·les
BORDERCOLOR: Color dels costats
	<TR>
		<TD>Cel·la gris (plata), costat negre</TD>
		<TD>Segona cel·la, igual a primera</TD>
	</TR>
	<TR BORDERCOLOR=Red BGCOLOR=Green>
		<TD>Color verd, costat vermell</TD>
		<TD>Color verd, costat vermell</TD>
	</TR>
	<TR BORDERCOLOR=Red BGCOLOR=Green>
		<TD BORDERCOLOR=Yellow>Color verd, costat groc</TD>
		<TD BGCOLOR=White>Color blanc, costat vermell</TD>
	</TR>
</TABLE>
BGCOLOR es pot substituir per BACKGROUND (Exemple: BACKGROUND="gif/pie.gif") encara que Explorer no ho suports en la definició de Files (<TR>)
•	
Ítem 1	Ítem 2	Ítem 3	
Ítem 4		Ítem 5	

Connexió de cel·les: Columnes
<TABLE BORDER=1>
	<TR>
		<TD> Ítem 1 </TD>
		<TD ROWSPAN=2> Ítem 2 </TD>
		<TD> Ítem 3 </TD>
	</TR>
	<TR>
		<TD> Ítem 4 </TD>
		<TD> Ítem 5 </TD>
	</TR>
</TABLE>
•	
Ítem 1	Ítem 2	
Ítem 3	Ítem 4 	Ítem 5	

Connexió de cel·les: Files
<TABLE BORDER=1>
	<TR>
		<TD> Ítem 1 </TD>
		<TD COLSPAN=2> Ítem 2 </TD>
	</TR>
	<TR>
		<TD> Ítem 3 </TD>
		<TD> Ítem 4 </TD>
		<TD> Ítem 5 </TD>
	</TR>
</TABLE>
•	Espaiat entre les cel·les: CELLPADDING (valor per defecte = 2)
<TABLE BORDER=1 CELLPADDING=10 CELLSPACING=0>
...
...
</TABLE>
•	Espai entre el costat i el contingut de les cel·les: CELLSPACING (valor per defecte = 1)
<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=10>
...
...
</TABLE>
•	Alineació (justificació)
<TABLE BORDER>
<TR>
	<TH> Primer mes: Gener </TH>
	<TH> Segon mes: Febrer </TH>
	<TH> Tercer mes: Març </TH>
</TR>
<TR ALIGN=center VALIGN= top>
ALIGN: Alineació de les dades de les cel·les de la fila. Valors: left, center o right
També es poden definir per a cada TD
VALIGN: Alineació vertical de les dades de les cel·les de la fila. Valors: top, middle o bottom
	<TD> Alineació centrada </TD>
	<TD> Cel·la 2 </TD>
	<TD> Dues línies,<BR> cel·la 3 </TD>
</TR>
<TR>
	<TD ALIGN=right> Alineació dreta </TD>
	<TD ALIGN=center> Alineació centrada </TD>
	<TD> Per defecte,<BR>alineació esquerra </TD>
</TR>
</TABLE>
•	Posició del text
<TABLE BORDER>
<TR>
	<TH> Primer mes: Gener </TH>
	<TH> Segon mes: Febrer </TH>
	<TH> Tercer mes: Març </TH>
</TR>
<TR VALIGN=top>
	<TD> Alineació a dalt (fila) </TD>
	<TD> Aquesta és<BR>la cel·la 2 (fila) </TD>
	<TD> Cel·la 3 (fila) </TD>
</TR>
<TR>
	<TD VALIGN=top> Alineació a dalt (columna) </TD>
	<TD VALIGN=bottom> Alineació a baix (columna) </TD>
	<TD> Per defecte alineació<BR>centrada </TD>
</TR>
</TABLE>
•	I encara més: Una taula que conté taules
<TABLE BORDER>
	<TR>
		<TD> 1 </TD>
		<TD> 2 </TD>
		<TD> 3
			<TABLE BORDER>
				<TR>
					<TD> A </TD>
					<TD> B </TD>
				</TR>
				<TR>
					<TD> C </TD>
					<TD> D </TD>
				</TR>
			</TABLE>
		</TD>
	</TR>
	<TR>
		<TD> 4 </TD>
		<TD> 5 </TD>
	<TD> 6 </TD>
</TR>
</TABLE>
Imatges
•	Alineació
Dalt - mig - baix
<IMG SRC="gif/1.gif" ALIGN=TOP BORDER=0 ALT="imatge 1">
<IMG SRC="gif/2.gif" ALIGN=MIDDLE BORDER=0 ALT="imatge 2">
<IMG SRC="gif/3.gif" ALIGN=BOTTOM BORDER=0 ALT="imatge 3">
ALT = Text alternatiu a la imatge
BORDER = Si 0, en un hiperenllaç no és visible
Esquerra - dreta (et text voreja el dibuix)
<IMG SRC="gif/4.gif" ALIGN=LEFT BORDER=0 ALT="imatge 4">
<IMG SRC="gif/5.gif" ALIGN=RIGHT BORDER=0 ALT="imatge 5">
•	Grandària
<IMG SRC="gif/fitxer.gif" WIDTH=100 HEIGHT=80>
WIDTH = Amplada 
HEIGHT = Alçada
L'amplada es pot fitxer en % de la pantalla i, en aquest cas no s'ha de fixar alçada.
També es pot indicar un paràmetre i l'altre s'hi ajustarà proporcionalment.
<IMG SRC="gif/fitxer1.gif" LOWSRC="gif/fitxer2.jpg"> (Explorer no ho suporta)
Fitxer1 tindrà la grandària de Fitxer2 
•	Mapes gràfics
<MAP NAME="mapa1">
    <AREA SHAPE="RECT" COORDS="0,0,50,50" HREF="a1.htm">
    <AREA SHAPE="RECT" COORDS="50,0,100,50" HREF="a2.htm">
    <AREA SHAPE="RECT" COORDS="100,0,150,50" HREF="a3.html">
    <AREA SHAPE="RECT" COORDS="0,50,150,100" NOHREF>
</MAP>
<IMG SRC="lleida.gif" USEMAP="#mapa1">
SHAPE = RECT, CIRCLE, POLY
COORDS = RECT (XO,YO,X1,Y1), CIRCLE (X,Y,R), POLY (X1,Y1,X2,Y2,X3,Y3,...)
NOHREF = Zona no definida com àrea (opcional)
Es pot definir al final un àrea que inclogui tota la imatge que afectarà a les zones no incloses en les àrees ja definides
•	Separació imatge - text
<IMG SRC="gif/fitxer.gif" VSPACE=50 HSPACE=10>
VSPACE = Separació vertical a text
HSPACE = Separació horitzontal a text
•	Imatges BMP (Explorer no ho suporta)
<EMBED SRC="gif/pares.bmp">
•	Sons: wav i mid (Netscape no ho suporta)
<BGSOUND SRC="aplauso.wav">
<BGSOUND SRC="aplauso.wav" LOOP=INFINITE>	LOOP = Núm. de repeticions
<BGSOUND SRC="aplauso.wav" DELAY=2>	DELAY = Núm. de segons
Enllaços amb altres pàgines
<A HREF="xxx"> yyy </A>
xxx: destí de l'enllaç (Observa les cometes). 
yyy: text indicatiu en la pantalla de l'enllaç (color definir per LINK)
•	Dins de la mateixa pàgina
<A HREF="#marca"> YYY </A>
En el lloc exacte a on volem saltar, s'ha de posar l'etiqueta: 
<A NAME="marca"> </A> 
•	Enllaç amb una altra pàgina
<A HREF="pag2.htm"> Exemple del capítol 2 </A>
<A HREF=cap4.html#alinear> Capítol 4 </A>
Si el fitxer és en altre directori:
"subdir/pag2.html"
"../pag2.html"
•	Enllaç amb una pàgina fora del nostre sistema
<A HREF="http://home.netscape.com/"> Pàgina inicial de Netscape </A>
Enllaç a una adreça d'E-mail
<A HREF="mailto:jbrufau@pie.xtec.es"> Text de l'enllaç </A>
•	En una altra finestra
<A HREF=comppvd.txt" target="_blank"> TXT ></A>

Formularis
•	Definició
<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx">
...
...
</FORM>
ACTION: Indica el programa (CGI-BIN) que s'encarregarà de tractar les dades del formulari (en aquest cas s'envia per E-mail)
METHOD=POST (o GET): Indica el protocol usat per enviar les dades
•	Input TEXT: Entrada de text
<INPUT TYPE=TEXT NAME="variable" VALUE="valor inicial" SIZE=50 MAXLENGTH=60>
SIZE = Grandària de la finestra
MAXLENGTH = Longitud màxima del text
Si TYPE=PASSWORD el text entrat es visualitza com *******
•	Input CHECKBOX: Botó actiu o no
<INPUT TYPE=CHECKBOX NAME="variable" CHECKED>		CHECKED = botó actiu
•	Input RADIO: Sèrie alternativa de botons
<INPUT TYPE=RADIO NAME="variable" VALUE="valor 1">
<INPUT TYPE=RADIO NAME="variable" VALUE="valor 2" CHECKED>	CHECKED = botó actiu
•	Input HIDDEN: Dades ocultes per a ser enviades
<INPUT TYPE=HIDDEN NAME="variable" VALUE="valor"> 
•	Input SUBMIT: Botó per enviar les dades del formulari
<INPUT TYPE=SUBMIT VALUE="missatge">
<INPUT TYPE=IMAGE NAME="variable" SRC="fitxer imatge">	En aquest cas mostra la imatge
•	Input RESET: Botó per retornar als valors per defecte del formulari
<INPUT TYPE=RESET VALUE="missatge">
•	TEXTAREA: Text en múltiples línies
<TEXTAREA NAME="variable" ROWS=Files COLS=Columnes> 
        Text que pot tenir vàries línies (o valor per defecte). 
</TEXTAREA> 
•	SELECT: Llista desplegable
<SELECT NAME="variable"> 
     <OPTION SELECTED VALUE=valor1> Opció Primera 	SELECTED = Opció activa per defecte
     <OPTION VALUE=valor2> Opció Segona
     ...
</SELECT>

<SELECT NAME="variable" MULTIPLE> 
     <OPTION VALUE=1> Opció Primera
     <OPTION SELECTED VALUE=2> Opció Segona
     ...
</SELECT> 
MULTIPLE = Es mostren totes les opcions possibles, la segona activa (SELECTED), de les que sols se'n pot escollir una
Frames: Finestres com a subregions de la pantalla
•	Definició de frames
<HTML> 
<HEAD> 
	Capçalera 
</HEAD> 
<FRAMESET ROWS=Llista de les Files COLS=Llista de les Columnes>
	<FRAME SRC=URL_1 NAME="Nom de la frame1" SCROLLING=YES NORESIZE>
SCROLLING = Barra d'escroll. Valors: YES, NO,AUTO
NORESIZE = L'usuari no pot variar la grandària
	<FRAME SRC=URL_2 NAME="Nom de la frame1">
	...
</FRAMESET> 
<NOFRAMES> 
	Instruccione HTML pels navegadors que no suporten frames
</NOFRAMES> 
</HTML>
•	FRAMESET
ROWS: Frames en fila
<FRAMESET ROWS=n1,n2,n3>
	ROWS: Valor o percentatge de l'alçada de les finestres
	<FRAME SRC=URL_1 NAME="Nom de la frame1"> 
	<FRAME SRC=URL_2 NAME="Nom de la frame2"> 
	<FRAME SRC=URL_3 NAME="Nom de la frame3"> 
</FRAMESET> 
COLS: Frames en columna
<FRAMESET COLS=n1,n2,n3>
	COLSR: Valor o percentatge de l'amplada de les finestres
	<FRAME SRC=URL_1 NAME="Nom de la frame1"> 
	<FRAME SRC=URL_2 NAME="Nom de la frame2"> 
	<FRAME SRC=URL_3 NAME="Nom de la frame3"> 
</FRAMESET> 
ROWS i COLS
<FRAMESET ROWS="100, 50%, *">
	<FRAME SRC="frame1.htm" NAME="frame1">
	<FRAMESET COLS="2O,*">
		<FRAME SRC="frame2.htm" NAME="frame2">
		<FRAME SRC="frame3.htm" NAME="frame3">
	</FRAMESET>
	<FRAMESET COLS="50%, 30%, 20%">
		<FRAME SRC="frame4.htm" NAME="frame4">
		<FRAME SRC="frame5.htm" NAME="frame5">
		<FRAME SRC="frame6.htm" NAME="frame6">
	</FRAMESET>
</FRAMESET>
Algunes utilitats
•	Pàgina amb missatges a l’entrar o sortir
<body onunload="alert(‘Sortida’)" onload="alert(Intrada')">
•	Accés a una altra pàgina:
<HTML>
<HEAD>
<TITLE>Títol de la pàgina</TITLE>
<SCRIPT language="javascript">
   function solucions()
   {
   var quinurl=prompt("Escriviu la clau per poder continuar.","");
   quinurl=quinurl+".htm";
   this.document.location=quinurl;
   }
   </SCRIPT>
</HEAD>
<BODY TEXT="#0F0F0F" BGCOLOR="#FFFFFF" LINK="#FF0000" VLINK="#808080" ALINK="#00FF00">
<CENTER>
<H1>Dades anuals de prim&agrave;ria</H1>
<FONT SIZE=+1>Cliqueu el bot&oacute; per continuar.</FONT>
<FORM NAME="sol" ALIGN="LEFT"><INPUT TYPE="button" ALIGN="RIGHT" NAME="Tutors" VALUE="Cliqueu aquí" onclick=solucions();>
</FORM>
</BODY>
</HTML>
•	
Missatge de correu:
<form>
<input type="button" value="E-mail" onclick="parent.location='mailto:jbrufau@pie.xtec.es'">
</form>
•	Actualitzar la pàgina actual:
<form>
<h3>Premi aquí per actualitzar la pàgina</h3>
<input type="button" value="Actualitzar" onclick="parent.location.reload()">
</form>
•	Link automàtic (a l’assenyalar amb el ratolí):
<h3>Seleccioni el següent enllaç</h3>
<a href="" onmouseover="window.open('pagina.htm','nueva','status=yes,width=200,height=200')">Enllaç</a> 
•	Enllaç en un botó
<form method="get" action="principal.htm">
<input type="submit" value="Menú Principal">
</form>
•	Tancar la pàgina
<form>
<input type="button" value="Sortir" onclick="self.close();">
</form>
•	Informació del sistema operatiu
<script language="JavaScript">
<!--  Ocultar código 
if(navigator.appVersion.indexOf("Win16") != -1)
{
  document.write("<FONT COLOR=blue>");
  document.write("Su sistema operativo es Windows 3.1 o 3.11");
  document.write("</FONT>");
}
if(navigator.appVersion.indexOf("Win95") != -1)
{
  document.write("<FONT COLOR=blue>");
  document.write("Su sistema operativo es Windows 95");
  document.write("</FONT>");
}
if(navigator.appVersion.indexOf("Windows 95") != -1)
{
  document.write("<FONT COLOR=blue>");
  document.write("Su sistema operativo es Windows 95");
  document.write("</FONT>");
}
if(navigator.appVersion.indexOf("Windows 98") != -1)
{
  document.write("<FONT COLOR=blue>");
  document.write("Su sistema operativo es Windows 98");
  document.write("</FONT>");
}
if(navigator.appVersion.indexOf("WinNT") != -1)
{
  document.write("<FONT COLOR=blue>");
  document.write("Su sistema operativo es Windows NT");
  document.write("</FONT>");
}
if(navigator.appVersion.indexOf("Macintosh") != -1)
{
  document.write("<FONT COLOR=blue>");
  document.write("Su sistema operativo es Macintosh");
  document.write("</FONT>");
} 
</script>
•	Detecció del navegador
<h3><font color="Blue">Detecció del navegador utilitzat: </font></h3>
<script language="JavaScript">
if(navigator.appName.indexOf("Netscape") != -1)
{
  document.write("<FONT COLOR=blue>");
  document.write("Netscape");
  document.write("</FONT>");
}

if(navigator.appName.indexOf("Microsoft Internet Explorer") != -1)
{
  document.write("<FONT COLOR=blue>");
  document.write("Explorer");
  document.write("</FONT>");
}
</script>
•	Detecció del navegador i del sistema
<b>El seu navegador i el seu sistema són: </b> 
<script languaje="JavaScript">
document.write(navigator.appName)
document.write(navigator.appVersion)
</script>
•	Resolució de pantalla (sols en navegadors 4.x o superiors)
<b>La resolució de la pantalla és: </b>
<script languaje="JavaScript">
document.write(screen.width + " por " + screen.height)
</script>
•	Imatges alternatives si no són existents
<img name="foto" src="dni.gif" onerror='javascript:foto.src="alternatiu.gif";'>

Accents i altres caràcters especials 
Cod	Car	HTM	Cod	Car	HTM	Cod	Car	HTM	Cod	Car	HTM	Cod	Car	HTM	
33	!	!	83	S	S	133		 	183	·	&middot;	233	é	&eacute;	
34	"	&quot;	84	T	T	134		 	184	¸	&cedil; 	234	ê	&ecirc;	
35	#	#	85	U	U	135		 	185	¹	&sup1;  	235	ë	&euml;	
36	$	$	86	V	V	136		 	186	º	&ordm;  	236	ì	&igrave;	
37	%	%	87	W	W	137		 	187	»	&raquo; 	237	í	&iacute;	
38	%	&amp;	88	X	X	138		 	188	¼	&frac14; 	238	î	&icirc;	
39	'	'	89	Y	Y	139		 	189	½	&frac12; 	239	ï	&iuml;	
40	(	(	90	Z	Z	140		 	190	¾	&frac34; 	240	ð	&eth;	
41	)	)	91	[	[	141		 	191	¿	&iquest; 	241	ñ	&ntilde;	
42	*	*	92	\	\	142		 	192	À	&Agrave;	242	ò	&ograve;	
43	+	+	93	]	]	143		 	193	Á	&Aacute;	243	ó	&oacute;	
44	0	0	94	^	^	144		 	194	Â	&Acirc;	244	ô	&ocirc;	
45	-	-	95	_	_	145	‘	‘	195	Ã	&Atilde;	245	õ	&otilde;	
46	.	.	96	`	`	146	’	’	196	Ä	&Auml;	246	ö	&ouml;	
47	/	/	97	a	a	147		 	197	Å	&Aring;	247		&divide; 	
48	0	0	98	b	b	148		 	198	Æ	&AElig;	248	ø	&oslash;	
49	1	1	99	c	c	149		 	199	Ç	&Ccedil;	249	ù	&ugrave;	
50	2	2	100	d	d	150		 	200	È	&Egrave;	250	ú	&uacute;	
51	3	3	101	e	e	151		 	201	É	&Eacute;	251	û	&ucirc;	
52	4	4	102	f	f	152		 	202	Ê	&Ecirc;	252	ü	&uuml;	
53	5	5	103	g	g	153		 	203	Ë	&Euml;	253	ý	&yacute;	
54	6	6	104	h	h	154		 	204	Ì	&Igrave;	254	þ	&thorn;	
55	7	7	105	i	i	155		 	205	Í	&Iacute;	255	ÿ	&yuml;	
56	8	8	106	j	j	156		 	206	Î	&Icirc;				
57	9	9	107	k	k	157		 	207	Ï	&Iuml;				
58	:	:	108	l	l	158		 	208	Ð	&ETH;				
59	;	;	109	m	m	159		 	209	Ñ	&Ntilde;				
60	<	&lt;	110	n	n	160		 	210	Ò	&Ograve;				
61	=	=	111	o	o	161	¡	&nbsp; 	211	Ó	&Oacute;				
62	>	&gt;	112	p	p	162	¢	&iexcl; 	212	Ô	&Ocirc;				
63	?	?	113	q	q	163	£	&cent;  	213	Õ	&Otilde;				
64	@	@	114	r	r	164	¤	&pound; 	214	Ö	&Ouml;				
65	A	A	115	s	s	165	¥	&curren; 	215		&times;				
66	B	B	116	t	t	166	|	&yen; 	216	Ø	&Oslash;				
67	C	C	117	u	u	167	§	&brvbar; 	217	Ù	&Ugrave;				
68	D	D	118	v	v	168	¨	&sect; 	218	Ú	&Uacute;				
69	E	E	119	w	w	169		&uml; 	219	Û	&Ucirc;				
70	F	F	120	x	x	170	ª	&copy; 	220	Ü	&Uuml;				
71	G	G	121	y	y	171	«	&ordf; 	221	Ý	&Yacute;				
72	H	H	122	z	z	172		&not; 	222	Þ	&THORN;				
73	I	I	123	{	{	173	­	&shy; 	223	ß	&szlig;				
74	J	J	124	|	|	174		&reg; 	224	à	&agrave;				
75	K	K	125	}	}	175	¯	&hibar; 	225	á	&aacute;				
76	L	L	127		 	176		&deg; 	226	â	&acirc;				
77	M	M	128		 	177		&plusmn; 	227	ã	&atilde;				
78	N	N	126	~	~	178	²	&sup2; 	228	ä	&auml;				
79	O	O	129		 	179	³	&sup3; 	229	å	&aring;				
80	P	P	130		 	180		&acute;	230	æ	&aelig;				
81	Q	Q	131		 	181	«	&micro;	231	ç	&ccedil;				
82	R	R	132		 	182	¶	&para; 	232	è	&egrave;