صفحه اصلی / دوره‌های آموزشی / آموزش HTML CSS دوره ای جامع و متفاوت / آشنایی با طراحی وب، ساختار کلی صفحه و محیطهای برنامه نویسی(بخش اول)

آشنایی با طراحی وب، ساختار کلی صفحه و محیطهای برنامه نویسی(بخش اول)

آشنایی با طراحی وب، ساختار کلی صفحه و محیطهای برنامه نویسی
براي خريد اين درس نياز است وارد سايت شويد. در صورت نداشتن حساب کاربري عضو شويد.
رایگان

جلسات دوره


                              
مهدی عباسی
مدرس:

مهدی عباسی

18 سال سابقه برنامه‌نویسی و تدریس برنامه‌نویسی
کسب مقام‌های اول و دوم کشوری در مسابقات برنامه‌نویسی

مهدی عباسی هستم، مسلط به حداقل ۲۰ زبان مطرح برنامه نویسی به صورت پیشرفته، مدیر عامل شرکت آریا نرم افزار و بنیانگذار آکادمی درسمن، مسلط به تدریس دروس تخصصی کاردانی و کارشناسی کامپیوتر، پایگاه داده ها، برنامه نویسی پیشرفته، مبانی برنامه نویسی، مباحث ویژه طراحی وب و .... مشاهده رزومه

مقدمه ای بر طراحی وب با  html و css

در این درس با ساختار کلی صفحه و محیطهای برنامه نویسی برای طراحی وب آشنا می شوید، در ادامه با ما همراه باشید تا شما عزیزان را با انواع وب سایت های پویا و ایستا آشنا کنیم همچنین بهترین و راحت ترین محیط های کد نویسی را به شما معرفی می کنیم، و در پایان یک صفحه را با هم ایجاد می کنیم.

 

آشنایی با انواع وبسایت های ایستا و پویا :

 

وبسایت های ایستا (Static):

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

 

وبسایت های پویا (Dynamic):

وبسایت های پویا برخلاف وبسایت های ایستا دارای محتویات قابل تغییر وتعامل با کاربر هستند،اغلب سایت های امروزه پویا هستند.

 

 

برنامه نویسی   Back End و: Front End

Front End:  برنامه نویسی سمت کاربر گفته می شود که ظاهر سایت را طراحی می کنند.

Back End:  برنامه نویسی سمت سرور گفته می شود که ایجاد ارتباط بین کاربر و سرور را انجام می دهند.

 

زبان های سمت کاربر :

  • Html
  • css
  • javaScript

 

زبان های سمت سرور :

  • c#
  • java
  • python
  • php
  • javaScript

و...

 

معرفی Html,css و کاربرد آنها در طراحی وب:

HTML مخفف عبارت HyperText Markup Language، به معنی زبان نشانه گذاری ابرمتن است.

HTML یک زبان نشانه گذاری برای ایجاد یک صفحه وب است. صفحات وب معمولاً در یک مرورگر وب مشاهده می شوند. آنها می توانند شامل متن ، پیوندها ، تصاویر و حتی صدا و فیلم باشند. از HTML برای علامت گذاری و توصیف هر یک از این نوع محتوا استفاده می شود تا مرورگر وب بتواند آنها را به درستی نمایش دهد.

 

CSS مخفف عبارت Cascading Style Sheet، به معنی شیوه نامه آبشاری است.

 با استفاده از دستورات CSS می توان تمامی خصوصیات ظاهری صفحه وبسایت را تعیین کرد. بنابراین، از کدهای Html برای ساختن یک سند وب استفاده می شود و با دستورات CSS مشخص می کنید هر عنصر چه خصوصیات ظاهری داشته باشد.

 

تفاوت html و css

 

معرفی ابزار های مورد نیاز برای یادگیری HTML , CSS

بهترین و راحت ترین نرم افزار های موجود برای کدنویسی صفحات وب

نرم افزار ویژوال استودیو کدنرم افزار bracketsنرم افزار نوت پد پلاس پلاس

دراین دوره، برای نوشتن کد ها از نرم افزار Visual Studio Code استفاده کرده ایم،پیشنهاد ما به شما این است که از این نرم افزار استفاده کنید.

برای راحت تر شدن کار شما، فایل نصبی Visual Studio Code را همراه با ویدئو های این درس برایتان قرار دادیم که با دانلود این درس به فایل نصبی نیز دسترسی پیدا خواهید کرد.

 

 

مرورگر های مناسب برای اجرای صفحات وب

مرورگر های مطرح دنیا

با توجه به تصاویر بالا بهترین مرورگری که می توانید به راحتی کدهای خود را در آن اجرا کنید بی شک مرورگر chrome,firefox می باشد.

 

مفاهیم پایه در HTML

 

با انتخاب یکی از برنامه های ویرایشگر متن، به ایجاد صفحه وب می پردازیم. برای ایجاد صفحات وب از تگ های HTML استفاده می کنیم.

 تگ ها برای ایجاد عناصر مانند پاراگراف ها، پیوندها و...در صفحات وب استفاده می شوند و باعث می شوند که مرورگر تشخیص دهد هر بخش از چه نوع عنصری تشکیل شده است. به عنوان مثال برای ایجاد پاراگراف از تگ p استفاده میکنیم :

 

<p/> این یک پاراگراف است. <p>

 

 

 

 تگ ها به دودسته تقسیم می شوند:

  • تگ های بلند
  • تگ های کوتاه

تگ های بلند، تگ هایی هستند که محتویات درون خود را تحت تاثیر قرار می دهند.این نوع تگ ها دارای دو بخش شروع وپایان هستند.شکل دستوری تگ های بلند :

 

<نام تگ  / > محتوا <نام تگ>

<p  / > محتوا <p>

 

تگ های کوتاه، تگ هایی هستند که عمل خاصی را انجام می دهند و شروع و پایان ندارند.شکل دستوری تگ های کوتاه :

<نام تگ  / >

<br  / >

 

نظرات دانشجویان

کاربر درسمن
مهرشاد پورقاسم

سلام خسته نبشاید دوره خریداری شده لینکها برا ی دانلود ارور 404 میده انگار اکسپایر شده برای دانلود نشان داده نمیشود از خود سایت هم لطفا برسی نمایید با تشکر

پشتیبانی 1
پشتیبانی 1

سلام مهرشاد عزیز، خیر اینطور نیست مشکل از سمت سرور بود که به زودی رفع شد و می توانید فایل های خریداری شده را دانلود کنید.

کاربر درسمن
متینه الهی

سلام من دوره رو ثبت نام کردم اما وقتی فایل های دانلود شده رو باز میکنم ارور میده و خالیه مرورگر هم بروزرسانی کردم

پشتیبانی 1
پشتیبانی 1

سلام وقت شما بخیر، لطفا اسکرین شات از مشکل خود را به دایرکت پیج اینستاگرام درسمن ارسال کنید تا همکارانم در اسرع وقت رسیدگی کنند.

کاربر درسمن
پارسا

سلام خدمت کادر خوب اکادمی درسمن میخواستم بپرسم که تفاوت این دوره با دوره https://darsman.com/courses/learn-site-template-design چیه؟؟؟

پشتیبانی 1
پشتیبانی 1

سلام وقتتون بخیر و نیکی، اون دوره طراحی قالب سایت هست، شما ابتدا باید این دوره html css را بگذرانید و سپس وارد دوره پروژه محور طراحی قالب سایت شوید، در واقع آموخته های خود را در عمل تست می کنید.

کاربر درسمن
Sideswipe

از نرم افزار IDM استفاده میکنم، سرعت اینترنتم 4 mb/s هستش. هیچ امکانی وجود نداره که بشه آنلاین تماشا کرد ویدیو ها رو؟

پشتیبانی 1
پشتیبانی 1

درس های رایگان را می شود آنلاین تماشا کرد ولی درس هایی که قابل خرید هستند متاسفانه خیر.

کاربر درسمن
Sideswipe

سلام خسته نباشید، سرعت دانلود بسیار پایین هستش امکان تماشای آنلاین هم نیست. چکار کنم؟

پشتیبانی 1
پشتیبانی 1

سلام وقتتون بخیر، شما می توانید برای افزایش سرعت دانلود از نرم افزار IDM استفاده کنید.

نمایش بیشتر

نظر شما در تصمیم دیگران اثرگذار است.

لطفا برای همراهان درسمن و بهتر شدن دوره نظر خود را بنویسید.

برای ارسال نظر نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.
ثبت نام

218