\nRisulta pi\u00f9 pratico racchiudere il testo in appositi tag a seconda della funzione che il testo sta svolgendo.
\nLa nostra pagina html risulter\u00e0 pi\u00f9 semplice da leggere, quando dovremo modificarla, e inoltre potremo ottenere un effetto grafico pi\u00f9 gradevole e rispondente alle diverse esigenze.
\nVediamo i principali tag-contenitori <\/span>da utilizzare per formattare il testo.<\/p>\n
Titoli.<\/h3>\n
Esistono 6 differenti livelli di titolo che si ottengono utilizzando i seguenti tag:<\/p>\n
- \n
- <h1><\/li>\n
- <h2><\/li>\n
- <h3><\/li>\n
- <h4><\/li>\n
- <h5><\/li>\n
- <h6><\/li>\n<\/ul>\n
La “h<\/strong>” sta per “heading<\/em>“, cio\u00e8 titolo e ogni livello indica una grandezza diversa.
\nDall'<h1>, che \u00e8 il pi\u00f9 importante, si va via via degradando fino all'<h6> che rappresenta il titolo con grandezza minore.
\nGli heading, cos\u00ec come altri tag contenitori, appartengono alla famiglia degli elementi di blocco<\/strong>. Tali elementi sono cos\u00ec chiamati perch\u00e9 una volta definiti creano un blocco attorno a s\u00e9, di conseguenza vanno a capo e risultano distanziati dagli elementi che li circondano.<\/p>\nAnalizziamo il seguente codice html:<\/p>\n
\r\n<html>\r\n <head>\r\n <title>TITOLI<\/title>\r\n <\/head>\r\n <body>\r\n <h1>Esame di informatica<\/h1>\r\n <h2>Esame di informatica<\/h2>\r\n <h3>Esame di informatica<\/h3>\r\n <h4>Esame di informatica<\/h4>\r\n <h5>Esame di informatica<\/h5>\r\n <h6>Esame di informatica<\/h6>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n
Nella pagina html abbiamo definito 6 titoli <\/em>con ugual testo ma grandezza diversa, utilizzando in successione i tag da h1<\/strong> ad h6<\/strong>.
\nCiascun titolo verr\u00e0 automaticamente portato a capo rispetto al precedente e di default sar\u00e0 applicato un margine (inferiore e superiore) che differisce seppur minimamente da browser a browser.
\nDi seguito viene mostrato il risultato in Internet Explorer:<\/p>\n![\"Titoli](\"http:\/\/www.donatantonio.net\/img_html\/tag_titolo.jpg\" "\\"Titoli")
<\/p>\nParagrafi.<\/h3>\n
I browser non riconoscono da soli la formattazione del testo, bens\u00ec \u00e8 necessario indicargliela tramite appositi tag html. In caso contrario il browser si limiter\u00e0 a visualizzare a video i caratteri uno dietro all\u2019altro senza alcuna regola.
\nIl paragrafo<\/span> rappresenta l’unit\u00e0 di base entro cui suddividere un testo.
\nIl tag <p><\/strong> lascia una riga vuota prima della sua apertura e dopo la sua chiusura. La sintassi \u00e8 la seguente:<\/p>\n<p>Questo testo \u00e8 in un paragrafo\u2026<\/p><\/strong><\/p>\n
Il tag <\/p> di chiusura pu\u00f2 essere omesso ma \u00e8 buona norma abituarsi ad inserirlo sempre, soprattutto nel caso in cui siano necessari pi\u00f9 paragrafi in successione.
\nAnalizziamo il seguente esempio di codice html:<\/p>\n\r\n<p>Questo è un primo paragrafo... <\/p>\r\n<p>Questo è un secondo paragrafo...<\/p>\r\n<\/pre>\n
I browser visualizzer\u00e0 cos\u00ec i due paragrafi:<\/p>\n
![\"Paragrafi](\"http:\/\/www.donatantonio.net\/img_html\/paragrafi.jpg\" "\\"Paragrafi")
<\/p>\nIl tag <p> possiede inoltre un importante attributo presente nella maggior parte degli elementi di blocco che prende il nome di align.
\nSpecificando ad esempio:<\/p>\n<p align=\u2018right\u2019>Questo \u00e8 un paragrafo\u2026<\/p><\/strong><\/p>\n
il testo contenuto all\u2019interno del paragrafo sar\u00e0 allineato a destra. In alternativa il testo potr\u00e0 essere allineato a sinistra (left<\/em>), al centro (center<\/em>) oppure giustificato (justify<\/em>).<\/p>\n
Andare a capo.<\/h3>\n
Si sar\u00e0 notato che andando a capo nel codice html all\u2019interno di un paragrafo, questo non riproduce lo stesso effetto visualizzato nel browser. Ad esempio scrivere come segue non produce l\u2019effetto desiderato:<\/p>\n
\r\n<p>\r\nQuesto è un paragrafo\r\nquesta riga dovrebbe andare a capo\r\ncosì come questa riga\u2026\r\n<\/p>\r\n<\/pre>\n
Il tag <br\/><\/span> permette invece di inserire un interruzione di riga, quindi un a capo. Essendo questo un tag vuoto<\/em> e non un contenitore come <p>, nella sintassi verr\u00e0 definito senza contenuto e quindi senza la coppia di tag di apertura e chiusura.
\nL\u2019esempio precedente \u00e8 cos\u00ec riformulato grazie al tag <br>:<\/p>\n\r\n<p>\r\nQuesto è un paragrafo <br\/>\r\nquesta riga dovrebbe andare a capo <br\/>\r\ncosì come questa riga\u2026\r\n<\/p>\r\n<\/pre>\n
Utilizzando semplicemente una coppia di tag <br> si ottiene di conseguenza una linea bianca<\/em>.<\/p>\n
Il div e lo span.<\/h3>\n
Il tag <div><\/span> definisce un blocco di testo che va a capo ma, a differenza del paragrafo, non lascia spazi prima e dopo la sua apertura.
\nIl DIV grazie alla sua enorme versatilit\u00e0 viene definito nel linguaggio HTML come l\u2019elemento di tipo blocco per eccellenza<\/strong>. E\u2019 utilizzato pi\u00f9 che per contenere semplice testo soprattutto per la suddivisione strutturale delle pagine html.
\nLa sintassi del DIV \u00e8 la seguente:<\/p>\n<div>Questo \u00e8 un testo all\u2019interno di un blocco div.<\/div><\/strong><\/p>\n
Lo <span><\/span> invece \u00e8 un contenitore generico che pu\u00f2 essere annidato ad esempio all’interno dei <div>.
\nA differenza dei tag <p> e <div> si tratta di un elemento inline<\/strong>, che cio\u00e8 non va a capo e continua sulla stessa linea del tag che lo include.
\nLo <span> \u00e8 un elemento molto utilizzato soprattutto insieme ai fogli di stile (CSS), ad esempio per definire delle aree di testo particolari come quelle per segnalare errori o informazioni all\u2019utente.
\nSe non viene associato ad uno stile la sua presenza risulta nulla<\/em> e dipendente esclusivamente dallo stile del tag che lo contiene.
\nAnalizziamo quindi il seguente codice HTML:<\/p>\n\r\n<div>\r\nQuesto testo \u00e8 all\u2019interno di un blocco.<br\/>\r\nE\u2019 possibile inserire immagini, link o altri oggetti all\u2019interno di un div.<br\/>\r\nInoltre un div pu\u00f2 contenere uno span che a sua volta contiene ad esempio una parola o una frase.<br\/>\r\n<span>Questo testo \u00e8 in uno span.<\/span>\r\n<\/div>\r\n<\/pre>\n
E\u2019 stato definito un div che contiene esclusivamente testo formattato grazie a dei <br> e prima della chiusura uno span con del testo. Da notare la nidificazione dello span nel div.
\nIl risultato dell\u2019esempio precedente \u00e8 cos\u00ec visualizzato dal browser:<\/p>\n![\"DIV](\"http:\/\/www.donatantonio.net\/img_html\/div_e_span.jpg\" "\\"DIV")
<\/p>\n","protected":false},"excerpt":{"rendered":"Tag contenitori.<\/p>\n
Come visto\u00a0in un articolo\u00a0precedente nulla vieta di scrivere direttamente all’interno del tag body il testo di ci\u00f2 che vogliamo appaia a schermo.
\nRisulta pi\u00f9 pratico racchiudere il testo in appositi tag a seconda della funzione che il testo sta svolgendo.
\nLa nostra pagina html risulter\u00e0 pi\u00f9 semplice da leggere, quando dovremo modificarla, e inoltre potremo ottenere un effetto grafico pi\u00f9 gradevole e rispondente alle diverse esigenze.
\nVediamo i principali tag-contenitori da utilizzare per formattare il testo.<\/p>\nTitoli.<\/p>\n
Esistono 6 differenti livelli di titolo che si ottengono utilizzando i seguenti tag:<\/p>\n
<h1>
\n<h2>
\n<h3>
\n<h4>
\n<h5>
\n<h6><\/p>\nLa “h” sta per “heading<\/em>“, cio\u00e8 titolo e ogni livello indica una grandezza diversa.
\nDall'<h1>, che \u00e8 il pi\u00f9 importante, si va via via degradando fino all'<h6> che rappresenta il titolo con grandezza minore.
\nGli heading, cos\u00ec come altri tag contenitori, appartengono alla famiglia degli elementi di blocco. Tali elementi sono cos\u00ec chiamati perch\u00e9 una volta definiti creano un blocco attorno a s\u00e9, di conseguenza vanno a capo e risultano distanziati dagli elementi che li circondano.<\/p>\nAnalizziamo il seguente codice html:<\/p>\n
<html>
\n <head>
\n <title>TITOLI<\/title>
\n <\/head>
\n <body>
\n <h1>Esame di informatica<\/h1>
\n <h2>Esame di informatica<\/h2>
\n <h3>Esame di informatica<\/h3>
\n <h4>Esame di informatica<\/h4>
\n <h5>Esame di informatica<\/h5>
\n <h6>Esame di informatica<\/h6>
\n <\/body>
\n<\/html><\/p>\nNella pagina html abbiamo definito 6 titoli <\/em>con ugual testo ma grandezza diversa, utilizzando in successione i tag da h1 ad h6.
\nCiascun titolo verr\u00e0 automaticamente portato a capo rispetto al precedente e di default sar\u00e0 applicato un margine (inferiore e superiore) che differisce seppur minimamente da browser a browser.
\nDi seguito viene mostrato il risultato in Internet Explorer:<\/p>\n<\/p>\nParagrafi.<\/p>\n
I browser non riconoscono da soli la formattazione del testo, bens\u00ec \u00e8 necessario indicargliela tramite appositi tag html. In caso contrario il browser si limiter\u00e0 a visualizzare a video i caratteri uno dietro all\u2019altro senza alcuna regola.
\nIl paragrafo rappresenta l’unit\u00e0 di base entro cui suddividere un testo.
\nIl tag <p> lascia una riga vuota prima della sua apertura e dopo la sua chiusura. La sintassi \u00e8 la seguente:<\/p>\n<p>Questo testo \u00e8 in un paragrafo\u2026<\/p><\/p>\n
Il tag <\/p> di chiusura pu\u00f2 essere omesso ma \u00e8 buona norma abituarsi ad inserirlo sempre, soprattutto nel caso in cui siano necessari pi\u00f9 paragrafi in successione.
\nAnalizziamo il seguente esempio di codice html:<\/p>\n<p>Questo è un primo paragrafo… <\/p>
\n<p>Questo è un secondo paragrafo…<\/p><\/p>\nI browser visualizzer\u00e0 cos\u00ec i due paragrafi:<\/p>\n<\/p>\n
Il tag <p> possiede inoltre un importante attributo presente nella maggior parte degli elementi di blocco che prende il nome di align.
\nSpecificando ad esempio:<\/p>\n<p align=\u2018right\u2019>Questo \u00e8 un paragrafo\u2026<\/p><\/p>\n
il testo contenuto all\u2019interno del paragrafo sar\u00e0 allineato a destra. In alternativa il testo potr\u00e0 essere allineato a sinistra (left<\/em>), al centro (center<\/em>) oppure giustificato (justify<\/em>).<\/p>\n
Andare a capo.<\/p>\n
Si sar\u00e0 notato che andando a capo nel codice html all\u2019interno di un paragrafo, questo non riproduce lo stesso effetto visualizzato nel browser. Ad esempio scrivere come segue non produce l\u2019effetto desiderato:<\/p>\n
<p>
\nQuesto è un paragrafo
\nquesta riga dovrebbe andare a capo
\ncosì come questa riga\u2026
\n<\/p><\/p>\nIl tag <br\/> permette invece di inserire un interruzione di riga, quindi un a capo. Essendo questo un tag vuoto<\/em> e non un contenitore come <p>, nella sintassi verr\u00e0 definito senza contenuto e quindi senza la coppia di tag di apertura e chiusura.
\nL\u2019esempio precedente \u00e8 cos\u00ec riformulato grazie al tag <br>:<\/p>\n<p>
\nQuesto è un paragrafo <br\/>
\nquesta riga dovrebbe andare a capo <br\/>
\ncosì come questa riga\u2026
\n<\/p><\/p>\nUtilizzando semplicemente una coppia di tag <br> si ottiene di conseguenza una linea bianca<\/em>.<\/p>\n
Il div e lo span.<\/p>\n
Il tag <div> definisce un blocco di testo che va a capo ma, a differenza del paragrafo, non lascia spazi prima e dopo la sua apertura.
\nIl DIV grazie alla sua enorme versatilit\u00e0 viene definito nel linguaggio HTML come l\u2019elemento di tipo blocco per eccellenza. E\u2019 utilizzato pi\u00f9 che per contenere semplice testo soprattutto per la suddivisione strutturale delle pagine html.
\nLa sintassi del DIV \u00e8 la seguente:<\/p>\n<div>Questo \u00e8 un testo all\u2019interno di un blocco div.<\/div><\/p>\n
Lo <span> invece \u00e8 un contenitore generico che pu\u00f2 essere annidato ad esempio all’interno dei <div>.
\nA differenza dei tag <p> e <div> si tratta di un elemento inline, che cio\u00e8 non va a capo e continua sulla stessa linea del tag che lo include.
\nLo <span> \u00e8 un elemento molto utilizzato soprattutto insieme ai fogli di stile (CSS), ad esempio per definire delle aree di testo particolari come quelle per segnalare errori o informazioni all\u2019utente.
\nSe non viene associato ad uno stile la sua presenza risulta nulla<\/em> e dipendente esclusivamente dallo stile del tag che lo contiene.
\nAnalizziamo quindi il seguente codice HTML:<\/p>\n<div>
\nQuesto testo \u00e8 all\u2019interno di un blocco.<br\/>
\nE\u2019 possibile inserire immagini, link o altri oggetti all\u2019interno di un div.<br\/>
\nInoltre un div pu\u00f2 contenere uno span che a sua volta contiene ad esempio una parola o una frase.<br\/>
\n<span>Questo testo \u00e8 in uno span.<\/span>
\n<\/div><\/p>\nE\u2019 stato definito un div che contiene esclusivamente testo formattato grazie a dei <br> e prima della chiusura uno span con del testo. Da notare la nidificazione dello span nel div.
\nIl risultato dell\u2019esempio precedente \u00e8 cos\u00ec visualizzato dal browser:<\/p><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[237],"tags":[280,277,279,276,275,278],"_links":{"self":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts\/1209"}],"collection":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/comments?post=1209"}],"version-history":[{"count":0,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts\/1209\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/media?parent=1209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/categories?post=1209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/tags?post=1209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}