ההבדל בין DIV ו- SPAN הפרש בין

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

HTML (Hypertext Markup Language) הוא קוד מובנה המשמש לבניית ולהצגת דפי האינטרנט שבהם אנו מבקרים באופן מקוון, כל יום, בכל מכשיר.

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

-> ->

הבנת HTML

Hypertext Markup Language (HTML) היא שפת סימון בשימוש נרחב ומתייחסת למבנה ולקוד 'מאחורי' דף אינטרנט, המוצג בדפדפן אינטרנט.

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

-> ->

World Wide Web Consortium (W3C) [i] מזהה את HTML כשפת סימון רשמית בפיתוח דפי אינטרנט, ולכן HTML נתמך על ידי רוב הדפדפנים. לכן, דפי אינטרנט ניתן לפתח בשפה מוכרת, לפרש בקלות על ידי דפדפנים שונים כדי לעבד את הדף כפי שתוכנן על ידי המעצב.

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

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

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

מבנה בסיסי של HTML

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

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

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

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

האלמנטים המינימליים הנדרשים עבור קובץ HTML הם ההגדרה, (HTML4 בלבד) ותגים. DOCTYPE הגדרה

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

ב- HTML4, יש וריאציות של DTD (בהתאם לתכונות הדף ואלמנטים), אך ההצהרות האופייניות יותר יכללו כ:

או

ה- DTD ב- HTML5 הרבה יותר פשוט:

HTML, HEAD ו- BODY

התג מציין שהוא קובץ HTML וזה השורש של אלמנט HTML המכיל את כל האלמנטים הבאים שהוגדרו בתוכו; וכולל תכונה שפה מומלץ כשיטה מומלצת; לדוגמה:

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

HTML5 יצרה אלמנטים חדשים להקל על הפיתוח והעיצוב, והיא גם הסירה אלמנטים המשמשים ב- HTML4. רשימת ההבדלים בין HTML4 ו- HTML5 מתפרסמת על ידי ה- World Wide Web Consortium (W3C) [ii].

HTML DIV TAG

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

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

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

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

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

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

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

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

דוגמאות שלי

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

הנה דוגמה לאופן שבו כל אלמנט יכול להיות מנוסח בקובץ CSS המתאים ל- HTML - על ידי התייחסות לכל תג

. #Header {

width: 800px;

גובה: אוטומטי

שולי-משמאל: אוטומטי;

שוליים-שמאל: אוטומטי;

}

#Featured {

height: 150px;

צבע רקע: #CCC;

HTML SPAN TAG

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

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

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

כמו, אלמנט אין

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

כדי לפתוח את הדוגמה לחץ על הסמל שבתחתית של הדף.

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

שים לב שאין הבדלים בין HTML4 ו- HTML5.