Этим вопросом задавались наверное все пользователи сети интернет и не только. Какже его делают. с чего его делают и все такое. Вот сегодня и пойдет речь о том как сверстать шаблон для простого сайта. Как известно любой сайт не обходится без html разметки. В сети много справочников по html тегам можно найти и скачать бесплатно. И так приступим к реализации первого шаблона сайта на простом html. Для его реализации будим делать трех колончатый стандартный шаблон как на моем сайте.
С чего будет состоять наш шаблон.
1. Хедер англ(header) - значит шапка сайта так и будим писать теги <header></header>
2. Навигация для этих целей в предыдущих версиях html отдельных тегов не существовало, но с появлением html5 теперь мыможем использовать специальный тег для навигации <nav></nav>.
3. Теперь переходим к столбикам сайтовой разметки здесь мы создадим отдельно простую таблицу.
4. Футер англ (footer) - сам низ сайта на котором на большинстве сайтов расположены ссылки с копирайтом. и авторскими правами издателя сайта и многое другое.в html 5 для него существует отдельный тег с одноименным названием <footer></footer>
Поехали создавать.
Теперь для начала создадим простую таблицу. Смотрим ниже html код и пример.
HTML
<table>
<tr>
<td></td>
</tr>
</table>
Как вы видите здесь ничего сложного нет просто таблица с одной строкой в разметке тег <tr> и одним столбцом тег <td>.
Смотрим пример, что получилось.
Это просто таблица
Здесь я немного для видимости добавил толщину граници.
Смотрим исходники
HTML
<table width="39%" border="3" cellspacing="3" cellpadding="3">
<tr>
<th scope="col">Это просто таблица</th>
</tr>
</table>
Как видите это код именно таблици с примера. Далее нам необходимо создать шапку сайта нашего тоесть header. В таблице после тега <td> запишим открывающийся и закрывающийся теги <header> и </header>
И так теперь просмотрим сам код исходный того что вы видите здесь.
HTML
<table width="39%" border="3" cellspacing="3" cellpadding="3">
<tr>
<th scope="col">
<header>Это наша шапка сайта</header><br />
Это просто таблица</th>
</tr>
</table>
Как видите здесь я добавил тег переноса для лучшей видимости происходящего. Продолжаем делать шаблон теперь нам необходимо создать таблицу в таблице с одной строкой и тремя колонками. Выглядеть это будит так.
Здесь как вы видите я также добавил толстый бордюр для того чтобы было наглядней видно где. что находиться. Теперь давайте просмотрим исходный код.
HTML
<table width="39%" border="3" cellspacing="3" cellpadding="3">
<tr>
<th height="138" scope="col">
<p>
<header>Это наша шапка сайта</header>
<br />
</p>
<table width="100%" height="78" border="3" align="center" cellpadding="3" cellspacing="3">
<tr>
<th width="28%" valign="top" scope="col">Левая колонка</th>
<th width="44%" valign="top" scope="col">Центр</th>
<th width="28%" valign="top" scope="col">Правая колонка</th>
</tr>
</table>
</th>
</tr>
</table>
Так понятней будет, я думаю далее нам необходимо создать последнюю часть сайта это footer, после внутренней таблици вставим тег с одноименным названием <footer> и </footer>.
Вот в принципе и первый дизайн готов, сейчас просмотрим исходный код увиденного.
HTML
<table width="39%" border="3" cellspacing="3" cellpadding="3">
<tr>
<th height="138" scope="col">
<p>
<header>Это наша шапка сайта</header>
<br />
</p>
<table width="100%" height="78" border="3" align="center" cellpadding="3" cellspacing="3">
<tr>
<th width="28%" valign="top" scope="col">Левая колонка</th>
<th width="44%" valign="top" scope="col">Центр</th>
<th width="28%" valign="top" scope="col">Правая колонка</th>
</tr>
</table>
<footer>Это наш футер </footer>
</th>
</tr>
</table>
Вот и весь код здесь для начала ничего сложного нет, далее необходимо создать стили для него вставить фото, рамки, или фон и так далее зависит от вашей фантазии. Вот так вот и делаются в основном все сайты. Если что не понятно пишите в комментариях, задавайте вопросы, если полезная статья можно проголосовать, поставить оценку данному материалу ниже.