سری آموزش های فصل پنجم (HTML)
بخش اول :شیوه نامه ها انواع و خواص
دوم: خواص شیوه نامه، رنگ و زمینه
سوم : خواص شیوه نامه ها خواص متنی
چهارم : خواص شیوه نامه ها ؛ کادر بندی
پنجم: خواص کادرها (مرز کادرها)
ششم : خواص کادر بندی (فاصله گذاری)
هفتم : خواص شیوه نامه (خواص دسته بندی و لیستها)
سلام خدمت همراهان عزیز یکشنبه ها و پنج شنبه ها با آموزش زبان برنامه نویسی (HTML) همراه شما هستیم. برای اطلاعات بیشتر به مقاله ی هفته ی قبل مراجعه فرمایید .
مقدمه ی کوتاه:
شیوه نامه ها را به سه روش می توان به صفحات وب اعمال کرد. یک روش این است که شیوه نامه فقط برای یک دستور مورد استفاده قرار گیرند که آنها را شیوه نامه دستوری می نامند.روش دیگر استفاده از شیوه نامه ها این است که اثر آنها در یک صفحه وب باشد. این شیوه نامه صفحه ای می نامند. سومین روش استفاده از شیوه نامه ها این است که آنها را در یک فایل جداگانه قرار داد و اسناد HTML فایل استفاده کنند این شیوه نامه را شیوه نامه خارجی می نامند.(پیشنهاد می کنم برای یادگیری بهتر شیوه نامه ها آموزش های قبل را نگاه کنید.)
انواع شیوه نامه ها :
1 ) شیوه نامه دستوری
2) شیوه نامه صفحه ای
3) شیوه نامه خارجی
کاربرد شیوه نامه خارجی :
و شیوه نامه خارجی یک فایل متنی ساده است که حاوی مشخصات شیوه نامه برای دستورات و کلاس های HTML است. پسوند این فایلها css است. بنابراین مراحل استفاده از شیوه نامه خارجی عبارت است از :
- ایجاد یک فایل متنی با پسوند css که حاوی شیوه نامه باشد.
- استفاده از دستورات <LINK> در یک برنامه HTML برای استفاده از فایل حاوی شیوه نامه دو صفت مهم این دستور عبارتند از REL و HREF صفت REL رابطه بین فایل HTML و فایل حاوی شیوه نامه را نامگذاری می کند و به صورت “REL=”STYLESHEET استفاده می شود. صفت HREF مشخص می کند. چه فایلی باید مورد استفاده قرار گیرد.
مثال :
برنامه HTML که با استفاده از شیوه نامه خارجی ، صفحه وبی را طراحی می کند. برای اجرای این مثال مراحل زیر را انجام دهید:
1 دستورات زیر را که شیوه نامه را تشکیل می دهند در یک ویراستار مثل notepad تایپ کنید و به نام example.css ذخیره کنید.
| body { font : 20pt,font-family: serif, color: black, background:white}
H1 { font : 20pt,font-family: sans-serif, color: black, text-align:center} H2 { font : 16pt,font-family: sans-serif, color: black, text-align:center} P { text-indent : 0.5in ,margin-left: 50px, margin-right: 50px} A:link { color: blue,text-decoration: none} A:visited { color: red,text-decoration: none} A:active { color: red,text-decoration: none} |
|---|
2 دستورات زیر را در یک ویراستار مثل notepad تایپ کرده ، و به نام دلخواه بر روی دیسک ذخیره کنید.
| <html>
<head> < title> style sheet linking text </title> <“link rel=”stylesheet” href=”a:\example.css” type=”text/css> <head/> <body> <h1> external style sheet </h1> <h2> this is in the file example.css </h2> <p> information systems are not a mere collection of hardware <p/> <body/> <html/> |
|---|
برنامه را در یک مرور گر اجرا کنید بدین ترتیب شکل زیر ظاهر می شود.
معرفی سایت های خارجی:
مثال :
برنامه ای که استفاده از حاشیه ها و فوتنهای مختلف را در صفحه وب نمایش می دهد.
| <html>
<head> < title> css font attributes example </title> <“style type=”text/css> –!> body { font-size : 14pt, line-height:12pt} serif { font-family : serif}. sans-serif { font-family : serif}. cursive { font-family : cursive}. fantasy { font-family : fantasy}. comic { font-family : comic sans ms}. xx-small { font-family : xx-small}. x-small { font-family : x-small}. small { font-family : small}. medium { font-family : medium}. large { font-family : large}. x-large { font-family : x-large}. {font-family : xx-large}xx-large. smaller { font-family : smaller}. larger { font-family : larger}. points { font-family : 18pt}. percentage { font-family : 200%}. italic { font-family : italic}. oblique { font-family : oblique}. weight { font-weight : 900}. smallcaps { font-variant : small-caps}. uppercase { text-transform : uppercase}. lowercase { text-transform : lowercase}. capitalize { text-transform : capitalize}. underline { text-decoration : underline}. blink { text-decoration : blink}. line-through { text-decoration : line-through}. overline { text-decoration : cursive}. <style/> <head/> <body> <h2> font family </h2> <this text is in <span class=”serif”> serif </span> <br <this text is in <span class=”sans-serif”>sans- serif </span> <br <this text is in <span class=”cursive”> cursive </span> <br <this text is in <span class=”fantasy”> fantasy </span> <br <this text is in <span class=”comic”> comic sans ms </span> <br <h2> font sizing </h2> <this text is in <span class=”xx-small”> xx-small </span> <br <this text is in <span class=”x-small”> x-small </span> <br <this text is in <span class=”small”> small text </span> <br <this text is in <span class=”medium”> medium text </span> <br <this text is in <span class=”large”> large text </span> <br <this text is in <span class=”x-large”> x-large text </span> <br <this text is in <span class=”xx-large”> xx-large text </span> <br <this text is in <span class=”smaller”> smaller </span> <br <this text is in <span class=”larger”> larger text </span> <br <this text is in <span class=”points”> exactly 18 point text. </span> <br <this text is in <span class=”percentage”> 200% larger text. </span> <br <h2> font style weight and variant </h2> <this text is in <span class=”italic”> italic </span> <br <this text is in <span class=”oblique”> oblique </span> <br <this text is in <span class=”smallcaps”> smallcaps </span> <br <h2> text transformation </h2> <this text is in <span class=”uppercase”> uppercase </span> <br <this text is in <span class=”lowercase”> lowercase </span> <br <this text is in <span class=”capitalize”> capitalize </span> <br <h2> text decoration </h2> <this text is in <span class=”blink”> blink </span> <br <this text is in <span class=”underline”> underline </span> <br <this text is in <span class=”line-through”> line-through </span> <br <this text is in <span class=”overline”> overline </span> <br <body/> <html/> |
|---|
نتیجه اجرا در شکل زیر آمده است .
برگرفته از :
کتاب راهنمای جامع (HTML, BHTML, XML)
دکتر عین الله جعفر نژاد قمی
پاسخ به سوال دوستان :
شاید تاکنون به این فکر کرده باشین که چرا باید برای کسب و کار خود وبسایت داشته باشین ؟
دلیل اینکه می‌گوییم باید سایت داشته باشید این آمار است. توجه کنید که ۸۱٪ از افراد قبل از
تصمیم گیری در مورد خرید و فروش در یک کسب وکار یا خدمات، در اینترنت تحقیق می کنند.
یعنی ۲۵.۹۲ میلیون نفر هستند که مشاغل را به صورت آنلاین جستجو می کنند. با این وجود ۴۶% کسب و کارها فکر می‌کنند نیاز به وب سایت ندارند.
توجه داشته باشید که جهان به سمت دیجیتالی شدن پیش می‌رود و نداشتن وب سایت
برای یک شرکت یا هر کسب و کاری، به منزلۀ جا ماندن از گردونۀ روزگار است.
برای اطلاعات بیشتر با همکاران ما در شرکت آراز پردازش در ارتباط باشید
آدرس ایمیل: info@arazpardazesh.com
اینستاگرام شرکت: https://instagram.com/araz_pardazesh_kla
تماس با ما: https://arazpardazesh.com/contact