آموزش طراحی سایت

معرفی دوره

در دوره آموزش طراحی سایت با HTML و CSSآکادمی ماهان سرور مطالب به شکل ساده‌ای بیان شده است و تمامی نکات آموزشی را از ابتدا تا انتها در قالب جملات مختصر و مثال‌های کاربردی به شما آموزش خواهیم داد. نیازی نیست نگران پرسش‌هایی که در ذهنتان است باشید. اگر گام به گام با این آموزش‌ها پیش بیایید، به تمامی سوالات شما در زمینه طراحی وب سایت جواب داده خواهد شد.

در دوره آموزش طراحی سایت با HTML و CSS ابتدا محیط کاری طراحی سایت را آماده می کنیم. سپس مبانی HTML و CSS را به شما آموزش می دهیم. پس از آن در قالب یک پروژه ساده، روند کاری طراحی سایت با HTML و CSS را به شما نشان می دهیم. در گام نهایی توضیحاتی درباره واکنش گرایییا وب سایت های Responsive ارائه می دهیم و پروژه آموزش طراحی سایت را با تکنیک های آموزش داده شده، واکنش گرا یا ریسپانسیو می کنیم.

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

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

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

ساختن اولین صفحه وب سایت

برای یادگیری طراحی سایت با HTML و CSS به دو ابزار اصلی نیاز داریم. ابزار اول مرورگر وب یا Web Browser است. ابزار دوم نیز ویرایشگر متن یا Text Editor است. در دوره آموزش طراحی سایت ، مرورگر Google Chrome و ویرایشگر متن Visual Studio Code دو ابزار اصلی برای یادگیری طراحی سایت با HTML و CSS هستند. برای دریافت VSCode می توانید به این آدرس بروید و آن را دانلود کرده و سپس نصب کنید.

حال گام به گام دستورات زیر را اجرا کنید.

• ابتدا VSCode را اجرا کنید.
• در دسکتاپ یا یکی از درایوهای کامپیوتر خود یک فولدر به نام My Website درست کنید.
• فولدر My Website را به درون VSCode بکشید و رها کنید.

همانطور که در تصویر زیر مشاهده می کنید، فولدر My Website در سایدبار سمت چپ VSCode و در زبانه Explore قرار گرفته است. در کنار فولدر My Website در سایدبار، گزینه ای به نام New File قرار گرفته است. روی این گزینه کلیک کنید و یک فایل با نام index.html ایجاد کنید.

پیش از ادامه کار، ذکر چند نکته ضروری است.

1. تمامی وب سایتهای دنیا از ساده‌ترین تا پیشرفته ترین وب سایت، از یک زبان مشترک برای ایجاد ساختار اصلی صفحات خود استفاده می‌کنند، که به آن زبان Hypertext Markup Language یا به اختصار HTML می‌گویند.
2. اگر یک صفحه وب را فقط با HTML ایجاد کنیم، یک صفحه بسیار ساده و ابتدایی خواهد بود. برای زیباتر کردن صفحه وب باید از زبانی شبیه HTML به نام CSS یا Cascading Style Sheets استفاده کنیم، که در این دوره آموزش داده خواهد شد.
3. HTML و CSS در کنار یک زبان دیگر به نام JavaScript شالوده اصلی تمامی وب سایتها هستند. در نتیجه برای یادگیری طراحی سایت باید حتما آنها را یاد بگیرید. برای یادگیری جاوااسکریپت می توانید دوره آموزش مقدماتی جاوااسکریپت از آکادمی ماهان سرور را مشاهده کنید.

به ادامه آموزش طراحی سایت با HTML و CSS باز می گردیم.

در سایدبار VSCode روی آخرین گزینه کلیک کنید. در این قسمت می توانید Extension های مختلف VSCode را نصب کنید تا کارهای شما راحت تر و سریع تر انجام شود. یکی از این Extension های کاربردی Live Server است. نام آن را در نوار جستجو تایپ کنید و سپس آن را نصب کنید و VSCode را ببندید و مجددا راه اندازی کنید.

به فایل index.html در VSCode برگردید و درون این فایل علامت تعجب ! را تایپ کرده و سپس کلید اینتر را فشار دهید. با این کار به صورت اتوماتیک کدی مشابه نمونه کد شماره ۱ در فایل index.html نوشته می شود.

