מבט על המרחב הלבן ב- HTML מטופל על ידי דפדפנים
אם אתה מעצב אינטרנט מתחיל, אחד הדברים רבים תצטרך להבין מוקדם היא הדרך שבה שטח לבן בקוד של האתר מטופל על ידי דפדפני אינטרנט.
למרבה הצער, האופן שבו הדפדפנים מטפלים בחלל הלבן אינו אינטואיטיבי מאוד בהתחלה, במיוחד אם אתה נכנס ל- HTML ומשווה אותו לאופן שבו שטח לבן מטופל בתוכניות עיבוד תמלילים, אשר ייתכן שאתה מכיר יותר.
בתוכנת עיבוד תמלילים, באפשרותך להוסיף הרבה ריווח או כרטיסיות במסמך, וכי המרווח ישתקף בתצוגה של תוכן המסמך. זה לא המקרה עם HTML או עם דפי אינטרנט. ככזה, ללמוד כיצד שטח לבן הוא, אכן, מטופלים על ידי דפדפני אינטרנט הוא מאוד חשוב.
ריווח בהדפסה
בתוכנה לעיבוד תמלילים, שלושת תווי החלל הלבנים העיקריים הם החלל, הכרטיסייה והחזרת הכרטיסים. כל אחד מהם לפעול בצורה שונה, אבל ב- HTML, דפדפנים להפוך את כולם בעצם אותו הדבר. בין אם אתה מציב מקום אחד או 100 רווחים בסימון ה- HTML שלך, או מערבב את המרווח שלך עם כרטיסיות מחזירה מחזיר, כל אלה יהיה מרוכז למטה אחד כאשר הדף מוצג על ידי הדפדפן. ב מונחים עיצוב אתרים, זה נקרא קריסה בחלל לבן. אין באפשרותך להשתמש במקשי ריווח טיפוסיים אלה כדי להוסיף רווח לבן בדף אינטרנט, מכיוון שהדפדפן קוטס רווחים מרובים לשטח אחד בלבד בעת הצגתם בדפדפן,
למה מישהו משתמש בכרטיסיות?
בדרך כלל, כאשר אנשים משתמשים בכרטיסיות במסמך טקסט, הם משתמשים בהם מסיבות פריסה או כדי להעביר את הטקסט למעבר למקום מסוים או להיות במרחק מסוים מאלמנט אחר. ב עיצוב אתרים, אתה לא יכול להשתמש באותם תווים שטח הנ"ל כדי להשיג אותם סגנונות חזותיים או פריסת הצרכים.
בתכנון אתרים, השימוש בתווים ריווח נוסף בקוד יהיה אך ורק כדי להקל על קריאת קוד זה. מעצבי אתרים ומפתחים משתמשים לעתים קרובות בכרטיסיות כדי להזין קוד, כדי שיוכלו לראות אילו אלמנטים הם ילדים של אלמנטים אחרים - אך אלה אינם משפיעים על הפריסה החזותית של הדף עצמו. עבור השינויים הנחוצים בפריסה חזותית, יהיה עליך לפנות ל- CSS (גיליונות סגנונות מדורגים).
שימוש ב- CSS ליצירת כרטיסיות HTML וריווח
אתרי אינטרנט כיום בנויים עם הפרדה של מבנה וסגנון. המבנה של דף מטופל על ידי HTML בזמן הסגנון מוכתב על ידי CSS. משמעות הדבר היא כי כדי ליצור ריווח או להשיג פריסה מסוימת, אתה צריך להיות פונה CSS ולא מנסה פשוט להוסיף תווים ריווח לקוד ה- HTML.
אם אתה מנסה להשתמש בכרטיסיות כדי ליצור עמודות של טקסט, באפשרותך להשתמש באלמנטים
אם הנתונים שאתה מפרסם הם נתונים טבלאיים, תוכל להשתמש בטבלאות כדי ליישר את הנתונים כרצונך. שולחנות לעתים קרובות לקבל רע ראפ בעיצוב אתרים, כי הם היו התעללו כלי פריסה טהור במשך כל כך הרבה שנים, אבל הטבלאות עדיין תקף לחלוטין אם התוכן שלך מכיל את הנתונים הטבלאיים הנ"ל.
שוליים, ריפוד וטקסט
הדרכים הנפוצות ביותר ליצירת ריווח ב- CSS הן באמצעות אחד מסגנונות CSS הבאים:
- שולים
- ריפוד
- הזנת טקסט
לדוגמה, ניתן להכניס את השורה הראשונה של פסקה כמו לשונית עם ה- CSS הבא (שים לב כי בהנחה שבקטע שלך יש מאפיין class של "first" המצורף אליו):
p.first {
text-indent: 5em;
}
פסקה זו תהיה כעת כ - 5 תווים.
ניתן גם להשתמש במאפייני השוליים או הריפוד ב- CSS כדי להוסיף ריווח לחלק העליון, התחתון, השמאלי או הימני (או שילובים של אותם צדדים) של אלמנט. בסופו של דבר, אתה יכול להשיג כל סוג של המרווח הנדרש על ידי פנייה ל- CSS.
העברת טקסט יותר מחלל אחד ללא CSS
אם כל מה שאתה רוצה הוא שהטקסט שלך יועבר במרחק של יותר מרחוב אחד מהפריט הקודם, תוכל להשתמש במרחב שאינו שבירת.
כדי להשתמש בחלל שאינו שבירת, אתה פשוט מוסיף & nbsp; כמו פעמים רבות ככל שאתה צריך את זה ב- HTML שלך סימון.
לדוגמה, אם אתה רוצה להעביר את המילה שלך חמישה רווחים מעל, אתה יכול להוסיף את הדברים הבאים לפני המילה.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;HTML מכבד את אלה ולא יקרוס אותם למרחב אחד. עם זאת, זה נחשב בפועל גרוע מאוד שכן הוא מוסיף סימון HTML נוסף למסמך רק כדי להשיג את הצרכים הפריסה. בהתייחסו חזרה כי ההפרדה של המבנה והסגנון, כדאי להימנע מלהוסיף רווחים שאינם שבירת פשוט כדי להשיג אפקט הפריסה הרצוי צריך להשתמש שוליים CSS וריפוד במקום.