1
00:00:00,000 --> 00:00:00,290

2
00:00:00,290 --> 00:00:03,310
>> דובר: מתברר כי ה-HTML הוא לא
השפה היחידה שאתה יכול להשתמש בתוך

3
00:00:03,310 --> 00:00:03,895
של דף אינטרנט.

4
00:00:03,895 --> 00:00:08,100
אתה יכול להשתמש במשהו שנקרא CSS, או
גיליונות סגנון מדורג, גם כן.

5
00:00:08,100 --> 00:00:12,120
CSS מאפשר לכם להגדיר הרבה יותר
דווקא את האסתטיקה של אינטרנט

6
00:00:12,120 --> 00:00:16,930
דף, כולל פריסה וגדלים ו
צבעים וגופנים ועוד.

7
00:00:16,930 --> 00:00:20,820
לדוגמא, בואו ליצור דף אינטרנט
CSS0 כאן בשם שמייצג

8
00:00:20,820 --> 00:00:22,740
דף הבית, למשל, ג'ון הרווארד.

9
00:00:22,740 --> 00:00:25,480
>> בדף זה, יהיה לנו של ג'ון הרווארד
שם, מתחתיו תהיה

10
00:00:25,480 --> 00:00:28,500
הודעה נחמדה למבקריו, מתחת
אשר יהיה תחתונה, עם

11
00:00:28,500 --> 00:00:30,590
אומר, קצת מידע על זכויות יוצרים.

12
00:00:30,590 --> 00:00:34,650
לשם כך, הבה להגדיר שלוש חטיבות
לדף באמצעות תג

13
00:00:34,650 --> 00:00:35,670
נקרא div.

14
00:00:35,670 --> 00:00:43,880
div סוגר הפתוח, ג'ון הרווארד, קרוב
div הסוגר, עוד div סוגר פתוח,

15
00:00:43,880 --> 00:00:48,330
ועכשיו אנחנו נציין משהו
כמו, מוזמן לדף הבית שלי!

16
00:00:48,330 --> 00:00:50,420
ובואו נסגור div הזה, גם כן.

17
00:00:50,420 --> 00:00:53,700
>> ועכשיו שלישי ואחרון
div, זכויות יוצרים.

18
00:00:53,700 --> 00:00:58,250
רק כדי להיות מפואר, תן לי להשתמש עכשיו HTML
ישות, סמל המייצג

19
00:00:58,250 --> 00:01:01,140
דמות שאתה לא יכול אחרת
מקליד במקלדת שלך.

20
00:01:01,140 --> 00:01:07,490
בפרט, אני הולך לעשות
אמפרסנד, פאונד, 169, פסיק.

21
00:01:07,490 --> 00:01:10,620
מתברר שהוא הקוד המספרי
לסמל זכויות היוצרים.

22
00:01:10,620 --> 00:01:14,260
אז בואו תציינו ג'ון הרווארד
כאן בתחתית.

23
00:01:14,260 --> 00:01:17,180
בואו נסגור את div ולשמור את הקובץ.

24
00:01:17,180 --> 00:01:18,910
>> עכשיו, מה הוא תג div זה?

25
00:01:18,910 --> 00:01:21,970
תג div פשוט מגדיר חלוקת
של הדף, שהוא למעשה

26
00:01:21,970 --> 00:01:23,310
אזור מלבני.

27
00:01:23,310 --> 00:01:26,850
אז ברגע זה בזמן, יש לי שלוש
אזורים מלבניים, אחד על גבי

28
00:01:26,850 --> 00:01:27,620
של האחר.

29
00:01:27,620 --> 00:01:30,610
אז לעת עתה, ההשפעה היא כמעט כמו
למרות שהיה לי שלושה סעיפים.

30
00:01:30,610 --> 00:01:33,490
אבל אנחנו לא רואים ממש באותה המידה
חלל לבן ביניהם.

31
00:01:33,490 --> 00:01:36,170
>> בואו לשמור קובץ זה, לשנות אותה
הרשאות, ותסתכל על

32
00:01:36,170 --> 00:01:37,990
רגע ב-Chrome.

33
00:01:37,990 --> 00:01:43,040
Chmod + r CSS0.html.

34
00:01:43,040 --> 00:01:52,440
בואו עכשיו לפתוח את הכרום וביקור
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
ואכן, הנה דף בית
לג'ון הרווארד.

36
00:01:54,630 --> 00:01:59,370
בואו עכשיו לסגנן את זה קצת יותר
דווקא בעזרת כמה CSS.

37
00:01:59,370 --> 00:02:03,510
>> חזרה בgedit, בואו נלך לזה
תג div הראשון ולהוסיף סגנון

38
00:02:03,510 --> 00:02:11,060
מייחס המפרט שאני רוצה
גודל גופן של, נניח, 36 פיקסלים, או px.

39
00:02:11,060 --> 00:02:15,650
ואני רוצה את משקל גופן זה
להיות נועז ולא ברירת המחדל,

40
00:02:15,650 --> 00:02:16,980
וזה נורמלי.

41
00:02:16,980 --> 00:02:21,170
לdiv השני, בואו לציין
תכונה אחרת בסגנון שיש בו

42
00:02:21,170 --> 00:02:25,550
גודל גופן של 24 פיקסלים, ולכן
קצת קטן יותר.

43
00:02:25,550 --> 00:02:28,410
ציטוטים לסגור אחרי פסיק.

