Questa è una guida dedicata a chi si avvicina per la prima volta al mondo dell'html, infatti inserirò (per adesso) solamente comandi e tag base.
Iniziamo.
Per prima cosa scordate tutti i programmi visuali per la creazione di pagine in html, in quanto utilizzare questi programmi è come utilizzare power point, quindi non imparate niente.
Per cominciare aprite il blocco note o un qualsiasi editor testuale con codifica ascii pura.
Lasciando la pagina vuota salvate:
-in "Salva come:" selezionate l'opzione "Tutti i file";
-in "Nome file:" scrivete "index.html".
Fatto questo chiudete il blocco note e aprite il file creato: noterete che si aprirà col browser predefinito: anche se vuota, questa è la vostra prima pagina html.
Adesso chiudete il browser e fate click col tasto destro sul file --> modifica.
Adesso iniziamo a scrivere qualcosa in questa pagina.
Copiate e incollate nel file questo testo.
CODICE
<html>
<head><title> IN QUESTO SPAZIO INSERITE IL TITOLO DELLA PAGINA </title></head>
<body>
</body>
</html>
Salvate.
Adesso aprite il file. Noterete che è ancora bianco nonostante quello che avete scritto. Quello che avete scritto non è altro che la struttura base di una pagina html. Le parole scritte tra "<" e ">" si chiamano tag, e servono per dare le informazione necessarie al browser per visualizzare correttamente la pagina.
SPIEGAZIONE:
I tag "<html>" servono a far capire al browser che il documento è in linguaggio html. E' come dire al browser: "qui comincia un documento in html";
I tag "<head>" servono da intestazione alla pagina. Per adesso gli unici tag che andremo ad inserire in questo spazio sono i tag "<title>", necessari per dare un titolo alla pagina.
I tag "<body>" contengono il contenuto della pagina.Ricordate che ogni volta che aprite un tag, poi dovete anche richiuderlo ad esempio:
. Non tutti i tag, però, dovranno essere chiusi. Vedremo in seguito quali sono le eccezioni.
Adesso provate a scrivere qualcosa all'interno dei tag <body>, come ad esempio "HELLO WORD".
Salvate e aprite il file. Noterete la scritta. Però è brutta così ...forse è meglio abbellirla!
Riaprite il file e aggiungete questo:
CODICE
<font color="RED">HELLO WORD</font>
.
Riaprite il file e noterete che adesso la scritta è di colore rosso.
SPIEGAZIONE:
"color" è un attributo del tag "font".
Gli attributi servono a specificare meglio il "lavoro" che deve eseguire un tag.Gli attributi principali del tag "font" sono i seguenti:
size="grandezza carattere",
color="colore carattere",
face="font del carattere".
Esempio:
CODICE
<font color="RED" size="+3" face="Arial">Testo</font>
Adesso, dopo questa breve spiegazione iniziale per prendere un po di confidenza, inerisco una lista di tag con la relativa funzione.
ATTENZIONE:
Prima di inserire più di un tag per elemento, dovete sapere che l'ordine in cui vengono aperti dev'essere opposto all'ordine in cui li chiudete.
Esempio:
COSI' E' SBAGLIATO: CODICE
<font color="RED"><center>CIAO</font></center>
CODICE
<font color="RED"><center>CIAO</center></font>
Questo è un caso di tag annidati. Sbagliando l'ordine di chiusura potreste avere delle spiacevoli sorprese.
TESTO IN GRASSETTO:
TESTO IN CORSIVO:
TESTO SOTTOLINEATO:
TESTO A SPAZIATURA FISSA:
CAMBIARE GRANDEZZA DEL TESTO:
CODICE
<font size="+1">...</font> (da 1 a 7)
CAMBIARE IL COLORE DEL TESTO:
CODICE
<font color="RED">...</font> oppure <font color="#ff0000">...</font>
L'attributo "color" può essere utilizzando scrivendo il nome del colore in inglese e in maiuscolo, oppure scrivendo il codice del colore in esadecimale.
COLORE DI SFONDO DELLA PAGINA:
CODICE
<body bgcolor="RED"> oppure <body bgcolor="#ff0000">
CAMBIARE IL COLORE DEI LINK E DEL TESTO IN TUTTA LA PAGINA:
CODICE
<body bgcolor="#00000" text="#FFFF00" link="#FF0000" vlink="#800000" alink="#008000">
"text" è il colore del testo, "link" è il colore dei link, "vlink" è il colore dei link attivi, "alink" è il colore dei link visitati
INTERRUZIONE DI LINEA:
INTERRUZIONE DI PARAGRAFO:
IMMAGINI
IMMAGINI DI SFONDO:
CODICE
<body BACKGROUND="xxxxx.gif">
(o .jpg)
INSERIRE UN'IMMAGINE:
CODICE
<img SRC="xxxxx.gif" WIDTH=123 HEIGHT=456>
UTILIZZARE UN'IMMAGINE COME LINK:
CODICE
<a HREF="http://xxxxx"><img SRC="xxxxx.gif" WIDTH=123 HEIGHT=456></a>
TOGLIERE IL BORDO AD UN'IMMAGINE CHE FA DA LINK:
CODICE
<a HREF="http://xxxxx"> <img SRC="xxxxx.gif" WIDTH=123 HEIGHT=456 BORDER=O></a>
Nota che il codice specifica non solo il nome dell'immagine, ma dove si trova. Il codice dell'esempio precedente, "xxxxx.gif", significa che il browser cercerà l'immagine xxxxx.gif nella stessa cartella in cui si trova il documento html. Qui sotto trovi alcuni esempi che possono esserti d'aiuto:
SRC="xxxxx.gif" significa che l'immagine si trova nella stessa cartella in cui si trova il documento html che la richiama.
SRC="images/xxxxx.gif" significa che l'immagine si trova in una cartella posizionata sotto quella in cui si trova il documento html che la richiama. Ovviamente, si può scendere (o salire) di tanti livelli quanto sono necessari.
SRC="../xxxxx.gif" significa che l'immagine si trova in una cartella posizionata sopra quella in cui si trova il documento html che la richiama.
SRC="../../xxxxx.gif" significa che l'immagine si trova due cartelle sopra quella in cui si trova il documento html che la richiama.
SRC="../images/xxxxx.gif" significa che l'immagine si trova una cartella sopra quella in cui si trova il documento html che la richiama, a sua volta dentro un'altra cartella.
SRC="../../../other/images/xxxxx.gif" Non cercherò di spiegare questo caso a parole: spero che tu riesca a capirlo da solo. LINK
INSERIRE UN LINK:
CODICE
<a HREF="http://xxxxx">Testo del link</a>
INSERIRE UN LINK AD UN E-MAIL:
CODICE
<a HREF="mailto:xxxxx@xxx.xxx">Testo del link</a>
FORMATTAZIONE DEL TESTO
CENTRARE UN ELEMENTO O UN TESTO:
CODICE
<center>xxxxx</center>
CONTINUA...
Edited by xDSL - 22/8/2009, 14:03
