Веб-Самоделкин. Как самому создать сайт быстро и профессионально, Гладкий Алексей Анатольевич

Веб-Самоделкин. Как самому создать сайт быстро и профессионально

на обложку

Гладкий Алексей Анатольевич

Шрифт:

<html>

<head>

</head>

<body>

</body>

</html>

Данная структура идентифицирует Html-документ, определяет место для названия веб-страницы, содержит мета-теги для задания ключевых слов, а также предусматривает место для ввода основного контента.

Ранее мы уже отмечали, что программные коды часто содержат комментарии – текстовые пояснения, которые предназначены для служебного пользования. Они позволяют пояснить, что означает тот или иной фрагмент программного кода. Комментарии являются частью программного

кода, однако они не оказывают никакого влияния на его функциональность.

Для вставки комментария на вкладке Структура предназначена кнопка Комментарий (название кнопки отображается в виде всплывающей подсказки при подведении к ней указателя мыши). При ее нажатии на экране отображается окно ввода комментария, которое представлено на рис. 5.13.

Рис. 5.13. Ввод комментария

В данном окне следует с клавиатуры ввести требуемый комментарий и нажать кнопку ОК. При этом с помощью переключателя, расположенного внизу окна, нужно указать – к какому коду относится комментарий: к HTML-коду или к коду, написанному на языке CSS, JavaScript или РНР. Дело в том, что оформление комментариев в языке HTML и в других языках веб-программирования несколько отличается, поэтому нужно четко указать, на каком языке написана данная страница.

Если установлен флажок Однострочный комментарий, то вы можете записать многострочный комментарий в одну строку. При открытии комментария (для этого нужно будет щелкнуть мышью при нажатой клавише Ctrl) многострочность будет восстановлена.

В листинге 4.4 показано, как в программном коде веб-страницы будет выглядеть комментарий, настройка которого показана на рис. 5.13.

Листинг 4.4. Вставка комментария

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Опытный образец веб-страницы</title>

</head>

<body>

<!– Далее рассмотрим процесс ввода текстового контента –>

</body>

</html>

В программе реализована возможность быстрой навигации по программному коду. Иначе говоря, вы можете в любой момент перейти к любому фрагменту кода. Для этого нажмите на вкладке Структура кнопку Навигация – в результате на экране откроется навигационное окно, изображенное на рис. 5.14.

Рис. 5.14. Навигация по документу

В данном окне представлена иерархическая структура всего документа. По умолчанию узлы иерархии являются свернутыми, для их открытия предназначен соответствующий значок, на котором нужно щелкнуть мышью. Чтобы перейти к любому фрагменту программного кода, выделите его щелчком мыши и нажмите кнопку Обновить или клавишу Enter. Сразу после этого навигационное окно автоматически закроется (для этого должен быть установлен флажок Закрывать при переходе), а курсор в рабочей области главного окна программы спозиционируется на выбранном фрагменте.

Ввод и оформление текстового контента

Как правило, после предварительной разметки веб-страницы и формирования ее структуры веб-разработчики занимаются вводом и оформлением текстового контента, а уже после этого добавляют на страницу ссылки, изображения и прочие элементы. Для работы с текстовым контентом в программе предназначена вкладка Текст, содержимое которой представлено на рис. 5.15.

Рис. 5.15. Инструменты для работы с текстовым контентом

Крайняя слева кнопка на данной вкладке предназначена для формирования параграфов. При нажатии данной кнопки в программный код документа вставляется тег . Кнопка, которая находится рядом с ней, позволяет вставить в программный код тег <br>, который предназначен, как мы уже знаем, для вставки разрыва и создания абзацев.

При нажатии на кнопку Прочее открывается меню, команды которого также предназначены для вставки в документ разных тегов. Содержимое данного меню представлено на рис. 5.16.

Рис. 5.16. Меню, открываемое нажатием кнопки Прочее

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

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

Предположим, что у нас есть следующий программный код (рис. 5.17).

Рис. 5.17. Пример программного кола веб-страницы

Предположим, что нам нужно первую фразу текстовой части контента оформить заголовком первого уровня, а последнюю фразу – в виде цитаты. Для этого действуем следующим образом: выделяем первую фразу, нажимаем кнопку Прочее и в открывшемся меню выбираем команду h1. После этого выделяем последнюю фразу, затем вновь нажимаем кнопку Прочее и в открывшемся меню выбираем команду <cite> Цитирование. Результат выполненных действий показан в листинге 4.5.

Листинг 4.5. Применение тегов из меню Прочее

<html>

<head>

<title>Работа в программе NeonHtml</title>

</head>

<body>

<h1>Здесь мы научимся создавать сайты.</h1>

Для этого будем использовать программу NeonHtml.

<cite>Полученные знания применим на практике.</cite>

</body>

</html>

В результате первая и последняя фразы текстовой части контента заключены в соответствующие теги. Теперь можно просмотреть результат в окне Интернет-обозревателя, используемого в данном компьютере по умолчанию. Для этого нажмем клавишу F10, предварительно сохранив выполненные изменения с помощью команды главного меню Файл Сохранить или нажатием комбинации клавиш Ctrl+S. Результат показан на рис. 5.18.