קוד ה - HTML ועריכתו

מהי שפת HTML?
HTML, או בשמה המלא Hyper Text Markup Language היא שפת סימון טקסט, שמכילה הוראות לדפדפנים כיצד יש להציג את הדף. כל אתר אינטרנט בסופו של בנוי משפת
HTML. משתמשים מתקדמים ובעלי ידע ב - HTML יכולים להעשיר את תוכן העמודים באתר שלהם על ידי הכנסת קוד HTML מיוחד לעורך (מומלץ להכניס קוד XHTML) - אם כי עבודה עם קוד אינה הכרחית במערכת.

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

עמודים >> בחירת התפריט בו קיים העמוד (עליון, צדדי, עמודים) >> לחיצה על העמוד >> לחיצה על כפתור הגדרות >> עורך קוד מקור.
לחיצה עליו תוביל לקוד ה - HTML של העמוד ואותו ניתן לערוך את הקוד. כדי לראות את התוצאות, יש ללחוץ על כפתור שלח.

ניתן להכניס קוד בכל מקום בו קיים ממשק עריכה: כותרת עליונה ותחתונה, תפריט צדדי (בכלי של "קוד חופשי") ועוד.

במידה וקיים קוד שיש לשתול בעמוד והעמוד אינו ריק - ייתכן ויהיה קשה למצוא בתוך כל הקוד את המיקום המתאים, ניתן לפעול כך:

1. לרשום בעמוד עצמו טקסט ממלא מקום כלשהו (12345 או abcd לדוגמא).

2. לעבור למקור.

3. לאתר את הטקסט הזה במקור (ניתן לחפש על ידי CTRL+F).

4. להחליף אותו בקוד הרצוי.

באופן זה לא נדרשת הבנה של הקוד ומאפשרת למקם תכנים בצורה פשוטה יחסית, במיקום הרצוי.

הסבר קצר לגבי שפת הHTML
הפקודות ב HTML נכתבות בתוך סוגריים משולשים ונקראות תגים או תגיות(tags).
לכל פקודה יש תג פתיחה ותג סגירה, קימיים תגים מסוימים אשר להם אין תג סגירה. תג סוגר מיוצג על ידי סימן "/" ואחריו שם התג שנסגר.

לדוגמא, קוד HTML בסיסי ייראה כך:

הסבר לפי שורות:
1. בשורה זו מופיע תג פתיחה של המסמך, HTML, האומר לדפדפן להתייחס לתוכן
כאל HTML.
2. בשורה זו מופיע תג הפתיחה “

” שדרכו מגדירים תכונות שונות לעמוד, לדוגמא: הכותרת העליונה של חלון הדפדפן.
3. בשורה זו מופיע תג פתיחה “ ”.
4. פה יש לנו את תג הסגירה “” הסוגר את התג הנפתח בשורה 2.
6. בשורה זאת מופיעה תג ה"” שכל מה שמופיע מתחתיו יופיע גם בדפדפן.
בפועל מדובר בתוכן הדף שיוצג.
8. תג סגירה "” - פה מסתיים תוכן הדף.
10. תג סגירה "” - סוגר את הדף.

מספר תגים שימושיים:

- תג פסקה:
שימוש: תג זה מגדיר פסקה.
דוגמה:

זוהי פסקה לדוגמה

הקוד כפי שהוא בא לידי ביטוי:

זוהי פסקה לדוגמה

- תג עוגן:
שימוש: תג זה מגדיר עוגן לשני שימושים עיקריים
א. יצירת קישור לדף אחר ע"י שימוש בתכונת הHREF שלו.
ב. יצירת קישור למיקום בדף הנוכחי ע"י שימוש בתכונת הNAME שלו.
דוגמה:

מרכז ההדרכה

הקוד כפי שהוא בא לידי ביטוי:
מרכז ההדרכה

- תג תמונה:
שימוש: תג זה מכניס תמונה למסמך הHTML ע”י הגדרת תכונת הSRC, ורצוי להגדיר
גם את תכונת הALT (טקסט חלופי) שלו. תכונה זאת אינה מחייבת אך יכולה לעזור במידה והתמונה לא נמצאת - וגם קריאה על ידי מנועי חיפוש.
דוגמא:

*יש לשים לב שלתג זה אין תג סגירה!

הקוד כפי שהוא בא לידי ביטוי:

תמונה של בית

- תג טבלה:
תג זה כולל תתי תגים:
תג שורה.

תג כותרת.

תג תא. שימוש: בניית טבלאות למסמך הHTML. דוגמא: הקוד כפי שהוא בא לידי ביטוי:

כותרת 1	כותרת 2
תא 1	תא 2

מי שרוצה ללמוד עוד על שפת הHTML ושימושיה השונים מוזמן להיכנס לכאן:
W3Schools