Поделиться
7. Создание документов на языке HTML.docx
Методические указания
к самостоятельной работе студентов
по дисциплине
«ИНФОРМАТИКА»
ТЕМА: «Создание документов на языке HTML»
Пояснительная записка.
Данные методические указания созданы для самостоятельной работы студентов на практических занятиях по информатике. Методические указания составлены в соответствии с рабочей программой по информатике и отвечают требованиям государственного образовательного стандарта по специальности.
Указания необходимы для планомерного проведения практического занятия, лучшей организации работы студентов на занятии.
Учебный материал представлен в виде лекций, алгоритмов, что позволяет более полно воспринимать информацию. Пособие призвано восполнить дефицит учебной литературы по данному курсу.
На практических занятиях студентам предлагается:
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 страниц печатают теги заглавными буквами, поскольку это позволяет легко отличать коды от основного текста, что облегчает редактирование |
3
Язык разметки HTML несмотря на некоторые ограничения, является очень гибким и удобным, возможностей у него куда больше, чем ограничений.
Для создание HTML документов просто нужен какой-нибудь текстовый редактор.
К ним относятся:
. текстовый редактор Блокнот (Microsoft Windows Notepad), Windows Write
. текстовый редактор Word и др.
Ø Запустите программу Блокнот (Пуск → Программы →Стандартные→ Блокнот)
ТЕГИ HTML.
Тег <BR> - перевод строки можно просто вставлять в нужное место документа. Другие теги, такие как <BODY>, должны встречаться в виде пары из открывающего и закрывающего тегов. Закрывающийся тег имеет косую черту (слеш) после угловой скобки.
Пример: <BODY> текст </BODY>
|
<ВОDY> |
</ВОDY> |
|
Открывающий тег |
Закрывающий тег |
ТЕГИ, ОПРЕДЕЛЯIОЩИЕ СТРУКТУРУ ДОКУМЕНТА
Рассмотрим теги которые должны использоваться обязательно!!!. К ним относятся теги, указывающие на то, что данный документ является HTML документом, теги заголовков и теги, делящие документ на логические части.
|
Тег <HTML> |
Каждый HTML документ должен начинаться с тега <HTML> и им же заканчиваться. Присутствие этих тегов указывает на то, что документ является HTML документом. Пара тегов <HTML> используется следующим образом:
ПРИМЕР:
<HTML>
Созданный мной документ HTML
</НTML>
Вы всегда должны начинать и заканчивать свои документы открывающим и закрывающим тегами <НТМL> (тег-контейнер). Если вы nроnустите открывающий или закрывающий тег, все остальные теги документа будут восприняты неправильно.
4
|
Теги <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Е>
ЗДЕСЬ РАЗМЕЩАЕТСЯ ЗАГОЛОВОК <BR>
</HEAD><BODY>
Созданный мной документ HTML
</ВODY></HTML>
Наш маленький HTML документ принял законченный вид, теперь он содержит все необходимые теги. Фактически этот документ является настоящим HTML документом, и вы можете просмотреть его в своем WЕВ браузере.
5
УПРАВЛЕНИЕ СТИЛЕМ ШРИФТА.
Применяются специальные теги, позволяющие изменять гарнитуру шрифта, его начертание, размер и цвет.
Изменение начертания шрифта. (Стиль)
|
Действие тега |
Тег |
|
Полужирный текст |
<В> |
|
Курсив |
<I> |
|
Подчеркнутый текст |
<U> |
|
Тег <FONT> |
Изменение гарнитуры, размера и цвета шрифта. Для этого используется тег <FONT>, записываемый следующим образом:
<FONT...параметры…> ...текст... </FONT>
ПАРАМЕТРЫ:
SIZE - определяет размер шрифта. Примеры: SIZE= "3", SIZE= "4". Параметр SIZE может принимать значение от 1 до 7. Реальные размеры шрифта, соответствующие значениям параметра SIZE определяются настройками браузера.
FАСЕ - задает гарнитуру шрифта. Имена шрифтов следует записывать точно. Примеры: F ACE="Arial", F ACE="Times New Roman"
COLOR - позволяет изменить цвет текста. Примеры: COLOR="FF8000", COLOR="8FF710"
Салатный - 8FF710
Салатный - 47F120
Зеленый - FF8000
Темно синий - 0,0,255
(Примите за правило ставить кавычки при задании значений параметров.)
Ø Введите предложенный ниже пример решения задачи №1.
Задания для самостоятельной работы:
ЗАДАЧА № 1.
Создайте web - документ.
Название документа - Мой первый HTML документ.
Заголовок - ЧТО ТАКОЕ ТЕГИ НТМL? (размер шрифта - 7)
Содержание документа
HTML коды называют тегами. (размер шрифта – 7, цвет – темно-синий)
Теги являются составными частями самого документа; они управляют форматированием и определяют макет готового документа, формируют ссылки на другие документы и делают многое другое. (размер шрифта – 6, цвет – зеленый)
6
ПРИМЕР РЕШЕНИЯ: (найти и исправить ошибки)
<HTML>
<НЕАD><ТITLЕ> Мой первый HTML документ. </ТITLE>
<FONT SIZE=7>ЧТО ТАКОЕ ТЕГИ HTML? </FONT><BR>
</НЕАD><ВОDY>
<FONT SIZE=6 COLOR="0,0,255" >HTML коды называют тегами. </FONT><BR>
<FONT COLOR="47F120" SIZE=6 > Теги являются составными частями самого документа; они управляют форматированием и определяют макет готового документа, формируют ссылки на другие документы и делают многое другое. </FONT><BR>
</BODY><HTML>
ЗАДАЧА № 2.
См. приложение 1.
Вопросы для самоконтроля:
1. Перечислите основные теги языка HTML и их назначение.
2. Опишите команду задания заголовка.
3. Опишите команду задания тела документа.
4. Опишите команду задания гарнитуры текста.
5. Опишите команду сохранения, закрытия, открытия документа.
7
ПРАКТИЧЕСКАЯ РАБОТА №2
«Работа с графикой и гиперссылками в HTML документах»
После изучения темы студент должен знать:
коды языка по работе с графикой и гиперссылками и их назначение; структуру документа созданного на языке HTML;
студент должен уметь: создавать Web - документ.
Оснащение:
ПК с операционной системой Windows 98, прикладная программа – текстовый редактор Word.
Литература:
· Ю.А. Шафрин. Информационные технологии: В 2 ч. Ч. 2:Офисная технология и информационные системы.– М.:Бином. Лаборатория знаний, 2002.-336 с.
· Практикум по информационным технологиям в профессиональной деятельности: Учебное пособие для сред. проф.образования/ Елена Викторовна Михеева. – 3-е изд., стер. –М.: Издательский центр «Академия»,2005. – 256 с.
Ход работы:
Ø Ознакомитесь с ниже приведенным текстом:
HTML -язык разметки гипертекста. Все WEB документы созданы с использованием данного языка. Основа используемой в HTML технологии состоит в том, что в обычный текстовый документ вставляются управляющие символы (теги) и в результате мы получаем Web документ.
Для добавления определенных объектов используются следующие теги:
Тег добавления графического объекта:
<IMG SRС="путь до файла">
Пример:
<IMG SRС="file:///c:/Мои документы/Информатика/comp.gif">
Тег гиперссылки:
<А НRЕF="путь до файла"><имя ссылки></ А>
Пример:
<А НRЕF=" file:///c:/Мои документы/Информатика/монитор.html"><монитор></ А>
Ø Запустите программу Блокнот (Пуск → Программы →Стандартные→ Блокнот)
Ø Введите предложенный ниже пример решения задачи №1.
8
Задания для самостоятельной работы:
ЗАДАЧА № 1.
Создайте web - документ.
Название документа - Первая публикация в WWW.
Заголовок - Компьютер (размер шрифта – 5, цвет – зеленый)
Содержание документа
Рисунок (comp)
Внешний вид компьютера (размер шрифта – 6, цвет – темно-синий)
Более подробно с отдельными составными частями компьютера вы можете ознакомится на других страницах. (размер шрифта – 1, цвет – салатный)
Гиперссылка (дисковод)
ПРИМЕР РЕШЕНИЯ: (найти и исправить ошибки)
<HTML>
<НЕАD>
<ТITLЕ> Первая публикация в WWW. </ТITLE>
<FONT SIZE=”5” COLOR=” FF8000” >Компьютер </FONT></BR>
<НЕАD></ВОDY>
<IMG SRС="file:///c:/Мои документы/Информатика/comp.gif">
<FONT SIZE=”6” COLOR="0,0,255" >Внешний вид компьютера </FONT><BR>
<FONT SIZE=”1” COLOR="47F120" > Более подробно с отдельными составными частями компьютера вы можете ознакомится на других страницах </FONT><BR>
<А НRЕF=" file:///c:/Мои документы/Комьютер/дисковод.html"><дисковод><А>
<BODY></HTML>
ЗАДАЧА № 2.
См. приложение 2.
Вопросы для самоконтроля:
1. Перечислите основные теги языка HTML и их назначение.
2. Опишите команду вставки рисунка.
3. Опишите команду вставки гиперссылки.
4. Опишите команду сохранения, закрытия, открытия документа.
9
Приложение 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, полужирный, подчеркнутый, темно-синий)
10
Вариант 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, курсив, подчеркнутый, темно-синий)
11
Приложение 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
Имя: Новинки
12
Вариант 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
Имя: Новинки
13
Вариант 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
Имя: Установка
14
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
