Управление образования и науки Тамбовской области

Тамбовское областное государственное бюджетное образовательное учреждение среднего профессионального образования

«Аграрно-технологический техникум»

МДК 04.01. «Технология создания Web-документов»

«Создание Web-сайта на языке HTML»

практикум

Составила: Кочетова Яна Валерьевна, преподаватель Тамбовского областного государственного бюджетного образовательного учреждения среднего профессионального образования «Аграрно-технологический техникум»

по профессии 09.01.03 Мастер по обработке цифровой информации

Сампур 2015

Кочетова Я.В. Создание Web-сайта на языке HTML: практикум по МДК 04.01. «Технология создания Web-документов»/ ТОГБОУ СПО АТТ, Сампур 2015. - 26 с.

Рецензент:

Иволгин Сергей Юрьевич, преподаватель высшей категории Тамбовского областного государственного бюджетного образовательного учреждения среднего профессионального образования «Аграрно-технологический техникум».

Практикум представляет собой рекомендации по выполнению практических работ по МДК 04.01. «Технология создания Web-документов» для студентов 3 курса среднего профессионального образования по профессии 09.01.03 Мастер по обработке цифровой информации.

В данном практикуме представлен теоретический материал по теме «Создание Web-сайта на языке HTML» и перечень практических работ для закрепления изученного материала.

Рассмотрено на заседании цикловой комиссии по специальностям 38.02.04 Коммерция, 09.02.01. Компьютерные системы и комплексы и профессии 09.01.03 Мастер по обработке цифровой информации.

Протокол № _3_ от _30.11.2015_ г.

Председатель_____________ Е.А.Мягкова

Содержание

Введение …………………………………………………………………………………………..4

Практическая работа №1. Создание простейшего HTML-документа…………...5

Практическая работа №2. Использование элементов для организации структуры созданных документов. Форматирование текста в HTML-документах. Цветовое оформление HTML- документа………………...……………..8

Практическая работа №3. Использование изображений для оформления страниц сайта……………………………………………………………………………………12

Практическая работа №4. Организация гиперссылок между созданными документами внутри сайта. Создание ссылок на сторонние документы

и файлы……………………………………………………………………………………...……14

Практическая работа №5. Создание сайта на произвольную тему……………..16

Тест по теме «Создание Web-сайта на языке HTML»………………………………...17

Список литературы и интернет - источников………………………………………..…20

Приложение №1 Таблица тегов………………………………………..…………………...21

Приложение №2 Таблица цветов………………………………………………………..…24

Введение

История языков разметки уходит в 1960-е годы, когда сотрудники компании IBM взялись за решение задач переноса документов между различными платформами и операционными системами. Результатом их усилий стал язык GML (General Markup Language - общий язык разметки), который предназначался для использования на ЭВМ семейства IBM. Язык GML в дальнейшем был расширен, а в 80-х годах прошёл стандартизацию ISO (Международная организация стандартизации). Этот мощный и универсальный режим разметки, названный SGML (Standart General Markup Langugage), использовался военным ведомством США для оформления технической документации. Однако SGML широкого распространения не получил ввиду своей сложности и дороговизны реализации.

Следующий этап развития языков разметки связан с именами учёных-физиков, сотрудников CERN (Европейский Центр Ядерных Исследований) в Женеве. Так, в конце 80-х годов Тим Бернерс-Ли занялся проблемой хранения и отображения данных, полученных коллегами. Проблема состояла в том, что каждый специалист, приезжавший в Центр, применял собственные методы представления информации, и срочно требовалось создание универсальной системы, которая не зависела бы от используемой компьютерной платформы и в то же время была бы достаточно простой.

В основу разрабатываемого языка Тим Бернерс-Ли положил язык SGML и приёмы работы с гипертекстом, с чем и связано название созданного им языка - HTML. Новый язык использовал основные конструкции SGML для описания документов и гипертекстовых ссылок.

Термин "гипертекст" впервые был введён Тедом Нельсоном в 1960-х годах. Понятие "гипертекст" обозначает электронный документ, который содержит в себе ссылки на другие документы.

Разработка HTML привела в итоге к новой технологии распространения гипертекстовых документов в Internet. Однако для широкого распространения WWW, кроме языка HTML, потребовалась разработка протокола передачи гипертекста HTTP (HyperText Transfer Protocol - протокол передачи гипертекста), который позволил осуществлять обмен документами HTML. Именно этот протокол дал возможность приложению-клиенту находить и использовать ресурсы, хранящиеся на другом компьютере. Первые HTML-документы, обращавшиеся в Internet в начале 90-х годов, были исключительно текстовыми. Так было до тех пор, пока в NCSA (Национальный центр исследования сверхпроводников) Иллинойского университета не был разработан первый графический интерфейс (Mosaic) для HTML-документов. Впоследствии с появлением множества простых и доступных браузеров для Web началась новая эра для HTML. Язык HTML стал основным инструментом для распространения информации в Internet, хотя изначально он предназначался для организации информации в пределах одного научного центра.

Практическая работа №1

Создание простейшего HTML-документа

Теория

