Ovvio che in rete ormai si trovano servizi online (alcuni anche gratuiti) che ti permettono creare dal nulla un Sito Web in poche mosse ed il tutto attraverso un interfaccia agevole e guidata dei vari passi da seguire, senza aver la benche' minima conoscenza di cosa sia il linguaggio HTML.
Pero' mi chiedo volete mettere la soddisfazione di imparare un po' di HTML e crearvelo da voi????
In questo post pertanto ho voluto inserire un Corso Base di Html, in 6 Lezioni (tutte raggruppate in un unico post, per rendere piu' agevole la lettura) che vi permeranno di fare i primi passi nella realizzazione di un Sito Web, interamente fatto da Voi.
1) <HTML> - Inizio del documento
2) <HEAD> - All'interno di, <HEAD> e </HEAD> si trova il tag <TITLE>, (titolo della pagina), ma può contenere anche i metatags di cui parleremo nella prossima lezione.
3)<BODY BACKGROUND=" "> Consente di inserire uno sfondo-immagine alla pagina.
Ci sono molti siti internet che mettono a disposizione gratuita, un'ampia scelta di sfondi che, con il tasto destro del mouse puoi salvare e utilizzare nel tuo sito.
Esempio pratico:
<BODY BACKGROUND="Inserisci il nome del file">
In seguito vedremo come utilizzare anche
<BODY BGCOLOR=" ">, che consente di inserire un unico colore allo sfondo.
4) <DIV ALIGN=CENTER> - Consente di allineare al centro il testo o l'immagine.
<DIV ALIGN=LEFT> avrebbe allineato il titolo e il testo a sinistra.
<DIV ALIGN=RIGHT> avrebbe allineato il titolo e il testo a destra.
5) <IMG src=" "> - Consente di inserire un'immagine e puoi inserire una gif, oppure una foto.
Ci sono molti siti internet che mettono a disposizione gratuita, un'ampia scelta di gif animate con le quali decorare e rendere interessanti le proprie pagine Web personali.
5) <H1> - Consente di dare al testo una grandezza: da 1 a 6 (maggiormente ci si avvicina al numero 1 più il testo è grande).
Una volta concluso il testo è necessario chiuderlo: </H1>
6) <BR> - Consente, scrivendo il testo, di andare a capo.
7) <HR SIZE=3 COLOR=BLUE>: - Consente di inserire una linea divisore (in questo caso blu).
<HR> è l'istruzione di base, SIZE è relativo allo spessore scelto e COLOR consente di definire il colore.
Il documento così scritto nel vostro "Blocco note" va poi salvato con questa estensione .html.
Nella voce: "Salva come", seleziona "Tutti i file".
Ora puoi vedere in anteprima sul tuo computer come risulta la tua prima pagina Web.
Seconda lezione
In questa seconda lezione, ti mostrerò come aggiungere la corretta intestazione al documento HTML e come inserire i "Meta Tag".
<!doctype html public="-//ietf//dtd html 4.0//en">
Serve a dare delle informazioni essenziali al browser e si scrive in questa forma standard, cioè, ricopiandola così come è scritta.
<html>
Apertura della pagina HTML (Questo l'ho già spiegato nella scorsa lezione).
<head> (Anche questo l'ho già spiegato l'altra volta).
<meta name="DESCRIPTION" Contenent="Qui scrivi la descrizione del tuo sito, cioè di cosa tratta">
<meta name="KEYWORDS" Contenent="Qui scrivi delle parole chiave che descrivono il contenuto del tuo sito, separate da una virgola. È possibile inserire fino a 1000 caratteri ma evitate di ripetere la stessa parola. Le "KEYWORDS", sono praticamente delle parole che descrivono la tua pagina Web.
Queste parole vengono poi indicizzate nei motori di ricerca, ed è per questo che devono avere un contenuto inerente il tuo sito! Non fare come tanti "furbetti" che introducono ben altre parole chiave che appartengono ad aree di altro tipo, in grado di catturare l'attenzione. E' oltremodo squallido, e agli occhi del visitatore attento, rende di poco prestigio il sito.
<meta name="Author" Contenent="Scrivi qui il tuo nome">
In questo "Meta Tag" va scritto il nome dell'autore delle pagine.
<meta name="GENERATOR" contenent="Blocco note di Win95">
<title>Il titolo della pagina</title>
In questo ultimo "Meta Tag" va inserito il titolo della pagina Web.
Questi "Meta Tag" servono al browser per "identificare" il tuo sito e per introdurlo nei motori di ricerca.
In questa lezione, voglio anche ricordarti di dare attenzione ai diritti d'autore.
Infatti puoi inserire, nella tua pagina web, solo ciò che è frutto di tue creazioni intellettuali, come testo, disegni e foto.
Molti siti mettono a disposizione gratuita, gif animate, sfondi, disegni, musica ecc. ma puoi prelevarli solo quando sei sicuro che siano completamente gratuiti.
Terza lezione
Questa volta vi insegnerò ad inserire la musica o i suoni, e come scrivere in vari caratteri il testo.
La musica
Trovo sia molto importante inserire una musica di sottofondo, specie in alcuni tipi di siti.
Naturalmente sarà la vostra fantasia e il buon gusto a guidarvi nella scelta.
Vediamo insieme come si inserisce una musica o un suono.
Si deve usare il comando <EMBED> in questo modo:
<EMBED src="nome del file audio" AUTOSTRAT=true LOOP=true VOLUME="80" WIDHT=0" HEIGHT="0">
Nello stesso modo puoi inserire un suono.
Ci sono molti siti che mettono a disposizione musiche o suoni e spesso sono gratuitamente disponibili.
Carattere e grandezza del testo
Vediamo ora come scrivere in un determinato carattere.
Con questo Tag - FONT - si modifica il carattere del testo ed ecco la sintassi del tag:
<FONT FACE="ARIAL" SIZE=6 COLOR="BLACK">
Analizziamolo insieme:
In questo caso ho scelto il carattere "ARIAL" ma puoi scegliere tra vari tipi di caratteri, tenendo però presente, che è meglio utilizzare quelli che possano essere riconosciuti da ogni browser.
Ecco i caratteri standard: Times New Roman, Arial, Courier o Line Printer.
SIZE=6 - Dopo la scritta SIZE, puoi aggiungere il numero che indicherà la grandezza del testo.
COLOR=BLACK - Dopo la scritta COLOR puoi aggiungere il colore che vorrai dare al testo, in questo caso nero.
Questo tag, necessita di chiusura che è la seguente: </FONT> e va inserita alla fine del testo.
Quarta lezione
In questa lezione vedremo insieme l'utilizzo di due tag HTML:
<UL>...</UL> Con questo tag puoi creare un'elenco puntato. Tag di apertura: <UL>
Ad ogni riga di testo devi fare precedere il tag <LI>
Tag di chiusura: </UL>
<B>...</B>
Questo tag inserito in apertura, (<B>) prima del testo, e in chiusura, (</B>) dopo il testo, consente di visualizzarlo in grassetto.
Quinta lezione
In questa lezione, impareremo a creare una tabella.
Con le tabelle puoi migliorare notevolmente l'aspetto della tua pagina Web.
La tabella consente di posizionare gli oggetti e il testo in modo più preciso, dando alla pagina un'aspetto migliore e professionale.
Si tratta, praticamente, di una "griglia" su cui si costruisce la struttura della pagina Web.
In sunto ecco i Tag principali:
<TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>
<TABLE> è il tag di apertura. In esso si specifica:
Questa volta vedremo insieme come aggiungere un colore unico di sfondo alla pagina web.
In questo post pertanto ho voluto inserire un Corso Base di Html, in 6 Lezioni (tutte raggruppate in un unico post, per rendere piu' agevole la lettura) che vi permeranno di fare i primi passi nella realizzazione di un Sito Web, interamente fatto da Voi.
CREARE PAGINE WEB IN HTML
1° Lezione
Queste nozioni basilari non hanno altra pretesa all'infuori di quella di potere incominciare a conoscere il linguaggio html in modo semplice, per ragazzi o principianti.
Prima di iniziare a costruire la tua prima pagina Web è necessario che tu decida l'argomento del tuo sito.
Pensa che con il tuo sito potrai esprimere qualcosa di te, e naturalmente progetta un contenuto vivace ed interessante in grado di catturare il visitatore.
Crea un menù, suddividendo così le varie sezioni del sito.
Ecco, ora che hai le idee chiare di cosa vuoi realizzare, incominciamo a scrivere la prima pagina del tuo sito.
Per iniziare, puoi utlizzare il "Blocco note" (viene fornito insieme ad Windows), che vi consente di creare un sito assolutamente unico ed originale, a differenza dei tanti programmi che si trovano. La pagina, in questo modo, la create voi, non il software.
La prima pagina
Cos'è l'HTML?
E' un linguaggio di programmazione indispensabile per creare un sito di qualsiasi tipo.
Ci sono molti siti internet che mettono a disposizione gratuita, un'ampia scelta di sfondi che, con il tasto destro del mouse puoi salvare e utilizzare nel tuo sito.
Esempio pratico:
<BODY BACKGROUND="Inserisci il nome del file">
In seguito vedremo come utilizzare anche
<BODY BGCOLOR=" ">, che consente di inserire un unico colore allo sfondo.
<DIV ALIGN=LEFT> avrebbe allineato il titolo e il testo a sinistra.
<DIV ALIGN=RIGHT> avrebbe allineato il titolo e il testo a destra.
Ci sono molti siti internet che mettono a disposizione gratuita, un'ampia scelta di gif animate con le quali decorare e rendere interessanti le proprie pagine Web personali.
Una volta concluso il testo è necessario chiuderlo: </H1>
<HR> è l'istruzione di base, SIZE è relativo allo spessore scelto e COLOR consente di definire il colore.
Il documento così scritto nel vostro "Blocco note" va poi salvato con questa estensione .html.
Nella voce: "Salva come", seleziona "Tutti i file".
Ora puoi vedere in anteprima sul tuo computer come risulta la tua prima pagina Web.
Seconda lezione
In questa seconda lezione, ti mostrerò come aggiungere la corretta intestazione al documento HTML e come inserire i "Meta Tag".
<!doctype html public="-//ietf//dtd html 4.0//en">
Serve a dare delle informazioni essenziali al browser e si scrive in questa forma standard, cioè, ricopiandola così come è scritta.
<html>
Apertura della pagina HTML (Questo l'ho già spiegato nella scorsa lezione).
<head> (Anche questo l'ho già spiegato l'altra volta).
<meta name="DESCRIPTION" Contenent="Qui scrivi la descrizione del tuo sito, cioè di cosa tratta">
<meta name="KEYWORDS" Contenent="Qui scrivi delle parole chiave che descrivono il contenuto del tuo sito, separate da una virgola. È possibile inserire fino a 1000 caratteri ma evitate di ripetere la stessa parola. Le "KEYWORDS", sono praticamente delle parole che descrivono la tua pagina Web.
Queste parole vengono poi indicizzate nei motori di ricerca, ed è per questo che devono avere un contenuto inerente il tuo sito! Non fare come tanti "furbetti" che introducono ben altre parole chiave che appartengono ad aree di altro tipo, in grado di catturare l'attenzione. E' oltremodo squallido, e agli occhi del visitatore attento, rende di poco prestigio il sito.
<meta name="Author" Contenent="Scrivi qui il tuo nome">
In questo "Meta Tag" va scritto il nome dell'autore delle pagine.
<meta name="GENERATOR" contenent="Blocco note di Win95">
<title>Il titolo della pagina</title>
In questo ultimo "Meta Tag" va inserito il titolo della pagina Web.
Questi "Meta Tag" servono al browser per "identificare" il tuo sito e per introdurlo nei motori di ricerca.
In questa lezione, voglio anche ricordarti di dare attenzione ai diritti d'autore.
Infatti puoi inserire, nella tua pagina web, solo ciò che è frutto di tue creazioni intellettuali, come testo, disegni e foto.
Molti siti mettono a disposizione gratuita, gif animate, sfondi, disegni, musica ecc. ma puoi prelevarli solo quando sei sicuro che siano completamente gratuiti.
Terza lezione
Questa volta vi insegnerò ad inserire la musica o i suoni, e come scrivere in vari caratteri il testo.
La musica
Trovo sia molto importante inserire una musica di sottofondo, specie in alcuni tipi di siti.
Naturalmente sarà la vostra fantasia e il buon gusto a guidarvi nella scelta.
Vediamo insieme come si inserisce una musica o un suono.
Si deve usare il comando <EMBED> in questo modo:
<EMBED src="nome del file audio" AUTOSTRAT=true LOOP=true VOLUME="80" WIDHT=0" HEIGHT="0">
Nello stesso modo puoi inserire un suono.
Ci sono molti siti che mettono a disposizione musiche o suoni e spesso sono gratuitamente disponibili.
Carattere e grandezza del testo
Vediamo ora come scrivere in un determinato carattere.
Con questo Tag - FONT - si modifica il carattere del testo ed ecco la sintassi del tag:
<FONT FACE="ARIAL" SIZE=6 COLOR="BLACK">
Analizziamolo insieme:
In questo caso ho scelto il carattere "ARIAL" ma puoi scegliere tra vari tipi di caratteri, tenendo però presente, che è meglio utilizzare quelli che possano essere riconosciuti da ogni browser.
Ecco i caratteri standard: Times New Roman, Arial, Courier o Line Printer.
SIZE=6 - Dopo la scritta SIZE, puoi aggiungere il numero che indicherà la grandezza del testo.
COLOR=BLACK - Dopo la scritta COLOR puoi aggiungere il colore che vorrai dare al testo, in questo caso nero.
Questo tag, necessita di chiusura che è la seguente: </FONT> e va inserita alla fine del testo.
Quarta lezione
In questa lezione vedremo insieme l'utilizzo di due tag HTML:
<UL>...</UL> Con questo tag puoi creare un'elenco puntato. Tag di apertura: <UL>
Ad ogni riga di testo devi fare precedere il tag <LI>
Tag di chiusura: </UL>
<B>...</B>
Questo tag inserito in apertura, (<B>) prima del testo, e in chiusura, (</B>) dopo il testo, consente di visualizzarlo in grassetto.
Quinta lezione
In questa lezione, impareremo a creare una tabella.
Con le tabelle puoi migliorare notevolmente l'aspetto della tua pagina Web.
La tabella consente di posizionare gli oggetti e il testo in modo più preciso, dando alla pagina un'aspetto migliore e professionale.
Si tratta, praticamente, di una "griglia" su cui si costruisce la struttura della pagina Web.
In sunto ecco i Tag principali:
<TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>
<TABLE> è il tag di apertura. In esso si specifica:
- La misura del bordo
- L'altezza e la larghezza della tabella
- Lo spazio all'interno delle celle
- <TD> </TD> tra questi due tag inserisci testo o immagini.
- </TR> </TABLE> chiudono la tabella.
Questa volta vedremo insieme come aggiungere un colore unico di sfondo alla pagina web.
Nella prima lezione abbiamo visto come aggiungere un'immagine di sfondo, utilizzando il tag:
<BODY BACKGROUND> che consente di inserire uno sfondo-immagine alla pagina.
Con il seguente tag, invece, darete un colore unico allo sfondo della pagina.<BODY BACKGROUND> che consente di inserire uno sfondo-immagine alla pagina.
Es. tag da introdurre: <BODY BGCOLOR=" ">
Esistono precise tabelle con i colori da inserire: vi consiglio di acquistare il libro HTML di Molly E. Holzschlag - Mondadori.A questo punto vi chiederete:
- Come trasferire i file creati, pubblicare insomma il proprio sito?
Per inviarlo al sever web generalmente si utilizza un'applicazione denominata FTP, e aprendola connessi al sever, si trasferiscono i file.
Commenti
Posta un commento