Parlons d'écrire du code propre.
Quand je parle de code propre, je parle d'apprendre à
écrire du code qui fonctionnera sur autant d'appareils que possible.
Pour ce faire,
vous devez en savoir un peu sur le modèle d'objet de document,
également appelé DOM.
Lorsque HTML5 a été développé,
le principal type d'objectif de conduite est qu'ils veulent respecter la norme.
Que toutes les nouvelles fonctionnalités doivent être basées sur HTML,
CSS, DOM et JavaScript,
et vous pouvez avoir la chance d'en apprendre davantage sur chacune d'entre elles.
Mais je veux parler du DOM pour juste un peu
parce que cela va vous aider à comprendre le HTML un peu mieux.
Une des choses à propos des informaticiens geeky comme moi, c'est que nous aimons les arbres.
Pas comme les arbres à l'extérieur qui sont verts et beaux à l'automne.
On aime les arbres mathématiques.
Ces structures arborescentes que nous pouvons prouver être valides ou invalides.
Donc, quand nous parlons de HTML comme un arbre, nous parlons de
cette idée qu'à la racine même de l'arbre, nous allons créer du HTML.
Ensuite, à partir de cet arbre quand nous disons,
« Je vais faire un document HTML. »
Nous voulons des parties.
On veut la tête ici, et on veut le corps.
Dans la tête, nous allons garder toutes
ces informations que l'utilisateur ne va pas voir pour la plupart.
La seule différence, c'est qu'on peut parler du titre,
mais on va avoir tout ce genre de trucs cachés dont personne ne se soucie vraiment.
Dans le corps est l'endroit où nous allons apprendre à mettre tous nos HTML cinq balises.
Parlons donc du HTML comme un arbre.
Dans ce cas, je vous montre cette idée qu'à la racine de
chaque page HTML devrait être ce qu'on appelle la balise HTML.
Ce genre de chose qui dit,
laisse le navigateur savoir.
Je vais vous donner certains types de tags et voici comment je veux qu'ils fonctionnent.
Si nous ne le regardons pas comme une image,
je peux aussi vous dire que
chaque arbre a trois parties à un document bien formé.
Doctype, qui est la version de HTML que vous allez utiliser.
La tête, qui est toutes les métadonnées ou le type d'informations supplémentaires, et le corps.
Le corps est le contenu affichable.
La chose que la plupart des gens vont récupérer quand ils font le cycle de réponse à la demande.
Parlons doctype.
Tu as tellement de chance.
Quand je créais des pages web au début et que nous étions en HTML4,
nous avons dû trouver toutes ces différentes façons d'expliquer si
notre HTML4 était des normes très strictes ou si c'était transitoire.
En HTML5, il est très simple de dire,
« Non, il n'y a qu'une chose et ça s'appelle DOCTYPE HTML », et vous êtes tous prêts.
Pour la tête qui se trouve à l'intérieur de la balise head,
nous allons avoir toutes ces informations supplémentaires utilisées par le navigateur.
Par exemple, vous pouvez dire dans quelle langue vous créez votre page.
Vous pouvez également inclure,
et vous voulez vraiment inclure ce que le titre de vos pages.
Quand je parle du titre, je ne parle pas de gros genre d'en-tête que vous voyez.
Je parle de la petite chose que vous voyez dans l'onglet de votre navigateur.
Plus tard, vous pouvez également ajouter des fichiers de support.
Vous voudrez peut-être avoir des fichiers CSS qui styliseront votre page,
ou JavaScript qui peuvent ajouter des interactions différentes,
ou vraiment n'importe quel type d'add-ons qui va
changer la façon dont les gens voient et interagissent avec votre site.
À part le titre, les métadonnées ne sont pas affichées,
les gens ne la verront pas.
Ce que les gens voient, c'est l'information qui se trouve dans votre tag body.
Cette balise body représente la majeure partie de votre page.
Il est donc très important d'écrire du
code bien formaté ou semblable à un arbre où vous vous assurez que chaque balise a une fin.
Que tu ne mets pas de tags dans des ordres bizarres.
Donc, la plupart du contenu dans le corps est affiché par le navigateur, mais de
temps en temps il y a un peu de métadonnées là-dedans aussi.
Mais on ne va pas frapper ça dans cette classe.
Alors regardons un exemple.
Juste ici, j'ai un fichier appelé template.html,
et j'affiche le code ici sur l'écran pour vous.
Pouvez-vous trouver les trois parties d'un document bien formé ?
La première chose que vous voulez chercher est le Doctype.
On a ça juste là.
Vous faire savoir qu'il s'agit d'un document HTML5.
Nous avons ensuite la balise HTML qui était la racine de notre arbre vraiment scientifique,
et je fais savoir aux gens que j'aimerais que la langue dans laquelle il est affiché soit l'anglais.
Dans la section tête, nous avons ces métadonnées.
Où ça nous dit des choses comme, « Hé,
je sais qu'il y a beaucoup de claviers
et de façons différents à travers le monde pour représenter des lettres.
Je veux que vous utilisiez ce qu'on appelle UTF-8. »
Ne vous inquiétez pas qu'il suffit de l'utiliser à chaque fois.
Ensuite, la partie suivante de mes métadonnées est le titre où nous voulons le voir dire :
« Ma première page ». C'est ça.
C' est deux des trois parties.
La dernière partie est la balise body et elle
affiche le contenu que nous voulons voir à l'écran.
Alors regardons cela dans un navigateur. Qu'est-ce que j'ai ?
J' ai mon titre ici,
et mon contenu affichable juste là bas.
J' ai écrit le code,
l'étape suivante que vous devriez toujours faire est de valider le code.
Dites, « J'ai écrit du code, ça a l'air bien,
mais je sais que les navigateurs sont très gentils et ils
font que les choses s'affichent bien même quand je n'ai pas écrit de bon code. »
Donc, si vous allez à validator, que w3.org,
vous pouvez vérifier n'importe quel site Web pour voir si le code est valide et vous avez trois choix.
Vous pouvez télécharger l'URL,
vous pouvez télécharger un fichier,
ou vous pouvez réellement copier et coller votre code et le mettre directement là.
Dans ce cas, j'ai mis dans l'URL de template.HTML exécuter Check,
et yay, sans surprise parce que je savais que j'
allais enregistrer ceci, il a vérifié avec succès.
Ne vous inquiétez pas des avertissements.
Les avertissements sont généralement en place pour se couvrir.
Que se passe-t-il si vous voulez valider
votre fichier mais que vos fichiers ne sont pas encore sur Internet ?
Examinons très rapidement un exemple de la façon dont vous pouvez le faire.
Disons que j'ai mon fichier template.HTML et que je veux le vérifier.
Je tiens à vous signaler que je suis entré, que j'ai changé
le fichier et que j'ai mis une faute intentionnelle.
J' ai mal orthographié la balise de clôture pour le titre.
Alors voyons ce qui se passe.
Et si le navigateur ou le validateur peut trouver cela.
Ce que je vais faire, c'est que je suis allé à validator.w3.org,
et je vais maintenant sélectionner la troisième option valider par entrée directe.
Je retourne à ma commande de fichier A ou contrôle A,
si vous êtes sur une commande PC C,
j'ai copié tout le code et maintenant je veux le mettre dans le validateur.
Cliquez sur Check, en haut, et si on fait défiler ici, je peux rendre ça beaucoup plus grand pour toi.
Vous pouvez voir que j'ai eu deux erreurs.
Pourquoi ai-je reçu deux erreurs quand je n'ai tapé qu'une seule erreur ?
Eh bien, les validateurs ne sont jamais parfaits.
Donc, quelle erreur il a trouvé est qu'il disait,
« J'ai trouvé la fin d'un fichier et je ne m'y attendais pas ».
Eh bien, la raison qui est arrivé est de vérifier l'erreur numéro 2,
il nous dit, « Oh vous avez oublié de fermer la balise title. »
Donc, parfois une erreur peut provoquer beaucoup de messages d'erreur.
Alors ne vous inquiétez pas.
J' ai vu jusqu'à 50 ou 60 erreurs qu'une fois que
j'ai corrigé une ligne de code, il a corrigé plus de 80 pour cent de ces erreurs.
Donc, je vais revenir à mon code,
je vais le réparer et mettre ce titre et le sauvegarder.
Copiez à nouveau, mettez-le dedans et je vais vérifier à nouveau.
Cette fois, la vérification complète aucune erreur.
Donc juste pour examiner,
vous voulez vraiment suivre la structure DOM si vous voulez une page bien formée. En
suivant cette structure, vous utilisez toujours des balises de début et de fin.
Vous fermez également les balises internes avant les balises externes.
Ce que cela signifie, c'est que si vous démarrez
une balise de titre, vous devez y mettre fin avant de terminer la balise body.
Vous voudrez également utiliser des
attributs valides qui est l'une des choses dont nous allons parler un peu
plus tard lorsque nous parlons d'images et
essentiellement de parties de votre page qui ont besoin d'informations supplémentaires.
Le problème avec les navigateurs est qu'ils vont réellement corriger le mauvais code pour vous.
Je les appelle toujours les parents de l'hélicoptère du codage.
C' est comme, « Je sais à quoi tu voulais que ça ressemble alors,
c'est comme ça que je vais le faire apparaître à l'écran. »
Le problème, c'est que ça ne marche pas toujours pour tout le monde.
Donc, ce n'est pas parce que votre site vous semble bien quand vous le regardez sur votre navigateur que cela
ne signifie pas qu'il est correct.
Vous devez utiliser un validateur pour vérifier votre code.