HTML למתחילים: למד לקודד HTML היום

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


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

במדריך זה אנו מכסים את היסודות בצורה (יש לקוות) קל להבנה, מושלמים למתחילים המוחלטים. עם זאת, אנו לא נעצרים בבסיס היסודות – אפילו מנהלי אתרים מנוסים ימצאו טיפים שימושיים להרחבת הידע שלך בנושא HTML. אנו נצלול אל XHTML, DHTML, והדברים החדשים ביותר ב- HTML5.

HTML למתחילים

Contents

היסטוריה קצרה של HTML 1-4

HTML הומצא על ידי טים ברנרס-לי בסוף שנות השמונים ותחילת שנות התשעים. המהדורה “הציבורית” הראשונה הייתה בשנת 1991. היא התבססה על שפת סימון קודמת, SGML (Standardised General Markup Language).

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

ההיפר-קישור מאפשר לכל מסמך להפנות לכל מסמך אחר, ומספק גישה מיידית למסמך אחר. היפר-קישורים הם שהופכים את האינטרנט לרשת ולא רק ספרייה או מסד נתונים.

ה- IETF תפס HTML כסטנדרט ופרסם את הצעת ה- HTML הראשונה בשנת 1993. HTML 2.0, המפרט הרשמי הראשון הראשון שוחרר בשנת 1995. עד 1997 W3C השתלט על ניהול הדרישות של התקן, ו- HTML 3.2 שוחרר..

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

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

לצד HTML 4.0 היה פרויקט קשור בשם XHTML. זה שוחרר לראשונה בשנת 2000 ו 2001, כהטמעה מבוססת XML של HTML 4.0. מכיוון של- XML ​​היה תחביר מחמיר יותר מ- HTML, וניתן היה לאמת אותו בקלות על ידי מנתח XML, היה נהוג לחשוב שהצגת XHTML תאלץ מחברי תוכן באינטרנט ליצור מסמכים מדויקים יותר..

לרוב זה לא קרה. בפועל, XHTML – יחד עם שלושת זני ה- HTML4, והשונות הפרועה בעיבוד הדפדפנים – תרמו לבלבול הכללי ביחס למה שהיה ולא היה “רגיל” HTML..

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

HTML כללי

HTML כללי

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

יסודות HTML

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

מה זה HTML?

HTML הוא שפת סימון היפר-טקסט, פורמט ליצירת מסמכים ודפי אינטרנט. זה במקור הומצא בראשית שנות התשעים על ידי טים ברנרס-לי, והתבסס על שפת סימון קדומה יותר בשם SGML (Standard Generalised Markup Language), שהתבססה על פורמט קודם יותר שנקרא פשוט GML (Generalised Markup Language) שפותח ב- IBM ב- שנות השישים.

HTML מורכב בעיקר מזוגות תואמים של תגים עם סוגרי זווית המקיפים טקסט בעל משמעות אנושית (כמו זה). התגים מספקים משמעות, הקשר ומציגים מידע לטקסט שהם מקיפים.

מהי שפת סימון?

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

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

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

אני רוצה להפוך את המילים האלה למודגשות [סוף מודגשות] ו [התחל נטוי] את המילים האחרות האלה נטוי [סוף נטוי].

אשר בתיאוריה צריך לייצר משהו כמו:

אני רוצה להכין המלים האלה נועזות והמילים האחרות האלו נטוי.

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

בדוגמה שלמעלה יש הרבה בעיות עם זה, וממציאי HTML (ו- SGML ו- GML) העלו משהו דומה, אבל הרבה יותר טוב:

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

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

אני רוצה להכין המלים האלה נועזות ו מילים אחרות אלה נטוי.

אני רוצה להכין המלים האלה נועזות והמילים האחרות האלו נטוי.

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

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

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

HTML הוא, בבסיסו, דבר לא יותר מסובך מאשר קבוצה של תגי סימון מוגדרים.

מהו היפר-טקסט?

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

המושג “היפר” של קישור פנימי וחיצוני היה כה מהפכני לאופן שבו התוכן מסודר באינטרנט, עד שהמילה מופיעה במספר מקומות:

  • HTML הוא “שפת הסימון HyperText”
  • http: // מייצג “פרוטוקול העברת HyperText
  • קישור מדף לדף נקרא “היפר-קישור”, ותכונת הנתונים המציינת לאן קישור מצביע נקראת “היפר-הפניה”.

היכן ואיך משתמשים ב- HTML?

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

זה יכול לשמש גם לסוגים אחרים של מסמכים, כמו ספרים אלקטרוניים.

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

האם עלי ללמוד HTML כדי להפעיל את האתר שלי?

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

אם אתה פשוט משתמש בפלטפורמת בלוגים, בונה אתרים או מערכת ניהול תוכן (CMS) שהוקמה על ידי מישהו אחר, יתכן שתצליח להסתדר בלי לדעת HTML כלשהו – ישנם עורכים “גרפיים” זמינים שמאפשרים להוסיף תוכן. לבלוג הדומה לכתיבה ב- Microsoft Word או בדוא”ל.

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

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

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

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

בשורה התחתונה ב- HTML

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

אלמנטים ותגיות HTML

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

מבנה התגים

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

אלמנט זה מתחיל ומסתיים ב- "חזק" תגית.

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

href ="http://example.com">זה קישור. התג הוא "א" ל "עוגן," והתכונה href (hyper reference) מציינת לאן הקישור מצביע.

מספר תגים לא מופיעים בזוגות תואמים, מכיוון שהם משמשים להכנסת משהו, במקום לתאר טקסט. אלה נקראים תגיות “ריקות” או “בטלות”, והנפוצה ביותר היא זו המשמשת להכנסת תמונה. מאפיין src משמש לציון כתובת האתר של התמונה.

src ="images / html למתחילים-ללמוד-קוד-html-today.png" />

שימו לב שאין תג סגירה, ולכן אין טקסט סגור. הקלעים ממש לפני סוגר הזווית הסופית (/> ) משמש ל”סגירה עצמית “של התג. זה לא נדרש לחלוטין, אבל זו תזכורת טובה שכל מה שלאחר מכן לא ייסגר. (זה נדרש ב- XHTML, שנדון בהמשך מאמר זה.)

ישנם עוד כמה תגים ריקים. שניים ישרים קדימה ושכיחים.

  • מכניס שבירת קו.
  • מכניס מפריד כלל אופקי (קו).

אחרים לא מכניסים משהו חזותי, אלא משמשים לספק מידע על הדף עצמו.

rel ="גיליון סגנונות" סוג ="טקסט / css" href ="נושא" />

שם ="תיאור" תוכן ="כותרת עמוד זה." />

בנוסף, התג (המשמש להוספת Javascript לדף) יכול להיות ריק, אך הוא לא צריך להיות.

(מידע נוסף על תגיות יינתנו בהמשך במדריך זה.)

ברמת חסימת לעומת inline

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

חסימת אלמנטים

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

), חטיבות () וכותרות (

,

, וכו).

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

זה דיווה.

עם זאת, זה לא תמיד נעשה, במיוחד עם כותרות:

זו כותרת העמוד

זה קטע עיקרי

חלק מהתוכן בפסקה.

ניתן לקנן אלמנטים ברמת החסימה, אך חלק מאלמנטים ברמת החסימה אינם יכולים להכיל אלמנטים אחרים ברמת החסימה:

כותרת של מאמר

הפסקה הראשונה במאמר.

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

אלמנטים מוטבעים

אלמנטים מוטבעים הם אלמנטים המשמשים בטקסט. מודגש ( ), נטוי () וקישורים () הם כולם רכיבים מוטבעים.

אלמנטים מוטבעים נקראים לעיתים אלמנטים “ברמת span”. יש גם אלמנט גנרי ברמת תוחלת, המכונה פשוט טווח (). זה לא עושה המון בפני עצמו, אך ניתן להשתמש בו ליצירת סוגים מותאמים אישית של תצוגת טקסט, באמצעות אלמנטים.

class ="טקסט מיוחד">טקסט זה מיוחד.

(עיין בסעיף CSS למידע על יצירת class ="טקסט מיוחד" מוצג בפורמט מיוחד.)

מתישהו זה לא הגיוני

תמונות ( ) מרגישים כמו אלמנטים ברמת חסימת – הם מלבניים, בעלי מידות מוגדרות ולרוב מוצגים מחוץ לשטף הטקסט.

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

ישנם נושאים מוזרים אחרים כמו זה, והם יובאו בהמשך במדריך זה כשיעלו.

עוד על תכונות

כמעט כל תג אלמנט יכול לכלול תכונות. לאלמנטים רבים יש מערך תכונות ספציפי בו הם תומכים (כמו ותכונה src =), אך ישנם כמה אלמנטים הנתמכים באופן גלובלי על ידי כל סוגי האלמנטים.

שני סוגים חשובים של תכונות הם מחלקה ומזהה.

href ="http://example.com" class ="דוגמה-קישור" id ="link27">לתג עוגן זה שלוש תכונות.

תכונות כיתה

תכונות כיתה משמשות לסימון אלמנט אחד או יותר כשייכים ל”כיתה “או לקבוצה ספציפית – ניתן להשתמש בהם להצגת כולם באותה צורה.

לדוגמה, מקובל להשתמש ברשימה לא מסודרת (

    ) כתפריט, וכדי להפוך את פריט הרשימה (
  • ) שמצביע על הדף הנוכחי נראה שונה מכל הקישורים האחרים באותה רשימה.

    class ="תפריט">
    class ="פריט בתפריט">
    href ="/בית">בית

  • class ="פריט נוכחי">
    href ="/על אודות">על אודות

    class ="פריט בתפריט">
    href ="/איש קשר">איש קשר

אלמנט יכול להכיל יותר מכיתה אחת. מספר כיתות מופרדות על ידי רווחים בתוך אלמנט הכיתה.

class ="כובע טיפה ראשון">
זו הפסקה הראשונה והיא גם חלק משיעור הטיפוס.

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

ב- CSS, JavaScript ושפות אחרות, המחלקה של אלמנט מציינת בנקודה לפני השם.

/ * CSS * /

.ראשון {
צבע ירוק;
}

פירושו של קוד CSS לעיל אומר שבתוך כל אלמנט שיש בו מחלקה ראשונה, צבע הטקסט אמור להיות ירוק.

תכונה מזהה

תכונת ה- ID פועלת באופן דומה לתכונה Class, אך היא שונה מבחינה רעיונית. במקום לציין את החברות באלמנטים בקבוצה, זה מזהה את אותו אלמנט באופן ייחודי. מסיבה זו, יכול להיות רק אלמנט אחד עם כל מזהה ספציפי בכל דף נתון.

id ="כותרת העמוד">זו כותרת העמוד

לעתים קרובות משתמשים במזהים לצורך השפעה על תצוגה, ומשתמשים לעתים קרובות יותר למטרות פונקציונליות.

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

  1. href ="#הקדמה">הקדמה
  2. href ="#history_of_topic">היסטוריה של הנושא

id ="הקדמה" class ="כותרת מדור">מבוא

טקסט של פרק היכרות.

id ="היסטוריה_על_טופיק" class ="כותרת מדור">

קצת היסטוריה בנושא זה.

שימו לב שהקישורים לקטעים כוללים את שם התג, מראש עם שלט ה- hash או הקילו (#). זוהי הדרך הסטנדרטית להתייחס למזהה של אלמנט:

/ * CSS * /

#הקדמה {
גודל גופן: 14px;
}

תכונות אחרות

לכל תג HTML יש קבוצה משלו של מאפיינים זמינים הקשורים למטרה הספציפית שלהם. לדוגמה, התג, המגדיר היפר-קישור, כולל את התכונה href (hyper-reference), המציין כתובת URL המקושרת אליה.

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

יש גם מספר תכונות “גלובליות” – תכונות שכל אלמנט יכול להיות בעל. אלה יכוסו ביתר פירוט בהמשך, ככל שהשימושים בהם הופכים רלוונטיים יותר.

תגיות תגובה

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

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

מתי להשתמש

ו

ה

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

אלמנט בכל עמוד.

בדף הבית ובדף האינדקס של הבלוג שלך, עדיף להכניס את כותרת האתר שלך ל

תגית, וכותרות של מאמרים באינדקס בלוג בפנים

תגיות.

עם זאת, בדף של מאמר בודד, כותרת הפוסט או המאמר עצמו צריכים להיות בתוך הדף

עם הכותרת של האתר בתווית

או אפילו

תגית.

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

תגית.
ארגון היררכי

זה (קל) טוב ל- SEO, וגם טוב מאוד לקוראים, לחלק מאמרים לקטעים הגיוניים ולהשתמש בתגי כותרות מתאימים בתוכן המאמר. יש להשתמש בתגי כותרות באופן היררכי – אם

עוקב אחר

תג, זה אמור להיות הכותרת עבור קטע כפוף.

כתוביות

כותרת עם כתובית צריכה לא השתמש בשני תגי כותרת שונים:

במקום זאת, הכניסו את כל הכותרת והכתובית לתג כותרת בודד והשתמשו בתג אחר כדי להגדיר את הקשר:

הכותרת העיקרית של מאמר זה:
כותרת המשנה של אותו מאמר

הכותרת העיקרית של מאמר זה: class ="כתוביות">כותרת המשנה של אותו מאמר

כותרות על ווידג’טים

קטעי סרגל צידי, או ווידג’טים, זקוקים לכותרות, אך אלה בדרך כלל לא רלוונטיים מבחינת תוכן (SEO). רוב המעצבים המודעים משתמשים

תגיות למטרה זו, שמורות

,

, ו

עבור תוכן רלוונטי למילות מפתח.
 

הודעות האחרונות

  • href ="#">כותרת הודעה
  • href ="#">כותרת הודעה
  • href ="#">כותרת הודעה

ארכיון

  • href ="#">יוני 2015
  • href ="#">מאי 2015
  • href ="#">אפריל 2015

עם זאת, אם יש לך באופן קבוע כל כך הרבה תת-חלקים בתוכן העמוד שלך שאתה צריך להשתמש בו

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

במסמך ארוך במיוחד, כדאי מאוד לאפשר קישור לא רק לדף בכללותו, אלא לקטע ספציפי..

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

המועמד הטבעי לקישורים כאלה הם תגיות כותרות, מכיוון שהם משמשים לזיהוי תחילת הקטעים.

כל מה שצריך בכדי להפוך את העבודה הזו הוא להוסיף ייחודי מזהה תכונה לאלמנט הכותרת. קישורים לקטע זה הם פשוט כתובת האתר של הדף, מצורפת עם סימן ה- hash ( # ) ואת תעודת הזהות.




 id ="קצת כותרת">חלק מהכותרת באמצע העמוד
href ="http://example.com/page#some-headline">לחץ כאן כדי להגיע לשם.
  • זה רע.
  • זה שגוי.
  • זה לא נתמך.
  • רשימה מסודרת

    רשימות מסודרות הן רשימות הממוספרות או אותיות. האלמנט החיצוני הוא

      , וה
    1. תג משמש שוב לכל פריט.

      1. אוספים תחתונים.
      2. ???
      3. רווח.
      1. אוספים תחתונים.
      2. ???
      3. רווח.

      ה

        אלמנט תומך במספר תכונות שמשנות את אופן הפירוט של הרשימה.

        ניתן להשתמש בתכונה מסוג כדי לשנות את ספרות ברירת המחדל בערבית (1, 2, 3) לאותיות או לספרות רומיות (אותיות קטנות או אותיות קטנות).

        סוג ="אני">
      1. הספרה הרומית הקטנה 1.
      2. הספרה הרומית הקטנה.
      3. הספרה הרומית הקטנה 3.
      1. הספרה הרומית הקטנה 1.
      2. הספרה הרומית הקטנה.
      3. הספרה הרומית הקטנה 3.

      האפשרויות לסוג הן:

      • 1 - ספרות ערבית (1, 2, 3) - זוהי ברירת המחדל.
      • A - אותיות גדולות (A, B, C)
      • א - אותיות קטנות (א, ב, ג)
      • I - ספרות רומית הון (I, II, III)
      • i - ספרות רומיות קטנות (i, ii, iii)

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

      התחל ="10">
    2. שוקולד
    3. וניל
    4. שמן מנוע
    סוג ="אני" התחל ="8">
  • טלספורוס
  • היגנוס
  • פיוס
  • אניקטוס
    1. שוקולד
    2. וניל
    3. שמן מנוע
    1. טלספורוס
    2. היגנוס
    3. פיוס
    4. אניקטוס

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

    מחוץ לשער ההתחלה!

    התחל ="-3">
  • חכה לזה.
  • חכה לזה.
  • חכה לזה.
  • ללכת!
  • עשר הסיבות המובילות

    התחל ="10" הפוך>
  • כי.
  • ולכן לכן.
  • QED
  • וכו.
  • מחוץ לשער ההתחלה!

    1. חכה לזה.
    2. חכה לזה.
    3. חכה לזה.
    4. ללכת!

    עשר הסיבות המובילות

    1. כי.
    2. ולכן לכן.
    3. QED
    4. וכו.

    דברים שיש לשים לב לשתי הדוגמאות הללו:

    1. תכונת ההתחלה יכולה להיות שלילית.
    2. גם אם הרשימה מתהפכת, ערך ההתחלה הוא הערך ראשון מספר לרשימה.
    3. התכונה ההפוכה אינה צריכה לציין ערך. הסיבה לכך היא שיש לה רק שני ערכים אפשריים: נכון (נוכח) או שקר (נעדר).
    4. רשימת העשירייה העליונה (או הספירה לאחור דומה) אינה צריכה לציין תכונת התחלה אם היא מסתיימת ב- 1, שתמיד תהיה המספר האחרון ברשימה הפוכה אלא אם כן צוין אחרת. הדוגמה שלמעלה לא הכילה למעשה עשרה פריטים, ולכן היה צורך לציין.
    5. התנהגות ברירת המחדל היא להגדיל את המספר עבור כל פריט ברשימה שמצליח. לכן, אם אתה רוצה "לספור לאחור" ממספר שלילי, עליך לעשות זאת לא כלול את התכונה ההפוכה.
    רשימות תיאור / הגדרה

    רשימות תיאור (או רשימות "הגדרה", כפי שהן נקראות יותר ") הן מעט שונות מרשימות מסודרות ולא מסודרות. הם משמשים כדי לספק רשימת מונחים עם תיאורים, למשל במילון מונחים.

    כל הרשימה עטופה בתג. כל מונח ברשימה מסומן בתג ("מונח הגדרה"), וכל מונח עוקב אחר אלמנט אחד או יותר ("תיאור הגדרה").

    סוגי רשימות

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

    סוגי רשימות

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

    השימוש הברור ברשימת תיאור הוא מילון מונחים או מילון, אך זה אינו השימוש הסטנדרטי היחיד.

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

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

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

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

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

    זה ייראה רע

    1. פריט ראשון
    2. פריט שני
      1. סעיף משנה א.
      2. תת-פרק ב.
        1. תת-פריט i.
        2. תת-פריט ii.
        3. תת-פרק III.
      3. סעיף משנה ג.
    3. פריט שלוש

    הנה איך אתה צריך לעשות את זה

    1. פריט ראשון
    2. פריט שני
      1. סעיף משנה א.
      2. תת-פרק ב.
        1. תת-פריט i.
        2. תת-פריט ii.
          1. בדרך למטה בהיררכיה.
          2. האם מישהו זקוק לרמות הרשימה הרבות הזו?
            1. זה נהיה מגוחך.
        3. תת-פרק III.
      3. סעיף משנה ג.
    3. פריט שלוש

    רשימות מקוננות יכולות לערבב סוגי רשימות.

    זוהי רשימה מסודרת:
    1. עוגות.
    2. פשטידות.
    3. העוגה היא שקר.
    זוהי רשימה לא מסודרת המציגה סוגי רשימות:
    • רשימות מסודרות
    • רשימות לא מסודרות
    • רשימות תיאור
    זוהי רשימה לא מסודרת המקוננת בתוך רשימה מסודרת, שנמצאת בתוך רשימת התיאור הזו:
    1. הפריט הראשון.
    2. הפריט השני.
    3. הפריט השלישי, שהוא הרשימה המקוננת.
      • סכין
      • מזלג
      • כף
      • Spork
      • מקלות אכילה
    4. פריט רביעי זה כאן רק כדי למסגר טוב יותר את הרשימה המקוננת.
    זוהי רשימה מסודרת:
    1. עוגות.
    2. פשטידות.
    3. העוגה היא שקר.
    זוהי רשימה לא מסודרת המציגה סוגי רשימות:
    • רשימות מסודרות
    • רשימות לא מסודרות
    • רשימות תיאור
    זוהי רשימה לא מסודרת המקוננת בתוך רשימה מסודרת, שנמצאת בתוך רשימת התיאור הזו:
    1. הפריט הראשון.
    2. הפריט השני.
    3. הפריט השלישי, שהוא הרשימה המקוננת.
      • סכין
      • מזלג
      • כף
      • Spork
      • מקלות אכילה
    4. פריט רביעי זה כאן רק כדי למסגר טוב יותר את הרשימה המקוננת.

    יש לציין כי לא ניתן לקנן רשימות בתוך רכיבי הפסקה (

    ). הסיבה לכך היא שכל הרשימות הן אלמנטים ברמת חסימת, ופסקאות (שגם הן חסימות) יכולות להכיל רק אלמנטים ברמת תוחלת.

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

    חסום הצעות מחיר וציטוטים מוטבעים

    אם אתה מצטט מישהו או משהו, השתמש באחד משני האלמנטים של ציטוט ב- HTML.

    חסימות

    המזלג נפוץ הרבה יותר. הסיבה לכך היא מוסכמה טיפוגרפית רגילה:

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

    להיות או לא להיות, זו השאלה.

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

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

    ציטוט ="http://www.gutenberg.org/ebooks/2265"> להיות או לא להיות, זו השאלה.
    - המלט, ויליאם שייקספיר

    להיות או לא להיות, זו השאלה.
    - המלט, ויליאם שייקספיר

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

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

    ציטוט ="http://www.gutenberg.org/ebooks/2265">

    להיות או לא להיות, זו השאלה.

    href ="http://www.gutenberg.org/ebooks/2265">המלט, ויליאם שייקספיר

    הצעת מחיר יכולה לכלול גם אות, שעשוי לשמש להצגת הצעת המחיר עצמה, או לציון מידע על כותרות מקוריות.

    הצעת מחיר מוטבעת

    האלמנט המצטט פחות נפוץ הוא הציטוט המוצג, .

    השורה האהובה עלי בהמלט היא כשהוא אומר, ציטוט ="http://www.gutenberg.org/ebooks/2265"> להיות או לא להיות, זו השאלה.

    השורה האהובה עלי בהמלט היא כשהוא אומר, להיות או לא להיות, זו השאלה.

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

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

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

    היפר-קישורים

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

    האלמנט נקרא "עוגן" מכיוון שהוא משמש לעיגון URL מקושר לטקסט ספציפי בעמוד. (זאת בניגוד לתג שמחבר את המסמך כולו, ולא קטע טקסט ספציפי.)

    הטקסט בתוך האלמנט נקרא "טקסט עוגן", וכתובת האתר המקושרת מוגדרת בתכונה href.

    href ="http://example.com">זהו קישור ל- example.com זהו קישור ל- example.com

    יחד עם ה- href, לתג מספר תכונות חשובות.

    • היעד מציין באיזה חלון (או כרטיסיית הדפדפן) לפתיחת הקישור. ברירת המחדל היא אותו חלון. אם אתה רוצה לפתוח כרטיסייה חדשה יעד ="_ ריק".
    • כותרת מגדירה את הסבר על הכלים או את טקסט הרחף של קישור. זה מוצג בקופץ קטן כשהמשתמש מעביר את טקסט העוגן. זה שימושי לספק מידע נוסף על מה המשתמש עומד ללחוץ עליו.
    • rel מדווח על קשר בין המסמך המקושר למסמך הנוכחי. יש לו כמה ערכים אפשריים:
      • חלופי - למסמך המקושר יש אותו תוכן כמו המסמך הנוכחי, אך בפורמט חלופי. משמש לרוב לקישור לעדכוני RSS.
      • מחבר - המסמך המקושר הוא עמוד הפרופיל של מחבר המסמך או המאמר הנוכחי.
      • סימניה - קישור לנקודה ספציפית במסמך (למשל בעת יצירת תוכן עניינים בדף).
      • עזרה - המסמך המקושר מספק תיעוד עזרה למסמך הנוכחי.
      • רישיון - המסמך המקושר הוא טקסט הרישיון למסמך הנוכחי.
      • הבא - המסמך המקושר הוא החלק הבא בסדרה מתוצרת. דפדפנים מסוימים יביאו מראש את תוכן המסמך המקושר כדי להאיץ את העיבוד כאשר המשתמש סוף סוף לוחץ עליו.
      • nofollow - המסמך המקושר הוא לא מאושרים מאת מחבר המסמך הנוכחי. משמש למניעת מתן תועלת SEO לדף המקושר. מערכות הערות מוסיפות זאת לעתים קרובות לקישורים שהוזנו על ידי המשתמש כברירת מחדל.
      • noreferrer - משמש למניעת שליחת מידע מפנה בכותרת בקשת HTTP כאשר המשתמש לוחץ על הקישור. בדרך כלל בקשת HTTP תציין מאיפה המשתמש מגיע (העמוד הנוכחי). זה מבקש מלקוח הדפדפן להשמיט מידע זה.
      • prefetch - דומה לזה הבא, אך מבלי לרמוז על מערכת יחסים רציפה ממשית. זה מבקש שהדפדפן יביא את תוכן העמוד המקושר לפני שהמשתמש ילחץ עליו, כך שהניווט לדף הבא נראה מיידי.
      • prev - ההיפך של הבא, ערך זה מציין שהמסמך המקושר הוא העמוד הקודם בסדרה עילגית. דפדפנים מסוימים עשויים לבחור מראש את התוכן.
      • חיפוש - העמוד המקושר מספק ממשק במיוחד לחיפוש במסמך הנוכחי ובמסמכים קשורים.
      • תג - המסמך המקושר מספק הקשר לנושא העמוד הנוכחי.

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

    לדוגמה: גוגל משתמשת ב- rel ="מחבר" קישור (אם מקושר לפרופיל Google+) כדי להציג קישורים לתוכן אחר של אותו מחבר בתוצאות חיפוש. - חיפוש התמונות של גוגל כולל את היכולת לחפש ברישיון, למצוא תוכן מורשה של Creative Commons לשימוש חוזר. תכונה זו תלויה, בחלקה, ב- rel ="רישיון" תכונה המשמשת בקישורים ל- Creative Commons ולרישיונות פתוחים אחרים. מספר מנועי חיפוש ואתרי צבירת חדשות משתמשים בטקסט העוגן ובדף ההפניה של rel ="תגית" קישור לקביעת הנושא של דף נתון.

    ניתן להשתמש בתג ה- rel גם במיקרו-פורמטים, שהם דרכים פשוטות לכלול מידע סמנטי נוסף בתכונות HTML קיימות (בדרך כלל rel ו- class).

    לדוגמא, ה- XFN Microformat מציע להשתמש במאפיין rel בעת קישור לדפי הבית או הפרופיל של אנשים איתם יש לך קשר..

    בחודש הבא אבלה סוף שבוע שלם בכנס עם href ="http://example.com/kami-profile" rel ="עמית לעבודה">קאמי. הכנס נמצא בסמוך לעיר מגוריי, אז אני מקווה שאוכל לאכול ארוחת צהריים עם href ="http://example.com/dave-profile" rel ="הורה">אבא שלי.

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

    קישוט טקסטים

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

    נועז

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

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

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

    • מציע שהטקסט העטוף "מודגש" איכשהו.
    • פשוט נטוי, ללא שום משמעות סמנטית ספציפית.
    קו תחתון

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

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

    המופע יחל בשעה 19:00 בערב, 20:00 בערב.

    המופע יחל בשעה 19:00 בערב, 20:00 בערב

    קו דרך

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

    • מיועד לטקסט שיש להבין אותו כמוחק או משתנה, והוא משמש לתגית כאמור לעיל.
    • משמש לטקסט שאינו נכון או שאינו רלוונטי עוד.

    יש גם תג שהיה זמין ב- HTML4.

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

    קוד מקור וטקסט לא מעובד

    ישנם שני אלמנטים המשמשים להצגת טקסט או קוד שאינך מעוניין שיוענקו על ידי הדפדפן, אלא פשוט יוצגו "גולמיים" למשתמשים.

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

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

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

    שינוי גודל הטקסט

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

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

    האלמנט הגנרי

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

    אני לא בטוח למה אין תג סרקזם. אולי זה פשוט לא נחוץ כי class ="סרקזם">הטון כל כך קל לקריאה באינטרנט.

    / * CSS * / .סרקזם { צבע סגול; סגנון פונט: נטוי; }

    .סרקזם {
    צבע סגול;
    סגנון פונט: נטוי;
    }

    אני לא בטוח למה אין תג סרקסט. אולי זה פשוט לא נחוץ מכיוון שהטון כל כך קל לקריאה באינטרנט.

    מפרידים

    HTML מספק שני תגים להוספת הפרדה בטקסט.


    • מכניס הפסקה לקו
    • מכניס קו אופקי

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

    הפסקות קו שימושיות במיוחד כאשר אתה זקוק לפריצות קו קשה אך פתרונות אחרים - כמו ריבוי

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

    ורדים הם אדומים
    סיגליות הן כחולות
    החריזה קשה
    HTML5 מדהים.

    רחוב Main 123.
    פורט וורת ', TX 76148

    ורדים הם אדומים
    סיגליות הן כחולות
    החריזה קשה
    HTML5 מדהים.

    רחוב Main 123.
    פורט וורת ', TX 76148

    זה קל יותר ממה שנראה

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

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

    HTML מבני

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

    מבנה מסמך HTML בסיסי

    מסמכי HTML (דפי אינטרנט) צריכים לבצע כמה כללים מבניים בסיסיים על מנת לעבוד כראוי ולהיקרא במדויק על ידי דפדפני האינטרנט..

    המסמך חייב להתחיל בהכרזת DOCTYPE. ישנם מספר תקני HTML שונים (וקשורים) שנמצאים בשימוש במהלך השנים, ולכן חשוב לציין איזה סוג מסמך (באיזה תקן HTML) המסמך שלך משתמש.

    לרוב, כיום ה- DOCTYPE הנכון הוא פשוט HTML. אז מסמך HTML צריך להתחיל עם:

    html>

    זה לא בדיוק תג HTML במובן הראוי, אלא הוא אומר לדפדפן כיצד לפרש את כל התגים האחרים הבאים.

    לאחר הצהרת DOCTYPE, תג הפתיחה הוא התג. סגירת התג תהיה השורה האחרונה של המסמך.

    בתוך תג ה- HTML תוכלו לציין את שפת המסמך (במקרה זה, אנגלית).

    html> lang ="he"> . . . . .

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

    html> lang ="he"> . . . . . .

    זהו המבנה הבסיסי של כל מסמך HTML. הכל בעיקרון אקסטרה.

    תכנים של

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

    מטא נתונים

    התג משמש מספר פעמים בכדי להגדיר מטא נתונים שונים (נתונים על המסמך).

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

    קידוד תווים

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

    לרוב, בימים אלה, ברצונך לציין את ערכת התווים UTF-8.

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

    charset ="utf-8">
    תיאור, מחבר ומילות מפתח

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

    שם ="תיאור" תוכן ="דף על HTML."> שם ="מילות מפתח" תוכן ="HTML, תגים, מטא נתונים"> שם ="מחבר" תוכן ="אדם מייקל ווד">

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

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

    כותרת

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

    זו כותרת העמוד.

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

    או

    תג כותרת) בגוף. תוכן הכותרת מוצג בדרך כלל בכרטיסייה בראש חלון הדפדפן.

    זה לא רעיון טוב לקנן תגיות אחרות בכותרת (כמו או ) מכיוון שלרוב הם לא יוצגו כראוי.

    במסמך HTML ניתן לציין כותרת אחת בלבד.

    קישורי CSS

    גיליונות סגנונות, שנכתבו בשפת CSS (Cascading Style Sheet), הם מסמכים נפרדים המספקים מידע על הצגת עמוד בדפדפן. מידע על גדלים, צבעים, מיקום וגופנים כלולים בגליון הסגנון. שמירה על פרטים אלה בנפרד ממסמך ה- HTML הראשי מקל על שינוים מבלי להשפיע על תוכן המסמך עצמו.

    גיליונות סגנון CSS מקושרים בתוך מסמך ה- HTML, באמצעות התג. התכונה href מציינת את כתובת האתר של קובץ גיליון הסגנון, והתכונה rel מציינת שהקישור הוא קישור לגליון סגנונות (ישנם סוגים אחרים של קישורים).

    href ="/css/style.css" rel ="גיליון סגנונות">
    מידע RSS

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

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

    rel ="לסירוגין" סוג ="יישום / rss + xml" כותרת ="RSS" href ="/feed.xml" />

    ה- rel ="לסירוגין" תכונה פירושה שכתובת האתר המקושרת מכילה אותו תוכן (רשימת פוסטים בבלוג), אך בפורמט חלופי. מאפיין type מציין את סוג הפורמט (RSS).

    מידע אחר

    הרבה פרטים נוספים על מסמך מופיעים לעתים קרובות ב-. אלה יובאו ביתר פירוט בהמשך, בסעיפים הרלוונטיים.

    קישורי Javascript

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

    דוגמה למסמך HTML עם השלמת הרכיב

    html> lang ="he"> charset ="utf-8"> שם ="תיאור" תוכן ="דף על HTML."> שם ="מילות מפתח" תוכן ="HTML, תגים, מטא נתונים"> שם ="מחבר" תוכן ="אדם מייקל ווד"> href ="/css/style.css" rel ="גיליון סגנונות"> מדריך ל- HTML rel ="לסירוגין" סוג ="יישום / rss + xml" כותרת ="RSS" href ="/feed.xml" /> . . . .

    תכנים של

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

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

    • כותרת
      • לוגו / מיתוג / כותרת האתר
      • ניווט ראשי
      • סרגל חיפוש
    • תוכן עיקרי
      • מאמר אחד או יותר
      • כותרת המאמר
      • תוכן המאמר
      • מטא נתונים של מאמר (מחבר, תגיות, תאריך פורסם)
    • סרגל צידי
      • ווידג'טים
      • ניווט משני (ארכיונים לפי תאריך, קטגוריה או תג)
    • כותרת תחתונה
      • מידע על זכויות יוצרים / רישיון
      • ניווט שלישוני
      • פרטים ליצירת קשר
      • כתובת / טלפון
      • קשרים חברתיים

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

    האלמנט

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

    זה הביא להרבה תגים מקוננים.

    class ="כותרת"> class ="לוגו"> class ="nav-main"> class ="סרגל חיפוש"> class ="תוכן הדף"> class ="עיקרי"> class ="מאמר"> class ="כותרת מאמרים">

    כותרת המאמר

    class ="מאמר-מטא"> class ="תוכן המאמר">

    מאמר.

    תוכן.

    class ="כותרת תחתונה של המאמר"> class ="הערות"> class ="סרגל הצד"> class ="כותרת תחתונה"> class ="רישיון"> class ="פרטים ליצירת קשר">

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

    טבלאות HTML

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

    מהם טבלאות?

    טבלה ב- HTML היא דרך להציג "נתונים טבליים" - מידע שניתן לייצג בגיליון מורחב. טבלאות ב- HTML הן טבלאות דו ממדיות עם שורות ועמודות.

    שם פרטי שם משפחה גיל
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41

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

    אם נתונים הגיוניים כגיליון אלקטרוני, הם מועמדים טובים לטבלה.

    תחביר טבלה

    תחביר בסיסי

    כל הטבלאות משתמשות ב-

    אלמנט, שורת הטבלה ( ) אלמנט, ותא הטבלה ( ) בכל פעם.

    ) אלמנט.

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

    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41
    כותרות טבלה: אפשרות 1

    לרוב רצוי להציב כותרות בראש השולחן. אחת הדרכים לעשות זאת היא להחליף תאי טבלה רגילים ( ) עם תאי כותרת טבלה ().

    שם פרטי שם משפחה גיל
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41
    שם פרטי שם משפחה גיל
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41

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

    כותרות טבלה (וגוף): אפשרות 2

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

    כאשר זה נעשה, שאר התוכן נעטף בדרך כלל באלמנט גוף-גוף ().

    שם פרטי שם משפחה גיל
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41

    פעולה זו מאפשרת לעצב את כל שורת הכותרות.

    thead { צבע רקע: שחור; צבע לבן; מודגש; }

    # thead דוגמה thead {
    צבע רקע: שחור;
    צבע לבן;
    מודגש;
    }

    שם פרטי שם משפחה גיל
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41

    אולי יותר מעניין, זה גם מאפשר לעצב את גוף השולחן מבלי להשפיע על הראש.

    tbody tr: ילד לידה (מוזר) { צבע רקע: #eee; } tbody tr: ילד לידה (אפילו) { צבע רקע: #fff; }

    # tbody דוגמה שליש {
    צבע רקע: שחור;
    צבע לבן;
    מודגש;
    }
    # tbody-דוגמה tbody tr: ילד לידה (מוזר) {
    צבע רקע: #eee;
    }
    # tbody-דוגמה tbody tr: ילד לידה (אפילו) {
    צבע רקע: #fff;
    }

    שם פרטי שם משפחה גיל
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41
    כותרת עליונה

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

    thead { צבע רקע: שחור; צבע לבן; מודגש; } tbody tr: ילד לידה (מוזר) { צבע רקע: #eee; } tbody tr: ילד לידה (אפילו) { צבע רקע: #fff; } tfoot { צבע רקע: # 222222; צבע לבן; סגנון פונט: נטוי; } שם פרטי שם משפחה גיל
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41
    גיל ממוצע 34.67

    # tfoot-דוגמה לשלושה {
    צבע רקע: שחור;
    צבע לבן;
    מודגש;
    }
    # tfoot-דוגמה tbody tr: ילד לידה (מוזר) {
    צבע רקע: #eee;
    }
    # tfoot-דוגמה tbody tr: ילד לידה (אפילו) {
    צבע רקע: #fff;
    }

    # tfoot-דוגמה tfoot {
    צבע רקע: # 222222;
    צבע לבן;
    סגנון פונט: נטוי;
    }

    שם פרטי שם משפחה גיל
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41
    גיל ממוצע 34.67
    עמודות טבלה

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

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

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

    סגנון ="צבע רקע: ציאן;"> סגנון ="צבע רקע: צהוב;"> סגנון ="צבע רקע: אדום;"> שם פרטי שם משפחה גיל
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41
    גיל ממוצע 34.67
    שם פרטי שם משפחה גיל
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41
    גיל ממוצע 34.67

    כל אחת בדוגמה לעיל משתרעת על עמוד אחד של תאי טבלה. אם היינו רוצים להחיל סגנונות על שתי עמודות השמות כיחידה אחת, נוכל ליצור את שתי העמודות התאיות.

    span ="2" סגנון ="צבע רקע: ציאן;"> סגנון ="צבע רקע: צהוב;"> שם פרטי שם משפחה גיל
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41
    גיל ממוצע 34.67
    שם פרטי שם משפחה גיל
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41
    גיל ממוצע 34.67

    יש בעיות בשימוש בסימון, למרבה הצער:

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

    בגלל סוגיות אלה, יש תועלת מוגבלת לעיצוב שולחן.

    ישנם שני פתרונות נפוצים לכך: תכונות כיתתיות ובוחרים בגילאי לידה.

    כדי להשתמש בתכונות מחלקה, פשוט החל את הכיתה הספציפית לעמודה על כל אחת מהן (ו / או) אלמנט.

    class ="col1">שם פרטי class ="col2">שם משפחה class ="col3">גיל class ="col1">ג'ון class ="col2">סמית class ="col3">31 class ="col1">ג'יין class ="col2">לבן class ="col3">32 class ="col1">טרי class ="col2">ג'ונס class ="col3">41 class ="col1"> class ="col2">גיל ממוצע class ="col3">34.67

    כמובן, זה מוסיף סימון רב שאינו נדרש בהחלט. דרך טובה יותר תהיה להשתמש בבוררי ה- CSS מהילד הראשון, הילד הראשון והילד האחרון.

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

    thead { צבע רקע: שחור; צבע לבן; מודגש; } tbody tr: ילד לידה (מוזר) { צבע רקע: #eee; } tbody tr: ילד לידה (אפילו) { צבע רקע: #fff; } tfoot { צבע רקע: # 222222; צבע לבן; סגנון פונט: נטוי; } td: ילד ראשון { מודגש; } td: ילד אחרון { font-family: מונוספייס; צבע אדום; שם פרטי שם משפחה גיל
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41
    גיל ממוצע 34.67

    # פסאודוקולס-דוגמה לשלש {
    צבע רקע: שחור;
    צבע לבן;
    מודגש;
    }
    # פסאודוקולס-דוגמא tbody tr: ילד לידה (מוזר) {
    צבע רקע: #eee;
    }
    # פסאודוקולס-דוגמא tbody tr: ילד בן (אפילו) {
    צבע רקע: #fff;
    }

    # pseudocolumns-דוגמה tfoot {
    צבע רקע: # 222222;
    צבע לבן;
    סגנון פונט: נטוי;
    }

    # pseudocolumns-דוגמא td: ילד ראשון {
    מודגש;
    }

    # pseudocolumns-דוגמא td: ילד אחרון {
    font-family: מונוספייס;
    צבע: # a20000;
    }

    # pseudocolumns-דוגמא tfoot td: ילד אחרון {
    צבע: # ff3e3e;
    }

    שם פרטי שם משפחה גיל
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41
    גיל ממוצע 34.67
    שוברים את הרשת: מוטת השורה והקולספאן

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

    לדוגמה, בטבלת הגילאים שלנו יש שורה תחתונה עם תווית עבור "גיל ממוצע." זה לא צריך להיות מעוך לתוך העמודה השנייה. זה ייראה טוב יותר אם התווית תשתרע על שני התאים הראשונים בעמודה האחרונה.

    colspan ="2"> גיל ממוצע: 34.67

    # colspan-דוגמה לשלש {
    צבע רקע: שחור;
    צבע לבן;
    מודגש;
    }
    # colspan-דוגמה tbody tr: ילד לידה (מוזר) {
    צבע רקע: #eee;
    }
    # colspan-דוגמה tbody tr: ילד לידה (אפילו) {
    צבע רקע: #fff;
    }

    # colspan דוגמה tfoot {
    צבע רקע: # 222222;
    צבע לבן;
    סגנון פונט: נטוי;
    }

    שם פרטי שם משפחה גיל
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41
    גיל ממוצע 34.67

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

    שם פרטי שם משפחה גיל קבוצת אנשים rowspan ="2">דור שבילי אורגון colspan ="2">גיל ממוצע
    ג'ון סמית 31
    ג'יין לבן 32
    טרי ג'ונס 41 דור X
    34.67

    # rowspan-דוגמה מחודשת {
    צבע רקע: שחור;
    צבע לבן;
    מודגש;
    }
    # rowspan-דוגמה tbody tr: ילד לידה (מוזר) {
    צבע רקע: #eee;
    }
    # rowspan-דוגמה tbody tr: ילד לידה (אפילו) {
    צבע רקע: #fff;
    }

    # rowspan דוגמה tfoot {
    צבע רקע: # 222222;
    צבע לבן;
    סגנון פונט: נטוי;
    }

    שם פרטי שם משפחה גיל קבוצת אנשים
    ג'ון סמית 31 דור שבילי אורגון
    ג'יין לבן 32
    טרי ג'ונס 41 דור X
    גיל ממוצע 34.67

    מה טבלאות לא?

    זה לא באמת צריך להיאמר, אבל:

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

    לפעמים זה עדיין נושא מכיוון שלפני עידן דפדפני האינטרנט מבוסס הסטנדרטים וסימון סמנטי, אנשים רבים השתמשו בטבלאות (עם הרבה כללי סגנון מורכבים) כדי לפרוס מסמכי HTML..

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

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

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

    מקרה קצה טבלה - תרגומים זה לצד זה

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

    # התופת-פתיחה {
    גבול: אין;
    מרווח גבול: 10 פיקסלים;
    }

    Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura,
    צ'ה לה דיריטה דרך סמריטה בעידן.
    אמצע הדרך למסע חיינו
    מצאתי את עצמי בתוך יער חשוך,
    כי המסלול היישר אבד.
    אהי קוונטו בעידן dir qual ¨ cosa dura
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    אה לי! כמה קשה לדבר
    מה היה היער הפראי, המחוספס והחמור,
    שבעצם המחשבה מחדשת את הפחד.
    טנט ¨ אמארה צ'וקוקו p פי מאטה;
    ma per trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    כל כך מריר, המוות הוא מעט יותר;
    אבל של הטוב לטפל, שם מצאתי,
    אדבר על הדברים האחרים שראיתי שם.

    זהו, כמובן, רק שולחן עם מעט סטיילינג:

    # התופת-פתיחה { גבול: אין; מרווח גבול: 10 פיקסלים; } id ="פתיחת התופת"> Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura,
    צ'ה לה דיריטה דרך סמריטה בעידן.
    אמצע הדרך למסע חיינו
    מצאתי את עצמי בתוך יער חשוך,
    כי המסלול היישר אבד.
    אהי קוונטו בעידן dir qual ¨ cosa dura
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    אה לי! כמה קשה לדבר
    מה היה היער הפראי, המחוספס והחמור,
    שבעצם המחשבה מחדשת את הפחד.
    טנט ¨ אמארה צ'וקוקו p פי מאטה;
    ma per trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    כל כך מריר, המוות הוא מעט יותר;
    אבל של הטוב לטפל, שם מצאתי,
    אדבר על הדברים האחרים שראיתי שם.

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

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

    שקול את ה- HTML הבא:

    id ="canto-1"> class ="איטלקית"> id ="it-1" class ="p1"> Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura,
    צ'ה לה דיריטה דרך סמריטה בעידן.
    id ="it-2" class ="p2"> אהי קוונטו בעידן dir qual ¨ cosa dura
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    id ="it-3" class ="p3"> טנט ¨ אמארה צ'וקוקו p פי מאטה;
    ma per trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    class ="אנגלית"> id ="en-1" class ="p1"> אמצע הדרך למסע חיינו
    מצאתי את עצמי בתוך יער חשוך,
    כי המסלול היישר אבד.
    id ="en-2" class ="p2"> אה לי! כמה קשה לדבר
    מה היה היער הפראי, המחוספס והחמור,
    שבעצם המחשבה מחדשת את הפחד.
    id ="en-3" class ="p3"> כל כך מריר, המוות הוא מעט יותר;
    אבל של הטוב לטפל, שם מצאתי,
    אדבר על הדברים האחרים שראיתי שם.

    באמצעות CSS כדי לצוף את שתי השפות אחת ליד השנייה, וב- JS כדי להבטיח שכל זוג פסקאות (en-1 ו- it-2 וכו ') יהיה באותו הגובה, ניתן ליצור אפקט זהה מבלי לפנות לטבלה- פריסה מבוססת.

    יתרונות:

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

    חסרונות:

    • דורש JavaScript
    • יש להזין כל פסקה בסימון.

    שולחנות בעולם האמיתי

    סגנונות ברירת המחדל לטבלאות הם ממש לא מושכים, ולכן לעתים רחוקות משתמשים בהם. מרבית מסגרות ממשק המשתמש הקדמיות (כמו Bootstrap ו- Skeleton) מספקות סטיילינג לשולחן ברירת מחדל משופר מאוד.

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

    שולחנות הם בעלי עוצמה

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

    טפסי HTML

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

    יסודות טופס

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

    דוגמה בסיסית מאוד עשויה להיראות:

    אפילו בצורה פשוטה זו אנו יכולים לראות שיש למשתמש הזדמנות להזין נתונים (שם פרטי ושם משפחה) ולשלוח נתונים לשרת.

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

    איך עובד טופס

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

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

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

    מה שקורה עם הנתונים המבוקשים הוא נושא לתסריטים בצד השרת (PHP, Ruby וכו '), אז אנחנו לא מודאגים מכך.

    בקשות HTTP ושיטות טופס

    טפסים יכולים לשלוח שני סוגים שונים של בקשות:

    • הודעה
    • לקבל

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

    __ ההבדל הסמנטי בין POST ל- GET

    GET היא בקשת HTTP המוגדרת כברירת מחדל והיא אותה סוג בקשה המשמשת את הדפדפן בעת ​​הקלדת כתובת בשורת הכתובת. זו בקשה "להשיג" משהו.

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

    ההבדל הטכני

    בעת שימוש בבקשת GET, פרמטרי הקלט כלולים בכתובת האתר.

    http://example.com/search?term=thing+i+am+searaching+for

    עם בקשת POST, פרמטרי הקלט אינם כלולים בכתובת האתר, אלא נשלחים בגוף הבקשה.

    ההבדל כאן הגיוני בהתבסס על המשמעות של כל סוג של בקשה:

    • בקשת GET מבקשת משאב ספציפי, המוגדר על ידי כתובת האתר. לכן יש לכלול את פרטי הבקשה בכתובת האתר, מכיוון שפרטים אלה מגדירים איזה משאב מבקשת הבקשה בפועל.
    • בקשת POST שולחת הודעה לכתובת מסוימת. הכתובת מוגדרת בכתובת האתר, וההודעה מוגדרת בגוף הבקשה.
    מתי להשתמש ב- POST ו- GET בטפסים

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

    אינדיקציות אחרות GET היא הבחירה הנכונה:

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

    אם משתמשים בטופס להגשת מידע, סביר להניח ש POST הוא הבחירה הנכונה.

    אינדיקציות אחרות לכך ש- POST היא הבחירה הנכונה:

    • לא סביר מאוד ששני משתמשים שונים יגישו מידע זהה.
    • לא סביר מאוד שמשתמש בודד יגיש את אותו המידע בדיוק לא פעם.
    • הטופס משמש להגשת מידע לאתר, ולא לשם השגת מידע ממנו.
    • קישור ישירות לדף התגובה יהיה חסר משמעות.
    • בסיס הנתונים שלך שונה לאחר הגשת הטופס ממה שהיה קודם.

    בנוסף, ישנן שתי סיבות מדוע יש להשתמש ב- POST, גם אם בקשת GET הגיונית יותר מסיבות אחרות:

    • מסיבות אבטחה עדיף לא להכניס את פרמטרי הקלט לכתובת האתר.
    • אורך ה- URL המשתמש בבקשת GET יעלה על 2000 תווים.
    היכן להגדיר POST או GET

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

    שיטה ="לקבל"> שיטה ="הודעה">

    שיטת ברירת המחדל היא GET, מה שהביא לשימוש רבים לאומללים ב- GET כאשר POST הייתה הבחירה הנכונה. אל תסתמך על ברירת המחדל - השתמש בשיטה הנכונה למצבך.

    פעולה בטופס - כתובת האתר המבוקשת

    טופס מקבל משאב (מוגדר על ידי כתובת אתר) או מפרסם מידע למשאב (מוגדר על ידי כתובת אתר).

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

    פעולה ="search.php" שיטה ="לקבל"> פעולה ="ערוך-post.php" שיטה ="הודעה">

    בדומה לתכונות href ו- src, כתובת האתר יכולה להיות יחסית (פעולה ="search.php") או מוחלט (פעולה ="http://example.com/search.php").

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

    תכונות אחרות של

    התכונות הבאות חלות על האלמנט:

    • accept-charset - מגדיר את מערך התווים המשמש להגשת נתוני טופס. ברירת המחדל זהה להגדרת תו המסמכים, כך שלרוב אין צורך בכך.
    • פעולה - כתובת אתר היעד להגשת טופס. הסביר לעיל.
    • השלמה אוטומטית - מאפשר השלמה אוטומטית בדפדפנים הנתמכים. הערכים פועלים או כבויים. ערך ברירת המחדל פועל. אפשר לעקוף הגדרה זו על רכיבי טופס בודדים.
    • enctype - מציין כיצד לקודד נתוני טפסים. זה חל על טפסי POST בלבד. הערכים הם:
      • יישום / x-www-form-urlencoded - כל התווים מקודדים לפני שנשלחו. רווחים מומרים לסמלי + ​​ותווים מיוחדים מומרים לערכי ASCII HEX. זו ברירת המחדל.
      • multipart / form-data - התווים אינם מקודדים. זה נדרש אם אתה משתמש במעלה קבצים בטופס שלך.
      • text / רגיל - רווחים מומרים לסמלי +, אך תווים מיוחדים אינם מקודדים.
    • שיטה - GET או POST
    • שם - שם הטופס. זה בדרך כלל רעיון טוב לכלול אחד כזה, ואין סיבה שהיא לא יכולה להיות זהה לזה.
    • novalidate - מציין כי אין לאמת אוטומטית את נתוני הטפסים בעת הגשתם. תכונה זו אינה מקבלת שום ערך. (היזהר בזה.)
    • יעד - שווה ערך לתכונת היעד בקישורי עוגן (), תכונה זו מציינת היכן יש להציג את התגובה מהטופס..
      • _self - פתיחת תגובה באותו חלון. זו ברירת המחדל.
      • _blank - פותח את התגובה בחלון חדש או בכרטיסייה חדשה.
      • _parent - פותח את התגובה בחלון ההורה או במסגרת.
      • _top - פתיחת התגובה בגוף החלון המלא.
      • framename - באפשרותך גם לציין את שם המסגרת לפתיחת התגובה, אם פתחת בעבר ושמת את המסגרות בדף..

    שימוש באלמנטים בטופס

    שמות אלמנטים

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

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

    פעולה ="" שיטה ="הודעה"> עבור ="שם פרטי">שם פרטי סוג ="טקסט" שם ="שם פרטי" id ="שם פרטי"> עבור ="שם פרטי">שם משפחה סוג ="טקסט" שם ="שם משפחה" id ="שם משפחה"> סוג ="שלח">
    תוויות אלמנטים

    האלמנט חשוב מאוד, מכיוון שהוא מגדיר את התווית עבור כל אלמנט צורה.

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

    פעולה ="" שיטה ="הודעה"> סוג ="טקסט" שם ="שם פרטי" מציין מיקום ="שם פרטי"> סוג ="טקסט" שם ="שם משפחה" מציין מיקום ="שם משפחה"> סוג ="שלח">

    למרות שזה עשוי להיראות טוב יותר עבור העיצוב שלך, ישנם שתי בעיות שמישות חמורות:

    • משתמשים בתוויות על ידי קוראי המסכים כדי לספר למשתמשים עיוורים למה השדות מיועדים.
    • לא כל הדפדפנים תומכים בתכונה “מציין מקום”.

    ללא תיוג נכון, אתה מסתכן כי חלק מהמשתמשים אינם יכולים למלא את הטופס שלך.

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

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

     עבור ="שם פרטי">שם פרטי
     סוג ="טקסט" שם ="שם פרטי" id ="שם פרטי">

    זה משרת שתי מטרות:

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

    בנוסף לשימוש ב- ל תכונה, תווית יכולה להיות קשורה לקלט על ידי הכללת הקלט בתוך ה- אלמנט.

    
    
    צבע

    אדום

    כחול

    ירוק

    הגדרת ערכי ברירת מחדל

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

     פעולה ="" שיטה ="הודעה">
     עבור ="שם פרטי">שם פרטי
     סוג ="טקסט" שם ="שם פרטי" id ="שם פרטי"ערך="ג'ון">
     עבור ="שם משפחה">שם משפחה
     סוג ="טקסט" שם ="שם משפחה" id ="שם משפחה" ערך ="סמית">
     סוג ="שלח">
    

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

    בדוגמה שלמעלה (שם של אנשים), יהיה רעיון רע להשתמש בערכי “ג’ון סמית” בדיוק כמו מציין מיקום או רמז למשתמש – המשתמש עשוי להגיש את זה לשרת. עם זאת, אם זה היה (למשל) דף פרופיל, בו המשתמשים יכולים לעדכן את המידע שלהם או השאר אותו אותו דבר, אז השימוש בערך בדרך זו הגיוני.

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

    השבתת אלמנטים

    ניתן להשבית את רוב האלמנטים על ידי הוספת ה- נכה לייחס להם. לא ניתן ללחוץ על אלמנטים מושבתים או לערוך אותם.

     פעולה ="" שיטה ="הודעה">
     עבור ="שם פרטי">שם פרטי
     סוג ="טקסט" שם ="שם פרטי" ערך ="ג'ון" id ="שם פרטי">
     עבור ="שם משפחה">שם משפחה
     סוג ="טקסט" שם ="שם משפחה" ערך ="סמית" id ="שם משפחה" נכה>
     סוג ="שלח">
    

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

    ה אלמנט

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

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

    סוג: טקסט

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

    סוג ="טקסט">

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

    סוג ="טקסט" רשימה ="אפשרויות"> id ="אפשרויות"> ערך ="אדום"> ערך ="ירוק"> ערך ="כחול">
    סוג: הגש

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

     סוג ="שלח">

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

    שם ="לחפש"> סוג ="שלח" ערך ="לחפש">

    סוג קלט אחר יוצר GUI דומה לזה של ה- שלח הקלד את ה כפתור סוג. עם זאת, אל תשתמש ב- כפתור להגשת טופס כללי. (זה לא יעבוד.) ואל תשתמש ב- שלח כפתור עבור כפתורים גנריים בטופס – זה יעבוד בצורה לא נכונה.

    הקש ססמא

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

    עבור ="שם משתמש">שם משתמש
    שם ="שם משתמש" סוג ="טקסט" id ="שם משתמש">

    עבור ="סיסמה">סיסמה
    סוג ="סיסמה" שם ="סיסמה" id ="סיסמה">

    סוג ="שלח" ערך ="התחברות">
    סוגי קלט טקסט עם אימות

    מספר סוגי קלט יוצרים אותה GUI – תיבה להכנת טקסט – אך יוצרים תנאים שונים לאימות קלט.

    לדוגמה, אימייל הקלד בדיקות כדי לוודא שהנתונים שהוזנו תואמים את פורמט כתובת הדוא”ל הרגיל (טקסט כלשהו, ​​ואחריו @ סימן, ואחריו טקסט המקיף לפחות נקודה אחת).

    סוגים אלה הם:

    • אימייל
    • מספר – השדה מקבל מספרים בלבד.
    • טל – מספר טלפון. (אימות למספרי הטלפון אינו נתמך באופן נרחב בדפדפנים.)
    • url – מקבלת רק כתובות URL מעוצבות.

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

    סוגים עם בוחרי תאריך או שעה

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

    סוגים אלה הם:

    • תאריך
    • תאריך שעה
    • תאריך-מקומי
    • חודש
    • זמן
    • שבוע
    עבור ="תאריך">דוגמה לקליטת תאריך
    סוג ="תאריך" שם ="תאריך" id ="תאריך">

    עבור ="תאריך שעה">דוגמה לקליטת זמן
    סוג ="תאריך שעה" שם ="תאריך שעה" id ="תאריך שעה">

    עבור ="תאריך מקומי"> דוגמה ל- Datetime Local
    סוג ="תאריך מקומי" שם ="תאריך מקומי" id ="תאריך מקומי">

    עבור ="חודש">דוגמה לקליטת חודש
    סוג ="חודש" שם ="חודש" id ="חודש">

    עבור ="זמן">דוגמה לקלט זמן
    סוג ="זמן" שם ="זמן" id ="זמן">

    עבור ="שבוע">דוגמה לקלט שבוע
    סוג ="שבוע" שם ="שבוע" id ="שבוע">

    סוג: רדיו

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

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

    התכונה הקושרת כמה כפתורי רדיו לסט היא ה- שם תכונה.

    סוג ="רדיו" שם ="צורה" ערך ="כיכר"> כיכר
    סוג ="רדיו" שם ="צורה" ערך ="מעגל"> מעגל
    סוג ="רדיו" שם ="צורה" ערך ="משולש"> משולש
    סוג ="רדיו" שם ="צבע" ערך ="אדום"> אדום
    סוג ="רדיו" שם ="צבע" ערך ="כחול"> כחול
    סוג ="רדיו" שם ="צבע" ערך ="ירוק"> ירוק
    צורה



    צבע



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

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

    
    
    סוג ="רדיו" שם ="צורה" ערך ="כיכר"> כיכר
    סוג ="רדיו" שם ="צורה" ערך ="מעגל"> מעגל
    סוג ="רדיו" שם ="צורה" ערך ="משולש"> משולש
    סוג ="רדיו" שם ="צבע" ערך ="אדום"> אדום
    סוג ="רדיו" שם ="צבע" ערך ="כחול"> כחול
    סוג ="רדיו" שם ="צבע" ערך ="ירוק"> ירוק
    צורה

    כיכר

    מעגל

    משולש

    צבע

    אדום

    כחול

    ירוק

    שימו לב שמאז אלמנט עוטף את אלמנט, ל ו מזהה אין צורך בתכונות.

    סוג: תיבת סימון

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

    הסוג הראשון הוא מפתח בודד שעשוי להיות בעל מספר ערך (המכונה לעתים רב-בחירה). הסוג השני הוא מפתח בוליאני (TRUE / FALSE).

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

    צבעים שאני אוהב
    סוג ="תיבת סימון" שם ="צבע" ערך ="כחול"> כחול
    סוג ="תיבת סימון" שם ="צבע" ערך ="ירוק"> ירוק
    סוג ="תיבת סימון" שם ="צבע" ערך ="צהוב"> צהוב
    סוג ="תיבת סימון" שם ="צבע" ערך ="אדום"> אדום
    צבעים שאני אוהב

    צבעים

    כחול

    ירוק

    צהוב

    אדום

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

    http://example.com?color=blue&color=green&color=yellow&color=red

    אתה יכול גם להשתמש בתיבות הסימון בנפרד כדי לייצג ערכים בוליאניים (TRUE / FALSE).

    סוג ="תיבת סימון" שם ="tos" ערך ="אמת"> בלחיצה כאן אתה מאשר שאתה מסכים לתנאי השירות שלנו.

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

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

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

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

    סוג: כפתור

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

     סוג ="כפתור" ערך ="תווית כפתור" onclick ="התראה ('אני כפתור!')">
    סוג: צבע

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

    בדפדפנים התומכים בכך, לחיצה על רכיב זה מציגה ממשק משתמש (GUI) לבחירת צבע. הערך המוגש לשרת הוא ערך צבע Hex של HTML / CSS (לשעבר. לבן = #ffffff).

    עבור ="צבע אהוב">מה הצבע האהוב עליך?
    סוג ="צבע" שם ="צבע אהוב" id ="צבע אהוב">

    סוג: טווח

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

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

    
    
    עבור ="הבנת צורה">עד כמה אתה מבין צורות?

    בכלל לא.
    סוג ="טווח" שם ="הבנת צורה" id ="הבנת צורה" min ="0" מקסימום ="100"> טוב מאוד.

    בכלל לא.

    טוב מאוד.

    סוג: תמונה

    ה תמונה קלט מחליף א שלח כפתור המאפשר לך להשתמש בתמונה ככפתור.

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

    סוג ="תמונה" src ="example.jpg">
    סוג: קובץ

    טופס יכול לכלול קלט להעלאת קבצים עם ה- קובץ סוג. התצוגה המדויקת ופונקציונליות של ממשק ה- GUI להעלאת הקבצים נשלטת על ידי הדפדפן. יש לציין גם את הטיפול בקובץ (שם יישמר הקובץ) בצד השרת.

    סוג ="קובץ" שם ="העלאת קובץ">

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

    
    
    
    סוג ="קובץ" שם ="העלאת תוסף מוגבלת" לקבל =".png, .gif, .jpg, .jpeg">
    סוג ="קובץ" שם ="מעלה-מוגבל-מעלה" לקבל ="image, image / png, image / gif, image / jpg, image / jpeg">

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

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

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

    אתה יכול לייעד לא גלוי קלט אלמנט, שערכו ייכלל בעת הגשת הטופס, באמצעות סוג ה- מוסתר.

     סוג ="מוסתר" שם ="ערך מוסתר" ערך ="">

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

    תכונות של

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

    • לקבל – מגדיר רשימה של סוגי קבצים, לפי סיומת או לפי סוג MIME. משמש רק עם type = "קובץ".
    • alt – מגדיר טקסט alt. משמש רק עם type = "image".
    • השלמה אוטומטית – מציין אם שדה הקלט צריך לבצע השלמה אוטומטית. הערכים הם ב או כבוי. עוקף את רמת הטופס השלמה אוטומטית תכונה. ישים רק לתשומות מבוססות טקסט.
    • מיקוד אוטומטי – מציין כי ה- צריך להיות בפוקוס כאשר העמוד נטען. אין צורך בערך. יש להשתמש רק פעם אחת במסמך.
    • בדק – מגדיר א רדיו או תיבת סימון קלט למצב שנבדק.
    • נכה – מבטל א אלמנט. אלמנטים מושבתים אינם שולחים את ערכם בעת הגשת הטופס. אין צורך בערך.
    • טופס – מציין א
      אליו שייך לשימוש כאשר האלמנט נמצא מחוץ ל אלמנט. הערך הוא מזהה של טופס היעד. תכונה זו אינה נתמכת באופן אוניברסלי.
    • גיבוש – מציין כתובת URL להגיש את הטופס. גובר על פעולה תכונה של
      עצמו, או מחליף אותו. זה משמש רק ב- שלח או תמונה סוגים. הסיבה היחידה להשתמש בזה במקום בטפסים פעולה תכונה היא אם טופס דורש לחצני הגשה מרובים עם פעולות שונות.
    • פורמנטקט – מציין את קידוד התו של הנתונים שהוגשו. גובר על אנקטייפ תכונה של
      אלמנט. זה משמש רק ב- שלח ו תמונה סוגים. ערכים:
      • יישום / x-www-form-urlencoded
      • ריבוי נתונים / טופס נתונים
      • טקסט / רגיל
    • formmethod – מציין את השיטה (לקבל או הודעה) של הגשת הטופס. גובר על שיטה תכונה של
      אלמנט. זה משמש רק ב- שלח ו תמונה סוגים.
    • formnovalidate – מציין כי אין לאמת את נתוני הטופס לפני הגשתם. גובר על להתחדש תכונה של
      אלמנט. זה משמש רק ב- שלח ו תמונה סוגים. תכונה זו אינה דורשת ערך.
    • formtarget – מציין את הקשר הדפדפן בו תוצג התגובה. גובר על יעד תכונה של
      אלמנט. זה משמש רק ב- שלח ו תמונה סוגים. ערכים:
      • _ ריק
      • _עצמי
      • _ הורה
      • _חלק עליון
      • מסגרת
    • גובה – מציין את הגובה, בפיקסלים, של תמונה קלט. עדיף להשתמש ב- CSS כדי לציין זאת.
    • רשימה – מציין את ה- מזהה של א אלמנט המכיל אפשרויות מוגדרות מראש. משמש רק עם כניסות מבוססות טקסט.
    • מקסימום – מציין את הערך המקסימלי למספר או לקלט מבוסס תאריך.
    • אורך מקסימלי – מציין את מספר התווים המרבי בכניסה מבוססת טקסט.
    • דקות – מציין את הערך המינימלי למספר או לקלט מבוסס תאריך.
    • מרובות – מציין שהמשתמש יכול להזין יותר מערך אחד. בשימוש עם אימייל ו קובץ סוגי קלט. תכונה זו אינה דורשת ערך.
    • שם – מציין את שם הקלט. משמש כמפתח בזוג ערכי מפתח המייצג את הקלט בעת הגשת הטופס. ייחודי שם יש לספק עבור כל האלמנטים בצורה.
    • תבנית – מגדיר ביטוי רגיל שישמש לאימות הערך של קלט מבוסס טקסט.
    • מציין מקום – מגדיר מציין מיקום או טקסט “עוזר” עבור קלט מבוסס טקסט.
    • לקריאה בלבד – מציין כי המשתמש לא יכול לערוך קלט. דומה בהתנהגות ל נכה תכונה, למעט תשומות קריאות לעשות שלח את הערך שלהם לשרת עם הגשת הטופס. משמש לעתים קרובות עם JavaScript כדי להבטיח שמשתמש לא יכול לערוך ערך עד למילוי תנאים מסוימים, או שאינו יכול לערוך ערך לאחר תנאים מסוימים. תכונה זו אינה דורשת ערך.
    • נדרש – מציין כי ה- חייב להיות בעל ערך, אחרת הטופס לא יוגש. תכונה זו אינה דורשת ערך.
    • גודל – מציין רוחב, בתווים, של אלמנט קלט מבוסס טקסט. השימוש ב- CSS הוא בדרך כלל דרך טובה יותר להשיג זאת.
    • src – מציין את כתובת האתר של תמונה עבור תמונה קלט.
    • שלב – מגדיר את המרווח בין תשומות תקפות בכניסה מבוססת מספר.
    • סוג – מציין את סוג ה- אלמנט. ברירת המחדל היא טקסט. לא כל הערכים האפשריים נתמכים בכל הדפדפנים. ערכים:
      • כפתור
      • תיבת סימון
      • צבע
      • תאריך
      • תאריך שעה
      • תאריך-מקומי
      • אימייל
      • קובץ
      • מוסתר
      • תמונה
      • חודש
      • מספר
      • סיסמה
      • רדיו
      • טווח
      • לאפס
      • לחפש
      • שלח
      • טל
      • טקסט
      • זמן
      • url
      • שבוע
    • ערך – מציין את ערך ההתחלה של קלט.
    • רוחב – מציין רוחב, בפיקסלים, של תמונה קלט. השימוש ב- CSS הוא בדרך כלל דרך טובה יותר להשיג זאת.

    אזור טקסט

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

    # textarea דוגמה textarea {
    גובה: 6em;
    רוחב: 30em;
    }

    כל טקסט בתוך האלמנט יוצג באזור הטקסט.


    עבור ="msgstr">ההודעה שלך:

    שם ="msgstr" id ="msgstr">טקסט זה נמצא בתוך אלמנט הטקסטרה. המשתמש ייראה. אם המשתמש לא ישנה אותו, הוא יוגש עם הטופס.

    # textarea-text- דוגמא textarea {
    גובה: 6em;
    רוחב: 30em;
    }

    ההודעה שלך:

    תכונות עבור הן:

    • מיקוד אוטומטי - מציין שהמיקוד אמור להיות בפוקוס כאשר העמוד נטען. יש להשתמש רק פעם אחת במסמך. תכונה זו אינה דורשת ערך.
    • cols - מציין את הרוחב, בתווים, של אזור הטקסט. ניתן להשיג זאת טוב יותר באמצעות CSS.
    • מושבת - מבטל את. אלמנטים בטופס מושבתים אינם שולחים את ערכם לשרת עם הגשת הטופס. תכונה זו אינה דורשת ערך.
    • form - מציין את המזהה של ה- a אליו שייך, לשימושו אינו כלול בתוך האלמנט. לא נתמך בכל הדפדפנים.
    • אורך מקסימלי - מציין את המספר המרבי של התווים המותרים ב- .
    • name - מגדיר את שם ה-, ומשמש כמפתח עבור צמד ערכי המפתח המייצג את בקשת הגשת הטופס. על כל רכיבי הטופס לכלול שם ייחודי.
    • מציין מיקום - מגדיר מציין מיקום או טקסט עוזר שיוצג בתוך לפני שהמשתמש מקליד לתוכו.
    • readonly - מציין כי המשתמש לא יכול לערוך קלט. התנהגות דומה לתכונה המוגבלת, למעט אלמנטים בקריאה בלבד שולחים את ערכם לשרת עם הגשת הטופס. משמש לעתים קרובות עם JavaScript כדי להבטיח שמשתמש לא יכול לערוך ערך עד למילוי תנאים מסוימים, או שאינו יכול לערוך ערך לאחר תנאים מסוימים. תכונה זו אינה דורשת ערך.
    • חובה - מציין שחייב להיות בעל ערך, או שהטופס לא יוגש. תכונה זו אינה דורשת ערך.
    • שורות - מציין את הגובה, בשורות טקסט, של ה-. בחלק מהמקרים זה עדיף על שימוש ב- CSS (למשל כאשר מספר השורות בפועל רלוונטי), אך לשם הגדרת הגובה פשוט CSS היא בדרך כלל בחירה טובה יותר.
    • wrap - מציין אם הקלט צריך לעטוף קשה (להכניס תו של מעבר קו בכל הפסקה) או לעטוף רך (הכנס תו של מעבר שורה רק במקום בו המשתמש מגדיר מעבר של שורה). הערכים הם רכים או קשים.

    בחר (נפתח)

    להגדרת בורר נפתח, השתמש באלמנט עם אלמנטים של ילדים.

    עבור ="צבע אהוב">מה הצבע האהוב עליך?
    שם ="צבע אהוב" id ="צבע אהוב">
    ערך ="אדום">אדום
    ערך ="כחול">כחול
    ערך ="ירוק">ירוק
    ערך ="צהוב">צהוב

    מה הצבע האהוב עליך?
    אדום
    כחול
    ירוק
    צהוב

    ניתן לקבץ אפשרויות ולהעניק תוויות ברמה הקבוצתית עם הרכיב.

    עבור ="צבע אהוב">מה הצבע האהוב עליך?
    שם ="צבע אהוב" id ="צבע אהוב">
    תווית ="צבעים ראשוניים">
    ערך ="אדום">אדום
    ערך ="כחול">כחול
    ערך ="צהוב">צהוב

    תווית ="צבעים משניים">
    ערך ="ירוק">ירוק
    ערך ="תפוז">תפוז
    ערך ="סגול">סגול

    תווית ="לא ממש צבעים">
    ערך ="שחור">שחור
    ערך ="לבן">לבן
    ערך ="אפור">אפור

    מה הצבע האהוב עליך?
    אדום
    כחול
    צהוב

    ירוק
    תפוז
    סגול

    שחור
    לבן
    אפור

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

    תכונות האלמנט:

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

    התכונה של האלמנטים היא:

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

    ארגון טופס

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

    מידע אישי
    עבור ="שם פרטי">שם פרטי
    שם ="שם פרטי" id ="שם פרטי">

    עבור ="שם משפחה">שם משפחה
    שם ="שם משפחה" id ="שם משפחה">

    עבור ="תאריך לידה">תאריך לידה
    שם ="תאריך לידה" id ="תאריך לידה">

    דברים מועדפים
    עבור ="צבע אהוב">צבע אהוב
    שם ="צבע אהוב" id ="צבע אהוב">
    תווית ="צבעים ראשוניים">
    ערך ="אדום">אדום
    ערך ="כחול">כחול
    ערך ="צהוב">צהוב

    תווית ="צבעים משניים">
    ערך ="ירוק">ירוק
    ערך ="תפוז">תפוז
    ערך ="סגול">סגול

    תווית ="לא ממש צבעים">
    ערך ="שחור">שחור
    ערך ="לבן">לבן
    ערך ="אפור">אפור

    עבור ="מועדף">צורה אהובה
    שם ="מועדף">
    ערך ="משולש">משולש
    ערך ="כיכר">כיכר
    ערך ="מעגל">מעגל

    סוג ="שלח">

    טפסים לעיצוב

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

    זה גורם לשתי בעיות:

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

    זה יכול להיות מאוד מתסכל.

    חלק מהבעיות - כמו גובה ומרווח אנכי, מטופלות בכמה מאיפורי CSS הפופולאריים יותר, אך לא בכולם..

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

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

    HTML ו- CSS - מבוא קצר

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

    מה זה CSS?

    CSS מייצג גיליונות סגנון מדורגים. זוהי שפה המשמשת להגדרת אופן הצגת מסמך HTML בדף.

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

    זה נקרא "מדורגים" מכיוון שסגנונות הקשורים לטקסט מציגים "אשד" מהרכיב ההורה לילד. לדוגמה, אם ה- CSS לפסקה (

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

    כיצד עובד CSS - סקירה בסיסית

    כיצד לכלול CSS במסמך

    ניתן לכלול CSS בתוך אלמנט במסמך, או בקבצי CSS נפרדים (המכונים "גיליונות סגנון") המקושרים ממסמך HTML בתוך הראש..

    rel ="גיליון סגנונות" סוג ="טקסט / css" href ="נושא">

    p {
    font-family: ג'ורג'יה, "Times New Roman", serif;
    }

    אתה יכול לקשר לגיליונות סגנונות מרובים במסמך בודד, ולכלול יותר מתג אחד.

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

    הצהרות סגנון

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

    [בוחר] {
    [attribute]: [ערך];
    [attribute]: [ערך];
    }

    / * הערות כאן * /

    זה:

    • בורר, או מזהה אלמנטים, המפרט את מה שעיצובי. אלה כוללים את הדברים הבאים (יש יותר):
      • שם סוג האלמנט: a, p, dl וכו '. זה חל על סגנונות על כל האלמנטים מאותו סוג.
      • מזהה מחלקה - שם הכיתה, מקודם עם נקודה (.).
      • מזהה מזהה - שם תעודת זהות, מראש עם סימן ה- hash (#).
      • אחד האמור לעיל, פלוס בורר מומחיות אחר, כגון פסאודוקלס כמו: רחף.
    • סד מתולתל פותח, המסמל את תחילת כללי הסגנון ביחס לאלמנט הנתון.
    • כללי סגנון שבאו לידי ביטוי כזוגי ערך-תכונה המקושרים למעי הגס והופסקו עם מושבי-למחצה.
    • סד מתולתל סוגר המציין את סוף כללי הסגנון לאותו אלמנט.

    לדוגמה:

    html {
    צבע: # 222222; / * צבע טקסט - אפור כהה מאוד * /
    font-family: ג'ורג'יה, "Times New Roman", גרמונד, סריף;
    גודל גופן: 14px;
    גובה קו: 22 פיקסלים;
    }

    / * זו תגובה. * /

    #logo {/ * סגנון לפי מזהה אלמנט * /
    צבע: # B20000;
    משפחת גופן: "הלווטיקה נויה", הלווטיקה, אריאל, סאנס-סריף;
    }

    .יישומון {/ * סגנון לפי מחלקת אלמנטים. * /
    רוחב: 100%;
    גבול: שחור בגודל 2 פיקסלים;
    ריפוד: 22px 11px;
    }

    א {
    צבע: # 008AE6;
    }

    א: לרחף {
    צבע: # 006EB8;
    קישוט טקסט: קו תחתון;
    }

    עץ המסמך

    אנשים רבים פשוט חושבים על מסמך HTML כמבנה ליניארי: תחילה המסמך, אחר כך המסמך ואחר כך ה- .

    עם זאת, מסמך HTML הוא באמת עץ:

    • HTML
      • ראש
      • כותרת
      • מטה
      • גוף
      • כותרת עליונה
        • H1
        • nav
      • עיקרי
        • ע
          • א
          • א
          • חזק
        • ol
          • li
          • li
          • li
            • א
      • בצד
        • קטע
        • קטע
        • קטע
      • כותרת תחתונה

    כל אלמנט מקונן בתוך אלמנט אחר.

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

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

    שקול את הדוגמה הבאה:

    href ="">עוגן בכותרת

    href ="">

    `כותרת בתוך עוגן

    א {
    צבע כחול;
    }

    h1 {
    צבע ירוק;
    }

    שיהיה כחול ואשר יהיה ירוק?

    במקרה זה, הקו הראשון (עוגן בכותרת) יהיה כחול ואילו השני יהיה ירוק.

    למה?

    בדוגמה הראשונה,

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

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

    בוחרי CSS

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

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

    ניתן לשלב בין הצהרות בורר. לדוגמה:

    # container div {
    }

    זה בוחר את כל האלמנטים שנמצאים בתוך רכיב ה- # container.

    להלן כמה מהבוחרים והפורמטים הבולטים החשובים יותר.

    • * - בוחר את כל האלמנטים.
    • element-name - בוחר את כל האלמנטים מסוג מסוים.
    • .class-name - בחירת אלמנטים לפי שם כיתה.
    • #id - בחירת אלמנטים לפי מזהה.
    • element-name.class-name - בחירת אלמנטים מסוג מסוים התואמים לשם הכיתה.
    • selector1, selector2 - בוררים המופרדים בפסיקים תואמים את כל האלמנטים המצוינים על ידי selector1 או selector2.
    • selector1 selector2 - בורר אחד בעקבות בורר אחר, עם רווח בלבד, בוחר את כל האלמנטים התואמים לסלקטור 2, שנמצאים בתוך אלמנט המתאים לבורר 1.
    • בורר 1>selector2 - בוחר את כל האלמנטים התואמים selector2 שהם ילדים מיידיים של selector1.
    • [תכונה] - שם תכונה בסוגריים מרובעים בוחר את כל האלמנטים שיש להם תכונה זו, תהיה ערכה אשר יהיה.
    • [attribute = value] - בחירת אלמנטים שיש להם את צמד הערכים המאפיינים.
    • [attribute ~ = string] - בחירת אלמנטים שבהם ערך התכונות שצוין מכיל את המחרוזת שצוינה.
    • selector: ילד ראשון - בחר אלמנטים שהם הילד הראשון של האלמנטים ההם שלהם. זה יכול לשמש כ- p הראשי: ילד ראשון (למשל) לסגנון פסקת הפתיחה בדף.
    • selector :: אות ראשונה - בחירת האות הראשונה של האלמנט התואם. ניתן להשתמש בהם כדי ליצור אפקטים של טיפות כיפה.
    • selector :: שורה ראשונה - בחירת שורת הטקסט הראשונה באלמנט התואם.
    • קלט: מיקוד - סגנונות קלט טופס כאשר היה בו מיקוד.
    • א: ריחוף, א: פעיל, א: ביקר - קישורי עוגן של סגנונות בנקודות שונות במחזור האינטראקציה שלהם.

    ישנם עוד רבים נוספים בנוסף לאלה.

    CSS ומבנה עמוד - דגם התיבה

    דגם ה- CSS Box הוא הסבר לאופן בו CSS מציג ומציב אלמנטים ברמת חסימת.

    מהם אלמנטים בלוק?

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

    ישנם מספר אלמנטים ברמת חסימת כברירת מחדל:

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

      ,

      ,

      ,

      ,
      - כותרות.

    • - כותרת מדור או עמוד.
    • - כלל אופקי (קו הפרדה).
    • - מכיל את התוכן המרכזי הייחודי למסמך זה.
    • - מכיל קישורי ניווט.
    • - תוכן לשימוש אם סקריפט אינו נתמך או כבוי.
      1. - רשימה מסודרת.
      2. - פלט טופס.
      3. - פסקה.

      4. - טקסט מעוצב מראש.
      5. - קטע של דף אינטרנט.
      6. - שולחן.
      7. - כותרת תחתונה על השולחן.
        • - רשימה לא מסודרת.
        • - נגן וידאו.

        אתה יכול גם לגרום לכל אלמנט להתנהג כמו אלמנט ברמת חסימת על ידי הקצאתו לתצוגת הסגנון: חסום;.

        רוחב וגובה

        כברירת מחדל, רוחב האלמנט ברמת החסימה הוא 100% מאלמנט המכיל ברמת החסימה שלו, כולל שוליים, גבול או ריפוד. (כלומר, כל האלמנטים, כולל שוליים, גבול וריפוד, יתאימו בתוך המכולה שלה.)

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

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

        הדבר המוזר בהגדרת רוחב (וגובה, אך אינך עושה זאת בתדירות גבוהה) הוא שהרוחב שתציין לא יהיה הרוחב הכולל של האלמנט.

        שוליים, גבול וריפוד

        בנוסף לתוכן האלמנט, הרוחב הכולל והגובה הכולל נקבעים על ידי שלוש תכונות אחרות:

        • שוליים - האזור סביב אלמנט.
        • גבול - קו סביב היקף היסוד.
        • ריפוד - שטח ממש בתוך היקף האלמנט.

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

        .שדה {
        רוחב: 100%;
        צבע רקע: # 66FF33; /* ירוק ליים*/
        }
        .בפנים {
        רוחב: 100 פיקסלים;
        שולי: 25px;
        גבול: מקווקו 15 פיקס שחור;
        ריפוד: 25px;
        צבע רקע: # 90acff;
        צבע: # 002346;
        מודגש;
        }

        class ="שדה">
        class ="מבפנים">
        זהו טקסט בפנים. שימו לב שהוא מרוחק מהקצה הפנימי. זה נגרם כתוצאה מהריפוד.

        # שולי ריפוד גבול. שדה {
        רוחב: 100%;
        צבע רקע: # 66FF33; /* ירוק ליים*/
        }
        # שוליים-ריפוד-גבול. פנים {
        רוחב: 100 פיקסלים;
        שולי: 25px;
        גבול: מקווקו 15 פיקס שחור;
        ריפוד: 25px;
        צבע רקע: # 90acff;
        צבע: # 002346;
        מודגש;
        }

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

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

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

        div {
        רוחב: 100%;
        שולי: 5px;
        ריפוד: 15px;
        }

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

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

        div {
        שולי: 5px;
        ריפוד: 15px;
        }

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

        אלמנטים צפים

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

        # container {
        רוחב: 400 פיקסלים;
        צבע רקע: #eeeeee;
        ריפוד: 20px;
        }
        #container div {/ * מכוון לכל הדיוויזיות שהם מרכיבים לילדים של #container. * /
        גובה: 50 פיקסלים;
        }
        #red {
        צבע רקע: אדום;
        }
        #blue {
        צבע רקע: כחול;
        }
        #ירוק {
        צבע רקע: ירוק;
        }

        id ="מכולה">
        id ="אדום">
        id ="כחול">
        id ="ירוק">

        # div-stack. מיכל {
        רוחב: 400 פיקסלים;
        צבע רקע: #eeeeee;
        ריפוד: 20px;
        }
        # div-stack. div container
        גובה: 50 פיקסלים;
        }
        # div-stack .red {
        צבע רקע: אדום;
        }
        # div-stack .blue {
        צבע רקע: כחול;
        }
        # div-stack. ירוק {
        צבע רקע: ירוק;
        }

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

        # container {
        רוחב: 400 פיקסלים;
        צבע רקע: #eeeeee;
        ריפוד: 20px;
        }
        # container div {
        גובה: 50 פיקסלים;
        רוחב: 50 פיקסלים;
        }
        #red {
        צבע רקע: אדום;
        }
        #blue {
        צבע רקע: כחול;
        }
        #ירוק {
        צבע רקע: ירוק;
        }

        id ="מכולה">
        id ="אדום">
        id ="כחול">
        id ="ירוק">

        # div-stack-skinny. מיכל {
        רוחב: 400 פיקסלים;
        צבע רקע: #eeeeee;
        ריפוד: 20px;
        }
        # div-stack-skinny .container div {/ * מכוון לכל הדיוויזיות שהם מרכיבים לילדים של #container. * /
        גובה: 50 פיקסלים;
        }
        # div-stack-skinny .red {
        צבע רקע: אדום;
        }
        # div-stack-skinny .blue {
        צבע רקע: כחול;
        }
        # div-stack-skinny. ירוק {
        צבע רקע: ירוק;
        }

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

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

        # container {
        רוחב: 400 פיקסלים;
        צבע רקע: #eeeeee;
        ריפוד: 20px;
        }
        # container div {
        גובה: 50 פיקסלים;
        רוחב: 50 פיקסלים;
        לצוף: שמאל;
        }
        #red {
        צבע רקע: אדום;
        }
        #blue {
        צבע רקע: כחול;
        }
        #ירוק {
        צבע רקע: ירוק;
        }

        id ="מכולה">
        id ="אדום">
        id ="כחול">
        id ="ירוק">

        # div-float. container {
        רוחב: 400 פיקסלים;
        צבע רקע: #eeeeee;
        ריפוד: 20px;
        }
        # div-float .container div {/ * מכוון לכל הדיוויזיות שהן אלמנטים של #container. * /
        גובה: 50 פיקסלים;
        }
        # div-float .red {
        צבע רקע: אדום;
        }
        # div-float .blue {
        צבע רקע: כחול;
        }
        # div-float .green {
        צבע רקע: ירוק;
        }

        הודעה:

        • החסימה הצבעונית הראשונה (#red) נמצאת בצד שמאל של המכולה, ואחריה #blue ו- #green.
        • אין להם מרווח, ולכן הם ישירות אחד ליד השני.
        • הריפוד בחלק הפנימי של המכולה דוחף את הבלוקים למטה והרחק מהפינה השמאלית העליונה.

        אבל - הו לא - מה קורה עם אלמנט המכולות? מדוע הבלוקים הצבעוניים תלויים מזה?

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

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

        הגובה הפנימי של אלמנט המכולה במקרה זה הוא אפס, והגובה הכולל הוא רק פי 2 מגודל הריפוד שלו.

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

        הנה התוצאה של הוספת ה- clearfix.

        # container {
        רוחב: 400 פיקסלים;
        צבע רקע: #eeeeee;
        ריפוד: 20px;
        הצפה: אוטומטי;
        }
        # container div {
        גובה: 50 פיקסלים;
        רוחב: 50 פיקסלים;
        לצוף: שמאל;
        }
        #red {
        צבע רקע: אדום;
        }
        #blue {
        צבע רקע: כחול;
        }
        #ירוק {
        צבע רקע: ירוק;
        }

        id ="מכולה">
        id ="אדום">
        id ="כחול">
        id ="ירוק">

        # div-float-fix. מיכל {
        רוחב: 400 פיקסלים;
        צבע רקע: #eeeeee;
        ריפוד: 20px;
        }
        # div-float-fix. .container div {/ * מכוון לכל הדיוויזיות שהם מרכיבי ילדים של #container. * /
        גובה: 50 פיקסלים;
        }
        # div-float-fix .red {
        צבע רקע: אדום;
        }
        # div-float-fix .blue {
        צבע רקע: כחול;
        }
        # div-float-fix. ירוק {
        צבע רקע: ירוק;
        }

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

        # container {
        צבע רקע: #eeeeee;
        הצפה: אוטומטי;
        ריפוד: 20px;
        רוחב: 600 פיקסלים;
        }

        ראשי {
        לצוף: שמאל;
        צבע רקע: #efefef;
        רוחב: 300 פיקסלים;
        ריפוד: 15px;
        שוליים ימניים: 20 פיקסלים;
        }

        בצד {
        לצוף: שמאל;
        צבע רקע: #dedede;
        ריפוד: 15px;
        רוחב: 220 פיקסלים;
        }

        id ="מכולה">

        לורם איפסום

        Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית. Curabitur pretium, mi eu elementum ullamcorper, dui justo egestas turpis, sed auctor turpis tellus eget augue. Quisque vel malesuada erat. Vestibulum non felis et turpis iaculis iaculis.

        ב- arcu metus, finibus id dolor a, interdum lacinia lectus. Vestibulum vulputate neale eget ante tincidunt sodales. יעילות Quisque היא scelerisque טורקיס לנמ"א. קומודו Donec, Diam ID consequat sodales, Justo quam posuere libero, non fringilla ante dui id tortor. יעילות סודה ב ipsum nec pellentesque.

        ארכיונים

        • מאי 2015
        • אפריל 2015
        • מרץ 2015
        • פברואר 2015
        • ינואר 2015

        # סרגל צידי פשוט. מיכל {
        צבע רקע: #eeeeee;
        הצפה: אוטומטי;
        ריפוד: 20px;
        רוחב: 600 פיקסלים;
        }

        # סרגל צדדי פשוט {
        לצוף: שמאל;
        צבע רקע: #efefef;
        רוחב: 300 פיקסלים;
        ריפוד: 15px;
        שוליים ימניים: 20 פיקסלים;
        }

        # סרגל צדדי פשוט בצד {
        לצוף: שמאל;
        צבע רקע: #dedede;
        ריפוד: 15px;
        רוחב: 220 פיקסלים;
        }

        לורם איפסום

        Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית. Curabitur pretium, mi eu elementum ullamcorper, dui justo egestas turpis, sed auctor turpis tellus eget augue. Quisque vel malesuada erat. Vestibulum non felis et turpis iaculis iaculis.

        ב- arcu metus, finibus id dolor a, interdum lacinia lectus. Vestibulum vulputate neale eget ante tincidunt sodales. יעילות Quisque היא scelerisque טורקיס לנמ"א. קומודו Donec, Diam ID consequat sodales, Justo quam posuere libero, non fringilla ante dui id tortor. יעילות סודה ב ipsum nec pellentesque.

        ארכיונים

        • מאי 2015
        • אפריל 2015
        • מרץ 2015
        • פברואר 2015
        • ינואר 2015

        #### __ אקסטר

        s__

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

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

        רוב הבלוגים - ככל הנראה רוב האתרים - עוקבים אחר דפוס אופייני:

        • קטע כותרת המשתרע על רוחב העמוד
        • אזור התוכן המרכזי המחולק לשתי עמודות:
          • 2/3 מהרוחב עבור תוכן ראשוני
          • 1/3 מהרוחב עבור סרגל צד של רכיב widget
        • קטע כותרת תחתונה המתפרש על רוחב העמוד.

        הסימון האידיאלי למבנה מסמך זה יהיה:

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

        לפיכך, מבנה הסימון הנפוץ ביותר עבור פריסת בלוג טיפוסית נראה למעשה כך:

        id ="מכולה">

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

        CSS לעיצוב טקסטים

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

        המפל

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

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

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

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

        הסגנונות

        הצהרות הסגנון הרלוונטיות ביותר לעיצוב טקסט ולטיפוגרפיה הן:

        font-family: מציין את הגופן (ים) לשימוש. : הנוהג הטוב ביותר הוא להכריז על רשימת גופנים, החל מהגופן המועדף עליך וסדרת נפילות, וכלה במשפחת גופנים גנרית. : יש לעטוף שמות גופנים הכוללים רווחים בסימני ציטוט. : font-family: גאראמונד, ג'ורג'יה, "Times New Roman", serif;

        גודל גופן: מציין את גודל הטקסט. : יכול להיות בגודל בפיקסלים (14 פיקסלים), ems טיפוגרפי המבוסס על גודל הטקסט של ההורים (1 em), אחוז המבוסס על גודל הטקסט של ההורים (115%), שם גודל תיאורי (קטן, בינוני, גדול) או מתאר השוואתי על פי גודל הטקסט של ההורים (קטן יותר, גדול יותר). גודל הגופן: 14px;

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

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

        צבע: צבע ברירת המחדל של טקסט הוא שחור. אולי תרצה לשנות את זה למשהו פחות נוקשה. : צבע: # 111111; : כמו כן, לקישורים קבוצה של צבעי ברירת מחדל לציין אם הם ביקרו או לא, וצבע המציין את מצבם הפעיל. : בדרך כלל, צבע הקישור המוגדר כברירת מחדל אינו רצוי במיוחד. כדי לשנות צבע עבור מצבים שונים של תג העוגן השתמשו ב: a: קישור (ברירת מחדל), א: רחף, א: ביקרו ו-: פעיל. : א: רחף {צבע: # 3399FF; }

        משקל גופן: משקל גופן הוא המאפיין השולט אם הטקסט מודגש או רגיל. : על פי המפרט, אתה יכול להשתמש בערך מספרי כדי לקבוע את המשקל בדיוק רב. עם זאת, זה לא נתמך היטב על ידי מרבית הגופנים או הדפדפנים, וזה לא נוהג. : השימוש הנפוץ ביותר במשקל הגופן הוא פשוט לציין מודגש. : חזק {font-weight: bold; }

        סגנון גופן: סגנון הגופן משמש לציון סוג נטוי. הערכים הרלוונטיים הם נורמליים ונטויים. (לעתים רחוקות משתמשים באפשרות שלישית, אלכסונית.: Em {font-style: italic;}

        קישוט טקסט: זה משמש להוספת שורה לטווח של טקסט: אובר (קו קו - לעתים רחוקות משמש), דרך (קו מעבר - משמש לטקסט שנמחק), או תחת (קו תחתון - משמש לקישורים ולעיתים לכותרות) . : {טקסט-קישוט: קו תחתון; }

        שינוי טקסט: מאפיין זה מאפשר לך לשלוט על אותיות רישיות של טקסט. הערכים הרלוונטיים הם: אותיות רישיות (כותרת גדולה), אותיות גדולות (ALL CAPS) וקטנות (כל אותיות קטנות). : h3 {text-transform: אותיות גדולות; }

        variant font: זה משמש לציון כובעים קטנים. זה מגדיר את כל האותיות הקטנות בתוכן לאותיות גדולות בגודל גופן קטן יותר. : h1 {גרסת גופן: כובעים קטנים; }

        @ font-face: זה לא מאפיין שהוקצה לאלמנט, אלא משמש כסלקטור במסמך CSS. הוא משמש להגדרת משפחת גופנים חדשה. זה מאפשר למעצבים לציין כל גופן שהם רוצים, במקום להסתמך רק על גופני המערכת של מחשבי לקוח. : המאפיין משפחת גופנים מגדיר את שם הגופן החדש (שישמש בתכונת משפחת הגופנים של אלמנטים אחרים), ומאפיין src מציין קובץ גופן. : לא כל פורמטי קבצי הגופן נתמכים בכל הדפדפנים. הפורמטים הנתמכים ביותר הם TTF, OTF ו- WOFF (אך לא WOFF2). : אם וריאציות של גופן (מודגש, נטוי) דורשות קבצי גופן נפרדים, ניתן להגדיר הצהרות פנים מרובות @ font, לכל אחת מאפיין src שונה, ועם מאפיינים נוספים המפרטים את ההקשר שלהם (לדוגמה - משקל גופן: מודגש ;): @ font-face {font-family: myNewFont; src: url (myNewFont.woff;}

        טיפים לטיפוגרפיה

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

        אם אתה מעצב טיפוגרפיה לאתרים, זכור את הטיפים הבאים.

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

          (

          ,

          ,
          ) וסגנונות אחרים המשמשים לעיתים נדירות. עם זאת, למרות שהם משמשים לעיתים רחוקות, הם אכן מתרגלים. הקפד לכלול גם רשימות מקוננות, תמונות עם כיתובים ובלי כותרות, וגם דגימות קוד (אם אתה כותב על טכנולוגיה).
        • שימו לב כיצד שוליים אלמנטים מתקשרים זה עם זה ובהקשר שלהם. לדוגמה, מקובל לשים מרווח עליון בכותרות. זה עשוי להיות הגיוני בהקשרים מסוימים, אך אם היסוד הראשון באנרגיה, יתכן וזה לא ייראה נכון. באופן דומה, כותרת חתך אחרי פסקה עשויה בסופו של דבר לשכפל שטח-רווח, ליצור יותר נתק חזותי מהרצוי.
        • השתמש בערך גובה השורה ככלל סולם כדי לשמור על טקסט העמודים בקצב קבוע. על גופנים הגדולים מגובה הקו העולמי (כותרות למשל) להיות מוגדרים ככפול קו הערך הגלובלי. השתמש גם בערך גובה הקו לשוליים מתחת לאלמנטים ולקטעי הכניסה (כניסה).
        • מקובל לזהות פסקאות עם פריצת קו כפולה (מושגת עם שולי התחתון שנקבע לערך זהה לגובה הקו). מקובל גם שלא לפסוק פסקאות.
        • רשימות נוטות להיראות מוגדרות יותר (שוליים-שמאל) בערך באותו מרחק כמו גובה הקו (או ריבוי ממנו).
        • לרשימת התיאורים יש סטיילינג ברירת מחדל רע באמת. בדרך כלל הם נראים בצורה הטובה ביותר כאשר כל הרשימה מוגדרת, המודגשת והכניסה עוד יותר.
        • מקובל מאוד להגדיר את גודל הגופן העיקרי לדף ל- 12 פיקסלים, אך זה לא קריא במיוחד. קחו למשל 14 פיקסלים או אפילו 16 פיקסלים כגודל גופן בסיסי עולמי (תלוי במשפחת הגופנים שלכם).
        • מקובל מאוד להשאיר את צבע הגופן שחור (ברירת המחדל), אך לרוב אפור כהה מאוד אטרקטיבי וקריא יותר.
        • הקישורים () היו כחולים כברירת מחדל כמעט בכל דפדפן מאז תחילת האינטרנט. גם אם אתה רוצה לשנות את צבע הקישורים כך שיתאים למיתוג שלך (וכדאי שאתה אמור), כנראה שזה צריך להיות גוון של כחול. כמו כן, יש להיזהר משימוש בטקסט כחול במקומות אחרים, מכיוון שהוא עשוי לאותת למשתמשים שהם צריכים להיות מסוגלים ללחוץ על הטקסט.
        • באופן דומה, טקסט תחתון הוא אות כמעט אוניברסאלי לכך שמשהו ניתן ללחיצה. שנה אמנה זו בסכנתך.
        • פעם הייתה זו עצה נפוצה להימנע מגופני serif באינטרנט ולהשתמש בגופני sans serif בלבד. זו הייתה עצה טובה מכיוון שגופני serif אינם מוצגים טוב יותר במסכים ברזולוציה נמוכה. עם זאת, זה כבר לא מהווה דאגה עבור רוב האנשים. שימוש בגופן serif (כמו ג'ורג'יה, טיימס או גארמונד) יכול להפוך טקסט לקריא יותר.
        • באופן כללי, אינך רוצה יותר משלושה גופנים בעמוד:
          • גופן תוכן, שיכול להיות serif או sans.
          • תפריט וגופן ניווט, שלרוב אמורים להיות sans serif, ועשויים להיות זהים לגופן התוכן שלך.
          • גופן לדוגמאות קוד (אם אתה עושה דבר כזה), שאמור להיות גופן מונוספייס כמו שליח או קונסולה.
        • "המדד" של טקסט הוא מספר התווים בשורה. מידה שאורכה למעלה מ- 80 תווים הופכת לבלתי קריאה. רוב המומחים יקבעו את המדד האידיאלי על כ -65 תווים בשורה. זוהי פונקציה של רוחב אזור התוכן שלך וגודל הגופן שלך.
        • אם אתה משתמש ב- @ font-face כדי לייבא את הגופן שלך לדף, הקפד לבדוק איך זה נראה בדפדפנים מרובים. דפדפנים מסוימים מציגים גופנים מסוימים בצורה גרועה. כמו כן, הקפידו לכלול גופנים מגניבים בהצהרות משפחת הגופנים שלכם - לא תמיד תוכלו לסמוך על @ font-face שיעבוד בכל מצב..

        אנימציה של CSS

        CSS מאפשר הנפשת רכיבי HTML ללא Javascript. לאפקטים פשוטים זה יכול להיות די נוח. זה הופך מהר יותר מאפקטים דומים שנוצרו ב- Javascript, ויתמכו אפילו בדפדפנים שה Javascript מושבת בהם..

        מסגרות מפתח

        אנימציה מוגדרת באמצעות בורר CSS בשם @keyframes. להצהרת @keyframes יש שם, וקביעה של כללי סגנון עבור נקודות שונות (מסגרות מפתח) בהנפשה.

        @keyframes colorChange {
        מ {
        צבע רקע: אדום;
        }
        ל {
        צבע רקע: כחול;
        }
        }

        בדוגמה לעיל, האנימציה "שינוי צבע" גורמת לאלמנט לשנות צבע רקע מאדום לכחול.

        ניתן לצייר יותר מצבע. השימוש בכללי @frames להגדרת עמדות יגרום לאלמנט המושפע לעבור ממקום למקום.

        @keyframes moveLeft {
        מ {
        מיקום: קרוב משפחה;
        משמאל: 100 פיקסלים;
        ל {
        מיקום: קרוב משפחה;
        משמאל: 0px;
        }
        }

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

        @keyframes moveAround {
        0% {
        למעלה: 0px;
        משמאל: 0px;
        }
        25% {
        למעלה: 0px;
        משמאל: 50 פיקסלים;
        }
        50% {
        למעלה: 50 פיקסלים;
        משמאל: 50 פיקסלים;
        }
        75% {
        למעלה: 50 פיקסלים;
        משמאל: 0px;
        }
        100% {
        למעלה: 0px;
        משמאל: 0px;
        }
        }

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

        הקצאת אנימציות לאלמנטים

        הנפשות מוגדרות בנפרד מהרכיבים עליהם ישפיעו. אנימציות מוגדרות בהצהרות של @ keyframes כמוצג למעלה ואז מוחלות על אלמנטים.

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

        @keyframes colorChange {
        מ {
        צבע רקע: אדום;
        }
        ל {
        צבע רקע: כחול;
        }
        }

        .שינוי צבע {
        רוחב: 100 פיקסלים;
        גובה: 100 פיקסלים;
        שם אנימציה: colorChange;
        משך האנימציה: 5s;
        }

        @keyframes colorChange {
        מ {
        צבע רקע: אדום;
        }
        ל {
        צבע רקע: כחול;
        }
        }

        @ -webkit-keyframes colorChange {
        מ {
        צבע רקע: אדום;
        }
        ל {
        צבע רקע: כחול;
        }
        }

        # צבע-שינוי-הדגמה. שינוי צבע {
        רוחב: 100 פיקסלים;
        גובה: 100 פיקסלים;
        שם אנימציה: colorChange;
        משך האנימציה: 5s;
        -webkit-animation-name: colorChange;
        -משך webkit-animation: 5s;
        }

        אם אינך מגדיר את משך ההנפשה, ההנפשה לא תפעל מכיוון שערך ברירת המחדל הוא 0.

        ניתן להגדיר גם מספר מאפייני אנימציה אחרים:

        • animation-delay - מציין עיכוב להתחלת האנימציה. ברירת המחדל היא 0, כלומר האנימציה תושק מייד. מצוין לרוב בשניות (שניות), אך ניתן לציין אותו גם באלפיות השנייה (ms).
        • כיוון הנפשה - מציין אם אנימציה אמורה לפעול כרגיל (ברירת המחדל), הפוך, או להחליף בין קדימה לאחור. הערך החלופי עובד רק אם ספירת האנימציה-איטרציה גבוהה מ- 1.
        • מצב מילוי אנימציה - מגדיר אם, ואיך, סגנונות מההנפשה צריכים להשפיע על האלמנט כאשר ההנפשה אינה פועלת (כאשר היא מסתיימת, או כאשר יש עיכוב).
          • רגיל - ברירת המחדל. לסגנונות האנימציה אין השפעה על האלמנט כאשר האלמנט אינו מתנגן.
          • קדימה - סגנון ה- keyframe האחרון (ל- 100% או אם האנימציה לא הופעלה הפוכה) מוחל על האלמנט.
          • לאחור - סגנון ה- keyframe הראשון (מ- 0% או אם האנימציה לא פעל הפוך) מוחל על האלמנט.
        • animation-iteration-count - מציין את מספר הפעמים שיש להפעיל אנימציה.
        • פונקצית תזמון-אנימציה - מציין את עקומת המהירות של ההנפשה:
          • קלות - האנימציה מתחילה לאט, מואצת ואז מסתיימת באטיות.
          • קלות - האנימציה מתחילה לאט, מואצת ומסתיימת במהירות מלאה.
          • easy-out - האנימציה מתחילה במלוא המהירות, אך היא מאטה ככל שהיא מסתיימת.
          • ליניארי - האנימציה פועלת במלוא המהירות מההתחלה ועד הסוף.
        תמיכת דפדפנים לאנימציות

        מרבית הדפדפנים הגדולים תומכים בהנפשות CSS, אך קיימת תמיהה מוזרה עם דפדפנים המשתמשים בעיבוד ה- WebKit (Safari, Chrome, Opera).

        על מנת לוודא שהאנימציות יעבדו על אותם דפדפנים, עליכם לשכפל את הצהרת @keyframes ואת תכונות הקצאת האנימציה בעזרת תחביר מיוחד של ערכת האינטרנט..

        / * זה מיועד לדפדפנים שאינם ערכות אתרים. * /
        @keyframes moveLeft {
        מ {
        מיקום: קרוב משפחה;
        משמאל: 100 פיקסלים;
        ל {
        מיקום: קרוב משפחה;
        משמאל: 0px;
        }
        }

        / * זה מיועד לדפדפני ערכות הרשת: Chrome, Safari ואופרה. * /
        @ -webkit-keyframes moveLeft {
        מ {
        מיקום: קרוב משפחה;
        משמאל: 100 פיקסלים;
        ל {
        מיקום: קרוב משפחה;
        משמאל: 0px;
        }
        }

        #animationSupportDemo {
        שם אנימציה: moveLeft;
        משך האנימציה: 4s;
        -webkit-animation-name: moveLeft; / * כרום, ספארי ואופרה. * /
        -משך webkit-animation: 4s; / * כרום, ספארי ואופרה. * /
        }

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

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

        מתי להשתמש באנימציות CSS

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

        אנימציות CSS משמשות בצורה הטובה ביותר כדי לספק שיפורי עיצוב עדינים לדף. כמה דוגמאות: מילוי סרגלי התרשים - שליפת לשונית על הרחף - אלמנטים מעופפים כשמשתמש גולל במורד העמוד - שינויים איטיים ועדינים של צבע רקע - כפתורי "הקפצה" כדי לעודד לחיצה

        שילוב אנימציית CSS עם Javascript

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

        .מושההאנימציה {
        שם אנימציה: דוגמא;
        משך האנימציה: 5s;
        מצב אנימציה-הפעלה: מושהית;
        -webkit-animation-name: דוגמה;
        -משך webkit-animation: 5s;
        -webkit-animation-play-state: מושהה;
        }

        הערך למצב אנימציה-הפעלה כאשר לא מושהה פועל. ניתן לטפל בזה ב- Javascript:

        [element] .style.animationPlayState = "רץ"

        CSS בעולם האמיתי

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

        ישנן מספר "שיטות עבודה מומלצות" טיפוסיות שעוברות מעצבי CSS בדרך כלל על מנת להקל על העבודה שלהם ועקביות יותר.

        איפוס CSS

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

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

        איפוסים של CSS משמשים גם להגדרת סגנונות תצוגה ברירת מחדל עבור רכיבי HTML5 שאולי אין להם תצוגות ברירת מחדל בדפדפנים ישנים - אלמנטים כמו ו- .

        יש כמה תבניות איפוס CSS נפוצות. הידוע ביותר הוא זה שיצר אריק מאייר.

        / * http://meyerweb.com/eric/tools/css/reset/
        v2.0 | 20110126
        רישיון: אין (נחלת הכלל)
        * /

        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        א, abbr, ראשי תיבות, כתובת, גדול, ציטוט, קוד,
        del, dfn, em, img, ins, kbd, q, s, samp,
        קטן, שביתה, חזק, תת, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        מערך שדה, טופס, תווית, אגדה,
        שולחן, כיתוב, tbody, tfoot, thead, tr, th, td,
        מאמר, בצד, קנבס, פרטים, הטבעה,
        דמות, כיתוב תאנה, כותרת תחתונה, כותרת עליונה, קבוצת קבוצה,
        תפריט, nav, פלט, אודם, קטע, סיכום,
        זמן, סימון, אודיו, וידאו {
        שולי: 0;
        ריפוד: 0;
        גבול: 0;
        גודל גופן: 100%;
        גופן: לרשת;
        יישור אנכי: קו בסיס;
        }
        / * איפוס תפקיד תצוגה של HTML5 לדפדפנים ישנים * /
        מאמר, בצד, פרטים, כיתוב תאנה, דמות,
        כותרת תחתונה, כותרת עליונה, קבוצת קבוצה, תפריט, nav, קטע {
        בלוק תצוגה;
        }
        גוף {
        גובה קו: 1;
        }
        ol, ul {
        סגנון רשימה: אין;
        }
        blockquote, q {
        ציטוטים: אין;
        }
        הצעה: לפני, הצעה: אחרי,
        ש: לפני, ש: אחרי {
        תוכן: '';
        תוכן: אין;
        }
        שולחן {
        התמוטטות גבולות: התמוטטות;
        מרווח גבולות: 0;
        }

        מעבדי קדם-CSS

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

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

        מה קורה כשרוצים לשנות את זה?

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

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

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

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

        שני המעבדים המקובלים ביותר של CSS הם: פחות - בשימוש על ידי טוויטר Bootstrap - Sass - בשימוש על ידי Ruby on Rails, Jekyll, וכלי פיתוח רבים אחרים מבוססי Ruby..

        באופן כללי, מפתחים כותבים את גיליונות הסגנון שלהם ב- Less או Sass ואז מורכבים אותם ל- CSS לפני שהם מפעילים אתר. ישנם גם מהדרים מהצד הלקוח (בדפדפן) שנכתבים ב- Javascript, אך אלה משתמשים במשאבים רבים והם בדרך כלל מושקעים רק בפיתוח..

        בשלב זה יוצא דופן מאוד כי מפתח אתרים מקצועי לא ישתמש ב- Less או Sass.

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

        עיצוב רספונסיבי

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

        הימים ההם חלפו מזמן.

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

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

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

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

        הפיתרון לבעיה זו הוא עיצוב רספונסיבי.

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

        שלושת העמודים של עיצוב אתרים מגיבים הם:

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

        תמונות נוזלות: תמונות לעולם אינן צריכות להיות רחבות יותר מהמסך בו הן מוצגות, מה שאומר שלעולם אסור שיהיו רחבות יותר מאלמנט הרשת המכיל אותן. הפיתרון הקל ביותר לכך הוא להגדיר את הרוחב המרבי של תמונות להיות 100%. img {מקסימום רוחב: 100%; }

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

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

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

        מסגרות חזיתיות

        יש הרבה דברים שכדאי לחשוב עליהם בעת קידוד ה- CSS לעיצוב אתרים, והמבוא הקצר הזה רק נגע במעט ממנו.

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

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

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

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

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

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

        • Bootstrap - מצוות הפיתוח בטוויטר, Bootstrap תוכנן להאיץ את טיפוס האבות והפיתוח של יישומי רשת. זה מספק ממשק משתמש בצורה בצורה אינטראקטיבית מעולה ועיצוב מודגש ומיוחד. אנשים רבים מתלוננים שזה יוצר סימון נפוח (שכן), מכיוון שמשתמשים חסרי ניסיון מוזמנים להוסיף שיעורי סטייל ל- HTML. עם זאת, הוא מספק כלי נהדר ליישום מהיר של טיפוס מהיר של כל יישום אינטרנט מבוסס-צורה.
        • Pure.css - ערכת כלים מודולרית של חלקי מסגרת של CSS שניתן להשתמש בהם בנפרד או בכללותם.
        • קרן - חיוב עצמו כ"מסגרת החזיתית המגיבה והמתקדמת ביותר בעולם ", רבים נחשבים לקרן כמו Bootstrap עבור אנשים שאכפת להם מהסימון טוב.
        • שלד - שלד הוא מסגרת CSS "פשוטה מתה" המספקת רשת מגיבה, טיפוגרפיה נקייה ופשוט עיצוב מינימלי באופן כללי. זה נועד להיות "נקודת התחלה, ולא מסגרת."

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

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

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

        CSS הוא חלק חיוני ב- HTML

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

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

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

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

        בדומה למסגרת פיתוח אפליקציות, מסגרות CSS (או "חזיתיות") מספקות נקודת התחלה לפיתוח עיצוב אתר חדש. הם מספקים מבנה, הדרכה וחוות דעת כיצד יש לפרסם דף.

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

        JavaScript ו- HTML

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

        מה זה JavaScript

        JavaScript היא שפת תסריטים המובנית (כמעט) בכל דפדפני אינטרנט. הוא משמש להוספת אינטראקטיביות וסקריפטים דינמיים לדפי אינטרנט. (ניתן להשתמש בו גם בצד השרת, יחד עם כלים כמו Node.js, אבל זה לא המוקד כאן.)

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

        ECMAScript

        אם אתה עובד עם JavaScript בכלל, תוכל לרוץ את השם המוזר ביותר "ECMAScript." זהו השם הרשמי של JavaScribipt.

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

        כל דפדפני אינטרנט מיישמים את תקן ECMAScript מעט שונה (ומיקרוסופט מרחיקה לכת לקרוא ליישום שלהם JScript במקום Javascript). אז יש אנשים שישתמשו ב- "ECMAscript" כדי להתייחס באופן ספציפי לצורה הסטנדרטית של השפה, ולא לדיאלקטים או לגזרות המובנות בדפדפני האינטרנט..

        JavaScript ו- Java

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

        דגם אובייקט מסמך

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

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

        ה- DOM הוא ממשק ה- API (ממשק תכנות יישומים) שבאמצעותו אינטראקציה קוד Javascript עם מסמך ה- HTML. כאשר מסמך מועבר על ידי דפדפן, הדפדפן אינו סתם מראה לך את קוד המקור עם כמה כללי סגנון נוספים מצורפים. הדפדפן קרא את קוד המקור ויצר תצוגה מבוססת עליו. כל אלמנט במסמך הפך לאובייקט (במובן התכנותי) עם תכונות ושיטות נגישות על ידי Javascript.

        התכונות של אובייקט DOM כוללות את התכונות המוצהרות (וניתנות להצהרה) של אלמנט ה- HTML (כגון מחלקה, מזהה ושם), סגנון CSS של האלמנט ותוכן האלמנט עצמו. השיטות המשויכות לכל אובייקט DOM כוללות פונקציות לשינוי אחת מהתכונות הללו.

        דף אינטרנט שניתנו בדפדפן הוא תצוגה חיה של מודל אובייקט המסמך. משמעות הדבר היא שאם ה- DOM ישתנה בכל מקרה (למשל - התכונות של אלמנט כלשהו ישתנו) התצוגה תשתנה גם כן. זה מאפשר ל- JavaScript לעדכן או לשנות את התוכן של דף אינטרנט ללא צורך לרענן או לטעון מחדש את הדף.

        ל- JavaScript יש ממשקי API לרוב פונקציות הדפדפן, כך שהוא יכול (למשל) לקרוא את המצב הנוכחי של מסמך, להפעיל רענון, לקבל את רוחב חלון הדפדפן ולשנות את גודל חלון הדפדפן..

        באמצעות Javascript

        זה לא מדריך של JavaScript. פרק זה מנסה לספק רק הקשר מועיל למפתחי HTML העוסקים ב- JavaScript.

        כולל JavaScript בדף

        בדומה ל- CSS, ניתן לכלול JavaScript בדף אינטרנט בשתי דרכים - סקריפטים משובצים ומשאבים מקושרים.

        כדי להטביע סקריפט פשוט כלול קוד JavaScript בין התגיות.

        שינוי פונקציה צבע (toChange, newColor) {
        document.getElementbyId (toChange) .style.backgroundColor = newColor;
        }
        </ תסריט>

        כדי לכלול קובץ JavaScript נפרד למסמך HTML, קישור אליו עם האלמנט.

        סוג ="טקסט / JavaScript" src ="app.js">

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

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

        איפה לשים JavaScript

        ישנם שני מקומות שכיחים לכלול JavaScript בדף, מתחת ל .

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

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

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

        סוג ="טקסט / JavaScript" src ="app.js" אסינכרון>

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

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

        ג'ייסון

        קבוצת משנה של JavaScript, בה נגעו בחלקים ב- HTML סמנטי, היא JSON - JavaScript Object Notation.

        JavaScript היא שפה מכוונת אובייקט, שמשמעותה (בין השאר) שניתן לקודד אובייקטים בודדים (במובן האמיתי של המילה) לאובייקטים של נתונים (במובן התכנותי של המילה). לדוגמה, פוסט בלוג (אובייקט "עולם אמיתי") יכול להיות מקודד כאובייקט JavaScript:

        {
        "כותרת" : "לורם איפסום וכל הג'אז ההוא",
        "מחבר" : "אדם ווד",
        "תוכן" :
        'לורם איפסום דולור יושב אמט, קונסקטטור ממריץ אליט. Sed mauris metus, euismod non sodales eu, molestie congue nibh. Nunc eu dignissim est. Donec non est a sapien rutrum imperdiet. Nunc vitae libero nec velit porta pulvinar vitae ut sapien. Aliquam consequat orci eget libero blandit semper. מלזואדה האנונית risus nec volutpat dapibus. עלימקם יושב על-ידי ביבנדום. Suspendisse at faucibus erat. Proin quis facilisis nisl. ויוומוס יושב אמיט enim עלית. Aliquam nisl sapien, sagittis vitae nisi nec, vulputate efficitur urna. ',
        }

        כפי שראינו בסימפיקה סמנטית, ניתן להשתמש ב- JSON לקידוד נתונים על תוכן העמוד, לצריכה כ- API סמנטי לסימון. זה מועיל לאינדקס של Google.

        יש גם שימוש חשוב נוסף עבור JSON - AJAX.

        AJAX

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

        במקור, AJAX עמדה על "JavaScript ו- XML ​​אסינכרוני", מכיוון שבמקור שפת העברת הנתונים הנפוצה ביותר לסוג זה של עיצוב הייתה XML. עם זאת, JSON הפכה לשפה הנפוצה ביותר מכיוון שהיא קלה יותר, גמישה, מקורה ל- JavaScript וקלה לקריאה. (למרבה הצער, "AJAJ" לא קליט מאוד, אז השם הישן נתקע.)

        דפוס ה- AJAX לא הגיוני ברוב הדפים, אך באפליקציות אינטרנט (כמו דוא"ל למשל) זה יכול לעשות את כל ההבדל בעולם.

        AJAX נקרא "JavaScript אסינכרוני" מכיוון שקוד ה- JS מבצע שיחות לשרת בזמנים שאינם בעומס העמוד (וזה כאשר דפדפן בדרך כלל מבצע שיחות לשרת). בהתבסס על פעולות משתמש או זמן שחלף, יישום אינטרנט בסגנון AJAX ישלח בקשה לשרת מבלי לטעון מחדש את הדף. לאחר מכן משתמשים בנתונים מהתגובה הזו כדי לעדכן את ה- DOM (וכך, התצוגה למשתמש) מבלי לטעון מחדש.

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

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

        בנוסף, מכיוון ש- JSON יכול להיות התוכן היחיד של קובץ JavaScript (שיכול לכל דומיין להכיל את ה- URL של ה- src שלו), ניתן להשתמש ב- JSON בכדי להימנע מקשיי הנעילה בין מוצא. בדרך כלל, דפדפני האינטרנט מונעים מאתרי אינטרנט להגיש בקשות ולקבל נתונים מדומיינים שאינם מתחום המסמך הראשי. עם זאת, JavaScript (כמו CSS ותמונות) מתייחס כאל משאב נפרד, שיכול להגיע מכל מקום. באמצעות יישום JSON של דפוס ה- AJAX, ניתן "להסוות" את בקשת החוצה-מוצא כהכללת משאב.

        JavaScript בעולם האמיתי

        JQuery

        התחביר של JavaScript יכול להיות מעט מילולי (וסתום) לפעמים, ומספר פעולות נפוצות מאוד דורשות שפע של קוד "לוח הדוד".

        מסיבה זו כמעט כל מפתחי JS משתמשים בספריית JavaScript בשם JQuery. JQuery מספק ממשקי API תמציתיים למספר מקרים של שימוש נפוץ, כמו מעבר מסמכים, מניפולציה של DOM ו- AJAX.

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

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

        // ה "טהור" דרך JavaScript.

        document.getElementById ("לשנות") .setAttribute ("כותרת","טקסט כותר חדש");

        // דרך JQuery.

        $. ("#לשנות") .attr ("כותרת","טקסט כותר חדש");

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

        ספריות קדמיות של JavaScript

        הרבה מעצבי אתרים הגונים, בעלי הבנה טובה של HTML ו- CSS, משתמשים בשיפורי GUI של JavaScript מבלי להפוך למתכנתים של JavaScript..

        זה אפשרי מכיוון שיש מספר ספריות ממשק משתמש של JavaScript (כמו ממשק המשתמש של JQuery) ומסגרות חזיתיות (כמו Bootstrap) המספקות ממשק API HTML קל יחסית.

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

        בחינת מערך התכונות של ספריות ממשק המשתמש של JavaScript יכול לספק למפתחים מתחילים (ולא כאלה המתחילים) הרבה רעיונות קלים לשיפור האינטראקטיביות של אתר, וכלים ליישום רעיונות אלה. (רק זכרו לבחור אחת ולהיצמד אליה לפרויקט - נסו לא לערבב ולהתאים ספריות ממשק משתמש שונות. התוצאות הן כאוס חזותי ובלבול עיצובי.)

        מסגרות יישום קדמיות JavaScript

        בנפרד ממסגרות העיצוב הקדמיות (כמו Bootstrap) שנדונו בחלק הקודם בנושא CSS, מסגרת אפליקציות חזיתית היא אפליקציית תוכנת שלד, המשמשת כנקודת מוצא לא לעיצוב החזותי אלא לפונקציונליות בפועל של ה- אפליקציית אינטרנט.

        מסגרות אפליקציות JavaScript כמו Backbone.js ו- Angular מספקות תבנית מובנית עבור אפליקציית אינטרנט, אוטומציה של מספר משימות נפוצות ומספקת ארכיטקטורת עיצובית..

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

        • המודל מטפל בנתונים
        • התצוגה מציגה את הנתונים
        • הבקר מחבר את הנתונים בדגם לתצוגה ומטפל בהיגיון היישומים

        כל מסגרת של JS מיישמת טלאי זה בצורה שונה, אך כמעט כולם מבצעים גרסה מסוימת של זה.

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

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

        JavaScript הוא חזק ויעיל יותר מאי פעם

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

        HTML לעומת הכל

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

        HTML כחלופה

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

        ספרים אלקטרוניים

        תקן הקוד הפתוח הפופולרי ביותר לספרים אלקטרוניים, פורמט ה- .pub - שניתן להשתמש בו כמעט בכל הקוראים האלקטרוניים פרט לקינדל אמזון - הוא למעשה רק פורמט מבוסס HTML. קטעים בודדים, וקטעים כמו תוכן עניינים ואינדקסים, הם קבצי HTML נפרדים. כל קבצי התוכן, יחד עם נכסים כמו תמונות וקבצי CSS, פשוט מועברים לקובץ יחיד ומקבלים סיומת קובץ .epub. במובנים רבים, ספר .pub מקביל לאתר אינטרנט בו דפים רבים.

        קינדל של אמזון העדיפה תמיד פורמט קבצים קנייני. הדור הראשון של Kindles השתמש ב- .mobi, ואחריו פורמט קשור בשם .azw. אלה היו מורכבים יותר מתבנית ה- .pub ולא היו מבוססים על HTML.

        עם זאת, הדור האחרון של קינדל משתמש בפורמט החדש .azw3, המבוסס על HTML5. אמנם תמיד היה אפשר ליצור ספרי אלקטרוני של Kindle מ- HTML באמצעות תוכנת המרה, HTML הוא כיום שפת מחבר עיקרית לתוכן ספר אלקטרוני..

        אפליקציות סלולריות

        שתי הפלטפורמות הניידות הפופולריות ביותר - אנדרואיד ואייפון - משתמשים בשפות תכנות שונות לחלוטין לפיתוח אפליקציות. פיתוח אפליקציות אנדרואיד מתבצע בדרך כלל ב- Java, בעוד iOS משתמש ב- Objekt C ובשפה החדשה Swift.

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

        נוצרו כמה פתרונות שונים לבעיה זו, אך המסקרן ביותר הוא השימוש ב- HTML (יחד עם JavaScript ו- CSS).

        כלים כמו PhoneGap מאפשרים למפתחים לבנות אפליקציה פעם בשפות מבוססות דפדפן (HTML, JS, CSS) ואז לארוז אותם ליישומים למערכות הפעלה שונות. תוכנת PhoneGap עוטפת את היישום מבוסס הדפדפן ל"דפדפן חסר כרום "- מסגרת טיוח בסגנון דפדפן שרק מציגה קבצים בספריית האפליקציות ואינה מספקת ניווט פונה למשתמש. ניתן לעשות זאת עבור כל מערכת הפעלה נתמכת, ומאפשר לבנות אפליקציות פעם אחת ולפרוס אותה בכל מקום.

        HTML הפך לשפה האוניברסלית.

        אלטרנטיבות ל- HTML

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

        פלאש

        פלאש היא פלטפורמת תוכנת מולטימדיה שיכולה לפעול ברוב דפדפני האינטרנט עם תוסף.

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

        אתרים אלו הפכו במהירות מייגעים ומעצבנים, אך הטכנולוגיה הייתה תלויה מתוך הרגל (אנשים כותבים את מה שהם רגילים לכתוב) ומתוך חשש כי אתרים ויישומים הכתובים ב- HTML5 ו- JavaScript לא יתמכו בכל הדפדפנים. Internet Explorer 6 נותר בשימוש כבד שנים לאחר הופעתם של דפדפנים טובים יותר ותואמים לתקנים, כך שאנשים המשיכו לדחוף אתרים מבוססי פלאש..

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

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

        • השימוש הנפוץ ביותר ב- Flash באתרים שאינם אינטראקטיביים הוא "מבוא הפלאש", מה שמרגיז מאוד משתמשים. אף אחד לא רוצה לחכות ולצפות במופע המקדים המשעשע שלך לפני שימצא את הדברים שהם חיפשו באתר שלך. לעולם אל תעשה זאת.
        • יש אנשים שחושבים שזה רעיון טוב להכניס תוכן ותפריטים לאפליקציית Flash, כך שיוכלו ליצור אפקטים מגניבים כמו פריטי תפריט קלילים או כרטיסיות מתגלגלות. זה רעיון רע:
          • לאנשים אכפת מהתוכן שלך, ולא מהאפקטים המיוחדים שלך. הפוך את תוכן קל לקריאה וקל לניווט. אף אחד לא מתכוון להישאר באתר שלך יותר או להמליץ ​​עליו לחברים שלהם מכיוון שהם אהבו את האופן שבו התוכן שלך פרץ כמו מגילה כאשר לחצו על כפתור התפריט המעופף.
          • הצבת תוכן לפלאש, במקום HTML, מסתירה אותו ממנועי חיפוש, מה שהופך את האתר שלך לבלתי נראה באופן בלתי נראה עבור גוגל.
          • הצבת תוכן ל- Flash פירושה שכל תצוגה מסוימת של התוכן שלך היא למעשה מצב ספציפי באפליקציה הפועלת, ולא כתובת אתר הניתנת לשיתוף. זה מקשה מאוד על המשתמשים לסמן או לשתף את התוכן שלך.
          • תוכן וניווט באפליקציית Flash אינם נגישים לקוראי המסכים, מה שהופך את האתר שלך לא זמין לאנשים עם מוגבלות ראייה.
          • את רוב האפקטים שתרצו ליצור ב- Flash ניתן ליצור ביתר קלות ב- JavaScript וב- CSS, מבלי ליצור אף אחת מהבעיות הללו.
        PDF

        PDF - פורמט מסמכים נייד - הוא פורמט חוצה פלטפורמות נהדר למסמכים ממוקדי הדפסה.

        בעזרת PDF אתה יוצר תצוגה יחידה של התוכן שלך. ל- PDF יש ממדי עמוד ספציפיים, פריסה מסוימת וזרימת מסמך, גופן מסוים, גודל טקסט מסוים. מסמכי PDF יכולים להטביע מידע עבור מדפסות (כמו צבעי דיו).

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

        ובכל זאת, אנשים וארגונים רבים (בעיקר עסקים שאינם טכניים ועמותות) ממשיכים לפרסם קובצי PDF ברשת. דפוס התנהגות מוחלט הוא יצירת חוברות ממוקדות בהדפסות שהופכות אז לזמינות באתר אינטרנט, בעוד שאיש מעולם לא מקבל עותק מודפס.

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

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

        פיתרון הגיוני יותר יהיה טופס HTML מקוון, המפרסם את הנתונים ישירות ביישום מסד הנתונים. זה יחסוך עבודה ויפחית טעויות. עם HTTPS, זה יהיה בטוח אפילו יותר מאשר לשלוח דוא"ל לטפסי PDF מסביב.

        HTML מנצח

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

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

        XHTML ו- XHTML5

        XHTML

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

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

        היסטוריה

        בשנת 1998, W3C פרסם טיוטת עבודה שכותרתה Reformulating HTML ב- XML. שפה חדשה זו התבססה על HTML 4, אך דבקה בכללי התחביר המחמירים של XML. בפברואר 1999 שונה שם המפרט ל- XHTML 1.0: שפת סימון ה- HyperText eXtensible. לבסוף, בינואר 2000, XHTML הפך להיות ההמלצה הרשמית של W3C.

        הגרסה הבאה של XHTML, XHTML 1.1, פורסמה במאי 2001, שעדיין התבססה על כללים נוקשים אך התאפשרה להתאמה אישית ושינויים קלים. XHTML 2.0 התחיל כטיוטה עובדת אך ננטש בשנת 2009 לטובת HTML5 ו- XHTML5.

        עקרונות בסיסיים של XHTML

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

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

        יחד עם הכללים שהוזכרו לעיל, XHTML הציג בתחילה שלוש הגדרות פורמליות של סוג מסמך (DTD) שתואמות את שלוש הגרסאות השונות של HTML 4.01:

        • XHTML 1.0 קפדני הוא ה- XML ​​המקביל ל- HTML 4.01 קפדני, וכולל אלמנטים ותכונות שלא סומנו שהוצאו משימוש במפרט HTML 4.01. החל בנובמבר 2015, XHTML 1.0 Strict הוא סוג המסמך המשמש לדף הבית של אתר ה- World Wide Web Consortium..
        • XHTML 1.0 מעבר הוא המקבילה ל- XML ​​ל- HTML 4.01 מעבר, וכולל את האלמנטים המצגת (כגון מרכז, פונט ושביתה) שלא נכללים בגירסה המחמירה.
        • מערך מסגרות XHTML 1.0 הוא המקבילה ל- XML ​​של ערכת מסגרות HTML 4.01, ומאפשרת הגדרת מסמכי ערכת מסגרות - תכונה אינטרנטית נפוצה בסוף שנות התשעים..

        דוגמא

        הגרסאות המוקדמות של HTML היו מובנות באופן רופף וזה היה די נפוץ למצוא דפי אינטרנט עם שיטות קידוד גרועות. דף האינטרנט המתאים ב- XHTML נראה כך:

        דף האינטרנט הראשון שלי

        שלום עולם!

        אני דף אינטרנט פשוט מאוד אך מלא תפקוד עם קוד XHTML תקף!

        משאבים מקוונים

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

        התייחסות

        • מפרט רשמי של XHTML: אתר רשמי המסביר את ההחלטה לפתח XHTML ומספק משאבים נוספים לפיתוחו.
        • XHTML 1.0: המהדורה השנייה המתוקנת של טיוטת העבודה לצורך ניסוח מחדש של HTML 4 ב- XML ​​1.0
        • מפרט בסיסי של XHTML: מספק סוג מסמך XHTML שניתן לחלוק בין מכשירים כמו שולחן עבודה, טלוויזיה וטלפונים ניידים..
        • XHTML: פתרון הקוד הנקי: מספק סקירה כללית של XHTML המתמקדת בהבדלים בין HTML לתקנים חדשים.
        • מדוע לעבור ל- XHTML: מספק טיעון משכנע לעבור ל- XHTML על מנת להתאים את זרימת העבודה ולהפיק קוד נקי יותר..

        כלים

        כלים אלה יסייעו לך לבדוק את תקפות הקוד שלך ולהראות לו טוב.

        • שירות אימות HTML / XHTML: מאמת ה- W3C בודק מסמכי HTML וגם XHTML אם הם עומדים במפרט הרשמי..
        • HTML מסודר: עוזר לך לנקות אוטומטית קבצי HTML ולהתאים אותם למפרטים הסטנדרטיים. הוא פותח במקור על ידי דייב ראג'ט מ- W3C וכעת הוא פרויקט קוד פתוח ב- SourceForge.

        הדרכות

        אם אתה באמת רוצה לצלול בפיתוח XHTML, הדרכות אלה צריכות לגרום לך להתקדם.

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

        ספרים

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

        • HTML, XHTML ו- CSS: מדריך QuickStart Visual (2006) מאת אליזבת קסטרו: מסביר את כל חיוני HTML ו- XHTML בשפה המתאימה למתחילים. בספר יש הרבה דוגמאות חזותיות והוא כולל אתר מלווה עם חומר נוסף, דוגמאות, עדכונים ועוד.
        • HTML, XHTML ו- CSS For Dummies (2011) מאת Tittel and Noble: הפניה מקדימה ל- HTML, XHTML ו- CSS המלמדת כיצד ליצור מסמכי XHTML, ליישם אותם עקרונות על CMS פופולרי כמו WordPress ו- Drupal, ועיצוב לנייד. מכשירים.
        • התחלת תכנות אינטרנט עם HTML, XHTML ו- CSS (2011) מאת ג'ון דוקט: מלמד אותך לכתוב דפי אינטרנט באמצעות HTML, XHTML ו- CSS. זה עוקב אחר עקרונות מבוססי סטנדרטים, אך גם מלמד את הקוראים דרכים סביב בעיות שעשויות להתמודד איתן באמצעות HTML (X).

        XHTML היום

        XHTML כפי שנוצר לראשונה כבר לא מפותח ומתוחזק באופן פעיל. הסיבה העיקרית לנפילתה מהחסד הייתה הטיפול בשגיאות קפדנית מאוד שגרמה לדפי אינטרנט להפסיק את העיבוד כאשר נתקלה שגיאה. זה הוביל להקמתה של קבוצת טכנולוגיות היישום של הייפר-טקסט (WHATWG) שהחלה לעבוד על HTML5. הם תרמו להתפרקות בסופו של דבר של קבוצת העבודה XHTML 2.0.

        כיום כל העבודות של W3C מתמקדות ב- HTML5 ותחביר XHTML, המכונה XHTML5.1, שמוגדר לצד HTML5 בטיוטת HTML5..

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

        HTML5

        HTML5

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

        היסטוריה ומבוא

        עברנו על ההיסטוריה של HTML כפי שהיא עברה מגרסאות 1 עד 4. אבל ההיסטוריה של HTML5 מעניינת וחשובה עוד יותר.

        הדרך ל- HTML 5

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

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

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

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

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

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

        בשנת 2004 הציגו מוזילה ואופרה ל- W3C נייר עמדה הדוגל במה שיהפוך לימים ל- HTML5. האיטציה החדשה של השפה תתמוך בפונקציונליות אינטראקטיבית חדשה ובמדיה עשירה, תוך שהיא תואמת לאחור לדפדפני אינטרנט תואמים תקנים..

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

        WHATWG החל לעבוד על HTML5 כמעט מייד, והטיוטה הציבורית הראשונה פורסמה בשנת 2008. יצרני הדפדפנים החלו ליישם ניסויים חלקים מהתקן, שהמשיכו להתפתח..

        "המלצת מועמדים" יציבה יצאה בשנת 2012, והמלצת W3C היציבה לחלוטין יצאה בשנת 2014. באותה עת, כל הדפדפנים הגדולים תמכו בחלקים הקריטיים ביותר בתקן.

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

        מה חדש ב- HTML5?

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

        סימון

        השינויים בסימון ל- HTML5 מתחלקים בדרך כלל למספר קטגוריות.

        סמנטיקה

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

        • .

        אלמנטים סמנטיים נוספים שנוספו ב- HTML5 כוללים:

        • ומשמשים לאיורים ותרשימים;
        • המגדיר טקסט מודגש או מסומן;
        • המגדיר זמן תאריך.

        HTML5 מבהיר זאת גם ויש להעדיף על פני ו .

        מולטימדיה

        אלמנטים חדשים נוספו ל- HTML5 לתמיכה במדיה:

        • .

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

        ל- HTML5 יש תמיכה מפורשת גם בגרפיקה וקטורית מדרגית (SVG).

        אינטראקטיביות

        ל- HTML5 מספר אלמנטים וטפסים חדשים מסוגים המסייעים לתמוך בשפה כפלטפורמת יישומים. אלו כוללים:

        • .

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

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

        • ניתנת לסיפוק
        • תפריט הקשר
        • נתונים-*
        • נגרר
        • איזור נפילה
        • בדיקת איות.
        כללי Lexing וניתוח

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

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

        ממשקי API של דפדפן ו- DOM

        HTML5 מציין מספר ממשקי API של JavaScript המיועדים לאינטראקציה עם DOM (מודל אובייקט המסמך - התוכן שבדף) ועם הדפדפן. אלו כוללים:

        • בד, שהוזכר לעיל, לביצוע גרפיקה בתוך הדף.
        • הפעלת מדיה מתוזמנת לשימוש עם ו- .
        • בדיקות מצב מקוון / לא מקוון.
        • רישום מטפל מסוג MIME ופרוטוקול, המאפשר לדפדפן לבחור אתר כדרך ברירת המחדל להתמודד עם סוג קובץ או פרוטוקול תקשורת מסוים. לדוגמה, לאפשר ליישום דואר אלקטרוני לטפל בקישורי mailto: קישורים.
        • מיקרו-נתונים, המאפשרים קינון של מטא נתונים סמנטיים כתכונות.
        • העברת מסמכים צולבים, המאפשרת לשני עמודים משני מקורות דומיין שונים, לפתוח בשני קשרים שונים של דפדפן, לתקשר זה עם זה..
        • אחסון ברשת, מאגר נתונים קבוע של ערכי מפתח הדומה לעוגיות, אך קל יותר לשימוש ובעל נפח אחסון גדול יותר.

        ההצלחה של HTML5

        ניתן לשפוט את ההצלחה של HTML5 בשתי ספירות:

        • עד כמה המפרט משיג את יעדיו
        • עד כמה האימוץ שלה נפוץ.

        בשתי הספירות, HTML5 זכה להצלחה רבה.

        המטרות של HTML5 היו:

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

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

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

        מסמכים שנוצרו ב- HTML5 מוצגים היטב בדפדפנים מדור קודם, גם אם יישומי אינטרנט מתקדמים יותר אינם עובדים.

        האימוץ היה מהיר, החל עוד לפני שהסטנדרט היה רשמי. נכון לכתיבת שורות אלה, מרבית עשרת המיליון האתרים המובילים משתמשים ב- HTML5. מה שכן, רוב תוכן האינטרנט החדש מיוצר ב- HTML5.

        השימוש מרתק עוד יותר היה HTML5 מחוץ לדפדפן. פלטפורמות כמו Electron לשולחן העבודה ו- Phonegap לנייד הפכו את HTML5 (עם CSS3 ו- JavaScript) לשפת יישום מקומית.

        משאבי HTML5 כלליים

        • המלצת HTML5 W3C ו- WHATWG HTML Living Standard הם שני המקורות הרשמיים המגדירים את HTML5.
        • ה- W3C מציע סדרת השתלמויות בנושא HTML5:
          • מבוא ל- HTML5
          • HTML5 חלק 1: יסודות קידוד HTML5 ושיטות עבודה מומלצות
          • HTML5 חלק 2: טכניקות מתקדמות לעיצוב אפליקציות HTML5
        • רשת המפתחים של מוזילה מציעה הפניה מקיפה ל- HTML5.

        HTML5 הוא העתיד

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

        משאב שמע ווידיאו

        לפני שהגיע HTML5, הטמעת שמע ווידאו בדפי אינטרנט לא הייתה פשוטה. טכנולוגיות שונות וסוגי MIME דרשו תוספים שונים.

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

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

        כדי להטמיע אודיו או וידאו, תוכלו להשתמש באלמנטים החדשים וה- HTML5. הנה דוגמה:

        אנא שדרג את הדפדפן שלך.

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

        הטמעת וידאו

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

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

        תכונות האלמנט

        בתוך האלמנט תוכלו לציין תכונות שונות:

        רוחב גובה

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

        יש לציין בפיקסלים את רוחב וגובה הסרטון.

        פקדים

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

        הפעלה אוטומטית

        הפעלה אוטומטית תאלץ את הווידיאו להתחיל לשחק במכשירים שולחניים, ללא כל התערבות מצד המשתמש. להצגה ללא הפעלה אוטומטית, פשוט השמיט את התכונה.

        במכשירים ניידים מתעלמת מתכונת ההפעלה האוטומטית.

        הטמעת שמע

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

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

        תכונות האלמנט

        בתוך האלמנט תוכלו לציין תכונות שונות:

        לולאה

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

        פקדים

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

        הפעלה אוטומטית

        תכונת ההפעלה האוטומטית תאלץ את השמע להתחיל לנגן אוטומטית. כדי להטמיע את השמע ללא הפעלה אוטומטית, פשוט השמיט את התכונה.

        מושתק

        התכונה המושתקת תשתיק את עוצמת הקול בעת טעינת השמע.

        טעינה מוקדמת

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

        האלמנט

        האלמנט מגדיר את הקובץ ואת סוג MIME, ויש להשתמש בו בתוך האלמנט או. חייב להיות לפחות אלמנט אחד. באפשרותך להוסיף אלמנטים נוספים אם ברצונך לציין גרסאות חלופיות לקובץ.

        לדוגמה:

        הדפדפן שלך אינו תומך בתג הווידיאו.

        תכונות האלמנט

        יש את התכונות הבאות:

        src

        התכונה src מציינת את נתיב המקור ואת שם הקובץ עבור קובץ הווידיאו או השמע.

        סוג

        סוג MIME של הקובץ.

        עבור וידאו, ערכים מקובלים הם video / mp4, video / webm, and video / ogg. עבור שמע, ערכים מקובלים הם שמע / MPEG, שמע / WAV, ושמע / OGG.

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

        כדי לקבל את הסיכוי הטוב ביותר לתאימות בין דפדפנים, מומלץ להשתמש בסרט הווידיאו / mp4 MIME עבור וידאו, וסוג ה- MIME שמע / mpeg הוא הטוב ביותר לאודיו. אתה יכול לציין אלמנטים מרובים אם ברצונך לספק גרסת OGG וגירסת mp4 של אותו וידאו, למשל.

        האלמנט

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

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

        תכונות האלמנט

        לאלמנט התכונות הבאות:

        src

        נתיב המקור ושם הקובץ של קובץ הטקסט.

        סוג

        בדומה לתכונה type, המאפיין kind מציין את אופי הקובץ. אתה יכול להשתמש בכיתובים, פרקים, תיאורים, מטא נתונים או כתוביות.

        srclang

        התכונה srclang מאפשרת לך לציין את השפה של קובץ הטקסט. השתמש בקוד השפה המתאים.

        ברירת מחדל

        השתמש במאפיין ברירת המחדל כדי לציין איזו צריכה להיות ברירת המחדל.

        תווית

        נותן לרצועת הטקסט שם.

        משאבי שמע ווידאו

        • מוזילה פיתחה את המדריך המצוין הזה, תוך שימוש באודיו ווידאו HTML5. זה ייקח אותך משימוש פשוט לפיתוח מתקדם.
        • אפל פרסמה הנחיות ספציפיות למפתחים. זהו קריאה כדאית אם אתם מפתחים עבור iOS או Safari.
        • למיקרוסופט הנחיות משלה לאודיו ווידאו HTML5 ב- Internet Explorer.

        מטמון יישומים

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

        מטמון יישומים (או "AppCache") הוא תכונה המאפשרת למפתחים לציין משאבים שאפשר יהיה להשיג מראש ולאחסן אותם באופן מקומי.

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

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

        עם זאת, AppCache עדיין שמיש והדרך היחידה להשיג אפקטים מסוימים.

        כדי לעזור לך להתמודד עם הבלבול הזה, ריכזנו עבורכם את מיטב ההדרכות והמשאבים בנושא Cache Application, הבוחנים את הנושא ממגוון זוויות..

        הדרכות במטמון יישומים

        • מדריך למתחילים לשימוש במטמון היישומים הוא אחד ממדריכי ההקדמה הטובים ביותר בנושא.
        • השימוש במטמון היישומים הוא הדרכה טכנית ממוקדת מפתחים מרשת המפתחים של מוזילה.
        • בואו לקחת את זה במצב לא מקוון הוא הסבר מפורט וסיפורי כיצד להשתמש ב- AppCache.
        • השימוש במטמון יישומי HTML5 ביישומי אינטרנט ניידים מכסה שימוש כללי ב- AppCache ובוחן סוגיות מיוחדות בעת השימוש בו בעת פיתוח אפליקציות אינטרנט HTML5 לדפדפני מובייל..
        • השימוש במטמון יישומי HTML 5 ליישומי עמוד בודד מפרט את השימוש ב- AppCache בהקשר של יישום Ember.js.
        • הדרכה: כיצד ליצור יישום אינטרנט מקוון HTML5 משתמש בדוגמה של קורא RSS כדי להסביר כיצד לבנות יישום אינטרנט שעובד במצב לא מקוון. מעניין במיוחד כאן השימוש באפליקציית AppCache יחד עם מספר חנויות נתונים אחרות ב- HTML כמו עוגיות, אחסון מקומי ו- WebSQL.
        • בניית פשוט-לרשימת המטלות המקוונת של דפדפנים באמצעות IndexedDB ו- WebSQL בוחנת בניית אפליקציית רשימת מטלות מקוונת-ראשונה למשימה, העובדת במספר דפדפנים עם תמיכה משתנה עבור תכונות אחסון נתונים לא מקוונות. מטמון היישומים משמש יחד עם IndexedDB ו- WebSQL.
        • יצירת אפליקציה לא מקוונת באמצעות מטמון אפליקציות HTML5 של HTML מפרט את השימוש ב- AppCache, כולל הוראות צעד אחר צעד כיצד ליצור מניפסט ופרטים אודות השימוש ב- .htaccess כדי להגיש את קובץ המניפסט כראוי ב- Apache..
        • יצירת יישומי אינטרנט לא מקוונים של HTML5 בוחנת את הפרטים והיציאות של מספר שיטות אחסון נתונים מקומיות, כולל AppCache.
        • הוספת מטמון אפליקציות HTML5 כדי להאיץ את אפליקציית האינטרנט שלך תוך 5 דקות היא הדרכה קצרה שתביא אותך במהירות באמצעות AppCache. המיקוד במדריך זה הוא בשימוש במטמון כדי להאיץ את חווית האתר המקוון, ולא לספק חווית אפליקציות לא מקוונת.
        • הפעלת יישומי האינטרנט שלך במצב לא מקוון באמצעות HTML5 AppCache מכסה את מניפסט המטמון וגם את ממשק ה- API של JavaScript, המפרט אירועים ופעולות הקשורות במטמון..
        • מה זה מטמון יישומים? מספק סקירה רמה גבוהה של AppCache.
        • בנה יישום מקוון HTML5 באמצעות מטמון יישומים, אחסון באינטרנט ו- ASP.NET MVC מספק מבט מפורט על אופן פעולתו של AppCache, עם כיסוי מלא על בניית קובץ מניפסט כראוי. לאחר ההסבר הכללי הזה, ההדרכה ממשיכה להראות כיצד לנהל תהליך זה ביישום ASP.NET.

        חומרי למידה מטמון יישומים נוספים

        • שיטות עבודה מומלצות עבור אפליקציית אינטרנט מהירה יותר כאשר HTML5 נוגע רק במטמון היישומים בקטע אחד, אך מועיל מאוד להבין כיצד משתמשים במטמון אפליקציות כחלק מאסטרטגיית ביצועים גדולה יותר..
        • טיפים בעת השימוש במטמון יישומים הוא רשימה של שיטות עבודה מומלצות להתמודדות עם כמה מהבעיות הנפוצות של AppCache.
        • מחיקת מטמון יישום HTML מסביר כיצד למחוק את אחסון מטמון היישומים המקומי בכמה דפדפנים. זה שימושי במיוחד במהלך פיתוח ובדיקה מקומיים, כאשר קבצי הפרויקט שלך משתנים מהר יותר מ- AppCache שמרעננים אותם.
        • מלכודות נפוצות שיש להימנע מהן בעת ​​שימוש במטמון יישומי HTML5 מכסה מספר הבעיות הנפוצות ביותר של AppCache, ומסביר כיצד להתגבר עליהם.
        • מטמון יישומים הוא Douchebag הוא טרוף מצחיק, אך מדויק מדי, בנוגע לקשיי העבודה עם מטמון היישומים. חיבור זה היה קלאסיקה מיידית בקרב מפתחים מקדימים והוא בהחלט נדרש לקרוא לכל מי שמעוניין ב- AppCache.

        הפניה למטמון יישומים

        • האם אוכל להשתמש במטמון יישומים? נותן לך סקירה מהירה של הדפדפנים התומכים ב- AppCache.

        כלים לעבודה עם מטמון יישומים

        • Validator Cache Manifest הוא כלי מקוון לאימות קבצי AppCache Manifest שלך.
        • ספריית התמיכה של AppCache של GWT היא מודול עבור ערכת הכלים האינטרנטית של גוגל המאפשרת ליצור אוטומציה של דור קבצי המניפסט של Appcache.
        • Appcache-Manifest הוא כלי Node.js להפקת קובצי Manifest Cache Manifest משורת הפקודה. הכלי כולל את חשיפת ה- MD5 של קבצי המניפסט, ומבטיח שקבצים מעודכנים ישנו את המניפסט באופן אוטומטי, וגורמים לביטול מטמון תקין אצל הלקוח.
        • CacheMan היא אפליקציה לשולחן העבודה המטפלת בדור ה- Cache Manifest.

        נע קדימה עם מטמון יישומים

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

        התחליף המיועד ל- AppCache הוא עובדי שירות. אתה יכול כבר להשתמש בעובדי שירות בכמה דפדפנים, ויש כלים מעולים ליישום שלהם בקלות. מצד שני, חלק מהדפדפנים אפילו לא החליטו אם ומתי הם יטמיעו את הפיצ'ר.

        אז מה עליכם לעשות ביישומי האינטרנט שלכם?

        לעת עתה, השתמש ב- AppCache, אך התכונן לעובדי שירות.

        משחקים, גרפיקה ואנימציות

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

        • אלמנט קנבס הוא מרחב מפת סיביות בו ניתן לצייר ולתפעל תמונות רסטריות על בסיס פיקסל אחר פיקסל..
        • SVG הוא קוד המתאר גרפיקה וקטורית בלתי תלויה ברזולוציה.

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

        SVG לעומת קנבס

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

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

        דפדפני הדפדפנים מוצגים SVGs ו- HTML5 אלמנטים בד.

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

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

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

        מצד שני, אם אתה רוצה לבצע שינוי קטן ל- SVG אתה יכול לחצות את ה- DOM ולבצע את השינוי, ואילו יש לצייר מחדש אלמנט בד שלם כדי לבצע כל שינוי.

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

        מתי להשתמש ב- SVGs ובבדים

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

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

        אם ברצונך ללמוד עוד אודות השימוש ב- SVGs, עיין במאמר שלנו בהשוואת SVGs ו- SWFs הכולל רשימה של משאבי SVG. למידע נוסף על אלמנט הבד HTML5, המשך לקרוא.

        משאבי בד

        נתחיל עם היסודות:

        • הדרכת קנבס לרשת מפתחים של מוזילה: מדריך זה מתחיל בשימוש בסיסי ועובר לכיסוי רישום של צורות, טקסט, שימוש בתמונות, יצירת טרנספורמציות ואנימציות, מניפולציה של פיקסל ועוד. בסוף הדרכה זו יצרתם אנימציות מתקדמות, פנורמה המתמדת ברציפות ואפליקציית בורר צבעים.
        • Dev.Opera HTML5 Canvas - היסודות: היכרות יסודית זו עם טכניקות ציור על בד, עבודה עם תמונות, מניפולציה מבוססת פיקסלים, כמו גם טקסט, צללים ודרגות צבע..
        • הדרכה על בד W3Schools: למד את היסודות של רישום, עבודה עם קואורדינטות, מעבר צבע, ציור של טקסט ועבודה עם תמונות. לאחר מכן החל את מה שלמדת על ידי בניית שעון בד. לבסוף, הרכיבו את הכל וצרו כמה משחקי HTML5 בסיסיים שונים.
        • JavaScript רהוט, פרק 16: רישום על בד: טקסט זה נועד לחנך מתכנתי JavaScript, ולא רק ללמד מפתחי אתרים טריקים פשוטים. כל ספר האלקטרוני האינטראקטיבי הזה הוא מכרה זהב, אבל אם המיקוד שלך נמצא בריבוי ללמוד כיצד לעבוד עם אלמנט הבד, פרק 16 יספק יסוד מוצק באופן האינטראקציה של JavaScript ואלמנט הבד ב- HTML..

        עם תפיסה איתנה של יסודות קנבס, תרצה לעבור לטכניקות מתקדמות:

        • Creative JS 31 ימי לימוד בד: שלט על אלמנט הקנבס בחודש (פחות או יותר). סיים את הסדרה הזו ותלמד מספר טכניקות אנימציה מתקדמות של קנבס.
        • מחקר מקרה של רוקי HTML5: בניין רייסר: התבונן במחקר המקרה הזה ותראה כיצד מהנדסים מקצועיים בגוגל עובדים עם JavaScript וקנבס..

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

        • CSS-Tricks למידת קנבס: הכנת משחק נחשים: CSS-Tricks ידוע במתן הדרכות ומאמרים מעולים מבחינה טכנית. עקוב אחר הדרכה זו והפק משחק נחשים מהנה ובמקביל למד כיצד לעבוד עם קנבס מהנדס מקדימה בטוויטר..
        • מדריך HTML5 Rocks No Tears למשחקי HTML5: מדריך זה יוביל אותך צעד אחר צעד בתהליך בניית משחק פולש חלל פשוט.
        • Envato Tuts + צור פאזל להחלפת אריחים מסוג HTML5: למד כיצד להשתמש בבד ו- JavaScript לבניית פאזל להחלפת אריחים במדריך זה. התוצאה תהיה אפליקציה פשוטה עם קושי מתכוונן שתוכלו להשתמש בה בכל תמונה.
        • Dev.Opera יצירת משחקי 3D Pseudo בעזרת HTML 5 Canvas ו- Raycasting: מדריך זה יראה לכם כיצד ליצור מפת משחק Pseudo 3D עם HTML5 ובד בסגנון המשחק האגדי המוקדם של שנות ה -90 Wolfenstein 3D. למרות שהדרכה זו לא תייצר משחק יורה תלת-ממדי מגוף ראשון, תלמד כיצד לייצר מפת תלת מימד בלתי ניתנת להשגה, כולל אבזרים ושומרים..

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

        • HTML5 Canvas (2013) מאת פולטון ופולטון: ללמוד לבנות יישומי אינטרנט מולטימדיה אינטראקטיביים עם קנבס ו- JavaScript. טקסט זה מכסה רישומים דו-ממדיים פשוטים, שימוש באלגוריתמים לפיתוח תנועה מבוססת מתמטיקה, שימוש בווידיאו ותמונות, הפיכת אפליקציות קנבס לתגובה ועוד..
        • גרפיקה מוגדרת של JavaScript: עם קנבס HTML5, jQuery ועוד (2011) מאת רפאלה ססקו: טקסט מתקדם זה יעזור לך לשלוט על קנבס HTML5 ולשלב טכניקות מתקדמות כגון זיהוי התנגשות, טיפול באובייקטים, גלילה חלקה וכלי הדמיית נתונים של גוגל..
        • Core5 בד בד: גרפיקה, אנימציה ופיתוח משחקים (2011) מאת דייוויד גירי: זה לא טקסט למתחילים. זה מיועד לקריאה על ידי מפתחים מנוסים שיש להם תפיסת רמת ביניים של JavaScript. בעוד טקסט זה מכסה יסודות קנבס, הוא מתמקד בנושאים מתקדמים כמו פיתוח משחקים, בקרות אפליקציה מותאמות אישית, יישום פיזיקה למשחקי HTML5 ופיתוח אפליקציות לנייד..

        אלמנטים אינטראקטיביים

        HTML5 הוסיף כמה תכונות כדי להקל על יצירת דפי אינטרנט אינטראקטיביים.

        פרטים ותגיות סיכום

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

          ו
        • תגים, אלה הם סטטיים ולא ניתן לקרוס אותם.
          אלמנט

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

            תגית. הדוגמה הבאה מציגה דרך להתחיל קטע קוד בתג זה:

            ...

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

            אלמנט

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

            ניתן לציין את תוכן תג הסיכום על ידי כל רכיב HTML כולל

            או

              . להלן דוגמא פשוטה לשימוש בתגיות ותגיות:

              תווית רשימה

              מידע מפורט כאן...

              אפשר גם לקנן את התגים ובתגובות בתוך קבוצה אחרת. פעולה זו תיצור רשימה מתקפלת / הניתנת להרחבה בתוך רשימה אחרת.

              להלן דוגמה לרשימה ברשימה אחרת באמצעות התגים וה-:

              רשימת פריטים

              פריט 1

              פריט 2

              פריט 3

              פריט א

              פריט ב

              פריט 4

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

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

              תגיות תפריט ותפריט

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

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

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

              אלמנט

              בכל פעם שצריך להוסיף פריט בתפריט, סדרת הפריטים צריכה להתחיל בתג. סדרה זו מסתיימת בתג הסיום, .

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

              ...

              במקרה זה, אלמנטים מהתפריט המותאם אישית יופיעו כאשר זכות המשתמש לוחצת על כפתור העכבר בתוך "tmpDiv." כמו רוב תגי HTML5, לתג התפריט יש גם תכונות הנקראות תווית וסוג.

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

              אלמנט

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

              התכונות של התג של menuitem כוללות תווית, סמל וקליק.

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

              הפעולות שמבצע התכונה onclick עשויות לבצע קוד JavaScript. לדוגמה, משתמשים יכולים לראות תיבת התראה. להלן דוגמה כיצד להגדיר תגית menuitem שתציג קופץ שאומר "שלום":

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

              גרור ושחרר הילידים

              לפני HTLM5, המפתחים נאלצו להשתמש בספריות JavaScript כמו UQ של jQuery או Dojo כדי להוסיף אנימציות גרירה ושחרור לאתרי אינטרנט ואפליקציות..

              עם זאת, HTML5 מוסיף תמיכה בדפדפן מקורי לאירועי גרירה ושחרור, ממשק API של JavaScript וסימון ייעודי לתמיכה באינטראקציות אלה. בקטע זה, נסקור גרירה ושחרור ב- HTML5 ונקוד ליישום בסיסי של תכונה זו.

              אבני בניין

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

              • אלמנט מקור: האלמנט שגורר, המיועד ככזה על ידי תכונה HTML5 draggable ="נכון".
              • אלמנט מטרה: האלמנט בו יוחלל האלמנט שנגרר, המיועד ככזה על ידי תכונת HTML5 droppable ="נכון".
              • עומס מטען: הנתונים שיש להעביר כאשר נשמט אלמנט נגרר.

              גרור ושחרר אירועי API

              ממשק ה- API של JavaScript כולל שישה אירועים ואובייקט אחד בו תצטרכו להשתמש בכדי ליצור אינטראקציה של גרירה ושחרור.

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

              דוגמה לגרירה ושחרור

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

              המאמר ששימש השראה לדוגמא זו הוא סלעי HTML5: Native HTML5 Drag and Drop.

              נתחיל עם ה- HTML

              יישום DnD מועדף
              HTML51
              jQuery UI2
              Dojo3

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

              לכל חטיבה ניתנה תכונה של droppable ="נכון" וניתן לגרירה ="נכון" כדי לשקף את העובדה שאנחנו הולכים להפוך את השלושה להחלפה זה עם זה.

              מאפשר להוסיף קצת סטיילינג בסיסי.

              #boxes {
              יישור טקסט: מרכז;
              רוחב: 100%;
              רוחב מקסימאלי: 658 פיקסלים;
              שולי: 0 אוטומטי;
              שולי: 0 אוטומטי;
              font-family: 'Source Sans Pro', FreeSans, Arimo,"דרואיד סאנס",הלווטיקה, אריאל, סאנס-סריף;
              הצפה: אוטומטי;
              }
              .כותרת {
              בלוק תצוגה;
              גודל גופן: 1.25em;
              ריפוד: 10px;
              }
              .קופסא {
              צבע רקע: # bcd5e0;
              גבול: 2px מוצק #aaa;
              שולי: 10px;
              סמן: להזיז;
              הצפה: אוטומטי;
              }
              .box .dnd-tech {
              גודל גופן: 1em;
              תצוגה: inline-block;
              ריפוד: 10px 0;
              }
              .תיבה. מיקום {
              גודל גופן: 1em;
              לצוף: שמאל;
              ריפוד: 10px;
              גבול-ימין: 2px מוצק #aaa;
              צבע: #fff;
              צבע רקע: # 0a5194;
              }

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

              גרור ושחרר

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

              .box.dragged {
              אטימות: .5;
              }
              .box.over {
              גבול: מקצה 2 פיקסלים # 222;
              אטימות: .5;
              }

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

              פונקציה dragStartHandler (ה) {
              this.classList.add ('נגרר');
              }

              פונקציה dragEnterHandler (ה) {
              this.classList.add ('נגמר');
              }

              פונקציה dragLeaveHandler (ה) {
              this.classList.remove ('נגמר');
              }

              פונקציה dragEndHandler (ה) {
              [] .forEach.call (תיבות, פונקציה (תיבה) {
              box.classList.remove ('נגמר', 'נגרר');
              });
              }
              var boxes = document.querySelectorAll ('# boxes .box');

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

              הפונקציה הראשונה, dragStartHandler, תוסיף את הכיתה שנגררה לאלמנט שנגרר.

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

              הפונקציה הסופית עוברת בין כל התיבות ומסלקת את הכיתות מעל וגררו.

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

              פונקציה dragOverHandler (ה) {
              אם (e.preventDefault) {
              e.preventDefault ();
              }
              להחזיר שקר;
              }

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

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

              פונקציה dragStartHandler (ה) {
              this.classList.add ('נגרר');

              dragData = זה;
              e.dataTransfer.setData ('text / html', this.firstElementChild.innerHTML);
              }

              פונקציה dropHandler (ה) {
              אם (e.stopPropagation) {
              e.stopPropagation ();
              }
              אם (dragData! = זה) {
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML;
              this.firstElementChild.innerHTML = e.dataTransfer.getData ('text / html');
              }
              להחזיר שקר;
              }

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

              השנייה משתמשת בשיטת setData של האובייקט dataTransfer כדי להקצות את ה- HTML הפנימי של אלמנט הילד הראשון של התיבה שנבחרה (אלמנט השם) לאובייקט dataTransfer..

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

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

              [] .forEach.call (תיבות, פונקציה (תיבה) {
              box.addEventListener ('dragstart', dragStartHandler, false);
              box.addEventListener ('dragenter', dragEnterHandler, false);
              box.addEventListener ('dragover', dragOverHandler, false);
              box.addEventListener ('dragleave', dragLeaveHandler, false);
              box.addEventListener ('drop', dropHandler, false);
              box.addEventListener ('dragend', dragEndHandler, false);
              });

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

              #boxes {
              יישור טקסט: מרכז;
              רוחב: 100%;
              רוחב מקסימאלי: 658 פיקסלים;
              שולי: 0 אוטומטי;
              font-family: 'Source Sans Pro', FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
              הצפה: אוטומטי;
              }
              .כותרת {
              בלוק תצוגה;
              גודל גופן: 1.25em;
              ריפוד: 10px;
              }
              .קופסא {
              צבע רקע: # bcd5e0;
              גבול: 2px מוצק #aaa;
              שולי: 10px;
              סמן: להזיז;
              הצפה: אוטומטי;
              }
              .box .dnd-tech {
              גודל גופן: 1em;
              תצוגה: inline-block;
              ריפוד: 10px 0;
              }
              .תיבה. מיקום {
              גודל גופן: 1em;
              לצוף: שמאל;
              ריפוד: 10px;
              גבול-ימין: 2px מוצק #aaa;
              צבע: #fff;
              צבע רקע: # 0a5194;
              }
              .box.dragged {
              אטימות: .5;
              }
              .box.over {
              גבול: מקצה 2 פיקסלים # 222;
              אטימות: .5;
              }

              יישום DnD מועדף

              HTML51
              jQuery UI2
              Dojo3

              פונקציה dragStartHandler (ה) {
              this.classList.add ('נגרר');

              dragData = זה;
              e.dataTransfer.setData ('טקסט / html', this.firstElementChild.innerHTML);

              }

              פונקציה dragEnterHandler (ה) {
              this.classList.add ('נגמר');
              }

              פונקציה dragLeaveHandler (ה) {
              this.classList.remove ('נגמר');
              }

              פונקציה dragOverHandler (ה) {
              אם (e.preventDefault) {
              e.preventDefault ();
              }
              להחזיר שקר;
              }

              פונקציה dropHandler (ה) {
              אם (e.stopPropagation) {
              e.stopPropagation ();
              }
              אם (dragData! = זה) {
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML;
              this.firstElementChild.innerHTML = e.dataTransfer.getData ('טקסט / html');
              }
              להחזיר שקר;
              }

              פונקציה dragEndHandler (ה) {
              [] .forEach.call (תיבות, פונקציה (תיבה) {
              box.classList.remove ('נגמר', 'נגרר');
              });
              }

              var boxes = document.querySelectorAll ('# תיבות .box');
              [] .forEach.call (תיבות, פונקציה (תיבה) {
              box.addEventListener ('dragstart', dragStartHandler, false);
              box.addEventListener ('dragenter', dragEnterHandler, false);
              box.addEventListener ('dragover', dragOverHandler, false);
              box.addEventListener ('dragleave', dragLeaveHandler, false);
              box.addEventListener ('drop', dropHandler, false);
              box.addEventListener ('dragend', dragEndHandler, false);
              });

              למה אתה מחכה?

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

              Iframe

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

              לשם מה משתמשים במסגרות מסגרות?

              אחד השימושים הנפוצים ביותר עבור iframes ברשת המודרנית הוא הטמעת מדיה זורמת בדף אינטרנט. אתרי זרימת מדיה כמו Spotify, Vimeo ו- YouTube משתמשים ב- iframes כדי לאפשר הטמעה של תוכן שלהם באתרים אחרים..

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

              הוסף פיסת קוד זו לדף אינטרנט ו- iframe ישמש לטעינת הסרטון ב- YouTube שמתארח בכתובת האתר שמפנה src תכונה.

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

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

              Iframe של HTML 4.01

              אלמנט iframe הוצג ב- HTML 4.01 וכולל ארבע תכונות עיקריות:

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

              HTML 4.01 כלל גם מגוון תכונות נוספות בעלות חשיבות משנית. עם זאת, רבים מהם הוצאו משימוש או הוסרו על הסף ב HTML5.

              תכונות Iframe הוסרו על ידי HTML5

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

              • תכונה יישור הוצאה משימוש לטובת השימוש במאפייני ה- CSS לצוף, לתצוגה ולשוליים לשליטה בפריסת iframe.
              • התכונה של גבול המסגרת הופעלה לטובת גבולות CSS.
              • תכונות גובה השוליים ורוחב השוליים פחתו לטובת ריפוד CSS.
              • מאפיין הגלילה הופחת לטובת יישום הצפת יתר: מוסתר; להסתרת סרגלי גלילה של iframe.

              תכונה אחת נוספת, longdesc, סבלה משימוש לרעה נרחב. כתוצאה מכך, הוא מיושן כעת.

              תכונות Iframe שנוספו על ידי HTML5

              HTML5 הוסיף שתי תכונות חדשות לרכיב iframe: ארגז חול ו- srcdoc.

              התכונה ארגז חול משמשת להגבלת היכולות של תוכן iframe.

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

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

              ניתן להשתמש במאפיין srcdoc כדי לציין HTML שניתן להגיש ב- iframe. לדוגמה, הקוד הבא יציב תמונה ב- iframe:

              משאבי Iframe

              אם ברצונך ללמוד עוד אודות iframes, אחד המשאבים המקיפים ביותר הוא דף הפניה לרשת המפתח של Iframe ל- Mozilla Developer. כאן תוכלו למצוא תיאור מפורט של כל תכונה iframe, כולל דיון מעמיק בכל הערכים האפשריים של ארגז חול.

              מיקרו-נתונים

              כשאתה מבקר בביקורות האירוח שלנו אתה עשוי לראות משהו כמו "752 ביקורות" ודירוג מארח "4 מתוך 5 כוכבים". אינסטינקטיבית, הבנתם ששולבו 752 ביקורות משתמשים כדי ליצור דירוג מארח מצטבר של 4 מתוך 5 כוכבים.

              עם זאת, מנועי חיפוש אינם חכמים כמוך וכאן נכנסים מיקרו-נתונים.

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

              יסודות מיקרו-נתונים

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

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

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

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

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

              סימון מיקרו-נתונים

              ישנן ארבע תכונות מיקרו-נתונים שהן חלק ממפרט HTML5:

              • itemscope היא התכונה שיוצרת פריט חדש.
              • סוג הפריט מתווסף לצד itemscope כדי להגדיר את סוג הפריט שנוצר. ברוב המקרים משתמשים בסוג פריט schema.org.
              • itemprop מתווסף לכל אלמנט שמכיל מאפיין מהסוג.
              • itemref מתווסף לרכיב itemscope ומשייך אלמנטים שאינם מכוונים לצאצאים של אלמנט itemscope לפריט..

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

              אירוח סופר לינוקס

              מדורג:
              4 מתוך 5 כוכבים מאת
              423 ביקורות משתמשים אמיתיות.

              סקירת משתמשים מומלצת

              זה מארח נהדר! אני אוהב אותם!
              5 מתוך 5 כוכבים!

              הקוד למעלה יוצר פריט שמכיל מספר זוגות ערך-שם:

              • ראשית, יצרנו פריט תאגיד.
              • שם הפריט מוגדר כ- Super Linux Hosting.
              • כתובת האתר של הפריט מוגדרת ל- http://superlinuxhosting.com
              • הסקירה המצטברת של הפריט היא פריט מקונן הכולל שני זוגות ערך-שם: ערך דירוג של 4 מתוך 5 כוכבים וספירת סקירה של 423.
              • לבסוף, באמצעות תכונת itemref שנוספה לאלמנט הראשון, צמד ערך המשפחה-שם הוא סקירה שערכו כולל שני זוגות-ערך-שם: תיאור ודירוג של 5 מתוך 5 כוכבים.

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

              משאבי מיקרו-נתונים

              אם אתה רוצה ללמוד יותר על מיקרו-נתונים יש שני מקומות שאתה צריך ללכת אליו:

              • תחילת העבודה עם Schema.org באמצעות מיקרו-נתונים זה מבוא קל לעקוב בנושא זה. בנוסף, תרצה לשמור רשימה זו של כל סוגי הפריטים schema.org בהישג יד.
              • HTML: תקן החיים, סעיף 5 מיקרו-נתונים הם מבט טכני למיקרו-נתונים. אם אתה רוצה ללמוד להשתמש במיקרו-נתונים עבור יישומים מותאמים אישית מעבר ל schema.org, אלה המשאבים שאתה מחפש.

              תכונות גלובליות

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

              תוכן

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

              • מפתח גישה: מקצה קיצור מקשים לאלמנט.
              • class: מוסיף שם מחלקה כדי לאפשר מיקוד לאלמנט בגיליונות סגנון מדורגים (CSS) לעיצוב או לתוכנית JavaScript..
              • contenteditable: הופך את האלמנט לעריכה על ידי מבקר באתר.
              • תפריט הקשר: משייך אפשרות תפריט הקשר מותאם אישית לאלמנט.
              • נתונים- *: מאפיין נתונים מותאם אישית שניתן להשתמש בו כדי להחזיק מידע ספציפי לעמוד לבחירת שימוש בגיליונות סגנונות של CSS או תוכניות JavaScript.
              • dir: מקצה כיווניות לתוכן הטקסטואלי של אלמנט.
              • נגרר: מאפשר גרירה של אלמנט באמצעות תמיכה מקומית ב- HTML5 לאירועי גרירה ושחרור.
              • dropzone: מגדיר את הפעולה שצריכה להתבצע כאשר פריט נגרר. האפשרויות כוללות העתקה, קישור ומעבר.
              • מוסתר: משמש להסתרת אלמנט עד להצגתו. התכונה מוסרת בעזרת JavaScript כאשר הדבר מתאים לכך.
              • id: מקצה מזהה ייחודי לאלמנט.
              • lang: מגדיר את שפת התוכן באלמנט המשויך.
              • בדיקת איות: קובעת אם יש לבדוק קלט משתמש לאיות.
              • סגנון: מאפשר חיבור של סגנונות CSS ישירות לאלמנט HTML.
              • tabindex: קובע את המיקום באינדקס הכרטיסיות בו האלמנט אמור להופיע.
              • כותרת: מוסיף טקסט המוצג כסימן כלים כאשר מבקר מרחף את העכבר מעל האלמנט.
              • תרגם: משמש למניעת תרגום דפדפן של התוכן הטקסטואלי של רכיבי HTML ספציפיים.

              מטפלים באירועים

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

              הרשימה שלהלן כוללת את כל תכונות מטפל האירועים ולאחריהן תיאור האירוע שמפעיל את המטפל.

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

              • onabort: טעינת האלמנט בוטלה.
              • פוקוס onblur: אלמנט קיבל או איבד מיקוד.
              • oncancel: המשתמשים ביטלו אלמנט דו-שיח.
              • oncanplay ו- oncanplaythrough: אלמנט מדיה הוריד מספיק נתונים כדי להתחיל בהשמעה או להשלמת ההפעלה ללא חציצה.
              • onchange: הערך של אלמנט טופס, כגון קלט או אלמנט טקסטורי, השתנה.
              • onclick ו- ondblclick: לחצו על אלמנט או לחצו עליו כפול.
              • onclose: אחד מכמה אירועים קרובים שונים התרחש.
              • תפריט oncontext: תפריט ההקשר נפתח על ידי לחיצה ימנית על הרכיב.
              • oncopy, oncut ו- online: האלמנט הממוקד נחתך, הועתק או הודבק.
              • oncuechange: מסלול טקסט המשויך למשאב מדיה שינה את הרמזים המוצגים כעת.
              • ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop: אלמנט הניתן להחלפה מתמרן באמצעות ממשק ה- API של גרור ושחרור HTML5.
              • ondurationchange: תכונת המשך של אלמנט מדיה השתנתה.
              • מבוטל: גורם תקשורתי הפך ריק.
              • נדלק: סוף אלמנט תקשורתי הושג.
              • onerror: המשאב לא נטען.
              • oninput: הערך של אלמנט קלט או ניתן לתוכן השתנה.
              • onvalid: אלמנט שהוגש נכשל באימות.
              • onkeydown, onkeypress ו- on-keyup: התרחש אירוע לחיצת מקשים על מקשים.
              • onload, onloadeddata, onloaded metadata, onloadstart: משאב שלם או החלק שצוין של המשאב השלים את הטעינה.
              • onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover ו- onmouseup: התרחשה אינטראקציה מבוססת עכבר בין המשתמש לאלמנט..
              • גלגל תנועה: כפתור הגלגל של עכבר סובב.
              • onplay ו- onplaying: אלמנט מדיה החל להשמעה או הושהה (במכוון או בזמן המתנה לנתונים נוספים) ומוכן לחדש את ההפעלה.
              • onpause: הפעלת המדיה הושהתה.
              • בקידום: פעולה החלה ונמצאת בעיצומה.
              • onratechange: קצב ההפעלה של המדיה השתנה.
              • onreset: רכיב טופס אופס.
              • שינוי גודל: גודל התצוגה של המסמך השתנה.
              • גלילה מקוונת: התצוגה או האלמנט נחקרו.
              • מבוקש ומחפש: תכונה החיפוש של אלמנט מדיה שימשה או נמצאת בשימוש.
              • הבחירה באתר: חלק מהתוכן של אלמנט נבחר.
              • onshow: תפריט ההקשר הושק בעוד שלרכיב בפוקוס יש תכונה של תפריט הקשר.
              • מותקן: אחזור המדיה התעכב או נעצר במפתיע.
              • אנו שולחים: אלמנט טופס הוגש.
              • onsuspend: טעינת אלמנט מדיה הושעה.
              • ontimeupdate: תכונת השעה הנוכחית של אלמנט מדיה עודכנה.
              • ontoggle: אלמנט פרטים נפתח או נסגר.
              • שינוי נפח: נפח ההפעלה של אלמנט מדיה השתנה.
              • בהמתנה: ההפעלה נפסקה בזמן שהמתנה להורדת נתונים נוספים.

              אלמנטים של DOM

              כאשר דפדפן מייצר דף אינטרנט, הוא לא פשוט הופך את דף האינטרנט של דף האינטרנט. במקום זאת, הדפדפן בונה לראשונה מודל מקומי ואינטראקטיבי של תוכן ה- HTML של הדף.

              דגם זה, שנבנה ומוחזק באופן מקומי בזיכרון הדפדפן, נקרא דגם Object Object (DOM). בתוך ה- DOM, כל אלמנט HTML קיים כצומת יחיד, וסכום הצמתים מהווה את ה- DOM.

              גישה לדומיין

              על מנת שכתבי סקריפט כגון JavaScript יפעלו אינטראקציה עם ה- DOM, יש לציין כל צומת באמצעות תכונות ושיטות בלתי תלויות בשפה..

              תכונות ואירועים אלה מוגדרים באמצעות שפת הגדרת ממשק (IDL) ותכונות ואירועים של IDL אלה חושפים צמתים של DOM לתסריטים שנכתבים בכל שפת תכנות, אם כי JavaScript היא ללא ספק הנפוצה ביותר..

              התוצאה היא מערכת שלוקחת אלמנט HTML (לדוגמה:

              קצת טקסט

              ) ויוצר צומת DOM שמכיל את כל המידע הזה (לדוגמה: צומת p עם ערך של טקסט כלשהו ותכונות IDL className ="טקסט-גוף" וכותרת ="דוגמא").

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

              תכונות ושיטות IDL בסיסיות

              מפרט HTML5 מגדיר את ממשק HTMLElement ומפרט מספר תכונות ושיטות IDL החלות על כל רכיבי HTML.

              כל צומת DOM בודד יורש את כל התכונות והשיטות של IDL ועשוי להרחיב בממשק HTMLElement על ידי הוספת תכונות ושיטות נוספות..

              ממשק HTMLElement

              ממשק HTMLElement חל על כל צמתי ה- DOM וניתן לחלק אותם לשלוש קבוצות: תכונות מטא נתונים, אינטראקציות משתמש ומטפלים באירועים גלובליים..

              תכונות מטא נתונים כוללות:

              • תכונה IDL של הכותרת מוגדרת על ידי תכונת ה- HTML.
              • התכונה lang IDL מוגדרת על ידי התכונה lang HTML ומשמשת לזיהוי שפת התוכן המקונן בצומת DOM. אם לא מופיעה תכונה lang, משתמע השפה שהוקצתה לצומת ההורה הקרוב ביותר.
              • תכונת התרגום משמשת למניעת תרגום לקוח של תוכן דף האינטרנט. התכונה ברירת מחדל היא לתרגם = כן ברמת המסמך ויש להגדיר אותה באופן ידני לתרגום = לא עבור כל צמתים שאסור לתרגם..
              • התכונה dir קובעת את הכיוון של הטקסט הכלול. לתכונה אין ערך ברירת מחדל.
              • תכונת IDL של ערכת נתונים היא ייצוג ה- DOM הקריא של נתוני תכונות הנתונים המותאמים אישית- *. כאשר מתווספים תכונות נתונים מותאמות אישית לאלמנט HTML, למשל data-postId ="6057", תכונות נתונים אלה מצטברות לתכונה IDL יחידה של נתונים ומוקצות לצומת ה- DOM שהתקבל.

              אינטראקציות משתמשים כוללות:

              • התכונה המוסתרת היא בוליאנית שקובעת אם ניתן לראות צומת DOM או לא.
              • אירוע הקליק () מדמה אינטראקציה של משתמשים בלחיצת עכבר.
              • תכונת tabIndex קובעת את הסדר שצומת DOM יופיע באינדקס הכרטיסיות.
              • אירוע המיקוד () מדמה אינטראקציה של משתמשים בה צומת ה- DOM הממוקד נכנס למוקד.
              • שיטת הטשטוש () משמשת לביטול המיקוד של צומת ה- DOM הממוקד.
              • התכונה accessKey IDL מוגדרת על ידי תכונה אלמנט ה- HTML של מפתח access ומקצה קיצור מקשים לצומת הממוקד..
              • התכונה accessKeyLabel IDL היא ייצוג קריא של מפתח הגישה שהוקצה.
              • תכונת IDL הניתנת לעריכה מוגדרת על ידי תכונת האלמנט הניתנת לשינוי ב- HTML וקובעת אם משתמשים רשאים לערוך את צומת היעד.
              • תכונת IDL isContentEditable היא ערך בוליאני קריא המציין אם צומת היעד ניתן לעריכה.
              • תכונה IDL של בדיקת האיות היא ערך בוליאני שקובע אם יש לבדוק את התוכן של צומת DOM, בדרך כלל צומת קלט..

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

              • בלחיצה
              • פוקוס
              • לחץ על מקש
              • עומס
              • onmouseenter
              • onmouseleave
              • onmouseover
              • למעקב
              • לבחירה
              • להגיש.

              טפסים

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

              יסודות טופס HTML

              בבניית טופס HTML, בדרך כלל עליך להתחיל עם תג הטופס:

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

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

              שיפורי HTML5

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

              סוגי רכיבי קלט חדשים:

              • סוג קלט הצבע מזהה שדה שצריך לקבל צבע וכמה דפדפנים יפיקו בוחר צבע כאשר השדה בפוקוס..
              • HTML5 הציג שישה סוגים חדשים של קלט תאריך ושעה, שכל אחד מהם יפיק כרטיס תאריך בדפדפנים הנתמכים:
                • תאריך: בחר תאריך הכולל את היום, החודש והשנה.
                • שעה תאריך: בחר תאריך ושעה יחד עם מידע על אזור זמן.
                • datetime-local: בחר תאריך ושעה, אך השמיט מידע על אזור הזמן.
                • זמן: בחר זמן.
                • שבוע: בחר שבוע ושנה.
                • חודש: בחר חודש ושנה.
              • סוג קלט הדוא"ל משמש לזיהוי שדה שצריך לקבל כתובת דוא"ל. דפדפנים נתמכים יבצעו גם אימות קלט בסיסי כדי לוודא שהוקלד כתובת דוא"ל.
              • HTML5 הציג שני סוגי קלט חדשים המכוונים למספר: מספר וטווח. מספר מאפשר הזנה של כל מספר, בכפוף לאילוצי מינימום ומקסימום ערך אופציונלי. טווח יוצר סרגל מחוון, מוגבל בערכי מינימום ומקסימום, המאפשר למשתמש לבחור ערך בטווח הערכים המקובל שצוין..
              • סוג קלט החיפוש משמש לזיהוי בקשת חיפוש.
              • סוג קלט הטל משמש כדי לזהות שדה שצריך לקבל מספר טלפון. דפדפנים נתמכים יבצעו אימות קלט בסיסי כדי לאשר שנכנס מספר טלפון.
              • סוג קלט ה- url מזהה שדה שצריך לקבל כתובת URL. דפדפנים נתמכים יבצעו אימות בסיסי, והמכשירים הניידים הנתמכים עשויים להציג כפתור typepad .com.

              תכונות אלמנט קלט חדשות:

              • השלמה אוטומטית: מדליק או מכבה את ההשלמה האוטומטית של רכיב קלט. אם מופעל, ערכי השלמה אוטומטית יימשכו מכניסות הטופס השמורות.
              • מיקוד אוטומטי: מציין רכיב קלט שיהיה בפוקוס באופן אוטומטי כאשר העמוד נטען.
              • טופס: משתמש במזהה המוקצה לטופס כדי לייחס אלמנט קלט שאינו מקונן בתוך טופס עם הטופס.
              • גיבוש: מוקצה לשדה הגשה כדי לעקוף את התנהגות ברירת המחדל של טופס על ידי מתן כתובת אתר חלופית לעיבוד טפסים.
              • formenctype: נוסף לשדה הגשה כדי לציין את סוג הקידוד שיחול על נתונים שהוגשו בשיטת ההודעה.
              • formmethod: נוסף לשדה הגשה כדי לציין את שיטת HTTP, פרסם או קבל, שיש להשתמש בה לצורך הגשת טופס.
              • formnovalidate: משמש בשדה 'הגשה' כדי למנוע אימות דפדפן של נתוני טפסים.
              • formtarget: נוסף לשדה הגשה כדי לומר לדפדפן להציג את תגובת הטופס בחלון הנוכחי או בחלון חדש.
              • גובה ורוחב: משמש לציון גודל של סוג ="תמונה" טופס הגשת טופס.
              • min ו- max: משמש יחד עם סוג קלט מוכוון מספר, טווח או תאריך תאריך להקצאת ערך מינימלי ומקסימום שהערך שנבחר חייב ליפול בין.
              • מרובה: משמש יחד עם סוג הקלט של הקובץ או הדוא"ל כדי לאפשר למשתמש להוסיף ערכים מרובים.
              • תבנית: משמש להגדרת ביטוי רגיל לשימוש כדי לאמת את הנתונים שהוזנו בשדה דוא"ל, סיסמה, חיפוש, טלפון, טקסט או כתובת אתר..
              • מציין מיקום: מקצה טקסט מציין מיקום לאלמנט קלט שיוסר כאשר האלמנט יגיע למיקוד.
              • חובה: מזהה אלמנט שיש למלא לפני הגשת הטופס.
              • שלב: משמש יחד עם המספר, הטווח או סוג הקלט המוכוון לשעת תאריך כדי לקבוע את השלבים שבהם ניתן לבחור ערכים. לדוגמה, הוספת שלב ="10" למספר קלט מוגבל לערכים שבין מינימום 0 למקסימום של 30 יאפשר להגיש 0, 10, 20 או 30.

              תכונות אלמנט טופס חדשות:

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

              רכיבי צורה חדשים:

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

              רשימת הפריטים הנפתחים משויכת לרכיב קלט על ידי תכונת הרשימה החדשה. לדוגמה:

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

              נוסחה: y = mx + b

              שיפוע (מ '):

              ערך x:

              יירוט Y (ב):

              ערך Y:

              אם נכתוב פורמולת קו () ב- JavaScript כדי לעבד את החישוב ולזרוק נגיעה של CSS, נוכל לייצר את מחשבון ה- JavaScript הפשוט והכל זאת פונקציונלי:

              פורמולת קו פונקציה () {
              var y = 0;
              var m = document.getElementById ("m"). ערך;
              var x = document.getElementById ("x"). ערך;
              var b = document.getElementById ("b"). ערך;
              y = + m * + x + + b;
              document.getElementById ("y"). value = y;
              }

              # דוגמה-צורה {
              רוחב: 100%;
              רוחב מקסימאלי: 400 פיקסלים;
              שולי: 0 אוטומטי;
              גבול: 1px מוצק #bbb;
              צבע רקע: #eee;
              }
              # קלט p דוגמה בצורת דוגמה, # פלט דוגמה בצורת דוגמה {
              לצוף: מימין;
              רוחב: 100 פיקסלים;
              }
              # דוגמה-צורה p {
              הצפה: אוטומטי;
              ריפוד: 10px;
              שולי: 0;
              }
              # דוגמה בצורה p: לא (: ילד אחרון) {
              גבול-תחתון: 1px מוצק #bbb;
              }

              נוסחה: y = mx + b

              שיפוע (מ '):

              ערך x:

              יירוט Y (ב):

              ערך Y:

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

              אלמנטים סמנטיים

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

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

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

              מדוע חומר סמנטי

              סמנטיקה חשובה לפחות מארבע סיבות עיקריות:

              • סמנטיקה משפרת את הנגישות. טכנולוגיות מסייעות מסוגלות להעביר טוב יותר את המשמעות של דף אינטרנט כאשר הבחירה באלמנטים ב- HTML מספקת רמזים למשמעות תוכן העמוד.
              • סמנטיקה הופכת את התוכן לגלוי יותר. מנועי חיפוש מסוגלים להבין טוב יותר ולאינדקס את תוכן דף האינטרנט כאשר משתמשים באלמנטים ב- HTML בהתאם למטרתם הסמנטית הנכונה.
              • אלמנטים סמנטיים הם יתרון לבינאום. אלמנטים סמנטיים חדשים אודם ו- bdi הוצגו ב- HTML5 כדי להכיר טוב יותר את העובדה שפחות מ- 15% מהעולם מורכב מדוברי אנגלית ילידים..
              • סמנטיקה משפרת את יכולת ההפעלה על ידי הקלת המפתחים והיישומים להבין ולתקשר עם התוכן של דף אינטרנט.

              ככל שהצעדה לעבר האינטרנט של הכל (IOE) נמשכת ללא הפוגה, הסמנטיקה הופכת חשובה יותר ויותר.

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

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

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

              סמנטיקה ב- HTML לפני HTML5

              לאלמנטים ב- HTML תמיד הייתה משמעות סמנטית. השימוש בטופס או באלמנטים בטבלה הטיל תמיד משמעות ותכלית מסוימת לתוכן האלמנט.

              רשימות זיהו לדפדפן שהוא מסודר או לא מסודר באופיו על ידי שימוש בתגי ol ו- ul. כמו כן, יש רשימה רחבה של אלמנטים טרום HTML5 שניתן להשתמש בהם בטקסט להוסיף משמעות סמנטית:

              • תגיות ה- em והתגים החזקים מרמזים על דגש דגש חזק.
              • תגיות ה- s, del ו- ins משמשות לזיהוי מידע שאינו ישים עוד או שהוחלף במידע מעודכן.
              • התגים של הציטוט והציטוט משמשים לזיהוי ציטוטים ויצירות יצירה.
              • התגים abbr ו- dfn משמשים לקישור הערות הסבר למונח הזקוק להגדרה.
              • רכיבי הקוד, הסימפ, kbd ו- var משמשים לזיהוי סוגים ספציפיים של טקסט: קוד תכנות, פלט תוכנת מחשב לדוגמה, קלט מקלדת ומשתני פורמולה בהתאמה.
              • אלמנטים העל והתת מזהים תוכן שצריך להופיע כתכנית מנויים או כטקסט העל.

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

              מבנה מסמך HTML לפני HTML5

              לפני HTML5, האלמנט div היה המכל העיקרי ששימש להוספת מבנה למסמך דף אינטרנט. זה היה, ועדיין, די נפוץ לראות דפי אינטרנט שנבנו באמצעות divs ומייצרים מבנה מסמך שנראה כך:

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

              עם זאת, עם הזמינות של אלמנטים סמנטיים מבניים חדשים ב- HTML5, יש דרך טובה יותר.

              אלמנטים סמנטיים מבניים ב- HTML5

              HTML5 הציג את האלמנטים הבאים שישמשו במקום מרק ה- div המוצג בדוגמה לעיל. אלמנטים אלה מספקים מבנה למסמך ובמקביל הם מיישמים משמעות ספציפית לחלקים השונים של המסמך:

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

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

              אם אנו בוחנים מחדש את פריסת מרק ה- div שלנו ומשתנים אותה ליישום התגים החדשים האלה, אנו מקבלים משהו שנראה כך:

              אלמנטים סמנטיים טקסטואליים ב- HTML5

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

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

              HTML דינמי

              HTML דינמי

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

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

              השם "DHTML" הוא קצת לא נכון. בשונה משפת הסימון HTML ממנה היא שואבת את שמה, Dynamic Hypertext Markup Language הוא למעשה מונח המתאר מספר טכנולוגיות ושפות המשמשות יחד ליצירת אתרים דינמיים..

              אלה ארבעת המרכיבים העיקריים של DHTML:

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

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

              ספרים

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

              • JavaScript: המדריך הסופי (2006) מאת דייויד פלנגן: זהו המדריך הנלמד ללימוד JavaScript וכן חומר עזר מצוין לכל הענינים הקשורים ל- DHTML.
              • ויזואליזציה של נתונים אינטראקטיביים לרשת: מבוא לעיצוב עם D3 (2013) מאת סקוט מוריי: ברגע שיש לך התייחסות ליסודות DHTML, השתמש במדריך צעד אחר צעד זה כדי ללמוד את היסודות של עיצוב תוכן דינמי..
              • סקריפטים של DOM: עיצוב אתרים עם JavaScript ודגם אובייקט המסמך (2010) מאת קית 'וסאמבלס: המשאב המושלם כאשר רוצים הבנה טובה יותר של DOM ותרגול עם יישומים בעולם האמיתי..
              • אנימציית אינטרנט באמצעות JavaScript: פיתוח & עיצוב (2015) מאת ג'וליאן שפירו: אם אתה מחפש לשלוט באנימציות דרך DHTML, בדוק זאת.

              כלים

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

              • כונן דינמי: אתר זה מוקדש לספק למפתחים JavaScript חינם (וגם סקריפטים אחרים של DHTML).
              • DHTML Goodies: משאב מקוון נוסף המספק סקריפטים של DHTML (ו- Ajax) בחינם.
              • סקריפטים של ערכת JavaScript: משאב נוסף בחינם למציאת סקריפטים של JavaScript שיסייע ביצירת מגוון אפקטים של עיצוב ואנימציה.

              מדריכים מקוונים ומדריכים

              רוצה מדריך צעד אחר צעד ללימוד אודות HTML, CSS, JavaScript ו- DOM? או אולי אתה מעדיף תרגול מעשי? המדריכים הבאים יכסו את כל הבסיסים שלכם.

              • מפת דרכים לפיתוח אתרים למתחילים: מדריך "למד לקוד" זה המקום המושלם להתחיל לעבוד עם DHTML מכיוון שייקח אותך מהיסודות של HTML (פרק 1) דרך JavaScript ו- jQuery (פרק 5).
              • הדרכות W3Schools DHTML: W3Schools מציעה מגוון הדרכות בנושא DHTML, מחולקות על ידי שלוש שפות התכנות השונות..
              • הדרכות לטכנולוגיות אינטרנט של מוזילה: לרשת המפתחים של מוזילה יש את אחד המדריכים המקיפים (והמאורגנים יותר) הזמינים בשפות התכנות השונות המעורבות ב- DHTML.
              • QcTutorials DHTML Tutorial: מחפש גישה פשוטה ופשוטה ללימוד DHTML? עברו על מדריך זה ואז שמרו על דוגמאות DHTML ו- HTML DOM בהישג יד לעתיד.
              • מדריך למתחילים ללימוד DHTML: מבוא ל- DHTML הכולל מספר הדרכות כדי להתחיל בעבודה.
              • הדרכות למפתחי אתרים ו- CSS: יש הרבה מה שאתה יכול ללמוד לעשות עם CSS, אז אל תגביל את עצמך רק ליסודות הבסיסיים. משאב זה כולל מגוון הדרכות CSS על פי צרכי האתר הספציפי שלך.
              • הדרכות JavaScript: מדריך נוסף מתוך ערכת JavaScript, רק זה מתמקד באופן ספציפי במשימות הקשורות ל- JavaScript.
              • הפניה ל- CSS: השתמש במשאב פשוט זה כמדריך עיון מהיר בעת כתיבת CSS.
              • הפניה ל- DOM: למידע נוסף על אובייקטים שונים של DOM כאן.

              תתחיל לעבוד!

              אם אתה מתכנן ליצור תוכן דינמי לאתר שלך, חשוב שתהיה לך הבנה איתנה כיצד כל אלמנט עובד ואיך כולם משחקים יחד תחת המטריה של DHTML.

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

              הלחנת HTML טוב ושימוש באימות

              .sourceCode span.kw
              .sourceCode span.dt
              .sourceCode span.dv
              .spanCode span.bn
              .sourceCode span.fl
              .sourceCode span.ch
              .sourceCode span.st
              .sourceCode span.co
              .spanCode span.ot
              .מקור קוד. span
              .מקור קוד. span
              .sourceCode span.re
              .קוד קוד. span

              הלחנת HTML טוב ושימוש באימות

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

              חלק 1 - הלחנת HTML טוב

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

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

              למה לטרוח ב- HTML טוב?

              מכיוון ש- HTML אינו מיועד לראות את משתמשי הקצה שלך ואת הקהל המקוון שלך, אתה עשוי לשאול:

              • איזה שינוי זה עושה?
              • למה לטרוח לדאוג מהסימון?

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

              יש קומץ "קהלים" עבור ה- HTML שלך:

              • המעצב / מפתח הנוכחי שצריך לכתוב CSS
              • מפתחים ומעצבים עתידיים שאולי יצטרכו לעצב מחדש את אתרכם
              • גוגל ומנועי חיפוש אחרים
              • פייסבוק ואתרי מדיה חברתית אחרים שמפרסמים קטעים מדף
              • קוראי RSS
              • קוראי מסך לבעלי ראייה
              • המשתמשים הרגילים שלך, בסופו של דבר.

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

              מבנה מסמך טוב

              ההיבט החשוב ביותר בסגנון HTML הוא מבנה נכון של המסמך הכולל.

              המבנה הכולל צריך להיראות כך:

              html>

              כותרת המסמך




              כותרת האתר

              כותרת המסמך

              כותרת המסמך

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

              או

              תגית, באותה "רמה" כמו שתוכן המאמר יהיה בסדר גמור.

              לפרטים נוספים אודות בניית המסמך כראוי, עיין בסעיף HTML מבני במאמר זה.

              הזמנת המרכיבים העיקריים שלך

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

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

              או

              תייגו, והניחו את זה קודם בפנים. הצב את תפריט הניווט אחרי הכותרת.

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

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

              מקם כמה שיותר מ- JavaScript שלך אחרי תג הסגירה. הכניס רק JavaScript לתוכנית אם זה בהחלט חייב להיות שם מסיבה כלשהי (בדרך כלל אין).

              מקל על הקריאה בסימון המבני שלך

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

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

              class ="ראש תורן">

              כותרת המסמך

              class ="nav-bar">
              class ="nav-main">

              • פריט בתפריט
              • פריט בתפריט
              • פריט בתפריט
                • פריט בתפריט
                • פריט בתפריט
                • פריט בתפריט
              • פריט בתפריט

              class ="ראש תורן">

              כותרת המסמך

              class ="nav-bar">
              class ="nav-main">

              • פריט בתפריט
              • פריט בתפריט
              • פריט בתפריט
                • פריט בתפריט
                • פריט בתפריט
                • פריט בתפריט
              • פריט בתפריט

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

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

              אבל מה עם HTML שנוצר?

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

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

              class ="ראש תורן">

              כותרת המסמך

              class ="nav-bar">
              class ="nav-main">

              • פריט בתפריט
              • פריט בתפריט
              • פריט בתפריט
                • פריט בתפריט
                • פריט בתפריט
                • פריט בתפריט
              • פריט בתפריט



              class ="הערות">
              class ="תגובה" id ="תגובה-39874693029">


              class ="פריט בסרגל הצד" id ="להירשם כמנוי">


              class ="פריט בסרגל הצד" id ="ארכיונים">

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

              שיעורים ותעודות זהות משמעותיות

              קודם כל - הפוך את תכונות הכיתה והתעודה שלך לעקביות וקלות לקריאה על ידי:

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

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

              שמות כיתות ותעודות טובות:

              • nav-menu
              • פוסט בבלוג
              • סרגל צידי
              • מטא תגובה.

              שמות כיתות ותעודות גרועות:

              • תיבה ירוקה
              • סרגל שמאל
              • דוהה באנר.

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

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

              .תיבה ירוקה
              צבע רקע: כחול;
              }

              השתמש ברכיבי תוכן בחוכמה

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

              כותרות וחתכים

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

              • השתמש בתגי כותרת (

                ,

                ,

                ,

                ) לכותרות וקטעי משנה.

              • וודאו כי היררכיית הכותרות שלכם מתווה מתאר סביר. אל תשים
                אחרי

                בלי

                ו

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

              • אם אתה משתמש לסימון כותרות מדורים, משהו לא בסדר.

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

              id ="כותרת החלק">כותרת המדור

              ...

              href ="# כותרת החלק">זה מקשר למיקום זה.

              לבסוף, אל תעשה שימוש לרעה בכלל האופקי (). אם אתה משתמש בקטעים וכותרות כראוי, כמעט אף פעם אין סיבה לכך.

              קישורים

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

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

              סוגיה נוספת עם קישורים היא טקסט העוגן - הטקסט בפועל בו המשתמש לוחץ (או מקיש, או בוחר) כדי לעקוב אחר הקישור.

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

              למידע נוסף על HTML מאת href ="">לחיצה כאן.

              אנו מספקים הרבה href ="">מידע על HTML.

              תמונות

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

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

              ישנם כמה מרכיבי סימון מועילים מאוד אשר לעולם אינם משמשים.

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

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

              למידע נוסף וטיפול נוסף

              כתיבת HTML טוב היא עניין של:

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

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

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

              וודא ש- HTML מעביר באופן ברור את מה שאתה רוצה לתקשר.

              חלק 2: מאמתי HTML

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

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

              הנה מה שאתה צריך לדעת.

              מהו אימות HTML?

              אימות פירושו רק לבדוק אם קוד המקור של דף האינטרנט שלך תואם את המפרט לשפה שהונחה על ידי W3C. בדיקה זו נעשית על ידי כלי תוכנה בשם Validator HTML.

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

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

              לומר שמסמך HTML תקף פירושו שהוא פועל על פי כל אחד מאותם כללים.

              מהו אימות HTML לא?

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

              זה דומה להבדל בין עריכה והגהה - אימות זה כמו הגהה.

              אימות HTML גם עוסק רק ב- HTML - לא ב- CSS, ב- JavaScript, ב- PHP שבבסיס. זה גם לא קשור לדברים כמו טפסים שעובדים כמו שצריך (אימות טפסים זה דבר אחר לגמרי).

              למה לטרוח באימות?

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

              שגיאות הקלדה פשוטות

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

              אי התאמה בגרסה

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

              לדוגמה, תג ה- HTML חדש ב- HTML5 - הוא לא היה קיים במפרט HTML 4.0. זה אומר שאם היית מאמת כנגד המפרט הזה וכללת אותו, הוא לא היה תקף. תקבל שגיאה.

              דוגמא נוספת למשהו שהשתנה היא הדרך בה אלמנטים של null נעלים.

              תג התמונה ( ) הוא אלמנט null - אין לו תוכן, רק תכונות (התמונה עצמה היא תכונה שמצביעה על קובץ התמונה, לא תוכן של אלמנט). בעבר היה צריך לסגור רכיבי null, כך שתראו זאת:

              src ="http://example.com/some_image" alt ="איזו תמונה" />

              כעת, במפרט HTML5 זה לא מועדף, ואותה תמונה תיראה כך:

              src ="http://example.com/some_image" alt ="איזו תמונה" >

              האימות הוא חשוב מכמה סיבות:

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

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

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

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

              קוד רע כולל

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

              פשוט אי ידיעת מפרט ה- HTML

              יש מפרטי HTML רבים - הרבה דברים שמפתחים מתחילים ובינוניים לא יודעים או מבינים.

              האם ידעת שאתה לא יכול לשים רשימה (