תיעוד HTML
מדריך עיון תמציתי ל-HTML, מבוסס דוגמאות. קוראים את המושג, רואים את הקוד, ואז מתרגלים אותו במסלול של Coddy.
להתחיל מסלול HTML מודרךצעדים ראשונים
- Doctype`<!DOCTYPE html>` היא השורה הראשונה בכל מסמך HTML. היא אומרת לדפדפן להציג את העמוד במצב תקני (standards mode) ולא במצב quirks. למדו את התחביר, מה מפעילים doctypes ישנים, ואיך בודקים את המצב.
- תגיותתגיות HTML מסמנות תוכן כדי שהדפדפן יידע מה כל חלק: כותרת, פסקה, קישור, תמונה. למדו איך תגיות ואלמנטים עובדים, לאילו תגיות אין תגית סגירה, איך עובד קינון ובאילו תגיות תשתמשו הכי הרבה.
- מאפיינים (attributes)מאפיינים מוסיפים מידע לאלמנט HTML: לאן קישור מוביל, מה מציגה תמונה, איזו מחלקת CSS חלה עליו. למדו את התחביר, את המאפיינים הגלובליים שכל אלמנט מקבל, את class ו-id, מאפיינים בוליאניים ומאפייני data-*.
- הערותהערה ב-HTML היא טקסט בין <!-- לבין --> שהדפדפן לא מציג. למדו את התחביר, הערות מרובות שורות, הפיכת קוד להערה, קיצור המקלדת בעורך, למה אי אפשר לקנן הערות, ולמה הן אף פעם לא פרטיות.
- התגית divהתגית <div> היא מכל בלוק כללי בלי משמעות משלה. למדו איך לקבץ איתה תוכן, לעצב אותה עם class, לבנות פריסות עם div ו-flexbox, ומתי תגית סמנטית או כפתור הם בחירה טובה יותר.
- Spanהתגית <span> היא מיכל inline כללי: היא עוטפת כמה מילים בתוך שורה כדי שתוכלו לעצב אותן או לגשת אליהן בסקריפט בלי לשבור את השורה. למדו איך להשתמש בה, במה היא שונה מ-div, ומתי תגית ספציפית יותר מתאימה יותר.
טקסט
- כותרות (headings)ב-HTML יש שש רמות כותרת, <h1> עד <h6>, שנותנות לעמוד את המבנה שלו. למדו את גדלי ברירת המחדל, איך לסדר כותרות, כמה תגיות h1 להשתמש, איך לשנות את הגודל שלהן עם CSS ואיך קוראי מסך משתמשים בהן.
- ירידת שורההשתמשו ב-<br> כדי להתחיל שורה חדשה בתוך קטע טקסט. למדו מתי <br> מתאים ומתי עדיף פסקה, איך לשמור את השורות החדשות מהטקסט, איך לאפשר למילים ארוכות להישבר עם <wbr>, ואיך למנוע שבירת שורה.
- רווחיםדפדפנים מכווצים כל רצף של רווחים ב-HTML לרווח אחד. למדו איך להוסיף רווחים נוספים עם , מה עושה רווח בלתי שביר, איך לשמור רווחים וטאבים עם <pre> ו-white-space, ומתי ריווח ב-CSS הוא הכלי הטוב יותר.
- מודגש ונטויהדגישו טקסט ב-HTML עם <strong> או <b>, והטו אותו עם <em> או <i>. למדו באיזו תגית להשתמש מתי, איך לשלב מודגש ונטוי, ואיך להדגיש או להטות טקסט עם CSS במקום.
- קו תחתון וקו חוצההוסיפו קו תחתון לטקסט ב-HTML עם <u> או עם text-decoration של CSS, וקו חוצה עם <s> או <del>. למדו מה כל תגית אומרת, איך <ins> ו-<del> מסמנות שינויים, ולמה קו תחתון על טקסט שאינו קישור מבלבל את הקוראים.
- כתב עילי ותחתיכתבו טקסט עילי עם <sup> וטקסט תחתי עם <sub>: חזקות, מספרים סודרים, סימוני הערות שוליים ונוסחאות כימיות. למדו את השימושים הנפוצים, איך למנוע מהם להרחיק שורות זו מזו, ומתי תו Unicode או MathML מתאימים יותר.
- קו אופקיציירו קו אופקי ב-HTML עם התגית <hr>. למדו מה המשמעות שלה, איך לשנות את הצבע, העובי, הרוחב והסגנון שלה עם CSS, איך לבנות קו מפריד עם טקסט באמצע, ואיך ליצור קו אנכי.
- מרכוז טקסטמרכזו טקסט ב-HTML עם מאפיין ה-CSS text-align: center. למדו איפה לשים אותו, למה הוא לא עובד על span, איך למרכז טקסט אנכית בתוך תיבה, איך ליישר טקסט להתחלה, לסוף או לשני הצדדים, ואיך להזיח פסקאות.
קישורים ותמונות
- קישורים (a href)איך האלמנט <a> יוצר קישורים: המאפיין href, כתובות URL מוחלטות ויחסיות, קפיצה לחלק בעמוד עם #id, קישורי הורדה, כרטיסים שלמים כקישור, והטעויות ששוברות אותם.
- פתיחת קישור בלשונית חדשההוסיפו target="_blank" לקישור כדי לפתוח אותו בלשונית חדשה. העמוד מכסה את rel="noopener" ו-noreferrer, איך להודיע למשתמשים שקישור נפתח בלשונית חדשה, את שאר ערכי target, ואיך עושים את זה מ-JavaScript.
- קישורי אימייל (mailto)צרו קישור שפותח אימייל חדש עם href="mailto:", מלאו את הנושא, הגוף, cc ו-bcc, קודדו אותם נכון, וצרו קישורי חיוג בלחיצה עם tel: ו-sms:.
- כפתור קישורהדרך הנכונה ליצור כפתור שמוביל לעמוד אחר היא קישור שמעוצב ככפתור. ראו למה כפתור בתוך קישור וניווט עם onclick נשברים, מתי כפתור של טופס הוא הבחירה הנכונה, ואיך לעצב ולהשבית כפתורי קישור.
- תמונותאיך מוסיפים תמונה ב-HTML עם התגית <img>: src ו-alt, קביעת גודל התמונה עם width ו-height, תמונות רספונסיביות, חיתוך עם object-fit, כיתובים עם figure, טעינה עצלה, והרווח שמתחת לתמונות.
רשימות וטבלאות
- רשימותאיך יוצרים רשימות ב-HTML: תבליטים עם <ul>, רשימות ממוספרות עם <ol> (start, reversed, אותיות וספרות רומיות), רשימות מקוננות, רשימות הגדרה, ועיצוב או הסרה של התבליטים עם CSS.
- טבלאותאיך יוצרים טבלה ב-HTML: שורות עם <tr>, תאים עם <td>, תאי כותרת עם <th> ו-scope, כיתובים, thead, tbody ו-tfoot, פסי זברה, וטבלאות שנגללות במסכים קטנים.
- גבולות טבלהאיך מוסיפים גבולות לטבלת HTML עם CSS: קווים בודדים עם border-collapse, border-spacing, קווי שורות בלבד, גבולות פנימיים בלבד, פינות מעוגלות, ולמה המאפיין border מיושן.
- colspan ו-rowspanמזגו תאים בטבלה לרוחב עמודות עם colspan ולאורך שורות עם rowspan. למדו איך לספור תאים כדי שהטבלה תישאר ישרה, לבנות כותרות מקובצות, ולשמור על טבלאות עם תאים ממוזגים קריאות לקוראי מסך.
טפסים
- טפסים (form)איך בונים טופס ב-HTML: האלמנט form, מאפייני name, action ו-method (GET מול POST), קיבוץ עם fieldset ו-legend, אימות מובנה עם required ו-pattern, וטיפול בשליחה ב-JavaScript.
- סוגי inputכל הסוגים של התגית <input> ב-HTML במקום אחד: text, email, password, number, range, תאריך ושעה, color, file, hidden וכל השאר, עם מה שכל אחד מאמת, המקלדת שהוא פותח בטלפונים, והמאפיינים המשותפים להם.
- כפתור (button)איך יוצרים כפתור ב-HTML עם האלמנט <button>: שלושת הסוגים (submit, button, reset), שליחת ערך עם הטופס, כפתורים מושבתים, אייקונים ועיצוב CSS ששומר על טבעת המיקוד.
- תיבת סימון (checkbox)איך יוצרים תיבת סימון ב-HTML עם <input type="checkbox">: תוויות, המאפיין checked, מה הטופס שולח כשהיא מסומנת וכשהיא לא, קבוצות של תיבות סימון, בחירת הכל עם המצב indeterminate, ועיצוב.
- כפתורי רדיואיך כפתורי רדיו עובדים ב-HTML: קיבוץ עם המאפיין name, בחירת ברירת מחדל עם checked, קבוצות חובה, קריאת הערך הנבחר ב-JavaScript, התנהגות מקלדת, ועיצוב שלהם כעיגולים מותאמים או ככרטיסים.
- רשימה נפתחת (Select)איך יוצרים רשימה נפתחת ב-HTML עם <select> ו-<option>: ערכים, אפשרות ברירת מחדל או placeholder, required, קבוצות אפשרויות, בחירה מרובה, קריאה והגדרה של הערך ב-JavaScript, ועיצוב החץ.
- Textareaאיך יוצרים שדה טקסט מרובה שורות עם <textarea>: rows ו-cols, טקסט ברירת מחדל בין התגיות, שינוי גודל וגדילה אוטומטית, maxlength עם מונה תווים, ירידות שורה בטקסט שנשלח, ועיצוב.
- Labelאיך האלמנט <label> נותן שם לשדה בטופס: חיבור עם for ו-id או עטיפת השדה, אזור לחיצה גדול יותר לתיבות סימון ולכפתורי רדיו, רמזים והודעות שגיאה, תוויות מוסתרות, והטעויות ששוברות את החיבור.
HTML סמנטי
- HTML סמנטיHTML סמנטי פירושו לבחור תגיות לפי מה שהתוכן הוא, לא לפי איך שהוא נראה. למדו את תגיות הפריסה הסמנטיות (header, nav, main, article, aside, footer), מה הן נותנות לקוראי מסך ולמנועי חיפוש, ואיך לבדוק את מבנה העמוד.
- Header (כותרת עליונה)האלמנט <header> מכיל את הפתיחה של עמוד או של קטע: לוגו, כותרת, ניווט, שם הכותב. למדו איך לבנות header לאתר, במה <header> שונה מ-<head> ומכותרות, איך משתמשים בו בתוך מאמרים, ואיך הופכים אותו לדביק.
- Footer (כותרת תחתונה)האלמנט <footer> סוגר עמוד או קטע: זכויות יוצרים, פרטי קשר, קישורים, מידע על הכותב. למדו איך לבנות footer לאתר עם עמודות קישורים, איך להשאיר אותו בתחתית של עמוד קצר, ואיך footer עובד בתוך מאמרים.
- Navהאלמנט <nav> מסמן בלוק של קישורי ניווט מרכזיים. למדו איך בונים סרגל ניווט עם <nav> ורשימה, איך מסמנים את העמוד הנוכחי, איך נותנים תווית לכמה nav באותו עמוד, ואיך יוצרים כפתור תפריט למובייל.
- Sectionהאלמנט <section> מקבץ תוכן בנושא אחד תחת כותרת משלו. למדו מתי להשתמש ב-<section>, מתי <article> או <div> מתאימים יותר, איך השלושה מקוננים זה בזה, ואיך section עם תווית הופך לציון דרך.
Head ותגיות meta
- תגית titleהאלמנט <title> נותן לעמוד שם בלשונית הדפדפן, בסימניות ובתוצאות החיפוש. למדו איפה הוא נכתב, כמה ארוך הוא צריך להיות, במה הוא שונה מ-<h1> ומהמאפיין title, ואיך משנים אותו עם JavaScript.
- Meta Viewportתגית ה-meta viewport אומרת לטלפונים לפרוס את העמוד ברוחב המסך במקום ברוחב של מחשב. למדו את התגית הסטנדרטית, מה כל ערך עושה, למה CSS רספונסיבי תלוי בה, ובאילו ערכים לא להשתמש.
- הפניה (Redirect)הפנו עמוד אחד לאחר עם תגית meta refresh ב-HTML רגיל, עם JavaScript או בשרת. למדו את התחביר של meta refresh, איך לרענן עמוד אוטומטית, למה הפניית 301 בשרת היא הבחירה הטובה יותר, ומה מנועי חיפוש עושים עם כל אחת.
- FaviconFavicon הוא האייקון הקטן בלשונית הדפדפן. למדו את תגית ה-link שמוסיפה אותו, אילו קבצים וגדלים לספק (ICO, SVG, PNG, apple-touch-icon), איך יוצרים favicon מ-SVG או מאימוג'י, איך משנים אותו עם JavaScript, ולמה אייקון ישן ממשיך להופיע.
- המאפיין langהמאפיין lang אומר לדפדפנים, לקוראי מסך ולכלי תרגום באיזו שפה כתוב התוכן. למדו איפה לשים אותו, באילו קודים להשתמש (en, en-US, pt-BR), איך לסמן ביטוי בשפה אחרת, ומה הוא משנה באופן גלוי.
מדיה ורכיבים אינטראקטיביים
- התגית iframeהאלמנט <iframe> מציג עמוד אינטרנט אחר בתוך העמוד שלכם. למדו את המאפיינים שצריך (src, title, width, height), איך מטמיעים סרטוני YouTube ומפות, איך הופכים iframe לרספונסיבי, איך sandbox מגביל את מה שהוא יכול לעשות, ולמה חלק מהאתרים מסרבים להיטען בתוכו.
- תגית videoהאלמנט <video> מנגן קובצי וידאו עם הנגן המובנה של הדפדפן. למדו את הסימון, את המאפיינים החשובים (controls, autoplay, muted, loop, playsinline, poster, preload), פורמטים חלופיים עם <source>, כתוביות עם <track>, גודל רספונסיבי ושליטה בניגון עם JavaScript.
- התגית audioהאלמנט <audio> מנגן קובצי קול עם הנגן המובנה של הדפדפן. למדו את הקוד, את המאפיינים (controls, autoplay, loop, muted, preload), באילו פורמטים להשתמש, למה autoplay עם קול נחסם, ואיך לבנות כפתור ניגון משלכם עם JavaScript.
- details ו-summaryהאלמנטים <details> ו-<summary> יוצרים קטע מתקפל בלי JavaScript: ה-summary תמיד גלוי ולחיצה עליו מציגה או מסתירה את השאר. למדו את הקוד, את המאפיינים open ו-name, אקורדיונים, עיצוב החץ ואת האירוע toggle.
