Html каркас страницы – Подключаем к странице другой каркас — Структура HTML-документа — HTML Academy

Каркас страницы html. Создаём файл

Каркас страницы html. Создаём файл

Для создания HTML документа необходимо написать каркас страницы. Вам этого делать не придётся. Копируйте готовый код, и читайте, что означают символы в коде.

В предыдущей статье мы создали Директорию сайта, а в этой приступим к написанию страницы, или созданию html документа (файла), что в общем-то одно и тоже.

Каркас страницы по версии HTML 5

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
</head>
<body>
Контент
</body>
</html>

И каркас страницы по версии HTML 4.01 Transitional, являющейся переходной между 4 и 5 версиями, и актуальной до сих пор.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия/title>
</head>
<body>

</body>
</html>

Как видите, версия HTML 5 заметно проще своих предшественников.

Кратко рассмотрим, что-же означают все эти слова и символы.

Первая строка HTML 5

<!DOCTYPE HTML>

Первая строка HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

указывает на тип создаваемого нами документа.

Здесь указано, что создаётся html-документ по версии html 5 или 4.01.

Далее идёт столбик из тегов. Тег — это конструкция языка, которая указывает браузеру, что нужно отображать на экране монитора. Какие-то теги говорят, что нужно отображать заголовок, какие-то абзац и так далее. В каркасе страницы находятся теги называющиеся тегами верхнего уровня.

Первый тег в столбике — это <html>. Обратите внимание на то, что и последний тег тоже

только со слешем (наклонной чертой).  Это классический пример парного тега, где сначала идёт открывающий элемент, а потом закрывающий.

Значит теги бывают парные, и представляют из себя контейнера для html-кода, но бывают и одиночные. Придёт время и мы их так же разберём. Данный тег <html> является контейнером для всей страницы.

Следующий тег, так-же парный — <head>, что в переводе с английского означает голова. Этот контейнер, уже сам находящийся в контейнере html, содержит в себе специальные теги, действие которых не всегда явно видно на мониторе.

Они говорят, в какой кодировке сделана страница, какие скрипты и таблицы стилей должны на ней подключаться, ну и какое название страницы будет отображено во вкладке браузера.

Далее тег <body>(тело) так же парный, то есть так же контейнер внутри контейнера html, и в нём уже будут расположены форматирующие теги, которые будут указывать на расположение абзацев, картинок, ссылок, и вообще всего того, что мы видим на мониторе.

Из примеров видно, что код каркаса в HTML 5, заметно сократился. В теге <!DOCTYPE> нет больше описания версии и типа файла, в <meta> остался только charset, для указания кодировки.

И ещё, при подключении таблиц стилей больше не нужно будет указывать type="text/css" в тегах <link> и <style>

Теперь давайте откроем установленный у нас редактор Notepad++. Так как мы будем пользоваться им очень часто, предлагаю разместить его в меню Пуск. Для этого нужно щёлкнуть по значку Пуск, затем правой клавишей, по открывшейся строчке с блокнотом и карандашом, и в открывшемся меню выбрать Закрепить на панели задач

Затем щёлкнем по его иконке, появившейся в нижней строке монитора, и нам откроется домашняя страница редактора. Щёлкаем по первой вверху иконке (новый), и открываем новый документ, в который и скопируем, или перепишем(как угодно), каркас страницы.

Копируем код каркаса страницы в новый документ в Notepad++

Хочу сразу предупредить, что мельчайшая ошибка  в коде (нет точки, или кавычек и тому подобное), приводит к тому, что код не работает.

После этого, в строке панели управления(вверху), находим пункт Encoding(кодировка), и в открывшемся меню выбираем Преобразовать в UFT-8.

Выбираем кодировку в Notepad++

И чтоб в дальнейшем не волноваться по этому поводу, щёлкнем по пункту Settings(опции), затем по строке Настройки”, в окне настроек – Новый документ, и ставим точку в строке UTF-8. Затем Закрыть

Устанавливаем кодировку в Notepad++ 

После этого, нужно щёлкнуть по третьей иконке слева Сохранить, и в появившемся окне поиска, находим созданную нами на предыдущей странице Директорию сайта.

Открываем папку site, в строчке Имя файла убираем nev1, пишем index.html, и жмём Сохранить.

Сохранение файла каркаса страницы в директории сайта

После чего наш документ должен приобрести вот такой красивый вид, и в окошечке над ним должно появиться название index.html

Файл каркаса страницы в Notepad++

Поздравляю! Вы только-что создали файл. Теперь, если зайти в директорию сайта (Пуск-Компьютер-Документы-site), то там Вы увидите такую конструкцию:

Директория сайта

Как видите, файл index.html занял своё место в корне сайта, и в следующих статьях этого урока, мы научимся заполнять его кодом, и просматривать в браузере то, что у нас получилось.

Если вы сохраните эту страницу в закладках, то в дальнейшем вам не придётся в ручную писать каркас страницы, так как достаточно будет заглянуть сюда и скопировать код.

Желаю творческих успехов.

Короткий отдых
Перемена

Чем отличается мужское общежитие от женского?
В мужском общежитии дурдом, а в женском — домдур

Раньше студенты учились и подрабатывали, а теперь работают и подучиваются.

Создание директории сайта < < < В раздел > > > Шаблон сайта на чистом HTML

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.

А так же:

Короткий отдых

Контактная информация: Сергей Кутузов; скайп: webded1; адрес: г. Казань, ул. Ново-Девликеевская, дом 108.

© Копирование и переписывание информации с сайта без письменного согласия с администрацией сайта https://sekretymastera.ru запрещено. Авторские права на все тексты, картинки, дизайн, логотип, дизайн сайта https://sekretymastera.ru принадлежат Кутузову Сергею Юрьевичу

Короткий отдых

4

Как сделать каркас сайта HTML5

Как сделать каркас сайта? Хочу вам показать немного устаревший, но надёжный способ верстки каркаса. Тут будем активно использовать нейтральный элемент div. Обратите внимание на то, что здесь нет новых тегов article, меню.

Предлагаю вам готовый пример. Сделайте файл index.php и папку css файлом style.css.

style.css - файл

<style> body {font-family: verdana;} h2, h3 {text-align: center; color: #000;} #header {background: #FFAB61;} #sidebar {float: left; width: 20&#37; background-color: #FF8761;} .post {float: right; width: 79&#37; background-color: #FFE061; margin-bottom: 10px;} #footer {clear: both; background-color: #FFAB61;} </style>

index.php - файл


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset=utf-8>
<title>страница1</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>
   <h2>Моя страница</h2>
</div>
<div>
   <h3>Меню</h3>
  <ul>
     <li><a href="cat1.html">первая категория</li>
     <li><a href="cat2.html">вторая категория</li>
  </ul>
</div>
<div>
   <h3>Первый блок с контентом</h3>
   <p>Тут текст для первого блока</p>
</div>
<div>
   <h3>Второй блок с контентом</h3>
   <p>Тут текст для второго блока</p>
</div>
<div>
   <h3>Футер</h3>
   <p>Тут текст для футера</p>
</div>
</body>
</html>

Теперь немного переделаем тот же самый шаблон. Добавим в него новые теги HTML5. Смотрите на картинку.

В файле style.css нужно у всех новых тегов сделать свойство display: block. Если вы этого не сделаете, то верстка будет не правильно отображаться.

style.css


<style>
header, nav, footer, article {display: block;}
body {font-family: verdana;}
header {background: #FFAB61;}
nav {float: left; width: 20&#37; background-color: #FF8761;}
h2, h3 {text-align: center; color: #000;}
article {float: right; width: 79&#37; background-color: #FFE061; margin-bottom: 10px;}
footer {clear: both; background-color: #FFAB61;}
</style>

index.php


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset=utf-8>
<title>страница1</title>
<link href="css/style2.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
</head>
<body>
<header>
   <h2>Моя страница</h2>
</header>
<nav>
   <h3>Меню</h3>
  <ul>
     <li><a href="cat1.html">первая категория</li>
     <li><a href="cat2.html">вторая категория</li>
  </ul>
</nav>
<article>
   <h3>Первый блок с контентом</h3>
   <p>Тут текст для первого блока</p>
</article>
<article>
   <h3>Второй блок с контентом</h3>
   <p>Тут текст для второго блока</p>
</article>
<footer>
   <h3>Футер</h3>
   <p>Тут текст для футера</p>
</footer>
</body>
</html>

Посмотрите на картинку. Получилась резиновая верстка. Она сама растягивается по ширине. Предлагаю вам доработать верстку и стили.

В результате у нас есть два способа верстки. Второй способ верстки макета страницы с применением тегов HTML5 лучше. Но есть одна проблема. Такая верстка не отобразиться в эксплорере. Может быть, в самых новых версиях верстка с тегами HTML5 нормально будет отображаться? Можно обмануть эксплорер! Для этого надо подсунуть ему яваскрипт файл, который налету изменит стили. Вы легко найдёте этот файл js в интернете.

просмотры: 6323, уровень: лёгкий уровень, рейтинг: 3, дата: 2016-12-18 14:34:39

Комментарии:

Каркас сайта

В этом уроке мы напишем полный код каркаса сайта, на html и СSS, и проделаем это в нескольких вариантах, постепенно добавляя блоки и колонки.

Итак, начнём. Для обозначенной цели откроем редактор Notepad++ (или другой подобный), и создадим следующую html конструкцию, на основе которой и будем создавать каркас сайта.

Для тех, кто ещё не представляет где пишется код, и как просмотреть то, что отобразит браузер, сначала необходимо прочитать статью Как создать каркас страницы, и установить Notepad++.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Каркас сайта</title>
</head>
<body>
    <div> <!--Оболочка-->
        <div></div> <!--Шапка-->
        <div></div> <!--Сайдбар-->

        <div></div> <!--Контент-->
        <div></div> <!--Подвал-->
    </div>
</body>
</html>

Давайте подробно рассмотрим эту запись, почему именно такие названия у блоков с идентификаторами.

1. <div id=”wrapper”> — wrapper (оболочка), в нём располагаются другие блоки.

2. <div id=”header”> – header (голова), так называется область в которой расположена шапка сайта.
3. <div id=”sidebar”> – sidebar (боковая панель), область в которой обычно распложено вертикальное меню и виджеты (календарь и т.д.)
4. <div id=”content”> – content (содержание), область в которой расположено содержание сайта.
5.<div id=”footer”> – footer (нижний колонтитул), или подвал, область в самом низу страницы.

Теперь, в таблице стилей, задаём этим блокам предварительные параметры. Подключим стили глобальным способом, в тело тега head, при помощи тега style.

Оболочке wrapper прописываем ширину (высота по  мере заполнения увеличивается автоматически), временную рамку, внутренний отступ, и выравнивание по центру страницы.

Для шапки задаём высоту, фоновый цвет, и внешний отступ снизу, для того, чтоб следующие блоки не прижались к нему вплотную.

Для блоков sidebar, content, и footer — высоту, и отступ снизу, зададим пока такие же, как и у “header”, а фоновый цвет дадим, временно, каждому свой, чтоб они друг от друга отличались.

<style>
#wrapper{
    width: 900px; /* Ширина */
    outline: 1px solid #787274; /* Временная рамка */
    padding: 10px; /* Внутренний отступ */
    margin: 0 auto; /* Выравнивание по центру экрана монитора */
}
#header{
    height: 80px; /* Высота */
    background: #25b33f; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
#sidebar{
    height: 80px; /* Высота, временная. Высота всем блокам задаётся только для предварительной отладки. В дальнейшем высота будет определяться автоматически в зависимости от содержания блока. */
    background: #2ff553; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
#content{
    height: 80px; /* Высота, временная */
    background: #9ef7af; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
#footer{
    height: 80px; /* Высота */
    background: #41874e; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
</style>

Теперь посмотрим на то, что у нас получилось

Заготовка для создания каркаса сайта

Вот такое вышло начало. Все блоки одинаковой высоты расположились друг под другом и оболочка раздвинулась и заключает их в себе.

Теперь задаём сайдбару полагающуюся ему ширину, примерно в 200 пикселей, и смещаем на привычный правый край, задав внешний отступ слева в 700px, так как общая заданная ширина составляет 900px (900-200=700).

#sidebar{
    width: 200px; /* Ширина */
    height: 80px; /* Высота временная */
    background: #2ff553; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
    margin-left: 700px; /* Отступ слева */
}

Смотрим результат.

Создание боковой колонки - сайдбара

Сайдбар занял своё место и готов к дальнейшим преобразованиям

И вот теперь пришло время познакомиться с ещё одним замечательным свойством CSS, которое называется float (наплывание или обтекание).

Прописываем его в селектор sidebar, и происходит следующее: блок сайдбар, как бы приподнимется, и освободит место для других блоков, которые тут же его займут, а сайдбар, как бы наплывёт на них.  В значении у float ставим  right(справа), так как сайдбар находится справа.

#sidebar{
    height: 80px; /* Высота, временная */
    width: 200px; /* Ширина */
    background: #2ff553; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
    margin-left: 700px; /* Отступ слева */
    float: right; /* Обтекание справа */
}

Результат

Результат применения к сайдбару свойства css - float

Теперь нам осталось укоротить блок content, Так как общая заданная длина у нас 900px, то расчёт делается исходя из этого: 900-200(ширина сайдбара) — 10(ширина зазора между блоками)=690px.

#content{
    height: 80px; /* Высота временная */
    width: 690px; /* Ширина */
    background: #9ef7af; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}

Смотрим. Каркас сайта с одним сайдбаром справа

Каркас сайта с одним сайдбаром справа

Теперь полностью код.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Каркас сайта</title>
<style>
/* Оболочка */
#wrapper{
    width: 900px; /* Ширина */
    outline: 1px solid #787274; /* Временная рамка. Нужна при вёрстке для контроля границ блока */
    padding: 10px; /* Внутренний отступ границ блока от элементов расположенных внутри блока */
    margin: 0 auto; /* Выравнивание по центру экрана монитора */
}
/* Шапка сайта */
#header{
    height: 80px; /* Высота. Ширина по умолчанию занимает ширину оболочки */
    background: #25b33f; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
/* Сайдбар */
#sidebar{
    height: 80px; /* Временная высота */
    width: 200px; /* Ширина */
    background: #2ff553; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
    margin-left: 700px; /* Отступ слева */
    float: right; /* Обтекание справа */
}
/* Основной контент */
#content{
    height: 80px; /* Временная высота */
    width: 690px; /* Ширина */
    background: #9ef7af; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
/* Подвал */
#footer{
    height: 80px; /* Высота. Ширина по умолчанию занимает ширину оболочки */
    background: #41874e; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
<!--Оболочка-->
    <div>
<!--Шапка-->
        <div></div>
<!--Сайдбар-->
        <div></div>
<!--Контент-->
        <div></div>
<!--Подвал-->
        <div></div>
    </div>
</body>
</html>

Каркас сайта с одним сайдбаром слева. Найдите три отличия в коде.

Каркас сайта с одной колонкой слева

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Каркас сайта</title>
<style>
/* Оболочка */
#wrapper{
    width: 900px; /* Ширина */
    outline: 1px solid #787274; /* Временная рамка */
    padding: 10px; /* Внутренний отступ */
    margin: 0 auto; /* Выравнивание по центру */
}
/* Шапка */
#header{
    height: 80px; /* Высота */
    background: #25b33f; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
/* Сайдбар */
#sidebar{
    height: 80px; /* Высота */
    width: 200px; /* Ширина */
    background: #2ff553; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
    float: left; /* Левое обтекание */
}
/* Сайдбар */
#content{
    height: 80px; /* Высота */
    width: 690px; /* Ширина */
    background: #9ef7af; /* Фоновый цвет */
    margin: 0 0 10px 210px; /* Наружные отступы */
}
/* Подвал */
#footer{
    height: 80px; /* Высота */
    background: #41874e; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
<!--Оболочка-->
    <div>
<!--Шапка-->
        <div></div>
<!--Сайдбар-->
        <div></div>
<!--Контент-->
        <div></div>
<!--Подвал-->
        <div></div>
    </div>
</body>
</html>

Каркас сайта с двумя колонками

Каркас сайта с двумя сайдбарами

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Каркас сайта</title>
<style>
/* Оболочка */
#wrapper{
    width: 900px; /* Ширина */
    outline: 1px solid #787274; /* Временная рамка */
    padding: 10px; /* Внутренний отступ */
    margin: 0 auto; /* Наружние отступы */
}
/* Шапка */
#header{
    height: 80px; /* Высота */
    background: #25b33f; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
/* Сайдбар слева */
#sidebar1{
    height: 80px; /* Высота */
    width: 200px; /* Ширина */
    background: #2ff553; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
    float: left; /* Левое обтекание */
}
/* Сайдбар справа */
#sidebar2{
    height:80px; /* Высота */
    width: 200px; /* Ширина */
    background: #2FF553; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
    float: right; /* Правое обтекание */
}
/* Контент */
#content{
    height: 80px; /* Высота */
    width: 480px; /* Ширина */
    background: #9ef7af; /* Фоновый цвет */
    margin: 0 0 10px 210px; /* Наружные отступы */
}
/* Подвал */
#footer{
    height: 80px; /* Высота */
    background: #41874e; /* Фоновый цвет */
    margin-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
<!--Оболочка-->
    <div>
<!--Шапка-->
        <div></div>
<!--Сайдбар 1-->
        <div></div>
<!--Сайдбар 2-->
        <div></div>
<!--Контент-->
        <div></div>
<!--Подвал-->
        <div></div>
    </div>
</body>
</html>

И, до кучи, Каркас сайта с тремя сайдбарами разделёнными на блоки.

Каркас сайта с тремя сайдбарами разделёнными на блоки

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Каркас сайта</title>
<style>
/* Оболочка */
#wrapper{
  width: 900px; /* Ширина */
  outline: 1px solid #787274; /* Временная рамка */
  padding: 10px; /* Внутренний отступ */
  margin: 0 auto; /* Выравнивание по центру экрана монитора */
  position:relative; /* Относительное позиционирование для того, чтобы затем размещать блоки внутри оболочки, позиционируя их абсолютно, относительно границ оболочки */
}
/* Шапка */
#header{
  width:580px; /* Ширина */
  height: 80px; /* Высота */
  background: #25b33f; /* Фоновый цвет */
  margin-bottom: 10px; /* Отступ снизу */
}
/* Сайдбар слева */
#sidebar1{
  height: 280px; /* Высота */
  width: 150px; /* Ширина */
  background: #2ff553; /* Фоновый цвет */
  margin-bottom: 10px; /* Отступ снизу */
  float: left; /* Левое обтекание */
}
/* Оболочка сайдбара справа */
#blok{
  position:absolute; /* Позиционируем абсолютно */
/* Позиция */
  top:10px; /* Отступ сверху */
  left:590px; /* Отступ слева */
}
/* Сайдбар справа из двух колонок */
.sidebar2,.sidebar3{
  height:370px; /* Высота */
  width: 150px; /* Ширина */
  margin: 0px 0px 5px 10px; /* Наружные отступы */
  float: right; /* Правое обтекание */
}
/* Блоки сайдбара справа. Высота блоков задаётся только для предварительной отладки. В дальнейшем она будет определяться содержанием блока */
.dva{
  background: #2FF553; /* Фоновый цвет */
  height: 80px; /* Высота */
  margin-bottom: 10px; /* Отступ снизу */
}
.tri{
  background: #2FF553; /* Фоновый цвет */
  height: 80px; /* Высота */
  margin-bottom: 10px; /* Отступ снизу */
}
.dva1{
  background: #2FF553; /* Фоновый цвет */
  height: 120px; /* Высота */
  margin-bottom: 10px; /* Отступ снизу */
}
.tri1{
  background: #2FF553; /* Фоновый цвет */
  height: 50px; /* Высота */
  margin-bottom: 10px; /* Отступ снизу */
}
.dva2{
  background: #2FF553; /* Фоновый цвет */
  height: 150px; /* Высота */
  margin-bottom: 10px; /* Отступ снизу */
}
.tri2{
  background: #2FF553; /* Фоновый цвет */
  height: 220px; /* Высота */
  margin-bottom: 10px; /* Отступ снизу */
}
#content{
  height: 280px; /* Высота */
  width: 420px; /* Ширина */
  background: #9ef7af; /* Фоновый цвет */
  margin: 0 0 10px 160px; /* Наружные отступы */
}
#footer{
  height: 80px; /* Высота */
  background: #41874e; /* Фоновый цвет */
  margin-bottom: 10px; /* Отступ снизу */
}
</style>
</head>
<body>
<!--Оболочка-->
<div>
<!--Шапка-->
    <div></div>
<!--Сайдбар слева-->
    <div></div>
<!--Оболочка сайдбара справа-->
        <div>
<!--Сайдбар справа первая колонка-->
            <div>
<!--Блоки первой колонки-->
                <div></div>
                <div></div>
                <div></div>
            </div>
<!--Сайдбар справа вторая колонка-->
            <div>
<!--Блоки второй колонки-->
                <div></div>
                <div></div>
                <div></div>
            </div>
<!--Контент-->
        </div>
    <div></div>
<!--Подвал-->
    <div></div>
</div>
</body>
</html>

Но это ещё не всё.

Напомню, что блоку сайдбар мы придали свойство ”float”, и он стал как бы наплывающим на другие элементы. Даже лучше сказать он приподнялся, и освободил место для других элементов.

Каркас сайта

Теперь представим, что произойдёт, когда мы начнём наполнять его содержанием. Блок sidebar начнёт увеличиваться в высоту, наплывёт на блок footer, и дальше станет раздвигать рамку оболочки.

Что бы этого не произошло, нужно запретить блоку “sidebar”, да и «content» тоже, наплывать на блок “footer”. Делается это следующим образом.

В таблице стилей  создаётся новый класс clear (очистить). Свойство так же назовём “clear”, а значение дадим “both”(всё). Существуют ещё значения “right” и “left” для тех случаев, когда запретить наплыв нужно справа или слева.

.clear{
  clear: both;
}

Затем, в селекторах “content” и “sidebar”, убираем заданную им высоту (height:80px), так как будем наполнять их текстом.

После этого, перед блоком <div id=footer>, пропишем ещё один блок <div>, и вставим в него только что созданный класс ”clear”, который запретит другим блокам наплывать на <footer>.

<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

Теперь скопируем несколько любых абзацев текста и вставим их в блоки ”content” и “sidebar”. В первый побольше, во второй поменьше, соответственно их размерам.

<body>
    <div>
        <div></div>
        <div>
Напомню, что блоку сайдбар мы придали свойство ”float”, и он стал как-бы наплывающим на другие элементы.
Даже лучше сказать он приподнялся, и освободил место для других элементов.
Теперь представим что произойдёт когда мы начнём наполнять его содержанием. Блок начнёт увеличиваться
в высоту, наплывёт на блок “footer” и дальше станет раздвигать рамку оболочки.
        </div>
        <div>
Как сделать колонки одной высоты в CSS. Тема эта не простая так как прежде чем рассматривать её
Для этого зададим селекторам “sidebar” и “content” внутренний отступ 10px и убавим
ширину обоих блоков на 20px у каждого т.к. внутренний отступ у нас составит по 10 с двух сторон,
всего 20, и если этого не сделать этот отступ раздвинет блоки и они налезут друг на друга. 
Ну вот, текст разместился и подвал отодвинулся, правда разместился текст как-то уж больно близко к краям
блоков поэтому давайте его немного подправим. Как сделать колонки одной высоты в CSS. Тема эта
не простая так как прежде чем рассматривать её Для этого зададим селекторам “sidebar”
и “content” внутренний отступ 10px и убавим ширину обоих блоков на 20px у каждого
т.к. внутренний отступ у нас составит по 10 с двух сторон, всего 20, и если этого не сделать этот
отступ раздвинет блоки и они налезут друг на друга. 
        </div>
        <div></div>
        <div></div>
    </div>

И смотрим, что получилось.

Каркас сайта

Ну вот, текст разместился и подвал отодвинулся, правда разместился текст, как-то уж больно близко к краям блоков, поэтому давайте его немного подправим.

Для этого зададим селекторам “sidebar” и “content” внутренний отступ 10px, и убавим ширину обоих блоков на 20px у каждого, так как внутренний отступ у нас составит по 10 с двух сторон, всего 20, и если этого не сделать, этот отступ раздвинет блоки, и они налезут друг на друга.

#sidebar{
background-color: #2ff553;
margin-bottom: 10px;
width: 180px;
float: right;
padding: 10px;
}
#content{
background-color: #9ef7af;
margin-bottom: 10px;
width: 670px;
padding: 10px;
}

Посмотрим.

Каркас сайта Вот так гораздо приятнее глазу, не правда-ли. Теперь давайте обобщим то, что связано с каркасом сайта и посмотрим, как выглядит полностью код каркаса сайта в  html файле.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
#wrapper{
     width: 900px;
     outline: 1px solid #787274;
     padding: 10px;
     margin: 0 auto;
}
#header{
     height: 80px;
     background-color: #25B33f;
     margin-bottom: 10px;
}
#sidebar{
     background-color: #2FF553;
     margin-bottom: 10px;
     width: 180px;
     padding: 10px;
     float: right;
}
#content{
     background-color: #9EF5AF;
     margin-bottom: 10px;
     width: 670px;
     padding: 10px;
}
#footer{
     height:80px;
     background-color: #41874E;
     margin-bottom: 10px;
}
.clear{
     clear: both;
}
</style>
</head>
<body>
    <div>
        <div></div>
        <div>Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать
Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
        </div>
        <div>А мне, учитывая возраст и «опыт», было не просто
понять как раз эти нюансы, они отнимали
больше всего времени.
И я решил написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.
        </div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

Как сделать изображение кнопки в Paint < < < В раздел > > > Как сделать шапку сайта;

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

Теги для создания каркаса сайта, его структуры

Теги для создания каркаса сайта

От автора: приветствуем вас на webformyself, у нас вы можете узнать все о сайтостроении. А сегодня я вам расскажу, какие нужны теги для создания каркаса сайта.

Что такое каркас

Под каркасом (скелетом) понимаются самые основные блоки, которые разделяют содержимое друг от друга. Самый простой пример: шапка – блок слева – блок справа и подвал (футер). В этих блоках в свою очередь может быть очень много других, вложенных элементов, но они уже являются дополнительной разметкой, которая добавляется на втором этапе.

Как его создать

Итак, мы рассмотрим все теги, которые вам могут для этого пригодиться. Начнем с самых базовых.

<html> — самый главный контейнер, в который помещается вся страница. Собственно, сегодня его можно даже не писать, и без него все будет замечательно работать, но ради соблюдения правил можно и написать.

<head> — важный контейнер для хранения информации, которая не будет выведена на страницу, но играет большую роль в ее формировании.

Теги для создания каркаса сайта

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<body> — сюда помещают все тело страницы, то есть ее содержимое, поэтому его наличие в коде обязательно.

Важные настройки, которые обязательно должны быть определены

Итак, под основой сайта лично я понимаю не только то, что вы видите непосредственно своими глазами, но и те куски кода, которые помогают содержимому выводиться правильно. Одной из таких строчек является — <!DOCTYPE html>, она определяет тип страницы и ее нужно поместить даже не в head, а в самое начало, перед глобальным контейнером. Таким образом мы укажем, чтобы наша разметка интерпретировалась по стандарту html5.

Все остальные настройки указываются в блоке head. Это кодировка, подключение таблиц стилей, скриптов (хотя их можно подключать и в конце body), задание тайтла (Title), других мета-тегов и многое другое.

Создание каркаса старым способом на HTML4

Совсем до недавних пор это был самый популярный способ, даже сегодня, я думаю, некоторые продолжают его использовать. Он заключается в том, что все элементы создаются одинаково – с помощью тега div, который обозначает пустой блочный контейнер. В зависимости от расположения и роли, каждый такой блок получал свой идентификатор, чтобы к нему можно было обратиться позже через стили.

Таким образом, разметка выглядела примерно так:

<div id = "header"></div> <div id = "main"></div> <div id = "sidebar"></div>

<div id = "header"></div>

<div id = "main"></div>

<div id = "sidebar"></div>

Разработчики ориентировались по названиям идентификатором, именно они позволяли определить, что представляет собой элемент. Таким образом, использовался всего один тег для создания структуры сайта – div, только с разными id (или стилевыми классами).

Как создать разметку страницы по новому на HTML5

Теги для создания каркаса сайта

Новая версия языка разметки сильно изменила этот процесс. Начиналось все с того, что веб-разработчики начали осознавать необходимость создания новых тегов. Шапку так часто называли div id = «header», что разумно было создать специальный элемент header, который был бы предназначен именно для этого элемента на сайте.

Собственно, именно это и произошло, только помимо header появилась еще масса других. Давайте я покажу пример каркаса на HTML5, а потом уже его объясню:

<header id = "main-header"></header> <nav id = "main-nav"></nav> <section id = "main"> <h2></h2> <article></article> </section> <aside id = "sidebar"></aside> <footer></footer>

<header id = "main-header"></header>

<nav id = "main-nav"></nav>

<section id = "main">

<h2></h2>

<article></article>

</section>

<aside id = "sidebar"></aside>

<footer></footer>

Как видите, идентификаторы по-прежнему прописываются элементам, но теперь у нас в самых названиях тегов заложена роль элементов. Так, nav создан для вкладывания в него важных ссылок, а по сути, создания главного меню сайта. Section – это отдельная секция на сайте, со своим заголовком и главной мыслью.

Aside – что-то вроде второстепенной информации, поэтому некоторые в этот элемент вкладывают боковую колонку. Хотя для этой цели годится и section, ведь сайдбар – по сути, отдельная секция на веб-странице.

Ну и, наконец, новый тег footer создан для вывода подвала. Идентификаторы в этом случае перестали выполнять роль единственных информаторов на странице, хотя их имена подобраны так, чтобы указывать на роль блоков. Заметьте, что шапка получила название main-header и это неспроста. Дело в том, что на веб-странице может быть несколько «шапок». Это может быть шапка статьи или боковой колонки.

Меню тоже получило соответствующий идентификатор, потому что кроме него на сайте может быть и другая навигация, но меньшая по своей важности.

Итак, мы с вами разобрали простейший пример создания скелета, если вы хотите получить больше информации по использованию html5, приглашаю вас посмотреть наши уроки по этой технологии.

Теги для создания каркаса сайта

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Теги для создания каркаса сайта

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Каркас сайта (конструктор шаблонов). Теги разметки / uCozMagazines.ru

Цель урока

В этом уроке мы разметим основные блоки сайта и с помощью фреймворка Bootstrap создадим каркас сайта.

Давайте вспомним прошлый урок. Мы собирались создать каркас сайта, который бы удовлетворял следующему макету:

Теги разметки

Теги разметки подскажут конструктора, где и какой блок будет размещен. Конструктор сгенерирует код шаблонов согласно разметке. Следующие теги помогут разметить каркас сайта.

<!-- <header> -->...<!-- </header> --> Верхняя часть сайта (шапка).
<!-- <footer> -->...<!-- </footer> --> Нижняя часть сайта.
<!-- <container> -->...<!-- </container> --> Левый и/или правый контейнер. Количество контейнеров зависит от стиля дизайна (2х или 3х колоночный).
<!-- <block> -->...<!-- </block> --> Блок, находящийся в теге <!-- <container> -->. Если дизайн блоков во всех контейнерах будет одинаковый, то достаточно сформировать лишь один блок, а второй контейнер создать пустым. Блок имеет два зарезервированных кода TITLE и CONTENT.
<!-- <sblock_menu> -->...<!-- </sblock_menu> --> Статичный блок "Меню". Тоже самое, что и тег <!-- <block> -->, только находящийся за пределами тега <!-- <container> -->. Используется только в тех дизайнах, где блок "Меню" имеет свой персональный дизайн.
<!-- <middle> -->...<!-- </middle> --> Часть дизайна, которая не будет использована в модуле "Форум". Обычно, это центральная часть сайта, находящаяся между Верхним и Нижним блоками.
<!-- <popup> -->...<!-- </popup> --> Блок, формирующий дизайн для страницы "Личные сообщение", а также других страниц, открывающихся в новом окне, имеет два зарезервированных кода [TITLE] и [BODY].

Теперь нам нужно обернуть в эти теги участки нашего кода.

Верхняя и нижняя части сайта (шапка и футер)

Как только мы добавим теги разметки шапки и футера в конструктор, для них будут созданы соответствующие глобальные блоки: $GLOBAL_AHEADER$ и $GLOBAL_BFOOTER$. Что нам это даст:

  • Все шаблоны будут содержать эти коды
  • Дизайн шапки и футера можно будет менять в одном месте, а изменения будут видны на всех страницах сайта

Благодаря этому мы сейчас можем оставить шапку и футер пустыми, главное, чтобы для них были созданы глобальные блоки. Наполнить их мы сможем позже. Вот как выглядит код с разметкой под шапку и футер:

<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Мой первый шаблон на Bootstrap</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="[CSS_URL]" rel="stylesheet">
  </head>
  <body>
    <!-- <header> --><header>тут будет шапка</header><!-- </header> -->
    [BODY]
    <!-- <footer> --><footer> $POWERED_BY$ [COPYRIGHT] </footer><!-- </footer> -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/js/bootstrap.min.js"></script>
  </body>
</html>

В случае с футером, я просто обернул в тег разметки код с копирайтом. А также добавил в него переменную копирайта системы $POWERED_BY$. Если вы не являетесь владельцем пакета с возможностью его отключения, то система не примет каркас при создании шаблона.

Сайдбар

Для разметки сайдбара в конструкторе нам потребуется подготовить для него сетку на Bootstrap следующим образом:

...
 <div>
  <div>Здесь будет сайдбар</div>
  <div>[BODY]</div>
 </div>
...

Теперь добавим разметку сайдбара:

...
<div>
  <div>
   <!-- <container> -->здесь будет сайдбар<!-- </container> -->
  </div>
  <div>[BODY]</div>
</div>
...

Сайдбар состоит из отдельных блоков, таких как поиск, корзина, меню категорий и т.д. Нам необязательно описывать каждый блок. Достаточно обозначить один, чтобы система по его подобию создала остальные. При этом у блока имеются две переменные:

  • TITLE — заголовок блока
  • CONTENT — контент блока

Разметим наш блок:

...
<div>
  <!-- <container> -->
  <!-- <block> -->
   <div>
    <div>TITLE</div>
    <div>CONTENT</div>
   </div>
  <!-- </block> -->
  <!-- </container> -->
</div>
...

В случае, если какой-то из блоков должен быть всегда наверху, это задается с помощью <!-- <sblock_menu> -->...<!-- </sblock_menu> -->:

...
<div>
  <!-- <container> -->
  <!-- <sblock_menu> -->
   <div>
    <div>TITLE</div>
    <div>CONTENT</div>
   </div>
  <!-- </sblock_menu> -->
  <!-- <block> -->
   <div>
    <div>TITLE</div>
    <div>CONTENT</div>
   </div>
  <!-- </block> -->
  <!-- </container> -->
</div>
...

Соберем все вместе и получим:

<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Мой первый шаблон на Bootstrap</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="[CSS_URL]" rel="stylesheet">
  </head>
  <body>
    <!-- <header> --><header>тут будет шапка</header><!-- </header> -->
    <div>
      <div>
        <!-- <container> -->
       <!-- <sblock_menu> -->
        <div>
         <div>TITLE</div>
         <div>CONTENT</div>
        </div>
       <!-- </sblock_menu> -->
       <!-- <block> -->
        <div>
         <div>TITLE</div>
         <div>CONTENT</div>
        </div>
       <!-- </block> -->
        <!-- </container> -->
      </div>
      <div>[BODY]</div>
    </div>
    <!-- <footer> --><footer> $POWERED_BY$ [COPYRIGHT] </footer><!-- </footer> -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/js/bootstrap.min.js"></script>
  </body>
</html>

Контент

Контент (центральная часть) место, где будет размещена основная информация страницы. Мы уже добавили [BODY]. Но в центральную часть также входит и сайдбар. Поэтому нам надо обернуть их в тег разметки:

<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Мой первый шаблон на Bootstrap</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="[CSS_URL]" rel="stylesheet">
  </head>
  <body>
    <!-- <header> --><header>тут будет шапка</header><!-- </header> -->

    <!-- <middle> -->
    <div>
      <div>
        <!-- <container> -->
       <!-- <sblock_menu> -->
        <div>
         <div>TITLE</div>
         <div>CONTENT</div>
        </div>
       <!-- </sblock_menu> -->
       <!-- <block> -->
        <div>
         <div>TITLE</div>
         <div>CONTENT</div>
        </div>
       <!-- </block> -->
        <!-- </container> -->
      </div>
      <div>[BODY]</div>
    </div>
    <!-- </middle> -->

    <!-- <footer> --><footer> $POWERED_BY$ [COPYRIGHT] </footer><!-- </footer> -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/js/bootstrap.min.js"></script>
  </body>
</html>

«Попап»-страницы

Для того, чтобы каркас успешно сформировался мы должны еще описать разметку всплывающих окон. На таких страницах открывается профиль пользователя, личные сообщения, страница редактирования персональной информации. Может вы и не будете их использовать, но описать должны.

Можно ничего не придумывать и просто добавить в конец код следующее:

<!-- <popup> -->
<h2>[TITLE]</h2>
[BODY]
<!-- </popup> -->

Этого будет достаточно для того, чтобы каркас сайта был создан, а страницы во всплывающих окнах отображались корректно.

Итого

Код конструктора шаблонов, который получился у меня:

<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Мой первый шаблон на Bootstrap</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="[CSS_URL]" rel="stylesheet">
  </head>
  <body>
    <!-- <header> --><header>тут будет шапка</header><!-- </header> -->

    <!-- <middle> -->
    <div>
      <div>
        <!-- <container> -->
       <!-- <sblock_menu> -->
        <div>
         <div>TITLE</div>
         <div>CONTENT</div>
        </div>
       <!-- </sblock_menu> -->
       <!-- <block> -->
        <div>
         <div>TITLE</div>
         <div>CONTENT</div>
        </div>
       <!-- </block> -->
        <!-- </container> -->
      </div>
      <div>[BODY]</div>
    </div>
    <!-- </middle> -->

    <!-- <footer> --><footer> $POWERED_BY$ [COPYRIGHT] </footer><!-- </footer> -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/js/bootstrap.min.js"></script>
  </body>
</html>

<!-- <popup> -->
<h2>[TITLE]</h2>
[BODY]
<!-- </popup> -->

Мы готовы создать каркас сайта, а именно сгенерировать шаблоны для всех страниц. Перед тем, как мы сделаем это, убедитесь, что:

  1. Имеется резервная копия шаблона. После создания нового каркаса код прежнего шаблона будет затерт
  2. Все файлы, на которые вы ссылаетесь в коде каркаса загружены на сайт и доступны
  3. Подключены все модули, которые вы собираетесь использовать когда-либо в будущем. Это нужно, чтобы после активации модуля не пришлось заново запускать конструктор шаблонов

Теперь зайдите в панель управления сайтом и в меню выберите «Дизайн» / «Конструктор шаблонов», на открывшейся странице добавить наш код (3) и нажать на кнопку «Посмотреть» (4):

Если шаблон отображается корректно и результат вас устраивает, нажмите на кнопку «Создать шаблоны» и дождитесь окончания операции. После успешного выполнения вы увидите окно со списком модулей, для которых были сгенерированы шаблоны.

Конечно, наш сайт далек от идеала. Но главное, мы смогли разметить контент на сайте. В следующих уроках мы займемся его доработкой.

Задание
  1. Используя теги разметки создайте код для конструктора шаблонов
  2. Скопируйте код, вставьте его в конструктор шаблонов и создайте шаблоны
  3. Оцените результат

Создание каркаса страницы. Табличная, Блочная, Фреймовая верстка

 

 

maket

 

 

Веб – страница представляет собой каркас с дизайном, оформленным при помощи каскадных таблиц стилей (CSS), и заполненный текстом и картинками.

Каркас в свою очередь, может быть построен одним из способов (верстки страницы), а именно:

 

  • - табличным; 
  • - блочным; 
  • - фреймовым; 
  • - комбинированным.

Табличная верстка – метод верстки документов при помощи HTML, где в качестве основы для местоположения текстовых документов и графики применяются таблицы.

 Блочная верстка – метод верстки страницы с применением блоков и CSS. Блоку задаются параметры (рамка, цвет, поля, отступы и др.), а содержимым блока может быть любая информация.

Фреймовая (рамка) верстка – подобна табличной верстке, но более универсальна. Фрейм это законченный отдельный HTML-документ, входящую в общую структуру страницы, и может быть отражен совместно с другими HTML-документами, в браузере.

Комбинированный способ верстки – это использования всех перечисленных методов верстки применительно к одной странице сайта

Для начинающего веб – мастера наиболее прост и доступен комбинированный способ верстки страниц сайта. Когда при помощи визуального редактора Adobe Dreamweaver создается веб – страница.  На этой странице производится верстка:

  • создается таблица с необходимыми колонками и столбцами;
  • создаются блоки внутри ячеек; 
  • заполняются содержимым таблицы и блоки;
  • оформляется дизайн страницы при помощи каскадных таблиц стилей (CSS).

Наиболее популярными при верстки страниц сайта на данное время являются создание двух - колоночный страницы и трех - колоночной структурной страницы. При помощи табличной верстки можно создавать страницы сайта различной структуры и любой сложности. Но вначале этапа верстки все – таки лучше идти от простого к сложному.tabstruktura

Преимущества создания сайта комбинированным способом и его дизайна при помощи каскадных таблиц стилей (CSS), по сравнению HTML, имеют место существовать.

Типовая страница сайта(разметка)  состоит из отдельных блоков: заголовка, правой и левой части, середины и нижней части, а также их различных комбинаций.  Блоки можно сформировать при помощи тэгов table и div, и эти блоки могут иметь фиксированный тип (размер задается в пикселях), или изменяемый (в процентах).
 

 

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

Делаем свой сайт html.

Урок 15.

Данный урок является заключительным в курсе "html для начинающих". На сегодняшний день Вы уже обладаете базовыми знаниями языка html. Опираясь на полученную информацию из предыдущих 14 занятий, мы сейчас сделаем небольшой сайт.

К концу этого урока у нас должен получиться такой сайт. Аналогичный сайт Вы уже сейчас можете сделать самостоятельно. В этом уроке я лишь продемонстрирую, как всю полученную информацию из 14 уроков грамотно объединить в одно целое (сайт).

Наш первый сайт будет состоять из файлов с которыми мы работали на прошлом уроке. Если у Вас не осталось всех файлов с 14-го урока, то скачайте их по ссылке.

После скачивания, во всех четырех файлах (index.html, audi.html, bmw.html, mercedes.html) удалите весь код, кроме тегов входящих в структуру html страницы. Папку image не трогайте, она остается без изменений.

Каркас страниц сайта.

Мы начнем создавать наш сайт с редактирования файла index.html, откройте его в Notepad.

Основной каркас страниц мы сделаем с помощью табличной верстки (урок 10, 11). В основе нашего сайта будет таблица с тремя строками. В первой строке таблицы будет писаться заголовок страницы. Во второй строке сделаем две ячейки, в одной из них будет меню, в другой фото. В третьей строке таблицы будет текст.

Каркас нашего сайта будет выглядеть так:

В каждую из ячеек таблицы вписаны слова помощники (заголовок, меню, фото, текст). Таблица без контента (текста) не отображается, даже если код таблицы написан верно. В каждой из ячейки должен быть хотя бы один символ. Если мы не впишем эти слова, то таблица не будет отображаться.

Пояснения к коду:
1) Для тега &lttable&gt мы задали атрибут border со значением 1, тем самым задав границы для таблицы. Атрибут cellspacing со значением 0, означает, что отступы между ячейками таблицы равны 0, то есть их нет. С помощью атрибута align и его значения center, мы выравниваем нашу таблицу по центру страницы. Атрибутом width со значением 750px мы задали ширину таблицы 750 пикселей. Высоту (атрибут height) можно не прописывать, так как у нас будет задана высота для каждой отдельной строки таблицы.

2) Теперь несколько слов о строении таблицы. Максимальное количество ячеек у нас в средней строке (2шт.) Это значит, что по правилам объединения, в каждой строке таблицы у нас должно быть по две ячейки (11 урок). Строение нашего сайта подразумевает, что в первой и третьей строках таблицы по одной ячейке. По этому для этих ячеек будет прописан атрибут colspan со значением 2. Благодаря этому атрибуту мы объединяем 2 ячейки в одну.

3) Для первой строки &lttr&gt мы задали высоту (height) 70px. В первой строке содержится одна ячейка &lttd&gt объединяющая в себе две ячейки. По этому для нее задан атрибут colspan со значением 2. Также для этой ячейки мы прописываем атрибут align и даем ему значение center, благодаря которому, текст написанный в этой ячейке будет выравниваться по центру. То есть заголовок который мы пишем, будет отображаться посередине ячейки.

4) Вторая строка содержит в себе 2 ячейки (меню и фото). В нашем сайте будут использованы фотографии, все они имеют размер 600x400 пикселей, по этому, чтобы все было ровно, мы задаем высоту нашей строки равную высоте фотографий, это значит 400px. Ширина всех фотографий 600px, по этому для второй ячейки &lttd&gt, где будет фото, мы задаем ширину 600px. Общая ширина таблицы у нас 750px, а ширина 2-ой ячейки средней строки 600px. Соответственно 1-ая ячейка средней строки будет иметь ширину 150px.

5) Для третьей строки &lttr&gt в которой будет текст, мы задали высоту 150px. Эта строка, как и первая строка, содержит в себе одну ячейку, которая объединила в себе две. По этому для этой ячейки &lttd&gt задан атрибут colspan со значением 2.

С составлением каркаса сайта мы закончили. Он будет одинаковый для каждой страницы сайта, по этому весь код со страницы index.html (в которой мы сейчас работали) мы копируем и вставляем в другие 3 файла нашего сайта (audi.html, bmw.html, mercedes.html).

Наполняем сайт контентом.

Структура сайта создана, теперь мы заполним контентом наши 4 страницы. Давайте начнем с audi.html.

1) Начнем мы с написания заголовка страницы. Заголовок прописывается с помощью тега &lth2&gt (6 урок).
На фото изображена только рассматриваемая часть кода страницы (1-ая строка &lttr&gt):

2) Теперь мы разместим меню в 1-ой ячейке 2-ой строки. Меню у нас будет состоять из 4 ссылок. Это ссылка на главную страницу (index.html) и 3 ссылки на страницы с марками авто.
На фото изображена только рассматриваемая часть кода страницы (1-ая ячейка &lttd&gt 2-ой строки &lttr&gt):

Для того, чтобы меню было расположено в столбик, после каждой ссылки в конце строки мы ставим тег &ltbr&gt отвечающий за перенос строки. Если Вы не поняли каким образом будут работать эти 4 ссылки, то перечитывайте 13 урок.

3) Сейчас мы вставим фотографию во 2-ую ячейку 2-ой строки. Мы редактируем страницу audi.html, соответственно добавляем фото автомобиля ауди. Если Вы забыли, то напомню, наши 4 фотографии лежат в папке image.
На фото изображена только рассматриваемая часть кода страницы (2-ая ячейка &lttd&gt 2-ой строки &lttr&gt):

4) Теперь у нас осталась одна не заполненная нижняя строка, в нее мы добавляем текстовое описание марки Audi. Текст который мы будем использовать в описании марок автомобилей, находится по этой ссылке.
На фото изображена только рассматриваемая часть кода страницы (3-я строка &lttr&gt):

Весь наш текст заключается в тег &ltp&gt. Если забыли, что это за тег, смотрите урок 6.

5) Страница почти готова. Для того чтобы наше творчество стало больше похоже на сайт, давайте зададим цвет фона страницы. Для этого тегу &ltbody&gt мы прописываем атрибут bgcolor и даем значение grey. Цвет фона стал серый. Теперь давайте зададим цвет фона нашей таблицы, для того чтобы она не сливалась с основным серым фоном страницы. Сделаем таблицу белой, для этого тегу &lttable&gt мы прописываем атрибут bgcolor и даем ему значение white.
На фото изображена только рассматриваемая часть кода страницы:

Если Вы все сделали верно, то при открытии через браузер, файл audi.html будет выглядеть так:

Теперь аналогичным образом пропишите код для страниц index.html, bmw.html, mercedes.html. На страницах будет меняться заголовок, фотография и текст. В результате должен получиться сайт из 4-ех страниц.

Если что-то не получилось, Вы можете скачать этот сайт по ссылке. Имея правильный вариант, Вы легко разберетесь в своих ошибках.

Вы что-то не поняли из этого урока? Спрашивайте!
- [email protected]

ВАДИМ, ТЫ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГ, Я ХОЧУ ОТБЛАГОДАРИТЬ ТЕБЯ

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *