Això preten ser una introducció al HTML

Element	Codi al document HTML	Breu descripció
HTML	<HTML> Seccions i marques HTMLt </HTML>	Amb aquestes marques indiquem al browser que el contingut d'aquest document es text amb marques d'HTML
HEAD	<HEAD> Seccions i marques HTMLt </HEAD>	Aquesta marca indica al browser la definició de la capcelera del document d'HTML
BODY	<HEAD> Seccions i marques HTMLt </HEAD>	Aquesta marca indica al browser el començament i final del contingut del cos per al document HTML
Composició general	<HTML> <HEAD> <TITLE> .... </TITLE> </HEAD> <BODY> .... </BODY> </HTML>	Aquesta en general l'estructura per un document HTML, les particularitats de cada una de les parts s'aniran comentant

Títol del document

Element	Codi al document HTML	Breu explicaió de la marca
TITLE	<TITLE> .... </TITLE>	Amb aquestes marques indiquem al browser el títol del document que visualitzarem

Text, caràcters i estils

Accents:

	Accents oberts	Caràcters	Accents tancats	Caràcters
a	à	&agrave	á	&aacute
e	è	&egrave	é	&eacute
i	ì	&igrave	í	&iacute
o	ò	&ograve	ó	&oacute
u	ù	&ugrave	ú	&uacute
A	À	&Agrave	Á	&Aacute
E	È	&Egrave	É	&Eacute
I	Ì	&Igrave	Í	&Iacute
O	Ò	&Ograve	Ó	&Oacute
U	Ù	&Ugrave	Ú	&Uacute

Diéresis:

	Element	Caràcters
i	ï	&iuml
u	ü	&uuml

Tipus de Headings:

	Codi	Output
H1	<H1>Text</H1>	Text
H2	<H2>Text</H2>	Text
H3	<H3>Text</H3>	Text
H4	<H4>Text</H4>	Text
H5	<H5>Text</H5>	Text
H6	<H6>Text</H6>	Text

Estils de Text:

Element	Codi	Output
Underline	<U>Text</U>	Text
Italic	<I>Text</I>	Text
Emphatised	<EM>Text</EM>	Text
Bold	<B>Text</B>	Text
Strong	<STRONG>Text</STRONG>	Text

Color del Text:

Cal dir que les seg&uulments marques de HTML afecten a tot el document, i per tant no les activaré; hi hà un link a planes separades, com a mostra de cada cosa.

Element	Codi	Opcions
Color de fons	<BODY BGCOLOR="opcio">Cos del document</BODY>	red green blue
Textura	<BODY BACKGROUND="URL">Cos del document</BODY>	Qualsevol URL
Color del Texte	<BODY TEXT="opcio">Cos del document</BODY>	red green blue
Color link	<BODY LINK="opcio">Cos del document</BODY>	red green blue
Color link visitat	<BODY VLINK="opcio">Cos del document</BODY>	red green blue
Color link actiu	<BODY ALINK="opcio">Cos del document</BODY>	red green blue

Exemples:

Exemple 1    Exemple 2    Exemple 3

El seg&uulment codi només afecta al text en curs

Element	Codi	Opcions
Texte roig	<FONT COLOR="red">Texte del document</FONT>	Texte del document
Texte verd	<FONT COLOR="green">Texte del document</FONT>	Texte del document
Texte blau	<FONT COLOR="blue">Texte del document</FONT>	Texte del document
Texte rgb	<FONT COLOR="#RGB">Texte del document</FONT>	Texte del document

Llistes

Llistes ordenades, fer un índex:

	Codi en document HTML	Visualització al browser
Llista Alfanúmerica Majúscules	<OL TYPE=A> <LI>Posició 1</LI> <OL TYPE=A> <LI>Posició 1.1</LI> <LI>Posició 1.2</LI> </OL> <LI>Posició 2</LI> </OL>	Posició 1 Posició 1.1 Posició 1.2 Posició 2
Llista Alfanúmerica Minúscules	<OL TYPE=a> <LI>Posició 1</LI> <OL TYPE=a> <LI>Posició 1.1</LI> <LI>Posició 1.2</LI> </OL> <LI>Posició 2</LI> </OL>	Posició 1 Posició 1.1 Posició 1.2 Posició 2
Llista Alfanúmerica Majúscules Romànics	<OL TYPE=I> <LI>Posició 1</LI> <OL TYPE=I> <LI>Posició 1.1</LI> <LI>Posició 1.2</LI> </OL> <LI>Posició 2</LI> </OL>	Posició 1 Posició 1.1 Posició 1.2 Posició 2
Llista Alfanúmerica Minúscules Romànics	<OL TYPE=i> <LI>Posició 1</LI> <OL TYPE=i> <LI>Posició 1.1</LI> <LI>Posició 1.2</LI> </OL> <LI>Posició 2</LI> </OL>	Posició 1 Posició 1.1 Posició 1.2 Posició 2
Llista Numérica	<OL TYPE=1> <LI>Posició 1</LI> <OLTYPE=1> <LI>Posició 1.1</LI> <LI>Posició 1.2</LI> </OL> <LI>Posició 2</LI> </OL>	Posició 1 Posició 1.1 Posició 1.2 Posició 2
Els valors númerics poden començar per un valor determinat	<OL TYPE=A > <LI>Posició 1</LI> <OL TYPE=1 START=8> <LI>Posició 1.1</LI> <LI>Posició 1.2</LI> </OL> <LI>Posició 2</LI> </OL>	Posició 1 Posició 1.1 Posició 1.2 Posició 2

Llistes desordenades

	Codi en document HTML	Visualització al browser
Llista Desordenada amb cercle	<UL TYPE=CIRCLE> <LI>Posició 1</LI> <UL TYPE=CIRCLE> <LI>Posició 1.1</LI> <LI>Posició 1.2</LI> </UL> <LI>Posició 2</LI> </UL>	Posició 1 Posició 1.1 Posició 1.2 Posició 2
Llista Desordenada amb quadrat	<UL TYPE=SQUARE> <LI>Posició 1</LI> <UL TYPE=SQUARE> <LI>Posició 1.1</LI> <LI>Posició 1.2</LI> </UL> <LI>Posició 2</LI> </UL>	Posició 1 Posició 1.1 Posició 1.2 Posició 2
Llista Desordenada amb disc	<UL TYPE=DISC> <LI>Posició 1</LI> <UL TYPE=DISC> <LI>Posició 1.1</LI> <LI>Posició 1.2</LI> </UL> <LI>Posició 2</LI> </UL>	Posició 1 Posició 1.1 Posició 1.2 Posició 2
Els tipus es poden entrellaçar	<UL TYPE=CIRCLE > <LI>Posició 1</LI> <UL TYPE=SQUARE START=8> <LI>Posició 1.1</LI> <LI>Posició 1.2</LI> </UL> <LI>Posició 2</LI> </UL>	Posició 1 Posició 1.1 Posició 1.2 Posició 2

Llistes de definició

	Codi en document HTML	Visualització al browser
Llista de definició	<DL> <DT>Posició 1</DT> <DD>Definició Posició 1</DD> <DL> <DT>Posició 1.1</DT> <DD>Definició Posició 1.1</DD> <DT>Posició 1.2</DT> <DD>Definició Posició 1.2</DD> </DL> <DT>Posició 2</DT> <DD>Definició Posició 2</DD> </DL>	Posició 1 Definició Posició 1 Posició 1.1 Definició Posició 1.1 Posició 1.2 Definició Posició 1.2 Posició 2 Definició Posició 2
Llista de definició amb icones gif's	<DL> <DT><IMG SRC="a.gif">Posició 1</DT> <DD>Definició Posició 1</DD> <DL> <DT><IMG SRC="b.gif">Posició 1.1</DT> <DD>Definició Posició 1.1</DD> <DT><IMG SRC="b.gif">Posició 1.2</DT> <DD>Definició Posició 1.2</DD> </DL> <DT><IMG SRC="a.gif">Posició 2</DT> <DD>Definició Posició 2</DD> </DL>	Posició 1 Definició Posició 1 Posició 1.1 Definició Posició 1.1 Posició 1.2 Definició Posició 1.2 Posició 2 Definició Posició 2

