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

ЛИЧНЫЙ КАБИНЕТ 

 

Здравствуйте гость!

 

Логин:

Пароль:

 

Запомнить

 

 

Забыли пароль? Регистрация

Повышение уникальности

Предлагаем нашим посетителям воспользоваться бесплатным программным обеспечением «StudentHelp», которое позволит вам всего за несколько минут, выполнить повышение уникальности любого файла в формате MS Word. После такого повышения уникальности, ваша работа легко пройдете проверку в системах антиплагиат вуз, antiplagiat.ru, etxt.ru или advego.ru. Программа «StudentHelp» работает по уникальной технологии и при повышении уникальности не вставляет в текст скрытых символов, и даже если препод скопирует текст в блокнот – не увидит ни каких отличий от текста в Word файле.

Результат поиска


Наименование:


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

Информация:

Тип работы: лабораторная работа. Добавлен: 12.06.2012. Сдан: 2011. Страниц: 10. Уникальность по antiplagiat.ru: < 30%

Описание (план):


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

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

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

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

  Лабораторная  работа № 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трокой. Закрывающий тег </Р> рассматривается как  необязательный. Подразумевается, что он стоит перед тегом, который задает начало очередного абзаца документа. Например:
  <Н1>Заголовок</Н1>
  <Р>Первый  абзац</Р>Второй абзац
  <Н2>Заголовок  второго уровня</Н2>
  Следствием  наличия специального тега, определяющего  абзац, является тот факт, что обычного символа конца строки, вводимого  по нажатию клавиши ENTER, для создания абзацного отступа недостаточно.
  Язык  HTML рассматривает символы конца строки и пробелы особым образом. Любая последовательность, состоящая только из пробелов и символов конца строки, при отображении документа рассматривается как одиночный пробел. Это, в частности, означает, что символ конца строки даже не осуществляет перехода на новую строку (для этой цели используется текстовый элемент, задаваемый непарным тегом <BR>).
  В качестве ограничителя абзацев может  также использоваться горизонтальная линейка. Этот элемент задается непарным тегом <HR>. При отображении документа на экране линейка разделяет части текста друг от друга. Ее длина и толщина задается атрибутами тега <HR>. 

  <HR ALIGN="RIGH” SIZE="10" WIDTH="50%">
  Этот  тег создает горизонтальную линейку  шириной в 10 пикселей, занимающую половину ширины окна и расположенную справа. 

  Гипертекстовые ссылки.
   Гипертекстовая ссылка (рис. 2) является фрагментом текста документа и потому задается текстовым элементом, определяемым при помощи парного тега <А>. Этот элемент содержит обязательный атрибут, который не может быть опущен. В  данном случае обязательным является атрибут HREF= (знак равенства показывает, что необходимо задать значение этого атрибута). 

  Рис. 2 На Web-странице гипертекстовые ссылки выделяются цветом и подчеркиванием 

  В качестве значения атрибута используется адрес URL документа, на который указывает ссылка. Она может указывать на произвольный документ, располагающийся на любом общедоступном узле сети (Web-узел, архив FTP и прочие). Например, открывающий тег ссылки может иметь вид <А HREF="http://www.site.com/index.htm">.
  Адрес URL может быть задан в абсолютной форме то есть начинаться с указания протокола и адреса Web -узла. Такая запись адреса используется, когда необходимо направить посетителя на другой Web-yзел, и рассматривается как внешняя ссылка.
  При использовании относительного адреса в ссылке задается только относительный путь поиска для документа. В этом случае предполагается использование того же протокола и того же Web -узла, а ссылка рассматривается как внутренняя. Внутренняя ссылка сохраняет свою работоспособность в случае изменения адреса Web-узла как целого (например, в результате его переноса на другой сервер), поэтому при потенциальной возможности такого события следует отказываться от полного задания адресов в гиперссылках.
  Гиперссылки можно использовать для ссылки на мультимедийные файлы. Это удобно, так как в этом случае не приходится ждать загрузки мультимедийных файлов при работе с данной страницей. Если же требуется интегрирование объектов мультимедиа в Web -страницу, используют парный тег <OBJECT> или нестандартный непарный тег <EMBED>, который тоже поддерживается наиболее распространенными браузерами.
  Полный  формат гиперссылки включает возможность  ссылки на определенное место внутри страницы, так называемые внутренние ссылки. Но это можно сделать для страниц собственной разработки, пометив соответствующее место при помощи якоря. Якорь задается также при помощи парного тега <А>, но в роли обязательного выступает атрибут NAME=. Значение этого атрибута — произвольная последовательность латинских букв и цифр (пробелы недопустимы), рассматриваемая как имя якоря. Для ссылки вместо URL задается имя метки , к которой выполняется переход:
  <A HREF="#имя метки">текст ссылки</A>
  Символ  # означает, что ссылка указывается на метку, а не на внешний файл. Для создания конечной закладки ссылки применяется тег <А> с атрибутом NAME:
  <A name=”имя метки”>
      <! – текст элемента метки  -->       </A>
  Допустим, документ имеет несколько разделов, из названий которых составлен список (подобно оглавлению)
     <A href=”#глав1”>Глава 1. Безенчук и &laquo;нимфы&raquo;  </A><BR>
  Текст всего документа оформляется  обычным образом – с одним  отличием: заголовки глав снабжаются якорями, для которых заданы соответствующие  имена name:
    <H1>Часть первая. Старгородский лев</H1>
       <H2><A name=”глав1> Глава 1. Безенчук и &laquo;нимфы&raquo;  </A><H2>
           <! – текст элемента метки --> 

  Выполнение 

  Упражнение 1. Создание простейшей Web-страницы
  
  Запустила текстовый редактор Блокнот
  (Пуск  • Программы • Стандартные  • Блокнот). 
 
 
 
 
 

  Ввела следующий документ:
   <HTML>
  <HEAD>
  <TITLE>Заголовок документа</TITLE>
  </HEAD>
  <BODY>
  Содержание
  документа
  </BODY>
  </HTML> 

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

    
 

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

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

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

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

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

  Данные  слова отображаются в одной строке. Это происходит потому, что для  переноса строк существует специальный непарный тег <br>.
  
a

  При уменьшении ширины окна текст переносится  сообразно, т.е. не выходит за границы по горизонтали. Но если текст не помещается по вертикали, то появляется ползунок для прокрутки. 

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

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

  Открыла документ first.htm в программе Блокнот.
  Удалила весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который в дальнейшем вводился в последующих пунктах этого упражнения, я размещала после тега <BODY>, а его конкретное содержание было выбрано произвольно.
  Цвет  фона заменила <body bgcolor="Cornsilk">, добавив тег bgcolor.
  Ввела заголовок первого уровня, заключив его между тегами <Н1 > и </Н1 >. Ввела заголовок второго уровня, заключив его между тегами <Н2> и </Н2>. Добавила для обоих заголовков выравнивание по центру <тег align="center">, а текст h2 (название стихотворения) выделила курсивом <i></i>.  Изменила (стандартный – черный) цвет текста для автора и названия стихотворения.
   Ввела отдельный абзац текста, начав его с тега <Р>. Пробелы и символы перевода строки использовала внутри абзаца произвольно. Ввела еще несколько абзацев текста, начав их с тега <Р>. В конце, отделив также абзацем, с правостороннем выравниванием поставила год написания стиха.
  Ввела тег горизонтальной линейки <HR>, отчеркнув произведение.
  Заголовок документа изменила на «Н. Гумилев  – Жираф (1908)».
  Сохранила этот документ под именем paragraph.htm. 

  Запустила программу Internet Explorer {Пуск • Программы • Internet Explorer). Дала команду Файл • Открыть. Щелкнула на кнопке Обзор и открыла файл paragraph.htm.
  
  Посмотрела, как отображается этот файл. Установила соответствие между элементами кода HTML и фрагментами документа, отображаемыми на экране. 

  При теге нового абзаца <p> (а также заголовков, например) текст по умолчанию выравнивается по правой стороне. 
 
 
 
 
 

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

  Открыла документ first.htm в программе Блокнот.
  Удалила весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который в  дальнейшем вводился в последующих  пунктах этого упражнения, я размещала после тега <BODY>, а его конкретное содержание было выбрано произвольно.
  
  Ввела фразу: Текст до ссылки.
  Ввела тег: <A HREF= «first.htm»>.
  Ввела фразу: Ссылка.
  Ввела закрывающий тег </А>.
  Ввела фразу: Текст после ссылки.
  Сохранила документ под именем link.htm. 

  Примечание: Документ, на который производится ссылка (first.htm), должен находиться в одной директории с хранящимся link.htm
  
  Запустила программу Internet Explorer (Пуск • Программы • Internet Explorer).
  Дала команду Файл • Открыть. Щелкнула на кнопке Обзор и открыла файл link.htm.
  Убедилась в том, что текст между тегами <А> и </А> выделен как ссылка (цветом и подчеркиванием). 

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

  Применила данный тег и для создания ссылок на внешние источники:
  
 
 

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

  4. Где отображается  содержимое элемента BODY?
  Содержимое (основное содержание) данного элемента составляет тело документа. Грубо говоря, это то, что мы будем видеть на web-страничке, будь то сплошной текст или текст определенной структуры и формата, украшенный изображениями, сдобренный ссылками и снабженный таблицами. 

  7. Какие теги определяют  структуру документа  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> 

  11. Сформулировать правила  вложения элементов  языка HTML?
  Правила вложения элементов:
  • Элементы не должны пересекаться. Другими  словами, если открывающий тег
  располагается внутри элемента, то и соответствующий  закрывающий тег должен
  располагаться внутри этого же элемента.
  • Блочные элементы могут содержать  вложенные блочные и текстовые  элементы.
  • Текстовые элементы могут содержать  вложенные текстовые элементы.
  • Текстовые элементы не могут содержать  вложенные блочные элементы.
  Строго  говоря, все правила языка HTML можно рассматривать исключительно как «пожелания». Средство, используемое для отображения Web-документа, сделает все возможное, чтобы истолковать разметку наиболее разумным образом. Тем не менее, гарантию правильного воспроизведения документа дает только неукоснительное следование требованиям спецификации языка.
и т.д.................


Перейти к полному тексту работы


Скачать работу с онлайн повышением уникальности до 90% по antiplagiat.ru, etxt.ru или advego.ru


Смотреть полный текст работы бесплатно


Смотреть похожие работы


* Примечание. Уникальность работы указана на дату публикации, текущее значение может отличаться от указанного.