Методические указания к самостоятельной работе студентов "Создание документов на языке HTML"

МИНИСТЕРСТВО ЗДРАВООХРАНЕНИЯ КИРОВСКОЙ ОБЛАСТИ

КИРОВСКОЕ ОБЛАСТНОЕ ГОСУДАРСТВЕННОЕ

ПРОФЕССИОНАЛЬНОЕ ОБРАЗОВАТЕЛЬНОЕ БЮДЖЕТНОЕ УЧРЕЖДЕНИЕ

«КИРОВСКИЙ МЕДИЦИНСКИЙ КОЛЛЕДЖ» филиал в г. Котельниче

РАССМОТРЕНО: УТВЕРЖДАЮ:

на заседании ЦМК Зав. учебной частью

общепрофессиональных _________ И.А.Черных

социально-экономических «___»_______ 20_ г.

и гуманитарных дисциплин

протокол № ___

«___» _________ 20__ г.

Председатель ЦМК

____________ А.Н. Косых

Методические указания

к самостоятельной работе студентов

по дисциплине

«ИНФОРМАТИКА»

ТЕМА: «Создание документов на языке HTML»

Составлены преподавателем:

Косых А.Н.

Пояснительная записка.

Данные методические указания созданы для самостоятельной

работы студентов на практических занятиях по информатике.

Методические указания составлены в соответствии с рабочей

программой по информатике и отвечают требованиям государственного

образовательного стандарта по специальности.

Указания необходимы для планомерного проведения практического

занятия, лучшей организации работы студентов на занятии.

Учебный материал представлен в виде лекций, алгоритмов, что

позволяет более полно воспринимать информацию. Пособие призвано

восполнить дефицит учебной литературы по данному курсу.

На практических занятиях студентам предлагается:

• Изучить тему по представленному в указаниях материалу;

• Выполнить выходной контроль знаний, умений в виде заданий 1,2.

• Выполнить домашнее задание в виде ответов на предоставленные

в заданиях вопросы.

ПРАКТИЧЕСКАЯ РАБОТА № 1

«Инструменты для создания и редактирования HTML документов»

После изучения темы студент должен знать: назначение языка HTML;

коды языка и их назначение; структуру документа

созданного на языке HTML;

студент должен уметь: создавать Web - документ.

Оснащение:

ПК с операционной системой Windows 98, прикладная программа – текстовый

редактор Word.

Литература:

• Ю.А. Шафрин. Информационные технологии: В 2 ч. Ч. 2:Офисная технология и

информационные системы.– М.:Бином. Лаборатория знаний, 2002.-336 с.

• Практикум по информационным технологиям в профессиональной деятельности:

Учебное пособие для сред. проф.образования/ Елена Викторовна Михеева. – 3-е изд.,

стер. –М.: Издательский центр «Академия»,2005. – 256 с.

Ход работы:

➢ Ознакомитесь с ниже приведенным текстом:

HTML (Hyper Text Markup Language, язык разметки гипертекста) - это язык

всемирной паутины. Каждый раз, когда вы открываете web - страницу, вы на самом

деле открываете документ, написанный на HTML. Все WEB документы

отформатированы с помощью языка HTML, и все гиперссылки, которые позволяют

Вам легко перемещаться со станицы на страницу, также созданы средствами языка

HTML. Цветные изображения, которые вы встречали на web - страницах,

заполняемые формы, бегущие заголовки - все это вы видите благодаря языку НТМL.

HTML документы представляют собой простые текстовые файлы, содержащие

специальные коды разметки. HTML документы не содержат ничего кроме букв,

чисел, знаков препинания и некоторых других печатных символов плюс коды

разметки.

HTML КОДЫ называют тегами. Теги являются составными частями

самого документа; они управляют форматированием и определяют макет

готового документа, формируют ссылки на другие документы и делают

многое другое. Теги выделяются из основного текста тем, что окружены

специальными маркерами – угловыми скобками «<» и «>».

Теги нечувствительны к регистру, то есть тег <body> ничем не отличается

от тегов <bODy> или <BodY>. Но как правило разработчики web страниц

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

от основного текста, что облегчает редактирование

Язык разметки HTML несмотря на некоторые ограничения, является очень

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

Для создание HTML документов просто нужен какой-нибудь текстовый редактор.

К ним относятся:

. текстовый редактор Блокнот (Microsoft Windows Notepad), Windows Write

. текстовый редактор Word и др.

➢ Запустите программу Блокнот (Пуск → Программы →Стандартные→ Блокнот)

ТЕГИ HTML.

Тег - перевод строки можно просто вставлять в нужное место документа.

Другие теги, такие как <BODY>, должны встречаться в виде пары из открывающего и

закрывающего тегов. Закрывающийся тег имеет косую черту (слеш) после угловой

скобки.

Пример: <BODY> текст </BODY>

<ВОDY>

</ВОDY>

Открывающий тег

Закрывающий тег

ТЕГИ, ОПРЕДЕЛЯIОЩИЕ СТРУКТУРУ ДОКУМЕНТА

Рассмотрим теги которые должны использоваться обязательно!!!. К ним

относятся теги, указывающие на то, что данный документ является HTML документом,

теги заголовков и теги, делящие документ на логические части.

Тег <HTML>

Каждый HTML документ должен начинаться с тега <HTML> и им же

заканчиваться. Присутствие этих тегов указывает на то, что документ является HTML

документом. Пара тегов <HTML> используется следующим образом:

ПРИМЕР:

<HTML>

Созданный мной документ HTML

</НTML>

Вы всегда должны начинать и заканчивать свои документы открывающим и

закрывающим тегами <НТМL> (тег-контейнер). Если вы nроnустите открывающий

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

Теги <HEAD> и <BODY>

Все HTML документы должны разделятся на две логические части - заголовок

(HEAD) и тело(ВОDУ), то есть собственно документ. Заголовок HTML документа

содержит основную информацию о документе, в то время как тело документа

является его содержимым.

ПРИМЕР:

<HTML>

<HEAD>

здесь размещается название документа и заголовок

</НEAD><BODY>

Созданный мной документ HTML

</ВODY></HTML>

Итак, документ обрамлен открывающим и: закрывающим тегами <HTML>,

затем разделен на две части HEAD и BODY. Каждые из тегов должны

использоваться парами: <HTML> и </HTML>, <HEAD> и </НEAD>,<BODY> и

</BODY>.

Тег <TITLE>

В строке заголовка web браузера всегда отражается название HTML,

документа, который просматривается в данный момент. Это название берется из

содержимого тега <TIТLE>. Если вы не включите этот тег, ничего

катастрофического, конечно, не произойдет, но вместо названия в этой строке будет

указан просто URL-адрес страницы. Этот тег также используется парами.

Следует помнить, что содержимое тега< TITLE> используется браузерами

при создании закладок (ссылки). При отсутствии этого тега закладка, скорее всего,

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

ПРИМЕР

<HTML>

<HEAD><TITLE> Название документа</ТIТLЕ>

ЗДЕСЬ РАЗМЕЩАЕТСЯ ЗАГОЛОВОК

</HEAD><BODY>

Созданный мной документ HTML

</ВODY></HTML>

Наш маленький HTML документ принял законченный вид, теперь он содержит

все необходимые теги. Фактически этот документ является настоящим HTML

документом, и вы можете просмотреть его в своем WЕВ браузере.

УПРАВЛЕНИЕ СТИЛЕМ ШРИФТА.

Применяются специальные теги, позволяющие изменять гарнитуру шрифта, его

начертание, размер и цвет.

Изменение начертания шрифта. (Стиль)

Действие тега

Тег

Полужирный текст

<В>

Курсив

Подчеркнутый текст

Тег

Изменение гарнитуры, размера и цвета шрифта. Для этого используется тег

, записываемый следующим образом:

<FONT...параметры…> ...текст...

ПАРАМЕТРЫ:

SIZE - определяет размер шрифта. Примеры: SIZE= "3", SIZE= "4". Параметр

SIZE может принимать значение от 1 до 7. Реальные размеры шрифта, соответствующие

значениям параметра SIZE определяются настройками браузера.

FАСЕ - задает гарнитуру шрифта. Имена шрифтов следует записывать точно.

Примеры: F ACE="Arial", F ACE="Times New Roman"

COLOR - позволяет изменить цвет текста. Примеры: COLOR="FF8000", COL-

OR="8FF710"

Салатный - 8FF710

Салатный - 47F120

Зеленый - FF8000

Темно синий - 0,0,255

(Примите за правило ставить кавычки при задании значений параметров.)

➢ Введите предложенный ниже пример решения задачи №1.

Задания для самостоятельной работы:

ЗАДАЧА № 1.

Создайте web - документ.

Название документа - Мой первый HTML документ.

Заголовок - ЧТО ТАКОЕ ТЕГИ НТМL? (размер шрифта - 7)

Содержание документа

HTML коды называют тегами. (размер шрифта – 7, цвет – темно-синий)

Теги являются составными частями самого документа; они управляют

форматированием и определяют макет готового документа, формируют ссылки на

другие документы и делают многое другое. (размер шрифта – 6, цвет – зеленый)

ПРИМЕР РЕШЕНИЯ: (найти и исправить ошибки)

<HTML>

<НЕАD><ТITLЕ> Мой первый HTML документ. </ТITLE>

ЧТО ТАКОЕ ТЕГИ HTML?

</НЕАD><ВОDY>

HTML коды называют тегами.

Теги являются составными частями самого

документа; они управляют форматированием и определяют макет готового

документа, формируют ссылки на другие документы и делают многое другое.

</BODY><HTML>

ЗАДАЧА № 2.

См. приложение 1.

Вопросы для самоконтроля:

1. Перечислите основные теги языка HTML и их назначение.

2. Опишите команду задания заголовка.

3. Опишите команду задания тела документа.

4. Опишите команду задания гарнитуры текста.

5. Опишите команду сохранения, закрытия, открытия документа.

ПРАКТИЧЕСКАЯ РАБОТА №2

«Работа с графикой и гиперссылками в HTML документах»

После изучения темы студент должен знать:

коды языка по работе с графикой и гиперссылками и их

назначение; структуру документа созданного на языке HTML;

студент должен уметь: создавать Web - документ.

Оснащение:

ПК с операционной системой Windows 98, прикладная программа – текстовый редактор

Word.

Литература:

• Ю.А. Шафрин. Информационные технологии: В 2 ч. Ч. 2:Офисная технология и

информационные системы.– М.:Бином. Лаборатория знаний, 2002.-336 с.

• Практикум по информационным технологиям в профессиональной деятельности:

Учебное пособие для сред. проф.образования/ Елена Викторовна Михеева. – 3-е изд.,

стер. –М.: Издательский центр «Академия»,2005. – 256 с.

Ход работы:

➢ Ознакомитесь с ниже приведенным текстом:

HTML -язык разметки гипертекста. Все WEB документы созданы с использованием

данного языка. Основа используемой в HTML технологии состоит в том, что в обычный

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

получаем Web документ.

Для добавления определенных объектов используются следующие теги:

Тег добавления графического объекта:

Пример:

Тег гиперссылки:

<А НRЕF="путь до файла"><имя ссылки></ А>

Пример:

<А НRЕF=" file:///c:/Мои документы/Информатика/монитор.html"><монитор></ А>

➢ Запустите программу Блокнот (Пуск → Программы →Стандартные→ Блокнот)

➢ Введите предложенный ниже пример решения задачи №1.

Задания для самостоятельной работы:

ЗАДАЧА № 1.

Создайте web - документ.

Название документа - Первая публикация в WWW.

Заголовок - Компьютер (размер шрифта – 5, цвет – зеленый)

Содержание документа

Рисунок (comp)

Внешний вид компьютера (размер шрифта – 6, цвет – темно-синий)

Более подробно с отдельными составными частями компьютера вы можете

ознакомится на других страницах. (размер шрифта – 1, цвет – салатный)

Гиперссылка (дисковод)

ПРИМЕР РЕШЕНИЯ: (найти и исправить ошибки)

<HTML>

<НЕАD>

<ТITLЕ> Первая публикация в WWW. </ТITLE>

Компьютер

<НЕАD></ВОDY>

Внешний вид компьютера

Более подробно с отдельными составными

частями компьютера вы можете ознакомится на других страницах

<А НRЕF=" file:///c:/Мои документы/Комьютер/дисковод.html"><дисковод><А>

ЗАДАЧА № 2.

См. приложение 2.

Вопросы для самоконтроля:

1. Перечислите основные теги языка HTML и их назначение.

2. Опишите команду вставки рисунка.

3. Опишите команду вставки гиперссылки.

4. Опишите команду сохранения, закрытия, открытия документа.

Приложение 1

Вариант 1

Название документа: Internet

( шрифт Arial, размер 4, курсив, зеленый)

Заголовок: компоненты Internet

( шрифт Times New Roman, размер 6, полужирный, салатный)

Содержание документа:

( шрифт Century, размер 7, полужирный, подчеркнутый, темно-синий)

Вариант 2

Название документа: Internet

( шрифт Forte, размер 5, полужирный, салатный)

Заголовок: подключение к Internet

( шрифт Algerian, размер 6, , курсив, зеленый)

Содержание документа:

( шрифт Bodoni , размер 7, курсив, подчеркнутый, темно-синий)

Вариант 3

Название документа: Internet

( шрифт Georgia, размер 7, полужирный, темно-синий)

Заголовок: поисковые системы Internet

( шрифт Times New Roman, размер 5, полужирный, зеленый)

Содержание документа:

( шрифт Century, размер 6, подчеркнутый, курсив, салатный)

Вариант 4

Название документа: Internet

( шрифт Arial, размер 7, курсив, салатный)

Заголовок: работа с поисковыми системами в Internet

( шрифт Times New Roman, размер 6, полужирный, зеленый)

Содержание документа:

( шрифтBell MT , размер 5, курсив, подчеркнутый, темно-синий)

Вариант 5

Название документа: Internet

( шрифт Times New Roman, размер 7, курсив, зеленый)

Заголовок: стратегии поиска информации в Internet

( шрифт Arial, размер 6, полужирный, салатный)

Содержание документа:

( шрифт Bell MT, размер 5, полужирный, подчеркнутый, темно-синий)

Вариант 6

Название документа: Internet

( шрифт Forte, размер 5, полужирный, салатный)

Заголовок: работа с электронной почтой в Internet

( шрифт Georgia, размер 6, , курсив, зеленый)

Содержание документа:

( шрифт Century, размер 7, курсив, подчеркнутый, темно-синий)

Вариант 7

Название документа: Internet

( шрифт Algerian, размер 7, полужирный, темно-синий)

Заголовок: запросы по ключевым словам в Internet

( шрифт Times New Roman, размер 4, полужирный, зеленый)

Содержание документа:

( шрифт Bodoni, размер 5, подчеркнутый, курсив, салатный)

Вариант 8

Название документа: Internet

( шрифт Arial, размер 3, курсив, салатный)

Заголовок: протоколы в Internet

( шрифт Times New Roman, размер4, полужирный, зеленый)

Содержание документа:

( шрифт Century, размер 7, курсив, подчеркнутый, темно-синий)

Приложение 2

Вариант 1

Название документа: Internet

( шрифт Arial, размер 4, курсив, зеленый)

Заголовок: компоненты Internet

( шрифт Times New Roman, размер 6, полужирный, салатный)

Содержание документа:

Вставить рисунок из файла: с:/Мои документы/Рисунки/Бабочка.jpg

Основной текст

( шрифт Century, размер 7, полужирный, подчеркнутый, темно-синий)

Вставить гиперссылку: с:/Мои документы/Информатика/Internet.html

Имя: Поисковые системы

Вариант 2

Название документа: Internet

( шрифт Forte, размер 5, полужирный, салатный)

Заголовок: подключение к Internet

( шрифт Algerian, размер 6, , курсив, зеленый)

Содержание документа:

Вставить рисунок из файла: с:/Мои документы/Картинки/Bear.jpg

Основной текст

( шрифт Bodoni , размер 7, курсив, подчеркнутый, темно-синий)

Вставить гиперссылку: с:/Program Files/Photoshop/Samples.html

Имя: Графический редактор

Вариант 3

Название документа: Internet

( шрифт Georgia, размер 7, полужирный, темно-синий)

Заголовок: поисковые системы Internet

( шрифт Times New Roman, размер 5, полужирный, зеленый)

Содержание документа:

Вставить рисунок из файла: с:/Мои документы/Рисунки/Wolf.jpg

Основной текст

( шрифт Century, размер 6, подчеркнутый, курсив, салатный)

Вставить гиперссылку: с:/Windows/Sistem/Mouse.html

Имя: Новинки

Вариант 4

Название документа: Internet

( шрифт Arial, размер 7, курсив, салатный)

Заголовок: работа с поисковыми системами в Internet

( шрифт Times New Roman, размер 6, полужирный, зеленый)

Содержание документа:

Вставить рисунок из файла: с:/Мои документы/Рисунки/Бабочка.jpg

Основной текст

( шрифтBell MT , размер 5, курсив, подчеркнутый, темно-синий)

Вставить гиперссылку: с:/Мои документы/Информатика/Internet.html

Имя: Поисковые системы

Вариант 5

Название документа: Internet

( шрифт Times New Roman, размер 7, курсив, зеленый)

Заголовок: стратегии поиска информации в Internet

( шрифт Arial, размер 6, полужирный, салатный)

Содержание документа:

Вставить рисунок из файла: с:/Мои документы/Картинки/Bear.jpg

Основной текст

( шрифт Bell MT, размер 5, полужирный, подчеркнутый, темно-синий)

Вставить гиперссылку: с:/Program Files/Photoshop/Samples.html

Имя: Графический редактор

Вариант 6

Название документа: Internet

( шрифт Forte, размер 5, полужирный, салатный)

Заголовок: работа с электронной почтой в Internet

( шрифт Georgia, размер 6, , курсив, зеленый)

Содержание документа:

Вставить рисунок из файла: с:/Мои документы/Рисунки/Wolf.jpg

Основной текст

( шрифт Century, размер 7, курсив, подчеркнутый, темно-синий)

Вставить гиперссылку: с:/Windows/Sistem/Mouse.html

Имя: Новинки

Вариант 7

Название документа: Internet

( шрифт Algerian, размер 7, полужирный, темно-синий)

Заголовок: запросы по ключевым словам в Internet

( шрифт Times New Roman, размер 4, полужирный, зеленый)

Содержание документа:

Вставить рисунок из файла: с:/Мои документы/Рисунки/Бабочка.jpg

Основной текст

( шрифт Bodoni, размер 5, подчеркнутый, курсив, салатный)

Вставить гиперссылку: с:/Мои документы/Информатика/Telnet.html

Имя: Телеконференции

Вариант 8

Название документа: Internet

( шрифт Arial, размер 3, курсив, салатный)

Заголовок: протоколы в Internet

( шрифт Times New Roman, размер4, полужирный, зеленый)

Содержание документа:

Вставить рисунок из файла: с:/Мои документы/Картинки/Белка.jpg

Основной текст

( шрифт Century, размер 7, курсив, подчеркнутый, темно-синий)

Вставить гиперссылку: с:/Program Files/ Internet Explorer/ Wizard.html

Имя: Установка

Скачать материал

Методические указания к самостоятельной работе студентов "Создание документов на языке HTML"

Информатика - еще материалы к урокам:

Предметы

Похожие материалы