آموزش اچ تی ام ال ( آموزش html) پایه و اساس آموزش طراحی وب سایت و ایجاد وب سایت می باشد.

آموزش Html اصلی ترین بخش آموزش طراحی سایت است.

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

زبان اچ تی ام ال توسط دنیس ریچی ابداع و ثبت شد. html مخفف Hyper Text Markup Language به معنی زبان نشانه گزاری ابر متنی می باشد.

آموزش این زبان در کنار css میتواند شروعی باشد برای طراحی سایت حرفه ای. هر چقدر در آموزش Html، دقیق تر باشید، در آینده میتوانید طراح وب سایت حرفه ای تری باشید. حتی در صورتی که تنها اچ تی ام ال را فرا بگیرید، میتوانید سایت های استاتیک را به راحتی طراحی نمایید.

در اموزش html ، نرم افزار خاصی نیاز نیست و تنها با notepad ویندوز میتوانید شروع کنید. فایل های اچ تی ام ال تنها شامل متن هستند و از تگ ها (Tag) تشکیل شده اند. در مقالات اچ تی ام ال تمامی این موارد به ریز توضیح داده شده اند.

دانش عمومی طراحی وب سایت با یادگیری پایه ای HTML و CSS باعث می شود  وب سایت خود را با آخرین تکنولوژیهای طراحی وب سایت بسازید.

اچ تی ام ال

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


کدهای HTML و چگونگی تولید و اجرا 

 

برای نوشتن کدهای HTML ، تنها یک ادیتور متن مانند Notepad ویندوز و یا نرم افزار های مرتبط با HTML همچون فرانت پیج یا ویژوال استودیو نیاز است .

در طی این آموزش ها می توانید با نرم افزار Notepad ویندوز کدها را نوشته و سپس ذخیره نمایید.

توجه 1 : فایل های تولید شده را با پسوند .htm و یا .html ذخیره نمایید . تفاوتی بین این پسوند ها نمی باشد .

بعد از نوشتن کدها در Notepad و ذخیره ی آن با پسوند های ذکر شده ، برای اجرای کد نوشته شده فایل را در نرم افزار های مرورگر وب مانند Internet Explorer و یا Firefox و ... اجرا نمایید.

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

چگونگی تولید و اجرا کدهای HTML

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

 

تگ های HTML

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

< تگ انتها / >    محتویات    < تگ ابتدا >

تگ ابتدایی مشخص کننده آغاز تگ و تگ پایانی ، مشخص کننده انتهای تگ است . هر تگ HTML ، باید حتما در ادامه توسط تگ پایانی بسته شود . کلیه نوشته ها و تگ های دیگری که در بین تگ ابتدا و پایان نوشته می شوند ، محتویات تگ را تشکیل می دهند .

 

انواع تگ های Html :

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

  1. تگ‌های یکه. مانند ‎<HR>‎ که خط رسم می‌کند.
  2. تگ‌هایی که شروع و پایان دارند. مثل: ‎<head></head>‎
  3. تگ‌هایی که دارای ویژگی می‌باشند. مثل:

‎<a href="http://www.w3.org">متن</a>

 توجه 1 : تگ های یکه را میتوان به دو شکل نوشت که حالت دوم آن استاندارد می باشد :

حالت 1 : <hr>

حالت 2 : <hr / >

نکته 1 : تگ های HTML نسبت به بزرگ و کوچک بودن حروف حساس نیستند ، یعنی تگ های < b > با < B > برابر هستند .

نکته 2 : هر تگ HTML محتویات درون خود را تحت تاثیر قرار می دهد . برای مثال تگ < b > برای توپر کردن ( bold ) نوشته به کار می رود و چنانچه متنی بین تگ باز و بسته < b > قرار بگیرد ، توپر می شود .

 تگ های HTML انواع تگ خواص تگ های HTML


 

خواص تگ های HTML :

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

<p border="1"> متن پاراگراف </p>

تگ p برای ایجاد پاراگراف می باشد و خاصیت Border برای تگ آن حاشیه ای ایجاد میکند. این مثال صرفا جهت آشنایی با طریقه ی نوشتن خواص تگ ها می باشد و در ادامه به معرفی تگ ها و خواص عمومی آنها می پردازیم .

 در صورتی که برای تگی بخواهیم از چندین خواص استفاده کنیم انها را با فاصله (Space) از هم جدا میکنیم :

<p id="P1" border="1" title="test" > متن پاراگراف </p>

خصوصیات استاندارد تگ های HTML :

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

خصوصیات اصلی تگ های اچ تی ام ال

نکته :  این خاصیت ها در تگ های base , head , html , meta , param , style , title و script وجود ندارد .

نام خاصیت نوع خاصیت شرح
class نام کلاس عنصر مشخص کننده کلاس تگ در کد نویسی برنامه است . این کلاس در کدنویسی CSS و زبان های اسکریپتی کاربرد دارد .
id id عنصر مشخص کننده یک شناسه منحصر به فرد برای تگ در درون سند HTML است . id هر تگ در کدنویسی CSS و زبان های اسکرپیتی کاربرد دارد . توسط id می توان به تگ مورد نظر دست یافت .
style   یک خاصیت چند مفدارِی است که خصوصیات قالب دهی و اعمال سبک ها ( CSS ) را برای تگ مورد نظر مشخص می کند .
title text
متن
متنی است که به صورت tooltip در یک کادر زرد رنگ ، در هنگام قرار گرفتن موس بر روی عنصر نمایش داده می شود .

  

خصوصیات زبان

نکته : این خاصیت ها در تگ های base , br , frame , hr , iframe , param و script وجود ندارد .

نام خاصیت نوع خاصیت شرح
dir rtl 
ltr
تعیین کننده جهت قرار گرفتن نوشته را تعیین می کند ، که یکی از 2 حالت زیر را می تواند داشته باشد :
ltr : چپ به راست
rtl : راست به چپ
language نام زبان مشخص کننده زبان برنامه نویسی کد مربوط به تگ است .

 

خصوصیات صفحه کلید

نام خاصیت نوع خاصیت شرح
accesskey کلید میانبر یک میانبر صفحه کلید برای دستیابی به عنصر است .
tabindex عدد
number
شماره ترتیبی قرار کرفتن فوکوس صفحه بر روی عنصر مورد نظر را در هنگام فشردن کلید tab مشخص می کند .



خاصیت Style تگ ها

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

یکی از مهمترین خصوصیات تگ ها ، خصوصیت Style ( خاصیت استایل ) می باشد. با استفاده از خصوصیت Styleمیتوان شکل ظاهری یک تگ را تعیین کرد.

قاعده ی نوشتن خصوصیت Style از Css پیروی میکند . در آموزش Css در بخش طریقه نوشتن CSS - خاصیت Style تگ ها به طور مفصل این موضوع توضیح داده شده است.

توجه : برای اطلاعات بیشتر در مورد Css و نحوه ی نوشتن دستورات Css به بخش آموزش CSS مراجعه شود.

 

طریقه استفاده از تگ استایل در Html بصورت زیر می باشد :

<p style=" color:white; border:solid 1px red; width:100px; background-color:blue; font-size:10pt; text-align:center; "> متن پاراگراف </p>

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

متن پاراگراف

توجه  : این خاصیت از جمله خاصیت های تگ ها می باشد که در همه ی تگ ها به جز تگ های base , head , html , meta , param , style , title و script مشترک است.



ویژگی های عمومی در HTML

ویژگی های عمومی (Global Attributes) در HTML  به شرح زیر میباشد.

  1. accesskey
  2. class
  3. contenteditable
  4. contextmenuelement
  5. dir
  6. draggable
  7. dropzone
  8. hidden
  9. id
  10. lang
  11. spellcheck
  12. style
  13. tabindex
  14. title
  15. translate
  16. Event Attributes


ویژگی های رویداد در HTML

در این بخش از آموزش HTML ، انواع رویدادها در HTML را شرح میدهیم. 

تمام عناصر در HTML میتواننند شامل رویدادهایی باشند. رویدادها مجموعه عمل هایی هستند که در صورت بروز یک اتفاق در صفحه ( مثل کلیک کردن بر روی یک عنصر ، دابل کلیک ، فشردن دکمه خاص و ... ) عکس العمل نشان داده و باعث اجرای دستور یا دستورات تعیین شده برای آن اتفاق خاص می شوند .

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

 ویژگی های رویداد در HTML به چند قسمت زیر تقسم میشوند:

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



رویدادهای پنجره در HTML

رویدادهای پنجره در HTML فقط در عنصرهای body و frameset معتبر هستند .

رویدادهای پنجره در HTML شامل رویدادهای زیر میشود:

رویداد شرح
onafterprint رویدادی است که بعد از پرینت شدن سند اجرا می شود.
onbeforeprint رویدادی است که قبل از پرینت شدن سند اجرا می شود.
onbeforeunload رویدادی است که قبل از اجرای (load) سند اجرا می شود.
onerror   رویدادی است که هنگام وقوع ارور اجرا می شود.
onhaschange رویدادی است که زمانی که سند تغییر میکند  اجرا می شود.
onload   رویدادی است که در هنگام لود شدن ( بار گذاری ) صفحه اجرا می شود .
onmessage  رویدادی است که در هنگام اجرا شدن یک پیغام اجرا می شود .
onoffline   رویدادی است که در هنگام offline شدن سند اجرا می شود.
ononline رویدادی است که در هنگام online شدن سند اجرا می شود.
onpagehide رویدادی است که در هنگام مخفی شدن پنجره اجرا می شود.
onpageshow رویدادی است که در هنگام آشکار شدن پنجره اجرا می شود.
onpopstate رویدادی است که در هنگام تغییر کردن history ویندوز اجرا می شود.
onredo   رویدادی است که در هنگام از نو اجرا شدن سند اجرا می شود.
onresize   رویدادی است که در هنگام تغییر سایز پنجره اجرا می شود.
onstorage  رویدادی است که در هنگام به روز رسانی وب سایت اجرا می شود.
onundo   رویدادی است که در هنگام خنثی شدن  سند اجرا می شود.
onunload رویدادی است که در هنگام خارج شدن صفحه از حافظه ( بستن ) اجرا می شود .


رویدادهای عناصر فرم در HTML

رویدادهای عناصر فرم در HTML فقط در عنصرهای کنترلی فرمها کاربرد دارند .

رویدادهای عناصر فرم در HTML شامل رویدادهای زیر میشود:

رویداد شرح
onblur در هنگام از دست دادن فوکوس کنترل تحریک می شود .
onchange در هنگام تغییر وضعیت یک کنترل تحریک می شود . برای مثال در کنترل textbox در هنگام تغییر متن درون آن تحریک می شود .
oncontextmenu رویدادی است که منوی صفحه راه اندازی میشود اجرا می شود .
onfocus در هنگامی که کنترل فوکوس را به دست می آورد ، تحریک می شود .
onformchange رویدادی است که هنگام تغییر کردن صفحه اجرا می شود .
onforminput رویدادی است که در هنگام وارد کردن اطلاعات در فرم توسط کاربر اجرا می شود .
oninput رویدادی است که در هنگام وارد کردن اطلاعات در عنصر توسط کاربر اجرا می شود
oninvalid رویدادی است که در هنگام نامعتبر بودن عنصر اجرا می شود.
onselect در هنگام انتخاب کردن عنصر مورد نظر در فرم تحریک می شود .
onsubmit در هنگام فشردن دکمه submit فرم و ارسال اطلاعات کنترل های فرم تحریک می شود .


رویدادهای موس در HTML

رویدادهای موس در کنترل های base , br , frame , frameset , head , html , iframe , meta , param , script و titleکاربرد ندارد .

رویدادهای موس در HTML شامل رویدادهای زیر میشود:

رویداد شرح
onclick این رویداد در هنگام کلیک کردن بر روی عنصر مورد نظر تحریک می شود .
ondblclick این رویداد در هنگام دابل کلیک کردن بر روی عنصر مورد نظر تحریک می شود .
onmousedown این رویداد در هنگام فشردن دکمه موس بر روی عنصر مورد نظر تحریک می شود.
onmoouseover این رویداد در هنگام قرار گرفتن اشاره گر موس بر روی سطح عنصر مورد نظر تحریک می شود .
onmouseout این رویداد در هنگام خارج شدن اشاره گر موس از روی سطح عنصر مورد نظر تحریک می شود .
onmouseup این رویداد در هنگام رها کردن دکمه موس بر روی عنصر مورد نظر تحریک می شود .


رویدادهای صفحه کلید در HTML

رویدادهای صفحه کلید در HTML  در کنترل های base , br , frame , frameset , head , html iframe , meta , param , script , style و title کاربرد ندارد .

رویدادهای صفحه کلید در HTML شامل رویدادهای زیر میشود:

رویداد شرح
onkeydown رویدادی که در هنگام فشردن یک کلید بر روی عنصر مورد نظر فعال می شود .
onkeypress رویدادی که در هنگام فشردن و رها کردن یک کلید بر روی عنصر مورد نظر فعال می شود .
onkeyup رویدادی که در هنگام رها کردن یک کلید فشرده شده بر روی عنصر مورد نظر فعال می شود .