Пример создания сайта в блокноте

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

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

В примере будет использоваться html код с использованием css, дабы не усложнять жизнь.

Сайт, который мы создадим

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

Содержимое папки с сайтом

Начинаем работать с index.html, откроем файл в текстовом редакторе (блокноте), я буду использовать бесплатную программу Nodepad++.

Базовая структура файла должна быть следующая. (Весь код будет представлен в виде изображений, в конце статьи будет ссылка на исходники).

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

<!DOCTYPE html> - обозначает интерпритатору, что это html документ написаный с применением технологий html5, можно опустить, работать будет, советую писать.

<html lang="ru"> - начало html документа, lang="ru" - язык документа русский.

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

<title>Заголовок страницы</title> - заголовок страницы, то что написано на вкладке в браузере.

<meta charset="windows-1251"> - кодировка страницы, обратите внимание, что кодировку можно устанавливать несколькими способами, этот способ не самый приоритетный.

</head> - закрытие служебной части кода.

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

</body> - закрывающий тэг тела страницы.

</html> - окончание html документа, если вы что-то напишите после него, то оно так же отобразится на странице, делать этого я не рекомендую, т.к. вы нарушите структуру DOM'a.

Начнем создавать наш сайт, установим фоновое изображение с помощью css.

Между тэгами <style></style> можно писать любой css код, в css мы углубляться не будем, сделаем по максимуму без его использования.

Тэгу <body> мы установили фоновое изображение указав путь до изображения, указали, что изображение не должно копироваться если оно меньше разрешения экрана, смещение по горизонтали 50%,

по вертикали 10%.

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

Создаем единый блок с идентификатором "wrapper", в котором создаем два блока, для логотипа и меню. В блоке для логотипа подключаем изображение с помощью конструкции <img src="" />, если изображение не загрузится по каким то причинам, например у пользователя отключен показ, то будет отображен альтернативный текст помещенный в атрибут alt="".

Для создания меню используется список, существует несколько видов списков.

Для того, чтобы обратится к идентификатору через css, необходимо перед названием поставить знак #, для того, чтобы обратиться к классу - ".". Можно использовать идентификатор и класс с одинаковыми именами, но не советую этого делать т.к. велика вероятность запутаться.

Идентификатору #wrapper мы указываем, сделать отступ сверху 100 пикселей и слева 90.

Далее опускаем меню на 100 пикселей от логотипа вниз, за это отвечает класс .menu.

Оформляем наши пункты меню в .sf-menu li a, построчно разберем что там написано:

display: block; - отображение как блочного элемента, нужно для того, чтобы был кликабелен весь блок, а не только слово, попробуйте без этого свойства и вы поймете о чем я.

color: #fff; - цвет текста белый.

font-size: 24px; - размер текста 24 пикселя.

font-weight: bold; - жирный шрифт, это свойство отвечает за вес шрифта, измеряется от 100 до 600, с шагом в 100.

text-decoration: none; - убираем подчеркивание ссылок.

list-style: none; - слева от пунктов списка по умолчанию стоят точки, это свойство убирает их.

background: #000; - черный фон.

padding: 12px; - внутренние отступы со всех сторон по 12 пикселей.

width: 250px; - ширина 250 пикселей.

margin-top: 5px; - отступ сверху 5 пикселей, делаем отступы между пунтами меню.

Конструкция .sf-menu li a:hover отвечает за действие при наведении на элемент списка, в нашем случае мы делаем цвет текста черный, а фон белый.

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

Код css можно было (и желательно) вынести в отдельный css файл, но в рамках данного урока этого будет достаточно, понятно что я не сумею уложить все знания по html и css в одну статью, поэтому если появятся вопросы - пишите в комментарии, на все вопросы ответим.

P.S. Убедительная просьба, кликните "рассказать друзьям" - это проще чем написать сайт ;-) Спасибо!

Источник: www.itcenter.me

Категория: Онлайн-шоппинг

Похожие статьи: