سبد (0)

html

  • DOCTYPE چیست؟

    17 شهریور 1397

    اعلان <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 وجود داشته است.

    نسخه سال
    HTML 1991
    HTML+ 1993
    HTML 2.0 1995
    HTML 3.2 1997
    HTML 4.01 1999
    XHTML 1.0 2000
    HTML5 2012
    XHTML5 2013

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

    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 چیست؟

    10 شهریور 1397

    یک 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 چیست؟

    17 شهریور 1397

    یک 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

    07 دی 1401

    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

    02 آذر 1399

    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

    05 مهر 1397

    ارسال یا آپلود فایل در 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 در HTML

    10 شهریور 1397

    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

    17 شهریور 1397

    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

    Tag Description
    <script>

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

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

  • استفاده از نام رنگ در HTML

    10 شهریور 1397

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

    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

    15 شهریور 1397

    پاراگراف ها، قسمت عمده ای از یک سند 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

    18 شهریور 1397

    صداها در 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 Vorbis MP3 WAV
    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

    Tag Description
    <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 چیست؟

    10 مهر 1397

    تجزیه کننده 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

    10 شهریور 1397

    مثال (تصاویر در 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 با ناحیه بندی متفاوت ایجاد کنیم که با کلیک روی هر ناحیه یک لینک اجرا شود.

    تگ های تصویر

    Tag Description
    <img />

    تعریف یک تصویر
    <map>

    تعریف یک image map
    <area />

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

  • تگ applet در HTML

    23 شهریور 1397

    مثال (تگ 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پشتیبانی نمی شود.

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

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

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

    خصوصیت مقدار توضیحات
    align left
    right
    top
    bottom
    middle
    baseline    		 مشخص می کند applet مورد نظر، چگونه با توجه به عناصر موجود در محیط تراز یا تنظیم شود. 
    alt text اختصاص متن متناوب به applet مورد نظر
    archive URL محل قرارگیری از یک فایل بایگانی شده را مشخص می کند.
    codebase URL به applet مشخص شده در code، یک URL  نسبی پایه اختصاص می دهد.
    height pixels ارتفاع applet را مشخص می کند.
    hspace pixels فاصله های افقی موجود در اطراف یک applet را مشخص می کند.
    name name اختصاص نام برای یک applet (برای استفاده در script ها)
    vspace pixels فاصله های عمودی در اطراف یک applet را تعیین می کند.
    width pixels عرض applet را مشخص می کند.
    READ MORE

  • تگ b در HTML

    23 شهریور 1397

    مثال (تگ 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

    23 شهریور 1397

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

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

    <canvas id="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.0 9.0 2.0 3.1 9.0

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

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

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

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

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

    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    height pixels مشخص کننده ارتفاع canvas
    width pixels مشخص کننده عرض canvas

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

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

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

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

    READ MORE

  • تگ frame در HTML

    21 شهریور 1397

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

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

    <frameset cols="25%,50%,25%">
      <frame src="frame_a.htm">
      <frame src="frame_b.htm">
      <frame src="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> باید با یک تگ پایانی بسته شود.

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

    خصوصیت مقدار توضیحات
    frameborder 0
    1    		 در HTML5 پشتیبانی نمی شود.
    مشخص می کند که border اطراف frame نمایش داده شود یا نه.
    longdesc URL در HTML5 پشتیبانی نمی شود.
    مشخص کننده آدرس صفحه ای حاوی توضیحات کامل در را بطه با محتویات frame
    marginheight pixels درHTML5 پشتیبانی نمی شود.
    مشخص کننده حاشیه بالا یا پایین برای frame
    marginwidth pixels در HTML5 پشتیبانی نمی شود.
    مشخص کننده حاشیه چپ یا راست برای frame
    name text درHTML5 پشتیبانی نمی شود.
    مشخص کننده یک name برای frame
    noresize noresize در HTML5 پشتیبانی نمی شود
    مشخص می کند که  frame قابلیت resizable ( تغییر سایز) را ندارد.
    scrolling yes
    no
    auto    		 در HTML5 پشتیبانی نمی شود.
    مشخص می کند که scrollbars در frame نمایش داده شود یا خیر.
    src URL در HTML5 پشتیبانی نمی شود.
    مشخص کننده  URL یک سندی که در frame نمایش داده می شود.

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

     

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

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

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

    READ MORE

  • تگ hgroup در HTML

    21 شهریور 1397

    مثال (تگ 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.0 9.0 4.0 4.1 11.1

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

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

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

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

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

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

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

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

    hgroup {
        display: block;
    }
    READ MORE

  • تگ i در HTML

    21 شهریور 1397

     

    مثال (تگ 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

    21 شهریور 1397

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

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

    <iframe src="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.

    خصوصیت مقدار توضیحات
    align left
    right
    top
    middle
    bottom    		 در HTML5 پشتیبانی نمی شود.
     مشخص می کند که <iframe> نسبت به عناصر اطراف چگونه ترازبندی شود.
    frameborder 1
    0    		 در HTML5 پشتیبانی نمی شود.
    مشخص می کند که حاشیه اطراف <iframe> نمایش داده شود یا خیر.
    height pixels ارتفاع یک <iframe> را مشخص می کند.
    longdesc URL در HTML5 پشتیبانی نمی شود.
    صفحه ای که شامل شرح کامل راجع به محتویات <iframe> است را مشخص می کند.
    marginheight pixels در HTML5 پشنیبانی نمی شود.
    حاشیه بالا وپایین <iframe> را مشخص می کند.
    marginwidth pixels

    در HTML5 پشنیبانی نمی شود.
    حاشیه چپ و راست <iframe> را مشخص می کند.
    ame text یک name برای <iframe> مشخص می کند.
    sandbox ""
    allow-forms
    allow-same-origin
    allow-scripts
    allow-top-navigation    		 قادر است مجموعه ای از محدودیت های اضافی برای محتویات <iframe> مشخص کند.
    scrolling yes
    no
    auto    		 در HTML5 پشتیبانی نمی شود.
    مشخص می کند که scrollbar (نوار اسکرول) در یک <iframe> نمایش داده شود یا خیر.
    seamless seamless  مشخص می کند که <iframe> باید شبیه آن قسمت از محتویات سند دیده شود.
    src URL آدرس سندی که می خواهیم در <iframe> نمایش دهد.
    srcdoc HTML_code محتویات HTML صفحه ای که باید در <iframe> نمایش داده شود.
    width pixels عرض یک <iframe> را مشخص می کند.

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

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

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

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

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

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

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

    READ MORE

  • تگ img در HTML

    21 شهریور 1397

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

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

    <img src="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.

    خصوصیت مقدار توضیحات
    align top
    bottom
    middle
    left
    right    		 در HTML5 پشتیبانی نمی شود.
    نحوه تراز بندی <img> نسبت به عناصر اطراف را مشخص می کند.
    alt text خصوصیت alt یک alternate text یا "متن جایگزین" را برای یک تصویر مشخص می کند.
    border pixels در HTML5 پشتیبانی نمی شود.
    ضخامت (border) اطراف عکس را مشخص می کند.
    crossorigin anonymous
    use-credentials    		 اجازه می دهد با استفاده از canvas که تصاویری که متعلق به سایت های سوم شخص است و اجازه دسترسی متقابل به مبدا را می دهند، نمایش داده شود. 
    height pixels برای مشخص کردن طول یک عکس استفاده می شود.
    hspace pixels در HTML5 پشتیبانی نمی شود.
     فضای خالی طرف راست و چپ تصویر را مشخص می کند.
    ismap ismap تصویر را به عنوان یک image-map سمت سرور مشخص می کند.
    longdesc URL در HTML5 پشتیبانی نمی شود.
    مسیر فایلی که اطلاعات کاملی در رابطه با عکس مورد نظر نگهداری می کند را مشخص می کند.
    src URL URL تصویر را مشخص می کند.
    usemap #mapname یک تصویر را به عنوان یک image-map سمت کاربر مشخص می کند.
    vspace pixels در HTML5 پشتیبانی نمی شود.
     فضای خالی بالا و پایین یک تصویر را مشخص می کند.
    width pixels برای مشخص کردن عرض یک عکس استفاده می شود.

    ویژگی های عمومی تگ 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

    21 شهریور 1397

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

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

    <head>
    <link rel="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.

    خصوصیت مقدار توضیحات
    charset char_encoding در HTML5 پشتیبانی نمی شود.
    کاراکترها را برای سند لینک شده کد گذاری می کند.
    href URL location یا آدرس سند لینک شده را مشخص می کند.
    hreflang language_code زبان مربوط به متن سند لینک شده را مشخص می کند.
    media media_query مشخص می کند که سند لینک شده برای چه دستگاهی بهینه شده است.
    rel alternate
    archives
    author
    bookmark
    external
    first
    help
    icon
    last
    license
    next
    nofollow
    noreferrer
    pingback
    prefetch
    prev
    search
    sidebar
    stylesheet
    tag
    up    		 الزامی است. رابطه بین سند کنونی و سند لینک شده را مشخص می کند.
    rev reversed relationship در HTML5 پشتیبانی نمی شود.
    رابطه بین سند لینک شده با سند کنونی را مشخص می کند.
    sizes HeightxWidth
    any    		 اندازه یا سایز منبع لینک شده را مشخص می کند. فقط برای rel=icon
    target _blank
    _self
    _top
    _parent
    frame_name    		 در HTML5 پشتیبانی نمی شود.
    مشخص می کند که سند لینک شده کجا و در چه پنجره ای لود شود.
    type media_type نوع media سند لینک شده را مشخص می کند.

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

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

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

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

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

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

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

    READ MORE

  • تگ noframes در HTML

    21 شهریور 1397

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

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

    <html>

    <frameset cols="25%,50%,25%">
      <frame src="frame_a.htm">
      <frame src="frame_b.htm">
      <frame src="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

    21 شهریور 1397

     

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

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

    <object data="horse.wav">
      <param name="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 />.

    خصوصیت ها

    خصوصیت مقدار توضیحات
    name name یک name برای param مشخص می کند.
    type media_type در HTML5 پشتیبانی نمی شود.
    نوع media پارامتر را مشخص می کند.
    value value یک مقدار برای param مشخص می کند.
    valuetype data
    ref
    object    		 در HTML5 پشتیبانی نمی شود.
    مشخص می کند مقدار مورد نظر از چه نوع است.

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

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

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

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

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

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

    READ MORE

  • تگ progress در HTML

    21 شهریور 1397

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

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

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

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

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

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

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

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

    عنصر          
    <progress> 8.0 10.0 16.0 6.0 11.0

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

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

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

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

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

    خصوصیت ها

    = جدید در HTML5.

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

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

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

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

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

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

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

    READ MORE

  • تگ ruby در HTML

    21 شهریور 1397

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

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

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

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

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

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

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

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

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

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

    عنصر          
    <ruby> 5.0 5.5 38.0 5.0 15.0

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

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

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

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

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

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

    READ MORE

  • تگ samp در HTML

    21 شهریور 1397

    مثال (تگ 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

    21 شهریور 1397

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

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

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

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

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

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

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

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

    عنصر          
    <section> 6.0 9.0 4.0 5.0 11.1

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

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

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

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

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

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

    READ MORE

  • تگ select در HTML

    21 شهریور 1397

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

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

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

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

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

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

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

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

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

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

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

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

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

    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    autofocus autofocus مشخص می کند که بعد از لود شدن صفحه، مکان نما بصورت پیشفرض روی آن فیلد قرار گیرد.
    disabled disabled مشخص می کند که لیست drop-down باید غیر فعال باشد.
    form form_id فرم یا فرم هایی که فیلد مورد نظر به آن ها تعلق دارد را مشخص می کند.
    multiple multiple مشخص می کند که مقادیر متعددی را می توان یکمرتبه انتخاب کرد.
    name name یک name برای لیست drop-down تعریف می کند.
    required required مشخص می کند که فیلد ورودی قبل از ارسال به سرور باید حتما پر شده باشد.
    size number تعداد مقادیر قابل مشاهده در لیست را مشخص می کند.

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

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

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

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

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

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

    READ MORE

  • تگ source در HTML

    21 شهریور 1397

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

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

    <audio controls>
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>

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

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

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

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

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

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

    عنصر          
    <source> 4.0 9.0 3.5 4.0 10.5

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

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

    خصوصیت ها

    = جدید در HTML5.

    خصوصیت مقدار توضیحات
    media media_query نوع منبع media را مشخص می کند.
    src URL آدرس فایل صوتی یا تصویری را مشخص می کند.
    type media_type نوع media را برای منبع  media مشخص می کند.

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

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

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

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

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

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

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

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

    READ MORE

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

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