מדריך: בניית אתרים

www.000webhost.com

נושאי הקורס:


  
  
  

הקדמה

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

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

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

    שני אתרים מומלצים מאוד הם:

  • http://w3schools.com המלמד את השפות הפופולריות לעומקן, בלווי הסברים ודוגמאות המאפשרים ללמוד נקודתית את מה שאנו חפצים בלי צורך ללמוד הכל כדי להבין.
  • http://stackoverflow.com המאפשר לכולם לשאול שאלות או להשיב על שאלות או לדרג שאלות ותשובות בתחום התכנות. לרוב תגלו שהשאלה שרציתם לשאול כבר נשאלה ואף ניתן עליה מענה.

מושגי יסוד

פקודה (command) – הוראה למחשב לבצע פעולה.

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

שפת תכנות עילית – (high-level programming language) משתמשת בניסוח ידידותי הדומה לשפת בני האדם, אך בשל כך, לעיתים לאחר הכתיבה בה, יש צורך להפעיל מהדר (compiler) או מפרש (interpreter) שימיר ו"יתרגם" את התכנה שנכתבה בה לשפת מכונה (machine language) שאותה "מבין" המחשב.

שפת תכנות נמוכה – (low-level programming language) לא צריכה את התרגום הזה, לכן הביצועים שלה טובים יותר, צריכת הזיכרון נמוכה יותר והריצה (running – פעילות התכנה) מהירה יותר, אך היא אינה ידידותית ולכן התכנות בה פחות נפוץ.

מתכנת/מפתח – (programmer) האדם שכותב תכנית באמצעות שפת תכנות.

קוד מקור/סקריפט – (code/script/source) תכנית הכתובה בשפת תכנות. על אף הכינוי הזה, תכנית תקינה אמורה להיות דווקא קריאה, מובנת וידידותית, בעיקר כשמדובר בפרויקט עם מפתחים רבים. לשם כך, ישנן חברות תכנות המגדירות לעובדים אצלן מוסכמות לכתיבת קוד (coding conventions).

קוד סגור – (closed source) תוצר מוגמר של תכנית, שהמשתמש בה אינו יכול לראות כיצד היא כתובה.

קוד פתוח – (open source) תכנית שכתבו אנשים טובים, אשר החליטו לשתף אותה ואת הקוד בו כתובה לכל החפץ. קיימים פרויקטים בקוד פתוח המפותחים בידי קהילות המונות המוני מתנדבים. ישנם כאלה הגורסים שקוד פתוח חשוף בפני האקרים היכולים לקרוא אותו ולחפש את הפרצות שבו. מאידך, ישנם הגורסים שדווקא מפני שהקוד פתוח, חכמת ההמונים נוטה לאתר את הפרצות הללו ולסותמן. הקוד "פתוח" הן לשימוש חופשי והן לשינויו והתאמתו לצרכי המשתמש בו.

סביבת פיתוח משולבת – (IDE, ראשי תיבות: Integrated Development Environment) מספקת למתכנת כלים נוחים לכתיבת הקוד, כגון צביעת "מילים שמורות" לפקודות של השפה, הצעות תוך כדי כתיבת קוד להשלמה ולתיקון אוטומטיים, מהדר, מפרש, מנפה שגיאות (debugger – כלי לאיתור שגיאות בקוד המתרחשות ב"זמן ריצה" של התכנית), וכו'. חלק מסביבות הפיתוח יקרות, חלקן חינמיות לסטודנטים, חלקן חינמיות לקהל הרחב וחלקן אפילו כתובות בעצמן בקוד פתוח.

שרת – (server) הוא מחשב, בדרך כלל "מחשב על" בעל ביצועים חזקים. קיימות אינספור חברות המציעות לבעלי אתרים גישה לשרתי האחסון שלהם (web hosting). כמו כן, קיימים כלים המאפשרים להפוך את המחשב הביתי שלנו לשרת, אך אפשרות זו טובה בעיקר לצורכי פיתוח וגיבוי האתר, שכן אם נהפוך את המחשב שלנו לשרת ציבורי, כשהוא יהיה כבוי, האתר שלנו לא יהיה זמין לציבור הרחב. כמו כן, אם נפתח את הגישה לציבור הרחב, סביר להניח שהוא יקרוס די מהר, מאחר שמחשב ביתי אינו מסוגל להתמודד עם כמות כה רבה של משתמשים בו זמנית. כמו כן, נחשף לסיכון של פריצות בידי האקרים, ששרתים בתשלום כוללים יותר אמצעי הגנה מפניהם.

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

אתר סטטי – אתר שרק מי שמתכנת אותו יכול לעדכן אותו. לרוב הוא אינו אמור להתעדכן לאחר בנייתו.

אתר דינמי – אתר שגם מי שמשתמש בו יכול לעדכן אותו, מבלי צורך לדעת לתכנת אותו. לדוגמה מידע שמכניס עורך התוכן לתוכו על מנת לפרסם בו, או מידע שמכניס הגולש לתוכו, כגון שם משתמש וסיסמא, פרטים אישיים, מילוי טופס, פידבק, טוקבק וכו'. המידע מוכנס למשל ע"י מילוי התוכן בחלון טקסט ושימוש בתפריטים ובכפתורים שונים המאפשרים לעצבו, לצרף אליו קבצים כמו תמונות, וידאו וקול, וכן לקבוע הגדרות נוספות. ישנם אתרים המאפשרים להזין את התוכן כמו במעבד תמלילים דוגמת Word בשיטת WYSIWYG (ראשי תיבות: What You See Is What You Get), אם כי כאשר נעשה שימוש בשיטה זו, מומלץ להגביל אותה כך שעדיין תשמר אחידות כלשהי בעיצוב הדפים השונים של האתר, כדי שיובן שכל הדפים שייכים לאותו האתר.

מערכת ניהול תוכן – (CMS, ראשי תיבות: Content Management System) מערכת המיועדת לניהול אתר דינמי. ישנן מערכות ניהול תוכן כלליות, ישנן מערכות ניהול תוכן המיועדות לבלוגים, ישנן מערכות ניהול תוכן המיועדות לאתרי חדשות, ישנן מערכות ניהול תוכן המיועדות לחנויות וירטואליות, ועוד.

ישנן מערכות ניהול תוכן חינמיות נפוצות, כגון Google Sites, Microsoft SharePoint וכן Wix הישראלית, שאינן מצריכות התעסקות עם שרת, אך גם אינן מאפשרות לבצע בהן שינויים, להוריד את כל התוכן שלהן למחשב, או לנייד אותן לשרתים אחרים, משום שהן קוד סגור המותקן על שרתי החברות שייצרו אותן.

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

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

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

בסיס/מסד נתונים – (DB, ראשי תיבות: Database) נמצא בצד שרת ומשמש לאחסון הנתונים שאינם חלק מהקוד עצמו, כגון הנתונים וההגדרות שעורך התוכן או הגולש הזינו. מאגר המשתמשים המורשים וכו'. בסיסי נתונים נפוצים: Microsoft Access, Microsoft SQL וכן MySQL.

מערכת הפעלה בצד שרת – לדוגמא הנפוצות: Linux, Windows.

שפות תכנות בצד לקוח – דוגמאות:

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

    CSS – משמשת מיועד להגדרות העיצוב של אתרי אינטרנט, החל מדברים פשוטים כמו צבע, וכלה בדברים מורכבים כמו אנימציות.
    האם אפשר להגדיר עיצוב גם ב HTML?
    כן, אבל לא נעשה זאת:
    1. כדי לשמור על קוד קריא ולא מסורבל.
    2. כדי שלא נצטרך להגדיר/לשנות עיצוב שחוזר על עצמו שוב ושוב אלא רק פעם אחת, ובכך נחסוך גם עבודה קשה וגם נקטין את הסיכוי לטעויות.

    Bootstrap – הינה אחת מאותם קודים פתוחים, המכילה כלים שימושיים ועיצובים רבים מאוד לבניית אתר, ומאפשרת לנו להשיג בקלות תוצאות מרהיבות. היא החלה כספריה סגורה שנוצרה לשימוש פנימי בחברת Twitter שקיבלה החלטה אמיצה כששחררה אותה לציבור הרחב בשנת 2011.

jQuery – ספרית קוד פתוח המקלה על השימוש ב JavaScript, בעזרת פונקציות מובנות וכתיבה מקוצרת.

שפות תכנות בצד שרת – דוגמאות:

  • php – (כוללת כמות עצומה של פרויקטים בקוד פתוח, ביניהם מערכות ניהול התוכן: Drupal, Joomla, WordPress, "סביבות פיתוח" קוד חינמיות, ומסתפקת בשרת שמערכת ההפעלה שלו היא Linux שלרוב זול).
  • ‎.NET – (מאפשר תכנות הרבה יותר קל ומהיר, אך מצריכה סביבת פיתוח קוד בשם Microsoft Visual Studio שהיא חינם לסטודנטים אך יקרה לחברות, וכן דורשת שרת שמערכת ההפעלה שלו היא Windows שלרוב יקר).
  • SQL – שפה להכנסת נתונים, לשליפת נתונים ולשאילתות על נתונים, המאוחסנים בבסיסי נתונים.

ftp – פרוטוקול המאפשר העברת קבצים בין מחשבים. באמצעותו נוכל להעביר קבצים מהחשב שלנו לשרת ולהפך.

דפדפן – (browser) כלי המאפשר העברת קבצים. ניתן להשתמש בו כ ftp, אך בדרך כלל הוא משמש את הגולש הפשוט כדי לגלוש לאתר, לקבל ממנו ולשלוח אליו נתונים. דפדפנם נפוצים: Google Chrome, Internet Explorer, Microsoft Edge, Mozilla Firefox, Opera, Safari.

שם תחום/שם מתחם – (domain name) כתובת ייחודית מקוצרת שקל לגולש לזכור. גלישה אליה מפנה את הדפדפן לכתובת הארוכה שבה מאוחסן האתר. הסיומות הנפוצות לדומיינים הן: com, net, org. (com קיצור של company ואמורה לשמש חברות, org קיצור של organization ואמורה לשמש ארגונים, net אמורה לשמש את כל השאר, אך בפועל אין על כך הקפדה). שלוש הסיומות הללו נשארו הכי נפוצות, על אף שעם השנים התווספו עוד מאות סיומות כלליות. בנוסף, לכל ארץ ישנה סיומת משלה. איגוד הדומיינים הישראלי אחראי על הסיומת il. רק גופים ישראליים רשמיים יכולים לקבל אותה ישירות, כמו ממשלת ישראל: http://gov.il, צה"ל http://www.idf.il וכו'. גופים אקדמיים בישראל יכולים לקבל את תת הסיומת ac.il, כמו: http://ariel.ac.il והציבור הרחב יכול לרכוש רק את תתי הסיומות: co.il, net.il, org.il.

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

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

שימו ❤

במסגרת הקורס נתמקד בפקודות ובאפשרויות הנפוצות ב HTML וב CSS.

מכיוון שכל חברה הגדירה בדפדפן שלה את ההצגה של ה HTML, ה CSS ושאר השפות והתוכן הוויזואלי כפי שנראה לה, טים ברנרס-לי, ממציא רשת האינטרנט, הקים את הארגון הבינלאומי W3C (World Wide Web Consortium) על מנת לקבוע תקנים.

למה חשוב להקפיד על כתיבה מסודרת?

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

בשימוש בקוד פתוח, חשוב להקפיד לציין קרדיטים ליוצרים!

למה חשוב דומיין קצר וקליט? כדי שנוכל לשווק את האתר בקלות. דומיינים קליטים נתפסים מהר ונמכרים בכסף רב. בכמה לדעתכם נמכר הדומיין היקר בהיסטוריה? ובכן, תחזיקו טוב, cars.com נמכר ב… 872 מיליון דולר!!! רכישת דומיין מבוצעת על בסיס שנתי (ניתן לרכוש לכמה שנים מראש). קיימים "ציידי דומיינים", המנסים לתפוס דומיינים שבעליהם שכחו להאריך את תוקפם.

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

שרת אינטרנט

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

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

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

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

מבנה פקודה

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


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

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

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

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

מבנה שלד

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

תוכלו להעתיק את הקוד מפה:


התג head מיועד לספק מידע לדפדפנים ולמנועי חיפוש, כמו: שפה, קידוד, תצוגה ועוד.

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

מספר דוגמאות:


שימו ❤

כל התגים המרכיבים את השלד (html, head, body) מופיעים בו רק פעם אחת, אך שאר התגים יכולים להופיע בו ללא הגבלה.

קיימים תגי meta נוספים, לדוגמה כאלה המגדירים לרשתות חברתיות ולאפליקציות מסרים מידיים, כיצד להראות את התצוגה המקדימה של דף ה HMTL במידה והקישור אליו ישותף בהם.

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

כותרת

ישנם תגים המספקים מידע הן לדפדפנים והן לדירוג במנועי חיפוש, לדוגמה כותרת הדף בלשונית הדפדפן (title) וכותרות בתוכן. את הכותרת בתוכן ניתן לדרג מ h1 עד h6 (קיצור של headings), כאשר 1 מדורגת ככותרת הכי חשובה ולכן גם תוצג כהכי גדולה, ו 6 מדורגת כהכי פחות חשובה ולכן תוצג כהכי קטנה. הדרוג אינו רק מבחינה חזותית, אלא גם כרמת החשיבות מבחינת מנוע החיפוש, לכן עדיף לשים בכותרות הגדולות טקסט המתאר את תוכן הדף ולהימנע בהן מטקסט מיותר. בכותרות הקטנות ניתן להשתמש כתתי כותרות.

שימו ❤

פיסקה

מוגדרת עם התג p (קיצור של paragraphs).

מעבר שורה

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

רשימה

רשימה ממוספרת מוגדרת באמצעות התג ol (קיצור של ordered list)
רשימה לא ממוספרת מוגדרת באמצעות התג ul (קיצור של unordered list)
פריט של רשימה מוגדרת באמצעות בעזרת התג (קיצור של list item)
סוג המספור או סוג העיצוב כשהרשימה אינה מוספרת מוגדר באמצעות המאפיין type

הקוד הבא:

——————————————————————————————————




כתיבת תגובה