בניית אתר בHTML- בסיס
ברוכים הבאים לחלק השני בסדרת המדריכים על HTML,
היום במדריך, אחרי שהבנו מה זה HTML, נלמד את הבסיס,
אז... קדימה!
בשביל להתחיל, לפני שישר נבנה אתר, אני רוצה שקודם כל שנבנה "אתר לדוגמה", תכף תבינו מה זה אומר, אבל בואו נתחיל.
צרו תיקיה במחשב שלכם,
צרו לא בתוך התיקייה קובץ טקסט ריק ושמרו אותו
בתיקייה שיצרתם בשם, עם סיומת html.
לדוגמא- "home.html"
עכשיו היכנסו לתיקייה שיצרתם, אתם תראו שם קובץ עם סמל של דפדפן פתחו
אותו,
חזרו לתקייה, לחצו על הקובץ פעם אחת ואז לחצו לחיצה ימנית בעכבר, לחצו על "פתח
באמצעות", ואז בחרו ב"פנקס רשימות" כדי לפתוח אותו כדף טקסט.
עכשיו הגענו למצב שבו יש לנו- תקייה, דף אינטרנט ודף טקסט, מעכשיו דף הטקסט יהיה העורך שלנו, שבו נבצע את כל השינויים באתר, ודף האינטרנט יראה לנו את התוצאה של מה שעשינו בכל פעם שנבצע שמירה.
כשתיכנסו לדף האינטרנט, אתם תראו דף ריק, ולמעלה בשורת הכתובת, תראו איפה האתר
שמור,
איפה שהוא יהיה שמור, זה יהיה ה"דומיין" שלו, אני בכוונה שמתי את
הדומיין בתוך מרכאות, כי זה לא באמת דומיין, אתם לא תוכלו לשתף אותו לאחרים
ולהראות להם איך האתר נראה, כי הוא לא שמור בענן, הוא שמור על המחשב שלכם.
מזל טוב!! אחרי כל ההכנות, אנחנו מוכנים להתחיל בתהליך בנייית האתר!!
טוב, ניכנס לקובץ הטקסט, ונכתוב בשורה הראשונה את התגית
<html>
(מריחים כבר משהוא מוכר?😉)
אחר כך, הוסיפו את התגית
<title>
כשמה כן היא, התגית הזו מגדירה
את הכותרת של הכרטיסייה של האתר בדפדפן,
אחרי התגית כתבו את מה שאתם רוצים
שיהיה כתוב בכותרת של הכרטיסייה.
לדוגמא-
כאן אפשר לראות שבאתר של יוטיוב הכותרת היא "Youtube", ובאתר של גוגל הכותרת היא "Google"
עכשיו הבנתם מה זה אומר?
יופי.
*חשוב לזכור- בסוף כל תגית צריך לסגור אותה על ידי הוספת תגית
עם קו אלכסוני, לדוגמא-
את התגית <title> נסגור כך- <title/>
אז בעצם הקוד שלנו נראה כך,
רק שבמקום הכותרת שאני כתבתי, כתבו את הכותרת שאתם רוצים
בכל פעם שתרצו לראות איך האתר שלכם נראה אחרי השינויים, שמרו את קובץ הטקסט
(ctrl+s) ובצעו רענון לאתר,
אתם תראו מה השתנה
עכשיו בואו נוסיף כותרת לאתר שלנו, אנחנו רוצים שקוראי האתר ידעו איך קוראים
לו...
אנחנו נוסיף את התגית <h1> ואחריה את הכותרת שנאחנו רוצים. (לא לשכוח לסגור)
מוזמנים לראות איך האתר שלכם נראה, יש כותרת בדפדפן, יש כותרת בדף עצמו, אבל היא לא כל כך מעוצבת, יותר נכון בכלל לא מעוצבת, אנחנו נעצב אותה בהמשך.
כשנכנסתם, אני מניח ששמתם לב לבעיה קטנה, גדולה.
הטקסט באתר כתוב משמאל
לימין, למה?
כי הדפדפן כתוב באנגלית, ואנחנו כותבים בעברית, באנגלית כותבים
משמאל לימין, ואילו בעברית כותבים מימין לשמאל,
בעיה.
לא נורא, בואו נגדיר כמה דברים באתר שלנו ונסדר את זה-
בתוך תגית הhtml נוסיף "dir="rtl
מה זה אומר?
dir קובע את כיוון
הטקסט,
וrtl זה הכיוון עצמו (right to left)
זה בעצם אומר לנו- ימין ל שמאל
גם ניתן להגיר את האתר משמאל לימין ע"י- ltr (שמאל ל ימין)
למעלה אני הדגשתי את המילה בתוך בגלל שלא מוסיפים את הdir אחרי
התגית, אלא בתוך, לכן זה יראה כך-
<"html dir="rtl>
אנחנו בתוך התגית html גם נוסיף- "lang= "he
זה בעצם אומר לנו- שפה(lang, קיצור של language)=עברית(he, קיצור של hebrew)
עכשיו, איך האתר נראה?
פוסטים קשורים
תגובות
הוסף רשומת תגובה