1
00:00:00,230 --> 00:00:00,950
Bon retour.

2
00:00:01,140 --> 00:00:11,930
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.

3
00:00:11,940 --> 00:00:17,820
Donc, il ya quelques choses que chaque document a toujours une sorte de plaque-rondelle que nous allons apprendre.

4
00:00:17,820 --> 00:00:22,880
Donc, pour commencer va aller à sublime et je vais faire un nouveau fichier.

5
00:00:23,100 --> 00:00:29,610
Donc fichier nouveau fichier ou commande et puis je vais enregistrer le fichier et lui donner un nom.

6
00:00:29,610 --> 00:00:33,340
Donc enregistrer fichier ou commande comme.

7
00:00:34,080 --> 00:00:37,040
Donc, une fois que je le fais, nous allons lui donner un nom.

8
00:00:37,140 --> 00:00:42,980
Appelons-le première page la page T.M. Et cette partie est très importante.

9
00:00:42,990 --> 00:00:44,950
Dot h Timo.

10
00:00:45,690 --> 00:00:47,120
Alors je vais taper sauver.

11
00:00:47,670 --> 00:00:50,170
Et ce point chaque équipe je dis sublime.

12
00:00:50,340 --> 00:00:55,790
Et quand je l'ouvre dans Chrome, il dit chrome C'est un h tim je vais fichier traité comme tel.

13
00:00:56,220 --> 00:00:58,000
Nous pouvons donc écrire à Tim Allen ici.

14
00:00:58,260 --> 00:01:04,460
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.

15
00:01:04,800 --> 00:01:06,740
Et vous remarquerez que c'est mis en évidence pour moi.

16
00:01:06,780 --> 00:01:08,040
Donc, nous allons remplir ce.

17
00:01:08,040 --> 00:01:19,020
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.

18
00:01:19,020 --> 00:01:19,950
Dans mon cas.

19
00:01:20,130 --> 00:01:31,910
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.

20
00:01:31,920 --> 00:01:36,230
Donc, pour obtenir Chrome pour l'ouvrir il ya quelques solutions.

21
00:01:36,270 --> 00:01:41,370
Le premier est juste un double clic dessus et il l'ouvrira dans votre navigateur par défaut.

22
00:01:41,490 --> 00:01:58,090
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.

23
00:01:58,470 --> 00:02:03,340
Comme toujours, je peux afficher ma source de page et vous verrez que c'est juste une balise.

24
00:02:03,510 --> 00:02:07,470
Donc certainement plus simple que quelque chose comme ça.

25
00:02:09,330 --> 00:02:11,670
Mais sous-jacent, ils sont exactement les mêmes.

26
00:02:11,940 --> 00:02:15,910
Et il ya probablement un H-1 sur cette page aussi.

27
00:02:15,960 --> 00:02:17,770
Donc, une autre façon de faire.

28
00:02:18,000 --> 00:02:27,720
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.

29
00:02:27,720 --> 00:02:33,470
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.

30
00:02:33,570 --> 00:02:40,200
Donc, juste pour vous montrer ce clic et je peux l'ouvrir.

31
00:02:40,440 --> 00:02:44,380
Donc, malheureusement, je dois briser les nouvelles qui sont simples.

32
00:02:44,370 --> 00:02:47,650
C'est Tim L que nous avons écrit jusqu'à présent est en fait légèrement mal.

33
00:02:47,850 --> 00:02:52,140
L'étiquette d'e-mail elle-même est très bien, mais ce n'est pas un document valide.

34
00:02:52,140 --> 00:02:57,260
Et c'est parce que nous manquons la structure sous-jacente que chaque page doit avoir.

35
00:02:57,840 --> 00:02:59,320
Donc, il ressemble à ceci.

36
00:02:59,490 --> 00:03:01,370
C'est beaucoup par rapport à ce que nous avons fait jusqu'ici.

37
00:03:01,380 --> 00:03:03,950
Mais la bonne nouvelle, c'est qu'il y a deux bonnes nouvelles.

38
00:03:03,960 --> 00:03:05,560
Un c'est toujours la même chose.

39
00:03:05,900 --> 00:03:13,880
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.

40
00:03:14,280 --> 00:03:29,690
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.

41
00:03:30,000 --> 00:03:32,400
Alors passons à ce que cela fait.

42
00:03:32,400 --> 00:03:33,460
D'abord, nous allons sauver.

43
00:03:33,570 --> 00:03:48,650
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.

44
00:03:48,690 --> 00:04:03,700
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.

45
00:04:03,720 --> 00:04:05,500
Comment trouvez-vous la bonne réponse.

46
00:04:05,520 --> 00:04:07,740
Je vais être un disque cassé complet à ce sujet.

47
00:04:07,770 --> 00:04:12,660
Mes élèves rient chaque fois que je parle de l'art de googler, mais c'est vraiment important.

48
00:04:12,930 --> 00:04:13,760
Alors je suis ici.

49
00:04:13,800 --> 00:04:14,910
Nous allons jeter un coup d'oeil.

50
00:04:15,030 --> 00:04:20,210
Il indique que le type de document pour chaque Timofei est simple pour indiquer que votre contenu HMO utilise HDMI.

51
00:04:20,210 --> 00:04:27,770
Cinq simplement utiliser doctype H-2 lui avec un point d'exclamation en face de lui et nous voulons utiliser HMO 5.

52
00:04:27,870 --> 00:04:31,530
Nous parlerons exactement de ce qu'est un schmuck un 5 et ce qu'il n'est pas.

53
00:04:31,530 --> 00:04:32,580
Dans une future vidéo.

54
00:04:32,790 --> 00:04:34,070
Mais nous voulons l'utiliser.

55
00:04:34,140 --> 00:04:36,720
C'est fondamentalement juste la version la plus récente de vieilli lui.

56
00:04:36,990 --> 00:04:38,660
Donc, nous avons mis cela en haut.

57
00:04:39,030 --> 00:04:42,330
Donc la prochaine chose dont nous allons parler est l'élément h t m l.

58
00:04:42,510 --> 00:04:47,490
Donc, celui-ci est un peu plus difficile à trouver en recherchant qui font MT-NW un HMO.

59
00:04:47,670 --> 00:04:56,030
Si nous avons juste l'élément là-bas, nous allons toujours chercher cette fin vide dans le nom.

60
00:04:56,040 --> 00:05:01,350
Et cela nous dit que le vieillard élément racine représente la racine d'un document HMO.

61
00:05:01,500 --> 00:05:04,930
Tous les autres éléments doivent être des descendants de cet élément.

62
00:05:05,040 --> 00:05:06,500
Donc, c'est assez explicite.

63
00:05:06,620 --> 00:05:10,310
Fondamentalement, tout ce que nous écrivons doit aller à l'intérieur de chaque élément.

64
00:05:10,710 --> 00:05:22,640
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.

65
00:05:23,820 --> 00:05:28,140
Alors jetons un coup d'oeil à ce que la tête est l'élément de tête.

66
00:05:28,140 --> 00:05:36,010
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.

67
00:05:36,330 --> 00:05:41,200
Donc ce que cela signifie est essentiellement tout ce que nous ne voyons pas sur la page en tant qu'utilisateur.

68
00:05:41,400 --> 00:05:53,200
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.

69
00:05:53,610 --> 00:05:57,210
Il représente le contenu d'un document HTML d'âge.

70
00:05:57,210 --> 00:06:04,300
Donc, si nous revenons ici, je peux vous assurer une autre chose qui est la façon d'écrire des commentaires et niched lui.

71
00:06:04,530 --> 00:06:21,000
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.

72
00:06:21,750 --> 00:06:26,580
Heureusement, cela ne fonctionnera pas parce que cela apparaîtra effectivement sur la page.

73
00:06:26,720 --> 00:06:31,070
Son équipe traitera ce texte comme et je veux juste être une note à moi-même.

74
00:06:31,230 --> 00:06:33,570
C'est donc quelque chose que vous pouvez faire dans chaque langage de programmation.

75
00:06:33,690 --> 00:06:47,830
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.

76
00:06:49,050 --> 00:06:59,680
Alors il peut taper ce que vous entendez vous tapez manuellement et vous pouvez le voir sorte de va gris dans sublime.

77
00:07:00,000 --> 00:07:21,160
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.

78
00:07:21,180 --> 00:07:24,230
Si vous oubliez cela et que vous ne voulez pas l'écrire.

79
00:07:24,260 --> 00:07:25,200
Une autre bonne chose.

80
00:07:25,250 --> 00:07:30,380
Disons que j'ai eu un tas de notes à moi-même, je peux les sélectionner tous et faire la même chose.

81
00:07:30,420 --> 00:07:33,000
Slash de commande.

82
00:07:34,440 --> 00:07:35,320
Génial.

83
00:07:35,400 --> 00:07:38,860
Je vais donc garder ces commentaires ici qui ne sont que des notes pour moi.

84
00:07:39,000 --> 00:07:40,740
Mon contenu va dans le corps.

85
00:07:40,830 --> 00:07:43,000
Il va dans la tête.

86
00:07:43,830 --> 00:07:51,670
Donc, cela signifie que si nous suivons nos propres notes notre contenu ici doit aller à l'intérieur de notre corps.

87
00:07:52,680 --> 00:07:57,450
Donc nous ne devrions pas avoir rien flottant en dehors de l'élément H Tim L sauf pour doctype.

88
00:07:57,540 --> 00:08:02,280
Tout le reste va dans la tête ou dans le corps.

89
00:08:02,280 --> 00:08:06,570
Alors allons-y et ouvrez-le, assurez-vous qu'il ressemble à la même chose qu'avant.

90
00:08:06,570 --> 00:08:07,470
Double-cliquez.

91
00:08:07,620 --> 00:08:09,250
Vous pouvez voir qu'il semble identique.

92
00:08:09,420 --> 00:08:12,960
Voyons voir la source de la page ressemble à la même chose.

93
00:08:12,960 --> 00:08:17,580
Notez que nos commentaires n'apparaissent pas bien sûr seulement notre H-1 apparaît.

94
00:08:17,580 --> 00:08:20,590
Une chose que nous manquons pendant que nous sommes ici est un titre.

95
00:08:20,880 --> 00:08:27,670
Un titre est important non pas parce qu'il apparaît sur la page, il n'apparaîtra pas dans notre page actuelle ici.

96
00:08:27,690 --> 00:08:28,980
Rappelez-vous que c'est dans la tête.

97
00:08:29,040 --> 00:08:32,660
Donc, ce n'est que des métadonnées ce qu'il fait est deux choses.

98
00:08:32,700 --> 00:08:37,270
L'un va déterminer le nom ou le texte qui va dans notre onglet apparaissent.

99
00:08:37,740 --> 00:08:49,890
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.

100
00:08:49,880 --> 00:08:52,770
Ceux-ci proviennent des éléments du titre.

101
00:08:52,760 --> 00:08:58,070
Donc, par exemple M.D. et célèbre 10 ans de document dans votre web, vous cliquez sur ce.

102
00:08:58,470 --> 00:09:02,120
Vous pouvez voir ici, il dit MDA et célèbre, il est coupé.

103
00:09:02,190 --> 00:09:07,500
Vous pouvez inspecter la page pour rechercher un élément de titre.

104
00:09:07,500 --> 00:09:08,730
Donc beaucoup de choses ici nous allons.

105
00:09:08,760 --> 00:09:12,250
Titre et célèbre 10 ans de documenter votre site Web.

106
00:09:12,600 --> 00:09:13,810
Le blog mizzle.

107
00:09:14,340 --> 00:09:16,340
Donc, le titre est important.

108
00:09:17,070 --> 00:09:25,680
Donc, nous allons donner ArcSight un titre que nous allons appeler mon première page actualiser la montre ici et il met à jour.

109
00:09:25,710 --> 00:09:27,080
C'est tout pour le moment.

110
00:09:27,090 --> 00:09:28,420
Rappelez-vous deux choses.

111
00:09:28,540 --> 00:09:31,640
Cette plaquette peut simplement taper H l onglet.

112
00:09:31,770 --> 00:09:33,720
Vous n'auriez jamais plus d'un dans le document.

113
00:09:33,890 --> 00:09:37,850
Mais juste pour vous rappeler html onglet et commentaires.

114
00:09:37,980 --> 00:09:41,880
Vous pouvez faire avec barre de commande peut les cibler sur et hors tension.