جلسه سوم : اصول کار و تنظیم متن و کلمات در 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> برای پارسی زبانان

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

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

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

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

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

موفق باشید یا حق / علی بهنام فر


نظرات و دیگر موارد
اگر این قالب را دوست دارید امتیاز دهید :
۱۱۴ دیدگاه نوشته شده است! می توانید دیدگاه خود را بنویسید

  1. سلام من تازه با سایتتون اشنا شدم خیلی عالیه

  2. mishe berooz konin matlabetoono
    be web manam sar bezaanin

  3. سلام ببخشید میشه گذاشتن لینک روی یک کلمه رو هم آموزش بدید

  4. سلام دوست عزیز خیلی چیزها یاد گرفتم فقط می خواستم که بگم که کد تبلیغاتی چطوری بنویسم.

  5. سلام
    می خواستم ببینم شما که یه طراح حرفه ای هستی و مطالب آموزشیت رو هم خوب می نویسی پ چرا دیگه ادامه ندادی ؟!!!
    بابا این کتابا خیلی کمبود دارن
    خواهش می کنم مطالب html رو ادامه بده

  6. سلام
    تابستون هم وقت فراغت ما و هم شماست
    لطفا جلسه ی چهارم رو بذارید دیگه

  7. مرسی مشتاقانه منتظر جلسه ی بعدی هسم

  8. می دونید چند وقته آموزش رو بروز نکردید؟لطفا زود باشید

  9. شما که برنامه نویسی بلدید چرا از سیستم مدیریت محتوا ( ورد پرس ) استفاده می کنید ؟
    اون نرم افزاری که برای نوشتن تگ های اچ تی ام ال استفاده می کنید کنارش شماره گذاری شده . از چه نرم افزاری استفاده می کنید ؟

  10. سلام اقای بهنام فر
    همون طور که خودتون می دونید اچ تی ام ال خیلی گسترده است
    اگر شما حتی هفته ای یک بار هم بروز کنید حد اقل یک سال طول می کشه که فقط اچ تی ام ال تموم شه . حالا زبان های دیگه بماند !
    لطفا حد اقل ماهی یک بار بروز کنید خواهش می کنم !
    من ده ماهه که هر روز می ام تو وبسایت اما می بینم هنوز بروز نشده
    لطفا هر چه زود تر بروزش کنید
    فکر هم نمی کنم وقت گیر باشه . نهایتا یکی دو ساعت وقتتون رو بگیره ( زکات علم نشر آن است )
    با تشکر

  11. سلام من همه ی مطالبی رو که درمورد html نوشته بودید رو مطالعه کردم ….
    واقعا باید به مطالب شما نمره ی ۲۰ داد خیلی مختصر و مفید بود خواهشا هر چه زود تر تمام مطالب در مورد html رو در سایتتون قرار بدین من دوباره برای دیدن ادامه ی این بحث سر میزنم !!!!
    موفق باشید.

  12. salam khedmate agha ali behnamfar .ba tashakore faravan az shoma.lotfan amuzeshe HTMl ra edame dahid.merC

  13. سلام
    امیدوارم موفق باشید
    منتظر جلسه ی بعدی هستیم ممنون

  14. سلام
    من در حال ویرایش یه کد قالب هستم .
    چند تا سوال داشتم
    یکی اینکه چطور میشه کد قالب رز بلاگ رو به بلاگفا تبدیل کرد ؟
    و اینکه چطور میشه پرچم بالای این وبلاگ mahdave.rozblog.com رو به بالای گنبدش برد ؟ اگه به وب سر بزنید متوجه میشوید .
    ممنون اگر راهنمایی کنید . یا علی…

  15. عالی بود فقط لطفا زود به زود بروزش کنید. در ضمن لطفا یاد بدین چه جوری متن رو وسط بیاریم. ممنون

  16. سلام
    کی بخش بعدی رو میزنید؟

  17. آغا این جلسه جدید چی شد؟

  18. سلام. من مدتی بود به برنامه نویسی علاقه شدیدی پیدا کرده بودم ولی سایت آموزشی خوبی پیدا نکرم. تا اتفاقی سایت شما رو دیدم. سایتتون وتوضیحاتتون فوق العاده است. ممنون. تورو خدا جلسه بعدی رو منتشر کنید. منتظرم