0:00:00.411,0:00:01.835
ברוכים הבאים אל עמוד האינטרנט שלי.

0:00:01.835,0:00:04.059
אני יודעת, זה לא עמוד מלהיב במיוחד

0:00:04.059,0:00:07.477
הוא עמוד לבן לגמרי, אבל כל עמוד אינטרנט מתחיל באותה דרך

0:00:07.477,0:00:10.166
ואני אראה לכם איך לבנות את העמוד הזה בקרוב

0:00:10.275,0:00:11.681
דבר ראשון, תנו לי דקה

0:00:11.681,0:00:14.860
להראות לכם את השלד (את התבנית) של עמוד ריק

0:00:15.389,0:00:16.944
כל עמוד אינטרנט מתחיל עם

0:00:16.944,0:00:20.384
הדבר הנחמד הזה שנקרא DOCTYPE כאן בקצה למעלה

0:00:20.562,0:00:21.961
זהו רק סימן לדפדפן

0:00:21.961,0:00:24.603
שעמוד אינטרנט זה נכתב בHTML מודרני (HTML5)

0:00:24.603,0:00:27.530
ולא בגרסא ישנה של HTML

0:00:27.931,0:00:31.026
לאחר מכן, התג הראשוני שנמצא בדף

0:00:31.026,0:00:34.582
HTML היא שפת תגיות, כך שהכל כאן זה בעצם על תגים

0:00:34.635,0:00:36.399
תג זה דבר כזה

0:00:36.399,0:00:38.314
שמתחיל עם הסימן >

0:00:38.314,0:00:40.684
ומסתיים עם הסימן <

0:00:40.745,0:00:42.346
או אם אתה אוהב מתמטיקה,אתה יכול לחשוב על הסימנים

0:00:42.346,0:00:45.383
כסימן קטן (> ) או כסימן גדול (< )

0:00:46.474,0:00:48.356
התג הראשון של כל עמוד אינטרנט הוא תמיד

0:00:48.356,0:00:51.343
התג html מייד לאחר המילה DOCTYPE

0:00:51.343,0:00:53.871
זהו התחלת תג ה html (באותיות קטנות)

0:00:53.871,0:00:57.055
וכאן בסוף זה סיום תג ה html

0:00:57.055,0:00:59.729
שזה אותו דבר רק שיש בו את הסימן ' /'

0:00:59.729,0:01:01.747
שזה דבר מאוד חשוב

0:01:01.889,0:01:05.147
תג הhtml צריך להקיף (להכיל) את כל התגים האחרים

0:01:05.147,0:01:07.354
שבונים את עמוד האינטרנט

0:01:07.376,0:01:11.051
וזו הסיבה שאין לנו תג html עד תחתית הדף

0:01:11.119,0:01:13.351
הרבה תגים של HTML באים בזוגות כמו תג הhtml

0:01:13.351,0:01:15.099
אבל לא כולם

0:01:15.571,0:01:19.176
בתחילת דף הHTML יש תמיד תג בשם head

0:01:19.437,0:01:22.146
תג הhead מכיל (מקיף) תגים נוספים שעוזרים לדפדפן לצייר את העמוד

0:01:22.146,0:01:25.162
אבל הם לא כוללים משהו שהמשתמש בעצם רואה

0:01:25.435,0:01:27.885
יש למשל את תג הmeta שנותן לדפדפן

0:01:27.885,0:01:30.017
פרטים נוספים איך לצייר את הדף

0:01:30.204,0:01:31.885
למשל אם אתה לא משתמש בתווים רגילים

0:01:31.885,0:01:33.281
כמו למשל תווים של השפה האנגלית

0:01:33.281,0:01:34.747
אלא מסובכים יותר כמו תווים

0:01:34.747,0:01:36.628
של השפה הערבית

0:01:36.628,0:01:39.618
אז אתה צריך לרשום בתג ה

0:01:40.100,0:01:41.578
חוץ מזה יש את תג הכותרת - title

0:01:41.578,0:01:45.009
שמופיע ככותרת הדף בדפדפן

0:01:45.212,0:01:47.623
זה מה שמופיע בלשונית שבראש הדפדפן

0:01:47.623,0:01:50.039
וגם בסימניות (bookmark ) וגם בתוצאות החיפושים

0:01:50.161,0:01:53.430
ראו כאן את הכותרת של אקדמיית קהאן בראש הדף

0:01:53.687,0:01:55.544
אני אשנה את הכותרת

0:01:55.695,0:01:59.348
אני אעשה עמוד רק על ארנבים

0:01:59.348,0:02:01.914
כך שאתן כותרת "הכל על ארנבים"

0:02:01.914,0:02:04.923
ואולי תצליחו לראות את השינוי כאן למעלה

0:02:05.539,0:02:08.149
יפה, סיימנו כרגע את הפרטים האלו

0:02:08.149,0:02:11.946
כלומר סיימנו עם תג הhead וכל מה שיש בתוכו וכעת נעבור אל התג

0:02:11.946,0:02:14.809
שבו הכל בעצם קורה, תג ה body

0:02:15.033,0:02:17.805
כרגע הוא די משעמם, רק ההתחלה ומיד הסיום

0:02:18.081,0:02:19.521
אז מה בעצם כדאי שאוסיף?

0:02:19.521,0:02:21.921
ובכן, אני עושה אתר אינטרנט על ארנבים

0:02:21.921,0:02:23.155
אז כדאי שאכריז

0:02:23.155,0:02:25.455
על כך בתרועה גדולה עם כותרת בראש הדף

0:02:25.559,0:02:28.656
כדי להוסיף כותרת, משתמשים בתג h1

0:02:29.574,0:02:33.154
"הכל על ארנבים" ("all about rabbits" ), נהדר !

0:02:33.154,0:02:34.772
למעשה יש שישה (6) תגים שאנו יכולים להשתמש בהם

0:02:34.772,0:02:38.441
עבור כותרות h1, h2 , h3, h4, h5 ו h6

0:02:38.461,0:02:41.153
אנו משתמשים בh1 עבור הכותרות החשובות ביותר בדף

0:02:41.153,0:02:43.358
וh6 הן עבור הכותרות הפחות חשובות

0:02:43.491,0:02:45.682
תנו לי ואוסיף עוד קצת כותרות עבור חלקים נוספים בדף

0:02:45.696,0:02:49.035
אשתמש בכותרת h2 מכיון שהם

0:02:49.035,0:02:51.197
עבור קטעים חשובים פחות בדף

0:02:51.957,0:02:55.469
וגם כמה שירים, יפה !

0:02:56.214,0:02:58.240
כעת, נוסיף קצת מידע

0:02:58.402,0:03:00.435
ובכן, קהל היעד שלי עבור דף זה הוא

0:03:00.435,0:03:03.934
בעצם חייזרים שאף פעם לא שמעו על ארנבים

0:03:03.934,0:03:06.943
אז כדאי שאתן להם הסברים ממש טובים על ארנבים

0:03:07.100,0:03:10.174
למעשה אני חושבת שאני צריכה פסקה שלמה עבור המידע

0:03:10.396,0:03:12.856
איך אני יכולה לתייג פסקה שלמה בשפת ה HTML ?

0:03:13.391,0:03:16.049
על ידי תג ה p כמובן

0:03:16.470,0:03:20.736
אנו שמים את תג ה p ואז ממשיכים

0:03:20.736,0:03:22.633
ומדביקים כאן את המידע

0:03:22.633,0:03:25.568
מעתיקים ומדביקים כך שלא תצטרכו לראות אותי מקלידה את הכל

0:03:25.856,0:03:27.116
נהדר

0:03:27.699,0:03:30.901
כעת החייזרים צריכים שיר להלל את הארנבים

0:03:30.912,0:03:33.170
אז אתן להם מילים אישיות שאהבתי

0:03:33.170,0:03:38.170
שוב אשתמש בתג ה p עבור זה, ואז שוב אעתיק ואדביק את השיר

0:03:39.521,0:03:43.419
"Little Bunny Foofoo" , איזה שיר נהדר

0:03:43.572,0:03:47.672
אבל תסתכלו, זה מופיע באותה שורה

0:03:47.868,0:03:50.315
איך החייזרים ידעו לעצור,להפסיק ולעבור שורה?

0:03:50.418,0:03:51.660
למה הדפדפן לא שמר על

0:03:51.660,0:03:54.092
מעברי השורה שהיו בשיר המקורי כמו שאני הוספתי ?

0:03:54.350,0:03:57.052
ובן, דפדפנים מתעלמים מסימני "עבור שורה" ( מסומן כ n\ בכל מיני מקומות)

0:03:57.052,0:03:59.139
וכן מתעלמים מ רווחים בHTML

0:03:59.318,0:04:01.647
אם אנו רוצים כי הדפדפן יצייר את מעברי השורה

0:04:01.647,0:04:05.022
נוכל לאמר זאת ישירות על ידי תג נוסף

0:04:05.022,0:04:08.176
על ידי תג ה br שהוא קיצור של המילה break

0:04:08.398,0:04:12.513
אז כעת נעבור על הכל ונוסיף br אחרי כל שורה

0:04:12.777,0:04:14.885
וכעת זה נראה כמו שירה

0:04:15.440,0:04:18.890
האם שמתם לב לדבר מעניין עבור תג ה br ?

0:04:19.221,0:04:20.851
אין תג br סוגר בסוף

0:04:20.966,0:04:21.938
אם תחשבו על זה

0:04:21.938,0:04:23.492
תראו שתג ה br בעצם לא מכיל שום תוכן

0:04:23.492,0:04:25.861
ולכן הוא לא צריך להיות לפני ואחרי משהו

0:04:26.006,0:04:28.496
מספיק שיסמן משהו לדפדפן וזה הכל - עבור שורה

0:04:29.062,0:04:30.361
וזהו, יש לנו את זה

0:04:30.456,0:04:32.704
החייזרים ילמדו קצת על ארנבים

0:04:32.704,0:04:35.883
ואתם תלמדו קצת על HTML

0:04:36.044,0:04:37.158
אחרי שאני אסיים לדבר

0:04:37.158,0:04:39.915
אז תשחקו עם זה,נסו לשנות כל מיני דברים

0:04:39.976,0:04:43.658
כשתסיימו להתנסות, עיברו לאתגר הראשון שלכם ב HTML