Лабораторная работа №2 Работа с текстом

Лабораторная работа №2.
Работа с абзацем и шрифтами. Мнемоники.
Цели:
научиться использовать заголовки различных уровней
научиться использовать абзацы, горизонтальные линии, «бегущие» строки
научиться работать со шрифтами
научиться использовать мнемоники
Заголовки: элементы H1, H2, H3, H4, H5, H6
Описание: описывают шесть уровней заголовков: от H1 (самый верхний) до H6 (самый нижний).
Начальный тег: необходим
Конечный тег: необходим
Определения атрибутов:
align = left|center|right|justify – выравнивание текста: left – выравнивание по левому краю, center – по центру (по умолчанию), right – по правому краю, justify – выравнивание по правому и левому краям.
Примеры:

Заголовок первого уровня


Печатается заголовок первого уровня.

Заголовок второго уровня


Печатается заголовок второго уровня, выровненный по центру.


Параграфы: элемент P
Описание: представляет параграф
Начальный тег: необходим
Конечный тег: не обязателен
Определения атрибутов:
align = left|center|right|justify – выравнивание текста
Примеры:

Первый абзац.
Печатается первый абзац.

второй абзац.
Печатается второй абзац, выровненный по левому краю.


Форсирование обрыва строки: элемент BR
Описание: принудительно обрывает (оканчивает) текущую строку текста, но абзац не заканчивается.
Начальный тег: необходим
Конечный тег: запрещён
Пример:

Первая строка абзаца

Печатает абзац такого вида:
Первая строка абзаца
Вторая строка абзаца.

Вторая строка абзаца.



Изменение шрифта текста: элемент FONT
Описание: определяет вид, размер и цвет шрифта для текста.
Начальный тег: необходим
Конечный тег: необходим
Определения атрибутов:
size = number – устанавливает размер шрифта. Возможные значения:
Целое число от 1 до 7. Устанавливает шрифт в определённый фиксированный размер, представление которого зависит от браузера пользователя.
Относительное увеличение размера шрифта. "+1" означает: на один размер больше. "-3" означает: на три размера меньше. Все размеры находятся в пределах шкалы от 1 до 7
color = color – устанавливает цвет текста
face = string – задает имя шрифта
Пример:
Строка
Печатает слово «Строка» черным цветом, шрифт «Tahoma» размером 1.




Элементы стиля шрифта:  TT, I, B, BIG, SMALL, STRIKE, S и U
Описание:
TT: моноширинный текст, телетайп.
I: курсив.
B: полужирный.
BIG: "большой" шрифт.
SMALL: "малый" шрифт.
STRIKE и S: зачёркнутый текст.
U: подчёркнутый.
Начальный тег: необходим
Конечный тег: необходим
Примеры:
bold
полужирный

italic
курсив

bold italic
полужирный курсив

teletype text
телетайп

big
"большой" шрифт

small
"малый" шрифт


Подиндекс и надиндекс: элементы SUB и SUP
Описание: переводит текст в нижний и верхний регистр
Начальный тег: необходим
Конечный тег: необходим
Примеры:
H2O
H2O

E = mc2
E=mc2


Бегущая строка: элемент MARQUEE
Описание: создания бегущей строки
Начальный тег: необходим
Конечный тег: необходим
Определения атрибутов:
bgcolor = color –цвет фона бегущей строки
loop = number – число повторов анимации бегущей строки (значение может быть целым или infinite – текст будет продолжать бегать пока читатель не перейдет на новую страницу)
direction = left|right|up|down – определяет направление: left (по умолчанию) – справа налево, right – слева направо, up – снизу вверх, down – сверху вниз.
scrollamount = number – скорость движения строки. (Рекомендуется ставить скорость "1", в этом случае строка выглядит более удобочитаемо и не дёргается).
scrolldelay = number – задаёт временной интервал между шагами бегущей строки.
width = number – ширина бегущей строки в пикселях.
height = number – высота бегущей строки. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).
Примеры:
Бегущая строка
Надпись «Бегущая строка» двигается влево

Бегущая строка
Надпись «Бегущая строка» двигается вправо со скоростью равной 1 и с временным интервалом 20.


Горизонтальные линии: элемент HR
Описание: описывает горизонтальную линию
Начальный тег: необходим
Конечный тег: запрещён
Определения атрибутов:
align = left|center|right – определяет горизонтальное выравнивание линии.
size = number – определяет высоту линии.
width = number – определяет ширину линии. Значение может быть числовым и в процентах от ширины окна браузера.
color = color – устанавливает цвет линии.
Примеры:



Линия, расположенная по центру и шириной 50% от размера окна.



Красная линия, расположенная слева, высотой 5 точек и шириной 100 точек.


Мнемоники (символы по ссылке, по псевдониму)
Конкретная кодировка может н
·е давать возможность отобразить все символы набора символов документа. Для таких кодировок, или если конфигурация "железа" или программного обеспечения не позволяют пользователю непосредственно вводить некоторые символы, можно использовать ссылки на символы. Ссылки на символы - это механизм для ввода любых символов, не зависящий от кодового набора документа.
Ссылки на символ (мнемоники) могут быть двух видов:
Цифровые мнемоники  (десятеричные или шестнадцатеричные).
Мнемоники из символьных элементов.
Цифровые мнемоники
Цифровые ссылки-мнемоники на символы определяют кодовую позицию символа в символьном наборе документа. Цифровые мнемоники бывают двух видов:
"&#D;", где D, десятеричное число, ссылается на десятеричное значение D символа ISO 10646.
"&#xH;" или "&#XH;", где H, шестнадцатеричное число, ссылается на шестнадцатеричное значение H символа ISO 10646. Шестнадцатеричные числа в цифровых мнемониках нечувствительны к регистру.
Вот несколько примеров цифровых мнемоник:
å
(10-ная) представляет букву "a" с маленьким кружком сверху (используется, напр., в Норвегии)

å
(16-ная) та же самая буква

å
(16-ная) то же самое

И  
(10-ная) русская "И" заглавная


(16-ная) китайский "водяной" символ


Символьные ссылки-мнемоники (по псевдониму)
Чтобы предоставить авторам более интуитивный способ ссылки на символы в символьном наборе документа,  HTML предлагает символьные ссылки-мнемоники. Символьные мнемоники используют псевдонимы, так что авторы могут не запоминать кодовую позицию. [ Cкачайте файл, чтобы посмотреть ссылку ]Например, символьную мнемонику å ссылающуюся на "a" с кружком сверху, "å" запомнить легче, чем å.
HTML не определяет символьные мнемоники для всех символов кодового набора. В частности, нет символьной мнемоники для русской заглавной "И".
Символьные мнемоники чувствительны к регистру. Так, Å ссылается на другую букву (A с кружком в верхнем регистре), а не на å (а с кружком в нижнем регистре).
Примеры:
<
знак <

>
знак >

&
знак &

"
знак "

©
Знак «копирайт»

®
Знак «зарегистрирован»

Автор, желающий использовать символ "<" в тексте, должен записать "<" (ASCII десятичная 60), чтобы избежать возможных конфликтов с началом тега (стартовый ограничитель тега). Так же автор должен использовать и ">" (ASCII десятеричная 62) вместо ">", чтобы избежать конфликтов со старыми браузерами, которые некорректно распознают это как конец тега (закрывающий ограничитель тега), если он появляется в значении атрибута в кавычках.
Некоторые авторы используют символьную мнемонику """ для кодирования появление двойных кавычек ("), поскольку этот символ используется как ограничитель в значениях атрибутов.

Задания.
Запустить программу Блокнот и открыть документ index.html.
Изменить документ так, чтобы надпись «Программирование в КС– название Вашей специальности» была заголовком первого уровня и выровнена по центру.
Добавить в документ вывод своей фамилии, имени, отчества как заголовок второго уровня с выравниванием по центру.
Добавить в документ параграф: Привет, меня зовут . Я учусь на . Сейчас мы изучаем язык HTML (Hypertext Markup Language).
Добавить в документ параграф: Страничка создана <ваше имя>, выровненный по правому краю. Дописать знак «копирайт».
Добавить в документ параграф: Мой адрес , выровненный по правому краю.
Добавить в документ параграф: По всем вопросам обращаться по адресу. (здесь можно вставить адрес своей электронной почты)
Установить для слова Привет размер 5, цвет – желтый.
Для всего оставшегося параграфа: размер 4, цвет – maroon.
После слова привет вставить принудительный обрыв строки
Для 3 последних абзацев установить шрифт: размер 2, цвет – зеленый.
Для слова Привет установить шрифт Impact.
Для своей фамилии, имен, отчества установить шрифт Arial Black.
Подчеркнуть фамилию, имя, отчество.
Слово Привет написать курсивом.
Жирным шрифтом выделить название специальности.
Строку с электронным адресом выделить «маленьким» шрифтом.
Строку Страничка создана выделить «большим» шрифтом.
Слово HTML зачеркнуть.
После слова HTML добавить предложение: Еще мы знаем немного математики, например, разность кубов вычисляется по формуле: a3-b3=(a-b)*(a2+ab+b2), а сумма членов арифметической прогрессии равна: Sn=(a1+an)/2.
Для первого абзаца увеличить левое поле.
Сделать строку «Программирование в КС» бегущей, установив цвет фона gray, ширину подобрать таким образом, чтобы она равнялась длине строки.
Сделать строку Фамилия, имя, отчество бегущей, установив цвет фона gray, направление слева направо.
Нарисовать линию на всю ширину экрана под надписью Горно-керамический колледж – программирование в КС.
Нарисовать линию высотой 3 точки перед строкой Страничка создана










Заголовок 2 Заголовок 315

Приложенные файлы

  • doc 15144923
    Размер файла: 89 kB Загрузок: 0

Добавить комментарий