Сайт состоит из папок и файлов. Как правило, главный файл называется index.html. Расширение .html означает, что в этом файле находится HTML-код. В дальнейшем Вы будете открывать файл index.html в браузере, и браузер по расширению .html будет понимать, что ему нужно обработать именно HTML-код.
Давайте создадим простейшую структуру для нового сайта. Она будет выглядеть так:
Создайте на компьютере (только не на рабочем столе) папку, назовите ее store (переводится "магазин"). В ней создайте файл index.html — для этого создайте текстовый документ и просто полностью переименуйте его в index.html. Теперь в папке store создайте папку css, а в ней создайте файл style.css.
Сразу скажу, что файл index.html здесь главный. Именно его нужно будет потом открыть в браузере. В файле style.css будут находиться CSS-стили, с помощью которых будут заданы цвет для шрифта, размер шрифта, цвет фона, размеры картинок и другие параметры для внешнего оформления сайта. Для того, чтобы эти стили сработали для данного сайта, в index.html будет ссылка на style.css. Таким образом, когда Вы откроете index.html в браузере, Ваш браузер начнет обрабатывать HTML-код и, когда браузер встретит ссылку на style.css, он возьмет из этого style.css все CSS-стили и применит их к сайту.
На данный момент можно сказать, что в index.html будет находиться содержимое: текст, картинки. А в style.css будет находиться всё внешнее оформление: в какой цвет покрасить, какой размер задать и т.д.
Для разработки Вам необходим редактор SublimeText. Скачайте его за считанные секунды на официальном сайте sublimetext.com и установите. Это займет меньше 1 минуты.
Откройте Ваш index.html в редакторе SublimeText и вставьте следующий код:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Store</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> </body> </html>
Посмотрите на этот код. В строке <link rel="stylesheet" type="text/css" href="css/style.css"> как раз указывается ссылка на style.css (link переводится как "ссылка"). Здесь путь до style.css указывается в атрибуте href. В данном случае "css/style.css" это относительный путь, то есть путь относительно главного файла index.html (по этому пути браузер перейдет из index.html в папку css, а потом благодаря слеш перейдет в сам файл style.css).
То есть еще раз. Когда Вы открываете файл index.html в браузере, браузер начинает обрабатывать HTML-код сверху вниз. Когда он встречает строку <link rel="stylesheet" type="text/css" href="css/style.css">, он (браузер) благодаря кусочку кода href="css/style.css" переходит в папку css и находит в ней файл style.css.
Давайте разберем весь вышеприведенный HTML-код. Данный код — это основа основ HTML. То есть весь этот код в обязательном порядке должен содержать любой HTML-файл. Итак, что здесь есть.
Первая строка <!DOCTYPE html> просто сообщает браузеру, что это HTML-код.
Во второй строке открывается тег <html>. Обратите внимание, что закрывается он в самой последней строке кода — </html>. Именно между тегом <html> и </html> находится ВЕСЬ HTML-код. У тега <html> указан атрибут lang, он равен en. Это сделано для того, чтобы браузер сразу понял, что данная страница сайта на английском языке. Когда вы будете делать русскоязычные сайты, то нужно будет указывать lang="ru".
Что такое тег в HTML
Название тега — это только первое слово после открывающей скобки <. То есть в случае с <html lang="en"> тег называется html, а lang — это атрибут тега, en — это значение данного атрибута. Посмотрите внимательно на картинку:
Теги html, head и body
Непосредственно внутри <html></html> могут быть только 2 тега — это head и body. Все остальные теги должны находится уже либо внутри head, либо внутри body.
В head находится только служебная информация, которая никак не отобразится на самом сайте. В head есть только 2 тега, которые отобразятся в браузере, но не на самом сайте, а на вкладке:
Эти 2 тега — это картинка, которая называется favicon (фавикон), и заголовок страницы. Про фавикон я расскажу позже. А заголовок страницы в нашем коде указан в теге title. В нашем случае этот заголовок — Store.
Еще в <head></head> есть тег <meta charset="utf-8">. Он указывает, что кодировка сайта — utf-8. Об этом можете не задумываться, а просто указывать именно эту кодировку в каждой новой верстке. Раньше были различные кодировки, теперь всегда нужно указывать utf-8.
Также, в head есть тег link со ссылкой на style.css, про который Вы уже знаете.
Тег body служит для того, чтобы помещать в него всё, что нужно отобразить на сайте (тексты, картинки и т.д.).
Теперь, находясь в Sublime Text, нажмите на клавиатуре Ctrl+S, чтобы сохранить изменения в index.html.
На этом про структуру сайта и структуру HTML всё. Переходите к следующему уроку, где Вы уже начнете верстать и познакомитесь с CSS. Следующий урок —"Верстка шапки".
В данном уроке вы узнали
.html — расширение, по которому браузер "понимает", что в файле находится HTML-код.
head — тег для служебной информации сайта.
body — тег для всего содержимого сайта.
title — тег для заголовка страницы сайта.
href — это атрибут, в котором указывается ссылка на файл или другой сайт. Расшифровывается как hyper-reference, что с английского переводится ка "гипер-ссылка". Атрибут href может быть не только у тега link.
Это был последний бесплатный урок. Чтобы получить доступ ко всем урокам зарегистрируйтесь и оплатите курс в личном кабинете. Успевайте сегодня приобрести по предновогодней скидке.
