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

לפני שנתחיל בכללים הטכניים הנה כלל חשוב מאוד:

אל תקצרו את הקוד על חשבון תקינות הקוד!

ככל שהקוד יהיה נכון ומדויק, כך הוא יהיה יותר טוב. גוגל מייחס חשיבות לתקינות הקוד ולזמן עליית העמוד. הזמן כמובן מושפע ישירות מתקינות הקוד – אם הקוד נכון, הדפדפן לא מתאמץ ואנו נקבל את העמוד מהר יותר.

אז איך בודקים שהקוד נכון ומדויק?

הבדיקה הטובה ביותר היא לגשת לאתר של W3C ארגון אשר אחראי לסטנדרטים בכתיבת קוד HTML.
ניתן לקרוא על הארגון בקישור הבא – http://www.w3.org/Consortium

לפי אילו סטנדרטים אנחנו כותבים קוד?

השורה הראשונה אשר מופיעה ברוב האתרים בעולם, הינה השורה אשר קובעת את הסטנדרט לפיו כתוב הקוד. בגלל שאנו כותבים קוד ב HTML, השורה הראשונה שאותה נרשום בקוד שלנו (לפני תג ה) תהיה שורת הסטנדרט של העמוד.לפניכם השורה:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

לאן לגשת באתר ה W3C כדי לבדוק שהקוד תקין?

באתר יש כלי הנקרא Markup Validator הכלי נוצר לצורך בדיקת תקינות הקוד לפני הסטנדרטים של W3C. יש שלוש דרכים לבדוק את הקוד:

1. ולידציה לפי כתובת URL– רשמו בחלון המופיע לפניכם את הכתובת של העמוד שלכם באינטרנט לחצו על Check וצפו בתוצאות. http://validator.w3.org/#validate_by_uri

2. ולידציה ע"י העלאת קובץ לשרת של W3C– לחצו על הכפתור Browse, העלו את הקובץ וצפו בתוצאות. http://validator.w3.org/#validate_by_upload

3. ולידציה ע"י הכנסת קוד כטקסט לחלון הקלט של W3C– העתיקו את הקוד שלכם לחלון קלט המופיע לפניכם לחצו על Check וצפו בתוצאות. http://validator.w3.org/#validate_by_input

ומה התוצאות האפשריות?

• במידה והעמוד שלכם תקין אתם תקבלו הודעה ירוקה ושמחה על תקינות הקוד.

• במידה והקוד לא תקין – תקבלו הודעה אדומה וצועקת על כך שהקוד לא תקין. ההודעה תכלול את כמות הטעויות (שגיאות קוד). באותו עמוד תופיע גם רשימה של כל הטעויות שנמצאו כולל מספר השורה שלהן ומהותן.

לאחר הבנת החשיבות של קוד נכון, נתחיל במבנה קוד HTML:

תגית 

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

תגית 

לאחר תגית האמורה להופיע תגית ה.
הדבר הראשון אשר אמור להופיע אחרי התגהינו הקידוד של העמוד. הקידוד חשוב מאוד בכדי שכל הגולשים באתרכם יוכלו לראות את התווים באופן תקין.
דוגמא:

תגית .

תגית 

אחרי הכותרת אנו נזין את תגי הMeta של העמוד.

ישנם עוד כמה סוגים של תגי Meta, אני רשמתי רק שניים, אך כמובן שאפשר וצריך להוסיף עוד מהתגים החשובים.

ועכשיו נעבור לחלק של החבאת קוד ה – CSS והJavaScript

לאחר תגי המטה אנו נרשום את כל ההפניות לסקריפטים אשר משפעים על העמוד שלנו.
אנו לא מעוניינים שקוד ה CSS והJavaScript יופיעו בעמוד שלנו בגלל שגוגל מתייחס לתוכן ה-HTML של העמוד, ואנו מעוניינים שההגעה של העכבישים של גוגל לתוכן תהיה מהירה ככל האפשר.

נתחיל בהחבאת CSS:

בכדי להחביא את ה CSS יש ליצור קובץ עם סיומת ".css" ובו להזין את כל הקוד CSS שלנו. לאחר מכן יש להזין את השורה הבאה לקוד HTML שלנו.
לדוגמה, אם יצרנו קובץ MyCssStyles.css בתיקיה הראשית של האתר, שורת ההפניה תראה כך:

החבאת JavaScript:

העיקרון דומה להחבאת CSS, רק שורת הקוד אותה נזין בHtml תהיה שונה. שוב נתחיל ביצירת קובץ עם סיומת ".js" ובו נזין את כל הסקריפט שלנו. לאחר מכן נזין את השורה הבאה לתוך הקוד Html שלנו:

לדוגמא, אם יצרנו קובץ MyJavaScriptCode.js בתיקיה משנית בשם JSCode, שורת ההפניה תראה כך:

מספר שורות ההפניה אינו מוגבל, אך צריך לזכור כל שורה מעריכה את הקוד!
לאחר שסיימנו עם ההפניות בעצם סיימנו את ראש עמוד ה Html שלנו ולכן התג אשר יופיע לאחר ההפניות יהיה .
מיד לאחר ראש המסמך בא גוף המסמך:
…
לאחר סיום הגוף לא נשכח את תגית הסגירה של Html: .
פה נגמר מסמך ה Html שלנו באופן רשמי.

כמה כללים מומלצים:

• השתדלו לכתוב את התגים באותיות קטנות:

  ולא.

• השתדלו לכתוב את המאפיינים של התגים באותיות קטנות, וליצור רווח בין מאפיין למאפיין, כמו כן השתדלו לשים גרשיים מסביב לערכים של המאפיינים:

• השתדלו לא לשכוח לשים title בקישורים.

• השתדלו לא לשכוח לשים alt, width, height, align בתמונות.

  

• תנו שמות באנגלית לקבצים ולתמונות. יהיה לכם הרבה יותר קל לעבוד עם זה אחר כך.

• תנו שמות משמעותיים לקבצים ולתמונות.

• נסו לעצב את הטקסט בעזרת CSS ככל האפשר, זה מצמצם הרבה קוד.

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

• אל תחסכו במאפיינים של תגים לצורך צמצום קוד, לרוב זה יותר פוגע בגולש מאשר עוזר לגוגל.

• אל תכתבו קוד צפוף, גוגל לא מגביל אתכם בכמות ה Enter –ים.

רוצים ללמוד בניה ופיתוח אתרים באופן מקצועי? במכללת השרון תמצאו קורס מנהלי-מפתחי וורדפרס מקיף ומקצועי.