גיליון הצ'יטס של HTML Essentials: תגים, תכונות ועוד

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

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

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

הורדה חינמית: דף הצ'יט הזה זמין בתור א PDF להורדה משותף ההפצה שלנו, TradePub. תצטרך למלא טופס קצר כדי לגשת אליו בפעם הראשונה בלבד. הורד ה-HTML Essentials Cheat Sheet.

ה-HTML Essentials Cheat Sheet

... ... ... ... ...

...

קיצור	פעולה
תגיות בסיסיות
...	התג הראשון והאחרון של מסמך HTML. כל שאר התגים נמצאים בין תגי הפתיחה והסגירה הללו.
...	מציין את אוסף המטא נתונים עבור המסמך.
	מתאר את הכותרת של הדף ומופיע בשורת הכותרת של הדפדפן.
...	כולל את כל התוכן שיוצג בדף האינטרנט.
מידע על מסמך
מזכיר את כתובת האתר הבסיסית ואת כל הקישורים היחסיים למסמך.
למידע נוסף על הדף כמו מחבר, תאריך פרסום וכו'.
קישורים לאלמנטים חיצוניים כמו גיליונות סגנונות.
	מכיל מידע על סגנון מסמך כמו CSS (Cascading Style Sheets).
	מכיל קישורים לתסריטים חיצוניים.
עיצוב טקסט
... אוֹ ...	עושה טקסט מודגש.
...	טקסט נטוי והופך אותו למודגש.
...	טקסט נטוי אך אינו מודגש.
...	טקסט חוצה.
...	מצטט מחבר ציטוט.
...	מסמן חלק שנמחק בטקסט.
...	מציג קטע שהוכנס לתוכן.
...	להצגת ציטוטים. משמש לעתים קרובות עם תָג.
...	להצעות מחיר קצרות יותר.
...	לקיצורים וטפסים מלאים.
...	מפרט את פרטי ההתקשרות.
...	להגדרות.
...	לקטעי קוד.
...	לכתיבת מנויים
...	לכתיבת כתבי על.
...	להקטנת גודל הטקסט וסימון מידע מיותר ב-HTML5.
מבנה מסמך
...	רמות שונות של כותרות. H1 הוא הגדול ביותר ו-H6 הוא הקטן ביותר.
...	לחלוקת תוכן לבלוקים.
...	כולל אלמנטים מוטבעים, כמו תמונה, סמל, רגשון, מבלי להרוס את העיצוב של הדף.
...	מכיל טקסט רגיל.
	יוצר שורה חדשה.
	מצייר פס אופקי כדי להציג את סוף הקטע.
רשימות
...	לרשימת פריטים מסודרת.
...	לרשימת פריטים לא מסודרת.
...	לפריטים בודדים ברשימה.
...	רשימת פריטים עם הגדרות.
...	ההגדרה של מונח בודד המשולב בתוכן הגוף.
...	התיאור עבור המונח המוגדר.
קישורים
...	תג עוגן עבור היפר-קישורים.
...	תג לקישור לכתובות מייל.
...	תג עוגן לרישום מספרי אנשי קשר.
...	תג עוגן לקישור לחלק אחר של אותו עמוד.
...	מנווט למקטע div בדף האינטרנט. (גרסה של התג לעיל)
תמונות
	להצגת קבצי תמונה.
תכונות עבור תָג
src="url"	קישור לנתיב המקור של התמונה.
alt="טקסט"	הטקסט המוצג כאשר מרחף עכבר מעל התמונה.
גובה =" "	גובה התמונה בפיקסלים או באחוזים.
רוחב = " "	רוחב התמונה בפיקסלים או באחוזים.
יישר =" "	יישור יחסי של התמונה בעמוד.
גבול =" "	עובי הגבול של התמונה.
	קישור למפה הניתנת ללחיצה.
	שם תמונת המפה.
