1
00:00:00,000 --> 00:00:06,986

2
00:00:06,986 --> 00:00:10,450
>> DAVEN FARNHAM: Aujourd'hui, je vais
parler un peu de HTML,

3
00:00:10,450 --> 00:00:12,330
HyperText Markup Language.

4
00:00:12,330 --> 00:00:14,450
Vous voyez HTML partout de nos jours.

5
00:00:14,450 --> 00:00:17,190
En fait, si vous regardez ce
vidéo dans un navigateur, vous êtes

6
00:00:17,190 --> 00:00:19,120
voir HTML moment.

7
00:00:19,120 --> 00:00:22,760
HTML n'est pas un langage de programmation,
c'est plutôt un langage de balisage utilisé par

8
00:00:22,760 --> 00:00:25,460
navigateurs web d'afficher des pages
sur l'internet.

9
00:00:25,460 --> 00:00:30,410
>> Donc, vous demandez peut-être comment exactement est écrit
une page web en HTML différente

10
00:00:30,410 --> 00:00:33,574
d'écrire un programme dans une programmation
langage comme C?

11
00:00:33,574 --> 00:00:38,010
Eh bien, C est un langage très stricte
règles syntaxiques qui doivent être

12
00:00:38,010 --> 00:00:39,880
compilé avant de pouvoir courir.

13
00:00:39,880 --> 00:00:43,070
Si vous avez déjà oublié d'inclure une
virgule à la fin d'une instruction dans

14
00:00:43,070 --> 00:00:46,660
votre code C, vous savez de quoi je parle
sur en ce qui concerne la syntaxe stricte.

15
00:00:46,660 --> 00:00:50,360
>> navigateurs Web cependant, sont un peu plus
pardonner quand il s'agit de HTML.

16
00:00:50,360 --> 00:00:53,860
Même si votre HTML n'est pas syntaxiquement
correcte, votre page peut encore être

17
00:00:53,860 --> 00:00:57,150
affiché par un navigateur, mais il pourrait
regardez pas comme vous le souhaitez.

18
00:00:57,150 --> 00:00:59,640
Donc, il est toujours préférable de
suivre les règles.

19
00:00:59,640 --> 00:01:01,990
La meilleure façon d'obtenir une intuition
sur la façon dont les choses fonctionnent est de

20
00:01:01,990 --> 00:01:03,300
passer par un exemple.

21
00:01:03,300 --> 00:01:07,360
>> Donc, ce que nous avons ici est une base
modèle pour une page Web.

22
00:01:07,360 --> 00:01:10,690
Vous avez probablement remarqué beaucoup de choses
entre les chevrons.

23
00:01:10,690 --> 00:01:12,900
Eh bien, ce ne sont que des étiquettes.

24
00:01:12,900 --> 00:01:15,810
Balises informent essentiellement les navigateurs Web
que, hé, quelque chose

25
00:01:15,810 --> 00:01:17,150
est sur votre route.

26
00:01:17,150 --> 00:01:20,770
Rappelez-vous cependant, chaque fois que vous ouvrez un
tag, vous devez fermer une fois que vous êtes

27
00:01:20,770 --> 00:01:21,750
fait de l'utiliser.

28
00:01:21,750 --> 00:01:24,690
>> Ainsi, par exemple, j'ouvre une section
de code avec ouvert

29
00:01:24,690 --> 00:01:26,960
corps de support, ferme la parenthèse.

30
00:01:26,960 --> 00:01:31,280
Je puis ajouter un peu de texte, dans ce cas, mon
première page web, alors quand je suis allé à

31
00:01:31,280 --> 00:01:35,540
fermer cette partie, j'utilise presque une
tag identique sauf que cette fois avec un

32
00:01:35,540 --> 00:01:37,660
barre oblique avant le corps.

33
00:01:37,660 --> 00:01:41,140
En général, c'est le format que vous êtes
allez utiliser chaque fois que vous ouvrez

34
00:01:41,140 --> 00:01:42,680
et les balises de fermeture.

35
00:01:42,680 --> 00:01:47,900
Ensemble, une balise d'ouverture et une balise de fin
composer ce qu'on appelle un élément.

36
00:01:47,900 --> 00:01:51,870
>> Si vous regardez la première ligne, vous aurez
voir un point d'exclamation suivi d'

37
00:01:51,870 --> 00:01:53,350
DOCTYPE html.

38
00:01:53,350 --> 00:01:56,280
C'est vraiment juste dit de votre navigateur
que le fichier est une page web

39
00:01:56,280 --> 00:01:58,280
écrit en HTML.

40
00:01:58,280 --> 00:02:01,970
La balise HTML dit en substance,
voici le HTML.

41
00:02:01,970 --> 00:02:04,950
Ensuite, nous avons une étiquette de tête avec
une balise de titre à l'intérieur.

42
00:02:04,950 --> 00:02:09,430
L'étiquette de la tête que vous pouvez penser que
comprenant un code HTML qui vient de

43
00:02:09,430 --> 00:02:12,670
la majeure partie de votre page Web de
contenu réel.

44
00:02:12,670 --> 00:02:16,700
>> En général, vous mettez le titre de votre
page web ici, mais il y en a

45
00:02:16,700 --> 00:02:19,350
d'autres balises qui peuvent apparaître
ici aussi.

46
00:02:19,350 --> 00:02:25,020
Ensuite vient le corps de votre page Web, la
viande réelle et les os de votre site web.

47
00:02:25,020 --> 00:02:28,910
Dans notre exemple, nous venons de mettre simple
phrase, ma première page Web,

48
00:02:28,910 --> 00:02:34,100
qui, si nous gérons notre site, se penchera
un petit quelque chose de ce genre.

49
00:02:34,100 --> 00:02:36,810
Notre page web n'est pas trop étrange,
mais ne vous inquiétez pas.

50
00:02:36,810 --> 00:02:39,210
Nous allons embellir bientôt.

51
00:02:39,210 --> 00:02:44,070
>> Donc le code HTML ci-dessus, nous allons vous donner un très
modèle de base pour une page Web,

52
00:02:44,070 --> 00:02:46,310
rien d'extraordinaire, juste le squelette.

53
00:02:46,310 --> 00:02:49,160
Mais si je crée une page web,
si je veux ajouter une

54
00:02:49,160 --> 00:02:50,760
image, disons, de moi-même?

55
00:02:50,760 --> 00:02:52,760
Eh bien, je peux le faire.

56
00:02:52,760 --> 00:02:55,460
Il ya deux façons de
ajouter des images à votre site.

57
00:02:55,460 --> 00:02:59,780
Si l'image est dans le même dossier que
votre fichier HTML, vous pouvez créer un lien vers le

58
00:02:59,780 --> 00:03:01,950
image via le chemin comme ceci.

59
00:03:01,950 --> 00:03:05,910
>> Vous ouvrez avec une balise d'image suivie
par dans l'attribut Alt dans le

60
00:03:05,910 --> 00:03:07,240
la source de l'image.

61
00:03:07,240 --> 00:03:12,030
La valeur de l'attribut alt est quelques-uns
texte alternatif au cas où un utilisateur ne peut pas

62
00:03:12,030 --> 00:03:13,580
voir l'image.

63
00:03:13,580 --> 00:03:19,680
Sinon, vous pouvez également créer un lien vers
images via une URL complète, comme cela.

64
00:03:19,680 --> 00:03:24,180
Maintenant, il n'existe pas vraiment ce site,
mais s'il y avait une photo de

65
00:03:24,180 --> 00:03:27,760
moi à cette adresse, je pourrais utiliser
l'URL de la source à inclure

66
00:03:27,760 --> 00:03:29,930
son image sur mon site.

67
00:03:29,930 --> 00:03:35,590
Quoi qu'il en soit, vous vous retrouvez avec beaucoup
site plus joli, quelque chose comme ça.

68
00:03:35,590 --> 00:03:39,730
>> Eh bien, c'est assez cool, mais je sorte
de vouloir un peu de texte ici.

69
00:03:39,730 --> 00:03:43,020
Donc, nous allons juste ajouter quelque chose
super simple au-dessus du

70
00:03:43,020 --> 00:03:45,210
image, comme l'en-tête.

71
00:03:45,210 --> 00:03:50,830
Tout ce que j'ai fait jusqu'ici est d'utiliser l'en-tête
tag, H1, et un saut de ligne tag, br.

72
00:03:50,830 --> 00:03:54,900
La balise d'en-tête fait la police un peu
peu plus grand et plus important.

73
00:03:54,900 --> 00:03:58,930
La balise de saut de ligne, sur l'autre
part, est plutôt cool.

74
00:03:58,930 --> 00:04:03,720
Contrairement à la plupart des autres balises, vous n'avez pas
une balise d'ouverture et de clôture pause, juste

75
00:04:03,720 --> 00:04:05,120
celui indiqué ci-dessus.

76
00:04:05,120 --> 00:04:10,420
C'est parce que la rupture n'a pas de contenu
et est donc un élément vide.

77
00:04:10,420 --> 00:04:14,940
>> Les éléments vides de ce genre, vous pouvez ouvrir
et près simultanément par simple

78
00:04:14,940 --> 00:04:20,420
y compris une barre oblique à la
fin de la déclaration initiale.

79
00:04:20,420 --> 00:04:24,390
Alors maintenant, mon site est un peu
quelque chose comme ça.

80
00:04:24,390 --> 00:04:27,410
Mieux, mais il se sent type de
comme une impasse.

81
00:04:27,410 --> 00:04:30,850
Il n'y a nulle part ailleurs où aller à part
à partir de cette page.

82
00:04:30,850 --> 00:04:33,075
Eh bien, nous allons résoudre ce problème en
y compris un lien.

83
00:04:33,075 --> 00:04:36,860
>> Ce que je vais faire ici est d'utiliser un
attribuer notée A et faire le

84
00:04:36,860 --> 00:04:40,780
l'image un lien vers, disons, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
De cette façon, chaque fois que quelqu'un clique sur moi,
leur navigateur seront dirigés vers

86
00:04:44,460 --> 00:04:47,810
l'autre, probablement plus
utile, page Web.

87
00:04:47,810 --> 00:04:51,040
J'ai dû réduire la taille de la
texte un peu parce que notre page web est

88
00:04:51,040 --> 00:04:52,470
obtenir plus avancé.

89
00:04:52,470 --> 00:04:54,590
Mais j'espère, c'est toujours clair.

90
00:04:54,590 --> 00:04:59,460
Mon site est exactement la même que
maintenant, chaque fois que je clique sur l'image,

91
00:04:59,460 --> 00:05:04,410
mon navigateur va ouvrir une autre
onglet pour la page web CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Enfin, disons que je vais le style
l'utilisation de ce site Web plus tard CSS.

93
00:05:08,970 --> 00:05:11,730
CSS est ce qui est connu en tant que
feuille de style en cascade.

94
00:05:11,730 --> 00:05:15,230
Et il prévoit essentiellement un système efficace
moyen d'éditer et de style

95
00:05:15,230 --> 00:05:16,910
blocs similaires de code.

96
00:05:16,910 --> 00:05:21,290
Je veux commencer à organiser mon HTML
rendre plus facile à coiffer la suite.

97
00:05:21,290 --> 00:05:26,900
Ici, j'ai mis en place deux types de
identificateurs pour aider à organiser mon code.

98
00:05:26,900 --> 00:05:31,170
J'ai utilisé l'attribut ID dans un
division, ou balise div, et je l'ai utilisé une

99
00:05:31,170 --> 00:05:34,120
L'attribut de classe à l'intérieur
une autre balise div.

100
00:05:34,120 --> 00:05:37,190
>> Attributs id et class
travailler de façon similaire.

101
00:05:37,190 --> 00:05:41,210
La seule différence est que vous ne pouvez avoir
un élément, l'ID spécifique, mais

102
00:05:41,210 --> 00:05:43,600
un nombre quelconque d'éléments
peuvent partager une classe.

103
00:05:43,600 --> 00:05:47,690
Ainsi, par exemple, je peux utiliser la classe
image plusieurs fois, mais je ne peux pas

104
00:05:47,690 --> 00:05:50,533
créer une autre division
avec le haut de ID.

105
00:05:50,533 --> 00:05:54,750
Bien que je ne suis pas allé en CSS,
une autre langue couramment utilisée

106
00:05:54,750 --> 00:05:59,700
aux côtés de HTML, une fois que je commence style
mon code CSS, je peux utiliser ces

107
00:05:59,700 --> 00:06:03,730
caractéristiques organisationnelles à l'influence
l'esthétique de ma page web.

108
00:06:03,730 --> 00:06:07,600
>> Tout dans le top de la division
aura Stylings similaires ou tout

109
00:06:07,600 --> 00:06:12,010
autre groupe de groupe de HTML I dans le
image classe partagera un aspect similaire.

110
00:06:12,010 --> 00:06:15,700
C'est beaucoup plus facile que d'essayer de modifier
et des images ou des blocs de type

111
00:06:15,700 --> 00:06:17,690
texte individuellement.

112
00:06:17,690 --> 00:06:21,480
>> Donc nous sommes allés sur les bases de la façon
de faire une page web avec HTML.

113
00:06:21,480 --> 00:06:25,280
HTML a un tas d'autres fonctionnalités trop
que lorsqu'il est associé à d'autres langues

114
00:06:25,280 --> 00:06:29,220
comme CSS et JavaScript peuvent vraiment
font pages se détachent.

115
00:06:29,220 --> 00:06:32,960
La meilleure façon de se familiariser avec
HTML est juste pour s'amuser avec elle,

116
00:06:32,960 --> 00:06:35,120
voir ce qui fonctionne et ce qui ne fonctionne pas.

117
00:06:35,120 --> 00:06:36,570
>> Mon nom est Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
C'est CS50.

119
00:06:37,820 --> 00:06:40,640

120
00:06:40,640 --> 00:06:45,690
>> Ainsi, par exemple, je peux utiliser
l'image de la classe -

121
00:06:45,690 --> 00:06:48,028
Non, il ya tellement de nombreux attributs.

122
00:06:48,028 --> 00:06:52,500

123
00:06:52,500 --> 00:06:53,950
Mon nom est Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
C'est CS 650.

125
00:06:58,560 --> 00:06:59,810
Je veux dire CSS.

126
00:06:59,810 --> 00:07:02,325

127
00:07:02,325 --> 00:07:03,575
C'est CSS.

128
00:07:03,575 --> 00:07:05,408