سلام دوستان. آیا سه هسته اصلی تشکیل دهنده در آموزش تخصصی html و css را میشناسید؟ البته بهتر است بگویم که 3 زبان اصلی تشکلی دهنده صفحات وب را می شناسید؟ نه؟ پس با ما همراه شوید.
زبان اول، HTML:
قطعا اولین زبانی که برای آموزش طراحی وب با آن روبه رو می شوید Html است. این یعنی شما در ابتدای راه باید به آموزش html و css بپردازید. شاید با خود بگویید Css چیست؟ صبر داشته باشید به آن هم می رسیم.
Html یک زبان نشانه گذار ابر متنی است که بدنه اصلی صفحات وب ما را می سازد. فرض کنید شما یک معمار ساختمان هستید، اولین کاری که انجام می دهید، چیست؟ بله درسته. ابتدا اسکلت ساختمان را می سازید و بعد شروع به زیباسازی ساختمان می کنید.
Html هم دقیقا حکم اسکلت ساختمان را دارد که شما برای صفحات وب خود انجام می دهید.
-
این زبان نشانه گذار ابر متن چطور این کار را انجام می دهد؟
Html با استفاده از تگ های قدرتمند خود هر عنصر را سرجای خودش می نشاند.
تگ ها، کارمندان شریف و وظیفه شناسی هستند که با فراخوانی آنها کار خود را شروع می کنند و تا زمانی که تگ آنها بسته نشود به کار خود ادامه می دهند. مثلا از کارمند شریف p برای پاراگراف استفاده می شود و با تمام شدن پاراگراف و بسته شدن تگ، کارمند p به کار خود پایان می دهد.
در حقیقت آنها به مرورگر می گویند که صفحه مورد نظر از چه عناصری تشکیل شده است و امکانات بسیاری را در اختیار شما قرار می دهد. از ساخت لیست های مختلف گرفته تا صدا و تصویر و ….
خصوصیت های خوب و بد Html:
همان طور که هر انسانی یک سری خصوصیت های خوب وبد دارد. این زبان نشانه گزار ما هم همین طور است. ولی ما بخاطر خصوصیت های خوب زیادی که دارد، از آن استفاده می کنیم.
-
خصوصیات خوب Html:
یادگیری آسان و لذتبخش
قابلیت اجرا در تمام مرورگرها
متن باز و رایگان بودن
ادغام آسان با زبانهای سمت سرور مثل php
-
خصوصیات بد Html:
استاتیک بودن و وابستگی به زبانهای سمت سرور برای تعامل با کاربر
ضعف در پشتیبانی از مرورگرهای قدیمی
نیاز به طراحی جداگانه هر صفحه به دلیل نبود قواعد منطقی برنامه نویسی
زبان دوم، Css:
زبان دیگر تشکیل دهنده صفحات وب، Css و مکمل زبان Html است و هدف اصلی آن برطرف کردن نقاط ضعف Html است. به همین دلیل هر وقت اسم از یادگیری اولین زبان برای طراحی وب را سرچ میکنید با این جمله مواجه میشوید: آموزش html و css
این زبان نشانه گذاربه شما اجازه می دهد تا ساختار صفحات خود را از چیدمان عناصر گرفته تا تغییر رنگ بندی و فونت ها بهره ببرید.
-
دنیای بدون Css:
قطعا دنیای بدون Css، دنیای زشت و وحشتناکی خواهد بود؛ چرا که تمام سایت های اینترنتی پر میشد از یکسری تگ های Html که هیچ رنگ و لعاب و جذابیتی نداشت و همه از گشتن در وب سایت ها خسته میشدند اما Css آمد و گفت: نگران نباشید و صفحات خود را با من زیبا کنید.
چگونه بین Css و Html ارتباط بر قرار کنیم؟
این دو دوست جدانشدنی از هم، 3 راه برای ما قرار داده اند که با توجه به نیاز خود می توانیم از آنها استفاده کنیم.
-
روش inline style :
برا ی استفاده از این روش باید کدهای Css را در میان تگهای Html تعریف کنید. این روش معمولا توصیه نمیشود، زیرا به مرور زمان و با بزرگتر شدن پروژه، این کدها بسیار نامرتب میشوند و در آینده باعث سردرگمی خواهند شد. برای مثال :
<p style=”background-color: red; color: white;”></p>
-
روش internal style :
در این روش کافیست تمام کدهای CSS را در میان تگهای باز و بسته <style></style> که در صفحه HTML نوشته شده است، قرار دهید. این روش معمولا زمانی استفاده میشود که بخواهند استایل خاصی را فقط در یک صفحه منحصر به فرد داشته باشید. برای مثال :
<style>
P {
Background-color: red;
Color: white;
}
</style>
-
روش External Style :
با استفاده از این روش شما میتوانید یک صفحه دیگر با پسوند css ایجاد کنید و سپس کدهای CSS را در آن بنویسید. سپس کافیست صفحات HTML مورد نظر خود را با استفاده از تگهای <link> به این صفحات متصل کنید. در این روش باید آدرس فایل صفحه css را در اتریبیوت href تگ link بنویسید. برای مثال :
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
هنوز هم نمی دانید چرا باید از Css استفاده کنید؟
اساسی ترین کاربردی که به آن هم اشاره کردیم، زیباسازی و بهبود طراحی صفحات وب است که به شما اجازه می دهد برای تغییر صفحات خود کمتر به سراغ ساختار HTML بروید و با سرعت نور طراحی خود را خوش استیل کنید چون از HTML مهربون تر (منعطف تر) است.
این هم جاوا اسکریپت و هسته سوم تشکیل دهنده آموزش html و css:
-
و اما زبان سوم، جاوا اسکریپت:
بزارید معرفی این زبان را اینطور شروع کنیم.
فرض کنید شما در یک صفحه وب به کمک تگ های HTML تعدادی تصاویر قرار داده و با Css چیدمان آنها را طراحی کرده اید. حالا می خواهید آنها را به صورت اسلایدر همراه با افکت های مختلف نشان دهید چه می کنید؟ بله درست حدس زدید. این جاست که باید به سراغ زبان سوم یعنی جاوا اسکریپت بروید.
جاوا اسکریپت (Java script) یا Js یک زبان محبوب مبتنی بر شی، داینامیک و مفسری است که با آن می توانید صفحات وب سایت خود را پویاتر و حساس به حرکات کاربر کنید. سخت شد؟ هیچ نگران نباشید در ادامه توضیح می دهیم.
شیگرایی یک تفکر و شیوه در برنامهنویسی است. در برنامه نویسی شیگرا کدها در واحدهای کوچکتری تقسیمبندی میشوند و در طی برنامه این واحدها باهم پیوند میخورند تا برنامهی نهایی ایجاد شود.
زبان مفسری (Interpreter) زبانی است که کدهای آن به صورت خط به خط ترجمه و اجرا میشوند! این زبان مقابل زبانهای کامپایلری (Compiled) قرار میگیرد که یکباره کل کدها ترجمه و اجرا میشوند. بنابراین سرعت اجرای زبانهای مفسری نسبت به زبانهای کامپایلری کمتر است.
-
کاربردهای شگفت انگیز این زبان همه فن حرف را بشناسید:
شما قادر خواهید بود تا سایتهای بیروح خود را جان بخشی کنید و با کاربران خود تعامل داشته باشید. یعنی میتوانید فایلهای انیمیشنی، صوتی و تصویری را روی سایت خود به نمایش بگذارید. همچنین میتوانید روی سایت خود تایمر بگذارید، رنگها را با حرکت موس تغییر دهید و بسیاری کارهای دیگر که باعث جذابیت بیشتر صفحات وب میشوند.
اما کاربردهای جاوا اسکریپت به اینجا ختم نمی شود. شما با استفاده از این زبان میتوانید شروع به ساخت برنامههای وب و موبایل و دسکتاپ کنید. یکی از کارهای سرگرم کننده دیگری که میتوانید از طریق این زبان انجام دهید، توسعه بازیهای رایانه ای تحت مرورگر است. شاید شما هم مثل من دوست داشته باشید تا آموزش جاوا اسکریپت را به صورت حرفه ای یاد بگیرید اما قبلش بگذارید تا کاربردهای این زبان جذاب را بیان کنیم:
برنامه نویسی فرانت اند
برنامه نویسی بک اند
برنامه نویسی نرم افزارهای موبایل
برنامه نویسی نرم افزارهای دسکتاپ
می خواهید با خصوصیت های خوب و بد جاوا اسکریپت آشنا شوید؟
-
خصوصیات خوب جاوا اسکریپت:
احتیاج نداشتن به کامپایلر برای پردازش و اجرا
یادگیری راحت جاوا اسکریپت نسبت به زبانهای دیگر.
قابل اجرا برروی پلتفرم های مختلف
سبک و سریع
در اختیار قرار دادن فریم ورک ها،کتابخانهها و ابزارهای دیگر
زبان بومی مرورگر وب است وقابل پردازش در مرورگر کاربر
در جواب عمل کاربران، عکس العمل نشان میدهد.
-
خصوصیات بد جاوا اسکریپت:
دشواری در تشخیص خطا
محدودیت در اجرای اسکریپتهای جاوا اسکریپت با ایجاد محدودیت هایی جهت حفظ امنیت
اجرا نشدن بر روی مرورگرهای قدیمی
قابل اجرا برای کدهای مخرب در کامپیوتر کاربران.
ایجاد تناقض و نداشتن یکپارچگی با رندر شدن متفاوت بر روی ابزارهای مختلف
کلام آخر:
با مثال زیر صحبت های خود را خلاصه می کنم:
اگر HTML را مانند یک انسان برهنه در نظر بگیرید، CSS مانند لباسهای شیک، ظاهر آن را آراسته میکند. در نهایت جاواسکریپت باعث میشود او حرکت کرده و با بقیه شروع به صحبت کند. پس در طراحی ظاهر سایت به طور خلاصه باید گفت :
HTML به کمک تگهای از قبل تعریف شده ساختار و اسکلت صفحه وب را مشخص میکند.
CSS به ما کمک میکند عناصر مختلف را در صفحه جابهجا کنیم، رنگبندی را تغییر دهیم، فونتها را عوض کنیم و به جایی برسیم که یک صفحه وب با ظاهر قابل قبول برای ارائه داشته باشیم.
JavaScript به ما اجازه میدهد صفحات وب را به طور داینامیک یا پویا طراحی کنیم.
خب دوستان با هسته های اصلی صفحات تشکیل دهنده وب آشنا شدید. اگر برای ورود به این دنیای زیبا، به دنبال یک منبع خوب هستید پیشنهاد من به شما سایت درسمن است.
آموزش Html و Css درسمن با آخرین نسخه های به روز این زبان است. همچنین یک دوره مقدماتی آموزش رایگان جاوا اسکریپت برای آشنایی با مفاهیم اولیه این زبان نیز قرار دارد.
نکته دیگری که باید بدانید این است که معمولا طراحان برای راحت تر شدن کارهای خود از فریم ورک استفاده می کنند. فریم ورک محبوب برنامه نویسان وب، Bootstrap نام دارد و این سایت آخرین نسخه ارائه شده از آن را در اختیارتان گذاشته و با گذراندن دوره پروژه محور رایگان این سایت دانش Html، Css و Bootstrap خود را محک بزنید. این دوره ها از جدیدترین مطالب استفاده شده است و استاندارد w3schools را دارد.
امیدوارم مطالب مورد پسند شما عزیزان قرار گرفته باشد.
سلب مسئولیت: مجموعه «دیتاجو» در تهیه و تنظیم این مطلب که صرفا جنبه تبلیغاتی دارد نقشی نداشته و مسئولیتی راجع به صحت آن نمیپذیرد.
همونطور که می دونید، زبان برنامهنویسی Both Side و سطح بالای جاوا اسکریپت مبتنی بر شی هست و در کنار HTML و CSS خودمون، به عنوان یکی از سه هسته تشکیل دهنده صفحات وب به شمار میره که با فریمورکهایی مانند vue.js برنامه نویسی سمت سرور یا بک اند نیز انجام داد
سلام بر برنامه نویس عزیزمون
زبان برنامهنویسی Both Side رو تازه میشنوم ♨️
خیلی جالب بود
سلام وقت بخیر، خیلی مطلب خوبی بود واقعا برام خیلی جای سوال بود که باید در ابتدای کار چه زبانی برای طراحی سایت یاد بگیرم، ممنونم از سایت خوبتون.
سلام محمد جان
ساده ترین زبان، اچ تی ام ال هست، ترجیحا از این زبان شروع کنید ?
موفق و سربلند باشید
خیلی مطلب فوق العاده ای بود، من تازه شروع به یادگیری html و css کرده ام، میشه گفت انقدر جذاب هست که ساعت ها غرق میشم داخلش و تا به خودم میام میبینیم چندین ساعت پای لپ تاپ بودم.
ممنون دیتاجوووو
سلام عارف جان
خواهش میکنم، رسالت دیتاجو، آموزش به شماست ?
موفق باشید
اوه مای گاد نمی دونستم حقیقت اینقدر کاربرد دارن، برام خیلی جالب بود، یعنی برای html نیاز نیست کد ها کامپایل بشوند؟
پس ایرادات چطور چک میشه که اگر کد خطا داشت بگه؟
این ویژگی کارو سخت نمی کنه؟
سلام فاطمه خانوم
سوالات تخصصی پرسیدید، بزودی پاسخگوی شما خواهند بود ?
موفق و سربلند باشید
مطلب خیلی خوبی بود سپاسگزارمممم.
سلام امین بزرگوار
خواهش میکنم، مرسی که وقت گذاشتید و مطالعه کردید ?
بقیه مطالب دیتاحو هم دنبال کنید
خیلی ممنون از مطلب خوبتون و منبع خوبی ک پیشنهاد کردید من واقعا عاشق این حرفه شدم و با قدرت دارم با درسمن به راهم ادمه میدم ممنون از همه
سلام سارا خانوم
خواهش میکنم، رسالت دیتاجو هدایت آموزشی درست شما عزیزان است ?
سربلند باشید
html خیلی زبان خوب و ساده ایه ادم احساس راحتی میکنه باهاش، من تازه شروع کردم html کردم خیلی برام هیجان انگیزه.
سلام جناب مومنی عزیز
خیلی خوشحالیم که شماهم با زبان html آشنا شدید ?
به دیجیتال مارکتینگ خوش آمدید
مطلب مفیدی بود، تشکر
سلام الهه خانم
متشکرم از کامنت خوبتون ?
سربلند باشید
عالیی بود من سایت درسمن تا حالا ندیده بودم ولی الان که دیدم واقعا سایت خیلی خوبی بود و مدرس خیلی خوبی داره، ممنونم از مطلب خوبتون که منو با این سایت آشنا کرد خدا خیرتون بده.
سلام خانوم جعفری عزیز
خواهش میکنم، وظیفه دیتاجو معرفی برند های برتر آموزشی مانند درسمن هست ?
موفق و سربلند باشید