Общие требования к создаваемым документам наличие обязательных элементов HTML, BODY и HEAD; правильность использования тэгов; правильность размещения тэгов относительно друг друга; отсутствие неработоспособных тэгов.

Задание 1. Форматирование текста

Отформатируйте текст по образцу: les1.pdf

Для форматирования можно воспользоваться тегами:<b>, <i>, <br>, <p>, <font>, <hr>, <center>
Жила однажды в далекой деревушке маленькая прелестная девочка. Ее мать и бабушка любили ее без памяти. Бабушка сшила ей красную шапочку, которая была ей так к лицу, что все и стали звать девочку Красной Шапочкой.Однажды мама напекла целый противень пирогов и говорит дочке: - Красная Шапочка, бабушка заболела. Не отнесешь ли ты ей пирожков и горшочек свежевзбитого масла? Красная Шапочка тут же встала и отправилась к бабушке. А бабушка ее жила в другой деревне, за густым, диким лесом. Проходя через лес, она встретила волка. Волк хотел было ее съесть, но побоялся, поскольку недалеко работали дровосеки. Поэтому он придумал план. - Куда ты идешь, моя крошка? - спросил волк. - Повидать свою бабушку, - сказала Красная Шапочка. - У меня есть для нее горшочек свежевзбитого масла и пирожки. - И далеко тебе идти? - спросил волк. - Далеко, - ответила Красная Шапочка. - Ее дом довольно далеко отсюда, первый с той стороны леса. - Я тоже хочу навестить бабушку, - сказал хитрый волк. - Я пойду этой тропинкой, а ты другой. Посмотрим, кто из нас первый доберется туда. Волк бросился бежать изо всех сил по кратчайшей тропинке, а Красная Шапочка пошла по самой длинной дорожке. Она собирала цветы, пела веселые песни, играла с красивыми бабочками. Волк тем временем добежал до бабушкиного дома. Он дважды постучал в дверь. - Кто там? - спросила Бабушка. - Это я, Красная Шапочка, - сказал волк голосом девочки. - Я принесла тебе пирожков и горшочек свежевзбитого масла. Бабушка лежала в постели, потому что болела. - Открой дверь и войди, - крикнула она. Волк ворвался в комнату. Он не ел целых три дня и был поэтому очень голоден. Он тотчас проглотил Бабушку. Потом он натянул на себя бабушкин халат, забрался на постель и стал поджидать Красную Шапочку, которая через некоторое время пришла и постучалась в дверь. - Кто там? - спросил Волк бабушкиным голосом. Его голос был хриплым, но Красная Шапочка подумала, что у Бабушки болит горло. - Это я, Красная Шапочка, - сказала она. - Я принесла тебе пирожков и горшочек свежевзбитого масла. - Открой дверь и войди, - сказал волк таким ласковым голосом, насколько мог. Он натянул одеяло до самых глаз. - Поставь свою корзинку на стол и подойди ко мне, - сказал волк. Красная Шапочка подошла поближе. Она сказала: - Бабушка, какие у вас длинные руки! - Это чтобы получше обнимать тебя, моя дорогая, - сказал волк. - Бабушка, какие у вас длинные уши! - Это чтобы лучше слышать тебя, моя дорогая. - Бабушка, какие у вас большие глаза! - Это чтобы получше видеть тебя, моя дорогая. - Бабушка, какие у вас большие зубы! - Это чтобы съесть тебя! - сказал волк и проглотил Красную Шапочку. Он так громко зарычал своим жутким волчьим голосом, что дровосеки услышали его. Они вбежали в дом с топорами. Они размахнулись своими топорами и убили волка. Из волчьего живота тотчас вылезли Бабушка с Красной Шапочкой, живые и здоровые. Они зарыли волка в лесу и пригласили дровосеков на чай. К чаю были поданы вкусные пирожки со свежевзбитым маслом.

Задание 2. Вставка графических объектов

Отформатируйте страницу по образцу: les2.pdf

