На этой странице

HTML Первая страница


HTML Первая страница


Для создания первой html – страницы можно воспользоваться любым текстовым редактором. Самым распространенным редактором является Блокнот. Открываем Блокнот и набираем содержимое ниже приведенного примера.


<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Первая HTML-страница</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>Привет, мир!</p>
  </body>
</html>

Открыть пример в новом окне

Сохранение HTML – страницы


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

Для удобства работы с примерами, на диске C:\ создайте дополнительно для работы с примерами три папки: Webserver – в этой папке будут в дальнейшем располагаться все файлы в Web – сервера, в папке Webserver – создайте папку home – здесь будут расположены файлы наших сайтов, в папке home – нужно создать папку www – здесь будут расположены наши примеры с HTML – страницами.

Выбираем папку для сохранения, на пример в нашем случае путь будет такой: C:\WevServer\home\www\test.html и нажмем Сохранить и закрываем блокнот.

Рис 1.1
Вид HTML - документа при сохранении.

Смотрите также как построить дерево папок, чтобы в дальнейшем было легче их подключить к web – серверу так как в дальнейшем будет описано как установить web – сервер на локальный компьютер для тестирования сайта.

Переходим в нашу папку C:\WevServer\home\www где мы сохранили файл с расширением test.html, щелкаем по файлу правой кнопкой мыши два раза и файл откроется в вашем любимом Web – браузере который выбран по умолчанию.

Первая HTML-страница


Первая HTML-страница
Первая HTML-страница

Если все хорошо то вы увидите надпись Привет, мир!. Если файл открылся просто в блокноте, то значит при сохранении указали не правильное расширение имени файла.

Программа Notepad++


Как вы видите, что html - теги в окне Web - браузера не отображаются, что вы писали в блокноте используя html – теги , и то что вы видите в окне Web – браузера уже выглядит без них.

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

Скачать программу Notepad++ можно абсолютно бесплатно со страницы сайта http://notepad-plus-plus.org/downloads/

Если вы что-то изменили в нашем *.html - документе (в блокноте), то, чтобы посмотреть как это выглядит в Web – браузере, нужно помнить , что после каждого внесения записей в блокнот , нужно ОБНОВИТЬ Web – браузер. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ .

Таким образом, изменяя что либо в исходном коде, можно визуально оценивать результаты своих изменений, действия простые открываем *html – документ в текстовом редакторе, вносим изменения, сохраняем и обновляем Web – страницу, смотрим результат.

Если вы решили изменить или дополнить новыми записями свой *html – документ, то откройте снова файл в текстовом редакторе и добавьте нужные записи, теги писать нужно обязательно.

Рекомендуемые материалы