Редактирование текста

Для того, чтобы писать на языке HTML, вам надо уметь редактировать чистый (или "простой") текст. Обычно это делают самые простые текстовые редакторы, типа редактора Блокнот (Notepad) в системе Windows или встроенного редактора оболочки Norton Commander или FAR. Сложные редакторы, типа Microsoft Word, также подходят, но они нам не очень удобны, так как требуют выполнения дополнительных манипуляций для работы с простым текстом.

В простом текстовом редакторе на экране виден сам код на языке HTML, то есть, наша программа.

Чтобы просматривать файлы на языке HTML, требуется тот же самый веб-браузер, например Internet Explorer или Netscape, который используется при путешествии по Паутине. Любая из этих программ позволяет открывать не только ссылки в интернете, но и HTML файлы на локальном компьютере. В таком случае на экране виден готовый HTML-документ, то, что получается, результат работы нашей программы.

Иными словами, для программирования на HTML необходимо вызывать HTML-файл в двух режимах - в режиме редактирования кода и в режиме просмотра результата. Разумеется, для автоматизации этого процесса существуют специальные программы и среды разработки, например, Macromedia Dreamweaver. Эта программа позволяет одновременно видеть и код и результат, в двух половинах экрана, и даже редактировать документ прямо в режиме просмотра результата.

Однако, изучение интегрированных сред типа Dreamweaver не входит в нашу задачу. Повторяю, на HTML можно писать, по крайней мере, на начальном этапе - без него. Я буду предполагать, что вы редактируете документ в блокноте, а просматриваете результат в браузере.

Простой текст под Windows

Пользователи системы Windows при организации такого порядка работы могут столкнуться с трудностями.

Дело в том, что система Windows по умолчанию предполагает только одно возможное действие с файлом - открытьего. А нам необходимо два режима работы. Чтобы с этим разобраться, нужно знать, что происходит, когда пользователь дважды тыкает в какой-нибудь файл. В Windows есть одно действующее лицо, которое влияет на это процесс - это программа Проводник. Проводник смотрит на расширение файла (/часть имени файла, расположенная после последней точки, например doc zip ) и в зависимости от этого запускает ту или иную программу для открытия этого файла. Для расширения .html обычно установлен запуск браузера. Иными словами, если в Windows вы просто дважды ткнете в файл HTML, то увидите результат, а самого кода - не увидите. Ситуация осложняется еще и тем, что по умолчанию расширения файлов не показываются. То есть, фактор, определяющий решение проводника - еще и невидим. Если вы хотите в этом разобраться, то перво-напрево отключите режим скрытия расширений файлов.

Ну вот, чтобы в Windows обойти механизм, приводящий к запуску браузера, нужно открывать файл в другом порядке:сначала открыть программу Блокнот, а потом в ней, из меню, выбрав пункты Файл-Открыть, открыть файл HTML (для этого придется переключить фильтр в положение "все файлы"). Такой порядок гарантирует, что файл будет открыт для редактирования кода, а не для просмотра результата.

Резюмируя, порядок работы в системе Windows должен выглядеть следующим образом.

1. Запускаются две программы - Блокнот и браузер. После этого между программами можно переключаться при помощи клавиш Alt-TAB.
2. В блокноте либо создается новый файл с расширением html, либо открывается существующий.
3. В браузере, с строке адреса вводится полный путь к этому файлу, предваренный символами file:/// например, file:///c:/html/lesson02/index.html
4. В результате получаются две программы, в которых открыт один и тот же файл
5. После этого работа протекает так:
   1. в Блокноте вносятся очередные изменения в код
   2. изменения записываются на диск (Файл-Сохранить),
   3. производится переключение в браузер (Alt-Tab),
   4. обновляется содержимое окна браузера (F5),
   5. производится переключение в Блокнот (Alt-Tab),
   6. и так далее.

Разумеется, те, кто выбрали для работы другие программы, будут действовать иначе. А те, кто выбрал этот способ, но чего-то не понял - обязательно напишут мне об этом...

Код HTML в первооснове

Итак, что же собой представляет код HTML в первооснове? Исходя из сказанного выше, что для его редактирования достаточно самых простых редакторов, ясно, что этот код представляет собой просто текст. Просто текст - это последовательность символов, набранных на клавиатуре, причем в тексте присутствует ровно то, что набрано, ни больше, ни меньше. В простом тексте не может быть курсива, жирного шрифта, разноцветных букв, картинок и так далее потому, что ничего этого нет на клавиатуре.

В простом тексте можно использовать чуть больше двуста разных символов, которые можно ввести с клавиатуры. Это могут быть буквы (латинские и русские), цифры, знаки препинания и другие значки, типа +#$. И все. Все, что можно сделать с простым текстом - это набрать в нем кусок или какой-нибудь кусок удалить. Просто, неправда ли?

Итак, самый простой документ html - это просто текст, записанный в файл с расширением . Невероятно, да? Попробуйте создать любой текст в блокноте, сохранить его с расширением .html, а потом открыть в браузере!

Можете взгянуть на пример такого файла, он прилагается к уроку (/sample2-1). Надеюсь, все понимают, что слова "прилагается к уроку", написанные только что, неспроста отображены синим цветом и подчеркнуты. И неспроста, если подвести к этим словам указатель мыши, стрелка превращается в палец! Это означает гиперссылку, возможность ткнуть в слова мышью и проследовать в другой документ.

Если вы ткнули в ссылку выше, то увидели невзрачную страницу, которая выглядит примерно так

Если же у вас получилось что-то вроде

то это значит, что браузер выбрал неправильную кодировку и надо ему подсказать. Все, кто пользуются интернетом, должны знать, как это делается. Например, в программе Explorer нужно зайти в меню Вид-Кодировка и выбрать "Кириллица (Windows)", потому что именно в расчете на эту кодировку подготовлен данный документ.

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

Теги - способ разметки текста

Итак, мы только что выяснили одну поразительнейшую вещь - вы все уже давным-давно программируете на HTML, когда набираете простые тексты в редакторах, ячейках окон и других местах. Все это - самый простой вариант HTML, который не использует так называемые теги.

Иными словами, чтобы научиться программировать на HTML, нужно лишь усовершенствовать свои навыки набора текста, обучившись применять эти самые теги. Что такое теги? Это очень простая штуковина.

Один из переводов английского слова tag - это этикетка, бирка. Для чего нужны бирки? Чтобы помечать что-нибудь. Например, имущество какой-нибудь организации может быть помечено специальными инвентарными бирками и тогда становится известно, что стоящая перед нами тумбочка - это не просто тумбочка, а имущество за таким-то инвентарным номером, класса такого-то и что-нибудь в этом духе. То есть, при помощи бирки можно сообщить об обычной вещи дополнительную информацию.

То же самое делают теги. Тег - это бирка, которая прикрепляется к участку простого текста и служит для сообщения о нем дополнительной информации. Какой? Самой разной. Например, что данный участок шрифта надо вывести жирным шрифтом.

Как же можно прикрепить бирку к тексту?

Немножко подумайте о действующих лицах. Что делает браузер, когда получает символы простого текста? В обычном случае он их просто отображает на экране. Идут символы "Hello" - и на экране появляются именно они. Совершенно другие события должны происходить, когда браузер встречает тег. Символы, составляющие тег, браузер не должен выводить на экран, а доолжен анализировать. Потом результаты этого анализа он должен использовать для вывода других символов.

Чтобы это произошло, некоторым символам должна быть дана роль специальных, управляющих символов. Главными из таких символов являются открывающая и закрывающая угловые скобки. Вот они:

<

>

Эти же символы используются для обозначения математических понятий "меньше" и "больше".

Ну вот. Чтобы пометить текст, надо использовать некоторые специальные символы. Как? Рассмотрим пример.

Данный урок содержит файл-пример sample2-2, который отличается от предыдущего тем, что слова "world" и "мир" отображаются жирным шрифтом. Посмотрели?

Для этого сделана одна простая вещь: вместо последовательности символов

Hello world!

в коде HTML написаны символы

Hello <b>world</b>!

Видите управляющие символы? Они-то и позволяют браузеру увидеть тег! А вам? :-)

В этом примере b - это имя тега, происходящее от английского слова "bold", обозначающего жирный шрифт. Последовательность символов

<b>

представляет собой открывание тега (или, открывающий тег), а последовательность

</b>

- его закрывание (или, закрывающий тег).

Обратите внимание, что и в закрывании и в открывании используется одно и то же имя b. Отличие состоит в том, что при закрывании перед именем ставится символ дроби (по-английски дробь будет slash, слэш). Именно по совпадению имен браузер может определить, закрывание какого тега он встретил.

В нашем случае все, что идет после символов </b> перестанет отображаться жирным.

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

Имена тегов HTML можно записывать как маленькими, так и большими буквами. Так, чтобы достичь того же результата, что и выше, можно было использовать большие буквы:

<b>world</b>

Теги физического форматирования

Итак, какие же выводы из вышесказанного можно сделать? Что есть программирование на HTML? Программирование на HTML есть просто набор текста и пометка различных его частей специальными бирками - тегами. Понятно теперь, почему наш язык называется языком разметки? :-)

Среди тегов, управляющих видом шрифта, можно указать следующие теги:

• <b> - (bold) жирный шрифт
• <i> - (italic) курсивный шрифт
• <u> - (underline) подчеркнутый шрифт
• <tt> - (typewriter) равноширинный шрифт, как на печатной машинке (ширина буквы ш получается такая же, как и у буквы i; в обычном случае они разные).
• <s> или <strike> - зачеркнутый шрифт
• <big> - шрифт побольше
• <small> - шрифт поменьше
• <sup> - (superscript) ^{верхний} показатель; с помощью этого тега легко программировать отображение степеней: 2³ = 8.
• <sub> - (subscrit) _нижний показатель.

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

Контейнеры и нет

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

Особенность тогов контейнеров состоит в том, что их можно вкладывать друг в друга. Например, чтобы пометить длинный текст курсивом, а внутри него сделать более короткую часть жирной, примерно так:

вот тут у нас есть длинный курсивный текст, круто?

надо написать код

вот тут <i>у нас есть <b>длинный</b> курсивный текст</i>, круто?

Здесь тег <b> вложен в тег <i>.

Но есть теги, которым не нужно помечать текст, а нужно просто указать наличие чего-нибудь в данном месте текста. К таким тегам относится, например, тег переноса строки <br>.

Чтобы с помощью этого тега запрограммировать строки

Первая строка
Вторая строка

надо написать код

Первая строка<br>Вторая строка

Ясно, что тегу <br> не требуется закрывание.

Некоторые теги, не требующие закрывания, таковы

• <br> (line break) - перенос строки
• <hr> (horizontal line) - горизонтальная линия; успользуется для отделения одной части текста от другой, вот так

одна часть

---

другая часть

Читать дальше>>