Создание простейшей html-страницы. Основы web-дизайна

Разделы: Информатика

Цель: познакомить со структурой HTML – документа, основами web- дизайна.

Ход урока

  1. Объяснение.

    2. Процесс создания web- страницы заключается во встраивании в ее текст специальных команд, называемых тегами, которые задают правила вывода на экран выбранного текста.

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

    Упражнение 1.
  2. Практикум по созданию web- страниц.
    1. Ниже приведен текст HTML – программы. Внимательно изучите его, наберите текст в “Блокноте”. Закончите его оформление.
    2. Сохраните документ в папке “Моя” под именем index.html (Звездное небо)

      3. <HTML>

      <HEAD>

      <TITLE> Звезды</TITLE>

      </HEAD>

      <BODY bgcolor=white text=black>

      <H3>Звездное небо</H3>

      <PRE>

      Звездное небо, видимое расположение звезд и других небесных светил на небесном своде. Невооруженным глазом, ночью, можно увидеть до 2,5 тыс. звезд (до 6-й звездной величины), большинство которых расположено вблизи полосы Млечного Пути. Для удобства ориентировки звездное небо разделено на 88 участков – созвездий, имеющих, как и наиболее яркие звезды, собственные названия.

      </PRE>

      Упражнение 2.

      Самостоятельно создайте документ doc.html (Ближайшая звезда). Посмотрите, как будет выглядеть документ в браузере. Поэкспериментируйте, измените цвет фона, цвет букв. Вставьте разделительную горизонтальную линию.

      Ближайшая звезда.

      Если не считать Солнца, то самой близкой к нам звездой является слабая проксима ЦЕНТАВРА, удаленная от нас на 4,225 св. года. Ближайшей “звездой”, видимой невооруженным глазом, можно считать, наблюдаемую в Южном полушарии двойную систему альфа Центавра, расстояние до которой 4,35 св.года.

    3. Вопросы для закрепления.
  • Какие средства можно использовать для создания страниц в режиме теговой разметки?
  • Что такое тег?
  • Назовите основные блоки HTML – документа.
  • Что такое инструкция тега?
  • Опишите назначение тегов <BODY>,<P>,<PRE>,<BR>.
    1. Тестовая работа по данной теме (с использованием интерактивной доски):
    1. Что такое HTML – программа?

      2. А) документ на экране браузера;

      Б) текст на языке HTML;

      В) список тегов;

      Г) интернетовская web- страница.

    2. Какие команды способны изменить цвет фона документа?

      3. А) <HTML>….</HTML>;

      Б) <BODY>….</BODY>;

      В) <FONT>….</FONT>;

      Г) <P>….</P>.

      3. Какие команды способны изменить цвет шрифта?

      А) <HTML>….</HTML>;

      Б) <BODY>….</BODY>;

      В) <FONT>….</FONT>;

      Г) <P>….</P>.

      4. Каким тегом можно вставить горизонтальную линию:

      А) <BR>;

      Б) <HR>;

      В) <P>;

      Г)<Hn>.

      5. Атрибут align изменяет:

      А) размер шрифта;

      Б) выравнивает блок;

      В) цвет шрифта;

      Г) размер заголовка.

    3. Практическая работа.

      4. Создать web- страницу, на которой представлены краткие сведения, о каком – либо человеке (автобиография, биография писателя, музыканта и т.п.).

    4. Практическая работа с выходом в Интернет.

Посетить сайт в Интернете http://www.lickey3.narod.ru/, оценить его достоинства и недостатки с учетом списка погрешностей:

  • Сайт работает только в одном браузере;
  • Отсутствует единый стиль оформления страниц;
  • Цветовая палитра, утомляющая глаза;
  • Неудобная навигация;
  • “Хвостатые” ссылки;
  • Отсутствие alt- надписей в информационных иллюстрациях;
  • Название окна не совпадает с заголовком страницы;
  • Отсутствует информация об авторах с электронным почтовым адресом;
  • Отсутствует лесенка в теговом каркасе;
  • Нарушение правил читаемости (название тегов – прописными буквами, названия атрибутов - строчными);
  • Суммарный вес страницы превышает 40 Кбайт.

Критерий оценок

Сайт оценивается по формуле:

B=2x(B1+B2)+B3+B4+B5

Где Bi – оценки (от 0 до 5 баллов) по следующим категориям:

  • B1 -дизайн;
  • B2- HTML – программирование;
  • B3- содержание;
  • B4 – грамматика;
  • B5- привлекательность.

За каждую обнаруженную погрешность, проверяющие, вычитают из максимального балла число равное 0,5 балла.

    1. Подведение итогов.

Литература

А.А Дуванов “Web- конструирование. HTML”;

О.Б. Богомолова “Web- конструирование на HTML”.