mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-23 17:41:41 +00:00
148 lines
6.3 KiB
Markdown
148 lines
6.3 KiB
Markdown
---
|
||
filename: learnhtml-fa.txt
|
||
contributors:
|
||
- ["Christophe THOMAS", "https://github.com/WinChris"]
|
||
translators:
|
||
- ["Hiva Zarei", "https://github.com/hivazarei"]
|
||
---
|
||
|
||
<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)
|