Лабораторная работа №3 Создание html-документа. Вставка музыки и видео.
Цели работы: Научиться создавать файлы, содержащие элементы форматирования, предписанные языком HTML.
Ход работы:
Создаём документ с именем index.html и вставляем туда основную часть документа, которая состоит из тегов <html></html>, <head></head>, <body></body>
В теге <head></head> задаём заголовок страницы и конструкцию использования каскадных таблиц, которые мы расположим в документе main.css.
2. <div></div> используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать - перемещать, включать/выключать, создавать слои, регулировать отступы и т.п.
Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф.
Рис.1 «Элемент div»
На рисунке видно, что ссылка на картинку расположены в <div> по центру.
3. Текст заключаем в параграф <p></p>. Для пробелов используем специальный символ « ». Для перехода на другую строку необходимо ставить в том месте <br>. Также для использования css для разных элементов документа нужно задавать им имена, например см. Рис.2. Здесь имя задаётся в конструкции id=”имя”, заключённой в скобках элемента <>.
Рис.2 «Имя элемента»
4. Для вставки изображения пишем <img src="адрес/имя.расширение">.
Если же требуется, чтобы при нажатии картинка открывалась отдельно в новом окне, то мы используем следующую выделенную конструкцию (Рис.3).
Рис.3 «Ссылка на картинку»
5. Чтобы вставить в документ звуковой файл мы используем схожую конструкцию (Рис.4)
Рис.4 «Ссылка на звуковой файл»
При нажатии на эту ссылку в новом окне откроется проигрыватель и автоматически запустится звук.
6. Для создания видеоплеера был использован Macromedia Flash 8, после сохранения видео в режиме работы в Интернете копируем код полученного объекта в свой документ (рис.5)
Рис.5 «Вставка видеоплеера»
7. Когда сайт состоит из нескольких страниц, некоторым пользователям удобно под рукой иметь кнопку «Назад». Для её вставки создаём ещё одно тело документа и вставляем в него ссылку на страницу, к которой нужно вернуться <body><a href="index.html">Назад...</a></body>.
8. Для данной страницы был использован полупрозрачный фон, который задавался в каскадных таблицах при помощи background-color (рис.6).
Рис.5 «Параметры тега div с именем div1»
На рисунке видно, что прозрачность фона div1 равна 0,8.
Готовая
страница
Рис.6 «Вид страницы»
Рис.7 «Вставленное видео»
Лабораторная работа №4 Использование фреймов при создании Web-страниц.
Цели работы: изучить разделы html по работе с фреймами.
Ход работы:
1. Создаём документ с именем index.html и вставляем туда основную часть документа
<html> <head> <title> </title> </head>
<frameset></frameset> </html>
Заметим, что фрейм-документ не содержит тэга body.
2. В теге <head></head> задаём заголовок страницы и конструкцию использования каскадных таблиц, которые мы расположим в документе main.css.
3. Для данного документа мы зададим следующее расположение фреймов:
Разбиваем окно на два ряда и второй ряд – на две колонки:
<html> <head> <title>Заголовок</title> </head> <frameset rows="100,*"> <frame src="logo.html"> <frameset cols="150,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </frameset> </html>
Можно настроить полосы прокрутки. Scrolling - атрибут тэга <frame>. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна.
Scrolling="auto", можно не прописывать, т.к. если атрибут scrolling не задан, то полоса прокрутки появится, если она нужна, а если нет - ее не будет.
При помощи атрибута noresize для тэга <frame> можно запретить изменять размеры фрейма.
Также можно избавиться от рамок между фреймами. Для этого мы используем параметр border, то есть border="0.
Параметр name задает уникальное имя для фрейма (в нашем случае для того, который содержит документ content.html).
Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута тэга <a> target (target="имя_фрейма"). Введем атрибут target в документе со ссылками - menu.html
Рис.1 «Код index.html»
Теги <div></div> используется для логического выделения блока HTML-документа. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать - перемещать, включать/выключать, создавать слои, регулировать отступы и т.п.
Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф.
Рис.2 «Элемент div»
На рисунке видно, что ссылка на картинку расположены в <div> по центру.
Текст заключаем в параграф <p></p>. Для пробелов используем специальный символ « ». Для перехода на другую строку необходимо ставить в том месте <br>. Также для использования css для разных элементов документа нужно задавать им имена, например см. Рис.3. Здесь имя задаётся в конструкции id=”имя”, заключённой в скобках элемента <>.
Рис.3 «Имя элемента»
Для вставки изображения пишем
<img src="адрес/имя.расширение">.
Если же требуется, чтобы при нажатии картинка открывалась отдельно в новом окне, то мы используем следующую выделенную конструкцию (Рис.4).
Рис.4 «Ссылка на картинку»
Для данной страницы был использован полупрозрачный фон, который задавался в каскадных таблицах при помощи background-color , отступ текста от левого и правого края на 10 пикселов (рис.5).
Рис.5 «Параметры тега div с именем div1»
На рисунке видно, что прозрачность фона div1 равна 0,75.
Рис.6 «Вид главной страницы»