мета-данные страницы
Загрузка не удалась. Возможно, проблемы с правами доступа?
Общие требования к создаваемым документам
  • наличие обязательных элементов 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, используя каскадные таблицы стилей

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

  1. между абзацами исчезло дополнительное расстояние;
  2. в абзацах появилась красная строка;
  3. (в тексте без навигации) сделать поля (отступ от краев браузера);
  4. буквица в первом абзаце;
  5. подсветка ссылок и их исчезающее подчеркивание;
  6. оформление заголовков и цвета шрифта основного текста (а также его другие характеристики) не через <FONT..>, а через стили;
  7. выравнивание абзацев основного текста по ширине (одновременно по левому и правому краю), а заголовков по центру;
  8. таблица стилей должна быть в виде отдельного подключаемого файла.

Задание 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, находится здесь.