- •Лабораторный практикум
- •Лабораторная работа №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. Мультипликация.
- •Запуск мультипликации
- •Запуск и остановка мультипликации
Изображения в html-документе
Встроить изображение в HTML-документ достаточно просто. Для этого нужно только иметь изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg).
Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:
<IMG SRC="picture.gif">
Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]", например:
<IMG SRC="picture.gif" ALT="Картинка">
Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).
Файл, содержащий изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя.
Пример
<HTML>
<HEAD>
<TITLE>Пример 8</TITLE>
</HEAD>
<BODY>
<H1>Изображения </H1>
<P>Изображение можно встроить очень просто: </P>
<P><IMG SRC="picture.gif"></P>
<P>Кроме того, изображение можно сделать "горячим",
то есть осуществлять переход при нажатии на
изображение:</P>
<P><A HREF="./"><IMG SRC="picture.gif">
</A></P>
</BODY>
</HTML>
Обратите внимание на вторую часть примера. Если ссылка на изображение находится между метками <A HREF="..."> и </A>, изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке
Задание 1.
Выполните страницу, текст которой будет организован с помощью списков сразу трех видов. Сохраните ее в своей папке.
Задание2.
Создайте словарь терминов.
Чтобы поместить на страничке словарь терминов, следует использовать тег <dt>. В этом случае текст располагается без отступа от левого поля странички.
Создайте в вашей папке файл следующего содержания.
<HTML>
<HEAD>
<TITLE> Термины </TITLE>
</HEAD>
<BODY>
<dl>
<dt> Web server
<dd>Web-сервер. Сервер, хранящий и пересылающий HTML-документы и другие информационные ресурсы Интернет с использованием протокола HTTP. Его называют так жеHTTP-сервером. </P>
<dt> HOME PAGE
<dd> «Домашняя страница». Головная, начальная страница, локальный архив. Первая страница какого-либо Web-сервера или логически связанной группы HTML документов.</P>
</dl>
</BODY>
</HTML>
Откройте и посмотрите получившуюся страницу. Попробуйте продолжить этот пример.
Задание 3
Создайте свой собственный HTML-документ, в котором должны присутствовать:
Название странички.
Заголовки нескольких уровней, выровненные по центру, левому или правому полю.
Параграфы с текстом.
Фрагменты выделенного текста (с помощью полужирного шрифта, курсива, размера шрифта, горизонтальной линии).
Списки.
Сохраните этот файл в вашей папке под именем index.htm и просмотрите его с помощью браузера.
Задание 4
Добавьте в созданный HTML-документ гиперссылки для осуществления:
переходов внутри текста,
загрузки файлов,
загрузки интернет-страниц.
Задание 5
Разместить на Web-странице несколько фрагментов текста и несколько изображений, располагая их последовательно или мозаикой
Ввести фрагмент HTML и посмотреть на экране вид таблицы:
<table order>
<tr align = center>
<th colspan = 3> Это таблица </th>
</tr>
<tr allign = center>
<th> Это </th>
<th> ячейки </th>
<th> для </th>
</tr>
<tr allign = center>
<th> данных </th>
<th> в </th>
Задание 6
Создать статическую Web–страницу по заданной тематике, полученной у преподавателя, разместив на ней все изученные элементы, в том числе все виды списков. Перед каждым новым элементом вставить необходимые пояснения. Проверить работу электронной почты и все виды гиперссылок.
Оформить отчет. В отчет должны войти коды и скриншоты по каждому пункту задания.
Контрольные вопросы.
Что такое тег?
Что такое исходный код?
Какой символ обозначает начало тега? Какой символ обозначает конец тега?
Что такое парные теги? Приведите пример.
Из каких частей состоит HTML документ?
Как выделяется заголовок документа?
Как выделяется тело документа?
Какие теги позволяет создать параграф (новый абзац)?
Какие теги позволяют создавать маркированные и нумерованные списки?
Материалы для лабораторной работы взяты со страниц http://www.seoded.ru/beginner/soderg.html
http://i-vd.org.ru/books/html-begin/chapter1.shtml
и некоторых других, адреса которых вспомнить уже невозможно.