Codi en document HTML

Visualització al browser

Llista de definició

<DL>
<DT>Posició 1</DT>
   <DD>Definició Posició 1</DD>
   <DL>
   <DT>Posició 1.1</DT>
   <DD>Definició Posició 1.1</DD>
   <DT>Posició 1.2</DT>
   <DD>Definició Posició 1.2</DD>
   </DL>
<DT>Posició 2</DT>
   <DD>Definició Posició 2</DD>
</DL>

Posició 1: Definició Posició 1
Posició 2: Definició Posició 2

Llista de definició amb icones gif's

<DL>
<DT><IMG SRC="a.gif">Posició 1</DT>
   <DD>Definició Posició 1</DD>
   <DL>
   <DT><IMG SRC="b.gif">Posició 1.1</DT>
   <DD>Definició Posició 1.1</DD>
   <DT><IMG SRC="b.gif">Posició 1.2</DT>
   <DD>Definició Posició 1.2</DD>
   </DL>
<DT><IMG SRC="a.gif">Posició 2</DT>
   <DD>Definició Posició 2</DD>
</DL>

Posició 1: Definició Posició 1
Posició 2: Definició Posició 2

Directoris

	Codi en document HTML	Visualització al browser
Directori	<DIR> <LI>Posició 1</LI> <DIR> <LI>Posició 1.1</LI> <LI>Posició 1.2</LI> </DIR> <LI>Posició 2</LI> </DIR>	Posició 1 Posició 1.1 Posició 1.2 Posició 2

Menús

	Codi en document HTML	Visualització al browser
Menú	<MENU> <LI>Posició 1</LI> <MENU> <LI>Posició 1.1</LI> <LI>Posició 1.2</LI> </MENU> <LI>Posició 2</LI> </MENU>	Posició 1 Posició 1.1 Posició 1.2 Posició 2

Imatges i Text

Imatge amb Text alternatiu

	Codi en document HTML	Visualització al browser
L'imatge és visible	<IMG SRC="imatge.gif" ALT="Recursos Informàtics">
L'imatge no és visible	<IMG SRC="imatge.gif" ALT="Recursos Informàtics">

Imatge i alineació de Text

TOP	<IMG ALIGN=TOP SRC="imatge.gif"> Text fins salt línia	Text fins salt línia
MIDDLE	<IMG ALIGN=MIDDLE SRC="imatge.gif"> Text fins salt línia	Text fins salt línia
BOTTOM	<IMG ALIGN=BOTTOM SRC="imatge.gif"> Text fins salt línia	Text fins salt línia

Imatge i alineació, particularitats de Netscape

Left, Right

LEFT	<IMG ALIGN=LEFT SRC="imatge.gif"> Text fins salt línia	Text fins salt línia
RIGHT	<IMG ALIGN=RIGHT SRC="imatge.gif"> Text fins salt línia	Text fins salt línia

Textop, Absmiddle, Absbottom, Baseline

TEXTOP	<IMG ALIGN=TEXTOP SRC="imatge.gif"> Text fins salt línia	Text fins salt línia
ABSMIDDLE	<IMG ALIGN=ABSMIDDLE SRC="imatge.gif"> Text fins salt línia	Text fins salt línia
ABSBOTTOM	<IMG ALIGN=ABSBOTTOM SRC="imatge.gif"> Text fins salt línia	Text fins salt línia
BASELINE	<IMG ALIGN=BASELINE SRC="imatge.gif"> Text fins salt línia	Text fins salt línia

Imatge i tamany

Imatge Original	Codi en document HTML	Visualització al browser
	<IMG WIDTH=54 HEIGHT=48 SRC="imatge.gif">

Imatge : aspecte del contorn

Imatge Original	Codi en document HTML	Visualització al browser
	<IMG BORDER=5 SRC="imatge.gif">

Forms: Interacció via WWW

Sintàxis general

Codi en document HTML	Visualització al browser
<FORM METHOD=GET ACTION="cgi-url"> Elements de la Form <INPUT TYPE=SUBMIT></FORM>	Elements de la Form

Métodes Post i Get

Métode	Codi en document HTML	Explicació métode
POST	<FORM METHOD=POST ACTION="cgi-url">	Explicació pel métode POST
GET	<FORM METHOD=GET ACTION="cgi-url">	Explicació pel métode GET

Elements d'una Form

Com s'ha indicat abans, els elements de la Form han d'anar entre les marques <FORM ...> i </FORM>

TextArea

Codi en document HTML	Visualització al browser
<TEXTAREA NAME="textarea1" ROWS=5 COLS=20> Texte per defecte </TEXTAREA>	Texte per defecte

Select

	Codi en document HTML	Visualització al browser
Llista d'opcions on escollirem una	<SELECT SIZE=OPCIONS_VISSIBLES_3 NAME="selcet1"> <OPTION SELECTED VALUE="Opcioprimera">Opció 1 <OPTION VALUE="Opciosegona">Opció 2 <OPTION VALUE="Opciotercera">Opció 3 <OPTION VALUE="Opcioquarta">OPció 4 </SELECT>
Llista d'opcions on podem escollir vàries	<SELECT SIZE=OPCIONS_VISSIBLES_3 NAME="selcet1" MULTIPLE> <OPTION SELECTED VALUE="Opcioprimera">Opció 1 <OPTION VALUE="Opciosegona">Opció 2 <OPTION SELECTED VALUE="Opciotercera">Opció 3 <OPTION VALUE="Opcioquarta">OPció 4 </SELECT>
Llista d'opcions on podem escollir una	<SELECT SIZE=OPCIONS_VISSIBLES_1 NAME="selcet1"> <OPTION SELECTED VALUE="Opcioprimera">Opció 1 <OPTION VALUE="Opciosegona">Opció 2 <OPTION VALUE="Opciotercera">Opció 3 <OPTION VALUE="Opcioquarta">OPció 4 </SELECT>

Codi en document HTML

Visualització al browser

Llista d'opcions
on escollirem una

<SELECT SIZE=OPCIONS_VISSIBLES_3 NAME="selcet1">
   <OPTION SELECTED VALUE="Opcioprimera">Opció 1
   <OPTION VALUE="Opciosegona">Opció 2
   <OPTION VALUE="Opciotercera">Opció 3
   <OPTION VALUE="Opcioquarta">OPció 4
</SELECT>

Llista d'opcions
on podem escollir vàries

<SELECT SIZE=OPCIONS_VISSIBLES_3 NAME="selcet1" MULTIPLE>
   <OPTION SELECTED VALUE="Opcioprimera">Opció 1
   <OPTION VALUE="Opciosegona">Opció 2
   <OPTION SELECTED VALUE="Opciotercera">Opció 3
   <OPTION VALUE="Opcioquarta">OPció 4
</SELECT>

Llista d'opcions
on podem escollir una

<SELECT SIZE=OPCIONS_VISSIBLES_1 NAME="selcet1">
   <OPTION SELECTED VALUE="Opcioprimera">Opció 1
   <OPTION VALUE="Opciosegona">Opció 2
   <OPTION VALUE="Opciotercera">Opció 3
   <OPTION VALUE="Opcioquarta">OPció 4
</SELECT>

Input

Tipus	Codi en document HTML	Visualització al browser
TEXT	<INPUT TYPE=TEXT NAME="text1" SIZE=OPCIONS_VISSIBLES_10 VALUE="Contingut Texte 1" MAXLENGTH=20>
PASSWORD	<INPUT TYPE=PASSWORD NAME="password1" SIZE=OPCIONS_VISSIBLES_10 VALUE="Informacio Secreta" MAXLENGTH=20>
CHECKBOX	<INPUT TYPE=CHECKBOX NAME="checkbox1" VALUE="Checkbox 1">Texte associat <INPUT TYPE=CHECKBOX NAME="checkbox2" VALUE="CheckBox2" CHECKED>Texte associat	Texte associat Texte associat
RESET	<INPUT TYPE=RESET NAME="reset" VALUE="Reset de Form">

