Caricare documenti e articoli online 
INFtub.com è un sito progettato per cercare i documenti in vari tipi di file e il caricamento di articoli online.


 
Non ricordi la password?  ››  Iscriviti gratis
 

Cos'è l'HTML (dove si parla di ipertesti, link, reti e altre diavolerie)

informatica



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>

<HEAD>

<TITLE>La mia prima home page</TITLE>

</HEAD>

</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>

<HEAD>

<TITLE>La mia prima home page</TITLE>

</HEAD>

<BODY>


</BODY>

</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>

<HEAD>

<TITLE>La mia prima home page</TITLE>

</HEAD>

<BODY background="sfondo.gif">

</BODY>

</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>

<HEAD>

<TITLE>La mia prima home page</TITLE>

</HEAD>

<BODY background="sfondo.gif">

<FONT color="black" face="arial" size="7"><B>BENVENUTI</B></FONT>

</BODY>

</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>

<HEAD>

<TITLE>La mia prima home page</TITLE>

</HEAD>

<BODY background="sfondo.gif">

<FONT color="black" face="arial" size="7"><B>BENVENUTI</B></FONT><BR>
<BR>

<IMG SRC="girasole.jpg" ALT="Foto di girasoli" WIDTH="400" HEIGHT="272">

</BODY>

</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>

<HEAD>

<TITLE>La mia prima home page</TITLE>

</HEAD>

<BODY background="sfondo.gif">

<DIV ALIGN="center"><FONT color="black" face="arial" size="7"><B>BENVENUTI</B></FONT>
</DIV>
<DIV ALIGN="center"><FONT color="black" face="arial" size="5"><B>Nella mia home page personale</B></FONT></DIV><BR><BR>

<DIV ALIGN="center"><IMG SRC="girasole.jpg" ALT="Foto di girasoli" WIDTH="400" HEIGHT="272"></DIV>

</BODY>

</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


Hits: 1990
Apprezzato: scheda appunto

Commentare questo articolo:

Non sei registrato
Devi essere registrato per commentare

ISCRIVITI



Copiare il codice

nella pagina web del tuo sito.


Copyright InfTub.com 2024