ساختار اصلی صفحات وب‌سایت : Html , Css
برای افرادی که تا حالا تجربه برنامه‌نویسی ندارند فکر کردن به فرایند طراحی وب سایت احتمالا ترسناک به نظر برسد.افرادی از دانشگاه هاروارد مثل فیلم شبکه اجتماعی (Social Network) که ساعت‌‌ها با هدفون‌های بزرگ پشت میز مینشینند و با صفحه‌های پر کد سر کله میزنند ٫ اغلب در حال سیگار کشیدن هستند و با قهوه انرژی لازم برای کار را دریافت می‌کنند.
موارد بالا تصورات عموم مردم از برنامه‌نویسان است و اما با وارد شدن به دنیای برنامه‌نویسی متوجه می‌شوید که دنیای برنامه نویسی بسیار بزرگ‌تر از این مواردی ظاهر بالا است.
همه افراد میتوانند وارد دنیای برنامه‌نویسی شوند مانند یادگیری یک زبان جدید مثل فرانسوی و روسی. در معنی کلی برنامه‌نویسی دقیقا مانند صحبت کردن به زبان دیگری است. تفاوت این زبان با زبان های دیگر فقط در شنوده‌های آن هاست. در برنامه‌نویسی شما باید به زبان قابل فهم سیستم‌های کامپیوتری صحبت کنید. زبان های برنامه‌نویسی دقیقا مانند زبان انگلیسی یک سری قوانین و قواعد دارند که به این قواعد در دنیای برنامه‌نویسی Syntax می‌گویند. این syntax ها برای قابل فهم تر کردن دستورات ما برای سیستم‌ها درون زبان‌های برنامه‌نویسی قرار گرفته‌اند.
در این مقاله من قصد دارم همراه شما به زبان بسیار ساده فرایند ایجاد ساختار اصلی هر وب سایت را که از html , css تشکیل می‌شود و منابع آموزشی مناسبی برای یادگیری html , css را باهم بررسی کنیم. با من همراه باشید
زبان برنامه‌نویسی چیست؟
برنامه‌نویسی مانند حل یک پازل است. برای حل یک پازل باید تمامی ایده‌ها و تصورات خود را طبق چارچوب تیکه‌های پازل درکنار یک دیگر قرار دهید تا به هدف نهایی که تکمیل پازل است برسید. در زبان‌های برنامه‌نویسی به جای استفاده از تیکه‌های پازل باید با اصول و قواعد زبان‌های برنامه‌نویسی سعی در حل پازل کنید. با استفاده از زبان‌های برنامه‌نویسی شما میتوانید دستورات خود را به دستورات قابل فهم برای سیستم‌های رایانه‌ای تبدیل کنید.زبان‌های برنامه‌نویسی محیطی برای تعامل بین انسان و سیستم‌های رایانه ایجاد می‌کند. دستوراتی که ما به سیستم‌های رایانه‌ای میدیم میتوانند در جهت ساخت یک صفحه وب با مشخصه‌های دلخواه ما باشند. به این زبان‌ها٫ زبان‌های برنامه‌نویسی تحت وب می‌گویند.
زبان برنامه‌نویسی تحت وب چیست؟
زمانی که برنامه‌نویسان وب شروع به ساخت یک وب سایت می‌کنند، در مرحله اول باید این صفحه‌‌ها را به بخش های کوچکتری مثل header , footer و ....... تقسیم کنند. در مرحله بعد ٫ این بخش ها با استفاده از زبان‌های برنامه‌نویسی تحت وب به کد‌های قابل فهم برای مرورگر تبدیل شوند.
همه صفحات هر وب سایت از مجموعه دستوراتی تشکیل شدند که به مرورگرها اطلاعات لازم برای نحوه ایجاد (Render ) کردن المان های صفحات را می‌دهد. مرورگرها یکی از بازو‌های اصلی تبدیل این کد ها به صفحات وب هستند که در مقاله “مرورگرها چگونه کار می‌کند؟ ” به طور کامل نحوه کارکرد مرورگرها را بررسی کردیم.
ساختار اصلی صفحات وب سایت : HTML
هر صفحه وب سایت بدون در نظر گرفتن تکنولوژی‌های به کاررفته از html , css تشکیل می‌شود.در اوایل سال ۱۹۹۰ html تنها زبان موجود برای ساخت صفحات وب سایت بود. (به لحاظ فنی html زبان برنامه‌نویسی نیست و فقط برای ساخت ساختار صفحات از آن استفاده می‌شود). برنامه‌نویسان وب با زحمت های بسیار صفحات وب سایت را می‌ساختند که کوچک ترین تغییر می توانست باعث تغییر در کل پروژه به صورت صفحه به صفحه بشود.
بدون در نظر در گرفتن تکنولوژی‌های به کار رفته در وب سایت ٫ساختار اصلی همه صفحات وب با html ساخته می‌شود. یادگرفتن html برای تمام برنامه‌نویسان وب لازم است و نقطه آغازین شروع مسیر برنامه‌نویسی فرانت‌اند است.
کلمه html از کلمات HyperText Markup Language تشکیل شده است که در فارسی به ابر متن نشانه گذاری معنا می‌شود.
در Html از tag برای ساخت بخش های صفحه استفاده می‌کنیم. برای مثال برای نوشتن این متن از تگ p که مربوط به رندر کردن پاراگراف است استفاده شده و برای عکس های این مقاله از تگ img استفاده می‌شود.
بیاید مسائلی که بالاتر بررسی کردیم را در مثال عملی ببینیم. به عکس زیر نگاه کنید. بسیار کار راحتی است اگر من از شما بپرسم که بخش‌های مختلف این مقاله را نام گذاری کنید. بخش بالایی که تیتر مقاله در آن قرار دارد header ٫ بخش میانی که بدنه مقاله را در خود جای داده است body و چندین عکس در پایین صفحه که footer نام دارد.
فرایندی که بالا باهم برای بخش بندی یک صفحه انجام دادیم دقیقا وظیفه اصلی html است. همه صفحات وب سایت در دنیای اینترنت دقیقا از همین ساختار پیروی می‌کنند. تمام محتوا صفحه با استفاده از تگ های html که هر کدام خصوصیات مربوط به خود را دارند از یکدیگر جدا شده و در جای درست خود قرار میگیرند.
اگر قصد کسب اطلاعات بیشتر در مورد Html را دارید٫ میتوانید ویدیو زیر را از یوتیوب ببینید.(لطفا فیلتر شکن را روشن کنید)
ساختار اصلی صفحات وب سایت : CSS
بالاتر بررسی کردیم که هر صفحه وب سایت با html ساخته می‌شود اما استفاده از html خام در صفحات هیچ زیبایی و جذابیتی برای کاربر ندارد برای همین css وارد دنیای زبان‌های برنامه‌نیوسی وب می‌شود(به لحاظ فنی css زبان برنامه‌نویسی نیست و فقط برای استایل دادن به صفحات وب سایت استفاده می‌شود).
با استفاده از css شما میتوانید به تگ های Html استایل‌هایی نظیر طول٫ عرض ٫ رنگ فونت ٫ رنگ پس زمنیه و ..... را اعمال کنید و صفحات جذابی بسازید.
کلمه Css از کلمات Cascading Style Sheets که در زبان فارسی به استایل دهی آبشاری معنا می‌شود ساخته شده است. معنی استایل دهی آبشاری یعنی اگر از در ۱۰ جای مختلف به یک المان ثابت در صفحه مثلا یک عکس استایلی اعمال کنید٫ نزدیک ترین یا به معنای دیگر آخرین استایل شما روی این عکس اعمال می‌شود.
برای بررسی نحوه عملکرد css میتوانید به عکس زیر نگاه کنید.
عکس اول٫ صفحه‌ای است که فقط توسط html ایجاد شده است و کد Css ندارد اما عکس دوم صفحه‌ای ایجاد شده با html است که با css استایل دهی شده است.
به طور ساده تر٫ Css مجموعه‌ای از قوانین است که به یک یا چندین تگ اعمال می‌شود و مقادیر مثل فونت و رنگ و ابعاد را برای این تگ یا تگ‌ها اعمال می‌کند.
همانطور که در عکس بالاتر دیدن٫ صفحه‌ای که از html خام ایجاد شده و هیچ css در آن به کار نرفته٫ جذابیتی برای کاربر ندارد اما عکس دوم که در آن css هم به کار رفته٫ به صفحه دلنشین تری تبدیل شده است.
اگر قصد کسب اطلاعات بیشتر در مورد Css را دارید٫ میتوانید ویدیو زیر را از یوتیوب ببینید.(لطفا فیلتر شکن را روشن کنید)
حرف آخر
سخت‌ترین بخش برنامه‌نویسی٫ شروع کردن به یادگیری است اما اگر به مطالب پایه‌ای مسلط شوید بخش های پیشرفته‌تر برنامه‌نویسی برای شما راحت تر می‌شود. در این مقاله ساختار اصلی صفحات وب سایت را با هم بررسی کردیم. اگر قصد دارید که وارد دنیای برنامه‌نویسی فرانت اند شوید٫ مقاله “نقشه راه برنامه نویسی فرانت‌اند” را مطالعه کنید.
اگر در مورد محتوای مطرح شده در مقاله انتقاد یا سوالی دارید از طریق ایمیل [email protected] با من در ارتباط باشید.
با آرزوی موفقیت٫ علی امیری
منابع:
Web Design 101: How HTML, CSS, and JavaScript Work
Powered by Froala Editor