Submit, enviar les dades al servidor

Tipus	Codi en document HTML	Visualització al browser
SUBMIT	<INPUT TYPE=SUBMIT NAME="submit" VALUE="Enviar Dades al Servidor">

Disseny de Forms, exemple de Form anidada en una Table

Com ja heu pogut veure, els elements d'una form es poden entrellaçar i anidar amb els altres elements del HTML. Fer una FORM és sencill, però fer-la amb un disseny i aspecte agradable és molt important.

Ara veurem una demostració de FORM ( introduït amb HTML 3.0 ) amb una TABLE anidada

Codi Font i Visualització al Browser
<FORM METHOD=POST> <TABLE BORDER=2> <TH ALIGN=CENTER>Capcelera Columna1</TH> <TH ALIGN=CENTER>Capcelera Columna2</TH> <TH ALIGN=CENTER>Capcelera Columna3</TH> <TR> <TD>Primera dada</TD> <TD>Segona dada</TD> <TD><TEXTAREA NAME="Text1" ROWS=3 COLS=10> Text defecte </TEXTAREA></TD> </TR> <TR> <TD>Primera dada</TD> <TD><SELECT><OPTION SELECTED VALUE="res">Sense se.lecció <OPTION VALUE="Opcio1">Opció 1 <OPTION VALUE="Opcio2">Opció 2 </SELECT></TD> <TD>Tercera dada</TD> </TR> </TABLE> </FORM>

Capcelera Columna1 Capcelera Columna2 Capcelera Columna3
Primera dada Segona dada Text defecte

Primera dada
Tercera dada

Links: enllaçant URL's

Links dins d'una mateixa plana HTML

Ara veurem l'efecte del següent codi, amb una refèrencia a Text en la mateixa plana:

Podrem observar que en prèmer l'hiperText linkat farem un salt a la referència lligada, deixant el Text associat adalt de tot del browser.

Codi a la plàna HTML Codi que veurem amb el browser HTML
<A HREF="#REFSALT1">Referència on volem fer el link</A>
<PRE>

<PRE>
<A NAME="REFSALT1">Aqui és on volem fer el salt</A>
Referència on volem fer el link

Codi a la plàna HTML	Codi que veurem amb el browser HTML
<A HREF="#REFSALT1">Referència on volem fer el link</A> <PRE> <PRE> <A NAME="REFSALT1">Aqui és on volem fer el salt</A>	Referència on volem fer el link

Aqui és on volem fer el salt
Fixeu-vos que el salt ha situat el lligam a la part superior de la pantalla. Si volem tornar enrera premerem la fletxa esquerra.

Links a una altra plana HTML

Ara veurem l'efecte del següent codi, amb una refèrencia a una URL:

Codi a la plàna HTML Codi que veurem amb el browser HTML
<A HREF="http://www.etse.urv.es/ri">Link a al web dels Recursos Informàtics</A> Link a al web dels Recursos Informàtics

Codi a la plàna HTML	Codi que veurem amb el browser HTML
<A HREF="http://www.etse.urv.es/ri">Link a al web dels Recursos Informàtics</A>	Link a al web dels Recursos Informàtics

Links a un arxiu per portar-lo vía FTP

Codi a la plàna HTML	Codi que veurem amb el browser HTML
<A HREF="ftp://ftp.fut.es/index">Link al arxiu index del ftp de Tinet </A>	Link al arxiu index del ftp de Tinet

Links a un servidor pel servei de telnet

És necessari tindre un client de Telnet instal.lat al mateix ordinador que el client de Browser.

Codi a la plàna HTML Codi que veurem amb el browser HTML
<A HREF="telnet://servidor.domini">Link al servidor servidor del domini domini </A> Link al servidor servidordel domini servidor

Codi a la plàna HTML	Codi que veurem amb el browser HTML
<A HREF="telnet://servidor.domini">Link al servidor servidor del domini domini </A>	Link al servidor servidordel domini servidor

La resta està Under Construction

Comentaris o suggeriments Lluis Alfons Ari�o