جلسه دوم : آشنایی با ساختار صفحات وب و ساخت قالب HTML
جلسه دوم : آشنایی با ساختار صفحات وب و ساخت قالب HTML
از آنجایی که همه شما می دانید ، در جلسه قبل به شما زبان برنامه نویسی HTML را کامل توضیح دادم و اینجا در جلسه دوم می خواهیم با یک دیگر بریم که ساختار صفحه های وب سایت و اینگونه چطور می توانید یک قالب HTML ساخت را صفر تا صد آموزش دهیم (پس وارد قسمت عملی طراحی سایت می شویم)
آشنایی با ساختار صفحات وب
ساختار وب سایت ها به اینگونه است که شما یک سند در سایت خود کامپیوتر شخصی خود ایجاد می کنید و همانطور که در جلسه های قبلی آموزش طراحی سایت گفتیم نیاز است که با یک برنامه یا ادیتور های کد نویسی این کار را انجام دهید و ما در این دوره از برنامه ساده NotePad ++ استفاده می کنیم و شما از هر برنامه ای که می خواهید استفاده کنید ، تفاوتی برای یک کد نویس نباید داشته باشد که با چه برنامه ای کد نویسی انجام دهد.
مرحله اول : در دسکتاب خود فولدری به نام MihanAcademy یا هر چه دوست دارید ایجاد کنید
مرحله دوم : برنامه کد نویسی خود را باز کنید مثلآ من از ++ NotePad استفاده می کنم و آن را باز می کنم
مرحله سوم : از منو برنامه بر روی دکمه File و گزینه New کلیک کنید تا یک فایل جدید بسازی
مرحله چهارم : از قسمت بالا در منو برنامه بر روی دکمه Encoding کلیک کنید و آن را روی UTF-8 قرار دهید
مرحله پنجم : در آخر فایل را در پوشه ساخته شده یعنی Mihanacademy قرار دهید و فایل را با پسوند html. ذخیره کنید
اینجا دیگر کار تمام است و شما به همین راحتی یک سند HTML ساختید که می توانید در آن شروع به کد نویسی کنید و هر آنچه دوست دارید اینجا قرار دهید.
چیزی به نام تگ
یکی از مهم ترین بخش های که باید به خاطر بسپارید ، مفهومی به نام تگ می باشد که با کمک تگ ها یا همان برچسب ها شما می توانید ساختار سایت خود را توصیف کنید و به عبارتی تگ ها برای کد نویسی بخش های مختلف سایت می باشد و به ما کمک می کند تا مثلآ یک تصویر یا یک متن یا یک پاراگراف را در سایت خود قرار دهیم و نگران نباشید در ادامه تگ های باز و تگ های بسته را به شما نمایش می دهیم ، تگ های که برای استفاده در سایت خود داریم با یک علامت > شروع یا آغاز می شود و با علامت < به پایان می رسد.
تگ های باز
تگ های که به عنوان تگ های باز می باشند به صورت تنها هستند و محتوا در داخل همان یک تگ قرار داده می شود و برای مثال اگر که شما بخواهید یک تصویر را در سایت خود نمایش دهید باید از تگ img استفاده کنید که به صورت زیر می باشد
<img src="mihanacademy.png">
به این نوع خط کد نویسی بالا که مشاهده می کنید گفته می شود تگ های باز که این فقط یک نمونه اش می باشد
تگ های بسته
تگ های که به صورت باز و بسته می باشند را می توانیم بگوییم تگ های جفت هستند و محتوا بین این دو تگ قرار داده می شود و برای مثال من اینجا از تگ h1 برای قرار دادن یک تیتر هدینگ استفاده می کنم و یا مثلا برای نوشتن یک متن پاراگراف از تگ P استفاده می کنیم مانند کد زیر که نمایش داده ایم
<p>به میهن آکادمی خوش آمدید</p>
خب ، اوکی تا اینجا فهمیدیم که چطور می توانیم یک سند یا یک فایل html ایجاد کنیم و با مفهوم تگ هم آشنایی کامل داریم و خب حالا میرسیم به ساختار اصلی هر صفحه ای وب سایت دارد که تمام وب سایت های که در اینترنت وجود دارد شامل این ساختار می باشد و در کد زیر این ساختار را برای شما مشخص کرده ایم و پیشنهاد میهن آکادمی این است که تک تک موارد کد های زیر را به ذهن خود بسپارید و در جلسه بعد تمامی این موارد را به شما توضیح خواهم داد ، اصلا تمرین جلسه بعد این باشد :
- یک فایل html بسازید
- کد های زیر را در آن قرار دهید (کپی و پیس نکنید ها کلک 😍)
- کدها را درون فایل html خود بنویسید و ذخیره کنید
- اگر در مراحل به مشکلی بر خوردید از طریق نظرات به ما ارسال کنید
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>میهن آکادمی</title>
</head>
<body>
<h1>جلسه اول طراحی سایت</h1>
<p>به میهن آکادمی خوش آمدید</p>
</body>
</html>
این از جلسه اول کد نویسی در میهن آکادمی ، این کد ها را خوب تمرین کنید تا در خاطر شما بماند و تا جلسه بعدی ، خدا یار و یاورتان باشد ❤
موفق و پیروز باشید
