illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید تا کنون 6336 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

Code Guide یا راهنمای کدنویسی HTML و CSS (جلسه 2) : Syntax و HTML5 doctype و lang

4 192 ۲۷ آبان ۹۵

در این مطلب با ادامه راهنمای کدنویسی HTML و CSS در خدمتتون هستم.code guide

در جلسه قبل مقدمه ای در مورد دوره ارائه دادیم و مواردی که در آینده گفته خواهند شد رو بیان کردیم.

موارد مربوط به HTML

Syntax یا قواعد کدنویسی

کدهاتون رو با استفاده از 2 تا Space یا فضای خالی، تورفتگی یا Indentation بدین و کاری کنید که در همه محیطها و ادیتورها به یک صورت نمایش داده شود. کد زیر رو در نظر بگیرید:

همونطور که میبینید، هر خط نسبت به پدر خود، دو Space تورفتگی داره. از Soft Tab بجای Hard Tab استفاده کنید. میتونید تفاوت Soft Tab و Hard Tab رو در اینجا مطالعه کنید.

همیشه سعی کنید برای قرار دادن مقدار ویژگی ها از " یا Double Quote استفاده کنید و هیچوقت از ' یا Single Quote استفاده نکنید. همونطور که در کد بالا میبینید، از این قاعده استفاده کردیم. بطور مثال برای المنت h1 کلاس hello-world رو درون " قرار دادیم.

در انتهای تگهایی که فرزندی ندارن / رو قرار ندین. مطابق با HTML5 Spec این / یا slash که قرار داده میشه، هیچ اثری نداره و اختیاری هست. پس بهتره که / رو قرار ندیم. مثلا کد زیر رو در نظر بگیرید:

همونطور که میبینید تگ link هیچ فرزندی نداره. پس / انتهای اون بی اثر هست و بهتره که اون رو برداریم. بصورت زیر:

نکته بعدی اینه که بعضی از تگها، Closing Tag یا تگ بسته شونده اختیاری رو دارن و اگر اونا رو هم قرار ندیم، مشکل خاصی بوجود نمیاد. </li> یا </body> از این موارد هستن. ولی پیشنهاد شده که همیشه این موارد رو قرار بدین و هیچوقت اونا رو از قلم نندازید.

در مورد HTML5 doctype

کد زیر رو در نظر بگیرید:

همونطور که میدونید و حتما خیلی از جاها دیدید، اولین خط هر صفحه ای DOCTYPE html قرار میگیره. قرار دادن این خط کد در اول هر صفحه ای باعث میشه که حالت استاندارد و render شدن بهتر در همه مرورگرها رو ممکن میسازه. پس همیشه و حتما این قطعه کد رو در ابتدای کدهاتون رو قرار بدین.

Language attribute یا ویژگی مربوط به زبان

نقل قول HTML5 Spec زیر رو در نظر بگیرید:

نویسنده ها رو تشویق میکنیم که ویژگی lang رو برای ریشه ای ترین تگ یا همون html قرار بدن و با استفاده از اون زبان سند یا صفحه رو مشخص کنند. این مورد به ابزارهای صوتی و Screen Reader ها کمک میکنه که این سند چه زبانی داره و از چه تلفظی بهره میبره. همچنین ابزارهای ترجمه هم متوجه میشن که با چه زبانی سروکار دارن و بهتر اونو ترجمه میکنن.

میتونین در اینجا بیشتر در مورد ویژگی lang مطالعه بفرمایید.

همچنین میتونین در اینجا لیست همه زبانهایی که میتونین درون ویژگی lang استفاده کنید و قرار بدین رو مشاهده کنید. بعنوان مثال برای زبان فارسی یا persian باید از fa استفاده کنید.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    Mehdi Soli(۵ آذر ۱۳۹۵)

    سلام، خیلی هم عالی از مقاله زیبا و کاربردی شما. دو تا سوال داشتم، اول اینکه در سایت stackoverflow که بهش اشاره داشتید، در انتها اشاره شده که استفاده از hard یا softspace بستگی به تجربه شخصی شما داره، به عنوان مثال در خیلی از زبان های برنامه نویسی تحت سرور مثل پایتون، به شدت توصیه میشه که از تب به جای space استفاده بشه چون مفسر اون رو دچار اشکال می کنه. خواستم نتیجه گیری کنم که این امر کلی نیست و حتی بسته به زبان برنامه نویسی ای داره که سمت سرور دارید ازش استفاده می کنید (البته اگه بخواهید صفحه محتوی html و css خودتون رو به سرور بفرستید و یا دریافت کنید). خواستم نظر شما رو در این مورد بدونم. سوال دوم اینکه اشاره کردید بهتره از lang در تگ html استفاده کنیم. لینکی رو که گذاشته بودید رو خوندم اما متوجه نشدم چرا، چرا استفاده در تگ بهتر از استفاده در ابتدای head صفحه است. ممنون میشم اگر راهنمایی بفرمایید. بازم بسیار ممنون بابت مقالات بسیار خوب و کاربردی که قرار می دید. من همه مقالات شما رو با لذت دنبال می کنم. ممنون از تلاش و لطف شما

    • ‏‏
      محمد اسفندیاری(۵ آذر ۱۳۹۵)

      در مورد سوال اولتون باید بگم که بیشتر اینکارو برای نظم کدها انجام میدیم و اینکه خوانایی کدها بالاتر بره و بفهمیم که چه کدهایی Nested هستن. صحبتهای شما هم درسته. بهتون پیشنهاد میکنم که بر روی ادیتورهایی که دارید، پلاگین editorconfig رو نصب کنید و اونو تنظیم کنید که tab و … رو چقدر قرار بده. در مورد editorconfig اینجا بیشتر میتونین مطالعه کنید.
      سوال دومتون رو متوجه نشدم

  • ‏‏
    Mehdi Soli(۵ آذر ۱۳۹۵)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram