Урок первый. hello, world!

Архив

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

   С этого термина мы и начнем. Как известно, все Web-страницы в Интернете созданы при помощи HTML. Но в разных источниках эти четыре загадочные буквы толкуются по-разному и самыми причудливыми способами. Одни пишут, что это язык программирования, другие - что это символы разметки страниц...

   Если говорить правильно, то HTML (Hyper Text Markup Language) - это гипертекстовый язык разметки Web-страниц, которые так обычно и называются - HTML-страницы. Звучит мудрено, однако на самом деле все очень просто. Легко понять, что же такое HTML, на конкретном примере.

   По традиции обучение любому новому языку программирования начинается с составления простой программки, которая пишет на экране слова "Hello, World!" ("Привет, мир!"). Давайте и мы создадим на языке HTML страничку с этой надписью.

   Сделаем следующее. Возьмем любой текстовый редактор, например Windows Notepad, и напишем в нем "Hello, World!". Сохраним этот текст в файле и назовем файл, ну, скажем, hello, но расширение зададим не ".txt", а ".htm" или ".html".

   Все! Поздравляю! Вы создали свою первую страничку на языке HTML. Для того чтобы увидеть результат, загрузите файл в любой браузер (программу для просмотра HTML-страниц), например Internet Explorer или Netscape. Вы увидите в окошке именно тот текст, что ввели ранее: "Hello, World!".

   Но позвольте, скажете вы. При чем тут HTML? Это же обычный текстовый файл.

   Но в том-то и дело, что файл HTML - это и есть обычный текст. Правда, с тем отличием, что в HTML-файле могут быть всякие специальные значки, которые называются тегами. Теги "объясняют" браузеру (программе просмотра), каким образом отображать содержимое файла. Например, если браузер встретит последовательность символов <b>, то весь текст, следующий за этими символами, он отобразит как жирный, до тех пор пока не наткнется на последовательность </b>, а если встретит последовательность <i>, он отобразит весь последующий текст наклонным. Так вот, <b> и <i> и есть теги HTML. Обычно тег - это команда, заключенная в угловые скобки. Она говорит браузеру, каким образом оформить следующий кусок текста. Тегов существуют десятки.

   Например, тег

   <img src="/printimages/301/printimages/301/"ris2.jpg" width="343" height="359" alt="Картинка">

   означает, что в этом месте надо вставить картинку из файла ris2.jpg и придать ей размеры 359 пикселов в высоту и 343 в ширину, а если режим показа картинок в браузере выключен, то вместо картинки надо написать слово "Картинка". А тег

   <a href="http://aship.attend.to"> моя любимая страничка </a>

   говорит о том, что слова "моя любимая страничка" нужно оформить как линк (ссылку) на адрес http://aship.attend.to.

   Однако для создания своей страницы вовсе не нужно знать все это (конечно, если вы не ставите своей целью профессиональное занятие Web-дизайном). Существует огромное количество так называемых WYSIWYG-редакторов, которые позволяют делать странички, совсем не зная HTML. Вы просто оформляете текст: вставляете картинки, рисуете таблицы, выделяете, что надо, а при сохранении программа формирует HTML-файл, в котором все необходимые теги расставлены.

   Если вы путешествуете по Интернету при помощи браузеров Netscape Navigator или Internet Explorer, у вас наверняка есть программы Netscape Composer или FrontPage (Express), которые входят в стандартный комплект поставки. Эти программы позволяют создать прекрасную страничку, совершенно не зная HTML. Кроме Netscape Composer и FrontPage существуют десятки других подобных программ, они называются HTML-редакторами. И каждый может выбрать себе редактор по вкусу.

   А теперь давайте проведем небольшой эксперимент. Возьмем созданный нами файл hello.htm и загрузим его в одну из таких программ, скажем, во FrontPage, и, ничего не меняя в файле, сохраним его. Взглянув на размер сохраненного файла, вы заметите, что он вырос в несколько раз. Дело в том, что, утверждая, будто HTML - это обычный текстовый файл, я слукавил. Он не совсем обычный. Как правило (хотя и не обязательно), HTML-файл начинается тегами

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>

   а заканчиваться тегами

</BODY>
</HTML>

   Эти теги не обязательны, но их отсутствие может привести к тому, что не все браузеры будут корректно показывать HTML-файл (особенно если он написан по-русски). А некоторые возможности, присущие HTML (например, динамические страницы), не будут работать.

   Самый первый тег <HTML> говорит о том, что перед нами собственно HTML-документ. Между тегами <HEAD> и </HEAD> заключается служебная информация, например, информация о языке, на котором написан документ, или информация для поисковых машин, или название документа (оно заключается между тегами <TITLE> и </TITLE>). Далее следует тег <BODY>, за которым начинается собственно документ. В конце файла всегда стоят теги </BODY> и </HTML>, говорящие браузеру о том, что документ закончился.

   Таким образом, "умный" HTML-редактор видит, что в нашем тексте hello.htm традиционной части не достает и добавляет ее при сохранении файла.

   HTML-редакторы - очень удобная вещь, однако если вы хотите всерьез заняться Web-дизайном, без знания HTML не обойтись. Во-первых, некоторые тонкости (о них мы поговорим позже) HTML-редакторам не по зубам. А во-вторых, существует, к сожалению, несколько "диалектов" HTML, поддерживаемых браузерами различных фирм. Так, например, для задания жирного шрифта Netscape Composer будет использовать уже упоминавшийся тег <b>, а FrontPage вставит с той же целью тег <strong>. Для задания "мелкого" шрифта Netscape Composer поставит тег <-1>, а FrontPage - <small>. И тот и другой теги дадут похожий результат, однако могут быть и исключения. Сплошь и рядом возникают ситуации, когда HTML-файл, созданный редактором от одной фирмы, может быть не "понят" браузером другой фирмы. Поэтому, если вы все же решите заняться сайтостроением всерьез, вам не избежать ручной правки текстов, созданных в HTML-редакторе. Это, конечно, не значит, что вы должны зубрить все теги наизусть, но держать под рукой справочное руководство по HTML весьма полезно.

   Таких книг издается сейчас великое множество. Но если вы хоть немного знаете английский, лучше все же сверяться с первоисточником. Официальную спецификацию действующей версии HTML можно найти по адресу www.w3.org/TR/REC-html32.html.