طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش HTML – بخش سوم

آموزش HTML | آموزش HTML5

در بخش چهارم آموزش HTML مطالب زیر را خواهیم آموخت:

  • قالب بندی متن ها
  • نقل قول

قالب بندی متن ها در HTML

در بخش دوم آموزش HTML با خصیصه style آشنا شدیم و گفتیم که از این خصیصه برای سبک دهی به المان ها استفاده می کنیم.

زبان HTML دارای المان های خاصی است که برای ایجاد تغییراتی در نحوه نمایش متن از آنها استفاده می کنیم. لیستی از این المان ها و کاربرد آن را در زیر خواهید دید:

  • تگ <b>  برای برجسته ( bold ) کردن متن ها.
  • تگ <strong>  این تگ نیز برای برجسته کردن متن ها استفاده می شود. ( عبارات مهم را با این تگ مشخص می کنیم. )
  • تگ <i>  برای کج ( italic ) نوشتن متن ها جهت تاکید بر روی آنها.
  • تگ <em>  برای تاکید بر کلمات خاص متن ( emphasized)
  • تگ <mark>  برای هایلایت کردن متن
  • تگ <small>  برای کوچک کردن متن
  • تگ <del>  خطی را بر روی متن می کشد. به این شکل
  • تگ <ins>  برای خط کشیدن زیر متن ها و عبارات: به این صورت زیر متن خط می کشیم.
  • تگ <sub>  برای زیر نویس کردن متن ها

تفاوت تگ های <b> و<strong>

بعضی از برنامه نویسان معتقدند که گوگل بین تگ های <b>  و <strong>  در رتبه بندی، تفاوت قائل می شود. اما مطابق با گفته های آقای مت کاتس ( Matt Cuts از مدیران گوگل ) موتور جستجوی گوگل از لحاظ سئو و رتبه بندی، بین این دو تگ تفاوتی قائل نیست:



آموزش HTML – بخش اول

مقایسه تگ های <i> و <em>

مطابق توضیحات داده شده برای تگ های b و strong ، موتورهای جستجو بین این دو تگ نیز تفاوتی قائل نمی شوند و در رتبه بندی و سئو تاثیری نخواهند داشت



آموزش HTML – بخش اول

 تگ <small>

اگر در یک پاراگراف بخواهیم قسمتی از متن یا عبارتی را کوچک کنیم از این تگ استفاده می کنیم و قسمت مورد نظر را در این متن می نویسیم:

آموزش HTML – بخش اول

تگ <mark>

همانطور که در بالا گفتیم این تگ برای هایلایت کردن و نشانه گذاری قسمت های مهم متن استفاده می شود:

آموزش HTML - بخش 3 | آموزش طراحی صفحات وب

 تگ <del>

این تگ برای خط کشیدن بر روی متن و لغات استفاده می شود. ( حتما در فروشگاه های اینترنتی با محصولاتی برخورد کرده اید که تخفیف خورده و بر روی قیمت قبلی خطی کشیده شده است.)

آموزش HTML - بخش 3 | آموزش طراحی صفحات وب

تگ <ins>

با این تگ زیر لغات خط می کشیم:

تگ <sub>

این تگ برای زیر نویس کردن ( اندیس گذاری ) استفاده می شود:

آموزش HTML – بخش اول

تگ <sup>

این تگ برای بالا نویس کردن متن استفاده می شود:

نقل قول در زبان HTML

در زبان HTML برای نقل قول کوتاه از یک شخص یا یک کتاب، از تگ <q>  استفاده می کنیم. مرورگرها علامت نقل قول را در اطراف متن قرار می دهند.

آموزش HTML - بخش 3 | آموزش طراحی صفحات وب

اما زمانی که متنی را از سایت دیگری نقل می کنیم، باید از تگ <blockquote>  استفاده کنیم و آدرس سایتی که از آن نقل کرده ایم را در خصیصه cite بنویسیم. این تگ فاصله خالی در اطراف متن ایجاد خواهد کرد:

آموزش HTML - بخش 3 | آموزش طراحی صفحات وب

توجه کنید که در هنگام نوشتن خصیصه cite، باید آدرس کامل سایت مورد نظر را همراه با http:// نوشت و آدرس کامل را درون علامت نقل قول ( “” ) قرار داد. با توجه به عکس بالا، در این حالت متن نقل قول شده، با مارجینی متفاوت نمایش داده می شود.

کلمات مخفف

علاوه بر نقل قول ها، برای افزایش قدرت سئو باید از تگ <abbr>  ( که مخفف لغت Abbreviation است ) برای کلمات مخفف استفاده شود. این تگ به موتورهای جستجو و سیستم های ترجمه و مرورگرها، اطلاعات مفیدی را خواهد داد. هنگامی  که کلمه مخففی را درون تگ <abbr>  قرار دهید، عبارت اصلی را در خصیصه title می نویسیم که این عبارت به صورت tooltip نمایش داده خواهد شد. ( یعنی با قرار دادن موس بر روی کلمه، متن اصلی که در خصیصه title تعیین کرده اید نمایش داده خواهد می شود. )

آموزش HTML – بخش اول

 تگ <address>

در یک سند HTML وقتی می خواهیم در مورد یک اثر اطلاعاتی را به مخاطب بدهیم و یا آدرسی را ذکر کنیم، از تگ <address>  استفاده می کنیم. متن های درون این تگ به صورت حروف خوابیده ( کج ) نمایش داده می شوند:

آموزش HTML – بخش اول

 تگ <cite>

برای معرفی یک اثر هنری از تگ <cite>  استفاده می کنیم. متن درون این تگ نیز به صورت خوابیده نمایش داده می شود:

آموزش HTML - بخش 3 | آموزش طراحی صفحات وب

تگ <bdo>

از طریق این تگ می توان متن را به صورت برعکس نمایش داد. برای تعیین جهت نوشتن متن ( از چپ به راست یا از راست به چپ ) از خصیصه dir استفاده می کنیم و مقدار آن را برای راست به چپ rtl ( right to left ) و برای چپ به راست ltr ( left to right )  تنظیم می کنیم.

آموزش HTML - بخش 3 | آموزش طراحی صفحات وب

بخش سوم آموزش HTML را در اینجا به پایان میر سانیم. دوستان و همراهان سایت سازان می توانید در بخش نظرات، سوالات خود در زمینه مطالب این بخش را با کارشناسان سایت سازان مطرح نمایید. همراه شما خواهیم بود در جلسات بعدی آموزش HTML.

 

 

نوشته های مرتبط