שפת סימון היפר-טקסט (HTML) היא שפה חזיתית המשמשת לעיצוב ופיתוח אתר אינטרנט. HTML היא השפה הבסיסית של כל השפות המשמשות לעיצוב דפי אינטרנט סטטיים או דינאמיים. ל- html פונקציות רבות הנדרשות בעיצוב. בעזרת תגים, פקודות הכתובות בסוגריים זוויתיים, תוכנן דף אינטרנט. HTML מאפשר למשתמש ליצור או לערוך טקסט, תמונה או כל רכיב אחר כמו כל עורך טקסט, כלומר Microsoft Word. התוכן של HTML הוא טקסט, תמונה, צבע, עיצוב וכו 'עיצוב הוא חלק חשוב מאוד מכיוון שהוא אחראי על קישוט הטקסט. ביצוע הטקסט נטוי הוא דוגמה אחת לעיצוב הטקסט. אלמנט זה חשוב להדגשת או משיכת תשומת הלב של המשתמש. חלק מהדוגמאות מודגשות במדריך זה.
יסודות דרושים
HTML דורש שני כלים לעיצוב ופיתוח אתר אינטרנט. האחד הוא עורך טקסט הנדרש בכדי לכתוב בו את קוד ה- HTML. זה יכול להיות כל עורך טקסט בגישה שלך, כלומר פנקס רשימות, פנקס רשימות ++, אולפן ויזואלי וכו '. השני הוא דפדפן במחשב שלך, Google Chrome, Internet Explorer וכו'. במאמר זה השתמשנו בפנקס רשימות גוגל כרום. לעיצוב הדף הסטטי, אתה צריך HTML ולעיצוב דף הסגנון CSS. כל אחד מהם משמש במדריך זה עם דוגמאות.
פורמט HTML
כדי להסביר את עיצוב הטקסט האותי, תחילה נבין את קוד ה- html. קוד HTML כולל שני חלקים. אחד הוא חלק הראש, ואחד בגוף. אנו כוללים את הכותרת בחלק הראש; שם הכותרת הזה הוא למעשה כותרת הדף. עיצוב פנימי מתבצע גם בתוך גוף הראש. בעוד שהגוף מכיל את כל התגים האחרים הקשורים לטקסט, תמונה וצבע וכו 'חוץ מזה, כל מה שתרצה להוסיף לדף HTML כתוב בחלק הגוף של קוד ה- HTML.
< html >
< רֹאשׁ >...</ רֹאשׁ >
< גוּף >….</ גוּף >
</ html >
התמונה למטה היא קוד HTML לדוגמה. אתה יכול לראות ששם הכותרת כתוב בתוך החלק הראש. במקביל, הוספנו פסקה בגוף ה- html באמצעות תג
. ואז תג הגוף ותגי html נסגרים.
הפלט של מדגם זה נראה בדפדפן. אתה יכול לראות כי שם הכותרת מוצג בשם הכרטיסייה, עליה הכרזנו בראש קוד ה- html.
ל- HTML יש תגי פתיחה וסגירה לכל התגים הכתובים בגוף שלו. לאחר פתיחת הקוד יש לסגור אותו לאחר כתיבת טקסט ביניהם. התגית סגורה עם הכותרת בתוכה. הקוד נשמר לאחר מכן בקובץ פנקס הרשימות. דבר אחד שכדאי לזכור הוא שבזמן שמירת הקוד יש לשמור את הקובץ של עורך הטקסט באמצעות סיומת html. לדוגמה, sample.html. אז תראה שהקובץ נשמר עם סמל הדפדפן הנוכחי בו אתה משתמש למטרה זו.
זה היה הרקע של עיצוב ב- html. כעת נשתמש בדוגמה פשוטה לביצוע הטקסט נטוי.
דוגמא 1
קח קובץ פנקס רשימות וכתוב את קוד ה- HTML הפשוט כפי שתואר לעיל במדריך זה. הוסף פסקה של שתי שורות בחלק הגוף. כדי להפוך את הטקסט ליטוי. השתמש בתג בתחילת המילים שאתה רוצה להיות בצירוף נטוי
< אני > ……</ אני >זהו התג להוספת הטקסט נטוי. כפי שאתה יכול לראות בתמונה למטה, הוא תג הפתיחה שנכתב בתחילת ו הוא תג הסגירה. סגור את הגוף ו- html.
כעת שמור את הקובץ והפעל אותו בדפדפן כדי לראות את פלט הקובץ.
מהפלט, אתה יכול לראות שהמשפט שעשינו נטוי בקוד הוא בצורת נטוי, ואילו המשפט הראשון הופיע בפורמט רגיל.
דוגמא 2
בדוגמה זו, נכין מילה ספציפית נטויה במקום כל המשפט של הטקסט. תגי פתיחה וסגירה משמשים את כל הפסקה, בכל מקום בו נרצה להפוך את הטקסט נטוי למשפט.
שוב, שמור את הקובץ ולאחר מכן הפעל אותו בדפדפן. אתה יכול לראות שחלק מסוים של הטקסט הוא בצורת נטוי שברצוננו להפוך אותו נטוי בקוד.
דוגמה 3
מלבד השימוש ב- tag בטקסט, קיימת שיטה נוספת לייצור הטקסט בצורה נטויה. זוהי הגישה להדגשת חלק מהטקסט. לתג זה יש גם תגי פתיחה וסגירה. התחביר המשמש עבורו הוא;
< ב >….</ ב >הטקסט כתוב בין שני התגים; בדוגמה זו, השתמשנו בתג זה פעמיים בפסקה. בואו נראה את תמונת הקוד המוצב למטה.
בשני המשפטים, השתמשנו פעם בפסקה. הפלט מתקבל על ידי הפעלת קובץ ה- HTML בפורמט הדפדפן.
דוגמה 4
זוהי הדוגמה בה השתמשנו בגישה אחרת להצגת המילים בצורה נטויה. זה מרמז על השימוש בטקסט. בדוגמה זו, החלנו תג זה על הטקסט כולו הכתוב בגוף html.
< לְצַטֵט > ……</ ציטוט > 
לאחר סגירת כל התגים, הפעל את הקובץ בדפדפן.
דוגמה 5
עד כה דנו בעיצוב הטקסט המובנה. יצירת טקסט נטוי של טקסט מתייחסת גם לעיצוב והעיצוב של הטקסט. סטיילינג הוא משלושה סוגים. האחד מוטבע, השני פנימי, והשלישי חיצוני. עיצוב מוטבע מתבצע בתוך התג. פנימי כתוב בתוך גוף הראש. ועיצוב חיצוני מתבצע בקובץ אחר עם הסיומת של .css.
זוהי דוגמה ל- css inline; כאן, כתבנו את הקוד בתוך התגים של הפיסקה. הכרזנו שהצהרת הסגנון כסגנון גופנים היא נטויה. הצהרה זו כתובה בתוך התג, כך שלא תהיה לה תג סגירה, כפי שניתן לראות בתמונה למעלה. עכשיו סגור את כל התגים והפעל אותם בדפדפן. הוא מראה את אותן תוצאות כפי שרצינו.
< עמ סִגְנוֹן=עשה-סִגְנוֹן: נטוי;> 
דוגמה 6
לאחר inline, נוסיף כעת את הדוגמה של עיצוב פנימי. כאן מתווספת כיתה בתוך החלק הראש. ואז שם המחלקה מוכרז בתוך תג הפסקה בגוף ה- html. כך שיהיה נגיש בקלות.
< רֹאשׁ >< סִגְנוֹן >
.ל{
עשה-סִגְנוֹן: נטוי;
}
</ סִגְנוֹן ></ רֹאשׁ >
אתה יכול לראות שהמחלקה מאותחלת בשיטת הנקודה. ישנן שתי פסקאות בקוד; יישמנו את הסטיילינג הזה על אחד מהם. אז זה שימושי כשאנחנו רוצים לעצב פסקה אחת.
הצהרת הכיתה בתוך הפסקה היא;
< עמ מעמד=א>< עמ מעמד='ל'>
זה יגיע לשיעור בראש. עכשיו תראה את הפלט. תבחין שאחת הפסקאות היא בצורת נטוי.
סיכום
מאמר זה מייצג את עיצוב הטקסט בצורה נטויה. עיצוב טקסט הוא חלק חיוני בעיצוב דף אינטרנט.