Или Как просмотреть исходный код страницы 6 страница
Функциональные возможности практически любого популярного Интернет-обозревателя (Internet Explorer, Mozilla Firefox и др.) преду- сматривают просмотр HTML-кода текущей страницы, который обыч- но отображается в отдельном окне. Рассмотрим на конкретном при- мере, как это делается.
Откроем в Интернет-обозревателе Internet Explorer какую-либо страницу, например, сайт газеты «Советский спорт» — www.sovsport.ru (рис. 2.1).
 |
Рис. 2.1. Страница для просмотра HTML-кода
Теперь выполним команду главного меню Вид > Просмотр HTML-кода — в результате на экране откроется окно используемого по умолчанию текстового редактора (как правило, это «Блокнот»), в котором будет представлен исходный код открывшейся страницы (рис. 2.2).
 |
Рис. 2.2. Просмотр HTML-кода
На данном рисунке представлен лишь небольшой фрагмент HTML-кода данной страницы, поскольку весь код является довольно объемным, и чтобы просмотреть его полностью, нужно использовать полосы прокрутки.
При необходимости вы можете вывести HTML-код на печать — для этого используйте штатную команду редактора «Блокнот» Файл > Печать, вызываемую также нажатием комбинации клавиш Ctrl+P.
Отметим, что в разных Интернет-обозревателях команда, предна- значенная для просмотра HTML-кода, может называться по-разному. Например, в обозревателе Mozilla Firefox она также находится в меню Вид, но называется Исходный код страницы, и ее можно вызвать так- же нажатием комбинации клавиш Ctrl+U.
|
|
|
Создание простейшей веб-страницы
В данном разделе мы на конкретном примере проиллюстрируем, как написать простейшую веб-страницу на языке программирования HTML.
Работать мы будем в любом текстовом редакторе, позволяющем сохранять созданные файлы с расширением html. Если вы пользуе- тесь операционной системой Windows, то вполне подойдет тексто- вый редактор «Блокнот», который входит в комплект ее поставки.
Итак, по обычным правилам работы в текстовом редакторе вво- дим в окне код, который представлен на рис. 2.3.
 |
Рис. 2.3. Начальный этап создания простейшей веб-страницы
То, что мы сейчас сделали, можно назвать предварительной раз- меткой простейшей веб-страницы. Пока еще наша страница не со- держит никаких сведений, и если сохранить ее в таком виде, то при последующем открытии ее в окне Интернет-обозревателя это окно будет пустым.
А текст, который мы ввели, представляет собой три пары тегов HTML-документа. Отметим, что большинство тегов языка HTML ис- пользуются в паре: первый тег называется открывающим, а вто- рой — закрывающим. Все закрывающие теги имеют в начале наклонную черту (например, на рис. 2.3 закрывающими тегами яв- ляются </title>, </body> и </html>).
|
|
|
Теги <html> и </html> предназначены для идентификации HTML- документа. Открывающий тег этой пары всегда следует в самом начале программного кода, а закрывающий тег — в самом его конце. Иначе говоря, тегом <html> начинается программный код страницы, а тегом </html> он завершается.
ВНИМАНИЕ
Пара тегов <html> и </html> является обязательным атрибутом любо- го HTML-документа.
С помощью пары тегов <title> </title> осуществляется идентифи- кация названия веб-страницы. Иначе говоря, весь текст, введенный между этими тегами, будет впоследствии отображаться в заголовке окна Интернет-обозревателя.
Что касается тегов <body> </body>, то они предназначены для иден- тификации основного текста HTML-документа. Иными словами, весь текст веб-страницы, отображаемый на экране при ее просмотре в окне Интернет-обозревателя, должен находиться между этими тегами.
Сохраним введенные данные в файле с расширением html (пред- положим, что наш файл будет называться Пример.html). Для этого выполним команду главного меню Файл > Сохранить (эта команда вызывается также нажатием комбинации клавиш Ctrl+S), после чего в открывшемся окне укажем путь для сохранения и имя файла.
Теперь дополним код нашего HTML-документа, добавив в него между соответствующими тегами заголовок веб-страницы и основ- ной текст. Назовем нашу страницу Тестовая страница, а в качестве основного текста введем Эта страница является тестовой (рис. 2.4).
|
|
|
 |
Рис. 2.4. Добавление в код страницы заголовка и основного текста
Теперь сохраним выполненные изменения с помощью команды главного меню Файл > Сохранить или нажатием комбинации клавиш
Ctrl+S. После этого откроем нашу страницу в окне Интернет- обозревателя. Если все сделано правильно, то она должна выглядеть так, как показано на рис. 2.5.
 |
Рис. 2.5. Тестовая страница в окне Интернет-обозревателя
Как видно на рисунке, заголовок страницы, который отображает- ся вверху окна Интернет-обозревателя, и основной ее текст полно- стью соответствуют программному коду. На этом можете себя по- здравить: вы только что создали простейшую веб-страницу.
Теперь доработаем нашу веб-страницу, чтобы придать ей более эргономичный вид. Вначале, используя теги <h1> и </h1>, озаглавим содержащийся на странице текст. Для этого дополним программный код так, как показано на рис. 2.6.
 |
Рис. 2.6. Добавление в программный код заглавия текста
Обратите внимание — теги <h1> и </h1> и находящийся между ними текст расположены внутри тегов <body> и </body>, а также пе- ред основным текстом.
|
|
|
Теперь сделаем так, чтобы слово страница отображалась курси- вом, а слово тестовой — полужирным шрифтом. Для этого предна- значены пары тегов соответственно <i> </i> и <b> </b>. В результате внесения необходимых дополнений исходный код нашей веб- страницы должен выглядеть так, как показано на рис. 2.7.
 |
Рис. 2.7. Добавление курсивного и полужирного начертания
Теперь изменим цвет фона страницы. Для этого применим атрибут bgcolor тега <body>. Отметим, что этот атрибут не является обязатель- ным: если он не используется — цвет фона по умолчанию будет белым (в чем мы уже могли убедиться). Сделаем цвет фона нашей страницы желтым, дополнив ее программный код так, как показано на рис. 2.8.
 |
Рис. 2.8. Изменение цвета фона веб-страницы
При желании мы можем изменить и цвет шрифта, сделав его, например, голубым. Для этого вновь немного доработаем наш про- граммный код, используя для этого атрибут text тега <body>. Этот атрибут также не является обязательным: если он не используется, то цвет шрифта по умолчанию будет черным (в этом мы тоже уже могли убедиться).
Чтобы цвет шрифта стал голубым, код нашей веб-страницы дол- жен выглядеть так, как показано на рис. 2.9.
 |
Рис. 2.9. Изменение цвета шрифта веб-страницы
Теперь сохраним все выполненные изменения и откроем нашу веб-страницу в окне Интернет-обозревателя. Результат выполнен- ных действий показан на рис. 2.10.
 |
Рис. 2.10. Веб-страница после выполненных доработок
Как видно на рисунке, в соответствии с изменениями программ- ного кода слово страница написано курсивом, слово тестовой — по- лужирным шрифтом, а над основным текстом появился заголовок. Кроме этого, изменился фон цвет фона страницы и цвет шрифта, ко- торым отображается текст.
Как мы уже отмечали ранее, одним из основных элементов любой веб-страницы является гиперссылка. Именно с помощью гиперссы- лок пользователи Интернета имеют возможность безгранично путе- шествовать по Сети, переходя с сайта на сайт. Поэтому следующим элементом, который мы добавим на нашу веб-страницу, будет ги- перссылка.
Вначале нам нужно решить, куда именно будет вести гиперссыл- ка с нашей страницы. Для этого создадим простейшую веб-страницу с каким-либо произвольным текстом — например, как на рис. 2.11.
 |
Рис. 2.11. Страница, которая должна открываться по ссылке
Файл этой страницы в нашем примере будет называться Test.html. Здесь мы не приводим ее исходный код, поскольку имеющихся зна- ний уже вполне достаточно для того, чтобы создать ее без подсказок. Именно эта страница должна будет открываться после того, как мы добавим гиперссылку на страницу, с которой только что эксперимен- тировали (см. рис. 2.10).
Для создания гиперссылок в языке программирования HTML предусмотрен парный тег <a> </a>, который используется совместно с атрибутом href. Значением данного атрибута является тот адрес, на который ведет гиперссылка.
Поместим оба наши файла (Пример.html и Test.html) в один ката- лог. Чтобы создать гиперссылку на страницу Test.html, изменим код страницы Пример.html так, как показано на рис. 2.12.
 |
Рис. 2.12. Создание гиперссылки
Попутно мы познакомимся с еще одним тегом HTML-языка —
<br>. Характерной особенностью данного тега является то, что он применяется не парно, а индивидуально. Иначе говоря, здесь нет от- крывающего и закрывающего тега, он один. Этот тег предназначен для вставки разрыва строки (от английского слова «break»). После того тега текст будет продолжен с новой строки.
ВНИМАНИЕ
Учтите, что при вводе основного текста язык HTML не реагирует на нажатие клавиши Enter. Несмотря на то, что в текстовом редакторе текст веб-страницы после каждого нажатия Enter будет продолжен с новой строки, при просмотре этой страницы в окне Интернет- обозревателя текст будет идти в одной строке. Поэтому для осу- ществления перехода на новую строку используйте тег <br>.
В рассматриваемом примере мы добавили в программный код стра- ницы новую строку, поэтому после слова тестовой вставлен тег <br>.
Что касается ссылки, то она сформирована в новой строке текста.
Вот ее код:
<a href="Test.html">здесь</a>
В данном коде вначале следует открывающий тег <a> вместе со своим атрибутом href, имеющим значение Test.html (очевидно, что значением атрибута является в имя страницы, на которую ведет
ссылка). Обратите внимание: в скобки <> открывающий тег заключен вместе с атрибутом и значением атрибута.
Далее следует слово текста, которое, собственно, и будет являть- ся ссылкой (в нашем случае это слово здесь), а после него идет за- крывающий тег </a>.
В результате выполненных изменений наша веб-страница При- мер.html будет выглядеть так, как показано на рис. 2.13.
 |
Рис. 2.13. Гиперссылка в тексте страницы
Как видно на рисунке, на нашей странице появилась новая фраза. Более подробно смотрите здесь, которая начинается с новой строки. Причем последнее слово данной фразы представляет собой гиперс- сылку. Обратите внимание — по умолчанию гиперссылки в тексте выделяются подчеркиванием. Если все сделано правильно, то после щелчка мышью на данной ссылке откроется страница Test.html (см. рис. 2.11).
Однако в Интернете гиперссылки широко используются не толь- ко для того, чтобы переходить на страницы одного и того же сайта, но и для перехода на другие веб-ресурсы. Чтобы решить эту задачу, нужно в программном коде гиперссылки указать веб-адрес требуемо- го ресурса. Рассмотрим, как это делается, на конкретном примере.
Сделаем из нашей страницы Пример.html гиперссылку на попу- лярный портал www.mail.ru. Для этого подкорректируем программ- ный код так, как это показано на рис. 2.14.
Рис. 2.14. Ссылка на www.mail.ru
Как видно на рисунке, из кода ссылки мы убрали имя страницы Test.html, добавив вместо него адрес http://www.mail.ru. В остальном программный код страницы остался прежним. Сохраним выполнен- ные изменения с помощью команды главного меню Файл > Сохра- нить или нажатием комбинации клавиш Ctrl+S, и запустим файл Пример.html.
Внешне вид веб-страницы не изменится — она будет выглядеть точно так же, как и на рис. 2.13. Но если теперь щелкнуть мышью на ссылке здесь, то в результате откроется главная страница портала www.mail.ru.
Таким образом, в данном разделе мы на конкретном примере рас- смотрели основные действия по созданию простейшей веб-страницы. Однако чтобы более детально изучить возможности языка HTML, необходимо познакомиться с его основными тегами. Некоторые из них мы уже знаем, но в реальности их намного больше. Об этом и пойдет речь в следующем разделе.
Основные теги языка HTML
Здесь мы познакомимся с наиболее востребованными тегами языка программирования HTML. Отметим, что многие теги имеют свои атрибуты, о которых также будет рассказано в данном разделе. Мы будем рассматривать все теги (даже те, с которыми уже познако- мились) в алфавитном порядке.
ВНИМАНИЕ
Не забывайте, что многие теги HTML-языка являются парными —
например, <body> </body>, <b> </b> и т. д.
Тег <a>, как мы уже знаем, предназначен для создания гиперс- сылок в тексте веб-страницы. Напомним, что гиперссылка является одним из ключевых элементов любого веб-ресурса, поэтому важ- ность данного тега сложно переоценить. Этот тег имеет следующие атрибуты:
q accesskey — назначение для гиперссылки «горячей клавиши»;
q href — определение адреса, на который ведет гиперссылка;
q name — именование областей веб-страницы;
q tabindex — установка порядка перехода по гиперссылкам;
q target — определение окна для отображения объекта гипер- ссылки.
Тег <b> предназначен для выделения текста полужирным шриф- том. Иначе говоря, весь текст, находящийся между тегами <b> </b>, будет отображаться полужирным шрифтом.
С помощью тега <basefont> вы можете изменить внешний вид все- го текста. Этот тег имеет атрибут size, предназначенный для измене- ния размера шрифта текста.
Тег <big> позволяет увеличить шрифт текста по сравнению с со- седним текстом, а с помощью тега <blockquote> вы можете создать в документе блок цитаты.
Одним из ключевых тегов языка программирования HTML явля- ется парный тег <body>. Как мы уже отмечали ранее, с помощью этого тега идентифицируется основной текст документа. Иначе говоря, все, что вы хотите поместить на веб-страницу, должно располагаться между тегами <body> </body>. Данный тег имеет несколько атрибу- тов, которые перечислены ниже.
q alink, link и vlink — позволяют установить цвет гиперссылок;
q background — выбор графического фона;
q bgcolor — изменение цвета фона веб-страницы (применение данного атрибута мы на конкретном примере рассмотрели в преды- дущем разделе);
q bgproperties — установка режима перемещения графического фона при пролистывании веб-страницы;
q bottommargin — позволяет редактировать высоту нижнего поля;
q leftmargin — позволяет редактировать ширину левого поля;
q marginheight — позволяет редактировать высоту верхнего и нижнего полей;
q marginwidth — позволяет редактировать ширину левого и пра- вого полей;
q rightmargin — позволяет редактировать ширину правого поля;
q text — изменение цвета текста (применение данного атрибута мы на конкретном примере рассмотрели в предыдущем разделе);
q topmargin — позволяет редактировать высоту верхнего поля.
Тег <br>, как мы уже отмечали ранее, предназначен для создания новой строки (то есть для переноса текста на нижеследующую стро- ку). Этот тег имеет один атрибут — clear, предназначенный для предотвращения переноса слов текста.
С помощью тега <caption> вы можете снабдить таблицу заголов- ком, а атрибут данного тега align позволяет установить признак вы- равнивания заголовка таблицы.
Для центрирования элементов веб-страницы предназначен тег
<center>.
<col> — данный тег позволяет создать неструктурную группу столбцов таблицы. Он имеет перечисленные ниже атрибуты:
q align — атрибут позволяет задать признак выравнивания дан- ных в ячейках группы по горизонтали;
q bgcolor — с помощью данного атрибут задается цвет фона яче- ек группы;
Дата добавления: 2021-01-21; просмотров: 65; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!