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

2
00:00:06,986 --> 00:00:10,450
>> להתפלל 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
ובכן, 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
תגיות בעצם להודיע ​​דפדפני אינטרנט
כי, היי, משהו

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
html DOCTYPE.

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
>> אתה פותח עם תג תמונה ואחרי
על ידי בתכונת 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
לי בכתובת הזאת, אני יכול להשתמש
כתובת המקור לכוללת

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, ומעבר שורת תג, br.

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 היא מה שמכונה
גיליון סגנונות מדורגים.

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
>> תכונות זיהוי וייצוגיות
עובד באופן דומה.

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
למרות שאני לא נכנסתי ל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 לתוך
תמונת כיתה תחלוק מראה דומה.

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
>> השם שלי הוא ךייבן 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
השם שלי הוא ךייבן 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