Salve ragazzi, nonostante so che in questa sezione esiste già una release simile, ho deciso di rifarne un'altra con le uniche differenze di essere più approfondita e aggiornata.
Oramai noi tutti siamo su siti e siti. Per esempio anche tu adesso, che stai leggendo qua, sei su un sito… INFORGE... insomma ormai internet è la nostra casa, ci stiamo tantissime ore al giorno e perché non domandarsi come vengono creati i siti web?!?
I siti web, vengono creati attraverso codici che devono rispettare dei criteri. Questi codici appartengono a diversi linguaggi e solo grazie a l'unione di questi linguaggi esce qualcosa di fantastico, tipo la cioccolata calda che si crea attraverso l'unione di latte e cacao.
I linguaggi si suddividono in 4 diverse tipologie:
Prima di tutto, dove dobbiamo scrivere tutti i codici??
Molto semplice, basta creare un file con estensione .html in qualsiasi editor di testo.
Per aprire il file basta cliccarci di sopra e verrà aperto come pagina internet
In html i codici si chiamano tag.
Quando si apre un Tag dentro un altro Tag
quello che è dentro si deve anche chiudere all'interno
Questo è sbagliato!!
Invece, questo è giusto
Il primo tag è quello di apertura è va all'inizio, il secondo è quello di chiusura e va alla fine.
Notare lo "/" (slash) al secondo tag... esso serve a chiudere i Tag.
Noi dobbiamo mettere tutto dentro essi, sempre seguendo delle regole!!
Subito dopo il tag <html> va il Tag
Dove i contenuti non saranno visibile dalla pagina stessa ma ad esempio dal motore di ricerca
Ed il Tag
Dentro questo tag vi andranno tutte le cose visibili nella pagina.
)
Vi esistono due tipi di commenti diversi:
Questo tipo è a una sola riga (ma non funziona in HTML!)
Questo è a più righe.
Il tag title serve a dare un titolo alla pagina
I tag meta servono per mettere parole chiave al sito in modo che venga facilmente trovato dal motore di ricerca oppure per specificare delle impostazioni da utilizzare a seconda del dispositivo
Questo invece è la descrizione del sito
Adesso ecco come mettere link, questo tag può essere utilizzato sia in body che in head
In alcuni codici tipo questo lo slash va alla fine, poiché questo tag non ha un Tag di chiusura a meno che si voglia mettere una frase che quando viene cliccata manda a un link, in quel caso lo / alla fine non va. Ma va messo, </a>, dopo la frase, come di norma. In ogni caso questo solo tra i Tag body.
Direi di partire dal titolo!
Per il titolo vengono utilizzati i tag
N sta per un numero che va da 1 a 6, con h1 il titolo risulterà molto grande, con h6 piccolo.
Passiamo al contenuto scritto,
Per esso utilizziamo
questo serve per creare un paragrafo.
Un'alternativa a questo è
Altra alternativa è questa
Utilizzando questo tag potrai scrivere altre cose accanto, cosa che con p e div non si può fare!!
Se noi vogliamo andare a capo ci basterà utilizzare questo tag
Mentre se vogliamo creare una linea che funge da "a capo" utilizziamo
questa è l'alternativa a <br> e a mio parere è molto più bello!!
Per le dimensioni si possono usare sia i px che il %. Es:
1. Jdk
2.kdkf
Ecc.
E quello con i pallini
•a
•b
Ecc.
non vi sono limiti degli elementi di una lista!!
I Tag tr servono per aggiungere colonne verticalmente, mentre i Tag td servono per aggiungere colonne orizzontalmente
Essi vengono utilizzati nella creazione di moduli, come quello della registrazione a un sito.
Per adesso verranno solo introdotti, ma più in la li vedremo meglio.
Va tutto inserito nei Tag
Dentro essi vanno gli input
Oramai noi tutti siamo su siti e siti. Per esempio anche tu adesso, che stai leggendo qua, sei su un sito… INFORGE... insomma ormai internet è la nostra casa, ci stiamo tantissime ore al giorno e perché non domandarsi come vengono creati i siti web?!?
I siti web, vengono creati attraverso codici che devono rispettare dei criteri. Questi codici appartengono a diversi linguaggi e solo grazie a l'unione di questi linguaggi esce qualcosa di fantastico, tipo la cioccolata calda che si crea attraverso l'unione di latte e cacao.
I linguaggi si suddividono in 4 diverse tipologie:
- LINGUAGGI DI MARKUP, come HTML. Questo linguaggio serve a definire la struttura generale del documento. Per esempio Titolo, contenuto , tabelle, liste, ecc.
- FOGLIO DI STILE, appartiene a questo gruppo CSS, esso serve a dare uno stile al documento, cioè stiamo parlando di estetica
- LINGUAGGI DI SCRIPTING, cioè JavaScript (spesso chiamato con l'abbreviazione JS). Questi linguaggi rendono dinamica la pagina
- LINGUAGGI SERVER-SIDE, come PHP, che in poche parole recuperano i dati da mostrare sulla pagina su una macchina diversa da quella del client
- DATABASE, tra cui il più popolare MySQL, che insieme a PHP permette di memorizzare dei dati sulla macchina server e successivamente recuperarli, modificarli o eliminarli
Prima di tutto, dove dobbiamo scrivere tutti i codici??
Molto semplice, basta creare un file con estensione .html in qualsiasi editor di testo.
Per aprire il file basta cliccarci di sopra e verrà aperto come pagina internet
In html i codici si chiamano tag.
REGOLE
Direi di iniziare dettando la regola più importante.
Quando si apre un Tag dentro un altro Tag
quello che è dentro si deve anche chiudere all'interno
HTML:
<tag1>
<tag2>
</tag1>
</tag2>Invece, questo è giusto
HTML:
<tag1>
<tag2>
</tag2>
</tag1>INIZIO
Il documento HTML inizia sempre cosi:
HTML:
<html>
</html>Notare lo "/" (slash) al secondo tag... esso serve a chiudere i Tag.
Noi dobbiamo mettere tutto dentro essi, sempre seguendo delle regole!!
Subito dopo il tag <html> va il Tag
HTML:
<head>
</head>Ed il Tag
HTML:
<body>
</body>COMMENTI
I commenti sono molto importanti, poiché tu puoi annotare cosa è il codice accanto senza che i visitatori della pagina li vedano (perlomeno quelli meno esperti
)Vi esistono due tipi di commenti diversi:
HTML:
//questo è il primo tipo
HTML:
<!-- questo è il secondo tipo
bla bla bla -->HEAD
Dentro i codici head vanno i link per i documenti come CSS e JS, poi i meta ed il Tag title.
Il tag title serve a dare un titolo alla pagina
HTML:
<title>titolo di esempio bla bla bla</title>
HTML:
<META name="keywords" content="bla bla">
HTML:
<META name="description" content="bla bla">
Codice:
<a href="index.css"/>
//[I]notare lo slash alla fine[/I]BODY
Come già detto dentro i Tag body va inserito tutto il contenuto che si deve vedere dentro la pagina
Direi di partire dal titolo!
Per il titolo vengono utilizzati i tag
HTML:
<hn>titolo</hn>Passiamo al contenuto scritto,
Per esso utilizziamo
HTML:
<div>bella raga </div>Un'alternativa a questo è
HTML:
<p>bella raga</p>
HTML:
<span>bla bla</span>Se noi vogliamo andare a capo ci basterà utilizzare questo tag
HTML:
<br/>
HTML:
<hr/>STILE DEL TESTO
Per quanto riguarda lo stile del testo vi si può utilizzare
HTML:
<strong>bb</strong>
//[I]per ingrossare la parola[/I]
<i>bb</i>
//[I]italic test[/I]
<sub>bb</sub>
<!--[I] rende il testo piccolo e lo posiziona in basso alla parola precedente[/I] -->
<sup>bb</sup>
<!-- [I]rende il testo piccolo e lo posiziona in alto alla parola precedente[/I] -->
<ins>bb</ins>
<!-- [I]sottolinea la parola o la frase al suo interno[/I] -->
<del>bb</del>
//[I]sbarra la parola o la frase[/I]
[HR][/HR]
[SIZE=6][CENTER]IMMAGINI[/CENTER][/SIZE]
Per inserire [B]un'immagine [/B]bisogna utilizzare il tag
[CODE=html]
<img src="tree.jpg"/>
//[I]per definire le dimensioni[/I]
<img src="tree.jpg" height="100%" width=100%""/>
HTML:
<img src="tree.jpg" height="50%" width="50%"/>
//[I]or[/I]
<img src="tree.jpg" height="100px" width="100px"/>LISTA
Per creare una lista vi sono due metodi, quello con i numeri
1. Jdk
2.kdkf
Ecc.
E quello con i pallini
•a
•b
Ecc.
HTML:
<ol>
<li>
A
</li>
<li>
B
</li>
</ol>
//[I]numeri[/I]
<ul>
<li>
1
</li>
<li>
2
</li>
</ul>
//[I]pallini[/I]TABELLE
Nel caso vogliamo creare una tabella ci basterà utilizzare i Tag
HTML:
<table border="2">
<tr>
<td>
Bella
</td>
<td>
raga
</td>
</tr>
<tr>
<td>
Si
</td>
<td>
Vola
</td>
</tr>
</table>!!NOTARE border nel Tag table!!
Esso serve a creare un piccolo bordo nero attorno a ogni casella e attorno alla stessa tabella. Se non viene messo non si vedrà un bel nulla!! FORM
Adesso parliamo di un elemento importantissimo, i form.
Essi vengono utilizzati nella creazione di moduli, come quello della registrazione a un sito.
Per adesso verranno solo introdotti, ma più in la li vedremo meglio.
Va tutto inserito nei Tag
HTML:
<form method="post">
</form>
HTML:
<input type="text"/>
//[I]crea una casella di testo di una sola righa[/I]
<input type="radio"/>
//[I]crea un gruppo di scelte al cui interno va fatta una sola scelta[/I]
<input type="checkbox"/>
//[I]crea un gruppo di scelte al cui interno vanno fatte delle scelte che sia 1 o più[/I]
<input type="button"/>
//[I]crea un bottone neutro. Per farlo funzionare c'è bisogno dell'utilizzo di js[/I]
<input type="submit"/>
//[I]crea un bottone di invio attraverso il quale viene inviato e processato il form (spiegherò meglio più avanti)[/I]
<input type="reset"/>
//[I]crea un bottone che resetta tutti gli input[/I]
<select>
<option value="">blabla</option>
<option value="">blublu</option>
</select>
//[I]permette di creare una lista ove tu puoi scegliere un'opzione, un esempio è la scelta del paese durante la registrazione in un sito[/I]
//[I]IMPORTANTE!!Value serve a dare un nome a quell Tag, ad esempio se do un nome a select verrà una lista chiamata con quel nome[/I]
<textarea/>
//[I]crea una casella di testo di più righe[/I]
