دوره آموزشی آنلاین و رایگان طراحی وبسایت بخش چهارم

2
دوره آموزشی طراحی رایگان وبسایت
دوره آموزشی طراحی رایگان وبسایت

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

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

خوب جلسه چهارم رو شروع میکنیم ، برای شروع شما نیاز به یک فولدر دارید ، یک فولدر در هر جای کامپیوترتان که دوست دارید ایجاد کنید. نام این فولدر را my-first-webpage بگذارید ، نرم افزار ادیتور متن رو همانطور که در جلسه قبل توضیح دادیم باز کنید (یاد آوری : ادیتور متن می تواند نرم افزار notepad ، یا wordpad باشد.) پس از باز کردن نرم افزار ادیتور متن ، متن زیر را داخل آن کپی و پیست کنید برای دانلود کد ها روی تصویر زیر کلیک کنید:

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

پس از دانلود کد ها ، فایل رو در داخل پوشه ای که قبلا بنام my-first-webpage ساخته اید بنام my-first-webpage.html با پسوند .Html ذخیره نمایید ، قبل از ذخیره تنظیمات را براساس تصویر زیر انجام دهید ، Save file type را روی All file و Encoding  را روی UTF8 قرار دهید و Save رو بزنید ، تنظیمات در تصویر زیر نشان داده شده :

به قسمت های با رنگ سبز توجه کنید
به قسمت های با رنگ سبز توجه کنید

خوب پس از ساختن فایل مورد نظر با فرمت HTML روی فایل کلیک کنید یا آنرا با مرورگرتان باز کنید. این اولین صفحه وبسایت شما است. شما این تصویر رو در مرورگرتان مشاهده می کنید؟ این اولین صفحه وب شما است:

your web page
your web page

موارد مهم در فایل های ایجاد شده ، همیشه سعی کنید فایل هایتان را با Encoding ، فرمت UTF8 ذخیره نمایید ، ذخیره با این اینکدینگ به کاربران با زبان های مختلف کمک میکند وبسایت شما را با فرمت مناسب مشاهده کنند. بطور مثال یک فرد ژاپنی که زبان انگلیسی رو در کامپیوترشون ندارند اگر شما از UTF8 استفاده کنید، در مشاهده با سایت شما دچار مشکل نمی شوند.

خوب حالا وقت آشنایی با دستور های موجود در متن کد ها است ، در متن کد ها همانطور که در تصویر زیر مشاهده می کنید ، دو مورد که توجه ما رو جلب می کنه ، متون بین تگ های Title و Heder و Bodyهست.

طراحی وب
طراحی وب

حالا با تگ های P ، h1 آشنا خواهیم شد ، تیترها : تیترها عناصر بلاک و بسته شونده اند و سلسله مراتب مخصوص بخود را دارند واین تگ شامل h1  تا h6 است. از h1  برای مهم ترین تیتر از h2 برای تیتر کم  ارزش تر و از h3 برای تیتر کم ارزش تر از h2 و به همین ترتیب تا  h6 می توان نام برد.
تگ <p>

این تگ نشانگر پاراگراف های است ، از تگ P برای درج یک بلوک متنی استفاده می شود ، این بدان معنی است که شما باید متن هایتان را در داخل این تگ قرار دهید.

 ایجاد لیست در صفحه اینترنتی

my-first-webpage
my-first-webpage2

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

کد های ساخت لیست
کد های ساخت لیست برای دانلود کد ها روی تصویر کلیک کنید

همچون تمرین یک این کد ها را هم در یک فایل با تنظیمات ذکر شده در بالا با فرمت Html ذخیره نمایید و فایل نهایی را در مرورگر مشاهده کنید ، نتیجه نهایی همان تصویر     my-first-webpage2 است.

خوب برای جلسه چهارم کافی است ، دوستان حتما ما رو از نظراتتون بهرمند کنید.

 

شما می توانید جذاب ترین اخبار و مقالات دنیای تکنولوژی را در کانال تلگرام زوم تک دنبال کنید. برای عضویت در این کانال، اینجا کلیک کنید.

2 نظرات

ارسال نظر

Time limit is exhausted. Please reload CAPTCHA.