Для вставки графических объектов в документ используется тег:<img>, <body>
Необходимые для выполнения задания картинки берем здесь:

Задание 3. Таблицы

Отформатируйте страницу по образцу: les3.pdf

Для создания таблиц в HTML используются теги:<table>, <tr>, <td>, <th>

Задание 4. Относительные и абсолютные ссылки

Создайте вторую страницу sostav.pdf

Вставьте ссылку на созданную страницу в основной документ

Отформатируйте страницу по образцу: les4.pdf

Для оформления ссылок в документа используется тег:<a>

Продвинутое задание должно включать в себя возможность навигации внутри страницы, примерно так: Продвинутое задание :-)

(внешний вид задания составляет основу следующего урока)

Задание 5. Верстка в 2 колонки

Отформатируйте страницу по образцу: les5.pdf

Задание 6. Каскадные таблицы стилей

Отформатируйте страницу по образцу: les6.pdf, используя каскадные таблицы стилей

Дополнительно (продвинутое задание): оформить текст Красной шапочки так, чтобы:

между абзацами исчезло дополнительное расстояние;

в абзацах появилась красная строка;

(в тексте без навигации) сделать поля (отступ от краев браузера);

буквица в первом абзаце;

подсветка ссылок и их исчезающее подчеркивание;

оформление заголовков и цвета шрифта основного текста (а также его другие характеристики) не через <FONT..>, а через стили;

выравнивание абзацев основного текста по ширине (одновременно по левому и правому краю), а заголовков по центру;

таблица стилей должна быть в виде отдельного подключаемого файла.

Задание 7. Дополнительное задание

Отформатируйте страницу по образцу: les7.pdf

Необходимые для выполнения задания картинки берем здесь:

Задания подготовлены по материалам сайта www.fizmat.vspu.ru

Задание 8. Формы ввода

Формы ввода необходимы для отправки данных на сервер или для организации интерактивного взаимодействия с клиентскими программами.

Для оформления форм в документа используется тег:<form>

Подготовить страничку с использованием форм ввода, которая может работать с простым скриптом, возвращающим введенное значение: Тестовый скрипт.

Примерную реализацию можно посмотреть тут: Тестовая форма.

Задание 9. Элементы JavaScript

Для оперативного ввода-вывода, нужд отладки и т.п. применяются функции JavaScript alert(str), prompt(string, defaultvalue).

Вот примеры использования данных фукнкций: Hello, world!, Alert-Prompt.

Этот пример показывает вычисление факториала от натурального (целого, большего нуля) заданного числа, с возможностью продолжения и прекращения выполнения вычисления:

<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>n!-calculating</TITLE> <SCRIPT LANGUAGE="JavaScript"> function checkinput(n) { var n1; n = n + ""; n1 = parseInt(n) + ""; if ((n == n1) && (n1>0)) {return 1} else {return 0}; } // checkinput function fact(n) { if ( n==0 ) { return 1; }; return n*fact(n-1); }; // fact function You_Go() { n = prompt('put in the field a natural number: ',1); while ( checkinput(n) ) { f = fact(n); n = prompt('n!='+f+'\nput in the field a natural number: ',1); } }; </SCRIPT> </HEAD> <BODY BGCOLOR="White" TEXT="Black" LINK="Blue" VLINK="Purple" ALINK="Red"> <H1>Расчет факториала</H1> <P>На данной странице предложен пример расчета факториала... <BR> Для завершения работы введите любое ненатуральное число и/или буквы. <hr> <a href="javascript:You_Go()">Перезапуск</a></P> <SCRIPT LANGUAGE="JavaScript">You_Go()</SCRIPT> </BODY> </HTML>

Реализацию можно посмотреть тут: факториал (в Internet Explorer'е может быть заблокировано окошко ввода, и надо будет дать специальное разрешение на временное исполнение скрипта)

Задание. Создать страничку и написать программу, вычисляющую корни квадратного уравнения, и организовать взаимодействие с пользователем, используя функции alert, prompt.

Страничка нашей википедии, посвященная javascript, находится здесь.