آموزش html بخش سوم

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

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

در قسمت قبل آموزش HTML ، با اتریبیوت style آشنا شدیم و گفتیم که برای دادن حالتی خاص به متن یا هر جزء از سند، با دادن پراپرتی های مختلف، از این اتریبیوت استفاده می‌کنیم.

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

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

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

تگ <b> برای bold کردن متن‌ها و لغات برای نمایش به کاربر استفاده می‌شود. اما تگ <strong> علاوه بر bold کردن متن‌ها، به موتورهای جستجو می‌فهماند که این متن یا لغت bold شده مهم هستند. پس تگ <b> صرفا برای کاربر و تگ <strong> برای موتورهای جستجو و کاربر استفاده می‌شوند. این تگ را برای افزایش قدرت سئو سایت استفاده می‌کنیم:

<!DOCTYPE html>

<html lang="en">

          <head>

 <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <p> <b> این متن برای کاربر بلد شده است </b>  </p>

                   <p> <strong> این متن برای موتورهای جستجو بلد شده است  </strong> </p>

 

 

 

          </body>

</html>

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

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

همانند تگ‌های بالا که توضیح داده شد، تگ <i> صرفا برای ایتالیک کردن متن یا لغت برای نمایش به کاربر و تگ <em> برای ایتالیک کردن متن یا لغت مهم برای موتورهای جستجو است:

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <p> این متن ایتالیک نشده است </p>

                   <p> <i> این متن برای کاربر ایتالیک شده است </i>  </p>

                   <p> <em> این متن برای موتورهای جستجو ایتالیک شده است  </em> </p>

 

 

 

          </body>

</html>

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

با توجه به مثال‌های بالا، در نحوه نمایش تگ‌ها <b> و <strong> و تگ‌های <i> و <em> تغییری ایجاد نشده است. همان‌طور که گفتیم تگ‌های <b> و <i> صرفا برای bold و italice کردن متن برای فقط کاربر استفاده می‌شوند و تگ‌های <strong> و <em> برای bold و italice کردن متن‌ها و لغات مهم برای موتورهای جستجو و کاربر استفاده می‌شوند.

آشنایی با تگ <small>

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

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <p> در این متن لغت <small> کوچک </small> درون تگ اسمال قرارگرفته شده است </p>

 

 

          </body>

</html>

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

آشنایی با تگ <mark>

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

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <p> این تگ برای <mark> هایلایت </mark> کردن و <mark> نشانه‌گذاری </mark>  استفاده می‌شود </p>

 

</body>

</html>

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

آشنایی با تگ <del>

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

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <p> متنی که درون این تگ قرار می‌گیرد <del>به این شکل </del> نمایش داده می‌شود </p>

 

          </body>

</html>

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

آشنایی با تگ <ins>

با این تگ، در زیر لغاتی را که به متن اضافه می‌کنیم، خط می‌کشیم. به‌عکس زیر توجه کنید:

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <p> فرض کنید که این‌یک پاراگراف یا جمله باشد، <ins> این لغت </ins> را به آن اضافه کرده‌ایم </p>

 

          </body>

</html>

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

آشنایی با تگ <sub>

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

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <p> در این پاراگراف، <sub>این قسمت </sub> درون تگ ساب قرارگرفته است </p>

 

          </body>

</html>

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

آشنایی با تگ <sup>

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

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

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

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

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <p> <q> این متن نقل درون تگ نقل‌قول قرارگرفته است </q> </p>

 

          </body>

</html>

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

اما برای نقل‌قول کردن متن و محتوایی از یک سایت، برای جلوگیری از پنالتی شدن باید متنی را که از سایت غیر از سایت خودمان نقل می‌کنیم، از تگ <blockquote> استفاده می‌کنیم. همانند تگ <q> متن نقل‌قول، درون این تگ قرار می‌گیرد و با استفاده از اتریبیوت cite منبع متن را برای موتورهای جستجو مشخص می‌کنیم. در نمایش متن درون این تگ، مرورگرها متن را درون علامت نقل‌قول قرار نمی‌دهند. به کدهای زیر و نحوه استفاده از اتریبیوت cite دقت کنید:

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                                      <p> این متن اصلی سایت است و نقل‌قول نیست

                    <blockquote cite="http://www.sitesazan.net"> این متن از سایت دیگر نقل‌شده است </blockquote>  </p>

 

 

          </body>

</html>

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

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

تعین کلمان مخفف در زبان HTML

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

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <p> کلمه <cite title=" پشتیبانی و نوسازی هلیکوپترهای ایران "> پنها </cite> مخفف عبارت : پشتیبانی و نوسازی هلیکوپترهای ایران است که این عبارت را در اتریبیوت تایتل در تگ آغاز تعیین کرده‌ایم. </p>

 

          </body>

</html>

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

آشنایی با تگ <address>

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

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <p> برای نوشتن آدرس از تگ آدرس استفاده می‌کنیم که متن‌ها به‌صورت ایتالیک نمایش داده می‌شوند. برای نمونه، آدرس شرکت ما: </p>

 

                   <address> تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ واحد ۵ </address>

 

          </body>

</html>

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

آشنایی با تگ <cite>

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

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <p> متن تایپ‌شده در این تگ به‌صورت ایتالیک نمایش داده می‌شود </p>

                   <!—خط زیر برای اضافه کردن عکس به صفحه است که در ادامه با آن آشنا خواهید شد -->

                   <img src="images/image01.jpg" alt=" ظهر عاشورا " width="250" height="250">

                   <p> تابلو <cite> ظهر عاشورا </cite> اثر استاد محمود فرشچیان </p>

 

          </body>

</html>

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

آشنایی با تگ <bdo>

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

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <p> اگر مرورگرتان این تگ را ساپورت کند، کتن زیر از چپ به راست نمایش داده می‌شود: </p>

 

                   <bdo dir="rtl"> این متن از راست به چپ نمایش داده می‌شود و به‌درستی نمایش داده می‌شود. </bdo>

 

                   <br>

 

                   <bdo dir="ltr"> این متن از چپ به راست نمایش داده می‌شود. </bdo>

 

          </body>

</html>

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

[rating itemreviewed=”آموزش HTML – بخش سوم” rating=”9.5″ reviewer=”سایت سازان” dtreviewed=”12/11/2016″ best=”10″ worst=”0″]زبان HTML دارای اجزاء خاصی است که برای طراحی سایت و ایجاد تغییراتی در نمایش متن از آن‌ها استفاده می‌کنیم و HTML و HTML5 آموزش و آموزش طراحی وب[/rating]

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

دسته بندی طراحی سایت در سایت سازان