- 29.03.2014
- 863
- 1
Междисциплинарный курс «Информационные технологии и платформы разработки информационных систем» профессионального модуля
ПМ.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>
В окне браузера это будет выглядеть так:
Рисунок 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
Copyright © 2013 Компания
Дополнительное задание
Составить свое резюме по следующему плану (в общей сложности 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. Практическая работа содержит помимо основного задания еще и дополнительное для более успешных студентов, а также контрольные вопросы.
6 665 129 материалов в базе
Настоящий материал опубликован пользователем Соцкова Светлана Николаевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс повышения квалификации
36 ч. — 144 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс профессиональной переподготовки
300/600 ч.
Мини-курс
6 ч.
Мини-курс
10 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.