Для начала - экскурс в HTML. Небольшой. На самом деле тебе в нем нужно знать всего с десяток тэгов. Остальные - потом, по вкусу. А вот этот десяток тэгов нужно знать всем. Даже тем, кто собирается работать во FrontPage.
Начнем мы все-таки с работы в обычном редакторе. Запусти любой редактор (лучше попроще, что-нибудь типа NotePad), создай в нем файл с названием index.htm и запиши в этот файл такой вот текст:
<html>
<body>
Привет!
</body>
</html>
А теперь запусти этот файл на выполнение. Как? Да просто найди его в каталоге и сделай по нему двойной щелчок, как обычно. Что должно произойти? Запустится браузер (программа для просмотра сайтов, скорее всего это будет Microsoft Explorer или Netscape Navigator), и ты увидишь пустой экран, а на нем, в левом верхнем углу - слово "Привет". Вот и все. Ты создал и посмотрел первую свою страничку.
Что значат все эти тэги?
Тэг <html> всегда должен быть самым первым. Он говорит о том, что текстовый файл содержит веб-страничку. А в конце файла должен стоять закрывающий тэг </html>. А вся страничка, соответственно, между ними.
Тэг <body> (и закрывающий его </body>) показывают границы собственно тела страницы. Чем же он отличается от <html>? Да тем, что есть всякие служебные тэги, которые к телу страницы не относятся. Например, тэг <title>, в котором хранится заголовок страницы. Этот заголовок показывается в верхней строчке браузера (шапке) и есть вещь необязательная, но очень удобная. Рекомендую этот тэг использовать. Исправь страницу, чтоб она выглядела так:
<html>
<title>Это моя первая страница</title>
<body>
Привет!
</body>
</html>
Сохрани ее и запусти на выполнение. Ничего не изменилось, только в шапке браузера появился текст "Это моя первая страничка".
Хорошо. Упражняемся. Создай еще одну страничку, с именем two.htm и с содержимым:
<html>
<title>Это моя вторая страница</title>
<body>
И тебе привет тоже!
</body>
</html>
Проверь, правильно ли она работает.
А вот теперь свяжем две страницы вместе. Это делается очень просто, поскольку есть тэг,который отвечает за связывание страниц. Измени файл index.htm так, чтобы он выглядел следующим образом:
<html>
<title>Это моя первая страница</title>
<body>
Привет!
Вот ссылка на вторую <a href="two.htm">
страницу</a>
</body>
</html>
Сохрани и запусти эту страницу на выполнение. Видишь, слово "страницу" выделилось другим цветом? Значит, это - ссылка. Щелкни по ней - и ты попадешь на вторую страницу. И все? И все! Вот и вся основа гипертекста! Просто перед тем текстом, котоыйты хочешь оформить как ссылку, ты ставишь тэг <a href="имяфайла">, а после этого текста - тэг </a>. И все!
Поупражняйся. Создай еще одну страницу и сделай на нее ссылку из первой страницы. Или со второй, как тебе больше нравится.
А теперь немного займемся оформлением текста. Заметил ли ты такую странную особенность: в файле у тебя тексты "Привет" и "Вот ссылка..." записаны в разных строчках, а в окне браузера они идут в одной строке? Да, потому что браузеру фиолетово, где у тебя строчки в файле - он их воспринимает как один сплошной текст. А, чтобы переломить строчку, нужно поставить тэг <br>. Вот так:
<html>
<title>Это моя первая страница</title>
<body>
Привет!
<br>Вот ссылка на вторую <a href="two.htm">
страницу</a>
</body>
</html>
Проверь, так ли это?
На самом деле тэг <br> используется не так часто. Чаще сейчас используется тэг <p>, который обозначает начало абзаца. Давай заменим тэг <br> на тэг <p> и посмотрим, что получилось. Исправь файл и запусти его на выполнение.
Так... Вроде бы ничего не изменилось, только строчки "разошлись", теперь между нми пустая строка. Это правильно - абзацы в интернете отделяются пустой строкой, так с экрана читать удобнее. Но главное не это. Если ты будешь (в будущем) использовать CSS, то ты сможешь задать стандартное оформление абзацев. И тогда браузер, встретив тэг <p>, стразу весь абзац оформит стандартным образом. Так что привыкай пользоваться в основном тэгом <p>, а <br> использовать только там, где нужно именно переломить строчку, не начиная новый абзац.
Ну вот, осталось совсем немного тэгов, которые ты должен знать назубок. Давай научимся еще выделять отдельные куски текста жирным начертанием и курсивом. Вставь в страничку вот такую строку и посмотри, что получилось:
<html>
<title>Это моя первая страница</title>
<body>
Привет!
<br>Вот ссылка на вторую <a href="two.htm">
страницу</a>
<p>Этот текст выделен <b>жирным</b>, а вот
этот - <i>курсивом</i>
<p><center>Этот текст отцентрован</center>
<p><right>Этот -прижат вправо</right>
<p><left>А этот - влево </left>
</body>
</html>
Как видишь, все просто: там, где начинается жирный шрифт, ставь <b>, а там, где он кончается - </b>. Ну и, так же - с курсивом, только тэги теперь - <i> и </i>. Обрати внимание на то, что теги, прижимающие текст влево, вправо или по центру, действуют на целые абзацы. Поупражняйся. Сделай несколько страничек, используя тэги форматирования.
Кажется, все для начала... Ах да, мы же еще не научились делать таблицы и вставлять изображения. Таблицы - штука сложная и ею с разбега не овладеешь. Таблицы нужны в том случае, если ты хочешь устроить страницу так, чтобы несколько текстов шли параллельно, например так:
| Вот это идет первый текст Тирли-тирли, трали-вали |
А вот это второй текст Зачем, зачем,
сограждане, |
Лучше всего таблицы отложить на потом, а сейчас я расскажу о них вкратце. Вот как выглядит, например, HTML- код этой таблицы:
<table border="1" width="100%">
<tr>
<td width="50%">Вот это идет первый текст<p>Тирли-тирли,
трали-вали</td>
<td width="50%">А вот это второй текст<p>Зачем, зачем,
сограждане,<br>
Зачем я кролик белый...</td>
</tr>
</table>
Итак: таблица начинается с тэга <table>, а заканчивается тэгом </table>. В заголовке таблицы можно указать толщину рамки (border) ширину таблицы (width) и много еще чего, но мы сейчас в эти детали вникать не будем. Вот для интереса можешь попробовать, что получится, если толщину рамки установить в 0.
Каждая строчка таблицы начинается с тэга <tr> и заканчивается тэгом </tr>. А уже внутри строчки идут ячейки таблицы, каждая из которых начинается с тэга <td> и заканчивается тэгом </td>, между которыми находится собстенно содержимое ячейки.
Казалось бы, все просто. Но на самом деле таблицы - один из самых сложных элементов HTML, и ты в этом живо убедишься, как только попробуешь сам построить табличку. Например, такую:
| 1 | 2 | |
| 3 | 4 | 5 |
Ну, и последнее. Надо научиться вставлять картинки в страницу. Для начала перекинь в каталог, в котором лежит твоя страничка, какую-нибудь небольшую картинку в формате gif или ipg. Небольшую - ну, так, чтобы она не больше четверти экрана занимала, а лучше - еще меньше. Пусть она называется, например, так: kart.jpg. Измени текст index.htm вот так:
<html>
<title>Это моя первая страница</title>
<body>
<img src="kart.jpg>
Привет!
<br>Вот ссылка на вторую <a href="two.htm">
страницу</a>
</body>
</html>
и посмотри, что получилось, в браузере. Получится вот что: на экране появится эта картинка, а ниже - старый текст. То есть картинка как бы занимает отдельную строчку.
А если ты хочешь, чтобы картинка была слева, а текст справа? Тогда тэг надо записать так (проверь!):
<img src="kart.jpg align=left>
Упражнение на сообразительность: а как сделать, чтобы текст был слева, а картинка справа? Сделай и проврь тоже!
Ну вот, собственно, и все. По правде говоря, тэгов, которые я перечислил, с лихвой хватит на то, чтобы построить вполне приличный сайт. Ну, разве что еще изменить цвет страницы или подложить "под низ" страницы какую-нибудь картинку... Вобщем, если ты решил работать прямо в таком стиле, с помощью простого текстового редактора - дальше можешь продолжать самостоятельно. Найди только хороший справочник по HTML, в котором будешь находить новые тэги, кода вырастешь из этих.
Ну, а если ты хочешь работать с удобствами и не слишком вдаваться в тонкости HTML, прошу дальше - к изучению FrontPage.
Опубликовано: "Karelin.ru"
© Алексей Бабий 1999