1! Основой передачи инфы в интернете служит гипертекст(обычный текст,сожержащий гиперссылки)Они служат для связи инфы в пределах 1 документа и м.у различными документами находящимися на разных компьютерах в сети.Документ содержащий гипертекст называется веб-страницей.Изобретатель Тим Бернерс Ли в 1989г, а в 1991 году появились первые веб-страницы.Совокупность связанных тематически одним разработчиком веб страниц называется сайтом.Для передачи гипер текста используется протокол http(hyper text transport protocol).Совокупность прикладных программ и серверов работающих по спец протоколу с 1 типом инфы образует службу или сервис интернета.Самый популярный это веб сервис( также существует сервис эл.почты, служба работы с файлами, управление удаленными пк и тд)

2)Для нахождения документа в нете необходимо знать адрес сервера.На сервере адресом документа является полный путь к файлу.Для нахождения сервера используется цифровой ip адрес.он имеет длину 4 байта и записывается в виде 4 групп цифр разделенных точками.Текстовый вид адреса однозначно связанный с цифровым айпи –доменное имя.Оно состоит из нескольких осмысленных буквенных сочетаний разделенных точками.Формирование доменого имени отражает принцип объединения пк в сети:

Имя сервера.имя компанпии.доменное имя верхнего уровня.

Самый общий вид адреса документа в нете url(universal resourse locator)

2! Язык разметки гипертекста (html)-Hyper Text Markup Language.

Программы, написанные на этом языке, не требуют перевода в машинные коды. Они передаются по сети в виде текста. Получив текст созданный при помощи HTML браузер сам отформатирует текст в соответствие с командами т.е. оформит абзацы, заголовки, выдаст изображения и т.д. Все это будет сформатировано в зависимости от разрешения монитора, его размера, цветности, наличия шрифтов и т.д. История развития html связанно со столкновения противоположных подходов к проблеме компьютерного представления текстов. Первоначально был разработан обобщенный мета язык (sqmf) Он позволяет строить системы логической структурной разметки любых текстов. Структуризация означает, что управляющие коды вносятся в текст при разметке не несут никакой информации о внешнем виде документа. Они только указывают границы т.е. задают логическую структуру sqml позволяют исключать из языка детали представления электронного текста в различных программах, на разных комп. Платформах и на различных устройствах ввода sqml определенных только для записи элементов разметки. Для практической разметки разработано приложение «html». Изначально html разделял все sqml, но затем в язык были добавлены элементы управляющие вид документа и распределяющий возможности форматирования. В результате html стал представлять собой смесь логических элементов разметки с элементами ориентированными на графическое представление элементов на экране. Для разрешения противоречия был создан html 32. В нем было введено новое средство CSS. Они формально независимы от html и не нуждаются в его логических ограничениях системы CSS. Система CSS позволяет задавать параметры визуального представления любого элемента html. С учетом контекста его использования пользователь может задать стиль изображения, который образует иерархическую систему и относится к конкретному элементу документа и серверу. Принципы гипертекстовой разметки.

За основу модели разметки документов в html принята теговая модель. Теговая модель описывает документ как совокупность контейнеров каждая их которых начинается и заканчивается тегами. Тег – элемент разметки, который состоит из имен и списков атрибутов. Текст тега заключается в <>. Атрибуты следуют за именем тега и отделяются друг от друга пробелами. Атрибут может иметь конкретное значение. Значение указывается поле знака = за именем атрибута. Атрибут = «значение» (без пробелов). Если значение состоит из 1 слова или части, то кавычки можно не писать. Обычно теги состоят из начального и конечного элементов между которыми пишется текст и другие теги. Имя начального и конечного тегов совпадает. Совокупность начального и конечного элементов образует контейнерный блок. Некоторые теги не имеют конечного элемента. Например, тег <p>. Каждый новый закрывает контейнер предыдущего.

3! Структура документа html. Для создания документа html необходимо создать текстовый файл и сохранить его как .html. Гипертекстовый документ – это контейнер образованный тегами html.

<html>

</html>

<html>

<head> Общие свойства документа </head>

<body> Содержимое документа </body>

</html>

<hr – разделительная линия

<hr size=5 width 200 color=red

Группы тегов. Элементы html по их назначению:

1)Структурные (образует текст)

2)Форматирующие (задает стиль изображения) логический и физический стиль.

При физическом форматирование символов задается конкретные изменения символов. При логическом задается описание характеристика символов. При логическом задается описание, а браузер сам решает как изменить характеристику.

1)Структурные теги. 6 уровней заголовков

<H1 align=left, right, center>

Заголовок 1 уровня </H1>

<H6> Заголовок 6 уровня </H6>

2)Разделительная линия <HR width=число size=число color=цвет>

3) <p align=left, right, center>

Текст абзаца

Новый абзац закрывает предыдущий

4)Переход на новую строку <br>

5)<nobr> - неразрывная строка </nobr>

6)<pre> предварительно отформатированный текст </pre>

7)<div align=выравнивание> раздел для форматирования </div>

8)<span> аналог div не начинает новый абзац </span>

4! Логическое форматирование символов.

1)<em> особый шрифт </em>

2)<code> выделение программного кода </code> - позволяет разбивать текст на колонки и использует моноширинный шрифт

3)<var> выделение переменных в программном коде </var>

4)<kbd> выделение диалога ПК с пользователем </kbd>

5)<size> выделение источников информации </size>

6)<strong> особый шрифт </strong>

<p> - переел каждым тегом начинает новый абзац

Физическое форматирования символов.

1)<i> наклонный шрифт </i>

2)<b> жирный шрифт </b>

3)<u> Подчеркнутый шрифт </u>

4)<strike> зачеркнутый шрифт </strike>

5)<tt> монотайпный шрифт </tt>

6)_{нижний индекс}

7)^{верхний индекс}

8)<big> большой шрифт </big>

9)<small> маленький шрифт </small>

10)<font face=тип шрифта

Size=число

Color=цвет>

Текст форматируемый при помощи font </font>

5! Организация списков:

1)Нумерованные

2)Маркированные

Нумерованные:

<ol start=2 элемент списка с которого начинается нумерация

Type = вид нумерации

1-арабские

а-латинские маленькие

А-большие латинские

i-маленькие римские

I-большие римские >

<li> элемент 1 </li>

<li> элемент 2 </li>

</ol>

Маркированные:

<ul type=circle,disc,square>

<li> элемент 1 </li>

<li> элемент 2 </li>

</ul>

6! Таблицы

<table> - таблицы удобны тем, что браузер сам прорисовывает рамку. Размер ячеек может быть фиксированным, либо автоматическим согласованным размером содержимого, а именно текста и рисунков. Таблица позволяет размещать рядом рисунки и текст, разбивать текст на несколько колонок, управлять цветовым оформлением экрана, т.е. решать часть дизайнерской задачи. В настоящее время более современным средством программирования страниц является спам. Спам строится на основе тега div и каскадных таблиц стилей. Браузер не прорисовывает таблицу частями. Нельзя размещать всю веб-страницу в одной таблице.

<table bgcolor = «цвет» - цвет фона таблицы

Background = «url» - фоновый рисунок

Border = рамка в пикселях (число)

Border color = цвет рамки

Border color light = цвет

Border color dark = цвет

Align = выравнивание по горизонтали

Wight = число

Cellpacing = число – величина внутреннего обрамления в пикселях

Cellpadding = число – отступ между обрамлением и содержимым ячейки>

Внутри контейнера можно использовать:

<caption – заголовок таблицы вне ее рамок

Align = top – сверху

Left – слева

Right – справа

Botton – снизу

Текст заголовка </caption>

<tr – строка align – выравнивание bgcolor – цвета фона>

Внутри контейнера строки 2 элемента

<th> - заголовочная ячейка

<td> - ячейка с данными

Bg color = цвет фона ячейки

Wight = число % по отношению к таблице

Hight = высота

Rowspan = число объединяемых ячеек в столбец

Colspan = число объединяемых ячеек в строки

7! Вставка рисунков в документ

<img> - вставка рисунка

<img src = «url»

Alt = «подсказка»

Align = «выравнивание» lop – по верхнему краю

Botton – по нижнему краю

Middle

Left

Right

Wight= число % отношение к исходному рисунку

Height = число %

Usemap – рисунок в качестве карты

Карты – это изображение с активными областями. Щелчком мыши по активной области осуществляется переход по заданной ссылке. Карты формируются при помощи элементов map

<map name = «имя1»> внутри контейнера map используются элементы задающие основную область

<area атрибут>

<area атрибут>

</map>

Атрибут элемента area

Href = «url» - адрес по которому осуществляется переход по строке

Alt – подсказка

Shape = форму активной области

Circle – окружность

Совместно с атрибутом shape cords

Shape = circle cords «x,y,z»

Shape = rect cords "x1,y1,x2,y2»

Shape = poly cords «x1,y1,x2,y2,x3,y3»

Пример построения карты

<img src = «ris.jpg» usemap= «supermap»>

<map name= «supermap»>

<area href = «file.html»

Shape = circle cords «10,10,5»>

Shape = rect cords «10,10,5,5»>

<area href = «file2.html»

Shape = poly cords «1,1,3,4,5,5»>

</map>

8! Элементы разметки заголовка документа.

Элемент head служит для формирования общей структуры документа, задания его глобальных свойств. Информация, находящаяся в этом разделе, является служебной и необходима либо браузеру, либо серверу.

Контейнер head допускает вложение следующих элементов:

<title> (название документа)

<base> (служит для разрешения относительно ссылок)

<isindex> (использ.для поиска)

<link> (определяет взаимосвязь между документами)

<meta> (определяет дополнительную инф-ию)

<style> (задает стиль страницы)

<title> создает краткое однострочное название страницы. Оно выводится в заголовке окна браузера вместе с названием самого браузера. Если title не используется, то заголовок генерируется из имени файла. Название всегда используется поисковыми роботами, поэтому оно должно быть информативным. Название выводится системным шрифтом. Поэтому, если браузер не русифицирован, то абра-кабадра.

<base> элемент автоматически задает URL для относительных ссылок документа. Общепринятым стилем разметки гипертекстовых ссылок является разметка в относительных адресах. В этом случае URL задается относительно текущего местоположения документа. <A href=”..ris/ris1.jpeg> позволяет задать полный путь текущего каталога <BASE href=httpHYPERLINK "http://server2.ru/start"://HYPERLINK "http://server2.ru/start"serverHYPERLINK "http://server2.ru/start"2.HYPERLINK "http://server2.ru/start"ruHYPERLINK "http://server2.ru/start"/HYPERLINK "http://server2.ru/start"start> такая конструкция мб использована для создания зеркала сайта.

<index> для интерактивного поиска веб-страницы.Сам поиск проводится программами (сценарии CGI). Использование элементов из index приводит к тому, что сценарию CGI передается текст в формате URL?слово1+слово2+…+словоN, где словоN-ключевые слова для поиска. Prompt=позволяет задать приглашение= «приглашения для ввода ключевых слов». Action=позволяет указать сценарий CGI, который будет выполнять сам поиск.

<link> согласно теории гипертекстовых систем, все связи разделяются на два типа: контекстные и общие. Контекстную связь можно привязать к определенному месту документа, а общую можно отнести ко всему документу. Гипертекстовая связь задает отношения на множество информационных узлов. Общие ссылки нельзя привязать к контексту, например, два узла могут находиться в отношении следования при линейном просмотре страниц. Этот контейнер стал использоваться в каскадных таблицах стилей для загрузки внешних описателей стилей.< LINK rel=stylesheet href=”../css/css.htm” type=”texe/css”>

<style> предназначен для размещения описателей стиля для заданной страницы. Если описатель стиля совпадает с описателем стиля из внешнего файла, то происходим замена описателя стиля из внешнего файла. Элемент style имеет один атрибут type: type=text/css или type=text/javascript.

<meta> элемент предоставляет дополнительные сведения о способе обработки документа. Он позволяет поиск машинам идентифицировать документ без его загрузки. Элемент поддерживает атрибуты: 1)определяет тип данных (name) 2)content-определяет содержание. Name используется для брузером для получения дополнительной информации о документе, вместо него иногда используют элемент http-equiv (используется сервером). <meta http-equiv=”refresh” content =”5; URL=http://www.site/index.html”> предписание серверу обновлять страницу через 5 сек по заданному адресу. <META HHTP-EQUIV=”Expizes” content=”Data”> инструкция задает срок годности документа. если content=”0”, то документ будет загружаться не из кэша, а из сервера. <META HTTP-EQUIV=”content-type” content=”text/html; charset=windows-1251”> инструкция позволяет задать кодировку главной страницы. <META HHTP-EQUIV=”Cashe-Control” content=”no-cashe”> контроль за кэшированием документа (в системах с высокой безопасностью). Задание набора ключевых слов <META name=”Keywords” lang=”ru” content=”слово 1, слово 2…слово N”> позволяет задать набор ключевых слов для поисковых машин.

9! Элемент <BODY>.

В этом теге находятся все HTML-элементы, отвечающие за отображение документа, управление им и гипертекстовые ссылки. Он имеет следующие атрибуты:

Bgcolor (цвет фона страницы)

Title (позволяет выводить всплывающую подсказку)

Text (базовый текст текста в документе)

Link (цвет гиперссылки в документе)

Alink (цвет подсветки гиперссылки в момент нажатия)

Vlink (цвет посещенной ссылки)

Bgproperties (задает свойства фонового изображения)

Background (опред.изображение и заливает этим изображением фон страницы)

Bgcolor определяет цвет фона страницы. Значения этого атрибута задаются либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов. Данные два примера заполняют страницу документа красным цветом. <body bgcolor="#FF0000"> (использован шестнадцатиричный вид цвета)

<body bgcolor="red"> (использовано название цвета). По умолчанию-белый фон.

Title позволяет выводитьвсплывающую подсказу (хинт) ри наведении курсора на любую область страницы.Значени атрибута – любой текст, который хотим видеть на всплывающей подсказке. <body title=”любой текст”>. Этот атрибут работает по-разному в разных браузерах. В IE и Netscape работает при наведении курсора на все что находится на странице (таблицы, изображение, текст и т.д.). В OPERA работает только на свободном, от таблиц, изображений и т.д. поле страницы. Этим атрибутом почти никто не пользуется.

Text определяет базовый цвет текста в документе. По умолчанию-черный. Те же значения, что и у bgcolor. <body text=”название текста или его 16-й код”>

Link определяет цвет гиперссылки в документе. Имеет те же значения, что bgcolor и text. <body link=”название цвета или 16-й код”>

Alink определяет цвет подсветки гиперссылки в момент нажатия. Имеет те же значения, что bgcolor и text. <body alink=”название цвета или 16-й код”>

Vlink определяет цвет посещенной ссылки. Имеет те же значения, что bgcolor и text. <body vlink=”название цвета или 16-й код”>

Bgproperties задает свойства фонового изображения. В данный момент браузерами поддерживается единственное его значение fixed, запрещающее скроллинг (прокрутку) изображения. <body bgproperties="fixed">

Background определяет изображения и заливает им фон страницы. Значение в виде полного URL или имени файла с картинкой в формате gif или jpg. <body background="kartinka.gif">

10! Фреймы.

Фреймы позволяют загружать отдельные веб-страницы в прямоугольные области. В каждую область можно загружать html-страницы.Основной недостаток: затруднена работа с поиском системы. Разбивка на прямоугольные области осуществляется с помощью: <FRAMESET> FRAMEBORDER=0(рамка отсутствует)/=1(рамка присутствует) BORDER=число cols (разбиение на столбцы) кол-во колонок соответствует кол-ву элементов в списке значений атрибута. Каждый элемиент списка задает размер колонки. Размер может быть задан в пикселях, % по отношению к окну браузера, а также может быть задана оставшаяся часть. Cols=”50,20%,*”. Rows (задает кол-во строк). Rows=”150,50,20%,10%,*”. Содержимое прямоугольной области задается при помощи элемента frame. <Frame> используется внутри контейнера. <FRAMESET>

<FRAME FRAMEBORDER=0/1 BORDER=число src(задает страницу, загружаемую в фрейм)=”page1.html” name=”main”(имя фрейма)>

11! Создание форм HTML

Формы представляют собой интерактивный элемент html с их помощью пользователь может возвращать комментарии, пересылать запросы, либо регистрироваться. Разработчик создает вопросы, создавая форму, а пользователь отвечает на них заполняя ее. Содержимое формы либо передается сценарию sgi, либо по электронной почте пересылается получателю. Форма создается при помощи тэгов заключенных в контейнер:

<FORM>

1- method = (способ пересылки данных сценарию sgi)

get (более простой и быстрый)

post(позволяет присваивать большие объемы данных)

По умолчанию get .

2- action = “URLCGI” (место нахождения сценария sgi)>

<input>(Является базовым для всех элементов форм, он используется для внедрения в форму кнопок графических изображений, флажков, переключателей, паролей и текстовых полей. Имеет атрибут type может принимать 8 значений.

1)Text (поля для ввода информации)

1 - maxlength ( макс длину вводимой строки в символах)

2 - size (допустимую длину поле ввода в символах)

3 - value = “ ” (значения по умолчанию)

2)password (однострочное поле, в котором вводимые символы отображаются «*»)

1- maxlength (макс длину вводимой строки в символах)

2 - size (допустимую длину поле ввода в символах)

3) Hidden (Тип скрытого ввода информации, позволяет пересылать сценариям информацию, которая не может быть изменена пользователем) Пример пересылка файла с исходным кодом html

1- Name = “file“(что)

2- Value = “anyfile.html” (куда)

4) checkbox (Флажок)

1- checked (значит включен)

2 - value = “yes ” (значения по умолчанию)

5)Radik (Переключатель. В группе может быть выбрано только одно значение, для каждой кнопки указываеться один элемент input)

Пример :

Visa <input type = “radio” name = “1” value = “visa”>

MasterCard < input type = “radio” name = “1” value = “mastercard”>

Группа образуется при одном значении name

6)Submit(эта кнопка нажание на которой приводит к пересылке содержимого формы сценарию sgi)

1 - Value = “переслать”

7) Reset (кнопка которая используется для восстановления значений заданных по умолчанию)

8) image (аналог sumbit только в качестве кнопки используется изображение, его можно организовать в виде карты)

1- src = “url изображения”

2- name = “имя карты”

9) = “button”(обычная кнопка)

1- value = “кнопка”

10) = file(создается управляющий элемент для выбора файла.

К любой кнопке : <input accesskey = “a”(служит для указания клавиши, здесь ALT+A)

12! <Textarea>(создает область для просмотра и ввода текста помогает сэкономить место благодаря полосам прокрутки)

1- Name = “имя”

2- Rows(высота в строках)

3- Colspan (ширина в символах)

<select>(Раскрывающийся список)

1- name = “имя”

2- size =(максимальное количество элементов списка одновременно отображаемых на экране)

3- multiple (он задает возможность одновременного выбора нескольких значений внутри списка)

<option>( задает элемент списка)

1- value = “значение” (выбранный элемент для сценария)

2- selected(позволяет задать изначально выбранный элемент)Пример:

<select multiple size = 1>

<option select value = 1>

Выберете: <option>

<option value = 2> Первый? </option>

<option value = 3> второй? </option>

<option value = 4> третий? </option>

</select>

<ortgroup>(Применяеться для логической группировки элементов option внутри тэга select)

Lable = “название группы”

Пример:

<select size = 1>

<ortgroup lable = “ Первая группа “>

<option selected value = 1> Выберете :

</option>

<option value = 2> Первый </option>

<option value = 3> Второй </option>

<option value = 4> Третий</option>

</ortgroup>

<ortgroup lable = “вторая группа ” >

<option value = 5>

Четвертая </option>

<option value =6>

Пятая </option>

</ortgroup>

</select>

<button>

<label>

<fieldset>

<legend>

</FORM>

Пример:

Передача данных по эл. Почте

<FORM action = “mailto : имяHYPERLINK "mailto:имя@домен.ру"@HYPERLINK "mailto:имя@домен.ру"доменHYPERLINK "mailto:имя@домен.ру".HYPERLINK "mailto:имя@домен.ру"ру?” Subject = “Тема”>

13! Каскадные таблицы стилей являются развитием html. Они позволяют разделить смысловое содержание страницы и его оформления. Изначально в html не было предусмотрено никаких средств для управления внешним видом информации. Форматирование документов представляло собой форматирование при помощи тегов определяющих цвет, выравнивание, шрифт, его размер и т.д. Главным из этих тегов являлся тег FONT. Такое форматирование требует огромное количество действий. Поэтому смена дизайна для документов большого объема представляла собой сложную задачу. Каскадные таблицы стилей предоставляют средства для любого из элементов документа. Определив один раз стиль можно применять его к различным элементам документа. В этом случаи смена дизайна сводиться только к изменению параметров стиля определенного в одном месте. Дополнительной возможностью является определение всех параметров стилей в одном файле и подключении его ко всем документам сайта.

Синтаксис заданий стиля

Селектор (атрибут: значение1; атрибут2: значение2)

14! Селектор (атрибут: значение1; атрибут2: значение2)

Он определяет элемент или совокупность элементов в котором применяются стили.В качестве селекторов используются:

• Теги - H1 {color:red}

• Контекстные теги - H1 B{color:red} (В данном примере стиль применяется только к тегу «B» который находиться в контейнере «H1».

• Класс тега – Р1.red(имя класса){color:red }озволяет выделить отдельные теги к которым будет применяться стиль(Стиль применяется к тегу H1 укоторого атрибут класс= red.<h1 class = red> Заголовок 1ого уровня</h1>

• Глобальный класс – он позволяет применить стиль ко всем тегам не зависимо от их вида у которых значение атрибута класс совпадает с именем класса.

.red {color:red}

• Уникальный индетификатор #ID

P#11{color:red}

В этом случаи стиль применяется только к етм у котрых значение атрибута ID совпавдвет с заданным именем. <p id=”11”>

• Псевдо классы – определяется воздействие пользователя и используются в элементом «A».

A:link {color:red} (ссылка)

A:vlink{color:red} (использованная)

A:Alink{color:red} (активная)

A:hover{color:red} (Наведен курсор мыши)