artemate

PROGRAMMAZIONE PER IL WEB

STORIA - SCHEMA HTML - SCHEMA XHTML - SCHEMA XML - FOGLI DI STILE

INSERIRE ELEMENTI MULTIMEDIALI - COSTRUIRE UN SEMPLICE SITO

schema HTML4

Codice di marcatura ipertestuale del www rilasciato nel 1997. I comandi HTML sono chiamati marcatori o tag.
<tag> inizio tag
</tag> fine tag

NOTA: con html4 si definisce 1)la struttura della pagina e 2)formattazione elementi anche senza fogli di stile

STRUTTURA PAGINA

<html >                inizio html
<head>                inizio intestazione: Contiene informazioni necessarie per classificare il documento
     <title> TITOLO </title>          tag titolo visualizzato dal browser
</head>                                   fine intestazione
        <body>                               inizio corpo documento
<..! contenuto pagina -->
       </body>                        fine corpo documento
</html>                              fine html

OSSERVAZIONI :
- i commenti si scrivono con questa sintassi: <--! inserisco i commenti -->
- DTD DOCTYPE significa Document Type Definition e definisce il tipo di codifica . il DTD si scrive prima di <html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

ELENCO TAG PIU' IMPORTANTI

BODY corpo documento

Attributi di formattazione (alternativi al foglio di stile): bgcolor, background text .ESEMPI
<body bgcolor="#e1e1e1" >    colore di sfondo con tripplette esadecimali
"#00000"nero;   "#FF0000" rosso;     "#00FF00" verde " ;#0000FF"   blue
<body background="images/sfongo.gif">     per immagine sfondo
<body text ="#003399">      permette di colorare il testo di blu

PARAGRAFO <p>...</p>

<p align="left">testo del paragrafo</p>     paragrafo allineato a destra
<p align="right"> paragrafo allineato a sinistra
<p align="center"> paragrafo allineato al centro
<center></center> altro modo per centrare
<br>     Break row =a capo
<hr>   linea orizzontale
<hr size="1" withd="60%" align="center" noshade> linea orizzontale, noshade=effetto tridimensionale
<FONT >attributi: colore, carattere e dimensioni: color, face, size ( si consiglia di definirli con foglio di stile )
<font color="black" face="arial" size="7">BENVENUTI</font> size definisce le dimensioni da 1 a 7 (3 di default)

INTESTAZIONI <h1>...</h1> , <h6>...</h6>

<h1></h1>Carattere GRASSETTO GROSSE DIMENSIONI con riga vuota sopra e sotto ( serve per il titolo).
<h6></h6>Carattere grassetto piccole dim con riga vuota sopra e sotto
attributi di formattazione: ENFASI
<b>ciao a tutti>/b>        Grassetto Bold
<i>ciao a tutti</i>        Corsivo Ittalic
<u>ciao a tutti</u>         Sottolineato underline
<strong> </strong>         bold o grassetto, ammesso in xhtml
<em> </em>                 Italico o inclinato, ammesso in xhtml
<strink>=sbarrato      <blink> testo lampeggiante      <sub>=pedice      <sup>=apice
CARATTERI SPECIALI: accenti, apostrofi , spaziatura si devono scrivere mediante il loro "codice nominale".ES:
codice nominale       simbolo
              spaziatura blanck fra caratteri
&Egrave       e accentata
&it                 segno di minore
&gt              segno di maggiore
elemento DIV(come SPAN =analogo elemento in line) definisce un contenitore di pagina con attributi
<div style="font-size:24px; font-family:arial; color:green">BENVENUTI</div>

IMMAGINI <img src="... ">

< img src="images.gif">                        importante : FORMATO GIF O JPG di piccole dimensioni
<img src="girasoli.jpg" alt="testo sostitutivo" width="400" height="272" />
width="400" height="300"                     larghezza/altezza immagine in pixel
align="left","center"," right "                 formattazione: allineamento nel paragrafo
valign="top","middle","bottom"               posizione del testo: di fianco/alto; fianco/mezzo; fianco/basso
border= "1"                                       formattazione:dim. bordo attorno all'immagine,valore da 1 a 10
hspace /vspace = spazio vuoto in pixel lasciato dal testo attorno all'immagine in orizzontale/verticale

COLLEGAMENTI IPERTESTUALI <a href="... ">...</a>

<a href="adoc.htm">clicca qui</a>
<a href="cap1.htm"> Capitolo 1</a>                               da parola Capitolo 1 link verso documento cap1.htm
<a href="/cartella/cap2.htm">Capitolo 2 </a>                   da parola Capitolo 2 link verso il doc cap2.htm in cartella
<a href="cap1.htm"><img src="pluto.gif"></a>                da immagine pluto.gif link verso documento cap1.htm
<a href="http://www.artemate.it">vai al sito artemate</a>                  da frase link ad una URL
<a href="mailto:nome@libero.it">scrivimi</a>                                    da parole scrivimi link verso email
<a href="mailto:nome@libero.it"><img src="images/mail.gif" ></a>      da immagine link verso email
<a href="pagina2.html" target="_blank">                                      apre collegamento in una nuova pagina browser
<a accesskey="..."                        Assegna un tasto di attivazione immediata (hotkey) all'elemento
<a tabindex="..."                         Valore che definisce l'ordine quando si usa il tasto di tabulazione

ANCORE INTERNE<a id="... "></a>

ANCORE INTERNE=etichette vuote che servono solo per i meccanismi di spostamento
<a id="top" name="qui"></a>                                           ancora interna da posizionare al punto di arrivo
<a href="#top">vai inizio stessa pagina </a>                       link verso ancora interna stessa pagina
<a href="corsi.html#top">vai all'inizio pagina corsi</a>         link verso ancora interna altra

-------------------------------------approfondimento-----------------------------------

LA LISTA : UL o OL=elenco , LH = visualizza il titolo, LI =voci lista

<ul type="circle">                             <ul> =elenco non ordinato     <ol>=elenco NON ordinato
<lh>TITOLO</lh>                              LH =visualizza il titolo
<li> Prima voce lista </li>
<li> Seconda voce lista </li>
</ul>                                              FINE LISTA
        type= identificatori di lista : "circle" "disc" "square"; type="1" visualizza 1,2,3,; type="a" visualizza a,b,c,
<DL>per elementi definition list
<DT>sigla1</DT>
        <DD>spiegazione1</DD>
<DT>sigla2</DT>
      <DD>spiegazione2</DD>
</DL>

TABELLA

<TABLE>..</TABLE> <TH>=intestazioni colonne <TR>=RIGA
esempio:tabella con due righe e tre colonne
<table border="1">
<tr><th>titolouno</th><th>titolodue</th></tr>
<tr><td>nome1</td> <td> nome2</td></tr>
<tr><td>nome3</td> <td> nome4</td></tr>
</table>
attributi di formattazione:
width="x" larghezza tabella o cella in pixel
width="x% "larghezza tabella o cella in percentuale
heigth="x" altezza della tabella o cella in pixel
heigth="x%" altezza della tab o cella in % dattributi di tr per allineamento testo nelle celle
align="rigth"/center/bottom (solo ie) orizzontale
valign="top"/middle/bottom (solo ie) verticale
bgcolor="#e1e1e1" colore cella o tabella
border ="0" dimensioni bordo.
cellpaddind="2" spazio nella cella fra bordo e scritta default
cellspacing ="1" spazio fra celle
<caption>inserisce una legenda centrata automaticamente</caption>
<colspan ="2" > unisce due celle in verticale
<rowspan="2"> unisce due celle in orizzontale
<table border="1" cellpadding="2" cellspacing="3"> x=0,1,5

tag per inserire file audio

1) usare bgsound all'interno di head , in questo modo il file musica si carica automaticamente nel browser:
<bgsound src="music.mid" alt="suono" loop="5">

2) comando embed da inserire in body : obsoleto per XHTML , visualizza la barra del lettore audio.
file supportati: mp3 .wav .midi .rmi .mpeg (per i video).avi (per i video)
esempio per file midi
<embed src="nome_midi.mid" autostart="false" loop="true" height="40" width="170"> </embed>

2) usare object (da inserire in body ) è il tag corretto - secondo le indicazioni del W3C - per inserire elementi multimediali, tanto che nelle specifiche dell'XHTML 2 (l'evoluzione dell'HTML) persino le immagini devono essere inserite tramite questo tag. Può dare problemi di incompatibilità. gli attributi sono:
-data: questo attributo può essere utilizzato per specificare il percorso dell'oggetto da inserire nella pagina
-classid dà indicazioni sul percorso dell'oggetto, ed è utile per identificare il tipo di plugin con cui eseguire l'oggetto (sostituisce la voce data e type)
-codebase serve per indicare l'URL di base, a cui il codice indicato in "data" o in "classid" fa riferimento
-type è il tipo di oggetto da inserire (più esattamente è il MIME type dell'oggetto)
-archive si può indicare una lista di URL, separati da virgola, contenti risorse relative all'oggetto inserito
-width, height se necessario, si possono indicare una larghezza e una altezza
All'interno del tag <object> è possibile specificare una sintassi alternativa con embed per i browser che non leggono questo tag. Inoltre all'interno del tag è possibile specificare eventuali parametri necessari all'esecuzione dell'oggetto.

audio .mid o .mp3

tag per i FILMATI.mp4 .mov .swf

con classid

META TAGS DA INSERIRE in head

meta comandi che non vanno inseriti nel body ma nella parte head del documento. i metacomandi più utili sono: titolo (title), descrizione (description), parole chiave (key words), codifica caratteri (charset),