HTML (HiperText Markup Language) non è un linguaggio di programmazione ma un semplice sistema di contrassegno.
Per scrivere codice Html si può usare qualsiasi editor html testuale (Homesite, Frontpage, Dreamweaver ecc.) ma anche solo Blocco Note.
Il codice Html deve essere salvato con formato .HTM; un qualsiasi documento salvato in questo formato viene comunque visualizzato dal browser ma senza alcuna formattazione. Scopo dell’HTML è quello di fornire, attraverso comandi chiamati TAG una formattazione al documento, oltre all’inserimento di immagini ed altri elementi multimediali.
I TAG vengono riconosciuti ed interpretati dai browser web.
I tag HTML sono case in sensitive cioè assolutamente indipendenti dal maiuscolo e minuscolo.
Un documento HTML si divide in due parti fondamentali:
– l’intestazione
– il corpo del documento
Il corpo del documento contiene tutti gli elementi della pagina: il testo, le immagini e tutto quanto viene materialmente visualizzato dal browser.
Al contrario l’intestazione contiene una serie di informazioni necessarie al browser per una corretta interpretazione del documento, ma non visualizzate all’interno dello stesso (es. titolo della pagina, termini chiave per i motori di ricerca ecc.).
HTML
Tutti gli elementi di un documento Html sono compresi all’interno dei marcatori <HTML> </HTML> che aprono e chiudono il file.
<HEAD>
Gli elementi <HEAD> </HEAD> sono posti dopo l’apertura del tag <HTML> e racchiudono l’intestazione vera e propria del documento.
<TITLE>
L’elemento <TITLE> </TITLE> è il più utilizzato all’interno del tag <HEAD> in quanto fornisce il titolo della pagina; il titolo viene visualizzato dai browser nell’intestazione della pagina.
META
I motori di ricerca sono una risorsa indispensabile per chi cerca informazioni sulla rete. Figurare all’interno di tali motori di ricerca è fondamentale per chi crea pagine web. Oltre che essere inseriti nei motori di ricerca è importante figurare tra i primi siti che vengono visualizzati nella ricerca. Per rispondere a queste necessità si utilizzano i META tag, stringhe di codice che figurano in testa al documento, tra i comandi <HEAD> e </HEAD> e che vengono, per prime, lette dai motori di ricerca.
<META name=”keywords” content=”Caprioli.info, corso HTML”>
Le keywords sono le parole chiave che sinteticamente descrivono una pagina web.
<META name=”author” content=”Nome e Cognome”>
riguardano l’autore della pagina web
<META name=”description” content=”la mia prima homepage”>
descrizione come testo che apparirà in seguito alla ricerca
<META name=”generator” content=”blocco note”>
nome dell’editor con cui il documento è stato generato
<META name=”robots” contents=”noindex”>
serve se per qualche ragione non si vuole che la pagina venga indicizzata nei motori di ricerca
<META HTTP-EQUIV=”refresh” content=”5; url=seconda.htm”>
è il meta tag che permette il refresh della pagina; ciò vuol dire che la stessa pagina o una differente può essere lanciata dopo un certo numero di secondi che noi impostiamo
RIEPILOGO
<HTML>
<HEAD>
<META name……..
<META name……
<TITLE> La mia prima pagina html </TITLE>
</HEAD>
</HTML>
CORPO DEL DOCUMENTO
Il corpo del documento inizia dopo </HEAD>.
I tag che lo delimitano sono <BODY> e </BODY>
E’ la parte più importante perché tra questi tag viene posto tutto ciò che verrà visualizzato. Se all’interno del BODY non viene specificato nulla di diverso il file creato avrà uno sfondo bianco, le scritte saranno in Times New Roman nero e allineate a sinistra: sono i valori predefiniti ai quali il browser fa riferimento se non trova nessun comando che ne specifichi di diversi.
Possiamo intervenire su buona parte di questi valori:
<BODY BGCOLOR=”#FFFFFF” TEXT=”BLUE”>
L’attributo Bgcolor indica il colore da usare come sfondo. I valori possono essere inseriti in codice RGB (esadecimale) e alcuni in lingua inglese. L’utilità dei colori esadecimali si ha dove non si vuole un colore standard.
L’attributo TEXT indica il colore del testo per tutto il documento, se non specificato diversamente.
<BODY BACKGROUND=”immagine.gif”>
serve per impostare un’immagine di sfondo.
<BODY LINK=”GREEN” VLINK=”RED” ALINK=”ORANGE”>
Gli attributi LINK VLINK e ALINK servono per cambiare le impostazioni di default per i colori rispettivamente dei link, dei link visitati e dei link attivi.
<BODY LEFTMARGIN=”0″ TOPMARGIN=”0″>
Gli attributi indicati servono per eliminare le impostazioni del browser che lascia sempre un po’ di margine a bordo pagina.
<BODY LANG=”IT”>
L’attributo LANG serve ai motori di ricerca per sapere in quale lingua è scritta la pagina web.
<FONT FACE=”arial” SIZE=”5″ COLOR=”red”> caratteri da formattare </FONT>
questo tag serve per definire, per alcune parti di testo, il tipo di font utilizzato (Arial, Courier, Times New Roman, Verdina, ecc.) , la grandezza (da 1 – piccolo a 7 – grande) e il colore del testo.
<B> testo grassetto </B>
<I> testo corsivo </I>
<U> testo sottolineato </U>
<STRIKE> testo barrato </STRIKE>
<SUB> testo pedice </SUB>
<SUP> testo apice </SUP>
<MARQUEE> testo scorrevole </MARQUEE>
<BR> manda il testo a capo
<DIV ALIGN=”left”> testo allineato a sinistra </DIV> (right o center per allineamento a destra o centrato – Il testo che segue la chiusura del DIV viene mandato a capo)
<P ALIGN=”justify”> testo giustificato </P> (come per il DIV ma con la possibilità del testo giustificato)
<HR align=”center” size=”2″ width=”400″ color=”red” noshade>
serve per inserire una riga orizzontale; noshade elimina l’effetto 3D
Per inserire un’immagine nella pagina si usa:
<IMG SRC=”nomeimmagine.ext” WIDHT=”400″ HEIGHT=”200″ BORDER=”0″ ALIGN=”CENTER”>
Il nome dell’immagine deve essere seguito dalla sua estensione (es. foto1.jpg, immagine.gif, immagine2.png) e se necessario preceduto dal percorso che indica la cartella in cui si trova l’immagine.
Gli attributi WIDTH e HEIGHT servono per indicare rispettivamente la larghezza dell’immagine e la sua altezza. Possono essere indicati in pixel o in % (width=”80%”)
Se si usa in questo tag l’attributo ALIGN il testo viene allineato con l’immagine
(ALIGN à left/center/right/top/bottom/middle)
Gli attibuti HSPACE = ” ” e VSPACE=” ” (horizontal space – verticale space) impostano lo spazio che si vuole lasciare tra l’immagine e tutto il resto.
ELENCHI NUMERATI
Gli elenchi numerati sono costituiti dai tag di apertura e chiusura <OL> </OL> e tanti tag di apertura per quante sono le voci di menu <LI>.
Es.
<OL>
<LI> prima voce di menu
<LI> seconda voce di menu
<LI> terza voce di menu
</OL>
Ad ogni LI il testo va a capo automaticamente.
Se non stabilito diversamente il tipo di elenco ordinato che il browser visualizza è numerato (es 1. 2. 3.)
<OL TYPE=A> si ottiene un’indicizzazione alfabetica maiuscola
<OL TYPE=a> si ottiene un’indicizzazione alfabetica minuscola
<OL TYPE=I> indicizzazione con numeri romani maiuscoli
<OL TYPE=i> indicizzazione con numeri romani minuscoli
ELENCHI PUNTATI
Funzionano come gli elenchi numerati, ma i tag di apertura e chiusura sono <UL> e >/UL>
ES.
<UL>
<LI> prima voce di menu
<LI> seconda voce di menu
<LI> terza voce di menu
</UL>
Se non definito diversamente l’elenco è costituito da una serie di pallini.
<UL TYPE=disc> definisce un elenco con pallini pieni
<UL TYPE=circe> definisce un elenco con pallini vuoti
<UL TYPE=square> definisce un elenco con quadratini pieni
LA TABELLA
L’elemento <TABLE> contiene tutte le informazioni della tabella, costitutita dalle righe <TR> e dalle singole celle <TD>.
ES. Tabella composta da due righe e due colonne
<TABLE>
<TR>
<TD>   </TD>
<TD> </TD>
</TR>
<TR>
<TD>   </TD>
<TD> </TD>
</TR>
</TABLE>
Gli attributi WIDTH e HEIGHT servono per specificare rispettivamente la larghezza o l’altezza della tabella, ma anche delle singole righe o celle.
Es.
<TABLE WIDTH=400>
In questo caso la dimensione della tabella è espressa in pixel, ma può anche essere espressa in percentuale
<TABLE WIDTH=80%>
L’attributo BORDER visualizza un bordo intorno alla tabella e ad ogni singola cella. Se il valore di border è 0 non sarà visualizzato nessun bordo.
<TABLE BORDER=1>
L’attributo ALIGN serve per allineare il testo all’interno delle celle
<TD ALIGN=”center”>
Gli attributi ROWSPAN e COLSPAN consentono di creare celle che si espandono rispettivamente su più righe e su più colonne.
<TD COLSPAN=2>
COLLEGAMENTI IPERTESTUALI
Un ipertesto è un modo per formattare documenti in forma non sequenziale, grazie ai collegamenti ipertestuali (link) che permettono di saltare da un punto all’altro del documento o da un sito all’altro senza soluzione di continuità.
Per inserire nei documenti Html dei link si utilizza il tag
<A HREF> </A>
I link possono rimandare ad un particolare URL:
<A HREF=”http://www.caprioli.info“> Clicca qui per visitare il sito</A>
oppure rimandare ad una pagina dello stesso sito:
<A HREF=”pagina2.htm”>clicca qui per la nuova pagina </A>
oppure rimandare ad un punto particolare dello stesso documento
<A HREF=”#segnalibro”> trova il punto esatto </A>
in questo caso va inserito il tag <A NAME=”segnalibro”> nel punto specifico del documento al quale ci si vuole collegare.
L’attributo TITLE serve per definire un testo di commento attivato al passaggio del mouse.
<A HREF=”seconda.htm” TITLE=”Non perderti questa novità”> vai alla seconda pagina </A>
E’ possibile inserire collegamenti verso indirizzi e-mail: ciccando sul seguente link viene automaticamente aperto il programma di posta predefinito, con impostato il destinatario del messaggio:
<A HREF=”MAILTO:info@caprioli.info”> Scrivici per informazioni sul corso </A>
FORM
Sono utilizzati perché l’utente possa interagire con il sito ad esempio spedendo un commento, compilando un modulo di iscrizione, rispondendo a sondaggi, inserendo password e login per accedere ad aree riservate.
I tag che aprono e chiudono il modulo form sono <FORM> </FORM>. Non è possibile inserire un modulo interno ad un altro, cioè non sono permesse nidificazioni.
Il tag di base per la definizione degli elementi di un form è:
<INPUT>
e viene utilizzato per aggiungere pulsanti, menu di scelta, password ecc.
<INPUT TYPE=”text” NAME=”nome” MAXLENGHT=”40″ SIZE=”33″ VALUE=”Il tuo nome”>
crea tipici campi di testo ; maxlenght indica il num.max di caratteri inseribili, size la larghezza della stringa all’interno della pagina e value il testo di default all’interno della stringa
<INPUT TYPE=”checkbox” NAME=”socio” VALUE=”yes” CHECKED>
viene utilizzato per informazioni del tipo si/no; crea delle piccole caselle da spuntare. Value impostato a yes indica che all’inizio la casella è spuntata. Cheched controlla lo stato iniziale della casella.
<INPUT TYPE=”radio” NAME=”giudizio” VALUE=”sufficiente”>
<INPUT TYPE=”radio” NAME=”giudizio” VALUE=”buono”>
<INPUT TYPE=”radio” NAME=”giudizio” VALUE=”ottimo”>
Ha funzioni simili a quello visto in precedenza ma presenta più scelte possibili. Selezionando una voce tra quelle presenti, qualora abbiano tutte il name identico, si deselezionano automaticamente le altre.
<INPUT TYPE=”SUBMIT” VALUE=”Spedisci”>
E’ il classico bottone che invia il form con tutti i suoi contenuti.
<INPUT TYPE=”RESET” VALUE=”Annulla”>
Bottone che reimposta l’intero form eliminando i dati inseriti.
<TEXTAREA COLS=40 ROWS=5 WRAP=”phisical” name=”commento”> </TEXTAREA>
E’ utilizzato per commenti che prevedono l’inserimento di molto testo. Wrap phisical stabilisce che qualora il testo inserito superi la larghezza della finestra venga automaticamente mandato a capo.
<SELECT SIZE=1 COLS=4 NAME=”giudizio”>
<OPTION selected Value=nessuna>
<OPTION value=sufficiente> sufficiente
<OPTION value=buono> buono
<OPTION value=ottimo> ottimo
</SELECT>
Select è un elemento che permette la creazione di elementi a discesa.
Spero come sempre di esservi stato utile.
Al prossimo articolo.
Cr1sS