Home
News
Wiki
Programmi
WinMX
Script
Vari
Utility
How-to
Android
Progetti
GuestBook
Iscritti
Admin
Introduzione all' HTML  | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| di Enemy | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Sommario: 1. Introduzione. 2. Tipi di files. 3. Commenti 4. Le tag. 5. Esempio di struttura di una pagina html. 6. Layout. 7. Modificare i colori. 8. Titoli. 9. Formattazione. 10. Elenchi. 11. I links 12. Immagini 13. Tabelle 14. Rowspan e Colspan 15. I Frames 16. Forms 17. Meta 1. Introduzione HTML (HyperText Markup Language) non è un linguaggio di programmazione e nemmeno un linguaggio di scripting, questo è solamente il linguaggio con cui potete indicare ad un Browser dove deve posizionare i vari testi, immagini, tabelle e tutte le altre cose che si possono inserire in una pagina HTML. Esso non viene considerato un vero linguaggio di programmazione soprattutto perché non possiede strutture logiche. 2. Tipi di files Per l'estensioni di file di tipo HTML si possono trovare di due tipi, ovvero:
Non esiste alcuna differenza tra i due file, sono che oggi la più comune estensione è la .html . Nelle pagine HTML possono essere riscontrate anche altri tipi di estensioni come:
3. Commenti Come in qualsiasi linguaggio anche nell'HTML potete usufruire di commenti, che possano servire per ricordare una parte d codice o semplicemente per rendere più facile la modifica dello stesso. Il simbolo per iniziare un commento è
ed il simbolo per chiudere un commento è
Ex.
Quindi qualunque cosa sia scritta tra quei due simboli del commento non verra visualizzata nella pagina e ne modificherà la pagina, però potrà essere vista da un utente se questo visualizzerà il codice sorgente della pagina. Quindi un consiglio evitate di scrivere password o username. 4. Le tag Per iniziare a scrivere una pagina HTML bisogna ben conoscere in generale cosa sono le TAG e cosa fanno. *Un TAG è scritto dentro 2 parentesi angolari: < >. *Quasi tutti i TAG hanno bisogno di essere chiusi, riscrivendo lo stesso TAG, ma appena dopo la prima parentesi angolare "<" bisogna inserire uno slash "/", quindi: </> . In html non esiste il case sensitive, quindi le TAG possono essere scritti in minuscolo o in maiuscolo, la pagina non rileva alcuna differenza. Ecco un esempio utilizzando il TAG generali:
5. Esempio di struttura di una pagina html Ecco un esempio di Pagina HTML:
Un documento html è diviso in due parti principali ovvero; HEAD e BODY L?HEAD contiente tutto quello che non è direttamente percepibile all?utente che visita la pagina, come i meta-tag, l?inclusione di file JavaScript, CSS ecc.. Il BODY invece contiene il vero corpo del documento, cioè quello che sarà visibile all?utente. Questa riga indica solamente che nella pagina si stanno utilizzando le specifiche del World Wide Web Consortium.
Esaminiamo ora i tag contenuti nell'<head>: Indica al Browser che deve usare il set di caratteri Occidentale.
Questo è il titolo che si vedrà in alto a sinistra nella finestra del Browser.
6. Layout L?HTML è nato come un linguaggio per formattare i documenti presenti sul Web, per questo il contenuto ( Ex. <p>Questo è il contenuto</p> ) e i tag di formattazione del testo ( Ex. <font color="blue"> che indica un testo colorato di blu ) si trovano sullo stesso piano. Dopo vari anni, però, si è avuta la necessità di separare il Layout della pagina dal contenuto. Esempio:
Questo codice stampa "Ciao a tutti" in blu e in corsivo. Adesso se il programmatore ha necessità di scrivere "Ciao a tutti" in rosso e in grassetto dovrebbe fare:
Pensate se questo lavoro si doveva fare su una pagina di 200-300 righe e pensate che si doveva fare su oltre 50 pagine! Sarebbe diventata una modifica impossibile, o quantomeno molto dispendiosa in termini di tempo. Proprio per questo è nata la necessità di separare il contenuto (la scritta "Ciao a tutti") dalla formattazione (il colore e il grassetto). Per fare questo ci sono i CSS, ma la loro descrizione va oltre gli scopi di questa guida. Solo per una breve accenno, usando i Fogli di Stile, il codice di poco prima diventerebbe qualcosa del genere:
E? bene ricordare, inoltre, che alcuni elementi sono stati dichiarati Deprecati dal W3C, cioè destinati a non essere più utilizzati. Tra questi, ad esempio, c?è anche il tag <font> . Per questo è buona norma che una volta imparato l?HTML si impari anche ad usare i CSS. 7. Modificare i colori In questo paragrafo spiegherò come bisogna modificare i colori di uno sfondo, delle frasi, delle tabelle ecc. in una pagina HTML Se si vuole stabilire un colore di sfondo generale per tutta la pagina, bisogna farlo nel body tramite l?attributo bgcolor:
In alternativa a red o agli altri colori si può usare la notazione RGB esadecimale, la sua forma è:
Ad esempio, per impostare lo sfondo rosso acceso in stile RGB si farà:
La notazione RGB sarà quella usata in questa guida, perchè è molto più facile ottenere diverse tonalita di colore, ma comunque non c?è differenza con la notazione normale. Se si vuole impostare il colore del testo, nel <body> , si può usare l?attributo text:
In questo modo tutto il testo della pagina sarà di colore verde. Per modificare un solo paragrafo con colore del testo diverso, invece, si deve usare il tag <font> , mostrato di seguito:
Come mostra l'esempio, bisogna specificare l'attributo color nel tag <font> per scegliere il colore. Se non viene utilizzato il tag font il colore del testo sarà quello impostato nel tag <body> . Se si vuole usare una immagine di sfondo, invece di un colore, bisogna usare l?attributo background:
nell'HTML si possono caricare qualsiasi tipo di estensione di file immagini. se l'immagine è presente in una cartella specificare il nome della cartellapoi con uno slash separare la cartella dall'immagine. Esempio:
8. Titoli Come abbiamo visto, i paragrafi si inseriscono tramite il tag <p>. Invece, per i titoli bisogna usare il tag <h?> dove ? è un numero da 1 a 6 ed indica la grandezza del testo. Comunemente si usano i tag <h1> e <h2> per i titoli delle pagine, <h3> e <h4> per il testo e <h5>, <h6> per il Copyright ed i diritti di autore. Ecco un esempio di una pagina HTML che usa dei titoli:
Da notare il tag <br /> (BreakSpace) che viene utilizzato per andare a capo. E? anche possibile che si trovi nella forma <br> che veniva usato qualche tempo fa, ma non hanno alcuna differenza. Oggi la forma più comune e quella <BR> 9. Formattazione Il testo si può formattare grazie a vari tag. E? opportuno dire che molti di questi tag sono stati dichiarati obsoleti dal W3C o comunque ormai vengono poco utilizzati, perché sostituiti dai CSS. Le varie formattazioni che può avere un testo sono:
Ecco un breve esempio che dimostra la tabella:
Con l?HTML si può anche decidere l?allineamento di un testo. Questo si fa grazie all?attributo align. Questo può avere quattro valori:
Ecco un breve esempio:
Per allineare il testo al centro si può anche utilizzare il tag <center>:
10. Elenchi Spesso navigando in Internet si incontrano degli Elenchi. Questi possono essere di due tipi: Ordinati e non Ordinati. Partiamo dagli elenchi ordinati, bisogna imparare 2 tag: <ol> - (Order List) Che serve per iniziare l?elenco ordinato. <li> - (List Item) Che serve per inserire testi nella lista. Ecco un esempio di elenco ordinato:
Come si può vedere una lista può avere quanti elementi si vuole e questi verranno numerati. Le liste non ordinate, invece, funzionano allo stesso modo, ma, invece di usare <ol> per aprire la lista, bisogna usare: <ul> , cioè Unorder List (Lista non Ordinata). Ecco un esempio che riporta lo stesso risultato di prima, ma usando una lista non ordinata:
Inoltre, se si opera su liste non ordinate, <li> può avere anche un attributo particolare, type. Se questo non è presente ogni elemento della lista sarà contrassegnato da un pallino pieno. Type può essere impostato, ad esempio, su circle se si vuole che ci siano pallini vuoti, oppure su square se si vuole che ci siano dei quadratini. 11. I links Un link si inserisce tramite il tag <a> </a>. L?indirizzo dove il link porterà deve essere stabilito dall?attributo href cioè in questo modo <a href="linkqui">PAROLA</a>. Ecco un esempio di link:
si possono aggiungere vari attributi come ad esempio i font color, per colorare il link nel momento in cui sono cliccati e dopo cliccati:
Si adopera questo attributo per decidere il colore di tutti i links, dopo che questi sono stati visitati, può essere espresso sia col nome inglese che col relativo codice esadecimale.
Si adopera questo attributo per decidere il colore di tutti i links attivi, colore che cammbierà nel moneto del clik su di esso, può essere espresso sia col nome inglese che col relativo codice esadecimale. Se si vuole far in modo che il link scelto si apra in una nuova pagina HTML bisogna utilizzare il parametro target="_blank". Esempio:
Altri attributi:
12. Immagini L'elemento <IMG> necessita di attributi, di cui uno necessariamente obbligatorio: SRC, a differenza di molti altri elementi html, questo non ha bisogno di essere concluso dallo stesso elemento preceduto dalla barra retroversa </IMG>. vediamo i possibili attributi:
HTML supporta qualsiasi formato immagine come jpg, gif , png o bmp ecc. i vari attributi: ALIGN L'attributo align permette di specificare l'allineamento dell'immagine rispetto alla riga di testo, i valori ammessi sono: left, right, top, texttop, middle, absmiddle, baseline, bottom e absbottom.vediamo come:
ALT L'attributo alt (alternativa alla grafica), permette di specificare un testo per quei browser non grafici. Viene di solito adoperato per descrivere l'immagine ma potrebbe essere adoperato per qualsiasi altro motivo che necessiti una descrizione, il testo apparirà nel caso in cui l'immagine non venisse caricata o quando il puntatore del mouse sarà portato sopra la stessa.
Provate a posizionare il mouse sull'immagine, sarà così possibile leggere il testo alternativo immesso con l'attributo ALT. WIDTH e HEIGHT L'attributo WIDTH, così come l'attributo HEIGHT, vengono adoperati per specificare le dimensioni orizzontale e verticale dell'immagine.
13. Tabelle Le tabelle sono forse le cose più usate nell?HTML. La loro sintassi potrebbe sembrare un po? difficile all?inizio, ma è relativamente semplice. Ecco un esempio di tabella, che dopo verrà commentata:
Questo è il tag <table>, che dichiara l?inizio di una tabella. In questo esempio si è settato il bordo della tabella ad 1.
(Table Row) indica l?inizio di una nuova riga.
(Table Description) è quello in cui si può scrivere ed indica in pratica una nuova colonna nella tabella. Il concetto, quindi, è il seguente: Ogni tabella incapsula vari tag <tr> che a loro volta incapsulano i tag <td> nei quali è possibile inserire il testo. Una tabella inizierà sempre con questo elemento <TABLE> delimitatore della tabella stessa, all'interno di questo elemento sono molti gli attributi che si possono inserire, vediamoli: ALIGN Consente di specificarne l'allineamento con le seguenti possibilità: Center, Left e Right rispettivamente per centrato, a sinistra, a destra. BACKGROUND Permette di avere un'immagine come sfondo della tabella, è possibile applicarlo oltre che all'elemento <TABLE> anche agli elementi che costituiscono la struttura della tabella stessa quali: <td> e <th> descritti più avanti. Si possono utilizzare i vari tipi di file grafici consentiti: gif, jpg, png. Esempio:
BGCOLOR Permette di avere un colore in tinta unita come sfondo della tabella, il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali come sempre.
CELLPADDING Specifica la quantità di spazio vuoto lasciato tra i bordi delle celle di una tabella e il dato vero e proprio in esse contenuto, il valore per default è 1 , quindi per tabelle più compresse si dovrà impostare cellpadding uguale a zero.
CELLSPACING Specifica la quantità di spazio vuoto da lasciare tra le singole celle di dati di una tabella, il valore per default è 2, per tabelle più compresse si dovrà impostare cellspacing uguale a zero.
FRAME Permette di scegliere quale tipo di visualizzazione assegnare al bordo. Questo attributo supportato dal solo IE, per funzionare deve avere impostato l'attributo border. I valori possibili sono:
Esempio:
HEIGHT Permette di specificare l'altezza della tabella, che può essere in pixel o in percentuale dell'altezza della finestra del browser che la visualizza.
RULES Serve per la visualizzazione dei bordi interni quando si fa uso dei tags <THEAD> <TBODY> e <TFOOT>, tutti questi attributi sono supportati dai soli browser IE per funzionare deve essere necessariamente impostato anche l'attributo border. I valori possibili sono:
WIDTH Permette di specificare la larghezza della tabella, che può essere in pixel o in percentuale dell'altezza della finestra del browser che la visualizza.
14. Rowspan e Colspan Come già accennato, le tabelle, salvo casi particolari, hanno un numero di celle uguale per ogni riga ed un numero di righe pari ad ogni serie di celle. Se non si potesse intervenire diversamente, questo le renderebbe piuttosto rigide e forse poco utilizzabili dal lato pratico. Gli attributi COLSPAN e ROWSPAN. Esempio:
15. I Frames Frames possono essere utili quando c?è la necessità di dividere una pagina HTML in più parti, anche dette zone. Partiamo da un esempio, che poi commenterò:
Ora esaminiamo riga per riga tutte le novità:
Intanto si deve specificare di utilizzare le specifiche W3C per i Frames.
Questa è la parte più interessante, cioè, invece del tag <body>, se si utilizzano i Frames, bisogna utilizzare il tag <frameset>. Questo ha principalmente 2 attributi:
Nell?esempio, si avranno tre colonne, due delle quali hanno larghezza 33% dello schermo, e l?altra si è usato il wild card, cioè la sua grandezza è quella rimanente. Si può anche non inserire il segno di percentuale, questo vorrà dire che si stanno specificando i pixel.
Qui al tag <frame>, che serve per importare una pagina di Frame, viene passato l?attributo src, che indica il file da inserire nella pagina.
Quindi arriviamo a <noframes>. All?interno di questo tag di solito si specifica un link ad una pagina che non utilizza i Frames. Il contenuto del tag <noframes>, infatti, viene usato solo nel caso che il browser non supporti i Frames. FRAMESET L'elemento <FRAMESET> è l'elemento principale, possiede due attributi quali ROWS e COLS. Al suo interno può contenere annidati altri elementi quali <FRAMESET>, <FRAME> o <NOFRAME>. attributi assegnabili:
ROWS L'attributo ROWS raccoglie i valori per l'altezza della riga, quando si suddivide la finestra principale in righe. Questi valori devono essere separati da virgole e possono essere espressi sia in numeri interi che in numeri percentuale; nel primo caso equivalgono al numero di pixel, mentre nel secondo caso sono in percentuale delle dimensioni della finestra del browser.
L'esempio sopra crea una cornice suddividendo orizzontalmente la finestra in due parti, la prima che occupa il 30% delle dimensioni totali lasciando il rimanente 70% alla seconda finestra. Si possono adoperare anche valori numerici, senza il simbolo di % percentuale, in questo caso si fa riferimento al numero di pixel dello schermo. Queste dimensioni restano fisse indipendentemente dalle dimensioni della finestra del browser, vediamo un esempio:
In questo caso si avrebbero due finestre con dimensioni fisse (150 e 600 px) indipendentemente dalla risoluzione e dalle dimensioni del monitor, grandi o piccoli che siano. Per evitare questa limitazione, si possono adoperare i caratteri jolly (asterisco *) che significano imposta la massima dimensione rimanente. Esempio:
COLS L'attributo COLS raccoglie i valori per la larghezza della colonna, quando si suddivide la finestra principale in colonne. Questi valori devono essere separati da virgole e possono essere espressi sia in numeri interi che in numeri percentuale; nel primo caso equivalgono al numero di pixel, mentre nel secondo caso sono in percentuale delle dimensioni della finestra del browser. Praticamente valgono le stesse regole spiegate sopra, ma anzichè suddividere lo schermo in righe, lo si suddivide in colonne.
L'esempio sopra crea una cornice suddividendo verticalmente la finestra in due parti, la prima che occupa il 25% delle dimensioni totali lasciando il rimanente 75% alla seconda finestra. Si possono adoperare anche valori numerici, senza il simbolo di % percentuale, in questo caso si fa riferimento al numero di pixel dello schermo. Queste dimensioni restano fisse indipendentemente dalle dimensioni della finestra del browser, vediamo un esempio:
In questo caso si avrebbero due finestre con dimensioni fisse (150 e 600 px) indipendentemente dalla risoluzione e dalle dimensioni del monitor, grandi o piccoli che siano. Per evitare questa limitazione, si possono adoperare i caratteri jolly (asterisco *) che significano imposta la massima dimensione rimanente.
FRAME L'elemento FRAME definisce le proprietà del frame stesso all'interno di <FRAMESET>, esso ha ben 8 attributi, non necessita del relativo tag di chiusura </FRAME> . Questi gli attributi possibili:
SRC="url" L'attributo SRC="url" definisce l'indirizzo del file html che verrà visualizzato nella sezione frame nel frameset. Potrebbe sembrare complicato ma altro non è che il file html da visualizzare.
NAME="nome_frame" L'attributo NAME è di vitale importanza ai fini di un corretto funzionamento, serve infatti per assegnare un nome al frame stesso facendolo diventare bersaglio di collegamenti da altri frames o semplici links tramite l'attributo TARGET. A questo proposito si veda anche la sezione dedicata proprio ai links e loro gestione. Non confondete il nome che avete scelto per il file html con il nome da assegnare al frame, questi potrebbero essere due nomi completamente diversi. Se tutto ciò può sembrare complesso, a fine pagina un esempio riassuntivo chiarirà sicuramente meglio ogni cosa.
MARGINWIDTH="valore" L'attributo MARGINWIDTH accetta valori numerici che corrispondono a pixel, forza il rientro sui lati, destro e sinistro, in base a tale valore. Non può essere impostato a zero.
MARGINHEIGHT="valore" L'attributo MARGINHEIGHT accetta valori numerici che corrispondono a pixel, forza il rientro sui lati, superiore e inferiore, in base a tale valore. Non può essere impostato a zero.
SCROLLING="yes|no|auto" L'attributo SCROLLING serve per il controllo della barra laterale di scorrimento, quando il contenuto della pagina supera le dimensioni del frame viene visualizzata una barra di scorrimento. yes= si alla visualizzazione di questa barra, no= nessuna barra, auto= solo se il contenuto del frame la richiede.
NORESIZE L'attributo NORESIZE non ha alcun parametro, se impostato evita al frame di essere ridimensionato. Diversamente saràì possibile, portando il puntatore del mouse nella divisione dei due frames, ottenere una doppia freccia di posizionamento.
FRAMEBORDER="yes|no" L'attributo FRAMEBORDER, riconosciuto dai soli browser IE, serve per rendere visibili o meno i bordi dei frames, per default si trova a YES quindi impostare no soltanto nel caso in cui non si voglia ridisegnare il bordo.
FRAMESPACING="valore" L'attributo FRAMESPACING, riconosciuto dai soli browser IE, serve per impostare spazio aggiuntivo intorno ai frames facendoli sembrare "flottanti", il valore impostabile si riferisce al numero di pixel.
ESEMPIO PAGINA HTML
16. Forms Un Form serve all?invio dei dati. Ad esempio, per registrarsi ad un sito, ci sarà sicuramente un "form di registrazione". Il Form deve avere principalmente un attributo: action, che indica la pagina in cui si andrà inviando il Form. Ad esempio:
Questo sta a dire che "inviando" il form, si andrà nella pagina www.hackroom.org Ecco un breve elenco delle cose che di solito sono presenti nei Form:
CAMPI DI TESTO Il campo più utilizzato per inserire testo ha la seguente forma:
come si vede, il tag <input> non ha bisogno del tag di chiusura </input>. Se si vuole dare un?etichetta al campo <input>, si può fare con il tag <label>, che deve contenere il campo <input> stesso. Ecco un esempio:
Se si vuole assegnare un valore predefinito ad un campo di testo, lo si può fare aggiungendo l?attributo value al tag <input>, come nell?esempio:
In questo caso la casella di testo conterrà già il valore predefinito "GEEK". Se invece non si vuole che una casella di testo sia modificabile, bisogna aggiungere disabled alla fine del tag <input>, come mostrato nell?esempio:
Inoltre per decidere la lunghezza di un campo <input>, si può usare l?attributo size:
Nel caso il campo di testo venga usato come campo dove inserire una password, si può sostituire all?attributo type, text con password, in modo che diventi un vero campo password, come nell?esempio:
I Form, comunque, vengono spesso utilizzati insieme ad altri linguaggi dinamici, come PHP o ASP o anche JavaScript. Per questo è bene sapere che ad ogni campo di testo è possibile assegnare un nome tramite l?attributo name:
Se si ha necessità di avere un grande campo di testo, e non basta un campo <input>, si può usare <textarea>. Questo, a differenza di <input>, deve venir chiuso con </textarea>. La sua larghezza si stabilisce con cols e la sua lunghezza con rows BOTTONI Bottoni vengono di solito utilizzati per "inviare" un Form quando lo si è compilato. La tipica forma di un bottone per l?invio di un Form è:
Il valore submit all?interno di type sta a significare che quel bottone "invierà" il Form nel quale è contenuto. Invece l?attributo value serve ad attribuire il titolo del bottone. Ecco un esempio di un semplicissimo Form:
SCELTE All?interno di un form, spesso si ha la possibilità di scegliere tra due o più opzioni. Queste scelte sono date da uno di questi tre elementi:
I Campi Radio permettono di scegliere una sola tra le opzioni a disposizione. Ecco un esempio:
|
