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

ابزارهای مورد نیاز برای آموزش html :

ابزارهای مورد نیاز برای کاربردهای پیشرفته تر متفائت هستند ولی ما در اینجا برای آموزش و یادگیری فقط به ابزار Notepad در ویندوز و یا TextEdit در مکنتاش نیاز داریم که همان نرم افزارهای پیش فرض می باشند و ما در این آموزش از Notepad در ویندوز استفاده می کنیم. برای شروع ابتدا نرم افزار Notepad را باز کرده یکسری کد را در آن می نویسم. این کدها پایه تمام کدهای HTML می باشد و هر کدی را که می خواهید اضافه کنید باید درون این کدها قرار بگیرند.

<!DOCTYPE html>
<html>

<head>
</head>
<body>
</body>
</html>

کدهای بالا را به همین شکلی که هست درون نرم افزار بنویسید و سپس فایل را با یک نام و پسوند .htm و utf-8 ذخیره کنید. برای مشاهده کدهای خود در مرورگر بر روی فایل کلیک راست کرده و بر روی Open With رفته و یکی از مرورگرهای خود را انتخاب کنید تا کدها خوانده شده و نمایش داده شوند. البته با کدهای بالا فعلا چیزی نمایش داده نمی شود و هر چه جلوتر برویم این کدها بیشتر و بهتر خودشان را نشان خواهند داد.

حالا یک مثال از مطالب گفته شده میزنیم:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>

حالا اگر این کد را در فایل بنویسید و ذخیره و سپس نمایش دهید نتیجه را خواهید دید. یکسری کد را اضافه کرده ایم که بعدا به طور کامل آنها را معرفی می کنیم.

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

همان طور که مشاهده می کنید تمامی کدها با تگ <!DOCTYPE html> آغاز می شوند. تگ بعدی <html> است که تمامی تگ ها درون آن قرار می گیرند. بعد از آن تگ <head> که در آن یکسری کدها برای سربرگ و … نوشته می شود. تگ بعدی <body> است که هر کدی درون آن قرار گیرد در مرورگر قابل نمایش می باشد.

توجه داشته باشید از این به بعد تمامی تگ ها را درون تگ <body> قرار می دهیم تا نمایش داده شوند و دیگر کدهای گفته شده را نمی نویسیم.

تگ h1 تا h6 :

این تگ ها برای تیترها به کار می رود و تگ h1 بزرگترین و مهمترین و تگ h6 کوچکترین نوع قلم را به شما می دهد. مانند:

<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

تگ P :

این تگ که به تگ پاراگراف معروف است برای ایجاد پاراگراف های متنی به کار می رود. طریقه استفاده از آن نیز مانند زیر می باشد:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

تگ a :

این تگ برای ایجاد لینک به وب سایت و یا صفحات دیگر سایت می باشد. مانند:

<a href=”https://www.site.com”>نام سایت</a>

تگ img :

این تگ برای تعریف و ایجاد و آدرس دهی و نمایش تصاویر به کار برده می شود. مانند:

<img src=”site.jpg” alt=”site.com” width=”104″ height=”142″>

در این تگ بعضی مشخصه ها وجود دارد. مشخصه src همان نام تصویر است و مشخصه alt برای نام دادن به تصویر زمانی که تصویر در سایت به خوبی نمایش داده نمی شود به کار می رود. مشخصه های width و height برای ابعاد تصویر به کار می روند.

تگ buttons :

این تگ برای ایجاد دکمه به کار می رود. مانند :

<button/>کلیک کن<button>

تگ لیست :

همان طور که از اسمش پیداست برای ایجاد انواع لیست در آموزش html از جمله لیست ترتیبی با اعداد و نشانه ها ( تگ ol ) ، لیست غیرترتیبی با اشکال ( تگ ul ) ، اضافه کردن موارد لیست ها ( تگ li ) می باشد. مانند :

<ul>

  <li>اول</li>

  <li>دوم</li>

  <li>سوم</li>

</ul> 

<ol>

  <li>اول</li>

  <li>دوم</li>

  <li>سوم</li>

</ol>

تگ br :

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

صفت style :

این صفت برای ایجاد جلوه ها بر روی اکثر تگ ها به کار می رود. یعنی با این صفت می توانید مثلا رنگ و یا فونت و اندازه پاراگراف را تغییر دهید. مانند:

<p style=”color:red”>این پراگراف به رنگ قرمز است.</p>

صفت lang :

این صفت برای مشخص کردن زبان نوشته ها می باشد و در تگ html به کار می رود. مانند:

<html lang=”en-US”>

صفت title :

این صفت برای این به کار می رود که شما مثلا یک متن و یا تصویر دارید و می خواهید زمانی که کاربر با ماوس بر روی آن متن و یا تصویر رفت یک متن نمایش داده شود. این متن نمایش داده شده را با صفت title می توانید اضافه کنید. مانند:

<h2 title=”I’m a header”>The title Attribute</h2>

خلاصه صفت ها تا به اینجا :

alt : این صفت برای ایجاد نام جایگزین برای تصاویر به کار می رود.

Disabled : مشخص می کند که یک عنصر ورودی باید غیرفعال شود.

href : برای ایجاد لینک به صفحات و سایت های دیگر به کار می رود.

id : یک شناسه منحصر به فرد برای عنصر مشخص می کند.

src : برای آدرس دهی به تصاویر به کار می رود.

Style : برای دادن جلوه و استایل بر روی متون به کار می رود.

title : برای ایجاد یک توضیح برای متن و یا تصاویر به کار می رود.

 

تگ hr :

این تگ برای ایجاد یک خط افقی به کار می رود که به صورت تگ <hr> به کار می رود. البته می توانید برای جلوه و استایل دادن به آن نیز از صفت style استفاده کنید.

تگ title :

این تگ برای تغییر دادن متن زبانه یا تب مرورگر به کار می رود و این تگ در داخل تگ head باید نوشته شود. مانند:

<head>

  <title>این تگ عنوان زبانه مرورگر است</title>

</head>

تگ pre :

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

<pre>

   My Bonnie lies over the ocean.

</pre>

مقادیر تگ style :

در اینجا قصد داریم تا مقادیر مجاز برای تگ style را معرفی کنیم. یعنی مشخص کنیم که تگ style چه تغییراتی را می تواند بر روی متن ایجاد کند.

background-color : این مشخصه رنگ پس زمینه را تغییر می دهد. مانند:

<body style=”background-color:powderblue;”>

Text-color : این مشخصه رنگ متن را تغییر می دهد. مانند:

<h2 style=”color:blue;”>This is a heading</h2>

Font-family : این مشخصه فونت و قلم نوشتاری متن را تغییر می دهد. مانند:

<h2 style=”font-family:verdana;”>This is a heading</h2>

Font-size : این مشخصه اندازه متن را تغییر می دهد. مانند:

<p style=”font-size:160%;”>This is a paragraph.</p>

Text-align : این مشخصه برای ترازبندی متن از لحاظ چپ چین، راست چین و وسط چین به کار می رود. مانند:

<p style=”text-align:center;”>Centered paragraph.</p>

 

فرمت های متنی :

در این قسمت می خواهیم با تگ های فرمت دهی متن آشنا شویم. یعنی با این تگ ها می توانید شکل متن را تغییر دهید.

تگ b و strong :

با این دو تگ شما می توانید متن را از حالت معمولی به حالت ضخیم تبدیل کنید. مانند:

<p><b>This text is bold.</b></p>

تگ i :

این تگ برای ایجاد متن کج به کار می رود. مانند:

<p><i>This text is italic.</i></p>

تگ em :

این تگ هم برای تاکید بیشتر است و به صورت کج نوشته می شود.

<p><em>This text is emphasized.</em></p>

تگ small :

این تگ برای ایجاد متن های با اندازه کوچک می باشد. مانند:

<h2>HTML <small>Small</small> Formatting</h2>

تگ mark :

این تگ برای مشخص کردن عبارات با یک رنگ می باشد. مانند:

<h2>HTML <mark>Marked</mark> Formatting</h2>

تگ del :

این تگ زمانی که استفاده شود باعث می شود که بر روی عبارت مورد نظر یک خط کشیده خواهد شد. مانند:

<p>My favorite color is <del>blue</del> red.</p>

تگ ins :

این تگ برای ایجاد یک خط افقی زیر عبارت مورد نظر می باشد. مانند:

<p>My favorite <ins>color</ins> is red.</p>

تگ sub :

این تگ برای ایجاد اندیس می باشد. یعنی متنی که کمی کوچکتر و پایین تر از متن اصلی می باشد. مانند:

<p>This is <sub>subscripted</sub> text.</p>

تگ sup :

این تگ برای ایجاد توان می باشد. مانند:

<p>This is <sup>superscripted</sup> text.</p>

تگ q :

این تگ برای ایجاد نقل قل به کار می رود. مانند:

<p>WWF’s goal is to: <q>Build a future where people live in harmony with nature.</q></p>

تگ abbr :

این تگ برای ایجاد متن اختصار یا مخفف به کار می رود. مانند:

<p>The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.</p>

تگ address :

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

<address>

Written by John Doe.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

تگ cite :

این تگ برای عنوان یک کار به کار می رود. مانند:

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

تگ bdo :

این تگ برای چپ به راست کردن یا برعکس می باشد.

<bdo dir=”rtl”>This line will be written from right to left</bdo>

تگ یادداشت :

این تگ برای یادداشت کردن به کار می رود. یعنی هر متنی بعد از این تگ به صورت یادداشت می باشد. مانند:

<!– Comments are not displayed in the browser –>

مشخصه border :

این مشخصه برای صفت style به کار می رود و کادر حاشیه ایجاد می کند. مانند:

<h2 style=”border: 2px solid Tomato;”>Hello World</h2>

مشخصه background-image :

برای قرار دادن یک تصویر به عنوان تصویر زمینه می باشد.

<body style=”background-image:url(‘clouds.jpg’)”>

تگ picture :

این تگ برای تصاویر و دادن مشخصات برای نمایش آن تصویر می باشد. مانند:

[ihc-hide-content ihc_mb_type=”show” ihc_mb_who=”1,2,3″ ihc_mb_template=”3″ ]

<picture>

  <source media=”(min-width: 650px)” srcset=”img_pink_flowers.jpg”>

  <source media=”(min-width: 465px)” srcset=”img_white_flower.jpg”>

  <img src=”img_orange_flowers.jpg” alt=”Flowers” style=”width:auto;”>

</picture>

تگ های ایجاد جدول :

برای ایجاد جدول در زبان HTML چند تگ وجود دارد. اولی تگ table است که به صورت کلی برای ایجاد جدول باید ابتدا آن را بنویسید. دومی تگ tr است برای ایجاد سطر یه کار می رود. سومی تگ th است که برای عنوان به کار می رود و چهارمی تگ td است و برای ایجاد خانه ها و یا سلول های جدول به کار می رود. مانند جدول زیر:

<table style=”width:100%”>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

مشخصه colspan :

این مشخصه به شما این امکان را می دهد تا یک ستون از جدول را به دو قسمت یا بیشتر تقسیم کنید با همان عنوان. مانند:

<th colspan=”2″>Telephone</th>

مشخصه rowspan :

این مشخصه برای تقسیم کردن یک سطر از جدول می باشد. مانند:

<tr>

    <th rowspan=”2″>Telephone:</th>

    <td>55577854</td>

</tr>

تگ caption :

این تگ برای ایجاد یک عنوان کلی بیرون از جدول ولی برای جدول به کار می رود. مانند:

<caption>Monthly savings</caption>

 

لیست ها در آموزش اچ تی ام ال :

در این قسمت قصد داریم تا شما را با انواع لیست و شکل ظاهری آنها آشنا کنیم و توضیح دهیم که چه طور می توانید انواع لیست ها مانند لیست های مرتب ، لیست های نامرتب و … را ایجاد کنید.

لیست های نامرتب :

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

Disc : این مقدار شکل دایره توپر را به موارد لیست شما اضافه می کند.

Circle : این مقدار شکل دایره تو خالی را به موارد لیست شما اضافه می کند.

Square : این مقدار شکل مربع توپر را به موارد لیست شما اضافه خواهد کرد.

None : این مقدار هیچ شکلی ندارد و موارد لیست شما بدون شکل نمایش داده می شوند.

<ul style=”list-style-type:disc”>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

همان طور که در مثال بالا می بینید کلمه disc مشخص شده است و شما به جای این کلمه هر کدام از مقادیر داده شده در بالا را که قرار دهید شکل موارد تغییر می کند.

 

لیست های ترتیبی یا منظم :

در این نوع لیست های آموزش html موارد موجود در لیست با ترتیبی خاص با اعداد و … نمایش داده خواهند شد که در ادامه مقادیر این لیست ها را نیز توضیح خواهیم داد. این نوع لیست با تگ ol تعریف می شوند. در این لیست ها صفت type وجود دارد که نوع ترتیب را مشخص می کند مثلا عدد و یا حروف و …

Type = “۱” : این نوع از مقدار موارد لیست را به صورت اعداد به ترتیب نشان می دهد.

Type = “A” : این نوع از مقدار موارد لیست را به صورت حروف بزرگ انگلیسی نشان می دهد.

Type =”a” : این نوع از مقدار موارد لیست را به صورت حروف کوچک نشان می دهد.

Type = “I” : این نوع از مقدار موارد لیست را به صورت حروف بزرگ یونانی نشان می دهد.

Type = “i” : این نوع از مقدار موارد لیست را به صورت حروف کوچک یونانی نشان می دهد.

<ol type=”1″>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

لیست توضیحی :

در این نوع لیست ها برای یک کلمه یا عبارت توضیحی را می نویسید. این لیست ها با تگ dl ساخته می شوند. تگ dt کلمه یا عبارت مورد نظر را در خود جا می دهد و تگ dd توضیح مربوط به کلمه یا عبارت مورد نظر را ایجاد می کند.

<dl>

  <dt>Coffee</dt>

  <dd>black hot drink</dd>

  <dt>Milk</dt>

  <dd>white cold drink</dd>

</dl>

نکته :

در لیست های ترتیبی این امکان وجود دارد که بتوانید از یک عدد یا حرف خص ترتیب را شروع کنید. مثلا از عدد ۵۰ به بعد. برای این کار از صفت start استفاده می کنیم.

<ol start=”50″>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

 

تگ های بلوک و درون خطی :

تگ های بلوک یا Block تگ هایی هستند که هنگام استفاده از مقادیر آنها در خط های جدا جدا قرار می گیرند ولی تگ های درون خطی یا Inline مقادیر را پشت سر هم در یک خط قرار می دهند.

تگ های بلوک :

<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form>-<h6><header><hr><li><main><nav><noscript><ol><output><p><pre><section><table><tfoot><ul><video>

 

تگ های درون خطی :

<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>

 

تگ Iframe :

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

<iframe src=”آدرس سایت مورد نظر“></iframe>

همچنین این تگ این امکان را به شما می دهد تا پهنا و ارتفاع کادر را نیز مشخص کنید:

<iframe src=”demo_iframe.htm” height=”200″ width=”300″></iframe>

در این تگ می توانید خط حاشیه دور کادر را نیز حذف کنید. مانند:

<iframe src=”demo_iframe.htm” style=”border:none;”></iframe>

یا خط دور کادر را ایجاد و تغییر اندازه و تغییر رنگ دهید. مانند:

<iframe src=”demo_iframe.htm” style=”border:2px solid red;”></iframe>

تگ meta :

این تگ یکی از تگ های مهم می باشد که یکسری کارها را برای شما انجام می دهد که در ادامه به آنها اشاره می کنیم. فقط دقت داشته باشید که تگ meta درون تگ head نوشته می شود.

انتخاب نوع کاراکترها :

<meta charset=”UTF-8″>

ایجاد توضیح برای صفحات وب سایت :

<meta name=”description” content=”Free Web tutorials”>

تعریف کلمه برای موتورهای جستجو :

<meta name=”keywords” content=”HTML, CSS, XML, JavaScript”>

تعریف ناشر صفحات وب سایت :

<meta name=”author” content=”John Doe”>

بارگذاری صفحه یا متن در زمان های دلخواه :

<meta http-equiv=”refresh” content=”30″>

تنظیم اندازه صفحه برای دستگاه های مختلف :

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

تگ kbd :

این تگ برای گرفتن دکمه های ورودی کاربر به کار می رود. یعنی کلیدهایی را که کاربر فشار می دهد را می تواند شناسایی کند. مانند:

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

 

تگ samp :

این تگ برای نشان دادن خروجی یک برنامه یا محاسبه به کار می رود.

<p>If you input wrong value, the program will return <samp>Error!</samp></p>

تگ code :

این تگ برای ایجاد عملیات های محاسباتی به کار می رود. مانند:

<code>
x = 5;
y = 6;
z = x + y;
</code>

تگ var :

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

Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.

فرم ها :

در این بخش قصد داریم تا شما را با چگونگی ساختن فرم ها آشنا کنیم. فرم ها همانند جدول می باشند و یکسری بخش ها برای ورود اطلاعات دارند و بعد با توجه به این اطلاعات یک کار خاص انجام می شود.

تگ form :

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

<form>
.
تگ های فرم
.
</form>

تگ input :

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

ورودی متن :

در این قسمت با چگونگی وارد کردن متن و ایجاد فیلد متنی آشنا می شویم. صفت type را اگر برابر با مقدار text کنیم فیلد برای ورود متن ایجاد می شود. مانند:

<form>
  First name:<br>
  <input type=”text” name=”firstname”><br>
  Last name:<br>
  <input type=”text” name=”lastname”>
</form>

 

دکمه های انتخاب تکی یا Radio Button :

در اینجا با چگونگی ایجاد گزینه های انتخاب تکی آشنا می شویم. به این معنی که از بین تعدادی از موارد فقط می توان یک مورد را انتخاب کرد. در اینجا صفت type را باید برابر با radio قرار دهیم. مانند:

<form>
  <input type=”radio” name=”gender” value=”male” checked> Male<br>
  <input type=”radio” name=”gender” value=”female”> Female<br>
  <input type=”radio” name=”gender” value=”other”> Other
</form>

دکمه ارسال یا Submit :

برای ارسال یک فرم باید یک دکمه وجود داشته باشد که این دکمه باید در صفت type برابر با submit باشد. مانند:

<form action=”/action_page.php”>
  نام:<br>
  <input type=”text” name=”firstname” value=”Mickey”><br>
  نام خانوادگی:<br>
  <input type=”text” name=”lastname” value=”Mouse”><br><br>
  <input type=”submit” value=”ارسال”>
</form>

لیست آبشاری در آموزش اچ تی ام ال :

در این بخش با روش ساختن لیست آبشاری و انتخاب گزینه های آن آشنا می شویم. این کار را با تگ های select و option انجام می دهیم. تگ select که مربوط به انتخاب موارد است و تگ option موارد لیست آبشاری را ایجاد می کند. مانند:

<select name=”cars”>
  <option value=”volvo”>Volvo</option>
  <option value=”saab”>Saab</option>
  <option value=”fiat”>Fiat</option>
  <option value=”audi”>Audi</option>
</select>

 

ایجاد لیست متنی با تعداد مشخص :

شما می توانید یک لیست متنی با تعداد موارد و آیتم های مشخص شده ایجاد کنید. در اینجا تعداد را با صفت size می توانید تعیین کنید. مانند:

<select name=”cars” size=”3″>
  <option value=”volvo”>Volvo</option>
  <option value=”saab”>Saab</option>
  <option value=”fiat”>Fiat</option>
  <option value=”audi”>Audi</option>
</select>

 

تگ textarea :

این تگ برای ایجاد یک مکان برای اضافه کردن متن به کار می رود. به این معنی که یک کادر متنی ایجاد می کند و می توانید متن خود را درون این کادر قرار دهید. مانند:

<textarea name=”message” rows=”10″ cols=”30″>
The cat was playing in the garden.
</textarea>

در این تگ می توانید با توجه به طول متن خود تعداد سطرها و ستون ها را مشخص کنید.

ورود پسورد :

در بعضی از فرم ها نیاز به دریافت و گرفتن پسورد و رمز عبور از کاربران را دارید. برای ساخت چنین امکانی باید صفت type برابر با password باشد. مانند:

<form>
  نام کاربری:<br>
  <input type=”text” name=”username”><br>
  رمز عبور:<br>
  <input type=”password” name=”psw”>
</form>

جایگزینی یا reset :

در اینجا قصد داریم تا یک دکمه reset برای برگرداندن حالت قبلی در فرم ایجاد کنیم. مانند:

<form action=”/action_page.php”>
  First name:<br>
  <input type=”text” name=”firstname” value=”Mickey”><br>
  Last name:<br>
  <input type=”text” name=”lastname” value=”Mouse”><br><br>
  <input type=”submit” value=”Submit”>
  <input type=”reset”>
</form>

انتخاب چند گزینه ای :

در اینجا یاد می گیریم که چگونه چند گزینه برای فرم خود ایجاد کنیم که قابلیت انتخاب ۲  و بیشتر بین این گزینه ها وجود داشته باشد. مانند:

<form>
  <input type=”checkbox” name=”vehicle1″ value=”Bike”> I have a bike<br>
  <input type=”checkbox” name=”vehicle2″ value=”Car”> I have a car 
</form>

انتخاب رنگ :

در اینجا با چگونگی انتخاب رنگ در فرم آشنا می شویم. مانند:

<form>
  رنگ مورد علاقه شما:
  <input type=”color” name=”favcolor”>
</form>

انتخاب تاریخ :

در اینجا با چگونگی ایجاد تقویم و انتخاب یک تاریخ در فرم آشنا می شویم. مانند:

<form>
  تاریخ تولد:
  <input type=”date” name=”bday”>
</form>

دریافت ایمیل :

در اینجا فیلد یا کادر مربوط به وارد کردن و گرفتن ایمیل از کاربران را ایجاد می کنیم. مانند:

<form>
  ایمیل:
  <input type=”email” name=”email”>
</form>

دریافت فایل :

در این قسمت با چگونگی ایجاد و دریافت و آپلود فایل در وب سایت آشنا خواهیم شد. مانند:

<form>
  Select a file: <input type=”file” name=”myFile”>
</form>

دریافت اعداد :

در این بخش با چگونگی انتخاب اعدادی مشخص مثلا بین ۱ تا ۵ آشنا می شویم. مانند:

<form>
  Quantity (between 1 and 5):
  <input type=”number” name=”quantity” min=”1″ max=”5″>
</form>

ایجاد اعداد با گام های خاص :

در این بخش اعداد را می توانید با یک گام خاص مثلا ۱۰ تا ۱۰ تا و … ایجاد کنید. مانند:

<form>
  Quantity:
  <input type=”number” name=”points” min=”0″ max=”100″ step=”10″ value=”30″>
</form>

حالت انتخابی خاص :

در اینجا یک حالت انتخاب میله ای را با کدهای زیر پیاده سازی می کنیم. مانند:

<form>
  <input type=”range” name=”points” min=”0″ max=”10″>
</form>

ایجاد کادر جستجو :

اگر قصد دارید در طراحی سایت خود از کادر جستجو استفاده کنید با کد زیر می توانید این قابلیت را به سایت خود اضافه کنید :

<form>
  Search Google:
  <input type=”search” name=”googlesearch”>
</form>

ایجاد کادر ورود شماره تلفن :

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

<form>
  Telephone:
  <input type=”tel” name=”usrtel”>
</form>

انتخاب زمان :

با کد زیر می توانید زمان مورد نظر را انتخاب کنید:

<form>
  Select a time:
  <input type=”time” name=”usr_time”>
</form>

ورود آدرس اینترنتی :

با کد زیر می توانید کادری برای ورود آدرس اینترنتی ایجاد کنید:

<form>
  Add your homepage:
  <input type=”url” name=”homepage”>
</form>

انتخاب هفته :

در این بخش با کد زیر می توانید یک کادر برای وارد کردن هفته ایجاد کنید:

<form>
  Select a week:
  <input type=”week” name=”week_year”>
</form>

ایجاد کادر فقط خواندنی ( غیر قابل تغییر ) :

در این بخش می توانید کادری ایجاد کنید که کلمه یا عبارت داخل آن غیر قابل تغییر است. در صورت حذف عبارت readonly در کد زیر می توانید قابلیت تغییر را اضافه کنید.

<form action=””>
  First name:<br>
  <input type=”text” name=”firstname” value=”John” readonly>
</form>

ایجاد کادر غیر فعال :

در اینجا و با کد زیر می توانید یک کادر را غیر فعال یا به اصطلاح قفل کنید:

<form action=””>
  First name:<br>
  <input type=”text” name=”firstname” value=”John” disabled>
</form>

ایجاد کادر با اندازه های مختلف :

در اینجا با کد زیر می توانید اندازه کادرها را تغییر دهید و کوچک و بزرگ کنید:

<form action=””>
  First name:<br>
  <input type=”text” name=”firstname” value=”John” size=”40″>
</form>

ایجاد محدودیت ورود حروف :

با کد زیر می توانید تعداد حروفی که کاربر می تواند وارد کند را تعیین کنید:

<form action=””>
  First name:<br>
  <input type=”text” name=”firstname” maxlength=”10″>
</form>

کامل کننده خودکار :

در اینجا با کد زیر یک کامل کننده خودکار ایجاد می کنیم که در هنگام وارد کردن حروف و … پیشنهاداتی به شما می دهد:

<form action=”/action_page.php” autocomplete=”on”>
  First name:<input type=”text” name=”fname”><br>
  Last name: <input type=”text” name=”lname”><br>
  E-mail: <input type=”email” name=”email” autocomplete=”on”><br>
  <input type=”submit”>
</form>

ایجاد لیست ورودی :

با کد زیر می توانید یک کادر ایجاد کنید که با کلیک کردن بر روی این کادر یک لیست باز می شود که می توانید موارد مورد نیاز خود را انتخاب کنید:

<input list=”browsers”>
<datalist id=”browsers”>
  <option value=”Internet Explorer”>
  <option value=”Firefox”>
  <option value=”Chrome”>
  <option value=”Opera”>
  <option value=”Safari”>
</datalist>

ایجاد نوشته راهنما در کادر ورودی :

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

<input type=”text” name=”fname” placeholder=”First name”>

 

تگ canvas :

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

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #000000;”>
</canvas>

کشیدن خط :

با کد زیر می توانید خطوط راست با اندازه ها و زاویه های مختلفی در صفحه ایجاد کنید. توجه داشته باشید برای کشیدن انواع شکل ها باید کدهایی را که در ادامه برای هر شکل گفته می شود را در تگ باز و بسته script بنویسید:

var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.moveTo(0, ۰);
ctx.lineTo(200, ۱۰۰);
ctx.stroke();

 

کشیدن دایره :

با کد زیر می توانید دایره با اندازه های مختلف بکشید:

var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.beginPath();
ctx.arc(95, ۵۰, ۴۰, ۰, ۲ * Math.PI);
ctx.stroke();

 

گرادیانت رنگی خطی :

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

var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);

// Create gradient
var grd = ctx.createLinearGradient(0, ۰, ۲۰۰, ۰);
grd.addColorStop(0, “red”);
grd.addColorStop(1, “white”);

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, ۱۰, ۱۵۰, ۸۰);

 

گرادیانت رنگی دایره ای :

در این بخش و با کد زیر می توانید انواع گرادیانت های رنگی دایره ای را ایجاد کنید:

var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);

// Create gradient
var grd = ctx.createRadialGradient(75, ۵۰, ۵, ۹۰, ۶۰, ۱۰۰);
grd.addColorStop(0, “red”);
grd.addColorStop(1, “white”);

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, ۱۰, ۱۵۰, ۸۰);

 

تگ svg :

این تگ برای ایجاد شکل ها به کار برده می شود. این تگ باید در تگ body باشد.

SVG دایره ای :

با کد زیر می توانید یک شکل دایره ای رنگی ایجاد کنید:

<svg width=”100″ height=”100″>
  <circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />
</svg>

 

SVG چهار ضلعی :

با کد زیر می توانید انواع مستطیل و مربع را با اندازه های مختلف ایجاد کنید:

<svg width=”400″ height=”100″>
  <rect width=”400″ height=”100″ style=”fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)” />
</svg>

SVG چهار ضلعی با گوشه های گرد :

در اینجا و با کد زیر می توانید انواع چهار ضلعی ها را با گوشه های گرد ایجاد کنید:

<svg width=”400″ height=”180″>
  <rect x=”50″ y=”20″ rx=”20″ ry=”20″ width=”150″ height=”150″
  style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″ />
</svg>

 

SVG ستاره ای :

با کد زیر می توانید شکل ستاره را با اندازه های مختلف ایجاد کنید:

<svg width=”300″ height=”200″>
  <polygon points=”100,10 40,198 190,78 10,78 160,198″
  style=”fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;” />
</svg>

تگ video :

همان طور که از نامش مشخص است برای ایجاد و نمایش ویدئو در وب سایت به کار برده خواهد شد و با این کد ویدئو به صورت خودکار اجرا نمی شود. اگر قصد دارید که کدها را طوری بنویسید که با ورود به وب سایت ویدئو به صورت اتوماتیک اجرا شود باید به جای مشخصه و صفت controls صفت یا مشخصه autoplay را قرار دهید.

<video width=”320″ height=”240″ controls>
  <source src=”movie.mp4″ type=”video/mp4″>
  <source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>

 

تگ audio :

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

<audio controls>
  <source src=”horse.ogg” type=”audio/ogg”>
  <source src=”horse.mp3″ type=”audio/mpeg”>
Your browser does not support the audio element.
</audio>

[/ihc-hide-content]

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