מדריך: בניית האתר האישי שלך

שרת

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

למה להשתמש בחברות אחסון ולא במחשב הביתי?

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

ישנן חברות אחסון המציעות אחסון אתרים בחינם, כדי לצבור לקוחות פוטנציאלים שירשמו אליהן ויכירו אותן. לעתים אחסון חינמי זה מוגבל בזמן, בשטח אחסון, ברוחב פס וכו' ולעתים הוא אינו מוגבל, אך החברות מציעות שירותים מתקדמים בתשלום, כמו גיבוי האתר, סליקה מאובטחת של כרטיסי אשראי המאפשרת לבצע מכירות דרך האתר, ועוד. לצורך הקורס נסתפק בשרת החינמי הבא: https://il.000webhost.com/free-website-sign-up

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

בחלון הבא הזינו את הפרטים הבאים:

  • כתובת מייל אמתית שלכם. באמצעות מייל שישלח אליה תדרשו לאמת את הפרטים שהזנתם לצורך פתיחת החשבון ובאמצעותה תוכלו לשחזר את סיסמת ההתחברות לשרת אם תשכחו אותה.
  • סיסמה. מומלץ לא להזין את הסיסמה של המייל שהזנתם ומומלץ כן להזין סיסמה חזקה ולשמור עליה שלא תיחשף, אחרת יוכלו לפרוץ לאתר שלכם!
  • שם האתר. לדוגמא, אם תזינו abc, כתובת הכניסה לאתר תהיה abc.000webhostapp.com אך אם היא תפוסה, במקום ה abc תיבחר עבורכם מילה אקראית, שזה קצת מעצבן… בהמשך נלמד כיצד לרכוש דומיין, כלומר כתובת גלישה לאתר שלנו שאותה כן נוכל לבחור, אך שרות זה כבר כרוך בתשלום.

לאחר מכן לחצו על הכפתור האדום "השיגו אחסון חינם".

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

אחרי שתעברו את האימות בהצלחה, אם פרסומת זו שמציעה לשדרג את תכנית האחסון תופיע בפניכם, לדחיית ההצעה, לחצו על הכפתור הלבן "It's ok, I want to learn". אם תרצו, תמיד תוכלו לשדרג בתשלום את תכנית האחסון בשרת הזה או בכל שרת אחר שתחפצו לאחסן בו את אתרכם. בשלב הלמידה הנוכחי אין צורך בשדרוג.

כמו כן, בתיבת המייל שלכם אתם אמורים לקבל את המכתב הבא כדי לאמת את המייל שהזנתם. לחצו על הכפתור האדום "Verify email".

אם האימות הצליח, תופיע ההודעה הבאה:

אם אתם במחשב ציבורי, תוכלו להתנתק מהחשבון ע"י לחיצה על צלמית המשתמש ובחירה באפשרות האחרונה "Sign out".

בכל עת תוכלו להתחבר מחדש לחשבון שלכם, עם המייל והסיסמה שבחרתם, באמצעות לחיצה על "התחבר" שבצד השמאלי של סרגל הכלים האדום העליון:

לחיצה על "Settings" בצד הימני של סרגל הכלים האדום העליון ואז על "General" בראש הרשימה שנפתחה, תציג לכם את כתובת האתר שלכם (שבתחילתה מופיע השם שבחרתם, או שהשרת בחר במידה והשם שבחרתם היה תפוס), וכן נתונים נוספים על האתר.

נלחץ על הכתובת ונקבל בכרטיסיה חדשה את האתר שלנו שיראה כך:

ההודעה מתריעה על כך שלא יצרנו דף פתיחה. נחזור לסרגל הכלים האפור ונבחר ב "File manager".

נגלול למטה ונלחץ על הכפתור האדום "Upload files now".

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

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

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

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

ניצור את התיקיה והקובץ הראשונים שלנו וניתן להם את השמות הבאים:

  • קליק שמאלי על תיקיה מבצע בחירה שלה. לאחר הבחירה ניתן לבצע על התיקיה את הפעולות שבסרגל הכלים האדום העליון.
  • קליק ימני על תיקיה מבצע גם בחירה שלה וגם מציג את רשימת הפעולות.
  • דבל קליק שמאלי על תיקיה פותח אותה ומציג את התוכן שבה. ניתן לבצע פעולה זו גם באמצעות קליק שמאלי על התיקיה בתפריט הניווט שמשמאל.
  • קליק שמאלי על קובץ מבצע בחירה שלו. לאחר הבחירה ניתן לבצע על הקובץ את הפעולות שבסרגל הכלים האדום העליון (אותן הפעולות כמו בתיקיה, בנוסף אפשרות לערוך את הקובץ וכן להוריד אותו למחשב שלנו).
  • קליק ימני על קובץ מבצע גם בחירה שלו וגם מציג את רשימת הפעולות.
  • דבל קליק שמאלי על קובץ פותח את הקובץ בעורך הטקסט במקום שנאלץ לבצע זאת בשתי פעולות נפרדות.
  • בחירה של מספר תיקיות או קבצים אפשרית ע"י לחיצה על מקש ה Ctrl לאחר הבחירה הראשונה, והחזקתו עד לאחר הבחירה האחרונה.
  • בחירה של מספר תיקיות או קבצים המופיעים בתפריט בסמיכות אפשרית ע"י לחיצה על מקש ה Shift לאחר הבחירה הראשונה, והחזקתו עד לאחר הבחירה האחרונה.

נערוך את הקובץ הראשון שלנו (הכי פשוט ללחוץ עליו דבל קליק שמאלי). נוסיף את הטקסט הבא ונלחץ על "SAVE".

כעת נחזור לאתר שלנו ונרענן את הדף.

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

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

הבעיה היא שלא הגדרנו את הקובץ בקידוד בפורמט המכיר את שפת העברית.

HTML

כדי לפתור את הבעיה, נחזור לערוך את הקובץ שלנו ונכתוב בו את השלד הבסיסי הבא המגדיר אותו כ HTML:

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

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

או לדוגמא, התג הבא, המורה לדפדפן לעבור שורה:

HTML5 לא מחייב לסגור אותו, אך כדי לעמוד בתקנים מחמירים או כדי שהקובץ ניתן יהיה לסריקה ע"י XML מומלץ להוסיף לו תו סוגר:

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

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


מציינת כי הדף מכיל תוכן בגרסת HTML5 (כאמור, אפשרי שהדף יכיל בנוסף גם תוכן בשפות נוספות). לתג זו אין תג סוגר.


כתיבת תגובה


www.000webhost.com