Файл: Основы программирования на языке HTML ( Сущность и содержание веб-программирования ).pdf
Добавлен: 31.03.2023
Просмотров: 87
Скачиваний: 2
2. Прикладные аспекты программирования на языке HTML
2.1 Порядок создания HTML-документа
Для хранения любых файлов нужна отдельная папка. Создадим папку (например, WEB) на любом жестком диске компьютера.
Теперь запустим программу Блокнот:
Пуск>Программы>Стандартные>Блокнот
Приступим к работе, набрав в отдельных строках команды, которые задают общую структуру любого HTML-документа:
<!-- Файл document_1.htm -->
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Для ввода парных тегов удобно использовать операции копирования и вставки через буфер обмена Windows.
Текст документа следует сохранить в виде htm-файла: Файл>Сохранить как…
Хотя файлы можно именовать как угодно, в том числе и по-русски, рекомендуется это делать, только когда надо создать один-два отдельных документа на локальном компьютере. При размещении сайта в Интернете, используйте в именах файлов только строчные (малые) латинские буквы и цифры без пробелов, в крайнем случае – знак подчеркивания «_» или дефис «-». Необходимо также указать тип файла .html или .htm, чтобы браузер смог его открыть.
- Набрать текст заголовка и основной части документа. Сохранить файл.
- Теперь можно посмотреть на результат работы. Если открыть с помощью программы Internet Explorer (Проводник) полученный файл, то браузер отобразит страничку на экране.
Порядок редактирования HTML-документа
- Открыть файл HTML-документа в браузере
- Открыть файл в окне Блокнота: Вид>В виде HTML
- Внести изменения в текст документа
- Сохранить файл: Файл>Сохранить
- Обновить текст в окне браузера: Вид>Обновить (<F5>)
Последние три пункта повторяются до тех пор, пока не будет достигнут желаемый результат[8].
Создание простейшей web-странички рассмотрим на примере, результат выполнения которого браузером выглядит так, как представлено на рис. 3
Рисунок 3 – Пример страницы на HTML
Вот текст HTML-программы, которая показывает эту страничку:
|
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; <TITLE> Упражнение 1 </TITLE> </HEAD> <BODY> <H1> Первый HTML-документ </H1> <HR> <P> Корова не похожа на лошадь. А лошадь не похожа на корову. Именно это сходство мы и берем за основу. </P> </BODY> </HTML> |
начало HTML-документа начало заголовка служебная информация название документа конец заголовка начало тела программы название странички горизонтальная линия начало абзаца конец абзаца конец тела программы конец HTML-документа |
Раздел заголовка располагается в блоке <HEAD>…</HEAD> в самом начале web-документа. Здесь, в основном, размещается служебная информация, которая браузером не отображается.
Тег <META> описывает некоторые общие свойства документа. В частности здесь задана стандартная кодировка Windows, в которой сохраняется документ. Данные этого тега используются также поисковыми серверами.
Между парой тегов <TITLE> и </TITLE> располагается имя документа. Это имя браузер использует в заголовке окна Windows, в котором показывает текст.
В блоке <BODY>…</BODY> располагаются команды, следуя которым браузер форматирует текст и выводит его в окно документа. Наш простой пример использует теги формирования заголовка (<H1>), абзаца (<P>), а также выводит горизонтальную линию (<HR>).
Заголовки в тексте документа являются важной его частью. Они разделяют информацию на отдельные логические блоки и поэтому существенно улучшают ее восприятие.
В HTML заголовки различаются по уровню. Поддерживаются заголовки шести уровней, они выделяются браузером размером шрифта и жирностью:
<H1> Это заголовок первого уровня </H1>
<H2> Это заголовок второго уровня </H2>
<H3> Это заголовок третьего уровня </H3>
<H4> Это заголовок четвертого уровня </H4>
<H5> Это заголовок пятого уровня </H5>
<H6> Это заголовок шестого уровня </H6>
Горизонтальные линии удобно использовать для дополнительного выделения (или разделения) на экране текста и графики. Они задается тегом <HR>, который не имеет парного закрывающего. Браузер, выполняя эту команду, выведет на экран такую черту:
Теги <HR> могут содержать атрибут size, изменяющий толщину линии. Если этот атрибут не задан, горизонтальные линии имеют толщину в два (или три, зависит от браузера) пиксела.
Можно легко получить целую коллекцию линий, разных по толщине:
|
Браузер рисует линии “объемными”, однако можно отказаться от этой настройки, если использовать атрибут noshade:
|
Как правило, блоки текста распределяют по абзацам. Абзацы отделяются друг от друга небольшим отступом. Первая строка абзаца также может иметь отступ. Конечно, разделять текст на абзацы стараются не как попало, а так, чтобы каждый фрагмент содержал законченную мысль.
Абзац задается парами тегов <P> и </P>, между которыми помещается текст. Конечный тег </P> игнорируется браузером, поэтому его можно не писать.
Фактически работа тега <P> сводится к выводу перед текстовым фрагментом пустой строки. При этом
- Текст выравнивается по левому краю.
- Между словами всегда помещается ровно по одному пробелу независимо от того, сколько пробелов вы набрали в тексте.
- Перенос на новую строку происходит тогда, когда очередное слово не помещается в экранной строке, а не тогда, когда вы перешли на новую строку в тексте.
В примере, рассмотренном выше, стихотворение написано в тексте HTML-документа, как ему и полагается, на 4 строчках:
|
<P> Корова не похожа на лошадь. А лошадь не похожа на корову. Именно это сходство мы и берем за основу. </P> |
Браузер выводит стихи как единый абзац. Хотелось бы увидеть каждую строку отдельным абзацем:
|
<P>Корова не похожа на лошадь. <P>А лошадь не похожа на корову. <P>Именно это сходство <P>мы и берем за основу. |
Однако пустые строки на странице смотрятся не очень красиво. Тег <BR> заставляет браузер продолжить вывод абзаца с новой строки. Он не имеет парного и может применяться практически в любом месте.
Окончательный вид документа:
А вот текст программы, по которой браузер выводит эту страничку:
|
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> <TITLE>Упражнение 2</TITLE> </HEAD> <BODY> <H1>Улучшенный HTML-документ</H1> <HR> <H2>Сходство</H2> <P>Пит Хейн (перевод Н.А.Прохоровой) <P> Корова не похожа на лошадь.<BR> А лошадь не похожа на корову.<BR> Именно это сходство<BR> Мы и берем за основу. </BODY> </HTML> |
начало HTML-документа начало заголовка информация о документе название документа конец заголовка начало тела заголовок 1 уровня горизонтальная линия заголовок 2 уровня короткий абзац абзац с принудительными разрывами строк конец тела конец HTML-документа |
2.2 Внешний вид HTML-документа
Важную роль для программиста играет внешний вид самой HTML-программы. Записывать программу нужно так, чтобы смысл ее конструкций был максимально понятен. Для такой рекомендации есть ряд веских причин.
- Ясно написанную программу легче отлаживать. В понятно написанных кодах легче найти соответствие экранного изображения командам, которые это изображение формируют.
- Понятную программу легче сопровождать, то есть вносить в нее изменения по прошествии какого-то времени. Также всегда существует вероятность того, что вашу программу будет модифицировать кто-то другой.
- Пользователь, просматривая документ, всегда может заглянуть на вашу программистскую кухню. Для этого достаточно щелкнуть позицию Показать в виде HTML в меню Вид браузера. И все предстанет перед любопытствующим взором[9].
Практически в любом HTML-документе в разделе заголовка можно обнаружить теги <META>. Это служебные теги, называемые также мета-тегами. Они играют вспомогательную роль, поставляя дополнительную информацию о web-странице, и могут вставляться не только разработчиками, но и редакторами. Эта информация может содержать ключевые слова и описание документа для поисковых машин, сведения об авторах, другие данные.
Атрибуты тега <META> записываются парами. Наиболее часто встречаются параметры name – content и http-equiv – content.
Примеры:
|
<META name="description" content="Это руководство представляет собой учебник |
Эта команда содержит краткое описание документа. Многие поисковые системы постоянно сканируют Интернет в поисках HTML-файлов, отыскивают в них эту информацию, сохраняют ее в своих базах данных и демонстрируют ее в ответ на запросы пользователей.
|
<META name="keywords" content="Интернет, HTML, WWW, руководство, публикация, гипертекст"> |
Эта команда содержит набор ключевых слов, описывающих содержание документа.
|
<META name="autor" content="Остап Сулейман Ибрагим Бендер”> |
|
<META name="copyright" content="Издательство ‘БХВ-Петербург’, 2006”> |
Эта команда содержит описание авторского права.
|
<META name=”generator” content="программа, с помощью которой разработана страница"> |
Другие примеры:
|
<META http-equiv="Content-Type" content="text/html; charset=windows-1251"> |
Эта команда дает браузеру указание интерпретировать загружаемый документ как содержащий HTML-текст в кодировке Windows/1251.
|
<META http-equiv="Content-Type" content="text/html; charset=koi8-r "> |
В этом примере указывается другая кодировка кириллицы.
|
<META http-equiv=”refresh” content="15"> |
Если браузер распознает эту команду, то перезагрузит страницу через 15 секунд.
|
<META http-equiv=”refresh” content="15; url=http://wnk.biz"> |
Через 15 секунд после загрузки страницы браузер загрузит новую страницу http://wnk.biz.
Если указать имя файла, содержащего звук, через 15 секунд после загрузки web-странички начнется загрузка и проигрывание этого звука (при условии, конечно, что браузер пользователя поддерживает формат этого звукового файла).
В тегах <META> могут применяться также атрибуты lang, dir и type. Первый задает информацию о языке и используется в многоязычных сайтах. Второй определяет направление вывода текста. Примеры:
|
lang=en |
английский |
|
lang=ru |
русский |
|
lang=fr |
французский |
Атрибут type обозначает тип применяемых таблиц стилей (будут рассмотрены отдельно).
Самым первым тегом в HTML-документе может быть тег <!doctype>, содержащий информацию о версии языка (чтобы браузер, отображающий web-страницу, мог учесть особенности или ограничения этой версии).