About iranw3.com

اين وب سايت آموزشي فعاليت خود را در تاريخ 27 مرداد 1383 آغاز کرد. iranw3 که مخفف کلمات iran world wide web است، يک پايگاه اطلاعاتي تخصصي در زمينه آموزش اصول مقدماتي و پيشرفته برنامه نويسي تحت وب، طراحي و مديريت يک وب سايت مي باشد که با آموزش زبان پايه وب يعني HTML کار خود را شروع کرد.

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

در حال حاضر با پيشرفت و توسعه IT و با توجه به کمبود محسوس زمان براي فراگيري مطالب در زمينه هاي مختلف، آموزشهاي از راه دور و آموزشگاههاي مجازي ، جايگاه ويژه اي را به خود اختصاص داده اند. اينگونه سايتها مي توانند به عنوان يک مرجع هميشه در دسترس، نياز هاي اطلاعاتي کاربران را در هر کجا که باشند برطرف کنند.

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

منابع استفاده شده برای اين سايت

:کتابها

Master VISUALLY™ HTML 4 and XHTML™ 1

: وب سايتها

W3C
htmlgoodies
w3schools

صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Sample source code --- نمونه کد

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

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

نکته مهم: برای حفظ حق وحقوق نویسندگان این کدها و حمایت از زحمتی که کشیده اند لطفاً اطلاعات مربوط به آنها را از اسکریپتها حذف نکنید.

بعضی از اين کدها آماده کپی و بعضی قابل دانلود هستند که برای دانلود کردن و استفاده از آنها نياز به يکی از برنامه های WinZip و يا WinRAR داريد.

مرورگر و پنجره ها | متن و لينک | موس
تاريخ، ساعت و تقويم | فرم و ايميل | منوها
عکس | بازی | بنرها و تبليغات
ساخت کد |  |

شما مي توانيد در قسمت زير هم کدهاي مورد نظر خود را در وب سايت Planet-Source-Code جستجو کنيد.

Planet-Source-Code Search Thousands of lines of free code at www.Planet-Source-Code.com
Vb World Java & Javascript World C++ World ASP World
Advanced Search Browse

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


contact form --- فرم ارتباطی

:: فرم ارتباط ::

لطفاً قبل از ارسال، به نکات زير توجه فرماييد:

وارد کردن آدرس ايميل برای فرستادن پاسخ و يا تماس بعدی با شما ، ضروری می باشد.
شما می توانيد متن پيغام خود را بصورت فارسی ، فارسی انگليسی و يا انگليسی ارسال کنيد.
نام و نام خانوادگی
آدرس ايميل
موضوع

" لطفاً نوع مرورگر خود را مشخص کنيد "

نسخه مرورگر

متن پيغام

          صفحه اصلی    |    نقشه سايت    |    ارتباط    |     درباره سايت    |     نظرخواهی

      webmaster@iranw3.com

 Copyright © 2004-2005 iranw3. All rights reserved .


<iranw3.com> HTML and web design tutorial --- آموزش اچ تي ام ال و زبان هاي برنامه نويسي تحت وب ، طراحي و ساخت، مديريت وب سايت وآموزش نسخه هاي جديد اچتمل به زبان فارسي، الگو و طرح هاي وب سايت و نمونه کد

Google
Web iranw3.com
مطالب آموزشی

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

به سايت iranw3 خوش آمديد

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

اين سايت با تکيه بر استانداردهای W3C سعی بر آن دارد که قدمی هر چند کوچک برای برطرف کردن نيازهای اطلاعاتی علاقمندان در زمينه وب بردارد تا همگام با پيشرفت و توسعه IT بتواند وظيفه اطلاع رسانی را در ميان هموطنان عزيز به بهترين نحو ممکن به انجام برساند.

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

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

آموزش مقدماتی زبان جاوااسکريپت به پايان رسيد و بزودی قسمت پيشرفته آن هم به سايت اضافه خواهد شد.

يک بخش جديد اضافه شده که در آن مطالب آموزشي کوتاه قرار مي گيرد. شما هم اگر مايل هستيد مي توانيد مطالب خود را بفرستيد.

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

لطفاً با قرار دادن لوگو يا لينک ما اين سايت را حمايت کنيد.

در صورت مشاهده هر گونه ايراد لطفاً آنرا اطلاع دهيد.

نظرخواهی

با تشکر از توجه شما به اين سايت، لطفاً با دادن نظرات خود ما را ياری کنيد

ازچه مرورگری استفاده می کنيد؟

فرم نظرخواهی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


HTML Exam --- آزمون

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

در آينده نزديک آزمون HTML راه اندازي خواهد شد و شما در اين قسمت اطلاعات خود را در اين زمينه مي توانيد آزمايش کنيد.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Invite your friends --- معرفي اين سايت به ديگران

:: معرفي اين سايت به ديگران ::
اگر مايل هستيد که شخصي را به ديدن اين وب سايت دعوت کنيد، لطفاً فرم زير را پر کنيد. در نظر داشته باشيد که وارد کردن آدرسهاي ايميل فرستنده و گيرنده الزامي مي باشد.
 | آدرس ايميل شما:
 | آدرس ايميل گيرنده:


Link to us --- لينک به اين سايت

با تشکر فراوان از توجه شما به اين سايت، مي توانيد براي قرار دادن لوگوي اين سايت در وب سايت يا وبلاگ خود، يکي از کدهاي زير را انتخاب کنيد. در ضمن اين سايت آماده تبادل لوگو و لينک با سايتها و وبلاگهاي مفيد ميباشد.

HTML and web design learning

HTML and web design learning

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Websites links --- لینکهای مفید

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

 | سایتهای خارجی | سایتهای ایرانی |
Visit W3Schools | www.w3.org www.htmlgoodies.com www.w3schools.com www.techtutorials.net www.tutorialized.com | www.itcnetwork.tv www.majidonline.com www.amoozeshi.com www.iranianitc.com www.etvto.ir www.iranasp.net ict.moe.org.ir www.nashreolum.com www.javascript.ir www.keyvan1.com www.rooza.com www.iranphp.net www.w3schoolsir.com www.itiran.com www.iritn.com www.idevcenter.com www.prdev.com www.ccwmagazine.com www.webeiran.com www.khaterat.com/www www.mohassel.com ielearning.blogspot.com eve.mihanblog.com zamanlearning.blogsky.com www.adabkade.persianblog.com www.takmobile.com | MajidOnline - The First Persian Graphic, Web & Multimedia Reference وبلاگ گروهی حوا Farsi search engine Dev.ir مرجع برنامه نويسان Sakha Ravesh Co.

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


iranw3 contact form

با تشکر و سپاس فراوان از توجه شما به اين سايت

مطالب آموزشي تا چه حد براي شما مفيد بوده است؟ خيلي زياد خوب متوسط خيلي کم | آيا مطالب آموزشي اين سايت، ساده و قابل درک است؟ بله کاملاً اکثر مطالب، بله خيلي کم غير قابل فهم
آيا مايل هستيد در صورت نياز بطور داوطلبانه براي اين سايت فعاليت کنيد؟ بله حتماً شايد خير | سرعت باز شدن و تکميل صفحات چگونه است؟ عالي خوب مناسب کند

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Site Map --- نقشه سايت

نقشه و راهنمای سايت

(Site Map)

1. (Homepage)صفحه اصلي

2. HTML 4.0شروع آموزش

2.1. HTMLمروري بر وب و

تاريخچه

شروع از ابتدا

ساخت اولين صفحه وب

2.2. HTMLعناصر و دستورات زبان

DTDآشنايی با يک صفحه و تگهاي قسمت سر (Head)

آشنايی با قسمت بدنه (body)

(Text)افزودن متن به يک صفحه

آرايش متن (formatting text)

(Lists)ساختن ليستها

(Links)درست کردن لينک

(Images) اضافه کردن عکس به صفحه

نحوه ساختن نقشه تصويری (Image Map)

(Tables)دستورات ساخت جدولها

(Forms)نحوه درست کردن فرم

(Frames)درست کردن فريم ها

نحوه ساخت Iframe

(Sound & Video)افزودن صدا و تصوير

3. تغييرات درنسخه HTML 4.01

4. درک XHTML

5. استايل شيت ها (CSS)

6. آموزش جاوااسکریپت

7. فارسی نويسی در وب

8. جدول علامتها و کدهای ASCII

9. جدول رنگهای استاندارد وب

10. بررسی و بازبينی صفحات ساخته شده (Checking WebPages)

11. انتقال صفحات ساخته شده به سرور (Uploading)

12. نکاتی درباره موتورهای جستجو (Search engine)

13. ثبت سايت در گوگل (Google)

14. مطالب کوتاه آموزشی

--------------------------------------------------------------------------------

- فرم ارتباطی

- فرم نظرخواهی

- درباره سايت

- پیوند به سایت

- لینکهای مفید

- جستجوی کد

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


مطالب کوتاه آموزشي

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

در اين قسمت قصد داريم تا مطالب کوتاه آموزشي را در اختيار علاقمندان قرار دهيم. اگر شما هم مايل به همکاري در اين زمينه هستيد و ميخواهيد مقاله اي را ارسال کنيد، لطفاً با ما تماس بگيريد.

plug-in چيست؟

FTP چیست؟

Upload و راه اندازی وب سایت توسط CuteFTP

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Poll - results

" ازچه مرورگری استفاده می کنيد؟ "
77% ( 251 رأی ) | Internet Explorer
77% ( 251 رأی )
1% ( 4 رأی ) | Netscape
1% ( 4 رأی )
10% ( 32 رأی ) | Opera
10% ( 32 رأی )
12% ( 40 رأی ) | Mozilla
12% ( 40 رأی )
کل آراء ثبت شده : 327

بستن صفحه


Results

" مطالب آموزشي تا چه حد براي شما مفيد بوده است؟ "
64% ( 27 رأی ) | خيلي زياد
64%
33% ( 14 رأی ) | خوب
33%
0% ( 0 رأی ) | متوسط
0%
2% ( 1 رأی ) | خيلي کم
2%
کل آراء ثبت شده : 42

بستن صفحه


Results

" آيا مطالب آموزشي اين سايت، ساده و قابل درک است؟ "
50% ( 22 رأی ) | بله کاملاً
50%
45% ( 20 رأی ) | اکثر مطالب، بله
45%
2% ( 1 رأی ) | خيلي کم
2%
2% ( 1 رأی ) | غير قابل فهم
2%
کل آراء ثبت شده : 44

بستن صفحه


Results

" آيا مايل هستيد در صورت نياز بطور داوطلبانه براي اين سايت فعاليت کنيد؟ "
72% ( 26 رأی ) | بله حتماً
72%
28% ( 10 رأی ) | شايد
28%
0% ( 0 رأی ) | خير
0%
کل آراء ثبت شده : 36

بستن صفحه


Results

" سرعت باز شدن و تکميل صفحات چگونه است؟ "
61% ( 23 رأی ) | عالي
61%
29% ( 11 رأی ) | خوب
29%
8% ( 3 رأی ) | مناسب
8%
3% ( 1 رأی ) | کند
3%
کل آراء ثبت شده : 38

بستن صفحه


نمايش بنر در هر 45 ثانيه

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : کد زير هر 45 ثانيه يک عکس يا بنر تبليغاتی را نمايش خواهد داد. شما می توانيد بجای عبارت yourimage.gif عکس و بنر خود را قرار دهيد و آدرس لينک مورد نظر را در جلوی آن وارد کنيد.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


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

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : کد ساده برای تکرار بنرها در صفحه. تعداد بنرها و مقادير مورد نظر خود را در جاهای مشخص وارد کنيد.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


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

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : مدلی ديگر از نمايش تصادفی بنرهای تبليغاتی در صفحه وب.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


بنرها و تبلیغات

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

بنرها و تبلیغات

نمايش تصادفی بنرهای تبليغاتی ( دانلود )
نمايش بنر در هر 45 ثانيه
نمايش تصادفی تبليغات متنی ( دانلود )
کد ساده برای تبليغات در صفحه
مدلی ديگر از نمايش تصادفی تبليغات

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


اطلاعات مرورگر همراه با ساعت

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : اطلاعات مختصری در مورد مرورگر همراه با ساعت

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


پنجره متحرک

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : باز کردن یک پنجره متحرک، اين کد بايد در قسمت head صفحه وارد شود.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


بستن پنجره بعد از زمان معین

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : باز شدن يک پنجره و بسته شدن آن بعد از مدت زمان تعيين شده. کد زير در قسمت head وارد شود و سپس رویداد زير را به تگ body اضافه کنيد:

onload="KillMe();self.focus()"

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


پیغام در نوار وضعیت

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : پيغام متحرک در نوار وضعيت

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


نمایش سورس کد صفحه

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : نمايش سورس کد سند اچ تی ام ال توسط يک دکمه

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


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

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : قسمت اول را که با STEP1 مشخص کرده، در head وارد کنيد و قسمت دوم يعنی STEP2 را به body اضافه کنيد. قسمت سوم هم اختياری است.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


بستن پنجره بدون اخطار

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : بستن پنجره بدون اخطار به کاربر. شما می توانيد از خط زير هم استفاده کنيد.

<Button onclick="window.opener=null;window.close()">CLOSE THE WINDOW</Button>

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


جستجو در موتورهای جستجو معروف

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : جستجوکردن در چندين موتور جستجو معروف. اين کد بصورت يک صفحه اچ تی ام ال است که در صورت نياز می توانيد اسکريپت را از آن جدا کنيد.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


تغییر رنگ زمینه صفحه و فونتها

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : تغيير رنگ زمينه صفحه وب و فونتهای داخل آن بصورت دستی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


fullscreen window

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

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

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


پیدا کردن نوع مرورگر

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : پيدا کردن نوع و نسخه مرورگر. اين کد از مرورگر firefox پشتيبانی نمی کند.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


جلوگيری از فريم

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : جلوگيری از قرار دادن صفحات سايت در فريم.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


redirect

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : انتقال کاربر به صفحه ای ديگر بعد از زمانی معين.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


نمايش سورس کد صفحات پويا

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : نشان دادن سورس کد صفحات وب . اين کد مناسب برای صفحاتی است که بصورت پويا طراحی شده اند.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


متن متحرک در نوار وضعيت

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : نمايش متحرک متن در نوار وضعيت مرورگر.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


مرورگر و پنجره ها

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

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

اطلاعات مرورگر همراه با ساعت
باز کردن دو پنجره با هم
باز کردن پنجره متحرک
بستن پنجره بعد از زمان معين
پيغام متحرک در نوار وضعيت
نشان دادن سورس کد صفحه وب توسط يک دکمه
نمايش يک کادر بر روی صفحه بصورت لايه
بستن پنجره مرورگر بدون سؤال
جستجو در چندين موتور جستجو معروف
تغيير رنگ زمينه و فونتهای صفحه وب
باز شدن پنجره بصورت fullscreen
پيدا کردن نوع و نسخه مرورگر
جلوگيری از قرار گرفتن صفحات در فريم
انتقال کاربر به صفحه ای ديگر
نمايش سورس کد صفحات پويا
متن متحرک در نوار وضعيت
نوع ديگری از حرکت متن در نوار وضعيت

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


ماشين حساب

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : يک ماشين حساب ساده

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


ساعت ديجيتالی

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : يک ساعت جالب

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


ماشين حساب حرفه ای

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : ماشين حساب حرفه ای

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


ساعت ديجيتالی

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : يک ساعت ديجيتالی ساده همراه با ثانيه شمار

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


ساعت و تقويم

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : ساعت و تقويم روز در کنار نشانگر موس

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


ساعت در نوار وضعيت

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : ساعت ديجيتالی در نوار وضعيت مرورگر

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


ساعت ديجيتالی و آنالوگ

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : ساعت ديجيتالی و آنالوگ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


نمايش مدت زمان بارگذاری صفحه

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : نمايش مدت زمان بارگذاری صفحه وب

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


تاریخ، ساعت، تقویم، ماشين حساب

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

تاریخ، ساعت، تقویم، ماشين حساب

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

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


بررسی اطلاعات فرم

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

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

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


بررسی اطلاعات فرم و ارسال ايميل

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : اين کد، اطلاعات فرم را ابتدا بررسی می کند تا بصورت صحيح وارد شده باشند و سپس به برنامه outlook می فرستد تا آماده ارسال ايميل توسط کاربر باشند.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


بررسی ايميل

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : بررسی ايميل وارد شده در فرم

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


بررسی ايميل

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : بررسی ايميل وارد شده. اين کد الگوی بهتری برای چک کردن آدرس وارد شده دارد.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


فرم سفارش کالا

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : يک فرم ساده برای سفارش کالا همراه با محاسبه قيمت.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


dynamic dropdown list

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : يک ليست dropdown متغير. با انتخاب يک گزينه از يک ليست، گزينه های ليست بعدی تغيير می کند.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


فرم و ایمیل

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

فرم و ایمیل

بررسی اطلاعات فرم قبل از ارسال
بررسی کامل اطلاعات يک فرم ( دانلود )
دريافت اطلاعات فرم و فرستادن آن به Outlook
چک کردن آدرس ايميل
نوع بهتری از بررسی ايميل
فرم ساده سفارش کالا همراه با محاسبه قيمت
تغيير گزينه های يک ليست توسط يک ليست ديگر

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


بازیهای جاوااسکریپت

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

بازیهای جاوااسکریپت

کليه کدهای بازيها، آماده دانلود می باشند.

بازی دو نفره BattleShip
block breaker
اتومبيل رانی
شطرنج
پينگ پونگ
بازی حرف جادوئی
يک مدل پازل
بازی معروف مار
يک بازی جالب
بازی tetris

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


ساخت آنلاین کدهای جاوااسکریپت

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

ساخت آنلاین کد

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

ساخت پنجره های popup
ساخت کد تغيير رنگ scrollbar
خلق متا تگ های اچ تی ام ال
ساخت لينک mailto
کنترل رنگ لينک توسط استايل شيت
کنترل کادر های متنی در فرمها توسط استايل شيت
کنترل دکمه های فرم توسط استايل شيت
ساخت منوهای dropdown
رمزدار کردن سورس صفحات وب

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


جلوگيری از ذخيره عکس

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

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

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


عکس معلق در صفحه

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : اين کد باعث معلق شدن عکس در صفحه می گردد. يک عکس بنام image.jpg در پوشه ای که صفحه وب اين کد قرار دارد بگذاريد و يا اينکه در تگ img در انتهای کد، نام عکس مورد نظر خود را بجای image.jpg بنويسيد. بعد از ذخيره کردن سند اچ تی ام ال و قرار دادن عکس در همان پوشه می توانيد با فشردن دکمه s سرعت عکس را زياد و دکمه d روی کيبورد، سرعت عکس را کاهش دهيد.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


عکس ها

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

کدهای مربوط به عکسها

قرار دادن انيميشن راهنما در صفحه مانند آفيس ( دانلود ) فقط مرورگر IE
جلوگيری از ذخيره کردن عکس در صفحه وب
يک slideshow جالب ( دانلود )
قرار دادن عکس در کنار موس ( دانلود )
عکس معلق در صفحه

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


منوها

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

کدهای مربوط به منوها

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

منو شماره يک
منو شماره دو
منو شماره سه
منو شماره چهار
منو شماره پنج
منو شماره شش
منو شماره هفت
منو شماره هشت
منو شماره نه
منو شماره ده
منو شماره يازده
منو شماره دوازده
منو شماره سيزده
منو شماره چهارده

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


غير فعال کردن کليک راست موس

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : غير فعال کردن کليک راست

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


دنباله دار کردن موس

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : دنباله دار کردن موس با متن

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


ساخت لينک برای کليک راست

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : ساختن لينک در منوی کليک راست موس

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


موس

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

کدهای مربوط به رویدادهای موس

غير فعال کردن کليک راست
سفارشی کردن منو در کليک راست ( دانلود )
دنباله دار کردن موس ( دانلود )
نوع ديگر برای دنباله دار کردن موس ( دانلود )
نوعی ديگر برای منوی کليک راست ( دانلود )
دنباله دار کردن موس با متن
ساخت لينک برای کليک راست

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


حرکت متن در صفحه

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : حرکت متن در صفحه مانند تگ marquee در اچ تی ام ال

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


متن برافروخته

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : ساختن متن بصورت گداخته و برافروخته.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


رمزدار کردن متن

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : رمز دار کردن متن و برعکس

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


محو متن و نمايش متنی ديگر

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : محو کردن متن و لينک ها و سپس نمايش يک متن ديگر.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


حرکت متن در نوار وضعيت

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : متن متحرک در نوار وضعيت

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


حرکت متن بصورت عمودی

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : حرکت متن بصورت عودی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


حرکت متن با کنترل کاربر

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توضيح : حرکت عمودی متن بصورت دستی. هرگاه کاربر موس خود را روی يکی از کلمات scroll up و scroll down ببرد، متن حرکت خواهد کرد.

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


متن و لینکها

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

کدهای مربوط به متن و لینکها

حرکت متن در صفحه مانند تگ marquee
متن بصورت گداخته
رمز دار کردن متن
محو متن و نمايش متنی ديگر
رمزدار کردن متن و بالعکس ( دانلود )
مرتب کردن خطها به ترتيب حروف الفبا در textarea ( دانلود )
حرکت متن در نوار وضعيت
حرکت متن بصورت عمودی
حرکت متن با کنترل کاربر
کادر textarea با شمارشگر کاراکتر ( دانلود )

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


StyleSheet Attributes (part one) --- خصوصيات استايل شيت قسمت اول

Google
Web iranw3.com
مطالب آموزشی

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

خصوصيات استايل شيت قسمت اول

برای دسترسی سريع از لينکهای زير استفاده کنيد:

Style برای عنصر متن
Style برای زمينه صفحه و يا جدولها

در اين قسمت ميپردازيم به خصوصيات style ها که ابتدا از عنصر متن شروع ميکنيم که در تگهاي <p><div><span> بيشتر کاربرد دارد.

Style براي عنصر متن

  • text-align محل قرارگيري متن در يک سطر را کنترل ميکند و با justify, left, center, right مقداردهي ميشود.
  • text-indent براي دندانه دار کردن متن بکار ميرود و با عدد مقدار دهي ميشود که اگر در مقياس پيکسل باشد بعد از عدد بايد px نوشته شود مانند: text-indent:20px و اگر با درصد مقداردهي شود بايد علامت % را بگذاريد.
  • letter-spacing اندازه بين حروف را کنترل ميکند که براي حروف فارسي مناسب نيست و با عدد مقداردهي ميشود که بعد از عدد px يا em نوشته ميشود که در em بين حروف فاصله اي به اندازه حرف m توليد ميشود.
  • line-height براي کنترل فاصله خطوط از هم بکار ميرود و با عدد سپس px مقداردهي ميشود.
  • font-family براي تعيين نوع فونت بکار ميرود که در اين خصوصيت ميتوانيد چندين فونت را قرار دهيد که اگر سيستم بيننده سايت يک از آن فونتها را نداشت از ديگري استفاده کند، بدين صورت:font-family:Arial, Tahoma, Times New Roman
  • font-style آرايش فونت را از لحاظ اريب بودن تعيين ميکند که ميتوانيد از normal, italic, oblique استفاده کنيد.
  • font-weight آرايش حروف را از لحاظ ضخامت تعيين ميکند که به دو روش مقدار ميدهيد ، با کلمات lighter, normal, bold, bolder و يا با اعداد بين 100 تا 900 .
  • font-size اندازه حروف را به سه مدل کنترل ميکند : در مدل absolute sizes از کلمات xxsmall, small, medium, large, xlarge, xxlarge در مدل relative sizes از smaller, larger استفاده ميکنيم و در مدل font-point-size اعداد 1 تا 12 قرار ميدهيم که بعد از عدد pt بايد بنويسيم .

نکته: شما ميتوانيد چند خصوصيت بالا را که مربوط به font ميباشد را يکجا بصورت خلاصه تعريف کنيد که در اين حالت نيازي به نوشتن خصوصيات نيست و فقط مقادير آنها را به ترتيب زير مينويسم:

font-style,font-weight,font-size,font-family

کلمه font را به عنوان selector مينويسيم و مقاديرخصوصيات را به ترتيب بالا با رعايت فاصله دربين { } قرار ميدهيم،

font { italic bold 20pt “Arial” Tahoma }

  • Color رنگ متن را تعيين ميکند که هم اسم رنگ و يا کد هگز رنگ را مينويسيد.
  • text-decoration اين خصوصيت وظيفه کشيدن خط براي حروف را دارد که ميتوان از underline براي کشيدن خط زير حروف، از overline در بالاي حروف، line-through بر روي حروف استفاده کرد و اگر نيازي به کشيدن خط نيست از none استفاده ميشود، همچنين blink که براي چشمک زدن حروف بکار ميرود ولي مرورگر اينترنت اکسپلورر آنرا نمايش نميدهد.
  • text-transform اين خصوصيت حروف را براي بعضي از زبانها مانند انگليسي کوچک و بزرگ ميکند و کاربردي براي فارسي ندارد. مقادير مربوط به آن none, capitalize, uppercase, lowercase است.

Style براي زمينه صفحه و يا جدولها

  • background-color توسط اين خصوصيت رنگ زمينه را کنترل ميکنيد که اسم رنگ يا مقدار مخلوط سه رنگ قرمز، سبزوآبي را که rgb مينامند مينويسيد براي هر رنگ از عدد 0 تا عدد 255 در نظر گرفته شده است. Style=”background-color: rgb(10,255,0)” داخل پرانتز عدد 10 نمايانگر رنگ قرمز و 255 رنگ سبز و 0 رنگ آبي است که شما هم بايد به همين ترتيب بنويسيد.
  • background-image توسط اين خصوصيت ميتوانيد يک عکس به زمينه صفحه يا جدول اضافه کنيد.

background-image: { url ( www.sitename.com/images/image.gif ) }

  • background-repeat زمانيکه بوسيله خصوصيت بالا يک عکس به زمينه صفحه يا يک جدول اضافه ميکنيد، آن عکس نسبت به اندازه اي که دارد آنقدر تکرار ميشود تا زمينه صفحه را پر کند اما توسط اين خصوصيت ميتوانيد تکرار آن را کنترل کنيد که اگر مقدار را repeat-x قرار دهيد فقط يک رديف بصورت افقي تکرار ميشود و اگر repeat-y باشد بصورت عمودي و no-repeat باشد همان عکس فقط ديده ميشود بدون تکرار.
  • background-attachment اگر مقدار اين خصوصيت را fixed قرار دهيد عکسي که در زمينه صفحه است ثابت ميماند و عناصر و محتواي صفحه با scroll کردن بالا و پايين خواهند شد ولي اگر مقدار را scroll بگذاريم همراه با بقيه عناصر حرکت ميکند.
  • background-position به کمک اين خصوصيت محل قرارگيري عکس در زمينه صفحه را تعيين ميکنيد که مقادير آن عبارتند از، top,bottom,center,left,right

نکته: شما ميتوانيد همه خصوصيات مربوط به زمينه background يا چند تا از آنها را بطور يکجا تعريف کنيد که با اين موضوع آشنا هستيد. و اما ترتيب قرار گرفتن آنها بدين صورت است،

background-color,background-image,background-repeat,

background-attachment,background-position

به مثال زير دقت بفرماييد:

background: { green url(image.gif) no-repeat fixed bottom }

style=” background: green url(image.gif) no-repeat scroll bottom right “

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

خصوصيات استايل شيت قسمت دوم

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


StyleSheet Attributes (part two) --- خصوصيات استايل شيت قسمت دوم

Google
Web iranw3.com
مطالب آموزشی

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

خصوصيات استايل شيت قسمت دوم

برای دسترسی سريع از لينکهای زير استفاده کنيد:

style برای حاشيه
style برای کادر
style برای کنترل طول و عرض
style برای alignment
style برای ليستها
style برای scrollbar
style برای نشانگر موس cursor

style براي حاشيه margin

margin براي افزودن حاشيه به کناره هاي عناصر داخل صفحه مانند پاراگرافها، عکسها يا حتي خود صفحه بکار ميرود که توسط اين خصوصيت حاشيه را در چهار طرف با دادن مقادير عددي بر حسب پيکسل و يا درصد ميتوانيد کنترل کنيد. به اين نکته توجه فرماييد که اگر براي هر طرف مقادير متفاوت ميخواهيد بکاربريد پس بايد چهار مقدار با فاصله از هم بنويسيد مانند: margin:20px 45px 40px 100px که اولين عدد از سمت چپ مربوط به حاشيه بالاي عنصر و بترتيب براي راست، پايين و چپ محاسبه ميشود. و يا ميتوانيد دو عدد بکار بريد که مقدار اول حاشيه بالا و پايين و مقدار دوم حاشيه چپ و راست را کنترل ميکند و همچنين اگر حاشيه ها بايد بمقدار مساوي باشند فقط يک عدد کافي است.

padding اين خصوصيت هم مانند margin عمل ميکند.

Style براي کادر border

border اين خصوصيت عناصر صفحه را داخل يک کادر قرار ميدهد که در سه قسمت مقدار دهي ميشود، اولين مقدار مدلهاي مختلف کادر را تعيين ميکند که مقادير آن عبارتند از: none, dotted, dashed, solid, double, groove, ridge, inset, outset دومين مقدار مربوط به تعيين ضخامت کادر است که با thin,medium,thick و يا با عدد بهمراه px و آخرين مقدار رنگ کادر را کنترل ميکند، مانند:

style=” border: groove thin green”

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

margin-top: 40px
padding-left: 100px
border-bottom: dotted

Style براي کنترل طول height و عرض width

height, width همانطور که ميدانيد اين دو خصوصيت براي کنترل ابعاد يک عنصر مانند جدول و يا يک عکس بکار ميروند که با عدد بر حسب پيکسل و با علامت مشخصه px و يا با درصد مقدار دهي ميشوند در ضمن شما ميتوانيد مقدار auto هم قرار دهيد که آن عنصردر اندازه حقيقي خود ظاهر شود.

Style براي قرار گرفتن دو عنصر در کنار هم alignment

float اين خصوصيت مانند align عمل ميکند و با none, left, right مقداردهي ميشود محل قرار گيري دو عنصر را در کنار هم کنترل ميکند.

clear اين خصوصيت برعکس float است و مشخص ميکند که در کدام طرف يا در هر دو سمت هيچ عنصري نباشد که با none, left, right, both هم مقداردهي ميشود.

Style براي ليستها lists

list-style-type نوع ترتيب قرارگرفتن ليستها را کنترل ميکند که عدد يا علامت ابتداي هر گزينه در ليست بيايد که ميتوانيد از مقادير none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha استفاده کنيد.

list-style-image اگر بخواهيد بجاي مقادير بالا از عکس دلخواه خودتان براي علامتهاي ابتداي گزينه ها استفاده کنيد ميتوانيد اين خصوصيت را بکار بريد.

list-style-image: url ( images/bullet.gif )

list-style-position اين خصوصيت گزينه هاي ليست را دندانه دار ميکند و با inside, outside مقدار دهي ميشود که بصورت پيش فرض براي ليستها outside در نظر گرفته ميشود.

نکته: بهتر است در اين خصوصيات تگ li را به عنوان selector انتخاب کنيد و همچنين اين سه خصوصيت را ميتوانيد بصورت خلاصه و يکجا بکار بريد

li { list-style: circle url(bullet.gif) inside }

<li style=” list-style: circle url(images/bullet.gif) inside “>

همانطور که مشاهده ميکنيد ترتيب قرار گرفتن مقادير ابتدا type سپس image و در آخر position است.

Style براي scrollbar

اگر شما بخواهيد رنگ scrollbar مرورگر را تغيير دهيد ميتوانيد style زير را به قسمت head صفحه اضافه کنيد:

<style type="text/css">

body
{
scrollbar-base-color: orange;
scrollbar-arrow-color: green;
scrollbar-darkshadow-color: blue;
}
</style>

البته متناسب با رنگ آميزي صفحه ميتوانيد نام رنگها را تغيير دهيد. در هر عنصر ديگري که از scrollbar استفاده ميشود هم ميتوانيد با اضافه کردن خصوصيت style=” “ به تگ مربوطه، رنگ آنرا کنترل کنيد. بطور مثال براي تغيير رنگ scrollbar در textarea داخل يک فرم ، بصورت زير عمل ميکنيد:

<form>
<textarea cols="10" rows="10"
style="scrollbar-base-color:pink;scrollbar-arrow-color:purple;">
Text in the box
</textarea>
</form>

Style براي نشانگر موس cursor

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

cursor: auto نشانگر بصورت معمول نمايش داده ميشود.

cursor: crosshair بشکل علامت مثبت است.

cursor: default شکل پيش فرض خود را دارد.

cursor: hand مانند لينکها شکل دست بخود ميگيرد.

cursor: e-resize بصورت فلش شرقي غربي است.

cursor: n-resize فلش شمالي جنوبي است.

cursor: ne-resize فلش شمالشرقي به جنوبغربي.

cursor: nw-resize برعکس حالت بالا.

cursor: help يک علامت سوال اضافه ميکند.

cursor: move فلش در چهارجهت .

cursor: text بشکل نشانگر برروي متن است.

cursor: wait شکل ساعت شني براي انتظار را اضافه ميکند.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

فارسی نويسی در وب

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Cascading StyleSheet learning --- آموزش استايل شيت

Google
Web iranw3.com
مطالب آموزشی

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

Cascading Style Sheet

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

با استايل شيت چه کارهايي ميتوانيد انجام دهيد؟
تعيين الگو
روشهاي تعريف ااگو
تعريف الگو از طريق class
فراخواني فايل css در تگ <link>

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

با استايل شيت چه کارهايي ميتوانيد انجام دهيد؟

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

تعيين الگو و style

هر style بايد براي يک تگ خاص تعريف شود . به محتواي داخل تگي که ميخواهيم يک style نسبت دهيم selector يا انتخاب کننده ميگويند که ااگوي تعريف شده در تگ آغاز کننده يک عنصر تا تگ پايان دهنده آن تاثير خواهد داشت.

براي تعيين و تعريف يک الگو ابتدا بايد selector را مشخص و بنويسيم مانند h1 سپس خصوصيات و مقادير آنها را بين دو علامت { } بگذاريم که طرز نوشتن خصوصيت و مقدار آن بين { } به اين ترتيب ميباشد:

ابتدا خصوصيت را نوشته سپس علامت : ميگذاريم و بعد مقدار مشخصه آنرا مينويسيم ،

h1 { color:green }

اگر بخواهيم چند خصوصيت را به يک selector نسبت دهيم ، بعد از هر کدام يک ; ميگذاريم،

h1 { color:green; text-align:center }

روشهاي تعريف ااگو و style

Style ها را به سه روش ميتوان تعريف کرد:

  • روش اول: به عنوان يک الگوي خارجي که اطلاعات در يک فايل نوشته ميشود و با پسوند .css ذخيره ميشود که در تگ <link> داخل قسمت head آدرس دهي و فراخوانده ميشود.
  • روش دوم: style را ميتوانيم در قسمت head نوشته و جاسازي کنيم که با تگهاي<style></style> مشخص ميشوند.
  • روش سوم: با قرار دادن style به عنوان خصوصيت در يک تگ و مقدار دهي آن. مانند تگ زير:

<div style=”color:green”>

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

<style>
body { color:yellow; background-color:red }
h1,h2, h3, p { color:green }
</style>

تعريف الگو از طريق class

گاهي اوقات يک style به روشهاي اول يا دوم تعريف ميشود، اما شما نميخواهيد که آن الگو در همه جا اعمال شود، پس مياييد يک اسم واحد برايselector انتخاب ميکنيد ، بدين ترتيب که بلافاصله بعد از selector يک نقطه ميگذاريد و اسمي را مينويسيد. پس از اين کار در هر تگي که نياز به آن الگو هست خصوصيت class=” “ را مينويسيم و برابر با آن اسم قرار ميدهيم،

<head>
<style>
p.name { color:green }
</style>
</head>
<body>
<p class=”name”>……..</p>
</body>

فراخواني فايل css در تگ <link>

ارزش واقعي style sheet زماني به چشم ميايد که يکبار آنرا تعريف کنيد و در تمام صفحات از آن بهره ببريد. براي اين منظور شما فقط از طريق روش اول ميتوانيد اينکار را انجام دهيد، بدين ترتيب که style ها را در برنامه ويرايشگر متن مانند notepad مينويسيد و سپس آن فايل را با پسوند .css ذخيره کرده و در دايرکتوري اصلي وب سايتتان قرار ميدهيد. css مخفف C ascading Style Sheet است.

نکته: در اين روش نيازي به نوشتن تگهاي<style></style> نيست و فقط selector ها و خصوصيات را مينويسيد. در صورت رعايت نکردن اين موضوع الگوهاي تعريف شده در آن فايل در صفحات اعمال نخواهند شد.

پس از ذخيره فايل style sheet ميتوانيد براي هر صفحه که ميخواهيد آنرا فراخواني کنيد، براي انجام اين عمل بايد تگ <link> را در قسمت head قرار دهيد و سه خصوصيت مربوط به آنرا وارد کنيد. خصوصيت rel=” “ است که برابر با کلمه stylesheet قرار ميدهيد و سپس type=” " وبا text/css مقداردهي ميشود و در آخر با خصوصيت href=” “ فايل را آدرس دهي ميکنيد،

<link rel=”stylesheet” type=”text/css” href=”آدرس فايل “>

اين تگ نيازي به پايان دهنده ندارد.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

خصوصيات استايل شيت قسمت اول

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا مي توانم بجاي استفاده از تگ font ، توسط استايل شيت کنترل متن را در صفحه بدست گيرم؟

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

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

اگر براي خصوصيات استايل شيت مقادير منفي در نظر بگيريم، چه اتفاقي خواهد افتاد؟

مرورگرها مقادير منفي را بصورت صفر در نظر مي گيرند.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا محدوديتي براي تعريف الگوهاي استايل شيت وجود دارد؟

خير، هيچ محدوديتي در تعريف و بکار گيري آنها نيست.

الگوهاي استايل شيت در کدام يک از تگهاي html تأثير ندارند؟

اين الگوها در تگهاي html, head, title کاربردي ندارند.

اگر داخل يک فايل خارجي استايل شيت که با پسوند css ذخيره کرديم تگ آغازين و پاياني style را بنويسيم، چه اتفاقي خواهد افتاد؟

فقط در روش دوم که خصوصيات استايل شيت در قسمت head تعريف مي شوند، داراي تگ style ميباشند. اما در يک فايل خارجي استايل شيت اگر اينکار را انجام دهيد، مرورگر اولين خصوصيت تعريف شده پس از تگ style را ناديده مي گيرد.

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

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

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


خصوصيات استايل شيت قسمت اول

در اين قسمت ميپردازيم به خصوصيات style ها که ابتدا از عنصر متن شروع ميکنيم که در تگهاي <p><div><span> بيشتر کاربرد دارد.

Style براي عنصر متن

  • text-align محل قرارگيري متن در يک سطر را کنترل ميکند و با justify, left, center, right مقداردهي ميشود.
  • text-indent براي دندانه دار کردن متن بکار ميرود و با عدد مقدار دهي ميشود که اگر در مقياس پيکسل باشد بعد از عدد بايد px نوشته شود مانند: text-indent:20px و اگر با درصد مقداردهي شود بايد علامت % را بگذاريد.
  • letter-spacing اندازه بين حروف را کنترل ميکند که براي حروف فارسي مناسب نيست و با عدد مقداردهي ميشود که بعد از عدد px يا em نوشته ميشود که در em بين حروف فاصله اي به اندازه حرف m توليد ميشود.
  • line-height براي کنترل فاصله خطوط از هم بکار ميرود و با عدد سپس px مقداردهي ميشود.
  • font-family براي تعيين نوع فونت بکار ميرود که در اين خصوصيت ميتوانيد چندين فونت را قرار دهيد که اگر سيستم بيننده سايت يک از آن فونتها را نداشت از ديگري استفاده کند، بدين صورت:font-family:Arial, Tahoma, Times New Roman
  • font-style آرايش فونت را از لحاظ اريب بودن تعيين ميکند که ميتوانيد از normal, italic, oblique استفاده کنيد.
  • font-weight آرايش حروف را از لحاظ ضخامت تعيين ميکند که به دو روش مقدار ميدهيد ، با کلمات lighter, normal, bold, bolder و يا با اعداد بين 100 تا 900 .
  • font-size اندازه حروف را به سه مدل کنترل ميکند : در مدل absolute sizes از کلمات xxsmall, small, medium, large, xlarge, xxlarge در مدل relative sizes از smaller, larger استفاده ميکنيم و در مدل font-point-size اعداد 1 تا 12 قرار ميدهيم که بعد از عدد pt بايد بنويسيم .

نکته: شما ميتوانيد چند خصوصيت بالا را که مربوط به font ميباشد را يکجا بصورت خلاصه تعريف کنيد که در اين حالت نيازي به نوشتن خصوصيات نيست و فقط مقادير آنها را به ترتيب زير مينويسم:

font-style,font-weight,font-size,font-family

کلمه font را به عنوان selector مينويسيم و مقاديرخصوصيات را به ترتيب بالا با رعايت فاصله دربين { } قرار ميدهيم،

font { italic bold 20pt "Arial" Tahoma }

  • Color رنگ متن را تعيين ميکند که هم اسم رنگ و يا کد هگز رنگ را مينويسيد.
  • text-decoration اين خصوصيت وظيفه کشيدن خط براي حروف را دارد که ميتوان از underline براي کشيدن خط زير حروف، از overline در بالاي حروف، line-through بر روي حروف استفاده کرد و اگر نيازي به کشيدن خط نيست از none استفاده ميشود، همچنين blink که براي چشمک زدن حروف بکار ميرود ولي مرورگر اينترنت اکسپلورر آنرا نمايش نميدهد.
  • text-transform اين خصوصيت حروف را براي بعضي از زبانها مانند انگليسي کوچک و بزرگ ميکند و کاربردي براي فارسي ندارد. مقادير مربوط به آن none, capitalize, uppercase, lowercase است.

Style براي زمينه صفحه و يا جدولها

  • background-color توسط اين خصوصيت رنگ زمينه را کنترل ميکنيد که اسم رنگ يا مقدار مخلوط سه رنگ قرمز، سبزوآبي را که rgb مينامند مينويسيد براي هر رنگ از عدد 0 تا عدد 255 در نظر گرفته شده است. Style="background-color: rgb(10,255,0)" داخل پرانتز عدد 10 نمايانگر رنگ قرمز و 255 رنگ سبز و 0 رنگ آبي است که شما هم بايد به همين ترتيب بنويسيد.
  • background-image توسط اين خصوصيت ميتوانيد يک عکس به زمينه صفحه يا جدول اضافه کنيد.

background-image: { url ( www.sitename.com/images/image.gif ) }

  • background-repeat زمانيکه بوسيله خصوصيت بالا يک عکس به زمينه صفحه يا يک جدول اضافه ميکنيد، آن عکس نسبت به اندازه اي که دارد آنقدر تکرار ميشود تا زمينه صفحه را پر کند اما توسط اين خصوصيت ميتوانيد تکرار آن را کنترل کنيد که اگر مقدار را repeat-x قرار دهيد فقط يک رديف بصورت افقي تکرار ميشود و اگر repeat-y باشد بصورت عمودي و no-repeat باشد همان عکس فقط ديده ميشود بدون تکرار.
  • background-attachment اگر مقدار اين خصوصيت را fixed قرار دهيد عکسي که در زمينه صفحه است ثابت ميماند و عناصر و محتواي صفحه با scroll کردن بالا و پايين خواهند شد ولي اگر مقدار را scroll بگذاريم همراه با بقيه عناصر حرکت ميکند.
  • background-position به کمک اين خصوصيت محل قرارگيري عکس در زمينه صفحه را تعيين ميکنيد که مقادير آن عبارتند از، top,bottom,center,left,right

نکته: شما ميتوانيد همه خصوصيات مربوط به زمينه background يا چند تا از آنها را بطور يکجا تعريف کنيد که با اين موضوع آشنا هستيد. و اما ترتيب قرار گرفتن آنها بدين صورت است،

background-color,background-image,background-repeat,

background-attachment,background-position

به مثال زير دقت بفرماييد:

background: { green url(image.gif) no-repeat fixed bottom }

style=" background: green url(image.gif) no-repeat scroll bottom right "


خصوصيات استايل شيت قسمت دوم

style براي حاشيه margin

margin براي افزودن حاشيه به کناره هاي عناصر داخل صفحه مانند پاراگرافها، عکسها يا حتي خود صفحه بکار ميرود که توسط اين خصوصيت حاشيه را در چهار طرف با دادن مقادير عددي بر حسب پيکسل و يا درصد ميتوانيد کنترل کنيد. به اين نکته توجه فرماييد که اگر براي هر طرف مقادير متفاوت ميخواهيد بکاربريد پس بايد چهار مقدار با فاصله از هم بنويسيد مانند: margin:20px 45px 40px 100px که اولين عدد از سمت چپ مربوط به حاشيه بالاي عنصر و بترتيب براي راست، پايين و چپ محاسبه ميشود. و يا ميتوانيد دو عدد بکار بريد که مقدار اول حاشيه بالا و پايين و مقدار دوم حاشيه چپ و راست را کنترل ميکند و همچنين اگر حاشيه ها بايد بمقدار مساوي باشند فقط يک عدد کافي است.

padding اين خصوصيت هم مانند margin عمل ميکند.

Style براي کادر border

border اين خصوصيت عناصر صفحه را داخل يک کادر قرار ميدهد که در سه قسمت مقدار دهي ميشود، اولين مقدار مدلهاي مختلف کادر را تعيين ميکند که مقادير آن عبارتند از: none, dotted, dashed, solid, double, groove, ridge, inset, outset دومين مقدار مربوط به تعيين ضخامت کادر است که با thin,medium,thick و يا با عدد بهمراه px و آخرين مقدار رنگ کادر را کنترل ميکند، مانند:

style=" border: groove thin green"

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

margin-top: 40px
padding-left: 100px
border-bottom: dotted

Style براي کنترل طول height و عرض width

height, width همانطور که ميدانيد اين دو خصوصيت براي کنترل ابعاد يک عنصر مانند جدول و يا يک عکس بکار ميروند که با عدد بر حسب پيکسل و با علامت مشخصه px و يا با درصد مقدار دهي ميشوند در ضمن شما ميتوانيد مقدار auto هم قرار دهيد که آن عنصردر اندازه حقيقي خود ظاهر شود.

Style براي قرار گرفتن دو عنصر در کنار هم alignment

float اين خصوصيت مانند align عمل ميکند و با none, left, right مقداردهي ميشود محل قرار گيري دو عنصر را در کنار هم کنترل ميکند.

clear اين خصوصيت برعکس float است و مشخص ميکند که در کدام طرف يا در هر دو سمت هيچ عنصري نباشد که با none, left, right, both هم مقداردهي ميشود.

Style براي ليستها lists

list-style-type نوع ترتيب قرارگرفتن ليستها را کنترل ميکند که عدد يا علامت ابتداي هر گزينه در ليست بيايد که ميتوانيد از مقادير none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha استفاده کنيد.

list-style-image اگر بخواهيد بجاي مقادير بالا از عکس دلخواه خودتان براي علامتهاي ابتداي گزينه ها استفاده کنيد ميتوانيد اين خصوصيت را بکار بريد.

list-style-image: url ( images/bullet.gif )

list-style-position اين خصوصيت گزينه هاي ليست را دندانه دار ميکند و با inside, outside مقدار دهي ميشود که بصورت پيش فرض براي ليستها outside در نظر گرفته ميشود.

نکته: بهتر است در اين خصوصيات تگ li را به عنوان selector انتخاب کنيد و همچنين اين سه خصوصيت را ميتوانيد بصورت خلاصه و يکجا بکار بريد

li { list-style: circle url(bullet.gif) inside }

<li style=" list-style: circle url(images/bullet.gif) inside ">

همانطور که مشاهده ميکنيد ترتيب قرار گرفتن مقادير ابتدا type سپس image و در آخر position است.

Style براي scrollbar

اگر شما بخواهيد رنگ scrollbar مرورگر را تغيير دهيد ميتوانيد style زير را به قسمت head صفحه اضافه کنيد:

<style type="text/css">

body
{
scrollbar-base-color: orange;
scrollbar-arrow-color: green;
scrollbar-darkshadow-color: blue;
}
</style>

البته متناسب با رنگ آميزي صفحه ميتوانيد نام رنگها را تغيير دهيد. در هر عنصر ديگري که از scrollbar استفاده ميشود هم ميتوانيد با اضافه کردن خصوصيت style=" " به تگ مربوطه، رنگ آنرا کنترل کنيد. بطور مثال براي تغيير رنگ scrollbar در textarea داخل يک فرم ، بصورت زير عمل ميکنيد:

<form>
<textarea cols="10" rows="10"
style="scrollbar-base-color:pink;scrollbar-arrow-color:purple;">
Text in the box
</textarea>
</form>

Style براي نشانگر موس cursor

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

cursor: auto نشانگر بصورت معمول نمايش داده ميشود.

cursor: crosshair بشکل علامت مثبت است.

cursor: default شکل پيش فرض خود را دارد.

cursor: hand مانند لينکها شکل دست بخود ميگيرد.

cursor: e-resize بصورت فلش شرقي غربي است.

cursor: n-resize فلش شمالي جنوبي است.

cursor: ne-resize فلش شمالشرقي به جنوبغربي.

cursor: nw-resize برعکس حالت بالا.

cursor: help يک علامت سوال اضافه ميکند.

cursor: move فلش در چهارجهت .

cursor: text بشکل نشانگر برروي متن است.

cursor: wait شکل ساعت شني براي انتظار را اضافه ميکند.


آموزش استايل شيت

Cascading Style Sheet

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

با استايل شيت چه کارهايي ميتوانيد انجام دهيد؟

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

تعيين الگو و style

هر style بايد براي يک تگ خاص تعريف شود . به محتواي داخل تگي که ميخواهيم يک style نسبت دهيم selector يا انتخاب کننده ميگويند که ااگوي تعريف شده در تگ آغاز کننده يک عنصر تا تگ پايان دهنده آن تاثير خواهد داشت.

براي تعيين و تعريف يک الگو ابتدا بايد selector را مشخص و بنويسيم مانند h1 سپس خصوصيات و مقادير آنها را بين دو علامت { } بگذاريم که طرز نوشتن خصوصيت و مقدار آن بين { } به اين ترتيب ميباشد:

ابتدا خصوصيت را نوشته سپس علامت : ميگذاريم و بعد مقدار مشخصه آنرا مينويسيم ،

h1 { color:green }

اگر بخواهيم چند خصوصيت را به يک selector نسبت دهيم ، بعد از هر کدام يک ; ميگذاريم،

h1 { color:green; text-align:center }

روشهاي تعريف ااگو و style

Style ها را به سه روش ميتوان تعريف کرد:

  • روش اول: به عنوان يک الگوي خارجي که اطلاعات در يک فايل نوشته ميشود و با پسوند .css ذخيره ميشود که در تگ <link> داخل قسمت head آدرس دهي و فراخوانده ميشود.
  • روش دوم: style را ميتوانيم در قسمت head نوشته و جاسازي کنيم که با تگهاي<style></style> مشخص ميشوند.
  • روش سوم: با قرار دادن style به عنوان خصوصيت در يک تگ و مقدار دهي آن. مانند تگ زير:

<div style="color:green">

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

<style>
body { color:yellow; background-color:red }
h1,h2, h3, p { color:green }
</style>

تعريف الگو از طريق class

گاهي اوقات يک style به روشهاي اول يا دوم تعريف ميشود، اما شما نميخواهيد که آن الگو در همه جا اعمال شود، پس مياييد يک اسم واحد برايselector انتخاب ميکنيد ، بدين ترتيب که بلافاصله بعد از selector يک نقطه ميگذاريد و اسمي را مينويسيد. پس از اين کار در هر تگي که نياز به آن الگو هست خصوصيت class=" " را مينويسيم و برابر با آن اسم قرار ميدهيم،

<head>
<style>
p.name { color:green }
</style>
</head>
<body>
<p class="name">……..</p>
</body>

فراخواني فايل css در تگ <link>

ارزش واقعي style sheet زماني به چشم ميايد که يکبار آنرا تعريف کنيد و در تمام صفحات از آن بهره ببريد. براي اين منظور شما فقط از طريق روش اول ميتوانيد اينکار را انجام دهيد، بدين ترتيب که style ها را در برنامه ويرايشگر متن مانند notepad مينويسيد و سپس آن فايل را با پسوند .css ذخيره کرده و در دايرکتوري اصلي وب سايتتان قرار ميدهيد. css مخفف C ascading Style Sheet است.

نکته: در اين روش نيازي به نوشتن تگهاي<style></style> نيست و فقط selector ها و خصوصيات را مينويسيد. در صورت رعايت نکردن اين موضوع الگوهاي تعريف شده در آن فايل در صفحات اعمال نخواهند شد.

پس از ذخيره فايل style sheet ميتوانيد براي هر صفحه که ميخواهيد آنرا فراخواني کنيد، براي انجام اين عمل بايد تگ <link> را در قسمت head قرار دهيد و سه خصوصيت مربوط به آنرا وارد کنيد. خصوصيت rel=" " است که برابر با کلمه stylesheet قرار ميدهيد و سپس type=" " وبا text/css مقداردهي ميشود و در آخر با خصوصيت href=" " فايل را آدرس دهي ميکنيد،

<link rel="stylesheet" type="text/css" href="آدرس فايل ">

اين تگ نيازي به پايان دهنده ندارد.


Working with Text --- افزودن متن به صفحه وب

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

افزودن متن به صفحه

برای دسترسی سريع از لينکهای زير استفاده کنيد:

        [<br>]
        [<p></p>]
        [<center></center>]
        [<pre></pre>]
[<h1></h1>]
        [<hr>]
        [<div></div>]
        [<span></span>]
[<marquee></marquee>]
        [<--!...-->]
        [<bdo></bdo>]

همانطور که دربخشهاي قبل گفته شد، هرمتني را بين تگهاي <body>وارد کنيد بعد از ذخيره آن فايل با پسوند.html يا.htm و هنگام نمايش فايل در مرورگر آنرا مشاهده خواهيد کرد که متن مورد نظر با تنظيمات مرورگر نمايان خواهد شد. ولي ما با استفاده از تگهاي اين عنصر کنترل نمايش نوشته ها را بدست خود ميگيريم تا همان چيزي که مورد نظر ما است نشان داده شوند. تگهاي متن را ميتوان به دو دسته تقسيم کرد، تگهاي اوليه که بيشتر وظيفه خط بندي، پاراگراف بندي و يا تنظيمات در ارتباط با متن را به عهده دارند و تگهايي که شکل و آرايش حروف را کنترل ميکنند که به آنها formatting مي گويند. بهتر است که Notepad يا هر برنامه ويرايشگر متن را که داريد باز کنيد و هر کدام از اين تگها را امتحان کنيد تا کاربرد آنها در ذهن شما جاي گيرد.

<br>
براي خط بندي از اين تگ استفاده ميشود و متن بعد از آن به يک خط پايين تر منتقل ميشود که نيازي به تگ پايان دهنده هم ندارد.
مثال

<p></p>
پاراگراف بندي متن را به عهده دارد و فاصله بيشتري را نسبت به <br> بين خطوط ايجاد ميکند. اين تگ داراي خصوصيت align= " " ميباشد که محل قرارگيري پاراگراف را در يک سطر کنترل ميکند و با کلمات "left", "center", "right", "justify"مقداردهي ميشود. مثال

<p align="left">...</p>

<center></center>
همانطور که از اسمش پيداست متن بين اين دو تگ در وسط يک سطر قرار خواهد گرفت، البته اين تگ را براي عناصر ديگر وب نيز ميتوان بکار برد. مثال

<pre></pre>
مرورگرها فاصله هر کلمه را در حد استاندارد نشان ميدهند و اگر شما بخواهيد که يک متن با فاصله هاي زيادي نمايش داده شود يعني آنطور که ميخواهيد نشان داده شود از اين تگ استفاده ميکنيد. مثال

<h1></h1>
به اين تگHeading مي گويند و براي مشخص کردن سرفصلها و تيترها بکار ميرود. اين تگ از عدد يک تا شش درجه بندي دارد که عدد يک بزرگترين حد و شش کوچکترين حد حروف را نمايش ميدهند. در ضمن داراي خصوصيت " "=align ميباشند و با left, center , right مقداردهي ميشود. مثال

<hr>
اين تگ روي خود متن کاري صورت نميدهد و فقط با ترسيم يک خط افقي آنها را از هم جدا ميکند که داراي خصوصيات زير ميباشد.

width=" "طول خط را کنترل ميکند که هم با عدد در مقياس پيکسل و هم با درصد ميتوان مقدار دهي کرد.

align=" " که محل قرار گيري خط در يک سطر را کنترل ميکند.

color=" " رنگ خط که ميتوانيد اسم رنگ يا کد هگز رنگ را بنويسيد.

size=" " اين خصوصيت ضخامت خط را تعيين ميکند که هرچه عدد بزرگتر باشد ، ضخامت بيشتر است. بصورت پيش فرض خط داراي سايه ميباشد و اگر خصوصيت noshade را به تگ اضافه کنيد ديگر سايه را نشان نميدهد. مثال

<div></div>
اين تگ کاربرد فراواني براي مدل دادن به متن دارد و مانند تگ <br> آن قسمت از متن را جدا ميکند وبه خط بعد منتقل ميکند . خصوصيت style=" " در اين تگ توانايي اعمال يک الگوي خاص در آن قسمت از متن را ميدهد. بطور مثال هر گاه کاربر نشانگر موس را روي آن متن برد ، نوشته هاي ما خط دار شود، البته هر نوع Style که تعريف شود همان را بکار ميبرد. در بخش Style Sheets درست کردن الگوها را توضيح خواهم داد. مثال

<span></span>
اين تگ هم مانند تگ بالا ميباشد با اين تفاوت که مخصوص يک کلمه يا حتي يک حرف ميباشد چون مانند div متن را از بقيه جدا نميکند و داراي خصوصيت style=" " ميباشد که بر فرض هنگام قرار گرفتن موس روي يک کلمه زمينه آن رنگي شود. مثال

<marquee></marquee>
متن بين اين دو تگ متحرک خواهد شد و داراي خصوصيات زير ميباشد، البته اين تگ ممکن است در همه مرورگرها عمل نکند ولي در مرورگر اينترنت اکسپلورر (IE) مشکلي براي نمايش ندارد. خصوصيات اين تگ عبارتند از :

align=" "محل قرار گرفتن متن را تعيين ميکند که با کلمات top, middle, bottom مقدار دهي ميشود.

behavior=" "اين خصوصيت نحوه حرکت متن را کنترل ميکند که آنرا برابر با scroll اگر قرار دهيم، متن بصورت متناوب از يکطرف صفحه وارد و از طرف ديگر خارج ميشود و اگر برابر با alternate قرار دهيم ، متن از صفحه خارج نميشود و در عرض مرورگر حرکت ميکند، همچنين اگر برابر با slide باشد ، متن از يکطرف وارد صفحه شده و در طرف ديگرميايستد.

bgcolor=" " رنگ زمينه آن تگ را مشخص ميکند که يا نام رنگ يا کد هگز آنرا مينويسيد.

direction=" "جهت ورود متن به صفحه را کنترل ميکند و با کلمات left, right, top, down که از چپ ، راست، بالا و پايين ميتواند وارد شود.

height=" "ارتفاع کادر marquee را به عدد در مقياس پيکسل يا به درصد تعيين ميکند.

hspace=" " حاشيه چپ و راست را کم وزياد ميکند.

loop=" "تعداد چرخش متن را کنترل ميکند.

scrolldelay=" " سرعت حرکت متن را تعيين ميکند.

vspace=" " حاشيه بالا و پايين متن را مشخص ميکند.

width=" " عرض کادر را کنترل ميکند.

مثال

<-- !.....-->
از اين تگ براي افزودن نظريه يا هر نوشته ديگري که نميخواهيد در مرورگر نمايش داده شود و يا عملي را انجام دهد استفاده ميکنيد که بجاي نقطه چين هر متني را ميتوانيد وارد کنيد .

<bdo></bdo>
اين تگ فقط مخصوص مشخص کردن متن ازطرف چپ يا راست که داراي خصوصيت dir=” “ ميباشد و با ltr يعني از چپ به راست و rtl يعني از راست به چپ مقدار دهي ميشود.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

تگهای مربوط به

formatting texts

Previous

Next

توضيحات

پرسش و پاسخ

جدول تگها

خودآزمايی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Entity and ASCII code

علامت | نام علامت | شماره علامت
" | &quot; | &#34;
& | &amp; | &#38;
< | &lt; | &#60;
> | &gt; | &#62;
 | &nbsp; | &#160;
¡ | &iexcl; | &#161;
¤ | &curren; | &#164;
¢ | &cent; | &#162;
€ | &euro; | &#8364;
£ | &pound; | &#163;
¥ | &yen; | &#165;
¦ | &brvbar; | &#166;
§ | &sect; | &#167;
¨ | &uml; | &#168;
© | &copy; | &#169;
ª | &ordf; | &#170;
« | &laquo; | &#171;
¬ | &not; | &#172;
 | &shy; | &#173;
® | &reg; | &#174;
™ | &trade; |
¯ | &macr; | &#175;
° | &deg; | &#176;
± | &plusmn; | &#177;
² | &sup2; | &#178;
³ | &sup3; | &#179;
´ | &acute; | &#180;
µ | &micro; | &#181;
¶ | &para; | &#182;
· | &middot; | &#183;
¸ | &cedil; | &#184;
¹ | &sup1; | &#185;
º | &ordm; | &#186;
» | &raquo; | &#187;
¼ | &frac14; | &#188;
½ | &frac12; | &#189;
¾ | &frac34; | &#190;
¿ | &iquest; | &#191;
× | &times; | &#215;
÷ | &divide; | &#247;
À | &Agrave; | &#192;
Á | &Aacute; | &#193;
Â | &Acirc; | &#194;
Ã | &Atilde; | &#195;
Ä | &Auml; | &#196;
Å | &Aring; | &#197;
Æ | &AElig; | &#198;
Ç | &Ccedil; | &#199;
È | &Egrave; | &#200;
É | &Eacute; | &#201;
Ê | &Ecirc; | &#202;
Ë | &Euml; | &#203;
Ì | &Igrave; | &#204;
Í | &Iacute; | &#205;
Î | &Icirc; | &#206;
Ï | &Iuml; | &#207;
Ð | &ETH; | &#208;
Ñ | &Ntilde; | &#209;
Ò | &Ograve; | &#210;
Ó | &Oacute; | &#211;
Ô | &Ocirc; | &#212;
Õ | &Otilde; | &#213;
Ö | &Ouml; | &#214;
Ø | &Oslash; | &#216;
Ù | &Ugrave; | &#217;
Ú | &Uacute; | &#218;
Û | &Ucirc; | &#219;
Ü | &Uuml; | &#220;
Ý | &Yacute; | &#221;
Þ | &THORN; | &#222;
ß | &szlig; | &#223;
à | &agrave; | &#224;
á | &aacute; | &#225;
â | &acirc; | &#226;
ã | &atilde; | &#227;
ä | &auml; | &#228;
å | &aring; | &#229;
æ | &aelig; | &#230;
ç | &ccedil; | &#231;
è | &egrave; | &#232;
é | &eacute; | &#233;
ê | &ecirc; | &#234;
ë | &euml; | &#235;
ì | &igrave; | &#236;
í | &iacute; | &#237;
î | &icirc; | &#238;
ï | &iuml; | &#239;
ð | &eth; | &#240;
ñ | &ntilde; | &#241;
ò | &ograve; | &#242;
ó | &oacute; | &#243;
ô | &ocirc; | &#244;
õ | &otilde; | &#245;
ö | &ouml; | &#246;
ø | &oslash; | &#248;
ù | &ugrave; | &#249;
ú | &uacute; | &#250;
û | &ucirc; | &#251;
ü | &uuml; | &#252;
ý | &yacute; | &#253;
þ | &thorn; | &#254;
ÿ | &yuml; | &#255;
Œ | &OElig; | &#338;
œ | &oelig; | &#339;
Š | &Scaron; | &#352;
š | &scaron; | &#353;
Ÿ | &Yuml; | &#376;
ˆ | &circ; | &#710;
˜ | &tilde; | &#732;
Α | &Alpha; | &#913;
Β | &Beta; | &#914;
Γ | &Gamma; | &#915;
Δ | &Delta; | &#916;
E | &Epsilon; | &#917;
Z | &Zeta; | &#918;
H | &Eta; | &#919;
Θ | &Theta; | &#920;
I | &Iota; | &#921;
K | &Kappa; | &#922;
Λ | &Lambda; | &#923;
M | &Mu; | &#924;
N | &Nu; | &#925;
Ξ | &Xi; | &#926;
O | &Omicron; | &#927;
Π | &Pi; | &#928;
P | &Rho; | &#929;
Σ | &Sigma; | &#931;
T | &Tau; | &#932;
Y | &Upsilon; | &#933;
Φ | &Phi; | &#934;
X | &Chi; | &#935;
Ψ | &Psi; | &#936;
Ω | &Omega; | &#937;
α | &alpha; | &#945;
β | &beta; | &#946;
γ | &gamma; | &#947;
δ | &delta; | &#948;
ε | &epsilon; | &#949;
ζ | &zeta; | &#950;
η | &eta; | &#951;
θ | &theta; | &#952;
ι | &iota; | &#953;
κ | &kappa; | &#954;
λ | &lambda; | &#955;
μ | &mu; | &#956;
ν | &nu; | &#957;
ξ | &xi; | &#958;
ο | &omicron; | &#959;
π | &pi; | &#960;
ρ | &rho; | &#961;
ς | &sigmaf; | &#962;
σ | &sigma; | &#963;
τ | &tau; | &#964;
υ | &upsilon; | &#965;
φ | &phi; | &#966;
χ | &chi; | &#967;
ψ | &psi; | &#968;
ω | &omega; | &#969;
– | &ndash; | &#8211;
— | &mdash; | &#8212;
‘ | &lsquo; | &#8216;
’ | &rsquo; | &#8217;
‚ | &sbquo; | &#8218;
“ | &ldquo; | &#8220;
” | &rdquo; | &#8221;
„ | &bdquo; | &#8222;
† | &dagger; | &#8224;
‡ | &Dagger; | &#8225;
… | &hellip; | &#8230;
‰ | &permil; | &#8240;
′ | &prime; | &#8242;
″ | &Prime; | &#8243;
‹ | &lsaquo; | &#8249;
› | &rsaquo; | &#8250;
‾ | &oline; | &#8254;
⁄ | &frasl; | &#8260;
← | &larr; | &#8592;
↑ | &uarr; | &#8593;
→ | &rarr; | &#8594;
↓ | &darr; | &#8595;
↔ | &harr; | &#8596;
∩ | &cap; | &#8745;
∞ | &infin; | &#8734;
∫ | &int; | &#8747;
≈ | &asymp; | &#8776;
≠ | &ne; | &#8800;
≡ | &equiv; | &#8801;
≤ | &le; | &#8804;
≥ | &ge; | &#8805;
√ | &radic; | &#8730;
∑ | &sum; | &#8721;
∏ | &prod; | &#8719;
∂ | &part; | &#8706;
◊ | &loz; | &#9674;
♠ | &spades; | &#9824;
♣ | &clubs; | &#9827;
♥ | &hearts; | &#9829;
♦ | &diams; | &#9830;

Copyright © 2004-2005 iranw3. All rights reserved .


Begin at the begining --- تگ اچ تي ام ال چيست و سورس کد کجاست

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

شروع از ابتدا

برای دسترسی سريع از لينکهای زير استفاده کنيد:

تگهاي HTML
Source code

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

تگهاي HTML

اولين چيزي که براي برنامه نويسي html بايد بدانيد، اينست که تگ html چيست و چه کاري انجام ميدهد. تگهاي html دو نوع هستند، تگهاي آغازين و تگهاي پايان دهنده. بطور کل تگها با دو علامت کوچکتر و بزرگتر، يعني < > مشخص ميشوند و بين اين دو علامت کد html نوشته ميشود، مانند:

<b>

اين يک تگ آغازين است و کد داخل آن به مرورگر ما ميفهماند که متن بعد از آن بايد بصورت حروف ضخيم و bold به بيننده صفحه نشان داده شود و بلافاصله متن مورد نظر را مينويسيم و در آخر آن، تگ پايان دهنده که مرورگر بفهمد تا کجا اين متن بايد بصورت ضخيم نمايش داده شود،

<b> This is a bold text. </b>

همانطور که مشاهده ميکنيد، تگهاي پايان دهنده داراي يک علامت Slash ( / ) ميباشد.

اما کار اين تگها چيست؟ مرورگرهاي وب مانند اينترنت اکسپلورر، به علامتهاي < > حساس هستند و به محض اينکه به آنها مي رسند کد داخل آنها را خوانده و عمليات لازم را بر روي متن بعد از آن انجام ميدهند تا به تگ پايان دهنده برسند. در حقيقت مرورگرها حکم مترجم را براي ما دارند و کليه تگها ونوشته هاي داخل آنها را بصورت اطلاعات منظم و قابل فهم در قالب يک صفحه وب براي ما ترجمه کرده و به نمايش ميگذارند. ما با وارد کردن تگهاي مناسب، کنترل نمايش صفحه وب را در مرورگرها به کنترل خود در مي آوريم پس بايد ياد بگيريد که تگهاي html را چگونه و در کجا بنويسيد. زبان html هم مانند هر زبان ديگري ساختار و قواعد خاص خود را دارد که در صفحات بعد با آنها آشنا مي شويد.

Source code

صفحات وب داراي مزيتي هستند و آن مشاهده کدهاي Html در مرورگر است که شما براحتي مي توانيد تگهاي عناصر تشکيل دهنده آن صفحه را ببينيد و با نحوه قرار گرفتن و تکنيکهاي بکار گرفته شده آشنا شويد. براي ديدن سورس کد يا همان کد تشکيل دهنده صفحه وب داخل منوي view در مرورگر مي شويد و بر روي گزينه Source کليک مي کنيد که بطور معمول برنامه Notepad باز شده و تگهاي Html را نشان مي دهد که در حال حاضر فهميدن آنها براي شما مشکل است ولي در آينده نزديک هيچ مشکلي براي درک کدها نخواهيد داشت.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

ساخت اولين صفحه وب

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Build a Body Section --- ساخت بدنه اچ تی ام ال

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويري
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهاي قسمت سر
(body) تگهاي قسمت بدنه

مطالب ديگر

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

خصوصيات تگ body

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

bgcolor
background
bgproperties
topmargin
leftmargin

text
dir
lang
link

همانطور که ميدانيد هر عنصر HTML که بخواهيد در صفحه وب نمايش داده شود بايد ما بين تگ body يعني <body></body> قرار گيرد. در کليه فايلهاي HTML اين تگ وجود دارد مگر اينکه بخواهيد از عنصر فريم استفاده کنيد که در اينصورت بايد <frameset> را بکار بريد.

اما خود تگ body جدا از اهميتي که در فايلهاي HTML دارد، خود داراي خصوصياتي مي باشد که در نمايش صفحه موثر است که به توضيح آنها خواهيم پرداخت.

bgcolor اين خصوصيت وظيفه کنترل رنگ زمينه يک صفحه را به عهده دارد که مي توانيد از کد هگز رنگها ،

<body bgcolor=”#ccff00”>

و يا نام رنگ را بکار بريد، مانند:

<body bgcolor=”black”>

مثال

نکته: دقت کنيد که رنگ زمينه با رنگ فونتهاي داخل صفحه يکسان نباشد، چون در اين حالت متن در صفحه محو خواهد شد.

background توسط اين خصوصيت بجاي رنگ مي توانيد از عکس هم در زمينه صفحه استفاده کنيد، فقط کافيست که آنرا برابر با آدرس عکس مورد نظر قرار دهيد،

<body background=”images/filename.gif”>

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

مثال

bgproperties هنگاميکه عکسي به زمينه اضافه مي شود همراه با ديگر عناصر صفحه مانند عنصر متن scroll مي شود يعني به بالا و پايين يا چپ و راست حرکت مي کند که با بکار گرفتن اين خصوصيت و مقدار دادن آن با fixed عکس در زمينه ثابت مي ماند و عناصر بر روي آن حرکت مي کنند.

<body background=”../images/bg.jpg” bgproperties=”fixed”>

مثال

لازم بذکر است که اين خصوصيت در حال حاضر فقط در مرورگرهاي اينترنت اکسپلورر و اپرا قابل اجراست.

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

leftmargin حاشيه سمت چپ صفحه را کنترل مي کند که اگر نيازي به حاشيه نداريد آنرا برابر با عدد صفر قرار دهيد.

<body topmargin=”0” leftmargin=”0”>

مثال

text اگر بخواهيد متن يک صفحه بطور کل يک رنگ واحد داشته باشد و خصوصيت رنگ را مرتب در تگها تکرار نکنيد ، مي توانيد اين خصوصيت را به تگ body اضافه کنيد و آنرا برابر با نام رنگ يا کد هگز آن قرار دهيد.

<body text=”#99ccff”>

مثال

dir اين خصوصيت براي تعيين جهت نوشتن حروف است که از راست به چپ باشد مانند فارسي که در اينصورت بايد برابر با مقدار rtl و چپ به راست مانند حروف انگليسي که برابر با ltr مي باشد. توجه داشته باشيد که اگر اين خصوصيت را در تگ body بکار بريد و آنرا برابر rtl قرار دهيد محل scroll صفحه مرورگر از سمت راست به چپ منتقل مي شود.

lang اين خصوصيت تعيين زبان بکار گرفته شده براي متن آن صفحه را به عهده دارد که بصورت قراردادي دو حرف از اسم آن زبان را بايد بنويسيد، مثلاً براي زبان فارسي fa و براي انگليسي en را مي نويسيد.

<body lang=”fa” dir=”rtl”>

مثال

link در حالت عادي کليه لينکهاي داخل يک صفحه برنگ آبي هستند ولي اگر بخواهيد رنگ آنها را تغيير دهيد اين خصوصيت را بکار مي بريد و مانند هميشه يا نام رنگ و يا کد هگز آنرا مي نويسيد. البته خصوصيت ديگري هم در اين ارتباط هست که بخواهيد رنگ لينک فعال يا همان لينکي که در حال کليک کردن بر روي آن هستيد تغيير کند بايد از خصوصيت alink و اگر رنگ لينکهاي مشاهده شده را بخواهيد تغيير دهيد از خصوصيت vlink استفاده مي کنيد.

<body link=”#990000” alink=”#009900” vlink=”#000099”>

مثال

خصوصيات ديگري هم هست مانند onload که مربوط به زبان جاوا اسکريپت مي باشد که در بخش مربوطه با آنها آشنا خواهيد شد.

ابتداي صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

Html 4.01 و تفاوتهاي آن با نسخه 4.0

Previous

Next

توضيحات

پرسش و پاسخ

جدول تگها

خودآزمايی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


checking webpages --- بررسی و امتحان کردن صفحات

Google
Web iranw3.com
مطالب آموزشی

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

بررسی و امتحان کردن صفحات

زمانيکه شما نوشتن کدهاي html را در برنامه notepad يا ويرايشگرهايHTML تمام کرديد، بعد از ذخيره کردن آن فايل با يکي از پسوندهاي .htm يا .html و با استفاده از مرورگر وب خود آنرا امتحان کنيد تا نتيجه کارتان را مشاهده و اگر مشکلي هم داشت برطرف شود. مشکلاتي مانند نمايش نادرست صفحه يا حتي غلطهاي ديکته اي که زياد هم به چشم ميخورند.

شما اين صفحات را قبل از اينکه روي سرور بگذاريد تا ديگران هم ببينند، بر روي کامپيوتر خود ميتوانيد امتحان کنيد ولي اگر از فايلهاي ASP يا CGI استفاده کرده ايد نياز به يک وب سرور براي چک کردن آنها داريد. شرکت مايکروسافت دو نرم افزار دارد که توسط آنها ميتوانيد يک وب سرور درست کنيد و اينگونه فايلها را هم مشاهده کنيد. يکي از آنها IIS که مخفف I nternet Information Services است و بر روي ويندوزهاي 2000 و XP نصب ميشود و ديگري PWS که مخفف P ersonal Web Server است و بر روي ويندوزهاي98 و ME اجرا ميشود.

سعي کنيد هر صفحه را در مرورگرهاي مختلف چک کنيد که معروفترين آنها عبارتند از:

Internet Explorer ( IE ), Netscape Navigator ( NN ), Opera, Mozilla

چون بعضي از تگها در همه مرورگرها اجرا نميشوند و همچنين اينرا در نظر داشته باشيد که سيستمهاي عامل هم با يکديگر فرق دارند. بطور مثال فونتها و طرز نمايش صفحه داخل مرورگر Netscape در سيستم عامل Windows با Macintosh فرق ميکند.

برنامه هايي بنام HTML validator موجود ميباشند که با کمک آنها ميتوانيد عيب هاي صفحات را پيدا کنيد. بطور مثال اگر تگ پايان دهنده اي را فراموش کرديد آنرا پيدا کرده و بعضي از آنها حتي آن مشکل را رفع هم ميکنند. اگر از ويرايشگرهايي مانند Microsoft FrontPage يا Macromedia Dreamweaver استفاده ميکنيد، خود اين نرم افزارها برايتان عيب يابي ميکنند و نيازي به برنامه اضافي براي اين کار نداريد.

همچنين شما ميتوانيد به آدرس http://validator.w3.org مراجعه کنيد براي تأييد صفحات وب سايتتان که مزيت اين آدرس در اين است که بعد از رفع عيوب احتمالي، به شما اجازه استفاده از لوگوي مخصوص خودشان را در اين زمينه ميدهند که نمايانگر بي نقص بودن صفحات ميباشد. اين سايت زير نظر انجمن W3C ميباشد که وظيفه تأييد و اعلان کدهايHTML, XHTML, CSS, … را بعهده دارند.

از نکاتيکه هنگام چک کردن يک صفحه نبايد فراموش کنيد ، امتحان کردن لينکها است تا همه آنها به آدرس درست پيوند داده شوند. يکسري برنامه هم در اين زمينه وجود دارد که به آنها site-management tools گفته ميشود.

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

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

upload و راه اندازی سايت

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Web safe colors

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

black | Black="#000000" | maroon | Maroon = "#800000" | green | Green = "#008000" | navy | Navy = "#000080"
silver | Silver="#C0C0C0" | red | Red = "#FF0000" | lime | Lime = "#00FF00" | blue | Blue = "#0000FF"
gray | Gray="#808080" | purple | Purple = "#800080" | olive | Olive = "#808000" | teal | Teal = "#008080"
white | White="#FFFFFF" | fuchsia | Fuchsia = "#FF00FF" | yellow | Yellow = "#FFFF00" | aqua | Aqua = "#00FFFF"

اما نوع ديگر مقداردهي، استفاده از کد هگز رنگها است. اين کد تشکيل شده از 6 کاراکتر که هر کدام از آنها مي تواند يکي از مقادير زير باشد:

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

که اين شش کاراکتر بهمراه علامت # مي آيند، بدين شکل: #FF0099

اين مقدار نمايانگر سه رنگ قرمز (Red) سبز (Green) و آبي (Blue) مي باشد که اصطلاحاً به آنها RGB مي گويند. اگر هگز يک رنگ را FF0099 در نظر بگيريم، FF مقدار ترکيبي رنگ قرمز، 00 مقدار ترکيبي رنگ سبز و 99 مقدار رنگ آبي را نشان مي دهد که 00 کمرنگ ترين و FF پر رنگ ترين حالت را نمايش مي دهند. بطور مثال FF0000 کاملاً رنگ قرمز را نشان مي دهد.

از ترکيب اين 6 کاراکتر مي توانيد 16.7 ميليون رنگ بسازيد. اما فقط 256 رنگ هست که سازگار با کليه سيستمهاي عامل و مرورگرها است يعني رنگهاي غير از آنها در سيستمهاي مختلف با هم فرق دارند. به جدول زير دقت کنيد فقط رنگهاي سازگار از ترکيب 00,33,66,99,CC,FF تشکيل شده اند که به آنها palette-safe colors مي گويند.

نکته: بنا بر اعلام W3C بهتر است براي بکارگيري رنگها از خصوصيات استايل شيت ها استفاده کنيد چون در آينده نزديک خصوصيات رنگها در عناصر کاربردي نخواهد داشت و از رده خارج مي شوند. همچنين از حروف بزرگ در مقداردهي رنگها استفاده کنيد و علامت # را فراموش نکنيد.

FFFFFF | FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | 66FFFF | 66FFCC | 66FF99 | 66FF66 | 66FF33 | 66FF00
FFCCFF | FFCCCC | FFCC99 | FFCC66 | FFCC33 | FFCC00 | 66CCFF | 66CCCC | 66CC99 | 66CC66 | 66CC33 | 66CC00
FF99FF | FF99CC | FF9999 | FF9966 | FF9933 | FF9900 | 6699FF | 6699CC | 669999 | 669966 | 669933 | 669900
FF66FF | FF66CC | FF6699 | FF6666 | FF6633 | FF6600 | 6666FF | 6666CC | 666699 | 666666 | 666633 | 666600
FF33FF | FF33CC | FF3399 | FF3366 | FF3333 | FF3300 | 6633FF | 6633CC | 663399 | 663366 | 663333 | 663300
FF00FF | FF00CC | FF0099 | FF0066 | FF0033 | FF0000 | 6600FF | 6600CC | 660099 | 660066 | 660033 | 660000
CCFFFF | CCFFCC | CCFF99 | CCFF66 | CCFF33 | CCFF00 | 33FFFF | 33FFCC | 33FF99 | 33FF66 | 33FF33 | 33FF00
CCCCFF | CCCCCC | CCCC99 | CCCC66 | CCCC33 | CCCC00 | 33CCFF | 33CCCC | 33CC99 | 33CC66 | 33CC33 | 33CC00
CC99FF | CC99CC | CC9999 | CC9966 | CC9933 | CC9900 | 3399FF | 3399CC | 339999 | 339966 | 339933 | 339900
CC66FF | CC66CC | CC6699 | CC6666 | CC6633 | CC6600 | 3366FF | 3366CC | 336699 | 336666 | 336633 | 336600
CC33FF | CC33CC | CC3399 | CC3366 | CC3333 | CC3300 | 3333FF | 3333CC | 333399 | 333366 | 333333 | 333300
CC00FF | CC00CC | CC0099 | CC0066 | CC0033 | CC0000 | 3300FF | 3300CC | 330099 | 330066 | 330033 | 330000
99FFFF | 99FFCC | 99FF99 | 99FF66 | 99FF33 | 99FF00 | 00FFFF | 00FFCC | 00FF99 | 00FF66 | 00FF33 | 00FF00
99CCFF | 99CCCC | 99CC99 | 99CC66 | 99CC33 | 99CC00 | 00CCFF | 00CCCC | 00CC99 | 00CC66 | 00CC33 | 00CC00
9999FF | 9999CC | 999999 | 999999 | 999933 | 999900 | 0099FF | 0099CC | 009999 | 009966 | 009933 | 009900
9966FF | 9966CC | 996699 | 996666 | 996633 | 996600 | 0066FF | 0066CC | 006699 | 006666 | 006633 | 006600
9933FF | 9933CC | 993399 | 993366 | 993333 | 993300 | 0033FF | 0033CC | 003399 | 003366 | 003333 | 003300
9900FF | 9900CC | 990099 | 990066 | 990033 | 990000 | 0000FF | 0000CC | 000099 | 000066 | 000033 | 000000

Copyright © 2004-2005 iranw3. All rights reserved .


Start HTML tutorial --- شروع آموزش اچ تی ام ال

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

آموزش Html 4.0

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

بخش مقدماتی

قسمت اول: مروري بر وب و زبان HTML

  • مروری بر وب
  • HTML چيست؟
  • عناصر تشکيل دهنده يک صفحه وب
  • هدف از ساخت يک وب سايت
  • راه اندازی سايت
  • اهميت طراحي سايت
  • ابزار مورد نياز براي HTML
  • تاريخچه زبان HTML
  • شروع از ابتدا
  • ساخت اولين صفحه وب

قسمت دوم: عناصر و دستورات زبان HTML 4.0

  • افزودن متن (Text)
  • درست کردن ليستها (List)
  • ساختن لينکها (Links)
  • اضافه کردن عکس به صفحه (Images)
  • ساخت Image map نقشه تصويری
  • درست کردن جدولها (Tables)
  • ساختن فرمها (Forms)
  • ساخت فريم براي قرار دادن چند صفحه در يک صفحه (Frames)
  • افزودن صدا و تصوير به صفحه (Sound & Video)
  • تگهای قسمت سر (head)
  • تگهای قسمت بدنه (body)

بخش پيشرفته

نسخه HTML 4.01 و تفاوت آن با نسخه قبلی
XHTML
استايل شيت (CSS)
فارسی نويسی در وب
بررسی و امتحان صفحه وب
Upload يا فرستادن و راه اندازی صفحات سايت بر روی سرور
رنگهای استاندارد وب
جدول علامتها و کد اسکی در وب (Entity and ASCII code)
نکاتی در ارتباط با سايتهای جستجو

ابتدای صفحه

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004 iranw3. All rights reserved .


Farsi language in the web --- فارسي نويسي در وب

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

فارسي نويسي در وب

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

خب دوستان براي راه اندازي يک وب سايت فارسي ابتدا بايد سيستم عاملي داشته باشيد که فارسي ساز داشته باشد و يا مانند ويندوز XP, 2000 سازگار با زبان فارسي باشد تا توانايي تايپ فارسي را داشته باشيد، در ضمن بهتر است که از برنامه هايي نظيرMS Word يا FrontPage از مجموعه آفيس مايکروسافت استفاده کنيد چون ميتوانيد مستقيم فارسي بنويسيد و آنرا بصورت فايلhtml ذخيره کنيد. با هر برنامه اي که راحت هستيد ، متن را وارد کنيد و سپس به سورس source صفحه برويد و تگ زير را در قسمتHead وارد کنيد،

<meta http-equiv=”content-type” content=”text/html;charset=utf-8”>

اين تگ، encoding مرورگر را براي استفاده از حروف و علامتهاي يونيکد تنظيم ميکند. براي ديدن و تنظيم encoding يک صفحه بصورت دستي بايد وارد منوي view در مرورگر شويد و برروي Encoding رفته واز ليست باز شده گزينه مورد نظر را انتخاب کنيد. اما وظيفه آن، تنظيم مرورگر بيننده براي نمايش صحيح حروف و علامتهاي بکار گرفته شده دروب سايت شما است چون هر کدام از آنها علامت و فونت خاص خود را دارند. تا بحال با يک نامه فارسي درايميل خود برخورد کرده ايد که يکسري حروف عجيب و غريب داشته باشد؟ اگر جوابتان بله است از اين به بعد وارد encoding شويد و آنرا روي Utf-8 بگذاريد.

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

Arial, Tahoma, Times New Roman

پس از انتخاب فونت، بهتر است که خصوصيات lang=”fa”, dir=”rtl” را به تگهايي مانند <body>, <font>, <p>, <div>, <span> اضافه کنيد که خصوصيت lang=” ” مشخص کننده زبان بکار گرفته شده و fa نمايانگر فارسي farsi است و همينطور خصوصيت dir=”rtl” که جهت نوشتن را تعيين ميکند و rtl نمايانگر راست به چپright to left است.

نکته: اگر خصوصيت dir=”rtl” را در تگ <body> بکار بريد، محل قرار گرفتن scroll bar در مرورگر از طرف راست به طرف چپ منتقل ميشود که اين خاصيت فقط در مرورگر اينترنت اکسپلورر IE عمل ميکند.

ممکن است شما بعد از ذخيره صفحه با يک مشکلي برخورد کنيد که بيشتر در مرورگر هاي نسخه قديمي مانند IE 5.5 به پايين مشاهده ميشود و آن ديدن حرف ي بزرگ در وسط کلمه بجاي نوع کوچک است مانند: ا ي نترنت که براي برطرف کردن آن دو راه وجود دارد:

اولين راه قرار دادن نسخه جديد فونت بکار گرفته شده در سايت براي دانلود کردن آن توسط بيننده وب سايت و نصب آن که هر کسي شايد بدرستي نتواند آنرا انجام دهد و اما راه حل دوم ، ابتدا صفحه مورد نظر را در برنامه FrontPage باز کنيد و به قسمتHTML در پايين برنامه رفته که در اين قسمت سورس کد را خواهيد ديد و کد&#1740; را حذف و بجاي آن کد &#1610; را قرار ميدهيد و سپس صفحه جديد را دوباره ذخيره ميکنيد. دقت کنيد، در صورتي حروف فارسي را به اين شکل خواهيد ديد که encoding برابر با windows-1252 باشد، يعني:

<meta http-equiv="content-type" content="text/html;charset="windows-1252">

يک نکته ديگر را بخاطر بسپاريد که اگر عنوان صفحه را فارسي تايپ کنيد يعني در قسمت<title> در بعضي از مرورگرها نمايش داده نخواهد شد.

ابتداي صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

بررسي و امتحان کردن صفحات

Previous

Next

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Build the first page --- ساخت اولين صفحه وب

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

ساخت اولين صفحه وب

برای دسترسی سريع از لينکهای زير استفاده کنيد:

ساخت اولين صفحه وب
نامگذاری و ذخيره کردن فايل

در اين بخش شما اولين صفحه وب را خواهيد ساخت تا سادگي زبان html را لمس کنيد. براي شروع ابتدا برنامه Notepad ويندوز را باز کنيد، البته مي توانيد از هر برنامه ويرايشگر متن استفاده کنيد. سپس اين تگها را بنويسيد:

<html>
</html>

اين تگها به مرورگر وب ميفهماند که از کجا کدهاي html شروع و به کجا ختم ميشوند. پس بقيه تگها را ما بايد بين اين دو وارد کنيم. تگها را ما به دو دسته تقسيم ميکنيم: تگهاي قسمت سر head و تگهاي قسمت بدنه body ، بدين صورت:

<html>
<head>
</head>
<body>
</body>
</html>

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

خب دوستان اين ساختار کلي و اسکلت بندي يک صفحه وب هست که بايد هميشه آنرا در نظر داشته باشيد. حالا يک متني بين تگهاي بدنه body وارد کنيد، مثلاً

<html>
<head>
</head>
<body>
This is my first page!
</body>
</html>

نامگذاری و ذخيره کردن فايل

الان کدنويسي ما تکميل شد و بايد اين فايل متني را ذخيره کنيم تا بتوانيم در مرورگر وب خود امتحانش کنيم. ابتدا منو File را باز کنيد و گزينه Save as را انتخاب کنيد، يک پنجره براي آدرس دهي و نامگذاري آن فايل باز ميشود که آدرس جايي که بايد ذخيره شود را مانند My Documents وارد کنيد

Save into My Documents

سپس در پايين پنجره باز شده در قسمت File Name اسم فايل را بنام Firstpage وارد کنيد و دقت کنيد تا در آخر اين اسم يک نقطه بگذاريد و پسوند html را بنويسيد و دکمه Save را بزنيد تا فايل متني ما بصورت يک فايل html ذخيره شود.

دقت کنيد اگر ميخواهيد فايل شما در سيستم عامل DOS هم باز شود بايد پسوند .htm را در آخر اسم وارد کنيد.

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

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

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

Previous

Next

توضیحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Building Forms (continued) --- ادامه ساخت اجزای فرم

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

ساخت اجزای فرم ( ادامه )

برای دسترسی سريع از لينکهای زير استفاده کنيد:

checkbox
radio button
drop-down list

fieldset
hidden field
disable elements

checkbox

براي درست کردن انتخاب چند گزينه اي checkboxes بايد type=”checkbox” قرار دهيم . براي مواقعي که ما ميخواهيم بيننده يک يا چند گزينه را انتخاب کند از آن استفاده ميکنيم. براي هر گزينه در اين قسمت بايد يکبار اين کد را نوشت و اگر ميخواهيد به صورت پيش فرض يک گزينه تيک خورده باشد بايد کلمه checked را به تگ اضافه کنيد:

<input name="chkbox01"
type="checkbox"> Item 01
<input name="chkbox01"
type="checkbox"> Item 02
<input name="chkbox01"
type="checkbox" checked> Item 03

Item 01 Item 02 Item 03

radio button

براي انتخاب تک گزينه اي از type=”radio” استفاده ميشود و به آنها radio button ميگويند ، در مواردي کاربرد دارد که کاربر حق انتخاب يک گزينه را دارد.

Item 01 Item 02 Item 03 Item 04

drop-down list

يکي ديگر از اجزاي فرم، ليستهاي انتخابي است که در مرورگر بشکل ليستهاي پايين آمدني (drop-down list) ظاهر ميشوند. با تگ <select> آغاز ميشود و براي هر گزينه داخل اين ليست بايد تگ <option> را بنويسيد و در انتهاي آنها تگ پايان دهنده اين ليست يعني </select> را مينويسيم. در ليست ساخته شده، بيننده و کاربر ميتواند يک گزينه را انتخاب کند ولي اگر خصوصيت multiple را به تگ <select> اضافه کنيد، کاربر ميتواند با پايين نگه داشتن دکمه هاي Ctrl يا Shift بر روي کيبورد، چند گزينه را از آن ليست بطور همزمان انتخاب کند.

<select name="selectList01" multiple>
<option value="item1">Item 01</option>
<option value="item2">Item 02</option>
<option value="item3">Item 03</option>
<option value="item4">Item 04</option>
<option value="item5">Item 05</option>
</select>

تگ select داراي خصوصيت size هم ميباشد که اگر آنرا برابر با عدد يک قرار دهيم بصورت زير ظاهر ميشود که در اين حالت بهتر است خصوصيت multiple را حذف کنيد. بصورت پيش فرض اولين گزينه در ليست نمايان ميشود ولي اگر خصوصيت selected را به يکي ديگراز تگهاي option اضافه کنيد، در مرورگر آن گزينه نمايش داده ميشود.

fieldset

بمنظور مرتب کردن و نظم دادن به اجزاي داخل يک فرم ميتوان از تگ<fieldset>در ابتداي کد يکي از اجزاي مورد نظراستفاده کرد و در انتهاي همان کد تگ</fieldset>را نوشت که بااين تگ يک کادر مستطيل نازک دور آن درست خواهد شد و اجزاي يک فرم را از هم جدا خواهد کرد. شما حتي ميتوانيد براي آن قسمت يک اسم بگذاريد که در بالاي آن کادر در مرورگر نمايان ميشود که براي اين کار بعد از تگ<fieldset>بايد تگ<legend> NAME </legend>را بکار برد که هر اسمي را ميتوانيد بجاي کلمهNAMEبکار بريد.

<form>
<fieldset>
<legend> Radio Button fieldset </legend>
<input name="rb" type="radio"> Item 01
<input name="rb" type="radio"> Item 02
<input name="rb" type="radio"> Item 03
<input name="rb" type="radio"> Item 04
</fieldset>
</form>

Radio Button fieldset

Item 01 Item 02 Item 03 Item 04

hidden field

بعضي اوقات، لازم ميشود تا اطلاعاتي از فرم به سرور فرستاده شود که در مرورگر نبايد ديده شود. براي اين منظور بايد تگ input را نوشته و خصوصيت type را برابر با hidden قرار دهيم ، خصوصيت name را هم مقداردهي مي کنيم با يک نام دلخواه و غيرتکراري ، همچنين خصوصيت value را نوشته و هر مقداري که به آن نسبت دهيم بصورت پنهاني به سرور فرستاده خواهد شد.

<input type="hidden" name="hiddenfield01" value="chkName">

disable elements

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

<textarea name="textarea" cols="20"
rows="3" disabled></textarea>
<input type="submit" name="Submit" value="Submit" disabled>

پس از اينکه اجزاي يک فرم ساخته و در صفحه اي از وب سايت قرار داده شدند ، حالا بايد فرآيندي را که روي اطلاعات وارد شده قرار است انجام شود ، مشخص کنيم. يعني معين کنيم که بعد از وارد شدن اطلاعات در خواستي و زدن دکمه تأييد توسط کاربر، به چه نحوي اطلاعات ذخيره يا به آدرس ايميلي فرستاده شوند که در قسمت بعدي توضيح خواهم داد.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

نحوه جمع آوری اطلاعات از فرم

Previous

Next

توضيحات

پرسش و پاسخ

جدول تگها

خودآزمايی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Capturing Form Data --- جمع آوری اطلاعات از طريق فرم

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

نحوه جمع آوری اطلاعات از فرمها

هنگاميکه دکمه تاييد يک فرم زده مي شود اطلاعات وارد شده از صفحه عبور کرده و به سرور ( کامپيوتري که فايلهاي وب سايت شما بر روي آن قرار دارد ) فرستاده مي شوند تا پردازش شود. در اين قسمت بايد با دو خصوصيت action و method در تگ <form> آشنا شويد. اين دو خصوصيت مشخص مي کنند که اطلاعات چگونه و به کجا بايد فرستاده شوند.

در خصوصيت action آدرس فايلي که اطلاعات را تجزيه تحليل مي کند و بر روي سرور قرار دارد وارد مي شود که بطور معمول يا برنامه CGI و يا فايلهاي ASP است. CGI مخفف Common Gateway Interface است که فايلهاي آن با استفاده از زبان Perl, C ويا VB نوشته مي شوند و ASP مخفف Active Server Page است که يک زبان قوي تحت وب است که متعلق به شرکت مايکروسافت مي باشد. شما حتي مي توانيد اطلاعات گرفته شده از يک فرم را به آدرس ايميل هم بفرستيد که در اين حالت بايد خصوصيت action را برابر با”mailto:“ قرار دهيد.

در خصوصيت method تعيين مي شود که اطلاعات گرفته شده از فرم چگونه و به چه صورت به برنامه و فايل پردازشگر اطلاعات برسد. به دو روش اطلاعات را مي توان به سرور فرستاد، يکي روش get و ديگري روش post مي باشد. اين دو روش تفاوتي با هم دارند که روش دوم يعني post استفاده بيشتري دارد. در روش اول بايد خصوصيت method=” “ را برابر با کلمه get قرار دهيم که پس از وارد کردن اطلاعات و زدن دکمه تاييد فرم ، مطالب وارد شده، به انتهاي آدرس درمرورگراضافه مي شود که از لحاظ امنيتي روش خوبي نيست اما در روش دوم اينگونه عمل نمي شود و در ضمن روش post با بيشتر مرورگرها سازگارتر است. خصوصيت ديگري هم هست که در تگ <form> بکار مي رود و براي بالا بردن امنيت يک فرم است که اطلاعات گرفته شده از فرم را رمزدار کرده و به سرور مي فرستد که اين خصوصيت enctype=”application/x-www.form.urlencodeed “ است .

اما همانطور که گفته شد براي فرستادن اطلاعات يک فرم از طريق ايميل به آدرسي مشخص، بايد خصوصيت action=” “ را برابر با mailto: قرار داد و همچنين method=” “ را برابر با post و در خصوصيت enctype=” “ اصطلاح multipart/form-data را مي نويسيم تا هر قسمت از اطلاعات وارد شده در فرم بصورت يک فايل متني جداگانه به ايميل پيوست شود و يا برابر با text/plain قرار ميدهيم. براي وارد کردن آدرس ايميل بايد آنرا در جلوي کلمه “mailto:” نوشت، بدين صورت:

<form method=”post” action=”mailto:emailaddress@domain.com” enctype=”text/plain”>

دقت کنيد که بعد از زدن دکمه تاييد فرم پيغامي ظاهر شده که بيننده را از فرستادن يک ايميل مطلع مي کند و سپس برنامه پيش فرض ايميل کاربر باز مي شود .

امروزه يکي از بهترين و پرکاربرد ترين برنامه براي جمع آوري و پردازش اطلاعات از يک فرم، زبان ASP مي باشد که در بخش مربوطه مي توانيد مطالب مورد نظر و چگونگي ارتباط با بينندگان سايت را از طريق فرم بياموزيد.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

طريقه ساخت فريم

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Formatting text --- آرايش و شکل دهی حروف

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

Formatting texts

برای دسترسی سريع از لينکهای زير استفاده کنيد:

         [<font></font>]
         [<big></big>]
         [<small></small>]
         [<b></b>]
[<i></i>]
[<u></u>]
[<s></s>]
[<sup></sup>]
[<sub></sub>]
[<tt></tt>]  [<em></em>]
 [<strong></strong>]
[<cite></cite>]
[<blockquote></blockquote>]
[<acronym></acronym>]
[<abbr></abbr>]
[<code></code>]
[<dfn></dfn>]
[<kbd></kbd>]
[<samp></samp>]
[<del></del>]
[<ins></ins>]

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

<font></font>
براي مشخص کردن نوع يا شکل حروف ، رنگ و يا اندازه آنها از اين تگ استفاده ميکنيم که داراي خصوصيات زير ميباشد. مثال

face=" " اين خصوصيت نوع فونت را تعيين ميکند که بايد برابر با يکي از فونتهاي استاندارد سيستم عامل قرار دهيد.

size=" "اندازه هر حرف را تعيين ميکند که از اعداد يک تا هفت با علامت مثبت به نشانه افزاينده و با علامت منفي به نشانه کاهش سايز استفاده ميشود.

color=" "براي کنترل و تعيين رنگ حروف اين تگ را ميتوان بکار برد.

<big></big> , <small></small>
براي تعيين اندازه حروف در يک حد خاص از اين تگها استفاده ميشود. مثال

<b></b>
متن بين آنها بصورت توپر bold ظاهر ميشود. مثال

<i></i>
براي نوشتن حروف بصورت کج italic اين تگ را بکار ميبريم. مثال

<u></u>
اين تگ خطي زير کلمات خواهد کشيد. مثال

<s></s>
گاهي اوقات نياز داريم که روي يک حرف يا کلمه خط بکشيم، بطور مثال ميخواهيم روي قيمت قديمي کالا خط بکشيم و قيمت جديد آنرا کنارش بنويسيم که در اينصورت اين تگ را بکار خواهيم برد، همچنين از تگ<strike> ميتوان بجاي آن استفاده کرد. مثال

نکته: تگ هايي مانند <b><i><u><s> را physical مينامند يعني متن بکار رفته در آنها بصورت آنچه که انتظار داريم نمايان ميشوند اما در مقابل، تگ هاي logical هم هستند که تنظيمات مرورگرها در آنها موثر خواهند بود.

<sup></sup>
حروف يا اعداد بين آنها بالاتر از سطر ظاهر خواهند شد، مانند عدد توان در رياضيات. مثال

<sub><sub>
حروف يا اعداد پايين تر از سطر نوشته ميشوند، مانند عدد ظرفيت در فرمولهاي شيمي. مثال

<tt></tt>
نوشته بين آنها بصورت حروف تايپي ظاهر ميشود و خاصيت آن در اينست که کليه حروف به يک اندازه جا اشغال ميکنند. مثال

<em></em>
 اين تگ مانند تگ <i> عمل ميکند و جزو تگهاي Logical است. مثال

<strong></strong>
 اين تگ هم مانند <b> عمل ميکند و در ضمن logical است. مثال

نکته: مزيت استفاده تگهاي logical به تگهاي physical در اينست که در کليه مرورگرها به نمايش در ميايند ولي در بعضي از مرورگرها ممکن است تگ physicalعمل نکند.

<cite></cite>
 براي جمله هاي نقل قول ميتوان ازش استفاده کرد که مانند <i> عمل ميکند و در ضمن logical هم هست. مثال

<blockquote></blockquote>
اين تگ مانند <p> وظيفه پاراگراف بندي را به عهده دارد با اين تفاوت که حاشيه بيشتري را در نظر ميگيرد و اگر براي دو دفعه متوالي استفاده شود، پاراگراف دوم با حاشيه دو برابر نسبت به اولي نمايان ميشود. در ضمن براي خطوط ساده از <q> ميتوان استفاده کرد. مثال

<acronym></acronym>
کاربرد اين تگ براي مختصرنويسي است يعني اگر يک کلمه مانند HTML داريد با استفاده از آن ميتوانيد کلمات کامل را در يک کادر کوچک به اسم tooltip قرار دهيد و هنگاميکه کاربرموس را روي آن کلمه ببرد اين کادر باز شده و آنها را نمايش دهد.کلمات کامل را بايد در خصوصيت title=" " قرار دهيد. مثال

<acronym title="radiodetecting and ranging"> RADAR </acronym>

<abbr></abbr>
اين تگ هم مانند تگ بالا است با اين تفاوت که در مرورگر چيزي را نمايش نميدهد.

<code></code>
اگر شما نياز داشتيد تا داخل يک صفحه از وب در مورد کد زبانهاي برنامه نويسي صحبت کنيد، ميتوانيد آنها را بين اين دو تگ قرار دهيد، همچنين براي متغيرها هم از تگ <var></var> ميتوان استفاده کرد. مثال

<dfn></dfn>
اين تگ نمايانگر کلمه definition و براي توصيف يک متن بکار ميرود که آن متن بصورت مايل ظاهر خواهد شد. مثال

<kbd></kbd>
اين هم نمايانگر کلمه keyboard است که حروف را بصورت ساده و تايپي نشان ميدهد. مثال

<samp></samp>
نمايانگر کلمه sample است و براي نمايش نمونه کارتوليد شده از يک برنامه بکار ميرود. مثال

<del></del>
هنگاميکه بخواهيد يک مطلب را حذف کنيد از اين تگ استفاده ميکنيد و يک خطي روي متن بين آنها کشيده ميشود که بطور معمول با تگ <ins> بکار ميرود. اين تگ داراي دو خصوصيت منحصر ميباشد، cite=" " که ميتواند آدرس يک فايل باشد تا توضيحي راجع به علت حذف آن مطلب بدهد و date=" " که تاريخ و زمان حذف را معين ميکند. مثال

<ins></ins>
اين تگ هم بطور معمول با <del> بکار برده ميشود و براي مشخص کردن يک مطلب وارد شده است که داراي خصوصيات درج شده در تگ <del> نيز ميباشد و همچنين اين دو تگ داراي خصوصيت title=" " هم ميباشند که در آن يک پيغام براي بيان علت حذف يا اضافه مطلب ميتوان نوشت. مثال

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

نحوه ساختن ليستها
ordered list
unordered list
definition list

Previous

Next

توضيحات

پرسش و پاسخ

جدول تگها

خودآزمايی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Building Forms --- ساخت اجزای فرم

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

ساخت اجزای فرم

برای دسترسی سريع از لينکهای زير استفاده کنيد:

فرم چيست؟
دکمه (button)
text field, text area

label
Tab order
file field

فرم چيست؟

فرمها تنها عنصري هستند که بيننده سايت ميتواند اطلاعاتي را بطور مستقيم وارد کرده که اين اطلاعات بعد از تجزيه و تحليل يا در فايلي ذخيره شده يا فرستاده ميشود. شما ميتوانيد داخل يک صفحه يا يک وب سايت چندين فرم داشته باشيد بطور مثال براي چند نوع نظرسنجي از بينندگان که هر کدام از اين فرمها را با استفاده از خصوصيت name=” “در تگ <form> بايد نامگذاري کنيد تا اطلاعات مربوط به هر فرم با نام همان فرم پردازش شود. فرمها داراي اجزاي متفاوتي با وظيفه مشخص ميباشند که بايد قبل از تگ پايان دهنده </form> آنها را بکار برد. بعضي از اين اجزا عبارتند از: کادرهاي متني text fields ، قسمت انتخابات چند گزينه اي checkboxes وتک گزينه اي radio buttons ، ليستهاي پايين کشيدني drop-down lists و دکمه هاي تأييد submit وپاک کننده reset .

فرمها توسط برنامه هايي نظير ASP, CGI و با افزودن خصوصيات action=” “, method=” “, enctype=” “ در تگ <form> اطلاعات وارده را پردازش کرده و به وب سرور ميفهماند که به چه روش و در کجا اطلاعات ذخيره يا فرستاده شود. وب سرور به کامپيوتري که محتواي سايت شما بر روي آن قرار دارد گفته ميشود.

دکمه (button)

کليه اجزاي ساخته شده در يک فرم بدون بودن دکمه تأييد بي فايده هستند، چون بعد از فشردن اين دکمه است که اطلاعات وارده در فرم پردازش ميشوند. پس ابتدا به ساختن اين دکمه ميپردازيم. براي ساختن دکمه ها در يک فرم به دو روش ميتوانيم عمل کنيم:

روش اول: با استفاده از تگ <button></button> که داراي دو خصوصيت name=” “براي نامگذاري و type=” “براي مشخص کردن نوع دکمه که submit و يا reset ميباشد . در بين تگ آغازکننده و پايان دهنده هر چي نوشته شود در ظاهر دکمه نمايان ميشود

<button name="button 01" type="submit"> OK </button>

روش دوم: با استفاده از تگ <input> که مانند روش اول دو خصوصيت name=” “که بايد کلمه button در جلوي آن بيايد و type=” “که ميتواند هم submit باشد و يا reset.

<input name="button" type="submit">

فرقي که اين دو روش با هم دارند در اينست که شما در روش اول هر نوشته اي را بخواهيد در روي دکمه هنگام نمايش صفحه در مرورگر نشان داده ميشود اما در روش دوم شما دخالتي در اين کار نداريد و به صورت پيش فرض کلمه submit , reset نمايان ميشود. البته ميتوانيد بجاي دکمه هاي ساخته شده توسط مرورگراز عکس هم استفاده کنيد يعني شکل يک دکمه را طراحي کنيد و در فرم قرار دهيد که خصوصيت type=” “ را برابر با کلمه image قرار ميدهيد و با خصوصيت src=” “ آن را آدرس دهي ميکنيد:

<input name="button" type="image" src="images/button01.gif">

لازم بذکر است که در اين تکنيک فقط از حالت submit دکمه بايد استفاده کرد.

text field, text area

خب بعد از ساختن دکمه ها ميپردازيم به بقيه اجزاي يک فرم. از اين به بعد ما با تگ

<input name=” “ type=” “>

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

در مدل اول ازاين تگ استفاده ميکنيم:

<input name="textfield 01" type="text”>

دقت کنيد که کلمه text بايد در جلوي خصوصيت type=” “بيايد تا مرورگر بفهمد چه اجزائي از يک فرم را نمايش ميدهد. توسط خصوصيت size=” “ که با عدد مقدار دهي ميکنيد اندازه نمايش اين کادر خطي در مرورگر را کنترل ميکنيد و توسطmaxlength=” “ حداکثر تعداد حروفي را که بيننده مجاز هست تا وارد کند را کنترل ميکنيد.

Textfield :

اگر قرار باشد که بيننده داخل اين کادر خطي ، کلمه رمز را وارد کند پس بجاي خصوصيت type=”text” بايد از type=”password” استفاده کنيد تا هر متني که وارد شود بصورت ستاره در مرورگر نمايش داده شود.

Password :

اما مدل ديگري هست که متنهاي بلند داخل آن نوشته خواهد شد که بايد از تگ<textarea></textarea> استفاده کنيد که جدا از خصوصيت name=” “از خصوصيات cols=” “ , rows=” “براي کنترل رديفها و ستونهاي کادر بکار ميبريد.

label

زمانيکه شما اجزاي فرم را اضافه مي کنيد، مي توانيد کنار هر کدام يک متني وارد کنيد تا نام آن قسمت درمرورگر مشخص شود. اما با افزودن تگ <label> کنترل بيشتري روي نام واجزاي يک فرم خواهيد داشت چون مي توانيد توسط اين تگ يکي از اجزاي فرم را احاطه کنيد، بدين صورت:

<label> Name :
<input type="text" name="textfield01">
</label>

که اين کد به صورت زير ظاهر مي شود،

دراين تگ، توسط خصوصيت for مي توانيد مشخص کنيد که label مربوط به کدام قسمت فرم است و در اين حالت نيازي به احاطه کردن اجزاي فرم نيست،

<label for="textfield01"> Name : </label>
<input type="text" name="textfield01">

Tab order

يکي از خصوصيات مفيد تگهاي html بنام tabindex است که کاربرد زيادي در عنصر فرم دارد و به همين خاطر در اين قسمت آنرا توضيح ميدهيم. تاکنون متوجه شده ايد که با زدن دکمه Tab بر روي کيبورد، مکان نما با ترتيب خاصي بر نقاط مختلف صفحه متمرکز مي شود که مي توانيم اين ترتيب حرکت را به کنترل خود در بياوريم. قبول کنيد که حرکت کردن بين اجزاي يک فرم توسط موس مخصوصاً زمانيکه يک فرم طولاني پيش رو داريم، بسيار سخت تر از حرکت با دکمه Tab کيبورد است. با اضافه کردن خصوصيت tabindex به تگهاي يک فرم و مقداردهي اين خصوصيت به ترتيب اعداد مي توانيم تمرکز مکان نما را از يک نقطه به نقطه مورد نظر به کنترل خود در آوريم. دقت کنيد که مقادير اين خصوصيت تکراري نباشد. به کد زير توجه بفرماييد:

<input type="text" name="field1" tabindex="1">
<input type="password" name="pass1" tabindex="2">
<textarea name="area1" cols="10" rows="5" tabindex="3"></textarea>

file field

گاهي اوقات نياز هست که به همراه اطلاعات وارد شده در فرم، فايلي هم ضميمه و به سرور فرستاده شود. براي اين حالت بايد در فرم، تگ <input> را نوشت و خصوصيت type آنرا برابر با کلمه file قرار داد. هنگاميکه اين خصوصيت را وارد مي کنيد، مرورگر بطور اتوماتيک يک کادر متني و يک دکمه براي جستجوي فايل بنام Browse نمايان مي کند. در نظر داشته باشيد که براي اين تگ تنظيمات وب سروربسيار مهم است وگرنه فايل فرستاده شده، خراب خواهد شد و اگر هم فرم قرار است که به ايميل فرستاده شود پس به اين نکات بايد دقت کنيد که در تگ اصلي فرم حتماً enctype="multipart/form-data" را نوشته و در تگ file field هم accept="text/plain" را وارد کنيد که در اين حالت فايلهاي متني txt به درستي فرستاده مي شود. کلاً در بيشتر مواقع و با تنظيمات درست هم ممکن است فايل خراب شود.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

ادامه مبحث ساخت اجزای فرم

Previous

Next

توضيحات

پرسش و پاسخ

جدول تگها

خودآزمايی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Using Frames --- استفاده از فريم

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويري
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهاي قسمت سر
(body) تگهاي قسمت بدنه

مطالب ديگر

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

استفاده از فريم

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

فريم چيست؟
cols, rows
آدرس دهي و نامگذاري
frame border

noresize
scrolling
noframes

فريم چيست؟

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

به مجموعه صفحات گنجانده شده در يک صفحه frameset مي گويند و به هر صفحه از آن يک frame يا يک چارچوب گفته ميشود. در ساختار اصلي کدها، ديگر تگ <body> نوشته نميشود و جاي آن تگ <frameset></frameset> قرارميگيرد، البته هر صفحه يعني هر فريم را که کد نويسي ميکنيد مانند ساختار معمولي است و از تگ <body></body>بايد استفاده کنيد ولي هنگاميکه صفحات را در يک frameset ميگذاريد بايد در ساختار کد آن بجاي <body>از <frameset> استفاده کرد،

<html>
<head>
</head>
<frameset>
</frameset>
</html>

توجه داشته باشيد که براي ديدن source code فريمها بايد بر روي هر فريم کليک راست کرده و گزينه view source را انتخاب کنيد و براي مشاهده کدهاي يک frameset بايد از منو view مرورگر اقدام نماييد.

cols, rows

هر فريم ميتواند عمودي يا افقي در صفحه قرار گيرد يا يک frameset مخلوطي از چند فريم عمودي و افقي باشد که هر کدام از آنها توسط خصوصيتي در تگ<frameset> کنترل ميشوند. به طور مثال اگر دو فريم داشته باشيم و آنها را بخواهيم به صورت عمودي در صفحه قرار دهيم از خصوصيت cols=” “ استفاده ميکنيم و اين خصوصيت را برابر با درصد اشغال هر فريم قرار ميدهيم يعني اگر ما دو فريم داشته باشيم و بخواهيم که يکي از آنها %30 صفحه را اشغال کند پس ديگري %70 را اشغال خواهد کرد و تگ آن بدين صورت ميشود:

<frameset cols=”30%,70%”>

دقت کنيد که اين اعداد با علامت ويرگول از هم جدا ميشوند. اگرهم بخواهيد دو فريم افقي داشته باشيد از خصوصيت rows=” “ استفاده ميکنيد. اما براي قراردادن دو صفحه يا دوفريم درframeset بايد هر کدام از آنها را بطور جداگانه آدرس دهي کنيد و تگ آن براي هر کدام از فريمها به اين صورت است:

<frameset cols=”50%,50%”>
<frame src=”01.htm”>
<frame src=”index.html”>
</frameset>

مثال

آدرس دهي و نامگذاري

همانطور که ملاحظه ميفرماييد جلوي خصوصيت src=” “بايد آدرس صفحه را بنويسيد. خصوصيت ديگري هم هست که به غير ازخصوصيت src بايد به اين تگ اضافه شود و آن name=” “ است که براي نامگذاري هر فريم بکار ميرود. اين نامگذاري زماني براي ما مفيد است که هرگاه ما بخواهيم دريکي از فريمها لينک بگذاريم هنگاميکه روي لينک کليک ميشود بايد مشخص شود که اطلاعات آن لينک در کدام فريم نمايش داده شود، به طور مثال فريم سمت چپ داراي يکسري لينک است که اطلاعات هر کدام بايد در فريم سمت راست نمايش داده شود پس به لينکها بايد نام فريم مورد نظر را بدهيم تا مشخص شود که اطلاعات را در کدام فريم نشان دهند. اما جدا از نامگذاري هر فريم براي اينکار بايد به هر لينک خصوصيت target=” “ را اضافه کرد و آنرا برابر با نام منتخب هر فريم قرار داد.

<frameset cols="30%,70%">
<frame name="left" src="htmlpages/01.html">
<frame name="right" src="htmlpages/index01.htm">
</frameset>

اگر هم يک لينک در فايل 01.html داشته باشيم و بخواهيم درindex01.htm نمايش داده شود، طبق گفته هاي بالا:

<a href="htmlpages/info.html" target="right"> info.html </a>

مثال

frame border

شما اگر يک frameset درست کرده باشيد متوجه يک کادر بين فريمهاي داخل آن شده ايد، براي برداشتن اين کادر ميتوانيد frameborder="no" و يا border=”0” رابه تگ <frameset> اضافه کنيد.

مثال

noresize

هنگاميکه frameset در مرورگر نمايش داده شود، بيننده سايت شما ميتواند سايز هر فريم را تغيير دهد يعني وقتي که نشانگر موس را روي لبه هر فريم ببرد ميتواند آنرا با drag کردن کم يا اضافه کند که براي جلوگيري از تغيير سايز هر فريم خصوصيت noresize رابه تگ <frame> بيافزاييد.

مثال

scrolling

خصوصيت ديگري هم هست که scroll bar هر فريم را کنترل ميکند، هر فريم داراي scroll ميباشد يعني ميتوانيد صفحه داخل فريم را به چپ وراست يا بالاوپايين حرکت دهيد که با خصوصيت scrolling=” “ کنترل ميشود و آنرا برابر با کلمات Yes,no,auto قرار دهيد.

مثال

noframes

بعضي از مرورگرها هستند که از اين عنصر پشتيباني نمي کنند و فريم ها را نشان نمي دهند، به همين دليل شما مجبور هستيد تا به کاربراني که از اين گونه مرورگرها استفاده مي کنند، اعلام کنيد که مرورگر آنها اين قابليت را ندارد. پس فراموش نکنيد که اين قطعه کد را هميشه به frameset اضافه کنيد:

<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>

ابتداي صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

نحوه ساخت iframe

Previous

Next

توضيحات

پرسش و پاسخ

جدول تگها

خودآزمايی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


About Google --- ثبت سايت در گوگل

Google
Web iranw3.com
مطالب آموزشی

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

ثبت سايت در گوگل

طرح ساخت اين سايت توسط دو دانشجو بنامهاي Larry Page و Sergey Brin در يکي از خوابگاههاي دانشگاه استانفورد پي ريزي شد و بعد از مدتي به بزرگترين و محبوبترين موتور جستجو ( search engine ) در دنيا تبديل شد که در حال حاضر بيش از هشت ميليارد صفحه وب را در پايگاه داده اي ( database ) خود جمع آوري کرده که توسط يک الگوريتم منحصر بفرد و با سرعت بسيار بالا خدمات جستجو را براي کاربران انجام ميدهد تمام اين فرآيندها داخل يک شبکه با بيش از هزار کامپيوتر انجام ميشود. البته اين سايت به غير از جستجو، خدمات ديگري هم انجام ميدهد که ميتوانيد به آدرس www.google.com مراجعه کنيد.

ثبت سايت در Google

يکي از راههاي بالا بردن ترافيک يک سايت، ثبت آن در گوگل ميباشد که براي اينکار شما ميتوانيد به آدرس www.google.com/addurl.html مراجعه و سايت خود را ثبت کنيد. دقت کنيد که داخل فرم مخصوص در آن صفحه آدرس کامل سايت را بهمراه پيشوند http:// بايد وارد کنيد و در ضمن نيازي به ثبت همه صفحات نيست و فقط صفحه اصلي يا همان homepage کافي است چون گردشگر گوگل بنام Googlebot بقيه محتواي سايت را از همان صفحه اول پيدا ميکند. پس فراموش نکنيد که صفحه اصلي شما بايد به همه نقاط سايت لينک داشته باشد.

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

رتبه بندي صفحات يک سايت ( Page Ranking )

يکي از نکاتي که خيلي بايد دقت کنيد، رعايت کردن اصول و قوانين گوگل ميباشد تا صفحات سايت شما در رتبه هاي اوليه هنگام جستجو قرار گيرد. پس از يافتن سايت شما توسط Googlebot ، صفحات تجزيه تحليل ميشوند و در يک الگوريتم، رتبه ميگيرند. براي بالا بردن اين رتبه، نکات زير را بايد رعايت کنيد:

نکات لازم در مورد طراحي

  • صفحات سايت بايد داراي لينکهاي منظم باشد تا دسترسي را به کليه نقاط سايت آسان کند.
  • بطور حتم يک صفحه بنام site map ( نقشه سايت ) درست کنيد و کليه لينکهاي سايت را در آن قرار دهيد و اگر بيشتر از صد لينک داريد، بقيه را در يک صفحه ديگر قرار دهيد.
  • داخل هر صفحه از مطالبي استفاده کنيد که با عنوان صفحه و کلمات کليدي( keywords ) مرتبط باشد.
  • کلمات کليدي را که در متاتگ مشخص کرده ايد بايد در همان صفحه بکار برده شود.
  • بطور حتم از نشان دادن کلمات کليدي، بصورت متن استفاده کنيد بجاي بکار بردن تصوير.
  • در خصوصيت alt تگها از توضيحات مرتبط با عنوان صفحه و محتواي صفحه استفاده کنيد.
  • اصول بکار بردن صحيح کدهايHTML را رعايت کنيد.
  • صفحات پويا ( dynamic pages ) يعني صفحاتيکه در آدرس آنها علامت ? است، براحتي صفحات معمولي ليست نميشوند.
  • در هر صفحه کمتر از صد لينک بکار بريد .

نکات فني

  • گردشگر گوگل ( Googlebot ) با جاوااسکريپت، کوکي ها، session ID ، DHTML ويا Flash مشکل دارد.
  • از وجود If-Modified-Since HTTP header در وب سرور سايت خود اطمينان حاصل کنيد چون اين ويژگي تغييرات سايت شما را به گردشگرها اعلان ميکند.
  • از فايل متنيrobots.txt در دايرکتوري سايت خود استفاده کنيد و دقت کنيد که از Googlebot crawler در آن فايل جلوگيري نشده باشد.
  • با متخصصين سرور مشورت کنيد تا از نرم افزارهاييکه از فعاليت گردشگرها جلوگيري ميکند، استفاده نشود.

پس از رعايت کردن اين نکات به آدرس http://www.google.com/addurl.html مراجعه کنيد و سايت خود را در آن ثبت کنيد.

نکات ديگري هم هست که توسط متخصصان سايت گوگل توصيه ميشود،

  • صفحات را براي استفاده کاربر بسازيد نه براي موتورهاي جستجو.
  • از حقه هايي براي بالا بردن رتبه سايت دوري کنيد.
  • از گذاشتن لينک سايتهايي که در رتبه بندي شما اثر منفي دارند بپرهيزيد، مانند سايتهايي که روي اصول طراحي نشده اند و يا فعاليتهاي غيرقانوني انجام ميدهند مثل web spammer ها.
  • از بکارگرفتن برنامه هايي که بصورت غيرقانوني سايت شما را ثبت و رتبه آنرا بالا ميبرند دوري کنيد مانند برنامه WebPosition Gold .
  • از لينکها يا متنهاي پنهان استفاده نکنيد.
  • صفحات را با متنهاي بيربط پر نکنيد.
  • از بکار بردن متنهاي تکراري يا تکرار صفحات با يک مضمون پرهيز کنيد.
  • براي يافتن سريعترسايت شما، لينک خود را در سايتهاي معروف قرار دهيد.

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

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

Previous

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Build a Head Section

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

تگهای قسمت Head

برای دسترسی سريع از لينکهای زير استفاده کنيد:

       [<!doctype>]
       [<title></title>]
       [<base>]
       [<meta>]
[<link>]
       [<script></script>]
       [<style></style>]

<!doctype>

در اين بخش ميخواهم در مورد تگهاي قسمت <head> برايتان توضيح دهم . همانطور که ميدانيد تگهاي Html را به دو بخش اصلي تقسيم کرديم ، يکي قسمت سر يا همان head ديگري قسمت بدنه يا body که هر دو مابين دو تگ اصلي<html></html> نوشته ميشوند، اما يک تگ هم وجود دارد که خارج از اين قانون عمل ميکند و در اولين خط شروع کدنويسي بايد آنرا بنويسيم يعني قبل از تگ آغاز کننده <html>و آن DTD يک صفحه وب ميباشد که مخفف Document Type Definition است و کار آن معرفي نوع تگها خصوصيات آنها و قوانيني که بايد در آن صفحه وب بکار برده شود که بطور خلاصه در تگ مربوط به آن توصيف ميشود. تگ مشخصه DTD ، <!doctype> ميباشد و مانند بقيه تگها داراي خصوصياتي هست، البته اين تگ اختياري است چون بعضي از مرورگرها بدون آن هم صفحه را نمايش ميدهند ولي بهتر است که نوشته شود.

هر نسخه از HTML يک DTD مخصوص به خود را دارد و نسخه هاي معتبر HTML عبارتند از: 2, 3.2, 4 و نسخه جديد آن Html 4.01 ميباشد و اگر از کدهاي XHTML هم استفاده ميکنيد ، آنرا هم بايد مشخص کنيد. همانطور که در بخشهاي قبل گفتم اعلام و به رسميت شناختن تگهاو نسخه هاي HTML , XHTML به عهده W3C ميباشد .

DTD براي HTML 4.0

<!DOCTYPE html public “-//w3c//DTD HTML 4.0//en”>

و براي XHTML 1.0

<!DOCTYPE xhtml public “-//w3c//DTD XHTML 1.0 strict//en”>

بعد از اين تگ روال معمول کدنويسي را انجام ميدهيم. حالا ميپردازيم به تگهاي مربوط به قسمت سر يا همان head .

<head></head>

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

تگهاي لازم براي اين قسمت به شرح زير ميباشند:

<title>, <base>, <meta>, <link>, <script>, <style>

<title></title>

بين اين دو تگ هر چي نوشته شود در نوار عنوان مرورگر title bar نمايان خواهد شد. دقت داشته باشيد که از اسامي کوتاه استفاده کنيد چون جمله طولاني را نصفه نشان ميدهد و همچنين اگر فارسي بنويسيد در سيستمهايي که قابليت فارسي ندارند به صورت علامت سوال نمايان ميشود.

<base>

در مواردي که بخواهيد آدرس اصلي وب سايت را همان ابتدا معرفي کنيد ، از اين تگ استفاده ميکنيد. خاصيت اين تگ اينست که در هنگام درست کردن لينکهاي داخلي وب سايت ديگر نيازي به نوشتن آدرس کامل نيست و فقط ميتوانيد در خصوصيت href=” “ لينکها، اسم دايرکتوري در صورت نياز و اسم خود فايل را بنويسيد.

<base href="http://www.sitename.com">

دقت کنيد که نوشتن پروتکل http اجباري است.

<meta>

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

http-equiv=” “, name=” “ , content=” “

براي معرفي کلمات کليدي سايت بايد خصوصيت http-equiv=”keyword” قرار دهيم و کلمات مورد نظر را در خصوصيت content=” “ وارد کنيم،

<meta http-equiv=”keyword” content=”html, web, amoozesh, amouzesh”>

همچنين ميتوانيد نوع رمزگذاري encoding مرورگر را در اين قسمت معين کنيد که براي بکار بردن حروف فارسي بايد از utf-8 استفاده کنيد که در قسمت فارسي نويسي توضيح خواهم داد.

<meta http-equiv=”content-type” content=”text/html;charset=utf-8”>

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

<meta name=”author” content=”your-name”>

اگر شما نميخواهيد که صفحه اي در هارد ديسک کاربر سايت شما ذخيره شود تا بتوان آنرا بصورت offline هم ببينند، از اين تگ بايد استفاده کنيد:

<meta name=”pragma” content=”no-cache”>

يا اينکه آن صفحه هر لحظه اطلاعاتش عوض ميشود و ميخواهيد تا بيننده سريع آن اطلاعات را ببيند، از خاصيت refresh مرورگر استفاده کرده و اين تگ را اضافه ميکنيد:

<meta http-equiv=”refresh” content=”5”>

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

<meta http-equiv=”refresh” content=”5;url=http://www.sitename.com/page01.htm”>

<link>

اين تگ براي زماني است که ما بخواهيم از اطلاعات يک فايل مانند style sheet در آن صفحه استفاده کنيم،

<link rel=”stylesheet” href=”stylesheets_folder/menu.css”>

<script>

کدهايي مانند javascript را در اين تگ کنترل ميکنيم که در بخش جاوا اسکريپت توضيح خواهم داد.

<style>

تگ مشخصه Style sheet ميباشد که در بخش مربوطه توضيح داده شده است.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

خصوصيات تگ body

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


HTML history --- تاريخچه اچ تی ام ال

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

تاريخچه Html

HTML توسط Tim Berners-Lee در خلال دهه 90 ميلادي همراه با گسترش وب، شکوفا شد. اين زبان توسط مرورگر Mosaic معروفيت خاصي پيدا کرد. در آن زمان HTML در چند مدل منتشر مي شد که آن بستگي داشت به سازنده فايل و انجمنهايي که در زمينه وب فعاليت داشتند.

در نوامبر 1995 نسخه HTML 2.0 گسترش يافت و بلافاصله در همان سال HTML 3.0 منتشر شد، ولي استقبالي از آن نشد. در سال 1996 انجمن W3C شروع به فعاليت بر روي نسخه اين زبان کرد که حاصل کار آنها در 14 ژانويه 1997 انتشار HTML 3.02 بود. اين نسخه توانست رضايت اکثريت را جلب کند چون هماهنگي بيشتري با مرورگرهاي مختلف در سيستمهاي عامل متفاوت داشت. در تمام نسخه هاي اين زبان ، سعي بر اين شده بود تا نظر کساني که در زمينه وب سرمايه گذاري کرده بودند جلب شود و برنامه هاي توليد شده براي وب بتوانند مدت طولاني تري قابل استفاده باشند. به همين منظور HTML براي اهداف گسترده تري ، در وب توسعه يافت تا در کليه سيستمهاي اطلاع رساني و الکترونيکي کوچک و بزرگ با بکار بردن گرافيک و رنگها، قابليت بهره برداري بيشتري داشته باشد.

در 18 دسامبر 1997 نسخه HTML 4.0 در وب منتشر شد و در همين بين شرکتهاي توليد کننده مرورگر وب يکسري مشخصات منحصر بخود را به اين نسخه اضافه کردند که قابل اجرا در مرورگرهاي ديگر نبود. بعضي از اين تغييرات در W3C مورد تاييد قرار گرفت اما بعضي ديگر نه. با تغييرات HTML مرورگرها مجبور به تغيير شدند تا با تحولات جديد سازگار شوند.

در تاريخ 24 آوريل 1998 در اين نسخه تجديد نظر شد و حاصل آن پيدايش HTML 4.01 بود که با کمي تغيير و رفع يکسري مشکلات، در W3C برسميت شناخته شد و اين انجمن استفاده از آنرا به توسعه دهندگان و طراحان وب ، توصيه کرد.

بطور کل مجموعه HTML 4 با قابليت استفاده از embeded objects, frames, scripting, style sheets و با کارآيي بالاتر جدولها و فرمها به وب معرفي شد، همچنين در اين نسخه توجه زيادي به افراد با توانايي کم شده بود تا اين افراد هم بتوانند از محيط وب استفاده کنند. اما مهمترين قدمي که در اين نسخه برداشته شد، پشتيباني HTML از زبانهايي بود که از راست به چپ نوشته ميشدند مانند زبان فارسي، که در اين نسخه با پذيرفتن استاندارد ISO 10646 به هدف بزرگ بين المللي شدن اين زبان نزديک شدند تا همه مردم دنيا در هر کجا و با هر زباني بتوانند اسناد HTML را منتقل کنند.

HTML 4.01 تفاوت کمي با نسخه اصلي خود يعني 4.0 دارد اما در عوض هماهنگي بيشتري با نسل جديد زبان وب يعني XHTML و نسل بعدي يعني XML دارد. در اصل XHTML اساس و مقدمه XML است که براي هماهنگي و سازگاري HTML با XML منتشر شده است.

HTML 4 زبان بسيار قوي است براي طراحان و سازندگان محصولات وب اما در آن توجهي به دستگاههاي اطلاع رساني و الکترونيکي کوچک با قدرت و حافظه کمتر نشده است. به همين منظورW3C در 26 ژانويه 2000 اقدام به معرفي XHTML 1.0 کرد و در 19 دسامبر همان سال آنرا به رسميت شناخت و تاکيد به استفاده از اين نسخه کرد تا با بکارگيري ويژگيهايي که دارد دامنه استفاده از زبان محبوب HTML را گسترش دهد و مقدمات معرفي XML را فراهم کند.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

شروع از ابتدا
تگهای Html
Source code

Previous

Next

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


HTML 4.01 learning

Google
Web iranw3.com
مطالب آموزشی

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

Html 4.01 و تفاوتهاي آن با نسخه 4.0

HTML 4.01 نسخه اصلاح شده 4.0 ميباشد که براي هماهنگي با نسخه جديد يعنيXHTML و نسل بعدي زبان وب که XML باشد، در وب منتشر شد. اين نسخه با تغييرات کمي عرضه شد اما شما مجبور هستيد که اين قوانين را رعايت کنيد اگر ميخواهيد وب سايت شما هماهنگي بيشتري با نسخه جديد داشته باشد. بعضي از اين تغييرات را در اين بخش برايتان ميگويم ولي نکات اساسي در اين زمينه را در بخش XHTML خواهم گفت. بهتر است که شما بعد از فراگيري مجموعه HTML 4 قوانين بکار برده شده در XHTML را رعايت کنيد تا در آينده وب سايت شما به مشکل جدي برنخورد.استفاده يکسري تگها از طرف انجمن W3C ديگر توصيه نميشود وحتي بعضي از آنها ممنوع شدند.

براي شروع کدنويسي در HTML 4.01 اولين چيزيکه بايد رعايت کنيد DTD آن فايل است که در حال حاضر مرورگر ها بدون آن هم صفحه را نمايش ميدهند ولي در آينده ممکن است اينچنين نباشد. همانطور که ميدانيد DTD بايد قبل ازتگ <HTML> نوشته شود. براي اين نسخه سه مدل در نظر گرفته شده است که در مدل اول صفحه شما فقط از تگهاي استاندارد و قابل قبول استفاده خواهد کرد:

<!DOCTYPE HTML PUBLIC
‘’-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>

اگر در آن صفحه تگهاي از رده خارج هم بکار برده ايد بايد از اين مدل DTD استفاده کنيد:

<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

همچنين اگر از عنصر Frame استفاده ميکنيد اين مدل را بکار بريد:

<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>

بعد از مشخص کردن DTD آن صفحه بايد دقت کنيد که در اين نسخه بايد کليه تگها ، پايان دهنده داشته باشند. بعضي از تگها يا تگ پايان دهنده نداشتند و يا نوشتن آنها اجباري نبود مانند <img>,<p> . اما همه بايد بسته شوند و آنهاييکه تگ پايان دهنده نداشتند، در همان تگ و قبل از بستن تگ با علامت > بايد علامت slash يعني/ را بگذارند. مانند:

<img src=”…/images/mypic.gif” />

اين قبيل تگها را بدين صورت بکار بريد:

<meta/>, <br/>, <blockquote/>, <hr/>, <basefont/>, <Q/>, <li/>, <dt/>, <dd/>, <img/>, <area/>, <frame/>, <input/>, <param/>, <bgsound/>

نکته: اگر تگ <a> در حالت Anchor بود يعني حالتيکه لينک به يکي از نقاط داخل همان صفحه پيوند داده خواهد شد، بايد آنرا بصورت <a/> بنويسيد.

اينها قوانيني بودند که در اين نسخه تغيير کردند تا اين نسخه با XHTML سازگار شود.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

آموزش Xhtml

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Creating Iframes

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

نحوه ساخت iframe

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

<iframe src=”page.html”></iframe>

است که شما اين تگ را در هر قسمت از کد html مي توانيد بگذاريد و نيازي به تگ <frameset> نيست. کليه خصوصياتي را که براي فريم بکار مي رود براي iframe هم کاربرد دارد و فقط width=” “ و height=” “ هم به آن ميتوانيد اضافه کنيد تا ابعاد iframe را کنترل کنيد. فراموش نکنيد که از name=” “ استفاده کنيد تا نام آنرا براي ساختن لينک بکار بريد.

شما در يک صفحه مي توانيد چندين iframe داشته باشيد البته ناگفته نماند که اين عنصر در مرورگرهاي قديمي به غير از اينترنت اکسپلورر نمايش داده نمي شود.

به مثال زير توجه فرماييد:

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

افزودن صدا و تصوير به يک صفحه

Previous

Next

توضيحات

پرسش و پاسخ

جدول تگها

خودآزمايی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Building Image Maps

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

ساخت نقشه تصويری ( image map )

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

خب حالا عکس مورد نظر را با استفاده از تگ <img>درصفحه قراردهيد، سپس خصوصيت usemap=" " را به تگ اضافه کنيد که آنرا برابربا يک اسم واحد بايد قرار دهيم تا از آن اسم در جاي ديگر استفاده شود. اين خصوصيت به مرورگر ميفهماند که عکس را بصورت Image map ميخواهيم بکار بريم.

<img src="images/mypic.gif" usemap="#map01">

به علامت # دقت کنيد که بايد نوشته شود. در حال حاضر عکس آماده است و بايد تگهاي نقشه را وارد کنيم.ابتدا تگ <map name="map01"> وارد ميکنيم تا مرورگر بفهمد که نقشه آغاز شده و با استفاده از خصوصيتname=" " مشخص ميشود که چه عکسي قرار است اين خاصيت را داشته باشد. حالا نوبت به تعيين قسمتهاي مختلف عکس رسيده که هر قسمت در چه اندازه اي و به کجا بايد لينک شود. اين قسمتها ميتوانند اشکال هندسي نظيردايره، چهارگوش وچند ضلعي باشند. اين اطلاعات در تگ <area> مشخص ميشوند، اين تگ داراي سه خصوصيت ميباشد:

Shape=" " مشخص ميکند که هر قسمت داراي چه شکل هندسي ميباشد. اگر چهارگوش rectangle باشد آنرا برابر با "rect" قرار ميدهيم، اگر دايره circle بخواهيم برابر با "circle" و اگر چند ضلعي polygon بخواهيم برابر با "poly" قرار ميدهيم.

Coords=" "اين خصوصيت، مختصات نقاط تشکيل دهنده شکلها را مشخص ميکند که مختصات هر نقطه بر اساس محور x, y در مقياس پيکسل ميباشد. براي تشکيل يک لينک به شکل چهارگوش بايد مختصات دو نقطه گوشه چپ طرف بالاوگوشه راست طرف پايين آنرا بدست بياوريم ، چون هر نقطه داراي دو مختصات ميباشد يکي بر روي محور xها و ديگري yها پس چهار عدد بايد بنويسيم و هر عدد را با علامت کاما جدا کنيم.

Coords="10,10,65,65"

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

href=" " که در اين قسمت آدرس صفحه يا سايت مورد نظر را وارد ميکنيم.

<img src="images/mypic.gif"
usemap="#map01">
<map name="map01">
<area shape="rect"
coords="25,25,55,50"  href="page.htm">
<area shape="circle"
coords="124,243,40"  href=
"www.yahoo.com">
<area shape="poly"
 coords="22,30,76,90,147,199,289,270,140,111,44,67"
 href="pages/first.html">
</map>

خب سوالي که حالا پيش ميايد، اينست که مختصات اين نقاط را چگونه پيدا کنيم؟ دو راه براي آن وجود دارد، يکي استفاده از برنامه هاي مختلف مانند Photoshop و ديگري که برايتان توضيح خواهم داد بدون استفاده از برنامه جانبي است و داخل همان صفحه ، با کمک مرورگر اينترنت اکسپلورراست. بعد از اينکه يک عکس را در صفحه قرار داديم و مراحل تشکيل Image map را انجام داديم يک تگ و يک خصوصيت به اين کدها اضافه ميکنيم و آنچه را که ميخواهيم براحتي بدست مياوريم. ابتدا تگ مخصوص لينک را قبل از<img> قرار ميدهيم تا عکس ما بصورت يک لينک ظاهر شود و سپس خصوصيت ismap را به تگ<img>اضافه ميکنيم و فايل را ذخيره ميکنيم. حالا آنرا باز کرده و همانطور که موس را روي عکس حرکت ميدهيد يک نگاه به نوار وضعيت status bar مرورگر در پايين بياندازيد، اعدادي را که مشاهده ميکنيد مختصات نقاط ميباشند.

<a href=" # "><img src="image.gif" usemap="#newmap" ismap>
<map name="newmap">
</map>
</a>

فراموش نکنيد که بعد از پيدا کردن مختصات نقاط، تمام مراحلي را که اضافه کرديد دوباره برداريد.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

نحوه ساختن جدولها (tables)

Previous

Next

توضيحات

پرسش و پاسخ

جدول تگها

خودآزمايی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Adding an image --- قراردادن عکس در صفحه

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

قرار دادن عکس در صفحه وب

برای دسترسی سريع از لينکهای زير استفاده کنيد:

فرمتهای عکس در وب
افزودن عکس به صفحه
Height, Width
Alignment
Border
Alt
Hspace, Vspace
Image link

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

فرمتهاي عکس در وب:

خب بپردازيم به ادامه بحث ، عکسها داراي فرمتهاي زيادي ميباشند ولي فرمتهايي که در وب بکار برده ميشوند، عبارتند از:

.gif (Graphic Interchange Format)

.jpeg (Joint Photographic Experts Group)

.png (Portable Network Graphics)

عکسها با فرمت .gif بيشترين استفاده را در وب دارند و محبوبترين نوع عکس است. اين نوع فرمت 256 رنگ را پشتيباني ميکند و از ويژگيهاي ديگر آن animation, transparency, interlacing است . البته محبوبيت آن بيشتر براي حجم کم آن است.

Transparency به شفافيت يک عکس ميگويند که آنرا پشت نما هم مينامند. اين ويژگي است که يک عکس آنقدر شفاف است که شما ميتوانيد تا تصوير ، متن يا رنگ زير آن عکس را ببينيد.

Interlacing گاهي وقتها شما منتظر ميشويد تا يک عکس به دليل بزرگي اندازه بارگذاري شود بعد آنرا ببينيد اما اگر عکسي اين ويژگي را داشته باشد کم کم عکس کامل خواهد شد يعني خط به خط به عکس اضافه ميشود تا کامل بارگذاري شود. مثال

Animation عکسهاي متحرک را مي گويند وفقط اين فرمت هست که از متحرک سازي عکس حمايت ميکند.

عکسهايي با فرمت .jpeg حدود 16 ميليون رنگ را پشتيباني ميکنند ، نسبت به فرمت .gif از حجم بالاتري برخوردار است ولي کيفيتش بهتر است ، تمام ويژگيهاي gif را دارد به غير از Animation. فرمت .png نسبت به قبليها جديدتر است و مخلوطي از آنهاست يعني کيفيت jpeg و حجم کم gif را دارد.

افزودن عکس به صفحه وب:

مانند همه عناصر داخل صفحه، عنصر عکس هم تگ خاص خودش را دارد که آن تگ <img>و پايان دهنده هم ندارد. اما براي مشخص کردن فايل عکس و آدرس دهي آن بايد از خصوصيت src=" " داخل تگ استفاده کنيم که اگر يک عکس داخل دايرکتوري وب سايت خودتان باشد ديگر نيازي به آدرس کامل نيست و فقط اسم دايرکتوري و اسم فايل با پسوند مشخصه آن عکس نوشته ميشود ولي اگر ميخواهيد که عکسي را از وب سايت ديگري در صفحه خود بگذاريد بايد آدرس آن وب سايت و دايرکتوري که عکس در آن قرار گرفته و اسم کامل آن فايل را بنويسيد مانند:

<img src="images/pic01.gif">

<img src="www.sitename.com/images/pic01.gif">

مثال

Height, Width

اين تگ خصوصيات ديگري هم دارد، يکي از آنها که کاربرد زيادي هم دارد خصوصيات طول height و عرض width ميباشد که توسط آنها اندازه يک عکس را داخل صفحه ميتوانيد کنترل کنيد. مقياس اندازه گيري طول و عرض بر حسب پيکسل Pixel ميباشد، اگر شما اين خصوصيات را کنترل نکنيد عکس در اندازه اصلي خود ظاهر ميشود. بطور مثال شما ميخواهيد عکسي را وارد کنيد که در صفحه بايد به اندازه 100×100 فضا اشغال کند:

<img src="images/pic01.gif" height="100" width="100">

مثال

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

Alignment

شما ميتوانيد محل قرارگرفتن عکس را نسبت به عناصر اطراف خودش با خصوصيت align=” “تعيين کنيد و ميتوانيد کلمات left,right,top,middle,bottom را براي اين خصوصيت بکار بريد. بر فرض ميخواهيد که يک متن بعد از عکس و در وسط قرار گيرد:

<img src="images/pic01.gif" align="middle"> This is a text

مثال

در ضمن اگر ميخواهيد خود عکس در وسط صفحه قرارگيرد بايد از تگ<center> قبل از تگ <img> استفاده کنيد و بعد از آن </center> را بنويسيد:

<center><img src="pic01.gif"></center>

مثال

Border

اگر مايل هستيد براي عکس کادر بگذاريد ميتوانيد از خصوصيت border=” “ استفاده کنيد و آنرا برابر با يک عدد قرار دهيد که هر چه اين عدد بزرگتر باشد ، کادر دور عکس هم ضخيم تر است به صورت پيش فرض border=”0” است يعني هيچ کادري مشاهده نميشود. مثال

Alt

تا حالا متوجه شديد که در يک وب سايت هنگاميکه نشانگر موس بر روي يک عکس که قرار ميگيرد يک کادر متني کوچک باز شده بنام tooltip و اطلاعاتي را راجع به آن عکس ميدهد؟ پس شما هم اينکار را انجام دهيد، خصوصيت alt=" " را داخل تگ گذاشته و هر متني را که جلويش بنويسيد در صفحه هنگاميکه موس بر روي عکس قرار گيرد ، زيرنشانگر نمايان ميشود. بهتر است که شما هميشه اين کار را انجام دهيد چون مرورگرهايي وجود دارد که عکس را نمايش نميدهد پس با اينکار بيننده از حضور آن عکس خبر دار ميشود. مثال

hspace, vspace

دو خصوصيت ديگر هست که حاشيه و فضاي خالي دور عکس را کنترل می کند، hspace=” “براي حاشيه چپ و راست عکس وvspace=” “ براي بالا و پايين. عددي را که وارد ميکنيد در مقياس پيکسل است. مثال

Image link

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

<a href="www.sitename.com"><img src="images/sitelogo.gif"></a>

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

در ضمن ميشود براي قسمتهاي مختلف يک عکس لينکهايي به جاهاي مختلف درست کرد. به فرض مثال ما يک عکس از نقشه ايران داريم و ميخواهيم که روي هر استان کليک شود ، آن قسمت لينک شود به صفحه مورد نظر. اين حالت را Image map مي گويند که در بخش بعد آنرا توضيح خواهم داد.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

ساخت نقشه تصويری يا
Image Map

Previous

Next

توضيحات

پرسش و پاسخ

جدول تگها

خودآزمايی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Building Text Links --- ساختن لينک

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

طرز ساختن لينک ها

برای دسترسی سريع از لينکهای زير استفاده کنيد:

لينک چيست؟
absolute and relative links
target
Anchor
mailto

لينک چيست؟

لينکها يا همان نقاط پيوند صفحات هم، يک نوع متن به حساب مي آيند، فقط تنها فرقي که بين آنها وجود دارد در اين است که هنگاميکه با موس بر روي آنها ميرويم نشانگر موس شکل دست به خود گرفته تا ما بر روي آن کليک کنيم، البته در بيشتر مواقع رنگ آن هم با متن هاي معمولي فرق دارد. پس از کليک کردن روي لينکها، ما به صفحات ديگر يا حتي به سايتي ديگر هدايت ميشويم. تگ مخصوص لينک <a></a> ميباشد که با خصوصيت href آدرس دهي ميشود که آن لينک به کجا وصل خواهد شد. به طور مثال اگر ما بخواهيم يک لينک درست کنيم که به سايت yahoo متصل شود بدين صورت عمل ميکنيم،

<a href="www.yahoo.com">Yahoo website</a>

که در مرورگر لينک زير ظاهر ميشود و ما را به سمت سايت ياهو حرکت ميدهد دقت کنيد فقط متني که مابين دو تگ آغاز کننده يعني <a href=” “>و تگ پايان دهنده </a> نوشته شود در مرورگر به شکل لينک ظاهر ميشود و قابل کليک است

Yahoo website

همانطور که مشاهده ميکنيد به صورت پيش فرض رنگ لينکها آبي بوده و زير آنها خط کشيده ميشود که در بخش Style Sheet شما ياد خواهيد گرفت تا اين خط را برداشته يا رنگ آن را تغيير دهيد. لينکها را مي توان به دو دسته داخلي و خارجي تقسيم کرد، همانطور که از اسمشان پيداست لينکهاي داخلي نقاط پيوند داخل يک صفحه يا صفحات مختلف يک وب سايت ميباشند و لينکهاي خارجي نقاط پيوند بين دو سايت مختلف ميباشند.

Absolute and Relative

لينکهاي داخلي به دو صورت نوشته ميشوند، يا بايد آدرس کامل وب سايت و فايل را نوشت مانند:

<a href="http://www.mysite.com/page01.htm"> Page01 </a>

به اين مدل لينک absolute ميگويند.

و يا اينکه فقط اسم فايل را بنويسيم البته اگر آن فايل داخل يک دايرکتوري است بايد ابتدا اسم آن دايرکتوري را نوشته سپس نام فايل را مينويسيم. به فرض مثال اگر لينک ما قرار است به يک صفحه به اسم Page01.htm در دايرکتوري بنام htmlpages متصل شود مجموعه کدي که بايد نوشته شود بدين صورت است:

<a href="htmlpages/Page01.htm"> Page01 </a>

به اين مدل relative مي گويند.

دقت کنيد دوستان وقتي صفحه اي که قرار است به اين لينک ما پيوند داده شود دردايرکتوري پايين تر از اين صفحه قرار دارد اينگونه عمل ميشود اما اگر لينک ما در صفحه اي قرار دارد که قرار است به يک صفحه در دايرکتوري بالاتر از آن متصل شود مي توانيم به جاي اسم دايرکتوري بالاتر از دو نقطه کنار هم( .. ) استفاده کنيم،

<a href="../page02.htm"> page02 </a>

به طور ساده مي توان گفت که اگر اين صفحه قرار است به صفحه اي داخل دو فولدر تو در تو متصل شود بايد اسم فولدر اول بعد اسم فولدر داخل فولدر اول سپس اسم آن فايل يا صفحه را مينويسيم ولي اگر در آن صفحه بخواهيم يک لينک بگذاريم که به اين صفحه پيوند داده شود جاي فولدر داخلي و فولدر اول ميتوانيم دو نقطه بگذاريم و سپس اسم اين فايل را بنويسيم يعني بدين شکل:

<a href="../../thispage.htm"> this page </a>

target

تگ لينک خصوصيتي دارد که توسط آن مي توانيد محل باز شدن و يا نمايش صفحه اي که مي خواهيد به آن پيوند دهيد را کنترل کند که آن صفحه در همان پنجره يا در يک پنجره جديد باز شود. اين خصوصيت target نام دارد که بايد برابر با يکي از مقادير _blank , _self , _top , _parent قرار گيرد.

target="_blank"
اين مقدار يک پنجره جديد در مرورگر باز کرده و صفحه مربوط به آن لينک را نمايش ميدهد.

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

_parent
صفحه مورد نظر در همان پنجره مرورگر باز خواهد شد ، نه در پنجره جديد.

_top
صفحه مربوط به اين لينک هيچگاه در پنجره اي که فريم دارد باز نخواهد شد.

Anchor

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

<a name="top">

در بين دو علامت " " و به جاي کلمه top هر اسمي ميتوانيد بکار بريد اين نکته را در ذهن داشته باشيد که اين تگ درمرورگر ظاهر نميشود.اما تگ ديگري که نياز است خود کد لينک است وبجاي نوشتن آدرس فايل در خصوصيت href شما نامي را که انتخاب کرديد به اضافه علامت # را مينويسيد:

<a href="#top">top of the page</a>

در مورد لينکهاي خارجي يعني لينکهايي که به سايتهاي ديگر وصل ميشوند بايد از مدل absolute استفاده کنيد و آدرس کامل را بنويسيد:

<a href="http://www.sitename.com/page01.html"> link to another site </a>

نکته: نوشتن پروتکل http:// اجباري نيست و ميتوانيد از نوشتن آن صرف نظر کنيد.

mailto

علاوه بر اين لينکها شما ميتوانيد براي آدرسهاي ايميل هم لينک درست کنيد که تگ آن به صورت زير ميباشد:

<a href="mailto:email_address"> my email </a>

کلمه mailto: به مرورگر ميفهماند که بايد يک ايميل به آدرس بعد از آن فرستاده شود. البته اين لينکها براي بيننده هايي که ايميل هايشان را با برنامه هايي مانند Outlook express چک ميکنند ، مفيد است چون وقتي که روي اين نوع لينک کليک شود برنامه پيش فرض مديريت ايميل در سيستم عامل کاربر باز ميشود پس براي بيننده هايي که آدرس ايميل ياهو دارند اين کد مفيد نيست بهتر است که آدرس کامل ايميل را نوشته و به صورت يک لينک درست کنيد تا براي کليه بينندگان سايت مفيد باشد، مانند مثال زير:

<a href="mailto:my_email@domain.com"> my_email@domain.com </a>

البته شما ميتوانيد حتي موضوع و متن ايميل را تعيين کنيد. اگر قصد همچين کاري را داريد پس بايد بلافاصله بعد ازآدرس ايميل داخل تگ يک علامت سوال اضافه کنيد تا مرورگر بفهمد که اين آدرس ادامه دارد و بعد از علامت سوال کلمه subject= را مينويسيد که اين کلمه نشانگر موضوع ايميل است و هرچيزي که جلوي آن نوشته شود به عنوان موضوع ايميل در برنامه مشخصه نمايان خواهد شد و اگر متن ايميل هم بخواهيد نوشته شود بايد بعد از موضوعي که نوشتيد علامت & را بگذاريد وسپس کلمه body= را که نشانگر متن ايميل است و در جلوي علامت مساوي هر متني را ميتوانيد وارد کنيد. بر فرض مثال ميخواهيد که ايميل با موضوع Test و متن Hello my friends به آدرس ايميل فرستاده شود:

<a href="mailto:my_email@domain.com?subject=Test&body=Hello my friends"> my_email@domain.com </a>

توجه داشته باشيد که اگر ميخواهيد اين کد را امتحان کنيد اول بايد برنامه پيش فرض مديريت ايميل مانند نرم افزار Outlook را براي آدرس ايميل خود تنظيم کنيد.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

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

Previous

Next

توضيحات

پرسش و پاسخ

جدول تگها

خودآزمايی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Creating lists --- ساختن ليستها

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

طرز ساختن ليست ها

برای دسترسی سريع از لينکهای زير استفاده کنيد:

Ordered list
Unordered list
Definition list

ليستها هم جزو عنصر متن در html ميباشند که بخاطر زياد بودن تگهاي متن مجبورم آنها را از هم جدا کنم. سه نوع ليست وجود دارد، يکي ليستهاي با ترکيب منظم (Ordered list) و ليست با ترکيب نا منظم (Unordered list) وديگري ليستهاي توصيفي (Definition list) . شايد اين نوع نامگذاري بخاطر وجود اعداد يا حروف بترتيب در ليست منظم است که در ديگري فقط نقطه هاي توپر هست که ترتيبي را نميتوان براي آنها در نظر گرفت. در هر صورت تگهاي آن به شرح زير ميباشند:

<ol><li></ol>

براي درست کردن ليست در يک صفحه از اين تگها بايد استفاده کنيم، بدين صورت که در آغاز قسمتي که ميخواهيم ليست درست کنيم تگ <ol>را که مخفف ordered list ميباشد را مينويسيم تا مرورگر بفهمد ليست از آنجا شروع ميشود و سپس در ابتداي هر گزينه از ليستمان تگ <li>را اضافه ميکنيم و در انتهاي گزينه ها تگ پايان دهنده </ol>را می نويسيم.

مثال

اگر دقت کنيد به صورت پيش فرض اعداد 1,2,3 به ابتداي گزينه هاي ليست مان اضافه ميشود. شما ميتوانيد خصوصيت type را به تگ <ol> اضافه کنيد و آنرا با A, a که به صورت حروف کوچک يا بزرگ انگليسي و يا با I, i که با اعداد رومي است مقدار دهي کنيد. به طور مثال اگر ميخواهيد ترتيب ليست شما با اعداد رومي کوچک باشد بدين صورت تگ را کامل ميکنيد:

<ol type="i">
<li> Item 01
<li> Item 02
<li> Item 03
</ol>

مثال

<ul><li></ul>

اين تگ را unordered list مينامند و مانند تگهاي بالا براي درست کردن ليست در يک صفحه ميباشد با اين تفاوت که بجاي حروف و اعداد از دايره يا مربع هاي توپر استفاده ميکند که مانند بالا ميتوانيد از خصوصيت type که با کلمات” disc”, “circle”, “square” مقدار دهي ميشود استفاده کنيد.

<ul type="disc">
<li> Item 01
<li> Item 02
<li> Item 03
</ul>

مثال

شما ميتوانيد براي درست کردن يک ليست که داراي چند گزينه است و هر گزينه هم چند زير مجموعه دارد از مخلوط اين دو نوع ليست استفاده کنيد که به اين حالت Nested list گفته ميشود.

بر فرض مثال ما يک ليست داريم که چهار گزينه دارد و هر کدام از آنها دو رنگ سفيد و سياه دارند:

<ol type=”I”>
<li> Item 01 <ul type="circle"> <li> Black <li> White </ul>
<li> Item 02 <ul type="circle"> <li> Black <li> White </ul>
<li> Item 03 <ul type="circle"> <li> Black <li> White </ul>
<li> Item 04 <ul type="circle"> <li> Black <li> White </ul>
</ol>

مثال

<dl><dt><dd></dl>

آخرين مدل، ليستهاي توصيفي هستند که براي تعريف و توصيف يک کلمه بکار ميروند که کلمه مشخص را با تگ <dt> و توصيف آنرا با <dd> بکار ميبرند.

<dl>
<dt> Html
<dd> HyperText Markup Language.
</dl>

مثال

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

طرز ساختن لينک ها
absolute link
relative link
anchor
mailto

Previous

Next

توضيحات

پرسش و پاسخ

جدول تگها

خودآزمايی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Adding sound and video (continued) --- ادامه صدا و تصوير در وب

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

صدا و تصوير در وب (ادامه)

برای دسترسی سريع از لينکهای زير استفاده کنيد:

فرمتهاي فايلهاي تصويري
Streaming Audio and Video

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

اما در اين صفحه مي پردازيم به فرمتهاي فايلهاي تصويري و معرفي تکنولوژي که توسط آن بتوانيد فايلهاي صوتي و تصويري با حجم بالا را در وب سايت قرار دهيد.

فرمتهاي فايلهاي تصويري

MPEG اين فرمت مخفف کلمات M otion Picture Experts Group است که در بيشتر سيستمها قابل اجرا مي باشد. نوع MIME اين فرمت video/mpeg است.

AVI اين فرمت متعلق به سيستم عامل ويندوز مي باشد و نوع MIME آن برابر است با video/avi .

QuickTime (MOV) اين فرمت مخصوص سيستم هاي Macintosh مي باشد که اگر مرورگري در سيستمهاي ديگر Plug-in اين فرمت را داشته باشد آنرا پخش خواهد کرد و نوع MIME آن video/quicktime مي باشد.

Advanced Streaming Format (ASF) اين فرمت متعلق به شرکت مايکروسافت است که MIME آن video/asf مي باشد.

Streaming Audio and Video

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

همانطور که مي دانيد يک فايل صوتي يا تصويري سنگين ممکن است چندين ساعت طول بکشد تا دانلود شود، اما براي غلبه بر اين مشکل تکنولوژي streaming audio and video بوجود آمد و در پي آن برنامه هايي نظير RealAudio, QuickTime, Microsoft’s streaming format عرضه شد. اين فرمتها قادر به پخش فايل در هنگام دانلود شدن هستند، بدين ترتيب که مقداري از اينگونه فايلها ابتدا در محلي از حافظه بنام بافر Buffer ذخيره شده و از آنجا پخش مي شود. هنگاميکه آن مقدار در حال اجرا است، مقدار ديگري از فايل در بافر ذخيره و پخش مي شود که به همين ترتيب ادامه پيدا مي کند تا کل فايل بطور کامل دانلود شود. البته اين نوع فرمتها، برنامه کاربردي مخصوص خود را مي خواهند و معروفترين برنامه ها RealOne.Player است که اين محصول فرمت RealAudio يعني ra براي فايل صوتي و RealVideo براي پخش فايلهاي تصويري را پشتيباني مي کند. فرمتهاي ديگر هم مانند ASF متعلق به شرکت مايکروسافت و QuickTime براي سيستمهاي Macintosh از اين تکنولوژي استفاده مي کنند.

شما مي توانيد از برنامه هاي ويرايشگر صوتي مانند Sound Forge و تصويري مانند Adobe Premiere براي تبديل به اين تکنولوژي استفاده کنيد.

اگر مايل هستيد از فرمتهاي Real Audio, Real Video در سايت خود استفاده کنيد بايد به چند نکته توجه کنيد، ابتدا مطمئن شويد که سرور ميزبان سايت شما از اين تکنيک پشتيباني مي کند و در آن يکسري تنظيمات بايد انجام شود، مثلاً براي فرمت Real Audio دو نوع MIME بايد در سرور تعريف شود:

audio/x-pn-realaudio (files with a .ra or .ram file extension)
audio/x-pn-realaudio-plugin (files with a .rpm file extension)

سپس بايد يک برنامه براي تبديل فرمتهاي مختلف به اين فرمت و يک برنامه براي پخش اين نوع فرمت در سيستم خود داشته باشيد که مي توانيد آنها را از وب سايت www.real.com فراهم کنيد و در آخر هم يک فايل بنام متا فايل Meta File بايد درست کنيد براي ذخيره واستفاده از بافر، بدين ترتيب که، ابتدا يک برنامه ويرايشگر متن مانند Notepad را باز کرده وداخل آن آدرس فايل بر روي سايت خود را مي نويسيد، بطور مثال اگر نام فايل realtest.ra است و در دايرکتوري realaudiofile قرار دارد بايد خط زير را وارد کنيد بدون هيچ چيز اضافه،

http://www.yourdomain.com/realaudiofile/realtest.ra

سپس اين فايل متني را با نام دلخواه و با پسوند .ram ذخيره کرده و همراه با فايل صوتي مورد نظر به سرور خود منتقل کنيد. فقط دقت کنيد که براي فراخواني آن فايل بايد يک لينک بسازيد که متا فايل مربوطه را صدا کند نه خود فايل صوتي يا تصويري.

نکته: بيننده سايت بايد برنامه مخصوص پخش اين گونه فرمت را در سيستم خود داشته باشد. اگر MIME به درستي تعريف نشده باشد، فقط متن داخل متا فايل نمايش داده خواهد شد و دقت کنيد تا هنگام منتقل کردن فايلهاي صوتي و تصويري توسط برنامه FTP اگر تنظيمات را به صورت دستي انجام ميدهيد حتماً از گزينه Binary استفاده کنيد.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

DTD هر صفحه وب
تگها و خصوصيات قسمت Head

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Adding sound and video (multimedia) --- صدا و تصوير در وب

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

صدا و تصوير در وب

برای دسترسی سريع از لينکهای زير استفاده کنيد:

اهميت حجم فايل صوتي
MIME
فرمتهاي فايلهاي صوتي
افزودن فايل صوتي به زمينه صفحه 		افزودن فايل صوتي بصورت لينک
افزودن فايل صوتي از طريق object
Embed file
Streaming Audio

با پيشرفت تکنولوژي در وب و نسخه هاي جديد مرورگرها که توانايي استفاده از مولتي مديا را در اختيار ما مي گذاشتن، انگيزه اي ايجاد شد تا صوت و تصوير هم در صفحات وب گنجانده شوند و سايتها را جذاب تر کنند. در اين صفحه راههاي اضافه کردن فايل صوتي به يک صفحه را مي آموزيد و در صفحه بعد افزودن فايلهاي تصويري را ياد خواهيد گرفت.

اهميت حجم فايل صوتي

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

MIME

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

MIME مخفف Multipurpose Internet Mail Extensions است.

زمانيکه مرورگر با يک MIME ناشناخته مواجه شود، پيغام خطاي “File Not Found” را در صفحه نمايش مي دهد.

فرمتهاي فايلهاي صوتي

WAV يکي از فرمتهاي صوتي که کيفيت بالايي هم دارد و البته حجم زيادي هم اشغال مي کند و در سيستم عامل ويندوز بکار مي رود. نوع MIME اين فرمت برابر است با audio/wav .

AU اين فرمت متعلق به سيستمهاي عامل UNIX, Linux است و خاصيت آن داشتن حجم کم و البته با کيفيت پايين تر، که نوع MIME اين فرمت برابر است با audio/basic .

AIFF اين فرمت هم متعلق به کامپيوترهاي Macintosh است با کيفيت بالا و حجم بسيار بالا. نوع MIME آن برابر است با audio/aiff .

MIDI اين فرمت با فرمتهاي ديگر صوتي تفاوتهايي دارد. در اين فرمت بجاي ذخيره شدن فرکانس صدا، آهنگ صدا يا همان نت هاي موسيقي را ذخيره و پخش مي کند. بزرگترين مزيت آن حجم بسيار پايين و عيب آن، پخش آهنگ بدون گفتار است. نوع MIME اين فرمت audio/midi است.

افزودن فايل صوتي به زمينه صفحه

با اضافه کردن تگ <bgsound> به سورس کد صفحه وب، مي توانيد آهنگ يا صدايي را در زمينه صفحه وارد کنيد تا هنگاميکه بيننده صفحه را باز مي کند آن فايل بدون نياز به برنامه کاربردي ديگري پخش شود. اين تگ در حال حاضر کاربردي ندارد چون فقط مرورگراينترنت اکسپلورر نسخه هاي 5.5 به پايين آنرا پشتيباني مي کنند. اين تگ داراي دو خصوصيت ، src براي آدرس دهي فايل صوتي و loop براي کنترل تکرار دفعات پخش مي باشد.

<bgsound src=”mymusic.mid” loop=”2”>

افزودن فايل صوتي بصورت لينک

يکي ديگر از راههاي اضافه کردن فايل صوتي به صفحه از طريق قرار دادن لينک و تگ <a> است که بيننده با کليک کردن بر روي آن لينک مي تواند هم آن فايل را بر روي هارد ديسک خود ذخيره کند و يا آنرا از همانجا باز کند. البته در مرورگراينترنت اکسپلورر نسخه 6.0 ابتدا پيغامي ظاهر مي شود که اگر دکمه Yes را بزنيد آن فايل توسط خود مرورگر پخش خواهد شد. در تگ لينک بايد از خصوصيت href براي آدرس دهي استفاده کنيد، فقط دقت کنيد که پسوندها را درست بنويسيد.

<a href=”musics/mysong.wav”> music file </a>

مثال

افزودن فايل صوتي از طريق object

يکي از بهترين راههايي که مي توان فايل صوتي را به صفحه اضافه کرد، از طريق تگ <object> است. يکي از مزايايي که اين تگ دارد اينست که، شما مي توانيد يک متني را بين تگ آغازين و پايان دهنده اضافه کنيد که اگر مرورگر نتوانست آن فايل را بشناسد، نوشته مذکور در صفحه نمايان شود. در اين تگ براي آدرس دهي از خصوصيت data و براي تعيين MIME آن فايل از خصوصيت type استفاده مي شود، همچنين از خصوصيت height, width براي کنترل طول و عرض لوگوي برنامه پخش کننده فايل استفاده کنيد که در صورت لزوم آنها را برابر با عدد صفر قرار دهيد تا لوگو در صفحه ظاهر نشود.

<object data=”musics/sound.wav” MIME=”audio/wav”>
Your browser doesn’t support this audio format.
</object>

مثال

نکته: هنگاميکه صفحه داراي اين تگ را باز کنيد يک پيغام هشدار در مورد ActiveX ظاهر خواهد شد که براي اجراي فايل بايد دکمه Yes را بزنيد.

Embed file

تکنيک ديگر براي افزودن يک فايل مولتي مديا به صفحه از طريق تگ embed است. اين تگ استاندارد W3C نيست و در بيشتر مرورگرها اجرا نمي شود. از خصوصيت src براي آدرس دهي فايل و براي کنترل طول و عرض لوگوي برنامه کمکي از خصوصيت height, width مي توانيد استفاده کنيد. اين تگ داراي خصوصيات autostart و loop مي باشد که با کلمات false يا true مقدار دهي مي شوند.

<embed src="godfather.mid" autostart="false"
loop="false" height="40" width="150">

مثال

Streaming Audio

احتمالاً متوجه شديد که راههاي ذکر شده در بالا به درستي جواب نمي دهند و به خاطر مشکلات امنيتي ، مرورگرها فايلها را پخش نمي کنند. اما تکنيک ديگري هم هست که کليه مرورگرها از آن پشتيباني کرده و حتي با استفاده از آن مي توانيد فايلهاي سنگين را هم در صفحات بکار بريد بدون آنکه بيننده زمان زيادي را براي دانلود آنها صرف کند. اين تکنيک استفاده از روش Streaming Audio and Video است که در صفحه بعد به آن مي پردازيم.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

افزودن تصوير به يک صفحه
Streaming Audio and Video

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Search engines --- موتورهای جستجو

Google
Web iranw3.com
مطالب آموزشی

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

موتورهای جستجو

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

موتور جستجوگر چيست؟
ليست کردن صفحات
robots.txt
نقش متا تگها
Page Ranking

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

يکي از اساسي ترين راههاي جذب بيننده، ثبت صفحات سايت در موتورهاي جستجوگر search engines است، چون هر کسي در هر کجا که باشد ميتواند سايت شما را پيدا کند.

موتور جستجوگر چيست؟

در حال حاضر تعداد زيادي سايت جستجوگر مانند، AltaVista, Mama, Yahoo, Google داريم که هر کدام از اينها توسط برنامه هاي گردشگر بنام spider, web crawler, robot مرتب در وب بدنبال صفحات جديد و يا تغييريافته ميگردند و به محض پيدا کردن آنها، اطلاعات مورد نظر را در پايگاه داده ايDatabase خود، ليست ميکنند تا در موقع لزوم و بهنگام جستجو در اختيار کاربران قرار دهند. زمانيکه شما بدنبال يک کلمه کليديkeyword در آن سايتها مي گرديد، اطلاعات پايگاه داده اي آنها را جستجو ميکنيد و سپس نزديکترين مطالب به کلمه کليدي را براي شما نمايان ميکنند که هر چه آن کلمه دقيق تر باشد، شما به مطلب مورد نظر زودتر و راحت تر دسترسي پيدا ميکنيد.

چگونه صفحات در پايگاه داده اي Database ليست ميشود؟

هنگاميکه robot ها و يا يک برنامه گردشگر ديگر بطور اتوماتيک گردش خود را شروع ميکند، به محض يافتن يک سايت جديد در وب ابتدا به سراغ فايلي بنام robots.txt ميگردد، سپس مطالب قسمت HEAD و بدنبال آن اطلاعات نوشته شده در متاتگها را جمع آوري ميکند و پس از يک پردازش دقيق با استفاده از يک الگوريتم مخصوص، صفحات را در پايگاه داده اي خود ذخيره و ليست ميکند.

فايل robots.txt چيست؟

robots.txt يک فايل متني است که اين فايل را ميتوانيد در سرور و در دايرکتوري وب سايت خود قرار دهيد تا تنظيمات گردش برنامه هاي گردشگر را در آن کنترل کنيد و در حقيقت زحمت اين برنامه ها را کم کنيد. اما اطلاعاتي که در اين فايل بايد قرار گيرد الگوي خاصي دارد که در زير به آن اشاره شده و در آن سطح دسترسي گردشگرها را با ذکر نامشان معين ميکنيد،

User-agent:

Disallow:

اين دو خط را در فايل متني وارد و آنرا با پسوند txt ذخيره ميکنيد.

User-agent به برنامه هايي ميگويند که براي وب ساخته ميشوند تا در اختيار کاربران قرار گيرند و گردشگر ها مانند robot ها و crawler ها از اين قبيل هستند و هر سايت جستجو يک گردشگر با اسم مشخص دارد، مانند سايت گوگل که بنام Googlebot معروف است. براي تعيين سطح دسترسي بايد نام برنامه را در خط اول بنويسيد و در خط دوم هم نام فايلها يا دايرکتوري هاييکه نبايد ليست شوند را مينويسيد. اگر بطور کل نميخواهيد سايت شما ليست شود طبق دستور زير عمل ميکنيد:

User-agent: *

Disallow: /

براي اطلاعات بيشتر در مورد robots.txt به سايت www.robotstxt.org مراجعه کنيد.

نقش متاتگها meta tags براي موتورهاي جستجو

شما درباره ساخت متاتگها در بخش HEAD مطالبي را آموختيد. در اين قسمت نقش آنها را در search engine ها ياد خواهيد گرفت. گردشگرها بيشتر به متاتگها حساس هستند تا اطلاعاتي را در اختيارشان قرار دهند. اطلاعاتي را که شما در متاتگها بايد وارد کنيد به شرح زير ميباشند:

  • معرفي کلمات کليدي keywords
  • توصيف Description کوتاهي درباره سايت که در بعضي از سايتهاي جستجو عمل نميکند.
  • معرفي برنامه سازنده سايت که به اسم Generator معروف است.
  • معرفي سازنده و طراح سايت که بنام Author معروف است.
  • مشخص کردن کپي رايت .
  • تعيين تاريخ انقضا صفحات اگر مرتب در حال تغيير هستند.

هر موتور جستجوگر اصول و قوانين خاص خود را براي ليست و ذخيره کردن ( index ) سايت شما و تعيين رتبه آن ( Page Ranking ) دارد که متا تگها در اين مورد نقش اساسي دارند و شما در انتخاب و تعيين آنها بايد بسيار دقت کنيد. بطور مثال بکار بردن کلماتيکه در متا تگها به عنوان keyword انتخاب نموده ايد در متن داخل همان صفحه در رتبه بنديpage ranking صفحه بسيار موثر خواهد بود.

منظور از رتبه بندي( Page Ranking ) چيست؟

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

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

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

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

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Creating Tables --- سازمان دهی صفحه توسط جدول

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

نحوه ساختن جدولها (tables)

برای دسترسی سريع از لينکهای زير استفاده کنيد:

تگ جدول
border
rule
alignment
height, width
bgcolor
cellspacing, cellpadding

table header:<th></th>
colspan,rowspan
caption
thead,tbody,tfoot
colgroup
summery

تگ جدول

جدولها يکي از بهترين و مفيدترين عنصرها در صفحات وب ميباشند، با استفاده از آنها ما مي توانيم اطلاعات و عناصررا در يک صفحه سازمان دهي و مرتب کنيم . کليه اطلاعات يا عناصر ديگر وب را ميتوانيم داخل رديف ها يا ستون هاي يک جدول قرار دهيم بدون آنکه خطوط جدول مشخص باشد و يا در صورت نياز خطوط آنها نمايان ميشود. کمتر کسي را پيدا ميکنيد که از اين عنصر استفاده نکند و زمانيکه تجربه کافي براي طراحي يک سايت بدست آورديد به اهميت اين عنصر پي خواهيد برد.تگ مشخصه جدول <table></table> ميباشد. اما براي اضافه کردن رديف به يک جدول از<tr></tr>و براي ستون از تگ <td></td> استفاده ميکنيم. پس ساختار کلي يک جدول بدين صورت ميباشد:

<table>
<tr><td>this is a table.</td></tr>
</table>

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

border

خب براي اينکه بتوانيم يک جدول را در مرورگر خود ببينيم بايد با خصوصيت border=" " آشنا شويم. اين خصوصيت دور جدول يک کادردرست ميکند البته اگر اين خصوصيت را برابربا صفر قرار دهيم يا آنرا ننويسيم کادر دور جدول در مرورگر نمايان نخواهد شد و هر چه عدد بزرگتري بگذاريم کادر ضخيم تري خواهيم داشت، در ضمن رنگ کادرهم با bordercolor=" " که برابر با عدد هگز رنگ است تعيين ميشود. border ويژگيهاي ديگري هم دارد، به طور مثال شما ميتوانيد خصوصيت frame=" " را به تگ <table> اضافه کرده و آنرا برابر با يکي از کلمات void, above, below, hsides, vsides,lhs, rhs, box قرار دهيد تا کادر دور جدول را کنترل کنيد. اين کلمات هر کدام يک قسمت از کادر را نمايان ميکنند.

rule

ويژگي ديگري هم هست ولي بهتره اول يک جدول درست کنيد تا مطلب جا بيافتد، برنامه Notepad را باز کنيد و کد زير را وارد کرده و به اسم Table.htm ذخيره کنيد:

<table border="4" bordercolor="#ff0000">
<tr>
<td>cell 01</td><td>cell 02</td>
</tr>
<tr>
<td>cell 03</td><td>cell 04</td>
</tr>
</table>

مثال

حالا خصوصيت rules=" "را به تگ<table> اضافه کنيد و هر بار يکي از کلمات all, none, groups, rows, cols را جلوي آن قرار دهيد و فايل را دوباره ذخيره کنيد تا تاثير اين خصوصيت را ببينيد. مثال

Alignment

ميتوانيد با استفاده از خصوصيت align=" "که در تگ <td>مينويسيد محل قرارگرفتن يک عنصر مانند متن را تعيين کنيد که ميتوانيد اين خصوصيت را با کلمات left, right, center, justify مقداردهي کنيد. مثال

height, width

با خصوصيات height=" " , width=" " هم اندازه طول و عرض يک جدول را ميتوان کنترل کرد که بايد آنها را برابر با عدد در مقياس پيکسل قرار دهيد در ضمن شما ميتوانيد از درصد % هم استفاده کنيد مانند width="90%" که اين جدول نود درصد عرض يک صفحه را اشغال ميکند. مثال

bgcolor

براي تعيين رنگ زمينه يک جدول ازbgcolor=" " که با عدد هگز رنگها مقدار دهي ميشود استفاده ميکنيم. اين خصوصيت را در تگ هاي <tr> و <td> هم مي توانيد بکار بريد. مثال

cellspacing, cellpadding

تگ <table> دو خصوصيت ديگر هم دارد که شما با بکار بردن آنها ميتوانيد فاصله بين خانه هاي جدول را از هم کنترل کنيد يعني فضاي خالي بين خانه ها اضافه کنيد، اين خصوصيت اين است cellspacing=" "و ديگري فاصله بين متن داخل يک خانه در جدول با لبه هاي چارچوب آن خانه است که خصوصيت cellpadding=" " اين وظيفه را به عهده دارد. هرچه مقداردهي عددي آنها بزرگتر باشد فاصله ها بيشتر خواهد بود. مثال

header: <th></th>

حالا که با درست کردن رديف و ستون در جدول آشنا شديد، ميتوانيد براي هر ستون و رديف عنوان گذاري کنيد و يک تيتر به بالاي ستون يا به ابتداي يک رديف اضافه کنيد. در هر قسمت که شما به يک تيتر و عنوان نياز داشتيد بجاي تگ <td></td> از تگ <th></th> استفاده کنيد که در اين حالت متن نوشته شده در آن خانه بصورت ضخيم ظاهر شده و از بقيه متمايز ميشود. مثال

colspan, rowspan

گاهي اوقات شما نياز داريد تا چند خانه در يک رديف يا يک ستون از جدول را ترکيب کنيد تا يک خانه درست شود و بطور مثال يک تيتر و عنوان در آن قرار دهيد که براي ترکيب خانه هاي يک ستون از خصوصيت rowspan=" " و براي يک رديف از colspan=" " در تگ <td> استفاده ميکنيد و مقدار آنرا برابر با تعداد خانه هايي که بايد يکي شوند، قرار ميدهيد. مثال

caption

بطور معمول هر جدول داراي يک اسم و يا يک توضيح ميباشد که آنرا با تگ <caption></caption> در ميان تگهاي <table></table> مشخص ميکنند. اين تگ داراي خصوصيت align=" " ميباشد با کلمات top, bottom, left, center, right مقداردهي ميشود. مثال

thead, tbody, tfoot

اگر جدول شما داراي ستونها و رديفهاي زيادي است پس تکرار خصوصيات در هر تگ مربوطه بسيار دشوار است. شما ميتوانيد بصورت گروهي اين خصوصيات را کنترل کنيد. براي کنترل رديفها بايد آنها را به سه قسمت تقسيم کرد، قسمت سرشامل فقط خانه هاي رديف اول، بدنه شامل همه رديفهاي وسط و قسمت انتهايي شامل فقط خانه هاي آخرين رديف، که قسمت سر را با <thead></thead> ، قسمت بدنه را با <tbody></tbody> و قسمت انتهايي را با <tfoot></tfoot> کنترل ميکنيم. اين تگ داراي خصوصيت align نيز ميباشد. مثال

colgroup

همچنين با تگ <colgroup></colgroup> ميتوانيد خصوصيات کليه ستونهاي يک جدول را کنترل کنيد که اين تگ علاوه بر خصوصيات گفته شده در اين بخش داراي خصوصيت span=" " نيز ميباشد که توسط آن تعداد ستونهايي که بايد کنترل شوند را تعيين ميکنيد. مثال

summery

يک خصوصيت ديگر نيز براي تگ <table> هست بنام summery=" " که توصيفي از جدول ميباشد ولي در جايي نمايش داده نميشود. اين خصوصيت براي مرورگرهايي که فقط متن را نمايش ميدهند و يا مرورگرهاي مخصوص افراد ناتوان ، مفيد ميباشد که بهتر است از آن استفاده کنيد.

به اين موضوع هم توجه داشته باشيد که شما ميتوانيد داخل يک جدول، جدول ديگري هم درست کنيد يعني داخل هرخانه جداگانه يک جدول بسازيد که به اين روشNested table گفته ميشود.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

ساختن فرم و جمع آوری اطلاعات از کاربر

Previous

Next

توضيحات

پرسش و پاسخ

جدول تگها

خودآزمايی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


HTML Tags

IE : نسخه مرورگر اينترنت اکسپلورر، که آن تگ را پشتيبانی می کند
NN : نسخه مرورگر نت اسکيپ، که آن تگ را پشتيبانی می کند

تگها | توضيحات | NN | IE
<!--...--> | وارد کردن نظريه | 3.0 | 3.0
<!DOCTYPE> | تعيين DTD |  |
<a> | ساخت لينک | 3.0 | 3.0
<abbr> | تعيين کلمات مختصر شده | 6.2 |
<acronym> | تعيين کلمات مخفف شده | 6.2 | 4.0
<address> | وارد کردن يک آدرس | 4.0 | 4.0
<area> | تعيين يک ناحيه از نقشه تصويري | 3.0 | 3.0
<b> | نوشتن حروف ضخيم | 3.0 | 3.0
<base> | تعيين يک آدرس اصلي براي کليه لينکها | 3.0 | 3.0
<bdo> | تعيين جهت نوشتن | 6.2 | 5.0
<big> | نوشتن حروف درشت | 3.0 | 3.0
<blockquote> | تعيين يک عبارت طولاني | 3.0 | 3.0
<body> | شروع قسمت بدنه کد | 3.0 | 3.0
<br> | شروع جمله از ابتداي خط | 3.0 | 3.0
<button> | تعيين دکمه قابل کليک در صفحه | 6.2 | 4.0
<caption> | وارد کردن عنوان يک جدول | 3.0 | 3.0
<cite> | تعيين نقل قول | 3.0 | 3.0
<code> | مشخص کردن کد زبانهاي برنامه نويسي | 3.0 | 3.0
<col> | تعيين خصوصيات براي ستونهاي يک جدول |  | 3.0
<colgroup> | معرفي يک گروه از ستونهاي جدول |  | 3.0
<dd> | مشخص کردن توضيح و توصيف يک چيز در ليست | 3.0 | 3.0
<del> | تعيين يک متن حذف شده | 6.2 | 4.0
<div> | شروع يک بخش در صفحه | 3.0 | 3.0
<dfn> | توضيح براي يک اصطلاح |  | 3.0
<dl> | تعيين يک ليست توصيفي | 3.0 | 3.0
<dt> | توضيح براي يک لغت در ليست | 3.0 | 3.0
<em> | تعيين يک متن تاکيدي | 3.0 | 3.0
<fieldset> | تعيين يکسري رديف | 6.2 | 4.0
<form> | شروع يک فرم | 3.0 | 3.0
<frame> | تعريف يک فريم و چارچوب ديگري در يک صفحه | 3.0 | 3.0
<frameset> | شروع يکسري فريم | 3.0 | 3.0
<h1> to <h6> | تعيين متن بصورت عنوان | 3.0 | 3.0
<head> | شروع قسمت سر کد html | 3.0 | 3.0
<hr> | وارد کردن يک خط افقي | 3.0 | 3.0
<html> | تعيين يک فايل html | 3.0 | 3.0
<i> | نوشتن متن بصورت ايتاليک و کج | 3.0 | 3.0
<iframe> | وارد کردن يک فريم در صفحه معمولي | 6.0 | 4.0
<img> | وارد کردن يک عکس | 3.0 | 3.0
<input> | تعيين اجزاي يک فرم | 3.0 | 3.0
<ins> | تعريف متنهاي ورودي در يک برنامه | 6.2 | 4.0
<kbd> | وارد کردن حروفهاي روي کيبورد | 3.0 | 3.0
<label> | نامگذاري براي اجزاي يک فرم | 6.2 | 4.0
<legend> | عنوان بندي و جداسازي اجزا در يک فرم | 6.2 | 4.0
<li> | تعريف متون يک ليست | 3.0 | 3.0
<link> | تعيين آدرس يک فايل وابسته به صفحه | 4.0 | 3.0
<map> | تعريف يک نقشه تصويري | 3.0 | 3.0
<meta> | تعريف اطلاعات متا تگها | 3.0 | 3.0
<noframes> | توضيح براي مرورگرهايي که از فريم پشتيباني نميکنند | 3.0 | 3.0
<noscript> | توضيح براي مرورگرهايي که از جاوا اسکريپت پشتيباني نميکنند | 3.0 | 3.0
<object> | تعيين برنامه هايي براي جاسازي در يک صفحه |  | 3.0
<ol> | تعريف ليستهاي سفارشي | 3.0 | 3.0
<optgroup> | تعيين يک مجموعه گزينه هاي انتخابي | 6.0 | 6.0
<option> | تعيين گزينه هاي انتخابي بصورت ليستهاي پايين کشيدني | 3.0 | 3.0
<p> | شروع يک پاراگراف | 3.0 | 3.0
<param> | تعريف پارامترهاي يک برنامه جاسازي شده | 3.0 | 3.0
<pre> | وارد کردن متن بدون مرتب کردن | 3.0 | 3.0
<q> | تعيين عبارات کوتاه | 6.2 |
<samp> | مثال براي کدهاي برنامه نويسي | 3.0 | 3.0
<script> | تعريف کدهاي متني مانند جاوا اسکريپت | 3.0 | 3.0
<select> | تعيين ليستهاي انتخابي | 3.0 | 3.0
<small> | نوشتن متن با حروف ريز | 3.0 | 3.0
<span> | تعيين يک بخش کوچک در صفحه | 4.0 | 3.0
<strong> | نوشتن متن بصورت درشت | 3.0 | 3.0
<style> | تعريف style براي استايل شيت | 4.0 | 3.0
<sub> | نوشتن متن در زير يک خط | 3.0 | 3.0
<sup> | نوشتن متن در بالاي خط | 3.0 | 3.0
<table> | شروع يک جدول | 3.0 | 3.0
<tbody> | تعيين بدنه يک جدول |  | 4.0
<td> | ساخت يک خانه در جدول | 3.0 | 3.0
<textarea> | تعيين ناحيه ورود متن در فرم | 3.0 | 3.0
<tfoot> | تعيين خانه هاي انتهايي در يک جدول |  | 4.0
<th> | عنوان بندي در يک جدول | 3.0 | 3.0
<thead> | تعيين خانه هاي ابتدايي جدول |  | 4.0
<title> | عنوان گذاري براي يک صفحه | 3.0 | 3.0
<tr> | تعيين يک رديف در جدول | 3.0 | 3.0
<tt> | نوشتن متن بصورت تايپي | 3.0 | 3.0
<ul> | تعريف ليستهاي غير سفارشي | 3.0 | 3.0
<var> | تعيين متغيرهاي برنامه نويسي کامپيوتر | 3.0 | 3.0

Copyright © 2004-2005 iranw3. All rights reserved .


Uploading webpages --- راه اندازی سايت

Google
Web iranw3.com
مطالب آموزشی

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

upload و راه اندازي سايت

بعد از آماده کردن صفحات سايت و رفع ايراد آنها حالا نوبت به راه اندازي و برپايي وب سايتتان رسيده است. براي اينکار نياز به يک فضاي امن در يک سرور داريد. سرور، يک کامپيوتر متصل به اينترنت است که محتواي وب سايت شما بر روي هارد ديسک آن قرار خواهد گرفت که به اين عمل web hosting يا ميزباني وب ميگويند. يکبار تنظيمات اوليه توسط متخصصان انجام ميشود و از آن به بعد تمام کسانيکه به اينترنت دسترسي دارند ميتوانند سايت شما را هم ببينند. شما بايد فايلهاي خود را بر روي سرور upload کنيد، يعني اطلاعات را از کامپيوتر خود به کامپيوتر اصلي بفرستيد. Upload بر عکس اصطلاح download است که در دانلود اطلاعات را از کامپيوتر ديگري جمع آوري کرده و در کامپيوتر خود ذخيره مي کنيد.

پيدا کردن سرور مناسب

براي upload کردن صفحات نياز به يافتن يک فضاي مناسب با امنيت بالا داريد. بطور معمول شرکتهاي سرويس دهنده اينترنت (ISP) اين فضا را به شما اجاره خواهند داد. براي برپايي يک سايت معمولي نياز به 5 الي20 مگابايت فضا داريد. سايتهايي هم هستند که اين فضا را بطور رايگان دراختيار شما مي گذارند که در عوض تبليغات خود را در صفحات سايت شما جاي ميدهند. يکي از اين سايتها www.geocities.com است.

در نظر داشته باشيد که شرکتهاي اينترنتي زيادي با قيمتهاي متفاوت وجود دارند که شما بايد قيمتها را نسبت به امکاناتيکه در اختيار شما قرار ميدهند، بسنجيد و سپس اقدام به اجاره فضا کنيد.

ثبت اسم و دامنه سايت Domain Registartion

پس از پيدا کردن سرور مناسب نوبت به ثبت اسم وب سايت ميرسد که اين کار شامل هزينه اضافي ميباشد و ميتوانيد در همان شرکتي که ميزباني سايت شما را به عهده دارد، آنرا به ثبت برسانيد. البته اسم مورد نظر شما نبايد از قبل رزرو شده باشد. سايتهايي وجود دارند که اسم مورد نظر خود را ميتوانيد در آن جستجو کنيد تا اگر آن اسم رزرو نشده باشد، اقدام به ثبت آن کنيد. يکي از اين سايتها www.register.com ميباشد.

Upload کردن فايلها توسط FTP

چند روش براي انتقال محتواي سايت شما بر روي سرور وجود دارد. بهترين راه استفاده از پروتکل FTP که مخفف File Transfer Protocol ميباشد. براي استفاده از اين سرويس برنامه هايي هست که اينکار را براي ما انجام ميدهند. معروفترين برنامه ها Cute FTP و WS FTP ميباشند. يکي از امکاناتي که شرکت ميزبان در اختيار شما بايد قرار دهد همين سرويس ميباشد که مشخصات لازم مانند password يا همان کلمه رمز را به شما ميدهند و شما اطلاعات لازم را در برنامه FTP وارد کرده و به دايرکتوري مشخص در سرور وصل ميشويد. زمانيکه اين ارتباط برقرار شود بايد عمل انتقال فايلها را انجام داد که بيشتر برنامه هاي FTP داراي دو پنجره ميباشند که يکي محتواي کامپيوتر خودتان را و ديگري دايرکتوري رزرو شده در سرور را نشان ميدهد. عمل انتقال فايلها به دو روش انجام ميشود، يکي بصورت ASCII که مخصوص انتقال فايلهاي داراي متن مانند خود صفحات HTML و ديگري بصورت Binary که مخصوص انتقال فايلهاي گرافيکي، صوتي و تصويري ميباشد. دقت کنيد که اگر اشتباه انتخاب کنيد فايلها خراب شده و قابل استفاده نميباشند ، اما نگران اين موضوع نباشيد، داخل برنامه هاي مربوطه گزينه اي هست که بطور اتوماتيک اينکار را انجام ميدهد و فقط شما بايد آنرا فعال کنيد.

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

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

نکاتی در ارتباط با موتورهای جستجو

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Web and Html preview --- مروری بر وب

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

مروری بر وب

برای دسترسی سريع از لينکهای زير استفاده کنيد:

WWW
HTML چيست
عناصر تشکيل دهندهHTML

WWW

امروزه شما به هر طرفي که نگاه مي کنيد آدرس هاي اينترنتي را مشاهده مي کنيد که اين آدرس ها شما را به صفحاتي در اينترنت هدايت مي کنند تا اطلاعاتي را در اختيار شما قرار دهند.بيشتر اين آدرس ها با www آغاز شده که مخفف سه کلمه World Wide Web مي باشد. وب قسمتي از دنياي اينترنت مي باشد که شامل متن، عکس و تصوير يا حتي صدا مي باشد که بعضي از اين صفحات به هم مرتبط بوده و شما را به صفحه ديگر حرکت مي دهند.

همانطور که ميدانيد براي دسترسي به اين صفحات نياز به چند چيز داريد:

ابتدا شما بايد مشترک يکي از شرکتهاي سرويس دهنده اينترنت شويد که به اين شرکتها ISP مي گويند.ISP مخفف Internet Service Providers است. سپس شما براي مشاهده صفحات نياز به يک برنامه به اسم مرورگر وب Web browser داريد مانند: Internet explorer, Netscape Navigator, Opera, Mozilla

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

داخل اين مرورگرها کادري(Address bar) است که شما مي توانيد آدرس هاي اينترنتي را وارد کرده و پس از فشار دادن دکمه Enter برروي کيبورد منتظر نمايش يک وب سايت باشيد. اگر دقت کرده باشيد پس از اين عمل کلمه http درجلوي آدرس وارد شده اضافه مي گردد که مخفف HyperText Transport Protocol ميباشد، اين کلمه به مرورگرميفهماند، اين آدرس از چه پيوند و تکنولوژي مي خواهد براي نمايش صفحه استفاده کند، چون پروتکلهاي مختلفي هست مانند: FTP که مخفف File Transfer Protocol .

نام فني آدرسهاي اينترنتي URL مي باشد که اين اصطلاح مخفف سه کلمه Universal Resource Locator است.

HTML چيست؟

زمانيکه شما داخل صفحات يک وب سايت مي گرديد اجزاي گوناگوني را مي بينيد که تمام آنها در يک چيز مشترک هستند و آن زبان يا کدي است که آنها را توليد مي کند که اين زبان HyperText Markup Language يا همان HTML مي باشد.حالا اجازه دهيد تا کلمه به کلمه برايتان توضيح بدهم، البته انتظار يک معني دقيق و سليس را نداشته باشيد ولي درحدي که براي من قابل فهم بود براي شما خواهم گفت.

: Hyper متضاد نوشته هاي خطي( Linear ) است ، اگر شما با زبانهاي برنامه نويسي کامپيوتر آشنايي داشته باشيد مانند ويژوال بيسيک ميبينيد که بايد کدها را خط به خط بنويسيد و تا يک خط اجرا نشود بعدي خوانده نمي شود يعني آنها را بايد به ترتيب بنويسيد تا برنامه اجرا شود ولي HTML اينطوري نيست و الگوي خطي ندارد شما هر کدي را مي توانيد هر جا که بخواهيد بنويسيد.

Text : به همان متني مي گويند که مي نويسيد تا در مرورگر نشان داده شود.

Markup :عملي است که مرورگر برايتان انجام ميدهد يعني يک متن ساده مي نويسيد ولي جور ديگري نمايش داده مي شود.

Language: بالاخره اين هم يک نوع زبان و بايد يک چيزي پيدا کرد تا به حرف L بخوره ديگه (-:

عناصر تشکيل دهندهHTML

HTML زبان وب ميباشد که داراي عناصر( elements ) گوناگوني است که بر روي هم تشکيل يک صفحه از سايت را ميدهند. اين عناصر عبارتند از:

  • ( texts & lists ) متنها و ليست ها : نوشته هاي داخل يک صفحه را در برميگيرد.

  • ( images ) عکسها : عکس هاي داخل يک صفحه که زيبايي خاصي به وب سايتها مي بخشند.

  • ( ( tables جدولها : جدولها بهترين عنصر براي سازمان دهي و مرتب کردن اطلاعات ما هستند که نقش اساسي در طراحي يک سابت دارند.

  • ( ( forms فرمها : عناصري که بيننده سايت به کمک آنها مي تواند اطلاعاتي را وارد کرده تا ذخيره شده يا فرستاده شود.

  • ( ( hyperlinks نقطه پيوند : البته اين معني اصلي لغت نمي باشد و اين عناصر، نقطه پيوند و ارتباط بين دو صفحه از يک سايت يا دو وب سايت متفاوت مي باشد. مانند :

www.yahoo.com

  • ( frames ) چارچوبها : فريمها يا چارچوبها تنها عناصري هستند که با استفاده از آنها ما مي توانيم چند صفحه اينترنتي را در يک صفحه جاي دهيم. مانند

  • ( multimedia ) چند رسانه اي : شايد بشه آنرا صوت و تصوير هم گفت ، اگرچه از ابتدا صوت و تصوير با HTML نبوده اما در حال حاضر بيشتر مرورگر هاي وب از اين عنصر پشتيباني مي کنند و شما ميتوانيد در وب سايتتان فيلم وموزيک پخش کنيد.

  • ( javascript ) جاوا اسکريپت : يک نوع زبان نوشتاري يا بهتر بگويم يک نوع کد است که ارتباط نزديکي با HTML دارد و البته آنها را بايد داخل کدهاي html بکار برد تا بتوانيد يک وب سايت حرفه اي با جذابيت بالا طراحي کنيد.

  • ( JavaApplets ) جاوا اپلت : اپلتها برنامه هايي هستند که توسط زبان جاوا نوشته مي شوند و مي توان آنها را در يک صفحه جاسازي کرد براي کارآيي بالاي وب سايت مانند عمليات پيچيده رياضيات يا ساختن بازيها. زبان برنامه نويسي جاوا خود يک زبان مجزا و داراي محبوبيت خاصي دردنيا مي باشد که با جاوا اسکريپت فرق دارد.

  • ( style sheets ) استايل شيت : اين عناصر قابليت انتقال اطلاعات به عنوان يک الگوي مشترک در بين صفحات را دارد. به طور مثال شما يک الگو براي رنگ متن مي سازيد و سپس آنرا بين صفحاتي که مي خواهيد به اشتراک مي گذاريد.

  • ( DHTML ) : مخفف دو کلمهDynamic Html مي باشد که وظيفه آن روح بخشيدن به صفحات و بالا بردن جذابيت وب سايت مي باشد، شما مي توانيد با هماهنگي کدهاي javascript وDhtml يک وب سايت پويا و زنده طراحي کنيد.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

هدف از ساخت وب سايت
چگونه سايت را راه اندازي کنيد
اهميت طراحي وب سايت

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Understanding web design

Google
Web iranw3.com
HTML 4.0 آموزش

افزودن متن
(Lists) ليستها
(Links) ساختن لينک
(Images) افزودن عکس
(Image map)نقشه تصويری
(Tables) ساختن جدول
(Forms) فرمها
(Frames)ساخت فريم
(Sounds and Video) صدا و تصوير
(head) تگهای قسمت سر
(body) تگهای قسمت بدنه

مطالب دیگر

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

مقدمه ای برای طراحی سايت

برای دسترسی سريع از لينکهای زير استفاده کنيد:

هدف از ساخت وب سايت
کجا و چگونه سايت را راه اندازي کنيد
اهميت طراحي وب سايت
برای يادگيری Html به چه چيزهايی نياز داريد

تمامي اين عناصر(( elements که در بخش قبل ذکر شد مي توان همگي يا تک تک آنها را در ميان کدهاي html بکار برد. لازم بذکر است که کليه کدها و عناصر مربوط به زبان html توسط يک کنسرسيوم و انجمني به نام W3C تأييد و به رسميت شناخته مي شود. انجمن W3C که مخفف World Wide Web Consortium مي باشد، به غير از Html بر کدهاي Style sheet, xml, xhtml هم نظارت دارد. اين انجمن پس از بررسي کدهاي جديد آنها را در سايت رسمي خود www.w3.org اعلام مي نمايد. در حال حاضر آخرين نسخه html، نسخه html 4.01 ميباشد و بعد از آن نسخه هاي Xhtml به وب معرفي شده است.

هدف از ساخت وب سايت

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

کجا و چگونه سايت را راه اندازي کنيد

ابتدا بايد يک اسم مناسب براي سايت انتخاب کنيد که به اين اسم domain مي گويند، اسم يک وب سايت از سه قسمت تشکيل مي شود: www که مخفف World Wide Web ميباشد، اسم منتخب شما يا همان Domain و در آخر پسوندهاي مشخص مانند: .com, .net, .org, .info

پس از انتخاب اسم که بايد يک هماهنگي با مطالب سايت داشته باشد، نوبت به ثبت آن ميرسد که شما مجبورهستيد با يک شرکت خدمات اينترنت قرار داد ببنديد، براي ثبت اسم و اجاره فضا تا اطلاعات شما را در اينترنت به معرض نمايش بگذارند. بعد از اينکه تنظيمات اوليه انجام شد، شما مي توانيد با استفاده از سرويسهايي مانند FTP که مخفف File Transfer Protocol ميباشد اطلاعات سايت را حذف ، اضافه يا تغيير دهيد که در مورد اين سرويس در بخش ديگري توضيح خواهم داد.

البته سابتهايي هستند که شما ميتوانيد به طور رايگان سايت خود را راه اندازي کنيد اما معايبي هم دارند که يکي از آنها پخش تبليغات در صفحات شما ميباشد و ديگر اينکه امکانات محدود آنها است ولي براي شروع کار و آشنايي با نصب و راه اندازي يک وب سايت بسيار مناسب ميباشند. يکي از اين سايتها www.geocities.com است که اگر ايميل در سايت ياهو داريد، فضاي رايگان در اختيارتان قرار ميدهد.

اهميت طراحي وب سايت

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

براي يادگيري HTML به چه چيزهايي نياز داريد

براي ديدن صفحاتي که طراحي مي کنيد نياز به يک مرورگر وب web browser داريد اگر شما اين صفحه را مي بينيد پس يکي از اين مرورگرها را داريد. اما براي نوشتن کدهاي html در حال حاضر به برنامه ساده notepad که درکليه سيستمهاي عامل ويندوز وجود دارد نياز داريد، برنامه هاي پيشرفته ديگري هم هست که محيط گرافيکي دارند مانند: Microsoft frontpage , Macromedia Dreamweaver ولي براي شروع بهتر است که از همان Notepad استفاده کنيد. پس مهمترين چيزي که نياز داريد کمي وقت و علاقه هست.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبی که در صفحه بعد می خوانيد:

تاريخچه Html

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


XHTML learning

Google
Web iranw3.com
مطالب آموزشی

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

آموزش Xhtml

زبان XHTML که مخفف EXtensible HyperText Markup Language در تاریخ 26 ژانویه سال 2000 منتشر شد و به قول بعضيها همان HTML 5 میباشد که در واقع اینچنین نیست. این زبان نسل جدید زبان وب ميباشد که داراي یکسري اصول و قوانین خاص است تا کمبودهايHTML را در مورد دستگاههاي کوچک الکترونیکي که به وب هم متصل ميشوند مانند تلفنهاي همراه، را جبران کند.

مدتي است که وب آماده معرفي زبان آينده خود يعني XML است که XHTML اين وظيفه را بعهده دارد. در اين نسخه کدهايHTML بايد در DTD نوشته شوند. هر مرورگر وب ، داخل خود يک نوع DTD دارد و به همين دليل است که يکسري از دستورات نسخه هاي مختلف HTML در بعضي از مرورگرها نمايش داده نميشوند. از اين به بعد شما بايد دستورات HTML را در DTD خاص خود بکار بريد، چون انجمن W3C ميخواهد يک استاندارد را معين کند تا هماهنگي لازم بين زبان وب و کليه User-agent ها برقرار شود. User-agent برنامه هاي تحت وب مانند مرورگرها را گويند.

W3C پيشنهاد داده که HTML بايد يک برنامه کاربردي تحت XML باشد تا برنامه نويسان وب مجبور به رعايت استاندارد آن شوند.

با قبول کردن DTD برايXHTML و نوشتن آن ، بايد اصول و قوانين اين نسخه را هم رعايت کنيد البته اگر ميخواهيد صفحات شما سازگاري بيشتري با نسل آينده وب داشته باشد.

پس ابتدا از DTD براي اين نسخه شروع ميکنيم . همانطور که ميدانيد DTD براي نسخه هاي HTML لازم نبود و بدون آن هم صفحات بخوبي نمايش داده ميشدند ولي براي XHTML نوشتن و تعيين آن اجباري است. در حال حاضر سه نوع DTD براي حالتهاي مختلف وجود دارد:

حالت اول براي صفحه اي است که فقط از دستورات صحيح XHTML استفاده شده و براي مرورگرهايي است که از CSS پشتيباني ميکنند،

<! DOCTYPE HTML PUBLIC
“-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

حالت بعدي براي صفحه اي است که مخلوطي از کدهاي HTML و XHTML باشد و مرورگرهاييکه از CSS پشتيباني نميکنند هم آنرا نمايش دهند،

<! DOCTYPE HTML PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

و حالت آخر هم براي استفاده عنصر فريم Frame در صفحه است،

<! DOCTYPE HTML PUBLIC
“-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

فراموش نکنيد که نوشتن يکي از آنها اجباري است.

حالا نکاتي را که بايد در اين نسخه رعايت کنيد:

  • نوشتن تگهاي</head></body> که در HTML اجباري نبود در XHTML اجباري است.
  • وجود تگهاي پايان دهنده اجباري است مانند: <p>….</p>, <hr/>, <br/>
  • کليه تگها و خصوصيات آنها بايد بصورت حروف کوچک انگليسي نوشته شود. مانند: <body bgcolor=”#ffcc45”>
  • مقادير خصوصيات در تگها بايد بين دو علامت “…” قرار گيرند.
  • ترتيب قرار گرفتن تگها داخل هم بايد رعايت شود،

<b><i> TEXT </b></i> روش غلط

<b><i> TEXT </i></b> روش صحيح

  • بعضي از خصوصيات در HTML نياز به مقداردهي نداشتند اما در XHTML آنها را بايد مقداردهي کنيم،

<input type=”radio” checked> روش غلط

<input type=”radio” checked=”checked”> xhtml روش صحيح در

  • در تگ <pre> فقط از متن بايد استفاده کنيد و داخل آن از تگهاي ديگر نميتوانيد استفاده کنيد.
  • يک فرم را داخل فرم ديگر نبايد بکار بريد.
  • دستورات فايل CSS بايد به صورت حروف کوچک نوشته شوند و بهتر است که براي Style sheet از فايل خارجي استفاده کنيد.
  • کليه خصوصياتي را که ميتوان با style sheet کنترل کرد از خصوصيات HTML آنها بهتر است استفاده نشود.
  • دستورات زبان جاوااسکريپت هم بهتر است در فايل خارجي باشد و توسط تگ <link> فراخواني شوند ولي اگر ميخواهيد داخل XHTML DTD از آنها استفاده کنيد بايد مانند زير عمل کنيد:
<script language=”JavaScript” type=”text/javascript”>
<![CDATA [
document.write(“ Hi Friends “);
] ]>
</script>

ديگر از تگ <!-- ….. --> براي بيان نظريه و توضيح نميتوانيد استفاده کنيد. در صورت نياز مانند زير عمل شود،

<[CDATA […comment…] ]>

همانطور که ميبينيد يکسري محدوديتهايي هست که در HTML نبود و سادگي زبان HTML که باعث محبوبيت فراوان آن شده در نسل جديد دارد از بين ميرود ولي در عوض به گفته W3C دو خاصيت بسيار مهم در نسخه جديد زبان وب وجود دارد، Extensibility و Portability .

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

Cascading Style Sheet

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Frame01

Frame 1

(01.htm)


﻿ Azarbaijan Page

صفحه استان آذربايجان شرقی


Body background

صفحه را به پايين هدايت کنيد.

صفحه را به بالا منتقل کنيد.


Body language and direction

 به تغيير مکان scroll bar صفحه دقت کنيد


iranw3.com definition list example

﻿ iranw3.com definition list example This is a definition list .
HTML
HyperText Markup Language.


﻿ Embed file


﻿ Fars Page

صفحه استان فارس


Untitled Document

Page 2


Untitled Document

Page 1


contents

Click here


Frame Example

This page uses frames, but your browser doesn't support them.


main

Page 01


main

Page 02


Image alignment

﻿ Image alignment [image] Hello Duck ! ( this is a middle alignment ).


﻿ Image border

Border = "5"


﻿ center


Image Map example

Image Map

Tehran Azarbaijan sharghi Khouzestan Fars Khorasan


﻿ 40x40 image size

This is an image example !

image example

Hello Duck !


Image space

﻿ Image space [image] hspace = " 100 " , vspace = " 50 "


Frame02

Frame 2

(index.html)


﻿ Interlaced Image

This is an interlaced image !

interlaced image


﻿ Khorasan Page

صفحه استان خراسان


﻿ Khouzestan Page

صفحه استان خوزستان


iranw3.com list example

﻿ iranw3.com list example This is a list.
  1. Item 01
  2. Item 02
  3. Item 03


iranw3.com list example

﻿ iranw3.com list example This is a list with Roman numeral.
  1. Item 01
  2. Item 02
  3. Item 03


iranw3.com list example

﻿ iranw3.com list example This is a list with type="square".
  • Item 01
  • Item 02
  • Item 03

This is a list with type="circle".

  • Item 01
  • Item 02
  • Item 03

This is a list with type="disc".

  • Item 01
  • Item 02
  • Item 03


Body margin

 topmargin="100" leftmargin="200"


iranw3.com Nested list example

﻿ iranw3.com Nested list example This is a Nested list .
  1. Item 01
    • Black
    • White
  2. Item 02
    • Black
    • White
  3. Item 03
    • Black
    • White
  4. Item 04
    • Black
    • White


Adding an audio file as a link

﻿ Adding an audio file as a link MIDI format file


Adding an audio file as object

﻿ Adding an audio file as object Your browser doesn't support this format.


Table example

cell 01 | cell 02
cell 03 | cell 04


align attribute

align="center" | align="left"
align="right" | align="justify"


background color

bgcolor="#CCCCCC" bgcolor="#99FFCC"


table caption

caption of table
cell 01 | cell 02
cell 03 | cell 04
cell 05 | cell 06


header

لطفاً به سورس کد اين صفحه نگاه کنيد

header | header
cell 01 | cell 02
cell 03 | cell 04


thead, tbody, tfoot

هر خصوصيتي را که در تگهاي thead, tbody, tfoot بکار بريد در کليه خانه هاي آن قسمت، تأثير مي گذارد.

cell 01 | cell 02
cell 03 | cell 04
cell 05 | cell 06
cell 07 | cell 08


rules attribute

cell 01 | cell 02
cell 03 | cell 04
rules="groups"

cell 01 | cell 02
cell 03 | cell 04
rules="cols"

cell 01 | cell 02
cell 03 | cell 04
rules="rows"


height and width

width="80%"
height="200"


cellspacing and cellpadding

cell 01 | cell 02
cell 03 | cell 04

cellspacing="10" , cellpadding="20"


colspan and rowspan

 | colspan="2"
rowspan="2" |


﻿ Tehran Page

صفحه استان تهران


Acronym example

Move your mouse over RADAR.


Big and Small Tag

This is a small tag.

This is a big tag.


Blockquote example

This is an example for blockquote.
This is an example for blockquote.


Bold Text

This is a bold text.


line break

﻿ line break This is an example for
line break tag.


﻿ Center
This is an example for center tag.


Citation Text

This is an example for strong text.


Code and variable example

A sample javascript code for date and time .

var datetime
datetime = new Date();
document.write ( datetime )


Text color

body text="#99ccff"


Delete and Insert Tags

 This is an example for delete text. This is an example for insert text.


Definition Text

HTML: HyperText Markup Language


﻿ div tag
Examples for div tag.
Example one.
Example two.


Emphasis Text

This is an example for emphasis text.


Font Tag

This is Arial font.

This is Times New Roman font face.


﻿ page heading

Heading 1.

Heading 2.

Heading 3.

Heading 4.

Heading 5.
Heading 6.


﻿ horizental rule

horizental rule


Italic Text

This is an italic text.


Keyboard Text

This is an example for keyboard text.


marquee

﻿ marquee This is an example for marquee tag.


﻿ Paragragh

This is an example for

paragragh. Please see the source code.


﻿ Preformatting text

                          This is an example of preformatting text.
                                                          Please see the source code
                                                                                of this page.


Sample example

 This is an example for sample tag.


﻿ span tag

Examples for span tag.


Strikethrough Text

This is an strikethrough example.


Strong Text

This is an example for strong text.


SubScript Text

H2O

H2SO4


SuperScript Text

Microsoft®Windows®

2 2 x 3 2 = 36


Typewriting Text

This is an example for typewriting text.


Underline Text

This is an underline text example.


﻿ Adding an image

This is an image example !

image example

Hello Duck !


FAQ --- پرسش و پاسخ

راه ديگري براي تغيير رنگ زمينه صفحه وجود دارد؟

بله ازطريق استايل شيت و تنظيم رنگ زمينه تگ table .

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

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

از يک رنگ در زمينه صفحه استفاده کردم ولي متوجه شدم که در سيستم ديگري آن رنگ فرق کرده، علت چيست؟

فقط 216 رنگ هست که در همه سيستمها ثابت هستند و به آنها palatte-safe colors مي گويند که آنها درصفحه رنگها مشخص شده اند.

آيا نوشتن يک جمله طولاني باعث خارج شدن از صفحه مرورگر مي شود؟

نوشتن متن در حالت عادي، خير. چون خود مرورگر اصطلاحاً جمله را Wrap مي کند، يعني جمله که به انتهاي مرورگر برسد، به خط بعدي منتقل مي شود. فقط هنگاميکه از عناصر ديگر مانند جدولها استفاده شود و عرض آنها بيشتر از عرض مرورگر تنظيم شود، انتهاي جمله به خارج از مرورگر مي رود که با حرکت دادن scroll bar افقي ، کل جمله قابل خواندن مي شود.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

نرم افزارهاي IIS و PWS را از کجا مي توانم تهيه کنم؟

براي نصب IIS در ويندوزهاي XP يا 2000 ، بايد به Control Panel رفته و روي گزينه Add or remove programs کليک کرده، سپس در سمت چپ اين پنجره روي گزينه Add remove windows components کليک کنيد. يک پنجره جديد باز مي شود که در کادر داخل آن گزينه IIS را تيک ميزنيد و سپس دکمه Next را زده تا مراحل نصب انجام شود. توجه داشته باشيد که براي اينکار نياز به سي دي سيستم عامل داريد.
اما براي نصب PWS بايد سي دي ويندوز98 را داشته باشيد، چون اين نرم افزارداخل يک فولدر به نام add-ons قرار دارد. البته هردوي اين نرم افزارها را از سايت مايکروسافت هم مي توانيد دانلود کنيد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

چرا بايد يک اسم واحد براي يکسري از checkbox ها يا radiobutton ها انتخاب کرد؟

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

عرض ليستهاي پايين آمدني را مي توان تغيير داد؟

خير، عرض آن ليست بستگي به بلندي کاراکترهاي يک گزينه دارد.

آيا کل يک فرم را مي توان غير فعال کرد؟

بله با افزودن خصوصيت disabled به تگ اصلي فرم، کل آن غير قابل استفاده مي شود.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا فايلهاي ASP يا CGI را مي توانم بر روي سيستم خودم امتحان کنم؟

در حالت معمول خير، اما با نصب يک وب سرور بر روي سيستم عامل خود مي توانيد کليه فايلهاي وب سايت را ابتدا تست کرده و سپس upload کنيد. اگر از ويندوزهاي ME و يا 98 استفاده مي کنيد مي توانيد برنامه PWS را نصب کنيد و اگر از XP و يا 2000 استفاده مي کنيد، IIS را نصب کنيد.

لطفاً در مورد mailto بيشتر توضيح دهيد.

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

<a href="mailto:address@domain.com" title="E-Mail">address@domain.com</a>

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا مي توان يک فرم را داخل يک فرم ديگري بکار برد؟

خير در مورد عنصر فرم امکان پذير نيست.

اگر سايز textfield مشخص نشود، در صفحه به چه اندازه اي ظاهر خواهد شد؟

بصورت پيش فرض سايز آن 13 در نظر گرفته مي شود.

آيا محدوديتي براي وارد کردن متن در textarea وجود دارد؟

تا جايي که حافظه سيستم اجازه دهد مي توانيد کاراکتر وارد کنيد.

آيا مي توانم کاراکتر قسمت password field را عوض کنم؟

اين کاراکتر در نسخه هاي قديمي ويندوز بصورت پيش فرض ستاره و در نسخه هاي جديد بصورت دايره توپر مشکي است که توسط کدهاي جاوااسکريپت مي توانيد کنترل بيشتري در اين قسمت داشته باشيد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

چرا استفاده از فريم زياد مورد استقبال نيست و توصيه نمي شود؟

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

آيا در فريمها حتماً بايد از صفحه وب استفاده کرد؟

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

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

شما مي توانيد اندازه فريمها را هم در مقياس پيکسل و هم درصد آنها را مشخص کنيد، همچنين مي توانيد از مخلوط درصد و پيکسل هم استفاده کنيد وعلامت * را مي توانيد براي باقيمانده فضاي صفحه بکار بريد. بطور مثال شما سه فريم عمودي ميخواهيد بکار بريد که يکي از آنها 300 پيکسل و ديگري 40% و سومي بقيه فضاي صفحه را اشغال کند، بصورت زير عمل ميکنيد:

<frameset cols="300, 40%, * ">

يک مدل مقدار دهي ديگر هم هست مانند " 3*, 1* " که در اين حالت فريم اول سه برابر دومي فضا اشغال مي کند يعني نسبت سه به يک.

آيا مي شود زمينه frameset را تغيير داد؟

تنها راهي که مي توانيد زمينه را تغيير دهيد بايد تک تک زمينه فريمها را تغيير دهيد تا زمينه کلي عوض شود.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا خود تگ <html> داراي خصوصيت ديگري هم هست؟

در حال حاضر فقط خصوصيت dir و lang استفاده مي شود.

چه اتفاقي خواهد افتاد اگر تگ <title> را ننويسيم؟

مرورگر اگر اين تگ را پيدا نکند، نام فايل ذخيره شده را در نوار عنوان نمايش ميدهد.

اگر عنوان صفحه طولاني باشد، مرورگر آنرا نشان ميدهد؟

مرورگر تا جايي نشان ميدهد که طول نوار عنوان title bar اجازه دهد و بقيه را ديگر نشان نخواهد داد.

تفاوت خصوصيت http-equiv و name در متا تگ چيست؟

اين دو خصوصيت تفاوتي با هم ندارند و هر دو آنها از مقادير يکسان استفاده مي کنند، فقط دقت کنيد که از هر دو خصوصيت در يک متا تگ استفاده نشود.

آيا مقادير ديگري هم براي http-equiv و name هست که ذکر نشده باشد؟

بله به غير از مقادير ذکر شده مقادير ديگري هم هست مانند، pub-date براي تاريخ انتشار صفحه ، mod-date براي تاريخ اصلاح، revisit-after براي مراجعه مجدد موتورهاي جستجو، expires براي تعيين مدت ذخيره شدن صفحه در سيستم کاربر، rating براي تعيين سطح دسترسي بيننده از نظر مسائل اخلاقي توسط سازمانهاي مشخص، classification براي طبقه بندي از نظر محتواي سايت.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

چه اتفاقي مي افتد اگر از تگهاي قديمي و جديد در يک صفحه استفاده کنيم؟

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

آيا نسخه HTML 5.0 هم وجود دارد؟

خير آخرين نسخه 4.01 ميباشد که بعد از آن XHTML 1.0 منتشر شد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا مي توانم از خصوصيت noframe هم براي تگ iframe استفاده کنم؟

خير اما مي توانيد يک توضيح در بين تگ آغازين و پايان دهنده آن وارد کنيد تا در مرورگرهايي که اينگونه صفحات را باز نمي کنند، آن متن نشان داده شود. مرورگرهاي جديد از اين عنصر پشتيباني مي کنند اما اگر ميخواهيد کاربران با مرورگرهاي قديمي را از دست ندهيد، مي توانيد از جاوااسکريپت استفاده کنيد تا اينگونه مرورگرها را تشخيص داده و کاربر را بصورت اتوماتيک به صفحه اي ديگر هدايت کند.

چه تعداد iframe مي توانم در يک صفحه بکار برم؟

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

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا برنامه اي وجود دارد که image map را راحتتر بسازد؟

برنامه هاي زيادي هستند که اينکار را انجام ميدهند و يکي از آنها Macromedia Dreamweaver است.

نوع ديگري از image map هم وجود دارد؟

بله اين نوع که توضيح داده شد بنام Client-side image map معروف است و مدل ديگر Server-side است که فرآيند بر روي سرور انجام مي شود نه در سيستم کاربر. در اين حالت فايل image map را بايد جدا و با پسوند map بر روي سرور ذخيره کنيد و توسط CGI script آنرا فراخواني کنيد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

چه اتفاقي خواهد افتاد اگر يک کاربر سيستم عامل مکينتاش بر روي فايلهاي صوتي ويندوز کليک کند؟

سيستم مکينتاش از برنامه اي به نام QuickTime براي پخش صوت و تصوير استفاده مي کند که اين برنامه در حال حاضر قادر به پخش بيشتر فايلها مي باشد.

مي خواهم يک فايل صوتي در زمينه صفحه قرار دهم که قطع نشود و مرتب تکرار شود. چکار بايد انجام دهم؟

مقدار خصوصيت loop را بايد برابر با کلمه infinite قرار دهيد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا موتورهاي جستجوگر فقط به متاتگها توجه مي کنند؟

خير، البته متاتگها نقش مهمي دارند ولي بايد در نظر داشته باشيد، حتي عنوان صفحه هم مهم است.

قرار دادن فايل robots.txt در دايرکتوري وب سايت، اجباري است؟

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

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

ميخواهم خانه هاي داخل جدول به اندازه طول جمله اي که نوشته ام باشد. چه بايد کرد؟

اگر خصوصيت nowrap را به تگ <td> اضافه کنيد، هرچه جمله طولاني باشد عرض جدول هم به همان اندازه تغيير مي کند.

آيا مي توان يک جدول داخل يک جدول ديگر درست کرد؟

بله، به اين حالت Nested tables مي گويند.

اگر مقدار عرض در تگ td بيشتر از عرض کلي جدول باشد ، چه اتفاقي خواهد افتاد؟

در اين حالت عرض جدول هم تغيير مي کند چون در مرورگرها مقدار width در td اولويت دارد نسبت به مقداردهي عرض در تگ اصلي جدول.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

صفحه اصلي سايت يا همان homepage داراي چه خصوصياتي بايد باشد تا وب سرور آنرا بصورت صفحه اصلي نمايش دهد؟

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

index.htm, index.html, default.asp

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

چگونه مي توانم تشخيص دهم که فايل html درست شده با xhtml سازگار است؟

برنامه اي هست به نام HTML TIDY که مي توانيد آنرا از سايت www.w3.org بصورت رايگان دريافت کنيد. در اين برنامه کليه خطاهايي که در يک فايل html وجود دارد، نشان داده مي شود.

آخرين نسخه XHTML که منتشر شده، چيست؟

در حال حاضر نسخه XHTML 2.0 مي باشد که براي کسب اطلاعات بيشتر در رابطه با اين نسخه مي توانيد به سايت رسمي www.w3.org مراجعه کنيد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


خودآزمايی

صفحه اي درست کنيد بنام testpage.htm که يک تيتر در بزرگترين حد ممکن وسط آن باشد و در زير آن يک پاراگراف در سمت چپ صفحه قرار گيرد. درسطر بعد از پاراگراف، يک خط بگذاريد که 20% از دو طرف صفحه ، حاشيه داشته باشد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


خودآزمايي

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

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


خودآزمايي

داخل يک صفحه دو سؤال بنويسيد که هر کدام داري چهار جواب باشند. جواب سؤال اول را طوري طراحي کنيد که کاربر حق انتخاب چند گزينه را داشته باشد اما سؤال دوم فقط يک گزينه را بتواند انتخاب کند. يک fieldset درست کنيد و در legend آن يک سؤال براي نظرسنجي مطرح کنيد که دوتا از جوابهاي آن بصورت پيش فرض انتخاب شده باشند.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


خودآزمايی

خودآزمايي

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

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


خودآزمايي

يک فرم بسازيد که کاربر بتواند نام کاربري و کلمه رمز را وارد کند، در ضمن کاربر نمي تواند بيش از 10 کاراکتر براي کلمه رمز وارد کند. همچنين يک کادر متني براي توضيح بيشتر قرار دهيد که داراي 50 ستون و 10 رديف باشد. فراموش نکنيد که براي هر قسمت اين فرم يک lable بگذاريد تا کاربر متوجه شود در هر قسمت چه چيز وارد کند.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


خودآزمايي

يک صفحه درست کنيد و يک فريم در سمت راست قرار دهيد که 30% از صفحه را اشغال کند و در سمت چپ دو فريم را بصورت افقي بر روي هم قرار دهيد که فريم بالايي هم 20% از فضا را اشغال کند. فريم ها را طوري تنظيم کنيد که سايز متحرک نداشته باشند و در ضمن کادر آنها هم مشخص نباشد. در فريم سمت راست چند لينک بگذاريد که بعد از کليک بر روي آنها صفحه و اطلاعات مورد نظر در سمت چپ و در فريم پايين نمايان شود. در فريم بالا هم يک عکس براي تبليغات قرار دهيد، دقت کنيد که صفحه نباشد و فقط آدرس يک عکس را متناسب با سايز آن قسمت قرار دهيد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


خودآزمايي

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

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


خودآزمايي

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

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

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


خودآزمايي

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

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


خودآزمايي

يک جدول بسازيد داراي 4 رديف و 3 ستون با زمينه رنگي وکادري به ضخامت يک پيکسل. اسمي تعيين کرده و در بالاي جدول بنويسيد همچنين خانه هاي رديف اول را با هم ترکيب کرده و يک تيتر در آن قرار دهيد. رنگ زمينه هر خانه را تغيير داده و فاصله هاي هر خانه در جدول را چنان تعيين کنيد که رنگ زمينه کلي جدول هم بين آنها مشخص باشد. خصوصيات مختلف را در اين جدول امتحان کنيد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


افزودن متن به صفحه

همانطور که دربخشهاي قبل گفته شد، هرمتني را بين تگهاي <body>وارد کنيد بعد از ذخيره آن فايل با پسوند.html يا.htm و هنگام نمايش فايل در مرورگر آنرا مشاهده خواهيد کرد که متن مورد نظر با تنظيمات مرورگر نمايان خواهد شد. ولي ما با استفاده از تگهاي اين عنصر کنترل نمايش نوشته ها را بدست خود ميگيريم تا همان چيزي که مورد نظر ما است نشان داده شوند. تگهاي متن را ميتوان به دو دسته تقسيم کرد، تگهاي اوليه که بيشتر وظيفه خط بندي، پاراگراف بندي و يا تنظيمات در ارتباط با متن را به عهده دارند و تگهايي که شکل و آرايش حروف را کنترل ميکنند که به آنها formatting مي گويند. بهتر است که Notepad يا هر برنامه ويرايشگر متن را که داريد باز کنيد و هر کدام از اين تگها را امتحان کنيد تا کاربرد آنها در ذهن شما جاي گيرد.

<br>
براي خط بندي از اين تگ استفاده ميشود و متن بعد از آن به يک خط پايين تر منتقل ميشود که نيازي به تگ پايان دهنده هم ندارد.

<p></p>
پاراگراف بندي متن را به عهده دارد و فاصله بيشتري را نسبت به <br> بين خطوط ايجاد ميکند. اين تگ داراي خصوصيت align= " " ميباشد که محل قرارگيري پاراگراف را در يک سطر کنترل ميکند و با کلمات "left", "center", "right", "justify"مقداردهي ميشود.

<p align="left">...</p>

<center></center>
همانطور که از اسمش پيداست متن بين اين دو تگ در وسط يک سطر قرار خواهد گرفت، البته اين تگ را براي عناصر ديگر وب نيز ميتوان بکار برد.

<pre></pre>
مرورگرها فاصله هر کلمه را در حد استاندارد نشان ميدهند و اگر شما بخواهيد که يک متن با فاصله هاي زيادي نمايش داده شود يعني آنطور که ميخواهيد نشان داده شود از اين تگ استفاده ميکنيد.

<h1></h1>
به اين تگHeading مي گويند و براي مشخص کردن سرفصلها و تيترها بکار ميرود. اين تگ از عدد يک تا شش درجه بندي دارد که عدد يک بزرگترين حد و شش کوچکترين حد حروف را نمايش ميدهند. در ضمن داراي خصوصيت " "=align ميباشند و با left, center , right مقداردهي ميشود.

<hr>
اين تگ روي خود متن کاري صورت نميدهد و فقط با ترسيم يک خط افقي آنها را از هم جدا ميکند که داراي خصوصيات زير ميباشد.

width=" "طول خط را کنترل ميکند که هم با عدد در مقياس پيکسل و هم با درصد ميتوان مقدار دهي کرد.

align=" " که محل قرار گيري خط در يک سطر را کنترل ميکند.

color=" "رنگ خط که ميتوانيد اسم رنگ يا کد هگز رنگ را بنويسيد.

size=" " اين خصوصيت ضخامت خط را تعيين ميکند که هرچه عدد بزرگتر باشد ، ضخامت بيشتر است. بصورت پيش فرض خط داراي سايه ميباشد و اگر خصوصيت noshade را به تگ اضافه کنيد ديگر سايه را نشان نميدهد.

<div></div>
اين تگ کاربرد فراواني براي مدل دادن به متن دارد و مانند تگ <br> آن قسمت از متن را جدا ميکند وبه خط بعد منتقل ميکند . خصوصيت style=" " در اين تگ توانايي اعمال يک الگوي خاص در آن قسمت از متن را ميدهد. بطور مثال هر گاه کاربر نشانگر موس را روي آن متن برد ، نوشته هاي ما خط دار شود، البته هر نوع Style که تعريف شود همان را بکار ميبرد. در بخش Style Sheets درست کردن الگوها را توضيح خواهم داد.

<span></span>
اين تگ هم مانند تگ بالا ميباشد با اين تفاوت که مخصوص يک کلمه يا حتي يک حرف ميباشد چون مانند div متن را از بقيه جدا نميکند و داراي خصوصيت style=" " ميباشد که بر فرض هنگام قرار گرفتن موس روي يک کلمه زمينه آن رنگي شود.

<marquee></marquee>
متن بين اين دو تگ متحرک خواهد شد و داراي خصوصيات زير ميباشد، البته اين تگ ممکن است در همه مرورگرها عمل نکند ولي در مرورگر اينترنت اکسپلورر (IE) مشکلي براي نمايش ندارد. خصوصيات اين تگ عبارتند از :

align=" "محل قرار گرفتن متن را تعيين ميکند که با کلمات top, middle, bottom مقدار دهي ميشود.

behavior=" "اين خصوصيت نحوه حرکت متن را کنترل ميکند که آنرا برابر با scroll اگر قرار دهيم، متن بصورت متناوب از يکطرف صفحه وارد و از طرف ديگر خارج ميشود و اگر برابر با alternate قرار دهيم ، متن از صفحه خارج نميشود و در عرض مرورگر حرکت ميکند، همچنين اگر برابر با slide باشد ، متن از يکطرف وارد صفحه شده و در طرف ديگرميايستد.

bgcolor=" " رنگ زمينه آن تگ را مشخص ميکند که يا نام رنگ يا کد هگز آنرا مينويسيد.

direction=" "جهت ورود متن به صفحه را کنترل ميکند و با کلمات left, right, top, down که از چپ ، راست، بالا و پايين ميتواند وارد شود.

height=" "ارتفاع کادر marquee را به عدد در مقياس پيکسل يا به درصد تعيين ميکند.

hspace=" "حاشيه چپ و راست را کم وزياد ميکند.

loop=" "تعداد چرخش متن را کنترل ميکند.

scrolldelay=" " سرعت حرکت متن را تعيين ميکند.

vspace=" " حاشيه بالا و پايين متن را مشخص ميکند.

width=" " عرض کادر را کنترل ميکند.

<-- !.....-->
از اين تگ براي افزودن نظريه يا هر نوشته ديگري که نميخواهيد در مرورگر نمايش داده شود و يا عملي را انجام دهد استفاده ميکنيد که بجاي نقطه چين هر متني را ميتوانيد وارد کنيد .

<bdo></bdo>
اين تگ فقط مخصوص مشخص کردن متن ازطرف چپ يا راست که داراي خصوصيت dir=" " ميباشد و با ltr يعني از چپ به راست و rtl يعني از راست به چپ مقدار دهي ميشود.


تگ اچ تي ام ال چيست و سورس کد کجاست

شروع از ابتدا

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

تگهاي HTML

اولين چيزي که براي برنامه نويسي html بايد بدانيد، اينست که تگ html چيست و چه کاري انجام ميدهد. تگهاي html دو نوع هستند، تگهاي آغازين و تگهاي پايان دهنده. بطور کل تگها با دو علامت کوچکتر و بزرگتر، يعني < > مشخص ميشوند و بين اين دو علامت کد html نوشته ميشود، مانند:

<b>

اين يک تگ آغازين است و کد داخل آن به مرورگر ما ميفهماند که متن بعد از آن بايد بصورت حروف ضخيم و bold به بيننده صفحه نشان داده شود و بلافاصله متن مورد نظر را مينويسيم و در آخر آن، تگ پايان دهنده که مرورگر بفهمد تا کجا اين متن بايد بصورت ضخيم نمايش داده شود،

<b> This is a bold text. </b>

همانطور که مشاهده ميکنيد، تگهاي پايان دهنده داراي يک علامت Slash ( / ) ميباشد.

اما کار اين تگها چيست؟ مرورگرهاي وب مانند اينترنت اکسپلورر، به علامتهاي < > حساس هستند و به محض اينکه به آنها مي رسند کد داخل آنها را خوانده و عمليات لازم را بر روي متن بعد از آن انجام ميدهند تا به تگ پايان دهنده برسند. در حقيقت مرورگرها حکم مترجم را براي ما دارند و کليه تگها ونوشته هاي داخل آنها را بصورت اطلاعات منظم و قابل فهم در قالب يک صفحه وب براي ما ترجمه کرده و به نمايش ميگذارند. ما با وارد کردن تگهاي مناسب، کنترل نمايش صفحه وب را در مرورگرها به کنترل خود در مي آوريم پس بايد ياد بگيريد که تگهاي html را چگونه و در کجا بنويسيد. زبان html هم مانند هر زبان ديگري ساختار و قواعد خاص خود را دارد که در صفحات بعد با آنها آشنا مي شويد.

Source code

صفحات وب داراي مزيتي هستند و آن مشاهده کدهاي Html در مرورگر است که شما براحتي مي توانيد تگهاي عناصر تشکيل دهنده آن صفحه را ببينيد و با نحوه قرار گرفتن و تکنيکهاي بکار گرفته شده آشنا شويد. براي ديدن سورس کد يا همان کد تشکيل دهنده صفحه وب داخل منوي view در مرورگر مي شويد و بر روي گزينه Source کليک مي کنيد که بطور معمول برنامه Notepad باز شده و تگهاي Html را نشان مي دهد که در حال حاضر فهميدن آنها براي شما مشکل است ولي در آينده نزديک هيچ مشکلي براي درک کدها نخواهيد داشت.


ساخت بدنه اچ تی ام ال

خصوصيات تگ body

همانطور که ميدانيد هر عنصر HTML که بخواهيد در صفحه وب نمايش داده شود بايد ما بين تگ body يعني <body></body> قرار گيرد. در کليه فايلهاي HTML اين تگ وجود دارد مگر اينکه بخواهيد از عنصر فريم استفاده کنيد که در اينصورت بايد <frameset> را بکار بريد.

اما خود تگ body جدا از اهميتي که در فايلهاي HTML دارد، خود داراي خصوصياتي مي باشد که در نمايش صفحه موثر است که به توضيح آنها خواهيم پرداخت.

bgcolor اين خصوصيت وظيفه کنترل رنگ زمينه يک صفحه را به عهده دارد که مي توانيد از کد هگز رنگها ،

<body bgcolor="#ccff00">

و يا نام رنگ را بکار بريد، مانند:

<body bgcolor="black">

نکته: دقت کنيد که رنگ زمينه با رنگ فونتهاي داخل صفحه يکسان نباشد، چون در اين حالت متن در صفحه محو خواهد شد.

background توسط اين خصوصيت بجاي رنگ مي توانيد از عکس هم در زمينه صفحه استفاده کنيد، فقط کافيست که آنرا برابر با آدرس عکس مورد نظر قرار دهيد،

<body background="images/filename.gif">

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

bgproperties هنگاميکه عکسي به زمينه اضافه مي شود همراه با ديگر عناصر صفحه مانند عنصر متن scroll مي شود يعني به بالا و پايين يا چپ و راست حرکت مي کند که با بکار گرفتن اين خصوصيت و مقدار دادن آن با fixed عکس در زمينه ثابت مي ماند و عناصر بر روي آن حرکت مي کنند.

<body background="../images/bg.jpg" bgproperties="fixed">

لازم بذکر است که اين خصوصيت در حال حاضر فقط در مرورگرهاي اينترنت اکسپلورر و اپرا قابل اجراست.

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

leftmargin حاشيه سمت چپ صفحه را کنترل مي کند که اگر نيازي به حاشيه نداريد آنرا برابر با عدد صفر قرار دهيد.

<body topmargin="0" leftmargin="0">

text اگر بخواهيد متن يک صفحه بطور کل يک رنگ واحد داشته باشد و خصوصيت رنگ را مرتب در تگها تکرار نکنيد ، مي توانيد اين خصوصيت را به تگ body اضافه کنيد و آنرا برابر با نام رنگ يا کد هگز آن قرار دهيد.

<body text="#99ccff">

dir اين خصوصيت براي تعيين جهت نوشتن حروف است که از راست به چپ باشد مانند فارسي که در اينصورت بايد برابر با مقدار rtl و چپ به راست مانند حروف انگليسي که برابر با ltr مي باشد. توجه داشته باشيد که اگر اين خصوصيت را در تگ body بکار بريد و آنرا برابر rtl قرار دهيد محل scroll صفحه مرورگر از سمت راست به چپ منتقل مي شود.

lang اين خصوصيت تعيين زبان بکار گرفته شده براي متن آن صفحه را به عهده دارد که بصورت قراردادي دو حرف از اسم آن زبان را بايد بنويسيد، مثلاً براي زبان فارسي fa و براي انگليسي en را مي نويسيد.

<body lang="fa" dir="rtl">

link در حالت عادي کليه لينکهاي داخل يک صفحه برنگ آبي هستند ولي اگر بخواهيد رنگ آنها را تغيير دهيد اين خصوصيت را بکار مي بريد و مانند هميشه يا نام رنگ و يا کد هگز آنرا مي نويسيد. البته خصوصيت ديگري هم در اين ارتباط هست که بخواهيد رنگ لينک فعال يا همان لينکي که در حال کليک کردن بر روي آن هستيد تغيير کند بايد از خصوصيت alink و اگر رنگ لينکهاي مشاهده شده را بخواهيد تغيير دهيد از خصوصيت vlink استفاده مي کنيد.

<body link="#990000" alink="#009900" vlink="#000099">

خصوصيات ديگري هم هست مانند onload که مربوط به زبان جاوا اسکريپت مي باشد که در بخش مربوطه با آنها آشنا خواهيد شد.


بررسی و امتحان کردن صفحات

زمانيکه شما نوشتن کدهاي html را در برنامه notepad يا ويرايشگرهايHTML تمام کرديد، بعد از ذخيره کردن آن فايل با يکي از پسوندهاي .htm يا .html و با استفاده از مرورگر وب خود آنرا امتحان کنيد تا نتيجه کارتان را مشاهده و اگر مشکلي هم داشت برطرف شود. مشکلاتي مانند نمايش نادرست صفحه يا حتي غلطهاي ديکته اي که زياد هم به چشم ميخورند.

شما اين صفحات را قبل از اينکه روي سرور بگذاريد تا ديگران هم ببينند، بر روي کامپيوتر خود ميتوانيد امتحان کنيد ولي اگر از فايلهاي ASP يا CGI استفاده کرده ايد نياز به يک وب سرور براي چک کردن آنها داريد. شرکت مايکروسافت دو نرم افزار دارد که توسط آنها ميتوانيد يک وب سرور درست کنيد و اينگونه فايلها را هم مشاهده کنيد. يکي از آنها IIS که مخفف I nternet Information Services است و بر روي ويندوزهاي 2000 و XP نصب ميشود و ديگري PWS که مخفف P ersonal Web Server است و بر روي ويندوزهاي98 و ME اجرا ميشود.

سعي کنيد هر صفحه را در مرورگرهاي مختلف چک کنيد که معروفترين آنها عبارتند از:

Internet Explorer ( IE ), Netscape Navigator ( NN ), Opera, Mozilla

چون بعضي از تگها در همه مرورگرها اجرا نميشوند و همچنين اينرا در نظر داشته باشيد که سيستمهاي عامل هم با يکديگر فرق دارند. بطور مثال فونتها و طرز نمايش صفحه داخل مرورگر Netscape در سيستم عامل Windows با Macintosh فرق ميکند.

برنامه هايي بنام HTML validator موجود ميباشند که با کمک آنها ميتوانيد عيب هاي صفحات را پيدا کنيد. بطور مثال اگر تگ پايان دهنده اي را فراموش کرديد آنرا پيدا کرده و بعضي از آنها حتي آن مشکل را رفع هم ميکنند. اگر از ويرايشگرهايي مانند Microsoft FrontPage يا Macromedia Dreamweaver استفاده ميکنيد، خود اين نرم افزارها برايتان عيب يابي ميکنند و نيازي به برنامه اضافي براي اين کار نداريد.

همچنين شما ميتوانيد به آدرس http://validator.w3.org مراجعه کنيد براي تأييد صفحات وب سايتتان که مزيت اين آدرس در اين است که بعد از رفع عيوب احتمالي، به شما اجازه استفاده از لوگوي مخصوص خودشان را در اين زمينه ميدهند که نمايانگر بي نقص بودن صفحات ميباشد. اين سايت زير نظر انجمن W3C ميباشد که وظيفه تأييد و اعلان کدهايHTML, XHTML, CSS, … را بعهده دارند.

از نکاتيکه هنگام چک کردن يک صفحه نبايد فراموش کنيد ، امتحان کردن لينکها است تا همه آنها به آدرس درست پيوند داده شوند. يکسري برنامه هم در اين زمينه وجود دارد که به آنها site-management tools گفته ميشود.

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


فارسي نويسي در وب

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

خب دوستان براي راه اندازي يک وب سايت فارسي ابتدا بايد سيستم عاملي داشته باشيد که فارسي ساز داشته باشد و يا مانند ويندوز XP, 2000 سازگار با زبان فارسي باشد تا توانايي تايپ فارسي را داشته باشيد، در ضمن بهتر است که از برنامه هايي نظيرMS Word يا FrontPage از مجموعه آفيس مايکروسافت استفاده کنيد چون ميتوانيد مستقيم فارسي بنويسيد و آنرا بصورت فايلhtml ذخيره کنيد. با هر برنامه اي که راحت هستيد ، متن را وارد کنيد و سپس به سورس source صفحه برويد و تگ زير را در قسمتHead وارد کنيد،

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

اين تگ، encoding مرورگر را براي استفاده از حروف و علامتهاي يونيکد تنظيم ميکند. براي ديدن و تنظيم encoding يک صفحه بصورت دستي بايد وارد منوي view در مرورگر شويد و برروي Encoding رفته واز ليست باز شده گزينه مورد نظر را انتخاب کنيد. اما وظيفه آن، تنظيم مرورگر بيننده براي نمايش صحيح حروف و علامتهاي بکار گرفته شده دروب سايت شما است چون هر کدام از آنها علامت و فونت خاص خود را دارند. تا بحال با يک نامه فارسي درايميل خود برخورد کرده ايد که يکسري حروف عجيب و غريب داشته باشد؟ اگر جوابتان بله است از اين به بعد وارد encoding شويد و آنرا روي Utf-8 بگذاريد.

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

Arial, Tahoma, Times New Roman

پس از انتخاب فونت، بهتر است که خصوصيات lang="fa", dir="rtl" را به تگهايي مانند <body>, <font>, <p>, <div>, <span> اضافه کنيد که خصوصيت lang=" " مشخص کننده زبان بکار گرفته شده و fa نمايانگر فارسي farsi است و همينطور خصوصيت dir="rtl" که جهت نوشتن را تعيين ميکند و rtl نمايانگر راست به چپright to left است.

نکته: اگر خصوصيت dir="rtl" را در تگ <body> بکار بريد، محل قرار گرفتن scroll bar در مرورگر از طرف راست به طرف چپ منتقل ميشود که اين خاصيت فقط در مرورگر اينترنت اکسپلورر IE عمل ميکند.

ممکن است شما بعد از ذخيره صفحه با يک مشکلي برخورد کنيد که بيشتر در مرورگر هاي نسخه قديمي مانند IE 5.5 به پايين مشاهده ميشود و آن ديدن حرف ي بزرگ در وسط کلمه بجاي نوع کوچک است مانند: ا ي نترنت که براي برطرف کردن آن دو راه وجود دارد:

اولين راه قرار دادن نسخه جديد فونت بکار گرفته شده در سايت براي دانلود کردن آن توسط بيننده وب سايت و نصب آن که هر کسي شايد بدرستي نتواند آنرا انجام دهد و اما راه حل دوم ، ابتدا صفحه مورد نظر را در برنامه FrontPage باز کنيد و به قسمتHTML در پايين برنامه رفته که در اين قسمت سورس کد را خواهيد ديد و کد&#1740; را حذف و بجاي آن کد &#1610; را قرار ميدهيد و سپس صفحه جديد را دوباره ذخيره ميکنيد. دقت کنيد، در صورتي حروف فارسي را به اين شکل خواهيد ديد که encoding برابر با windows-1252 باشد، يعني:

<meta http-equiv="content-type" content="text/html;charset="windows-1252">

يک نکته ديگر را بخاطر بسپاريد که اگر عنوان صفحه را فارسي تايپ کنيد يعني در قسمت<title> در بعضي از مرورگرها نمايش داده نخواهد شد.


ساخت اولين صفحه وب

در اين بخش شما اولين صفحه وب را خواهيد ساخت تا سادگي زبان html را لمس کنيد. براي شروع ابتدا برنامه Notepad ويندوز را باز کنيد، البته مي توانيد از هر برنامه ويرايشگر متن استفاده کنيد. سپس اين تگها را بنويسيد:

<html>
</html>

اين تگها به مرورگر وب ميفهماند که از کجا کدهاي html شروع و به کجا ختم ميشوند. پس بقيه تگها را ما بايد بين اين دو وارد کنيم. تگها را ما به دو دسته تقسيم ميکنيم: تگهاي قسمت سر head و تگهاي قسمت بدنه body ، بدين صورت:

<html>
<head>
</head>
<body>
</body>
</html>

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

خب دوستان اين ساختار کلي و اسکلت بندي يک صفحه وب هست که بايد هميشه آنرا در نظر داشته باشيد. حالا يک متني بين تگهاي بدنه body وارد کنيد، مثلاً

<html>
<head>
</head>
<body>
This is my first page!
</body>
</html>

نامگذاری و ذخيره کردن فايل

الان کدنويسي ما تکميل شد و بايد اين فايل متني را ذخيره کنيم تا بتوانيم در مرورگر وب خود امتحانش کنيم. ابتدا منو File را باز کنيد و گزينه Save as را انتخاب کنيد، يک پنجره براي آدرس دهي و نامگذاري آن فايل باز ميشود که آدرس جايي که بايد ذخيره شود را مانند My Documents وارد کنيد

سپس در پايين پنجره باز شده در قسمت File Name اسم فايل را بنام Firstpage وارد کنيد و دقت کنيد تا در آخر اين اسم يک نقطه بگذاريد و پسوند html را بنويسيد و دکمه Save را بزنيد تا فايل متني ما بصورت يک فايل html ذخيره شود.

دقت کنيد اگر ميخواهيد فايل شما در سيستم عامل DOS هم باز شود بايد پسوند .htm را در آخر اسم وارد کنيد.

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


ادامه ساخت اجزای فرم

ساخت اجزای فرم ( ادامه )

checkbox

براي درست کردن انتخاب چند گزينه اي checkboxes بايد type=”checkbox” قرار دهيم . براي مواقعي که ما ميخواهيم بيننده يک يا چند گزينه را انتخاب کند از آن استفاده ميکنيم. براي هر گزينه در اين قسمت بايد يکبار اين کد را نوشت و اگر ميخواهيد به صورت پيش فرض يک گزينه تيک خورده باشد بايد کلمه checked را به تگ اضافه کنيد:

<input name="chkbox01"
type="checkbox"> Item 01
<input name="chkbox01"
type="checkbox"> Item 02
<input name="chkbox01"
type="checkbox" checked> Item 03

Item 01 Item 02 Item 03

radio button

براي انتخاب تک گزينه اي از type=”radio” استفاده ميشود و به آنها radio button ميگويند ، در مواردي کاربرد دارد که کاربر حق انتخاب يک گزينه را دارد.

Item 01 Item 02 Item 03 Item 04

drop-down list

يکي ديگر از اجزاي فرم، ليستهاي انتخابي است که در مرورگر بشکل ليستهاي پايين آمدني (drop-down list) ظاهر ميشوند. با تگ <select> آغاز ميشود و براي هر گزينه داخل اين ليست بايد تگ <option> را بنويسيد و در انتهاي آنها تگ پايان دهنده اين ليست يعني </select> را مينويسيم. در ليست ساخته شده، بيننده و کاربر ميتواند يک گزينه را انتخاب کند ولي اگر خصوصيت multiple را به تگ <select> اضافه کنيد، کاربر ميتواند با پايين نگه داشتن دکمه هاي Ctrl يا Shift بر روي کيبورد، چند گزينه را از آن ليست بطور همزمان انتخاب کند.

<select name="selectList01" multiple>
<option value="item1">Item 01</option>
<option value="item2">Item 02</option>
<option value="item3">Item 03</option>
<option value="item4">Item 04</option>
<option value="item5">Item 05</option>
</select>

تگ select داراي خصوصيت size هم ميباشد که اگر آنرا برابر با عدد يک قرار دهيم بصورت زير ظاهر ميشود که در اين حالت بهتر است خصوصيت multiple را حذف کنيد. بصورت پيش فرض اولين گزينه در ليست نمايان ميشود ولي اگر خصوصيت selected را به يکي ديگراز تگهاي option اضافه کنيد، در مرورگر آن گزينه نمايش داده ميشود.

fieldset

بمنظور مرتب کردن و نظم دادن به اجزاي داخل يک فرم ميتوان از تگ<fieldset>در ابتداي کد يکي از اجزاي مورد نظراستفاده کرد و در انتهاي همان کد تگ</fieldset>را نوشت که بااين تگ يک کادر مستطيل نازک دور آن درست خواهد شد و اجزاي يک فرم را از هم جدا خواهد کرد. شما حتي ميتوانيد براي آن قسمت يک اسم بگذاريد که در بالاي آن کادر در مرورگر نمايان ميشود که براي اين کار بعد از تگ<fieldset>بايد تگ<legend> NAME </legend>را بکار برد که هر اسمي را ميتوانيد بجاي کلمهNAMEبکار بريد.

<form>
<fieldset>
<legend> Radio Button fieldset </legend>
<input name="rb" type="radio"> Item 01
<input name="rb" type="radio"> Item 02
<input name="rb" type="radio"> Item 03
<input name="rb" type="radio"> Item 04
</fieldset>
</form>
Radio Button fieldset

Item 01 Item 02 Item 03 Item 04

hidden field

بعضي اوقات، لازم ميشود تا اطلاعاتي از فرم به سرور فرستاده شود که در مرورگر نبايد ديده شود. براي اين منظور بايد تگ input را نوشته و خصوصيت type را برابر با hidden قرار دهيم ، خصوصيت name را هم مقداردهي مي کنيم با يک نام دلخواه و غيرتکراري ، همچنين خصوصيت value را نوشته و هر مقداري که به آن نسبت دهيم بصورت پنهاني به سرور فرستاده خواهد شد.

<input type="hidden" name="hiddenfield01" value="chkName">

disable elements

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

<textarea name="textarea" cols="20"
rows="3" disabled></textarea>
<input type="submit" name="Submit" value="Submit" disabled>

پس از اينکه اجزاي يک فرم ساخته و در صفحه اي از وب سايت قرار داده شدند ، حالا بايد فرآيندي را که روي اطلاعات وارد شده قرار است انجام شود ، مشخص کنيم. يعني معين کنيم که بعد از وارد شدن اطلاعات در خواستي و زدن دکمه تأييد توسط کاربر، به چه نحوي اطلاعات ذخيره يا به آدرس ايميلي فرستاده شوند که در قسمت بعدي توضيح خواهم داد.


جمع آوری اطلاعات از طريق فرم

نحوه جمع آوری اطلاعات از فرمها

هنگاميکه دکمه تاييد يک فرم زده مي شود اطلاعات وارد شده از صفحه عبور کرده و به سرور ( کامپيوتري که فايلهاي وب سايت شما بر روي آن قرار دارد ) فرستاده مي شوند تا پردازش شود. در اين قسمت بايد با دو خصوصيت action و method در تگ <form> آشنا شويد. اين دو خصوصيت مشخص مي کنند که اطلاعات چگونه و به کجا بايد فرستاده شوند.

در خصوصيت action آدرس فايلي که اطلاعات را تجزيه تحليل مي کند و بر روي سرور قرار دارد وارد مي شود که بطور معمول يا برنامه CGI و يا فايلهاي ASP است. CGI مخفف Common Gateway Interface است که فايلهاي آن با استفاده از زبان Perl, C ويا VB نوشته مي شوند و ASP مخفف Active Server Page است که يک زبان قوي تحت وب است که متعلق به شرکت مايکروسافت مي باشد. شما حتي مي توانيد اطلاعات گرفته شده از يک فرم را به آدرس ايميل هم بفرستيد که در اين حالت بايد خصوصيت action را برابر با"mailto:" قرار دهيد.

در خصوصيت method تعيين مي شود که اطلاعات گرفته شده از فرم چگونه و به چه صورت به برنامه و فايل پردازشگر اطلاعات برسد. به دو روش اطلاعات را مي توان به سرور فرستاد، يکي روش get و ديگري روش post مي باشد. اين دو روش تفاوتي با هم دارند که روش دوم يعني post استفاده بيشتري دارد. در روش اول بايد خصوصيت method=" " را برابر با کلمه get قرار دهيم که پس از وارد کردن اطلاعات و زدن دکمه تاييد فرم ، مطالب وارد شده، به انتهاي آدرس درمرورگراضافه مي شود که از لحاظ امنيتي روش خوبي نيست اما در روش دوم اينگونه عمل نمي شود و در ضمن روش post با بيشتر مرورگرها سازگارتر است. خصوصيت ديگري هم هست که در تگ <form> بکار مي رود و براي بالا بردن امنيت يک فرم است که اطلاعات گرفته شده از فرم را رمزدار کرده و به سرور مي فرستد که اين خصوصيت enctype="application/x-www.form.urlencodeed " است .

اما همانطور که گفته شد براي فرستادن اطلاعات يک فرم از طريق ايميل به آدرسي مشخص، بايد خصوصيت action=" " را برابر با mailto: قرار داد و همچنين method=" " را برابر با post و در خصوصيت enctype=" " اصطلاح multipart/form-data را مي نويسيم تا هر قسمت از اطلاعات وارد شده در فرم بصورت يک فايل متني جداگانه به ايميل پيوست شود و يا برابر با text/plain قرار ميدهيم. براي وارد کردن آدرس ايميل بايد آنرا در جلوي کلمه "mailto:" نوشت، بدين صورت:

<form method="post" action="mailto:emailaddress@domain.com" enctype="text/plain">

دقت کنيد که بعد از زدن دکمه تاييد فرم پيغامي ظاهر شده که بيننده را از فرستادن يک ايميل مطلع مي کند و سپس برنامه پيش فرض ايميل کاربر باز مي شود .

امروزه يکي از بهترين و پرکاربرد ترين برنامه براي جمع آوري و پردازش اطلاعات از يک فرم، زبان ASP مي باشد که در بخش مربوطه مي توانيد مطالب مورد نظر و چگونگي ارتباط با بينندگان سايت را از طريق فرم بياموزيد.


آرايش و شکل دهی حروف

Formatting texts

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

<font></font>
براي مشخص کردن نوع يا شکل حروف ، رنگ و يا اندازه آنها از اين تگ استفاده ميکنيم که داراي خصوصيات زير ميباشد.

face=" " اين خصوصيت نوع فونت را تعيين ميکند که بايد برابر با يکي از فونتهاي استاندارد سيستم عامل قرار دهيد.

size=" "اندازه هر حرف را تعيين ميکند که از اعداد يک تا هفت با علامت مثبت به نشانه افزاينده و با علامت منفي به نشانه کاهش سايز استفاده ميشود.

color=" "براي کنترل و تعيين رنگ حروف اين تگ را ميتوان بکار برد.

<big></big> , <small></small>
براي تعيين اندازه حروف در يک حد خاص از اين تگها استفاده ميشود.

<b></b>
متن بين آنها بصورت توپر bold ظاهر ميشود.

<i></i>
براي نوشتن حروف بصورت کج italic اين تگ را بکار ميبريم.

<u></u>
اين تگ خطي زير کلمات خواهد کشيد.

<s></s>
گاهي اوقات نياز داريم که روي يک حرف يا کلمه خط بکشيم، بطور مثال ميخواهيم روي قيمت قديمي کالا خط بکشيم و قيمت جديد آنرا کنارش بنويسيم که در اينصورت اين تگ را بکار خواهيم برد، همچنين از تگ<strike> ميتوان بجاي آن استفاده کرد.

نکته: تگ هايي مانند <b><i><u><s> را physical مينامند يعني متن بکار رفته در آنها بصورت آنچه که انتظار داريم نمايان ميشوند اما در مقابل، تگ هاي logical هم هستند که تنظيمات مرورگرها در آنها موثر خواهند بود.

<sup></sup>
حروف يا اعداد بين آنها بالاتر از سطر ظاهر خواهند شد، مانند عدد توان در رياضيات.

<sub><sub>
حروف يا اعداد پايين تر از سطر نوشته ميشوند، مانند عدد ظرفيت در فرمولهاي شيمي.

<tt></tt>
نوشته بين آنها بصورت حروف تايپي ظاهر ميشود و خاصيت آن در اينست که کليه حروف به يک اندازه جا اشغال ميکنند.

<em></em>
 اين تگ مانند تگ <i> عمل ميکند و جزو تگهاي Logical است.

<strong></strong>
 اين تگ هم مانند <b> عمل ميکند و در ضمن logical است.

نکته: مزيت استفاده تگهاي logical به تگهاي physical در اينست که در کليه مرورگرها به نمايش در ميايند ولي در بعضي از مرورگرها ممکن است تگ physicalعمل نکند.

<cite></cite>
 براي جمله هاي نقل قول ميتوان ازش استفاده کرد که مانند <i> عمل ميکند و در ضمن logical هم هست.

<blockquote></blockquote>
اين تگ مانند <p> وظيفه پاراگراف بندي را به عهده دارد با اين تفاوت که حاشيه بيشتري را در نظر ميگيرد و اگر براي دو دفعه متوالي استفاده شود، پاراگراف دوم با حاشيه دو برابر نسبت به اولي نمايان ميشود. در ضمن براي خطوط ساده از <q> ميتوان استفاده کرد.

<acronym></acronym>
کاربرد اين تگ براي مختصرنويسي است يعني اگر يک کلمه مانند HTML داريد با استفاده از آن ميتوانيد کلمات کامل را در يک کادر کوچک به اسم tooltip قرار دهيد و هنگاميکه کاربرموس را روي آن کلمه ببرد اين کادر باز شده و آنها را نمايش دهد.کلمات کامل را بايد در خصوصيت title=" " قرار دهيد.

<acronym title="radiodetecting and ranging"> RADAR </acronym>

<abbr></abbr>
اين تگ هم مانند تگ بالا است با اين تفاوت که در مرورگر چيزي را نمايش نميدهد.

<code></code>
اگر شما نياز داشتيد تا داخل يک صفحه از وب در مورد کد زبانهاي برنامه نويسي صحبت کنيد، ميتوانيد آنها را بين اين دو تگ قرار دهيد، همچنين براي متغيرها هم از تگ <var></var> ميتوان استفاده کرد.

<dfn></dfn>
اين تگ نمايانگر کلمه definition و براي توصيف يک متن بکار ميرود که آن متن بصورت مايل ظاهر خواهد شد.

<kbd></kbd>
اين هم نمايانگر کلمه keyboard است که حروف را بصورت ساده و تايپي نشان ميدهد.

<samp></samp>
نمايانگر کلمه sample است و براي نمايش نمونه کارتوليد شده از يک برنامه بکار ميرود.

<del></del>
هنگاميکه بخواهيد يک مطلب را حذف کنيد از اين تگ استفاده ميکنيد و يک خطي روي متن بين آنها کشيده ميشود که بطور معمول با تگ <ins> بکار ميرود. اين تگ داراي دو خصوصيت منحصر ميباشد، cite=" " که ميتواند آدرس يک فايل باشد تا توضيحي راجع به علت حذف آن مطلب بدهد و date=" " که تاريخ و زمان حذف را معين ميکند.

<ins></ins>
اين تگ هم بطور معمول با <del> بکار برده ميشود و براي مشخص کردن يک مطلب وارد شده است که داراي خصوصيات درج شده در تگ <del> نيز ميباشد و همچنين اين دو تگ داراي خصوصيت title=" " هم ميباشند که در آن يک پيغام براي بيان علت حذف يا اضافه مطلب ميتوان نوشت.


ساخت اجزای فرم

فرم چيست؟

فرمها تنها عنصري هستند که بيننده سايت ميتواند اطلاعاتي را بطور مستقيم وارد کرده که اين اطلاعات بعد از تجزيه و تحليل يا در فايلي ذخيره شده يا فرستاده ميشود. شما ميتوانيد داخل يک صفحه يا يک وب سايت چندين فرم داشته باشيد بطور مثال براي چند نوع نظرسنجي از بينندگان که هر کدام از اين فرمها را با استفاده از خصوصيت name=" "در تگ <form> بايد نامگذاري کنيد تا اطلاعات مربوط به هر فرم با نام همان فرم پردازش شود. فرمها داراي اجزاي متفاوتي با وظيفه مشخص ميباشند که بايد قبل از تگ پايان دهنده </form> آنها را بکار برد. بعضي از اين اجزا عبارتند از: کادرهاي متني text fields ، قسمت انتخابات چند گزينه اي checkboxes وتک گزينه اي radio buttons ، ليستهاي پايين کشيدني drop-down lists و دکمه هاي تأييد submit وپاک کننده reset .

فرمها توسط برنامه هايي نظير ASP, CGI و با افزودن خصوصيات action=" ", method=" ", enctype=" " در تگ <form> اطلاعات وارده را پردازش کرده و به وب سرور ميفهماند که به چه روش و در کجا اطلاعات ذخيره يا فرستاده شود. وب سرور به کامپيوتري که محتواي سايت شما بر روي آن قرار دارد گفته ميشود.

دکمه (button)

کليه اجزاي ساخته شده در يک فرم بدون بودن دکمه تأييد بي فايده هستند، چون بعد از فشردن اين دکمه است که اطلاعات وارده در فرم پردازش ميشوند. پس ابتدا به ساختن اين دکمه ميپردازيم. براي ساختن دکمه ها در يک فرم به دو روش ميتوانيم عمل کنيم:

روش اول: با استفاده از تگ <button></button> که داراي دو خصوصيت name=" "براي نامگذاري و type=" "براي مشخص کردن نوع دکمه که submit و يا reset ميباشد . در بين تگ آغازکننده و پايان دهنده هر چي نوشته شود در ظاهر دکمه نمايان ميشود

<button name="button 01" type="submit"> OK </button>

روش دوم: با استفاده از تگ <input> که مانند روش اول دو خصوصيت name=" "که بايد کلمه button در جلوي آن بيايد و type=" "که ميتواند هم submit باشد و يا reset.

<input name="button" type="submit">

فرقي که اين دو روش با هم دارند در اينست که شما در روش اول هر نوشته اي را بخواهيد در روي دکمه هنگام نمايش صفحه در مرورگر نشان داده ميشود اما در روش دوم شما دخالتي در اين کار نداريد و به صورت پيش فرض کلمه submit , reset نمايان ميشود. البته ميتوانيد بجاي دکمه هاي ساخته شده توسط مرورگراز عکس هم استفاده کنيد يعني شکل يک دکمه را طراحي کنيد و در فرم قرار دهيد که خصوصيت type=" " را برابر با کلمه image قرار ميدهيد و با خصوصيت src=" " آن را آدرس دهي ميکنيد:

<input name="button" type="image" src="images/button01.gif">

لازم بذکر است که در اين تکنيک فقط از حالت submit دکمه بايد استفاده کرد.

text field, text area

خب بعد از ساختن دکمه ها ميپردازيم به بقيه اجزاي يک فرم. از اين به بعد ما با تگ

<input name=" " type=" ">

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

در مدل اول ازاين تگ استفاده ميکنيم:

<input name="textfield 01" type="text”>

دقت کنيد که کلمه text بايد در جلوي خصوصيت type=" "بيايد تا مرورگر بفهمد چه اجزائي از يک فرم را نمايش ميدهد. توسط خصوصيت size=" " که با عدد مقدار دهي ميکنيد اندازه نمايش اين کادر خطي در مرورگر را کنترل ميکنيد و توسطmaxlength=" " حداکثر تعداد حروفي را که بيننده مجاز هست تا وارد کند را کنترل ميکنيد.

Textfield :

اگر قرار باشد که بيننده داخل اين کادر خطي ، کلمه رمز را وارد کند پس بجاي خصوصيت type=”text” بايد از type=”password” استفاده کنيد تا هر متني که وارد شود بصورت ستاره در مرورگر نمايش داده شود.

Password :

اما مدل ديگري هست که متنهاي بلند داخل آن نوشته خواهد شد که بايد از تگ<textarea></textarea> استفاده کنيد که جدا از خصوصيت name=" "از خصوصيات cols=" " , rows=" "براي کنترل رديفها و ستونهاي کادر بکار ميبريد.

label

زمانيکه شما اجزاي فرم را اضافه مي کنيد، مي توانيد کنار هر کدام يک متني وارد کنيد تا نام آن قسمت درمرورگر مشخص شود. اما با افزودن تگ <label> کنترل بيشتري روي نام واجزاي يک فرم خواهيد داشت چون مي توانيد توسط اين تگ يکي از اجزاي فرم را احاطه کنيد، بدين صورت:

<label> Name :
<input type="text" name="textfield01">
</label>

که اين کد به صورت زير ظاهر مي شود،

دراين تگ، توسط خصوصيت for مي توانيد مشخص کنيد که label مربوط به کدام قسمت فرم است و در اين حالت نيازي به احاطه کردن اجزاي فرم نيست،

<label for="textfield01"> Name : </label>
<input type="text" name="textfield01">

Tab order

يکي از خصوصيات مفيد تگهاي html بنام tabindex است که کاربرد زيادي در عنصر فرم دارد و به همين خاطر در اين قسمت آنرا توضيح ميدهيم. تاکنون متوجه شده ايد که با زدن دکمه Tab بر روي کيبورد، مکان نما با ترتيب خاصي بر نقاط مختلف صفحه متمرکز مي شود که مي توانيم اين ترتيب حرکت را به کنترل خود در بياوريم. قبول کنيد که حرکت کردن بين اجزاي يک فرم توسط موس مخصوصاً زمانيکه يک فرم طولاني پيش رو داريم، بسيار سخت تر از حرکت با دکمه Tab کيبورد است. با اضافه کردن خصوصيت tabindex به تگهاي يک فرم و مقداردهي اين خصوصيت به ترتيب اعداد مي توانيم تمرکز مکان نما را از يک نقطه به نقطه مورد نظر به کنترل خود در آوريم. دقت کنيد که مقادير اين خصوصيت تکراري نباشد. به کد زير توجه بفرماييد:

<input type="text" name="field1" tabindex="1">
<input type="password" name="pass1" tabindex="2">
<textarea name="area1" cols="10" rows="5" tabindex="3"></textarea>

file field

گاهي اوقات نياز هست که به همراه اطلاعات وارد شده در فرم، فايلي هم ضميمه و به سرور فرستاده شود. براي اين حالت بايد در فرم، تگ <input> را نوشت و خصوصيت type آنرا برابر با کلمه file قرار داد. هنگاميکه اين خصوصيت را وارد مي کنيد، مرورگر بطور اتوماتيک يک کادر متني و يک دکمه براي جستجوي فايل بنام Browse نمايان مي کند. در نظر داشته باشيد که براي اين تگ تنظيمات وب سروربسيار مهم است وگرنه فايل فرستاده شده، خراب خواهد شد و اگر هم فرم قرار است که به ايميل فرستاده شود پس به اين نکات بايد دقت کنيد که در تگ اصلي فرم حتماً enctype="multipart/form-data" را نوشته و در تگ file field هم accept="text/plain" را وارد کنيد که در اين حالت فايلهاي متني txt به درستي فرستاده مي شود. کلاً در بيشتر مواقع و با تنظيمات درست هم ممکن است فايل خراب شود.


استفاده از فريم

فريم چيست؟

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

به مجموعه صفحات گنجانده شده در يک صفحه frameset مي گويند و به هر صفحه از آن يک frame يا يک چارچوب گفته ميشود. در ساختار اصلي کدها، ديگر تگ <body> نوشته نميشود و جاي آن تگ <frameset></frameset> قرارميگيرد، البته هر صفحه يعني هر فريم را که کد نويسي ميکنيد مانند ساختار معمولي است و از تگ <body></body>بايد استفاده کنيد ولي هنگاميکه صفحات را در يک frameset ميگذاريد بايد در ساختار کد آن بجاي <body>از <frameset> استفاده کرد،

<html>
<head>
</head>
<frameset>
</frameset>
</html>

توجه داشته باشيد که براي ديدن source code فريمها بايد بر روي هر فريم کليک راست کرده و گزينه view source را انتخاب کنيد و براي مشاهده کدهاي يک frameset بايد از منو view مرورگر اقدام نماييد.

cols, rows

هر فريم ميتواند عمودي يا افقي در صفحه قرار گيرد يا يک frameset مخلوطي از چند فريم عمودي و افقي باشد که هر کدام از آنها توسط خصوصيتي در تگ<frameset> کنترل ميشوند. به طور مثال اگر دو فريم داشته باشيم و آنها را بخواهيم به صورت عمودي در صفحه قرار دهيم از خصوصيت cols=” “ استفاده ميکنيم و اين خصوصيت را برابر با درصد اشغال هر فريم قرار ميدهيم يعني اگر ما دو فريم داشته باشيم و بخواهيم که يکي از آنها %30 صفحه را اشغال کند پس ديگري %70 را اشغال خواهد کرد و تگ آن بدين صورت ميشود:

<frameset cols=”30%,70%”>

دقت کنيد که اين اعداد با علامت ويرگول از هم جدا ميشوند. اگرهم بخواهيد دو فريم افقي داشته باشيد از خصوصيت rows=” “ استفاده ميکنيد. اما براي قراردادن دو صفحه يا دوفريم درframeset بايد هر کدام از آنها را بطور جداگانه آدرس دهي کنيد و تگ آن براي هر کدام از فريمها به اين صورت است:

<frameset cols=”50%,50%”>
<frame src=”01.htm”>
<frame src=”index.html”>
</frameset>

آدرس دهي و نامگذاري

همانطور که ملاحظه ميفرماييد جلوي خصوصيت src=” “بايد آدرس صفحه را بنويسيد. خصوصيت ديگري هم هست که به غير ازخصوصيت src بايد به اين تگ اضافه شود و آن name=” “ است که براي نامگذاري هر فريم بکار ميرود. اين نامگذاري زماني براي ما مفيد است که هرگاه ما بخواهيم دريکي از فريمها لينک بگذاريم هنگاميکه روي لينک کليک ميشود بايد مشخص شود که اطلاعات آن لينک در کدام فريم نمايش داده شود، به طور مثال فريم سمت چپ داراي يکسري لينک است که اطلاعات هر کدام بايد در فريم سمت راست نمايش داده شود پس به لينکها بايد نام فريم مورد نظر را بدهيم تا مشخص شود که اطلاعات را در کدام فريم نشان دهند. اما جدا از نامگذاري هر فريم براي اينکار بايد به هر لينک خصوصيت target=” “ را اضافه کرد و آنرا برابر با نام منتخب هر فريم قرار داد.

<frameset cols="30%,70%">
<frame name="left" src="htmlpages/01.html">
<frame name="right" src="htmlpages/index01.htm">
</frameset>

اگر هم يک لينک در فايل 01.html داشته باشيم و بخواهيم درindex01.htm نمايش داده شود، طبق گفته هاي بالا:

<a href="htmlpages/info.html" target="right"> info.html </a>

frame border

شما اگر يک frameset درست کرده باشيد متوجه يک کادر بين فريمهاي داخل آن شده ايد، براي برداشتن اين کادر ميتوانيد frameborder="no" و يا border=”0” رابه تگ <frameset> اضافه کنيد.

noresize

هنگاميکه frameset در مرورگر نمايش داده شود، بيننده سايت شما ميتواند سايز هر فريم را تغيير دهد يعني وقتي که نشانگر موس را روي لبه هر فريم ببرد ميتواند آنرا با drag کردن کم يا اضافه کند که براي جلوگيري از تغيير سايز هر فريم خصوصيت noresize رابه تگ <frame> بيافزاييد.

scrolling

خصوصيت ديگري هم هست که scroll bar هر فريم را کنترل ميکند، هر فريم داراي scroll ميباشد يعني ميتوانيد صفحه داخل فريم را به چپ وراست يا بالاوپايين حرکت دهيد که با خصوصيت scrolling=” “ کنترل ميشود و آنرا برابر با کلمات Yes,no,auto قرار دهيد.

noframes

بعضي از مرورگرها هستند که از اين عنصر پشتيباني نمي کنند و فريم ها را نشان نمي دهند، به همين دليل شما مجبور هستيد تا به کاربراني که از اين گونه مرورگرها استفاده مي کنند، اعلام کنيد که مرورگر آنها اين قابليت را ندارد. پس فراموش نکنيد که اين قطعه کد را هميشه به frameset اضافه کنيد:

<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>


ثبت سايت در گوگل

طرح ساخت اين سايت توسط دو دانشجو بنامهاي Larry Page و Sergey Brin در يکي از خوابگاههاي دانشگاه استانفورد پي ريزي شد و بعد از مدتي به بزرگترين و محبوبترين موتور جستجو ( search engine ) در دنيا تبديل شد که در حال حاضر بيش از هشت ميليارد صفحه وب را در پايگاه داده اي ( database ) خود جمع آوري کرده که توسط يک الگوريتم منحصر بفرد و با سرعت بسيار بالا خدمات جستجو را براي کاربران انجام ميدهد تمام اين فرآيندها داخل يک شبکه با بيش از هزار کامپيوتر انجام ميشود. البته اين سايت به غير از جستجو، خدمات ديگري هم انجام ميدهد که ميتوانيد به آدرس www.google.com مراجعه کنيد.

ثبت سايت در Google

يکي از راههاي بالا بردن ترافيک يک سايت، ثبت آن در گوگل ميباشد که براي اينکار شما ميتوانيد به آدرس www.google.com/addurl.html مراجعه و سايت خود را ثبت کنيد. دقت کنيد که داخل فرم مخصوص در آن صفحه آدرس کامل سايت را بهمراه پيشوند http:// بايد وارد کنيد و در ضمن نيازي به ثبت همه صفحات نيست و فقط صفحه اصلي يا همان homepage کافي است چون گردشگر گوگل بنام Googlebot بقيه محتواي سايت را از همان صفحه اول پيدا ميکند. پس فراموش نکنيد که صفحه اصلي شما بايد به همه نقاط سايت لينک داشته باشد.

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

رتبه بندي صفحات يک سايت ( Page Ranking )

يکي از نکاتي که خيلي بايد دقت کنيد، رعايت کردن اصول و قوانين گوگل ميباشد تا صفحات سايت شما در رتبه هاي اوليه هنگام جستجو قرار گيرد. پس از يافتن سايت شما توسط Googlebot ، صفحات تجزيه تحليل ميشوند و در يک الگوريتم، رتبه ميگيرند. براي بالا بردن اين رتبه، نکات زير را بايد رعايت کنيد:

نکات لازم در مورد طراحي

  • صفحات سايت بايد داراي لينکهاي منظم باشد تا دسترسي را به کليه نقاط سايت آسان کند.
  • بطور حتم يک صفحه بنام site map ( نقشه سايت ) درست کنيد و کليه لينکهاي سايت را در آن قرار دهيد و اگر بيشتر از صد لينک داريد، بقيه را در يک صفحه ديگر قرار دهيد.
  • داخل هر صفحه از مطالبي استفاده کنيد که با عنوان صفحه و کلمات کليدي( keywords ) مرتبط باشد.
  • کلمات کليدي را که در متاتگ مشخص کرده ايد بايد در همان صفحه بکار برده شود.
  • بطور حتم از نشان دادن کلمات کليدي، بصورت متن استفاده کنيد بجاي بکار بردن تصوير.
  • در خصوصيت alt تگها از توضيحات مرتبط با عنوان صفحه و محتواي صفحه استفاده کنيد.
  • اصول بکار بردن صحيح کدهايHTML را رعايت کنيد.
  • صفحات پويا ( dynamic pages ) يعني صفحاتيکه در آدرس آنها علامت ? است، براحتي صفحات معمولي ليست نميشوند.
  • در هر صفحه کمتر از صد لينک بکار بريد .

نکات فني

  • گردشگر گوگل ( Googlebot ) با جاوااسکريپت، کوکي ها، session ID ، DHTML ويا Flash مشکل دارد.
  • از وجود If-Modified-Since HTTP header در وب سرور سايت خود اطمينان حاصل کنيد چون اين ويژگي تغييرات سايت شما را به گردشگرها اعلان ميکند.
  • از فايل متنيrobots.txt در دايرکتوري سايت خود استفاده کنيد و دقت کنيد که از Googlebot crawler در آن فايل جلوگيري نشده باشد.
  • با متخصصين سرور مشورت کنيد تا از نرم افزارهاييکه از فعاليت گردشگرها جلوگيري ميکند، استفاده نشود.

پس از رعايت کردن اين نکات به آدرس http://www.google.com/addurl.html مراجعه کنيد و سايت خود را در آن ثبت کنيد.

نکات ديگري هم هست که توسط متخصصان سايت گوگل توصيه ميشود،

  • صفحات را براي استفاده کاربر بسازيد نه براي موتورهاي جستجو.
  • از حقه هايي براي بالا بردن رتبه سايت دوري کنيد.
  • از گذاشتن لينک سايتهايي که در رتبه بندي شما اثر منفي دارند بپرهيزيد، مانند سايتهايي که روي اصول طراحي نشده اند و يا فعاليتهاي غيرقانوني انجام ميدهند مثل web spammer ها.
  • از بکارگرفتن برنامه هايي که بصورت غيرقانوني سايت شما را ثبت و رتبه آنرا بالا ميبرند دوري کنيد مانند برنامه WebPosition Gold .
  • از لينکها يا متنهاي پنهان استفاده نکنيد.
  • صفحات را با متنهاي بيربط پر نکنيد.
  • از بکار بردن متنهاي تکراري يا تکرار صفحات با يک مضمون پرهيز کنيد.
  • براي يافتن سريعترسايت شما، لينک خود را در سايتهاي معروف قرار دهيد.

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


Html Head

تگهای قسمت Head

<!doctype>

در اين بخش ميخواهم در مورد تگهاي قسمت <head> برايتان توضيح دهم . همانطور که ميدانيد تگهاي Html را به دو بخش اصلي تقسيم کرديم ، يکي قسمت سر يا همان head ديگري قسمت بدنه يا body که هر دو مابين دو تگ اصلي<html></html> نوشته ميشوند، اما يک تگ هم وجود دارد که خارج از اين قانون عمل ميکند و در اولين خط شروع کدنويسي بايد آنرا بنويسيم يعني قبل از تگ آغاز کننده <html>و آن DTD يک صفحه وب ميباشد که مخفف Document Type Definition است و کار آن معرفي نوع تگها خصوصيات آنها و قوانيني که بايد در آن صفحه وب بکار برده شود که بطور خلاصه در تگ مربوط به آن توصيف ميشود. تگ مشخصه DTD ، <!doctype> ميباشد و مانند بقيه تگها داراي خصوصياتي هست، البته اين تگ اختياري است چون بعضي از مرورگرها بدون آن هم صفحه را نمايش ميدهند ولي بهتر است که نوشته شود.

هر نسخه از HTML يک DTD مخصوص به خود را دارد و نسخه هاي معتبر HTML عبارتند از: 2, 3.2, 4 و نسخه جديد آن Html 4.01 ميباشد و اگر از کدهاي XHTML هم استفاده ميکنيد ، آنرا هم بايد مشخص کنيد. همانطور که در بخشهاي قبل گفتم اعلام و به رسميت شناختن تگهاو نسخه هاي HTML , XHTML به عهده W3C ميباشد .

DTD براي HTML 4.0

<!DOCTYPE html public "-//w3c//DTD HTML 4.0//en">

و براي XHTML 1.0

<!DOCTYPE xhtml public "-//w3c//DTD XHTML 1.0 strict//en">

بعد از اين تگ روال معمول کدنويسي را انجام ميدهيم. حالا ميپردازيم به تگهاي مربوط به قسمت سر يا همان head .

<head></head>

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

تگهاي لازم براي اين قسمت به شرح زير ميباشند:

<title>, <base>, <meta>, <link>, <script>, <style>

<title></title>

بين اين دو تگ هر چي نوشته شود در نوار عنوان مرورگر title bar نمايان خواهد شد. دقت داشته باشيد که از اسامي کوتاه استفاده کنيد چون جمله طولاني را نصفه نشان ميدهد و همچنين اگر فارسي بنويسيد در سيستمهايي که قابليت فارسي ندارند به صورت علامت سوال نمايان ميشود.

<base>

در مواردي که بخواهيد آدرس اصلي وب سايت را همان ابتدا معرفي کنيد ، از اين تگ استفاده ميکنيد. خاصيت اين تگ اينست که در هنگام درست کردن لينکهاي داخلي وب سايت ديگر نيازي به نوشتن آدرس کامل نيست و فقط ميتوانيد در خصوصيت href=" " لينکها، اسم دايرکتوري در صورت نياز و اسم خود فايل را بنويسيد.

<base href="http://www.sitename.com">

دقت کنيد که نوشتن پروتکل http اجباري است.

<meta>

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

http-equiv=" ", name=" " , content=" "

براي معرفي کلمات کليدي سايت بايد خصوصيت http-equiv="keyword" قرار دهيم و کلمات مورد نظر را در خصوصيت content=" " وارد کنيم،

<meta http-equiv="keyword" content="html, web, amoozesh, amouzesh">

همچنين ميتوانيد نوع رمزگذاري encoding مرورگر را در اين قسمت معين کنيد که براي بکار بردن حروف فارسي بايد از utf-8 استفاده کنيد که در قسمت فارسي نويسي توضيح خواهم داد.

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

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

<meta name="author" content="your-name">

اگر شما نميخواهيد که صفحه اي در هارد ديسک کاربر سايت شما ذخيره شود تا بتوان آنرا بصورت offline هم ببينند، از اين تگ بايد استفاده کنيد:

<meta name="pragma" content="no-cache">

يا اينکه آن صفحه هر لحظه اطلاعاتش عوض ميشود و ميخواهيد تا بيننده سريع آن اطلاعات را ببيند، از خاصيت refresh مرورگر استفاده کرده و اين تگ را اضافه ميکنيد:

<meta http-equiv="refresh" content="5">

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

<meta http-equiv="refresh" content="5;url=http://www.sitename.com/page01.htm">

<link>

اين تگ براي زماني است که ما بخواهيم از اطلاعات يک فايل مانند style sheet در آن صفحه استفاده کنيم،

<link rel="stylesheet" href="stylesheets_folder/menu.css">

<script>

کدهايي مانند javascript را در اين تگ کنترل ميکنيم که در بخش جاوا اسکريپت توضيح خواهم داد.

<style>

تگ مشخصه Style sheet ميباشد که در بخش مربوطه توضيح داده شده است.


تاريخچه اچ تی ام ال

تاريخچه Html

HTML توسط Tim Berners-Lee در خلال دهه 90 ميلادي همراه با گسترش وب، شکوفا شد. اين زبان توسط مرورگر Mosaic معروفيت خاصي پيدا کرد. در آن زمان HTML در چند مدل منتشر مي شد که آن بستگي داشت به سازنده فايل و انجمنهايي که در زمينه وب فعاليت داشتند.

در نوامبر 1995 نسخه HTML 2.0 گسترش يافت و بلافاصله در همان سال HTML 3.0 منتشر شد، ولي استقبالي از آن نشد. در سال 1996 انجمن W3C شروع به فعاليت بر روي نسخه اين زبان کرد که حاصل کار آنها در 14 ژانويه 1997 انتشار HTML 3.02 بود. اين نسخه توانست رضايت اکثريت را جلب کند چون هماهنگي بيشتري با مرورگرهاي مختلف در سيستمهاي عامل متفاوت داشت. در تمام نسخه هاي اين زبان ، سعي بر اين شده بود تا نظر کساني که در زمينه وب سرمايه گذاري کرده بودند جلب شود و برنامه هاي توليد شده براي وب بتوانند مدت طولاني تري قابل استفاده باشند. به همين منظور HTML براي اهداف گسترده تري ، در وب توسعه يافت تا در کليه سيستمهاي اطلاع رساني و الکترونيکي کوچک و بزرگ با بکار بردن گرافيک و رنگها، قابليت بهره برداري بيشتري داشته باشد.

در 18 دسامبر 1997 نسخه HTML 4.0 در وب منتشر شد و در همين بين شرکتهاي توليد کننده مرورگر وب يکسري مشخصات منحصر بخود را به اين نسخه اضافه کردند که قابل اجرا در مرورگرهاي ديگر نبود. بعضي از اين تغييرات در W3C مورد تاييد قرار گرفت اما بعضي ديگر نه. با تغييرات HTML مرورگرها مجبور به تغيير شدند تا با تحولات جديد سازگار شوند.

در تاريخ 24 آوريل 1998 در اين نسخه تجديد نظر شد و حاصل آن پيدايش HTML 4.01 بود که با کمي تغيير و رفع يکسري مشکلات، در W3C برسميت شناخته شد و اين انجمن استفاده از آنرا به توسعه دهندگان و طراحان وب ، توصيه کرد.

بطور کل مجموعه HTML 4 با قابليت استفاده از embeded objects, frames, scripting, style sheets و با کارآيي بالاتر جدولها و فرمها به وب معرفي شد، همچنين در اين نسخه توجه زيادي به افراد با توانايي کم شده بود تا اين افراد هم بتوانند از محيط وب استفاده کنند. اما مهمترين قدمي که در اين نسخه برداشته شد، پشتيباني HTML از زبانهايي بود که از راست به چپ نوشته ميشدند مانند زبان فارسي، که در اين نسخه با پذيرفتن استاندارد ISO 10646 به هدف بزرگ بين المللي شدن اين زبان نزديک شدند تا همه مردم دنيا در هر کجا و با هر زباني بتوانند اسناد HTML را منتقل کنند.

HTML 4.01 تفاوت کمي با نسخه اصلي خود يعني 4.0 دارد اما در عوض هماهنگي بيشتري با نسل جديد زبان وب يعني XHTML و نسل بعدي يعني XML دارد. در اصل XHTML اساس و مقدمه XML است که براي هماهنگي و سازگاري HTML با XML منتشر شده است.

HTML 4 زبان بسيار قوي است براي طراحان و سازندگان محصولات وب اما در آن توجهي به دستگاههاي اطلاع رساني و الکترونيکي کوچک با قدرت و حافظه کمتر نشده است. به همين منظورW3C در 26 ژانويه 2000 اقدام به معرفي XHTML 1.0 کرد و در 19 دسامبر همان سال آنرا به رسميت شناخت و تاکيد به استفاده از اين نسخه کرد تا با بکارگيري ويژگيهايي که دارد دامنه استفاده از زبان محبوب HTML را گسترش دهد و مقدمات معرفي XML را فراهم کند.


HTML 4.01

Html 4.01 و تفاوتهاي آن با نسخه 4.0

HTML 4.01 نسخه اصلاح شده 4.0 ميباشد که براي هماهنگي با نسخه جديد يعنيXHTML و نسل بعدي زبان وب که XML باشد، در وب منتشر شد. اين نسخه با تغييرات کمي عرضه شد اما شما مجبور هستيد که اين قوانين را رعايت کنيد اگر ميخواهيد وب سايت شما هماهنگي بيشتري با نسخه جديد داشته باشد. بعضي از اين تغييرات را در اين بخش برايتان ميگويم ولي نکات اساسي در اين زمينه را در بخش XHTML خواهم گفت. بهتر است که شما بعد از فراگيري مجموعه HTML 4 قوانين بکار برده شده در XHTML را رعايت کنيد تا در آينده وب سايت شما به مشکل جدي برنخورد.استفاده يکسري تگها از طرف انجمن W3C ديگر توصيه نميشود وحتي بعضي از آنها ممنوع شدند.

براي شروع کدنويسي در HTML 4.01 اولين چيزيکه بايد رعايت کنيد DTD آن فايل است که در حال حاضر مرورگر ها بدون آن هم صفحه را نمايش ميدهند ولي در آينده ممکن است اينچنين نباشد. همانطور که ميدانيد DTD بايد قبل ازتگ <HTML> نوشته شود. براي اين نسخه سه مدل در نظر گرفته شده است که در مدل اول صفحه شما فقط از تگهاي استاندارد و قابل قبول استفاده خواهد کرد:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

اگر در آن صفحه تگهاي از رده خارج هم بکار برده ايد بايد از اين مدل DTD استفاده کنيد:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

همچنين اگر از عنصر Frame استفاده ميکنيد اين مدل را بکار بريد:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

بعد از مشخص کردن DTD آن صفحه بايد دقت کنيد که در اين نسخه بايد کليه تگها ، پايان دهنده داشته باشند. بعضي از تگها يا تگ پايان دهنده نداشتند و يا نوشتن آنها اجباري نبود مانند <img>,<p> . اما همه بايد بسته شوند و آنهاييکه تگ پايان دهنده نداشتند، در همان تگ و قبل از بستن تگ با علامت > بايد علامت slash يعني/ را بگذارند. مانند:

<img src="…/images/mypic.gif"/>

اين قبيل تگها را بدين صورت بکار بريد:

<meta/>, <br/>, <blockquote/>, <hr/>, <basefont/>, <Q/>, <li/>, <dt/>, <dd/>, <img/>, <area/>, <frame/>, <input/>, <param/>, <bgsound/>

نکته: اگر تگ <a> در حالت Anchor بود يعني حالتيکه لينک به يکي از نقاط داخل همان صفحه پيوند داده خواهد شد، بايد آنرا بصورت <a/> بنويسيد.

اينها قوانيني بودند که در اين نسخه تغيير کردند تا اين نسخه با XHTML سازگار شود.


Iframe

نحوه ساخت iframe

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

<iframe src="page.html"></iframe>

است که شما اين تگ را در هر قسمت از کد html مي توانيد بگذاريد و نيازي به تگ <frameset> نيست. کليه خصوصياتي را که براي فريم بکار مي رود براي iframe هم کاربرد دارد و فقط width=" " و height=" " هم به آن ميتوانيد اضافه کنيد تا ابعاد iframe را کنترل کنيد. فراموش نکنيد که از name=" " استفاده کنيد تا نام آنرا براي ساختن لينک بکار بريد.

شما در يک صفحه مي توانيد چندين iframe داشته باشيد البته ناگفته نماند که اين عنصر در مرورگرهاي قديمي به غير از اينترنت اکسپلورر نمايش داده نمي شود.


نقشه تصویری

ساخت نقشه تصويری ( image map )

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

خب حالا عکس مورد نظر را با استفاده از تگ <img>درصفحه قراردهيد، سپس خصوصيت usemap=" " را به تگ اضافه کنيد که آنرا برابربا يک اسم واحد بايد قرار دهيم تا از آن اسم در جاي ديگر استفاده شود. اين خصوصيت به مرورگر ميفهماند که عکس را بصورت Image map ميخواهيم بکار بريم.

<img src="images/mypic.gif" usemap="#map01">

به علامت # دقت کنيد که بايد نوشته شود. در حال حاضر عکس آماده است و بايد تگهاي نقشه را وارد کنيم.ابتدا تگ <map name="map01"> وارد ميکنيم تا مرورگر بفهمد که نقشه آغاز شده و با استفاده از خصوصيتname=" " مشخص ميشود که چه عکسي قرار است اين خاصيت را داشته باشد. حالا نوبت به تعيين قسمتهاي مختلف عکس رسيده که هر قسمت در چه اندازه اي و به کجا بايد لينک شود. اين قسمتها ميتوانند اشکال هندسي نظيردايره، چهارگوش وچند ضلعي باشند. اين اطلاعات در تگ <area> مشخص ميشوند، اين تگ داراي سه خصوصيت ميباشد:

Shape=" " مشخص ميکند که هر قسمت داراي چه شکل هندسي ميباشد. اگر چهارگوش rectangle باشد آنرا برابر با "rect" قرار ميدهيم، اگر دايره circle بخواهيم برابر با "circle" و اگر چند ضلعي polygon بخواهيم برابر با "poly" قرار ميدهيم.

Coords=" "اين خصوصيت، مختصات نقاط تشکيل دهنده شکلها را مشخص ميکند که مختصات هر نقطه بر اساس محور x, y در مقياس پيکسل ميباشد. براي تشکيل يک لينک به شکل چهارگوش بايد مختصات دو نقطه گوشه چپ طرف بالاوگوشه راست طرف پايين آنرا بدست بياوريم ، چون هر نقطه داراي دو مختصات ميباشد يکي بر روي محور xها و ديگري yها پس چهار عدد بايد بنويسيم و هر عدد را با علامت کاما جدا کنيم.

Coords="10,10,65,65"

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

href=" " که در اين قسمت آدرس صفحه يا سايت مورد نظر را وارد ميکنيم.

<img src="images/mypic.gif"
usemap="#map01">
<map name="map01">
<area shape="rect"
coords="25,25,55,50"  href="page.htm">
<area shape="circle"
coords="124,243,40"  href=
"www.yahoo.com">
<area shape="poly"
 coords="22,30,76,90,147,199,289,270,140,111,44,67"
 href="pages/first.html">
</map>

خب سوالي که حالا پيش ميايد، اينست که مختصات اين نقاط را چگونه پيدا کنيم؟ دو راه براي آن وجود دارد، يکي استفاده از برنامه هاي مختلف مانند Photoshop و ديگري که برايتان توضيح خواهم داد بدون استفاده از برنامه جانبي است و داخل همان صفحه ، با کمک مرورگر اينترنت اکسپلورراست. بعد از اينکه يک عکس را در صفحه قرار داديم و مراحل تشکيل Image map را انجام داديم يک تگ و يک خصوصيت به اين کدها اضافه ميکنيم و آنچه را که ميخواهيم براحتي بدست مياوريم. ابتدا تگ مخصوص لينک را قبل از<img> قرار ميدهيم تا عکس ما بصورت يک لينک ظاهر شود و سپس خصوصيت ismap را به تگ<img>اضافه ميکنيم و فايل را ذخيره ميکنيم. حالا آنرا باز کرده و همانطور که موس را روي عکس حرکت ميدهيد يک نگاه به نوار وضعيت status bar مرورگر در پايين بياندازيد، اعدادي را که مشاهده ميکنيد مختصات نقاط ميباشند.

<a href=" # "><img src="image.gif" usemap="#newmap" ismap>
<map name="newmap">
</map>
</a>

فراموش نکنيد که بعد از پيدا کردن مختصات نقاط، تمام مراحلي را که اضافه کرديد دوباره برداريد.


قراردادن عکس در صفحه

قرار دادن عکس در صفحه وب

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

فرمتهاي عکس در وب:

خب بپردازيم به ادامه بحث ، عکسها داراي فرمتهاي زيادي ميباشند ولي فرمتهايي که در وب بکار برده ميشوند، عبارتند از:

.gif (Graphic Interchange Format)

.jpeg (Joint Photographic Experts Group)

.png (Portable Network Graphics)

عکسها با فرمت .gif بيشترين استفاده را در وب دارند و محبوبترين نوع عکس است. اين نوع فرمت 256 رنگ را پشتيباني ميکند و از ويژگيهاي ديگر آن animation, transparency, interlacing است . البته محبوبيت آن بيشتر براي حجم کم آن است.

Transparency به شفافيت يک عکس ميگويند که آنرا پشت نما هم مينامند. اين ويژگي است که يک عکس آنقدر شفاف است که شما ميتوانيد تا تصوير ، متن يا رنگ زير آن عکس را ببينيد.

Interlacing گاهي وقتها شما منتظر ميشويد تا يک عکس به دليل بزرگي اندازه بارگذاري شود بعد آنرا ببينيد اما اگر عکسي اين ويژگي را داشته باشد کم کم عکس کامل خواهد شد يعني خط به خط به عکس اضافه ميشود تا کامل بارگذاري شود.

Animation عکسهاي متحرک را مي گويند وفقط اين فرمت هست که از متحرک سازي عکس حمايت ميکند.

عکسهايي با فرمت .jpeg حدود 16 ميليون رنگ را پشتيباني ميکنند ، نسبت به فرمت .gif از حجم بالاتري برخوردار است ولي کيفيتش بهتر است ، تمام ويژگيهاي gif را دارد به غير از Animation. فرمت .png نسبت به قبليها جديدتر است و مخلوطي از آنهاست يعني کيفيت jpeg و حجم کم gif را دارد.

افزودن عکس به صفحه وب:

مانند همه عناصر داخل صفحه، عنصر عکس هم تگ خاص خودش را دارد که آن تگ <img>و پايان دهنده هم ندارد. اما براي مشخص کردن فايل عکس و آدرس دهي آن بايد از خصوصيت src=" " داخل تگ استفاده کنيم که اگر يک عکس داخل دايرکتوري وب سايت خودتان باشد ديگر نيازي به آدرس کامل نيست و فقط اسم دايرکتوري و اسم فايل با پسوند مشخصه آن عکس نوشته ميشود ولي اگر ميخواهيد که عکسي را از وب سايت ديگري در صفحه خود بگذاريد بايد آدرس آن وب سايت و دايرکتوري که عکس در آن قرار گرفته و اسم کامل آن فايل را بنويسيد مانند:

<img src="images/pic01.gif">

<img src="www.sitename.com/images/pic01.gif">

Height, Width

اين تگ خصوصيات ديگري هم دارد، يکي از آنها که کاربرد زيادي هم دارد خصوصيات طول height و عرض width ميباشد که توسط آنها اندازه يک عکس را داخل صفحه ميتوانيد کنترل کنيد. مقياس اندازه گيري طول و عرض بر حسب پيکسل Pixel ميباشد، اگر شما اين خصوصيات را کنترل نکنيد عکس در اندازه اصلي خود ظاهر ميشود. بطور مثال شما ميخواهيد عکسي را وارد کنيد که در صفحه بايد به اندازه 100×100 فضا اشغال کند:

<img src="images/pic01.gif" height="100" width="100">

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

Alignment

شما ميتوانيد محل قرارگرفتن عکس را نسبت به عناصر اطراف خودش با خصوصيت align=" "تعيين کنيد و ميتوانيد کلمات left,right,top,middle,bottom را براي اين خصوصيت بکار بريد. بر فرض ميخواهيد که يک متن بعد از عکس و در وسط قرار گيرد:

<img src="images/pic01.gif" align="middle"> This is a text

در ضمن اگر ميخواهيد خود عکس در وسط صفحه قرارگيرد بايد از تگ<center> قبل از تگ <img> استفاده کنيد و بعد از آن </center> را بنويسيد:

<center><img src="pic01.gif"></center>

Border

اگر مايل هستيد براي عکس کادر بگذاريد ميتوانيد از خصوصيت border=" " استفاده کنيد و آنرا برابر با يک عدد قرار دهيد که هر چه اين عدد بزرگتر باشد ، کادر دور عکس هم ضخيم تر است به صورت پيش فرض border="0" است يعني هيچ کادري مشاهده نميشود.

Alt

تا حالا متوجه شديد که در يک وب سايت هنگاميکه نشانگر موس بر روي يک عکس که قرار ميگيرد يک کادر متني کوچک باز شده بنام tooltip و اطلاعاتي را راجع به آن عکس ميدهد؟ پس شما هم اينکار را انجام دهيد، خصوصيت alt=" " را داخل تگ گذاشته و هر متني را که جلويش بنويسيد در صفحه هنگاميکه موس بر روي عکس قرار گيرد ، زيرنشانگر نمايان ميشود. بهتر است که شما هميشه اين کار را انجام دهيد چون مرورگرهايي وجود دارد که عکس را نمايش نميدهد پس با اينکار بيننده از حضور آن عکس خبر دار ميشود.

hspace, vspace

دو خصوصيت ديگر هست که حاشيه و فضاي خالي دور عکس را کنترل می کند، hspace=" "براي حاشيه چپ و راست عکس وvspace=" " براي بالا و پايين. عددي را که وارد ميکنيد در مقياس پيکسل است.

Image link

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

<a href="www.sitename.com"><img src="images/sitelogo.gif"></a>

در ضمن ميشود براي قسمتهاي مختلف يک عکس لينکهايي به جاهاي مختلف درست کرد. به فرض مثال ما يک عکس از نقشه ايران داريم و ميخواهيم که روي هر استان کليک شود ، آن قسمت لينک شود به صفحه مورد نظر. اين حالت را Image map مي گويند که در بخش بعد آنرا توضيح خواهم داد.


ساختن لينک

طرز ساختن لينک ها

لينک چيست؟

لينکها يا همان نقاط پيوند صفحات هم، يک نوع متن به حساب مي آيند، فقط تنها فرقي که بين آنها وجود دارد در اين است که هنگاميکه با موس بر روي آنها ميرويم نشانگر موس شکل دست به خود گرفته تا ما بر روي آن کليک کنيم، البته در بيشتر مواقع رنگ آن هم با متن هاي معمولي فرق دارد. پس از کليک کردن روي لينکها، ما به صفحات ديگر يا حتي به سايتي ديگر هدايت ميشويم. تگ مخصوص لينک <a></a> ميباشد که با خصوصيت href آدرس دهي ميشود که آن لينک به کجا وصل خواهد شد. به طور مثال اگر ما بخواهيم يک لينک درست کنيم که به سايت yahoo متصل شود بدين صورت عمل ميکنيم،

<a href="www.yahoo.com">Yahoo website</a>

که در مرورگر لينک زير ظاهر ميشود و ما را به سمت سايت ياهو حرکت ميدهد دقت کنيد فقط متني که مابين دو تگ آغاز کننده يعني <a href=" ">و تگ پايان دهنده </a> نوشته شود در مرورگر به شکل لينک ظاهر ميشود و قابل کليک است

Yahoo website

همانطور که مشاهده ميکنيد به صورت پيش فرض رنگ لينکها آبي بوده و زير آنها خط کشيده ميشود که در بخش Style Sheet شما ياد خواهيد گرفت تا اين خط را برداشته يا رنگ آن را تغيير دهيد. لينکها را مي توان به دو دسته داخلي و خارجي تقسيم کرد، همانطور که از اسمشان پيداست لينکهاي داخلي نقاط پيوند داخل يک صفحه يا صفحات مختلف يک وب سايت ميباشند و لينکهاي خارجي نقاط پيوند بين دو سايت مختلف ميباشند.

Absolute and Relative

لينکهاي داخلي به دو صورت نوشته ميشوند، يا بايد آدرس کامل وب سايت و فايل را نوشت مانند:

<a href="http://www.mysite.com/page01.htm"> Page01 </a>

به اين مدل لينک absolute ميگويند.

و يا اينکه فقط اسم فايل را بنويسيم البته اگر آن فايل داخل يک دايرکتوري است بايد ابتدا اسم آن دايرکتوري را نوشته سپس نام فايل را مينويسيم. به فرض مثال اگر لينک ما قرار است به يک صفحه به اسم Page01.htm در دايرکتوري بنام htmlpages متصل شود مجموعه کدي که بايد نوشته شود بدين صورت است:

<a href="htmlpages/Page01.htm"> Page01 </a>

به اين مدل relative مي گويند.

دقت کنيد دوستان وقتي صفحه اي که قرار است به اين لينک ما پيوند داده شود دردايرکتوري پايين تر از اين صفحه قرار دارد اينگونه عمل ميشود اما اگر لينک ما در صفحه اي قرار دارد که قرار است به يک صفحه در دايرکتوري بالاتر از آن متصل شود مي توانيم به جاي اسم دايرکتوري بالاتر از دو نقطه کنار هم( .. ) استفاده کنيم،

<a href="../page02.htm"> page02 </a>

به طور ساده مي توان گفت که اگر اين صفحه قرار است به صفحه اي داخل دو فولدر تو در تو متصل شود بايد اسم فولدر اول بعد اسم فولدر داخل فولدر اول سپس اسم آن فايل يا صفحه را مينويسيم ولي اگر در آن صفحه بخواهيم يک لينک بگذاريم که به اين صفحه پيوند داده شود جاي فولدر داخلي و فولدر اول ميتوانيم دو نقطه بگذاريم و سپس اسم اين فايل را بنويسيم يعني بدين شکل:

<a href="../../thispage.htm"> this page </a>

target

تگ لينک خصوصيتي دارد که توسط آن مي توانيد محل باز شدن و يا نمايش صفحه اي که مي خواهيد به آن پيوند دهيد را کنترل کند که آن صفحه در همان پنجره يا در يک پنجره جديد باز شود. اين خصوصيت target نام دارد که بايد برابر با يکي از مقادير _blank , _self , _top , _parent قرار گيرد.

target="_blank"
اين مقدار يک پنجره جديد در مرورگر باز کرده و صفحه مربوط به آن لينک را نمايش ميدهد.

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

_parent
صفحه مورد نظر در همان پنجره مرورگر باز خواهد شد ، نه در پنجره جديد.

_top
صفحه مربوط به اين لينک هيچگاه در پنجره اي که فريم دارد باز نخواهد شد.

Anchor

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

<a name="top">

در بين دو علامت " " و به جاي کلمه top هر اسمي ميتوانيد بکار بريد اين نکته را در ذهن داشته باشيد که اين تگ درمرورگر ظاهر نميشود.اما تگ ديگري که نياز است خود کد لينک است وبجاي نوشتن آدرس فايل در خصوصيت href شما نامي را که انتخاب کرديد به اضافه علامت # را مينويسيد:

<a href="#top">top of the page</a>

در مورد لينکهاي خارجي يعني لينکهايي که به سايتهاي ديگر وصل ميشوند بايد از مدل absolute استفاده کنيد و آدرس کامل را بنويسيد:

<a href="http://www.sitename.com/page01.html"> link to another site </a>

نکته: نوشتن پروتکل http:// اجباري نيست و ميتوانيد از نوشتن آن صرف نظر کنيد.

mailto

علاوه بر اين لينکها شما ميتوانيد براي آدرسهاي ايميل هم لينک درست کنيد که تگ آن به صورت زير ميباشد:

<a href="mailto:email_address"> my email </a>

کلمه mailto: به مرورگر ميفهماند که بايد يک ايميل به آدرس بعد از آن فرستاده شود. البته اين لينکها براي بيننده هايي که ايميل هايشان را با برنامه هايي مانند Outlook express چک ميکنند ، مفيد است چون وقتي که روي اين نوع لينک کليک شود برنامه پيش فرض مديريت ايميل در سيستم عامل کاربر باز ميشود پس براي بيننده هايي که آدرس ايميل ياهو دارند اين کد مفيد نيست بهتر است که آدرس کامل ايميل را نوشته و به صورت يک لينک درست کنيد تا براي کليه بينندگان سايت مفيد باشد، مانند مثال زير:

<a href="mailto:my_email@domain.com"> my_email@domain.com </a>

البته شما ميتوانيد حتي موضوع و متن ايميل را تعيين کنيد. اگر قصد همچين کاري را داريد پس بايد بلافاصله بعد ازآدرس ايميل داخل تگ يک علامت سوال اضافه کنيد تا مرورگر بفهمد که اين آدرس ادامه دارد و بعد از علامت سوال کلمه subject= را مينويسيد که اين کلمه نشانگر موضوع ايميل است و هرچيزي که جلوي آن نوشته شود به عنوان موضوع ايميل در برنامه مشخصه نمايان خواهد شد و اگر متن ايميل هم بخواهيد نوشته شود بايد بعد از موضوعي که نوشتيد علامت & را بگذاريد وسپس کلمه body= را که نشانگر متن ايميل است و در جلوي علامت مساوي هر متني را ميتوانيد وارد کنيد. بر فرض مثال ميخواهيد که ايميل با موضوع Test و متن Hello my friends به آدرس ايميل فرستاده شود:

<a href="mailto:my_email@domain.com?subject=Test&body=Hello my friends"> my_email@domain.com </a>

توجه داشته باشيد که اگر ميخواهيد اين کد را امتحان کنيد اول بايد برنامه پيش فرض مديريت ايميل مانند نرم افزار Outlook را براي آدرس ايميل خود تنظيم کنيد.


ساختن ليستها

طرز ساختن ليست ها

ليستها هم جزو عنصر متن در html ميباشند که بخاطر زياد بودن تگهاي متن مجبورم آنها را از هم جدا کنم. سه نوع ليست وجود دارد، يکي ليستهاي با ترکيب منظم (Ordered list) و ليست با ترکيب نا منظم (Unordered list) وديگري ليستهاي توصيفي (Definition list) . شايد اين نوع نامگذاري بخاطر وجود اعداد يا حروف بترتيب در ليست منظم است که در ديگري فقط نقطه هاي توپر هست که ترتيبي را نميتوان براي آنها در نظر گرفت. در هر صورت تگهاي آن به شرح زير ميباشند:

<ol><li></ol>

براي درست کردن ليست در يک صفحه از اين تگها بايد استفاده کنيم، بدين صورت که در آغاز قسمتي که ميخواهيم ليست درست کنيم تگ <ol>را که مخفف ordered list ميباشد را مينويسيم تا مرورگر بفهمد ليست از آنجا شروع ميشود و سپس در ابتداي هر گزينه از ليستمان تگ <li>را اضافه ميکنيم و در انتهاي گزينه ها تگ پايان دهنده </ol>را می نويسيم.

اگر دقت کنيد به صورت پيش فرض اعداد 1,2,3 به ابتداي گزينه هاي ليست مان اضافه ميشود. شما ميتوانيد خصوصيت type را به تگ <ol> اضافه کنيد و آنرا با A, a که به صورت حروف کوچک يا بزرگ انگليسي و يا با I, i که با اعداد رومي است مقدار دهي کنيد. به طور مثال اگر ميخواهيد ترتيب ليست شما با اعداد رومي کوچک باشد بدين صورت تگ را کامل ميکنيد:

<ol type="i">
<li> Item 01
<li> Item 02
<li> Item 03
</ol>

<ul><li></ul>

اين تگ را unordered list مينامند و مانند تگهاي بالا براي درست کردن ليست در يک صفحه ميباشد با اين تفاوت که بجاي حروف و اعداد از دايره يا مربع هاي توپر استفاده ميکند که مانند بالا ميتوانيد از خصوصيت type که با کلمات" disc", "circle", "square" مقدار دهي ميشود استفاده کنيد.

<ul type="disc">
<li> Item 01
<li> Item 02
<li> Item 03
</ul>

شما ميتوانيد براي درست کردن يک ليست که داراي چند گزينه است و هر گزينه هم چند زير مجموعه دارد از مخلوط اين دو نوع ليست استفاده کنيد که به اين حالت Nested list گفته ميشود.

بر فرض مثال ما يک ليست داريم که چهار گزينه دارد و هر کدام از آنها دو رنگ سفيد و سياه دارند:

<ol type="I">
<li> Item 01 <ul type="circle"> <li> Black <li> White </ul>
<li> Item 02 <ul type="circle"> <li> Black <li> White </ul>
<li> Item 03 <ul type="circle"> <li> Black <li> White </ul>
<li> Item 04 <ul type="circle"> <li> Black <li> White </ul>
</ol>

<dl><dt><dd></dl>

آخرين مدل، ليستهاي توصيفي هستند که براي تعريف و توصيف يک کلمه بکار ميروند که کلمه مشخص را با تگ <dt> و توصيف آنرا با <dd> بکار ميبرند.

<dl>
<dt> Html
<dd> HyperText Markup Language.
</dl>


صدا و تصوير در وب

با پيشرفت تکنولوژي در وب و نسخه هاي جديد مرورگرها که توانايي استفاده از مولتي مديا را در اختيار ما مي گذاشتن، انگيزه اي ايجاد شد تا صوت و تصوير هم در صفحات وب گنجانده شوند و سايتها را جذاب تر کنند. در اين صفحه راههاي اضافه کردن فايل صوتي به يک صفحه را مي آموزيد و در صفحه بعد افزودن فايلهاي تصويري را ياد خواهيد گرفت.

اهميت حجم فايل صوتي

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

MIME

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

MIME مخفف Multipurpose Internet Mail Extensions است.

زمانيکه مرورگر با يک MIME ناشناخته مواجه شود، پيغام خطاي "File Not Found" را در صفحه نمايش مي دهد.

فرمتهاي فايلهاي صوتي

WAV يکي از فرمتهاي صوتي که کيفيت بالايي هم دارد و البته حجم زيادي هم اشغال مي کند و در سيستم عامل ويندوز بکار مي رود. نوع MIME اين فرمت برابر است با audio/wav .

AU اين فرمت متعلق به سيستمهاي عامل UNIX, Linux است و خاصيت آن داشتن حجم کم و البته با کيفيت پايين تر، که نوع MIME اين فرمت برابر است با audio/basic .

AIFF اين فرمت هم متعلق به کامپيوترهاي Macintosh است با کيفيت بالا و حجم بسيار بالا. نوع MIME آن برابر است با audio/aiff .

MIDI اين فرمت با فرمتهاي ديگر صوتي تفاوتهايي دارد. در اين فرمت بجاي ذخيره شدن فرکانس صدا، آهنگ صدا يا همان نت هاي موسيقي را ذخيره و پخش مي کند. بزرگترين مزيت آن حجم بسيار پايين و عيب آن، پخش آهنگ بدون گفتار است. نوع MIME اين فرمت audio/midi است.

افزودن فايل صوتي به زمينه صفحه

با اضافه کردن تگ <bgsound> به سورس کد صفحه وب، مي توانيد آهنگ يا صدايي را در زمينه صفحه وارد کنيد تا هنگاميکه بيننده صفحه را باز مي کند آن فايل بدون نياز به برنامه کاربردي ديگري پخش شود. اين تگ در حال حاضر کاربردي ندارد چون فقط مرورگراينترنت اکسپلورر نسخه هاي 5.5 به پايين آنرا پشتيباني مي کنند. اين تگ داراي دو خصوصيت ، src براي آدرس دهي فايل صوتي و loop براي کنترل تکرار دفعات پخش مي باشد.

<bgsound src="mymusic.mid" loop="2">

افزودن فايل صوتي بصورت لينک

يکي ديگر از راههاي اضافه کردن فايل صوتي به صفحه از طريق قرار دادن لينک و تگ <a> است که بيننده با کليک کردن بر روي آن لينک مي تواند هم آن فايل را بر روي هارد ديسک خود ذخيره کند و يا آنرا از همانجا باز کند. البته در مرورگراينترنت اکسپلورر نسخه 6.0 ابتدا پيغامي ظاهر مي شود که اگر دکمه Yes را بزنيد آن فايل توسط خود مرورگر پخش خواهد شد. در تگ لينک بايد از خصوصيت href براي آدرس دهي استفاده کنيد، فقط دقت کنيد که پسوندها را درست بنويسيد.

<a href="musics/mysong.wav"> music file </a>

افزودن فايل صوتي از طريق object

يکي از بهترين راههايي که مي توان فايل صوتي را به صفحه اضافه کرد، از طريق تگ <object> است. يکي از مزايايي که اين تگ دارد اينست که، شما مي توانيد يک متني را بين تگ آغازين و پايان دهنده اضافه کنيد که اگر مرورگر نتوانست آن فايل را بشناسد، نوشته مذکور در صفحه نمايان شود. در اين تگ براي آدرس دهي از خصوصيت data و براي تعيين MIME آن فايل از خصوصيت type استفاده مي شود، همچنين از خصوصيت height, width براي کنترل طول و عرض لوگوي برنامه پخش کننده فايل استفاده کنيد که در صورت لزوم آنها را برابر با عدد صفر قرار دهيد تا لوگو در صفحه ظاهر نشود.

<object data="musics/sound.wav" MIME="audio/wav">
Your browser doesn’t support this audio format.
</object>

نکته: هنگاميکه صفحه داراي اين تگ را باز کنيد يک پيغام هشدار در مورد ActiveX ظاهر خواهد شد که براي اجراي فايل بايد دکمه Yes را بزنيد.

Embed file

تکنيک ديگر براي افزودن يک فايل مولتي مديا به صفحه از طريق تگ embed است. اين تگ استاندارد W3C نيست و در بيشتر مرورگرها اجرا نمي شود. از خصوصيت src براي آدرس دهي فايل و براي کنترل طول و عرض لوگوي برنامه کمکي از خصوصيت height, width مي توانيد استفاده کنيد. اين تگ داراي خصوصيات autostart و loop مي باشد که با کلمات false يا true مقدار دهي مي شوند.

<embed src="godfather.mid" autostart="false"
loop="false" height="40" width="150">

Streaming Audio

احتمالاً متوجه شديد که راههاي ذکر شده در بالا به درستي جواب نمي دهند و به خاطر مشکلات امنيتي ، مرورگرها فايلها را پخش نمي کنند. اما تکنيک ديگري هم هست که کليه مرورگرها از آن پشتيباني کرده و حتي با استفاده از آن مي توانيد فايلهاي سنگين را هم در صفحات بکار بريد بدون آنکه بيننده زمان زيادي را براي دانلود آنها صرف کند. اين تکنيک استفاده از روش Streaming Audio and Video است که در صفحه بعد به آن مي پردازيم.


ادامه صدا و تصوير در وب

صدا و تصوير در وب (ادامه)

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

اما در اين صفحه مي پردازيم به فرمتهاي فايلهاي تصويري و معرفي تکنولوژي که توسط آن بتوانيد فايلهاي صوتي و تصويري با حجم بالا را در وب سايت قرار دهيد.

فرمتهاي فايلهاي تصويري

MPEG اين فرمت مخفف کلمات M otion Picture Experts Group است که در بيشتر سيستمها قابل اجرا مي باشد. نوع MIME اين فرمت video/mpeg است.

AVI اين فرمت متعلق به سيستم عامل ويندوز مي باشد و نوع MIME آن برابر است با video/avi .

QuickTime (MOV) اين فرمت مخصوص سيستم هاي Macintosh مي باشد که اگر مرورگري در سيستمهاي ديگر Plug-in اين فرمت را داشته باشد آنرا پخش خواهد کرد و نوع MIME آن video/quicktime مي باشد.

Advanced Streaming Format (ASF) اين فرمت متعلق به شرکت مايکروسافت است که MIME آن video/asf مي باشد.

Streaming Audio and Video

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

همانطور که مي دانيد يک فايل صوتي يا تصويري سنگين ممکن است چندين ساعت طول بکشد تا دانلود شود، اما براي غلبه بر اين مشکل تکنولوژي streaming audio and video بوجود آمد و در پي آن برنامه هايي نظير RealAudio, QuickTime, Microsoft’s streaming format عرضه شد. اين فرمتها قادر به پخش فايل در هنگام دانلود شدن هستند، بدين ترتيب که مقداري از اينگونه فايلها ابتدا در محلي از حافظه بنام بافر Buffer ذخيره شده و از آنجا پخش مي شود. هنگاميکه آن مقدار در حال اجرا است، مقدار ديگري از فايل در بافر ذخيره و پخش مي شود که به همين ترتيب ادامه پيدا مي کند تا کل فايل بطور کامل دانلود شود. البته اين نوع فرمتها، برنامه کاربردي مخصوص خود را مي خواهند و معروفترين برنامه ها RealOne.Player است که اين محصول فرمت RealAudio يعني ra براي فايل صوتي و RealVideo براي پخش فايلهاي تصويري را پشتيباني مي کند. فرمتهاي ديگر هم مانند ASF متعلق به شرکت مايکروسافت و QuickTime براي سيستمهاي Macintosh از اين تکنولوژي استفاده مي کنند.

شما مي توانيد از برنامه هاي ويرايشگر صوتي مانند Sound Forge و تصويري مانند Adobe Premiere براي تبديل به اين تکنولوژي استفاده کنيد.

اگر مايل هستيد از فرمتهاي Real Audio, Real Video در سايت خود استفاده کنيد بايد به چند نکته توجه کنيد، ابتدا مطمئن شويد که سرور ميزبان سايت شما از اين تکنيک پشتيباني مي کند و در آن يکسري تنظيمات بايد انجام شود، مثلاً براي فرمت Real Audio دو نوع MIME بايد در سرور تعريف شود:

audio/x-pn-realaudio (files with a .ra or .ram file extension)
audio/x-pn-realaudio-plugin (files with a .rpm file extension)

سپس بايد يک برنامه براي تبديل فرمتهاي مختلف به اين فرمت و يک برنامه براي پخش اين نوع فرمت در سيستم خود داشته باشيد که مي توانيد آنها را از وب سايت www.real.com فراهم کنيد و در آخر هم يک فايل بنام متا فايل Meta File بايد درست کنيد براي ذخيره واستفاده از بافر، بدين ترتيب که، ابتدا يک برنامه ويرايشگر متن مانند Notepad را باز کرده وداخل آن آدرس فايل بر روي سايت خود را مي نويسيد، بطور مثال اگر نام فايل realtest.ra است و در دايرکتوري realaudiofile قرار دارد بايد خط زير را وارد کنيد بدون هيچ چيز اضافه،

http://www.yourdomain.com/realaudiofile/realtest.ra

سپس اين فايل متني را با نام دلخواه و با پسوند .ram ذخيره کرده و همراه با فايل صوتي مورد نظر به سرور خود منتقل کنيد. فقط دقت کنيد که براي فراخواني آن فايل بايد يک لينک بسازيد که متا فايل مربوطه را صدا کند نه خود فايل صوتي يا تصويري.

نکته: بيننده سايت بايد برنامه مخصوص پخش اين گونه فرمت را در سيستم خود داشته باشد. اگر MIME به درستي تعريف نشده باشد، فقط متن داخل متا فايل نمايش داده خواهد شد و دقت کنيد تا هنگام منتقل کردن فايلهاي صوتي و تصويري توسط برنامه FTP اگر تنظيمات را به صورت دستي انجام ميدهيد حتماً از گزينه Binary استفاده کنيد.


موتورهای جستجو

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

يکي از اساسي ترين راههاي جذب بيننده، ثبت صفحات سايت در موتورهاي جستجوگر search engines است، چون هر کسي در هر کجا که باشد ميتواند سايت شما را پيدا کند.

موتور جستجوگر چيست؟

در حال حاضر تعداد زيادي سايت جستجوگر مانند، AltaVista, Mama, Yahoo, Google داريم که هر کدام از اينها توسط برنامه هاي گردشگر بنام spider, web crawler, robot مرتب در وب بدنبال صفحات جديد و يا تغييريافته ميگردند و به محض پيدا کردن آنها، اطلاعات مورد نظر را در پايگاه داده ايDatabase خود، ليست ميکنند تا در موقع لزوم و بهنگام جستجو در اختيار کاربران قرار دهند. زمانيکه شما بدنبال يک کلمه کليديkeyword در آن سايتها مي گرديد، اطلاعات پايگاه داده اي آنها را جستجو ميکنيد و سپس نزديکترين مطالب به کلمه کليدي را براي شما نمايان ميکنند که هر چه آن کلمه دقيق تر باشد، شما به مطلب مورد نظر زودتر و راحت تر دسترسي پيدا ميکنيد.

چگونه صفحات در پايگاه داده اي Database ليست ميشود؟

هنگاميکه robot ها و يا يک برنامه گردشگر ديگر بطور اتوماتيک گردش خود را شروع ميکند، به محض يافتن يک سايت جديد در وب ابتدا به سراغ فايلي بنام robots.txt ميگردد، سپس مطالب قسمت HEAD و بدنبال آن اطلاعات نوشته شده در متاتگها را جمع آوري ميکند و پس از يک پردازش دقيق با استفاده از يک الگوريتم مخصوص، صفحات را در پايگاه داده اي خود ذخيره و ليست ميکند.

فايل robots.txt چيست؟

robots.txt يک فايل متني است که اين فايل را ميتوانيد در سرور و در دايرکتوري وب سايت خود قرار دهيد تا تنظيمات گردش برنامه هاي گردشگر را در آن کنترل کنيد و در حقيقت زحمت اين برنامه ها را کم کنيد. اما اطلاعاتي که در اين فايل بايد قرار گيرد الگوي خاصي دارد که در زير به آن اشاره شده و در آن سطح دسترسي گردشگرها را با ذکر نامشان معين ميکنيد،

User-agent:

Disallow:

اين دو خط را در فايل متني وارد و آنرا با پسوند txt ذخيره ميکنيد.

User-agent به برنامه هايي ميگويند که براي وب ساخته ميشوند تا در اختيار کاربران قرار گيرند و گردشگر ها مانند robot ها و crawler ها از اين قبيل هستند و هر سايت جستجو يک گردشگر با اسم مشخص دارد، مانند سايت گوگل که بنام Googlebot معروف است. براي تعيين سطح دسترسي بايد نام برنامه را در خط اول بنويسيد و در خط دوم هم نام فايلها يا دايرکتوري هاييکه نبايد ليست شوند را مينويسيد. اگر بطور کل نميخواهيد سايت شما ليست شود طبق دستور زير عمل ميکنيد:

User-agent: *

Disallow: /

براي اطلاعات بيشتر در مورد robots.txt به سايت www.robotstxt.org مراجعه کنيد.

نقش متاتگها meta tags براي موتورهاي جستجو

شما درباره ساخت متاتگها در بخش HEAD مطالبي را آموختيد. در اين قسمت نقش آنها را در search engine ها ياد خواهيد گرفت. گردشگرها بيشتر به متاتگها حساس هستند تا اطلاعاتي را در اختيارشان قرار دهند. اطلاعاتي را که شما در متاتگها بايد وارد کنيد به شرح زير ميباشند:

  • معرفي کلمات کليدي keywords
  • توصيف Description کوتاهي درباره سايت که در بعضي از سايتهاي جستجو عمل نميکند.
  • معرفي برنامه سازنده سايت که به اسم Generator معروف است.
  • معرفي سازنده و طراح سايت که بنام Author معروف است.
  • مشخص کردن کپي رايت .
  • تعيين تاريخ انقضا صفحات اگر مرتب در حال تغيير هستند.

هر موتور جستجوگر اصول و قوانين خاص خود را براي ليست و ذخيره کردن ( index ) سايت شما و تعيين رتبه آن ( Page Ranking ) دارد که متا تگها در اين مورد نقش اساسي دارند و شما در انتخاب و تعيين آنها بايد بسيار دقت کنيد. بطور مثال بکار بردن کلماتيکه در متا تگها به عنوان keyword انتخاب نموده ايد در متن داخل همان صفحه در رتبه بنديpage ranking صفحه بسيار موثر خواهد بود.

منظور از رتبه بندي( Page Ranking ) چيست؟

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

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


سازمان دهی صفحه توسط جدول

نحوه ساختن جدولها (tables)

تگ جدول

جدولها يکي از بهترين و مفيدترين عنصرها در صفحات وب ميباشند، با استفاده از آنها ما مي توانيم اطلاعات و عناصررا در يک صفحه سازمان دهي و مرتب کنيم . کليه اطلاعات يا عناصر ديگر وب را ميتوانيم داخل رديف ها يا ستون هاي يک جدول قرار دهيم بدون آنکه خطوط جدول مشخص باشد و يا در صورت نياز خطوط آنها نمايان ميشود. کمتر کسي را پيدا ميکنيد که از اين عنصر استفاده نکند و زمانيکه تجربه کافي براي طراحي يک سايت بدست آورديد به اهميت اين عنصر پي خواهيد برد.تگ مشخصه جدول <table></table> ميباشد. اما براي اضافه کردن رديف به يک جدول از<tr></tr>و براي ستون از تگ <td></td> استفاده ميکنيم. پس ساختار کلي يک جدول بدين صورت ميباشد:

<table>
<tr><td>this is a table.</td></tr>
</table>

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

border

خب براي اينکه بتوانيم يک جدول را در مرورگر خود ببينيم بايد با خصوصيت border=" " آشنا شويم. اين خصوصيت دور جدول يک کادردرست ميکند البته اگر اين خصوصيت را برابربا صفر قرار دهيم يا آنرا ننويسيم کادر دور جدول در مرورگر نمايان نخواهد شد و هر چه عدد بزرگتري بگذاريم کادر ضخيم تري خواهيم داشت، در ضمن رنگ کادرهم با bordercolor=" " که برابر با عدد هگز رنگ است تعيين ميشود. border ويژگيهاي ديگري هم دارد، به طور مثال شما ميتوانيد خصوصيت frame=" " را به تگ <table> اضافه کرده و آنرا برابر با يکي از کلمات void, above, below, hsides, vsides,lhs, rhs, box قرار دهيد تا کادر دور جدول را کنترل کنيد. اين کلمات هر کدام يک قسمت از کادر را نمايان ميکنند.

rule

ويژگي ديگري هم هست ولي بهتره اول يک جدول درست کنيد تا مطلب جا بيافتد، برنامه Notepad را باز کنيد و کد زير را وارد کرده و به اسم Table.htm ذخيره کنيد:

<table border="4" bordercolor="#ff0000">
<tr>
<td>cell 01</td><td>cell 02</td>
</tr>
<tr>
<td>cell 03</td><td>cell 04</td>
</tr>
</table>

حالا خصوصيت rules=" "را به تگ<table> اضافه کنيد و هر بار يکي از کلمات all, none, groups, rows, cols را جلوي آن قرار دهيد و فايل را دوباره ذخيره کنيد تا تاثير اين خصوصيت را ببينيد.

Alignment

ميتوانيد با استفاده از خصوصيت align=" "که در تگ <td>مينويسيد محل قرارگرفتن يک عنصر مانند متن را تعيين کنيد که ميتوانيد اين خصوصيت را با کلمات left, right, center, justify مقداردهي کنيد.

height, width

با خصوصيات height=" " , width=" " هم اندازه طول و عرض يک جدول را ميتوان کنترل کرد که بايد آنها را برابر با عدد در مقياس پيکسل قرار دهيد در ضمن شما ميتوانيد از درصد % هم استفاده کنيد مانند width="90%" که اين جدول نود درصد عرض يک صفحه را اشغال ميکند.

bgcolor

براي تعيين رنگ زمينه يک جدول ازbgcolor=" " که با عدد هگز رنگها مقدار دهي ميشود استفاده ميکنيم. اين خصوصيت را در تگ هاي <tr> و <td> هم مي توانيد بکار بريد.

cellspacing, cellpadding

تگ <table> دو خصوصيت ديگر هم دارد که شما با بکار بردن آنها ميتوانيد فاصله بين خانه هاي جدول را از هم کنترل کنيد يعني فضاي خالي بين خانه ها اضافه کنيد، اين خصوصيت اين است cellspacing=" "و ديگري فاصله بين متن داخل يک خانه در جدول با لبه هاي چارچوب آن خانه است که خصوصيت cellpadding=" " اين وظيفه را به عهده دارد. هرچه مقداردهي عددي آنها بزرگتر باشد فاصله ها بيشتر خواهد بود.

header: <th></th>

حالا که با درست کردن رديف و ستون در جدول آشنا شديد، ميتوانيد براي هر ستون و رديف عنوان گذاري کنيد و يک تيتر به بالاي ستون يا به ابتداي يک رديف اضافه کنيد. در هر قسمت که شما به يک تيتر و عنوان نياز داشتيد بجاي تگ <td></td> از تگ <th></th> استفاده کنيد که در اين حالت متن نوشته شده در آن خانه بصورت ضخيم ظاهر شده و از بقيه متمايز ميشود.

colspan, rowspan

گاهي اوقات شما نياز داريد تا چند خانه در يک رديف يا يک ستون از جدول را ترکيب کنيد تا يک خانه درست شود و بطور مثال يک تيتر و عنوان در آن قرار دهيد که براي ترکيب خانه هاي يک ستون از خصوصيت rowspan=" " و براي يک رديف از colspan=" " در تگ <td> استفاده ميکنيد و مقدار آنرا برابر با تعداد خانه هايي که بايد يکي شوند، قرار ميدهيد.

caption

بطور معمول هر جدول داراي يک اسم و يا يک توضيح ميباشد که آنرا با تگ <caption></caption> در ميان تگهاي <table></table> مشخص ميکنند. اين تگ داراي خصوصيت align=" " ميباشد با کلمات top, bottom, left, center, right مقداردهي ميشود.

thead, tbody, tfoot

اگر جدول شما داراي ستونها و رديفهاي زيادي است پس تکرار خصوصيات در هر تگ مربوطه بسيار دشوار است. شما ميتوانيد بصورت گروهي اين خصوصيات را کنترل کنيد. براي کنترل رديفها بايد آنها را به سه قسمت تقسيم کرد، قسمت سرشامل فقط خانه هاي رديف اول، بدنه شامل همه رديفهاي وسط و قسمت انتهايي شامل فقط خانه هاي آخرين رديف، که قسمت سر را با <thead></thead> ، قسمت بدنه را با <tbody></tbody> و قسمت انتهايي را با <tfoot></tfoot> کنترل ميکنيم. اين تگ داراي خصوصيت align نيز ميباشد.

colgroup

همچنين با تگ <colgroup></colgroup> ميتوانيد خصوصيات کليه ستونهاي يک جدول را کنترل کنيد که اين تگ علاوه بر خصوصيات گفته شده در اين بخش داراي خصوصيت span=" " نيز ميباشد که توسط آن تعداد ستونهايي که بايد کنترل شوند را تعيين ميکنيد.

summery

يک خصوصيت ديگر نيز براي تگ <table> هست بنام summery=" " که توصيفي از جدول ميباشد ولي در جايي نمايش داده نميشود. اين خصوصيت براي مرورگرهايي که فقط متن را نمايش ميدهند و يا مرورگرهاي مخصوص افراد ناتوان ، مفيد ميباشد که بهتر است از آن استفاده کنيد.

به اين موضوع هم توجه داشته باشيد که شما ميتوانيد داخل يک جدول، جدول ديگري هم درست کنيد يعني داخل هرخانه جداگانه يک جدول بسازيد که به اين روشNested table گفته ميشود.


راه اندازی سايت

upload و راه اندازي سايت

بعد از آماده کردن صفحات سايت و رفع ايراد آنها حالا نوبت به راه اندازي و برپايي وب سايتتان رسيده است. براي اينکار نياز به يک فضاي امن در يک سرور داريد. سرور، يک کامپيوتر متصل به اينترنت است که محتواي وب سايت شما بر روي هارد ديسک آن قرار خواهد گرفت که به اين عمل web hosting يا ميزباني وب ميگويند. يکبار تنظيمات اوليه توسط متخصصان انجام ميشود و از آن به بعد تمام کسانيکه به اينترنت دسترسي دارند ميتوانند سايت شما را هم ببينند. شما بايد فايلهاي خود را بر روي سرور upload کنيد، يعني اطلاعات را از کامپيوتر خود به کامپيوتر اصلي بفرستيد. Upload بر عکس اصطلاح download است که در دانلود اطلاعات را از کامپيوتر ديگري جمع آوري کرده و در کامپيوتر خود ذخيره مي کنيد.

پيدا کردن سرور مناسب

براي upload کردن صفحات نياز به يافتن يک فضاي مناسب با امنيت بالا داريد. بطور معمول شرکتهاي سرويس دهنده اينترنت (ISP) اين فضا را به شما اجاره خواهند داد. براي برپايي يک سايت معمولي نياز به 5 الي20 مگابايت فضا داريد. سايتهايي هم هستند که اين فضا را بطور رايگان دراختيار شما مي گذارند که در عوض تبليغات خود را در صفحات سايت شما جاي ميدهند. يکي از اين سايتها www.geocities.com است.

در نظر داشته باشيد که شرکتهاي اينترنتي زيادي با قيمتهاي متفاوت وجود دارند که شما بايد قيمتها را نسبت به امکاناتيکه در اختيار شما قرار ميدهند، بسنجيد و سپس اقدام به اجاره فضا کنيد.

ثبت اسم و دامنه سايت Domain Registartion

پس از پيدا کردن سرور مناسب نوبت به ثبت اسم وب سايت ميرسد که اين کار شامل هزينه اضافي ميباشد و ميتوانيد در همان شرکتي که ميزباني سايت شما را به عهده دارد، آنرا به ثبت برسانيد. البته اسم مورد نظر شما نبايد از قبل رزرو شده باشد. سايتهايي وجود دارند که اسم مورد نظر خود را ميتوانيد در آن جستجو کنيد تا اگر آن اسم رزرو نشده باشد، اقدام به ثبت آن کنيد. يکي از اين سايتها www.register.com ميباشد.

Upload کردن فايلها توسط FTP

چند روش براي انتقال محتواي سايت شما بر روي سرور وجود دارد. بهترين راه استفاده از پروتکل FTP که مخفف File Transfer Protocol ميباشد. براي استفاده از اين سرويس برنامه هايي هست که اينکار را براي ما انجام ميدهند. معروفترين برنامه ها Cute FTP و WS FTP ميباشند. يکي از امکاناتي که شرکت ميزبان در اختيار شما بايد قرار دهد همين سرويس ميباشد که مشخصات لازم مانند password يا همان کلمه رمز را به شما ميدهند و شما اطلاعات لازم را در برنامه FTP وارد کرده و به دايرکتوري مشخص در سرور وصل ميشويد. زمانيکه اين ارتباط برقرار شود بايد عمل انتقال فايلها را انجام داد که بيشتر برنامه هاي FTP داراي دو پنجره ميباشند که يکي محتواي کامپيوتر خودتان را و ديگري دايرکتوري رزرو شده در سرور را نشان ميدهد. عمل انتقال فايلها به دو روش انجام ميشود، يکي بصورت ASCII که مخصوص انتقال فايلهاي داراي متن مانند خود صفحات HTML و ديگري بصورت Binary که مخصوص انتقال فايلهاي گرافيکي، صوتي و تصويري ميباشد. دقت کنيد که اگر اشتباه انتخاب کنيد فايلها خراب شده و قابل استفاده نميباشند ، اما نگران اين موضوع نباشيد، داخل برنامه هاي مربوطه گزينه اي هست که بطور اتوماتيک اينکار را انجام ميدهد و فقط شما بايد آنرا فعال کنيد.

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


مروری بر وب

WWW

امروزه شما به هر طرفي که نگاه مي کنيد آدرس هاي اينترنتي را مشاهده مي کنيد که اين آدرس ها شما را به صفحاتي در اينترنت هدايت مي کنند تا اطلاعاتي را در اختيار شما قرار دهند.بيشتر اين آدرس ها با www آغاز شده که مخفف سه کلمه World Wide Web مي باشد. وب قسمتي از دنياي اينترنت مي باشد که شامل متن، عکس و تصوير يا حتي صدا مي باشد که بعضي از اين صفحات به هم مرتبط بوده و شما را به صفحه ديگر حرکت مي دهند.

همانطور که ميدانيد براي دسترسي به اين صفحات نياز به چند چيز داريد:

ابتدا شما بايد مشترک يکي از شرکتهاي سرويس دهنده اينترنت شويد که به اين شرکتها ISP مي گويند.ISP مخفف Internet Service Providers است. سپس شما براي مشاهده صفحات نياز به يک برنامه به اسم مرورگر وب Web browser داريد مانند: Internet explorer, Netscape Navigator, Opera, Mozilla

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

داخل اين مرورگرها کادري(Address bar) است که شما مي توانيد آدرس هاي اينترنتي را وارد کرده و پس از فشار دادن دکمه Enter برروي کيبورد منتظر نمايش يک وب سايت باشيد. اگر دقت کرده باشيد پس از اين عمل کلمه http درجلوي آدرس وارد شده اضافه مي گردد که مخفف HyperText Transport Protocol ميباشد، اين کلمه به مرورگرميفهماند، اين آدرس از چه پيوند و تکنولوژي مي خواهد براي نمايش صفحه استفاده کند، چون پروتکلهاي مختلفي هست مانند: FTP که مخفف File Transfer Protocol .

نام فني آدرسهاي اينترنتي URL مي باشد که اين اصطلاح مخفف سه کلمه Universal Resource Locator است.

HTML چيست؟

زمانيکه شما داخل صفحات يک وب سايت مي گرديد اجزاي گوناگوني را مي بينيد که تمام آنها در يک چيز مشترک هستند و آن زبان يا کدي است که آنها را توليد مي کند که اين زبان HyperText Markup Language يا همان HTML مي باشد.حالا اجازه دهيد تا کلمه به کلمه برايتان توضيح بدهم، البته انتظار يک معني دقيق و سليس را نداشته باشيد ولي درحدي که براي من قابل فهم بود براي شما خواهم گفت.

: Hyper متضاد نوشته هاي خطي( Linear ) است ، اگر شما با زبانهاي برنامه نويسي کامپيوتر آشنايي داشته باشيد مانند ويژوال بيسيک ميبينيد که بايد کدها را خط به خط بنويسيد و تا يک خط اجرا نشود بعدي خوانده نمي شود يعني آنها را بايد به ترتيب بنويسيد تا برنامه اجرا شود ولي HTML اينطوري نيست و الگوي خطي ندارد شما هر کدي را مي توانيد هر جا که بخواهيد بنويسيد.

Text : به همان متني مي گويند که مي نويسيد تا در مرورگر نشان داده شود.

Markup :عملي است که مرورگر برايتان انجام ميدهد يعني يک متن ساده مي نويسيد ولي جور ديگري نمايش داده مي شود.

Language: بالاخره اين هم يک نوع زبان و بايد يک چيزي پيدا کرد تا به حرف L بخوره ديگه (-:

عناصر تشکيل دهندهHTML

HTML زبان وب ميباشد که داراي عناصر( elements ) گوناگوني است که بر روي هم تشکيل يک صفحه از سايت را ميدهند. اين عناصر عبارتند از:

  • ( texts & lists ) متنها و ليست ها : نوشته هاي داخل يک صفحه را در برميگيرد.

  • ( images ) عکسها : عکس هاي داخل يک صفحه که زيبايي خاصي به وب سايتها مي بخشند.

  • ( ( tables جدولها : جدولها بهترين عنصر براي سازمان دهي و مرتب کردن اطلاعات ما هستند که نقش اساسي در طراحي يک سابت دارند.

  • ( ( forms فرمها : عناصري که بيننده سايت به کمک آنها مي تواند اطلاعاتي را وارد کرده تا ذخيره شده يا فرستاده شود.

  • ( ( hyperlinks نقطه پيوند : البته اين معني اصلي لغت نمي باشد و اين عناصر، نقطه پيوند و ارتباط بين دو صفحه از يک سايت يا دو وب سايت متفاوت مي باشد. مانند :

www.yahoo.com

  • ( frames ) چارچوبها : فريمها يا چارچوبها تنها عناصري هستند که با استفاده از آنها ما مي توانيم چند صفحه اينترنتي را در يک صفحه جاي دهيم.

  • ( multimedia ) چند رسانه اي : شايد بشه آنرا صوت و تصوير هم گفت ، اگرچه از ابتدا صوت و تصوير با HTML نبوده اما در حال حاضر بيشتر مرورگر هاي وب از اين عنصر پشتيباني مي کنند و شما ميتوانيد در وب سايتتان فيلم وموزيک پخش کنيد.

  • ( javascript ) جاوا اسکريپت : يک نوع زبان نوشتاري يا بهتر بگويم يک نوع کد است که ارتباط نزديکي با HTML دارد و البته آنها را بايد داخل کدهاي html بکار برد تا بتوانيد يک وب سايت حرفه اي با جذابيت بالا طراحي کنيد.

  • ( JavaApplets ) جاوا اپلت : اپلتها برنامه هايي هستند که توسط زبان جاوا نوشته مي شوند و مي توان آنها را در يک صفحه جاسازي کرد براي کارآيي بالاي وب سايت مانند عمليات پيچيده رياضيات يا ساختن بازيها. زبان برنامه نويسي جاوا خود يک زبان مجزا و داراي محبوبيت خاصي دردنيا مي باشد که با جاوا اسکريپت فرق دارد.

  • ( style sheets ) استايل شيت : اين عناصر قابليت انتقال اطلاعات به عنوان يک الگوي مشترک در بين صفحات را دارد. به طور مثال شما يک الگو براي رنگ متن مي سازيد و سپس آنرا بين صفحاتي که مي خواهيد به اشتراک مي گذاريد.

  • ( DHTML ) : مخفف دو کلمهDynamic Html مي باشد که وظيفه آن روح بخشيدن به صفحات و بالا بردن جذابيت وب سايت مي باشد، شما مي توانيد با هماهنگي کدهاي javascript وDhtml يک وب سايت پويا و زنده طراحي کنيد.


هدف و درک طراحی وب

مقدمه ای برای طراحی سايت

تمامي اين عناصر(( elements که در بخش قبل ذکر شد مي توان همگي يا تک تک آنها را در ميان کدهاي html بکار برد. لازم بذکر است که کليه کدها و عناصر مربوط به زبان html توسط يک کنسرسيوم و انجمني به نام W3C تأييد و به رسميت شناخته مي شود. انجمن W3C که مخفف World Wide Web Consortium مي باشد، به غير از Html بر کدهاي Style sheet, xml, xhtml هم نظارت دارد. اين انجمن پس از بررسي کدهاي جديد آنها را در سايت رسمي خود www.w3.org اعلام مي نمايد. در حال حاضر آخرين نسخه html، نسخه html 4.01 ميباشد و بعد از آن نسخه هاي Xhtml به وب معرفي شده است.

هدف از ساخت وب سايت

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

کجا و چگونه سايت را راه اندازي کنيد

ابتدا بايد يک اسم مناسب براي سايت انتخاب کنيد که به اين اسم domain مي گويند، اسم يک وب سايت از سه قسمت تشکيل مي شود: www که مخفف World Wide Web ميباشد، اسم منتخب شما يا همان Domain و در آخر پسوندهاي مشخص مانند: .com, .net, .org, .info

پس از انتخاب اسم که بايد يک هماهنگي با مطالب سايت داشته باشد، نوبت به ثبت آن ميرسد که شما مجبورهستيد با يک شرکت خدمات اينترنت قرار داد ببنديد، براي ثبت اسم و اجاره فضا تا اطلاعات شما را در اينترنت به معرض نمايش بگذارند. بعد از اينکه تنظيمات اوليه انجام شد، شما مي توانيد با استفاده از سرويسهايي مانند FTP که مخفف File Transfer Protocol ميباشد اطلاعات سايت را حذف ، اضافه يا تغيير دهيد که در مورد اين سرويس در بخش ديگري توضيح خواهم داد.

البته سابتهايي هستند که شما ميتوانيد به طور رايگان سايت خود را راه اندازي کنيد اما معايبي هم دارند که يکي از آنها پخش تبليغات در صفحات شما ميباشد و ديگر اينکه امکانات محدود آنها است ولي براي شروع کار و آشنايي با نصب و راه اندازي يک وب سايت بسيار مناسب ميباشند. يکي از اين سايتها www.geocities.com است که اگر ايميل در سايت ياهو داريد، فضاي رايگان در اختيارتان قرار ميدهد.

اهميت طراحي وب سايت

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

براي يادگيري HTML به چه چيزهايي نياز داريد

براي ديدن صفحاتي که طراحي مي کنيد نياز به يک مرورگر وب web browser داريد اگر شما اين صفحه را مي بينيد پس يکي از اين مرورگرها را داريد. اما براي نوشتن کدهاي html در حال حاضر به برنامه ساده notepad که درکليه سيستمهاي عامل ويندوز وجود دارد نياز داريد، برنامه هاي پيشرفته ديگري هم هست که محيط گرافيکي دارند مانند: Microsoft frontpage , Macromedia Dreamweaver ولي براي شروع بهتر است که از همان Notepad استفاده کنيد. پس مهمترين چيزي که نياز داريد کمي وقت و علاقه هست.


Xhtml

آموزش Xhtml

زبان XHTML که مخفف EXtensible HyperText Markup Language در تاریخ 26 ژانویه سال 2000 منتشر شد و به قول بعضيها همان HTML 5 میباشد که در واقع اینچنین نیست. این زبان نسل جدید زبان وب ميباشد که داراي یکسري اصول و قوانین خاص است تا کمبودهايHTML را در مورد دستگاههاي کوچک الکترونیکي که به وب هم متصل ميشوند مانند تلفنهاي همراه، را جبران کند.

مدتي است که وب آماده معرفي زبان آينده خود يعني XML است که XHTML اين وظيفه را بعهده دارد. در اين نسخه کدهايHTML بايد در DTD نوشته شوند. هر مرورگر وب ، داخل خود يک نوع DTD دارد و به همين دليل است که يکسري از دستورات نسخه هاي مختلف HTML در بعضي از مرورگرها نمايش داده نميشوند. از اين به بعد شما بايد دستورات HTML را در DTD خاص خود بکار بريد، چون انجمن W3C ميخواهد يک استاندارد را معين کند تا هماهنگي لازم بين زبان وب و کليه User-agent ها برقرار شود. User-agent برنامه هاي تحت وب مانند مرورگرها را گويند.

W3C پيشنهاد داده که HTML بايد يک برنامه کاربردي تحت XML باشد تا برنامه نويسان وب مجبور به رعايت استاندارد آن شوند.

با قبول کردن DTD برايXHTML و نوشتن آن ، بايد اصول و قوانين اين نسخه را هم رعايت کنيد البته اگر ميخواهيد صفحات شما سازگاري بيشتري با نسل آينده وب داشته باشد.

پس ابتدا از DTD براي اين نسخه شروع ميکنيم . همانطور که ميدانيد DTD براي نسخه هاي HTML لازم نبود و بدون آن هم صفحات بخوبي نمايش داده ميشدند ولي براي XHTML نوشتن و تعيين آن اجباري است. در حال حاضر سه نوع DTD براي حالتهاي مختلف وجود دارد:

حالت اول براي صفحه اي است که فقط از دستورات صحيح XHTML استفاده شده و براي مرورگرهايي است که از CSS پشتيباني ميکنند،

<! DOCTYPE HTML PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

حالت بعدي براي صفحه اي است که مخلوطي از کدهاي HTML و XHTML باشد و مرورگرهاييکه از CSS پشتيباني نميکنند هم آنرا نمايش دهند،

<! DOCTYPE HTML PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

و حالت آخر هم براي استفاده عنصر فريم Frame در صفحه است،

<! DOCTYPE HTML PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

فراموش نکنيد که نوشتن يکي از آنها اجباري است.

حالا نکاتي را که بايد در اين نسخه رعايت کنيد:

  • نوشتن تگهاي</head></body> که در HTML اجباري نبود در XHTML اجباري است.
  • وجود تگهاي پايان دهنده اجباري است مانند: <p>….</p>, <hr/>, <br/>
  • کليه تگها و خصوصيات آنها بايد بصورت حروف کوچک انگليسي نوشته شود. مانند: <body bgcolor="#ffcc45">
  • مقادير خصوصيات در تگها بايد بين دو علامت "…"قرار گيرند.
  • ترتيب قرار گرفتن تگها داخل هم بايد رعايت شود،

<b><i> TEXT </b></i> روش غلط

<b><i> TEXT </i></b> روش صحيح

  • بعضي از خصوصيات در HTML نياز به مقداردهي نداشتند اما در XHTML آنها را بايد مقداردهي کنيم،

<input type="radio" checked> روش غلط

<input type="radio" checked="checked"> xhtml روش صحيح در

  • در تگ <pre> فقط از متن بايد استفاده کنيد و داخل آن از تگهاي ديگر نميتوانيد استفاده کنيد.
  • يک فرم را داخل فرم ديگر نبايد بکار بريد.
  • دستورات فايل CSS بايد به صورت حروف کوچک نوشته شوند و بهتر است که براي Style sheet از فايل خارجي استفاده کنيد.
  • کليه خصوصياتي را که ميتوان با style sheet کنترل کرد از خصوصيات HTML آنها بهتر است استفاده نشود.
  • دستورات زبان جاوااسکريپت هم بهتر است در فايل خارجي باشد و توسط تگ <link> فراخواني شوند ولي اگر ميخواهيد داخل XHTML DTD از آنها استفاده کنيد بايد مانند زير عمل کنيد:
<script language="JavaScript"type="text/javascript">
<![CDATA [
document.write(" Hi Friends ");
] ]>
</script>

ديگر از تگ <!-- ….. --> براي بيان نظريه و توضيح نميتوانيد استفاده کنيد. در صورت نياز مانند زير عمل شود،

<[CDATA […comment…] ]>

همانطور که ميبينيد يکسري محدوديتهايي هست که در HTML نبود و سادگي زبان HTML که باعث محبوبيت فراوان آن شده در نسل جديد دارد از بين ميرود ولي در عوض به گفته W3C دو خاصيت بسيار مهم در نسخه جديد زبان وب وجود دارد، Extensibility و Portability .


Tags and Attributes

جدول زير خصوصيات مشترک در بين تگهاي اين قسمت است، که معمولاً اين خصوصيات در بيشتر تگهاي html کاربرد دارند:

خصوصيات | تگها
id, class, title, style | <body></body>
lang, dir
align

id : مشخص کننده يک نام واحد براي آن تگ يا عنصر .
class : مشخص کننده نام يک مجموعه کد استايل شيت که از قبل تعريف شده باشد. براي اطلاعات بيشتر به مبحث CSS مراجعه کنيد.
title : توضيح مختصر در ارتباط با آن تگ يا عنصر که با قرار گرفتن موس بر روي عنصر، پنجره اي کوچک بنام tooltip باز شده و آن توضيح را نشان ميدهد.
style : دستورات استايل شيت که در آن تگ و عنصر بايد اعمال شود.
lang : تعيين کننده زبان براي آن تگ که نوع زبان را با دو حرف اختصاري مشخصه آن زبان مقداردهي مي کنند که بطور مثال زبان فارسي با دو حرف fa تعيين مي شود.
dir : تعيين جهت نوشته که از چپ به راست يعني ltr يا از راست به چپ يعني rtl مي باشد.
align : محل قرارگيري عنصر در صفحه که طرف چپ يا راست يا وسط مي باشد.

خصوصيات ديگر اين تگ

تگ | خصوصيات | مقادير | توضيح
<body></body> | background | آدرس عکس | آدرس فيزيکي يک عکس براي زمينه صفحه
 | bgcolor | نام رنگ يا هگز | تعيين رنگ زمينه صفحه
 | bgproperties | fixed | تثبيت عکس زمينه
 | topmargin | عدد صحيح | کنترل حاشيه صفحه از بالا
 | leftmargin | عدد صحيح | کنترل حاشيه صفحه از سمت چپ
 | text | نام رنگ يا هگز | تعيين رنگ کلي متن داخل صفحه
 | link | نام رنگ يا هگز | کنترل رنگ لينکهاي داخل آن صفحه
 | alink | نام رنگ يا هگز | کنترل رنگ لينک فعال
 | vlink | نام رنگ يا هگز | تعيين رنگ لينکهاي مشاهده شده

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Tags and Attributes

جدول زير خصوصيات مشترک در بين تگهاي اين قسمت است، که معمولاً اين خصوصيات در بيشتر تگهاي html کاربرد دارند:

خصوصيات | تگها
id, class, title, style | <input></input>,<select></select>,<option></option> <fieldset><fieldset>,<legend></legend>
lang, dir | <input></input>,<select></select>,<option></option> <fieldset><fieldset>,<legend></legend>
align | <input></input>,<legend></legend>

id : مشخص کننده يک نام واحد براي آن تگ يا عنصر .
class : مشخص کننده نام يک مجموعه کد استايل شيت که از قبل تعريف شده باشد. براي اطلاعات بيشتر به مبحث CSS مراجعه کنيد.
title : توضيح مختصر در ارتباط با آن تگ يا عنصر که با قرار گرفتن موس بر روي عنصر، پنجره اي کوچک بنام tooltip باز شده و آن توضيح را نشان ميدهد.
style : دستورات استايل شيت که در آن تگ و عنصر بايد اعمال شود.
lang : تعيين کننده زبان براي آن تگ که نوع زبان را با دو حرف اختصاري مشخصه آن زبان مقداردهي مي کنند که بطور مثال زبان فارسي با دو حرف fa تعيين مي شود.
dir : تعيين جهت نوشته که از چپ به راست يعني ltr يا از راست به چپ يعني rtl مي باشد.
align : محل قرارگيري عنصر در صفحه که طرف چپ يا راست يا وسط مي باشد.

خصوصيات ديگر اين تگها

تگ | خصوصيات | مقادير | توضيح
<input></input>
 | disabled | --- | غير فعال کردن آن قسمت از فرم
 | checked | --- | انتخاب گزينه بصورت پيش فرض
 | maxlength | عدد صحيح | تعيين حداکثر کاراکتري که بايد بکار برده شود
 | name | يک نام واحد | نام واحد براي شناسايي آن قسمت از فرم
 | size | عدد صحيح | تعيين اندازه کادر متني در صفحه
 | src | آدرس فايل | آدرس فيزيکي يک عکس برا ي imagebutton
 | tabindex | شماره دسترسي tab | ترتيب حرکت در صفحه توسط دکمه tab
 | type | checkbox | انتخاب چند گزينه اي
 |  | radio | انتخاب تک گزينه اي
 |  | hidden | فرستادن اطلاعات خاص از يک فرم بدون دخالت کاربر
 | value | متن | اطلاعات مورد نيازبراي پردازش در وب سرور
<select></select> | disabled | --- | غير فعال کردن آن قسمت از فرم
 | multiple | --- | انتخاب چند گزينه توسط دکمه هاي Alt يا Ctrl
 | name | يک نام واحد | نام واحد براي شناسايي آن قسمت از فرم
 | size | عدد صحيح | تعداد گزينه اي که در صفحه بايد نمايان شود
 | tabindex | شماره دسترسي tab | ترتيب حرکت در صفحه توسط دکمه tab
<option><option> | disabled | --- | غير فعال کردن آن قسمت از فرم
 | selected | --- | گزينه هايي که بصورت پيش فرض انتخاب مي شوند
 | value | متن | اطلاعات مورد نيازبراي پردازش در وب سرور
<fieldset></fieldset> | -- | --- |
<legend></legend> | -- | --- |

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Tags and Attributes

جدول زير خصوصيات مشترک در بين تگهاي اين قسمت است، که معمولاً اين خصوصيات در بيشتر تگهاي html کاربرد دارند:

خصوصيات | تگها
id, class, title, style | <form></form>,<button></button>,<input></input> <lable></lable>,<textarea></textarea>
lang, dir | <form></form>,<button></button>,<input></input> <lable></lable>,<textarea></textarea>
align | <input></input>

id : مشخص کننده يک نام واحد براي آن تگ يا عنصر .
class : مشخص کننده نام يک مجموعه کد استايل شيت که از قبل تعريف شده باشد. براي اطلاعات بيشتر به مبحث CSS مراجعه کنيد.
title : توضيح مختصر در ارتباط با آن تگ يا عنصر که با قرار گرفتن موس بر روي عنصر، پنجره اي کوچک بنام tooltip باز شده و آن توضيح را نشان ميدهد.
style : دستورات استايل شيت که در آن تگ و عنصر بايد اعمال شود.
lang : تعيين کننده زبان براي آن تگ که نوع زبان را با دو حرف اختصاري مشخصه آن زبان مقداردهي مي کنند که بطور مثال زبان فارسي با دو حرف fa تعيين مي شود.
dir : تعيين جهت نوشته که از چپ به راست يعني ltr يا از راست به چپ يعني rtl مي باشد.
align : محل قرارگيري عنصر در صفحه که طرف چپ يا راست يا وسط مي باشد.

خصوصيات ديگر اين تگها

تگ | خصوصيات | مقادير | توضيح
<form></form> | action | آدرس فايل | آدرس فايلي که اطلاعات را پردازش مي کند
 | enctype | application/x-www-form-urlencoded | نوع MIME اطلاعات فرستاده شده به سرور
 |  | multipart/form-data
 |  | text/plain
 | method | get, post | نحوه فرستادن اطلاعات به وب سرور
 | name | نام فرم | نام واحد براي شناسايي آن فرم
 | target | _blank, _parent, _self, _top | محل باز شدن صفحه بعد از زدن دکمه تأييد
<button></button> | disabled | --- | غيرفعال کردن دکمه
 | name | نام دکمه | نام واحد براي دکمه
 | tabindex | شماره دسترسي tab | ترتيب حرکت در صفحه توسط دکمه tab
 | type | submit, reset | تعيين نوع دکمه براي تأييد يا حذف اطلاعات
 | value | متن | اطلاعات مورد نيازبراي پردازش در وب سرور
<lable></lable> | for | نام مشخص | نام قسمتي از فرم که برچسب متعلق به آن است
<input></input>
 | disable | --- | غير فعال کردن آن قسمت از فرم
 | maxlength | عدد صحيح | تعيين حداکثر کاراکتري که بايد بکار برده شود
 | name | يک نام واحد | نام واحد براي شناسايي آن قسمت از فرم
 | size | عدد صحيح | تعيين اندازه کادر متني در صفحه
 | src | آدرس فايل | آدرس فيزيکي يک عکس برا ي imagebutton
 | tabindex | شماره دسترسي tab | ترتيب حرکت در صفحه توسط دکمه tab
 | type | button | ساخت يک دکمه در فرم
 |  | file | تعيين آن قسمت از فرم براي دريافت فايل
 |  | image | کنترل شکل يک دکمه
 |  | password | تعيين کادر متني فرم براي دريافت کلمه رمز
 |  | reset | ساخت دکمه حذف اطلاعات
 |  | submit | ساخت دکمه تأييد اطلاعات
 |  | text | ساخت کادر متني در فرم
 | value | متن | اطلاعات مورد نيازبراي پردازش در وب سرور
<textarea></textarea> | cols | عدد | کنترل تعداد ستونها در کادر
 | disabled | --- | غير فعال کردن آن قسمت از فرم
 | name | يک نام واحد | نام واحد براي آن قسمت
 | readonly | --- | عدم توانايي براي ويرايش متن داخل کادر
 | rows | عدد | کنترل تعداد رديفها در کادر
 | tabindex | شماره دسترسي tab | ترتيب حرکت در صفحه توسط دکمه tab

MIME : اين اصطلاح مخفف Multipurpose Internet Mail Extentions مي باشد که تعيين کننده فرمت اطلاعات فرستاده شده به سرور است و توسط آن مي توان فرمت مورد نظر را فيلتر کرده و به سرور منتقل کرد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Tags and Attributes

جدول زير خصوصيات مشترک در بين تگهاي اين قسمت است، که معمولاً اين خصوصيات در بيشتر تگهاي html کاربرد دارند:

خصوصيات | تگها
id, class, title, style | <frameset></frameset>,<frame></frame> <noframes></noframes>

id : مشخص کننده يک نام واحد براي آن تگ يا عنصر .
class : مشخص کننده نام يک مجموعه کد استايل شيت که از قبل تعريف شده باشد. براي اطلاعات بيشتر به مبحث CSS مراجعه کنيد.
title : توضيح مختصر در ارتباط با آن تگ يا عنصر که با قرار گرفتن موس بر روي عنصر، پنجره اي کوچک بنام tooltip باز شده و آن توضيح را نشان ميدهد.
style : دستورات استايل شيت که در آن تگ و عنصر بايد اعمال شود.

خصوصيات ديگر اين تگها

تگ | خصوصيات | مقادير | توضيح
<frameset></frameset> | border | 0, 1 | تعيين کادر براي کل فريم ها
 | frameborder | yes, no | کنترل کادر فريم ها
 | cols | عدد صحيح يا درصد | کنترل سايز فريم هاي عمودي
 | rows | عدد صحيح يا درصد | کنترل سايز فريم هاي افقي
<frame></frame> | name | نام غير تکراري | نام واحد براي هر فريم
 | noresize | --- | تثبيت اندازه هر فريم
 | scrolling | yes, no, auto | کنترل scroll bar در فريم ها
 | src | آدرس | آدرس فيزيکي هر فريم
<noframes></noframes> | --- | --- |

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Tags and Attributes

جدول زير خصوصيات مشترک در بين تگهاي اين قسمت است، که معمولاً اين خصوصيات در بيشتر تگهاي html کاربرد دارند:

خصوصيات | تگها
id, class, title, style | <iframe></iframe>
align | <iframe></iframe>

id : مشخص کننده يک نام واحد براي آن تگ يا عنصر .
class : مشخص کننده نام يک مجموعه کد استايل شيت که از قبل تعريف شده باشد. براي اطلاعات بيشتر به مبحث CSS مراجعه کنيد.
title : توضيح مختصر در ارتباط با آن تگ يا عنصر که با قرار گرفتن موس بر روي عنصر، پنجره اي کوچک بنام tooltip باز شده و آن توضيح را نشان ميدهد.
style : دستورات استايل شيت که در آن تگ و عنصر بايد اعمال شود.
align : محل قرارگيري عنصر در صفحه که طرف چپ يا راست يا وسط مي باشد.

خصوصيات ديگر اين تگها

تگ | خصوصيات | مقادير | توضيح
<iframe></iframe> | frameborder | 0, 1 | کنترل کادر فريم
 | height | عدد صحيح يا درصد | کنترل طول فريم
 | name | نام فريم | انتخاب يک نام واحد
 | scrolling | yes, no, auto | کنترل scroll bar براي فريم
 | src | آدرس | آدرس فيزيکي صفحه اي که در فريم جاي مي گيرد
 | width | عدد صحيح يا درصد | کنترل عرض فريم

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Tags and Attributes

خصوصيات تگ image map

تگ | خصوصيات | مقادير | توضيح
<img> | ismap | ismap | براي پيدا کردن مختصات يک نقطه در مرورگر
 | usemap | اسم | اسمي واحد براي فراخواني يک عکس
<map></map> | name | اسم | فراخواني اسم مشخص شده يک عکس
<area> |  |  |
 | coords | مختصات | مختصات يک نقطه از عکس
 | href | آدرس | آدرس صفحه اي که به آن پيوند داده خواهد شد
 | shape | rect, circle, poly | تعيين اشکال هندسي در يک عکس

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Tags and Attributes

خصوصيات تگ image

تگ | خصوصيات | مقادير | توضيح
<img> | align | left,top,right middle,bottom | نحوه قرارگيري عکس نسبت به عناصر اطراف
 | alt | متن | توضيح درباره عکس براي مرورگرهايي که عکس را نمايش نميدهند
 | border | عدد | تعيين ضخامت کادر براي عکس
 | class | نام | نام تعريف شده يک مجموعه کد استايل شيت
 | height | عدد | اندازه طول يک عکس
 | hspace | عدد | فاصله عکس از راست و چپ
 | id | اسم | تعيين يک اسم واحد در همان فايل
 | src | آدرس فايل | آدرس فيزيکي فايل
 | style | دستورات استايل شيت | کدهاي استايل شيت که در اين تگ بايد اعمال شود
 | vspace | عدد | فاصله عکس از بالا و پايين
 | width | عدد | اندازه عرض يک عکس

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Tags and Attributes

جدول زير خصوصيات مشترک در بين تگهاي اين قسمت است، که معمولاً اين خصوصيات در بيشتر تگهاي html کاربرد دارند:

خصوصيات | تگها
id, class, title, style | <table></table>, <tr></tr>,<td></td>,<th></th> <thead></thead>,<tbody></tbody>,<tfoot></tfoot> <caption></caption>,<colgroup></colgroup>
lang, dir | <table></table>, <tr></tr>,<td></td>,<th></th> <thead></thead>,<tbody></tbody>,<tfoot></tfoot> <caption></caption>,<colgroup></colgroup>
align | <table></table>, <tr></tr>,<td></td>,<th></th> <thead></thead>,<tbody></tbody>,<tfoot></tfoot> <caption></caption>,<colgroup></colgroup>

id : مشخص کننده يک نام واحد براي آن تگ يا عنصر .
class : مشخص کننده نام يک مجموعه کد استايل شيت که از قبل تعريف شده باشد. براي اطلاعات بيشتر به مبحث CSS مراجعه کنيد.
title : توضيح مختصر در ارتباط با آن تگ يا عنصر که با قرار گرفتن موس بر روي عنصر، پنجره اي کوچک بنام tooltip باز شده و آن توضيح را نشان ميدهد.
style : دستورات استايل شيت که در آن تگ و عنصر بايد اعمال شود.
lang : تعيين کننده زبان براي آن تگ که نوع زبان را با دو حرف اختصاري مشخصه آن زبان مقداردهي مي کنند که بطور مثال زبان فارسي با دو حرف fa تعيين مي شود.
dir : تعيين جهت نوشته که از چپ به راست يعني ltr يا از راست به چپ يعني rtl مي باشد.
align : محل قرارگيري عنصر در صفحه که طرف چپ يا راست يا وسط مي باشد.

خصوصيات ديگر اين تگها

تگ | خصوصيات | مقادير | توضيح
<table></table> | background | آدرس فايل | قرار دادن يک عکس در زمينه جدول
 | bgcolor | اسم رنگ يا هگز | تغيير رنگ زمينه جدول
 | border | عدد | کنترل کادر براي جدول
 | bordercolor | اسم رنگ يا هگز | تغيير رنگ کادر
 | cellpadding | عدد | کنترل فاصله اجزاي داخل جدول از کادر خانه ها
 | cellspacing | عدد | کنترل فاصله بين خانه هاي جدول
 | height | عدد صحيح يا درصد | تعيين طول يک جدول
 | rules | all,cols,group none,rows | کنترل نمايش کادر
 | summery | متن | توصيف جدول براي مرورگرها
 | width | عدد صحيح يا درصد | تعيين عرض جدول
<tr></tr> | bgcolor | اسم رنگ يا هگز | تغيير رنگ زمينه يک رديف
 | height | عدد صحيح يا درصد | کنترل طول يک رديف از جدول
 | nowrap | --- | امتداد عرض يک خانه متناسب با متن داخل آن
 | valign | baseline,bottom middle,top | محل قرارگيري يک عنصر بصورت عمودي
<td></td> <th></th> | background | آدرس فايل | قرار دادن عکس در زمينه يک ستون از جدول
 | bgcolor | اسم رنگ يا هگز | تغيير رنگ زمينه يک ستون
 | colspan | عدد | ترکيب يکسري از خانه هاي جدول
 | height | عدد صحيح يا درصد | کنترل طول يک ستون از جدول
 | nowrap | --- | امتداد عرض يک ستون متناسب با متن داخل آن
 | rowspan | عدد | ترکيب يکسري از خانه هاي جدول
 | valign | baseline,bottom middle,top | محل قرارگيري يک عنصر بصورت عمودي
 | width | عدد صحيح يا درصد | کنترل عرض يک ستون از جدول
<thead></thead> <tbody></tbody> <tfoot></tfoot> | bgcolor | اسم رنگ يا هگز | تغيير رنگ زمينه يکسري از خانه هاي جدول
 | valign | baseline,bottom middle,top | محل قرارگيري يک عنصر بصورت عمودي
<caption></caption> | title | متن | تعيين نام جدول براي مرورگرهاي خاص
<colgroup><colgroup> | span | عدد | کنترل ستونهاي يک جدول

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Javascript tutorial --- آموزش جاوااسکريپت

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

آموزش جاوااسکريپت

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

  • مقدمه
  • آغاز اسکريپت نويسي
  • پيغام خطا در جاوااسکريپت
  • کجا بنويسيم
  • متغير ها
  • تاريخ و زمان
  • عملگرها
  • دستورات شرطی if..else
  • دستور switch
  • تکرار دستورات توسط حلقه ها
  • آرايه ها در جاوااسکريپت
  • توابع
  • پنجره های ارتباط با کاربر یا popup box
  • رويدادها در جاوااسکريپت
  • شئ ها در جاوااسکريپت
  • شئ String
  • شئ Math
  • شئ های مربوط به HTML DOM
    • شئ window
    • شئ navigator
    • شئ frame
    • شئ document
    • شئ location
    • شئ history
    • شئ screen
  • نکات مهم در اسکريپت نويسی

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


What is Javascript --- جاوااسکريپت چيست

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

مقدمه

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

جاوااسکريپت چيست؟
تفاوت جاوااسکريپت با جاوا
قابليتهاي جاوااسکريپت

جاوااسکريپت چيست؟

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

جاوااسکريپت توسط شرکت Netscape اختراع شد و به عنوان اولين زبان اسکريپت نويسي در وب توسعه يافت که در حال حاضر پرکاربردترين و محبوب ترين زبان اسکريپت نويسي در دنيا مي باشد که يکي از دلايل آن، پشتيباني دو مرورگر معروف وب، Internet Explorer و Netscape Navigator از اين زبان مي باشد. نا گفته نماند که شرکت مايکروسافت هم براي اينکه از نت اسکيپ در اين زمينه عقب نماند، نسخه مربوط به خود را بنام Jscript توليد کرد.

تفاوت جاوااسکريپت با جاوا

تقريباً در هر جا که آموزش جاوااسکريپت هست اين مطلب هم مشاهده مي شود چون خيلي ها فکر مي کنند که اين دو با هم يکي بوده يا حداقل اينکه جاوااسکريپت ساده شده زبان جاوا براي کاربرد در وب مي باشد که اصلاً اين چنين نيست.

همانطور که ميدانيد جاوااسکريپت متعلق به شرکت نت اسکيپ مي باشد اما زبان جاوا متعلق به شرکت Sun Microsystems است. جاوااسکريپت در اصل يک زبان اسکريپت نويسي است نه يک زبان برنامه نويسي کامپيوتر، شايد بتوان اسکريپتها را يک نوع زبان برنامه نويسي خيلي سبک و ساده ناميد اما جاوا يک زبان برنامه نويسي کاملاً پيچيده مانند زبان C است. تفاوت ديگر آنها اينست که جاوااسکريپت توسط يک برنامه مفسر يعني interpreter در مرورگر تعريف و تفسير شده تا قابل اجرا باشد و حتماً هم اين کار در مرورگر انجام مي شود اما برنامه هاي جاوا بايد توسط يک کامپايلر Compiler ، کامپايل شده که کامپايل شدن يعني جمع آوري اطلاعات مورد نظر و ترجمه آن اطلاعات به زبان قابل فهم براي کامپيوتر و تبديل آن به يک برنامه کاربردي واحد و مستقل براي کاربر را گويند. به همين دليل برنامه هاي جاوا را که اپلت applet مي نامند، مستقل اجرا مي شوند. البته اپلتهاي جاوا را مي توان در صفحات وب هم گنجاند.

در يک جمله مي توان گفت که جاوااسکريپت فقط در صفحات وب تأثيرگذار است اما زبان جاوا براي خلق برنامه هاي پيچيده در کامپيوتر ساخته شده است.

قابليتهاي جاوااسکريپت

اکنون که يک مفهومي از زبان جاوااسکريپت را در ذهن داريد، بايد ببينيم که با آن چکار مي توانيم انجام دهيم يا بهتر بگويم که جاوااسکريپت چه کاري براي ما انجام مي دهد و چه قابليتهايي را در مرورگر ايجاد مي کند.

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

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

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

يکي از بهترين ويژگيهاي جاوااسکريپت، اعتبار بخشيدن به اطلاعات مي باشد مثلاً شما يک فرمي براي ارتباط با کاربر خود ساخته ايد و مي خواهيد قبل از اينکه آن اطلاعات به سرور فرستاده شود، بازبيني شده تا اگر مشکلي وجود داشته باشد به کاربر اطلاع داده شود تا در صدد رفع آن برآيد. چون جاوااسکريپت اصطلاحاً Client side است، يعني در سيستم کاربر اجرا شده و مستقل از وب سرور است مي تواند ترافيک روي سرور را کم کرده که اين موضوع يک امتياز مثبت براي ميزبانان وب محسوب مي شود.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

آغاز اسکريپت نويسي

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


آغاز اسکريپت نويسي

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

آغازاسکريپت نويسی

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

تگ اسکريپت
خصوصيت language
خصوصيت type
خصوصيت src

تگ اسکريپت

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

<script> ... </script>

که کليه دستورات جاوااسکريپت بايد مابين آنها قرار گيرد. اين تگهاي اچ تي ام ال به مرورگر مي فهمانند که در کجا اين زبان آغاز شده تا مفسر جاوااسکريپت مرورگر فعال شود و در کجا پايان مي پذيرد که برنامه مفسر هم کار خود را خاتمه دهد.

language

اما تگ script مانند بقيه تگها داراي خصوصياتي مي باشد، يکي از آنها language است که مقدار آنرا بايد برابر با javascript قرار دهيد،

<script language="javascript">
</script>

براي مقدار javascript مي توانيد نسخه آن را هم بنويسيد. اين زبان هم مانند اچ تي ام ال داراي نسخه هاي مختلفي است که هر کدام آنها با قابليتهاي جديدي در وب توسعه يافتند. نسخه هاي اين زبان عبارتند از 1.0 ، 1.1 ، 1.2 ، 1.3 ، 1.4 و آخرين نسخه حال حاضر هم 1.5 مي باشد که هم اکنون اين نسخه با مرورگر مايکروسافت يعني اينترنت اکسپلورر سازگاري ندارد. فعلاً مرورگر اينترنت اکسپلورر از نسخه 1.3 اين زبان پشتيباني مي کند.

type

تگ اسکريپت خصوصيت type هم دارد که براي اين زبان بايد آنرا برابر با text/javascript قرار دهيد. نکته قابل توجه اينست که اگر اين خصوصيت را به اين تگ اضافه کنيد، مرورگر اينترنت اکسپلورر نسخه 1.5 اين زبان را ناديده مي گيرد و کد را اجرا مي کند. شما مي توانيد با اجراي کد زير هم اولين اسکريپت خود را تجربه کنيد و هم خصوصيت type را در IE امتحان کنيد.

خب مانند زبان اچ تي ام ال مي توانيد از يک ويرايشگر متن مانند برنامه Notepad استفاده کرده و کد زير را در آن وارد کنيد:

<html>
<head>
<title> My JavaScript </title>
</head>
<body>
<script language="javascript1.5" type="text/javascript">
document.write(" Hello my friends ")
</script>
</body>
</html>

اجراي اين کد

اکنون اين فايل را با پسوند htm ذخيره کنيد و سپس آنرا در مرورگر اينترنت اکسپلورر اجرا کنيد که جمله Hello my friends را بايد در صفحه ببينيد. حالا خصوصيت type را حذف کنيد و دوباره فايل را ذخيره و مشاهده کنيد، هيچ متني در صفحه ديده نميشود که با تغيير نسخه 1.5 به 1.3 آن متن دوباره نمايان خواهد شد. نوشتن نسخه جاوااسکريپت اجباري نيست يعني مي توانيد آنرا ننويسيد.

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

document.write(" Hello my friends ")

ببينيم در اينجا اين عبارت چگونه براي مرورگر تفسير مي شود. document يعني همان سند و فايل html که در آن اين عمليات بايد انجام شود و مرورگر به محض برخورد با اين عبارت آماده مي شود براي انجام کاري که بعد از يک نقطه نوشته مي شود. در اينجا بايد عمل write يعني نوشتن را انجام دهد اما چي بايد بنويسد، طبق قرارداد بايد هر چيزي که در بين پرانتز هست را بنويسد و چون محتواي داخل پرانتز مابين دو علامت نقل قول يعني " " قرار گرفته پس بايد بصورت يک string در بيايند. string يعني يک رشته کاراکتر که مي تواند هم حرف باشد هم عدد و هم علامت و خاصيت string در اين است که هرچيزي مابين دو علامت " " قرار گرفت عيناً بايد در صفحه نوشته شود.

در جاوااسکريپت به document يک object يعني شئ مي گويند و هنگامي که يک نقطه بعد از آن گذاشته مي شود آن شئ منتظر method خود مي شود که در اينجا همان write است. به عبارت ساده اين خط مي گويد که آن شئ را بردار و در آن توسط متد نوشتن چيزي بنويس.

ساده بود، نه؟ بقيه دستورات هم به همين راحتي است فقط بايد آنها را بنويسيد و تمرين کنيد تا در ذهنتان بمانند.

src

تگ script يک خصوصيت ديگر هم دارد که src است و با آن آشنا هستيد، بله همانطور که حدس زديد براي آدرس دهي است. کدهاي جاوااسکريپت را هم مانند استايل شيت مي توانيد در يک فايل جداگانه نوشته و با پسوند js ذخيره کنيد سپس با خصوصيت src آدرس آن فايل را مشخص کنيد. توجه داشته باشيد که در آن فايل نبايد ديگر تگ script را بنويسيد. معمولاً در اين حالت تگ اسکريپت در قسمت head گنجانده مي شود تا با شروع صفحه فايل جاوااسکريپت فراخواني شود.

<html>
<head>
<script language="javascript" src="jsfiles/name.js" type="text/javascript">
</script>
</head>

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

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

پيغام هاي خطا در جاوااسکريپت

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Error message --- پيغامهای خطا

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

پيغامهاي خطا در جاوااسکريپت

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

چگونگي دريافت پيغام
انواع خطاها
ايجاد يک خطا

چگونگي دريافت پيغام خطا

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

triangular sign in the lower left hand corner

در بعضي از مرورگرها اين نوار مشاهده نمي شود که مي توانيد براي مشاهده آن به منوي View مرورگر رفته و روي گزينه Status Bar کليک کنيد. حالت ديگر ديدن پيغامهاي خطا، باز شدن يک پنجره در وسط مرورگر است که در اين حالت جزئيات خطاي ايجاد شده را هم مي توانيد مشاهده کنيد. مانند شکل زير:

Error message window

توجه داشته باشيد، در نسخه هاي جديد مرورگر اينترنت اکسپلورر اين پنجره مشاهده نميشود و ابتدا آنرا بايد فعال کنيد. براي فعال کردن آن به منوي Tools مرورگر رفته و گزينه Internet Options را انتخاب کنيد، در پنجره باز شده به قسمت Advanced رفته و گزينه Display a notification about script error را تيک بزنيد، سپس دکمه Ok را زده تا کار شما تأييد شود. بهتر است که قبل از شروع کد نويسي جاوااسکريپت اين عمل را انجام دهيد تا هنگام بروز خطا در صدد رفع آن برآييد که به اين کار اشکال زدايي يا Debugging مي گويند. اگر هم اين گزينه را فعال نکرديد، هنگام بروز خطا مي توانيد بر روي آن مثلث زرد رنگ در نوار وضعيت رفته و دوبار کليک کنيد که همان پنجره اعلان خطا باز خواهد شد.

انواع خطاها

اساساً دو نوع خطا براي جاوااسکريپت وجود دارد، خطاهاي نحوي يا Syntax errors و خطاهاي زمان اجرا يا Run time errors که در خطاهاي نحوي يک مشکلي در ترکيبات کدها بوجود آمده مثلاً يک غلط املائي در يک دستور يا جا انداختن يک حروف يا علامت و در خطاهاي زمان اجرا احتمالاً يک دستور بطور اشتباه جاي يک دستور ديگر نوشته شده است که در هنگام اجراي کد، مفسر مرورگر نمي تواند اين دستور را تجزيه تحليل کند وخطا را اعلام مي کند.

ايجاد يک خطا

خب حالا اجازه دهيد تا اين پيغامها را تجربه کنيم و ببينيد که به چه راحتي توسط آنها مي توانيد اشکال زدايي کرده و کد خود را به سرعت اصلاح کنيد. ممکن است که دهها بار با پيغام خطا روبرو شويد ولي نااميد نشويد چون حرفه اي ها هم بارها و بارها با آن مواجه مي شوند. حالا کد زير را با نام error.htm ذخيره کنيد:

<html>
<head>
<title> Error message </title>
</head>
<body>
<script language="javascript" type="text/javascript">
document.write("I'm ready for first error message.");
</script>
</body>
</html>

اجراي کد

يکبار آنرا اجرا کنيد و نتيجه را مشاهده کنيد. حالا پرانتز دوم راحذف مي کنيم، بدين صورت:

document.write("I'm ready for first error message.";

سپس فايل را دوباره ذخيره کرده و اجرا مي کنيم. همانطور که انتظار داشتيم پنجره پيغام خطا باز شد، اگر جزئيات پيغام را نداريد روي دکمه Details يا Show Details کليک کنيد تا ببينيم که چه اطلاعاتي را مي توانيم بدست آوريم. در کادر جزئيات اولين گزينه Line مي باشد که اگر مطابق کد بالا عمل کرده باشيد بايد درجلوي آن عدد 7 نوشته شده باشد. اين خط به ما مي فهماند که ايراد در خط هفتم سورس کد است. دقت کنيد، تنها خطهاي مربوط به جاوااسکريپت را نبايد بخوانيد بلکه کليه خطوط از بالا به پايين خوانده مي شود، حتي خطهاي خالي هم بايد شمرده شوند.

دومين گزينه، کلمه Char است که بيانگر عدد شمارش شده کاراکتري که باعث بروز خطا شده است و در اينجا آن عدد 52 مي باشد. فراموش نکنيد که هر فاصله بين کلمات هم يک کاراکتر به حساب ميايد. شايد اينجا سؤالي برايتان پيش بيايد که چرا عدد 52 ؟ در صورتي که در اينجا پرانتز کاراکتر51 است. بايد يک نکته را خدمتتان عرض کنم که علامت ; در جاوااسکريپت يک کاراکتر اختياري است که نشان دهنده پايان يک خط از کد مي باشد و برنامه نويسان بر حسب عادتي که دارند از اين علامت استفاده مي کنند ، در اينجا مفسر جاوااسکريپت آنرا به عنوان يک کاراکتر قبل از کاراکتر اصلي خطا شناسايي کرده است.

گزينه بعدي Code ميباشد که ظاهراً بطور معمول عدد صفر جلوي آن ميباشد و هنوز نتوانستم کارآيي آنرا تشخيص بدهم و گزينه آخر هم URL است که آدرس فايل اچ تي ام ال است که در آن خطا توليد شده است.

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

به عنوان جمله آخر اين قسمت، هميشه به پنجره هاي اعلان خطا با ديد مثبت نگاه کنيد چون آنها به ما کمک مي کنند تا اشکال را براحتي پيدا کنيم.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

در کجا کدهاي جاوااسکريپت را بايد نوشت

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


در کجا بايد کدهاي جاوااسکريپت را نوشت

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

در کجا بايد کدهاي جاوااسکريپت را نوشت

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

نوشتن اسکريپت در قسمت head
نوشتن اسکريپت در قسمت بدنه
فايل خارجي جاوااسکريپت

در حال حاضر شما ميدانيد که براي اجرا شدن کدهاي جاوااسکريپت بايد آنها را در ميان تگهاي اچ تي ام ال بکار بريد. شايد اين سؤال برايتان پيش بيايد که در کجا بايد آنها را بنويسيد، آيا جاي خاصي دارند يا در هر کجا مي توانيد اينکار را انجام دهيد. کدهاي جاوااسکريپت مي توانند در هر کجاي سورس کد باشند اما بايد ابتدا تشخيص دهيد که بکاربردن هر قسمت از اسکريپت در کجا مناسب تر مي باشد. بطور کل کدهاي جاوااسکريپت به سه دسته تقسيم ميشوند، يک سري از آنها در قسمت سر يعني head جاي مي گيرند و يک سري در قسمت بدنه کدهاي اچ تي ام ال و دسته سوم هم در يک فايل جداگانه و خارج از کدهاي html با پسوند js قرار مي گيرند که در ادامه به توضيح هر دسته خواهيم پرداخت.

نوشتن اسکريپت در قسمت head

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

<html>
<head>
<title> ... </title>
<script language="javascript" type="text/javascript">
...... javascript codes ......
</script>
</head>

نوشتن اسکريپت در قسمت بدنه

هنگاميکه نياز داشته باشيد تا کدهاي جاوااسکريپت در بدنه فايل html اجرا شود آنها را در قسمت body صفحه وارد مي کنيد،

<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
....... javascript codes ......
</script>
</body>
</html>

شما حتي مي توانيد توسط کدهاي جاوااسکريپت قسمتي از يک صفحه را بسازيد يعني با ترکيب جاوااسکريپت و تگهاي اچ تي ام ال در body يک عنصر در صفحه وارد کنيد. کدهاي زير را بنويسيد و اجرا کنيد:

<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
document.write("<h1 align='center'> Hello my friends! </h1>");
</script>
</body>
</html>

اجراي کد

لازم بذکر است که شما مي توانيد براي نظم دادن و جلوگيري از شلوغي قسمت بدنه يک اسکريپت بصورت function در قسمت head تعريف کنيد و در قسمت بدنه آنرا فراخواني کنيد که در قسمت هاي بعد در اين مورد بيشتر توضيح خواهم داد.

فايل خارجي جاوااسکريپت

شما مي توانيد براي حفظ نظم تگهاي اچ تي ام ال در يک صفحه وب و يا براي جلوگيري از تکرار يک اسکريپت در صفحات يک وب سايت، کدهاي جاوااسکريپت را در يک فايل جداگانه نوشته و با پسوند js آنها را ذخيره کنيد سپس در هر قسمت و هر صفحه اي که لازم بود، وارد کنيد. خط زير را در برنامه Notepad نوشته و آنرا به اسم test.js ذخيره کنيد:

document.write(" JavaScript external file ")

حالا يک فايل اچ تي ام ال بسازيد و تگهاي زير را در آن وارد کنيد سپس با يک اسم دلخواه آنرا در همان پوشه که فايل جاوااسکريپت را ذخيره کرده ايد قرار دهيد:

<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript" src="test.js">
</script>
</body>
</html>

اگر مراحل را بدرستي انجام داده باشيد، جمله زير را در مرورگرتان مشاهده خواهيد کرد.

JavaScript external file

دقت کنيد که اگر فايل جاوااسکريپت را در پوشه اي جدا از فايل html قرار مي دهيد حتماً در خصوصيت src آدرس دقيق آنرا بنويسيد.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

متغيرها در جاوااسکريپت

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


JavaScript variables --- متغيرها در جاوااسکريپت

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

متغيرها در جاوااسکريپت

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

متغير چيست؟
انتخاب يک نام براي متغير
انواع متغيرها

متغير چيست؟

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

<script language="javascript"
type="text/javascript">
var strTest = "This is an example for variable."
document.write(txtTest)
</script>

اجراي کد

حالا مي پردازيم به جزئيات تعريف يک متغير در اين اسکريپت:

var strTest = "This is an example for variable."

اصطلاح var از کلمه variable مي آيد که نوشتن آن اختياري مي باشد، يعني مي توانيد يک متغير را بدون نوشتن آن هم تعريف کنيد ولي اگر مي خواهيد کد شما خوانا تر باشد بهتر است که از var استفاده کنيد. قسمت بعدي يعني strTest نامي است که شما براي آن متغير انتخاب مي کنيد و سپس علامت مساوي است که متغير را برابر با يک مقدار قرار مي دهد و در آخر هم مقدار تعيين شده براي متغير که در اينجا يک رشته متني است يا يک text string ميباشد که به همين دليل بايد آنرا بين دو علامت " " قرار دهيم تا عيناً محتويات آن در مرورگر نوشته شود.

انتخاب نام متغير

بهتر است نام يک متغير را طوري انتخاب کنيد که در عين سادگي، گويا بوده و يادآور نکاتي براي شما باشد چون هميشه کدهاي شما به چند خط ختم نميشود، گاهي اوقات ممکن است مجبور شويد بيش از صد خط کد در يک صفحه قرار دهيد. بطور مثال چون مقدار متغيردر اينجا يک رشته يعني string بود من سه حرف str را به ابتداي نام متغير اضافه کردم.

اما براي انتخاب نام متغير بايد نکات زير را رعايت کنيد:

  • نام يک متغير مي تواند از مجموع حروف، اعداد و علامت underline يا زيرين خط يعني _ تشکيل شود، که آغاز کننده نام نبايد يک عدد باشد و همچنين هيچگونه فاصله اي هم در آن نبايد باشد.
  • در جاوااسکريپت حروف کوچک با بزرگ متفاوت مي باشند يعني strTest با strtest کاملاً تفاوت دارد که اصطلاحاً مي گويند جاوااسکريپت case sensitive است.

انواع متغيرها

دو نوع متغير وجود دارد که تفاوت اين دو مدل در محل استفاده از آنها مي باشد. متغيرهاي کلي و سراسري که به آنها global گفته مي شود. اين متغيرها در سراسر يک فايل اچ تي ام ال کاربرد دارند يعني يکبار آنرا در ابتداي اسکريپت تعريف و مقدار دهي مي کنيد ولي در هر کجا از کد که مورد نياز باشد از آنها بهره مي گيريد. نوع ديگر آن متغيرهاي محلي يا local هستند که فقط در يک قسمت از اسکريپت کارآيي دارند که ممکن است در قسمت ديگري همان متغير با يک مقدار ديگري تعريف شود. معمولاً متغير هاي محلي در توابع يا function ها کاربرد دارند که يک متغير در هر تابع مي تواند مقادير متفاوت داشته باشد بدون اينکه پيغام خطايي توليد کند که در قسمت مورد نظر function ها را ياد خواهيد گرفت.

به قسمتي از اسکريپت که يک متغير در آن کاربرد دارد، حوضه يا scope آن متغير گفته مي شود.

با درک مفهوم متغيرها در جاوااسکريپت مي توانيم در صفحه بعد با چگونگي نمايش تاريخ و زمان در صفحات وب آشنا شويم.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

نمايش تاريخ و زمان در صفحه وب

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Date object --- تاريخ و زمان در جاوااسکريپت

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

تاريخ و زمان در جاوااسکريپت

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

Date Object
متدهاي شئ Date
تنظيم تاريخ و زمان

Date Object

يکي از ويژگي هايي که جاوااسکريپت دارد جمع آوري اطلاعات از سيستم کاربر و نمايش آنها در صفحات وب است. همانطور که ميدانيد زبان اچ تي ام ال به تنهايي قادر به انجام چنين کاري نيست اما با کمک زبانهاي ديگر تحت وب مانند Javascript ، مي تواند تا حدودي اين مشکل را برطرف کند. شئ هايي در جاوااسکريپت وجود دارند که توسط متدهاي مختلف، اطلاعات مورد نياز را از سيستم گرفته و در اختيار کاربران قرار مي دهند. يکي از اين object ها و شئ ها ، Date مي باشد که به کمک آن مي توانيم تاريخ و زمان سيستم را هنگام اجراي کد دريافت کنيم، سپس آنرا نمايش دهيم و يا اينکه در يک متغير ذخيره کنيم تا در صورت لزوم از آن بهره گيريم. اين object بصورت زير تعريف مي شود:

new Date()

به طرز نوشتن آن دقت کنيد که غير از اين باشد با پيغام خطا روبرو خواهيد شد چون جاوااسکريپت زبان حساسي است پس هر جا که حروف بزرگ است بايد بزرگ و هر جا کوچک است بايد کوچک نوشته شود. در آخر هم پرانتز مي گذاريد که در قسمتهاي بعدي همين صفحه کارآيي آنها را درک خواهيد کرد. اين شئ يک رشته متني شامل روز، ماه، سال، ساعت، دقيقه، ثانيه و اختلاف زماني با UTC را برميگرداند. UTC مخفف Coordinated Universal Time مي باشد که به آن Zulu time هم مي گويند و مطابق با استاندارد جهاني زمان است.

کد زير را در يک سند اچ تي ام ال وارد کنيد و پس از ذخيره، آنرا اجرا کنيد:

<script language="javascript"
type="text/javascript">
document.write ( new Date() )
</script>

متدهاي شئ Date

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

getDate(), getDay(), getMonth(), getYear(), getHours(), getMinutes(), getSeconds()

براي تعريف و استفاده از اين متدها بايد ابتدا شئ را نوشته، سپس يک نقطه بگذاريم و بعد از نقطه متد مورد نظر را بنويسيم.

براي درک بهتر مطالب گفته شده يک تمرين را با هم انجام مي دهيم. در يک صفحه وب، مي خواهيم زمان ورود يک کاربر به همان صفحه را اعلام کنيم. بطور مثال:

شما دقيقاً درساعت وارد اين صفحه شديد.

که اسکريپت آن براي برگرداندن زمان مورد نظر به صورت زير مي باشد:

<script language="javascript"
type="text/javascript">
var vorood = new Date()
document.write( vorood.getHours() + ":" + vorood.getMinutes() + ":" +
vorood.getSeconds() )
</script>

ابتدا شئ Date را تعريف کرده و در يک متغير به نام vorood ذخيره مي کنيم تا بکار بردن آن در قسمتهاي بعدي راحت تر باشد، سپس از شئ document و متد write براي چاپ نتيجه در صفحه وب استفاده کرده و متدهاي لازم براي برگرداندن اطلاعات مورد نياز را مي نويسيم. دقت کنيد که براي ترکيب متدها از علامت + استفاده کرديم، اين علامت باعث ترکيب و پيوند بين اجزاي يک اسکريپت مي شود که خاصيت آنرا در بخش بعدي operator ها يعني عملگرها توضيح خواهم داد. ازعلامت : هم بين ساعت، دقيقه و ثانيه استفاده شده و چون مي خواستيم که اين علامت عيناً در صفحه نوشته شود آنرا بين علامت نقل قول يعني "" گذاشتيم. در ضمن مي توانيد از کدهاي اچ تي ام ال هم استفاده کنيد تا زمان به شکل دلخواه شما در صفحه چاپ شود. بطور مثال اگر بخواهيد که صورت Bold در صفحه نوشته شود، به شکل زير عمل مي کنيد:

document.write("<b>"+ vorood.getHours()+ ":"+ ...... + "</b>")

نکته: هنگاميکه از متد getMonth() براي برگرداندن عدد ماه استفاده مي کنيد بايد هميشه آنرا بعلاوه عدد يک کنيد چون جاوااسکريپت اولين ماه ميلادي را برابر با عدد صفر قرار مي دهد.

document.write( new Date().getMonth()+1 )

در مورد متد getYear() هم اگر مي خواهيد نتيجه کامل برگردد يعني سال بصورت چهاررقمي نوشته شود بايد از متد getFullYear() استفاده کنيد.

اگر هم بخواهيد تمام مقادير بر اساس UTC برگردانده شوند، بايد اين کلمه را در وسط متد مورد نظر وارد کنيد. بدين صورت:

getUTCFullyear(), getUTCDate(), getUTCHours(), getUTCMinutes()

تنظيم تاريخ و زمان

شئ Date به غير از متدهاي ذکر شده در بالا، داراي متدهاي ديگري است که توسط آنها مي توانيد زمان و تاريخي را بصورت دلخواه تنظيم کنيد. در اينگونه متدها بجاي کلمه get بايد از set استفاده کنيد و مقدار معيني را در پرانتز وارد کنيد. بطور مثال مي خواهيم همين موقع را در سال 2008 داخل صفحه چاپ کنيم.

<script language="javascript"
type="text/javascript">
var zaman = new Date()
zaman.setFullYear(2008)
document.write ( zaman )
</script>

نتيجه اي که اين اسکريپت برميگرداند بصورت زير است، به روز هفته در اول خط و سال در آخر خط توجه کنيد که براي سال 2008 تنظيم شده است.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

Operators یا عملگرها در جاوااسکريپت

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Javascript Operators --- عملگرها در جاوااسکريپت

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

عملگرها در جاوااسکريپت

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

عملگر چيست؟
انواع عملگرها

عملگر چيست؟

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

انواع عملگرها

عملگرها در جاوااسکريپت به چند دسته تقسيم مي شوند:

عملگرهاي رياضي يا Arithmetic Operators: اين نوع عملگرها چهار عمل اصلي در رياضي را انجام مي دهند. علاوه بر آنها يک عملگر وظيفه نمايش خارج قسمت يک تقسيم را بعهده دارد و دو عملگر ديگر هر کدام به ترتيب يک واحد اضافه و يک واحد کم مي کنند که در جدول زير مشخص شده اند.

نتيجه | مثال | توصيف | عملگر
4 | x = 2, y = 2 x+y | جمع | +
2 | x = 5 , y = 3 x - y | تفريق | -
20 | x = 5 , y = 4 x * y | ضرب | *
5 | x = 20 , y = 4 x / y | تقسيم | /
3 | x = 19 , y = 4 x % y | خارج قسمت | %
x = 6 | x = 5 x++ | افزودن | ++
x = 4 | x = 5 x-- | کم کردن | --

عملگرهاي زير به نام Assignment Operators معروف هستند که يک مقداري را به يک متغير نسبت مي دهند.

برابر است با | مثال | عملگرها
x = y | x = y | =
x = x + y | x + = y | + =
x = x - y | x - = y | - =
x = x * y | x * = y | * =
x = x / y | x /= y | /=
x = x % y | x %= y | %=

عملگرهاي مقايسه اي: اين نوع عملگرها مقدارهاي دو متغير را با هم مقايسه مي کنند و نتيجه اين مقايسه يا درست است يا غلط که در دستورات شرطي جاوااسکريپت بسيار کاربرد دارند.

مثال | توصيف | عملگرها
x = 5 , y = 5 x == y | مقادير اگر برابر باشند نتيجه درست خواهد بود. | ==
x = 5 y = "5" x === y | مقايسه بين مقادير و جنس متغير که در مثال روبرو نتيجه غلط بازگردانده مي شود | ===
5 != 8 | اگر مقادير برابر نباشند نتيجه درست است | !=
8 > 5 | بزرگتر | >
8 < 10 | کوچکتر | <
5 >= 8 | بزرگتر يا مساوي که در اين مثال نتيجه غلط است | >=
5 <= 8 | کوچکتر يا مساوي که در اين مثال نتيجه درست است | <=

عملگرهاي منطقي: در اين مدل سه نوع عملگر وجود دارند که در حقيقت يک يا چند نتيجه را بررسي مي کنند و جواب را بازمي گردانند. اين عملگرها به اين شکل مي باشند:

&& , || , !

عملگر && در حقيقت مانند حرف اضافه " و " در فارسي عمل مي کند:

x = 5
y = 3
( x < 10 && y > 1)

در اينجا اگر مقدار متغير x کوچکتر از عدد 10 باشه و y بزرگتر از 1 باشه، نتيجه true بازگردانده مي شود. چون حرف و آمده است پس بايد دو طرف عملگر جواب درست باشد تا در مجموع نتيجه درست در بيايد.

عملگر || مانند کلمه " يا " در فارسي است:

x = 6
y = 3
( x == 5 || y == 5 )

همانطور که حدس زده ايد، نتيجه غلط است يعني false بازگردانده مي شود. چون يا آمده است پس حداقل يکي از طرفين عملگر بايد درست باشد تا نتيجه درست در بيايد اما اينجا هر دو طرف غلط است که در مجموع نتيجه غلط است. اما در حالت زير نتيجه درست بازگردانده مي شود:

( x == 5 || y < 5 )

عملگر ! در حقيقت يک عمليات و معادله را بررسي مي کند اگر جواب آن معادله درست نباشد نتيجه true يا همان درست را برميگرداند:

x = 5
y = 4
! ( x == y )

در اينجا در کل نتيجه درست است. حالا ببينيم که چه اتفاقي افتاده است، اول يک نگاهي به داخل پرانتز بياندازيد. شرط درستي در اين است که x برابر با y باشد، اما اينچنين نيست چون مقادير با هم متفاوت هستند ولي چون عملگر ! آمده است پس شرط درستي در اينست که نتيجه داخل پرانتز غلط باشد چون گاهي اوقات ما نياز داريم که در اسکريپت دو چيز را با هم مقايسه کنيم و اگر نتيجه غلط بود ادامه دهيم که اين علامت بکار ما مي آيد.

کاربرد عملگرها در متن

در بالا تمام مثالها براي اعداد بود ولي گاهي اوقات از بعضي از عملگرها مي توانيم براي رشته هاي متني هم استفاده کنيم:

strText01 = " Hello "
strText02 = "my friends!"
document.write ( strText01 + strText02 )

اجراي کد

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

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

دستورات شرطي در جاوااسکريپت

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


if...else دستورات شرطی

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

دستورات شرطی if...else

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

if
if...else
if...else if...else

يکي از مهمترين قابليت هاي زبان جاوااسکريپت، توانايي آن در انجام دادن عکس العملهاي متفاوت در شرايط مختلف است. بر اين اساس اين زبان قادر است که متغيرهاي مختلف را با هم مقايسه کند و شرطهايي را براي آنها تعيين کند تا به يک نتيجه دلخواه برسد.

دستور if

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

<script language="javascript" type="text/javascript">

var d = new Date()
var t = d.getHours()

if ( t < 10 )
{
document.write ( "<b> Good morning </b>")
}

</script>

حالا ببينيم که چه اتفاقي افتاده است، در خط سوم ما يک متغير بنام d تعريف کرديم که به آن شئ Date را نسبت داديم و در خط بعد از آن يک متغير ديگر که يکي از متدهاي آن شئ را مقدار دهي کرديم تا ساعت سيستم براي ما ذخيره شود، سپس با يک خط خالي قسمت شرط را جدا کرديم تا به خوانايي اسکريپت کمک کنيم. کلمه if را مي نويسيم، دقت کنيد که شرط را حتماً داخل پرانتز بايد نوشت و در آن هم همانطور که مشاهده مي کنيد از عملگر کوچکتر استفاده کرديم. در اينجا ساعت سيستم در متغير t ذخيره شده است و دستور if داره شرط کوچکتر بودن را بررسي مي کند. در خط بعدي هم علامت آکلاد { } را بکار برديم که در اينجا آنرا براي نظم و خوانايي بيشتر کد استفاده کرديم اما فراموش نکنيد که اين دستور ممکن است از چندين قسمت تشکيل شود که در آنصورت بکار بردن آکلاد لازم است تا بتوانيم هر قسمت را از هم جدا کنيم. در آخر هم دستور تايپ يک متن مناسب در صفحه را به عنوان نتيجه شرط نوشتيم.

اجراي کد

دستور if...else

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

if ( t < 10 || t == 10 ) {
document.write ( "<b> Good morning </b>" )
}
else
{
document.write ( "<b> Hello friends </b>")
}

اجراي کد

دستور if...else if...else

اين دستور را زماني مي توانيد استفاده کنيد که بخواهيد يک شرط در شرايط مختلف بررسي شود تا نتيجه هاي متفاوت هم بدست بيايد:

if ( t <= 10 ) {
document.write ( "<b> Good morning </b>" )
}
else if ( t > 10 && t < 13 ) {
document.write ( "<b> Hello friends </b>" )
}
else if ( t >= 13 && t < 18 ) {
document.write ( "<b> Good afternoon </b>" )
}
else {
document.write ( "<b> Good evening </b>" )
}

اجراي کد

در دستورات شرطي جاوااسکريپت به غير از مجموعه دستورات if يک مورد ديگر هم هست بنام دستور switch که در صفحه بعد به توضيح آن مي پردازيم.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

دستور switch

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


switch دستور

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

دستور switch

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

switch
case
break
default

switch

دستور switch يکي ديگر از دستورات شرطي جاوااسکريپت است که چندين شرط را براي متغيرها مقايسه مي کند تا نتايج مختلف بدست بيايد. در حقيقت دستور switch از تکرار if else جلوگيري مي کند. در مواردي که شرطها و نتايج آنها کم هستند مي توانيد از دستور if else استفاده کنيد اما براي شرطهاي زياد بهتر است switch را بکار بريد تا کد شما منظم تر باشد.

تنها مشکلي که اين دستور دارد اينست که از نسخه javascript 1.2 به بعد از آن پشتيباني شده که ممکن است بعضي از مرورگرهاي قديمي با اين دستور مشکل داشته باشند، ولي در ايران مشکلي نيست چون مطمئناً به علت استفاده رايگان از مرورگرها، ديگر کسي را پيدا نخواهيد کرد که مرورگر قديمي داشته باشد.

دستور سوئيچ مانند if داراي قسمتهايي است، که اجازه دهيد يک مثالي را بيان کنم و سپس به توضيح بخشهاي مختلف آن بپردازم.

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

<script language="javascript" type="text/javascript">

var d = new Date ()
var weekday = d.getDay ()

switch ( weekday )
{
case 0 :
document.write ("Sunday")
break
case 1:
document.write ("Monday")
break
case 2:
document.write ("Tuesday")
break
case 3:
document.write ("Wednesday")
break
case 4:
document.write ("Thursday")
break
case 5:
document.write ("Friday")
break
default:
document.write ("Saturday")
}
</script>

اجراي کد

خب حالا بپردازيم به توضيح کد تا ببينيم که چه اتفاقي افتاده است. ابتدا توسط شئ Date ، تاريخ و زمان سيستم را در يک متغير بنام d ذخيره کرديم و سپس در خط بعدي توسط متد getDay اين شئ ، عدد روز هفته را از سيستم بدست آورديم و در متغير weekday ذخيره کرديم. دقت کنيد که اين متد عدد برميگرداند نه خود روزهاي هفته را و در نظر داشته باشيد که مفسر جاوااسکريپت روز اول هفته را يکشنبه ميداند و عدد 0 را به آن تعلق ميدهد و روز دوشنبه را عدد يک و به همين ترتيب تا آخرين روز هفته که شنبه باشد عدد 6 را ميدهد.

اکنون نوبت به بررسي شرط رسيده که مي خواهيم از دستور سوئيچ استفاده کنيم. ابتدا خود دستور را مي نويسيم يعني همان کلمه switch و سپس يک پرانتز باز مي کنيم تا متغيري که بايد در شرايط مختلف بررسي شود را در آن بنويسيم. براي نظم اسکريپت يک آکلاد هم باز مي کنيم ولي در آخر اين مجموعه آنرا مي بنديم.

case

همانطور که مشاهده مي کنيد از کلمه case بجاي if else استفاده مي کنيم و حالت مختلف شرط را در جلوي آن مي نويسيم و سپس علامت : مي گذاريم. در حقيقت ما اينجا به مفسرجاوااسکريپت مي گوييم که اگر متغير ما که روزهاي هفته است برابر با صفر بود، نتيجه اين مي شود که بايد کلمه Sunday را در صفحه چاپ کني، در غير اينصورت برو حالت بعدي يعني case بعدي را مقايسه کن.

break

دستور break يکي از بخشهاي switch است که به مفسر جاوااسکريپت مي فهماند که در کجا قسمت case تمام مي شود و يک قسمت ديگر شروع مي شود، در حقيقت از تداخل قسمتهاي مختلف جلوگيري مي کند. دقت کنيد که شما هم بايد آنرا قبل از شروع case بعدي بنويسيد.

default

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

و در آخر هم آکلاد باز شده را مي بنديم تا پايان اين مجموعه از دستور سوئيچ مشخص شود.

در نظر داشته باشيد که دستورات شرطي بسيار کاربرد دارند و حتي ممکن است در يک اسکريپت چندين بار از اين دستورات استفاده کنيد.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

تکرار دستورات توسط حلقه ها
javascript loops

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


javascript loops --- تکرار دستورات توسط حلقه ها

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

تکرار دستورات توسط حلقه ها
javascript loops

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

for loop
while loop
do...while
break

هر گاه بخواهيد يک مجموعه کد به دفعات مشخص و يا رسيدن به يک نتيجه مشخص تکرار شود، بايد از حلقه استفاده کنيد. حلقه ها در جاوااسکريپت دو نوع هستند، يکي حلقه for و ديگري حلقه while که هر کدام از آنها هم ممکن است بسته به موقعيت کد مدلهاي مختلفي داشته باشند که در ادامه با کار آنها آشنا خواهيد شد.

حلقه for

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

<script language="javascript"
type="text/javascript">

for ( i = 0; i <= 10; i++ )
{
document.write ( " Number " + i + "<br />")
}
</script>

اجراي کد

خب براي اجراي اين مثال ابتدا کلمه for را نوشتيم تا شروع حلقه را به مفسر اعلام کنيم سپس يک پرانتز بايد باز کنيم تا پارامترهاي لازم براي تکرار در اين حلقه را وارد کنيم. اولين پارامتري که بايد وارد شود، يک متغير است با مقداردهي اوليه که به آن initial expression يا همان عبارت آغازين مي گويند. سپس دومين پارامتر که يک شرط است و مفهوم آن اينست که حلقه بايد ادامه پيدا کند تا متغير کوچکتر يا برابر با عدد 10 بشود. سومين پارامتر به عبارت افزاينده يا increment expression معروف است که در اينجا به اين مفهوم مي باشد که در هر بار اجراي حلقه يک واحد بايد به متغير افزوده شود. در انتهاي اعلام پارامترها پرانتز را مي بنديم. فقط دقت کنيد که در اين پرانتز هر پارامتري که نوشته شود بلافاصله بعد از آن بايد علامت ; قرار گيرد تا تداخلي بين آنها بوجود نيايد.

بطور ساده پارامترهاي داخل پرانتز را مي توانيم اينچنين بيان کنيم: مقدار اوليه متغير سپس مقدار نهايي و در آخر هم ترتيب افزايش متغير در هر تکرار حلقه. ناگفته نماند که حتماً نبايد مقدار افزايشي باشد، مي تواند به ترتيب کم شود که همه مقادير برعکس خواهند شد.

در خط بعد هم نتيجه را مابين آکلاد مي گذاريم تا به اسکريپت نظم دهيم و سپس دستور تايپ نتيجه که کلمه number را چون مي خواهيم عيناً در صفحه چاپ شود داخل " " گذاشتيم و بعد + که با پارامترهاي ديگه ترکيب بشود. البته در اينجا بجاي علامت بعلاوه مي توانيد کاما هم بگذاريد و بعد از آن متغير تعريف شده و در انتهاي آنها از تگ br استفاده کرديم تا هربار که حلقه تکرار مي شود نتيجه در يک خط جديد چاپ شود.

حلقه while

نوع ديگر حلقه ها، حلقه while مي باشد که بر خلاف حلقه for لزومي ندارد که متغيرها را در داخل پرانتز به عنوان پارامتر حلقه اعلام کنيم و همچنين در مواردي هم که مقدار انتهايي حلقه مشخص نيست مي توانيم از اين نوع استفاده کنيم چون کد مورد نظر تا جايي که نتيجه دلخواه بدست بيايد تکرار خواهد شد. البته اين نوع حلقه را مي توانيم بجاي حلقه for هم بکار بريم يعني اگر مقدار نهايي متغير هم داشته باشيم اين حلقه کاربرد خواهد داشت. مثال بالا را در مورد اين حلقه مي توانيم به اين صورت ذکر کنيم:

var i = 0
while (i <= 10)
{
document.write(" Number " + i + "<br />")
i++
}

اجراي کد

کلمه while را مي توانيم ترجمه کنيم به ماداميکه ، پس در اينجا ما متغير را جداگانه تعريف کرديم و حالا مي گوييم، ماداميکه شرط کوچکتر يا مساوي 10 بودن برقرار نيست حلقه را تکرار کن و يک واحد به آن اضافه کن تا بالاخره شرط ما درست دربيايد.

حلقه Do...while

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

var i=0
do
{
document.write(" Number " + i + "<br />")
i=i+1
}
while (i <= 10)

اجراي کد

در اينجا همه چي مانند مثالهاي بالا است با اين تفاوت که کلمه do به ابتداي حلقه اضافه شده و بررسي شرط هم به انتهاي حلقه منتقل شده. همانطور که ميدانيد يکي از معني هاي do انجام دادن کاري است. مفهوم اين کد هم بدين گونه است که دستور چاپ را انجام بده و يک واحد به متغير اضافه کن ماداميکه متغير کوچکتر يا مساوي با عدد 10 بشود. پس اين دستورات حداقل يکبار اجرا مي شوند تا به شرط برسند، شما مي توانيد براي رسيدن به صحت اين گفته مقدار متغير را بجاي صفر به يک عدد ديگر تغيير دهيد مثلاً عدد 20 را بدهيد و يکبار کد را اجرا کنيد.

در اين مثال نوع ديگر افزايش هم نشان داده شده است که شما مي توانيد از اين مدل هم استفاده کنيد.

break

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

براي جلوگيري از همچين اتفاقي مي توانيد از دستور break استفاده کنيد و يک شرطي هم براي آن در نظر بگيريد تا از حلقه هاي بي نهايت جلوگيري شود.

var i = 11
while (i >= 10)
{
document.write(" Number " + i + "<br />")
i++
if ( i == 21 ) break
}

اجرای کد

در اين حلقه هيچگاه شرط درست نخواهد بود و تا بي نهايت ادامه پيدا مي کند اما با استفاده از دستور break و شرطي که در نظر گرفتيم از تکرار نا محدود اين حلقه جلوگيري کرديم در حقيقت از حلقه خارج شديم. پس استفاده از اين دستور را براي حلقه هاي پيچيده در نظر داشته باشيد تا با مشکلات جدي مواجه نشويد.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

آرايه ها در جاوااسکريپت

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


javascript Array --- آرايه ها

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

آرايه ها
Array

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

آرایه چیست؟
خصوصیت آرایه
متدهای آرایه

آرايه چيست؟

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

var weekdays = new Array(7)
weekdays[0] = "Shanbeh"
weekdays[1] = "Yekshanbeh"
weekdays[2] = "Doshanbeh"
weekdays[3] = "Seshanbeh"
weekdays[4] = "Chaharshanbeh"
weekdays[5] = "Panjshanbeh"
weekdays[6] = "Jomeh"

اول از همه يک متغير بنام weekdays تعريف کرديم و آنرا برابر با آرايه جديد قرار داديم، دستور آرايه را بايد با new Array شروع کنيد که به طرز نوشتن حروف بايد توجه کنيد، سپس پرانتزي باز کرده و تعداد مقادير را در آن مي نويسيم. به اين عدد داخل پرانتز index يا انديس مي گويند. انديس ها از صفر شروع مي شوند.

در خطوط بعد، نوبت به مقداردهي هر انديس مي رسد که متغير را مي نويسيم و هر انديس را بايد در کروشه [ ] بگذاريم و سپس آنها را برابر با يک مقدار قرار دهيم که اين مقادير هر چيزي مي توانند باشند مانند رشته هاي متني و يا اعداد.

مثال بالا را مي توان بصورت زير هم نوشت:

var weekdays = new Array ("Shanbeh","Yekshanbeh",...)

يعني بجاي نوشتن انديس کلي در پرانتز، مقادير هر انديس را بنويسيم و توسط کاما آنها را از هم جدا کنيم.

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

for ( i=0; i<7; i++ ) {
document.write ( weekdays[ i ] + "<br />" )
}

اجراي کد

خصوصيت آرايه

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

خصوصيتي که بيشترين کاربرد را براي آرايه دارد، length مي باشد. وظيفه اين خصوصيت نمايش انديس کلي يک آرايه است. اگر بخواهيم در مثال بالا اين خصوصيت را بکار بريم، بايد خط زير را بعد يا قبل از حلقه for بکار بريم:

document.write ( weekdays.length + "<br />" )

بعد از وارد کردن اين کد و اجراي اسکريپت، عدد هفت در صفحه نوشته خواهد شد چون انديس ما در اينجا هفت بود.

متدهاي آرايه

آرايه داراي متدهايي هم هست که نحوه تعريف کردن آنها همانند خصوصيت است و تنها فرقي که دارد بعد از نوشتن متد بايد پرانتز هم بگذاريد. متدهاي آرايه عبارتند از:

concat(), join(), pop(), shift(), push(), unshift(), reverse(), slice(), sort(), splice(), toString(), valueOf()

متد concat براي ترکيب مقادير دو يا سه آرايه بکار مي رود. اين متد هيچ چيزي را در آرايه ها تغيير نمي دهد و فقط مقادير تعريف شده را در صفحه چاپ مي کند. مثال

متد join تقريباً مانند متد قبلي عمل مي کند و کليه مقادير را بصورت يک رشته متني در صفحه نشان مي دهد با اين تفاوت که در اين متد مي توانيد يک علامت مانند نقطه، تعيين کنيد تا بين مقادير چاپ شده در صفحه قرار گيرد. بصورت پيش فرض اين علامت، کاما مي باشد. مثال

متد pop آخرين مقدار آرايه را جدا کرده و در صفحه نمايش مي دهد. دقت کنيد که اين متد در خصوصيت length تأثير مي گذارد يعني اگر بعد از اين متد خصوصيت length را بکار بريد، يک انديس کمتر نشان مي دهد. مثال

متد shift برعکس متد قبلي است يعني اين متد اولين مقدار آرايه را جدا مي کند و نشان مي دهد. مثال

متد push يک يا چند مقدار را به آخر يک آرايه اضافه مي کند و انديس جديد برمي گرداند. مثال

متد unshift يک يا چند مقدار به ابتداي يک آرايه اضافه مي کند و انديس جديد بر مي گرداند. دقت کنيد که اين متد در مرورگر اينترنت اکسپلورر بدرستي کار نمي کند. مثال

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

متد slice يکسري از مقادير موجود در يک آرايه را جدا مي کند که در اين متد شماره انديس مقداري که مي خواهيد از آنجا جداسازي شروع شود را بايد بنويسيد و همچنين مي توانيد آخرين مقدار هم مشخص کنيد که اگر آنرا معين نکنيد تا آخرين مقدار انتخاب خواهد شد. مثال

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

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

متد toString مقادير يک آرايه را تبديل به يک رشته متني مي کند. مثال

اينها متدهايي هستند که کاربردشان در آرايه ها متداول است. شايد بنظرتان غير مفيد بيايند اما در بعضي جاها مي توانند به کمک شما بيايند و اسکريپت شما را خلاصه تر کنند.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

توابع در جاوااسکريپت

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


javascript functions --- توابع

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

توابع
Functions

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

تابع چیست؟
فراخوانی یک تابع
آرگومان یا argument
 دستور return

تابع چیست؟

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

توابع يا همان functions در جاوااسکريپت مي توانند کمک بزرگي به اين سازمان دهي کنند. شما مي توانيد يک مجموعه کد را که بايد در جاهاي مختلف تکرار شود را به صورت يک تابع تعريف کنيد و در هر جاي اسکريپت به آن نياز داشتيد آنرا فراخواني کنيد و از نوشتن مجدد بپرهيزيد. پس يک تابع، مجموعه کدي است که مي توان آنرا در جاهاي مختلف اسکريپت استفاده کرد بدون آنکه نياز به نوشتن مجدد آن کدها باشد. يک تابع مي تواند هر دستوري از جاوااسکريپت و يا حتي يک خط کد ساده باشد:

function message ( )
{
alert ( " Hello friends! " )
}

همانطور که مشاهده مي کنيد براي تعريف يک تابع از کلمه function استفاده مي شود و دقت کنيد که حروف آن بايد حتماً کوچک باشد. بعد از نوشتن دستور function نوبت به تعيين يک اسم واحد براي اين تابع است که بهتر است اين اسم متناسب با وظيفه اي که اين مجموعه قرار است انجام دهد باشد چون بخاطر آوردن آن هم راحتتر خواهد بود. سپس پرانتز مي گذاريم تا در صورت لزوم پارامترهايي را در آن مشخص کنيم که به اين پارامترها آرگومان و يا argument مي گويند. طبق معمول هم با گذاشتن علامت آکلاد مشخص مي کنيم که اين مجموعه در کجا شروع و در کجا ختم مي شود که در بين اين علامت هم کدهاي جاوااسکريپت را وارد مي کنيم. در اينجا يک دستوري نوشته شده که هنگام فراخواني اين تابع و اجراي کد، يک پنجره باز مي کند و عبارت متني داخل پرانتز را نمايش مي دهد که در بخشهاي بعدي در مورد اينگونه پيغامها و پنجره ها بيشتر توضيح خواهم داد.

شما يک تابع را در هر کجاي يک سند html مي توانيد بکار بريد. اگر دستوراتي است که هنگام باز شدن صفحه وب بايد اجرا شوند و يا آماده اجرا باشند پس بهتر است در قسمت head نوشته شوند. حتي مي توانيد يک تابع را در فايل خارجي جاوااسکريپت که با پسوند js ذخيره مي شود وارد کنيد تا در صفحات مختلف آنرا بکار بريد.

فراخواني يک تابع

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

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

<html>
<head>
<title> Call function </title>

<script type="text/javascript" type="text/javascript">
function message ( )
{
alert ( " Hello friends! " )
}
</script>

</head>
<body>

<form>
<input type="button" onclick="message( )" value="Click me">
</form>

</body>
</html>

اجراي کد

نگران دستور alert و onclick نباشيد چون در بخشهاي بعدي با آنها آشنا خواهيد شد. فقط به فراخواني تابع دقت کنيد که چگونه بکار برده مي شود.

آرگومان يک تابع

گاهي اوقات هنگام تعريف يک تابع، آرگومان و يا پارامتري را براي آن داخل پرانتز تعيين مي کنيد تا هنگام صدا زدن تابع، آن آرگومان مقداردهي شود. در کل مي توان گفت که يک آرگومان، متغيري است که هنگام صدا زدن تابع مقدار آن ارسال مي شود تا تابع از آن استفاده کند. مي توانيم مثال بالا را با يک آرگومان تعريف کنيم:

function message ( msg )
{
alert ( msg )
}
</script>

<input type="button" onclick="message( 'Hello friends!' )" value="Click me">

در اينجا يک آرگومان بنام msg تعيين کرديم تا هنگام فراخواني تابع، مقدارش به تابع فرستاده شود و نتيجه آن اجرا شود. در حقيقت عبارت Hello friends مقدار اين آرگومان مي باشد. تعيين آرگومان هيچ محدوديتي ندارد و فقط بايد آنها را با علامت کاما از هم جدا کنيد.

دقت کنيد که در دستورات جاوااسکريپت، بين دو علامت " " بايد از ' ' استفاده شود چون اگر مجدداً از خود علامت نقل قول يعني " " استفاده کنيد با پيغام خطا مواجه مي شويد.

بازگرداندن یک مقدار توسط دستور return

توابع جاوااسکريپت داراي يک دستوري بنام return هستند که وظيفه اين دستور برگرداندن مقادير تعريف شده در آن تابع است.

function greeting ( ) {
return ( " Hello world! " )
}
.......

document.write ( greeting( ) )

اين مجموعه کد را اگر بدون استفاده از return اجرا کنيد، نتيجه درست نخواهيد گرفت. به يک مثال ديگر توجه کنيد:

<html>
<head>
<title> return statement </title>

<script type="text/javascript" type="text/javascript">
function total (a,b )
{
x = a * b
return x
}
</script>

</head>
<body>
<script type="text/javascript" type="text/javascript">
price = total ( 4, 15 )
document.write ( price )
</script>
</body>
</html>

اجراي کد

همانطور که مشاهده مي کنيد دو آرگومان براي تابع total تعريف شده است که در متغير x ذخيره مي شوند و توسط دستور return مقدارشان به تابع ارسال خواهد شد.

در نظر داشته باشيد که توابع در جاوااسکريپت بسيار کاربرد دارند و شما هنگام نوشتن اسکريپت خود پي به اهميت آنها خواهيد برد مخصوصاً زماني که يک سري کد را بخواهيد در کليه صفحات يک وب سايت بکار بريد که مي توانيد آنها را بصورت يک تابع در يک فايل خارجي جاوااسکريپت ذخيره کنيد و سپس در هر صفحه آن تابع را فراخواني کنيد.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

پنجره هاي ارتباط با کاربر
popup box

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


popup boxes --- پنجره هاي ارتباط با کاربر

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

پنجره های ارتباط با کاربر
popup boxes

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

alert
confirm
prompt

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

اين پنجره ها عبارتند از: پنجره alert ، پنجره confirm و پنجره prompt .

پنجره Alert

پنجره alert ، حاوي يک اخطاريه براي کاربر است که در آن هشداري داده مي شود تا کاربر متوجه کاري که مي کند باشد. دستور اين پنجره به صورت زير است:

alert (" text ")

اين پنجره فقط داراي يک دکمه OK است که کاربر بعد از خواندن آن اخطاريه با زدن دکمه ok ، پنجره را مي بندد.

<html>
<head>
<script type="text/javascript" type="text/javascript">
function alertbox ( ) {
alert ( " This is an Alert box! " )
}
</script>
</head>

<body>
<form>
<input type="button" onclick="alertbox ( )" value="Click here">
</form>
</body>

</html>

اجراي کد

پنجره Confirm

اين مدل پنجره ، همانطور که از اسمش پيداست براي گرفتن تأييد از کاربر اجرا مي شود. اين پنجره داراي دو دکمه OK و Cancel مي باشد که با زدن دکمه OK توسط کاربر مقدار true بازگردانده مي شود و با زدن Cancel مقدار false برگردانده مي شود. دستور اين پنجره به اين صورت است:

confirm ( " text " )

اين پنجره براي مواقعي خوب است که شما نياز به جواب کاربر براي ادامه مطلبي يا چيزي داريد، در صورتيکه کاربر تأييد کند آن مطلب ادامه پيدا مي کند و در غير اينصورت همانجا متوقف خواهد شد.

<html>
<head>
<script type="text/javascript" type="javascript">
function confirmbox ( )
{
var button = confirm (" press a button.")
if (button == true)
{
document.write (" You pressed OK button. ")
}
else
{
document.write (" You pressed Cancel button.")
}
}
</script>
</head>

<body onload="confirmbox()">

</body>

</html>

اجراي کد

در اين اسکريپت ما ابتدا يک تابع در قسمت head تعريف کرديم سپس دستور confirm را در يک متغير بنام button ذخيره کرديم تا بتوانيم براي اين متغير شرطي را تعيين کنيم. همانطور که گفتيم اگر کاربر دکمه OK را بزند، مقدار true برگردانده مي شود پس شرط را بر اين روال گرفتيم که اگر مقدار true بازگردانده شد متني در صفحه چاپ شود و در غير اينصورت متني ديگر نوشته شود. سپس اين تابع را در تگ بدنه و در رويداد onload قرار داديم تا به محض باز شدن صفحه پنجره confirm اجرا شود. رويداد onload را در بخش بعدي ياد خواهيد گرفت.

پنجره prompt

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

prompt ( "text or question", " default value " )

در قسمت اول يک متن که معمولاً سؤال است را وارد مي کنيد تا در پنجره ظاهر شود و در قسمت دوم يک مقدار پيش فرض براي راهنمايي کاربر وارد مي کنيد که معمولاً آن قسمت را خالي مي گذارند تا کاربر آن مقدار را وارد نمايد. البته اگر هم شما مقدار پيش فرض را وارد نماييد، باز کاربر قادر به وارد کردن مقدار ميباشد.

<html>
<head>
<script type="text/javascript">
function promptbox ( )
{
var name=prompt("Please enter your name", "name...")
if (name!=null && name!="")
{
document.write("Hello " + name + " and welcome to this
      page.")
}
}
</script>
</head>

<body onload="promptbox()">

</body>
</html>

اجراي کد

مانند مثال قبل عمل کرديم با اين تفاوت که اين بار از دستور prompt استفاده شده است. فقط به يک نکته دقت کنيد که در دستور شرط ما متغير name را نا مساوي با مقدار null قرار داديم. null به معني هيچ چيز ميباشد و در اينجا آنرا بکار گرفتيم تا اگر کاربر بعد از باز شدن پنجره دکمه cancel را زد و يا هيچ اسمي وارد نکرد تغييري در صفحه ايجاد نشود. شما مي توانيد يکبار آنرا حذف کنيد و نتيجه اجراي کد را ببينيد.

در حال حاضر شما سه نوع پنجره ارتباط با کاربر را فرا گرفتيد که دو مدل اول بيشترين کاربرد را در کدنويسي شما خواهند داشت.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

رويدادها در جاوااسکريپت
javascript events

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Javascript Events --- رويدادها و حوادث

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

رويدادها و حوادث
Javascript Events

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

رویدادهای موس
رویدادهای کیبورد
رویدادهای فرم
رویدادهای صفحه وب و مرورگر

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

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

در کل رويدادها باعث مي شوند تا جاوااسکريپت اينگونه حرکات را شناسايي و درک کند.

رويدادها مانند بقيه خصوصيات تگهاي اچ تي ام ال هستند که بايد در ميان تگها قرار گيرند و آنها را برابر با يک کد کوتاه جاوااسکريپت و يا اسم يک تابع تعريف شده بايد قرار داد.

براي درک بهتر مطلب، موس خود را بر روي اين جمله بياوريد.

رويداد و کد استفاده شده به صورت زير است:

<span onMouseOver="alert('Salam doost e man')">

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

رويدادهاي موس

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

onClick براي کليک کردن دکمه چپ موس توسط کاربر. مثال

onDblClick رويداد براي دوبار کليک دکمه چپ موس. مثال

onMouseDown فشار آوردن بر روي دکمه چپ موس. مثال

onMouseUp رها کردن دکمه موس پس از فشردن آن. مثال

onMouseOver قرار گرفتن نشانگر موس بر روي يک چيزي. مثال

onMouseOut خارج شدن موس از روي يک چيزي. مثال

رويدادهاي کيبورد

در اين رويدادها، جاوااسکريپت نسبت به فشردن يک کليد بر روي کيبورد توسط کاربر، عکس العمل نشان خواهد داد.

onKeyPress فشردن يک کليد کيبورد. مثال

onKeyDown مانند رويداد بالا براي فشردن يک کليد. مثال

onKeyUp رها کردن يک کليد فشرده شده. مثال

رويدادهاي فرم

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

onFocus هنگاميکه توسط موس و يا دکمه Tab کيبورد بر روي يکي از اجزاي فرم متمرکز شويد. مثال

onBlur هنگاميکه تمرکز از روي يکي از اجزاي فرم خارج شود. مثال

onSelect انتخاب کردن يک متن در صفحه يا در يک فرم. مثال

onChange تغيير در اجزاي فرم، مانند تغيير متن در کادر متني. مثال

onSubmit فشردن دکمه تأييد يک فرم. مثال

onReset فشردن دکمه reset يا همان پاک کردن اطلاعات فرم. مثال

رويدادهاي يک صفحه

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

onLoad تکميل شدن يک صفحه وب يا يک تصوير در مرورگر. مثال

onUnload بستن مرورگر يا خروج از يک صفحه وب. مثال

onResize تغيير اندازه پنجره مرورگر. مثال

يک رويداد ديگر هست که مي توان هم براي يک صفحه و هم براي يک عکس بکار برد:

onError اين رويداد زماني اجرا مي شود که يک عکس به هر دليلي لود نشود يعني در جاي خود قرار نگيرد. مثال

معمولاً براي رويدادها، ابتدا يک تابع تعريف مي شود تا هنگام نوشتن رويداد در يک تگ اچ تي ام ال، نظم برقرار باشد و از شلوغي تگ جلوگيري شود. بيشترين کاربرد اين رويدادها در تأييد اعتبار فرمها و پرسشنامه ها مي باشند که در يک بخش مجزا آنرا توضيح خواهم داد.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

شئ ها در جاوااسکريپت
javascript objects

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Javascript Objects --- شئ ها

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

شئ ها در جاوااسکريپت
Javascript Objects

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

object چيست؟
انواع object
دستور with
روش ساخت شئ
دستور prototype

در بخشهاي قبل با بعضي از object ها يا همان شئ هاي جاوااسکريپت مانند، شئ Date و آرايه ها آشنا شديد. در اين صفحه قصد داريم در مورد شئ هاي ديگر در جاوااسکريپت صحبت کنيم.

شئ جاوااسکريپت چيست؟

وظيفه شئ ها را مي توان شبيه به متغير ها دانست اما شئ ها بسيار کامل تر از متغيرها هستند چون آنها مي توانند اطلاعات بيشتري را در خود ذخيره کنند و همچنين تفاوت ديگري هم که با متغيرها دارند اينست که متغيرها بايد تعريف شوند تا جاوااسکريپت آنها را بشناسد اما بعضي از شئ ها در جاوااسکريپت ساخته و تعريف شده اند. اين شئ هاي از قبل تعريف شده را درون ساخت يا Built-in مي گويند مانند شئ Date . البته همانطور که ميدانيد بايد همين اشياء هم در ابتداي کد يکبار ديگر با دستور new تعريف شوند:

mydate = new Date ( )
name = new Array ( )

پس فراموش نکنيد که از اين دستور براي شروع يک object استفاده کنيد.

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

انواع اشياء

به غير از شئ هاي درون ساخت Date و Array که در صفحات قبل با آنها آشنا شديد، شئ هاي درون ساخت ديگر جاوااسکريپت عبارتند از شئ String و Math و شئ هايي که مربوط به HTML DOM مي شوند. در بخش هاي بعدي به ترتيب به توضيح هر کدام از اين اشياء خواهيم پرداخت.

دستور with

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

with ( name ) {
.... javascript code ....
}

روش ساخت يک شئ

در بالا صحبت از يک سري اشياء شد که جاوااسکريپت از قبل با آنها آشناست اما گاهي اوقات نياز هست که يک شئ را خودتان تعريف کنيد تا بهتر بتوانيد اسکريپت خود را مديريت کنيد. البته توسط دستور with هم مي توانيد اينکار را انجام دهيد، به اين صورت که اسم شئ مورد نظر را بجاي name در الگوي بالا بنويسيد و خصوصيت و متد آنرا در خطوط بعدي بين { } تعريف کنيد.

اما اگر بخواهيد يک شئ را در اسکريپت خود بسازيد نياز به دو چيز داريد، ابتدا يک تابع سازنده که به آن Constructor مي گويند و در آن نوع شئ تعيين مي شود، سپس به نمونه شئ که از آن تابع استفاده مي کند و به آن Instance مي گويند که توسط دستور new تعريف مي شود. اين مطلب ممکن است کمي گيج کننده باشد اما به مثال زير توجه کنيد تا کاملاً به ساخت شئ توسط خودتان تسلط پيدا کنيد.

مي خواهيم يک شئ براي اتومبيل تعريف کنيم که خصوصياتي مانند اسم، رنگ و مدل را داشته باشد. براي اينکار ابتدا يک تابع بايد تعريف کنيم بنام car و خصوصيات آنرا به عنوان پارامترهايش در پرانتز بنويسيم و سپس اين پارامترها را بر اساس خصوصياتش مقداردهي مي کنيم:

function Car ( name, model, color ) {
this.name = name
this.model = model
this.color = color
}

به عبارت this دقت کنيد، اين يک دستور جاوااسکريپت است و به شئ که در حال تعريف آن هستيم، اشاره دارد و در حقيقت به مفسر جاوااسکريپت مي فهماند که اين خصوصيت شئ تعريف شده با اين مقدار است و شما بايد از اين دستور استفاده کنيد تا خصوصيت يک شئ را برايش تعريف کنيد و مقدار آنها را هم مانند بالا مشخص کنيد.

حالا بايد يک شئ جديد براي آن بسازيد که اين شئ جديد را در متغيري بنام mycar ذخيره مي کنيم:

mycar = new Car ( "Corvette", "Z06", "Red" )

اين خط کد به جاوااسکريپت مي فهماند که يک شئ بنام mycar داراي خصوصيات اسم که Corvette و مدل Z06 و رنگ Red مي باشد. شما مي توانيد هر شئ ديگر که بخواهيد با دستور new بسازيد:

thecar = new Car ( "BMW", "Z4", "Silver" )

الان مي خواهيم از شئ اول اسم ماشين و از شئ دوم رنگ را در صفحه چاپ کنيم:

document.write ( mycar.name + "<br />" )
document.write ( thecar.color )

اجراي کد

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

object.methodname( ) = function_name

object شئ است که ساختيم، methodname نام متدي است که شما در نظر مي گيريد و function name هم اسم تابعي که بايد بسازيد. سپس هر کجا که لازم بود از متد استفاده کنيد ابتدا شئ و سپس با گذاشتن يک نقطه متد را به همراه پرانتز مي نويسيد که اگر اين متد پارامتري هم داشت بايد آنرا داخل پرانتز معين کنيد.

متدي که مي خواهيم براي شئ Car بسازيم را بايد ابتدا بصورت يک تابع تعريف کنيم:

function displaycar ( ) {
var result = " I like " + this.name + " " + this.model + " with " + this.color + " color."
document.write ( result )
}

حالا با استفاده از دستور this اين تابع را به عنوان متد شئ Car تعريف مي کنيم:

function Car ( name, model, color ) {
this.name = name
this.model = model
this.color = color
this.displaycar = displaycar
}

بعد از تعريف توابع، شئ را توسط دستور new مي سازيم و متد را اجرا مي کنيم:

mycar = new Car ( "Corvette", "Z06", "Red" )
mycar.displaycar ( )

اجراي کد

دستور prototype

در طول اسکريپت شما، ممکن است به جايي برسيد که نياز داشته باشيد يک خصوصيت و يا يک متد ديگر براي شئ ساخته شده در خارج از آن توابع تعريف شود که با استفاده از دستور prototype مي توانيد آنها را تعريف کنيد. الگوي اين دستور به اين صورت مي باشد:

object.prototype.method or property = value

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

در صفحات بعدي، با شئ هاي درون ساخت string ، math و همچنين شئ هاي مربوط به HTML DOM آشنا خواهيد شد.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

شئ رشته هاي متني
String Object

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


String Object --- شئ رشته هاي متني

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

شئ رشته هاي متني
String Object

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

شئ رشته
خصوصيت اين شئ
متدهاي شئ

شئ رشته يا String

شئ String يکي ديگر از شئ هاي درون ساخت جاوااسکريپت ميباشد و براي کار کردن روي متنها استفاده مي شود. رشته هاي متني عبارتند از کليه کاراکترهايي که بتوان توسط کيبورد تايپ کرد و تا زماني که اين کاراکترها بين دو علامت " " قرار بگيرند، جاوااسکريپت آنها را در شئ String ذخيره خواهد کرد.

البته شما مي توانيد يک رشته متني را بصورت خيلي ساده در يک متغير ذخيره کنيد و نيازي هم به اين شئ نداشته باشيد، مانند کد زير:

mytxt = "This is a string."

شئ String داراي خصوصيات و متدهايي است که توسط آنها مي توانيد تسلط بيشتري روي رشته هاي متني داشته باشيد.

مطابق تمام اشياء در جاوااسکريپت، ابتدا بايد اين شئ را توسط دستور new تعريف و در يک متغير ذخيره کنيد:

mytxt = new String ( "This is a string." )

خصوصيت شئ String

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

اگر بخواهيم طول شئ بالا را محاسبه کنيم، بايد بصورت زير عمل کنيم:

document.write ( mytxt.length )

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

متدهاي شئ String

همانطور که ميدانيد براي تعريف يک متد، ابتدا شئ را نوشته سپس يک نقطه مي گذاريم و متد مورد نظر را به همراه پرانتز مي نويسيم که اگر اين متد پارامتري هم داشت بايد آنرا داخل پرانتز بنويسيم. الگوي کلي تعريف متد براي شئ String بصورت زير است:

object.methodname ( )

اکنون مي پردازيم به معرفي متدهاي اين شئ. دقت کنيد بعضي از اين متدها در مرورگر اينترنت اکسپلورر اجرا نمي شوند. فراموش نکنيد که به سورس کد مثالها هم دقت کنيد.

anchor اين متد رشته را بصورت آنکر در صفحه در مي آورد که کد اچ تي ام ال آن به اين صورت خواهد بود:

<a name="anchor_name" />

مثال

big متن را بصورت ضخيم و بزرگ ذخيره مي کند. مثال

blink اين متد، متن را بصورت چشمک زن در مي آورد ولي در مرورگر IE اجرا نمي شود. مثال

bold يک رشته را بصورت bold در مي آورد. مثال

charAt توسط اين متد، مي خواهيد که بطور مثال کاراکتر پنجم از يک رشته را اعلام کند. دقت کنيد که اولين کاراکتر در يک رشته شماره صفر است. مثال

charCodeAt شماره موقعيت کاراکتر در يک رشته را ميدهيد و جاوااسکريپت يونيکد آن را برميگرداند. اولين کاراکتر مانند بالا صفر ميباشد. مثال

concat دو يا چند رشته را به هم پيوند ميدهد. مثال

fixed متن چاپ شده در صفحه بصورت حروف تايپي خواهد بود. مثال

fontcolor تغيير رنگ فونتها که اسم رنگ يا کد هگز را به عنوان پارامتر در پرانتز بايد معين کنيد. مثال

fontsize تعيين سايز فونت ها که سايز را بايد در پرانتز بنويسيد. مثال

fromCharCode يونيکد را ميدهيد و جاوااسکريپت کاراکتر برميگرداند. مثال

indexOf اين متد دو پارامتر دارد که الگوي آن به صورت زير است:

StringObject.indexOf ( searchvalue, fromindex )

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

italics کاراکترهاي يک رشته به صورت ايتاليک نوشته مي شوند. مثال

link براي ساختن لينک بکار مي رود. مثال

match مانند متد indexOf عمل مي کند با اين تفاوت که هر کلمه را جستجو کنيد، اگر پيدا کند همان کلمه را برميگرداند و اگر پيدا نکند مقدار null برميگرداند. مثال

replace اين متد کاراکترهايي را جستجو مي کند و به محض پيدا کردن اولين کاراکترهاي همانند، کاراکترهاي ديگري را جايگزين مي کند. اين متد داراي دو پارامتر مي باشد، در پارامتر اول کلمه يا کاراکتري که لازم است پيدا شود را مشخص مي کنيد و سپس در پارامتر دوم جايگزين آنرا تعيين مي کنيد. الگوي اين متد به صورت زير است:

Stringobject.replace( /findString/ , "newString" )

مثال

اين متد هم مانند بقيه متدها به حروف بزرگ و کوچک حساس است که اگر مي خواهيد جاوااسکريپت تفاوتي قائل نشود بايد به اين صورت عمل کنيد:

Stringobject.replace( /findString/i , "newString" )

مثال

اگر مي خواهيد کلمه يا کاراکتر را در کل رشته پيدا و جايگزين کند، بايد به صورت زير عمل کنيد:

Stringobject.replace( /findString/g , "newString" )

مثال

در صورت نياز مي توانيد از مخلوط آن دو استفاده کنيد:

Stringobject.replace( /findString/gi , "newString" )

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

Stringobject.search( /findString/i )

مثال

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

Stringobject.slice( start, end )

مثال

small اندازه حروف کوچک مي شود. مثال

split تبديل يک رشته به آرايه. يعني بين کلمات يک رشته علامت کاما گذاشته و آنها را مانند آرگومان هاي آرايه مرتب مي کند. داراي دو پارامتر است که در پارامتر اول مدل علامت گذاري معين مي شود. اگر از "" استفاده کنيد بدون فاصله، مابين کليه کاراکترهاي رشته، کاما مي گذارد و اگر از " " با فاصله استفاده کنيد، در آن رشته بدنبال فاصله ها مي گردد و علامت گذاري ميکند يعني بين کلمات کاما مي گذارد. در پارامتر دوم هم که اختياري است مي توانيد تعداد تکرار کاما را تعيين کنيد. مثال

strike بر روي رشته خط مي کشد. مثال

sub رشته مورد نظر را پايين تر از خط نشان ميدهد. مثال

sup رشته مورد نظر را بالاتر از خط نشان ميدهد. مثال

substr تقريباً مانند متد slice عمل ميکند که در پارامتر اول عدد کاراکتر را براي شروع جداسازي معين مي کنيد ولي در پارامتر دوم تعداد انتخاب کاراکتر بعد از نقطه شروع را مشخص ميکنيد که اگر آن را ننويسيد تا انتهاي متن انتخاب خواهد شد و اگر مقادير پارامترها را منفي دهيد نقطه شروع از انتهاي رشته تعيين ميشود. مثال

toLowerCase کليه حروف انگليسي داخل يک رشته را به حروف کوچک انگليسي تبديل مي کند. مثال

toUpperCase کليه حروف تبديل به حروف بزرگ خواهد شد. مثال

خب دوستان با کليه متدهاي يک رشته هم آشنا شديد. بعضي از آنها کاربرد زيادي دارند و بعضي از آنها هم شبيه به يکديگر هستند که براي راحتي کار همه آنها بيان شده است. در صفحه بعد مي پردازيم به يکي ديگر از شئ هاي درون ساخت جاوااسکريپت.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

شئ Math

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Math Object

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

شئ Math

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

خلق اعداد تصادفی
گرد کردن اعداد اعشاری
خصوصيات اين شئ
متدهای اين شئ

شئ Math هم يکي ديگر از اشياي درون ساخت جاوااسکريپت است که شامل يکسري مقادير ثابت و همچنين توابعي براي انجام عمليات رياضي در صفحات وب ميباشد.

براي ساختن اين شئ نيازي به دستور new نيست چون اين شئ براي مفسر جاوااسکريپت، کاملاً شناخته شده است.

اين شئ هم مانند بقيه اشياء داراي خصوصيات و متدهايي است که ابتدا به معرفي چند متد پرکاربرد از اين شئ مي پردازيم و سپس با بقيه آنها آشنا خواهيم شد.

خلق اعداد تصادفي، Random number

شئ Math داراي يک متد مفيد براي خلق اعداد تصادفي بنام random است که الگوي آن بصورت زير ميباشد:

Math.random ( )

در متد بالا، جاوااسکريپت بين عدد يک و صفر، يک عددي را انتخاب مي کند که اين عدد اعشاري است. مثال

هرگاه نياز داشتيد که اين متد بين صفر و يک عدد بزرگتر از يک، عدد تصادفي پيدا کند بايد طبق الگوي زير عمل کنيد:

Math.random ( ) * num

که بجاي num عدد مورد نظر را مي نويسيد. مثال

گرد کردن اعداد اعشاري

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

براي گرد کردن يک عدد اعشاري به عدد صحيح بعد از خود بايد به شکل زير عمل کنيد:

Math.ceil ( num )

مثال

براي گرد کردن يک عدد اعشاري به عدد قبل:

Math.floor ( num )

مثال

و براي گرد کردن عدد اعشاري به نزديک ترين عدد:

Math.round ( num )

مثال

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

دو متد ديگر وجود دارد که مي توانند بين اعداد تعيين شده، بزرگترين و کوچکترين عدد را پيدا کنند:

Math.max ( num, num, ... )
Math.min ( num, num, ... )

مثال

خصوصيات شئ Math

اين شئ داراي خصوصيات و ثابتهايي است که براي محاسبات عمليات پيچيده رياضي بکار مي رود:

Math.E اين خصوصيت مقدار ثابت عدد Euler را بر ميگرداند که تقريباً برابر است با 2.7182 . اين عدد به عدد E معروف است.

Math.PI مقدار ثابت عدد پي که تقريباً برابر است با 3.14

Math.LOG2E لگاريتم عدد Euler بر مبناي دو. تقريباً برابر است با 1.4426

Math.LOG10E لگاريتم E بر مبناي ده. تقريباً برابر است با 0.4342

Math.LN2 لگاريتم دو بر مبناي E. تقريباً برابر است با 0.6931

Math.LN10 لگاريتم ده بر مبناي E. تقريباً برابر است با 2.3025

Math.SQRT2 جذر عدد دو. تقريباً برابر است با 1.4142

Math.SQRT1_2 جذر يک دوم. تقريباً برابر است با 0.7071

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

متدهاي شئ Math

متدهايي هم که در زير ليست شده اند، کاربرد کمتري نسبت به متدهاي ذکر شده در ابتداي اين بخش دارند.

abs قدرمطلق بر ميگرداند. مثال

acos آرک کسينوس نقطه x که يک عدد ميان منفي يک و يک بايد باشد؛ خارج از اين اعداد مقدار NaN بر گردانده مي شود. آرک کسينوس عدد يک برابر با صفر است و منفي يک برابر با عدد پي. مثال

asin آرک سينوس نقطه x که يک عدد ميان منفي يک و يک ؛ خارج از آن مقدار NaN بر گردانده مي شود. مثال

atan آرک تانژانت نقطه x . مثال

atan2 آرک تانژانت زاويه تتا بين دو نقطه x و y . مثال

cos کسينوس يک زاويه را بر ميگرداند. مثال

exp مقدار Ex را بر ميگرداند که E همان عدد ثابت Euler است و x هم يک مقدار عددي. مثال

log لگاريتم يک عدد بر مبناي عدد E . مثال

pow اين متد توان را براي يک عدد محاسبه مي کند و داراي دو پارامتر است که در اولي عدد مشخص مي شود و در پارامتر دوم مقدار عددي توان را تعيين مي کنيد. مثال

sin سينوس يک مقدار عددي را محاسبه مي کند. مثال

sqrt جذر يک عدد را برمي گرداند. مثال

tan عددي بر مي گرداند که نشان دهنده تانژانت يک زاويه است. مثال

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

شئ ها مربوط به HTML DOM

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


HTML DOM window object

Google
Web iranw3.com
مطالب آموزشي

JS HTML DOM
window شئ
navigator شئ
frame شئ
document شئ
location شئ
history شئ
screen شئ

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

HTML DOM
شئ window

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

خصوصيات
متدها

اين شئ در جاوااسکريپت مستقيماً با پنجره مرورگر ارتباط برقرار مي کند. شئ window اولين شئ در سلسله مراتب DOM مي باشد.

مانند تمام شئ هاي جاوااسکريپت اين شئ هم داراي خصوصيات و متدهايي است که توسط آنها مي توانيد بعضي از فعاليتهاي يک مرورگر را کنترل کنيد. براي هر صفحه وب داخل مرورگر يک شئ window در نظر گرفته مي شود، يعني اگر شما از يک فريم استفاده مي کنيد که سه صفحه وب را در خود جاي داده پس سه شئ window براي هر کدام از آنها وجود دارد.

window objects

اين شئ داراي اشياء ديگري نيز مي باشد که به عنوان شئ هاي فرزند براي آن شناخته مي شوند. اين اشياء عبارتند از:

navigator, frame, document, location, history, screen

خصوصيات شئ window

جدول زير خصوصيات اين شئ ميباشد، نسخه هاي دو مرورگر اينترنت اکسپلورر و نت اسکيپ که از اين خصوصيات پشتيباني مي کنند، مشخص شده است.

ie | nn | توضيح | خصوصيات
4 | 3 | بررسي پنجره مرورگر که اگر باز باشد مقدار true را بر مي گرداند و اگر بسته مقدار false | closed
3.02 | 2 | قراردادن يک متني که در نوار وضعيت مرورگر نمايان شود. | defaultStatus
4 |  | کنترل بلندي پنجره جديد که روي پنجره اصلي باز خواهد شد. | dialogHeight
4 |  | تعيين فاصله پنجره جديد از سمت چپ | dialogLeft
4 |  | تعيين فاصله پنجره جديد از بالا | dialogTop
4 |  | کنترل پهناي پنجره جديد | dialogWidth
5.5 |  | کنترل شئ فريم يا iframe که در پنجره اصلي قرار دارند | frameElement
4 | 6 | کنترل شماره فريم هاي داخل يک صفحه | length
3.02 | 2 | ذخيره نام فريمهاي يک پنجره و برگرداندن آنها | name
4 | 3 | کنترل پنجره اصلي که باز کننده يک پنجره جديد است | opener
3.02 | 2 | پنجره اصلي مرورگر | parent
5 |  | کنترل فاصله مرورگر از طرف چپ | screenLeft
5 |  | کنترل فاصله مرورگر از بالا | screenTop
3.02 | 2 | منظور همان پنجره مرورگر ميباشد | self
3.02 | 2 | کنترل متن در نوار وضعيت مرورگر | status
3.02 | 2 | کنترل پنجره اصلي مرورگر در فريمها | top

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

نکته: شما مي توانيد بجاي نوشتن window از self يا parent هم استفاده کنيد. خيلي ها براي راحتي نوشتن از اين دو کلمه استفاده مي کنند که در حقيقت منظور همان شئ window مي باشد. به اين صورت:

window. status =" Hello! "
self. status = " Hello! "
parent. status = " Hello! "

متدهاي شئ window

ie | nn | توضيح | متدها
3.02 | 2 | کادر ارتباطي اعلام اخطاريه به کاربر | alert( )
4 | 3 | برداشتن تمرکر يا focus از آن پنجره | blur( )
4 | 4 | برداشتن مدت زماني که توسط متد setInterval تنظيم شده | clearInterval( )
3.02 | 2 | برداشتن مدت زماني که توسط متد setTimeout تنظيم شده | clearTimeout( )
3.02 | 2 | بستن پنجره مرورگر | close( )
3.02 | 2 | کادر ارتباطي براي دريافت تأييد از کاربر | confirm("msg")
5.5 |  | ساختن پنجره هاي popup | createPopup( )
4 | 3 | متمرکز و فعال کردن پنجره | focus( )
4 | 4 | جابجا کردن پنجره مرورگر به يک نقطه تعيين شده | moveBy(x,y)
4 | 4 | کنترل فاصله پنجره از بالا و چپ | moveTo(x,y)
3.02 |  | رفتن به يک آدرس مشخص | navigate("URL")
3.02 |  | باز کردن يک پنجره جديد با يک آدرس مشخص | open("URL")
5 | 4 | پرينت گرفتن از محتواي آن صفحه | print( )
3.02 | 2 | کادر ارتباطي براي دريافت اطلاعاتي از کاربر | prompt( )
4 |  | تغيير اندازه پنجره مرورگر | resizeTo(width, height)
4 | 4 | جابجا کردن scroll bar مرورگر به نقطه تعيين شده | scrollTo(x,y)
4 | 4 | تعيين مدت زماني براي فراخواني يک تابع و يا بررسي يک شرط. اين مدت بر حسب ميلي ثانيه ميباشد که آن عمل در اين مدت زمان خاص مرتب اجرا خواهد شد. | setInterval("code", millisec)
3.02 | 2 | اجراي يک کد يا فراخواني يک تابع بعد از مدت زمان معين | setTimeout("code", millisec)
4 |  | باز کردن يک پنجره روي پنجره مرورگر که کاربر ابتدا بايد آنرا ببندد تا بتواند با پنجره هاي ديگر کار کند. | showModaldialog("URL", list)

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

navigator object

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


HTML DOM - navigator object

Google
Web iranw3.com
مطالب آموزشي

JS HTML DOM
window شئ
navigator شئ
frame شئ
document شئ
location شئ
history شئ
screen شئ

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

HTML DOM
شئ navigator

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

خصوصيات
متدها

navigator يکي ديگر از اشياء DOM مي باشد که اطلاعاتي را در ارتباط با مرورگر کاربر مي دهد، مانند نوع مرورگر و يا نسخه آن. اين شئ جزو استانداردهاي W3C نيست.

خصوصيات شئ navigator

IE | NN | توضيح | خصوصيت
3.02 | 2 | بدست آوردن نام کد مرورگر* | appCodeName
4 |  | دريافت نسخه فرعي مرورگر | appMinorVersion
3.02 | 2 | نام مرورگر را نشان مي دهد | appName
3.02 | 2 | نسخه مرورگر و نام Platform** | appVersion
4 |  | زبان بکار گرفته شده در مرورگر | browserLanguage
4 | 6 | بررسي قابليت دريافت کوکي در مرورگر | cookieEnabled
4 |  | نوع طبقه بندي CPU سيستمي که مرورگر روي آن نصب است | cpuClass
4 |  | بررسي ارتباط کاربر با اينترنت | onLine
4 | 4 | نوع پلت فرم سيستم عامل | platform
4 |  | زبان پيش فرض و فعال سيستم عامل را نشان مي دهد | systemLanguage
3.02 | 2 | اطلاعاتي معيني که مرورگر دور از ديد کاربر به سرور منتقل مي کند | userAgent
4 |  | نمايش نوع زبان سيستم عامل | userLanguage

* منظور از کد مرورگر، اسم داخلي مرورگر مي باشد که در حال حاضر مرورگرهاي معروف مانند Internet Explorer ، Netscape ، Opera، Firefox همه از نام Mozilla استفاده مي کنند.

** Platform به استاندارد يک مجموعه و سيستم گفته مي شود که آن سيستم بر اساس آن طراحي و توسعه پيدا مي کند و افرادي که علاقمند به کار در آن زمينه هستند ملزم به اجراي آن استاندارد مي باشند تا در سيستم هماهنگي ايجاد شود. بطور مثال پلت فرم ويندوز XP ، ويندوز NT 5.1 و همچنين Win32 مي باشد.

کليه خصوصيات در يک مثال بکار رفته و اطلاعاتي که در آن خواهيد ديد، همگي متعلق به مرورگر و سيستم شما مي باشد. مثال

متدهاي شئ navigator

اين شئ داراي دو متد مي باشد:

window.navigator.javaEnabled ( )
window.navigator.taintEnabled ( )

متد اول، قابليت اجراي اپلتهاي جاوا را در مرورگر کاربر بررسي مي کند و يکي از دو مقدار true يا false را بر مي گرداند. متد دوم براي taint کردن اطلاعات بکار مي رود يعني اطلاعاتي که taint مي شوند، بدون اجازه کاربر از مرورگر به سرور فرستاده نمي شوند. در حقيقت بعضي از اطلاعات را توسط اين متد علامت دار مي کنيد تا هنگام فرستاده شدن به سرور، شما با خبر شويد. لازم بذکر است اين متد در مرورگر اينترنت اکسپلورر از نسخه 5 به بعد فقط مقدار false را برميگرداند، يعني در اين مرورگر ديگر کارآيي ندارد.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

frame object

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


HTML DOM - frame object

Google
Web iranw3.com
مطالب آموزشي

JS HTML DOM
window شئ
navigator شئ
frame شئ
document شئ
location شئ
history شئ
screen شئ

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

HTML DOM
شئ frame

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

خصوصيات
متدها

اين شئ ، فريمهاي داخل پنجره مرورگر را کنترل مي کند. اگر داخل پنجره مرورگر چند فريم داشته باشيم، براي هر فريم يک شئ window در نظر گرفته مي شود بنابراين ما ديگر نمي توانيم براي ارتباط با پنجره اصلي که اين فريمها را در خود جاي داده است از شئ window استفاده کنيم چون اگر در هر کدام از فريمها شئ window را بنويسيم به همان فريم بر مي گردد. در اين حالت براي ارتباط برقرار کردن با پنجره اصلي که اين پنجره هاي فرزند را در خود جاي داده، از شئ parent بايد استفاده کنيم.

خصوصيات و متدهاي اين شئ به شرح زير مي باشند.

خصوصيات شئ frame

IE | NN | توضيح | خصوصيات
5 | 6 | نمايش کادر دور فريم را کنترل مي کند | frameBorder
4 |  | مشخصه واحد براي فريمها | id
6 |  | آدرس يک صفحه وب براي توضيح بيشتر | longDesc
5 | 6 | کنترل حاشيه فريم از بالا و پايين صفحه | marginHeight
5 | 6 | کنترل حاشيه از چپ و راست | marginWidth
5 | 6 | نام واحد براي فريمها | name
5 | 6 | کنترل قابليت تغيير اندازه فريم | noResize
5 | 6 | کنترل scroll bar براي فريمها | scrolling
5 | 6 | آدرس صفحه وب که در فريم جاي مي گيرد | src

به غير از id بقيه خصوصيات، استاندارد W3C مي باشند.

متدهاي شئ frame

اين شئ دو متد دارد که فقط در مرورگر اينترنت اکسپلورر اجرا مي شوند و در ضمن استاندارد هم نمي باشند:

blur( ), focus ( )

متد blur تمرکز را از روي فريم برمي دارد و focus دوباره تمرکز را روي فريم برميگرداند.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

document object

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


HTML DOM - document object

Google
Web iranw3.com
مطالب آموزشي

JS HTML DOM
window شئ
navigator شئ
frame شئ
document شئ
location شئ
history شئ
screen شئ

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

HTML DOM
شئ document

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

خصوصيات
متدها

شئ document يکي از مهمترين اشياء DOM مي باشد چون اين شئ قابليت دسترسي به عناصر HTML را دارد و به شما اجازه مي دهد تا از طريق جاوااسکريپت هم اين عناصر را کنترل کنيد. شما در طول آموزش جاوااسکريپت با يکي از پرکاربردترين متد اين شئ آشنا شده ايد يعني :

document.write( )

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

anchors, applets, attributes, embeds, forms, images, links, plugins, stylesheets

نکته : منظور از عنصر anchor کل تگهاي لينک مي باشد چه به داخل يک صفحه اشاره کنند چه به خارج از آن صفحه وب پيوند داده شوند و عنصر link همان تگي است که در قسمت head يک سند اچ تي ام ال قرار مي گيرد.

دقت کنيد که ارتباط شئ document با attributes ، embeds ، plugins و style sheets جزو استانداردهاي W3C نمي باشد.

خصوصيات شئ document

IE | NN | توضيح | خصوصيات
3 | 2 | تعيين رنگ لينک فعال | alinkColor *
3 | 2 | تعيين يا برگرداندن رنگ زمينه صفحه | bgColor *
5 | 6 | تعيين شروع و خاتمه قسمت بدنه | body
3 | 2 | کنترل کوکي هاي ساخته شده آن صفحه | cookie
5 | 6 | دريافت اطلاعات از شئ اصلي | documentElement
4 | 3 | نشان دادن آدرس دامنه صفحه وب | domain
3 | 2 | کنترل رنگ فونت داخل صفحه وب | fgColor *
3 | 2 | نمايش زمان و تاريخ آخرين اصلاحات سند اچ تي ام ال | lastModified
3 | 2 | کنترل رنگ لينک ها | linkColor *
3 | 2 | نمايش آدرس سند اچ تي ام ال | referrer
3 | 2 | نمايش نام تعيين شده در قسمت title | title
4 | 3 | نمايش آدرس همان صفحه وب | URL
3 | 2 | کنترل رنگ لينک هاي مشاهده شده | vlinkColor *

* استفاده از آنها توسط W3C توصيه نمي شود.

لازم بذکر است که documentElement و lastModified جزو استانداردهاي W3C نمي باشند.

متدهاي شئ document

IE | NN | توضيح | متدها
 | 2 | پاک کردن همه عناصر صفحه وب | clear( )
3 | 2 | خاتمه شئ document.open را اعلام مي کند | close( )
6 | 6 | ساختن يک خصوصيت براي يک تگ با نام مشخص | createAttribute("name")
5 | 6 | ساختن يک تگ | createElement("tag")
5 | 6 | ساختن يک رشته متني | createTextNode("txt")
5 | 6 | متمرکز کردن روي سند اچ تي ام ال | focus( )
5 | 6 | برگرداندن و ذخيره کردن محتواي يک عنصر که با آن ID در صفحه مشخص شده است | getElementById("id")
5 | 6 | کنترل يک عنصر توسط نام مشخص شده آن | getElementsByName("name")
5 | 6 | کنترل يک عنصر توسط بکار بردن نام تگ | getElementsByTagName("tag")
3 | 2 | باز کردن يک صفحه وب با محتواي جديد | open("mimetype"[,replace])
3 | 2 | نوشتن هر متني داخل صفحه وب که در پرانتز مشخص شده باشد. | write("str")
3 | 2 | نمايش متن داخل پرانتز به همراه تگهاي اچ تي ام ال | writeln("str")

رويدادهايي هم وجود دارد که براي اين شئ مي توانيد بکار بريد که الگوي استفاده از آنها مانند زير مي باشد:

document.event_name = "some javascript code"

اين رويدادها به شرح زير مي باشند که هيچ کدام از آنها استاندارد W3C نيستند.

onClick, onDblClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onResize

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

location object

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


HTML DOM - location object

Google
Web iranw3.com
مطالب آموزشي

JS HTML DOM
window شئ
navigator شئ
frame شئ
document شئ
location شئ
history شئ
screen شئ

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

HTML DOM
شئ location

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

خصوصيات
متدها

شئ location اطلاعاتي در مورد آدرس همان صفحه وبي که کاربر درحال مشاهده آن مي باشد را ذخيره کرده و در صورت لزوم مي توان از آنها استفاده کرد. کلاً اين شئ جزو استانداردهاي W3C نمي باشد.

خصوصيات شئ location

IE | NN | توضيح | خصوصيت
3 | 2 | قسمتي از آدرس در خصوصيت href که بعد از علامت# مي آيد را بر ميگرداند | hash
3 | 2 | اين خصوصيت hostname آن سند و پورت آن اگر به غير از 80 باشد را بر مي گرداند. | host
3 | 2 | فقط hostname را برمي گرداند | hostname
3 | 2 | کنترل آدرس صفحه وب | href
3 | 2 | آدرس صفحه وب که اين شئ در آن قرار دارد | pathname
3 | 2 | شماره پورت صفحه لود شده را برميگرداند اگر شماره پورت بصورت پيش فرض 80 باشد آنرا نشان نمي دهد. | port
3 | 2 | پروتکل آدرس وب را نشان مي دهد | protocol
3 | 2 | قسمتي از آدرس وب که بعد از علامت ? مي آيد را برمي گرداند | search

متدهاي شئ location

IE | NN | توضيح | متد
4 | 2 | يک صفحه جديد لود مي کند | assign("URL")
4 | 2 | صفحه را refresh ميکند | reload(false|true)
4 | 3 | آدرسي جديد جايگزين آدرس همان صفحه مي کند | replace("URL")

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

history object

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


HTML DOM - history object

Google
Web iranw3.com
مطالب آموزشي

JS HTML DOM
window شئ
navigator شئ
frame شئ
document شئ
location شئ
history شئ
screen شئ

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

HTML DOM
شئ history

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

خصوصيات
متدها

اين شئ يکي ديگر از اشياء DOM مي باشد که با history مرورگر ارتباط بر قرار مي کند. بطور مثال ممکن است شما قبل از اينکه وارد اين صفحه بشويد، چند صفحه را مشاهده کرده باشيد و يا بعد از اين صفحه به صفحات ديگر رفته و مجدداً به همين جا باز گرديد. دراين حالتها دکمه هاي back و forward مرورگرتان فعال مي شوند و مرورگر شما صفحاتي که قبل و بعد از اين صفحه را مشاهده کرديد، ذخيره مي کند و با زدن دکمه back به صفحات قبل و با زدن دکمه forward به صفحاتي جلوتر هدايت مي شويد.

هنگاميکه اين صفحات در مرورگر بصورت موقت ذخيره شدند، شما توسط شئ history مي توانيد به آنها دسترسي پيدا کنيد که اين دسترسي به شما اجازه مي دهد براي صفحه خود دکمه يا لينک، مشابه back و forward مرورگر را بسازيد.

اين شئ تمام آدرسهاي مشاهده شده در آن لحظه را در يک آرايه ذخيره مي کند و با استفاده از خصوصيات و متدهاي اين شئ، مي توانيد با آنها ارتباط برقرار کنيد. لازم بذکر است که اين شئ، استاندارد W3C نمي باشد.

خصوصيت اين شئ

اين شئ فقط يک خصوصيت دارد بنام length که توسط آن مي توانيد دريابيد، چه تعداد آدرس در آرايه اين شئ ذخيره شده است. اين خصوصيت در مرورگر IE نسخه 3 به بعد و در مرورگر نت اسکيپ از نسخه 2 به بعد قابل استفاده مي باشد. مثال

متدهاي شئ history

IE | NN | توضيح | متد
3 | 2 | مانند دکمه back مرورگر به صفحه قبلي هدايت مي کند | back( )
3 | 2 | مانند دکمه forward مرورگر عمل مي کند | forward( )
3 | 2 | شماره صفحه بازديد شده را وارد مي کنيد | go( number)

براي متد go مي توانيد هم شماره صفحه را وارد کنيد و هم آدرس صفحه بازديد شده را که عدد بهتر و راحت تر از آدرس مي باشد. براي رفتن به صفحات که قبلاً مشاهده شده بايد از اعداد منفي استفاده کنيد. بطور مثال اگر مي خواهيد کاربر به يک صفحه قبل برود به صورت زير عمل مي کنيد:

history.go ( -1 )

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

<a href="javascript:history.back( )" > Go Back </a>

مثال

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

screen object

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


HTML DOM - screen object

Google
Web iranw3.com
مطالب آموزشي

JS HTML DOM
window شئ
navigator شئ
frame شئ
document شئ
location شئ
history شئ
screen شئ

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

HTML DOM
شئ screen

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

خصوصيات

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

اين شئ جزو استانداردهاي W3C نمي باشد و همچنين متدي هم ندارد و فقط خصوصياتي دارد که در زير به آنها اشاره شده است.

خصوصيات شئ screen

IE | NN | توضيح | خصوصيات
4 | 4 | اندازه بلندي صفحه نمايش بدون در نظر گرفتن نوارهاي بالاي مرورگر | availHeight
4 | 4 | پهناي صفحه را نشان مي دهد | availWidth
4 | 4 | کيفيت رنگ سيستم | colorDepth
6 |  | نمايش DPI افقي صفحه | deviceXDPI
6 |  | نمايش DPI عمودي صفحه | deviceYDPI
4 |  | بررسي font smoothing در سيستم | fontSmoothingEnabled
4 | 4 | بلندي صفحه نمايش | height
6 |  | DPI افقي صفحه نمايش | logicalXDPI
6 |  | DPI عمودي صفحه نمايش | logicalYDPI
 | 4 | وضوح رنگ صفحه نمايش | pixelDepth
4 | 4 | پهناي صفحه نمايش | width

براي ديدن مثالهاي اين خصوصيات اگر از مرورگر اينترنت اکسپلورر استفاده مي کنيد، اينجا را کليک کنيد و اگر از مرورگر نت اسکيپ استفاده مي کنيد، اينجا را کليک کنيد.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

Previous

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


HTML DOM شئ هاي مربوط به

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

شئ هاي مربوط به HTML DOM

براي دسترسي سريع از لينکهاي زير استفاده کنيد:

تعريف DOM
سلسله مراتب اشياء

در بخشهاي قبل با شئ هاي درون ساخت جاوااسکريپت آشنا شديد. در اين صفحه قصد داريم شئ هاي مربوط به HTML DOM را توضيح دهيم. ابتدا اجازه دهيد در مورد DOM يک توضيحي بدهم که اصلاً DOM چي هست؟

تعريف DOM

DOM مخفف سه کلمه Document Object Model مي باشد. در بعضي جاها برگردان فارسي آنرا مدل شئ سند مي گويند. متني که در زير آمده تعريف DOM بر اساس W3C است:

" The Document Object Model is a platform- and language -neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web. "

اما به زبان ساده، DOM رابطه بين عناصر HTML مانند متن ها، عکس ها و غيره را با همان سند اچ تي ام ال بيان مي کند. اين يک فرآيندي است که به برنامه ها و اسکريپت ها اجازه دسترسي به محتوا و ساختار داخلي پنجره مرورگر را ميدهد تا آنها بتوانند بصورت آزادانه تغييراتي ايجاد کنند که نتيجه اين تغييرات در صفحه وب نمايان شود. در همين رابطه زباني بنام DHTML بوجود آمد که با ترکيب کردن عناصر اچ تي ام ال با استايل شيت و اسکريپتها مي تواند محتواي اسناد وب را بصورت متحرک و پويا درآورد. در اينجا پويا بودن فقط به اين منظور نيست که متنها حرکت کنند و از يک طرف وارد بشوند و از طرف ديگر خارج؛ ممکن است لينکها هر بار شما را به يک سايتي پيوند دهند و يا عکس ها مرتب تغيير کنند، کلاً هر تغييري که نياز به کدنويسي مجدد براي آن سند را نداشته باشد، منظور پويا بودن را مي رساند.

سلسله مراتب اشياء DOM

جاوااسکريپت، شئ هايي دارد که مي توانند بطور مستقيم با خود مرورگر ارتباط برقرار کنند و همچنين شئ هايي که با صفحه وب در ارتباط هستند. در کل مي توان اين اشياء را به دو دسته اصلي تقسيم کرد، دسته اول که BOM گفته مي شود يعني Browser Object Model شئ هايي که با پنجره مرورگر مي توانند ارتباط برقرار کنند و دسته دوم DOM که با Document يعني همان سند اچ تي ام ال. تمامي اين اشياء بر اساس يک سلسله مراتبي اين ارتباط را برقرار مي کنند که در رأس آنها شئ window مي باشد. براي ديدن اين سلسله مراتب اينجا را کليک کنيد.

همانطور که در شکل مشاهده کرديد از شئ window تا شئ Document جزو دسته BOM مي باشند و اشياء بعد از Document در دسته DOM قرار مي گيرند. ناگفته نماند که در حال حاضر کمتر صحبت اصطلاح BOM مي شود و کلاً اين مجموعه را DOM مي گويند.

شما بايد اين سلسله مراتب را براي استفاده اشياء آن، رعايت کنيد. اين سلسله مراتب را مي توان به شجره نامه تشبيه کرد و شما مجبور هستيد براي صدا کردن هر شخص آنرا با نام پدرش بياوريد و در بعضي جاها حتي نام پدر بزرگ هم لازم است، بطور مثال: علي فرزند محمد يا علي فرزند محمد فرزند حسين. در اينجا هم پدر اصلي Window مي باشد وپدر بعدي Document است که فرزندهاي آن همان عناصر اچ تي ام ال ميباشند و سپس Form و در آخر هم Select که تنها يک فرزند دارد. براي استفاده از آنها بايد ابتدا اسم پدر و سپس اسم فرزند را نوشت و در آخر هم خصوصيت و يا متد آن فرزند که همه اينها با يک نقطه از هم بايد جدا شوند. بطور مثال اگر ميخواهيد يک فرم را بنام form1 صدا بزنيد تا با آن ارتباط برقرار کنيد بايد به شکل زير عمل شود:

window.document.form1

مانند همه اشياء در جاوااسکريپت ، اين شئ ها هم داراي خصوصيات و متدهايي هستند که بعد از رعايت کردن سلسله مراتب با گذاشتن يک نقطه مي توانيد آنها را بنويسيد. مانند:

window.history.go (-1)

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

در جدول زير شئ هاي اصلي اين سلسله مراتب ليست شده است.

اين شئ مستقيماً با پنجره مرورگر در ارتباط است که معمولاً خصوصيات و متدهاي اين شئ در تگهاي body و frameset بکار مي روند. | window
اين شئ شامل اطلاعاتي در رابطه با مرورگر کاربر است که توسط خصوصيات و متدهاي آن اين اطلاعات ذخيره تا مورد استفاده قرار گيرند. | navigator
براي کار کردن بر روي فريمهاي اچ تي ام ال. | frame
دسترسي و ارتباط با کليه عناصر اچ تي ام ال مانند، متنها فرمها عکسها و غيره. | document
شامل اطلاعاتي در مورد URL يا همان آدرس اينترنتي صفحه اي که در حال نمايش است. | location
اين شئ داراي اطلاعاتي براي رجوع کاربر به صفحاتي که قبل از آن صفحه مشاهده شده و بر عکس. | history
اطلاعات صفحه مرورگر کاربر را بر مي گرداند مانند اندازه طول و عرض. | screen

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

نکات مهمی که بايد برای اسکريپت نويسی رعايت کنيد

Previous

Next

توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


javascript guidelines --- نکات مهم

Google
Web iranw3.com
مطالب آموزشي

فهرست
مقدمه
اسکريپت نويسي
پيغام خطا
کجا بنويسيم
متغير ها
تاريخ و زمان
عملگرها
if...else
switch دستور
حلقه ها
آرايه
توابع
popup boxes
رويدادها
شئ ها
String شئ
Math شئ
JS HTML DOM
نکات مهم

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

نکات مهم برای اسکريپت نويسی

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

هرگاه خواستيد که اسکريپتي خلق کنيد، ابتدا آنرا در ذهن خود بررسي کنيد که اين اسکريپت چه کاري بايد انجام دهد و چه نتيجه اي را مي خواهيد از آن بگيريد، سپس افکارتان را روي کاغذ پياده کنيد با جزئيات کامل که چه اطلاعاتي را بايد دريافت کنيد و توسط چه دستوراتي آنرا پيش ببريد و در آخر چه نتيجه اي بايد بدهد.

هنگام خلق يک اسکريپت نکاتي را بايد در نظر داشته باشيد:

سعي کنيد بعد از هر خط علامت ; را بگذاريد تا پايان آن خط مشخص شود.

document.write ( " text string " );
document.write ( myFunction ) ;

جاوااسکريپت case sensetive است يعني به حروف کوچک و بزرگ حساس است و بين آنها فرق مي گذارد. در جاوااسکريپت myFunction با myfunction تفاوت دارد.

دقت کنيد کليه علامتها مانند پرانتز، آکلاد و کروشه در هر جا که مي نويسيد بايد دوباره آنها را ببنديد.

( { [ ..... ] } )

جاوااسکريپت فاصله هاي اضافي را در نظر نمي گيرد، پس شما مي توانيد براي خوانا بودن کد خود فاصله هايي را اضافه کنيد. دو خط زير تفاوتي با هم ندارند:

var name="value";
var name = " value " ;

در نظر داشته باشيد که يک خط کد جاوااسکريپت حتماً بايد در يک خط نوشته شود و نمي توانيد ادامه آنرا در خط بعدي بنويسيد، مگر اينکه به انتهاي صفحه برسيد و خود به خود به ابتداي خط بعد هدايت شويد. اما در ميان رشته هاي متني با گذاشتن علامت \ مي توانيد به خط بعد رفته و ادامه دهيد.

document.write ( " Hello \
my friends! " ) ;

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

document.write( " text " ) ; // your comment

اگر هم نظريه يا توضيح شما بيشتر از چند کلمه است مي توانيد به صورت زير عمل کنيد:

/* This is a comment
block. It contains
several lines */

لازم بذکر است که اين توضيحات و نظريات در صفحه نمايش داده نمي شوند.

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

<script language="javascript" type="text/javascript">
javascript code......
</script>

<noscript> Your browser does not support javascript.</noscript>

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

مطالبي که در صفحه بعد مي خوانيد:

بخش پيشرفته جاوااسکريپت

Previous

بزودی آماده می شود
توضيحات

پرسش و پاسخ

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


﻿ My JavaScript


﻿ Error message


example

اگر نتيجه در بالاي صفحه مشاهده نشد، پس شما بعد از ساعت 10 صبح اين صفحه را باز کرده ايد. :-)


example

Today is


concat()

نتيجه مثال يک

نتيجه مثال دو


concat()

مثال يک

<script type="text/javascript">
var color1 = new Array(3)
color1[0] = "Red"
color1[1] = "Green"
color1[2] = "Blue"
var color2 = new Array(3)
color2[0] = "White"
color2[1] = "Black"
color2[2] = "Gray"
document.write(color1.concat(color2))
</script>

مثال دو

<script type="text/javascript">
var color1 = new Array(3)
color1[0] = "Red"
color1[1] = "Green"
color1[2] = "Blue"
var arr2 = new Array(3)
color2[0] = "White"
color2[1] = "Black"
color2[2] = "Gray"
var color3 = new Array(2)
color3[0] = "Yellow"
color3[1] = "Pink"
document.write(color1.concat(color2,color3))
</script>

اجرای کد


join()

<script type="text/javascript" type="text/javascript">

var color = new Array(3)
color[0] = "Red"
color[1] = "Green"
color[2] = "Blue"

document.write (color.join() + "<br />")
document.write (color.join("."))

</script>

اجرای کد


pop()

<script type="text/javascript" type="text/javascript">

var color = new Array(3)
color[0] = "Red"
color[1] = "Green"
color[2] = "Blue"

document.write (color.pop() + "<br />")
document.write (color.length + "<br />")
document.write (color)
</script>

اجرای کد


shift()

<script type="text/javascript" type="text/javascript">

var color = new Array(3)
color[0] = "Red"
color[1] = "Green"
color[2] = "Blue"

document.write (color.shift() + "<br />")
document.write (color.length + "<br />")
document.write (color)
</script>

اجرای کد


push()

<script type="text/javascript" type="text/javascript">

var color = new Array(3)
color[0] = "Red"
color[1] = "Green"
color[2] = "Blue"

document.write (color + "<br />")
document.write (color.push("white","black") + "<br />")
document.write (color)
</script>

اجرای کد


unshift()

<script type="text/javascript" type="text/javascript">

var color = new Array(3)
color[0] = "Red"
color[1] = "Green"
color[2] = "Blue"

document.write (color + "<br />")
document.write (color.unshift ("white","black") + "<br />")
document.write (color)
</script>

اجرای کد


reverse()

<script type="text/javascript" type="text/javascript">

var color = new Array(3)
color[0] = "Red"
color[1] = "Green"
color[2] = "Blue"

document.write (color + "<br />")
document.write (color.reverse ( ) )

</script>

اجرای کد


slice()

<script type="text/javascript" type="text/javascript">

var color = new Array(6)
color[0] = "Red"
color[1] = "Green"
color[2] = "Blue"
color[3] = "White"
color[4] = "Black"
color[5] = "Gray"

document.write (color + "<br />")
document.write (color.slice ( 2,5 ) )

</script>

اجرای کد


sort()

مثال يک

مثال دو


sort()

مثال يک

<script type="text/javascript" type="text/javascript">

var color = new Array(6)
color[0] = "Red"
color[1] = "Green"
color[2] = "Blue"
color[3] = "White"
color[4] = "Black"
color[5] = "Gray"

document.write (color + "<br />")
document.write (color.sort ( ) )

</script>

مثال دو

<script type="text/javascript"
type="text/javascript">

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort( ))

</script>

اجرای کد


splice()

<script type="text/javascript" type="text/javascript">

var color = new Array(5)
color[0] = "Red"
color[1] = "Green"
color[2] = "Blue"
color[3] = "White"
color[4] = "Black"

document.write (color + "<br />")
color.splice (2,0,"Pink" )
document.write (color)

</script>

اجرای کد


toString()

<script type="text/javascript" type="text/javascript">

var color = new Array(5)
color[0] = "Red"
color[1] = "Green"
color[2] = "Blue"
color[3] = "White"
color[4] = "Black"

document.write (color.toString( ))

</script>

اجرای کد


onClick

موس خود را بر روی اين صفحه قرار دهيد و بر روی دکمه چپ فشار دهيد


onDblClick

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


onMouseUp

پس از کليک کردن بر روی دکمه، کمی مکث کنيد و سپس دکمه را رها کنيد تا تأثير اين رويداد را ببينيد.


onMouseOut

هنگاميکه موس از روی عکس خارج شود، رويداد اجرا می شود.


onKeyUp

يک دکمه بر روی کيبورد را فشار دهيد و بعد از يک مکث آنرا رها کنيد.


onFocus

توسط موس و يا دکمه Tab کيبورد بر روی کادر زير متمرکز شويد.


onBlur

ابتدا روی کادر متنی شماره يک، کليک کنيد و بدون اينکه چيزی وارد کنيد به کادر شماره دو برويد.

1.

2.


onChange

متن داخل کادر را تغيير دهيد و سپس بيرون کادر کليک کنيد.


onSelect

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


onSubmit

بر روی دکمه submit کليک کنيد.


onReset

بر روی دکمه reset کليک کنيد.


onUnload

برای اجرا شدن کد، پنجره را ببنديد.


onResize

برای ديدن نتيجه رويداد، اندازه صفحه را تغيير دهيد.


blink( )

اين متد در مرورگر اينترنت اکسپلورر اجرا نمی شود.


charAt( )

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

Hello my friends!


charCodeAt( )

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

Hello my friends!


concat( )

var str1="This is string one."
var str2="This is string two."
document.write(str1.concat(str2))


fromCharCode( )

<script type="text/javascript" type="text/javascript">
document.write(String.fromCharCode(1587,1604,1575,1605))
</script>


indexOf( )

در خط اول مشخص کرديم تا لغت friends را در رشته Hello my friends جستجو کند که به محض پيدا کردن آن عدد موقعيت اولين کاراکتر يعني f را نوشت. و در خط دوم مشخص کرديم تا کاراکتر e را بعد از کاراکتر سوم جستجو کند، پس در اينجا ديگر کاراکتر e در کلمه Hello را در نظر نخواهد گرفت. در خط سوم هم بايد کاراکتر z را جستجو کند ولی چون اين کاراکتر در رشته تعريف شده، وجود ندارد پس عدد منفی يک را برميگرداند.


link( )

var mytxt = "Free HTML and Web design learning"
document.write( mytxt.link("http://www.iranw3.com" ) )


match( )

در خط اول کلمه Hello را در عبارت Hello my friends جستجو کرديم و در خط بعدی کلمه MY . دقت کنيد که حروف بزرگ و کوچک با هم فرق دارند.


replace( )

<script type="text/javascript"
type="text/javascript">
var mytxt = "Hello World!"
document.write( mytxt.replace(/World/,"my friends") )
</script>


replace( )

<script type="text/javascript"
type="text/javascript">
var mytxt = "Hello World!"
document.write( mytxt.replace(/world/i,"my friends") )
</script>


replace( )

<script type="text/javascript" type="text/javascript">
var mytxt = "Welcome to Microsoft! We are proud to announce that Microsoft have one of the largest Web Developers site in the world."
document.write( mytxt.replace(/Microsoft/g,"IRANW3") )
</script>


search( )

<script type="text/javascript" type="text/javascript">
var mytxt = "Hello my friends!"
document.write( mytxt.search(/Friends/i) )
</script>


slice( )

<script type="text/javascript" type="text/javascript">
var mytxt = "Welcome to my website!"
document.write( mytxt.slice(14, 17) )
</script>


split( )

var mytxt = "Welcome to my website!"
document.write( mytxt.split("") + "<br />" )
document.write( mytxt.split(" ") + "<br />" )
document.write( mytxt.split(" ", 2) )


sub( )

 Example:


sup( )

 Example:


substr( )

var mytxt = "Welcome to my website!"
document.write( mytxt.substr(8,5 ) + "<br />" )
document.write( mytxt.substr(14,3 ) )


toLowerCase( )

var mytxt = "WELCOME TO MY WEBSITE!"
document.write( mytxt.toLowerCase( ) )


toUpperCase( )

var mytxt = "welcome to my website!"
document.write( mytxt.toUpperCase( ) )


random()

دکمه F5 روی کيبورد را بزنيد تا صفحه Refresh شود و اعداد مختلف بين يک و صفر که بصورت تصادفی انتخاب می شوند را مشاهده کنيد.

<script type="text/javascript" type="text/javascript">
document.write(Math.random())
</script>


random()

<script type="text/javascript" type="text/javascript">
document.write(Math.random() * 10)
</script>


Math.ceil( num )

<script type="text/javascript" type="text/javascript">
document.write(Math.ceil ( 4.25 ) )
</script>


Math.floor( num )

<script type="text/javascript" type="text/javascript">
document.write(Math.floor ( 4.80 ) )
</script>


Math.round( num )

<script type="text/javascript" type="text/javascript">
document.write(Math.round ( 6.49 ) )
</script>


Math.round( Math.random( )* num )

<script type="text/javascript" type="text/javascript">
document.write(Math.round ( Math.random( )*10 ) )
</script>


Math.max( ) & Math.min( )

<script type="text/javascript" type="text/javascript">
document.write( Math.max ( 5, 8, 12 ) + "<br />" )
document.write( Math.min ( 5, 8, 12 ) )

</script>


Math.abs( num )

<script type="text/javascript" type="text/javascript">
document.write( Math.abs ( 7 ) + "<br />" )
document.write( Math.abs ( - 4.67 ) )

</script>


Math.acos( x )

<script type="text/javascript" type="text/javascript">

document.write(Math.acos(0.35) + "<br />")
document.write(Math.acos(0) + "<br />")
document.write(Math.acos(-1) + "<br />")
document.write(Math.acos(1) + "<br />")
document.write(Math.acos(2))

</script>


Math.asin( x )

<script type="text/javascript" type="text/javascript">

document.write(Math.asin(0.35) + "<br />")
document.write(Math.asin(0) + "<br />")
document.write(Math.asin(-1) + "<br />")
document.write(Math.asin(1) + "<br />")
document.write(Math.asin(2))

</script>


Math.atan( x )

<script type="text/javascript" type="text/javascript">

document.write(Math.atan(0.50) + "<br />")
document.write(Math.atan(-0.50) + "<br />")
document.write(Math.atan(5) + "<br />")
document.write(Math.atan(10) + "<br />")
document.write(Math.atan(-5) + "<br />")
document.write(Math.atan(-10))

</script>


Math.atan2( x , y)

<script type="text/javascript" type="text/javascript">

document.write(Math.atan2(0.50,0.50) + "<br />")
document.write(Math.atan2(-0.50,-0.50) + "<br />")
document.write(Math.atan2(5,5) + "<br />")
document.write(Math.atan2(10,20) + "<br />")
document.write(Math.atan2(-5,-5) + "<br />")
document.write(Math.atan2(-10,10))

</script>


Math.cos(x)

<script type="text/javascript" type="text/javascript">

document.write(Math.cos(3) + "<br />")
document.write(Math.cos(-3) + "<br />")
document.write(Math.cos(0) + "<br />")
document.write(Math.cos(Math.PI) + "<br />")
document.write(Math.cos(2*Math.PI))

</script>


Math.exp(x)

<script type="text/javascript" type="text/javascript">

document.write(Math.exp(1) + "<br />")
document.write(Math.exp(-1) + "<br />")
document.write(Math.exp(5) + "<br />")
document.write(Math.exp(10) )

</script>


Math.log(x)

<script type="text/javascript" type="text/javascript">

document.write(Math.log(2.7183) + "<br />")
document.write(Math.log(2) + "<br />")
document.write(Math.log(1) + "<br />")
document.write(Math.log(0) + "<br />")
document.write(Math.log(-1))

</script>


Math.pow(num, num)

<script type="text/javascript" type="text/javascript">

document.write(Math.pow(0,0) + "<br />")
document.write(Math.pow(0,1) + "<br />")
document.write(Math.pow(5,3) + "<br />")
document.write(Math.pow(1,10) + "<br />")
document.write(Math.pow(2,3) + "<br />")
document.write(Math.pow(-2,3) + "<br />")
document.write(Math.pow(2,4) + "<br />")
document.write(Math.pow(-2,4) )

</script>


Math.sin(x)

<script type="text/javascript" type="text/javascript">

document.write(Math.sin(3) + "<br />")
document.write(Math.sin(-3) + "<br />")
document.write(Math.sin(0) + "<br />")
document.write(Math.sin(Math.PI) + "<br />")
document.write(Math.sin(Math.PI/2))

</script>


Math.sqrt(x)

<script type="text/javascript" type="text/javascript">

document.write(Math.sqrt(0) + "<br />")
document.write(Math.sqrt(1) + "<br />")
document.write(Math.sqrt(9) + "<br />")
document.write(Math.sqrt(0.64) + "<br />")
document.write(Math.sqrt(-9))

</script>


Math.tan(x)

<script type="text/javascript" type="text/javascript">

document.write(Math.tan(0.50) + "<br />")
document.write(Math.tan(-0.50) + "<br />")
document.write(Math.tan(5) + "<br />")
document.write(Math.tan(10) + "<br />")
document.write(Math.tan(-5) + "<br />")
document.write(Math.tan(-10) )

</script>


status

هنگام باز شدن صفحه به نوار وضعيت در پايين پنجره مرورگر در سمت چپ دقت کنيد. اگر چنين نواری را مشاهده نمی کنيد، به منوی View در بالای مرورگر رفته و بر روی گزينه Status Bar کليک کنيد. موس خود را بر روی لينک زير برده و سپس آنرا دور کنيد و دوباره به نوار وضعيت نگاه کنيد.

IRANW3 website


window.alert( )

اين متد مانند کادرهای ارتباطی می باشد فقط بايد به شکل زير عمل کنيد:

window.alert ( " text " )

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

self.alert ( " text " )
parent.alert ( " text " )


window.blur( )

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

<script type="text/javascript" type="text/javascript">
function winblur()
{
window.blur()
}
</script>


window.close( )

<script type="text/javascript" type="text/javascript">
function winclose()
{
window.close()
}
</script>


window.confirm( )

<script type="text/javascript" type="text/javascript">
function confirmbox()
{
var name= window.confirm("Do you like black background?")
if (name==true)
{
document.write("<body bgcolor='black'>")
}
}
</script>


window.createPopup( )

<script type="text/javascript" type="text/javascript">
function show_popup()
{
var p=window.createPopup()
var pbody=p.document.body
pbody.style.backgroundColor="lime"
pbody.style.border="solid black 1px"
pbody.innerHTML="This is a pop-up! Click outside the pop-up to close."
p.show(150,150,200,50,document.body)
}
</script>


window.moveBy( )

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

<script type="text/javascript" type="text/javascript">
function move( )
{
window.moveBy(50,50 )
}
</script>


window.moveTo( )

اين متد هم پنجره را جابجا می کند با اين تفاوت که فقط يکبار به اندازه تعيين شده حرکت خواهد کرد.

<script type="text/javascript" type="text/javascript">
function move( )
{
window.moveTo(200,200 )
}
</script>


window.navigate( )

 <script type="text/javascript" type="text/javascript">
function nav( )
{
window.navigate("http://www.iranw3.com" )
}
</script>


window.open( )

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

_blank, _media, _parent, _search, _self, _top

اين پارامتر براي فريم، لينک و يا فرمها مناسب است که مکان باز شدن پنجره جديد را توسط آن کنترل کنيد. پارامتر بعدي مشخصاتي است که مي توانيد وارد کرده تا ظاهر پنجره را کنترل کنيد. اين مشخصات در جدول زير آمده است:

توضيح | مقدار | پارامتر
حالتي که پنجره بايد باز شود که تقريباً fullscreen است | yes,no,1,0 | channelmode
کنترل دکمه هاي دايرکتوري در پنجره جديد | yes,no,1,0 | directory
کنترل پنجره مرورگر که حالت fullscreen باشد يا نه | yes,no,1,0 | fullscreen
کنترل بلندي پنجره که حداقل مقدار بايد 100 باشد | عدد بر حسب پيکسل | height
تعيين فاصله پنجره از سمت چپ | عدد | left
کنترل پنجره که نوار آدرس داشته باشد يا نه | yes,no,1,0 | location
کنترل نوار منو در بالاي پنجره مرورگر | yes,no,1,0 | menubar
پنجره قابليت تغيير اندازه داشته باشد يا نه | yes,no,1,0 | resizeable
داشتن scrollbar در پنجره جديد | yes,no,1,0 | scrollbar
پنجره نوار وضعيت داشته باشد يا نه | yes,no,1,0 | status
کنترل نوار عنوان در بالاي پنجره | yes,no,1,0 | titlebar
کنترل نوار ابزار در پنجره | yes,no,1,0 | toolbar
تعيين فاصله پنجره از بالا | عدد | top
کنترل پهناي پنجره جديد | عدد | width

دکمه زير آدرس سايت را در پنجره جديد باز خواهد کرد:

آدرس صفحه در قسمت media bar ، سمت چپ صفحه باز مي شود:

آدرس زير با کنترل ظاهر پنجره مرورگر باز خواهد شد، به نحوه وارد کردن پارامترها دقت کنيد:

<script type="text/javascript" type="text/javascript">
function openwin( )
{
window.open ("http://www.google.com", "_blank","channelmode=no,fullscreen=no,height=300,location=no,menubar=0,resizeable=yes,scrollbars=1,status=no,titlebar=1,toolbar=0,width=500")
}
</script>


window.print( )

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

<script type="text/javascript" type="text/javascript">
function printwin( )
{
window.print( )
}
</script>


window.prompt( )

يک رنگ بنويسيد و سپس دکمه OK را بزنيد. دقت کنيد که اسم انگليسی آن رنگ را بايد بنويسيد مثل lime يا pink

<script type="text/javascript"
type="text/javascript">
function disp_prompt()
{
var color=prompt("What kind of color do you like?","")
if (color!=null && color!="")
{
document.write("<body bgcolor=" + color + ">")
}
}
</script>


window.resizeTo( )

<script type="text/javascript" type="text/javascript">
function resizeWindow()
{
window.resizeTo(500,300)
}
</script>


window.scrollTo( )

<script type="text/javascript" type="text/javascript">
function scrollWindow()
{
window.scrollTo(100,500)
}
</script>

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL

SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL


window.setInterval( ) and clearInterval( )

clearInterval , setInterval

متد setInterval يک کد و تابع را در يک مدت زمان خاص بر حسب ميلي ثانيه بررسي و يا اجرا مي کند، بطور مثال در هر 5 ثانيه رنگ يک متن را عوض مي کند و متد clearInterval اين زمان را نگه مي دارد.

متد setInterval داراي پارامترهايي مي باشد. اولين پارامتر آن code است که مي تواند يک تابع و يا يک خط کد جاوااسکريپت باشد. دومين پارامتر هم زمان است که بايد بر حسب ميلي ثانيه نوشته شود يعني 5 ثانيه را بايد 5000 بنويسيد.

window.setInterval ( "code or function", millisec )

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

<script type="text/javascript" type="text/javascript">
function status_time()
{
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var t = h + ":" + m + ":" + s;
window.status = t;
}
function timer ( ) {
stop = setInterval('status_time()', 1000);
}
</script>

<form>
<input type="button" onClick="timer( )" value="click here to stop timer" />
<input type="button" onClick="clearInterval(stop)" value="click here to stop timer" />
</form>


window.setTimeout( )

اين متد يک کد و يا يک تابع را بعد از مدت زمان معين فقط يکبار اجرا خواهد کرد که داراي دو پارامتر مي باشد که در پارامتر اول تابع و کد را مشخص مي کنيد و در پارامتر دوم ميلي ثانيه را وارد مي کنيد:

window.setTimeout ( "code or function", millisec )

دکمه زير پس از 5 ثانيه يک پيغام را نمايش خواهد داد:

<script type="text/javascript" type="text/javascript">
function timeout()
{
setTimeout("alert('After 5 seconds, Hi friends!')", 5000)
}
</script>

<form>
<input type="button" onclick="timeout()" value="Popup with Timeout" />
</form>


window.setTimeout( )

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

اين خصوصيات در بعضي از نسخه هاي اينترنت اکسپلورر کار مي کنند.

توضيح | مقدار | پارامتر
کنترل بلندي پنجره modaldialog | عدد | dialogHeight
فاصله پنجره از سمت چپ | عدد | dialogLeft
فاصله از بالا | عدد | dialogTop
کنترل پهناي پنجره | عدد | dialogWidth
قرار گرفتن پنجره در وسط Desktop | yes,no,1,0,on,off | center
تغيير مدل لبه پنجره | sunken,raised | edge
توانايي تغيير اندازه پنجره توسط کاربر | yes,no,1,0,on,off | resizable
کنترل scrollbar در پنجره | yes,no,1,0,on,off | scroll
کنترل نوار وضعيت | yes,no,1,0,on,off | status

<script type="text/javascript" type="text/javascript">
function modaldialog( )
{
window.showModalDialog("http://www.google.com")
}
</script>

<form>
<input type="button" onClick="modaldialog()" value="show Modal dialog ">
</form>


Navigator properties

کد اطلاعات بالا به شکل زير می باشد.

<script type="text/javascript" type="text/javascript">
var x = window.navigator
document.write("CodeName=" + x.appCodeName)
document.write("<br />")
document.write("MinorVersion=" + x.appMinorVersion)
document.write("<br />")
document.write("Name=" + x.appName)
document.write("<br />")
document.write("Version=" + x.appVersion)
document.write("<br />")
document.write("CookieEnabled=" + x.cookieEnabled)
document.write("<br />")
document.write("CPUClass=" + x.cpuClass)
document.write("<br />")
document.write("OnLine=" + x.onLine)
document.write("<br />")
document.write("Platform=" + x.platform)
document.write("<br />")
document.write("UA=" + x.userAgent)
document.write("<br />")
document.write("BrowserLanguage=" + x.browserLanguage)
document.write("<br />")
document.write("SystemLanguage=" + x.systemLanguage)
document.write("<br />")
document.write("UserLanguage=" + x.userLanguage)
</script>


Domain

 <script language="javascript" type="text/javascript">
document.write(document.domain)
</script>

The domain name for this site is:


lastModified

 <script language="javascript" type="text/javascript">
document.write(document.lastModified)
</script>

آخرين تاريخ و زمان اصلاح اين صفحه به شرح زير می باشد:


referre

 <script language="javascript" type="text/javascript">
document.write(document.referrer)
</script>

اطلاعات زير، آدرس اين سند می باشد:


Title property

 <script language="javascript" type="text/javascript">
document.write(document.title)
</script>

عنوان اين صفحه که در title bar مشاهده می شود:


URL property

 <script language="javascript" type="text/javascript">
document.write(document.URL)
</script>

آدرس صفحه وب


createAttribute( )

Hello my friends!

<script language="javascript" type="text/javascript">
function Attribute() {
var node = document.getElementById("header");
var attr = document.createAttribute("align");
attr.value = "center";
node.setAttributeNode(attr);
}
</script>

<h1 align="left" id="header">Hello my friends!</h1>
<input id="button01" type="button" onClick="Attribute()" value="click here to move the header">


createElement( )

 <script language="javascript" type="text/javascript">
function createButton() {
var newButton = document.createElement("<input type='button' name='test01' value='button 01'>")
document.body.insertBefore( newButton );
newButton = document.createElement("<input type='button' name='test02' value='button 02'>")
document.body.insertBefore ( newButton );
}
</script>

<form>
<input type="button" onClick="createButton()" value="Click here to create two buttons" /><br />
</form>


getElementById( )

<script language="javascript" type="text/javascript">
function getElement()
{
var x=document.getElementById("header")
alert("This is a " + x.tagName + " element")
}
</script>

<h1 id="header" onclick="getElement()">Click here to see what's the name of this tag!</h1>

Click here to see what's the name of this tag!


getElementByName( )

<script language="javascript" type="text/javascript">
function Elements()
{
var x=document.getElementsByName("myInput")
alert(x.length + " elements!")
}
</script>

<form >
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="mybutton" type="button" onclick="Elements()" value="Show how many elements named 'myInput'" />
</form>


open("mimetype"[,replace]) and close( )

معمولاً دو شئ open و close را با هم بکار می برند. شئ open به جاوااسکريپت می گويد که يک سند جديد بايد باز و در آن کدهای زير اجرا شود و در انتها هم شئ close خاتمه سند جديد را اعلام می کند.

<script language="javascript" type="text/javascript">
function replace()
{
var newDoc=document.open("text/html","replace")
var txt="<html><body>FUN!!!!</body></html>"
newDoc.write(txt)
newDoc.close()
}
</script>

<h1>Learning how to access the DOM is....</h1><br />
<Input type ="button" value = "Finish Sentence" onclick="replace()" />

Learning how to access the DOM is....


writeln( )

<script language="javascript" type="text/javascript">
function test()
{
for(i=1;i<=10;i++)
document.writeln("Number " + i + ".<br />");
}
</script>

<form>
<input type="button" value="click here to count from 1 to 10" onClick="test()" />
</form>


location.hash

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

<script language="javascript" type="text/javascript">
function hasHash () {
newWindow=window.open("http://www.iranw3.com/jstut/js18-05.asp#properties")
document.write("window.location.href = " + newWindow.location.href + "<P>")
document.write("window.location.hash = " + newWindow.location.hash + "<P>")
}
</script>

<form>
<input type="button" onClick="hasHash()" value="click here" />
</form>


location.host

<script language="javascript" type="text/javascript">
function msgHost () {
alert("window.location.host = " + location.host )
}
</script>

<form>
<input type="button" onClick="msgHost()" value="click here" />
</form>


location.hostname

<script language="javascript" type="text/javascript">
function host_name () {
alert("location.hostname = " + location.hostname )
}
</script>

<form>
<input type="button" onClick=" host_name()" value="click here" />
</form>


location.href

<script language="javascript" type="text/javascript">
function msghref () {
alert("location.href = " + location.href )
}
</script>

<form>
<input type="button" onClick=" msghref()" value="click here" />
</form>


location.pathname

<script language="javascript" type="text/javascript">
function path_name() {
alert("location.pathname = " + location.pathname )
}
</script>

<form>
<input type="button" onClick=" path_name()" value="click here" />
</form>


location.protocol

<script language="javascript" type="text/javascript">
function msgProtocol() {
alert("location.protocol = " + location.protocol )
}
</script>

<form>
<input type="button" onClick=" msgProtocol()" value="click here" />
</form>


location.reload( )

<script language="javascript" type="text/javascript">
function refresh()
{
window.location.reload()
}
</script>

<form>
<input type="button" value="Refresh page" onclick="refresh()" />
</form>


location.replace( )

<script language="javascript" type="text/javascript">
function replace_URL()
{
window.location.replace("http://www.iranw3.com")
}
</script>

<form>
<input type="button" value="Visit www.iranw3.com" onclick="replace_URL()" />
</form>


history property

برای ديدن تعداد صفحات بازديد شده :

<script language="javascript" type="text/javascript">
function pages()
{
alert("Number of pages in your browser history = " + history.length )
}
</script>


history methods

برای مراجعه به صفحه قبل دکمه را بزنيد:

<script language="javascript" type="text/javascript">
function back_button()
{
history.back( )
}
</script>

بجای دکمه از لينک هم می توانيد استفاده کنيد:

<a href="javascript:history.go(-1)" title="Go Back" > بازگشت به صفحه قبل </a>

بازگشت به صفحه قبل


FAQ --- پرسش و پاسخ

آيا بدون فراگيري جاوااسکريپت هم مي توان يک وب سايت ساخت؟

بله حتماً، جاوااسکريپت فقط به شما کمک مي کند تا يک وب سايت جذاب تر و پويا داشته باشيد.

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

در حال حاضر بله، کليه مرورگرهاي معروف از اين زبان پشتيباني مي کنند.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا نوشتن خصوصيت language لازم است؟

بله حتماً و بايد آنرا برابر با مقدار javascript قرار دهيد چون به غير از جاوااسکريپت زبانهاي اسکريپتي ديگري مانند vbscript و jscript هم هست.

چه مزيتي دارد اگر از فايل جداگانه براي جاوااسکريپت استفاده کنم؟

اينکار به نظم کد نويسي يک صفحه کمک ميکند و همچنين با xhtml هم سازگار است و در ضمن کدهاي شما از ديد افراد مبتدي هم پنهان مي ماند.

آيا ميتوانم تگهاي اچ تي ام ال را هم داخل کدهاي جاوااسکريپت بکار برم؟

بله در بخش هاي بعدي با آن آشنا خواهيد شد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

چگونه در مرورگرهاي ديگر، پيغام هاي خطا جاوااسکريپت را دريافت کنيم؟

در مرورگر اپرا Opera بايد به منوي Window برويد سپس گزينه Special و در آخر گزينه JavaScript console را انتخاب کنيد. اگر نسخه مرورگر اپراي شما به گونه اي است که اين گزينه را در آن منو پيدا نمي کنيد شما بايد به منوي Tools رفته سپس Advanced و در آخر گزينه JavaScript console .

در مرورگر نت اسکيپ Netscape به منوي Tools رفته سپس گزينه Web Development و در آخر هم گزينه JavaScript console . در مرورگرهاي موزيلا Mozilla مانند Firefox به منوي Tools رفته و گزينه JavaScript console را انتخاب کنيد. در مرورگرهاي نت اسکيپ و موزيلا مي توانيد در قسمت آدرس گزينه زير را هم وارد کنيد و سپس دکمه Enter را بزنيد:

javascript:

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

طول نام يک متغير چقدر مي تواند باشد؟

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

آيا نام متغير مي تواند فقط عدد باشد؟

خير ، چون کاراکتر اول نام متغير حتماً بايد يا حرف باشد و يا علامت underscore يا همان _ ولي بقيه اسم ميتواند عدد باشد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

من همه کدها را درست نوشتم و هيچ پيغام خطايي هم دريافت نکردم، اما تاريخ و زمان چاپ شده در صفحه صحيح نمي باشد. علت چيست؟

جاوااسکريپت اطلاعات سيستم شما را مي خواند و سپس نمايش مي دهد که بطور حتم اين اطلاعات صحيح نمي باشند. ابتدا تاريخ و ساعت سيستم عامل خود را تنظيم کنيد و يکبار ديگر کد را اجرا کنيد.

از تگهاي اچ تي ام ال در اسکريپت استفاده کردم اما هنگام اجراي کد با پيغام خطا در مورد آن تگها روبرو مي شوم. علت چيست؟

دقت کنيد، براي نوشتن خصوصيت يک تگ به جاي دو علامت "" بايد از ' ' استفاده شود. مانند زير:

document.write("<p align='right'>.....</p>")

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

منظور از اينکه يک معادله true يا false برميگرداند چيست؟

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

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

اگر از پرانتز يا آکلاد در اين دستورات استفاده نکنيم چه اتفاقي خواهد افتاد؟

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

آيا حالتي وجود دارد که دستور if...else if ...else را ساده تر کند؟

بله، براي ساده تر کردن اين دستور مي توانيد از دستور switch که توضيح آن در بخش بعدي آمده است، استفاده کنيد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا مي توانيم بجاي break از علامت ; استفاده کنيم تا نشان دهنده اتمام يک قسمت از دستور سوئيچ باشد؟

خير، حتماً بايد break را در جاي خودش بکار بريد. البته مي توانيد از علامت ; هم در بايان هر خط از کد بکار بريد تا خواناتر شود.

بکار بردن دستور default اجباري است يا دستور سوئيچ بدون آن هم کار مي کند؟

اين دستور اجباري نيست فقط در زمانيکه بخواهيد براي درست نبودن حالتهاي case هم نتيجه داشته باشيد، مي توانيد از اين دستور در انتهاي مجموعه استفاده کنيد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

هنگام اعلام پارامترها در حلقه for مي توانيم از علامتهاي ديگر براي جداسازي آنها استفاده کنيم؟

خير، حتماً بايد از علامت ; استفاده شود. در غير اينصورت با پيغام خطا مبني بر اينکه نياز به ; هست مواجه خواهيد شد.

اگر از عبارت افزاينده استفاده نکنيم چه اتفاقي ميافتد؟

کد شما در حلقه بينهايت گرفتار خواهد شد و مقدار اوليه متغير را تکرار خواهد کرد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا مي توانيم انديس را از يک شروع کنيم؟

بله، اما نبايد فراموش کنيد که کليه تنظيمات را بايد بر مبناي انديس يک انجام دهيد.

اگر انديس کلي را 5 در نظر بگيريم اما فقط 4 تا مقدار بدهيم چه اتفاقي خواهد افتاد؟

جاوااسکريپت آن مقدار اضافي را بصورت undefined نمايش خواهد داد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا آرگومانها فقط براي توابع هستند؟

خير در آرايه ها هم آرگومان هست که به همان پارامترهاي داخل پرانتز مي گويند.

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

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

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا مي توان متن دکمه هاي پنجره ها را عوض کرد؟

خير متن دکمه ها بصورت پيش فرض انتخاب شده اند.

ميخواهم يک متني در پنجره Alert وارد کنم که در چند خط زيرهم نوشته شده باشد، چه کار بايد بکنم؟

براي تقسيم کردن يک جمله به چند خط بايد n\ را در هر کجا که نياز به اتمام خط داريد، وارد کنيد.

alert ( " This is a line-break \ n for popup boxes." )

اين دستور را در تمام popup box ها مي توانيد بکار بريد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

يک رويداد در يک تگ نوشتم وآنرا برابر با يک کد جاوااسکريپت قرار دادم، اگر بخواهم يک کد ديگر به آن رويداد اضافه کنم چطور بايد آنرا بنويسم؟

بايد بعد از آن کد جاوااسکريپت علامت ; بگذاريد تا مفسر جاوااسکريپت در مرورگر متوجه يک خط کد ديگر شود به اين صورت:

onClick="alert('text'); functionname( )"

فرق رويداد onClick با onMouseDown چيست؟

جاوااسکريپت رويداد onClick را زماني تشخيص مي دهد که شما بر روي موس کليک و سپس رها کنيد، اما براي onMouseDown فقط فشردن دکمه موس را مي فهمد.

آيا مي توان چند رويداد را در يک تگ قرار داد؟

بله، مفسر جاوااسکريپت به ترتيب رويداد هاي قابل اجرا را انجام خواهد داد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

اگر نيازي به متد يا خصوصيتي داشته باشيم از همان ابتدا در شئ تعريف مي کنيم پس چه نيازي به دستور prototype است؟

گاهي وقتها شما مجبور هستيد اين گزينه را به عهده کاربر بگذاريد تا تصميم بگيرد، يعني به کاربر حق انتخاب مي دهيد. در آن صورت است که مجبور به استفاده از اين دستور مي شويد تا متد يا خصوصيتي که کاربر نياز دارد، به شئ اضافه شود. مثلاً يک ماشين را به کاربر پيشنهاد مي دهيد و ميخواهيد که کاربر به سليقه خودش آنرا سفارش دهد که در اينجا به اهميت اين دستور پي خواهيد برد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

اگر يک رشته متني را در يک متغير ذخيره کنيم يعني بصورت شئ تعريف نشده باشد، آيا مي توانيم از خصوصيت و متدهاي شئ String استفاده کنيم؟

بله حتماً، فرقي نمي کند که به چه صورت يک رشته ذخيره شود.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

منظور از مقادير ثابت چيست؟

مقادير ثابت در جاوااسکريپت که بنام constant معروف هستند، بر عکس متغيرها فقط يک مقدار از قبل تعيين شده را در خود ذخيره مي کنند و ديگر نمي توان آن مقدار را تغيير داد. مانند PI که در فارسي بنام عدد پي معروف است فقط يک مقدار ثابت 3.14 دارد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

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

چندين علت باعث اين مشکل مي شود، اول اينکه هر خصوصيات و متدي در هر مرورگري اجرا نمي شود و دوم اينکه بعضي از مثالها يک پنجره جديد روي مرورگر باز خواهند کرد که اگر برنامه Popup blocker داشته باشيد از باز شدن آن جلوگيري خواهد کرد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

منظور از navigator همان مرورگر Netscape Navigator است؟

خير، اين شئ در اين مرورگر هم وجود دارد اما خود آن مرورگر نيست.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

منظور از اينکه يک خصوصيت و يا متد توسط W3C توصيه نمي شود چيست؟

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

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

منظور از پورت شماره 80 چيست؟

در کامپيوتر يک سري پورت فيزيکي مانند پورت USB و غيره ، وجود دارد که از طريق آنها مي توانيد با وسايل جانبي کامپيوتر ارتباط برقرار کنيد و همچنين يک سري پورت مجازي وجود دارد که قابل مشاهده و لمس نيستند و از طريق آنها کامپيوتر شما با شبکه هايي مانند اينترنت ارتباط برقرار کرده و تبادل اطلاعات مي کنند. بر همين اساس پروتکل هايي که مرورگر شما با آنها در ارتباط است، داراي شماره مشخص مي باشند که يکي از آن پروتکل ها http است که از طريق آن صفحات معمولي وب را مشاهده مي کنيد. اين پروتکل از پورت شماره 80 براي تبادل اطلاعات استفاده مي کند.

به غير از پروتکل http چه پروتکل هايي وجود دارد؟

پروتکلهاي معروفي که مرورگرها از طريق آنها تبادل اطلاعات مي کنند عبارتند از:

http://, https://, ftp://, file:///, Usenet, Gopher

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا مي توان شئ window را قبل از شئ history ننوشت؟

بله مي توانيد آنرا حذف کنيد، حتي اين شئ را هم مي توانيد بصورت زير بنويسيد

document.history

اگرپارامتر يا آرگومان آرايه go را برابر با صفر قرار دهيم، چه اتفاقي خواهد افتاد؟

پارامتر صفر به خود همان سند اشاره و مانند refresh در مرورگر عمل مي کند.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا مي توان با جاوااسکريپت کدي نوشت که به محض باز شدن صفحه اندازه صفحه نمايش را تغيير دهد؟

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

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

آيا DOM براي تمام مرورگرها مي باشد و اشياء آن در همه مرورگرها کار مي کنند؟

در حال حاضر دو مرورگر معروف اينترنت اکسپلورر و نت اسکيپ، DOM هاي خود را به W3C عرضه کردند ولي اين کنسرسيوم هنوز آنها را استاندارد معرفي نکرده چون بعضي از خصوصيات و متدهاي اين اشياء در دو مرورگر مشترک مي باشند و بعضي ديگر، مختص همان مرورگر هستند. بنابراين ممکن است بعضي از خصوصيات و متدها فقط در يکي از مرورگرها کاربرد داشته باشند.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FAQ --- پرسش و پاسخ

اگر اين نکات را رعايت نکنيم چه اتفاقي خواهد افتاد؟

بعضي از آنها را حتماً بايد رعايت کنيد چون در غير اينصورت با پيغام خطا مواجه خواهيد شد و اسکريپت شما کارآيي نخواهد داشت، اما بقيه را فقط براي راحتي و احتياط در کد نويسي بهتر است که رعايت کنيد.

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


مقدمه

جاوااسکريپت چيست؟

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

جاوااسکريپت توسط شرکت Netscape اختراع شد و به عنوان اولين زبان اسکريپت نويسي در وب توسعه يافت که در حال حاضر پرکاربردترين و محبوب ترين زبان اسکريپت نويسي در دنيا مي باشد که يکي از دلايل آن، پشتيباني دو مرورگر معروف وب، Internet Explorer و Netscape Navigator از اين زبان مي باشد. نا گفته نماند که شرکت مايکروسافت هم براي اينکه از نت اسکيپ در اين زمينه عقب نماند، نسخه مربوط به خود را بنام Jscript توليد کرد.

تفاوت جاوااسکريپت با جاوا

تقريباً در هر جا که آموزش جاوااسکريپت هست اين مطلب هم مشاهده مي شود چون خيلي ها فکر مي کنند که اين دو با هم يکي بوده يا حداقل اينکه جاوااسکريپت ساده شده زبان جاوا براي کاربرد در وب مي باشد که اصلاً اين چنين نيست.

همانطور که ميدانيد جاوااسکريپت متعلق به شرکت نت اسکيپ مي باشد اما زبان جاوا متعلق به شرکت Sun Microsystems است. جاوااسکريپت در اصل يک زبان اسکريپت نويسي است نه يک زبان برنامه نويسي کامپيوتر، شايد بتوان اسکريپتها را يک نوع زبان برنامه نويسي خيلي سبک و ساده ناميد اما جاوا يک زبان برنامه نويسي کاملاً پيچيده مانند زبان C است. تفاوت ديگر آنها اينست که جاوااسکريپت توسط يک برنامه مفسر يعني interpreter در مرورگر تعريف و تفسير شده تا قابل اجرا باشد و حتماً هم اين کار در مرورگر انجام مي شود اما برنامه هاي جاوا بايد توسط يک کامپايلر Compiler ، کامپايل شده که کامپايل شدن يعني جمع آوري اطلاعات مورد نظر و ترجمه آن اطلاعات به زبان قابل فهم براي کامپيوتر و تبديل آن به يک برنامه کاربردي واحد و مستقل براي کاربر را گويند. به همين دليل برنامه هاي جاوا را که اپلت applet مي نامند، مستقل اجرا مي شوند. البته اپلتهاي جاوا را مي توان در صفحات وب هم گنجاند.

در يک جمله مي توان گفت که جاوااسکريپت فقط در صفحات وب تأثيرگذار است اما زبان جاوا براي خلق برنامه هاي پيچيده در کامپيوتر ساخته شده است.

قابليتهاي جاوااسکريپت

اکنون که يک مفهومي از زبان جاوااسکريپت را در ذهن داريد، بايد ببينيم که با آن چکار مي توانيم انجام دهيم يا بهتر بگويم که جاوااسکريپت چه کاري براي ما انجام مي دهد و چه قابليتهايي را در مرورگر ايجاد مي کند.

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

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

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

يکي از بهترين ويژگيهاي جاوااسکريپت، اعتبار بخشيدن به اطلاعات مي باشد مثلاً شما يک فرمي براي ارتباط با کاربر خود ساخته ايد و مي خواهيد قبل از اينکه آن اطلاعات به سرور فرستاده شود، بازبيني شده تا اگر مشکلي وجود داشته باشد به کاربر اطلاع داده شود تا در صدد رفع آن برآيد. چون جاوااسکريپت اصطلاحاً Client side است، يعني در سيستم کاربر اجرا شده و مستقل از وب سرور است مي تواند ترافيک روي سرور را کم کرده که اين موضوع يک امتياز مثبت براي ميزبانان وب محسوب مي شود.


آغازاسکريپت نويسی

تگ اسکريپت

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

<script> ... </script>

که کليه دستورات جاوااسکريپت بايد مابين آنها قرار گيرد. اين تگهاي اچ تي ام ال به مرورگر مي فهمانند که در کجا اين زبان آغاز شده تا مفسر جاوااسکريپت مرورگر فعال شود و در کجا پايان مي پذيرد که برنامه مفسر هم کار خود را خاتمه دهد.

language

اما تگ script مانند بقيه تگها داراي خصوصياتي مي باشد، يکي از آنها language است که مقدار آنرا بايد برابر با javascript قرار دهيد،

<script language="javascript">
</script>

براي مقدار javascript مي توانيد نسخه آن را هم بنويسيد. اين زبان هم مانند اچ تي ام ال داراي نسخه هاي مختلفي است که هر کدام آنها با قابليتهاي جديدي در وب توسعه يافتند. نسخه هاي اين زبان عبارتند از 1.0 ، 1.1 ، 1.2 ، 1.3 ، 1.4 و آخرين نسخه حال حاضر هم 1.5 مي باشد که هم اکنون اين نسخه با مرورگر مايکروسافت يعني اينترنت اکسپلورر سازگاري ندارد. فعلاً مرورگر اينترنت اکسپلورر از نسخه 1.3 اين زبان پشتيباني مي کند.

type

تگ اسکريپت خصوصيت type هم دارد که براي اين زبان بايد آنرا برابر با text/javascript قرار دهيد. نکته قابل توجه اينست که اگر اين خصوصيت را به اين تگ اضافه کنيد، مرورگر اينترنت اکسپلورر نسخه 1.5 اين زبان را ناديده مي گيرد و کد را اجرا مي کند. شما مي توانيد با اجراي کد زير هم اولين اسکريپت خود را تجربه کنيد و هم خصوصيت type را در IE امتحان کنيد.

خب مانند زبان اچ تي ام ال مي توانيد از يک ويرايشگر متن مانند برنامه Notepad استفاده کرده و کد زير را در آن وارد کنيد:

<html>
<head>
<title> My JavaScript </title>
</head>
<body>
<script language="javascript1.5" type="text/javascript">
document.write(" Hello my friends ")
</script>
</body>
</html>

اکنون اين فايل را با پسوند htm ذخيره کنيد و سپس آنرا در مرورگر اينترنت اکسپلورر اجرا کنيد که جمله Hello my friends را بايد در صفحه ببينيد. حالا خصوصيت type را حذف کنيد و دوباره فايل را ذخيره و مشاهده کنيد، هيچ متني در صفحه ديده نميشود که با تغيير نسخه 1.5 به 1.3 آن متن دوباره نمايان خواهد شد. نوشتن نسخه جاوااسکريپت اجباري نيست يعني مي توانيد آنرا ننويسيد.

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

document.write(" Hello my friends ")

ببينيم در اينجا اين عبارت چگونه براي مرورگر تفسير مي شود. document يعني همان سند و فايل html که در آن اين عمليات بايد انجام شود و مرورگر به محض برخورد با اين عبارت آماده مي شود براي انجام کاري که بعد از يک نقطه نوشته مي شود. در اينجا بايد عمل write يعني نوشتن را انجام دهد اما چي بايد بنويسد، طبق قرارداد بايد هر چيزي که در بين پرانتز هست را بنويسد و چون محتواي داخل پرانتز مابين دو علامت نقل قول يعني " " قرار گرفته پس بايد بصورت يک string در بيايند. string يعني يک رشته کاراکتر که مي تواند هم حرف باشد هم عدد و هم علامت و خاصيت string در اين است که هرچيزي مابين دو علامت " " قرار گرفت عيناً بايد در صفحه نوشته شود.

در جاوااسکريپت به document يک object يعني شئ مي گويند و هنگامي که يک نقطه بعد از آن گذاشته مي شود آن شئ منتظر method خود مي شود که در اينجا همان write است. به عبارت ساده اين خط مي گويد که آن شئ را بردار و در آن توسط متد نوشتن چيزي بنويس.

ساده بود، نه؟ بقيه دستورات هم به همين راحتي است فقط بايد آنها را بنويسيد و تمرين کنيد تا در ذهنتان بمانند.

src

تگ script يک خصوصيت ديگر هم دارد که src است و با آن آشنا هستيد، بله همانطور که حدس زديد براي آدرس دهي است. کدهاي جاوااسکريپت را هم مانند استايل شيت مي توانيد در يک فايل جداگانه نوشته و با پسوند js ذخيره کنيد سپس با خصوصيت src آدرس آن فايل را مشخص کنيد. توجه داشته باشيد که در آن فايل نبايد ديگر تگ script را بنويسيد. معمولاً در اين حالت تگ اسکريپت در قسمت head گنجانده مي شود تا با شروع صفحه فايل جاوااسکريپت فراخواني شود.

<html>
<head>
<script language="javascript" src="jsfiles/name.js" type="text/javascript">
</script>
</head>

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


پيغامهاي خطا در جاوااسکريپت

چگونگي دريافت پيغام خطا

يکي از مواردي که در نوشتن کدهاي جاوااسکريپت ممکن است زياد با آن برخورد کنيد، دريافت پيغام هاي خطا هنگام اجراي کدها در مرورگر مي باشد، پس بهتر است در همين ابتداي کار با آنها آشنا شويد تا هنگام مشاهده خطا، تجربه کافي براي رفع آن داشته باشيد. خطاهاي جاوااسکريپت را به دو صورت متوجه مي شويد يکي ظاهر شدن مثلثي زرد با يک علامت تعجب در سمت چپ نوار وضعيت مرورگر که در بعضي از مرورگرها اين نوار مشاهده نمي شود و مي توانيد براي مشاهده آن به منوي View مرورگر رفته و روي گزينه Status Bar کليک کنيد. حالت ديگر ديدن پيغامهاي خطا، باز شدن يک پنجره در وسط مرورگر است که در اين حالت جزئيات خطاي ايجاد شده را هم مي توانيد مشاهده کنيد.

توجه داشته باشيد، در نسخه هاي جديد مرورگر اينترنت اکسپلورر اين پنجره مشاهده نميشود و ابتدا آنرا بايد فعال کنيد. براي فعال کردن آن به منوي Tools مرورگر رفته و گزينه Internet Options را انتخاب کنيد، در پنجره باز شده به قسمت Advanced رفته و گزينه Display a notification about script error را تيک بزنيد، سپس دکمه Ok را زده تا کار شما تأييد شود. بهتر است که قبل از شروع کد نويسي جاوااسکريپت اين عمل را انجام دهيد تا هنگام بروز خطا در صدد رفع آن برآييد که به اين کار اشکال زدايي يا Debugging مي گويند. اگر هم اين گزينه را فعال نکرديد، هنگام بروز خطا مي توانيد بر روي آن مثلث زرد رنگ در نوار وضعيت رفته و دوبار کليک کنيد که همان پنجره اعلان خطا باز خواهد شد.

انواع خطاها

اساساً دو نوع خطا براي جاوااسکريپت وجود دارد، خطاهاي نحوي يا Syntax errors و خطاهاي زمان اجرا يا Run time errors که در خطاهاي نحوي يک مشکلي در ترکيبات کدها بوجود آمده مثلاً يک غلط املائي در يک دستور يا جا انداختن يک حروف يا علامت و در خطاهاي زمان اجرا احتمالاً يک دستور بطور اشتباه جاي يک دستور ديگر نوشته شده است که در هنگام اجراي کد، مفسر مرورگر نمي تواند اين دستور را تجزيه تحليل کند وخطا را اعلام مي کند.

ايجاد يک خطا

خب حالا اجازه دهيد تا اين پيغامها را تجربه کنيم و ببينيد که به چه راحتي توسط آنها مي توانيد اشکال زدايي کرده و کد خود را به سرعت اصلاح کنيد. ممکن است که دهها بار با پيغام خطا روبرو شويد ولي نااميد نشويد چون حرفه اي ها هم بارها و بارها با آن مواجه مي شوند. حالا کد زير را با نام error.htm ذخيره کنيد:

<html>
<head>
<title> Error message </title>
</head>
<body>
<script language="javascript" type="text/javascript">
document.write("I'm ready for first error message.");
</script>
</body>
</html>

يکبار آنرا اجرا کنيد و نتيجه را مشاهده کنيد. حالا پرانتز دوم راحذف مي کنيم، بدين صورت:

document.write("I'm ready for first error message.";

سپس فايل را دوباره ذخيره کرده و اجرا مي کنيم. همانطور که انتظار داشتيم پنجره پيغام خطا باز شد، اگر جزئيات پيغام را نداريد روي دکمه Details يا Show Details کليک کنيد تا ببينيم که چه اطلاعاتي را مي توانيم بدست آوريم. در کادر جزئيات اولين گزينه Line مي باشد که اگر مطابق کد بالا عمل کرده باشيد بايد درجلوي آن عدد 7 نوشته شده باشد. اين خط به ما مي فهماند که ايراد در خط هفتم سورس کد است. دقت کنيد، تنها خطهاي مربوط به جاوااسکريپت را نبايد بخوانيد بلکه کليه خطوط از بالا به پايين خوانده مي شود، حتي خطهاي خالي هم بايد شمرده شوند.

دومين گزينه، کلمه Char است که بيانگر عدد شمارش شده کاراکتري که باعث بروز خطا شده است و در اينجا آن عدد 52 مي باشد. فراموش نکنيد که هر فاصله بين کلمات هم يک کاراکتر به حساب ميايد. شايد اينجا سؤالي برايتان پيش بيايد که چرا عدد 52 ؟ در صورتي که در اينجا پرانتز کاراکتر51 است. بايد يک نکته را خدمتتان عرض کنم که علامت ; در جاوااسکريپت يک کاراکتر اختياري است که نشان دهنده پايان يک خط از کد مي باشد و برنامه نويسان بر حسب عادتي که دارند از اين علامت استفاده مي کنند ، در اينجا مفسر جاوااسکريپت آنرا به عنوان يک کاراکتر قبل از کاراکتر اصلي خطا شناسايي کرده است.

گزينه بعدي Code ميباشد که ظاهراً بطور معمول عدد صفر جلوي آن ميباشد و هنوز نتوانستم کارآيي آنرا تشخيص بدهم و گزينه آخر هم URL است که آدرس فايل اچ تي ام ال است که در آن خطا توليد شده است.

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

به عنوان جمله آخر اين قسمت، هميشه به پنجره هاي اعلان خطا با ديد مثبت نگاه کنيد چون آنها به ما کمک مي کنند تا اشکال را براحتي پيدا کنيم.


متغيرها در جاوااسکريپت

متغير چيست؟

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

<script language="javascript"
type="text/javascript">
var strTest = "This is an example for variable."
document.write(txtTest)
</script>

حالا مي پردازيم به جزئيات تعريف يک متغير در اين اسکريپت:

var strTest = "This is an example for variable."

اصطلاح var از کلمه variable مي آيد که نوشتن آن اختياري مي باشد، يعني مي توانيد يک متغير را بدون نوشتن آن هم تعريف کنيد ولي اگر مي خواهيد کد شما خوانا تر باشد بهتر است که از var استفاده کنيد. قسمت بعدي يعني strTest نامي است که شما براي آن متغير انتخاب مي کنيد و سپس علامت مساوي است که متغير را برابر با يک مقدار قرار مي دهد و در آخر هم مقدار تعيين شده براي متغير که در اينجا يک رشته متني است يا يک text string ميباشد که به همين دليل بايد آنرا بين دو علامت " " قرار دهيم تا عيناً محتويات آن در مرورگر نوشته شود.

انتخاب نام متغير

بهتر است نام يک متغير را طوري انتخاب کنيد که در عين سادگي، گويا بوده و يادآور نکاتي براي شما باشد چون هميشه کدهاي شما به چند خط ختم نميشود، گاهي اوقات ممکن است مجبور شويد بيش از صد خط کد در يک صفحه قرار دهيد. بطور مثال چون مقدار متغيردر اينجا يک رشته يعني string بود من سه حرف str را به ابتداي نام متغير اضافه کردم.

اما براي انتخاب نام متغير بايد نکات زير را رعايت کنيد:

  • نام يک متغير مي تواند از مجموع حروف، اعداد و علامت underline يا زيرين خط يعني _ تشکيل شود، که آغاز کننده نام نبايد يک عدد باشد و همچنين هيچگونه فاصله اي هم در آن نبايد باشد.
  • در جاوااسکريپت حروف کوچک با بزرگ متفاوت مي باشند يعني strTest با strtest کاملاً تفاوت دارد که اصطلاحاً مي گويند جاوااسکريپت case sensitive است.

انواع متغيرها

دو نوع متغير وجود دارد که تفاوت اين دو مدل در محل استفاده از آنها مي باشد. متغيرهاي کلي و سراسري که به آنها global گفته مي شود. اين متغيرها در سراسر يک فايل اچ تي ام ال کاربرد دارند يعني يکبار آنرا در ابتداي اسکريپت تعريف و مقدار دهي مي کنيد ولي در هر کجا از کد که مورد نياز باشد از آنها بهره مي گيريد. نوع ديگر آن متغيرهاي محلي يا local هستند که فقط در يک قسمت از اسکريپت کارآيي دارند که ممکن است در قسمت ديگري همان متغير با يک مقدار ديگري تعريف شود. معمولاً متغير هاي محلي در توابع يا function ها کاربرد دارند که يک متغير در هر تابع مي تواند مقادير متفاوت داشته باشد بدون اينکه پيغام خطايي توليد کند که در قسمت مورد نظر function ها را ياد خواهيد گرفت.

به قسمتي از اسکريپت که يک متغير در آن کاربرد دارد، حوضه يا scope آن متغير گفته مي شود.

با درک مفهوم متغيرها در جاوااسکريپت مي توانيم در صفحه بعد با چگونگي نمايش تاريخ و زمان در صفحات وب آشنا شويم.


تاريخ و زمان در جاوااسکريپت

Date Object

يکي از ويژگي هايي که جاوااسکريپت دارد جمع آوري اطلاعات از سيستم کاربر و نمايش آنها در صفحات وب است. همانطور که ميدانيد زبان اچ تي ام ال به تنهايي قادر به انجام چنين کاري نيست اما با کمک زبانهاي ديگر تحت وب مانند Javascript ، مي تواند تا حدودي اين مشکل را برطرف کند. شئ هايي در جاوااسکريپت وجود دارند که توسط متدهاي مختلف، اطلاعات مورد نياز را از سيستم گرفته و در اختيار کاربران قرار مي دهند. يکي از اين object ها و شئ ها ، Date مي باشد که به کمک آن مي توانيم تاريخ و زمان سيستم را هنگام اجراي کد دريافت کنيم، سپس آنرا نمايش دهيم و يا اينکه در يک متغير ذخيره کنيم تا در صورت لزوم از آن بهره گيريم. اين object بصورت زير تعريف مي شود:

new Date()

به طرز نوشتن آن دقت کنيد که غير از اين باشد با پيغام خطا روبرو خواهيد شد چون جاوااسکريپت زبان حساسي است پس هر جا که حروف بزرگ است بايد بزرگ و هر جا کوچک است بايد کوچک نوشته شود. در آخر هم پرانتز مي گذاريد که در قسمتهاي بعدي همين صفحه کارآيي آنها را درک خواهيد کرد. اين شئ يک رشته متني شامل روز، ماه، سال، ساعت، دقيقه، ثانيه و اختلاف زماني با UTC را برميگرداند. UTC مخفف Coordinated Universal Time مي باشد که به آن Zulu time هم مي گويند و مطابق با استاندارد جهاني زمان است.

کد زير را در يک سند اچ تي ام ال وارد کنيد و پس از ذخيره، آنرا اجرا کنيد:

<script language="javascript"
type="text/javascript">
document.write ( new Date() )
</script>

متدهاي شئ Date

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

getDate(), getDay(), getMonth(), getYear(), getHours(), getMinutes(), getSeconds()

براي تعريف و استفاده از اين متدها بايد ابتدا شئ را نوشته، سپس يک نقطه بگذاريم و بعد از نقطه متد مورد نظر را بنويسيم.

براي درک بهتر مطالب گفته شده يک تمرين را با هم انجام مي دهيم. در يک صفحه وب، مي خواهيم زمان ورود يک کاربر به همان صفحه را اعلام کنيم. بطور مثال:

شما دقيقاً درساعت وارد اين صفحه شديد.

که اسکريپت آن براي برگرداندن زمان مورد نظر به صورت زير مي باشد:

<script language="javascript"
type="text/javascript">
var vorood = new Date()
document.write( vorood.getHours() + ":" + vorood.getMinutes() + ":" +
vorood.getSeconds() )
</script>

ابتدا شئ Date را تعريف کرده و در يک متغير به نام vorood ذخيره مي کنيم تا بکار بردن آن در قسمتهاي بعدي راحت تر باشد، سپس از شئ document و متد write براي چاپ نتيجه در صفحه وب استفاده کرده و متدهاي لازم براي برگرداندن اطلاعات مورد نياز را مي نويسيم. دقت کنيد که براي ترکيب متدها از علامت + استفاده کرديم، اين علامت باعث ترکيب و پيوند بين اجزاي يک اسکريپت مي شود که خاصيت آنرا در بخش بعدي operator ها يعني عملگرها توضيح خواهم داد. ازعلامت : هم بين ساعت، دقيقه و ثانيه استفاده شده و چون مي خواستيم که اين علامت عيناً در صفحه نوشته شود آنرا بين علامت نقل قول يعني "" گذاشتيم. در ضمن مي توانيد از کدهاي اچ تي ام ال هم استفاده کنيد تا زمان به شکل دلخواه شما در صفحه چاپ شود. بطور مثال اگر بخواهيد که صورت Bold در صفحه نوشته شود، به شکل زير عمل مي کنيد:

document.write("<b>"+ vorood.getHours()+ ":"+ ...... + "</b>")

نکته: هنگاميکه از متد getMonth() براي برگرداندن عدد ماه استفاده مي کنيد بايد هميشه آنرا بعلاوه عدد يک کنيد چون جاوااسکريپت اولين ماه ميلادي را برابر با عدد صفر قرار مي دهد.

document.write( new Date().getMonth()+1 )

در مورد متد getYear() هم اگر مي خواهيد نتيجه کامل برگردد يعني سال بصورت چهاررقمي نوشته شود بايد از متد getFullYear() استفاده کنيد.

اگر هم بخواهيد تمام مقادير بر اساس UTC برگردانده شوند، بايد اين کلمه را در وسط متد مورد نظر وارد کنيد. بدين صورت:

getUTCFullyear(), getUTCDate(), getUTCHours(), getUTCMinutes()

تنظيم تاريخ و زمان

شئ Date به غير از متدهاي ذکر شده در بالا، داراي متدهاي ديگري است که توسط آنها مي توانيد زمان و تاريخي را بصورت دلخواه تنظيم کنيد. در اينگونه متدها بجاي کلمه get بايد از set استفاده کنيد و مقدار معيني را در پرانتز وارد کنيد. بطور مثال مي خواهيم همين موقع را در سال 2008 داخل صفحه چاپ کنيم.

<script language="javascript"
type="text/javascript">
var zaman = new Date()
zaman.setFullYear(2008)
document.write ( zaman )
</script>

نتيجه اي که اين اسکريپت برميگرداند بصورت زير است، به روز هفته در اول خط و سال در آخر خط توجه کنيد که براي سال 2008 تنظيم شده است.


عملگرها در جاوااسکريپت

عملگر چيست؟

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

انواع عملگرها

عملگرها در جاوااسکريپت به چند دسته تقسيم مي شوند:

عملگرهاي رياضي يا Arithmetic Operators: اين نوع عملگرها چهار عمل اصلي در رياضي را انجام مي دهند. علاوه بر آنها يک عملگر وظيفه نمايش خارج قسمت يک تقسيم را بعهده دارد و دو عملگر ديگر هر کدام به ترتيب يک واحد اضافه و يک واحد کم مي کنند که در جدول زير مشخص شده اند.

نتيجه | مثال | توصيف | عملگر
4 | x = 2, y = 2 x+y | جمع | +
2 | x = 5 , y = 3 x - y | تفريق | -
20 | x = 5 , y = 4 x * y | ضرب | *
5 | x = 20 , y = 4 x / y | تقسيم | /
3 | x = 19 , y = 4 x % y | خارج قسمت | %
x = 6 | x = 5 x++ | افزودن | ++
x = 4 | x = 5 x-- | کم کردن | --

عملگرهاي زير به نام Assignment Operators معروف هستند که يک مقداري را به يک متغير نسبت مي دهند.

برابر است با | مثال | عملگرها
x = y | x = y | =
x = x + y | x + = y | + =
x = x - y | x - = y | - =
x = x * y | x * = y | * =
x = x / y | x /= y | /=
x = x % y | x %= y | %=

عملگرهاي مقايسه اي: اين نوع عملگرها مقدارهاي دو متغير را با هم مقايسه مي کنند و نتيجه اين مقايسه يا درست است يا غلط که در دستورات شرطي جاوااسکريپت بسيار کاربرد دارند.

مثال | توصيف | عملگرها
x = 5 , y = 5 x == y | مقادير اگر برابر باشند نتيجه درست خواهد بود. | ==
x = 5 y = "5" x === y | مقايسه بين مقادير و جنس متغير که در مثال روبرو نتيجه غلط بازگردانده مي شود | ===
5 != 8 | اگر مقادير برابر نباشند نتيجه درست است | !=
8 > 5 | بزرگتر | >
8 < 10 | کوچکتر | <
5 >= 8 | بزرگتر يا مساوي که در اين مثال نتيجه غلط است | >=
5 <= 8 | کوچکتر يا مساوي که در اين مثال نتيجه درست است | <=

عملگرهاي منطقي: در اين مدل سه نوع عملگر وجود دارند که در حقيقت يک يا چند نتيجه را بررسي مي کنند و جواب را بازمي گردانند. اين عملگرها به اين شکل مي باشند:

&& , || , !

عملگر && در حقيقت مانند حرف اضافه " و " در فارسي عمل مي کند:

x = 5
y = 3
( x < 10 && y > 1)

در اينجا اگر مقدار متغير x کوچکتر از عدد 10 باشه و y بزرگتر از 1 باشه، نتيجه true بازگردانده مي شود. چون حرف و آمده است پس بايد دو طرف عملگر جواب درست باشد تا در مجموع نتيجه درست در بيايد.

عملگر || مانند کلمه " يا " در فارسي است:

x = 6
y = 3
( x == 5 || y == 5 )

همانطور که حدس زده ايد، نتيجه غلط است يعني false بازگردانده مي شود. چون يا آمده است پس حداقل يکي از طرفين عملگر بايد درست باشد تا نتيجه درست در بيايد اما اينجا هر دو طرف غلط است که در مجموع نتيجه غلط است. اما در حالت زير نتيجه درست بازگردانده مي شود:

( x == 5 || y < 5 )

عملگر ! در حقيقت يک عمليات و معادله را بررسي مي کند اگر جواب آن معادله درست نباشد نتيجه true يا همان درست را برميگرداند:

x = 5
y = 4
! ( x == y )

در اينجا در کل نتيجه درست است. حالا ببينيم که چه اتفاقي افتاده است، اول يک نگاهي به داخل پرانتز بياندازيد. شرط درستي در اين است که x برابر با y باشد، اما اينچنين نيست چون مقادير با هم متفاوت هستند ولي چون عملگر ! آمده است پس شرط درستي در اينست که نتيجه داخل پرانتز غلط باشد چون گاهي اوقات ما نياز داريم که در اسکريپت دو چيز را با هم مقايسه کنيم و اگر نتيجه غلط بود ادامه دهيم که اين علامت بکار ما مي آيد.

کاربرد عملگرها در متن

در بالا تمام مثالها براي اعداد بود ولي گاهي اوقات از بعضي از عملگرها مي توانيم براي رشته هاي متني هم استفاده کنيم:

strText01 = " Hello "
strText02 = "my friends!"
document.write ( strText01 + strText02 )

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


if...else دستورات شرطی

دستورات شرطی

يکي از مهمترين قابليت هاي زبان جاوااسکريپت، توانايي آن در انجام دادن عکس العملهاي متفاوت در شرايط مختلف است. بر اين اساس اين زبان قادر است که متغيرهاي مختلف را با هم مقايسه کند و شرطهايي را براي آنها تعيين کند تا به يک نتيجه دلخواه برسد.

دستور if

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

<script language="javascript" type="text/javascript">

var d = new Date()
var t = d.getHours()

if ( t < 10 )
{
document.write ( "<b> Good morning </b>")
}

</script>

حالا ببينيم که چه اتفاقي افتاده است، در خط سوم ما يک متغير بنام d تعريف کرديم که به آن شئ Date را نسبت داديم و در خط بعد از آن يک متغير ديگر که يکي از متدهاي آن شئ را مقدار دهي کرديم تا ساعت سيستم براي ما ذخيره شود، سپس با يک خط خالي قسمت شرط را جدا کرديم تا به خوانايي اسکريپت کمک کنيم. کلمه if را مي نويسيم، دقت کنيد که شرط را حتماً داخل پرانتز بايد نوشت و در آن هم همانطور که مشاهده مي کنيد از عملگر کوچکتر استفاده کرديم. در اينجا ساعت سيستم در متغير t ذخيره شده است و دستور if داره شرط کوچکتر بودن را بررسي مي کند. در خط بعدي هم علامت آکلاد { } را بکار برديم که در اينجا آنرا براي نظم و خوانايي بيشتر کد استفاده کرديم اما فراموش نکنيد که اين دستور ممکن است از چندين قسمت تشکيل شود که در آنصورت بکار بردن آکلاد واجب است تا بتوانيم هر قسمت را از هم جدا کنيم. در آخر هم دستور تايپ يک متن مناسب در صفحه را به عنوان نتيجه شرط نوشتيم.

دستور if...else

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

if ( t < 10 || t == 10 ) {
document.write ( "<b> Good morning </b>" )
}
else
{
document.write ( "<b> Hello friends </b>")
}

دستور if...else if...else

اين دستور را زماني مي توانيد استفاده کنيد که بخواهيد يک شرط در شرايط مختلف بررسي شود تا نتيجه هاي متفاوت هم بدست بيايد:

if ( t <= 10 ) {
document.write ( "<b> Good morning </b>" )
}
else if ( t > 10 && t < 13 ) {
document.write ( "<b> Hello friends </b>" )
}
else if ( t >= 13 && t < 18 ) {
document.write ( "<b> Good afternoon </b>" )
}
else {
document.write ( "<b> Good evening </b>" )
}

در دستورات شرطي جاوااسکريپت به غير از مجموعه دستورات if يک مورد ديگر هم هست بنام دستور switch که در صفحه بعد به توضيح آن مي پردازيم.


switch دستور

دستور switch يکي ديگر از دستورات شرطي جاوااسکريپت است که چندين شرط را براي متغيرها مقايسه مي کند تا نتايج مختلف بدست بيايد. در حقيقت دستور switch از تکرار if else جلوگيري مي کند. در مواردي که شرطها و نتايج آنها کم هستند مي توانيد از دستور if else استفاده کنيد اما براي شرطهاي زياد بهتر است switch را بکار بريد تا کد شما منظم تر باشد.

تنها مشکلي که اين دستور دارد اينست که از نسخه javascript 1.2 به بعد از آن پشتيباني شده که ممکن است بعضي از مرورگرهاي قديمي با اين دستور مشکل داشته باشند، ولي در ايران مشکلي نيست چون مطمئناً به علت استفاده رايگان از مرورگرها، ديگر کسي را پيدا نخواهيد کرد که مرورگر قديمي داشته باشد.

دستور سوئيچ مانند if داراي قسمتهايي است، که اجازه دهيد يک مثالي را بيان کنم و سپس به توضيح بخشهاي مختلف آن بپردازم.

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

<script language="javascript" type="text/javascript">

var d = new Date ()
var weekday = d.getDay ()

switch ( weekday )
{
case 0 :
document.write ("Sunday")
break
case 1:
document.write ("Monday")
break
case 2:
document.write ("Tuesday")
break
case 3:
document.write ("Wednesday")
break
case 4:
document.write ("Thursday")
break
case 5:
document.write ("Friday")
break
default:
document.write ("Saturday")
}
</script>

خب حالا بپردازيم به توضيح کد تا ببينيم که چه اتفاقي افتاده است. ابتدا توسط شئ Date ، تاريخ و زمان سيستم را در يک متغير بنام d ذخيره کرديم و سپس در خط بعدي توسط متد getDay اين شئ ، عدد روز هفته را از سيستم بدست آورديم و در متغير weekday ذخيره کرديم. دقت کنيد که اين متد عدد برميگرداند نه خود روزهاي هفته را و در نظر داشته باشيد که مفسر جاوااسکريپت روز اول هفته را يکشنبه ميداند و عدد 0 را به آن تعلق ميدهد و روز دوشنبه را عدد يک و به همين ترتيب تا آخرين روز هفته که شنبه باشد عدد 6 را ميدهد.

اکنون نوبت به بررسي شرط رسيده که مي خواهيم از دستور سوئيچ استفاده کنيم. ابتدا خود دستور را مي نويسيم يعني همان کلمه switch و سپس يک پرانتز باز مي کنيم تا متغيري که بايد در شرايط مختلف بررسي شود را در آن بنويسيم. براي نظم اسکريپت يک آکلاد هم باز مي کنيم ولي در آخر اين مجموعه آنرا مي بنديم.

case

همانطور که مشاهده مي کنيد از کلمه case بجاي if else استفاده مي کنيم و حالت مختلف شرط را در جلوي آن مي نويسيم و سپس علامت : مي گذاريم. در حقيقت ما اينجا به مفسرجاوااسکريپت مي گوييم که اگر متغير ما که روزهاي هفته است برابر با صفر بود، نتيجه اين مي شود که بايد کلمه Sunday را در صفحه چاپ کني، در غير اينصورت برو حالت بعدي يعني case بعدي را مقايسه کن.

break

دستور break يکي از بخشهاي switch است که به مفسر جاوااسکريپت مي فهماند که در کجا قسمت case تمام مي شود و يک قسمت ديگر شروع مي شود، در حقيقت از تداخل قسمتهاي مختلف جلوگيري مي کند. دقت کنيد که شما هم بايد آنرا قبل از شروع case بعدي بنويسيد.

default

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

و در آخر هم آکلاد باز شده را مي بنديم تا پايان اين مجموعه از دستور سوئيچ مشخص شود.

در نظر داشته باشيد که دستورات شرطي بسيار کاربرد دارند و حتي ممکن است در يک اسکريپت چندين بار از اين دستورات استفاده کنيد.


javascript loops --- تکرار دستورات توسط حلقه ها

تکرار دستورات توسط حلقه ها

هر گاه بخواهيد يک مجموعه کد به دفعات مشخص و يا رسيدن به يک نتيجه مشخص تکرار شود، بايد از حلقه استفاده کنيد. حلقه ها در جاوااسکريپت دو نوع هستند، يکي حلقه for و ديگري حلقه while که هر کدام از آنها هم ممکن است بسته به موقعيت کد مدلهاي مختلفي داشته باشند که در ادامه با کار آنها آشنا خواهيد شد.

حلقه for

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

<script language="javascript"
type="text/javascript">

for ( i = 0; i <= 10; i++ )
{
document.write ( " Number " + i + "<br />")
}
</script>

خب براي اجراي اين مثال ابتدا کلمه for را نوشتيم تا شروع حلقه را به مفسر اعلام کنيم سپس يک پرانتز بايد باز کنيم تا پارامترهاي لازم براي تکرار در اين حلقه را وارد کنيم. اولين پارامتري که بايد وارد شود، يک متغير است با مقداردهي اوليه که به آن initial expression يا همان عبارت آغازين مي گويند. سپس دومين پارامتر که يک شرط است و مفهوم آن اينست که حلقه بايد ادامه پيدا کند تا متغير کوچکتر يا برابر با عدد 10 بشود. سومين پارامتر به عبارت افزاينده يا increment expression معروف است که در اينجا به اين مفهوم مي باشد که در هر بار اجراي حلقه يک واحد بايد به متغير افزوده شود. در انتهاي اعلام پارامترها پرانتز را مي بنديم. فقط دقت کنيد که در اين پرانتز هر پارامتري که نوشته شود بلافاصله بعد از آن بايد علامت ; قرار گيرد تا تداخلي بين آنها بوجود نيايد.

بطور ساده پارامترهاي داخل پرانتز را مي توانيم اينچنين بيان کنيم: مقدار اوليه متغير سپس مقدار نهايي و در آخر هم ترتيب افزايش متغير در هر تکرار حلقه. ناگفته نماند که حتماً نبايد مقدار افزايشي باشد، مي تواند به ترتيب کم شود که همه مقادير برعکس خواهند شد.

در خط بعد هم نتيجه را مابين آکلاد مي گذاريم تا به اسکريپت نظم دهيم و سپس دستور تايپ نتيجه که کلمه number را چون مي خواهيم عيناً در صفحه چاپ شود داخل " " گذاشتيم و بعد + که با پارامترهاي ديگه ترکيب بشود. البته در اينجا بجاي علامت بعلاوه مي توانيد کاما هم بگذاريد و بعد از آن متغير تعريف شده و در انتهاي آنها از تگ br استفاده کرديم تا هربار که حلقه تکرار مي شود نتيجه در يک خط جديد چاپ شود.

حلقه while

نوع ديگر حلقه ها، حلقه while مي باشد که بر خلاف حلقه for لزومي ندارد که متغيرها را در داخل پرانتز به عنوان پارامتر حلقه اعلام کنيم و همچنين در مواردي هم که مقدار انتهايي حلقه مشخص نيست مي توانيم از اين نوع استفاده کنيم چون کد مورد نظر تا جايي که نتيجه دلخواه بدست بيايد تکرار خواهد شد. البته اين نوع حلقه را مي توانيم بجاي حلقه for هم بکار بريم يعني اگر مقدار نهايي متغير هم داشته باشيم اين حلقه کاربرد خواهد داشت. مثال بالا را در مورد اين حلقه مي توانيم به اين صورت ذکر کنيم:

var i = 0
while (i <= 10)
{
document.write(" Number " + i + "<br />")
i++
}

کلمه while را مي توانيم ترجمه کنيم به ماداميکه ، پس در اينجا ما متغير را جداگانه تعريف کرديم و حالا مي گوييم، ماداميکه شرط کوچکتر يا مساوي 10 بودن برقرار نيست حلقه را تکرار کن و يک واحد به آن اضافه کن تا بالاخره شرط ما درست دربيايد.

حلقه Do...while

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

var i=0
do
{
document.write(" Number " + i + "<br />")
i=i+1
}
while (i <= 10)

در اينجا همه چي مانند مثالهاي بالا است با اين تفاوت که کلمه do به ابتداي حلقه اضافه شده و بررسي شرط هم به انتهاي حلقه منتقل شده. همانطور که ميدانيد يکي از معني هاي do انجام دادن کاري است. مفهوم اين کد هم بدين گونه است که دستور چاپ را انجام بده و يک واحد به متغير اضافه کن ماداميکه متغير کوچکتر يا مساوي با عدد 10 بشود. پس اين دستورات حداقل يکبار اجرا مي شوند تا به شرط برسند، شما مي توانيد براي رسيدن به صحت اين گفته مقدار متغير را بجاي صفر به يک عدد ديگر تغيير دهيد مثلاً عدد 20 را بدهيد و يکبار کد را اجرا کنيد.

در اين مثال نوع ديگر افزايش هم نشان داده شده است که شما مي توانيد از اين مدل هم استفاده کنيد.

break

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

براي جلوگيري از همچين اتفاقي مي توانيد از دستور break استفاده کنيد و يک شرطي هم براي آن در نظر بگيريد تا از حلقه هاي بي نهايت جلوگيري شود.

var i = 11
while (i >= 10)
{
document.write(" Number " + i + "<br />")
i++
if ( i == 21 ) break
}

در اين حلقه هيچگاه شرط درست نخواهد بود و تا بي نهايت ادامه پيدا مي کند اما با استفاده از دستور break و شرطي که در نظر گرفتيم از تکرار نا محدود اين حلقه جلوگيري کرديم در حقيقت از حلقه خارج شديم. پس استفاده از اين دستور را براي حلقه هاي پيچيده در نظر داشته باشيد تا با مشکلات جدي مواجه نشويد.


javascript Array --- آرایه

آرايه

آرايه چيست؟

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

var weekdays = new Array(7)
weekdays[0] = "Shanbeh"
weekdays[1] = "Yekshanbeh"
weekdays[2] = "Doshanbeh"
weekdays[3] = "Seshanbeh"
weekdays[4] = "Chaharshanbeh"
weekdays[5] = "Panjshanbeh"
weekdays[6] = "Jomeh"

اول از همه يک متغير بنام weekdays تعريف کرديم و آنرا برابر با آرايه جديد قرار داديم، دستور آرايه را بايد با new Array شروع کنيد که به طرز نوشتن حروف بايد توجه کنيد، سپس پرانتزي باز کرده و تعداد مقادير را در آن مي نويسيم. به اين عدد داخل پرانتز index يا انديس مي گويند. انديس ها از صفر شروع مي شوند.

در خطوط بعد، نوبت به مقداردهي هر انديس مي رسد که متغير را مي نويسيم و هر انديس را بايد در کروشه [ ] بگذاريم و سپس آنها را برابر با يک مقدار قرار دهيم که اين مقادير هر چيزي مي توانند باشند مانند رشته هاي متني و يا اعداد.

مثال بالا را مي توان بصورت زير هم نوشت:

var weekdays = new Array ("Shanbeh","Yekshanbeh",...)

يعني بجاي نوشتن انديس کلي در پرانتز، مقادير هر انديس را بنويسيم و توسط کاما آنها را از هم جدا کنيم.

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

for ( i=0; i<7; i++ ) {
document.write ( weekdays[ i ] + "<br />" )
}

خصوصيت آرايه

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

خصوصيتي که بيشترين کاربرد را براي آرايه دارد، length مي باشد. وظيفه اين خصوصيت نمايش انديس کلي يک آرايه است. اگر بخواهيم در مثال بالا اين خصوصيت را بکار بريم، بايد خط زير را بعد يا قبل از حلقه for بکار بريم:

document.write ( weekdays.length + "<br />" )

بعد از وارد کردن اين کد و اجراي اسکريپت، عدد هفت در صفحه نوشته خواهد شد چون انديس ما در اينجا هفت بود.

متدهاي آرايه

آرايه داراي متدهايي هم هست که نحوه تعريف کردن آنها همانند خصوصيت است و تنها فرقي که دارد بعد از نوشتن متد بايد پرانتز هم بگذاريد. متدهاي آرايه عبارتند از:

concat(), join(), pop(), shift(), push(), unshift(), reverse(), slice(), sort(), splice(), toString(), valueOf()

متد concat براي ترکيب مقادير دو يا سه آرايه بکار مي رود. اين متد هيچ چيزي را در آرايه ها تغيير نمي دهد و فقط مقادير تعريف شده را در صفحه چاپ مي کند.

متد join تقريباً مانند متد قبلي عمل مي کند و کليه مقادير را بصورت يک رشته متني در صفحه نشان مي دهد با اين تفاوت که در اين متد مي توانيد يک علامت مانند نقطه، تعيين کنيد تا بين مقادير چاپ شده در صفحه قرار گيرد. بصورت پيش فرض اين علامت، کاما مي باشد.

متد pop آخرين مقدار آرايه را جدا کرده و در صفحه نمايش مي دهد. دقت کنيد که اين متد در خصوصيت length تأثير مي گذارد يعني اگر بعد از اين متد خصوصيت length را بکار بريد، يک انديس کمتر نشان مي دهد.

متد shift برعکس متد قبلي است يعني اين متد اولين مقدار آرايه را جدا مي کند و نشان مي دهد.

متد push يک يا چند مقدار را به آخر يک آرايه اضافه مي کند و انديس جديد برمي گرداند.

متد unshift يک يا چند مقدار به ابتداي يک آرايه اضافه مي کند و انديس جديد بر مي گرداند. دقت کنيد که اين متد در مرورگر اينترنت اکسپلورر بدرستي کار نمي کند.

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

متد slice يکسري از مقادير موجود در يک آرايه را جدا مي کند که در اين متد شماره انديس مقداري که مي خواهيد از آنجا جداسازي شروع شود را بايد بنويسيد و همچنين مي توانيد آخرين مقدار هم مشخص کنيد که اگر آنرا معين نکنيد تا آخرين مقدار انتخاب خواهد شد.

متد sort براي منظم کردن مقادير يک آرايه به ترتيب حروف الفباي انگليسي است. اگر هم مقادير يک آرايه، عدد باشند به ترتيب اعداد تنظيم خواهند شد که مفسر جاوااسکريپت به اولين عدد از سمت چپ نگاه مي کند و بعد از رديف کردن آنها سپس به اعداد بعدي نگاه مي کند.

متد splice براي اضافه يا حذف يک مقدار در آرايه مي باشد که اين متد داراي پارامترهايي مي باشد که اين پارامترها را بايد در پرانتز مشخص کنيد. اولين پارامتر شماره انديس که در آنجا يک مقدار حذف يا اضافه خواهد شد و بايد عدد باشد. دومين پارامتر مقدار عددي است که معين مي کند چند تا مقدار از آن انديسي که در پارامتر قبل انتخاب کرديم، بايد حذف شود که اگر آنرا صفر در نظر بگيريد هيچ مقداري حذف نخواهد شد. اين دو پارامتر حتماً بايد نوشته شوند. در ضمن اگر مي خواهيد مقاديري هم اضافه شود بعد از اين پارامتر ها به عنوان پارامترهاي بعدي ذکر مي کنيد.

متد toString مقادير يک آرايه را تبديل به يک رشته متني مي کند.

اينها متدهايي هستند که کاربردشان در آرايه ها متداول است. شايد بنظرتان غير مفيد بيايند اما در بعضي جاها مي توانند به کمک شما بيايند و اسکريپت شما را خلاصه تر کنند.


javascript functions --- توابع

توابع

تابع چیست؟

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

توابع يا همان functions در جاوااسکريپت مي توانند کمک بزرگي به اين سازمان دهي کنند. شما مي توانيد يک مجموعه کد را که بايد در جاهاي مختلف تکرار شود را به صورت يک تابع تعريف کنيد و در هر جاي اسکريپت به آن نياز داشتيد آنرا فراخواني کنيد و از نوشتن مجدد بپرهيزيد. پس يک تابع، مجموعه کدي است که مي توان آنرا در جاهاي مختلف اسکريپت استفاده کرد بدون آنکه نياز به نوشتن مجدد آن کدها باشد. يک تابع مي تواند هر دستوري از جاوااسکريپت و يا حتي يک خط کد ساده باشد:

function message ( )
{
alert ( " Hello friends! " )
}

همانطور که مشاهده مي کنيد براي تعريف يک تابع از کلمه function استفاده مي شود و دقت کنيد که حروف آن بايد حتماً کوچک باشد. بعد از نوشتن دستور function نوبت به تعيين يک اسم واحد براي اين تابع است که بهتر است اين اسم متناسب با وظيفه اي که اين مجموعه قرار است انجام دهد باشد چون بخاطر آوردن آن هم راحتتر خواهد بود. سپس پرانتز مي گذاريم تا در صورت لزوم پارامترهايي را در آن مشخص کنيم که به اين پارامترها آرگومان و يا argument مي گويند. طبق معمول هم با گذاشتن علامت آکلاد مشخص مي کنيم که اين مجموعه در کجا شروع و در کجا ختم مي شود که در بين اين علامت هم کدهاي جاوااسکريپت را وارد مي کنيم. در اينجا يک دستوري نوشته شده که هنگام فراخواني اين تابع و اجراي کد، يک پنجره باز مي کند و عبارت متني داخل پرانتز را نمايش مي دهد که در بخشهاي بعدي در مورد اينگونه پيغامها و پنجره ها بيشتر توضيح خواهم داد.

شما يک تابع را در هر کجاي يک سند html مي توانيد بکار بريد. اگر دستوراتي است که هنگام باز شدن صفحه وب بايد اجرا شوند و يا آماده اجرا باشند پس بهتر است در قسمت head نوشته شوند. حتي مي توانيد يک تابع را در فايل خارجي جاوااسکريپت که با پسوند js ذخيره مي شود وارد کنيد تا در صفحات مختلف آنرا بکار بريد.

فراخواني يک تابع

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

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

<html>
<head>
<title> Call function </title>

<script type="text/javascript" type="text/javascript">
function message ( )
{
alert ( " Hello friends! " )
}
</script>

</head>
<body>

<form>
<input type="button" onclick="message( )" value="Click me">
</form>

</body>
</html>

نگران دستور alert و onclick نباشيد چون در بخشهاي بعدي با آنها آشنا خواهيد شد. فقط به فراخواني تابع دقت کنيد که چگونه بکار برده مي شود.

آرگومان يک تابع

گاهي اوقات هنگام تعريف يک تابع، آرگومان و يا پارامتري را براي آن داخل پرانتز تعيين مي کنيد تا هنگام صدا زدن تابع آن آرگومان مقداردهي شود. در کل مي توان گفت که يک آرگومان، متغيري است که هنگام صدا زدن تابع مقدار آن ارسال مي شود تا تابع از آن استفاده کند. مي توانيم مثال بالا را با يک آرگومان تعريف کنيم:

function message ( msg )
{
alert ( msg )
}
</script>

<input type="button" onclick="message( 'Hello friends!' )" value="Click me">

در اينجا يک آرگومان بنام msg تعيين کرديم تا هنگام فراخواني تابع، مقدارش به تابع فرستاده شود و نتيجه آن اجرا شود. در حقيقت عبارت Hello friends مقدار اين آرگومان مي باشد. تعيين آرگومان هيچ محدوديتي ندارد و فقط بايد آنها را با علامت کاما از هم جدا کنيد.

دقت کنيد که در دستورات جاوااسکريپت، بين دو علامت " " بايد از ' ' استفاده شود چون اگر مجدداً از خود علامت نقل قول يعني " " استفاده کنيد با پيغام خطا مواجه مي شويد.

بازگرداندن یک مقدار توسط دستور return

توابع جاوااسکريپت داراي يک دستوري بنام return هستند که وظيفه اين دستور برگرداندن مقادير تعريف شده در آن تابع است.

function greeting ( ) {
return ( " Hello world! " )
}
.......

document.write ( greeting( ) )

اين مجموعه کد را اگر بدون استفاده از return اجرا کنيد، نتيجه درست نخواهيد گرفت. به يک مثال ديگر توجه کنيد:

<html>
<head>
<title> return statement </title>

<script type="text/javascript" type="text/javascript">
function total (a,b )
{
x = a * b
return x
}
</script>

</head>
<body>
<script type="text/javascript" type="text/javascript">
price = total ( 4, 15 )
document.write ( price )
</script>
</body>
</html>

همانطور که مشاهده مي کنيد دو آرگومان براي تابع total تعريف شده است که در متغير x ذخيره مي شوند و توسط دستور return مقدارشان به تابع ارسال خواهد شد.

در نظر داشته باشيد که توابع در جاوااسکريپت بسيار کاربرد دارند و شما هنگام نوشتن اسکريپت خود پي به اهميت آنها خواهيد برد مخصوصاً زماني که يک سري کد را بخواهيد در کليه صفحات يک وب سايت بکار بريد که مي توانيد آنها را بصورت يک تابع در يک فايل خارجي جاوااسکريپت ذخيره کنيد و سپس در هر صفحه آن تابع را فراخواني کنيد.


popup boxes --- پنجره های ارتباط با کاربر

پنجره های ارتباط با کاربر

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

اين پنجره ها عبارتند از: پنجره alert ، پنجره confirm و پنجره prompt .

پنجره Alert

پنجره alert ، حاوي يک اخطاريه براي کاربر است که در آن هشداري داده مي شود تا کاربر متوجه کاري که مي کند باشد. دستور اين پنجره به صورت زير است:

alert (" text ")

اين پنجره فقط داراي يک دکمه OK است که کاربر بعد از خواندن آن اخطاريه با زدن دکمه ok ، پنجره را مي بندد.

<html>
<head>
<script type="text/javascript" type="text/javascript">
function alertbox ( ) {
alert ( " This is an Alert box! " )
}
</script>
</head>

<body>
<form>
<input type="button" onclick="alertbox ( )" value="Click here">
</form>
</body>

</html>

دقت کنيد که در اين نوع پنجره يک علامت مثلث زرد که نشان دهنده علامت اخطار هم هست، ظاهر مي شود.

پنجره Confirm

اين مدل پنجره ، همانطور که از اسمش پيداست براي گرفتن تأييد از کاربر اجرا مي شود. اين پنجره داراي دو دکمه OK و Cancel مي باشد که با زدن دکمه OK توسط کاربر مقدار true بازگردانده مي شود و با زدن Cancel مقدار false برگردانده مي شود. دستور اين پنجره به اين صورت است:

confirm ( " text " )

اين پنجره براي مواقعي خوب است که شما نياز به جواب کاربر براي ادامه مطلبي يا چيزي داريد، در صورتيکه کاربر تأييد کند آن مطلب ادامه پيدا مي کند و در غير اينصورت همانجا متوقف خواهد شد.

<html>
<head>
<script type="text/javascript" type="javascript">
function confirmbox ( )
{
var button = confirm (" press a button.")
if (button == true)
{
document.write (" You pressed OK button. ")
}
else
{
document.write (" You pressed Cancel button.")
}
}
</script>
</head>

<body onload="confirmbox()">

</body>

</html>

در اين اسکريپت ما ابتدا يک تابع در قسمت head تعريف کرديم سپس دستور confirm را در يک متغير بنام button ذخيره کرديم تا بتوانيم براي اين متغير شرطي را تعيين کنيم. همانطور که گفتيم اگر کاربر دکمه OK را بزند، مقدار true برگردانده مي شود پس شرط را بر اين روال گرفتيم که اگر مقدار true بازگردانده شد متني در صفحه چاپ شود و در غير اينصورت متني ديگر نوشته شود. سپس اين تابع را در تگ بدنه و در رويداد onload قرار داديم تا به محض باز شدن صفحه پنجره confirm اجرا شود. رويداد onload را در بخش بعدي ياد خواهيد گرفت.

پنجره prompt

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

prompt ( "text or question", " default value " )

در قسمت اول يک متن که معمولاً سؤال است را وارد مي کنيد تا در پنجره ظاهر شود و در قسمت دوم يک مقدار پيش فرض براي راهنمايي کاربر وارد مي کنيد که معمولاً آن قسمت را خالي مي گذارند تا کاربر آن مقدار را وارد نمايد. البته اگر هم شما مقدار پيش فرض را وارد نماييد، باز کاربر قادر به وارد کردن مقدار ميباشد.

<html>
<head>
<script type="text/javascript">
function promptbox ( )
{
var name=prompt("Please enter your name", "name...")
if (name!=null && name!="")
{
document.write("Hello " + name + " and welcome to this
      page.")
}
}
</script>
</head>

<body onload="promptbox()">

</body>
</html>

مانند مثال قبل عمل کرديم با اين تفاوت که اين بار از دستور prompt استفاده شده است. فقط به يک نکته دقت کنيد که در دستور شرط ما متغير name را نا مساوي با مقدار null قرار داديم. null به معني هيچ چيز ميباشد و در اينجا آنرا بکار گرفتيم تا اگر کاربر بعد از باز شدن پنجره دکمه cancel را زد و يا هيچ اسمي وارد نکرد تغييري در صفحه ايجاد نشود. شما مي توانيد يکبار آنرا حذف کنيد و نتيجه اجراي کد را ببينيد.

در حال حاضر شما سه نوع پنجره ارتباط با کاربر را فرا گرفتيد که دو مدل اول بيشترين کاربرد را در کدنويسي شما خواهند داشت.


Javascript Events --- رويدادها و حوادث

رويدادها و حوادث

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

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

در کل رويدادها باعث مي شوند تا جاوااسکريپت اينگونه حرکات را شناسايي و درک کند.

رويدادها مانند بقيه خصوصيات تگهاي اچ تي ام ال هستند که بايد در ميان تگها قرار گيرند و آنها را برابر با يک کد کوتاه جاوااسکريپت و يا اسم يک تابع تعريف شده بايد قرار داد.

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

رويدادهاي موس

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

onClick براي کليک کردن دکمه چپ موس توسط کاربر.

onDblClick رويداد براي دوبار کليک دکمه چپ موس.

onMouseDown فشار آوردن بر روي دکمه چپ موس.

onMouseUp رها کردن دکمه موس پس از فشردن آن.

onMouseOver قرار گرفتن نشانگر موس بر روي يک چيزي.

onMouseOut خارج شدن موس از روي يک چيزي.

رويدادهاي کيبورد

در اين رويدادها، جاوااسکريپت نسبت به فشردن يک کليد بر روي کيبورد توسط کاربر، عکس العمل نشان خواهد داد.

onKeyPress فشردن يک کليد کيبورد.

onKeyDown مانند رويداد بالا براي فشردن يک کليد.

onKeyUp رها کردن يک کليد فشرده شده.

رويدادهاي فرم

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

onFocus هنگاميکه توسط موس و يا دکمه Tab کيبورد بر روي يکي از اجزاي فرم متمرکز شويد.

onBlur هنگاميکه تمرکز از روي يکي از اجزاي فرم خارج شود.

onSelect انتخاب کردن يک متن در صفحه يا در يک فرم.

onChange تغيير در اجزاي فرم، مانند تغيير متن در کادر متني.

onSubmit فشردن دکمه تأييد يک فرم.

onReset فشردن دکمه reset يا همان پاک کردن اطلاعات فرم.

رويدادهاي يک صفحه

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

onLoad تکميل شدن يک صفحه وب يا يک تصوير در مرورگر.

onUnload بستن مرورگر يا خروج از يک صفحه وب.

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

يک رويداد ديگر هست که مي توان هم براي يک صفحه و هم براي يک عکس بکار برد:

onError اين رويداد زماني اجرا مي شود که يک عکس به هر دليلي لود نشود يعني در جاي خود قرار نگيرد.

معمولاً براي رويدادها، ابتدا يک تابع تعريف مي شود تا هنگام نوشتن رويداد در يک تگ اچ تي ام ال، نظم برقرار باشد و از شلوغي تگ جلوگيري شود. بيشترين کاربرد اين رويدادها در تأييد اعتبار فرمها و پرسشنامه ها مي باشند که در يک بخش مجزا آنرا توضيح خواهم داد.


Javascript Objects --- شئ ها در جاوااسکریپت

شئ ها در جاوااسکريپت
Javascript Objects

در بخشهاي قبل با بعضي از object ها يا همان شئ هاي جاوااسکريپت مانند، شئ Date و آرايه ها آشنا شديد. در اين صفحه قصد داريم در مورد شئ هاي ديگر در جاوااسکريپت صحبت کنيم.

شئ جاوااسکريپت چيست؟

وظيفه شئ ها را مي توان شبيه به متغير ها دانست اما شئ ها بسيار کامل تر از متغيرها هستند چون آنها مي توانند اطلاعات بيشتري را در خود ذخيره کنند و همچنين تفاوت ديگري هم که با متغيرها دارند اينست که متغيرها بايد تعريف شوند تا جاوااسکريپت آنها را بشناسد اما بعضي از شئ ها در جاوااسکريپت ساخته و تعريف شده اند. اين شئ هاي از قبل تعريف شده را درون ساخت يا Built-in مي گويند مانند شئ Date . البته همانطور که ميدانيد بايد همين اشياء هم در ابتداي کد يکبار ديگر با دستور new تعريف شوند:

mydate = new Date ( )
name = new Array ( )

پس فراموش نکنيد که از اين دستور براي شروع يک object استفاده کنيد.

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

انواع اشياء

به غير از شئ هاي درون ساخت Date و Array که در صفحات قبل با آنها آشنا شديد، شئ هاي درون ساخت ديگر جاوااسکريپت عبارتند از شئ String و Math و شئ هايي که مربوط به HTML DOM مي شوند. در بخش هاي بعدي به ترتيب به توضيح هر کدام از اين اشياء خواهيم پرداخت.

دستور with

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

with ( name ) {
.... javascript code ....
}

روش ساخت يک شئ

در بالا صحبت از يک سري اشياء شد که جاوااسکريپت از قبل با آنها آشناست اما گاهي اوقات نياز هست که يک شئ را خودتان تعريف کنيد تا بهتر بتوانيد اسکريپت خود را مديريت کنيد. البته توسط دستور with هم مي توانيد اينکار را انجام دهيد، به اين صورت که اسم شئ مورد نظر را بجاي name در الگوي بالا بنويسيد و خصوصيت و متد آنرا در خطوط بعدي بين { } تعريف کنيد.

اما اگر بخواهيد يک شئ را در اسکريپت خود بسازيد نياز به دو چيز داريد، ابتدا يک تابع سازنده که به آن Constructor مي گويند و در آن نوع شئ تعيين مي شود، سپس به نمونه شئ که از آن تابع استفاده مي کند و به آن Instance مي گويند که توسط دستور new تعريف مي شود. اين مطلب ممکن است کمي گيج کننده باشد اما به مثال زير توجه کنيد تا کاملاً به ساخت شئ توسط خودتان تسلط پيدا کنيد.

مي خواهيم يک شئ براي اتومبيل تعريف کنيم که خصوصياتي مانند اسم، رنگ و مدل را داشته باشد. براي اينکار ابتدا يک تابع بايد تعريف کنيم بنام car و خصوصيات آنرا به عنوان پارامترهايش در پرانتز بنويسيم و سپس اين پارامترها را بر اساس خصوصياتش مقداردهي مي کنيم:

function Car ( name, model, color ) {
this.name = name
this.model = model
this.color = color
}

به عبارت this دقت کنيد، اين يک دستور جاوااسکريپت است و به شئ که در حال تعريف آن هستيم، اشاره دارد و در حقيقت به مفسر جاوااسکريپت مي فهماند که اين خصوصيت شئ تعريف شده با اين مقدار است و شما بايد از اين دستور استفاده کنيد تا خصوصيت يک شئ را برايش تعريف کنيد و مقدار آنها را هم مانند بالا مشخص کنيد.

حالا بايد يک شئ جديد براي آن بسازيد که اين شئ جديد را در متغيري بنام mycar ذخيره مي کنيم:

mycar = new Car ( "Corvette", "Z06", "Red" )

اين خط کد به جاوااسکريپت مي فهماند که يک شئ بنام mycar داراي خصوصيات اسم که Corvette و مدل Z06 و رنگ Red مي باشد. شما مي توانيد هر شئ ديگر که بخواهيد با دستور new بسازيد:

thecar = new Car ( "BMW", "Z4", "Silver" )

الان مي خواهيم از شئ اول اسم ماشين و از شئ دوم رنگ را در صفحه چاپ کنيم:

document.write ( mycar.name + "<br />" )
document.write ( thecar.color )

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

object.methodname( ) = function_name

object شئ است که ساختيم، methodname نام متدي است که شما در نظر مي گيريد و function name هم اسم تابعي که بايد بسازيد. سپس هر کجا که لازم بود از متد استفاده کنيد ابتدا شئ و سپس با گذاشتن يک نقطه متد را به همراه پرانتز مي نويسيد که اگر اين متد پارامتري هم داشت بايد آنرا داخل پرانتز معين کنيد.

متدي که مي خواهيم براي شئ Car بسازيم را بايد ابتدا بصورت يک تابع تعريف کنيم:

function displaycar ( ) {
var result = " I like " + this.name + " " + this.model + " with " + this.color + " color."
document.write ( result )
}

حالا با استفاده از دستور this اين تابع را به عنوان متد شئ Car تعريف مي کنيم:

function Car ( name, model, color ) {
this.name = name
this.model = model
this.color = color
this.displaycar = displaycar
}

بعد از تعريف توابع، شئ را توسط دستور new مي سازيم و متد را اجرا مي کنيم:

mycar = new Car ( "Corvette", "Z06", "Red" )
mycar.displaycar ( )

دستور prototype

در طول اسکريپت شما، ممکن است به جايي برسيد که نياز داشته باشيد يک خصوصيت و يا يک متد ديگر براي شئ ساخته شده در خارج از آن توابع تعريف شود که با استفاده از دستور prototype مي توانيد آنها را تعريف کنيد. الگوي اين دستور به اين صورت مي باشد:

object.prototype.method or property = value

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

در صفحات بعدي، با شئ هاي درون ساخت string ، math و همچنين شئ هاي مربوط به HTML DOM آشنا خواهيد شد.


String Objects --- شئ رشته

شئ رشته هاي متني
String Object

شئ رشته يا String

شئ String يکي ديگر از شئ هاي درون ساخت جاوااسکريپت ميباشد و براي کار کردن روي متنها استفاده مي شود. رشته هاي متني عبارتند از کليه کاراکترهايي که بتوان توسط کيبورد تايپ کرد و تا زماني که اين کاراکترها بين دو علامت " " قرار بگيرند، جاوااسکريپت آنها را در شئ String ذخيره خواهد کرد.

البته شما مي توانيد يک رشته متني را بصورت خيلي ساده در يک متغير ذخيره کنيد و نيازي هم به اين شئ نداشته باشيد، مانند کد زير:

mytxt = "This is a string."

شئ String داراي خصوصيات و متدهايي است که توسط آنها مي توانيد تسلط بيشتري روي رشته هاي متني داشته باشيد.

مطابق تمام اشياء در جاوااسکريپت، ابتدا بايد اين شئ را توسط دستور new تعريف و در يک متغير ذخيره کنيد:

mytxt = new String ( "This is a string." )

خصوصيت شئ String

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

اگر بخواهيم طول شئ بالا را محاسبه کنيم، بايد بصورت زير عمل کنيم:

document.write ( mytxt.length )

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

متدهاي شئ String

همانطور که ميدانيد براي تعريف يک متد، ابتدا شئ را نوشته سپس يک نقطه مي گذاريم و متد مورد نظر را به همراه پرانتز مي نويسيم که اگر اين متد پارامتري هم داشت بايد آنرا داخل پرانتز بنويسيم. الگوي کلي تعريف متد براي شئ String بصورت زير است:

object.methodname ( )

اکنون مي پردازيم به معرفي متدهاي اين شئ. دقت کنيد بعضي از اين متدها در مرورگر اينترنت اکسپلورر اجرا نمي شوند. فراموش نکنيد که به سورس کد مثالها هم دقت کنيد.

anchor اين متد رشته را بصورت آنکر در صفحه در مي آورد که کد اچ تي ام ال آن به اين صورت خواهد بود:

<a name="anchor_name" />

big متن را بصورت ضخيم و بزرگ ذخيره مي کند.

blink اين متد، متن را بصورت چشمک زن در مي آورد ولي در مرورگر IE اجرا نمي شود.

bold يک رشته را بصورت bold در مي آورد.

charAt توسط اين متد، مي خواهيد که بطور مثال کاراکتر پنجم از يک رشته را اعلام کند. دقت کنيد که اولين کاراکتر در يک رشته شماره صفر است.

charCodeAt شماره موقعيت کاراکتر در يک رشته را ميدهيد و جاوااسکريپت يونيکد آن را برميگرداند. اولين کاراکتر مانند بالا صفر ميباشد.

concat دو يا چند رشته را به هم پيوند ميدهد.

fixed متن چاپ شده در صفحه بصورت حروف تايپي خواهد بود.

fontcolor تغيير رنگ فونتها که اسم رنگ يا کد هگز را به عنوان پارامتر در پرانتز بايد معين کنيد.

fontsize تعيين سايز فونت ها که سايز را بايد در پرانتز بنويسيد.

fromCharCode يونيکد را ميدهيد و جاوااسکريپت کاراکتر برميگرداند.

indexOf اين متد دو پارامتر دارد که الگوي آن به صورت زير است:

StringObject.indexOf ( searchvalue, fromindex )

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

italics کاراکترهاي يک رشته به صورت ايتاليک نوشته مي شوند.

link براي ساختن لينک بکار مي رود.

match مانند متد indexOf عمل مي کند با اين تفاوت که هر کلمه را جستجو کنيد، اگر پيدا کند همان کلمه را برميگرداند و اگر پيدا نکند مقدار null برميگرداند.

replace اين متد کاراکترهايي را جستجو مي کند و به محض پيدا کردن اولين کاراکترهاي همانند، کاراکترهاي ديگري را جايگزين مي کند. اين متد داراي دو پارامتر مي باشد، در پارامتر اول کلمه يا کاراکتري که لازم است پيدا شود را مشخص مي کنيد و سپس در پارامتر دوم جايگزين آنرا تعيين مي کنيد. الگوي اين متد به صورت زير است:

Stringobject.replace( /findString/ , "newString" )

اين متد هم مانند بقيه متدها به حروف بزرگ و کوچک حساس است که اگر مي خواهيد جاوااسکريپت تفاوتي قائل نشود بايد به اين صورت عمل کنيد:

Stringobject.replace( /findString/i , "newString" )

اگر مي خواهيد کلمه يا کاراکتر را در کل رشته پيدا و جايگزين کند، بايد به صورت زير عمل کنيد:

Stringobject.replace( /findString/g , "newString" )

در صورت نياز مي توانيد از مخلوط آن دو استفاده کنيد:

Stringobject.replace( /findString/gi , "newString" )

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

Stringobject.search( /findString/i )

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

Stringobject.slice( start, end )

small اندازه حروف کوچک مي شود.

split تبديل يک رشته به آرايه. يعني بين کلمات يک رشته علامت کاما گذاشته و آنها را مانند آرگومان هاي آرايه مرتب مي کند. داراي دو پارامتر است که در پارامتر اول مدل علامت گذاري معين مي شود. اگر از "" استفاده کنيد بدون فاصله، مابين کليه کاراکترهاي رشته، کاما مي گذارد و اگر از " " با فاصله استفاده کنيد، در آن رشته بدنبال فاصله ها مي گردد و علامت گذاري ميکند يعني بين کلمات کاما مي گذارد. در پارامتر دوم هم که اختياري است مي توانيد تعداد تکرار کاما را تعيين کنيد.

strike بر روي رشته خط مي کشد.

sub رشته مورد نظر را پايين تر از خط نشان ميدهد.

sup رشته مورد نظر را بالاتر از خط نشان ميدهد.

substr تقريباً مانند متد slice عمل ميکند که در پارامتر اول عدد کاراکتر را براي شروع جداسازي معين مي کنيد ولي در پارامتر دوم تعداد انتخاب کاراکتر بعد از نقطه شروع را مشخص ميکنيد که اگر آن را ننويسيد تا انتهاي متن انتخاب خواهد شد و اگر مقادير پارامترها را منفي دهيد نقطه شروع از انتهاي رشته تعيين ميشود.

toLowerCase کليه حروف انگليسي داخل يک رشته را به حروف کوچک انگليسي تبديل مي کند.

toUpperCase کليه حروف تبديل به حروف بزرگ خواهد شد.

خب دوستان با کليه متدهاي يک رشته هم آشنا شديد. بعضي از آنها کاربرد زيادي دارند و بعضي از آنها هم شبيه به يکديگر هستند که براي راحتي کار همه آنها بيان شده است. در صفحه بعد مي پردازيم به يکي ديگر از شئ هاي درون ساخت جاوااسکريپت.


Math Object

شئ Math

شئ Math هم يکي ديگر از اشياي درون ساخت جاوااسکريپت است که شامل يکسري مقادير ثابت و همچنين توابعي براي انجام عمليات رياضي در صفحات وب ميباشد.

براي ساختن اين شئ نيازي به دستور new نيست چون اين شئ براي مفسر جاوااسکريپت، کاملاً شناخته شده است.

اين شئ هم مانند بقيه اشياء داراي خصوصيات و متدهايي است که ابتدا به معرفي چند متد پرکاربرد از اين شئ مي پردازيم و سپس با بقيه آنها آشنا خواهيم شد.

خلق اعداد تصادفي، Random number

شئ Math داراي يک متد مفيد براي خلق اعداد تصادفي بنام random است که الگوي آن بصورت زير ميباشد:

Math.random ( )

در متد بالا، جاوااسکريپت بين عدد يک و صفر، يک عددي را انتخاب مي کند که اين عدد اعشاري است.

هرگاه نياز داشتيد که اين متد بين صفر و يک عدد بزرگتر از يک، عدد تصادفي پيدا کند بايد طبق الگوي زير عمل کنيد:

Math.random ( ) * num

که بجاي num عدد مورد نظر را مي نويسيد.

گرد کردن اعداد اعشاري

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

براي گرد کردن يک عدد اعشاري به عدد صحيح بعد از خود بايد به شکل زير عمل کنيد:

Math.ceil ( num )

براي گرد کردن يک عدد اعشاري به عدد قبل:

Math.floor ( num )

و براي گرد کردن عدد اعشاري به نزديک ترين عدد:

Math.round ( num )

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

دو متد ديگر وجود دارد که مي توانند بين اعداد تعيين شده، بزرگترين و کوچکترين عدد را پيدا کنند:

Math.max ( num, num, ... )
Math.min ( num, num, ... )

خصوصيات شئ Math

اين شئ داراي خصوصيات و ثابتهايي است که براي محاسبات عمليات پيچيده رياضي بکار مي رود:

Math.E اين خصوصيت مقدار ثابت عدد Euler را بر ميگرداند که تقريباً برابر است با 2.7182

Math.PI مقدار ثابت عدد پي که تقريباً برابر است با 3.14

Math.LOG2E لگاريتم عدد Euler بر مبناي دو. تقريباً برابر است با 1.4426

Math.LOG10E لگاريتم E بر مبناي ده. تقريباً برابر است با 0.4342

Math.LN2 لگاريتم دو بر مبناي E. تقريباً برابر است با 0.6931

Math.LN10 لگاريتم ده بر مبناي E. تقريباً برابر است با 2.3025

Math.SQRT2 جذر عدد دو. تقريباً برابر است با 1.4142

Math.SQRT1_2 جذر يک دوم. تقريباً برابر است با 0.7071

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

متدهاي شئ Math

متدهايي هم که در زير ليست شده اند، کاربرد کمتري نسبت به متدهاي ذکر شده در ابتداي اين بخش دارند.

abs قدرمطلق بر ميگرداند.

acos آرک کسينوس نقطه x که يک عدد ميان منفي يک و يک بايد باشد؛ خارج از اين اعداد مقدار NaN بر گردانده مي شود. آرک کسينوس عدد يک برابر با صفر است و منفي يک برابر با عدد پي.

asin آرک سينوس نقطه x که يک عدد ميان منفي يک و يک ؛ خارج از آن مقدار NaN بر گردانده مي شود.

atan آرک تانژانت نقطه x .

atan2 آرک تانژانت زاويه تتا بين دو نقطه x و y .

cos کسينوس يک زاويه را بر ميگرداند.

exp مقدار Ex را بر ميگرداند که E همان عدد ثابت Euler است و x هم يک مقدار عددي.

log لگاريتم يک عدد بر مبناي عدد E .

pow اين متد توان را براي يک عدد محاسبه مي کند و داراي دو پارامتر است که در اولي عدد مشخص مي شود و در پارامتر دوم مقدار عددي توان را تعيين مي کنيد.

sin سينوس يک مقدار عددي را محاسبه مي کند.

sqrt ريشه عدد مربع شده را برمي گرداند.

tan عددي بر مي گرداند که نشان دهنده تانژانت يک زاويه است.


HTML DOM شئ های مربوط به

شئ هاي مربوط به HTML DOM

در بخشهاي قبل با شئ هاي درون ساخت جاوااسکريپت آشنا شديد. در اين صفحه قصد داريم شئ هاي مربوط به HTML DOM را توضيح دهيم. ابتدا اجازه دهيد در مورد DOM يک توضيحي بدهم که اصلاً DOM چي هست؟

تعريف DOM

DOM مخفف سه کلمه Document Object Model مي باشد. در بعضي جاها برگردان فارسي آنرا مدل شئ سند مي گويند. متني که در زير آمده تعريف DOM بر اساس W3C است:

" The Document Object Model is a platform- and language -neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web. "

اما به زبان ساده، DOM رابطه بين عناصر HTML مانند متن ها، عکس ها و غيره را با همان سند اچ تي ام ال بيان مي کند. اين يک فرآيندي است که به برنامه ها و اسکريپت ها اجازه دسترسي به محتوا و ساختار داخلي پنجره مرورگر را ميدهد تا آنها بتوانند بصورت آزادانه تغييراتي ايجاد کنند که نتيجه اين تغييرات در صفحه وب نمايان شود. در همين رابطه زباني بنام DHTML بوجود آمد که با ترکيب کردن عناصر اچ تي ام ال با استايل شيت و اسکريپتها مي تواند محتواي اسناد وب را بصورت متحرک و پويا درآورد. در اينجا پويا بودن فقط به اين منظور نيست که متنها حرکت کنند و از يک طرف وارد بشوند و از طرف ديگر خارج؛ ممکن است لينکها هر بار شما را به يک سايتي پيوند دهند و يا عکس ها مرتب تغيير کنند، کلاً هر تغييري که نياز به کدنويسي مجدد براي آن سند را نداشته باشد، منظور پويا بودن را مي رساند.

سلسله مراتب اشياء DOM

جاوااسکريپت، شئ هايي دارد که مي توانند بطور مستقيم با خود مرورگر ارتباط برقرار کنند و همچنين شئ هايي که با صفحه وب در ارتباط هستند. در کل مي توان اين اشياء را به دو دسته اصلي تقسيم کرد، دسته اول که BOM گفته مي شود يعني Browser Object Model شئ هايي که با پنجره مرورگر مي توانند ارتباط برقرار کنند و دسته دوم DOM که با Document يعني همان سند اچ تي ام ال. تمامي اين اشياء بر اساس يک سلسله مراتبي اين ارتباط را برقرار مي کنند که در رأس آنها شئ window مي باشد. براي ديدن اين سلسله مراتب اينجا را کليک کنيد.

همانطور که در شکل مشاهده کرديد از شئ window تا شئ Document جزو دسته BOM مي باشند و اشياء بعد از Document در دسته DOM قرار مي گيرند. ناگفته نماند که در حال حاضر کمتر صحبت اصطلاح BOM مي شود و کلاً اين مجموعه را DOM مي گويند.

شما بايد اين سلسله مراتب را براي استفاده اشياء آن، رعايت کنيد. اين سلسله مراتب را مي توان به شجره نامه تشبيه کرد و شما مجبور هستيد براي صدا کردن هر شخص آنرا با نام پدرش بياوريد و در بعضي جاها حتي نام پدر بزرگ هم لازم است، بطور مثال: علي فرزند محمد يا علي فرزند محمد فرزند حسين. در اينجا هم پدر اصلي Window مي باشد وپدر بعدي Document است که فرزندهاي آن همان عناصر اچ تي ام ال ميباشند و سپس Form و در آخر هم Select که تنها يک فرزند دارد. براي استفاده از آنها بايد ابتدا اسم پدر و سپس اسم فرزند را نوشت و در آخر هم خصوصيت و يا متد آن فرزند که همه اينها با يک نقطه از هم بايد جدا شوند. بطور مثال اگر ميخواهيد يک فرم را بنام form1 صدا بزنيد تا با آن ارتباط برقرار کنيد بايد به شکل زير عمل شود:

window.document.form1

مانند همه اشياء در جاوااسکريپت ، اين شئ ها هم داراي خصوصيات و متدهايي هستند که بعد از رعايت کردن سلسله مراتب با گذاشتن يک نقطه مي توانيد آنها را بنويسيد. مانند:

window.history.go (-1)

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

در جدول زير شئ هاي اصلي اين سلسله مراتب ليست شده است.

هنوز توضيحات همه آنها کامل نشده است. در اسرع وقت تکميل و در اختيار شما قرار خواهند گرفت.

اين شئ مستقيماً با پنجره مرورگر در ارتباط است که معمولاً خصوصيات و متدهاي اين شئ در تگهاي body و frameset بکار مي روند. | window
اين شئ شامل اطلاعاتي در رابطه با مرورگر کاربر است که توسط خصوصيات و متدهاي آن اين اطلاعات ذخيره تا مورد استفاده قرار گيرند. | navigator
براي کار کردن بر روي فريمهاي اچ تي ام ال. | frame
دسترسي و ارتباط با کليه عناصر اچ تي ام ال مانند، متنها فرمها عکسها و غيره. | document
شامل اطلاعاتي در مورد URL يا همان آدرس اينترنتي صفحه اي که در حال نمايش است. | location
اين شئ داراي اطلاعاتي براي رجوع کاربر به صفحاتي که قبل از آن صفحه مشاهده شده و بر عکس. | history
اطلاعات صفحه مرورگر کاربر را بر مي گرداند مانند اندازه طول و عرض. | screen


HTML DOM (window object)

HTML DOM
شئ window

اين شئ در جاوااسکريپت مستقيماً با پنجره مرورگر ارتباط برقرار مي کند. شئ window اولين شئ در سلسله مراتب DOM مي باشد.

مانند تمام شئ هاي جاوااسکريپت اين شئ هم داراي خصوصيات و متدهايي است که توسط آنها مي توانيد بعضي از فعاليتهاي يک مرورگر را کنترل کنيد. براي هر صفحه وب داخل مرورگر يک شئ window در نظر گرفته مي شود، يعني اگر شما از يک فريم استفاده مي کنيد که سه صفحه وب را در خود جاي داده پس سه شئ window براي هر کدام از آنها وجود دارد.

window objects

اين شئ داراي اشياء ديگري نيز مي باشد که به عنوان شئ هاي فرزند براي آن شناخته مي شوند. اين اشياء عبارتند از:

navigator, frame, document, location, history, screen

خصوصيات شئ window

جدول زير خصوصيات اين شئ ميباشد، نسخه هاي دو مرورگر اينترنت اکسپلورر و نت اسکيپ که از اين خصوصيات پشتيباني مي کنند، مشخص شده است.

ie | nn | توضيح | خصوصيات
4 | 3 | بررسي پنجره مرورگر که اگر باز باشد مقدار true را بر مي گرداند و اگر بسته مقدار false | closed
3.02 | 2 | قراردادن يک متني که در نوار وضعيت مرورگر نمايان شود. | defaultStatus
4 |  | کنترل بلندي پنجره جديد که روي پنجره اصلي باز خواهد شد. | dialogHeight
4 |  | تعيين فاصله پنجره جديد از سمت چپ | dialogLeft
4 |  | تعيين فاصله پنجره جديد از بالا | dialogTop
4 |  | کنترل پهناي پنجره جديد | dialogWidth
5.5 |  | کنترل شئ فريم يا iframe که در پنجره اصلي قرار دارند | frameElement
4 | 6 | کنترل شماره فريم هاي داخل يک صفحه | length
3.02 | 2 | ذخيره نام فريمهاي يک پنجره و برگرداندن آنها | name
4 | 3 | کنترل پنجره اصلي که باز کننده يک پنجره جديد است | opener
3.02 | 2 | پنجره اصلي مرورگر | parent
5 |  | کنترل فاصله مرورگر از طرف چپ | screenLeft
5 |  | کنترل فاصله مرورگر از بالا | screenTop
3.02 | 2 | منظور همان پنجره مرورگر ميباشد | self
3.02 | 2 | کنترل متن در نوار وضعيت مرورگر | status
3.02 | 2 | کنترل پنجره اصلي مرورگر در فريمها | top

دقت کنيد که اين خصوصيات کاربرد کمي دارند و بيشتر متدهاي اين شئ هستند که مورد استفاده قرار مي گيرند. تنها خصوصيتي که کاربرد زيادي دارد status مي باشد که توسط آن مي توانيد متني را به نوار وضعيت مرورگر اضافه کنيد.

نکته: شما مي توانيد بجاي نوشتن window از self يا parent هم استفاده کنيد. خيلي ها براي راحتي نوشتن از اين دو کلمه استفاده مي کنند که در حقيقت منظور همان شئ window مي باشد. به اين صورت:

window. status =" Hello! "
self. status = " Hello! "
parent. status = " Hello! "

متدهاي شئ window

ie | nn | توضيح | متدها
3.02 | 2 | کادر ارتباطي اعلام اخطاريه به کاربر | alert( )
4 | 3 | برداشتن تمرکر يا focus از آن پنجره | blur( )
4 | 4 | برداشتن مدت زماني که توسط متد setInterval تنظيم شده | clearInterval( )
3.02 | 2 | برداشتن مدت زماني که توسط متد setTimeout تنظيم شده | clearTimeout( )
3.02 | 2 | بستن پنجره مرورگر | close( )
3.02 | 2 | کادر ارتباطي براي دريافت تأييد از کاربر | confirm("msg")
5.5 |  | ساختن پنجره هاي popup | createPopup( )
4 | 3 | متمرکز و فعال کردن پنجره | focus( )
4 | 4 | جابجا کردن پنجره مرورگر به يک نقطه تعيين شده | moveBy(x,y)
4 | 4 | کنترل فاصله پنجره از بالا و چپ | moveTo(x,y)
3.02 |  | رفتن به يک آدرس مشخص | navigate("URL")
3.02 |  | باز کردن يک پنجره جديد با يک آدرس مشخص | open("URL")
5 | 4 | پرينت گرفتن از محتواي آن صفحه | print( )
3.02 | 2 | کادر ارتباطي براي دريافت اطلاعاتي از کاربر | prompt( )
4 |  | تغيير اندازه پنجره مرورگر | resizeTo(width, height)
4 | 4 | جابجا کردن scroll bar مرورگر به نقطه تعيين شده | scrollTo(x,y)
4 | 4 | تعيين مدت زماني براي فراخواني يک تابع و يا بررسي يک شرط. اين مدت بر حسب ميلي ثانيه ميباشد که آن عمل در اين مدت زمان خاص مرتب اجرا خواهد شد. | setInterval("code", millisec)
3.02 | 2 | اجراي يک کد يا فراخواني يک تابع بعد از مدت زمان معين | setTimeout("code", millisec)
4 |  | باز کردن يک پنجره روي پنجره مرورگر که کاربر ابتدا بايد آنرا ببندد تا بتواند با پنجره هاي ديگر کار کند. | showModaldialog("URL", list)


HTML DOM (navigator object)

HTML DOM
شئ navigator

navigator يکي ديگر از اشياء DOM مي باشد که اطلاعاتي را در ارتباط با مرورگر کاربر مي دهد، مانند نوع مرورگر و يا نسخه آن. اين شئ جزو استانداردهاي W3C نيست.

خصوصيات شئ navigator

IE | NN | توضيح | خصوصيت
3.02 | 2 | بدست آوردن نام کد مرورگر* | appCodeName
4 |  | دريافت نسخه فرعي مرورگر | appMinorVersion
3.02 | 2 | نام مرورگر را نشان مي دهد | appName
3.02 | 2 | نسخه مرورگر و نام Platform** | appVersion
4 |  | زبان بکار گرفته شده در مرورگر | browserLanguage
4 | 6 | بررسي قابليت دريافت کوکي در مرورگر | cookieEnabled
4 |  | نوع طبقه بندي CPU سيستمي که مرورگر روي آن نصب است | cpuClass
4 |  | بررسي ارتباط کاربر با اينترنت | onLine
4 | 4 | نوع پلت فرم سيستم عامل | platform
4 |  | زبان پيش فرض و فعال سيستم عامل را نشان مي دهد | systemLanguage
3.02 | 2 | اطلاعاتي معيني که مرورگر دور از ديد کاربر به سرور منتقل مي کند | userAgent
4 |  | نمايش نوع زبان سيستم عامل | userLanguage

* منظور از کد مرورگر، اسم داخلي مرورگر مي باشد که در حال حاضر مرورگرهاي معروف مانند Internet Explorer ، Netscape ، Opera، Firefox همه از نام Mozilla استفاده مي کنند.

** Platform به استاندارد يک مجموعه و سيستم گفته مي شود که آن سيستم بر اساس آن طراحي و توسعه پيدا مي کند و افرادي که علاقمند به کار در آن زمينه هستند ملزم به اجراي آن استاندارد مي باشند تا در سيستم هماهنگي ايجاد شود. بطور مثال پلت فرم ويندوز XP ، ويندوز NT 5.1 و همچنين Win32 مي باشد.

کليه خصوصيات در يک مثال بکار رفته و اطلاعاتي که در آن خواهيد ديد، همگي متعلق به مرورگر و سيستم شما مي باشد.

متدهاي شئ navigator

اين شئ داراي دو متد مي باشد:

window.navigator.javaEnabled ( )
window.navigator.taintEnabled ( )

متد اول، قابليت اجراي اپلتهاي جاوا را در مرورگر کاربر بررسي مي کند و يکي از دو مقدار true يا false را بر مي گرداند. متد دوم براي taint کردن اطلاعات بکار مي رود يعني اطلاعاتي که taint مي شوند، بدون اجازه کاربر از مرورگر به سرور فرستاده نمي شوند. در حقيقت بعضي از اطلاعات را توسط اين متد علامت دار مي کنيد تا هنگام فرستاده شدن به سرور، شما با خبر شويد. لازم بذکر است اين متد در مرورگر اينترنت اکسپلورر از نسخه 5 به بعد فقط مقدار false را برميگرداند، يعني در اين مرورگر ديگر کارآيي ندارد.


HTML DOM (frame object)

HTML DOM
شئ frame

اين شئ ، فريمهاي داخل پنجره مرورگر را کنترل مي کند. اگر داخل پنجره مرورگر چند فريم داشته باشيم، براي هر فريم يک شئ window در نظر گرفته مي شود بنابراين ما ديگر نمي توانيم براي ارتباط با پنجره اصلي که اين فريمها را در خود جاي داده است از شئ window استفاده کنيم چون اگر در هر کدام از فريمها شئ window را بنويسيم به همان فريم بر مي گردد. در اين حالت براي ارتباط برقرار کردن با پنجره اصلي که اين پنجره هاي فرزند را در خود جاي داده، از شئ parent بايد استفاده کنيم.

خصوصيات و متدهاي اين شئ به شرح زير مي باشند.

خصوصيات شئ frame

IE | NN | توضيح | خصوصيات
5 | 6 | نمايش کادر دور فريم را کنترل مي کند | frameBorder
4 |  | مشخصه واحد براي فريمها | id
6 |  | آدرس يک صفحه وب براي توضيح بيشتر | longDesc
5 | 6 | کنترل حاشيه فريم از بالا و پايين صفحه | marginHeight
5 | 6 | کنترل حاشيه از چپ و راست | marginWidth
5 | 6 | نام واحد براي فريمها | name
5 | 6 | کنترل قابليت تغيير اندازه فريم | noResize
5 | 6 | کنترل scroll bar براي فريمها | scrolling
5 | 6 | آدرس صفحه وب که در فريم جاي مي گيرد | src

به غير از id بقيه خصوصيات، استاندارد W3C مي باشند.

متدهاي شئ frame

اين شئ دو متد دارد که فقط در مرورگر اينترنت اکسپلورر اجرا مي شوند و در ضمن استاندارد هم نمي باشند:

blur( ), focus ( )

متد blur تمرکز را از روي فريم برمي دارد و focus دوباره تمرکز را روي فريم برميگرداند.


HTML DOM (document object)

HTML DOM
شئ document

شئ document يکي از مهمترين اشياء DOM مي باشد چون اين شئ قابليت دسترسي به عناصر HTML را دارد و به شما اجازه مي دهد تا از طريق جاوااسکريپت هم اين عناصر را کنترل کنيد. شما در طول آموزش جاوااسکريپت با يکي از پرکاربردترين متد اين شئ آشنا شده ايد يعني :

document.write( )

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

anchors, applets, attributes, embeds, forms, images, links, plugins, stylesheets

نکته : منظور از عنصر anchor کل تگهاي لينک مي باشد چه به داخل يک صفحه اشاره کنند چه به خارج از آن صفحه وب پيوند داده شوند و عنصر link همان تگي است که در قسمت head يک سند اچ تي ام ال قرار مي گيرد.

دقت کنيد که ارتباط شئ document با attributes ، embeds ، plugins و style sheets جزو استانداردهاي W3C نمي باشد.

خصوصيات شئ document

IE | NN | توضيح | خصوصيات
3 | 2 | تعيين رنگ لينک فعال | alinkColor *
3 | 2 | تعيين يا برگرداندن رنگ زمينه صفحه | bgColor *
5 | 6 | تعيين شروع و خاتمه قسمت بدنه | body
3 | 2 | کنترل کوکي هاي ساخته شده آن صفحه | cookie
5 | 6 | دريافت اطلاعات از شئ اصلي | documentElement
4 | 3 | نشان دادن آدرس دامنه صفحه وب | domain
3 | 2 | کنترل رنگ فونت داخل صفحه وب | fgColor *
3 | 2 | نمايش زمان و تاريخ آخرين اصلاحات سند اچ تي ام ال | lastModified
3 | 2 | کنترل رنگ لينک ها | linkColor *
3 | 2 | نمايش آدرس سند اچ تي ام ال | referrer
3 | 2 | نمايش نام تعيين شده در قسمت title | title
4 | 3 | نمايش آدرس همان صفحه وب | URL
3 | 2 | کنترل رنگ لينک هاي مشاهده شده | vlinkColor *

* استفاده از آنها توسط W3C توصيه نمي شود.

لازم بذکر است که documentElement و lastModified جزو استانداردهاي W3C نمي باشند.

متدهاي شئ document

IE | NN | توضيح | متدها
 | 2 | پاک کردن همه عناصر صفحه وب | clear( )
3 | 2 | خاتمه شئ document.open را اعلام مي کند | close( )
6 | 6 | ساختن يک خصوصيت براي يک تگ با نام مشخص | createAttribute("name")
5 | 6 | ساختن يک تگ | createElement("tag")
5 | 6 | ساختن يک رشته متني | createTextNode("txt")
5 | 6 | متمرکز کردن روي سند اچ تي ام ال | focus( )
5 | 6 | برگرداندن و ذخيره کردن محتواي يک عنصر که با آن ID در صفحه مشخص شده است | getElementById("id")
5 | 6 | کنترل يک عنصر توسط نام مشخص شده آن | getElementsByName("name")
5 | 6 | کنترل يک عنصر توسط بکار بردن نام تگ | getElementsByTagName("tag")
3 | 2 | باز کردن يک صفحه وب با محتواي جديد | open("mimetype"[,replace])
3 | 2 | نوشتن هر متني داخل صفحه وب که در پرانتز مشخص شده باشد. | write("str")
3 | 2 | نمايش متن داخل پرانتز به همراه تگهاي اچ تي ام ال | writeln("str")

رويدادهايي هم وجود دارد که براي اين شئ مي توانيد بکار بريد که الگوي استفاده از آنها مانند زير مي باشد:

document.event_name = "some javascript code"

اين رويدادها به شرح زير مي باشند که هيچ کدام از آنها استاندارد W3C نيستند.

onClick, onDblClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onResize


HTML DOM (location object)

HTML DOM
شئ location

شئ location اطلاعاتي در مورد آدرس همان صفحه وبي که کاربر درحال مشاهده آن مي باشد را ذخيره کرده و در صورت لزوم مي توان از آنها استفاده کرد. کلاً اين شئ جزو استانداردهاي W3C نمي باشد.

خصوصيات شئ location

IE | NN | توضيح | خصوصيت
3 | 2 | قسمتي از آدرس در خصوصيت href که بعد از علامت# مي آيد را بر ميگرداند | hash
3 | 2 | اين خصوصيت hostname آن سند و پورت آن اگر به غير از 80 باشد را بر مي گرداند. | host
3 | 2 | فقط hostname را برمي گرداند | hostname
3 | 2 | کنترل آدرس صفحه وب | href
3 | 2 | آدرس صفحه وب که اين شئ در آن قرار دارد | pathname
3 | 2 | شماره پورت صفحه لود شده را برميگرداند اگر شماره پورت بصورت پيش فرض 80 باشد آنرا نشان نمي دهد. | port
3 | 2 | پروتکل آدرس وب را نشان مي دهد | protocol
3 | 2 | قسمتي از آدرس وب که بعد از علامت ? مي آيد را برمي گرداند | search

متدهاي شئ location

IE | NN | توضيح | متد
4 | 2 | يک صفحه جديد لود مي کند | assign("URL")
4 | 2 | صفحه را refresh ميکند | reload(false|true)
4 | 3 | آدرسي جديد جايگزين آدرس همان صفحه مي کند | replace("URL")


HTML DOM (history object)

HTML DOM
شئ history

اين شئ يکي ديگر از اشياء DOM مي باشد که با history مرورگر ارتباط بر قرار مي کند. بطور مثال ممکن است شما قبل از اينکه وارد اين صفحه بشويد، چند صفحه را مشاهده کرده باشيد و يا بعد از اين صفحه به صفحات ديگر رفته و مجدداً به همين جا باز گرديد. دراين حالتها دکمه هاي back و forward مرورگرتان فعال مي شوند و مرورگر شما صفحاتي که قبل و بعد از اين صفحه را مشاهده کرديد، ذخيره مي کند و با زدن دکمه back به صفحات قبل و با زدن دکمه forward به صفحاتي جلوتر هدايت مي شويد.

هنگاميکه اين صفحات در مرورگر بصورت موقت ذخيره شدند، شما توسط شئ history مي توانيد به آنها دسترسي پيدا کنيد که اين دسترسي به شما اجازه مي دهد براي صفحه خود دکمه يا لينک، مشابه back و forward مرورگر را بسازيد.

اين شئ تمام آدرسهاي مشاهده شده در آن لحظه را در يک آرايه ذخيره مي کند و با استفاده از خصوصيات و متدهاي اين شئ، مي توانيد با آنها ارتباط برقرار کنيد. لازم بذکر است که اين شئ، استاندارد W3C نمي باشد.

خصوصيت اين شئ

اين شئ فقط يک خصوصيت دارد بنام length که توسط آن مي توانيد دريابيد، چه تعداد آدرس در آرايه اين شئ ذخيره شده است. اين خصوصيت در مرورگر IE نسخه 3 به بعد و در مرورگر نت اسکيپ از نسخه 2 به بعد قابل استفاده مي باشد.

متدهاي شئ history

IE | NN | توضيح | متد
3 | 2 | مانند دکمه back مرورگر به صفحه قبلي هدايت مي کند | back( )
3 | 2 | مانند دکمه forward مرورگر عمل مي کند | forward( )
3 | 2 | شماره صفحه بازديد شده را وارد مي کنيد | go( number)

براي متد go مي توانيد هم شماره صفحه را وارد کنيد و هم آدرس صفحه بازديد شده را که عدد بهتر و راحت تر از آدرس مي باشد. براي رفتن به صفحات که قبلاً مشاهده شده بايد از اعداد منفي استفاده کنيد. بطور مثال اگر مي خواهيد کاربر به يک صفحه قبل برود به صورت زير عمل مي کنيد:

history.go ( -1 )

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

<a href="javascript:history.back( )" > Go Back </a>


HTML DOM (screen object)

HTML DOM
شئ screen

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

اين شئ جزو استانداردهاي W3C نمي باشد و همچنين متدي هم ندارد و فقط خصوصياتي دارد که در زير به آنها اشاره شده است.

خصوصيات شئ screen

IE | NN | توضيح | خصوصيات
4 | 4 | اندازه بلندي صفحه نمايش بدون در نظر گرفتن نوارهاي بالاي مرورگر | availHeight
4 | 4 | پهناي صفحه را نشان مي دهد | availWidth
4 | 4 | کيفيت رنگ سيستم | colorDepth
6 |  | نمايش DPI افقي صفحه | deviceXDPI
6 |  | نمايش DPI عمودي صفحه | deviceYDPI
4 |  | بررسي font smoothing در سيستم | fontSmoothingEnabled
4 | 4 | بلندي صفحه نمايش | height
6 |  | DPI افقي صفحه نمايش | logicalXDPI
6 |  | DPI عمودي صفحه نمايش | logicalYDPI
 | 4 | وضوح رنگ صفحه نمايش | pixelDepth
4 | 4 | پهناي صفحه نمايش | width


javascript guidelines --- نکات مهم

نکات مهم براي اسکريپت نويسي

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

هرگاه خواستيد که اسکريپتي خلق کنيد، ابتدا آنرا در ذهن خود بررسي کنيد که اين اسکريپت چه کاري بايد انجام دهد و چه نتيجه اي را مي خواهيد از آن بگيريد، سپس افکارتان را روي کاغذ پياده کنيد با جزئيات کامل که چه اطلاعاتي را بايد دريافت کنيد و توسط چه دستوراتي آنرا پيش ببريد و در آخر چه نتيجه اي بايد بدهد.

هنگام خلق يک اسکريپت نکاتي را بايد در نظر داشته باشيد:

سعي کنيد بعد از هر خط علامت ; را بگذاريد تا پايان آن خط مشخص شود.

document.write ( " text string " );
document.write ( myFunction ) ;

جاوااسکريپت case sensetive است يعني به حروف کوچک و بزرگ حساس است و بين آنها فرق مي گذارد. در جاوااسکريپت myFunction با myfunction تفاوت دارد.

دقت کنيد کليه علامتها مانند پرانتز، آکلاد و کروشه در هر جا که مي نويسيد بايد دوباره آنها را ببنديد.

( { [ ..... ] } )

جاوااسکريپت فاصله هاي اضافي را در نظر نمي گيرد، پس شما مي توانيد براي خوانا بودن کد خود فاصله هايي را اضافه کنيد. دو خط زير تفاوتي با هم ندارند:

var name="value";
var name = " value " ;

در نظر داشته باشيد که يک خط کد جاوااسکريپت حتماً بايد در يک خط نوشته شود و نمي توانيد ادامه آنرا در خط بعدي بنويسيد، مگر اينکه به انتهاي صفحه برسيد و خود به خود به ابتداي خط بعد هدايت شويد. اما در ميان رشته هاي متني با گذاشتن علامت \ مي توانيد به خط بعد رفته و ادامه دهيد.

document.write ( " Hello \
my friends! " ) ;

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

document.write( " text " ) ; // your comment

اگر هم نظريه يا توضيح شما بيشتر از چند کلمه است مي توانيد به صورت زير عمل کنيد:

/* This is a comment
block. It contains
several lines */

لازم بذکر است که اين توضيحات و نظريات در صفحه نمايش داده نمي شوند.

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

<script language="javascript" type="text/javascript">
javascript code......
</script>

<noscript> Your browser does not support javascript.</noscript>


CuteFTP آپلود و راه اندازي سايت توسط

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

Upload و راه اندازي يک سايت بوسيله CuteFTP

به تلاش : | iranw3.com
آدرس ايميل : | webmaster@iranw3.com
منبع : | اينترنت و برنامه CuteFTP

در مطلب آموزشي تحت عنوان FTP چيست، شما با اين پروتکل آشنا شديد و پي به اهميت آن در زمينه راه اندازي وب سايت هم برديد. در اين صفحه قصد داريم شما را با يکي از نرم افزار هاي FTP آشنا کنيم تا با استفاده از آن بتوانيد محتويات يک وب سايت را مديريت کنيد. برنامه اي را که ميخواهيم به آموزش آن بپردازيم، نرم افزاري به نام CuteFTP است که آنرا مي توانيد از سايت Globalscape دانلود کنيد.

اين نرم افزار يکي از بهترين برنامه هاي موجود در اينترنت است که بسيار کامل مي باشد و در عين حال کار کردن با آن خيلي ساده و راحت است. نسخه اي را که در اين قسمت براي آموزش انتخاب کرديم، نسخه 6.0 Professional اين نرم افزار است. اگر شما نسخه ديگري از اين برنامه داريد، جاي نگراني نيست چون مطالبي که گفته خواهد شد تقريباً در همه نسخه ها يکسان است فقط گرافيک آن فرق مي کند. دقت کنيد در اينجا قصد آموزش نصب اين نرم افزار را نداريم و فقط نکاتي را که براي ايجاد ارتباط بين کامپيوتر شما و دايرکتوري وب سايت براي انتقال فايلها مي باشد را آموزش مي دهيم و فرض را بر اين گرفته ايم که شما برنامه را با موفقيت نصب کرده ايد.

توجه کنيد، قبل از اجراي اين برنامه شما چند چيز را بايد داشته باشيد، اول از همه آدرس FTP وب سايتتان که معمولاً به شکل زير است:

ftp://ftp.yourdomain.com

سپس اسم کاربري user name و کلمه رمز password و همچنين مسيري که محتواي سايت را در آن بايد آپلود upload کنيد که معمولاً يک پوشه بنام www است.

بطور معمول بعد از نصب CuteFTP هنگاميکه براي اولين بار برنامه را باز مي کنيد يک پنجره بنام Connection Wizard باز خواهد شد تا بطور قدم به قدم برنامه را براي تنظيمات اوليه آماده کند. اگر اين پنجره باز نشد، مي توانيد آنرا از منوي File باز کنيد. در اولين قدم اين ويزارد يک اسم تعيين مي کنيد تا برنامه اين تنظيمات را براي آن اسم ذخيره کند که بهتر است اسم سايت خود را بنويسيد. در قدم بعد بايد آدرس FTP سايت را مشخص کنيد که پس از وارد کردن آدرس دکمه Next را ميزنيد تا نوبت به وارد کردن اطلاعات کاربري شما برسد. دقت کنيد که اطلاعات را درست وارد کنيد. بعد از تکميل آن قسمت مجدداً دکمه Next را بزنيد، که در اين قسمت بايد آدرس پوشه اي که محتواي وب سايتتان در آن قرار دارد را در قسمت Default Local Folder وارد کنيد و در قسمت Default Remote Folder هم آدرس دايرکتوري وب سايت بر روي وب سرور را وارد مي کنيد. در مرحله آخر هم اطلاعات لازم جمع آوري شده و شما فقط دکمه Finish را ميزنيد.

بعد از به پايان رسيدن تنظيمات و بسته شدن پنجره Connection Wizard، برنامه ميخواهد بطور اتوماتيک به اينترنت وصل شود که اگر شما از سيستم Dial up براي ارتباط با اينترنت استفاده مي کنيد، بايد يک تنظيم ديگر در رابطه با وصل شدن نرم افزار با اينترنت را انجام دهيد، چون اين ارتباط بصورت پيش فرض بر روي LAN تنظيم شده است. براي اينکار به منوي Tools رفته و بر روي گزينه Options يا Global Options کليک کنيد. در پنجره باز شده و در قسمت Connection روي گزينه DUN/LAN کليک کنيد و در طرف راست، گزينه دوم يعني استفاده از مودم را انتخاب کنيد و در کادري که فعال مي شود گزينه مناسب براي شماره گيري و ارتباط با اينترنت را کليک کنيد. در آخر هم با زدن دکمه OK تنظيمات را تأييد کنيد تا پنجره بسته شود.

اگر شما مي خواهيد کنترل بيشتري روي تنظيمات داشته باشيد مي توانيد پنجره Connection Wizard را بسته و خودتان بصورت دستي تنظيمات را انجام دهيد. براي اينکار داخل منوي File رفته و در گزينه New بر روي FTPSite کليک کنيد. يک پنجره باز مي شود که داراي چند برگه است، در قسمت General و در اولين کادر يعني Lable ، يک اسم انتخاب مي کنيد. در کادر Host address بايد آدرس FTP سايت را بنويسيد، در قسمتهاي Username و Password اسم کاربري و کلمه رمز را نوشته که هنگام وارد کردن اين اطلاعات قسمت Login method بطور اتوماتيک بر روي گزينه Normal تنظيم خواهد شد. در قسمت comments هم مي توانيد توضيحاتي را در مورد سايت وارد کنيد که همراه با تنظيمات ذخيره شود، اگر هم خواستيد مي توانيد آنرا خالي بگذاريد.

در قسمت Type در همان پنجره ، تنظيماتي بصورت پيش فرض انجام شده است که بهتر است به آنها دست نزنيد فقط يک نکته را خدمتتان عرض کنم که در کادر Transfer type مي توانيد گزينه Auto detect را انتخاب کنيد تا نرم افزار بصورت اتوماتيک نوع فرمت فايلها را هنگام انتقال تشخيص دهد. در اين کادر گزينه ASCII مخصوص انتقال فايلهاي متني مانند سندهاي HTML و گزينه Binary مخصوص انتقال فايلهايي نظير عکسها مي باشند که اگر اشتباه آنها را بکار بريد يعني براي انتقال يک عکس از گزينه ASCII استفاده کنيد آن فايل خراب خواهد شد پس بهتر است که گزينه Auto-detect را انتخاب کنيد تا از اين نظر خيالتان آسوده باشد.

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

قسمت Options آن پنجره هم به حال خود رها کنيد و در آخر هم مي توانيد دکمه OK را زده و اطلاعات را تأييد کنيد و يا اينکه دکمه Connect را بزنيد تا به اينترنت و به دايرکتوري وب سايتتان وصل شويد.

پس از تنظيمات اوليه براي برقراري ارتباط حالا نوبت به انتقال فايلها مي رسد. اگر هم هنوز وصل نشده ايد مي توانيد به منوي File برويد و سپس گزينه Connect يا دکمه connect در نوار ابزار را بزنيد و يا بر روي کيبورد Ctrl+T را اجرا کنيد. هنگاميکه ارتباط با موفقيت با دايرکتوري وب سايت برقرار شد، پنجره برنامه CuteFTP تقريباً به اين شکل مي شود. لازم بذکر است که اگر از نسخه هاي جديد استفاده مي کنيد براي راحتي کار بهتر است وارد منوي View شده و گزينه Switch to classic interface را بزنيد تا ظاهر برنامه تغيير کند.

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

دقت کنيد که صفحه اصلي سايت يعني Homepage را حتماً بايد در شاخه اصلي دايرکتوري وب سايت يعني همان پوشه www آپلود کنيد تا قابل دسترسي براي بينندگان باشد که معمولاً اين فايل بايد داراي يکي از اسم هاي زير باشد:

index.htm, index.html

در آخر هم مي توانيد از منوي File گزينه Disconnect يا دکمه مربوطه را در نوار ابزار بزنيد تا ارتباط با وب سرور قطع شود

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


FTP Tutorial --- اف تي پي چيست؟

Google
Web iranw3.com
مطالب آموزشي

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهاي
رنگهاي استاندارد
ASCII جدول کد
فارسي نويسي
سايتهاي جستجو
نکاتي درباره گوگل

FTP چيست؟

به تلاش : | iranw3.com
آدرس ايميل : | webmaster@iranw3.com
منبع : | اينترنت و راهنماي برنامه CuteFTP

FTP يکي از قديمي ترين پروتکل هاي اينترنت مي باشد که هنوز هم کاربرد زيادي دارد و در سال 1970 در اينترنت توسعه يافت. FTP مخفف File Transfer Protocol ميباشد که يک پروتکل استاندارد در TCP/IP است. مانند HTTP که محتواي وب را منتقل مي کند يا SMTP که ايميل ها را منتقل مي کند FTP هم ساده ترين راه براي تبادل فايل از يک کامپيوتر به کامپيوتر ديگر مي باشد. يکي از کاربرد هاي FTP ، دانلود موزيک و برنامه هاي کاربردي از وب سايتها مي باشد. به خاطر استفاده اين پروتکل از يک پورت مجزا که پورت شماره 21 است عمل دانلود بسيار سريع انجام مي شود. مانند آدرسهاي وب سايتها، FTP هم آدرس مخصوص خود را دارد چون همانند يک وب سايت، اين پروتکل بر روي هارد ديسک کامپيوتر سرور فضاي مشخصي را اشغال مي کند. معمولاً اگر آدرس يک وب سايت مانند آدرس زير باشد:

http://www.domain.com

آدرس FTP آن سايت به اين صورت است:

ftp://ftp.domain.com

به دو طريق شما مي توانيد از اين پروتکل براي انتقال فايلها استفاده کنيد، يکي از راه مرورگر وب خود و ديگري بکارگرفتن نرم افزار مخصوص FTP که به آنها FTP Client مي گويند. اما براي دسترسي به محتواي دايرکتوري FTP نياز به مشخصه کاربري يعني UserID و کلمه رمز يعني Password داريد که در هر دو روش بايد ابتدا آنها را وارد کنيد و پس از تأييد به انتقال فايل بپردازيد. ورود به بعضي از دايرکتوري هاي FTP براي کليه کاربرها آزاد مي باشد و نيازي به وارد کردن مشخصات کاربري نيست که اصطلاحاً آنرا ورود بصورت گمنام يعني anonymous مي گويند که تنها با وارد کردن آدرس ايميل خود مي توانيد به آن دايرکتوري دسترسي پيدا کنيد. پس از ورود، شما مي توانيد براي انتقال فايلها از دستوراتي مانند copy paste استفاده کنيد تا فايلي را دانلود و يا از سيستم خود به آن کامپيوتر بفرستيد يعني Upload کنيد، البته اين را در نظر داشته باشيد که در بيشتر سايتها شما مجاز به دانلود هستيد نه آپلود مگر اينکه آن دايرکتوري متعلق به خود شما باشد تا سطح دسترسي شما اجازه به آپلود فايل هم بدهد.

دقت کنيد که آپلود کردن يک فايل بزرگ از طريق مرورگرها توصيه نمي شود چه از لحاظ امنيتي و چه از نظر سالم ماندن فايل که بهتر است در اين موارد از نرم افزارهاي مخصوص استفاده شود. اينگونه برنامه ها در اينترنت بسيار زياد هستند که بعضي از آنها رايگان بوده و بعضي ها را هم بايد خريداري کنيد. هر کدام از اين نرم افزارها داراي مزايا و معايبي مي باشند اما دو تا از آنها که بيشترين کاربرد را در بين کاربران دارند عبارتند از: CuteFTP محصول Globalscape و WS_FTP توليد Ipswitch . براي اطلاعات بيشتر و يا دانلود آنها مي توانيد به وب سايت هاي ذکر شده مراجعه کنيد.

يکي ديگر از کاربردهاي پروتکل FTP ، استفاده طراحان و مديران وب سايتها براي انتقال محتواي سايتها مي باشد که در حال حاضر اين افراد بيشترين استفاده را از FTP دارند. زماني که شما فضايي را براي ميزباني سايت خود از يک شرکت سرويس دهنده اينترنت ISP اجاره مي کنيد، به شما حداقل يک آدرس FTP مي دهند تا عمل انتقال فايلها را از کامپيوتر خود به وب سرور و بالعکس انجام دهيد که بهتر است براي امنيت و حفظ فايلها حتماً از يک نرم افزار در اين زمينه استفاده کنيد. به همين منظور قصد داريم، چگونگي استفاده و انتقال محتويات يک وب سايت از طريق برنامه CuteFTP را براي شما آموزش دهيم تا با بکارگيري اين نرم افزار بتوانيد به راحتي محتواي سايت خود را منتقل و فايلها را مديريت کرده و با موفقيت وب سايت خود را راه اندازي کنيد.

ابتداي صفحه

Go to printable page نسخه چاپي اين صفحه

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلي | نقشه سايت | ارتباط | درباره سايت | نظرخواهي

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Plug ins

Google
Web iranw3.com
مطالب آموزشی

HTML 4.0
HTML 4.01
XHTML
CSS
JavaScript

متفرقه

HTML تاريخچه
HTML تگهای
رنگهای استاندارد
ASCII جدول کد
فارسی نويسی
سايتهای جستجو
نکاتی درباره گوگل

Plug-ins چيست؟

به تلاش : | iranw3.com
آدرس ایمیل : | webmaster@iranw3.com
منبع : | Master VISUALLY™ HTML 4 and XHTML™ 1

plug-ins برنامه هاي خارج از مرورگرها هستند که براي افزايش کارآيي يک مرورگر به آن متصل مي شوند. اين برنامه ها از يکسري فايل ها پشتيباني مي کنند که در حالت عادي مرورگرها قادر به اجرا و نمايش آنها نيستند. چندين plug-in هستند که داراي محبوبيت خاصي مي باشند و مرتب اصلاح شده تا توانايي هاي بيشتري داشته باشند که به معرفي آنها مي پردازيم.

يکي از معروفترين آنها برنامه اتصالي Adobe Acrobat است که توسط آن مرورگرها قادر خواهند بود تا فايل هايي با فرمت PDF را باز کرده و نمايش دهند. يکي از ويژگيهاي اين برنامه اتصالي، نمايش دقيق قالب و آرايش محتواي آن فايل مطابق با فايل اصلي خودش ميباشد. اين برنامه اتصالي همراه با نصب يکي از برنامه هاي Adobe Acrobat در سيستم شما نصب خواهد شد اما اگر هنوز برنامه اي نصب نکرده ايد و يا خيالي هم براي نصب نداريد، مي توانيد فقط برنامه اتصالي مرورگر را از سايت زير دانلود کرده و نصب نماييد.

www.adobe.com

يکي ديگر از اين برنامه هاي اتصالي، برنامه اي است که قادر به پخش صوت و تصوير با فرمتي خاص است، بدين گونه که شما نيازي به صبر کردن براي دانلود آن فايل صوتي و يا تصويري نخواهيد داشت و همزمان با دانلود آن فايل مي توانيد به آن گوش داده و يا ببينيد. در حال حاضر دو نوع فرمت معروف به نامهاي RealAudio براي پخش صوت و RealVideo براي پخش تصوير وجود دارند که حتي با اينترنت dialup هم مي توانيد از آنها استفاده کنيد. اين فرمتها باعث جذب افرادي شده که علاقه خاص به گوش کردن اخبار دارند چون بيشتر کانالهاي خبري ، اخبار خود را با اين فرمت بر روي اينترنت پخش مي کنند. اگر شما برنامه مالتي مديا RealOne.player را نصب کرده ايد پس نيازي به برنامه اتصالي اين فرمتها نداريد ولي اگر هنوز اقدام به اينکار نکرده ايد مي توانيد برنامه اتصالي آنها را از آدرس زير تهيه کنيد.

www.real.com

plug-in ديگري هست که براي سيستم عامل مکينتاش ميباشد بنام QuickTime و براي فرمتي خاص از فايلهاي صوتي و تصويري ميباشد که اين فرمت مشابه فرمتهاي گفته شده در قسمت بالا است. البته برنامه اتصالي QuickTime براي سيستمهاي عامل ويندوز نيز وجود دارد تا کاربران اينگونه سيستمها هم بتوانند از اين فايلها در وب استفاده کنند. براي اطلاعات بيشتر به وب سايت زير مراجعه کنيد.

www.apple.com

برنامه اتصالي ديگري بنام VRML هست که مخفف Virtual Reality Modeling Language ميباشد که يک زبان مشابه HTML است و مي تواند يک دنياي سه بعدي مجازي بسازد. توسط برنامه اتصالي اين زبان مي توانيد اين دنياي سه بعدي را در مرورگر خود آورده و در آن بچرخيد. اين زبان plug-in هاي مختلفي دارد. براي دانستن از اين زبان مي توانيد به کنسرسيوم وب سه بعدي در آدرس زير رفته و اطلاعاتي را کسب کنيد.

www.vrml.org

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

www.macromedia.com

بعد از مراجعه به اين سايتها و نصب برنامه هاي اتصالي، مرورگر شما قادر به شناسايي اين فايلها و اجراي آنها خواهد بود. البته بعضي از plug-in ها همراه مرورگرها خواهند بود و نيازي به نصب مجدد نيست. اگر مرورگر شما به فايلي در وب برخورد کند که قادر به اجراي آن نباشد، پنجره اي باز کرده و از شما ميخواهد تا برنامه اتصالي مورد نظر را دانلود کنيد. اگر شما در سايتتان از برنامه هايي استفاده مي کنيد که نياز به plug-in دارد، حتماً درقسمتي از صفحه توضيحي بگذاريد تا کاربران از وجود آن باخبر شوند و لينک دانلود آن برنامه اتصالي هم بگذاريد تا دسترسي به آن آسانتر شود.

ابتدای صفحه

Go to printable page نسخه چاپی اين صفحه

معرفی به ديگران
پيوند به سايت
لينکهای مفيد
مطالب کوتاه
کدهای جاوااسکريپت

Valid XHTML 1.0!
صفحه اصلی | نقشه سايت | ارتباط | درباره سايت | نظرخواهی

webmaster@iranw3.com
Copyright © 2004-2005 iranw3. All rights reserved .


Upload و راه اندازي يک سايت بوسيله CuteFTP

به تلاش : | iranw3.com
آدرس ایمیل : | webmaster@iranw3.com
منبع : | اينترنت و برنامه CuteFTP

در مطلب آموزشي تحت عنوان FTP چيست، شما با اين پروتکل آشنا شديد و پي به اهميت آن در زمينه راه اندازي وب سايت هم برديد. در اين صفحه قصد داريم شما را با يکي از نرم افزار هاي FTP آشنا کنيم تا با استفاده از آن بتوانيد محتويات يک وب سايت را مديريت کنيد. برنامه اي را که ميخواهيم به آموزش آن بپردازيم، نرم افزاري به نام CuteFTP است که آنرا مي توانيد از سايت Globalscape دانلود کنيد.

اين نرم افزار يکي از بهترين برنامه هاي موجود در اينترنت است که بسيار کامل مي باشد و در عين حال کار کردن با آن خيلي ساده و راحت است. نسخه اي را که در اين قسمت براي آموزش انتخاب کرديم، نسخه 6.0 Professional اين نرم افزار است. اگر شما نسخه ديگري از اين برنامه داريد، جاي نگراني نيست چون مطالبي که گفته خواهد شد تقريباً در همه نسخه ها يکسان است فقط گرافيک آن فرق مي کند. دقت کنيد در اينجا قصد آموزش نصب اين نرم افزار را نداريم و فقط نکاتي را که براي ايجاد ارتباط بين کامپيوتر شما و دايرکتوري وب سايت براي انتقال فايلها مي باشد را آموزش مي دهيم و فرض را بر اين گرفته ايم که شما برنامه را با موفقيت نصب کرده ايد.

توجه کنيد، قبل از اجراي اين برنامه شما چند چيز را بايد داشته باشيد، اول از همه آدرس FTP وب سايتتان که معمولاً به شکل زير است:

ftp://ftp.yourdomain.com

سپس اسم کاربري user name و کلمه رمز password و همچنين مسيري که محتواي سايت را در آن بايد آپلود upload کنيد که معمولاً يک پوشه بنام www است.

بطور معمول بعد از نصب CuteFTP هنگاميکه براي اولين بار برنامه را باز مي کنيد يک پنجره بنام Connection Wizard باز خواهد شد تا بطور قدم به قدم برنامه را براي تنظيمات اوليه آماده کند. اگر اين پنجره باز نشد، مي توانيد آنرا از منوي File باز کنيد. در اولين قدم اين ويزارد يک اسم تعيين مي کنيد تا برنامه اين تنظيمات را براي آن اسم ذخيره کند که بهتر است اسم سايت خود را بنويسيد. در قدم بعد بايد آدرس FTP سايت را مشخص کنيد که پس از وارد کردن آدرس دکمه Next را ميزنيد تا نوبت به وارد کردن اطلاعات کاربري شما برسد. دقت کنيد که اطلاعات را درست وارد کنيد. بعد از تکميل آن قسمت مجدداً دکمه Next را بزنيد، که در اين قسمت بايد آدرس پوشه اي که محتواي وب سايتتان در آن قرار دارد را در قسمت Default Local Folder وارد کنيد و در قسمت Default Remote Folder هم آدرس دايرکتوري وب سايت بر روي وب سرور را وارد مي کنيد. در مرحله آخر هم اطلاعات لازم جمع آوري شده و شما فقط دکمه Finish را ميزنيد.

بعد از به پايان رسيدن تنظيمات و بسته شدن پنجره Connection Wizard، برنامه ميخواهد بطور اتوماتيک به اينترنت وصل شود که اگر شما از سيستم Dial up براي ارتباط با اينترنت استفاده مي کنيد، بايد يک تنظيم ديگر در رابطه با وصل شدن نرم افزار با اينترنت را انجام دهيد، چون اين ارتباط بصورت پيش فرض بر روي LAN تنظيم شده است. براي اينکار به منوي Tools رفته و بر روي گزينه Options يا Global Options کليک کنيد. در پنجره باز شده و در قسمت Connection روي گزينه DUN/LAN کليک کنيد و در طرف راست، گزينه دوم يعني استفاده از مودم را انتخاب کنيد و در کادري که فعال مي شود گزينه مناسب براي شماره گيري و ارتباط با اينترنت را کليک کنيد. در آخر هم با زدن دکمه OK تنظيمات را تأييد کنيد تا پنجره بسته شود.

اگر شما مي خواهيد کنترل بيشتري روي تنظيمات داشته باشيد مي توانيد پنجره Connection Wizard را بسته و خودتان بصورت دستي تنظيمات را انجام دهيد. براي اينکار داخل منوي File رفته و در گزينه New بر روي FTPSite کليک کنيد. يک پنجره باز مي شود که داراي چند برگه است، در قسمت General و در اولين کادر يعني Lable ، يک اسم انتخاب مي کنيد. در کادر Host address بايد آدرس FTP سايت را بنويسيد، در قسمتهاي Username و Password اسم کاربري و کلمه رمز را نوشته که هنگام وارد کردن اين اطلاعات قسمت Login method بطور اتوماتيک بر روي گزينه Normal تنظيم خواهد شد. در قسمت comments هم مي توانيد توضيحاتي را در مورد سايت وارد کنيد که همراه با تنظيمات ذخيره شود، اگر هم خواستيد مي توانيد آنرا خالي بگذاريد.

در قسمت Type در همان پنجره ، تنظيماتي بصورت پيش فرض انجام شده است که بهتر است به آنها دست نزنيد فقط يک نکته را خدمتتان عرض کنم که در کادر Transfer type مي توانيد گزينه Auto detect را انتخاب کنيد تا نرم افزار بصورت اتوماتيک نوع فرمت فايلها را هنگام انتقال تشخيص دهد. در اين کادر گزينه ASCII مخصوص انتقال فايلهاي متني مانند سندهاي HTML و گزينه Binary مخصوص انتقال فايلهايي نظير عکسها مي باشند که اگر اشتباه آنها را بکار بريد يعني براي انتقال يک عکس از گزينه ASCII استفاده کنيد آن فايل خراب خواهد شد پس بهتر است که گزينه Auto-detect را انتخاب کنيد تا از اين نظر خيالتان آسوده باشد.

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

قسمت Options آن پنجره هم به حال خود رها کنيد و در آخر هم مي توانيد دکمه OK را زده و اطلاعات را تأييد کنيد و يا اينکه دکمه Connect را بزنيد تا به اينترنت و به دايرکتوري وب سايتتان وصل شويد.

پس از تنظيمات اوليه براي برقراري ارتباط حالا نوبت به انتقال فايلها مي رسد. اگر هم هنوز وصل نشده ايد مي توانيد به منوي File برويد و سپس گزينه Connect يا دکمه connect در نوار ابزار را بزنيد و يا بر روي کيبورد Ctrl+T را اجرا کنيد. هنگاميکه ارتباط با موفقيت با دايرکتوري وب سايت برقرار شد، پنجره برنامه CuteFTP تقريباً به اين شکل مي شود. لازم بذکر است که اگر از نسخه هاي جديد استفاده مي کنيد براي راحتي کار بهتر است وارد منوي View شده و گزينه Switch to classic interface را بزنيد تا ظاهر برنامه تغيير کند.

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

دقت کنيد که صفحه اصلي سايت يعني Homepage را حتماً بايد در شاخه اصلي دايرکتوري وب سايت يعني همان پوشه www آپلود کنيد تا قابل دسترسي براي بينندگان باشد که معمولاً اين فايل بايد داراي يکي از اسم هاي زير باشد:

index.htm, index.html

در آخر هم مي توانيد از منوي File گزينه Disconnect يا دکمه مربوطه را در نوار ابزار بزنيد تا ارتباط با وب سرور قطع شود.


FTP tutorial

FTP چيست؟

به تلاش : | iranw3.com
آدرس ایمیل : | webmaster@iranw3.com
منبع : | اينترنت و راهنماي برنامه CuteFTP

FTP يکي از قديمي ترين پروتکل هاي اينترنت مي باشد که هنوز هم کاربرد زيادي دارد و در سال 1970 در اينترنت توسعه يافت. FTP مخفف File Transfer Protocol ميباشد که يک پروتکل استاندارد در TCP/IP است. مانند HTTP که محتواي وب را منتقل مي کنند يا SMTP که ايميل ها را منتقل مي کند FTP هم ساده ترين راه براي تبادل فايل از يک کامپيوتر به کامپيوتر ديگر مي باشد. يکي از کاربرد هاي FTP ، دانلود موزيک و برنامه هاي کاربردي از وب سايتها مي باشد. به خاطر استفاده اين پروتکل از يک پورت مجزا که پورت شماره 21 است عمل دانلود بسيار سريع انجام مي شود. مانند آدرسهاي وب سايتها، FTP هم آدرس مخصوص خود را دارد چون همانند يک وب سايت، اين پروتکل بر روي هارد ديسک کامپيوتر سرور فضاي مشخصي را اشغال مي کند. معمولاً اگر آدرس يک وب سايت مانند آدرس زير باشد:

http://www.domain.com

آدرس FTP آن سايت به اين صورت است:

ftp://ftp.domain.com

به دو طريق شما مي توانيد از اين پروتکل براي انتقال فايلها استفاده کنيد، يکي از راه مرورگر وب خود و ديگري بکارگرفتن نرم افزار مخصوص FTP که به آنها FTP Client مي گويند. اما براي دسترسي به محتواي دايرکتوري FTP نياز به مشخصه کاربري يعني UserID و کلمه رمز يعني Password داريد که در هر دو روش بايد ابتدا آنها را وارد کنيد و پس از تأييد به انتقال فايل بپردازيد. ورود به بعضي از دايرکتوري هاي FTP براي کليه کاربرها آزاد مي باشد و نيازي به وارد کردن مشخصات کاربري نيست که اصطلاحاً آنرا ورود بصورت گمنام يعني anonymous مي گويند که تنها با وارد کردن آدرس ايميل خود مي توانيد به آن دايرکتوري دسترسي پيدا کنيد. پس از ورود، شما مي توانيد براي انتقال فايلها از دستوراتي مانند copy paste استفاده کنيد تا فايلي را دانلود و يا از سيستم خود به آن کامپيوتر بفرستيد يعني Upload کنيد، البته اين را در نظر داشته باشيد که در بيشتر سايتها شما مجاز به دانلود هستيد نه آپلود مگر اينکه آن دايرکتوري متعلق به خود شما باشد تا سطح دسترسي شما اجازه به آپلود فايل هم بدهد.

دقت کنيد که آپلود کردن يک فايل بزرگ از طريق مرورگرها توصيه نمي شود چه از لحاظ امنيتي و چه از نظر سالم ماندن فايل که بهتر است در اين موارد از نرم افزارهاي مخصوص استفاده شود. اينگونه برنامه ها در اينترنت بسيار زياد هستند که بعضي از آنها رايگان بوده و بعضي ها را هم بايد خريداري کنيد. هر کدام از اين نرم افزارها داراي مزايا و معايبي مي باشند اما دو تا از آنها که بيشترين کاربرد را در بين کاربران دارند عبارتند از: CuteFTP محصول Globalscape و WS_FTP توليد Ipswitch . براي اطلاعات بيشتر و يا دانلود آنها مي توانيد به وب سايت هاي ذکر شده مراجعه کنيد.

يکي ديگر از کاربردهاي پروتکل FTP ، استفاده طراحان و مديران وب سايتها براي انتقال محتواي سايتها مي باشد که در حال حاضر اين افراد بيشترين استفاده را از FTP دارند. زماني که شما فضايي را براي ميزباني سايت خود از يک شرکت سرويس دهنده اينترنت ISP اجاره مي کنيد، به شما حداقل يک آدرس FTP مي دهند تا عمل انتقال فايلها را از کامپيوتر خود به وب سرور و بالعکس انجام دهيد که بهتر است براي امنيت و حفظ فايلها حتماً از يک نرم افزار در اين زمينه استفاده کنيد. به همين منظور قصد داريم، چگونگي استفاده و انتقال محتويات يک وب سايت از طريق برنامه CuteFTP را براي شما آموزش دهيم تا با بکارگيري اين نرم افزار بتوانيد به راحتي محتواي سايت خود را منتقل و فايلها را مديريت کرده و با موفقيت وب سايت خود را راه اندازي کنيد.


Plug-ins

Plug-ins چيست؟

به تلاش : | iranw3.com
آدرس ایمیل : | webmaster@iranw3.com
منبع : | Master VISUALLY™ HTML 4 and XHTML™ 1

plug-ins برنامه هاي خارج از مرورگرها هستند که براي افزايش کارآيي يک مرورگر به آن متصل مي شوند. اين برنامه ها از يکسري فايل ها پشتيباني مي کنند که در حالت عادي مرورگرها قادر به اجرا و نمايش آنها نيستند. چندين plug-in هستند که داراي محبوبيت خاصي مي باشند و مرتب اصلاح شده تا توانايي هاي بيشتري داشته باشند که به معرفي آنها مي پردازيم.

يکي از معروفترين آنها برنامه اتصالي Adobe Acrobat است که توسط آن مرورگرها قادر خواهند بود تا فايل هايي با فرمت PDF را باز کرده و نمايش دهند. يکي از ويژگيهاي اين برنامه اتصالي، نمايش دقيق قالب و آرايش محتواي آن فايل مطابق با فايل اصلي خودش ميباشد. اين برنامه اتصالي همراه با نصب يکي از برنامه هاي Adobe Acrobat در سيستم شما نصب خواهد شد اما اگر هنوز برنامه اي نصب نکرده ايد و يا خيالي هم براي نصب نداريد، مي توانيد فقط برنامه اتصالي مرورگر را از سايت زير دانلود کرده و نصب نماييد.

www.adobe.com

يکي ديگر از اين برنامه هاي اتصالي، برنامه اي است که قادر به پخش صوت و تصوير با فرمتي خاص است، بدين گونه که شما نيازي به صبر کردن براي دانلود آن فايل صوتي و يا تصويري نخواهيد داشت و همزمان با دانلود آن فايل مي توانيد به آن گوش داده و يا ببينيد. در حال حاضر دو نوع فرمت معروف به نامهاي RealAudio براي پخش صوت و RealVideo براي پخش تصوير وجود دارند که حتي با اينترنت dialup هم مي توانيد از آنها استفاده کنيد. اين فرمتها باعث جذب افرادي شده که علاقه خاص به گوش کردن اخبار دارند چون بيشتر کانالهاي خبري ، اخبار خود را با اين فرمت بر روي اينترنت پخش مي کنند. اگر شما برنامه مالتي مديا RealOne.player را نصب کرده ايد پس نيازي به برنامه اتصالي اين فرمتها نداريد ولي اگر هنوز اقدام به اينکار نکرده ايد مي توانيد برنامه اتصالي آنها را از آدرس زير تهيه کنيد.

www.real.com

plug-in ديگري هست که براي سيستم عامل مکينتاش ميباشد بنام QuickTime و براي فرمتي خاص از فايلهاي صوتي و تصويري ميباشد که اين فرمت مشابه فرمتهاي گفته شده در قسمت بالا است. البته برنامه اتصالي QuickTime براي سيستمهاي عامل ويندوز نيز وجود دارد تا کاربران اينگونه سيستمها هم بتوانند از اين فايلها در وب استفاده کنند. براي اطلاعات بيشتر به وب سايت زير مراجعه کنيد.

www.apple.com

برنامه اتصالي ديگري بنام VRML هست که مخفف Virtual Reality Modeling Language ميباشد که يک زبان مشابه HTML است و مي تواند يک دنياي سه بعدي مجازي بسازد. توسط برنامه اتصالي اين زبان مي توانيد اين دنياي سه بعدي را در مرورگر خود آورده و در آن بچرخيد. اين زبان plug-in هاي مختلفي دارد. براي دانستن از اين زبان مي توانيد به کنسرسيوم وب سه بعدي در آدرس زير رفته و اطلاعاتي را کسب کنيد.

www.vrml.org

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

www.macromedia.com

بعد از مراجعه به اين سايتها و نصب برنامه هاي اتصالي، مرورگر شما قادر به شناسايي اين فايلها و اجراي آنها خواهد بود. البته بعضي از plug-in ها همراه مرورگرها خواهند بود و نيازي به نصب مجدد نيست. اگر مرورگر شما به فايلي در وب برخورد کند که قادر به اجراي آن نباشد، پنجره اي باز کرده و از شما ميخواهد تا برنامه اتصالي مورد نظر را دانلود کنيد. اگر شما در سايتتان از برنامه هايي استفاده مي کنيد که نياز به plug-in دارد، حتماً درقسمتي از صفحه توضيحي بگذاريد تا کاربران از وجود آن باخبر شوند و لينک دانلود آن برنامه اتصالي هم بگذاريد تا دسترسي به آن آسانتر شود.