امتیاز دهید:

با استفاده از تگ <small> همانگونه که از نامش پیدا است می توان محتوای داخل این تگ را کوچک تر از اندازه استاندارد نمایش داد. برای روش شدن تاثیر این تگ کد زیر را وارد ویرایشگر متن می کنیم:

<!DOCTYPE html>
<html>
    
    <head>
        <title>Netshahr</title>
    </head>
    
    <body>
        <p>This is a
            <small>sentence</small>
        </p>
    </body>
</html>

همانگونه که در کد فوق مشخص است داخل تگ پاراگراف عبارت This is a sentence را نوشته ایم. حال قصد داریم فقط کلمه sentence را به صورت کوچک تر در معرض دید کاربران قرار دهیم. برای این منظور این کلمه را داخل تگ های <small></small> قرار می دهیم. برای روشن شدن نتیجه کد فوق، فایل را داخل مرورگر باز می کنیم:

آشنایی با تگ small در زبان اچ تی ام ال

می بینیم کلمه ای که در تصویر فوق با یک بیضی قرمز رنگ نشان داده شده است نسبت به مابقی کاراکترها کوچک تر است.
زمان های بسیاری در ساخت صفحات وب برای ما پیش خواهد آمد که نیاز داریم تا عبارتی را به صورت Bold و یا Italic در آوریم. در واقع هیچ گونه تگی در زبان اچ تی ام ال تحت این عناوین وجود ندارد بلکه در عوض می توانیم برای این کار به ترتیب از تگ های <strong> و <em> استفاده کنیم. کلمه strong به معنی "قوی" است و em هم از ابتدای کلمه emphasis به معنی "تأکید" گرفته شده است. در واقع برای Bold کردن یک عبارت بایستی آن را مابین دو تگ <strong> و </strong> قرار دهیم و به منظور Italic کردن یا به عبارتی کج نوشتن یک کلمه یا جمله می بایست آن را مابین دو تگ <em> و </em> قرار دهیم. برای روشن شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:

<body>
        <p>
            <strong>This is a sentence</strong>
        </p>
        <p>
            <em>This is a sentence</em>
        </p>
    </body>

همانطور که در فوق مشخص است دو پاراگراف ایچاد کرده ایم. برای آنکه پاراگراف اول را به صورت Bold در بیاوریم از تگ های <strong></strong> استفاده کرده ایم و برای آنکه پاراگراف دوم را به صورت Italic در بیاوریم آن را داخل تگ های <em></em> قرار می دهیم:

تگ های strong و em در زبان اچ تی ام ال

می بینیم که تغییرات همانگونه که انتظار داشتیم اعمال شده اند.
به عنوان راه کاری جایگزین می توان از تگ <b></b> به جای تگ <strong></strong> و از تگ <i></i> به جای تگ <em></em> استفاده کرد. اکنون با استفاده از این دستورات کد فوق را بازنویسی می کنیم:

<body>
        <p>
            <b>This is a sentence</b>
        </p>
        <p>
            <i>This is a sentence</i>
        </p>
</body>

مجدد مرورگر را به روز رسانی می کنیم:

تگ های strong و em در زبان اچ تی ام ال

می بینیم که دقیقاً همان نتایج مشاهده می شود (لازم به ذکر است که این دو سری تگ با هم تفاوت هایی هم دارند. در واقع تگ های پیشین به گونه ای در مرورگر تفسیر می شوند که «مهم» تلقی می شوند اما این در حالی است تگ های <b> و <i> فقط برای جلب توجه متن هستند. به عبارت دیگر اگر در آینده مرورگر ها دارای قابلیتی شوند که بتوانند نکات مهم را اصطلاحاً Highlight کنند، مسلماً فقط تگ های <strong> و <em> از عهده این کار بر خواهند آمد. علاوه بر این به نظر می رسد که تگ های <strong> و <em> از دید سئو مهم تر تقلی شوند).
تگ های دیگری هم معمولاً در طراحی صفحات وب مورد استفاده قرار می گیرند که آن ها را در قالب کدهای زیر نمایش داده ایم:

<body>
        <p>This is a
            <u>sentence</u>
        </p>
        <p>This is a <sub>sentence</sub>
        </p>
        <p>This is a
            <sup>sentence</sup>
        </p>
        <p>This is a <s>sentence</s>
        </p>
</body>

ابتدا صفحه اچ تی ام ال را در مرورگر اجرا نموده تا از روی خروجی کدها بهتر بتوانیم آن ها مورد بررسی قرار دهیم:

تگ های مختلف زبان اچ تی ام ال

