Використання HTML для визначення частин веб-сторінки
Веб-сторінка зазвичай складається з декількох різних частин - це, звичайно, може змінюватися залежно від вмісту та дизайну, але майже кожна сторінка має заголовок, навігацію, вміст та нижній колонтитул. Ми вже обговорили красу зовнішньої таблиці стилів, щоб визначити зовнішній вигляд і макет цілого веб-сайту. З цієї причини дуже важливо чітко проголосити окремі частини в html, тому ми можемо їх адресувати в таблиці стилів.
- Просмотров |
Веб-сторінка зазвичай складається з декількох різних частин – це, звичайно, може змінюватися залежно від вмісту та дизайну, але майже кожна сторінка має заголовок, навігацію, вміст та нижній колонтитул. Ми вже обговорили красу зовнішньої таблиці стилів, щоб визначити зовнішній вигляд і макет цілого веб-сайту. З цієї причини дуже важливо чітко проголосити окремі частини в html, тому ми можемо їх адресувати в таблиці стилів.
Таким чином, HTML до простого макета сторінки може виглядати так:
<body> <div id="wrapper"> <div id="header"> <h1>The Company Name</h1> </div> <div id="navigation"> <ul> <li>Home</li> <li>Home</li> <li>Home</li> <li>Home</li> </ul> </div> <div id="content"> <h2>The Content</h2> <p>This is where all the important info goes. Pictures, too - pictures are good.</p> </div> <div id="header"> <p>The copyright stuff and some basic contact info - or whatever </p> </div> </div> </body>
Більшість із зазначених вище частин є досить зрозумілими. І знову ж, фактичне ім’я не має значення, але в довгостроковій перспективі це полегшить ваше життя, якщо ви використовуєте описові назви. Зрештою, “заголовок” цілком говорить про це, тоді як ви, напевно, не пам’ятаєте, яка частина <div id = “style1”> означає, коли ви повернетеся на свою веб-сторінку пізніше. Або після обіду.
Єдиний розділ, я використовував це, може вимагати трохи більше пояснення – це “обгортка”. Технічно тег body є основним контейнером усього вашого HTML, але тег тіла охоплює кожен біт нерухомості, який ви бачите на своєму моніторі. Закидаючи іншу обгортку в тіло, це дозволяє нам краще визначити фактичну область вмісту. Це не обов’язково, це не “ви повинні” – але це просто дуже корисний інструмент для створення майже будь-якого веб-сайту – я не розробив сайт без цього і, ймовірно, ніколи не буду.
І тепер, коли основні частини сторінки були визначені в HTML, ми могли використовувати ці визначення або розділи для створення зв’язку між HTML та CSS.
body { background-color: #ffffff; color: #000000; } #wrapper { background-color: #FFDD33; width: 1050px; } #header {whatever;} #navigation {whatever;} #content {whatever;} #footer {whatever;}
Мати сенс?
