Шаблон простого сайта на HTML
Если вам нужно быстро сделать сайт на учёбе или для личных дел, используйте этот шаблон. Вы можете наполнить его чем угодно — добавить тексты, картинки или подключить любые стили, например, использовать Bootstrap или awsm.css. Как больше нравится.
Чтобы посмотреть, как сайт из шаблона будет выглядеть — скопируйте его по инструкции или скачайте и откройте в браузере.
Это мой сайт
Он хороший
Первая секция
Она обо мне
Но может быть и о семантике, я пока не решил.
Вторая секция
Она тоже обо мне
И третья
Вы уже должны были начать догадываться.
Короткий разбор
Если у вас есть немного времени, давайте посмотрим на код и поймем, из чего состоит сайт, и зачем нужна каждая строчка.
Доктайп помогает браузеру понять, как отображать страницу.
Тег, в котором мы показываем, что наша страница на русском языке.
Называем кодировку страницы — для русского языка подходит utf-8 .
Магия, которая помогает нашему сайту выглядеть чуть лучше. Она просто нужна, можете пока не задумываться.
Подключаем файл со стилями — замените ./styles/style.css на имя вашего файла со стилями. Если ничего не работает или файл не видно, прочитайте про относительные ссылки.
В этом блоке напишите, какой заголовок, описание и ссылка будут видны на карточке в ленте, если ваш сайт кто-нибудь запостит в соцсетях.
Это шапка сайта — блок, который может повторяться на любой странице.
Это заголовки первого и второго уровня.
Это мой сайт
Первая секция
Семантический тег, в нём хранится основное содержимое страницы, которое относится только к этой странице.
Изображение, картинка или фотография. Обязательно с атрибутом alt — он важен, не забывайте о нём.
Параграф текста — здесь пишем просто какой-то текст, который хотим вынести на страницу. Подробнее — в тренажёре.
Но может быть и о семантике, я пока не решил.
Если захотите подключить JavaScript и добавить интерактивные элементы, можете сделать это в этом блоке — достаточно раскомментровать.
На этом всё, дорабатывайте шаблон по своему усмотрению. Например,
Удачи в обучении!
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Мои личные шаблоны-заготовки для создания верстки блога/сайта
В этой статье я расскажу, как я верстаю сайты. В конечном итоге, кроме знаний, у вас появятся еще готовые макеты-шаблоны для верстки сайтов. Считаю, что выгодным преимуществом этих шаблонов является их простота и легкость использования. Итак, по какому принципу я верстаю сайт или блог?
1). В самом начале я рисую макет в Photoshop:
2). Приблизительно мысленно макет разбиваю на блоки. Для тех, кто не в курсе, что такое блоки в CSS, закрывайте эту страницу и вперед к изучению основ CSS и HTML.
1 – корпус сайта (site-blok);
2 – шапка сайта (header);
3 – меню верхнее (menu);
4 – блок контента (blok-content);
5 – левый блок (blok-left);
6 – правый блок (blok-right);
7 – подвал (footer)
Вот по такой схеме я разбиваю макет.
Если тяжело макет разбивать на блоки мысленно, рисуйте схему на бумаге, так, как это, например, делал я поначалу:
Теперь можно приступить к созданию блоков в файле HTML.
Поочередно, так как на схеме, прописывайте классы к блокам. Вот такая схемка получилась у меня:
Пока что результат будет вот таким:
Согласен, смотрится не очень. Переходим к CSS стилям.
Внимание: Рекомендую ко всем блокам прописывать рамки, чтобы видеть границы блоков ( border:1px solid #000; ).
.site-blok < border:1px solid #000; /* граница сайта */ >.header < border:1px solid #000; /* граница сайта */ >.menu < border:1px solid #000; /* граница сайта */ >.blok-content < border:1px solid #000; /* граница сайта */ >.blok-left < border:1px solid #000; /* граница сайта */ >.blok-right < border:1px solid #000; /* граница сайта */ >.footer < border:1px solid #000; /* граница сайта */ >
Результат будет вот таким:
Далее выравниваем все блоки, задаем цвет, размеры и отступы.
Указываем стиль для текста и ссылок.
Добавляем фоновую картинку и тень к блокам.
Удаляем ненужные рамки.
Вот абсолютно готовый код:
Вот такой простенький сайтик получился благодаря блочной верстке. Надеюсь, мой способ верстки сайтов вам понравился.
Схему создания блочной верстки, надеюсь, вы поняли и теперь можно выложить готовые макеты.
○ Двухколоночный макет:
* < padding:0; margin:0; >.site-blok < background:#6f0; width:800px; /* ширина сайта*/ height:200px; margin: 0 auto; /* выравниваем сайт по центру*/ padding-top:50px; >.menu < background:#ff0; height:30px; >.blok-content < background:#cbcbcb; height:540px; overflow: hidden; padding:10px 5px 15px 5px; >.blok-left < background:#050; width:550px; /* ширина блока левого*/ height:540px; float:left; /* прижатие блока */ >.blok-right < background:#f50; height:530px; width:200px; /* ширина блока правого*/ float:right; /* прижатие блока */ >.footerBlogGood.ru
