آموزش html css اولین گام برای پولدار شدن و جایگاه شغلی مناسب

به نقل از ایلنا

این روزها بازار کار طراحی وب داغ داغ. تا جایی که افراد بسیاری را به سمت خود جذب کرده است. اما علت چیست؟ قطعا پیشرفت تکنولوژی و اینترنتی شدن کسب و کارها.

حالا به نظر شما این سایت هایی که هر روز به آنها سر میزنیم و به شکلی برایمان جذاب است، چه طور ساخته میشوند؟

باور می کنید با وجود تکنولوژی های زیادی که در جذاب کردن طراحی وب تاثیرگذار بوده است همه به html ختم می شوند.

به همین دلیل است که می گوییم کارتان را با آموزش html css شروع کنید. پس بریم سراغ آشنایی.

تولد html:
بریم سفر کوتاهی داشته باشیم به سال ۱۹۹۱. زمانی که آقای Tim Berners-Lee کار خود را با کار کردن روی برچسب ساده شروع کرد که منجر به طراحی اولین نسخه HTML شد. این بچه روز به روز برای پیشرفتش تلاش کرد و در هر نسخه، امکانات بیشتری را در قالب تگ‌‌های html کاربردی‌ در اختیار دوست دارانش قرار داد.

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

تحول بزرگی که در HTML5 رخ داد چی بود؟
همان طور که گفتیم تا سال ۲۰۰۸ بازار HTML4 داغ بود و به طور گسترده استفاده می‌شد. اما این نسخه ضعف‌هایی داشت که باید بروز رسانی میشد. به همین دلیل کمپانی WHATWG دست به کار شد به توسعه دادن و ارتقاء استانداردهای آن. تا اینکه ضعف اصلی HTML4 که مربوط به چندرسانه‌ای (multimedia) و گرافیک بود، حل شد.

HTML5 هم در سال ۲۰۱۴ یک آپدیت مهم و اساسی را تجربه و تگ‌های HTML جدیدی را به خود اضافه کرد که تاثیر بسیار مثبتی در بالا رفتن شخصیت خود و بهبود تجربه طرفدارانش داشت. بعد از این آپدیت، طراحی سایت‌ها ساختار خود را منظم کردند و مفاهیم قدیمی مثل استفاده از table در بدنه اصلی صفحات را کنار گذاشتند، چون دیگر به کلاسشان نمی آمد و برای آنها افت داشت.

اصلا تعریف HTML چیست؟

یک ساختمان را تصور کنید که شخصی میخواهد اقدام به ساخت آن کند، برای مثال یک مجتمع مسکونی!

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

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

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

تفاوت زبان برنامه نویسی با زبان نشانه گذار چیه؟

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

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

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

به همین دلیل وقتی اسمی از Html می آید به دنبال آن نام CSS هم می شنوید.

این عصای جادویی چکار میکند؟
CSS حکم پوست و گوشت و در نهایت کت و شلوار صفحات وب را دارد. یعنی طراحان سایت را قادر می‌سازد که بدون محدودیت، خلاقیت‌های خود را در طراحی صفحات پیاده سازی کنند. پس اساسی‌ترین کاربرد CSS، زیبا سازی و بهبود طراحی صفحات وب است و به شما اجازه می‌دهد برای تغییر صفحات وب، کمتر سراغ ساختار HTML رفته و با سرعت بیشتری طراحی خود را خوش استیل کنید. چرا که در گذشته برای ساخت صفحات وب سایت همه چیز در کدهای HTML خلاصه می‌شد و طراحان سایت برای ساخت یک صفحه وب و اعمال ویژگی‌های ظاهری مختلف مانند تغییر رنگ، اندازه و…، مجبور بودند با خاصیت‌های داخلی HTML دست و پنجه نرم کنند. آن‌ها می‌بایست این تغییرات را در تک تک صفحه‌های مورد نظر و بر روی تمامی اجزای آن اعمال می‌کردند. این عوامل، طراحی سایت را با صرف زمان و سختی‌های زیادی همراه ساخته بود. تا اینکه CSS به داد Html رسید.

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

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

حالا که از اسم فریم ورک محبوب CSS نام بردیم بیاین یه آشنایی کوتاهی باهاش داشته باشیم که یه وقت ناراحت نشود.

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

کلام آخر:

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