כלים נדרשים
כדי לפרט על מושג היישור ב- HTML, עלינו להזכיר כמה כלים נחוצים הדרושים להפעלת קוד HTML. האחד הוא עורך טקסט, והשני הוא דפדפן. עורך טקסט אולי פנקס רשימות, נשגב, פנקס ++, או כל דבר אחר שיכול לעזור. במדריך זה השתמשנו בפנקס רשימות, יישום ברירת מחדל בחלונות ו- Google Chrome כדפדפן.
פורמט HTML
כדי להבין את היישור, עלינו קודם כל לקבל קצת ידע ביסודות HTML. הצגנו את צילום המסך של קוד לדוגמה.
< html >
< רֹאשׁ >...</ רֹאשׁ >
< גוּף >….</ גוּף >
</ html >
ל- HTML שני חלקים עיקריים. האחד הוא הראש, והשני הוא הגוף. כל התגים כתובים בסוגריים זוויתיים. החלק הראש עוסק בשמות של דף ה- html באמצעות תג הכותרת. וגם, השתמש בהצהרת הסגנון בתוך הראש. מצד שני, הגוף עוסק בכל תגי הטקסט, התמונות או הסרטונים וכו 'במילים אחרות, כל מה שתרצו להוסיף לדף ה- html שלכם כתוב בגוף הגוף של html.
דבר אחד שאני צריך להדגיש כאן הוא תג הפתיחה והסגירה. כל תג שנכתב חייב להיות סגור. לדוגמה, ל- Html יש תג התחלה של ותג הסיום הוא. אז נצפה כי לתג הסיום יש קו נטוי ואחריו שם התג. באופן דומה, כל התגים האחרים פועלים באותה גישה. כל עורך טקסט נשמר לאחר מכן עם הרחבה של html. לדוגמה, השתמשנו בקובץ בשם example.html. לאחר מכן תראה שסמל הפנקס השתנה לסמל הדפדפן.
כמו יישור הוא תוכן של סטיילינג. סגנון ב- html הוא משלושה סוגים. סגנון קו, עיצוב פנימי וחיצוני. Inline מרמז בתג. הפנימי כתוב בתוך הראש. במקביל, הסגנון החיצוני כתוב בקובץ CSS נפרד.
עיצוב מוטבע של טקסט
דוגמא 1
עכשיו הגיע הזמן לדון בדוגמה כאן. שקול את התמונה המוצגת למעלה. בקובץ הפנקס הזה כתבנו טקסט פשוט. כאשר אנו מפעילים אותו כדפדפן, הוא יציג את הפלט שניתן להלן בדפדפן.
אם נרצה שהטקסט הזה יוצג במרכז, נשנה את התג.
תג זה הוא תג מוטבע. נכתוב תג זה כאשר נציג את תג הפסקה בגוף ה- html. לאחר הטקסט, סגור את תג הפסקה. שמור ולאחר מכן פתח את הקובץ בדפדפן.
הפיסקה מיושרת במרכז, כפי שהיא מוצגת בדפדפן. התג המשמש בדוגמה זו משמש לכל יישור, כלומר עבור שמאל, ימין ומרכז. אבל אם אתה רוצה ליישר את הטקסט במרכז בלבד, אז תג מיוחד משמש למטרה זו.
< מֶרְכָּז > …… ..</ מֶרְכָּז >התג המרכזי משמש לפני ואחרי הטקסט. זה גם יראה את אותה התוצאה כמו הדוגמה הקודמת.
דוגמא 2
זוהי דוגמה ליישור הכותרת במקום לפסקה בטקסט ה- html. התחביר ליישור כותרת זהה. ניתן לעשות זאת הן באמצעות התג והן באמצעות עיצוב מוטבע או הוספת תג היישור בתוך תג הכותרת.
הפלט מוצג בדפדפן. תג הכותרת המיר את הטקסט הפשוט לכותרת, והתג יישר אותו במרכז.
דוגמה 3
יישר את הטקסט במרכז
שקול דוגמה שבה מוצגת פסקה בדפדפן. אנחנו צריכים ליישר את זה במרכז.
נפתח קובץ זה בפנקס ולאחר מכן יישר אותו במיקום המרכזי באמצעות התג.
< עמ סִגְנוֹן =טֶקסט-ליישר קו: מרכז;>לאחר הוספת תג זה בתג הפסקה, אנא שמור את הקובץ והפעל אותו בדפדפן. תראה שהפסקה ממורכזת כעת. עיין בתמונה למטה.
יישר את הטקסט ימינה
השענת הטקסט ימינה דומה למיקום אותו במרכז הדף. רק המילה המרכזית מוחלפת בימין בתג הפסקה.
< עמ סִגְנוֹן =טֶקסט-ליישר קו: נכון;> ……… ..</ עמ >ניתן לראות את השינויים באמצעות התמונה המצורפת למטה.
שמור ורענן את דף האינטרנט בדפדפן. הטקסט מועבר כעת לצד ימין של הדף.
עיצוב פנימי של טקסט
דוגמה 1
כפי שתואר לעיל כי CSS פנימי (גיליון סגנונות מדורגים) או עיצוב פנימי הוא סוג של CSS המוגדר בחלק הראש של HTML של הדף. זה עובד באופן דומה לתגים פנימיים.
שקול את הדף המוצג למעלה; הוא מכיל בו את הכותרות והפסקה. יש לנו דרישה לראות את הטקסט במרכז. יישור מוטבע מחייב כתיבה ידנית של תגים בתוך כל פסקה. אך ניתן ליישם סגנון פנימי באופן אוטומטי על כל פסקה בטקסט על ידי אזכור p בהצהרת הסגנון. לאחר מכן אין צורך לכתוב שום תג בתוך תג הפסקה. עכשיו שימו לב לקוד וזה עובד.
< סִגְנוֹן >פ{טֶקסט-ליישר קו: מרכז}
</ סִגְנוֹן >
תג זה כתוב בתוך תג הסגנון בחלק הראש. כעת הפעל את הקוד בדפדפן.
כאשר תבצע את הדף בדפדפן, תראה שכל הפסקאות מיושרות במרכז הדף. תג זה מוחל על כל פסקה הקיימת בטקסט.
דוגמא 2
בדוגמה זו, בדיוק כמו פסקה, ניישר את כל הכותרות בטקסט לצד הימני. למטרה זו נזכיר כותרות בהצהרת הסגנון בתוך הראש.
H2, h3{
טֶקסט-ליישר קו: ימין
}
כעת לאחר שמירת הקובץ, הפעל את קובץ פנקס הרשימות בדפדפן. תראה שהכותרות מיושרות בצד ימין של דף ה- HTML.
דוגמה 3
בעיצוב פנימי, ייתכן מצב שבו עליך ליישר את הטקסט של חלק מהפסקאות בטקסט בעוד שאחרות נשארות אותו דבר. מכאן שאנו משתמשים במושג המעמד. אנו מציגים את הכיתה בשיטת נקודה בתוך תג הסטייל. יש צורך להוסיף את שם המחלקה בתוך תג הפסקה שברצונך ליישר.
< סִגְנוֹן >.מֶרְכָּז{
טֶקסט-ליישר קו: מרכז}
</ סִגְנוֹן >
מעמד =מרכז> ……</ עמ >
הוספנו את הכיתה בשלושת הפסקאות הראשונות. עכשיו הפעל את הקוד. אתה יכול לראות בפלט ששלושת הפסקאות הראשונות מיושרות במרכז, ואילו אחרות אינן.
סיכום
מאמר זה הסביר כי יישור יכול להתבצע בדרכים שונות באמצעות תגים מוטבעים ופנימיים.