Massimo Sammartino

martedì 20 marzo 2007

Modificare il carattere

E' possibile all'interno di una pagina HTML, andare a modificare l'aspetto del carattere.
Per farlo è necessario ancora ricorrere all'attributo style per i tag <BODY>, <P> e <DIV>. Vediamo quali sono i comandi da usare e la loro sintassi.
font-family: nome font
imposta il tipo di carattere da utilizzare
font-size: numero
imposta la dimensione del carattere da utilizzare
font-weight: bold
imposta il grassetto per le scritte contenute

lunedì 5 marzo 2007

Comandi per il colore

All'interno dell'Attributo style specificare il valore per background-color per colorare lo sfondo, o color per colorare il testo.

Il comando ha senso se inserito nei tag <BODY>, <P>, <DIV>

Per esempio, provate ad inserire la seguente porzione di codice in un file HTML già esistente.

<P STYLE="background-color: green; color: red;">
<DIV STYLE="color: blue;">Giovanni Pascoli</DIV>
</P>

I Fogli di Stile

Come già precisato a lezione, vogliamo separare le informazioni di struttura del testo da quelle di presentazione.

Queste, in particolare, verranno raggruppate interamente in un attributo del tag HTML in uso, l'attributo STYLE, e impostate con un linguaggio particolare.

Ogni comando che possiamo dare ha la seguente struttura:

comando: valore;

Dove si raccomanda allo studente di ricordarsi i due punti e il punto e virgola. Inoltre i comandi possono essere accodati uno dietro l'altro in modo da poter impostare più opzioni grafiche in un comando solo.

Vediamo adesso un semplice esempio, senza bisogno di spiegare tutti i comandi utilizzati:

Testo

</P>

lunedì 26 febbraio 2007

Il Tag <DIV>

Una delle prime esigenze, quando si presenta un testo, è quella di personalizzare l'aspetto grafico del proprio testo. Per farlo può essere necessario suddividere la propria pagina in unità che non sono identificabili con i paragrafi. Possiamo identificarli come porzioni di testo della pagina, approfondimenti o semplici suddivisioni lungo la riga del testo.
Il tag di riferimento è <DIV> e </DIV>. All'interno del tag va inserito il codice HTML che dovrà essere visualizzato all'interno del DIV.
Provate a inserire il seguente esempio di codice in un file HTML e a visualizzarne il risultato:

<HTML>
  <HEAD>
    <TITLE>Poesie</TITLE>
  </HEAD>

  <BODY>
    <P>
      <DIV>Giovanni Pascoli</DIV><BR>
      <B>La cavalla storna</B>
    </P>
    <P>
      Nella Torre il silenzio era già alto. <BR>
      Sussurravano i pioppi del Rio Salto. <BR>
      I cavalli normanni alle lor poste <BR>
      frangean la biada con rumor di croste.<BR>
      Là in fondo la cavalla era, selvaggia, <BR>
      nata tra i pini su la salsa spiaggia; <BR>
      ...
    <P>
  </BODY>
</HTML>

martedì 20 febbraio 2007

Il Tag <P>

Iniziamo introducendo il concetto di paragrafo. Dal dizionario un paragrafo una delle parti in cui sono divisi i capitoli di un testo. Noi considereremo un paragrafo come un'unità logica di testo dotata di un significato a sè stante; caratteristica particolare di un paragrafo è che il testo, al termine di un paragrafo va a capo.

In HTML un paragrafo si ottiene tramite il tag <P> e il conseguente </P>. L'apertura del tag e la sua chiusura forzano il Browser a far andare a capo il testo e a separare il contenuto del paragrafo dal testo precedente con un piccolo spazio.

Il tag <P> può essere utilizzato solo all'interno del tag <BODY>.

Esercitazione:

Provare a scrivere un documento HTML contenente una poesia, includendo ogni strofa in un paragrafo, e andando a capo ad ogni verso con il comando <BR>. Qual è la differenza fra i due comandi?

lunedì 19 febbraio 2007

Struttura di un Documento HTML

In coda a questo post riporto la struttura base di un file HTML. Ricordo ad ogni studente di scrivere tale struttura ogni volta che crea un nuovo file, in modo da evitare errori. Le parti riportate in corsivo sono le parti che gli studenti devono modificare.

Si ricorda, inoltre, che la parte compresa tra <HEAD> e </HEAD> non verrà visualizzata nella pagina e contiene la descrizione del documento, mentre la parte tra <BODY> e </BODY> è il testo vero e proprio della pagina che verrà visualizzato sul Browser.

Segue il codice della struttura base:

<HTML>
   <HEAD>
     <TITLE> Il titolo della pagina</TITLE>
   </HEAD>
   <BODY>
     Il contenuto della pagina
   </BODY>
</HTML>

giovedì 15 febbraio 2007

Creare un documento HTML

La seguente procedura è quella utilzzata a scuola durante la lezione. Esistono altri metodi per creare e iniziare a scrivere un file HTML, ma verranno presentati in seguito. Per ora, vi basta seguire le istruzioni:

Aprire la cartella in cui si vuole salvare il nuovo file;
Fare click con il tasto destro nell'area vuota della cartella e selezionare il menu Nuovo e poi la voce Nuovo Documento di Testo.
Rinominare il file corrente da Nuovo documento di testo.txt a Nome File.html dove possiamo sostituire nome file con il nome della nostra pagina.
Premere invio e selezionare Ok nella finestra che compare. Se non avete commesso errori al file viene associata l'icona di Internet Explorer.
Aprire con Internet Explorer il file appena creato.
Selezionare il menu Visualizza e, poi, la voce HTML; si aprirà la finestra del Blocco Notes di Windows.

Bene a questo punto non vi resta che inserire il codice HTML del vostro file e seguire le ultime due istruzioni per visualizzare le modifiche sul browser:

Salvare dal Blocco Notes di Windows le modifiche al file.
Andare nella finestra di Intrnet Explorer precedentemente aperta e fare click sul bottone Aggiorna.

Se il codice è corretto apparirà la pagina come l'avete progettata.

Massimo Sammartino - Didattica