Docy

d… էլեմենտները

Մոտավոր ընթերցում. 3 րոպե 0 դիտումներ

<data>…</data>

Նախատեսված է տվյալներ թվարկելու համար։ 

value ատրիբուտը սահմանում է տվյալների թվային արժեքները javascript -ում(ոչ միայն) դրանց հետ ավելի հեշտ աշխատելու համար։ 

				
					<body>
   <ul>
      <li><data value= "1122" > iphone-10 </data> </li>
      <li><data value= "1133" > iphone-11 </data> </li>
      <li><data value= "1144" > iphone-12 </data> </li>
   </ul>
</body>
				
			

<datalist>…</datalist>

Սահմանում է տարբերակների ցուցակ և օգտագործվում է <input> էլեմենտի հետ։ 

<input>-ում list ատրիբուտի միջոցով նշվում է ցուցակի իդենտիֆիկատորի արժեքը։

<option>-ի միջոցով թվարկվում է ցուցակը։ 

Օրինակ՝

				
					<body>
   <input list="lezuner">
   <datalist id= "lezuner" >
      <option value="Html">
      <option value="Css">
      <option value="Javascript">
      <option value="React">
      <option value="Angular">
   </datalist>
</body>
				
			

<dl>…</dl> <dt>…</dt> <dd>…</dd>

<dl>-ը հանդիսանում է կոնտեյներ <dt> և <dd> էլեմենտների համար։ 

Ցուցակում սահմանվում է տերմինը <dt> էլեմենտի միջոցով, հետո տերմինի բացատրությունը <dd> էլեմենտի միջոցով։

				
					<body>
   <dl>
      <dt>Html</dt>
      <dd>Նախատեսված է մեր փաստաթուղթը նշագրելու համար</dd>
      <dt>Css</dt>
      <dd>Նախատեսված է html փաստաթուղթը դիզայնավորելու համար</dd>
   </dl>
</body>
				
			

<del>…</del> <s>…</s>

<del> և <s> էլեմենտների միջոցով տեքստի հատվածը սահմանվում է որպես հնացած՝ ոչ արդիական։ 

<ins> էլեմենտի միջոցով սահմանվում է տեքստի արդիական տարբերակը։ 

Օրինակ՝

				
					<body>
   <p>Հասանելի է արդեն html-ի <del>4-րդ</del> <ins>5.1-րդ</ins> տարբերակը։</p>
</body>
				
			

Ունի երկու ատրիբուտ՝

cite

cite=”www.example.com/html4-to-html5.1/” – cite-ի միջոցով նշվում է հասցեն, որտեղ նշված է հատվածի փոփոխման պատճառը։

datetime

datetime=“YYYY-MM-DDThh:mm:ssTZD”   –նշվում է  տեքստի հատվածը փոփոխելու ամսաթիվը։

YYYY   -նշվում է տարին․ օրինակ՝ 2050։

MM   –նշվում է ամիսը․ օրինակ՝ 01։

DD   -ամսվա օրը ․ օրինակ՝ 10։

T   –օրը ժամանակից առանձնացնելու սիմվոլը․ օրինակ՝ T կամ ուղղակի պրոբել։

hh   –ժամը․ օրինակ՝ 10.00pm։

mm   -րոպեն․ օրինակ՝ 30։

ss   -վարկյանը․ օրինակ՝ 14։

TZD   -ժամային գոտու նշանակում․ օրինակ՝ UTC+4։

Վերջնական արդյունքը կլինի հետևյալը՝ datetime= “ 2050-01-10 10.00pm:30:14UTC+4”

<details>…</details><summary>․․․</summary>

Նախ օրինակը՝

				
					<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>

  <h1>Հաճախակի տրվող հարցեր։</h1>

  <details>
    <summary>Ի՞նչ է HTML -ը</summary>
    <p>HTML (HyperText Markup Language) -ը նշագրման լեզու է։ 
    <br> Նախատեսված է վեբ էջը պատրաստելու համար։</p>
  </details>

<br><br>

  <details open>
    <summary>Ի՞նչ է CSS -ը</summary>
    <p>CSS (Cascading Style Sheets) -ը նախատեսված է վեբ էջը ոճավորելու համար։</p>
  </details>


</body>
</html>
				
			

<details>-ի միջոցով  սահմանվում  է լրացուցիչ տեղեկատվություն,  իսկ վերնագիրը վերցվում է <summary> էլեմենտի մեջ։ 

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

<dfn>…</dfn>

Օգտագործվում է տեքստում հատուկ տերմինները նշելու համար։ Այն վերցվում է <dfn> էլեմենտի մեջ, որը տերմինը պատկերում է ավելի թեք։

				
					<body>
  <p>
    <dfn> bootstrap-ը </dfn> վեբ կայքերի և հավելվածների ստեղծման համար 
    բաց կոդով ազատ և անվճար css գրադարան է։
  </p>
</body>

				
			

<dialog>…</dialog>

Սահմանում է երկխոսության պատուհան։
Երկխոսության պատուհանը սովորաբար պատրաստվում է Css-ի և Javascript-ի միջոցով։

Այն նախատեսված է ինտերակտիվ հավելվածներում մոդալ երկխոսություններ ստեղծելու համար, որոնք պահանջում են օգտատիրոջ փոխազդեցություն նախքան հավելվածի հիմնական աշխատանքի շարունակվելը:

Պատուհանն առանց այլ լեզուների՝

Պատուհանը Css-ի և Javascript-ի հետ՝

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hayti</title>
    <style>
      body {
        background: url(html.png) no-repeat;
        background-size: 300;
      }
      dialog {
        position: fixed;
        top: 25%;
        background: rgba(255, 255, 255, 0.7);
        width: 300px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        border-radius: 5px;
      }

      #overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <button id="openDialog">Բացել պատուհանը</button>

    <div id="overlay">
      <dialog>
        <p>
          HTML' (անգլ.՝ HyperText Markup Language, գերտեքստի նշագրման լեզու),
          նշագրման լեզու, որն օգտագործվում է վեբ-էջերի մեծամասնության նշագրման
          համար։ HTML լեզուն վերամշակվում է դիտարկչի կողմից և ցուցադրվում է
          մարդու կողմից հեշտ ընթեռնելի փաստաթղթի տեսքով։
        </p>
        <p>
          <button id="closeDialog">Փակել պատուհանը</button>
        </p>
      </dialog>
    </div>

    <script>
      var dialog = document.querySelector("dialog");
      document.querySelector("#openDialog").onclick = function () {
        document.getElementById("overlay").style.display = "block";
        dialog.show();
      };
      document.querySelector("#closeDialog").onclick = function () {
        document.getElementById("overlay").style.display = "none";
        dialog.close();
      };
    </script>
  </body>
</html>

				
			

open

open ատրիբուտի միջոցով պատուհանը նախապես բաց կլինի, իսկ բացակայության դեպքում պետք է սեղմել կոճակին։

<div>…</div>

Սահմանում է  կոնտեյներ, որը խմբավորում է իրենում պարունակվող էլեմենտները որպես մեկ ընդհանուր էլեմենտ։

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hayti</title>
    <style>
      .block1 {
        width: 200px;
        background: #ccc;
        padding: 5px;
        padding-right: 20px;
        border: solid 1px black;
        float: left;
      }
      .block2 {
        width: 200px;
        background: #fc0;
        padding: 5px;
        border: solid 1px black;
        float: left;
        position: relative;
        top: 40px;
        left: -70px;
      }
    </style>
  </head>
  <body>
    <div class="block1">
      <h1>Html</h1>
      <p>
        HTML-ի օգնությամբ հեշտությամբ կարելի է ստեղծել համեմատաբար պարզ, սակայն
        գեղեցիկ ձևավորված փաստաթուղթ։ Ի հավելումն փաստաթղթի կառուցվածքի
        պարզեցմանը՝ HTML-ում աջակցվում էր հիպերտեքստը։ Մուլտիմեդիայի
        հնարավորությունները ավելացվեցին քիչ ավելի ուշ։
      </p>
    </div>
    
    <div class="block2">
      <h1>Css</h1>
      <p>
        CSS կամ կասկադային ոճաթերթ (Cascading Style Sheets), կայքին ձևավորում
        տալու համար օգտագործվող տեխնոլոգիա ծրագրավորման ֆորմալ լեզվով։ CSS-ը
        հիմնականում օգտագործվում է HTML և XHTML ֆորմատի պատկանող վեբ-էջերի
        ձևավորման համար...
      </p>
    </div>
  </body>
</html>

				
			

Թողնել մեկնաբանություն

Կիսվել փաստաթուղթով
ԲՈՎԱՆԴԱԿՈՒԹՅՈՒՆ
hyArmenian