Основы языка HTML. Содержание: Введение в HTML Введение в HTML Теги. Структура HTML - документа Теги. Структура HTML - документа Оформление текста в WEB. - презентация

1 Основы языка HTML

2 Содержание: Введение в HTML Введение в HTML Теги. Структура HTML - документа Теги. Структура HTML - документа Оформление текста в WEB – документе Оформление текста в WEB – документе Абзацы Заголовки Логическое форматирование HTML-документа Физическое форматирование HTML-документа Создание списков Работа с таблицами Включение графики в WEB – страницу Включение графики в WEB – страницу Определение гиперссылок Фреймы

3 Введение в HTML

4

5

6 Гиперссылка – выделенный объект, связанный с другим файлом и реагирующий на щелчок мыши. (слово, фраза, графический элемент)

7 Браузер (англ. browse - листать, просматривать) – программа, служащая для просмотра WEB – документов, т.е. обеспечивающая переход на другие объекты в соответствии с гиперссылкой.

8 Для создания WEB страниц можно воспользоваться средствами текстового процессора Microsoft Word, редактором Front Page и другими программами, специально разработанными для этих целей. К преимуществам этих программ относятся – быстрое, визуальное создание WEB страниц даже дилетантами в области информационных технологий. К существенным недостаткам такого рода программного обеспечения относится то, что текст программы на HTML, полученный в результате разработки WEB страницы с использованием такого рода программного обеспечения, в 3 – 4 раза превосходит по объему текст программы, написанный профессионалом в обычном блокноте Windows (неоптимальность кодов).

9 Http – Hyper Text Transport Protocol – протокол передачи гипертекста. Этот протокол определяет, каким образом программа-обозреватель может найти и использовать ресурсы.

10 HTML (Hyper Text Markup Language)- это специальный язык разметки текстовых электронных документов, которые предназначены для просмотра на экране.

11 Назначение HTML - разметить текст на логические элементы, которые будут однозначно восприниматься всеми браузерами.

12 Теги. Структура HTML-документа

13 Теги (от англ. tag - "ярлык, этикетка"): - это коды языка HTML, с помощью которых выполняется разметка исходного текста; - это инструкция браузеру, указывающая способ отображения текста.

14 Тег всегда начинается со знака «меньше» ( ) (закрывающей угловой скобкой). После открывающей угловой скобки идет ключевое слово, определяющее тег. Например:

15 Типы тегов Теги (дескрипторы) парные (контейнерные) непарные (одинарные) открывающий тег текст закрывающий тег

16 HTML–файл – текстовый файл, имеющий расширение.htm

17 Структура HTML-файла

18 Этапы создания HTML-документа Первоначально с помощью языка HTML создается HTML-файл. HTML-файл - это текстовый файл. Поэтому для его создания и редактирования можно использовать обычный текстовый редактор, например Блокнот. Созданный документ необходимо сохранить с расширением.htm Затем, используя любой браузер, можно отобразить этот файл в виде электронного документа.

19

20 ……… Начало ………..Конец программы на HTML Структурные теги

21 ……… Начало ………..Конец программы на HTML …….. Заголовок документа ……Отмена заголовка Структурные теги

22 ……… Начало ………..Конец программы на HTML …….. Заголовок документа ……Отмена заголовка …….. Заголовок окна…….Отмена заголовка Структурные теги

23 ……… Начало ………..Конец программы на HTML …….. Заголовок документа ……Отмена заголовка …….. Заголовок окна…….Отмена заголовка …….. Тело программы ……Закрыть Структурные теги

24 ……… Начало ………..Конец программы на HTML …….. Заголовок документа ……Отмена заголовка …….. Заголовок окна…….Отмена заголовка …….. Тело программы ……Закрыть Настройка цвета фона и цвета текста Структурные теги

25 Атрибуты (параметры) Открывающие теги могут содержать атрибуты, то есть дополнительную информацию о свойствах отображаемого на экране элемента. Атрибуты записываются внутри открывающего тега после его имени. Атрибут действует от открывающего тега, в котором он задан, до закрывающего его или внутри тега, если тег не имеет парного. Формат записи:

26 Оформление текста в WEB –документе Абзацы Абзацы Абзацы Заголовки Заголовки Заголовки Логическое форматирование HTML-документа Логическое форматирование HTML-документа Логическое форматирование HTML-документа Логическое форматирование HTML-документа Физическое форматирование HTML-документа Физическое форматирование HTML-документа Физическое форматирование HTML-документа Физическое форматирование HTML-документа

27 Абзацы

28 ….. (от англ. paragraph – абзац) разбиение текста на абзацы

29 ….. (от англ. paragraph – абзац) разбиение текста на абзацы Параметр ЗначениеПример align – выравнивание left - по левому краю А.С. Пушкин right - по правому краю center – по центру justify – по ширине

30 ….. (от англ. paragraph – абзац) разбиение текста на абзацы Параметр ЗначениеПример align – выравнивание left - по левому краю А.С. Пушкин right - по правому краю center – по центру justify – по ширине разрыв строки Я памятник себе воздвиг нерукотворный

31 Заголовки

32 ….. (от англ. header – заголовок) Заголовок n = 1, 2, 3, 4, 5, 6 H1 – самый крупный H6 – самый мелкий

33 ….. (от англ. header – заголовок) Заголовок n = 1, 2, 3, 4, 5, 6 H1 – самый крупный H6 – самый мелкий Параметр ЗначениеПример align – выравнивание left - по левому краю Заголовок 1 уровня right - по правому краю center – по центру

34 Горизонтальная линия

35 Горизонтальная линия Параметр ЗначениеПример size - толщина в пикселях width - ширина в пикселях align - выравнивание center, left, right color - цвет линии Название цвета, код цвета

36 Логическое форматирование HTML-документа

37 Логические теги позволяют выделять смысловые части текста: заголовки, абзацы, определения, цитаты, при этом использовать логические шрифтовые стили (где нужно выделить шрифт, где уменьшить, где увеличить, где выделить усиленно). «Логические» теги обозначают роль текста на странице.

38 ..... Цитаты (обычно выделяются курсивом)

39 ..... Цитаты (обычно выделяются курсивом) Большие цитаты

40 ..... Цитаты (обычно выделяются курсивом) Большие цитаты..... Выделение важных моментов (обычно отображается курсивом)

41 ..... Цитаты (обычно выделяются курсивом) Большие цитаты..... Выделение важных моментов (обычно отображается курсивом)..... Особо сильное выделение (обычно выводится жирным шрифтом)

42 ..... Цитаты (обычно выделяются курсивом) Большие цитаты..... Выделение важных моментов (обычно отображается курсивом)..... Особо сильное выделение (обычно выводится жирным шрифтом)..... То, чему дается определение (обычно отображается курсивом)

43 ..... Цитаты (обычно выделяются курсивом) Большие цитаты..... Выделение важных моментов (обычно отображается курсивом)..... Особо сильное выделение (обычно выводится жирным шрифтом)..... То, чему дается определение (обычно отображается курсивом)..... Укрупнение шрифта

44 ..... Цитаты (обычно выделяются курсивом) Большие цитаты..... Выделение важных моментов (обычно отображается курсивом)..... Особо сильное выделение (обычно выводится жирным шрифтом)..... То, чему дается определение (обычно отображается курсивом)..... Укрупнение шрифта..... Уменьшение шрифта

45 ..... Цитаты (обычно выделяются курсивом) Большие цитаты..... Выделение важных моментов (обычно отображается курсивом)..... Особо сильное выделение (обычно выводится жирным шрифтом)..... То, чему дается определение (обычно отображается курсивом)..... Укрупнение шрифта..... Уменьшение шрифта..... Показывает текст как пример программы

46 ….. Нижний индекс

47 ….. Нижний индекс ….. Верхний индекс

48 ….. Нижний индекс ….. Верхний индекс ….. Разметка удаленного теста (зачеркнутый текст)

49 ….. Нижний индекс ….. Верхний индекс ….. Разметка удаленного теста (зачеркнутый текст) ….. Текст считается вставленным (отображается подчеркнутым)

50 ….. Нижний индекс ….. Верхний индекс ….. Разметка удаленного теста (зачеркнутый текст) ….. Текст считается вставленным (отображается подчеркнутым) ….. Сохранение форматирования

51 ….. Нижний индекс ….. Верхний индекс ….. Разметка удаленного теста (зачеркнутый текст) ….. Текст считается вставленным (отображается подчеркнутым) ….. Сохранение форматирования ….. Разметка переменных (курсив)

52 ….. Нижний индекс ….. Верхний индекс ….. Разметка удаленного теста (зачеркнутый текст) ….. Текст считается вставленным (отображается подчеркнутым) ….. Сохранение форматирования ….. Разметка переменных (курсив) ….. Ввод с клавиатуры

53 ….. Нижний индекс ….. Верхний индекс ….. Разметка удаленного теста (зачеркнутый текст) ….. Текст считается вставленным (отображается подчеркнутым) ….. Сохранение форматирования ….. Разметка переменных (курсив) ….. Ввод с клавиатуры ….. Имитация пишущей машинки

54 ….. Нижний индекс ….. Верхний индекс ….. Разметка удаленного теста (зачеркнутый текст) ….. Текст считается вставленным (отображается подчеркнутым) ….. Сохранение форматирования ….. Разметка переменных (курсив) ….. Ввод с клавиатуры ….. Имитация пишущей машинки ….. Адрес

55 ….. Нижний индекс ….. Верхний индекс ….. Разметка удаленного теста (зачеркнутый текст) ….. Текст считается вставленным (отображается подчеркнутым) ….. Сохранение форматирования ….. Разметка переменных (курсив) ….. Ввод с клавиатуры ….. Имитация пишущей машинки ….. Адрес ….. Листинг, цифровой код

56 Физическое форматирование HTML-документа

57 ….. полужирный шрифт Физические стили шрифта

58 ….. полужирный шрифт ….. курсив Физические стили шрифта

59 ….. полужирный шрифт ….. курсив ….. полужирный курсив Физические стили шрифта

60 ….. полужирный шрифт ….. курсив ….. полужирный курсив ….. подчеркивание Физические стили шрифта

61 ….. полужирный шрифт ….. курсив ….. полужирный курсив ….. подчеркивание ….. зачеркнутый Физические стили шрифта

62 ..... Параметры шрифта

63 ..... Параметры шрифта Параметр ЗначениеПример face – гарнитура шрифта Arial, Arial Black, Courier, Cotton, Verdana и др. текст size – размер шрифта в пикселях color - цвет линии Название цвета, код цвета

64 Данный тег позволяет управлять размером текущего шрифта относительно основного. Для этого используются символ "+" (чтобы увеличить) и символ "-" (чтобы уменьшить) размер шрифта на заданную величину. Например, если размер основного шрифта установлен равным 3, то тег устанавливает размер текущего шрифта равным 5.

65 Название цвета КодОписание black# черный silver#C0C0C0 серебряный gray# серый white#FFFFFFбелый maroon# коричневый red#FF0000 красный purple# тёмно-сиреневый fuchsia#FF00FFсиреневый green# зелёный lime#00FF00 светло-зелёный olive# оливковый yellow#FFFF00 жёлтый gold#FFD800 золотой orange#FFA500 оранжевый navy# тёмно-синий blue#0000FFсиний teal# петроль aqua#00FFFFголубой

66 Создание списков

67 ….. (от англ. ordered list – упорядоченный список) Создание нумерованного списка Нумерованные списки

68 ….. (от англ. ordered list – упорядоченный список) Создание нумерованного списка ….. (от англ. list item – элемент списка) Определяет каждый элемент списка и присваивает номер Нумерованные списки

69 ….. (от англ. ordered list – упорядоченный список) Создание нумерованного списка ….. (от англ. list item – элемент списка) Определяет каждый элемент списка и присваивает номер Параметр ЗначениеПример start – с какого значения начинается нумерация Числа 0, 1, 2, 3… Нумерованные списки

70 ….. (от англ. ordered list – упорядоченный список) Создание нумерованного списка ….. (от англ. list item – элемент списка) Определяет каждый элемент списка и присваивает номер Параметр ЗначениеПример start – с какого значения начинается нумерация Числа 0, 1, 2, 3… type – тип нумерации A – большие латинские буквы a - малые латинские буквы элемент списка I – большие римские цифры i – большие римские цифры 1 – арабские цифры Нумерованные списки

71 ….. (от англ. unordered list – неупорядоченный список) Создание маркированного списка Маркированные списки

72 ….. (от англ. unordered list – неупорядоченный список) Создание маркированного списка ….. (от англ. list item – элемент списка) Определяет каждый элемент списка Маркированные списки

73 ….. (от англ. unordered list – неупорядоченный список) Создание маркированного списка ….. (от англ. list item – элемент списка) Определяет каждый элемент списка Параметр ЗначениеПример type – вид маркера circle – жирные точки элемент списка disc – маленькие окружности square - квадратики Маркированные списки

74 ….. Определяет каждый элемент списка и присваивает номер Параметр ЗначениеПример Для нумерованного списка (создание списков со смешанной нумерацией) type – тип нумерации AaAa элемент списка IiIi 1 Параметры элемента списка

75 ….. Определяет каждый элемент списка и присваивает номер Параметр ЗначениеПример Для нумерованного списка (создание списков со смешанной нумерацией) type – тип нумерации AaAa элемент списка IiIi 1 value – нарушает последовательность нумерации Числа 0, 1, 2, 3,… элемент списка Параметры элемента списка

76 ….. Определяет каждый элемент списка и присваивает номер Параметр ЗначениеПример Для нумерованного списка (создание списков со смешанной нумерацией) type – тип нумерации AaAa элемент списка IiIi 1 value – нарушает последовательность нумерации Числа 0, 1, 2, 3,… элемент списка Для маркированного списка (создание списков со смешанной нумерацией) – аналогично: type = circle (disc, square) Параметры элемента списка

77 Многоуровневые списки элемент списка элемент списка элемент списка элемент списка ________________ 1._____________ 2._____________ 3._____________ 1. ___________ _________________

78 Списки определений ….. Создает список определений

79 Списки определений ….. Создает список определений …..Определяет каждый из терминов списка

80 Списки определений ….. Создает список определений …..Определяет каждый из терминов списка …..Описание каждого определения

81 Например термин 1 описание термина 1 термин 2 описание термина 2 Термин 1 Описание термина 1 Термин 2 Описание термина 2

82 Работа с таблицами

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

84 ….. Внутри заключена вся таблица, описывает параметры таблицы целиком

85 ….. Внутри заключена вся таблица, описывает параметры таблицы целиком ….. Внутри заключены строки, описывает параметры соответствующей строки

86 ….. Внутри заключена вся таблица, описывает параметры таблицы целиком ….. Внутри заключены строки, описывает параметры соответствующей строки ….. Внутри заключено содержимое ячеек, описывает параметры отдельной ячейки

87 Таблица 2 х 2 1 строка, 1 столбец 1 строка, 2 столбец 2 строка, 1 столбец 2 строка, 2 столбец 1 строка, 1 столбец 1 строка, 2 столбец 2 строка, 1 столбец 2 строка, 2 столбец

88 ….. Параметр Значение BORDER – толщина внешней рамки В пикселях

89 ….. Параметр Значение BORDER – толщина внешней рамки В пикселях BORDERCOLOR – цвет внешней рамки Название (код) цвета

90 ….. Параметр Значение BORDER – толщина внешней рамки В пикселях BORDERCOLOR – цвет внешней рамки Название (код) цвета align – выравнивание left - по левому краю right - по правому краю center – по центру

91 ….. Параметр Значение BORDER – толщина внешней рамки В пикселях BORDERCOLOR – цвет внешней рамки Название (код) цвета align – выравнивание left - по левому краю right - по правому краю center – по центру сellspacing - расстояние между рамками ячеек В пикселях

92 ….. Параметр Значение BORDER – толщина внешней рамки В пикселях BORDERCOLOR – цвет внешней рамки Название (код) цвета align – выравнивание left - по левому краю right - по правому краю center – по центру сellspacing - расстояние между рамками ячеек В пикселях cellpadding – расстояние между содержимым ячейки и рамкой В пикселях

93 ….. Параметр Значение align – выравнивание для всей строки left - по левому краю right - по правому краю center – по центру

94 ….. Параметр Значение align – выравнивание для всей строки left - по левому краю right - по правому краю center – по центру ….. align – выравнивание для отдельной ячейки left - по левому краю right - по правому краю center – по центру

95 ….. Параметр Значение align – выравнивание для всей строки left - по левому краю right - по правому краю center – по центру ….. align – выравнивание для отдельной ячейки left - по левому краю right - по правому краю center – по центру valign – вертикальное выравнивание содержимого ячейки top - по верхнему краю ячейки middle - по центру bottom - по нижнему краю

96 Слияние ячеек ….. Параметр Значение rowspan – слияние двух соседних ячеек в одной строке Целые числа, обозначающие количество объединяемых ячеек

97 Слияние ячеек ….. Параметр Значение rowspan – слияние двух соседних ячеек в одной строке Целые числа, обозначающие количество объединяемых ячеек colspan – слияние смежных ячеек одного столбца Целые числа, обозначающие количество объединяемых ячеек

98 Пример 1 Высокая ячейка Обычная ячейка Обычная ячейка Высокая ячейка Обычная ячейка

99 Пример 2 Широкая ячейка Обычная ячейка Широкая ячейка Обычная ячейка

100 Заголовок таблицы... Параметр Значение align – выравниваниеleft - по левому краю right - по правому краю bottom – вниз, под таблицей top - название располагается вверху таблицы

101 Заголовок строк и столбцов ….. (используется вместо ) Обычно – полужирный шрифт и выравнивание по центру

102 Частичное отображение ячеек... Параметр ЗначениеПример rules – отвечает за отображение рамок отдельных ячеек (при этом внешняя рамка отображается всегда) none – отображается только внешняя рамка rows – видны границы между строками cols - видны границы между столбцами

103 ... Параметр Значение frame - отвечает за отображение разных частей внешней рамки Вертикальные разделители lhs – слева от ячеек rhs – справа от ячеек vsides – по обеим сторонам

104 ... Параметр Значение frame - отвечает за отображение разных частей внешней рамки Вертикальные разделители lhs – слева от ячеек rhs – справа от ячеек vsides – по обеим сторонам Горизонтальные разделители above – над ячейками below – под ячейками hsides – сверху и снизу ячеек void – видны только границы между ячейками, но не рамка вокруг всей таблицы

105 Фон таблицы и ячеек Параметры: bgcolor = название (код) цвета background = имя графического файла

106 Включение графики в WEB – страницу

107 Параметр ЗначениеПример SRC – задает имя файла с картинкой имя файла ALT – контекстная подсказка Текст подсказки borderв пикселях (или %) width height в пикселях (или %)

108 Параметр Значение aligntop вертикальное выравнивание по верхнему краю middle вертикальное выравнивание по центру bottom вертикальное выравнивание по нижнему краю left горизонтальное выравнивание по левому краю right горизонтальное выравнивание по правому краю

109 Параметр Значение Задание полей вокруг картинки (отступы): hspace - для верхнего и нижнего поля (по вертикали) vspace - для боковых полей (по горизонтали) в пикселях

110 Фоновая графика Фоновая графика задается в теге BODY в начале документа HTML, используя атрибут background = "имя_файла". Для фиксированного фона используется атрибут bgproperties = fixed

111 Определение гиперссылок

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

113 Ссылки могут быть: текстовыми графическими Текстовые ссылки обычно выделяются другим цветом и подчеркиванием. Графические ссылки выделяются рамкой другого цвета. При наведении указателя мыши на ссылку, он меняется.

114 Текстовые ссылки Структура текстовой ссылки имеет следующий вид: текст_ссылки

115 Так как настройки цвета в браузере у различных пользователей могут отличаться, то возникает задача принудительного задания цветов, чтобы обеспечить хорошую видимость ссылок. В теге для ссылок задаются следующие атрибуты: link - для непрочитанной ссылки vlink - для прочитанной ссылки. Пример:

116 Графические ссылки Структура графической ссылки имеет следующий вид: Пример:

117

118

119