High Рождение первенца
Да! Кстати… а как же открыть нам свой блокнот, если он сразу открывается в окне браузера? Думаете подкололи, да? А очень просто! Для этого есть два пути, которыми я обычно пользуюсь. Уверяю, есть еще и другие…
- Открыть опять Notepad (Блокнот), для особо забывчивых – Start | Programs | Accessories | Notepad (Пуск | Программы | Стандартные | Блокнот). Хотя давно пора выставить его иконку на рабочий стол… Открыли? Ну и оттуда File | Open (Файл | Открыть)… достать наш родной, единственный и неповторимый shablon.html. Получилось? Ну и славненько…
- Если у вас открыт браузером этот файл, щелкните правой кнопкой мыши по экрану, в появившемся меню выберите View Source (Просмотр HTML-кода), результат будет тот же. Наш файл сам откроется в NotePad!
- Есть конечно и еще дикий способ… заменить расширение shablon.html на shablon.txt и потом открыть его. Но потом опять придется сохранять под расширением .html. Так что не советую…
Итак, хватит болтовни, посмотрим что у нас там осталось с прошлого раза:
Листинг 2. Повторенье - мать ученья!
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Вы уже выучили наизусть этот наш шаблон как «Отче наш»? Нет? Странно… мы им будем пользоваться постоянно.
Хотя, скажу вам по секрету, можно писать эти теги и строчными буквами, браузеру на это начхать. Точно так же откроет он и содержимое этого файла:
Листинг 3. Вариация на тему
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Ну а теперь запомнили? Еще повторить? Ладно… в общем, объясняю, я буду писать буквы всех тегов строчными буквами исключительно из-за того, чтобы вам легче было отличать изменяемую часть от постоянной. Договорились? А вы можете писать как хотите. Как удобней.
Итак, немного изменим содержимое нашего шаблона, вставив туда свою фотографию myfoto.jpg. Кстати, эта фотография должна лежать в той же папке, что и shablon.html.
Листинг 4. Пример простого документа HTML
<HEAD>
<TITLE>Моя Домашняя Страничка</TITLE>
</HEAD>
<BODY>
<IMG src="myfoto.jpg">
Ура! Привет мир! Привет люди! Встречайте!
</BODY>
</HTML>
Ну и сохраним этот файл уже не под именем shablon.html, а под другим именем, например, myhome.html. В принципе, можно сохранить и под расширением .htm. До недавнего времени я так и поступала. Как известно, краткость - сестра таланта, и я всегда старалась сэкономить если не на деньгах, то хотя бы на буквах. Каково же было мое изумление, когда, загрузив свою новую страничку на сервер, я поняла, что день, потраченый на загрузку файлов на сервер прошел впустую. Не загрузилось ни-че-го! И только, прочитав инструкцию сервера, я поняла, что ошибка - в недостающей четвертой буковке… Вот вам и талант, вот вам и сестра! Вот вам и родня! Так что будьте бдительны! И не забудьте сохранить его в той же папке, что и shablon.html и myfoto.jpg.
Надеюсь, вы все сделали правильно? Чтобы проверить, пойдем и откроем файл myhome.html и посмотрим что получилось. А должно получиться примерно следующее:
myhome.html
Нда…негусто. Но все же лучше, чем ничего.
Так что же все-таки собой представляет HTML, буквенная аббревиатура которого пугает непосвященных непонятными символами, знаками, тегами и дескрипторами?
Спешу вас сразу обрадовать, HTML - это не язык программирования. Вам не нужно будет изучать массивы, переменные и встроенные функции. HTML - это просто язык разметки. И написан он простым английским языком. И переводится очень просто: Hypertext Markup Language. Что в переводе как раз это и означает. И все остальные теги также легко переводятся. Так что вам достаточно будет тех куцых знаний английского, которые дала родная средняя школа.
Разжевываем с помощью переводчика:
HTML - нам уже понятен;
HEAD - заголовок документа;
TITLE - название документа;
BODY - тело документа
Ну а что же такое IMG src - хитро спросите вы, это что за абракадабра? И почему, например, не rcs или не scr?
А тоже очень легко. Если вы поймете, что это - сокращенная запись от Image source (Источник изображения), вам сразу все станет понятно. Теперь, даже если вас разбудят среди ночи и попросят вставить изображение в ваш html-документ, вы нипочем не сделаете ошибку и напишете правильно:
<IMG src = …>
Понятно? Ну и славненько. Ну а теперь, не бойтесь, на этот раз ни слова философии!
