Appunti sulle basi dell'html

Materie:	Appunti
Categoria:	Informatica
Download:	120
Data:	31.01.2001
Numero di pagine:	7
Formato di file:	.doc (Microsoft Word)

La semplice pagina web
La più semplice pagina web qui presentata ha l'intenzione di mostrarti la facilità del linguaggio HTML. Se poi vorrai aggiungere optionals alla tua pagina web, le nostre guide e lezioni online ti insegneranno come fare.
Per creare questa semplice pagina puoi utilizzare Windows Notepad o qualsiasi Word Processor. Una volta terminato terminato di scrivere il testo salvalo come file .txt o file testo, in seguito rinominalo con estensione .html. Carica il nuovo file html sul tuo web server XOOM.it utilizzando una delle modalità presentate nelle lezioni FTP.
Apri Notepad o un word processor e digita quanto segue... Questa è la mia prima pagina web! Presto il mio sito web si arricchirà con l'aiuto di XOOM.it Homepage Help Center.
Congratulazioni, hai appena creato una semplice pagina web. Ricordati di sfogliare la parte restante della guida html o di seguire le nostre lezioni online per imparare ancor di più.
Aggiungi un colore o un'immagine di background alla tua pagina
Una delle cose più semplici da imparare riguarda l'aggiunta di un colore o di una immagine di background alla tua web page. Se consulti la nostra semplice pagina d'esempio, noterai un tag html denomitato . All'interno del tag Body noi possiamo fissare il colore o l'immagine di background desiderata per la nostra web page.
Per avere un background bianco, è necessario aggiungere al tag la seguente stringa
Naturalmente potrai adottare altri colori oltre al bianco. Puoi consultare l'intera lista dei colori disponibili nella nostra tabella dei colori.
Per utilizzare un'immagine invece di un colore, aggiungiamo al tag :
Naturalmente filename.gif è da sostituire con il nome della tua immagine. Non dimenticare che quando utilizzi un file immagine come background, è necessario fare l'upload di quell'immagine sia separatamente dal tuo web site, che insieme al tuo file html.

Aggiungi testo in corsivo, grassetto o sottolineato
Per dare maggior enfasi ad una pagina web si possono usare diversi accorgimenti fra i quali l'uso dei tags Grassetto, Corsivo e Sottolineato.
Per creare un testo in grassetto utilizza il seguente tag: Questo testo è in grassetto
Per creare un testo in corsivo utilizza il seguente tag:
Questo testo è in corsivo
Per creare un testo sottolineato utilizza il seguente tag: Questo testo è sottolineato
Se tu scegli di usare questi tags, ricordati che utilizzandoli in modo poco frequente darai maggior enfasi al testo. Al contrario se verranno ripetuti con troppa frequenza il testo rimarrà poco enfatizzato.
Aggiungi intestazioni alla tua pagina
Talvolta è necessario utilizzare delle intestazioni per titoli e sottotitoli. Per creare titoli e sottotitoli segui gli esempi qui di seguito riportati:

Intestazione esempio

Intestazione esempio

Intestazione esempio

Intestazione esempio

Intestazione esempio

Intestazione esempio

Come appena mostrato sono disponibili sei grandezze.
Aggiungi un collegamento E-mail alla tua pagina
Uno dei tags più comunemente usati in html è il tag "mailto". Il tag "mailto" permette agli utenti di inviare posta semplicemente cliccando sul tuo link "mailto".
Per creare un link email usa la seguente stringa:
Mandami posta
Se lo desideri puoi aggiungere due righe descrittive al tag mailto così come segue:
Mandami posta
E' importante sottolineare che non tutti i browsers sopportano l'uso di righe descrittive.
Aggiungi un link ad altre pagine
O prima o poi aggiungerete nuove pagine web al vostro server XOOM.it. Naturalmente prima di fare ciò dovrete creare un link a pagine aggiuntive nella vostra Home Page.
Dovete sapere che il file index.html è la vostra home page mentre la nuova pagina a cui è diretto il collegamento si chiama welcome.html
Per creare un link da index.html verso welcome.html è necessario utilizzare questa stringa html nella pagina index.html.
Clicca qui per vedere la pagina welcome
E' molto semplice! Se il file denominato welcome.html si trova in una directory diversa sul tuo server, devi specificare il nome della directory così come segue:
Clicca qui per vedere la pagina welcome
Naturalmente devi inserire il tuo username, e sostituire il nome della vecchia directory con la tua creata sul server.

Aggiungi immagini alla tua pagina
Aggiungere immagini alla tua pagina web è un lavoro facile e divertente! Per prima cosa scegli l'immagine che desideri inserire nella tua pagina. Nell'esempio che segue ho incluso un'immagine chiamata welcome.gif
Per inserire l'immagine welcome.gif sulla mia pagina web io ho usato la seguente stringa html:
Qui di seguito vengono mostrate altre caratteristiche attribuibili alle immagini.
l'altezza e la larghezza dell'immagine sono specificate in pixels. Utilizzando i tags altezza e larghezza l'immagine si caricherà più velocemente sul browser. L'attributo border=0 indica che l'immagine è priva di bordo; alt= mostra il testo in alternativa all'immagine che non appare sul browser.
Se cerchi invano di far comparire un'immagine... lascia un messaggio sul nostro message boards e un esperto dell' Help Center ti aiuterà. Ricordati di lasciare il tuo nome utente, l'indirizzo URL della pagina e il nome dell'immagine che non compare
Aggiungi un file scaricabile
Puoi includere nella tua web page files direttamente scaricabili. Se hai intenzione di inserire un file scaricabile, si consiglia di comprimere prima il file in formato .zip (per chi utilizza Windows) o formato .sit (per chi utilizza Mac)
I programmi di compressione più conosciuti sono disponibili in Shareware.com
Una volta zippato o compresso il tuo file o i tuoi file, tu puoi aggiungere un link al seguente file con questa procedura:
Clicca qui per scaricare il file
Naturalmente dovrai sostituire filename.zip con il nome del file scaricabile che tu hai compresso. E' necessario anche fare l'upload del tuo file compresso sul tuo web server.
Tutto sui Fonts per la tua Web Page
L'uso dei Fonts offre alle tue pagine un tocco di personalità. Con questa guida imparerai ad utilizzare i tags Font Face, Font Size e Font Color.
Font Face:
Per utilizzare il tag Font Face nelle tue pagine web registra la seguente stringa html:
Questo testo appare con Font Arial.
Nota bene, il Font Face che tu specifichi deve essere installato sul computer dell'utente che visita il tuo sito, solo in questo modo potrà vedere il font da te indicato. Se l'utente non ha installato tale font, vedrà semplicemente il testo con il font di default del suo browser.
Per questa ragione molti web designers stanno unificando i loro fonts per includere i Font faces che la Microsoft distribuisce dal suo web site all'indirizzo http://www.microsoft.com/truetype
Font Size:
Per utilizzare il tag Font Size nelle tue pagine web registra la seguente stringa html:
Questo Font è grandezza 5
Puoi scegliere 7 diverse grandezze di fonts, che spaziano dal Font Size 1 (il più piccolo) al Font Size 7 (il più grande). Prova a sostituire nelle righe che seguono il font 5 al font 1 e osserva cosa succede quando apri la tua pagina da un browser.
Font Color:
Il tag Font Color fa esattamente ciò che suggerisce il nome... cambia il colore dei tuoi fonts.
Per utilizzare il tag Font Color nelle tue pagine web registra la seguente stringa html:
Questo Font è stato scritto utilizzando il colore blu alice.
se desideri vedere una lista color chart.
Ancora una nota finale riguardo ai font tags:
Se desideri usare un Font Size 2 di colore Alice Blue e specificare il carattere arial tutto allo stesso tempo. devi utilizzare la seguente stringa html:
Questo testo è scritto con font size 2 carattere arial e colore blu alice.
Aggiungi file audio alla tua Web Page
Puoi aggiungere un file audio che si attiva automaticamente all'apertura della tua Web Page con l'apposito tag < EMBED SRC="sound.wav">. Utilizzando entrambi i tags EMBED SRC e BGSOUND SRC sarai sicuro che tutti gli utenti che entreranno nel tuo sito, sia attraverso Netscape che Internet explorer, potranno ascoltare il suono in sottofondo.
La scritta HIDDEN="True" del tag EMBED permetterà di avere musica di fondo in Netscape.
Invece di aggiungere uno sfondo musicale alla tua web page, potresti optare per l'aggiunta di un link a un file musicale. Per creare un link al tuo file musicale, prima scegli il file che tu desideri usare. Nell'esempio qui di seguito riportato, io ho scelto il file "welcome.wav"
Clicca qui per ascoltare welcome
Come per tutti i link che fanno riferimento ad altri files, assicurati di fare l'upload del file welcome.wav oltre ai file html.

Aggiungi una lista alla tua pagina Web
Stai cercando una maniera semplice per elencare tutte le tue informazioni? Se così è puoi utilizzare questa guida che ti insegnerà a creare delle liste nella tua pagina web.
HTML sopporta diversi tipi di liste. Tre delle forme più note sono presentate qui di seguito:
... - Lista di definizioni.
... - Lista numerata
... - Lista senza ordine
La lista di definizioni è semplicemente una lista di termini e loro definizioni. Questo esempio illustra come aggiungere liste di definizione nella tua pagina html:
ParolaQuesta è la definizione del primo termine.
ParolaQuesta è la definizione del secondo termine.
La lista ordinata si usa per presentare una lista numerata. Questo esempio mostra come creare una lista ordinata:
Per imparare a lavorare con HTML segui una di queste sessioni.
Dai poi un'occhiata alle nostre lezioni e FAQ.
E se hai delle domande chiedi al nostro staff.
La lista senza ordine solitamente è usata per separare voci precedute da bottoni. Questo è un esempio di lista senza ordine:
Prima voce della lista
Seconda voce della lista
Terza voce della lista
Aggiungi righe orizzontali alla tua pagina !
Impara a creare una riga orizzontale (separatore)!
Durante la navigazione spesso ti sarà capitato di incontrare righe orizzontali.
Una riga orizzontale appare così:
Per riprodurre l'esempio sopra riportato devi semplicemente digitare
Ora impariamo a personalizzare una riga orizzontale
I seguenti attributi ti permetteranno di creare una riga orizzontale secondo le tue idee:
• Dimensione
• Ampiezza
• Allineamento
• Senza ombra
• Colore
Ecco la dimostrazione di una riga orizzontale di dimensione 4, spessore 50% e allineata a sinistra.
Questa è la stringa html da utilizzare per creare la riga sopra descritta:
Naturalmente puoi anche creare una riga orizzontale utilizzando un file immagine. Per avere maggiori informazioni consulta le nostre guide html riguardo all'inserimento di immagini su una pagina web.