חדשות מזווית אחרת

בניית אתרים

הקדמה

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

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

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

מספר אתרים שמומלץ להכיר:

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

מושגי יסוד

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

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

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

בשפת תכנות עילית חשוב שנקפיד על מוסכמות קידוד (coding conventions):

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

באתר אינטרנט ישנה חשיבות נוספת להקפדה:

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

דוגמאות למוסכמות קידוד:

  • הערות והסברים.
  • רווח לפני ואחרי אופרטור. דוגמאות לאופרטורים: +, -, *, /, =.
  • שמירה על היררכיה באמצעות הזחה. כל קוד ששייך לבלוק ידחף פנימה ב TAB או בכמות קבועה של רווחים, כנ"ל לגבי כל קוד ששייך לתת בלוק. דוגמאות לבלוקים: תגית, מחלקה, פונקציה, לולאה וכו'.
  • שמות בעלי משמעות למשתנים, לאובייקטים, למחלקות ולפונקציות. תחשבו כמה מבלבלת תהיה תכנית עם משתנים כמו: b, d, p, q. ניתן לקצר בשמות, למשל במקום לכתוב array לכתוב רק arr, במקום index רק i, במקום number רק num וכו'. מכיוון שלא ניתן להגדיר שמות עם רווחים, יש כאלה השמים קו תחתון בין המילים ויש כאלה המתחילים כל מילה חדשה באות גדולה (camel case). יש כאלה המשתמשים באות קטנה או גדולה או קו תחתי בתחילת השם כדי לייצג משתנה מקומי או גלובלי.

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

מתכנת/מפתח – (programmer) האדם שכותב תכנית באמצעות שפת תכנות. את מי שיוצר אתר אינטרנט ניתן לכנות גם "בונה".

קוד מקור/תסריט – (source code/script) תכנית הכתובה בשפת תכנות. על אף הכינוי "קוד", כאמור לעיל (מוסכמות קידוד), תכנית תקינה אמורה להיות דווקא קריאה, מובנת וידידותית למתכנת.

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

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

סביבת פיתוח משולבת – (IDE, ראשי תיבות: Integrated Development Environment) מספקת למתכנת כלים נוחים לכתיבת הקוד, כגון:

  • הדגשת תחביר (syntax highlighting) – דוגמאות: הצגה בצבע/גופן "מילים שמורות" של פקודות השפה, משתנים ועוד.
  • השלמת קוד חכמה (intelligent code completion) – דוגמאות: הצעות אוטומטיות תוך כדי כתיבת קוד, סימון והצעות לתיקון שגיאות, הזחה אוטומטית.
  • קיצורי מקשים (key bindings) – הקלדה על צירופי מקשי מקלדת לשם קבלת קיצורי דרך בכתיבה ובפעולות נוספות במהלך התכנות.
  • מהדר (compiler), מפרש (interpreter) – כאמור לעיל, כלים הממירים ו"מתרגמים" את התכנית לשפת מכונה (machine language) שאותה "מבין" המחשב.
  • מנפה שגיאות (debugger) – כלי לאיתור שגיאות בקוד המתרחשות ב"זמן ריצה" של תכנית.

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

שרת – (server) מחשב/תכנה הנותנ/ת שירותים.

לקוח – (client) מחשב/תכנה המקבל/ת שירותים.

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

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

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

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

צד שרת (server side/back end) – הצד בו מאוחסנים האתר ובסיס הנתונים, האתר רץ ומבצע חישובים מאחורי הקלעים שמוסתרים מהלקוח.

צד לקוח (client side/front end) – הצד שהגולש שנכנס לאתר רואה, כלומר המידע שמגיע למחשב שלו.

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

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

מערכות הפעלה נפוצות הן בצד שרת והן בצד לקוח:

  • Linux
  • Windows

שפות תכנות נפוצות בצד לקוח, המשלימות זו את זו:

  • HTML – משמשת ליצירת תוכן.
  • CSS – משמשת ליצירת עיצוב.
  • JavaScript – משמשת ליצירת תהליכים (למשל תגובה בעקבות כפתור שנלחץ).

דוגמאות לספריות קוד פתוח נפוצות:

  • jQuery – ספריית JavaScript שמטרתה להקל ולקצר כתיבת סקריפטים.
  • Bootstrap – החלה כספריה סגורה שנוצרה לשימוש פנימי בחברת Twitter, שהחליטה לשחרר אותה לציבור הרחב. מכילה אלמנטים ועיצובים מוכנים לבניית אתר.
  • React – ספריית JavaScript שפותחה על ידי Meta – Facebook ומטרתה לבנות ממשקי משתמש מבוססי קומפוננטות (יכולת ליצור פעם אחת רכיב המופיע פעמים רבות).

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

  • php – שפה הכתובה בקוד פתוח, והמון פרויקטים של קוד פתוח כתובים בה, ביניהם מערכות ניהול התוכן: Drupal ,Joomla ,WordPress.
  • Node.js – מאפשרת לכתוב JavaScript גם בצד שרת. בשל ההתעסקות הן בצד לקוח והן בצד שרת באותה השפה, היא הולכת ונעשית פופולרית.
  • SQL – שפה לשמירת/לשליפת/לשאילתות על נתונים המאוחסנים בבסיס נתונים במודל טבלאי רלציוני, בעוד NoSQL הם בסיסי נתונים אשר אינם במודל זה, אלא במודלים כמו מפתח-מערך, גרף ועוד.

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

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

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

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

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

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

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

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

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

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

שם תחום/שם מתחם – (domain name) כתובת ייחודית שגלישה אליה מפנה את הדפדפן לאתר המאוחסן האתר על השרת, לדוגמה: tikshoret.net. על אף שמשתמשים רבים מגיעים לאתרים דרך מנועי החיפוש, ישנה משמעות לכתובת קצרה וקליטה, כשמדובר בפרסום וכשרוצים שהמשתמש יזכור את הכתובת. 

סיומת האינטרנט (Internet top-level domains) הנפוצות ביותר לדומיינים הן: com קיצור של commercial שאמורה לשמש גופים מסחריים למטרות רווח, org קיצור של organization שאמורה לשמש ארגונים שאינם למטרות רווח, net קיצור של network שאמורה לשמש את כל השאר, אך בפועל אין הקפדה ברכישת דומיין על מטרת הסיומת. עם השנים נוצרה מצוקת דומיינים קצרים ולכן נתווספו עוד מאות סיומות למטרות שונות ולמטרות כלליות, אך שלוש הסיומות הנ"ל נשארו פופולריות, ולעומתן השימוש בסיומות החדשות די זניח.

בנוסף, לכל ארץ ישנה סיומת משלה. על פי מדיניות איגוד הדומיינים הישראלי, האחראי על הסיומת il., רק גופים ישראליים רשמיים יכולים לקבל אותה ישירות, כמו ממשלת ישראל: www.gov.il וצה"ל www.idf.il. גופים מוניציפליים בישראל יכולים לקבל את תת הסיומת muni.il, כמו: ariel.muni.il וגופים אקדמיים בישראל יכולים לקבל את תת הסיומת ac.il, כמו: ariel.ac.il. יוצאת דופן היא עיריית תל אביב (או אולי מדינת תל אביב?) שקיבלה סיומת ממשלתית במקום מוניציפלית: tel-aviv.gov.il. במקביל לשלוש הסיומות הנפוצות, הציבור הישראלי יכול לרכוש גם תתי סיומות ישראליות: co.il, org.il, net.il.

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

חשוב שהדומיין יהיה קצר וקליט כדי שנוכל לשווק את האתר בקלות. דומיינים קליטים נתפסים מהר ונמכרים בכסף רב. הדומיין היקר בהיסטוריה cars.com נמכר ב 872 מיליון דולר!

HTML

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

שלד HTML

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

ההצהרה DOCTYPE html! אינה נחשבת כחלק מתגיות השפה. היא מגדירה שהקוד בגרסה HTML5 והיא חייבת להופיע בראש הקוד.

התגיות html, head, body אינן חייבות להופיע ב HTML5, אך מומלץ שכן. אם הן מופיעות, אזי הן יופיעו פעם אחת ובסדר הנ"ל (הן יכולות להופיע שוב בתוך frame פנימי שנחשב בעצמו כדף). רוב התגיות שנראה בהמשך יכולות להופיע ללא הגבלת פעמים.

הדף יכול להכיל גם שפות נוספות, ולכן התגיות html מגדירות שבתוכן נמצא קוד ה HTML.

בתוך תגיות ה head יהיו תגיות המכילות את ההגדרות של דף האינטרנט.
בתוך תגיות ה body יהיו תגיות המכילות את התוכן של דף האינטרנט.

כל התגיות נכתבות בתוך סוגריים משולשים.

רוב התגיות מוגדרות באמצעות תגית פותחת ותגית סוגרת זהה עם סלש (לדוגמה html), אך לא כולן (לדוגמה ל DOCTYPE html! אין תגית סוגרת).

היררכיה/הזחה

תגית יכולה להופיע בתוך תגית אחרת, אך לא לחתוך אותה. כלומר נניח כי ישנה תגית aaa ותגית bbb, אזי:

<aaa><bbb></bbb></aaa> חוקי
<aaa><bbb></aaa></bbb> לא חוקי

כדי לשמור על קוד קריא, נקפיד על היררכיה/הזחה, כלומר כשתגית מופיעה בתוך תגית אחרת, נדחוף את התגית הפנימית ב Tab אחד (המקש משמאל למקש Q). התגיות head, body מופיעות בתוך התגיות html ולכן הן דחופות Tab אחד פנימה. התגיות שיהיו בתוכן ידחפו TAB נוסף פנימה וכן הלאה.

הערות

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

פסקה

מוגדרת בתוך התגיות p.

Entities

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

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

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

את חלקם ניתן להציג גם באמצעות מילים שמורות ולחלקם אפילו יותר ממילה שמורה אחת.

נכניס בין תגיות ה head תגית המגדירה לדפדפן שהקידוד שעליו להשתמש כדי לזהות את התווים הינו UTF-8.

דוגמה למגוון צורות שונות להצגת אותו הסימן:

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

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

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

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

מעבר שורה

מוגדר באמצעות התגית br.

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

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

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

בין שלל הסימנים קיימים גם אמוג'ים צבעוניים (שימו לב שהם נחשבים לכל דבר כתווים ולא כתמונות), לדוגמה:

רשימת התווים המלאה: http://unicode-table.com

רשימת האימוג'ים המלאה: http://unicode.org/emoji/charts/full-emoji-list.html

רשימת המילים השמורות המלאה: http://dev.w3.org/html5/html-author/charref

עיצוב טקסט

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

כותרת

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

טקסט מודגש

התגית b היא קיצור של bold (מודגש) ומיועדת לעיצוב ולכן עדיף לא להשתמש בה אלא בתגית strong (חזק) המיועדת להנגשת האתר.

טקסט נטוי

התגית i היא קיצור של italic (נטוי) ומיועדת לעיצוב ולכן עדיף לא להשתמש בה אלא בתגית em שהיא קיצור של emphasized (מודגש) ומיועדת להנגשת האתר.

התגית var קיצור של variable (משתנה).

טקסט עילי

התגית sup היא קיצור של superscript (עליון).

טקסט תחתי

התגית sub היא קיצור של subscript (תחתי).

טקסט עם קו עילי

באמצעות CSS:

טקסט עם קו תחתי

התגית u היא קיצור של underline (קו תחתי).

התגית ins היא קיצור של insert (הכנסה).

באמצעות CSS:

טקסט עם קו אמצעי

התגית s והתגית strike הן קיצור של strikethrough (חוצה דרך).

התגית del היא קיצור של delete (מחיקה).

באמצעות CSS:

ניתן להגדיר באמצעות CSS את צבע הקווים (עילי, תחתי ואמצעי)

ניתן להגדיר באמצעות CSS את סגנון הקווים (עילי, תחתי ואמצעי)

מקווקו:

מנוקד:

כפול:

מוצק:

גלי:

טקסט מוקטן

טקסט ממורקר

באמצעות CSS:

אפשרויות נוספות

התגית font מאפשרת להגדיר את הפונט, הגודל והצבע.

תגית זו הוצאה מגרסת HTML5.

עיצוב באמצעות CSS

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

אפשרות שניה – הגדרה בתוך תגית ה head בתוך תגית style, דוגמה:

אפשרות שלישית (המומלצת) – הגדרה בקובץ חיצוני בעל סיומת css, דוגמה:

כתיבה חד פעמית של תוכן/עיצוב, החוזר על עצמו פעמים רבות

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

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

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

את התוכן הייחודי לכל דף נגדיר ב HTML, את העיצוב החוזר נגדיר ב CSS (כפי שראינו בשיטה השלישית), את התוכן החוזר נגדיר ב JavaScript (באתר דינמי ישנן אפשרויות נוספות):

דוגמאות שימושיות ל CSS

כפתורים

טשטוש קצוות תמונה

טיוטות

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

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

 

נשים ❤

חלק מהתגים מופיעים בתוך תגים אחרים. התגים head ו- body מופיעים בתוך html. התג title מופיע בתוך head וכו'. גם בתגים הבאים שנלמד נוכל ליישם עיקרון זה ולשים תג בתוך תג לפי הצורך. לדוגמה, נוכל ליצור תג המציג קישור שהקלקה עליו מפנה למקום אחר וכן נוכל ליצור תג המציג תמונה. נוכל לשלב תג המציג תמונה בתוך תג המציג קישור ואז התמונה תהיה קישור, כלומר הקלקה עליה תפנה למקום אחר.

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

כתיבת תגובה