سری آموزش های فصل پنجم (HTML)
بخش اول :شیوه نامه ها انواع و خواص
دوم: خواص شیوه نامه، رنگ و زمینه
سوم : خواص شیوه نامه ها خواص متنی
چهارم : خواص شیوه نامه ها ؛ کادر بندی
پنجم: خواص کادرها (مرز کادرها)
ششم : خواص کادر بندی (فاصله گذاری)
هفتم : خواص شیوه نامه (خواص دسته بندی و لیستها)
آموزش HTML : کاربرد شیوه نامه دستوری
سلام خدمت همراهان عزیز یکشنبه ها با آموزش زبان برنامه نویسی (HTML) همراه شما هستیم. برای اطلاعات بیشتر به مقاله ی هفته ی قبل مراجعه فرمایید .
عنوان آموزش امروز :
استفاده از ID و CLASS
استفاده از ID و CLASS
در مثال آموزش قبلی (کاربرد شیوه نامه دستوری) دیدید که قواعد شیوه نامه در یک دستور گنجانده شدند و یا مستقیما به صورت یک صفت در یک دستور قرار گرفتند. گرچه کاربرد شیوه نامه ی دستوری ساده است بهتر است که ساختار سند HTML از شیوه نامه تفکیک شود اما بدون شیوه نامه های دستوری چگونه می توان شیوه نامه خاص را مثلا به یک دستور <H1> یا تعداد خاصی از دستورات <H1> نسبت داد؟ برای این منظور از صفات ID و CLASS استفاده می شود . می توان یک دستور را با استفاده از صفت ID نا مگذاری کرد و آن را به عنوان مقصد یک پیوند در نظر گرفت دستور زیر را ببینید:
| <h1 id =”firstheading”> welcome to arazpardazesh </h1> |
|---|
این دستور موجب می شود تا نام دستور <H1> برابر “First Heading” شود و توسط دستور <A> قابل مراجعه باشد:
| <A HREF =”#firstheading”> go to arazpardazesh </A> |
|---|
صفات ID و CLASS برای اغلب دستورات HTML به جز دستوراتی مثل <HTML> ، <HEAD> و <BODY> مهیا است . شیوه نامه ها نیز می توانند از مقادیر ID استفاده کنند تا دستوری از HTML را بدون ایجاد یک شیوه نامه دستوری تحت تاثیر قرار دهند . چون تقریبا هر دستور HTML دارای صفت ID است لازم نیست.
اطلاعات شیوه نامه در خود دستور قرار گیرد. برای نوشتن قاعده شیوه نامه برای یک مقدار ID ، قبل از نام آن ، علامت # قرار دهید . به عنوان مثال برای ایجاد یک قاعده شیوه نامه برای عنصری که مقدار ID آن First Heading است ، به صورت زیر عمل می شود:
| firstheading {color:blue}# |
|---|
تنها نگرانی در مورد استفاده از صفت ID نامگذاری آن است ، زیرا مقادیر ID باید منحصر بفرد باشند . اما چگونه باید تعیین کرد که شیوه نامه ای متعلق به یک دستور اعمال شود ولی به دستور های دیگر مشابه با آن اعمال نشود؟ برای این منظور باید از قاعده کلاس استفاده کرد. دستورات زیر استفاده از صفت ID را نشان می دهند:
| <html>
<head> <title> id style sheet example </title> <“style type=”text/css> secondparagraph {background : green}# <style/> <head/> <body> <p> ths is paragraph</p> <p id =”secondparagraph”> welcome to arazpardazesh </p> <p> ths is paragraph</p> <body/> <html/> |
|---|
همانطور که گفته شد با استفاده از مفهوم CLASS می توان تعیین کرد که شیوه نامه ای به یک دستور اعمال شود ولی به سایر دستورات مشابه با آن اعمال نگردد. به عنوان مثال در دستورات قبلی می توان طوری عمل کرد که شیوه نامه ای به اولین و سومین دستور <P> اثر کند ولی بر دومین دستور <P> اثری نداشته باشد . صفت CLASS نام کلاسی را تعریف می کند که عنصری باید به آن متعلق باشد. لازم نیست مقادیر CLASS منحصر بفرد باشد زیرا عناصر زیادی می توانند عضو یک کلاس باشند. دستورات زیر کاربرد CLASS را تشریح می کنند:
| <html>
<head> <title> id style sheet example </title> <“style type=”text/css> important {background : yellow}. <style/> <head/> <body> <h1 class=”important”> example </h1> <p class =”important”> this is the first paragraph </p> <p> ths is the second paragraph</p> <p class =”important”> this is the third paragraph </p> <body/> <html/> |
|---|
این مثال سه عنصر دارد که هر کدام صفت CLASS مخصوص به خود را دارند و مقدار آنها important است . براساس اطلاعات شیوه نامه ، رنگ زمینه تمام اعضای کلاس important ، همانطور که با نقطه مشخص شده اند (important) زرد است . نوشتن قواعد برای کلاسها آسان است : قبل از نام کلاس یک نقطه قرار دهید:
| main-item {font-size :150%}. |
|---|
شکلهای دیگری از قواعد کلاس ممکن است . به عنوان مثال، برای اینکه رنگ زمینه عناصر <HI> از کلاس important نارنجی باشند به صورت زیر عمل می شود:
| h1.important {background :orange} |
|---|
کلاسها عامل خوبی برای کاهش تعداد قواعد شیوه نامه در برنامه HTML هستند به عنوان مثال دو دستور زیر را ببینید:
| p.left {font-family: garamond ; font-size:12pt ; font-style: normal ; line-height:11pt ; text-align:left}
p.right {font-family: garamond ; font-size:12pt ; font-style: normal ; line-height:11pt ; text-align:right} |
|---|
در اولین شیوه نامه ، پسوند left به دستور پاراگراف (<P>) اضافه شد و در دستور دوم پسوند right به دستور <P> اضافه گردید . یعنی در شیوه نامه اولی کلاس جدیدی به نام left و در شیوه نامه دومی ، کلاس جدیدی به نام right برای دستور <P> منظور شده اند . (این نامگذاریها اختیاری است) .
معرفی سایت های خارجی:
شیوه نامه اولی ، پاراگراف را در سمت چپ تنظیم می کند (چپ چین) و شیوه نامه دومی پاراگراف را در سمت راست تنظیم می کند (راست چین) بنابراین در هر نقطه ای از برنامه HTML که یک دستور P با این کلاسها تعریف شود، همان شیوه نامه به پاراگراف اعمال می گردد . دستورات زیر را ببینید:
| تنظیم پاراگراف در سمت چپ <p class =”left>
تنظیم پاراگرف در سمت راست<p class=”right> |
|---|
توجه:
برای اینکه دستورات برنامه خلاصه شوند می توانید خواص مشترک این دو شیوه نامه را انتخاب کرده برای دستور <P> تعریف کنید و سپس موارد غیر مشترک را در دو دستور <P> جداگانه منظور نمایید:
| p { font:garamond 12pt / 11pt normal}
p.left {text-align:left} p.right {text-align:right} |
|---|
بدین ترتیب دستورات خلاصه شده ، عیب یابی برنامه آسانتر است.
اکنون دستورات زیر را ببینید:
| <p class =”left”> this is paragraph is left </p>
<p class =”right”> this is paragraph is right </p> |
|---|
دستور اول یک پاراگراف را از سمت چپ و دستور دوم یک پاراگراف را از سمت راست تنظیم می کند همان طور که گفته شد ، با استفاده از مفهوم کلاسها می توان در یک شیوه نا مه کلاسهایی را تعریف کرد که به یک دستور اختصاص نداشته باشند بلکه در تمام دستورات HTML قابل استفاده باشند. دستورات زیر را ببینید:
| first {text-align :left}.
second {text-align :right}. |
|---|
این دو دستور، دو کلاس کلی به نامهای Second , First تعریف می کنند که هر دستور HTML می تواند از آنها استفاده کند . دستورات زیر را ببینید:
| <“p class =”first>
<“p class =”second> |
|---|
برگرفته از :
کتاب راهنمای جامع (HTML, BHTML, XML)
دکتر عین الله جعفر نژاد قمی
پاسخ به سوال دوستان :
شاید تاکنون به این فکر کرده باشین که چرا باید برای کسب و کار خود وبسایت داشته باشین ؟
دلیل اینکه می‌گوییم باید سایت داشته باشید این آمار است. توجه کنید که ۸۱٪ از افراد قبل از
تصمیم گیری در مورد خرید و فروش در یک کسب وکار یا خدمات، در اینترنت تحقیق می کنند.
یعنی ۲۵.۹۲ میلیون نفر هستند که مشاغل را به صورت آنلاین جستجو می کنند. با این وجود ۴۶% کسب و کارها فکر می‌کنند نیاز به وب سایت ندارند.
توجه داشته باشید که جهان به سمت دیجیتالی شدن پیش می‌رود و نداشتن وب سایت
برای یک شرکت یا هر کسب و کاری، به منزلۀ جا ماندن از گردونۀ روزگار است.
برای اطلاعات بیشتر با همکاران ما در شرکت آراز پردازش در ارتباط باشید
آدرس ایمیل: info@arazpardazesh.com
اینستاگرام شرکت: https://instagram.com/araz_pardazesh_kla
تماس با ما: https://arazpardazesh.com/contact