יום הקוד הישראלי
מה נעשה היום ?
נלמד מהו האינטרנט, ומהו בכלל "קוד"?
נציץ אל מאחורי הקלעים של האתרים האהובים עלינו.
נכתוב יחד קוד ונבנה את האתר הראשון שלנו!
האינטרנט
האינטרנט הינו סביבה וירטואלית שאנו מבלים בה לא מעט.
אתם מצליחים לזהות את כל האתרים בתמונות?
איך בנוי אתר?
האתרים שכולנו מכירים בנויים בעזרת שפת קוד בשם
HTML
איך בנוי אתר?
ככה זה נראה מאחורי הקלעים:
בואו נבנה אתר!
על מנת לבנות אתר נזדקק לתוכנות הבאות
דפדפן
– התוכנה איתה אנחנו גולשים באתרים (לא משנה איזה סוג דפדפן)
כתבן
כתבן תוכנת עריכת טקסט שיש בכל מחשב
האתר הראשון שלי
<!DOCTYPE html>
<html>
<body>
<h1>כותרת גדולה</h1>
<p>שלום</p>
</body>
</html>
האתר הראשון שלי
- פתחו את תוכנת "כתבן" (Notepad)
- העתיקו את הקוד שבשקף הקודם
- שמרו את הקובץ בשם First.html
- סגרו את תכונת "כתבן"
- הקליקו פעמיים על הקובץ First.html
האתר הראשון שלכם מופיע בדפדפן!
בואו נוסיף את השם שלנו!
<!DOCTYPE html>
<html>
<body>
<h1>שלום לכולם</h1>
<p>____ קוראים לי</p>
</body>
</html>
קוראים לי _____
- קליק ימני על קובץ First.htm
- בחר ב-"פתח באמצעות", או באנגלית Open With" --> ובחרו ב"כתבן" , Notepad
- שנו את <H1> ואת <P> בהתאם לדוגמה (עם השם שלכם)
- שמרו את הקובץ
- הקליקו פעמיים על הקובץ First.html
השם שלכם מופיע בדפדפן!
בואו נוסיף תמונות
<!DOCTYPE html>
<html>
<body>
<h1>שלום לכולם</h1>
<p>____ קוראים לי</p>
<img src="http://isoc.org.il/images/bird.jpg">
</body>
</html>
בואו נוסיף תמונות
- קליק ימני על קובץ First.htm
- בחר ב-"פתח באמצעות", או באנגלית Open With" --> ובחרו ב"כתבן" , Notepad
-
הוסיפו את שורת הקוד:
<'img src='http://isoc.org.il/images/bird.jpg>
- שמרו את הקובץ
- הקליקו פעמיים על הקובץ First.html
עכשיו יש גם תמונה באתר שלכם!
סיכום
למדנו שאתרים באינטרנט בנויים בקוד HTML
יצרנו את האתר הראשון שלנו!
שמנו באתר שלנו כותרת, את השם שלנו וגם תמונה.
ראינו שכל אחד מאיתנו יכול ללמוד ולפתח אתר משלו.
אפשר גם להמשיך ללמוד בבית!
מקווים מאד שנהנתם ליצור את האתר הראשון שלכם במסגרת יום הקוד הישראלי הראשון.
באתר שהכנו במיוחד בשבילכם:
אתם מוזמנים להמשיך ללמוד גם בבית
תודה רבה
←
→
