۹ اشتباه که در هنگام ساختن یک صفحه وب نباید مرتکب شوید
1397/12/25 15:04 , میلاد صاحب نظر

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

ایجاد یک صفحه وب با HTML و CSS خیلی ساده و راحت است. اما اشتباه کردن در آن‌ها خیلی آسان است و شاید چند نکته وجود داشته باشند که فکر آن‌ها را نکرده باشید. اکثر مواقع، این اشتباهات کوچک زیادی تفاوتی در نتیجه نهایی ایجاد نمی‌کنند.

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

  1. سبک بندی درون خطوط کد

یکی از نکات عالی در مورد HTML و CSS این است که می‌توانید هر خط از متن را در هر موقع که می‌خواهید فرمت بندی کنید(واقعا تک‌تک کلمات را می‌توانید فرمت بندی کنید). اما این بدان معنا نیست که باید از این قابلیت سوءاستفاده کنید.

در زیر مثالی از سبک بندی درون خطوط کد را مشاهده می‌کنید که می‌توانید از آن برای بزرگ‌تر کردن یک پاراگراف نسبت به پاراگراف‌های اطراف و هایلایت کردن آن به یک رنگ متفاوت استفاده کنید:

 

این دستور به پاراگراف یک حالت CSS می‌دهد که همراه با انتهای پاراگراف، پایان می‌یابد. به نظر خیلی کارآمد است مگه نه؟

البته یک مشکل بزرگ وجود دارد: اگر بخواهید کدهای زیادی در وبسایت خود تغییر دهید، باید تک‌تک نمونه کدهای سبک بندی شده را بیابید و تغییر دهید. اگر ۱۰۰ پاراگراف مختلف دارید که سایز متن ۱۲۰٪ و رنگ آبی دارند، باید همه ۱۰۰ پاراگراف را بیابید و آن‌ها را به هر فرمتی که تصمیم گرفته‌اید بهتر است، تغییر دهید.

در عوض، می‌توانید از یک استایل شیت یا لیست مشخصات CSS استفاده کنید. سبک یا استایلی که برای پاراگراف بالا استفاده کردید این است:

 

 

 

حالا، به جای استفاده از استایل کد بندی درون خط، می‌توانید به سادگی از این کد استفاده کنید:

 

و پاراگراف شما بزرگ و آبی می‌شود. و وقتی تغییری در کلاس “important” در CSS خود ایجاد می‌کنید، همه چیز تغییر خواهد کرد.

  1. جداول برای Layout

قبلا برای فرمت دادن به صفحه layout، افراد از جداول استفاده می‌کردند. با استفاده از یک جدول، می‌توانید عناصر موجود در صفحه خود را درون ستون‌ها و ردیف‌ها سازماندهی کنید.

همچنین می‌توانید صف‌بندی‌ها و استایل‌های مختلفی اعمال کنید. حتی جداول تک سلولی هم برای درست مرتب و صف‌بندی کردن محتوا مورد استفاده قرار می‌گیرند.

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

درست همانند استایل‌های درون خطی، می‌توانید به جای جداول HTML از CSS برای layout استفاده کنید چون رسیدگی به CSS خیلی آسان‌تر از HTML است.

دوباره می‌گویم، اگر می‌خواهید در صدها و هزاران صفحه تغییر ایجاد کنید، ویرایش استایل شیت خیلی آسان‌تر از طی کردن تمام خطوط کد و جداول صفحات وبسایت است.

علاوه بر رسیدگی آسان‌تر، خواندن layoutهای CSS نیز خیلی آسان‌تر از خواندن جداول HTML است. مخصوصا اگر از جداول تو در توی زیادی در کد خود استفاده کرده باشید.

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

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

  1. HTML منسوخ شده

HTML نیز مانند هر زبانی مرتب در حال تغییر و تحول است. تگ‌های شناخته شده رسمی تغییر می‌کنند و برخی منسوخ می‌شوند. <strong> و <em>(مخفف emphasis) اکنون تگ‌های استاندارد هستند. <center>، <align>، <color>، <size> و برخی تگ‌های دیگر نیز منسوخ شده‌اند.

اکثر تگ‌های منسوخ شده با CSS جایگزین شدند، بنابراین برای دستیابی به تاثیرات آن‌ها باید از استایل‌ها (ترجیحا نه استایل‌های درون خطی) استفاده کنید.

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

  1. جاوا اسکریپت درون خطی

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

به طور خلاصه، می‌تواند با ایجاد رفتار، صفحه را مفیدتر کرده و تعامل با کاربر را افزایش دهد.

درست مانند CSS، می‌توانید در کد HTML خود درون خطوط کدها با زبان جاوا اسکریپت کد بزنید. همچنین همانند CSS، اصلا این کار پیشنهاد نمی‌شود.

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

استفاده از جاوا اسکریپت درون خطوط کدها از پهنای باند خیلی بیشتری نسبت به یک اسکریپت لینک شده از یک فایل متفاوت استفاده می‌کند. فرآیندی به نام minification(کوچک‌سازی)کدهای HTML و CSS پیش از اینکه به سمت کاربر ارسال شوند، فشرده می‌شوند.

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

همچنین این فایل دیگر قابل کش(cache) شدن نیز نخواهد بود، در حالی که یک فایل جاوا اسکریپت مجزا می‌تواند کش شود.

همه این موارد، باعث می‌شوند که استفاده از جاوا اسکریپت، استفاده از پهنای باند را افزایش دهد.

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

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

  1. چندین تگ H1

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

اما اینکه ۶ سطح مختلف برای هدینگ‌ها تدارک دیده شده است دلیل خوبی دارد. واقعا فقط باید یک تگ H1 در صفحه شما وجود داشته باشد که این تگ معمولا به عنوان صفحه تعلق می‌گیرد(مخصوصا در سایت‌های وبلاگی و مشابه).

ممکن است تصور کنید که اگر چند کلیدواژه در تگ‌های H1 خود قرار دهید، گوگل آن‌ها را انتخاب می‌کند و رتبه سایت شما را در نتایج جستجو افزایش می‌دهد.

سطوح مختلف تگ‌ها

سطوح مختلف تگ‌ها

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

اگر آن‌ها را گمراه کنید، کاربران متوجه خواهند شد و اصلا از این کار خوششان نمی‌آید.

  1. به کار نبردن Image Altها

می‌توان به هر تصویر یک اتریبیوت “alt” اختصاص داد که این اتریبیوت در صورتی که تصویر به هر دلیلی نمایش داده نشود، متن خاصی به جای آن نمایش داده می‌شود.

شاید این موضوع به نظر چیز خاصی نیاید، به خصوص برای مرورگرهای مدرن(مرورگرهای رایانه‌های شخصی و موبایل‌ها) که می‌توانند تقریبا همه چیز را نمایش دهند.

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

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

استفاده از اتریبیوت alt می‌تواند همه این مشکلات را برطرف کند.

کاربرد Image altها

کاربرد Image Altها

و اگر شخصی از یک screen reader یا یک ویژگی دسترسی دیگر استفاده کند، آن اتریبیوت alt ممکن است تنها چیزی باشد که آن شخص می‌تواند از یک تصویر مشاهده کند.

مسلما VoiceOver باعث می‌شود دستگاه‌های اپل قابل دسترس‌تر از همیشه باشند. همچنین این ویژگی، مزایای سئوی بالقوه و خوبی نیز دارد.

موتورهای جستجو ممکن است که اتریبیوت‌های Alt کوتاه و مختصری نمایش دهند، اما مزیت همین اتریبیوت‌های کوتاه و مختصر این است که به درک بیشتر خواننده از مطلب شما کمک می‌کنند.

  1. نبستن تگ‌ها

چند تگ HTML وجود دارند که می‌توانید بدون بستنشان، از آن‌ها بگذرید، تگ‌هایی مانند <p> و <li>. مرورگرها می‌دانند که وقتی یک پاراگراف جدید شروع می‌کنید یا یک آیتم جدید به لیست اضافه می‌کنید، یعنی اینکه پاراگراف یا آیتم قبلی دیگر تمام شده است.

اما این بدان معنا نیست که دیگر لازم نیست تگ‌ها را ببندید.

اولین و مهم‌ترین نکته‌ای که باید بدانید این است که، علی‌رغم پیشرفت‌های به وجود آمده در فناوری مرورگر، اگر تگ‌های خود را نبندید، مسلما هنوز هم این احتمال وجود دارد که مرورگر محتوای شما را به صورت نامناسبی نمایش دهد.

همچنین به کار بردن استایل‌ها ممکن است نتایج پیش‌بینی نشده‌ای به همراه داشته باشند.

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

خوشبختانه، بستن تگ‌ها زیاد طول نمی‌کشد، به خصوص اگر از یک ویراستار HTML خوب استفاده کنید.

  1. درج نکردن DOCTYPE

در آغاز کد نویسی HTML، معمولا یک معرفی DOCTYPE مشاهده می‌کنید، مانند مثال زیر:

 

DOCTYPE موضوعی است که زیاد از آن حرفی به میان نمی‌آید، اما یک عنصر مهم در صفحه شما است. معرفی DOCTYPE به مرورگر می‌گوید که شما از چه نوع HTML استفاده می‌کنید. این تعریف باعث می‌شود HTML درست رندر شود.

اگر معرفی DOCTYPE را درج نکنید، صفحه با حالت “quirks mode” رندر خواهد شد. این حالت نوعی دفاع مرورگرهای مدرن در برابر صفحات وب ناقص و نادرست است و این حالت، مسلما نحوه نمایش صحیح صفحه شما را تغییر می‌دهد.

اگر حالت quirks فایرفاکس را بررسی کنید مشاهده می‌کنید که حساسیت صفحه به حروف بزرگ و کوچک تغییر می‌کند، تنظیمات فونت در جداول اعمال نمی‌شوند، سایز فونت‌ها به صورت متفاوتی محاسبه می‌شوند و تصاویری که اتریبیوت alt ندارند، گاهی به صورت صحیح نمایش داده نمی‌شوند.

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

و برای این منظور، به یک DOCTYPE نیاز دارید. (اگر مطمئن نیستید که باید از چه تعریفی استفاده کنید،‌ فقط کافی است از <!DOCTYPE html> استفاده کنید).

  1. کوتاهی در نشانه‌گذاری در طراحی صفحه

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

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

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

مسلما اگر از نشانه‌گذاری طراحی صفحه استفاده نکنید هم مشکل خاصی پیش نخواهد آمد. صفحه شما بدون این ویژگی هم به درستی نمایش داده خواهد شد. خوانندگان شما حتی از وجود این ویژگی خبردار نخواهند شد. اما اگر از این ویژگی استفاده کنید، مزیت‌های خیلی خوبی به دست خواهید آورد.

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

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

به انجام بهترین اعمال HTML عادت کنید

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

اما اطمینان حاصل کردن از اینکه کدهای HTML و CSS شما به خوبی طراحی شده‌اند، کار کردن با آن‌ها آسان است و به راحتی قابل اصلاح هستند، باعث می‌شود در بلند مدت به میزان زیادی در زمان شما صرفه جویی شود.

منبع: makeuseof

 مطالب مرتبط

بهترین قالب‌های رایگان HTML5 و CSS3
۹ چیز که باید در مورد HTML5 بدانید
ایجاد یک فرم HTML و تکمیل خودکار فرم‌ها
آموزش زبان HTML (مقدماتی)
تعامل با فایل‌ها در HTML5
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات