|
![]() |
|
![]() |
||
![]() |
Per quanto interessanti ed utili possano essere le informazioni che hai intenzione di inserire in un sito Internet saranno sempre in molti a tenersene alla larga se queste informazioni non sono accessibili in modo razionale.
<HTML> La casa in cui vivo con la mia famiglia è piccola ma accogliente, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti. Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita. L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali. L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.
A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa... Visualizza questo testo per renderti conto di come il browser (Netscape Navigator, Internet Explorer ecc.) lo interpreti. Per farlo puoi copiare ed incollare il listato all'interno di un elaboratore testi e salvare il tutto con estensione .htm oppure .html.
In alternativa puoi schiacciare il bottone che trovi quì sotto: si aprirà un'altra finestra ed il browser procederà alla lettura del listato di cui sopra
La conclusione è che un documento senza alcuna formattazione del testo come quello appena preso come esempio risulta praticamente illegibile.
All'interno di un documento HTML i titoli vengono creati attraverso i 6 tag H (che sta per HEADER che in italiano significa appunto titolo).
<H1>Titolo di primo livello </H1>
Facendo leggere le istruzioni dal tuo browser otterrai questo risultato: Titolo di primo livelloTitolo di secondo livelloTitolo di terzo livelloTitolo di quarto livelloTitolo di quinto livelloTitolo di sesto livelloSulla base di quanto appena visto listato 3.1 inseriamo un titolo che utilizzando la seguente sintassi: <H1>Ospiti e letti</H1> A questo punto introduciamo il tag <P> (la P sta per paragraph; in italiano, paragrafo) il cui corrispondente tag di chiusura ha la forma usuale </P> Questo tag di chiusura è opzionale per cui può essere omesso. Il browser capirà che un paragrafo è terminato quando incontrerà un nuovo tag di apertura (<P>)
Il tag <P> viene impiegato per segnare l'inizio di un nuovo paragrafo e impiega una spaziatura di riga maggiore di quella normalmente adottata proprio per separare anche visivamente ogni paragrafo da quelo che lo precede.
<P> La casa in cui vivo con la mia famiglia è piccola ma accogliente, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti. Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita.</P> <P> L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali. L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.</P>
<P> A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...
Il tag <P> supporta l'attributo align=allineamento dove al posto di allineamento si può inserire uno dei tre paramentri consentiti e cioè:
Questo attributo è supportato anche dai tag di titolo, per cui, per centrare il titolo di questo racconto scriveremo: <H1 align=center>Ospiti e letti</H1> Supponiamo ora di voler introdurre un'interruzione di riga, per far ciò ricorriamo al tag <BR> (che è l'abbreviazione di break che in in italiano significa interruzione). Sinora tutti i tag incontrati lavoravano in coppia il tag BR è invece un tag solitario, non presenta dunque alcun tag di chiusura. Se nel listato 3.1 vogliamo iniziare una nuova riga dopo ogni punto il listato dovrà essere così modificato:
<P>La casa in cui vivo con la mia famiglia è piccola ma accogliente, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti.<BR>
<P> L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali.<BR>
<P> A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...
Se decidi di intervenire sul modo in cui viene visualizzato il testo (tipo, dimensione e colore) dovrai impiegare la coppia di tag <FONT> e </FONT>. Il tag di apertura dovrà contenere almeno uno dei tre attributi richiesti per produrre l'effetto o gli effetti desiderati. Così, se si intende modificare il tipo di carattere (ad esempio, comic sans ms) scriverai:
Puoi impiegare i tag appena appresi per modificare ancora il listato 3.1, ad esempio alternando il colore del testo per i singoli paragrafi, riproducendo il testo con un font diverso e riducendo o ingrandendo alcune parole. Riscrivo per intero il listato con le ultime modifiche, per vedere come viene letto dal tuo browser copia e incolla il testo in un elaboratore di testi, salva in formato .htm o .html e visualizza il documento con il tuo browser oppure schiaccia il pulsante che trovi in fondo al listato stesso.
<HTML>
<P>
<P>
Vediamo ora i cambiamenti introdotti con l'inserimento di questi tag. Altri tag di formattazione....
Hai appena appreso l'uso del tag <BR>, grazie ad esso puoi spezzare una riga nel punto che hai stabilito...
Se disponi di un browser grafico come Netscape Navigator o Internet Explorer sicuramente stai visualizzando questo testo con un tipo di carattere detto a larghezza variabile, questo perchè alcuni caratteri occuperanno meno spazio di altri (ad esempio una i occuperà meno spazio di una m). Esistono tuttavia anche caratteri cosiddetti a spaziatura fissa che assegnano uno stesso spazio ad ogni carattere. Per riprodurre quest'ultimo tipo di carattere si può ricorrere alla coppia di tag <TT> e </TT> operando nel modo consueto:
Con la coppia di tag <DIV> e </DIV> si può creare un blocco (contenente testo, immagini e qualunque altra serie di elementi che è possibile implementare) di cui è possibile gestire l'allineamento. Difatti il tag <DIV> supporta l'attributo align="allineamento" il cui funzionamento e spiegato più su a proposito del tag <P>
Per enfatizzare alcune parole di un testo hai appreso nella precedente lezione come inserire il grassetto e il corsivo.
<U>testo sottolineato</U>
Impara ad usare questo tag con parsimonia poichè anche i link (collegamenti ad altre risorse), sono generalmente sottolineati, per cui un uso frequente di questo tag potrebbe generare qualche confusione in chi sta visitando la tua pagina. Per barrare un testo userai l'apposita coppia di tag nel modo consueto:
<STRIKE>testo barrato</STRIKE>
Due coppie di tag come <SUB> e </SUB> e poi, <SUP> e </SUP> si rivelano utili per riproporre in una pagina web sigle particolari quali:
Per spezzare un blocco di testo da una immagine o da un altro blocco di testo spesso si ricorre a righe orizzontali che è possibile inserire attraverso questo tag <HR>.
Nella prossima lezione imparerai come inserire una lista in un documento HTML. Buon proseguimento :-) |
|
|
||
![]() |
©1998 di Gabriele Gigliotti |