1 / 20

הדסה טלי

HTML שפת Hyper Text Markup Language. הדסה טלי. שפת HTML. מגדירה את מבנה ותוכן הדפים באינטרנט . ניתן לראות את קוד ה- HTML   של דף באינטרנט, על ידי לחיצה על הכפתור הימני של העכבר ובחירה באפשרות: ( View Source הצג מקור). NotePad פנקס רשומות.

khuyen
Télécharger la présentation

הדסה טלי

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML שפת Hyper Text Markup Language הדסה טלי

  2. שפתHTML מגדירה את מבנה ותוכן הדפים באינטרנט.ניתן לראות את קוד ה- HTML  של דף באינטרנט, על ידי לחיצה על הכפתור הימני של העכבר ובחירה באפשרות: ( View Source הצג מקור)

  3. NotePadפנקס רשומות • כדי לבנות אתרים, לערוך קבציHTML ולהציגם בדפדפן עלינו להשתמש בסביבת עבודה. • אנו נשתמש בעורך הטקסטNotePad -, פנקס רשומות, אשר מגיע ביחד עם מערכתWindows: התחל > תוכניות > עזרים או קליק ימני על העכבר > חדש > מסמך טקסט. לאחר פתיחת הnotepad נלחץ במקלדת על המקשים ctrl+shift כדי לישר את הטקסט לשמאל

  4. מבנה בסיסי של דף HTML הערות: התוכן שנמצא בתוך התגיות <body>ו - </body> הוא למעשה התוכן המרכזי של עמוד ה – HTML . תוכן זה יוצג לאחר מכן בדפדפן. כל התגיות בשפת HTML צריכות להיסגר, ללא יוצא מן הכלל! עם זאת, ישנן תגיות אשר לא מכילות תוכן ולכן הסגירה מתבצעת בצורה עצמאית. למשל, התגית <br> אשר אחראית על שבירת שורה.

  5. אופן השמירה בפנקס הרשומות - notepad קובץ V שמירה בשם V שם הקובץ (למשל: mynamepage.html) V שמור כסוג : all files V קידוד : utf - 8 הערה: יש לשמור אחרי כל שינוי.

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

  7. css: Cascading Style Sheetsגיליונות סגנון מדורגים CSS מאפשר עיצוב של בניית אתרים בצורה מתקדמת יותר. עובד רק בגוגל כרום!!

  8. הוספת תמונת רקע לעמוד וכותרת <html> <head> <title> כותרת הדף </title> </head> <body style=”background-image:url(‘name.jpg’)”> <h1 style=”text-align:center”> ברוכים הבאים</h1> </body> </html>

  9. תוספת להגדרת תמונת הרקע כדי שתופיע רק פעם אחת ותוצג על כל העמוד <html> <head> <title> כותרת הדף</title> </head> <body style=”background-image:url(‘name.jpg’);background-repeat:no-repeat;background-size:cover”> <h1 style=”text-align:center”> ברוכים הבאים</h1> </body> </html>

  10. פיסקה חדשה והגדרות צבע, כיוון וגודל הפונט <body> <p style=”color:blue;text-align:left;font-size:18px”> כאן נרשום את הפיסקה לעבור לשורה הבאה ונשתמש בתגית כדי </p> </body> </html> <br>

  11. הוספת תמונה לעמוד(לא כרקע) <body> <center><image src=”name.jpg” width=”150” height=”150”<center> </body> </html>

  12. הוספת טבלה <table> פתיחת טבלה <tr> פתיחת שורה >td> יום ראשון</td> פתיחה וסגירה של תא<td> יום שני</td> <td> שלישי</td> <td> יום רביעי</td>  </tr> סגירת שורה <tr><td> היסטורי<td> <td> תנ”ך <td> </tr></table> סגירת טבלה

  13. הגדלת כתב בשורה <table> <trstyle=”font-size:+24px”> <td> יום ראשון</td> <td> יום שני</td> <td> שלישי</td> <td> יום רביעי</td>  </tr> סגירת שורה <tr><td> היסטורי</td> <td> תנ”ך </td>    </tr></table> סגירת טבלה

  14. מיקום הטבלה למרכז <table border=”10” align=”center”> <trstyle=”font-size:+24px”> <td> יום ראשון </td> <td> יום שני</td>   <td> שלישי </td>  <td> יום רביעי </td> </tr> סגירת שורה <tr> <td> היסטוריה </td>  <td> תנ”ך </td> </tr></table> סגירת טבלה ה-border הוא פקודה להגדרת מסגרת הטבלה. ללא ה-border לא תהיה תופיע מסגרת לטבלה.

  15. הוספת קישור מכיתוב לאתר אינטרנט <ahref="http://www1.amalnet.k12.il/amalna/alon/">קישור לאתר חטיבת ביניים אלון נהריה</a>

  16. הוספת קישור מתמונהלאתר אינטרנט <a href="http://www1.amalnet.k12.il/amalna/alon"><image src="pic1.jpg" /></a>

  17. הגדלת תמונה <a href="pic1.jpg"><image src="pic1.jpg" /></a> <a href="pic1.jpg"><image src="pic1.jpg"width="150" height="150" /></a>

  18. הוספת קישור ל – emailמכיתוב או מתמונה <a href="mailto:name@email.com"><image src="pic1.jpg" /></a> <a href="mailto:name@email.com">לחץ כאן לשליחת מייל</a>

  19. הוספת קישור לעמוד פנימילדף html אחר < a href="page2.html"><image src="pic1.jpg" /></a> <a href="page2.html">לחץ כאן לעמוד 2</a>

  20. עבודה להגשה לאחרי חופשת החנוכה • במשימה זו עליכם לשלב את הידע שרכשתם עד כה, בבניית אתר מבוסס HTML הכולל מספר דפים מקושרים ביניהם. • בחרו נושא. (נושאים לדוגמה: מרפאה, חנות דיסקים, חברת כח אדם, חנות משקאות, משרד נסיעות, משתלה ,ספרית וידאו, מסעדה, חנות ירקות, נגרייה, השכרת רכב, משרד תיווך, בית מרקחת, קורסים למקצועות מחשב. רעיונות נוספים יתקבלו באישורי.) • בעמוד ה- index , הדף הראשי של האתר, יופיעו 3 קישורים פנימיים (לדפי HTML אחרים) • בעמוד page1 יש לספק מידע על העסק, כמה עובדים הוא כולל, למשל, וקישור לדף ה-index • בעמוד page2 יש לרשום כותרת מעוצבת יפה, רשימת סניפים , למשל, וקישור לדף ה-index • בעמוד page 3 תמונות של העסק וקישור לדף ה-index • רצוי להגיש באמצעות כונן google(google drive)

More Related