אזור התמונה של מפת תמונה.
תכונות עבור תָג
צורה =" "	צורת אזור התמונה.
coords=""	קואורדינטות של אזור תמונת המפה.
טפסים
...	תג האב עבור טופס HTML.
תכונות עבור תָג
action="url"	כתובת האתר שבה נשלחים נתוני הטופס.
שיטה =" "	מציין את פרוטוקול הגשת הטופס (POST או GET).
enctype=""	ערכת קידוד הנתונים עבור הגשות POST.
השלמה אוטומטית	מציין אם השלמה אוטומטית של טופס מופעל או כבוי.
לא לאמת	מציין אם יש לאמת את הטופס לפני השליחה.
קבל-תווים	מציין קידוד תווים להגשת טופס.
יַעַד	מראה היכן תוצג תגובת הגשת הטופס.
...	מקבץ רכיבים הקשורים בטופס/
...	מציין מה המשתמש צריך להזין בכל שדה טופס.
...	כיתוב עבור אלמנט fieldset.
מציין איזה סוג קלט לקחת מהמשתמש.
תכונות עבור תָג
סוג=””	קובע את סוג הקלט (טקסט, תאריכים, סיסמה).
שם =""	מציין את שם שדה הקלט.
ערך =""	מציין את הערך בשדה הקלט.
גודל =""	מגדיר את מספר התווים עבור שדה הקלט.
maxlength=""	מגדיר את מגבלת תווי הקלט המותרים.
נדרש	הופך שדה קלט לחובה.
רוחב = ""	מגדיר את רוחב שדה הקלט בפיקסלים.
גובה =""	מגדיר את גובה שדה הקלט בפיקסלים.
מציין מיקום =""	מתאר את ערך השדה הצפוי.
דפוס =""	מציין ביטוי רגולרי, שניתן להשתמש בו כדי לחפש דפוסים בטקסט של המשתמש.
min=””	הערך המינימלי המותר לרכיב קלט.
מקסימום =""	הערך המרבי המותר לרכיב קלט.
נָכֶה	משבית את רכיב הקלט.
...	ללכידת מחרוזות ארוכות יותר של נתונים מהמשתמש.
...	מציין רשימה של אפשרויות מהן המשתמש יכול לבחור.
תכונות עבור תָג
שם =""	מציין שם עבור רשימה נפתחת.
גודל =""	מספר האפשרויות שניתנו למשתמש.
מרובות	מגדיר אם המשתמש יכול לבחור אפשרויות מרובות מהרשימה.
נדרש	מציין אם בחירת אפשרות/אפשרויות נחוצה להגשת טופס.
פוקוס אוטומטי	מציין שרשימה נפתחת נכנסת אוטומטית לפוקוס לאחר טעינת דף.
...	מגדיר פריטים ברשימה נפתחת.
ערך =""	מציג את הטקסט עבור כל אפשרות נתונה.
נבחר	מגדיר אפשרות ברירת מחדל שתוצג.
...	תג ליצירת כפתור לשליחת טופס.
אובייקטים ו-iFrames
	מתאר את סוג הקובץ המוטבע.
תכונות עבור
גובה =""	גובה האובייקט.
רוחב = ""	רוחב האובייקט.
סוג=””	סוג המדיה שהאובייקט מכיל.
	מסגרת מוטבעת להטמעת מידע חיצוני.
שם =""	שם ה-iFrame.
src=""	כתובת ה-URL של התוכן בתוך המסגרת.
srcdoc=""	תוכן ה-HTML בתוך המסגרת.
גובה =""	גובה ה-iFrame.
רוחב = " "	רוחב ה-iFrame.
מוסיף פרמטרים נוספים כדי להתאים אישית את ה-iFrame.
...	מטמיע אפליקציה או תוסף חיצוני.
תכונות עבור
גובה =" "	מגדיר את גובה ההטמעה.
רוחב =" "	מגדיר את רוחב ההטמעה.
סוג=””	הסוג או הפורמט של ההטמעה.
src=""	נתיב המקור של הקובץ המוטבע.
טבלאות
...	מגדיר את כל התוכן לטבלה.
תיאור של הטבלה.
כותרות לכל עמודה בטבלה.
מגדיר את נתוני הגוף עבור הטבלה.
מתאר את התוכן של הכותרת התחתונה של הטבלה.
תוכן לשורה בודדת.
	...	הנתונים בפריט כותרת בודד.
	...	תוכן בתוך תא טבלה בודד.
מקבץ עמודות לעיצוב.
עמודה אחת של מידע.
HTML5 תגים חדשים
...	מציין את הכותרת של דף האינטרנט.
	מציין את הכותרת התחתונה של דף האינטרנט.
...	מסמן את התוכן העיקרי של דף האינטרנט.
...	מציין מאמר.
	מציין את תוכן סרגל הצד של עמוד.
...	מציין קטע מסוים בדף האינטרנט.
...	לתיאור מידע נוסף.
...	משמש ככותרת לתג שלמעלה. תמיד גלוי למשתמש.
...	יוצר תיבת דו-שיח.
...	משמש להכללת תרשימים ואיורים.
	מתאר א אֵלֵמֶנט.
...	מדגיש חלק מסוים בטקסט.
	סט קישורי ניווט בדף אינטרנט.
...	פריט מסוים מתוך רשימה או תפריט.
...	מודד נתונים בטווח נתון.
...	מציב סרגל התקדמות ועוקב אחר ההתקדמות.
...	מציג טקסט שאינו תומך בהערות רובי.
...	מציג פרטי טיפוגרפיה של מזרח אסיה.
...	ביאור רובי לטיפוגרפיה מזרח אסייתית.
...	מזהה שעה ותאריך.
מעבר שורה בתוך התוכן.
¹HTML5 Character Objects
"או "	מרכאות
< או &lt ;	קטן מסימן (
> או &gt ;	גדול מסימן (>)
אוֹ &nbsp ;	שטח לא שבור
© OR &עותק ;	סימן זכויות יוצרים
™ או &ucirc ;	סמל סימן מסחרי
@ או &Uuml ;	סמל "ב" (@)
& או &amp ;	סמל אמפרסנד (&)
• או &ouml ;	כדור קטן
¹התעלם מרווח לפני נקודה-פסיק בזמן הקלדת תו HTML.

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

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