Основы языка разметки гипертекста (4 ч.).

Цель: формирование умений создавать гиперссылки на Web-страницах, Web-страницы и публиковать их с использованием языка разметки гипертекста.

Компетентности: назначение основных тегов HTML, основные особенности создания Web-документов, форматирование Web-документов, управление цветом, размером и гарнитурой шрифта в Web-документах, создание списков, таблиц, встраивание мультимедийных объектов в Web-документы, просмотр HTML-кода Web-страниц.

Вопросы к теме:

Как вы понимаете, что такое тег HTML? С помощью каких известных вам программ можно создавать Web-документы в коде HTML? С помощью каких известных вам программ можно просматривать Web-документы? В языке HTML нет тега, с помощью которого можно было бы создать абзац текста фиксированной ширины, например 800 пикселов. Почему нет таких тегов? Несмотря на отсутствие тегов для создания текста фиксированной ширины, управлять шириной текста все-таки можно. С помощью какого средства можно создать текст, расположенный в трех (например) колонках заданной ширины? Что такое альтернативный текст? Зачем он нужен и когда используется? Чем отличаются текстовые и графические гиперссылки? Предположим, что на Web-странице опубликован очень длинный документ (повесть). Для удобства пользователя автор ввел в начало документа содержание, состоящее из 20 пунктов, соответствующих главам повести. Что он должен предусмотреть, чтобы читатель мог перейти к любой главе щелчком на соответствующем пункте в содержании? Какие виды списков вы знаете? Какими средствами создают списки на Web-страницах? Что такое вложенные списки?

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

Практическое задание 1. Просмотр HTML-документа в браузере.

1. Создайте папку stranica. Все последующие файлы необходимо будет сохранять в этой папке.

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

3. Создайте шаблон web-страницы по образцу:

4. Сохраните готовый шаблон под именем shablon.html в папке stranica - Закройте Блокнот.

5. Просмотрите файл shablon.html в браузере. Обратите внимание на то, где отображаются строки «Заголовок web-страницы» и «Содержимое web-страницы (тело документа)».

6. С помощью редактора Блокнот откройте файл shablon.html.

7. Внесите в шаблон следующие изменения: введите заголовок «Страница исследований», а в тело документа введите текст: «Первая веб-страница будет посвящена исследованиям».

8. Сохраните получившийся файл под именем index. html в папке stranica (напомним, что index. html - это стандартное имя головного документа, с которого начинается загрузка сайта).

9. Просмотрите результат работы в браузере.

Практическое задание 2. Создание заголовков разных уровней.

1. Откройте файл index.html.

2. Сохраните файл index.html под именем urok2.html в папку stranica.

3. В файле urok2.html оформите текст «Первая web-страница будет посвящена исследованиям» в виде заголовка первого уровня.

4. Придумайте заголовки для оставшихся пяти уровней и оформите их (например, для заголовка второго уровня - текст «Так выглядит заголовок второго уровня»).

5. Сохраните изменения с помощью меню Файл, Сохранить. Просмотрите результат в браузере с помощью кнопки Обновить на панели инструментов браузера.

6. Расположите заголовок первого уровня по центру, второго уровня — слева, третьего уровня - справа. Сохраните изменения и просмотрите результат в браузере.

Практическое задание 3. Оформление горизонтальных и вертикальных линий.

В результате выполнения этого задания в файле urok2.html все заголовки будут отделены горизонтальными линиями. После выполнения каждого пункта задания просматривайте результат работы в браузере.

1. После заголовка первого уровня добавьте горизонтальную линию, расположив ее по центру. Высота линии - 6 пикселей, длина - 600 пикселей.

2. После заголовка второго уровня добавьте горизонтальную линию, расположив ее по левому краю. Высота линии - 20 пикселей, длина - 450 пикселей.

3. После заголовка третьего уровня добавьте горизонтальную линию, расположив ее по правому краю. Высота линии - 10 пикселей, длина - 350 пикселей.

4. После заголовка четвертого уровня добавьте горизонтальную линию высотой 100 и длиной 650 пикселей.

5. После заголовка пятого уровня добавьте горизонтальную линию высотой 150 и длиной 650 пикселей.

6. Проанализируйте результат выполнения двух предыдущих пунктов задания. Почему линии получились одинаковыми?

7. Всем горизонтальным линиям назначьте различные цвета по своему выбору.

8. Нарисуйте квадрат красного цвета высотой и длиной 60 пикселей, расположив его по левому краю.

9. Нарисуйте прямоугольник голубого цвета высотой 40 и длиной 120 пикселей.

10. Нарисуйте вертикальную линию пурпурного цвета высотой 100 и длиной 3 пикселя.

Практическое задание 4. Установка фона Web-страницы.

1. Откройте в Блокноте файл shablon.html.

2. Сохраните файл shablon.html в папку stranica под именем urok3.html.

3. Добавьте на web-страницу спецсимволы: §, ©, Ò, ", <, > и амперсенд (&).

4. Введите в теле HTML-документа текст: (см. карточку).

5. Задайте для web-страницы серебристый фон.

6. Задайте любой рисунок в качестве фона web-страницы (рисунок можно взять из файла в папке Windows или Мои рисунки, предварительно скопировав его в папку stranica).

7. Зафиксируйте фоновый рисунок, используя атрибут bgproperties.

Практическое задание 5. Форматирование абзацев и шрифтов.

1. Откройте в Блокноте файл shablon.html.

2. Сохраните файл shablon.html в папку stranica под именем urok4.html.

3. В файле urok4.html введите следующий текст: (см. карточку).

4. Просмотрите результат в браузере Что здесь не так? Где заголовки? Где элементы форматирования, которые были применены к тексту? Дело в том, что браузер не распознает элементы форматирования, сделанные в Блокноте. Поэтому нужно использовать теги. После каждого выполненного задания просматривайте результат в окне браузера, исправляя возможные ошибки.

5. Заключите каждый абзац в контейнер абзаца.

6. Первому заголовку («ГЛАВА 1. ОСНОВЫ СЕТИ ИНТЕРНЕТ») назначьте вид заголовка второго уровня, расположенного по центру.

7. Второму заголовку («Компьютерные сети») также назначьте вид заголовка второго уровня, но расположенного по левому краю.

8. Фразу «Виды компьютерных сетей» оформите шрифтом Impact, Lucida Console, Monotype Corvina или любым другим. Размер шрифта задайте равным 4.

9. К любым предложениям в тексте примените различные типы шрифта.

10. В конце всего текста поэкспериментируйте с заданием размера шрифта, добавив строки:

<FONT SIZE=1>Шрифт размера 1</FOHT>

<FONT SIZЕ=2>Шрифт размера 2</FONT>

<FONT SIZЕ=3>Шрифт размера 3</FONT>

<FONT SIZЕ=4>Шрифт размера 4</FOHT>

<FONT SIZЕ=5>Шрифт размера 5</FONT>

<FONT SIZЕ=6>Шрифт размера 6</FONT>

<FONT SIZЕ=7>Шрифт размера 7</FONT>

11. Все названия компьютерных сетей в тексте выделите полужирным шрифтом увеличенного размера.

12. В конце текста примените теги шрифтового выделения, показанные в таблице.

Практическое задание 6. Списки.

1. Откройте в Блокноте файл shablon.html.

2. Сохраните файл shablon.html в папку stranica под именем urok5.html.

3. Создайте маркированные списки:

Пример маркированного списка (круг).

• первый элемент списка.

• второй элемент списка;

• третий элемент списка

Пример маркированного списка (окружность).

o  текст

o  текст

o  текст

Пример маркированного списка (квадрат);

§  работоспособность всех ссылок

§  поддержку разных браузеров

§  читаемость текста

4. Создайте нумерованные списки:

Нумерация арабскими цифрами»

1. текст

2. текст

3. текст

Нумерация с 8

8. текст

9. текст

10.текст

Нумерация римскими цифрами

I. текст

II. текст

III. текст

Нумерация строчными римскими цифрами, начиная с 4:

IV. первый элемент списка

V. второй элемент списка

VI. третий элемент списка

Нумерация прописными латинскими буквами

A. текст

B. текст

С. текст

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

a. текст

b. текст

c. текст

5. Создайте вложенный список:

Вложенный список:

I. Заголовок 1

a. Раздел 1.1

b. Раздел 1.2

c. Раздел 1 3

II. Заголовок 2.

a. Раздел 2.1

b. Раздел 2.2

c. Раздел 2.3

III. Заголовок 3

a. Раздел 3.1

b. Раздел 3.2

c. Раздел 3.3

Практическое задание №7. Списки.

1. Откройте в Блокноте файл shablon.html.

2. Сохраните файл shablon.html в папку stranica под именем urok6.html.

3. Задайте в качестве заголовка Web-страницы слово «Таблицы».

4. Введите НТМL-код двух первых примеров создания таблиц, просмотрите ре­зультат в браузере.

Пример 1.

<HTML>

<HEAD>

<TITLE>Таблица из 4 ячеек</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=2>

<TR>

<TD>Ячейка 1</TD>

<TD>Ячейка 2</TD>

<TD>Ячейка 3</TD>

<TD>Ячейка 4</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Пример 2.

<HTML>

<HEAD>

<TITLE>Таблица из 3*4 ячеек</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=3>

<TR> <!--ПЕРВАЯ СТРОКА-->

<TD>Ячейка 1</TD>

<TD>Ячейка 2</TD>

<TD>Ячейка 3</TD>

<TD>Ячейка 4</TD>

</TR>

<TR> <!--ВТОРАЯ СТРОКА-->

<TD>Ячейка 5</TD>

<TD>Ячейка 6</TD>

<TD>Ячейка 7</TD>

<TD>Ячейка 8</TD>

</TR>

<TR> <!--ТРЕТЬЯ СТРОКА-->

<TD>Ячейка 9</TD>

<TD>Ячейка 10</TD>

<TD>Ячейка 11</TD>

<TD>Ячейка 12</TD>

</TR>

</TABLE>

</BODY>

</HTML>

5. Добавьте к созданной таблице название (заголовок) «Таблица 1», выровняв его по правому краю.

6. Создайте таблицу с названием «Таблица 2» и заголовками строк и столбцов; ячейкам с заголовками назначьте желтый фон:

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Ячейка 1

Ячейка 2

Ячейка 3

Заголовок 5

Ячейка 4

Ячейка 5

Ячейка 6

7. Создайте таблицу шириной 500 пикселей под названием «Таблица с объединенными столбцами» с объединенными столбцами:

Ячейка 1

Ячейка 2

Ячейка 3

Ячейка 4

Ячейка 5

Ячейка 6

8. В созданной таблице выровняйте содержимое ячеек 2 и 6 по центру, а содер­жимое ячеек 4 и 5 - по правому краю.

9. Создайте таблицу шириной 450 и высотой 150 пикселей:

Ячейка 1

Ячейка 2

Ячейка 3

Ячейка 4

Ячейка 5

Ячейка 6

Ячейка 7

Ячейка 8

Ячейка 9

Ячейка 10

10. Выровняйте содержимое всех ячеек по центру (как по вертикали, так и по горизонтали). Расположите таблицу по правому краю относительно окна браузера.

Материал для самостоятельной работы

Основные теги языка HTML. Оформление сайта с помощью файлов CSS

Задание 1.

Создайте папку Project 3.

Создайте в ней страницу, которая содержит текст различных видов:

1)  заголовки уровней от 1 до 4

2)  списки – нумерованные и маркированные

3)  текст-параграф

4)  текст-ссылка по метке.

5)  текст-цитата

6)  таблица из 3-строк и 2-х столбцов, в каждой ячейке разместить информацию.

Справочная информация о тегах.

Для текста:

Тег заголовка - <H№>Текст заголовка</H№> . Где № - номер заголовка. От 1 до 6.

Цитата <BLOCKQUOTE>Тот текст, который надо цитировать</BLOCKQUOTE>

Текст, обозначенный тэгом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов.

Тэг абзаца <P>Абзац</P>

Тэг <BR> извещает броузер о разрыве строки. Тег одинарный.

Для задания стандартных цветов.

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX">

где: BGCOLOR цвет фона документа, TEXT цвет простого текста документа, LINK цвет ссылки

Для задания гиперссылок.

<A HREF="URL"> текст-ссылка </A>

URL – можно указывать адрес документа или адрес e-mail. Примеры:

<a href="c:\home\temp. doc" target="_blank">Загрузка файла</a>

Открывает файл temp. doc из каталога /home на пользовательской машине в новое окно.

<a href="mailto:*****@***ru">Отправьте почту!</a>

активизирует сессию посылки сообщения на адрес *****@***ru,

Target=" " – параметр, определяет в какое окно будет загружена страница. Может принимать значения названий фреймов. Пример:

<FRAMESET ROWS="20,*">
<FRAME SRC="doc2.htm" NAME="Frame1">
<FRAME SRC="doc3.htm" NAME="Frame2">
</FRAMESET>

Задание фреймов

<A HREF="mydoc. html" TARGET="Frame1"> Переход в фрэйм № 1 </A>

Атрибут TARGET позволяет произвести вывод документа в другой фрэйм

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

1.  Создайте маркер раздела. Синтаксис следующий: <A NAME="named_anchor"></A>

2.  Создайте ссылку на данный маркер: <A HREF="#named_anchor"> Текст </A>

Где named_anchor – имя метки.

Задание 2.

1.  Скопируйте файлы primer. css, headline. css из папки Lab_HTML+CSS, в свою папку Project 3.

2.  Определите для созданной страницы index. htm стиль из файла headline. css.

3.  Измените для страницы index. htm стиль на primer. css. Что получилось?

4.  Откройте файл primer. css в своей папке и выполните следующие задания:

4.1.  Измените параметры заголовка H3- цвет, размер, шрифт.

4.2.  Измените цвет фона страницы на более светлый.

4.3.  Измените цвет ссылок при наведении на них курсора на оранжевый.

4.4.  Задайте для текста типа Параграф (<P></P>) – цвет – синий, размер – средний, шрифт Times New Roman, выравнивание – по ширине, отступ слева – 16px..

4.5.  Задайте для всех таблиц цвет границы - темно-зеленый, стиль рамки - тонкий.

4.6.  Сохраните ваш файл стиля как myprimer. css.

5.  Определите для созданной страницы index. htm стиль из файла myprimer. css.

6.  Позовите преподавателя.

Дополнительные задания.

Отредактируйте файл myprimer. css, таким образом, чтобы:

1)  Все маркированные списки по умолчанию были помечены символом «квадрат», цвет – Teal, отступ на 20px на более светлом фоне, чем основной фон страницы. (1 балл)

2)  Все цитаты были красного цвета, более мелким шрифтом (small), стиль шрифта – наклонный. (1 балл)

Справочная информация о стилях.

Пример подключения файла стиля CSS в документе HTML.

<head>

<link rel=stylesheet href="primer. css">

</head>

Примеры конструкций языка CSS.

A {text-decoration: none; color: Fuchsia; }

Определяет стиль для всех гиперссылок

A:Hover {text-decoration: underline;color: #32CD32;}

Определяет стиль ссылки при наведении на нее курсора мыши

A:VISITED { font-style : italic; font-size : 12 px; color : Purple;}

Определяет стиль посещенной ссылки.

BODY { background: #F0F8FF; color : Navy; font-family : Arial, sans-serif; font-size: 14px; text-align: justify;}

Определяет параметры страницы: цвет фона - #F0F8FF, цвет текста - Navy, какие будут использованы шрифты, размер текста по умолчанию - 14, выравнивание текста по ширине.

H1, H2, H3, H4 {background-color: black; color: white;}

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

TABLE, TD { border: thin solid Red; background-color: #F0FFFF;}

Для таблиц и всех ячеек определен стиль с тонкой, сплошной границей красного цвета и цветом фона #F0FFFF.

P {text-align : justify; font-size: medium; font-family: "Arial"; padding-left: 18px;}

Задание стиля для текста типа Параграф. Размер – средний, шрифт Arial, выравнивание – по ширине, отступ слева на 14 px.

КИМ для самоконтроля:

Тестовые задания

Выберите вариант ответа, наиболее полным образом завершающего утверждение.

1.   HTML - это

1. программа просмотра WWW-документов; 2. прикладная программа;

3. язык разметки гипертекстов; протокол взаимодействия клиент-сервер.

2.   В HTML можно использовать

1. текст в ASCII–формате; 2. текст любого формата и графические рисунки;

3. любые мультимедиа-файлы; 4. любые типы данных.

3.   Для чего служат в HTML символы <HEAD><TITLE> </TITLE></HEAD>?

1. для выделения абзаца; 2. для выделения параграфа, пункта;

3. для выделения глав; 4. для выделения заголовка.

4.   Какими символами в HTML основной текст отделяется от сопроводительного?

1. <TITLE></TITLE>; 2. <H1></H1>; 3. <BODY></BODY>; 4. <P></P>.

5.   Как в HTML описывается ссылка на другой документ?

1. <A HREF="имя файла"></A>; 2. с указанием их URL;

3. <A NAME="имя файла"></A>; 4. <UL><LI></UL>.

6.   Как в HTML записываются ссылки на документы, хранящиеся на других серверах?

1. с указанием их URL; 2. <UL><LI></UL>;

3. <A NAME="имя файла "></A>; 4. <A HREF="имя файла"></A>.

7.   Как в HTML задается форматирование положения рисунка?

1. <IMG SRC= >; 2. "ALIGN="; 3. <URL>; 4. <HR>.

Правильные ответы

№

a

b

c

d

1

X

2

X

3

X

4

X

5

X

6

X

7

X

Основная учебная литература по теме

1.  Информатика. Учебное пособие. Под редакцией Симоновича, С-Пб., 2000.

2.  , Практикум по компьютерной технологии. М., АБФ, 98.

3.  Могилев А. В., , Информатика. Под редакцией Хеннера, М., Академия, 2000.

4.  , , Практикум по информатике. М., Академия.

5.  , и др. Информатика: Задачник-практикум. – М.: Лаборатория базовых знаний, 1999. – Т. 1, 2.

6.  и др. Специальная информатика: Учебное пособие. – М.: АСТ-ПРЕСС: Инфорком-Пресс, 1999.

7.  Информатика и информационные технологии. Уч. Пособие для 10-11 классов. Углубленный курс. – М.: Лаборатория Базовых Знаний, 2000. – 440 с.: ил.

8.  Информатика и информационные технологии. – М.: Лаборатория базовых знаний: АО «Московские учебники», 2002.

Оригинал-макет и компьютерная верстка:

, ,

методисты отдела информационных технологий

663606, 5

,

E-mail: *****@***ru

Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16