Создание простейшей html-страницы. Основы web-дизайна
Цель: познакомить со структурой HTML - документа, основами web- дизайна.
Ход урока
-
Объяснение.
Процесс создания web- страницы заключается во встраивании в ее текст специальных команд, называемых тегами, которые задают правила вывода на экран выбранного текста.
Познакомить учащихся с основными тегами и параметрами, определяющими правила из использования. Посмотреть, как будет выглядеть текст в браузере.
Упражнение 1.
- Практикум по созданию web- страниц.
- Ниже приведен текст HTML - программы. Внимательно изучите его, наберите текст в "Блокноте". Закончите его оформление.
- Сохраните документ в папке "Моя" под именем index.html (Звездное небо)
<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 св.года.
- Вопросы для закрепления.
- Какие средства можно использовать для создания страниц в режиме теговой разметки?
- Что такое тег?
- Назовите основные блоки HTML - документа.
- Что такое инструкция тега?
- Опишите назначение тегов <BODY>,<P>,<PRE>,<BR>.
- Тестовая работа по данной теме (с использованием интерактивной доски):
- Что такое HTML - программа?
А) документ на экране браузера;
Б) текст на языке HTML;
В) список тегов;
Г) интернетовская web- страница.
- Какие команды способны изменить цвет фона документа?
А) <HTML>….</HTML>;
Б) <BODY>….</BODY>;
В) <FONT>….</FONT>;
Г) <P>….</P>.
3. Какие команды способны изменить цвет шрифта?
А) <HTML>….</HTML>;
Б) <BODY>….</BODY>;
В) <FONT>….</FONT>;
Г) <P>….</P>.
4. Каким тегом можно вставить горизонтальную линию:
А) <BR>;
Б) <HR>;
В) <P>;
Г)<Hn>.
5. Атрибут align изменяет:
А) размер шрифта;
Б) выравнивает блок;
В) цвет шрифта;
Г) размер заголовка.
-
Практическая работа.
Создать web- страницу, на которой представлены краткие сведения, о каком - либо человеке (автобиография, биография писателя, музыканта и т.п.).
- Практическая работа с выходом в Интернет.
Посетить сайт в Интернете 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 балла.
- Подведение итогов.
Литература
А.А Дуванов "Web- конструирование. HTML";
О.Б. Богомолова "Web- конструирование на HTML".