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

Выполнить перенос рисунка с эскиза на бумагу с помощью трафаретов (формат А3).

1. Выполнить перенос рисунка с эскиза на бумагу с помощью «модульной сетки» (формат А 3).

1) Выполнив перенос рисунка, начинают выполнять его заливку краской.

2) После того как расписаны основные элементы рисунка, выполняют прорисовку деталей (перья, хохолок, ягоды и др.).

3) Завершают работу выполнением травки, завитков, капель.

Цель работы: освоение приемов создания web-страниц и web-сайтов на языке HTML: знакомство с элементами и структурой html-документа; управление форматами текста и шрифтами; организация гиперсвязей между документами.

Краткая справка: Web – страница – это отдельный комбинированный документ сети WWW, который может содержать текст, графику, анимацию, звуковые и другие объекты. Хранится в файле *.html. Сайт (веб-сайт, ресурс) – это место в интернете, которое определяется своим адресом (URL), имеет своего владельца и состоит из веб-страниц, которые воспринимаются как единое целое.

Создание сайтов – составной процесс, состоящий из нескольких этапов:

- с помощью редакторов сайтов (HEFS, DreamWeaver и др.);

- с помощью Конструктора сайтов на основе готового шаблона (ucoz.ru, narod.ru и др.);

- с помощью систем управления сайтов (Joomla, 1С Битрикс и др.).

- планировка размещения информации на странице (верстка);

- стиль дизайна (сочетание цветов, фоны и т.д.).

Программа для Web-страницы записывается на языке HTML в виде текстовых файлов в текстовом редакторе Блокнот. Эти файлы имеют название имя.html.

Операторы (команды) языка HTML называются тегами. Общий вид тега:

Здесь будет располагаться содержимое моей страницы

<h1> … </h1> <h2> … </h2> <h3> … </h3> <h4> … </h4> <h5> … </h5> <h6> … </h6>	Эти теги выделяют текст в виде заголовков. Т.е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом и имеет свой размер (заголовок первого уровня самый большой, шестой – самый маленький). Эти теги могут использоваться с параметром горизонтального выравнивания align. Возможные значения этого параметра: left (слева), right (справа), center (по центру), jastify (по ширине).
<br>	Тег принудительного перевода строки. Текст, после этого тега начинается с новой строки
<p> … </p>	Тег разделяет текст на абзацы. Перед началом каждого абзаца следует поместить тег <p>, закрывающий тег не обязателен. В отличии от тега <br> абзацы отделяются друг от друга пустой строкой. У тега есть параметр align, который задает способ выравнивания текста внутри абзаца. Возможные значения этого параметра: left (слева), right (справа), center (по центру), jastify (по ширине).
<cite> … </cite>	Тег выделяет текст курсивом. Используется для логического выделения названий книг, статей и цитат.
<dfn> … </dfn>	Тег выделяет текст курсивом. Используется для выделения определений.
<em> … </em>	Тег выделяет текст курсивом. Используется для выделения важных фрагментов текста.
<strong> … </strong>	Тег выделяет текст полужирным шрифтом. Используется для выделения важных фрагментов текста.
<ins> … </ins>	Тег выделяет текст подчеркиванием. Используется для подчеркивания важных фрагментов текста.
<kbd> … </kbd>	Тег выводящий текст моноширинным шрифтом.
<sub> … </sub>	Тег выводящий текст ниже уровня строки шрифтом меньшего размера (нижний регистр)
<sup> … </sup>	Тег выводящий текст выше уровня строки шрифтом меньшего размера (верхний регистр)
<font> … </font>	Тег указывающий параметры шрифта теста. Основные атрибуты: face – название шрифта. Название шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден, браузер станет использовать следующий по списку. size – размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3. color – цвет текста (по умолчанию – черный). Существует два способа задания цвета: по имени или указанием шестнадцатеричного кода цвета.
<center> … </center>	Тег предназначен для выравнивания всех элементов внутри него по центру окна браузера.
<hr>	Тег рисует горизонтальную линию, отделенную сверху и снизу пустыми строками. У этого тега есть следующие параметры: align – выравнивает линию по центру (center), слева (left) или справа (right). width – устанавливает длину линии в пикселях или в процентах от ширины окна. size – устанавливает толщину линии в пикселях. color – устанавливает цвет линии noshade – убирает рельефность линии.
<ol> <li> … </li> <li> … </li> </ol>	Тег для создания нумерованного списка. По умолчанию нумерация ведется арабскими цифрами. Основные атрибуты: type = “A” – нумерация заглавными латинскими буквами. type = “a” – нумерация прописными латинскими буквами. type = “I” – нумерация римскими цифрами. type = “i” – нумерация маленькими римскими цифрами. start = число – значение с которого будет начинаться список.
<ul> <li> … </li> <li> … </li> </ul>	Тег для создания маркированного списка. По умолчанию маркер отображается в виде черного кружочка. Основные атрибуты: type = “disc” – закрашенный кружочек. type = “circle” – пустой кружочек. type = “square” – закрашенный квадратик.
<a href = …> …</a>	Тег, размещающий гиперссылку. Между тегами <a> </a> пишется текст, при щелчке по которому осуществляется переход. А в качестве значения атрибута href выступает адрес страницы, на которую будет осуществлен переход. Пример: <a href=“http://www.mysite.ru/private/index.html> Переход на главную страницу </a>

Задание №1. Создайте с помощью языка HTML в Блокноне страницы для сайта, посвящённого Вашему хобби или интересующей теме. Сайт должен содержать не менее 5 страниц.

- заголовки и гиперссылки выравнивать по центру;

- для абзацев текста использовать различные варианты выравнивания (по ширине, по левому краю, по правому краю);

- использовать разные способы выравнивания изображения;

- на каждой странице должен быть заголовок окна.