PDA

View Full Version : [Corso HTML Base] - Indice delle Lezioni


Kugel
19-06-2002, 00:54
Come funziona il corso ...
ci sarà un topic riassuntivo [questo] in cui gli utenti non potranno postare e che conterrà una lezione per reply.

In contemporanea verrà aperto un topic per ogni lezione, così potrà essere meglio sviscerata ma non si perderà mai il filo logico .. almeno si spera :)

Andiamo a incominciare ... :elfhat:


[Corso HTML Base] - Lez. 01 - Lo spazio web
[Corso HTML Base] - Lez. 02 - L'area Head e l'area Body
[Corso HTML Base] - Lez. 03 - I codici colore

Kugel
19-06-2002, 00:56
Registrare uno spazio web (gratuito ;) )

In questo link troverete una tabella riassuntiva (http://www.easystang.com/linkfreehost.asp) molto ben fatta che vi illustrerà un buon numero di hosting gratuiti specificando le caratteristiche per ognuno.

Quello che vi consiglio é
Lo spazio da voi scelto deve avere:

1. La possibilità di fare upload via ftp (poi vi spiego come si fanno gli upload/download e che client ftp gratuiti usare)
2. possibilmente nessun banner che compare obbligatoriamente
3. un buon numero di MB di spazio web.

Per il punto 3 ...

tutto dipende da che genere di sito volete mettere in piedi.

Se lo considerate un "contenitore" di file (legali, in caso di file illegali l'hosting ha tutto il diritto di "svuotarvi l'ftp e prendere i provvedimenti che meglio crede) ... allora il "buon numero di MB" é dai 100 in su.

Se invece volete farne la vostra homepage ... allora una 20ina di mega dovrebbero bastarvi per un bel po' di tempo.

Supporto ASP/PHP/CGI ...

Nel 90% dei casi:
ASP ---> Server Microsoft
PHP ---> Server Linux

in un numero molto ridotto di casi si ha poi:
ASP + PHP ---> Server Microsoft ... ma capita raramente in un hosting gratuito

Ricordatevi che poi c'é sempre quest'opzione ...

Registrate uno spazio web che supporta le ASP ...
uno che supporta il PHP ...
e uno spazio web gratuito da 100MB

Naturalmente ... tutti e 3 questi spazi web dovranno essere con accesso ftp e senza banner "obbligati" da chi vi hosta ;)

La vostra homepage con tutte le immagini e i file html la posizionerete sullo spazio web da 100MB ...
in pratica, il vostro sito risiederà "ufficialmente" su quello spazio.

Invece gli script ASP o PHP verranno "richiamati" dal sito "ufficiale" con un link ai 2 siti "satelliti" che supportano uno le asp e uno il php.

E cmq PHP/ASP/100MB con collegamento FTP ...
E' indifferente se riuscite a metterli insieme usando 3 spazi web ... 2 .. o 1 solo [quest'ultimo caso é quello ottimo e se lo trovate .. postate il link :D ]
L'importante é che vi organizziate fin da adesso per poterli avere a disposizione quando serviranno per i corsi "avanzati" :)

Tutto chiaro ?


Quindi il vostro primo compito é:
Tener presente quello che vi ho scritto qui sopra ...
scegliere il vostro spazio web in base a quello che volete farci ...
registrarlo :D

Per chi ha già un proprio spazio web e vuole usare quello ... mi sa che gli tocca aspettare la lezione 2 :)
Cmq il consiglio é che se il vostro spazio web non supporta l'upload/download via ftp ... cambiatelo.

Se avete problemi ... postate qui di seguito e vediamo di darvi una mano durante la procedura di registrazione :)

Link al topic che contiene la discussione sulla Lezione (http://forum.igz.it/showthread.php?s=&threadid=41416)

:hello:

Kugel
09-07-2002, 17:39
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 :)

Link al topic che contiene la discussione sulla Lezione (http://forum.igz.it/showthread.php?s=&threadid=45733)

:hello:

Kugel
25-09-2002, 00:38
Una domanda posta da Aerys mi ha dato lo spunto per questa lezione "straordinara" sull'HTML di Base.

Questa volta verrà affrontato l'argomento dei codici colore.

Cosa sono, cosa significano, come li interpreta il browser, come si calcolano.

Innanzitutto una precisazione.

Il modo corretto per identificare il colore é proprio quello di indicare il codice esadecimale.
Il browser quando legge ad esembio Color="red" .. sa già di suo che deve leggerlo come "metti il colore corrispondente al codice esadecimale FF0000
In pratica é come se avesse una tabella di conversione interna che traduce i nomi dei colori piu' comuni .. nel loro codice esadecimale.

Quindi é il nome che viene tradotto in numero ... non il contrario :)

Fatta questa precisazione ...

Allora .. le pagine web hanno tutti colori in esadecimale.
Decimale .. in base 10 .. cifre da 0 a 9
Esadecimale .. in base 16 .. cifre da 0 a F

Il codice colore lo devete leggere come 3 numeri in esadecimale affiancati
Questi 3 numeri non sono altro che la composizione del colore in base alla percentuale dei 3 colori RGB [Red, Green, Blue]

La quantità di colore si esprime con un numero che va da 0 a 255 [ convertendolo in esadecimale --> da 0 a FF ]

Esempio ... il bianco:
Il bianco é la totalità del colore
Vuol dire che ha il 100% di rosso, il 100% di verde e il 100% di blu.

Il tutto si traduce in 255, 255, 255 --> che in esadecimale fa FF FF FF

Messi tutti attaccati diventa FFFFFF che diventa il codice colore esadecimale per identificare il bianco su qualsiasi browser :)

Ricordatevi poi che quando dovete assegnare il colore a qualche cosa ...
in html ogni codice colore va sempre fatto precedere dal simbolo #

Color="#FFFFFF"

Il rosso ... FF0000
Il verde ... 00FF00
Il blu ... 0000FF
etc etc ...

Come si calcola il codice colore ?

Se ci fate caso ...
in qualsiasi programma di grafica, quando scegliete il colore vi danno il valore in base a quella scala RGB ..
in pratica vi danno i 3 valori decimali di quel colore.

Usate la calcolatrice di windows [o un qualsiasi altro metodo per fare il cambio di base :) ] e li convertite nei 3 valori esadecimali.
Una volta che li avete ... li affianchiate ... ed ecco il codice esadecimale che identifica quel colore :)

Ulteriore precisazione ...
se ad esempio avete un colore che convertendo le sue 3 componenti RGB diventa --> F 3A 61 [quindi formato da meno di 6 caratteri in tutto ]

Considerate sempre che ognuno di quei 3 numeri deve essere sempre e cmq di 2 caratteri.

Quindi i numeri da 0 a F ... diventano 00 01 02 03 .... 0F

Ad esempio:
il nero [assenza di colore] che in decimale sarebbe 0,0,0
in esadecimale sarebbe rappresentato dai 3 valori 00 00 00 .... quindi per il web si avrebbe il codice 000000

:hello:

Link al topic che contiene la discussione sulla Lezione (http://forum.igz.it/showthread.php?s=&threadid=59307)