CreateSite/HtmlIntro

מבוא ל HTML

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

  1. מבוא ל HTML
    1. עמוד ראשון
      1. הסבר לקוד
        1. תוכן העמוד
      2. כמה הערות
    2. מידע נוסף
    3. עוד דפים על HTML
  2. דיון

עמוד ראשון

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

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

[[ltr]]

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>הדף הראשון שלי</title>
</head>

<body dir="rtl">

   <h1>הדף הראשון שלי</h1>
   <p>זה הדף הראשון שלי, הוא מופיע בעמוד 
   <a href="http://mac.plonter.co.il/plonwiki/CreateSite">CreateSite</a> במקמק, 
 
   <p>תוכלו להשתמש בדוגמא זו כתבנית התחלית לדף הבית שלכם

   <p>אם נהנתם מהאתר שלי אתם יכולים 
   <a href="mailto:myname@myserver.com">לשלוח לי דואר אלקטרוני</a>.

</body>
</html>

[[rtl]]

וכך זה אמור להיראות

first_look.png

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

הסבר לקוד

כמו שנאמר השפה משתמשת בתגיות המתארות את אופן ההצגה של תוכן הדף. הנה הסבר לתגיות החשובות בדף

  1. בשורה הראשונה התגית [[ltr(<html>)]] מודיעה לדפדפן את שפת הדף שהוא נדרש להציג. תגית זו נקראת תגית תוחמת מכיון שיש גם לסגור את תחום התוכן שלה על ידי התגית [[ltr(</html>)]] , ומכיוון שכל המסך הוא בעצם קוד HTML, תגית הסגירה, מופיעה בשורה האחרונה.

    1. בשורה השניה מופיעה התגית [[ltr(<head>)]] , המסמלת שכעת אנחנו עוסקים בראש הדף, כ ההגדרות השיכות לעניין זה יופיעו בין תגית הפתיחה [[ltr(<head>)]] לבין התגית הסוגרת את תחום התוכ שלה [[ltr(</head>)]]

      1. בתוך תחום ה [[ltr(<head>)]] מופיעה התגית [[ltr(<title>)]] שתפקידה לקבו את הותרת של העמד המופיעה בכותרת חלון הדפדפן כאשר העמוד יוצג (ראו בצילום המסך), גם זו תגית תוחמת, הטקסט שיופיע בינה לבין תגית הסגירה שלה, הוא זה שיופיע ככותרת הדף.

  2. לאחר מכן מופיעה תגית [[ltr(<body>)]] , בתחום תגית זו יופיע כל התוכן העמוד, הסבר בסעיף הבא.

תוכן העמוד

בתחום תגית [[ltr(<body>)]] מופיע כל תוכן העמוד, כעת נתעכב על כמה שורות [[ltr]]

 [[ltr(<h1>)]]הדף הראשון שלי</h1>

[[rtl]] המלים "הדף הראשון שלי" תחומות בתוך תגית <h1> המגדירה את הטקסט שבתחומה ככותרת בדף.

לאחר מכן מופיעה התגית [[ltr(<p>)]] , תגית זו יוצרת מעבר פסקה.

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

זוהי השורה שיוצרת קישור לדואר האלקטרוני: [[ltr]]

<a href="mailto:myname@myserver.com">לשלוח לי דואר אלקטרוני</a>

[[rtl]] המלים "לשלוח אלי דואר אלקטרוני" מופיעות בתחום התגית [[ltr(<a>)]] , לתגית זו שימושים רבים, במקרה זה היא מתפקדת כקישור, זאת מכיון שהמאפיין המתאר אותה הינו href, בתוך המאפיין href באה תמיד כתובת אינטרנט כלשהי במקרה זה נכתב ...:mailto, שזהו סימול לכתובת דואר אלקטרוני, כאשר רצינו לקשר לאתר אחר השתמשנו בתחילית של //:http. ניתן לראות זאת בקישור לדף CreateSite.

כמה הערות

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

מידע נוסף

עוד דפים על HTML

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

דיון


דפים קשורים

CreateSite

קטגוריה

קטגוריה: אינטרנט

תרמו לדף זה

Manoֿ, ניר סופר.

last edited 2003-07-13 09:26:41 by 80