-
.
Inserimento e formattazione di base del testo Il testo, visto come una mera sequenza di caratteri che hanno un qualche significat, è uno dei contenuti principali delle pagine web.
Esso viene inserito dei documenti HTML attraverso dei tag che hanno un preciso valore sematico e visuale.
Sinora, tra i vari tag utilizzati per la suddetta finalità, abbiamo incontrato, solamente il tagche permette di definire un paragrafo il cui testo di norma visualizzato con l'aggiunta di una spaziatura superiore e inferiore.
Oltre a tale tag ne esistono altri, come quelli:- per la definizione dei titoli (heading), dal più importante, visualizzato in grassetto con il font grande (<h1>), al meno importante, visualizzato in grassetto con font più piccolo (<h6>), passando per titoli intermedi visualizzati con font di dimensioni progressivamente inferiori (<h2>,<h3>,<h4>,<h5>);
- per la definizione di testo in grassetto o con un'enfasi forte (<b> per bold o <strong> per strongly emphasizes);
- per la definizione di testo in corsivo o con enfasi (<i> per italico o <em> per emphasided);
- per la definizione di testo in font monospazio (<kbd> per keyboard, <code> e <samp> per sample;
- per la definizione di testo preformattato (<pre> per preformatted);
- per la definizione di un apice o di un esponente (<sup> per superscript) o per un pedice (<sub> per subscript);
- per la definizione di una sezione il cui testo è una citazione (<blockquote>).
CODICE<!DOCTYPE html>
<html>
<head>
<title>Tutto sul testo</title>
<meta name="keywords" content="web, html5" charset="utf-8">
</head>
<body>
<hgroup>
<h1>Benvenuti nel fantastico mondo della programmazione del web</h1>
<h3>Una guida per tutti dove imparerete come diventare dei web developer!!</h3>
</hgroup>
<p>© 2012 Pellegrino <b><i>~thp~</i></b> Principe</p>
<p><strong>N.B.</strong> Ricordiamo di avere sempre a portata di mano la più recente specifica di HTML5<sup>1</sup></p>
<h5><sup>1</sup> http://www.whatwg.org/spec/web-apps/current-work/multipage/ </h5>
<p>Un pò di codice di esempio in JavaScript:</p>
<pre>
var j=10;
var data=[];
for(var i=0; i<j; i++)
data[i]=i*2;
</pre>
<p>Ecco una citazione su JavaScript dal guru Duglas Crockford:</p>
<blockquote cite="http://javascript.crockford.com/javascript.html">
<em>JavaScript, aka Mocha, aka LiveScript, aka JScript, aka ECMAScript...</em>
</blockquote>
</body>
</html>
Il codice mostra come utilizzare i tag precedentemente esaminati per creare una struttura di documento HTML dove abbiamo:- due titoli, inseriti nel tag <hgroup>, che consente di ragruppare titoli secondo una strutturazione per livelli multipli (per esempio titolo e sottotitolo);
- una serie di paragrafi, dove in alcune parti del testo sono stati usati dei marcatori per dare una certa importanza (<strong>) o enfatizzare (<em>) determinate parole. E' stato usato anche il tag zsup>, che ha permesso di creare un riferimento in apice sul carattere 1;
- del testo che rappresenta del codice JavaScript che è stato visualizzato in modo preformattato (<pre>), ossia considerando tutti gli spazi e i ritorni a capo così come sono stati, parola per parola, digitati;
- del testo che indica una citazione di un guru del linguaggio JavaScript inserita nel tag <blockquote> sul quale abbiamo usato l'attributo cite per indicare l'indirizzo web della pagina originaria.
SPOILER (clicca per visualizzare)Nel codice abbiamo utilizzato una speciale combinazione di caratteri formati dal simbolo di ampersand(&), un nome abbreviato e il carattere punto e virgola per far si che il browser visualizzasse il simbolo copyright (©). Esistono molte combinazioni di tali caratteri, definiti nol loro insieme come character entities, che consentono, per l'appunto, di visualizzare in una pagina web dei caratteri speciali. Tra di essi, uno spesso utilizzato è quello codificato come , denominato non-breaking space. Consente di "forzare" l'inserimento di caratteri di spazio ed è indispensabile quando si ha la necessità di visualizzare parole separate non da uno, ma da più spazi.Guida a cura di ©True Story - Web Resource
Edited by True Story - 11/11/2013, 21:35.
Guida HTML5 - Inserimento e formattazione di base del testoGuida numero 2 |
Like
