Ciao a tutti, ho letto molte guide sull' HTML e direi che non sono male, però molte di queste sono spiegate male o non fanno capire ai meno esperti il contenuto, quindi in questo post cercherò di elencarvi le basi dell' HTML, sperando che i meno esperti riescano a capire ^^
Iniziamo!
Normalmente appena apriamo un documento HTML dovremmo inserire un Doctype (una stringa di codice che specifica il linguaggio, la lingua e la versione), ma per ora è meglio tralasciarlo visto che non è obbligatorio.
Quindi partiamo subito facendo capire al browser che deve interpretare un file HTML in questo modo:
Tutto il codice contenuto dentro quei 2 tag è letto come codice HTML, come vedrete ho inserito ben 2 tag, il primo sta a indicare l' apertura del file, il secondo, con uno slash davanti indica la chiusura, e questo vale per tutti i tipi di tag, eccetto alcune eccezioni che vedremo più avanti.
Le prime cose che normalmente si inseriscono in un documento sono la testa e il corpo del file, e vanno inserite in questo modo:
Per la testa, e..
..per il corpo.
Per questioni di comodità (dipende dai punti di vista) io preferisco iniziare a inserire il codice nella testa, come viene anche normalmente fatto.
Ma cosa dovremo mettere nella testa?
Il titolo della pagina, gli script JS (javascript) e i fogli di stile CSS (che saranno molto utili per il layout della pagina, ma che vedremo probabilmente in un' altra guida apposita).
Personalmente preferisco inserire prima gli script JS, poi i fogli di stile e successivamente il titolo.
Ma noi vedremo solamente come inserire il titolo, perché al momento ci importa solo di quello.
Per inserire un titolo useremo questo tag:
Perfetto! Abbiamo finito con la testa, ora possiamo passare al corpo.
Cosa inseriremo nel corpo? Inseriremo tutto quel che compone la pagina (form, immagini, background, testi ecc).
Per fare una pagina esteticamente bella per prima cosa dovremo inserire un background, come facciamo?
Lo specifichiamo direttamente dentro il tag di apertura del corpo in questa maniera:
Per inserire un' immagine..
..per inserire un colore.
Nel primo codice dovremo sostituire la stringa nome_file.jpg con il nome della nostra immagine (che si deve trovare nella stessa directory del file HTML) e la relativa estensione.
Per il secondo invece ci basterà sostituire la stringa colore_inglese con il nome del colore da assegnare al background in lingua inglese, esempio blue, black, yellow ecc.
Benissimo, ora abbiamo specificato il background e possiamo passare ad altro.
Come prima cosa certamente inseriremo del testo, che sia un titolo o qualsiasi altra cosa.
Possiamo usare molti tag per farlo, e ora ve ne elenco alcuni.
Questo tag non sarà modificabile se non tramite i CSS, quindi lo sconsiglio.
Questo invece crea un testo da una grandezza pari da 1 a 6, basterà sostituire h1 con h2, h3 e così via fino a 6, la grandezza è in ordine crescente, quindi h1 sarà più grande e h6 più piccolo.
Questo è il tag che preferisco, perché si può modificare il testo senza ricorrere ai CSS, con size specifichiamo la grandezza del testo con una scala da 1 a 7, però questa volta in ordine decrescente, quindi il 7 sarà più grande e l' 1 più piccolo.
Con color specifichiamo il colore del testo, io ho inserito brown (marrone), ma voi potrete inserire un qualsiasi colore a patto che sia scritto in lingua inglese.
Con face invece specifichiamo quale dev' essere il Font del testo, io ho messo Times New Roman, ma ce ne sono tanti come Arial, Comic Sans MS ecc.
Possiamo anche far si che il nostro testo si muova grazie a questo tag:
Questo tag è stato deprecato perché ormai si usa JS al suo posto, ma sinceramente io preferisco ancora usarlo.
Dentro marquee potrete inserire qualsiasi codice di testo, io ho messo h1 per fare un esempio.
Possiamo anche inserire le immagini, in questo modo:
E come prima dobbiamo sostituire nome_immagine.jpg con il nome dell' immagine e la relativa estensione.
Poi c'è il collegamento ipertestuale, ma cos'è un collegamento ipertestuale? Non è altro che un testo o un' immagine che funge da link, ovvero cliccandolo verrete reindirizzati alla pagina da voi scelta.
Ecco come si crea:
Dovrete sostituire vostra_pagina con il nome della pagina HTML.
Possiamo inserire delle aree di testo dove l' utente potrà scrivere o potrà leggere magari un codice HTML scritto da voi senza che il browser lo interpreti.
Se volete far scrivere qualcosa alla persona che sta visualizzando la pagina dentro i 2 tag non dovrete inserire niente, sarà lui a decidere cosa inserire!
Se invece volete che la textarea sia bloccata (in modo che l' utente non possa scriverci dentro) dovrete cambiare il codice in questo modo:
Ecco fatto, semplice no?
Ora una delle cose più semplici ma utilissima, se provate a inserire i codici di prima in una sola pagina vedrete che anche se premete invio con la tastiera andando a capo con il codice il browser lo inserirà tutto allineato, come possiamo risolvere questo fastidioso problema?
Più facile di così si muore, ci basta inserire un piccolissimo tag.
Questo tag non ha bisogno di chiusura, e potrete metterlo quante volte volete per separare 2 codici, un tag equivale a un invio.
Ultima cosa, non indispensabile ma utile è l' iframe, cioè un piccolo tag che ti permette di inserire una pagina web nel tuo sito senza eliminare l' attuale contenuto, mi spiego meglio.
Avete una pagina web e vorreste inserirne un' altra all' interno della stessa pagina?
Benissimo, invece di eliminare il corrente codice e inserire il codice dell' altra pagina inseriremo un iframe che fungerà da "copia" della pagina, ovvero preleverà automaticamente tutto il codice dell' altra pagina e lo inserirà nella vostra in grandezza e posizione da voi desiderate.
Siamo costretti a usare il CSS per posizionare dove vogliamo l' iframe (si potrebbe benissimo fare in HTML, ma ci sarebbero codici a non finire), quindi vi elencherò un codice CSS ma non spiegherò il funzionamento perché non si attinge alla guida.
Sostituiamo la stringa vostra_pagina.html con il nome della pagina da inserire con estensione .html, se invece si tratta di una pagina sul web inseriremo il suo URL.
ora dovremo sostituire pixel_a_destra_ con il numero di pixel la quale pagina dovrà posizionarsi alla destra della pagina, ricordo che la scritta px non dovrà variare, sostituiremo solo pixel_a_destra_ con il numero di pixel lasciando invariata la scritta px (esempio: 40px), lo stesso vale per pixel_in_basso_, solo che questa volta dovremo inserire il numero di pixel la quale pagina dovrà posizionarsi in basso alla pagina.
Con width indicheremo (in pixel) la larghezza che dovrà avere il frame (in questo caso 50) e con width l' altezza (in questo caso sempre 50).
Bene, direi che queste sono le basi fondamentali da sapere per capire l' HTML e iniziare a realizzare pagine web, spero di essermi espresso bene non tralasciando niente, in caso contrario o in caso abbiate dubbi non esitate a commentare.
Iniziamo!
Normalmente appena apriamo un documento HTML dovremmo inserire un Doctype (una stringa di codice che specifica il linguaggio, la lingua e la versione), ma per ora è meglio tralasciarlo visto che non è obbligatorio.
Quindi partiamo subito facendo capire al browser che deve interpretare un file HTML in questo modo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Le prime cose che normalmente si inseriscono in un documento sono la testa e il corpo del file, e vanno inserite in questo modo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Per questioni di comodità (dipende dai punti di vista) io preferisco iniziare a inserire il codice nella testa, come viene anche normalmente fatto.
Ma cosa dovremo mettere nella testa?
Il titolo della pagina, gli script JS (javascript) e i fogli di stile CSS (che saranno molto utili per il layout della pagina, ma che vedremo probabilmente in un' altra guida apposita).
Personalmente preferisco inserire prima gli script JS, poi i fogli di stile e successivamente il titolo.
Ma noi vedremo solamente come inserire il titolo, perché al momento ci importa solo di quello.
Per inserire un titolo useremo questo tag:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Cosa inseriremo nel corpo? Inseriremo tutto quel che compone la pagina (form, immagini, background, testi ecc).
Per fare una pagina esteticamente bella per prima cosa dovremo inserire un background, come facciamo?
Lo specifichiamo direttamente dentro il tag di apertura del corpo in questa maniera:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Nel primo codice dovremo sostituire la stringa nome_file.jpg con il nome della nostra immagine (che si deve trovare nella stessa directory del file HTML) e la relativa estensione.
Per il secondo invece ci basterà sostituire la stringa colore_inglese con il nome del colore da assegnare al background in lingua inglese, esempio blue, black, yellow ecc.
Benissimo, ora abbiamo specificato il background e possiamo passare ad altro.
Come prima cosa certamente inseriremo del testo, che sia un titolo o qualsiasi altra cosa.
Possiamo usare molti tag per farlo, e ora ve ne elenco alcuni.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Con color specifichiamo il colore del testo, io ho inserito brown (marrone), ma voi potrete inserire un qualsiasi colore a patto che sia scritto in lingua inglese.
Con face invece specifichiamo quale dev' essere il Font del testo, io ho messo Times New Roman, ma ce ne sono tanti come Arial, Comic Sans MS ecc.
Possiamo anche far si che il nostro testo si muova grazie a questo tag:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Dentro marquee potrete inserire qualsiasi codice di testo, io ho messo h1 per fare un esempio.
Possiamo anche inserire le immagini, in questo modo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Poi c'è il collegamento ipertestuale, ma cos'è un collegamento ipertestuale? Non è altro che un testo o un' immagine che funge da link, ovvero cliccandolo verrete reindirizzati alla pagina da voi scelta.
Ecco come si crea:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Possiamo inserire delle aree di testo dove l' utente potrà scrivere o potrà leggere magari un codice HTML scritto da voi senza che il browser lo interpreti.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Se invece volete che la textarea sia bloccata (in modo che l' utente non possa scriverci dentro) dovrete cambiare il codice in questo modo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ora una delle cose più semplici ma utilissima, se provate a inserire i codici di prima in una sola pagina vedrete che anche se premete invio con la tastiera andando a capo con il codice il browser lo inserirà tutto allineato, come possiamo risolvere questo fastidioso problema?
Più facile di così si muore, ci basta inserire un piccolissimo tag.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ultima cosa, non indispensabile ma utile è l' iframe, cioè un piccolo tag che ti permette di inserire una pagina web nel tuo sito senza eliminare l' attuale contenuto, mi spiego meglio.
Avete una pagina web e vorreste inserirne un' altra all' interno della stessa pagina?
Benissimo, invece di eliminare il corrente codice e inserire il codice dell' altra pagina inseriremo un iframe che fungerà da "copia" della pagina, ovvero preleverà automaticamente tutto il codice dell' altra pagina e lo inserirà nella vostra in grandezza e posizione da voi desiderate.
Siamo costretti a usare il CSS per posizionare dove vogliamo l' iframe (si potrebbe benissimo fare in HTML, ma ci sarebbero codici a non finire), quindi vi elencherò un codice CSS ma non spiegherò il funzionamento perché non si attinge alla guida.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
ora dovremo sostituire pixel_a_destra_ con il numero di pixel la quale pagina dovrà posizionarsi alla destra della pagina, ricordo che la scritta px non dovrà variare, sostituiremo solo pixel_a_destra_ con il numero di pixel lasciando invariata la scritta px (esempio: 40px), lo stesso vale per pixel_in_basso_, solo che questa volta dovremo inserire il numero di pixel la quale pagina dovrà posizionarsi in basso alla pagina.
Con width indicheremo (in pixel) la larghezza che dovrà avere il frame (in questo caso 50) e con width l' altezza (in questo caso sempre 50).
Bene, direi che queste sono le basi fondamentali da sapere per capire l' HTML e iniziare a realizzare pagine web, spero di essermi espresso bene non tralasciando niente, in caso contrario o in caso abbiate dubbi non esitate a commentare.
