Post

Archivio della categoria 'HTML'

CSS - metodo di debug

Capita spesso che il CSS (e l’HTML!) che scriviamo non faccia quello che vogliamo. Cosa fare per risolvere la cosa? Beh, “fare delle prove” in genere funziona, ma qualche volta ci fa perdere un sacco di tempo. Ecco quindi un metodo “comprovato” per risparmiare tempo e soprattutto incavolature ;)

  1. Cosa voglio fare? Chiariamoci. Spesso pensare razionalmente a cosa vogliamo fare ci fa “scattare la scintilla” ;)
  2. Quali sono gli elementi HTML che sono coinvolti?
    1. Identificarli attraverso la Web Developer Toolbar
  3. Gli elementi HTML coinvolti sono scritti correttamente nel codice HTML?
    1. Quali sono i selettori CSS che devo usare per richiamarli?
    2. C’è qualche errore di scrittura?
    3. Validare il codice HTML
  4. La proprietà CSS che ho impostato non funziona come credevo. Cosa credevo? O meglio, cosa mi aspetto che faccia la proprietà CSS che ho impostato?
    1. Controllare sullo standard se ho ragione
    2. Validare il CSS
  5. Se ancora non funziona come vorrei, forse è coinvolta qualche altra proprietà
    1. Controllare con la developer toolbar quali proprietà CSS ho
    2. Controllare se ci sono altri selettori che mi influiscono
    3. Controllare se l’elemento eredita qualche proprietà che non avevo considerato
    4. Accentuare l’effetto della proprietà per capire se viene visualizzata (es. aumentare a dismisura i bordi)
    5. Controllare se gli elementi vicini (genitori, figli, vicini) hanno qualche proprietà che può influire
    6. Modificare altre proprietà che possano avere una qualche influenza, e per ognuna di queste modifiche ricominciare da 1 :)

CSS: pulsanti in rilievo

Per fare un pulsante “in rilievo” si può usare questo codice CSS:

a {
display: block;
width: 200px;
color: #ffcc66;
padding: 5px;
text-align: center;
background-color: #18326d;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom: 3px solid #000;
border-right: 3px solid #000;
border-left: 3px solid #fff;
border-top: 3px solid #fff;
}

Esempio:

Bottone

Purtroppo lo “stondamento” del bordo funziona solo su Firefox, ma l’effetto rilievo vale lo stesso :)

HTML: le favicon

Le favicon sono quelle icone che appaiono accanto all’URL del sito sul browser, come icona dei preferiti in Explorer o nelle schede di Firefox e Safari.

