طراحی صفحات وب با زبان HTML
HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).
Html چیست ؟
یک زبان نشانه گذاری فرامتنی که کارش توصیف وب است .همچنین از تگ (tg) استفاده می کند ازقبیل آن می توان صفحات را ایجاد نمود .
نکته : HTML یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری است .
اصول طراحی سایت را تعریف کنید و موارد آن را بیان کنید ؟
در روند برنامه نویسی یک سایت عواملی زیادی وجود دارد که رعایت آنها در بالا بردن کیفیت سایت تاثیر بسزای دارد مهمترین عوامل عبارت است از:
اندازه فایل :هرچه اندازه فایل کمتر باشد سرعت بار گذاری صفحات بیشتر می شود
استفاده از متودهای جدید : یک طراحی وب باید از جدید ترین متود ها و استانداردهای برنامه نویسی وب آگاه باشد تابتواند در سرعت ، امنیت و .. کاریی آن ماثر باشد .
سازگاری با انواع مرورگرها : ساز گاری با انواع مرورگرها مثل Internet Explorer ، مرورگر اونت(avan ) ، مرورگر وب اپرا (Opera) و فایر فکس و ..
سازگاری با دقت صفحه نمایشهای مختلف ( (resolution : تنظیمات شخحصی نباید بدون اجاز کاربر تغیر کند .
قالب و طرح واحد : همه صفحات وب یک فرمت ، قالب ، طرح داشته باشد .
پر رنگ کردن کلمات کلیدی : ازقبیل خروج از سایت و خبر ها و .......
تمایز بین متن عادی و لینک : لینکها با رنگ دیگر ، خط زیر و بولد ، ایتلیک و ...
توضیح برای تصاویر : برای شناخت وب سایت توسط موتور جستجو گر برای کاربران به کار می رود مثال تصویر ک.هرنگ .
انتخاب عنوان مناسب : جهت پیدا کردن موتور جستجو
ارتباط بین صفحات : چنانچه بین صفحات شما زیاد باشد چنان طراحی کنید که کاربر با حداقل تعداد کلیک به صفحات مورد نظر برود و در هر صفحه اتصال مستقیم به صفحه اصلی به صفحات مرتبط دیگر وجود داشته باشد .
ارتباط با سایر سایتهای مرتبط : ارتباط دادن به دیگر سایتهای مرتبط
توجه 1: یک طراح وب باید بتواند با اصول و قواعد مشخص یک سایت پر بیننده و جذاب را طراحی کند . هرچه نسبت رعایت استانداردها بیشتر باشد جذابیت سایت بیشتر می باشد .
توجه 2: اولین گام در طراحی وب سایت رسم نقشه سایت است و پس از آن تصمیم گیری در مورد شکل ظاهری و ساختار گرافیکی و رنگهی صفحات است
توجه 3 : هر رنگ تاثیر روانی مشخصی در ذهن بیننده دارد که به کمک این تاثیر و هدف سایت و طراحی بهتر اقدام نمود به عبارت دیگر باید از روانشناسی رنگها اطلاع داشته باشیم .
غالب صفحات وب چگونه است ؟
فایل Html یک فایل متنی ساده است این فایل شامل برچسب های متعددی می باشد که اقلب با پسوند Htm یا Html ذخیره شده است .
چگونه یک صفحه وب سایت ساده طراحی کنیم ؟
برنامه Notepad از دستور زیر اجرا می کنیم
srat >>program>> Accessories>> Notepad
بعد از باز کردن برنامه Notepad اسکریپتی را که میخواهید بر روی کامپیوتر خود تست کنید را در این برنامه قرار دهید (بوسیله کپی -پاست ) و سپس به منوی FIle رفته و سپس بر روی Save As کلیک کنید یه نام برای این اسکریپت انتخاب کنید ولی دقت کنید که حتما به پسوند Htm یا پسوند Html ذخیره کنید (svae ) برای مثال .htm
و بعد فایلی را که ذخیره کرده اید را باز کرده و بدین صورت میتوانید نتیجه اسکریپت مورد نظر را مشاهده نمایید....این روش میتواند در بیشتر مواقع برای شما مفید باشد.( برای استاندارد شدن در گزینه En coding گزینه utf-& را انتخاب می کنیم )
چگونه یک سایت را مشاهده کنیم ؟
برای مشاهده صفحات وب از نرم افزارهای مرور گر استفاده می شود یکی از پر استفاده ترین نرم افزارها Internet Explorer است که در درون سیستم عامل می باشد .
ساختار یک برنامه در Html چگونه است ؟
<html>
<head>
عنوان <title>title of page </title>
</head>
<body>
پارگراف) )This is my first home page.<b> This text is bold </b>
</body>
آخرین برچسب در فایل شما </html>
مثال : فایل را تحت عنوان "mypage.htm"ذخیره کنید.
مرورگر اینترنت خود را باز کنید، از منوی فایل گزینه "open" یا "open page" را انتخاب کنید. یک جعبه گفتگو ظاهر خواهد شد .گزینه "brows" یا "choose file" را انتخاب کنید و در مکانی که فایل HTML خود را ساخته اید قرار گیرید. آن را انتخاب کنید و روی گزینه "open" کلیک کنید.حالا شما یک آدرس در جعبه گفتگوی خود مشاهده خواهید کرد. بعنوان مثال "C:\mypage.html" گزینه ok را کلیک کنید و مرورگر صفحه را به شما نشان خواهد داد.( http://www.html.ir/)
صفحه وبی را طراحی کنید که هنگام اجرا توسط مرورگر نام و نام خانوادگی تان را در نوار عنوان نمایش دهد ؟
<html>
<head>
عنوان <title>title of page </title>
</head>
<body>
پارگراف) )This is my first home page.<b> This text is bold </b>
</body>
</html>
برای نوشتن توضیحات در زبان چگونه عمل کنیم ؟
HTML
توضیحات در HTML
برچسب توضیحات برای وارد کردن توضیحات در منبع کد HTML استفاده می شود.توضیحات توسط مرورگرها نادیده گرفته می شوند. شما می توانید از توضیحات برای تشریح کد های خود استفاده کنید که می تواند به شما هنگامی که در آینده کد منبع خود را ویرایش می کنید کمک کند.
<!--This is a comment-->
توجه کنید که شما بعد از باز کردن براکت به علامت تعجب نیاز دارید اما قبل از بستن نیاز نداری
پاراگراف ها
پاراگراف ها با برچسب <p> معرفی می شوند.HTML بطور خودکار فضای خالی اضافی به قبل و بعد از یک پاراگراف اضافه می کند.
<p> This is a paragraph </p>
<p> This is another paragraph </p>
برچسب <br> چه نقشی در html نشان می دهد ؟
پرش به خط بعد
برچسب <br> هنگامی استفاده می شود که بخواهیم یک خط را پایان دهیم اما نمی خواهیم یک پاراگراف جدید را آغاز کنیم.برچسب <br> شما را از هر جا که قرار دارید به یک خط پایین تر می برد. برچسب <br> یک برچسب تکی است و هیچ برچسب پایانی ندارد.
سر تیتر ها
سر تیترها با برچسب های <h1>تا<h6>معرفی می شوند.<h1>بیانگر بزرگترین سرتیتر و<h6> بیانگر کوچکترین سر تیتر است. HTML بطور خودکار فضای خالی اضافی به قبل و بعد از سر تیترها اضافه می کند.
<h1> This is a heading </h1> <h2> This is a heading </h2> <h3> This is a heading </h3> <h4> This is a heading </h4> <h5> This is a heading </h5> <h6> This is a heading </h6> برچسب font در HTML با کد های HTML مثل این شما می توانیداندازه و نوع خروجی مرورگر را تعیین کنید: <p> <font size="2" face="Verdana"> This is a paragraph. </font> </p> <p> <font size="3" face="Times"> This is another paragraph. </font> </p>
