HTML שפת Hyper Text Markup Language הדסה טלי
שפת HTML מגדירה את מבנה ותוכן הדפים באינטרנט. ניתן לראות את קוד ה- HTML של דף באינטרנט, על ידי לחיצה על הכפתור הימני של העכבר ובחירה באפשרות: ( View Source הצג מקור)
התחל > תוכניות > עזרים NotePad פנקס רשומות כדי לבנות אתרים, לערוך קבציHTML ולהציגם בדפדפן עלינו להשתמש בסביבת עבודה. אנו נשתמש בעורך הטקסטNotePad - , פנקס רשומות, אשר מגיע ביחד עם מערכתWindows: התחל > תוכניות > עזרים או קליק ימני על העכבר > חדש > מסמך טקסט. לאחר פתיחת הnotepad נלחץ במקלדת על המקשים ctrl+shift כדי לישר את הטקסט לשמאל
מבנה בסיסי של דף HTML <html> <head> פתיחת כותרת הדף <head> פתיחה וסגירה של כתב </title>כותרת הדף<<title סגירת כותרת הדף </head> פתיחת גוף העמוד <body> טקסט כתיבה ברוכים הבאים לאתר שלי סגירת גוף העמוד </body> סגירת HTML </html> הערות: התוכן שנמצא בתוך התגיות <body>ו - </body> הוא למעשה התוכן המרכזי של עמוד ה – HTML . תוכן זה יוצג לאחר מכן בדפדפן. כל התגיות בשפת HTML צריכות להיסגר, ללא יוצא מן הכלל! עם זאת, ישנן תגיות אשר לא מכילות תוכן ולכן הסגירה מתבצעת בצורה עצמאית. למשל, התגית <br> אשר אחראית על שבירת שורה.
אופן השמירה בפנקס הרשומות - notepad קובץ V שמירה בשם שם הקובץ (למשל: mynamepage.html) שמור כסוג : all files קידוד : utf - 8 הערה: יש לשמור אחרי כל שינוי.
צפייה בדף האינטרנט על מנת לפתוח עמודיHTML , אין צורך להיות מחובר לאינטרנט או להעלות את הקבצים לשרת כלשהו. לאחר השמירה פתח את הדפדפן שלך > קובץ > פתח > עיון (תיקיית ה-html ובחירת דף האינטרנט) דרך נוספת לפתוח עמודיHTML היא פשוט ללחוץ על הקובץ לחיצה כפולה, בצורה זו הקובץ יפתח בדפדפן המוגדר כדפדפן ברירת מחדל.
css: Cascading Style Sheets גיליונות סגנון מדורגים
הוספת תמונת רקע לעמוד וכותרת <html> <head> <title> כותרת הדף </title> </head> <body style=”background-image:url(‘name.jpg’)”> <h1 style=”text-align:center”> ברוכים הבאים</h1> </body> </html>
תוספת להגדרת תמונת הרקע כדי שתופיע רק פעם אחת ותוצג על כל העמוד תוספת להגדרת תמונת הרקע כדי שתופיע רק פעם אחת ותוצג על כל העמוד <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>
פיסקה חדשה והגדרות צבע, כיוון וגודל הפונט פיסקה חדשה והגדרות צבע, כיוון וגודל הפונט <body> <p style=”color:blue;text-align:left;font-size:18px”> כאן נרשום את הפיסקה לעבור לשורה הבאה ונשתמש בתגית כדי </p> </body> </html> <br>
הוספת תמונה לעמוד (לא כרקע) <body> <center><image src=”name.jpg” width=”150” height=”150”<center> </body> </html>
הוספת טבלה <table> פתיחת טבלה <tr> פתיחת שורה > td> יום ראשון </td> פתיחה וסגירה של תא <td> יום שני</td> <td> שלישי </td> <td> יום רביעי </td> </tr> סגירת שורה <tr> <td> היסטורי <td> <td> תנ”ך <td> </tr> </table> סגירת טבלה
הגדלת כתב בשורה <table> <tr style=”font-size:+24px”> <td> יום ראשון </td> <td> יום שני</td> <td> שלישי </td> <td> יום רביעי </td> </tr> סגירת שורה <tr> <td> היסטורי </td> <td> תנ”ך </td> </tr> </table> סגירת טבלה
מיקום הטבלה למרכז <table border=”10” align=”center”> <tr style=”font-size:+24px”> <td> יום ראשון </td> <td> יום שני</td> <td> שלישי </td> <td> יום רביעי </td> </tr> סגירת שורה <tr> <td> היסטוריה </td> <td> תנ”ך </td> </tr> </table> סגירת טבלה ה-border הוא פקודה להגדרת מסגרת הטבלה. ללא ה-border לא תהיה תופיע מסגרת לטבלה.
הוספת קישור מכיתוב לאתר אינטרנט הוספת קישור מכיתוב לאתר אינטרנט <a href="http://www1.amalnet.k12.il/ amalna/alon/">קישור לאתר חטיבת ביניים אלון נהריה </a>
הוספת קישור מתמונה לאתר אינטרנט <a href="http://www1.amalnet.k12.il/ amalna/alon"> <image src="pic1.jpg" /></a>
הגדלת תמונה <a href="pic1.jpg"> <image src="pic1.jpg" /></a> <a href="pic1.jpg"> <image src="pic1.jpg"width="150" height="150" /></a>
הוספת קישור ל – email מכיתוב או מתמונה <a href="mailto:name@email.com"> <image src="pic1.jpg" /></a> <a href="mailto:name@email.com"> לחץ כאן לשליחת מייל </a>
הוספת קישור לעמוד פנימי לדף html אחר < a href="page2.html"> <image src="pic1.jpg" /></a> <a href="page2.html"> לחץ כאן לעמוד 2</a>
עבודה להגשה לאחרי חופשת החנוכה במשימה זו עליכם לשלב את הידע שרכשתם עד כה, בבניית אתר מבוסס HTML הכולל מספר דפים מקושרים ביניהם. בחרו נושא. (נושאים לדוגמה: מרפאה, חנות דיסקים, חברת כח אדם, חנות משקאות, משרד נסיעות, משתלה ,ספרית וידאו, מסעדה, חנות ירקות, נגרייה, השכרת רכב, משרד תיווך, בית מרקחת, קורסים למקצועות מחשב. רעיונות נוספים יתקבלו באישורי.) בעמוד ה- index , הדף הראשי של האתר, יופיעו 3 קישורים פנימיים (לדפי HTML אחרים) בעמוד page1 יש לספק מידע על העסק, כמה עובדים הוא כולל, למשל, וקישור לדף ה-index בעמוד page2 יש לרשום כותרת מעוצבת יפה, רשימת סניפים , למשל, וקישור לדף ה-index בעמוד page 3 תמונות של העסק וקישור לדף ה-index רצוי להגיש באמצעות כונן google (google drive)