HTML (HyperText Markup Language) переводится как язык маркировки гипертекстов, это язык на котором пишутся сайты. Он состоит из тегов, которые дают команду браузеру о том, как отображать те или иные элементы сайта. И раздел «Создание сайта своими руками» представляет с собой учебник HTML, в котором я буду как с использованием тегов создаются сайты.
Чтобы отличить теги от обычного текста их принято помещать между одинарными кавычками "<" и ">". И большинство из них парные, то есть каждый открывающийся тег должен закрываться соответствующим тегом, он пишется также, но после открытия кавычки "<" добавляется слеш "/".
Пример:
< тег>Элемент сайта, на который воздействует тег< /тег>
На данном примере, я поставил пробел после "<", на самом деле, его там не должно быть, мне так пришлось сделать, чтобы браузер понимал это как обычный текст, а не команду.
Для изучения вам понадобиться стандартный блокнот, который есть в windows либо редактор HTML, либо универсальный текстовой редактор. Для меня удобен Emeditor, он представляет с собой усовершенственый блокнот. Удобен он тем, что различает синтаксис HTML и если где-нибудь допустить ошибку, то он подсветится соответствующим образом.
Чтобы было понятней, возьмем простой сайт для примера. Любая веб страница всегда начинается с тега < html>. Таким образом мы даем информацию браузеру, что наш код написан на языке HTML. Далее идет заголовок веб страницы, где обычно указывается название страницы, информация для поисковых систем, язык кодировки и много чего еще. Последние можно пока опустить, решив, что в заголовке документа указываем только название страницы. Заголовок выделяют тегами < head>, а название страницы < title>. После заголовка идет тело страницы, которое отображается браузером, открывается тегом < body>. После этого тега идет само содержание сайта. Здесь мы можем писать тексты, вставлять картинки, делать таблицы и всевозможные меню, в общем, все, что мы хотим сделать на сайте. Более подробно, как все это сделать, мы поговорим в следующих главах.
Выглядит это так:
Разумеется, что блокнот мы используем только для простоты понимания, есть специальные програмы которые позволяют работать быстрее и эффективнее, но для закрепления пройденного материала посмотрите, как создать сайт в блокноте
Как я уже говорил, можно создать сайт в блокноте, но только в качестве примера, потому что вручную прописывать каждую строчку кода жутко неудобно и лучше воспользоваться специальными HTML редакторами или программой для создания сайта Adobe Dreamweaver, на которой мы и будем учиться делать сайты в дальнейшем.
Для начала вспомним терминалогию с предыдущего урока. Язык HTML состоит из тегов, которые дают команду бразурам про то, как именно отображать тот или иной элемент сайта. Есть обязательные теги, которые должны быть на любой веб странице. Это теги начала HTML документа (< html>), заголовка веб страницы (< head>) и его тела(< body>). Вот так это выглядит на примере:
Также здесь есть тег Title, который я рекомендую всегда использовать, потому что там прописывается название страницы, например, для поисковых систем значение данного тега играет огромное значение, если его не использовать, то они не будет ранжировать сайт и вы не сможете получить целевых посетителей с поиска. Также обратите внимание, что теги парные, то есть каждый тег открывается и закрывается соответствующими командами.
Итак, как создать сайт с помощью блокнота? В первую очередь, нужно отметить, что вся видимая часть веб страницы должна находится между тегами Body, то что вне тега не отображается браузером. Попробуем написать вставить предложение:
"Это мой первый сайт. Я его создал с помощью блокнота."
Выглядеть это будет так:
Далее нужно сохранить документ в формате HTML c произвольным названием и попробовать открыть с помощью браузера.
Если что-то не получилось попробуйте скачать сайт, созданный в блокноте и посмотреть в чем ошибка.
