0 0 تومان

دسته‌بندی‌ها

تبلیغات اینترنتی
آموزش طراحی سایت (HTML CSS Javascript) | آتریا
آموزش سی شارپ
آموزش فتوشاپ

html

  • DOCTYPE چیست؟

    اعلان <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">

  • iframe چیست؟

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

  • url چیست؟

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

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

  • آموزش XHTML

    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

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

  • ارسال فایل در PHP

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

  • استفاده از css در HTML

    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

  • استفاده از javascripts در HTML

    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 سمت کاربر پشتیبانی نشود متنی را به کاربر نشان می دهد.

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

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

    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  

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

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

  • پخش صدا در HTML

    صداها در 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)

  • تجزیه کننده dom چیست؟

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

  • تصاویر در HTML

    مثال (تصاویر در 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

  • تگ applet در HTML

    مثال (تگ 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 را مشخص می کند.

  • تگ b در HTML

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

  • تگ canvas در HTML

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

  • تگ frame در HTML

    مثال (تگ 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 قابل اندازه بندی مجدد نیست.

  • تگ hgroup در HTML

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

  • تگ i در HTML

     

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

  • تگ iframe در HTML

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

  • تگ img در HTML

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

صفحه1 از3

قالب وردپرس | لرن دی ال

تبلیغات

آموزش ASP.NET Core
آموزش برنامه نویسی
سرور اختصاص ایران سرور
طراحی سایت مشهد
ثبت دامنه
خرید هاست
ثبت دامنه com
ثبت دامنه ir
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی