Fabio Donatantonio
Html/Css

Html: le immagini

realizzato da , il 28 mag. 2011, categoria Html/Css

Html/Css

Fino ad ora si è concentrata l’attenzione alla formattazione del testo, quindi paragrafi, titoli e contenitori di testo, consapevoli che il moderno web non mette a disposizione solo questo tipo di informazioni.
Siamo lontani dai siti web dei primissimi anni ’90, quando le pagine erano composte totalmente da testo, oggi è impensabile non visualizzare in una pagina web un’immagine, un video o qualche altro elemento grafico.
Per inserire un’immagine in una pagina html si utilizza il tag <img>. La sintassi per inserire un’ipotetica immagine è:

<img src=‘immagini/foto.jpg’ />

Il tag <img> si compone essenzialmente di un attributo obbligatorio src, che indica l’url dell’immagine da visualizzare.
In fase di visualizzazione quando il browser incontra il tag img, analizza l’url associato e carica l’immagine, ponendola all’interno della pagina dove questa è stata definita dallo sviluppatore.
Il seguente codice HTML descrive in maniera completa l’inserimento di un immagine in una pagina html:

<html>
     <head>
     <title>IMMAGINI</title>
     </head>

     <body>

          <div>La nostra prima immagine : </div>

          <!-- INSERISCO L’IMMAGINE logo.jpg -->
          <img src=‘img/logo.jpg’ />

     </body>
</html>

Il risultato nel browser è il seguente:

Immagini html

Non avendo specificato allineamento e altri attributi, l’immagine viene stampata a sinistra e dopo l’elemento che lo precede nel codice (nel nostro caso il div che contiene il testo).

I formati per le immagini web.

Nonostante non siano definiti in maniera precisa i formati ammissibili per le immagini è bene sottolineare che nella scelta del formato va tenuta in grande considerazione la pesantezza dell’immagine (espressa in byte).
I formati più indicati per il web sono sostanzialmente tre:

Formati immagini html

Indipendentemente dal formato utilizzato è importante ricordare che abusare delle immagini incide negativamente sulle prestazioni del browser. Difatti caricare una pagina html con molte immagini richiede un tempo maggiore rispetto ad una pagina con testo e poche immagini.
Una volta scelte le immagini da inserire queste vanno ottimizzate, regolando la dimensione e il formato. La regola alla quale attenersi per scegliere il formato corretto è riassunta di seguito:

  • se bisogna inserire una foto allora scegliamo il formato jpg;
  • se bisogna inserire un logo o un disegno scegliamo il formato gif o png.

L’attributo ALT e le regole di accessibilità.

Un aspetto importante di cui tener conto è che non tutti i browser visualizzano le immagini presenti in una pagina html, o ad esempio per scelta un utente potrebbe non visualizzare le immagini.
Alcuni utenti, quali gli ipovedenti, non sono in grado di mettere a fuoco del tutto le immagini inserite nelle pagine web, i non vedenti sono del tutto esclusi anche da questa pur limitata possibilità; altri ancora utilizzano browser che non supportano immagini e interpretano solamente i testi contenuti nelle pagine stesse.
Pensare di creare pagine web alternative a quelle che utilizzano le immagini significherebbe di fatto discriminare tali utenti da una completa fruizione di tutto ciò che di positivo spesso riserva la rete.
Fornire invece un testo equivalente per le immagini garantisce in tutti i casi sopraelencati l’accessibilità, oltre a essere utile indistintamente a tutti gli utenti: si tratta in ogni caso di un elemento irrinunciabile per assicurare sempre e comunque accessibilità alle immagini inserite in una pagina web.

L’attributo ALT permette appunto di definire un testo da visualizzare in assenza dell’immagine.

<img src=‘img/logo.jpg’  alt=‘Il logo del corso HTML’ />

Seppur non obbligatorio come attributo, l’uso dell’attributo alt è opportuno sulle principali immagini incluse in una pagina, in modo particolare nel caso in cui l’immagine rappresenta un prodotto, un servizio, o comunque un elemento relativo alla pagina.
Utilizzando l’attributo alt si potrà notare come in Internet Explorer il testo venga visualizzato anche in presenza dell’immagine qualora l’utente trascini su di essa il puntatore del mouse; negli altri browser invece il testo viene visualizzato solo in assenza dell’immagine.

Altezza e larghezza delle immagini.

Gli attributi width e height possono essere usati per impostare l’altezza e la larghezza di una immagine. Per impostare l’altezza e la larghezza viene usato, solitamente, un valore in pixel.
A differenza dei centimetri, i pixel sono unità di misura relative che dipendono dalla risoluzione dello schermo. Ad un utente con uno schermo ad alta risoluzione, 25 pixel possono corrispondere ad 1 centimetro, mentre gli stessi 25 pixel su uno schermo a bassa risoluzione possono corrispondere sullo schermo a 1.5 centimetri.
Se non vengono impostate l’altezza e la larghezza, l’immagine verrà inserita con le sue dimensioni originali. Bisogna comunque tenere in considerazione che il browser conosce le dimensioni di un’immagine solo nel momento in cui questa viene caricata completamente, in ogni caso è consigliabile indicare le dimensioni dell’immagine favorendo la realizzazione del layout al browser.
Gli attributi width e height possono inoltre essere utilizzati per scalare le immagini troppo grandi.

Il codice html sottostante descrive l’utilizzo degli attributi width e height:

<html>
     <head>
     <title>ALTEZZA E LARGHEZZA IMMAGINI</title>
     </head>
     <body>
     <div>Dimensione delle immagini : </div>

     <img src='img/logo.jpg' width='82px' height='200px' alt='Il logo del corso HTML!'/>
     <img src='img/logo.jpg' width='70px' height='170px' alt='Il logo del corso HTML!'/>
     <img src='img/logo.jpg' width='50px' height='150px' alt='Il logo del corso HTML!'/>

     </body>
</html>

Nel codice sono presenti tre immagini in sequenza con dimensioni diminuite di volta in volta.
Di seguito è mostrato il risultato:
Altezza e larghezza immagini
In definitiva la sintassi per impostare altezza e larghezza di un immagine è:

<img src=”‘immagine.jpg’” alt=”" width=”‘100px’” height=”‘100px’” />


Leave a Comment :, , , more...

Torna sopra ↑


Spazio Pubblicitario

Html: realizzare un menu (esercizio guidato)

realizzato da , il 28 mag. 2011, categoria Html/Css

Html/Css

Come detto nelle lezioni precedenti, i link permettono di collegare tra loro le varie sezioni di un sito web.
Solitamente lo strumento che viene reso disponibile agli utenti per accedere alle varie pagine è il cosiddetto menu. Nel menu sono raccolti e ordinati i link alle varie pagine.
Gli aspetti grafici dei menu sono vari e spesso molto accattivanti, devono non solo facilitare la navigazione del sito ma anche attirare l’attenzione dell’utente verso i vari contenuti proposti.

Progettazione del menu.

Il menu che realizzeremo sarà un menu di tipo orizzontale. I vari link saranno disposti l’uno di fianco all’altro all’interno di bottoni dalla forma rettangolare.
Grazie alle conoscenze fin’ora acquisite utilizzeremo DIV e paragrafi per disporre i vari elementi del menu. Inoltre verrà introdotto un minimo di regole di stile per rendere più gradevole l’aspetto del menu.

Ecco il codice html completo:

<html>
<head>
	<title>MENU</title>
</head>

<body>
<h2 align='center'>Titolo del sito</h2>

<div align='center' style='background-color:blue; padding:4px;'>
	<span style="background-color:orange; border:2px solid black; padding:4px; 	width:150px"><a href='#'>HOME</a></span>
	<span style="background-color:orange; border:2px solid black; padding:4px; 	width:150px"><a href='#'>CHI SIAMO</a></span>
	<span style="background-color:orange; border:2px solid black; padding:4px; 	width:150px"><a href='#'>DOVE SIAMO</a></span>
	<span style="background-color:orange; border:2px solid black; padding:4px; 	width:150px"><a href='#'>CONTATTI</a></span>
</div>

<hr/>

<p align='justify'>
Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor più sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e l'Adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l'acqua distendersi e rallentarsi in nuovi golfi e in nuovi seni…
….
</p>

<hr/>

</body>
</html>

Una volta salvato il file con estensione .html il risultato è il seguente:

Menu html

Analizzando il codice html si può innanzitutto notare la nidificazione di tag DIV, SPAN e A per realizzare la parte alta della pagina.
Andando per ordine, all’interno del tag body viene definito innanzitutto un titolo grazie al tag <h2>, le successive righe di codice implementano il menu orizzontale: un DIV contenitore con allineamento centrale al quale è associato la seguente riga di stile che definisce un colore di sfondo e una spaziatura interna di 4px:

style=’background-color:blue; padding:4px;‘

Nelle lezioni dedicate al CSS saranno approfondite le regole di stile.

Il DIV conterrà i singoli bottoni che comporranno il menu, dove ogni bottone sarà identificato da uno span al cui interno sarà presente il link:

<span style="background-color:orange; border:2px solid black; padding:4px; width:150px">
     <a href=‘index.html'>HOME</a>
</span>

Tralasciando nel dettaglio le regole di stile è importante notare la sintassi e la nidificazione del link.
Continuando ad analizzare il codice si può notare la presenza di un separatore lineare <hr/> e la presenza di un paragrafo che racchiude il testo della pagina.


Leave a Comment :, , more...

Torna sopra ↑

Html: i segnalibri

realizzato da , il 17 mag. 2011, categoria Html/Css

Html/Css

Un link oltre che puntare all’inizio di un nuovo documento HTML, permette di visualizzare il documento attualmente aperto a partire da un determinato punto che chiameremo segnalibro.
Questi tipi di link vengono denominati link interni, difatti sono definiti in una pagina HTML e puntato ad una porzione della stessa pagina.
Per realizzare un link interno è necessario procedere in questo modo:

  • definire il segnalibro assegnandogli un nome univoco;
  • definire un link che conduca al segnalibro.

La seguente riga di codice descrive un segnalibro o ancora:

<a name="capitolo1"></a>

Il nome capitolo1 viene assegnato al link dall’attributo name dell’elemento a. Il link che permetterà di raggiungere il segnalibro sarà:

<a  href="#capitolo1">Vai al capitolo 1</a>

Il tag a definisce un link ipertestuale con l’ancora capitolo1 come destinazione. Il simbolo # indica al browser che l’ancora va ricercata all’interno della pagina attuale.
Diversamente è possibile collegare un link ad un segnalibro definito in un’altra pagina nel seguente modo:

<a href="index.html#capitolo1">Vai al capitolo 1</a>

In questo caso l’ancora capitolo1 sarà ricercata nella pagina index.html.
I link interni vengono utilizzati soprattutto per facilitare la lettura e navigazione di pagine HTML con un grande contenuto di informazioni.

Utilizzo dei segnalibri.

Lo scopo principale di un segnalibro html è quello di facilitare la navigazione di pagine complesse, un classico esempio che ne chiarisce l’utilità è quello di una pagina HTML che contiene il testo di un libro suddiviso per capitoli.
Un indice iniziale linkato sul titolo di ogni capitolo, poterà l’utente a visualizzare il testo del capitolo in questione. Oppure, ad esempio, una semplice pagina html suddivisa in paragrafi che fornisce nella parte alta un menu dove ogni voce conduce ad un paragrafo e quindi ad un segnalibro.
Il seguente codice html descrive un esempio completo:

<html>
    <head>
        <title>SEGNALIBRI</title>
    </head>
    <body>
        <h2>I Promessi Sposi</h2>
        <a href='#capitolo1'>Capitolo 1</a><br/>
        <a href='#capitolo2'>Capitolo 2</a><br/>
        <a href='#capitolo3'>Capitolo 3</a><br/>
        <hr/>
        <p align='justify'>
	<a name='capitolo1'></a>
	<h3>CAPITOLO 1</h3>
	Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non 	interrotte di monti, tutto a seni e a golfi …
	...
        </p>
        <hr/>
        <p align='justify'>
	<a name='capitolo2'></a>
	<h3>CAPITOLO 2</h3>
	Si racconta che il principe di Condé dormì profondamente la notte avanti la 	giornata di Rocroi …
	...
        </p>
        <hr/>
        <p align='justify'>
            <a name='capitolo3'></a>
            <h3>CAPITOLO 3</h3>
	 Lucia entrò nella stanza terrena, mentre Renzo stava angosciosamente 	informando Agnese, la quale angosciosamente lo ascoltava …
	 ...
        </p>
        <hr/>
    </body>
</html>

All’apertura della pagina nel browser verrà visualizzata la parte alta, che contiene il titolo e i tre link che conducono ai capitoli dei Promessi Sposi.

Segnalibri HTML

Evitando quindi di scrollare la pagina si potrà visualizzare in cima il capitolo 2, cliccando sull’apposito link.

Segnalibri HTML

Da notare infine come il funzionamento dei segnalibri sia dipeso non solo dalla struttura della pagina ma anche dalla quantità di spazio che questa occupa nella finestra del browser.
Definire uno o più segnalibri in una pagina che viene visualizzata per intero nel browser (senza la presenza dello scroll laterale) non produce l’effetto desiderato perché il segnalibro in questione punterebbe ad una porzione di pagina già in visualizzazione.


Leave a Comment :, more...

Torna sopra ↑

Html: i collegamenti ipertestuali

realizzato da , il 17 mag. 2011, categoria Html/Css

Html/Css

Come collegare i documenti.

I collegamenti ipertestuali sono la base del web. Chiunque navighi sul web si imbatte continuamente nei cosiddetti link che uniscono una pagina html ad un’altra in maniera tale che nessuna di queste resti irraggiungibile.
La caratteristica primaria degli ipertesti è quella di formattare i documenti in forma non sequenziale. Grazie ai collegamenti ipertestuali (link) è possibile leggere i documenti senza seguire necessariamente un ordine sequenziale.
La peculiarità di saltare da un punto all’altro del documento è tipica del WWW, dove spesso seguendo un documento si passa da un sito all’altro senza soluzione di continuità.
La maggiora parte dei link vengono individuati nel browser con un testo sottolineato di colore blu.
Passando il puntatore del mouse sul testo evidenziato il cursore assume il simbolo della mano e nella barra di stato della finestra viene mostrato l’url del link che è possibile raggiungere al successivo clic del tasto sinistro.

Link HTML

Il tag <a>.

La struttura base per creare un link è la seguente:

<a href="http://www.sito.com">vai al sito</a>

Nel parametro href inseriamo l’indirizzo della pagina o del sito; fra i tag <a> e </a> metteremo il testo o l’oggetto che vogliamo rendere cliccabile.
Difatti tra i tag <a> può anche non comparire un testo, bensì un’immagine o un oggetto che fungono da richiamo ad un’altra pagina. Successivamente sarà descritto un esempio nel quale un’immagine fungerà da link.
All’interno dell’attributo href è possibile specificare anche solo il nome della pagina a cui collegare il link, ad esempio scrivendo:

<a href="pagina.html">Link relativo</a>

Questa soluzione è adottata qualora ci stessimo riferendo ad una pagina dello stesso dominio di appartenenza della pagina nella quale è definito il link. Inoltre come link si può far riferimento direttamente ad una directory, il server in questo caso restituisce il file index.html o altri file di default per cui è stato settato.

Ad esempio se si scrivesse:

<a href="http://www.sito.com/cartella/">Link a directory</a>

verremmo indirizzati al file index.html presente nella directory denominata cartella. Qualora il file non sia presente il browser lancerà un errore 404 che indica l’assenza della risorsa richiesta.

L’attributo target.

Con l’attributo target possiamo far capire al browser su quale finestra dovrà aprire il collegamento:

<a href="http://www.sito.com/" target="nome finestra">Link in altra finestra</a>

Questo attributo risulta indispensabile qualora ci si trovasse a lavorare con una pagina strutturata su più frame (più sottofinestre), per aggiornare tramite link solo il contenuto di una finestra.
Con l’uso sempre minore dei frame (che vedremo nelle lezioni successive), l’attributo target viene particolarmente utilizzato per aprire un collegamento in una nuova finestra senza sovrascrivere il contenuto della finestra di partenza (utile per saltare da un sito ad un altro).
In questo caso l’attributo target assume il parametro “_blank”:

<a href="http://www.sito.com/" target="_blank">Link in nuova finestra</a>

Il risultato ottenuto è mostrato sotto:

Target HTML

Il clic sul link della prima finestra attiva l’apertura di una seconda finestra che contiene la risorsa richiesta.

Ulteriori parametri per l’attributo target sono:

  • target=”_parent” Apre il collegamento nel frame o nella finestra genitore   della finestra.
  • target=”_self” Apre il collegamento nello stesso frame o finestra.
  • target=”_top” Apre il collegamento nel frame o finestra più importante.

Assegnare un titolo al link.

Per i collegamenti ipertestuali è possibile assegnare un testo di commento, attivato quando il mouse passa sull’area di link simile.
Questa pratica può essere utile sostanzialmente per due motivi :

  • per aiutare i motori di ricerca ad indicizzare in maniera efficiente un sito;
  • per fornire a prima vista all’utente una sorta di introduzione al contenuto della pagina linkata.

Il seguente codice HTML descrive l’utilizzo dell’attributo title:

<html>
    <head>
        <title>TITOLO DEL LINK</title>
    </head>
    <body>
        <p align='justify'>
	Per prenotare gli esami di informatica &egrave; necessario consultare la tabella accessibile da<br/>
	<a href='esami.html' title='Qui è possibile consultare il calendario degli esami'>
		qui...
	</a>
        </p>
    </body>
</html>

Il risultato ottenuto è mostrato sotto, al passaggio del mouse sul link viene visualizzato per alcuni secondi il titolo.

Attributo title HTML


Leave a Comment :, , , , more...

Torna sopra ↑

Html: annidamento, indentazione e commenti

realizzato da , il 13 mag. 2011, categoria Html/Css

Html/Css

Annidamento dei tag.

Una caratteristica importante del codice HTML è che i tag possono essere annidati l’uno dentro l’altro. Anzi molto spesso è necessario farlo.
Una delle prime regole a cui è importante attenersi nella stesura di una pagina HTML è prestare attenzione alla chiusura dei tag aperti. Per limitare il numero di errori è consigliabile aggiungere il tag di chiusura subito dopo aver aperto il tag in questione, quindi poi aggiungere il contenuto al tag.
Questa tecnica è particolarmente suggerita in presenza di nidificazioni di tag, così facendo si riduce la possibilità di avere errori nella visualizzazione della pagina nel browser.
Potremmo quindi avere una situazione del genere:

<p>
Questo è un testo…
<div>
Seguito da un testo in un div…
</div>
</p>

Da notare le ultime due righe del codice appena proposto, dove viene in sequenza chiuso prima il DIV e poi successivamente P.
Il caso precedente è un caso di nidificazione di tag; il DIV è contenuto nel paragrafo P.
Nessuno vieta inoltre di definire più livelli di nidificazione.

Indentazione del codice.

E’ una buona norma utilizzare dei caratteri di tabulazione (il tasto tab a sinistra della lettera Q) per far rientrare il testo ogni volta che ci troviamo in presenza di un annidamento e man mano che entriamo più in profondità nel documento. Questa tecnica prende il nome di indentazione.
In pratica apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab: non si tratta soltanto di un fattore visivo, ma l’allineamento di apertura e chiusura tag viene mantenuto anche se scorriamo in verticale il documento con il cursore.
Grazie a questa tecnica di stesura del codice, il codice stesso risulta più leggibile e facilmente modificabile in fasi successive.
Il codice del paragrafo precedente è così riformulato:

<p>
	Questo è un testo…
	<div>
		Seguito da un testo in un div…
	</div>
</p>

I commenti.

Per rendere il nostro codice più leggibile è consigliabile inserire dei commenti nei punti più significativi: si tratta di indicazioni significative per il webmaster, ma invisibili al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere l’orientamento anche in file molto complessi e lunghi. La sintassi è la seguente:

<!– Questo testo è un commento –>

Tutto ciò che compare all’interno di questi particolari tag viene ignorato in fase di visualizzazione nel browser, ma resta comunque leggibile e accessibile da chiunque perché presente nel codice HTML. E’ quindi preferibile non utilizzare i commenti per inserire informazioni sensibili onde evitare problemi di sicurezza.

<p>
	Questo è un paragrafo che contiene semplice testo.<br/>
	All’interno del paragrafo è presente un commento per gli sviluppatori.
	<!-- COMMENTO : questo è un paragrafo -->
</p>

Commenti HTML


Leave a Comment :, , more...

Torna sopra ↑

Html: le entità

realizzato da , il 13 mag. 2011, categoria Html/Css

Html/Css

Quando inseriamo del testo nelle nostre pagine HTML dobbiamo utilizzare le entità per definire alcuni caratteri particolari.
Ad esempio se dobbiamo scrivere la lettera a minuscola con accento grave (à) non basta pigiare l’apposito tasto sulla nostra tastiera, bensì per scrivere correttamente “à” dobbiamo digitare:

&agrave;

Nel codice HTML leggeremo &agrave; e nella pagina Html visualizzata dal browser vedremo la nostra lettera a minuscola con accento grave.
Se nel codice HTML scriviamo la parola “velocità” invece di “velocit&agrave;” i browser visualizzeranno correttamente la parola solo se tramite intestazioni HTTP o codice HTML riceveranno l’informazione di caricare la giusta tabella-codici (in questo caso ISO 8859-1).
Nonostante ciò per evitare qualsiasi problema ed anche per rendere le pagine web più conformi allo standard HTML è preferibile inserire nel testo direttamente le entità carattere.

Le entità di uso frequente.

Tutte le entità HTML si formano con una e commerciale (&) come primo carattere e un punto e virgola (;) come ultimo.
Nella tabella è indicato esattamente per ciascuna entità come si scrive: i loro nomi sono case-sensitive (occorre rispettare maiuscole e minuscole).

Le entità HTML


Leave a Comment :, more...

Torna sopra ↑

Html: separatori ed elenchi

realizzato da , il 12 mag. 2011, categoria Html/Css

Html/Css

Il tag HR.

Per creare delle linee di separazione con un semplice tag HTML, senza dover ricorrere alla creazione di un’immagine è possibile utilizzare l’<hr>.
Per creare la linea basta inserire nel codice sorgente il solo tag <hr/> ed avremo la creazione di una linea con colorazione grigia, di uno spessore standard e larga quanto il “contenitore” nella quale è instanziata.
E’ possibile personalizzare l’aspetto grafico del tag <hr> con la definizione di alcuni attributi tra i quali ad esempio width, size, color e align.

Ad esempio scrivendo:

<hr width=”150px” size=”1″ color=”red” align=”center“ />

definiamo un separatore di colore rosso allineato al centro e di lunghezza 150px.
Di seguito ecco come verrà visualizzato nel browser l’<hr> appena definito.

Tag HR

Il tag <hr> risulta quindi molto utile nel momento in cui è necessario suddividere parti della pagina in maniera veloce ed efficiente.

Gli elenchi puntati e numerati.

Se abbiamo la necessità di inserire un elenco di termini, possiamo utilizzare le “liste”, che sono sostanzialmente di tre tipi:

  • elenchi ordinati;
  • elenchi non ordinati.

Tutti e due i tipi di elenchi funzionano nel medesimo modo: si apre il tag, si elencano i vari elementi della lista (ciascuno con il proprio tag), si chiude il tag dell’elenco. La sintassi ha quindi questa forma:

<elenco>
<elemento>nome del primo elemento</elemento>
<elemento>nome del secondo elemento</elemento>
</elenco>

Gli elenchi ordinati sono contraddistinti dall’enumerazione degli elementi che compongono la lista.
Il tag da utilizzare per aprire un elenco ordinato è <ol> (ordered list) e gli elementi sono individuati dal tag <li> (list item):

Elenco numerato:
<ol>
    <li>Primo Elemento</li>
    <li>Secondo Elemento</li>
    <li>Terzo Elemento</li>
</ol>

Il cui risultato è il seguente:

Elenchi HTML

Gli elementi dell’elenco sono sempre rientrati di uno spazio verso destra: tutto questo serve a individuare in modo inequivocabile l’elenco. Lo stile di enumerazione visualizzata di default dal browser è quella numerica, ma è possibile indicare uno stile differente specificandolo per mezzo dell’attributo type.

  • type=“a” Elenco con alfabeto minuscolo
  • type=“A” Elenco con alfabeto maiuscolo
  • type=“i” Elenco con numeri romani in minuscolo
  • type=“I” Elenco con numeri romani in maiuscolo

Gli elenchi non ordinati (o puntati) sono individuati dal tag <ul> (unordered list), e gli elementi dell’elenco sono contraddistinti anch’essi dal tag <li>.

Elenco puntato:
<ul>
    <li>Primo Elemento</li>
    <li>Secondo Elemento</li>
    <li>Terzo Elemento</li>
</ul>

Il cui risultato è il seguente:

Elenchi puntati HTML

Anche per gli elementi puntati è possibile personalizzare il tipo di segno grafico utilizzato per individuare gli elementi.

  • type=“disc” Visualizza un pallino nero (default)
  • type=“circle” Visualizza un cerchio vuoto
  • type=“square” Visualizza un quadrato pieno

Leave a Comment :, , more...

Torna sopra ↑

Html: stile per il testo

realizzato da , il 12 mag. 2011, categoria Html/Css

Html/Css

L’HTML ha due tipi di stile per il testo:

logico

  • formatta del testo a seconda del suo significato
  • descrive “l’uso” di una parte di testo
  • lascia al browser l’interpretazione del comando secondo le proprie capacità

e

fisico

  • indica al browser il formato specifico del testo
  • forza il testo ad assumere un particolare aspetto
  • richiede uno specifico formato fisico e causa problemi se il browser non è in grado   di gestire il formato specificato

Tipi di stile logico.

  • <EM> E’ utilizzato per enfatizzare un testo
  • <STRONG> E’ utilizzato per dare una forte enfasi ad un testo
  • <ADDRESS> Tag contenitore usato per fornire informazioni di locazione
  • <CITE> Per testo di citazione
  • <BLOCKQUOTE> Usato per citazioni e risalto di blocchi di testo
  • <DFN> Utilizzato per la definizione di un termine
  • <CODE> Utilizzato per includere il codice di un programma
  • <KBD> Utilizzato per indicare un testo da digitare

Il seguente codice descrive l’utilizzo di questi tag:

<body>
    <em>Questo è enfatizzato</em>
    <strong>Questo è strong</strong>
    <address>Questo è address</address>
    <cite>Questa è una citazione</cite>
    <blockquote>Questo è un blockquote</blockquote>
    <dfn>Questa è una definizione</dfn>
    <code>Questo è un codice</code>
    <kbd>Questo è un testo da digitare</kbd>
</body>

Il codice precedente produce:

Stile Logico HTML

Tipi di stile fisico.

  • <B> Per il testo in grassetto
  • <I> Per il testo in italico
  • <U> Per il testo sottolineato
  • <STRIKE> Per un testo barrato
  • <TT> Per mantenere una spaziatura fissa
  • <SUB> Per un testo al pedice
  • <SUP> Per un testo all’apice

Il seguente codice descrive l’utilizzo di questi tag:

<body>
<b>Testo in grassetto</b>
<l>Testo in italico</l>
<u>Testo sottolineato</u>
<strike>Testo barrato</strike>
<tt>Testo a spaziatura fissa</tt>
X<sub>Questo testo è al pedice</sub>
X<sup>Questo testo è all’apice</sup>
</body>

Il risultato è il seguente:

Stile fisico HTML


Leave a Comment :, more...

Torna sopra ↑

Html: i tag di uso frequente

realizzato da , il 12 mag. 2011, categoria Html/Css

Html/Css

Tag contenitori.

Come visto in un articolo precedente nulla vieta di scrivere direttamente all’interno del tag body il testo di ciò che vogliamo appaia a schermo.
Risulta più pratico racchiudere il testo in appositi tag a seconda della funzione che il testo sta svolgendo.
La nostra pagina html risulterà più semplice da leggere, quando dovremo modificarla, e inoltre potremo ottenere un effetto grafico più gradevole e rispondente alle diverse esigenze.
Vediamo i principali tag-contenitori da utilizzare per formattare il testo.

Titoli.

Esistono 6 differenti livelli di titolo che si ottengono utilizzando i seguenti tag:

  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>

La “h” sta per “heading“, cioè titolo e ogni livello indica una grandezza diversa.
Dall’<h1>, che è il più importante, si va via via degradando fino all’<h6> che rappresenta il titolo con grandezza minore.
Gli heading, così come altri tag contenitori, appartengono alla famiglia degli elementi di blocco. Tali elementi sono così chiamati perché una volta definiti creano un blocco attorno a sé, di conseguenza vanno a capo e risultano distanziati dagli elementi che li circondano.

Analizziamo il seguente codice html:

<html>
    <head>
        <title>TITOLI</title>
    </head>
    <body>
        <h1>Esame di informatica</h1>
        <h2>Esame di informatica</h2>
        <h3>Esame di informatica</h3>
        <h4>Esame di informatica</h4>
        <h5>Esame di informatica</h5>
        <h6>Esame di informatica</h6>
    </body>
</html>

Nella pagina html abbiamo definito 6 titoli con ugual testo ma grandezza diversa, utilizzando in successione i tag da h1 ad h6.
Ciascun titolo verrà automaticamente portato a capo rispetto al precedente e di default sarà applicato un margine (inferiore e superiore) che differisce seppur minimamente da browser a browser.
Di seguito viene mostrato il risultato in Internet Explorer:

Titoli HTML

Paragrafi.

I browser non riconoscono da soli la formattazione del testo, bensì è necessario indicargliela tramite appositi tag html. In caso contrario il browser si limiterà a visualizzare a video i caratteri uno dietro all’altro senza alcuna regola.
Il paragrafo rappresenta l’unità di base entro cui suddividere un testo.
Il tag <p> lascia una riga vuota prima della sua apertura e dopo la sua chiusura. La sintassi è la seguente:

<p>Questo testo è in un paragrafo…</p>

Il tag </p> di chiusura può essere omesso ma è buona norma abituarsi ad inserirlo sempre, soprattutto nel caso in cui siano necessari più paragrafi in successione.
Analizziamo il seguente esempio di codice html:

<p>Questo &egrave; un primo paragrafo... </p>
<p>Questo &egrave; un secondo paragrafo...</p>

I browser visualizzerà così i due paragrafi:

Paragrafi HTML

Il tag <p> possiede inoltre un importante attributo presente nella maggior parte degli elementi di blocco che prende il nome di align.
Specificando ad esempio:

<p align=‘right’>Questo è un paragrafo…</p>

il testo contenuto all’interno del paragrafo sarà allineato a destra. In alternativa il testo potrà essere allineato a sinistra (left), al centro (center) oppure giustificato (justify).

Andare a capo.

Si sarà notato che andando a capo nel codice html all’interno di un paragrafo, questo non riproduce lo stesso effetto visualizzato nel browser. Ad esempio scrivere come segue non produce l’effetto desiderato:

<p>
Questo &egrave; un paragrafo
questa riga dovrebbe andare a capo
cos&igrave; come questa riga…
</p>

Il tag <br/> permette invece di inserire un interruzione di riga, quindi un a capo. Essendo questo un tag vuoto e non un contenitore come <p>, nella sintassi verrà definito senza contenuto e quindi senza la coppia di tag di apertura e chiusura.
L’esempio precedente è così riformulato grazie al tag <br>:

<p>
Questo &egrave; un paragrafo <br/>
questa riga dovrebbe andare a capo <br/>
cos&igrave; come questa riga…
</p>

Utilizzando semplicemente una coppia di tag <br> si ottiene di conseguenza una linea bianca.

Il div e lo span.

Il tag <div> definisce un blocco di testo che va a capo ma, a differenza del paragrafo, non lascia spazi prima e dopo la sua apertura.
Il DIV grazie alla sua enorme versatilità viene definito nel linguaggio HTML come l’elemento di tipo blocco per eccellenza. E’ utilizzato più che per contenere semplice testo soprattutto per la suddivisione strutturale delle pagine html.
La sintassi del DIV è la seguente:

<div>Questo è un testo all’interno di un blocco div.</div>

Lo <span> invece è un contenitore generico che può essere annidato ad esempio all’interno dei <div>.
A differenza dei tag <p> e <div> si tratta di un elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include.
Lo <span> è un elemento molto utilizzato soprattutto insieme ai fogli di stile (CSS), ad esempio per definire delle aree di testo particolari come quelle per segnalare errori o informazioni all’utente.
Se non viene associato ad uno stile la sua presenza risulta nulla e dipendente esclusivamente dallo stile del tag che lo contiene.
Analizziamo quindi il seguente codice HTML:

<div>
Questo testo è all’interno di un blocco.<br/>
E’ possibile inserire immagini, link o altri oggetti all’interno di un div.<br/>
Inoltre un div può contenere uno span che a sua volta contiene ad esempio una parola o una frase.<br/>
<span>Questo testo è in uno span.</span>
</div>

E’ stato definito un div che contiene esclusivamente testo formattato grazie a dei <br> e prima della chiusura uno span con del testo. Da notare la nidificazione dello span nel div.
Il risultato dell’esempio precedente è così visualizzato dal browser:

DIV e SPAN


Leave a Comment :, , , , , more...

Torna sopra ↑

Validazione del codice HTML

realizzato da , il 04 mag. 2011, categoria Html/Css

Html/Css

Il W3C.

L’organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML (il W3C: World Wide Web Consortium) ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0); e, da un certo punto in poi, l’HTML si è evoluto in XHTML (si tratta dell’HTML riformulato come linguaggio XML).
La versione dell’HTML a cui si farà riferimento è l’ultima rilasciata: si tratta dell’HTML 4.01.

Si è detto che l’HTML si è evoluto in XHTML; ci sono però ottime ragioni per incominciare a studiare l’HTML e non l’XHTML:

  • di fatto l’HTML verrà utilizzato ancora per diversi anni come linguaggio principe delle pagine web;
  • alcuni concetti di XHTML richiedono già una certa esperienza. L’HTML è più immediato e consente di incominciare subito a produrre documenti web;

chi conosce l’XHTML non può non conoscere l’HTML. La conoscenza dell’HTML è infatti il prerequisito essenziale. Le differenze tra i due linguaggi non sono così marcate e passare dall’uno all’altro non richiede poi molta fatica.

Il DOCTYPE.

Il W3C, ha esplicitamente definito l’HTML come un’applicazione SGML che, pertanto, deve aderire agli standard internazionali ISO 8879.
La DTD (Document Type Definition) di un documento HTML definisce i marcatori (tag) e la sintassi utilizzata per creare il documento stesso.
Una pagina HTML valida deve dunque contenere il <!DOCTYPE> (o Document Type Declaration) che ne dichiara la versione ed la relativa DTD cui è conforme.

Il <!DOCTYPE> è quel piccolo pezzo di codice che precede tutti i tag di un documento HTML.
Può assumere  una sintassi di questo genere:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ http://www.w3.org/TR/html4/loose.dtd>

Questa riga fornisce le seguenti informazioni:

Informazioni Doctype

Inoltre, se necessario, è possibile specificare l‘indirizzo di riferimento a cui è possibile trovare la DTD se omesso il browser non darà errore dato che gli URL a cui trovare la documentazione sono universalmente noti.
Per quel che riguarda l’HTML le indicazioni possibili sono tre:

  • Strict, che è una DTD particolarmente rigorosa. Esclude ogni elemento che riguarda il layout e non è consentito l’uso degli elementi deprecati;
  • Transitional, che è una versione temporanea, per consentire il passaggio da una specifica all’altra. Nella DTD transitional i tag deprecati sono ammessi. Questa DTD andrà bene nella maggior parte dei casi;
  • Frameset, che è la DTD che riguarda i frames.

Una volta definita la DTD il browser conosce esattamente come dovrebbe leggere e visualizzare la pagina HTML. La DTD è essenziale soprattutto quando si vuol validare il codice html.

Validazione HTML.

Nonostante non sia obbligatorio validare il codice html è buona norma, soprattutto per chi intende realizzare pagine web di livello professionale, effettuare il controllo del codice alla ricerca di errori.
Validare consiste essenzialmente nel controllare che il codice risponda alla DTD a cui è associata e che non ci siano errori di annidamento e nomenclatura dei tag.
A tale scopo il W3C mette a disposizione, tramite il sito ufficiale del consorzio, uno strumento di validazione on-line accessibile al seguente indirizzo: http://validator.w3.org/.
Lo strumento in questione permette di verificare una pagina html tramite url diretto oppure, qualora il file sia in locale, caricando il file html tramite apposita procedura.
Una volta che il controllo del codice è terminato, il validatore segnala eventuali errori e avvertimenti, indicando per ognuno di essi il numero di riga e riportando la porzione di codice incriminato.
Nel momento in cui il codice risulta valido viene rilasciato un logo applicabile alla pagina che certifica la validità del codice.


Leave a Comment :, , more...

Torna sopra ↑

Fabio Donatantonio - Salerno - Città di Castello (PG) - fabio@donatantonio.net
Torna sopra ↑