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

אני יודעת, זה לא עמוד מלהיב במיוחד

הוא עמוד לבן לגמרי, אבל כל עמוד אינטרנט מתחיל באותה דרך

ואני אראה לכם איך לבנות את העמוד הזה בקרוב

דבר ראשון, תנו לי דקה

להראות לכם את השלד (את התבנית) של עמוד ריק

כל עמוד אינטרנט מתחיל עם

הדבר הנחמד הזה שנקרא DOCTYPE כאן בקצה למעלה

זהו רק סימן לדפדפן

שעמוד אינטרנט זה נכתב בHTML מודרני (HTML5)

ולא בגרסא ישנה של HTML

לאחר מכן, התג הראשוני שנמצא בדף

HTML היא שפת תגיות, כך שהכל כאן זה בעצם על תגים

תג זה דבר כזה

שמתחיל עם הסימן >

ומסתיים עם הסימן <

או אם אתה אוהב מתמטיקה,אתה יכול לחשוב על הסימנים

כסימן קטן (> ) או כסימן גדול (< )

התג הראשון של כל עמוד אינטרנט הוא תמיד

התג html מייד לאחר המילה DOCTYPE

זהו התחלת תג ה html (באותיות קטנות)

וכאן בסוף זה סיום תג ה html

שזה אותו דבר רק שיש בו את הסימן ' /'

שזה דבר מאוד חשוב

תג הhtml צריך להקיף (להכיל) את כל התגים האחרים

שבונים את עמוד האינטרנט

וזו הסיבה שאין לנו תג html עד תחתית הדף

הרבה תגים של HTML באים בזוגות כמו תג הhtml

אבל לא כולם

בתחילת דף הHTML יש תמיד תג בשם head

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

אבל הם לא כוללים משהו שהמשתמש בעצם רואה

יש למשל את תג הmeta שנותן לדפדפן

פרטים נוספים איך לצייר את הדף

למשל אם אתה לא משתמש בתווים רגילים

כמו למשל תווים של השפה האנגלית

אלא מסובכים יותר כמו תווים

של השפה הערבית

אז אתה צריך לרשום בתג ה

חוץ מזה יש את תג הכותרת - title

שמופיע ככותרת הדף בדפדפן

זה מה שמופיע בלשונית שבראש הדפדפן

וגם בסימניות (bookmark ) וגם בתוצאות החיפושים

ראו כאן את הכותרת של אקדמיית קהאן בראש הדף

אני אשנה את הכותרת

אני אעשה עמוד רק על ארנבים

כך שאתן כותרת "הכל על ארנבים"

ואולי תצליחו לראות את השינוי כאן למעלה

יפה, סיימנו כרגע את הפרטים האלו

כלומר סיימנו עם תג הhead וכל מה שיש בתוכו וכעת נעבור אל התג

שבו הכל בעצם קורה, תג ה body

כרגע הוא די משעמם, רק ההתחלה ומיד הסיום

אז מה בעצם כדאי שאוסיף?

ובכן, אני עושה אתר אינטרנט על ארנבים

אז כדאי שאכריז

על כך בתרועה גדולה עם כותרת בראש הדף

כדי להוסיף כותרת, משתמשים בתג h1

"הכל על ארנבים" ("all about rabbits" ), נהדר !

למעשה יש שישה (6) תגים שאנו יכולים להשתמש בהם

עבור כותרות h1, h2 , h3, h4, h5 ו h6

אנו משתמשים בh1 עבור הכותרות החשובות ביותר בדף

וh6 הן עבור הכותרות הפחות חשובות

תנו לי ואוסיף עוד קצת כותרות עבור חלקים נוספים בדף

אשתמש בכותרת h2 מכיון שהם

עבור קטעים חשובים פחות בדף

וגם כמה שירים, יפה !

כעת, נוסיף קצת מידע

ובכן, קהל היעד שלי עבור דף זה הוא

בעצם חייזרים שאף פעם לא שמעו על ארנבים

אז כדאי שאתן להם הסברים ממש טובים על ארנבים

למעשה אני חושבת שאני צריכה פסקה שלמה עבור המידע

איך אני יכולה לתייג פסקה שלמה בשפת ה HTML ?

על ידי תג ה p כמובן

אנו שמים את תג ה p ואז ממשיכים

ומדביקים כאן את המידע

מעתיקים ומדביקים כך שלא תצטרכו לראות אותי מקלידה את הכל

נהדר

כעת החייזרים צריכים שיר להלל את הארנבים

אז אתן להם מילים אישיות שאהבתי

שוב אשתמש בתג ה p עבור זה, ואז שוב אעתיק ואדביק את השיר

"Little Bunny Foofoo" , איזה שיר נהדר

אבל תסתכלו, זה מופיע באותה שורה

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

למה הדפדפן לא שמר על

מעברי השורה שהיו בשיר המקורי כמו שאני הוספתי ?

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

וכן מתעלמים מ רווחים בHTML

אם אנו רוצים כי הדפדפן יצייר את מעברי השורה

נוכל לאמר זאת ישירות על ידי תג נוסף

על ידי תג ה br שהוא קיצור של המילה break

אז כעת נעבור על הכל ונוסיף br אחרי כל שורה

וכעת זה נראה כמו שירה

האם שמתם לב לדבר מעניין עבור תג ה br ?

אין תג br סוגר בסוף

אם תחשבו על זה

תראו שתג ה br בעצם לא מכיל שום תוכן

ולכן הוא לא צריך להיות לפני ואחרי משהו

מספיק שיסמן משהו לדפדפן וזה הכל - עבור שורה

וזהו, יש לנו את זה

החייזרים ילמדו קצת על ארנבים

ואתם תלמדו קצת על HTML

אחרי שאני אסיים לדבר

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

כשתסיימו להתנסות, עיברו לאתגר הראשון שלכם ב HTML