HTML առաջին քայլեր – դաս 2 – p, div թեգերը և դրանց տարբերությունները։ br թեգը

11/05/2025, by Ivan

Վերջին դասում մենք ստեղծեցինք մեր առաջին HTML փաստաթուղթը, և դա նշանակում է, որ դուք արդեն գիտեք՝ ինչպես գրել HTML կոդը տեքստային խմբագրիչում և դիտարկել փոփոխությունները դիտարկիչում՝ թարմացնելով էջը (սովորաբար F5 կոճակով)։

Այսպիսով, այս դասում մենք շարունակելու ենք աշխատել տեքստի հետ և օգտագործելու ենք տեգեր span, p, div՝ տեքստի обերточման համար։ Также (համար) կքննարկենք br տեգը։

<html>
  <head>
    <title>Իմ առաջին HTML փաստաթուղթը</title>
  </head>
  <body>   
    <h1>Իմ առաջին HTML փաստաթուղթը</h1>
     
  </body>
</html>

Սա մեր կոդն է, որի հետ կաշխատենք առաջ։

Եկեք ավելացնենք այսպիսի տողեր․

<html>
  <head>
    <title>Իմ առաջին HTML փաստաթուղթը</title>
  </head>
  <body>   
    <h1>Իմ առաջին HTML փաստաթուղթը</h1>
    <p>Առաջին տող P տեգում</p>
    <p>Երկրորդ տող P տեգում</p>
    <div>Առաջին տող DIV տեգում</div>
    <div>Երկրորդ տող DIV տեգում</div>
  </body>
</html>

Եթե բացեք փաստաթուղթը դիտարկիչում, կտեսնեք, որ p տեգերը ցուցադրում են տողերը अलग-अलग (տարբեր) տողերում, բայց կա և տարբերություն․ իմ դիտարկիչը լռությամբ մտցրեց մ верхний և ներքևի отступ P տեգի համար, իսկ DIV տեգերը կպցրեց տողերն իրար։ Պարզվում է, որ p տեգը ծառայողական չէ, այն նախատեսված է տեքստային պարբերության համար, իսկ div տեգը բլոկային տարր է՝ միջավայրի համար։ Այսինքն, եթե պետք է շարադրել տեքստ, օգտագործում ենք p, իսկ եթե ուզում ենք առանձնացնել մի տարբերվող տարածք, օրինակ՝ տալ դրա ֆոնային գույն կամ սահմաններ, օգտագործում ենք div։

Եթե կայքում կա տեքստ, այն ՊԵՏՔ է լինի p կամ h1–h6 տեգերում, եթե, իհարկե, այդ տեքստը ոչ ծառայողական չէ (չի ծառայում էջի ձևավորմանը)։ Այսպես տեքստը պետք է գրվի այսպես՝

<html>
  <head>
    <title>Իմ առաջին HTML փաստաթուղթը</title>
  </head>
  <body>   
    <h1>Իմ առաջին HTML փաստաթուղթը</h1>
    <div>
          <p>Առաջին տող P տեգում</p>
      <p>Երկրորդ տող P տեգում</p>
    </div>
  </body>
</html>

Այսպիսով, ստացվեց body>div>p հերթականությունը։ Ուշադրություն, div տեգ div>p>div բովանդակության մեջ տեղադրել p–ի մեջ չի կարելի։

Եկեք նաև դիտարկենք, թե ինչպես տեղափոխել տեքստը հաջորդ տող։ Երբ պարբերությունը շատ երկար է, ունենք երկու հնարավորություն՝ բաժանել այն մի քանի պարբերության կամ օգտագործել տեգը տողանցման համար՝ <br />։ br տեգը միավոր տեգ է, թեք գիծը դրվում է մեծ նշանից առաջ։

<html>
  <head>
    <title>Իմ առաջին HTML փաստաթուղթը</title>
  </head>
  <body>   
    <h1>Իմ առաջին HTML փաստաթուղթը</h1>
    <div>
      <p>HTML լեզուն մշակվել է բրիտանացի գիտնական Թիմ Բեռներս-Լիի կողմից մոտավորապես 1989–1991 թվականներին Ժնևի (Շվեյցարիա) ՕԳԱ-ի (Ջնևի եվրոպական միջուկային հետազոտությունների կենտրոն) պատերին։ HTML-ը ստեղծվել է գիտական և տեխնիկական փաստաթղթերի փոխանակման համար, կիրառելի ոչ մասնագետների համար։ HTML-ը լուծում էր SGML-ի բարդության խնդիրը՝ սահմանելով փոքրStructural (աշխատանքային) և semantical տարրեր՝ դեսկրիպտորներ, որոնք հաճախ կոչվում են «տեգեր»։ HTML-ով հեշտությամբ կարելի է ստեղծել համեմատաբար պարզ, բայց գեղեցիկ ձևավորված փաստաթուղթ։ Հիպերտեքստի աջակիցությունը ավելացվել է հետագայում։ Մուլտիմեդիա հատկությունները ներառվել են ավելի ուշ։</p>
    </div>
  </body>
</html>

Ստորև տողը շատ մեծ է․ եթե բաժնենք այն կոդում, դա HTML-ի արտահայտմանը չի ազդի։

<html>
  <head>
    <title>Իմ առաջին HTML փաստաթուղթը</title>
  </head>
  <body>   
    <h1>Իմ առաջին HTML փաստաթուղթը</h1>
    <div>
          <p>HTML լեզուն մշակվել է բրիտանացի գիտնական Թիմ Բեռներս-Լիի կողմից մոտավորապես 1989–1991 թվականներին Ժնևի (Շվեյցարիա) ՕԳԱ-ի պատերին։ 
      HTML-ը ստեղծվել է գիտական և տեխնիկական փաստաթղթերի փոխանակման համար, կիրառելի ոչ մասնագետների համար։ HTML-ը լուծում էր SGML-ի բարդության խնդիրը՝ սահմանելով փոքրStructural և semantical տարրեր՝ դեսկրիպտորներ։ 
      Դեսկրիպտորները հաճախ կոչվում են «տեգեր»։ HTML-ով հեշտությամբ կարելի է ստեղծել համեմատաբար պարզ, բայց գեղեցիկ ձևավորված փաստաթուղթ։ Հիպերտեքստի աջակցության լրացումները ավելացվել են հետագայում։ 
      HTML սկզբում նախատեսված էր փաստաթղթերը կառուցվածքային և ֆորմատային անջատելու համար։ 
      Իրականում HTML-ը շատ հեռու է իր սկզբնական նպատակից։ Օրինակ, <TABLE> տեգը, որը մի քանի անգամ օգտագործվել է այս էջի ֆորմատավորման համար, նախատեսված է փաստաթղթերում սովորական աղյուսակներ ստեղծելու համար, բայց այստեղ ոչ մի աղյուսակ չկայ։</p>
    </div>
  </body>
</html>

Սա մեզ չի օգնի՝ դիտարկիչում ոչինչ չի बदलվի, և այստեղ մեզ օգնության կգա <br /> տեգը։ Եկեք յուրաքանչյուր տողի վերջում ավելացնենք այն։

<html>
  <head>
    <title>Իմ առաջին HTML փաստաթուղթը</title>
  </head>
  <body>   
    <h1>Իմ առաջին HTML փաստաթուղթը</h1>
    <div>
      <p>HTML լեզուն մշակվել է բրիտանացի գիտնական Թիմ Բեռներս-Լիի կողմից մոտավորապես 1989–1991 թվականներին Ժնևի (Շվեյցարիա) ՕԳԱ-ի պատերին։<br /> 
      HTML-ը ստեղծվել է գիտական և տեխնիկական փաստաթղթերի փոխանակման համար, կիրառելի ոչ մասնագետների համար։<br />
      HTML-ը լուծում էր SGML-ի բարդության խնդիրը՝ սահմանելով փոքրStructural և semantical տարրեր՝ դեսկրիպտորներ։<br /> 
      Դեսկրիպտորները հաճախ կոչվում են «տեգեր»։ HTML-ով հեշտությամբ կարելի է ստեղծել համեմատաբար պարզ, բայց գեղեցիկ ձևավորված փաստաթուղթ։<br />
      Հիպերտեքստի աջակցության լրացումները ավելացվել են հետագայում։<br />
      Մուլտիմեդիա հատկությունները ավելացվել են ավելի ուշ։<br />
      </p>
      <p>
      HTML սկզբում նախատեսված էր փաստաթղթերը կառուցվածքային և ֆորմատային անջատելու համար։<br />
      Իրականում HTML-ը շատ հեռու է իր սկզբնական նպատակից։ Օրինակ, <TABLE> տեգը, որը մի քանի անգամ օգտագործվել է այս էջի ֆորմատավորման համար, նախատեսված է փաստաթղթերում սովորական աղյուսակներ ստեղծելու համար, բայց այստեղ ոչ մի աղյուսակ չկայ։<br />
      </p>
    </div>
  </body>
</html>

Այժմ դիտարկիչը կհասկանա, որ պետք է տողը բաժանել, ինչը նշում է <br /> տեգը։

Մենք նույնպես կարող ենք բաժանել տեքստը մի քանի պարբերության՝ օգտագործելով p տեգերը։

<html>
  <head>
    <title>Իմ առաջին HTML փաստաթուղթը</title>
  </head>
  <body>   
    <h1>Իմ առաջին HTML փաստաթուղթը</h1>
    <div>
      <p>HTML լեզուն մշակվել է բրիտանեցի գիտնական Թիմ Բեռներս-Լիի կողմից մոտավորապես 1989–1991 թվականներին Ժնևի (Շվեյցարիա) ՕԳԱ-ի պատերին։<br /> 
      HTML-ը ստեղծվել է գիտական և տեխնիկական փաստաթղթերի փոխանակման համար, կիրառելի ոչ մասնագետների համար։<br />
      HTML-ը լուծում էր SGML-ի բարդության խնդիրը՝ սահմանելով փոքրStructural և semantical տարրեր՝ դեսկրիպտորներ։<br /> 
      Դեսկրիպտորները հաճախ կոչվում են «տեգեր»։ HTML-ով հեշտությամբ կարելի է ստեղծել համեմատաբար պարզ, բայց գեղեցիկ ձևավորված փաստաթուղթ։<br />
      Հիպերտեքստի աջակցության լրացումները ավելացվել են հետագայում։<br />
      </p>
      <p>
      Մուլտիմեդիա հատկությունները ավելացվել են ավելի ուշ։<br />
      HTML սկզբում նախատեսված էր փաստաթղթերը կառուցվածքային և ֆորմատային անջատելու համար։<br />
      Իրականում HTML-ը շատ հեռու է իր սկզբնական նպատակից։ Օրինակ, <TABLE> տեգը, որը մի քանի անգամ օգտագործվել է այս էջի ֆորմատավորման համար, նախատեսված է փաստաթղթերում սովորական աղյուսակներ ստեղծելու համար, բայց այստեղ ոչ մի աղյուսակ չկայ։<br />
      </p>
    </div>
  </body>
</html>

Թարմացրեք էջը դիտարկիչում, և կհամոզվեք, որ տեքստը բաժանված է երկու պարբերության։

Լրացուցիչ Բլոկների Տեսակներ (EBT) - Դասավորության Կառուցողի նոր փորձառություն❗

❗Լրացուցիչ Պարբերությունների Տեսակներ (EPT) - Պարբերությունների նոր փորձառություն

HTML առաջին քայլեր – դաս 2 – p, div թեգերը և դրանց տարբերությունները։ br թեգը