‍ اشتباهات رایج در css و html

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


خطاهای مربوط به تگهای body , head
همانطور که در قسمت های قبل گفته شد محتوای htmlنباید خارج از تگ html قرار گیرد و محتوای body نیز نباید بیرون از تگ body قرار گیرد.یکی از اشتباهات رایج در طراحی وب این است که محتوای این عناصر بین تگ پایانی head و تگ آغازین body قرار می گیرد و درون آنها هیز چندین عنصر bodyو html دیگر قرار می گیرند.

بسته نشدن تگها،خصیصه ها و دستور ها:
اگر در html تگی بسته نشده باشد،سایر عناصر صفحه یا بخشی از آن صحیح نمایش داده نمی شود.همچنین بسته نشدن یک خصیصه در html با استفاده از علامت کوتیشن دوتایی (“)باعث می شود که سایر قسمت های صفحه تا کوتیشن بعدی جزئی از آن خصیصه محسوب شود.اگر در انتهای هر یک از مقادیر خصیه ها در css علامت ; (سمی کالن) گذاشته نشود ممکن است بخشی یا تمام دستورها بعد از آن درست کار نکنند.

استفاده ی نادرست از علامتها در css :
اگر در یک دستور css نتیجه مورد نظر خود را به دست نیاوردید،علامت ها مربوط به انتخابگرها را بررسی نمایید.مثلا اگر به جای # از نقطه یا برعکس استفاده کنید کد شما کار نخواهد کرد.

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

محتوای غیر قابل دسترس:
باید اطمینان حاصل کنیدکه کاربران شما حتی در صورتی که مرورگرهایشان بر روی تنظیمات پیش فرض قرار نگرفته باشد، می توانند به محتوای داخل صفحه دسترسی داشته باشند.بیشتر مشکلها زمانی به وجود می آیند که مقدار overflow را برابر hiden قرار داده باشید. همچنین تگهای textarea که نقادیر col , row در آنها به درستی تعیین نشده باشد اغلب به صورت کوچک نمایش داده می شوند.در فیلد ها متنی نیز در صورتی که ویژگی size تعیین نیشده باشد،همین مشکل پیش می آید.

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

خطاهای دیکته ای :
اگر یک تگ آغازین اشتباه نوشته شود مانند این است که آن عنصر اصلا وجود نداشته است.همچنین اگر تگ پایانی اشتباه نوشته شود به معنی این است که آن تگ بسته نشده و محتوای درون آن تگ از بین می رود.در css غلط های املایی و یا ویژگی ها باعث حذف کل دستورها می شود.

خطاهای فاصله گذاری:
هیچ گاه در css بین نشان گر های id یا کلاسها و نام آنها یا بین اعداد و واحد‌های آنها فاصله ایجاد نکنید. همچنین فضای خالی بین انتخابگرهای مفهومی را حذف نکنید،در غیر این صورت این انتخابگرها به یکدیگر میچسبند و انتخابگر جدیدی ایجاد می کنند که شناخته شده نیست.

استفاده از چند واحد اندازه گیری:
در css مقدار یک ویژگی فقط می تواند یک واحد داشته باشد.مقادیری مانند ۵۰ pxem باعث می شود تمام یا قسمتی از دستور به درستی کار نکند.
-------------------------------------------------------
#اشتباهات_HTML_CSS
#HTML
#CSS

-------------------------------------------------------
🔷دوناوب🔹

🌐طراحی انواع وبسایت،سئو،بهینه سازی و مشاوره کسب و کار🌐↙️

🌐doonaweb.ir
آیدی تلگرام
@doonaweb
آیدی اینستاگرام
https://instagram.com/doonaweb

"پیش‌درآمدی بر CSS"

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

باهامون همراه باشید تا در جلسات آینده نکات بیشتری درباره CSS و استایل‌دهی اِلِمان‌ها بهتون بگم که بتونید یک وب‌سایت شیک و قشنگ برای خودتون طراحی کنید.

از طریق این لینک میتونین این آموزش رو ببینین👇😄

https://www.instagram.com/tv/CQtfH_prmSS/?utm_medium=copy_link
----------------------------------------------------------
#سی_اس_اس #آموزش_وب #آموزش_سی_اس_اس #طراحی_وب #وب #وبسایت #نکات_آموزشی #اچ_تی_ام_ال #طراحی_سایت #آموزش #ترفند_آموزشی #شرکت_طراحی_سایت_دوناوب

#website #css #website_learn #web_design #html #web #learn

----------------------------------------------------------
🔷دوناوب🔹

🌐طراحی انواع وبسایت،سئو،بهینه سازی و مشاوره کسب و کار🌐↙️

🌐doonaweb.ir
آیدی تلگرام
@doonaweb
آیدی اینستاگرام
https://instagram.com/doonaweb

سلام دوستان امیدوارم که حال دلتون عالی باشه🤩

امروز با یه پست خیلی خوب اومدیم.ببینین و استفاده کنین🤗

از طریق این لینک میتونین این آموزش رو ببینین👇😄

https://www.instagram.com/p/CQ37xHspgoG/?utm_medium=copy_link
----------------------------------------------------------
#اچ_تی_ام_ال #طراحی_وبسایت #سایت #کد_نویسی #اکسپلور_اینستاگرام #اکسپلور #وب #رنگ_در_اچ_تی_ام_ال #سی_اس_اس

#html #css #website #web_design #explore #explore_instagram #web #programming
----------------------------------------------------------
🔷دوناوب🔹

🌐طراحی انواع وبسایت،سئو،بهینه سازی و مشاوره کسب و کار🌐↙️

🌐doonaweb.ir
آیدی تلگرام
@doonaweb
آیدی اینستاگرام
https://instagram.com/doonaweb

آموزش HTML "جلسه دوم"
سلام دل‌انگیزان
توی این جلسه، درباره چند تگ مهم و پرکاربرد که توی هر وب‌سایتی استفاده میشه مثل تگ p(پاراگراف)، تگ a(لینک)، تگ img(برای عکس) و... بهتون توضیح میدم.
امیدوارم این توضیحات بهتون کمک بکنه و بتونین هرچه سریع‌تر وب‌سایت خودتون رو طراحی کنید😉

از طریق این لینک میتونین این آموزش رو ببینین👇😄

https://www.instagram.com/tv/CQ9HK81prN4/?utm_medium=copy_link
----------------------------------------------------------

#طراحی_سایت #سایت #اچ_تی_ام_ال #آموزش_وب #سی_اس_اس #آموزش_اچ_تی_ام_ال #آموزش_کاربردی #وب #اکسپلور_اینستاگرام #اکسپلور #شرکت_طراحی_سایت_دوناوب #تکنولوژی #آموزش_کامپیوتر

#website #website_learn #web_design #webdeveloper #web_development #css #html #html_learning #css_learning #technology #computer_learning #web
----------------------------------------------------------
🔷دوناوب🔹

🌐طراحی انواع وبسایت،سئو،بهینه سازی و مشاوره کسب و کار🌐↙️

🌐doonaweb.ir
آیدی تلگرام
@doonaweb
آیدی اینستاگرام
https://instagram.com/doonaweb

اینم پارت دوم پست قبلی.ببینبن و لذت ببرین😍❤

از طریق این لینک میتونین این آموزش رو ببینین👇😄

https://www.instagram.com/tv/CQ9PCUTpnrV/?utm_medium=copy_link
----------------------------------------------------------
#آموزش_وب #اچ_تی_ام_ال #وب #وبسایت #اکسپلور_اینستاگرام #اکسپلور #تکنولوژی #طراحی_وبسایت #وب #وبسایت #آموزش_کامپیوتر #آموزش_کاربردی

#website #website_learn #web_design #webdeveloper #webdesign #computer_learning #html_learning #html #css #web
----------------------------------------------------------
🔷دوناوب🔹

🌐طراحی انواع وبسایت،سئو،بهینه سازی و مشاوره کسب و کار🌐↙️

🌐doonaweb.ir
آیدی تلگرام
@doonaweb
آیدی اینستاگرام
https://instagram.com/doonaweb

سلام رفقا💖
بهتون گفته بودم از این به بعد قرار کلی آموزش چالشی داشته باشیم😎

اینم از اولین پست چالشی جاوااسکریپت😍 تمام اسلایدهارو گام به گام انجام بدین و از خروجی کارتون لذت ببرین🤩👌

کدهای کامل و آماده این آموزش رو هم میتونین از همین کانال دانلود کنید❤️

از طریق این لینک میتونین این آموزش رو ببینین👇😄

https://www.instagram.com/p/CVqdVKcoGnD/?utm_medium=copy_link
----------------------------------------------------------
#آموزش #جاوااسکریپت #چالش #پست_چالشی #طراحی_وب #وب #اچ_تی_ام_ال #سی_اس_اس #موزیک #دوناوب #تولیدمحتوا #اکسپلور_اینستاگرام

#learn #javasceipt #html #css #webdesign #challenge #new_post #doonaweb #instagram
----------------------------------------------------------
🔷دوناوب🔹

🌐طراحی انواع وبسایت،سئو،بهینه سازی و مشاوره کسب و کار🌐↙️

🌐doonaweb.ir
آیدی تلگرام
@doonaweb
آیدی اینستاگرام
https://instagram.com/doonaweb.ir

سلام همرهان عزیز دوناوب❤

امروز با دومین پست چالشی جاوااسکریپت همراهتون هستیم.توی این پست چالشی قرار گام به گام طراحی ساعت آنالوگ با جاوااسکریپت رو باهم یادبگیریم🤩💜

حتما تا آخر این پست با ما همراه باشین تا بتونین این ساعت زیبا رو طراحی کنین🥰👌

نظرتون راجب پستای چالشی چیه؟!🤔
حتما تو کامنتا بنویسین برامون💜🥰🙏

از طریق این لینک میتونین این آموزش رو ببینین👇😄

https://www.instagram.com/p/CV-8geCIY9-/?utm_medium=copy_link
----------------------------------------------------------
#آموزش #جاوااسکریپت #چالش #پست_چالشی #طراحی_وب #وب #اچ_تی_ام_ال #سی_اس_اس #ساعت #دوناوب #تولیدمحتوا #اکسپلور_اینستاگرام

#learn #javasceipt #html #css #webdesign #challenge #new_post #doonaweb #instagram #clock
----------------------------------------------------------
🔷دوناوب🔹

🌐طراحی انواع وبسایت،سئو،بهینه سازی و مشاوره کسب و کار🌐↙️

آدرس وبسایت
🌐doonaweb.ir
آیدی تلگرام
@doonaweb
آیدی اینستاگرام
https://instagram.com/doonaweb.ir

سلام دوناوبی های عزیز ما اومدیم با یه پست چالشی دیگه😎❤

توی این قسمت از پست چالشی html &css چندتا هاور جذاب برای دکمه براتون طراحی کردیم.گام به گام اسلایدهارو انجام بدین تا کاملا مسلط بشین.امیدوارم به دردتون بخوره🤩👌

کدهای آماده و کامل این پست رو هم میتونید ازهمین کانال دانلود کنین🤩💜👇

t.me/doonaweb

از طریق این لینک میتونین این آموزش رو ببینین👇😄

https://www.instagram.com/p/CWWIhROIVYt/?utm_medium=copy_link
----------------------------------------------------------
#اچ_تی_ام_ال #سی_اس_اس #آموزش_وب #طراحی_وب #طراحی_دکمه #وب #چالش #چالش_کدنویسی #پست_چالشی #وب_دیزاینر #اکسپلور_اینستاگرام #اینستاگرام #دوناوب

#html #css #webdesign #webdesigner #programming #coding_challenge #chalange #change_post #post #explore_instagram
----------------------------------------------------------
🔷دوناوب🔹

🌐طراحی انواع وبسایت،سئو،بهینه سازی و مشاوره کسب و کار🌐↙️

آدرس وبسایت
🌐doonaweb.ir
آیدی تلگرام
@doonaweb
آیدی اینستاگرام
https://instagram.com/doonaweb.ir

سلام دوناوبی های عزیز❤

توی این پست به اینکه اصلا چرا باید کدهای اچ تی ام ال رو فشرده کنیم و اینکه چه جوری فشردشون کنیم پرداختیم.

دوست داری بدونی چه جوری بدون نصب هیچ افزونه ایی کدهای اچ تی ام ال رو فشرده کنی؟!

پس تا آخر این پست با ما همراه باش😁👌

کدهای آماده و کامل این پست رو هم میتونید ازهمین کانال دانلود کنین🤩💜👇

t.me/doonaweb

از طریق این لینک میتونین این آموزش رو ببینین👇😄

https://www.instagram.com/p/CWygh-doAba/?utm_medium=copy_link
----------------------------------------------------------
#آموزشی #وب #وب_دیزاینر #وردپرس #افزونه_وردپرس #فشرده_سازی #فشرده_کردن #کد_نویسی #برنامه_نویسی #دوناوب #تولیدمحتوا #اکسپلور_اینستاگرام
#اچ_تی_ام_ال

#compress_code #compress #learn #wordpress #webdesign #webdesigner #html
----------------------------------------------------------
🔷دوناوب🔹

🌐طراحی انواع وبسایت،سئو،بهینه سازی و مشاوره کسب و کار🌐↙️

آدرس وبسایت
🌐doonaweb.ir
آیدی تلگرام
@doonaweb
آیدی اینستاگرام
https://instagram.com/doonaweb.ir