Л. Татарникова
Web-конструирование
Томск 2003
Введение
Сегодня мы начнём прогулку в увлекательный мир – мир web-строительства.
Что это значит? Наверняка ты «гулял» в Интернет, а уж если и не гулял, то слышал о нём. Что такое Интернет? Каждый представляет его по-своему. Но, возможно, всякому будет понятно и такое сравнение: Интернет – это городок, точнее, городище, состоящее из домиков – сайтов, которые, в свою очередь, состоят из комнат – страничек. В каждой комнате есть двери в соседние, и даже (сбылась мечта фантастов!) в очень далёкие комнаты. Причём сделаны эти двери – гиперссылки – так хитро, что, перебираясь в комнатку, расположенную за тридевять земель, ты даже не заметишь, что так далеко забрался.
Творят все эти чудеса мастера-сайтостроители (web-мастера). И имеется у них инструмент – специальный язык, красиво и звучно названный Hyper Text Markup Language – язык гипертекстовой разметки, или коротко HTML.
Используя инструмент HTML, мы будем, скорее, даже не строить домик-сайт, а составлять чертежи, по которым некий строитель, называемый браузером, будет на лету строить комнатку, заказанную посетителем.
Итак,
Чертёж первый
Голова, тело, заголовок…
Для создания чертежа, или кода (web-мастера – люди довольно странные и обычные чертежи называют кодом ), нашего домика-сайта нам понадобится рабочая площадка – папка, в которую будут помещаться все файлы (мы люди «подкованные» и прекрасно понимаем, что Интернет – это виртуальный мир, а значит всё, что в нём существует, располагается в файлах):
создай папку с именем my_site;
открой её и в ней создай текстовый документ, которому дай имя index.html (создаются и папка, и документ одинаково: Файл Создать Папку или Текстовый документ).
Открой файл index.html двойным щелчком мыши.
Не удивляйся, если твой текстовый файл открылся не в блокноте. Мы изменили расширение файла (.txt на .html), а такое расширение сообщает системе Windows, что файл является web-страничкой и открывать её надо в специальной программе – браузере (или броузере, решай сам, как должно звучать слово Browser), том самом мастере, который умеет читать html-чертежи и строить по ним домики.
Не удивляйся, если, прочитав эти строки, ты всё-таки увидишь свой файл открытым в блокноте. Такое может случиться, если в системе отключено отображение расширений. В этом случае, переименовав файл в index.html, ты на самом деле получил файл index.html.txt, который и должен открыться в блокноте. Как тогда быть? Можно, конечно, изменить системные настройки, но мы поступим проще:
выполни команду Файл Сохранить как…;
в открывшемся диалоговом окне в списке Тип файла выбери Все файлы;
в поле Имя файла сотри предложенное имя и запиши index.html (на твой вопрос, зачем мы стёрли имя, заменив его точно таким же, отвечу – на самом деле ты стёр имя со скрытым расширением .txt);
нажми кнопку Сохранить и закрой блокнот;
убедись, что в папке my_site теперь существует два файла – index.html и index, первый из которых можешь смело удалить;
двойным кликом открой файл index, и, если он открылся в браузере, значит, у тебя получилось сменить расширение, поэтому теперь возвратись к началу текста в этой рамке и читай…
И ещё одно замечание: о типе файла говорит не только его расширение, но и значок – пиктограмма приложения, «ответственного» за этот файл. Если у файла index.html значок изменился, превратившись в голубую букву е, значит, «твой» браузер – Internet Explorer.
Программ-браузеров существует довольно много. Наиболее распространены такие: Internet Explorer  (устанавливается в системе Windows автоматически), Opera  , Netscape Navigator  (и его русифицированная версия Сибкон Коммуникатор  )…
В открывшемся окне браузера ты видишь пустую страницу. И, думаю, это тебя не удивляет – мы ведь ещё ничего и не «начертили». Откроем наш файл для редактирования. Для этого щёлкни правой кнопкой мыши по этой самой пустой странице и в открывшемся контекстном меню (будем коротко его называть КМ) выбери строчку Просмотр HTML-кода.
Описанным способом можно открыть код странички в Internet Explorer. В нём же можно поступить и иначе: Вид Просмотр HTML-кода. В любом случае наш файл откроется в Блокноте.
В браузере Opera всё это делается чуть-чуть иначе: либо КМ Фрейм Просмотреть источник (Frame View source), либо Вид Источник (View Frame source).
А вот в Сибкон Коммуникаторе сложнее. Если он у тебя установлен как основной, то ты уже успел увидеть сообщение о том, что в документе нет данных. То есть пустой чертёж Коммуникатор не воспринимает вообще. И воспользоваться командой КМ Просмотр кода кадра или Вид Код страницы сейчас не получится. Эти команды просто недоступны. Придётся запускать Блокнот из главного меню и выполнять команду Файл Открыть.
Наконец-то можно написать первые строчки кода:
Здравствуйте! Меня зовут Вася!
Как видишь, html-код состоит из особых слов – тегов, заключённых в угловые скобки < и >. Каждый тег имеет свой смысл:
– начало html-документа;
– начало «головной» части – в ней записывается служебная информация;
– конец «головной» части (закрывающий тег отличается от открывающего наличием слэша (знак /) и присутствует почти у всех тегов);
и |
