lab_1(ПвИ)
.pdf
Кавычки. В полиграфии существует три типа кавычек: елочки, верхние и рукописные лапки. Они обозначаются следующим образом:
елочки - « и » верхние - “ и ” рукописные - „ и ”
Дефис и тире. В полиграфии существует три знака: длинное тире, короткое тире и дефис. Из них на компьютерной клавиатуре есть только один – последний. Отсутствующие символы записываются так:
короткое тире - – длинное тире - —
5.10 Заголовки
Язык HTML поддерживает 6 уровней заголовков от <H1> до <H6> (чем больше цифра, тем мельче шрифт). По умолчанию браузеры выводят заголовки жирным начертанием. Для создания заголовков используется конструкция:
<H1> Введение</H1>
<H2>1. Использование информационных технологий при решении экономических задач </H2>
<H3>1.1 Классификация ИТ </H3>
В браузере это будет выглядеть следующим образом (рис.6):
Рис. 6. Отображение заголовков разного уровня в браузере
Заголовки так же можно выравнивать по левому краю (по умолчанию), по правому краю и по центру. Для этого используется атрибут align с параметрами соответственно left, right, center.
Пример:
<h1 align=center >Заголовок</h1>
Заголовок будет отцентрирован.
5.11 Шрифты
Вся работа со шрифтами в HTML формируется одним тегом <FONT>, но у этого тега есть три атрибута, которые отвечают за его имя, размер и цвет. Атрибут, отвечающий за имя шрифта, называется face. В код это заносится так, <FONT face=Arial> ……..
11
</FONT>, но если имя шрифта состоит из двух или более слов, то название помещается в кавычки.
Атрибут, отвечающий за размер шрифта, называется size. В код это заносится так, <FONT size=5> ……… </FONT>. Размер задается в диапазоне от 1 до 7 (чем больше цифра, тем крупнее шрифт).
Атрибут, отвечающий за цвет шрифта, называется color. В код это заносится так,
<FONT color=red> ………. </FONT>.
Также можно использовать вложенные комбинации, при этом порядок атрибутов не имеет значения, например:
<FONT face=Arial size=5 color=red> <I> Продолжаем изучать HTML </I><FONT>
Рис. 7. Форматирование шрифта
5.12 Списки
Списки в HTML бывают трех видов: неупорядоченные, упорядоченные и списки определений.
Неупорядоченные списки создаются тегами <ul> </ul>. Название тега <ul> - происходит от английских слов «unordered list», что означает «неупорядоченный список». Внутри помещается весь список. Отдельные элементы списка отмечаются тегом <li> – от английского «list item» («элемент списка»). Закрывающий тег для <li> не требуется. У команд <ul> и <li> можно указать атрибут type, который принимает одно из трех значений: disc, square, circle.
Пример:
В html-коде |
На странице браузера |
<ul>
<li> Первый элемент
<li> Второй элемент
<li> Третий элемент
</ul>
<ul type=circle>
<li> Первый элемент
<li type=square> Второй элемент
<li> Третий элемент
</ul>
12
Упорядоченные списки создаются тегами <ol> и </ol> (от английского «ordered list» или «упорядоченный список»). У тега <ol> есть два атрибута type и start. Атрибут type задает тип нумерации:
1 — арабские числа 1, 2, 3, ...; a — прописные буквы a, b, c, ...;
A — заглавные буквы A, B, C, ...;
I — маленькие римские числа i, ii, iii, ...; I — большие римские числа I, II, III, ...
Атрибут start указывает, с какого номера начинать список.
У тега <li> можно указать тоже два атрибута: type и value. С помощью value можно задать номер элемента в списке.
Пример:
В html-коде |
На странице браузера |
<ol type=i start=5> <li> Первый элемент
<li> Второй элемент
<li type=1> Третий элемент
</ol>
<ol type=I>
<li> Первый элемент
<li> Второй элемент
<li value=10> Третий элемент
</ol>
Списки определений. Для создания списка используются теги <dl> и </dl>. Элемент списка создается двумя тегами <dt> и <dd>. Они не требуют закрывающих тегов. Первый тег задает термин, второй - определение. Для большей наглядности термин можно выделить жирным шрифтом.
Пример:
В html-коде
<dl>
<dt> <b> WWW (World Wide Web) </b>
<dd> Всемирная Паутина — основная служба в сети Интернет, позволяющая получать доступ к информации на любых серверах, подключенных к сети
<dt> <b> DNS (Domain Name System) </b>
<dd> Система доменных имен — распределенная служба формирования имен узлов, используемая в сети Интернет, устанавливающая соответствие между именами узлов и доменов, с одной стороны, и IP-адресами, с другой стороны.
</dl>
13
На странице браузера
, HTML |
. |
, |
, |
. |
|
7. Гиперссылка
Гиперссылка - это указатель внутри гипертекстового документа, указывающий на другой документ (связывает с другим документом), который также может быть гипертекстовым.
Гиперссылка может быть присвоена любому элементу текста, расположенного на странице. Для организации гиперссылки существует контейнерный тег <A>. Между открывающим и закрывающим тегами располагается текст, который будет отображен подчеркнутым в окне браузера. Именно этот текст и будет объектом, которому назначена гиперссылка на какой-то другой объект вашего сайта или глобальной сети.
Например:
Хотите увидеть, как работает гиперссылка щелкните <A href="2.html"> здесь </A>
В браузере это будет выглядеть следующим образом (рис.8):
Рис. 8. Гиперссылка
Рассмотрим атрибуты тега <a>.
7.1 Атрибут гиперссылки href
href — определяет находящийся между начальным и конечным тегами текст как гипертекстовую ссылку (URL, или линк) на объект, указанный в значении данного параметра.
Возможные варианты задания значения:
14
href="http://www.tpu.ru" — создает ссылку на Web-сайт или www-документ; href="ftp://ftp.tomsk.ru/pub/" — создает ссылку на ftp-сайт или
расположенные на нем папки и файлы;
href="mailto:abc@mail.ru" — запускает почтовую программу-клиент с заполненным полем имени получателя;
href="#top" или href="#bottom" задает возврат на начало или конец Webстраницы, что бывает полезно, если Web-страница не входит целиком на экран монитора.
href="#имя" создает гиперссылку на часть текущего документа. Здесь имя — это помеченная область текущего документа, например отдельное слово-указатель, уникальное для данного документа.
Для того чтобы пометить эту область, используется тоже тег <a>, но с атрибутом name.
Атрибут name помечает находящуюся между начальным <a> и конечным </a> тегами область документа как возможный объект для ссылки. В качестве значения нужно написать любое слово-указатель, уникальное для данного документа.
Например,
<a name="Chapter1">Глава 1</a>.
Теперь на область «Глава 1», помеченную именем «Chapter1», можно ссылаться при помощи линка
<a href="#Chapter1">Глава 1</a>.
Таким способом можно организовать гипертекстовое оглавление большого текстового документа, разбитого на разделы, главы, пункты, подпункты.
href="page1.html" — указывает на документ, находящийся в том же каталоге, что и тот, с которого происходит вызов. Если же этот документ находится в другом каталоге, то требуется указать полный путь.
Рассмотрим несколько типичных вариантов задания адреса ссылки. 1. Файлы располагаются в одной папке:
Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий:
<a href="Ссылаемый документ.html">Локальная ссылка</a>
Подобное имя файла взято только для образца, на сайте в именах файлов не следует использовать русские символы с пробелами, да еще и в разном регистре.
2. Файлы размещаются в разных папках:
Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано в примере.
<a href="../Ссылаемый документ.html">Локальная ссылка</a>
3. Файлы размещаются в разных папках:
15
Теперь исходный файл находится в двух вложенных папках, и чтобы сослаться на документ в корне сайта, требуется повторить написание предыдущего примера два раза.
<a href="../../Ссылаемый документ.html">Локальная ссылка</a>
Аналогично обстоит дело с любым числом вложенных папок.
4. Файлы размещаются в разных папках:
Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку — в папке. В этом случае путь к файлу будет следующий.
<a href="Папка/Ссылаемый документ.html">Локальная ссылка</a>
Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.
<a href="Папка 1/Папка 2/Ссылаемый документ.html">Локальная ссылка</a>
7.2 Атрибут гиперссылки target
Еще один атрибут тега <a> - target указывается для того, чтобы определить, в каком окне должен открываться документ, на который ведет гиперссылка. Если параметр target не указан, новый документ будет открыт в том же окне браузера. Если указать параметр target c зарезервированным именем "blank", документ, на который указывает гиперссылка, будет открыт в новом окне, что рекомендуется делать при ссылках на другие сайты. Этот атрибут используется и во фреймах, но об этом чуть позже.
7.3 Цвет гиперссылок
Для всех ссылок на странице можно задать цвета: link - определяет цвет просто ссылки;
alink - определяет цвет активной ссылки (нажатой); vlink - определяет цвет уже посещенной ссылки.
Это - атрибуты тега <body>, в нем они и размещаются. Их цветовые параметры — в таблице 1 приложения 1, например:
<body link="#0000FF" alink="#6495ED" vlink=red>
7.4 Ссылки, которые не являются ссылками
Гипертекстовая ссылка не всегда ссылается на гипертекстовый документ. На самом деле в качестве значения атрибута href можно указать ссылку на любой объект. Если браузер распознает в нем документ, который он может открыть для просмотра, то он так и поступит.
16
В противном случае он просто предложит загрузить этот файл. Браузеры позволяют просматривать (разумеется, если на компьютере установлено соответствующее приложение) документы MS Word, MS Excel, Adobe Acrobat и др.
Рассмотрим несколько наиболее интересных и широко распространенных способов применения гиперссылок не совсем по прямому назначению.
Загрузка файлов
Если значением атрибута href является имя файла, который браузер не может открыть (например, rar или zip – архив), то браузер предлагает загрузить этот файл из Интернет и сохранить на диске. Если на компьютере установлена специальная программа для загрузки файлов, такая как GetRight, браузер передает управление ей. В противном случае он загружает файл самостоятельно. Выглядят подобные ссылки примерно так:
<A href=" slava.rar" > Сохранить файл </A>
В браузере это будет выглядеть следующим образом:
При нажатии на ссылку появится следующее окно (рис.9):
Рис. 9. Загрузка файла
Этим свойством гиперссылок широко пользуются для передачи через Интернет самой разной информации. Обычно в целях ускорения загрузки она выкладывается на сайты в виде архивов.
Ускоренная отправка писем
Редкий сайт обходится без ссылки вроде «Написать Web-мастеру». Чтобы её организовать, используется гиперссылка, где значением атрибута href является адрес электронной почты, перед которым стоит ключевое слово mailto:
хотите отправить мне письмо
<A href="mailto:footbaler83@mail.ru"> жмите сюда </A>
Если щелкнуть на такой ссылке, запускается почтовая программа (надо полагать, на компьютере посетителя она есть!) и открывается бланк письма, где в строке адреса уже стоит: footbaler83@mail.ru. Дальнейшее управление передается почтовой программе.
Запуск программы
Наконец, следует обратить пристальное внимание ещё на один способ использования гипертекстовых ссылок – ссылки на выполняемые файлы. Такие ссылки встречаются в
17
Интернет достаточно часто. Большинство выполняемых файлов, которые загружаются таким образом, – самораспаковывающиеся архивы. Но встречаются и другие программы.
Итак, напишем код, с помощью которого с Web-страницы, по идее, должна запускаться произвольная программа:
хотите запустить проигрыватель <A href="wmplayer.exe"> Это здесь </A>
При обращении по ссылке браузер предлагает на выбор два действия: запустить программу немедленно или сохранить её на диске. Такое предупреждение выводится не зря. Трудно придумать более «питательную» среду для компьютерных вирусов, чем Интернет. Поэтому, если загружается файл из сети, лучше сохранить его на диске, проверить антивирусной программой и только потом запускать на выполнение.
8 Графические объекты на web-странице
8.1 Вставка графики
Для размещения картинок на Web-страницах необходимо указать в HTML-коде две вещи. Во-первых, что вставляем графический элемент, а во-вторых, откуда его вставляем. Это делается с помощью одиночного тега <IMG> (от английского слова image – «изображение») с атрибутом src (от английского source – «источник»). Требования к графическому файлу — те же, что и для фонового рисунка.
Если файл с изображением находится в той же папке, что и код, то просто указывается имя, например:
<IMG src=vasya.gif>
а если в другом каталоге, то указывается полный путь к файлу, например:
<IMG src="C:/Мои документы/Vasya/Vasya/vasya.gif">
Примечания:
Если название одной из папок состоит из нескольких слов, разделенных пробелом, весь путь нужно заключить в кавычки. Вообще, здесь действует универсальное правило HTML относительно кавычек: если вы не уверены, нужны ли кавычки, - ставьте их.
8.2 Размер изображения
В теге <IMG> есть два атрибута, определяющих ширину и высоту изображения, соответственно: width и height:
<IMG src=vasya.gif width=100> или <IMG src=Ветер.jpg height=100>.
Размер можно задавать в абсолютной величине (пикселях) или в относительной (процентах). Чтобы ощутить разницу попробуйте оба способа изменения размера картинки.
8.3 Подсказка
В HTML существует атрибут, позволяющий задавать подсказки к элементам, в частности, к картинкам – alt или title.
Например:
<IMG src=Ветер.jpg height=100 alt="Обычная картинка" title = "Обычная картинка">
В случае случайной потери исходного файла картинки в браузере появится следующее (рис. 10):
18
Рис. 10. Отсутствие файла картинки
Как видно, возле крестика появилась надпись, которую ввели в атрибут alt. Также подсказка появляется при наведении мыши в область размещения картинки.
8.4 Выравнивание картинки по горизонтали
Для выравнивания графических объектов по горизонтали используется уже знакомый нам атрибут align. Он также используется в теге <IMG>.
Например:
<IMG src=Ветер.jpg height=100 alt="Обычная картинка" align=left>
Если необходимо начать писать текст с новой строки тег <P> для этого не подходит, вместо него используется тег <BR> с атрибутом clear. Выглядит это так:
<IMG src=Ветер.jpg height=100 alt="Обычная картинка" border=1> <BR clear=all> Начал писать с новой строки
В браузере это будет выглядеть следующим образом (рис.11):
Рис. 11
8.5 Выравнивание картинки по вертикали относительно текущей строки
Есть ещё одно любопытное применение картинок – внутри текста, где они иногда заменяют отсутствующие в распространенных шрифтах символы. Для выравнивания изображений по вертикали относительно текущей строки используется уже знакомый атрибут align, которому присваиваются следующие значения:
absbottom – выравнивание по нижним выступающим элементам букв в строке; baseline и bottom – по нижнему краю строки;
absmiddle и middle – по середине, texttop – по верхнему краю;
top – по верхним выступающим элементам букв в строке.
8.6 Рамки и отступы
Если необходимо отобразить рамку графического элемента, то в теге <IMG> используется атрибут border, значение которого задается в пикселях, например:
<IMG src=Ветер.jpg height=100 alt="Обычная картинка" border=1>
19
В браузере это будет выглядеть следующим образом (рис. 12):
Рис. 12 Рамка вокруг картинки
Вокруг картинки появилась рамка толщиной в 1 пиксель.
Что касается отступов между картинкой и предполагаемым текстом, то в HTML всё просто. В теге <IMG> имеется атрибуты hspace и vspace, которые отвечают за отступы как по горизонтали, так и по вертикали от графического элемента. Значение задается в пикселях.
8.7 Ссылки-картинки
Едва ли не чаще текста в качестве гиперссылок используются изображения - всевозможные пиктограммы, логотипы, миниатюрные фотографии и даже целые графические поля ссылок, когда разные фрагменты одной картинки служат ссылками на различные объекты. Такие объекты - одно изображение на несколько ссылок - описывают картами изображений (image map).
8.7.1 Карта изображений
Представим себе, что имеется картинка, разные объекты которой должны служить ссылками на разные Web-страницы. Для реализации этого необходима некая конструкция, позволяющая разметить картинку, разделить её на «зоны влияния» разных гиперссылок.
Представим, что нужно разбить на зоны прямоугольное поле, размеры которого соответствуют размерам изображения. Понадобится как-то отмечать координаты этих зон. Причем за точку отсчета горизонтальных и вертикальных координат примем верхний левый угол изображения.
Для создания карты изображения используется конструкция, состоящая из тега <MAP> и «вложенных» в него тегов <AREA>. Тег <MAP> определяет собственную карту изображения целиком, а теги <AREA> описывают отдельные области карты. Тег <MAP> является парным, а <AREA> – непарным. Вся же конструкция выглядит примерно так:
<Map атрибуты карты>
<AREA атрибуты области>
<AREA атрибуты другой области>
</Map>
Необходимо связать карту изображения с самим изображением. Для этого используется единственный атрибут тега <MAP> – name. Благодаря ему, карте присваивается уникальное
имя, которое потом указывается в теге <IMG> |
с помощью специального атрибута usemap. |
Таким образом, карта изображения как бы накладывается на само изображение: |
|
<MAP name=”mymap”> |
|
. . . |
|
. . . |
|
</MAP> |
|
<IMG src=имя изображения.расширение |
usemap=#mymap> |
Имя изображения составляется по тем же правилам, что и другие имена в HTML.
Внимание: при ссылке на него в значении атрибута usemap перед именем карты ставится символ #.
20