מדריך | המדריך למתכנת המתחיל | javascript | פרק א' - יסודות ה-HTML

ישיביש

שלום לכולם

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

הקדמה ראשונה

בעצם השפה שלנו מתחילה בקובץ HTML. אני מניח שנתקלתם הרבה בקובץ הזה שפירושו באנגלית: "HyperText Mark-up Language" שבעברית מילולית מיתרגם ל-"שפת סימון להיפר טקסט" שזה בעצם שפת סימון שאומרת לדפדפן האינטרנט שלכם מה להציג ואיך להציג וזה בעצם ה'שלד' של התוכנה שלנו.
לצידו יש שני קבצים עיקרים:
א. קובץ CSS שמעצב גרפית את הדף שלנו בצבעים ועיצובים שונים.
ב. קובץ JAVASCRIPT ששם מתנהלת העבודה האמיתית מאחורי הקלעים ע"י קוד ושפת תכנות.
השיטת לימוד שלי היא קודם ללמוד בקצרה את הבסיס של שלושת הקבצים האלו כדי לנסות להגיע כמה שיותר מהר לבניית תוכנה ואז להרחיב לאט לאט את המידע והאפשרויות בכדי שיהיה לי ולכם יותר קל ללמוד ולהבין ולראות איך התיאוריה פוגשת את עולם המעשה..

פרק ראשון: הכרת יסודות הHTML.

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

<!DOCTYPE html>

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

<html>

ולאחר מכן נכתוב כך

</html>

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

<head> </head>

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

<body> </body>

עד עכשיו המסמך שלנו אמור להיראות ככה:

<!DOCTYPE html>
<html>
<head> </head>
<body> </body>
</html>

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

<p>hello world!</p>

לסיכום הקוד שלנו אמור להיראות כך

<!DOCTYPE html>
<html>
<head> </head>
<body> 
<p>hello world!</p>
</body>
</html>

עכשיו שמרו את הקובץ (ctrl + s) ופתחו אותו בעזרת הדפדפן. אם הכל ילך כשורה הדף צריך להיראות כך:

בהצלחה!!!

לתגובות, הצעות לשיפור, הערות ו/או הארות נא להגיב כאן
אשמח לשמוע את תגובותיכם!!!
חלק שני בעז"ה יעלה לפי הביקוש...