YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Hebrew subtitles

HTML Basics (Video Version)

Get Embed Code
10 Languages

Showing Revision 11 created 05/14/2015 by רועי חרמוני.

  1. ברוכים הבאים אל עמוד האינטרנט שלי.

  2. אני יודעת, זה לא עמוד מלהיב במיוחד
  3. הוא עמוד לבן לגמרי, אבל כל עמוד אינטרנט מתחיל באותה דרך
  4. ואני אראה לכם איך לבנות את העמוד הזה בקרוב
  5. דבר ראשון, תנו לי דקה
  6. להראות לכם את השלד (את התבנית) של עמוד ריק
  7. כל עמוד אינטרנט מתחיל עם
  8. הדבר הנחמד הזה שנקרא DOCTYPE כאן בקצה למעלה
  9. זהו רק סימן לדפדפן
  10. שעמוד אינטרנט זה נכתב בHTML מודרני (HTML5)
  11. ולא בגרסא ישנה של HTML
  12. לאחר מכן, התג הראשוני שנמצא בדף
  13. HTML היא שפת תגיות, כך שהכל כאן זה בעצם על תגים
  14. תג זה דבר כזה
  15. שמתחיל עם הסימן >
  16. ומסתיים עם הסימן <
  17. או אם אתה אוהב מתמטיקה,אתה יכול לחשוב על הסימנים
  18. כסימן קטן (> ) או כסימן גדול (< )
  19. התג הראשון של כל עמוד אינטרנט הוא תמיד
  20. התג html מייד לאחר המילה DOCTYPE
  21. זהו התחלת תג ה html (באותיות קטנות)
  22. וכאן בסוף זה סיום תג ה html
  23. שזה אותו דבר רק שיש בו את הסימן ' /'
  24. שזה דבר מאוד חשוב
  25. תג הhtml צריך להקיף (להכיל) את כל התגים האחרים
  26. שבונים את עמוד האינטרנט
  27. וזו הסיבה שאין לנו תג html עד תחתית הדף
  28. הרבה תגים של HTML באים בזוגות כמו תג הhtml
  29. אבל לא כולם
  30. בתחילת דף הHTML יש תמיד תג בשם head
  31. תג הhead מכיל (מקיף) תגים נוספים שעוזרים לדפדפן לצייר את העמוד
  32. אבל הם לא כוללים משהו שהמשתמש בעצם רואה
  33. יש למשל את תג הmeta שנותן לדפדפן
  34. פרטים נוספים איך לצייר את הדף
  35. למשל אם אתה לא משתמש בתווים רגילים
  36. כמו למשל תווים של השפה האנגלית
  37. אלא מסובכים יותר כמו תווים
  38. של השפה הערבית
  39. אז אתה צריך לרשום בתג ה <meta charset=utf-8>
  40. חוץ מזה יש את תג הכותרת - title
  41. שמופיע ככותרת הדף בדפדפן
  42. זה מה שמופיע בלשונית שבראש הדפדפן
  43. וגם בסימניות (bookmark ) וגם בתוצאות החיפושים
  44. ראו כאן את הכותרת של אקדמיית קהאן בראש הדף
  45. אני אשנה את הכותרת
  46. אני אעשה עמוד רק על ארנבים
  47. כך שאתן כותרת "הכל על ארנבים"
  48. ואולי תצליחו לראות את השינוי כאן למעלה
  49. יפה, סיימנו כרגע את הפרטים האלו
  50. כלומר סיימנו עם תג הhead וכל מה שיש בתוכו וכעת נעבור אל התג
  51. שבו הכל בעצם קורה, תג ה body
  52. כרגע הוא די משעמם, רק ההתחלה ומיד הסיום
  53. אז מה בעצם כדאי שאוסיף?
  54. ובכן, אני עושה אתר אינטרנט על ארנבים
  55. אז כדאי שאכריז
  56. על כך בתרועה גדולה עם כותרת בראש הדף
  57. כדי להוסיף כותרת, משתמשים בתג h1
  58. "הכל על ארנבים" ("all about rabbits" ), נהדר !
  59. למעשה יש שישה (6) תגים שאנו יכולים להשתמש בהם
  60. עבור כותרות h1, h2 , h3, h4, h5 ו h6
  61. אנו משתמשים בh1 עבור הכותרות החשובות ביותר בדף
  62. וh6 הן עבור הכותרות הפחות חשובות
  63. תנו לי ואוסיף עוד קצת כותרות עבור חלקים נוספים בדף
  64. אשתמש בכותרת h2 מכיון שהם
  65. עבור קטעים חשובים פחות בדף
  66. וגם כמה שירים, יפה !
  67. כעת, נוסיף קצת מידע
  68. ובכן, קהל היעד שלי עבור דף זה הוא
  69. בעצם חייזרים שאף פעם לא שמעו על ארנבים
  70. אז כדאי שאתן להם הסברים ממש טובים על ארנבים
  71. למעשה אני חושבת שאני צריכה פסקה שלמה עבור המידע
  72. איך אני יכולה לתייג פסקה שלמה בשפת ה HTML ?
  73. על ידי תג ה p כמובן
  74. אנו שמים את תג ה p ואז ממשיכים
  75. ומדביקים כאן את המידע
  76. מעתיקים ומדביקים כך שלא תצטרכו לראות אותי מקלידה את הכל
  77. נהדר
  78. כעת החייזרים צריכים שיר להלל את הארנבים
  79. אז אתן להם מילים אישיות שאהבתי
  80. שוב אשתמש בתג ה p עבור זה, ואז שוב אעתיק ואדביק את השיר
  81. "Little Bunny Foofoo" , איזה שיר נהדר
  82. אבל תסתכלו, זה מופיע באותה שורה
  83. איך החייזרים ידעו לעצור,להפסיק ולעבור שורה?
  84. למה הדפדפן לא שמר על
  85. מעברי השורה שהיו בשיר המקורי כמו שאני הוספתי ?
  86. ובן, דפדפנים מתעלמים מסימני "עבור שורה" ( מסומן כ n\ בכל מיני מקומות)
  87. וכן מתעלמים מ רווחים בHTML
  88. אם אנו רוצים כי הדפדפן יצייר את מעברי השורה
  89. נוכל לאמר זאת ישירות על ידי תג נוסף
  90. על ידי תג ה br שהוא קיצור של המילה break
  91. אז כעת נעבור על הכל ונוסיף br אחרי כל שורה
  92. וכעת זה נראה כמו שירה
  93. האם שמתם לב לדבר מעניין עבור תג ה br ?
  94. אין תג br סוגר בסוף
  95. אם תחשבו על זה
  96. תראו שתג ה br בעצם לא מכיל שום תוכן
  97. ולכן הוא לא צריך להיות לפני ואחרי משהו
  98. מספיק שיסמן משהו לדפדפן וזה הכל - עבור שורה
  99. וזהו, יש לנו את זה
  100. החייזרים ילמדו קצת על ארנבים
  101. ואתם תלמדו קצת על HTML
  102. אחרי שאני אסיים לדבר
  103. אז תשחקו עם זה,נסו לשנות כל מיני דברים
  104. כשתסיימו להתנסות, עיברו לאתגר הראשון שלכם ב HTML