Использование 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;}

Имеют смысл?

 

ТЕГИ:

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Авторизация
*
*
Регистрация
*
*
*
Генерация пароля