Служба WWW (World Work Web)
Это единое информационное пространство в котором имеется множество взаимосвязанных электронных документов. Они хранятся на web-серверах и представляют собой web-сайты, содержащие web-страницы. Web-страницы представляют собой гипертекстовые документы, оформленные используя специальные теги, которые позволяют задавать их форматирование и оформление. Т.е. создаются с помощью языка HTML. Для обеспечения этой службы используют протокол http, кот. обеспечивает связь между гипертекстовыми документами. Для просмотра документов применяются программы - браузеры.
Структура.
HTML документы записываются в ASCII формате и поэтому могут быть созданы и отредактированы в любом текстовом редакторе. Язык HTML представляет из себя множество команд - тегов, открывающих <...>, и закрывающих </...> действия соответствующие данным командам. Это могут быть команды создания каких-либо элементов страницы, как например встроенная таблица или изображение. Текст заключенный между тегами, при выводе на экран с помощью браузера подчиняется правилам свойственным для данных тегов. Теги могут быть вложены друг в друга, для придания тексту сразу нескольких свойств. Чтобы написать WEB страницу, нужно создать при помощи блокнота или Worda текстовый файл, с расширением .htm Дальнейшее редактирование можно производить при помощи браузера.
Голова документа.
Для объявления названия страницы служат команды <head><title>ГОСЫ</title></head>. Название - необязательная часть в документе, но кроме отображения в заголовке браузера имени страницы, может включать неограниченное количество очень полезных META-инструкций. Обычно они располагаются между двумя первыми метками <head> и <title>. META-инструкция это стандартное описание темы документа (для поисковых систем) или же прямое указание для браузера. Инструкция дает указание браузеру интерпретировать документ как HTML-текст. Пространство между закрывающими метками </title> и </head> часто используется для хранения операторов JavaScript.
Тело документа.
Основной текст страницы находится после необязательного заголовка, между метками: <BODY>...тело страницы...</BODY>. Указывает начало и конец тела HTML-документа. Между начальным и конечным тегами содержится текст документа, изображения и таблицы. Одним словом, все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки.
Атрибуты:
BACKGROUND – определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.
BGCOLOR – определяет цвет фона документа.
TEXT – определяет цвет текста в документе.
LINK – определяет цвет гиперссылок в документе.
ALINK – определяет цвет подсветки гиперссылок в момент нажатия.
VLINK – определяет цвет гиперссылок на документы, которые вы уже просмотрели.
Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
Элементы языка HTML.
Подразделяются на блочные и текстовые. Блочные элементы управляют частями текста типа абзаца. Текстовые элементы задают свойства отдельных символов, слов и предложений. При использовании управляющих тегов необходимо соблюдать следующие правило вложенных элементов
1.Элементы не должны пересекаться. Это означает что если открывающий тег команды находится внутри элемента то и закрывающий должен быть внутри.
2.Блочные элементы могут содержать вложенными как блочные так и текстовые элементы
3.Текстовые элементы могут содержать вложенными только текстовые
Соблюдение правил вложенности обеспечивает корректное отображение гипертекстовых элементов браузером.
<h> - заголовок </h>
<h1> - заголовок 1 уровня</h1> Всего 6 уровней. При отображении в окне браузера заголовок выделяется жирным шрифтом и размером, чем меньше цифра тем крупнее заголовок.
<p> абзац </p> Закрывающий тег может отсутствовать. В окне браузера абзацы отделяются пустой строкой.
<br> - конец строки (разрыв). Непарный тег, который переводит курсор в начало следующей строки.
<hr> горизонтальная линейка. При задании линейки могут быть указаны дополнительные параметры.
<HR align - выравнивание по горизонтали (left, right, center)
<HR size - толщина линейки (в пикселях), width – длина (в пикселях или %)
Параметр выравнивания align можно также применить для заголовков и абзацев.
Для подробного задания форматирования используется тег font, коорый является парным и должен содержать хотя бы один из параметров colоr, face, size.
face - задает гарнитуру шрифта Arial, TimesNewRomen, если слов несколько то обязательно кавычки. Браузер сравнивает название гарнитуры с названиями всех установленных шрифтов и отображает текст нужным шрифтом. Если шрифт не найден используется или близкий или заданный по умолчанию.
size - задает размер шрифта (от 1 до 7).Чем больше цифра тем больше размер шрифта. Размер можно задавать в относ.ед.(+1) - увеличивает шрифт на 1 размера.
После заданных параметров идет текст с заданными параметрами и закрывающий тег
</font>.
Чтобы задать параметры шрифта для всего документа применяют непарный тег <Basefont> с параметрами как для тега font, его помещают внутри элемента<body>.
Параметры шрифта можно задать с помощью след.тегов
<b> жирный шрифт</b>
<i> курсив</i>
<u> подчеркнутый</u>
<s> зачеркнутый</s>
<sub> подстрочный</sub>
<sup> надстрочный</sup>
<cite> цитата</cite>
<em> выделение</em>
<strong> сильное выделение </strong>
Для оформления текста программы используют следующие стили:
<code> программа </code>
<kbd> ввод с клавиатуры </kbd>
<samp> пример </samp>
<var> переменная </var>
В зависимости от типа и версии браузера оформление стилей может несколько отличаться.
Списки.
Списки используются для выделения перечисляемых элементов текста. Списки бывают упорядоченные, неупорядоченные и списки определений. Упорядоченные списки задаются с помощью парного тега <ol> и при отображении в окне браузера сопровождаются нумерацией. Каждый элемент списка задается парным тегом <li>.Закрывающий тег может отсутствовать. Если необходимо задать способ нумерации , в открывающем теге списка задается параметр type
"I" - нумерация римскими цифрами
"A" - латинскими буквами(большими)
105 продолжение (страница 2)
"а" - латинскими буквами(маленькими)
"" - арабские цифры
Неупорядоченные или маркировочные списки задаются парным тегом <ul>.Элементы списка так же обозначаются <li>
Используя параметр type можно также определить тип маркера
-
Circle
-
square
-
disk
Списки определений задаются парным тегом <dl>. Определение включает в себя термин, который задается непарным тегом <dt> и его объяснение <dd>.
Гипертекстовые ссылки.
Основой отличительной особенностью гипертекстовых документов является возможность переходить как между различными документами так и в пределах одного документа. Эта возможность реализуется с помощью механизма гиперссылок. Гиперссылки задаются используя парный тег <A HREF=[URL-адрес]>, затем текст ссылки и закрывающий тег</A>. Например,<A HREF="www.ksu.kostroma.net">КГУ</A>
В рабочем окне браузера гиперссылка выделяется цветом и подчеркивается. При наведении указателем мыши он меняет форму и после щелчка по гиперссылки браузер загружает документ, адрес которого задан гиперссылкой. Если гиперссылка указывает на другой сайт URL-адрес обычно указывают в полной форме, если гиперссылка указывает на документ, входящий в структуру текущего сайта, задают относительный адрес. Это позволяет не менять адреса ссылок при перемещении сайта целиком. Гиперссылки могут указывать на определенное место внутри текущего документа. Чтобы задать такую гиперссылку в требуемом месте ставят отметку, которая называется якорем, используя параметр Name. <A Name=a> место якоря </A>.Для перехода на якорь в гиперссылке с указывают URL-адрес и ссылку на якорь, который обозначают #.<A Href=#a> переход на якорь </A>.Если переход осуществляется внутри текущего документа, URL-адрес можно опустить.
web-графика
Размещение рисунков на web-документе используется для повышения наглядности и привлекательности сайтов. Рисунки должны храниться в графических файлах. Чаще других используются форматы gif и jpeg. Для подгрузки изображения используется графические редакторы. Для размещения в гипертекстовом документе изображения используют тег <IMG src="image.gif">. Это непарный тег в кот. могут быть заданы параметры height - высота, width - ширина, align - выравнивание (left,right), hspace - отступ по вертикали (bottom, midle. top), vspase - и горизонтали между изображениями и текстом.
Кроме того в теге может быть вставлен альтернативный текст alt - который выводится когда вывод изображения отключен.
Рисунок может использоваться не только как отдельный элемент сайта но и как фон для текста и других элементов. Для задания фонового рисунка в теге body задают параметр background, после которого указывают имя файла фонового рисунка. Если размер фонового рисунка меньше размера страницы он копируется на всю страницу.
Таблицы.
Таблицы в документе используются для размещения данных в строках и столбцах, а также для точного позиционирования отдельных элементов страницы. Для создания таблицы используется тег <table> с параметром для всей таблицы border -рамка. Далее в таблице задается заголовок с помощью парного тега <caption>. Формирование таблицы осуществляется построчно. Строки задаются с помощью тега <tr>, который является парным, но закрывающий тег может отсутствовать. Ячейки таблицы могут быть 2-х видов: - ячейки заголовков<th> и обычные ячейки <td>.Ячейки заголовков выделяются жирным шрифтом.
<tr><th> заголовок 1 столбца.<th> заголовок 2 столбца
<tr><td> 1 ячейка <td>2 ячейка
Атрибуты используемые при создании таблиц.
Align - служит для выравнивания по горизонтали в таблице, строках и ячейках. В заголовках этот параметр позволяет разместить заголовок над таблицей top или под bottom.
VAlign - выравнивание по вертикали для строк и ячеек. Может принимать значения top, bottom, middle.
Width - ширина таблицы или ячеек
Height - высота.
Для создания сложных таблиц требуется объединить несколько ячеек в 1. Такое соединении может проводиться по горизонтали, объединяя несколько столбцов. Для этого используют параметр colspan=кол-во объединяемых столбцов, задаваемый в ячейке. Можно объединить ячейки по вертикали – параметр rowspan. Данные параметры записываются в теге 1-ой объединяемой ячейке, при этом другие объединяемые ячейки задаваться не должны.
Для задания цвета фона в таблице, ячейке или строке используют параметр bgcolor=#FF0000. Для задания зазора между ячейками в таблице служит параметр cellspasing=5 – в пикселях, для задания отступа между ее границей и содержимым - cellpading=3.
Если необходимо чтобы содержание ячейки выводилось в одну строку, используют параметр nowrap.
В каждой ячейке таблицы может содержаться не только текст но и любой гипертекстовый документ, в том числе и таблица. При отображении таблицы в окне браузера происходит ее автоматическое форматирование в соответствии с заданными параметрами и содержимым ячейки.
Отображение нескольких документов.
Язык html позволяет в рамка первой web-страницы отображать содержимое нескольких файлов. Для этого используют разбиение таблицы на прямоугольные области называемые фреймами. Использование фреймов позволяет более гибко менять содержимое страницы, изменяя содержимое ее отдельных частей. При этом меняется структура гипертекстового документа. Вместо тела документа <body> задается структура фреймов с помощью парного тега <frameset>. После тега <frameset> с помощью параметра сols или raws задается способ разбиения страницы на фреймы. Параметр cols разбивает страницу на колонки, т.е. вертикальные области, а raws на горизонтальные полосы. После параметра задается размер областей в пикселях, % или знаком *. Параметр * означает что под соответствующую область выделяется все оставшееся пространство окна. В соответствии с количеством заданных областей разбиения должно быть количество элементов в тегах <frameset>. В качестве элемента могут выступать как новые элементы структуры фреймов <frameset> , так и сами фреймы, задаваемые с помощью тега <frame>. Это непарный тег с обязательным параметром src, после которого указывается имя файла, размещаемого в соответствующей области. В теге frame может содержаться параметр name, задающий имя фрейма. Затем используя это имя можно загружать в фрейм новые документы. Для этого в тег гиперссылки добавляется параметр target, после которого указывается имя фрейма, в котором необходимо загрузить документ, на который ссылается гиперссылка. Параметр target может иметь специальное значение, определяющее куда будет загружаться содержимое страницы заданное ссылкой:
Target = blank – док. загружается в новое окно браузера.
- Self – документ загружается в окно, содержащее гиперссылку.
- Parent – документ загружается в окно с описанием фреймов.
- Top – документ загружается в окно игнорируя написание фремов.
Существуют специальный вид фреймов , которые могут размещаться в обычном гипертекстовом документе на произвольном месте - это плавающие фреймы. Их задают с помощью парного тега <iframe>. При размещении плавающего фрейма текст документа будет его обтекать. Задается атрибут источника scr после которого указывается имя файла, размещаемого в плавающем фрейме. Кроме того, можно использовать параметры name, align, height, width.. между открывающим и закрывающим тегами плавающего фрейма размещается текст, который будет выводиться если браузер не поддерживает плавающие фреймы.
