--- language: html filename: learnhtml-fa.txt contributors: - ["Christophe THOMAS", "https://github.com/WinChris"] translators: - ["Hiva Zarei", "https://github.com/hivazarei"] lang: fa-ir --- <p dir="rtl">HTML مخفف كلمه ی Hyper Text Markup Language می باشد.</p> <p dir="rtl">یك زبان نشانه گیری است كه با استفاده از كد نویسی می توانیم متن و داده های مختلف را با استفاده از آن نمایش دهیم.</p> <p dir="rtl">Markup چیست؟ روشی است یرای مرتب كردن داده های صفحه كه با تگ ها ی باز و بسته احاطه شده است. همانند زبان ها ی برنامه نویسی دیگر نسخه های متفاوتی دارد . در اینجا درباره ی HTML5 توضیح داده شده است.</p> <p dir="rtl"><b>توجه:</b> شما می توانید تگ ها و عناصر مختلفی را تست كنید، هرچه پیش می روید می توانید effect هارو در سایتی مانند codepen مشاهده كنید و روش عملكردشان را بیاموزید تا آشنایی بیشتری با این زبان پیدا كنید. این مقاله پر از syntax HTML و نكات پر كاربرد می باشد.</p> ```html <!-- كامنت ها مشابه همین خط جاری باز و بسته می شوند --> <!-- كامنت ها می توانند چند خطی نیز باشند --> <!-- #################### تگ ها #################### --> <!-- توضیحات زیر مثال یك فایل( اچ تی ام ال) است كه تجزیه و تحلیل شده است. --> <!doctype html> <html> <head> <title>وب سایت من</title> </head> <body> <h1>!سلام دنیا</h1> <a href="http://codepen.io/anon/pen/xwjLbZ"> به این لینک مراجعه فرمایید </a> <p>این یک پاراگراف است</p> <p>این هم یک پاراگراف دیگر است</p> <ul> <li>این یک گزینه در لیست غیرترتیبی می‌باشد</li> <li>این یک گزینه دیگر می‌باشد</li> <li>و این هم آخرین گزینه در لیست می باشد</li> </ul> </body> </html> <!-- فایل اچ تی ام ال همیشه در ابتدای کار به مرورگر نشان می‌دهد که یک سند از نوع اچ تی ام ال است --> <!doctype html> <!-- شروع می‌شود html سپس تگ آغازین --> <html> <!-- بسته می شود </html> این تگ در انتهای فایل به صورت --> </html> <!--در بین این تگ آغازین و پایانی، موارد زیر را خواهیم داشت --> <!-- بسته می گردد </head> تعریف می شود و به صورت تگ <head> یک هدر توسط تگ --> <head> <!-- هدر شامل اطلاعات اضافی و توضیحات وب سایت است که در مرورگر نمایش داده نمی‌شوند. به این اطلاعات متا دیتا گفته می شود. --> <!-- برای مرورگر مشخص می کند که چه عبارتی را در نوار عنوان و نام تب نمایش دهد <title> تگ --> </head> <!-- می رسد <body> نوبت به تگ <head> بعد از تگ --> <!-- تا این مرحله، هیچ خروجی قابل نمایشی در صفحه مرورگر نمایش داده نخواهد شد --> <!-- قرار دهیم <body> برای نمایش محتوا باید آن ها را در تگ --> <body> <!-- یک عنوان را ایجاد می کند <h1> تگ --> <h1>سلام، دنيا!</h1> <!-- نیز ایجاد کرد (h6) تا درجه اهمیت پایین تر (h2) همچنین می توانید زیرعنوان های دیگری با درجه اهمیت بالا --> <!-- می توانیم یک لینک به آدرس مورد نظر ایجاد کنیم href و صفت <a> با استفاده از تگ --> <a href="http://codepen.io/anon/pen/xwjLbZ"> به این لینک مراجعه فرمایید </a> <!-- این امکان را به ما می دهد تا متنی را در صفحه قرار دهیم <p> تگ --> <p>اين يك پاراگراف است</p> <p> اين يك پاراگراف ديگر است</p> <!-- یک لیست ایجاد می کند ul تگ --> <!-- استفاده کنیم <ol> برای داشتن یک لیست شمارشی باید از تگ --> <ul> <li>ین یک گزینه در لیست غیرترتیبی می‌باشد</li> <li> اين يك آيتم ديگر است</li> <li>اين آخرين آيتم داخل ليست هست</li> </ul> </body> <!-- به همین راحتی می باشد HTML تمام شد! ایجاد فایل --> <!-- البته امکان اضافه کردن تگ های دیگر نیز وجود دارد --> <!-- را می توان برای قرار دادن تصویر در صفحه استفاده کرد <img /> برای مثال تگ --> <!-- مشخص می‌کنیم. این مسیر می تواند آدرس یک فایل بر روی سیستم شما یا در بستر وب باشد src مسیر فایل تصویر را با استفاده از صفت --> <img src="http://i.imgur.com/XWG0O.gif"/> <!-- همچنین شما می توانید جدول هم ایجاد كنید --> <!-- شروع می‌کنیم <table> با یک تگ --> <table> <!-- باعث ایجاد سطر های جدول می شود tr تگ --> <tr> <!-- می توان برای ستون های جدول، عناوین مناسب تعیین کرد th با استفاده از تگ --> <th>اولين هدر</th> <th>دومين هدر</th> </tr> <tr> <td>اولين رديف، اولين ستون</td> <td>اولين رديف دومين ستون</td> </tr> <tr> <!-- باعث ایجاد ستون های جدول می شود td تگ --> <td>دومين رديف اولين ستون</td> <td>دومين رديف دومين ستون</td> </tr> </table> ``` <h2 dir="rtl">استفاده</h2> <p dir="rtl"> فایل های HTML با پسوند .html یا .htm نمایش داده می شوند و با مایم تایپ text/html شناخته می شوند. </p> <h2 dir="rtl">HTML زبان برنامه‌نویسی محسوب نمی‌شود.</h2> <h2 dir="rtl">برای یادگیری بیشتر</h2> * [Wikipedia](https://en.wikipedia.org/wiki/HTML) * [HTML tutorial](https://developer.mozilla.org/en-US/docs/Web/HTML)