משתמשת:יוני2023/it's mine/HTML

דן פרייפלד מבוא לתכנות Html היא בסיס השפה לבנית אתרי אינטרנט בקורס:

• נכיר את האינטרנט ואיך הוא פועל.
• נראה איך בנוי קובץ html, תגיות הבסיס
• יצירת קבצי תבניות
• התמודדות עם תמונות באתרי אינטרנט
• תגיות קישור, תגיות לינק, כיצד מיצרים אוגדנים
• קישור בין דפי אינטרנט
• הכרות עם שפת ccs
• מבנה היררכי של סגנונות שונים
• טבלאת html
• בנית פרויקט מקיף לבנית אתר

יש קבצי תרגול

תכנות HTML מבוא - 0.2 שימוש בקבצי תרגול הורידו את תקית קבצי התרגלו. ממליץ לבצע העתקה של הקבצים כך שיהיה העתק מקור והעתק עליו עובדים. בתוך התיקיה הקבצים מסודרים לפי מספרי פרקים

תכנות HTML מבוא - 1.1 דפדפנים נפוצים ופופולריים בעולם נלמד על איך האינטרנט עובד, דפדפנים ונכיר את עולם האינטרנט. היום נעסוק בדפדפנים. יש לבצע בדיקה בכל דפדפן מאחר וכל אחד תומך בחלק מהפרמטרים הקשורים לקוד, סטנדטים, תקנים ועוד. כמו גם, אם אנו רוצים להגיע אל קהל רחב.

5 דפדפנים פופלרים:

• אקספלורר - דפדפן של מיקרוספוט קיים במערכת הפעלה של וינדוס למחשבי PC גרסאות 6-9. בגרסות ישנות יש בעיה עם תאימות לדפדנים ביחוד בקודים CSS שקשורים לעיצוב של דפי HTML. בגרסות 9-10 יש תמיכה בCSS 2-3, 5. כך הם התשירו באותו קו עם שאר הדפדפנים הפופלרים ברשת.
• פיירפוקס - דפדפן קוד פתו שמוכר לבוני אתרים. ניתן לבצע פעולות שחוסכות בעבודה כמו עבודה מתקדמת מול קוד HTML וCSS ותוספים שנקראים באנגלית ADD-ONS
• כרום chrome - דפדפן שפותח על ידי חברת גוגל.

השימושי ביותר באינטרנט כי מהיר תגובה ופשוט בשימוש שלו. גם לו יש תוספים ועזרה שמקלים על השימוש

• סאפרי- דפדפן של חברת APPLE במערכת פעלה של מחשב מקינטוש. הוא נוח לשימוש ובעל ממשק נח. בעבר ניתן להשתמש רק במחשב מקינטוש. היום ניתן להתקין בכל מחשב.
• אופרה - דפדפן ותיק והשימושי ברשת. זמין בהמון מערכות הפעלה. מחשב, סלולר, טאבלט וכו.

התקינו את כל הדפדפנים על המחשב. גלשו והתנסו בהם

תכנות HTML מבוא - 1.2 קצת על ההיסטוריה של האינטרנט ושורשי ה- HTML בשיעור זה נלמד על היסטורית האינטרנט ומושגי יסוד בסיסי. אינטרנט – רשת מחשבים גלובלית שמקשרת אלפי מחשבים ואוגרת בתוכה מידע. כיום האינטרנט הוא ביטוי לגלובליזציה על ידי קישור בין אנשים בעולם כמו בפיסבוק בו אנו יכולים להזרים מידע ולקבע סדר עדיפויות של שיחות. האינטרנט קיים נמצא גם בפלטפורמות חדשות כמו סלולר חם, לוח מגע. התפתחות האינטרנט הם בזכות גילוים שקרו לפני המאה ה20 כמו הטלגרף, הרדיו, הטלוויזיה והטלפון.
ההיסטוריה של האינטרנט:

• במהלך המלחמה הקרה בין ארה"ב לרוסיה - בסוף שנות ה50- אר"הב החלה להתעניין בפיתוח רשת תקשורת רב ארצית שהוביל לפיתוח פרויקט הארפנט, פרויקט של משרד ההגנה האמריקאי.מטרת הפרויקט היה ליצור רשת מחשבים גדולה שתאיץ את מהירות העברת המידע ותגדיל את כושר ההשרדות במקרה של לוחמה גרענית בעולם.היא פותחה על ידי מספר חוקרים מאוניברסיטות שונים להעברת נתונים בין רשתות שמשתמשים בהם עד היום
• 1972 - נשלח דואר אלקטרוני ראשון בעולם
• 1974 - אימוץ תקן TCP (trannsmision control protocol) - protocol היא שיטת תקשורת להעברת מידע באינטרנט.
• 1983 - הרשת הראשוני פוצלה ל2 רשתות נפרדות.
  • רשת צבאית milnet – רשת שמקשרת בין אלפי בסיסים ויחידות צבאיות אמריקאיות
  • רשת אזרחית NSFNET – רשת בין אוניברסיטאות שממומנות על ידי הקרן הלאומית למדע בארה"ב
• 1989 - טימברנאוס לי ממעבדות חקר בסרן מערכת האייפרטקסט גלובלית שעמה אנשים חלקו מידע וקשרו מסמכים ברשת בינלאומית של מידע המבוסס על קישורים כך פותחה שפת HTML שכלל תחביר תחביר קוד אחיד בין כל מסמכי הרשת.
• 1991 - פורסם תקן ראשוני לשפת HTML ונוצר הWWW (WOROLD WIDE WEB)
• 1993 - הדפדפן הראשון בעולם בעולם בשם MIASIC שפותח באוניברסיטת אילינוי בארה"ב. בעקבות כך כמות אתרי HTML גדלה באופן מסחרר.
• 1997 - ברשת היו קרוב למיליון אתרים
• 2012 - יש מילארדים של דפי אינטרנט

תכנות HTML מבוא - 1.3 כיצד עובד האינטרנט? איך עובד האינטרנט?

• יש להתחבר לתשתית העברת נתונים בבית. כיום בישראל יש שתי תשתיות: טלפון וכבלים. שימוש באינטרנט מצריך תשלום חודשי לחברה האחראית על התשתית

כיום בארץ יש שתי חברות: בזק מספקת תשתית טלפונית והוט המספקת תשתית כבלים. בחו"ל יש תשתיות נוספות: חשמל, סיבים אופטיים ועוד.

• מחשב - הצגת מידע הזום ומאפשר תקשורת עם רשת עולמית ע"י התשתית.
• חיבור למודם- חיבור ע"י כבל רשת. לכל תשתית יש מודם שונה. אם מחוברים דרך תשתית טלפון אז מחברים את המודם לשקע הטלפון בבית. תפקיד המודם הוא להמיר מידע דיגטלי לאותות אנלוגיים שעוברים דרך קו הטלפון ולהפך אותות החוזרים אנלוגים וממורים למידע דיגטלי

כדי להתחבר לרשת של כמה מחשבים יהיה עלינו להתקשר ע"י מודם לספק (isp - interent service povider) והוא ספק האינטרנט שמאפשר גישה לWWW כלומר קשת האינטרנט העולמית. מספר ספקים בישראל שמאפשרים התחברות לרשת עולמית: בזק בינלאומי, נטוויזין, 012 וכיוצב. גם במקרה זה נצטך לשלם תשלום חודשי קבועהתחברות אל ספק מצריכה הנפקה של שם משתמש וסיסמה שבאמצעותם נתחבר לאינטרנט ונגלוש באתרים. התחברות אל ספק מצריכה הנפקה של שם משתמש וסיסמה שבאמצעותם נתחבר לאינטרנט ונגלוש באתרים. בעקבות הרפורמה בתקשורת יאחדו את התשלום לתשתית והספק שיוביל להורדת מחירים. פרט למודם יש גם נטב (ראוטר) שתפקידים לחבר מספר מחשבים בבית. ישנם שתי אפשרויות לבצע זאת:

• חיבור המחשב לכבל רשת LAN local area network כלומר רשת מחשבים מקומית המתפרשת באזור מוגבל (בית, משרד, מקום קטן)
• חיבור אלחוטי - מאפשרת על ידי טכנולוגית WI FI באמצעותה ניתן להסתובב בבית עם המחשב הנייד והסלולר החכם ולהיות מחובר לרשת כל הזמן.

מודם ונטב - ישנם נתבים המגיעים בצורה משולבת עם מודם.לאחר התברות לספק האינטרנט הספק נותן למחשב שלנו כתובת הנקראת IP אשר מאפשר לנו לתקשר םע מחשבים אחרים ברשת האינרנט והיא ה"תעודת זהות" של המחשב בו אנו משתמשים.IP יכול להיות מספר כמו 22.323.112.43

גלישה באינטרנט:האתר מורכב מאוסף של קבצים הנמצאים בשרת. שרת הוא מחשב שמריץ מערכת הפעלה מיוחדת הפועלת 24 שעות ביממה לרשת העולמית. כש"אתר נופל" פירוש הדבר שהמחשב, השרת, עליו הקבצים התנתק מהרשת/נכבה או היתה בו תקלה טכנית. על השרת יש קבצים של האתר שאנו רואים בדפדפן. כדי לעלות אתר לשרת יש לרכוש שטח אחסון בשרת תמורת תשלום קבוע. לאחר קנית שטח אחסון עלינו לעלות בעצמנו התהליך הזה נעשה על ידי שיטת תקשרות FTP (file transfer protocol). ניתן לעלות קבצים על ידי דפדפן אולם עדיף לבצע זאת על ידי תוכנות ייעודיות עליהם נלמד בפרק FTP.

כדי להיכנס אל הקבצים בשרת באמצעות השרת, כלומר לתקשר עם המחשב שלנו אל המחשב של השרת עלינו לעשות זאת על ידי שימוש בכתובת האתר. מאחר והמחשב מקבל כתובת IP שקשה לזכור בעה"פ ולכן המציאו את שיטת הDSN (Domain name system) שממירה את כתובת הIP לשמשות נוחים כמו www.youtube.com. כתובת מסוג זה נקראת URL (uniform reform locater). באופן כזה אין צורך לרשום בדפדפן את שם הכתובת המלאה אלא רק את השם שלה למשל www.youtube.com או youtube.com

האחראית על ניהול שמות הכתובת של הרשתות בעולם היא חברה ללא מטרות רווח באה"ב הנקראת ICANN (interent corporation for assign names and numbers)

שם דומין לאתר ניתן לקנות מספקים המקבלים רישיון מהמדינה לאחר הרכישה יש סכרנון בין הדומין לשרת ויש קישורים בניהם.

בישראל יש שמות דומין:

• co.il - מוסדות מסחריים
• ac.il - מוסדות אקדמאים
• muni.il – עיריות
• gov.il – משרדי ממשלה
• org.il - מוסדות ללא מטרות רווח
• net.il - רשתות תקשורת וספקי אינטרנט
• biz.il – עסקים
• ועוד.
• לכל מדינה יש שם דומין משלה למשל בישראל רושמים co.il ואילו בברטניה uk ואוסטרליה au ורוסיה ru

בקורס זה נדגים את כל תהליכי הקנייה הוסכרון עם כלל הגורמים עד העלייה של אתר סופי תכנות HTML מבוא - 1.4 פרוטוקולים לתקשורת: בשיעור זה נלמד מושגים חדשים.

• פרוטוקול - שיטת תקשורת להעבת נתונים שהומצאו בתהליך התפתחות האינטרנט ותקפים עד היום.

פרוטוקולים לתקשורת ומושגים:

• IP (internet protocol) = כתובת המחשב ברשת דהינו כתובת המחשב ברשת כך שהמחשבים יכלו לתקשר זה עם זה.
• HTTP (hyper text transfwr protocol) שיטת תקשורת של דפדפן עם מסמכי הHTML.הדפדפן קורא את קוד הHTML ומציג אותו ויזאולית
• FTP file transer protocol - אנו נעזרים בפרוטוקול זה כדי להעביר קבצים לשרת. בשיעור הבא נראה איך לעשות זאת באופן מעשי בתוכנה.
• URL – כתובת האתר או דף.
• HTML - hyper text markup languge או ראשי התיבות HTP (HEYPRT TEXT)– השפה הנלמדת בקורס עמה בונים מסמכים אתרי אינטרנט
• lan local area network - רשת מחשבים מקומית שמתפרשת באזור מוגבל (בית, משרד...).
• wifi - טכנולוגיה המאפשרת העברת מידע על ידי גלי רדיו. קיימת כמעט בכל מכשיר נייד. כלומר אנחנו יכולים להסתובב עם הסלולר החכם ואם יש חיבור לWIFI אנחנו יכולים להיות מחוברים לרשת.
• TCP transmission control - פרוטוקול חשוב - שיטה להעברת נתונים בין שני מחשבים שהומצאה במסגרת פרויקט ארפנט

דואר אלקטרוני: דואר אלקטרוני לרב מסופק יחד עם הספק, SP. אחד מדואר האלקטרונים היודעים הוא האאוטלוק של מיקרוסופט.

כדי להגדיר דואר אלקטרוני צריך :

• SMTP simple mail transferprotocol - שיטת תקשורת סטנדרטית לשליחת דואר אלקטרוני כלומר דואר יוצא – לאחר שאנו שולחים דו"אל, כלומר כותבים מסר אלקטרוני ולוחצים send המייל נשלח על ידי השרת SNTP.
• POP3- post office protocol version 3 - שיטת תקשורת לשליפת דואר אלקטרוני משרת מרוחק.בדיוק הפוך מSNTP. כשאנו רוצים לקבל דוא"ל למשב, המחשב משתמש בpost office protocol כדי לקבל דואר אלקטרוני למחשב

דוגמה להגדרת שרת דואר יוצא של דואר אלקטרוני הנמצא על המחשב כמו של בזק בינלאומי (stmp: mail.bezeqint.net) דוגמה להגדרת שרת דואר נכנס של דואר אלקטרוני הנמצא על המחשב כמו של בזק בינלאומי (pop3: mail.bezeqint.net) כל ספק עמו אנו עובדים ודואר אלקטרוני יש לו הגדרות משלו. אם אין לנו את ההגדרות מומלץ להיכנס לאתר אינטנרט של אותה חברה המספקת את השירות או להתקשר נציג תמיכה שימסור מידע זה

• HTTPS - hypertext transfer protocol secure - כמו HTTP רק שנוסף S כלומר שיטת תקשורת בטוחה למסמכי HTML - שיטת תקשורת בטוחה עבור מסמכי HTML המאפשרת מסחר אלקטרוני בנקראות ועוד
• SSL - שיטת הצפנה ששברגע מוסרים כרטיס אשראי ומידע רגיש, זו דרך הצפנה על ידי אלגורתימים כדי לאבטח באופן מרבי את הפעולות

תכנות HTML מבוא - 1.5 כיצד מעלים אתר לרשת האינטרנט העולמית? בשיעור זה נלמד איך לעלות את האתר שלנו לרשת עולמית. לשם כך עלינו:

• רכישת שטח אחסון - עליו מעלים את כל הקבצים הפיזים על המחשב למחשב של הרשת הזמין 24 שעות ביממה
• רכישת שם מתחם (דומין) לאתר- הדומין מקשר בין השם שקנינו לבין הכתובת של שטח האחסון. זה יכול להיות דומין co.il, com, au, couk וכו.

פיקוח וניהול של הדומין מתבצע על ידי [ www.isco.org.ilאיגוד האינטרנט הישראלי] שאחראית על רישום שמות הדימין בישראל ומומלץ לבקר באתם ולקרוא מידע חיוני וחשוב. הוא מקדם את כל תחום האינטרנט בישראל בניהם תשתיות, משפט, טכנולוגיה וכו. כשנרצה לרכוש דומין כדי לבצע זאת בחברות שהוסמכו על ידי איגוד האינטרנט הישראלי שניתן לצפות בהם באתר של האיגוד. הוא מציג איך נכנס לאתר ושם יש "רישום שמות מתחם" ושם יש רשימה של כל החברות המוסמכות. בשלב זה נראה כי שם הדף השתנה ל"רשמים מוסמכים"

חלק מהחברות מוכרים לא רק דומין אלא גם אחסון. כדי לעבור על הגופים ולקבל הצעות מחיר. במהלך הרכישה של הדומין יש לבצע :

• פתיחת חשבון באתר המוכר הדומין כדי לקנות ולנהל את הדומין שקנינו בכל שלב.
• ניתוב שם הדומין לכתובת של השרת - הניתוב מתבצעת באמצעות שמות DNS שמקבלים מהחברה שמספקת את שטח האחסון

לאחר קנית דומין אנו רוצים לקנות שטח אחסון

• קיימים חברות ישראליות שמוכרות שטחי אחסון
• קיימים שטחי אחסון בחו"ל.

ישנם 3 אספקטים שנרצה לבחון בעת קנית שטח אחסון:

• מהירות גלישה - כשאנו מעלים את האתר לחברת אחסון ישראלית הגלישה מהירה יותר עבור גולש ישראלי. לעומת זאת, אם הגולש הישראלי יכנס לאתר שמאוחסן בחו"ל יש סבירות גבוה שהמהירות לאותו אתר יהיה נמוכה יותר
• מחיר – תלוי בחברת האחסון אבל המחירים די דומים. שטחי אחסון ישראלים יותר יקרים מאלו בחו"ל.
• שירות לקוחות – מאוד חשוב. שירות הלקוחות בישראל הפך להיות טוב מאוד בשנים האחרונות כמו בחו"ל. כשפונים לחברות ישראליות אנחנו מדברים בשפה העברית ולכן הגישה נוחה יותר. כשאנו מדברים על שירות בחו"ל יש לתקשר או בצאט או בשיחת טלפון באנגלית

לאחר רכישת שטח האחסון החברה תספק:

• כותבת DNS – הכתובת שבאמצעותה מנתיבים את הדומין לשרת. ללא ניתוב של הדומין לשרת, בעת הזנת הכתובת לא נצליח להגיע לאתר.
• HOSTNAME - כתובת FTP להעברת קבצים באתר
• username – שם משתמש. את נתונים אלו ניתן לערוך באתר ממנו נקנה את שטח האחסון
• Password – סיסמה.את נתונים אלו ניתן לערוך באתר ממנו נקנה את שטח האחסון

לאחר קנית דומין ושטח אחסון איך בפועל מעלים את האתר לאינטרנט?

• שימוש בתוכנת FTP, פרוטוקול להעברת קבצים מהמחשב שלנו לשרת. ישנם הרבה תכונות המבצעות זאת כמו התוכנות הפופלריות filezilla וsmartdtp. מומלץ להעביר את הקבצים שלנו בתוכנות יעודיות לFTP ולא בדפדפנים למען בטיחות.

תכנות HTML מבוא - 2.1 היכרות עם שפת הHTML HTML היא שפה בה דפדפנים מציגים תוכן ומדיה. שפה זו מתארת בכלים טסטואלים דף אינטנרט המציג תוכן, מדיה ועוד. כשכותבים בקוד HTML אנו נשמור קובץ בפורמט HTML שיפתח בכל דפדפן בו אנו גולשים בו באינטרנט * HTML - Hyper text markup language - markup הוא סימון כלומר סימינים שמתארים כל מיני פקודות ופעולות באופן ויזואלי.

שפת HTML פותחה בשנת 1992 על ידי החוקר טימברנס לי. הרעיון שלה היה בנוי על בסיס הצגת כל מיני קישורים, עיצוב טקסט ועוד.

עם השנים היא התפתחה. נוצרו גרסאות נוספות האחרונה לשנת 2012 היא HTML5 שלא נתמכת בכל הדפדפנים ונמצאת תחת שלבי גיבוש ופיתוח. כשהתפחה השפה נוספו טכנולוגיות נוצר הWWW, רשת אינטרנט עולמיתשמטרתה לתת גישה לכל אדם אפשרות לייצר דפי אינטרנט ולשתף באופן גלובי. כשנוצר הWWW נוצרה דרישה ליצור דפי אינטרנט עסקים שהובילה להתפתחות וכך נוספו אופציות לתמונות, סרטים ועוד כדי לשפר את חווית המשתמש.

אנו נלמד את שפת HTML ונשתמש בגרסת XHTML eXtensible hper text markup language. ההבדל בינה לבין גרסאות ישנות הוא

• מבוסס תקן XML - extensible markup language - תקן שקובע כי קוד צריך להיכתב באופן מדויק כדי להפיק מסמכי אינטרנט נכונים כלומר הקוד שבו אנו כותבים צריך להיכתב באופן מדויק יותר כדי להפיק מסמכי אינטרנט נכונים כלומר שבגסות קודמות הינו יכולים לכתוב בשפת HTML באופן שאינו מדויק והדפדפנים עדין היו מציגים תוכן ויזואלי אבל XHTML מחייב כתיבה מדויקת ויש הפרדה ברורה בין תוכן האתר לעיצוב
• גרסה נקיה ועם חוקים נוקשים לקודמות
• משמשת לבנית שלד של דף אינטרנט כלומר יש הפרדה ברורה בין השלד והבנייה של דף האינטרנט לבין העיתוב של הדך שמתבצע בשפת CCS

מדוע XHTML?

• שפה מדויק יותר
• נתמכת רב דפדפנים שקיימים במכשרים ניידים ובמחשב
• עומדת בתקן של w3c, מכון התקנים הבינלאומי
• יחד עם זאת כשאנו לומדים xthml זאת למעשה הכנסה לגרסה החדשה xhtml5 שתופסת תעוצה ונכנסת לרב הדפדפנים ותהיה הסטנדרט בשנים הבאות
• הפרדה של שלד XHTML ועיצוב CSS היא יתרון גדול בתאימות לדפדפנים, בעיצוב דינמי ומשתנה, ובתאימות למכשירים שונים (מחשב, אייפון, טאבלט ועוד)

תכנות HTML מבוא - 2.2 היכרות עם גרסאות שונות של HTML: מספר גרסות לHTML:

• HTML 4.01 פותחה בשנת 1999 ונמצאת בשימוש וסטנדרט עד היום (נכון לשנת 2012)
• XHTML 1.0 - מבוססת על גרסת HTML 4.01 ונמצאת בשימוש ברב אתרי האינטרנט שאנו מכירים . נתמכת על ידי ב הדפדפנים של הרשת ולכן הכי שימושית
• HTML 5- הגרסה החדשה ביותר עם שפע של שינויים לטובה אך אינה נתמכת בכל הדפדפנים נכון לשנת 2012. בשנים הקרובות תהפוך כנראה לתקן השימושי ביותר באינטרנט. מי שעומד מאוחרי התקן החדש הוא W3C, גוף המסדיר את נושאי התקינה באינטרנט.

מומלץ לצפות בקורסי הדרכות של [skoli.co.il סקולי] על HTML5

• בקורס זה נלמד XHTML10 כי הנפוץ ביותר ברשת העולמית

תכנות HTML מבוא - 2.3 כיצד בנוי קובץ HTML?:

בסרטון זה נציג איך בנוי קובץ HTML :

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

מבנה תגיות בסיסי של דפי HTML (במילים פשוטות מבנה של דף HTML) - בנויה מתגית פתיחה וסגירה בשם html אשר בתוכה אנו נכנסים את כל התוכן של מסמך HTML. בתוכך התגית של HTML יש שני תגיות נוספות:

• head מכיל בתוכו את התגיות הנסתרות כמו כותרת האתר, כל מיני קודים של CSS, JAVA ומילות חיפוש אותם אנו לא רואים באופן ויזואלי בגוף האתר
  • בתוכה תגית חשובה נוספת ששמה tilte - כותרת הדף. לכל דף יש כותרת וכשמחפשים אתרים בגוגל, התוצאת, המשפט הכחול המלא הוא לרב הכותרת של אותו דף עליו אנו לוחצים.
• body - מציג את כל הגוף האתר: טקטסט, תמונות, אנמציה ועוד.
• חשוב להשם לב להיררכיה של המבנה. בעת שמירת דפי אינטנרט הם ישמרו או בסיומת html או htm? למשל דף אודות יכול להישמר about.html או about.htm. מבחינת הדפדפן אין הבדל בין שתי הגרסות. עם זאת כאשר בונים אתר חשוב שהסיומת תהיה זהה לכל הדפים אותם אנו יוצרים או html או htm ולא גם וגם לצורך שמירת סדר וניקיון.

<html> 
<head>
<title>...</title>
...
</head>

<body>

<body>

<html>

תכנות HTML מבוא - 2.4 התקנה ועבודה עם תוכנת Notpad++: במהלך הקורס אנו עושים שימוש עם תוכנת NOTPAD++ . שפת HTML בנויה מטקסט שמתפרש על ידי הדפדפנים בהם אנו גולשים לתוכן ויזואלי. אנו נרשום בתוכנת NOTPAD++ את תוכן הטקסט.

התקנה והורדה של NOTPAD++ - תוכנה חינם.

• נכנס לאתר של NOTPAD++
• נלחץ על download
• נוריד את התוכנה ולאחר הורדה נלחץ על RUN. בסופו ישאלו אם אנחנו רוצים ליצור לחצן הפעלה דרךך שולחן העבודה (quick short at desktop). נלחץ על Install.

מציג איך נראת התוכנה כאשר פותחים אותה. בתוך התוכנה יש תפריט (לשונית הfile) וסרגל הכלים לאחר מכן עם כל הכפתורים השונים ולבסוף שורה של שם מסמך פתוח

• מציג כפתורים של יצירת מסמך חדש, שמירה, פתיחה, שמירה של כל הקבצים, העתק הדבק, הדפסה, אחוה וקדימה, הגדלת תצוגה, הקלטה, גישה לFTP והעלאת קבצים לשרת (show nppFTP window)

תכנות HTML מבוא - 2.5 מהן תגיות הבסיס ב- HTML?

בפרק זה איך בנוי קובץ HTML וXHTML בסיסי. במסמכי התרגול יש מסמך בשם basic.html והוא נראה כך:

 <head>
   <title>מסמך לדוגמא</title>
 </head>
 <body>

הנה טקסט, וחלקו

 </body>
</html>

תפקיד התגית לייצר תוכן מסוים. למשל תגית title מייצגת את הכותרת לדף האינטרנט. הדפדפן קורא את התגית ומבין כי מדובר בכותרת.

הקובץ השני בקבצי התרגול הוא basic xhtml.html

בקובץ זה יש שתי שורות עליונות חדשות הנפתחות בתגית xml ותגית doctype. הן מגדירות איזה גרסה כתוב דף האינטנרט שלנו.

שוב חוזר שתגית פתוחה מתגית פתוחה וסגורה. בניהם התוכן שהתגית מייצרת. לרב תגית של תוכן הן עם תגית פתיחה וסגורה.

ישנם תגית ללא תגית סגירה. הן מגדירות לרב לדפדפן אלמנו, למשל אם אנו רוצים לייצר קו ויזואלי קיימת תגית בשם HR

שיעור 2.6 בשיעור זה לומדים איך לשמור קובץ תבנית עם תגיות בסיס במסמך xhtml כך נוכל לחסוך זמן יקר ולא לכתוב כל פעם מחדש את כל תגיות הבסיס כלומר מבנה של הדף עם head, body, title

הדרך הטובה ביותר ליצור קובץ היא עבודה עם תוכנת NATPAD++ ולייצר פקודת מקרו שתריץ את הקובץ. עלינו להשם לב כי יש בלשונית העליונה של file אפשרות ששמה macro, וכמו גם, סרגל כלי marco. מציג את כפתור record אשר מקליט את המסך. הוא בדף חדש רושם מבנה של דף xhtml בסיסי. הוא לוחץ על כפתור stop בסרגל הmacro. הוא שומר אותו בשם על ידי לחיצה על כפתיר שמירה בmacro (save currect reccord macro). ניתן גם לבחור כפותאי קיצור דרך. הוא סוגר את המסמך ונכנס אל האפשרויות של macro שם הוא לוחץ על שם הקובץ ששמר ומרא. כי כל המבנה שכתב מופיע בקובץ. בלשונית macro ניתן ללחוץ על shortcut modiflyובו ניתן לראות את ההקלטות שבצענו. לחיצה כפילה על הקובץ תאפשר לנו לערוך אותו

3.1

תכנות HTML מבוא - 3.1 כיצד מוצגים רווחים בקוד בדף HTML ?

בשיעור זה נלמד איך רווח בין מילים שורות והזחות נראות בקובץ HTML. הוא הכין קובץ בשם spacing.html שנמצא בקבצי התרגול.

מבנה קובץ התרגול:

• בחלקו העליון של הקובץ יש את הגדרת HTML עליהם דנו בשיעורים הקודמים שנפתח במילה “<?xml…..” ומסתיים בכתובת אינטרנט ואחריה >.
• מתחת להגדרה יש את תגית Head של האתר
• אחריו תגית body.
• בתוך תגית body יש שתי פסקות אשר מסומנות על ידי p. תגית P היא עם סגירה ופתיחה.

  מלל הפסקה

  .

מצד ימין הוא פתח את האתר כשהוא מקביל בין קובץ HTML לאיך שהוא נראה באתר בפועל.

על תגית <P> מלל הפסקה </p>

• ריווח יחיד בין המילים בדף הHTML נראים באופן ויזואלי בדפדפן של האתר. יחד עם זאת אם נגדיל את כמות הרווחים בין המילים בתגית P, נשמור ונרענן את הדפדף (F5) נראה כי אין השפעה על כמות הריווח מבחינת תצוגה.

<P> hello world </p> יראה hello world

<P> hello world </p> יראה hello world

• אנטר בין המילים בתגית P אינו מוריד את הכיתוב לשורה חדשה אלא מיצר ריווח יחיד בין מילה אחת לשנייה.

<P> hello world </p> יראה hello world

• ריווח יתבצע על ידי יצירת תגית חדשה של P

<P> hello world </p> <P> שלום עולם </p>

בדפדף יוצג: hello world <ש> <ש> שלום עולם

ריווח

• ריווח בין שורות, הזחה וכו מחייב שימוש בתגיות. היום למדנו על תגית P בהמשך יהיו תגיות נוספות.
• NOTPAD+ אינו תומך בשפה העברית וברירת המחדל היא כתיבה משמאל לימין. לפיכך אם מנסים לדוגמה להוריד מילה מתוך משפט בשפה העברית, המילה אותה נרצה להוריד שורה לא תרד אלא מילה אחרת. מסיבה זאת, כאשר נרצה לדוגמה להוריד מילה מתוך התגית :

  זאת הפסקה הראשונה

  ונלחץ אנטר אחרי המילה "זאת" נראה כי המשפט "הפסקה הראשונה" לא ירד שורה אלא "ונה".

ניתן להחליף את כיוון הכתיבה ולשלוט באפשרות זו על ידי לחיצה על כפתור view בלשונית העליונה. בתחתית התפריט של view ישנם שתי פקודות חשובות:

• • test direction RTL – כתיבה מימן לשמאל. לחיצה על אפשרות זו תשנה את הכתיבה בתוכנה אל כיוון כתיבה לעברית כלומר מימין אל שמאל. מצד אחד, זה יקל עלינו לערוך מילים במילים וללחוץ אנטר בקלות כדי להוריד אותן שורה. מצד שני, זה יסרבל את הכתיבה בשפת HTML ועלול לגרום בעיות ולכן מומלץ לעבוד משמאל לימין ורק אם יש צורך לתקן טקסט בעברית כמו ירידת שורה נלחץ על האפשרות זו ולאחר מכן נעבור חזרה לתצוגה משמאל לימין.
  • test direction LTR – כתיבה משמאל לימין

תכנות HTML מבוא - 3.2 שימוש בתגית פסקה (P Tag)

תכנות HTML מבוא - 3.2 שימוש בתגית פסקה (P Tag)

בשיעור זה נמשי לדון על תגית P. קיצור למילה Paragraph. בתוך תגית P אנו כותבים פסקה. כאשר נכתוב בתוכה מלל ונציג אותו באתר נוכל לראות כי בפועל מדובר על שורה שהופכת לפסקה בהתאם לגודל החלונית של האתר. זאת אומרת שאם נקטין את חלונית המסך של האתר המלל יהפוך לתצוגת פסקה ואם נרחיב אותו הוא מפיסקה יטה להיות שורה ארוכה.

כשאנו כותבים בתוך תגית P שורה ארוכה מאוד אנו לא נראה בתוכנה את כל התוכן אלא אם נזיז את התצוגה. ניתן לחלק שורה ארוכה בתוך תגית P ולחלק אותה למספר שורות. לשם כך:

• נסמן את המלל בתוך תגית הP כלומר את כל המלל בין

  אל

• בלשונית התפריט נלחץ על edit ושם על Line operations ולאחר מכן split lines שהקיצור שלה הוא ctl+I. כשנלחץ על אפשרות זו כל השורות יקוצרו ויתאימו את עצמם לחלון התוכנה עמה אנו עובדים כך שעתה אנו יכולים לראות את כל המלל בתוכנה בה אנו עובדים.

כשאנו יוצרים תגית P חדשה תחת תגית P יהיה בין הפסקות ריווח של שורה ריקה.

<P> hello world </p> <P/> שלום עולם <p>

בדפדף המלל יוצג ככה:
hello world
שלום עולם

תכנות HTML מבוא - 3.3 הגדרת יישור פסקה (P Tag Align)

תכנות HTML מבוא - 3.3 הגדרת יישור פסקה (P Tag Align)

בפרק זה נראה איך אנו מישרים פסקת P. פתח קובץ מתרגל התרגול בשם "p_tag_align”. לשם יציר יישור של הטקסט עלינו לייצר מאפיין בתוך תגית P.

‘’’הוספת מאפיין לתגית P:’’’ נניח יש לנו את התגית הבאה:

שלום עולם אנחנו חיים פה המון שנים ומנסים להבין למה אנשים פחות מצליחים להיות רעים וערבים זה לזה. ככה זה שיש אנשים שוים ומשונים בעולם בו אנו חיים ואנו כותבים כאן המון מילים בניסיון לראות איך הדברים מתיישרים אז בוא נראה איך זה הולך בשפת הHTML של איכס לא מעניין.

מאפיין תגית P של יישור: יישור לכיוון הימיני יראה: <p align=”right”>כיתוב </p>. (מתוך שיעור 3.4) כאשר נישר לכיוון ימיני נראה כי סימיני הפיסוק והמילים באנגלית לא מופיעים במקום הנכון זה תוצאה של הגדרת ברירת המחדל של הדפדפנים וקבצי HTML לכתיבה משמאל לימין. על כך נרחיב בשיעור הבאה.
יישור למרכז:<p align=”center”>כיתוב </p>
יישור לשמאל: <p align=”left”>כיתוב </p>. תגית פחות שימושית מאחר ובאופן אוטומטי מוגדר יישור לשמאל
יישור לשני הכיוונים: <p align=”justify”> כיתוב </p>

תכנות HTML מבוא - 3.4 קביעת כיוון המלל מימין לשמאל (Dir=Direction)

תכנות HTML מבוא - 3.4 קביעת כיוון המלל מימין לשמאל (Dir=Direction)

שימוש במאפיין DIR:

בשיעור זה נשתמש בקובץ התרגול direction.html. נלמד איך להגדיר את כיוון הכתיבה של המלל בתוך הNOATPAD+

• שפה עברית
• שפה אנגלית

כאמור כאשר אנו מבצעים יישור לימין כלומר משתמשים במאפיין התגית : <p align=”right”>כיתוב </p> אנו נראה כי סימיני הפיסוק והמילים באנגלית לא מופיעים במקום הנכון זה תוצאה של הגדרת ברירת המחדל של הדפדפנים וקבצי HTML לכתיבה משמאל לימין (LTR קיצור של left to right) במאפין תגית dir. dir קיצור של direction כיוון.
כדי לתקן זאת נוסיף מאפיין חדש למאפיין <p align=”right dir=rtl”>כיתוב </p>
RTL קיצור של right to left

ניתן להוסיף מאפיין זה לתגיות נוספות כמו תגית body בכדי לא להגדיר בכל פסקה הגדרה זו.

תכנות HTML מבוא - 3.5 תגיות ריווח ושבירת שורה

בשיעור זה נלמד איך לייצר ריווח בין השורות.

הוא משתמש ברובץ התרגול Line break.html מתוך תיקיית התרגולים

שיטה א (חזרה משיעור קודם)

כאמור NOTPAD+ אינו תומך בשפה העברית וברירת המחדל היא כתיבה משמאל לימין. לפיכך אם מנסים לדוגמה להוריד מילה מתוך משפט בשפה העברית, המילה אותה נרצה להוריד שורה לא תרד אלא מילה אחרת. מסיבה זאת, כאשר נרצה לדוגמה להוריד מילה מתוך התגית :

זאת הפסקה הראשונה

ונלחץ אנטר אחרי המילה "זאת" נראה כי המשפט "הפסקה הראשונה" לא ירד שורה אלא "ונה".

ניתן להחליף את כיוון הכתיבה ולשלוט באפשרות זו על ידי לחיצה על כפתור view בלשונית העליונה. בתחתית התפריט של view ישנם שתי פקודות חשובות:

• • test direction RTL – כתיבה מימן לשמאל. לחיצה על אפשרות זו תשנה את הכתיבה בתוכנה אל כיוון כתיבה לעברית כלומר מימין אל שמאל. מצד אחד, זה יקל עלינו לערוך מילים במילים וללחוץ אנטר בקלות כדי להוריד אותן שורה. מצד שני, זה יסרבל את הכתיבה בשפת HTML ועלול לגרום בעיות ולכן מומלץ לעבוד משמאל לימין ורק אם יש צורך לתקן טקסט בעברית כמו ירידת שורה נלחץ על האפשרות זו ולאחר מכן נעבור חזרה לתצוגה משמאל לימין.
  • test direction LTR – כתיבה משמאל לימין.

תגית br

br הוא קיצור של תגית break והיא נראת
. כדי להשתמש בתגית זו הוא הגדיר את הNotepad בתצוגת test direction RTL. לאחר מכן, הוא מיקם את תו הnotepad במיקום בו הוא רוצה שתהיה ירידת שורה והוסיף את הכיתוב

תגית br היא תגית שאין לה סגירה. תגיות שאין להם סגירה מסתיימות ברווח או סלש וסוגרים משולשים.

דוגמה: בכדי ליצר 4 שורות לטקסט: “ שורה א שורה ב שורה ג שורה ד" נוסיף את התגית br באופן הבא: שורה א <br/> שורה ב <br/>שורה ג <br/>שורה ד

מניעת שבירת שורה (non breakable space plus)

נניח כי אנו מעוניינים לקבע את את המילים ככה שלא ישברו כלומר אם הם יופיעו בסוף המסך לעולם לא נראה אותם שבורים לשני משפטים אלא נראה אותם עד סוף המשפט בתוך אותה שורה. אנו נניח את התו בין המילים שנרצה כי לא ישברו ונלחץ shift 7 שיוסיף את הסימן & ונכתב לאחר מכן nbsp; במילים אחרות את הכיתוב  

דוגמה: <!DOCTYPE html> <html> <head> <title>Hello, World!</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p> hello world I can't write Hebrew words onilne so I'm writting to myself with English letters. I's fucking hard. So lets see how it's going to be...</p> </body> </html> המילה Hebrew נמצאת בשורה נפרדת מwords (לפחות אצלי במסך). כדי למנוע זאת נוסיף את התוספת הבאה: <nowiki> <!DOCTYPE html> <html> <head> <title>Hello, World!</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p> hello world I can't write Hebrew words onilne so I'm writting to myself with English letters. I's fucking hard. So lets see how it's going to be...</p> </body> </html>

תכנות HTML מבוא - 3.6 עיצוב מלל באמצעות קבוצת תגיות הביטוי

תכנות HTML מבוא - 3.6 עיצוב מלל באמצעות קבוצת תגיות הביטוי

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

פתח שני קבצים מתיקת התרגולים phrasetages.html וfontages.html. בשיעור זה יעסוק בתגיות ביטוי ולכן הקובץ הרלוונטי הוא phrasetages.html.

סוגי תגיות ביטוי:

• תגית הדגשה EM קיצור של Emphasis (הדגשה): מופיעה בקובץ בתגית פסקה תחת body

<body>
<p><em> Hello </em></p>  
</body>

כל דפדף יכול להציג את התגית באופן שונה. אצלו בדפדפן התגית מופיעה ככתב נטוי

• strong כלומר קריאה חזקה וגם היא נועדה עבור טקסט מודגש

<body>
<p><strong> Hello </strong></p>  
</body>

• dfn קיצור של define (הגדרת מונח)

<body>
<p><dfn title="שלום">Hello </dfn></p>  
</body>

כמו תבנית מונחון. הנחת העכבר על המילה Hello יפתח חלון עם הפירוש "שלום"

3 תגיות שמופיעות בדפדפן ללא עיצוב :

• תגית code מאפשרת להציג קוד אותו ניתן להעתיק ולהדביק בתוכנה אחרת

<body>
<p><code> Hello </code></p>  
</body>

• samp מציגה קוד שעבור HTML הוא פלט של מחשב

<body>
<p><samp> Hello </samp></p>  
</body>

• keyboard הצגה של כפותרי המקלדת

<body>
<p><kbd> Hello </kbd></p>  
</body>

• תגית var קיצור של variable, משתנה, פרמטר בתוכנה. תגית נדירה ומשתמשים בה כשמתיחסים לפרמטר בתכנות. בדפדף היא מוצגת ככתב נטוי

<body>
<p><var> Hello </var></p>  
</body>

תגיות ציטוט:

• תגית cite מציגה את שם האדם אותו מצטטים. מופיע כטקסט נטוי

<body>

<p><cite> Hello </cite></p>  
</body>

• תגית q ציטוט קצר. מופיע בגרשים.

<body>

<p><q> Hello </q></p>  
</body>

• blockquote ציטוט ארוך. מייצר שורה חדש עם הזחה מצד ימין ללא גרשיים

<body>

<p><blockquote> Hello </blockquote></p>  
</body>

• Abbr נועדה להציג פירוש עבור מילים מקוצרות

<body>

<p> <abbr title=צבא הגנה לישראל> צה"ל </abbr> </p>  
</body>

כשנעמוד מעל המילה נראה כי יופיע פירוש ראשי התיבות בדומה לתבנית מונחון

תכנות HTML מבוא - 3.7 עיצוב מלל באמצעות תגיות מקבוצת הפונט

תכנות HTML מבוא - 3.7 עיצוב מלל באמצעות תגיות מקבוצת הפונט:

בשיעור זה נציג תגיות מקבוצת הפונט. קבוצה זו מגדירות את המלל על ידי הסגנון הוויזולי של איך הם מוצגים בתוך הדפדפן על המסך.בXHTML1.0 פחות משתמשים בתגיות אלו.

בפרק זה השתמש בקובץ התרגול fontages.html.

דפדפנים שאינם מציגים תוכן ויזואלי תגיות אלו לא ישפיעו כל כך ויש להשתמש בתגיות ביטוי.

• תגית b - תגית הדגשה

<body>
<p><b> Hello </b></p>  
</body>

• תגית small - הקטנת גודל הטקסט

<body>
<p><small> Hello </small></p>  
</body>

• תגית big - הגדלת גודל הטקסט

<body>
<p><big> Hello </big></p>  
</body>

• תגית i - קיצור של italic. כתב נטוי

<body>
<p><i> Hello </i></p>  
</body>

• תגית s קיצור של strike out . קו לאורך מילה בטקסט

<body>
<p><s> Hello </s></p>  
</body>

• תגית u - קיצור של underline - קו מתחת למילה

<body>
<p><u> Hello </u></p>  
</body>

• תגית tt -teletype text -הצגת מלל לא מעוצב

<body>
<p><tt> Hello </tt> world</p>  
</body>

תכנות HTML מבוא - 3.8 כיצד נגדיר תגיות כותרת?

תכנות HTML מבוא - 3.8 כיצד נגדיר תגיות כותרת?: בשיעור זה נעסוק תגיות הכותרת .

• h1 כותר ראשי

<body>
 <nowiki><p><h1;">כותרת ראשית</h1></p>  
</body>
</nowiki>

דפדפן אינו מציג טקסטים מועצבים כמו שאנו רוצים ולכן יש להשתמש בסגנונות של CSS על כך נרחיב בהמשך הקורס. דוגמה לסגנון של גופן (font-family) שונה וכן גודל הטקסט (font-size):

<body>
 <nowiki><p><h1 style="font-family: Arial; font-size:24px;">כותרת ראשית</h1></p>  
</body>
</nowiki>

• h2 כותר משנית

<body>
 <h2>כותרת משנית</h2>
 </body>

דפדפן אינו מציג טקסטים מועצבים כמו שאנו רוצים ולכן יש להשתמש בסגנונות של CSS על כך נרחיב בהמשך הקורס. דוגמה לסגנון של גופן (font-family) שונה וכן גודל הטקסט (font-size) וצבע (color):

<body>
 <nowiki><p><h2 style="font-family: Arial; font-size:18px; color:#006;">כותרת משנית</h2></p>  
</body>
</nowiki>
 

• עוד כותרים h3, h4, h5, h6

תכנות HTML מבוא - 3.9 שימוש בתגית "ללא מאפייני עיצוב" (Pre Tag)

תכנות HTML מבוא - 3.9 שימוש בתגית "ללא מאפייני עיצוב" (Pre Tag): קובץ תרגול : pretag.html

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

בכדי לבצע זאת אנו נשתמש בתגית pre (preformatted ללא מאפיני עיצוב ומוצג בדיוק כמו שמופיע בקוד). בעת שימוש בתגית זו נחליף את תגית <p> טקסט </p> בתגית זו : <pre> טקסט </pre>.

