تفاوت گرافیک پیکسلی و برداری
تفاوت گرافیک پیکسلی و برداری
۱۳۹۴-۰۷-۲۹
HTML آموزش
آموزش HTML ( عناصر)
۱۳۹۴-۰۷-۲۹
HTML چیست
HTML چیستReviewed by ادمین on Oct 21Rating:

مقدمه

صفحات اینترنتی شامل اطلاعاتی است که حاوی متن ، تصویر ، ویدئو ، صوت و… می باشد . این محتوا توسط سه لایه به کاربر نمایش داده می شود .

سه لایه به شرح زیر است :

–         لایه محتوا (Content ، به وسیله  HTML ایجاد می شود .)

–         لایه نمایش (Presentation  ، به وسیله Css ایجاد می شود .)

–         لایه رفتار (Behavior  ، به وسیله  JavaScript ایجاد می شود.)

لایه محتوا

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

لایه نمایش

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

 لایه رفتار

در این لایه برخی از رفتارهایی که توسط جاوااسکریپت کدنویسی شده است نمایش داده می شود . به عنوان مثال : اسلایدر جهت نمایش بنرهای تبلیغاتی در صفحه وب . کدهای جاوا اسکریپت بین دو تگ <script type=”text/javascript”></script> قرار میگیرد.

HTML چیست؟

عبارت HTML مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است.  اچ تی ام ال زبان استاندارد طراحی صفحات وب است . آن چیزی که شما هنگام بازدید از یک صفحه وب می بینید، نتیجه تفسیر مرورگر شما از کد های html است. برای دیدن کدهای یک صفحه  به سادگی می توانید بروی view از منوی بالای مرورگر کلیک کنید، و گزینه source را انتخاب کنید.

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

در یک صفحه HTML می توان از انواع عناصر از قبیل متن ، تیتر ، عکس ، جدول  و …  استفاده نمود ، که برای هر عنصر باید از تگ  <> … </> مربوط به آن استفاده کرد.

به عنوان مثال : برای نمایش تیتر اصلی یک متن از تگ <H1> …… </H1> استفاده می نماییم .

چگونه یک صفحه  HTML ایجاد کنیم؟

یک سند اچ‌تی‌ام‌ال، یک پرونده ی مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آن‌ها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را برای کاربر نمایان‌سازی (Render) می‌کنند.

جهت نوشتن کدهای اچ تی ام ال شما می توانید از HTML editor software های متفاوت استفاده نمایید به عنوان مثال :
NotePad , NotePad++ , Adobe Dreamweaver , Microsoft Expression Web , CoffeeCup HTML Editor , ، Nuspher PhpED و … .

ما در این مقاله از Notepad++ استفاده می نماییم .  پس از نصب نرم افزار آن را باز کرده از منوی Encoding گزینه  Convert to UTF_8 را (جهت نمایش صحیح کاراکترهای فارسی) انتخاب نمایید ، سپس به منوی Language رفته و گزینه  H و سپس  HTML را انتخاب کنید ، تا تنظیمات مربوطه صورت پذیرد .

سپس کدهای مورد نظرتون رو داخل این فایل بنویسید (در فصل های آینده با تمامی کدها آشنا خواهید شد) و فایل رو با پسوند  html. ذخیره کنید. حالا شما یک صفحه ی وب ایجاد کردید که میتونید با دابل کلیک با مرورگر ها نتیجه رو ببینید.

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

رویداد ها درhtml

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

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

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

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

Onclick : این رویداد در هنگام کلیک کردن بر روی عنصر مورد نظر تحریک می شود .

 Ondblclick : این رویداد در هنگام دابل کلیک کردن بر روی عنصر مورد نظر تحریک می شود.

Onmousedown : این رویداد در هنگام فشردن دکمه موس بر روی عنصر مورد نظر تحریک می شود.

Onmoouseover : این رویداد در هنگام قرار گرفتن اشاره گر موس بر روی سطح عنصر مورد نظر تحریک می شود .

Onmouseout : این رویداد در هنگام خارج شدن اشاره گر موس از روی سطح عنصر مورد نظر تحریک می شود .

Onmouseup : این رویداد در هنگام رها کردن دکمه موس بر روی عنصر مورد نظر تحریک می شود .

رویدادها در فرم ها :

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

Onblur : در هنگام از دست دادن فوکوس کنترل تحریک می شود .

Onchange : در هنگام تغییر وضعیت یک کنترل تحریک می شود . برای مثال در کنترل textbox در هنگام تغییر متن درون آن تحریک می شود .

Oncontextmenu : رویدادی است که منوی صفحه راه اندازی میشود اجرا می شود .

Onfocus : هنگامی که کنترل فوکوس را به دست می آورد ، تحریک می شود .

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

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

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

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

 Onselect : در هنگام انتخاب کردن عنصر مورد نظر در فرم تحریک می شود .

Onsubmit : در هنگام فشردن دکمه submit فرم و ارسال اطلاعات کنترل های فرم تحریک می شود .

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

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

Onafterprint : رویدادی است که بعد از پرینت شدن سند اجرا می شود.

Onbeforeprint : رویدادی است که قبل از پرینت شدن سند اجرا می شود.

Onbeforeunload : رویدادی است که قبل از اجرای (load) سند اجرا می شود.

onerror : رویدادی است که هنگام وقوع ارور اجرا می شود.

Onhaschange : رویدادی است که زمانی که سند تغییر میکند  اجرا می شود.

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

onmessage : رویدادی است که در هنگام اجرا شدن یک پیغام اجرا می شود .

Onoffline : رویدادی است که در هنگام offline شدن سند اجرا می شود.

Ononline : رویدادی است که در هنگام online شدن سند اجرا می شود.

Onpagehide : رویدادی است که در هنگام مخفی شدن پنجره اجرا می شود.

Onpageshow : رویدادی است که در هنگام آشکار شدن پنجره اجرا می شود.

Onpopstate : رویدادی است که در هنگام تغییر کردن history ویندوز اجرا می شود.

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

onresize : رویدادی است که در هنگام تغییر سایز پنجره اجرا می شود.

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

Onundo : رویدادی است که در هنگام خنثی شدن  سند اجرا می شود.

Onunload : رویدادی است که در هنگام خارج شدن صفحه از حافظه ( بستن ) اجرا می شود .

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

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

Onkeydown : رویدادی که در هنگام فشردن یک کلید بر روی عنصر مورد نظر فعال می شود .

Onkeypress : رویدادی که در هنگام فشردن و رها کردن یک کلید بر روی عنصر مورد نظر فعال می شود .

Onkeyup : رویدادی که در هنگام رها کردن یک کلید فشرده شده بر روی عنصر مورد نظر فعال می شود .

تهیه شده در مدرسه مجازی ایرانیان