Веб-Самоделкин. Как самому создать сайт быстро и профессионально
Шрифт:
На данном рисунке представлены настройки шрифта, которые используются в программе по умолчанию. Если вы хотите применить какой-то другой шрифт – выделите в программном коде соответствующий фрагмент текста, после чего нажмите кнопку Шрифт и укажите настройки (тип шрифта, его начертание, размер, и др.). После нажатия в данном окне кнопки ОК выделенный текстовый фрагмент будет заключен в контейнер между тегами <font> </font>. Причем эти теги будут задействованы с соответствующими выполненным настройкам атрибутами, регламентирующими тип шрифта, его цвет и иные параметры (например, как в листинге 2.1).
Листинг 2.1.
<body>
<font size="4" face="Terminal" color="Black" >Этот файл создан для примера </font></body>
В данном случае настройки шрифта применены к тексту Этот файл создан для примера.
Справа от кнопки Шрифт находится четыре кнопки, предназначенные для выравнивания выделенного текстового блока соответственно по центру, по левому краю, по правому краю и по ширине (названия этих кнопок отображаются в виде всплывающих подсказок при подведении к ним указателя мыши). При нажатии любой из них в программный код страницы будут внесены соответствующий изменения.
Далее следуют кнопки, с помощью которых можно включить полужирное, курсивное, подчеркнутое или зачеркнутое начертание шрифта. Если, например, вы хотите отобразить какое-то слово или словосочетание полужирным шрифтом – выделите его, а затем нажмите кнопку Ж. В результате выделенный фрагмент будет заключен в теги <b> </b>, которые, как известно, включают полужирное начертание.
Следующая кнопка называется Параграф. Она предназначена для разбиения текста на параграфы. При ее нажатии в программный код документа вставляется тег с атрибутом <p class="text"></p>. При необходимости вы можете вручную добавить атрибут align: в зависимости от значения (left, center или right) он позволяет выровнять параграф соответствующим образом по горизонтали.
Далее следует кнопка, которая называется Перенос строки. Уже судя по отображаемым на ней символам (BR) нетрудно догадаться, что она предназначена для перевода текста на следующую строку, то есть для создания абзаца. При ее нажатии в программный код (а именно – в то его место, где в данный момент находится курсор) будет вставлен тег <br> (фрагмент такого кода показан в листинге 2.2).
Листинг 2.2. Перевод текста на следующую строку
<body>
Этот файл создан для примера.<br>Если нужно, будет сформирован еще один такой файл.
</body>
В данном примере вторая фраза будет начата с новой строки.
Следующие четыре кнопки предназначены для создания неупорядоченных, нумерованных и маркированных списков. При их нажатии в программный код добавляются соответствующие теги (например, при создании неупорядоченного списка – теги <ul> и </ul>, и т.д.).
ПРИМЕЧАНИЕ
С помощью соответствующих кнопок вы можете формировать маркированные списки как с квадратными, так и с круглыми маркерами.
Далее следует шесть кнопок, которые перечислены ниже (напомним, что их названия отображаются в виде всплывающих подсказок при подведении указателя мыши).
•
• Крупный шрифт – при нажатии данной кнопки выделенный текстовый фрагмент будет отображаться на веб-странице укрупненным шрифтом относительно расположенного рядом текста.
• Нижний индекс и Верхний индекс – эти кнопки предназначены для сдвига выделенного слова или текстового фрагмента соответственно вниз или вверх относительно расположенного рядом текста (иначе говоря, включается нижний или верхний индекс).
• Форматированный текст – данную кнопку удобно использовать для вставки в программный код веб-страницы уже отформатированного текста. У этого текста будут сохранены все пробелы и переносы.
• Текст фиксированной ширины – при нажатии данной кнопки выделенный текст будет отображаться в окне Интернет-обозревателя моноширинным шрифтом.
Последний параметр на данной вкладке предназначен для формирования заголовков. Как мы уже отмечали ранее, в языке HTML возможно использование заголовков шести уровней. Поэтому вначале нужно выделить слово или словосочетание, которое будет являться заголовком, затем из раскрывающегося списка выбрать требуемый уровень заголовка и нажать кнопку Заголовок (на ней отображается символ Н).
Вставка специальных элементов
Возможности программы предусматривают вставку в контент веб-страницы специальных элементов – гиперссылок, изображений, фреймов и т. д. Необходимый для этого инструмент находится на вкладке Специальные, содержимое которой показано на рис. 3.6.
Рис. 3.6. Вкладка Специальные
Ранее мы уже говорили о том, что одним из главных элементов любой веб-страницы является гиперссылка. В программе CatsHtml процесс создания гиперссылок автоматизирован: для этого нужно воспользоваться кнопкой Вставить ссылку, которая является на вкладке Специальные крайней слева.
Чтобы вставить гиперссылку, нужно выделить слово или текстовый фрагмент, который будет являться ссылкой, и нажать кнопку Вставить ссылку. В листинге 2.3 показан фрагмент программного кода, когда перед нажатием данной кнопки был выделено слово сформирован.
Листинг 2.3. Вставка гиперссылки
<body>
Этот файл создан для примера. Если нужно, будет <a href="#">сформирован</a> еще один такой файл.
</body>
В сформированном коде остается лишь ввести вручную адрес гиперссылки, являющийся значением атрибута href.
Чтобы вставить в документ изображение, нужно нажать на вкладке Специальные кнопку Вставить картинку, предварительно поместив курсор в то место программного кода, где должна находиться картинка. При нажатии кнопки на экране отображается окно, в котором нужно указать путь к файлу изображения. В листинге 2.4 показан фрагмент кода со вставкой изображения из файла Образец.html.