Практика 1 (Web-программирование)

20 Февраль 2014 →

Общие требования к лабораторным работам по курсу "Информационные сети".

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

Рекомендуется сначала скопировать в свою страничку текст примера, добиться, чтобы он работал, а затем надо выполнить самостоятельно задание.

Там, где указан сценарий, рекомендуется действовать в соответствии с этим сценарием, так как это упрощает освоение материала.

Теоретический материал. HTML.

Основная идея HTML.

Определение языка HTML (Hyper Text Markup Language): базовый язык для документов сети Internet, кроме того, это – универсальный формат для передачи данных в интегрированных системах.

Цели.

1) создание короткого кода, преобразующего текст в форматированный текст с обязательной возможностью вставки гиперссылок (то есть ссылок на другие документы).

2) правила формирования такого гипертекста должны быть ориентированы на человека, а не на какое-то программное средство, т.к. во-первых, нельзя связываться ни с какой фирмой-производителем программного обеспечения, а во-вторых, HTML – должен быть живым развивающимся языком, чтобы отвечать на изменяющиеся потребности пользователей сети Internet.

Конечно, вторая цель не достижима абсолютно, т.к. читает Html – текст не человек, а программа – браузер. Очевидно, что и процесс составления гипертекста тоже автоматизируют те или иные программы, например, Home site. Но т.к. стандарт HTML часто изменяется, вспомогательные программы не всегда успевают за ним.

Internet охватывает все большее число сторон нашей жизни. Умение прочесть, составить или слегка изменить существующий Web - документ с каждым днем становится все более необходимым. Кроме того, для организаций Web-представительство в наши дни – необходимое средство коммуникации с партнерами, клиентами, потенциальными покупателями товаров и услуг. Грамотно составленное Web-представительство может выступать в роли мощной рекламы. Таким образом, специалист в области, далекой от информационных технологий, должен достаточно ясно представлять, чего можно ожидать от Web-сайта, какие требования предъявлять к разработчику. А специалист по информационным системам должен уметь составлять такие сайты.

Заметим, что базовый HTML – статичный текст. Чтобы внести в него динамические элементы (например, выпадающие меню), требуется написать программу на Java-Script. Динамическое формирование страницы на стороне сервера выполняется на специализированных языках, например, на PHP.

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

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

Например:

"Мама мыла раму, дальше показать курсивом а котик играл с клубком. закончить показ курсивом Мальчик забрал у котика клубок."

Здесь цветом выделены особые пометки – тэги.

Браузер "отрабатывает" тэги, то есть, не показывая их, производит изменения текста.

Существуют теги – контейнеры, которые состоят из открывающего тэга:

< имя атрибут = "значение" атрибут = "значение" атрибут = "значение" …>

и закрывающего:

Есть и одиночные тэги, не имеющие закрывающего.

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

имеет закрывающий, но его можно не писать (

обозначает абзац).

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

Пример ошибочной записи:

...

...

...

Пример правильной записи:

...

...

...

Синтаксис тэгов.

Большинство тегов имеют атрибуты, которые выглядят как имя = "значение"

Если значение атрибута состоит из символов A-Z или 0-9, то кавычки можно опускать. Кроме того, если имя тега совпадает со значением, то значение можно не писать. Это называется минимизированным синтаксисом атрибута.

Кроме тегов и простого текста в HTML могут быть, так называемые, символьные объекты или Escape последовательности. Они нужны для представления в документе символов, запрещенных синтаксически или физически. Например,

Символ на экране браузера

Запись в тексте на HTML

<

&lt

"

& quote

&copy

Регистр букв для тегов и атрибутов не важен!

Любое количество пробелов и переходов на новую строку эквивалентно одному пробелу!

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

Стили.

Начиная с четвертой версии HTML, для профессинального составления документов рекомендуется пользоваться листами стилей. Цели, преследовавшиеся при создании листов стилей:

Листы стилей позволяют отделить содержимое гипертекста от его формата.

Для аппаратно совместимых компьютеров листы стилей позволяют задать больше многообразие форматов.

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

Задать стиль можно одним из следующих способов:

STYLE – атрибут любых тэгов-элементов BODY. Не рекомендуется часто использовать, т.к. он нарушает концепцию разделения содержимого и формата.

Элемент STYLE тэга HEAD. Первые две цели достигнуты, третья почти.

Атрибут STYLE тэга LINK указывает на внешний источник, содержащий лист стилей. Все три цели достигнуты.

Внимание! К концу курса у Вас должна получиться WEB-страничка. Рекомендуется создавать ее последовательно, добавляя текст и оформление в процессе изучения HTML. Далее в тексте методических указаний синим цветом изображены примеры. Можно скопировать текст примера в свой файл, сделать необходимые изменения, затем исследовать результат. Наконец, следует применить изучаемые конструкции самостоятельно.

HTML – общий подход, основная структура. Тэги
,

, атрибут TITLE, тэг TITLE, атрибуты тэга BODY: BGCOLOR, BACKGROUND, LEFTMARGIN, RIGHTMARGIN, TOPMARGIN, BOTTOMMARGIN, BGPROPERTIES).

Цель: Знакомство с основной структурой HTML – документа. Некоторые тэги.

Задание: Пользуясь только текстовым редактором (например, встроенным в Win commander, или NotePad) составить текст, состоящий из обязательной структуры и тэгов. Просматривать результат браузером (Internet Explorer версии не ниже 4.0).

Последовательность выполнения:

Вызовите проводник (щелчок по кнопке «Пуск» правой кнопкой мыши, затем левой кнопкой мыши щелчок по слову «Проводник»). Создайте на диске D папку со своим именем.

Откройте блокнот и внесите следующий текст - обязательная структура HTML документа.

моя первая страничка

Сохраните текст из блокнота в виде файла с именем "index.htm". Для этого щелкните по пункту меню «Файл – сохранить», в появившемся окне перейдите в свою папку, введите имя файла, обязательно задайте тип файла "все файлы". Закройте блокнот.

Далее указываются действия, которые вам следует выполнять на каждом занятии со страничкой. В проводнике найдите свой файл с картинкой Internet Explorer. Если картинка другая, скорее всего вы ошиблись, набирая тип файла. Если это так, то переименуйте файл. Откройте файл двойным щелчком мыши. Запустится Internet Explorer, и в его окне вы увидите слова "моя первая страничка", а в заголовке окна – текст "мой сайт".

Теперь в меню найдите "вид – в виде HTML" (или view – source), щелкните – Вам будет показан исходный текст на HTML в блокноте. У вас одновременно работают Internet Explorer, проводник и блокнот.

Введите перед словом "первая" слово "замечательная". В меню блокнота щелкните по "файл – сохранить". Затем щелкните на панели задач на браузер с Вашей страничкой, в нем щелкните по "обновить" (refresh). Результат – текст на экране изменился: появилось слово "замечательная".

Ваша страничка – это содержимое тэга – контейнера , поэтому далее вписывайте команды и текст в этот контейнер. Сначала изучите тэг «параграф или абзац». Каждый абзац изображается с новой строки, перед ним браузер делает пропуск. Заключите в контейнер

ранее набранный текст, кроме того введите еще несколько абзацев.

На улице стояла прекрасная мокрая погода.

Капли падали ей на спинку, затекали под брюшко и за лапки, и это было восхитительно!

Если в MSWord мы нажимаем на клавишу Enter для того, чтобы перейти к следующему абзацу или вставить пустую строку (что одно и то же), то здесь для того, чтобы заставить браузер перейти на новую строку требуется ввести команду
. Очевидно, что это не контейнер! Обычно текст в документе браузер разрывает по своему усмотрению, учитывая размер окна, в котором воспроизводится текст. Тэг
- это команда для браузера "в этом месте перейти на новую строку". В приведенном ниже примере первое предложение браузер покажет на одной строке, не смотря на то, что в блокноте текст набран на разных строках, а второе – на двух:

Мама мыла раму,

а котик играл с клубком

Мама мыла раму,

а котик играл с клубком

Изучим первый атрибут, то есть некоторую характеристику тэга. Вспомните, что атрибуты вносятся в тэг между угловыми скобками (см. теретический материал). Атрибут TITLE - это "всплывающая подсказка " (для Internet Explorer 4.0 и выше), может быть добавлен к любому тэгу. Внесите этот атрибут с разным текстом в тэги BODY, P и посмотрите на результат. Вы должны заметить, что когда мышка останавливается, на эране появляется всплывающая подсказка, одна из заданных вами. Внимание, тэг в документе должен быть один, находиться он должен обязательно после тэга (если вы копируете текст из примеров, соблюдайте правила построения документа, описанные в пункте 2!).

….

Мама на кухне стирала белье,

Котик усатый смотрел на нее.

Теперь вернемся к тэгу .

- это тело документа. Несколько атрибутов позволяют задать общие характеристики для всей странички. Рассмотрим их по порядку. BGCOLOR – атрибут, задающий цвет фона документа в случае отсутствия картинки, или если картинка занимает не весь экран. Цвет задается либо словом, например, RED, либо в виде последовательности шестнадцатеричных цифр. Длина всей строки – 6 цифр. Причем первые две цифры определяют интенсивность красного цвета, вторые – зеленого, третьи – синего. Цифра 0 – нет цвета, цифра F – цвет наибольшей интенсивности. В примере задан синий цвет. Попробуйте найти нежные спокойные цвета для вашей страницы. Маленькая подсказка: скорее всего, вам потребуется интенсивность всех цветов задавать в диапазоне от СС до FF.

Рассмотрим еще атрибуты тэга BODY. LEFTMARGIN, RIGHTMARGIN, TOPMARGIN, BOTTOMMARGIN – атрибуты, определяющие отступы от края окна до текста слева, справа, сверху и снизу соответственно. Задайте разные значения у этих атрибутов, посмотрите на результат.

BACKGROUND – атрибут, указывающий файл-картинку, который будет использоваться в качестве фона документа. Допустимые форматы файлов – JPG и GIF. Файл должен находиться в Вашей папке, так что скопируйте его в эту папку.

BGPROPERTIES = FIXED - атрибут, фиксирующий (делающий неподвижной) картинку на фоне. Для того чтобы увидеть результат, надо сделать так, чтобы текст странички не умещался на одном экране. Проще всего добиться этого можно, скопировав содержимое документа несколько раз.

Рекомендуется использовать непрерывный пробел (&nbsp Non-breaking spaces) вместо обычного пробела в тех случаях, когда Вы хотите предотвратить разнесение двух соседних слов на разные строки. Например, в выражении ‘Windows 2000’. Кроме того, набор из этих пробелов не сжимается браузером, таким образом, получаются большие пропуски между словами.

Мы работаем в операционной системе Windows &nbsp 2000.

Промежутки &nbsp &nbsp &nbsp между &nbsp &nbsp &nbsp словами

Атрибуты тэга задают размер шрифта и цвет. Обратите внимание на то, что размер задается в особых единицах измерения (число от 1 до 7). Цвет можно задавать и словом и в так называемой RGB нотации, т.е. шесть шестнадцатеричных цифр, по две обозначающих интенсивность цвета (красного, зеленого, синего). Устаревший тэг, далее мы научимся делать все это на современном уровне – с использованием таблиц стилей! Тэги FONT можно вкладывать друг в друга. Каждый последующий тэг временно отменяет атрибуты предыдущего.

красный текст размера 5

зеленый текст размера 5

красный текст размера 5

черный текст размера 3

синий текст размера 7

Еще один атрибут для тэга ! Умалчиваемый цвет текста задается в атрибуте TEXT тэга BODY. Этот атрибут задает цвет для того текста, цвет которого не указан тэгами FONT.

Список оформляется следующим образом. Сначала пишется тэг – контейнер

, обозначающий нумерованный список, или

, обозначающий маркированный список. Затем внутри этого контейнера пишется несколько тэгов – контейнеров

  • , каждый из которых обозначает строку списка. Атрибутом TYPE можно задать вид нумерации. Можно определить начальный номер и т.д. Интересно, что в любой строке вы можете изменить тип нумерации!

    1. первая строка в списке, возможно очень длинная,
    2. но браузер сам свернет ее правильно.

    3. вторая строка
    4. В кастрюлю отправились

      • капуста
      • картошка
      • морковка
      • горох
      • петрушка
      • и свекла …
      • ОХ!
      • Контейнер, вся информация в котором центрируется относительно окна браузера. Попробуйте центрировать какой-нибудь текст, список.

        Раздел 1

        Разделительная линия. Можно задать ее цвет и ширину. Вставьте несколько линий в разных местах вашего документа.


        Тэг вставляет картинку в документ. Атрибут SRC задает имя файла – картинки. Файл с картинкой следует скопировать в свою папку! Можно попытаться растянуть или сжать картинку до указанного размера с помощью атрибутов WIDTH и HEIGHT. Рекомендуется задавать атрибут ALT, который содержит текст, показываемый и в качестве всплывающей подсказки и вместо картинки, если по какой-то причине она не может быть показана. Уточним последнее, рассмотрев некоторые особенности работы браузеров. Для ускорения получения файла по Internet, пользователи часто отключают передачу картинок и передачу звуковых вставок. В IE 5.0, например, это делается в меню «настройка – отображать рисунки». В полученном тексте, таким образом, вместо картинок браузер либо покажет специальный значок «неизвестная картинка», либо высветит Ваш альтернативный текст, что конечно же, предпочтительней! Атрибуты WIDTH и HEIGHT при совместном использовании позволяют программам просмотра зарезервировать место на экране для изображения еще до того, как они будут переданы по сети. Это позволяет пользователю начать чтение, пока передача данных еще продолжается. Эти атрибуты не предназначены для автоматического изменения размера изображения браузерами. Хотя некоторые браузеры могут масштабировать изображение в соответствии с атрибутами WIDTH и HEIGHT, не полагайтесь на это. Таким образом, они должны задавать реальный размер изображения. (Используйте подходящую программу для определения размеров в пикселях и масштабирования изображения, если это потребуется.)

        Атрибут ALIGN может вывести картинку из уровня потока символов и оформить ее как отдельный блок, обтекаемый текстом. Без этого атрибута картинка как будто занимает место одной большой буквы. Значения атрибута ALIGN имеют следующий смысл: ALIGN=LEFT - перемещает изображение к текущему левому краю, временно изменяя этот край так, чтобы последующий текст расположился вдоль правой стороны изображения. ALIGN=RIGHT - перемещает изображение к текущему правому краю, временно изменяя этот край так, чтобы последующий текст переместился вдоль левой стороны изображения. Вставьте картинку в документ, как показано в примере. Не забудьте сначала скопировать файл – картинку в свою папку и изменить значение атрибута SRC на имя вашего файла – картинки. Убедитесь в том, что в первом способе картинка вставляется как буква в текст, а во втором – становится самостоятельным объектом, обтекаемым текстом.

        Текст, внутрь которого

        здесь Вы видите море

        вставлена картина.

        здесь Вы снова видите море

        WIDTH=100 HEIGHT=100 ALIGN = LEFT>

        Этот список расположен справа от картины

        • дельфины
        • киты
        • акулы
        • спруты
        • чайки
        • черепахи
        • рыбы
        • Замечание к тэгу BR. Теперь, когда у нас картинка на экране, возникает вопрос о том, где будет располагаться строка после принудительного разрыва. Атрибут CLEAR тэга BR указывает следующее: «если CLEAR=left, то произойдет разрыв строки, и браузер будет отыскивать, двигаясь вертикально вниз, строчку, на которой нет слева картинки, и только в ней продолжит текст». Аналогично получится для значения right (справа) и all (всюду). У тэга
          есть атрибут CLEAR, который требует перейти на новую строку так, чтобы с заданной стороны не было рисунка.

          ”здесь

          WIDTH=300 HEIGHT=300 ALIGN = LEFT>

          Этот список расположен справа от картины

          • дельфины
          • киты
          • акулы

          • А этот расположен ниже картины

            • спруты
            • чайки
            • черепахи
            • рыбы
            • Заголовок n-того уровня. Документ можно структурировать, разбив его на части с помощью заголовков от 1 до 6 уровня. Важно, что размер букв выбирается браузером самостоятельно, поэтому получается, что заголовки уровней 4-6 очень малы и трудно читаемы. Добавьте в ваш документ текст из примера ниже, но вместо многоточий введите некоторый свой текст.

              Раздел 1. Технические характеристики автомобиля.

              Глава 1. Двигатель.

              Глава 2. Ходовая часть.

              Раздел 2. Описание внешнего вида.

              Глава 1. Модели кузова.

              Глава 2. Передняя панель.

              Таблица формируется следующим образом: сначала надо задать контейнер

              . Затем положить в него один или несколько контейнеров
              , каждый из которых задает строку таблицы. А в каждую строку можно положить некоторое количество тэгов - контейнеров
              или , которые обозначают ячейки таблицы, причем ТН – заголовочные ячейки, а - обычные данные. Можно перед первой строкой задать тэг - контейнер
              - заголовок таблицы. Атрибут BORDER тэга TABLE задает ширину рамки таблицы. Вставьте в ваш документ таблицу, попробуйте добавить в таблицу строку, добавить колонку.

              Список абонентов

              имя дата рождения где учится

              Иванов П.И. 01.04.80 ВИ РГТУ

              Петров Н.А. 23.09.81 Юридический лицей

              Сидоров Р.В. 13.08.82 ----

              Объединение ячеек в HTML задается следующим образом: ячейка может занимать место нескольких ячеек по горизонтали, тогда у нее задается атрибут COLSPAN, значение которого равно количеству покрываемых ячеек вправо. Аналогично атрибут ROWSPAN задает количество покрываемых ячеек вниз. Попробуйте сделать объединение ячеек по горизонтали так, как указано в примере, и самостоятельно – по вертикали.

              План по ремонту автомобильных дорог

              1 квартал 2 квартал

              январь февраль март

              апрель май июнь

              100 120 130

              150 150 80

              Бегущая строка вносит в документ некоторое оживление. Вы можете задавать размер этой строки, цвет фона, можете расположить на нее текст, один или несколько рисунков, гиперссылок. Атрибуты тэга задают стиль движения объекта, направление, количество повторов и т.п. Рассмотрим эти атрибуты: ALIGN – выравнивание в строке (возможные значения: left – по левому краю, right – по правому краю окна); BEHAVIOR – поведение (scroll – текст перемещается в одном направлении, slide – текст, достигнув конца окна, останавливается, alternate – текст отражается от краев окна); BGCOLOR – цвет фона (можно задавать, как обычно, или словами или в виде цифр); HEIGHT – высота строки, задаваемая или числом точек или в процентах; LOOP – количество повторов пробежек по экрану, если не указан, то повторяется бесконечно; SCROLLAMOUNT – величина шага, на который перемещается текст за один раз; SCROLLDELAY – задержка времени перед следующим шагом; VSPACE – отступ (пустое место) сверху и снизу текста от краев выделенной полосы; WIDTH – ширина полосы для бегущей строки. Попробуйте внести в бегущую строку текст, картинку (небольшую!), поменяйте атрибуты, добиваясь большей или меньшей скорости перемещения и т.д.

              HEIGHT =50 LOOP=10 SCROLLAMOUNT=5 SCROLLDELAY=1

              VSPACE =10 WIDTH =500>

              ПРИВЕТ!

              Вопросы: Hn, TABLE, TR, TD, TH, MARQUEE.

              Основная структура HTML страницы. Тэг BODY, его место и атрибуты. Всплывающая подсказка. Абзац. Задание цвета фона и цвета текста. Фиксирование картинки на фоне.

              Выделение цветом, списки, разделительные линии, центрирование, вставка картинок. Обеспечение свободного места слева, справа или с обех сторон.




              See also:
              Для студента
              Похожие записи

              Комментарии закрыты.