Get the code: learnhtml.txt
HTML مخفف كلمه ی Hyper Text Markup Language می باشد.
یك زبان نشانه گیری است كه با استفاده از كد نویسی می توانیم متن و داده های مختلف را با استفاده از آن نمایش دهیم.
Markup چیست؟ روشی است یرای مرتب كردن داده های صفحه كه با تگ ها ی باز و بسته احاطه شده است. همانند زبان ها ی برنامه نویسی دیگر نسخه های متفاوتی دارد . در اینجا درباره ی HTML5 توضیح داده شده است.
توجه: شما می توانید تگ ها و عناصر مختلفی را تست كنید، هرچه پیش می روید می توانید effect هارو در سایتی مانند codepen مشاهده كنید و روش عملكردشان را بیاموزید تا آشنایی بیشتری با این زبان پیدا كنید. این مقاله پر از syntax 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>
فایل های HTML با پسوند .html یا .htm نمایش داده می شوند و با مایم تایپ text/html شناخته می شوند.
Got a suggestion? A correction, perhaps? Open an Issue on the GitHub Repo, or make a pull request yourself!
Originally contributed by Christophe THOMAS, and updated by 2 contributors.