اگر چه وب سایت های امروزی از مدرنترین زبان های برنامه نویسی ایجاد شده و رابط های کاربری فوق العاده ای دارند اما بسیار مفید خواهد بود که شما برخی از دستورات پایه ای زبان HTML را بدانید ، اگر شما دستورات زیر را به خوبی فرا بگیرید میتوانید به راحتی اولین وب سایت خود را ایجاد کنید.
در این مقاله بجای آموزش ریز به ریز از مثال های کاربری استفاده کرده ایم تا زودتر دستورات را فرا بگیرید.

  پیشنهاد میکنیم مقاله زیر را هم مطالعه کنید :


1) <DOCTYPE html!> 

در ابتدای هر سند HTML به این دستور احتیاج دارید ، با این دستور به مرورگر میگویید که کدهای این صفحه HTML هستند و باید آنها را بخواند.


2) <html>

این هم تگ دیگری است که به مرورگر میگوید که باید کدهای HTML را بخواند ، تک <html> دقیقا بعد از تگ DOCTYPE به کار میرود و باید در آخر هم آن را با <html/> ببندید ، تمامی اجزای سند HTML شما درون این تگ قرار میگیرد.


3) <head>

تگ head سر صفحه HTML است و محتویات درون آن در صفحه ظاهر نمیشوند ، در عوض مکان خوبی برای موتورهای جستجو است زیرا عنوان صفحه ، کلمات کلیدی ، توضحیات صفحه و... در این صفحه قرار میگیرند.


4) <title>

<title>

این تگ عنوان صفحه شما را مشخص میکند ، همه کاری که باید انجام دهید این است که این تگ را درون Head قرار دهید مانند زیر :

 <head>
<title>My Website</title>
</head>

از این پس با باز کردن صفحه ، عنوان به My Website تغییر خواهد یافت.


5) <meta>

مانند تگ title این تگ هم درون Head شما قرار میگیرد ، این تگ توسط موتورهای جستجو به خوبی شناسایی و مورد استفاده قرار میگرید زیرا آنچه باید در مورد صفحه شما بدانند را در این تگ خواهند یافت.

این تگ شامل دستورات داخلی زیاد است که چند مورد مهم آنها عبارت اند از :

  • description : شرح یا توضیحی از صفحه شما.
  • keywords : کلمات کلیدی مرتبط با صفحه شما.
  • author : نویسنده صفحه.
  • viewport : این تگ برای این است که صفحه شما به خوبی با تمام دستگاه های مختلف مانند گوشی سازگاری دارد.

در زیر مثال هایی از این متا تگ ها را مشاهده میکنید :

 <meta name="description" content="A basic HTML tutorial">

<meta name="keywords" content="HTML,code,tags">

<meta name="author" content="OMIGO">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

تگ viewport همیشه باید به صورت width=device-width, initial-scale=1.0 باشد که به معنی سازگاری با تمامی دستگاه ها است.


6) <body>

پس از بخش head ، شما باید از تگ Body استفاده کنید ، آن را با تگ <body> شروع و با تگ </body> باید خاتمه دهید.

این تگ درون تگ <head> باید باشد ، تمام محتویات صفحه شما در این تگ قرار میگرید ، به مثال ساده زیر توجه کنید :

<body>

Everything you want displayed on your page.

</body>


7) <h1>

تگ <h1> یک سرصفحه را مشخص میکند.  به طور کلی ما از <h1> تا <h6> را در اختیار داریم که هر چه قدر عدد بزرگتر بشود سر صفحه کوچکر خواهد شد.

به مثال های زیر دقت کنید تا به طور کامل متوجه تفاوت آنها شوید :

<h1>Big and Important Header</h1>

<h2>Slightly Less Big Header</h2>

<h3>Sub-Header</h3>

خروجی :

<h1>

همانطور که میبینید هرچه قدر ارقام H بزرگتر میشوند متون کوچکتر میشوند.


8) <p>

تگ <p> یا همان پاراگراف همانطور که مشخص است یک پاراگراف جدید برای ما ایجاد میکند.

به مثال های زیر دقت کنید ، ما دو پاراگراف با متون مختلف را ایجاد کرده ایم :

<p>Your first paragraph</p>
<p>Your second paragraph</p>

خروجی :

Your first paragraph

Your second paragraph

همچنین شما میتوانید از دستورات CSS برای زیبایی این متون استفاده کنید ، به مثال زیر دقت کنید ما توسط css متن خود را بزرگتر کرده ایم :

<p style="font-size: 120%;">larger text</p>

خروجی :

larger text


9) <br>

این تگ برای شکستن بین خطوط مورد استفاده قرار میگیرد :

<p>The first line.<br>

The second line (close to the first one).</p>

خروجی :

The first line.
The second line (close to the first one).


10) <strong>

strong متون مهم را از سایر متون مشخصتر میسازد.

<strong>Very important things you want to say</strong>

خروجی :

Very important things you want to say

اگر شما از تگ <b> استفاده میکنید مشکلی نیست چون تقریبا شبیه به <strong> است اما هیچ تضمینی وجود ندارد که <b> در نسخه های بعدی HTML پشتیبانی شود.


11) <em>

تگ <em> همانند دستور <i> عمل میکند و یک متن کلاسیک با حالت کج به شما ارائه میکند.

<em>An emphasized line.</em>

خروجی :

An emphasized line.

شما میتوانید از <i> هم استفاده کنید اما ممکن است در نسخه های بعدی html این تگ پشتیبانی نشود.


12) <a>

تگ <a> یکی از پرکاربردترین تگ های html به شمار میرود ، به کمک این تگ میتوانید لینک ایجاد کنید ، به مثال زیر دقت کنید :

<a href="https://www.omigo.ir/">Go to OMIGO</a>

خروجی :

Go to OMIGO

ویژگی href مقصد لینک را مشخص میکند یعنی اینکه اگر بر روی لینک کلیک شد به کجا باید رفت ، شما میتوانید یک صفحه وب ، تصویر ، فایل pdf و حتی یک ویدئو را به عنوان مقصد مشخص کنید.

سایر ویژگی ها عبارت اند از : target و title

target به معنی این است که اگر بر روی لینک کلیک شد ، صفحه باید در یک پنجره جدید باز شود ، در یک تب جدید باز شود یا در همان صفحه باز شود.

<a href="https://www.omigo.ir" target="_blank">Go to OMIGO in a new tab</a>

خروجی :

Go to OMIGO in a new tab

ویژگی title باعث میشود که اگر موس بر روی لینک برود یک حباب توضیح در مورد آن لینک باز شود ، توضیح باید در درون title نوشته شود.

<a href="https://www.omigo.ir/" title="This is a tool tip">Hover over this to see the tool tip</a>

خروجی :

Hover over this to see the tool tip


13) <img>

اگر میخواهید یک تصویر را در صفحه خود منتشر کنید باید از تگ <img> استفاده کنید ، این تگ از ویژگی های مختلفی مانند src استفاده میکند ، شما باید تصویر را در src مشخص کنید :

<img src="https://omigo.ir/uploads/File/sunlit-birds.jpg">

خروجی :


ویزگی های مختلف دیگری مانند height ، width و alt هم در دسترس هستند به مثال زیر دقت کنید :

<img src="https://omigo.ir/uploads/File/sunlit-birds.jpg" alt="the name of your image">

همانطور که مبییند در این مثال ما ویژگی width (طول) و height (عرض) را در تگ استفاده کردیم ، اگر این ویژگی ها را استفاده نکنید طول و عرض اصلی عکس تنظیم خواهد شد.

ویژگی Alt هم زمانی کاربردی است که اگر تصویر شما لود نشود کاربر بتواند توسط متن توضیح alt به ماهیت تصویر پی ببرد ، همچنین موتورهای جستجو به alt نگاه ویژه ای دارند.


14) <ol>

این تگ برای فهرست بندی مرتب به کار میرود ، در مواقع با تگ <ol> مشخص میکنید که قصد ایجاد یک لیست مرتب را دارید و با <li> هر ردیف را مشخص میکنید.

<ol>

<li>First thing</li>

<li>Second thing</li>

<li>Third thing</li>

</ol>

خروجی :

  1. First thing
  2. Second thing
  3. Third thing

در HTML5 شما میتوانید از تگ <ol reversed> برای مرتب سازی معکوس استفاده کنید ، همچنین میتوانید مقدار شروع را مشخص کنید.

ویژگی type به شما اجازه میدهد که بتوانید به غیر از عدد از نماد ها و حروف ها استفاده کنید به طور کلی این نوع ها عبارت اند از “1” “A” “a” “I” “i”

<ol type="A">

خروجی :

  1. First thing
  2. Second thing
  3. Third thing


15) <ul>

این تگ برای ایجاد لیست های غیرمرتب استفاده میشود.

<ul>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ul>

نتیجه :

  • First item
  • Second item
  • Third item

لیست های غیرمرتب دارای یک ویژگی type میباشند که شامل disc ، circle و square هستند.


16) <table>

یکی از پرکاربردترین تگ های مورد استفاده در سایت ها <table> است که در این تگ میتوانید سطر و ستون های مختلفی را مشخص کنید به کد زیر دقت کند :

<table>

<tbody>

<tr>

<th>1st column</th>

<th>2nd column</th>

</tr>

<tr>

<td>Row 1, column 1</td>

<td>Row 1, column 2</td>

</tr>

<td>Row 2, column 1</td>

<td>Row 2, column 2</td>

</tbody>

</table>

تگ با <table> شروع و با <table/> پایان پیدا میکند ، درون آن نیز تگ <tbody> وجود دارد که باید تمامی محتویات جدول درون آن باشد.

هر سطر در جدول با تگ <tr> ایجاد میشود ، و هر سر ستون با <th> مشخص میشود ، هر سلول درون سطرها نیز با <td> مشخص میشود.

خروجی :

1st column2nd column
Row 1, column 1Row 1, column 2
Row 2, column 1Row 2, column 2


17) <blockquote>

هنگای که در وب سایتی از شخصی نقل قول میشود یا میخواهید متنی با سایر متون متفاوت باشد میتوانید از این تگ استفاد کنید.

<blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past</blockquote>

خروجی :

The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past

شما میتوانید از قالب بندی های css برای زیباتر شدن نقل قول ها به صورت سفارشی تر استفاده کنید مانند مثال زیر :

The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past


نتیجه گیری

با فرا گرفتن این 17 تگ از این پس میتوانید یک صفحه html ایجاد کنید ، برای یادگیری صحیحتر و مشاهده نمونه کدها اینجا کلیک کنید تا یک فایل html را دانلود کنید ، این فایل HTML را در مرورگر خود باز کنید و توسط یک ویرایشگر متن مانند notepad به مرور کدها بپردازید.