artemate

PROGRAMMAZIONE PER IL WEB

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

INSERIRE ELEMENTI MULTIMEDIALI - COSTRUIRE UN SEMPLICE SITO

XHTML

XHTML è un linguaggio che definisce solo la struttura. La formattazione si fa con i CSS ( fogli di stile ).
Inserendo elementi non supportati (font, larghezza per le celle di tabelle o margini per il body, per citare solo alcuni esempi) il documento non è valido.
Risultato: codice più pulito, più logico, più gestibile.

regole generali sintattiche

• il documento deve iniziare con un DOCTYPE( Document Type Definition)
• tutti i tag e i loro attributi sono espressi in minuscolo
• il documento deve essere ben formato e tutti i tag correttamente annidati.
• tutti i tag e i loro attributi sono espressi in minuscolo
• il documento deve essere ben formato e tutti i tag correttamente annidati.
• è obbligatorio inserire il tag di chiusura (ad esempio, se usiamo <p> dobbiamo chiudere con </p>)
• i valori degli attributi devono essere specificati tra doppi apici (ad esempio, <div class="top"> )
• i tag vuoti seguono la cosiddetta sintassi minimizzata (per esempio, il tag <br> diventa <br /> e il tag meta e img deve essere chiuso:<img src="images/artemate.gif" /> lasciando sempre uno spazio vuoto prima della chiusura per la compatibilità con vecchi browser!!!
• utilizzare l'attributo id al posto di name per identificare gli elementi di un documento.

LA FORMATTAZIONE DEGLI ELEMENTI

Si fa con un FOGLIO DI STILE stile.css che viene richiamato nel tag link rel="stylesheet" posto nella testa del documento

IL DOCTYPE, definizione del codice Documento

L'inizio di un documento XHTML avrà come elemento iniziale un DTD ( Document Type Definition) con tre possibili specifiche: Strict, Transitional, Framest. ESEMPIO:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Il browser, grazie al DTD specificato, seguirà le definizioni appropriate di codice.
Aggiungiamo il riferimento preciso al linguaggio:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">

STRUTTURA DEL CODICE di pagina

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>                                                              intestazione
     <title> TITOLO pagina </title>                                    titolo visualizzato dal browser
         <--! qui inserisco i meta tag , il tag link e gli script -->
</head>                                 fine intestazione
        <body>                           inizio corpo del documento
                   <--! qui inserisco corpo del codumento-->
       </body>                         fine corpo del documento
</html>                                 fine documento

META TAG DA INSERIRE in head chiudendoli con />

I Meta comandi vanno inseriti nella parte head del documento dopo <title>. I metacomandi più utili sono:titolo(title)
descrizione(description),parole chiave(key words), codifica caratteri(charset), foglio di stile (link rel="stylesheet")

BODY

<div> ..</div>. DIV serve a suddividere la pagina in blocchi. Fa riferimento al foglio di stile
<div id="container">                                                   
         <div class="box_pagina">                                       <--! inizio box pagina dentro a container----->
                  <--! qui scrivo elementi di box pagina -->
         </div>                                                                  <--! fine box pagina----------------------->
    <--! qui scrivo elementi di container -->
</div>

PARAGRAFO <p></p>  fa riferimento al foglio di stile
<br />  Break row =a capo
<hr />   linea orizzontale
elemento PRE per inserire testo preformattato (per omini o disegni )
<pre>testo</pre>
INTESTAZIONI <h1><h6> fanno riferimento al foglio di stile
<strong> </strong> = bold o grassetto.ammessoi in xhtml
<em> </em> = Italico o inclinato.ammessoi in xhtml
CARATTERI SPECIALI
codice nominale       simbolo
       spaziatura blanck fra caratteri
&Egrave    e accentata
&it          segno di minore
&gt         segno di maggiore

IMMAGINI : < img src="images.gif" />

<p><img src="girasoli.jpg" alt="testo sostitutivo" width="400" height="272" />< /p>
width="400" height="300" NB: larghezza/altezza obbligatori per validazione documento.
Allineamento, bordi o altro definiti con foglio di stile. Le immagini si devono inserire nei tag <p> o <h1><h6>

COLLEGAMENTI IPERTESTUALI: <a href="adoc.htm">clicca</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>    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

LA LISTA : UL o OL . LH = visualizza il titolo - per formattazione si fa riferimento al foglio di stile
<ul >                          NOTA:<ol> al posto di <ul> per ELENCO ORDINATO
<lh>TITOLO</lh>
<li> Prima voce lista </li>
<li> Seconda voce lista </li>
</ul>                        FINE LISTA
<dl>per elementi definition list - per formattazione si fa riferimento al foglio di stile
<dt>sigla1</dt>
        <dd>spiegazione1</dd>
<dt>sigla2</dt>
      <dd>spiegazione2</dd>
</dl>
TABELLE (solo in html transitional) con formattazione mediante foglio di stile
<table>..</table> <th>=intestazioni colonne <tr>=RIGA
       Esempio: tabella con due righe e tre colonne
<table>
<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>