איך לבנות עמוד HTML (מבנה עמוד בסיסי)
נכתב ע"י יוחאי ירמיהו תגובה אחת
לאחר שהבנתם מה זה HTML חשוב להבין שבמשך השנים שפת HTML התפתחה מ-HTML ל-XHTML והיום אנחנו משתמשים בשפה העדכנית ביותר שנקראת HTML5 (ניתן לראות מידע נוסף על ההיסטוריה באתר של W3Schools).
שפת HTML5 הביאה איתה אלמנטים שונים שניתן לעשות בהם שימוש ויחד עם זאת קיצרה/הורידה קודים מסוימים ומיותרים שהיום כבר אין צורך להשתמש בהם בעת כתיבת קוד HTML תקני.
איך לבנות אתר בחינם בשעה וחצי?
יש לי הצעה מעניינת עבורך, יצרתי הדרכה מלאה של למעלה משעה וחצי שתלמד אותך איך לבנות אתר מ-0 בחינם כולל רכישת אחסון ודומיין. נשמע מעניין? אשמח לשלוח לך אותה למייל.
בניית עמוד HTML
כאשר אנחנו בונים עמוד HTML נצטרך ליצור עמוד חדש במחשב ונצטרך להוסיף לו סיומת HTML. ניתן ליצור קובץ txt באמצעות ווינדוס ופשוט לשנות את הסיומת שלו על מנת שהוא יהפוך לעמוד HTML.
לאחר שיצרנו עמוד HTML (עם סיומת html) נוכל לפתוח אותו באמצעות הדפדפן עם תוכנות כמו פיירפוקס וגוגל כרום.
בדרך כלל על מנת לחסוך זמן וליצור בכל פעם קוד מחדש מומלץ ליצור תבנית עמוד מוכנה עם הבסיס של HTML ופשוט לערוך אותה בכל פעם מחדש. מתחת תוכלו לראות את קוד הבסיס שבו אנחנו עושים שימוש בעת התחלה של כתיבת קוד HTML.
חשוב לציין שהקוד מתחת מתאים לאתרים שנכתבים בשפה עברית. במידה והשפה של העמוד/האתר היא לא עברית אז יש להוריד את התגיות הבאות: lang="he-IL" dir="rtl".
<!DOCTYPE html>
<html lang="he-IL" dir="rtl">
<head>
<meta charset="utf-8" />
<title>הכנס כאן את כותרת העמוד</title>
<meta name="description" content="הכנס כאן את תיאור העמוד" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no" />
</head>
<body>
Your Content Goes Here
</body>
</html>
בהמשך המדריכים תוכלו להבין בצורה טובה יותר מה לעשות עם הקוד הזה ואיך להכניס תוכן חדש לתוך עמוד HTML.
נציין שאיפה שכתוב Your Content Goes Here שם יוצג התוכן שאנחנו הולכים לייצא לעמוד בפועל. ובהמשך המאמרים נלמד אתכם איך להוסיף תוכן לעמוד כמו: כותרות, פסקאות, רשימות ועוד… ואת הקוד הזה אתם תוסיפו בין תגיות ה-Body שבעמוד.
באזור ה-Head ניתן להכניס תגיות Meta ולטעון קבצים בשפות שונות כמו CSS וגאווה סקריפט ובנוסף אנחנו יכולים להגדיר כותרת לעמוד וכל מיני תגיות שונות שיעזרו בין היתר לקדם את האתר בגוגל ולהגדיר כותרות ותיאור ראשי לעמוד.
בחירת שם העמוד/קובץ
כאשר אנחנו בונים אתר HTML העמוד הראשי של האתר צריך להיקרא index.html וניתן ליצור עמודים נוספים לעמודי משנה באתר. כאשר האתר בנוי בתוך תיקייה והתיקייה מועלת לתוך שרת אחסון אז העמוד הראשי באתר יהיה index.html.
כך שאם למשל ניקח את האתר https:///html.org.il כאשר אתם נכנסים לכתובת הדומיין (שם האתר) בתוך הדפדפן העמוד שיטען עבור עמוד הבית של האתר יהיה העמוד index.html.
בשביל שהאתר יהיה באוויר אתם תצטרכו שרת אחסון ואם אין לכם שרת אחסון תוכלו לצפות במאמר של השוואת מחירי אחסון אתרים על מנת לרכוש אחסון אתרים זול במידה ותרצו להעלות את האתר לאוויר.
בניגוד לאתרי PHP (שפת קוד נוספת), באתר שנבנה באמצעות HTML תוכלו להריץ אותו לצורכי בדיקה גם במחשב ואם אתם לא רוצים להציג את האתר לגולשים לא תהיו חייבים לרכוש שרת אחסון.
בנוסף לכך זה אומנם לא חובה אבל מומלץ לציין את שמות הקבצים בתור שמות באנגלית ולא שמות בעברית. לצורך הדוגמא העמוד שבו כרגע אתם צופים הוא העמוד הבא והחלק המודגש הוא כתובת העמוד:
https://html.org.il/html-page.html
בפועל לא מופיע הסיומת html בעמוד בדפדפן אך הוספנו אותו רק לצורך הדגמה לאיך היה נקרא שם העמוד אם האתר הזה היה נבנה באמצעות קוד HTML.
ניתן לראות מידע נוסף על החשיבות של שימוש בכתובת באנגלית ולא בעברית בסרטון הבא:
תבנית עמוד HTML להורדה
אם הסתבכתם עם היצירה של עמוד HTML בעצמכם אז מתחת תוכלו ללחוץ על הכפתור ולהוריד את קובץ ה-HTML עם התבנית הבסיסית באמצעות קובץ ZIP.
תחלצו את קובץ ה-HTML מתוך הקובץ זיפ ותוכלו להשתמש בקובץ הזה על מנת לבצע את השינויים ולהוסיף את הקודים והתגיות שנציג לכם במאמרים הבאים.
עוד לא צפיתם בהדרכה? זה בחינם!
אני רוצה ללמד אתכם לבנות אתר אחד בחינם. מדובר על הדרכה של למעלה משעה וחצי שבה אני אלמד אותך מ-0 לבנות אתר כולל רכישת אחסון ודומיין. לקבלת ההדרכה למייל באופן מיידי יש להשאיר פרטים מתחת.
אם אהבתם את המדריך ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:
יש לכם שאלות בנוגע למדריך HTML? שתפו אותנו בתגובות!
אם יש לכם שאלות, אם משהו היה לא מובן או במידה ואתם רוצים לשתף אותנו בדעה שלכם תוכלו לעשות זאת בתגובות מתחת:
תודה רבה על ההסבר הקל והנגיש!
יש לך הסבר גם על התגיות של body, div , span כדי להבין למה זה מופיע בתוך העמודים ומתי משתמשים ?