Лабораторная работа №1 «Создание простейшей Web -страницы»




Скачать 333.24 Kb.
НазваниеЛабораторная работа №1 «Создание простейшей Web -страницы»
страница1/3
Дата публикации13.12.2013
Размер333.24 Kb.
ТипЛабораторная работа
zadocs.ru > Информатика > Лабораторная работа
  1   2   3
Лабораторная работа № 1

«Создание простейшей Web-страницы »
Цель работы: Получение практических навыков работы в изучение языка гипертекстовой разметки, подготовка материалов к их публикации в Интернет, создание документов, имеющих формат, принятый в Интернете, Web-страниц, написанных на языке HTML.

Теоретические сведения.

Создание Web-документов

Автономные Web-документы используют язык HTML (HyperText Markup Languageязык разметки гипертекста).

Гипертекст, то есть расширенный текст, включает дополнительные элементы: иллюстрации, ссылки, вставные объекты.

Под разметкой понимается использование специальных кодов, легко отделяемых от смыслового содержания документа и используемых для реализации гипертекста. Применение этих кодов подчиняется строгим правилам, определяемым спецификацией языка HTML

Особенность описания документа средствами языка HTML связана с принципиальной невозможностью достижения абсолютной точности воспроизведения исходного документа.

Документ будет широко доступен в Интернете, и поэтому неизвестно, как будет организовано его воспроизведение. Документ может быть представлен на графическом экране, выведен в чисто текстовом виде или просто «прочитан» программой синтеза речи.

Разметка HTML во всех этих случаях должна быть принята во внимание.

Язык HTML предназначен не для форма­тирования документа, а для его функциональной разметки.

Документы обычно начинаются с заголовков. Свойство части документа «быть заголовком» — это не особенность форматирования документа, а характеристика его содержания.

Конкретное средство отображения документа (броузер) выбирает свой способ пред­ставления части документа, описанной как заголовок.

Управляющие конструкции языка HTML называются тегами и вставляются непосредственно в текст документа. Все теги заключаются в угловые скобки <...>.

Сразу после открывающей скобки помещается ключевое слово, определяющее тег, например
.

Теги HTML бывают парными и непарными.

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

Закрывающий тег отличается от открывающего наличием символа «/» (косая черта) перед ключевым словом (
).

Закрытие парных тегов выполняется так, чтобы соблюдались правила вложения.

<В> На этот текст воздействуют два тега
Эффект применения тега может видоизменяться путем добавления атрибутов.

В парных тегах атрибуты добавляются только к открывающему тегу.

Атрибуты представляют собой дополнительные ключевые слова, отделяемые от ключевого слова, определяющего тег, и от других атрибутов пробелами и размещаемые до завершающего тег символа «>».

Способ применения некоторых атрибутов требует указания значения атрибута. Значение атрибута отделяется от ключевого слова атрибута символом «=» (знак равенства) и заключается в кавычки.

<Н1 ALIGN="LEFT">

Определение HTML как языка разметки основывается на том, что при удалении из документа всех тегов получается текстовый документ, совершенно эквивалент­ный по содержанию исходному гипертекстовому документу.

При отображении документа HTML сами теги не отображаются, но влияют на способ отображения остальной части документа.

Создание документов HTML, то можно представить себе два способа их формирования.

Первый состоит в разметке существующего (или создаваемого) документа вручную. При этом автор или редактор добавляет в документ теги раз­метки. Эту работу можно выполнять в текстовом редакторе или редакторе HTML, имеющем специальные элементы управления для упрощения ввода тегов. В обоих этих случаях работа ведется средствами языка HTML, и человек, выполняющий эту работу, должен знать и уметь применять этот язык.

Принципы другого подхода можно понять на основе изучения работы текстовых процессоров. Информацию о форматировании документа также можно рассматри­вать как «разметку», добавляемую в форматируемый документ.

Однако для исполь­зования текстового процессора не требуется никаких знаний о формате документа и «языке разметки»: изменения, отображаемые на экране, вносятся в документ авто­матически. Такой принцип соответствия экранного изображения реальному получил название WYSIWYG (от английского What You See Is What You Get — Что видите, то и получаете).

Простейший редактор WYSIWYG для языка HTML, FrontPage Express, входит в состав операционной системы Windows 98.

Первый способ позволяет создавать более универсальные, более качественные и более разнообразные документы. Второй способ проще освоить, так как он не тре­бует знания языка HTML. Однако в этом случае используются средства формати­рования вместо средств описания, что может иногда приводить к нежелательным последствиям.

Ход работы.

Упражнение 1. Создание простейшей Web-страницы

  1. Запустите текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).

  2. Введите следующий документ:

<НТМL>

<ТIТLЕ>Заголовок документа< /ТIТLЕ>





Содержание документа


  1. Сохраните этот документ под именем first.htm.


! Перед сохранением убедитесь, что сброшен флажок - Не показывать расширения для зарегистрированных типов файлов (Пуск > Настройка > Свойства папки > Вид). В про­тивном случае редактор Блокнот может автоматически добавить в конец имени рас­ширение .ТХТ.

  1. Запустите программу Internet Explorer (Пуск > Программы > Internet Explorer).

  2. Дайте команду Файл >Открыть. Щелкните на кнопке Обзор и откройте файл first.htm.

  3. Посмотрите, как отображается этот файл — простейший корректный документHTML.

Где отображается содержимое элемента TITLE?

Где отображается содер­жимое элемента BODY?

  1. Как отображаются слова «Содержание» и «документа», введенные в двух отдель­ных строчках? Почему? Проверьте, что происходит при уменьшении ширины окна.


Упражнение 2. Изучение приемов форматирования абзацев.

  1. Если это упражнение выполняется не сразу после предыдущего, откройте доку­мент first, htm в программе Блокнот.

  2. Удалите весь текст, находящийся между тегами и .

Текст, кото­рый будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега , а его конкретное содержание может быть любым.

  1. Введите заголовок первого уровня, заключив его между тегами <Н1 > и .

  2. Введите заголовок второго уровня, заключив его между тегами <Н2> и .

  1. Введите отдельный абзац текста, начав его с тега <Р>.

Пробелы и символы пере­вода строки можно использовать внутри абзаца произвольно.

  1. Введите тег горизонтальной линейки
    .

  2. Введите еще один абзац текста, начав его с тега <Р>.

  3. Сохраните этот документ под именем paragraph.htm.

  1. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).

  1. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл
    paragraph.htm.

  2. Посмотрите, как отображается этот файл. Установите соответствие между

эле­ментами кода HTML и фрагментами документа, отображаемыми на экране.

В этом упражнении вы создали документ HTML с разметкой абзацев. Определите, как влияют теги HTML на отображение соответствующих частей документа.

Упражнение 3. Создание гиперссылок

  1. Если это упражнение выполняется не сразу после предыдущего, откройте доку­
    мент first, htm в программе Блокнот.

  2. Удалите весь текст, находящийся между тегами и .

Текст, который будет вводиться в последующих пунктах этого упражнения, необхо­димо поместить после тега .

  1. Введите фразу: Текст до ссылки.

  2. Введите тег: <А HREF="first.htm">.

  3. Введите фразу: Ссылка.

  4. Введите закрывающий тег .

  5. Введите фразу: Текст после ссылки.

  6. Сохраните документ под именем link.htm.

  7. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).


Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл
link.htm.

  1. Убедитесь в том, что текст между тегами <А> и выделен как ссылка (цветом и подчеркиванием).

  2. Щелкните на ссылке и убедитесь, что при этом загружается документ, на кото­рый указывает ссылка.

  3. Щелкните на кнопке Назад на панели инструментов, чтобы вернуться к пре­дыдущей странице. Убедитесь, что ссылка теперь считается «просмотренной» и отображается другим цветом.

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

  1. Перечислить назначение элементов:

,
  1   2   3

Добавить документ в свой блог или на сайт

Похожие:

Лабораторная работа №1 «Создание простейшей Web -страницы» iconЛабораторная работа № Лабораторная работа №3 Тема: «Работа с панелью...
Основные приемы работы(контекстное меню, выделение, группирование объектов, перетаскивание мышью, получение справки)

Лабораторная работа №1 «Создание простейшей Web -страницы» iconЛабораторная работа n 1
Поддержка платформы BizSnap позволяет создавать web-службы и средства коммуникации согласно новейшим стандартам soap/xml для интеграции...

Лабораторная работа №1 «Создание простейшей Web -страницы» iconЛабораторная работа 14
Создание шаблона. Работа с шаблонами документов. Совместное использование Word и Excel

Лабораторная работа №1 «Создание простейшей Web -страницы» iconЛабораторная работа 3 (2003). Тема : Работа с буфером обмена. Создание...
Тема: Работа с буфером обмена. Создание списков. Работа с изображениями в текстовых документах

Лабораторная работа №1 «Создание простейшей Web -страницы» iconЛабораторная работа №5. Генерация отчетов в субд access лабораторная...
Лабораторная работа №3. Изменения экранного образа таблицы в субд access лабораторная работа №4. Простые и сложные запросы к базе...

Лабораторная работа №1 «Создание простейшей Web -страницы» iconЛабораторная работа №2 «Поиск информации в Internet»
Современные службы поиска в Internet ориентированы, прежде всего, на поиск в Web-пространстве Internet и условно могут быть разделены...

Лабораторная работа №1 «Создание простейшей Web -страницы» iconЛабораторно-практическая работа №1 «Создание простейшей базы данных...
Запустите программу субд microsoft Access. Для этого выполните: Пуск Все программы Microsoft office Microsoft office Access 2007

Лабораторная работа №1 «Создание простейшей Web -страницы» iconЛабораторная работа выполняется по темам: «Оптимизационные экономико-математические...
Лабораторная работа выполняется и защищается в соответствии с утвержденным расписанием занятий

Лабораторная работа №1 «Создание простейшей Web -страницы» icon4 учет расходов на создание и обслуживание web–сайта
Для определения трудоемкости разработки web–сайта мбоу сош №41 прежде всего мне бы хотелось составить перечень всех основных этапов...

Лабораторная работа №1 «Создание простейшей Web -страницы» iconЛабораторная работа № Описание предметной области
Целью данной работы является создание такой системы для среднего по величине магазина отделочных материалов «Мастер»

Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
zadocs.ru
Главная страница

Разработка сайта — Веб студия Адаманов