Создание Web-докyмeнтов и простейшей Web-страницы, изучение приемов форматирования, создание гиперссылок

  СТАРООСКОЛЬСКИЙ ТЕХНОЛОГИЧЕСКИЙ ИНСТИТУТ (ФИЛИАЛ) 

  ФЕДЕРАЛЬНОГО  ГОСУДАРСТВЕННОГО ОБРАЗОВАТЕЛЬНОГО УЧРЕЖДЕНИЯ

   

  ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ 

  «НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ ТЕХНОЛОГИЧЕСКИЙ  

  УНИВЕРСИТЕТ «МИСИС» 
 
 
 
 
 
 

  Лабораторная  работа № 1 

  по  дисциплине "Корпоративные информационные системы" 

  Создание Web-докyмeнтов и простейшей Web-страницы, изучение приемов  форматирования, создание гиперссылок 
 
 
 
 
 
 

  Проверил:

  Антонов В. В. 

  Выполнила:

  студентка группы ИС-07-2д

  Климова Н. Д. 
 
 
 
 
 

  Старый  Оскол, 2011 г. 

  Лабораторная  работа №1

  Создание Web-докyмeнтов и простейшей Web-страницы, изучение приемов форматирования, создание гиперссылок 

  Вариант - 4 

  Цель  работы: Создание простейших документов HTML с  использованием приемов форматирования и создания гиперссылок 

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

  Автономные  Wеb-документы исполъзуют язык HTML (HyperText Markup Language — язык разметки гипертекста). Гипертекст, то есть расширенный текст, включает дополнительные элементы: иллюстрации, ссылки, вставные объекты. Под разметкой понимается использование специальных кодов, легко отделяемых от смыслового содержания документа и используемых для реализации гипертекста. Применение этих кодов подчиняется строгим правилам, определяемым спецификацией языка HTML.

  Особенность описания документа средствами языка HTML связана с принципиальной невозможностью достижения абсолютной точности воспроизведения исходного документа. Предполагается, что документ будет широко доступен в Интернете, и поэтому неизвестно, как будет организовано его воспроизведение. Документ может быть представлен на графическом экране, выведен в чисто текстовом виде или просто «прочитан» программой синтеза речи. Разметка HTML во всех этих случаях должна быть принята во внимание. Поэтому язык HTML предназначен не для форматирования документа, а для его функциональной разметки. Например, документы обычно начинаются с заголовков. Свойство части документа «быть заголовком» — это не особенность форматирования документа, а характеристика его содержания.

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

  Современная версия HTML 4.0 может в настоящий момент рассматриваться как «окончательная» редакция языка HTML, содержащая все необходимое для  функциональной разметки документа. Недостаток оформительских средств и средств обеспечения интерактивности восполняется внешними по отношению к HTML средствами, такими как списки стиля и динамические сценарии. Многие Wеb-узлы выполняют автоматическую генерацию Web-стpaниц на основе содержания некоторой базы данных и запроса пользователя. Подобные элементы стали стандартными компонентами современных Web -страниц.

  Управляющие конструкции языка HTML называются тегами и вставляются непосредственно в текст документа. Все теги заключаются в угловые скобки <...>. Сразу после открывающей скобки помещается ключевое слово, определяющее тег, например <DIV>. Теги HTML бывают парными и непарными. Непарные теги оказывают воздействие на весь документ или определяют разовый эффект в месте своего появления.

  При использовании парных тегов в  документ добавляются открывающий и закрывающий теги, которые воздействуют на часть документа, заключенную между ними. Закрывающий тег отличается от открывающего наличием символа «/» (косая черта) перед ключевым словом (</DIV>). Закрытие парных тегов выполняется так, чтобы соблюдались правила вложения.

  <В><I>На этот текст воздействуют два тега</I></В>

  Эффект  применения тега может видоизменяться путем добавления атрибутов.

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

  <Н1 ALIGN="LEFT">

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

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

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

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

  Информацию  о форматировании документа можно  рассматривать как «разметку», добавляемую  в форматируемый документ. Однако для использования текстового процессора не требуется знаний о формате документа и «языке разметки»: изменения, отображаемые на экране, вносятся в документ автоматически. Такой принцип соответствия экранного изображения реальному получил название WYSIWYG (от английского What You See Is What You Get — Что видите, то и получаете). В качестве редактора WYSIWYG для языка HTML можно использовать текстовый процессор Word или входящую в состав Microsoft Office программу FrontPage. Существуют и другие программы того же самого назначения. Работа вручную позволяет создавать более универсальные, более качественные и более разнообразные документы. Второй способ проще освоить, так как он не требует знания зыка HTML Однако в этом случае используются средства форматирования вместо средств описания, что может иногда приводить к нежелательным последствиям.

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

  Процесс создания Web -дoкyмeнтoв сродни программированию и так же подвержен ошибкам. Независимо от того, каким способом создается документ, следует регулярно проверять его соответствие замыслу, просматривая его в различных браузерах.

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

  Применение  языка HTML 

  Структура документа HTML

  Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры. Документ HTML всегда должен начинаться с тега <HTML> и заканчиваться соответствующим закрывающим тегом (</HTML>). Внутри документа выделяются два основных раздела: раздел заголовков и тело документа, — идущих именно в таком порядке. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <HEAD> и </HEAD>. В частности, раздел заголовков должен содержать общий заголовок документа, ограниченный парным тегом <TITLE>.

  Основное  содержание размещается в теле документа, которое ограничивается парным тегом <BODY>. Строго говоря, положение структурных  тегов в документе нетрудно определить, даже если они опущены. Поэтому стандарт языка HTML требует только наличия тега <TITLE> (и, соответственно, </ TITLE >). Тем не менее, при создании документа HTML опускать структурные теги не рекомендуется.

  Простейший  правильный документ HTML, содержащий все теги, определяющие структуру, может выглядеть следующим образом:

  <HTML>

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

  <BODY>

  Текст документа

  </BODY>

  </HTML> 
 
 
 

  Элементы HTML

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

    Так, можно говорить об «элементе BODY», включающем тег < BODY>, основное содержание документа и закрывающий тег </BODY>, Весь документ HTML можно рассматривать как «элемент HTML ». Для непарных тегов элемент совпадает с тегом, который его определяет.

  Большинство элементов языка HTML описывает части содержания документа и помещается между тегами <BODY> и </BODY>, то есть внутрь структурного элемента BODY. Такие элементы делят на блочные и текстовые. Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и еще более мелких частей текста.

  Теперь  можно сформулировать правила вложения элементов.

  • Элементы не должны пересекаться. Другими словами, если открывающий тег

  располагается внутри элемента, то и соответствующий закрывающий тег должен

  располагаться внутри этого же элемента.

  • Блочные элементы могут содержать вложенные блочные и текстовые элементы.

  • Текстовые элементы могут содержать  вложенные текстовые  элементы.

  • Текстовые элементы не могут содержать вложенные блочные элементы.

  Строго  говоря, все правила языка HTML можно рассматривать исключительно как

  «пожелания». Средство, используемое для отображения  Web-документа, сделает все возможное, чтобы истолковать разметку наиболее разумным образом. Тем не менее, гарантию правильного воспроизведения документа дает только неукоснительное следование требованиям спецификации языка. 

  Функциональные  блочные элементы.

  

  В большинстве документов основными  функциональными элементами являются заголовки и абзацы (рис. 1). Язык HTML поддерживает шесть уровней заголовков. Они задаются при помощи парных тегов от <Н1 > до <Н6>. При отображении Web -документа на экране компьютера эти элементы показываются при помощи шрифтов разного размера. 

  Рис. 1Форматирование заголовков и абзацев при отображении Web-страницы в окне браузера 

  Обычные абзацы задаются с помощью парного  тега <Р>. Язык HTML не содержит средств для создания абзацного отступа («красной строки»), поэтому при отображении на экране компьютера абзацы разделяются пустой cтрокой. Закрывающий тег </Р> рассматривается как  необязательный. Подразумевается, что он стоит перед тегом, который задает начало очередного абзаца документа. Например: