چگونه کدهای استاندارد و بدون خطا Html بنویسیم؟
جدای از بحث سئو به عنوان یک طراح سایت باید وظیفه ی خود را به درستی انجام دهید.حتی اگر سئو برای شما مهم نباشد. خیلی از افراد هستند که به عنوان طراح سایت در شرکت های مختلف فعالیت می کنند.
نوشتن کدهای Html هیچ ربطی به زبان برنامه نویسی و یا سیستم مدیریت محتوا شما ندارد. پس یک قاعده کلی برای تمام طراحان سایت به شمار می رود.
قوانین پایه در کدنویسی صحیح
حتما هر تگ Html که باز می شود باید بسته شود. در غیر این صورت اگر موردی از قلم بیوفتد صفحه سایت با خطا مواجه می شود.هر چند ممکن است در ظاهر همه چیز خوب به نظر برسد. اما با بررسی کدها متوجه وجود این خطاها خواهید شد. گوگل اعلام کرد که وجود خطا تاثیری در رتبه بندی ندارد اما بهتر است که کدهای تمیز و بدن خطایی نوشته شود تا نگهداری پروژه و توسعه آن در آینده راحت تر باشد
استفاده صحیح از هر تگ Html
تگ های مختلفی در Html وجود دارد که اگر بخواهیم پر کاربرد ترین آن ها را معرفی کنیم، می توان به موارد زیر اشاره کرد:
مثلا عناوین یک صفحه حتما باید داخل تگ های H1 الیH6 قرار بگیرند. هر صفحه باید فقط و فقط یک تگ H1 داشته باشد.ساختار درختی تگ های H باید رعایت شوند.مثلا اول باید تگ H1 در ابتدای صفحه آورده شود و بعد H2 و الی آخر.
خاصیت alt در تصاویر
هر تصویر داری یک خصوصیت alt میباشد که باید با محتوای مناسب و که با تصویر موضوعیت دارد پر شود.
برخی از طراحان اصلا به این نکته توجه نمی کنند و اصلا این خاصیت را در نظر نمی گیرند. موتورهای جستجو از روی خاصیت alt تصویر متوجه موضوع آن می شوند. پس بهتر است برنامه نویس و طراح سایت این مورد را حتما در نظر بگیرد.(در ویدئو آموزشی توضیح کامل تری وجود دارد).
تگ های meta
زمانی که کاربر متنی را در گوگل جستجو می کند لیستی از نتایج نمایش داده میشود.هر لیست شامل عنوان و متن کوتاهی است.این متن کوتاهی که مشاهده می شود همان متا تگ description هست. البته نه همیشه.گاهی اوقات گوگل بر اساس عبارتی که کاربر جستجو می کند متنی را بین صفحه در این قسمت نمایش میدهد.
وجود این تگ جزء الزامات است. یک مثال دیگر میزنیم. وقتی لینک یک صفحه از وب سایت را در پیام رسان هایی نظیر تلگرام برای شخص دیگری ارسال میکنیم، توضیح مختصری نیز ظاهر می شود. این توضیح از متاتگ صفحه مورد نظر برداشت می شود و کاربر بدون آنکه لینک را باز کند و مطالعه این متن می تواند به موضوعیت صفحه پی ببرد.
بر طرف کردن خطاهای جاوا اسکریپتی
یکی دیگر از خطاهای شایع در صفحات وب، خطاهای مربوط به کدهای جاوااسکریپت است. این موضوع می تواند روی سرعت بارگذاری سایت تاثیر منفی داشته باشد. همچنین ممکن است وجود این نوع خطاها مانع از بارگذاری کامل صفحه شود. اما چگونه می تواند فهمید صفحه سایت شما خطا دارد یا نه؟
برای این کار کافی است سایت را در مرورگر گوگل کروم باز کرده و کلید f12 را بزنید. پنجره ای باز می شود که اگر صفحه خطا داشته باشد با رنگ قرمز مشخص شده و در داخل آن عددی نوشته شده است. این عدد بیانگر تعداد خطاهای صفحه وب شما می باشد.
در ادامه با ویدئوی آموزشی به توضیح پروژه محور موارد بالا می پردازیم و به صورت عملی و پروژه محور با کد نویسی استاندارد یک صفحه html آشنا می شویم.(به زودی)
منبع: طراحی سایت ارزان
طراحی سایت کرج
جدای از بحث سئو به عنوان یک طراح سایت باید وظیفه ی خود را به درستی انجام دهید.حتی اگر سئو برای شما مهم نباشد. خیلی از افراد هستند که به عنوان طراح سایت در شرکت های مختلف فعالیت می کنند.
نوشتن کدهای Html هیچ ربطی به زبان برنامه نویسی و یا سیستم مدیریت محتوا شما ندارد. پس یک قاعده کلی برای تمام طراحان سایت به شمار می رود.
قوانین پایه در کدنویسی صحیح
حتما هر تگ Html که باز می شود باید بسته شود. در غیر این صورت اگر موردی از قلم بیوفتد صفحه سایت با خطا مواجه می شود.هر چند ممکن است در ظاهر همه چیز خوب به نظر برسد. اما با بررسی کدها متوجه وجود این خطاها خواهید شد. گوگل اعلام کرد که وجود خطا تاثیری در رتبه بندی ندارد اما بهتر است که کدهای تمیز و بدن خطایی نوشته شود تا نگهداری پروژه و توسعه آن در آینده راحت تر باشد
استفاده صحیح از هر تگ Html
تگ های مختلفی در Html وجود دارد که اگر بخواهیم پر کاربرد ترین آن ها را معرفی کنیم، می توان به موارد زیر اشاره کرد:
- تگ div
- تگ های Heading
- تگ پاراگراف یا p
- لیست های ul,li
- تگ img
- تگ Article
- تگ Header
- تگ Footer
- تگ a
مثلا عناوین یک صفحه حتما باید داخل تگ های H1 الیH6 قرار بگیرند. هر صفحه باید فقط و فقط یک تگ H1 داشته باشد.ساختار درختی تگ های H باید رعایت شوند.مثلا اول باید تگ H1 در ابتدای صفحه آورده شود و بعد H2 و الی آخر.
خاصیت alt در تصاویر
هر تصویر داری یک خصوصیت alt میباشد که باید با محتوای مناسب و که با تصویر موضوعیت دارد پر شود.
برخی از طراحان اصلا به این نکته توجه نمی کنند و اصلا این خاصیت را در نظر نمی گیرند. موتورهای جستجو از روی خاصیت alt تصویر متوجه موضوع آن می شوند. پس بهتر است برنامه نویس و طراح سایت این مورد را حتما در نظر بگیرد.(در ویدئو آموزشی توضیح کامل تری وجود دارد).
تگ های meta
زمانی که کاربر متنی را در گوگل جستجو می کند لیستی از نتایج نمایش داده میشود.هر لیست شامل عنوان و متن کوتاهی است.این متن کوتاهی که مشاهده می شود همان متا تگ description هست. البته نه همیشه.گاهی اوقات گوگل بر اساس عبارتی که کاربر جستجو می کند متنی را بین صفحه در این قسمت نمایش میدهد.
وجود این تگ جزء الزامات است. یک مثال دیگر میزنیم. وقتی لینک یک صفحه از وب سایت را در پیام رسان هایی نظیر تلگرام برای شخص دیگری ارسال میکنیم، توضیح مختصری نیز ظاهر می شود. این توضیح از متاتگ صفحه مورد نظر برداشت می شود و کاربر بدون آنکه لینک را باز کند و مطالعه این متن می تواند به موضوعیت صفحه پی ببرد.
بر طرف کردن خطاهای جاوا اسکریپتی
یکی دیگر از خطاهای شایع در صفحات وب، خطاهای مربوط به کدهای جاوااسکریپت است. این موضوع می تواند روی سرعت بارگذاری سایت تاثیر منفی داشته باشد. همچنین ممکن است وجود این نوع خطاها مانع از بارگذاری کامل صفحه شود. اما چگونه می تواند فهمید صفحه سایت شما خطا دارد یا نه؟
برای این کار کافی است سایت را در مرورگر گوگل کروم باز کرده و کلید f12 را بزنید. پنجره ای باز می شود که اگر صفحه خطا داشته باشد با رنگ قرمز مشخص شده و در داخل آن عددی نوشته شده است. این عدد بیانگر تعداد خطاهای صفحه وب شما می باشد.
در ادامه با ویدئوی آموزشی به توضیح پروژه محور موارد بالا می پردازیم و به صورت عملی و پروژه محور با کد نویسی استاندارد یک صفحه html آشنا می شویم.(به زودی)
منبع: طراحی سایت ارزان
طراحی سایت کرج
