blob: cac945f0a2369c524e56e854dc82b5da8854791c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
---
language: html
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)
|
