Наверняка, раз вы читаете эту статью, вы думали о самостоятельном создании сайта.
Во всемирной паутине есть множество руководств, уроков, курсов, но 99% из них предназначены для людей, у которых хотя бы минимальное представление об этом уже имеется.
Я представляю вам серию лекций для начинающих - "Создание сайтов от А до Я". Если вы хотите делать сайты, но совершенно ничего не понимаете в программировании, эти статьи для вас.
Ближе к середине обучения у вас будет полноценный сайт в интернете.
В первой статье я хочу показать вам то, что находится по ту сторону монитора от сайта.
Сегодня мы сразу создадим страницу для браузера, а так же посмотрим как устроены страницы, которые уже есть в интернете.
Создаем папку для будущих проектов и понятно ее называем. (Лучше на английском, - весь цикл статей мы будем использовать английский язык в программировании).
У меня это будет папка Projects на диске D. Далее я буду создавать папки (каталоги) с номером соответствующей статьи. Каталог Learn 1. Разумеется, что вы можете называть каталоги как угодно, главное - не запутайтесь.
Здесь создадим текстовый документ:
Обратите внимание на то, что расширение файла (.txt) должно быть доступно для изменения.
Проверьте это в Панели управления - Параметры папок - вкладка Вид.
У меня это выглядит так (Windows 7):
Здесь необходимо снять флаг. ОК.
У вас может выглядеть так:
Возвращаемся к созданному документу и переименовываем его в index.html (убираем все старое содержимое в имени, включая .txt) Индексная страница - приоритетная страница при загрузке сайта и является представителем любого раздела сайта.
Предположим, что у нас есть несколько страниц в одном каталоге (Learn 1) и, соответственно, файлы для них: index.html, page2.html. Если расположить эти файлы на сервере сайта, то при обращении к каталогу /Learn 1/ начнется поиск индексного файла (index.html) и в случае его отсутствия будет показана ошибка 404. Это общие правила программирования сайта и мы на них повлиять не можем.
После переименования текстового документа, он, вероятно, поменяет свой значок:
Это говорит о том, что вы сделали все правильно.
Откроем этот файл в браузере:
Не пугайтесь того, что видите просто белый фон, - мы на верном пути, ведь нашу страницу мы просто еще ничем не наполнили.
Вернемся к нашему файлу и отредактируем его при помощи текстового редактора:
Сегодня мы обратим внимание только на самое главное, на то, как происходит отображение страницы в интернете.
Практически на всех сайтах визуальное решение (то, что мы видим на странице) строится на языке HTML (HyperText Markup Language).
Файл index.html при запуске сообщает своим именем браузеру о том, что он индексный (главный) и о том, что в нем содержится html-разметка.
Разметка - потому что куски кода html (теги) отвечают в основном только за визуальное расположение какого-либо объекта.
В любом языке программирования присутствуют обязательные условия для работы. Для того, чтобы Гугл Хром или любой другой браузер понял что мы от него хотим, необходимо указывать эти условия.
Звучит довольно непонятно, но на деле все гораздо проще. Поместим в наш файл такой код:
<html>
<title>Заголовок вкладки</title>
<body>
<h1>Заголовок страницы</h1>
<p>Текст в абзаце. Текст для примера.</p>
</body>
</html>
Сохраним документ через меню, либо, как делаю я, используем сочетание клавиш Ctrl + S.
Все приготовления готовы. Переходим в браузер к пустой странице и обновляем ее:
Первый результат мы наблюдаем мгновенно. Не плохо, правда?
Разберем наш первый кусок кода:
<html> - обязательный тег, который сообщает браузеру о наличии html-разметки в файле.
<title>Заголовок вкладки</title> - необязательный тег. Заголовок вкладки браузера.
<body> - обязательный тег. Тело страницы (содержимое).
<h1>Заголовок страницы</h1> - необязательный тег. Заголовок верхнего уровня (самый большой размер заголовка).
<p>Текст в абзаце. Текст для примера.</p> - необязательный тег. Абзац, красная строка.
</body>
</html>
Обратите внимание на то, что каждый тег обязательно должен закрываться. Там, где он закрывается, имеет большое значение.
В основном, мы всегда будем работать в теле страниц, то есть писать код внутри тега <body>.
В нашем коде можно увидеть структуру страницы в целом:
Надеюсь, что вы теперь представляете каким образом работают страницы в интернете и как они устроены.
Давайте сделаем нашу страницу более привлекательной. Для этого мы будем использовать готовый инструментарий языка HTML. Изменим код в нашем файле следующим образом:
<html>
<title>Заголовок вкладки</title>
<body>
<h1 align="center">Заголовок страницы</h1>
<p align="center"><font color="red">Текст в абзаце. </font> Текст для примера.</p>
</body>
</html>
Страница (после обновления) примет следующий вид:
Что мы добавили
align="center" - универсальный параметр (подходит почти для каждого каждого тега), отвечающий за выравнивание элемента. В нашем случае выравнивание текста по центру. Может принимать значения center, left, right.
<font color="red"> - тег, показывающий начало работы с шрифтом. В нашем случае шрифт становится красного цвета.
Обратите внимание на то, что правила на шрифт не распространяются после закрытого тега </font>.
Необходимо соблюдать не только структуру всего документа, но и структуру тегов:
Все изменения в коде вступают в силу после сохранения документа. Для того, чтобы увидеть изменения на странице, ее необходимо перезагрузить (обновить).
Проведите несколько изменений самостоятельно:
- Текст заголовка страницы выровнять по левому краю;
- Окрасить заголовок в синий цвет;
- Выровнять абзац по левому краю;
- Окрасить вторую часть абзаца в красный цвет;
Как устроены страницы, которые уже есть в интернете?
В качестве примера возьмем сайт yandex.ru - в любом месте нажмем правую кнопку мыши, либо кнопку F12, либо сочетание клавиш Ctrl + Shift + I и попробуем увидеть разметку Яндекса:
Появится окно просмотра разметки страницы:
Видите что-нибудь знакомое? Здесь вы можете оценить сложность разметки у Яндекса. Как вы видите, принцип построения страниц одинаковый, - меняется только набор параметров в тегах и количество самих тегов.
Вы можете поэкспериментировать в этом окне: поменяйте код, удалите несколько тегов. Посмотрите как изменится страница Яндекса.
Не переживайте, вы ничего не испортите. Окно, в котором вы работаете, предназначено для отладки сайта (проверки работы) и работает только на стороне вашего компьютера. Каждый раз при обновлении страницы Яндекса она будет возвращаться в исходное состояние. Попробуйте.
Подведем итоги
Мы создали первую html-страницу, с которой будем экспериментировать в следующих лекциях.
Мы узнали, что для отображения страницы и объектов на ней необходимо использовать специальные теги.
Мы узнали как задавать параметры тегам и их некоторые свойства.
Мы узнали, что Яндекс тоже использует язык разметки для своих сайтов.
Мы узнали как проверять работу страницы в браузере.
Поздравляю!
Сегодня вы сделали первый шаг в программировании и положили начало своему будущему сайту.