آموزش HTML :کاربرد شیوه نامه خارجی

آموزش HTML

HTML

سلام  خدمت همراهان عزیز  یکشنبه ها  و پنج شنبه ها با آموزش زبان برنامه نویسی (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/>

برنامه را در یک مرور گر اجرا کنید بدین ترتیب شکل زیر ظاهر می شود.

Screenshot (4163)
معرفی سایت های خارجی:

https://codecademy.com

https://html.com

مثال :

برنامه ای که استفاده از حاشیه ها و فوتنهای مختلف را در صفحه وب نمایش می دهد.

<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/>

نتیجه اجرا در شکل زیر آمده است .

Screenshot (4166)

برگرفته از :

کتاب راهنمای جامع (HTML, BHTML, XML)

دکتر عین الله جعفر نژاد قمی

پاسخ به سوال دوستان :

شاید تاکنون به این فکر کرده باشین که چرا باید برای کسب و کار خود وبسایت داشته باشین ؟

دلیل اینکه می‌گوییم باید سایت داشته باشید این آمار است. توجه کنید که ۸۱٪ از افراد قبل از

تصمیم گیری در مورد خرید و فروش در یک کسب وکار یا خدمات، در اینترنت تحقیق می کنند.

یعنی ۲۵.۹۲ میلیون نفر هستند که مشاغل را به صورت آنلاین جستجو می کنند. با این وجود ۴۶% کسب و کارها فکر می‌کنند نیاز به وب سایت ندارند.

توجه داشته باشید که جهان به سمت دیجیتالی شدن پیش می‌رود و نداشتن وب سایت

برای یک شرکت یا هر کسب و کاری، به منزلۀ جا ماندن از گردونۀ روزگار است.

برای اطلاعات بیشتر با همکاران ما در شرکت آراز پردازش در ارتباط باشید

آدرس ایمیل:  info@arazpardazesh.com

اینستاگرام شرکت:   https://instagram.com/araz_pardazesh_kla

تماس با ما:     https://arazpardazesh.com/contact

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سیزده − 6 =