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

2
00:00:06,986 --> 00:00:10,450
>> Давен Фарнхам: Данас, ја ћу да
причати мало о ХТМЛ,

3
00:00:10,450 --> 00:00:12,330
ХиперТект Маркуп Лангуаге.

4
00:00:12,330 --> 00:00:14,450
Видиш ХТМЛ свуда ових дана.

5
00:00:14,450 --> 00:00:17,190
У ствари, ако гледаш ово
Видео у прегледачу, ти си

6
00:00:17,190 --> 00:00:19,120
ХТМЛ виде одмах.

7
00:00:19,120 --> 00:00:22,760
ХТМЛ није програмски језик,
а, то је језик за означавање користи

8
00:00:22,760 --> 00:00:25,460
веб прегледачи ће рендер странице
на интернету.

9
00:00:25,460 --> 00:00:30,410
>> Дакле, можете питати, како тачно пише
Веб страница у ХТМЛ разликује

10
00:00:30,410 --> 00:00:33,574
од писања програма у програмирању
језик као Ц?

11
00:00:33,574 --> 00:00:38,010
Па, Ц је језик са веома строг
синтаксичких правила која треба да се

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
Ваша Ц код, знаш шта ја говорим
о у односу на строгој синтаксе.

15
00:00:46,660 --> 00:00:50,360
>> Веб претраживачи иако, су мало више
праста када је у питању ХТМЛ.

16
00:00:50,360 --> 00:00:53,860
Чак и ако је ваш ХТМЛ није синтаксички
тачно, ваша страна може још увек бити

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
Ознаке основи информишу веб бровсера
да, хеј, нешто

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
ДОЦТИПЕ хтмл.

38
00:01:53,350 --> 00:01:56,280
Ово је стварно само говори прегледач
да је фајл веб страница

39
00:01:56,280 --> 00:01:58,280
написан у ХТМЛ-у.

40
00:01:58,280 --> 00:02:01,970
ХТМЛ таг у суштини каже,
Овде долази неки ХТМЛ.

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

42
00:02:04,950 --> 00:02:09,430
Глава ознака можете мислити као
који садржи ХТМЛ код који долази за

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
У нашем примеру, ми смо само ставили једноставан
реченица, Мој први страница,

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
>> Дакле, горе ХТМЛ, ми ћемо вам дати врло
основни шаблон за веб странице,

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
Ако је слика у истом фолдеру као и
Ваш ХТМЛ фајл, можете да повежете са

58
00:02:59,780 --> 00:03:01,950
слика преко путу овако.

59
00:03:01,950 --> 00:03:05,910
>> Можете отворити са слике таг следи
по у Алт атрибут у

60
00:03:05,910 --> 00:03:07,240
извор слике.

61
00:03:07,240 --> 00:03:12,030
Вредност АЛТ атрибут је само неки
алтернативни текст у случају корисник не може

62
00:03:12,030 --> 00:03:13,580
види слику.

63
00:03:13,580 --> 00:03:19,680
Алтернативно, можете да повежете са
слике преко пуне УРЛ адресе, као што је овај.

64
00:03:19,680 --> 00:03:24,180
Сада, да сајт не постоји стварно,
али ако је било слика

65
00:03:24,180 --> 00:03:27,760
ја на тој адреси, ја могу да користим
изворни УРЛ да укључи

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
Све сам урадио до сада је користити заглавље
ознака, Х1, а прелом реда ознака, бр.

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
линк на слике, рецимо, ЦС50 ТВ.

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
мој прегледач ће отворити још један
Картица за ЦС50.тв веб страници.

92
00:05:04,410 --> 00:05:08,970
>> На крају, рецимо да ћу стилу
овај сајт касније користећи ЦСС.

93
00:05:08,970 --> 00:05:11,730
ЦСС је оно што је познато као
каскадног стила.

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
Желим да почнем да организујем свој ХТМЛ то
лакше обликовати касније.

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

98
00:05:26,900 --> 00:05:31,170
Ја сам користио ИД атрибут унутар
подела, или див таг, и ја сам користио

99
00:05:31,170 --> 00:05:34,120
Класа атрибут унутра
још један див таг.

100
00:05:34,120 --> 00:05:37,190
>> ИД и Цласс атрибути
раде на сличан начин.

101
00:05:37,190 --> 00:05:41,210
Једина разлика је што само може имати
један елемент, специфичне ИД, али

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
створити још једну поделу
са ИД врха.

105
00:05:50,533 --> 00:05:54,750
Иако нисам отишао у ЦСС,
други језик обично користи

106
00:05:54,750 --> 00:05:59,700
заједно са ХТМЛ, кад почнем стајлинг
мој код са ЦСС, ја могу да користе ове

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

108
00:06:03,730 --> 00:06:07,600
>> Све у оквиру дивизије врх
ће имати сличне стајлинг или било

109
00:06:07,600 --> 00:06:12,010
друга група ХТМЛ И групе у
класа слика ће деле сличан изглед.

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
>> Тако смо отишли ​​преко основе како
да направи веб страницу са ХТМЛ.

113
00:06:21,480 --> 00:06:25,280
ХТМЛ има превише гомилу других функција
да када упарен са другим језицима

114
00:06:25,280 --> 00:06:29,220
као ЦСС и ЈаваСцрипт, може заиста
направити странице истичу.

115
00:06:29,220 --> 00:06:32,960
Најбољи начин да се удобно са
ХТМЛ је само да се зезају са тим,

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
То је ЦС50.

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
Ово је ЦС 650.

125
00:06:58,560 --> 00:06:59,810
Хоћу да кажем ЦСС.

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

127
00:07:02,325 --> 00:07:03,575
Ово је ЦСС.

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