Структура WWW Структура WWW World Wide Web

Структура WWW

Структура WWW World Wide Web – это совокупность webсерверов, на которых хранятся сайты (информационные узлы), состоящие из webстраниц. Информация в WWW передаётся по протоколу НТТР (Hypertext Transfer Protocol – протокол передачи гипертекста), содержащего данные о способе взаимодействия компьютера пользователя с сервером Интернета.

Структура WWW ¢ Web-сервер – это компьютер с серверным программным обеспечением. ¢ Web-сервер – работает под управлением операционной системы семейства Unix. На web-сервер записываются сайты и все необходимые программы, обеспечивающие их работу.

Структура WWW ¢ Для работы в WWW используют браузеры – программы для просмотра web-страниц на экране. l l l l Mosaic (1993 -1995), Иллинойский университет Netscape Navigator (с 1995 по 2002) Internet Explorer, 37%, в составе Windows Mozilla Firefox, 47%, http: //www. mozilla. org Opera, http: //www. opera. com, 2% (Россия – до 30%) Safari, http: //www. apple. com, 4% Chrome, http: //www. google. com/chrome, 10%

Структура WWW Web-сервер, предоставляющий свое дисковое пространство для размещения сайтов, называется хостом. ¢ Хостинг – это выделение ресурсов webсервера для web-сайтов. ¢ Хостинг бывает платным и бесплатным. ¢

Структура WWW Web-сайт – это раздел Всемирной паутины, принадлежащий одному автору или организации. Сайт состоит из нескольких web-страниц, соединенных гипертекстовыми ссылками. ¢ Ссылка – это фраза или картинка, в которой закодирован адрес другой страницы. ¢

Структура WWW ¢ Web-страница - это текстовый файл с расширением *. html, который содержит текстовую информацию и специальные команды – HTML-коды, определяющие в каком виде эта информация будет отображаться в окне браузера.

Структура WWW ¢ Вся графическая, аудио- и видеоинформация непосредственно в Web-страницу не входит и представляет собой отдельные файлы с расширениями *. gif, *. jpg (графика), *. mid, *. mp 3 (звук), *. avi (видео). В HTML-коде страницы содержатся только указания на такие файлы.

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

Классификация webсайтов l l l Личные страницы (содержат информацию об авторе, его интересах); Информационные сайты (сайты учебных заведений, сообществ по интересам, фирм и др. ); Сайты дистанционного обучения и консультирования ( размещены обучающие программы и тесты, доступные в режиме on-line для студентов и школьников); Электронная коммерция ( виртуальные магазины); Информационно-развлекательные сайты.

Обзор инструментальных средств ¢ ¢ ¢ ¢ Front. Page Dreamweaver Microsoft Word Pad Microsoft Word Corel Word. Perfect WYSIWYG-редакторы (What You See Is What You Get — что видишь, то и получишь) язык HTML (Hyper. Text Mark-up Language – язык разметки гипертекста)

Этапы разработки web-сайта ПЛАНИРОВАНИЕ ¢ РЕАЛИЗАЦИЯ ¢ ПУБЛИКАЦИЯ ¢ ПРОДВИЖЕНИЕ ¢ ПОДДЕРЖКА ¢

Язык HTML ¢ Язык гипертекстовой разметки HTML (Hyper. Text Markup Language) был предложен Тимом Бернерсом-Ли в 1989 году и в настоящее время является стандартом для представления гипертекстовых документов в сети WWW. ¢ HTML – стандартный язык, предназначенный для создания гипертекстовых документов в среде WEB.

Основные элементы HTML Гипертекст – это текст, в котором имеются ссылки для автоматического перехода на другие тексты – гиперссылки. ¢ Язык HTML представляет собой инструкции, называемые тегами (дескрипторы) и их атрибуты. ¢ Атрибуты — дополнительные к тегам параметры или свойства элементов. ¢

Основные элементы HTML Теги заключаются в угловые скобки <…>. ¢ Совокупность открывающего <…> и закрывающего </…> тегов образуют контейнер. ¢ Элементы HTML разделяют на структурные – организующие текст и форматирующие – задающие его стиль. ¢

