fbpx

01. שלום עולם

מבוא

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

הדפדפן שלנו במחשב הוא תוכנה המסוגלת להבין ולהציג קוד שעשוי משלוש שפות: HTML, CSS ושפת JS (קיצור ל-JavaScript).

בשיעור הזה נכיר את הכלי הבסיסי ביותר – HTML

 

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

למעשה HTML היא שפת “תגים” במסגרתה אנו “מתייגים” מידע שנדרש להציג. כך שהדפדפן יציג את המידע בהתאם ל”תגים” שתייגנו אותו.

לסקרנים מביניכם, ראשי התיבות של HTML הן: Hyper Text Markup Language. 

 

מויקיפדיה:

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


והכי קל ללמוד ברגליים… בואו נעקוב אחר ההוראות הבאות:

  1. פתחו תיקייה חדשה במחשב, (איפה שתרצו) וצרו בה קובץ כתיבה חדש. כתבן פשוט, (סיומת txt, לא קובץ Word).
  2. כשם הקובץ תבחרו באיזה שם שבא לכם…
  3. כעת, תכתבו בקובץ את המילים “Hello World”.
  4. תשמרו את הקובץ.
  5. ע”י קליק ימני על הקובץ >> מאפיינים, תמצאו את המיקום המלא של הקובץ:

כך שאם שם הקובץ הוא Example, והוא יושב תחת המיקום: D:/Desktop, אז המיקום המלא (ה-Path) של הקובץ הוא D:\Desktop\Example.txt

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

מה שיוצג לכם בדף זה מה שכתבתם בתוך הקובץ: Hello World

שלחנו “טקסט” לדפדפן על ידי קובץ. 

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

 

כעת בתוך הקובץ במקום לכתוב סתם טקסט, אנו נכתוב בו קוד HTML.

קודם כל, נסגור את הקובץ ונשנה את הסיומת שלו ל-.html, לדוגמה: MyFile.html

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

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

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

				
					<!doctype html>
				
			

בזאת אנו “מספרים” לדפדפן (או לכל מי שרוצה לדעת) שתוכן הקובץ להלן הוא מסוג HTML.


מבנה קובץ HTML

בשפת HTML ישנה “היררכיה” בה המידע מוצג.

ההיררכיה בנויה על ידי מעטפת ראשית בשם html שבתוכה ישנה חלוקה לשני חלקים:

  • “הגדרות” (head) – כאן אפשר להגדיר כל מיני דברים כלליים (metadata).
  • תוכן (body) – כל תוכן הדף. למשל תמונות, טקסטים קישורים טבלאות וכן הלאה…

ה”חלוקה” הזו נעשית על ידי שימוש בתגים. 

מה זה תג? תג היא מילה תחת סוגריים משולשות, למשל: <Tag>

התג נפתח בצורה כזו, ונסגר על ידי הוספת ” / “ לתג. למשל: <Tag/>

 

נחדד: תוכן שיושב בתוך HTML צריך לשבת תחת מסגרת כלשהי. 

המסגרת נקראת גם “תגית”.

הקובץ כולו צריך לשבת תחת מסגרת/תג בשם html, והתכנים שבתוכו יכולים לשבת בתוך תתי תגיות.

 

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

אז אם נכין קובץ HTML ריק, אבל עם ההיררכיה שציינו, הוא ייראה כך:

				
					<!doctype html>
<html>
	<head>					
	</head>
	
	<body>
	</body>
</html>

				
			

האיור הבא אולי יעזור לכם לקשר בין ההיררכיה לבין התגיות:

שלא כמו בשפות תכנות מסוימות, ההזחה איננה חשובה ב-HTML, אם כי נהוג לעשות אותה בשביל הנוחות של הכתיבה/קריאה. (זה גם אומר במילים אחרות שאין משמעות לרווחים).

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

אז בואו נתחיל בלשחק קצת עם התוכן.

 

עורך קוד

אני ממליץ בחום להשתמש בתוכנת העורך VSCode עם ההרחבה Live Preview שמאפשרת לראות ב-live את השפעת השינויים שאנו עושים בקבצי ה-html.

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

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

תוכלו גם לנסות להשתמש באתר הבא לכתיבת קוד HTML.

 

תגיות בסיסיות ב-HTML

נתחיל עם ההגדרות.

תחת התגית head, נוסיף תגית חדשה בשם title, ובין התגית הפותחת והסוגרת, נכתוב מילה כלשהי, למשל “כותרת”.

כך:

				
					<title> כותרת </title>
				
			

אפשר לפצל את הפעולה לכמה שורות באופן הבא:

				
					<title> 
    כותרת		
</title>

				
			

ולסיכום, הקובץ כולו ייראה כך:

				
					<!doctype html>
<html>
<head>				
	<title> 
		כותרת 
	</title>
</head>	
<body>

</body>
</html>

				
			

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

נכון מגניב?

נמשיך.

עכשיו נרצה להכניס תוכן לתוך הדף עצמו.

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

נריץ שוב, ונראה את התוכן על הדף:

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

למשל, השפה מספקת תגיות ל-6 רמות טקסט בסיסיות שונות שמתאימות לשמש ככותרת של תוכן בתוך דף האינטרנט. 

h1 – h6

שזה אומר שכל טקסט שאכתוב תחת תיוג h כלשהו (מ-1 עד 6) יופיע בצורה אחרת.

ככל שהטקסט יותר “כותרתי”, ה-h שלו יהיה נמוך יותר.

אם אני רוצה להציג סיפור בדף HTML, אני אוכל את כותרת הסיפור לכתוב תחת תיוג h1, ואת התוכן של הסיפור תחת h2.

נגיד שכותרת הסיפור היא:

My Story

ותוכן הסיפור:

One day I was walking on the street and I saw a small cat sniffing around.

מה שנעשה הוא שאת הכותרת נעטוף ב-h1, ואת התוכן ב-h2.

תגית ה-body בקובץ תיראה כך:

				
					<body>
	<h1> My Story </h1>
	<h2> 
		One day I was walking on the street and I saw a small cat sniffing around.
	</h2>
</body>
				
			

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

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

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

או ליצור פעמיים את התגית h2, בכל פעם עם שורה אחרת. HTML אוטומטית תסדר כל תגית כשורה בפני עצמה. הסיבה היא מכיוון שתגית מסוג h, מוגדרת כ-block, שזה אומר שהמרחב שהיא תופסת כברירת מחדל זו שורה חדשה ושלמה.

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

				
					<body>
	<h1> My Story </h1>
	<h2> 
	    One day I was walking on the street </br> and I saw a small cat sniffing around.
	</h2>
</body>

				
			

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

וכמובן אם גם סתם נרצה להוסיף שורה ריקה איפשהו בדף, נוכל לכתוב <br> 

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

כך:

				
					<p> טקסט שהוא לא כותרת </p>
				
			

ולפני שנתרגל את המעט שלמדנו, רק אציין שכאשר נרצה לכתוב הערות בקוד שלנו (Comments) נצטרך לעטוף אותן בתחביר הבא:

				
					<!-- This is a comment -->
				
			

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

 

תרגיל:

צור קובץ HTML, בצורה כזו שכותרת הכרטיסייה בדפדפן תציג את המילה: “Test”.

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

לאחר מכן, הצג בדפדפן את הקובץ.

 

פתרון:

נפתח קובץ עם סיומת html במחשב, נפתח אותו באמצעות כתבן פשוט, ונכתוב בו:

				
					<!doctype html>
<html>
<head>				
	<title> 
		Test
	</title>
</head>	
<body>
	<h6>Sentence1</h6>
	<h5>Sentence2</h5>
	<h4>Sentence3</h4>
	<h3>Sentence4</h3>
	<h2>Sentence5</h2>
	<h1>Sentence6</h1>
</body>
</html>

				
			

לאחר מכן נפתח את הקובץ דרך הדפדפן, ונראה:

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

 

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

האיור הבא מציג בצורת עץ את המבנה הכללי של דף html. (תרשים DOM – data object model)

(מקור: w3schools.com)

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

כניסה

שכחתי סיסמה

אין לך חשבון? להצטרפות

איפוס סיסמה:

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

שינוי סיסמה

עריכת פרטים אישיים