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

این ناسازگاری ممکن است به دلیل کامل نشدن بارگزاری صفحه ایجاد شده باشد یا به دلیل اینکه در هنگام طراحی Encoding متناسب با زبان فارسی انتخاب نشده باشد یا اصلاً در طراحی صفحه هیچگزینه ای برای Encoding صفحه در نظر گرفته نشده باشد.

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

• مرورگر اینترنت اکسپلورر در ویندوز (Microsoft Internet Explorer) :
  از منوی view گزینه Encoding را انتخاب کنید و گزینه utf-8 را کلیک کنید. در صورتی که در لیست اولیه کد پیجهای مختلف نتوانستید utf-8 را مشاهده کنید نشانگر ماوس خود را روی گزینه More نگهدارید و utf-8 را از بین کد پیجهای مختلف پیدا کرده و روی آن کلیک کنید. 
  در سایر مرورگر ها هم به همین روش باید عمل کنید فقط مسیر منو ها کمی تفاوت دارد. می توانید مسیر های زیر را دنبال کنید.
• مرورگر فایر فوکس : (Firefox)
  view --> Character Encoding --> unicode (utf-8)
  یا
  view --> Character Encoding --> More Encodings --> Unicode --> Unicode (utf-8)
• مرورگر اپرا : (Opera)
  view --> Encoding --> Unicode --> UTF-8

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

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

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

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

اگر بخواهیم عرض یک جدول را تغییر دهیم می توانیم از شناسه width استفاده کنیم. با اضافه کردن این شناسه به تگ جدول می توانیم مقدار عرض جدول را مشخص کنیم. این مقدار می تواند در مقیاس پیکسل باشد یا به صورت درصد. برای تغییر دادن ارتفاع جدول نیز میتوانیم از شناسه height استفاده کنیم. برای مثال اگر بخواهیم یک جدول با عرض 500 پیکسل و ارتفاع 50 پیکسل داشته باشیم می توانم به صورت زیر عمل کنیم:

در اینجا می بینید که برخلاف متن درون جدول که متن کوتاهی است عرض جدول نسبتاً زیاد است (همان 500 پیکسلی که برای آن تعریف کردیم):

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

اگر بخواهیم عرض یک جدول را تغییر دهیم می توانیم از شناسه width استفاده کنیم. با اضافه کردن این شناسه به تگ جدول می توانیم مقدار عرض جدول را مشخص کنیم. این مقدار می تواند در مقیاس پیکسل باشد یا به صورت درصد. برای تغییر دادن ارتفاع جدول نیز میتوانیم از شناسه height استفاده کنیم. برای مثال اگر بخواهیم یک جدول با عرض 500 پیکسل و ارتفاع 50 پیکسل داشته باشیم می توانم به صورت زیر عمل کنیم:

در اینجا می بینید که برخلاف متن درون جدول که متن کوتاهی است عرض جدول نسبتاً زیاد است (همان 500 پیکسلی که برای آن تعریف کردیم):

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

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

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

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

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

در اینجا می توانید کدی را که برای ساخت متن متحرک ستفاده می شود مشاهده کنید:

می خواهید ببینید چگونه کار می کند:

متن مورد نظر خود را اینجا بنویسید

شناسه "loop="infinte باعث می شود که متن تا هنگامی که صفحه باز است به حرکت خود ادامه دهد. شما می توانید به جای این شناسه از "loop="-1 هم استفاده کنید.

برای اینکه یک لینک را وادار کنیم که در یک صفحه جدید باز شود، باید این شناسه را به تگ لینک اضافه کنیم: "target="_blank 
تگ لینک به این صورت به نظر می رسد:

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

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

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

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

  ---

• "align="left : 
  این فرمان سمت قرار گرفتن خط افقی را مشخص می کند. شما می توانید خط را به صورت چپ چین، راست چین و در مرکز صفحه قرار دهید. گزینه پیش فرض این فرمان center است که خط را در مرکز صفحه قرار می دهد. البته زمانی این وضعیت مشخص می شود که عرض خط افقی کمتر از عرض صفحه باشد.

  ---

• "size="3 : 
  این فرمان اندازه خط را مشخص می کند. اندازه پیش فرض برای خط 2 است.

  ---

• "noshade="noshade : 
  این فرمان خط را به صورت تو پر نشان می دهد.

در اینجا هر کدام از فرمانهای بالا را با یک مثال بیشتر توضیح می دهیم.

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

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

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

  ---

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

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

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

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

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

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

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

لیستهای کشویی (Select)

برای ساختن لیستهای کشویی که به کاربران اجازه می دهد یک یا چند گزینه موجود در لیستی را در یک فرم انتخاب کند باید از تگ<select> استفاده کنیم. گزینه های موجود در این تگ بین <option> و <option/> قرار می گردند و پس از گزینه ها تگ پایانی لیست به صورت <select/> نوشته می شود.

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

در این قسمت می توانید لیست مربوط به کد بالا را ملاحظه کنید:

کادر های متنی با بیش از یک سطر (Text Area)

از یک Text Area کاربران می توانند برای وارد کردن تعداد نامحدودی کاراکتر در بیش از یک سطر وارد کنند. بهتر است تا برای متنهای طولانی به جای Text Box از Text Area استفاده کنید تا کاربران راحتتر بتوانند متن خود را مشاهده کنند و یا آنرا ویرایش کنند.

برای ایجاد Text Area باید از تگ <textarea> استفاده کنید. این تگ بر خلاف تگ <input> یک تگ پایانی دارد و باید به وسیله تگ<textarea/> بسته شود. در مثال زیر می توانید کد مربوط به یک Text Area را مشاهده کنید:

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

همانطور که مشاهده می کنید متنی که بین تگ ابتدایی و تگ پایانی یک Text Area نوشته شود به صورت پیش فرض در کادر Text Area نمایش داده می شود.

کادر کلمه عبور (Password)

احتمالاً تا به حال به سایتی برخورد کرده اید که برای ورود به آن نیاز به کلمه عبور داشته باشید. شما مسلماً تمایل ندارید وقتی کلمه عبور خود را وارد می کنید کلمه عبور شما نمایش داده شود و دیگران قادر به مشاهده آن باشند. به همین دلیل معمولاً سایتها برای اینکه کلمه عبور کاربران در هنگام پر کردن فرم نمایش داده نشود از نوعی کادر ورودی استفاده می کنند که کاملاً شبیه کادری است که برای وارد کردن متن استفاده می شود (Text Box) با این تفاوت که به جای نمایش کاراکترهای کلمه عبور به جای هر کاراکتر از یک نقطه یا ستاره (بستگی به مرورگر دارد) نمایش می دهد.

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

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

کادر کلمه عبور (Password)

احتمالاً تا به حال به سایتی برخورد کرده اید که برای ورود به آن نیاز به کلمه عبور داشته باشید. شما مسلماً تمایل ندارید وقتی کلمه عبور خود را وارد می کنید کلمه عبور شما نمایش داده شود و دیگران قادر به مشاهده آن باشند. به همین دلیل معمولاً سایتها برای اینکه کلمه عبور کاربران در هنگام پر کردن فرم نمایش داده نشود از نوعی کادر ورودی استفاده می کنند که کاملاً شبیه کادری است که برای وارد کردن متن استفاده می شود (Text Box) با این تفاوت که به جای نمایش کاراکترهای کلمه عبور به جای هر کاراکتر از یک نقطه یا ستاره (بستگی به مرورگر دارد) نمایش می دهد.

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

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

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

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

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

چک باکس (checkbox)

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

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

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

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

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

جعبه ورودی متن (Text Box)

از این نوع ورودی برای ایجاد یک کادر یک سطری برای ورود متن استفاده می شود. برای ساختن این کادر باید از شناسه "type="text در تگ استفاده کنیم. در صورت تعریف نشدن شناسه type در مرورگرهای جدید این شناسه به صورت پیش فرض به کار می رود و یک Text Box را نمایش می دهد اما برخی از مرورگرهای قدیمی در صورتی که از ایسن شناسه استفاده نشود این کادر را نمایش نمی دهند.

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

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

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

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

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

در بخش اخیر ما در مورد اینکه چگونه یک Subject را برای پیام خود از طریق یک لینک E-mail مشخص کنیم بحث کردیم. ما این کار را با استفاده از این عبارت
=subject? و نوشتن موضوعی که می خواهیم در بخش subject در ایمیل نوشته شود بعد از عبارت مذکور انجام می دهیم. برای مثال لینک زیر برای ارسال پیام با موضوع Learn HTML به کار می رود:

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

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

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

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

 Back to the Top

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

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

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

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

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

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

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

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

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

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

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

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

شما می توانید اندازه عکس را تغییر دهید. این کار را می توانید با افزودن شناسه های width (برای عرض عکس) و height (برای ارتفاع عکس) به تگ img انجام دهید. به یک مثال در این مورد توجه کنید:

فرض کنیم یک عکس با نام learn_html.gif داریم و می خواهیم آنرا کوچکتر از اندازه اصلی آن نشان دهیم. تنها چیزی که باید بدانیم اندازه اصلی عکس است. اندازه عرض و ارتفاع عکس معمولاً با مقیاس پیکسل سنجیده میشود. عکس ما 137 پیکسل عرض و 77 پیکسل ارتفاع دارد. در زیر می توانید عکس را با اندازه های واقعی ببینید.

حالا می خواهیم شناسه های width و height را در تگ عکس وارد کنیم. تگ ما به این صورت در می آید:

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

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

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

اگر بخواهید رنگ لینکها را در صفحه خود تغییر دهید مانند تغییر رنگ پیش فرض متن باید تگ BODY را پیدا کنید. در تگ BODY به دنبال شناسه link بگردید. مثلاً ممکن است تگ BODY به این صورت باشد:

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

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

برای مشاهده جدول رنگها و معادل هگزادسیمال آنها اینجا را کلیک کنید.

مثلاً برای تغییر رنگ لینکها به زرد می توانیم مانند زیر عمل کنیم:

1- استفاده از نام رنگ:

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

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

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