html بایگانی - شرکت سبزاندیش آراد |طراحی سایت

۲۰ دی

معرفی CSS

معرفی CSS :

CSS مخفف عبارت ( Cascading Style Sheet ) است .
از CSS ، برای قالب دهی و اعمال خواص مورد نظر به عناصر و تگ های موجود در صفحات HTML استفاده می شود .
با استفاده از امکانات CSS ، می توان صفحات HTML را با سرعت ودقت بيشتری طراحی کرد و باعث کاهش حجم کد نويسی می شود .
توسط خواص CSS ، می توان ظاهر ، رنگ ، نحوه نمايش ، موقعيت قرار گيری ، تراز بندی افقی و عمودی و … را برای عناصر HTML تعيين کرد .

توجه ! : قبل از مطالعه بخش CSS ، شما بايد به طور کامل با زبان برنامه نويسی HTML و بخصوص تگ < style > آشنا باشيد . برای مطالعه زبان HTML ، به بخش آموزش HTML و برای مطالعه تگ < style > ، به قسمت آموزش تگ < style >در HTML برويد .


دليل استفاده و کاربرد CSS :

در اينجا با اشاره به يک موضوع کلی ، دليل استفاده از CSS را بيان می کنيم :

همانطور که می دانيد صفحات HTML ، از عناصر مختلفی مثل پاراگراف ، جداول ، عنوان ها و … غيره تشکيل شده اند . امروزه صفحات وب از حالت ساده و يکنواخت خارج شده و طراحان سعی می کنند تا با استفاده از جلوه های تصويری مثل استفاده از رنگ های مختلف ، حالت های نمايش گوناگون و … به جذابيت و زيبايي صفحات بيافزايند .
فرض کنيد که ما در صفحات يک وب سايت ، يکسری عنوان ها ، پارگراف ها و جداول داريم که اين عناصر در بيشتر صفحات تکرار شده و دارای ويژگی های يکسانی هستند . به طور مثال برخی از عنوان ها رنگ سبز داشته ، يا بعضی از پاراگراف ها دارای نوع و اندازه خاصي از Font هستند و يا جداول دارای پس زمينه رنگی هستند . در اينجا ۲ راه حل جهت تعيين خواص برای اين عناصر وجود دارد :

۱-در درون هر صفحه ، خواص مشترک را در تمام صفحات و در درون تگ های مورد نظر به صورت تکی تعيين کنيم ، که اين مسئله چند اشکال دارد :

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

-حجم کد نويسی بالا رفته و احتمال خطا افزايش می يابد .

-سرعت طراحی صفحات بسيار کاهش می يابد .

-اعمال تغييرات به عناصر بسيار وقت گير بوده و کار زيادی را می طلبد .

۲-ما ابتدا عناصر با خواص مشابه را بر حسب id و class آنها ، در گروه های يکسان قرار می دهيم . سپس در يک فايل Style بيرونی و يا در تگ Style در بخش Head صفحه ، خواص و ويژگی های مشترک را در يکجا برای همه آن گروه ها تعريف کرده و سپس هر يک از عناصر را به گروه مورد نظر ارتباط می دهيم . برای آشنايي با روش دسته بندی و ارتباط عناصر در CSS ، به بخش آموزش تگ < style > در HTML برويد .
انجام روش دوم ، اشکالات روش اول را برطرف کرده و باعث می شود تا :

خواص مشابه در عناصر و تگ ها تکرار نشود .

حجم کد نويسی کاهش يافته و احتمال خطا کمتر می شود .

سرعت طراحی صفحات افزايش می يابد .

اعمال تغييرات به صفحات بسيار سريع و راحت صورت می گيرد .


راهنماي مطالعه بخش CSS :

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

توجه ! : تمام مثال های بخش آموزش HTML ، براساس استانداردهای نرم افزار Microsoft Visual Studio طراحی و توسط مرورگر های مطرح Internet Explorer و FireFox تست شده است .

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

اشتراک
۲۰ دی

ليستی کامل ازتگ های HTML

لسيت کامل تگ های HTML به ترتيب حروف الفبا :

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

رديفنام تگتوضيح مختصر
۱< a >برای ايجاد يک لنگر به کار می رود .
۲< abbr >برای ايجاد يک مخفف برای يک عبارت بزرگتر به کار می رود .
۳< acronym >برای ايجاد يک مخفف برای يک عبارت بزرگتر به کار می رود .
۴< address >برای نوشتن يک آدرس در متن به کار می رود .
۵< area >مشخص کننده يک ناحيه در نقشه های تصويری است .
۶< b >برای توپر کردن نوشته ( Bold ) به کار می رود .
۷< base >برای تعيين خواص پايه در يک صفحه به کار می رود .
۸< bdo >قلم نوشته را به صورت نوشته های محيط های کدنويسی کامپيوتر در می آورد .
۹< big >باعث بزرگتر نمايش داده شدن نوشته در يک متن می شود .
۱۰< blockquote>برای ايجاد يک نقل قول به کار می رود .
۱۱< body >بدنه اصلی محتويات صفحه وب را تشکيل می دهد .
۱۲< br >برای ايجاد يک خط جديد به کار می رود .
۱۳< button >برای ايجاد دکمه های وب به کار می رود .
۱۴< caption >برای تعيين عنوان يک جدول به کار می رود .
۱۵< cite >باعث نمايش کج نوشته به کار می رود .
۱۶< code >برای نمايش متن همانند محيط های برنامه نويسی به کار می رود .
۱۷< col >برای دسته بندی گروهی از ستون های يک جدول به کار می رود .
۱۸< colgroup >برای دسته بندی گروهی از ستون های يک جدول به کار می رود .
۱۹< dd >برای ايجاد ليست های معنی به کار می رود .
۲۰< del >برای نمايش متن حذف شده درصفحه به کار می رود .
۲۱< div >برای تقسيم فضا در صفحات وب به کار می رود .
۲۲< dl >برای ايجاد ليست های معنی به کار می رود .
۲۳< dt >برای ايجاد ليست های معنی به کار می رود .
۲۴< em >برای نمايش نوشته به صورت کج به کار می رود .
۲۵< fieldset >برای ايجاد يک کادر به دور محتويات خود به کار می رود .
۲۶< form >برای ايجاد يک فرم در صفحه به کار می رود .
۲۷< h1 > تا < h6 >برای ايجاد انواع تيترها در نوشته به کار می رود .
۲۸< head >در برگيرنه اطلاعات کلی درباره سند وب است .
۲۹< hr >برای ايجاد يک خط در عرض صفحه به کار می رود .
۳۰< html >محدوده اصلی کد HTML يک صفحه را تعيين می کند .
۳۱< i >برای نمايش نوشته به صورت کج به کار می رود .
۳۲< img >برای قرار دادن تصوير در صفحه به کار می رود .
۳۳< input >برای ساختن انواع کتنرل های HTML به کار می رود .
۳۴< ins >برای مشخص کردن متن های جديد وارد شده در يک صفحه به کار می رود .
۳۵< kbd >برای نمايش متن همانند محيط های برنامه نويسی به کار می رود .
۳۶< label >برای ايجاد يک عنوان ( نماد متنی ) در صفحه به کار می رود .
۳۷< legend >برای ايجاد عنوان يک کادر fieldset به کار می رود .
۳۸< li >برای تعريف يک آيتم در ليست به کار می رود .
۳۹< link >برای برقراری ارتباط بين صفحه با يک فايل خارجي به کار می رود .
۴۰< map >برای ايجاد يک نقشه تصويری به کار می رود .
۴۱< meta >در بر گيرنده اطلاعات کلی درباره محتويات يک صفحه جهت استفاده موتورهای جستجو است .
۴۲< noscript >برای تعيين جايگزين يک اسکريپت در يک صفحه به کار می رود .
۴۳< object >برای پيوند يک شی خارجی با صفحه به کار می رود .
۴۴< ol >برای ايجاد ليست های ترتيبی به کار می رود .
۴۵< optgroup >برای دسته بندی گزينه های يک ليست به کار می رود .
۴۶< option >برای ايجاد يک ليست در صفحه به کار می رود .
۴۷< p >برای ايجاد يک پاراگراف در صفحه به کار می رود .
۴۸< param >برای تعيين تنظيمات زمان اجرای يک شی خارجی در صفحه به کار می رود .
۴۹< pre >برای نمايش متن به همان صورت اوليه به کار می رود .
۵۰< q >برای ايجاد يک نقل قول به کار می رود .
۵۱< samp >برای نمايش متن همانند محيط های برنامه نويسی به کار می رود .
۵۲< script >برای تعيين يک اسکريپت در صفحه به کار می رود .
۵۳< select >برای ايجاد يک ليست باز شو به کار می رود .
۵۴< small >برای نمايش متن به صورت کوچکتر به کار می رود .
۵۵< span >برای تقسيم متن به کار می رود .
۵۶< strong >برای نمايش درشتر متن به کار می رود .
۵۷< style >برای قالب بندی تگ های HTML و صفحات به کار می رود .
۵۸< sub >برای ايجاد يک زير نويس به کار می رود .
۵۹< sup >برای ايجاد يک انديس به کار می رود .
۶۰< table >برای ايجاد جداول به کار می رود .
۶۱< tbody >شامل محتويات و بدنه اصلی يک جدول می شود .
۶۲< td >برای ايجاد يک خانه جدول به کار می رود .
۶۳< textarea >برای ايجاد يک کادر متن به کار می رود .
۶۴< tfoot >برای تعيين عنوان انتهای يک جدول به کار می رود .
۶۵< th >برای ايجاد يک سر عنوان برای جدول به کار می رود .
۶۶< thead >برای ايجاد يک سر عنوان برای جدول به کار می رود .
۶۷< title >برای ايجاد متن tooltip درباره عناصر به کار می رود .
۶۸< tr >برای ايجاد يک سطر جدول به کار می رود .
۶۹< tt >باعث نمايش متن به صورت نوشته های تلگراف به کار می رود .
۷۰< u >برای خط زيردار کردن نوشته به کار می رود .
۷۱< ul >برای ايجاد ليست های نشانه ای به کار می رود .
۷۲< var >برای نمايش متن همانند محيط های برنامه نويسی به کار می رود .
۷۳< !– … — >برای ارائه توضيحات دلخواه در صفحه HTML به کار می رود .
۷۴< !DOCTYPE >نوع و نسخه زبان برنامه نويسی مورد استفاده در صفحه وب را مشخص می کند .

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

اشتراک
۲۰ دی

رويدادهای HTML

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

رويدادهای پنجره ( فايل )

نکته : اين رويدادها فقط در عنصرهای body و frameset معتبر هستند .

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

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

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

شرحنام رويداد
در هنگام تغيير وضعيت يک کنترل تحريک می شود . برای مثال در کنترل textbox در هنگام تغيير متن درون آن تحريک می شود .onchange
در هنگام فشردن دکمه submit فرم و ارسال اطلاعات کنترل های فرم تحريک می شود .onsubmit
در هنگام فشردن دکمه فرمان reset و پاک شدن اطلاعات کليه کنترل های فرم تحريک می شود .onreset
در هنگام انتخاب کردن عنصر مورد نظر در فرم تحريک می شود .onselect
در هنگام از دست دادن فوکوس * کنترل تحريک می شود .onblur
در هنگامي که کنترل فوکوس را به دست می آورد ، تحريک می شود .onfocus

* توضيح فوکوس ( focus ) : در هر لحظه کنترلی که در يک صفحه يا فرم ، انتخاب شده است و به دور آن کادر قرار گرفته به اصطلاح فوکوس برنامه را در اختيار دارد . کنترلی که انتخاب شود ، فوکوس را به دست آورده و کنترلی که از انتخاب خارج شود ، فوکوس را از دست می دهد .

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

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

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

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

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

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

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

اشتراک
۲۰ دی

تگ های تقسيم بندی صفحه و متن

تگ < span > :

از تگ < span > برای تقسيم بندی متن يک پاراگراف به قطعات مجزا استفاده می شود ، که می توان به هر قسمت ويژگی ها و style متفاوتی را اعمال کرد . متن مورد نظر برای هر قسمت در بين تگ باز و بسته < span > قرار می گيرد .
برای مثال می خواهيد بخشی از يک پاراگراف به رنگ سبز باشد . در اين حالت بخش مورد نظر را در يک < span > قرار داده و خاصيت color آن را در قسمت stylee به رنگ سبز تعيين می کنيم .

مثال : پارگراف زير دارای چندين قسمت مختلف با خصوصيات متفاوت است :

Example
< p >
This is a paragraph that < br / >
  < span style =”color : green ” > This part is green < /span >
AND
  < span style = “color : blue ” > This part is blue . < /span >
< /pp >
کد
This is a paragraph that
This part is green AND This part is blue .
خروجی

تگ < div > :

اين تگ يک قسمت و ناحيه مجزا را بر روی صفحه تعيين می کند . از اين تگ معمولا برای تقسيم بندی فضای صفحه به نواحی مجزا استفاده می شود و بيشتر تگ های HTML را می توان درون تگ < div > به کار برد .
نکته : معمولا مرورگرها يک خط در ابتدا و انتهای div با ساير متون و عناصر ديگر صفحه ايجاد می کنند و نوشته به ابتدای سطر بعدی انتقال می يابد .

مثال : در مثال زير بخشی از صفحه توسط يک تگ < div > از ساير صفحه جدا شده است :

Example
< p style = “color: Maroon” > This is paragraph one < p >
< div style = “color: Green” > This part is a div . It can contain almost every things ! < /div >
< p style = “color: blue” > This is another paragraph < /pp >
کد
This is paragraph one

This part is a div . It can contain almost every things !

This is another paragraph

خروجی

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

اشتراک
۲۰ دی

(۲)گذاشتن تصاويردر HTML

تگ < area > , < map > :

ايجاد يک نقشه تصويری ( يک عکس با نواحی مختلف قابل کليک شدن ) :
از تگ < map > برای ايجاد يک نقشه تصويری استفاده می شود . يک نقشه تصويری , عکسی است که ناحيه های متفاوت آن قابل کليک کردن بوده که می توان با کليک بر روی هر قسمت به يک صفحه يا فايل ديگرر پيوند بر قرار کرد .
هر تگ < area > در درون تگ < mapp > ، می تواند تعيين کننده يک ناحيه مجزا قابل کليک شدن باشد که با تعيين مختصات آن بر روی عکس ، آن ناحيه مشخص می شود .

نکته مهم : ما ابتدا به وسيله تگ < map > و تگ های درونی < area > يک نقشه تصويری با نواحی مختلف قابل کليک شدن ايجاد کرده ، سپس آن نقشه را به يک عکس بر روی صفحه پيوند می دهيم .
برای اين کار خاصيت usemap را در تگ < img > عکس مورد نظر برابر نام Name يا idd ، نقشه تصويری ايجاد شده قرار می دهيم . برای درک بهتر به مثال دقت کن

خواص مهم تگ map
نام خاصيتنوع خاصيتشرح
name
يا
id
name
نام
يک نام منحصر به فرد برای نقشه تصويری تعيين می کند .
خواص مهم تگ area
نام خاصيتنوع خاصيتشرح
Coordsابتدا به خاصيت shape توجه کنيد .
مشخص کننده مختصات نقاط مختلف يک چند ضلعی (مربع ، مستطيل و … ) برای تعيين ناحيه مورد نظر از عکس برای ايجاد پيوند است که دارای حالت های زير است :
rect : مربع . تعيين کننده مختصات چهار نقطه مختلف يک مربع يا مستطيل
coords =left,top,right,bottom
circ : دايره . مشخص کننده نقطه مرکز و شعاع يک دايره
coords=center X, center Y ,radius
poly : چند ضلعی . مشخص کننده مختصات انواع نقاط مختلف يک چند ضلعی
coords = X1 Y1, X2 Y2, … , Xn Yn
hrefURL
مسير و نامم فايل
برای تعيين آدرس کامل صفحه يا فایل مقصد پيوند به کار می رود .
nohreftrue
false
در صورتی که مقدار آن برابر true باشد ، آن ناحيه از عکس فعال و قابل کليک کردن بوده و در صورت false بودن غير فعال است .
shaperect
rectangle
circ
circle
poly
polygon
شکل ناحيه قابل کليک شدن از يک عکس يا نقشه تصويری را تعيين می کند ، که مختصات آن توسط خاصيت coords در همين تگ مقدار دهی می شود و. انواع اشکال ممکن عبارتند از :
rect , rectangle : مربع يا مستطيل
circ , circle : دایره يا بيضی
poly , polygonn : چند ضلعی
target_blank
_parent
_self
__top
نحوه باز شدن و نمايش پنجره صفحه مقصد را تعيين می کند که دارای حالت های زير است:
– blank : لينک در يک پنجره جديد باز خواهد شد .
– self : لينک در همان پنجره يا قابی که کليک شده است باز خواهد شد .
-parent : لينک در قاب اصلی يا مادر باز خواهد شد .
-topp : لينک در همان پنجره ای که کليک شده است به طور کامل باز خواهد شد .

مثال : در تصوير زير برای رفتن به توضيح در مورد هر تگ ، بر روی قسمت مربوط به آن کليک کنيد :

Example
< img src=”../Pic/TagsList.jpg” alt=’learner’ usemap=”#taglist” />
< map id=”taglist” >
    < area id=”table” alt=”table tag” shape=”rect” coords=”1, 2, 194, 122″ href=”HtmlTable1.aspx” />
    < area id=”body” alt=”body tag” shape=”rect” coords=”194, 0, 386, 119″ href=”basictags1.aspx” />
    < area id=”link” alt=”link tag” shape=”rect” coords=”0, 121, 193, 242″ href=”HtmlLinks2.aspx” />
< area id=”p” alt=”p tag” shape=”rect” coords=”192, 119, 386, 242″ href=”textformat1.aspx” />
< /mapp >
کد
learner

 

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

اشتراک
شرکت سبزاندیش آراد

کلیه حقوق متعلق به شرکت سبزاندیش آراد میباشد.

لوگو نماد اکترونیکیlogo-samandehi