javascript

ՋավաՍկրիպտ[խմբագրել | խմբագրել կոդը]

Վիքիպեդիայից՝ ազատ հանրագիտարանից(Վերահղված է Javascriptից)Jump to navigationJump to search

Տեսակscripting language?, prototype-based programming language?, իմպերատիվ ծրագրավորման լեզուֆունկցիոնալ ծրագրավորման լեզումիջոցառմամբ կողմնորոշվող ծրագրավորման լեզուՀամակարգչային պլատֆորմծրագրավորման ինտերպրետացվող լեզուբազմահարացուցային ծրագրավորման լեզուprototype-based?, generic programming?, Ֆունկցիոնալ ծրագրավորումimperative programming?, aspect-oriented programming? և event-driven programming?
Կատարման ձևինտերպրետացվող է
Առաջացել է1995 թ․
ՆախագծողԲրենդան Այկ
Տիպիզացիադինամիկ
Համացանցի տվյալների տեսակapplication/javascript[1][2][3]
Հիմնական իրականացումներKJSRhinoSpiderMonkeyV8WebKit
Հիմքի վրա էES?
Ներշնչվել էSchemeSelfՋավաCLiveScript?, PythonLuaPerlAWK և HyperTalk?
ՍեփականատերSun Microsystems և Օրաքլ[4]
Անվանված էՋավա[5]
JavaScript Վիքիպահեստում

ՋավաՍկրիպտ (անգլ.՝ JavaScript), ինտերպրետացվող սկրիպտային լեզու։ Այն համացանցում ամենահանրահայտ սկրիպտային լեզուն է և աշխատում է բոլոր հանրահայտ բրաուզերներում, որոնց թվում են Ինտերնետ ԷքսպլորերMozilla FirefoxGoogle ChromeՕպերա և Սաֆարի[6]:

Այս լեզուն առաջին անգամ կիրառվել է Netscape Communications-ի կողմից Netscape Navigator 2 beta (1995) բրաուզերում։ ՋավաՍկրիպտ լեզուն ստեղծվել է Բրենդան Այկի կողմից 1995 թվականին։

Բովանդակություն

Ինչ է ՋավաՍկրիպտը[խմբագրել | խմբագրել կոդը]

  • ՋավաՍկրիպտը նախագծվել է կայքերի HTML էջերին դինամիկություն հաղորդելու համար
  • ՋավաՍկրիպտը սկրիպտային լեզու է
  • ՋավաՍկրիպտը սովորաբար ներառվում է ուղղակիորեն HTML ֆայլերի մեջ
  • ՋավաՍկրիպտը ինտերպրետացվող լեզու է

ՋավաՍկրիպտ[խմբագրել | խմբագրել կոդը]

Նախքան Բրենդան Այկի ներգրավումը Netscape ընկերություն (1995 թվականի ապրիլի 4)[7], խնդիր էր դրված ընդլայնել ծրագրավորման սխեման՝ Scheme կամ Netscape զննարկիչում փոփոխության ենթարկել որոշ կարևորագույն տարրեր: Քանի-որ պահանջը դրված էր խիստ նպատակային, Էյխային ներգրավեցին ընկերություն, որպես սերվերային նյութերի պատասխանատու: Նա այս աշխատանքը կատարեց շուրջ մեկ ամիս, զբաղվեց HTTP-ի [7] պրոտոկոլի բարելավման աշխատանքներով: Այստեղ նա ծավալեց նաև նոր ծրագրավորման աշխատանքներ: Մայիսի 8-ին ծրագրավորողը ետ վերադարձավ, զբաղվելով հաճախորդների սպասարկման աշխատանքներով (զննարկիչում), որտեղ էլ սկսեց վաստակել նոր ծրագրավորման լեզվի առաջխաղացման հաշվին: Բացի Թոմ Պակինայից (Tom Paquin), Պիկա Շելլան (Rick Schell) ևս համոզված էր, որ Netscape-ը պետք է աջակցի ծրագրավորման լեզվին, որը գրված է HTML կոդով [8]:Մարկ ԱնդրեսսենԲիլլ Ջոյ

