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

Скачать с сервера

. Средняя школа-лицей №23 имени З.Космодемьянской
г. Шымкента

Лабораторно-практическая работа
на тему: «Разработка сайтостроения в 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-го уровня.

Скачать методички (классные уроки) для учителей по разным предметам: история, литература, физика. Как провести урок с учеником, вам поможет грамотно составленный план урока. Занятия по математике, литературе, физике, информатике, химии, психологии.

Добавить урок