Создание веб-сайтов
Практическая работа № 25.
Текстовые веб-страницы
1. 
Скопируйте на свой компьютер файл dogs.htm. Посмотрите, как будет выглядеть этот документ в браузере.
2. Добавьте тэги, необходимые для правильного HTML-документа. В заголовке страницы напишите название документа и фамилию автора, например:
Собаки: работа Василия Пупкина
3. Выделите стилями <h1> и <h2> заголовок документа и заголовки разделов. Перед номером раздела добавьте знак § (после этого знака ставится неразрывный пробел).
4. Оформите стихотворение, используя команду перехода на новую строку <br>. Перед фамилией автора поставьте знак ©.
5. Выделите абзацы текста с помощью тэга <p>, установите выравнивание по ширине.
6. Замените знаки «минус» на тире, между тире и предыдущим словом поставьте неразрывный пробел.
7. Замените верхние кавычки на «ёлочки».
8. Поставьте неразрывные пробелы между числом и единицей измерения, например, 25 кг.
9. В начале последней строки поставьте знак ©:
© Википедия, 2017
Практическая работа № 26.
Списки
- Скопируйте на свой компьютер файл lists.htm. Посмотрите, как выглядит эта веб-страница в браузере.
2. Оформите веб-страницу про устройство компьютера с помощью маркированных и нумерованных списков:
а) Добавьте заголовок документа «Устройство компьютера».
б) Добавьте заголовки разделов «Системный блок» и «Внешние устройства».
в) Оформите состав системного блока как нумерованный список.
г) Оформите перечень внешних устройств как многоуровневый маркированный список (первый уровень – группа устройств, второй – перечень устройств этой группы).
д) Исправьте фактические ошибки, которые допущены при наборе.
Пример оформления работы приведен ниже на этой странице.
Практическая работа № 27.
Гиперссылки
1. Скопируйте на свой компьютер файл anchor.htm. Посмотрите, как выглядит файл в браузере.
2. Добавьте заголовок страницы (TITLE), укажите там название документа и фамилию автора, например:
Песни из мультфильмов: работа Василия Пупкина
3. Найдите и выделите нужным стилем заголовок документа.
4. Замените верхние кавычки на «ёлочки».
5. Найдите в Интернете тексты указанных песен и сделайте ссылки на эти страницы в элементах списка.
6. Сделайте ссылку на указанный в тексте архив так, чтобы его можно было скачать по этой ссылке. Текст должен быть примерно такой:
Вот ещё один сборник песен.
7. Сделайте названия поисковых систем Google и Яндекс ссылками на их главные страницы. При щелчке по этим ссылкам должны сразу появляться результаты поиска по запросу «песни из мультфильмов».
8. Сделайте активной ссылку на адрес электронной почты в конце документа (при щелчке по ней должна запускаться почтовая программа).
Практическая работа № 28-а
Оформление текста
1. Скопируйте на свой компьютер файл text.htm. Посмотрите, как выглядит страница в браузере.
2. Добавьте заголовок страницы (TITLE), укажите там название документа и фамилию автора, например:
Примеры оформления текста: работа Василия Пупкина
3. Найдите и выделите соответствующими тэгами заголовок документа и заголовки разделов.
4. Разбейте текст на абзацы.
5. Замените верхние кавычки на «ёлочки».
6. Замените везде знаки «минус» на тире, сделайте так, чтобы тире не отрывались от предыдущих слов.
7. Выделите слова «сервер» и «клиент» в первом абзаце с помощью тэга EM.
8. В следующих двух абзацах выделите определяемые слова («сервер» и «клиент») с помощью тэга DFN, а английские слова – с помощью тэга EM.
9. Оформите математические и химические формулы, используя верхние и нижние индексы. Формула должна занимать отдельную строку и быть выровнена по центру. Точку или запятую, которая следует за формулой, нельзя отрывать от формулы. Исправьте фактические ошибки в формулах, допущенные при наборе.
10. Выделите имена переменных в тексте с помощью тэга EM.
11. Оформите программу на языке Паскаль так, чтобы сохранилось все форматирование.
Практическая работа № 28.
Использование СSS. Часть 1
1. 
Откройте text.htm, полученный в результате предыдущей работы.
2. Создайте в той же папке стилевой файл
mystyle.css, подключите его к веб-странице и определите стили оформления, перечисленные в следующих пунктах. Для получения дополнительной справочной информации по CSS используйте Интернет, например, сайт css.manual.ru.
3. Задайте свои цвета фона и текста. Текст должен хорошо читаться на выбранном фоне.
4. Определите цвет заголовков (H1, H2), отличающийся от цвета основного текста. Заголовки H2 должны также выделяться фоном, причем фон должен быть темный, а буквы – светлые. Можно добавить внутренний отступ (padding) в 5 пикселей.
5. Определите класс formula, применимый как к абзацам (P), так и к отдельным словам (SPAN), и задайте для него выравнивание по центру; жирный шрифт; курсив. Используя этот класс, выделите абзацы с формулами и имена переменных в тексте.
6. Определите класс definition, применимый только к абзацам (P), и задайте для него: рамку толщиной в 1 пиксель; внутренний отступ в 10 пикселей.
Используя этот класс, выделите два абзаца с определениями.
Практическая работа № 28-2
Использование CSS. Часть 2
1. Скопируйте на свой компьютер каталог CSS. Откройте файл cats.htm. Все последующие задания нужно выполнять с помощью CSS.
2. Установите для тела страницы бледно-розовый фон (цвет #FFEEEE) и шрифт Georgia, а если его нет – любой шрифт с засечками (serif).
3. Для заголовков H1 и H2 определите шрифт Arial, если его нет – Helvetica, а если нет их обоих, то любой рубленый шрифт (sans-serif).
4. Для заголовка H1 задайте фоновый рисунок cat.png из подкаталога images (без повторения).
5. Для заголовков H2 определите темно-красный цвет (#800000).
6. Создайте класс оформления latin для выделения слов и выражений на латинском языке: курсив, тёмно-красный цвет. Выделите в тексте все латинские слова с помощью этого стиля.
7. Установите для всех абзацев отступ (красную строку) 30 пикселей.
8. Создайте новый стиль оформления абзацев – author: курсивный шрифт, без абзацного отступа. Выделите этим стилем имена и фамилии авторов цитат.
9. Создайте стиль оформления абзацев с цитатами с именем quote:
а) фон – светло-жёлтый (#FEFEE2);
б) абзацного отступа нет;
в) ширина 50% от ширины окна браузера;
г) внешние отступы: сверху – 0, справа и слева по 30 пикселей, снизу – 10 пикселей;
д) рамка шириной 1 пиксель, точечная (dotted), черного цвета;
е) внутренние отступы 10 пикселей.
10. Найдите в Интернете информацию про авторов цитат и сделайте их имена ссылками на соответствующие страницы.
11. Установите для ссылок, которые находятся внутри абзаца стиля author, красный цвет при наведении мыши.
Практическая работа № 29.
Вставка рисунков в документ
1. Скопируйте на свой компьютер каталог IMG. Откройте файл img.htm в редакторе.
Ваша задача – оформить веб-страницу про некоторые направления в музыке XX века. Для оформления нужно использовать рисунки из подкаталога images.
2. Добавьте заголовок страницы (TITLE), укажите там название документа и фамилию автора, например:
Веб-страница с рисунками: работа Василия Пупкина
3. Найдите и выделите соответствующими тэгами заголовок документа и заголовки разделов.
4. Разбейте текст на абзацы.
5. Замените верхние кавычки на «ёлочки».
6. Замените везде знаки «минус» на тире, сделайте так, чтобы тире не отрывались от предыдущих слов.
7. Создайте стилевой файл mystyle.css и подключите его к веб-странице. С помощью стилевого файла:
а) Установите в качестве фона страницы рисунок back.jpg;
б) Выберите соответствующий цвет текста.
в) Создайте класс name, определите для него жирный шрифт, курсив и свой цвет, и выделите имена и фамилии, названия ансамблей, фильмов, песен (тэг SPAN).
8. Добавьте на страницу рисунки, расположенные в подкаталоге images.
9. Установите для рисунков выравнивание (с обтеканием текстом) и всплывающие подсказки. Рисунки лучше ставить в шахматном порядке (один налево, следующий – направо и т.д.)
10. С помощью стилевого файла установите для рисунков внешний отступ
(margin) 10 пикселей.
Практическая работа № 30.
Вставка звука и видео в документ
1. Скопируйте на свой компьютер каталог MEDIA. Откройте файл media.htm в редакторе. Ваша задача – научиться добавлять на веб-страницу звуковые файлы, флэш-анимацию и видеоролики. Для этого нужно использовать мультимедийные данные из подкаталогов audio, flash и video. Места вставки медиафайлов вы легко определите из текста файла media.htm.
2. Добавьте на веб-страницу звуковой файл hcopter.wav из каталога audio (шум вертолёта). Используйте тэг embed, отключите автозапуск проигрывания, установите ширину проигрывателя 300 пикселей и высоту 20 пикселей.
3. Добавьте на веб-страницу звуковой файл nature.mp3 из каталога audio (звуки природы). Используйте тэг embed, укажите те же атрибуты, что и в предыдущем случае.
4. Добавьте на веб-страницу звуковой файл nature.ogg из каталога audio (звуки природы). Используйте тэг audio, укажите его атрибуты:
src="адрес файла" ссылка на файл-источник
controls="controls" показывать элементы управления
width="300" ширина проигрывателя в пикселях
height="20" высота проигрывателя в пикселях
Откройте веб-страницу в браузере и выясните, поддерживает ли ваш браузер тэг audio.
Ответ:
5. С помощью тэге embed добавьте на страницу флэш-ролик cube.swf (вращающийся кубик) из каталога flash. Установите размеры 257 на 200 пикселей.
6. С помощью тэге embed добавьте на страницу флэш-ролик lightbot.swf (игра Lightbot) из каталога flash. Установите размеры 640 на 480 пикселей. Откройте веб-страницу в браузере и посмотрите, как работает флэш-анимация.
7. Зайдите на сервис youtube.com, с помощью поиска по сайту найдите ролик по теме «HTML5» и вставьте на веб-страницу. Для этого нужно щелкнуть по кнопке Поделиться под роликом, затем – по строчке HTML-код. После этого остается просто скопировать код, появившийся в текстовом окне, на веб-страницу.
8. С помощью тэга video добавьте на страницу видеофайл finish.mp4 из каталога video следующим образом:
<video width="ширина" height="высота" controls="controls">
<source src=" адрес файла "
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
Установите размеры окна 320 на 240 пикселей.
9. С помощью тэга video добавьте видеофайл finish.webm из каталога video следующим образом:
<video width="ширина" height="высота" controls="controls">
<source src=" адрес файла "
type='video/webm; codecs="vp8, vorbis"'>
</video>
Установите размеры окна 320 на 240 пикселей.
10. Обновите страницу в браузере и выясните, поддерживает ли ваш браузер тэг video, и с какими форматами он умеет работать.
Ответ:
Практическая работа № 31.
Табличная вёрстка
1. Скопируйте на свой компьютер каталог TABLE. Откройте файл table.htm в редакторе. Ваша задача – оформить веб-страницу так, как показано на образце (см. ниже на этой странице). Для этого нужно использовать рисунки из подкаталога images и стилевой файл.
2. Добавьте заголовок страницы (title), укажите название документа и фамилию автора, например:
Таблицы: работа Василия Пупкина.
3. С помощью стилевого файла установите для всех таблиц вертикальный отступ (margin) 10 пикселей.
4. Присвойте первой таблице класс sport для того, чтобы можно было управлять оформлением её ячеек независимо от других таблиц.
5. Введите класс left для ячеек первой таблицы (селектор table.sport td.left), установите для них выравнивание по левой границе. Для остальных ячеек таблицы (селектор table.sport td) установите (с помощью стилевого файла) выравнивание по центру. Ячейки, содержащие заголовки и места, занятые командами, оформите с помощью тэга th.
6. Для всех ячеек первой таблицы установите внутренний отступ 2 пикселя по вертикали и 5 пикселей по горизонтали.
7. Для второй таблицы используйте три класса ячеек:
header фоновый рисунок back.jpg из каталога images;, белый цвет символов, шрифт без засечек (sans-serif), жирный, выравнивание по центру
picture выравнивание по центру, фоновый рисунок paper.jpg из каталога images; внутренний отступ (padding) 10 пикселей, ширина ячейки (width) 120 пикселей
note шрифт Arial, Helvetica или любой шрифт без засечек (sans-serif), цвет символов #800000, выравнивание по центру, внутренний отступ (padding) 5 пикселей сверху и снизу, и 10 пикселей по бокам, шрифт без засечек
8. Замените верхние кавычки на «ёлочки».
9. Выделите латинские слова и их перевод с помощью тэга em.
10. Рекламный блок в третьей таблице расположен в отдельной ячейке, которой присвоен класс ad: рамка цвета #CCCCCC толщиной 1 пиксель, фоновый цвет rgb(230,230,255), выравнивание по центру. Текст должен быть ссылкой на веб-страницу в Интернете с рецептом салата «Цезарь».
Блочная вёрстка
В этой работе вы освоите трёхколоночную верстку без использования таблиц.
1. Скопируйте на свой компьютер каталог DIV. Откройте файл baikal.htm в редакторе. Ваша задача – оформить веб-страницу так, как показано на образце (см. на следующей странице). Для этого нужно использовать рисунки из подкаталога images и стилевой файл.
2. Добавьте заголовок страницы (TITLE), укажите название документа и фамилию автора, например:
Блочная вёрстка: работа Василия Пупкина.
3. Создайте стилевой файл baikal.css и подключите его к веб-странице. Установите для всех элементов страницы (они обозначаются знаком *) нулевые внутренние и внешние отступы:
* {
margin:0px;
padding:0px;
}
4. Добавьте в блок с идентификатором header заголовок документа «Озеро Байкал». В стилевом файле установите для этого блока высоту 80 пикселей и фоновый рисунок header.jpg из каталога images (без повторения). Добавьте для заголовка отступы слева и сверху (как на образце).
5. Добавьте в блок pogoda два скрипта, которые записаны в файле informer.txt. Они выводят на страницу информацию о погоде в двух посёлках на берегу Байкала – в Листвянке и Хужире.
6. Добавьте в блок photo четыре фотографии с именами baikal1.jpg, baikal2.jpg, baikal3.jpg, baikal4.jpg из подкаталога images.
7. Добавьте в блок content текст, записанный в файле text.txt. Оформите абзацы с помощью тэга p. В стилевом файле для тэгов p установите отступы со всех сторон 5 пикселей и абзацный отступ (красную строку) 20 пикселей.
8. В тексте замените, где нужно, знаки «минус» на тире, перед тире поставьте неразрывные пробелы. Поставьте неразрывные пробелы между числами и единицами измерения.
Добавьте в конец текста абзац со словами
По материалам Википедии.
Выровняйте абзац по правой границе и выделите этот текст с помощью тэга em.
Слово «Википедии» должно быть ссылкой на страницу Википедии, посвящённую Байкалу.
9. Добавьте в блок footer текст, содержащий вашу фамилию, имя и класс, например,
Работу выполнил Василий Пупкин, 11А класс
10. Посмотрите, как выглядит страница в браузере. Теперь остается с помощью стилей оформить блоки так, чтобы они заняли правильное место на странице.
11. В стилевом файле для блока pogoda установите ширину 150 пикселей, отступ слева 10 пикселей и обтекание слева (float:left;). Посмотрите, как теперь выглядит страница.
12. В стилевом файле для блока photo установите ширину 220 пикселей, отступ слева 10 пикселей и обтекание справа (float:right;). Посмотрите, как теперь выглядит страница.
13. Теперь сделаем так, чтобы центральная колонка (блок content) не залезала на левую и правую. В стилевом файле для блока content установите отступ слева 150 пикселей и отступ справа 220 пикселей. Посмотрите, как теперь выглядит страница.
14. Остается оформить нижний блок («подвал»). В стилевом файле установите для блока footer цвет фона #CCCCCC, внутренние отступы – сверху 5 пикселей, снизу – 10 пикселей, выравнивание текста по центру. Для того, чтобы этот блок не обтекался другими ни слева, ни справа, добавьте свойство
clear:both;
15. Посмотрите на окончательный результат в браузере:
Практическая работа № 32.
Использование Javascript
1. Скопируйте на свой компьютер каталог SCRIPT. Откройте в редакторе файл valaam.htm и посмотрите, как он выглядит в браузере.
Ваша задача – оформить документ так, как показано на следующей странице. В нем будет один скрытый блок. Для оформления используйте рисунки из каталога images.
2. Добавьте тэги, необходимые для правильного HTML-документа. Добавьте заголовок страницы (TITLE), укажите название документа и фамилию автора, например:
Валаам: работа Василия Пупкина.
3. Выделите заголовок документа стилем H1. Справа от заголовка добавьте рисунок valaam_gray.gif, который будет ссылкой на сайт valaam.ru. При наведении мыши рисунок должен меняться на valaam.gif.
4. Выделите абзацы в тексте с помощью тэга P.
5. Создайте стилевой файл valaam.css и файл для скриптов valaam.js, подключите эти файлы к документу. Все оформление должно быть сделано с помощью CSS, все скрипты «убраны» в файл valaam.js.
6. Замените верхние кавычки на «ёлочки».
7. Замените везде, где нужно, обычные пробелы на неразрывные, и знаки «минус» – на тире; сделайте так, чтобы тире не отрывались от предыдущих слов.
8. Сделайте плавающий блок, содержащий фотографию Валаама и подпись «Фото А. Колыбалова (www.rg.ru) ». Адрес сайта должен быть ссылкой на этот сайт.
Подпись должна быть набрана шрифтом без засечек (sans-serif), курсивом, размер 80% от размера шрифта основного текста, внешних отступов (margin) нет.
9. Оформите скрытый блок, включающий ту часть текста, которой нет на экране в краткой версии (см. оборот). Присвойте этому блоку имя (id), установите следующее оформление: цвет фона #EEEEFF; рамка синяя, сплошная, толщиной 1 пиксель; отступы по бокам 10 пикселей.
10. В нижнюю часть скрытого блока добавьте внутренний плавающий блок, содержащий фотографию резьбы по дереву с подписью ‘ К. Гоголев. «На пристани» (резьба по дереву) ’. Оформление подписи должно быть такое же, как и для первого плавающего блока.
11. Сделайте так, чтобы скрытый блок показывался при щелчке по словам «гениев творчества и науки».
12. В конце скрытого блока должна быть ссылка с текстом «Свернуть», при щелчке по которой блок скрывается.
13. В конце документа добавьте форму с вопросом «Назовите ближайший город, из которого можно приехать на о. Валаам» (правильный ответ – Сортавала). Выделите вопрос с помощью тэга STRONG. Сделайте так, чтобы после щелчка по кнопке Ответить на экран выдавалось сообщение «Правильно » или «Неправильно ».
Полная версия (развернутый вид):
Практическая работа № 33.
Использование XML
1. Скопируйте на свой компьютер в отдельные папки файлы min.docx (документ Microsoft Office 2007) и min.odt (документ OpenOffice.org Writer). Переименуйте файла так, чтобы они имели расширение *.zip, и распакуйте любым архиватором, который поддерживает этот метод сжатия.
Файлы с какими расширениями вы увидели после распаковки архивов? Просмотрите эти файлы в любом текстовом редакторе, изучите их структуру.
Ответ:
2. Скопируйте на свой компьютер файл rect.svg (векторный рисунок в формате SVG) и откройте его в браузере Google Chrome, Mozilla Firefox или Opera. Затем откройте этот файл в любом текстовом редакторе и изучите его структуру.
3. Скопируйте на свой компьютер файл math.htm (веб-страница с формулой в формате MathML) и откройте его в браузере Mozilla Firefox или Opera. Затем откройте этот файл в любом текстовом редакторе и изучите его структуру.
4. Найдите на компьютере файлы конфигурации с расширением.xml. В операционной системе Microsoft Windows используйте для поиска каталог Program Files, а в Linux – каталог /usr. Откройте один из найденных файлов в браузере или в любом текстовом редакторе и изучите его структуру.
База данных в формате XML
1. Скопируйте на свой компьютер файлы europe.xml, europe2.xml и europe.xsl. Первые два файла содержат базу данных по странам Европы (в разных форматах), а с помощью третьего мы будем задавать оформление данных на веб-странице.
Работа может выполняться с помощью браузеров Mozilla Firefox, Opera, Internet Explorer или Google Chrome [1].
2. Откройте файл europe.xml в браузере, используя команду меню Файл – Открыть и изучите его структуру. Кроме того, файл europe.xml можно открыть в любом текстовом редакторе. В первой строке
<?xml version="1.0" encoding="UTF-8"?>
записана используемая версия языка XML и кодировка (здесь – UTF-8). Далее расположены сведения о странах Европы в таком формате:
<СтраныЕвропы>
<Страна>
<Название>Греция</Название>
<Столица>Афины</Столица>
<Население>11</Население>
<Площадь>132</Площадь>
</Страна>
...
</СтраныЕвропы>
Корневой элемент в этом XML-файле называется СтраныЕвропы, в него вложено несколько элементов Страна, каждый из которых имеет вложенные элементы: Название, Столица, Население и Площадь.