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

مقدمه ای بر طراحی وب با  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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<نام تگ  / >

<br  / >