در جلسات قبل مطالبی را در مورد مفاهیم ابتدایی طراحی وبسایت مطرح کردیم ، در این جلسه سعی خواهیم کرد شما را بصورت عملی با طراحی اولین صفحه ی اینترنتیتان آشنا کنیم ، به امید خدا در این جلسه شما اولین صفحه وبتان را طراحی خواهید کرد. راستی دوستان گرامی حتما نظراتتان را در مورد مباحث مطرح شده در قسمت نظرات مطرح کنید تا آموزش ها براساس نیاز های شما ادامه پیدا کند.
خوب جلسه چهارم رو شروع میکنیم ، برای شروع شما نیاز به یک فولدر دارید ، یک فولدر در هر جای کامپیوترتان که دوست دارید ایجاد کنید. نام این فولدر را my-first-webpage بگذارید ، نرم افزار ادیتور متن رو همانطور که در جلسه قبل توضیح دادیم باز کنید (یاد آوری : ادیتور متن می تواند نرم افزار notepad ، یا wordpad باشد.) پس از باز کردن نرم افزار ادیتور متن ، متن زیر را داخل آن کپی و پیست کنید برای دانلود کد ها روی تصویر زیر کلیک کنید:
پس از دانلود کد ها ، فایل رو در داخل پوشه ای که قبلا بنام my-first-webpage ساخته اید بنام my-first-webpage.html با پسوند .Html ذخیره نمایید ، قبل از ذخیره تنظیمات را براساس تصویر زیر انجام دهید ، Save file type را روی All file و Encoding را روی UTF8 قرار دهید و Save رو بزنید ، تنظیمات در تصویر زیر نشان داده شده :
خوب پس از ساختن فایل مورد نظر با فرمت HTML روی فایل کلیک کنید یا آنرا با مرورگرتان باز کنید. این اولین صفحه وبسایت شما است. شما این تصویر رو در مرورگرتان مشاهده می کنید؟ این اولین صفحه وب شما است:
موارد مهم در فایل های ایجاد شده ، همیشه سعی کنید فایل هایتان را با Encoding ، فرمت UTF8 ذخیره نمایید ، ذخیره با این اینکدینگ به کاربران با زبان های مختلف کمک میکند وبسایت شما را با فرمت مناسب مشاهده کنند. بطور مثال یک فرد ژاپنی که زبان انگلیسی رو در کامپیوترشون ندارند اگر شما از UTF8 استفاده کنید، در مشاهده با سایت شما دچار مشکل نمی شوند.
خوب حالا وقت آشنایی با دستور های موجود در متن کد ها است ، در متن کد ها همانطور که در تصویر زیر مشاهده می کنید ، دو مورد که توجه ما رو جلب می کنه ، متون بین تگ های Title و Heder و Bodyهست.
حالا با تگ های P ، h1 آشنا خواهیم شد ، تیترها : تیترها عناصر بلاك و بسته شونده اند و سلسله مراتب مخصوص بخود را دارند واین تگ شامل h1 تا h6 است. از h1 برای مهم ترین تیتر از h2 برای تیتر كم ارزش تر و از h3 برای تیتر كم ارزش تر از h2 و به همین ترتیب تا h6 می توان نام برد.
تگ <p>
این تگ نشانگر پاراگراف های است ، از تگ P برای درج یک بلوک متنی استفاده می شود ، این بدان معنی است که شما باید متن هایتان را در داخل این تگ قرار دهید.
ایجاد لیست در صفحه اینترنتی
در این قسمت می خواهیم ایجاد لیست در صفحه اینترنتی رو براتون آموزش بدیم ، نمونه لیست رو در تصویر بالا مشاهده می کنید ، برای ایجاد لیست نمونه کد های مورد نیاز رو در ادامه براتون نشان خواهیم داد.
همچون تمرین یک این کد ها را هم در یک فایل با تنظیمات ذکر شده در بالا با فرمت Html ذخیره نمایید و فایل نهایی را در مرورگر مشاهده کنید ، نتیجه نهایی همان تصویر my-first-webpage2 است.
خوب برای جلسه چهارم کافی است ، دوستان حتما ما رو از نظراتتون بهرمند کنید.
دوره آموزشي مفيدي هست تشكر مي كنم از زحماتتون اميدوارم دوره هاي ديگري رو هم در وبسايت برگزار نماييد.