השימוש בתגית זו בא לידי ביטוי בכתיבת code script בתוך דף אינטרנט כדי להראות את כל העיצובים שבקוד.

תכנות HTML מבוא - 3.10 עיצוב הממלל באמצעות תגית הפונט (Font Tag)

תכנות HTML מבוא - 3.10 עיצוב הממלל באמצעות תגית הפונט (Font Tag):

קובץ תרגול font.html

תגית Font יכולה לעצב את המלל (סוג גופן, גודל, צבע ועוד). תגית Font תגיע תמיד בתוך תגית p מכיוון שעריכת הפונט ועריכת העיצוב של המלל היא פקודה פנימית. היא ממוקמת בין תגיותה פסקה : <p><font> text </font></p>

לאחר הכנסת התגית font בין התגיות יש להוסיף מאפיינים. ללא מאפינים התגית חסרת משמעות. כדי להוסיף מאפינים נעזר בסימן שווה.

הוספת גופן (face "שם של סגנון"): <p><font face="ariel"> text </font></p>. אריאל הוא הגופן הקריא ביותר במערכות ההפעלה. נשמור ונבצע רענון.

שינוי גודל (size="הגדרה של גודל"): <p><font="ariel" size=""> text </font></p>. יש שתי אפשרויות להגדרת גודל:

• הגדרה מ1-7 לגודל כתב (כש7 הוא הערך הגדול ביותר). 3 הוא גודל ברירת המחדל. <p><font="ariel" size=5""> text </font></p>
• הוספת פלוס / מינוס - אם גודל ברירת המחדל של הדף היא 3 כשנרשום +2 גודל הדף יהיה 5. <p><font="ariel" size="+2"> text </font></p>

הוספת צבע (color = ""): <p><font="ariel" size="" color=red> text </font></p>

הסגנון הגופן ARIEL קיים בווינדוס אך לא בהכרח יהיה קיים במערכות הפעלה אחרות. יש 3 סוגי פונטים:

• serif -פרונט חד בקצה.
• sans serif - פורמנטים ללא פינות חדות.
• monospace - תו שווה בשווה.במערכת של הפעלת וינדוס נראה בפדפן כי המערכת בוחרת בגופן ששמו courier

תכנות HTML מבוא - 3.11 מהן תגיות הרשימה? (Ul, Or, Dl)

תכנות HTML מבוא - 3.11 מהן תגיות הרשימה? (Ul, Or, Dl) קבצי תרגול unorderedlist, orderlist, definitionlist

בשיעור זה נלמד על תגיות רשימה.

יש 3 שמות של רשימות אשר ניתן להניח בין תגית פסקה:

• unordered list (<ul> </ul>) - רשימה לא ממוספרת
  • לאחר פתיחת התגית - כל פריט ברשימה יופיע בli.

>p><ul> ::<li> </li> ::<li> </li> ::<li> </li> ::</ul></p>

בכדי לעצב את הכוכביות שיש ברשימה נוכל להיעזר בתגית type אחרי li.

• ברירת המחדל לעיצוב הכוכביות הוא disc (עיגול שחור)

>p><ul type=disc> ::<li> </li> ::<li> </li> ::<li> </li> ::</ul></p>

• • אפשרויות אחרות: circle (עיגול חלול), square (ריבועים)
  • רשימה בתוך רשימה יעשה על ידי פתיחת תגית ul בין תגיות li:

>p><ul> ::<li> </li> ::<li> </li> ::<ul> </ul> ::::<li> </li> ::::<li> </li> ::::<li> </li> ::::<li> </li> ::<li> </li> ::</ul></p>

• ordered list (ol)- רשימה ממוספרת

ההנחיות דומות להנחיות של רשימה לא ממוספרת

type הקיימים הם A שימספר את הרשימה באותיות $A,B,C$ או a או I (מספר רומאים)

• definition list (dl) - רשימת הגדרות - מורכבת משני תגיות
  • תגית dt (defitiontion term)
  • תגית מונחון dd - הסבר המונח

<p><dt> HTML </dt> <dd> Language </dd> </p>

תכנות HTML מבוא - 4.1 שימוש בתמונה כרקע לדף HTML

תכנות HTML מבוא - 4.1 שימוש בתמונה כרקע לדף HTML קובץ תרגול bging.html. במקביל נפתח את הדף באקספלורר וכן תיקיה של שני הקבצים עליהם עובדים מתיקית התרגל - דף האינטנרט ששמו bging ותמונת tuki

בפרק זה נלמד איך להכניס תמונה לדף אינטנרט. יש שתי אפשרויות:

1. תמונה כרקע הדף. פרק זה יעסוק בכך. נציג שיטה מיושנת. שיטה החדשנית יותר היא באמצעות CSS עליה נרחיב בהמשך.
2. הכנסת תמונה לתוך תוכן האתר.

הוספת תמונה כרקע של דף:

אל תוך תגית Body נוסיף את מאפין. הbody שלו מאופין תחילה בכיוון של הטקסט כלומר מופיע <body dir="rtl">. נוסיף רווח ונוסיף את המאפיין background=ובתוכו שם הקובץ.

אנו צריכים לרשום את שם הקובץ יחסית למיקום שבו נמצא דף האינטרנט.

כשהתמונה נמצאת באותה תיקיה עם דף האינטרנט - אם הקובץ שלנו נמצא בתיקיה (bging) והתמונה באותה תיקיה אז נכתוב את שמו ושמור את הקובץ. דוגמה: <body dir="rtl" backgrout=tuki.jpg> נלחץ שמירה ונערנן את הדפדפן.התמונה בדפדפן תופיע מספר פעמים על הרקע

אם הינו מבצעים פעולה זו בCSS היתה לנו יותר שליטה והינו יכולים לקבוע היכן התמונה תהיה בצי אופקי, אנכי או שלא תשתכפל בכלל.

כשהתמונה אינה נמצאת באותה תיקיה עם דף האינטרנט (נעביר את הקובץ tuki.jpg אל תוך תת תיקיה בתיקה שלנו ששמה יהיה images. עתה כשנרענן את הדף התמונה תעלם כי אין מסלול מלא של מיקום הקובץ). עתה המיקום המלא יהיה <body dir="rtl" backgrout=\images\tuki.jpg> נשמור

תכנות HTML מבוא - 4.2 שימוש בתגית תמונה (Img Tag)

תכנות HTML מבוא - 4.2 שימוש בתגית תמונה (Img Tag) קובץ תרגול: imgtag.html. בצד ימים הדפדפן.

בפרק זה נלמד על תגית Img המציגה תמונה בתוך תוכל של דף אינטנרט.

בתגית פסקה (P) נוסיף את תגית img :

 <p> זאת התמונה <img scr="tuki.jpg"alt="tuki"
 title= איזה תוכי מהמם width="400" height="350" /> פנימית לתוכן האתר <p>
  

שמו לב שתגית Img היא ללא תגית סגירה מכיוון שתגית פנימית ולא מכילה בטוחה דבר.

מאפיני תגית img:

• source - המיקום של הקובץ ביחס לדף הhtml דהינו מיקומה בתיקיה על המחשב.
• Alt - תיאור התמונה לדפדפנים לא ויזואלים. כמו דפדפן לאנשים המתמודדים עם עיוורון.
• title - תיאור מילולי של התמונה. עמידה על התמונה בדפדפן יציג את הטקסט הזה
• width - הגדלה לפי פיסקלים. קביעה מראש ימנע קפיצות.
• height - הגדלה לפי פיסקלים . קביעה מראש ימנע קפיצות.

תכנות HTML מבוא - 4.3 יישור מלל ביחס לתמונה

תכנות HTML מבוא - 4.3 יישור מלל ביחס לתמונה

• קובץ תרגול imgaligh.html

