HTML - Уроки - Первый шаг в ХТМЛ

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

Для того, чтобы писать на языке 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) верхний показатель; с помощью этого тега легко программировать отображение степеней: 23 = 8.
  • <sub> - (subscrit) нижний показатель.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

одна часть


другая часть

Специальные символы

Догадливый читатель уже мог задаться вопросом: если некоторые символы используются языком HTML как управляющие, то что делать, если надо, чтобы какой-нибудь из этих символов был показан на результирующей странице? И как, собственно говоря, в данном уроке были набраны теги HTML, почему они были показаны браузером, а не послужили ему командами? ;-)

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

Чтобы получить символ открывающей угловой скобки (знак меньше), надо написать

&lt;

Некоторые полезные символы записываются следующим образом:

Символ Смысл Имя/Код Расшифровка Запись
< открывающая угловая скобка, знак меньше lt less than &lt;
> закрывающая угловая скобка, знак больше gt greater than &gt;
& амперсанд (имеет смысл "и" в англоязычных странах) amp ampersand &amp;
" кавычка quot quotemark &quot;
знак евро #8364 - &#8364;
§ знак параграфа sect section &sect;
α греческая буква альфа alpha - &alpha;
β гречаская буква бета beta - &beta;
® знак зарегистрированного товарного знака reg registered &reg;

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

На заре возникновения, язык HTML был прост, примерно так, как я рассказал. Но со временем интернет развился, в нем появилось множество типов файлов (картинки, программы, фильмы и др.), интернет становился больше и в нем становилось все труднее разбираться. Постепенно стало ясно, что вместо того, чтобы просто программировать облик текста, лучше программировать его деление на смысловые блоки.

И первый же смысловой блок, который мы рассмотрим - это самый крупный блок - сам документ. Незамысловато правда? ;-)

Этот блок обозначается тегом <html> и должен обрамлять весь документ. То есть, открывание тега <html> должно присутствовать в самом начале любого документа html, а закрывание - в самом конце.

<html>

...

</html>

Зачем это нужно?

Чтобы программы, блуждающие в интернете, в том чсиле браузеры, открыв документ HTML могли сразу же понять, что это именно он. Программы открывают файл и видят в самом его начале <html>. Ага, думают они, понятно, что с этим делать.

Итак, мы приходим к выводу, что два примера, рассмотренные нами выше (sample2-1 и sample2-2) были мной составлены логически неправильно - в них не было указано, что это документы HTML. Чтобы исправить неточность, нужно обрамить все содержимое документа тегом <html>. Получится более правильный пример - sample2-3.

Но это еще не все!

Дело в том, что внутри блока "документ" положено выделять еще два подблока - заголовок и тело. Заголовок - это блок, в котором указывается информация ОБ документе. Тело - это блок, который содержит сам документ. Заголовок кодируется тегом <head>, а тело - тегом <body>.

В нашем примере заголовка не было, то есть, мы ничего не говорили ОБ документе. Поэтому тег <head> нам был не нужен. А вот тег <body> мы должны были использовать, так как содержимое у нас было. Итак, еще более логически правильная версия примера получится, если обрамить содержимое тега <html> тегом <body>. Получится пример sample2-4, еще более правильный с логической точки зрения, но не отличающийся визуально.

Для чего может потребоваться заголовок документа (тег <head>)?

Вообще-то, у него много полезных функций, но нам сейчас будет понятна и полезна одна - внутри тега <head> можно использовать тег <title>, который управляет тем, что отображается в заголовке окна браузера.

Таким образом, пятая версия примера выглядит так

<html>
<head>
<title>Пример 5-й версии</title>
</head>
<body>
Hello, <b>world</b>! <br>
Привет, <b>мир</b>!
</body>
</html>

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

Данный текст находится в файле sample2-5, посмотрите его. Видите, что в заголовке окна теперь написано не то, что в предыдущем случае?

Несмотря на то, что мы уже практически приблизились к логически идеальному документу, это все еще не он: у нас использованы два физических тега - <b> и <br>. Вместо них также рекомендуется использовать логические. Вместо тега <b> надо использовать тег <strong>, а в место тега <br> - разбиение текста на абзацы при помощи тега-контейнера <p>.

Зачем это нужно?

Одно из возможных объяснений таково: в разных странах выделение главной или важной мысли может осуществляться по-разному: у одних это подчеркивание, у других курсив, у третьих - жирный шрифт. Если набирая текст вы хотите написать именно что-то важное, то используте тег <strong>. Эти вы просто пометите часть текста, как важную. А отобразится ли она жирным шрифтом или подчеркиванием - вас волновать не должно.

Разумеется, если вы хотите именно физически подчеркнуть текст - то тогда наоборот, правильнее использовать тег физического форматирования текста <u>.

Итак, окончательная, самая логически правильная версия примера приведена в файле sample2-6.

Вот некоторые теги логического форматирования, которые вам могут пригодиться:

  • <p> (paragraph, абзац) - используется для обозначения абзацев текста
  • с <h1> по <h9> (heading, заголовок) - используется для обрамления заголовков в тексте
  • <strong> (сильный) - сильная мысль, обычно отображается жирны шрифтом, используйте вместо тега b
  • <em> (emphasis, выделение) - важная мысль, обычно отображается курсивом, используйте вместо тега i
  • <cite> (цитата) - используется для обрамления цитат, обычно изображается курсивом
  • <del> (deleted, удаленный) - используется для пометки удаленного текста, обычно изображается зачеркнутым шрифтом

Резюмируя вышесказанное, можно заключить, что логическая структура правильного HTML документа должна иметь следующий вид

Самый главный тег и параметры тегов

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

Необходима возможность создавать в документе ссылки. Для пометки части текста как ссылки используется тег, имя которого состоит из одной единственной буквы алфавита - первой. Это, как вы уже догадались - буква a (латинская). Имя этого тега происходит от английского слова anchor - якорь или связь.

В примере sample2-7 тегом <a> обрамлено слово мир, вот так:

<a>мир</a>

Это превращает слово мир в ссылку на другую страницу... Упс!

Видите, что-то не так? Слово мир почему-то никуда не ведет, хотя мы и пометили его тегом <a>. Почему?

Догадливые читатели уже поняли, что слово мир никуда не ведет потому, что мы не указали, куда оно должно вести! :-)

А еще более догадливые читатели догадались, что если бы мы и захотели указать, куда вести, то не смогли бы, так как не знаем как. :-))

Ответ на последний вопрос раскрывает перед нами целый пласт новых знаний!

Помимо того, что некоторые части текста могут быть помечены теми или иными тегами, что уже само по себе будет о чем-то говорить, еще есть возможность указать по этим тегам дополнительные сведения. В частности, по тегу <a> можно указать, куда он будет вести.

Для этого используются так называемые параметры тегов.

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

<a ...>

Указание параметра выглядит как равенство. Пишется что-то = чему-то. Вот так:

<a href="/sample2-8">

Что-то, стоящее слева от знака равенства - это имя параметра. У каждого тега есть свои параметры и только их имена можно использовать. Чего-то, стоящее справа от знака равенства - это значение параметра.

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

В нашем примере по тегу <a> указывается дополнительная информация вида href, что происходит от слов hyper reference, то есть, гиперссылка. Href - это имя параметра. Значение этого параметра - это указанное в двойных кавычках имя файла. Обычно это файл HTML. Если файл лежит в той же папке, что и тот файл, в котором указан тег <a>, то в значении ставится просто имя файла. Если же файлы лежат в разных папках, то надо указать еще и путь к нему.

Исправленый пример со ссылкой находится в файле sample2-8. В этом примере слово мир вывелось другим цветом и подчеркнуто, как и положено для ссылки. Кроме того, указатель мыши над этим словом превращается в палец. А если в слово ткнуть мышью, то... :-)

Как вставлять картинки

Любой сайт был бы невзрачен, если бы на нем не использовались картинки. Как же их вставлять?

Картинка обычно хранится в отдельном файле и лежит в другой папке, чем сам документ HTML, в котором она отображается. Файлы с картинками имеют расширения .gif и .jpeg, а также некоторые другие. Чтобы использовать картинку в документе, ее нужно сначала нарисовать в графическом редакторе (либо скачать готовую откуда-нибудь из интернета) и положить неподалеку от файла HTML. Потом в документе надо воспользоваться тегом <img> (image, картинка). Тег <img> не нуждается в закрывании. У него есть параметр src, в значении которого надо указать путь и имя файла с картинкой.

Таким образом, чтобы вставить картинку земли в примере sample2-9, был использолван код

<img src="/images/earth.gif">

Сама картинка лежит в папке images, и на нее можно дать простую ссылку при помощи кода

<a href="/images/earth.gif">простую ссылку</a>

Понимаете? В чем разница и в чем общее, понимаете?

Когда человек открывает ссылку на файл HTML со вставленной картинкой, то происходит следующее:

  1. Браузер запрашивает у сервера файл HTML
  2. Сервер передает его браузеру
  3. Браузер видит, что в файле HTML присутствует тег <img> и считывает его параметр src, откуда он получает путь к картинке
  4. Браузер заправшивает у сервера файл с картинкой
  5. Сервер передает его браузеру
  6. Браузер врисовывает картинку вместо тега <img>

Когда человек открывает ссылку на сам файл с картинкой, то происходит следующее:

  1. Браузер заправшивает у сервера файл с картинкой
  2. Сервер передает его браузеру
  3. Браузер врисовывает картинку в пустое окно

Понятно? В первом случае происходит два запроса к серверу, а во втором - один!

Тег META

Есть еще один немаловажный тег, называется он <meta> и должен располагаться в заголовке (внутри тега head).

Назначение этого тега можно было бы охарактеризвать как "разное". То есть, в параметрах этого тега указывается всякая разная всячина, которая не вошла в другие теги. Поскольку тег располагается в заголовке, то относится это всякое разное к информации ОБ документе.

Сейчас для нас важно одно: с помощью тега <meta> можно указывать, в какой кодировке подготовлен документ. Если вы знаете, исторически сложилось так, что для кодировки русских букв используюся сразу несколько систем кодирования (латинских - только одна). В этой чехарде нет ничего хорошего, но с ней приходится считаться.

Русские буквы кодируются по-разному в операционных системах ДОС, Unix и Windows. Чтобы изобразить русские буквы правильно, браузер должен знать, в какой из кодировок они записаны при программировании. Один из вариантов - поручить пользователю самому перебирать кодировки, пока не покажется правильная. Другой вариант, более правильный, разместить указание об этом в теге <meta>.

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

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

Услуги хостинга

Ну все. Теперь мы знаем все необходимое, чтобы создать свою первую страничку. За исключением одного - как разместить ее в интернете?

Когда человек или фирма разрешает другим фирмам или людям класть на свой компьютер их странички, то говорят, что этот человек или фирма оказывают услуги хостинга (от английского слова host - содержать).

Фирм, оказывающих услуги хостинга - очень много, можно поискать их через Яндекс, а можно воспользоваться нашими услугами. Есть среди них и такие, которые оказывают эту услугу бесплатно, взамен на право размещать на вашей страничке рекламу. Например, Narod.ru.

Заядя на этот сайт, любой человек может зарегистрировать новое имя для сайта, после чего получает место на диске, куда он может закачивать свои файлы HTML. Остальные люди (весь мир) имеют возможность просматривать эти файлы, зная их адреса URL.

Домашнее задание

Теперь приступим к домашнему заданию.

Оно большое и ужасно сложное! Шутка! :-))

Первое.

Найдите себе фирму, предлагающаую хостинг. Можно наш, можно другой платный, можно - бесплатный. Можно народ-ру, можно - другой. Заведите себе на нем место для сайта.

Второе.

Подготовте файл с именем index, в котором разместите страницу со следующими характеристиками:

  1. У страницы должен быть тег <html>, а также заголовок <head>, тег <title> и тег <body>. Кроме того, в заголовке должен присутствовать тег <meta> с правильно указанной кодировкой русского текста.
  2. Страница должна представлять собой рассказ о воображаемой фирме "Рога и копыта", состоящий из трех глав (тег <h1>).
  3. В каждой главе должно быть несколько абзацев (тег <p>) из нескольких предложений.
  4. В тексте должны быть использованы теги форматирования текста жирным, курсивом и подчеркиванием, как логические, так и физические.
  5. Заднего фона быть не должно. ;-)
  6. На странице, в тексте, должно быть приведено изображение Земли и Сатурна из данного урока.
  7. Со страницы должны быть сделаны гиперссылки на сайт Яндекса, а также на сайт бесплатного обучения HTML. Содержимое тегов <a> должно быть при этом непустым.
Copyright © 2006-09.