Sommario Guida html e css base...1 Introduzione...1 Formattare il testo...4 Organizzare il testo in paragrafi...5 Creare le sezioni come in un libro...6 Creare gli elenchi...8 Inserire immagini e collegamenti...11 Creare tabelle...13
Guida html e css base Introduzione L'html è un linguaggio a marcatori di caratteri. In pratica attraverso dei tags è possibile rappresentare sullo schermo del testo anche formattato. Il primo tag importante è <html> che alla fine della pagina deve essere necessariamente chiuso in questo modo </html>. Dopo aver aperto una pagina web con il tag <html> segue il tag <head> che viene chiuso così </head>. Ecco quindi una struttura iniziale <html> <head>... </head> </html> Per intitolare una pagina e quindi mostrare un titolo in alto sulla finestra del browser inseriamo i due tags <title>titolo della pagina</title>. I due tags devono essere inseriti fra <head>..</head> quindi avremo <html> <head> <title>titolo della pagina</title>...</head> </html> Seguono poi dei metatags usati per fornire delle informazioni ai motori di ricerca. Ad esempio <meta name="author" content="nome autore" />. In pratica il tag inizia con la parola meta poi segue name="author" per indicare al browser l'autore della pagina e poi lo dichiariamo con content="nome autore". Ecco un esempio: <meta name="author" content="tony mercurio" /> Se vogliamo invece indicare al browser chi detiene il copyright delle pagine usiamo il tag seguente: <meta name="copyright" content="@ 2013 Tony Mercurio" />
Mentre per fornire una sintesi del contenuto del sito usiamo il seguente tag: <meta name="description" content=" descrizione del sito" /> Mentre se vogliamo indicare ai motori di ricerca le parole chiavi del sito usiamo il seguente tag: <meta name="keywords" content="parole chiavi separate da virgole"/> ecco un esempio: <meta name="keywords" content="joomla, html, css"/> Per indicare la codifica dei caratteri utilizzata nel sito usiamo il seguente tag: <meta http-equiv="content-type" type="text/html" charset="utf-8"/>. Ricordarsi che i tags si chiudono sempre con />. I tags meta si inseriscono fra <head>..</head> Ecco per esempio la struttura tipica: <html> <head> <title>il titolo della pagina</title> <meta name="author" content="tony mercurio"/> <meta name="copyright" content="@ 2014 tony mercurio"/> <meta name="description" content="il sito con le guide su html"/> <meta name="keywords" content="joomla, css, html"/> <meta http-equiv="content-type" type="text/html" charsert="utf-8"/> </head>
Dopo aver chiuso il tag </head> si inizia ogni documento con <body> che deve essere chiuso in fondo alla pagina con </body>. Tutto quello che viene scritto fra i tags <body>...</body> viene interpretato e mostrato dal browser. Quindi avremo una struttura simile: <html> <head> <meta name.../> <title>titolo pagina</tilte> </head> <body>...resto del contenuto </body> </html>
Formattare il testo Se vogliamo il testo in grassetto scriviamo il testo fra i tags <b></b> <b>testo in grassetto</b> Quindi usiamo il tag <b> che sta per bold (grassetto). Se vogliamo invece il testo in corsivo scriviamo così: <i>testo desiderato</i>. La <i> sta per italic. Mentre se vogliamo il testo sottolineato: <u>testo desiderato</u>. La u sta per underline (sottolineato). Se desideriamo il testo sbarrato: <strike>testo desiderato</strike>
Organizzare il testo in paragrafi Se vogliamo separare delle sezioni di testo come paragrafi dobbiamo usare i tags <p> </p> come segue: <p>testo del paragrafo che vogliamo</p>. Se adesso tornate ad usare <p> iniziate un nuovo paragrafo: <p>testo del primo paragrafo</p> <p>testo del nuovo paragrafo</p> Il testo di un paragrafo può essere allineato in questo modo: <p align= center, right, left, justify >. Dove right sta per destra, left per sinistra, justify giustificato e center centrato. Quindi immaginiamo di voler centrare il testo di un paragrafo: <p align= center >Testo del paragrafo</p> Quando vogliamo creare un ritorno a capo usiamo il tag </br> in questo modo: <p>ciao mamma come stai? </br> Io sto bene</p> Se provate l'esempio noterete che dopo il punto interrogativo il browser va a capo. Immaginiamo di voler scrivere in prosa come nella divina commedia, saremmo costretti ad usare troppi </br>, ma possiamo ovviare usando il tag <pre>. Ecco come fare <p><pre>nel mezzo di cammin di nostra vita, mi ritrovai in una selva oscura, che a un tratto la retta via era smarrita. Ahi lasso qual era cosa dura, esta selva selvaggia, che al pensier rinnova la paura. </pre></p> Il browser scriverà il testo come voi l'avete scritto.
Creare le sezioni come in un libro Possiamo suddividere il testo in sezioni oltre che in paragrafi usando i tags <h1>,<h2>...<hn> in questo modo: <h1>capitolo1</h1> <h2>paragrafo 1</h2> <h3>sottoparagrafo</h3> In pratica in una scala gerarchica partendo dall'alto con <h1> e a scendere creiamo una struttura a forma di libro. Possiamo separare il testo anche con una linea orizzontale usando il seguente tag: <hr>. Per esempio <h1>capitolo 1</h1> <hr> <h2>paragrafo 1</h2> <hr> <h3>sottoparagrafo</>
Potete fare in modo che la riga non occupi tutto il video in questo modo: <hr width= 50% > dove la percentuale indica la percentuale della larghezza della pagina attuale e width sta per larghezza. Potete usare anche la misura in pixel in questo modo: <hr width= 200 > dove 200 sono i pixel.
Creare gli elenchi Possiamo creare un elenco numerato di elementi i questo modo: <ol> <li>elemento 1</li> <li>elemento 2</li> <li>elemento 3</li> </ol> In pratica l'elenco inizia con <ol> e ogni elemento della lista si racchiude fra <li>...</li> <ol> sta per ordered list (lista ordinata) e <li> sta per list item. Per creare invece un elenco non ordinato: <ul> <li>elemento 1</li> <li>elemento 2</li> <li>elemento3</li> </ul>
In questo modo l'elenco sarà del tipo: (a) elemento1 (b) elemento2 (c) elemento3 Se vogliamo invece usare dei cerchietti possiamo in questo modo: <ul type= circle > <li>elemento1</li> <li>elemento2</li> <li>elemento3</li> </ul> Avremo: elemento1 elemento2 elemento3 Possiamo infine creare un elenco di definizioni: <dl> <dd>cms</dd> <dt>content management system</dt> <dd>url</dd> <dt>uniform resource location</dt> <dd>www</dd> <dt>world wide web</dt> </dl>
In pratica l'elenco di definizioni inizia con <dl> e si chiude con </dl>. Dl sta per declaration list. L'acronimo che vogliamo definire lo inseriamo fra i tags <dd> </dd> Mentre la spiegazione dell'acronimo la inseriamo fra i tags <dt> </dt>. Quando abbiamo finito chiudiamo con </dl>
Inserire immagini e collegamenti Per inserire un collegamento ad un sito usiamo la seguente sintassi: <a href= http://www.nomesito.it /> In pratica il tag <a deve essere seguito da href=. Tra virgolette abbiamo il percorso completo al sito. Se ad esempio vogliamo puntare al sito di google scriviamo: <a href= http://www.google.it />. Se vogliamo che il collegamento si apra in una nuova pagina aggiungiamo target= _new mentre se si deve aprire nella stessa pagina scriviamo target= _self in questo modo: <a href= http://www.google.it target= _new /> Dobbiamo chiudere il tag in questo modo </a> Quindi scriviamo <a href= http://www.google.it target= _new />Vai al sito</a> L'utente del sito noterà la scritta vai al sito come collegamento su cui cliccare. Possiamo puntare oltre che ad un sito esterno anche ad una pagina all'interno del nostro spazio web. Immaginiamo di voler puntare ad una pagina che si trova nella stessa posizione in cui ci troviamo noi adesso e che questa pagina si chiami pagina2.html allora scriviamo così: <a href= pagina2.html />vai alla pagina</a> Mentre se la pagina si trova in una cartella denominata cartella dobbiamo indicare il percorso così: <a href= cartella/pagina2.html />vai alla pagina2</a> In pratica quando puntiamo al sito google si definisce percorso assoluto, mentre in questi ultimi due casi parliamo di percorso relativo. Possiamo inserire un collegamento ad un punto specifico della pagina. Immaginiamo di essere in un punto ben preciso della nostra pagina ed usiamo questa sintassi: <a name= ancora />Sono qui Ora siamo ad esempio in fondo alla nostra pagina e vogliamo consentire all'utente di arrivare direttamente al punto di cui sopra. Scriviamo <a href= #ancora >Vai su</a>
In pratica l'utente quando clicca sulla scritta vai su andrà nel punto in cui abbiamo scritto sono qui. Quella che abbiamo appena creato si chiama ancora. Ovviamente all'ancora diamo un nome tra virgolette. Immaginiamo di aver creato un'ancora come sopra ma in una pagina denominata pagina2.html. Possiamo fare in modo che l'utente clicchi su un punto preciso della nostra pagina attuale e venga indirizzato all'ancora nella pagina2.html. Scriviamo così: <a href= pagina2.html#ancora />vai all'ancora</a> Per inserire un'immagine usiamo la seguente sintassi: <img src= percorso immagine alt= testo alternativo /> In pratica il percorso immagine dovete completarlo con il percorso in cui si trova l'immagine mentre alt sta per testo alternativo che viene mostrato se per caso l'immagine non viene visualizzata. Ad esempio immaginiamo che l'immagine si trovi nella stessa cartella principale del sito e si chiami globe.jpg. Scriviamo la seguente sintassi: <img src= globe.jpg alt= il globo terrestre width= 300 height= 200 /> L'utente visualizzerà un'immagine larga 300 pixel e alta 200 pixel. La larghezza è espressa da width mentre height esprime l'altezza. Possiamo anche creare un'immagine che punti ad un sito in questo modo: <a href= http://www.google.it /><img src= globe.jpg/></a> In pratica l'utente potrà cliccare sull'immagine ed andrà sul sito google.
Creare tabelle Per creare una tabella si inizia con il tag <table> e si chiude con </table>. Per creare una riga della tabella si usa il tag <tr> che significa table row (riga tabella) e si chiude in </tr>. Per creare una cella della tabella usiamo il tag <td> e si chiude in </td>. Per esempio per creare una tabella con due righe e due colonne usiamo la seguente sintassi: <table> <tr> <td>prima cella</td> <td>seconda cella</td> </tr> <tr> <td>terza cella</td> <td>quarta cella</td> </tr> Prima cella Terza cella Seconda cella Quarta cella Se vogliamo che la tabella sia di 300 pixel larga e alta 300 usiamo la seguente sintassi: <table width= 300 height= 300 > <tr> <td>prima cella</td> <td>seconda cella</td> </tr> <tr> <td>terza cella</td> <td>quarta cella</td>
</tr> </table> Se vogliamo aggiungere un bordo alla tabella di spessore 1 usiamo la seguente sintassi: <table border= 1 > Mentre se vogliamo che le celle abbiano uno sfondo colorato per esempio di rosso usiamo la seguente sintassi: <table bgcolor= red > bgcolor sta per colore di background mentre red è il colore. Possiamo centrare il testo nelle celle in questo modo: <table border= 1 > <tr> <td align= center >cella1</td> </tr></table> Vedrete che il testo nella cella 1 sarà centrato. Possiamo fare in modo che il testo nelle celle sia allineato verticalmente in questo modo: <table> <tr><td valign= borderline >Cella 1</td> <td valign= baseline >Cella 2</td> </tr> </table> In pratica se provate vedrete che il testo sarà allineato verticalmente in cima o in basso alla cella. Possiamo aumentare lo spazio fra le celle, cioè fare in modo che le celle siano distanziate di un certo numero di pixel. <table cellspacing= 5 > <tr> <td>cella1</td> <td>cella2</td> <tr><td>cella3</td>
<td>cella4</td></tr> </table> Provate e vedrete aumentare lo spazio fra le celle. Mentre se vogliamo aumentare lo spazio fra le parole nelle celle scriviamo: <table cellpadding= 5 > <tr><td>cella1,cella2,cella3</td> <td>cella2</td> </tr> </table> Questa breve guida all'html di base finisce qui, per ogni dubbio potete scrivermi al seguente indirizzo: tonymercurio75@gmail.com