Цель работы: создать файл с таблицей стилей, изучить основные селекторы таблиц стилей.
ИНСТРУМЕНТАЛЬНЫЕ
СРЕДСТВА ИНФОРМАЦИОННЫХ СИСТЕМ
Методические указания к лабораторным работам по курсу
«Инструментальные средства информационных систем»
для студентов вузов по направлению
09.03.02 – «Информационные системы и технологии»
всех форм обучения
Нижний Новгород
Составитель И.Н. Мерзляков, А.Н.Моисеев
УДК651.3.06
Информатика: методические указания к лаб. работам «Инструментальные средства информационных систем» /НГТУ; сост.: И.Н. Мерзляков, А.Н.Моисеев Н. Новгород, 2015, 14 с.
Лабораторная работа № 1
ОСНОВЫ HTML
Цель работы: изучение интерфейса Notepad++; создание html страниц, изучение тегов HTML и их атрибутов, изучение свойств, параметров и возможностей форм.
Задание 1
Необходимо получить у преподавателя тему для выполнения лабораторных работ, у каждого студента своя уникальная тематика. Тематика может быть выбрана и самостоятельно при согласовании с преподавателем.
Задание 2
Откройте проводник и создайте свою папку. В созданной папке создайте вложенную папку с именем группы.
Задание 3
Создайте в своей папке текстовый документ с названием «Лабораторная работа №1».
Задание 4
Откройте программу Notepad++ и создайте файл, выбрав html формат. Определите структуру будущего html файла (<html><head><title><body>) сохраните файл в папку.
Задание 5
Заполните полученную страницу содержимом в соответствии с выбранной темой: разнообразными тегами для работы со шрифтом, тэгами спец символов, <ol>,<ul>,<dl>,<table>,<tr>,<td>, <a href=""><Form>, <Input>, <Textarea>, <Select> и другими тегами.
Задание 6
Разместите html страницу на хостинге при наличии интернета (хостинг должен быть без рекламы)
Контрольные вопросы
1. Как переводится аббревиатура HTML?
2. Какие теги требуют закрытия, а какие натребуют?
3. С помощью каких редакторов можно редактировать web страницы?
4. Назовите теги таблицы и их параметры?
5. Как вставить картинки и их свойства в HTML?
6. Как добавить ссылки: разновидность, возможность, свойства?
7. Работа с текстом: размер, выравнивание, шрифты, кодировки, стандарты.
8. Как добавить формы в HTML?
9. Как добавить кнопки на форме: размещение, действия, свойства, параметры?
10. Как добавить поля на форме: виды, свойства, параметры?
11. Что такое хостинг, доменные имена, FTP-клиент?
Лабораторная работа № 2
HTML5
Цель работы: создать четыре web страницы на HTML 5, изучить теги HTML5 и их атрибуты, изучить свойства, параметры и возможности форм и мультимедийных элементов.
Задание 1
Задания выполняются по выбранной теме. Создайте web страницу на html5, используя теги:
· <header>
· <hgroup>
· <footer>
· <nav>
· <aside>
· <figure> и <figcaption>
· <time>
· <article> и <section>)
Задание 2
Создайте web страницу на html5, содержащую форму, в которой расположены
элементы:
· label · input type="text"· input type="tel"· input type="email"· input type="url"· input type="number"· input type="range"· input type="date"· input type="time"· input type="color"· input name="search"· datalist и атрибуты:Placeholder
Autofocus
Min и max
List
Required
Type
Pattern
Задание 3
Создайте web страницу на html5, содержащую мультимедийные теги <video> и <audio>. Видео и аудио должно работать.
Задание 4
Создайте web страницу на html5 и разместите на ней динамическую флэш анимацию, используя тег <canvas>.
Контрольные вопросы
1. Что такое HTML5?
2. Достоинства и недостатки html5?
3. Дайте определение тегам:
<header> <hgroup> <footer> <nav> <aside> <figure> и <figcaption> <time> <article> и <section>)
4. Дайте определение элементам:
label input type="text"input type="tel"input type="email"input type="url"input type="number"input type="range"input type="date"input type="time"input type="color"input name="search"datalist5. Для чего используются атрибуты? placeholderAutofocus
Min и max
List
requiredType
Pattern
Лабораторная работа № 3
ОСНОВЫ CSS
Цель работы: создать файл с таблицей стилей, изучить основные селекторы таблиц стилей.
Задание 1
Задания выполняются по выбранной теме из 1-ой лабораторной работы. Создайте файл таблицы стилей.
Задание 2
Подключите к странице html, созданной в 1 л.р. таблицу стилей.
Задание 3
Добавьте в таблицу стилей следующие селекторы:
· идентификаторы;
· классы;
· контекстные селекторы;
· соседние селекторы;
· дочерние селекторы;
· селекторы атрибутов;
· простой селектор атрибута;
· атрибут со значением;
· значение атрибута начинается с определенного текста;
· значение атрибута оканчивается определенным текстом;
· значение атрибута содержит указанный текст;
· одно из нескольких значений атрибута;
· дефис в значении атрибута;
· группирование;
· наследование;
· псевдоклассы;
· псевдоэлементы;
Контрольные вопросы
1. Что такое CSS?
2. Какое отличие CSS от стандартных свойств HTML документа?
3. Какие существуют способы подключения стилей?
4. Для чего применяются:
· идентификаторы;
· классы;
· контекстные селекторы;
· соседние селекторы;
· дочерние селекторы;
· селекторы атрибутов;
· простой селектор атрибута;
· атрибут со значением;
· значение атрибута начинается с определенного текста;
· значение атрибута оканчивается определенным текстом;
· значение атрибута содержит указанный текст;
· одно из нескольких значений атрибута;
· дефис в значении атрибута;
· группирование;
· наследование;
· псевдоклассы;
· псевдоэлементы?
Лабораторная работа № 4
КОНТЕЙНЕРНЫЙ WEB-ДИЗАЙН