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

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


Задачи и их решения по информатике и математике
Web-программирование -->> 2. Способы форматирования HTML-документов

Практическая работа №1. Создание простой страницы и отображение в браузере

Для того, чтобы отобразить HTML – документ, браузер принимает его из сети и выполняет команды встреченные в тегах (дескрипторах). Сами теги не отображаются в окне браузера, представляется только результат обработки HTML – документа.
HTML – документ может начинаться с тега <!DOCTYPE>, указывающего на версию языка HTML, с помощью которого написан данный документ.
 
Например, указание на 4-ю версию языка выглядит таким образом:
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0//EN”>

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


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

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