Успейте получить инструменты учителя по летним ценам! Скидки до 45% на комплекты видеоуроков и электронных тетрадей

СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ

Благодаря готовым учебным материалам для работы в классе и дистанционно

Выбрать материалы

Скидки до 50 % на комплекты
только до

Готовые ключевые этапы урока всегда будут у вас под рукой

Организационный момент

Проверка знаний

Объяснение материала

Закрепление изученного

Итоги урока

Был в сети 18.05.2026 10:40

Алексеев Владимир Анатольевич

преподаватель информатики и ВТ

50 лет

500

108 051

Подписчики

Подписки

Местоположение

Россия, Лянтор

Специализация

Информатика

Обо мне Блог Файлы Тесты Галерея Активность Награды

Тема: Разработка Web-страницы.

Категория: Информатика

10.03.2015 17:45

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

Цель: освоить возможности размещения текста в форме списков и вставкой рисунков при разработке WEB – страниц.

Студент должен

знать:

общие положения создания WEb-страниц;

базовые теги языка HTML;

уметь:

планировать Web-страницы;

размещать текст в форме списков;

вставлять рисунки при разработке WEb – страниц.

Теоретическое обоснование.

Структура документа HTML

Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры. Документ HTML всегда должен начинаться с тега <HTML> и заканчиваться соответствующим закрывающим тегом (</HTML>). Внутри документа выделяются два основных раздела: раздел заголовков и тело документа, — идущие именно в таком порядке. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <HEAD> и </HEAD>. В частности, раздел заголовков должен содержать общий заголовок документа, ограниченный парным тегом <TITLE>.

Основное содержание размещается в теле документа, которое ограничивается парным тегом <BODY>. Строго говоря, положение структурных тегов в документе нетрудно определить, даже если они опущены. Поэтому стандарт языка HTML требует только наличия тега <TITLE> (и, соответственно, </TITLE>). Тем не менее, при создании документа HTML опускать структурные теги не рекомендуется.

Простейший правильный документ HTML, содержащий все теги, определяющие структуру, может выглядеть следующим образом:

<HTML>

<НЕАО><ТITLE>Заголовок документа</ТITLE></НЕАD>

<BODY>

Текст документа </BODY>

</HTML>

Элементы HTML

Для парных тегов область влияния определяется частью документа между открывающим и закрывающим тегом. Такую часть документа рассматривают как элемент языка HTML. Так, можно говорить об «элементе BODY», включающем тег <BODY>, основное содержание документа и закрывающий тег </BODY>. Весь документ HTML можно рассматривать как «элемент HTML*. Для непарных тегов элемент совпадает с тегом, который его определяет.

Большинство элементов языка HTML описывает части содержания документа и помещается между тегами <BODY> и </BODY>, то есть, внутрь структурного Элемента BODY. Такие элементы делят на блочные и текстовые. Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и еще более мелких частей текста.

Теперь можно сформулировать правила вложения элементов.

Элементы не должны пересекаться. Другими словами, если открывающий тег располагается внутри элемента, то и соответствующий закрывающий тег должен располагаться внутри этого же элемента.

Блочные элементы могут содержать вложенные блочные и текстовые элементы.

Текстовые элементы могут содержать вложенные текстовые элементы.

Текстовые элементы не могут содержать вложенные блочные элементы.

Строго говоря, все правила языка HTML можно рассматривать исключительно как «пожелания». Средство, используемое для отображения Web-документа, сделает все возможное, чтобы истолковать разметку наиболее разумным образом. Тем не менее, гарантию правильного воспроизведения документа дает только неукоснительное следование требованиям спецификации языка.

Функциональные блочные элементы

В большинстве документов основными функциональными элементами являются заголовки и абзацы. Язык HTML поддерживает шесть уровней заголовков. Они задаются при помощи парных тегов от <Н1 > до <Н6>. При отображении Web-документа на экране компьютера эти элементы показываются при помощи шрифтов разного размера.

Обычные абзацы задаются с помощью парного тега <Р>. Язык HTML не содержит средств для создания абзацного отступа («красной строки»), поэтому при отображении на экране компьютера абзацы разделяются пустой строкой. Закрывающий тег </Р> рассматривается как необязательный. Подразумевается, что он стоит перед тегом, который задает начало очередного абзаца документа. Например:

<НТ>Заголовок</Н1>

<Р>Первый абзац<Р>Второй абзац <Н2>Заголовок второго уровня</Н2>

Следствием наличия специального тега, определяющего абзац, является тот факт, что обычного символа конца строки, вводимого по нажатию клавиши ENTER, для создания абзацного отступа недостаточно. Язык HTML рассматривает символы конца строки и пробелы особым образом. Любая последовательность, состоящая только из пробелов и символов конца строки, при отображении документа рассматривается _v как одиночный пробел. Это, в частности, означает, что символ конца строки даже не осуществляет перехода на новую строку (для этой цели используется текстовый элемент, задаваемый непарным тегом <BR>).

В качестве ограничителя абзацев может также использоваться горизонтальная линейка. Этот элемент задается непарным тегом <HR>. При отображении документа на экране линейка разделяет части текста друг от друга. Ее длина и толщина задаются атрибутами тега <HR>.

Этот тег создает горизонтальную линейку шириной в 10 пикселов, занимающую половину ширины окна и расположенную справа.

Гипертекстовые ссылки

Гипертекстовая ссылка является фрагментом текста документа и потому задается текстовым элементом, определяемым при помощи парного тега <А>. Этот элемент содержит обязательный атрибут, который не может быть опущен. В данном случае обязательным является атрибут HREF= (знак равенства показывает, что необходимо задать значение этого атрибута).

В качестве значения атрибута используется адрес URL документа, на который указывает ссылка. Она может указывать на произвольный документ, располагающийся на любом общедоступном узле сети (Web-узел, архив FTP и прочие). Например, открывающий тег ссылки может иметь вид <А HREF="http://www.site.com/index.htm">.

Адрес URL может быть задан в абсолютной форме, то есть начинаться с указания протокола и адреса Web-узла. Такая запись адреса используется, когда необходимо направить посетителя на другой Web-узел, и рассматривается как внешняя ссылка. При использовании относительного адреса в ссылке задается только относительный путь поиска для документа. В этом случае предполагается использование того же протокола и того же Web-узла, а ссылка рассматривается как внутренняя. Внутренняя ссылка сохраняет свою работоспособность в случае изменения адреса Web- узла как целого (например, в результате его переноса на другой сервер), поэтому при потенциальной возможности такого события следует отказываться от полного задания адресов в гиперссылках.

Web-графика

Графические иллюстрации в большинстве случаев являются неотъемлемой частью Web-документов. Сегодня графические элементы Web-страниц используют два основных формата — GIF и JPEG (новый формат PNG пока еще нельзя считать общепринятым). Все графические браузеры, предназначенные для отображения Web-страниц на экране компьютера, способны распознавать и отображать файлы этих форматов.

Рисунки хранятся на Web-узлах в отдельных файлах, но отображаются как элементы Web-страниц. Для вставки рисунка используется текстовый элемент, задаваемый непарным тегом <IMG>. Тег <IMG> должен содержать обязательный атрибут SRC=, задающий адрес URL файла с изображением в относительной или абсолютной форме.

При отображении рисунка браузер по умолчанию использует его реальные размеры. Если рисунок необходимо отмасштабировать, применяют атрибуты WIDTH= и HEIGHT=, задающие ширину и высоту рисунка (в пикселах), соответственно. Если эти параметры заданы, то броузер может определить, какое место надо выделить для отображения рисунка, еще до того, как рисунок загружен. Это несколько ускоряет отображение загружаемой страницы, так что удобно задавать эти атрибуты всегда.

Форматирование текста

Парный тег <FONT> позволяет управлять параметрами шрифта. Он должен обязательно содержать хотя бы один из трех атрибутов: COLOR=, FACE= или SIZE=.

Атрибут COLOR= задает цвет текста, который может быть задан текстовым значением (например, COLOR-'GREEN") или шестнадцатиричным кодом, в котором последовательные байты задают значения красной, зеленой и синей составляющих цвета (COLOR="#OOFFOO" дает тот же результат, что и COLOR-"GREEN"). Атрибут FACE= задает гарнитуру шрифта. Значение этого атрибута сравнивается с именами шрифтов, которые установлены на компьютере. Атрибут SIZE= определяет размер шрифта в относительных единицах (от 1 до 7). Для этого атрибута можно определять значение со знаком (плюс или минус), которое определяет увеличение или уменьшение шрифта относительно текущего размера.

Параметры шрифта, используемые в документе по умолчанию, задают с помощью непарного тега <BASEFONT>, который помещают один раз внутри элемента BODY. Он может использовать те же атрибуты, что и тег <FONT>.

Начертание символов задается при помощи парных тегов <В> (полужирный шрифт), <1> (курсив), <U> (подчеркнутый текст) <S> (вычеркнутый текст). Их использование не рекомендуется. Вместо них следует применять элементы фразы, описывающие функциональные особенности текста, например вместо

<В>Обратите внимание!</В>

лучше написать

<STRONG>Обратите внимание!</STRONG>

Так, парный тег <СIТЕ> предназначен для отображения цитат (выводятся курсивом). Парные теги <ЕМ> (выделение) и <STRONG> (сильное выделение) являются функциональными аналогами курсивного и полужирного начертаний. Кроме того, язык HTML содержит набор элементов для описания работы компьютерных программ. Для этой цели используют парные теги <CODE> (исходный текст программы), <KBD> (текст, вводимый с клавиатуры), <SAMP> (пример вывода программы) и <VAR> (программные переменные). Для вывода соответствующих элементов используется моноширинный шрифт. Кроме того, переменные выводятся курсивом, а клавиатурный ввод (в некоторых браузерах) — полужирным шрифтом.

Списки

Все списки представляют собой блочные элементы.

Упорядоченные (нумерованные) и неупорядоченные (маркированные) списки оформляются одинаково. Они создаются при помощи парных тегов: <OL> для упорядоченного списка и <UL> для неупорядоченного. Эти списки могут содержать только элементы списка, определяемые парным тегом <LI>. Закрывающий тег </LI> можно опускать, так как его местонахождение легко восстановить. Открывающие теги могут содержать атрибуты, определяющие вид маркера (для неупорядоченного списка), способ и последовательности нумерации (для упорядоченного).

Разработка сайта «Компьютер».

Наш сайт будет посвящен компьютеру, программному обеспечению, будет содержать терминологический словарь и содержать информацию о ценах на комплектующие компьютера.

Каждая страница должна содержать заголовок, поясняющий текст, иллюстрацию и панель навигации. Сайт будет состоять из 4 страниц. Заголовок – Давайте знакомиться – компьютер

Поясняющий текст: Страницы этого сайта позволят Вам больше узнать о компьютере, его программном и аппаратном обеспечении. Терминологический словарь познакомит Вас с компьютерными терминами. Вы получите информацию о ценах на компьютерные комплектующие.

Иллюстрацию : рисунок компьютера

Навигационную панель : Гиперссылки на 3 другие страницы: Программы, Словарь, Комплектующие .

Заголовок – Программное обеспечение.

Поясняющий текст: Информацию об основных типах ПО в форме вложенного списка.

Иллюстрацию: рисунок дискет.

Навигационную панель: Гиперссылки на 3 другие страницы: Главная, Словарь, Комплектующие .

Ход работы:

Изучить теоретическое обоснование.
Выполнить практические задания.
Оформить отчет.

Практические задания.

Задание 1

1. Создайте папку site (Файл-Создать-Папку).

2. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).

3. Наберите следующий HTML-код:

<HTML> <HEAD> <TITLE> Компьютер</TITLE> </HEAD> <BODY > Давайте знакомиться – компьютер </BODY> </HTML>

4. Сохраните под именем index.htm в папке site.

5. Закройте текстовый редактор Блокнот.

6. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

7. Откройте двойным щелчком файл index.htm для просмотра в браузере. Проанализируйте полученный результат.

8. Оформим фразу “Давайте знакомиться – компьютер” как заголовок. Для этого откроем HTML-код нашей страницы:

9. Зададим выравнивание заголовка “по центру”:

10. Добавим на страницу основной текст: «Страницы этого сайта позволят Вам больше узнать о компьютере, его программном и аппаратном обеспечении. Терминологический словарь познакомит Вас с компьютерными терминами. Вы получите информацию о ценах на компьютерные комплектующие»

11. Добавим на нашу страницу картинку. Для этого найдите файл comp.wmf и сохраните в папке.