1.Понятие тега

Hyper Text Markup Language - язык гипертекстовой разметки.

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

Тег является активным элементом, изменяющим представление следующей за ним информации. Обычно используются два тега - открывающий и закрывающий.

Каждый тег состоит из имени тега, за которым может следовать список атрибутов (параметров). Атрибуты отделяются от имени тега и друг от друга пробелами. Значение атрибута пишется после знака равенства. Если значение состоит из одного слова или цифры, то его можно писать без кавычек. Для значений из нескольких слов кавычки обязательны ( " ). Тег со всеми атрибутами желательно располагать на одной строке.

Синтаксис тега с атрибутом: <ТЕГ атрибут="значение">

Например:

2.Структура HTML-документа

НТМL-код страницы помещается внутрь контейнера:

<НТМL> НТМL>.

Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать.

• Заголовок Web-страницы заключается в контейнер:

<НЕАD> НЕАD>

Тег <НЕАD> заключает в себе теги:

1. Название страницы помещается в контейнер и при просмотре отображается в верхней строке окна браузера

2. - содержит дополнительные данные о документе, используемые поисковыми серверами

• Отображаемое в браузере содержание страницы помещается в контейнер

• Например

Пример HTML-документа

<HTML>

<HEAD>

Компьютер

ТIТLЕ>

Компьютер и ПО

BODY>

HTML>

3.Создание HTML документа:

• Создать персональную папку, где обязательным является использование для имени папки латинских букв;

• Открыть текстовой редактор блокнот;

• Сохранить документ следующим образом: Файл\Сохранить как…в поле Имя файла ввести index.html или index.htm; а в поле Тип файла выбрать Все файлы.

• Закрыть документ.

4.Форматирование текста в HTML-документе

С помощью тега … и его атрибутов можно задать различные параметры форматирования текста.

Дополнительные теги форматирования текста:

Практическая работа « Сайт о театрах Тамбова»

1. Загрузите Блокнот и создайте HTML-документ вида:

2. Сохраните на диске в своей папке с именем glavn.htm (установите тип файла - все файлы).

3. Сверните окно программы Блокнот.

4. Загрузите Internet Explorer и откройте файл glavn.htm из своей папки. На экране появится текст: «Театры города Тамбова»

5. Сделайте часть текста жирно, курсивом и с новой строки (тег <BR>), например:

Каждый раз как только вносите изменения в HTML-документ, обязательно делайте сохранение со старым именем и сворачивайте окно программы Блокнот, а в окне браузера Internet Explorer делайте Обновить (клавиша F5).

6. Измените размет и цвет фразы «Театры», например:

7. Самостоятельно измените размер и цвет фразы «города Тамбова», посмотрите, как отображаются разные цвета и размеры текста. (Список цветов и их кодов в Приложении)

Практическая работа №2

Использование элементов для организации структуры созданных документов. Форматирование текста в HTML-документах. Цветовое оформление HTML- документа.

Теория

1.Абзацы

Разделение текста на абзацы производится с помощью контейнера

…. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.

Атрибут ALIGN - позволяет задать выравнивание текста, может принимать значения "left", "right", "center".

Например:

Этот текст выровнен по центру

Заголовки можно отде­лять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга .

Тег

- разрыв строки, используется для записи текстов стихов и песен.

2.Редактирование фона страницы

Для управления внешним видом документа используются атрибуты тега

BGCOLOR - изменяет цвет фона. Цвет задается словом или кодом RGB

Text - задает цвет текста.

Background - помещает в качестве фона изображение из файла с картинкой.

Атрибут Bgproperties - определяет, будет ли фоновое изображение прокручиваться вместе с окном браузера или же положение будет фиксированным (при bgproperties = "fixed" - фоновый рисунок не прокручивается вместе со страницей)

3.Оформление текста. Заголовки

Теги

,

,

,

,

,

Шесть уровней заголовков отличаются величиной шрифта: - самый важный и большой, - самый маленький. По умолчанию отображается тем же размером, что и стандартный текст.

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

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

. Он должен быть на странице в единственном экземпляре.

Для выравнивания заголовков используется атрибут - align - выравнивание, принимающий значения: Left (по умолчанию), Right (справо) и Centеr (по центру)

4.Списки на Web-страницах

• нумерованные списки - когда элементы списка идентифицируются с помощью чисел;

Нумерованный список располагается внутри контейнера <OL>…OL>, а каждый элемент списка определяется тэгом <LI>. С помощью атрибута TYPE тэга <OL> можно задать тип нумерации:

• арабские цифры (по умолчанию),

• "I" (римские цифры),

• "а" (строчные буквы)

• маркированные списки - когда элементы списка идентифицируются с помощью специальных символов (маркеров);

Маркированный список располагается внутри контейнера <UL>…UL>, а каждый элемент списка определяется тэгом <LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка:

• "disc" (диск),

• "square" (квадрат)

• или "circle" (окружность):

• списки определений - позволяющие составлять перечни определений в так называемой словарной форме.

Список определений располагается внутри контейнера <DL>…DL>. Внутри него текст оформляется в виде терминов, которые выделяются одинарными тэгами <DT> и определений, которые следуют за одинарными тэгами <DD>.

Практическая работа

1. Откройте в окне браузера из своей папки файл glavn.htm.

Нажмите правою кнопку мыши и выберите просмотр html-кода.

Выровняйте весь заголовок по центру и сделайте его красным цветом, размер шрифта - 5, создайте голубой фон и желтый цвет текста

2. Поработайте с заголовками разных уровней, обратите внимание, что цвет добавленного текста - желтый, т.к. в <BODY>задан желтый цвет. Названия театров выровняйте по левому краю.

3. Оформите названия театров как ненумерованный список <UL>, заменив <H> на <LI>:

4. Создайте нумерованный список: <UL> замените на <OL>. Посмотрите разные виды нумераций, написав , попробуйте все виды нумераций списка: "Circle", "Disk", "A", "I"

5. Не забывайте сохранять свою страницу в одном и том же файле glavn.htm.

Практическая работа №3

Использование изображений для оформления страниц сайта.

Теория

1.Вставка рисунка

На Web-страницы можно помещать изображения, хранящиеся в графических файлах трех форматов - GIF, JPEG и PNG.

Для вставки изображения используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете.

2.Выравнивание рисунка

Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений:

• bottom - нижняя граница картинки выравнивается по окружающему тексту (по умолчанию)

• left - по левому краю окна. Текст обтекает справа

• middle - центр картинки по базовой линии текущей строки

• right - по правому краю окна. Текст обтекает слева

• top - верх картинки выравнивается по самому высокому элементу строки

3.Вставка альтернативного текста

Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст.

Альтернативный текст выводится с помощью атрибута alt="МДК 04.01. «Технология создания Web-документов» практикум", значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке

логотип"/>.

4.Изменение размера изображения

Изменить размеры рисунка можно с помощью атрибутов: width - задает ширину картинки и height задает высоту картинки.

Атрибут border задает границы картинки.

логотип" Width=500 height=500 border=4/>

Практическая работа

1. В своей папке создайте папку image, в которой вы будете сохранять все файлы изображений, для вставки на Web-страницы. Найдите в Интернете фотографию символа театра (символ театра - это маски) и сохраните в папке image. Вставьте фотографию на Web-страницу в файл glavn.htm.

Чтобы рисунок был по центру, его надо заключить в тег <CENTER> <img src = CENTER>

Уменьшите размеры рисунка в 2 раза по ширине и высоте, написав width=50% и height=50%.

Увеличьте пространство вокруг рисунка сверху и снизу, написав vspace=20 и hspace=20.

Создайте альтернативный текст, который появится под указателем мыши при наведении на картинку, написав alt= "драматический театр".

Создайте вокруг рисунка обрамляющую рамку: border=5.

В итоге у вас может появиться, например, такой тег, напишите его после тегов форматирования заголовка (перед списком театров):

Если рисунок окажется слишком маленьким, поэкспериментируйте с соответствующими атрибутами.

2. Самостоятельно создайте HTML-документы для всех театров, называя их a1.htm, a2.htm, a3.htm, взяв за основу файл glavn.htm. Измените заголовок, фотографию театра, вместо списка театров вставьте небольшой текст про театр и выровняйте его по ширине. Фотографии театров и текст берите из Интернета. Фотографии театров сохраняйте в папке image. Копирование фрагментов текста из Интернета осуществляйте через опции «Копировать» и «Вставить».

3. Сохраняйте, созданные Вами файлы a1.htm, a2.htm, a3.htm в своей папке.

Практическая работа №4

Организация гиперссылок между созданными документами

внутри сайта. Создание ссылок на сторонние документы и файлы.

Теория

Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки.

Гиперссылка создается с помощью универсального тэга <А> и его атрибута HREF, указывающего, в каком файле хранится загружаемая Web-страница:

<А REL="nofollow" target="_blank" HREF="https://infourok.ru/go.html?href=%D0%90%D0%B4%D1%80%D0%B5%D1%81">Указатель ссылкиА>

Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер , который задает стиль абзаца, принятый для указания адреса:

<А REL="nofollow" target="_blank" HREF="https://infourok.ru/go.html?href=%3CA+HREF%3D"mailto:username@server.ru%22%3EE-mail" TARGET="_blank">mailto:username@server.ru">E-mail: username @server.ru

A>

ADDRESS>

Для тега можно задать следующие параметры, относящиеся к гиперссылкам:

Link - задает цвет гиперссылок, по которым пользователь еще «не ходил».

Vlink - задает цвет посещенных гиперссылок.

Alink - цвет активной гиперссылки (под курсором мышки во время нажатия)

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

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

Практическая работа

1. Оформите списки с названиями театров в файле glavn.htm как гиперссылки:

2. Самостоятельно на всех HTML-страницах, посвященных театрам, создайте гиперссылку для возврата на главную страницу, написав в конце текста:

3. В файле glavn.htm создайте таблицу из одной строки на всю ширину экрана с названиями театров (для дальнейшего оформления навигации по сайту).