- •Лабораторный практикум
- •Лабораторная работа №1 Основы разметки гипертекста html
- •Введение
- •Заголовки
- •Оформление текста
- •Создание списков
- •Гиперссылки
- •Изображения в html-документе
- •Задание 1.
- •Задание2.
- •Задание 3
- •Лабораторная работа №2 Создание таблиц в html-документах
- •Создание таблицы
- •Задание
- •Контрольные вопросы.
- •Лабораторная работа №3 Каскадные таблицы стилей
- •Введение
- •Внутренние таблицы стилей.
- •Встроенные таблицы стилей.
- •Структура правила.
- •Селекторы классов.
- •Универсальные селекторы.
- •Комментарии css.
- •Объединение css и html.
- •Элемент style.
- •Директива @import.
- •Задание 1.
- •Задание 2.
- •Задание 3.
- •Стандартные имена для фреймов
- •Специальные эффекты, получаемые с помощью атрибута target
- •Задание
- •Контрольные вопросы
- •Лабораторная работа №5 Формы
- •Введение
- •Элементы ввода данных
- •Многострочный текст, атрибуты текстовых элементов
- •Альтернативная кнопка, перегрузка атрибутов формы
- •Выбор из списка
- •Генерирование открытого и секретного ключей
- •Другие элементы форм
- •Атрибуты элементов ввода
- •Задание.
- •Контрольные вопросы.
- •Лабораторная работа №6 Объектно Ориентированное Программирование в JavaScript.
- •Основные понятия:
- •Объект.Метод("параметры метода")
- •Значение по умолчанию
- •Применяется к тегам
- •Событие onchange
- •Событие onclick
- •Событие ondblclick
- •Задание №1
- •Размещение JavaScript на html-странице
- •Типы данных
- •Объявления переменных
- •Переменные
- •Типы переменных
- •Массивы
- •Объекты JavaScript
- •Объект Array
- •Оператор цикла
- •Условные операторы
- •Объектная модель JavaScript
- •Объекты и Свойства
- •Функции и Методы
- •Определение Методов
- •Создание Новых Объектов
- •Использование this для Ссылок Объекта
- •Объектная модель браузера
- •Объект window
- •Лабораторная работа № 8 Изучение языка php
- •Общие правила построения php-программы
- •Задание
- •1. Вывод на экран и переменные в рнр.
- •2. Передача параметров по ссылке, передача параметров из формы (get и post -- запросы).
- •3. Динамическое формирование страницы.
- •4. Работа с файлами.
- •Лабораторная работа № 10 Работа вебсайта
- •Как еще можно прописать сайт в Денвере?
- •Лабораторная работа № 11 Файловый ввод/вывод
- •1) Классическая модель веб-приложения
- •2) Модель ajax
- •Лабораторная работа №12 Внедрение рисунков
- •1. Основные положения
- •Рисование прямоугольников
- •Рисование составных фигур Составные фигуры состоят из нескольких соединенных простых объектов (таких как линии, круги и т.Д.)
- •Структура программы выглядит следующим образом
- •С помощью свойства lineCap можно оформлять кончики линии
- •Можно создавать более сложные градиенты, которые изменяют цвет в нескольких точках.
- •Папоротник
- •Гипно-спираль
- •Вставка изображений
- •4. Вложение изображения с помощью data: url
- •Рисование изображений
- •Пример 1 использования изображения
- •Масштабирование
- •Пример 2 использования изображения
- •Разрезание изображений
- •Пример 3 использования изображения
- •Пример галереи
- •Javascript графика: Объект Image.
- •Javascript графика: src и lowsrc.
- •Изменение картинки.
- •Мультипликация в JavaScript. Мультипликация.
- •Запуск мультипликации
- •Запуск и остановка мультипликации
МИНОБРНАУКИ РОССИИ
|
Государственное образовательное учреждение высшего профессионального образования « Московский государственный институт радиотехники, электроники и автоматики (технический университет)» МИРЭА |
Лабораторный практикум
по дисциплине
ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ
Москва 2015
ВВЕДЕНИЕ
Настоящий лабораторный практикум включает в себя 8 лабораторных работ связанных с изучением языков HTML, CSS, JavaScript и PHP. Каждая работа помогает постепенно освоить основные приемы, применяемые при интерактивной работе в WEB.
Каждая работа содержит подробную теоретическую часть с большим количеством примеров. В конце каждой работы приведено несколько заданий, которые должен выполнить каждый студент.
Все работы заканчиваются вопросами для самопроверки полученных знаний.
Отчет по лабораторной работе должен иметь титульный лист с указанием номера и названия работы, фамилии и инициалов студента. Титульный лист оформляется в произвольной форме. Отчет должен содержать:
1. Задание(я).
2. Тексты документов.
3.Результаты подверждающие выполнение задания.
4. Выводы.
Каждая лабораторная работа подлежит защите.
Лабораторная работа №1 Основы разметки гипертекста html
Цель работы:
Изучение основ стандартного языка разметки НТМL для создания статических Web–страниц
Длительность 2 часа
Введение
Документ, написанный на языке HTML, представляет собой текст, в который вписаны теги (markup tags) или теги разметки. Теги помогают программе просмотра разобраться, как должен быть расположен текст на экране, в каком месте будут находиться рисунки, хранящиеся в совсем других файлах, и т.д. С помощью тегов формируются связи с другими web-документами и ресурсами Интернета. Текст с тегами называется исходным кодом (Source). Просмотреть готовый файл, написанный на HTML, можно в программах просмотра, например, Microsoft Internet Explorer. На экране просмотра теги не отображаются.
Теги – определенные последовательности символов, заключенные между знаками (меньше) и (больше). Символ обозначает начало тега, символ обозначает конец тега. Все, что заключено между тегами, является HTML-документом.
Любой HTML-документ состоит их двух частей. Первая часть – заголовок, который находится между тегами HEAD и /HEAD. В нем содержится информация о документе, которая не выводится на экран. Название странички располагается между тегами TITLE и /TITLE и появляется в верхней части окна программы просмотра. Например,
TITLE моя страничка / TITLE
Прописные или строчные буквы, используются в написание тегов, значения не имеет. Компьютер одинаково отреагирует на записи title и TITLE.
Вторая часть – тело, которое выводится на экран программой просмотра – текст, картинки, видеофрагменты и т.д. Оно заключается между тегами BODY и /BODY. Форматирующие теги бывают парными и непарными, открывающими и закрывающими. Область действия парного тега начинается с того места, где стоит открывающий тег, а кончается там, где встречается закрывающий. Признак закрывающего тега – символ /. Почти все форматирующие теги всегда следуют парами, и для открывающего тега должен существовать закрывающий.
Непарных тегов мало, например, чаще всего используются два:
br (Line Break), для перехода на новую строку и
<hr> (Horisontal), для прочерчивания горизонтальной линии.
Задание.
Наберите в Блокноте текст
<html>
<head>
<title> Моя страничка</title>
</head>
<body>
Привет! Это моя личная страничка!
</body>
</html>
Сохраните созданный файл в вашей папке. Для этого выполните Файл\Сохранить как, затем откройте свою папку. В поле Имя файла наберите 1.html, а в поле Тип файла из раскрывающегося списка выберите Все файлы. Нажмите кнопку Сохранить.
Закройте Блокнот. Откройте свою папку. Найдите документ в формате html, он имеет такую же пиктограмму, как и документы из Интернета. Откройте документ и посмотрите результат.
Чтобы разбить текст на параграфы поставьте тег p перед началом параграфа. Когда программа обнаружит этот тег, она сама вставит перед началом параграфа пустую строку.
p текст /p
Каждый элемент документа HTML могут иметь свои свойства Поэтому внутри открывающего тега через пробел записываются так называемые атрибуты в виде атрибут=значение.
Вместе с тегом параграфа можно задать параметры выравнивания (align):
right – по правому краю.
left – по левому краю.
center – по центру.
Тег p align = right обеспечивает выравнивание теста параграфа по правому краю.
Тег p align = left обеспечивает выравнивание теста параграфа по левому краю.
Тег p align = center обеспечивает выравнивание теста параграфа по центру.
Еще один способ выравнивания текста
<right текст /right
<left текст /left
<center текст /center
Для увеличения расстояние текста от левого края или нужна «красная строка», то после тега p поставьте ( ). Например,
<p Текст
В основном тексте не должно быть переносов.