המבנה של כמעט כל אתר אינטרנט שאנו מוצאים ומשתמשים בו באינטרנט נוצר באמצעות HTML, מערכת סטנדרטית לקטגוריות קבצי טקסט. מעברי עמוד, פסקאות, אותיות חזקות, נטוי ותכונות אחרות מתווספים כולם באמצעות HTML. על ידי שימוש בתגיות, המורות לדפדפנים כיצד לטפל בתוכן, HTML עוזר ליצור מבנה זה.
לדוגמה, נציב מילה בין התגים strong>bold/strong> כדי שזה ייראה מודגש. תג הפתיחה (/) מציין היכן אנו רוצים שהמודגש יסתיים, בעוד התג הראשון (/) מציין היכן אנו רוצים שהמודגש יתחיל. הוא משמש כבסיס לרוב דפי האינטרנט. אז זה המקום להתחיל אם אתה לומד קוד.
כיצד להוסיף שטח ב-HTML
מעבר לרווח בודד בין מילים, מתעלמים מכל הרווחים הריקים שאנו מכניסים בטקסט HTML כדי להציג בדפדפן. כתוצאה מכך, עלינו לתכנת את הרווחים הריקים שאנו רוצים במסמך שלנו. לכל שורת טקסט ניתן להוסיף רווח ב-HTML. לדוגמה, אנו עשויים להוסיף רווחים ריקים בתוכן הטבלה והפסקה באמצעות אובייקט HTML . מכיוון ש-HTML חסרה אות מקלדת לרווח ריק, עלינו להזין את הישות כדי להוסיף כל רווח.
זה אולי נראה פשוט, אבל הוספת מקום ל-HTML שלנו עשויה להיות מאתגרת. ישנן לפחות חמש גישות שונות לטפל בזה.
במהלך ההכשרה הזו, נראה מקרים רבים. זה גם ידגים כיצד להשתמש בצורות משוכללות יותר של חלל.
המרת מחרוזת ל-enum
כל זה אפשרי ב-HTML רגיל ללא שימוש ב-CSS. אבל שים לב שהוספת שטח ל-HTML שלך נעשית בצורה הטובה ביותר באמצעות CSS.
איך נראה חלל ASCII?
החלל מיוצג על ידי סמל ASCII 20. אבל זה רק הנוהג המקובל.
ישנם חמישה סוגים שונים של רווחים שאתה יכול להשתמש ב-HTML. הם נראים זהים לעין הבלתי מאומנת, אם כי יש להם פונקציות שונות במקצת.
תו הטאב, המדמה לחיצה על מקש הטאב במקלדת, הוא אפשרות נוספת. ותו החזרת הכרכרה, המדמה לחיצה על מקש האנטר במקלדת, היא דוגמה נוספת.
שטח לא שביר:
בחלל:
מרחב Em:
חלל דק:
חלל סטנדרטי:
קו חדש (החזרה):
תו כרטיסייה:
הצד השמאלי מייצג את אופי , והצד הימני מייצג את קוד HTML.
כמה רחבה דמות בחלל?
עבור תווי רווח, ישנם ארבעה רוחבים סטנדרטיים:
מה המשמעות של סימן הרווח ב-HTML?
היא ישות ה-HTML הנפוצה ביותר.
arraylist java
כדי לגרום לטקסט הזה למלא חלל, נסה לזרוק אותו.
בואו נדמיין, למשל, שאנו רוצים להוסיף שני רווחים אחרי ביטוי, אבל מנוע העיבוד של האתר מבטל את אחד הרווחים בעצמו. כדי להוסיף שני רווחים, אולי נוכל להיכנס
רווח לבן: מה זה?
תווים שאינם גלויים נקראים רווח לבן. הם מורכבים מ:
- רווחים,
- כרטיסיות, ו
- מעברי שורות (החזרות כרכרה, הזנות שורות או שניהם),
למה זה קריטי?
אותיות אלו, למשל, אינן גלויות במעבד תמלילים, אך הן משפיעות על הרווח והעיצוב של הטקסט. הדפדפן מגבש מספר תווי רווח לבן לרווח אחד ב-HTML, אשר נבדל משפות סימון אחרות.
ישנם מספר רווחים בין המילים ב-HTML זה, וכל שורה מסתיימת בתווי CRLF (Carriage Return, Linefeed). כל תווי הרווח הלבן יכווץ על ידי הדפדפן.
דוגמא
דברים טובים לוקחים יותר זמן.
תְפוּקָה:
הכנסת רווחים
- השתמש בסימן הרווח הבלתי שובר של הטקסט ( ) כדי לספק יותר מרווחים.
- ניתן להשתמש במאפיין ריפוד CSS כדי להגדיל את השטח בתוך אלמנט בנסיבות שונות.
- תכונת CSS margin מאפשרת הוספת שטח נוסף סביב אלמנט.
למרות שרווחים לא שוברים הם שימושיים, אין להשתמש בהם יתר על המידה, שכן פעולה זו עלולה להפריע לאופן הצגת החומר בדפדפנים. בנוסף, הימנע משימוש ברווחים לא שוברים למטרות סגנון כגון הזחה או מרכז אלמנט בדף אינטרנט; במקום זאת יש לטפל בדרישות סגנוניות באמצעות CSS.
בנוסף לישות, HTML תומך גם בישויות הנוספות הבאות עבור מספר רווחים ריקים סמוכים:
ישות התו משמשת לייצוג רווח. En היא יחידת מידה ששווה ערך ל-8 פיקסלים, או חצי מרוחב של em (16 פיקסלים).
התחביר ל-en space-in-between תוכן הוא הנה דוגמה לשימוש בישות HTML &ensp:
הנה דוגמה לישות המרחב.
תְפוּקָה:
הישות משמשת בדוגמה למעלה כדי להוסיף רווחים ל-HTML, והרוחב שלה הוא 8 פיקסלים. ניתן להשתמש בהם גם במספר מקומות סמוכים.
שמירה על עיצוב וריווח
אם ברצונך לשמור על העיצוב והמרווח שצוינו, יש שתי אפשרויות:
- הוספת עיצוב HTML ורווח
- באמצעות א
tag.
שימוש בתג 'קדם'
תוצאות אלו מתרחשות מהחלפת ה-
תג עבור ה
tag:
דוגמא
pre> Good things take more time
תְפוּקָה:
מחרוזת מצא את c++
כן ה
tag keeps the formatting as it was originally, but it also switches to a monospaced typeface. All of these can be fixed; however, using the <pre> tag isn't always the best option. HTML spacing is a more popular method.</pre>
הוספת עיצוב HTML ורווח
כחלופה, אנו עשויים לכלול רכיבי HTML וסמלים כמו הבאים:
דברים טובים יהיו
לקחת יותר זמן.
תְפוּקָה:
מעבר שורה נדרש על ידי
אֵלֵמֶנט.
שטח לא שביר:
הדפדפן אינו מכווץ רווחים שנוספו עם תו הרווח הבלתי שובר ().
בנוסף, כפי שהשם מרמז, זה מונע מהדפדפן לשבור שם שתי מילים.
דברים טובים לוקחים יותר זמן.
תְפוּקָה:
במודל זה מוסיפים 10 רווחים לקראת תחילת הטקסט. אחר מונח בין ' לוקח ' שלא יהיה מבודד כשהמשפט יתעטף בגלל מגבלות מקום.
תכונת הריפוד
המרחב הפנימי של אלמנט גדל עם תכונת ה-CSS padding.
זה לוקח ערכים שנעים בין אחד לארבעה, המתחילים בצד העליון, הימני, התחתון והימני.
ה 'div' לאלמנט יש ריפוד של 20 פיקסלים מכל הצדדים.
הרלד באלדר
Inner spacing is 20px with a div attribute
תְפוּקָה:
תכונת השוליים
- עם תכונת CSS margin, תוספת שטח נוסף סביב האלמנט.
- זה לוקח ערכים שנעים בין אחד לארבעה, המתחילים בצד העליון, הימני, התחתון והימני.
ה 'div' לרכיב יש שוליים של 40 פיקסלים מכל הצדדים.
Outer spacing is 20px using the div and margin attribute
תְפוּקָה:
ריפוד מול שוליים
- הריפוד והשוליים מגדילים את החלל של אלמנט.
- ריפוד משאיר חלל שנחשב כמרכיב של האלמנט.
- מרחב שנוצר בשוליים נחשב כקיים מחוץ לגבולות האלמנט.
- אזור הקליקים, צבעי הרקע ותכונות אחרות של האתר מושפעים מהוריאציה הזו.
אפשר להאמין שהוספת רווחים ב-HTML היא פשוטה כמו לחיצה מתמשכת על מקש הרווח. אבל פשוט לא כך הדברים פועלים. לחיצה על מקש הרווח יותר מפעם אחת לא תוסיף עוד רווחים ריקים קרובים כמו במסמך טקסט. הדפדפן ישלב את כל הרווחים הריקים הסמוכים לאחד אם נעשה זאת ב-HTML. כדי להדגים מה קורה כאשר אנו משתמשים במספר רווחים ב-HTML, הבה נסתכל על דוגמה:
לכן, לאחר שימוש פעמים רבות במקש הרווח, לא נוכל להוסיף עוד רווחים ריקים
תְפוּקָה:
על ידי לחיצה חוזרת על מקש הרווח ב-HTML, כפי שניתן לראות בדוגמה שלמעלה, אנו מנסים להכניס מספר רווחים ריקים רצופים לדף אינטרנט. עם זאת, דפדפנים מעבדים מספר רווחים ריקים סמוכים כרווח בודד ומתעלמים מרווחים לפני, אחרי ומחוץ לרכיבים. התופעה ידועה כקריסת שטח לבן. למרות שקריסת רווח לבן עשויה להיות מעצבנת לפעמים, ישנן מספר טכניקות להוספת רווחים נוספים הן ב-HTML והן ב-CSS (גליונות סגנונות מדורגים).
&
ישות התו משמשת לייצוג המרחב שלהם. הרוחב של em, שהוא 16 פיקסלים, שווה ערך ל-emsp.
התחביר עבור רווחי em בטקסט הוא הנה דוגמה לשימוש בישות HTML &emsp:
הנה דוגמה לישות המרחב.
תְפוּקָה
הישות משמשת בדוגמה למעלה כדי להוסיף רווחים ל-HTML, והרוחב שלה הוא 16 פיקסלים. הם יכולים לשמש גם בכמה חללים סמוכים.
&thinnsp
ישות הדמות משמשת לייצוג מרחב דק, המכונה לעתים קרובות רווח צר. שישית של em היא הרוחב של &
ארכיטקטורת 32 סיביות לעומת 64 סיביות
רווח דק נכתב כתוכן ביניים בתחביר. להלן דוגמה כיצד להשתמש בישות HTML ''
זוהי דוגמה לישות שטח דק.
תְפוּקָה
הישות משמשת בדוגמה למעלה כדי להוסיף רווחים דקים ל-HTML, והרוחב שלה הוא שישית של em. הם משמשים גם בכמה חללים סמוכים.
להלן אמנות ASCII של 'היי'. # # ##### # # # ##### # # # # # # # # # # ####
תְפוּקָה:
היתרונות של ניצול רווח לבן
מדוע רווח לבן חשוב?
Whitespace הוא אבן הבניין הבסיסית של עיצוב טוב, לדעתי כמעצב. מעצבים מתייחסים למרחב שלילי, או לרווח בין חלקים בקומפוזיציה, כאשר הם משתמשים במונח 'חלל לבן'. זהו הרווח הריק בין גרפיקה, שוליים ומרזבים בעמוד שלא סומן בכלום. לעין ניתן אזור נשימה ויזואלי על ידי הרווח שבין עמודות, שורות טקסט ודמויות.
יש סיבה משכנעת לכך שהרווח הלבן הוא מרכיב מכריע בעיצוב. זה עשוי לחולל מהפכה בעיצוב האתר שלנו ולספק לו כמה יתרונות אם ייושמו כהלכה. עלינו לייצר וליצור פריסות נעימות לעין ומעודדות את הקוראים להמשיך. זה חיוני לזכור ללא הרף כי אספקת מוצר פנטסטי ללקוחותינו היא בראש סדר העדיפויות שלנו כאשר אנו מעצבים עבור האינטרנט.
ניתן להשתמש ברווח לבן כדי להנחות קורא מאלמנט אחד למשנהו, ליצור הרמוניה ואיזון ולעזור למתג עיצוב. המטרות העיקריות שלנו הן לגרום לאתר להיראות פשוט וברור ולספק תוכן שהמשתמשים שלנו יאהבו ויעריכו. רווח לבן אינו רק חלל 'ריק'; זוהי תכונת עיצוב שמאפשרת את קיומם של הפריטים בדף. האזור מייצר איזון ומשמש תזכורת מתמדת לכך שקיימים עיצובים יפים. כדי להעביר מסר ברור, אנחנו לא צריכים לעשות פריסה עמוסה בטקסט ובגרפיקה.