PDA

צפייה בגרסה מלאה : סיקור [מדריך] איך בונים אתר?



KingDos
02-08-2014, 10:17 PM
מדריך זה הינו מדריך בסיסי לאנשים שאין להם כל ידע בבנית אתרים והיו רוצים לבנות אתר משלהם. מדריך זה מלמד מאפס כיצד לבנות אתר באינטרנט.







בכדי להתחיל בבנית האתר, כל מה שאנו צריכים לעשות זה לפתוח מסמך טקסט פשוט (ניתן לעשות זאת ע"י כניסה ל "התחל", "עזרים" ובחירה ב"פנקס רשימות").
כעת, לפני שנתחיל, נשמור את הקובץ בפורמט של אתר אינטרנט. נלך במסמך הטקסט ל "קובץ", "שמירה בשם", ונקרא לעמוד שנבנה:
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">

חשוב לדייק בכתובת התמונה המלאה, אחרת התמונה לא תוצג.

קישורים

אם ברצונכם לקשר לאתר אחר, ניתן לעשות זאת בקוד הבא:
<a href="http://www.google.co.il">קישור לגוגל</a>
והתוצאה תהיה:


קישור לגוגל (http://www.google.co.il/)

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

<a target="_blank" href="http://www.google.co.il">קישור לגוגל</a>
כשהפקודה target="_blank" מורה לקישור להיפתח בחלון חדש.

עד כאן מדריכנו הקצרצר בשפת ה HTML. בהמשך יובאו באתר מדריכים מתקדמים יותר בשפה, שיסבירו על שימוש בטבלאות, טפסים וכו'.
לאחר שבניתם את האתר הראשון שלכם, עליכם לעלות אותו לאינטרנט ולקבל קישור אותו תוכלו לפרסם. בכדי לעשות זאת עליכם לקנות שרת איחסון או להשתמש באחד משירותי האיחסון החינמיים. חיפוש בגוגל במילים "איחסון בחינם" יוביל אתכם ללא מעט אתרים המציעים לאחסן אתרים בחינם. בחרו את הטוב ביותר עבורכם.
כדי לעלות את הקבצים שבניתם לשרת יש לבחור במסמך הטקסט ב"קובץ", "שמירה בשם", ושם לבחור ב"שמור כסוג" All Files,
ובשם הקובץ לרשום סיומת html.
למשל: index.html

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

בהצלחה.

לוחות הברית
02-08-2014, 10:23 PM
אני כבר הכרתי את המדריך הזה בע"פ!!!

אלי 1
02-08-2014, 10:58 PM
תודה רבה אפילו שלא מכיר ולא מבין מה ואיך עושים את הדבר

xdrzseaw
02-09-2014, 12:09 AM
תודה רבה יהודה על המדרך
ניכר עליך שבן אדם חכם אתה
תמשיך להחכים אותנו במדריכים נוספים
וכל הברכות יחולו על ראשך

eliahu
02-09-2014, 11:15 AM
תודה רבה יהודה מדריך באמת חשוב.

CRMKUBV100
05-06-2014, 11:49 AM
תודה קצת מסובך