44
00:02:28,410 --> 00:02:33,255
>> לבסוף, בdiv השלישי, בואו נעשה
סגנון שווה ציטוט גודל, גופן ו

45
00:02:33,255 --> 00:02:35,340
נניח 12 פיקסלים הפעם.

46
00:02:35,340 --> 00:02:37,280
ציטוט סגור אחרי פסיק.

47
00:02:37,280 --> 00:02:40,200
שים לב כי אז יש לי כנראה
צוין קצת סגנון ל

48
00:02:40,200 --> 00:02:43,770
כל אחד משלושת אלמנטים מהסוג div אלה באמצעות,
מתברר, CSS.

49
00:02:43,770 --> 00:02:47,820
למעשה, בתחביר שאתה רואה ב
בין המרכאות כפולות אלה הוא CSS,

50
00:02:47,820 --> 00:02:50,620
במיוחד CSS מאפיינים
עם ערכים.

51
00:02:50,620 --> 00:02:53,910
ובשביל זה תג הראשון, שבו היה לי
שני מאפיינים כגון, גודל וגופן

52
00:02:53,910 --> 00:02:57,290
משקל גופן, אני פשוט נפרדתי
שלהם בנקודת פסיק.

53
00:02:57,290 --> 00:02:59,940
>> עכשיו, רק למען הסגנון, אני
פסיק כלל גם ב

54
00:02:59,940 --> 00:03:00,880
בסוף כל שורה.

55
00:03:00,880 --> 00:03:04,270
אבל הם לא הכרחי,
במיוחד כאשר יש לך רק אחד

56
00:03:04,270 --> 00:03:05,580
נכס מוגדר.

57
00:03:05,580 --> 00:03:08,370
בואו עכשיו שמרו את הקובץ וטען מחדש
בכרום, ולראות מה

58
00:03:08,370 --> 00:03:11,000
ההשפעה נטו היא.

59
00:03:11,000 --> 00:03:13,470
חזרה בכרום כאן,
בואו לחצו על רענן.

60
00:03:13,470 --> 00:03:15,800
>> עכשיו יש לנו קצת יותר מעניין
דף הבית של ג'ון

61
00:03:15,800 --> 00:03:19,000
הרווארד, לפיה בשורה הראשונה עם
את שמו, שהוא חלק פנימי של ש

62
00:03:19,000 --> 00:03:23,470
div הראשון, הוא 36 פיקסלים גבוה וגם
מודגש, לפי השורה השנייה,

63
00:03:23,470 --> 00:03:27,340
וזה שבdiv השני, הוא 24
פיקסלים מודגשים גבוהה, אבל לא.

64
00:03:27,340 --> 00:03:31,500
ולפי השורה השלישית בשלישי ש
div הוא 12 פיקסלים גבוה וגם

65
00:03:31,500 --> 00:03:32,610
לא מודגש.

66
00:03:32,610 --> 00:03:35,380
אבל נניח שעכשיו אני רוצה לעבור
כל הטקסט הזה על

67
00:03:35,380 --> 00:03:36,650
כך שזה מרוכז.

68
00:03:36,650 --> 00:03:40,480
>> אני יכול ליישר כל אחד מבודד
אלמנטים מהסוג div כמו להיות מרוכז.

69
00:03:40,480 --> 00:03:45,330
אבל בקלות רבה יותר, אני יכול לעטוף אותם
שלושה אלמנטים div בתוך div הרביעי,

70
00:03:45,330 --> 00:03:49,360
div הורה, כביכול, וציין
שdiv וכולה

71
00:03:49,360 --> 00:03:52,610
צאצאים צריכים להיות
טקסט מיושר למרכז?

72
00:03:52,610 --> 00:03:54,120
בואו נסתכל.

73
00:03:54,120 --> 00:03:58,510
>> בתוך gedit, בואו נחזור לשלי
גוף ולהוסיף למעלה למעלה חדש div עם

74
00:03:58,510 --> 00:04:04,460
div, סגנון שווה במרכאות,
מרכז יישור טקסט, קרוב

75
00:04:04,460 --> 00:04:06,250
הצעת מחיר לאחר פסיק.

76
00:04:06,250 --> 00:04:10,280
ועכשיו, בואו נלך קדימה וכניסה כל
מאותם קווים שהקלדנו בעבר.

77
00:04:10,280 --> 00:04:15,040
ומתחת לזה div השלישי, בואו
לסגור div החדש הזה.

78
00:04:15,040 --> 00:04:18,829
>> במילים אחרות, כי שלושת אלה
אלמנטים מסוג div המקוריים נמצאים כעת ילדים, ולכן כדי

79
00:04:18,829 --> 00:04:22,110
לדבר, של div הורה חדש ויש לי
צוין כי הייתי רוצה ליישר את

80
00:04:22,110 --> 00:04:26,140
טקסט של שdiv ההורה במרכז
של הדף, נכס שיהיה

81
00:04:26,140 --> 00:04:28,290
ירש את כל הילדים האלה.

82
00:04:28,290 --> 00:04:32,370
ואכן, בואו לשמור את הקובץ ו
תסתכל בדפדפן.

83
00:04:32,370 --> 00:04:34,650
בואו מחדש בכרום.

84
00:04:34,650 --> 00:04:37,540
ויש לנו את זה, אפילו יותר נחמד
דף הבית של ג'ון הרווארד.

85
00:04:37,540 --> 00:04:39,872