مهندس طراحی سایت - سابقه 10 سال تدریس در جهاددانشگاهی مشهد - مدرس نرم افزارها و برنامه های کامپیوتری - عضو تیم برنامه نویسی جی وب
Formatting یا فرمت متن در اسناد HTML توسط ۱۱ تگ انجام می‌شود.
قبل از توضیح در مورد این تگها ابتدا باید مطلب زیر را متذکر شوم :
Markup Element ها فقط روی نحوه نمایش ظاهری محتوای تگ تاثیر دارند ، اما Phrase Element ها علاوه بر اینکه روی نحوه نمایش ظاهری محتوای تگ تاثیر دارند ، می‌توانند به محتوای تگ معنی بدهند . همچنین نرم‌افزارهای ایندکس و موتورهای جستجو بر اساس همین Phrase Element هاست که مطالب شما راجداسازی و گروه‌بندی می‌کنند. و این از لحاظ Seo بسیار مهم است. تگهای قالب‌بندی یا فرمت متن در HTML برای نمایش انواع خاصی از متن به صورت زیر استفاده می‌شوند:
هر دو این تگها از لحاظ ظاهری متن را به شکل bold ( توپر و پررنگ ) نمایش می‌دهند . اما تفاوت این دو تگ در این است که تگ <bold> یک Markup Element است و تگ <strong> یک Phrase Element است.
مثال :
|
1 2 3 |
<b>This text uses the bold property </b>
<strong>This text uses the strong property</strong> |
نتیجه مثال فوق به صورت زیر می‌باشد :
This text uses the bold property
This text uses the strong property
همانطور که در بالا می‌بینید دو تگ از لحاظ ظاهری هیچ فرقی با هم نمی‌کنند.
هر دو این تگها از لحاظ ظاهری متن را به شکل مورب ( کج ) نمایش می‌دهند . اما تگ <i> یک Markup Element است و تگ <em> یک Phrase Element است.
مثال :
|
1 2 3 4 |
<i>This text uses the i property </i>
<em>This text uses the em property</em> |
نتیجه مثال فوق به صورت زیر می‌باشد :
This text uses the i property
This text uses the em property
همانطور که در بالا می‌بینید دو تگ از لحاظ ظاهری هیچ فرقی با هم نمی‌کنند.
این تگ متن داخلش را نسبت به بقیه متون اطرافش با سایزی کوچکتر نمایش می‌دهد.این تگ معمولا داخل یکی از تگهای درج متن مثل تگ <p> استفاده می‌شود.
مثال :
|
1 |
<p>This text uses the <small>small</small> property</p> |
نتیجه مثال فوق به صورت زیر می‌باشد :
This text uses the small property
این تگ متن داخلش را نسبت به بقیه متون اطرافش با سایزی بزرگتر نمایش می‌دهد.این تگ معمولا داخل یکی از تگهای درج متن مثل تگ <p> استفاده می‌شود.
مثال :
|
1 |
<p>This text uses the <big>big</big> property</p> |
نتیجه مثال فوق به صورت زیر می‌باشد :
This text uses the big property
اگر بخواهید قسمتی از یک متن یا تمام متن را هایلایت یا با رنگ پشت زمینه مشخص کنید می‌توانید از این تگ استفاده کنید. این تگ را هم می‌توانید داخل یکی از تگهای درج متن مثل تگ <p> استفاده کنید.
مثال :
|
1 2 3 4 |
<p>This text uses the<mark> mark </mark> property</p>
<mark>This text uses the mark property</mark> |
نتیجه مثال فوق به صورت زیر می‌باشد :
This text uses the mark property
This text uses the mark property
کشیدن خط برروی یک قسمت از یک متن (پاراگراف) و نمایش حذف ظاهری آن از متن.
مثال :
|
1 |
<p>This text uses the<del> del </del> property</p> |
نتیجه مثال فوق به صورت زیر می‌باشد :
This text uses the del
درج متن جایگزین به صورت زیر خط دار برای متن حذف شده در متن ( پاراگراف ) توسط تگ <del>.
مثال :
|
1 |
<p>This text uses the <ins>Ins</ins> Instead <del> del </del> property</p> |
نتیجه مثال فوق به صورت زیر می‌باشد :
This text uses the Ins Instead del
قراردادن یک متن یا عدد با سایزی کوچکتر نسبت به بقیه متن و پایینتر از سطح متن فعلی ( اندیس پایین).
مثال :
|
1 2 3 4 |
<p>This text uses the <sub>sub</sub> property</p>
<p>The number 5<sub>13</sub> represents the lower index of 5</p> |
نتیجه مثال فوق به صورت زیر می‌باشد :
This text uses the sub property
The number 513 represents the lower index of 5
قراردادن یک متن یا عدد با سایزی کوچکتر نسبت به بقیه متن و بالاتر از سطح متن فعلی ( اندیس بالا )
مثال :
|
1 2 3 4 |
<p>This text uses the <sup>sup</sup> property</p>
<p>The number 5 is displayed as 16 with power of 5 <sup>16</sup></p> |
نتیجه مثال فوق به صورت زیر می‌باشد :
This text uses the sup property
The number 5 is displayed as 16 with power of 5 16
