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

2
00:00:06,986 --> 00:00:10,450
>> DAVEN Farnham: Денес, јас ќе одам да
зборувам малку за 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
Добро, С е јазик со многу строги
синтаксички правила што треба да биде

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
Тагови основа информира веб прелистувачи
дека, еј, нешто

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
Препрати Slash пред телото.

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

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
>> Ќе се отвори со слика таг проследено
од во алт атрибутот во

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 ТВ.

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 е она што е познато како
Cascading Style лист.

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
Јас сум користел ид атрибут во внатрешноста на
поделба, или div таг, и јас сум користел

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

100
00:05:34,120 --> 00:05:37,190
>> ID и класа атрибути
работат на сличен начин.

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
создаде уште една поделба
со 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
>> Сè што во рамките на поделбата врвот
ќе имаат слични стилови или било

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
>> Моето име е Daven Farnham.

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
Моето име е Daven Farnham.

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