.
.
Средняя школа-лицей №23 имени З.Космодемьянской
Практическая работа
Сабақ жоспары | Предметы | Информатикадан ашық сабақтар Загрузок: 277 | Просмотров: 1651 | Размер: 24.9 Kb | Автор: Тәрбиег. Шымкента
Лабораторно-практическая работа
на тему: «Разработка сайтостроения в HTML-коде»
учитель информатики:
Фархадинова Танзиля Нурмаханбетовна
Шымкент – 2013 г.
Практическая работа
Цель работы. Выполнив эту работу, вы научитесь:
создавать Web-страницу средствами HTML-кода ;
уметь применять теги при работе со списками и текстом .
Выполнение работы :
Внимание! Описание используемых в работе тегов приведено в табл. 1.
1. Создайте файл в HTML - коде:
запустите редактор Блокнот, введите текст:
Мой гипертекстовый документ.
сохраните файл в созданной папке, при сохранении в окне диалога Сохранить как… в строке Тип файла: выберите вариант Все файлы(*.*), а в строке Имя файла задайте имя с расширением .htm, например index.htm
закройте документ, найдите его пиктограмму в окне программы Проводник;
откройте файл, просмотрите его вид.
2. Введите теги, определяющие структуру html-документа:
откройте документ в программе Блокнот, введите приведенные ниже теги:
<HTML>
<HEAD> <TITLE> Страница</TITLE> </HEAD>
<BODY>
Мой гипертекстовый документ.
</BODY>
</HTML>
сохраните документ под тем же именем, обновите его отображение в браузере, проанализируйте произошедшие изменения в отображении документа.
3. Отредактируйте документ:
добавьте после текста «Мой гипертекстовый документ.» текст подписи:
Учащийся средней школы N класса 11 «__» Фамилия Имя
сохраните документ (но не закрывайте) и обновите его просмотр в браузере;
используя одиночный тег <BR>, отредактируйте документ так, чтобы подпись начиналась с новой строки, а Фамилия Имя – в следующей строке. Просмотрите в браузере новый вариант.
Внимание! После каждого изменения документ нужно сохранять, а просмотр в браузере начинать с обновления загрузки документа с помощью кнопки «Обновить» на панели инструментов.
4. Оформите фрагменты текста с помощью стилей Заголовков:
первую строку документа оформите стилем Заголовок 1-го уровня с помощью парного тега <H1> …</H1>. Вторую строку оформите как Заголовок 6-го уровня, а третью – как Заголовок 4-го уровня.
просмотрите документ в браузере, изменяя настройку отображения шрифтов (меню Вид – Размер шрифта – Самый крупный, Средний, Мелкий и Самый мелкий).
5. Выполните форматирование шрифта:
после строки Фамилия Имя добавьте еще одну строку текста:
Нас утро встречает прохладой
оформите фразу по приведенному ниже образцу.
(в слове УТРО все буквы должны иметь разные цвета. В слове ПРОХЛАДОЙ оформите буквы ПРО – красным цветом, ОЙ – темно-синим);
оформить строку с подписью (Студент группы NNN Фамилия Имя) курсивом, размер шрифта задать относительным изменением; (использовать теги <FONT SIZE="+2"> и <I>);
просмотрите полученный документ в браузере.
6. Выполните форматирование абзацев:
создайте новый документ stranica_2.htm, сохраните его в той же рабочей папке;
введите текст:
<HTML>
<HEAD> <TITLE> Фамилия </TITLE> </HEAD>
<BODY>
Приветствую Вас на моей второй web-страничке! <BR>Информация о школе
</BODY>
</HTML>
выровняйте текст по центру;
введите текст:
Школа №23 расположена в центре города. Окружена жилым массивом, по соседству расположен музыкальный колледж. В школе учатся дети из семей со средним и ниже среднего достатком.
Плановая вместимость 980 учащихся, обучается 3000 человек. С 1968 и до 1990 года школа была общеобразовательной. С 1990 года школа стала экспериментальной площадкой. В 1992 году она получила статус школа-многопрофильный лицей.
оформите выравнивание абзаца по ширине;
ограничьте абзац горизонтальными разделительными линиями сверху и снизу, используя тег <HR>;
скопируйте текст и разбейте его на абзацы. Выровняйте по центру:
Школа №23 расположена в центре города. Окружена жилым массивом, по соседству расположен музыкальный колледж. В школе учатся дети из семей со средним и ниже среднего достатком.
Плановая вместимость 980 учащихся, обучается 3000 человек. С 1968 и до 1990 года школа была общеобразовательной. С 1990 года школа стала экспериментальной площадкой. В 1992 году она получила статус школа-многопрофильный лицей.
сохраните документ, просмотрите документ в окне браузера.
7. Выполните оформление списков:
создайте новый документ stranica_3.htm, сохраните его в той же рабочей папке жесткого диска;
введите текст:
<HTML>
<HEAD> <TITLE> Фамилия </TITLE> </HEAD>
<BODY>
Приветствую Вас на моей третьей web-страничке!
</BODY>
</HTML>
дополните текст документа (между тегами <BODY>…</BODY>) следующим текстом:
Я знаю как оформлять:
Шрифты,
Абзацы
оформите две последние строки как список нумерованный, для этого используйте следующую конструкцию тегов:
<OL>
<LI> Шрифты, </LI>
<LI> Абзацы </LI>
</OL>
скопируйте последнюю конструкцию тегов, поменяйте оформление списка на список маркированный, используя теги <UL>, </UL>;
создайте «смешанный» список:
Я знаю как оформлять:
1. Шрифты
• Размер
• Цвет
• Гарнитуру
2. Абзацы
• Выравнивание
• Отступы
• Междустрочный интервал.
8. Сохраните документ, предъявите результат работы преподавателю.
Таблица 1
Теги форматирования шрифта и абзаца
Назначение Вид тегов Примечание
Общая структура документа HTML
Тип документа <HTML> </HTML> Начало и конец документа
Имя документа <HEAD> </HEAD> Не отображается браузером
Заголовок <TITLE> текст </TITLE> Содержимое строки заголовка окна браузера
Тело документа <BODY> </BODY> Содержимое WEB-страницы
Структура содержания документа
Заголовки различного уровня <H№> текст </H№> № – номер уровня заголовка (от 1 до 6). Например, <H2> текст </H2> - заголовок 2-го уровня.
Скачать методички (классные уроки) для учителей по разным предметам: история, литература, физика. Как провести урок с учеником, вам поможет грамотно составленный план урока. Занятия по математике, литературе, физике, информатике, химии, психологии.
.