Создание простой страницы и отображение в браузере

Практическая работа №1

Для того, чтобы отобразить HTML – документ, браузер принимает его из сети и выполняет команды встреченные в тегах (дескрипторах). Сами теги не отображаются в окне браузера, представляется только результат обработки HTML – документа.HTML – документ может начинаться с тега <!DOCTYPE>, указывающего на версию языка HTML, с помощью которого написан данный документ.

Например, указание на 4-ю версию языка выглядит таким образом:
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0//EN”>

Создание Web – страницы.

  1. Загрузите текстовый редактор WordPad или Блокнот.
  2. Установите режим Формат – Перенос по словам, чтобы текст страницы не выходил за пределы текущего окна.
  3. Скопируйте исходный текст (без рамки) из лабораторной работы. Вставьте в окно документа Блокнот:                                                   

Моя первая страница. Брачное объявление

Как Апполон, красив и статен,
Как ледокол «Ермак», силен,
Как герцог Букенгемский  знатен,
Как десять ЭВМ, умен,
Как бой курантов, пунктуален,
Как меч Фемиды, справедлив,

Как Казанова, сексуален,
Как муравей, трудолюбив,
Как наркобизнес, обеспечен
И почитаем, как генсек,
Как В. Ульянов, человечен –
Таков я вкратце, человек.

Мне в женщине не надо много:
Лишь только б вышла за такого.

А. Костюшкин

Введите <HTML> непосредственно над текстом и </HTML> непосредственно под текстом страницы. (Эти теги задают начало и конец страницы.)

  1. Введите <HEAD> под дескриптором  <HTML>
  2. Дважды нажмите Enter
  3. Наберите </HEAD> (Эти теги задают служебную часть страницы, не отображаемую в окне браузера).
  4. Введите <TITLE> непосредственно под <HEAD>
  5. Наберите текст названия (заголовка) Web – страницы (Брачные объявления)
  6. Введите </TITLE> в конце заголовка.
  7. Наберите <BODY> непосредственно под тегом </HEAD>
  8. Введите </BODY> непосредственно над дескриптором </HTML> (В этих  тегах задается основной текст страницы).
  9. Сохраните полученный документ под именем index.html (или index.htm).
  10. Обратите внимание на расстановку тегов в странице и запомните ее.
  11. Откройте созданный файл с помощью браузера. Обратите внимание на разницу между исходным файлом и отображением в браузере.
  12. Перейдите в окно редактора HTML  (дальнейшие изменения в тексте HTML – страницы отобразятся в браузере по команде обновить – клавиша F5)

Сохранение начального форматирования текста, пробелов и пустых строк.

1)  Введите в тексте HTML – файла index.htm непосредственно под дескриптором <BODY> тег сохранения форматирования <PRE>
2)  Введите непосредственно над дескриптором </BODY> тег </PRE>
3)  Сохраните, просмотрите и проанализируйте результат в браузере.

Контрольные вопросы:

  1. Какова структура веб-документа?
  2. Какие бывают теги? Как необходимо сохранять веб-документ?