طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش HTML – بخش هجدهم

آموزش html

قسمت هفدهم از آموزش HTML  به قواعد و قوانین کد نویسی در زبان HTML اختصاص داده ایم. این قواعد با هدف نگارش کدها و دستورات به بهترین شکل ممکن تهیه گردیده اند که هر توسعه دهنده وب از این قواعد جهت خوانایی کدها برای خود و دیگر توسعه دهندگان استفاده می کند. همچنین به دلیل محبوبیت XHTML تا می توانید باید کدها را شبیه به XHTML بنویسید چرا که ممکن است روزی مجبور باشید کدهایتان را به این زبان تغییر دهید.

حال ببنیم که چه قواعدی را هنگام کد نویسی باید رعایت کنیم:

درست نویسی عبارت Document Type

در زبان HTML5 عبارت doctype را همیشه در خط اول و به صورت زیر می نویسیم:

توجه کنید که برای نوشتن doctype حتما از حروف بزرگ استفاده کنید.

نام المان ها را با حروف کوچک ( Lowercase ) بنویسید

نکته دیگری که باید در نظر گرفت این است که نام المان ها حتما با حروف کوچک نوشته شوند. در زبان HTML5 می توانید به تگ آغاز را با حرف بزرگ و تگ پایان را با حرف کوچک بنویسید و یا فقط حروف اول نام تگ ها را با حرف بزرگ بنویسید ( مثلا Article به جای article ) که در نمایش المان ها در سند مشکلی به وجود نمی آید؛ اما بهتر است همیشه از حروف کوچک استفاده کنید. از دلایل این کار می توان به این موارد اشاره کرد که: نوشتن نام ها با حرف کوچک واضح تر و ساده تر است و با این کار بازرسی و بررسی کدها و دستورات راحت تر صورت می پذیرد.

تمام تگ ها را ببندید

در HTML5 می توانید برخی تگ ها مانند تگ p را نبندید؛ اما بهتر است که این از این شیوه استفاده نکنید و حتما همه تگ ها را ببندید ( تگ پایان را هم بنویسید ). همچنین بهتر است که تگ های تهی را نیز ببندید. به عنوان مثال می توانید تگ متا را اینگونه بنویسید:

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

برای نوشتن خصیصه ها حتما از حروف کوچک استفاده کنید

در HTML5 بهتر است که همیشه برای نوشتن خصیصه ها و مقادیر آنها نیز از حروف کوچک استفاده کنید. یک خصیصه را می توان به صورت زیر نوشت:

اما بهترین شیوه نگارش به صورت زیر است:

مقادیر خصیصه ها را در علامت نقل قول بنویسید

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

خصیصه های تگ <img> را حتما بنویسید

خصیصه های width و alt و height را به هیچ عنوان فراموش نکنید. مرورگرها بر اساس خصیصه های طول وعرض برای عکس ها مکانی را رزرو می کنند که اگر این مقادیر تعیین نشوند ممکن است در نمایش متن ها و دیگر اجزا اشکالاتی به وجود آید.

استفاده از فاصله و علامت تساوی

بهتر است که هنگام سبک دهی به روش درون خطی، بین خصیصه و مقدار آن و علامت تساوی، فاصله قرار ندهید ( هر چند که فاصله مشکلی را به وجود نخواهد آورد ):

از قرار دادن کدهای طولانی در یک خط بپرهیزید

در یک خط، بیشتر از 80 کاراکتر ننویسید تا در ویرایشگر ها مجبور به جابجا کردن صفحه به سمت چپ و راست نشوید.

اجتناب از خطوط خالی

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

متا دیتا

اطلاعات رمز نگاری ( charset ) و <title>  برای ایندکس شدن هستند. عنوان صفحه را همیشه معنا دار انتخاب کنید و محتوایی که قرار است در صفحه قرار دهید مرتبط باشد؛ از این طریق ایندکس صفحه راحت تر صورت می گیرد.

در HTML5 رمز نگاری به صورت پیش فرض UTF-8 است.

تنظیمات viewport

یکی از متا تگ هایی که باید حتما در نظر گرفته شود، تنظیمات viewport است که با تگ متا انجام می شود. viewport نمایی از صفحه وب است که در مرورگر به کاربر نمایش داده می شود که با نوع دستگاه کاربر متغیر است. viewport در صفحه نمایش کوچک مثل موبایل، کوچک و در صفحه نمایش کامپیوتر بزرگتر است. اگر همین صفحه ای که در حال مطالعه آن هستید را یک بار با موبایل و یک بار با کامپیوتر یا تبلت مشاهده کنید ( اگر از کامپیوتر استفاده می کنید می توانید اندازه مرورگر را تغییر دهید )، خواهید دید که میزان متنی که در هر دستگاه نمایش داده می شود، متفاوت است. این نحوه نمایش را با viewport تنظیم می کنیم. تنظیمات به صورت زیر است:

