Blog Informatica & Programmazione

Mappe Cliccabili (lato-client!)

Sebbene esistono già software come Dreamweaver che permettono di creare mappe cliccabili su un'immagine, ovvero assegnare ad un'immagine due o più differenti zone su cui inserire un collegamento ipertestuale, può davvero tornare molto utile a chi crea pagine in HTML.
In questo topic voglio occuparmi delle mappe più semplici ovvero, le mappe lato-client, che sono quelle più utilizzate, in quanto le mappe lato-server sono oramai obsolete.
Ecco il tutorial:

1. Inserire l'immagine all'interno del documento
Suppongo che chi sta leggendo questo topic, sappia come inserire un'immagine in HTML, ma nel caso ve lo foste dimenticati ecco la sintassi di base di un'immagine:

dove al posto di URL_IMMAGINE dovrete inserire il link dell'immagine, e al posto di Testo alternativo dovrete inserire una descrizione dell'immagine o un qualsiasi testo che sia inerente all'immagine, in quanto quella scritta appare se l'immagine per un motivo o per un altro non è visualizzabile

2. Creare la mappa cliccabile
per poter creare una mappa cliccabile si usa il tag <map>, e successivamente all'interno si utilizza il tag , che indica appunto che una zona dell'immagine deve essere cliccabile.
Successivamente è necessario decidere che forma deve avere la mappa cliccabile, e potrete decidere principalmente tra tre valori assegnabili all'attributo <shape>:

Read the whole post...

Lista caratteri speciali

In HTML si utilizzano dei caratteri speciali, detti entità o entity per gli accenti e per alcuni operatori matematici.
Le entity iniziano con una "e commerciale" (&), il nome della entity e un punto e virgola di chiusura, in questo topic trovate alcuni dei principali caratteri speciali indispensabili da conoscere per chi vuole imparare l'HTML.
Al giorno d'oggi molti browser ignorano se sono presenti caratteri speciali oppure no, ma dato che molti pc e browser ancora non lì ignorano è bene inserire sempre quei caratteri speciali anche se so che si farebbe molto prima mettendo il solo carattere.

per inserire gli accenti acuti o gravi ad una vocale è molto semplice basta utilizzare la vocali seguita da grave o acute, in base all'accento che desiderate, ad esempio per inserire il carattere "è" o "à" si può utilizzare la seguente sintassi:


Invece se volete inserire il segno maggiore (>) o il segno minore (<) dovete utilizzare la seguente sintassi:
, nel caso non mettiate questi caratteri speciali, potrebbero darvi problemi con i tag.

Un altro carattere speciale importante è quello delle virgolette (") che si esprime con il seguente codice:
, anche questo se non utilizzato potrebbe dare dei problemi.

Altri caratteri speciali interessanti possono essere il segno di più o meno (±) con la seguente sintassi:

Oltre a questo si può parlare di quello che serve ad indicare il Copyright (©), ma attenzione mettete il Copyright solo se lo avete veramente!

4. Gli attributi di Body
Nel precedente capitolo abbiamo parlato degli attributi Background e Bgcolor del marcatore Body.
Oltre a questi due attributi esistono altri attributi che possono essere utilizzati con Body.
L'attributo lang indica la lingua del documento ed è molto utile nell'indicizzazione nei motori di ricerca, per l'Italiano, il valore è it;
L'attributo Leftmargin indica la distanza del contenuto dal "confine" sinistro del documento, nel browser, per azzerarlo il valore è 0 mentre Topmargin indica la distanza del contenuto dal "confine" in alto del documento, nel browser ed anch'esso per azzerrarlo basta assegnare 0 come valore.
L'attributo Text indica il colore del testo di tutto il documento, quindi come valore deve avere un colore;
L'attributo Link indica il colore dei collegamenti ipertestuali non ancora cliccati, l'attributo Alink indica il colore dei collegamenti ipertestuali nei momenti in cui vengono cliccati e infine l'attributo Vlink che indica il colore dei collegamenti ipertestuali dopo che sono già stati visitati almeno una volta.
Quindi integrando il nostro codice:

Salvando e premendo F5 nella pagina precedente noteremo la scritta "Testo" più a sinistra e più in alto e il colore della scritta è blu, gli attributi dei collegamenti ipertestuali lì vedremo in pratica nei prossimi capitoli.
Nel prossimo capitolo, cominciamo a riempire il contenuto di Body, impareremo nuovi marcatori per fare titoli con i rispettivi paragrafi, alla prossima!

<<capitolo precedente

Capi...

Read the whole post...

3. Lo sfondo del documento
Prendiamo in riferimento il codice della struttura di base del capitolo scorso e come prima azione cerca di trovare uno sfondo adatto al nostro documento.
Dopo aver trovato lo sfondo desiderato è bene spiegare un concetto di "attributo di un marcatore", ovvero una caratteristica del marcatore a cui, associando un valore possiamo ottenere un determinato effetto.
Cerchiamo di spiegarci più chiaramente: lo sfondo può essere a colori, e in questo caso l'attributo è bgcolor e il valore può essere un colore scritto in esadecimale (#000000 , per esempio è un nero), che spiegheremo in un'altra guida, oppure utilizzare colori in inglese (per esempio red , black , blue), per il momento utilizzeremo i colori standard, ovvero quelli scritti in inglese, ecco l'esempio in cui lo sfondo sarà rosso:

Invece se vogliamo inserire un'immagine di sfondo dobbiamo eseguire lo stesso procedimento, solo che al posto dell'attributo bgcolor si utilizza l'attributo background e come valore bisogna assegnare il collegamento dell'immagine.
L'immagine di sfondo può essere molto più personalizzata con i CSS, ma per il momento ci limitiamo a imparare questo semplice procedimento:


Ora abbiamo introdotto i primi due attributi di body, nel prossimo capitolo parleremo di altri attributi di body che a...

Read the whole post...

2. Struttura base di una pagina web
Un marcatore, è una parola che indica una funziona o una parte del documento ben precisa, un marcatore si indica con una parola in inglese compresa tra il segno minore (<) e il segno maggiore (>) quindi .
La maggior parte dei marcatori va chiuso aggiungendo uno slash (/) subito dopo il segno minore, quindi <marcatore>Contenuto .
Ma ora cominciamo con l'inserire il primo marcatore in assoluto, il marcatore che indica il linguaggio HTML, che deve essere inserito come primo tag e deve essere chiuso come ultimo tag, ed indica tutto il documento, ovvero tutta la pagina del browser.

Successivamente distinguiamo il documento HTML in due parti ben precise:

.Il marcatore Head, che indica la testa del documento, ovvero tutto ciò che sta "dietro le quinte del documento", in questa parte si inseriscono i meta-tag (che spiegheremo se necessario più avanti), i fogli di stile o CSS (che spiegheremo in un'altra guida), eventualmente script (anche gli script verranno spiegati in un'altra guida) ma l'elemento più importante per il momento contenuto nella testa del documento è il titolo indicato con il tag/marcatore title in cui si deve dare un titolo alla propria pagina web;

.il marcatore Body, che indica il corpo del documento, ovvero tutto ciò che si vede all'interno della pagina, in questa parte c'è il contenuto vero e proprio della pagina, quindi il testo, le immagini, le tabelle, le liste, i campi di testo ecc...
Per il momento ci limitiamo a inserire un semplice testo senza alcun marcatore ma nei prossimi capitoli vi approfondirò tutto ciò che deve essere inserito qui, mentre per il tag Head per questa guida non verrà ripreso, se non per un accenno ai meta-tag;

Alcune piccole osservazioni: il testo dei marcatore deve essere sempre o maiuscolo o minuscolo e nel caso facciate documenti molto grandi, potrebbe tornarvi utile inserire dei commenti per mantenere l'ordine con la sintassi <!-- Commento --> , i commenti non verranno letti nel codice e quindi saranno visibili solo dal creatore del documento e chi visualizza la sorgente della pagina
Facciamo un piccolo esempio per mettere in pratica ciò che abbiamo imparato sino ad ora:

Guida HTML

Sommario
CAPITOLO 1 - INTRODUZIONE HTML
CAPITOLO 2 - STRUTTURA BASE PAGINA WEB
CAPITOLO 3 - SFONDO DEL DOCUMENTO
CAPITOLO 4 - GLI ATTRIBUTI DI BODY

1. Introduzione all'HTML
innanzitutto che cosa vuol dire HTML? HTML vuol dire Hyper Text Markup Language ovvero un linguaggio che utilizza dei marcatori, detti anche tag, con cui si indica come i vari elementi sono disposti in una pagina web.
Le pagine web vengono visualizzate dal browser e si tratta di semplici pagine web in cui è possibile modificare il colore, la grandezza o il carattere del testo, inserire immagini all'interno della pagina, creare tabelle, creare campi di testo oppure creare collegamenti ipertestuali.
Ora che abbiamo spiegato a cosa serve l'HTML, passiamo alla fase successiva, la domanda è dove scrivere i marcatori? Semplice avete bisogno di un editor, ovvero un programma che vi permette di scrivere il codice e possibilmente correggere eventuali errori, il più famoso è il Blocco Note offerto da Windows o Gedit offerto da Linux, tuttavia questi editor di base permettono solo di scrivere dei codici, e se siete alle prime armi potreste aver bisogno di correzioni del codice, un esempio di editor che posso consigliarvi è il Notepad++, un editor di libero utilizzo che potrete scaricare gratuitamente cliccando sul collegamento ipertestuale.
Ora che abbiamo scelto il nostro editor di gradimento possiamo cominciare a utilizzare i marcatori all'interno della pagina, quindi nel prossimo capitolo faremo il nostro primo semplice documento in HTML!

Capitolo successivo>>

Edited by giratina23 - 7/4/2012, 18:23