Transcript وب سایت چیست - مرکز فناوری اطلاعات و ارتباطات

‫کارگاه آموزش ی‬
‫طراحی صفحات وب‬
‫مرکز فناوری اطالعات و ارتباطات دانشگاه الزهرا‬
‫تیر‪1392‬‬
‫وب سایت چیست ؟‬
‫• سایت یا وب‌سایت (وب‌گاه‪ ،‬تارگاه ‪ ،‬تارنما )مجموعه‌ای ‌از صفحات وب است که دارای یک دامنه اینترنتی است‬
‫تصویر ‌و فیلم‪ ،‬روی آن ها ارائه‬
‫‌‬
‫در قالب متن‪ ،‬صدا‪،‬‬
‫‌و به صورت مجموعه ي ساختاريافته اي ‌از داده ها ‌‬
‫می‌شود ‌و روی شبکه اینترنت قر ‌ار می‌گیرد‪.‬‬
‫ا‬
‫معمول به صورت ‪ HTML‬نوشته می‌شود ‌و همواره با استفاده ‌از پروتکل ‪ HTTP‬می‌توان‬
‫‌‬
‫• این صفحات‬
‫به آن دسترس ی پیدا کرد‪.‬‬
‫کاربر منتقل می‌کند تا این اطالعات ‌از طریق‬
‫• این پروتکل اطالعات را از ‪ WEBSERVER‬به ‪‌ Browser‬‬
‫کاربر نمایش داده شوند‪.‬‬
‫‪ URL‬برای ‌‬
‫طراحی سایت را می توان به انواع مختلفی دسته بندی کرد‪ .‬اما به طور‌ کلی‬
‫وب سایت ها به دو صورت داینامیک )‪ (Dynamic‬و استاتیک‬
‫)‪ )Static‬طراحی می شوند‪.‬‬
‫تصاویر ثابت می باشد وقابلیت ذخیره پایگاه داده ‪،‬‬
‫‌‬
‫ی متو ‌ن ‌و‬
‫در حد اطالع رسانی ‌و ایجاد لینک ‌و مشاهده یک سر ‌‬
‫این گونه وب سایت ها ‌‬
‫تغییر اطالعات آن توسط شخص ‌و با نرم‌افزارهای ویرایش صورت می‌گیرد‪.‬‬
‫اعمال محسباتی‪ ،‬عضوگیری‌ و ‪ ...‬را ندارد‪‌ .‬‬
‫در طراحی سایتهای ثابت استفاده می‌شود بنابراین سرعت بارگذاری‌ (‪ )Loading‬بالیی دارند‪ .‬عالوه براین کاهش حجم‬
‫حجم کمتری‌ ‌از کد ‌‬
‫بهتر‬
‫دیگر سبب ‌‬
‫بیشتر سایت توسط ‪ search Engine‬ها می‌شود ‌از یک س ‌و و کاهش زمان بارگذاری‌ ‌از سوی‌ ‌‬
‫‌‬
‫کدها که باعث خوانایی‬
‫امتیاز دهی موتورهای جستج ‌و یا همان "رنکینگ" می شود‪.‬‬
‫‌‬
‫شدن وضعیت آنها ‌از لحاظ‬
‫ی زیبا می‌شود‪.‬‬
‫در این نوع ‌از سایتها توسط افراد عادی عالوه بر افزایش امنیت سبب بهره مندی ‌از گرافیک ‌و ظاهر ‌‬
‫تغییر ‌‬
‫عدم امکان ایجاد ‌‬
‫ا‬
‫کار این‬
‫تغییر می‌کند ‪.‬اصل ‌‬
‫دایما با کاربران اطالعات دادوستد می‌کند ‌و اطالعاتش به سرعت ‌‬
‫وب سایتی که ‌‬
‫نوع وب سایت ها روی کدنویس ی ‌و برنامه نویس ی می باشد‪.‬‬
‫در واقع این کد ها به صورت پشت پرده پردازش می شوند ‌و خروجی ‪ html‬را نمایش می دهند‪.‬‬
‫نیاز متفاوت باشد اما عمدتا ‌از زبانهای ‪،ASP‬‬
‫زبان برنامه نویس ی وب سایتهای پویا میتواند براساس ‌‬
‫‪ ASP.Net‬و ‪ Php‬استفاده می‌شود‪.‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫نیاز است‪:‬‬
‫زیر آمده ‌‬
‫کار با ‪HTML‬به موارد ‌‬
‫برای شروع ‌‬
‫ایشگر متن برای ایجاد ‌و ویرایش صفحات وب می توان از ‪ Microsoft FrontPage ، NotePad‬و ‪ Macromedia Dreamweaver‬و ‪ ...‬استفاده کرد ‪ .‬اما این‬
‫ویر ‌‬
‫در ویندوز‌ وجود دارد ‌و نرم افزارهایی مانند ‪‌ Microsoft Office Word‬و امثال آن برای نوشتن‬
‫نظر داشت که نرم افزار ‪WordPad‬که ‌‬
‫در ‌‬
‫نکته را باید ‌‬
‫در هنگام ذخیره کردن متن این نرم افزارها کدهایی را به آن اضافه می کنند‪ .‬نرم افزار ‪Notepad‬را می توان ‌از طریق‬
‫کدهای ‪HTML‬مناسب نیستند چون‌ ‌‬
‫فشار دادن دکمه‪ Enter‬پیدا کرد‪.‬‬
‫در کادر ‪‌ Open‬و ‌‬
‫در قسمت ‪Accessories‬یا ‌از طریق فرمان ‪Run‬با تایپ ‪‌ notepad‬‬
‫ی استارت ‌‬
‫منو ‌‬
‫مرورگر وب ‪.‬می توان از ‪Microsoft Internet Explorer‬استفاده کرد که با ویندوز‌ نصب می شود یا از ‪‌ Opera, Mozilla Firefox‬و نرم‬
‫‌‬
‫دارند‪.‬‬
‫وجود‬
‫اینترنت‬
‫در‬
‫‌‬
‫دانلود‬
‫برای‬
‫رایگان‬
‫صورت‬
‫به‬
‫اغلب‬
‫که‬
‫مشابه‬
‫افزارهای‬
‫سایر مرورگرها‬
‫مرورگر خاص است ‌و با ‌‬
‫‌‬
‫مرورگر آزمایش کرد‪ .‬زیرا در ‪HTML‬قسمتهایی وجود دارد که مختص به یک‬
‫‌‬
‫بهتر است صفحاتی که نوشته می شود با چند‬
‫‌‬
‫کار نمی کند‪.‬‬
‫‌‬
‫نیاز به اتصال به اینترنت‬
‫سرور باشد‪ .‬البته برای استفاده از ‪‌ HTML‬‬
‫‌‬
‫فضایی برای ذخیره کردن فایلها که می تواند جایی روی هارد دیسک‪ ،‬یک فالپی دیسک یا یک‬
‫کرد‪.‬‬
‫‪HTML‬استفاده‬
‫از‬
‫کامپیوتر‬
‫‌‬
‫در‬
‫‌‬
‫وب‬
‫مرورگر‬
‫‌‬
‫یک‬
‫‌از‬
‫استفاده‬
‫با‬
‫توان‬
‫می‬
‫‌و‬
‫نیست‬
‫در‬
‫برای ذخیره کردن فایلی که با ‪Notepad‬نوشته شده کافی است ‌از منوی‌ ‪File‬گزینه ‪Save As‬را انتخاب کرده ‌و مسیری‌ را برای ذخیره فایل انتخاب کنیم ‌و ‌‬
‫آخر هم دکمه ‪Save‬را کلیک کنیم‪.‬‬
‫در ‌‬
‫در پایین پنجره ‪Save As‬نام فایل را با پسوند ‪html‬بنویسیم‪‌ .‬‬
‫کادر ‪‌ File Name‬‬
‫‪‬‬
‫عبارت ‪HTML‬مخفف )‪ (Hyper Text Markup Language‬است ‪Html .‬زبان استاندارد طراحی‬
‫صفحات وب است‪.‬‬
‫‪‬‬
‫عنصر‬
‫‌‬
‫هر‬
‫تيتر ‪ ،‬عکس ‪ ،‬جدول‌ و ‪ ...‬را قر ‌ار داد ‪ ،‬که برای ‌‬
‫عناصر ‌از قبيل متن ‪‌ ،‬‬
‫‌‬
‫در يک صفحه ‪HTML‬می توان انواع‬
‫‌‬
‫بايد ‌از تگ مربوط به آن استفاده کرد‪.‬‬
‫‪‬‬
‫دستورعمل‌های این زبان‪ ،‬برچسب (‪ )Tag‬نام دارند که محتوای یک صفحه وب‪ ،‬با آن‌ها‪ ،‬نشانه‌گذاری‌ شده ‌و‬
‫بدین‌ترتیب‪ ،‬نحوه‌ نمایش آن صفحه برای مرورگرهای وب‪ ،‬توصیف می‌شود‪.‬‬
‫‪‬‬
‫هر بخش چه ‌نوع‬
‫مرورگر بتواند تشخيص دهد ‌‬
‫‌‬
‫کار می روند ‌و باعث می شوند که‬
‫تگ های ‪HTML‬برای نشانه گذاری‌ محتويات صفحات به ‌‬
‫ی است‪.‬‬
‫عنصر ‌‬
‫‪‬‬
‫استاندارد به این‬
‫‌‬
‫هر تگ ‪ ،HTML‬يک بخش ابتدايی ‌و يک بخش انتهايی دارد که هم نام بوده توسط د ‌و کاراکتر < و > محاط می شوند به صورت‬
‫‌‬
‫کار می روند ‪ < :‬تگ انتها ‪ > /‬محتويات < تگ ابتدا>‬
‫صورت به ‌‬
‫مثال ‪:‬‬
‫‪‬‬
‫> ‪<label > ..... < /label‬‬
‫مقدار دهی کرد ‪.‬‬
‫‌‬
‫در درون تگ ابتدايي معرفی ‌و‬
‫هر يک ‌از اين خواص را می توان ‌‬
‫هر تگ دارای مجموعه ‌از خواص است که ويژگی های مختلف آنها را تعيین می کند ‪‌ .‬‬
‫‌‬
‫محتویات‬
‫مثال ‪:‬‬
‫‪‬‬
‫>‪< /table‬محتویات > "‪< table border = "1‬‬
‫تگ های ‪HTML‬نسبت به حروف کوچک ‌و بزرگ حساس نیستند مثال >‪ <b‬معادل >‪ <B‬است‪.‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫>‪<HTML‬‬
‫>‪<HEAD‬‬
‫>‪<TITLE‬‬
‫>‪<BODY‬‬
‫محدوده اصلی صفحه‬
‫سر عنوان صفحه‬
‫عنوان صفحه‬
‫بدنه صفحه‬
‫قالب پایه ای یک فایل ‪HTML‬به این صورت است‪:‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪ </title‬عنوان صفحه >‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫‪….‬‬
‫بدنه اصلی صفحه محتویات قابل نمایش توسط مرورگر ‪The content of the page‬‬
‫……‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪‬‬
‫در ‌بر گیرنده ااطالعات کلی درباره سند وب است که اين اطالعات ‪Meta-Information‬به معنای (اطالعات‬
‫تگ >‪‌ <head‬‬
‫مرورگر نمايش داده نمی شوند ‪.‬براساس استاندارد ‪HTML‬فقط تگ های ز ‌یر‬
‫‌‬
‫درباره) ناميده می شود ‪.‬کليه اطالعات درون تگ توسط‬
‫در بخش ‪head‬هستند ‪:‬‬
‫قابل استفاده ‌‬
‫> ‪< base > , < link > , < meta > , < title > , < style > , < script‬‬
‫‪‬‬
‫نوار عنوان نمايش می دهد را مشخص می کند‬
‫در ‌‬
‫باز کردن صفحه ‌‬
‫در هنگام ‌‬
‫مرورگر ‌‬
‫‌‬
‫> ‪< title‬عنوان صفحه را که‬
‫>‪ </title‬عنوان صفحه >‪<title‬‬
‫‪< meta > ‬اطالعات کلی درباره مطالب درون صفحه وب ‪ ،‬توضيحات ضروری‌ ‌و واژه های کليدی مرتبط با موضوع صفحه جهت‬
‫استفاده موتورهای جستج ‌و را شامل می شود ‪.‬‬
‫تعيين کليدواژه ها برای موتورهای جستجو ‪:‬‬‫>‪< meta name ="keywords" content=“profile,staff,Alzahra university" /‬‬
‫‪-‬‬
‫تعيين يک توضيح درباره مطالب صفحه ‪:‬‬
‫>‪< meta name ="discription" content=“This is the Home page of Dr. Hasani…" /‬‬
‫در صفحه ازقبيل نوشته ها ‪ ،‬عکس ها ‪ ،‬لينک ها‬
‫اين تگ بدنه اصلی صفحه ‪HTML‬را معرفی می کند ‌و شامل کليه محتويات قابل نمايش ‌‬
‫باز ‌و بسته‬
‫مرورگر به عنوان خروجی نمايش داده می شوند ‌و کدهای محتويات خروجی بین تگ ‌‬
‫‌‬
‫و ‪ ...‬است ‪ .‬فقط محتويات اين قسمت توسط‬
‫>‪<body‬تعريف می شوند ‪ .‬این برچسب می تواند دارای جزئیات گرافیکی صفحه باشد‪:‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪Background‬آدرس عکس يا فایلی که به عنوان پس زمينه صفحه مورد استفاده قر ‌ار می گیرد را تعيین می کند ‪.‬‬
‫‪bgcolor‬می توان توسط اين خاصيت يک رنگ را به عنوان رنگ پس زمينه صفحه قر ‌ار داد ‪.‬‬
‫‪text‬رنگ پيش فرض نوشته های درون صفحه را تعيین می کند که به صورت استاندارد مشکی است ‪.‬‬
‫‪link‬مشخص کننده رنگ کليه لينک های صفحه است ‪.‬‬
‫يکبار کليک شده اند را مشخص می کند ‌و به اين منظور‌ استفاده می شود که کار ‌بر متوجه‬
‫در صفحه که قب ‌ال ‌‬
‫‪vlink‬رنگ لينک هايی ‌‬
‫شود آن لينک را قب ‌ال مشاهده کرده است ‪.‬‬
‫در صفحه است ‪.‬‬
‫‪alink‬مشخص کننده رنگ لينک های فعال ‌‬
‫‪ Dir‬که می تواند ‪(rtl‬راست به چپ) و ‪(ltr‬چپ به راست)باشد‪.‬‬
‫مثال‬
‫>" ‪<body background="pic/image1.jpg" bgcolor=#009933 dir="rtl‬‬
‫‪...‬‬
‫>‪</body‬‬
‫از مهمترین برچسب ها در ‪HTML‬برچسب هایی هستند که سر تیتر ها ‪ ،‬پاراگراف ها و پرش به خط بعد را معرفی می کنند‪.‬‬
‫‪ ‬سر تیتر ها‬
‫تیتر است‪.‬‬
‫سر ‌‬
‫بیانگر کوچکترین ‌‬
‫‌‬
‫بیانگر بزرگترین سرتیتر و >‪<h6‬‬
‫‌‬
‫سر تیترها با برچسب های >‪ <h1‬تا >‪ <h6‬معرفی می شوند >‪<h1‬‬
‫‌‬
‫سر تیترها اضافه می کند‪.‬‬
‫خودکار فضای خالی اضافی به قبل ‌و بعد ‌از ‌‬
‫‌‬
‫‪HTML‬بطور‌‬
‫مثال >‪<h1> This is a heading </h1‬‬
‫‪ ‬پاراگراف ها‬
‫پاراگراف ها با برچسب >‪ <p‬معرفی می شوند‪HTML .‬بطور خودکار فضای خالی اضافی به قبل و بعد از یک پاراگراف اضافه می کند‪.‬‬
‫>‪<p> This is a paragraph </p‬‬
‫‪ ‬پرش به خط بعد >‪<br‬‬
‫هر جا که قر ‌ار دهیم به‬
‫آغاز کنیم‪.‬برچسب >‪<br‬را ‌از ‌‬
‫هنگامی استفاده می شود که بخواهیم یک خط را پایان دهیم اما نمی خواهیم یک پاراگراف جدید را ‌‬
‫یک خط پایین ‌تر می برد‪ .‬برچسب >‪<br‬یک برچسب تکی است ‌و هیچ برچسب پایانی ندارد‪.‬‬
‫همچنین ‪...‬‬
‫‪ ‬توضیحات در ‪<!-- > HTML‬‬
‫توضیحات توسط مرورگرها نادیده گرفته می شوند و برای وارد کردن توضیحات در بین کد استفاده می شوند‪ .‬می توان از توضیحات برای تشریح کد ها استفاده‬
‫کرد که در آینده هنگام ویرایش صفحات کمک کننده است‪.‬‬
‫‪‬‬
‫خط افقی >‪<hr‬‬
‫>‪<!-- This is a comment --‬‬
‫>‪<hr width="250" size="20" color="yellow" noshade‬‬
‫‪‬‬
‫>‪<B‬این تگ باعث می شود کلماتی که بین این تگ و تگ پایانی آن قرار دارند به صورت پر رنگ و بولد (‪ ) Bold‬دیده شوند‪.‬‬
‫>‪</b‬‬
‫‪‬‬
‫زیرخط (‪Underline):‬‬
‫‪‬‬
‫حروف کج ‪)Italic):‬‬
‫متنی که اینجا قرار بگیرد به صورت بولد نمایش داده می شود‬
‫>‪<b‬‬
‫>‪ </u‬این متن با زیر خط مشاهده می شود>‪<u‬‬
‫>‪ </i‬این متن به صورت مورب دیده می شود >‪<i‬‬
‫این مثال را در نظر بگیرید‪:‬‬
‫>‪ </u></i></b‬این متن پر رنگ‪ ،‬کج و دارای زیرخط است >‪<b><i><u‬‬
‫‪‬‬
‫این نتیجه را به ما می دهد‪:‬‬
‫این متن پر رنگ‪ ،‬کج و دارای زیرخط است‬
‫‪‬‬
‫اندازه فونت را می توان با دستور زیر تعیین کرد‪:‬‬
‫>‪ </font‬متنی که می خواهیم اندازه آنرا تعیین کنیم >"‪<font size="x‬‬
‫‪‬‬
‫برای تغییر رنگ متنها نیز می توانیم به روش زیر عمل کنیم‪ ،‬با این‬
‫فرمان ‪:‬‬
‫>‪ </font‬متن مورد نظر >"‪<font color="red‬‬
‫‪‬‬
‫سطر به سلول‌ های داده‬
‫هر ‌‬
‫هر جدول‌ به سطرها( بوسیله برچسب <‪‌ )<tr‬و ‌‬
‫جداول‌ بوسیله برچسب >‪<table‬معرفی می شوند‪‌ .‬‬
‫ی متن ‪ ،‬عکس ‪ ،‬لیست ها ‪ ،‬پاراگراف ها ‪ ،‬فرم ها ‪ ،‬خط‬
‫تقسیم می شود (بوسیله برچسب >‪.)<td‬یک سلو ‌ل داده می تواند حاو ‌‬
‫های افقی ‌و جدول‌ ها و‪ ...‬باشد‪.‬‬
‫>"‪<table border="1‬‬
‫>‪<tr‬‬
‫>‪<td>row1,cel1</td‬‬
‫>‪<td>row1,cel2</td‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬
‫>‪<td>row1,cel1</td‬‬
‫>‪<td>row1,cel1</td‬‬
‫>‪</tr‬‬
‫>‪</table‬‬
‫عناصر جدول شامل ‪ bgcolor,height,width,align,border, ، background‬و همچنین‬
‫‪ Cellspacing‬ایجاد فاصله بین سلولها و ‪ cellpadding‬افزودن فضا به داخل یک سلول می باشد‪.‬‬
‫‪‬‬
‫قالب بندی صفحات ‪ HTML‬توسط جدول ها می تواند صورت گيرد‪.‬‬
‫برای ایجاد لینک به صفحات دیگر از این ‪ tag‬استفاده می شود‪ .‬تگ >‪ <a‬نشانه لینک است‪ .‬شناسه ‪ href‬مشخص کننده آدرس لینک می‬
‫باشد‪ </a> ،‬نشانه بسته شدن تگ است‪.‬‬
‫‪ (a‬لینک به یک فایل ‪ :‬اگر همه فایلها مانند صفحه ای که لینک در آن قرار دارد در یک پوشه باشند می توان به جای آدرس کامل صفحه مقصد از‬
‫روش میانبری استفاده کرده و فقط نام فایل مورد نظر را به جای آدرس کامل آن را نوشت‪:‬‬
‫>“‪<a href=“x.pdf‬‬
‫>‪ </a‬لینک به فایل‬
‫‪(a‬‬
‫کرد‬
‫‪(c‬‬
‫لینک به یک صفحه ‪ :‬اگر هر دو صفحه مبدأ و مقصد لینک در یک پوشه قرار دارند ‪ ،‬برای ایجاد یک لینک در این صفحه می توان به اینگونه عمل‬
‫‪ </a> :‬لینک به صفحه >“‪<a href=“photo.htm‬‬
‫بلینک ه یک ‪:URL‬‬
‫>‪ </a‬لینک به سایت >“‪<a href=“http://www.yahoo.com‬‬
‫ا‬
‫مربوط به چه‬
‫توجه! اگر شک دارید یا مطمئن نیستید که هر دو صفحه در یک پوشه قرار دارند حتما از آدرس کامل استفاده کنید‪ .‬چون در این روش مهم نیست که صفحات ‌‬
‫سایتی باشند‪.‬‬
‫>‪ </a‬لینک به فایل در پوشه دیگر >“ ‪<a href=“http://www.alzahra.ac.ir/article/x.pdf‬‬
‫کار برد ‪title‬است‪ .‬با استفاده ‌از این شناسه می توان عنوانی را برای لینک انتخاب کرد تا هنگامی که بازدید کننده ماوس خود را‬
‫در تگ لینک به ‌‬
‫شناسه دیگری‌ که می توان ‌‬
‫روی لینک قر ‌ار می دهد به نمایش درآید‪:‬‬
‫>‪ </a‬آموزش طراحی صفحات وب >”آموزش وب“=‪<a href=/amoozesh/index.htm” title‬‬
‫‪‬‬
‫برای اینکه یک لینک را وادار کنیم که در یک صفحه جدید باز شود‪ ،‬باید این شناسه را به تگ لینک اضافه کنیم‪:‬‬
‫" ‪target="_blank‬‬
‫>‪ </a‬دانشگاه الزهرا>"‪<a href="http://www.alzajhra.ac.ir" target="_blank‬‬
‫‪ ‬برای ایجاد یک لینک که بیننده با آن بتواند به فرد ایمیل بفرستد باید ‌از تگ استاندارد لینک استفاده کنیم‪ .‬اما تفاوت این لینک با‬
‫مرورگر را مجبور‌ کنیم لینک را به عنوان یک‬
‫‌‬
‫در آدرس ی است که به عنوان مقصد لینک نوشته می شود‪ .‬برای اینکه‬
‫لینک به یک صفحه ‌‬
‫آغاز آدرس استفاده کنیم ‌و بعد ‌از آن آدرس ایمیل را بنویسیم‪.‬‬
‫در ‌‬
‫لینک ایمیل بشناسد‪ ،‬باید ‌از این عبارت ‪mailto :‬به جای ‪‌ http ://‬‬
‫>‪ </a‬متن لینک >"‪<a href="mailto:[email protected]?subject=this is the subject‬‬
‫‪‬‬
‫با کلیک کردن بر روی این لینک صفحه ای برای فرستادن ایمیل باز می شود که قسمت آدرس )‪ (to‬و قسمت موضوع‬
‫(‪ )subject‬در آن کامل شده است و آماده ارسال است‪.‬‬
‫در این تگ ‪ IMG‬نشانه قرار گرفتن تصویر با هر فرمتی ( ‪jpg‬و ‪ gif‬و ‪ png‬و ‪ )...‬در صفحه و ‪ SRC‬آدرس محل قرار گرفتن فایل عکس است‪.‬‬
‫>"‪<img src="http://www.example.com/images/image.gif‬‬
‫اگر فایل ‪html‬و عکس هر دو در یک پوشه باشند می توان برای راحتی در تایپ کردن از این تگ استفاده کرد‪:‬‬
‫>"‪<img src="image.gif‬‬
‫می توانید از برنامه های ویرایش عکس از قبیل فتوشاپ و یا نرم افزار ‪Microsoft Office picture manager‬برای تغییر اندازه ‪،‬حجم و‬
‫فرمت تصاویر استفاده کرد‪ .‬همچنین در جزئیات این تگ می توان به موارد ذیل اشاره کرد‪:‬‬
‫‪‬‬
‫‪ Boder‬حاشیه تصویر‬
‫‪‬‬
‫‪ Align‬وضعیت قرار گرفتن‬
‫‪‬‬
‫‪ Alt‬عنوان تصویر‬
‫‪‬‬
‫‪ Hspace‬فاصله عمودی‬
‫‪‬‬
‫‪ Vspace‬فاصله افقی‬
‫‪‬‬
‫‪ Width‬عرض تصویر‬
‫‪‬‬
‫‪ Height‬ارتفاع تصویر‬
‫مثال‬
‫>"‪border="0" hspace="2" vspace="5‬نام عکس" "=‪<img align=left alt‬‬
‫اگر بخواهیم از یک عکس به عنوان یک لینک استفاده کنیم باید تگ عکس را به جای متن لینک استفاده کنیم‪ .‬یعنی به صورت زیر‪:‬‬
‫>‪<a href="url"><img src="image.gif"></a‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫تگ >‪<marquee‬یک متن را به دلخواه در صفحه به حرکت در می آورد‪.‬‬
‫مثال‬
‫>‪marquee‬متن مورد نظر خود را اینجا بنویسید<‪<marquee loop="infinite">/‬‬
‫شناسه " ‪loop="infinte‬باعث می شود که متن تا هنگامی که صفحه باز است به حرکت خود ادامه دهد‪ .‬می توان به جای این‬
‫شناسه از " ‪loop="-1‬هم استفاده کرد‪.‬‬
‫به جای ‪infinite‬در شناسه ‪loop‬می توان از اعداد استفاده کرد‪ .‬برای مثال " ‪loop="2‬به مرورگر می گوید که حرکت‬
‫متن را پس از دو بار چرخش متوقف کند‪.‬‬
‫می توان با وارد کردن شناسه " = ‪bgcolor‬رنگ زمینه محلی را که متن در آن در حال چرخش است تغییر داد و برای تغییر رنگ‬
‫زمینه از نام رنگ یا معادل هگزادسیمال آنها استفاده کرد‪.‬‬
‫>"‪<marquee loop="infinite" bgcolor="yellow‬‬
‫‪‬‬
‫‪‬‬
‫دو نمونه از پر استفاده ترین لیستها در ‪HTML‬لیستهای مرتب و لیستهای نامرتب هستند‪ .‬در لیستهای مرتب ترتیب بخشهای مختلف لیست مشخص می‬
‫شود ولی در لیستهای نامرتب این ترتیب مشخص نمی شود‪.‬‬
‫ا‬
‫لیستهای نامرتب در لیستهای نامرتب برای عناصر لیست از شماره و عدد یا حروف الفبا استفاده نمی شود‪ .‬عناصر این معمول با یک دایره تو پر مشخص‬
‫می شوند‪ .‬تگ ابتدای آن >‪ <ul‬است و تگ پایانی آن >‪ </ul‬است‪ .‬برای جدا کردن هر بخش لیست در ابتدای آن از تگ >‪<li‬استفاده می شود‪.‬‬
‫بهتر است هر تگ >‪<li‬که باز می شود با >‪</li‬بسته شود‪.‬‬
‫>‪<ul‬‬
‫>‪li‬بخش اول لیست<‪<li>/‬‬
‫>‪li‬بخش دوم لیست<‪<li>/‬‬
‫>‪li‬بخش سوم لیست<‪<li>/‬‬
‫>‪</ul‬‬
‫•بخش اول لیست‬
‫•بخش دوم لیست‬
‫•بخش سوم لیست‬
‫شناسه ‪ type‬برای مشخص کردن شکل عالمت مشخص کننده هر بخش استفاده می شود‬
‫• ‪ Circle‬با قرار دادن این مقدار برای لیست عالمت ابتدایی هر بخش به شکل یک دایره تو خالی در می آید‪.‬‬
‫• ‪ Disc‬این مقدار شکل عالمت ابتدای هر قسمت از لیست را به یک دایره تو پر تغییر می دهد‪.‬‬
‫• ‪ square‬این مقدار شکل عالمت لیست را به صورت یک مربع تو پر در می آورد‪.‬‬
‫مثال‬
‫>‪ </li‬قسمت اول لیست‬
‫>"‪<li type="circle‬‬
‫می توان در مورد لیستهای مرتب هم مانند لیستهای نامرتب عمل کرد فقط کافیست به جای استفاده از >‪<ul‬و >‪</ul‬از‬
‫تگهای >‪<ol‬و >‪</ol‬استفاده کرد‪.‬مثال‪:‬‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫بخش اول لیست‬
‫بخش دوم لیست‬
‫بخش سوم لیست‬
‫>‪<ol‬‬
‫>‪li‬بخش اول لیست<‪<li>/‬‬
‫>‪li‬بخش دوم لیست<‪<li>/‬‬
‫>‪li‬بخش سوم لیست<‪<li>/‬‬
‫>‪</ol‬‬
‫‪ ‬شناسه ‪start‬شماره های لیست از چه عددی شروع شود‪.‬‬
‫‪ ‬شناسه ‪type‬‬
‫هر بخش ‌از لیست استفاده می شود که د ‌ر اینجا شماره ای‬
‫تغییر عالمت ابتدایی ‌‬
‫در لیستهای مرتب هم مانند لیستهای نامرتب برای ‌‬
‫این شناسه ‌‬
‫هر قسمت ‌از لیست استفاده می شود‪‌ .‬از این شناسه می توان به صورت ز ‌یر استفاده کرد‪:‬‬
‫است که برای ‌‬
‫• ‪"type="1‬‬
‫با این شناسه بخشهای لیست با اعداد ریاض ی مشخص می شوند‪.‬‬
‫• "‪type="A‬‬
‫با استفاده از این شناسه بخشهای لیست با حروف بزرگ انگلیس ی مشخص می شوند‪.‬‬
‫• "‪type="a‬‬
‫با استفاده از این شناسه بخشهای لیست با حروف کوچک انگلیس ی مشخص می شوند‪.‬‬
‫• "‪type="I‬‬
‫با استفاده از این شناسه بخشهای لیست با حروف بزرگ یونانی مشخص می شوند‪.‬‬
‫• "‪type="i‬‬
‫با استفاده از این شناسه بخشهای لیست با حروف کوچک یونانی مشخص می شوند‪.‬‬
‫‪ CSS‬یا همان ‪Cascading Style Sheet‬روش ی است برای قالب بندی ‌و طراحی اجزای صفحه ‌از قبیل متن‪،‬‬
‫ا‬
‫در طراحی صفحه استفاده می شود بدون‌ استفاده ‌از کدهای‬
‫هر چیزی‌ که ‌‬
‫تقریبا ‌‬
‫‌‬
‫تصویر‪ ،‬زمینه صفحه‪ ،‬کادرها ‌و‬
‫‪HTML.‬‬
‫‌از طریق این استایل شیتها می توانیم ‌از دوباره نویس ی کدهای ‪HTML‬که باعث مشکل شدن کد نویس ی ‌و همچنین کند‬
‫بار نوع فونت مو ‌رد استفاده‬
‫ی کنیم‪ .‬برای مثال می توانیم یک ‌‬
‫در اینترنت می شود جلوگیر ‌‬
‫ی صفحه ‌‬
‫شدن سرعت بارگذار ‌‬
‫کار ببریم‪ .‬همچنین می توانیم ‌از‬
‫در صفحه به ‌‬
‫دیگر مجبور‌ نباشیم کد مربوط به فونت را ‌‬
‫در یک صفحه را تعیین کنیم ‌و ‌‬
‫‌‬
‫ا‬
‫غیر فعال بودن‬
‫مثال ‌‬
‫نیز استفاده کنیم ‌و چون‌ مشکالت جاوا اسکرپت ‌‬
‫در مواردی به جای جاوا اسکرپت ‌‬
‫این ابز ‌ار قدرتمند ‌‬
‫مرورگر را ندارد با خیالی آسوده ‌تر می توانیم ‌از آن استفاده کنیم‪.‬‬
‫‌‬
‫در‬
‫جاوا اسکرپت ‌‬
‫‌و این امکان را می دهد که ‌از یک فایل استایل خارجی برای تعیین خواص بخشهای مختلف صفحه های یک سایت استفاده‬
‫تغییر دهیم‪.‬‬
‫در فایل استایل خارجی ‌‬
‫تغییر کوچک ‌‬
‫ظاهر همه صفحه ها را با ایجاد یک ‌‬
‫در این صورت می توانیم ‌‬
‫کنیم‪‌ .‬‬
‫با استفاده ‌از کالس می توانیم برای یک تگ ‪HTML‬استایلهای متفاوتی را تعریف کنیم‪ .‬برای نمونه فرض کنیم می‬
‫کردن این د ‌و‬
‫در صفحه د ‌و نوع پاراگراف داشته باشیم‪ :‬یکی با متن مشکی ‌و دیگری‌ با متن قرمز‪ .‬برای مشخص ‌‬
‫خواهیم ‌‬
‫نوع پاراگراف می توانیم ‌از سلکتور‌ کالس استفاده کنیم‪ .‬ابتدا استایل را به صورت ز ‌یر می نویسیم‪:‬‬
‫}‪p.black {color: black‬‬
‫}‪p.red {color:red‬‬
‫در تگ‬
‫هر پاراگرافی که می خواهیم به رنگ مشکی باشد ‌از شناسه " ‪‌ class="black‬‬
‫در مرحله بعد باید برای ‌‬
‫‌‬
‫بهتر است آنها ‌را‬
‫ی است ولی ‌‬
‫قرمز ‌از شناسه " ‪class="red‬البته نام کالسها اختیار ‌‬
‫>‪<p‬استفاده کنیم ‌و برای پاراگراف ‌‬
‫در مثال ز ‌یر می توانیم کد‬
‫بیشتر شد گنگ نباشد‪‌ .‬‬
‫‌‬
‫طوری انتخاب کنیم که مفهوم داشته باشند تا وقتی که حجم استایل‬
‫در متن ‪HTML‬مالحظه کنید‪:‬‬
‫دو پاراگراف با ‌ل را ‌‬
‫مربوط به نوشتن ‌‬
‫>‪</p‬این متنی است که به رنگ مشکی نمایش داده می شود>"‪<p class="black‬‬
‫>‪</p‬این متن به رنگ قرمز نمایش داده می شود‪<p class="red"> .‬‬
‫‪‬‬
‫استفاده از استایلها می تواند به ما کمک کند تا از دوباره نویس ی فرمانها جلوگیری کنیم‪ .‬برای انجام این کار ما می توانیم‬
‫یک ‪Style‬را در بخش ‪HEAD‬در متن ‪HTML‬خود تعریف کنیم‪ .‬یک استایل در ‪HEAD‬با تگ‬
‫>‪<STYLE‬آغاز می شود و با >‪</STYLE‬به پایان می رسد‪.‬‬
‫>‪<head‬‬
‫>‪<style‬‬
‫‪<!-‬‬‫} ‪span { color:red; font-style:italic‬‬
‫>‪--‬‬
‫>‪</style‬‬
‫>‪</head‬‬
‫آغاز می شود‪ .‬سپس یک کامنت را شروع می کنیم تا مرورگرهایی‬
‫همانطو ‌ر که دیده می شود استایل با تگ >‪‌ <STYLE‬‬
‫در نیاورند‪.‬‬
‫در صفحه به نمایش ‌‬
‫که از ‪CSS‬پشتیبانی نمی کنند استایل را نادیده بگیرند ‌و ‌‬
‫در بخش ‪HEAD‬متن خود برای یک تگ خاص تعریف می کنیم برای محتویات همه تگهایی که استایل‬
‫وقتی ما استایلی را ‌‬
‫در صفحه مورد استفاده قر ‌ار می گیرد‪.‬‬
‫برای آن تعریف شده ‌‬
‫>‪</span‬این متن قرمز و ایتالیک است‪<span<،‬‬
‫گاهی در هنگام مشاهده صفحاتی که به زبان فارس ی نوشته شده اند‪،،‬با کلماتی به هم ریخته و غیر قابل فهم مواجه می شویم‪ .‬دلیل‬
‫این مشکل ناسازگار بودن ‪Encoding‬انتخاب شده در مرورگر با زبان فارس ی است‪.‬‬
‫ممکن است به دلیل کامل نشدن بارگزاری صفحه ایجاد شده باشد یا به دلیل اینکه در هنگام طراحی ‪Encoding‬متناسب با‬
‫ا‬
‫زبان فارس ی انتخاب نشده باشد یا اصال در طراحی صفحه هیچ گزینه ای برای ‪Encoding‬صفحه در نظر گرفته نشده‬
‫باشد‪.‬‬
‫در اکثر مواقع می توان صفحه مورد نظر را با تنظیم ‪Encoding‬بر روی ‪ UTF-8‬و یا )‪Arabic(Windows‬به صورت فارس ی‬
‫مشاهده کرد‪.‬‬
‫برای طراحی صفحه باید به این موارد توجه کرد‪:‬‬
‫‪‬‬
‫راست به چپ بودن صفحه‬
‫•‬
‫استفاده از شناسه " ‪dir="rtl‬در تگ >‪<html‬‬
‫‪‬‬
‫تنظیم ‪Encoding‬در هنگام طراحی صفحه‬
‫برای تنظیم ‪Encoding‬صفحه باید از یک متاتگ در بخش ‪HEAD‬متن استفاده کنیم‪ .‬این متاتگ برای کد پیج ‪utf-8‬‬
‫که بیشترین سازگازی را با صفحات فارس ی دارد به صورت زیر است‪:‬‬
‫>"‪<meta http-equiv="Content-Type" content="text/html; charset=utf-8‬‬
‫در طراحی وب سایت‪ ،‬باید قبل ‌از تگ ‪HTML‬تگ ‪DOCTYPE‬را قر ‌ار دهید‪ .‬این تگ به مرورگرتان می فهماند که شما ‌از چه ورژنی از ‪HTML‬استفاده‬
‫‌‬
‫کار کنند‪.‬‬
‫بهتر ‌‬
‫در نتیجه ‌‬
‫بهتر بفمهمند ‌و ‌‬
‫کار کمک می کند که مرورگرها اطالعات ‌و کد های داخل سایت را ‌‬
‫می کنید ‌و این ‌‬
‫در این سایت ازورژن ‪HTML ۴‬استفاده شده است‪:‬‬
‫زیر مشخص می کند که ‌‬
‫مث ‌ال کد ‌‬
‫>”‪<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd‬‬
‫از انواع ‪DOCTYPE‬ها می توان به این موارد اشاره کرد‪Frameset ،Transitional :‬و ‪Strict.‬‬
‫‪Frameset ‬‬
‫مناسب طراحان و برنامه نویسانی است که از ‪Frame‬ها استفاده می کنند‪.‬‬
‫>"‪<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd‬‬
‫‪‬‬
‫‪Transitional‬‬
‫مناسب کسانی است که ‌از روش قدیمی کد نویس ی استفاده می کنند ‌و نمی خواهند ‌از کد نویس ی جدید استفاده کنند‪.‬‬
‫‪HTML 4.01 Transitional‬‬
‫>"‪<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd‬‬
‫‪Strict ‬‬
‫بهترین روش است و از روش جدید کد نویس ی و ‪CSS‬پشتیبانی می کند‪ ،‬در این روش حتما باید از ‪CSS‬به جای تگهای ‪HTML‬برای ‪Style‬دادن استفاده‬
‫می شود‪.‬‬
‫>"‪<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd‬‬
‫‪‬‬
‫‪‬‬
‫در سايت است ‪.‬‬
‫چیز وجود لينك هاي شكسته ‌‬
‫زمينه سياه ‪ :‬بدترين ‌‬
‫در حال ساختن می باشد ‌از ایجاد لينك برای آن خودداری‌‬
‫بهتراست تا وقتي صفحه ‌‬
‫‪‌ :PAGE UNDER CONSTRUCTION‬‬
‫کرد‪ ..‬چون‌ باعث تلف شدن وقت بیننده سایت می شود‪.‬‬
‫‪‬‬
‫متن ناخوانا ‪ :‬استفاده ‌از متن هاي نامفهوم ‌و پاراگراف هاي طولني ذهن را خسته ميكند ‪ .‬هميشه از فونت هاي خوانا ‌و با اندا ‌زه‬
‫خواناتر شدن‬
‫‌‬
‫در جاي مناسب باعث‬
‫دار ‌‬
‫در خواندن خسته نشود ‪ .‬استفاده ‌از حالت هاي بولد ‌و ز ‌ير خط ‌‬
‫مناسب استفاده كنيد تا چشم ‌‬
‫در صفحات لتین ‪ Arial‬می باشد‪.‬‬
‫متن شما ميشود ‪.‬بهترین فونت های فارس ی‪ Tahoma‬و ‪‌ Times New Roman‬و ‌‬
‫‪‬‬
‫در طراحي سايت اهميت ويژه اي دارد ‪ .‬اما گاهي اين عكس ها بعلت حجم زياد مانع ل ‌ود‬
‫تصوير ‌‬
‫‌‬
‫بسيار بزرگ ‪ :‬استفاده ‌از‬
‫‌‬
‫عكس هاي‬
‫شدن سريع صفحه سايت شما ميشود ‌و بيننده را ترغيب به بستن پنجره سايت شما ميكند ! هنگام استفاده ‌از عكس حتما آن را با‬
‫در وب بهينه كنيد تا ‌از كمترين حجم ممكن بهره بگیريد ‪.‬‬
‫برنامه هايي مانند ‪photoshop‬براي استفاده ‌‬
‫‪‬‬
‫بزرگتر ‌از عرض مرورگر ‪ :‬اين مورد خيلي اهميت دارد ‪ .‬چون‌ همه عادت دارند براي ديدن ادامه مطالب سايت‬
‫‌‬
‫عرض صفحه سايت‬
‫بسمت پايین حركت كنند ‪ .‬نه چپ ‌و راست ‪ .‬حا ‌ل اگه ميخواهيد بيننده خود را زجركش كنيد عرض سايتتون‌ رو‌ تنظيم نكنيد ‪.‬‬
‫‪‬‬
‫اعتبار ان سایت می شود‪.‬‬
‫‌‬
‫هر دلیلی ‪،‬باعث پایین آمدن‬
‫در سایت ‪،‬به ‌‬
‫تصاویر ‌‬
‫‌‬
‫عكس هايي كه لود نميشوند ‪ :‬لود نشدن‬
!‫توجه‬
Host Name/Server =217.218.56.24

‫تهیه و تنظیم‬
‫فاطمه عسگری‌‬
‫مسئول وب سایت و پورتال های دانشگاه الزهرا‬