יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
03/12/2024 10:44
מדריך זה מציג טכניקות מתקדמות לאופטימיזציה של UX, כולל ממשקי גרירה ושחרור, תוצאות בדיוק בזמן עם AJAX...
26/11/2024 11:09
מדריך זה מכסה את ההיבטים הבסיסיים של קידום אתרים, תוך התמקדות בטכניקות, כלים ואסטרטגיות של קידום חנו...
17/11/2024 17:26
במדריך זה, נבין מדוע בניית חנות וירטואלית חייבת להעשות תוך חשיבה על אופטימיזציית מהירות הגלישה ונחקו...

עיצוב טקסט, תגית b, i, strong

  1. דף הבית
  2. מדריך HTML5 למתכנת המתחיל
  3. עיצוב טקסט, תגית b, i, strong
כיצד מעצבים טקסט מוזח, מודגש, קטן או גדול?

עיצוב סגנונות טקסט ב-HTML5

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

כך מגדירים בקוד סוגי עיצוב שונים של הטקסט:

<b>this text is bold</b>
<em>this text is emphasized</em>
<i>this text is italic</i>
<small>this text is small</small>
<strong>this text is strong</strong>
Some Text<sub>this text is subscript</sub>
Some Text<sup>this text is superscript</sup>
<ins>this is an inserted text</ins>
<del>this is a deleted text</del>
this text is bold
this text is emphasized
this text is italic
this text is small
this text is strong
Some Textthis text is subscript
Some Textthis text is superscript
this is an inserted text
this is a deleted text

כך יוצרים טקסט בסגנון פלט מחשב:

<code>this is computer code text</code>
<kbd>this is keyboard text</kbd>
<samp>this is sample computer code</samp>
<var>this is a variable</var>
<pre>this is a preformatted text</pre>
this is computer code text
this is keyboard text
this is sample computer code
this is a variable
this is a preformatted text

 

ואלו הן תגיות נוספות להגדרת טקסט (ראשי תיבות, ציטוטים וכו'):

<abbr>this is an abbreviation</abbr>
<address>this is a contact information for the document's owner or author</address>
<bdo dir="ltr">this defines the text's direction</bdo>
<blockquote><p>this is a quotation block</p></blockquote>
 <q>this is a short quotation</q>
<cite>this is a citation</cite>
<dfn>this is a definition term</dfn>
this is an abbreviation
this is a contact information for the document's owner or author
this defines the text's direction

this is a quotation block


this is a short quotation
this is a citation
this is a definition term

 

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

הסמנטיקה של תגיות העיצוב

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

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

 

הוספת תגובה
YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

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

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

 

אל תהססו! מלאו את הטופס או התקשרו עכשיו 077-7644819

 
WhatsApp
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: