Или Как просмотреть исходный код страницы 13 страница
 |
Рис. 4.11. Пример формирования программного кода
Отметим, что в данном случае после нажатия каждой кнопки нажималась клавиша Enter — в противном случае все теги были бы выстроены поочередно в одной строке.
Теги, которые представлены на рис. 4.11, нам хорошо знакомы. Только порядок их следования несколько нелогичен (поскольку, напомним, мы просто нажали подряд первые четыре кнопки инстру- ментальной панели). Очевидно, что теги <title> </title> необходимо поместить между тегами <head> </head>.
Теперь отредактируем наш программный код, чтобы придать ему логичный вид, присвоим странице название, и введем какой-нибудь текстовый контент. В результате программный код будет выглядеть так, как показано на рис. 4.12.
 |
Рис. 4.12. Доработанный программный код
Как видно на рисунке, наша страница состоит из трех элементов: название страницы, заголовок первого уровня, а также основной текст. Теперь просмотрим результат (рис. 4.13), воспользовавшись командой главного меню Вид > Просмотр в браузере (эта команда вызывается также нажатием клавиши F11).
 |
Рис. 4.13. Пример страницы, созданной в программе HtmlPad
Отметим, что вы можете просматривать страницы не только в окне установленного на компьютере Интернет-обозревателя, но и с помощью встроенного в программу браузера. Для этого используйте команду главного меню Вид > Редактор/Просмотр или просто нажмите клавишу F12.
|
|
|
На вкладке Html/Общие имеется возможность вставки в документ еще целого ряда полезных элементов. Например, с помощью соответ- ствующих кнопок вы можете вставить таблицу, а также добавлять в нее строки и столбцы. Также вы можете создавать формы для от- правки данных, и включать в них переключатели, флажки, кнопки и иные инструменты.
Для примера создадим небольшую форму, которая будет вклю- чать в себя флажок, текстовое поле, раскрывающийся список, а также кнопки отправки данных и очистки формы.
Напомним, что в первую очередь необходимо создать саму фор- му — в противном случае добавление флажков, кнопок и иных ин- струментов не будет иметь никакого смысла. Чтобы добавить форму, после слова примера нажмем Enter (на этой новой строке и начнется код формы) и нажмем в инструментальной панели данной вкладки кнопку Форма передачи параметров. В результате программный код страницы будет выглядеть так, как показано на рис. 4.14.
 |
Рис. 4.14. Добавление формы на веб-страницу
Обратите внимание — на данном рисунке включена нумерация строк. Мы это сделали для того, чтобы в дальнейшем было проще ориентироваться в программном коде.
Далее действуем следующим образом. Установим курсор в стро- ку № 09 (она в данный момент является пустой), и нажмем в ин- струментальной панели вкладки кнопку Текстовое поле (напомним, что названия кнопок инструментальной панели отображаются в виде всплывающих подсказок при подведении к ним указателя мыши). В результате в программный код страницы будет добавлен фрагмент, необходимый для вставки в форму текстового поля (рис. 4.15).
|
|
|
 |
Рис. 4.15. Ввод кода для добавления в форму текстового поля
Теперь в конце строки 09 нажимаем Enter, и в новой строке до- бавляем код флажка, нажав в инструментальной панели кнопку Флажок (на ней изображен характерный символ). Затем в конце строки 10 нажимаем Enter, и в новой строке добавляем код раскры- вающегося списка, нажав в инструментальной панели кнопку Выпа- дающий список. После этого в конце строки 13 нажимаем Enter, и в новой строке добавляем код кнопки отправки данных, нажав в ин- струментальной панели кнопку Кнопка передачи параметров. Затем в конце строки 14 нажимаем Enter и в новой строке добавляем про- граммный код кнопки очистки всех параметров формы, нажав в ин- струментальной панели кнопку Кнопка очистки формы. После вы- полнения всех перечисленных действий программный код нашей страницы должен выглядеть так, как показано на рис. 4.16.
|
|
|
Рис. 4.16. Добавление в форму нескольких элементов
Теперь сохраним выполненные изменения с помощью команды главного меню Файл > Сохранить либо нажатием комбинации кла- виш Ctrl+S, и просмотрим полученный результат в окне Интернет- обозревателя (рис. 4.17), выполнив для этого команду главного меню Вид > Просмотр в браузере.
 |
Рис. 4.17. Вид страницы с добавленными элементами
На рисунке видно, что в страницу добавлены следующие элемен- ты: текстовое поле, флажок, раскрывающийся список, а также кнопки отправки данных (она называется Добавить) и очистки всех пара- метров формы.
Путем внесения соответствующих изменений в программный код можно присвоить названия элементам формы, назначить им значе- ния по умолчанию, переименовать и др.
Работа с текстовым контентом
Теперь перейдем на вкладку HTML/Текст (рис. 4.18). Как нетруд- но догадаться по ее названию, находящиеся на ней инструменты предназначены для форматирования и выполнения прочих операций с текстовым контентом веб-страницы.
 |
Рис. 4.18. Вкладка HTML/Текст
Даже не читая названия кнопок инструментальной панели (напомним, что они появляются во всплывающих подсказках), не- трудно догадаться, для чего предназначены многие из них. Напри- мер, первая слева кнопка используется для вставки горизонтальной линии, кнопка рядом с ней — для вставки разрыва и перехода на но- вую строку (то есть для формирования абзацев), следующая кнопка предназначена для вставки пробела и т. д. Также вы можете приме- нять полужирное, курсивное и подчеркнутое начертания, выравни- вать текст, вставлять гиперссылки и т. д. Отметим, что применение способов начертания, а также некоторых других приемов оформле- ния и форматирования осуществляется к предварительно выделен- ному фрагменту. Например, если вы хотите в программном коде, ко- торый представлен на рис. 4.16, включить полужирное начертание слова страница, то вначале нужно выделить его, а затем в инстру- ментальной панели нажать кнопку Жирность (на ней изображен символ В). В результате строка 07 в программном коде будет выгля- деть так: Эта <b>страница</b> создана для примера.
|
|
|
Для выделения параграфов в инструментальной панели данной вкладки предназначена кнопка Новый параграф. При ее нажатии в программный код веб-страницы добавляются теги <p> </p>. Если пе- ред нажатием данной кнопки был выделен какой-либо текстовый фрагмент, то он будет помещен между этими тегами. Если же текст предварительно не выделялся, то теги появятся в том месте, где находится курсор.
После кнопки Новый параграф следуют четыре кнопки, которые предназначены для размещения текста на странице. Эти кнопки пе- речислены ниже:
q Расположить по левому краю — при нажатии данной кнопки текст выравнивается по левому краю, а в программный код добавля- ется фрагмент <div align="left"></div>.
q Расположить по центру — с помощью данной кнопки текст можно выровнять по центру, при этом в программный код добавля- ется фрагмент <div align="center"></div>.
q Расположить по правому краю — при нажатии данной кнопки текст выравнивается по правому краю, при этом в программный код добавляется фрагмент <div align="right"></div>.
q Растянуть по ширине — в данном случае текст будет растянут по всей ширине веб-страницы, при этом в программный код добавля- ется фрагмент <div align="justify"></div>.
Как мы уже отмечали ранее, в языке программирования HTML предусмотрено использование шести уровней заголовков. Чтобы со- здать заголовок требуемого уровня, используйте в инструменталь- ной панели данной вкладки кнопку Заголовок. При нажатии данной кнопки в программный код веб-страницы добавляются теги <h> </h>. Причем если перед нажатием кнопки вы выделите какой-либо тек- стовый фрагмент, то он будет заключен между этими тегами. В противном случае теги появятся в том месте, где находится курсор. Обратите внимание: в тегах не указан уровень заголовка — его вы должны проставить его самостоятельно.
Для формирования нумерованных списков в инструментальной панели вкладки HTML/Текст предназначена кнопка Нумерованный список. При ее нажатии в программный код добавляются теги <ol>
 |
</ol>. Чтобы добавить в список новую позицию, используйте кнопку Новый пункт списка, при нажатии которой в программный код до- бавляются теги <li> </li>. На рис. 4.19 показан программный код, в котором сформирован нумерованный список, состоящий из трех по- зиций. Обратите внимание — сами названия позиций (Машины, Ме- ханизмы и Оборудование) нужно ввести самостоятельно.
Рис. 4.19. Программный код с формированием нумерованного списка
Теперь сохраним выполненные изменения с помощью команды главного меню Файл > Сохранить или нажатием комбинации клавиш Ctrl+S, и просмотрим результат в окне Интернет-обозревателя (рис. 4.20).
 |
Рис. 4.20. Нумерованный список
Для формирования маркированных списков в инструментальной панели вкладки HTML/Текст предназначена кнопка Маркированный список. При ее нажатии в программный код добавляются теги <ul>
</ul>. Чтобы добавить в список новую позицию, используйте кнопку Новый пункт списка, при нажатии которой в программный код до- бавляются теги <li> </li>. На рис. 4.21 показан программный код, в котором сформирован маркированный список, состоящий из четы- рех позиций. Как и в случае с нумерованным списком, сами названия позиций нужно ввести самостоятельно.
 |
Рис. 4.21. Программный код с формированием маркированного списка
Теперь сохраним выполненные изменения с помощью команды главного меню Файл > Сохранить или нажатием комбинации клавиш Ctrl+S, и просмотрим результат в окне Интернет-обозревателя (рис. 4.22).
 |
Рис. 4.22. Маркированный список
В конце инструментальной панели находится еще пять кнопок, которые перечислены ниже:
q Новый шрифт — с помощью данной кнопки в программный код добавляется фрагмент <font face="" size=""></font>. Путем внесе- ния в него соответствующих данных можно установить применение шрифта, отличного от того, которым отображается соседний текст.
q Уменьшить размер шрифта — при нажатии данной кнопки вы- деленный текстовый фрагмент будет отображаться на веб-странице уменьшенным шрифтом относительно расположенного рядом текста.
q Увеличить размер шрифта — при нажатии данной кнопки вы- деленный текстовый фрагмент будет отображаться на веб-странице укрупненным шрифтом относительно расположенного рядом текста.
q Нижний регистр — эта кнопка предназначена для сдвига выде- ленного слова или текстового фрагмента вниз относительно располо- женного рядом текста (иначе говоря, включается нижний индекс).
q Верхний регистр — эта кнопка предназначена для сдвига выде- ленного слова или текстового фрагмента вверх относительно распо- ложенного рядом текста (иначе говоря, включается верхний индекс).
С помощью кнопки Выравнивание объектов по центру вы можете выровнять любой объект (графическое изображение, текстовый блок
и др.) по середине страницы. При нажатии данной кнопки в про- граммный код веб-страницы добавляются теги <center> </center>. Если перед нажатием кнопки был выделен фрагмент кода, то он бу- дет заключен между этими тегами. В противном случае теги будут помещены в то место, где находится курсор.
Кнопка Пробел (она является третьей слева, на ней изображен ха- рактерный символ) предназначена для вставки пробела. Напомним, что при программировании на языке HTML, сколько бы раз вы ни нажимали клавишу Пробел, он будет распознавать это как один про- бел. Другими словами, увеличить расстояние путем многократного нажатия клавиши Пробел у вас не получится: оно все равно будет равняться одному пробелу. Для решения этой проблемы в языке HTML предназначен специальный инструмент  : он равняется одному пробелу. В листинге 3.1 приведен фрагмент программного кода, когда между словами эта и страница, а также создана и для вставлены дополнительные пробелы.
Листинг 3.1. Вставка пробелов
<body>
<h1>Итак, приступаем</h1>
Эта страница создана для приме- ра<br>
</body>
Как известно, программные коды часто содержат комментарии — текстовые пояснения, которые предназначены для служебного поль- зования. Для новичков комментарии полезны тем, что позволяют в любой момент вспомнить, что означает тот или иной фрагмент про- граммного кода. Например, вы работаете с каким-то кодом, а нахо- дящийся рядом опытный специалист подсказывает вам: мол, этот фрагмент предназначен для того-то, а вот эти теги нужны для этого и т. д. Вы конспектируете его замечания прямо в программном коде, оформляя их в виде комментариев: в данном случае они не будут оказывать никакого влияния на действие программного кода, хотя и будут в нем присутствовать.
Для вставки комментария в инструментальной панели данной вкладки предназначена кнопка Комментарий HTML. При ее нажатии в программный код добавляется фрагмент <!---->, и комментарий следует писать после знака !. В листинге 3.2 показан код с коммента- рием относительно того, как мы учились вставлять дополнительные пробелы.
Листинг 3.2. Вставка комментариев
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>Учимся работать в программе HtmlPad</title>
</head>
<body>
<h1>Итак, приступаем</h1>
Эта страница создана для приме- ра<br>
<! В предыдущей строке показано, как вставлять дополнительные пробелы>
</body>
Если вы сохраните изменения и просмотрите страницу в окне Интернет-обозревателя — вы увидите, что комментарии отобра- жаться не будут.
Вставка гиперссылок и графических изображений
Выше мы уже неоднократно отмечали, что одним из главных элементов любой веб-страницы является гиперссылка. В программе HtmlPad процесс создания гиперссылок автоматизирован: для этого нужно на вкладке HTML/Текст воспользоваться кнопкой Ссылка на документ.
Чтобы вставить гиперссылку, нужно выделить слово или тексто- вый фрагмент, который будет являться ссылкой, и нажать кнопку Ссылка на документ. В листинге 3.3 показан фрагмент программного кода, когда перед нажатием данной кнопки был выделено слово страница.
Листинг 3.3. Вставка гиперссылки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transition-
al//EN">
<head>
<title>Учимся работать в программе HtmlPad</title>
</head>
<body>
<h1>Итак, приступаем</h1>
Эта <a href="">страница</a> создана для примера<br>
</body>
В сформированном коде остается лишь ввести вручную адрес ги- перссылки, являющийся значением атрибута href.
Чтобы вставить в документ изображение, нужно нажать на дан- ной вкладке кнопку Рисунок, предварительно поместив курсор в то место программного кода, где должна находиться картинка. При нажатии кнопки в программный код добавляется соответствующий фрагмент (листинг 3.4).
Листинг 3.4. Вставка изображения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transition-
al//EN">
<head>
<title>Учимся работать в программе HtmlPad</title>
</head>
<body>
<h1>Итак, приступаем</h1>
Эта страница создана для примера<br>
<img src="" height="" border="0">
</body>
В данном листинге остается лишь указать путь к файлу рисунка или просто имя этого рисунка (если он находится в том же каталоге, что и файл данной веб-страницы), а также задать при необходимости его дополнительные параметры. В листинге 3.5 представлен про- граммный код, согласно которому на веб-странице будет отобра- жаться рисунок с именем Образец.jpg размером 150´150 пикселей, и заключенный в рамку толщиной 10 пикселей.
Листинг 3.5. Вставка изображения с заданными парамет- рами
Дата добавления: 2021-01-21; просмотров: 72; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!