ЛАБОРАТОРНЫЙ ПРАКТИКУМ ПО HTML
Л/р №1: Структура HTML документа. Дескрипторы.
Л/р №2: Форматирование текста. Графика в HTML.
Л/р №3: Списки и таблицы.
Л/р №4: Гиперсвязи и фреймы.
Л/р №5: Технология CSS.
Зачетная лабораторная работа.
СПРАВОЧНАЯ ИНФОРМАЦИЯ
Копирование текста
Таблица цветов
Словарь HTML
Свойства CSS
РЕКОМЕНДУЕМЫЕ РЕСУРСЫ
Справочник по HTML и CSS. Для тех, кто делает сайты
PHP: Простой учебник - Manual
Профессиональные бесплат-ные шаблоны HTML и CSS
Яндекс.Вебмастер - проверка орфографии сайта
Адвего - проверка орфографии сайта
Поиск для сайта Яндекс
Поиск для сайта Google
Яндекс: «Поделиться» в соцсетях
Плагины JavaScript jQuery UI
Слайд-плагин Highslide JS/jQuery
Слайд-плагин Fancybox JS/jQuery
Слайд-плагин Lightbox JS/jQuery
"Кремлёвская" JS-утилита Masha
JS/jQuery утилита Flot для построения графиков
Л/р №4 Гиперсвязи и фреймы
Гиперсвязи
Для описания гиперсвязей в HTML используется парный дескриптор <A>...</A> (аббревиатура английского слова anchor - якорь). Текст заключенный в в дескрипторы отображается, как правило, голубым цветом, его можно изменить, но об этом немного позже. Пока посмотрим как работает дескриптор <A>. В нашем примере оформим гиперссылку как отдельный абзац. По гиперссылке мы переходим к файлу, который указывается в атрибуте HREF дескриптора <A>. Создададим файлы index.html и hplink.html и сввяжем их гиперссылкой.
Запустив файл index.html увидим:
Щелкнув по гиперссылке, получим:
Задание 1
По результатом лабораторной работы №2 у Вас есть файл с рефератами referat.html, а по результатам лабораторной работы №3 файлы proverbs.html и murphy.html с английскими пословицами и законами Мерфи. Создайте индексный файл с гиперссылками на эти файлы. Вы можете скопировать эти файлы в каталог лабораторной работы №4 или указать путь к ним по правилам Unix.
Фреймы
Окно браузера может быть разбито на произвольное число независимых подокон, в каждом из которых могут отображаться разные HTML странички. Такие подокна называются фреймами. Разбиение окна браузера на фреймы осуществляется парным дескиптором <FRAMESET>...</FRAMESET>. Каждый созданный фрейм посредством этого же дескриптора может быть, в свою очередь, также разделен на фреймы. Деление окна браузера на фреймы не является телом HTML документа, поэтому дескриптор <BODY>...</BODY> не используется.
Дескриптор <FRAMESET> имеет два атрибута COLS и ROWS. Они позволяют разделять окно на вертикальные полосы (COLS - колонки) либо горизонтальные полосы (ROWS - строки). Размер полосы указывается либо в процентах от вертикального (горизонтального) размера разделяемой области, либо в экранных пикселях. После разделения на фреймы, каждый фрейм должен быть определен одиночным дескриптором <FRAME>, либо снова разделен на фреймы. Каждому значению COLS либо ROWS в порядке их следования должен однозначно соответствовать либо <FRAME> либо новый <FRAMESET>.
Пример 1
Пример 2
Показ HTML страниц во фреймах
Для показа во фрейме HTML При описании фрейма дескриптором <FRAME> нужно указать атрибут SRC, задающий имя файла, который будет открыт во фрейме и атрибут NAME, определяющий имя фрейма, под этимм именем фрейм будет известен в пределах создаваемого Web-сайта. Имя фрейма обеспечивает возможность кликать по гиперссылкам в одном фрейме, а просматривать файлы, открывающиеся по ссылкам, в другом фрейме, это прекрасная возможность создавать системы меню для сайтов.
Создадим три коротенькие HTML странички: title.html, с текстом "Заголовок"; menu.html, с текстом "Меню" и main.html, с текстом "Информация". Модифицируем файл index.html следующим образом:
Организация меню сайта
Добавим в наш проект два HTML файла из предыдущих лабораторных работ:
vasya.html
и dosye.html
Сделаем так, чтобы их можно было выбирать во фрейме "Меню" и выбранный файл отображался во фрейме "Информация". Для этого используются уже рассмотренные нами гиперссылки с атрибутом TARGET. Список гиперссылок мы сформируем в файле menu.html, который открывается во фрейме menu, а в гиперссылках укажем для файлов vasya.html и dosye.html TARGET="info", тогда эти файлы, будучи выбранными по гиперссылке откроются во фрейме c именем info.
Запустив индексный файл получим:
Атрибуты дескриптора <FRAME>
Мы рассмотрели два атрибута дескриптора <FRAME> - атрибут NAME, определяющий имя фрейма и атрибут SRC, указывающий имя файла, открывающегося во фрейме, рассмотрим еще несколько атрибутов:
- Атрибут FRAMEBORDER - позволяет отобразить или скрыть границу фрейма, для скрытия границы между двумя фреймами нужно скрыть границу в каждом из них. Если атрибут не указан, граница отображается.
- FRAMEBORDER=0 скрывает границу (Internet Explorer отображает тонкую границу);
- FRAMEBORDER=1 отображает границу.
- Атрибут NORESIZE - исключает возможность изменения размеров фрейма мышью, если атрибут не указан, такая возможность есть;
- Атрибут SCROLING - отображает или заперщает отображение полос прокрутки. Если информация не умещается во фрейме, то на правой и нижней границе фрейма могут появлятся полосы прокрутки.
- SCROLING=AUTO (используется по умолчанию) - если информация помещается во фрейме полосы прокрутки не отображаются, если не умещается - отображаются;
- SCROLING=YES - полосы прокрутки всегда отображаются;
- SCROLING=NO - полосы прокрутки не отображаются;
Задание 2
Создайте сайт по образцу: