** Общие требования к создаваемым документам **
* наличие обязательных элементов [[:html:tags:html|HTML]], [[:html:tags:body|BODY]] и [[:html:tags:head|HEAD]];
* правильность использования тэгов;
* правильность размещения тэгов относительно друг друга;
* отсутствие неработоспособных тэгов.
====== Задание 1. Форматирование текста ======
Отформатируйте текст по образцу: {{:html:les1.pdf|}}
Для форматирования можно воспользоваться тегами:
[[:html:tags:b|]], [[:html:tags:i|]], [[:html:tags:br|
]], [[:html:tags:p|]], [[:html:tags:font|]], [[:html:tags:hr|
]], [[:html:tags:center|
]]
Жила однажды в далекой деревушке маленькая прелестная девочка. Ее мать и бабушка любили ее без памяти. Бабушка сшила ей красную шапочку, которая была ей так к лицу, что все и стали звать девочку Красной Шапочкой.
Однажды мама напекла целый противень пирогов и говорит дочке:
- Красная Шапочка, бабушка заболела. Не отнесешь ли ты ей пирожков и горшочек свежевзбитого масла?
Красная Шапочка тут же встала и отправилась к бабушке. А бабушка ее жила в другой деревне, за густым, диким лесом.
Проходя через лес, она встретила волка. Волк хотел было ее съесть, но побоялся, поскольку недалеко работали дровосеки. Поэтому он придумал план.
- Куда ты идешь, моя крошка? - спросил волк.
- Повидать свою бабушку, - сказала Красная Шапочка. - У меня есть для нее горшочек свежевзбитого масла и пирожки.
- И далеко тебе идти? - спросил волк.
- Далеко, - ответила Красная Шапочка. - Ее дом довольно далеко отсюда, первый с той стороны леса.
- Я тоже хочу навестить бабушку, - сказал хитрый волк. - Я пойду этой тропинкой, а ты другой. Посмотрим, кто из нас первый доберется туда. Волк бросился бежать изо всех сил по кратчайшей тропинке, а Красная Шапочка пошла по самой длинной дорожке. Она собирала цветы, пела веселые песни, играла с красивыми бабочками. Волк тем временем добежал до бабушкиного дома. Он дважды постучал в дверь.
- Кто там? - спросила Бабушка.
- Это я, Красная Шапочка, - сказал волк голосом девочки. - Я принесла тебе пирожков и горшочек свежевзбитого масла.
Бабушка лежала в постели, потому что болела.
- Открой дверь и войди, - крикнула она.
Волк ворвался в комнату. Он не ел целых три дня и был поэтому очень голоден. Он тотчас проглотил Бабушку. Потом он натянул на себя бабушкин халат, забрался на постель и стал поджидать Красную Шапочку, которая через некоторое время пришла и постучалась в дверь.
- Кто там? - спросил Волк бабушкиным голосом. Его голос был хриплым, но Красная Шапочка подумала, что у Бабушки болит горло.
- Это я, Красная Шапочка, - сказала она. - Я принесла тебе пирожков и горшочек свежевзбитого масла.
- Открой дверь и войди, - сказал волк таким ласковым голосом, насколько мог.
Он натянул одеяло до самых глаз.
- Поставь свою корзинку на стол и подойди ко мне, - сказал волк.
Красная Шапочка подошла поближе. Она сказала:
- Бабушка, какие у вас длинные руки!
- Это чтобы получше обнимать тебя, моя дорогая, - сказал волк.
- Бабушка, какие у вас длинные уши!
- Это чтобы лучше слышать тебя, моя дорогая.
- Бабушка, какие у вас большие глаза!
- Это чтобы получше видеть тебя, моя дорогая.
- Бабушка, какие у вас большие зубы!
- Это чтобы съесть тебя! - сказал волк и проглотил Красную Шапочку.
Он так громко зарычал своим жутким волчьим голосом, что дровосеки услышали его. Они вбежали в дом с топорами. Они размахнулись своими топорами и убили волка. Из волчьего живота тотчас вылезли Бабушка с Красной Шапочкой, живые и здоровые. Они зарыли волка в лесу и пригласили дровосеков на чай. К чаю были поданы вкусные пирожки со свежевзбитым маслом.
====== Задание 2. Вставка графических объектов ======
Отформатируйте страницу по образцу: {{:html:les2.pdf|}}
Для вставки графических объектов в документ используется тег:
[[:html:tags:img|![]()
]], [[:html:tags:body|]]
Необходимые для выполнения задания картинки берем здесь:
{{:html:pic:pic1.jpg|}}
{{:html:pic:pic2.jpg|}}
{{:html:pic:pic3.jpg|}}
{{:html:pic:pic4.jpg|}}
{{:html:pic:pic5.jpg|}}
{{:html:pic:fon.jpg|}}
====== Задание 3. Таблицы ======
Отформатируйте страницу по образцу: {{:html:les3.pdf|}}
Для создания таблиц в HTML используются теги:
[[:html:tags:table|]], [[:html:tags:tr|]], [[:html:tags:td|| ]], [[:html:tags:th| | ]]
====== Задание 4. Относительные и абсолютные ссылки ======
Создайте вторую страницу {{:html:sostav.pdf|}}
Вставьте ссылку на созданную страницу в основной документ
Отформатируйте страницу по образцу: {{:html:les4.pdf|}}
Для оформления ссылок в документа используется тег:
[[:html:tags:a|]]
Продвинутое задание должно включать в себя возможность навигации внутри страницы, примерно так: [[http://mif.vspu.ru/books/html-task/les6.html|Продвинутое задание :-)]]
(внешний вид задания составляет основу следующего урока)
====== Задание 5. Верстка в 2 колонки ======
Отформатируйте страницу по образцу: {{:html:les5.pdf|}}
====== Задание 6. Каскадные таблицы стилей ======
Отформатируйте страницу по образцу: {{:html:les6.pdf|}},
используя каскадные таблицы стилей
**Дополнительно (продвинутое задание):** оформить текст Красной шапочки так, чтобы:
- между абзацами исчезло дополнительное расстояние;
- в абзацах появилась красная строка;
- (в тексте без навигации) сделать поля (отступ от краев браузера);
- буквица в первом абзаце;
- подсветка ссылок и их исчезающее подчеркивание;
- оформление заголовков и цвета шрифта основного текста (а также его другие характеристики) не через , а через стили;
- выравнивание абзацев основного текста по ширине (одновременно по левому и правому краю), а заголовков по центру;
- таблица стилей должна быть в виде отдельного подключаемого файла.
====== Задание 7. Дополнительное задание ======
Отформатируйте страницу по образцу: {{:html:les7.pdf|}}
Необходимые для выполнения задания картинки берем здесь:
{{:html:pic:fon-line.gif|}}
Задания подготовлены по материалам сайта [[http://www.fizmat.vspu.ru|www.fizmat.vspu.ru]]
====== Задание 8. Формы ввода ======
Формы ввода необходимы для отправки данных на сервер или для организации интерактивного взаимодействия с клиентскими программами.
Для оформления форм в документа используется тег:
[[:html:tags:form|
Подготовить страничку с использованием форм ввода, которая может работать с простым скриптом, возвращающим введенное значение: [[http://users.nsunc.com/~vlasov/cgi-bin/testform.cgi|Тестовый скрипт]].
Примерную реализацию можно посмотреть тут: [[http://users.nsunc.com/~vlasov/testform.html|Тестовая форма]].
====== Задание 9. Элементы JavaScript ======
Для оперативного ввода-вывода, нужд отладки и т.п. применяются функции JavaScript alert(str), prompt(string, defaultvalue).
Вот примеры использования данных фукнкций: [[http://users.nsunc.com/~vlasov/javascript/hellow.html|Hello, world!]], [[http://users.nsunc.com/~vlasov/javascript/alertprompt.html|Alert-Prompt]].
Этот пример показывает вычисление факториала от натурального (целого, большего нуля) заданного числа, с возможностью продолжения и прекращения выполнения вычисления:
n!-calculating
Расчет факториала
На данной странице предложен пример расчета факториала...
Для завершения работы введите любое ненатуральное число и/или буквы.
Перезапуск
Реализацию можно посмотреть тут: [[http://users.nsunc.com/~vlasov/javascript/factorial.html|факториал]]
(в Internet Explorer'е может быть заблокировано окошко ввода, и надо будет дать специальное разрешение на временное исполнение скрипта)
**Задание.** Создать страничку и написать программу, вычисляющую корни квадратного уравнения, и организовать взаимодействие с пользователем, используя функции alert, prompt.
Страничка нашей википедии, посвященная javascript, [[javascript:|находится здесь]]. |