جلسه دوم : ایجاد قالب HTML و آشنایی با ساختار صفحات وب

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

آشنایی با ساختار صفحات وب

ایجاد یک سند HTML

اولین کاری که باید انجام دهید ایجاد یک سند HTML است یعنی سندی که ساختار صفحه سایتمان را توصیف کند. همانطور که در آموزش های قبل هم گفتیم ، می توانید از ادیتورهای مختلف برای کد نویسی استفاده کنید. ما در این دوره آموزشی از ++ notepad  استفاده می‌کنیم.

گام اول : در دسکتاپ خود پوشه ای به نام mihanwp ایجاد کنید.

گام دوم :  ++notepad را باز کنید!

گام سوم : از منوی file گزینه new را بزنید.

گام چهارم : از قسمت منوی بالا encoding را روی utf-8 قرار دهید.

گام پنجم : در نهایت فایل را در پوشه mihanwp که ایجاد کردید ، با پوسند html. ذخیره کنید.

کار تمام است! به همین راحتی یک سند HTML را ایجاد کردید که می توانید در آن کد نویسی انجام دهید.

مفهومی به نام تگ :

یکی از مهم ترین مفاهیمی که باید آن را به خاطر بسپارید ، مفهومی به نام تگ است. با کمک تگ ها یا همان برچسب ها می توانیم ساختار سایتمان را توصیف کنیم. به عبارتی تگ ها برای کد نویسی بخش های مختلف سایت به ما کمک می‌کنند. مثلا یک تگ برای قراردادن پاراگراف داریم. یک تگ برای قراردادن عکس داریم. یک تگ برای قراردادن عنوان داریم و… هر تگ با یک علامت > شروع میشود و باید یک علامت < به پایان میرسد. کلا دو نوع تگ داریم : 1- تگ های باز 2- تگ های بسته.

تگ های باز

تگ هایی که به صورت تنها هستند و محتوا در داخل همان یک تگ قرار میگیرد. برای مثال تگ img که برای قرار دادن یک عکس به کار میرود.

تگ های بسته

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

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

•  یک فایل html ایجاد کنید.
•  کدهای زیر حفظ کنید.
•  کدها را درون فایل html تان بنویسید و ذخیره کنید.
•  اگر در مراحل به مشکلی برخوردید از طریق کامنت ها سوال کنید.

تا جلسه بعدی خدانگهدارتان…

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

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