Урок 1. Основы HTML и CSS | Как начать верстать шаблон.

html na oranzhevom fone

Решил написать курс по вёрстке шаблонов сайта в среде HTML и CSS.

Что такое HTML и CSS вы можете узнать пройдя по ссылке  HTML и CSS.

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

Для наглядности скриншот кода в блокноте.

kod html v bloknote

И по смотрите на этот же самый код, но уже в редакторе Brackets.

kod html v brackets

Разница на лицо.

Для изучения и работы в HTML, вам за глаза хватит редактора Brackets. Что бы его скачать, наберите в любом поисковике Brackets, ну а дальше вы разберётесь.

Теперь немного теории:

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

А начнём мы с вами с того, что создадим на рабочем столе папку. Которую можно назвать к примеру my site. Название можно задать любое. В этой папке и будут располагаться  файлы нашего сайта. А теперь давайте начинать создавать сами файлы, так сказать тело сайта.

Открывайте вашу новую папку для сайта, затем нажмите на правую кнопку мыши, далее создать, далее текстовый документ. Таким образом мы создали стандартный документ приложения блокнот. Затем открываем его, переходим во вкладку файл, и далее сохранить как… перед вами появится окно, в котором надо задать имя файла, тип файла, и кодировку.

projenie bloknot zamena imeni

В строчке имя файла: удаляем всё полностью, и пишем index.html в строчке тип файла: выставляем значение все файлы (*.*)  в строчке кодировка: ставим значение UTF-8. После чего у вас должно получится вот так.

prilojenie bloknot zamena iment 2

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

papka s saitom i failom

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

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

Откройте этот файл теперь в блокноте. Это можно сделать несколькими способами. Откройте блокнот, и перетащите файл в окно блокнота, либо нажмите на файл правой кнопкой мыши, далее открыть с момощью далее блокнот.

А сейчас давайте напишем в нём любой текст, например это мой сайт. Далее сохраните этот файл, и запустите его из папки что бы он открылся в вашем браузере. Что мы видим теперь? Правильно! В окне открывшегося браузера мы видим нашу надпись  это мой сайт. Вот таким образом это всё и работает. А что бы увидеть в окне браузера не надпись, а готовый сайт, нам нужно в фаил index.html записать код сайта. Как это сделать и какой код там нужен, мы рассмотрим в следующем уроке.

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

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

Например на моём блоге, в файле index.html располагается главная страница блога. Если в поисковом окне вашего браузера ввести адрес моего сайта one-blog.ru, ваш браузер обратится именно к файлу index.html на моём сервере, в результате чего из этого файла в ваш браузер загрузится главная страница моего блога. А вот страница моего блога услуги уже находится в другом файле. Который называется uslugi.html и сколько будет страниц на вашем сайте, столько же будет подобных файлов в папке вашего сайта.

Если у вас остались вопросы, задавайте их в комментариях. Постараюсь помочь.

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

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