Altri TAG di formattazione del testo

Linee orizzontali

Il risultato del tag precedente è nella linea sottostante:

• ALIGN allinea a sinistra (left), centro (center) e destra (right)
• COLOR decide il colore della linea (solo con Internet Explorer)
• WIDTH decide la largezza della linea in percentuale dell'elemento che contiene il TAG o in pixel;
• SIZE decide lo spessore in pixel della linea
• l'attributo NOSHADE è binario: se è specificato la linea è 2D, altrimenti 3D

Citazioni

Ciò che ne risulta è una indentazione automatica (nei primi browser, ad esempio l'NCSA Mosaic, il testo veniva reso anche in grassetto. Mosaic è stato il primo browser per ipertesti). Come vedete, per leggere questa riga dovete andare per forza a destra con la barra di scorrimento.

L'"a capo" può essere disabilitato usando il tag di <NOBR>. Ricordatevi di chiudere questo tag (se lo usate) o il browser non aggiungerà più a capo automaticamente!

Testo in più colonne

Si può rendere un testo in più colonne (come nei giornali) utilizzando il tag <MULTICOL>.

La sintassi per il multicolonna è:

Il testo seguente viene visualizzato in due colonne con interspazio (gutter) 20 pixel e larghezza 80%: BIDJAN, Ivory Coast, Oct. 25 As columns of black smoke rose all across this city, tens of thousands of people poured into chaotic streets today and converged on the center of Abidjan, overthrowing the military ruler, Gen. Robert Gueï, one day after he declared himself the winner of a disputed presidential election. The whereabouts of General Gueï, who seized power last year in a Christmas Eve coup in one of the few African countries never to have experienced military rule, are unclear. Soldiers and the security forces who turned against the general today did not find him in the presidential palace here. With the popular revolt, a fierce political battle now looms. The general's main opponent in the election held on Sunday, Laurent Gbagbo, declared himself president today, and on the state television tonight, the army chief of staff, Gen. Soumaila Diabakaté, said the armed forces were now behind Mr. Gbagbo. But at least one of the main political parties said it would not recognize the results and called for a new election. The balloting on Sunday, which many Ivoirians and Western governments considered deeply flawed, excluded major party candidates and was boycotted by large portions of the population. Nevertheless, a disastrous 10- month-long period of military dictatorship in this former French colony appears to have reached its end, raising the possibility that the Ivory Coast may reassume its traditional role as a regional economic and political anchor. Today, in what quickly became one of the few times that a popular uprising in support of a democratic process had dislodged a dictator in Africa, ordinary residents of this West African nation pushed through military barricades erected around the city center and the site of the presidential palace. The protesters, many of them marching in flip-flops, were unarmed. Many painted their faces white and wore twigs with leaves around their foreheads in the belief that it would keep them safe from harm. Soldiers loyal to General Gueï (pronounced gay) fired into the air, and then into the surging crowds. But other soldiers stood by with their arms crossed in front of a military barrack. Eventually, the paramilitary gendarmes joined the civilians in opposing the military government, and most soldiers could be seen siding with protesters or remaining neutral. Mr. Gbagbo's party said 60 people had been killed in violence since Tuesday...

Da parte sua Microsoft pecca di egoismo introducendo un'effetto molto carino, quello del testo scorrevole:

Per Contro, la Netscape introduce un attributo del testo (un tag tipo <b> o <em>) che rende il testo lampeggiante (usando il tag <BLINK>):

Le tabelle

Le tabella sono una delle più utili novità presenti nell'HTML 3. Permettono di riassumere dati come semplici tabelle e possono essere usate anche come sommari o mappe (quella presente all'inizio di questo documento).

Per creare una tabella utilizzare il contrassegno <TABLE>... </TABLE> al cui interno definirete i dati. Vediamo un esempio:

La sintassi per creare una semplice tabella come questa è:

Abbiamo così definito una tabella con bordo (3) con degli Header (TH) e dei dati (TD), organizzata su due colonne (il tag TR permette di decidere quando andare a capo). I dati sono centrati nelle colonne (ALIGN=center).

È inoltre possibile scegliere la larghezza della table (nella dichiarazione TABLE aggiungere WIDTH= seguito dalla misura in percentuale dell'elemento genitore o in pixel),
il Cell padding, cioé la distanza fra testo e bordo delle celle, (aggiungendo CELLPADDING =);
il Cell spacing, lo spessore dei divisori delle caselle, (aggiungendo CELLSPACING =); per i dati possiamo decidere l'allineamento orizzontale e verticale (ALIGN e VALIGN) il colspan ed il rowspan, cioé se la cella deve essere larga più di una cella standard (COLSPAN e ROWSPAN); inoltre se non vogliamo che i dati vengano disposti su più righe aggiungiamo NOWRAP; per modificare il colore della tabella si utilizza BGCOLOR (con i valori esadecimali come al solito).

Una nota su BORDER, CELLSPACING, CELLPADDING

• La larghezza del bordo scuro è determinata dal valore dell'attributo BORDER
• La distanza tra il bordo e la prima linea sottile è determinata da valore dell'attributo CELLSPACING
• La distanza tra la riga sottile ed il testo è determinata dal valore dell'attributo CEALLPADDING

Testo aggiuntivo a margine della tabella

Per gli header possiamo scegliere l'ALIGN il COLSPAN ed il ROWSPAN. Vediamo un esempio più complesso:

Questa tabella è stata creata così:

I valori di default per CELLSPACING, CELLPADDING, COLSPAN e ROWSPAN son uguali ad 1; quello di WIDTH è ugale a 80%; BORDER è 0; l'ALIGN dell'Header è center; l'ALIGN dei dati left e il VALIGN è middle.

E' possibile agire con tutti questi comandi su ogni singola cella della tabella inserendo i vari flag (ALIGN, WIDTH, BGCOLOR....) nel tag <TD> invece che direttamente nel <TABLE>, ottenendo cosiì una varietà di effetti molto ampia.

E' possibile aggiungere un titolo alla tabella utilizzando il tag <CAPTION> (chiusura obbligatoria).

Ci si sarà già accorti che alcuni tag possono essere solo opzionalmente chiusi, ad esempio <P> può anche non essere chiuso, o anche <TR>; tuttavia alcuni vecchi navigatori, più ligi alla sintassi di HTML, in mancanza dei tag di chiusura potrebbero visualizzare il contenuto in modo errato.

Inclusione di immagini

La maggior parte dei browser presenti supportano le immagini in formato GIF e JPEG è possibile quindi migliorare le proprie pagine inserendo della grafica, il tag di base per inserire un file grafico è questo

Con lo svilupparsi dell'HTML anche il tag IMG si è evoluto arricchendosi di flags che permetto un ampio controllo sull'immagine inserita, il tag completo risulta

i vari flags (oltre al già citato IMG SRC) definiscono i seguenti attributi:

• LOW SRC un file grafico alternativo in bassa risoluzione che verrà caricato prima dell'immagine vera e propria;
• HEIGHT e WIDTH le dimensioni in pixel se si desidera riscalare il file;
• ALT il nome alternativo che verrà visualizzato dai browser non grafici;
• ALIGN l'allinamento dell'immagine rispetto al testo che la circonda (RIGHT,
• LEFT, ABSBOTTOM, ABSMIDDLE, TEXTTOP, MIDDLE, BOTTOM);
• ISMAP nel caso che l'immagine sia linkata ad un file di mappa che rende l'immagine cliccabile;
• USEMAP il nome della mappa nel caso che si utilizzi una mappa client-side (direttamente inserita nell'HTML);
• VSPACE la distanza verticale dal testo (espressa in pixels);
• HSPACE la distanza orizzontale dal testo (in pixels);
• BORDER la dimensione del bordo dell'immagine (sempre in pixels).

GIF e JPEG

La scelta fra i formati grafici non è molto ampia, dobbiamo perciò valutare i pro ed i contro dei due formati a disposizione.
Il formato JPEG è molto compresso ed i file risultano più piccoli (a favore della maggiore velocità di caricamento e minore ingombro sul nostro web), ma la compressione JPEG è di tipo distruttivo, questo significa che la qualità delle immagini JPEG risulta inferiore rispetto alle GIF; le immagini in formato GIF hanno inoltre (nel nuovo formato 89a) due caratteristiche molto importanti per il web, la progressione del caricamento e la trasparenza. La progressione del caricamento fa si che l'immagini si carichi dapprima in bassa risoluzione ed acquisti definizione man mano che si carica (le JPG al contrario caricano direttamente la loro versione completa dell'immagine), questo permette di avere velocemente un preview dell'immagine che visualizzeremo e quindi decidere se bloccarne il caricamento; la trasparenza permette a certe zone dell'immagine (definite durante la sua creazione) di risultare trasparenti sullo sfondo della pagina, con meno disturbo ed un effetto migliore.

Colori standard

Copyright @ 2000-2017 Marco Barbato htttp://www.betaingegneria.it

Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale.