ATTENZIONE: La seguente guida è stata creata su domanda dell'utente Xshel. La seguente è strutturata con l'appoggio di
Basi
Per andare a capo useremo <br>
Per centrare useremo <p align=”center”>
Per allineare a sinistra useremo <p align=”left”>
Per allineare a destra useremo <p align=”right”>
Struttura dei Tag
All'interno di ogni pagina è presente una serie di marcatori (i tag), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione. I tag vanno inseriti tra parentesi uncinate (< e >) e la chiusura del tag viene indicata con una "/" (è il simbolo comunemente detto "slash". Quindi: </TAG>). Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma:
Ecco un esempio, che serve a disporre un testo a destra:
dall'esempio è evidente che la struttura di un attributo è: attributo="valore"
Quindi in definita la struttura di un tag sarà:
Un tag non è strutturato secondo queste parole, sono solo degli esempi
Alcuni particolari tag non hanno contenuto - perché ad esempio indicano la posizione di alcuni elementi (come il tag delle immagini) -, conseguentemente questi tag non hanno neanche chiusura. La loro forma sarà dunque:
Ecco un esempio di immagine:
Width sta per la larghezza dell’immagine e height sta per la lunghezza di essa. In src scriviamo l’url dell’immagine (il sito su cui l’abbiamo hostata) e in alt scriviamo il testo che comparirà al passaggio del mouse.
I Commenti
Un'altra strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei "commenti" nei punti più significativi: si tratta di indicazioni per il webmaster, ma invisibili al browser. Un commento è strutturato in questo modo:
Il commento non è obbligatorio al corretto funzionamento di un Sito Web.
Maiuscolo o Minuscolo?
L’HTML è case unsensitive cioè che un codice puoi scriverlo in maiuscolo o in minuscolo senza che la pagina subisca mutamenti. Scrivere in minuscolo o in maiuscolo, quindi, non creerà problemi alla creazione della pagina.
Struttura di una Pagina
Per prima cosa inseriamo una riga che indica che stiamo utilizzando le specifiche del World Wide Web Consortium che riguardano il codice HTML:
Poi apriamo il nostro primo tag, che indica che quanto è compreso tra apertura e chiusura è in codice HTML:
Facciamo riferimento soltanto a due tag che devono essere presenti in questa sezione:
indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese).
Il title è il titolo della pagina e compare in alto sulla barra del browser.
Da quanto abbiamo detto la nostra prima pagina sarà questa.
D'ora in poi i vari tag che impareremo all'interno della guida andranno scritti all'interno del body, quando non sia indicato diversamente.
Colore e Struttura Testo
Un testo può essere colorato, fatto in grassetto, corsivo oppure sottolineato. Si può anche cambiare il carattere e la grandezza. Si può fare tutto quello che si fa con un testo con il celebre programma Word.
Questo è il codice che serve a cambiare il testo di dimensione, colore e carattere:
Per face si intende il carattere utilizzato, size è la dimensione e color il colore del testo. Si può scrivere il colore in inglese come black, white, blue, red oppure si possono usare i colori esadecimali come #000000 (nero) che troverai qui:
Per fare il testo in grassetto basterà mettere <b> all’inizio e </b> alla fine del testo
Per fare il testo sottolineato basterà mettere <u> all’inizio e </b> alla fine del testo
Per fare il testo in corsivo basterà mettere <i> all’inizio e </i> alla fine del testo
Sfondo Pagina
Lo sfondo di una pagina html è facile da fare: basta infatti modificare il tag <body> all’inizio della pagina con
Ho usato un colore esadecimale in questo caso (bianco). Il nostro sfondo sarà bianco.
Per mettere un’immagine basta invece scrivere
dove in url immagine metteremo l’url dell’host onde è uploadata l’immagine.
Le Table
Le tabelle sono una delle parti più importanti di tutto il codice HTML, Immaginiamo la nostra prima tabella come una griglia formata da righe e colonne. I tag necessari per creare una tabella sono:
<table> apre la tabella
<tr> “table row”: indica l’apertura di una riga
<td> “table data”: indica una cella all’interno di una riga
In questi nostri primi esempi supponiamo che ogni riga avrà lo stesso numero di celle.
L’attributo border permette di specificare di quanti pixel deve essere il bordo delle tabelle. Ad esempio:
<table border=”2”>
Lo useremo in questi esempi, altrimenti non percepiremmo la struttura di quanto stiamo costruendo. Ecco un primo esempio di tabella:
(Fai una prova per vedere come verrà: metti il codice qui sopra in un documento di testo e salvalo come prova.html – Poi aprilo)
Possiamo dare una dimensione alla table e quindi il nostro codice diventerà
Possiamo cambiare i seguenti valori: height=”20”, width=”60” e border=”1”.
Per non mettere il bordo alla tabella basterà inserire il valore 0 a border per farlo diventare quindi
Finisce qui la mia Guida: spero di essere stato d’aiuto.
Saluti,
Mourne
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Basi
Per andare a capo useremo <br>
Per centrare useremo <p align=”center”>
Per allineare a sinistra useremo <p align=”left”>
Per allineare a destra useremo <p align=”right”>
Struttura dei Tag
All'interno di ogni pagina è presente una serie di marcatori (i tag), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione. I tag vanno inseriti tra parentesi uncinate (< e >) e la chiusura del tag viene indicata con una "/" (è il simbolo comunemente detto "slash". Quindi: </TAG>). Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ecco un esempio, che serve a disporre un testo a destra:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
dall'esempio è evidente che la struttura di un attributo è: attributo="valore"
Quindi in definita la struttura di un tag sarà:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Un tag non è strutturato secondo queste parole, sono solo degli esempi
Alcuni particolari tag non hanno contenuto - perché ad esempio indicano la posizione di alcuni elementi (come il tag delle immagini) -, conseguentemente questi tag non hanno neanche chiusura. La loro forma sarà dunque:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ecco un esempio di immagine:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Width sta per la larghezza dell’immagine e height sta per la lunghezza di essa. In src scriviamo l’url dell’immagine (il sito su cui l’abbiamo hostata) e in alt scriviamo il testo che comparirà al passaggio del mouse.
I Commenti
Un'altra strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei "commenti" nei punti più significativi: si tratta di indicazioni per il webmaster, ma invisibili al browser. Un commento è strutturato in questo modo:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Maiuscolo o Minuscolo?
L’HTML è case unsensitive cioè che un codice puoi scriverlo in maiuscolo o in minuscolo senza che la pagina subisca mutamenti. Scrivere in minuscolo o in maiuscolo, quindi, non creerà problemi alla creazione della pagina.
Struttura di una Pagina
Per prima cosa inseriamo una riga che indica che stiamo utilizzando le specifiche del World Wide Web Consortium che riguardano il codice HTML:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Da quanto abbiamo detto la nostra prima pagina sarà questa.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
D'ora in poi i vari tag che impareremo all'interno della guida andranno scritti all'interno del body, quando non sia indicato diversamente.
Colore e Struttura Testo
Un testo può essere colorato, fatto in grassetto, corsivo oppure sottolineato. Si può anche cambiare il carattere e la grandezza. Si può fare tutto quello che si fa con un testo con il celebre programma Word.
Questo è il codice che serve a cambiare il testo di dimensione, colore e carattere:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
Per fare il testo in grassetto basterà mettere <b> all’inizio e </b> alla fine del testo
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Sfondo Pagina
Lo sfondo di una pagina html è facile da fare: basta infatti modificare il tag <body> all’inizio della pagina con
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Per mettere un’immagine basta invece scrivere
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Le Table
Le tabelle sono una delle parti più importanti di tutto il codice HTML, Immaginiamo la nostra prima tabella come una griglia formata da righe e colonne. I tag necessari per creare una tabella sono:
<table> apre la tabella
<tr> “table row”: indica l’apertura di una riga
<td> “table data”: indica una cella all’interno di una riga
In questi nostri primi esempi supponiamo che ogni riga avrà lo stesso numero di celle.
L’attributo border permette di specificare di quanti pixel deve essere il bordo delle tabelle. Ad esempio:
<table border=”2”>
Lo useremo in questi esempi, altrimenti non percepiremmo la struttura di quanto stiamo costruendo. Ecco un primo esempio di tabella:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Possiamo dare una dimensione alla table e quindi il nostro codice diventerà
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Per non mettere il bordo alla tabella basterà inserire il valore 0 a border per farlo diventare quindi
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Saluti,
Mourne
Ultima modifica:
