МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ. Литература: 1. Мировые информационные ресурсы. Интернет. Практикум. /Под. ред П.В. Акинина. – М.: КНОРУС, 2008. - презентация

1 МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ

2 Литература: 1. Мировые информационные ресурсы. Интернет. Практикум. /Под. ред П.В. Акинина. – М.: КНОРУС, 2008.

3 Основные теги языка HTML

4 Средства разработки Web сайтов

5 Средства разработки состоят из среды разработки и языка разработки. Язык разметки HTML – это система команд, основная задача которой – представление текстовых и мультимедийных элементов Web страницы в наиболее благоприятной для восприятия форме.

6 Тег (англ. tag – метка, дескриптор, ярлык) – начальный или конечный маркер элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В коде web-страницы теги заключаются в угловые скобки.

7 Множество всех тегов HTML можно разделить на следующие группы: структура документа; ссылки; вставка содержимого из внешних источников; разметка страницы; форматерование текста; формы и элементы пользовательского интерфейса.

8 Теги бывают двух видов: одиночные и парные. Одиночный тег определяет реакцию браузера в том месте, где он находится на Web-странице. Пример.

9 Парный тег (контейнер) – определяет действие в отношении фрагмента Web-страницы, который находится между открывающей и закрывающей частью парного тега. Конечный тег всегда снабжается косой четой /. Пример Некий текст

10 Атрибут (параметр) тега – определяет дополнительное свойство тега, уточняет его действие. В случае парного тега используется внутри открывающего тега.

11 Например: Тег абзаца (параграфа) Текст будет отображаться выровненным по центру. Здесь align является параметром, а center – значением данного параметра.

12 У тега может быть один атрибут, несколько атрибутов или может вообще их не быть. Пример с несколькими атрибутами. Некий текст Два атрибута: color - атрибут цвета и size - атрибут размера.

13 Сценарий (SСRIPT, скрипт) - это программный код, обеспечивающий работу интерактивных и динамических элементов Web-сайта.

14 Сценарии бывают двух видов: 1)Серверный – это программа, выполняющаяся на Web-сервере. 2)Клиентский – это программа, выполняющаяся с помощью интерпретатора браузера (то есть на компьютере пользователя).

15 Клиентский сценарий в отличие от языка разметки HTML предоставляет гораздо больше возможностей: для взаимодействия с операционной системой и браузером; по управлению элементами интерфейса операционной системы и браузером.

16 Серверный сценарий чаще всего используется для отображения в виде Web страниц содержимого баз данных, которые хранятся на сервере.

17 Преимущества серверного сценария: Более широкий спектр возможностей по обработке взаимодействия пользователя и Web-сайта. Преимущества клиентского сценария: Большая скорость обработки и экономия ресурсов (за счет уменьшения передачи данных между сервером и компьютером пользователя).

18 Среда разработки – это программное обеспечение, позволяющее эффективно создавать элементы Web- страниц, разрабатывать сценарии и осуществлять их отладку. Например: MS Front Page. Macromedia DreamWeaver. Блокнот.

19 Основные теги HTML Начало и конец документа. Формируются при помощи парного тега. Заголовок Тело

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

21 Заголовок HTML документа – определяет назначение HTML документа и его основные свойства. Формируется при помощи парного тега : … Содержимое заголовка обычно не отражается на экране пользователя при просмотре Web-документа.

22 Заголовок HTML документа (HEAD) Допускает вложение элементов TITLE, ISINDEX, BASE, META, LINK, NEXTID … - строка текста, расположенная внутри, отображается в заголовке окна браузера. title ['ta ɪ tl] - заглавие, название

23 Текст тега TITLE в заголовке окна браузера ПРИМЕР: … Учебник "Проектирование web-документов"

24 Тег используется для описания свойств HTML документа. Он является одиночным, содержит следующие атрибуты: http-equiv name content

25 Первые два используются для обозначения свойств (то есть дают свойству имя), последний используется для придания свойству значения.

26 Например: Указывает на тип документа, его отношение к текстовому документу и его кодировка.

27 Дает описание содержимого Web- страницы. И спользуется поисковыми машинами для индексации и в качестве краткой аннотации при ссылке в ответе на запрос.

28 Определяет ключевые слова данного Web- документа, используется поисковыми машинами для оценки релевантности. Ключевые слова указываются через запятую (можно пробел). Пример:

29 Свойства HTML-документа, обозначенные http-equiv передаются на компьютер пользователя в составе HTTP- заголовка. Браузер обязательно интерпретирует http-заголовок. Инструкции, содержащиеся в http-заголовке особенно важны для правильного отображения HTML-документа.

30 Свойства HTML документа, определенные с помощью атрибута name носят рекомендательный характер и в большинстве своем игнорируются браузером. Подобные МЕТА-свойства (или свойства HTML-документа) обрабатываются поисковыми системами.

31 Тело Web-документа – определяет содержательную часть Web- документа (информация, графика и так далее). Формируется при помощи парного тега :

32 Структура тега BODY 1. Атрибут bgcolor – для отображения фона HTML документа. Пример. bgcolor=white (black, blue и другие цвета)

33 Данному атрибуту может присваиваться свойство RGB (RGB – red, green, blue).

34 Пример. bgcolor=#FFCC22, где FF – уровень красной составляющей, CC - уровень зеленой составляющей, 22 – уровень синей составляющей. В шестнадцатеричной системе счисления FFFFFF – белый цвет, – черный цвет. Данная кодировка (RGB) может использоваться во всем HTML документе.

35

36 2. Атрибут background – определяет фон с помощью графического формата. Пример. background=2. jpg В значении атрибута указывается название документа и путь к нему. (Если указано только название, то данный файл должен находиться в той же папке, что и HTML документ).

37 Файл 2.jpg

38 Если путь указан так: background=/fold1/2.jpg, то папка будет искаться начиная от текущего каталога.

39 3. Атрибут TEXT – определяет цвет основного текста. Значения данного атрибута могут быть такими же, как у атрибута bgcolor.

40 Эти же правила верны и для следующих атрибутов: 4. Атрибут LINK определяет цвет ссылки. 5. Атрибут VLINK определяет цвет уже посещенной ранее ссылки. 6. Атрибут ALINK определяет цвет активной ссылки (то есть ссылки, указывающей на текущий документ).

41 7. Атрибут TOPMARGIN=(верхнее поле). 8. Атрибут LEFTMARGIN=(левое поле).

42 Пример. TOPMARGIN=20 (в пунктах) LEFTMARGIN=10 (в пунктах) Все содержимое HTML-документа будет смещено относительно левого и верхнего края HTML документа.

43 В HTML документе можно помещать комментарии (они игнорируются браузером и используются для служебных целей). Комментарии. 1) Одиночный тег. КОММЕНТАРИИ

44 2) Парный тег

45 Форматирование текста

46 Браузеры игнорируют обычные средства форматерования текста, такие как последовательность пробелов, знаки табуляции, переводы строки и прочие. Чтобы отформатеровать документ, используются средства физического и логического форматерования. К физическим относятся теги, которые определяют напрямую внешний вид текста. К логическим относятся теги, которые определяют логический статус (значение) текста.

47 Физические средства форматерования Одиночный тег - перевод строки (разрыв строки).

48 2. Парный тег … - запрещает разрыв текста, находящегося в контейнере (тег жесткого переноса).

49 3. Одиночный тег - определяет место мягкого переноса. Используется совместно с тегом и размещается внутри его контейнера.

50 4. Парный тег … - параграф или абзац. Текст, находящийся внутри тега оформляется в виде параграфа (абзаца). Атрибут ALIGN - выравнивание текста. align [ə'la ɪ n] - выравнивать Возможные значения: =LEFT – по левому краю. =CENTER – по центру. =RIGHT – по правому краю.

51 5. Парные теги заголовка. Бывают шести уровней: … … … … …

52

53 6. Одиночный тег – для отображения горизонтальной черты.

54 7. Парный тег …. Предназначен для определения шрифта отображаемого текста.

55 8. Одиночный тег Данный тег устанавливает базовое значение текстовых значений Web страниц, находящихся после.

56 9. Парный тег … - тег переформатерования. Используется для форматерования текста стандартными способами (табуляцией, последовательностью пробелов и так далее). Пример: _ _ _ _ _ _ _ _ _ _ _ _ _ _ |_ _ _ _ _ _ _|_ _ _ _ _ _ _| |_ _ _ _ _ _ _|_ _ _ _ _ _ _|

57 Без пре-формате- рования С пре-форматерованием

58 10. Парный тег … - содержимое контейнера выравнивается по центру.

59 … - выделяет текст в контейнере с помощью полужирного начертания. … - выделяет текст в контейнере с помощью наклонного текста (курсив). … - подчеркивание.

60 Примеры логического форматерования 1) Парный тег … Используется для цитат. Обычно отображается в виде курсива. cite [sa ɪ t] - цитировать, приводить цитату

