MANUALE IMMEDIATO DI HTML Realizzato da NiktorTheNat Iniziato il giorno 9 aprile 2010 - terminato il giorno 22 aprile 2010 email autore: niktorthenat@tiscali.it canale youtube: http://www.youtube.com/user/niktorthenat sito internet: http://www.tanadelpitone.tk/ forum: http://tanadelpitone.forumup.it/ PREMESSA Il linguaggio HTML (Hyper Text Markup Language), non è un vero e proprio linguaggio di programmazione, e serve a creare principalmente pagine per il WEB. E' un linguaggio fatto di marcatori, cioè di istruzioni che hanno un apertura e chiusura. HTML è un linguaggio molto semplice ma poco interattivo, per questo negli anni sono nati altri linguaggi, da includere nell'html, per rendere le pagine che si creano, dinamiche. In questo breve manuale troverete solo alcune fondamentali istruzioni HTML, utili più come promemoria per chi già conosce questo linguaggio, piuttosto che un esaustivo manuale per imparare a programmare in HTML. IL LINGUAGGIO HTML Per creare una pagina WEB con il linguaggio HTML non serve installare nulla. Per altri linguaggi di programmazione di solito serve installare un software che interpreta il codice che si scrive, mentre con l'html questo non serve. Ogni computer sa interpretare il linguaggio HTML, l'unica cosa necessaria, che deve essere installata sul computer, è un browser, come ad esempio Internet Explorer, Firefox, Chrome, Opera, Safari, ecc... Inoltre, per scrivere un programma in HTML, è sufficiente un editor di testi, come "notepad" di Windows. Come già detto, il linguaggio HTML è composto da marcatori. Quello principale è HTML. Quindi, per creare una pagina WEB, si usa aprire il programma con il marcatore <HTML> e si usa chiuderlo con il marcatore </HTML> Già da questa spiegazione, si intuisce, che un marcatore si apre con il suo nome, in questo caso HTML, e si chiude sempre con il suo nome ma aggiungendo all'inizio una barra obliqua, cioè / Aprite un editor di testo. Negli esempi che seguono, verrà usato il programma notepad.exe di Windows, in quanto sto scrivendo su un sistema operativo Windows. Nella pagina di notepad, scrivete i due marcatori appena imparati. Uno su ogni riga, così come mostrato nella foto sotto: Ora salviamo il file premendo il tasto sinistro del mouse sul menu a discesa File.
Poi premiamo sull'opzione Salva con nome... Si aprirà la seguente finestra: Qui dobbiamo scrivere il nome che vogliamo dare al file. Noi lo chiameremo, per esempio, prova.htm Una pagina WEB ha sempre estensione HTM o HTML. Noi useremo l'estensione HTM. Dato che notepad salva i file sempre con estensione txt, dobbiamo obbligarlo a salvare il file con estensione htm. Per fare questo si usano le virgolette. QUindi per salvare il file con il nome prova.htm dovremo scrivere "prova.htm"
Ora possiamo premere il tasto sinistro del mouse sul pulsante Salva per memorizzare il file sul disco. Proviamo ora ad aprire il file che abbiamo appena creato. Per farlo, andiamo su gestione risorse e spostiamoci nella cartella dove abbiamo memorizzato il file prova.htm
Come potete notare nell'immagine sopra, il file prova che abbiamo appena creato, viene riconosciuto dal computer come file di Internet Explorer, quindi che può essere aperto con Internet Explorer. Ora fate doppio click, con il tasto sinistro del mouse, sul file prova. Si aprirà Internet Explorer e mostrerà la pagina appena creata. Come potete notare dall'immagine sopra, la pagina è vuota. Infatti non abbiamo ancora scritto alcuna istruzione che compia qualcosa.
Lasciamo pure aperto Internet Explorer. Torniamo all'editor di testi, che nel nostro caso è notepad. Tra i marcatori HTML scriviamo i marcatori BODY, che tradotto dall'inglese significa "corpo". Infatti in mezzo ai marcatori BODY c'è il corpo del programma, cioè quello che poi verrà scritto nella pagina WEB. Ecco come scrivere i marcatory BODY. Bisogna ricordarsi di non sbagliare a scrivere i marcatori in modo sfalsato, ma annidati, cioè uno all'interno dell'altro. Quindi è corretto scrivere: <HTML> <BODY> </BODY> </HTML> e non: <HTML> <BODY> </HTML> </BODY> Salvate il file premendo il tasto sinistro del mouse sul menu a discesa File e poi sull'opzione Salva Ora che il file è salvato, tornate a Internet Explorer, quindi premete il tasto F5 che solitamente si trova in alto nella vostra tastiera. Il tasto F5 serve ad aggiornare la pagina. Anche dopo aver premuto il tasto F5 e aver modificato il programma, ancora non succede nulla, perchè ancora n on abbiamo dato istruzioni che mostrano qualcosa. Torniamo a notepad per modificare il programma. Ora usiamo il marcatore <p> che significa "paragrafo" per scrivere finalmente qualcosa sullo schermo. Quindi, nel nostro programma, inseriamo il seguente marcatore, ricordandoci di chiuderlo, ed inserendo tra i deu marcatori una frase da far visualizzare nella pagina WEB. Ecco un esempio:
Come si può notare, i marcatori <p> e </p> contengono in mezzo una frase che è "Questa è la prima frase" Quello che viene scritto in mezzo ai marcatori <p> e </p> verrà scritto a video. Salvate il file, quindi tornate ad Internet Explorer e premete il tasto F5 per aggiornare la pagina WEB. Avrete questo risultato: Ora che abbiamo imparato a scrivere un programma HTML con un editor di testi, che abbiamo imparato a salvare ed avviare, nonchè aggiornare una pagina web scritta in HTML vediamo solo le istruzioni dell'html e la sua sintassi. Marcatore <H> per scrivere del testo come titolo. <h1>ciao a tutti</h1> <h2>ciao a tutti</h2> <h3>ciao a tutti</h3> <h4>ciao a tutti</h4> <h5>ciao a tutti</h5> <h6>ciao a tutti</h6> scrive il testo Ciao a tutti a video con carattere molto Marcatore <BR> per lasciare una riga vuota o andare a capo
<br> <p>ciao<br>a tutti</p> lascia una riga vuota scriverà Ciao su una riga e a tutti sulla riga successiva Marcatori per formattare la scrittura <p>ciao <b>a tutti</b></p> scriverà "Ciao a tutti" <p>ciao <i>a tutti</i></p> scriverà "Ciao a tutti" <p>ciao <u>a tutti</u></p> scriverà "Ciao a tutti" <p>ciao <small>a tutti</small></p> scriverà "Ciao a tutti" <p>ciao <big>a tutti</big></p> scriverà "Ciao a tutti" <p>ciao <del>a tutti</del></p> scriverà "Ciao a tutti" <p>ciao <sup>a tutti</sup></p> scriverà "Ciao a tutti " <p>ciao <sub>a tutti</sub></p> scriverà "Ciao a tutti " Attributo style per modificare il testo <p style="font-family:courier">ciao a tutti</p> scriverà Ciao a tutti (cioè cambierà il tipo di carattere) <p style="color:yellow">ciao a tutti</p> scriverà Ciao a tutti (cioè cambierà il colore del testo) <p style="background-color:red">ciao a tutti</p> scriverà Ciao a tutti (cioè cambierà il colore di sfondo) <p style="font-size:50">ciao a tutti</p> scriverà Ciao a tutti (cioè cambierà dimensioni carattere) Si possono anche mettere più impostazioni con una sola istruzione, separandole con un punto e virgola, così: <p style="font-size:50;color:red">ciao a tutti</p> in questo esempio cambierà dimensioni del carattere e colore Ecco alcuni nomi di colore, in inglese, da poter usare: red rosso yellow giallo black nero white bianco green verde brown marrone Marcatore <a> per creare link <a href="http://www.google.it">vai al sito Google</a> Crea una frase linkabile Vai al sito Google <a href="http://www.google.it" target="_blank">vai al sito Google</a> Fa la stessa cosa dell'istruzione sopra, ma apre il sito in una pagina nuova <a name="prova">riga alla quale si vuole arrivare</a> Crea un'etichetta, chiamata "prova" alla quale si può arrivare mediante l'istruzione qui sotto <a href="#prova">vai alla riga scelta</a> Crea un link che va alla riga con l'etichetta qui sopra Marcatore <img> per inserire immagini <img src="c:\documenti\montagne.jpg"> Carica l'immagine montagne.jpg sulla pagina WEB <img src="c:\documenti\montagna.jpg" alt="foto delle montagne"> Come per l'esempio sopra, carica l'immagine montagna.jpg sulla pagina WEB, ma se non la trova o l'immagine non esiste, scrive in alternativa la frase Foto delle montagne in modo da avvisare l'utente che lì doveva esserci quella foto
<img src="www.pippo.it/montagna.jpg"> Carica l'immagine montagna.jpg prelevandola dal sito www.pippo.it Marcatori per creare tabelle Per creare una tabella in una pagina HTML bisogna usare i marcatori <table> e </table> per inizializzare la tabella e al suo interno inserire i marcatori per creare righe e celle. <table border="1"> <tr> <td>cella1</td> <td>cella2</td> </tr> </table> Con le istruzioni qui sopra, con i marcatori <tr> abbiamo creato una riga, e con i marcatori <td> abbiamo creato delle celle. Per creare, ad esempio, due righe, dobbiamo usare un nuovo marcatore <tr> per creare una nuova riga, ed al suo interno mettere i marcatori <td> per creare altre celle per quella riga. Ecco un esempio: <table border="1"> <tr> <td>cella1 su riga 1</td> <td>cella2 su riga 1</td> </tr> <tr> <td>cella1 su riga 2</td> <td>cella2 su riga 2</td> </tr> </table> Marcatori per creare liste Per creare liste, o meglio, elenchi di testi, si usano i marcatori <ol>, <ul> e <li> Per creare, ad esempio, una lista delle seguenti parole: "carote","cipolle","patate", bisogna usare i marcatori <ul> e </ul> per indicare al browser che vogliamo creare una lista non ordinata, e all'interno di quel marcatore, usare i marcatori <li> e </li> per ogni parola o frase che vogliamo mettere in elenco: <ul> <li>carote</li> <li>cipolle</li> <li>patate</li> </ul> Se invece vogliamo creare la stessa lista, ma che sia preceduta da un numero progressivo, quindi creare una così detta lista ordinata, useremo al posto del marcatore <ul> il marcatore <ol> in questo modo: <ol> <li>carote</li> <li>cipolle</li> <li>patate</li> </ol> I marcatori per creare form I form sono sezioni dell'html dove possiamo inserire alcuni strumenti di input, cioè strumenti che ricevono dati dall'utente, che poi possono essere inviati ad un server per
essere elaborati da un altro linguaggio di programmazione apposito, quale ad esempio ASP o PHP. Per inserire gli strumenti in una pagina WEB, per prima cosa bisogna inserire i marcatori <form> e </form>, poi inserire i marcatori degli strumenti che vogliamo aggiungere. Qui verrà solo mostrato un solo strumento, che creerà una casella di testo, al solo scopo di far capire come funziona. Gli ulteriori strumenti utilizzabili non verranno presi in considerazione, in quanto non sarà possibile utilizzarli appieno se non imparando i linguaggi di programmazione web-oriented. <form> nome:<input type="text" name="uno"/> </form> I marcatori per creare dei frame Per frame si intende la divisione della pagina WEB in più sezioni, ognuna delle quali rappresenta una pagina HTML a sè. Per creare, ad esempio, due frame, dobbiamo calcolare, prima di tutto, che una pagina WEB intera, rappresenta il 100% di visualizzazione. Se vogliamo creare due frame, pertanto, dobbiamo decidere quale percentuale dare a un frame rispetto all'altro. Supponiamo che vogliamo dare al frame di sinistra il 30% di visuale ed al frame di destra il 70%; in questo modo avremo un totale del 100%. Per impostare queste due percentuali useremo il marcatore <frameset>, poi per indicare quale pagina dovrà essere caricata nel frame di sinistra e quale nel frame di destra, useremo i marcatori <frame> Ecco un esempio: <frameset cols="30%,70%"> <frame src="sinistra.htm"/> <frame src="destra.htm" name="frameshow"/> </fameset> La prima riga imposta due frame di cui uno al 30% di visualizzazione ed il secondo al 70% di visualizzazione. La seconda riga carica la pagina sinistra.htm nel frame di sinistra. E' sottinteso che nella stessa cartella dove si trova questa pagina WEB deve esserci la pagina sinistra.htm La terza riga carica la pagina destra.htm (vale la stessa regola detta sopra) in più però c'è l'istruzione name="frameshow" che significa "mostra i frame", che serve appunto a visualizzare nella pagina WEB le due pagina sinistra.htm e destra.htm.