امروز با در خواست یکی از بازدید کنندگان در مورد خاصیت float و جاوا اسکرپت صحبت میکنیم. احتمالاً با خاصیت float در CSS آشنایی دارید. این خاصیت به ویژه وقتی مورد استفاده قرار میگیرد که طراح قصد داشته باشد بدون استفاده از جدولها چهارچوب صفحه را طراحی کند.

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

برای اختصاص دادن یک ویژگی CSS به المنتهای HTML از شیء style استفاده می شود. اما این نکته را باید در نظر داشته باشیم که float از کلمات کلیدی رزرو شده در جاوا اسکرپت است. به همین دلیل نمیتوانیم از متد style.float برای این منظور استفاده کنیم.

برای جلوگیری از تداخل بین float مورد استفاده در CSS و کلمه کلیدی float در جاوا اسکرپت به منظور اختصاص این ویژگی به المنتهای HTML از متد cssFloat استفاده میکنیم. برای درک بهتر میتوانید به مثال زیر در دو حالت قبل و بعد از اختصاص این ویژگی با به المنت توجه کنید:

در جاوا اسکرپت این امکان وجود دارد که متنی را نوشته و در صفحه نمایش بدهیم. متن مورد نظر را می توانیم قالب بندی کنیم و از تگهای HTML نیز در آن استافده کنیم. برای این کار از فرمان ()document.write استفاده می کنیم که یک فرمان جاوا اسکرپت مخصوص چاپ کردن خروجی در صفحه است. روش کار به صورت زیر است :

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

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

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

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

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

این فرمان هشدار است:

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

آنرا امتحان کنید. فقط ماوس خود را روی آن قرار دهید:

ماوس خود را روی این لینک قرار دهید

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

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

برای کار با لینکها در CSS می توانیم از مشخصات یک لینک را به چهار بخش تقسیم کنیم که در زیر می توانید آنها را مشاهده کنید:

• a:link و a 
  این مشخصه ها نحوه نمایش لینکهایی را که در صفحه وجود دارند و هنوز روی آنها کلیک نشده است تنظیم می کنند.
• a:hover
  این مشخصه وضعیت لینک را وقتی که نشانگر ماوس روی آن قرار دارن تنظیم می کند.
• a:active
  این قسمت مشخص کننده وضعیت لینکی است که بر روی آن کلیک می شود.
• a:visited
  این مشخصه برای لینکهایی که در بازدیدهای قبلی مورد استفاده قرار گرفته اند استفاده می شود.

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

با استفاده از استایل این امکان وجود دارد که شکل نشانگر ماوس را وقتی روی قسمت مشخصی از صفحه قرار می گیرد تغییر دهیم. به این منظور می توانیم از ویژگی زیر در استایل مربوط به تگ مورد نظر استفاده کنیم:

برای مثال فرض کنید می خواهیم وقتی نشانگر ماوس روی یک قسمت متن قرار می گیرد به شکل ساعت شنی در آید. می توانیم به صورت زیر عمل کنیم (ما برای مشخص شدن متن از رنگ قرمز در تگ span استفاده کرده ایم.):

نتیجه را می توانید اینجا مشاهده کنید:

اگر بخواهید وقتی ماوس کاربر روی یک قسمت مشخص از صفحه مثلاً جدولها قرار می گیرد شکل خاصی داشته باشد می توانید در بخش HEAD صفحه این ویژگی را برای جدول تعریف کنید تا در همه جدولهای صفحه به کار گرفته شود. از class و id هم می توانید استفاده کنید. روش ساده تر هم استفاده از شناسه style در تگهای HTML است.

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

color

از ویژگی color برای تغییر رنگ متن قسمتهای مختلف صفحه استفاده می شود. برای مثال می توانید رنگ متن یک جدول را تغییر دهیم و یا قسمتی از متن صفحه را که با تگ SPAN مشخص کرده ایم با رنگ متفاوتی با بقیه متن نمایش دهیم. این تگ از آن جهت که کاربرد تگ <FONT> و در نتیجه شناسه color که در تگ فونت استفاده می شود، در HTML4 در حال محدود شدن است اهمیت بیشتری پیدا می کند.

البته در قسمتهای قبلی هم از این ویژگی استفاده کرده ایم اما در باره آن توضیحی داده نشده است.

مانند COLOR در تگ FONT رنگها در این ویژگی به دو صورت تعیین می شوند. شکل کلی این ویژگی به صورت زیر است:

اگر می خواهید از رنگهای معمولی که با نام شناخته می شوند استفاده کنید کافی است تا نام رنگ مورد نظر خود را در این ویژگی استفاده کنید. این روش ساده تر است ولی انعطاف پذیری کمتری هم دارد چون تنها می توانید رنگ مورد نظر خود را از بین تعداد اندکی نام رنگ انتخاب کنید.

در این قسمت به روش تنظیم فونت متن با استفاده از استایل می پردازیم. بسیاری از اعمالی را که قبلاً با تگ <font> انجام می دادیم می توانیم با استایل انجام دهیم.

font-family

ویژگی font-family مشخص می کند که متن با چه فونتی باید نشان داده شود. این ویژگی در حقیقت جانشین شناسه face که در تگ font استفاده می شود است. گزینه پیش فرض برای فونت ممکن است در مرورگرهای مختلف تفاوت داشته باشد، اما معمولاً Times New Roman است.

در مثال زیر از ویژگی font-family برای تغییر فونت متن داخل یک div به Arial استفاده می کنیم:

نتیجه را به صورت زیر مشاهده می کنید:

position

ویژگی position به ما اجازه می دهد تا تعیین کنیم که آیا می خواهیم موقعیت یک عنصر در صفحه مشخص شود یا نه. اگر می خواهیم آن عنصر موقعیت مشخصی داشته باشد موقعیت عنصر را در صفحه تعیین می کند. چندین مقدار را می توان برای این ویژگی قرار داد. در اینجا می توانید این مقادیر را با کمی توضیح در مورد هر کدام ببینید:

• static : 
  این مقدار پیش فرضی است که در صورت تعریف نشدن position در صفحه استفاده می شود. با این مقدار اجزا در همان جایی که کد آنها را می نویسید دیده می شوند.

  ---

• absolute : 
  این مقدار به ما اجازه می دهد تا یک عنصر از صفحه را در هر موقعیتی نسبت به بالا، راست، پایین یا چپ صفحه که بخواهیم نمایش دهیم.

  ---

• fixed : 
  این گزینه به ما اجازه می دهد تا موقعیت یک عنصر صفحه را در پنجره مرورگر مشخص کنیم. در صورتی که برای یک عنصر از این ویژگی استفاده کنیم، موقعیت آن عنصر حتی در صورتی که به بالا و پایین صفحه برویم یا اندازه پنجره مرورگر را تغییر دهیم به همان صورت قبلی باقی می ماند. البته اینترنت اکسپلورر در ویندوز از این ویژگی پشتیبانی نمی کند ولی اینترنت اکسپلورر در مکینتاش همچنین مرورگرهای نت اسکیپ از این ویژگی پشتیبانی می کنند.

position

ویژگی position به ما اجازه می دهد تا تعیین کنیم که آیا می خواهیم موقعیت یک عنصر در صفحه مشخص شود یا نه. اگر می خواهیم آن عنصر موقعیت مشخصی داشته باشد موقعیت عنصر را در صفحه تعیین می کند. چندین مقدار را می توان برای این ویژگی قرار داد. در اینجا می توانید این مقادیر را با کمی توضیح در مورد هر کدام ببینید:

• static : 
  این مقدار پیش فرضی است که در صورت تعریف نشدن position در صفحه استفاده می شود. با این مقدار اجزا در همان جایی که کد آنها را می نویسید دیده می شوند.

  ---

• absolute : 
  این مقدار به ما اجازه می دهد تا یک عنصر از صفحه را در هر موقعیتی نسبت به بالا، راست، پایین یا چپ صفحه که بخواهیم نمایش دهیم.

  ---

• fixed : 
  این گزینه به ما اجازه می دهد تا موقعیت یک عنصر صفحه را در پنجره مرورگر مشخص کنیم. در صورتی که برای یک عنصر از این ویژگی استفاده کنیم، موقعیت آن عنصر حتی در صورتی که به بالا و پایین صفحه برویم یا اندازه پنجره مرورگر را تغییر دهیم به همان صورت قبلی باقی می ماند. البته اینترنت اکسپلورر در ویندوز از این ویژگی پشتیبانی نمی کند ولی اینترنت اکسپلورر در مکینتاش همچنین مرورگرهای نت اسکیپ از این ویژگی پشتیبانی می کنند.

حاشیه ها

margin-left

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

همانطور که می بینید کد بالا یک DIV را با کادر مضاعف و 200 پیکسل حاشیه از چپ نشان می دهد:

margin-right

این گزینه هم مانند گزینه بالا عمل می کند با این تفاوت که مقدار حاشیه را از سمت راست تعیین می کند:

همانطور که می بینید کد بالا یک DIV را با کادر مضاعف و 200 پیکسل حاشیه از راست نشان می دهد:

کادر (Boder)

border-style

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

1. none
   با استفاده از این مقدار تعیین می کنیم که نمی خواهیم کادر داشته باشیم. در صورتی که مقداری غیر از none تعیین شود کادر خواهیم داشت.
    
2. solid
     
   This DIV have a solid border
   
   
3. dashed
     
   This DIV have a dashed border
   
   

ساده ترین راه برای افزودن استایل به یک صفحه استفاده از شناسه style در تگهای HTML است.
برای افزودن استایل به یک تگ باید عبارت " "=style را وارد تگ مربوطه کنیم و ویژگیهای مورد نیاز خود را بین دو دابل کوت ( " ) وارد می کنیم. مثلاً فرض کنید می خواهیم به یک تگ DIV استایل اضافه کنیم. در این صورت تگ DIV به صورت زیر در می آید.

برای نمونه وقتی بخواهیم متن داخل یک DIV به رنگ سبز نمایش داده شود می توانیم به صورت زیر تگ DIV را بنویسیم:

توجه کنید که بین ویژگی color و رنگ سبز ( green ) از علامت دو نقطه ( : ) استفاده شده نه از علامت مساوی که در تگهای HTML استفاده می شود. همچنین لازم نیست مقادیر مورد نظر را بین علامت های نقل قول ( " ) قرار دهیم. می توانید نتیجه به کارگیری کد بالا را در سطر زیر مشاهده کنید:

• سلکتور کلاس

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

در مرحله بعد باید برای هر پاراگرافی که می خواهیم به رنگ مشکی باشد از شناسه "class="black در تگ <p> استفاده کنیم و برای پاراگراف قرمز از شناسه "class="red. البته نام کلاسها اختیاری است ولی بهتر است آنها را طوری انتخاب کنید که مفهوم داشته باشند تا وقتی که حجم استایل شما بیشتر شد به گنگ نباشد. در مثال زیر می توانید کد مربوط به نوشتن دو پاراگراف بالا را در متن HTML ملاحظه کنید:

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

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

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

این هم جدول به دست آمده:

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

در ابتدا به اولین روش می پردازیم:

فرض کنید می خواهیم یک فایل صوتی با نام example.mid را در صفحه قرار دهیم. در صورتی که فایل در همان پوشه صفحه قرار داشته باشد می توانیم به این صورت عمل کنیم:

به این طریق می توان یک لینک به یک فایل موزیک ایجاد کرد. در این مثال ما از یک فایل MIDI استفاده کردیم، همین کار را می توان با فایلهایی با پسوند، wav و aud و اغلب فرمتهای صوتی انجام داد. کاربر پس از باز شدن صفحه لینکی مشابه زیر را خواهد دید که با کلیک کردن بر روی آن دانلود فایل موزیک شروع می شود.

متن لینک موزیک

دکمه ارسال فرم (Submit)

برای ساختن دکمه ارسال فرم باید از تگ <input> استفاده کنیم. برای این کار باید از submit به عنوان مقدار شناسه typeاستفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن دکمه ارسال فرم آورده شده است:

در اینجا می توانید دکمه ارسال فرم ایجاد شده را مشاهده کنید البته چون این دکمه در تگ <form> قرار ندارد با کلیک کردن بر روی آن اتفاقی رخ نمی دهد اما اگر این دکمه در تگ فرم قرار داشته باشد با کلیک کردن بر روی آن اطلاعات وارد شده در فرم به صفحه action ارسال می شوند.

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

1. چگونه یک لینک بسازیم.
2. چگونه یک عکس را به صفحه اضافه کنیم.

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

• اگر بخواهیم یک عکس را به صفحه اضافه کنیم باید از این تگ استفاده کنیم: