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

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

آشنایی با کامنت

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

و اینک در تصویر زیر خروجی رو مشاهده کنید در کامنت بالا توضیح داده شده است که چرا از تگ  em استفاده شده است:

از کامنت در HTML ، جاوااسکریپت و Css استفاده می شود نحوه استفاده از کامنت در این موارد بصورت زیر است :

در HTML از دستور استفاده می کنند

<!– Beginn Navigation –>

درCss از دستور زیر Css

/*  comment  */

و در جاوااسکریپت از دستور زیر:

/* comment  */

استفاده بهتری از کامنت هم می توانید بکنید ، بطور مثال زمانی که می خواهید ، بخشی از کد های صفحه تون نمایش داده نشه ؛ هم می تونید از کامنت استفاده کنید ،البته بعدا می تونید اون بخش رو تغییر بدید و قابل نمایش باشه.

برای این منظور می تونید از دستور <li> استفاده بکنید ، یعنی بعدا برای قابل نمایش بودن کد ها از این کد استفاده بکنید در این صورت برنامه نویس های دیگر هم منظور شما رو خواهند فهمید ، برای روشن شدن مطلب کد زیر رو مشاهده کنید.

خوب بریم سراغ بحث بعدی ؛ معمولا تمامی وبسایت ها دارای صفحات مختلفی هستند ، ولی نقطه اشتراک آنها وجود یک صفحه اصلی و مادر است بنام صفحه نخست ، ما در برنامه نویسی وب آنرا صفحه  index و یا Default می نامیم.

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

خوب حالا بگذارید مروری بر درس های گذشته داشته باشیم متن کد ها رو که دانلود کردید در فایل تکست با فرمت .HTML و با اینکدینگ UTF8 ذخیره کنید و فایل نهایی رو در مرورگرتون باز کنید تا خروجی کدهای بالا رو مشاهده کنید من دیگه تصویر خروجی رو اینجا قرار نمیدم . خوب در کد های بالا مطمئنم چشمتان ابتدا به کدهای آشنایی همچون h  و p  میافته اگر موضوعش رو فراموش کردید جلسه قبل رو مطالعه کنید. اگر به خروجی این کد ها در مرورگرتون توجه کنید در پایین صفحه متن آبی رنگی رو که آدرس ایمیل هم توش هست رو مشاهده می کنید ؛ ما در کد هامون از تگ <a> برای این مورد استفاده کردیم نحوه استفاده از کد مربوطه رو در تصویر کد ها در بالا مشاهده میکنید ، اگر در خروجی کد ها در مرورگرتون روی ایمیل کلیک کنید ، برنامه مدیریت ایمیل یعنی outlook اگر در کامپیوترتون نصب باشه باز خواهد شد تا شما به ایمیل مورد نظر نامه ارسال کنید.

خوب نکته دوم استفاده از تصاویر در متن ها است ، صفحات اینترنتی خشک و خالی بدون عکس ما رو به یاد صفحات اینترنتی قدیمی میندازه  حالا وقت یاد گرفتن قرار دادن تصویر در صفحات اینترنتی است ، برای این کار ما از تگ img استفاده می کنیم ، به کمک این تگ میتونیم به صفحات ایتترنتی مون تصویر هم اضافه کنیم. اگر به کدهای بالا توجه کنید این تگ به همراه نشان های زیر استفاده شده که تک تک اون ها رو براتون شرح خواهیم داد:

<img  src=”divers-circle.jpg”  width=”200″ height=”162″ alt=”A circle of divers practice their skills” />

در تگ بالا src  برای آدرس عکس ، alt  برای توضیح تصویر ، width عرض تصویر به پیکسل و height ارتفاع تصویر به پیکسل استفاده شده است .
به این نکته توجه کنید  که آدرس از جایی که صفحه شما قرار دارد مورد استفاده مرورگر است یعنی اگر تصویر در همان فولدری که صفحه شما قرار دارد باشد به طریق بالا آدرس می دهیم اگر در جای دیگر یا آدرس دیگری باشد باید آن آدرس را در کد ها لحاظ کنیم. توضیحات عکس همان alt در صفحه اینترنتی نشان داده نمیشود ، این مورد تنها برای استفاده موتور های جستجو استفاده می گردد ، شما با alt یا همان توضیحات عکس موتور های جستجو را در مورد عکسی که در سایت قرار داده این راهنمایی می کنید تا در نتایج جستجوی تصویر به کاربران کمک کند. و وجود آن در کدهای نوشته شده شما الزامی است و در حقیقت یک قانون است !

این جلسه تمام شد ، مفید بود؟ حتما نظراتتون رو در مورد این دوره در بخش نظرات بفرمایید .