خط ۱ : این عبارت به مرورگر اعلام می‌کند که این صفحه با استاندارد HTML5 نوشته شده است.

خط ۲ و خط ۱۲ : به عبارت خط ۲ تگ باز HTML می‌گویند. به عبارت خط ۱۲ نیز تگ بسته HTML می‌گویند. در واقع تگ باز و بسته HTML اولین تگ و آخرین تگ در یک صفحه وب هستند و وجود این دو تگ یک سند HTML یا صفحه وب را ایجاد می‌کند.

خط ۳ و خط ۹ : در خط ۳ تگ باز head و در خط ۹ تگ باز body را می‌بینید.head و body به ترتیب سر و بدنه یک صفحه وب را ایجاد می‌کنند. تگ head شامل تمام محتوایی می‌شود که بیشتر برای ارتباط با مرورگر وب و همچنین موتورهای جستجو استفاده می‌شود. به عنوان مثال بین تگ باز و بسته head، در خط هفتم تگ باز و بسته Title را مشاهده می‌کنید که محتوای آن عبارتست از

تگ head حتما باید پیش از شروع تگ body بسته شود. مثلا در این مثال تگ head در خط هشتم بسته شده است و تگ body در خط نهم شروع شده است.

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

با توجه به توضیحات بالا لطفا به تصویر زیر دقت کنید. این تصویر ساختار اصلی یک صفحه وب را نمایش می‌دهد. همچنین به تفاوت ظاهری تگ‌های باز و بسته دقت کنید.

المان HTML یا HTML Element شامل تگ باز بسته و محتوای بین آن دو است.

ویژگی‌های HTML یا HTML Attributes

تگ باز html در خط دوم و تگ های meta در خط ۴ و ۵ و ۶ با اندکی تفاوت نسبت به دیگر تگ‌ها دیده می‌شوند. این تفاوت مربوط به ویژگی‌ ها یا Attribute هایی است که به آنها اضافه کرده‌ایم.

• یک ویژگی HTML یا همان HTML Attribute حاوی اطلاعاتی اضافی درباره یک تگ است.
• ویژگی HTML درون تگ باز یا Opening Tag تعریف می‌شود.
• ویژگی HTML شامل دو قسمت Name و Value است. مثلا در خط دوم نام ویژگی lang است و مقدار ویژگی en است.

در تصویر زیر ساختار Attribute ها در HTML ترسیم شده است. در این مثال تگ img که شامل دو ویژگی src و alt است را مشاهده میکنید.

دو نکته کوچک

• همیشه تگها را ببندید.
• برخی از تگ ها دارای تگ بسته نیستند. مانند تگ img ، تگ br، تگ meta و … که به مرور با این تگها بیشتر آشنا خواهید شد.

پیش از اینکه به سراغ درس بعدی برویم، روی فایل index.html در ویرایشگر متن راست کلیک کرده و گزینه open with live server را انتخاب کنید. همانطور که مشاهده می کنید عنوان صفحه عبارت Document است. اگر محتوای تگ title را تغییر دهیم، عنوان صفحه نیز تغییر خواهد کرد.

تگ meta و موتورهای جستجو

یکی از تگهای مهمی که در قسمت head صفحه وب معرفی می شود تگ meta است. اگر به نمونه کد شماره ۱ در درس قبلی دقت کرده باشید، مشاهده می کنید که سه تگ meta در قسمت head صفحه وب تعریف شده است. مهمترین آنها تگ meta زیر است.

این ویژگی ها در تگ متا برای امکانات واکنش گرایی با ریسپانسیو بودن وب سایت به کار میرود که در درس های بعدی به صورت کامل تری بررسی خواهند شد.

عمده ترین کار تگ مت به ارتباط صفحه وب با موتورهای جستجو بر می گردد. همانطور که در درس قبل نیز مشاهده کردید، تگ title که در قسمت head صفحه وب تعریف میشود، عنوان اصلی صفحه وب را در بر دارد. اما اگر بخواهیم برای عنوان صفحه وب خود توضیحات بیشتری ارائه بدهیم که در موتورهای جستجو به نمایش در بیاید، باید از تگ meta مانند زیر استفاده کنیم.