در اولین پاراگراف از تگ <u></u> استفاده کرده ایم. حرف u مخفف کلمه Underline است. کاری که این تگ انجام می دهد این است که زیر محتوایی که داخل آن قرار گیرد خط می کشد.
در پاراگراف دوم از تگی تحت عنوان <sub></sub> استفاده شده است. عبارت sub مخفف کلمه subscript است و کاری که این تگ انجام می دهد این است که محتوای داخل آن را پایین تر از حد معمول نمایش می دهد.
در پاراگراف سوم از تگی تحت عنوان <sup></sup> استفاده کرده ایم که این عبارت مخفف کلمه superscript است. کاری که این تگ انجام می دهد این است که محتوای داخل آن را بالاتر از حد معمول نمایش می دهد.
در پاراگراف سوم از تگی تحت عنوان <s></s> استفاده کرده ایم. حرف s مخفف کلمات Strike out به معنی خط کشیدن روی چیزی است. همانطور که از نام این تگ بر می آید، تگ <s> وظیفه دارد تا روی محتوای قرار گرفته داخل آن خط بکشد.
تگی در اچ تی ام ال وجود دارد تحت عنوان <mark></mark> که این وظیفه را دارا است تا هر آنچه مابین آن قرار گرفت را اصطلاحاً Highlight کند. برای روشن شدن تاثیر این تگ کد فوق را به صورت زیر بازنویسی می کنیم:

     <body>
        <p>This is a
            <mark>sentence</mark>
        </p>
    </body>

حال پس از به روز رسانی مرورگر تاثیر این تگ را مشاهده خواهیم کرد:

آشنایی با تگ mark در زبان اچ تی ام ال

یکی از تگ های پرکاربرد دیگر در طراحی صفحات وب استفاده از تگ های <q></q> است. در واقع حرف q اختصار کلمه Quotation است. برای روش شدن تاثیر این تگ کد فوق را به صورت زیر بازنویسی می کنیم:

    <body>
        <q>This is a paragraph</q>
    </body>

مجدد مرورگر خود را به روز رسانی می کنیم:

آشنایی با تگ q در زبان اچ تی ام ال

می بینیم که دو طرف عبارت مد نظر علامت های "  " قرار گرفته اند.
تگ دیگری که مرتبط با Quotation است <blockquote></blockquote> نام دارد. برای مشاهده تاثیر این تگ کد فوق را به صورت زیر بازنویسی می کنیم:

  
<body>
        <p>This is a paragraph</p>
        <blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</blockquote>
    </body>

همانطور که در کد فوق مشخص است ابتدا پاراگرافی محتوی عبارت This is a paragraph نوشته ایم. سپس متنی را داخل تگ های <blockquote></blokquote> قرار داده ایم. حال مجدد مرورگر خود را به روز رسانی می کنیم:

آشنایی با تگ blockquote

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


نظرات
نظرات
  • بهزاد مرادی :

    در پاسخ به مهدی خسروی

    "زمان های بسیاری در ساخت صفحات وب برای ما پیش خواهد آمد که نیاز داریم تا عبارتی را به صورت Bold و یا Italic در آوریم. در واقع هیچ گونه تگی در زبان اچ تی ام ال تحت این عناوین وجود ندارد..."
    پس تگ های و چی هستن ؟ تا اونجایی که بنده میدونم اوناهم دقیقا همچین کاری انجام میدن !


    سلام،
    برای اینکار می توانید از تگ های strong و em استفاده نمایید.


    با سپاس
    بهزاد مرادی
    تیم تولید محتوای نت شهر


    1393/06/13 04:23:20
  • مهدی خسروی :

    "زمان های بسیاری در ساخت صفحات وب برای ما پیش خواهد آمد که نیاز داریم تا عبارتی را به صورت Bold و یا Italic در آوریم. در واقع هیچ گونه تگی در زبان اچ تی ام ال تحت این عناوین وجود ندارد..."
    پس تگ های و چی هستن ؟ تا اونجایی که بنده میدونم اوناهم دقیقا همچین کاری انجام میدن !


    1393/06/11 21:01:50
  • Erfan :

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


    1393/05/22 20:45:09
  • بهزاد مرادی :

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


    با تشکر از شکیبایی شما
    دپارتمان تولید محتوای نت شهر


    1393/04/29 09:21:18
  • امیر :

    اقای مرادی من میخوام مطالب را به صورت مکتوب داشته باشم اگر میشود مطالب را به صورت پیوسته برایم قرار دهید یا برایم ایمیل کنید!!!
    اگر امکانش هست!!!!تشکر میکنم اگر این کار را برایم انجام دهید!!!!


    1393/04/26 11:42:35
  • بهزاد مرادی :

    دوست گرامی سلام،
    ممنون از لطف شما. لازم به ذکر است که امکان قرار دادن فایل های PDF آموزش ها نیست اما شما به سادگی خواهید توانست از صفحات وب خروجی PDF بگیرید.


    با سپاس فراوان
    بهزاد مرادی
    تیم تولید محتوای نت شهر


    1393/04/26 06:10:36
  • امیر :

    سلام!!!!
    مطالبتون بسیار مفید است من که تا با حالا برنامه نویسی کار نکردم تا اینجا مطالب را به خوبی فرا گرفتم!!!!
    ولی ازتون یه خواهش داشتم میخواستم اگر امکانش هست فایل pdf این مجموعه و مجموعه های دیگر را در اختیارم بگزارید !!!!
    اگر این کار را انجام دهید بسیار ممنون میشم!!!!
    با تشکر!!!!


    1393/04/25 22:26:23