پر رنگ و ضخیم نمودن نوشته ها در html با استفاده از تگ <b>

اگر بخواهیم که نوشته ی مورد نظر به صورت پررنگ و ضخیم دیده شود می توانیم از تگ های <b> <b/>استفداده کنیم.

این تگ ها باعث می شوند که  جملات ما بین  آنها bold  شده وبه صورت پر رنگ و ضخیم نمایش داده شوند.

 برای مثال خواهیم داشت:

 

 

 

آنچیزی که در صفحه وب مشاهده می کنید به ای صورت است؛

 

 

مورب نمودن نوشته ها در html با استفاده از تگ <i>

اگر بخواهیم که نوشته ی مورد نظر به صورت مورب دیده شود می توانیم از تگ های <i> <i/>استفداده کنیم.

این تگ ها باعث می شوند که  جملات ما بین  آنها italic  شده وبه صورت کج و مورب نمایش داده شوند.

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

 

بزرگ کردن نوشته ها در html با استفاده از تگ <big>

تگ <big> محتوایش را یک اندازه بیشتر از متون اطرافش نمایش می دهد.

برای مثال خواهیم داشت:

 

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است

 

 

معرفی متن به صورت ماشین نویسی در html با استفاده از تگ <tt>

تگ <tt>یک متن که شامل حروف ماشین تحریر است را ایجاد می کند .

برای مثال خواهیم داشت:

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

]

 

کوچک کردن نوشته ها در html با استفاده از تگ <small>

هر چیزی  ما بین تگ های <small/> قرار بگیرد اندازه آن کمتر از متون اطرافش می باشد.این عنصر دقیقا عکس تگ <big> عمل می کند و محتوایش را یک واحد کوچکتر از متون اطرافش نمایش می دهد.

برای مثال خواهیم داشت:

 

 

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

 

معرفی متن به صورت کد کامپیوتری در html با استفاده از تگ <code>

این تگ نوشته را به صورت نوشته های درون محیط های برنامه نویسی قدیمی تبدیل کرده و یک متن که شامل کدهای رایانه ایست را ایجاد می کند .

شایان ذکر است که فونت زبان های برنامه نویسی این خصوصیت را دارد که اندازه همه حروف آن یکسان است و تمام کاراکتر ها به یک اندازه فضای افقی اشغال می کنند .

به اینگونه فونت ها Monospaced Font یا fixed-pitch font و یا non-proportional-font گفته می شود .

برای مثال خواهیم داشت:

 

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

 

معرفی متن به صورت مثالهای کامپیوتری در html با استفاده از تگ <samp>

تگ<samp> درhtml  متن را به صورت نمونه مثال های  کامپیوتری معرفی می کند.

برای مثال خواهیم داشت:

 

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

 

معرفی متن به صورت متغیر های برنامه نویسی در html با استفاده از تگ <var>

تگvar  درhtml  متن را به صورت متغیرهای برنامه نویسی معرفی می کند.

برای مثال خواهیم داشت:

 

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

 

معرفی متن به صورت حروف دستگاه تایپ در html با استفاده از تگ <kbd>

تگ <kbd>درhtml  متن را به صورت حروف دستگاه تایپ معرفی می کند.

برای مثال خواهیم داشت:

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

 

معرفی متن به صورت یک نقل قول در html با استفاده از تگ <cite>

تگ  <cite> درhtml  متن را به صورت یک نقل قول معرفی می کند.از این تگ بیشتر برای ارائه یک نقل قول استفاده میشود.این تگ نوشته را به صورت مورب و پر رنگ در می آورد.

 

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

 

معرفی متن به صورت توصیفی در html با استفاده از تگ <dfn>

تگ<dfn> درhtml  متن را به صورت توصیفی معرفی می کند.

 

آنچیزی که در صفحه وب مشاهده می کنید به  صورت زیر است؛

 

 

برجسته کردن یک متن با تاکید بر روی جمله خاصی با استفاده از تگ <strong>

تگ های قوی (strong) برای برجسته کردن یک متن با تاکید بر روی کلمه خاصی است. با استفاده از strong tag به موتور های جستجو کمک می‌کنید تا متن اصلی‌ و کلیدی محتوایتان را در صفحه وب تشخیص دهد.

مثال:

 

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

 

وقتی که لغتی را با استفاده از تگ ‏ قالب بندی می‌کنید ، بازدید کننده واقعی می‌تواند آن را ببیند و متوجه علت برجسته بودن این لغت شود. و وقتی که لغتی را با استفاده از تگ ‏ قالب بندی می‌کنید بازدید کننده واقعی متوجه علت مورب بودن این لغت می شوداما یک خزنده موتور جستجو، یا یک صفحه خوان این توانایی را ندارد. روشی برای استفاده خیلی بهتر از زبان HTML‏، استفاده از تگ های ‏و (Emphasize) است. تگ جمله داخل تگ را به قالب برجسته تبدیل می‌کند و تگ ‏ نیز جمله را به قالب مورب تبدیل می‌کند. تفاوت آن‌ها با دو تگ قبلی در این است که وقتی یک خزنده موتور جستجو یا یک صفحه خوان با این تگ ها برخورد کرد می‌داند که باید به لغت یا لغات درون این تگ ها توجه داشته باشد. و به لغاتی که داخل این تگ ها قرار می‌گیرند،وزن بیشتری داده می‌شود. بنابر این اگر به طور ساده کلمات کلیدی خود را با استفاده از bold و italic درشت نما و مورب کنید، خزنده موتور جستجو و یا صفحه خوان،این کلمه‌ها را به عنوان کلماتی معمولی خواهد دید، اما در صورتی که از تگ های ‏ و در اطراف لغات کلیدی استفاده کنید، خزنده و صفحه خوان متوجه می‌شوند که کلمه‌های درون این تگ اهمیت خاصی در متن صفحه وب دارند و با کلمات ساده متن متفاوت  هستند.

 

مورب کردن یک متن با تاکید بر روی جمله خاصی با استفاده از تگ <em>

تگ(emphasize) درhtml  برای مورب کردن یک متن با تاکید بر روی جمله خاصی استفاده می شود.

 

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

 

 وقتی که لغتی را با استفاده از تگ ‏ قالب بندی می‌کنید ، بازدید کننده واقعی می‌تواند آن را ببیند و متوجه علت برجسته بودن این لغت شود. و وقتی که لغتی را با استفاده از تگ > ‏ قالب بندی می‌کنید بازدید کننده واقعی متوجه علت مورب بودن این لغت می شوداما یک خزنده موتور جستجو، یا یک صفحه خوان این توانایی را ندارد. روشی برای استفاده خیلی بهتر از زبان HTML‏، استفاده از تگ های ‏و (Em> (Emphasize> است. تگ جمله داخل تگ را به قالب برجسته تبدیل می‌کند و تگ ‏ نیز جمله را به قالب مورب تبدیل می‌کند. تفاوت آن‌ها با دو تگ قبلی در این است که وقتی یک خزنده موتور جستجو یا یک صفحه خوان با این تگ ها برخورد کرد می‌داند که باید به لغت یا لغات درون این تگ ها توجه داشته باشد. و به لغاتی که داخل این تگ ها قرار می‌گیرند،وزن بیشتری داده می‌شود. بنابر این اگر به طور ساده کلمات کلیدی خود را با استفاده ازbold   و italic درشت نما و مورب کنید، خزنده موتور جستجو و یا صفحه خوان،این کلمه‌ها را به عنوان کلماتی معمولی خواهد دید، اما در صورتی که از تگ های ‏ و در اطراف لغات کلیدی استفاده کنید، خزنده و صفحه خوان متوجه می‌شوند که کلمه‌های درون این تگ اهمیت خاصی در متن صفحه وب دارند و با کلمات ساده متن متفاوت  هستند.
 

 

نمایش متن به صورت زیر خط دار (underline) با استفاده از تگ <u>

تگ <u>درhtml  متن را به صورت زیر خط دار (underline)  نشان می دهد.اگر بخواهیم که نوشته ی ما به صورت زیر خط دار (underline) دیده شود می توانیم از تگ های </u> <u>استفداده کنیم. این تگ ها باعث می شوند که  جملات ما بین  آنها با underline  به صورت زیر خط دار نمایش داده شوند.

برای مثال خواهیم داشت:

 

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

وسط چین کردن نوشته ها در html با استفاده از تگ <center>

وسط چین کردن نوشته ها در html توسط تگ <center> ،اگر بخواهیم که نوشته ی ما وسط چین شود می توانیم از تگ های <center> <center/>استفداده کنیم. این تگ ها باعث می شوند که  جملات ما بین  آنها وسط چین نمایش داده شوند.

برای مثال خواهیم داشت:

 

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

 

نمایش متن به صورت اندیس در html با استفاده ا تگ <sub>

اگر بخواهیم که نوشته به صورت اندیس دیده شود می توانیم از تگ های <sub> < sub />استفاده کنید این تگ که فرم کوتاه عبارت Sub Script است برای نوشتن اندیس یا زیرنویس استفاده می شود . مثلا فرض کنید می خواهید یک فرمول شیمیایی را روی صفحه وب نمایش دهید می توانید تعداد اتم های فرمول را در تگ sub قرار دهید . زیر نویس ها معمولا به اندازه ی نصف ارتفاع یک کاراکتر پایین تر از کاراکتر ها قرار می گیرند و کمی کوچکتر از متنون اطرافشان هستند.

برای مثال خواهیم داشت:

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

 

نمایش متن به صورت توان در html با استفاده از تگ <sup>

درhtml  متن توسط تگ <sup> به صورت توان دیده می شود.اگر بخواهیم که نوشته به صورت توان( بالا نویس)  دیده شود می توانیم از تگ های <sup> < sup />استفاده کنید این تگ ها باعث می شوند که  نوشته ، ما بین  آنها به صورت توان یا بالانویس  دیده شود. محتوای این تگ به صورت (superscript) نشان داده خواهد شد. بالا نویس ها معمولا به اندازه ی نصف ارتفاع یک کاراکتر بالاتر از بقیه ی کاراکتر ا قرار می گیرند. و کمی کوچکتر از متون اطرافشان هستند.

برای مثال خواهیم داشت:

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

 

نمایش یک متن جدید وارد شده درhtml با استفاده از تگ<ins>

برای نشان دادن یک متن جدید وارد شده در html از تگ <ins> استفاده می شود.اگر بخواهید نوشته  ای را که در متن اصلی  وارد کرده اید  نشان دهید می توانیداز تگ های <ins></ins>استفاده کنید این تگ ها باعث می شوند که  نوشته  ای را که در متن اصلی  وارد کرده اید دیده شود. این تگ برای نشان دادن یک متن جدید وارد شده در صفحه به کار می رود و یک خط زیر نوشته های درون خود می کشد.

برای مثال خواهیم داشت:

 

آنچیزی که در صفحه وب میبینید به صورت زیر می باشد.

 

 

نشان دادن متن حذف شده در html با استفاده از تگ <del>

در html   از تگ <del>برای نشان دادن متن حذف شده استفاده می شود. این تگ باعث کشیده شدن یک خط بر روی نوشته های درون خود می شود .

برای مثال خواهیم داشت؛

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

برای مثال اگر بخواهیم نشان دهیم که متنی اشتباه بوده و به جای آن متن درست را نمایش دهیم برای این کار به صورت زیر عمل می کنیم.

 

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

 

 

 

نمایش قالب بندی پیش فرض در html با استفاده از تگ <pre>

اگر در محیط کد نویسی صفحات وب ، بین متن های نوشته شده با کلید space فاصله ایجاد کرده یا با کلید Enter به خط بعدی بروید ، مرورگر این مسئله را نادیده گرفته و تمام فاصله ها را از بین برده و حداکثر به اندازه یک کاراکتر فاصله ایجاد می کند . برای جلوگیری از این مسئله ، از تگ <pre> استفاده می کنیم . این تگ باعث نمایش متن درون خود با همان شکل و ساختاری که در محیط کد نویسی صفحه وارد شده است ، می شود .

برای مثال خواهیم داشت:

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

 

نمایش متن به صورت چشمک زن در html با استفاده از تگ <blink>

تگ <blink> در html متن را به صورت چشمک زن نشان می دهد.متن داخل این عنصر در مرورگر به صورت چشمک زن در خواهد آمد . اما باید به این نکته توجه داشت که این تگ تنها در مرورگر های google chrome,firefox,opera پشتیبانی می شود و IE  از آن پشتیبانی نمی کند.

برای مثال خواهیم داشت؛

 

 

در این مثال اگر صفحه ی خود را با یکی از مرورگر های نام برده شده که از این تگ پشتیبانی می کنند باز کنید مشاهده می کنید که متنی که داخل این تگ ها آمده است به صورت چشمک زن می باشد.

 

افزودن آدرس پستی در صفحات وب با استفاده از تگ <adress>

در html از تگ <address> برای افزودن آدرس پستی در صفحات وب استفاده می شود.چنانچه قصد  ساختن وب سایتی  را داشته و تمایل به گنجاندن آدرس شخصی خود در این صفحه هستید. می توانید به سادگی آدرس مورد نظر را در مکان دلخواهی در صفحه درج و از تگ <address> نیز به منظور  تغییر قالب بندی آن استفاده کنید. نرم افزار های مروگر وب  آدرس های شخصی را غالبا با سبک italic  (مورب ) نمایش می دهند .

برای مثال خواهیم داشت؛

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است؛

 

 

معرفی عبارات مخفف در html با استفاده از تگ <acronym>

در صفحات وب کلمات مخففی به چشم می خورند که هر کدام از آنها حاوی مفاهیم ویژه می باشند.برای مثال www مخففworld wide web  می باشد.

برای اینکه نشان دهیم که حروف www نشان دهنده ی چه مفهومی می باشد و مخفف چه کلماتی است از تگ<acronym> یا <abbr>استفاده می کنیم. هنگامی از این تگ استفاده می شود که بخواهیم کلمه ای را به صورت اختصاری در متن استفاده کنیم همچنین کاربر این امکان را داشته باشد که با بردن موس بر روی کلمه ی اختصاری  و نگه داشتن موس برای چند لحظه ، کلمات کاملی را  که کلمات اختصاری از آنها نشاَت گرفته است در یک کادر کوچک ببیند.

برای مثال خواهیم داشت:

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است

 

 

همانطور که در مثال بالا مشاهده می کنید در تگ <acronym > از ویژگی title  استفاده شده که در مقابل آن  کلمات کاملی را  که کلمات اختصاری از آنها نشاَت گرفته نوشته شده است، و این امکان را می دهد که با بردن موس بر روی کلمه ی اختصاری  و نگه داشتن موس برای چند لحظه ، کلمات کاملی را  که کلمات اختصاری از آنها نشاَت گرفته است در یک کادر کوچک نشان می دهد، که در مثال  بالا وقتی موس را روی کلمه ی html می بریم نشان می دهد که html مخفف چه کلماتی می باشد..(hyper text markup language)

 

تغییر جهت نمایش حروف در html با استفاده از بر چسب <bdo>

تگ <bdo> می تواند جهت نمایش حروف متن را تغییر دهد مثلا حروف از راست به چپ  یا از چپ به راست نمایش دهد.

برای مثال خواهیم داشت:

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است :

 

 

همانطور که در مثال بالا مشاهده می کنید،متنی که  بین تگ های <bdo> قرار می گیرد  جهت حروف تشکیل دهنده ی آن متن را با توجه به ویژگی dir تعیین می کند، برای مثال اگر (dir=rtl)باشد (rtl=right to left) یعنی حروف را از سمت راست به چپ نمایش بده و اگر dir=ltr)) باشد (ltr=left to right) یعنی حروف را از چپ به راست نمایش بده. در مثال بالا چون ویژگی dir=”rtl” است ، بنابر این حروف را از راست به چپ نمایش می دهد.

 

 

نمایش متن به صورت خط خورده در html با استفاده از تگ <strike>

تگ <strike>،این تگ محتوای خود را به صورت خط خورده نمایش می دهد و یک خط نازک بر روی متن خود ایجاد می کند.

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است :

 

 

 

برای نمایش یک متن یا نوشته به صورت نقل قول با استفاده از تگ <blockquote>

از تگ<blockquote>   برای نمایش یک متن یا نوشته به صورت نقل قول استفاده می شود. و باعث می شود که متن داخل این تگ کمی جلوتر قرار گرفته و مرورگر به صورت پیش فرض فضاهای خالی به ابتدا و انتهای متن اضافه  می کند.

 

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است :

 

 

 

نشان دادن یک نقل قول با استفاده از تگ <q>

تگ <q>  نیز همانند تگ <blockquote>برای ایجاد کردن یک نقل قول به کار می رود با این تفاوت که این تگ برای نشان دادن نقل قول های کوتاه به کار می رود.

برای مثال خواهیم داشت:

 

آنچیزی که در صفحه وب مشاهده می کنید به این صورت است :

 

 

ویژگی ها (صفت ها) در html

در html  با استفاده از ویژگی ها می توان کنترل بیشتری بر روی تگ ها داشت. برای هر یک از تگ ها می توان ویژگی هایی را تعریف کرد ، که این ویژگی ها با توجه به مقادیری که می گیرند بر روی رفتاری که یک تگ از خود نشان می دهد اثر میگذارند. برخی از تگ ها دارای چندین ویژگی می باشند که می توان آنها را با فاصله از هم جدا کرد.اگر برای تگ ویژگی در نظر گرفته شود ، این ویژگی همیشه در تگ ابتدایی تعریف می شود.

ویژگی ها از دو قسمت تشکیل می شوند

1-نام ویژگی

2- مقداری که این ویژگی می پذیرد.

 

 

برای مثال خواهیم داشت:

تگ <hr> یک خط افقی ایجاد می کند . برای جدا کردن محتوا در یک صفحه ی html به کار می رود. این تگ جزء تگ های تهی بوده و باید به همین شکل استفاده شود.

با استفاده از ویژگی ها می توان کنترل بیشتری بر روی تگ ها داشت، برای مثال این تگ می تواند ویژگی هایی  مثل width و color را بپذیرد .

 

 

همانطور که مشاهده می کنید در مثال بالا از تگ <hr> استفاده شده است. وآنچیزی که در صفحه وب مشاهده می کنید به صورت زیر می باشد.

 

 

با استفاده از ویژگی ها می توان کنترل بیشتری را بر روی این تگ داشت برای مثال اگر بخواهیم که  عرض خط افقی که ایجاد می شود و رنگ آن را کنترل کرد باید ازویژگی های width وcolor استفاده کرد

ویژگی width: این ویژگی عرض خط افقی را تعیین می کند که با توجه به مقداری که می گیرد عرض آن تعیین می شود.

ویژگی color: این ویژگی  رنگ خط  افقی را مشخص می کند که با توجه به مقداری که می گیرد رنگ خط افقی تعیین می شود.

 برای مثال خواهیم داشت:

 

 

 

آنچیزی که در صفحه وب مشاهده می کنید به صورت زیر می باشد.

 

 

 همانطور که در مثال بالا مشاهده می کنید از ویژگی width باتوجه به مقداری که این ویژگی گرفته(  500 px) برای تعیین عرض خط افقی استفاده شده و از ویژگی color با توجه به مقداری که این ویژگی گرفته (pink ) برای تعیین رنگ خط افقی استفاده شده است.

همانطور که در مثال بالا مشاهده می کنید تگ <hr> دارای چند ویژگی می باشد، دراین تگ از دو ویژگی استفاده شده است که با فاصله ای از یکدیگر جدا شده اند.در مثال بالا( width ، color ) نام ویژگی می باشند و( 500px ،pink )مقدار ویژگی می باشند.

 بسیاری از تگ ها صفت های منحصر به خود رادارند که به این صفت ها ،صفت های اختصاصی می گویند. اما بعضی از صفات نیز  بین تگ ها مشترک هستند و در همه ی آنها یک کار را انجام می دهند به این صفت ها ، صفت های عمومی می گویند.

برای تگ ها هر ویژگی دارای یک مقدار پیش فرض می باشد. در صورتیکه ویژگی به صورت صریح مقدار دهی نشود. مرورگر مقدار پیش فرض را در نظر می گیرد. به عنوان مثال به صورت پیش فرض پاراگراف ها از سمت چپ تنظیم می شوند

بعضی از صفت ها که به عنوان صفت عمومی شناخته می شوند در تمام تگ ها کار یکسانی را انجام می دهند. در زیر برخی از این تگ ها و وظیفه هر یک را مشاهده می کنید:

Class:

 از این صفت برای نسبت دادن کلاسی که به زبان css  نوشته شده است به یک عنصر استفاده می شود.

Dir:

این ویژگی جهت گیری متن داخل عنصر را کنترل می کند که شامل مقادیر:

  • Rtl برای جهت گیری راست به چپ  مورد استفاده  قرار می گیرد.
  • ltr برای جهت گیری چپ به راست مورد استفاده قرار می گیرد.
  •  

برای مثال خواهیم داشت:

 

آنچیزی که در صفحه وب مشاهده می کنید به صورت زیر می باشد.

 

 

همانطور که در مثال بالا مشاهده می کنید از ویژگی dir برای مشخص کردن جهت قرار گرفتن متن استفاده شده است و هما نطور که می بینید این ویژگی با توجه به مقدارrtl که گرفته از راست به چپ قرار می گیرد.

Id:

 از این صفت برای تعیین یک شناسه  برای یک عنصر استفاه می شود. این شناسه می بایست در صفحه یکتا باشد. از این صفت همچنین برای نسبت دادن  یک گزینشگر id  به یک عنصر استفاده می شود.

Lang:

 از این صفت معمولا برای تعیین زبان اصلی  به کار رفته در صفحه برای تگ <html> استفاده می شودشما می توانید این صفت را برای هر عنصر دیگری که زبانش غیر از آن چیزی است که درتگ    html      تعریف شده است نیز استفاده کنید. مقداری که این صفت می گیرد یکی از کد های زبانی مانند fa , en   خواهد بود.

Style:

از این صفت برای تعیین یکسری از قواعد و مقادیرشان که در زبان css تعریف می شوند برای یک عنصر می توان استفاده نمود.

Title:

  این صفت مقداری از نوع رشته ساده را دریافت می کند و آن را به صورت tooltip هنگامی که نشانگر موس بر روی عنصر قرار گیرد نمایش می دهد.

 برای مثال خواهیم داشت:

 

 

آنچیزی که در صفحه وب مشاهده می کنید به صورت زیر می باشد.

 

منابع و پیوند ها