- •Лабораторная работа №1. «Основные понятия html»
- •Основные понятия html Что такое Интернет?
- •Зачем нужен язык разметки?
- •Об истории html
- •Браузеры
- •Html-файлы
- •Редакторы html-файлов
- •Коротко о главном
- •Лабораторная работа №2. «Общая структура html-документа»
- •Общая структура html-документа
- •Структурные теги
- •Элементы форматирования на уровне блоков
- •Коротко о главном
- •Лабораторная работа №3. «Оформление текста в html-документе»
- •Формирование абзацев и заголовков, работа со шрифтами Абзацы
- •Заголовки
- •Горизонтальные линии
- •Бегущая строка
- •Работа со шрифтами
- •Создание списков
- •Коротко о главном
- •Лабораторная работа №4. «Структура html-приложения. Гиперссылки»
- •Структура html-приложения. Гиперссылки Структура html-приложения
- •Создание гиперссылок
- •Коротко о главном
- •Лабораторная работа №5. «Графика и мультимедиа в html-документе»
- •Вставка графики и мультимедиа Вставка изображений
- •Вставка звука и видео
- •Коротко о главном
- •Лабораторная работа №6. «Таблицы в html-документе»
- •Создание таблиц
- •Пример создания простой таблицы
- •Пример создания таблицы с названиями столбцов
- •Создание сложных таблиц
- •Пример фрагмента html-документа для создания таблицы с различной шириной строк и столбцов
- •Оформление таблиц
- •Коротко о главном
- •Лабораторная работа №7. «Формы в html-документе»
- •Формы в html-документе Создание форм
- •Коротко о главном
- •Лабораторная работа №8. «Фреймы в html-документе»
- •Фреймы в html-документе Создание фреймов
- •Создание «плавающих» фреймов
- •Создание гиперссылок с учетом фреймов
- •Коротко о главном
- •Практическая работа. «Основы веб-конструирования»
Коротко о главном
Фреймы – механизм представления информации на веб-страницах, разделение их на несколько областей, в каждой из которых отображается содержимое отдельной страницы.
<FRAMESET> … </FRAMESET> – теги для создания фреймовой структуры.
<FRAME> – тег для определения фрейма и его свойств.
<IFRAME> … </IFRAME> – создание плавающего фрейма.
Атрибут target тега-контейнера <А> задает имя фрейма, в котором нужно открыть вызванный по гиперссылке HTML-документ.
Задание 8.3.
Создайте два HTML-документа. Сохраните их как файлы a.html и B.html. Эти страницы будут отличаться названиями и цветом фона.
-
Файл a.html
Файл B.html
<html>
<head>
<Тitle>Синий цвет</Тitle>
</head>
<BODY bgcolor="blue" text="yellow">
<Н1>Страничка a</H1>
</BODY>
</html>
<html>
<head>
<Тitle>Желтый цвет</Тitle>
</head>
<BODY bgcolor="yellow" text="blue">
<Н1>Страничка B</H1>
</BODY>
</html>
Создайте базовую страницу, на которой будут отображаться фреймы, и сохраните ее в файле с именем baza.html
<HTML>
<HEAD>
<Тitle>Фреймы</Тitle>
</HEAD>
<FRAMESET cols="50%, 50%">
<FRAME src="A.html">
<FRAME src="B.html">
</FRAMESET>
</HTML>
Просмотрите, что получилось.
Задание 8.4.
Создайте в своей папке папку Фреймы. Скопируйте в нее файлы с рисунками компьютерной мыши, монитора, клавиатуры, компьютера. Создайте четыре HTML-документа. Сохраните их как файлы Processor.html, Mouse.html, Monitor.html, Keyboard.html. Эти страницы будут отличаться названиями, цветом фона и картинкой. Они будут отображаться в плавающем фрейме при щелчке по соответствующей гиперссылке.
Создайте HTML-документ Computers.html по следующему образцу:
<HTML>
<HEAD> <ТIТLЕ>Компьютеры</ТIТLЕ> </HEAD>
<BODY>
<Н1 align="center">Компьютеры</H1>
<HR>
<IFRAME src="Monitor.html" width="200" height="200" align="right" name="a"> </IFRAME>
<UL>Компьютер состоит из четырех основных частей:
<LI><A href="Processor.html" target="а">Главная из них – процессор</А>
<LI><A href="Monitor.html" target="a">Монитор</A>
<LI><A href="Keyboard.html" target="a">Клавиатура</A>
<LI><A href = "Mouse.html" target = "a">Мышь</A>
</UL>
<IMG src="computer.gif" widht="150" heigh="150">
</BODY>
</HTML>
Просмотрите, что получилось.
Практическая работа. «Основы веб-конструирования»
Задание. Создайте фрагмент сайта, содержащий как минимум три страницы, содержащие текст, графические изображения, таблицы и гиперссылки, посвящённый одной из тем школьного курса какого-либо школьного предмета.