annapolise
12-11-2008, 19:31
בכדי להתחיל בבנית האתר, כל מה שאנו צריכים לעשות זה לפתוח מסמך טקסט פשוט (ניתן לעשות זאת ע"י כניסה ל "התחל", "עזרים" ובחירה ב"פנקס רשימות").
כעת, לפני שנתחיל, נשמור את הקובץ בפורמט של אתר אינטרנט. נלך במסמך הטקסט ל "קובץ", "שמירה בשם", ונקרא לעמוד שנבנה:
index.html
לפני שלוחצים על הכפתור "שמור" יש לעשות פעולה חשובה והיא לבחור לשמור כסוג "All Files" ולא כ "txt" כפי שנשמר באופן אוטומטי. ניתן לעשות זאת שורה מתחת לשורה בה רשמנו את השם index.html
לאחר ששמרנו את הקובץ, נראה בתיקיה בה שמרנו אותו חלון של דפדפן. בתוך הקובץ הזה למעשה נמצא האתר שלנו שכרגע לא באינטרנט אלא על המחשב שלנו.
כדי לתכנת את האתר ולגרום לדפדפן להציג את מה שאנו רוצים, נצטרך לתת לו מספר פקודות. במדריך זה נלמד באופן בסיסי את שפת התיכנות HTML ובאמצעותה יבנה אתרינו.
תחילה, אנו צריכים ליצור במסמך מבנה של אתר הנבנה ב HTML , וכך הוא נראה:
<html>
<head>
<title>
כותרת האתר
</title>
</head>
<body dir="rtl">
תוכן האתר
</body>
</html>
זהו מבנה בסיסי של קובץ HTML, כשבין התגיות "body" נכניס את תוכן האתר.
ומה רושמים בתוכן האתר?
בתוכן האתר ניתן לרשום טקסט רגיל, אך הדפדפן לא יודע להבחין בפקודה כמו ירידת שורה, למשל.
לכן, בכדי לרדת שורה, נשתמש בתגית <br>
אם נניח ארצה לכתוב באתרי את הפיסקה הבאה:
בלה בלה בלה,
בלה בלה.
ואכתוב אותה כך באתרי, התוצאה שתתקבל תהיה: "בלה בלה בלה, בלה בלה."
וכי למה? כי כמו שרשמנו בהתחלה, הדפדפן שמפענח את הקוד אותו אנו רושמים, לא מסוגל לרדת שורה בעצמו.
בכדי לקבל את התוצאה הרצויה בדוגמא הנ"ל, אצטרך לכתוב:
בלה בלה בלה,
<br>
בלה בלה.
התג <br> לא יוצג בפני הגולשים ויגרום להורדת השורה.
אם ארצה לרדת 2 שורות, אכתוב <br> <br> .
עיצוב הטקסט
לעיצוב הטקסט קיימים פרמטרים נוספים כגון קו תחתון, כתב מודגש, צבעים וגדלים.
בכדי לכתוב באופן מודגש נשתמש בתג <b>, אך בניגוד לתג <br>, את התג הזה אנו חייבים לסגור ברגע שאנו רוצים שתסתיים ההדגשה.
לדוגמא, אם ארצה לכתוב את הטקסט הבא: בלה בלה בלה (המילה האמצעית מודגשת), ארשום בתוכן האתר:
בלה <b> בלה </b> בלה.
כדי להשתמש בקו תחתון אשתמש בתגית <u> שגם אותה עליי לסגור, ואעשה זאת כך:
בלה <u> בלה </u> בלה.
במידה וארצה גם להדגיש מילה וגם לשים מתחתיה קו תחתון, אשתמש ב 2 הפקודות שלמדנו:
<b><u>בלה </u></b>
והתוצאה שתתקבל תהיה:
בלה
ומה אם אנו רוצים להציג טקסט צבעוני באתר? לצורך כך נשתמש בתג "font" ונאמר לדפדפן באיזה צבע אנו רוצים להשתמש.
את הצבעים ניתן לכתוב בשפה הקסה דצימאלי או פשוט לכתוב את שמם באנגלית.
לדוגמא, אם נרצה לצבוע טקסט באדום, נכתוב במקום בו עלינו להכניס את הצבע את המילה "red".
אז איך עושים זאת?
פשוט מאוד, שימו לב לקוד הבא:
<font color="red">הטקסט שלנו</font>
והתוצאה:
הטקסט שלנו
מה שעשינו פה זה שימוש בתג font ובחירת הצבע אדום (red), כתיבת הטקסט אותו אנו רוצים לצבוע וסגירת התג font ע"י הפקודה </font> בכדי להימנע מצביעת המסמך כולו.
כעת ניתן לשחק עם הצבעים ולצבוע את הטקסט בכל צבע רצוי.
כותרות
בכדי לכתוב כותרת נשתמש בתגים בין <h1> ל <h6>, כששימוש בתג <h1> יציג בפנינו את הכותרת הגדולה ביותר ואילו שימוש בתג "h6" יציג בפנינו את הכותרת הקטנה ביותר.
בכדי לרשום כותרת נעשה זאת באופן הבא:
<h1>כותרת גדולה </h1>
כך ניתן לבחור מספר בין 1 ל 6 שיקבע את גודל הכותרת.
יישור טקסט
בכדי לכתוב טקסט במרכז הדף, נשתמש בתג <center>, כלומר נכתוב באופן הבא:
<center>
כתיבה במרכז הדף
</center>
וכך הטקסט יופיע בדפדן:
כתיבה במרכז הדף
בכדי לכתוב בצד ימין נשתמש בתג:
<p align=right>
וכאשר נרצה להפסיק את הכתיבה בצד ימין נסיים אותה באמצעות התג </p>
בכדי לכתוב בצד שמאל נשתמש באותו תג בדיוק רק במקום המילה right נשתמש במילה left
תמונות
בכדי להציג תמונות באתר, נשתמש בקוד הבא:
<img src="http://www.yousite/thepicture.jpg" width="100" height="100">
לאחר הטקסט img src= עלינו לכתוב בין המרכאות את הכתובת המדויקת לתמונה. בתג width עלינו לרשום ערך רצוי בפיקסלים לרוחב התמונה, ובתג height ערך רצוך בפיקסלים לגובה התמונה. לא חייבים להשתמש בתגים אלו וניתן להציב תמונה גם באופן הבא:
<img src="http://www.yousite/thepicture.jpg">
חשוב לדייק בכתובת התמונה המלאה, אחרת התמונה לא תוצג.
כעת, לפני שנתחיל, נשמור את הקובץ בפורמט של אתר אינטרנט. נלך במסמך הטקסט ל "קובץ", "שמירה בשם", ונקרא לעמוד שנבנה:
index.html
לפני שלוחצים על הכפתור "שמור" יש לעשות פעולה חשובה והיא לבחור לשמור כסוג "All Files" ולא כ "txt" כפי שנשמר באופן אוטומטי. ניתן לעשות זאת שורה מתחת לשורה בה רשמנו את השם index.html
לאחר ששמרנו את הקובץ, נראה בתיקיה בה שמרנו אותו חלון של דפדפן. בתוך הקובץ הזה למעשה נמצא האתר שלנו שכרגע לא באינטרנט אלא על המחשב שלנו.
כדי לתכנת את האתר ולגרום לדפדפן להציג את מה שאנו רוצים, נצטרך לתת לו מספר פקודות. במדריך זה נלמד באופן בסיסי את שפת התיכנות HTML ובאמצעותה יבנה אתרינו.
תחילה, אנו צריכים ליצור במסמך מבנה של אתר הנבנה ב HTML , וכך הוא נראה:
<html>
<head>
<title>
כותרת האתר
</title>
</head>
<body dir="rtl">
תוכן האתר
</body>
</html>
זהו מבנה בסיסי של קובץ HTML, כשבין התגיות "body" נכניס את תוכן האתר.
ומה רושמים בתוכן האתר?
בתוכן האתר ניתן לרשום טקסט רגיל, אך הדפדפן לא יודע להבחין בפקודה כמו ירידת שורה, למשל.
לכן, בכדי לרדת שורה, נשתמש בתגית <br>
אם נניח ארצה לכתוב באתרי את הפיסקה הבאה:
בלה בלה בלה,
בלה בלה.
ואכתוב אותה כך באתרי, התוצאה שתתקבל תהיה: "בלה בלה בלה, בלה בלה."
וכי למה? כי כמו שרשמנו בהתחלה, הדפדפן שמפענח את הקוד אותו אנו רושמים, לא מסוגל לרדת שורה בעצמו.
בכדי לקבל את התוצאה הרצויה בדוגמא הנ"ל, אצטרך לכתוב:
בלה בלה בלה,
<br>
בלה בלה.
התג <br> לא יוצג בפני הגולשים ויגרום להורדת השורה.
אם ארצה לרדת 2 שורות, אכתוב <br> <br> .
עיצוב הטקסט
לעיצוב הטקסט קיימים פרמטרים נוספים כגון קו תחתון, כתב מודגש, צבעים וגדלים.
בכדי לכתוב באופן מודגש נשתמש בתג <b>, אך בניגוד לתג <br>, את התג הזה אנו חייבים לסגור ברגע שאנו רוצים שתסתיים ההדגשה.
לדוגמא, אם ארצה לכתוב את הטקסט הבא: בלה בלה בלה (המילה האמצעית מודגשת), ארשום בתוכן האתר:
בלה <b> בלה </b> בלה.
כדי להשתמש בקו תחתון אשתמש בתגית <u> שגם אותה עליי לסגור, ואעשה זאת כך:
בלה <u> בלה </u> בלה.
במידה וארצה גם להדגיש מילה וגם לשים מתחתיה קו תחתון, אשתמש ב 2 הפקודות שלמדנו:
<b><u>בלה </u></b>
והתוצאה שתתקבל תהיה:
בלה
ומה אם אנו רוצים להציג טקסט צבעוני באתר? לצורך כך נשתמש בתג "font" ונאמר לדפדפן באיזה צבע אנו רוצים להשתמש.
את הצבעים ניתן לכתוב בשפה הקסה דצימאלי או פשוט לכתוב את שמם באנגלית.
לדוגמא, אם נרצה לצבוע טקסט באדום, נכתוב במקום בו עלינו להכניס את הצבע את המילה "red".
אז איך עושים זאת?
פשוט מאוד, שימו לב לקוד הבא:
<font color="red">הטקסט שלנו</font>
והתוצאה:
הטקסט שלנו
מה שעשינו פה זה שימוש בתג font ובחירת הצבע אדום (red), כתיבת הטקסט אותו אנו רוצים לצבוע וסגירת התג font ע"י הפקודה </font> בכדי להימנע מצביעת המסמך כולו.
כעת ניתן לשחק עם הצבעים ולצבוע את הטקסט בכל צבע רצוי.
כותרות
בכדי לכתוב כותרת נשתמש בתגים בין <h1> ל <h6>, כששימוש בתג <h1> יציג בפנינו את הכותרת הגדולה ביותר ואילו שימוש בתג "h6" יציג בפנינו את הכותרת הקטנה ביותר.
בכדי לרשום כותרת נעשה זאת באופן הבא:
<h1>כותרת גדולה </h1>
כך ניתן לבחור מספר בין 1 ל 6 שיקבע את גודל הכותרת.
יישור טקסט
בכדי לכתוב טקסט במרכז הדף, נשתמש בתג <center>, כלומר נכתוב באופן הבא:
<center>
כתיבה במרכז הדף
</center>
וכך הטקסט יופיע בדפדן:
כתיבה במרכז הדף
בכדי לכתוב בצד ימין נשתמש בתג:
<p align=right>
וכאשר נרצה להפסיק את הכתיבה בצד ימין נסיים אותה באמצעות התג </p>
בכדי לכתוב בצד שמאל נשתמש באותו תג בדיוק רק במקום המילה right נשתמש במילה left
תמונות
בכדי להציג תמונות באתר, נשתמש בקוד הבא:
<img src="http://www.yousite/thepicture.jpg" width="100" height="100">
לאחר הטקסט img src= עלינו לכתוב בין המרכאות את הכתובת המדויקת לתמונה. בתג width עלינו לרשום ערך רצוי בפיקסלים לרוחב התמונה, ובתג height ערך רצוך בפיקסלים לגובה התמונה. לא חייבים להשתמש בתגים אלו וניתן להציב תמונה גם באופן הבא:
<img src="http://www.yousite/thepicture.jpg">
חשוב לדייק בכתובת התמונה המלאה, אחרת התמונה לא תוצג.