In questa lezione parliamo di paragrafi in html e del tag br che serve per andare a capo.
I paragrafi in html si inseriscono con il tag <p></p>, dove p è chiaramente l’iniziale di paragraph.
I paragrafi sono fondamentali per una pagina web e se ne possono inserire anche più di uno. Tra un paragrafo e l’altro si genera dello spazio che poi posso personalizzare con i CSS.
Vediamo subito un esempio di inserimento di due paragrafi in html.
Dunque apriamo la nostra pagina html di esempio che abbiamo creato nella scorsa lezione o in alternativa ne creiamo una nuova e digitiamo il codice sotto:
...
<h1>Coding Creativo<h1>
<h2>Scratch</h2>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L'interfaccia grafica è molto intuitiva e semplice da usare.</p>
<p>Sul sito Coding Creativo troverete tanti esempi ed esercizi su scratch</p>
...
Otterremo quindi questo risultato:
Coding Creativo
Scratch
Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L’interfaccia grafica è molto intuitiva e semplice da usare.
Sul sito Coding Creativo troverete tanti esempi ed esercizi su Scratch.
Tag <br> per andare a capo in html
Il tag <br> sta per break line, è utilizzato per andare a capo e a differenza del tag pragrafo <p> non necessita della chiusura.
Quando si va a capo con il tag <br> in html, tra una riga e l’altra non si genera uno spazio vuoto così come con il tag <p>.
Vediamo quindi un esempio di utilizzo del tag <p> e del tag <br>.
...
<h1>Coding Creativo<h1>
<h2>Scratch</h2>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L'interfaccia grafica è molto intuitiva e semplice da usare.</p>
<br>Sul sito Coding Creativo troverete tanti esempi ed esercizi su scratch.
...
Ecco cosa otterrete, notate che lo spazio tra usare e Sul sito non è più come prima.
Coding Creativo
Scratch
Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L’interfaccia grafica è molto intuitiva e semplice da usare. Sul sito Coding Creativo troverete tanti esempi ed esercizi su Scratch.
Più spazi tra i paragrafi in html
Se si desidera lasciare più spazi si possono inserire anche più di un <br> e si possono inserire anche tra un paragrafo e l’altro.
Facciamo dunque un esempio, dove tra un paragrafo e l’altro ho inserito due <br>.
All’interno dell’ultimo un paragrafo ho anche inserito la lista.
<h1>Coding Creativo<h1>
<h2>Scratch</h2>
<p>Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L'interfaccia grafica è molto intuitiva e semplice da usare
<br>Sul sito Coding Creativo troverete tanti esempi ed esercizi su scratch.</p>
<br><br>
<p>Ecco quindi alcuni esempi di giochi realizzati con Scratch:
<ul>
<li>Tabellina con Scratch;</li>
<li>Morra cinese.</li>
</ul>
</p>
Ecco dunque il risultato:
Coding Creativo
Scratch
Scratch è un ambiente di programmazione gratuito ed è ideale per imparare il coding. L’interfaccia grafica è molto intuitiva e semplice da usare. Sul sito Coding Creativo troverete tanti esempi ed esercizi su Scratch.
Ecco quindi alcuni esempi di giochi realizzati con Scratch:
Tabellina con Scratch;
Morra cinese.
Attributi dei paragrafi in html
In passato si utilizzavano vari attributi per il tag paragrafo, ad esempio per dare uno sfondo oppure per allineare del testo. Queste proprietà oggi sono deprecate e si preferisce usare i CSS.
Vediamo come inserire alcuni tag all’interno del tag body.
Siamo dunque all’interno della sezione body, dove vedremo una vasta serie di tag da poter inserire all’interno della pagina per creare una formattazione piacevole alla lettura.
Facciamo una premessa riguardo al tag <body>, molti manuali ancora trattano di proprietà tipo bgcolor, background, ecc… Come in questo esempio: <body bgcolor=”#ff0000″> che serve a dare il colore di sfondo alla pagina.
Dobbiamo dire che queste proprietà sono in disuso, quindi magari proporvele per poi dirvi che non si usano, non mi sembra costruttivo. Perciò le ometterò.
Mi potreste chiedere, ma allora coma si fa ad esempio a dare uno sfondo ad una pagina? Bene vi risponderò a questo quando parleremo dei CSS e vi farò vedere in dettaglio come si fa.
Partiamo adesso dai tag che servono per i titoli degli articoli che scriverete all’interno della vostra pagina.
Tag titoli all’interno del tag body
I tag per scrivere i titoli di un articolo si rappresentano con la lettera H, seguita da un numero che va da 1 a 6. Più piccolo è il numero, più grande sarà il carattere.
I tag titoli si inseriscono subito dopo il tag <body> e chiaramente si decide quale utilizzare in base alle proprie esigenze.
Potete notare sotto un esempio di utilizzo dei tag h3 e h4.
<h3>Tutorial sul linguaggio html creato da coding creativo</h3>
<h4>Tutorial sul linguaggio html creato da coding creativo</h4>
Noterete che a mano a mano la dimensione del carattere diminuisce.
Il tag h1 in genere viene utilizzato per il titolo principale della pagina e viene posizionato nella parte alta dell’articolo. Per le tecniche SEO (ovvero per un buon posizionamento nei motori di ricerca) sarebbe opportuno inserire la parola chiave nel tag h1.
Non a caso infatti tornando all’esempio precedente, l’articolo sulle frazioni ha come titolo frazioni con scratch, che è la parola chiave principale con la quale voglio farmi trovare da Google.
Chiaramente può anche essere diverso dal tag title, anzi è consigliabile che non sia proprio uguale e che si possa combinare abilmente con il suddetto tag.
Vi ricordo che nel tag title inerente l’articolo sulle frazioni avevamo inserito questo:
<title>Frazioni con scratch, frazioni proprie, improprie e apparenti con scratch</title>
Anche qui vale la regola di utilizzare tag h1 diversi per ogni pagina.
Un’altra regola è quella di non inserire il punto alla fine di un titolo e in generale sarebbe opportuno non inserire nessuna punteggiatura.
La lunghezza del tag h1 deve essere compresa tra i 5 e i 70 caratteri.
In una pagina html, è bene distribuire i titoli e i sottotitoli, quindi utilizzate bene anche gli altri tag, inserendo se possibile qualche altra parolina chiave!
Prima pagina in HTML
Adesso iniziamo a creare la nostra prima pagina in html.
Prendiamo il semplice programma per scrivete dei testi che troverete nella sezione Accessori Windows – Blocco note, come da figura sotto:
Quando si aprirà il blocco note scrivete queste semplici righe di codice:
<!DOCTYPE html>
<html lang="it">
<head><title>Coding Creativo</title></head>
<body><h1>Sto realizzando la mia prima pagina</h1></body></html>
Non badiamo molto all’indentazione, ovvero allo spazio vuoto inserito all’inizio di un riga di testo, come invece si faceva una volta, in quanto addirittura adesso si utilizza la tecnica di minimizzare tutti i codici e dunque anche l’html, in modo tale da rendere più leggera la pagina.
Dopo occorre salvare la pagina con un nome, in questo la chiamo titolo.html, ma poi è importante selezionare l’opzione tutti i file, in quanto di default è impostato come documento di testo (file con estensione .txt).
Bene, adesso andate nella cartella dove è salvato il file e lo aprite. Si aprirà la pagina creata, nel browser predefinito, con il contenuto della vostra prima pagina web.
A breve pubblicherò altri interessanti articoli sull’argomento!
Innanzitutto, facciamo una premessa: l’uso delle tabelle in un sito web non è così diffuso come una volta.
Tempo fa si utilizzavano le tabelle per creare layout, oggi è sbagliatissimo e si usa invece una struttura a livelli personalizzata con i CSS, di cui vi parlerò più avanti.
Allora quando usare le tabelle in un sito web?
Diciamo quando necessario ovvero per l’impaginazione di dati prettamente tabellari.
Ecco dunque un esempio di tabelle in HTML 5:
Detto ciò ecco una mini guida per la creazione delle tabelle.
Inserire le tabelle in html
Per inserire una tabella si usano i tag <table></table>. All’interno della tabella si inseriscono le righe con il tag <tr></tr> e le singole celle rappresentate dal tag <td></td>. Il termine tr deriva da table row, riga della tabella e td deriva da table data, cella della tabella.
Il tag <th><th>, dove th deriva da table column heading, titolo della colonna della tabella, viene utilizzato per inserire le intestazioni delle celle.
Quindi ecco un esempio di una tabella di 4 righe e 3 colonne, dove la prima riga è l’intestazione della tabella. Dunque, sempre all’interno del tag body inseriamo:
Ma nell’html 5 sono stati inseriti altri 3 tag fondamentali per la struttura della tabella. Questi tag sono thead il cui termine deriva da “table head” ovvero testa della tabella; tbody da “table body” che indica il corpo della tabella) e tfoot da “table foot” che è il piede della tabella.
Quindi in questo esempio, di tabelle in html, aggiungiamo i tag thead e tbody:
...
<table>
<thead> <!--intestazione di tabella-->
<tr>
<th>pagine</th>
<th>provenienza maggiore</th>
<th>visitatori giornalieri</th>
</tr>
</thead> <!--fine intestazione di tabella -->
<tbody> <!--inizio corpo della tabella -->
<tr>
<td>scratch</td>
<td>1.200</td>
<td>organic search</td>
</tr>
<tr>
<td>algobuild</td>
<td>referral</td>
<td>800</td>
</tr>
<tr>
<td>linugaggio C</td>
<td>social</td>
<td>600</td>
</tr>
</tbody> <!--fine corpo della tabella -->
</table>
...
Se provate l’esempio non è cambiato proprio nulla, il risultato è sempre lo stesso! Allora perché inserirli?
Web semantico
Questi tag sono importanti per il web semantico. Per il momento vi dico solo che il web semantico è quella parte del web che consente di fare ricerche molto più evolute, basate sulla presenza nel codice html di parole chiave.
In poche parole questi tag semantici vengono interpretati dagli algoritmi di Google e da altri motori di ricerca e avere un sito che li contiene fa aumentare di molto il posizionamento; in quanto all’occhio dell’algoritmo è più semplice da interpretare.
Nell’html dal 2012, dunque con la versione HTML 5, sono stati introdotti parecchi tag semantici e alcuni di questi riguardano le tabelle come descritto sopra, molti altri li troverete andando avanti nel tutorial.
Altro esempio con l’inserimento del tfoot
Aggiungiamo un’altra riga che ad esempio contiene la visualizzazione del totale delle visite. Allora ha senso inserire il tag tfoot come da esempio:
<table>
<thead> <!--intestazione di tabella-->
<tr>
<th>pagine</th>
<th>provenienza maggiore</th>
<th>visitatori giornalieri</th>
</tr>
</thead> <!--fine intestazione di tabella --></thead> <!--fine intestazione di tabella -->
<tbody> <!--inizio corpo della tabella -->
<tr>
<td>scratch</td>
<td>1.200</td>
<td>organic search</td>
</tr>
<tr>
<td>algobuild</td>
<td>referral</td>
<td>800</td>
</tr>
<tr>
<td>linugaggio C</td>
<td>social</td>
<td>600</td>
</tr>
</tbody> <!--fine corpo della tabella -->
<tfoot> <!--inizio piede della pagina -->
<tr>
<td colspan=2>visite totali</td>
<td>2.600</td>
</tr>
</tfoot> <!--fine piede della pagina -->
</table>
...
In questo esempio noterete che ho inserito l’attributo colspan all’interno della prima colonna dell’ultima riga.
Colspan e rowspan
Gli attributi colspan e rowspan definiscono il numero di righe o di colonne sul quale si deve estendere una cella.
Colspan definisce il numero di colonne mentre rowspan definisce il numero di righe.
Un altro esempio di colspan che ho inserito nella prima riga:
In questo esempio colspan è stato inserito all’interno di th.
In tutti questi esempi non vi ho detto nulla della formattazione, questo perché una volta si usavano tanti attributi all’interno dei tag, adesso invece si utilizzano i CSS.
Tuttavia se desiderate dare almeno un bordo potete farlo inserendo all’interno del tag l’attributo border: <table border=”1″>…</table>.
Si può impostare anche la larghezza della tabella con l’attributo width e l’altezza con l’attributo height. Queste proprietà vanno inserite anche all’interno del tag td. Ma anche questi si impostano con i CSS.
Oggi vedremo come inserire degli elenchi all’interno della pagina html. Ci sono due tipi di elenchi: elenchi puntati ed elenchi numerati.
Elenchi puntati
Gli elenchi puntati sono gli elenchi non ordinati (unordered list) rappresentati dal tag <ul></ul>.
All’interno di questi tag si mettono le singole voci delle liste: <li></li>, ricordiamo che il tag di chiusura </li> non è obbligatorio ma è consigliabile inserirlo.
Quindi cominciamo subito a creare il nostro primo elenco puntato.
Apriamo la pagina che abbiamo creato nella scorsa lezione: basta cliccare con il tasto destro del mouse sull’icona della pagina e scegliere il percorso ‘apri con’ e poi ‘blocco note’. In alternativa potete creare anche una pagina nuova.
Aggiungete all’interno del tag body, sotto il tag h1, una lista di voci rappresentata dal tag ul come da esempio:
E si possono annidare ancora, facciamo un esempio inserendo questo codice:
<ul>
<li>Scratch
<ul>
<li>Tutorial scratch</li>
<li>Giochi con scratch
<ul>
<li>Giochi per la primaria</li>
<li>Giochi per la secondaria</li>
</ul>
</li>
</ul>
</li>
<li>Algobuild</li>
<li>Linguaggio C</li>
<li>Php</li>
</ul>
Elenchi numerati
Gli elenchi numerati sono gli elenchi ordinati (ordered list) e per crearli si utilizza il tag <ol></ol>. Anche qui ogni singola voce della lista si individua con <li></li>.
Si possono personalizzare gli elenchi usando gli attributi type e start.
L’attributo start specifica il valore di partenza: ad esempio invece di partire da 1 si può scegliere di partire con un altro numero <ol start=”3″></ol>.
Modificando l’esempio di prima otterrò:
L’attributo type invece specifica il tipo: ad esempio se volessi mettere le lettere al posto dei numeri dovrei scrivere <ol type=”A”></ol>
L’attributo type può indicare diversi valori:
1 è il valore di default;
A lettera maisucola;
a lettera minuscola;
I lettere romane;
i lettere romane minuscole.
Gli elenchi si possono personalizzare molto con i CSS, spiegherò come fare più avanti.
Commenti recenti