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

2
00:00:06,986 --> 00:00:10,450
>> Дейвън Фарнъм: Днес, аз отивам да
поговорим малко за HTML,

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

4
00:00:12,330 --> 00:00:14,450
Виждате ли HTML навсякъде тези дни.

5
00:00:14,450 --> 00:00:17,190
В действителност, ако гледате този
видео в браузъра, вие сте

6
00:00:17,190 --> 00:00:19,120
виждайки HTML точно сега.

7
00:00:19,120 --> 00:00:22,760
HTML не е език за програмиране,
по-скоро, това е език за маркиране, използван от

8
00:00:22,760 --> 00:00:25,460
уеб браузъри, за да правят страници
в интернет.

9
00:00:25,460 --> 00:00:30,410
>> Така че може да попитам, как точно е писане
уеб страница в HTML различен

10
00:00:30,410 --> 00:00:33,574
от написването на програма в програмирането
език като C?

11
00:00:33,574 --> 00:00:38,010
Е, C е език с много строг
синтактични правила, които трябва да бъдат

12
00:00:38,010 --> 00:00:39,880
съставен преди да може да се изпълнява.

13
00:00:39,880 --> 00:00:43,070
Ако някога сте забравили да включите
точка и запетая в края на отчет в

14
00:00:43,070 --> 00:00:46,660
Вашата C код, знаеш ли за какво говоря
за по отношение на стриктното синтаксис.

15
00:00:46,660 --> 00:00:50,360
>> Уеб браузърите обаче, са малко по-
прощава, когато става дума за HTML.

16
00:00:50,360 --> 00:00:53,860
Дори и ако вашият HTML не е синтактично
правилно, вашата страница може все още да

17
00:00:53,860 --> 00:00:57,150
показва от браузъра, но може да
не изглежда като сте възнамерявали.

18
00:00:57,150 --> 00:00:59,640
Така че това е винаги най-добре да
следват правилата.

19
00:00:59,640 --> 00:01:01,990
Най-добрият начин да се сдобиете с интуиция
за това как работят нещата е да се

20
00:01:01,990 --> 00:01:03,300
мине през един пример.

21
00:01:03,300 --> 00:01:07,360
>> Така че това, което имаме тук, е базов
проект за уеб страница.

22
00:01:07,360 --> 00:01:10,690
Вероятно сте забелязали много неща
между ъглови скоби.

23
00:01:10,690 --> 00:01:12,900
Е, тези, които са само на тагове.

24
00:01:12,900 --> 00:01:15,810
Tags основно информират уеб браузъри
че, хей, нещо

25
00:01:15,810 --> 00:01:17,150
идва вашия начин.

26
00:01:17,150 --> 00:01:20,770
Не забравяйте обаче, всеки път, когато отворите
етикет, трябва да го затворите, след като сте

27
00:01:20,770 --> 00:01:21,750
направи го използвате.

28
00:01:21,750 --> 00:01:24,690
>> Така например, аз се отвори секция
на код с отворен

29
00:01:24,690 --> 00:01:26,960
скоба на тялото, в близост скоба.

30
00:01:26,960 --> 00:01:31,280
После добавете някакъв текст, в този случай, ми
първата уеб страница, а след това, когато отидох да

31
00:01:31,280 --> 00:01:35,540
затворите този раздел, аз използвам почти
идентичен етикет само че този път с

32
00:01:35,540 --> 00:01:37,660
наклонена черта преди тялото.

33
00:01:37,660 --> 00:01:41,140
Като цяло, това е формата, който сте
отивам да се използва всеки път, когато отваряте

34
00:01:41,140 --> 00:01:42,680
и затварящи тагове.

35
00:01:42,680 --> 00:01:47,900
Заедно с отворен етикет и край тагове
композира, което се нарича елемент.

36
00:01:47,900 --> 00:01:51,870
>> Ако се вгледате в първата линия, ще
видите удивителен знак, последван от

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

38
00:01:53,350 --> 00:01:56,280
Това е наистина просто казвам вашия браузър
че файлът е уеб страница

39
00:01:56,280 --> 00:01:58,280
написан на HTML.

40
00:01:58,280 --> 00:02:01,970
HTML маркер по същество се казва,
тук идва някакъв HTML.

41
00:02:01,970 --> 00:02:04,950
Тогава имаме таг глава с
маркер заглавие вътре в нея.

42
00:02:04,950 --> 00:02:09,430
Маркерът главата можеш да се сетиш като
включващ HTML код, който идва за

43
00:02:09,430 --> 00:02:12,670
по-голямата част от вашия уеб страницата си
действителното съдържание.

44
00:02:12,670 --> 00:02:16,700
>> Като цяло, най-напред сложите заглавие на
уеб страница тук, макар че има някои,

45
00:02:16,700 --> 00:02:19,350
други етикети, които могат да се появят
тук, както добре.

46
00:02:19,350 --> 00:02:25,020
После идва тялото си уеб страницата, на
застроена месо и кости на вашия сайт.

47
00:02:25,020 --> 00:02:28,910
В нашия пример, ние току-що сложи прост
изречение, My First уеб страница,

48
00:02:28,910 --> 00:02:34,100
които, ако бягаме нашия сайт, ще изглежда
малко нещо като това.

49
00:02:34,100 --> 00:02:36,810
Нашата уеб страница не е твърде странна,
но не се притеснявайте.

50
00:02:36,810 --> 00:02:39,210
Ние ще го подсилят скоро.

51
00:02:39,210 --> 00:02:44,070
>> Така че по-горе HTML, ние ще ви дам един много
Основният шаблон за уеб страница,

52
00:02:44,070 --> 00:02:46,310
нищо фантазия, само голите кости.

53
00:02:46,310 --> 00:02:49,160
Но ако аз съм създаване на уеб страница,
Ами ако искате да добавите

54
00:02:49,160 --> 00:02:50,760
картина на, да речем, себе си?

55
00:02:50,760 --> 00:02:52,760
Е, аз мога да направя това.

56
00:02:52,760 --> 00:02:55,460
Има няколко начина да се
добавяте изображения към вашия сайт.

57
00:02:55,460 --> 00:02:59,780
Ако изображението е в същата папка, като
вашия HTML файл, можете да се свържете към

58
00:02:59,780 --> 00:03:01,950
изображение чрез път по този начин.

59
00:03:01,950 --> 00:03:05,910
>> Отваряш с етикет образ последвано
от в Alt белег в

60
00:03:05,910 --> 00:03:07,240
източник на изображение.

61
00:03:07,240 --> 00:03:12,030
Стойността на атрибута е Alt е просто някакъв
алтернативен текст, в случай, че потребителят не може да

62
00:03:12,030 --> 00:03:13,580
виж картинката.

63
00:03:13,580 --> 00:03:19,680
Като алтернатива, можете да се свържете с
изображения чрез пълен URL, ето така.

64
00:03:19,680 --> 00:03:24,180
Сега, че сайта наистина не съществува,
но ако имаше снимка на

65
00:03:24,180 --> 00:03:27,760
мен на този адрес, мога да използвам
URL адреса на източника, за да включите

66
00:03:27,760 --> 00:03:29,930
имиджа си на моя сайт.

67
00:03:29,930 --> 00:03:35,590
Така или иначе, ти свърши с много по-
хубава уебсайт, нещо като това.

68
00:03:35,590 --> 00:03:39,730
>> Е, това е много готино, но аз вид
на искам някакъв текст тук, както добре.

69
00:03:39,730 --> 00:03:43,020
Така че нека просто добавете нещо
супер проста над

70
00:03:43,020 --> 00:03:45,210
изображение, подобно на заглавието.

71
00:03:45,210 --> 00:03:50,830
Всичко, което съм правил досега, е да използвате заглавието
тагове, H1, и нов ред тагове, бр.

72
00:03:50,830 --> 00:03:54,900
Маркерът заглавна прави шрифта малко
малко по-големи и по-забележима.

73
00:03:54,900 --> 00:03:58,930
Маркерът ред, от друга страна
страна, е нещо страхотно.

74
00:03:58,930 --> 00:04:03,720
За разлика от повечето други тагове, не е нужно
за отваряне и затваряне почивка етикет, просто

75
00:04:03,720 --> 00:04:05,120
този, показан по-горе.

76
00:04:05,120 --> 00:04:10,420
Това е така, защото почивка няма съдържание
и следователно, празен елемент.

77
00:04:10,420 --> 00:04:14,940
>> Празните елементи като този, можете да отворите
и в близост едновременно просто чрез

78
00:04:14,940 --> 00:04:20,420
включително наклонена черта в
край на първоначалната декларация.

79
00:04:20,420 --> 00:04:24,390
Така че сега моя сайт изглежда малко
нещо като това.

80
00:04:24,390 --> 00:04:27,410
По-добре, но тя някак се чувства
като задънена улица.

81
00:04:27,410 --> 00:04:30,850
Няма къде другаде да отидат настрана
от този главната страница.

82
00:04:30,850 --> 00:04:33,075
Е, нека да се определи, че от
включително връзка.

83
00:04:33,075 --> 00:04:36,860
>> Това, което аз ще направя тук, е да използвате един
атрибут означава с и да се направи

84
00:04:36,860 --> 00:04:40,780
изображение линк към, да кажем, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
По този начин, всеки път, когато някой кликне върху мен,
техния браузър ще бъде насочена към

86
00:04:44,460 --> 00:04:47,810
друга, може би по-
полезен, уеб страница.

87
00:04:47,810 --> 00:04:51,040
Аз съм имал да се намали размера на
текстови малко, защото нашата уеб страница е

88
00:04:51,040 --> 00:04:52,470
получаване на по-напреднали.

89
00:04:52,470 --> 00:04:54,590
Но да се надяваме, че все още е ясно.

90
00:04:54,590 --> 00:04:59,460
Моят сайт изглежда точно същото, само
Сега, всеки път, когато щракнете върху снимката,

91
00:04:59,460 --> 00:05:04,410
браузъра ще се отвори още един
В раздела за уеб страницата CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> На последно място, нека да кажа, че отивам да стил
този сайт по-късно с помощта на CSS.

93
00:05:08,970 --> 00:05:11,730
CSS е това, което е известно като
каскаден стил лист.

94
00:05:11,730 --> 00:05:15,230
И то основно осигурява ефикасен
начин да редактирате и стил

95
00:05:15,230 --> 00:05:16,910
подобни блокове от код.

96
00:05:16,910 --> 00:05:21,290
Искам да започна организирането на моя HTML да
направи по-лесно да оформите по-късно.

97
00:05:21,290 --> 00:05:26,900
Ето, аз създаде две различни видове
идентификатори, за да помогнат организира моя код.

98
00:05:26,900 --> 00:05:31,170
Ползвал съм атрибута ID вътре в
деление, или Div тагове, и аз съм използвал

99
00:05:31,170 --> 00:05:34,120
Клас атрибут вътре
Разделения друг маркер.

100
00:05:34,120 --> 00:05:37,190
>> ID и Class атрибути
работи по подобен начин.

101
00:05:37,190 --> 00:05:41,210
Единствената разлика е, че може да има само
един елемент, специфичната ID, но

102
00:05:41,210 --> 00:05:43,600
произволен брой елементи
могат да споделят един клас.

103
00:05:43,600 --> 00:05:47,690
Така например, мога да използвам този клас
изображение няколко пъти, но не мога

104
00:05:47,690 --> 00:05:50,533
създадете друга дивизия
с горната ID.

105
00:05:50,533 --> 00:05:54,750
Въпреки, че не са отишли ​​в CSS,
друг език често се използва

106
00:05:54,750 --> 00:05:59,700
заедно с HTML, след като започнете стайлинг
моя код с CSS, мога да използвам тези

107
00:05:59,700 --> 00:06:03,730
организационни качества на влияние
естетика моята уеб страница.

108
00:06:03,730 --> 00:06:07,600
>> Всичко в горната дивизия
ще има подобни stylings или всякакви

109
00:06:07,600 --> 00:06:12,010
друга група от HTML I група в
клас на изображението ще споделят подобен вид.

110
00:06:12,010 --> 00:06:15,700
Това е много по-лесно, отколкото се опитва да редактирате
и стил изображения или блокове

111
00:06:15,700 --> 00:06:17,690
текст поотделно.

112
00:06:17,690 --> 00:06:21,480
>> Така че отидохме над основите на това как
да направите уеб страница с HTML.

113
00:06:21,480 --> 00:06:25,280
HTML има куп други функции, твърде
че когато се свърже с други езици

114
00:06:25,280 --> 00:06:29,220
като CSS и JavaScript, наистина може да
направи страници открояват.

115
00:06:29,220 --> 00:06:32,960
Най-добрият начин да се удобно с
HTML е просто да се забъркваш с около него,

116
00:06:32,960 --> 00:06:35,120
да видим какво работи и какво не.

117
00:06:35,120 --> 00:06:36,570
>> Моето име е Дейвън Фарнъм.

118
00:06:36,570 --> 00:06:37,820
Това е CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Така например, мога да използвам
картинката клас -

121
00:06:45,690 --> 00:06:48,028
Не, има много характеристики.

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

123
00:06:52,500 --> 00:06:53,950
Моето име е Дейвън Фарнъм.

124
00:06:53,950 --> 00:06:58,560
Това е CS 650.

125
00:06:58,560 --> 00:06:59,810
Искам да кажа, CSS.

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

127
00:07:02,325 --> 00:07:03,575
Това е CSS.

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