سبد (0)

html

  • اعلان <DOCTYPE!> در ابتدای صفحه، به مرورگر کمک می کند تا صفحه وب را به درستی نمایش دهد.


    اعلان <DOCTYPE!>

    Wiki

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

    همچنین نسخه های متفاوت زیادی از HTML وجود دارد، و اگر مرورگر نسخه دقیق HTML استفاده شده در صفحه را بداند، می تواند 100% درست آنرا نمایش دهد.

    <DOCTYPE!> یک تگ HTML نیست بلکه یک اعلان است و به مرورگر می گوید چه نسخه HTMLی در صفحه استفاده شده است.

    در این آموزش از HTML5 استفاده شده است.

    مثال (DOCTYPE چیست؟)

    یک سند HTML با یک اعلان که مشخص می کند، HTML5 در صفحه استفاده شده است:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>

    <body>
    The content of the document......
    </body>

    </html>

    نسخه های HTML 

    Wiki

    از اولین روزهای پیدایش وب، نسخه های زیادی از HTML وجود داشته است.

    نسخهسال
    HTML1991
    HTML+1993
    HTML 2.01995
    HTML 3.21997
    HTML 4.011999
    XHTML 1.02000
    HTML52012
    XHTML52013

    اعلان های متداول

    Wiki

    HTML5

    <!DOCTYPE html>

    HTML 4.01

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    XHTML 1.0

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    READ MORE
  • یک iframe برای نمایش صفحه وب، درون یک صفحه وب دیگر استفاده می شود.


    دستور اضافه کردن یک iframe

    <iframe src="/URL"></iframe>

    URL به مکان صفحه مجزای دیگری اشاره دارد.


    تنظیم عرض و طول iframe

    Wiki

    خصوصیت height و width برای تعیین طول و عرض یک iframe استفاده می شود.

    مقدار این خصوصیت ها به طور پیش فرض بر حسب پیکسل بیان می شود اما می توان آنرا به درصد نیز بیان کرد. (مثل 80 %)

    مثال (iframe چیست؟)

    <iframe src="/demo_iframe.htm" width="200" height="200"></iframe>
    خودتان امتحان کنید »

    حذف Border یا خطوط حاشیه iframe

    Wiki

    خصوصیت frameborder مشخص می کند آیا حاشیه نمایش داده شود یا نه.

    با تنظیم آن به عدد صفر حاشیه برداشته می شود.

    مثال (iframe چیست؟)

    <iframe src="/demo_iframe.htm" frameborder="0"></iframe>
    خودتان امتحان کنید »

    استفاده از iframe به عنوان مقصد یک لینک

    Wiki

    یک iframe می تواند به عنوان مقصد یک لینک استفاده شود.

    خصوصیت target در یک لینک باید به خصوصیت name در عنصر iframe اشاره کند.

    مثال (iframe چیست؟)

    <iframe src="/demo_iframe.htm" name="iframe_a"></iframe>
    <p><a href="http://www.beyamooz.com" target="iframe_a">beyamooz.com</a></p>
    خودتان امتحان کنید »

    تگ iframe

    تگتوضیح
    <iframe>

    تعریف یک صفحه داخل صفحه جاری (frame)

    READ MORE
  • یک URL همان آدرس وب می باشد.

    Wiki

    یک URL می تواند ترکیبی از حروف باشد مثل beyamooz.com یا می تواند یک IP یا Internet Protocol باشد. بیشتر مردم هنگام گشت زنی در اینترنت از نام وب سایت استفاده می کنند زیرا به خاطر سپردن یک نام آسان تر است تا یک IP مثل 192.68.20.50.


    URL یا (Uniform Resource Locator)

    Wiki

    هنگامی که روی یک لینک در صفحه HTML کلیک می کنید، تگ <a> به آدرسی در شبکه جهانی وب اشاره می کند.

    یک URL یا (Uniform Resource Locator) برای فراخوانی یک سند (یا داده هایی دیگر) در اینترنت استفاده می شود.

    یک آدرس وب مثل http://beyamooz.com/index.php/design-page/html از الگوی زیر پیروی می کند:

    scheme://host.domain:port/path/filename

    توضیح

    Wiki

    • scheme:نوع سرویس اینترنتی را تعریف می کند. رایج ترین نوع http می باشد.
    • host: میزبان دامنه (domain host) را تعریف می کند. ( host پیش فرض برای http حروف www می باشد.)
    • domain: نام دامنه اینترنی را تعریف می کند. مثل w3school.com
    • port: در اینجا port number در host تعریف می شود. ( port number به طور پیش فرض برای http عدد 80 می باشد.)
    • path: یک مسیر را در سرور تعریف می کند. (اگر حذف شود، سند باید در فولدر اصلی وب سایتذخیره شده باشد.)
    • file name: نام یک سند یا منبع را تعریف می کند.

    Scheme های رایج

    Wiki

    در جدول زیر لیستی از Scheme های رایج ارائه شده است.

    Schemeمخففدر چه صفحاتی این  scheme استفاده می شود
    http

    HyperText Transfer Protocol

    (پروتکل انتقال ابر متن)

    صفحات وب به صورت معمول با http شروع می شوند. در اینجا اطلاعات رمزگذاری نمی شوند.

    https

    Secure HyperText Transfer Protocol

    (پروتکل انتقال ابر متن به صورت ایمن)

    تمام اطلاعات رمزگذاری شده اند و اطلاعات بصورت ایمن ارسال می شوند.

    ftp

    File Transfer Protocol
    (پروتکل انتقال فایل)

    برای دانلود و آپلود فایل ها در وب سایت استفاده می شود.

    file 

    فایلی روی کامپیوترتان

    READ MORE
  • HTML

    آموزش HTML (اچ تی ام ال) - مقدمه HTML (اچ تی ام ال)

    Wiki

    با استفاده از این آموزش، می توانید وب سایتتان را خودتان طراحی کنید.

    در این خود آموز، مطالبی را در مورد HTML (اچ تی ام ال) آموزش خواهید دید.

    یاد گیری HTML (اچ تی ام ال) کار آسانی است و از آموزش آن لذت خواهید برد.


    آموزش HTML (اچ تی ام ال) همراه با صدها مثال

    Wiki

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

    به کمک ویرایشگری که در اختیارتان است، می توانید سند HTML را ویرایش کنید و با کلیک روی یک دکمه، نتیجه را مشاهده کنید.

    مثال (مقدمه آموزش HTML)

    <html>
    <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

    </body>
    </html>
    خودتان امتحان کنید »

    برای مشاهده نتیجه کد بالا روی دکمه "خودتان امتحان کنید" کلیک کنید.


    HTML چیست؟

    Wiki

    HTML یک زبان برای توصیف صفحات وب است.

    • HTML بترتیب سرنام واژگان Hyper Text Markup Language بحساب می آید. (زبان علامت گذاری ابر متن)
    • HTML یک زبان برنامه نویسی نیست بلکه زبان علامت گذاری است.
    • یک زبان علامت گذاری مجموعه ای از تگ ها می باشد.
    • HTML از تگ ها برای توصیف صفحات وب استفاده می کند.

    آموزش تگ های HTML

    Wiki

    • تگ های HTML، کلید واژه هایی هستند که داخل علامت کوچکتر بزرگتر هستند. مثل <HTML>
    • تگ های HTML معمولا به صورت جفت می آیند.
    • تگ اول همان تگ شروع می باشد و تگ دوم نیز همان تگ پایان است.
    • تگ های شروع و پایان، تگ باز و بسته نیز نامیده می شود.

    سند HTML = صفحات وب

    Wiki

    • سندهای HTML صفحات وب را توصیف می کنند.
    • سندهای HTML شامل تگ های HTML (اچ تی ام ال) و متن ساده می باشد.
    • سندهای HTML صفحات وب نیز نامیده می شود.

    هدف یک مرورگر وب (مانند internet explorer یا firefox) این است که سندهای HTML را خوانده و آنها را به صورت صفحات وب نمایش دهد. مرورگر، تگ های HTML را نمایش نمی دهد، اما از تگ های HTML استفاده می کند تا محتوای صفحه را تفسیر کند.

    مثال:

    <html>
    <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

    </body>
    </html>

    توضیح مثال:

    • متن بین <html> و <html/> صفحه وب را توضیح می دهد.
    • متن بین <body> و <body/> محتوای قابل نمایش صفحه است.
    • متن بین <h1> و <h1/> برای نمایش یک عنوان استفاده می شود.
    • متن بین <p> و <p/> برای نمایش یک پاراگراف استفاده می شود.

    آموزش تصویری مطلب بالا (فیلم آموزش HTML)

     درس شماره 1 (مقدمه آموزش HTML زمان فیلم:  11:48

      خرید و دانلود مستقیمفیلم آموزش HTML - حجم دانلود 766 مگابایت (کلیک کنید +)

    READ MORE
  • XHTML در واقع HTMLی است که مانند XML نوشته شده است.


    XHTML چیست؟

    Wiki

    • XHTML مخفف کلمات EXtensible HyperText Markup Language (زبان علامتگذاری ابرمتن قابل توسعه) می باشد.
    • XHTML تقریبا مشابه HTML 4.01 می باشد.
    • XHTML نسخه سخت گیرتر و تمیزتر HTML می باشد.
    • XHTML در واقع HTMLی است که مانند XML تعریف شده است.
    • XHTML در سال 2000 توسط W3C پیشنهاد شد.
    • XHTML توسط اکثر مرورگرها پشتیبانی می شود.

    چرا XHTML؟

    Wiki

    بسیاری از صفحات در اینترنت، حاوی کدهای HTML نادرست هستند.

    کد HTML زیر با توجه به اینکه از قوانین HTML پیروی نکرده (تگ <h1> و <p> بسته نشده) باز هم به درستی نمایش داده خواهد شد:

    <html>
    <head>
    <title>This is bad HTML</title>
    <body>
    <h1>Bad HTML
    <p>This is a paragraph
    </body>

    XML سیستم گرامر ایجاد زبان های علامتگذاری دلخواه است و سندها باید به درستی و با فرمت درست نشانه گذاری شوند.

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

    بنابراین با ترکیب توانایی های HTML و XML نسخه XHTML توسعه یافت.


    مهم ترین تفاوت های بین XHTML و HTML

    Wiki

    ساختار سند:

    • آوردن DOCTYPE در XHTML الزامی است.
    • آوردن خصوصیت xmlns در تگ <html> الزامی است.
    • آوردن تگ های <html>، <head>، <title> و  <body> الزامی می باشد.

    نحوه نوشتن عناصر:

    • برای استفاده عناصر به صورت تودرتو باید نظم آنها حفظ شود.
    • عناصر XHTML باید همیشه بسته شوند.
    • عناصر XHTML باید با حروف کوچک نوشته شوند.
    • یک سند XHTML باید یک عنصر ریشه ای داشته باشند. (کل عناصر موجود در سند، در یک عنصر ریشه ای قرار داده شوند)

    نحوه نوشتن خصوصیت ها:

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

    نوشتن <!...DOCTYPE> الزامی است

    Wiki

    یک سند XHTML باید حاوی اعلان DOCTYPE باشد.

    عناصر <html>، <head>، <title> و <body> باید در سند آورده شوند و نوشتن خصوصیت xmlns در تگ <html> الزامی است.

    مثال زیر، یک سند XHTML با حداقل تگ هایی که نیاز دارد را نشان می دهد:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <title>Title of document</title>
    </head>

    <body>
    ......
    </body>

    </html>

    نحوه تبدیل HTML به XHTML

    Wiki

    1. یک <!DOCTYPE> از XHTML به خط اول هر صفحه اضافه کنید.
    2. خصوصیت xmlns را به عناصر html هر صفحه اضافه کنیم.
    3. تمامی نام عناصر را به حروف کوچک تغییر دهیم.
    4. تمای تگ های تهی را ببنیدیم.
    5. تمامی نام های عناصر را به حروف کوچک تغییر دهیم.
    6. تمامی مقادیر عناصر را داخل دابل کوتیشن بگذارید.

    اعتبار سنیجی XHTML با استفاده از W3C

    Wiki

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

    READ MORE
  • ارسال یا آپلود فایل در PHP

    Wiki

    برای ارسال فایل از Client به Server مراحل زیر را طی کنید:

    1- ایجاد یک فرم HTML ارسال فایل

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

    <html>
    <body>

    <form action="upload_file.php" method="post" enctype="multipart/form-data">
      <label for="file">Filename:</label>
      <input type="file" name="file" id="file" />
      <br />
      <input type="submit" name="submit" value="Submit" />
    </form>

    </body>
    </html>

    • خاصیت enctype در تگ <form>: هنگامی که یک فرم، داده های دودویی، مثل محتوای یک فایل را برای ارسال شدن نیاز دارد، این خاصیت با مقدار "multipart/form-data" پر می شود، در حقیقت مشخص می کند که چه نوع محتوایی هنگام ارائه ی فرم استفاده می شود.
    • خاصیت action در تگ <form>: اگر submit اتفاق افتاد، اطلاعات فرم HTMLبه صفحه ای که در این خصوصیت  مشخص شده ارسال می شود.(به صورت پیش فرض صفحه جاری در نظر گرفته می شود)
    • خاصیت type در تگ <input>: با مقدار "file" پر شده است و مشخص می کند که ورودی کاربر، باید به عنوان یک فایل پردازش شود.(یک تکس باکس به همراه دکمه Browse، جهت جستجوی فایل از کامپیوتر کاربر)

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


    2- ایجاد یک اسکریبت ارسالی

    Wiki

     فایل "upload_file.php" که در فرم HTML بالا در تگ <form> مشخص کردیم، می تواند چیزی شبیه زیر باشد:

    <?php
    if ($_FILES["file"]["error"] > 0)
      {
      echo "Error: " . $_FILES["file"]["error"] . "<br />";
      }
    else
      {
      echo "Upload: " . $_FILES["file"]["name"] . "<br />";
      echo "Type: " . $_FILES["file"]["type"] . "<br />";
      echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
      echo "Stored in: " . $_FILES["file"]["tmp_name"];
      }
    ?>

    با استفاده از متغیر سراسری FILES_$ می توانید فایل های مشخص شده توسط کاربر را از client به Server ارسال کنید، در حقیقت FILES_$ یک آرایه دوبعدی از پیش تعریف شده است که با استفاده از ایندکس مقداری آن می توانید به مقادیر زیر دسترسی داشته باشید:

    • $_FILES["file"]["name"] : نام فایل ارسالی
    • $_FILES["file"]["type"] : نوع فایل ارسالی
    • $_FILES["file"]["size"] : اندازه فایل ارسالی با واحد بایت
    • $_FILES["file"]["tmp_name"] : نام کپی موقت از فایل که روی سرور ذخیره شده
    • $_FILES["file"]["error"] : کد خطا که از ارسال فایل به وجود آمده

    توجه: به دلایل امنیتی٫ باید محدودیتی را روی آنچه که کاربر ارسال می کند قرار دهیم.


    3- محدودیت های ارسال

    Wiki

    دراین اسکریپت چند شرط را برای ارسال فایل اضافه می کنیم. کاربر فقط قادر است فایل های "jpg." یا "gif." را ارسال کند و اندازه ی فایل باید کمتر از "20KB" باشد:

    <?php
    if ((($_FILES["file"]["type"] == "image/gif")
    || ($_FILES["file"]["type"] == "image/jpeg")
    || ($_FILES["file"]["type"] == "image/pjpeg"))
    && ($_FILES["file"]["size"] < 20000))
      {
      if ($_FILES["file"]["error"] > 0)
        {
        echo "Error: " . $_FILES["file"]["error"] . "<br />";
        }
      else
        {
        echo "Upload: " . $_FILES["file"]["name"] . "<br />";
        echo "Type: " . $_FILES["file"]["type"] . "<br />";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
        echo "Stored in: " . $_FILES["file"]["tmp_name"];
        }
      }
    else
      {
      echo "Invalid file";
      }
    ?>

    نکته: در کد بالا برای اینکه IE فایل های با فرمت jpg را بشناسد، باید نوع pjpg باشد و برای FireFox باید jpeg باشد.


    4- ذخیره فایل های ارسالی

    Wiki

    مثال های بالا یک کپی موقت از فایل های ارسال شده در پوشه ی موقت php روی سرور ایجاد می کنند و وقتی که اسکریبت به پایان رسید، از بین می روند. بنابراین باید آن ها را به یک مکان دیگر منتقل کنیم.

    <?php
    if ((($_FILES["file"]["type"] == "image/gif")
    || ($_FILES["file"]["type"] == "image/jpeg")
    || ($_FILES["file"]["type"] == "image/pjpeg"))
    && ($_FILES["file"]["size"] < 20000))
      {
      if ($_FILES["file"]["error"] > 0)
        {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
        }
      else
        {
        echo "Upload: " . $_FILES["file"]["name"] . "<br />";
        echo "Type: " . $_FILES["file"]["type"] . "<br />";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";

        if (file_exists("upload/" . $_FILES["file"]["name"]))
          {
          echo $_FILES["file"]["name"] . " already exists. ";
          }
        else
          {
          move_uploaded_file($_FILES["file"]["tmp_name"],
          "upload/" . $_FILES["file"]["name"]);
          echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
          }
        }
      }
    else
      {
      echo "Invalid file";
      }
    ?>

    در اسکریبت بالا در قسمت if چک می شود که آیا فایل ارسال شده در پوشه "upload" قبلاً وجود داشته یا نه، اگر موجود نباشد، آن را به پوشه مشخص شده منتقل یا کپی می کند.

    نکته: این مثال فایل را در یگ پوشه ی جدید به نام "upload" ذخیره می کند، احتمالاً شما نیاز خواهید داشت که نام فایل و مسیر آن را در پایگاه داده خود ذخیره کنید بنابراین در ادامه مثال بالا به راحتی می توانید با استفاده از دستور insert اینکار را انجام دهید.

    برای مشاهده فیلم ها و آموزش های پروژه محور برنامه نویسی PHPکلیک کنید.

    READ MORE
  • CSS یا (Cascading Style Sheets) چگونگی نمایش عناصر HTML را مشخص می کند.

    Wiki


    به چگونگی نمایش متن ها نگاه کنید...!

    این متن قرمز است.

    رنگ این متن آبی است و نام فونت آن Times است.

    اندازه این متن 30 پیکسل است.

    خودتان امتحان کنید


    مثال - خودتان امتحان کنید

    استفاده از Styleها، داخل صفحه HTML
    چگونه Styleها را در قسمت <head> صفحه اضافه کنیم.

    لینکی که خط زیر ندارد
    چگونه یک لینک بدون خط زیر (underline) بسازیم.

    لینک به یک فایل CSS خارجی
    چگونه از تگ <link> برای اضافه کردن فایل CSS خارجی استفاده کنیم.


    تعیین شکل نمایش عناصر HTML با CSS

    Wiki

    CSSهمراه با HTML4 معرفی شد تا یک روش بهتری برای Style دهی عناصر HTML ایجاد کند.

    برای اعمال CSS بر روی تگهای HTML سه روش وجود دارد:

    • برگه های استایل خارجی یا External style sheet
    • برگه های استایل داخلی یا Internal style sheet
    • استایل درون تگی یا Inline style

    روش پیشنهادی، گزینه اول یعنی برگه های استایل خارجی است. 

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


    استایل درون تگی - Inline Styles

    Wiki

    قرار دادن Styleها درون تگ HTML بسیاری از مزیت های CSS را با مخلوط کردن محتوا و چگونگی نمایش از بین می برد، از این روش به ندرت استفاده کنید.

    طریقه استفاده به این صورت است که باید Style مورد نظرمان را در تگ مربوطه بیاوریم، مثال زیر نشان می دهد که چگونه رنگ و margin-left تگ <p> را تغییر داده ایم:

    <p style="color:blue;margin-left:20px;">This is a paragraph.</p>

    مثال: تنظیم رنگ پس زمینه عناصر HTML

    خصوصیت background-color رنگ پس زمینه یک عنصر HTML را تنظیم می کند:

    مثال (استفاده از css در HTML)

    <!DOCTYPE html>
    <html>

    <body style="background-color:yellow;">
    <h2 style="background-color:red;">This is a heading</h2>
    <p style="background-color:green;">This is a paragraph.</p>
    </body>

    </html>
    خودتان امتحان کنید »

    خصوصیت background-color از خصوصیت قدیمی و منسوخ شده bgcolor ساخته شده است.

    خودتان امتحان کنید: تنظیم رنگ پس زمینه با استفاده از روش قدیمی


    مثال: تنظیم رنگ و اندازه و فونت عناصر HTML

    خصوصیات font-family , color , font-size به ترتیب اندازه، رنگ و فونت متن را تنظیم می کنند:

    مثال (استفاده از css در HTML)

    <!DOCTYPE html>
    <html>

    <body>
    <h1 style="font-family:verdana;">A heading</h1>
    <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
    </body>

    </html>
    خودتان امتحان کنید »

    خصوصیات font-family , color , font-size از تگ قدیمی و منسوخ شده <font> ساخته شده اند.


    مثال: ترازبندی متن

    خصوصیت text-align در جهت محور X یک متن را ترازبندی می کند:

    مثال (استفاده از css در HTML)

    <!DOCTYPE html>
    <html>

    <body>
    <h1 style="text-align:center;">Center-aligned heading</h1>
    <p>This is a paragraph.</p>
    </body>

    </html>
    خودتان امتحان کنید »

    خصوصیت text-align از تگ قدیمی و منسوخ شده <center> ساخته شده است.

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


    برگه های استایل داخلی - Internal Style Sheet

    Wiki

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

    Styleهای داخلی در قسمت Head صفحه HTML و توسط تگ <style> مانند زیر معرفی می شوند.

    <head>
    <style type="text/css">
    body {background-color:yellow;}
    p {color:blue;}
    </style>
    </head>

    برگه های استایل خارجی - External Style Sheet

    Wiki

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

    هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.

    <head>
    <link rel="stylesheet" type="text/css" href="/mystyle.css" />
    </head>

    تگ های Style در HTML

    تگتوضیحات
    <style>

    برای تعریف اطلاعات طرح بندی یک سند html استفاده می شود. تگ <style> باید در قسمت head صفحه قرار داده شود.

    <link />

    هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.


    تگ ها و خصوصیات منسوخ شده

    Wiki

    در HTML4 چندین تگ و خصوصیت برای Styleدهی استفاده می شود که این تگ ها در نسخه جدید HTMLپشتیبانی نمی شود.

    به همین منظور از استفاده عناصر و خصوصیات زیر اجتناب نمایید:

    • <font>
    • <center>
    • <strike>
    • color
    • bgcolor
    READ MORE
  • JavaScripts صفحات HTML را پویاتر و جذاب تر می سازد.


    مثال - خودتان امتحان کنید

    Wiki

    Insert a script
    نحوه وارد کردن یک script در یک سند HTML.

    Use of the <noscript> tag
    چاپ یک پیام مناسب برای مرورگرهایی که جاوا اسکریبت را پشتیبانی نمی کنند یا توسط کاربر غیر فعال شده است.


    عنصر script در HTML

    Wiki

    تگ <script> برای برنامه نویسی سمت کاربر استفاده می شود، مثل JavaScript.

    عنصر <script> به دو صورت استفاده می شود یا با نوشتن دستورات درون تگ script یا به صورت یک فایل script خارجی که با خصوصیت src مشخص می شود.

    ممکن است برای تگ <script> خصوصیت type را تنظیم کنیم ("text/javascript") توجه داشته باشید که نیاز به انجام این کار نیست، چون در تمام مرورگرها و در HTML5 زبان اسکریپت پیشفرض، JavaScript است.

    کاربردهای رایج برای JavaScript: دستکاری تصویر، اعتبار سنجی فرم و تغییرات محتوا بصورت پویا می باشد.

    script زیر عبارت Hello World را چاپ می کند:

    مثال (استفاده از javascripts در HTML)

    <script type="text/javascript">
    document.write("Hello World!")
    </script>
    خودتان امتحان کنید »

    نکته: برای یادگیری بیشتر در مورد JavaScript به خودآموز JS HOME مراجعه نمایید.


    عنصر noscript در HTML

    Wiki

    تگ <noscript> زمانی استفاده می شود که script ها در مرورگر غیر فعال شده یا مرورگری است که script سمت کاربر را پشتیبانی نمی کنند.

    عنصر <noscript> می تواند تمام عناصری را که شما می توانید در عنصر body در یک صفحه HTML پیدا کنید را شامل شود.

    محتوای عنصر <noscript> تنها زمانی نشان داده می شود که script پشتیبانی نشود یا در مرورگر کاربر غیر فعال باشد.

    مثال (استفاده از javascripts در HTML)

    <script type="text/javascript">
    document.write("Hello World!")
    </script>
    <noscript>Sorry, your browser does not support JavaScript!</noscript>
    خودتان امتحان کنید »

    تگ های Script

    Wiki

    TagDescription
    <script>

    برای برنامه نویسی سمت کاربر استفاده می شود.

    <noscript>

    زمانی که script سمت کاربر پشتیبانی نشود متنی را به کاربر نشان می دهد.

    READ MORE
  • استفاده از نام رنگ ها در تمام مرورگرها پشتیبانی می شود

    Wiki

    در HTML و CSS می توان از نام رنگ، برای مشخص کردن پس زمینه یک عنصر استفاده کرد.

    نام 147 رنگ همراه با مقدار HEX آنها در جدول زیر لیست شده است. (16 رنگ اصلی همراه با 130 رنگ ترکیبی)

    توجه: نام 16 رنگ اصلی شامل: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

    مرتب شده براساس نام رنگ

    نام رنگHEXرنگ
    AliceBlue#F0F8FF 
    AntiqueWhite#FAEBD7 
    Aqua#00FFFF 
    Aquamarine#7FFFD4 
    Azure#F0FFFF 
    Beige#F5F5DC 
    Bisque#FFE4C4 
    Black#000000 
    BlanchedAlmond#FFEBCD 
    Blue#0000FF 
    BlueViolet#8A2BE2 
    Brown#A52A2A 
    BurlyWood#DEB887 
    CadetBlue#5F9EA0 
    Chartreuse#7FFF00 
    Chocolate#D2691E 
    Coral#FF7F50 
    CornflowerBlue#6495ED 
    Cornsilk#FFF8DC 
    Crimson#DC143C 
    Cyan#00FFFF 
    DarkBlue#00008B 
    DarkCyan#008B8B 
    DarkGoldenRod#B8860B 
    DarkGray#A9A9A9 
    DarkGrey#A9A9A9 
    DarkGreen#006400 
    DarkKhaki#BDB76B 
    DarkMagenta#8B008B 
    DarkOliveGreen#556B2F 
    Darkorange#FF8C00 
    DarkOrchid#9932CC 
    DarkRed#8B0000 
    DarkSalmon#E9967A 
    DarkSeaGreen#8FBC8F 
    DarkSlateBlue#483D8B 
    DarkSlateGray#2F4F4F 
    DarkSlateGrey#2F4F4F 
    DarkTurquoise#00CED1 
    DarkViolet#9400D3 
    DeepPink#FF1493 
    DeepSkyBlue#00BFFF 
    DimGray#696969 
    DimGrey#696969 
    DodgerBlue#1E90FF 
    FireBrick#B22222 
    FloralWhite#FFFAF0 
    ForestGreen#228B22 
    Fuchsia#FF00FF 
    Gainsboro#DCDCDC 
    GhostWhite#F8F8FF 
    Gold#FFD700 
    GoldenRod#DAA520 
    Gray#808080 
    Grey#808080 
    Green#008000 
    GreenYellow#ADFF2F 
    HoneyDew#F0FFF0 
    HotPink#FF69B4 
    IndianRed#CD5C5C 
    Indigo#4B0082 
    Ivory#FFFFF0 
    Khaki#F0E68C 
    Lavender#E6E6FA 
    LavenderBlush#FFF0F5 
    LawnGreen#7CFC00 
    LemonChiffon#FFFACD 
    LightBlue#ADD8E6 
    LightCoral#F08080 
    LightCyan#E0FFFF 
    LightGoldenRodYellow#FAFAD2 
    LightGray#D3D3D3 
    LightGrey#D3D3D3 
    LightGreen#90EE90 
    LightPink#FFB6C1 
    LightSalmon#FFA07A 
    LightSeaGreen#20B2AA 
    LightSkyBlue#87CEFA 
    LightSlateGray#778899 
    LightSlateGrey#778899 
    LightSteelBlue#B0C4DE 
    LightYellow#FFFFE0 
    Lime#00FF00 
    LimeGreen#32CD32 
    Linen#FAF0E6 
    Magenta#FF00FF 
    Maroon#800000 
    MediumAquaMarine#66CDAA 
    MediumBlue#0000CD 
    MediumOrchid#BA55D3 
    MediumPurple#9370D8 
    MediumSeaGreen#3CB371 
    MediumSlateBlue#7B68EE 
    MediumSpringGreen#00FA9A 
    MediumTurquoise#48D1CC 
    MediumVioletRed#C71585 
    MidnightBlue#191970 
    MintCream#F5FFFA 
    MistyRose#FFE4E1 
    Moccasin#FFE4B5 
    NavajoWhite#FFDEAD 
    Navy#000080 
    OldLace#FDF5E6 
    Olive#808000 
    OliveDrab#6B8E23 
    Orange#FFA500 
    OrangeRed#FF4500 
    Orchid#DA70D6 
    PaleGoldenRod#EEE8AA 
    PaleGreen#98FB98 
    PaleTurquoise#AFEEEE 
    PaleVioletRed#D87093 
    PapayaWhip#FFEFD5 
    PeachPuff#FFDAB9 
    Peru#CD853F 
    Pink#FFC0CB 
    Plum#DDA0DD 
    PowderBlue#B0E0E6 
    Purple#800080 
    Red#FF0000 
    RosyBrown#BC8F8F 
    RoyalBlue#4169E1 
    SaddleBrown#8B4513 
    Salmon#FA8072 
    SandyBrown#F4A460 
    SeaGreen#2E8B57 
    SeaShell#FFF5EE 
    Sienna#A0522D 
    Silver#C0C0C0 
    SkyBlue#87CEEB 
    SlateBlue#6A5ACD 
    SlateGray#708090 
    SlateGrey#708090 
    Snow#FFFAFA 
    SpringGreen#00FF7F 
    SteelBlue#4682B4 
    Tan#D2B48C 
    Teal#008080 
    Thistle#D8BFD8 
    Tomato#FF6347 
    Turquoise#40E0D0 
    Violet#EE82EE 
    Wheat#F5DEB3 
    White#FFFFFF 
    WhiteSmoke#F5F5F5 
    Yellow#FFFF00 
    YellowGreen#9ACD32 
    READ MORE
  • پاراگراف ها، قسمت عمده ای از یک سند HTMLرا تشکیل می دهند.


    پاراگراف ها در HTML

    Wiki

    پاراگراف ها به وسیله تگ <p> تعریف می شوند.

    مثال (پاراگراف ها در HTML)

    <p>This is a paragraph</p>
    <p>This is another paragraph</p>
    خودتان امتحان کنید »

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


    تگ پایان را فراموش نکنید

    Wiki

    اغلب مرورگرها حتی اگر تگ پایان را هم نگذاریم صفحه را به درستی نمایش می دهند.

    مثال (پاراگراف ها در HTML)

    <p>This is a paragraph
    <p>This is another paragraph
    خودتان امتحان کنید »

    مثال بالا در بیشتر مرورگرها عمل می کند، اما به آن اطمینانی نیست. فراموش کردن تگ پایان می تواند نتایج غیر منتظره یا خطاهایی را ایجاد کند.

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


    رفتن به خط جدید در HTML

    Wiki

    از تگ </ br> برای رفتن به خط جدید بدون اینکه پاراگراف جدیدی را شروع کنیم استفاده می شود.

    مثال (پاراگراف ها در HTML)

    <p>This is<br />a para<br />graph with line breaks</p>
    خودتان امتحان کنید »

    عنصر </ br> یک عنصر تهی در HTML است. این عنصر دارای تگ پایان نیست.


    <br> یا </ br>

    Wiki

    در XHTML و XML عناصر بدون تگ پایان(تگ بسته) مجاز نمی باشند.

    اگر چه <br>در تمام مرورگرها کار می کند، اما نوشتن </ br> در برنامه های XHTML و XML بهتر عمل می کند.


     خروجی HTML - نکات مفید

    Wiki

    شما نمی توانید مطمئن شوید که کدهای HTML چگونه نمایش داده خواهد شد. صفحات نمایش بزرگ یا کوچک و تغییر اندازه پنجره ها نتایج متفاوتی را به همراه دارد.

    هنگام نوشتن کدهای HTML، نباید انتظار داشته باشید که فاصله ها یا خط های اضافه در کدهای HTML در خروجی مرورگر نیز فاصله یا خط اضافه دیده شوند.

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

    خودتان امتحان کنید

    (این مثال بعضی از مشکلات فرمت دهی را در HTML نشان می دهد.)


    مشکل نمایش اشعار در مرورگر

    مثال (پاراگراف ها در HTML)

    <p>شعر زیر، در مرورگر پشت سرهم و در یک خط نمایش داده خواهد شد</p>

    <p>

      My Bonnie lies over the ocean.

      My Bonnie lies over the sea.

      My Bonnie lies over the ocean.

      Oh, bring back my Bonnie to me.

    </p>

    خودتان امتحان کنید »

    عنصر <pre> در HTML

    با استفاده از عنصر <pre> می توانید فاصله ها و خط های اضافی داخل متن را به همان صورت در مرورگر نمایش دهید:

    مثال (پاراگراف ها در HTML)

    <p>فاصله و خط های اضافی در شعر زیر به همان صورت نمایش داده خواهد شد</p>

    <pre>
     
      My Bonnie lies over the ocean.

      My Bonnie lies over the sea.

      My Bonnie lies over the ocean.

      Oh, bring back my Bonnie to me.

    </pre>

    خودتان امتحان کنید »

    مثال - خودتان امتحان کنید

    HTML paragraphs
    چگونه پاراگراف ها در مرورگر نشان داده می شود.

    Line breaks
    رفتن به خط جدید در سندهای HTML.

    Poem problems
    بعضی مشکلات در فرمت دهی در HTML.

    More paragraphs
    رفتارهای پیش فرض در پاراگراف ها.


    منبع تگ های HTML

    منبع تگ های HTML حاوی اطلاعات اضافی در مورد عناصر HTML و خصوصیت های آن ها می باشد.

    تگتوضیح
    <p>یک پاراگراف را تعریف می کند.
    <br />خط جدیدی را وارد می کند.
    READ MORE
  • صداها در HTML به روش های مختلفی می توانند پخش شوند.


    مشکلات و راه حل های پخش صدا در وب

    Wiki

    اجرای صدا در HTML کار آسانی نیست!

    باید ترفند های زیادی برای اینکه مطمئن شوید فایل صوتی شما در تمام مرورگرها (Internet Explorer, Chrome, Firefox, Safari, Opera) و تمامی سخت افزارها (PC, Mac , iPad, iPhone) اجرا شود به کار ببرید.

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


    پخش صدا با استفاده از Pluginها

    Wiki

    Plugin یک برنامه کامپیوتری کوچک است که قابلیت های استاندارد مرورگرهای وب را گسترش می دهد. Pluginها برای اهداف مختلفی می توانند استفاده شوند. آنها می توانند برای پخش موزیک، نمایش نقشه، تأیید شناسه کاربری بانکی، کنترل ورودی ها کاربر و... بکار روند.

    Pluginها را می توان با استفاده از تگ های <object> یا <embed> به صفحات HTML اضافه نمود.


    پخش صدا با استفاده از عنصر <embed>

    Wiki

    هدف از تگ <embed> درج کردن عناصر multimedia در صفحات HTML است.

    قطعه کد زیر یک فایل MP3 را در صفحه وب درج می کند.

    مثال (پخش صدا در HTML)

    <embed height="50px" width="100px" src="/horse.mp3" />
    خودتان امتحان کنید »

    مشکلات استفاده از عنصر <embed>

    • تگ <embed> در HTML 4 شناخته شده نیست. صفحه شما دارای اعتبار نمی باشد.
    • اگر مرورگر فرمت فایل شما را پشتیبانی نکند، audio پخش نخواهد شد.
    • اگر فرمت فایل را به فرمتی دیگر تبدیل کنید، باز هم در همه مرورگرها پخش نخواهد شد.

    پخش صدا با استفاده از عنصر <object>

    Wiki

    هدف از تگ <object> درج کردن عناصر multimedia در صفحات HTML است.

    قطعه کد زیر یک فایل MP3 را در صفحه وب درج می کند.

    مثال (پخش صدا در HTML)

    <object height="50px" width="100px" data="horse.mp3" />
    خودتان امتحان کنید »

    مشکلات استفاده از عنصر <object>

    • اگر مرورگر فرمت فایل شما را پشتیبانی نکند، audio پخش نخواهد شد.
    • اگر فرمت فایل را به فرمتی دیگر تبدیل کنید، باز هم در همه مرورگرها پخش نخواهد شد.

    پخش صدا با استفاده از عنصر <audio>

    Wiki

    عنصر <audio> یک عنصر در HTML 5 می باشد، برای HTML 4 شناخته شده نیست اما در همه مرورگرهای جدید کار می کند.

    مثال (پخش صدا در HTML)

    <audio controls="controls">
      <source src="/horse.mp3" type="audio/mpeg" />
      <source src="/horse.ogg" type="audio/ogg" />
    Your browser does not support this audio
    </audio>
    خودتان امتحان کنید »

    مشکلات استفاده از عنصر <audio>

    Wiki

    • فقط فرمت های Ogg و MP3 و Wav و Vorbis قابل پشتیبانی است و باید یک ویدئو را مانند مثال بالا به چند فرمت تبدیل کنید.
    • عنصر <audio> در مرورگرهای قدیمی شناخته شده نیست.
    • عنصر <audio> در HTML4 و XHTML معتبر نیست.
    مرورگرOgg VorbisMP3WAV
    FireFox 4 beta

    Safari 4

    --

    Chrome 3 (beta)

    --

    Opera 10 (beta)

    --
     IE 8------

    بهترین راه حل برای پخش صدا در HTML

    Wiki

    مثال (پخش صدا در HTML)

    <audio controls="controls" height="50px" width="100px">
      <source src="/horse.mp3" type="audio/mpeg" />
      <source src="/horse.ogg" type="audio/ogg" />
    <embed height="50px" width="100px" src="/horse.mp3" />
    </audio>
    خودتان امتحان کنید »

    مثال بالا از دو فرمت متفاوت استفاده می کند. در HTML 5 عنصر <audio> سعی می کند تا ویدئو را با یکی از فرمت های ogg یا mp3  پخش کند. اگر این روش جواب نداد، بخش ویدئو به عنصر <embed> واگذار می گردد. اگر این روش هم جواب نداد، خطایی نمایش داده می شود.

    مشکلات

    Wiki

    • باید ویدئو ها را به فرمت های زیادی تبدیل کنید.
    • عنصر <audio> در HTML 4 و XHTML وجود ندارد.
    • عنصر <embed> در HTML 4 و XHTML اعتبار ندارد.

    نکته: استفاده از اعلان <DOCTYPE html!> در بالای صفحه، مشکل اعتبار را حل می کند.


    Yahoo Media Player - آسانترین راه برای اضافه کردن Audio به سایت

    Wiki

    ساده ترین راه برای اضافه کردن Audio به صفحات وب چیست؟ بطور قطع Yahoo Media Player که به صورت رایگان است، می تواند یک گزینه باشد.

    Yahoo Media Player فایل های mp3 و دیگر فرمت ها را پخش می کند. شما می توانید آنرا به صفحه (یا بلاگ) خودتان با یک خط دستور اضافه کنید و به راحتی صفحه HTML خود را به یک پخش کننده موزیک حرفه ای تبدیل کنید.

    مثال (پخش صدا در HTML)

    <a href="/song.mp3">Play Song</a>

    <script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
    </script>
    خودتان امتحان کنید »

    استفاده از player یاهو رایگان است. برای استفاده از آن کد JavaScript زیر را در پایین صفحه وب خود درج کنید.

    <script src="http://mediaplayer.yahoo.com/js"></script>

    سپس به سادگی توسط تگ <a> به فایل های mp3 خود در HTML اتصال برقرار نمایید. کد JavaScript به صورت اتوماتیک برای هر آهنگ یک دکمه پخش ایجاد می کند. گرچه، هنگامی که روی دکمه کلیک می کنید، یک پخش کننده بزرگ پایین صفحه ظاهر می شود.

    <a href="/song1.mp3">Play Song 1</a>
    <a href="/song2.mp3">Play Song 2</a>
    ...
    ...
    ...

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


    استفاده از تگ <a>

    Wiki

    اگر صفحه وبی دارای یک لینک به فایل مدیایی باشد، اکثر مرورگرها از یک "برنامه کمکی" برای پخش فایل استفاده می کنند.

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

    مثال (پخش صدا در HTML)

    <a href="/horse.mp3">Play the song</a>
    خودتان امتحان کنید »

    یک نکته در مورد صداهای Inline

    Wiki

     هنگامی که صدایی در یک صفحه وب قرار داده می شود و یا بخشی از آن می شود، صدای Inline می نامند.

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

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


    تگ های Multimedia در HTML

    Wiki

    TagDescription
    <embed>یک عنصر multimedia در صفحات HTML درج می کند
    <object>یک عنصر multimedia در صفحات HTML درج می کند
    <param>

    یک پارامتر برای object تعریف می کند

    <audio>

    صدا را در صفحات HTML درج می کند (تگ جدید در HTML5)

    <video>

    یک ویدئو یا فیلم در صفحات HTML درج می کند. (تگ جدید در HTML5)

    <source>

    در عناصر <video> و <audio> برای مشخص کردن منبع صدا یا فیلم استفاده می شود. (تگ جدید در HTML5)

    <track>

    در عناصر <video> و <audio> برای مشخص کردن متن trackها استفاده می شود. (تگ جدید در HTML5)

    READ MORE
  • تجزیه کننده DOM چیست؟

    Wiki

    یک سری اشیاء استاندارد برای دسترسی و دستگاری فایل های HTML و XML فراهم می کند و در سه بخش زیر مجزا شده است:

    •  هسته DOM:  یک سری اشیاء استاندارد برای فایل های ساخت یافته تعریف می کند.
    • XML DOM: یک سری اشیاء استاندارد برای فایل های XML تعریف می کند.
    • HTML DOM: یک سری اشیاء استاندارد برای فایل های HTML تعریف می کند.

    تجزیه کننده XML

    Wiki

    برای خواندن، ویرایش کردن، ایجاد و خلاصه دستگاری یک فایل XML، به یک تجزیه کننده XML نیاز داریم.

    به صورت کلی دو نوع تجزیه کننده XML وجود دارد:

    1. تجزیه کننده درختی: این تجزیه کننده فایل XML را به یک ساختار درختی منتقل می کند و تمام فایل را تحلیل کرده و دسترسی به عناصر درخت را فراهم می کند.
    2. تجزیه کننده رویدادی: یک فایل XML را به صورت یک سری از رویدادها می بیند و زمانی که یک رویداد خاص اتفاق می افتد، یک تابع را برای بررسی آن صدا می زند.

    تجزیه کننده DOM از نوع درختی است.

    به فایل XML زیر توجه کنید:

    <?xml version="1.0" encoding="ISO-8859-1"?>
    <from>Amir</from>

    تجزیه کننده DOM فایل XML بالا را به صورت زیر می بیند(سه سطح):

    • سطح اول درخت: یک فایل XML را مشخص می کند.
    • سطح دوم درخت: ریشه عنصر را مشخص می کند که تگ <from> است.
    • سطح سوم درخت: متن عنصر که کلمه "Amir" است.

    نصب تجزیه کننده XML

    Wiki

    توابع تجزیه کننده DOM قسمتی از هسته PHP هستند و نیازی به نصب وجود ندارد.


    فایل XML زیر در مثال های آینده استفاده خواهد شد:

    <?xml version="1.0" encoding="ISO-8859-1"?>
    <note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body>
    </note>


    لود و چاپ یک فایل XML

    Wiki

    مثال:در مثال زیرمی خواهیم یک تجزیه کننده XML تعریف کرده و فایل XML بالا را داخل آن لود کنیم و سپس در خروجی چاپ کنیم:

    <?php
    $xmlDoc = new DOMDocument();
    $xmlDoc->load("note.xml");
    print $xmlDoc->saveXML();
    ?>

    خروجی کد بالا:

    ToveJaniReminderDon't forget me this weekend!

    اگر در Browser ویندوزتان گزینه "View source" را انتخاب کنید، فایل HTML زیر را خواهید دید:

    <?xml version="1.0" encoding="ISO-8859-1"?>
    <note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body>
    </note>

    مثال بالا یک شی از DOMDocument ایجاد می کند و فایل "note.xml" را داخل آن لود می کند. 

    سپس تابع ()saveXML فایل XML لود شده را داخل یک رشته قرار می دهد، حالا می توانیم آنرا در خروجی چاپ کنیم.


    حلقه زدن در یک فایل XML

    Wiki

    مثال: در مثال زیر می خواهیم یک تجزیه کننده XML تعریف کنیم و فایل XML قبلی را در آن لود کرده و بین عناصر آن یک حلقه بزینم:

    <?php
    $xmlDoc = new DOMDocument();
    $xmlDoc->load("note.xml");

    $x = $xmlDoc->documentElement;
    foreach ($x->childNodes AS $item)
      {
      print $item->nodeName . " = " . $item->nodeValue . "<br />";
      }
    ?>

    خروجی کد بالا:

    #text =
    to = Tove
    #text =
    from = Jani
    #text =
    heading = Reminder
    #text =
    body = Don't forget me this weekend!
    #text =

    در مثال بالا  می بینید که بین هر عنصر یک نود خالی وجود دارد.

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


    برای مشاهده فیلم ها و آموزش های پروژه محور برنامه نویسی PHP کلیک کنید.

    READ MORE
  • مثال (تصاویر در HTML)

    Norwegian Mountain TripPulpit Rock

    خودتان امتحان کنید »

    مثال - خودتان امتحان کنید

    Wiki

    Insert images
    نحوه درج تصویر در سند HTML.

    Insert images from different locations
    نحوه درج تصویر از پوشه ای دیگر یا از سروری دیگر.

    (شما می توانید مثال های بیشتری را در پایین این صفحه مشاهده کنید.)


    تگ <img> و خصوصیت Src

    Wiki

    در HTML، تصاویر به وسیله تگ <img> تعریف می شوند.

    تگ <img> خالی می باشد(یک عنصر تهی می باشد)، به این معنی که این تگ تنها حاوی خصوصیت ها می شود و تگ بسته ای ندارد.

    برای نمایش تصویر در صفحه وب، به خصوصیت src نیاز دارید. src مخفف کلمه source می باشد. مقدار این خصوصیت آدرس URL تصویری است که می خواهید نمایش داده شود. 

    فرم نوشتاری تگ img

    <img src="/url" alt="some_text"/>

    URL اشاره دارد به مکانی که تصویر در آن ذخیره شده است. یک تصویر با نام boat.gif، در پوشه images در سایت beyamooz.com واقع شده که دارای URl به این صورت http://beyamooz.com/images/boat.gif می باشد.

    مرورگر تصویری را که در تگ <img> وجود دارد را نشان می دهد. اگر شما تگ تصویر را بین دو پاراگراف قرار دهید، مرورگر ابتدا پاراگراف اول را نشان می دهد، سپس عکس و بعد از آن پاراگراف دوم را می آورد.


    خصوصیت ALT

    Wiki

    خصوصیت alt یک alternate text یا "متن جایگزین" را برای یک تصویر مشخص می کند، که اگر عکس نمایش داده نشود آن متن نمایش داده می شود.

    ذکر خصوصیت alt الزامی است و بدون آن صفحه وب، استاندارد نخواهد بود.

    <img src="/boat.gif" alt="Big Boat" />

    اگر کاربری به دلایلی (مثل کند بودن اتصال، خطایی در خصوصیت scr رخ دهد یا اگر کاربر از یک screen reader استفاده کند) نتواند عکس را مشاهده کند، خصوصیت alt اطلاعاتی در مورد عکس ارائه می دهد.


    تنظیم طول و عرض یک عکس

    Wiki

    خصوصیت height و width برای مشخص کردن طول و عرض یک عکس استفاده می شود.

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

    <img src="/pulpit.jpg" alt="Pulpit rock" width="304" height="228" />

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


    نکات اساسی و مفید

    Wiki

    نکته: اگر یک فایل HTML حاوی ده تصویر باشد، یازده فایل (شامل 10 فایل تصویر و فایل HTML صفحه) برای نمایش صحیح صفحه نیاز می باشد. بارگذاری تصاویر زمان بر است، بنابراین پیشنهاد ما این است که: از تصاویر، با دقت استفاده کنید.

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


    مثال - خودتان امتحان کنید

    Wiki

    Aligning images
    نحوه تراز کردن تصویر در یک متن.

    Let the image float
    چگونه اجازه دهیم یک تصویر در سمت چپ یا راست یک پارگراف قرار گیرد.

    Make a hyperlink of an image
    چگونه از یک تصویر به عنوان لینک استفاده کنیم.

    Create an image map
    چگونه یک image map با ناحیه بندی متفاوت ایجاد کنیم که با کلیک روی هر ناحیه یک لینک اجرا شود.


    تگ های تصویر

    TagDescription
    <img />

    تعریف یک تصویر

    <map>

    تعریف یک image map

    <area />

    تعریف ناحیه ای به صورت لینک در یک image-map

    READ MORE
  • مثال (تگ applet در HTML)

    یک applet جاسازی شده در java:

    <applet code="Bubbles.class" width="350" height="350">
    Java applet that draws animated bubbles.
    </applet>

    تعریف و کاربرد تگ applet در HTML

    تگ <applet> برای فراخوانی برنامه های کوچک جاوا که تنها سمت کاربر اجرا می شود و اپلت نام دارد استفاده می شود.

    تگ <applet> در HTML5 پشتیبانی نمی شود به جای آن می توان از تگ <object> استفاده کرد.

    تگ  <applet> یک applet، جاسازی شده (embedded) را تعریف می کند.


    پشتیبانی مرورگرها از تگ applet در HTML

    عنصر     
    <applet>پشتیبانی نمی شودبلهبلهبلهپشتیبانی نمی شود

    نکته: هنوز هم بعضی از مرورگرها تگ <applet> راساپورت می کنند اما نیاز به اضافه کردن plugin جانبی دارند.


    تفاوت بین HTML 4.01 و HTML5

    تگ <applet> در HTML5پشتیبانی نمی شود.


    خصوصیت های الزامی

    خصوصیتمقدارتوضیحات
    codeURLنام فایل یک applet جاوا را اختصاص می دهد.
    objectnameاشاره به نمایش سریال (منبع)از یک applet  (یک منبع به applet ما اختصاص می دهد)

    خصوصیت های اختیاری

    خصوصیتمقدارتوضیحات
    alignleft
    right
    top
    bottom
    middle
    baseline
    مشخص می کند applet مورد نظر، چگونه با توجه به عناصر موجود در محیط تراز یا تنظیم شود. 
    alttextاختصاص متن متناوب به applet مورد نظر
    archiveURLمحل قرارگیری از یک فایل بایگانی شده را مشخص می کند.
    codebaseURLبه applet مشخص شده در code، یک URL  نسبی پایه اختصاص می دهد.
    heightpixelsارتفاع applet را مشخص می کند.
    hspacepixelsفاصله های افقی موجود در اطراف یک applet را مشخص می کند.
    namenameاختصاص نام برای یک applet (برای استفاده در script ها)
    vspacepixelsفاصله های عمودی در اطراف یک applet را تعیین می کند.
    widthpixelsعرض applet را مشخص می کند.
    READ MORE
  • مثال (تگ b در HTML)

    <p>This is normal text - <b>and this is bold text</b>.</p>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ b در HTML

    تگ <b> بخشی از متن را برجسته نمایش می دهد.


    پشتیبانی مرورگرها از تگ b در HTML

    عنصر     
    <b>بلهبلهبلهبلهبله

    تفاوت بین HTML 4.01 و HTML5

    تفاوتی وجود ندارد.


    نکته ها و ترفندها

    نکته: با توجه به مشخصات HTML5، تگ <b> باید به عنوان  آخرین راه حلی باشد که به کار می رود و در شرایطی از آن استفاده می کنیم که هیچ تگ مناسب تری موجود نباشد. در HTML5 برای عناوین از تگ ها <h1> تا <h6> ، برای نمایش تاکید شده متن از تگ <em>، برای متن های مهم از تگ <strong> و برای متن های هایلایت شده از تگ <mark> استفاده می کنیم.

    نکته:همچنین می توان از خاصیت font-weight در CSS، جهت برجسته کردن متن استفاده کرد.


    ویژگی های عمومی تگ b در HTML

    تگ <b> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ b در HTML

    تگ <b> از رویدادهای عمومی در HTML پشتیبانی می کند.

    READ MORE
  • مثال (تگ canvas در HTML)

    رسم یک مربع قرمز شناور از طریق تگ<canvas> :

    <canvasid="myCanvas"></canvas>

    <script>
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
    ctx.fillRect(0,0,80,80);
    </script>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ canvas در HTML

    تگ <canvas> به منظور رسم گرافیک های شناورکه از طریق برنامه نویسی (معمولا زبان JavaScript) به کار می رود.

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


    پشتیبانی مرورگرها از تگ canvas در HTML

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

    عنصر     
    <canvas>4.09.02.03.19.0

    تفاوت بین HTML 4.01 و HTML5

    تگ <canvas> یک تگ جدید در HTML5 است.


    نکته ها و ترفندها

    نکته: هر گونه متن داخل تگ <canvas> در مرورگر هایی که از آن پشتیبانی نمی کنند نمایش داده می شود.

    نکته: جهت مشاهده مرجع کامل خواص و روش های قابل استفاده با canvas می توانید رجوع کنید به:آموزش HTML5-عنصر canvas 


    خصوصیت ها

    = جدید در HTML5.

    خصوصیتمقدارتوضیحات
    heightpixelsمشخص کننده ارتفاع canvas
    widthpixelsمشخص کننده عرض canvas

    ویژگی های عمومی تگ canvas در HTML

    تگ <canvas> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ canvas در HTML

    تگ <canvas> از رویدادهای عمومی در HTML پشتیبانی می کند.

    READ MORE
  • مثال (تگ frame در HTML)

    یک صفحه ساده با سه frame:

    <framesetcols="25%,50%,25%">
      <framesrc="frame_a.htm">
      <framesrc="frame_b.htm">
      <framesrc="frame_c.htm">
    </frameset>

    خودتان امتحان کنید »

    شما می توانید مثال های بیشتری را در پایین این صفحه مشاهده کنید.


    تعریف و کاربرد تگ frame در HTML

    تگ <frame> در HTML5 پشتیبانی نمی شود.

    تگ <frame> یک پنجره خاص (قاب) را  در یک <frameset> تعریف می کند.

    هر <frame> داخل <frameset> می تواند ویژگی های مختلفی از جمله: border ،scrolling و ability to resize (قابلیت تغییر سایز) و... داشته باشد.

    نکته: اگر می خواهید یک صفحه حاوی frames، را Validate (اعتبار) کنید لازم است که <DOCTYPE>  به یکی از دو حالت  "HTML Frameset DTD" یا "XHTML Frameset DTD" تنظیم شده باشد.


    پشتیبانی مرورگرها از تگ frame در HTML

    عنصر     
    <frame>بلهبلهبلهبلهبله

    تفاوت بین HTML 4.01 و HTML5

    تگ <frame> در HTML5 پشتیبانی نمی شود.


    Differences Between HTML and XHTML

    در HTML، تگ <frame> تگ پایانی ندارد. در XHTML، تگ <frame> باید با یک تگ پایانی بسته شود.


    خصوصیت های اختیاری

    خصوصیتمقدارتوضیحات
    frameborder0
    1
    در HTML5 پشتیبانی نمی شود.
    مشخص می کند که border اطراف frame نمایش داده شود یا نه.
    longdescURLدر HTML5 پشتیبانی نمی شود.
    مشخص کننده آدرس صفحه ای حاوی توضیحات کامل در را بطه با محتویات frame
    marginheightpixelsدرHTML5 پشتیبانی نمی شود.
    مشخص کننده حاشیه بالا یا پایین برای frame
    marginwidthpixelsدر HTML5 پشتیبانی نمی شود.
    مشخص کننده حاشیه چپ یا راست برای frame
    nametextدرHTML5 پشتیبانی نمی شود.
    مشخص کننده یک name برای frame
    noresizenoresizeدر HTML5 پشتیبانی نمی شود
    مشخص می کند که  frame قابلیت resizable ( تغییر سایز) را ندارد.
    scrollingyes
    no
    auto
    در HTML5 پشتیبانی نمی شود.
    مشخص می کند که scrollbars در frame نمایش داده شود یا خیر.
    srcURLدر HTML5 پشتیبانی نمی شود.
    مشخص کننده  URL یک سندی که در frame نمایش داده می شود.

    خودتان امتحان کنید - مثال

     

    Horizontal frameset
     چگونه یک frameset افقی با سه سند متفاوت ایجاد کنیم.

    Mixed frameset
     چگونه از frameset برای سه documents استفاده کنیم و چگونه آنها در سطر و ستون میکس کنیم.

    Frameset with noresize="noresize" 
     چگونه از ویژگی "noresize" استفاده کنیم و همچنین border بین فریم A و B قابل اندازه بندی مجدد نیست.

    READ MORE
  • مثال (تگ hgroup در HTML)

    استفاده از تگ <hgroup> برای گروه heading:

    <hgroup>
    <h1>Welcome to my WWF</h1>
    <h2>For a living planet</h2>
    </hgroup>

    <p>The rest of the content...</p>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ hgroup در HTML

    تگ <hgroup> برای عناصر گروه heading (عنوان) استفاده می شود.

    تگ <hgroup> برای گروه عناصر <h1> تا <h6> استفاده می شود، هنگامی که یک heading (عنوان) در سطوح مختلف (سر فصل ها) است.


    پشتیبانی مرورگرها از تگ hgroup در HTML

    برای اولین بار است که شماره در نسخه مرورگر نشان داده می شود، شما به طور کامل پشتیبانی عناصر را مشخص کنید.

    عنصر     
    <hgroup>5.09.04.04.111.1

    تفاوت بین HTML 4.01 و HTML5

    تگ <hgroup> یک تگ جدید در HTML5 است.


    ویژگی های عمومی تگ hgroup در HTML

    تگ <hgroup> از ویژگی های عمومی در HTML پشتیبانی می کند.


    رویدادهای عمومی تگ hgroup در HTML

    تگ <hgroup> از رویدادهای عمومی در HTML پشتیبانی می کند.


    تنظیمات پیش فرض  CSS

    بیشتر مرورگرها عنصر <hgroup> را با مقادیر پیش فرض زیر نشان می دهند:

    hgroup {
        display: block;
    }
    READ MORE
  •  

    مثال (تگ i در HTML)

    <p>He named his car <i>The lightning</i>, because it was very fast.</p>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ i در HTML

    تگ <i> بخشی از متن را با صدا یا حالتی متناوب تعریف می کند. محتوای تگ <i> معمولا به صورت کج یا مورب نشان داده می شود.

    تگ <i> را می توان برای نشان دادن یک اصطلاح فنی، یک عبارت از زبانی دیگر، یک فکر، یک نام و غیره استفاده کرد.

    از عنصر <i> زمانی استفاده می کنیم که یک عنصر معنایی (semantic) مناسب تری پیدا نکنیم، مانند زیر:


    پشتیبانی مرورگرها از تگ i در HTML

    عنصر     
    <i>بلهبلهبلهبلهبله

    تفاوت بین HTML 4.01 و HTML5

    در HTML 4.01، تگ <i> برای متن به صورت مورب استفاده می شود، با این حال، در HTML5 کاربردی ندارد. زیرا این گونه تغییرات را می توان با استایل دادن به متن درون تگ <i> مانند زیر ایجاد کرد:

    مثال (تگ i در HTML)

    i{
        font-style: italic;
    }

    خودتان امتحان کنید »

    ویژگی های عمومی تگ i در HTML

    تگ <i> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ i در HTML

    تگ <i> از رویدادهای عمومی در HTML پشتیبانی می کند.

    READ MORE
  • مثال (تگ iframe در HTML)

    در مثال زیر، با استفاده از تگ iframe سایت بیاموز را در صفحه جاری نمایش می دهیم:

    <iframesrc="http://www.beyamooz.com"></iframe>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ iframe در HTML

    از تگ iframe برای نمایش یک صفحه دیگر در صفحه HTMLکنونی استفاده می شود.


    پشتیبانی مرورگرها از تگ iframe در HTML

    عنصر     
    <iframe>بلهبلهبلهبلهبله

    نکته ها و ترفندها

    نکته:برای مرورگرهایی که تگ <iframe> را پشتیبانی نمی کنند، می توانید یک متن دلخواه بین تگ باز و بسته <iframe> <iframe/> قرار دهید.

    نکته: برای استایل دادن به تگ <iframe> از CSS استفاده می کنیم. (حتی اضافه کردن scrollbars)


    تفاوت بین HTML 4.01 و HTML5

    در HTML5 تعدادی خصوصیت جدید افزوده شده، در حالی که تعدادی از خصوصیت های HTML4.01 حذف شده است.


    تفاوت بین HTML و XHTML

    در XHTML، خصوصیت name قدیمی شده است و ممکن است در آینده حدف شود. به جای آن می توان از خصوصیت id استفاده کرد.


    خصوصیت ها

    = جدید در HTML5.

    خصوصیتمقدارتوضیحات
    alignleft
    right
    top
    middle
    bottom
    در HTML5 پشتیبانی نمی شود.
     مشخص می کند که <iframe> نسبت به عناصر اطراف چگونه ترازبندی شود.
    frameborder1
    0
    در HTML5 پشتیبانی نمی شود.
    مشخص می کند که حاشیه اطراف <iframe> نمایش داده شود یا خیر.
    heightpixelsارتفاع یک <iframe> را مشخص می کند.
    longdescURLدر HTML5 پشتیبانی نمی شود.
    صفحه ای که شامل شرح کامل راجع به محتویات <iframe> است را مشخص می کند.
    marginheightpixelsدر HTML5 پشنیبانی نمی شود.
    حاشیه بالا وپایین <iframe> را مشخص می کند.
    marginwidthpixels

    در HTML5 پشنیبانی نمی شود.
    حاشیه چپ و راست <iframe> را مشخص می کند.

    ametextیک name برای <iframe> مشخص می کند.
    sandbox""
    allow-forms
    allow-same-origin
    allow-scripts
    allow-top-navigation
    قادر است مجموعه ای از محدودیت های اضافی برای محتویات <iframe> مشخص کند.
    scrollingyes
    no
    auto
    در HTML5 پشتیبانی نمی شود.
    مشخص می کند که scrollbar (نوار اسکرول) در یک <iframe> نمایش داده شود یا خیر.
    seamlessseamless مشخص می کند که <iframe> باید شبیه آن قسمت از محتویات سند دیده شود.
    srcURLآدرس سندی که می خواهیم در <iframe> نمایش دهد.
    srcdocHTML_codeمحتویات HTML صفحه ای که باید در <iframe> نمایش داده شود.
    widthpixelsعرض یک <iframe> را مشخص می کند.

    ویژگی های عمومی تگ iframe در HTML

    تگ <iframe> از ویژگی های عمومی در HTML پشتیبانی می کند.


    رویدادهای عمومی تگ iframe در HTML

    تگ <iframe> از رویدادهای عمومی در HTML پشتیبانی می کند.


    آموزش های مرتبط

    آموزش HTML-عنصر iframe

    مرجع اشیاء اچ تی ام ال: تگ iframe در JavaScript 

    READ MORE
  • مثال (تگ img در HTML)

    چگونگی وارد کردن یک تصویر:

    <imgsrc="smiley.gif"alt="Smiley face"height="42"width="42">

    خودتان امتحان کنید »

    در انتهای این آموزش، مثال های بیشتری آورده شده است.


    تعریف و کاربرد تگ img در HTML

    تگ <img> یک تصویر در صفحه HTML تعریف می کند.

    تگ <img> دو خصوصیت الزامی دارد که شامل: src و alt است.

    نکته: از لحاظ فنی تصاویر داخل سند HTMLقرار داده نمی شوند، بلکه تصاویر به سند HTML لینک می شوند. تگ <img> فضایی برای نمایش تصویر ایجاد می کند.

    نکته: برای لینک کردن یک تصویر به آسانی می توان تگ <img> را در تگ <a> قرار داد.


    پشتیبانی مرورگرها از تگ img در HTML

    عنصر     
    <img>بلهبلهبلهبلهبله

    تفاوت بین HTML 4.01 و HTML5

    خصوصیت های: align ،border ،hspace ،longdesc و vspace در HTML5 پشتیبانی نمی شود.


    تفاوت بین  HTML و XHTML

    در HTML تگ <img> تگ پایانی ندارد.

    در XHTML تگ <img> باید با یک تگ پایانی بسته شوند.


    خصوصیت ها

    = جدید در HTML5.

    خصوصیتمقدارتوضیحات
    aligntop
    bottom
    middle
    left
    right
    در HTML5 پشتیبانی نمی شود.
    نحوه تراز بندی <img> نسبت به عناصر اطراف را مشخص می کند.
    alttextخصوصیت alt یک alternate text یا "متن جایگزین" را برای یک تصویر مشخص می کند.
    borderpixelsدر HTML5 پشتیبانی نمی شود.
    ضخامت (border) اطراف عکس را مشخص می کند.
    crossoriginanonymous
    use-credentials
    اجازه می دهد با استفاده از canvas که تصاویری که متعلق به سایت های سوم شخص است و اجازه دسترسی متقابل به مبدا را می دهند، نمایش داده شود. 
    heightpixelsبرای مشخص کردن طول یک عکس استفاده می شود.
    hspacepixelsدر HTML5 پشتیبانی نمی شود.
     فضای خالی طرف راست و چپ تصویر را مشخص می کند.
    ismapismapتصویر را به عنوان یک image-map سمت سرور مشخص می کند.
    longdescURLدر HTML5 پشتیبانی نمی شود.
    مسیر فایلی که اطلاعات کاملی در رابطه با عکس مورد نظر نگهداری می کند را مشخص می کند.
    srcURLURL تصویر را مشخص می کند.
    usemap#mapnameیک تصویر را به عنوان یک image-map سمت کاربر مشخص می کند.
    vspacepixelsدر HTML5 پشتیبانی نمی شود.
     فضای خالی بالا و پایین یک تصویر را مشخص می کند.
    widthpixelsبرای مشخص کردن عرض یک عکس استفاده می شود.

    ویژگی های عمومی تگ img در HTML

    تگ <img> از ویژگی های عمومی در HTML پشتیبانی می کند..


    رویدادهای عمومی تگ img در HTML

    تگ <img> از رویدادهای عمومی در HTML پشتیبانی می کند.


    مثال

    خودتان امتحان کنید - مثال

     

    Insert images from different locations
     نحوه درج تصویر از پوشه ای دیگر یا از سروری دیگر.

    Make a hyperlink of an image
     چگونه از یک تصویر به عنوان لینک استفاده کنیم.

    Create an image map
     چگونه یک image map با ناحیه بندی متفاوت ایجاد کنیم که با کلیک روی هر ناحیه یک لینک اجرا شود.


    آموزش های مرتبط

    آموزش HTML-تصاویر 

    مرجع اشیاء اچ تی ام ال: تگ img در JavaScript 

    READ MORE
  • مثال (تگ link در HTML)

    چگونه از تگ <link> برای اضافه کردن فایل CSS خارجی استفاده کنیم:

    <head>
    <linkrel="stylesheet"type="text/css"href="theme.css">
    </head>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ link در HTML

    تگ <link> ارتباط بین یک سند و یک منبع خارجی را تعریف می کند.

    تگ <link> برای پیوند به style sheets (شیوه نامه های خارجی) استفاده می شود.


    پشتیبانی مرورگرها از تگ link در HTML

    عنصر     
    <link>بلهبلهبلهبلهبله

    نکته: عنصر <link> یک عنصر خالی است، و فقط شامل attributes (خصوصیت ها) می باشد.

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


    تفاوت بین HTML 4.01 و HTML5

    بعضی از خصوصیت های موجود در HTML 4.01 در HTML5 پشتیبانی نمی شوند.

    خصوصیت "sizes" یک خصوصیت جدید در HTML5 است.


    Differences Between HTML and XHTML

    در HTML تگ <link> تگ پایانی ندارد.

    در XHTML تگ <link> باید با یک تگ پایانی بسته شود.


    خصوصیت ها

    = جدید در HTML5.

    خصوصیتمقدارتوضیحات
    charsetchar_encodingدر HTML5 پشتیبانی نمی شود.
    کاراکترها را برای سند لینک شده کد گذاری می کند.
    hrefURLlocation یا آدرس سند لینک شده را مشخص می کند.
    hreflanglanguage_codeزبان مربوط به متن سند لینک شده را مشخص می کند.
    mediamedia_queryمشخص می کند که سند لینک شده برای چه دستگاهی بهینه شده است.
    relalternate
    archives
    author
    bookmark
    external
    first
    help
    icon
    last
    license
    next
    nofollow
    noreferrer
    pingback
    prefetch
    prev
    search
    sidebar
    stylesheet
    tag
    up
    الزامی است. رابطه بین سند کنونی و سند لینک شده را مشخص می کند.
    revreversed relationshipدر HTML5 پشتیبانی نمی شود.
    رابطه بین سند لینک شده با سند کنونی را مشخص می کند.
    sizesHeightxWidth
    any
    اندازه یا سایز منبع لینک شده را مشخص می کند. فقط برای rel=icon
    target_blank
    _self
    _top
    _parent
    frame_name
    در HTML5 پشتیبانی نمی شود.
    مشخص می کند که سند لینک شده کجا و در چه پنجره ای لود شود.
    typemedia_typeنوع media سند لینک شده را مشخص می کند.

    ویژگی های عمومی تگ link در HTML

    تگ <link> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ link در HTML

    تگ <link> از رویدادهای عمومی در HTML پشتیبانی می کند.


    آموزش های مرتبط

    آموزش HTML-سی اس اس 

    مرجع اشیاء اچ تی ام ال:تگ link در JavaScript 

    READ MORE
  • مثال (تگ noframes در HTML)

    یک صفحه با سه قاب با استفاده از تگ <noframes>:

    <html>

    <framesetcols="25%,50%,25%">
      <framesrc="frame_a.htm">
      <framesrc="frame_b.htm">
      <framesrc="frame_c.htm">
      <noframes>Sorry, your browser does not handle frames!</noframes>
    </frameset>

    </html>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ noframes در HTML

    تگ <noframes> در HTML5 پشتیبانی نمی شود.

    تگ <noframes> یک جایگزین برای مرورگرهایی است که از تگ <frame> پشتیبانی نمی کنند. تگ <noframes>می تواند تمامی عناصری که به صورت نرمال در عنصر <body> در صفحه HTML قرار می گیرد را شامل شود.

    تگ <noframes> را می توان برای لینک کردن به یک نسخه بدون فرم از وب سایت و یا برای نمایش یک پیام به کاربران که اطلاع دهد چه فریم هایی مورد نیاز است، استفاده کرد.

    تگ <noframes> داخل عنصر <frameset> قرار می گیرد.

    نکته: اگر می خواهید یک صفحه حاوی frames، را Validate (اعتبار) کنید لازم است که <DOCTYPE>  به یکی از دو حالت  "HTML Frameset DTD" یا "XHTML Frameset DTD" تنظیم شده باشد.


    پشتیبانی مرورگرها از تگ noframes در HTML

    عنصر     
    <noframes>بلهبلهبلهبلهبله

    تفاوت بین HTML 4.01 و HTML5

    تگ <noframes> در HTML5 پشتیبانی نمی شود.


    تفاوت بین  HTML aو XHTML

    نکته مهم: در XHTML Frameset DTD، متن داخل عنصر <noframes> باید داخل عنصر <body> محصور شود.

    READ MORE
  •  

    مثال (تگ param در HTML)

    تنظیم پارامتر "autoplay" با مقدار "true":

    <objectdata="horse.wav">
      <paramname="autoplay"value="true">
    </object>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ param در HTML

    تگ <param> برای تعریف پارامترهای  عنصر <object> استفاده می شود.

    نکته: HTML 5 همچنین شامل دو عنصر جدید <audio> و <video> برای پخش صوت و تصویر می باشد.


    پشتیبانی مرورگرها از تگ param در HTML

    تگ <param> در همه مرورگرهای اصلی پشتیبانی می شود. با این حال، فرمت فایل تعریف شده در عنصر <object> ممکن است در همه مرورگرها پشتیبانی نشود.

    عنصر     
    <param>بلهبلهبلهبلهبله

    تفاوت بین HTML 4.01 و HTML5

    خصوصیت "type" و "valuetype" در HTML5 پشتیبانی نمی شود.


    تفاوت بین  HTML  و  XHTML

    در HTML تگ <param> تگ پایانی ندارد.

    در XHTML تگ <param> باید با یک تگ پایانی بسته شود، مانند <param />.


    خصوصیت ها

    خصوصیتمقدارتوضیحات
    namenameیک name برای param مشخص می کند.
    typemedia_typeدر HTML5 پشتیبانی نمی شود.
    نوع media پارامتر را مشخص می کند.
    valuevalueیک مقدار برای param مشخص می کند.
    valuetypedata
    ref
    object
    در HTML5 پشتیبانی نمی شود.
    مشخص می کند مقدار مورد نظر از چه نوع است.

    ویژگی های عمومی تگ param در HTML

    تگ <param> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ param در HTML

    تگ <param> از رویدادهای عمومی در HTML پشتیبانی می کند.


    آموزش های مرتبط

    مرجع اشیاء اچ تی ام ال: تگ param در JavaScript 

    READ MORE
  • مثال (تگ progress در HTML)

    مقدار پیشرفت یک دانلود:

    <progressvalue="22"max="100"></progress>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ progress در HTML

    تگ <progress> نشان دهنده پیشرفت یک پروسه یا کار است.


    پشتیبانی مرورگرها از تگ progress در HTML

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

    عنصر     
    <progress>8.010.016.06.011.0

    تفاوت بین HTML 4.01 و HTML5

    تگ <progress> یک تگ جدید در HTML5 است.


    نکته ها و ترفندها

    نکته: از تگ <progress> به وسیله JavaScript برای نمایش پیشرفت کار استفاده می کنیم.

    نکته: از تگ <progress> برای نمایش دادن اندازه یا مقیاس استفاده نمی کنیم (به عنوان مثال فضای دیسک استفاده شده و یا ارتباط از نتیجه پرس و جو). برای این کار می توان از تگ <meter> استفاده کنیم.


    خصوصیت ها

    = جدید در HTML5.

    خصوصیتمقدارتوضیحات
    maxnumberمشخص می کند که در کل چه مقدار لازم است که پروسه کامل شود.
    valuenumberمشخص می کند که چه مقدار از پروسه پیش رفته است.

    ویژگی های عمومی تگ progress در HTML

    تگ <proress> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ progress در HTML

    تگ <progress> از رویدادهای عمومی در HTML پشتیبانی می کند.


    آموزش های مرتبط

    مرجع اشیاء اچ تی ام ال: تگ progress در JavaScript 

    READ MORE
  • مثال (تگ ruby در HTML)

    حاشیه نویسی ruby:

    <ruby>
    <rt> ㄏㄢˋ </rt>
    </ruby>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ ruby در HTML

    تگ <ruby> حاشیه نویسی ruby را مشخص می کند.

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

    تگ <ruby> همراه با تگ <rp> و تگ <rt> استفاده می شود: تگ <ruby> شامل یک یا چند کاراکتر است که نیاز به تفسیر یا تلفظ صحیح کارکترها دارد، و تگ <rt> برای دادن اطلاعات و اختیار به تگ <rp> که چه چیزی نشان داده شود، هنگامی که مرورگر از حاشیه نویسی ruby پشتیبانی نکند.


    پشتیبانی مرورگرها از تگ ruby در HTML

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

    عنصر     
    <ruby>5.05.538.05.015.0

    تفاوت بین HTML 4.01 و HTML5

    تگ <ruby> یک تگ جدید در HTML5 است.


    ویژگی های عمومی تگ ruby در HTML

    تگ <ruby> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ ruby در HTML

    تگ <ruby> از رویدادهای عمومی در HTML پشتیبانی می کند.

    READ MORE
  • مثال (تگ samp در HTML)

    قالب متن در یک سند:

    <samp>Sample output from a computer program</samp>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ samp در HTML

    تگ <samp> یک تگ عبارتی است. نمونه خروجی از یک برنامه کامپیوتری را مشخص می کند.

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

    تمام تگ های تعریفی:

    Tagتوضیحات
    <em>متن را به صورت emphasized نمایش می دهد.
    <strong>متن را به صورت strong نمایش می دهد.
    <dfn>جهت تعریف definition term
    <code>متن را به صورت computer code نمایش می دهد.
    <samp>متن را به صورت sample computer code نمایش می دهد.
    <kbd>متن را به صورت keyboard نمایش می دهد.
    <var>متن را به صورت variable نمایش می دهد.

    پشتیبانی مرورگرها از تگ samp در HTML

    عنصر     
    <samp>بلهبلهبلهبلهبله

    تفاوت بین HTML 4.01 و HTML5

    تفاوتی وجود ندارد.


    ویژگی های عمومی تگ samp در HTML

    تگ <samp> از ویژگی های عمومی در HTML پشتیبانی می کند.


    رویدادهای عمومی تگ samp در HTML

    تگ <samp> از رویدادهای عمومی در HTML پشتیبانی می کند.


    آموزش های مرتبط

    آموزش HTML-فرمت دهی متن

    READ MORE
  • مثال (تگ section در HTML)

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

    <section>
      <h1>WWF</h1>
      <p>The World Wide Fund for Nature (WWF) is....</p>
    </section>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ section در HTML

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


    پشتیبانی مرورگرها از تگ section در HTML

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

    عنصر     
    <section>6.09.04.05.011.1

    تفاوت بین HTML 4.01 و HTML5

    تگ <section> یک تگ جدید در HTML5 است.


    ویژگی های عمومی تگ section در HTML

    تگ <section> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ section در HTML

    تگ <section> از رویدادهای عمومی در HTML پشتیبانی می کند.

    READ MORE
  • مثال (تگ select در HTML)

    یک لیست drop-down برای چهار options:

    <select>
      <optionvalue="volvo">Volvo</option>
      <optionvalue="saab">Saab</option>
      <optionvalue="mercedes">Mercedes</option>
      <optionvalue="audi">Audi</option>
    </select>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ select در HTML

    تگ <select> برای ایجاد یک لیست کشویی (drop-down) استفاده می شود.

    تگ <option> درون عنصر <select> گزینه های موجود در لیست را تعریف می کند.


    پشتیبانی مرورگرها از تگ select در HTML

    عنصر     
    <select>بلهبلهبلهبلهبله

    نکته ها و ترفندها

    نکته: عنصر <select> برای کنترل فرم است، و در یک فرم می تواند برای جمع آوری ورودی کاربر استفاده شود.


    تفاوت بین HTML 4.01 و HTML5

    برخی از خصوصیت های جدید در HTML5 اضافه شده است.


    خصوصیت ها

    = جدید در HTML5.

    خصوصیتمقدارتوضیحات
    autofocusautofocusمشخص می کند که بعد از لود شدن صفحه، مکان نما بصورت پیشفرض روی آن فیلد قرار گیرد.
    disableddisabledمشخص می کند که لیست drop-down باید غیر فعال باشد.
    formform_idفرم یا فرم هایی که فیلد مورد نظر به آن ها تعلق دارد را مشخص می کند.
    multiplemultipleمشخص می کند که مقادیر متعددی را می توان یکمرتبه انتخاب کرد.
    namenameیک name برای لیست drop-down تعریف می کند.
    requiredrequiredمشخص می کند که فیلد ورودی قبل از ارسال به سرور باید حتما پر شده باشد.
    sizenumberتعداد مقادیر قابل مشاهده در لیست را مشخص می کند.

    ویژگی های عمومی تگ select در HTML

     تگ <select> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ select در HTML

    تگ <select> از رویدادهای عمومی در HTML پشتیبانی می کند.


    آموزش های مرتبط

    مرجع اشیاء اچ تی ام ال: تگ select در JavaScript 

    READ MORE
  • مثال (تگ source در HTML)

    پخش کننده های صوتی با دو منبع فایل، که مرورگر یکی را انتخاب می کند،بر اساس نوع کدک یا نوع رسانه ای که پشتیبانی می کند:

    <audiocontrols>
      <sourcesrc="horse.ogg"type="audio/ogg">
      <sourcesrc="horse.mp3"type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>

    خودتان امتحان کنید »

    تعریف و کاربرد تگ source در HTML

    تگ <source> برای تعیین منابع چند رسانه ای برای عناصر رسانه هایی، مانند<video> و <audio> استفاده می شود.

    تگ <source> به شما اجازه می دهد که سورس های متفاوت صوتی یا ویدیویی برای مرورگر تعیین کنید تا بر اساس نوع کدک یا نوع رسانه ای که پشتیبانی می کند، یکی را انتخاب کند.


    پشتیبانی مرورگرها از تگ source در HTML

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

    عنصر     
    <source>4.09.03.54.010.5

    تفاوت بین HTML 4.01 و HTML5

    تگ <source> یک تگ جدید در HTML5 است.


    خصوصیت ها

    = جدید در HTML5.

    خصوصیتمقدارتوضیحات
    mediamedia_queryنوع منبع media را مشخص می کند.
    srcURLآدرس فایل صوتی یا تصویری را مشخص می کند.
    typemedia_typeنوع media را برای منبع  media مشخص می کند.

    ویژگی های عمومی تگ source در HTML

    تگ <source> از ویژگی های عمومی در HTMLپشتیبانی می کند.


    رویدادهای عمومی تگ source در HTML

    تگ <source> از-رویدادهای عمومی در HTML پشتیبانی می کند.


    آموزش های مرتبط

    آموزش HTML5-پخش ویدئو 

    آموزش HTML5-پخش صوت

    مرجع اشیاء اچ تی ام ال: تگ source در JavaScript 

    READ MORE
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان