Методические указания к практической работе по МДК.02.01 по теме «Форматирование Web-страниц»

Междисциплинарный курс «Информационные технологии и платформы разработки информационных систем» профессионального модуля
ПМ.02 «Участие в разработке информационных систем»
Специальности 230401 «Информационные системы (по отраслям)»

МЕТОДИЧЕСКИЕ УКАЗАНИЯ К ПРАКТИЧЕСКОЙ РАБОТЕ №2

Преподаватель: Соцкова С.Н.
Группа: И 3-6
Дата:
Тема занятия: Форматирование Web-страниц.
Тип занятия: совершенствование знаний, умений и навыков.
Вид занятия: практическая работа с элементами ввода нового материала.
Дидактические цели занятия:
образовательные (знать, уметь): студенты должны
знать: основные определения по разделу «Язык гипертекстовой разметки HTML» (Web-страница, Web-сайт, определение языка HTML, понятие тега и атрибута), основные теги и атрибуты тегов;
уметь: создавать простейшую Web-страницу.
развивающие: выделяют главное, умеют самостоятельно мыслить, развивают логическое мышление, умение планировать свою деятельность, овладевают навыками исследовательской деятельности.
воспитательные: развивают стремление к самообразованию, ответственное отношение к программно-технической оснащенности кабинета.
Межпредметные связи:
обеспечивающие дисциплины – Основы алгоритмизации и программирования, Элементы высшей математики, Междисциплинарный курс «Информационные технологии» профессионального модуля ПМ.03.
обеспечиваемые дисциплины – профессиональный модуль ПМ.01 «Эксплуатация и модификация информационных систем».
Методы обучения: словесные (объяснение нового материала – урок-презентация), наглядные (демонстрация Web-страниц с тегами форматирования); проблемного, репродуктивного и практического обучения (выполнение упражнений).
Методическое обеспечение занятия: мультимедийная установка, презентация, задание к практической работе.
Методическая цель: формирование профессиональных компетенции будущих специалистов в сфере проектирования и разработки Web-сайтов через усвоение синтаксических правил оформления Web-страниц.
Литература:
Основная литература
Лешев Д. Создание интерактивного Web-сайта. – «Питер», 2008 г.
Рева О.Н. Java Script. – М.: 2008 г.
Котеров Д., Костарев А. РНР 5 – М.: 2008 г.
Кукарник А. Обучение на примерах РНР. – «Питер», 2010 г.
Интернет-ресурсы
Бесплатный для студентов, аспирантов, школьников и преподавателей доступ к полным лицензионным версиям инструментов Microsoft для разработки и дизайна http://www.dreamspark.ru
Интернет-Университет Информационных технологий http://www.intuit.ru/
Мультипортал http://www.km.ru
Образовательный портал http://claw.ru/
Портал по разработке программного обеспечения http://msdn.microsoft.com/ru-ru/gg192976
Свободная энциклопедия http://ru.wikipedia.org
Электронный журнал «Открытые системы» http://www.osp.ru/
План занятия:
Теоретические сведения
Ход работы
Контрольные вопросы
Теоретические сведения
Форматирование – это изменение внешнего вида документа.
Для придания тексту Web-страницы смысловой нагрузки используются специальные теги форматирования. 
Форматирование шрифта
– жирный шрифт;
– курсив;
– подчеркнутый текст;
– перечеркнутый шрифт;
– шрифт большего размера;
– шрифт меньшего размера;
– подстрочный индекс;
– надстрочный индекс;
– изменение типа, цвета и размера шрифта.
В теге допускаются атрибуты:
SIZE – размер букв, возможные значения: 1, 2, 3, , 7. По умолчанию 3;
Таблица 1 – Соотношение между значениями (1,2,3,,7) и пунктами
Относительные единицы
Пункты (pt)

1
9

2
10

3
12

4
14

5
18

6
24

7
36


COLOR – цвет шрифта. Можно указывать шестнадцатеричными кодами или английскими словами. По умолчанию BLACK;
Таблица 2 – Основные значений цвета
Цвет
Символическое название
Численное значение

Морской волны
Aqua
#00FFFF

Черный
Black
#000000

Голубой
Blue
#0000FF

Малиновый
Futsia
#FF00FF

Серый
Gray
#808080

Зеленый
Green
#008000

Ярко-зеленый
Lime
00FF00

Темно-красный
Maroon
#800000

Темно-синий
Navi
#000080

Оливковый
Olive
#808000

Пурпурный
Purple
#800080

Красный
Red
#FF0000

Серебренный
Silver
#C0C0C0

Темной морской волны
Teal
#008080

Белый
White
#FFFFFF

Желтый
Yellow
#FFFF00


FACE – изменение типа шрифта, возможные значения: ARIAL, COURIER и т. д. По умолчанию VERDANA.
Пример кода:
Форматирование html


Это простой текст.


Этот текст красный, размера 5.



Этот текст синий, размера 2.




В окне браузера это будет выглядеть так:
[ Cкачайте файл, чтобы посмотреть картинку ]
Рисунок 1
Теги могут комбинироваться, но при этом надо следить, чтобы контейнеры имели вложенную структуру (контейнер, открытый позже, должен быть закрыт до того, как будет закрыт внешний). Например, для комбинации жирного и наклонного шрифтов можно использовать такой код:
пример
В окне браузера мы получим: пример
Помимо перечисленных выше тегов существуют шесть контейнерных тегов, удобных для оформления заголовков:

...

,

...

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

самые крупные символы, в

– самые мелкие), а также увеличением интервала по вертикали между заголовком и прочей информацией. Атрибут ALIGN управляет выравниванием заголовков по горизонтали. По умолчанию он принимает значение LEFT. Другие возможные значения: CENTER, RIGHT. Данный атрибут применим также к графике и таблицам.
Таблица 3 – Значения атрибута АLIGN
Значение
Описание применения

Left
Выравнивание по левому краю

Right
Выравнивание по правому краю

Justify
Выравнивание по ширине

Сеnter
Выравнивание по центру

Пример кода:
Форматирование html


Это заголовок первого уровня


Это заголовок второго уровня


Это заголовок третьего уровня


Это заголовок четвертого уровня


Это заголовок пятого уровня

Это заголовок шестого уровня

Это просто текст


В окне браузера это будет выглядеть так:
[ Cкачайте файл, чтобы посмотреть картинку ]
Рисунок 2
Форматирование абзацев
Абзацы в тексте выделяются контейнером

. Атрибут ALIGN задает выравнивание по горизонтали. По умолчанию он принимает значение LEFT. Другие возможные значения: CENTER, RIGHT. При просмотре браузером абзацы отделяются друг от друга пустой строкой.

Примеры:

Этот абзац расположен слева


Этот абзац по центру


А вот этот абзац справа


Приведенный выше код при просмотре выглядит так:
Этот абзац расположен слева
Этот абзац по центру
А вот этот абзац справа
Пример кода:
Форматирование html


Это абзац, он отделен от всего текста
пустыми строками сверху и снизу и выровнен
по левому краю.


Это абзац, он отделен от всего текста
пустыми строками сверху и снизу и выровнен
по правому краю.


Это абзац, он отделен от всего текста
пустыми строками сверху и снизу и выровнен
по центру.


Это просто текст.
Это текст с новой строки.


В окне браузера это будет выглядеть так:
[ Cкачайте файл, чтобы посмотреть картинку ]
Рисунок 3
Чтобы перейти на новую строку, не вставляя пустую строку в текст, применяется тег
. Закрывающего тега у него нет.
Иногда полезно разделять смысловые части документа горизонтальной чертой. Это делается с помощью одиночного тега
. Его атрибуты:
SIZE – толщина линии в пикселах. По умолчанию 1 пиксел.
WIDTH – длина линии в пикселах или процентах от ширины экрана. По умолчанию 100%.
ALIGN – выравнивание линии, возможные значения: LEFT, CENTER, RIGHT. По умолчанию LEFT.
COLOR – цвет линии. По умолчанию GRAY.
NOSHADE – линия рисуется без тени. По умолчанию тень есть.
Пример. Код, в котором использованы теги
и
:
Жизненная позиция

Хорошо на свете жить,

Информатику учить!


В окне браузера этот код изображается так:



Оформление списков
Списки облегчают нахождение нужной информации при перечислении сведений, объединенных общим смыслом: пункты меню, списки товаров, перечень сотрудников и т. п. В HTML предусмотрено несколько вариантов оформления списков, которые чаще всего используются в документации. Рассмотрим маркированные и нумерованные списки.
Для того, чтобы оформить фрагмент документа в виде маркированного списка, его помещают в контейнер
(Unordered List).
Для нумерованного – в контейнер
(Оrdered List).
Затем текст в контейнере разбивается на отдельные пункты списка тегами
  • (List Item – элемент списка). Закрывающий тег
    • в конце каждого пункта ставить необязательно. В маркированном списке все пункты автоматически помечаются одинаковыми маркерами, в нумерованном – элементы нумерует сам браузер.
    Примеры кода:
      Список дисциплин:
        Список дисциплин:
      1. Информатика
      2. Информатика
      3. Физика
      4. Физика
      5. История
      6. История

    Это дает на экране следующие списки:
    Список дисциплин: Список дисциплин:

    Можно организовать многоуровневые списки (разумно ограничиться тремя уровнями вложения). Для этого после каждого
  • следует разместить контейнеры
    или
    с разбивкой информации этого пункта на дополнительные подпункты.
    В теге
      могут использоваться следующие атрибуты:
      TYPE – определяет стиль оформления меток для элементов списка;
      START – (только для нумерованного списка
        ) определяет значение первого элемента списка, задается всегда числом (по умолчанию 1). В зависимости от значения атрибута TYPE этому числу сопоставляются разные символы;
        VALUE – (только для метки
      1. списка
          ) устанавливает номер текущего элемента списка. Как и в предыдущем случае, метка пункта может быть нечисловой, хотя значение атрибута – всегда число.

          Для нумерованного списка в зависимости от стиля нумерации значением атрибута TYPE могут быть:
          1 – арабские цифры (1,2,3,...)
          a – строчные буквы (a, b, c,)
          A – прописные буквы (A,B,C,...)
          i – римские цифры строчные (i,ii,iii,...)
          I – римские цифры прописные (I,II,III,...)
          По умолчанию значения TYPE устанавливаются в зависимости от степени вложенности списка.
          Ход работы
          Задание. Создайте главную страницу фирмы по продаже компьютерной техники.
          Текст на Web-странице следующий:
          Компания «Ваш ПК» (заголовок центрировать, используя теги Н1, FONT)
          Открытое акционерное общество «Ваш ПК» основано в году 2006 году,
          является одним из ведущих продавцов компьютерной техники в России (с новой строки, выравнивание по левому краю).
          Основными направлениями деятельности компании являются: (выравнивание по центру, новый абзац)
          реализация компьютерной техники и коммуникационного оборудования ведущих фирм мира через сеть магазинов;
          создание сервисных центров по обслуживанию компьютерной техники (оформлено с помощью списка);
          (вставить картинку)
          Компания ищет агентов по сбыту компьютерной техники (с новой строки, выравнивание по левому краю).
          Контактная информация: (с новой строки, выравнивание по правому краю)
          Telephone (123) 123-34-56
          FAX (123) 123-34-56
          Почтовый адрес: г. Тула, ул Лесная, 106
          Электронная почта
          Общая информация: [ Cкачайте файл, чтобы посмотреть ссылку ] (создать гиперссылку на abc@abc.su)
          Продажи: abc@abc.abc.su
          Copyright © 2013 Компания

          Дополнительное задание
          Составить свое резюме по следующему плану (в общей сложности 4-5 строчек, вместо многоточий и пояснений в скобках вставить свои данные):
          Я, (ФИО), родился (дата и год рождения) в городе (место, где родились).
          В 20 году окончил школу (лицей, гимназию) с углубленным изучением , средний балл аттестата
          В 20 году поступил на специальность 230401 «Информационные системы (по отраслям)». Средний балл по первой сессии (аттестациям)
          В свободное от учебы время увлекаюсь (перечислить не менее трех увлечений помимо учебы).
          Требования к оформлению резюме:
          После раздела «ФИО, где и когда родился», поставить тег абзаца

          ;
          После раздела «какую школу кончил, средний балл аттестата» – тег разрыва строки
          ;
          Перед разделом «увлечения помимо учебы» вставить в код тег горизонтальной линии

          . Оформите линию нестандартным способом. Для этого следует внести в тег
          атрибуты длины, толщины, цвета и выравнивания линии. Задайте длину 20% – 50% от ширины окна, выравнивание по центру, толщину 4 – 10 пикселей, цвет – любой.
          Измените вид шрифтов в разных частях резюме. Для этого следует контейнером

          выделить свою фамилию, контейнером – город, где Вы родились, контейнером
          – информацию о школе, контейнером с атрибутами SIZE=7 COLOR=RED – информацию о факультете, контейнером с атрибутами SIZE=1 COLOR=GREEN – информацию о приятелях, контейнером <В> выделить какое-нибудь увлечение.
          Оформите часть текста в виде списка. Для этого следует контейнером
            выделить блок об увлечениях, разбить его на пункты тегами
          1. . Аналогично контейнером
              и тегами
            • оформить в виде маркированного списка перечень Ваших приятелей.
              Измените нумерацию в списке. Для этого с помощью атрибутов TYPE и START поменяйте нумерацию в списке увлечений.
              Контрольные вопросы
              Что такое форматирование?
              Какие тэги используются при форматировании текста?
              Основные атрибуты тэгов форматирования?
              Как создать списки в HTML?
              Как вставить пустую строку между абзацами в HTML?
              

              

              

              

              13PAGE 15


              13PAGE 141115




              форматирование текста - fontформатирование текста - заголовкиРисунок 115