خانه / آموزش HTML / بخش چهل و یکم-راهنمای استایل HTML5
پشتیبان وب سایت وردپرس
"

تاریخ بروزرسانی: ۱۹ آذر ۱۳۹۷ تعداد بازدید : 9 بازدید بدون دیدگاه

بخش چهل و یکم-راهنمای استایل HTML5

قدم قبلی >< قدم بعدی

راهنمای استایل HTML5

در این آموزش html  به راهنمای استایل HTML5 می پردازیم.

کنوانسیون های کد گذاری HTML

توسعه دهندگان وب اغلب در مورد سبک و نحو کد گذاری برای استفاده در HTML نامشخص هستند.

بین سال های ۲۰۰۰ تا ۲۰۱۰، بسیاری از توسعه دهندگان وب از HTML به XHTML تبدیل شده اند.

با XHTML، توسعه دهندگان مجبور شدند کد معتبر و “به خوبی شکل گرفته” نوشته شوند.

HTML5 کمی بیشتر غلط است وقتی که آن را به کد اعتبار سنجی می آید.

هوشمند بودن و اثبات آینده

استفاده مداوم از سبک دیگران را در درک HTML شما آسان تر می کند.

در آینده برنامه هایی مانند خوانندگان XML ممکن است بخواهند HTML شما را بخوانند.

با استفاده از نحوه به اصطلاح “نزدیک به XHTML” می تواند هوشمند باشد.

همیشه کد خود را مرتب، تمیز و خوب تشکیل دهید.

استفاده از نوع سند صحیح

همیشه نوع سند را به عنوان خط اول در سند خود تایپ کنید:

اگر شما نیاز به تطابق با برچسب های کوچک تر دارید، می توانید از موارد زیر استفاده کنید:

از نامهای عناصر مورد پایین استفاده کنید

HTML5 اجازه می دهد که حروف بزرگ و کوچک در نام عناصر مخلوط شوند.

توصیه می کنیم با استفاده از نام عناصر کوچک به دلیل:

  • مخلوط کردن نام های بزرگ و کوچک بد است
  • توسعه دهندگان معمولا از نام های کوچک (از جمله XHTML استفاده می کنند)
  • پایین تر نگاه پاک کن
  • نوشتن کوچکتر ساده تر است
تمام عناصر HTML را ببندید

در HTML5، لازم نیست تمام عناصر را ببندید (مثلا عنصر <p>).

ما توصیه می کنیم بسته تمام عناصر HTML.

عناصر HTML خالی را ببندید

در HTML5، برای اضافه کردن عناصر خالی گزینه اختیاری است.

با این حال، اسلش بسته (/) در XHTML و XML مورد نیاز است.

اگر شما از نرم افزار XML برای دسترسی به صفحه خود استفاده کنید، ایده خوبی است که به حفظ اسلش بسته بروید!

ارزشهای علامت نقل قول

HTML5 اجازه می دهد که مقادیر مقادیر بدون نقل قول.

توصیه می کنیم نقل قول های مربوط به ویژگی ها را به خاطر داشته باشید:

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

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

فضاها و نشانه های برابر

HTML5 به فضاهای اطراف نشانه های برابر اجازه می دهد. اما فضای کمتری برای خواندن و خواندن گروهها بهتر است.

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

هنگام استفاده از یک ویرایشگر HTML، ناچیز است که به راست و چپ بروید تا کد HTML را بخوانید.

سعی کنید از خطوط کد بیش از ۸۰ کاراکتر جلوگیری کنید.

خطوط خالی و ردیف

خطوط خالی را بدون هیچ دلیلی اضافه نکنید.

برای خواندن، خطوط خالی را برای جدا کردن بلوک های کد بزرگ یا منطقی اضافه کنید.

برای خواندن، اضافه کردن دو فضای دندانه دار. از کلید تب استفاده نکنید

از خطوط خالی خالی و دندانه استفاده نکنید. لازم نیست که هر عنصر را کنار بگذاریم:

حذف <html> و <body>؟

در HTML5، برچسب <html> و برچسب <body> می توانند حذف شوند.

کد زیر به عنوان HTML5 معتبر خواهد شد:

با این حال، توصیه نمیکنیم تگ <html> و <body> را حذف کنیم.

عنصر <html> ریشه سند است. این مکان توصیه شده برای مشخص کردن زبان صفحه است:

اعلام زبان برای برنامه های دسترسی (خوانندگان صفحه نمایش) و موتورهای جستجو اهمیت دارد.

حذف <html> یا <body> می تواند نرمافزار DOM و XML را خراب کند.

حذف <body> می تواند خطاهای در مرورگرهای قدیمی (IE9) ایجاد کند.

خروج <head>

در HTML5، برچسب <head> نیز حذف می شود.

به طور پیش فرض، مرورگر تمام عناصر را قبل از <body> به عنصر <head> پیش فرض اضافه می کند.

شما می توانید پیچیدگی HTML را با حذف برچسب <head> کاهش دهید:

با این حال، توصیه نمیکنیم برچسب <head> را حذف کنیم.

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

متا داده

عنصر <title> در HTML5 مورد نیاز است. عنوان را به عنوان معنی دار بودن عنوان کنید:

برای اطمینان از تفسیر مناسب و درست کردن فهرست موتور جستجو، هر دو زبان و رمزگذاری کاراکتر باید در اسناد در اسرع وقت تعریف شوند:

تنظیم Viewport

HTML5 یک روش برای اجازه دادن به طراحان وب از طریق نمایشگر <meta> را بر روی نمایشگر معرفی کرد.

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

شما باید عنصر <viewport > زیر را در تمام صفحات وب خود وارد کنید:

عنصر <viewport> دستورالعمل های مرورگر را در مورد نحوه کنترل ابعاد صفحه و مقیاس بندی ارائه می دهد.

بخش width = device-width عرض صفحه را تعیین می کند تا به عرض صفحه نمایش دستگاه (که بسته به دستگاه متفاوت است) را دنبال کند.

مقیاس مقیاس اولیه = ۱٫۰ مقدار اولیه زوم را تنظیم می کند زمانی که صفحه اول بارگذاری شده توسط مرورگر باشد.

در اینجا یک مثال از یک صفحه وب بدون meta tag viewport و یک صفحه وب با meta tag viewport است.

نکته: اگر شما در حال مشاهده این صفحه با یک تلفن یا رایانه لوحی هستید، می توانید روی دو لینک زیر کلیک کنید تا تفاوت را مشاهده کنید.

نظرات HTML

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

نظراتی که بیش از یک خط را شامل می شود، باید به صورت زیر نوشته شود:

نظرات بسیار طولانی تر است اگر دو فضایی را از هم جدا کنند.

ورق های استایل

از نحو ساده برای لینک دادن به صفحات سبک استفاده کنید (ویژگی نوع لازم نیست):

قوانین کوتاه میتوانند فشرده شوند مانند این:

قوانین طولانی باید بر روی چند خط نوشته شوند:

  • برگه باز کردن را در همان خط به عنوان انتخابگر قرار دهید
  • قبل از باز کردن براکت از یک فضای استفاده کنید
  • از دو فضای دندانه استفاده کنید
  • بعد از هر جفت ارزش دارایی، از جمله آخر، از semicolon استفاده کنید
  • اگر مقدار شامل فضاها باشد، نقل قول ها در اطراف مقادیر استفاده می شود
  • محدوده بستن را در یک خط جدید قرار دهید، بدون فضای پیشنهادی
  • اجتناب از خطوط بیش از ۸۰ کاراکتر

بارگیری جاوا اسکریپت در HTML

استفاده از دستورالعمل ساده برای بارگیری اسکریپت های خارجی (ویژگی نوع لازم نیست):

دسترسی به عناصر HTML با جاوا اسکریپت

یک نتیجه از استفاده از سبک های HTML غیرمتعارف می تواند خطاهای جاوا اسکریپت باشد.

این دو عبارت جاوا اسکریپت نتایج مختلفی تولید خواهند کرد:

افزونه های فایل

فایل های HTML باید یک پسوند .html یا .htm داشته باشند.

فایل های CSS باید یک پسوند css داشته باشند.

فایل های جاوا اسکریپت باید دارای پسوند .js باشد.

تفاوت بین .htm و .html

هیچ تفاوتی میان افزونه های .htm و .html وجود ندارد. هر دو به عنوان HTML توسط هر مرورگر وب یا سرور وب مورد استفاده قرار می گیرند.

تفاوت ها فرهنگی هستند:

.htm “بوی” سیستم های DOS اولیه است که در آن سیستم برنامه های افزودنی را به ۳ کاراکتر محدود می کند.

.html “بوی” سیستم عامل های یونیکس است که این محدودیت را نداشتند.

تفاوت های فنی

هنگامی که یک URL نام فایل را مشخص نمی کند سرور یک نام پرونده پیش فرض را باز می کند. نام پرونده های معمول پیش فرض index.html، index.htm، default.html و default.htm است.

اگر سرور شما فقط با نام index.html به عنوان پیشفرض نام فایل پیکربندی شود، فایل شما باید به نام index.html باشد، نه «index.htm.»

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

به هر حال، فرمت کامل فایلهای HTML، .html است و هیچ دلیلی برای استفاده از آن وجود ندارد.

 

گام قبلی >< گام بعدی

لینک کوتاه این مطلب: https://tiktheme.com/?p=12073


کانال تلگرام تیک تم

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *