HTMLIntroduzioneQuesta pagina vuole essere semplicemente un rapido tutorial sulle basi del linguaggio HTML, ma nulla di più. Verranno trattati i seguenti argomenti:
Struttura essenziale di una pagina HTML
Una pagina HTML è innanzitutto un file la cui estensione è appunto " I tags principali sono:
<HTML> i quali definiscono rispettivamente l'inizio e la fine del documento. Il primo tag si chiama tag d'apertura, mentre il secondo, che differisce dal primo per la barra "/", si chiama tag di chiusura. Va detto che non tutti i tags necessitano del tag di chiusura. Inoltre una cosa molto importante è che i tags non devono mai essere sovrapposti, cioè se viene aperto un tag e poi un secondo, prima di chiudere il primo si deve necessariamente chiudere il secondo. I tags essenziali per un documento HTML sono:
<HTML> <HEAD> </HTML> Questi tags definiscono l'intestazione del documento HTML, dove trovano spazio il titolo ed altre informazioni. Il corpo vero e proprio del documento HTML viene inserito all'interno dei tags:
<HTML> <BODY> </HTML> In definitiva la struttura di un documento HTML è (
torna all'inizio Inserimento e formattazione del testoSpesso una pagina HTML è formata essenzialmente da testo, perciò è fondamentale conoscere come inserirlo ed è utile sapere come gestire al meglio lo stile di formattazione.
Di per se il testo in una pagina HTML può essere semplicemente inserito così com'è all'interno del corpo della pagina. In questo modo però non si ha nessun controllo particolare sulla formattazione e quindi assume l'aspetto standard di default. Risulta invece molto più comodo e leggibile suddividere il testo in paragrafi. Esiste peranto un tag apposito all'interno del quale inserire il testo relativo a quel paragrafo, il tag <p> Questo è il testo del nostro paragrafo. </p>Esso assumerà le caratteristiche standard dell'elemento paragrafo. Naturalmente è possibile modificare tali caratteristiche, ma questo argomento verrà approfondito in seguito all'interno della sezione relativa ai fogli di stile.
Nel caso fosse necessario andare a capo il tag da usare è <p> Questo è il testo del nostro paragrafo </p>otterremo il testo: questo è il testo del nostro paragrafo dove gli "a capo" sono diventati semplicemente spazi tra una parola e l'altra. In maniera analoga vengono ignorati tutti gli spazi consecutivi e le tabulazioni. Se cioè scrivessimo <p> Questo è il testo del nostro paragrafo </p>otterremo lo stesso risultato di prima. Passiamo ora agli aspetti più "grafici" del testo, ovvero alla formattazione vera e propria. Di seguito viene presentata una tabella dove vengono elencati i tags per gestire l'aspetto del testo, relativamente all'effetto prodotto:
<font face="impact" size=5 color="0000FF"> testo </font> . Inoltre si possono definire contemporaneamente più font, in modo che nel caso un utente non disponga di quello indicato, ne venga utilizzato un altro di nostro piacimento. Questo si ottiene scrivendo ad esempio: <font face="impact, comic sans ms, arial, courier new"> testo </font> .
Per il testo si può utilizzare qualsiasi tipo di font. Naturalmente per poter visualizzare il testo con il font dichiarato, il visitatore della pagina web deve possedere quel font. Nel caso l'utente non possegga nessuno dei font dichiarati, il browser utilizzerà il font impostato per default, in modo tale da permettere comunque la corretta visualizzazione del contenuto della pagina. Altri effetti utilizzabili verranno introdotti coi fogli di stile. In alcuni casi è comodo inserire caratteri particolari, come lettere accentate, virgolette, apici eccetera. Per farlo si devono inserire dei codici HTML appositi. Alcuni esempi sono:
) serve per ovviare al fatto che nel codice HTML gli spazi consecutivi vengono ignorati.
La tabella completa dei codici è disponibile qui o qui. torna all'inizio Inserimento ed impostazione di immaginiIn un documento HTML, oltre al testo, trovano spazio delle immagini, dei loghi eccetera. Il loro inserimento è molto semplice ed ora ne illustreremo le modalità.
Il tag utilizzato per inserire un'immagine è <img src="nome_e_indirizzo_immagine">quindi, se ad esempio dovessimo inserire l'immagine "immagine.jpg" all'interno della nostra pagina, dovremo scrivere: <img src="immagine.jpg">ottenendo il risultato seguente: se invece l'immagine è contenuta nella cartella "immagini" sarà sufficiente scrivere: <img src="immagini/immagine.jpg">mentre se proviene da internet si scriverà (tutto attaccato in un'unica riga): <img src="http://www.celluloide.it/home/ foto/orgoglio-e-pregiudizio.jpg">Naturalmente è possibile utilizzare sia l'indirizzamento assoluto che quello relativo. L'immagine presenta una serie di parametri che possono essere definiti a piacimento. Le dimensioni dell'immagine si possono specificare manualmente con: <img src="immagine.jpg" width=800 height=600 >mentre impostando solamente uno dei due parametri, il parametro non specificato viene scalato in modo da mantenere le proporzioni originali; se, invece, nessun parametro viene specificato l'immagine assume le proprie dimensioni originali. È possibile anche immettere del testo a lato dell'immagine. Per far ciò il codice va modificato nel seguente modo: <img src="immagine.jpg" align="right">dove i possibili parametri per "align" sono:
Un altro parametro che si può definire è il testo alternativo. Esso è utile soprattutto nelle connessioni lente, per i browser che hanno disabilitata la funzione di visualizzazione delle immagini o per quelli testuali, nonchè in caso di link ad immagini non più disponibili. Infatti esso permette di definire del testo che verrà visualizzato al posto dell'immagine nei casi accennati. Il codice diventa perciò: <img src="immagine.jpg" alt="testo alternativo">e l'effetto sarà il seguente:
Nel caso si voglia inserire un'immagine di sfondo, dovremo inserire all'interno del tag <body bgcolor="#ccffff" background="sfondo.gif"> Caratteristiche delle immaginiI parametri principali che caratterizzano un'immagine digitale sono:
Formato delle immaginiEsistono diversi formati (o codifiche) con cui possono essere salvate le immagini ed ognuno di essi presenta le proprie caratteristiche. È importante conoscerle per essere in grado di scegliere qual è quello in grado di offrire le migliori prestazioni in funzione dello scopo che hanno tali immagini. Il formato diciamo base di un'immagine digitale è il formato bitmap (bmp), il quale descrive il colore assunto da ogni singolo pixel. Proprio per questo motivo, il bitmap risulta essere il formato più completo, ma anche il più pesante a parità di qualità e dimensione dell'immagine. Esistono perciò formati che consentono di ottenere un file più leggero, tramite l'applicazione di particolari algoritmi che comprimono l'immagine. Tali algoritmi si possono dividere in due categorie, ovvero quelli "non a perdita di informazione" e quelli "a perdita di informazione" (lossy). I primi garantiscono la ricostruzione fedele dell'immagine rispetto all'originale, mentre i secondi non sono in grado farlo, ma offrono elevati gradi di compressione e molti casi la differenza rispetto all'originale è quasi impercettibile o comunque accettabile. I formati usati nel web per le immagini sono:
torna all'inizio Inserimento di linkLe pagine HTML hanno di estremamente comodo la possibilità di effettuare dei collegamenti tra punti diversi della stessa pagina oppure con altre pagine. Testo come linkPer inserire un collegamento è sufficiente scrivere: questo è un <a href="URL_della_pagina">link</a>Ad esempio, se volessimo inserire un collegamento alla pagina web dell'Università degli Studi di Padova, scriveremo: questo è il <a href="http://www.unipd.it/">link</a> alla pagina web dell'Università degli Studi di Padova.ottenendo il risultato: questo è il link alla pagina web dell'Università degli Studi di Padova. Il link ad uno specifico punto di una pagina HTML si effettua in due passi. Innanzitutto è necessario definire un codice identificativo del punto al quale si intende fare riferimento. Se ad esempio voglio fare riferimento alla parola "Introduzione" all'interno della mia pagina, dovrò modificare il punto dov'èra scritto "Introduzione" nel seguente modo: <a id="introduzione">Introduzione</a>Fatto questo, aggiungiamo nel punto desiderato il link ad "Introduzione" con il codice: <a href="mia_pagina.html#introduzione">link all'introduzione</a>Nel caso in cui intendiamo riferirci ad un punto della stessa pagina, è possibile omettere il nome della pagina, ossia scriveremo: <a href="#introduzione">link all'introduzione</a> Immagini come linkA volte è comodo utilizzare delle immagini come link, ovvero dare la possibilità ai lettori di andare in un'altra pagina semplicemente cliccando su di un'immagine. Il codice è: <a href="mia_pagina.html#introduzione"> <img src="immagine.jpg"></a>In questo modo però comparirà un bordo attorno all'immagine. Volendo rimuoverlo dovremo specificare lo spessore del bordo dell'immagine: <a href="mia_pagina.html#introduzione"> <img src="immagine.jpg" border="0"></a> Un'ultima tipologia molto importante di link è quella che ci da la possibilità di aggiungere un riferimento ad un indirizo e-mail. Scriveremo semplicemente: <a href="mailto:indirizzo_e_mail@provider.it">scrivimi</a>È anche possibile predefinire l'oggetto dell'e-mail ed il suo contenuto attraverso le opzioni "subject" e "body": <a href="mailto:indirizzo_e_mail@provider.it?subject=Oggetto %20dell'e-mail&body=testo%20del%20messaggio">scrivimi</a>Naturalmente possiamo anche definire altri destinatari con il codice: <a href="mailto:indirizzo_e_mail@provider.it? cc=indirizzo2@pippo.it&bcc=indirizzo3@pippo.it &subject=Oggetto%20dell'e-mail&body=testo%20del %20messaggio">scrivimi</a>Quest'ultimo esempio risulta essere del tipo scrivimi. torna all'inizio Inserimento di video
L'inserimento di video si effettua includendo all'interno della pagina web il codice HTML che crea il collegamento al video. Ad esempio potrebbe essere:
torna all'inizio Inserimento di listeLe liste in HTML si possono suddividere in tre categorie:
Liste non ordinateIl codice usato per ottenere questa lista è <ul> <li>liste non ordinate (come questa);</li> <li>liste ordinate;</li> <li>liste di definizioni.</li> </ul> Liste ordinateLa lista ordinata si ottiene in questo modo: <ol> <li>elementari;</li> <li>medie;</li> <li>superiori;</li> <li>università;</li> <li>dottorato/master.</li> </ol>che verrà visualizzata così:
Liste di definizioniLe liste di definizioni vengono usate generalmente per creare dei dizionari di termini. Il loro aspetto è del tipo:
<dl> <dt>D.E.I.</dt> <dd>Dipartimento di Elettronica ed Informatica</dd> <dt>D.I.E.</dt> <dd>Dipartimento di Ingegneria Elettrica</dd> </dl> torna all'inizio Inserimento di tabelleUn altro elemento molto importante in HTML sono le tabelle. Infatti esse sono utili non solo per creare delle tabelle vere e proprie, ma anche per gestire insiemi di immagini, pulsanti e link, eccetera. Anch'esse sono costituite da una serie di tag, ad esempio, per creare la tabella
<table> <caption>tabella</caption> <tr> <th></th> <th>A</th> <th>B</th> </tr> <tr> <th>C</th> <td>1</td> <td>2</td> </tr> <tr> <th>D</th> <td>3</td> <td>4</td> </tr> </table>dove il tag <table> delimita la tabella, <tr> indica una riga della tabella, <td> un elemento della riga e <th> un elemento che funge da titolo, mentre <caption> definisce la didascalia della tabella.
Si può anche fare in modo che una cella di una riga/colonna si estenda per più celle della riga/colonna successiva, ad esempio per avere:
<table> <caption>tabella</caption> <tr> <th></th> <th colspan=2>colonne</th> </tr> <tr> <th rowspan=2>righe</th> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> torna all'inizio Inserimento di linee orizzontali
Il tag html per inserire una linea orizzontale è semplicemente Inserimento di testo preformattato
Come detto in precedenza nella sezione inserimento e formattazione del testo, i browser ignorano la formattazione del testo creata con spazi consecutivi, "a capo" eccetera. Esiste tuttavia un tag, <pre> \|/ (@ @) +----oOO----(_)----------+ | | | che ve ne pare? | | | | facile, no? | | | +-----------------oOO----+ |__|__| || || ooO Ooo </pre>vedremo visualizzato esattamente: \|/ (@ @) +----oOO----(_)----------+ | | | che ve ne pare? | | | | facile, no? | | | +-----------------oOO----+ |__|__| || || ooO Ooo torna all'inizio Fogli di stileI fogli di stile rappresentano un recente ed efficace metodo per scegliere una particolare visualizzazione del contenuto della pagina web. Essi permettono di scegliere vari parametri di formattazione del testo, delle immagini, tabelle, links ed, in generale, ogni possibile tipo di elemento di una pagina HTML.
Esistono vari modi con i quali è possibile definire i parametri di un oggetto HTML usando i fogli di stile. Possedendo già delle conoscenze sul linguaggio HTML, il più immediato è quello di specificare i parametri all'interno del tag desiderato, come avviene normalmente ad esempio quando si specifica il colore del testo nel modo classico in HTML. Ad esempio, per specificare il colore del testo di un paragrafo in HTML si usa il codice
L'utilità dei fogli di stile si vede maggiormente quando si vogliono cambiare le caratteristiche di tutti gli elementi di uno stesso tipo all'interno della stessa pagina. Se infatti si desiderasse scrivere una pagina molto lunga dove la prima riga di tutti i paragrafi ha un rientro di 20 pixel rispetto al resto del paragrafo, sarà sufficente inserire all'interno del tag <style type="text/css"> P {text-indent: 20px;} </style> Ma ora che c'abbiamo preso gusto...perchè non fare le cose serie? I fogli di stile veri e propri sono appunto dei file appositi, distinti dalla pagina HTML, dove vengono raccolte tutte le preferenze sullo stile di visualizzazione che si desidera. Questa è una fantastica opportunità per chi desidera utilizzare uno stesso stile per più di una pagina web, senza dover inserire all'interno di ognuna le specifiche desiderate. Inoltre in questo modo risulterà estremamente semplice aggiornare lo stile o cambiarlo del tutto, semplicemente andando a modificare il foglio di stile.
Il foglio di stile è dunque un semplice file di testo avente estensione " BODY {font-family: verdana, arial, times new roman; font-size: 12pt; color: black; } H1 {font-family: curlz mt, arial; font-size: 52pt; color: blue; text-align: center; } H2 {font-family: Bradley Hand ITC, papyrus, arial; font-size: 52pt; color: red; } P {text-indent: 20px; }Naturalmente all'interno della pagina web sarà necessario specificare il foglio di stile facendo riferimento a tale file. Per fare ciò si dovrà riportare all'interno del tag <head> il codice:
<link rel="stylesheet" type="text/css" title="principale" href="foglio_di_stile.css" /> I parametri di cui si può scegliere il valore sono veramente molti e vanno dall'impostazione dei colori ai bordi, dalle immagini di sfondo all'interlinea del testo eccetera. Come penso avrete notato, anch'io all'interno di questo sito ho fatto ampio uso dei fogli di stile, infatti ne potete trovare ben sette, infatti è possibile scegliere lo stile di visualizzazione delle pagine tra sei stili differenti, mentre il settimo è riservato e ottimizzato per la stampa. Se vi può interessare potete vedere il contenuto dei miei fogli di stile cliccando sul relativo pulsante qui sotto:
Anche all'interno dei fogli di stile è possibile scrivere dei commenti, che, a differenza del linguaggio HTML, vanno inseriti tra i caratteri " torna all'inizio Visibilità su GooglePer far sì che il vostro sito web compaia nelle ricerche effettuate sul noto motore di ricerca Google, è necessario procedere all'indicizzazione del vostro sito. Troverete tutte le informazioni necessarie seguendo questo link.
|