Parliamo di scrivere codice pulito.
Quando sto parlando di codice pulito sto parlando di imparare come
scrivere codice che funzionerà su quanti più dispositivi possibile.
Per fare ciò,
è necessario conoscere un po 'il modello di oggetti del documento,
chiamato anche DOM.
Quando HTML5 è stato sviluppato
il principale tipo di obiettivo di guida è che vogliono attenersi allo standard.
Che tutte le nuove funzionalità dovrebbero essere basate su HTML
, CSS, DOM e JavaScript,
e si può avere la possibilità di conoscere ognuna di queste.
Ma voglio parlare del DOM solo per un po
'perché ti aiuterà a capire l'HTML un po 'meglio.
Una delle cose degli scienziati di computer geek come me è che amiamo gli alberi.
Non come gli alberi fuori che sono verdi e belli in autunno.
Ci piacciono gli alberi matematici.
Queste strutture ad albero che possiamo dimostrare di essere valide o non valide.
Quindi, quando parliamo di HTML come albero stiamo parlando di
questa idea che alla radice dell'albero stiamo per creare HTML.
Poi, da quell'albero quando diciamo,
«Ho intenzione di fare un documento HTML».
Vogliamo delle parti.
Vogliamo la testa qui, e vogliamo il corpo.
Nella testa manterremo tutto quel tipo di
informazioni che l'utente non vedrà per la maggior parte.
L' unica differenza è che potremmo parlare del titolo,
ma avremo tutto quel genere di cose nascoste a cui nessuno interessa.
Nel corpo è dove stiamo andando ad imparare a mettere tutti i nostri HTML cinque tag.
Quindi parliamo di HTML come un albero.
In questo caso ti sto mostrando questa idea che alla radice di
ogni pagina HTML dovrebbe essere quello che viene chiamato il tag HTML.
Quel genere di cose che dice,
fa sapere al browser.
Ti darò alcuni tipi di tag ed ecco come voglio che funzionino.
Se non la guardiamo come una foto,
posso anche dirti che
ogni albero ha tre parti di un documento ben formato.
Il Doctype, che è la versione di HTML che si sta per utilizzare.
La testa, che è tutti i metadati o tipo di informazioni extra, e il corpo.
Il corpo è il contenuto visualizzabile.
La cosa che la maggior parte delle persone stanno per tornare quando fanno il ciclo di risposta della richiesta.
Quindi parliamo di doctype.
Sei cosi' fortunata.
Quando stavo creando pagine web all'inizio ed eravamo in HTML4,
abbiamo dovuto trovare tutti questi modi diversi per spiegare se il
nostro HTML4 era standard molto rigorosi o se era transitorio.
In HTML5, è molto semplice dire,
«No c'è solo una cosa e si chiama DOCTYPE HTML», e sei tutto pronto.
Per la testa che si trova all'interno del tag head,
avremo tutte queste informazioni aggiuntive utilizzate dal browser.
Quindi, ad esempio, potresti voler dire in quale lingua stai creando la tua pagina.
Si potrebbe anche includere,
e si desidera davvero includere ciò che il titolo delle vostre pagine.
Quando sto parlando del titolo non sto parlando di un grosso tipo di intestazione che vedete.
Sto parlando della piccola cosa che vedi nella scheda del tuo browser.
In seguito, è possibile aggiungere anche file di supporto.
Potresti voler avere file CSS che daranno stile alla tua pagina,
o JavaScript che possono aggiungere interazioni diverse,
o davvero qualsiasi tipo di add-on che
cambierà il modo in cui le persone visualizzano e interagiscono con il tuo sito.
Oltre al titolo, i metadati non vengono visualizzati,
le persone non lo vedranno.
Quello che le persone vedono sono le informazioni contenute nel tuo tag corpo.
Quel tag corpo è la maggior parte della tua pagina.
Quindi è molto importante scrivere
codice ben formattato o simile ad albero in cui ti stai assicurando che ogni tag abbia una fine.
Che non stai mettendo le etichette in ordini strani.
Quindi, la maggior parte del contenuto nel corpo viene visualizzato dal browser, ma
ogni tanto c'è un po 'di metadati anche lì.
Ma non lo colpiremo in questa classe.
Quindi diamo un'occhiata a un esempio.
Proprio qui, ho un file chiamato template.html,
e sto visualizzando il codice qui sullo schermo per te.
Riesci a trovare le tre parti di un documento ben formato?
La prima cosa che vuoi cercare è il Doctype. Ce
l'abbiamo proprio qui.
Facendoti sapere che questo è un documento HTML5.
Abbiamo quindi il tag HTML che era la radice del nostro albero veramente scientifico,
e sto facendo sapere alla gente che mi è piaciuto che la lingua in cui viene visualizzato sia inglese.
Nella sezione principale abbiamo quei metadati.
Dove ci dice cose come, «Ehi,
so che ci sono un sacco di tastiere
e modi diversi in tutto il mondo per rappresentare le lettere.
Voglio che tu usi ciò che viene chiamato UTF-8.»
Non ti preoccupare che basta usarlo ogni volta.
Poi la parte successiva dei miei metadati è il titolo in cui vogliamo vederlo dicendo
«La mia prima pagina». Questo è tutto.
Sono due delle tre parti.
L' ultima parte è il tag body e sta
visualizzando il contenuto che vogliamo vedere sullo schermo.
Quindi diamo un'occhiata a questo in un browser. Che cosa ho?
Ho il mio titolo quassù,
e il mio contenuto visualizzabile proprio laggiù.
Ho scritto il codice,
il prossimo passo che dovresti sempre fare è convalidare il codice.
Dì, «Ho scritto il codice sembra buono,
ma so che i browser sono molto belli e
fanno apparire bene le cose anche quando non ho scritto un buon codice.»
Quindi, se vai a validatore, quel w3.org,
puoi controllare qualsiasi sito web per vedere se il codice è valido e hai tre scelte.
Puoi caricare l'URL,
puoi caricare un file,
oppure puoi effettivamente copiare e incollare il tuo codice e inserirlo lì.
In questo caso, ho inserito l'URL per template.HTML eseguire Check,
e yay, non sorprendentemente perché sapevo che
stavo per registrare questo, ha controllato con successo.
Non preoccuparti degli avvertimenti.
Gli avvisi di solito sono in per coprire se stessi.
Cosa succede se si desidera
convalidare il file ma i file non sono ancora su Internet?
Passiamo attraverso molto rapidamente un esempio di come si può fare questo.
Diciamo che ho il mio file template.HTML e voglio controllarlo.
Voglio farti notare che sono entrato e ho cambiato
il file e ho inserito un errore di battitura intenzionale.
Ho scritto il tag di chiusura per il titolo in modo errato.
Vediamo cosa succede.
E se il browser o il validatore possono trovarlo.
Quello che ho intenzione di fare è che sono andato a validator.w3.org,
e ora selezionerò la terza opzione convalidare tramite input diretto.
Torno al mio comando file A o controllo A,
se sei su un PC Command C,
ho copiato tutto il codice e ora voglio metterlo nel validatore.
Premi il controllo, su, e se scorriamo quaggiu' posso renderlo molto piu' grande per te.
Puoi vedere che ho ricevuto due errori.
Perché ho ricevuto due errori quando ho digitato un solo errore?
Beh, i validatori non sono mai perfetti.
Quindi quale errore ha trovato è che dice:
«Ho trovato la fine di un file e non me lo aspettavo».
Beh, il motivo per cui è successo è diamo un'occhiata all'errore numero 2,
ci dice: «Oh, hai dimenticato di chiudere il tag del titolo».
Quindi a volte un errore può causare molti messaggi di errore.
Quindi non ti preoccupare.
Ho visto ben 50 o 60 errori che una volta che
ho corretto una riga di codice ha risolto più dell'80% di quegli errori.
Quindi tornerò al mio codice,
lo sistemerò e inserirò quel titolo e lo salverò.
Copialo di nuovo, mettilo dentro e vado a controllare di nuovo.
Questa volta il controllo non completa errori.
Quindi, solo per rivedere,
vuoi davvero seguire la struttura DOM se vuoi una pagina ben formata.
Seguendo tale struttura significa che si utilizzano sempre i tag di inizio e di fine.
Inoltre chiudi i tag interni prima di quelli esterni.
Ciò significa che se inizi
un tag titolo devi terminarlo prima di terminare il tag body.
Inoltre vorrai usare
attributi validi che è una delle cose di cui parleremo un po 'più
tardi quando parliamo di immagini e
fondamentalmente parti della tua pagina che hanno bisogno di informazioni aggiuntive.
Il problema con i browser è che in realtà correggeranno il codice errato per te.
Li chiamo sempre i genitori dell'elicottero della codifica.
E 'come, «So come volevi
che fosse così, è così che lo farò apparire sullo schermo».
Il problema è che non sempre funziona per tutti.
Quindi, solo perché il tuo sito ti sembra buono quando lo stai guardando sul tuo browser,
non significa che sia giusto.
Devi usare un validatore per controllare il tuo codice.