Оглавление

2. Первый HTML-документ

Попробуем создать наш первый HTML-документ. Для его создания можно воспользоваться любым текстовым редактором. Самым распространенным редактором является обычный Блокнот. Открываем Блокнот и набираем содержимое листинга 1.

 

Листинг 1. Первый HTML-документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict,dtd">
<html>
 <head>
 <title>Заголовок страницы</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
 <p>
  <strong>Этот текст выделен полужирным шрифтом</strong>
 </p>
</body>
</html>

 

Сохраняем введенный текст в формате HTML, например, под именем test.html. Для этого в меню Файл выбираем пункт Сохранить как. В открывшемся окне в строке Имя файла вводим "test.html", а в списке Тип файла указываем Все файлы. Выбираем папку, например, Рабочий стол, и нажимаем Сохранить. Закрываем Блокнот.

 

Запускаем Web-браузер, например, Internet Explorer. С помощью пункта Открыть меню Файл открываем сохраненный файл test.html. Если все сделано правильно, то в окне Web-браузера будет показана выделенная надпись "Этот текст выделен полужирным шрифтом", а в строке заголовка будет надпись "Заголовок страницы —Microsoft  Internet  Explorer". Теги в окне Web-браузера не отображаются!
Теперь попробуем изменить заголовок в окне Web-браузера. Для этого необходимо открыть исходный текст в формате HTML. Это можно сделать тремя способами:
-   в меню Вид выбрать пункт Просмотр HTML-кода;
-   правой кнопкой мыши щелкнуть в любом месте окна Web-браузера. В появившемся контекстном меню выбрать пункт Просмотр HTML-кода;(1)

-   открыть файл, содержащий исходный код, с помощью Блокнота или другого текстового редактора. Этот способ является самым универсальным. Настоятельно рекомендую использовать именно его.

 

В  итоге исходный текст будет доступен для  редактирования.  Изменим строчку
  <title>Заголовок страницы</title>
на
 <title>Моя первая Web-страница</title>

и сохраним файл (меню Файл, пункт Сохранить). Теперь вернемся в Web-браузер и обновим Web-страницу. Обновить можно следующими способами:
-   в меню Вид выбрать пункт Обновить;
-   выбрать этот же пункт в контекстном меню;
-   нажать кнопку Обновить на Панели инструментов;
-   на клавиатуре нажать клавишу <F5>.


В результате строка заголовка изменится на "Моя первая Web-страница — Microsoft Internet Explorer".

 

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

 

Очень хорошей альтернативой Блокноту является программа Notepad++. Она позволяет корректно работать как с кодировкой windows-1251, так и с кодировкой UTF-8, а также имеет подсветку синтаксиса HTML, JavaScript, PHP и др. Именно этой программой мы будем пользоваться на протяжении всей книги.

 

Notepad++

 

Скачать программу Notepad++ можно абсолютно бесплатно со страницы http://notepad-plus.sourceforge.net/ru/site.htm. Из двух вариантов (ZIP-архив и инсталлятор) советую выбрать именно инсталлятор, так как при установке можно будет указать язык интерфейса программы. Установка Notepad++ предельно проста и в комментариях не нуждается.


Запускаем программу Notepad++. В меню Кодировки устанавливаем флажок Кодировать в ANSI. Набираем код, представленный в листинге 1.1, а затем в меню Файл выбираем пункт Сохранить как. В открывшемся окне в строке Имя файла вводим "test.html". Выбираем папку, например, Рабочий стол, и нажимаем Сохранить. Для просмотра открываем файл с помощью Web-браузера.

 

Чтобы открыть какой-либо файл на редактирование, в меню Файл выбираем пункт Открыть или щелкаем правой кнопкой мыши на ярлыке файла в Проводнике Windows и из контекстного меню выбираем пункт Edit with Notepad++.(3)

Примечания:
  • В некоторых случаях результат этих двух действий может быть разным. Если Web-страница состоит из нескольких HTML-документов, то первый способ отобразит только код структуры Web-страницы, а не исходный код каждого из HTML-документов. Второй способ позволяет отобразить исходный код лишь одного HTML-документа, а от места щелчка зависит, код какого HTML-документа будет отображен. В нашем случае результат будет одним и тем же.
  • Необходимо заметить, что все описанные действия возможны только для локально сохраненных HTML-документов. Если HTML-документ опубликован в Интернете, то можно лишь созерцать исходный код, а вот изменить его таким способом нельзя.
  • Вместо Notepad++ можно воспользоваться редакторами PHP Expert Editor, Aptana Studio или NetBeans. Эти редакторы помимо подсветки синтаксиса предоставляют множество дополнительных функций. Тем не менее для быстрого редактирования файла удобнее пользоваться Notepad++.
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити