Share this page

Learn X in Y minutes

Where X=HTML

Get the code: learnhtml-fa.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 شناخته می شوند.

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 1 contributor.