Dunque, iniziamo col dire che la PRIMA pagina che fate (ovvero la home page, ovvero la prima pagina che la gente vede quando fa: www.latuapagina.com) si deve per *forza* chiamare "index.html". Diremo anche che ogni sorgente di pagine html inizia con <html> seguito da
<head>. Per la precisione, <head> serve a definire un sacco di cose, ma voi
da bravi lettori fedeli a tRIpZ ve ne fotterete altamente e in <head>
includerete solo <title> che serve a dare un titolo alla vostra pagina.
Ricapitolando:
<html>
<head>
<title> /* ah un'altra cosa non mi cago per niente l'indentatura */
Comunque detto questo avete piu' o meno idea di questi tre concetti...Parliamo
di <title> e di come va usato..
Facile, <title>CIAO SONO UN TITOLO</title>.
Notate alla fine "</title>" che precisamente ha "/" davanti. Ebbene si! Ogni
tag va chiuso con "/" quindi dopo <title> che ci basta e avanza trucideremo pure <head> con </head>. Questo andra, ovviamente, fatto anche per <html> e tutto cio' che verra' a seguire...:D
Quindi:
<html>
<head>
<title>CIAO SONO UN TITOLO</title>
</head>
Con questo avete una pagina *vuota* che pero' ha un titolo...figo no?
Bene passiamo al corpo...<body>. In <body> noi definiremo principalmente 3 cose:
1) il colore di sfondo (bgcolor="")
2) il colore dei testi linkati (link="")
3) il colore che i testi linkati assumono DOPO averci clikkato su una volta
e tutto cio' si fa con:
<body bgcolor="colore" link="colore" vlink="colore">
Ora diciamo che i colori standard sono: blue, red, white, black (nero, ma siccome lo sfondo e' nero meglio se lo lascio bianco...:D), yellow, cyan e
altri che non mi ricordo..:D Comunque se guardate i sorgenti altrui vedrete che
loro NON usano questi colori ma cose tipo #f91818. Quelli sono un bordello da
usare ma se non altro con questo sistema si possono usare *tutti* i colori,
sfumature comprese. Non so se attualmente in giro ci sono delle liste per sti
colori, io personalmente le rare volte che li uso, mi servo di The Gimp (http://www.gimp.org) che fornisce per ogni campione di colore anche "l'hex triplet".
Ok torniamo a noi. Abbiamo appena definito body e le sue principali
caratteristiche ora vediamo che cosa ci va in <body>.
Ci tengo a precisare che io faccio LARGO uso di tabelle perche' le reputo le
uniche cose utili dell'html. Percio' vi introdurro' anche quelle adesso come
contenuto PRINCIPALE di <body>.
Una tabella si chiama con <table> e anch'essa puo' avere argomenti cosi' come
ne ha avuti body, tra i quali: colore di sfondo dell'interno della tabella,
grandezza della cornice, pare anche colore DELLA cornice ma me ne fotto perche'
su netscape tanto NUN SE VEDENO (tanto per parlare di "standard" html), spazio tra
le tabelle, grandezza, posizione.
Quindi facciamo un esempiuccio che si ferma alla tabella:
<html>
<head>
<title>CIAO SONO UN TITOLO</title>
</head>
<body bgcolor="white" link="blue" vlink="yellow">
<table align="left" bgcolor="green" width="700" cellspacing="2">
Ovviamente queste non sono le uniche cose che si possono mettere in <table>
ma per iniziare e' piu' che dignitoso. E comunque ricordate che io oltre quello
non vado perche' l'amore che ci metto nella costruzione di pagine web fa ride.
Percio' accontentatevi e se volete migliorare una volta aquisite queste basi
andatevi a spulciare i sorgenti altrui. Io cosi' ho fatto...
Allora, chiusa sta parentesi pietosa, passiamo al sodo. Che famo?
Famo che vi spiego <tr> e <td> che vanno usati esclusivamente NELLE tabelle
tenendo conto del fatto che: <tr> e' una riga e <td> una colonna.
Uhmmmmmmm ovvero??? hehehehehhehehhhehehehehiugtffguhfifgdsihfuohfywyfgtadsub
|
|
CIAO SONO TD 1 DI TR 1 (CIOE' COLONNA 1 DI RIGA 1) |
TD 2 DI TR 1 |
CIAO SONO TD 1 DI TR 2 (CIOE' COLONNA 1 DI RIGA 2 |
TD 2 DI TR 2 |
|
Spero che abbiate capito perche' una spiegazione migliore va al dila' delle mie
capacita' linguistiche...Uh Uh Uh! Vabbe' diciamo che <tr> sono le righe che
la vostra tabella puo' avere (infinite), e <td> sono le colonne che la vostra
tabella puo' avere (infinite anch'esse).
Ora anche i signori <tr> e <td> possono avere i loro argomenti, come bgcolor e cose simili. Io non e' che mo ve dico tutto. Alla fine
cerchero' di farvi un esempio abbastanza completo (sempre parlando delle MIE
conoscenze certo), ma punto anche sulla vostra astuzia nel capire certe cose.
Ora vediamo come fare per scrivere un testo, inserire un'immagine e insomma,
tutte quelle cose che si fanno in un sito. =)
SCRIVERE UN TESTO:
------------------
Il tag e' semplice:
<p align="left/center/right"><font size="num" color="colore">BILL, NON FAI TESTO SEI UN TESTICOLO</font></p>
Non e' troppo difficile fidatevi.
Se poi il testo lo volete linkare vi basti aggiungere dopo <font ecc> il tag:
<a href="nomefile o url">BILL, NON FAI TESTO SEI UN TESTICOLO</a></blabla>
BADATE BENE: che se voi state linkando il testo e in <body> avete definito
un link="colore" quello sara' il colore del testo, quindi e' inutile che lo ridefiniate in font tanto nessuno se lo fila. Percio' in campana mi raccomando.
Quindi, ricapitolando per i piu' cocciuti =) :
<p align="left/center/right"><font size="num"><a href="http://www.microsoft.com">BILL, NON FAI TESTO SEI UN TESTICOLO.</a></font></p>
Allora chiariamo subito il fatto che in <a href=""> io ora ci ho messo un url, e si puo' fare, ma ci si possono anche mettere dei nomi di files. Ad esempio: questo file che leggete ora si chiama "guidahtml.html", il tag che lo richiama e':
<p align="posizione"><font size="4"><a href="guidahtml.html">HTML</a></font></p>
<p align="..."> definisce la posizione di "HTML" che e' il testo linkato.
Il resto mi pare chiaro. Ora quello che voglio chiarire e' il fatto file/url
da mettere in <a href="">. Se si tratta di un url, ci mettete l'url preceduto
SEMPRE da "http://", quindi <a href="http://metrikz.cjb.net">. Se invece si tratta di un file allora le cose cambiano.
Se il file sta' nella stessa directory della pagina html alla quale state lavorando, farete:
<a href="file.estenzione"> senza fronzoli....
Nel caso il file si trovi in una sottodirectory allora passate il PATH...ovvero?
<a href="directory/file.estenzione"> tutto qua...niente de che...:D
Parliamo ora di come si inserisce un'immagine...hehheeh
INSERIRE UN'IMMAGINE, COME SI FA?
---------------------------------
Allora la sintassi e' una stronzata:
<img src="immagine.estenzione/url">
Notare che anche qua e' valido il discorso dell'url o dell'immagine in se e non
mi va di ripeterlo...e' tutto uguale, PATH compreso...scrollate su se avete
dubbi...:D
Ora per allineare un'immagine so che ci sono vari modi ma io personalmente ho
risolto il problema in tal modo:
<p align="left/center/right"><img src="nomeimmagine/url"></p>
figo...va bene cosi'...
E QUINDI?
---------
Ora il mio concetto di html si ferma qui. Ovviamente si possono fare MIGLIAIA
di altre cose ma a me sinceramente manco va di sapere come...:D Io sto
benissimo cosi', le mie pagine le faccio, i risultati mi piacciono quindi basta.
Ma tranquilli che non vi smollo cosi'...Ora faremo un bel giUoco.
Io vi smollo qua un bel sorgente di una pagina-modello del tipo che piacciono
tanto a me (che poi non sara' diversa da quella principale di questo sito),
tuttavia cerchero' di farla in modo piu' semplice e pulito...
Magari indentando..
NAAAAAAAAAAAAAAAAA!
Ok, tenete presente che cio' che sta in <!-- fhfjghdf --> e' un commento. Ne
mettero' alcuni nel sorgente per spiegarvi il tutto passo passo...
Orsu' impariamo giuocando....
Io qua vi metto due link:
1) il sorgente in formato txt CLICCA
2) la pagina come effettivamente appare al browser CLICCA
Fatene buon uso, apritele entrambe, guardate com'e' la pagina e leggetevi il
sorgente che ci ho messo tanti bei commentini.
Lo scopo che dovete raggiungere e' quello di a) capire il sorgente hehhehe buon a
fortuna.. b) riuscire a farne uno simile da soli... percio' occhio ai commenti
e scusate se non ho indentato ma proprio non mi ci trovo a farlo...
Spero in ogni caso d'essermi reso utile con questa guidina...:D
Ah, un'ultima cosa...Qualcuno di voi forse si chiedera': "ok ma quando me ce so'
raccapezzato co' tutta sta roba...COME LA METTO ONLINE???"
ehhehheheh ok ok, cari miei lettori e ammiratori (spero ammiratrici) presto faro'
anche una bella guidina di FTP....:D ma non ora...ciuz...
tRIpZ
|