аблица. Некоторые тэги HTML

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

HTML. Создание сайта.

Цель работы:ознакомление с основными тэгами HTML и создание сайта в текстовом редакторе (Н-р: Блокнот).

В результате выполнения работы: в рамках заданной предметной области (она же является темой для реферата) должен быть создан небольшой (5 - 10 страниц) сайт.

Таблица 1. Варианты заданий

№ вар.	Тема
	Стандартные и оригинальные сервисы Интернет. Обзор. Предоставляемые возможности.
	Уникальность контента. Что это такое? Зачем надо? Как проверить? Как повысить?
	Поисковая оптимизация: белая, серая, черная. Методы поисковой оптимизации.
	Системы управления корпоративным контентом (ECM). Их задачи. Примеры.
	Хостинг. Виды. Параметры.
	Корпоративный контент. Цифровой и мобильный контент. Структурированные и неструктурированные данные.
	IT-аутсорсинг. Особенности, виды, перспективы применения в России
	ITIL. Базовые процессы. Методология организации службы технической поддержки ITIL.
	Корпоративные стандарты управления IT. Решения Hewlett-Packard по управлению IT. ITSM Reference Model.
	Корпоративные стандарты управления IT. Решения IBM по управлению IT. Модель информационных процессов ITPM. Платформа управления ИТ-инфраструктурой IBM/Tivoli.
	Корпоративные стандарты управления IT. Подход Microsoft к построению управляемых информационных систем. Microsoft Operations Framework.
	Стандарт CobiT.
	Типы сайтов.
	Программное обеспечение для управления контентом сайта. Например: управление контентом сайта от 1C-Битрикс.
	Особенности поисковых инструментов Интернет: поисковые машины, поисковые каталоги, метапоисковые системы.
	Облачные сервисы: IaaS, PaaS, SaaS

Порядок выполнения работы:

1) Почитать материал приложения 1 + самостоятельно почитать электронный учебник по HTML

Например: этот http://htmlbook.ru/samhtml или http://ru.html.net/tutorials/html/ или http://kek.ksu.ru/EOS/TESTS/LTags.html или http://www.rabota-33.ru/html_nahinaushim.html и найти (как минимум) следующую информацию

- структура сайта;

- что такое тэги и какие они бывают;

- правила применения тэгов;

- тэги для форматирования текста, вставки изображений, гиперссылок.

минимальный набор тэгов, который необходимо знать наизусть (т.к. они войдут обязательно в контрольный тест) приведен в конце данных методических рекомендаций в приложение 1.

2) Собрать необходимую информацию по заданной теме (сначала в файле word). Структурировать её, найти подходящие изображения. Согласовать с преподавателем.

3) Разместить найденную информацию на страницах сайта. Первая страница должна быть визитной карточкой студента и практической работы (подробнее см. ниже).

Требования к сайту:

- Примерная структура сайта приведена на рис.1

Рис.1. Структура сайта

- Минимальный набор тегов который должен присутствовать см. таблицу 2:

Можно использовать и другие тэги, но необходимо знать их назначение.

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

- Для фона страниц (примерный цвет фона см. таблицу вариантов) возьмите коды из палитры цветов, рекомендуемых для экранного дизайна с сайта Артемия Лебедева (http:// www.artlebedev.ru/tools/colors) – пример см. рис.2.

Рис. 2. Цвета, используемые в Internet

- Должно быть не менее 5 изображений, соответствующих контенту

- Должны быть гиперссылки на ресурсы Интернет

- Первая страница – должна быть “визитной карточкой” автора и практической работы и должна содержать как минимум следующую информацию:

Сайт-отчет по 1 практической работе

Дисциплина: Управление ИТ-сервисом и контентом

Студента ____

Группы_____

Тема:_______________

Содержание (оформить в виде нумерованного списка с гиперссылками):

1 ______

2 ______

………………..

Использованные ресурсы Интернет (оформить в виде ненумерованного списка с гиперссылками):

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

В качестве отчета – необходимо показать преподавателю:

Файл word с найденным материалом.

Созданный сайт.

риложение 1.

Гипертекстовые страницы можно создавать в текстовом редакторе с использованием языка разметки гипертекста HTML (HyperText Markup Language) или в среде специальных редакторов web-страниц.

Главное понятие языка HTML - "тэг" (англ.: tag-ярлычок, этикетка).

Тэги - это заключенные в угловые скобки "<,>" последовательности букв, (образованные, как правило, сокращением английских слов).

Гипертекстовый документ содержит:

· Текст(контент), который отображается в окне браузера в соответствии с форматированием, заданным с помощью тэгов(кодов) HTML;

· тэги разметки, определяющие форматирование элементов документа;

· тэги разметки, обеспечивающие вставку различных элементов в документ;

· тэги, определяющие структуру связей с другими информационными ресурсами (гипертекстовые ссылки). Эти связи могут объединять документы с самыми разными информационными ресурсами, в том числе содержащими звуки, видео.

Тэги бывают двух типов: автономные и контейнеры.

Автономные тэгине имеют конечного компонента, служат для вставки в документ каких-либо элементов.

Например:

- горизонтальной линии (<hr>),

- вставки изображения <img>.

Тэги контейнеры – это пара "открывающий - закрывающий" тегов, между которыми содержатся какие-то элементы документа, к которым применяются указания тэгов контейнеров. Тэг контейнер имеет следующий вид:

<имя начального тэга [список атрибутов]> содержание контейнера </имя конечного тэга>.

Например:

- Код любого HTML-документа начинается тегом <html> и завершается тегом </html>.

- Каждый документ имеет контейнер <head>...</head>, содержащий вспомогательную информацию(заголовок), и контейнер <body>...</body>, содержащий сам текст документа.

- чтобы выделить текст жирным шрифтом необходимо расположить его между тэгами: <b> Текст </b>

Можно вкладывать контейнеры друг в друга.

Пример структуры html-документа (вложения контейнеров):

<html>

<head> <title> Тема </title>

</head> <body> Содержание </body></html>

аблица. Некоторые тэги HTML

(источник: http://web.folvarok.ru/tegs.htm )

№	Основные теги	Краткое описание	Комментарии и примеры использования
	<html></html>	Определяет тип документа как web страницу.	Пример использования<html> <head> <title> Тема </title> </head> <body text="#00ff00" bgcolor="#ffffcc"> Содержание </body></html>
	<head></head>	Служебная часть документа, не отображаемая в браузере, тут размещаются заголовок, описание, ключевые слова и т.д.
	<body></body>	Между этими тегами располагается непосредственно сама web страница, которую Вы видите на экране, могут размещаться и другие типы данных.
	<title></title>	Тег для заголовка страницы	Контейнер <title>...</title>, располагается в секции <head>...</head>, и содержит текст, который будет отображаться в верхней строке окна браузера. Содержимое данного контейнера попадает в индекс поисковой системы. Пример использования: <title> Контент </title>
	<body bgcolor="?">	Определяет цвет фона web страницы	Пример использования приведен в п.1 <body text="#00ff00" bgcolor="#ffffcc"> Этот тэг задает цвет текста и фона так как показано в этой ячейке
	<body text="?">	Определяет цвет текста web страницы
	<body link="?">	Задается цвет гиперссылок в нормальном состоянии	<body link="#0000ff"> - задает такой цвет для гиперссылок в нормальном состоянии
	<body vlink="?">	Задает цвет уже просмотренных гиперссылок.	<body link="#ff00ff"> - задает такой цвет для просмотренных гиперссылок
	<body alink="?">	Задает цвет выделенной гиперссылки.	<body link="#ff0000"> - задает такой цвет для выделенной гиперссылки
	<h1></h1>	Тег заголовка, создает самый крупный заголовок, цифра 1 может меняться в пределах от 1 до 6. 1 - будет самый крупный заголовок.	<h3> Текст, который надо сделать 3 размером</h3>
	<b></b>	Делает текст полужирным.	<b>Текст, который надо сделать полужирным</b>
	<u></u>	Подчеркивает текст	<u> Текст, который надо подчеркнуть</u>
	<i></i>	Форматирует текст в наклонный.	<i> Текст, который надо сделать наклонным</i>
	<font size="?"></font>	Устанавливает размер шрифта, значение от 1 до 7.	<font size="3"></font>
	<font color="?"></font>	Задает цвет текста.	<font color="#0000ff"></font> - задает такой цвет текста
	Оформление гиперссылок в html
	<a href="URL"></a>	Создает гиперссылку, имеется ввиду как внутренние, так и внешние гиперссылки.	Пример использования (см. пример сайта – главная страница) <a href="mainpage.htm"> Первое путешествие в Стокгольм </a> - гиперссылка на документ, расположенный в той же папке <a href="http://www.yandex.ru//">ЯНДЕКС - НАЙДЕТ ВСЕ</a> - гиперссылка на сайт Интернет
	<a href="mailto:EMAIL"></a>	Гиперссылка для отправления почтового сообщения по электронной почте.	Пример использования (см. пример сайта – главная страница) <a href="mailto:orlov@mail.ru">orlov@mail.ru</a> ИЛИ ТАК: <a href="mailto:orlov@mail.ru">ПИШИТЕ СЮДА </a>
	Форматирование текста
	<p></p>	Создает новый параграф	<p>Текст параграфа</p>
	<p align="?"></p>	Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center	<p align="justify"> Текст параграфа</p> - задает выравнивание текста параграфа по ширине
	<ol></ol>	Форматирует текст в пронумерованный список	`Пример использования:` `<ol>` `<li>текст 1` `<li>текст 2` `</ol>`	В окне браузера это будет выглядеть таким образом: 1 текст 1 2 текст 2
	<li>	Определяет каждый элемент списка и присваивает порядковый номер	`Пример использования:` `<ul>` `<li>текст 1` `<li>текст 2` `</ul>`	В окне браузера это будет выглядеть таким образом: текст 1 текст 2
	<ul></ul>	Тег для создания ненумерованного списка
	<li>	Отмечает каждую новую позицию в списке кружком(по умолчанию) или квадратиком( если п.22 задается так: `<ul type="square">`).
	Графические элементы на странице (автономные тэги)
	<img src="name">	Вставляет изображение на страницу.	Пример использования (см. пример сайта – главная страница) <img src="images/vid.jpg"border =5 align=left width="700" height="350"> - вставка изображения vid.jpg из папки images Толщина рамки установлена =5 Положение изображения – слева Высота 700 Ширина 350
	<img src="name" align="?">	Форматирует положение изображения в документе, может иметь значения: left, right, center; bottom, top, middle.
	<img src="name" border="?">	Устанавливает толщину рамки вокруг изображения
	<hr>	Добавляет горизонтальную линию.	Горизонтальная линия часто используется для раздела логических частей страницы. Линия выглядит в виде канавки. Атрибуты тэга: <hr align="right"> - выравнивание (center или left); <hr width="30%"> - горизонтальный размер линии в процентах или пикселях; <hr size="6"> - толщина линии в пикселях; <hr noshade> - отмена объемности; <hr color="cc0000"> - задание цвета линии, действует в только в Internet Explorer.
	<hr size="?">	Указывает толщину линии.
	<hralign="?">	Выравнивание
	<hrnoshade>	Отмена объемности