Структура документа HTML ¢ ¢ Согласно спецификациям HTML 4. 01, разработанным W 3 C, для всех документов HTML обязательны следующие условия. В документе должна присутствовать директива <!DOCTYPE HTML PUBLIC” - //W 3 C//DTD HTML 4. 0 Transitional//EN”> ¢ Тег указывает на то, что данный документ является документом HTML и указывает версию HTML. Данный дескриптор всегда вставляется в самом начале HTML-документа.

Структура документа HTML-документ всегда должен начинаться открывающим тегом <html> и заканчиваться закрывающим тегом </html> ¢ Далее следуют два тега заголовка документа <head> и </head>. Здесь указывается служебная информация. ¢

Структура документа HTML ¢ Теги <title> и </title> определяют название страницы (именно это название отображается в заголовке окна Web-браузера). ¢ Далее следует пара тегов содержимого документа <body> и </body>. Между ними размещают всю информацию, которая будет представлена на Webстранице.

Простейшая Web-страница шапка ( «голова» ) first. html <HTML> <HEAD> <TITLE>Моя первая <TITLE> Моя первая Web-страница</TITLE> </HEAD> <BODY> Привет! </BODY> </HTML> основная часть ( «тело» )

Цвета в HTML 1. 2. Шестнадцатеричные значения цвета RGB Задание цвета при помощи строчных названий цвета

Цвета в HTML RGB-цвет задается тремя шестнадцатеричными числами, каждое из которых состоит из 2 цифр. Слева от числа ставится символ #. Первое число определяет интенсивность красного цвета, среднее – зеленого, последнее – синего. ¢ Все числа могут принимать значения в диапазоне от 00 до FF. ¢

Цвета в HTML Для удобства пользования некоторым цветам и их сочетаниям были присвоены имена, которые распознаются всеми браузерами и появилась возможность задавать многие из них по имени. ¢ Например, white(белый), red (красный), orange (оранжевый), green (зеленый), blue (синий), purple (фиолетовый), black (черный) и т. д. ¢

Атрибуты тега BODY ¢ text – цвет текста документа пример : <body text=“red”> (или <body text=“#FF 0000”>) ¢ bgcolor – цвет фона документа пример : <body bgcolor=“yellow”> (или <body bgcolor=“#FFFF 00”>)

Атрибуты тега BODY ¢ background – фоновая картинка документа пример : <body background=“fon. gif”> ¢ bgproperties – при задании этому атрибуту значения fixed, фоновая картинка не будет прокручиваться вместе с документом пример : <body bgproperties=“fixed”>

Атрибуты тега BODY ¢ nowrap – при задании этого атрибута, строчка, не помещающаяся в окне, не будет переносится на новую строку (появятся полосы прокрутки) пример : <body nowrap> ¢ link – цвет гиперссылок в документе: alink – цвет активных гиперссылок l vlink – цвет посещенных гиперссылок l

Заголовочные теги HTML предлагает шесть заголовков разного уровня. ¢ Тег <h 1> представляет собой наиболее важный заголовок первого уровня. ¢ Тег <h 6> служит для обозначения заголовка шестого уровня и является наименее значительным. ¢

Заголовки: H 1 … H 6 ¢ <BODY> ¢ <H 1>Заголовок документа</H 1> <H 2>Заголовок раздела</H 2> <H 3>Заголовок подраздела</H 3> <H 4>Заголовок параграфа</H 4> <H 5>Комментарий</H 5> <H 6>Авторские пометки</H 6> </BODY> ¢ ¢ ¢

Атрибут заголовка ¢ ¢ ¢ Начальный тег заголовка может иметь атрибут align, который определяет выравнивание и может принимать значения: left —по левому краю, center — по центру, right - по правому краю, justify - выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

Атрибут заголовка ¢left, выравнивание: ¢center, ¢right <H 1 ALIGN=center>История</H 1>

Абзацы ¢ - тег, который отвечает за перенос на новую строку в том месте, где он установлен. ¢ <p></p> - определяет текстовый абзац. ¢ Начальный тег может иметь вложенный атрибут align, который указывает выравнивание (left, center, right). Каждый следующий абзац игнорирует заданное для предыдущего абзаца значение align. пример : <p align=center>Абзац </p>

Разделительная линия ¢ <hr> - тег, который рисует горизонтальную линию. • атрибуты тега: align – выравнивание линии (left, right, center) l color – цвет линии l noshade – линия без трехмерных эффектов l size – толщина линии l width - ширина линии l

Разделительная линия ¢ Например, <hr align=“center” width=30% size=10 color=“red”> ¢ Тег <hr> не имеет закрывающего тега, т. к. является тегом местного значения. Горизонталь строится в месте её объявления. При отсутствии атрибута align линия центрируется.

Теги для выделения текста ¢ <b> </b> — устанавливает жирное начертание шрифта ¢ <i> </i> - устанавливает курсивное начертание шрифта ¢ <u> </u> - добавляет подчеркивание к тексту ¢ <em> </em> — предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием

Теги для выделения текста ¢ <strike> </strike> — перечёркивает текст ¢ <sup> </sup> —верхний индекс ¢ <sub> </sub> — нижний индекс ¢ <strong> </strong> — предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

Теги для выделения текста ¢ <small> </small> — уменьшает размер шрифта на единицу по сравнению с обычным текстом (по умолчанию средний размер текста = 3) ¢ <big> </big> — увеличивает размер шрифта на единицу ¢ <q> </q> - используется для выделения в тексте цитат (содержимое контейнера автоматически отображается в кавычках)

Теги для выделения текста ¢ <blockquote> </blockquote> —выделение длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу. ¢ <pre> </pre> - определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на web -странице показывается как один.

Теги для выделения текста ¢ <cite> </cite> - помечает текст как цитату или сноску на другой материал. Браузеры обычно устанавливают текст внутри контейнера <cite> курсивом. ¢ <abbr> </abbr> — указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения. (По умолчанию, текст заключенный в контейнере <abbr> подчеркивается пунктирной линией. )

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

Упорядоченный (нумерованный) список ¢ Упорядоченный список используется для нумерованного перечисления отдельных пунктов или указания последовательности каких-либо действий. Когда программа встречает тэг упорядоченного списка, она последовательно нумерует пункты списка: 1, 2, 3 и т. д.

Упорядоченный (нумерованный) список ¢ <ol> </ol> - начало и конец нумерованного списка ¢ <li> - тег, задающий элементы списка ¢ Пример: • • • <ol > <li>Первый <li>Второй <li>Третий </ol>

Упорядоченный (нумерованный) список Атрибуты и их значение: ¢ COMPACT - Представляет список в более компактном виде ¢ TYPE = A - устанавливает маркер в виде прописных букв ¢ TYPE = a - устанавливает маркер в виде строчных букв ¢ TYPE = I - устанавливает маркер в виде больших римских цифр

Упорядоченный (нумерованный) список TYPE = i - устанавливает маркер в виде маленьких римских цифр ¢ TYPE = 1 - устанавливает маркер в виде арабских цифр ¢ START = n - устанавливает начальный маркер в текущем списке; n - номер, с которого начинается нумерация в списке ¢

ordered list (упорядоченный список) <OL> <LI>Вася <LI>Петя <LI>Коля </OL> изменение нумерации: 1, i, I, a, A <OL TYPE=i START=3>. . . </OL>

Маркированный список ¢ <ul> </ul> - начало и конец маркированного списка Начальный тег может иметь атрибут: ¢ type= circle(○), disc (●), square(□)

unordered list (маркированный список) list item (элемент списка) <UL> <LI>Вася <LI>Петя <LI>Коля </UL> изменение маркера: <UL TYPE="disk">. . . </UL> disk circle ○ square ■

Многоуровневые списки <UL> <LI>Города России <OL> <LI>Москва <LI>Санкт-Петерург </OL> <LI>Города Украины <OL> <LI>Киев <LI>Одесса </OL> </UL>

Список определений ¢ <dl> ¢ </dl> - создание словарей, глоссариев. Данный элемент включает в себя дополнительные элементы: • <dt> - термин • <dd> - определение

definition list (список определений) <DL> definition term (термин) <DT>компьютер <DD>устройство для обработки информации <DT>дискета <DD>гибкий магнитный диск <DT>винчестер <DD>жесткий магнитный диск </DL> definition description (описание)

Вставка графических объектов Для размещения графических изображений на странице используется тег <img> ¢ Имеет единственный обязательный атрибут src, который определяет адрес файла с картинкой. ¢ ¢ <img src = «спецификация файла» [список параметров]>

Атрибуты тега <img> ¢ alt – альтернативный текст для изображения ¢ align – выравнивание рисунка по краю и способ обтекания текстом. Может принимать следующие значения: top – по верхней границе l bottom – по нижней границе l middle – по центру l

Атрибуты тега <img> l l ¢ ¢ ¢ right – по правому краю left – по левому краю height — высота изображения в пикселях width — ширина изображения в пикселях border — толщина рамки вокруг изображения hspace — пустое пространство в пикселях справа и слева от рисунка vspace — пустое пространство в пикселях сверху и снизу от рисунка

Рисунки в документе из той же папки: image (изображение) source (источник) <IMG SRC="flag. jpg"> из другой папки: <IMG SRC="images/flag. jpg"> <IMG SRC=". . /images/flag. jpg"> с другого сервера: <IMG SRC="http: //www. vasya. ru/img/flag. jpg">

Выравнивание <IMG SRC="flag. jpg" ALIGN="left"> left top right bottom (по умолчанию) middle

54 Отступы <IMG SRC="net. jpg" ALIGN="left"> <IMG SRC="net. jpg" ALIGN="left" HSPACE=10 VSPACE=10> VSPACE (vertical space) HSPACE (horizontal space)

Организация ссылок ¢ По отношению к документу ссылки разделяют на внутренние (локальные) и внешние (глобальные). ¢ Средством создания ссылок является тег <a [список параметров]> текст ссылки</a>

Атрибуты тега <a> name – задает имя метки внутри документа <а name=метка> необязательный текст </a> ¢ href – задает адрес документа, на который следует перейти или на имя ссылки в тексте <а href=“URL”> текст ссылки для щелчка </a> (ссылка внутри документа) <а href=“URL#метка”> текст ссылки для щелчка </a> ¢ title – добавляет всплывающую подсказку к тексту ссылки ¢

Атрибуты тега <a> ¢ ¢ ¢ target - тип окна, в котором браузер будет загружать документ. Может принимать значения _blank — загружает страницу в новом окне self — загружает страницу в текущем окне (значение по умолчанию) _parent — загружает страницу во фреймеродителе, если фреймов нет, то этот параметр работает как _self _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self

Ссылки внутри страницы <A NAME="up"></A> переход на метку <A HREF="#chap 1">Глава 1</A> <A HREF="#chap 2">Глава 2</A> <A NAME="chap 1"></A> <H 1>Глава 1</H 1> метка (якорь) Это текст главы 1. <BR> <A HREF="#up">Наверх</A> <A NAME="chap 2"></A> <H 1>Глава 2</H 1> Это текст главы 2. <BR> <A HREF="#up">Наверх</A> • в другом файле <A HREF="texts. html#color">Цвет текста</A>

Ссылки на другие сайты • на главную страницу сайта <A HREF="http: //www. mail. ru">Почта</A> • на конкретную страницу сайта (URL) <A HREF="http: //www. vasya. ru/text/a. htm"> Васин текст</A> • на файл для скачивания <A HREF="http: //www. vasya. ru/prog. zip"> Скачать</A>

Рисунок-гиперссылка локальная ссылка: иначе будет синяя рамка вокруг <A HREF="table. htm"> <IMG SRC="tbl. jpg" ALT="Таблицы" BORDER=0> </A> если </A> не вплотную к <IMG …>, будет «хвост» ссылка на другой сервер: не будет «хвоста» <A HREF="http: //www. mail. ru"> <IMG SRC="mailru. jpg" ALT="Бесплатная почта" BORDER=0></A>

Создание таблиц ¢ Таблицы могут быть построены 2 способами: ¢ Без средств HTML (текст таблицы оформляется шрифтом с фиксированной шириной, а колонки выравниваются пробелами); ¢С применением операторов описания таблиц языка HTML.

Создание таблиц ¢ Таблицы могут: l иметь заголовки и подписи; l заключать ячейки в рамки; l размещать в ячейках: текст, графику, произвольные объекты); l быть вложенными (в ячейке может быть вложенная таблица).

Основные тэги таблиц и их атрибуты <TABLE> </TABLE> - начало и конец таблицы; ¢ <TR></TR> - начало и конец строки таблицы (допускается отсутствие закрывающего тэга); ¢ <TD></TD> - начало и конец обычной ячейки таблицы (в ячейку можно включить другую таблицу; закрывающий тэг может быть опущен) ¢

Основные тэги таблиц и их атрибуты ¢ ¢ <TH></TH> - контейнер заголовка, используется для обозначения заголовочных ячеек (закрывающий тэг необязателен); Наличие в ячейках данных необязательно. Создать пустую ячейку можно двумя способами: ничем не заполнять ее контейнер (<TD></TD>), любо заполнить ее специальным символом пустого пространства (<TD> </TD>). При выводе пустых ячеек браузер объединяет их. Ячейки с невидимым содержанием выводятся раздельно.

Атрибуты тега Table ¢ ALIGN — задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю l center — по центру l right — по правому краю. l

Атрибуты тега Table BGCOLOR — устанавливает цвет фона таблицы. ¢ BORDER — устанавливает толщину рамки в пикселях. По умолчанию рамка изображается трехмерной. Когда в теге <TABLE> используется параметр border без аргументов (<table border>), то браузер отображает рамку толщиной один пиксель. ¢

Атрибуты тега Table BORDERCOLOR — устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление параметров bordercolor и border к тегу <TABLE> создают однотонную линию. ¢ CELLPADDING — задает отступ между содержимым ячейки и обрамлением таблицы в пикселях; ¢ CELLSPACING — задает расстояние между ячейками в пикселях. ¢

Атрибуты тега Table HEIGHT — устанавливает высоту таблицы. ¢ WIDTH — задает ширину таблицы в пикселях или процентах от окна браузера. ¢

Простейшая таблица толщина рамки <TABLE BORDER="1"> <TR> <TD>Таблица из одной строки</TD> <TD>из трех столбцов</TD> <TD>без указания ширины таблицы и ячеек. </TD> </TR> </TABLE> TABLE TR = table row TD = table data TH = table header таблица строка таблицы данные таблицы заголовок (жирный, по центру)

Основные тэги таблиц и их атрибуты <CAPTION> - создание заголовка таблицы. ¢ По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. ¢

Атрибуты тега <td> ¢ ALIGN — задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left — выравнивание по левому краю l center — по центру l right — по правому краю. l ¢ BGCOLOR — устанавливает цвет фона ячейки.

Атрибуты тега <td> BORDERCOLOR — устанавливает цвет рамки вокруг ячейки (рамка показывается, когда установлен параметр border с ненулевым значением у тега <TABLE>). ¢ COLSPAN — устанавливает число ячеек, которые должны быть объединены по горизонтали. ¢

Атрибуты тега <td> ¢ ¢ HEIGHT —изменение высоты ячеек. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот параметр будет проигнорирован. В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали. NOWRAP —текст внутри ячейки отображаться без переносов, одной сплошной строкой.

Атрибуты тега <td> ROWSPAN — устанавливает число ячеек, которые должны быть объединены по вертикали. ¢ WIDTH — задает ширину ячейки. ¢

Атрибуты тега <td> ¢ ¢ VALIGN — устанавливает вертикальное выравнивание содержимого ячейки (по умолчанию в центре). Возможные значения: l l top — выравнивание по верхнему краю строки middle — выравнивание по середине bottom — выравнивание по нижнему краю baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.