این متا دیتا به مرورگرها کمک می کند که یک صفحه وب و متن های درون آن را متناسب با نوع دستگاه نمایش دهد. اما چگونه؟

width=device-width به مرورگر می گوید که طول و عرض دستگاه کاربر را ارزیابی کن و متناسب با اندازه مرورگر، محتوای صفحه وب را نمایش بده

initial-scale=1.0 تنظیمات بزرگنمایی را انجام می دهد و مقدار بزرگنمایی را در لود اول صفحه تعیین می کند.

نوشتن توضیحات ( comments )

می دانید که شیوه نوشتن توضیحات به صورت زیر است:

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

سبک دهی به عناصر

اگر CSS ها را در یک فایل جدا نوشته اید ( روش خارجی ) برای اتصال فایل style از تگ link به صورت زیر استفاده کنید.

برای این تگ میتوان خصیصه type را هم به کار برد که بهتر است از این خصیصه استفاده نشود.

نکته دیگری که باید در نظر بگیرید این است که اگر دستورات سبک دهی کوتاه باشند، می توانید آنها را فشرده و در یک خط بنویسید:

اما برای نوشتن CSS های طولانی به این نکات دقت کنید:

  • استفاده از کروشه آغاز و پایان که کروشه آغاز در همان خطی که انتخاب کننده را نوشته اید نوشته می شود و کروشه پایان بعدی از سبک ها نوشته می شود.
  • بین انتخاب کننده و کروشه آغازی یک فاصله قرار دهید.
  • پس از نوشتن انتخاب کننده و کروشه، سبک دهی را از خط بعدی آغاز کنید.
  • بعد از هر ویژگی و مقدار آن، از نقطه ویرگول ( semicolon ) قرار دهید.
  • مقادیر چند قسمتی هر ویژگی را درون علامت نقل قول بنویسید.
  • بیشتر از 80 کاراکتر در هر خط ننویسید.

کدهای جاوا اسکریپت

تگ های اسکریپت را تا می توانید ساده بنویسید و از خصیصه type استفاده نکنید.

جاوا اسکریپت به بزرگ و کوچک بودن حروف حساس است. به مثال زیر توجه کنید:

در این مثال شناسه demo با Demo تفاوت دارد. برای انتخاب المان های HTML باید توجه کنید که جاوا اسکریپت به کوچک و بزرگ بودن حروف حساس است.

نام گذاری فایل ها

برای نام گذاری پوشه هایی عکس ها و دیگر فایل ها ( css ها، اسکریپت ها و …) را در آنها قرار می دهید، از حروف کوچک استفاده کنید. بعضی از سرور ها نسبت به بزرگ و یا کوچک بودن حروف حساس هستند و ممکن است بخواهید سرور خود را تغییر دهید که در اینصورت وب سایت به درستی نمایش داده نمی شود.

همچنین به پسوندهای فایل ها دقت کنید. برای فایل های جاوا اسکریپت پسوند .js و برای فایل های HTML پسوند .html و یا htm و برای فایل های CSS پسوند .css قرار دهید.

در اینجا ممکن است برایتان سوالی پیش آمده باشد که تفاوت بین .html و .htm چیست؟

بین این دو پسوند هیچ تفاوتی وجود ندارد و مرورگر ها و سرور ها فایل هایی با این پسوندها را به عنوان یک سند HTML شناسایی می کنند. .htm در گذشته و زمانی که سیستم عامل DOS رواج داشت، استفاده می شد چرا که کاربران مجبور بودند که از پسوند های 3 حرفی استفاده کنند.

در جلسات قبل با قسمت های مختلف یک URL کامل آشنا شدیم و همانطور که می دانید یک آدرس URL ممکن است به یک فایل در سرور ارجاء داده شود. اگر در انتهای URL اسم فایلی نوشته نشود، سرور کاربر را به صفحه ای که از پیش برای آن تعریف کرده یم منتقل می کند. این صفحه از پیش تعیین شده index.html یا index.htm نام دارد.

بسته به تنظیمات سرور می توانید نامی را بجای index بنویسید. اگر سرور بر روی index.html از قبل تنظیم شده است، باید از index.html استفاده کنید. اما بعضی از سرور ها هستند که قابلیت تنظیم چند صفحه به عنوان پیش فرض را دارند که اگر از این دست سرور ها استفاده می کنید، می توانید از هر نامی برای فایل اصلی ( صفحه اصلی سایت ) استفاده کنید.

امیدواریم که مطالب ارائه شده رضایت شما همراهان گرامی را جلب کرده باشد. در جلسه بعدی که آخرین بخش از آموزش HTML خواهد بود، مبحث مهم چند رسانه ای را بررسی خواهیم کرد. نظرات و دیدگاه های شما دوستان مشوق ما در ارائه بهتر و مفیدتر مطالب خواهد بود.

نوشته های مرتبط