Пошаговая инструкция создания сайта на html коде

Возникнут вопросы, замечания, пожелания, пожалуйста, обращайтесь!

С чего начать создание сайта

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

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

  Читать дальше

Установка Денвера

Если программа Денвер уже скачена с официального сайта по ссылке в статье "С чего начать", приступим к ее установке на свой компьютер.

1. Запускаем процесс, дважды щелкнув левой клавишей мышки по скаченному файлу.

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

  Читать дальше

Установка Notepad++

Программу Notepad++ можно скачать по ссылке в статье "С чего начать".

Делаем два щелчка левой клавишей мышки по скаченному файлу программы и запускаем процесс установки.

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

1. Нажимаем "Запустить":

  Читать дальше

Локальный хостинг

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

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

  Читать дальше

Структура сайта

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

  • 1. Верхняя часть - ШАПКА сайта- header;
  • 2. 1-ая колонка, широкая - для контента сайта - content;
  • 3. 2-ая колонка, узкая - боковая панель сайта - sidebar;
  • 4. Нижняя часть - ПОДВАЛ сайта - footer.
  •   Читать дальше

    Главная страница сайта

    Первая страница любого сайта, она же Главная, создается с помощью файла, который всегда называется "index" и имеет расширение ".html" для первого варианта и ".shtml" или ".php" для второго варианта внутренней структуры сайта, о которых я рассказала в предыдущей статье "Структура сайта".

    Так как мы рассматриваем первый вариант, то файл для главной страницы сайта будет называться "index.html"

      Читать дальше

    Знакомство с HTML

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

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

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

      Читать дальше

    Разметка файла страницы сайта

    В этой статье расскажу и покажу как устроены файлы страниц сайта, из каких постоянных частей они состоят, и что за чем следует.

    Откроем файл нашего сайта index.html в программе Notepad++ и сделаем первые записи разметки.

    Все файлы страниц сайта всегда начинаются со следующей вступительной записи:

    <!DOCTYPE html>

    В ней сообщается, что документ содержит код HTML. Эта запись предназначена для интернет-роботов и не отображается на страницах сайта.

      Читать дальше

    Видимая часть сайта

    Страница сайта

    Шапка сайта

    Две колонки сайта

    Контент сайта

    Подвал сайта

    Картинки на сайте

    Невидимая часть сайта

    Верхнее меню сайта

    Вторая страница сайта

    Переходы со страницы на страницу сайта, создание ссылок

    Изменение внутренней структуры сайта

    Перенос свойств стиля в отдельный файл CSS

    Перенос свойств стиля контента в файл CSS

    Перенос свойств стиля шапки сайта в файл CSS

    Перенос свойств стиля подвала сайта в файл CSS

    Форма подписки на рассылку новостей сайта

    Файл отправки данных из формы подписки на почту