Բրենդան Էյխի հետ համագործակցում էին[7] հիմնադիր[9] (Netscape CommunicationsՄարկ Անդերսսեն և համահեղինակ (Sun MicrosystemsԲիլլ Ջոյը: Որպեսզի հաջողությամբ ավարտեին աշխատանքը, ընկերությունը համագործակցության պայմանագիր ստորագրեց[10]: Նրանք նպատակ էին դրել՝ ստեղծել այնպիսի ծրագրավորման լեզու, որը բազային ծրագրավորման մաս կկազմեր, հարմար կլիներ և՛ ոճաբանի, և՛ ցմ ծրագրավորողի համար, չէր պահանջիի լրացուցիչ ծավալուն և բարդ գործողություններ կատարելու անհրաժեշտություն[7]: Առաջին ծրագիրը կոչվում էր Mocha[11][12][13], այնուհետև անվանափոխվեց LiveScript[13][14] և նախատեսված է թե՛ որպես ծրագրավորում՝ հաճախորդի համար, և թե՛ որպես ծրագիր՝ սերվերի համար (այնտեղ այն պետք է ունենա LiveWire անվանում)[10]: Որպես սինտակսներ հանդես եկան Սի և Java լեզուները, ու, քանի որ այդ ժամանակ Java-ն համարվում էր խիստ ժամանակակից ժամանակակից բառ[7][10], 1995 թ. դեկտեմբերի 4-ին LiveScript լեզուն վերանվանեցին JavaScript[15], ստանալով արտոնագիր Sun-ից: JavaScript անոնսը Netscape-ի և Sun -ի համար հանդիսանում է բետա-տարբերակի (Netscape Navigator) երկրորդ թողարկումը [7][16]:

1996 թվականին Microsoft ընկերությունը թողարկեց JavaScript լեզուն, JScript անվանումով: Այն առաջադրվել էր 1996 թվականի հուլիսի 18-ին[17]: Առաջին զննարկիչը, որ աշխատեց այս ծրագրի հետ, Internet Explorer 3.0 էր:

Netscape[18][19]-ը ներկայացված է որպես ECMA ասսոցիացիայի լեզու: Ստանդարտ տարբերակն ունի ECMAScript անվանումը, նկարագրվում է ECMA-262 ստանդարտով: Առաջին տարբերակը հանդիսացավ JavaScript 1.1 տարբերակը, ինչպես նաև JScript և ScriptEasy[20][10]:

Ինչ կարող է անել JavaScript-ը[խմբագրել | խմբագրել կոդը]

  • JavaScript-ը HTML դիզայներին տալիս է ծրագրավորման գործիք
  • JavaScript-ը կարող է դինամիկ տեքստ ներդնել HTML էջի մեջ
  • JavaScript-ը կարող է արձագանքել իրավիճակներին(events), այսինքն ՝ JavaScript -ը կարող է գործել, երբ ինչ որ բան է պատահում, օրինակ երբ էջը ավարտում է բեռնավորումը, կամ երբ օգտագործողը մատնահարում է HTML էլեմենտի վրա
  • JavaScript-ը կարող է կարդալ և փոխել HTML էլեմենտի պարունակությունը
  • JavaScript-ը կարող է օգտագործվել տվյալը վավերացնելու համար մինչ վերջինիս սպասարկիչ ուղարկվելը։ Սա կարող է սպասարկչին զերծ պահել ավելորդ գործընթացներից և ծանրաբեռնվածությունից
  • JavaScript-ը կարող է օգտագործվել կայքից օգտվողի զննարկիչը ճանաչելու համար, և կախված զննարկչից՝ բեռնել տվյալ բրաուզերին սպեցիֆիկ էջը
  • JavaScript-ը կարող է օգտագործվել cookie-ներ ստեղծելու համար

JavaScript-ի կառուցվածքը կարելի է բաժանել հետեևյալ 3 մասերի

  1. ECMAScript
  2. բրաուզերի օբյեկտավորված մոդել
  3. դոկումենտի օբյեկտավորված մոդել

JavaScript-ի դյուրըմբռնելիությունը կայանում է նրա օբյեկտների կառուցվածքի մեջ։ JavaScript-ը բավականին նման է C ծրագրավորման լեզվին։ JavaScript-ի օբյեկտները պարունակում են՝

  1. մեթոդներ (ֆունկցիաներ)
  2. հատկանիշներ՝ (տվյալներ կամ այլ օբյեկտներ) նկարագրում է օբյեկտների հատկանշական գծերը
  3. իրադարձություններ (անգլ.՝ events), որոնք փոխկապակցված են օբյեկտների հետ
  4. AngularJS[21] — JavaScript- շրջանակ `բաց կոդով:

Լեզվի ձևաբանությունը[խմբագրել | խմբագրել կոդը]

JavaScript-ը կարելի է գրել անմիջապես HTML ֆայլի մեջ՝ կոդը ներառելով <script> բացվող և </script> փակվող թեգերի մեջ։ JavaScript-ը կարելի է նաև գրել .js ընդլայնմամբ առանձին ֆայլում։ Ներքևում ներկայացված է JavaScript-ի օգտագործման պարզագույն օրինակ՝

<!DOCTYPE html> 
<html>
<head>
<title>Օրինակ</title>

<script type="text/javascript">
alert("Hello World");
</script>

</head>
<body>
</body>
</html>

HTML ֆայլը ակտիվացնելիս կբացվի փոքր պատուհան Hello World ազդանշանով։

Ավելի բարդ օրինակ[խմբագրել | խմբագրել կոդը]

Այս ընտրանքային կոդը ներկայացնում է JavaScript- ի տարբեր առանձնահատկություններ:
/*Գտնում է երկու թվերի ամենացածր ընդհանուր բազմապատիկը (LCM) (LCM) երկու թվերի համար */
function LCMCalculator(x, y) { // կոնստրուկտիվ ֆունկցիա

 var checkInt = function(x) { // ներքին գործառույթը
   if (x % 1 !== 0) {
     throw new TypeError(x + "is not an integer"); // var a =  mouseX
   };
   return x
 }
 this.a = checkInt(x)
   // semicolons   ^^^^   պարտադիր չէ, նոր գծի համարը բավարար է
 this.b = checkInt(y) գրառումը;

}
// Կառուցողի կողմից ստեղծված օբյեկտի նմուշների նախատիպը
// կոնստրուկտորի «նախատիպը»
LCMCalculator.prototype = { // օբյեկտի հիմնական    կոնստրուկտոր: LCMCalculator, // Սահմանվում է ծրագրային կոդը    gcd: function() { // մեթոդը, որը հաշվարկում է բաժանարարը

   // Euclidean ալգորիթմը:
   var a = Math.abs(this.a),
     b = Math.abs(this.b),
     t;
   if (a < b) {
     // swap variables
     t = b;
     b = a;
     a = t;
   }
   while (b !== 0) {
     t = b;
     b = a % b;
     a = t;
   }
   // Միայն անհրաժեշտ է հաշվարկել GCD- ն մեկ անգամ, կիրառվում է «վերահղման» այս մեթոդը:
// Իրականում ոչ վերաձեւակերպում, այն սահմանվում է օրինակով,

    // այսպիսին, որ this.gcd- ը վերաբերում է LCMCalculator.prototype.gcd- ի փոխարեն այս «վերաձևակերպմանը» :
    // Նշեք, որ , եթե LCMCalculator օբյեկտի անդամները «ա» և / կամ «բ» են փոխվել, դա հանգեցնում է սխալ արդյունքների:

   // Also, 'gcd' === "gcd", this['gcd'] === this.gcd
   this['gcd'] = function() {
     return a;
   };
   return a;
 },
 // Օբյեկտի  անվանումները կարող են սահմանվել ըստ տողերի կողմից (") կամ single (') մեջբերումներ:
lcm: function() { // Variable անունները կապված չեն օբյեկտի հատկությունների հետ, e.g., |lcm|ոչ թե |this.lcm|:
//չօգտագործել |this.a*this.b| խուսափելով FP ճշգրտության դասերից:
var lcm = this.a / this.gcd() * this.b; // Միայն մեկ անգամ պետք է հաշվարկի lcm, այնպես որ «վերահղեք» այս մեթոդը:
this.lcm = function() { return lcm; }; return lcm; }, toString: function() { return "LCMCalculator: a = " + this.a + ", b = " + this.b; }

};

// Սահմանել ընդհանուր գործառույթ. այն իրականացվում է վեբ բրաուզերների համար:
function output(x) {

 document.body.appendChild(document.createTextNode(x));
 document.body.appendChild(document.createElement('br'));

}

// Նշում: Array’s map() and forEach() սահմանվում են JavaScript 1.6 տարբերակի համար:
// Դրանք կիրառվում են այստեղ JavaScript- ին բնորոշ ֆունկցիոնալությունը ցուցադրելու համար:

[

 [25, 55],
 [21, 56],
 [22, 58],
 [28, 56]

].map(function(pair) { // array literal + mapping function

   return new LCMCalculator(pair[0], pair[1]);
 }).sort((a, b) => a.lcm() - b.lcm()) // sort with this comparative function; => is a shorthand form of a function, called "arrow function"
 .forEach(printResult);

function printResult(obj) {

 output(obj + ", gcd = " + obj.gcd() + ", lcm = " + obj.lcm());

} Բրաուզերի պատուհանում պետք է ցուցադրվի հետեւյալ արդյունքը.

LCMCalculator: a = 28, b = 56, gcd = 28, lcm = 56
LCMCalculator: a = 21, b = 56, gcd = 7, lcm = 168
LCMCalculator: a = 25, b = 55, gcd = 5, lcm = 275
LCMCalculator: a = 22, b = 58, gcd = 2, lcm = 638

Տարբերակների պատմություն[խմբագրել | խմբագրել կոդը]

ՏարբերակԹողարկման ամսաթիվՀամարժեք էNetscape
Navigator
Mozilla
Firefox
Internet
Explorer
OperaSafariGoogle
Chrome
1.0Մարտ 19962.03.0
1.1Օգոստոս 19963.0
1.2Հունիս19974.0-4.053
1.3Հոկտեմբեր 1998ECMA-262 1st + 2nd edition4.06-4.7x4.05[22]
1.4(Netscape)
Server
6
1.5Նոյեմբեր 2000(ECMA-262 3rd edition)6.01.05.5 (JScript 5.5),
6 (JScript 5.6),
7 (JScript 5.7),
8 (JScript 5.8)
7.03.0-51.0-10.0.666
1.6Նոյեմբեր 20051.5 + array extras + array and string generics + E4X1.5
1.7Հոկտեմբեր 20061.6 + Pythonic generators + iterators + let2.028.0.1500.95
1.8Հունիս 20081.7 + generator expressions + expression closures3.011.50
1.8.11.8 + native JSON support + minor updates3.5
1.8.2Հունիս 22, 20091.8.1 + minor updates3.6
1.8.5Հուլիս 27, 20101.8.2 + new features for ECMA-262 5th edition compliance4.0

Ծանոթագրություններ[խմբագրել | խմբագրել կոդը]

  1.  https://tools.ietf.org/html/rfc4329#section-7.2
  2.  https://www.iana.org/assignments/media-types/application/javascript
  3.  https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
  4.  http://tsdr.uspto.gov/#caseNumber=75026640&caseType=SERIAL_NO&searchType=statusSearch
  5.  https://www.youtube.com/watch?v=XOmhtfTrRxc&t=2m5s
  6.  JavaScript Introduction
  7. ↑ Jump up to:7,0 7,1 7,2 7,3 7,4 7,5 Hamilton Naomi։ «The A-Z of Programming Languages: JavaScript»։ a-z of programming languages (անգլերեն)։ ComputerWorld։ Արխիվացված է օրիգինալից 2011-08-22-ին։ Վերցված է 2009-11-18
  8.  Eich Brendan։ «Popularity» (անգլերեն)։ Արխիվացված է օրիգինալից 2008-04-07-ին։ Վերցված է 2009-11-18
  9.  Frommer Dan։ «Marc Andreessen Joins Facebook Board» (անգլերեն)։ Արխիվացված է օրիգինալից 2011-08-22-ին։ Վերցված է 2009-11-18
  10. ↑ Jump up to:10,0 10,1 10,2 10,3 {{{заглавие}}}. — P. 1, 2. — ISBN 978-0-470-22780-0
  11.  Brendan Eich։ «Popularity» (անգլերեն)։ անհատական բլոգ։ Վերցված է 18 մարտի 2015
  12.  Brendan Eich։ «New JavaScript Engine Module Owner» (անգլերեն)։ անհատական բլոգ։ Վերցված է 18 մարտ 2015
  13. ↑ Jump up to:13,0 13,1 , JavaScript. Գրպանի ուղեցույց: Անհրաժեշտ հրահանգներ և կոդ (խմբ. Քրիստիան Ուենց (Cristian Wenz); թարգմ. անգլ. Ի. Վ. Բերշտեյն) 272 էջ 18, էջեր 272 — 272 էջ, ISBN 978-5-8459-1186-5։
  14.  Paul Krill (2008-06-23)։ «JavaScript creator ponders past, future» (անգլերեն)։ InfoWorld։ Վերցված է 2015-05-03։ «Eich: That’s right. It was all within six months from May till December (1995) that it was Mocha and then LiveScript. And then in early December, Netscape and Sun did a license agreement and it became JavaScript.»
  15.  Bellis Mary։ «The History of JavaScript»։ About.com Guide (անգլերեն)։ Արխիվացված է օրիգինալից 2011-08-22-ին։ Վերցված է 2009-11-18
  16.  «Netscape and Sun Announce Javascript(TM), the Open, Cross-Platform Object Scripting Language for Enterprise Networks and the Internet» (անգլերեն)։ Netscape Communications, Sun Microsystems։ Արխիվացված է օրիգինալից 1996-12-16-ին։ Վերցված է 2009-11-17
  17.  «Microsoft Announces ActiveX Scripting» (անգլերեն)։ Microsoft։ Արխիվացված է օրիգինալից 2011-08-22-ին։ Վերցված է 2009-11-17
  18.  {{hwdva] | հեղինակ = Silwa C. | վերնագիր = Scripting standard coming | հղում = https://books.google.am/books?id=kxcEAAAAMBAJ&pg=PA10&lpg=PA10&dq=Netscape+submitted+the+JavaScript+specification&source=bl&ots=JEnGQvNAmu&sig=chtE3zvk_PmmkxWi14D6XEKyRIs&hl=ru&ei=QyEFS7f-EciB_Qbms6G4Dw&sa=X&oi=book_result&ct=result&resnum=4&ved=0CB4Q6AEwAw#v=onepage&q=&f=false | լեզու = en | թողարկում = Network World | տիպը =ամսագիր | թողարկումը = IDG Network World Inc | տարի = 1996 | գլուխ = 13 | համար = 49 | էջեր = 10 }}
  19.  Սիբախ Պիտեր։ «Ծանոթացում ECMAscript-ի հետ»։ developerWorks Ռուսաստան։ IBM։ Արխիվացված է օրիգինալից 2011-08-22-ին։ Վերցված է 2009-11-19
  20.  Քաղվածելու սխալ՝ Սխալ <ref> պիտակ՝ nombasHistory անվանումով ref-երը տեքստ չեն պարունակում:
  21.  AngularJS
  22.  «What Version of Javascript»։ Javascript.about.com։ 2016-02-22։ Վերցված է 2017-02-24

Արտաքին հղումներ[խմբագրել | խմբագրել կոդը]

[ցույց տալ]դքխՀիմնական ծրագրավորման լեզուները (համեմատումը  • IDE  • պատմությունը  • ժամանակագրութունը)
Վիքիպահեստ նախագծում կարող եք այս նյութի վերաբերյալ հավելյալ պատկերազարդում գտնել ՋավաՍկրիպտ կատեգորիայում։
    Բառարաններ և հանրագիտարաններԲրիտանիկա (օնլայն) · Մեծ կատալոնական[ցույց տալՉափորոշչային վերահսկողություն
[ցույց տալ]դքխISO ստանդարտներ

Կատեգորիաներ

CSS

Կասկադային ոճաթերթ[խմբագրել | խմբագրել կոդը]

Վիքիպեդիայից՝ ազատ հանրագիտարանից(Վերահղված է Cssից)Jump to navigationJump to search

CSS
Ընդլայնում.css
MIMEtext/css
ՄշակողCSS Working Group?
Հրատարակված էդեկտեմբերի 171996
Ֆորմատի տեսակոճային լեզու
Կայքw3.org/Style/CSS/ և drafts.csswg.org
Cascading Style Sheets Վիքիպահեստում

CSS կամ կասկադային ոճաթերթ (Cascading Style Sheets — կասկադային ոճերի թերթներ), կայքին ձևավորում տալու համար օգտագործվող տեխնոլոգիա ծրագրավորման ֆորմալ լեզվով։ CSS-ը հիմնականում օգտագործվում է HTML և XHTML ֆորմատի պատկանող վեբ-էջերի ձևավորման համար, սակայն կարող է նաև օգտագործվել ցանկացած տեսակի XML ֆորմատի փաստաթղթերի համար, ներառյալ SVG և XUL, ինչպես նաև դիզայնի, մակետի, տարբեր սարքերի և տարբեր էկրանների վրա ներկայացնելու համար։

Երբ HTML 3.2 -ի սպեցիֆիկացիայի մեջ ավելացվեցին -ի նման թեգերը, գույնի ատրիբուտները։ Խոշոր վեբ-կայքերի նախագծումը դարձավ երկար և ծախսատար գործընթաց, քանի որ ամեն էջի վրա պետք է նշվեր շրիֆտը և գունային ինֆորմացիան։ Այս խնդիրը լուծելու համար World Wide Web (W3C) կոնսորցիումը ստեղծեց CSS-ը։ CSS-ը HTML-ի էջից հանեց ոճային ֆորմատավորումը[1]։

Բովանդակություն

Նկարագրություն[խմբագրել | խմբագրել կոդը]

CSS-ը օգտագործվում է վեբ-էջեր նախագծողների կողմից գույներ, տառատեսակներ, գտնվելու վայր և այլ նկարագրություններ տալու համար։ CSS-ի հիմնական նպատակն է առանձնացնել HTML էջի պարունակությունը և նրա նկարագրությունը, դրանով իսկ էջին հաղորդել մատչելիություն, ճկունություն և նրա նկարագրությունը կառավարելու հնարավորություն, ինչպես նաև նվազեցնել հրամանների կրկնությունը և բարդությունը։ Բացի այդ CSS-ը թույլ է տալիս տվյալ դոկումենտը ներկայացնել տարբեր ոճերով։ Էջի արտածման ժամանակ CSS-ը կարող է վերցվել տարբեր աղբյուրներից։

  • Եթե ոճերի աղյուսակը գրված է առանձին ֆայլի մեջ, ապա այն կարող է միանալ վեբ փաստաթղթին` հղումով (անգլ.՝ link), որը փաստաթղթի մեջ տեղադրվում է <head> և </head> զույգ թեգերի մեջ: <link> թեգը պետք է ունենա href ատրիբուտը, որն էլ նշում է ոճերի աղյուսակի հասցեն: Այդ աղյուսակում նշված բոլոր հատկությունները տարածվում են ամբողջ փաստաթղթի վրա: Գրելաձևը հետևյալն է.
<!DOCTYPE html>
<html>
   <head>
      .....
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      .....
   </body>
</html>

Հեղինակային ոճեր`[խմբագրել | խմբագրել կոդը]

  • Inline-ոճ, երբ HTML էջի շարվածքում նշվում է ոճը style ատրիբուտի միջոցով։

<p style="color: blue;">տեքստ</p>

  • Ներկառուցված ոճ՝ CSS-ի բլոկներն են գտնվում HTML էջի շարվածքում։

<style> p { color: blue; } </style>

  • Արտաքին ոճ՝ այսինքն ստեղծվում է առանձին .css ֆայլ, որում հղվում է մեր դոկումենտը։

<link type="text/css" rel="stylesheet" href="mystyle.css"/>

Օգտագործողի ոճեր[խմբագրել | խմբագրել կոդը]

Առանձին CSS ֆայլ է, որը նշվում է օգտագործողի կողմից՝ զննարկիչի կարգավորումներում։

Զննարկիչի ոճ[խմբագրել | խմբագրել կոդը]

Այն ոճն է, որը տրվում է օգտագործվող զննարկիչի կողմից լռելյան պայմանով։

Գրելաձև[խմբագրել | խմբագրել կոդը]

Սխեմատիկորեն ոճը նկարագրվում է հետևյալ կերպ՝Նշիչ{ Հատկանիշ։ արժեք; Հատկանիշ։ արժեք; Հատկանիշ։ արժեք; Հատկանիշ։ արժեք; }

Ստանդարտ CSS-ը որոշում է առաջնայությունները, հետևյալ հերթականությամբ՝

  1. Հատկանիշը նշված է @important-ի օգնությամբ,
<!DOCTYPE html>
<html>
   <head>
      .....
      <style media="all">
         @import url(style.css);
      </style>
   </head>
</html>
  1. Ոճը նշված է հենց տեգում (inline)
  2. Նույնացուցիչների քանակը(#id) նշիչում
  3. Կարգերի (.class) և նախա կարգերի(։pseudoclass) քանակը նշիչում
  4. Նշիչում տեգերի անունների քանակը։

Բացի այդ նշանակություն ունի նաև նկարագրման հատկանիշների հարաբերական հերթականությունը՝ ավելի ուշ գրված հատկանիշն առաջնայնություն ունի։

Ոճերի աղյուսակների օրինակ.p { font-family: "Garamond", serif; } h2.class { font-size: 110 %; color: red; background: orange; } #news p { color: orange; } .class p { color: orange; } [title]{ color:orange; } p:hover{ color:orange; }

Այստեղ բերված է 3 կանոն p, h2 և #news p նշիչների համար։ Առաջին երկու կանոններում HTML-ի պարբերության և վերնագրի համար նշանակվում են ոճեր, ըստ որոնց պարբերությունը կարտածվի Garamond տառառեսակով, կամ եթե այդ տառատեսակը հասանելի չէ, որևէ այլ տառատեսակով (serif) տիպի։ Երկրորդ դասի վերնագիրը կարտածվի կարմիր տառերով, սպիտակ ֆոնով և մեծացված տառաչափով։

Երրորդ կանոնը վերաբերվում է այն պարբերություններին, որոնք գտնվում են #news id ունեցող էլեմենտների մեջ։

Դասեր և նույնացուցիչներ[խմբագրել | խմբագրել կոդը]

Դասերը և նույնացուցիչները կարող են վերաբերվել միայն նշված տարրերին (թեգերին), որոնք HTML կոդում ունեն ատրիբուտներ` class կամ id: Օրինակ

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>
         Селекторы классов и идентификаторов
      </title>
      <style>
         p.Big {
            font-family: arial, helvetica, sans-serif;
            color: maroon; 
         }
         div#First {
            background-color: silver; 
         }
      </style>
   </head>
   <body>
       .....
       <div id="First">
          .....
       </div>
       <p class="Big">
          .....
       </p>
   </body>
</html>

Հիմնական տարբերությունն այն է, որ նույնացուցիչը (անգլ.՝ id) նշանակվում կամ սահմանվում է մեկ էլեմենտի համար, իսկ դասը (անգլ.՝ class)-ը սովորաբար հատկանշում է մի քանի էլեմենտներ: Այնուամենայնիվ, ժամանակակից բրաուզերները կարող են տարբերակել մի քանի էլեմենտներ միևնույն իդենտիֆիկատորով: Տարբերությունն այն է նաև, որ կարող են լինել մի քանի դասեր,որոնք ծրագրի կոդում առանձնացվում են բացատանիշներով, իսկ նույնացուցիչները այդպես ներկայացնել հնարավոր չէ: Կարևոր է նշել հետևյալ տարբերությունը` նույնացուցիչները լայնորեն կիրառվում են JavaScript ծրագրի կոդում, որպեսզի գտնեն փաստաթղթի ունիկալ տարրերը: Ի տարբերություն թեգերի և նրանց ատրիբուտների, դասերի և նույնացուցիչների անունները կախված են կոդում տառերի գրառման ձևից: Դասերի և նույնացուցիչների հատկությունները սահմանվում են սելեքթորների օգնությամբ: Կարող է դասի հատկությունը տրվել ամբողջությամբ (այդ դեպքում սելեքթորը սկսվում է «.» նշանով), կամ նույնացուցիչն ինքն իր հատկությամբ (այս դեպքում սելեքթորը սկսվում է «#» նշանով), ինչպես նաև այդ դասի ցանկացած էլեմենտի կամ նույնացուցիչի հատկությունով:

CSS Սելեքթորներ[խմբագրել | խմբագրել կոդը]

Այստեղ պատկերված են CSS սելեքթորներն իրենց օրինակներով, որոնց միջոցով ընտրվում են HTML տարրերը, CSS ոճային աղյուսակում արտաքին տեսքի հետ կապված կանոններ գրելու նպատակով:

PatternMatchesFirst defined
in CSS level
Ean element of type E1
E:linkan E element is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)1
E:activean E element during certain user actions1
E::first-linethe first formatted line of an E element1
E::first-letterthe first formatted letter of an E element1
.call elements with class=»c»1
#myidthe element with id=»myid»1
E.warningan E element whose class is «warning» (the document language specifies how class is determined)1
E#myidan E element with ID equal to «myid»1
E Fan F element descendant of an E element1
*any element2
E[foo]an E element with a «foo» attribute2
E[foo=»bar»]an E element whose «foo» attribute value is exactly equal to «bar»2
E[foo~=»bar»]an E element whose «foo» attribute value is a list of whitespace-separated values, one of which is exactly equal to «bar»2
E[foo|=»en»]an E element whose «foo» attribute has a hyphen-separated list of values beginning (from the left) with «en»2
E:first-childan E element, first child of its parent2
E:lang(fr)an element of type E in language «fr» (the document language specifies how language is determined)2
E::beforegenerated content before an E element’s content2
E::aftergenerated content after an E element’s content2
E > Fan F element child of an E element2
E + Fan F element immediately preceded by an E element2
E[foo^=»bar»]an E element whose «foo» attribute value begins exactly with the string «bar»3
E[foo$=»bar»]an E element whose «foo» attribute value ends exactly with the string «bar»3
E[foo*=»bar»]an E element whose «foo» attribute value contains the substring «bar»3
E:rootan E element, root of the document3
E:nth-child(n)an E element, the n-th child of its parent3
E:nth-last-child(n)an E element, the n-th child of its parent, counting from the last one3
E:nth-of-type(n)an E element, the n-th sibling of its type3
E:nth-last-of-type(n)an E element, the n-th sibling of its type, counting from the last one3
E:last-childan E element, last child of its parent3
E:first-of-typean E element, first sibling of its type3
E:last-of-typean E element, last sibling of its type3
E:only-childan E element, only child of its parent3
E:only-of-typean E element, only sibling of its type3
E:emptyan E element that has no children (including text nodes)3
E:targetan E element being the target of the referring URI3
E:enableda user interface element E that is enabled3
E:disableda user interface element E that is disabled3
E:checkeda user interface element E that is checked (for instance a radio-button or checkbox)3
E:not(s)an E element that does not match simple selector s3
E ~ Fan F element preceded by an E element3

Սելեքթոր դաս(class)[խմբագրել | խմբագրել կոդը]

Լինում են դեպքեր, երբ ծրագրավորողը ցանկանում է ստեղծի էջն այնպես, որ այն ունենա երկու պարբերություն <p>, ընդ որում, հնարավոր է,որ դրանք մշտապես փոփոխվեն կամ կրկնվեն: Այդպիսի էջի օրինակ կարող է հանդիսանալ հարցազրույցը, որտեղ հերթագայում են խմբագրողի հարցերը և զրուցակցի պատասխանները: Իհարկե, այսպիսի էջ ունենալու համար պետք է իրարից առանձնացնել հարցերն ու պատասխանները: Դրա համար ոճային աղյուսակի մեջ երկու պարբերություններ պետք է ստեղծել, որի համար կիրառվում է դաս տիպի սելեքթորը: Դրա մի օրինակ ներկայացված է ստորև.

<!DOCTYPE html> <html>

  <head>
     <title>
        Հարցեր և պատասխաններ
     </title>
     <meta charset="utf-8" />
     <style type="text/css">
         p.ask {
            font-style: italic; 
            font-weight: bold; 
            font-family: Arial, sans-serif; 
            font-size: 10px; 
            color: gray; 
            margin-left: 15px; 
         }
         p.answer {
            font-family: 'Times New Roman', serif; 
            font-size: 12px; 
            color: black; 
         }
      </style>
   </head>
   <body>
      <p class="ask">
        լրագրողի հարցը
      </p>
      <p class="answer">
         պատասխան
      </p>
   </body>
</html>

Բերված օրինակում լրագրողի հարցերը տարբերվումեն գրառման ձևով՝ Arial մոխրագույն, կիսաթավ, 10 տառաչափով, ձախ եզրագծից հեռացված է 15 փիքսելի չափով: Պատասխանների համար ընտրված է Times New Roman տառատեսակը, տառաչափը` 12, գույնը`սև: Գրառման այս եղանակը կարելի է կիրառել տարբեր քանակությամբ պարբերությունների և ոճերի բազմազան հնարավորությունների կիրառմամբ էջեր ստեղծելու համար: Կաղապար:CSS:rendered

Սելեքթոր նույնացուցիչ (id)[խմբագրել | խմբագրել կոդը]

Ծրագրավորման ժամանակ որոշ տարրեր կիրառվում են հատուկ նպատակներով, կոչվելով ունիկալ տվյալներ, և այս տարրերը ծրագրի ինչ-որ մասում կարող են կապված լինել JavaScript ծրագրի հետ, որպես արտածվող տվյալներ, հետևաբար այդ տարրը նույնատիպ կամ նման տարրերից պետք է առանձնացնել հատկություններով, որը կատարվում է CSS-ի միջոցով:Այն կարող է այդ տարրը դարձնել ունիկալ` վերագրելով նրան իդենտիֆիկատոր`(id): Օրինակ` 
<!DOCTYPE html>
<html>
  <head>
     <title>
        Шрифт Courier
     </title>
     <meta charset="utf-8" />
     <style type="text/css">
</source>
         #onlyThisOne {
            font-family: Courier;  
         }
      </style>
   </head>
   <body>
      <p id="onlyThisOne">
         Courier
      </p>
   </body>
 </html>

Ներկայացվում է այսպես: Կաղապար:CSS:rendered

Նույնացուցիչները կարող են հատկանշված լինել միևնույն էջում գրված ցանկացած թվով տարրերի համար.

 <!DOCTYPE html>
 <html>
   <head>
      <title>
        Տեսք
      </title>
      <meta charset="utf-8" />
      <style type="text/css">
         input#green {
            color: green; 
         }
         input#red {
            color: red; 
         }
      </style>
   </head>
   <body>
      <form action="handler.php" method="get">
         <p>
            Այս դաշտում ներմուծված տեքստը կունենա կանաչ գույն: 
            <input type="text" id="green" name="info1" size="20" />
         </p>
         <p>
           Այս դաշտում ներմուծված տեքստը կունենա կարմիր գույն: 
            <input type="text" id="red" name="info2" size="20" />
         </p>
         <input type="submit" value="Ուղարկել" />
      </form>
   </body>
 </html>

Ժառանգությունը: Կասկադայնությունը: CSS ոճերի առաջնահերթություններ[խմբագրել | խմբագրել կոդը]

Եթե հիպերտեքստի նշագրման HTML լեզուն հիմնականում սահմանում է Վէբ էջի կառուցվածքը, ապա CSS-ը թույլատրում է ոճ սահմանել էջի յուրաքանչյուր օբյեկտի համար և այն պահպանել առանձին ֆայլում: CSS -ի օգնությամբ կարելի է կայքի որոշ պարամետրեր, օրինակ`տառաչափը, փոփոխել`անփոփոխ թողնելով սերվերում պահվող HTML փաստաթուղթը: Անհրաժեշտության դեպքում կիրառողի բրաուզերը կարող է դիմել CSS-ով ստեղծված ոճերի ֆայլին և էջին անհրաժեշտ տեսք տալ: HTML փաստաթղթերում CSS- ի կիրառումը հիմնված է «ժառանգության» և կասկադի սկզբունքների վրա: HTML-ում գտնվող բոլոր թեգերը համարվում են HTML-ի ժառանգներ, օրինակ` head-ը և body-ին, իսկ metalinktitle թեգերը ժառանգներ են հանդիսանում title-ի համար, h1,h2,.., p, a, li, div, img թեգերը body-ի ժառանգներն են, միևնույն ժամանակ բոլորը միասին HTML-ի ժառանգներն են: Ավելի պարզ ներկայացնելու համար կիրառենք հետևյալ օրինակը. դիցուք ծրագիրը պարունակում է մի շարք li թեգեր, սակայն հարկավոր է գունային փոփոխություն կատարել նրանցից միայն ol թեգի մեջ գրվածների համար: Ծրագրավորողը կիրառում է հետևյալ ոճային կանոնը. CSS կոդում գրում է.

      ol li {
     color:#ffd0373;
     }:

Կարդացվում է հետևյալ կերպ. ընտրել ol-ի մեջ գրված li թեգերը և հաղորդել գույն: Այս կանոնը վերաբերվում է նաև հղումներին: Եթե ծրագրավորողը չի ցանկանում հատկությունը տարածել բոլոր հղումների վրա, ապա առանձնացնում է ցանկածած հղումներ, դիցուք դրանց հայտարարելով որպես ունիկալ արժեք: Css-ում հատկանիշ վերագրում է այդ արժեքներին: Օրինակ.

    .links p a{
    color:#f114cs;
     }:

Կարդացվում է այսպես. գունային փոփոխությունը վերաբերվում է links ունիկալ արժեք ունեցող այն a հղումներին, որոնք գտնվում են p թեգի մեջ: Կա նաև հղումների կեղծ սելեքթոր, որը հիմնականում վերաբերվում է հղումներին: Դրանք այն հատկություններով են պայմանավորված, թե ինչ գույն կստանա հղումը նախքան կլիկ անելը, մկնիկի սլաքը նրա վրա պահելուց հետո, ընտրված, բայց դեռ չգործարկված հղումը և արդեն բացված կամ գործարկված հղումը: Նախնական տեսք ապահովում է գրառման հետևյալ օրինակը`

     a:link{
     color:#F124cs;
    }

Մեկ անգամ կիրառելուց հետո այն իր նախնական գույնը փոխում է: Իսկ եթե կիրառենք hover տարբերակը, այսինքն այն կարգավիճակն է, երբ մկնիկի սլաքը պահում ենք վրան, գույնը փոխում է, ապա այս հատկությունը կվերաբերվի միայն a-ի նշված տարբերակներին: Եթե նշենք active տարբերակը, ապա մկնիկի ցուցիչը վրան պահելիս, գույնը փոխում է, 1 սեղմման ժամանակ, դեռ սեղմակը չթողած` գույնը փոխվում է:

Ոճային աղյուսակի օրինակ[խմբագրել | խմբագրել կոդը]

Հետևյալ օրինակով նշված կոդը կամ կարող է հանդես գալ առանձին ֆայլի տեսքով, .css ընդլայնումով, կամ <style> թեգի միջոցով կարող է գրվել HTML ծրագրի «գլխամասային»` <head> </head> կոդում`

p {
   font-family: arial, helvetica, sans-serif; 
}
h2 {
   font-size: 20px; 
   color: red; 
   background: white; 
}
.note {
   color: red; 
   background-color: yellow; 
   font-weight: bold; 
}
p#paragraph1 {
   padding-left: 10px;
}
a:hover {
   text-decoration: none;
}
#news p {
   color: blue;
}
[type="button"] {
   background-color: green;
}

Այստեղ կիրառված են յոթ կանոններ ph2.notep#paragraph1a:hover#news p և [type="button"] սելեքթորների կիրառմամբ:

  1. Առաջին կանոնը վերաբերվում է HTML-էլեմենտի կոդին` p (պարբերություն) — նշված է ոճ. պարբերությունները ներկայացվում են Arial տառատեսակով, սակայն եթե բրաուզերն այն չի գտնում, ապա կիրառում է Helvetica կամ Sans-serif, հակառակ դեպքում այդ ընտանիքի որևէ տեսակ (լռելյայն)
  2. Երկրորդ կանոնը վերաբերվում է h2 (երկրորդ մակարդակի վերնագիր). Երկրորդ մակարդակի վերնագիրը կարտածվի սպիտակ ֆոնի վրա գրված կարմիր տառերով, «Կեգլ» մեծացված չափսերով
  3. Երրորդ կանոնը վերաբերվում է ցանկացած տարրի, ատրիբուտ class, որին տրված կլինի «note» արժեքը, օրինակ, պարբերության արժեքը` <p class="note">Այս կանոնը կարտածվի կիսաթավ շրիֆտով, դեղին ֆոնի վրա կարմիր գույնով</p>
  4. Չորրորդ կանոնը վերաբերվում է միայն այն էլեմենտներին, որոնք p են, ունեն id ատրիբուտ, որը հավասար է paragraph1: Այդպիսի տարրը կունենա ներքին բացատ 10 պիքսելներով (padding)
  5. Հինգերորդ կանոնը վերաբերվում է hover տարրերին a — հիպերհղմամբԼռելայն, բրաուզերների մեծամասնությունը հղման տեքստի տարրերն արտածում են ընդգծումով, այսինքն a ընդգծվում է։ Գրառման text-decoration: none; տեսակի համաձայն` ընդգծումն անհետանում է, երբ մկնիկի ցուցիչը պահում ենք վրան
  6. Վեցերորդ կանոնը վերաբերվում է այն p էլեմենտներին, որոնք գտնվում են ինչ-որ տարրի մեջ, որի տարրի id ատրիբուտը, հավասար է <code>news</code> (#news p — սա ժառանգների սելեկտորի տիպիկ օրինակ է, տես` վերևից հինգերորդ կետ)
  7. Յոթերորդ կանոնը վերաբերվում է type հավասար button. Օրինակ, այս գրառման համաձայն, տարրը ակտիվացնելիս ֆոնի գույնը կդառնա կանաչ <input type="button"> (սովորական սեղմակ):

CSS-դասավորություն[խմբագրել | խմբագրել կոդը]

Նախքան վեբ-էջերում CSS դիզայնի հայտնվելը փաստաթղթի բովանդակությանը համապատասխան՝ կիրառվում էր HTML ծրագրի հնարավորությունները: Սակայն CSS-ը հեղաշրջում կատարեց ծրագրավորման գործընթացում: HTML-ն օգտագործվում է բովանդակությունը գրելու համար, իսկ CSS-ը՝ պատրաստի բովանդակությունը ֆորմատ անելու համար: Երբ Թիմ Բեռնես Լին ստեղծեց Համաշխարհային ցանցը, կիրառվում էր միայն HTML Ծրագչավորման լեզուն, որը նույնպես լրիվ կատարելագործված չէր. հեղինակը կարող էր խմբագրել միայն պարզագույն թեգեր: Երբ Վեբ-էջերը լայն տարածում ստացան, դիզայներներն սկսեցին ճանապարհներ փնտրել օնլայնփաստաթղթերին layout հաղորդելու համար: Այդ նպատակով զննարկիչ արտադրողները ( Netscape, Microsoft) ստեղծեցին նոր թեգեր, օրինակ թեգը, որը տարբերվում էր HTML ծրագրի օրիգինալ թեգերից նրանով, որ ստեղծում էր layout-ը, այլ ոչ կառուցվածքը: Այսպիսով CSS-ը ատրաքին ոճը սահմանող լեզու է, որն ընդգրկում է տառատեսակներ, գույներ, ֆոնային նկարներ, էջի սահմաններ, բարձրություն, լայնություն և այլն: CSS-ում կիրառվող շատ հատկություններ նման են HTML հատկություններին: Օրինակ՝ HTML կոդը վեբ-էջին կարող է կարմիր ֆոն ապահովել հետևյալ գրառմամբ. <body bgcolor="#FF0000">, իսկ CSS կոդի միջոցով այն կլինի՝

body{
baskground-color:"FF0000";
}
<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Էջի վերնագիր</title>
       <style> 
           #main {
               width: 220px;
               height: 300px;
               border: 1px solid black; 
               display: flex;
               align-items: center;
           }
           #main div {
               flex: 1;
           }
       </style>
   </head>
   <body>

ԿարմիրԿանաչՎարդագույն

   </body>
</html>

CSS-գույներ և ֆոնի գույն[խմբագրել | խմբագրել կոդը]

CSS-ում կիրառվում են հետևյալ պարամետրերը.

  • color
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background

Ծանոթագրություններ[խմբագրել | խմբագրել կոդը]

  1.  What is CSS?
Վիքիպահեստ նախագծում կարող եք այս նյութի վերաբերյալ հավելյալ պատկերազարդում գտնել Կասկադային ոճաթերթ կատեգորիայում։

    Բառարաններ և հանրագիտարաններՄեծ նորվեգական

CSS

Կասկադային ոճաթերթ[խմբագրել | խմբագրել կոդը]

Վիքիպեդիայից՝ ազատ հանրագիտարանից(Վերահղված է Cssից)Jump to navigationJump to search

CSS
Ընդլայնում.css
MIMEtext/css
ՄշակողCSS Working Group?
Հրատարակված էդեկտեմբերի 171996
Ֆորմատի տեսակոճային լեզու
Կայքw3.org/Style/CSS/ և drafts.csswg.org
Cascading Style Sheets Վիքիպահեստում

CSS կամ կասկադային ոճաթերթ (Cascading Style Sheets — կասկադային ոճերի թերթներ), կայքին ձևավորում տալու համար օգտագործվող տեխնոլոգիա ծրագրավորման ֆորմալ լեզվով։ CSS-ը հիմնականում օգտագործվում է HTML և XHTML ֆորմատի պատկանող վեբ-էջերի ձևավորման համար, սակայն կարող է նաև օգտագործվել ցանկացած տեսակի XML ֆորմատի փաստաթղթերի համար, ներառյալ SVG և XUL, ինչպես նաև դիզայնի, մակետի, տարբեր սարքերի և տարբեր էկրանների վրա ներկայացնելու համար։

Երբ HTML 3.2 -ի սպեցիֆիկացիայի մեջ ավելացվեցին -ի նման թեգերը, գույնի ատրիբուտները։ Խոշոր վեբ-կայքերի նախագծումը դարձավ երկար և ծախսատար գործընթաց, քանի որ ամեն էջի վրա պետք է նշվեր շրիֆտը և գունային ինֆորմացիան։ Այս խնդիրը լուծելու համար World Wide Web (W3C) կոնսորցիումը ստեղծեց CSS-ը։ CSS-ը HTML-ի էջից հանեց ոճային ֆորմատավորումը[1]։

Բովանդակություն

Նկարագրություն[խմբագրել | խմբագրել կոդը]

CSS-ը օգտագործվում է վեբ-էջեր նախագծողների կողմից գույներ, տառատեսակներ, գտնվելու վայր և այլ նկարագրություններ տալու համար։ CSS-ի հիմնական նպատակն է առանձնացնել HTML էջի պարունակությունը և նրա նկարագրությունը, դրանով իսկ էջին հաղորդել մատչելիություն, ճկունություն և նրա նկարագրությունը կառավարելու հնարավորություն, ինչպես նաև նվազեցնել հրամանների կրկնությունը և բարդությունը։ Բացի այդ CSS-ը թույլ է տալիս տվյալ դոկումենտը ներկայացնել տարբեր ոճերով։ Էջի արտածման ժամանակ CSS-ը կարող է վերցվել տարբեր աղբյուրներից։

  • Եթե ոճերի աղյուսակը գրված է առանձին ֆայլի մեջ, ապա այն կարող է միանալ վեբ փաստաթղթին` հղումով (անգլ.՝ link), որը փաստաթղթի մեջ տեղադրվում է <head> և </head> զույգ թեգերի մեջ: <link> թեգը պետք է ունենա href ատրիբուտը, որն էլ նշում է ոճերի աղյուսակի հասցեն: Այդ աղյուսակում նշված բոլոր հատկությունները տարածվում են ամբողջ փաստաթղթի վրա: Գրելաձևը հետևյալն է.
<!DOCTYPE html>
<html>
   <head>
      .....
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      .....
   </body>
</html>

Հեղինակային ոճեր`[խմբագրել | խմբագրել կոդը]

  • Inline-ոճ, երբ HTML էջի շարվածքում նշվում է ոճը style ատրիբուտի միջոցով։

<p style="color: blue;">տեքստ</p>

  • Ներկառուցված ոճ՝ CSS-ի բլոկներն են գտնվում HTML էջի շարվածքում։

<style> p { color: blue; } </style>

  • Արտաքին ոճ՝ այսինքն ստեղծվում է առանձին .css ֆայլ, որում հղվում է մեր դոկումենտը։

<link type="text/css" rel="stylesheet" href="mystyle.css"/>

Օգտագործողի ոճեր[խմբագրել | խմբագրել կոդը]

Առանձին CSS ֆայլ է, որը նշվում է օգտագործողի կողմից՝ զննարկիչի կարգավորումներում։

Զննարկիչի ոճ[խմբագրել | խմբագրել կոդը]

Այն ոճն է, որը տրվում է օգտագործվող զննարկիչի կողմից լռելյան պայմանով։

Գրելաձև[խմբագրել | խմբագրել կոդը]

Սխեմատիկորեն ոճը նկարագրվում է հետևյալ կերպ՝Նշիչ{ Հատկանիշ։ արժեք; Հատկանիշ։ արժեք; Հատկանիշ։ արժեք; Հատկանիշ։ արժեք; }

Ստանդարտ CSS-ը որոշում է առաջնայությունները, հետևյալ հերթականությամբ՝

  1. Հատկանիշը նշված է @important-ի օգնությամբ,
<!DOCTYPE html>
<html>
   <head>
      .....
      <style media="all">
         @import url(style.css);
      </style>
   </head>
</html>
  1. Ոճը նշված է հենց տեգում (inline)
  2. Նույնացուցիչների քանակը(#id) նշիչում
  3. Կարգերի (.class) և նախա կարգերի(։pseudoclass) քանակը նշիչում
  4. Նշիչում տեգերի անունների քանակը։

Բացի այդ նշանակություն ունի նաև նկարագրման հատկանիշների հարաբերական հերթականությունը՝ ավելի ուշ գրված հատկանիշն առաջնայնություն ունի։

Ոճերի աղյուսակների օրինակ.p { font-family: "Garamond", serif; } h2.class { font-size: 110 %; color: red; background: orange; } #news p { color: orange; } .class p { color: orange; } [title]{ color:orange; } p:hover{ color:orange; }

Այստեղ բերված է 3 կանոն p, h2 և #news p նշիչների համար։ Առաջին երկու կանոններում HTML-ի պարբերության և վերնագրի համար նշանակվում են ոճեր, ըստ որոնց պարբերությունը կարտածվի Garamond տառառեսակով, կամ եթե այդ տառատեսակը հասանելի չէ, որևէ այլ տառատեսակով (serif) տիպի։ Երկրորդ դասի վերնագիրը կարտածվի կարմիր տառերով, սպիտակ ֆոնով և մեծացված տառաչափով։

Երրորդ կանոնը վերաբերվում է այն պարբերություններին, որոնք գտնվում են #news id ունեցող էլեմենտների մեջ։

Դասեր և նույնացուցիչներ[խմբագրել | խմբագրել կոդը]

Դասերը և նույնացուցիչները կարող են վերաբերվել միայն նշված տարրերին (թեգերին), որոնք HTML կոդում ունեն ատրիբուտներ` class կամ id: Օրինակ

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>
         Селекторы классов и идентификаторов
      </title>
      <style>
         p.Big {
            font-family: arial, helvetica, sans-serif;
            color: maroon; 
         }
         div#First {
            background-color: silver; 
         }
      </style>
   </head>
   <body>
       .....
       <div id="First">
          .....
       </div>
       <p class="Big">
          .....
       </p>
   </body>
</html>

Հիմնական տարբերությունն այն է, որ նույնացուցիչը (անգլ.՝ id) նշանակվում կամ սահմանվում է մեկ էլեմենտի համար, իսկ դասը (անգլ.՝ class)-ը սովորաբար հատկանշում է մի քանի էլեմենտներ: Այնուամենայնիվ, ժամանակակից բրաուզերները կարող են տարբերակել մի քանի էլեմենտներ միևնույն իդենտիֆիկատորով: Տարբերությունն այն է նաև, որ կարող են լինել մի քանի դասեր,որոնք ծրագրի կոդում առանձնացվում են բացատանիշներով, իսկ նույնացուցիչները այդպես ներկայացնել հնարավոր չէ: Կարևոր է նշել հետևյալ տարբերությունը` նույնացուցիչները լայնորեն կիրառվում են JavaScript ծրագրի կոդում, որպեսզի գտնեն փաստաթղթի ունիկալ տարրերը: Ի տարբերություն թեգերի և նրանց ատրիբուտների, դասերի և նույնացուցիչների անունները կախված են կոդում տառերի գրառման ձևից: Դասերի և նույնացուցիչների հատկությունները սահմանվում են սելեքթորների օգնությամբ: Կարող է դասի հատկությունը տրվել ամբողջությամբ (այդ դեպքում սելեքթորը սկսվում է «.» նշանով), կամ նույնացուցիչն ինքն իր հատկությամբ (այս դեպքում սելեքթորը սկսվում է «#» նշանով), ինչպես նաև այդ դասի ցանկացած էլեմենտի կամ նույնացուցիչի հատկությունով:

CSS Սելեքթորներ[խմբագրել | խմբագրել կոդը]

Այստեղ պատկերված են CSS սելեքթորներն իրենց օրինակներով, որոնց միջոցով ընտրվում են HTML տարրերը, CSS ոճային աղյուսակում արտաքին տեսքի հետ կապված կանոններ գրելու նպատակով:

PatternMatchesFirst defined
in CSS level
Ean element of type E1
E:linkan E element is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)1
E:activean E element during certain user actions1
E::first-linethe first formatted line of an E element1
E::first-letterthe first formatted letter of an E element1
.call elements with class=»c»1
#myidthe element with id=»myid»1
E.warningan E element whose class is «warning» (the document language specifies how class is determined)1
E#myidan E element with ID equal to «myid»1
E Fan F element descendant of an E element1
*any element2
E[foo]an E element with a «foo» attribute2
E[foo=»bar»]an E element whose «foo» attribute value is exactly equal to «bar»2
E[foo~=»bar»]an E element whose «foo» attribute value is a list of whitespace-separated values, one of which is exactly equal to «bar»2
E[foo|=»en»]an E element whose «foo» attribute has a hyphen-separated list of values beginning (from the left) with «en»2
E:first-childan E element, first child of its parent2
E:lang(fr)an element of type E in language «fr» (the document language specifies how language is determined)2
E::beforegenerated content before an E element’s content2
E::aftergenerated content after an E element’s content2
E > Fan F element child of an E element2
E + Fan F element immediately preceded by an E element2
E[foo^=»bar»]an E element whose «foo» attribute value begins exactly with the string «bar»3
E[foo$=»bar»]an E element whose «foo» attribute value ends exactly with the string «bar»3
E[foo*=»bar»]an E element whose «foo» attribute value contains the substring «bar»3
E:rootan E element, root of the document3
E:nth-child(n)an E element, the n-th child of its parent3
E:nth-last-child(n)an E element, the n-th child of its parent, counting from the last one3
E:nth-of-type(n)an E element, the n-th sibling of its type3
E:nth-last-of-type(n)an E element, the n-th sibling of its type, counting from the last one3
E:last-childan E element, last child of its parent3
E:first-of-typean E element, first sibling of its type3
E:last-of-typean E element, last sibling of its type3
E:only-childan E element, only child of its parent3
E:only-of-typean E element, only sibling of its type3
E:emptyan E element that has no children (including text nodes)3
E:targetan E element being the target of the referring URI3
E:enableda user interface element E that is enabled3
E:disableda user interface element E that is disabled3
E:checkeda user interface element E that is checked (for instance a radio-button or checkbox)3
E:not(s)an E element that does not match simple selector s3
E ~ Fan F element preceded by an E element3

Սելեքթոր դաս(class)[խմբագրել | խմբագրել կոդը]

Լինում են դեպքեր, երբ ծրագրավորողը ցանկանում է ստեղծի էջն այնպես, որ այն ունենա երկու պարբերություն <p>, ընդ որում, հնարավոր է,որ դրանք մշտապես փոփոխվեն կամ կրկնվեն: Այդպիսի էջի օրինակ կարող է հանդիսանալ հարցազրույցը, որտեղ հերթագայում են խմբագրողի հարցերը և զրուցակցի պատասխանները: Իհարկե, այսպիսի էջ ունենալու համար պետք է իրարից առանձնացնել հարցերն ու պատասխանները: Դրա համար ոճային աղյուսակի մեջ երկու պարբերություններ պետք է ստեղծել, որի համար կիրառվում է դաս տիպի սելեքթորը: Դրա մի օրինակ ներկայացված է ստորև.

<!DOCTYPE html> <html>

  <head>
     <title>
        Հարցեր և պատասխաններ
     </title>
     <meta charset="utf-8" />
     <style type="text/css">
         p.ask {
            font-style: italic; 
            font-weight: bold; 
            font-family: Arial, sans-serif; 
            font-size: 10px; 
            color: gray; 
            margin-left: 15px; 
         }
         p.answer {
            font-family: 'Times New Roman', serif; 
            font-size: 12px; 
            color: black; 
         }
      </style>
   </head>
   <body>
      <p class="ask">
        լրագրողի հարցը
      </p>
      <p class="answer">
         պատասխան
      </p>
   </body>
</html>

Բերված օրինակում լրագրողի հարցերը տարբերվումեն գրառման ձևով՝ Arial մոխրագույն, կիսաթավ, 10 տառաչափով, ձախ եզրագծից հեռացված է 15 փիքսելի չափով: Պատասխանների համար ընտրված է Times New Roman տառատեսակը, տառաչափը` 12, գույնը`սև: Գրառման այս եղանակը կարելի է կիրառել տարբեր քանակությամբ պարբերությունների և ոճերի բազմազան հնարավորությունների կիրառմամբ էջեր ստեղծելու համար: Կաղապար:CSS:rendered

Սելեքթոր նույնացուցիչ (id)[խմբագրել | խմբագրել կոդը]

Ծրագրավորման ժամանակ որոշ տարրեր կիրառվում են հատուկ նպատակներով, կոչվելով ունիկալ տվյալներ, և այս տարրերը ծրագրի ինչ-որ մասում կարող են կապված լինել JavaScript ծրագրի հետ, որպես արտածվող տվյալներ, հետևաբար այդ տարրը նույնատիպ կամ նման տարրերից պետք է առանձնացնել հատկություններով, որը կատարվում է CSS-ի միջոցով:Այն կարող է այդ տարրը դարձնել ունիկալ` վերագրելով նրան իդենտիֆիկատոր`(id): Օրինակ` 
<!DOCTYPE html>
<html>
  <head>
     <title>
        Шрифт Courier
     </title>
     <meta charset="utf-8" />
     <style type="text/css">
</source>
         #onlyThisOne {
            font-family: Courier;  
         }
      </style>
   </head>
   <body>
      <p id="onlyThisOne">
         Courier
      </p>
   </body>
 </html>

Ներկայացվում է այսպես: Կաղապար:CSS:rendered

Նույնացուցիչները կարող են հատկանշված լինել միևնույն էջում գրված ցանկացած թվով տարրերի համար.

 <!DOCTYPE html>
 <html>
   <head>
      <title>
        Տեսք
      </title>
      <meta charset="utf-8" />
      <style type="text/css">
         input#green {
            color: green; 
         }
         input#red {
            color: red; 
         }
      </style>
   </head>
   <body>
      <form action="handler.php" method="get">
         <p>
            Այս դաշտում ներմուծված տեքստը կունենա կանաչ գույն: 
            <input type="text" id="green" name="info1" size="20" />
         </p>
         <p>
           Այս դաշտում ներմուծված տեքստը կունենա կարմիր գույն: 
            <input type="text" id="red" name="info2" size="20" />
         </p>
         <input type="submit" value="Ուղարկել" />
      </form>
   </body>
 </html>

Ժառանգությունը: Կասկադայնությունը: CSS ոճերի առաջնահերթություններ[խմբագրել | խմբագրել կոդը]

Եթե հիպերտեքստի նշագրման HTML լեզուն հիմնականում սահմանում է Վէբ էջի կառուցվածքը, ապա CSS-ը թույլատրում է ոճ սահմանել էջի յուրաքանչյուր օբյեկտի համար և այն պահպանել առանձին ֆայլում: CSS -ի օգնությամբ կարելի է կայքի որոշ պարամետրեր, օրինակ`տառաչափը, փոփոխել`անփոփոխ թողնելով սերվերում պահվող HTML փաստաթուղթը: Անհրաժեշտության դեպքում կիրառողի բրաուզերը կարող է դիմել CSS-ով ստեղծված ոճերի ֆայլին և էջին անհրաժեշտ տեսք տալ: HTML փաստաթղթերում CSS- ի կիրառումը հիմնված է «ժառանգության» և կասկադի սկզբունքների վրա: HTML-ում գտնվող բոլոր թեգերը համարվում են HTML-ի ժառանգներ, օրինակ` head-ը և body-ին, իսկ metalinktitle թեգերը ժառանգներ են հանդիսանում title-ի համար, h1,h2,.., p, a, li, div, img թեգերը body-ի ժառանգներն են, միևնույն ժամանակ բոլորը միասին HTML-ի ժառանգներն են: Ավելի պարզ ներկայացնելու համար կիրառենք հետևյալ օրինակը. դիցուք ծրագիրը պարունակում է մի շարք li թեգեր, սակայն հարկավոր է գունային փոփոխություն կատարել նրանցից միայն ol թեգի մեջ գրվածների համար: Ծրագրավորողը կիրառում է հետևյալ ոճային կանոնը. CSS կոդում գրում է.

      ol li {
     color:#ffd0373;
     }:

Կարդացվում է հետևյալ կերպ. ընտրել ol-ի մեջ գրված li թեգերը և հաղորդել գույն: Այս կանոնը վերաբերվում է նաև հղումներին: Եթե ծրագրավորողը չի ցանկանում հատկությունը տարածել բոլոր հղումների վրա, ապա առանձնացնում է ցանկածած հղումներ, դիցուք դրանց հայտարարելով որպես ունիկալ արժեք: Css-ում հատկանիշ վերագրում է այդ արժեքներին: Օրինակ.

    .links p a{
    color:#f114cs;
     }:

Կարդացվում է այսպես. գունային փոփոխությունը վերաբերվում է links ունիկալ արժեք ունեցող այն a հղումներին, որոնք գտնվում են p թեգի մեջ: Կա նաև հղումների կեղծ սելեքթոր, որը հիմնականում վերաբերվում է հղումներին: Դրանք այն հատկություններով են պայմանավորված, թե ինչ գույն կստանա հղումը նախքան կլիկ անելը, մկնիկի սլաքը նրա վրա պահելուց հետո, ընտրված, բայց դեռ չգործարկված հղումը և արդեն բացված կամ գործարկված հղումը: Նախնական տեսք ապահովում է գրառման հետևյալ օրինակը`

     a:link{
     color:#F124cs;
    }

Մեկ անգամ կիրառելուց հետո այն իր նախնական գույնը փոխում է: Իսկ եթե կիրառենք hover տարբերակը, այսինքն այն կարգավիճակն է, երբ մկնիկի սլաքը պահում ենք վրան, գույնը փոխում է, ապա այս հատկությունը կվերաբերվի միայն a-ի նշված տարբերակներին: Եթե նշենք active տարբերակը, ապա մկնիկի ցուցիչը վրան պահելիս, գույնը փոխում է, 1 սեղմման ժամանակ, դեռ սեղմակը չթողած` գույնը փոխվում է:

Ոճային աղյուսակի օրինակ[խմբագրել | խմբագրել կոդը]

Հետևյալ օրինակով նշված կոդը կամ կարող է հանդես գալ առանձին ֆայլի տեսքով, .css ընդլայնումով, կամ <style> թեգի միջոցով կարող է գրվել HTML ծրագրի «գլխամասային»` <head> </head> կոդում`

p {
   font-family: arial, helvetica, sans-serif; 
}
h2 {
   font-size: 20px; 
   color: red; 
   background: white; 
}
.note {
   color: red; 
   background-color: yellow; 
   font-weight: bold; 
}
p#paragraph1 {
   padding-left: 10px;
}
a:hover {
   text-decoration: none;
}
#news p {
   color: blue;
}
[type="button"] {
   background-color: green;
}

Այստեղ կիրառված են յոթ կանոններ ph2.notep#paragraph1a:hover#news p և [type="button"] սելեքթորների կիրառմամբ:

  1. Առաջին կանոնը վերաբերվում է HTML-էլեմենտի կոդին` p (պարբերություն) — նշված է ոճ. պարբերությունները ներկայացվում են Arial տառատեսակով, սակայն եթե բրաուզերն այն չի գտնում, ապա կիրառում է Helvetica կամ Sans-serif, հակառակ դեպքում այդ ընտանիքի որևէ տեսակ (լռելյայն)
  2. Երկրորդ կանոնը վերաբերվում է h2 (երկրորդ մակարդակի վերնագիր). Երկրորդ մակարդակի վերնագիրը կարտածվի սպիտակ ֆոնի վրա գրված կարմիր տառերով, «Կեգլ» մեծացված չափսերով
  3. Երրորդ կանոնը վերաբերվում է ցանկացած տարրի, ատրիբուտ class, որին տրված կլինի «note» արժեքը, օրինակ, պարբերության արժեքը` <p class="note">Այս կանոնը կարտածվի կիսաթավ շրիֆտով, դեղին ֆոնի վրա կարմիր գույնով</p>
  4. Չորրորդ կանոնը վերաբերվում է միայն այն էլեմենտներին, որոնք p են, ունեն id ատրիբուտ, որը հավասար է paragraph1: Այդպիսի տարրը կունենա ներքին բացատ 10 պիքսելներով (padding)
  5. Հինգերորդ կանոնը վերաբերվում է hover տարրերին a — հիպերհղմամբԼռելայն, բրաուզերների մեծամասնությունը հղման տեքստի տարրերն արտածում են ընդգծումով, այսինքն a ընդգծվում է։ Գրառման text-decoration: none; տեսակի համաձայն` ընդգծումն անհետանում է, երբ մկնիկի ցուցիչը պահում ենք վրան
  6. Վեցերորդ կանոնը վերաբերվում է այն p էլեմենտներին, որոնք գտնվում են ինչ-որ տարրի մեջ, որի տարրի id ատրիբուտը, հավասար է <code>news</code> (#news p — սա ժառանգների սելեկտորի տիպիկ օրինակ է, տես` վերևից հինգերորդ կետ)
  7. Յոթերորդ կանոնը վերաբերվում է type հավասար button. Օրինակ, այս գրառման համաձայն, տարրը ակտիվացնելիս ֆոնի գույնը կդառնա կանաչ <input type="button"> (սովորական սեղմակ):

CSS-դասավորություն[խմբագրել | խմբագրել կոդը]

Նախքան վեբ-էջերում CSS դիզայնի հայտնվելը փաստաթղթի բովանդակությանը համապատասխան՝ կիրառվում էր HTML ծրագրի հնարավորությունները: Սակայն CSS-ը հեղաշրջում կատարեց ծրագրավորման գործընթացում: HTML-ն օգտագործվում է բովանդակությունը գրելու համար, իսկ CSS-ը՝ պատրաստի բովանդակությունը ֆորմատ անելու համար: Երբ Թիմ Բեռնես Լին ստեղծեց Համաշխարհային ցանցը, կիրառվում էր միայն HTML Ծրագչավորման լեզուն, որը նույնպես լրիվ կատարելագործված չէր. հեղինակը կարող էր խմբագրել միայն պարզագույն թեգեր: Երբ Վեբ-էջերը լայն տարածում ստացան, դիզայներներն սկսեցին ճանապարհներ փնտրել օնլայնփաստաթղթերին layout հաղորդելու համար: Այդ նպատակով զննարկիչ արտադրողները ( Netscape, Microsoft) ստեղծեցին նոր թեգեր, օրինակ թեգը, որը տարբերվում էր HTML ծրագրի օրիգինալ թեգերից նրանով, որ ստեղծում էր layout-ը, այլ ոչ կառուցվածքը: Այսպիսով CSS-ը ատրաքին ոճը սահմանող լեզու է, որն ընդգրկում է տառատեսակներ, գույներ, ֆոնային նկարներ, էջի սահմաններ, բարձրություն, լայնություն և այլն: CSS-ում կիրառվող շատ հատկություններ նման են HTML հատկություններին: Օրինակ՝ HTML կոդը վեբ-էջին կարող է կարմիր ֆոն ապահովել հետևյալ գրառմամբ. <body bgcolor="#FF0000">, իսկ CSS կոդի միջոցով այն կլինի՝

body{
baskground-color:"FF0000";
}
<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Էջի վերնագիր</title>
       <style> 
           #main {
               width: 220px;
               height: 300px;
               border: 1px solid black; 
               display: flex;
               align-items: center;
           }
           #main div {
               flex: 1;
           }
       </style>
   </head>
   <body>

ԿարմիրԿանաչՎարդագույն

   </body>
</html>

CSS-գույներ և ֆոնի գույն[խմբագրել | խմբագրել կոդը]

CSS-ում կիրառվում են հետևյալ պարամետրերը.

  • color
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background

Ծանոթագրություններ[խմբագրել | խմբագրել կոդը]

  1.  What is CSS?
Վիքիպահեստ նախագծում կարող եք այս նյութի վերաբերյալ հավելյալ պատկերազարդում գտնել Կասկադային ոճաթերթ կատեգորիայում։
    Բառարաններ և հանրագիտարաններՄեծ նորվեգականՉափորոշչային վերահսկողությունBNEXX550325 · BNF13739222f · GND4467617-7 · LCCN: sh2001004461 · Microsoft: 93213560

Կատեգորիաներ

Նավարկման ցանկ

Որոնել

Մասնակցել

Գործիքներ

Այլ նախագծերում

Տպել/արտահանել

Այլ լեզուներով

Փոխել հղումները

HTML

HTML[խմբագրել | խմբագրել կոդը]

Վիքիպեդիայից՝ ազատ հանրագիտարանից(Վերահղված է Htmlից)Jump to navigationJump to search

HTML
Ընդլայնում.html և .htm
MIMEtext/html[1]
ՄշակողՀամացանցի կոնսորցիումInternet Engineering Task Force? և Web Hypertext Application Technology Working Group?
Հրատարակված է1992
Ֆորմատի տեսակWeb APIREC?, ստեղծագործական աշխատանքֆայլի ֆորմատ և նշագրման լեզու
ՀիմքSGML[2]
Բաց ֆորմատայո
Ստանդարտ(ներ)W3C HTML5
HTML Living Standard
W3C HTML 5.1
ISO15445
Կայքw3.org/html/html.spec.whatwg.org/multipage/[3] և w3c.github.io/html/[4]
HTML Վիքիպահեստում

HTML’ (անգլ.՝ HyperText Markup Language, գերտեքստի նշագրման լեզու), նշագրման լեզու, որն օգտագործվում է վեբ-էջերի մեծամասնության նշագրման համար։ HTML լեզուն վերամշակվում է դիտարկչի կողմից և ցուցադրվում է մարդու կողմից հեշտ ընթեռնելի փաստաթղթի տեսքով։

Բովանդակություն

Նկարագրություն[խմբագրել | խմբագրել կոդը]

HTML-ի օգնությամբ հեշտությամբ կարելի է ստեղծել համեմատաբար պարզ, սակայն գեղեցիկ ձևավորված փաստաթուղթ։ Ի հավելումն փաստաթղթի կառուցվածքի պարզեցմանը՝ HTML-ում աջակցվում էր հիպերտեքստը։ Մուլտիմեդիայի հնարավորությունները ավելացվեցին քիչ ավելի ուշ։ Ի սկզբանե HTML լեզուն ստեղծվել է որպես փաստաթղթերի կառուցման և ձևավորման միջոց՝ անկախ օգտագործվող արտածման միջոցից (էկրան, տպիչ և այլն) ցուցադրելու միջոց։ Նախնական HTML ձևաչափով տեքստը պետք է առանց ոճային և կառուծվածքային ձևափոխման արտածվեր սարքավորման վրա՝ տարբեր տեխնիկական համալրմամբ (ժամանակակից համակարգչի գունավոր էկրանը, օրգանայզերի մոնոխրոմային էկրան, բջջային հեռախոսների կամ տեքստերի ձայնային վերարտադրման ծրագրերի կամ սարքավորումների սահմանափակ չափերով էկրան)։ Սակայն HTML-ի ժամանակակից կիրառումը հեռու է սկզբնական նշանակությունից։

Դիտարկիչներ[խմբագրել | խմբագրել կոդը]

Տեքստային փաստաթղթերը, որոնք պարունակում են HTML կոդ (այդ փաստաթղթերը հիմնականում ունեն .html կամ .htm ընդլայնում), մշակվում են հատուկ ծրագրերի միջոցով, որոնք ցուցադրում են փաստաթուղթը իր ձևավորման համաձայն։ Այդ ծրագրերը, որոնք անվանում են դիտարկիչներ (անգլ.՝ browser), սովորաբար իրենցից ներկայացնում են հարմար միջավայր վեբ էջերի հայցման, դրանց դիտման և անհրաժեշտության դեպքում նաև դեպի սերվեր տվյալների փոխանցման համար։ Այժմ աշխարհում առավել գործածվող դիտարկիչներն են՝ Մոզիլա ՖայրֆոքսԳուգլ ՔրոմԻնտերնետ ԷքսպլորերՕպերա և Սաֆարի։

1990-ական թվականի կեսերին առաջ եկավ հետևյալ երևույթը. դիտարկիչների հիմնական արտադրող ընկերությունները՝ Նեթսքեյփ (անգլ.՝ Netscape) և Մայքրոսոֆթ ((անգլ.)Microsoft), սկսեցին ներառել HTML-ը տարրերի սեպական հավաքածուներով։ Տարբեր դիտարկիչների անհամատեղելիության պատճառով ստեղծվեց խառնաշփոթ, առավելապես բարդություններ էին առաջանում նույն փաստաթուղթը տարբեր դիտարկիչներում նույն տեսքով ստանալու հարցում։ Վեբ մասնագետները ստիպված էին միևնույն էջը մի քանի տարբերակով ստեղծել։ 2000-ականների սկզբին, մի քանի տարով այդ խնդիրը փոքր-ինչ կորցրեց իր հրատապությունը՝ կապված Ինտերնետ Էքսպլորերի տարածման և զարգացնամ հետ։[փա՞ստ]

Տարբերակներ[խմբագրել | խմբագրել կոդը]

HTML 1.0-ի պաշտոնական սետիֆիկացիան չկա։ 1995 թվականից կային բազմաթիվ HTML-ի ոչ պաշտոնական ստանդարտներ։

HTML փաստաթղթի կառուցվածքը[խմբագրել | խմբագրել կոդը]

HTML լեզվով գրված ցանկացած փաստաթուղթ իրենից ներկայացնում է իրար մեջ ներդրված տարրերի հավաքածու (անգլ.՝ HTML element), ընդ որում բոլոր տարրերի սկիզբը և վերջը նշվում է հատուկ նշիչներով՝ թեգերով (անգլ.՝ tag)։ Տարրերը կարող են լինել դատարկ, այսինքն՝ չպարունակեն ոչ մի տեքստ կամ տվյալ։ Օրինակ <br /> թեգը ջարդում է տողը՝ հաջորդող տեքստը սկսելով նոր տողից (բայց ոչ նոր պարբերությունից)։ Այս դեպքում սովորաբար չի նշվում փակող թեգ։ Բացի այդ, տարրերը կարող են պարունակել հատկանիշներ (անգլ.՝ HTML ատրիբուտներ), որոնք որոշում են նրանց որոշակի հատկանիշներ, օրինակ տառաչափը font տարրի համար։ Ատրիբուտները նշվում են բացող թեգի մեջ։ HTML փաստաթուղթը սկսվում է <html> թեգով և ավարտվում է </html> թեգով: Փաստաթուղթը բաղկացած է երկու հիմնական մասերից` ծանուցման բաժին և փաստաթղթի մարմին: Ծանուցման բաժինը ներառվում է <head></head> թեգերի մեջ: Այս բաժնում ներառվում են նաև տեխնիկական այլ բնութագրեր: Էջի վերնագիրը տրվում է <title> ..</title> մեկնարկի և ավարտի թեգերի միջև: Html-փաստաթղթի մարմինը ներառվում է<body> և </body> զույգ թեգերի մեջ: Գրանցումները, որտեղ նշվել են տարրի անվանումը կամ ատրիբուտները, կարևոր չեն (բացի XHTML -ից): Տարրերը կարող են լինել ներդրված: Օրինակ, ինչպես հետևյալ կոդը.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>HTML Document</title>
   </head>
   <body>
      <p>
         <b>
           Այս տեքստը թավ է, 
            <i>Իսկ սա` նաև ավելի շեղ</i>
         </b>
      </p>
   </body>
</html>

Կտա հետևյալ արդյունքը`

Այս տեքստը թավ է, Իսկ սա` նաև ավելի շեղ:

Ստորև բերվում են հատվածներ HTML փաստաթղթից.

<strong>Բացող և փակող պիտակների միջև ընկած տեքստ։ Այն թավատառ է։</strong>
<a href=”http://www.example.com”>Այս պիտակը պարունակում է href հատկանիշը։ Սա հղում է, որը տանում է դեպի http://www.example.com էջ</a>

Անհրաժեշտ է տարբերել <b> և <strong><i> և <em> թեգերը. թեև երկուսն էլ նույն տեսքն ունեն, սակայն <strong> և <em> թեգերը որոնողական համակարգերի համար համարվում են առավել կարևոր։

Իսկ այստեղ բերվում է դատարկ թեգի օրինակ.

<b>
   Այս տեքստը կլինի թավ, 
   <i>իսկ սա՝ նաև շեղ</i>
</b>

Դիտարկչի էկրանին կարտածվի հետևյալ կերպ՝ Այս տեքստը կլինի հաստ, իսկ սա՝ նաև շեղ։

Բացի էլեմենտներից, HTML փաստաթղթում օգտագործվում են նաև հատուկ նշաններ, որոնք նշվում են &անուն ձևով, օրինակ. &copy-ն կարտածի հեղինակային իրավունքի նշանը՝ ©։

Յուրաքանչյուր HTML փաստաթուղթ, որ համապատասխանում է HTML ստանդարտի որևէ տարբերակի, պետք է սկսվի <!DOCTYPE…>-ով, որն հայտարարում է HTML-ի տարբերակը և ունի այս տեսքը՝

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Եթե այս տողը նշված չէ, ապա դիտարկչում փաստաթղթի ճիշտ արտածման հասնել դժվար կլինի։ Այնուհետև պետք է գրվեն <html><head><body> թեգերը։

HTML փասթաթղթերը կարող են ձևափոխվել CSS համակարգչային լեզվի միջոցով, որի համար պետք է փաստաթղթի մեջ ընդգրկել <style></style> կոդը, որոնց միջև գրվում է հատուկ կոդագրություն։ Օրինակ՝

<style>
body{
   background-color: #D91C3F;
   font-family: Segoe UI;
}
</style>

Այս կոդը էջին ստիպում է, որ նրա ֆոնի գույնը փոխվի և դառնա կարմրագույն։ #(և այլն) գունային կոդի ֆորմատը կոչվում է HEX։ Նաև խմբագրողը կարող է պարզապես օգտագործել գույնի անունը, բայց առանց երանգների։ Կամ, կարելի է օգտագործել RGB կոդային համակարգը։

Նաև, HTML կոդային համակարգը արհամարհում է ազատ տառերը։

HTML փաստաթղթի մեջ մի նոր գիծ ստանալու համար պետք է գրել հետևյալ կոդը՝

<br>

, իսկ մի գիծ ավելացնելու համար՝

<hr>

Մասնիկներ[խմբագրել | խմբագրել կոդը]

HTML փաստաթղթեր ստեղծելու համար օգտագործվում են HTML մասնիկներ, որոնք իրենցից ներկայացնում են HTML-ի թեգեր պարփակված ուղղանկյուն փակագծերի մեջ։ Օրինակ՝ <p>։

Դեպքերի մեծ մասում մասնիկները հանդիպում են զույգ թեգերով, որոնք են «բացման թեգը» <p> և «փակման թեգը» </p>, որի մեջ դրվում է «/» նշանը։ Ներկայացվող ինֆորմացիան գրվում է այդ երկու թեգերի արանքում։

Որոշ դեպքերում բացման թեգերը իրենց մեջ պարունակում են լրացուցիչ ատրիբուտներ, որոնք օգտագործվում են հավելյալ ինֆորմացիա ներկայացնելու համար։ Հիմնական դեպքերում դրանք օգտագործվում են HTML փաստաթղթին այլ ֆորմատի նյութեր կցելու համար նախատեսված թեգերի հետ կամ մասնիկի մեջ ներկայացված ինֆորմացիայի կոորդինատները նշելու համար։ Օրինակ՝ <img>։

Առանձին մասնիկներ, ինչպիսին է տողընդհատը <br> , իրենց մեջ չեն պարունակում տեքստ կամ այլ թեգեր և պարունակում են միայն մեկ դատարկ բացման թեգ՝ առանց փակման թեգի։

Մասնիկների մի մասը կամավոր օգտագործման են և նրանց օգտագործումը փաստաթղթի մեջ ոչինչ չի փոխում։ Այդպիսին է օրինակ պարբերության մասնիկը <p>։ Այդ մասնիկները օգտագործվում են հին բրաուզերնորի համար ստեղծվող կայքերի մեջ։

Այնուամենայնիվ, HTML մասնիկի հիմնական տեսքն է <թեգ ատրիբուտ1=»արժեք1″ ատրիբուտ2=»արժեք2″>պարունակություն</թեգ>-ը։ Իսկ դատարկ մասնիկների դեպքում, ինչպիսին են <br> և <img> մասնիկները <թեգ ատրիբուտ1=»արժեք1″ ատրիբուտ2=»արժեք2″>-ը։ Դատարկ մասնիկների մեջ փակման թեգի օգտագործումը ո՛չ անհրաժեշտ է, ո՛չ էլ թույլատրելի։ Իսկ, եթե ատրիբուտին արժեք տրված չէ, օգտագործվում են հիմնական արժեքները։

Պատմություն[խմբագրել | խմբագրել կոդը]

HTML-ն ստեղծվել է բրիտանացի գիտնական Թիմ Բերներս-Լիի կողմից 19911992 թթ.։ Այն ծագել է SGML նշման լեզվից։

Գրականություն[խմբագրել | խմբագրել կոդը]

HTML-ի ձեռնարկներ[խմբագրել | խմբագրել կոդը]

Արտաքին հղումներ[խմբագրել | խմբագրել կոդը]

Ծանոթագրություններ[խմբագրել | խմբագրել կոդը]

  1.  D. Connolly, L. Masinter The ‘text/html’ Media Type — Internet Engineering Task Force, 2000. — 8 p. — doi:10.17487/RFC2854
  2.  https://www.w3.org/People/Raggett/book4/ch02.html
  3.  https://api.github.com/repos/whatwg/html
  4.  https://api.github.com/repos/w3c/html
  5.  HTML 3.2 Reference Specification
  6.  HTML 4.0 Specification
  7.  Սերտիֆիկացիա HTML 4.01(անգլ.)
  8.  ISO/IEC 15445:2000(E) ISO-HTML
  9.  HTML5 (including next generation additions still in development)
  10.  «Plan 2014». World Wide Web Consortium
[ցույց տալ]դքխՓաստաթղթերի նշագրման լեզուներ
Վիքիպահեստ նախագծում կարող եք այս նյութի վերաբերյալ հավելյալ պատկերազարդում գտնել HTML կատեգորիայում։
    Բառարաններ և հանրագիտարաններԲրիտանիկա (օնլայն)Չափորոշչային վերահսկողությունBNEXX539726 · BNF12493600c · GND4373477-7 · LCCN: sh95002791 · Microsoft: 138708601
[ցույց տալ]դքխISO ստանդարտներ

Կատեգորիաներ

Կոկա-կոլայի պատմությունը

Որն Է ամենաճանաճչված օբյեկտը աշխարհում ? ֆուտբոլն է ?կամ Բիգ-Մակը ? Ոչ, պատասխանն է կոկա-կոլայի շիշը:

Հայտնի կոկա-կոլայի շիշը 100 տարեկան է:

Կոկա-կոլայի գովազդը Լաս Վեգասում:

Ֆուտբոլն ու Բիգ Մակը անշուշտ շատ մարդկանց կյանքի կեսն են; բայց կոկա-կոլան հիմա մշտապես աշխարհի մշակույթի մասն է: Ժողովուրդը գիտի և ըմպում է կոկա-կոլան ամբողջ աշխարհում: Դա է ասել կոկա- կոլայի շիշը, առավել ճանաչված օբեկտը աշխարհում: Ժողովրդից հարյուրավորները միլիոնավորներից կարող են ճանաչել իր ձևից նույնիսկ եթե չեն կարող տեսնել այն: Եվ հայտնի կոկա-կոլայի տարբերանշանը առավել հայտնի տարբերանշան է աշխարհում:

Report by english lessons

I like english lessons because I am clever. I had study english lessons since first class in school. I like english stories of my college book because they show the life of people whose make my life better, they

show me another life, smart life, strong humans whose control their life. I have met different people from this book, black and white, asians and another… interesting and funny stories.

THE STORY OF COCA-COLA

МАРТ 20, 2019GRETAHOVAKIMYANBLOGОСТАВИТЬ КОММЕНТАРИЙ

What is the most recognizable object in the world? Could it be a football? Or a Big-Mac? No, the answer is a Coca-Cola bottle. The famous Coca-Cola bottle is almost 100 years old !

Coca-cola sign in Las Vegas

Coca-cola advertisement in Las Vegas

Footballs and big macs are certainly part of life for lots of people; but Coca-Cola is now a permanent part of world culture. People know and drink Coca-Cola all over the world.
It is said that the Coca-Cola bottle is the most recognised object in the world. Hundreds of millions of people can recognise a Coke bottle by its shape, even if they cannot see it! And the famous Coca-Cola logo is the most famous logo in the world. Unlike any other famous commercial logo, it has not changed in 100 years!

Whatut the story of Coca-Cola is even older than that. It was in 1886 that John Pemberton, a druggist in Atlanta, Georgia, invented a new type of syrup, using coca leaves, sugar and cola nuts, plus a few other secret ingredients! Pemberton sold it as a medicine; and with its coca (the source of cocaine), it must have made people feel good!
Nevertheless, Pemberton’s medicine was not very successful, so he sold his secret formula to another druggist, Asa Candler. Candler was interested, because he had another idea; he thought that Pemberton’s «medicine» would be much better if it was mixed with soda.


Candler was thus the man who really invented the drink Coca-Cola. At first he sold it in his drugstore; then he began selling the syrup to other drugstores, who used it with their soda fountains. Candler also advertised his new drink, and soon people were going to drugstores just to get a drink of Coca-cola.
Before long, other people became interested in the product, including a couple of businessmen who wanted to sell it in bottles. Candler sold them a licence to bottle the drink, and very quickly the men became millionnaires. The famous bottle, with its very distinctive shape, was designed in 1916.
During the First World War, American soldiers in Europe began asking for Coca-Cola, so the Coca-cola company began to export to Europe. It was so popular with soldiers, that they then had to start bottling the drink in Europe.
Today, Coca-Cola is made in countries all over the world, including Russia and China; it is the world’s most popular drink.
As for the famous formula, it is probably the world’s most valuable secret! The exact ingredients for making Coca-Cola are only known to a handful of people. And as for the «coca» that was in the original drink, that was eliminated in 1903. It was a drug, and too dangerous. Today’s Coca-Cola contains caffeine, but n in 1903. It was a drug, and too dangerous. Today’s Coca-Cola contains caffeine, but not cocaine!

Hometask

Սա տղամարդու նկար է, պարոն Բրաունն է եվ տղան, Ռիչարդ Բրաունը: Պարոն Բրաունը հայրն է: Ռիչարդ Բրաունը որդին է:

Սա կնոջ նկար է, տիկին Բրաունն է եվ աղջիկը, Մարի Բրաունը:

Տիկին Բրաունը պարոն Բրաունի կինն է: Պարոն Բրաունը տիկին Բրաունի ամուսինն է: Տիկին Բրաունը մայրնն է: Մարի Բրաունը դուստրն է: Մարի Բրաունը Ռիչարդ Բրաունի քույրն է:

Ռիչարդ Բրաունը Մերի Բրաունի եղբայրն է:

Մերի Բրաունը և Ռիչարդ Բրաունը երեխաններն են պարոն և տիկին Բրաունի: