Corso base di Html lezione 1

9 02 2008

Lezione 1 HTML 

Introduzione

Oggi con l’avvemto della rete Internet ogni operatore informatica si confronta con le tecnologie che il web richiede. L’utilizzo della rete Intetnet inoltre come area di divulgazione, di sviluppo comunicativo, di commercio e di altre innumerevoli attività ha determinato una sempre maggiore conoscenza da parte di molte persone di quelli che sono gli strumenti per la creazione di documenti web. Ognuno di noi si troverà almento una volta se usa il computer a dover realizzare un documento ipertestuale per una presentazione, un sito personale. Per imparare a scrivere pagine web dobbiamo capire che cosa è Internet. Internet è una rete costituita da client, server, reti wan. I client sono gli elaboratori che navigano su Internet cosultando il web, la posta elettronica. Ogni utente singolo che accede tramite il proprio eleaboratore. I server sono grossi calcolatori che mettono a disposizione su Internet risorse condivise come siti web, appunto indirizzi email, file, contenuti multimediali. I client per usufruire di questi servizi si collegano appunto su questi server che hanno un identificazione unica sul web. Ci sono poi le reti wan che sono reti di elaboratoriche appartengono alla stessa realtà azienda, banca, ente, ecc chiusa all’esterno e a cu accedono solo che appartiene a tale rete.Internet è quindi una rete interconnessa di queste tre entità attraverso delle dorsali e reti pubbliche di telecounicazione messe a disposizione dagli operatori telefonici di tutto il mondo. Senza entrare nel funzionamento della rete internet i siti web rappresentano delle cartelle su server remoti accessibili a chiunque in lettura, e sol ad utenti autorizzati detti webmaster per la modifica. Ogni persona che vuole creare un sito web o una semplice pagina web deve conoscere il linguaggio di scrittura degli ipertesti chiamato HTML ovvero HyperText Markup Language (linguaggio di marcamento degli ipertesti). Un ipertesto è una collezione di documenti, immagini, audio e altro che sono collegati in modo da permettere al lettore una consultazione personalizzata sul web. Ad esempio se si sta consultando un elenco telefonico in linea una volta trovato il numero è possibile aprendo un collegamneto ipertestuale presente sul sito di partenza la mappa stradale dell’indirizzo cercato. In generale gli ipertesti sono anche detti testi flessibili proprio per la personalizzazione nella lettura, vista no più come sequenziale come un libro, ma attraverso un itinerario pesonalizzato. Ogni sito web è costituito da una cartella all’interno del quale sono posizionati i files che hanno estensione htm. All’interno secondo una propria organizzazione delle sottocartelle contenente le immagini, documenti, video, suoni. Questa cartella che contiene i files ipertestuali alla fine quando il sito sarà su Internet verrà pubblicato ovvero posizionato su una cartelle remota pubblica.
Struttura base di un documento HTML

Ogni documento html è costituito da tag e contenuti. Un tag è una scrittura del tipo:

<nome elemento> cotenuto </ nome elemento>, ove “nome elemento” è un codice specifico di html, mentre contenuto è il testo vero e proprio. Come si può notare ogni tag ha una chiusra del tipo </nome elemento>. La chiusura è presente per la maggioranza di essi tranne qualcuno.
Sulla falsa riga di quanto detto la struttura generale di una pagina HTML è così organizzata:

<html>
<head> Intrstazione </head>
<title> Titolo nella barra del titolo del Browser</title>
<body> Contenuti con paragrafi, immagini ecc </body>
</html>

Come si può notare ogni pagina comincia con <html> e termina con la sua chiusura per indicare al Browser che si tratta di un documento ipertestuale. Poi l’intestazione rappresenta il titolo nella pagina. Il tag <body> rappresenta proprio il corpo del testo ovvero i contenuti dei nostri documenti ipertestuali.
All’interno dei tag citati è poi possibile inserire ulteriori tag che sono di formattazione, tabelle, immagini, oggetti e di modulo.

Primi comandi di formattazione

Ogni paragrafo in html deve cominciare con il tag <p> nel quale però l’allineamento del testo diventa quello predefinito ovvero in alto a sinistra. Il tah <p> può essere modificato con l’aggiunta del valore “align” che indica il tipo di allineamento del testo. Sono ammessi valori “left”, “center”, “right”, “justify”. Ad ongi paragrafo, frase e parola possono essere aggiunte informazioni sulla formattazione dei caratteri. Ad esempio <b> indica testo in grassetto, <i> in corsivo, <u> sottolineato, Vediamo un esempio

<html>
<head> Primi comandi di formattazione <p></head>
<title> Secondo esercizio </title>
<body><p> Testo in allineamento predefinito</p>
<p align=”center”><b>testo al centro in grassetto</b></p>
<p align=”right><u> testo a destra sottolineato</u></p>
<p align=”left><i><u><b>testo a sinistra in grassetto, corsivo, sottolineato</b></u></i></p>
</body>
</html>

Salviamo con nome secondo.htm, e aprimo nel browser per vedere l’effetto.

Stili, Dimensioni del carattere

Le misure delle dimensioni dei caratteri sul web sono molto importanti. Esistono varie possibilità per misurare i caratteri in termini dimensioni, così come altri elementi della pagine html. Le unità di misura più diffuse sono il centimetro, i millimetri, em, pixel. Nell’unità di misura in pixel, cm, mm le dimensioni dei caratteri così come altri elementi della pagina html hanno una dimensione fissa a prescindere dalla risoluzione a cui si mostra la pagina web, e dalle dimensioni adottate dal browser. Se invece si utilizza em si rendono le pagine scalabili; infatti si tratta di unità di misura relative rispetto all’altezza dell’elemento del quale si definisce la dimensione. Quest’ultima è utilizzabile solo mediante stili css. In Windows il Browser assume come unitù di misura standard 10 punti. Questa impostazione può essere variata nelle proprietà avanzate dello schermo. Infatti nella finestra proprietà schermo -> impostazioni -> avanzate è specificato il numero dei punti per pollice nei caratteri. Ovviamente l’altezza cambia in funzione della risoluzione. L’impostazione predefinita è di 10 punti in stile arial. Nel Browser i caratteri visualizzati sono in sitle times new roman sempre di 10 punti. Questa impostazione può essere modificata nelle Opzioni Internet – > Generale -> Carattere. In modo standard il programma di navigazione assume come dimensione 3 la dimensione media di 10 punti. Infatti nella voce di menù visualizza – > Carattere, è possibile variare la dimensione da piccolissimo di misura relativa 1 a molto grande di misura 5. Da questo si deve comprendere che la dimensione standard adoperata dal browser dipende fortemente dalle impostazione dello schermo. Si possono impostare le dimensioni dei caratteri con il tag <font size=”numero”> che indica la dimensione del testo rispetto a quella predefinita.

<html>
<head> Primi comandi di formattazione <p></head>
<title> terzo esercizio </title>
<body><p> <font size=”5″>Testo in allineamento predefinito</font></p>
<p align=”center”><font size=”-3″><b>testo al centro in grassetto</font></b></p>
<p align=”right><u> testo a destra sottolineato</u></p>
<p align=”left><font size=”3″><i><u><b>testo a sinistra in grassetto, corsivo, sottolineato</b></u></i></font></p>
</body>
</html>

Vediamo il risultato del documento terzo.htm .Oltre che le dimensioni è possibile specificare le variazioni di stile. Il grassetto è applkcato con il tga <b>, il sottolineato con il tag <u>, il carattere in corsivo con il tag <i>. E’ possibile specificare anche la famiglia di caratteri con il tag <font face=”tipo carattere”>, il colore con <font color=”c olore rgb/ nome colore”>. La codifica RGB è trattata al capitolo successivo. Essa consiste nello specificare una terna di numeri tra 0 e 255, che specificano tre tonalità di colore rosso, blu, verde. Valori bassi sono colori scuri. valori alti sono colori accessi e chiari. Vediamo un esempio di pagina html con variazioni di stile di carattere.

<html>
<head> Primi comandi di formattazione <p></head>
<title> Quarto esercizio </title>
<body><p> <font face=”Arial”>Testo Arial</font></p>
<p ><font face=”Lucida Console”>Carattere Lucida Consolre</font></p>
<p><font face=”Courier New”><font color=”darkred”> testo in carattere Cuorier New colore rosso</font></font></p>
<body>
</html>

Il documento ottenuto è quarto.htm


Azioni

Information




%d blogger cliccano Mi Piace per questo: