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

Предпросмотр материала:

Междисциплинарный курс «Информационные технологии и платформы разработки информационных систем» профессионального модуля

ПМ.02 «Участие в разработке информационных систем»

Специальности 230401 «Информационные системы (по отраслям)»

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

Преподаватель: Соцкова С.Н.

Группа: И 3-6

Дата:

Тема занятия: Форматирование Web-страниц.

Тип занятия: совершенствование знаний, умений и навыков.

Вид занятия: практическая работа с элементами ввода нового материала.

Дидактические цели занятия:

образовательные (знать, уметь): студенты должны

знать: основные определения по разделу «Язык гипертекстовой разметки HTML» (Web-страница, Web-сайт, определение языка HTML, понятие тега и атрибута), основные теги и атрибуты тегов;

уметь: создавать простейшую Web-страницу.

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

воспитательные: развивают стремление к самообразованию, ответственное отношение к программно-технической оснащенности кабинета.

Межпредметные связи:

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

обеспечиваемые дисциплины – профессиональный модуль ПМ.01 «Эксплуатация и модификация информационных систем».

Методы обучения: словесные (объяснение нового материала – урок-презентация), наглядные (демонстрация Web-страниц с тегами форматирования); проблемного, репродуктивного и практического обучения (выполнение упражнений).

Методическое обеспечение занятия: мультимедийная установка, презентация, задание к практической работе.

Методическая цель: формирование профессиональных компетенции будущих специалистов в сфере проектирования и разработки Web-сайтов через усвоение синтаксических правил оформления Web-страниц.

Литература:

Основная литература

1 Лешев Д. Создание интерактивного Web-сайта. – «Питер», 2008 г.

2 Рева О.Н. Java Script. – М.: 2008 г.

3 Котеров Д., Костарев А. РНР 5 – М.: 2008 г.

4 Кукарник А. Обучение на примерах РНР. – «Питер», 2010 г.

Интернет-ресурсы

1 Бесплатный для студентов, аспирантов, школьников и преподавателей доступ к полным лицензионным версиям инструментов Microsoft для разработки и дизайна http://www.dreamspark.ru

2 Интернет-Университет Информационных технологий http://www.intuit.ru/

3 Мультипортал http://www.km.ru

4 Образовательный портал http://claw.ru/

5 Портал по разработке программного обеспечения http://msdn.microsoft.com/ru-ru/gg192976

6 Свободная энциклопедия http://ru.wikipedia.org

7 Электронный журнал «Открытые системы» http://www.osp.ru/

План занятия:

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

· Ход работы

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

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

Форматирование – это изменение внешнего вида документа.

Для придания тексту Web-страницы смысловой нагрузки используются специальные теги форматирования.

Форматирование шрифта

<B> … </B> – жирный шрифт;

<I> … </I> – курсив;

<U>… </U> – подчеркнутый текст;

<S> … </S> – перечеркнутый шрифт;

<BIG> … </BIG> – шрифт большего размера;

<SMALL> … </SMALL> – шрифт меньшего размера;

<SUB> … </SUB> – подстрочный индекс;

<SUР> … </SUР> – надстрочный индекс;

<FONT> … </FONT> – изменение типа, цвета и размера шрифта.

В теге <FONT> допускаются атрибуты:

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>

<head>

<title>Форматирование html</title>

</head>

<body>

Это простой текст.<br>

<font face="Verdana" size=5 color="red">

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

</font><br>

<font face="Arial" size=2 color="blue">

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

</font>

</body>

</html>

В окне браузера это будет выглядеть так:

форматирование текста - font

Рисунок 1

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

<B> <I> пример </I> </B>

В окне браузера мы получим: пример

Помимо перечисленных выше тегов существуют шесть контейнерных тегов, удобных для оформления заголовков: <H1>...</H1>, <H2>...</H2>, …, <H6>…</H6>. Заголовки отличаются от текста и между собой толщиной и высотой букв (в заголовке <H1> самые крупные символы, в <H6> – самые мелкие), а также увеличением интервала по вертикали между заголовком и прочей информацией. Атрибут ALIGN управляет выравниванием заголовков по горизонтали. По умолчанию он принимает значение LEFT. Другие возможные значения: CENTER, RIGHT. Данный атрибут применим также к графике и таблицам.

Таблица 3 – Значения атрибута АLIGN

Значение	Описание применения
Left	Выравнивание по левому краю
Right	Выравнивание по правому краю
Justify	Выравнивание по ширине
Сеnter	Выравнивание по центру

Пример кода:

<html>

<head>

<title>Форматирование html</title>

</head>

<body>

<h1>Это заголовок первого уровня</h1>

<h2>Это заголовок второго уровня</h2>

<h3>Это заголовок третьего уровня</h3>

<h4 align="right">Это заголовок четвертого уровня</h4>

<h5 align="center">Это заголовок пятого уровня</h5>

<h6 align="jastify">Это заголовок шестого уровня</h6>

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

</body>

</html>

В окне браузера это будет выглядеть так:

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

Рисунок 2

Форматирование абзацев

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

Примеры:

<P> Этот абзац расположен слева </P>

<P ALIGN=CENTER> Этот абзац по центру </P>

<P ALIGN=RIGHT> А вот этот абзац справа </P>

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

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

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

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

Пример кода:

<html>

<head>

<title>Форматирование html</title>

</head>

<body>

<p align="left">Это абзац, он отделен от всего текста

пустыми строками сверху и снизу и выровнен

по левому краю.</p>

<p align="right">Это абзац, он отделен от всего текста

пустыми строками сверху и снизу и выровнен

по правому краю.</p>

<p align="center">Это абзац, он отделен от всего текста

пустыми строками сверху и снизу и выровнен

по центру.</p>

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

</body>

</html>

В окне браузера это будет выглядеть так:

форматирование текста - выравнивание

Рисунок 3

Чтобы перейти на новую строку, не вставляя пустую строку в текст, применяется тег <BR>. Закрывающего тега у него нет.

Иногда полезно разделять смысловые части документа горизонтальной чертой. Это делается с помощью одиночного тега <HR>. Его атрибуты:

SIZE – толщина линии в пикселах. По умолчанию 1 пиксел.

WIDTH – длина линии в пикселах или процентах от ширины экрана. По умолчанию 100%.

ALIGN – выравнивание линии, возможные значения: LEFT, CENTER, RIGHT. По умолчанию LEFT.

COLOR – цвет линии. По умолчанию GRAY.

NOSHADE – линия рисуется без тени. По умолчанию тень есть.

Пример. Код, в котором использованы теги <BR> и <HR>:

<B> Жизненная позиция </B>

<HR NOSHADE WIDTH=250>

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

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

<HR SIZE=4 WIDTH=50% ALIGN=CENTER>

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

Оформление списков

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

Для того, чтобы оформить фрагмент документа в виде маркированного списка, его помещают в контейнер <UL>… </UL> (Unordered List).

Для нумерованного – в контейнер <OL> … </OL> (Оrdered List).

Затем текст в контейнере разбивается на отдельные пункты списка тегами <LI> (List Item – элемент списка). Закрывающий тег </LI> в конце каждого пункта ставить необязательно. В маркированном списке все пункты автоматически помечаются одинаковыми маркерами, в нумерованном – элементы нумерует сам браузер.

Примеры кода:

<UL>Список дисциплин: <OL>Список дисциплин:

<LI>Информатика <LI>Информатика

<LI>Физика <LI>Физика

<LI>История <LI>История

</UL> </OL>

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

Список дисциплин: Список дисциплин:

Можно организовать многоуровневые списки (разумно ограничиться тремя уровнями вложения). Для этого после каждого <LI> следует разместить контейнеры <UL>… </UL> или <OL> … </OL> с разбивкой информации этого пункта на дополнительные подпункты.

В теге <OL> могут использоваться следующие атрибуты:

TYPE – определяет стиль оформления меток для элементов списка;

START – (только для нумерованного списка <OL>) определяет значение первого элемента списка, задается всегда числом (по умолчанию 1). В зависимости от значения атрибута TYPE этому числу сопоставляются разные символы;

VALUE – (только для метки <LI> списка <OL>) устанавливает номер текущего элемента списка. Как и в предыдущем случае, метка пункта может быть нечисловой, хотя значение атрибута – всегда число.

Для нумерованного списка в зависимости от стиля нумерации значением атрибута 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

Электронная почта

Общая информация: abc@abc.su (создать гиперссылку на abc@abc.su)

Продажи: abc@abc.abc.su

Дополнительное задание

Составить свое резюме по следующему плану (в общей сложности 4-5 строчек, вместо многоточий и пояснений в скобках вставить свои данные):

Я, … (ФИО), родился … (дата и год рождения) в городе … (место, где родились).

В 20… году окончил … школу (лицей, гимназию) с углубленным изучением …, средний балл аттестата …

В 20… году поступил на специальность 230401 «Информационные системы (по отраслям)». Средний балл по первой сессии (аттестациям) …

В свободное от учебы время увлекаюсь … (перечислить не менее трех увлечений помимо учебы).

Требования к оформлению резюме:

1 После раздела «ФИО, где и когда родился», поставить тег абзаца <P>;

2 После раздела «какую школу кончил, средний балл аттестата» – тег разрыва строки <BR>;

3 Перед разделом «увлечения помимо учебы» вставить в код тег горизонтальной линии <HR>. Оформите линию нестандартным способом. Для этого следует внести в тег <HR> атрибуты длины, толщины, цвета и выравнивания линии. Задайте длину 20% – 50% от ширины окна, выравнивание по центру, толщину 4 – 10 пикселей, цвет – любой.

4 Измените вид шрифтов в разных частях резюме. Для этого следует контейнером <H1> выделить свою фамилию, контейнером <I> – город, где Вы родились, контейнером <H6> – информацию о школе, контейнером <FONT> с атрибутами SIZE=7 COLOR=RED – информацию о факультете, контейнером <FONT> с атрибутами SIZE=1 COLOR=GREEN – информацию о приятелях, контейнером <В> выделить какое-нибудь увлечение.

5 Оформите часть текста в виде списка. Для этого следует контейнером <OL> выделить блок об увлечениях, разбить его на пункты тегами <LI>. Аналогично контейнером <UL> и тегами <LI> оформить в виде маркированного списка перечень Ваших приятелей.

6 Измените нумерацию в списке. Для этого с помощью атрибутов TYPE и START поменяйте нумерацию в списке увлечений.

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

1 Что такое форматирование?

2 Какие тэги используются при форматировании текста?

3 Основные атрибуты тэгов форматирования?

4 Как создать списки в HTML?

5 Как вставить пустую строку между абзацами в HTML?

Краткое описание материала

МДК.02.01 «Информационные технологии и платформы разработки ИС» предназначен для проектирования и разработки информационных систем. В рамках данного междисциплинарного курса изучают языки web-программирования: html, css, java script, php. ПР2 содержит подробный перечень тегов форматирования данных на web-странице, с использованием языка гипертекстовой разметки html. Практическая работа содержит помимо основного задания еще и дополнительное для более успешных студентов, а также контрольные вопросы.

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

Информатика

Конспекты

DOCX

29.03.2014

996

Информатика

Конспекты

Файл будет скачан в формате:

DOCX

Краткое описание материала

Автор материала

Соцкова Светлана Николаевна

преподаватель специальных дисциплин

На сайте: 10 лет и 9 месяцев
Всего просмотров: 88196
Подписчики: 0
Всего материалов: 40

88196
просмотров
40
материалов
0
подписчиков

Настоящий материал опубликован пользователем Соцкова Светлана Николаевна.
Инфоурок является информационным посредником. Всю ответственность за опубликованные материалы несут пользователи, загрузившие материал на сайт. Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете на материал.