Testo e tabelle preformattati per uso generico

Con questo post inizierò a trattare per gradi la creazione di testo e tabelle preformattati.
Una tabella HTML, simile a qualsiasi altra tabella stampata, consiste di colonne e righe contente dati. HTML prevede due modi per preservare il layout del testo. Uno è generco, l’altro è specifico per le tabelle. In questo post concentreremo l’attenzione sulla descrizione del modo generico.

Inserimento del testo preformattato

HTML in genere ignora gli spazi in eccesso. Il tag <PRE> induce invece il browser a tenerne conto. A questo punto entrano in gioco le tabelle, dal momento che per crearle occorre lasciare un numero corretto di spazi per garantire l’allineamento di righe e colonne. Seuge un semplice frammento HTML che usa il tag <pre>:

<H1>Record visite |Omnia Blog|</H1>
<PRE>
Record giornaliero: 3,126 visite
Record settimanale: 16,142 visite
Record mensile: 58,561 visite
</PRE>

Ho inserito i tag <pre> e </pre> in righe a parte in modo che si possano vedere più chiaramente, ma non è necessario fare lo stesso nei documenti HTML. Dunque in questo esempio si crea una semplice tabella a due colonne, che senza i tag di preformattazione ( <pre> e </pre> ) si sarebbe disposto su una sola riga, senza spazi vuoti extra, come segue:

Record giornaliero: 3,126 visiteRecord settimanale: 16,142 visiteRecord mensile: 58,561 visite

Il tag <pre> istruisce il browser a visualizzare le informazioni in formato tabella. Inoltre il tag <pre> ha una caratteristica opzionale: la possibilità di specificare la lunghezza del testo preformattato. Ecco un esempio:

<PRE WIDTH=65>Questo testo formattato è limitato in larghezza a 65 centimetri</PRE>

Ecco un video tutorial da me realizzado e montato da Marco che renderà più chiaro l’uso del tag <pre>:

Per scaricare il video e vederlo con una risoluzione migliore cliccate qui.

HTML, Creazione degli elenchi

Spesso i documenti HTML devono contenere elenchi formattati, in aggiunta ai normali paragrafi di testo. HTML permette di creare diversi tipi di elenchi:

• Elenchi puntati: che in HTML si definiscono non ordinati;
• Elenchi numerati: definiti elenchi ordinati;
• Elenchi glossario
• Elenchi nidificati
• Elenchi a più colonne ed elenchi menù: ormai inutilizzati in quanto non supportati dalla maggiorparte dei browser.

HTML precede i comandi di formattazione per ognuno di questi tipi di elenchi.

Formattazione degli elenchi puntati

Gli elenchi puntati evidenziano ciascun elemento premettendo al testo un pallino o altri segni distintivi. In HTML è possibile creare questo tipo di elenchi usando il tag <UL>, che identifica la lista non ordinata, insieme al tag <LI>, che identifica l’elemento. Quest’ultimo tag è utilizzato in tutti i tipi di elenchi HTML. Ecco un frammento HTML che contiene un elenco puntato, presente anche sotto nel video illustrativo:

<UL><LI>Primo elemento puntato</LI>
<LI>Secondo elemento puntato</LI>
<LI>Terzo elemento puntato</LI></UL>

Gli elenchi puntati vengono indentati, cioè ogni paragrafo comincia con un pallino e ogni riga del paragrafo viene rientrata rispetto al margine sinistro, anzichè partire dall’inizio dela prima colonna. Inoltre è possibile usare i codici di paragrafo <P> e </P> per creare elenchi puntati multiparagrafo.

Formattazione degli elenchi numerati

In HTML è possibile creare elenchi numerati con l’uso del tag <OL> ed il browser numera automaticamente gli elementi dell’elenco, quindi non è necessario numerare a priori gli elementi. Questi vengono automaticamente rinumerati se il documento viene modificato o vengono aggiunti o eliminati elementi. Ecco un esempio di frammento HTML presente anche nel video illustrativo sotto:

<OL><LI>Primo elemento numerato</LI>
<LI>Secondo elemento numerato</LI>
<LI>Terzo elemento numerato</LI></OL>

Liste glossario

