Download to read offline
מדריך מקיף ללמידה HTML עבור מתחילים בשפה העברית
- 1. ללמוד HTML אמסלם ליאור ע"ינכתב במקור נכתב עבור Webmasters.co.il
- 2. עניינים תוכן 1 . הקדמה 2 . המבנה הבסיסי של דף HTML 3 . מלל ואפיוןעיצוב 4 . ותמונות קישורים 5 . ומסגרות רשימות 6 . טבלאות 7 . טפסים 8 . העברית לשפה אתר קידוד 9 . מטא תגי 10 . מיוחדים תווים
- 3. הקדמה HTML היא שפת הבסיס לבניית אתרים .באינטרנט אם אינכם יודעים דבר על בניית אתרים אז הגעתם למקום .מתחיל הכול כאן- הנכון HTML הוא ראשי התיבות של H yper T ext M arkup L anguage ובפשטות מדובר בשפת .תגיות לכן גם מדובר בשפה שהכי קל .ללמוד HTML מורכב בעצם מתגיות שלהן יש הגדרה של התחלה וסוף ,)(לרוב מטרתן של .להתרשם הזמן הגיע אז התרשמתם ולא אתרים על הסתכלתם כה עד אם .ויזואלי תוכן להציג הוא התגיות תדמיינו כל חלק בעמוד של אתר אינטרנט בעצם מחולק ובנוי בבסיסו -ב HTML . בין אם זה החלק העליון של .ועוד קישורים ,תמונות ,פסקאות ,מאמר ,האתר ?עובד זה כיצד המטרה העיקרית של HTML כמו שכבר אמרנו היא לעצב ,טקסט למקם אלמנטים איך שנרצה ולהציג תוכן עשיר מסוים )אתרים שמאחסן (מחשב שרת שעל הוא שקורה מה בעצם .ועוד תמונות ,סאונד קבצי ,וידאו כמו למשתמש בחוות שרתים יש אתר עם קבצי HTML , כאשר אנחנו מבקשים בעזרת הדפדפן שלנו (למשל פיירפוקסכרוםאינטרנט )אקספלורר להיכנס לאתר ,מסוים אז אנחנו בעצם מורידים קבצי HTML למחשב .שלנו והדפדפן מתרגם את סדרת תגיות -ה HTML לכדי עמוד שלם ויזואלי שנראה .טוב לדפדפן ותאימות תקינות שהפופולארים דפדפנים מספר ישנם לכם כידוע ברשת ,לדפדפן תאימות הוא בהם שתתקלו מהדברים אחד לכן !שונות גרסאות מספר יש דפדפן לכל מזאת יתרה אבל )(גוגל כרום ,פיירפוקס ,אקספלורר אינטרנט :מבניהם גם כך יותר ובסיסי יותר ""פשוט שהקוד ככל .האתרים בכל עובד שהוא ולוודא שלכם הקוד את להתאים צורך יש .הדפדפנים לכל להתאימו יותר קל יהיה זהו נושא שיהיה עליכם להכיר בעיקר בתחום הפיתוח של "צד "לקוח (שזה HTML, javascript ,)ועוד ביטוי שכדאי לכם להכיר כאן הוא Cross-browser - המינוח הזה בעצם בא לומר שמדובר ביכולת של הקוד שכתבנו .דפדפנים של רב מספר ידי על להיתמך
- 4. יצירת קובץ HTML הדרך הפשוטה ליצירת קובץ HTML היא דרך פנקס רשימות ,בסיסית בדוגמא הבאה נשתמש בפנקס אשר שלו ובסיומת בשמואותו שומרים הקובץ את כששומרים ואז רשימות פנקס >- עזרים >- להתחל כניסה .בווינדוס מוסיפים . html (נקודה ואז את המילה html ) :לדוגמא Test.html ואז שומרים את הקובץ ומפעילים בעזרת הדפדפן המועדף עליכם ( Chrome, IE, FireFox וכן ..)הלאה לצפייה איך שומרים קובץ בסיומת HTML ראו את התמונה :הבאה 1 . אנחנו קובעים את שם הקובץ ואז מוסיפים נקודה והסיומת HTML . 2 . קובעים את ,הקידוד זה לא צריך לשנות לכם יותר מדי ,עכשיו אתם יכולים לבחור -ב UTF-8 . * התמונה לקוחה מתוך עורך טקסט בסיסי בווינדוס 7 והחלון הפתוח הוא לאחר לחיצה על " Save As ," ניתן לייצר קבצי HTML בכל עורך בסיסי ובכל מערכת הפעלה .בסיסית
- 5. המבנה הבסיסי של דף HTML לכל עמוד ,באינטרנט יש מבנה HTML בסיסי שמכיל את ראש ,הקוד את גוף העמוד ואת מה שעוטף את .הכול <html> <head> <title> שלום עולם ! </title> </head> <body> תוכן הדף - webmasters . co . il </body> </html> פייסבוק של הבית בעמוד הימני המקש על תלחצו אם למשל ,באינטרנט דף כל של השלד הוא הזה הפשוט הקוד למשל ואז " View page source " (או בעברית "הצג קוד )"מקור אז תוכלו לראות את קוד -ה HTML של הדף .הנבחר את הקוד הזה הדפדפן שלכם ,(פיירפוקס ,אקספלורר )כרום ממירים -מ HTML למה שנראה בסוף כמו זה שלהם מקור בקוד מבט להעיף ותנסו רבים לאתרים תכנסו שאם לב שימו .למשתמש ונוח ויפה מעוצב עמוד .קריא לא שהוא בקוד להתקל עלולים ואתם ,קצת מרתיע להראות עלול ?בדפדפן נראה הקוד איך כפי שאתם רואים כל קוד תחום בסוגריים ,משולשים זה על מנת להגדיר את המילה html או head "כ"תג של HTML ולא כמילה .רגילה מכוון שדף שמוגדר בתור HTML הוא דף שמכיל תגים וגם טקסט .רגיל כך כדי שנוכל להבדיל בין מילה רגילה למשל head (ראש )באנגלית אל התג head אנחנו צריכים לתחום אותו בסוגריים .משולשים :הקוד חלקי < html > - כל מה שנכנס בין שני התגיות האלו זה הקוד HTML .שלנו < head > - מכיל לרוב ייבוא קבצים (קריאה לקבצים )נוספים או תגי מטא (נלמד )בהמשך או סקריפטים (למשל של JavaScript .) < title > - התגית הזו מכילה את כותרת הדף (בראש הטאב יש לכם ?כותרת כאן הוא .)מוכנס התגית הזו חייבת להיות בתוך התגית < head > < body > - כאן יכנס רוב הקוד HTML ,שלנו עיצוב ,הטקסט חלוקת הדף ,לחלקים ,טבלאות DIV ים .ועוד חשוב לזכור שאומנם התחביר של תגיות -ה HTML ,פשוט למרות זאת יש לא מעט טעויות ושגיאות כך שאם לא תסגרו תג מסויים /<( tag )> עם ,סלאש או אם למשל תכתבו את השם של התג לא נכון אז ייתכן וחלקים בקוד לא .ומתקדמים מתחילים של טעויות אלו .לעבוד מהם שתצפו כפי יעבדו
- 6. דגשים לקוד HTML תקין כל תג HTML (מלבד תגיות מיוחדות שיצויינו )בהמשך נסגרים בעזרת אותו שם של תג עם סלאש כל תג צריך > -ו <משולשים סוגריים בעזרת להיתחם עלינו לפתוח ולסגור תגיות בסדר ,מתאים זאת אומרת אם פתחנו תג X ואחריו פתחנו תג Y אז אם אנחנו רוצים לסגור את שניהם עלינו קודם לסגור את התג Y (כי הוא בתוך התג X ) ורק אחר כך לסגור את תג -ה X . ההיררכיה .בעמוד תגיות אותם של ההשפעה תחום מה קובעת שהיא מכוון ,חשובה כאן תגיות סגירת של זהו מדריך ,המשך וכל הקוד שיובא במדריך הזה צריך להשתלב בתוך בתגית < body > שבקוד הבסיסי ,שלכם .נלמד שאותן הספציפיות השורות את רק לכם אציג כך ואחר במלואו הקוד כל את בתחילה לכם אתן כאן מלל ואפיון עיצוב :למשל ,הטקסט של צביעה ,פשוט הכי בדבר נתחיל <html> <head> <title> שלום עולם ! </title> </head> <body> <span style = "color: red;" > תוכן הדף </span> </body> </html> * זהו הקוד ,המלא החלק העיקרי הוא בין תגית <-ה body > בקוד הפשוט הזה השתמשנו בתגית < span > והמלל שנמצא בתוך התחום שלה (עד לסגירת )התג הוא ההמלל שיושפע ויצבע בצבע .אדום בתגית < span > הגדרנו color בשם אדום red בתוך -ה attribute שנקרא style .עיצוב על שאחראי :להוסיף שאפשר הגדרות מספר הנה
- 7. ערך תיאור color אפשר להכניס שם צבע או צבע בקוד HEX בעל שש ספרות שמתחיל #-ב family-font עיצוב ,הפונט למשל Arial או David וכדומה font-size מספרי ערך מקבל :למעלהשצויינו האפשרויות שלושת כל את יש שבתוכו פונט התגית עם מלל עיצוב קוד הנה <span style = " color : red ; font - size : 24px ; font - family : david " > ןתוכ הדף </span> שורה וירידת פסקאות כדי לעצב ,פסקאות אפשר אך לא חובה להשתמש בתג < p > בעזרתו הטקסט תחום באזור מסויים בלבד ומאפשר .אוטומטית שורה ירידת יוצר התג בנוסף .בדף הטקסט של יותר קל עיצוב :לקוד דוגמא <p> תוכן הדף </p> <p> webmasters.co.il </p> שימו לב שאם היינו מכניסים את כל המלל לתוך תג < p > אחד אז לא היית ירידת ,שורה אך מכוון שיש שני תגי .אוטומטית שורה ירידת יש לכן פסקה בשביל שתיים או אחת שורה ולרדת הפסקה את לחתוך רוצים אנו שבו מצב להיות יכול הפסקה בתוך זאת למרות לאפשר לקורא נוחות וחלוקה לתת פסקאות .במאמר לכן אז נשתמש בתג < br >/ שימוש בתג הזה יוצר ירידת על שמורה באלכסון קו רק אלא סוגר תג עוד אין הזה שלתג לב שימו - כתוב שהתג הפעמים כמות לפי שורה .שורה ירידת וזה יחידה למטרה נועד אלא דבר שום תוחם לא הזה שהתג מכוון סגירתו :לקוד דוגמא <p> תוכן הדף <br /> כאן כבר תהיה ירידת שורה </p> שימו לב שאנחנו משתמשים כאן בתג פסקה אחד < p > ובאמצע שורת הטקסט יוצרים ירידת שורה עם התג < br >/ .שורה לירידת וגורמים התגיות עם להתנסות כדי בעמוד דברים ולהוזיז ולשנות להוסיף התגים את למחוק יכולים אתם לתרגל כדי .כה עד שלמדנו
- 8. טקסט עיצוב אלמנטים נוספים של העיצוב הם "כתב ,"בולט "כתב "איטלקי ועוד וכל אלו ניתן לעשות בעזרת תגי HTML :דוגמאות מספרהנה פשוטים העיצוב קוד תוצאה <b> תוכן - כתב בולט </b> בולט כתב - תוכן <i> תוכן - כתב נטוי </i> נטוי כתב - תוכן <u> תוכן - קו תחתון </u> תחתון קו - תוכן <h1> כותרת גדולה מאוד </h1> מאוד גדולה כותרת <h2> כותרת קצת יותר קטנה </h2> קטנה יותר קצת כותרת <h7> ןתוכ </h7> כותרת מאוד ,קטנה ובניה לבין הקודם יש את 3,4,5,6 * התג < hX > (איקס מסמל מספר בין 1 -ל 7 ) נועד לרוב לכותרת ,בעמוד למשל כחלק .מאמר לרוב משתמשים בתג מספר אחד ככותרת ,ראשית תג מספר 2 כותרת משנית וכן .הלאה ותמונות קישורים ובלעדם אינטרנט אתר בכל העיקריים המרכיבים הם ,וקישורים תמונות הוא אינטרנט באתרי אינטגרלי מאוד חלק לא יהיה ניתן לקשר לדפים שונים .באתר כך למשל אם יש לנו שני קבצי HTML ואנו מעוניינים לקשר בין אחד לשני אז הדרך היחידה לעשות זאת היא בעזרת ,לינק תג < a .> קישורים יצירת למשתמש לתת לכם מאפשר הדבר דפים של רב מספר עם אינטרנט אתר ליצור לכם מאפשרת קישורים יצירת פרמטרים להעביר ניתן קישורים אותם דרך בנוסף ,דפים של רב מספר פני על שמחולק יותר רב מידע באתר .דינאמיות במערכות הדף הצגת על שישפיעו דינאמיים אחר לדף המשתמש את תוביל והיא ילחצו שעליה המילה זו ,המקשרת המילה חשובים אלמנטים שני יש בקישור וזה .אצלנו אינטרנט דף או אתר או לקשר רוצים אנחנו שאליה הכתובת הוא השני החלק .לאתר מחוץ או באתר נכנס באפשרות של href="link " )הלינק(הקישור יהיה במילה " link ," כשתראו את הדוגמא תבינו את זה טוב .יותר
- 9. :לקוד דוגמא <a href = "http://www.webmasters.co.il" > אתר מדריכי בניית אתרים </a> הקוד הבא יניב תוצאה ,פשוטה המילה "אתר מדריכי בניית "אתרים יתפקד כקישור אל האתר webmasters (עלינו לרשום http //: וגם www כדאי כדי ליצור את .)הקישור :כך נכתוב באתר דף לתת לקשר נרצה אם <a href = "http://www.webmasters.co.il/contact.php" title = " דף יצירת "קשר > דף יצירת קשר </a> שימו לב שכאן הוספנו את האפשרות " title " ובה כתבנו "דף יצירת "קשר (בדומה )ללינק זה אומר שכאשר .לטקסט מעל קטן בחלון לו שיופיע הטקסט זה אז הלינק מעל העכבר של הסמן עם ירחף המשתמש * את הקישורים ניתן לעצב עם אלמנטים שראינו במדריכים קודמים .באתר למשל תג < b > או < u > ,ועוד אתם .לנסות מוזמנים .שלהם הסגנון את לשנות יכולים שאתם כמובן - סגול הוא בהם ביקרתם ואם ,כחול הוא הקישורים של הצבע היסטורית תמונות הצגת בכדי להציג תמונה יש צורך בכתובת מלאה לתמונה וסוג ,התמונה הסוגים הנפוצים הם gif/jpeg/png . הנה דוגמא :תמונה של תגית לקוד <img src = "http://www.webmasters.co.il/uploads/html-design-text.gif" alt = " רתאו התמונה ">
- 10. תוכלו לראות שהתחלנו את התג img ואז התחלנו עם src שבתוכו אנחנו מכניסים את הכתובת של התמונה שבסופה סיומת gif . אבל ,מה בנוסף יש לנו את -ה alt שלו הגדרנו את המילים "תאור "התמונה וזה מה שהוא את שמתאר הטקסטעם ריבוע יראה הוא אז התמונה על העכבר של הסמן עם ירחף הגולש כאשר .עושה .התמונה את ולמנוע התמונה של גודלה את להגביל בשביל ורוחב גובה של אלמנטים לתמונה לקבוע אפשר בנוסף .משמעותי באופן יורד התמונה של שהאיכות מכוון תמונות להקטין מומלצת דרך לא זו .באתר התרחבותה <img src = "http://www.webmasters.co.il/uploads/html-design-text.gif" alt = " רתאו התמונה " height = "100px" width = "100px"> כפי שתראו הוספנו בסוף התג IMG גם גובה וגם רוחב שהם 100 פיקסלים ( px ,) ותוכלו להתנסות ולראות שהתמונה אכן יוצאת מעוותת (זאת מכוון שגודלה המקורי הוא הרבה יותר גדול -מ 100 על 100 .)פיקסלים וקישור תמונה של שילוב לרוב לא נשתמש בשני התגים האלו ביחד ממגוון סיבות אבל בשביל להרחיב את הידע שלכם -ב HTML נלמד גם .אותה <a href = "http://www.webmasters.co.il/contact.php" title = " דף יצירת קשר "> <img src = "http://www.webmasters.co.il/uploads/html-design-text.gif" alt = " תאור התמונה " height = "100px" width = "100px"> </a> קודם כל אנחנו מתחילים בתג a ואז מכניסים לערך href את הכתובת שאליה אנחנו רוצים .להפנות ,אבל ופה מגיע ההבדל במקום טקסט בין שני תגי -ה a אנחנו נכתוב קוד של .תמונה ולבסוף נסגור בעזרת תג -ה a עם .סלאש תמונה למשתמש לספק רוצים אנחנו כאשר לשימוש ניתן זה ,כקישור שמתפקדת תמונה לייצר ניתן הזו בצורה היא נוספת דוגמא .המקורי בגודלה התמונה לפתיחת התמונה על ישירות ולינק ישר ויזואלית שתהיה בינוני בגודל .אחר לעמוד יועבר המשתמש עליו שבלחיצה כפתור לייצר רוצים אנו כאשר
- 11. ומסגרות רשימות עיצוב למשלבאתר מרכזי יותר בחלק מדובר כיום האתר מדף חשוב פחות כחלק בעבר תפקדנו שרשימות למרות .ועוד קישורים הצגת ,מסויים בסדר תוכן הצגת ,תפריטים :לדוגמא קוד <ul> <li> הקפ </li> <li> םמי </li> <li> רסוכ </li> </ul> :להמחשה תמונה .לשנות ורצוי ניתן שאותו ,בסיסי עיצובי סגנון עם מגיעה שהרשימה לראות ניתן מורכבת הרשימה .לעבודה יותר ונוחות מסודרות ורשימות בתפריטים הדף את לעצב נוכל אנחנו הזה הקוד עם בתג ראשון של ul ואחריו אנחנו תוחמים כל רשימה ורשימה בתוך תג li (וכמובן סוגרים הכול בסדר .)הנכון פשוט .מאוד אפשרות נוספת לרשימות היא ע"י החלפת התג ul בתג ol ובמקום ""נקודות זה יספור כל רשימה כמספר .הרשימה את למספר תצטרכו שלא כך אוטומטי באופן :לדוגמא קוד <ol> <li> הקפ </li> <li> םמי </li> <li> רסוכ </li> </ol>
- 12. מסגרות מסגרות זה תרגום די גרוע "ל Iframe " שזה למעשה תג שמאפשר לנו לייבא לאותו הדף הנוכחי דפים אחרים .שלנו האתר בתוךאחר עמוד או אתר של תוכן להציג יכולים אנחנו למשל כך .אחרים מאתרים או באתר :לדוגמא קוד <iframe src = "http://www.webmasters.co.il/" height = "300px" width = "350px" /></iframe> בקוד הזה יש 3 אלמנטים :שונים - src : הוא מכיל את הכתובת שאנחנו רוצים לייבא .לדף אפשר גם לייבא קובץ אחר ולא רק כתובת מלאה למשך page-2.html ,(כלומר הדף השני של .)האתר - height : קובע את הגובה של המסגרתחלון שלנו - width : קובע את הרוחב של החלון .שלנו :נראה זה ככה הגדרתי שלא או נכון הלא בקידוד הקובץ את ששמרתי מכוון קרה זה ,מוזרים ריבועים שיש בתמונה לראות ניתן meta-data עם קידוד .נכון על קידוד נלמד בהמשך .הספר
- 13. טבלאות בעבר ,הרחוק עוד לפני התגיות החדשות של HTML5 ואפילו לפני השימוש -ב div , היינו מעצבים אתרים שלמים בטבלאות -ב HTML . אך עם הזמן התקבעה ההחלטה שעיצוב UI בטבלאות זו אינה הדרך הנכונה להשתמש בתג -ה table . אבל למרות ,זאת ישנם מצבים שבהם טבלאות הן דבר מאוד שימושי - והדוגמא הכי טובה לכך היא כשאר אנו רוצים להציג למשתמש מידע טבלאי ( tabular data ) מידע שמכיל רשומות .ושורות בשביל ליצור טבלה אנחנו נשתמש בתגים :הבאים < table > זה כדי להתחיל ,טבלה < tr > כדי להתחיל שורה חדשה בטבלה <-ו td > כדי להתחיל תא .מסויים למעשה זה מאוד פשוט והנה דוגמא קלה של טבלה עם 2 שורות -ו 2 :רשומות <table> <tr> <td> תא 1 </td> <td>תא 2 </td> </tr> <tr> <td> תא 3 </td> <td> תא 4 </td> </tr> </table> שני בין יכנס טבלה אותה על המידע כל ,טבלה על מכריזים אנחנו הראשונה בשורה :בקוד שורה שורה נתחיל התגים .הללו אחר כך אנחנו מתחילים שורה חדשה בעזרת התג < tr > שבתוכנו נוכל להכניס כמה תאים שרק .נרצה בין התגים של התאים < td > /<-ו td > יכנס ,המלל תוכן כלשהו שאנחנו .רוצים ואפשר להשתמש בכמה תאים שרוצים רק כדאי שאם בשורה אחת יש 2 תאים אז שגם בשורה השניה יהיו 2 תאים וכן ,הלאה אחרת יהיו לנו תאים .רקים אחר כך אנחנו סוגרים את השורה הראשונה עם /< tr > ואז שוב פעם מתחילים שורה חדשה וחוזרים על אותו .תהליך ולבסוף סוגרים את הקוד של הטבלה עם /< table >
- 14. .הטבלה של הסופיתהתוצאה ושל הטבלה קוד של תמונה לכם שיראה קוד והנה שימושית ליותר הטבלה את שיהפכו נוספים ודברים אלמנטים עוד להוסיף אפשר לטבלאות :דברים שלכם הטבלה עם יותר קצת לעשות כיצד <table height = "200px" width = "100%" border = "1px"> <tr> <th> תא 1 </th> <th> תא 2 </th> </tr> <tr> <td> תא 3 </td> <td> תא 4 </td> </tr> <tr> <td> תא 3 </td> <td> תא 4 </td> </tr> </table> בקוד הזה אתם רואים שהוספנו לתג של הטבלה 3 אלמנטים :חדשים אחד זה גובה ( Height ) של 200 ,פיקסלים השני זה רוחב של 100% (יתפרס לרוחב )הדף והשלישי הוא ""מסגרת של פיקסל 1 ( border .) בנוסף הוספנו תג חדש שנקרא < th > שזה פשוט מאוד משמש ""לראש ,הטבלה התוכן שנמצא שם לרוב מיועד לתאר את התוכן שיופיע בתחתית כל שורה ושורה של .טבלה המלל שבתוך th יהיה ממורכז .ובולט
- 15. טפסים .ועוד קניות אתרי,חדשות אתרי ,פורומים כמו באתרים אותם לראות אפשר .טפסים למצוא תוכלו אתר בכל כמעט אנחנו מוצרים של אונליין רכישה לבצע מנת על למשל .מהגולשים ""קלט מידע לקבל אפשר הטפסים בעזרת הרשמה היא טובה דוגמא עוד .ועוד תשלום אמצעי ,משפחה שם ,שם כמו לטופס מידע להקליד מהגולש מבקשים .בהמשך כאן לכם שנראה באלמנטים משתמשים הם גם ,התחברות וטופס לאתרים כל טופס מתחיל בעזרת התגית < form > וכל מה שיהיה תחום בתוך התגית הזו עד לסגירת התגית (עד /<-ל form )> יהיה למעשה המידע שאנחנו נקבל מהמשתמש כשהוא ישלח אותו בעזרת כפתור שאנחנו .ניצור :נראה זה ככה <form action = "test.html" method = "POST"> * הטופס יבוא כאן * </form> לטופס אנחנו מכניסים 2 ערכים :עיקריים - method זה האופן שבו המידע ,ישלח יש שני מצבים :עיקריים post (כרגע בשימוש )שלנו וגם get עליהם .יותר מאוחר נרחיב - action אומר לטופס לאן לשלוח את המידע ,שלנו המשתמש הכניס מידע ועכשיו צריך לשלוח אותו אל test.html .)(למשל
- 16. את לקבל שנוכלכדי משלהם ערכים עם תגים עוד נוסיף לכן ,כלום יהיה לא למעלה הקוד את נכתוב אם עכשיו .מהגולש המידע בדוגמא הבאה אנחנו נשתמש בתג < input > ונגדיר אותו באופן מסויים כדי לקבל מהמשתמש סוגים שונים של .ועוד כפתור ,)כוכבים (עם סיסמה של שדה ,רגיל טקסט למשל מידע <form action = "test.html" method = "POST"> שם משתמש : < input type = "text" name = "username" /> < br /> סיסמה : < input type = "password" name = "pass" /> </form> בשורה הראשונה היא כמו הדוגמה מקודם ולא ,שונתה אחר כך אנחנו יוצרים תג input ראשון ולו הצמדנו 2 :שונים ערכים type - זה סוג הקלט שיתקבל ,מהמשתמש יש סוגי קלטים שונים כאן השתמשנו -ב text רגיל -וב password .)מוסתר להיות שצריך סיסמה שדה זה כי עיגולים או כוכבים יהיה לשדה שיוקלד שהתוכן אומר (שזה name - זה השם של שדה הקלט כדי שנוכל לגשת .אליו כדי לדעת מה המידע שהמשתמש הכניס אנחנו צריכים .יותר מאוחר אליו לפנות כדי לשדה קוראים איך לדעת .התחברות של בסיסי טופס נראה ואיך הטופס של הקוד את בתמונה לראות ניתן את אלמנט -ה name אנחנו ,קובעים ואת אלמנט -ה type ישנם אלמנטים קבועים והנה מספר דוגמאות של טפסים .אינטרנט אתר בכל שימושיים :""רדיו כפתור <form action = "test.html" method = "POST"> זכרנקבה ?< br /> <input type = "radio" name = "sex" value = "male" />זכר <br />
- 17. <input type = "radio" name = "sex" value = "female" />נקבה </form> אתם יכולים לראות -שה type הוא לא מלל או סיסמא כמו הקודמים אלא " radio " אבל ,עכשיו ושימו לב טוב -ה name של שני השדות !זהים שניהם על " sex ." אבל מה ששונה פה הוא "ה value " אחד יהיה " male " זאת אומרת זכר ואחד " female " זאת אומרת .נקבה המשתמש יוכל לסמן רק אחד משני העיגולים האלו - זכר או .ישלח יסמן שהואמה של והערך .נקבה לתג -ה radio יש עוד שימושים :כמו ,סקרים אפשרויות בחירה מרובות אך מוגבלת .לאחד מאפשר זה .רגיל טקסט של הכנסה ולא משניים אחד ,נקודה סימון שהוא בשדה מדובר שפתאום רואים בתמונה או ""זכר או מסמנים המשתמשים גם ככה .מהשתמש מקבלים שאנחנו המידע עם מדוייקים יותר טפסים ליצור לנו לא וזה ""זכר ,"בחור "אני השני "גבר "אני רושם היה אחד חופשי טקסט להם מאפשרים היינו אם אחרת .""נקבה .כולם בין זהה היה :סימון תיבת <form action = "test.html" method = "POST"> סמן סדרות אהובות :< br /> <input type = "checkbox" name = "tv" value = "ricy_morty" /> ריק ומורטי <br /> <input type = "checkbox" name = "tv" value = "survival" />הישרדות <br /> <input type = "checkbox" name = "tv" value = "1vs100" /> אחד נגד מאה </form> בניגוד .אהובות סדרות לסמן ממכם ביקשתי כאן .אחת דוגמא רק זו ,רבים דברים לנו מאפשרת הסימון תיבת לכפתור הרדיו אפשר לסמן כאן יותר מאפשרות אחת אבל בדומה לכפתור הרדיו "-ה name " של כל התיבות סימון
- 18. זהה והוא " tv ." -ה type שלנו הוא checkbox והערך " value " משתנה מאפשרות לאפשרות ריק ,ומורטי .מאה נגד אחד,הישרדות מלבד זאת אפשר להוסיף עוד 2 אלמנטים שונים של checked (מסומן כברירת )מחדל ושל disabled (לא יהיה :הבאה בצורה האלו האלמנטים שני את להוסיף בעצמכם תנסו ,)הזו האפשרות על ללחוץ אפשר checked = "checked" disabled = "disabled" מומלץ שתנסו לשחק עם ,זה את שני האלמנטים האלו אתם יכולים להוסיף איפה שתרצו אחרי המילה input ולפני /< הקלט של הסוגר כמו אחרות תכנות שפות בעזרת רק ""יטופל מהמשתמש לבקש כדי יוצרים שאנחנו שהמידע רק לזכור חשוב php, javascript או ruby כך שכרגע לטפסים האלו אין שימוש רב ללא שפות תכנות צד שרת או צד .לקוח חופשי מלל חופשי טקסט של בשדה נתחיל ,ואתר אתר בכל שלנו הטופס את ששמלאים שונים שדות בעוד נתמקד הזה בחלק תג <-ה textarea .> :לקוד דוגמא הנה <form action = "test.html" method = "POST"> טקסט חופשי עם ירידת שורה : <textarea rows = "25" cols = "40" name = "freetext" ></textarea> </form> התג את מתחילים אנחנו שבה בקוד השלישית השורה היא העיקרית השורה ,ביותר פשוט הזה הקוד < textarea > מכניסים בו מספר אלמנטים ואז סוגרים /<-ב textarea > האלמנטים שיש לנו הם name שקובע את שם השדה ,המדובר cols קובע את הרוחב של השדה -ו rows קובע את הגובה של .השדה בניגוד לאינפוט ( input ) רגיל כאן המשתמש יכול להכניס טקסט רב יותר וזה נועד למערכת ,תגובות פרסום ,פוסטים פרסום דיונים בפורומים .וכדומה אפשר להכניס עוד אלמנטים נוספים כמו disabled - .החופשי השדה של שינוי או עריכה של אפשרות ימנע
- 19. מרשימה בחירה אפשרויות תג מאוד שימושי הוא תג <-ה select > שעובד ביחד עם < option > כדי ליצור רשימה של אפשרויות להציג .לומתאים שהכי מה יבחר הוא שמתוכן למשתמש :לקוד דוגמא הנה <form action = "test.html" method = "POST"> <select name = "city"> <option value = "1" > הנהרי </option> <option value = "2" > תל אביב </option> <option value = "3" > םירושלי </option> <option value = "4" > נס ציונה </option> </select> </form> כאן אנחנו מציעים למשתמש לבחור מתוך רשימה של ""ערים ( City ) כאשר אנחנו מתחילים את הקוד ""רשימה בעזרת התג < select > שאליו הצמדנו אלמנט של " name " )(שם שלו קראנו " city " )(עיר ובתוך התג הזה הכנסנו 4 תגים של אפשרויות < option > ,נהריה תל ,אביב ,ירושלים נס ציונה ולכל אחד מהם ערכים ( value ) שונים -מ 1 עד 4 כדי שנוכל לזהות מה המשתמש בחר אחר .כך לכל option אפשר להכניס את האלמנטים :הבאים value - כמו שאמרנו זה הערך שישלח בטופס באותה מידה אפשר לרשום במקום מספר משהו אחר כמו .מלל selected - במידה ונרצה <-שה option > המסויים שלנו יהיה הברירת מחדל נציב לו את האלמנט .הזה disabled - על מנת לחסום אפשרות מסויימת נציב את האלמנט הזה באחד מתגי -ה option .שנבחר הטופס שליחת החלק החשוב בטופס הוא כפתור ,השליחה שאיתו המשתמש שולח את .הטופס אז נחזור לתג input למרות .כפתור להציג כדי בו נשתמש והפעם הקודמות הדוגמאות בשתי ממנו שסטינו :לדוגמא קוד <form action = "test.html" method = "POST"> <input type = "submit" name = "send" value = " שלח טופס " > </form> בתג input הזה הכנסנו לערך של " type " את המילה " submit " במילים ,אחרות הגדרנו שמדובר בכפתור ולא שדה טקסט או סיסמא כמו בדוגמאות .הקודמות קבענו " send " והערך של -ה value הוא "שלח "טופס שזה מה
- 20. הערך עם הדףעל כפתור לכם ידפיס הזה שהקוד ולראות לנסות מוזמנים אתם .הכפתור על כתוב בעצם שיהיה ."טופס "שלח הפעם שתבחרו העברית לשפה אתר קידוד כידוע לכם אנגלית היא השפה השולטת ורוב השפות השולטות האחרות רובן נכתבות משמאל לימין ( LTR ) אבל שפת הקודש שלנו עברית כתובה מימין לשמאל ( RTL ) שזו בעיה שבמערכות מסויימות וגדולות יכולה להיות בעיה .קלה לא ממש יותר מסובכים בעיצובים לפעמים אך ,פשוטות פעולות מספר ידי על רק עברית עבור האתר את לכוון ניתן לפעמים של UI מורכב - יש צורך בביצוע שינויים גראפיים יותר משמעותיים מכוון שאלמנטים עיצוביים מסויימים מתאימים .התאמה ודורשים האנגלית לשפה לשמאל מימין מלל מלל מימין לשמאל הוא פשוט ,לביצוע כל מה שצריך לעשות זה להגדיר בתג -ה html אלמנט )(מאפיין בשם dir שלו אנחנו נגדיר את המילה rtl שזה אומר Right To Left מימין .לשמאל :בקוד דוגמא <html dir = "rtl"> <head> <title> שלום עולם ! </title> </head> <body> המלל נכתב מימין לשמאל ! </body> </html> כפי שאתם רואים אם תקחו את הקוד הזה לדף -ה HTML שלכם אז אתם תראו שעכשיו המלל שלכם יתחיל מצידו הימני של הדף ולא מצד .שמאל אם תנסו לשנות את הערך של dir אל LTR אז תראו שהמלל יופיע משמאל .לימין .ותלמדו שתתנסו כדי רק זה כשתגיעו לאתרים שמורכבים -מ HTML, CSS ועוד אלמנטים רבים ושונים תראו שכדי ליישר את הטקסט למשל .מאתגר יותר קצת זה אז כלשהו עיצוב או מערכת לתרגם צריכים אתם אם
- 21. לעברית קידוד לקודד נרצהאם ,העמוד של התווים את יקרא הדפדפן כיצד לקבוע לנו שמאפשרת דרך למעשה הוא העמוד קידוד עמוד עבור עברית אז נשתמש בקידוד מסויים ועבור אנגלית נשתמש בקידוד .אחר בתוך תג <-ה head > אתם מאחסנים את ההגדרה של קידוד הקובץ ,שלכם ואת זה עושים עם תג < meta > שעליו נלמד .בהמשך והשני הוא שבזמן שמירת הקובץ אתם גם קובעים קידוד נבחר לרוב ascii שמתאים לקידוד בעברית או UTF-8 שמתאים .יותר גדול המידע של המשקל אך שפה לכל אז כדי לדאוג שהקידוד של הקובץ יהיה תקין לעברית ,ומתאים נשתמשת בתג < meta > ונגדיר אותו לעברית ונכניס אותו בחלק קוד של בין -ה head . ממש מתחת לפתיחת תג <-ה head > נכתוב את שורת הקוד :הבאה <meta http-equiv = "Content-Type" content = "text/html; charset=Windows-1255" /> החלק הכי חשוב זה charset שמוגדר -ל windows-1255 אם למישהו יש ניסיון קודם בקידוד בחלונות אולי יצא להגדיר יצטרכו לא הם שלכם לאתר יכנסו המשתמשים כאשר עכשיו .עברי קידוד זה ,הזה הקידוד את להכיר לכם לזהות ידע הדפדפן אלא )נכון קידוד על מקפידים שלא ישנים באתרים לפעמים שקורה (מה לדף הקידוד את .עברית בקידוד שמדובר החלק הנוסף לגבי הקידוד הוא יצירת הדף החדש בקידוד הנכון שהוא ascii או utf-8 . כדי לשמור קובץ בקידוד :הבאה לתמונה ותגיעו בשם שמירה >- קובץ אל להיכנס אפשר הנכון
- 22. .שנבחר קידוד באיזהשלנו הקובץ את לשמור שאפשר לראות ניתן בתמונה החלק שאנחנו רוצים להתייחס אליו הוא חלק מספר 2 ""קידוד שם ברירת המחדל היא ascii , באפשרותכם לבחור קידוד אחר כמו utf-8 .הפופולארי ואז תלחצו שמירה ,וזהו הקובץ מקודד בצורה .הנכונה מסויים קידוד עם להתחיל עדיף לכן להשתנות עלולים התווים אז הקובץ של קידוד תשנו שאם לדעת חשוב .מורכב קצת להיות שעלול תהליך - המרה לבצע או ,איתו ולהישאר בתמונה שהבאתי לכם ישנו קידוד של utf-8 שגם איתו יצא לכם לעבוד בעתיד (האפשרות האחרונה )בתמונה כדי להשתמש בו תצטרכו לשנות את תג המטא כך שבמקום קידוד עברית יהיה קידוד של utf-8 באלמנט של charset בתוך התג meta . מטא תגי העיקריים על נדבר הזה במדריך אבל רבים מטא תגי יש ,המטא תגי הם אתרים למפתחי חשוב מאוד תג שגולשים כדי באינטרנט חיפוש במנועי קידום של בנושא קשורים גם חלקם .המטא תגי של ביותר והשימושיים .יותר רבה בקלות שלכם האתר את למצא יוכלו
- 23. כל תג מטא בא ישר אחרי תחילתו של תג <-ה head > (או לפני )סגירתו חוץ מכמה תגי מטא יוצאי דופן שאפשר .הדף באמצע גםלהשתמש :מטא תג של למיקום דוגמא הנה <html dir = "rtl"> <head> <meta /> <title> שלום עולם ! - webmasters.co.il </title> </head> <body> webmasters . co . ilטקסט </body> </html> בשורה השלישית של הקוד אפשר לראות < meta >/ שם יבואו כל תגי המטא ,שלנו אז בואו .נתחיל לעברית קידוד .כאן גם הזה המטא תג את לציין רוצה אני אבל הקודם במדריך בעברית קידוד המטא תג על למדנו כבר אומנם יהיה שלו ושהקידוד העברית בשפה בדף שמדובר לדפדפן להסביר בשביל הוא קידוד המטא תג של מטרתו .מג'יבריש להמנע מנת על מותאם <meta http-equiv = "Content-Type" content = "text/html; charset=Windows-1255" /> החלק העיקרי הוא charset שמוגדר לקידוד מסוג windows-1255 שזה קידוד ,עברית בנוסף אפשר להגדיר שם קידודים שונים כמו utf-8 שהוא קידוד של שפות רבות ביחד (לכן הוא גם ""כבד יותר מבחינת משקל .)הקובץ מפתח ומילות הדף תיאור היתה בעבר מטרתם .מזיקים לא הם שבטוח מה אבל שימושיים הם כמה עד לגבי בספק מוטלים אלו מטא תגי מה על להבין כדי האתר בעל ידי על שהוגדרו הדף של העיקריות המפתח מילות את לקרא חיפוש למנוע לאפשר .עוסק הוא נושא ובאיזה מדבר הדף :הדף תיאור של מטא ותג מפתח מילות של מטא לתג קוד דוגמת <meta name = "description" content = " האתר שלנו עוסק במדריכי בניית אתרים ,באינטרנט בואו ללמוד !" /> <meta name = "keywords" content = " בניית ,אתרים ,ללמוד אתרי אינטרנט " />
- 24. בשורה הראשונה הגדרנו ערך של description לאלמנט של סוג התג .מטא ובתוכן שלו הכנסנו תיאור של .הדף בשורה השניה הכנסנו ערך של keywords (מילות מפתח )עיקריות ושם הכנסנו את המילות העיקריות של .הדף את להבין שרוציםחיפוש מנועי של לבוטים נועד בעיקר אלא עצמו בדף יופיע לא הזה שהתוכן רק לציין חשוב .העמוד נושא אחר לאתר העברה או הדף רענון תג מאוד חשוב הוא העברת הגולש למקום אחר תוך X זמן או רענון הדף כל X .זמן את זה נוכל לעשות עם הקוד :הבא <meta http-equiv = "refresh" content = "3" /> הקוד הזה ירענן את הדף כל - 3 שניות (כפי שמוגדר -ב content ) וההגדרה של תג המטא אפשר לראות refresh .חופשי בתרגום ""רענן אומר שזה האתר אל הגולש את נעביר הבא בניסוי ,שלנו באתר מסויים לדף או מסויים לאתר הגולש את יעביר הבא הקוד :שלנו <meta http-equiv = "refresh" content = "3;url=http://www.google.co.il" /> מה ששינינו בקוד או יותר נכון הוספנו זה אלמנט של url עם הכתובת שאליה אנחנו רוצים ,להפנות באותה מידה יכולנו להפנות אל תת דף בצורה :הזו page.html ללא כתובת .מלאה .תנסו לאנדקס לא את להכיר כדאי זאת למרות ,לא וחלקם מבקשים שאתם מה את יכבדו שחלקם בבוטים מוצפת שלנו המרשתת באינטרנט חיפוש בתוצאות שיופיעו רוצים לא שאנחנו בדפים רק אלא בשימוש אינו לרוב שהוא הבא מטא התג .אדמין של ניהול פאנל למשל <meta name = "robots" content = "noindex" /> בתג משימוש להיזהר צריך .בכלל "אותי תאנדקסו "אל חיפוש מנועי של רובוט לכל אומר הזה הפשוט מטא התג זה .לאתר הכניסות בכמות לכם לפגוע וכך חיפוש במנועי שלכם במיקום לפגוע עלול נכון לא שימוש כי הזה מטא .גישה אליהם יקבל אחד שכל נרצה שלא מוסתרים לדפים או פנימיים לעמודים שאמרתי כמו מיועד בעיקר
- 25. מיוחדים תווים לכתוב כךסתם נוכל ולא תווים רצף של העזרה את נצטרך לפעמים אנחנו שלנו באתר מיוחדים תווים להציג כדי התווים רצף עם רק זאת לעשות נוכל אחד מרווח יותר נרצה אם ,הרווח תו היא שימושית הכי הדוגמא .אותם :הבא & nbsp; בואו תעשו ,ניסוי תרשמו 2 שורות כאשר באחת מהן תעשו הרבה פעמים רווח ""רגיל בעורך טקסט שלכם(פנקס לראות ותוכלו )שלמעלה (בקוד רווח של תווים הרצף את פעמים הרבה תכניסו השניה ובשורה )למשל רשימות יהיה כן המיוחד תווים ברצף אבל .בקוד מוצגים כן שהם למרות שעשיתם ""הרגילים הרווחים את יצמצם שהדפדפן .שרצינו הרווח את :שימושיים מיוחדים תווים של רשימה עם טבלה הנה ; ולבסוף המילה או המספר ואז # אז מספרי בקוד מדובר אם ואז & ב מתחיל הקוד תוצאה תאור במספרים קוד באותיות קוד " כפולים מרכאות " " ' יחיד מרכאות ' ' & חיבורוגם סימן & & > ..מ קטן < < < ..מ גדול > > © יוצרים זכויות © © ® שמור סימן ® ® ¼ שבר ¼ ¼ ½ שבר ½ ½ ¾ שבר ¾ ¾ × כפל × × ÷ חילוק ÷ ÷ » חץ » » « חץ « «