COSTRUZIONE MANUALE HTML
pubblicato il 25/10/2002
ESERCITAZIONE

L'esercitazione consiste nella creazione di un manuale sul linguaggio HTML. Deve essere strutturato in 4 frames come illustrato di seguito:

 Cognome Nome (Classe) - Cognome Nome (Classe) [eventuale 2 componente] FRAME=TITOLO
FRAME=MENU

Elenco dei tag HTML

  Attributi del TAG selezionato - FRAME=ATTRIBUTI

Spiegazione della sintassi dell'attributo ed esempio
FRAME=CONTENUTO

- Il frame in alto (TITOLO) deve contenere i riferimenti agli autori (2 al massimo per elaborato) ed i links alle loro caselle di posta.

- Il frame sul lato sinistro (MENU) rappresenta l'indice del vostro manuale e dovrà essere riempito con i tags HTML elencati in fondo a questa esercitazione. 

- Quando clicco su un tag HTML, nel frame ATTRIBUTI,  deve apparire la lista degli attributi associati. 

- Cliccando su uno degli attributi presenti nel frame ATTRIBUTI si deve caricare, nel frame CONTENUTO, la sua descrizione completa  con relativa sintassi d'uso ed un esempio richiamabile mediante un link.

- La descrizione degli attributi di un tag HTML va fatta in un'unica pagina (esempio table.htm, p.htm, div.htm, img.htm etc.) e pertanto i links nel frame ATTRIBUTI saranno sempre  riferimenti interni allo stesso documento (vedi <A NAME=PIPPO> etc.). Gli esempi associati al vostro manuale possono essere accorpati in un uno o più files (es table-samples.htm, p-samples.htm etc.).

- l'esercitazione va impostata con il notepad. L'uso di frontpage non è consentito se non come simulazione per valutare l'impostazione grafica.

- Prima di iniziare il lavoro definite un modello per la pagina generica visualizzata in CONTENUTO.

Esempio

 Rossi Mario (4D)
<A>
<AREA>
<B>
<BLINK>
<BODY>
...

<UL>

  <BACKGROUND>  <BGCOLOR>  <TEXT>  <LINK> <ALINK> <VLINK> <LEFTMARGIN>
 <RIGHTMARGIN> <TOPMARGIN> <BOTTOMMARGIN> <MARGINWIDTH> <MERGINHEIGHT>
BACKGROUND

Descrizione:
Viene utilizzato per dare al nostro documento un'immagine di sfondo

Sintassi:
<BODY BACKGROUND="URL">  dove URL è il percorso relativo od assoluto del file di immagine che rappresenta lo sfondo

Esempio: 
<BODY BACKGROUND="immagini/sfondo.gif">
clicca qui per vedere l'esempio

BGCOLOR

Descrizione:
Viene utilizzato per dare al nostro documento un colore di sfondo. Questo attributo viene annullato dall'attributo BACKGROUND

Sintassi:
 <BODY BGCOLOR="Codifica rgb del colore oppure #00FF00">

Esempio: 
 esempi di nomi di colori:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

clicca qui per vedere l'esempio
   

Elenco dei TAGS HTML che devono essere presenti nel vostro elaborato. Un elenco più completo (in italiano) è disponibile all'indirizzo: http://werbach.com/barebones/it_barebone.html

Elementi di base
  Tipo documento <HTML></HTML>
  Titolo <TITLE></TITLE>
  Testa <HEAD></HEAD>
  Corpo <BODY></BODY>
 
Definizione struttura
  Heading <H?></H?>
  Align Heading <H? ALIGN=LEFT|CENTER|RIGHT></H?>
  Division <DIV></DIV>
  Align Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
  Block Quote <BLOCKQUOTE></BLOCKQUOTE>
  Emphasis <EM></EM>
  Strong Emphasis <STRONG></STRONG>
  Citation <CITE></CITE>
  Code <CODE></CODE>
  Large Font Size <BIG></BIG>
  Small Font Size <SMALL></SMALL>

Formattazione testo
  Bold <B></B>
Italic <I></I>
Underline <U></U> non molto diffuso
Strikeout <STRIKE></STRIKE> non molto diffuso
Strikeout <S></S> non molto diffuso
Subscript <SUB></SUB>
Superscript <SUP></SUP>
Typewriter <TT></TT> (utilizza un font monospaziato)
Preformatted <PRE></PRE> mostra gli spazi cosi come sono
Width <PRE WIDTH=?></PRE>
Center <CENTER></CENTER>
Blinking <BLINK></BLINK>
Font Size <FONT SIZE=?></FONT>
Change Font Size <FONT SIZE="+|-?"></FONT>
Font Color <FONT COLOR="#$$$$$$"></FONT>
Select Font <FONT FACE="***"></FONT>
Point size <FONT POINT-SIZE=?></FONT>
Weight <FONT WEIGHT=?></FONT>
Base Font Size <BASEFONT SIZE=?> (from 1-7; default is 3)
Marquee <MARQUEE></MARQUEE>

LINKS, IMMAGINI, E SUONI
Link Something <A HREF="URL"></A>
Link to Location <A HREF="URL#***"></A>
<A HREF="#***"></A>
Target Window <A HREF="URL" TARGET="***"></A>
Link to Email <A HREF="mailto:@"></A>
Specify Subject <A HREF="mailto:@?SUBJECT=***"></A>
Define Location <A NAME="***"></A>
Display Image <IMG SRC="URL">
Alignment <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
Alignment <IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
Alternate <IMG SRC="URL" ALT="***">
Dimensions <IMG SRC="URL" WIDTH=? HEIGHT=?>
<IMG SRC="URL" WIDTH=% HEIGHT=%>
Border <IMG SRC="URL" BORDER=?> (in pixels)
Runaround Space <IMG SRC="URL" HSPACE=? VSPACE=?> (in pixels)
Imagemap <IMG SRC="URL" USEMAP="URL">
Movie Clip <IMG DYNSRC="***" START="***" LOOP=?>
Background Sound <BGSOUND SRC="***" LOOP=?|INFINITE>
Client-Side Map <MAP NAME="***"></MAP>
Map Section <AREA SHAPE="DEFAULT|RECT|CIRCLE|POLY" COORDS=",,," HREF="URL"|NOHREF>
Client Pull <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">

 
Divisorie
Paragraph <P></P>
Align Text <P ALIGN=LEFT|CENTER|RIGHT></P>
Justify Text <P ALIGN=JUSTIFY></P>
Line Break <BR>
Clear Textwrap <BR CLEAR=LEFT|RIGHT|ALL>
Horizontal Rule <HR>
Alignment <HR ALIGN=LEFT|RIGHT|CENTER>
Thickness <HR SIZE=?> (in pixels)
Width <HR WIDTH=?> (in pixels)
Width Percent <HR WIDTH="%">
Solid Line <HR NOSHADE>
No Break <NOBR></NOBR>
Word Break <WBR>

scadenza il 30/11/2002
Elenchi
  Unordered List <UL><LI></UL>
  Compact <UL COMPACT></UL>
  Bullet Type <UL TYPE=DISC|CIRCLE|SQUARE>
  Bullet Type <LI TYPE=DISC|CIRCLE|SQUARE>
  Ordered List <OL><LI></OL>
  Compact <OL COMPACT></OL>
  Numbering Type <OL TYPE=A|a|I|i|1>
  Numbering Type <LI TYPE=A|a|I|i|1>
  Starting Number <OL START=?>
  Starting Number <LI VALUE=?>
  Definition List <DL><DT><DD></DL>
  Compact <DL COMPACT></DL>
 
SFONDI E COLORI
  Tiled Bkground <BODY BACKGROUND="URL">
  Bkground Color <BODY BGCOLOR="#$$$$$$"> (order is red/green/blue)
  Text Color <BODY TEXT="#$$$$$$">
  Link Color <BODY LINK="#$$$$$$">
  Visited Link <BODY VLINK="#$$$$$$">
  Active Link <BODY ALINK="#$$$$$$">
  (More info at http://werbach.com/web/wwwhelp.html#color)
 
SPECIAL CHARACTERS
  Special Character &#?; (dove ? è il codice ISO 8859-1)
  < &lt;
  > &gt;
  & &amp;
  " &quot;
  Registered TM &#174;
  Registered TM &reg;
  Copyright &#169;
  Copyright &copy;
  Non-Breaking Space &nbsp;
  (Complete list at http://www.uni-passau.de/%7Eramsch/iso8859-1.html)
 
FORMS
Define Form <FORM ACTION="URL" METHOD=GET|POST></FORM>
File Upload <FORM ENCTYPE="multipart/form-data"></FORM>
Input Field <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|
FILE|BUTTON|IMAGE|HIDDEN|SUBMIT|RESET">
Field Name <INPUT NAME="***">
Field Value <INPUT VALUE="***">
Checked? <INPUT CHECKED>
Field Size <INPUT SIZE=?>
Max Length <INPUT MAXLENGTH=?>
Selection List <SELECT></SELECT>
# of Options <SELECT SIZE=?></SELECT>
Multiple Choice <SELECT MULTIPLE>
Option <OPTION>
Default Option <OPTION SELECTED>
Option Value <OPTION VALUE="***">
Option Group <OPTGROUP LABEL="***"></OPTGROUP>
Input Box Size <TEXTAREA ROWS=? COLS=?></TEXTAREA>
Name of Box <TEXTAREA NAME="***"></TEXTAREA>
Wrap Text <TEXTAREA WRAP=OFF|HARD|SOFT></TEXTAREA>
 
TABELLE
Define Table <TABLE></TABLE>
Table Alignment <TABLE ALIGN=LEFT|RIGHT|CENTER>
Table Border <TABLE BORDER></TABLE> (either on or off)
Table Border <TABLE BORDER=?></TABLE> (you can set the value)
Cell Spacing <TABLE CELLSPACING=?>
Cell Padding <TABLE CELLPADDING=?>
Desired Width <TABLE WIDTH=?> (in pixels)
Width Percent <TABLE WIDTH=%> (percentage of page)
Table Color <TABLE BGCOLOR="$$$$$$"></TABLE>
Border Color <TABLE BORDERCOLOR="$$$$$$"></TABLE>
Dark Border <TABLE BORDERCOLORDARK="$$$$$$"></TABLE>
Light Border <TABLE BORDERCOLORLIGHT="$$$$$$"></TABLE>
Table Row <TR></TR>
Alignment <TR ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>
Table Cell <TD></TD> (must appear within table rows)
Alignment <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
No linebreaks <TD NOWRAP>
Columns to Span <TD COLSPAN=?>
Rows to Span <TD ROWSPAN=?>
Desired Width <TD WIDTH=?> (in pixels)
Width Percent <TD WIDTH="%"> (percentage of table)
Cell Color <TD BGCOLOR="#$$$$$$">
Header Cell <TH></TH> (same as data, except bold centered)
Alignment <TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>
No Linebreaks <TH NOWRAP>
Columns to Span <TH COLSPAN=?>
Rows to Span <TH ROWSPAN=?>
Desired Width <TH WIDTH=?> (in pixels)
Width Percent <TH WIDTH="%"> (in % sulla tabella)
Cell Color <TH BGCOLOR="#$$$$$$">
 
FRAMES
Frame Document <FRAMESET></FRAMESET> (instead of <BODY>)
Row Heights <FRAMESET ROWS=,,,></FRAMESET> (pixels or %)
Row Heights <FRAMESET ROWS=*></FRAMESET> (* = relative size)
Column Widths <FRAMESET COLS=,,,></FRAMESET> (pixels or %)
Column Widths <FRAMESET COLS=*></FRAMESET> (* = relative size)
Borders <FRAMESET FRAMEBORDER="yes|no"></FRAMESET>
Border Width <FRAMESET BORDER=?></FRAMESET>
Border Color <FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET>
Frame Spacing <FRAMESET FRAMESPACING=?></FRAMESET>
Define Frame <FRAME>
Display Document <FRAME SRC="URL">
Frame Name <FRAME NAME="***"|_blank|_self|_parent|_top>
Margin Width <FRAME MARGINWIDTH=?>
Margin Height <FRAME MARGINHEIGHT=?>
Scrollbar? <FRAME SCROLLING="YES|NO|AUTO">
Not Resizable <FRAME NORESIZE>
Borders <FRAME FRAMEBORDER="yes|no">
Border Color <FRAME BORDERCOLOR="#$$$$$$">
Unframed Content <NOFRAMES></NOFRAMES>
 
VARIE
Commenti <!-- *** -->
Base Window Name <BASE TARGET="***">
Meta Information <META>
Style Sheets <STYLE></STYLE>

scadenza il 10/01/2002

Elenco di alcuni siti utili per svolgere l'esercitazione:

http://www.ncdesign.org/html/  (in inglese)
http://www.aspide.it/manuale/
http://www.pagetutor.com/ (in inglese)
http://why.dada.supereva.it/html.html
http://www.novaera.it/webkit/
http://www.bitafterbit.com/italiano/html/basic/index.html
http://www2.utep.edu/~kross/tutorial/ (in inglese)
http://space.tin.it/computer/gciabu/html/
http://members.tripod.com/~mrtax/html.htm
http://www.omeganet.it/utenti/varinim/html/guidahtml/guida.htm
http://www.olimpoweb.it/manuali/html/html6.htm
http://www.mtsn.tn.it/git/corso/manuale.htm
http://www.w3.org/Tools/ (tools per l'Html - in inglese)
http://www.geocities.com/eikopuchi/othtml1.htm
http://werbach.com/barebones/it_barebone.html (tutti i comandi)
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html (in inglese)
http://www.dada.it/html/
http://www.silab.dsi.unimi.it/~ab533675/man.html
http://www.w3.org/TR/REC-html40/ (in inglese - sito ufficiale)
http://www.gigliotti.it/

 

Buon Lavoro