Аннотация :
Web-дизайн не для простых смертных, только для Избранных вроде Нео… Ерунда!
Я научу тебя делать сайты! Это легко! Ещё не успеешь дочитать эту книжечку до конца, а уже создашь свой первый сайт.
Но есть и условие:
  — Ты будешь добросовестно изучать всё, что я тебе в этой книге расскажу. Ты будешь делать примеры на компьютере и проверять, что в итоге получается. Потому что, если ты ничего не будешь делать, то, конечно, и в результате получишь ничего.
Я тебя учу как делать, а ты читай и делай!

Не веришь?
Тогда вот моё слово:
  — Если к концу седьмой главы ты не сумеешь написать свой первый сайт, в котором будут хотя бы три web-страницы с навигацией между ними — я верну тебе деньги за эту книгу.
А теперь вперёд: через семь глав ты должен создать свой сайт. Мне ведь очень не хочется возвращать тебе деньги — так что я намерен учить тебя так, как тебя ещё никто не учил

Я научу тебя делать сайты

Web-дизайн окружён ореолом таинства сродни религиозной мистике, а может и покруче того. Короче это не для простых смертных. Никому этого не постичь — кроме Избранных вроде Нео... Ерунда!

Я научу тебя делать сайты! Это легко. Ещё не успеешь дочитать эту книжечку до конца, а уже создашь свой первый сайт.

Не веришь?

Тогда вот моё слово:
  — Если к концу седьмой главы ты, мой читатель, читающий сейчас эти строки, не сумеешь написать свой первый сайт, в котором будут хотя бы три web-страницы с навигацией между ними — я верну тебе деньги за эту книгу.

Это абсолютно серьёзно: если ты возвращаешь мне книгу, потому что не смог по ней научиться — значит, моя книга плоха — значит, по совести я обязан возместить тебе твой убыток. Ты мне из рук в руки отдаёшь мою плохую книгу - я тебе из рук в руки отдаю твои хорошие деньги. Как видишь, тут всё честно.

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

Я тебя учу как делать — а ты читай и делай!

А теперь вперёд: через семь глав ты должен создать свой сайт. И это не обсуждается!
(Мне ведь очень не хочется возвращать тебе деньги — так что я намерен учить тебя так, как тебя ещё никто не учил. И только попробуй не научиться!)

Гипертекст

Почему я так уверен в успехе твоего обучения, друг мой? Да потому что грамоте ты обучен, раз эти строки читаешь. А таинственный HTML, на котором пишут сайты, это — гипертекст.

Гипертекст это самый обычный текст. Серьёзно — самый обычный текст. И если ты, мой друг, умеешь набирать текст — то уж с гипертекстом справишься легко!

А почему ж он тогда так странно называется? К чему эта приставка «гипер»? А потому что он текст — но с некоторыми дополнениями. Главное из которых это возможность вставлять ссылки на другие фрагменты такого текста.

О, традиция ссылаться восходит к глубинам времен Тёмных Веков Средневековья. То есть, по определению нашего прославленного историка Клим Саныча Жукова (а он как раз специалист по Средневековью), обычай этот возник где-то до завоевания Англии норманнами. Времена тогда были суровые и простые. Чего почитать выбор был невелик — книга была одна на всех и потому так она и называлась — Книга. По латыни — Библия. Неудивительно, что при всяких спорах, от богословских до юридических, всяк стремился ссылаться на правду свою в слове божьем — и указывал «глава такая-то, стих такой-то, строка вот эта». С тех пор книг стало заметно больше, а сама святая библия была переписана столько раз и настолько кощунственным образом, что ссылаться на неё как на слово божие, увы, даже как-то неудобно и вообще сомнительно.

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

И вот в начале 1980-х, на деньги Оборонного ведомства США, начинается создание сперва американской, а затем на основе её и всемирной компьютерной сети. Конечно в первую очередь, раз платили военные, то и сеть для военных нужд. Но сеть расширялась — к ней подключали всё новые научные учреждения. А учёные любят ссылаться на чужие труды.

Вот так и родилась идея гипертекста — такого текста, в который легко встраиваются ссылки на другие такие же гипертексты. Писать такой текст можно через любой текстовый редактор — вот в составе операционной системы Windows есть стандартный Блокнот — вполне годится!

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

Потому открывай программу «Блокнот» и готовься создать свой первый гипертекстовый документ.

Файл HTML

Файл должен иметь расширение html (для совместимости со старыми системами так же допускается htm). Расширение - это то, что пишется после точки на конце имени файла. После последней точки, так как современные операционные системы допускают длинные имена файлов, в которых могут встречаться и точки. Но расширением считается только то, что следует за последней точкой - и для операционной системы именно это расширение и указывает тип файла - по которому она узнаёт, что с этим файлом делать. Так файл с расширением html, при клике на него, будет открыт для просмотра через браузер.

Ну и как же такой файл html сделать?

Друг мой, создай обычный текстовый файл. Как ты это делаешь обычно? Наверное правой кнопкой кликнуть на пустое место в папке, выбрать там «Создать» и далее «Текстовый документ» — и у этого нового документа измени имя на, к примеру, page01. И обязательно измени расширение с txt на html. И увидишь, как после этого иконка файла изменится — из иконки Блокнота она превратится в иконку твоего браузера.

Вот тут многих подстерегает первая непреодолимая трудность: иконка не меняется. Так и остаётся текстовым документом.

А вся беда в коварстве настроек Windows — по умолчанию для пользователей в этих настройках выключен показ расширений файлов. Даже обычным пользователям от этого никакого удобства — а ты, друг мой, собрался стать разработчиком. Тебе жизненно важно видеть все эти расширения!

Значит, лезешь в «Панель управления» — а в ней ищешь «Вид папок» — и вот где-то там поройся во вкладках, найдёшь и длинный список, где нужно либо снять либо поставить галочку напротив пункта показывать или нет расширения зарегистрированных типов файлов.

Если всё сделал правильно, то теперь увидишь, что в конце имени твоего текстового файла оставалось окаянное txt — замени его на html и уж теперь иконка должна измениться.

А как редактировать этот файл html?

Правой кнопкой кликаем на него — из открывшегося меню выбираем «Открыть с помощью» — а там в списке кликаем на Блокнот.

Совет: я использую не стандартный Блокнот — а более совершенный Notepad++. Это бесплатная программа. Если на компьютере установлена она, то пункт «Edit with Notepad++» будет прямо в первом же меню. Очень удобно!

Итак, мы создали наш файл html и открыли его — он пуст. И вот теперь нам потребуются тэги.
(Это уже третья глава, а ничего собственно про создание web-страниц до сих пор автор не рассказал — ой точно придётся автору раскошеливаться, ведь такими темпами он не то что к седьмой главе — он и к концу книги не научит как сайты делать. Но, справедливости ради, дадим автору ещё один шанс — так уж и быть, дочитаем до конца седьмой главы... а там уж пускай возвращает нам денежки за книжку как обещал, хи-хи-хи)

Тэги

Это средство придумано для разметки гипертекста. В самом деле, гипертекст это самый обычный текст. Но как же в него включают ссылки и те всякие дополнения, которые делают его красивее обычного текста?

С помощью тэгов.

Тэг в HTML это не какое-то #модное #словечко — нет, это рабочий инструмент разметки. И чтоб он отличался от текста, тэг заключается в угловые скобки — вот такие:

	<ТЭГ>

Некоторые тэги одинарные — они производят какое-то действие прямо там, где мы их впишем в текст. Например, тэг вставляющий изображение именно таков. Но большинство тэгов распространяют своё действие на целый фрагмент текста — и тогда кроме открывающего тэга обязательно должен быть вписан и закрывающий — он отличается косой чертой перед названием тэга:

	</ТЭГ>

Нет разницы в величине или правильнее сказать регистре букв. Заглавные или строчные в названии тэга воспринимаются браузером одинаково. Так что если написать:

	<Тэг>

или

	<тэГ>

или даже

	<тЭг>

То с точки зрения браузера все эти записи одинаковы.

Это были общие правила, а теперь — практика!..

1. Я научу тебя делать сайты
2. Гипертекст
3. Файл HTML
4. Тэги
5. Красивый текст
6. Картинки и цвет
7. А теперь сайт
8. Списки
9. Таблицы
10. Фреймы
11. Карты ссылок
12. Отгрузка на сервер
13. Мы хакеры
14. Отладка

1. Особые символы
2. Цвета и их коды