Si tratta semplicemente di immagini con un massimo di 16×16 pixel salvate in formato .ico di Windows. Questo formato permette di includere in un singolo file più versioni della stessa immagine; se insieme all’immagine 16×16 se ne fornisce una 32×32, quest’ultima potrà essere usata come icona per il desktop. Gimp (http://www.gimp.org) , il più completo programma di elaborazione di immagino libero, permette di salvare in formato .ico, e può quindi essere usato per creare le favicon.

Per poter usare la favicon all’interno di una pagina Web è sufficiente chiamare i file favicon.ico e metterlo nella directory principale del sito. Se si vogliono usare icone diverse per diverse parti del sito, si può richiamare il nome dell’icona nell’<head> del documento, con questo codice:

<link rel="shortcut icon" href="http://www.sito.it/percorso/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://www.sito.it/percorso/favicon.ico" type="image/x-icon" />

Il tag del giorno: <img>

Nel codice HTML è possibile inserire dei collegamenti a file esterni che contengano delle immagini. Per farlo si usa il tag <img />, che visualizza un’immagine all’interno del flusso degli elementi.

La sintassi minimale del tag <img /> è:

<img src="URL" alt="testo alternativo" />

URL è l’indirizzo del file dell’immagine, mentre il testo alternativo descrive il contenuto dell’immagine per i browser che non possono visualizzarla. Attenzione, l’indicazione di un attributo alt è obbligatoria, ma non lo è il suo contenuto! Anzi, se l’immagine è puramente di abbellimento (es. una riga divisoria, …) non si dovrebbe inserire un testo nell’attributo, per non confondere chi legge la pagina con un browser non visuale.

Le immagini dovrebbero essere in uno dei tre formati compatibili con il web: GIF, JPEG e PNG, e per i file dovrebbero essere usate le estensioni corrette .gif, .jpg o .jpeg e .png, in minuscolo, per essere sicuri che il server web invii il Content-type corretto (image/gif, image/jpeg e image/png).

Di default, le immagini vengono visualizzate come elementi inline e quindi non introducono spazi o interruzioni di linea. L’immagine viene allineata con la sua linea di fondo alla linea di base del testo, ma l’allineamento può essere modificato usando i fogli di stile. Esistono molti attributi del tag <img /> (align, border, hspace, vspace) che venivano usati per modificarne l’aspetto, ma che sono deprecati.

Non sono invece deprecati gli attributi width e height: indicarli velocizza la visualizzazione della pagina. E’ sempre preferito, però, usare i corrispondenti attributi CSS. Se si utilizzano dei valori di larghezza ed altezza diversi da quelli originali dell’immagine, è il browser che si occupa di ridimensionarla per farla entrare nelle dimensioni indicate. Questo però porta a una diminuzione della qualità dell’immagine, e dovrebbe essere evitato.

Il tag del giorno: <link>

Nella head del documento HTML si può impostare il tag <link> per collegare un altro documento al corrente. Non si tratta di un collegamento ipertestuale cliccabile, ma di una relazione tra i due.

L’uso più normale del tag <link> è per impostare un foglio di stile esterno:

<link href="style.css" rel="stylesheet" type="text/css"/>

Ma l’attributo rel può essere usato per altre tipologie di relazione, utili per collegare più documenti insieme, ad esempio per l’uso da parte dei motori di ricerca o di script per formattare per la stampa documenti complessi:

  • alternate si usa per indicare versioni sostitutive del documento corrente, ad esempio in un’altra lingua se usato insieme all’attributo hreflang
  • start indica il primo documento di una serie
  • next indica il successivo documento di una serie
  • prev indica il documento precedente in una serie
  • contents si riferisce ad un documento che contiene l’indice dei contenuti
  • index si riferisce ad un documento che contiene l’indice analitico dei contenuti
  • glossary indica un glossario
  • copyright indica il copyright
  • chapter indica un capitolo di una serie di documenti
  • section indica una sezione di una serie di documenti
  • subsection indica una sottosezione di una serie di documenti
  • appendix indica un’appendice di una serie di documenti
  • help indica un documento che contiene delle informazioni di aiuto
  • bookmark indica un punto di accesso privilegiato interno ad un documento esteso. Per indicare il bookmark si può usare l’attributo title.

Aprire un link in un’altra pagina

Cliccando su un link, normalmente la pagina di destinazione si apre nella stessa finestra in cui ci si trova, oppure l’utente può scegliere di aprire la pagina in una nuova finestra o in una nuova scheda.

Usando l’HTML si può indicare che il link deve essere aperto in una finestra diversa: lo si fa usando l’attributo target del tag <a>.

Per aprire il link nella stessa finestra (default): target=”_self”

Per aprire il link in una nuova finestra: target=”_blank”

Se si stanno usando i frame e si vuole aprire il link nel frame “padre” del corrente: target=”_parent”

Se si stanno usando i frame e si vuole aprire il link nella finestra che contiene il frame corrente: target=”_top”

Se si inseriscono più link all’interno della stessa finestra, tutti con target=”_blank”, ognuno aprirà una nuova finestra. Se invece vogliamo che tutti i link vengano aperti non nella finestra corrente, ma in una nuova finestra comune a tutti, si può assegnare un nome alla nuova finestra da usare, con target=”nome”, e usare sempre la stessa.

Questo è anche il significato di target=”_new”, una sintassi errata dato che _new non è una delle denominazioni riservate che iniziano per underscore, ma viene interpretata come il nome della finestra.

Gestire dei link interni ad un documento

In HTML si possono gestire link non solo a pagine intere (che aprono l’inizio di una pagina), ma anche link a specifiche posizioni all’interno della pagina stessa. Ad esempio, questa possibilità può essere utile per creare un indice iniziale per una pagina molto lunga.

Creare un link ad una specifica posizione in una pagina consiste di due passaggi:

  • dare un nome alla posizione a cui si vuole puntare
  • creare il link

Per dare un nome ad una specifica posizione si può inserire un elemento <a> con l’attributo name (invece di href) oppure si può usare l’attributo id di qualsiasi elemento; in questo modo si assegna un nome ad un elemento specifico che può essere usato per il link.

In XHTML è necessario usare l’attributo id; questo però purtroppo non è supportato correttamente da tutti i browser; la cosa migliore è quindi usare un elemento <a> con sia l’attributo id che l’attributo name. Ovviamente i due attributi devono avere lo stesso valore, ed essere univoci all’interno della pagina (non ci devono essere altri elementi con lo stesso valore di id o di name). Ad esempio:

<a name="cap1" id="cap1">Capitolo 1</a>

Per creare un link all’interno della stessa pagina, che punti alla posizione voluta, si usa un normale elemento <a> con l’attributo href; il riferimento alla posizione interna della pagina si crea usando un cancelletto (#) seguito dal nome della posizione. Ad esempio,

<a href="#cap1">Vai al Capitolo 1</a>

Se volessimo creare un link che punti ad una specifica posizione ma che provenga da una pagina diversa, è sufficiente indicare il nome della posizione dopo l’indirizzo della pagina:

<a href="libro.html#cap1">Vai al Capitolo 1 del libro</a>

Il tag del giorno: <base>

L’elemento <base> si trova nell’intestazione e serve per impostare una base per gli URL relativi. E’ comodo se si deve ad esempio spostare un intero sito in una sottodirectory di un altro: se prima il sito si trovava in / e poi lo si mette dentro la directory /sito, si può scrivere così:

<base href="http://www.catnic.it/sito">

Attenzione, non solo <base> deve trovarsi nell’intestazione, ma deve anche precedere qualsiasi elemento che contenga un URL relativo.

Il tag del giorno: <a>

Il link <a> identifica un testo o un’immagine da usare come link ipertestuale verso un altro elemento. La sintassi più semplice è:

<a href="destinazione del link“>testo del link</a>

Di default, i browser mostrano il testo del link sottolineato e blu, e le immagini che costituiscono un link con un bordo blu. Questo può essere modificato con i CSS (domani i dettagli!)

La destinazione del link può essere un URL relativo, cioè un puntatore ad una risorsa richiamata a partire dalla posizione del documento corrente, oppure un URL assoluto. Gli URL assoluti vengono identificati dal nome del protocollo da usare, seguito dall’host e poi dal percorso all’interno dell’host.

Es. http://www.catnic.it/new.html

http:// = protocollo usato

www.catnic.it = host

/new.html = percorso all’interno dell’host

Il tag del giorno: <br />

Per andare a capo all’interno di un paragrafo si usa il tag <br />. Questo probabilmente lo sapevate già… ma forse non sapevate che <br /> con l’attributo clear può essere usato per indicare dove debba apparire il testo che segue un elemento float. Ad esempio, se un’immagine è float a sinistra, <br clear="left" /> fa iniziare il testo sotto l’immagine, cioè viene interrotto il flusso del testo relativamente agli elementi flottanti a sinistra. Ovviamente, clear="right" fa la stessa cosa per gli elementi flottanti a destra, e clear="all" vale sia per quelli a destra che per quelli a sinistra.

« Voci precedenti

Archivi e link