Bonjour, aujourd'hui nous allons enfin écrire du code, et
je vais vous guider en vous montrant comment vous pouvez utiliser un éditeur.
L' un des plus grands pièges que j'ai vu beaucoup de mes élèves faire est qu'ils écoutent
trop attentivement ce que je dis, plutôt que d'essayer de plonger et de
commencer à coder eux-mêmes.
Alors pendant que je vous encourage à vous asseoir et à regarder ce que je vais faire maintenant,
dans un peu, j'espère que vous allez vous asseoir et vous allez coder avec moi.
La première étape est que vous devez créer et modifier vos fichiers.
L' un des plus grands pièges que vous allez rencontrer est que vous allez
enregistrer vos fichiers partout, vous ne serez pas en mesure de les trouver plus tard.
Alors décidez de la façon dont vous allez organiser vos fichiers.
Quel nom allez-vous donner à votre dossier ?
Où vas-tu le mettre ?
Deuxièmement, vous devez décider d'une convention de dénomination.
C' est juste une façon fantaisiste de dire comment vous allez nommer vos fichiers.
Donc, bien que beaucoup de gens utilisent un Mac et que vous êtes autorisé à utiliser des espaces dans vos
noms de fichiers, ce n'est pas quelque chose que vous voulez faire lorsque vous écrivez du code.
Donc, décidez que si vous avez deux mots que vous voulez assembler,
vous allez utiliser des traits de soulignement pour les connecter ou utiliser quelque chose que nous appelons CamelCase,
où vous majuscules la première lettre de chaque mot.
N' oubliez pas, n'utilisez jamais d'espaces et
soyez très cohérent au sujet de votre capitalisation si vous allez l'utiliser.
Enfin, vous devez décider d'un éditeur.
Si vous utilisez un ordinateur Windows, le Bloc-notes est déjà intégré.
Vous pouvez également envisager d'utiliser Notepad ++ ou Sublime.
Si vous utilisez un Mac, TextEdit est l'éditeur par défaut,
bien que de nombreuses personnes utilisent également TextWrangler.
Je vais utiliser Sublime tout au long du cours, mais pour aujourd'hui
je vais vous montrer des exemples de la façon d'éditer dans le Bloc-notes et TextEdit aussi.
Donc, pour commencer, passons rapidement en revue les cinq étapes que nous allons
faire, quelques-unes d'entre elles à plusieurs reprises.
Vous allez commencer par ouvrir votre éditeur, puis vous allez enregistrer votre fichier,
ajouter du contenu, enregistrer à nouveau le fichier et l'ouvrir dans votre navigateur.
Je veux vous montrer un exemple rapide, et
je vais utiliser Sublime pour le faire.
Mais ne vous inquiétez pas, je vais aller
de l'avant et vous montrer d'autres façons de le faire aussi.
J' ai donc soulevé mon éditeur Sublime ici, un joli fichier noir.
Je vais commencer par aller au dossier.
Et économisez.
Et je vais le nommer juste firstpage.html.
Maintenant, l'une des choses que vous devez décider tout de suite est l'endroit où
vous allez enregistrer ceci.
J' espère que vous avez décidé avant même de commencer à travailler.
Je vais garder le mien dans un dossier appelé pages Web que j'ai mis sur mon bureau.
Mais vous pouvez choisir n'importe quoi ici, ou même si vous le souhaitez,
si vous cliquez sur le côté ici, vous pouvez créer un tout nouveau dossier.
Ce que vous ne voulez pas faire est d'enregistrer tout votre code sur votre bureau.
Allons sauver.
Et maintenant, alors qu'il y a plusieurs fois que je vais te forcer à rester assis et
me regarder taper horriblement à l'écran, celui-ci, juste pour gagner du temps,
je vais aller de l'avant et tricher et coller dans un code que j'ai déjà écrit.
Comme vous pouvez le voir, j'ai mon type de doc, la section de la tête et le corps.
Dans la tête, j'ai inclus mon encodage et mon titre.
Dans le corps, on va juste dire bonjour.
Je suis entré et je l'ai enregistré en utilisant Ctrl+S.
Vous pouvez toujours faire Fichier > Enregistrer, mais je trouve que Ctrl+S est beaucoup plus rapide.
Et pour chaque éditeur que vous utilisez, il y a ces petites
clés utiles pour vous aider à savoir si vous avez changé quoi que ce soit.
Donc, si vous regardez en ce moment firstpage.html, ce qui pourrait être difficile pour
vous de voir, si je devais entrer et changer quoi que ce soit.
Vous obtenez en fait un petit cercle pour vous faire savoir que vous n'avez pas économisé depuis
un petit moment.
Je suis donc allé de l'avant, j'ai créé du contenu et maintenant il est temps pour moi d'ouvrir ma page.
Une façon de le faire est de me diriger vers mon dossier.
Et oh, voici firstpage.HTML.
Pour moi, il y a une petite icône de Chrome sur le côté.
Pour vous, il peut s'agir d'un navigateur différent.
Je vais aller de l'avant et cliquer dessus et faire apparaître ma FirstPage, et j'ai du succès.
Je ne peux pas insister assez sur le fait que la plupart du temps quand vous tapez quelque chose au début,
cela ne fonctionnera pas pour vous.
Heureusement, j'ai le pouvoir d'éditer.
Vous n'avez aucune idée qu'il m'a fallu quelques tentatives pour que ce fichier fonctionne,
parce que j'étais en train de jouer avec certaines choses.
Tout au long du cours,
je vais essayer de vous montrer les domaines où vous pourriez avoir un problème.
Espérons que vous ne le ferez pas, mais si vous le faites, ils sont tous très simples à réparer.
L' un des problèmes les plus courants est que lorsque vous faites un clic droit sur le fichier,
au lieu de s'ouvrir bien dans le navigateur, il ouvre votre éditeur à la place.
Si vous voulez résoudre cela, tout ce que vous devez faire est de cliquer avec le bouton droit sur le fichier et
sélectionnez Ouvrir avec.
Un autre problème qui se produit un peu est que lorsque vous ouvrez votre fichier, au lieu
de voir une page Web bien formatée, vous voyez en fait toutes vos balises.
Lorsque cela se produit, vous devez vérifier votre extension de fichier et vous
assurer qu'elle indique .html, et pas quelque chose comme .text ou .rtf.
Un autre problème qui se produit un peu est que vous modifiez votre code, mais
votre page est exactement la même.
Il y a deux raisons pour lesquelles cela a tendance à se produire.
L' un est que vous devez faire quelque chose appelé rafraîchir votre navigateur.
Cela signifie simplement que vous téléchargez le contenu.
La deuxième chose qui arrive assez souvent est que vous avez oublié de vérifier votre
nom de fichier.
Laissez-moi vous montrer un exemple de celui-ci.
Revenons à notre dossier d'origine.
Comme vous pouvez le voir, j'ai Hello World écrit ici.
C' est une chose de très informatique à dire et
comme j'essaie de paraître plus normal, je vais changer ça pour Bonjour tout le monde.
J' y vais et je vais sauver mon dossier.
Fait.
Eh bien, quand je retourne sur ma page web, ça dit toujours « Hello World ».
Ça n'a pas changé et ça m'énerve.
Donc, maintenant je me souviens qu'il est souvent nécessaire de rafraîchir votre page.
Il y a plusieurs façons de le faire,
vous pouvez généralement aller à la petite zone circulaire ici et cliquer sur Actualiser.
Vous pouvez cliquer avec le bouton droit de la souris et cliquer sur Recharger ou vous pouvez également aller à Afficher, désolé.
Vous pouvez également le faire à travers la barre d'outils située en haut.
Donc, je vais aller de l'avant et me rafraîchir ici.
Et vous pouvez voir maintenant que j'ai le Hello Everybody.
L' autre problème que j'ai mentionné est que parfois les gens changent leur nom de fichier.
Alors peut-être que vous ne travaillez plus sur votre FirstPage.
Vous avez donc décidé que je vais enregistrer ceci en tant que Fichier > Enregistrer sous deuxième page.
Sauvez-le.
Je vais retourner ici et je vais rafraîchir le dossier.
Bonjour tout le monde.
Eh bien, rien ne s'est passé.
Tu vas trouver ça qui se passe encore et encore et encore.
Lorsque vous avez affaire à beaucoup de fichiers tous en même temps,
vous devez vous assurer que celui que vous regardez sur le navigateur correspond à celui
que vous avez tapé.
Parce que j'ai changé le nom de mon fichier,
je dois me rappeler de le changer ici aussi dans la barre d'URL.
Boum.
Un autre problème qui se pose assez souvent est cette idée que vous obtenez,
ce que nous appellerons, des personnages bizarres.
L' une des principales raisons de
ce qui se passe est mon ancien favori, copier-coller.
Chaque fois que je vous donne du code et que vous le regardez via PowerPoint,
le problème est que lorsque vous le copiez et le collez, beaucoup de caractères ne traduisent pas
exactement comme vous l'espériez, et vous obtenez ce que nous appelons des caractères bizarres.
Le coupable numéro un est les citations.
Donc, chaque fois que vous tapez et que vous avez une sorte de chose bizarre que vous n'
attendez pas, revenez et essayez de taper le code à la main.
Donc, je vous ai montré comment créer et modifier un fichier dans Sublime.
Mais je veux m'assurer que tout le monde a une chance de voir
comment je peux créer des fichiers en utilisant les éditeurs qu'ils ont sur leur propre ordinateur.
Donc, je vais aussi vous montrer un exemple dans TextEdit et aussi dans le Bloc-notes.
J' espère vraiment que quand tu regarderas ces exemples, tu auras ton ordinateur dehors,
et tu taperas avec moi.
Allez-y et faites une pause, arrêtez les choses, n'allez pas dans la vidéo jusqu'à ce
que vous vous sentiez confiant que vous êtes au point que j'ai atteint moi-même.
Salut tout le monde !
Maintenant, on va faire un dossier avec TextEdit.
Et si je voulais être maléfique, je
vous montrerais un exemple très rapide et simple de faire un fichier dans TextEdit.
Mais au lieu de cela, je vais être très honnête avec toi et admettre que ça m'a pris environ
15 ou 20 minutes pour comprendre comment faire un fichier vraiment simple dans TextEdit.
Alors d'abord, laissez-moi vous montrer ce que j'ai fait de mal.
D' accord ?
Je vais aller de l'avant et coller mon code pour ma page très simple.
Ok, débarrassons-nous de ça.
On y va. Nous venons d'avoir notre en-tête et notre contenu.
Donc, vous pouvez taper ceci au fur et à mesure que nous allons, ou vous pouvez attendre.
Il est temps pour moi d'enregistrer le fichier.
Et ce que je dois faire, c'est que je dois m'assurer d'enregistrer dans le dossier approprié
avec le nom de fichier.
Donc, je vais aller de l'avant et appeler ce FirstPage et
je vais descendre ici et je veux m'assurer que je sauvegarde ceci comme une page Web.
Donc, l'une des options est .html, donc je vais cliquer dessus.
Je sais que j'ai mon firstpage.html,
c'est dans le dossier que je veux et j'ai vraiment l'impression que nous devrions être bons pour y aller.
Donc, je vais aller de l'avant et le sauver.
Maintenant, je vais aller ici dans mon dossier de pages web, ouvrir.
Et il va s'ouvrir dans Chrome.
Alors, voyons comment ça se passe.
Ce n'est pas ce que j'espérais quand nous avons commencé à enregistrer ce segment,
et il m'a fallu beaucoup de temps pour comprendre ce qui se passait.
La première chose que je suis allé vérifier, laissez-moi fermer cela,
est que je veux m'assurer que mon extension de fichier avait vraiment été .html.
Et c'était, il n'y avait pas de .txt ou .rtf après.
La prochaine chose que j'ai
vérifiée est que toutes mes citations allaient dans le bon sens.
Alors allons de l'avant et mettons-les, parce que si tu te souviens,
je te dis toujours que copier-coller peut parfois te donner de mauvaises citations.
Pour qu'on puisse revenir en arrière.
Toujours pas de chance.
Si vous allez utiliser TextEdit, vous devez réellement y aller et
apporter quelques modifications au programme TextEdit.
Ça n'a rien à voir avec ce que vous tapez.
Cela a à voir avec le programme TextEdit.
Donc je vais aller de l'avant, copier ça juste au cas où je le perdrais, et l'effacer.
Et je vais aller à TextEdit, sélectionner Préférences, et
vous pouvez voir que nous avons deux options.
Nouveaux documents et Ouvrir et enregistrer.
Donc l'une des premières choses que je vais dire est hey,
chaque fois que j'ai un nouveau document, je voudrais qu'il soit en texte clair.
Pas rtf, ou texte enrichi, mais texte brut.
La deuxième chose que vous voulez faire est d'aller ici pour ouvrir.
Voir l'affichage des fichiers HTML est du code HTML ?
On va aller de l'avant et cliquer dessus.
Et enfin, le plus important est que lorsque vous enregistrez vos fichiers,
nous voulons les enregistrer comme utf8.
Donc, je vais faire une pause ici une seconde,
juste une seconde, pendant que vous regardez votre propre menu TextEdit.
Vous voulez vous assurer que ces cases sont cochées et que
vous l'avez changée en unicode, utf8.
D' accord ?
Si vous avez tout gâché, descendez pour restaurer toutes les valeurs par défaut et réessayez.
Je vais fermer ça.
Je vais aller de l'avant et faire New, coller mon code dans.
Ooh, c'est très petit pour toi, mais c'est bon.
Effectuez Fichier > Enregistrer.
Et appelons-le FirstPage2.html.
Vous pouvez voir tout de suite il dit, voulez-vous utiliser l'extension HTML ou
le texte point ?
Et je vais le dire, utiliser HTML.
Avant de cliquer sur ce bien que je veux souligner qu'ici,
il montre qu'il va enregistrer comme unicode utf.8.
Je peux me débarrasser de cet avertissement, si je le veux, en décliquant sur ceci,
si aucune extension n'est fournie, utilisez .txt.
Donc, nous allons utiliser html.
Allons ici, croisons les doigts, espérons le meilleur.
Et maintenant, j'ai une page réussie.
Donc, si vous allez utiliser TextEdit, il n'y a pas vraiment grand-chose à faire,
sauf pour la première fois que vous l'avez configuré.
Assurez-vous d'aller dans les préférences.
De là, je peux maintenant entrer, faire des changements, nous l'avons fait.
Enregistrez et actualisez.
Donc, espérons maintenant que vous pouvez enregistrer et modifier un fichier avec succès.
Ok, alors disons que vous utilisez un PC pour créer vos fichiers.
Ce que vous voulez faire, c'est que vous voulez probablement utiliser le Bloc-notes au début car
c'est la version gratuite de l'éditeur qui est déjà sur votre machine.
La première chose que j'ai fait,
c'est que j'ai fait un dossier sur le bureau où je peux garder mes fichiers.
Je sais que c'est petit, vous ne pouvez probablement pas le voir, mais ça s'appelle des pages web.
Si vous ne savez pas comment créer un dossier, juste pour que vous le
sachiez, vous pouvez cliquer avec le bouton droit sur le dessus du bureau, aller dans Nouveau et Créer un dossier.
Une fois que vous avez créé le dossier où vous voulez enregistrer vos fichiers, je suis,
tout de suite, aller de l'avant et dire Fichier > Enregistrer,
et je vais nommer ce firstpage.html.
Il est très, très important que vous incluiez le .html.
Si vous ne l'incluez pas,
l'ordinateur va penser que vous travaillez simplement sur n'importe quel autre ancien type de fichier.
Donc je vais aller ici et le changer de documents texte à tous les fichiers.
Allez-y et économisez.
Oups, il existe déjà, mais je vais dire d'accord.
Maintenant, il est temps pour moi de mettre du contenu.
Je vais tricher un peu ici et juste copier et coller dans mon contenu,
même si vous allez devoir le taper peu à peu.
Encore une fois, j'ai mon doctype, mon langage HTML est l'anglais,
meta charset est UTF-8, mon titre et mon contenu.
Juste pour être en sécurité, je vais y aller et remettre mes citations.
Parce que les citations me rendent toujours nerveux quand je copierai et collez, que peut-être j'ai mis
dans une sorte de caractère que mon éditeur ne va pas reconnaître.
Maintenant que je suis assez heureux et sûr d'avoir les choses que je veux dans mon
fichier, je vais continuer à l'enregistrer à nouveau,
aller dans mon dossier, et cliquer sur FirstPage.
Et on y va.
Donc maintenant, chaque fois que vous allez changer votre fichier, vous pouvez simplement garder
les deux fenêtres ouvertes si vous avez la salle.
Effectuez vos modifications.
Job, j'ai un dossier.
Sauvegardez.
Et recharger.
Beau travail.
Vous avez créé un fichier à l'aide du Bloc-notes.