) следующим текстом:
Я знаю как оформлять:
Шрифты,
Заголовки,
Абзацы

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

Поменять оформление списка на список маркированный. Использовать теги

• ,

 

Создать «смешанный» список:

Я знаю как оформлять:

Шрифты

Размер

Цвет

Гарнитуру

Индексы

Заголовки

От 1-го до 6-го уровня

Абзацы

Выравнивание

Разрыв строк внутри абзаца

С использованием переформатирования.

 

Предъявить результаты работы преподавателю.

Таблица основных тегов HTML-документа. Теги форматирования шрифта и абзаца

 

 

Таблица основных цветов

 

 

Практическая работа № 2. Таблицы в HTML-документе

Цель работы: формирование умений использовать таблицы для оформления WEB-страниц, представлять информацию в табличном виде, производить настройку параметров таблицы

Практическая часть:

Создать таблицу по приведенному образцу, сохранить документ под именем tabl_name.htm. Сверху над таблицей разместить заголовок Таблица №1

П ри отображении таблицы в браузере должны удовлетворяться следующие условия:

таблица должна быть выровнена по центру и быть правильной (симметричной) формы;

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

Примечание. Для отображения пустых ячеек в них нужно поместить символьный примитив пробела  

В этом же документе создать копию таблицы №1, ввести заголовок Таблица №2 и модифицировать ее:

В центральной ячейке разместить рисунок.

«Раскрасить» все остальные ячейки в различные цвета.

Создать еще одну копию таблицы – Таблица №3 и отредактировать теги таблицы так, чтобы она соответствовала приведенному ниже образцу.

 

Примечание. Для объединения ячеек в тегах необходимо использовать параметры colspan= и rowspan=

 

Создать новый HTML-документ - rasp_name.htm с расписанием занятий.

Документ должен начинаться заголовком
Расписание занятий гр. NNN на весенний семестр 2005 г.

Первая строка таблицы должна быть оформлена как заголовки полей (с использованием тегов <TH>).

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

Просмотреть созданный документ в браузере при различных размерах окна и различных настройках размера шрифта.

Сохранить файл с расписанием под именем rasp_menu_name.htm и модифицировать его.

После заголовка создать таблицу, состоящую их одной строки меню с названиями дней недели.

 

В таблице с расписанием установить закладки на названия дней недели.

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

Выполнить цветовое оформление каждой ячейки меню.

Проверить правильность выполнения переходов по гиперссылкам.

Создать группу web-страниц, объединенных меню:

На рабочем диске создать папку My_raspisanie для размещения файлов расписания.

Поместить расписание на каждый день недели и таблицу с меню в отдельные файлы. Имена файлов: menu.htm – для главной страницы, названия дней недели – для остальных. Все документы разместить в папке My_raspisanie.

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

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

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

Предъявить результат преподавателю.

Теги оформления таблиц

 

 

 

 

 

 

 

 

Практическая работа №4. Организация Web-страницы на основе фреймов

Цель работы:

формирование умений создавать Web-документ, имеющий фреймовую структуру.

формирование навыка эстетического оформления web-документа.

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

Ход работы: Теоретическая часть

Создать в папке Мои документы свою папку Задание_1.

Скопировать в эту папку содержимое папки Материалы_3.

Создать в блокноте HTML-документы, используя файлы из папки Материалы_3 (разбить страницу на фреймы, сделать ссылки из левого фрейма на вновь созданные HTML-документы).

Каждый HTML-документ, на который делается ссылка, должен содержать текстовый фрагмент и картинку (для размещения текста и картинки использовать неявную таблицу и форматирование текста по ширине).

Р
езультат должен быть примерно такой:

Создать в папке Мои документы свою папку Задание_2.

Создать в блокноте HTML-документы, используя файлы из папки Материалы_ 3 (1-ый HTML-документ должен разделить страницу на кадры, во 2-ой HTML-документ вставить картинку с изображением-картой; создать также HTML-документы, которые будут загружаться в левом фрейме при щелчке на соответствующих областях изображения -карты.)

Для определения координат областей на изображении-карте воспользоваться графическим редактором Photoshop (фильтром MapTag).

Р
езультат должен быть примерно такой:

Индивидуальные задания:

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

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

Создайте документ, разбивающий окно просмотра с помощью фреймов на две прямоугольные области: верхнюю и нижнюю. В верхней области поместите оглавление. Оглавление представьте с помощью изображения-карты. При выборе активной области в нижнюю область окна должен быть загружен соответствующий пункту раздел.

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

