1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

آموزش HTML

شروع موضوع توسط (̅(َ_̅_̅(َ)ڪے ‏16/9/11 در انجمن Html

  1. Sert oğul کاربر ارزشمند

    تاریخ عضویت:
    ‏12/11/10
    ارسال ها:
    17,685
    تشکر شده:
    6,409
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    حرفه:
    IOG
    پاسخ : آموزش HTML

    [TABLE]
    [TR]
    [TD]آموزش ایجاد فریم های داخلی
    [/TD]
    [/TR]
    [TR]
    [TD="colspan: 3"] به لطف HTML 4.0 ما توانایی ایجاد فریمها را در بدنه صفحات پیدا کردیم. با استفاده از این نوع فریمها (inline frame) می توانیم صفحه خود را به صورت عادی طراحی کنیم و در هر کجای آن که مایل بودیم دریچه ای به یک صفحه دیگر بسازیم.

    Your browser does not support inline frames or is currently configured not to display inline frames. در قسمتهای قبل با طرز ساختن فریمها و خواص آنها آشنا شدیم. در این قسمت می خواهیم به ساختن فریمهای درونی بپردازیم. یک نمونه از این فریمها را می توانید در سمت راست این نوشته ببینید.
    احتمالاً در بسیاری از صفحات نمونه هایی از این نوع فریم را دیده اید. اگر به ساختن آنها علاقه مند شده اید به سراغ تگ سازنده این فریمها می رویم:
    با قرار دادن این تگ در کد HTML صفحه در جایی که می خواهید فریم قرار بگیرد می توانید یک فریم اینلاین بسازید:
    <iframe src="../examples/html/page1.htm" width="400" height="250" frameborder="1"></iframe>
    با این تگ شما می توانید یک فریم در صفحه خود بسازید. همانطور که می بینید ما در صفحه اصلی از تگ body استفاده کردیم و از تگ frameset هم استفاده نشد.
    در اینجا به توضیح شناسه های قابل استفاده در این تگ می پردازیم:

    • <iframe> :
      این تگ آغازی یک فریم اینلاین است. [HR][/HR]
    • "src="frame_1.htm :
      این قسمت مشخص کننده آدرس صفحه ای است که می خواهیم در فریم نمایش داده شود. [HR][/HR]
    • "width="350 :
      مشخص کننده مقدار عرض فریم در مقیاس پیکسل است. البته می توانیم از مقیاس درصد هم استفاده کنیم. [HR][/HR]
    • "height="250 :
      مشخص کننده ارتفاع فریم در صفحه است. مقیاس آن می تواند پیکسل یا درصد باشد. [HR][/HR]
    • "frameborder="1 :
      مشخص کننده ضخامت لبه های فریم است.
    در مورد لینکها هم رفتار این فریمها مانند بقیه فریمها است. می توانیم به آنها یک نام بدهیم و از شناسه target در لینکها استفاده کنیم. به یک مثال توجه کنید:
    در ابتدا به تگ فریم خود یک نام نسبت می دهیم. مانند زیر:
    <iframe src="../examples/html/page1.htm" width="400" height="250" frameborder="1" name="inlineframe1"></iframe>
    در مرحله بعد به تگ لینک مورد نظر شناسه target را اضافه می کنیم. مانند زیر:
    <a href="index.html" target="inlineframe1">این صفحه در فریم نمایش داده خواهد شد.</a>
    حالا می توانید لینک زیر را کلیک کنید. خواهید دید که لینک در فریم همین صفحه باز خواهد شد:
    مانند بقیه فریمها می توانید از شناسه "scrolling="no در تگ فریم استفاده کنید تا در فریم اسکرول بار نداشته باشید.

    [/TD]
    [/TR]
    [/TABLE]
     
  2. Sert oğul کاربر ارزشمند

    تاریخ عضویت:
    ‏12/11/10
    ارسال ها:
    17,685
    تشکر شده:
    6,409
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    حرفه:
    IOG
    پاسخ : آموزش HTML

    [TABLE]
    [TR]
    [TD]رویدادهای مربوط به صفحه کلید و ماوس در HTML
    [/TD]
    [/TR]
    [TR]
    [TD="colspan: 3"] در این قسمت به توضیح بخش دوم رویدادهای HTML که مربوط به صفحه کلید و ماوس می شود می پردازیم.

    [HR][/HR]
    • [h=2]رویدادهای مربوط به صفحه کلید[/h]
    سه رویداد در این دسته قرار می گیرد:

    • onkeydown :
      در هنگام فشار دادن دکمه صفحه کلید اسکرپت تعریف شده در مقدار این شناسه اجرا می شود. [HR][/HR]
    • onkeypress :
      وقتی که یک دکمه در صفحه کلید فشرده می شود و رها می شود اسکرپت موجود در این شناسه اجرا می شود. [HR][/HR]
    • onkeyup :
      در هنگام رها شدن یک کلید این شناسه فعال می شود.
    رویدادهای مربوط به صفحه کلید نباید در تگهای زیر استفاده شود:
    <base>, <br>, <bdo>, <frame>, <frameset>, <iframe>, <html>, <head>, <meta>, <param>, <script>, <style>, <title>

    کدی را که در نوشتن این مثال از آن استفاده شده است می توانید در اینجا مشاهده کنید:
    <input value="onkeypress" type="text" onKeyPress="msg('onkeypress')" />
    <input value="onkeypress" type="text" onKeyUp="msg('onkeyup')" />
    <input value="onkeypress" type="text" onKeyDown="msg('onkeydown')" />

    [HR][/HR]
    • [h=2]رویدادهای مربوط به ماوس[/h]
    هفت رویداد در این دسته قرار دارند:

    • onclick :
      در هنگام کلیک کردن بر روی قسمتی که این شناسه را دارد اجرا می شود. [HR][/HR]
    • ondblclick :
      مقدار موجود در این شناسه به هنگام دابل کلیک بر روی قسمتی که این شناسه در آن به کار رفته اجرا می شود. [HR][/HR]
    • onmousedown :
      وقتی که کلید ماوس فشرده می شود این شناسه عمل می کند. [HR][/HR]
    • onmousemove :
      وقتی که ماوس را در صفحه حرکت می دهید این رویداد اجرا می شود. [HR][/HR]
    • onmouseover :
      وقتی ماوس روی قسمتی که حاوی این شناسه است قرار می گیرد این رویداد اجرا می شود. [HR][/HR]
    • onmouseout :
      این رویداد وقتی که ماوس از روی قسمتی که حاوی این رویداد است خارج می شود اجرا می شود. [HR][/HR]
    • onmouseup :
      وقتی که کلید ماوس رها می شود این رویداد اجرا می شود.
    رویدادهای مربوط به ماوس هم مانند رویدادهای صفحه کلید نباید در تگهای زیر استفاده شوند:
    <base>, <br>, <bdo>, <frame>, <frameset>, <iframe>, <html>, <head>, <meta>, <param>, <script>, <style>, <title>



    می توانید کدی را که در نوشتن این مثال از آن در سلولهایی که حاوی رویدادها هستند استفاده شده است در اینجا مشاهده کنید:
    <td onClick="msg('onClick')">در این قسمت کلیک کنید تا رویداد onClick اجرا شود.</td>

    <td onDblClick="msg('onDblClick')">در این قسمت دابل کلیک کنید تا رویداد onDblClick اجرا شود.</td>

    <td onMouseDown="msg('onMouseDown')">در این قسمت کلید ماوس را پایین نگهدارید تا رویداد onMouseDown اجرا شود.</td>

    <td onMouseMove="msg('onMouseMove')">روی این قسمت ماوس خود را حرکت دهید تا رویداد onMouseMove اجرا شود.</td>

    <td onMouseOver="msg('onMouseOver')">ماوس خود را روی این قسمت قرار دهید تا رویداد onMouseOver اجرا شود.</td>

    <td onMouseOut="msg('onMouseOut')">وقتی ماوس از روی این قسمت کنار رود رویداد onMouseOut اجرا می شود.</td>

    <td onMouseUp="msg('onMouseUp')">وقتی کلید ماوس روی این قسمت رها شود رویداد onMouseUp اجرا می شود.</td>
    در این مثال msg('متن پیام') تابع جاوا اسکرپتی است که در صفحه مثال تعریف شده است. به جای آن می توانید از کدهای دیگری استفاده کنید.

    [/TD]
    [/TR]
    [/TABLE]
     
  3. Sert oğul کاربر ارزشمند

    تاریخ عضویت:
    ‏12/11/10
    ارسال ها:
    17,685
    تشکر شده:
    6,409
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    حرفه:
    IOG
    پاسخ : آموزش HTML

    [TABLE]
    [TR]
    [TD]تنظیم پیج کد مورد استفاده در صفحه
    [/TD]
    [/TR]
    [TR]
    [TD="colspan: 3"] حتماً تا به حال با صفحاتی مواجه شده اید که به زبان فارسی نوشته شده اند، اما وقتی از آنها بازدید می کنید با کلماتی به هم ریخته و غیر قابل فهم مواجه می شوید. دلیل این مشکل ناسازگار بودن 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
    البته اگر به این روش مشکل صفحه مورد نظر شما حل نشد به دلیل این است که صفحه با پیج کد دیگری نوشته شده است. می توانید گزینه هایی مثل (Arabic(Windows رانیز امتحان کنید.
    برای اینکه یک صفحه فارسی طراحی کنیم دو چیز را باید مد نظر قرار دهیم:
    [h=3]راست به چپ بودن صفحه[/h] برای اینکه یک صفحه راست به چپ طراحی کنیم می توانیم به چند طریق عمل کنیم.

    • استفاده از شناسه "dir="rtl در تگ <html>
      از این شناسه در بسیاری از تگهای HTML می توان استفاده نمود. در صورتی که صفحه ای راست به چپ باشد و بخواهیم از قسمتهای چپ به راست نیز در آن صفحه استفاده کنیم می توانیم از شناسه "dir="ltr استفاده کنیم.
    • استفاده از CSS برای تعیین direction صفحه
      مثلاً استفاده از یک استایل خارجی یا در بخش HEAD متن یا استفاده از شناسه "style="direction: rtl در تگهایی که می خواهیم به صورت راست به چپ نمایش داده شود
    [h=3]تنظیم Encoding در هنگام طراحی صفحه[/h] برای تنظیم Encoding صفحه باید از یک متاتگ در بخش HEAD متن استفاده کنیم. این متاتگ برای کد پیج utf-8 که بیشترین سازگازی را با صفحات فارسی دارد به صورت زیر است:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> اگر در طراحی صفحه ای از این متاتگ استفاده شود کد پیج utf-8 در مرورگر به صورت خودکار برای آن صفحه اعمال می شود.

    [/TD]
    [/TR]
    [/TABLE]