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

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

 
מאמרים אחרונים מאמרים אחרונים
15/02/2022 22:51
ככה תיבנו חנות וירטואלית מותאמת סלולר שתשפר את חוויית המשתמש ותגדיל את ההמרות.
03/02/2022 0:06
תקן HTML5 לצד הלקוח באתרי אינטרנט הוא התקן המוביל בימינו. קראו על היתרונות של התקן.
31/01/2022 15:40
בניית אתר אינטרנט בשפת צד השרת PHP היא בחירה חכמה בשפת פיתוח ותיקה, מובילה ומהירה.
תגובות אחרונות תגובות אחרונות
מדריך CSS - מתחילים
17/01/2022 19:35
היי, עיצוב עושים עם CSS, ולא ...
מדריך CSS - מתחילים
16/01/2022 20:41
האם יש אפשרות לעצב רקע בתוך דף...
מדריך CSS - מתחילים
18/11/2021 10:18
היי ינון, אתה צריך את הטקסט ש...
תגובות אחרונות פוסטים אחרונים בפורום
27/06/2022 23:53
שלום רב, ישנה בעיה קטנה בא...
27/06/2022 23:51
שלום! הבעיה שלי אסביר אותה הר...
27/06/2022 23:49
הי,כיצד כדאי להשקיע בשיווק של ...

תגיות עיצוב טקסט

  1. דף הבית
  2. מדריך HTML5
  3. תגיות עיצוב טקסט

כיצד מעצבים טקסט מוזח, מודגש, קטן או גדול?

עיצוב סגנונות טקסט ב-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

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