Примечание.
После внесения изменений в веб-страницу достаточно сохранить изменения (Ctrl+S) и обновить страницу браузера (F5), чтобы увидеть результат.
В конец тела документа добавьте следующую строку…
Придайте словам смешанное форматирование «по словам»:
Аналогичным образом самостоятельно опробуйте побуквенное выделение тегами физического форматирования фразу «Слово – не воробей», где буква:
«С» – жирная, курсивная;
«л» – курсивная;
«о» – жирная;
«в» – подчеркнутая;
«о» – жирная, зачеркнутая.
С помощью тегов <BIG></BIG и <SMALL></SMALL> сделайте слово «Слово» больше, а слово «воробей» – меньше. Целиком, а не побуквенно!
Конец задания.
<FONT></FONT> – изменение цвета, типа, размера шрифта.
Атрибуты тега <FONT ></FONT>
SIZE –определяет размер шрифта. Возможные значение – от 1 до 7.
COLOR – определяет цвет текста. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
FACE –определяет используемый шрифт. Используйте Times New Roman, Arial, Tahoma, Courier, Courier New. Они установлены почти у всех. Иначе гарантий нет!
Это обычный текст <br>
<FONT SIZE="+2" COLOR="red"> Увеличенный красный шрифт </FONT> <br> <FONT SIZE="3" FACE="Courier New" COLOR="Violet"> Моноширинный фиолетовый текст 3 размера </FONT>
Если написано SIZE="+2" то это означает увеличить на 2 единицы шрифт по сравнению со стандартным. Обычно стандартный размер шрифта равен 3.
| Названия цветов, поддерживаемых всеми браузерами | |||||||
| Имя ц. | Цв. | Описание | 16 знач. | Имя ц. | Цв. | Описание | 16 знач. |
| aqua | Голубой | #00ffff | navy | Темно-синий | #000080 | ||
| black | Черный | #000000 | olive | Оливковый | #808000 | ||
| blue | Синий | #0000ff | purple | Фиолетовый | #800080 | ||
| fuchsia | Фуксия | #ff00ff | red | Красный | #ff0000 | ||
| gray | Серый | #808080 | silver | Св.-серый | #c0c0c0 | ||
| green | Зеленый | #008000 | teal | Сине-зел. | #008080 | ||
| lime | Св.-зеленый | #00ff00 | white | Белый | #ffffff | ||
| maroon | Тем.-красный | #800000 | yellow | Желтый | #ffff00 |
Примечание: В дальнейшем (после изучения CSS) лучше вообще все, что связано с типом, размером и цветом шрифта делать через таблицы стилей. Это гораздо удобнее, тем более что некоторые элементы форматирования текста расположенные внутри элемента FONT, работают некорректно в определённых ситуациях.
Задание 2. Установка гарнитуры и цвета шрифта
С помощью программыБлокнот создайте файл lab2zad2.html
Изучите и наберите приведенный ниже код. Сохраните файл с кодировкой UTF-8.
Поэкспериментируйте с цветами и гарнитурами (гарнитура должна поддерживать шрифт русского языка).
В конец тела документа добавьте абзац «Нас утро встречает прохладой».
Используя теги физического форматирования текста, поэтапно оформите фразу по приведенному ниже образцу (фон останется белый):
Нас утро встречает про хлад ой
Сначала задайте гарнитуру текста и начертание отдельных слов и букв.
Результат à 
3.2. Затем задайте цвет самой первой цветной букве. Проверьте результат: буква «у» в слове «утро» должна стать красного цвета.
Самостоятельно задайте цвет остальным буквам и фрагментам слов (нескольким буквам за раз).
Примечание: В слове УТРО все буквы должны иметь разные цвета. В слове ПРОХЛАДОЙ оформить буквы ПРО – красным цветом, ОЙ – синим.
Результат представлен ниже.
Конец задания.
<MARQUEE></MARQUEE> – бегущая строка.
Атрибуты тега <MARQUEE></MARQUEE>:
BEHAVIOR –способ движения содержимого
<marquee behavior="alternate | scroll | slide">...</marquee>
alternate –между правым и левым краем элемента.
scroll – содержимое перемещается в направлении, заданным атрибутом direction, скрывается за пределами области, после чего начинает движение с начала.
slide – в направлении, заданным атрибутом direction, с остановкой в конце.
DIRECTION – направление движения
<marquee direction="down | left | right | up">...</marquee>
LOOP – число повторов (loop=”-1” – бесконечно)
SCROLLAMOUNT – скорость движения (в пикселях)
SCROLLDELAY – задержка перед повторением (в мс.)
TRUESPEED – отмена встроенного ограничителя скорости
BGCOLOR – цвет фона
WIDTH – ширина области прокрутки (пиксели или %)
HEIGHT – высота области прокрутки (пиксели или %)
HSPACE – горизонтальные поля
VSPACE – вертикальные поля
Задание 3. Использование индексов и бегущей строки
С помощью программыБлокнот создайте файл lab2zad3.html
Сохраните файл с кодировкой UTF-8.
Самостоятельно создайте нижеприведенную страничку, в которой к тексту будут применены теги для создания нижнего индекса <SUB></SUB> и верхнего индекса <SUP></SUP>.
А теперь с помощью тега <MARQUEE></MARQUEE> сделайте так, чтобы в начале страницы пробегала бегущая строка с надписью «Я Вас люблю, чего же боле, но всё же Вам хочу сказать, что надо знать…» с бесконечным числом повторов (атрибуту loop присвоить значение -1 минус один).
Результат:
Конец задания.
Тег <PRE></PRE>
<PRE></PRE> – тег преформатирования, который позволяет представлять текст со специфическим форматированием на экране. Внутри такого текста разрешается использовать: перевод строки; символы табуляции; непропорциональный шрифт, устанавливаемый браузером.
Использование тегов, определяющих формат абзаца, будет игнорироваться браузером при помещении их между тегами <PRE> и </PRE>.
Пример:
| <HTML> <TITLE>Пример преформатированного текста</TITLE> <BODY> <H1>Супер-технологии</H1> <H2>Продажа по округам</H2> <PRE> <I>Продукт Запад Юг Восток Север</I> ------------------------------------------------- Униформа 10.012 13.100 26.831 9.738 Генераторы 32.844 8.393 12.294 13.851 Симуляторы 45.841 20.558 33.285 29.100 Итого 88.697 42.051 72.410 52.689 </PRE> </BODY> </HTML> |
Теги логического форматирования текста
Логическое форматирование выделяет структурные типы текстовых фрагментов сайта, такие, например, как программный код, цитата, аббревиатура и т.д., и указывает браузерам (поисковикам, др. программам) какой тип текста или данных находится в выделенном фрагменте. Некоторые браузеры визуально изменяют текст точно так же, как и теги для физического форматирования, некоторые – по-своему. При этом, вид отображения текста при выделении тегами логического форматирования можно задать произвольно, прописав в стилях.
Грамотное применение логического форматирования влияет на успешное «восприятие» поисковыми системами именно Вашего сайта, «понимание» его логики и предназначения, а, следовательно, и на то, увидит ли конечный пользователь сайт на свой запрос, и как близко к началу результатов. Физическое же форматирование (просто внешний вид) поисковыми системами и др. программами игнорируется.
Рассмотрим некоторые из тегов…
<STRONG></STRONG> – выделяет особенно важный фрагмент текста (обычно полужирный).
<EM></EM> – выделяет важный фрагмент текста (обычно курсив).
<CODE></CODE> – отмечает текст как некий программный код.
<SAMP></SAMP> – обозначает текст, который выводится на экран в результате работы какой-либо программы.
<KBD></KBD> – обозначает текст, вводимый с клавиатуры, или для названия клавиш.
<VAR></VAR> – выделяет текст, как переменную в работе какой либо программы.
<CITE></CITE> – выделяет в тексте цитату или сноску на другой документ.
<Q></Q> – выделяет в тексте цитату. В отличие от тега <cite> цитата автоматически берётся браузерами в кавычки.
<ABBR></ABBR> – выделяет в тексте аббревиатуру.
<ACRONYM></ACRONYM> – выделяет в тексте акроним.
<DFN></DFN> – выделяет текст как определение, новый термин.
<ADDRESS></ADDRESS> – указывает автора документа и его адрес.
<DEL></DEL> – выделяет удалённый (перечеркнутый) текст в новой версии документа.
<INS></INS> – выделяет новый (подчеркнутый) текст в новой версии документа.
Практически ко всем тегам применим атрибут TITLE – всплывающая подсказка.
Задание 4. Теги логического форматирования
С помощью программыБлокнот создайте файл lab2zad4.html
Сохраните файл с кодировкой UTF-8.
Самостоятельно создайте страничку, используйте теги заголовка первого уровня, абзаца, физического (только для первой строки текста) и логического форматирования текста, реализуйте следующую страницу.
Конец задания.
Общие советы по оформлению текста.
Для начала, разбейте весь Ваш текст на параграфы с помощью тега <p> – это облегчит чтение как для людей, так и для программ, кроме того, позволит Вам в дальнейшем легко управлять текстом. Старайтесь не оставлять "голые" слова и предложения, не взятые в какой-либо тег форматирования текста, хотя бы абзац.
Соблюдайте значимость заголовков <h1>-<h6> т.е. заголовок страницы берите в тег <h1>, подзаголовки в тег <h2>, еще менее значимые подзаголовочки в тег <h3> и т.д. В идеале на странице должен быть всего один заголовок <h1>, потом текст разбивается несколькими <h2> и далее по значимости заголовков.
Используйте теги логической разметки лишь там, где они действительно необходимы, т.е. не стоит, например, выделять аббревиатуру с помощью цитаты и наоборот.
Используйте <em> и <strong> в тех случаях, когда Вы хотите акцентировать внимание на тексте не только людей, но поисковых систем, в иных ситуациях используйте <b> и <i>.
Задание 5. Энциклопедия
Самостоятельно создайте отдельный файл lab2zad5.html. Сохраните файл с кодировкой UTF-8. Используя уже изученные теги абзаца (с выравниванием), физического форматирования текста и escape-последовательности, реализуйте следующую страницу:
Подсказка: список escape-последовательностей вы можете найти вот здесь (клик): https://ru.wikipedia.org/wiki/%D0%9C%D0%BD%D0%B5%D0%BC%D0%BE%D0%BD%D0%B8%D0%BA%D0%B8_%D0%B2_HTML
Исходный текст, который вы можете не перенабирать, а скопировать:
ЛИТИЯ ГЕКСАФТОРОАРСЕНАТ LiAsF6, крист.; tразд 350С хорошо раств. в воде и орг. р-рителях. Получ. взаимод. AsF5 с LiF в жидком HF или р-цией др. соед. As с HF-кислотой. Компонент электролитов (на основе орг. р-рителей) для хим. источников тока, кат. полимеризации олефинов.
ЛИТИЯ ГИДРИД LiH, tпл 688С с водой образует LiOH и H2. Получ.: гидрирование Li ок. 700С или при давл. 12 МПа и ок. 300С восст. Li2O или LiOH алюминием или магнием в атм. H2. Примен.: источник H2 для наполнения аэростатов и спасат. снаряжения — надувных лодок, поясов и др.; восстановитель в орг. синтезе; для получ. литийорг. соед., бороводородов, LiAlH4 и LiBH4, трития.
ЛИТИЯ ГИДРОКСИД LiOH, tпл 471С, tкип 925C (с разл.).; раств. в воде (11,14% при 25С), плохо — в орг. р-рителях; образует кристаллогидраты. Получ.: взаимод. Li или Li2O с водой; р-ция соли Li с Ba(OH)2 или Ca(OH)2; электролиз LiCl на ртутном катоде. Примен.: компонент электролитов в щел. аккумуляторах; для получ. солей Li; поглотитель CO2 в противогазах, подводных лодках, самолетах и космич. кораблях. Вызывает тяжелые ожоги кожи и слизистых оболочек.