آموزش HTML5 جلسه سوم : اصول کار و تنظیم متن و کلمات در HTML – قسمت اول

آموزش HTML5 جلسه سوم : اصول کار و تنظیم متن و کلمات در HTML – قسمت اول

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

<br> : [ نیاز به بسته شدن ندارد ] در واقع این تگ ، نقش کلید Enter را در HTML بازی می کند ، وقتی از آن در انتهای یک جمله و یا هر شئ دیگیری در HTML استفاده می کنیم ، تمام نوشته ها و تصاویر و … بعد از این تگ یک سطر پایین تر قرار می گیرند.لازم هست به این نکته مهم اشاره کنم که این تگ نیاز به بسته شدن ندارد و یکی از آن استثنایی هست که در جلسه اول به ان اشاره کردم [ <br> مخفف Line Break است ] (به مثال توجه کنید)

کد بدون تگ <br> :

تم دیزاینر : مرجع خدمات وبمستر برای پارسی زبانان

نتیجه کد بالا :

کد همراه با تگ <br> :

تم دیزاینر : <br>
مرجع <br>
خدمات وبمستر برای پارسی زبانان <br>

نتیجه کد بالا :

<p> : [ نیاز به بسته شدن دارد ] با این تگ می توانید یک پاراگراف ایجاد کنید.این تگ با فاصله ای که بین پاراگراف و دیگر اجزا صفحه ایجاد می کند ، باعث زیبایی هر چه بیشتر وب سایت خواهد شد برای اثبات این موضوع کافی هست به مثال ها دقت کنید.  [ <p> مخفف paragraph است ] (به مثال توجه کنید)

کد بدون تگ <p> :

تم دیزاینر به ارئه خدمات رایگـــــــان و اختصاصی طراحی وب سایت و وبلاگ می پردازد.شما می توانید از قالب های رایــــگان ما استفاده کنید و یا این که ســـوالات خود را از بخش نظرات بپرسید و یــــــا از ابزار وب مستر ما استفاده کنید. پس منتظر چه هستید .تم دیزاینر به ارئه خدمات رایگـــــــان و اختصاصی طراحی وب سایت و وبلاگ می پردازد.شما می توانید از قالب های رایــــگان ما استفاده کنید و یا این که ســـوالات خود را از بخش نظرات بپرسید و یــــــا از ابزار وب مستر ما استفاده کنید. پس منتظر چه هستید

نتیجه کد بالا :

کد همراه با تگ <p> :

<p>
تم دیزاینر به ارئه خدمات رایگـــــــان و اختصاصی طراحی وب سایت و وبلاگ می پردازد.شما می توانید از قالب های رایــــگان ما استفاده کنید و یا این که ســـوالات خود را از بخش نظرات بپرسید و یــــــا از ابزار وب مستر ما استفاده کنید. پس منتظر چه هستید
</p>
<p>
تم دیزاینر به ارئه خدمات رایگـــــــان و اختصاصی طراحی وب سایت و وبلاگ می پردازد.شما می توانید از قالب های رایــــگان ما استفاده کنید و یا این که ســـوالات خود را از بخش نظرات بپرسید و یــــــا از ابزار وب مستر ما استفاده کنید. پس منتظر چه هستید
</p>

نتیجه کد بالا :

<b> : [ نیاز به بسته شدن دارد ] باعث ضخیم شدن متن خواهد شد. [ <b> مخفف bold است ] (به مثال توجه کنید)

<b>تم دیزاینر : مرجع خدمات وبمستر برای پارسی زبانان</b>

نتیجه کد بالا :

<I> : [ نیاز به بسته شدن دارد ] باعث کج شدن حروف می شود. [ <i> مخفف Italic است ] (به مثال توجه کنید)

<i>تم دیزاینر : مرجع خدمات وبمستر برای پارسی زبانان</i>

نتیجه کد بالا :

<u> : [ نیاز به بسته شدن دارد ] یک خط زیر متن ایجاد می کند. [ <u> مخفف Underline است ] (به مثال توجه کنید)

<u>تم دیزاینر : مرجع خدمات وبمستر برای پارسی زبانان</u>

نتیجه کد بالا :

<strike> : [ نیاز به بسته شدن دارد ] روی متن یک خط میکشد. (به مثال توجه کنید)

<strike>تم دیزاینر : مرجع خدمات وبمستر برای پارسی زبانان</strike>

نتیجه کد بالا :

<mark> : [ نیاز به بسته شدن دارد ] متن را هایلایت می کند. [ <mark> مخفف marked/highlighted است ] (به مثال توجه کنید)

تم دیزاینر : مرجع خدمات <mark> وبمستر </mark> برای پارسی زبانان

نتیجه کد بالا :

<small> : [ نیاز به بسته شدن دارد ] متن را نسبت به متن های مشابه کوچک تر می کند. (به مثال توجه کنید)

تم دیزاینر : مرجع خدمات وبمستر برای پارسی زبانان<br>
<small>تم دیزاینر : مرجع خدمات وبمستر برای پارسی زبانان</small>

نتیجه کد بالا :

<sub> و <sup> : [ نیاز به بسته شدن دارد ] یک کلمه از جمله را به صورت زیرنویس می نویسد ، برای فهم بهتر به مثال دقت کنید. [ <sub> مخفف subscripted است ] [ <sup> مخفف superscripted است ] (به مثال توجه کنید)

تم دیزاینر : مرجع خدمات <sub> وبمستر </sub> برای پارسی زبانان
<br>
تم دیزاینر : مرجع خدمات <sup> وبمستر </sup> برای پارسی زبانان

نتیجه کد بالا :

پایان جلسه سوم :

سعی کردم تمام موارد کامل و جامع توضیح بدم ، در این جلسه با ۱۰ تگ جدید آشنا شدید ، این موارد رو تمرین کنید و خودتون رو برای جلسه بعد آماده کنید در جلسه بعد با تگ های بیشتری در مورد اصول کار و تنظیم متن و کلمات آشنا خواهید شد.