آموزش html و css همراه با مثال عملی – قسمت اول

امروز داشتم به این فکر میکردم که اولین مطلب وبسایت را به چه موضوعی اختصاص بدم؛ در واقع من این وبسایت را با این هدف راه اندازی کردم که بتوانم با ارائه آموزش ها در این وبسایت دانش خودم را افزایش بدم. بنابراین تصمیم گرفتم از مباحث ساده و ابتدایی شروع کنم تا دوستان علاقه مند به فعالیت در زمینه طراحی و توسعه وبسایت بتوانند از این مطالب استفاده کنند. ساده ترین قدم در طراحی و توسعه وبسایت داشتن دانش ابتدایی نسبت به ساختار صفحات هست. پس اولین دوره وبسایت را اختصاص به آموزش Html و CSS خواهیم داد.

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

در این دوره آموزشی به هر دو مبحث Html و Css به صورت همزمان خواهیم پرداخت و مثالهایی را با استفاده از این دو در طول آموزش ایجاد میکنم و در نهایت یک پروژه تمرینی کامل را اجرا خواهیم کرد.

قبل از شروع دوره بهتر هست نسبت به این دو نکنولوژی دانش کوتاهی داشته باشیم. html مخفف کلمات (HyperText Markup Language) به معنی زبان نشانه گذاری ابرمتن هست و برای ایجاد ساختار صفحات وب استفاده می‌شود؛ css مخفف کلمات (Cascading Style Sheets) به معنی شیوه نامه آبشاری هست و برای سبک دهی و نحوه‌ی چیدمان ساختار صفحات وب استفاده می‌شود.

می‌توانید برای درک بهتر این دو تکنولوژی به صفحات معرفی Html در ویکی پدیا و معرفی Css در ویکی پدیا مراجعه کنید.

معرفی دوره

این دوره بر اساس سرفصل های زیر اجرا خواهد شد:

  • معرفی دوره و معرفی ابزارهای مورد نیاز
  • ساخت اولین صفحه وب
  • آموزش Html و html5 ابتدایی
  • آموزش Css و Css3 ابتدایی
    • تمرین : ایجاد یک صفحه وب ساده
  • تعیین موقعیت محتوا
  • فن چاپ یا تایپوگرافی
  • تنظیم پس زمینه و گرادیان
  • انواع لیست ها و استفاده از آنها
  • انواع رسانه و استفاده از آنها
    • تمرین : ساخت یک فرم ثبت نام
  • سازماندهی داده ها با استفاده جداول
  • کار با وب فونت ها و فونت آیکن ها
    • تمرین : ایجاد یک صفحه پروفایل کاربر
  • مثال : پیاده سازی صفحات کامل یک وبلاگ ساده

 

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

معرفی ابزارهای موردنیاز

برای تولید یک صفحه وب می‌توانید از ویرایشگر متن notepad استفاده نمایید که به صورت پیشفرض بر روی سیستم های عامل های ویندوز نصب می‌باشد.

اگر نرم افزار notepad رو باز کنید خیلی زود متوجه سادگی آن خواهید شد و هیچ ابزاری رو برای کدنویسی راحت‌تر و سریعتر و همچنین گزارش خطاهای احتمالی به ما ارائه نخواهد داد . بنابراین در اینجا به معرفی چند نرم افزار کاملاً رایگان خواهیم پرداخت که میتوانید از این نرم افزارها برای کدنویسی بهتر و استفاده کنید.

معرفی نرم افزار ویرایشگر متن notepad++
نرم افزار notepad++

notepad plus plus (notepad++)

نرم افزار notepad++ یک ویرایشگر بسیار قدرتمند و سبک مخصوص سیستم عامل های ویندوزی است که برای ویرایش انواع فایل و فرمت ها میتونید از آن استفاده کنید. بعضی از ویژگی های این نرم افزار :

  • کاملاً رایگان و متن باز
  • قابلیت شخصی سازی (تغییر ظاهر و زبان نرم افزار)
  • قابلیت چند سربرگی (اجرای چند سند همزمان در یک پنجره)
  • تفکیک رنگی و برجسته سازی نحوی زیان های برنامه نویسی (Syntax highlighting)
  • پشتیبانی بیش از ۵۰ زبان برنامه نویسی
  • تکمیل خودکار دستورات
  • تنظیم خودکار دستورنویسی آبشاری برای نظم بیشتر کدها

 

ویرایشگر متن Komodo Edit
ویرایشگر متن Komodo Edit

Komodo Edit

این ویرایشگر کاملاً رایگان و قدرتمند برای سیستم عامل های ویندوز, لینوکس و مک ارائه شده است. این نرم افزار یک نسخه حرفه ای تر و البته غیر رایگان نیز تحت عنوان Komodo IDE دارد. اگر شما از چند زبان برنامه نویسی استفاده میکنید به عنوان مثال javascript(جاوا اسکریپت)، php(پی اچ پی)، ruby(روبی)، python(پایتون)، perl(پرل) و … این نرم افزار کاملاً از آنها پشتیبانی میکند. بعضی از ویژگی های این نرم افزار :

  • این نسخه از نرم افزار رایگان است
  • قابلیت شخصی سازی دارد
  • قابلیت چند سربرگی (اجرای چند سند همزمان در یک پنجره)
  • تفکیک رنگی و برجسته سازی نحوی زیان های برنامه نویسی (Syntax highlighting)
  • پشتیبانی از زبان های مختلف
  • تکمیل خودکار دستورات
  • تنظیم خودکار دستورنویسی آبشاری برای نظم بیشتر کدها
  • مدیریت پروژه
  • پشتیبانی از یونیکدهای مختلف
  • پشتیبانی از افزوه ها و ماکرو ها

 

ویرایشگر متن Atom
ویرایشگر متن Atom

ATOM

ATOM یک ویرایشگر چند سکویی قدرتمند و بسیار مفید از Github است که شما میتوانید در Windows, Linux و OS X از آن استفاده کنید. Atom این امکان را به شما می دهد که پکیج های مختلفی را بر روی آن نصب کنید. این نرم افزار کاملاً رایگان و قابل انعطاف است. بعضی از ویژگی های Atom شامل:

  • سیستم یکپارچه مدیریت و پشتیبانی بسته ها
  • تکمیل خودکار هوشمند
  • خطایابی قدرتمند
  • پشتیبانی خط فرمان
  • ویرایش خودکار تغییرات در سراسر پروژه
  • جستجوی و دسترسی سریع فایل ها
  • پشتیبانی از چندین پانل در یک صفحه (امکان باز کردن چندین فایل از پروژه در کنار هم)

 

نرم افزار های دیگری نیز وجود دارند که می‌توانید با توجه به نیاز های خودتان یکی از آنها را انتخاب استفاده کنید.

ارسال پاسخ