Qualche trucco con HTML & C.


Vi spiegherò perché questo sito è stato fatto tutto con l'HTML puro: semplicemente perché c'è un maggior controllo degli elementi che costituiscono una pagina.
Una delle cose più evidenti è l'eccesso di codice generato dagli editor WYSIWYG. Mi è capitato di aprire i sorgenti di pagine (questo è un buon modo per capire come funziona l'HTML!) e di vedere come quelli creati dagli editor visuali abbiano un eccesso di codice. In particolare ho notato che c'è un vero e proprio spreco di tag (e di conseguenza di Kbytes) specialmente per quanto riguarda il testo. Se date un'occhiata al sorgente di questa pagina, noterete che il tag <font> (che definisce le proprietà dei caratteri) è usato solo quando ce n'è bisogno, ovvero solo quando bisogna modificare le caratteristiche del font stesso.
Al contrario, alcuni editor ridefiniscono queste caratteristiche ogni volta che si va a capo, anche se non si cambia carattere.
Ora, in una pagina di pochi KBytes, questo significa poco e niente, ma in una pagina come questa, composta da molto testo, le dimensioni salgono, e di parecchio. Anche se i files di testo sono veloci da scaricare credio che sia meglio metterci il minor tempo possibile, ad esempio per ridurre le attese in caso che il collegamento sia lento.
Adesso che vi siete sorbiti questo bella sviolinata sul codice puro, passiamo ai fatti: come modificare l'aspetto delle pagine rivedendo il codice.

Partiamo dalle cose più semplici: se vi è capitato di guardare o scrivere sorgenti HTML, avete notato che l'impaginazione standard è "allineato a sinistra". Tralasciando come si fa a centrare il testo (cosa molto semplice), arriviamo a dire come si può allineare a destra. Ci sono due modi: il primo è quello di usare il tag <p></p> (definisce un paragrafo) in questo modo:

<p align="right"> Il vostro testo </p>

Adesso invece vi mostro un metodo più rapido, nel caso oltre all'inizio paragrafo, voi dobbiate riderfinire anche le dimensioni carattere. Il metodo più evidente sarebbe questo:

<h3><p align="right"> Il vostro testo </p></h3>
Attenzione i tag <h3> e <p> devono essere in questo ordine! Essendo annidati, è sempre l'ultimo tag inserito che conta, quindi scrivendo <p> <h3> l'header (di default allinea a sinistra) scavalca <p> e le sue proprietà!

non è invece molto conosciuta questa variante (più "veloce"):

<h3 align="right"> Il vostro testo </h3>

Ecco qua i risultati dei codici soprastanti:

Definisco il paragrafo e l'header



Io invece allineo attraverso l'header



Io invece sono <p align="right"><h3> ... </h3></p>
(h3 prevale su p e allineo a sinistra!!!)



Sempre parlando di allineamenti di testi e degli altri oggetti, non è possibile (io non conosco il modo di farlo, se qualcuno lo sa me lo dica!!!) di allineare due frasi usando il tag <p>.
Ecco cosa succede ad allineare a sinistra la prima frase e a destra la seconda:

Prima frase

Seconda frase

Visto? Vengono sì messe una a destra e l'altra a sinistra, ma la seconda va a capo prima di allinearsi. Come fare dunque a ottenere l'effetto qui sotto?

Prima frase Seconda frase

Facile. Guardate un po' qui sotto e provate a capire cosa è successo:

Prima frase Seconda frase

Esatto! È una tabella. Semplice no? Basta creare una tabella della larghezza della pagina (occhio se ci sono i frame! In questo caso al posto di specificare la larghezza width in pixel, conviene specificare il valore percentuale, ad esempio 100%), inserire due elementi e allineare il primo a sinistra e il secondo a destra, senza specificare la grandezza del bordo oppure impostandola a zero! Ecco qui sotto il codice che vi permette di farlo:

<table width="550">
<tr>
<td align="left">
<b>Prima frase</b>
</td>
<td align="right">
<b>Seconda frase</b>
</td>
</tr>
</table>
Un altro metodo consiste nel prendere a prestito alcuni attributi dai CSS (i fogli di stile) e applicarli al paragrafo e/o allo header. In particolare usiamo

style="position:absolute; ..."

 e al posto dei puntini di sospensione si usano i termini:

top:num_pixel;
down:num_pixel;
right:num_pixel;
left:num_pixel;

Come avrete capito per assegnare un valore ad un attributo si usano i due punti ":" e per separare i vari attributi si usa il punto e virgola ";" (come in molti linguaggi). State ben attenti però che tali elementi possono essere scritti uno sopra l'altro (l'ulteriore attributo "z-index" definisce su quale livello stanno) e diciamo in parole povere che i rimanenti oggetti della pagina non li "considerano". Per spiegarci meglio, se mettete un testo con l'attributo style="position:absolute;top:10;left:5" e poi scrivete qualcos'altro, quest'ultimo partirà dall'inizio della pagina (in alto a sinistra) come se non sapesse che c'è il testo posizionato con "style"! Clicca qui per vedere un esempio!

Un'ultima cosa sulle spaziature: come avrete notato, l'HTML non considera gli spazi multipli ottenuti tramite la pressione della barra spaziatrice. Provate a farne anche una decina nel sorgente e nella pagina ce ne sarà solo uno!. Come riuscire a "fregare" il browser e a fargli mettere più spazi? Basta scrivere &nbsp; al posto di ogni spazio che volete mettere. Questo forza il browser a mettere uno spazio bianco. Ecco un esempio:

Io     contengo     spazi     multipli!


Un elenco di alcuni speciali caratteri visualzzabili tramite & è qui sotto.
Cosa scrivere nel sorgente Cosa viene visualizzato Perchè farlo
&agrave
&egrave;
&igrave;
&ograve;
&ugrave;
&Agrave;
&Egrave;
&Igrave;
&Ograve;
&Ugrave; 		à
è
ì
ò
ù
À
È
Ì
Ò
Ù 		Sono i caratteri accentati.
Dato che non tutte le tastiere sono uguali questo identifica univocamente i caratteri accentati (elimina possibili errori di visualizzazione delle parole)
&aacute
&eacute
...		 á
é
...		 Sono i caratteri con accento acuto. L'utilizzo è come quello per gli accenti gravi, solo che al posto di 'grave' si usa 'acute'!
&amp & Per lo stesso motivo di cui sopra
&lt;
&gt;		 <
>		 Con l'HTML è l'unico modo di far vedere i caratteri minore e maggiore in successione. Se non vengono scritti così il browser li considera tag e se non corrispondono a nessuna azione non visualizza niente
&nbsp; (spazio bianco) Serve per forzare il browser a fare uno spazio bianco. È l'unico modo di mettere più spazi bianchi in successione

Ce ne sono anche molti altri, ma questi sono quelli che si usano di più.

Adesso invece passiamo a vedere qualche "fronzolo" grafico che si può fare attraverso l'inserimento/modifica delle proprietà di alcuni elementi.

Avete presente la linea orizzontale? Quella che si fa con <hr> ? Beh, sappiate che non è solo come questa
ma possiamo modificarla a nostro piacimento. Come fare? Ma attraverso le parole chiavi "width", "size" e "color" da inserire nel tag; inoltre con l'attributo "title" si può specificare un testo che verrà visualizzato se il mouse ci si ferma sopra (molti tag hanno questo attributo!).
Vediamo più in dettaglio:

<hr width="200">


<hr color="red">


<hr width="250" color="yellow">


<hr width="300" color="blue" size="10">


Inoltre si possono modificare anche i bordi delle tabelle: abbiamo già visto come si allungano e come si può nascondere il bordo, adesso invece il bordo (e non solo) vogliamo modificarlo!
Ecco come trasformare una tabella in una cornice per enfatizzare un titolo:

Il più bel sito del mondo!

Il più bel sito del mondo!

Il più bel sito del mondo!

Il più bel sito del mondo!

Il più bel sito del mondo!

Ecco come si fa a crearli:
  1. Basta specificare gli attributi border="1" e bordercolor="yellow" nel tag <table>.
  2. Rispetto al precedente cambia solo la dimensione del bordo che stavolta è 2.
  3. Queste sono due tabelle annidate. Le potete creare mettendo all'interno del tag <td> della prima, un'altra tabella con attributi differenti. Questa in particolare è stata fatta con questo codice:

    <table border="1" bordercolor="lime">
    <tr><td>
    <table border="1" bordercolor="yellow">
    <tr>
    <td><font face="comic sans MS" color="white"><h2> Il più bel sito del mondo!</h2></td>
    </tr>
    </table></tr></td></table>
  4. Nel quarto esempio invece si sono usati gli attributi bgcolor="cyan" e bordercolor="blue"
  5. L'ultimo invece utilizza un attributo tipico dei css (fogli di stile). Infatti l'unica cosa diversa da inserire nel tag <table> è style="border:5px solid coral" .
    Tramite questo attributo si dice al browser di disegnare un bordo di 5 pixel (la dimensione e il colore sono a piacere), solido, di colore corallo. Per l'interno si è utilizzato il marrone.
Inoltre, come avrete visto, si può fare in modo che se il mouse viene fermato sulla tabella, venga fuori una scritta simile agli alternate text delle immagini. Come fare? Ma sempre con il solito attributo "title" (che molti oggetti hanno), questa volta da mettere dentro il tag <td>.

Detto questo si può passare ad un ulteriore tocco di stile (in tutti i sensi) rendendo le tabelle un po' più anticonformiste.
Sempre usando attributi dei css (date un occhiata alla pagina sui css per maggiori infos) possiamo cambiare lo stile delle nostre tabelle. Ecco alcuni esempi:

Tabella con bordo doppio

In questo caso non si tratta di definire un bordo per <table> e uno per <td> di uguale dimensione e colore, ma solo di sostituire nel tag <table> l'attributo solid con double, in style, come nel codice seguente:
<table style="border:5px double cyan">
<td>
Tabella con bordo doppio
</td>
</table>

Tabella con bordo ombreggiato

Tabella con ombreggiatura. Solito codice, è stato cambiato solo l'attributo che indica il tipo di bordo:
<table style="border:5px groove cyan">
<td>
Tabella con bordo ombreggiato
</td>
</table>

Tabella con bordo ombreggiato 2

Tabella con ombreggiatura un po' più soft. L'attributo che indica il tipo di bordo è questa volta ridge:
<table style="border:5px ridge cyan">
<td>
Tabella con bordo ombreggiato 2
</td>
</table>

Effetto pulsante premuto

Questa volta l'attributo è "inset":
<table style="border:5px inset cyan">
<td>
Effetto pulsante premuto
</td>
</table>

Effetto pulsante rilasciato

Adesso ho usato "outset":
<table style="border:5px outset cyan">
<td>
Effetto pulsante rilasciato
</td>
</table>

 Questi ultimi due tipi di bordi lasciano una porta aperta verso la creazione di pseudo-pulsanti con l'aiuto di un filo di javascript...

Prova a premermi!

Datemi retta, non è affatto difficile! Ecco come fare:
<table onmousedown="this.style.border='5px inset blue'" onmouseup="this.style.border='5px outset blue'" style="border:5px outset blue" onmouseover="this.style.cursor='hand'">
<td>
<a href="javascript:alert('Magia? No, solo un po\' di javascript!');">
Prova a premermi!</a> </td>
</table>
 Adesso vi spiego quello che è successo:
Nel tag <table> è bastato specificare i comportamenti al passaggio e alla pressione/rilascio del mouse.
Dentro onmousedown ho specificato quello che succede quando il mouse viene cliccato, ovvero che il bordo della tabella diventi un inset ("this" si riferisce alla tabella stessa, "style" all'attributo omonimo, "border" come il precedente e la stringa successiva all'uguale indica le proprietà dell'elemento this.style.border che in questo caso è un "5px inset blue").
Lo stesso vale per onmouseup con la sola accortezza di far diventare il bordo un "outset".
onmouseover invece specifica che il cursore del mouse (al passaggio sulla tabella-bottone) debba prendere la forma della mano hand.

Ecco invece un altro tipo di bordo:

Bordi "Incasinati"

No, non vi è impazzito (ancora :-D) il browser, è un altro trucco che si può fare gestendo in maniera separata i vari bordi della tabella. Infatti tramite:
border-top
border-bottom
border-left
border-right
 si possono definire stili diversi per ogni lato del bordo della tabella. Per questa è bastato fare un mix dei vari bordi visti in precedenza.
Ecco il codice necessario:
<table style="border-top:5px solid blue;border-bottom:5px double green;border-left:5px inset gold;border-right:7px groove white">
<:td><h3>
Bordi "Incasinati"
</td></table>
E non dovete scordarvi che i bordi li hanno anche gli elementi interni delle tabelle (e come scoprirete se guardate la pagina sui css) anche gli oggetti creati con i css!



Per questa volta è tutto, a presto un nuovo aggiornamento!

<-Indietro