Questo è il secondo articolo della nostra serie sui fondamenti assoluti dello sviluppo web. Il nostro primo articolo ha spiegato in dettaglio che cos'è l'HTML a livello concettuale. Abbiamo esaminato cos'è un linguaggio di markup, quali tag sono e in che modo HTML si confronta con altri pezzi importanti del puzzle di sviluppo web come i CSS.
Unisciti a noi oggi mentre andiamo avanti e dare un'occhiata a ogni pezzo di base di un documento HTML. Spiegherò tutto questo nella parte superiore di un file HTML che ti confonde e delinea la struttura di base che seguirai per creare i tuoi file HTML.
DOCTYPE
La prima cosa che vedi in genere in un file HTML è la dichiarazione DOCTYPE. Prima di HTML5, questo potrebbe essere un bit di codice molto confuso che assomigliava a questo:
C'è un sacco di cose qui e ogni cosa parla o al browser web, al lettore o ad entrambi. Il pubblico? parte parla solo della disponibilità, il DTD rappresenta Definizione del tipo di documento, che dichiara la versione di HTML in uso e la sezione finale è un URL che punta a dove è possibile trovare la DTD.
Le parole? Sciolto ,? (o transitorio)? rigoroso? e? frameset? fare riferimento a diverse versioni di HTML 4, che consentivano un markup leggermente diverso. Questi erano essenzialmente solo per aiutare gli sviluppatori di transizione da versioni precedenti di HTML.
HTML5 DOCTYPE
Ci sono diversi DOCTYPE tra cui scegliere, che possono essere monumentalmente fonte di confusione per i nuovi sviluppatori. Fortunatamente, HTML5 semplifica completamente la situazione con un DOCTYPE piacevolmente semplice:
Vedi quanto è facile al confronto? È davvero una bella cosa.
Cosa fa il DOCTYPE?
Ora abbiamo visto cos'è un DOCTYPE sembra ma non abbiamo davvero discusso di cosa fa. La risposta è che DOCTYPE indica al browser quale tipo di HTML aspettarsi, il che a sua volta influisce sul modo in cui il browser esegue il rendering della pagina.
Man mano che esplori lo sviluppo web, imparerai che c'è un'enfasi enorme sullo sviluppo basato sugli standard. L'idea generale è che se tutti rispettiamo determinate regole e standard, lo sviluppo web sarà una pratica più coesa e coerente. Questo è meglio per gli sviluppatori, meglio per i browser e, soprattutto, per gli utenti.
I DOCTYPE sono stati originariamente progettati per attivare la modalità standard? nei browser, il che significa che la pagina è stata renderizzata utilizzando i nuovi standard Web. Allo stesso modo, le pagine meno recenti senza un DOCTYPE hanno attivato la modalità "Quirks"? nei browser, che consentiva l'utilizzo di pratiche meno recenti che non funzionavano correttamente in modalità standard.
Il nuovo, molto semplice HTML5 DOCTYPE è supportato in tutti i principali browser e innesca la modalità standard in tutti loro. Il DOCTYPE ti aiuta anche a convalidare il tuo codice, il che garantisce che gli standard attuali vengano rispettati. Ogni pagina che crei dovrebbe utilizzare un DOCTYPE e, auspicabilmente, essere pienamente conforme agli standard.
Elemento di radice
Dopo il DOCTYPE, l'HTML inizia davvero. Questo è indicato dall'elemento radice HTML. Se il tuo intero HTML è un albero, questa è la radice da cui tutto il resto spunta.
L'elemento principale è definito da un? Tag ,? di cui abbiamo saputo nel nostro ultimo articolo. In questo caso, è l'HTML? etichetta.
Si noti che l'elemento radice include un attributo di lingua, nel nostro caso l'inglese. Assicurati sempre di indicare la lingua appropriata per ogni pagina che crei.
Tutto il resto che aggiungeremo a questa pagina si trova all'interno dell'elemento principale. È il contenitore per ogni frammento di informazioni e contenuto, l'unica eccezione è il DOCTYPE.
Elemento principale
La prossima cosa che incontrerai in un documento HTML è il? Head? sezione. Il tag head è esattamente quello che ti aspetteresti che sia:
Il materiale che entra nella sezione principale è principalmente informativo, indica a te e al browser alcune cose sulla pagina come il titolo, il set di caratteri, ecc. Questo è anche il luogo in cui tradizionalmente si caricano importanti risorse esterne.
Ci sono alcune cose importanti che entrano in un'etichetta principale. Diamo un'occhiata a uno a uno.
Meta tags
Come puoi probabilmente immaginare, i meta tag contengono metadati sulla pagina. I metadati assumono molte forme e possono includere parole chiave, autori, descrizioni, ecc. Ecco alcune inclusioni degne di nota:
charset
Questo è piuttosto noioso, il charset è tipicamente impostato su UTF-8 e in sostanza indica al browser quale codifica dei caratteri utilizzare.
Le tue pagine dovrebbero sicuramente includere un'indicazione di quale charset usare. Non pensarci troppo, è solo una di quelle cose che devi incollare nel tuo modello. Di seguito è riportata una tipica dichiarazione del set di caratteri in HTML5.
Questa è un'altra cosa che è diventata più facile con HTML5. Controlla la versione di questo snippet richiesto per HTML 4.01:
Alcuni altri metatag tipici includono descrizione e autore. Ecco un esempio rapido e intuitivo di ciascuno di questi:
Descrizione
Autore
Titolo
Un'altra cosa che va nella parte principale del tuo documento è il tag del titolo. Questo è un pezzo di codice molto semplice che indica semplicemente ciò che vorresti fosse il titolo della pagina. Ecco un esempio:
Questo titolo viene solitamente mostrato all'utente in alto al centro della finestra del browser, in una scheda, ecc.
Link e script
L'ultima cosa che discuteremo riguardo l'head tag è l'inclusione di risorse esterne. In una pagina Web molto semplice, di solito vedi che assumono la forma di un foglio di stile o di uno script:
Qui sto essenzialmente caricando il mio file CSS e jQuery (una libreria JavaScript) nella pagina. Se queste risorse sono incluse nei file sorgente ma non collegate nella sezione head, non funzioneranno.Si noti che i collegamenti per questi potrebbero puntare a qualcosa nella gerarchia di cartelle locali (come sopra) o qualcosa ospitato su un altro server web.
Il link usato sopra per il file CSS usa a relazione di collegamento (Rel =? Foglio di stile?). Per ulteriori informazioni sulle relazioni di collegamento, consulta questo articolo.
Inoltre, in alternativa al collegamento a file esterni, puoi incorporare il codice direttamente nell'elemento head. Ecco un esempio con i CSS, ma lo stesso può essere fatto tramite lo script? tag e JavaScript (gli script incorporati sono spesso collocati alla fine dell'elemento body).
Elemento del corpo
La parte finale di una pagina HTML è la più importante. Tutto all'interno dell'elemento body definisce il contenuto e la struttura della tua pagina. Per quanto riguarda i tempi di sviluppo, probabilmente utilizzerai un modello di set per tutto quanto sopra e impiegherai qualche minuto per personalizzarlo per progetti specifici. Il resto del tuo tempo HTML verrà speso all'interno dell'elemento body.
Mettere tutto insieme
Ora che abbiamo analizzato ogni singolo pezzo di un file HTML, mettiamolo insieme in un modello HTML5 estremamente semplice.
Una panoramica
Mille scuse per la natura banale di questo argomento, i principianti sono spesso spenti dalla noia a questo punto, ma restate lì, il vero divertimento dell'HTML è tutto ciò che c'è tra i tag del corpo, di cui non abbiamo nemmeno discusso!
Tutti questi pezzi erano necessari per dipingere con precisione l'immagine di ciò che è in realtà un documento HTML. Ora vediamo che un documento HTML ha un DOCTYPE che indica al browser come eseguire il rendering della pagina e aiuta a garantire che vengano utilizzati gli standard appropriati.
Sappiamo anche che esiste una gerarchia impostata su come sono strutturate le pagine HTML. Quasi tutto ma il DOCTYPE è gettato nell'elemento radice, il che significa che è l'elemento? Parent? degli elementi della testa e del corpo, che a loro volta hanno i loro figli.
La struttura di base di un documento HTML viene indicata come DOM o Modello di oggetto documento. Questo è quasi sempre metaforicamente definito come un albero e raffigurato come l'immagine sopra. Il nostro Jack Rocheleau ha scritto uno sguardo approfondito sul DOM intitolato Deeper Study nel modello degli oggetti del documento del WWW. Per il prossimo set per capire la struttura di base di una pagina HTML, controlla questo articolo.
Conclusione
Questo articolo rappresenta una breve panoramica di come è strutturato uno scheletro HTML e i tipi di elementi che sono in genere inclusi. Non è affatto esauriente, ma dovrebbe essere una buona introduzione di base a questi argomenti.
Quando inizi appena nel codice, la maggior parte delle persone ti fornirà semplicemente un modello per tutto il codice sopra senza veramente spiegare che cosa fa tutto ciò. Questo può lasciare un buco considerevole nella tua educazione, quindi è importante leggere queste informazioni e cercare di capire cosa puoi fare.
Resta con noi in questa serie e torna presto a rispondere a un'altra importante domanda: Cos'è il CSS?