Как представить себе сайт?

Как представить сайт

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

Сайт – это набор файлов

Да, да! Во-первых, сайт – это набор файлов, который вы получаете из интернета с другого компьютера, который называют web сервером. Поскольку сайт – это файлы, то нужно научиться их создавать.

В самом простом понимании, любой файл сайта – это документ с определенным набором английских слов, которые называют тегами. Эти слова являются полными или краткими (из обычного слова удаляют некоторые буквы так, чтобы осталось слово созвучное основному слову, чтобы разработчику было удобно их запоминать). Кроме этого, чтобы эти слова отделялись от обычных слов по тексту документа, английские слова заключают в знаки < и >, например, . Такой набор заключенных в своеобразные угловые скобки и называется официально тег. Теги бывают 2-х типов:
 1. Тег, определяющий какой-либо объект в документе, например, тег для картинки: <img> (image – англ. картинка)
 2. Тег, который является своеобразным описателем другого объекта. Для такого тега необходимо определить начало (откуда начинается описание объекта-блока, для которого этот тег предназначен) и конец (чтобы точно знать, где заканчивается действие тега). Для такой техники описания придуман простой способ (например, в обычной математике, чтобы указать порядок действий вы невольно расставляете круглые скобки, а веб разработчик тот, кто создает страницы сайта, невольно ставить у закрывающегося тега дополнительный символ слеш /). Начало описывающего тега записывается в привычной теперь уже для нас форме, т.е. с угловыми скобками, а у закрывающего тега абсолютна та же самая запись с добавлением после знака < еще одного символа /. Например, <table> ……… </table>, т.е. указывается начало таблицы и место где таблица завершается. Кстати, тег <body> так же имеет закрывающийся тег </body>, эта конструкция указывает на начало и конец документа, т.е. то место, где идет основная часть (body – англ. тело), в основном, полностью видимая пользователю, во время просмотра документа в браузере.

Создаем файл для сайта

А теперь попробуем создать первый в вашей жизни документ, который можно раздавать с веб сервера пользователям, которые будут смотреть ваш сайт. Для создания такого документа сделайте следующее:
 1. Откройте программу блокнот (Пуск>Все программы>Стандартные>Блокнот)
 2. Наберите следующий текст:

<body>
<center>Первое знакомство с языком гипертекстовой разметки</center>
<b>HTML – HyperText Markup Language</b> – язык гипертекстовой разметки.<br />Этот язык предназначен для указания всем браузерам где какие элементы на странице сайта размещаются. При помощи этого языка все веб разработчики создают и украшают сайты, которые так нравятся вам.
</body>

 3. Сохраните следующим образом этот текст в файл:
  • Файл>Сохранить как…
  • В открывшемся окне измените в строчке «Тип файла:» на «Все файлы (*.*)», а чуть выше
  • В строчке «Имя файла:» напишите название файла, рекомендую «index.html» (без кавычек и пробелов, лучше маленькими буквами)
  • Перед тем как будете нажимать кнопку «Сохранить» обратите внимание на строчку «Кодировка:», там написано «ANSI». В следующих занятиях на кодировку мы обратим пристальное внимание. Я надеюсь вам не нужно объяснять, как пользоваться папками в операционной системе, т.е. вы четко представляете, в какую папку вы сейчас сохраняете ваш файл?

После сохранения файла (Блокнот можно закрыть), найдите ваш файл и откройте его (например, двойным щелчком мыши). Поскольку вы принудительно задали вашему документу формат html (когда вы сохраняли документ, вы поставили в названии после точки буквы html – это тип или формат или расширение файла, кому как нравится называть, это не принципиально), то этот документ теперь откроется в одном из браузеров, который у вас установлен по умолчанию. Заметьте, что никаких английских слов с угловыми значками вы не видите (виден только текст). Эти теги (английские слова со знаками <>) оформляют текст, вы видите, что одна фраза встала по центру страницы, другая выделена полужирным шрифтом, а в том месте, где вы поставили <br />, вдруг произошел перенос строки!

Первый урок закончен, готовьтесь ко второму.

Если вам понравилось, поделитесь этим со своим друзьями или подписывайтесь на мою страницу в фэйсбуке или вступайте в группу в ВК, чтобы получать интересную информацию: