PDA

View Full Version : [Corso HTML Base] - Lez. 02 - L'area Head e l'area Body


Kugel
09-07-2002, 17:36
Cominciamo con l'abc dell'html :)
Aprite un editor di testo che vada dal notepad di windows al textpad ... o quello che preferite.


Un file html non é altro che un file di testo scritto con un particolare linguaggio non compilato.
Quindi una volta che lo scrivete ... il file html é già pronto per funzionare :)

Come prima cosa create un nuovo file e salvatelo col nome homepage.htm

[b]Da che sezioni é composto un file html ?
1 macro sezione più 2 sottosezioni


<html>

<head>
</head>

<body>
</body>

</html>


Perché si scrive "rientrato" e non tutto a partire dal margine sinistro del foglio ?

Si chiama "indentazione", é la cosa piu' comoda esistente al mondo per tenere sempre sott'occhio a che punto siete dello script html.
Se avete dei tag con sottotag .. é buona regola indentare la seconda coppia di tag e mettere il tag di apertura esattamente incolonnato col relativo tag di chiusura.

A cosa serve la sezione Head ?
E' l'intestazione della pagina.
Qui si inserisce la coppi a di tag per impostare il titolo che comparirà in alto a sinistra nella finestra del browser quando verrà caricata la nostra pagina.

<title>HomePage del forum WebEditing - Powered by IGZ</title>


E poi ? Altri tag utili che vanno nell'intestazione ?

zi zi :)
Ci sono i tag "meta" ... quelli che indirizzano il motore di ricerca e lo facilitano nel suo compito (a noi cmq interessa solo la fase in cui lo "indirizzano" visto che gli fanno cercare quello che diciamo noi e ci fa apparire con la descrizione che volevamo noi :)
Description
Se il motore di ricerca vi "seleziona", allora andrà a mettere come desrizione per il link al vostro sito .. quella che voi stesso gli avrete indicato.
<META NAME="DESCRIPTION" CONTENT="HomePage del forum WebEditing - La risposta di IGZ alle tue domande su come costruirti una su internet">

Il motore di ricerca quando vi metterà nel suo archivio, farà un'associazione tra il vostro sito ed alcune parole in esso contenute ... a meno che non siate voi a dirgli a che parole di ricerca volete essere associati.
<META NAME="KEYWORDS" CONTENT="IGZ , webediting , forum , internet , html , javascript , css , comunità , domande">

Volete che chi sta guardando la vostra pagina, dopo 10 secondi si ritrovi a vedere l'home di IGZ ?
<meta http-equiv="REFRESH" content="10; url=http://www.igz.it">

Naturalmente basta che al posto di http://www.igz.it mettiate il link esatto alla vostra pagina .. e avrete un "refresh" automatico ogni 10 secondi [portatelo almeno a 60 secondi se non volete avere degli utenti che vogliono linciarvi :look:

A cosa serve la sezione Body ?
E' la vostra pagine internet vera e propria.
Se l'head é l'intestazione, una specie di "etichetta" ... la sezione body invece é il "corpo" .. i "contenuti".

Nella sezione body tutti i tag sono importanti e sono veramente un'infinità,
li analizzeremo volta per volta.
Adesso é importante che sappiate le "opzioni" del tag Body

<body background="file_di_sfondo.gif" bgcolor="#FF00FF" text="#008000" link="#808080" vlink="#808000" alink="#00FF00" leftmargin=0 topmargin=0>
background --> Mettete una gij, un jpg, e ve lo imposterà come tema di sfondo
bgcolor --> in esadecimale, é il colore di sfondo della vostra pagina
text --> il colore di default per i testi
link --> il colore di default per i link che non avete visitato
vlink --> il colore di default per i link che avete già visitato
alink --> il colore di default per i link quando ci passate sopra col mouse (niente da fare, questo non funzia ... vi spiegerò nelle prossime lezioni come realizzarlo con i "fogli stile" :) )
leftmargin --> margine sinistro [in pixel]
topmargin --> margine alto [in pixel]

Ok, so come impostare di default il colore dei link .. ma come si fanno i link ?
<a href="http://www.igz.it" target="_blank">IGZ</a>
href="" --> il link alla pagina che volete venga aperta
target="" --> _blank apre la pagina in una pagina nuova, _self (opzione di default) carica la pagina andando a sostituire quella in cui c'é il link

Questo tanto per darvi tutti i dati per fare esperimenti con quello che vi ho appena spiegato dell'head e del body :)

La prossima volta ci saranno i tag piu' conosciuti dell'area Body
Per qualsiasi problema o dubbio --> siamo qui apposta per darvi una mano :)

Indice delle Lezioni (http://forum.igz.it/showthread.php?s=&threadid=41418)

:hello:

Shar
09-07-2002, 18:12
come li uppo sul server?

ad esempio io ho fatto questo:

<html>

<head> <title>Home di Kaly - Un saluto a tutti gli utenti</title>
<META NAME="DESCRIPTION" CONTENT="HomePage Amatoriale - Tutto quello che cerchi e' quì">
<META NAME="KEYWORDS" CONTENT="Internet, Giochi, Discussioni">
<meta http-equiv="REFRESH" content="50; url=http://www.virgilio.it">
</head>

<body><body background="file_di_sfondo.gif" bgcolor="#FF00FF" text="#008000" link="#808080" vlink="#808000" alink="#00FF00" leftmargin=0 topmargin=0>
<a href="http://www.igz.it" target="_blank">IGZ</a>

</body>

</html>

Kugel
09-07-2002, 18:22
Allora, se hai seguito il mio consiglio [e so che l'hai fatto :kiss: ] ti sei registrata uno spazio web su un host che ti da anche l'accesso ftp.

Adesso devi procurarti un client ftp per collegarti via ftp al tuo sito.
ti consiglio www.ftpx.com [é gratis :) ]

Quando ti sei registrata, l'host dovrebbe averti mandato una email coi dati per il login via ftp.

Ti serve sapere

url --> di solito é ftp.nomedominio.estensione .. ma non é detto.
porta --> di solito é la 21 [nel 99% dei casi]
nome utente e password --> quelli della registrazione

Quando hai recuperato questi dati, li inserisci nel client ftp che hai deciso di utilizzare ... e stabilisci la connessione.

Una volta connessa per uploadare ti basterà trascinare i file dalla cartella del tuo PC ... fino al riquadro del client ftp (consideralo come una cartella "virtuale" ).

In bocca al lupo :D

Shar
09-07-2002, 18:25
e poi per l'url della pagina uploadata?

Kugel
09-07-2002, 18:29
Quella dovresti saperlo tu che hai fatto la registrazione :)
dovrebbe essere sulla famosa email che ti hanno mandato queli dell'host

Shar
09-07-2002, 18:32
io la uppo ma non la trovo :(

Shar
09-07-2002, 18:34
Your URL to access your site is: http://www.websamba.com/sharveng




:gha:

Shar
09-07-2002, 18:39
http://www.websamba.com/sharveng/homepage.htm.doc se metto questo url me lo fa scaricare :gha:



http://galileo.spaceports.com/~sharveng/homepage.htm.doc se metto questo invece non si capisce un fico secco :look:

thelyn
09-07-2002, 19:10
shar, kugel ha messo il meta tag refresh solo x interesse accademico di chi segue il corso, nn è obbligatorio.. io lo toglierei, a meno che nn vuoi ke dopo 50 secondi automaticamente il browser lasci la tua pagina x andare su virgilio..

cPT_pELLE
09-07-2002, 20:54
Originally posted by Shar
http://www.websamba.com/sharveng/homepage.htm.doc se metto questo url me lo fa scaricare :gha:


prova a togliere l'estensione .doc

Shar
09-07-2002, 23:11
peggio :)

Debian Hawk
10-07-2002, 14:58
scusa una cosa... basta che uppi la tua pagina chiamandola index.html, e cosi te la dovrebbe far vedere cliccando sul'url che ti hanno assegnato :)

Kugel
10-07-2002, 15:28
[dopo breve spiegazione via icq :look: ]

Avevi creato il file con wordpad, il file era stato salvato con estensione .doc e quindi il wordpad aveva inserito di suo tutti i suoi codici di formattazione del testo [ :gha: ]

Riscrivi il codice [o copia/incollalo :) ] con il notepad di windows o col textpad [ www.textpad.com ]
Salvalo direttamente da quei programmi mettendogli l'estensione .htm (quindi non salvarlo come .txt per poi rinominarlo).

Ti dico di lasciar perdere la "rinominazione" perché al 90% mi sa che hai impostato windows per nascondere le estensioni piu' comuni dei file, per questo non vedi il .doc e quando cerchi di rinominare file.doc in html .. ti vien fuori una roba del tipo file.html.doc

C'ho imbroccato ? :)

Shar
10-07-2002, 15:34
si' hai imbroccato :angel:

Kugel
10-07-2002, 15:37
:cool:

Tass O Mann
10-07-2002, 20:11
Mi sembra di esser tornato in terza superiore! (1994) :drool:


:silly:

Debian Hawk
11-07-2002, 10:38
...hem.. proff posso andare in bagno????

Kugel
11-07-2002, 10:42
Prima mi fai un esempio di refresh automatico della pagina ogni 5 minuti
Con nella pagina un link che di default (utilizzando le roprietà del tag body) é verdino .. ma diventa giallo quando ci passi sopra il mouse
:angel:

Provate anche voi e ditemi se vi riesce o avete problemi :D

Shar
11-07-2002, 15:37
nono..

andiamo male.. :rolleyes:
come si fa?

Kugel
11-07-2002, 16:19
Per avere il codice dei colori ...

Potete usare la striscia dei colori del pannello delle reply dei forum di IGZ :)

http://www.betavector.com/public/webediting/barra_colori.gif

Col mouse scegliete il colore poi o siete rapidi e vi ricordate le 6 cifre del codice ... oppure fate doppio click così ve le visualizza :)

il codice colore é sempre nella forma

#XXXXXX

Se vi servono altri indizi su come fare ... son sempre qui ... cmq ormai non vi manca proprio niente per arrivare alla soluzione :)

:hello:

Shar
11-07-2002, 16:41
metto nell' "alink" il colore che vorrei apparisse quando si passa con il mouse ma diventa giallo solo dopo che clicco sul link..


non capisco pure come si fa a mettere nel background una jpg e come si cambia grandezza e stile del testo...



:angel:

Kopl
11-07-2002, 18:06
per me sei partito male, gli hai incasinato un pò con i meta ed alcune caratteristiche del body.

Ricorda, nn gli devi spiegare tutto :nono:
ma dargli l'impostazione, è poi la vera voglia di sapere e di provare a fare cose nuove che gli farà scoprire nuovi tag e nuove proprietà :D

E voi studenti:
ogni pagina deve essere una sfida, dovete riuscire a farla meglio di tutte le precedenti.
Non imparerete mai a scrivere in html, soprattutto se usate ScazzoPage e Nightmareweaver (in questo caso nn imparate proprio nulla), voi sarete solo a conoscenza di questo grande mondo.
Cercate sempre di fare cose nuove, provate, fate il passo più lungo della gamba, altrimenti nn vi muoverete mai!

:cool: :cool:

le ridò la parola professore

:hello:

Kopl
11-07-2002, 18:09
Originally posted by Shar
e come si cambia grandezza e stile del testo...




cvd

oltre a mettere le immagini nel body :p


vabbè torno a flash :silly:

Kugel
12-07-2002, 00:06
Intanto fanno esperimenti per capire come funziona ... odio dare "la pappa pronta" :D
altrimenti si riduce ad una "guida" che potrebbero tranquillamente scaricarsi a fine corso e tanti saluti :gha:

Almeno così ci mettono un po' del loro e chiedono info sui vari problemi che trovano ;)

A volte da piu' soddisfazione capire da soli l'ultimissimo passaggio ... piuttosto che trovarsi il tutorial in modalità "aggiungere acqua e consumare freddo" :gha:

Cmq immagini e modifiche di grandezze e colori dei testi ... la prossima volta :D

Fai te che d'ora in poi vi sparerò anche degli errori .. vuoi perché scrivo alle 3 del mattino ... vuoi perché sono un po' :devil: e voglio vedere chi mi viene a dire "ma crispio non funziona !!!"

:hello:

~Hannibal~
12-07-2002, 13:33
http://hannibalone.supereva.it

So che supereva non è buono ma avevo lo spazio pronto qui.....

