Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

vse-bilearivkty_001

.pdf
Скачиваний:
17
Добавлен:
08.06.2015
Размер:
2.63 Mб
Скачать

компьютеров сети Интернет. Gopher – служба, обеспечивающая доступ к информации через систему связанных текстовых меню.

FTP (File Transfer Protocol, протокол передачи файлов) – служба, которую используют для передачи файлов от одного компьютера к другому через Интернет. Интерактивное общение в сети реализуется службой обмена информацией в режиме реального времени и основано на протоколе IRC (от англ. Internet Relay Chat). Телеконференции – службы, которые организуют тематический обмен информацией между пользователями сети.

Всемирная паутина (World Wide Web, WWW) – служба, которая организует хранение разнообразной информации в виде распределенной по компьютерам сети системы взаимосвязанных документов (веб-страниц). Связь осуществляется при помощи гиперссылок (или короче – ссылок). Гипертекст – это способ структурирования документов путем размещения ссылок внутри одного документа или между документами. В качестве ссылки могут использоваться как фрагменты текста, так и графические изображения.

Веб-страницы представляют собой файлы, создаваемые с использованием языка HTML (Hyper Text Markup Language – язык гипертекстовой разметки документов) и имеющие одноименный формат – HTML. Документ формата HTML может содержать помимо текста, графики и ссылок еще и мультимедийные объекты (анимацию, видео, звук), т. е. он строится на основе технологии гипермедиа.

Набор веб-страниц, который является собственностью какой-либо компании или частного лица, называют веб-сайтом (от англ. site – местоположение) или просто сайтом. Создавать вебстраницы можно как в HTML-редакторах (FrontPage), так и в текстовых редакторах разного уровня (Word, Блокнот). Тегами (от англ. tag – ярлык, метка) называются команды HTML. Чтобы отличить теги от текста документа, их заключают в угловые скобки. Например, тег <br> означает команду «начало новой строки». Теги могут быть как одиночными, так и парными. Парные теги указывают начало и

окончание действия команды. Тег, который указывает на окончание, помечается символом слеш

(/).

Рисунки и другие объекты веб-страницы хранятся отдельно от HTML-кода. HTML-код содержит команды, которые сообщают браузеру, где хранится объект и в какой области окна он должен быть отображен. Таким образом, веб-страница, как правило, хранится в виде файла формата .html и папки с объектами.

Для облегчения оформления web-страниц созданы Cascading Style Sheets (CSS) – каскадные таблицы стилей. Этот механизм позволяет один раз описать стиль в отдельном файле. Затем нужно при помощи HTML разметить текст на абзацы, а уже CSS позаботится об их оформлении. В результате код уменьшается в десятки и сотни раз.

Для просмотра HTML-документов существуют специальные программы, которые называются браузеры. Они интерпретируют теги разметки документа и располагают текст и графику на экране соответствующим образом.

Для записи гипертекстовых ссылок в системе WWW была разработана специальная форма, которая называется универсальный способ адресации ресурсов в сети URL (Uniform Resource Locator). Указатель ресурса URL – это адрес в системе WWW, при помощи которого однозначно определяется каждый документ. Он используется для записи гиперссылок и для обеспечения доступа к распределенным ресурсам сети Интернет.

URL-адрес состоит из трех частей. В первой части указывается протокол, который будет использоваться для передачи данных, во второй части – адрес сервера, в третьей – путь к ресурсу на сервере. Синтаксис URL:

Название протокола: //название_сервера/путь_к_ресурсу

Например, http://myserver.com/dir1/dir2/dir3/main.html – URL Web-страницы, сохраненной в файле main.html на компьютере-сервере с именем myserver, принадлежащем к домену первого уровня com, путь к файлу от корневой папки – dir1/dir2/dir3, передача страницы выполняется согласно протоколу http.

Каждая служба Интернета имеет свой протокол передачи данных. Названия протоколов служб FTP, Telnet и Gopfer совпадают с именами служб. Протокол службы WWW называется Hypertext Transport Protocol и записывается в URL в виде сокращения – http.

Современную концепцию развития Интернета принято называть Веб 2.0 (Web 2.0). Принципиальным отличием Веб 2.0 от традиционной сети является возможность создавать

содержимое Интернета любому пользователю. Сервисы Веб 2.0., или социальные сетевые сервисы

– современные средства, сетевое программное обеспечение, поддерживающее групповые взаимодействия.

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

пользователи могут не только общаться между собой, но и сами формировать содержание вебстраниц. Веб-сервис, который позволяет пользователям систематизировать ссылки с описаниями, снабжая их поисковыми критериями, называется социальными закладками. С помощью таких сервисов можно хранить закладки (избранное) в Интернете, создавать, делиться и обмениваться закладками и тегами с друзьями и знакомыми, сортировать найденную информацию по темам. Социальные сервисы, которые позволяют пользователям классифицировать различные записи – тексты, фотографии, закладки, используя для этого ключевые слова-теги, называются народными классификаторами. Ключевые слова придумывают или выбирают сами пользователи системы. Необходимые условия для работы с социальными сервисами: регистрация на сайте, наличие адреса электронной почты для связи с администраторами и пароль, принятие условий использования сервиса.

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

web-серверов. Примером проекта, приведшего к созданию социальных сетей, является открытая многоязычная энциклопедия Википедия (Wikipedia) – социальная система, ориентированная на подготовку энциклопедических статей о любом понятии, которое пользователи сочтут нужным. Основных правил два: статья должна быть нейтральной и объективной, а ее содержание – проверяемым, то есть основываться на уже опубликованных материалах. Вики (Wiki) – это новая технология коллективного создания сайтов, при этом изменения доступны не только создателю сайта, но и всем желающим.

Еще одним сервисом, наращивающим популярность, являются служба «облачных» вычислений. Отличием от привычного метода работы с программами является то, что пользователь использует ресурсы не своего компьютера, а предоставляемые ему Интернет-сервисом. При этом пользователь имеет полный доступ к собственным данным и возможность работы с ними, но не может управлять операционной системой, программной базой, вычислительными мощностями и прочими ресурсами, с помощью которых эта работа происходит.

Данные подход имеет ряд преимуществ:

адействовать компьютер практически любой конфигурации для выполнения ресурсоемких задач;

доступ в сеть Интернет;

пользователь застрахован от сбоев в работе и может легко делиться результатами работы с другими либо вести совместную работу.

Дополнительным преимуществом является то, что «облачные» сервисы зачастую либо бесплатны, либо имеют довольно низкую стоимость. Также безусловным плюсом является снижение издержек на обслуживание, поддержку, модернизацию и администрирование аппаратного и программного обеспечения

58.Структура HTML документа.

HTML - документ

Документ на языке HTML представляет собой набор вложенных элементов. Каждый элемент обязательно начинается конструкцией <имя_элемента> и заканчивается конструкцией < /имя_элемента >. Ыти конструкции называются ТАГИ. Необходимыми элементами каждого документа являются таги HTML, HEAD и BODY. Обычный документ имеет следующую структуру:

<html > < head >

......................................

</head > < body >

......................................

</body > < /html >

Заголовок документа

Внутри элемента HEAD может находиться элемент TITLE, содержание которого будет служить заголовком в самой верхней строке экрана. В качестве примера Вы видите надпись Document Structure вверху экрана. Использование TITLE удобно при работе с закладками.

Тело документа

Ылемент BODY это тело документа. Внутри тагов < body > и < /body > содержится текст документа.

Заголовки разделов

Для создания заголовков используются таги Hi, где i-размер шрифта. Требуемый заголовок нужно обрамить тагами Hi и /Hi.

Заголовок 1

-здесь выбран таг Н1

А это заголовок 2

-используется таг Н2

Ну а это заголовок под номером 3

И так далее.

Отображение текста

Форматирование

Таг P служит для начала нового абзаца. Его следует поместить перед переносимой строкой. Таг BR предназначен для перехода на новую строчку.

Стиль символов

В языке HTML предусмотрено написание разными шрифтами. Для жирного шрифта текст надо обрамить тагами В и ,

для наклонного - тагами i и /i, а для подчеркивания - U и /U.

это пример жирного шрифта.

Аэто наклонный шрифт.

Аэто шрифт с подчеркиванием.

Гипертекстовые ссылки

Внутренние ссылки

Внутренняя ссылка - ссылка на произвольное место внутри текущей Web-страницы.

Она описывается так :

< a href="# метка" > образ < /a>,

где "образ" - текст или картинка.

Пример :

по образу " начало " нам нужно перейти в начало текста.

Соответствующую ссылку опишем так :

< a href="#begin" > начало < /a >.

Здесь begin - метка, на которую мы попадем, выбрав слово " начало". Мы должны описать ее в

начале тела документа следующим образом :

< body > < a name="begin" >

....

....

....

В результате вы можете перейти в начало документа.

Локальные ссылки

Локальная ссылка - ссылка на произвольное место любого файла, находящегося на данном Webсервере. Она описывается так :

< a href="имя файла # метка" > образ < /a>,

где "образ" - текст или картинка, имя файла - файл с расширением htm ( для файлов из текущей директории) или файл с указанием пути к нему в противном случае .

Пример :

по слову " переход " мы хотим перейти на другую Web-страницу из текущей директории.

Соответствующая ссылка описывается так :

< a href="pereh.htm#perehod" > переход < /a >.

Здесь pereh.htm - имя файла, в котором находится описание Web-страницы, а perehod - имя метки в этом файле.

Ыта метка описывается в том файле, в который нам нужно попасть, так же, как и метка внутренней ссылки:

<body >

....

....

<a name="perehod" >

....

....

В результате вы можете осуществить переход в другую Web-страницу.

Внешние ссылки

Внешняя ссылка - ссылка на Web-страницу, находящуюся на любом компьютере, подсоединенном к Internet.

Она задается в формате URL (Universe Resource Locator) следующим образом :

< a href="http : // адрес машины / путь / имя файла > образ < / a >

где HTTP ( Hyper Text Transfer Protocol) - стандартный протокол передачи гипертекстовых файлов.

Списки

Ненумерованный список

В ненумерованном списке элементы располагаются по строкам, в порядке перечисления. Каждая строка помечается специальным символом:

элемент 1 элемент 2 элемент 3

Этот список реализуется следующей последовательностью операторов HTML:

<ul>

<li> элемент 1

<li> элемент 2

<li> элемент 3

</ul>

Нумерованный список

Внумерованном списке перед каждым элементом выводится его порядковый номер:

1)Первый элемент

2)Второй элемент

3)Третий элемент

Ытот список реализуется следующей последовательностью операторов HTML:

<ol>

<li> элемент 1

<li> элемент 2

<li> Элемент 3

</ol>

Список определений

этот тип списка обычно используется для выделения вводимых в Web-странице терминов и их расшифровке.

Можно привести такой пример списка:

Основные компоненты WWW (World Wide Web):

HTML

HTML (HyperText Markup Language) - язык гипертекстовой разметки, удобный инструмент для создания Web-страниц. Разработан Тимом Бернерсом-Ли из CERN в 1989 году.

URL

URL (Universal Resource Locator) - универсальный способ адресации ресурсов в сети WWW.

HTTP

HTTP (HyperText Transfer Protocol) - протокол обмена гипертекстовой информацией.

На HTML этот список имеет следующий вид:

<dl>

<hl> Основные компоненты WWW (World Wide Web):

<dt> HTML

<dd> HTML (Hyper Text Markup Language) - язык гипертекстовой разметки, удобный инструмент для создания Web-страниц. Разработан Тимом Бернерсом-Ли из CERN в 1989 году.

<dt> URL

<dd> URL (Universal Resource Locator) - универсальный способ адресации ресурсов в сети

WWW.

<dt> HTTP

<dd> HTTP (HyperText Transfer Protocol) - протокол обмена гипертекстовой информацией.

</dl>

Замечание. Тег < hl> используется для определения заголовка списка.

Работа с графикой

Встраивание графики в текст

Встраивание графики в текст происходит при помощи использования тега IMG

< img src=" имя файла с картинкой" >

и следующих атрибутов этого тега : ALIGN - атрибут выравнивания BORDER - ширина рамки

HSPACE - горизонтальный отступ между текстом и картинкой VSPACE - вертикальный отступ между картинкой и текстом над ней

Пример программы:

< img src="met.gif" border=3 vspace=20 >

Выравнивание текущей строки текста относительно картинки

Картинка является символом строки. Так как размер картинки , как правило, гораздо больше размера символов, то желательно иметь возможность задавать положение текста в строке относительно картинки.

Ыто можно сделать при помощи следующих атрибутов тага IMG: ALIGN =ТОР - текст появляется вверху картинки.

ALIGN =BOTTOM - текст печатается в центре картинки. ALIGN= CENTER - текст находится внизу картинки.

Пример программы:

< p > Пример текста. < img align=top border=2 src="met.gif" >

Обтекание текста относительно картинки

Обтекание текста относительно картинки происходит при помощи следующих атрибутов тага

IMG:

ALIGN= LEFT - Значение позволяет организовать обтекание текста справа от картинки. ALIGN= RIGHT - Обтекание текста слева от картинки.

BORDER - Значение этого атрибута определяет толщину рамки вокруг картинки. HSPACE - Горизонтальный зазор между картинкой и техтом, ее обтекающим. VSPACE - Вертикальный зазор между картинкой и текстом над ней.

Пример программы:

<img align=left border=2 vspace=20 hspace=10 src="met.gif" >

<p > Изучайте HTML . Ыто очень просто. И полезно.

Использование картинки в качестве гипертекстовой ссылки

Графическая картинка может использоваться в качестве гипертекстовой графической ссылки. Для этого применяются следующий атрибут тага IMG:

< img src ="Имя файла картинки" >

и атрибут ссылки (A HREF) - указывает имя файла, на который мы ссылаемся.

< a href=" Имя файла " >

Также есть возможность указать рядом с картинкой и обычную текстовую ссылку.

Пример программы:

<a href="graph.htm" > < img src="met.gif" >

<p > текстовая ссылка < /a >

59.Основные теги HTML документа.

Основные теги

<html></html>

Указывает программе просмотра страниц что это HTML документ.

<head></head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.

<body></body> Определяет видимую часть документа

Теги оглавления

<base href="www.?"> Указание браузеру от какого базового адреса все ссылки (кроме ссылок явно прописанных полностью)

<base target="?"> Указание браузеру от какого базового окна в котором открываются все ссылки (кроме ссылок с отдельным указанием данного параметра)

<meta name="allow-search" content="?"> Указание для поисковых роботов как следует сканировать данную страницу

<meta http-equiv="distribution" content="?"> Указание для поисковых роботов относится ли данная страница к мировым

<meta name="robots" content="?"> Указание для поисковых роботов как следует сканировать данную страницу

<meta name="author" content="?"> Указание автора странички

<meta name="keywords" content="?"> Описание содержащийся информации (для поисковых машин)

<meta http-eguiv="content-type" content="text/plain;churset="?"> Указание браузеру в какой кодировке следует подгружать страницу (Window-1251, KOI8-R, KOI8-U, ISO-8859-5, UTF-8, UTF-16 и д.р.)

Некоторые хостинги (восновном иностранные) автоматически перекодируют страници получаемые сервером в определенную кодировку. Поэтому уточняйте передпостановкой этого тега у поставщиков хостинга этот вопрос.

<meta name="description" content="?"> Ключевые слова странички (для поисковых машин)

<title></title> Помещает название документа в оглавление программы просмотра страниц

Атрибуты тела документа

<body bgcolor="?"> Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.

<body text="?"> Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.

<body link="?"> Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.

<body vlink="?">

Устанавливает цвет гиперссылок, на которых вы уже побывали, используя

значение цвета в виде RRGGBB - пример: 333333 - серый цвет.

<body alink="?">

Устанавливает цвет гиперссылок при нажатии.

Теги форматирования текста

 

 

<pre></pre>

Обрамляет предварительно отформатированный текст.

<h1></h1>

Создает самый большой заголовок

 

<h2></h2>, <h3>, </h3><h4></h4>, <h5>, </h5>

Создает заголовоки промежуточных размеров

<h6></h6>

Создает самый маленький заголовок

 

<b></b>

Создает жирный текст (нерекомендованный)

<i></i>

Создает наклонный текст (нерекомендованный)

<tt></tt>

Создает текст - имитирующий стиль печатной машинки. (нерекомендованный)

<kbd></kbd>

Создает текст - имитирующий стиль печатной машинки. (рекомендованный)

<var></var>

Название переменных отображается курсивом

<cite></cite>

Выделение цитат курсивом

 

<address></address> Отображается курсивом в виде отдельного абзаца

<em></em>

Наклонный текст (воспринимается посковыми роботами как выделение)

<strong></strong>

Жирный текст (воспринимается посковыми роботами, как особо сильное

выделение)

 

 

 

 

<font size="?"></font> Устанавливает размер текста в пределах от 1 до 7.

<font color="?"></font>

Устанавливает цвет текста, используя значение цвета в виде

RRGGBB.

 

 

 

 

Гиперссылки

 

 

 

 

<a href="URL"></a>

Создает гиперссылку на другие сайты.

<atarget="?"></a>

Указывает в каком окне открывать гиперссылку.

параметры

Значение

 

 

_Blank Загрузка содержимого страницы, заданной ссылкой, в новое пустое окно

_Parent

Загрузка содержимого страницы, заданной ссылкой, в окно, которое содержит

ссылку

 

 

 

 

_Self Загрузка содержимого страницы, заданной ссылкой, в окно, игнорируя используемые фреймы

_Top Загрузка содержимого страницы, заданной ссылкой, в окно, игнорируя использованные фреймы

При использовании фреймов и вложенных фреймов значением может выступать имя фрейма или вложенной сетки фреймов, приэтом страница откроется в указаной части окна.

<a href="NAME"></a>

Создает гиперссылку на другую страницу.

<a href="mailto:EMAIL"></a>

Создает гиперссылку вызова почтовой программы для

написания письма по указанному адресу.

<a href="#name"></a> Создает гиперссылку на метку текущей страници.

<a name="name"></a> Отмечает часть текста, как метку для гипперссылок на странице.

<a href="NAME#name"></a> Создает гиперссылку на метку другой страници.

Форматирование

<p></p> Создает новый параграф

<p align="?"></p> Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center

<nobr> Запрещает перевод строки.

<wbr> Указывает где разбивать строку для переноса при необходимости.

<br> Вставляет перевод строки.

<blockquote></blockquote> Создает отступы с обеих сторон текста.

<dl></dl> Создает список определений.

<dt> Определяет каждый из терминов списка

<dd> Описывает каждое определение

<ol></ol> Создает нумерованный список

<li> Определяет каждый элемент списка и присваивает номер

<ul></ul> Создает ненумерованный список

<li> Предваряет каждый элемент списка и добавляет кружок или квадратик.

<div align="?"></div> Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей

Графические элементы

<img src="name"> Добавляет изображение в HTML документ

<img src="name" align="?"> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle

<img src="name" border="?"> Устанавливает толщину рамки вокруг изображения

<img src="name" vspase="?"> Устанавливает поля сверху и снизу

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]