HTML - מבנה דף
<h1> ו-</h1>. תגית ריקה, כמו <br/>, לא צריכה תגית סגירה.html, והיא מחולקת לשני חלקים. החלק Head מכיל מידע שהדפדפן שומר מאחורי הקלעים, למשל התגית title שמופיעה בכותרת הלשונית. החלק Body מכיל את מה שרואים בדפדפן.להורדת קוד מקור של כל הדוגמאות בקורס HTML - לחץ כאן (להורדה ממחשב רגיל ולא מאובטח)
פרקי ההרצאה: HTML - מבנה דף
תמלול ההרצאה: HTML - מבנה דף
הטקסט המלא של הדקות הראשונות בהרצאה «HTML - מבנה דף» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
שלום בשיעור היום אנחנו הולכים ללמוד על html מה נלמד בשיעור ראשית מערכת קליינט סרבר בווב שנית מבנה דף html איך דף html נראה מבחינת המבנה שלו שלישית מהי בדיוק תגית רביעית איזה תגיות פלט נפוצות קיימות בשפת html לאחר מכן מהו הפורם ומה אנחנו בדיוק עושים איתו לאחר מכן תגיות קלט איך אנחנו
קולטים מהיוזר מידע ולבסוף מה הם פריימס ומה אנחנו יכולים לעשות איתם. אוקיי, אז בואו נעבור למערכת קליינט סרבר בעולם הווב. טוב, אז ראשית יש לנו מה שנקרא סרבר, בעברית שרת.
סך הכל זה מחשב, ממש מחשב רגיל ככל מחשב אחר, שנמצא במיקום מרכזי מבחינת האינטרנט ומכיל דפי אינטרנט. מצד השני יש לנו מחשב רגיל שנקרא מחשב לקוח או קליינט שזה המחשב שלכם בבית.
מה שקורה זה שאתם נכנסים למחשב שלכם פותחים תוכנה כגון דפדפן ומקלידים בדפדפן איזשהו אתר אינטרנט איזושהי כתובת של אתר אינטרנט. מה שעשיתם בעצם זה ביקשתם דף אינטרנט שקיים בשרת.
הבקשה עצמה נקראת request. בקשה מגיעה לשרת שמאתר בתוך עצמו את דף האינטרנט ומחזיר לכם אותו בחזרה. פעולת ההחזרה נקראת תגובה או רספונס.
הדף מתקבל במחשב שלכם, כלומר במחשב הקליינט, ומוצג על ידי הדפדפן. אוקיי, מה שאנחנו הולכים לעשות עכשיו זה ממש לבנות דף HTML ראשון משלנו. דבר ראשון שאנחנו צריכים לדעת זה שדף HTML הוא דף טקסטואלי לחלוטין וניתן לכתיבה על ידי כל תוכנה שמסוגלת לכתוב טקסטים.
תוכנה מאוד פשוטה שמסוגלת לכתוב טקסטים נקראת Notepad. אפשר להגיע על ידי סטארט פרוגרמס אקססוריז נוטפד.
זאת תוכנה ממש ממש פשוטה שאפשר לכתוב טקסטים. איך נראה דף html? לדף html ראשית יש אלמנטים שנקראים תגיות. תגית נכתבת על ידי סוגריים משולשות, שם התגית לדוגמה html וסגירת סוגריים משולשות.
הדבר הזה נקרא תגית פתיחה. כמעט לכל תגית קיימת תגית סגירה שנראית בצורה כזאת סוגריים משולשות / שם התגית במקרה שלנו html וסגירת סוגריים משולשות.
מה שקורה כרגע זה שיש לנו חלק הפתיחה של התגית או לפעמים קוראים לזה תגית פתיחה וחלק הסגירה של התגית לפעמים קוראים לזה תגית סגירה.
תגית מציינת לדפדפן הוראה מסוימת. בדף html התגית הראשונה שעוטפת את כל שאר התגיות זאת התגית הזאת html. בתוך html כל הדף מחולק לשני חלקים. חלק ראשון נקרא Head ובואו נעשה פתיחה וסגירה.
חלק שני נקרא Body, פתיחה וסגירה. נתחיל עם אזור ה-Body כי הוא יותר פשוט להבנה. אזור ה-Body מכיל את כל מה שרואים במסמך של הדפדפן.
אזור ה-Head מכיל את מה שהדפדפן שומר מאחורי הקלעים. בהמשך אנחנו נראה בדיוק למה הכוונה. כרגע יש לנו תגיד פתיחה של HTML, תגיד סגירה של HTML, בתוכו יש שני חלקים, האזור מאחורי הקלעים והאזור של תוכן הדפדפן עצמו מה שהמשתמש רואה.
עד כדי כך זה פשוט. אם עכשיו אני רוצה לשמור את המסמך הזה ואני הולך לפייל save as בואו נשמור אותו נניח על הדסטופ והסיומת שאני צריך לתת לו היא htm סיומת htm או html לפעמים אלה סיומות עבור דפי html אם עכשיו אני אגש לדסטופ אני אראה שיש לי פה דף html בואו נריץ אותו דאבל קליק עליו ניתן לראות שהדפדפן הולך לפתוח אותו ולהציג את התוכן שלו
ואני רואה קודם כל שהדפדפן פתח לי את הדף ומציג לי את הדף הזה אבל לא כתבנו שום דבר שאמור להיות מוצג בדף ולכן מה שאנחנו הולכים לראות זה דף ריק לגמרי בהמשך אנחנו הולכים להוסיף לדף כל מיני תגיות ולראות איך הדפדפן מציג אותן אוקיי אז כמו שאנחנו רואים אם כרגע הדף הוא ריק
מפני שלא כתבתי שום תגית על הדף עצמו. בואו נחזור לדף ונוסיף בבאדי תגית שנקראת h1. h זה קיצור של header או כותרת ואני מבצע פתיחה של תגית h1 וסגירה של תגית h1 ובתוכה אני כותב איזושהי כותרת לדוגמה Welcome to my site.
בואו נשמור את זה, נחזור לדפדפן ונבצע רפרש והנה האתר הראשון או הדף הראשון שפיתחנו, שבו יש דפדפן עם כותרת בלבד Welcome to my site.
בואו נראה עוד דבר או שתיים בקשר לתגיות ה-HTML. ב-Head יש לי תגית שנקראת Title. נפתח אותה ונסגור אותה ונרשום איזושהי כותרת בתוך התגית My Homepage.
נשמור את זה. נחזור לדפדפן. כאשר אני אבצע רפרש אתם הולכים לראות את מה שכתבתי ב-Title גם כאן וגם כאן. בואו נעשה רפרש ולהלן מה שכתבתי בתגית Title.
ולא תגיד שנמצאת בתוך ה-Body, אלא תגיד שנמצאת בתוך ה-Head. אוקיי, הדפדפן מסוגל לתמוך גם בעברית.
לדוגמה, אם הייתי משנה עכשיו את My Home Page, בואו נניח ל... אוקיי, דפדפן מסוגל לתמוך גם בעברית.
אם לדוגמה אני הייתי רושם פה אתר הבית של יוני ושומר, הייתם רואים שהדפדפן מציג גם עברית. בואו נראה עוד פסקה אחת או מידע אחד שניתן להציג הרבה ב-HEML.
וזאת היא תגית שנקראת תגית p ותגית שמאפשרת לי להציג איזושהי פסקה מסוימת. בואו נשמור את זה, צור בחזרה, נבצע רפרש.
וסך הכל יש לנו פה איזושהי פסקה מסוימת שיכולה להיות מופרדת מפסקאות אחרות. מה זה אומר? אם נניח הייתי לוקח את הפסקה הזאת ויוצר עוד פסקה ועוד פסקה לידה, הייתם רואים שכל פסקה מופרדת מהפסקה השנייה.
יש הפרדה מבחינת הדפדפן. אז בעצם מה שבנינו פה זה דף html ממש פשוט ומה שראינו זה את המבניות שלו. יש לנו פה תגית html שעוטפת את כל התוכן, יש לנו תגית a header שאחראית על הכותרת וכל מה שנמצא מאחורי הקלעים, יש לנו תגית body שמכילה את התוכן שרואים בדפדפן עצמו ובסך הכל המבניות של דף html מחולקת לשני חלקים מה שרואים מאחורי הקלעים ומה שרואים בתוכן של הדפדפן.
מקודם ראינו איך אפשר לבנות אתר אינטרנט בעזרת תוכנת כתבן Notepad. מה שאנחנו הולכים לראות עכשיו זה איך לבנות אתר אינטרנט בעזרת Visual Studio.
במציאות קצת קשה לכתוב אתר אינטרנט בעזרת כתבן או בעזרת Notepad, וכותבים אתר אינטרנט בעזרת תוכנה הרבה יותר מיוחדת בשביל כתיבת אתר אינטרנט, כגון Microsoft Visual Studio גרסת 2010, זאת הגרסה החדשה שקיימת.
אז בואו נפתח את Microsoft Visual Studio 2010, ניגש לפייל ניו פייל ויז'ל סטודיו מציגה לי אפשרות לבחור מספר סוגים של קבצים קובץ שאנחנו רוצים קובץ html ואני בוחר html page ואופן עכשיו מה שאני רואה זה בעצם קוד html שדומה לקוד שמקודם כתבנו בנוטפד אני רואה שיש לי כאן תגית html אני רואה שיש לי תגית head title תגית body כל מוכן לי בשביל לכתוב דף
html כמו כן אני רואה שיש לי פה איזושהי תגית שנקראת doc type תגית .type זה תגית פנימית לשימוש Visual Studio, אנחנו לא נתעסק איתה.
אז בואו נתחיל כבר עכשיו לראות איך אנחנו בונים את האתר ב-HTML. בואו נניח שהייתי כותב כאן תגית h1. אני מזכיר לכם, h1 זה קיצור של Header, וזאת תגית כותרת, שמאפשרת לי להציג כותרת בצורה גדולה.
בואו נכתוב את הכותרת בעברית. נשמור את הדף, בואו נשמור אותו על הדסטופ ונקרא לו First Page.
ניגש לדסטופ ונריץ את הדף. ניתן לראות שהדפדפן פותח את הדף ומציג לי את התוכן בעברית. עכשיו, מה שאני רואה זה שהתוכן מוצמד לשמאל. אוטומטית הדפדפן חושב שאני רוצה להציג דף בשפה האנגלית.
איך אני גורם לו להציג את הדף בשפה העברית? כלומר, להציג את הדף מימין לשמאל. לכל תגית, כמעט לכל תגית, יש אפשרות לתת תכונה נוספת לגבי התגית.
לדוגמה, תגית body שעוסקת בתוכן של הדפדפן עצמו, במסמך של הדף יש אפשרות לתת מידע נוסף בקשר לתגית. המידע הזה נכתב בתגית הפתיחה ונקרא Attributes.
כאן אני רואה שיש לי רשימה של Attributes שניתן להגדיר עבור התגית. Attribute אחד נקרא דיר. דיר זה קיצור של Direction והוא אחראי על כיוון הזרימה של הדף ימין לשמאל או שמאל לימין.
איך אני מגדיר Attributes? אני כותב דיר ולוחץ רווח. לאחר מכן אני מקבל הצעות לגבי מה האופציות שיש לי עבור אותו אטריביוט או תכונה. אני רואה שהוא נותן לי אפשרות ל-LTR או RTL, כלומר Left to Right או Right to Left.
אטריביוט חייב לבוא בגרשיים, זאת אומרת שאני צריך לפתוח גרשיים, לרשום את הערך הרצוי, לדוגמה RTL, ולסגור גרשיים.
אבל אני רואה שהמחשב או ויז'ל סטודיו לא ביצעה לי את הגרשיים אוטומטית ואני הייתי צריך לכתוב את הגרשיים בעצמי.
אני יכול לומר לוויז'ואל סטודיו להחדיר גרשיים אוטומטית. איך אני עושה את זה? אני הולך ל-Tools Options ותחת טקסט אדיטור