Guida Creare un sito WEB - Jquery, PHP, Html, CSS

[ScaredNatsu]

Hola! in questo tutorial(che dividerò a pezzi(capitoli), dato che non lo scriverò tutto in un giorno) vedremo come creare un sito web.
Suddivideremo questo tutorial dai 5 ai 10 capitoli(dipende, sono variabili).
Capitoli:
1~ Programmi necessari e registrazione dominio
2~ HTML basilare
3~ CSS + HTML
4~ Jquery + CSS + HTML
5~ Jquery, CSS, HTML + PHP
Ovviamente queste sono le grosse categorie.Ora Vediamo le subcategorie:
Capitolo 1:
1.A: Download Programmi
1.B: Creazione Dominio e Scelta
1.C: Configurazione programmi
Capitolo 2:
2.A: Sintassi basilare(Scritte, immagini)
2.B: I div e le tabelle
Capitolo 3:
3.A: Implementazione CSS
3.B: Stile in CSS
3.C: Stile direttamente da elemento
3.D: Classi e ID in CSS
Capitolo 4:
4.A: Download librerie Jquery
4.B: Implementazione Jquery
4.C: Slideshow Jquery
4.D: Bottoni e Menù Animato Jquery
Capitolo 5:
5.A: Login + Registrazione PHP
5.B: Sistema di Supporto + E-mail Sender
__________________________________________________________________________________________________

Capitolo 1:​

1.A: Download dei programmi
I programmi per un sito web non sono molti, ma necessari.Il programma fondamentale per la realizzazione è Filezilla
Il download di questo programma è al seguente indirizzo:

Perfavore, Entra oppure Registrati per vedere i Link!

Ora possiamo facilmente inviare i file dal nostro PC all'Hosting.
Ma per creare un sito, che programmi dobbiamo usare?!Semplice, potete utilizzare benissimo il blocco note(anche se un po' scomodo), quindi posso solo consigliarvi Programmer's Notepad come programma Free, altrimenti ci sarebbe Adobe Dreamweaver come programma a pagamento, ma potete inviarmi un MP per la versione portable.
Il download di Programmer's Notepad è a questo indirizzo:

Perfavore, Entra oppure Registrati per vedere i Link!

Ora subentra un'altra problematica, una nuova scelta:
Server Site o Hosting Site?
Allora la prima è una lama a doppio taglio:
Ci sono molti pro e contro:La prima è che avrete a disposizione molti GB di spazio senza spendere una lira(per così dire), tuttavia il vostro PC dovrà essere sempre acceso, e proprio in questo periodo è sconsigliato, dato che è estate e potrebbe fondersi qualche pezzo se non avete un impianto di raffreddamento.
La seconda scelta è abbastanza conveniente per i siti professionali o forum:
Non molto spazio(se non spendete) tuttavia un sito aperto 24/24 con DataBase abbastanza ampio.
Consiglio l'hosting, anche se il server potrebbe essere utile in locale.
Programmi server:
Xampp:

Perfavore, Entra oppure Registrati per vedere i Link!

No-IP: aspettate un'altra guida per farlo funzionare xD
__________________________________________________________________________________________________

1.B: Creazione Dominio e scelta
Ora c'è un passo importante: Dobbiamo creare il dominio e scegliere il nostro "provider".
Ora vi elenco un po' di Hosting famosi:
-

Perfavore, Entra oppure Registrati per vedere i Link!

-

Perfavore, Entra oppure Registrati per vedere i Link!

-

Perfavore, Entra oppure Registrati per vedere i Link!

Allora creiamo il dominio:
Questi Host ci permettono di creare sia un dominio di terza classe(.altervista.org, .netsons.com, .000webhost.com) sia uno di seconda classe(.it, .com, .org, .eu, .net)
Prima di tutto consiglierei di utilizzare lo spazio free per la creazione del sito, poi di trasferire il sito su un hosting professionale:

Perfavore, Entra oppure Registrati per vedere i Link!

Mettete dati veriteri nei campi richiesti, soprattutto l'e-mail, dato che vi manderà la richiesta di attivazione dell'account.
__________________________________________________________________________________________________

1.C: Impostazione programmi
Vediamo come impostare Filezilla e altri programmi:
Ecco come si presenterà il nostro amichetto.

Host: nomesito.nomehosting(altervista, 000webhost, netsons.com).estensione
Nome utente: Di solito il nome del sito
Password: la password impostata o inviata tramite e-mail
Porta: FTP 21 di Standard.

Xampp:
Allora per far avviare il nostro server Apache Almeno in locale, dobbiamo sbloccare la porta 80, per avere mysql la porta 3306.
Le porte potrebbero essere già occupate dai seguenti programmi:
La 80 da Skype, oovoo, e altri programmi di messaggistica istantanea.
Per vedere il PID(Process Identification ID) dei programmi che occupano queste porte possiamo utilizzare il Prompt dei comandi(Command Prompt) con il comando

Perfavore, Entra oppure Registrati per vedere i codici!

.
Per Terminare questi processi dobbiamo avviare il Task manager(Gestione Attività), andare su processi, pigiare su visualizza e Selezione Colonne e la prima che apparirà sarà PID.
Controllare il PID corrispondente e cliccare su "Termina Processo".
__________________________________________________________________________________________________

Capitolo 2​

2.A : Sintassi basilare
L'HTML è il linguaggio basilare per la creazione di pagine web.
E' privo di funzioni grafiche senza l'ausilio del CSS.
In questo Capitolo vedremo le varie scritte e come inserire le immagini.
Come scrivere: I tipi di scritta

Perfavore, Entra oppure Registrati per vedere i codici!

Ora vediamo come definirne la grandezza del font, tramite le tag <font>:

Perfavore, Entra oppure Registrati per vedere i codici!

Utilizzando questo metodo possiamo definire la grandezza della scritta.
Un metodo per definire la grandezza più grande della normale o più piccola è con i + e i - :

Perfavore, Entra oppure Registrati per vedere i codici!

Un altro dato importante è quello di cambiare font, utilizzando il font-face.
Esempio

Perfavore, Entra oppure Registrati per vedere i codici!

La tabella dettagliata con tutti i tipi di font generici è al seguente indirizzo:

Perfavore, Entra oppure Registrati per vedere i Link!

Inserire Immagini
Le immagini possono essere tranquillamente essere inserite tramite le tag <img>:

Perfavore, Entra oppure Registrati per vedere i codici!

Sintassi basilare

Perfavore, Entra oppure Registrati per vedere i codici!

__________________________________________________________________________________________________

I div e le tabelle
Altri 2 elementi essenziali per la creazione di un sito web sono i contenitori(div) e le tabelle.
Entrambi hanno un ruolo preciso:
I contenitori hanno, appunto, il ruolo di contenere e posizionare i contenuti, mentre le tabelle quello di "elencare" tutti i dati di una pagina.
Ora vediamo le sintassi di entrambe:

Perfavore, Entra oppure Registrati per vedere i codici!

Tabelle:

Perfavore, Entra oppure Registrati per vedere i codici!

In questo modo abbiamo creato una tabella con 2 righe e 4 colonne(2 per ogni riga)
Ora vediamo come allineare perfettamente 2 div con l'uso di una tabella

Perfavore, Entra oppure Registrati per vedere i codici!

In questo modo, con l'ausilio delle celle abbiamo allineato perfettamente 2 div.
__________________________________________________________________________________________________

Capitolo 3​

Implementazione CSS
Il modo più semplice di implementare il CSS in un documento html sono i tag <style>
Loro ci permettono di scrivere un intero foglio di stile all'interno del documento html(Dream Weaver scegliendo il template lo crea automaticamente).
Vediamo come fare, avendo il codice iniziale:

Perfavore, Entra oppure Registrati per vedere i codici!

Altrimenti c'è un altro metodo(ancora più valido) dove implementiamo un foglio di stile esterno, utilizzando il <link rel="stylesheet" >:

Perfavore, Entra oppure Registrati per vedere i codici!

Dato che abbiamo visto tutti i metodi di implementazione di un foglio di stile in CSS, passiamo a come crearne uno e a come interpellarlo
__________________________________________________________________________________________________

Stile CSS
Vediamo come inserire lo sfondo al sito.
Prima di tutto apriamo la tag <style> e cominciamo a scrivere il nostro primo stile CSS:

Perfavore, Entra oppure Registrati per vedere i codici!

Ora vediamo come creare uno stile di un elemento(lo faremo su un div facendolo diventare un contenitore

__________________________________________________________________________________________________

Stile direttamente da un elemento

Ora vediamo come creare un contenitore partendo dalla tag <div style="codice CSS">
In questo modo potremo creare un contenitore al centro del sito:

Perfavore, Entra oppure Registrati per vedere i codici!

In questo modo abbiamo creato un contenitore con queste caratteristiche:
Spostato al centro tramite margin:auto;
Larghezza di 900px;
Altezza di 1200px;
Bordi Neri;
Senza bordi sopra ne sotto;

Ora passiamo nel dettaglio e vediamo sia le classi che gli ID!

__________________________________________________________________________________________________

Le classi e gli ID
Questi due sono i fondamentali per un sito web:
Le classi, a differenza degli ID, possono essere utilizzati in modo generico per ogni elemento della pagina.
Gli ID, a sua volta, possono essere utilizzati solo su UN elemento, e non più.
I due selettori possono essere creati utilizzando o #(ID) Prima del nome o .(Classe) Prima del nome, vi faccio un esempio:

Perfavore, Entra oppure Registrati per vedere i codici!

E ora interpelliamoli nel file html:

Perfavore, Entra oppure Registrati per vedere i codici!

Ora vediamo come creare dei veri bottoni in CSS:

Perfavore, Entra oppure Registrati per vedere i codici!

Ora interpelliamo il menù nell'html

Perfavore, Entra oppure Registrati per vedere i codici!

Abbiamo creato il nostro primo menù in CSS!Complimenti!Spero che abbiate capito questa parte, la potete approfondire su siti appositi.
Poi linkerò vari siti utilissimi per il CSS e l'html!
Ora passiamo al tanto atteso JQuery!
__________________________________________________________________________________________________

To be Continued
Crediti: Patrizio

 

[Kaito]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

4~ Jquery + CSS + HTML
5~ Jquery, CSS, HTML + PHP

Parli (se è sempre tua la guida) del jQuery come se fosse un linguaggio :/

Io come editor trovo ottimo Notepad++

 

[ScaredNatsu]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

La guida è mia, cerca per il web, non ne troverai un'altra ;)

4.A: Download librerie Jquery

Il Jquery è una libreria Javascript.

 

[Kaito]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

La guida è mia, cerca per il web, non ne troverai un'altra ;)

Il Jquery è una libreria Javascript.

Non ho mai detto il contrario (se non per il fatto che si scrive jQuery lol), ma dovresti scrivere "Javascript, HTML etc." non "jQuery, HTML etc."

 

[ScaredNatsu]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

Ma il jquery si può intendere come linguaggio, dal momento che non spiego il javascript da 0 xD

 

[Kaito]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

Bon, comunque ti conviene modificare la guida.. Usi ancora i <font>, mentre sono deprecati, poi per allineare orizzontalmente due div usi le tabelle.. :facepalm:

 

[ScaredNatsu]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

Ciccio, sto spiegando l'html dalle basi più ovvie, per i font uso font-family in CSS come uso i float per allineare ;)

 

[Kaito]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

Ciccio, sto spiegando l'html dalle basi più ovvie, per i font uso font-family in CSS come uso i float per allineare ;)

Ciccio, se devi spiegarlo spiegalo bene.

 

[Squirrel]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

Guida utile secondo me..non vedo cosa ci sia di sbagliato! Per i "newbie" in informatica va più che bene.

 

[ScaredNatsu]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

Guida utile secondo me..non vedo cosa ci sia di sbagliato! Per i "newbie" in informatica va più che bene.

Ah...il gusto di quando uno è intelligente ;)
Oggi faccio il 3° Capitolo...(non posso farli tutti in una giornata)

 

[Kaito]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

Ah...il gusto di quando uno è intelligente ;)
Oggi faccio il 3° Capitolo...(non posso farli tutti in una giornata)

Sto solo dicendo che se devi insegnare una cosa la insegni bene e non porti la gente ad errare =_=°

Forse il concetto non vi è chiaro però.

 

[ScaredNatsu]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

Errare?C'è qualcosa di errato nell'allineare SOLO in html con le tabelle?

 

[SFicarra]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

Ottima guida, bravo C'è inoltre da apprezzare la tua buona volontà nel farla, bravo di nuovo ^^

 

[edo64]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

Ciao a tutti.
sono nuovo del forum e quindi.......mi presento:
mi chiamo edoardo , sono a Verona ma sono di Sanremo.
Programmo per diletto e per lavoro.
Scrivo per sapere se c'e' un seguito a questa guida oppure no.
Grazie.

 

[ppp_ttn]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

Ci sono guide nettamente migliori a questa, non hai spiegato benissimo l'html comunque... Ciccio, bravo per l'impegno

 

[xGioovy]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

Ma Guida non proprio spiegata bene hai spiegato male l HTML è come funziona

 

[XFossaDeiLeoniX]

Riferimento: Creare un sito WEB - Jquery, PHP, Html, CSS

Di guide così ce ne sono a bizzeffe, cerca di renderla particolare e diversa dalle altre altrimenti è un thread inutile ;)