ساختار اصلی صفحات وب‌سایت : Html , Css

447
در این مقاله من قصد دارم همراه شما به زبان بسیار ساده فرایند ایجاد ساختار اصلی هر وب سایت را که از html , css تشکیل می‌شود و منابع آموزشی مناسبی برای یادگیری 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

447

آماده به چالش کشیدن خودتان هستید ?