1.2. Практические задания по теме: задания 1…10.
Задание 1-1.
1). Открыть в папке Prakt1 файл bmt1.txt. Обратить внимание на размещение тегов < html> … < /html> и < body> … < / body>) в тексте документа, а также на вид (формат) текста документа, отображаемый в блокноте.
2). Сохранить исходный файл с тем же именем, но в формате *.html и просмотреть в браузере. Обратить внимание на то, что текст полученного html-документа не форматирован.
3). Открыть файл bmt1.html в блокноте , заключить каждую его текстовую строку в парный тег «параграф» < p> … < /p> и сохранить результат как файл bmt1-1.html. Открыть полученный файл в браузере и убедиться, что теперь текст стал построчным, то есть каждая строка ведет себя как абзац.
4). Ввести в документ следующую служебную информацию:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type"content="text/html;charset=windows-1251"> и сохранить эти изменения.
Данный текст определяет формат представления текста в браузерах и задает настройки, необходимые для корректного функционирования html-документа в интернете.
Задание 1-2.
1). Внести в документ парный тег< head>…< / head > перед тегом < body>, в который заключить парный тег заголовка документа < title> как < title> кафедра ПР-3< /title>, сохранить результат в файле bmt1-2.html и убедиться, что в строке заголовка браузера появился текст «кафедра ПР-3»
2). Применить к двум строкам, следующим за строкой заголовка, соответственно парные теги < h2> и < h1>. Сохранить изменения и просмотреть результат в браузере.
(По умолчанию шрифт текста имеет размер h3. С увеличением номера размер (высота) шрифта уменьшается, максимальный размер h1).
3). Применить к тем же строкам соответственно теги < I> и < B>. Сохранить изменения и просмотреть результат в браузере.
(Теги < I> и < В> устанавливают соответсвенно атрибуты «наклонный шрифт» и «полужирный шрифт»).
4). Удалить парный тег для строк блока < head> … < / head >, сохранить результат и убедиться, что формат документа не изменился.
( При наличии парных тегов, задающих размер шрифта тег «абзац» («параграф») становится избыточным).
Задание 1-3.
1). Применить к двум строкам документа, следующим сразу за тегом < /title>, атрибут выравнивания align=center, сохранить результат как файл bmt1-3.html и проверить в браузере.
( Здесь получим выравнивание по центру и подчеркнутый шрифт. Возможны другие виды выравнивания: left - слева, right - справа, justify - по ширине).
2). Применить к остальному тексту, лежащему ниже, атрибут text=blue, сохранить и проверить результат.
(Цвет шрифта ниже заголовка изменится на голубой. По умолчанию он черный).
Задание 1-4.
1). Вставить в документ, сразу после закрывающего тега </head> стиль: <body bgcolor=#ECE9D8 text=blue >, сохранить результат как файл bmt1-4.html и проверить в браузере.
2). Применить к строке «Кафедра готовит специалистов по биомедицинской технике» стиль: <p style="font-style:italic; font-size:150%; text-align:center">, сохранить и проверить результат.
(Стиль: шрифт – наклонный, размер шрифта – 200%, выравнивание–по центру).
3). Применить к следующей строке стиль: <p style="color:red; font-size:200%; text-align:jastify">, сохранить и проверить результат.
(Стиль: цвет - красный, размер шрифта - 200%, выравнивание – по ширине).
Задание 1-5.
1). В тексте документа оформить фрагмент текста: «Схемотехническое направление… создание методов и первичных преобразователей для биомедицины», применив к нему стиль: <p style="color:#003399; font-size:150%; text-align:left">, сохранить результат как файл bmt1-5.html и проверить в браузере.
(Стиль: цвет в соответствии с кодом, близкий к фиолетовому, размер шрифта – 150%, выравнивание – слева).
2). Сделать строки того же абзаца приблизительно одинаковой длины с помощью тега <BR>, создающего новую строку, сохранить результат и проверить в браузере.
Задание 1-6.
1). Применить к строке «Содержание направлений подготовки» стиль:
<p style="color:green; font-size:180%; text-align:center">сохранить и проверить результат.
(Стиль: цвет – зеленый, размер шрифта - 180%, выравнивание –по центру).
2). Увеличить длину строки «Специальность «Биотехнические аппараты и системы» с помощью 15 знаков неразрывного пробела   непосредственно в ее начале, сохранить результат как файл bmt1-6.html и проверить в браузере.
3). Заключить теги   неразрывного пробела в тег комментария <!-- … -->, сохранить результат и проверить в браузере.
(Для html-текста, заключенного в теги комментария, действие языка html отменяется).
Задание 1-7.
1). Применить блочный тег <div> … </div> к фрагменту текста, следующему сразу после строки «Содержание направлений подготовки»: от фразы «Цикл дисциплин схемотехнического направления» до фразы «Информационно-программистское направление».
2). К этому блоку применить стиль <p style="color:black; font-family:
Arial black; font-size:12pt; word-spacing:20px; letter-spacing:5px">.
3). Заменить в каждой строке блока теги <BR> на <br\>.
4). Сохранить результат как файл bmt1-7.html и проверить в браузере.
(Атрибут word-spacing:20px – устанавливает указанный межсловный интервал, атрибут letter-spacing:5px – задает межбуквенный интервал).
Задание 1-8.
1). Применить к названию раздела «Информационно-программистское направление» стиль: <p style="color:green; font-size:18pt; text-indent:2em">, сохранить результат как файл bmt1-8.html и проверить в браузере.
(Атрибут text-indent:2em – задает абзацный отступ).
2). К содержимому этого раздела применить отступ 4em и цвет brown, сохранить результат и проверить в браузере.
3). В строках 1-го абзаца «Направления и цели подготовки» и «В рамках специальности «Биотехнические аппараты и системы» кафедра ведет подготовку по следующим трем направлениям» увеличить шрифт на один уровень (с помощью тега <big>).
4). После указанных строк ввести разделитель (тег <HR>) по горизонтали, сохранить результат и проверить в браузере.
5). Оформить последний абзац документа как блок <div> … </div> и применить к нему стиль: <p style="color:indigo; font-size:24pt; text-indent:6em">
Задание 1-9.
1). В заголовочной части документа определить стиль (после тега <title/>) типа text/css, дав ему имя «ramka» и присвоив следующие параметры: размер шрифта 24pt, цвет indigo, красная строка 6em.
(font-size:24pt; color:indigo; text-indent:6em;)
2). При определении стиля определить также наличие рамки для планируемого блока текста с параметрами: рамка сплошная, красного цвета, ширина блока в рамке 900px, высота блока – 320 px, отступ для текста внутри рамки от ее границы 50px.
(<style type="text/css"> p#ramka{font-size:24pt; color:indigo; text-indent:6em; border:2px solid red; padding:10px; width:900px; height:320px)
Рис.1.1. Веб-страница документа bmt1-10.html (начало).
Рис.1.1. Веб-страница документа bmt1-10.html (окончание).
3). Применить стиль «ramka» к последнему абзацу, сохранить результат как файл bmt1-9.html и проверить в браузере.
(<p id="ramka"> … </p>)
Задание 1-10.
1). Применить к блоку текста, помещенному в рамку, атрибуты позиционирования: левая граница 250px, нижняя граница 100px. Cохранить результат как файл как файл bmt1-10.html и проверить в браузере.
(margin-left: 250px, margin-bottom: 100px)