برای کسی که قبلا هرگز کد نزده است، مبانی طراحی وب سایت شامل چیدمان، طراحی و بقیه موارد می‌تواند واقعا ترسناک به نظر برسد. ممکن است در ذهن خود دانشجویان رشته کامپیوتر را تجسم کنید در حالی پشت کامپیوترهای خود با هدفون های بزرگ نشسته اند و کد می‌زنند و به خودتان می‌گویید:
من هرگز نمی‌توانم چنین کاری را انجام بدهم. اما در واقع، می‌توانید.
یادگیری مبانی طراحی وب سایت
هر کسی می‌تواند کد زدن را یاد بگیرد، درست مثل اینکه هر کسی که می‌تواند یک زبان جدید را بیاموزد. در حقیقت، برنامه نویسی تا حدودی مانند صحبت کردن به یک زبان خارجی است، به همین دلیل به آنها زبان های برنامه نویسی گفته می‌شود.
هرکدام قوانین و نحو یا سینتکس (syntax) خاص خود را دارند که باید گام به گام یاد گرفته شود. این قوانین روش هایی است که به کامپیوتر بگویید چه کاری انجام دهند. به طور خاص، در برنامه نویسی وب آنها روشهایی برای گفتن به مرورگرها هستند که چه کاری انجام دهند.
هدف این مطلب این است که مبانی طراحی وب سایت شامل HTML و CSS و یکی از رایج ترین زبان های برنامه نویسی یعنی JavaScript را به زبان ساده به شما آموزش دهیم. اما قبل از شروع، بیایید ببینیم که زبان برنامه نویسی چیست.
زبان برنامه نویسی (Programming language) چیست؟
برنامه نویسی یا کد نویسی مانند حل یک معما است. زبان انگلیسی یا فارسی را در نظر بگیرید. ما از این زبانها برای تبدیل افکار و ایده ها به اعمال و رفتار استفاده می‌کنیم. در برنامه نویسی، هدف معما دقیقا یکسان است، شما محرک رفتارهای مختلفی هستید و منبع آن رفتار یک انسان نیست بلکه یک کامپیوتر است.
زبان برنامه نویسی چیست
یک زبان برنامه نویسی روش ارتباط ما با نرم افزار است. افرادی که از زبان های برنامه نویسی استفاده می‌کنند اغلب به عنوان برنامه نویس، توسعه دهنده یا دولوپر (developer) نامیده می‌شوند.
مواردی که ما با استفاده از یک زبان برنامه نویسی به نرم افزار می‌گوییم می‌تواند این باشد که یک صفحه وب چگونه به نظر برسد، یا اینکه اگر کاربر انسانی اقدام خاصی انجام دهد چه اتفاقی در صفحه رخ دهد.
برنامه نویسی در توسعه وب
بنابراین، هنگامی که به یک طراح وب هدف نهایی داده می‌شود مانند ایجاد یک صفحه وب با این هدر، این فونت، این رنگ ها، این تصاویر و اینکه با کلیک کاربر بر روی یک دکمه چه چیزی در صفحه نمایش داده شود، وظیفه طراح وب این است که از آن ایده اصلی استفاده کرده و آن را به اهداف خرد تبدیل کند و سپس این قطعات را به دستورالعملهایی که کامپیوتر می‌تواند درک کند ترجمه کند.
بطور خلاصه همه این دستورالعمل ها را به ترتیب یا سینتکس صحیح بنویسد.
هر صفحه ای را که بازدید می‌کنید با دنباله ای از دستورالعمل های جداگانه یکی پس از دیگری ساخته شده است. مرورگر شما (Chrome و Firefox و Safari و غیره) یک بازیگر بزرگ در ترجمه کد به چیزی است که می‌توانیم روی صفحه هایمان ببینیم و حتی با آن تعامل برقرار کنیم. بعبارتی کد بدون مرورگر فقط یک فایل متنی است.
HTML و CSS در واقع از لحاظ فنی زبانهای برنامه نویسی نیستند. آنها فقط ساختار صفحه و اطلاعات مربوط به سبک هستند. اما قبل از پرداختن به JavaScript و سایر زبانهای واقعی باید اصول اولیه HTML و CSS را بدانید، زیرا در قسمت فرانت اند هر صفحه وب و اپلیکیشن قرار دارند.
در اوایل دهه ۱۹۹۰، HTML تنها زبان موجود در وب بود. توسعه دهندگان وب مجبور بودند صفحات سایت را با زحمت کدگذاری کنند. از آن زمان چیزهای زیادی تغییر کرده است: اکنون زبان های برنامه نویسی زیادی در دسترس هستند.
آموزش HTML و CSS و JavaScript
بطور خلاصه در بحث مبانی طراحی وب سایت این سه اصطلاح پر کاربرد عبارتند از:
- HTML ساختار پایه سایت ها را ارائه می‌دهد که توسط فناوری های دیگر مانند CSS و JavaScript تقویت و اصلاح می‌شود.
- CSS برای کنترل ارائه، قالب بندی و چیدمان استفاده می‌شود.
- جاوا اسکریپت برای کنترل رفتار عناصر مختلف استفاده می‌شود.
حال بیایید هر کدام را به صورت جداگانه بررسی کنیم و ببینیم چه نقش هایی در یک وبسایت ایفا می‌کنند و سپس نحوه چگونگی قرارگیری آنها در کنار یکدیگر را توضیح خواهیم داد.
![مبانی طراحی وب سایت]()
HTML چیست
HTML چیستHTML بدون در نظر گرفتن پیچیدگی یک سایت یا تعداد فناوری های درگیر، مهمترین بخش هر صفحه وب است. این یک مهارت اساسی مورد نیاز برای هر فرد در حوزه وب است. HTML نقطه شروع برای هر کسی است که می آموزد چگونه محتوا را برای وب ایجاد کند و خوشبختانه به راحتی قابل یادگیری است.
HTML چیست و چه کاربردی دارد؟
HTML مخفف HyperText Markup Language است. زبان نشانه گذاری (Markup language) به این معنی است که به جای استفاده از یک زبان برنامه نویسی برای انجام عملکردها، HTML از تگها برای شناسایی انواع مختلف محتوا و اهداف مورد نظر هر تگ درصفحه وب استفاده می‌کند.
بگذارید منظور را واضح تر بیان کنم. به مقاله زیر نگاهی بیندازید. اگر از شما بخواهم انواع مطالب موجود در صفحه را علامت گذاری کنید، احتمالا خواهید گفت:
در بالای صفحه هدر یا عنوان کلی وجود دارد، بعد از آن یک زیر عنوان وجود دارد، متن و چند تصویر در پایین متن وجود دارد.
زبانهای نشانه گذاری یا مارک آپ به همان روشی کار می‌کنند که شما آنها را علامت گذاری کردید، با این تفاوت که برای انجام این کار از کد استفاده می‌کنند. به طور خاص، این زبان ها از تگ های HTML استفاده می‌کنند که به عنوان عناصر html نیز شناخته می شوند. این تگها دارای اسامی زیادی هستند مثل تگهای هدر، تگ های پاراگراف، تگهای تصویر، متا تگ ها و غیره.
تگ های HTML
هر صفحه وب از مجموعه ای از تگهای HTML تشکیل شده است که نوع خاصی از محتوا را در صفحه نشان می‌دهد. اصطلاحا هر نوع محتوا در صفحه بسته بندی شده است، یعنی درون تگهای HTML قرار دارد.
به عنوان مثال، کلماتی که اکنون می‌خوانید بخشی از یک پاراگراف است. اگر من این صفحه وب را از ابتدا کد نویسی می‌کردم (به جای استفاده از ویرایشگر مخصوص وردپرس)، این پاراگراف را با یک تگ پاراگراف شروع می‌کردم.
آموزش تگ p در HTML
در HTML پاراگراف ها توسط تگ <p> نمایش داده می‌شوند. پاراگراف ها یک بلوک متن مرتبط به هم می‌باشند و هر پاراگراف از پاراگراف قبلی خود توسط یک خط فاصله جدا می‌شود و در سطر بعدی نمایش داده می‌شود.
به منظور ایجاد یک پاراگراف جدید در اسناد HTML از تگ <p> استفاده می‌کنیم:
<p>این یک پاراگراف است</p>
<p>این یک پاراگراف دیگر است</p>
فراموش نکنید که باید بعد از باز شدن تگ <p> آن را حتما با <p/> ببندید.
با استفاده از تگهای HTML می‌توانید عنوان ها را اضافه کنید، پاراگرافها را قالب بندی کنید، فهرست ایجاد کنید، متن را برجسته کنید، کاراکترهای خاص ایجاد کنید، تصویر اضافه کنید، لینک بدهید، جدول بسازید، برخی از طراحی ها را کنترل کنید و موارد دیگر.
برای کسب اطلاعات بیشتر در مورد کد نویسی در HTML توصیه می‌کنم از کلاس ها و منابع رایگان در codecademy استفاده کنید، اما فعلا بیایید به CSS بپردازیم.
CSS چیست
CSS مخفف Cascading Style Sheets است. این زبان برنامه نویسی چگونگی ظاهر شدن عناصر HTML یک وب سایت را در بخش فرانت اند صفحه نشان می‌دهد.
تفاوت html و css چیست
HTML ابزارهای خام مورد نیاز برای ساختار دادن به محتوا در یک وب سایت را فراهم می‌کند. از طرف دیگر، CSS به سبک طراحی این محتوا کمک می‌کند تا همانگونه که مدنظر است برای کاربر نمایش داده شود.
اگر HTML دیوار است، CSS رنگ آن است.
در حالی که HTML ساختار اصلی وب سایت شما بود، CSS همان چیزی است که به کل وب سایت شما سبک می‌دهد. رنگهای جذاب، فونت های جالب و تصاویر پس زمینه همگی بخاطر CSS است.
این زبان بر حالت کلی یک صفحه وب تأثیر می‌گذارد، و آن را به ابزاری فوق العاده قدرتمند تبدیل می‌کند و یک مهارت مهم برای توسعه دهنده وب است. این همان چیزی است که به وب سایت ها اجازه می‌دهد تا با اندازه های مختلف صفحه نمایش و انواع دستگاه ها سازگار شوند.
صفحه HTML (بدون CSS)
برای نشان دادن آنچه که CSS با یک وب سایت انجام می‌دهد به دو تصویر زیر نگاه کنید. تصویر اول پست یک بلاگ است که به صورت Basic HTML نشان داده شده است.
توجه کنید که تمام مطالب وجود دارد اما یک طراحی بصری وجود ندارد. اگر به هر دلیلی CSS در وب سایت لود نشود این تصویر را خواهید دید. حال، همان صفحه وب با CSS اینگونه نمایش داده می‌شود.
صفحه با HTML و CSS
و تصویر دوم همان پست بلاگ با HTML و CSS است.
این تصویر زیباتر نیست؟
به عبارت ساده، CSS فهرستی از قوانینی است که می‌تواند ویژگی های مختلفی را به تگهای HTML اختصاص دهد، چه به یک تگ یا چند تگ، و چه به کل یک یا چند سند.
HTML که در سال ۱۹۹۰ توسعه یافته است برای نمایش اطلاعات با فرمت ظاهری نیست. در ابتدا فقط برای تعریف محتوای ساختاری یک سند بود مثلا مشخص کردن هدر ها و پاراگرافها. HTML از این ویژگی های طراحی جدید پیشی گرفت و CSS در سال ۱۹۹۶ اختراع و منتشر شد: کلیه قالب بندی ها می توانستند از اسناد HTML حذف شوند و در پرونده های CSS جداگانه (با پسوند css) ذخیره شوند.
بنابراین CSS دقیقا چیست؟
این مخفف عبارت Cascading Style Sheet است، و style sheet به خود سند اشاره دارد. هر مرورگر وب دارای شیوه‌ی نامه – فایلی پیش فرض است، بنابراین هر صفحه وب در آنجا تحت تأثیر حداقل یک استایل شیت قرار می‌گیرد.
به عنوان مثال سبک فونت پیش فرض مرورگر من Times New Roman با اندازه ۱۲ است، بنابراین اگر من به یک صفحه وب مراجعه کردم که طراح آن صفحه سبک خود را اعمال نکرده باشد، صفحه وب را با فونت Times New Roman با سایز ۱۲ مشاهده می‌کنم.
بدیهی است که اکثر صفحات وب که از آنها بازدید می‌کنم از فونت Times New Roman با اندازه ۱۲ استفاده نمی‌کنند. دلیل آن است که طراح آن صفحات با یک برگه پیش فرض دارای یک فونت پیش فرض شروع به کار کرده و بنابراین با CSS سفارشی تنظیمات پیش فرض مرورگر من نادیده گرفته می‌شود.
کلمه Cascading به چه معنی است؟
یک آبشار را در نظر بگیرید، همانگونه که آب از آبشار سرازیر می‌شود به همه صخره ها برخورد می‌کند، اما این سنگهای پایین دست هستند که آب را بر روی زمین به جریان می اندازند. به همین روش، آخرین استایل شیت تعریف شده برای مرورگر اولویت دارد.
برای یادگیری ویژگی های کد نویسی در CSS شما را مجددا به کلاس ها و منابع رایگان در codecademy ارجاع می‌دهم. حال کمی در مورد جاوا اسکریپت صحبت کنیم.
جاوا اسکریپت (Javascript) چیست
JavaScript زبانی پیچیده تر از HTML یا CSS است و نسخه بتا آن تا سال ۱۹۹۵ ارائه نشد. امروزه JavaScript توسط همه مرورگرهای مدرن پشتیبانی می‌شود و تقریبا در هر سایتی در وب برای عملکرد قدرتمندتر و پیچیده تر مورد استفاده قرار می‌گیرد.
کاربرد جاوا اسکریپت چیست
جاوا اسکریپت یک زبان برنامه نویسی مبتنی بر منطق است که می‌تواند برای تغییر محتوای وب سایت و ایجاد رفتارهای مختلف در پاسخ به اقدامات کاربر استفاده شود. کاربردهای رایج برای JavaScript شامل کادرهای تأیید، Call to Action یا فراخوان به عمل و افزودن هویت های جدید به اطلاعات موجود است.
به طور خلاصه، JavaScript یک زبان برنامه نویسی است که به توسعه دهندگان وب اجازه می‌دهد سایت های تعاملی طراحی کنند. بیشتر رفتارهای داینامیک یا پویا که در یک صفحه وب مشاهده می‌کنید به لطف JavaScript است که کنترل ها و رفتارهای پیش فرض مرورگر را تقویت می‌کند.
ایجاد کادرهای تأیید
یکی از نمونه های رایج JavaScript کادرهایی است که روی صفحه مرورگر شما ظاهر می‌شوند. به آخرین باری که اطلاعات خود را در یک فرم آنلاین وارد کرده اید فکر کنید و یک کادر برای تأیید ظاهر شده و از شما می خواهد که بر روی OK یا Cancel برای ادامه کار کلیک کنید. این ویژگی به دلیل جاوا اسکریپت امکان پذیر است.
در کد آن دستور if…else را پیدا می‌کنید که به کامپیوتر می‌گوید اگر کاربر روی OK کلیک کرد یک کار را انجام دهد و اگر کاربر روی Cancel کلیک کرد کار دیگری را انجام دهد.
فراخوان به عمل یا CTA کشویی
مثال دیگر کاربرد JavaScript فراخوان به عمل کشویی است. مانند CTA کشویی با عنوان مطالب بیشتر که در پست های بلاگم قرار داده ام، که هنگام اسکرول کردن به سمت پایین در ساید بار صفحه نمایش شما ظاهر می‌شود.
ذخیره اطلاعات جدید
بر طبق تصمیماتی که کاربر هنگام بازدید از صفحه می‌گیرد JavaScript برای اختصاص هویت های جدید به عناصر موجود وب سایت بسیار مفید است. به عنوان مثال، شما در حال ایجاد یک صفحه فرود یا landing page با فرمی هستید که می خواهید با گرفتن اطلاعاتی از بازدید کنندگان وب سایت لید (LEAD) تولد کنید. ممکن است یک رشته از JavaScript اختصاص داده شده به نام کاربر داشته باشید. این رشته ممکن است چیزی شبیه به این باشد:
function updateFirstname() {
let Firstname = prompt(‘First Name’);
}
سپس ، بعد از اینکه بازدید کننده وب سایت نام خود و هر اطلاعات دیگری که در صفحه فرود به آن نیاز دارید را وارد کرده و فرم را ارسال می‌کند، این عمل هویت عنصر نامشخص “Firstname” در کد شما را آپدیت می‌کند. با استفاده از رشته JavaScript زیر چگونگی تشکر از بازدید کننده وب سایت با نام کوچکش را مشخص می‌کنید:
para.textContent = ‘Thanks, ‘ + Firstname + “! You can now download your ebook.”
در رشته جاوا اسکریپت بالا، عنصر “Firstname” به نام (کوچک) بازدید کننده وب سایت اختصاص داده شده است، بنابراین نام اصلی وی را در قسمت فرانت اند صفحه تولید می‌کند. برای یک کاربر به نام کوین، این جمله به صورت زیر است:
Thanks, Kevin! You can now download your ebook.
امنیت، بازی ها و جلوه های ویژه
سایر کاربردهای JavaScript شامل ایجاد رمز عبور امنیتی، فرم های تایید، بازی های تعاملی، انیمیشن ها و جلوه های ویژه است. همچنین از آن برای ساخت برنامه های موبایل و ایجاد برنامه های مبتنی بر سرور استفاده می‌شود. می‌توانید این اسکریپت ها یا قطعه کدهای JavaScript را در هدر یا متن HTML یک سند اضافه کنید.
وب سایت codecademy دوره های آنلاین رایگان جاوا اسکریپت را نیز برگزار می‌کند.
شروع به یادگیری مبانی طراحی وب سایت سخت ترین قسمت برنامه نویسی است، اما هنگامی که اصول را آموختید یادگیری زبان های پیشرفته تر برنامه نویسی آسان تر خواهد شد.
