−¿ <Н6> Задание № 5. Использование различных типов выравнивания Задание № 6. Создание отступов ПР № 2. Установка гарнитуры и цвета шрифта Задание №1. Создание гарнитуры и цвета шрифта Задание №2. Установка фонового изображения на Web­странице Задание №3. Творческое задание ПР № 3. Создание HTML­списков Задание № 1. Пример нумерованного списка Задание № 2. Пример нумерованного списка с разрывом  последовательности Задание № 3. Пример маркированного списка ПР № 4. Создание таблиц средствами HTML Задание № 1. Пример простейшей таблицы Задание № 2. Пример выравнивания таблицы по центру ПР № 5. Встраивание изображений в HTML­документы Задание № 1. Выравнивание изображений Задание № 2. Творческое задание 3 4 5 5 5 6 7 7 8 9 10 11 12 13 13 13 14 16 16 17 19 19 20 2 Введение Элективный учебный курс «Создание Web­сайтов» призван ознакомить учащихся основного общего образования с теоретическими и практическими основами   предмета   «Информатика   и   ИКТ».   Данное   пособие   содержит комплекс   практических   работ   с   заданиями   по   изучению   основ   языка гипертекстовой разметки HTML и ориентировано на учащихся 9 классов. Изучить   язык разметки  HTML  – не представляет большой трудности, если   подойти   к   этому   делу   целенаправленно.  Это   не   очень   сложный   язык гипертекстовой разметки. Сейчас, когда многие сайты работают на движках CMS казалось бы нет нужды изучать HTML. Но это не так – актуальность его по   прежнему   есть.   Где   есть   ссылка   –   там   HTML,   где   есть   элементарное форматирование текста – там HTML, а чтобы обучиться его основам – нужно потратить   несколько   дней,   зато   на   Интернет   человек   посмотрит   совсем другими глазами. Знания  HTML   пригодятся   любому   пользователю   Интернет,  будете   вы вести свой блог или создавать свой сайт, будете участвовать на форумах. Это основа и начальный этап изучения темы сайтостроения. 3 Общее представление об языке гипертекстовой разметки HTML HTML   (от  англ. HyperText   Markup   Language  −¿   «язык   разметки гипертекста») –   стандартный  язык   разметки  документов   во  Всемирной паутине. Большинство веб­страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется  браузерами  и отображается в виде документа в удобной для человека форме. HTML является приложением («частным случаем») SGML (стандартного обобщённого   языка   разметки)   и   соответствует   международному   стандарту ISO 8879. XHTML же является приложением XML. Язык HTML был разработан  британским  учёным  Тимом Бернерсом­Ли приблизительно в  1986­1991 годах  в стенах  Европейского Центра ядерных исследований в Женеве (Швейцария). HTML создавался как язык для обмена научной   и   технической   документацией,   пригодный   для   использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся  с  проблемой  сложности  SGML  путём  определения  небольшого набора   структурных   и  семантических  элементов   –  дескрипторов. Дескрипторы   также   часто   называют   «тегами».   С   помощью   HTML   можно легко   создать   относительно   простой,   но   красиво   оформленный   документ. Помимо   упрощения   структуры   документа,   в   HTML   внесена   поддержка гипертекста. Мультимедийные возможности были добавлены позже. Изначально   язык   HTML   был   задуман   и   создан   как   средство структурирования   и   форматирования   документов   без   их   привязки   к средствам   воспроизведения   (отображения).   В   идеале,   текст   с   разметкой HTML   должен   был   без   стилистических   и   структурных   искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный   по   размерам   экран   мобильного   телефона   или   устройства   и программы   голосового   воспроизведения   текстов).   Однако   современное применение HTML очень далеко от его изначальной задачи. Например, тег   предназначен   для   создания   в   документах   таблиц,   но,   часто используется   и   для   оформления   размещения   элементов   на   странице.   С 4 течением   времени   основная   идея   платформа   независимости   языка   HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении. ПРАКТИЧЕСКАЯ РАБОТА № 1 Знакомство со структурой HTML­документа Цель: научить применять теги при создании Web­страниц. Время выполнения: один учебный час. Форма занятия: практическая работа. Задание № 1. Задание простейшего HTML­документа Запустите программу Блокнот и осуществите ввод следующего  HTML кода: < HTML> Это мой первый HTML­документ! Теперь   сохраните   код   под   любым   именем,  не   забыв   присвоить   файлу расширение html или htm. Откройте файл в браузере. Результатом должно послужить следующее: 5 Задание № 2. Использование тега  Запустите программу Блокнот и осуществите ввод следующего  HTML кода: HTML>   HTML   −¿   один из наиболее популярных и распространенных на сегодня языков разметки текста, используемый для создания Web­сайтов.   Markup  Теперь   сохраните   код   под   любым   именем,  не   забыв   присвоить   файлу расширение html или htm. Откройте файл в браузере. Результатом должно послужить следующее: Задание № 3. Выделение текста курсивом Запустите программу Блокнот и осуществите ввод следующего  HTML кода:     Тег   используется   для   <ЕМ>   интонационного   выделения определённого   текстового   фрагмента   .   Браузерами   отображается курсивом. 6 Теперь   сохраните   код   под   любым   именем,  не   забыв   присвоить   файлу расширение html или htm. Откройте файл в браузере. Результатом должно послужить следующее: Задание № 4. Использование тегов 

−¿ <Н6> Запустите программу Блокнот и осуществите ввод следующего  HTML кода:    

 Заголовок 1 

 Заголовок 2 

 Заголовок 3 

 Заголовок 4 

 Заголовок 5 

 Заголовок 6 

Теперь   сохраните   код   под   любым   именем,  не   забыв   присвоить   файлу расширение html или htm. Откройте файл в браузере. Результатом должно послужить следующее: 7 Задание № 5. Использование различных типов выравнивания Запустите программу Блокнот и осуществите ввод следующего  HTML кода: <Р>При   создании   HTML­документа   для   обозначения   абзаца используется   специальный   тег   P,   который   разделяет фрагменты текста вертикальным отступом.  <Р   ALIGN="CENTER">   Taкой   тип   выравнивания   подходит   для заголовков документов.  <Р   ALIGN="RIGHT">   Двoйнoй   перевод   строки   в   данном   случае   не поможет:   браузер,   интерпретируя   код,   не   воспримет   двойной   отступ   как команду создания абзаца. <Р   ALIGN="JUSTIFY">   Значение   JUSTIFY   стало   поддерживаться браузерами сравнительно недавно, однако во многих случаях именно этот тип выравнивания подходит для работы с текстом. Теперь   сохраните   код   под   любым   именем,  не   забыв   присвоить   файлу расширение html или htm. Откройте файл в браузере. Результатом должно послужить следующее: 8 Задание № 6. Создание отступов Запустите программу Блокнот и осуществите ввод следующего  HTML кода: <Р ALIGN="JUSTIFY">        При  наборе   текста  в     какого­нибудь текстовом редакторе   (Microsoft Word, WordPerfect др.)    для   обозначения абзаца   мы   используем   клавишу <Enter>    

<Р ALIGN="JUSTIFY">             Taкoe   действие   дает   программе   команду обособить один фрагмент текста от другого, задав "красную строку".  

Теперь   сохраните   код   под   любым   именем,  не   забыв   присвоить   файлу расширение html или htm. Откройте файл в браузере. Результатом должно послужить следующее: 9 ПРАКТИЧЕСКАЯ РАБОТА № 2 Установка гарнитуры и цвета шрифта Цель:  научить   устанавливать   гарнитуру   и   цвет   шрифта   посредством применения основных тегов. Время выполнения: один учебный час. Форма занятия: практическая работа. Задание № 1. Создание гарнитуры и цвета шрифта Тег   предоставляет   возможности   управления   гарнитурой,   цветом   и размером   текста.   Изменение   гарнитуры   текста   выполняется   простым 10 добавлением   к   тегу   атрибута   FACE.   Например,   для   отображения   текста шрифтом Arial необходимо записать: Страница 5 из 16 Практические работы по HTML Для изменения цвета шрифта можно использовать в теге атрибут COLOR=”X”.   Вместо   “X”   надо   подставить   английское   название   цвета   в кавычках   (“   ”),   либо   его   шестнадцатеричное   значение.   При   задании   цвета шестнадцатеричным числом необходимо представить этот цвет разложенным на три составляющие: красную (R – Red), зелѐную (G – Green), синюю (B – blue), каждая из которых имеет значение от 00 до FF. В этом случае мы имеем дело с так называемым форматом RGB. Примеры записи текста в формате RGB приведены в таблице 1: Запустите программу Блокнот и осуществите ввод следующего  HTML кода: <Р ALIGN="JUSTIFY">       При наборе   текста   Расписание занятий на вторник Теперь   сохраните   код   под   любым   именем,  не   забыв   присвоить   файлу расширение html или htm. Откройте файл в браузере. Результатом должно послужить следующее: 11 Задание №2. Установка фонового изображения на Web­странице Фоновое изображение – это графический файл с небольшим рисунком, который многократно повторяется, заполняя все окно браузера независимо от его размеров. Графика, используемая в качестве фоновой, задается в теге  Запустите программу Блокнот и осуществите ввод следующего  HTML кода:      Расписание
  занятий на вторник  

  

Теперь   сохраните   код   под   любым   именем,  не   забыв   присвоить   файлу расширение html или htm. Откройте файл в браузере. Результатом должно послужить следующее: 12 Задание №3. Творческое задание Самостоятельно   измените   размер,   цвет,   гарнитуру   стиль   текста документа ПРАКТИЧЕСКАЯ РАБОТА № 3 Создание HTML­списков 13 Цель: научить применять теги при создании html­списков. Время выполнения: один учебный час. Форма занятия: практическая работа. Задание № 1. Пример нумерованного списка Запустите программу Блокнот и осуществите ввод следующего  HTML кода: <НЗ>Пример нумерованного списка <В>Классификация прикладных программных средств: 

< LI >текстовые редакторы < LI >текстовые процессоры  < LI >графические редакторы 
… . бухгалтерские системы Теперь   сохраните   код   под   любым   именем,  не   забыв   присвоить   файлу расширение html или htm. Откройте файл в браузере. Результатом должно послужить следующее: Задание № 3. Пример маркированного списка Запустите программу Блокнот и осуществите ввод следующего  HTML кода:   <НЗ>Пример маркированного списка <В>Популярные   редакторы   векторной графики: 
15
• CorelDRAW 
• Adobe Illustrator 
• Macromedia FreeHand  Теперь   сохраните   код   под   любым   именем,  не   забыв   присвоить   файлу расширение html или htm. Откройте файл в браузере. Результатом должно послужить следующее: 16 ПРАКТИЧЕСКАЯ РАБОТА № 4 Создание таблиц средствами HTML Цель:  научить   создавать   таблицы   посредством   применения   основных тегов. Время выполнения: один учебный час. Форма занятия: практическая работа. Задание № 1. Пример простейшей таблицы Таблица   является   частью   HTML­документа.   Она   представляет   собой прямоугольную   сетку,   состоящую   из   вертикальных   столбцов   и горизонтальных   строк.   Пересечение   строки   и   столбца   называется   ячейкой таблицы. Ячейка может содержать в себе текст, графику или другую таблицу. Таблица состоит из трех основных частей:     названия таблицы,  заголовков столбцов, ячеек таблицы.  Таблица   в   Web­документе   заполняется   по   строкам   (слева   направо   по строке, затем переход на новую строку). Каждая ячейка таблицы должна быть заполнена (хотя бы пробелом, которые используются для создания пустых ячеек).  Запустите   программу   Блокнот   и   наберите   текст   следующей   Web­ страницы. Применяйте приемы копирования при создании таблицы, работая в программе Блокнот.      5 класс
  
     Понедельник
  

   17       

Урок	5 "А"	5 "Б"	5 "В"
1	Русский язык	Литература	История
2	Математика	Информатика	Английский язык
3	История	Математика	Информатика

Теперь   сохраните   код   под   любым   именем,  не   забыв   присвоить   файлу расширение   html   или   htm.   Откройте   файл   в   браузере   и   ознакомьтесь   с результатом. Задание № 2. Пример выравнивания таблицы по центру Запустите программу Блокнот и осуществите ввод следующего  HTML кода:     <ТН>Состав персонального компьютера  

B   состав   персонального   компьютера   входят следующие компоненты:  Системный блок  18 Монитор  Клавиатура  Мышь

Теперь   сохраните   код   под   любым   именем,  не   забыв   присвоить   файлу расширение html или htm. Откройте файл в браузере. Результатом должно послужить следующее: 19 ПРАКТИЧЕСКАЯ РАБОТА № 5 Встраивание изображений в HTML­документы Цель:  изображения. научить   встраивать   в  HTML­документы   графические Время выполнения: один учебный час. Форма занятия: практическая работа. Задание № 1. Выравнивание изображений Тег     позволяет   вставить   изображение   на   Web­страницу.   Оно появится в том месте документа, где находится этот тег. Тег  является одиночным.   Необходимо   помнить,   что   графические   файлы   должны находиться   в   той   же   папке,   что   и   файл   HTML,   описывающий   страницу. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.   Для   выполнения   следующего   задания   поместите   файл   с   именем CLOCK.JPG (или другим именем) в рабочую папку. Следует помнить, что для браузера важно, в каком регистре вы задаете описание имени и типа файла. Выработайте для себя определенное правило и строго следуйте ему. Если вы размещаете   файл   графического   изображения   во   вложенной   папке,   то   при описании   изображения   необходимо   указывать   путь   доступа   к   файлу изображения, отображая вложенность папок. Запустите программу Блокнот и осуществите ввод следующего  HTML кода:      Расписание
  занятий на вторник 20

   

Теперь   сохраните   код   под   любым   именем,  не   забыв   присвоить   файлу расширение html или htm. Откройте файл в браузере. Результатом должно послужить следующее: Атрибуты изображения Задание № 2. Творческое задание Самостоятельно   внесите   изменения   в   текст   созданного   Вами   файла. Опробуйте   использование   таких   атрибутов   графики,   как   ALT,   BORDER, ALIGN, HEIGHT, WIDTH, VSPACE, HSPACE. Всегда обращайте внимание на 21 размер графического файла (в байтах), так как это влияет на время загрузки Web­страницы.  Просмотрите изменения вашей Web­страницы в браузере. 22