 |  | |
|
| | |
|
| |
Cos'è l'HTML
(dove si parla di ipertesti,
link, reti e altre diavolerie...)
HTML è una sigla che viene da una frase inglese che vuol
dire: " Linguaggio di contrassegno di ipertesti"
Sei spaventato da questi
paroloni? non c'è motivo.... imparare l'html non è solo roba da grandi!
Anche alla tua età puoi essere
capace di costruire con l'html una bella pagina web dove potrai parlare delle
tue passioni, della tua squadra preferita, raccontare quello che succede nella
tua classe o parlare dei tuoi amici.
Per capire cos'è un ipertesto
prova a pensare ad una pagina web come se fosse un giornalino, che ha il suo
titolo, i suoi disegni, il suo testo, i suoi colori... ma anche qualche effetto
speciale in più, per esempio immagini che si muovono come cartoni animati e,
soptattutto, bottoncini o parole che, se vengono cliccate con il pulsante del
mouse, ti portano immediatamente in un'altra pagina o in un altro sito, anche
lontanissimo.
Un esempio? prova a cliccare su questa parola e sta a vedere
cosa succede!
Mica male, no? Questi sono i
vantaggi di un ipertesto, non c'è bisogno di passare da una pagina all'altra
come in un libro, basta cliccare e si passa immediatamente ad altro.
Da un testo che leggi passi ad
un disegno che illustra ciò che stai leggendo, oppure alla spiegazione di una
parola difficile che hai incontrato oppure ad altro ancora.... questi salti li
puoi fare cliccando su quelli che si chiamano "link".
Li puoi riconoscere facilmente
perchè sono scritti in modo un po' diverso dal resto delle parole e soprattutto
perchè quando la freccetta del mouse ci passa sopra si trasforma in una manina.
Tranquillo... di link parleremo
più avanti, ma se sei curioso e vuoi vedere subito un link in azione clicca qui!
Apri il documento HTML
Per creare la tua pagina HTML,
come ti ho 636f55g già detto, non hai bisogno di programmi particolari. Hai già tutto
quello che ti serve sul computer, cioè un programma che si chiama "blocco
note", e che trovi già installato cliccando su START (in basso a sinistra
sul tuo schermo), poi su ACCESSORI e infine su BLOCCO NOTE. [Clicca qui per
l'immagine].
Si apre un programma con una
pagina bianca sulla quale puoi scrivere. In alto a sinistra trovi 4 voci:
"File", "Modifica", "Cerca" e "?". [Clicca qui per
l'immagine]
La prima cosa che ti conviene
fare è salvare il documento sul quale, d'ora in poi lavorerai per creare la tua
pagina.
Clicca su "File" e
poi su "Salva con nome" [Clicca qui per
l'immagine].
A questo punto si apre una finestra di piccole dimensioni [Clicca qui per
l'immagine].
Come prima cosa clicca sul
bottone 
e dai alla cartella il nome
"sito".
Poi dove è scritto "nome file"
scrivi "pagina.htm" [Clicca qui per
l'immagine], mentre dove è scritto "salva come" clicca su "Tutti
i File *.*" [Clicca qui per
l'immagine].
Se hai seguito correttamente
quanto detto la finestra ti appare in questa forma: clicca qui
A questo punto hai preparato
tutto per poter cominciare a scrivere la tua pagina html con i suoi tag!
Devi sapere, per prima cosa,
che le pagine HTML sono sempre aperte e chiuse con un tag particolare che è
questo: <HTML>.
Quindi la prima parola che
scriverai sul qualunque pagina web sarà <HTML> e l'ultima sarà </HTML>.
Tutto ciò che andrai a inserire
tra questi tag sarà letto dal computer come codice HTML.
Dunque la prima cosa che devi scrivere nella tua pagina bianca è:
<HTML>
</HTML>
A questo punto clicca su
"File" e poi su "Salva" [Clicca qui per
l'immagine].
Dai un titolo alla pagina
Ogni pagina HTML ha due nomi:
il primo è quello del file (nel nostro esempio pagina.htm), il secondo è quello
che appare nella parte superiore del browser [Clicca qui per
visualizzare quello di HTML.it]. I browser sono i programmi che permettono di
navigare in Internet, come per esempio Internet Explorer e Netscape.
Nella lezione precedente hai imparato come creare
e dare un nome al file HTML, mentre in questa ti spiego come dare un titolo
alla pagina, in modo che questo titolo appaia sulla parte superiore del
browser.
Prima di sapere qual è il tag
per dare un titolo alla pagina devi conoscere un tag di nome HEAD (in inglese
significa: "intestazione"). Questo tag contiene tutte le
informazioni principali della pagina, tra i quali, appunto, il titolo. Il tag
TITLE (in inglese significa: "titolo") è quello che dà il
titolo alla pagina e va scritto in questo modo:
<TITLE>La mia prima home page</TITLE>
"La mia prima home page" è il titolo della pagina, che il browser mostra nella striscia superiore. Come detto in precedenza, il titolo fa parte delle informazioni generali sulla pagina, e dunque va inserito all'interno del tag HEAD:
<HEAD>
<TITLE>La mia prima home
page</TITLE>
</HEAD>
A questo punto devi salvare il
codice che finora hai scritto. Per farlo clicca su "File" e poi su
"Salva".[Clicca qui per l'immagine]
Il codice HTML che finora hai scritto è questo:
|
<HTML> |
Vuoi
vedere come appare in questo momento la tua pagina? Clicca qui
Tu dirai: " Ma come, la
pagina è tutta bianca?"
Certo! Di tutte le cose che hai
scritto sinora solo il contenuto del TITLE è visibile e lo puoi leggere, come
ti ho detto prima, nella striscia superiore del browser.
Tutti i tag che hai scritto,
invece, rimarranno invisibili per chi vedrà la tua pagina quando l'avrai
finita, perchè sono solamente comandi per il computer e per il browser.
E adesso viene il più bello,
perchè passiamo finalmente a riempire tutto quel bianco!
Lo sfondo della pagina
Se il tag <HTML>
ha il compito di aprire e chiudere il documento HTML, il tag <BODY>
(che in inglese significa "corpo"), ha il compito di contenere
i testi, le immagini e tutti gli altri elementi della pagina.
Il tag <BODY> è a
sua volta racchiuso nel tag <HTML> e si apre subito dopo il tag di
chiusura dell'HEAD, per cui il codice da scrivere sarà diventato questo:
|
<HTML> |
Il tag BODY non ha solo il compito di ospitare il testo e le immagini della pagina, ma anche quello di dare colore allo sfondo.
Finalmente è arrivato il momento di
scegliere un bel colore di sfondo per la pagina!
Se, per esempio, desideri che
il colore di sfondo della tua pagina HTML sia blu, il codice per farlo è:
<BODY
bgcolor="blue">
</BODY>
"bgcolor" è un attributo del tag BODY e lo si
scrive all'interno delle parentesi angolari.
Vedi l'effetto che l'attributo
bgcolor ha sulla pagina!
Magicamente la pagina che prima
era bianca diventa blu!
Non male, vero?
I colori che si possono scegliere
devono essere scritti in inglese, perciò devi utilizzare i seguenti nomi:
verde - green
rosso - red
blu - blue
nero - black
bianco - white
rosa - pink
giallo - yellow
Se per esempio vuoi che lo
sfondo sia giallo invece di blu, non devi far altro che sostituire
"yellow" a "blue":
<BODY
bgcolor="yellow">
</BODY>
Guarda adesso com'è la pagina!
Ma non finisce qui: puoi anche
decidere di avere per sfondo, invece di un semplice colore, un'immagine, che il
browser si occuperà di ripetere all'infinito sulla pagina.
Dunque non solo un colore
unico, ma un'immagine complessa come questa.
Farlo è molto semplice.
Prima di tutto devi inserire
l'immagine sfondo.gif nella stessa
cartella nella quale hai messo il file "pagina.htm". Poi devi
semplicemente scrivere questo codice:
<BODY
background="sfondo.gif">
</BODY>
Al posto dell'attributo
"bgcolor" abbiamo inserito nel tag body l'attributo "background"
Come vedi l'immagine ora non è
più solamente un quadratino, ma viene ripetuta sino a riempire tutto lo sfondo.
Se adesso aggiungiamo anche tutti gli altri tag, il tuo documento HTML sarà il seguente:
|
<HTML> |
Vedi l'esempio in azione
Ora che hai imparato ad
inserire gli sfondi nelle pagine HTML, clicca su "File" e poi su
"Salva" [Clicca qui per l'immagine].
Il benvenuto ai visitatori
Dopo aver messo uno sfondo alla
tua pagina, certo vorrai scriverci qualcosa, no?
Inserire del testo è molto
facile, basta scriverlo tra l'apertura e la chiusura del tag <BODY>.
L'HTML ti permette di scegliere
di che colore, aspetto e dimensione debbano essere le lettere, grazie al tag <FONT>
ed i suoi attributi. Come quasi tutti i tag HTML anche il tag FONT deve essere
aperto e chiuso. Tutto ciò che è compreso al suo interno assume l'aspetto
desiderato.
Per esempio, se vuoi scrivere
"benvenuti" in nero devi aggiungere all'interno del tag FONT
l'attributo "color":
<FONT color="black">benvenuti</FONT>
Guarda qual è il risultato
In questo modo il testo compreso tra
i tag di apertura e chiusura FONT è nero.
Anche in questo caso vale la
regola dei nomi dei colori scritti in inglese:
verde - green
rosso - red
blu - blue
nero - black
bianco - white
rosa - pink
giallo - yellow
Se non ti basta cambiare il
colore, ma vuoi anche cambiare l'aspetto delle lettere, aggiungi l'attributo "face":
<FONT color="black"
face="arial">benvenuti
</FONT>
Vedi l'esempio in azione
Face="arial"
richiama un tipo particolare di carattere tipografico che si chiama "arial".
Esistono migliaia di font
diversi, per accorgertene basta che tu dia un'occhiata ai tuoi giornalini ed ai
tuoi libri e noterai che le scritte possono avere aspetti molto diversi.
Se il testo
"benvenuti" ti sembra scritto troppo in piccolo, puoi cambiare la
grandezza delle lettere con l'attributo "size":
<FONT color="black" face="arial" size="7">benvenuti</FONT>
Vedi l'esempio in azione
Hai visto che cambiamento?.
Puoi scegliere una grandezza minima di 1 e massima di 7.
Questo è tutto quello che puoi fare
col tag FONT, ma puoi ancora modificare il testo con altri tag.!
Per esempio se vuoi che il
testo sia grassetto devi utlizzare il tag <B> (sta per Bold, che
in inglese significa "grassetto"). Ecco un esempio:
<B>benvenuti</B>
Vedi l'esempio in azione
Le lettere sono diventate più
scure e cicciottelle, vedi?
Con lo stesso metodo è
possibile creare testo corsivo. Basta usare il tag <I> (sta per
Italic, che in inglese significa "corsivo"):
<I>benvenuti</I>
Vedi l'esempio in azione
Adesso le lettere sono più inclinante
verso destra.
Se invece vuoi sottolineare il
testo devi utilizzare il tag <U> (sta per Underline, che in
inglese significa "sottolineato"):
<U>benvenuti</U>
Vedi l'esempio in azione
A questo punto proviamo a
mettere che mettere insieme tutti i tag per il testo :
<FONT color="black"
face="arial"
size="7"><B><I><U>benvenuti</U></I></B>
</FONT>
Vediamo cosa è venuto fuori!
Il testo "benvenuti" è
nero, tipo arial, grandezza 7, grassetto, corsivo e sottolineato.
A questo punto ciò che sarà
scritto sulla tua pagina html sarà questo:
|
<HTML> |
Vedi che aspetto ha la tua pagina
per un visitatore
Comincia ad essere carina, no?
Ora che hai imparato colore e
modificare il testo nelle pagine HTML, clicca su "File" e poi su
"Salva" [Clicca qui per
l'immagine].
Inserisci una foto
Dopo aver imparato i comandi
per il testo ed aver dato il benvenuto ai tuoi visitatori è il momento di
inserire un'immagine all'interno della pagina.
Per esempio inseriamo una bella
immagine di girasoli [clicca qui per vedere
l'immagine].
Le immagini inserite nelle
pagine Internet possono sono di due tipi o formati: GIF o JPG.
Anche se i due nomi sembrano all'apparenza complicati si tratta di semplici
abbreviazioni di termini inglesi.
Tutte le immagini hanno un nome
e un formato. Per esempio, se l'immagine si chiama "girasole.gif", il
nome dell'immagine è "girasole", mentre il suo formato
".gif".
Quale utilizzare tra i due
formati grafici? E' meglio usare il formato JPG per inserire fotografie e in
generale immagini con molti colori e sfumature, mentre il formato GIF è più
adatto a disegni e immagini con pochi colori e poche sfumature. Per esempio,
questa fotografia:
va salvata in formato JPG perchè ha molti colori e molte sfumature. Mentre questa immagine:
va salvata in GIF perchè ha
pochi colori e poche sfumature.
Oltre ad avere un nome, le
immagini hanno anche una loro grandezza che si misura in Kb, cioè Kilobyte. E'
come se si trattasse di un "peso" delle immagini, che invece di essere
espresso in Kilogrammi è espresso nell'unità di misura dei Kb.
Il peso in Kb delle immagini è
molto importante perchè più è alto (quindi più l'immagine "pesa"),
più è lenta la navigazione sul tuo sito.
Chi verrà a vedere la tua
pagina su Internet dovrà aspettare che il suo browser "legga" le
immagini che tu avrai inserito... se tu avrai scelto immagini troppo pesanti il
tuo visitatore potrebbe stufarsi di aspettare e andarsene, e sarebbe davvero un
peccato!
Consideriamo, per esempio, le due
immagini che abbiamo creato. Hanno un peso in Kb molto differente.
girasole.jpg pesa 31 Kb
pokemon.gif pesa 3 Kb
Quasi 10 volte di meno! Questo
perchè l'immagine dei girasoli ha molti colori e molte sfumature, mentre la
seconda immagine ha pochi colori e nessuna sfumatura. Il visitatore che accede
sulla tua pagina impiegherà molto più tempo a vedere l'immagine dei girasoli
perchè più pesante della seconda.
A questo punto sta a te
scegliere quale delle due immagini inserire. Visto che a noi piace la natura
decidiamo di inserire nella pagina l'immagine "girasole.jpg".
Inserire un'immagine è molto
semplice, basta utilizzare un nuovo tag:
<IMG SRC="girasole.jpg">
Abbiamo utilizzato il tag IMG che richiama con SRC l'immagine "girasole.jpg". Basta questo per inserire l'immagine dei girasoli nella tua pagina. Il file "girasole.jpg" deve essere presente nella stessa cartella del file "pagina.htm". Se così non fosse devi richiamare l'immagine seguendo il suo percorso sul tuo computer. Per esempio, se l'immagine è presente in un'altra cartella di nome "immagini", il tag verrà scritto in questo modo:
<IMG SRC="immagini/girasole.jpg">
Le immagini possono avere un
testo di commento, che apparirà quando la freccetta del mouse starà ferma su di
loro.
Per creare un commento alle
immagini devi inserire l'attributo "alt":
<IMG SRC="girasole.jpg" ALT="Foto di girasoli">
ALT contiene tra virgolette il
commento, che puoi sostituire con quello che preferisci.
Nei due esempi abbiamo scritto il
nome dell'immagine senza stabilire la sua larghezza e altezza, ma se
aggiungeremo anche quelle all'interno del tag, il caricamento dell'immagine
sarà più veloce.
Per farlo è sufficiente aggiungere
all'interno del tag IMG SRC anche gli attributi "width"
(larghezza) e "height" (altezza):
<IMG SRC="girasole.jpg" ALT="Foto di girasoli" WIDTH="400" HEIGHT="272">
I valori della larghezza e
dell'altezza non sono espressi in centimetri, ma in pixel, che è l'unità
di misura più usata nella grafica fatta col computer.
Anche se il browser richiama
automaticamente la grandezza dell'immagine, utilizzare WIDTH e HEIGHT è sempre
utile.
E adesso aggiungi anche questo nuovo tag al tuo documento HTML, come nell'esempio:
|
<HTML> |
Vedi l'esempio in azione
Ora che hai imparato ad
inserire immagini nelle pagine HTML, clicca su "File" e poi su
"Salva" [Clicca qui per
l'immagine].
Vai a capo e centra il testo
Facciamo il punto della situazione:
ora sai creare uno sfondo, inserire del testo e delle immagini.
Ma come si fa a sistemare per
bene tutti questi elementi nella pagina? Come si fa per mettere un'immagine al
centro? Come si fa per andare a capo?
Non c'è problema, anche
stavolta è molto facile farlo!
Per andare a capo puoi
utilizzare il <BR> che a differenza dei TAG che hai visto finora non ha
bisogno di essere richiuso. Per esempio, se vuoi scrivere su due righe questo
testo:
Benvenuti nella mia prima
home page
Il codice da utilizzare è
questo:
Benvenuti<BR>nella mia prima home page
Devi sapere che, costruendo una
pagina web, non serve a nulla andare a capo col tasto ENTER della tastiera...
per andare a capo puoi usare soltanto il tag <BR>.
E' uno dei TAG che userai più
spesso, te ne accorgerai!
Se invece vuoi mettere al
centro della pagina testo o immagini devi utilizzare quest'altro TAG:
<DIV ALIGN="center">Benvenuti!</DIV>
Vedi l'esempio in azione
Con lo stesso TAG è possibile
allineare il testo a destra, sostituendo a "center" l'attributo
"right" (che in inglese vuol dire destra:
<DIV ALIGN="right">Benvenuti!</DIV>
Vedi l'esempio in azione
Non è necessario, invece, alcun
tag per allineare a sinistra, perchè il browser lo fa automaticamente, se non
gli dai un comando diverso.
E adesso aggiorna la tua pagina sul blocco note di Windows, che avrà questo aspetto:
|
<HTML> |
Guarda ora com'è diventata la tua
pagina!
Ora che hai imparato ad andare
a capo e centrare gli oggetti nelle pagine HTML, clicca su "File" e
poi su "Salva" [Clicca qui per
l'immagine].
|
Privacy |
Articolo informazione
Commentare questo articolo:Non sei registratoDevi essere registrato per commentare ISCRIVITI |
Copiare il codice nella pagina web del tuo sito. |
Copyright InfTub.com 2024