תגית Img עליה דנו שיעור קודם נמצאת בתוך תגית p כלומר זו תגית פנימית

קצה התמונה והשורה מופיעים יחד זה לצד זה כאשר יש כיתוב תחת תגית תמונה:

 <body dir="rtl">
 <p>
 <img scr="tuki.jpg" alt="tuki" title=hello width="100" height="100"/> 
 
 heloo world here we will add what every we like too
 </p>
 </body>
  

באמצעות מאפין Align נוכל לבחור היכן למקם את התמונה

 <body dir="rtl">
 <p>
 <img scr="tuki.jpg" alt="tuki" title=hello width="100" height="100" align="right"/> 
 
 heloo world here we will add what every we like too
 </p>
 </body>
  

באמצעות מאפין hspace="number pix" נוכל לרווח את הטקסט מהתמונה ריווח אופקי לדוגמה 10 פיקסלים:

 <body dir="rtl">
 <p>
 <img scr="tuki.jpg" alt="tuki" title=hello width="100" height="100" align="right" hspace=10/> 
 
 heloo world here we will add what every we like too
 </p>
 </body>
  

באמצעות מאפין vspace="number pix" נוכל לרווח את הטקסט מהתמונה ריווח אנכי כלומר בין החלק התחתון והעליון של התמונה. על מנת לראות שינוי זה נצטרך להוסיף מלל רב.

תכנות HTML מבוא - 4.4 שבירת שורות מסביב לתמונה

תכנות HTML מבוא - 4.4 שבירת שורות מסביב לתמונה

• תרגול breaklines.html

בשיעור זה נלמד על שבירת שורות כשיש תמונה משולבת בטקסט.

תגית BR שוברת את השורה של הטקסט: <br/>

<br clear="right/left/all> - כשאנו רוצים שתהיה שבירת טקסט כשישנה תמונה משולבת בכיתוב, והטקסט החדש יהיה מתחת לתמונה.

• right - ישור לימין
• left - ישור לשמאל
• all - שני הצדדים

תכנות HTML מבוא - 5.1 תגית לינק/קישור ומאפייניה (A Tag)

תכנות HTML מבוא - 5.1 תגית לינק/קישור ומאפייניה (A Tag)

• קובץ תרגול a_tag

בפרק זה נלמד על קישורים שמתבצעים באמצעות תגית a.

תגית קישור מאופינת על ידי a ותגית סגירה <a/>

מאפיינים :

• href = "כתובת URL" - הכתובת אליה אנו רוצים לקשר. ניתן לקשר אל תמונות ודפים פנים
• title = "תיאור מעל הכפתור על האתר"
• הטקסט בין תגית פתיחה וסגירה הוא הכפתור, הטקסט, עליו נלחץ כדי להגיע לכתובת של האתר שכתבנו בתוך מאפיין href

target = "_blank" - פתיחת קישור לא בדפדפן הנוכחי בהכרח אלא דפדפן חדש (blank)

תכנות HTML מבוא - 5.2 כתובת יחסית וכתובת אבסולוטית בתוך קישור

תכנות HTML מבוא - 5.2 כתובת יחסית וכתובת אבסולוטית בתוך קישור

• תרגול a_paths

בשיעור זה נדון כיצד לבצע קישורים בתוך האתר, סוגי קישורים ומספר דוגמאות לקישורים.

קישורים אל דפדפן

קישור דף אלף לדף בית תלוי בסוג הקישור:

כתובת יחסית

כתובת יחסית - כתובת המוזנת היא יחסית למיקום של הקובץ עליו אנו עובדים. אנו נשתמש בסוג כתובת זה כדי לקשר דפדפנים המועלים אל שרת.

דוגמה לקישור דף אל דף אחר

דוגמה: בתיקית התרגול יש 4 קבצים. אנו מעונינים לבצע קישור לדף מספר 1

הקישור יראה: <a> herf=page1.html title="דף מספר 1"> לינק לדף מס' 1 <\a>

בתיקית התרגול, דף מספר 1 נמצא תחת השם page1.html (כפי שניתן לראות בקוד אחרי href ואחרי hfref מופיע רק הכיתוב page1.html מאחר וקובץ page1.html נמצא עם a_path.html עליו אנו מקודדים באותה תיקיה - תיקית התרגול - עם הדף הראשי ולא בתיקיה אחרת. דהינו אם הקובץ לא היה באותו תיקיה הינו צריכים להניח פירוט מפורט יותר על מיקום הקובץ.

נשמור את a_path, נרענן ונכנס לדפדף. נלחץ על הקישור ונוודא כי אנו מגיעים אל קובץ html הראשון.

דוגמה 2: כאשר בתוך התיקיה שלנו יש תיקיה נוספת אליה אנו רוצים לקשר.

הקובץ קידוד עליו אנו עובדים נקרא a_path. בתיקיה בה הוא נמצא יש תיקיה נוספת שנקראת pages בה נמצא דף 2 page2.html. אנו רוצים לקשר אל קובץ זה נרשום את שם התיקיה סלש ושם הקובץ pages/page2.html.

<a> herf=pages/page2.html title="דף מספר 2"> לינק לדף מס' 2 <\a>

דוגמה קישור חזרה על פי כתובת יחסית

בדף page 1 ודף page2 נרצה שיהיה קישור חזרה אל הדף הראשי.

לשם כך נפתח את קובץ הקידוק של page 1.html

<a> herf=a_path.html title="חזרה לדף הראשי"> דף ראשי <\a> שוב מאחר ושני הקבצים נמצאים באותה תיקיה.

לשם כך נפתח את קובץ הקידוק של page 2.html .page 2.html נמצא בתוך תיקית pages. אנו רוצים לבצע קישור אל a_path.html ולכן אנו רוצים להגדיר קישור יחסי אל תיקיה אחת החוצה ואז לפתוח את a_path.html. פעולה זו מתבצעת ע"י הגדרה ... שמסמן יציאה אחת החוצה לתיקיה בה אני נמצאת.

<a> herf=.../a_path.html title="חזרה לדף הראשי"> דף ראשי <\a> שוב מאחר ושני הקבצים נמצאים באותה תיקיה.

כשיש מספר תיקיות נרשום נחזור על הפעולה בהתאם לכמות התיקיות: <a> herf=.../.../.../a_path.html title="חזרה לדף הראשי"> דף ראשי <\a>

לינוק שפותח תמונה

הדפדפן יכול לקרוא תמונות ולכן במקום לכתוב אחרי href כתובת נרשום שם תמונה שקיימת בתיקיה שלנו עם הקבצים

<a href="key.jpg" title="פסל מפתחות"> link to the photo </a>

לחיצה על שמירה ופניה אל הדפדפן + רענון תציג את הקישור. לחיצה עליו יפתח דף חדש עם תמונה.

לינק למייל

כשאנו רוצים שיפתח איימל נרשום בתוך herf= את "mailto:" ולא מכן בין הנקודתים לגרשים את כתובת האיימל.

כתובת אבסולוטית

כתובת אבסולוטית - נתיב מלא של מיקום הקובץ במחשב. במקרה כזה אנו מעתיקים את כל הכתובת של מיקום הדפדפן בתיקיה למשל במקרים בהם הקובץ אינו נמצא באותה תיקיה עם הדף הראשי. אחרי הherf במקום page1.html נדביק את כל הכתובת ונוסיף סלש ואחריו שם הקובץ (כלומר \page1.html). רב נראה מיקום שמתחיל בc:\Users....

כשמעלים אתר לאינטרנט לא משתמשים בה. שרת הוא מקום רחוק ללא C וללא תיקיות ולכן כשמעלים לאינטרנט עלינו להעלות את הקבצים ביחס לקבצים אחרים ולעולם לא נשתמש בה

כתובת דומיין

ראינו בסרטון הקודם בקישור לגוגל.