Embed Size (px)
Citation preview
HTMLמבוא ל
איתן קורן
2013פברואר
איתן קורן
2013מרץ
HTML לילדים וילדות
<html></html>
3
?HTMLמה זה
.קבצים כתובים בשפה שדפדפנים יודעים לקרוא
.כדי לתאר דברים על המסך בטאגיםמשתמשים
<html></html> נפתח טאג
ונסגר
4
?בטאגיםאיך משתמשים
:שלא צריך לסגור לטאגדוגמא
<img src=“http://bit.ly/WMzSEW”>
טאג
תכונה
ערך
5
מבנה השפה
יש מבנה קבוע HTMLלדפי
<html>
<head> <meta charset="utf-8">
<title>אתר החתולים שלי</title> </head>
<body>
החמודה תולי
</body>
</html>
ראשי של הדף טאג
מכיל מידע על הדף
זה התוכן של הדף
מופיע בכותרת הדפדפן
כדי לכתוב עברית
6
חשובים טאגים
<h1>משתמשים לכותרות</h1>
<p>כאן כותבים פיסקה של טקסט</p>
<img src=“http://bit.ly/WMzSEW”>
<div align=“center”>כאן כותבים טקסט</div>
<a href=“http://google.com”>זה משמש ללינקים</a>
<b> בולדמדגיש את הטקס ועושה את זה </b>
<br> אנטרעושה שורה חדשה כמו ללחוץ
<meta charset="utf-8">
7
...חשובים טאגיםועוד
<iframe width="420" height="315"
src="http://www.youtube.com/embed/q1dpQKntj_w"
frameborder="0" allowfullscreen></iframe>
8
STYLEבעזרת עיצוב
<body style=“width:600px”>…
<p style=“color:blue”>…
<div style=“background:blue”>…
מידות של אורך , אפשר להוסיף צבעים לטקסט או לרקע STYLEעם
.ורוחב ועוד הרבה תכונות
צבע רקע
צבע גופן
מידת אורך
מה זה
?פיקסלים
1תרגיל
10
מבנה השפה
.שלמדנו הטאגיםלבנות דף עם
:דוגמא
התחביב שלי
.כדורגלהתחביב שלי זה לשחק
.אני משחק עם החברים בית ספר
(ברצלונה)לאתר הקבוצה שאני אוהב
(ריאל)לאתר הקבוצה שאני לא אוהב
H1
IMG אוVIDEO
P + B
A
BODY + width
תשתמשו ! בונוס
בצבעים
עוד הסברים
12
INLINE וBLOCK
<H1>..<H6>
<p>
<div>
INLINEשיכולים לשבת אחד ליד השני טאגים
BLOCK שעושים שורה חדשה טאגים
BLOCK INLINE
<IMG>
<SPAN>
<B>
13
כפתורים
<button onClick=“alert(‘hi’)”>כפתור</button>
window.location.href=‘noam2.html’
?איך מוסיפים כפתורים לדף
14
?מה זה
הטקסט הזה ליד התמונה
הטקסט הזה מתחת לתמונה
האזור הזה צבוע אדום הטקסט ממורכז
<H1> כאן יש טקסט גדול
<SPAN> <IMG>
<P>
<DIV
style=background:red;align:center>
2תרגיל
16
בתרגיל חופשי
.ניתן למצוא תמונות בגוגל .לבנות דף על חייה או על תחביב
חתולים חמודים
באתר שלי אפשר למצוא תמונות של חתולים
.חמודים
כדי לרואות תמונות נוספות אפשר ללחוץ על
.הקישורים הבאים
תחול בשחור
חתול עם מגפים
זה רובוט שעוזר בשיעורי הבית
הרובוט הזה בעצם חוצן
באתר שלי אפשר ללמוד על רובוטים
רובוטים
:דוגמאות
תוסיפו לינק ! בונוס
למחשב של חבר
סיכום
?איך היה המפגש הזה
/ הכנה לעבודה / כלי עבודה
Install -התקנה
19
BlueGriffon
משימה
bluegriffon: למצוא את התוכנה הזאת
bluegriffon.org/pages/Downloadhttp://
download installerללחוץ על
להתקין את התוכנה
להפעיל אותה
20
BlueGriffon