Создайте документ, разбивающий окно просмотра с помощью фреймов на три прямоугольные области. Верхняя область (А) занимает по ширине весь экран, нижняя область окна разбивается на две части: левую (В) и правую (С). В верхнюю область А поместите графическое изображение, в область В — оглавление, при выборе пунктов которого соответствующий раздел должен появляться в области С. Оглавление может быть представлено:

списком;

изображением-картой.

Пунктам меню могут соответствовать разделы:

одного документа;

разных документов.

Представьте материалы в виде HTML-документов с описанной структурой.

Создайте документ, разбивающий окно просмотра с помощью фреймов на три прямоугольные области. Верхняя область (А) занимает по ширине весь экран, нижняя область окна разбивается на две части: левую (В) и правую (С). В область В поместите оглавление - меню, представленным в виде таблицы.
Разделы, соответствующие пунктам меню, должны появляться в области С. (данное задание можно сделать, изучив основы скриптового программирования). При попадании курсора мыши на соответствующий пункт меню, в области А должна появляться краткая аннотация выбранного пункта. Представьте материалы в виде HTML-документов с описанной структурой.

Создайте документ, разбивающий окно просмотра с помощью фреймов на три прямоугольные области. Верхняя область (А) занимает по ширине весь экран, нижняя область окна разбивается на две части: левую (В) и правую (С). В верхнюю область А поместите изображение-карту, дублирующую меню области В.

Создайте документ, разбивающий окно просмотра с помощью фреймов на три прямоугольные области. Верхняя область окна делится на две части: левую (В) и правую (С). Нижняя область (А) занимает по ширине весь экран. В область А поместите оглавление для некоторых художественных шедевров. При выборе пункта оглавления в части В должна появиться репродукция картины, в части — С сведения о художнике или о картине.

Создайте документ, разбивающий окно просмотра с помощью фреймов на три прямоугольные области. Верхняя область окна разбивается на две части: левую (В) и правую (С). Нижняя область (А) занимает по ширине весь экран. В область В поместите оглавление, представленное меню в виде таблицы. Разделы, соответствующие пунктам меню и содержащие теоретический материал, должны появляться в области С. В область А поместите документ, содержащий ссылки на примеры, практическую работу, контрольные вопросы, список литературы по выбранному разделу.

Создайте документ, разбивающий окно просмотра с помощью фреймов на четыре прямоугольные области, как показано на рис. . В области А поместите оглавление. При выборе пункта оглавления в область В должен помещаться теоретический материал, соответствующий пункту меню, в область С — список контрольных вопросов по рассматриваемой теме, в область D — практическая работа. Представьте материалы в виде HTML-документов описанной структуры.

 

 

Практическая работа №5. Создание форм и их обработка

Цель работы: формирование умений создавать HTMLформ, устанавливать необходимые параметры отображения элементов форм, создавать обработчики форм

 

Ход работы: Теоретическая часть

Формы

Формы создаются с помощью следующих тегов.

 

name="search"action="/find.cgi"method=”post”>

 

type="text"name="t" />

type="submit" />

 

Основныеатрибутытега form:

action — адрес (URI) серверного приложения, принимающего данные.

method — задает метод передачи данных. Если этот атрибут не указан, то используется GET.

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

тип_элемента" name="имя" [прочие атрибуты] />

Типы элементов:

однострочные текстовые поля (type="text")

многострочные поля: (type="textarera")

поля ввода паролей (type=”password”)

чекбоксы (флажки) (type=”checkbox”)

радиокнопки(type=”radio”)

обычные кнопки(type=”button”)

кнопки отправки/сброса (type=”reset”)

скрытые данные (type=”hidden)

Выпадающий список (type=”select”)

Пример Фрагмент кода:

 

Форма заказа обучающего видеоматериала:

 

 

 

Вашеимя: *

 

 

 

 

Вашзаказ:

 

 

Видео-урокпо HTMLВидео-урокпо CSSВидео-урокпо PHP

 

 

Выберите носитель:

 

 

CD

 

 

DVD

 

 

USB Flash

 

 

Ваш E-mail: *

 

 

 

 

Вашадрес: *

 

 

 

 

 

 

 

 

 

 

Результат

Н ачало формы

Ваше имя: *

Ваш заказ:
Выберите носитель:

CD
DVD
USBFlash
ВашE-mail: *

Ваш адрес: *

Конец формы

* - поля обязательные для заполнения!

Практическая часть

 

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

 

Задание 1. Создайте форму по образцу (чекбоксы и кнопки).

Какое блюдо будете заказывать?

 

Начало формы

 

 

 

 

 

Задание 2.Создайте форму по образцу (однострочные поля, выпадающие списки и кнопки)

Куда доставить заказ?

Начало формы

 

Задание 3. Создайте форму по образцу (радиокнопки и простые кнопки).

Как будете расплачиваться?

 

 

Конец формы

Сохраните страницу в личной папке в файл form11.html

 

Практическая работа №6. Добавление графических объектов в HTML-документ

Цель: формирование умений вставлять графические изображения в web-страницу, снабжать web-страницу фоновой графикой, заключать графическое изображение на web-странице в цветную рамку, задавать параметры обтекания графики текстом, выравнивать текст относительно графического изображения, создавать пустую область вокруг графического изображения
 

Ход работы Практическая часть

Задание

1. Создать web-страничку в текстовом редакторе Блокнот и сохранить ее в созданной папке под именем graphic.html.

2. Вставить графическое изображение.

3. Добавить графический фон.

4. Заключить графическое изображение в цветную рамку.

5. Задать параметры обтекания графики текстом.

6. Выравнить текст относительно графики.

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

8. Предъявить результаты выполнения работы преподавателю. Выйти из редактора, сохранив изменения в документе. Закройте программу web-обозревателя.

 

Технология работы

Задание №1

Создание web-страницы.

1. Включите ПК.

2. Запустите редактор Блокнот.

3. Создайте простейшую web-страничку, используя знания, полученные на предыдущих занятиях.

4. Между дескрипторами

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

5. Задайте размер заголовка – 1 уровень и разместите данный заголовок по центру, используя соответствующие дескрипторы.

6. Сохраните web-страничку в созданной папке под именем graphic.html.

 

Задание №2

Вставить графическое изображение.

Дескриптор позволяет вставить в текст web-страницы графическое изображение.

Графические элементы отображаются web-браузером автоматически в общем потоке данных – им не отводятся отдельные строки, если это не оговорено специально.

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

Изображения, которые вы намереваетесь вставить в текст web-страницы, должно быть представлено в виде файлов форта GIF или JPEG.

7. Введите в той области текста, куда необходимо поместить графическое изображение (оно должно находиться между дескрипторами

и ), и замените ? строкой, задающей имя графического файла и его положение на диске компьютера.

Например,

 

 

 

Мой сад

 

 

8. Сохраните изменения в web-странице. Посмотрите результат использования тэга в окне браузера.

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

9. В теле дескриптора введите ALT=”?”, замещая ? фрагментом текста, призванным заменять графическое изображение в случае, если по той или иной причине оно не воспроизводится на экране.

10. Сохраните изменения в web-странице и посмотрите результат в окне браузера. Чтобы разместить на web-странице графическое изображение, следует указать имя и место хранения соответствующего файла. Если графический файл располагается в той же папке, что и файл страницы, достаточно указать только его имя (например, Тигр.jpg). Если файл находится во вложенной папке, следует задать название этой папки и имя файла (скажем, image/Тигр.jpg).

Например,

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

. Если необходимо разместить изображение на новой строке, следует воспользоваться дескрипторами

или
.

Например,

 

В состав web-страницы зачастую включают так называемые баннеры – графические изображения декоративного или рекламного характера, обычно располагаемые вверху, над текстом. В качестве баннеров используются изображения с размерами, приблизительно равными 450 пикселей по горизонтали и 100 пикселей по вертикали. Подобный формат отвечает требованию эффективного заполнения пространства окне браузера. Баннеры сохраняются в виде файлов типа GIF.

Например, IMG SRC=”banner.gif”>

 

Задание №3

Добавление фоновой графики

Атрибут BACKGROUND, используемый в контексте дескриптора

, позволяет снабдить web-страницу графическим фоном. Изображение, применяемое для формирования фона страницы, обычно невелико по размеру; браузер автоматически размещает его копии таким образом, чтобы целиком заполнить поверхность страницы. Собираясь сформировать графический фон страницы, используйте такие изображения, которые способны вызвать интересные зрительные эффекты и вместе с тем не мешают восприятию текстовой информации. Удачное изображение при его многократном повторении выглядит гладким, без «швов» между соседними составляющими.

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

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

11. В теле дескриптора

введите BACKGROUND=”?” замещая ? строкой, задающей имя графического файла и его положение на диске компьютера.

12. Сохраните изменения в web-странице и посмотрите как web-браузер формирует графический фон страницы, многократно отображая содержимое указанного графического файла.

 

Задание №4

Обрамление графического изображения

Атрибут BORDER позволяет заключить графическое изображение, помещенное на web-страницу, в цветную рамку. Рамка придает изображению четкость и улучшает внешний вид страницы.

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

13. В теле дескриптора , определяющего графическое изображение, которое подлежит обрамлению, введите BORDER=”?”, заменяя ? числом, выражающим значение толщины линий рамки в экранных пикселях.

Примечание: чтобы удалить существующую рамку, задайте значение толщины, равной 0.

14. Сохраните изменения в web-странице и посмотрите результат воспроизведения графического изображения, облаченного в рамку в окне web-браузера.

 

Задание №5

Задание параметра обтекания графики текстом

Атрибут ALIGN позволяет установить правила сосуществования на web-странице фрагментов текста и графических изображений.

Если атрибут ALIGN уже был применен для выравнивания текста относительно графики в пределах конкретной web-страницы, установить параметр обтекания графики текста вам не удастся.

Атрибут ALIGN, используемый для указания признака обтекания графики текстом, допускает задание любого из двух значений – left или right. Значение left заставляет браузер поместить изображение слева от текста, а right – справа от него.

15. Чтобы изображение размещалось браузером слева от текста в теле дескриптора введите ALIGN=”left”.

16. Сохраните изменения в web-странице и посмотрите результат задание параметра обтекания графики текстом в окне web-браузера.

Если необходимо, чтобы форматированию подвергался только определенный фрагмент текста, следует применить дескриптор
с атрибутом CLEAR, указывающими позицию в тексте , начиная с которой действие механизма обтекания графики текстом отменяется. Значение left, right и all атрибута CLEAR позволяют определить, с какой стороны – левой, правой или с обеих – текст далее будет свободен от графических изображений.

17. Для отмены действия параметра обтекания графики текстом щелкните в том месте текста, начиная с которого следует отменить действие механизма обтекания графики. Введите
и замените ? обозначением стороны страницы (left, right или all), которая далее должна быть свободна от графических изображений.

18. Сохраните изменения в web-странице и посмотрите результат отмена действия параметра обрамления графики текстом в окне web-браузера.

 

Задание №6

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

Атрибут ALIGN со значением top (сверху), middle (посередине) и bottom (снизу) позволяет задавать вертикальное положение фрагмента текста относительно границ соседнего графического изображения.
Если атрибут ALIGN уже был применен вами для задания параметра обтекания графики текстом, установить признак выравнивания текста относительно графики в пределах конкретной web-страницы вам не удастся.

19. В теле дескриптора , определяющего графическое изображение, относительно которого должен быть выровнен фрагмент текста, введите ALIGN=”?”, заменяя ? одним из обозначений признака выравнивания – top (кверху), middle (посередине) и bottom (книзу).

20. Сохраните изменения в web-странице и посмотрите результат выравнивания текста относительно графики в окне web-браузера.

 

Задание №7

Пустая область вокруг графического изображения.

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

Атрибут HSPACE предоставляет возможность задания ширины чистой области слева и справа от изображения, а атрибут VSPACE управляет значением высоты пустых полос сверху и снизу.

21. В теле дескриптора , определяющего графическое изображение, которое подлежит форматированию, введите HSPACE=”?” заменяя ? числом, выражающим значение ширины чистых полос, располагаемых слева и справа от изображения, в экранных пикселях.

22. В теле дескриптора , определяющего графическое изображение, которое подлежит форматированию, введите VSPACE =”?” заменяя ? числом, выражающим значение высоты чистых полос, располагаемых сверху и снизу от изображения, в экранных пикселях.

23. Сохраните изменения в web-странице и посмотрите результат создания пустых областей вокруг графического изображения в окне web-браузера.

 

Задание №8

Предъявить результаты выполнения работы преподавателю. Выйти из редактора, сохранив изменения в документе. Закройте программу web-обозревателя.
 

 

Практическая работа №7 Применение каскадных таблиц CSS для создания HTML-документа

Цель: формирование умений применять таблицы стилей, форматировать текст с помощью нотаций CSS

Ход работы: Теоретическая часть

Введение

CascadingStyleSheets(CSS)- каскадные таблицы стилей. Таблицы стилей - попытка отделить детали дизайна странички от ее структуры и содержания.

Методы определения таблицы стилей в документе HTML:

Связывание(linking)- Внешние таблицы стилей

Вложение(embeding)- Информация о стиле в заголовке: элемент STYLE

Встраивание(inline) - Атрибут style

Импорт(import) - @import url(file_css.css)

 

a) Linking - Подключение css файла происходит в области

 

……….

 

head>

 

b) Embedding - Методвложения.

Внутрь тега

необходимо поместить парный элемент

c) Inline - Методвстраивания.

Стиль помещается внутрь тега как его атрибут: style=" свойство:значение":

<Selectorstyle= “Правило CSS”>

 

Текстовые стили

Селектор по элементу

Позволяет отобрать на html страницы все одноименные теги. Допустим, мы хотим поменять цвет всех абзацев

с черного на красный:

p {

color:#CC0000;

}

Семейство шрифтов текста задается с помощью свойства font-family.Свойство font-family должно содержать несколько имен шрифтов, как "резервные" системы.

 

Стиль шрифта

Свойство font-style в основном используется, например, для указания текста курсивом, имеет три значения:

font-style: normal|italic|obligue

normal - текст отображается нормально

italic - текст отображается курсивом

oblique - текст "наклонный" (oblique очень похож на курсив, но менее поддерживается)

 

Размер шрифта

Свойство font-sizeустанавливает размер текста в формате:

font-size: абсолютный размер | относительный размер | значение | % | inherit

Как правило, по умолчанию для большинства браузеров:

1em = 12pt = 16px = 100% = medium

Выравнивание текста

Свойстоtext-alignотвечает за выравнивание текста по горизонтали. Текст можно выравнивать по центру (center), по правому/левому (right/left) краю или по ширине. Когда текст выровнен по ширине (text-align:justify), каждая строка имеет одинаковую длину (как в журналах и газетах).

Практическая часть

Задание 1.
Напишите исходный текст страницы и измените стили элементов.
 

Покрасьте меня в розовый цвет (color:pink).

Данный элемент должен остаться неоформленным.

Покрасьте меня в серый цвет (color:grey).

Данный элемент должен остаться неоформленным.

Покрасьте меня в красный цвет (color:red).

Данный элемент должен остаться неоформленным.

Покрасьте меня в зеленый цвет (color:green).

Покрасьте меня в желтый цвет (color:yellow).

Задание 2.
Напишите исходный текст страницы и измените стили элементов согласно требованиям.

Данный абзац написан шрифтомArialBlack и имеет размер 20 пикселей.

Данный абзац написан курсивным шрифтом CourierNew и имеет размер 24 пикселя и выровнен по ширине.
 

Установите красную строку. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение. Это текстовое заполнение.
 

Данный абзац написан жирным шрифтомVerdana и имеет размер 10 пикселей.
 

Данный абзац написан шрифтом Georgia и имеет размер 2.5em и отцентрирован
 

Данный абзац написан курсивным шрифтом ComicSans MS и имеет размер 1.3em.

 

Практическая работа №8 Применение каскадных таблиц CSS для оформления текста в HTML-документе

Цель: Ознакомиться с селекторами классов и селекторами id.

Научиться создавать списки.

Ход работы: Теоретическая часть

Селектор по классу

Селектор класса применим к любому элементу страницы неограниченной число раз. Обозначается именем с точкой:

 

.new {

font-family: arial, verdana, sans-serif;

font-size: 12px; color:green;

}

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

 

... текст параграфа ...

 

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

Селектор по id

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

html- часть:

 

Первый заголовок на странице

 

css - часть:

#firstheader{

color: red; // задает красный цвет текста

font-weight: bold; // шрифт станет жирным

text-align: center; // центрирование

}

Групповые селекторы

Групповые селекторы – это когда вместо одного имени тега будет использоваться несколько:

p, h1{

color:#ваш цвет;

 

Различные маркеры списка элементов

Тип маркера пункта списка указывается со свойством list-style-type

 

Кроме того, можно определить свой собственный маркер списка, сделать это можно так:

ul { list-style-image: url(images/book.gif); }

 

Практическая часть

Выполнить задания с применением селекторов классов и id (заголовок).

Пример страницы с применением CSS

Задание 1.
Скопировать текст и применить стиль:TimesNewRoman, размер стандартный, выравнивание по левому краю, красная строка.

Loremipsumdolor sitamet, consecteturadipiscingelit. Vivamusaliquamgravidaturpis at aliquet.Praesentviverratellus vitae enimrutrumnecbibendumtortorpharetra. Fuscemassametus, fermentum id varius id, volutpat tempus nisi. Suspendissetortordiam, tristique a venenatiseu, tristiquesedorci.Fusceeget nisi vitae semmattisegestas. Phasellusconvallisfelissed magna accumsantincidunt.Phasellusullamcorperdiamegetsapienpretiumlobortis.Etiam dui nulla, dapibus id mattiseget, consectetureuipsum.Proinvarius tempus ipsum.Sedeufermentumodio.

Задание 2.
Скопироватьтекстиприменитьстиль:Arial, размерстандартный, выровненпоцентру, жирный)

Maecenas elementumrisus a nibhvolutpattincidunt. Integer massasapien, dapibus sit ametsollicitudinsed, aliquet vitae augue. Fusce vitae nulla quam.Nam quis ligula congue quam fermentumgravidapellentesquevellibero.Vestibulum vitae odio a turpiseleifendbibendum.Utmollisfacilisisenim at tincidunt. Integer odiotortor, scelerisque sit ametultrices ac, posuere a nunc. Nam faucibusfelis vitae lacus hendreritquisimperdietmassadapibus. Morbierosodio, gravidaquis semper a, fringilla ac arcu.Aliquam vitae dolor quis nisi dictum consequat sit ametvelipsum. Pellentesquenecliberoquis lacus cursuscommodo. Cras sit ametvenenatis magna. Proin non cursuseros.Pellentesque habitant morbitristiquesenectusetnetus et malesuada fames ac turpisegestas.

Задание 3.
Скопировать текст и применить стиль:Verdana, размер стандартный, выравнивание по ширине, красная строка.

Sedcursusviverratempor.Nuncaliquet, odioegetultriciesmalesuada, nisi augueinterdumorci, sit ametconsequatloremelit in risus. Praesentmalesuadaest sit amet mi cursusimperdiet. Maurisvariuseros ac lacus bibendumut tempus sapieneleifend.Aliquamconsectetur, tellusseddignissimtincidunt, loremaugueeuismodlectus, etlaciniaorciipsumeunibh. Aliquamegetfringilla dolor.Nam utnuncsed magna facilisisrhoncusquis non dui.In dolor nisi, eleifendeget tempus ac, tempus velelit.Praesentetaccumsanfelis. Fusce ligula mi, eleifendvenenatislobortisnon, tincidunt vitae elit. Maurisporttitorscelerisqueluctus.Quisque ac felisut lacus interdumbibendumutnectortor. Nuncsapienjusto, eleifendquisrhoncus in, posueresedelit.Donectinciduntvelit sit ametnuncmolestie in laoreetveliteleifend.

Задание 4.
Скопироватьтекстиприменитьстиль:TimesNewRoman, размерстандартный, выравниваниепоправомукраю,.

Suspendissenuncsapien, dignissim a pellentesqueeget, dignissimeu nisi.Etiamimperdietiaculiserat, velviverraenimaliquameu.Nullam vitae massa ac arcucondimentumconsequateueget ante. Integer scelerisquemattisipsumetauctor. Fuscemolliscondimentum magna, sedaliquet dui dictum et. Fusceconsequatrisus in purustemporconsectetur. In vel ligula turpis.Donectincidunt, loremnecimperdietviverra, arcuurnamalesuadanisl, id volutpat nisi diam a mi. Phasellustinciduntvehicula magna non varius. Quisquetemporsollicitudin ligula, egetbibendumtortor tempus id.Etiamutrhoncusrisus.Proinrutrumsapiensedmassaluctusquisblanditodiovestibulum. Inquisiaculisnunc.

Задание 5.
Скопироватьтекстиприменитьстиль:TimesNewRoman, размерстандартный, жирный, курсив.

In hachabitasseplateadictumst.Aliquameratvolutpat.Proin vitae mi quisestsollicitudiniaculis. Fuscecursusullamcorperpurusnecrutrum. Donecnecnuncvelit. Nam sapien dui, pellentesque non tinciduntnon, ultricieseuelit. Maurissedaccumsansapien.Crasrutrumcommodofelis, euvehicula dui eleifend vel. Craslaoreettellusegetodiofermentumsodales .

Задание 6.
Создатьмаркированныйсписок, маркер – круг.

Text1

Text2

Text3

Text4

Text5

Задание 7
Создать список с изображениями вместо маркеров

Пример:

Овен (21 марта – 19 апреля);

Телец (20 апреля – 20 мая);

Близнецы (21 мая – 20 июня);

и т.д.

 

 

Практическая работа №9 Позиционирование с помощью CSS

Цель: Ознакомиться с блочной разметкой страницы. Научиться управлять размещением блочных элементов на странице. 

Ход работы: Теоретическая часть

Блочная модель

Для браузера каждый тег – это контейнер, у которого есть содержимое, внутренний отступ, внешние поля, а также рамка. Блок занимает пространство на странице равное сумме ширины содержимого, отступа, поля и рамки.

 

Рис. 1. Блочная модель элемента
 

Рис. 2. Порядок установки параметров
 

 Для всех приведенных ниже атрибутов разрешается использовать 1, 2, 3 или 4 значения, перечисляя их через пробел. В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.
 

Атрибуты блочных элементов

Margin
Возможные атрибуты:

margin-top - ширина верхнего поля.

margin-right - ширина правого поля.

margin-bottom - ширина нижнего поля.

margin-left - ширина левого поля.

inherit - применяется значение родительского элемента.

 

p {

margin: 20px 30px 5px 0;

}

padding

Возможные атрибуты:

padding-top - ширина верхнего промежутка.

padding-right - ширина правого промежутка.

padding-bottom - ширина нижнего промежутка.

padding-left - ширина левого промежутка.

inherit - применяется значение родительского элемента.

h1{

padding: 10px 100px;

}

border

Возможные атрибуты:

border-width - толщина границ.

border-style - стиль границ.

border-color - цвет границ.

inherit - применяется значение родительского элемента.

p{

border:5px groove lightgrey;

}

Рис. 3. Тип границ элемента

 

Float(обтекание блока, плавающий блок)

 

Возможные атрибуты:

right - выравнивает блок по правому краю, а остальные элементы будут обтекать его с левой стороны, начиная с самого верха;

left - выравнивает блок по левому краю, а остальные элементы будут обтекать его с правой стороны, начиная с самого верха;

none - это значение стоит по умолчанию, блок остаётся на месте;

inherit - наследует значение у родительского блока.

 

Clear(запрет на обтекание)

Возможные атрибуты:

right - отменяет обтекание структурного блока с правой стороны;

left - вотменяет обтекание структурного блока с левой стороны;

both - отменяет обтекание блока с двух сторон;

none - отменяет действие данного свойства;

inherit - наследует значение у родителя.

 

Ширина блочных элементов

Если ширина не указана явно тогда она получает значение auto (width: auto) и элемент занимает всю доступную ширину контентной области родителя. В данной ситуации width родителя = реальной ширине дочернего блока.

Изменение ширины контента родителя влечет за собой изменение ширины дочерних элементов.

Ширина элемента не может стать меньше указанного min-width (если конечно оно задано) даже если ширина родителя окажется меньше.

Ширина элемента не может стать больше указанного max-width даже если размеры родителя ему это позволяют.

Внешние отступы (margin-left, margin-right) влияют на реальную ширину блока.

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

Если ширина явно указана в относительных единицах, то она будет рассчитываться относительно ширины контентной области родителя. Будет каждый раз пересчитана при изменениях width родителя. Внешние отступы на размер элемента влияния оказывать не будут.

 

Высота блочного элемента

По умолчанию высота принимает значение auto (height: auto) и зависит от реальной высоты содержимого. Соответственно, если меняется высота содержимого, меняется высота и блока. 

Если блоку заданы минимальная или максимальная высота (min-height, max-height), или высота (height) явно указана — поведение блочного элемента аналогично поведению с min-width/max-width/width.

Практическая часть

Задание 1

Поместить текст в блок. Группа Блок позволяет заключить текст в блок. Вверху обычный текст, а внизу текст после применения стиля Блок.

 

Задание 2.
Создать плавающие элементы по образцу. "Плавающие" и не "плавающие" объекты. Задайте фоны и границы.

 

Задание 3.

Задание внутренних отступов в блоке. Параметры отступа - грунтования (Padding). Слева обычный блок, справа - со значениями Padding (грунтование 50 пикселей со всех сторон). Задайте фон.
 

Задание 4.

Работа с внешними отступами (margin). Параметры Отступ (Margin) определяют отступы между внешними границами блока и его содержимым. Вверху - без отступа, внизу со значениями отступа 10 пикселей справа. Добавьте границы в каждом блоке и измените фоны.
 

 

Задание 5

Создайте блочный каркас сайта (каждый элемент – отдельный блок div)

 

 

 

 

Практическая работа №10 Создание компонентов интерфейса

Цель: Ознакомиться с возможностью таблиц стилей по оформлению фонов объектов. Научиться создавать фоны для страниц, блоков и текста.

Ход работы: Теоретическая часть

Введение

Для работы с фоном в языке HTML имеется два атрибута:

bgcolor - задает фоновый цвет элемента. Присутствует у элементов BODY, TABLE, TR, TH и TD. В спецификации HTML 4.01 помечен как нежелательный для использования;

background - задает фоновое изображение для элемента. Согласно спецификации HTML 4.01 присутствует только у элемента BODY и помечен как нежелательный для использования, однако браузеры поддерживают данный атрибут для элементов TABLE и TD.

На современном уровне эту задачу выполняют таблицы стилей CSS.

 

Свойства цвета и фона

 

Свойства фона могут быть заданы одной строкой c помощью свойства background::

 

background: transparent | background-color | background-image |

background-repeat | background-attachment | background-position;

Например:

background:#ffffff no-repeat url(fon.gif);

 

Определение параметров свойства background.

background-color- (Определяет цвет фона).

Значение:

любое соответствующее стандарту значение цвета.

transparent - фон элемента делается прозрачным (по умолчанию).

inherit - применяется значение родительского элемента.

body{

background-color: black;

}

background-image–(Определяет фоновое изображение элемента).

Значение:

none - фоновое изображение не устанавливается.

любое соответствующее стандарту значение URL фонового изображение.

inherit - применяется значение родительского элемента.

h1{

background-image: url(pictures.gif);

}

background-repeat–(Определяет направление, по которому экран будет заполняться копиями фонового изображения).

Значение:

repeat - фоновое изображение повторяется по горизонтали и по ветикали (по умалчанию).

repeat-x - фоновое изображение повторяется только по горизонтали.

repeat-y - фоновое изображение повторяется только по вертикали.

no-repeat - фоновое изображение не повторяется.

inherit - применяется значение родительского элемента.

body {

background-image : url(fon.png) ;

background-repeat: no-repeat;

background-attachment: scroll ;

}

 

background-attachment: - Устанавливает прокрутку

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

Значение:

scroll - фон прокручивается вместе с содержимым;

fixed - фон строго зафиксирован.

div{

background-image: url(pictures.gif);

background-attachment: fixed ;

}

opasity: - (Установка полупрозрачного фона).

Свойство CSS 3 opacity задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность. У свойства opacity есть особенность — прозрачность распространяется на все дочерние элементы, и они не могут превысить значение прозрачности своего родителя. Получается, что непрозрачный текст на полупрозрачном фоне быть не может.

div{

border-radius:20px; /* Закругленные уголки */

background-color:white; /* Цветфона */

opacity: 0.9; /* Полупрозрачный фон */

}

background-position: - (Задает местоположение фонового изображения).

В качестве первого значения данного свойства должна задаваться величина смещения изображения по горизонтали, а в качестве второго величина смещения по вертикали. Величина смещения может быть указана как с помощью пикселей (px), процентов (%) и сантиметров (cm) (background-position:50px 30px;), так и с помощью предопределенных ключевых слов (background-position:righttop; background-position:centercenter;).

body

{

background-image:url('spider2.gif');

background-repeat:no-repeat;

background-position:40px 60px;

}

Практическая часть

Задание 1.

Создайте в отдельном файле горизонтальный светофор из трех блоков (Рис. 1.).

Ширину блоков сделайте динамичной, что бы они изменялась в зависимости от ширины окна, но все блоки должны иметь одну ширину. Задайте каждому блоку свой цвет. Отступы для body уберите с помощью css.

Рис. 1. Светофор из трех блоков

Задание 2.

Создайте новый htmlфайл в который поместить фоновое изображение ягоды в центре страницы.

 

 

 

 

 

Задание 3.
Создайте страницу в соответствии с Рис.3

CSS фоновые цвета - пример!

Это текст внутри элемента div.
 

Этот параграф имеет свой собственный цвет фона.

Мы все еще внутри элемента div.
 

 

Рис. 3. Создание фона для заголовка, параграфа и блока.

 

 

Задание 4.

Создайте страницу с фоновым изображением. Изображение дерева нужно скопировать, задать нужные размеры и сохранить как изображение с помощью графического редактора.Фон можно выбрать из образцов в Приложении.
 

 

 

 

П ривет Мир!

Теперь фоновое изображение выводится только один раз, а также оно расположено в стороне от текста. Фон залит одним тоном.

В этом примере мы также добавили отступ с права - чтобы фоновое изображение не портило текст.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Приложение. (Фоновые цвета)

 

Список использованных источников

 

 

https://infourok.ru/laboratornaya-rabota-sozdanie-tml-dokumenta-673070.html

pandia.ru/text/77/372/25687.php

Евсеев, Д. А. Web-дизайн в примерах и задачах [Текст]:учебное пособие для вузов. /Д. А. Евсеев, В. В. Трофимов ; под ред. В. В. Трофимова ; Санкт- Петербургский государственный университет экономики и финансов.- М.:КНОРУС, 2016. – 262 с.

Основы WEB-технологий: учебное пособие / П. Б. Храмцов, С. А. Брик, А. М. Русак, А. И. Сурин. - 2-е изд., испр. – М.: Интернет-Университет Информационных Технологий, 2016. – 374 с.

Основы программирования на РНР: курс лекций: учеб.пособие для студентов вузов, обучающихся по специальностям в области информ.технологий / Н.В. Савельева. – М.:Интернет Ун-т информ. Технологий, 2014. – 264с. – (Основы информационных технологий).