61 2) Парный тег … Используется для выделения больших цитат. (Браузер обычно делает отступ от левого края). quote [kwəut] - цитировать, ссылаться

62 В большинстве случаев браузер не допускает пересечение тегов. Но есть и исключения, например … … … В том месте, где пересеклись теги и, текст будет выделен жирным курсивом.

63 Специальные символы Используются для отображения символов, которые являются в HTML управляющими и не могут быть отображены обычными способами. Например, (>) - больше или (<) – меньше. Браузер ее воспринимает как начало контрольной последовательности.

64 СимволВ кодах < (левая угловая скобка)< < (правая угловая скобка)> © (значок авторского права)© ° (значок температуры)° жесткий пробел 

65 Сложное форматерование СПИСКИ

66 Парный тег … (от английского слова List - список) используется для отображения элементов списка.

67 Парный тег … - формирует нумерованный список (или упорядоченный). Изменение способа нумерации производится с помощью атрибута TYPE. Значения атрибута TYPE: 1 - арабские цифры. а – прописные буквы. А – заглавные буквы. I – римские цифры.

68 Атрибут START позволяет указать номер, с которого начинается нумерация. Например, если START=3, то нумерация начнется с трех или с буквыc.

69 Парный тег … Формирует маркированный список. Например: abc Где disc – жирная точка; square - квадрат; circle – не закрашенная окружность. При отображении элементов списка браузер делает отступ слева.

70 Многоуровневые списки. Например: abc def ghi Отобразиться: abc odef oghi Браузер будет делать очередной отступ слева.

71 Таблицы. Парный тег … В его контейнере должны быть сформированы элементы таблицы (ячейки) в которых и будет информация. Парный тег … - формирует строку таблицы. Парный тег … - формирует ячейку внутри строки.

72 Пример:

73 Атрибуты тега : Атрибут WIDTH – определяет ширину таблицы (в процентах или пикселях). Пример: WIDTH=100% или WIDTH=100

74 Атрибут HEIGHT – высота (принимает такие же значения, как и атрибут WIDTH). Атрибут ALIGN – выравнивание таблицы по ширине относительно краев окна. Атрибут BORDER – определяет ширину рамки (если значение данного атрибута 0, то рамки отсутствуют). Пример: BORDER=2

75 Атрибут bgcolor – для формирования фона таблицы с помощью цвета. Атрибут background - для формирования фона таблицы с помощью картинки. Атрибут cellpadding – для указания отступов от краев ячейки (в пикселях). Атрибут cellspacing – расстояние между ячейками. Атрибут bordercolor – цвет границ ячеек (рамки).

76 Атрибуты тега : Атрибут ALIGN – выравнивание текста в ячейках. Атрибут VALIGN – определяет вертикальное выравнивание текста в ячейках. Возможные значения атрибута VALIGN: =TOP – по верху. =MIDDLE – по центру. =BOTTOM – по нижнему краю ячейки. 3)Атрибут bgcolor – для указания фона строки.

77 Атрибуты тега : ALIGN, VALIGN, bgcolor - действуют так же, как для тега. Атрибут COLSPAN – объединение ячеек, находящихся в одной строке. Значение атрибута равно количеству близлежащих ячеек находящихся в одной строке, которые будут объединены.

78 Атрибут ROWSPAN – объединение ячеек, находящихся в одном столбце. Значение атрибута указывает количество близлежащих ячеек находящихся в одном столбце, которые будут объединены. Пример: 1 2 4

79 Пример: 1 2 4