Bon retour.
Donc, dans cette leçon, nous allons commencer par faire un nouveau fichier en remplissant avec h t m l une ouverture dans le navigateur et nous allons aussi à apprendre sur la structure sous-jacente de chaque document HTML.
Donc, il ya quelques choses que chaque document a toujours une sorte de plaque-rondelle que nous allons apprendre.
Donc, pour commencer va aller à sublime et je vais faire un nouveau fichier.
Donc fichier nouveau fichier ou commande et puis je vais enregistrer le fichier et lui donner un nom.
Donc enregistrer fichier ou commande comme.
Donc, une fois que je le fais, nous allons lui donner un nom.
Appelons-le première page la page T.M. Et cette partie est très importante.
Dot h Timo.
Alors je vais taper sauver.
Et ce point chaque équipe je dis sublime.
Et quand je l'ouvre dans Chrome, il dit chrome C'est un h tim je vais fichier traité comme tel.
Nous pouvons donc écrire à Tim Allen ici.
Donc, nous allons commencer avec le seul tag que nous avons vu jusqu'à présent sont l'un des tags qui est un H-1.
Et vous remarquerez que c'est mis en évidence pour moi.
Donc, nous allons remplir ce.
Il s'agit de ma première balise et enregistrer ce fichier et vous verrez sublime sait que c'est H D M L donc il met en évidence il rend correspondants tags rouge.
Dans mon cas.
Maintenant, ce que nous voulons faire est effectivement ouvrir ce fichier et le visualiser car rappelez-vous chaque fois que c'est juste du texte, mais notre navigateur interprète et le transforme en quelque chose comme ceci ou cela.
Donc, pour obtenir Chrome pour l'ouvrir il ya quelques solutions.
Le premier est juste un double clic dessus et il l'ouvrira dans votre navigateur par défaut.
Si ce n'est pas le chrome, il fonctionnera toujours mais il va l'ouvrir dans Safari ou Firefox ou Internet Explorer et vous pouvez le voir, mais comme il l'ouvre, il ne me montre pas le html réel, il est de prendre le h lui sous-jacent et le transformer en Cette belle représentation visuelle.
Comme toujours, je peux afficher ma source de page et vous verrez que c'est juste une balise.
Donc certainement plus simple que quelque chose comme ça.
Mais sous-jacent, ils sont exactement les mêmes.
Et il ya probablement un H-1 sur cette page aussi.
Donc, une autre façon de faire.
Vous pouvez prendre le fichier clic droit et cliquer sur ouvrir avec Google Chrome ou vous pouvez cliquer dessus et le faire glisser vers Chrome et qui l'ouvrira aussi.
La même chose va pour sublimest bien ainsi si vous fermez accidentellement le dossier que vous pouvez le faire glisser ici et il le rouvrira.
Donc, juste pour vous montrer ce clic et je peux l'ouvrir.
Donc, malheureusement, je dois briser les nouvelles qui sont simples.
C'est Tim L que nous avons écrit jusqu'à présent est en fait légèrement mal.
L'étiquette d'e-mail elle-même est très bien, mais ce n'est pas un document valide.
Et c'est parce que nous manquons la structure sous-jacente que chaque page doit avoir.
Donc, il ressemble à ceci.
C'est beaucoup par rapport à ce que nous avons fait jusqu'ici.
Mais la bonne nouvelle, c'est qu'il y a deux bonnes nouvelles.
Un c'est toujours la même chose.
Et deux sublimes a un raccourci agréable qui nous donne cette structure très très rapidement avec seulement quatre lettres que nous avons à taper.
Donc, nous allons passer en revue ces morceaux individuellement et juste un petit peu mais je vais commencer en vous montrant juste comment l'obtenir dans sublime si sublime au lieu de h tim l fichier, nous pouvons taper le mot h tim L et Puis cliquez sur tabulation et nous obtenons automatiquement cette structure.
Alors passons à ce que cela fait.
D'abord, nous allons sauver.
Donc, il ya ce type de doc H il sur le haut et c'est un peu bizarre parce qu'il n'y a pas un type de doc de fermeture correspondant comme il ya H-G M-L et la tête et le titre et le corps doc type est seul.
Donc, allons à MD et juste vous montrer comment vous y arriver, je tape type MT-NW et puis le type de doc et il pourrait sembler idiot de vraiment parler de cela, mais c'est important parce que la découverte de cette information est vraiment ce qu'être un développeur est Googler quelque chose.
Comment trouvez-vous la bonne réponse.
Je vais être un disque cassé complet à ce sujet.
Mes élèves rient chaque fois que je parle de l'art de googler, mais c'est vraiment important.
Alors je suis ici.
Nous allons jeter un coup d'oeil.
Il indique que le type de document pour chaque Timofei est simple pour indiquer que votre contenu HMO utilise HDMI.
Cinq simplement utiliser doctype H-2 lui avec un point d'exclamation en face de lui et nous voulons utiliser HMO 5.
Nous parlerons exactement de ce qu'est un schmuck un 5 et ce qu'il n'est pas.
Dans une future vidéo.
Mais nous voulons l'utiliser.
C'est fondamentalement juste la version la plus récente de vieilli lui.
Donc, nous avons mis cela en haut.
Donc la prochaine chose dont nous allons parler est l'élément h t m l.
Donc, celui-ci est un peu plus difficile à trouver en recherchant qui font MT-NW un HMO.
Si nous avons juste l'élément là-bas, nous allons toujours chercher cette fin vide dans le nom.
Et cela nous dit que le vieillard élément racine représente la racine d'un document HMO.
Tous les autres éléments doivent être des descendants de cet élément.
Donc, c'est assez explicite.
Fondamentalement, tout ce que nous écrivons doit aller à l'intérieur de chaque élément.
Et plus important encore sous le contenu autorisé, il nous dit un élément de tête suivi par un corps qui est ce que nous avons une tête et un corps.
Alors jetons un coup d'oeil à ce que la tête est l'élément de tête.
Fournir des métadonnées d'informations générales sur le document, y compris son titre et des liens vers des définitions de scripts et de feuilles de style.
Donc ce que cela signifie est essentiellement tout ce que nous ne voyons pas sur la page en tant qu'utilisateur.
Donc, les choses comme les fichiers de police dans nos fichiers de stylesheet ou de fichiers javascript tous ceux vont dans la tête et puis le corps est l'endroit où nous mettons tout notre contenu.
Il représente le contenu d'un document HTML d'âge.
Donc, si nous revenons ici, je peux vous assurer une autre chose qui est la façon d'écrire des commentaires et niched lui.
Si je voulais écrire une note à moi-même si je viens d'écrire ce contenu va dans le corps et puis apparaissent, j'ai écrit une donnée va en tête.
Heureusement, cela ne fonctionnera pas parce que cela apparaîtra effectivement sur la page.
Son équipe traitera ce texte comme et je veux juste être une note à moi-même.
C'est donc quelque chose que vous pouvez faire dans chaque langage de programmation.
Vous pouvez transformer cela en un commentaire et un commentaire ressemble à ceci commence par un point d'exclamation de moins de signer deux tirets et puis un certain contenu et puis de l'autre côté deux tirets et un signe plus grand que.
Alors il peut taper ce que vous entendez vous tapez manuellement et vous pouvez le voir sorte de va gris dans sublime.
Mais un autre raccourci vraiment astucieux est que vous pouvez sélectionner une ligne, vous n'avez pas à la sélectionner, il suffit d'aller pour aligner et appuyez sur la barre oblique de commande et vous pouvez également voir, il peut aller jusqu'à elle et vous pouvez aller commenter commenter le commentaire.
Si vous oubliez cela et que vous ne voulez pas l'écrire.
Une autre bonne chose.
Disons que j'ai eu un tas de notes à moi-même, je peux les sélectionner tous et faire la même chose.
Slash de commande.
Génial.
Je vais donc garder ces commentaires ici qui ne sont que des notes pour moi.
Mon contenu va dans le corps.
Il va dans la tête.
Donc, cela signifie que si nous suivons nos propres notes notre contenu ici doit aller à l'intérieur de notre corps.
Donc nous ne devrions pas avoir rien flottant en dehors de l'élément H Tim L sauf pour doctype.
Tout le reste va dans la tête ou dans le corps.
Alors allons-y et ouvrez-le, assurez-vous qu'il ressemble à la même chose qu'avant.
Double-cliquez.
Vous pouvez voir qu'il semble identique.
Voyons voir la source de la page ressemble à la même chose.
Notez que nos commentaires n'apparaissent pas bien sûr seulement notre H-1 apparaît.
Une chose que nous manquons pendant que nous sommes ici est un titre.
Un titre est important non pas parce qu'il apparaît sur la page, il n'apparaîtra pas dans notre page actuelle ici.
Rappelez-vous que c'est dans la tête.
Donc, ce n'est que des métadonnées ce qu'il fait est deux choses.
L'un va déterminer le nom ou le texte qui va dans notre onglet apparaissent.
Et il est également important pour les moteurs de recherche et pour les autres pages lorsque d'autres pages liées à votre site ou lorsque vous allez à Google et vous recherchez MDA sur ces noms ici.
Ceux-ci proviennent des éléments du titre.
Donc, par exemple M.D. et célèbre 10 ans de document dans votre web, vous cliquez sur ce.
Vous pouvez voir ici, il dit MDA et célèbre, il est coupé.
Vous pouvez inspecter la page pour rechercher un élément de titre.
Donc beaucoup de choses ici nous allons.
Titre et célèbre 10 ans de documenter votre site Web.
Le blog mizzle.
Donc, le titre est important.
Donc, nous allons donner ArcSight un titre que nous allons appeler mon première page actualiser la montre ici et il met à jour.
C'est tout pour le moment.
Rappelez-vous deux choses.
Cette plaquette peut simplement taper H l onglet.
Vous n'auriez jamais plus d'un dans le document.
Mais juste pour vous rappeler html onglet et commentaires.
Vous pouvez faire avec barre de commande peut les cibler sur et hors tension.