جلسه ۱۴: ساخت قالب HTML بصورت عملی

خب سلام رفقا! راستش بعد از یه مدت طولانی که غیبمون زد، دوباره برگشتیم که بریم سراغ آموزش طراحی سایت. این دفعه تصمیم گرفتیم علاوه بر دوره صفر تا صد طراحی سایت، یه دوره رایگان هم کنارش داشته باشیم. حالا نگید چرا رایگان؟ 😀 قبول دارم که کیفیتش قد اون دوره اصلی نمیشه، ولی بهت قول میدم که آخرش دستت میاد قضیه از چه قراره.

پس معطل نکنیم و بریم سراغ جلسه ۱۴. قراره با هم یه قالب HTML بسازیم؛ هم قشنگ باشه، هم جامع، ولی مهم‌تر از همه ساده باشه که تو راحت بفهمی داری چیکار می‌کنی. آماده‌ای؟ بزن بریم.

نصب ویرایشگر متن

قبل از هر کاری باید یه نرم‌افزار ویرایشگر متن نصب کنی. حالا نگو مگه با Notepad خود ویندوز نمیشه؟ چرا میشه، ولی خیلی حال نمیده. من بهت پیشنهاد می‌کنم:

• اگه ویندوز داری، برو سراغ Notepad++. سبکه، سریعه و مخصوص همین کاراست.

• اگه کاربر لینوکس یا مک هستی، Atom گزینه خوبیه.

خلاصه فرقی نداره کدومو انتخاب کنی، فقط یه ادیتور درست‌وحسابی داشته باش که کارمون راه بیفته.

ساخت فایل index.html

حالا یه فایل بساز به اسم index.html. یه نکته مهم بگم که یادت نره: هاست تو، همیشه فایل index.html رو به عنوان صفحه اصلی سایتت لود می‌کنه. یعنی اولین چیزی که کاربر می‌بینه همینه. برای همینم اسمشو گذاشتیم index. پس این اسم رو الکی انتخاب نکردیم، یه دلیل داشت.

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

Hello World

حالا مرورگرتو باز کن و این فایل رو بکش و بندازش توش (drag & drop). اگه همه‌چی درست باشه، عبارت Hello World برات نمایش داده میشه.

تبریک میگم! حالا تو یه طراح وبی. 😀 خب… راستش نه هنوز. یه کوچولو صبر کن، هنوز کار خاصی نکردیم. این فقط یه گرم‌کردن بود.

چیدن اسکلت اصلی قالب

اینجاست که کار جدی میشه. برای اینکه واقعاً یه قالب HTML داشته باشیم، باید کد زیر رو تو همون فایل بذاری:

html

<html><head><title>Page Title</title></head><body>Hello World</body></html>

حالا اون قسمت Page Title رو می‌بینی؟ اونجا رو می‌تونی عنوان دلخواه صفحه‌تو بنویسی. مثلاً بنویس: میهن وردپرس. این همون چیزیه که بالای تب مرورگر نشون داده میشه.

فایلو ذخیره کن و دوباره با مرورگر بازش کن. می‌بینی که این دفعه کدهای HTML واقعاً اجرا میشن و مرورگر داره اونا رو می‌خونه. تازه داریم وارد دنیای واقعی میشیم.

یه نکته ظاهرا ترسناک

بذار همینجا یه چیزی رو صاف بگم که خیالت راحت شه: HTML و CSS اصلاً زبان برنامه‌نویسی نیستن! اینا زبان نشانه‌گذاری و استایل‌نویسی‌ان. یعنی چی؟ یعنی تو با اینا داری به مرورگر میگی همین. پس اگه از کلمه «برنامه‌نویسی» می‌ترسیدی، دیگه لازم نیست. اونقدرام که فکر می‌کنی سخت نیست.

جمع‌بندی

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

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

موفق باشی رفیق. 🙌

تیم تولید محتوا

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