Лабораторная работа №2.
Неформатированный и форматированный текст.
Целью данной лабораторной работы является: создание несложного HTML-документа, в состав которого будут входить следующие элементы:
Неформатированный текст
Форматированный текст
Упорядоченный (нумерованный) список
Неупорядоченный (маркированный) список
Вложенный список
Сперва нам нужно создать новый HTML-документ, в котором и будет выполняться данная Лабораторная работа. Фактически, этот документ будет являться следующим элементом нашего будущего сайта о МАИ. Для создания такого документа давайте используем наш шаблон, который мы приготовили в 1-й Лабораторной работе. Для этого откроем его, используя наш редактор Блокнот. Напомню, что файл с шаблоном имеет название «№ группы_HTML1.htm».
Перед тем, как мы приступим непосредственно к выполнению нашей работы, шаблон необходимо немножко подредактировать. Необходимо изменить всего лишь 2 элемента нашего шаблона – это название страницы и ее «тело». Изменим название документа на название нашей Лабораторной работы №2, а в теле документа уберем тег <IMG>, поскольку в этой работе графические изображения использоваться не будут. Также необходимо изменить и сам тэг <BODY> так, чтобы наша будущая страница по оформлению не отличалась от прежней. Изменим его на:
<BODY BACKGROUND="backgr.gif" BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#008000" VLINK="#0080FF">
Итак, мы фактически создали с вами новую страничку. Теперь мы должны ее сохранить. Файл мы назовем как «kafedra703.htm» и сохраним в той же директории 2KURS. Теперь предварительная подготовка к работе завершена и можно непосредственно приступить к выполнению работы.
Неформатированный текст. Структуризация документа. Форматирование html-документа
Теперь, после того, как вы познакомились с основами создания HTML-документов, обсудим способы улучшения их внешнего вида. Любые опубликованные материалы имеют определенную структуру; даже сухие биржевые сводки построены таким образом, чтобы представить максимум информации в логически понятной и компактной форме. Если бы они были предложены читателю в виде бесконечной череды букв и цифр, целиком заполняющей газетную полосу, то вряд ли привлекли бы хоть какое-то внимание.
К документу, который вы создаете, должны предъявляться те же требования. Не зависимо от того, что вы готовите – Web-страницу или снабженную гипертекстовыми ссылками книгу – вы должны скомпоновать свою работу так, чтобы читатель смог быстро посмотреть текст и легко обнаружить нужный раздел.
Разделение текста на абзацы
Для оформления и форматирования текста в HTML-документах применяется в общем-то небольшое количество тегов. Если текст не оформлен никакими дескрипторами, то отображаться он будет в соответствии с настройками браузера пользователя.
Например:
<HTML>
<HEAD><TITLE>Первая web-страничка</TITLE></HEAD>
<BODY>Этот текст не оформлен никакими дескрипторами, поэтому на странице он будет отображаться в соответствии с настройками браузера и свойствами, указанными в теге BODY. Браузер будет автоматически форматировать текст в зависимости от ширины окна и разрешения дисплея.
</BODY>
</HTML>
HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Символы перевода строки оригинального документа игнорируются, в результате чего текст, отлично смотревшийся в окне вашего редактора, может превратиться в сплошной неудобочитаемый текст в окне программы просмотра.
Рассмотрим это на нашем примере. Вставим в тело нашей страницы текст из файла «kafedra703.txt», находящегося в директории 2KURS/2LAB. Вот содержание этого файла:
КАФЕДРА 703
СИСТЕМНОЕ ПРОЕКТИРОВАНИЕ АВИАКОМПЛЕКСОВ
Кафедра готовит специалистов по автоматизированным системам управления авиационными комплексами (АСУ АК), разрабатывающих алгоритмическое и программное обеспечение для бортовых автоматизированных систем интеллектуальной поддержки экипажа летательного аппарата.
Специалисты по АСУ АК обеспечивают информационно-алгоритмическое комплексирование различных бортовых систем в единую вычислительную сеть, разрабатывают системы, имитирующие интеллектуальные возможности пилотов по принятию решений в условиях дефицита времени и избытка информации (Пилот-робот.).
Основными направлениями подготовки специалистов на кафедре являются:
-программирование на алгоритмических языках PROLOG, PASCAL, Ada, Assembler и др.
-компьютерное, математическое, операционное, полунатурное моделирование
-теория игр и статистических решений
-автоматизированные системы планирования и управления
В процессе обучения студенты имеют возможность свободного использования вычислительной техники IBM и VAX.
Выпускники кафедры являются специалистами-системотехниками по автоматизированным системам, имеющим широкое применение в гражданской и военной авиации, медицине, банковской и биржевой деятельности, то есть везде, где вычислительная техника и современные достижения в области искусственного интеллекта помогают решать профессиональные задачи.
Теперь давайте сохраним нашу страницу и попробуем ее открыть с помощью браузера.
Получим довольно интересную картину – наш отформатированный в редакторе текст превратился в сплошной.
Избежать подобной неприятности позволяет разделение на абзацы при помощи специальных элементов. Поместите открывающий тэг <P> в начало каждого нового абзаца вашего текста, а закрывающий </P> в конце того же абзаца, и программа просмотра отделит абзацы друг от друга пустой строкой.
После разделения текста на абзацы, он принимает уже более-менее понятные очертания:
Тэг <P> имеет параметр ALIGN, управляющий выравниванием текста параграфа с помощью четырех аргументов: LEFT, RIGHT и CENTER:
<P ALIGN=LEFT> — выравнивание текста по левому краю экрана;
<P ALIGN=RIGHT> — выравнивание текста по правому краю экрана;
<P ALIGN=CENTER> — выравнивание текста по центру экрана;
По умолчанию, т.е. когда этот атрибут не используется, происходит выравнивание по левому краю.
Перевод строки
Для того, чтобы перейти на следующую строку в любом нужном вам месте текущей строки, в HTML существует тэг разрыва строки <BR>. Он заставляет программу просмотра выводить стоящие после него символы с начала новой строки. В отличие от тега абзаца, тэг <BR> не добавляет пустую строку. Вдобавок он не имеет соответственного закрывающего тэга.
Попробуем расмотреть действие этого тэга на примере. Правда, если вы помните, в Лабораторной работе №1, мы уже использовали этот тэг, хотя еще и не знали толком его значения. Итак, вернемся к нашему тексту… Попробуем отформатировать отдельные его элементы (заголовок, список, и «(Пилот-робот)») с помощью тэга переноса строки.
Такой форматированный текст программа просмотра отобразит следующим образом
Использование тэга <BR> требует осторожности – возможна ситуация, когда браузер уже сделал перевод строки за одно-два слова до того, как встретил ваш тэг <BR>. Это бывает в случае, если ширина окна программы просмотра читателя меньше, чем тот же параметр программы, с помощью которой вы тестировали ваш документ.
Бывают случаи, когда возникает потребность в операции противоположного назначения – запретить перевод строки. Текст, заключенный между тэгами <NOBR> </NOBR>, будет гарантированно располагаться на одной строке без переноса на другую.
Пока наш документ выглядит довольно скучно. Для того чтобы он смотрелся интереснее, попробуем придать ему определенную структуру. Для этого текст разбивается на логические части, каждая из которых посвящена отдельной теме. После того, как это будет сделано, каждой части текста следует дать смысловой заголовок с целью облегчить поиск нужной темы.
Заголовки
Заголовки имеют важнейшее значение в структурировании HTML-документов. Они как бы ведут читателя по вашему документу, направляя его к нужной теме. Тэги заголовков являются одними из самых употребляемых в языке разметки гипертекста.
Элемент «заголовок» является контейнером и поэтому должен иметь открывающий и закрывающий тэги (прим. <H1> и </H1>). HTML располагает шестью уровнями заголовков: от H1 (самый верхний) до H6 (самый нижний). Программа просмотра выводит каждый из них, но вы не можете знать точно в каком именно виде.
Для большей наглядности, поэкспериментируйте с заголовком нашего текста, используя тэги заголовков разного уровня, и подберите те, которые вам больше понравятся.
Вот что у меня получилось после применения заголовков <H1> и <H3>:
Точно так же, как и в элементе «абзац», в заголовках можно использовать атрибут ALIGN. Его применение здесь важно с той точки зрения, что не все программы просмотра выравнивают заголовки по левому краю окна.
В нашем случае, заголовок выровнен как раз по левому краю. Но, думаю, будет гораздо красивее, если мы с вами, применив атрибут ALIGN к заголовкам, расположим их по центру.
Горизонтальные линии
Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Сейчас часто используют рельефную, вдавленную линию, чтобы обозначить «объемность» документа.
Элемент <HR> позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тэг не является контейнером, поэтому не требует закрывающего тэга. До и после линии автоматически вставляется пустая строка.
Для управления внешним видом отображаемых линий у тега <HR> имеются четыре параметра: SIZE, WIDTH, ALIGN и NOSHADE:
-
SIZE=N(пикселов)
устанавливает толщину линии;
WIDTH=N(пикселов или процентов)
устанавливает ширину линии. Ширина линии может быть жестко указана в пикселях или в процентах относительно ширины окна браузера;
ALIGN=LEFT (RIGHT или CENTER)
устанавливает выравнивание отображаемой линии относительно окна браузера. При отсутствии параметра ALIGN линия всегда центруется относительно окна браузера;
NOSHADE
отключение трехмерного режима отображения линий. При указании этого параметра линия будет отображаться как простая черная полоса
COLOR
Указывает цвет линии
Давайте посмотрим, как будет выглядеть наш текст, отделенный от заголовка горизонтальной линией с произвольными параметрами.
Ну что ж, довольно неплохо, неправда ли? Основную задачу по форматированию нашего документа мы выполнили. Теперь настало время приступить непосредственно к форматированию самого текста.