Un elenco glossario permette di includere una descrizione per ciascun oggetto elencato. Il tag HTML <DL> denota tale lista, ma occorrono gli altri tag <DD> e <DT> per formattare l’elenco glossario. Segue un frammento di codice HTML rappresentante una lista glossario che verrà illustrata meglio nel video tutorial sotto:

<DL><DT>|Omnia Blog|</DT>
<DD>E’ un blog basato sulla piattaforma WordPress</DD>

Elenchi nidificati

Un elenco nidificato consiste in una lista i cui elementi possono contenere a loro volta elenchi. E’ possibile creare elenchi nidificati di vario tipo. Il seguente frammento (presente anche nel video tutorial) mostra un elenco puntato a due livelli:

<UL><LI>Elemento di lista numero 1</LI>
<LI>Elemento di lista numero 2</LI>
<UL><LI>Sotto elemento A dell’elemento numero 2</LI></UL>
<Elemento di lista numero 3</LI></UL>

Mentre questo frammento mostra una lista nidificata che utilizza sia i tag di elenco ordinato chi i tag di elenco non ordinato:

<OL><LI>Sport</LI>
<UL><LI>Calcio</LI>
<LI>Tennis</LI></UL></OL>

Elenchi a più colonne ed elenchi Menù

Questo tipo di elenchi non sono più supportati dai browser e venivano creati tramite l’uso dei tag <DIR> per gli elenchi a più colonne e <MENU> per gli elenchi menù. Essi sono stati rimpiazzati dai tag <UL> e <OL> in quanto l’unico browser che li supportava era MidasWWW, un browser UNIX poco usato.

Ecco il video tutorial che illustrerà quanto detto fino ad ora. Per scaricarlo e vederlo in una risoluzione migliore cliccate qui.

HTML, Collegamento a parti specifiche in un documento e attraverso gli URL

Collegamento a parti specifiche in un documento

Un collegamento ipertestuale può puntare ad una parte specifica del documento obiettivo, anzichè genericamente al documento. Un collegamento àncora può contenere due diversi comandi: l’esempio che segue usa il comando NAME. La sintassi è semplice:<A NAME=”programmazione”>
Quest’àncora rappresenta un segnalibro nel documento abiettivo, a cui il collegamento punta. Per esempio, segue un frammento HTML da un documento obiettivo con un punto contrassegnato:
<A NAME=”xmarks”>X indica il punto
Tornando indietro al primo documento, si può usare un’àncora per creare un collegamento ipertestuale a questo punto del documento obiettivo:
Per maggiori informazion <A href=”doc2.htm#xmarks”>clicca qui</A>
Si tratta di un normale collegamento ipertestuale ad un documento locale, ma con una differenza, l’aggiunta di “xmarks” per fare riferimento al punto contrassegnato nel documento richiamato. Cliccando quel collegamento ipertestuale nel primo documento, si passa al documento obiettivo, precisamente alla parte contrassegnata con il segnalibro, permettendo così agli utenti di passare in punti precisi dei documenti HTML. E’ possibile usare la funzione di passaggio ad un punto preciso in HTML anche nello stesso documento. Basta impostare nel documento il segnalibro <A NAME=”Esempio” e poi creare il collegamento ipertestuale nello stesso documento come segue:
<A href=”#Esempio”>

Collegamento attraverso gli URL

Creare un collegamento ipertestuale attraverso gli URL è molto semplice. E’ sufficiente copiare l’URL completo nel punto che identifica l’obiettivo a cui passare a destra del segno = nel tag àncora. Un esempio è:
<A href=”http://omniablog.wordpress.com”>|Omnia Blog|</A>
dove http://omniablog.wordpress.com è l’obiettivo, mentre |Omnia Blog| è la frase che comparirà evidenziata e dalla pagina che la contiene si potrà passare direttamente alla home di |Omnia Blog|.

Segue un video tutorial che illustra l’uso dei collegamenti ipertestuali a parti specifiche in un documento e attraverso gli URL:

Per scaricare il video e vederlo con una risoluzione migliore clikkate qui.

HTML, Capitolo 3: Collegamenti ipertestuali in locale

In questo capitolo verrà spiegato come usare tag e URL per creare collegamenti ipertestuali (hyperlink) a documenti locali e remoti e servizi in Web. I collegamenti ipertestuali sono la base della navigazione in Web, e sono le frasi e parole evidenziate e colorate visibili sui documenti Web. Quando si clikka, si passa ad altri documenti presenti sul server locale Web o a documenti o servizi presenti in altri punti su Internet.

I collegamenti ipertestuali sono basati sul tag àncora di HTML. Normalmente la sintassi è: <A COMANDO=”obiettivo”>Testo evidenziato</A>
Nella parte sinistra, COMANDO deve essere sostituito da HREF o NAME. HREF indica collegamento ipertestuale, mentre NAME indica un segnalibro presente nel documento. Il comando HREF indica che il testo a destra del segno = è l’obiettivo di un collegamento ipertestuale. La seconda parte è “Testo evidenziato”: perchè si possa selezionare un collegamento ipertestuale in un documento Web, occorre individuare il testo che attiva con il collegamento ipertestuale, quindi bisogna inserire la parola o la frase che deve apparire evidenziata nel documento. La chiusura </A> rappresenta la fine del tag àncora.
Esempio: <A href=http://omniablog.wordpress.com>|Omnia Blog|</A>

Collegamento a documenti locali

Il più semplice collegamento ipertestuale è quello che punta ad un altro documento presente sullo stesso computer. Se per esempio due documenti HTML chiamati doc1.htm e doc2.htm sono nella stessa direcoty, per permettere all’utente di passare dal primo al secondo documento, occorre aggiungere un tag àancora al doc1.htm, come segue:
<href=”doc2.htm”>Testo evidenziato che deve apparire</A>
Segue un breve video che illustra l’uso dei tag àancora per i collegamenti a documenti locali.

Per scaricare il video e vederlo con una risoluzione migliore clikkate qui.

Uso degli URL nei documenti HTML

L’URL, Uniform Resource Locator, è la chiave per la localizzazione e l’interpretazione delle informazioni su Internet. Gli URL costituiscono un modo standard per descrivere sia la posizione di una risorsa Web, sia il suo contenuto. Per creare documenti HTML che contengono collegamenti ipertestuali, occorre comprendere i fondamenti degli URL. Il linguaggio HTML usa questa sintassi standard per esprimere un URL: servicename://internethost:portnumber/resource
Service name è seguito dai due punti e da due barre;
Internet hostname è il nome del computer che ospita il servizio;
portnumber è opzionale, seguito da una sola barra;
resource è normalmente un documento o un file sul computer, ma possono esistere altri tipi di risorse.
Un esempio di URL che indica le sezioni richieste è: http://omniablog.wordpress.com/about/

Per prima cosa bisogna saper identificare il nome del servizio da includere nel proprio URL:

• Quello più comune è il servizio http, Hyper Text Transfer Protocol, la modalità di comunicazione tra i clienti e il server web. Dunque l’URL http rappresenta un documento disponibile da un server Web.
• L’URL FTP presenta il protocollo di trasferimento di Internet. Un esempio di URL ftp è: ftp://gatekeeper.dec.com/pub/ Questo esempio non specifica il nome di un file, ma quello di una directory (pub/). Un URL ftp può specificare anche i nomi di file. L’URL dell’esempio è un archivio di software gratuiti, forniti dalla DIGITAL EQUIPMENT CORPORATION per clienti e altri utenti ed è disponibile gratuitamente.
• L’URL Telnet permette di collegarsi remotamente in un sistema e utilizzare il video locale e la tastiera come un terminale. Un esempio di URL telnet è: telnet://mail.tin.it:25 Questo URL presenta la specificazione di un portnumber, la porta a cui connettersi per usufruire del servizio.
• L’URL Gopher rappresenta il servizio gopher di Internet, un servizio di informazione esclusivamente di testo. Un esempio è: gopher://gopher.well.sf.ca.us/
• L’URL News rappresenta il servizio di news (messaggi pubblici) UseNet, o NetNews, che è un sistema BBS ampiamente distribuito, organizzato in migliaia di aree divise per materia. (Per sistema BBS, Bulletin Board System, si intende un sistema telematico, amatoriale, che costituisce una sorta di bacheca elettronica. Un esempio di URL News è: news:comp.infosystem.www.providers
• L’URL Wais, Wide Area Information Server protocol, prevedono datebase indicizzati da interrogare in remoto con l’uso di parole chiave. Un esempio di URL Wais è: wais://info.curtin.edu.au.210/k-12-software
• L’URL Posta rappresenta il servizio Internet di posta elettronica. L’URL mailto è supportato dalla maggior parte dei browser. Inserendo un URL mailto nei documenti HTML, si permette a che legge una pagina, di inviare posta elettronica semplicemente cliccando su un collegamento ipertestuale. Un esempio di URL Posta è: mailto:webmaster@www.esempio.com
• L’URL File rappresenta un file posizionato sul proprio computer. Un esempio è: file://Documenti/html/doc.html

HTML, Capitolo 2: Tag per titoli, font, stili e paragrafi

CREAZIONE DEI TITOLI

Con l’uso dei tag per i titoli, si possono creare titoli di varie dimensioni nei documenti HTML. HTML prevede 6 livelli di titoli, a cui corrispondono i tad da <H1> a <H6>. Un titolo molto semplice (presente anche nel video tutorial del Capitolo 1) potrebbe essere:
<H1> Questo è un titolo di livello 1 </H1>

Il testo del titolo va racchiuso tra i tag di inizio e fine titolo. Per le dimensioni inferiori si usano i numeri più alti. Quando un browser localizza il tag di un titolo, va a capo automaticamente, e il testo di un titolo può occupare più righe, sarà poi il browser a gestire le interruzioni di riga. Ecco una immagine per osservare le dimensioni dei titoli da <H1> a <H6> (cliccate sull’immagine per ingrandirla)

STILI DEI TESTI E FORMATTAZIONE CARATTERI

Nella formattazione del testo di un documento HTML possiamo stabilire i vari stili e formati, come neretto e corsivo. Vi propongo un elenco con i comandi HTML di formattazione logica e fisica. Si possono usare i codici logici in tutti i casi, ma è utile conoscere anche i codici fisici perchè i programmi di conversione dei documenti spesso li usano quando convertono in HTML un documento in formato diverso (per esempio rtftohtml - Rich Text to HTML).

Stile	Tag logico	Tag fisico
Grassetto	<STRONG>	<B>
Corsivo	<EM>	<IT>
Spaziatura fissa	<CODE>	<TT>
Inserimento da tastiera	<KBD>	<TT>
Citazione	<CITE>	non applicabile

Ovviamente tutti i codici richiedono simboli di chiusura alla fine del testo a cui si applicano. (Es. <STRONG> vuole </STRONG> ecc)

FORMATTAZIONE DEI PARAGRAFI

Per creare i paragrafi in HTML occorre includere nel documento HTML i tag che specificano esattamente dove inizino i paragrafi. Il tag di paragrafo HTML è <P> e va posto all’inizio di un nuovo paragrafo, se non vi è qualche altra interrruzione di riga. Questo tag dice ai browser di lasciare una riga vuota tra il testo ed il testo che forma il paragrafo. Più tag <P> consecutivi vengono ignorati, quindi non è possibile utilizzarli per aggiungere ulteriori righe vuote. Ecco un frammento di documento HTML che illustra l’uso del tag di paragrafo:

<HTML>
<HEAD>
<TITLE>formare paragrafi</TITLE>
</HEAD>
<BODY>
qui c’è del testo.
<P>
Qui c’è un nuovo paragrafo
</P>
</BODY>
</HTML>

INTERRUZIONI DI RIGA

Il tag di paragrafo inserisce una riga vuota nel documento visualizzato. E’ possibile comunque inserire una interruzione di riga senza lasciarne una vuota. Il tag <BR> serve proprio a questo. Il video che segue illustra l’uso di questo tag e la differenza tra esso e il tag <P>.

Per scaricare il video e vederlo in una risoluzione migliore clikkare qui

Nella pagina web creata nel video, possiamo notare che si vede una riga vuota prima di Mario Rossi e semplici interruzioni di riga (senza righe vuote) tra le righe dell’indirizzo. Il nuovo paragrafo (con la riga vuota) inizia dopo l’indirizzo.

HTML, Capitolo 1: Iniziare

Questo capitolo spiega alcune nozioni fondamentali relative ad HTML, comprese òa creazione e la visualizzazione dei documenti.

La maggior parte dei documenti di videoscrittura presenta un formato speciale che contiene caratteri nascosti, usati per ottenere particolari formati, come la sottolineatura, il neretto o il ritorno a capo automatico. Il word processor legge questi caratteri speciali e mostra il documento nel modo corretto. Invece i documenti HTML contengono solo caratteri, oltre a speciali codici inseriti direttamente nel testo. Questo significa che i file HTML non contengono altro che lettere, numeri, segni di punteggiatura più i codici HTML. Ciò che distingue un file HTML da qualsiasi altro file di scrittura è la presenza di codici di formattazione, che vengono inseriti nel documento e controllano la formattazione e il layout del documento finito. Tali codici sono anch’essi all’interno del testo, delimitati da indicatori speciali che li separano dal vero e proprio testo del documento. Ora vi propongo un video tutorial che illusta come si crea una seplice pagine formato HTML e successivamente analizzeremo le varie caratteristiche.

Per scaricare il video e vederlo con una risoluzione migliore clikkare qui

Prendendo in considerazione il documento sorgente del video, cioè il documento originale HTML, che contiene i vari codici di formattazione, in primo luogo si nota una gran quantità di codici di diverso tipo, racchiusi dalle parentese angolari, minore (&lt e maggiore (>). HTML utilizza questi simboli per indicare l’inizio (&lt e la fine (&gt delle istruzioni di formattazione. Ogni codice di formattazione contiene una coppia di parentesi angolari e ad ogni parentesu angolare aperta ne deve corrispondere una chiusa. Il codice che indica l’inizio di una particolare formattazione deve iniziare sempre con un’etichetta del tipo <codice> e si conclude con un’etichetta del tipo </codice>, che indica la fine dell’istruzione. Si noti che i codici di fine formattazione cominciano con la barra slash (/).

Ogni documento HTML deve cominciare e finire con tag <HTML>, che indica il formato HTML del documento. Il tag di apertura <HTML> è la prima etichetta che deve apparire nel documento ed il tag di chiusura </HTML> è l’ultima, e questi due tag devono comparire sempre. Tutti i documenti HTML sono divisi in due parti, intestazione e corpo, ossia devono avere sia una sezione <HEAD> che una sezione <BODY>. Come vediamo nel video tutorial, il documento è racchiuso dai tag <HTML> all’inizio e alla fine, poi è diviso in due parti, contrassegnate con i comandi<HEAD> e <BODY> di inizio e di fine, i quali compaiono all’interno di una sezione identificata dai comandi <HTML>.

Un altro tag richiesto da HTML è il tag <TITLE>. Navigando sul web possiamo notare che il browser mostra sempre un titolo per ogni documento che carica. Questo titolo visualizzato deriva dal contenuto del tag <TITLE> nel documento sorgente HTML. Il tag <TITLE> appare sempre all’interno della sezione di testa <HEAD> del documento HTML, ed è anch’esso sempre in coppia, identificando il racchiuso dalla coppia come il titolo del documento. Il documento creato con questi tag, come quello del video, è molto semplice, ma si tratta comunque di un documento HTML completo e funzionante.

Una volta concluso di scrivere il documento sorgente, per visualizzare la pagina sul browser è necessario salvare il file con estensione .html. In questo modo si creerà un nuovo file che si aprirà col vostro browser visualizzando la pagina HTML creata.

In questo post abbiamo analizzato le caratteristiche base del linguaggio HTML, nel prossimo articolo tratteremo la creazione dei tag per titoli, i font, lo stile e i paragrafi.

Programmazione

Con l’avvento del nuovo anno si aggiunge una nuova ed interessante categoria su |omnia blog|, “Programmazione”, dove si cercherà di trattare i vari linguaggi informatici con post il più chiari possibili ed illustrativi. I vari argomenti di ogni linguaggio verrano divisi in capitoli per poter rendere più semplice e schematizzato l’apprendimento.

Il primo linguaggi trattato sarà HTML, un sottoinsieme di un più vasto linguaggio SGML che viene usato per la composizione tramite computer di documenti complessi, come libri o altre pubblicazioni che richiedono un preciso controllo della formattazione e della disposizione degli elementi. A differenza di SGML, il linguaggio HTML che andremo a trattare è molto più semplice, progettato per l’uso nei browser Web, che non sono così precisi.

Inizieremo con l’HTML ma in seguito verranno trattati altri linguaggi come C, C++,Visual Basic, Asp.