12.Вставим гиперссылки и посмотрим на полученную страницу

1 СТРАНИЦА САЙТА

<HTML>

<HEAD>

<TITLE> Компьютер</TITLE>

</HEAD>

<BODY >

<h1 align="center"> Давайте знакомиться – компьютер</h1>

<hr>

Страницы этого сайта позволят Вам больше узнать о компьютере,

его программном и аппаратном обеспечении. Терминологический словарь познакомит Вас с компьютерными терминами.

Вы получите информацию о ценах на компьютерные комплектующие.

</P>

<A HREF="index1.htm"> ПРОГРАММЫ </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<A HREF="index2.htm"> СЛОВАРЬ </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<A HREF="index3.htm"> КОМПЛЕКТУЮЩИЕ </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

</BODY>

</HTML>

13. Откройте текстовый редактор Блокнот .

14. Наберите следующий HTML-код:

<HTML> <HEAD> <TITLE> Компьютер</TITLE> </HEAD> <BODY > Программное обеспечение </BODY> </HTML>

15. Сохраните под именем index1.htm в папке site.

16. Закройте текстовый редактор Блокнот.

17. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

18. Откройте двойным щелчком файл index1.htm для просмотра в браузере. Проанализируйте полученный результат.

19. Оформим фразу “Программное обеспечение” как заголовок. Для этого откроем HTML-код нашей страницы:

20. Зададим выравнивание заголовка “по центру”:

21. Создадим главный нумерованный список основных категорий ПО

22. Добавим вложенный список.

23. Добавим на нашу страницу картинку. Для этого найдите файл disk.wmf и сохраните в папке.

24.Вставим гиперссылки и посмотрим на полученную страницу.

Задание 2

2 СТРАНИЦА САЙТА

<HTML>

<HEAD>

<TITLE> Компьютер</TITLE>

</HEAD>

<BODY >

<h1 align="center"> ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ</h1>

<hr>

<ol>

<li> СИСТЕМНЫЕ ПРОГРАММЫ

<li> ПРИКЛАДНЫЕ ПРОГРАММЫ

<UL>

<LI> ТЕКСТОВЫЙ РЕДАКТОР

<LI> ГРАФИЧЕСКИЙ РЕДАКТОР

<LI> ЭЛЕКТРОННАЯ ТАБЛИЦА

<LI> СУБД

</UL>

<li> СИСТЕМЫ ПРОГРАММИРОВАНИЯ

</OL>

<A HREF="index.htm"> ГЛАВНАЯ </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<A HREF="index2.htm"> СЛОВАРЬ </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

<A HREF="index3.htm"> КОМПЛЕКТУЮЩИЕ </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

</BODY>

</HTML>

Контрольные вопросы:

Какой тег задает отдельный абзац?
Какими бывают заголовки по значению или по уровню?
Заголовок какого уровня имеет самый большой размер шрифта?
Какой параметр определяет выравнивание абзацев? Какие возможны способы выравнивания?
Как вставить рисунок в страницу?
Как вставить списки в таблицу?
Как задаются параметры шрифта?
Как оформляются гипертекстовые ссылки?

Содержание отчета:

Название и цели работы.
Ответы на контрольные вопросы.
Вывод.

Список литературы:

Колмыкова Е. В. Информатика, учебное пособие – М., 2014 г.
Цветкова М. С. Информатика и ИКТ. Учебник – М., 2012 г.
Семакин И. Г., Хеннер И. К. Информатика 11 кл – М., 2014 г.
Гейн А. Г. Информатика и ИКТ. Учебник 11 кл. – М., 2012 г.
Михеева Е.В. Практикум по информатике: учеб. пособие. – М., 2014 г.
Грошев А. С. Информатика, Лабораторный практикум – Архангельск, 2012 г.
Семакин И. Г., Хеннер И. К. Задачник-практикум в 2 томах – М., 2012 г.
Хубаев Г. Н. Информатика, учебное пособие – Ростов на Дону, 2010 г.
Кудинов Ю. И. Практикум по основам современной информатики, учебное пособие – М., 2011 г.
Михеева Е.В., Титова О.И. Информатика: учебник. – М., 2010 г.
Угринович Н.Д. Информатика и информационные технологии. Учебник 10–11 кл. – М., 2010 г.