web html نابز سيون...

:عنوان آموزشاستاندارد مهارت و آموزشي عملی

WEB براي طراحي صفحاتHTML برنامه نويس زبانپرستو خطائی مربی رسمی سازمان آموزش فنی و : تهیه و تنظیم

حرفه ای استان کردستان

1394تهيه و تنظيم پرستو خطائی 1

تهيه و تنظيم پرستو خطائی 2

جزوه ارائه شده مطابق باآخرین استاندارد آموزشی طراحی صفحات وب جهت آموزش

سریع عملی تهیه و تنظیم گردیدهه های اسالید ها در یادگیری سریع و آسان چگونگی انجام پروژعملی طراحی صفحات وب فراگیر را یاری می کند

می باشد3و2و1فاقد توانایی های و

فهرست مطالب6-16..........................................................صفحات وبحیمقدماتی بر زبانهای طرا

18-32...............................................................نکات کاربردی در طراحی سايت

html......................................................................................33تعريف

33-36............................................و مثال تشريح شده htmlامتحان يک سورس کوتاه

37-50............................................کار با متون و سر تيتر ها و پاراگراف و تگ فونت

51-53.................................................................................کاراکترهای خاص

54-61.........................................................................................انواع لينک

62-64.................................................................................وارد کردن تصاوير

65-66............................................................و جدول رنگbodyشناسه های تگ

67-69...........................................کامنت و متحرک سازی متون-ترسيم خطوط

html.........................................................................73-70انواع ليستها در

74-79.....................................................................اصول استفاده از جدول


فهرست مطالب80-83............................................................................موزيک در وب سايتبکارگيری

84-95..............................................................................و درج محتويات آنformمعرفی

96-103....................................................................اصول طراحی صفحاتی حاوی فريم

104-105......................................................................رويدادهای مربوط به پنجره مرورگر

106.........................................................................................راست به چپ بودن صفحه

107-108.........................................و کلمات کليدی در موتورهای جستجوmetatagدر Encodingتنظيم

109-110................................................آننمونه برنامه ای ديگر از کاربرد و و کاربرد divتگ

map> ...........................................................111>و <area>تگنمونه برنامه ای از کاربرد

span.............................................................................................................112تگ

113................................................................................................آنو کاربرد Styleتگ

object>.................................................................................114>چگونگی استفاده از تگ


طراحی سایت با زبانهای برنامه نویسی تحت وب


http://inten.asia/wp-content/uploads/2014/11/web-design.jpg

http://inten.asia/wp-content/uploads/2014/11/web-design.jpg

زبان های برنامه نویسی تحت وب برای طراحی سایت

ويسی برای برنامه نويسی مقوله ای بسيار گسترده است و انواع مختلفی از زبانهای برنامه نآن ساخته شده اند که از لحاظ نحوه کار ، موارد استفاده و غيره تفاوت های زيادی با

:ندبطور کلی زبان های برنامه نويسی به دو گروه زير تقسيم می شو. همديگر دارند های برنامه نويسی دسکتاپزبان *های برنامه نويسی تحت وبزبان *


دسکتاپ و تحت وب

وشتن مورد اول يعنی زبانهای که برای برنامه نويسی دسکتاپ استفاده می شوند جهت ن•برنامه هايی به کار می روند که بر روی کامپيوتر قابل اجرا می باشند مانند نرم

افزارهای ويندوزی

ه بر ولی زبانهای برنامه نويسی تحت وب برای ساخت برنامه هايی استفاده می شوند ک•روی شبکه يا همان وب اجرا شده و می توان آنها را بر روی شبکه ای مانند اينترنت

يا طراحی سایتانتشار داد اين زبان های برنامه نويسی را در اصطالح زبان های می گويندطراحی وب


و قابلیتهای آنپویازبانهای برنامه نویسی

ابيس و قابليت شخصی سازی سايت برای هر يک از کاربران ،قابليت عضوگيری ،طراحی ديت.صدها امکان ديگر که ما را قادر به طراحی سايت هايی با قابليتهای مورد نظرمان می کند


برای طراحی سایت htmlزبان(ایستا)

ا می باشد که بصورت ايستتحت وبيکی از ابتدايی ترين و اولين زبانهای برنامه نويسی •ادی البته نسخه ای که در حال حاضر در اختيار ماست با نسخه نخست آن تفاوتهای زي

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

ن زبان داريماضافه کند البته اين را نبايد از ياد برد که برای طراحی هر سايتی نياز به اي


http://inten.asia/wp-content/uploads/2014/11/web-design-2.jpg

http://inten.asia/wp-content/uploads/2014/11/web-design-2.jpg

برای طراحی سایت java scriptزبان

فحات برای نوشتن اسکريپت تحت وب و در جهت افزودن پويايی بيشتر به صزبانی •طراحی شده اند مورد استفاده قرار می گيرد و در دو حالت ميتوان htmlوبسايتی که باjava script را بکار برد يکی استفاده از کدهای آن در داخل کدهایhtml و يا نوشتن

، تا نتايج آن در صفحات htmlکد در فايلی جداگانه و فراخوانی آن فايل در ميان کدهایزبان نوان ه عبرا هم بعنوان زبان شی گرا و هم java script .سايتمان نمايان شود

رد به ساخت يافته ميتوان مورد استفاده قرار داد و به دليل قابليت های فراوانی که دا.استفاده ميشودطراحی سایتصورت گسترده در


cssبرای طراحی سایت

است و قابليت هايی از htmlزبانی برای کامل کردن زبانcssدر واقع می توان گفت•ين باب قبيل قرار دادن تصاوير پس زمينه ، تنظيم قالب بندی صفحات و هر کاری در ا

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


زبان برنامه نویسی asp.net برای طراحی سایت

نرم اگر. بوده و با سيستم عامل ويندوز کامال سازگار می باشد .netاين زبان از مجموعه•داشته باشيد به راحتی و با داشتن اطالعات بسياررا ASP.NETافزار ويژوال استوديو

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

لی اين و ويژوال بيسيک و زبانهای ديگر می توانيد استفاده ببريد و c#مختلفی از جملههزينه بيشتری برای راه اندازی يک سايت بر دوش شما خواهد phpزبان نسبت به

.گذاشت


برای طراحی سایتphpزبان برنامه نویسی

ه و تا کنون يکی از قدرتمند ترين و پرکاربرد ترين زبانهای برنامه نويسی تحت وب بود•اين زبان سرعت باال ،هزينه کم و قابليت های. سايتهای زيادی با اين زبان ساخته شده اند

از مواردی است که باعث استفاده روز افزون از اين زبان برنامه طراحی سايتدر سورس است و هر کس ميتواند روی آن تغييرات خود اپن phpزبان. نويسی شده است

اين همه پيشرفت داشته و ميان phpرا اعمال کند و اصال به همين خاطر است کهو htmlاين زبان با زبانهای. کاربران از محبوبيت خاصی برخوردار است

mysql نمودهايی با پويايی زياد طراحیسایتسازگاری داشته و به کمک آنها ميتوان.


http://inten.asia/

نده طراحی وبسایت شرکت ریتون گلوبال فروشنده و نماینده شرکت های سوئدی برادرسن و تنیکو تولید کن

.انجام شد و طی یک ماه تحویل داده شد2014وسایل ارتباط رادیویی میباشد که در ماه آگوست


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

.شده استید نمایی از پیش طرح وبسایت مهشیر را که به صورت دینامیک ساخته و طراحی شده است را میتوان

کنیدمشاهده


نمونه ای دیگر از یک طراحی سایت


نکات کاربردی در طراحی سایتطراحی وباند پس از آنکه مراحل مشتاق شک همه مديران و صاحبين وب سايت ها بی •

ر عده را پشت سر گذاشتند ، وب سايتی پر بازديد داشت باشند و همه روزه نيز بسايتلی و خدماتی بازديدکنندگانشان افزوده شود تا اطالع رسانی و تبليغات کافی در زمينه شغ

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

شده شغلی و خدماتی شان انجاممينه زپس از آنکه مراحل . موتورهای جستجو قرار گيرد در اين راه از اصول سئو بنابراين .و طراحی سايت موجب رونق کسب و کارشان شود

جستجو بهره می گيرند تا نام و آدرس وب سايتشان در صفحه اول ليست نتايج موتورهای.قرار گيرد

يز در همچنين گوگل مدت زمانی که کاربران در سايتی به گشت و گذار می پردازند را ناز اين رو تالش مديران وب سايت ها و . رتبه دهی به سايت ها تاثير می دهد

.ت استمتخصصين حوزه سئو ، نگهداشتن بازديد کننده به مدت طوالنی تر در وب سايالوه بر الزم است بدانيد آنچه توجه بازديد کنندگان را به وب سايت شما جلب می کند ، ع

.محتوای مفيد و با ارزش ، ويژگی های ظاهری سايت شما استتهيه و تنظيم پرستو خطائی 19

http://inten.asia/

چه مواردی موجب رنجش بازدید کنندگان یک وب سایت می شود ؟

رج شده در گاهی تعداد تبليغات از ميزان محتوای د)تعداد زيادی از بنر های تبليغاتی (1•(استهر صفحه از سايت بيشتر

.صداهايی که به طور اتوماتيک اجرا می شوند(2متن های خيلی بلند و طوالنی(3.متون بلند به هم پيوسته بدون پاراگراف(4سرعت پايين سرور(5.لينک ها و نشانه هايی که به صفحات درحال ساخت اشاره می کند(6اشتباهات نگارشی(7رنگ بندی نا مناسب(8گرافيک هايی با حجم باال(9


قرار دادن عکس مدیر سایت

این صحیح است که قرار گرفتن تصویر مدیر سایت می تواند

مانند نوعی خوش آمد گویی به بازدید کنندگان باشد ، اما

تجربیات نشان داده قرار گرفتن تصویر مدیر سایت در گوشه

سایت ، مانند آن است که بازدید کنندگان وارد وب سایت

.شخصی یک فرد شده اند نه یک وب سایت شرکتی


ایزیاده روی در محتوای چند رسانه

اول از همه در نظر داشته باشید بارگذاری فیلم ها و موسیقی ها چقدر طول

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

توجه نمایید پخش انواع تصاویر متحرک پر تعداد ، ممکن است گاهی برای

ضمنا توصیه اکید من به شما آن است که هرگز . کاربرای گیج کننده باشد

این کار ممکن است موجب . پخش موسیقی در وبسایتتان را اجباری نکنید

.فراری شدن کاربر از سایت شما شود


کنندهساختار گیج

سعی کنید ساختار . این نکته بیش از همه شامل بخش طراحی سایت می شود

سایت را به شکلی طراحی نمایید که دسترسی به تمام بخش های آن برای

مخاطب ساده باشد و مخاطب برای رسیدن به بخش مورد نظر خود مجبور

بسیاری از کاربران فرصت کمی دارند و ! نباشد از هفت خان رستم رد شود

ما بقی . اگر به سرعت مطلب خود را نیابند از سایت شما خارج می شوند

.کاربران نیز ممکن است حتی بخش مورد نظر خود را نیابند


باشیدمراقب حریم شخصی افراد

البته این مساله تا حدی به نوع وب سایت شما و اعمالی که در سایتتان

سایت همیشه باید دقت کنید که درج مطالب در. صورت می گیرد بستگی دارد

ید همچنین از قرار دادن اطالعات مف. شما به امنیت شخصی افراد آسیب نزند

ه به عنوان مثال هرگز نباید ایمیل ، شمار. برای هکرها نیز خودداری کنید

یددهتلفن و به طور کلی اطالعات تماس اعضای سایت را در دید همگان قرار


بخش گفتگو بدون ناظرخیلی از بازدیدکنندگان طرفدار چت روم ها یا بخش هایی برای صحبت و تبادل اطالعات

اما توجه داشته باشید که این بخش ها بدون وجود ناظر ممکن است شدیدا به سایت . اند

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

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

که ممکن است مباحث غیر اخالقی یا توهین هایی در این بخش ها توسط رقبا یا

بازدیدکنندگان عادی سایت قرار گیرد که به اعتبار این سایت لطمه بزند و نیاز به مدیریت

.مطالب نا مربوط است ی حذف و نظارت قوی برا


لینک های قدیمی و بی استفادهدن باور داشته باشید یا نه ، لینک های قدیمی و بی استفاده ، شدیدا باعث فراری ش

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

آیند اصال برای بازدید کنندگان سایت شما خوش. شـــــــمــــــا هدایت می کنند بپرهیزید

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


: انتخاب نام مناسب برای دامنه سایت


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

ی اما اگر کم. متحمل می شوند … منظم محتوا ، رعایت اصول سئو وسایتطراحیبه عقب تر برگردیم میبینیم ، در اولین قدم ها ، پس از

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

.ید شخصیت وب سایت شما است ، پس باید در انتخاب آن دقت کن


http://inten.asia/

ویژگی های یک دامنه خوب

ا امروزه با گسترش طراحی سایت در حوزه های مختلف ، امکان پید: کوتاهی (1دامنه باید توجه کنید نام.کردن یک نام مختصر برای دامنه رفته رفته کم تر می شود

ز کلمات سعی کنید ا. کوتاه و با معنا بوده و به موضوع سایت شما نیز مرتبط باشد ه تا حد مکان سعی کنید از نام هایی استفاده کنید ک. مخفف تا حد امکان استفاده نکنید

ه عنوان ب. همچنین در هنگام خواندن نام سایت تلفظ اشتباه رخ ندهد . دو امالیی نباشند کل تایپ را برای سایت خود انتخاب کنید به این ش” دنیای بیکران ” مثال اگر شما نام

” دنیای بیکاران“که ممکن است مخاطب آن را ”donyayebikaran“می شود !بخواند


سعی کنید از نامی برای دامنه خود استفاده نمایید که به یاد ماندنی باشد و بنابر این در هنگام مخفف کردن اسامی و . کاربران به سادگی آن را حفظ کنند

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

.به اشتباه بیندازد

ماندنیبه یاد (2


دوست شما زحمات طراحی سایت را متقبل شد اید و قطعا: مشابه نداشته باشد نابراین ب. دارید کاربران سایت خود شما را ببینند نه سایت رقبا و سایرین را

های سعی کنید نامی برای دامنه سایت خود انتخاب نمایید که مشابه نام سایتبگذارید یقینا عده ای gogle.comمثال اگر اسم سایت خود را . مشهور نباشد

.خواهند شد google.comاشتباها وارد سایت

باشدمشابه نداشته (3


نام دامنه باید بیانگر نوع هدف باشد همچنین (4بعالوه پيشنهاد می شود

.orgبرای سايت های علمی از پسوند .eduبرای وب سايت های سازمانی ، پسوند

gov.برای سايت های اموزشی و علمی ، پسوند .استفاده می شوند … و برای سايت های دولتی


چیست؟ HTMLیک فایل HTML مخفف زبان نشانه گذاری فرا متنی است

Hyper Text Markup Language) )

یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست HTMLیک فایل بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را

چگونه نشان دهدباشد .htmlیا .htmباید دارای پسوند HTMLیک فایل

می تواند توسط یک ویرایشگر متنی ساده ساخته شود HTMLیک فایل


یا می خواهید یکبار امتحان کنید؟متن زیر را . را اجرا کنید note padاگر در حال کار با ویندوز هستید برنامه

.تایپ کنید<html><head>

<title>title of page </title></head><body>

هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است</body></html>

.ذخیره کنیدmypage.htmفایل را تحت عنوان


مثال تشریح شدهاز می شوند تا از جایی که ب)برای درک بهتر این قسمت سعی کنید تگها را به صورت جفتی در نظر بگیرید

است و تگ پایانی آن HTMLکه عالمت شروع یک متن است <html>اولین تگ ( جایی که بسته می شوند</html> که همانطور که ممکن است حدس زده باشید نشانه پایان متن استHTML هر چیزی در . است

HTML دهنده چون این دو تگ نشان... مانند متن، دیگر تگها، عکسها و. باید بین این دو تگ قرار گیرد.آغاز و پایان صفحه شما هستند

یدی، و این تگ مشخص کننده بخشی است که شما باید عنوان صفحه، کلمات کل. است<head>تگ بعدی در . به پایان می رسدhead/>>این بخش با . دیگر توضیحات خود برای این صفحه را در آن قرار دهید

.مشخص می شود TITLEعنوان صفحه بود که با HEADمثال باال تنها قسمت این قسمت مورد استفاده . به شما اجازه می دهد برای صفحه خود یک عنوان برگزینید<title>تگ

ر موتورهای جستجو قرار می گیرد و همان متنی است که به هنگام مشاهده صفحه در نوار عنوان مرورگ. قرار نگیرد در متن شما نشان داده نمی شود BODYتا هنگامی که این تگ در قسمت . نشان داده می شود

مثال باال عنوانی که برای صفحه در title/>>: برای پایان دادن به تگ عنوان از این تگ استفاده می شود. است HTMLنشان داده می شود قالب اصلی

این قسمت جایی . بخشی را آغاز می کند که در صفحه مرورگر شما به نمایش در می آید<body>تگ می استفاده body>>برای پایان دادن به این تگ از . است که ما باید کار اصلی خود را در آن انجام دهیم

استدر مثال باال متنی که در صفحه مرورگر دیده می شود به صورت زیر . کنیمچیزی که اینجا قرار گیرد در صفحه شما قابل دیدن استهر


open"یا openمرورگر اینترنت خود را باز کنید، از منوی فایل گزینه page" گزینه .یک جعبه گفتگو ظاهر خواهد شد . را انتخاب کنید"browse" را

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

okگزینه C:\mypage.htmlمثال بعنوان. گفتگوی خود مشاهده خواهید کرد.را کلیک کنید و مرورگر صفحه را به شما نشان خواهد داد


<b>( تو پر کردن( boldتگ

</b> متن<b>


- U(underline)زیر خط دار کردن متون تگ

</u> 1عنوان شماره<u>


<strike>متون خط خورده تگ

</strike> متن<strike>


- H1تگ عنوان H6

</h1> 1عنوان شماره<h1>


<HTML><head> <title>عنوان سايت </title> </head> <body><b>

<i>اين متن به صورت پر رنگ و کج ديده می شود

</i></b><body></HTML>


- I(italic)کج کردن متون تگ

</i> 1عنوان شماره<i>


در متنی وارد می شود بقیه آن خط به خط <br>وقتی که تگ Line Breakیا همان <br>در حقیقت تگ . بعد منتقل می شود

را انــــــــجام Shiftبه همراه Enterکاری مشابه فشردن کلید به . داردقابل ذکر است که این تگ نیازی به تگ پایانی ن. می دهد

:یک مثال توجه کنید

This is the first line <br> Here is the second line


dir="rtl"متون با شناسه( جهت گیری) نحوه تراز بندی

تهيه و تنظيم پرستو خطائی

</p> داده می شودمتن از سمت راست به چپ نمایش<p dir=“rtl”>

</p> داده می شودمتن از سمت چپ به راست نمایش<p dir=“ltr”>

در بیشتر تگها کاربرد دارد dirشناسه

44

توضیح دستور خروجی

boldباعث ( .شدن متن می شود(برجسته <b>text</b> text

Italicباعث ( شدن متن می ( کج یا خوابیده

.شود<i>text</i> text

.خطی زیر متن می کشد <u>text</u> text

.متن را کوچکتر می کند و پایین تر می آورد A<sub>B</sub> AB

.متن را کوچکتر می کند و باال تر می آورد A<sup>B</sup> AB

متن را به صورت چشمک زن نمایش می

.دهد<blink>text</blink> text

.خطی روی متن می کشد <strike>text</strike> text

متن را به صورتی که در ماشین تحریر تایپ

.نمایش می دهد,می شود <tt>text</tt> text

که می نویسیم متن را دقیقا به همان صورتی

.نمایش می دهد,یعنی فضای خالی tab , رفتن به سطر بعدی

.را حفظ می کند

<pre>text</pre>


توضیح دستور خروجی

واحد 1افزایش سایز متن به اندازه باعث

نسبت به حالت عاددی<big>text</big> text

واحد 1کاهش سایز متن به اندازه باعث

.نسبت به حالت عادی<small>text</small> text

.متن را با کوچکترین سایز نمایش می دهد <font size="1">text</font> text

.متن را با بزرگترین سایز نمایش می دهد <font size="7"> text</font> text

کوتاه کردن متن<acronym<text</acronym>

<abbr>text</abbr>text

نمایش حروف یك اندازه با فواصل مساوی <KBD> text</KBD>

text

HTMLاندازه متون در


<p>پاراگراف اول</p><p>پاراگراف دوم <br>ادامه پاراگراف دوم</p>


htmlف در راپاراگ

48

<p>در titleشناسه


<p title=" سایت گوگل" > google </p>

گیرد هنگامی که نشانگر ماوس بر روی عنصر قرار توضیح می دهد

49

< font>کار کردن با فونتها ، رنگ و اندازه آنها

<font size="x" color="red" face="Times" >تعیین کنیم متنی که اندازه ،رنگ ، نوع فونت ،آنرا </font>


ایجاد فضای خالی بین کلمات ;nbsp&کارکترهای خاص

اولکلمه ;nbsp&کلمه دوم

;nbsp&صفحه ساخته شده در سال 2015توسط من


یا می خواهید یکبار امتحان کنید؟متن زیر را . را اجرا کنید note padاگر در حال کار با ویندوز هستید برنامه

.تایپ کنید<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فایل را تحت عنوان تهيه و تنظيم پرستو خطائی 52

بعضی از کارکترهای خاص


نام کاراکتر شکل ظاهری کاراکتر کد سازنده کاراکت

امپرسند & &

عالمت کپی رايت © ©

عالمت ثبت شده ® ®

-------------------- » &raq

عالمت کوچکتر از < <

عالمت بزرگتر از > >

عالمت خنجر † &dagger;

53

(htmlدر link)انواع لینک

هایی که به صفحات یک سایت دیگر اشارهلینک ( Global Links)لینک سراسری( 1.توجه کنید1به مثال . دارند

<a href="url">به صفحات ديگر در سايتهای ديگر اشاره می کند</a>


<a href="https://yahoo.com">به صفحات ديگر در سايتهای ديگر اشاره می کند</a>: 1مثال

54

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

<a href="mailto:[email protected]"> لينکمتن </a>


حه همان صفقسمتی از به هایی هستند کهلینک ( Internal Links)لینک داخلی .کنیدتوجه به مثال . ای که در آن هستید اشاره می کنند

<a href="">هر المانی که قرار است به عنوان لينک استفاده شود</a>


<a name="#n1"> text</a>.ایجاد پیوند به بخش نام گذاری شده

<a href="#n 2"> text</a>

<a name="#n 2"> text</a>.ایجاد پیوند به بخش نام گذاری شده

<a href="#n1"> text</a>


ساختن لینک به نقاط مختلف یک صفحه

57

:لینک های رنگی بسازید

<body link="#C0C0C0" vlink="#808080" alink="#FF0000“ text=“رنگ”>

.link,vlink,alinkیعنی چی؟ !!؟

link آبی استاندارد آن. کننده رنگ پيوند هايی است که تا کنون مالقات نشده اندبيان

blue0000#ياFF است.

vlink مخففVisited Link : استاندارد آن ارغوانی.پيوند را پس از مالقات شدن نمايش می دهدرنگ

purple - .است #800080

alink مخففActive Link : لينک را وقتی که ماوس بر روی آن قرار می گيرد ، مشخص می رنگ

- redاستاندارد آن قرمز .کند #FF0000است.


<a href="http://www.webfocus.com" style="color: green">here</a>

<a href="http://www.webfocus.ir"> <font color="red">here</font> </a>

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


HTMLایجاد پیوند به دیگر صفحات

<a href= " z.html " > لینکمتن </a>

<a href= "index.htm/مسیر/.." title="آموزش " target="_blank"> لینکمتن </a>


img>در تگ targetکاربرد شناسه src>

مشخصه Target کاربرد

target="_blank" يک فايل يا آدرس جديد را در يک

. پنجره جديد باز خواهد کرد

target="_self" ه يک فايل يا آدرس جديد را در پنجر

. فعلی باز خواهد کرد

target="_parent"

يک فايل يا آدرس جديد را در قاب باز خواهد ( parent frame)اصلی

ی راجع به قابها در مباحث بعد. )کرد

.( صحبت خواهيم کرد

target="_top" يک فايل يا آدرس جديد را در کل

راه ) پنجره فعلی باز خواهد کرد

( جالبی برای خارج شدن از قاب ها


HTMLوارد کردن تصاویر به صفحات

<img src="نام فایل.gif">

<a href="url"><img src="نام فایل.gif " width="60" height="60 "> </a>

در این مثال یک تصویر به صورت لینک درآمده است

<center> <img src=«نام فایل.gif">

</center>در مرکز صفحه قرار می گیردمثال تصویر در این


HTMLوارد کردن تصاویر به صفحات

<img src="نام فایل.gif" alt= توضیح تصویر " " align=" bottom " width="60" height="60"Top

center

border=" x">

vspaceو hspaceصفت های :.می توان فضایی را در سمت راست و چپ تصویر در نظر گرفتhspaceبا استفاده از صفت

.تصویر در نظر گرفتتوان فضایی را در باال و پایینمی vspaceبا استفاده از صفت

<img src="img1.jpg" Hspace="30" Vspace="10">


س در یک سایت دیگر باشد باید آدرس کامل مکان عکاگر تصویر مورد نظر.قرار دهید URLرا به جای

:مانند مثال زیر

<img src="http://www.siteURL.com/??/?.gif">


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

> body background="نام فایل.jpg" leftmargin="50" rightmargin="50" topmargin="100" bottommargin="50" >

</body>

bgcolor="red" تغییر زمینه صفحه به رنگ ثابت


Color Name Color HEX

black #000000

red #FF0000

lime #00FF00

blue #0000FF

yellow #FFFF00

aqua #00FFFF

fuchsia #FF00FF

silver #C0C0C0

white #FFFFFF

نمونه ای از جدول رنگ و کد مرتبط با آن


htmlترسیم خطوط در صفحات

<hr>


<hr width="250" size= " 20" color="yellow" noshade = "noshade">

:مثال

67

htmlوارد کردن توضیحات به متن

--!<این یک کامنت است

کامنتها در مرورگر نمایش داده نمی شوند>--

HTMLایجاد متن های متحرک در صفحه

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

دون ساخته شده اند، نمی توانند به طور کامل با این تگ سازگار شوند و در پاره ای از اوقات با آن مشکل پیدا می کنند و تنها متن ب Netscapeپایه

< marquee>.حرکت را نشان می دهند

با سالم و خسته نباشيد

marquee> />

<marquee loop="infinite" bgcolor="yellow">

با سالم و خسته نباشيد

marquee> />

loop=“ +2“ loop=“-1”(عدد تعيين شده مشخص کننده تعداد دفعات تکرار حرکت است)


<ul>تعریف لیست ها ی نامرتب با تگ

<ul></li> ليستبخش اول<li></li> ليستبخش دوم<li></li> ليستسوم بخش<li>

</ul><ul>

<li type="circle"> . ابتدایی هر بخش به شکل یک دایره تو خالی در می آیدعالمت لیست برای </li><li type="disk"> . این مقدار شکل عالمت ابتدای هر قسمت از لیست را به یک دایره تو پر تغییر می دهد </li>

<li type="square"> . این مقدار شکل عالمت لیست را به صورت یک مربع تو پر در می آورد </li></ul>


برای ایجاد لیست نامرتب <dir>کاربرد

<dir></li> ليستبخش اول<li></li> ليستبخش دوم<li></li> ليستسوم بخش<li>

</dir>


گردد <dir>می تواند جايگزين تگ <ul>تگ : يادآوری

<dl><dt> تعریف لیست</dt><dd> لیستبخش اول </dd><dd> لیستبخش دوم </dd><dd> لیستبخش سوم </dd></dl>


<dl>ايجاد ليستهای تعريفی با

72

<ol>بااستفاده از لیست ها ی مرتب

<ol start="15"> (آغاز می شود15ليست از عدد )

</li> ليستبخش اول <li></li> ليستبخش دوم <li></li> ليستسوم بخش <li>

</ol>

<ol type="1"> شمارش لیست با عدد مشخص شده معین می شود

<ol type="A"> مشخص شده معین می شود حروف التین شمارش لیست با

<ol type="a"> شده معین می شود کوچک مشخص شمارش لیست با حروف التین

<ol type="I"> مشخص شده معین می شود رومی بزرگ شمارش لیست با حروف


طراحی جدول و قرار گیری ستون در جدولزمینه، نحوه رنگ : HTMLجداول در


<table border="3" width="500" height="50" bgcolor="#ffff00"><td>محتويات جدول</td></table>

ترسيم يک جدول با يک ستون

74

<caption>درجدول با تگ عنوان


<caption> عنوان جدول < / caption<

:مثال

75

عنوان جدول


<table width="600" border="3"><td align="left">

متمايل به چپ</td>

<td align="center">متمايل به مرکز

</td><td align="right">

متمايل به راست</td>

</table>

ترسيم يک جدول

با سه ستون

76

نحوه قرار گیری سطر در جدول


<table border="3"><td>

و سلول اولاول سطر </td><td>

و سلول دوماول سطر

</td><tr><td>

سلول اولسطر دوم و </td><td>سطر دوم و سلول دوم</td></tr></table>

77

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


<table border="3" width="500" ><td>

<table border="3" align="center" width="300" >

<td align="center"> salam</td>

</table></td>

</table>salam

78


Cellspacing="عدد" برای ایجاد فاصله بین

سلولها عدد مورد نظر خود

. درا در این فرمان وارد کنی

Height="عدد" تونتعیین ارتفاع جدول و یا س

Cellpadding="ن از اين فرمان برای افزود "عدد

فضا به داخل يک سلول

ای مقدار فض. استفاده کنيد

مورد نظر خود را در اين

.فرمان وارد کنيد

valign="top"(top , bottom,middel)

با اين شناسه می توانيد

محتويات جدول را به صورت

عمودی تراز بندی کنيم

width="عدد" تعيين عرض جدول و يا

ستونrowspan "عدد"= اين شناسه مشخص کننده اين

است که ارتفاع سلول معادل

چند سلول است

Border="عدد" تعيين قاب برای جدول يا

ستونColspan="عدد" اين شناسه مشخص کننده اندازه

افقی يک سلول بر اساس تعداد

.سلول است

align="center"(left , right,center)

با اين شناسه می توانيد

محتويات جدول را به

صورت افقی تراز بندی

کنيم

شناسه های مورد استفاده در تگ جدول یا در یک ستون

79

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


<a href="example.mid">متن لينک موزيک</a>

<a href=“4.mp3">متن لينک موزيک</a> مثال:

<head><embed src="4.mp3" width="300" height="60" autostart="true" loop="true" hidden="true"> </head>

صفحه به صورت اجرای اتوماتیکجاسازی موزیک در

80


width :ما با ش. این فرمان تعیین کننده عرض فایل صوتی در صفحه است

ن قرار دادن یک عدد در مقیاس پیکسل بین دو دابل کوت این فرما

به می توانید تعیین کنید فایل شما با چه میزان عرض در صفحه

. نمایش درآید

height :شما با قرار .اين فرمان تعيين کننده ارتفاع فايل صوتی در صفحه است

دادن يک عدد در مقياس پيکسل بين دو دابل کوت اين فرمان می

ه نمايش توانيد تعيين کنيد فايل شما با چه ميزان ارتفاع در صفحه ب

. پيکسل استفاده می شود60معموالً برای اين فرمان از ارتفاع . درآيد

embed src کاربرد شناسه های تگ

81


autostart="true" :ه مرورگر را وادار می کند تا بالفاصله پس از بارگذاری صفحه شروع ب

دار شما می توانید این گزینه را با قرار دادن مق. پخش فایل صوتی کندfalse به جایtrue رض معموالً این گزینه به طور پیش ف. غیر فعال کنید

. غیر فعال است


82


hidden="true" :ت در این صور. این فرمان به مرورگر دستور مخفی کردن رابط گرافیکی پخش صدا را می دهد

. بینندکاربران نمی توانند برنامه ای را که صدا را پخش می کند و همچنین دکمه های کنترل آنرا ب

شود و در این صورت صدا تا زمانی که به پایان نرسیده یا تا زمانی که تنظیم شده باشد پخش میغیر فعال trueبه جای falseاین گزینه با قرار دادن . کاربر نمی تواند از پخش آن جلوگیری کند

.به صورت پیش فرض هم این گزینه غیر فعال است. می شود

loop="true" :اين اين فرمان مرورگر را وادار می کند پس از به اتمام رسيدن فايل دوباره از اول آنرا اجرا کند، و

. کندعمل تا هنگامی که صفحه باز است يا کاربر دکمه توقف را کليک نکرده است ادامه پيدا میزينه البته معموالً اين گ. اين گزينه را غير فعال کنيد trueبه جای falseشما می توانيد با قرار دادن

. به صورت پيش فرض غير فعال است


83

و شناسه های مهم آن HTMLدر><formمعرفی


<form action="formProcessor.php" method= " post" name="formName" target="_blank">

.................مورد استفاده برای فرم اجزای .................

</form>

. تفاده کنيماگر در صفحه بخواهيم از بازديد کننده اطالعاتی را دريافت کنيم بايد از فرم برای اين کار اس

ز ميان ا. فرم برای انتقال اطالعاتی که توسط کاربر وارد شده اند به يک آدرس مشخص استفاده می شوداين شناسه مشخص کننده . استضروری actionشناسه های مورد استفاده در فرم استفاده از شناسه

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

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

هم اهميت زيادی دارد ولی در صورتی که از اين شناسه استفاده نشود ازmethodالبته استفاده از شناسه

. استفاده می شودgetمقدار پيش فرض آن يعنی

84


: actionهمانطور که گفته شد از این شناسه برای مشخص کردن صفحه

. پردازش کننده اطالعات ورودی کاربر استفاده می شود

name رم از این شناسه برای تعریف کردن یک نام منحصر به فرد برای ف

. استفاده می شود

85


method :

مشخص می کند و شامل دو مقدار زیر actionاین شناسه طریقه ارسال اطالعات را به فایل

.است:get به این . ارسال می شوند( نوار آدرس)در این روش اطالعات از طریق آدرس صفحه

actionصورت که اطالعات وارد شده در فرم پس از یک عالمت سؤال بعد از آدرس صفحه های از این روش نمی توان برای اطالعات طوالنی یا کاراکتر. قرار می گیرند و ارسال می شوند

همچنین بهتر است برای اطالعات مهم از قبیل نام کاربری و کلمه. استفاده کرد ASCIIغیر

چون در این صورت این اطالعات در نوار آدرس مرورگر . عبور هم از این روش استفاده نشود. نمایش داده می شوند

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

ین امکان نسبت به روش قیل امنیت بیشتر به دلیل عدم نمایش اطالعات ارسالی به کاربر و همچن

. ارسال اطالعات طوالنی تر است

86


•Target :

این شناسه روش باز شدن صفحه پردازشگر اطالعات را مشخص

باز می توان برای مقدار این شناسه از نام یک فریم برای. میکنددر آن فریم استفاده کرد یا از مقادیر از پیش actionشدن صفحه

:تعریف شده زیرblank _ صفحهaction در یک پنجره جدید باز خواهد شد.

•_ self صفحهaction در فریمی که فرم در آن قرار دارد باز

.خواهد شد•_ parent صفحهaction درframeset محتوی فرم باز

.خواهد شد•_top صفحهaction در تما پنجره باز خواهد شد .

87

<input type="text" name="txtname">


<input type="password" name="txtpass">

سارا احمدی

• •••••••••

:مثال

:مثال

88


<textarea name="someName" cols="40" rows="3">

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

می شود

>/textarea>شهيد : کوچه خيابان جام جم –آدرس

کد پستی 18ورمقانی پالک

677587857

:مثال

89

(checkbox)چک باکس <input type="checkbox" name="C#">


<input type="radio" name="gender" value="male">

((Radio Buttomدکمه های رادیو

90

(Submit)دکمه ارسال فرم <input type="submit" name="buttonName“>


(Buttom)ساختن دکمه

<input type="reset" name="buttomName">

submit

reset

:مثال

:مثال

91


<input type="hidden" name="FieldName"value="اطالعات مورد نظر شما">

92

<select name="someName" Size = " 3" multiple="multiple"disabled="disabled">

<option value="value 1" > اولگزینه </option><option value="value 2"> دومگزینه </option><option value="value 3"> سومگزینه </option></select>


(Select)

93


ليست کشويی

:nameاز این شناسه برای تخصیص یک نام به لیست استفاده می

. شود

Size اين شناسه مشخص می کند چه تعدادی از گزينه ها در يک

ب در واقع رتفاع ليست را بر حس. زمان قابل مشاهده باشند

ددی مقدار اين شناسه بايد ع. تعداد گزينه ها مشخص می کند

. بزرگتر از صفر باشد

94


ليست کشويی

multiple="multiple" اضافه <select>در صورتی که این شناسه به تگ

ز شود بازدید کننده می تواند بیش از یک گزینه ا. گزینه های لیست را انتخاب کند

disabled="disabled" ند و اين شناسه ليست را برای کاربر غير فعال می ک

.در نتيجه گزينه های آن امکان انتخاب شدن ندارند

95


<html><head>

<title> سادهيک فريم نمايش </title></head>

<frameset cols="50%,50%"><frame src="page1.htm"><frame src="page2.htm">

</frameset></html>

. استفاده می کنیم framesetاز تگ bodyایجاد فریم در یک صفحه به جای تگ برای : تذکر

96


<FRAMESET>. این تگ به مرورگر می گوید که به جای یک صفحه معمولی منتظر یک دسته فرم باشد

cols="50%,50%"کدام از اين فرمان به مرورگر می گويد که صفحه را به دو قسمت عمودی تقسيم کند و پهنای هر

ه جای درصد از شما می توانيد اين نسبت را تغيير دهيد يا ب. اين قسمتها نيمی از پهنای پنجره باشد

نکنيد که از اما اگر می خواهيد از مقياس درصد استفاده کنيد فراموش. مقياس پيکسل استفاده کنيد

ت درصد اگر فقط برای يکی از اعداد عالم. در بعد از هر عدد استفاده کنيد% نشانه درصد يعنی . استفاده کنيد مرورگر عدد ديگر را در مقياس پيکسل فرض می کند

97


<FRAME SRC="frame_1.htm">این فرمان آدرس صفحهء اولین فریم از سمت چپ را برای

. مرورگر مشخص می کند

<FRAME SRC="test2.htm">مت اين فرمان آدرس صفحه بعدی را برای فريم بعدی از س

.چپ مشخص می کند

98


<html><head><title>نمایش فریمها به صورت افقی و عمودی</title></head><frameset cols="50%,50%"><frame src="page1.htm"><frameset rows="50%,50%">

<frame src="page2.htm"><frame src="page3.htm"></frameset></frameset></html>

99


<a href= " url " target="right"> آموزشHTML </a>

<a href= "url" target="_top"> . لينک در تمام صفحه باز می شوداين </a>می شودپنجره و بدون فریم باز شود درتمام جای اینکه در یک فریم باز لینک به

100


<html><head><title> صفحهکردن فريم در مخفی </ title></head><frameset cols="25%,75%" border="0" framespacing="0" frameborder="0">

<frame src="page1.htm" name="left" scrolling="no"><frame src="page2.htm" name="right"></frameset></html>

101


border="0"داده ایماین شناسه میزان ضخامت کادر اطراف فریم را تعیین می کند که ما در اینجا آنرا صفر قرار

frameborder="0". مقدار حاشيه فريمها را صفر قرار می دهيم تا نمايش داده نشوند

framespacing="0". فاصله بين فريمها را صفر قرار می دهيم تا بين آنها فاصله ای ديده نشود

scrolling="no"تر بود اين شناسه باعث می شود در صورتی که محتويات فريمها از اندازه پنجره بزرگ

. نوار اسکرول بار نمايش داده نشود

102

<body onload="alert "('این صفحه آزمایشی خوش آمدیدبه ')onunload="alert "('از این صفحه خارج شدیدشما ' )onresize="alert" (' اندازه شما

('پنجره را تغییر دادید >


رویدادهای مربوط به پنجره مرورگر

:مثال

104


:دو رويداد در اين دسته قرار می گيرند که در زير آنها را مشاهده می کنيد. استفاده شوندframesetو bodyاين رويدادها بايد فقط در تگهای

onloadاین رویداد باعث می شود تا اسکرپتی که به عنوان مقدار آن قرار داده شده است در هنگام باز شدن

. صفحه اجرا شود

onunloadارج می اسکرپتی که به عنوان مقدار اين شناسه قرار می گيرد در هنگامی که بازديد کننده از صفحه خ

. شود اجرا می شود

onResize. اين رويداد هنگامی که اندازه پنجره مرورگر را تغيير می دهيد اجرا می شود

105

راست به چپ بودن صفحه


.مل کنيمبرای اينکه يک صفحه راست به چپ طراحی کنيم می توانيم به چند طريق ع<<htmlدر تگ dir="rtl"استفاده از شناسه •

در صورتی که . می توان استفاده نمود HTMLاز اين شناسه در بسياری از تگهای

فحه صفحه ای راست به چپ باشد و بخواهيم از قسمتهای چپ به راست نيز در آن ص. استفاده کنيمdir="ltr"استفاده کنيم می توانيم از شناسه

صفحه directionبرای تعیین CSSاستفاده از •

متن يا استفاده از شناسه HEADمثالً استفاده از يک استايل خارجی يا در بخش

"style="direction: rtl در تگهايی که می خواهيم به صورت راست به چپ

نمايش داده شود

106

صفحهدر هنگام طراحی Encodingتنظیم نمایش سایت به زبان فارسی و


<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">

ميباشد <HEAD>به کار بردن متا تگ فوق در داخل تگ : يادآوری

107

<meta name="keywords" content=" شما, کلیدی, کلمات " />

است جهت است که مربوط به موتورهای جستجو htmlیکی دیگر از متاتگ های کلیدی صفحات نیزkeywords:یادآوری

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


گزينه viewمنوی از (Microsoft Internet Explorer):اینترنت اکسپلورر در ویندوز مرورگر •

Encoding گزينه را انتخاب کنيد وutf-8 در صورتی که در ليست اوليه کد پيجهای مختلف. کليک کنيدرا

را از بين کد utf-8نگهداريد و Moreرا مشاهده کنيد نشانگر ماوس خود را روی گزينه utf-8نتوانستيد

. پيجهای مختلف پيدا کرده و روی آن کليک کنيد

ر های می توانيد مسي. در ساير مرورگر ها هم به همين روش بايد عمل کنيد فقط مسير منو ها کمی تفاوت دارد

. زير را دنبال کنيد((Firefox: مرورگر فایر فوکس •

view --> Character Encoding --> unicode (utf-8)يا

view --> Character Encoding --> More Encodings --> Unicode --> Unicode (utf-8)((Opera: مرورگر اپرا •

view --> Encoding --> Unicode --> UTF-8

108

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

در واقع با . آن می باشد styleکارا باشد استفاده درست و بهینه از خصوصیت های موجود در divچیزی که باعث می شود . می کند :به مثال زیر توجه نمائید . می توانید صفحه وب خود را هر طور که می خواهید تقسیم بندی نمائید divکمک


<div style="background-

color:yellow;color:blue;width:100px;height:50px">

<a href= " page1" target="inlineframe1" >site</a>

</div>

<div style="background-

color:orange;color:brown;width:110px;height:30px">

World !

</div>

Hello

World !

:مثال

نمونه برنامه ای دیگرdivاز کاربرد تگ


<html>

<body>

<div style="font-family: Helvetica; font-size: 12pt; border: 1px solid black;" >

<div style="color: #FF0000; border: 1px dotted black;">

<h3> بخش يک< h3>

<p> بسازيدهايتان را بسازيد در غير اينصورت فرد ديگری شما را استخدام می کند تا رويا های او را رويا < p>

</div>

</br>

<div style="color: #FF00FF; border: 1px dashed black;">

<h3> بخش دو< h3>

</p> داشتاز خالقيت زيادی نمی آورد هرچه بيشتر از خالقيت استفاده کنيد بيشتر خواهيد انسان < p>

</div>

</div>

</body>

</html>


<html><body><p> کنیدبزرگتر دیدن هر یک از نقاط بر روی نقطه مورد نظر بر روی نقشه کیلک برای </ p><img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><map name="planetmap"><area shape="rect" coords="0,0,20,20" alt="Sun" href="sun.htm"><area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"><area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"></map></body></html>

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

<area><map>

برای تقسیم بندی spanتگ از .کندگذاری می تواند بخشی از یک نوشته را نشانه spanتگویژگی متون موجود استفاده می شود با استفاده از این خاصیت می توان به هر قسمت از متن

.های خاصی را اعمال کرد


spanتگ

<p>this <span style="color:red">is a</span> paragraph.</p>

http://sitedesign-co.com/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA/%D8%AA%DA%AF-span

http://sitedesign-co.com/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA/%D8%AA%DA%AF-span

( می تواند هم به صورت تگ به کار رود و هم به صورت شناسه درون تگهای دیگرstyle)و کاربرد آن Styleتگ


>p style=" color:white; border:solid 1px red; width:100px; background-color:blue; font-size:10pt; text-align:center; ">

پاراگراف متن </ p<<html><head><style>h1 {color:red;}p {color:blue;}</style></head><body>

<h1>This is a heading</h1><p>This is a paragraph.</p>

</body></html>

یک مثال کاربردی دیگر در

<style> مورد تگ

Style به صورت

شناسه

:Flash fileبرای جاسازی<object>چگونگی استفاده از تگ


<html><body><object width="400" height="400" data="نام فايل.swf"></object></body></html>


http://www.w3schools.com : منابع

http://learn.shayhowe.comhttp://webgoo.ir/

http://neopersia.org/

http://neopersia.org/منابع




web html نابز سيون...

Documents