Shar
12-07-2002, 19:55
ma non diventa giallo quando ci passo sopra :(

Kugel
14-07-2002, 15:38
Il cambio di colore lo realizzaremo con i "fogli stile" (tra un bel po' di lezioni :) )

prima della fine di agosto vi posterò le lezioni su:
- manipolazione dei caratteri
- formattazione del testo
- inserimento delle immagini

Poi come progettino per il mese d'agosto vi assegnerò da fare una paginetta semplice semplice con un tema "consigliato" oppure a tema libero per chi lo preferisce :D

Shar
15-07-2002, 00:58
si' pero' ad agosto vai piano che si va in vacanza :angel:

Debian Hawk
15-07-2002, 09:39
No Kaly tu non puoi andare in vacanza devi studiare :D

LouD
18-07-2002, 14:58
ehm...io ho fatto tutto quello come avete detto nella lezione...ma l'unica cosa ke si vede nella homepage è il link ad IGZ...lo sfondo nn si vede :(

thelyn
18-07-2002, 15:14
postate anke i link alle vostre pagine quando nn vi funge qualcosa, così controlliamo l'html

LouD
18-07-2002, 18:40
praticamente nella home c'è solo il link ad IGZ :D
cmq il link è questo (http://auron.0catch.com/homepage.htm)

thelyn
18-07-2002, 18:46
certo ke lo sfondo nn va.. hai messo due tag body.. O___O

cmq cambia host, dato ke questo di adesso ti ci mette un sacco di spazzatura nel codice..

LouD
18-07-2002, 19:05
questo era uno dei pochi ke dava 100 mega gratis... :(

LouD
18-07-2002, 19:15
tutti quelli da 100 mega sono uguali cambia solo il nome....se no vado su xoom ke mi sembra meglio....ke ne dici?

Kugel
20-07-2002, 00:06
Lezione 01 --> Spazio Web (http://forum.igz.it/showthread.php?s=&threadid=41416) :D
Qui trovi il link ai vari servizi di hosting e qualche consiglio sulle caratteristiche che dovrebbe avere in base a quello che dovete farci :)

Rapsody
04-08-2002, 22:55
nn ho capito il meta tag..
allora io sono iscritto a digilander e se inserinsco quella stringa con la desrizione automaticamente digiladner trova il mio sito??

Kugel
06-08-2002, 13:44
Più che "trovarlo", direi che riescono a "catalogarlo".
E cmq non solo digilander ... ma tutti i motori di ricerca che continuamente spazzano la rete alla ricerca di nuovi siti utilizzando gli "spider" (appositi programmi).

Una volta che questi spider arrivano sul tuo sito ... si arriva a un bivio:

1. Il tuo sito é conforme ai loro standard e quindi ti inseriscono nel loro archivio

2. Il tuo sito non é conforme ... e lo scartano

Chi decide se é conforme o no ?
Degli algoritmi decisionali come
é molto linkato ? si --> 100 pti , no --> 0 ... é aggiornato spesso ? si --> 40 pti , no --> 0"
e via dicendo.
Ma a volte anche da persone fisiche che giudicano i siti e li "promuovono" o "bocciano".

Se passi la fase del "conforme" ... "non conforme"
Allora vieni inserito nel loro archivio.

A questo punto però lo spider si chiede 3 cose.

1. Come lo inserisco ? Che titolo gli do ?
Se hai messo il tag <title> </title>
lo spider gli assegnerà quel nome ... altrimenti ti metterà un bruttissimo "Untitled"

2. Che descrizione metto del sito ?
Se hai mesos il meta tag della Description --> allora mette quello
Se non l'hai messo ... legge la pagina html e mette un po' di parole a caso che trova li dentro, link che hai scritto, nomi di immagini ... insomma ... si arrangia per riempire il campo "descrizione" visto che tu non gli hai indicato niente in particolare :)

3. Questo sito quando lo segnalo ? Ci sono particolari parole che se vengono ricercate ... devono riportare a questo sito ?
Se hai messo il meta tag Keyword --> allora mette quelle (+ alcune che trova lui girando per il sito)
Altrimenti ... mette quelel piu' frequenti o quelle che secondo il suo algoritmo decisionale sono le piu' indicate per identificare il tuo sito nella rete.

Conclusione:
mettete sempre
Il titolo, il meta tag della descrizione e il meta tag delle parole chiave.

Spero di essere stato esauriente, se hai ancora dei dubbi.. siam qui :D

:hello:

Aerys
24-09-2002, 23:32
non ho capito i codici dei colori del testo ad esempio...come fai a sapere quale codice corrisponde a quale....

Kugel
25-09-2002, 00:27
Quasi quasi ... ci faccio una lezione che spieghi un po' in profondità quest'argomento ;)

Grazie per la domanda ...
se non l'avessi posta ... mi sarebbe sfuggito un argomento perfetto per un corso di HTML di Base :)

---> [Corso HTML Base] - Lez. 03 - I codici colore (http://forum.igz.it/showthread.php?s=&threadid=59307)

:hello:

~Hannibal~
05-10-2002, 14:10
Ciao!
Ho un problemino...2 domande:
1: Leftmargin e topmargin...le modifico ma nel sito nn cambia niente...quindi a che servono?
2: Come faccio a staccare il testo dal bordo e dall'altro???credevo fossero top e left margin ma nn cambia niente..
ciao e grazie!!
ah se ti dovesse servire il sito è questo. (http://www.hannibalone.supereva.it)

~Hannibal~
05-10-2002, 14:37
Problemi risolti...avevo sbagliato qualcosa io prima mi sa...
un altra cosa, come faccio a mettere le scritte una sotto l'altra e non tutte sulla stessa riga?

Kugel
05-10-2002, 16:26
Per avere un "ritorno a capo" come nell'esempio:
Web Editing
powered by IGZ

Bisogna usare il tag html <br>
Questo tag crea quella che viene chiamata "interruzione di linea" :)
Una volta che usate il tag <br> , non é necessario che andiate a capo anche nel codice ... se lo si fa ... di solito é solo per essere piu' chiaro una volta che tornate a leggere il codice per sistemare qualche cosa.

Quindi il codice html per generare la scritta dell'esempio sarà
Web Editing<br>powered by IGZ

Per altre info che non riguardano la lezione,
aprite pure un topic nuovo sull'argomento ;)

:hello:

~Hannibal~
05-10-2002, 20:11
thx ora provo!
:)