Лекция · 4.8

Web-беттің семантикалық/блоктық белгіленуі

Кез келген үлкен сайтты ашсаң, оның бірдей «қаңқасы» болатынын байқайсың ба — жоғарыда логотип пен мәзір, ортада мазмұн, төменде байланыс ақпараты. Бұл кездейсоқтық емес — сайт беттерін ҚҰРЫЛЫМДЫ түрде жобалаудың стандарты. Бүгін осы «қаңқаны» HTML мен CSS арқылы қалай құрастыруды үйренеміз.

Веб-беттің бес негізгі компоненті
Анықтама
Беттің белгіленуі — веб-бетке код белгілерін орналастырып, оның құрылымын функционалды бөліктерге бөлу. Бұл әдіс беттің логикалық тәуелсіз бөліктерін (тақырып, мәзір, мазмұн) реттеп ұйымдастырады.

Әлемдегі көптеген сайттардың құрылымы ортақ бес компоненттен тұрады:

КомпонентСипаттамасы
Тақырып (header)Беттің жоғарғы жағы, сайт туралы жалпы ақпарат — БЕТТЕН БЕТКЕ өзгермейді
Навигациялық мәзірНегізгі бөлімдерге өтетін сілтемелер — БЕТТЕН БЕТКЕ өзгермейді
Негізгі мазмұныОртадағы ЕҢ ҮЛКЕН облыс (мәтін, сурет) — БЕТТЕН БЕТКЕ өзгереді
Бүйір панельҚосымша ақпарат (сілтемелер, жарнама)
Төменгі колонтитул (футер)Авторлық құқық, байланыс мекенжайы
Анықтама
Колонтитул — автордың атын, жұмыстың атын, бет нөмірін жол шетінде көрсететін анықтамалық жол. Үстіңгі және төменгі колонтитулдар семантикалық <header> және <footer> тегтерімен белгіленеді.
DIV блоктары мен CSS

Практикада бұл бес компонентті HTML-де жасау үшін <div> тегі мен id/class атрибуты қолданылады (мыс. container, header, menu, content, footer). Блоктардың КӨРІНІСІ (форма, түс, орналасу) сыртқы CSS файлы арқылы беріледі.

ҚасиетҚызметі
marginБлоктың сыртқы шегінісі (браузер терезесіне қатысты орны)
width, heightБлоктың ені мен биіктігі
floatЭлементті сол/оң жаққа тураланған етіп орналастыру — ҚАТАР тұрған блоктар жасау үшін
Толық макет есебі
Есеп (қиын): тақырып, навигация, мәзір, мазмұн блоктары

Берілді: header, navigation, menu, content блоктарынан тұратын бет макеті.

style2.css:

#container { background: #FFFFFF; margin: 30px auto; width: 900px; height: 1000px; }
#header { background: #838283; height: 200px; width: 900px; }
#navigation { background: #a2a2a2; width: 900px; height: 20px; }
#menu { background: #333333; float: left; width: 200px; height: 550px; }
#content { background: #d2d0d2; float: right; width: 700px; height: 550px; }
#footer { background: #838283; height: 180px; width: 900px; }

HTML құрылымы:

<div id="container">
    <div id="header"><h1>Bizdin maqtanyshymyz!</h1></div>
    <div id="navigation">
        <a href="#1">A. Qunanbaiuly</a>
    </div>
    <div id="menu">
        <font color="white">Agartushylar turaly</font>
    </div>
    <div id="content">
        <dl>
            <dt><a name="1">Abai Qunanbaiuly</a></dt>
            <dd>Aqyn, agartushy...</dd>
        </dl>
    </div>
    <div id="footer">Zhumysty oryndagan: 10-synyp oqushysy</div>
</div>

Түсіндірме: #menu блогы float: left, ал #content блогы float: right арқылы ҚАТАР орналастырылады — екеуінің ені қосындысы (200px+700px=900px) #container-дің енімен (900px) ДӘЛ сәйкес келеді.

💡
Маңызды есеп: float қолданғанда, қатар тұрған блоктардың ені ЖИЫНТЫҚ түрде ата-элементтің (container) енінен АСПАУЫ керек, әйтпесе блоктар үстіне-үстіне түсіп кетеді немесе төменгі жолға өтеді.
🎯 ҰБТ байланысы
Беттің стандартты бес компонентін және float қасиетінің қызметін білу маңызды.
1
Header/меню — беттен бетке ӨЗГЕРМЕЙДІ, ал content — ӨЗГЕРЕДІ.
2
float: left/right — блоктарды ҚАТАР (жанаса) орналастыру үшін қолданылады.
3
Блоктардың ені ата-элементтің енінен аспауы керек.
Сабақ қорытындысы
  • Беттің белгіленуі — құрылымды функционалды бөліктерге (header, меню, content, footer) бөлу.
  • Бес стандартты компонент: тақырып, навигация, негізгі мазмұн, бүйір панель, футер.
  • DIV блоктары id/class арқылы белгіленіп, сыртқы CSS файлымен безендіріледі.
  • float қасиеті блоктарды қатар (жанаса) орналастырады.