پیامک زیبای فلسفیHTML چیست ؟
عبارت HTML ( اچ تی ام ال ) مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است.
Htmlزبان استاندارد طراحی صفحات وب است و کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند.به عبارت دیگر مرورگر ها هیچکدام از کدها و کنترل های سمت سرور همچون کدهای asp و php را نمیشناسند و کد قابل فهم برای آنها اچ تی ام ال می باشد.کامپایلر های زبان های برنامه نویسی سروری در نهایت کد های خود را برای نمایش به کد اچ تی ام ال تبدیل میکنند و برای مرورگر میفرستند تا به کاربران نمایش داده شود.
HTML یک زبان نشانه گذاری است ، به اين معنی که بخش های مختلف توسط اجزايی به نام تگ از هم جدا شده ، که هر کدام دارای کاربرد و خواص مربوط خود هستند . اين تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت نمايش داده شود.
در مقاله ی تگ های Html به این موصوع به طور مفصل پرداخته شده است.
در يک صفحه HTML می توان انواع عناصر از قبيل متن ، تيتر ، عکس ، جدول و ... را قرار داد ، که برای هر عنصر بايد از تگ مربوط به آن استفاده کرد . صفحات HTML فقط از کد ها که به صورت متن هستند تشکيل شده اند. بدین معنا که برای تصویر کد مربوط به تمایش تصویر و جدول و ... کدهای اچ تی ام ال مربوط به هر یک را باید نوشت و مرورگر با رسیدن به این کد ها و تگ ها ، المنت های مرتبط با آن را نمایش می دهد. هر یک از کدهای html ، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند. مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.
یک سند اچ‌تی‌ام‌ال، یک پروندهٔ مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل میشود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آنها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) میکنند.
اچ‌تی‌ام‌ال زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساخت‌مند کردن اطلاعات و جدایش اجزای منطقی یک نوشتار — نظیر عناوین ، تصاویر ، فهرست‌ها ، بندها و جداول — به کار می‌رود. از سوی دیگر، اچ تی ام ال را نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار بُرد؛ این وظیفه اکنون بر دوش فناوری‌های دیگری همچون سی اس اس ( Css ) است که در بخش آموزش Css به طور کامل به آن خواهیم پرداخت.
امیدواریم در این سلسله آموزش های جامع Html به درک درستی از اچ تی ام رسیده و پایه ی طراحی سایت را که همان کدهای Html می باشد را به طور درست فراگرفته و به کار ببرید.
کدهای HTML و چگونگی تولید و اجرا
برای نوشتن کدهای HTML ، تنها یک ادیتور متن مانند Notepad ویندوز و یا نرم افزار های مرتبط با HTML همچون فرانت پیج یا ویژوال استودیو نیاز است .
در طی این آموزش ها می توانید با نرم افزار Notepad ویندوز کدها را نوشته و سپس ذخیره نمایید.
توجه 1 : فایل های تولید شده را با پسوند .htm و یا .html ذخیره نمایید . تفاوتی بین این پسوند ها نمی باشد .بعد از نوشتن کدها در Notepad و ذخیره ی آن با پسوند های ذکر شده ، برای اجرای کد نوشته شده فایل را در نرم افزار های مرورگر وب مانند Internet Explorer و یا Firefox و ... اجرا نمایید.
کدهای html از یک سری تگ تشکیل شده اند. صفحات HTML فقط از کد ها که به صورت متن هستند تشکيل شده اند. بدین معنا که برای تصویر کد مربوط به تمایش تصویر و جدول و ... کدهای Html مربوط به هر یک را باید نوشت و مرورگر با رسیدن به این کد ها و تگ ها ، المنت های مرتبط با آن را نمایش می دهد.
توجه 2 : نمایش کدها و شکل خروجی آنها بعضا در مرورگرهای مختلف یکسان نمی باشد و یکی از هنرهای برنامه نویسان وب ، نوشتن کدهایی با اجرای یکسان در مرورگر های مختلف است که در این سلسله آموزش های طراحی وب سایت این امر آموزش داده می شود.
تگ های HTML
تگ های HTML برای نشانه گذاری محتويات صفحات به کار می روند و باعث می شوند که مرورگر بتواند تشخيص دهد هر بخش چه نوع عنصری است. هر تگ HTML ، يک بخش ابتدايی و يک بخش انتهايی دارد که هم نام بوده و به صورت استاندارد طبق شکل کلی زير به کار می روند :< تگ انتها / > محتويات < تگ ابتدا >
تگ ابتدايی مشخص کننده آغاز تگ و تگ پايانی ، مشخص کننده انتهای تگ است . هر تگ HTML ، بايد حتما در ادامه توسط تگ پايانی بسته شود . کليه نوشته ها و تگ های ديگری که در بين تگ ابتدا و پايان نوشته می شوند ، محتويات تگ را تشکيل می دهند .
انواع تگ های Html :
توجه داشته باشید که شکل گفته شده در بالا به صورت استاندارد می باشد. اما در HTML سه نوع تگ وجود دارد :تگ‌های یکه. مانند <HR> که خط رسم میکند.تگ‌هایی که شروع و پایان دارند. مثل: <head></head>تگ‌هایی که دارای ویژگی می‌باشند.
مثل:<a href="http://www.w3.org">متن</a>
توجه 1 : تگ های یکه را میتوان به دو شکل نوشت که حالت دوم آن استاندارد می باشد :حالت 1 : <hr> حالت 2 : <hr / >
نکته 1 : تگ های HTML نسبت به بزرگ و کوچک بودن حروف حساس نيستند ، يعنی تگ های < b > با < B > برابر هستند .
نکته 2 : هر تگ HTML محتویات درون خود را تحت تاثير قرار می دهد . برای مثال تگ < b > برای توپر کردن ( bold ) نوشته به کار می رود و چنانچه متنی بين تگ باز و بسته < b > قرار بگيرد ، توپر می شود .
خواص تگ های 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 به شرح زیر میباشد.
- accesskey
- class
- contenteditable
- contextmenuelement
- dir
- draggable
- dropzone
- hidden
- id
- lang
- spellcheck
- style
- tabindex
- title
- translate
- Event Attributes
ویژگی های رویداد در HTML
در این بخش از آموزش HTML ، انواع رویدادها در HTML را شرح میدهیم. تمام عناصر در HTML میتواننند شامل رویدادهایی باشند.
رويدادها مجموعه عمل هايی هستند که در صورت بروز يک اتفاق در صفحه ( مثل کليک کردن بر روی يک عنصر ، دابل کليک ، فشردن دکمه خاص و ... ) عکس العمل نشان داده و باعث اجرای دستور يا دستورات تعيين شده برای آن اتفاق خاص می شوند .هر عنصرشامل رويدادهای مختص به خود است که هر کدام از آنها را می توان در درون تگ عنصر تعيين و مقدار دهی کرد .
معمولا يک رويداد ، تابع يا اسکريپتی را اجرا يا فراخوانی می کند .
ویژگی های رویداد در 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 | رويدادی که در هنگام رها کردن يک کليد فشرده شده بر روی عنصر مورد نظر فعال می شود . |
با ما همراه باشید
![[تصویر: sepandar.jpg]](http://www.asheghaneha.ir/wp-content/uploads/2013/02/sepandar.jpg)
بهترین سافت آنلاین کردن pv بوت