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

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

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

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

یکی از امکاناتی که در HTML 4.0 به وجود آمد استفاده از event در عناصر HTML صفحه بود. یک نمونه از این رویدادها (event) اجرا شدن یک فرمان جاوا اسکرپت به هنگام کلیک کردن روی عناصر HTML در صفحه است.

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

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

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

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

آیا شما می خواهید یک جدول (table) در صفحه خود ایجاد کنید؟ برای ایجاد یک جدول باید از این تگ استفاده کنید:

برای ایجاد یک جدول باید تگ ابتدایی آن یعنی <table> را در جایی که می خواهید جدول وارد شود، قرار دهید. و در پایان جدول هم از تگ پایانی آن یعنی <table/> استفاده کنید.
برای افزودن محتویات به جدول باید از تگ <td> استفاده کنید. نام این تگ مخفف table data است. محتویات جدول چیزهایی هستند که شما بعد از این تگ قرار می دهید. در پایان هم باید پس از محتویات جدول از تگ پایانی <td/>قبل از تگ پایانی جدول استفاده کنید. مانند زیر:

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

اگر تمایل دارید شکل فونت متن خود را در یک صفحه تغییر دهید، می توانید این کار را با استفاده از تگ font انجام دهید.( این روش تأثیری بر تصاویر موجود در صفحه شما ندارد).

با افزودن این شناسه: " "=face به تگ فونت می توانید شکل آنرا تغییر دهید. به یک مثال توجه کنید:

این هم متن نوشته شده با فونت Times New Roman:

This line is Writen by Times New Roman font face

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

1. افرادی که صفحه شما را تماشا می کنند برای اینکه بتوانند صفحه را با فونتی که شما برای آن تنظیم کرده اید ببینند باید حداقل مرورگر اینترنت اکسپلورر یا نت اسکیپ 3 به بالا داشته باشند.(زیاد نگران این قسمت نباشید، اکنون تقریباً تمامی کاربران مرورگرهای جدیدتری دارند)

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

اگر صفحه شما جابجا شد یا به هر دلیلی خواستید مسیر بازدیدکنندگان خود را تغییر دهید می توانید از تگ meta refresh برای بردن بازدید کنندگان به صفحه مورد نظرتان استفاده کنید. البته در استفاده از این روش برای تغییر مسیر بازدید کنندگان، مخصوصاً در صفحه اصلی سایت خود باید به این نکته توجه کنید که برخی از موتورهای جستجو به دنبال تگهای meta refresh می گردند که بازدید کنندگان را از یک صفحه که با کلمات کلیدی پر شده است، به صفحه واقعی می برند که ممکن است در آن از کلمات کلیدی استفاده نشده باشد و در نتیجه با موضوع مورد نظر بازدید کننده مرتبط نباشد. بنابراین تغییر مسیر بازدید کننده از یک صفحه با سرعت زیاد (معمولاً کمتر از 10 ثانیه) ممکن است باعث شود این صفحه در لیست موتور جستجو قرار نگیرد. البته اگر این صفحه صفحه اصلی سایت شما نباشد ممکن است نخواهید در لیست موتور جستجو قرار گیرد.

بسیار خوب، کد زیر را می توان برای تغییر مسیر بازدید کننده استفاده کرد:

برای مشاهده نتیجه، لینک زیر را کلیک کنید:

ورود به صفحه آزمایشی

تگهای META مورد استفاده موتورهای جستجو برای بررسی و شاخص گذاری صفحات قرار می گیرند. مخصوصاً اگر صفحه شما فریم (قاب) داشته باشد. این تگها باید در قسمت HEAD صفحه شما قرار گیرند.

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

• شناسه name :
  مشخص کننده نوع متا تگی است که شما قصد استفاده از آن را دارید.

  ---

• شناسه content :
  تعیین کننده محتویات متا تگ برای موتورهای جستجو است.

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

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

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

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

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

• رویدادهای مربوط به صفحه کلید

سه رویداد در این دسته قرار می گیرد:

• onkeydown : 
  در هنگام فشار دادن دکمه صفحه کلید اسکرپت تعریف شده در مقدار این شناسه اجرا می شود.

  ---

• onkeypress :
  وقتی که یک دکمه در صفحه کلید فشرده می شود و رها می شود اسکرپت موجود در این شناسه اجرا می شود.

  ---

• onkeyup :
  در هنگام رها شدن یک کلید این شناسه فعال می شود.

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

<base>, <br>, <bdo>, <frame>, <frameset>, <iframe>, <html>, <head>, <meta>, <param>, <script>, <style>, <title>

اگر در صفحه بخواهیم از بازدید کننده اطلاعاتی را دریافت کنیم باید از فرم برای این کار استفاده کنیم. فرم برای انتقال اطلاعاتی که توسط کاربر وارد شده اند به یک آدرس مشخص استفاده می شود. هر فرم می تواند شامل اجزایی مانند کادر ورودی متن (Text Field)، جعبه مربوط به ورود متن (Text Area)، دکمه های رادیویی (Radio Button)، منوهای کشویی، چک باکس و ... باشد.

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

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

در اینجا لیستی از شناسه های پر استفاده در تگ فرم آورده شده است :

برای ایجاد یک لینک که بیننده با آن بتواند به شما ایمیل بفرستد باید ز تگ استاندارد لینک استفاده کنیم. اما تفاوت این لینک با لینک به یک صفحه در آدرسی است که به عنوان مقصد لینک نوشته می شود. برای اینکه مرورگر را مجبور کنیم لینک را به عنوان یک لینک ایمیل بشناسد، باید از این عبارت :mailto به جای //:http در آغاز آدرس استفاده کنیم و بعد از آن آدرس ایمیل را بنویسیم. به یک مثال توجه کنید:

لینکی که در صفحه مشاهده خواهید کرد به صورت زیر است که برای فرستادن ایمیل به آدرس example@example.com ساخته شده است. آنرا امتحان کنید:

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

 Back to the Top

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

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

برای این کار به بالای قسمت BODY در متن HTML خود بروید ( درست بعد از تگ BODY )

اکنون این تگ را تایپ کنید:

برای اینکه بتوانیم یک متن را در کنار یک عکس بنویسیم باید در تگ عکس از یکی این فرمانها استفاده کنیم (در صورتی که از این فرمانها استفاده نشود متن و عکس در دو سطر نمایش داده می شوند):

تگ عکس با استفاده از این فرمانها به صورت زیر در می آید:

عکس مورد نظر در صفحه به این صورت نمایش داده می شود:

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

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

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

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

برای اینکه بتوانیم یک متن را در کنار یک عکس بنویسیم باید در تگ عکس از یکی این فرمانها استفاده کنیم (در صورتی که از این فرمانها استفاده نشود متن و عکس در دو سطر نمایش داده می شوند):

تگ عکس با استفاده از این فرمانها به صورت زیر در می آید:

عکس مورد نظر در صفحه به این صورت نمایش داده می شود:

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

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

اکنون تگ BODY شما باید به این صورت باشد (اگر فرمانهای دیگری به آن اضافه نکرده باشید):

برای تغییر رنگ پیش فرض متن در صفحه باید از تگ <BODY> استفاده کنید. شما باید دنبال " "=text بعد از تگ BODY بگردید. مانند این:

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

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