Return to Video

HTML Basics (Video Version)

  • 0:00 - 0:02
    ברוכים הבאים אל עמוד האינטרנט שלי.
  • 0:02 - 0:04
    אני יודעת, זה לא עמוד מלהיב במיוחד
  • 0:04 - 0:07
    הוא עמוד לבן לגמרי, אבל כל עמוד אינטרנט מתחיל באותה דרך
  • 0:07 - 0:10
    ואני אראה לכם איך לבנות את העמוד הזה בקרוב
  • 0:10 - 0:12
    דבר ראשון, תנו לי דקה
  • 0:12 - 0:15
    להראות לכם את השלד (את התבנית) של עמוד ריק
  • 0:15 - 0:17
    כל עמוד אינטרנט מתחיל עם
  • 0:17 - 0:20
    הדבר הנחמד הזה שנקרא DOCTYPE כאן בקצה למעלה
  • 0:21 - 0:22
    זהו רק סימן לדפדפן
  • 0:22 - 0:25
    שעמוד אינטרנט זה נכתב בHTML מודרני (HTML5)
  • 0:25 - 0:28
    ולא בגרסא ישנה של HTML
  • 0:28 - 0:31
    לאחר מכן, התג הראשוני שנמצא בדף
  • 0:31 - 0:35
    HTML היא שפת תגיות, כך שהכל כאן זה בעצם על תגים
  • 0:35 - 0:36
    תג זה דבר כזה
  • 0:36 - 0:38
    שמתחיל עם הסימן >
  • 0:38 - 0:41
    ומסתיים עם הסימן <
  • 0:41 - 0:42
    או אם אתה אוהב מתמטיקה,אתה יכול לחשוב על הסימנים
  • 0:42 - 0:45
    כסימן קטן (> ) או כסימן גדול (< )
  • 0:46 - 0:48
    התג הראשון של כל עמוד אינטרנט הוא תמיד
  • 0:48 - 0:51
    התג html מייד לאחר המילה DOCTYPE
  • 0:51 - 0:54
    זהו התחלת תג ה html (באותיות קטנות)
  • 0:54 - 0:57
    וכאן בסוף זה סיום תג ה html
  • 0:57 - 1:00
    שזה אותו דבר רק שיש בו את הסימן ' /'
  • 1:00 - 1:02
    שזה דבר מאוד חשוב
  • 1:02 - 1:05
    תג הhtml צריך להקיף (להכיל) את כל התגים האחרים
  • 1:05 - 1:07
    שבונים את עמוד האינטרנט
  • 1:07 - 1:11
    וזו הסיבה שאין לנו תג html עד תחתית הדף
  • 1:11 - 1:13
    הרבה תגים של HTML באים בזוגות כמו תג הhtml
  • 1:13 - 1:15
    אבל לא כולם
  • 1:16 - 1:19
    בתחילת דף הHTML יש תמיד תג בשם head
  • 1:19 - 1:22
    תג הhead מכיל (מקיף) תגים נוספים שעוזרים לדפדפן לצייר את העמוד
  • 1:22 - 1:25
    אבל הם לא כוללים משהו שהמשתמש בעצם רואה
  • 1:25 - 1:28
    יש למשל את תג הmeta שנותן לדפדפן
  • 1:28 - 1:30
    פרטים נוספים איך לצייר את הדף
  • 1:30 - 1:32
    למשל אם אתה לא משתמש בתווים רגילים
  • 1:32 - 1:33
    כמו למשל תווים של השפה האנגלית
  • 1:33 - 1:35
    אלא מסובכים יותר כמו תווים
  • 1:35 - 1:37
    של השפה הערבית
  • 1:37 - 1:40
    אז אתה צריך לרשום בתג ה
  • 1:40 - 1:42
    חוץ מזה יש את תג הכותרת - title
  • 1:42 - 1:45
    שמופיע ככותרת הדף בדפדפן
  • 1:45 - 1:48
    זה מה שמופיע בלשונית שבראש הדפדפן
  • 1:48 - 1:50
    וגם בסימניות (bookmark ) וגם בתוצאות החיפושים
  • 1:50 - 1:53
    ראו כאן את הכותרת של אקדמיית קהאן בראש הדף
  • 1:54 - 1:56
    אני אשנה את הכותרת
  • 1:56 - 1:59
    אני אעשה עמוד רק על ארנבים
  • 1:59 - 2:02
    כך שאתן כותרת "הכל על ארנבים"
  • 2:02 - 2:05
    ואולי תצליחו לראות את השינוי כאן למעלה
  • 2:06 - 2:08
    יפה, סיימנו כרגע את הפרטים האלו
  • 2:08 - 2:12
    כלומר סיימנו עם תג הhead וכל מה שיש בתוכו וכעת נעבור אל התג
  • 2:12 - 2:15
    שבו הכל בעצם קורה, תג ה body
  • 2:15 - 2:18
    כרגע הוא די משעמם, רק ההתחלה ומיד הסיום
  • 2:18 - 2:20
    אז מה בעצם כדאי שאוסיף?
  • 2:20 - 2:22
    ובכן, אני עושה אתר אינטרנט על ארנבים
  • 2:22 - 2:23
    אז כדאי שאכריז
  • 2:23 - 2:25
    על כך בתרועה גדולה עם כותרת בראש הדף
  • 2:26 - 2:29
    כדי להוסיף כותרת, משתמשים בתג h1
  • 2:30 - 2:33
    "הכל על ארנבים" ("all about rabbits" ), נהדר !
  • 2:33 - 2:35
    למעשה יש שישה (6) תגים שאנו יכולים להשתמש בהם
  • 2:35 - 2:38
    עבור כותרות h1, h2 , h3, h4, h5 ו h6
  • 2:38 - 2:41
    אנו משתמשים בh1 עבור הכותרות החשובות ביותר בדף
  • 2:41 - 2:43
    וh6 הן עבור הכותרות הפחות חשובות
  • 2:43 - 2:46
    תנו לי ואוסיף עוד קצת כותרות עבור חלקים נוספים בדף
  • 2:46 - 2:49
    אשתמש בכותרת h2 מכיון שהם
  • 2:49 - 2:51
    עבור קטעים חשובים פחות בדף
  • 2:52 - 2:55
    וגם כמה שירים, יפה !
  • 2:56 - 2:58
    כעת, נוסיף קצת מידע
  • 2:58 - 3:00
    ובכן, קהל היעד שלי עבור דף זה הוא
  • 3:00 - 3:04
    בעצם חייזרים שאף פעם לא שמעו על ארנבים
  • 3:04 - 3:07
    אז כדאי שאתן להם הסברים ממש טובים על ארנבים
  • 3:07 - 3:10
    למעשה אני חושבת שאני צריכה פסקה שלמה עבור המידע
  • 3:10 - 3:13
    איך אני יכולה לתייג פסקה שלמה בשפת ה HTML ?
  • 3:13 - 3:16
    על ידי תג ה p כמובן
  • 3:16 - 3:21
    אנו שמים את תג ה p ואז ממשיכים
  • 3:21 - 3:23
    ומדביקים כאן את המידע
  • 3:23 - 3:26
    מעתיקים ומדביקים כך שלא תצטרכו לראות אותי מקלידה את הכל
  • 3:26 - 3:27
    נהדר
  • 3:28 - 3:31
    כעת החייזרים צריכים שיר להלל את הארנבים
  • 3:31 - 3:33
    אז אתן להם מילים אישיות שאהבתי
  • 3:33 - 3:38
    שוב אשתמש בתג ה p עבור זה, ואז שוב אעתיק ואדביק את השיר
  • 3:40 - 3:43
    "Little Bunny Foofoo" , איזה שיר נהדר
  • 3:44 - 3:48
    אבל תסתכלו, זה מופיע באותה שורה
  • 3:48 - 3:50
    איך החייזרים ידעו לעצור,להפסיק ולעבור שורה?
  • 3:50 - 3:52
    למה הדפדפן לא שמר על
  • 3:52 - 3:54
    מעברי השורה שהיו בשיר המקורי כמו שאני הוספתי ?
  • 3:54 - 3:57
    ובן, דפדפנים מתעלמים מסימני "עבור שורה" ( מסומן כ n\ בכל מיני מקומות)
  • 3:57 - 3:59
    וכן מתעלמים מ רווחים בHTML
  • 3:59 - 4:02
    אם אנו רוצים כי הדפדפן יצייר את מעברי השורה
  • 4:02 - 4:05
    נוכל לאמר זאת ישירות על ידי תג נוסף
  • 4:05 - 4:08
    על ידי תג ה br שהוא קיצור של המילה break
  • 4:08 - 4:13
    אז כעת נעבור על הכל ונוסיף br אחרי כל שורה
  • 4:13 - 4:15
    וכעת זה נראה כמו שירה
  • 4:15 - 4:19
    האם שמתם לב לדבר מעניין עבור תג ה br ?
  • 4:19 - 4:21
    אין תג br סוגר בסוף
  • 4:21 - 4:22
    אם תחשבו על זה
  • 4:22 - 4:23
    תראו שתג ה br בעצם לא מכיל שום תוכן
  • 4:23 - 4:26
    ולכן הוא לא צריך להיות לפני ואחרי משהו
  • 4:26 - 4:28
    מספיק שיסמן משהו לדפדפן וזה הכל - עבור שורה
  • 4:29 - 4:30
    וזהו, יש לנו את זה
  • 4:30 - 4:33
    החייזרים ילמדו קצת על ארנבים
  • 4:33 - 4:36
    ואתם תלמדו קצת על HTML
  • 4:36 - 4:37
    אחרי שאני אסיים לדבר
  • 4:37 - 4:40
    אז תשחקו עם זה,נסו לשנות כל מיני דברים
  • 4:40 - 4:44
    כשתסיימו להתנסות, עיברו לאתגר הראשון שלכם ב HTML
Title:
HTML Basics (Video Version)
Description:
more » « less
Video Language:
English
Duration:
04:44

Hebrew subtitles

Revisions

Our website uses cookies for analysis purposes.