HayqSystem

HTML5 Խմբավորման տարրեր

27 02 2024

HTML5 Խմբավորման տարրեր ։ Մի շարք տարրեր նախատեսված են վեբ էջի բովանդակությունը խմբավորելու համար:

div տարր ` div տարրը օգտագործվում է վեբ էջի բովանդակությունը կառուցելու, բովանդակությունը առանձին բլոկների մեջ փակելու համար: div-ը ստեղծում է բլոկ, որը, ըստ նախնականի, ձգվում է բրաուզերի ողջ լայնությամբ, և div-ին հաջորդող տարրը անցնում է նոր տողի վրա: Օրինակ:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Project HTML5</title>
    </head>
    <body>
       <div> HTML5 block առաջին </div>
       <div> HTML5 block երկրորդ </div>
    </body>

</html>

Պարբերություններ ` Պարբերությունները ստեղծվում են <p> և </p> թեգերի միջոցով, որոնք պարունակում են որոշ բովանդակություն: Յուրաքանչյուր նոր պարբերություն դրվում է նոր տողի վրա: Կիրառենք պարբերությունները

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Project HTML5</title>
    </head>
    <body>
        <div>HTML5 Block 1</div>
        <div>
            <p> Պարբերություն 1 </p>
            <p> Պարբերություն 2 </p>
        </div>
    </body>
</html>

Եթե մեկ պարբերության մեջ մենք պետք է տեքստը տեղափոխենք մեկ այլ տող, ապա կարող ենք օգտագործել <br> տարրը.

<p> Առաջին տող.<br/> Երկրորդ տող. </p>

span տարր ՝ Span տարրը փաթաթում է որոշ տեքստի ողջ երկարությունը և հիմնականում ծառայում է նրանում պարունակվող տեքստի բովանդակության ոճավորմանը: Ի տարբերություն div-ի կամ պարբերությունների, span-ը բովանդակությունը չի փաթաթում հաջորդ տողում.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Project HTML5</title>
    </head>
    <body>
        <div> HTML5 Block 1 </div>
        <div>
            <p><span style="color:red;"> Առաջին </span> Պարբերություն</p>
            <p><span> Երկորոդ </span> Պարբերություն </p>
        </div>
    </body>
</html>

Հարկ է նշել, որ span-ն ինքնին ոչինչ չի անում: Այսպիսով, երկրորդ պարբերությունում միջակայքը ոչ մի ազդեցություն չի ունեցել ներքին տեքստի բովանդակության վրա: Իսկ առաջին պարբերությունում span տարրը պարունակում է ոճի հատկանիշ՝ style=”color:red;”, որը դնում է ներդիր տեքստի գույնը կարմիր:

Հարկ է նշել, որ div և p տարրերը բլոկային տարրեր են, div տարրը կարող է պարունակել ցանկացած այլ տարր, իսկ p տարրը կարող է պարունակել միայն ներդիր տարրեր։ Ի հակադրություն, span տարրը ներգծված է, այսինքն, այն տեղադրում է իր բովանդակությունը արտաքին կոնտեյների մեջ՝ նույն div կամ պարբերություն: Այնուամենայնիվ, դուք չպետք է բլոկի տարրեր տեղադրեք ներգծային տարածության տարրի մեջ:

Նախորդը

Հաջորդ

Բաժանորդագրվեք Տելեգրամ ալիքին բաց

չթողնելու համար նոր նյութերը ՝ https://t.me/hayqsystem

Կիսվել հրապարակումով