© Пивоваров Я.А., 2005 г. Появление HTML пришлось на начало 90-х годов благодаря двум протоколам, которые являются базовыми для Internet – TCP (Transmission. - презентация

1 © Пивоваров Я.А., 2005 г. Появление HTML пришлось на начало 90-х годов благодаря двум протоколам, которые являются базовыми для Internet – TCP (Transmission Control Protocol – транспортный протокол) и IP (Internet Protocol – протокол маршрутизации). HyperText Markup Language – язык разметки гипертекста Гипертекст – это своего рода нелинейное письмо, линейность которого нарушается применением гиперссылок. История языка HTML

2 © Пивоваров Я.А., 2005 г. Теги Для разметки HTML документа используют теги(флаги разметки). Тег – это определенная последовательность символов, заключенные между знакими (меньше). < - начало тега > - конец тега ПРИМЕР: и Флаги бывают парные и непарные, открывающие и закрывающие. Отличительный признак закрывающего флага символ /

3 © Пивоваров Я.А., 2005 г. Общая структура HTML документа заголовок окна текст документа (страничка) HTML документ

4 © Пивоваров Я.А., 2005 г. Пример 1 Моя первая страничка Привет! Это моя первая страничка на HTML. Сохранить с названием primer1.html

5 © Пивоваров Я.А., 2005 г. Теги разделов Если перед началом параграфа вставить флаг, то программа вставит перед началом параграфа пустую строку. Флаг перенос на новую строку. Он непарный. Также можно задать параметры выравнивания ALIGN - выравнивание по левому краю - выравнивание по правому краю - выравнивание по центру - выравнивание по ширине документа

6 © Пивоваров Я.А., 2005 г. Абзацы можно разделять горизонтальной линией Так же в HTML поддерживается шесть уровней заголовков. Заголовки служат для выделения логических частей текста и обозначаться буквой h. Цифра после буквы показывает уровень заголовка. ( …. ) Теги разделов

7 © Пивоваров Я.А., 2005 г. Пример 2 Моя первая страничка Привет! Это моя вторая страничка на HTML. Мой город Я живу в городе..... Работа Я работаю в школе Мои увлечения Я увлекаюсь Мои друзья У меня есть друзья: Desigh "....." Сохраните как primer2.html

8 © Пивоваров Я.А., 2005 г. Способы выделения слов Фрагмент текста можно выделить полужирным шрифтом(Bold). Отдельные слова можно подчеркнуть (Underline) Так же для выделения используют курсив (Italic) Для выделения логических частей текста так же используют горизонтальные линии. Размер и толщина линии зажаются с помощью параметров Size и Wigth: Горизонтальную линию можно вставить как графический файл.

9 © Пивоваров Я.А., 2005 г. Способы выделения слов Шрифт текста, расположенного между флагами будет уменьшен или увеличен на n-количество пунктов, которое вы зададите.

10 © Пивоваров Я.А., 2005 г. Пример 3 Моя первая страничка Привет! Это моя третья страничка на HTML. Мой город Я живу в городе..... Работа Я работаю в школе Мои увлечения Я увлекаюсь Мои друзья У меня есть друзья :

11 © Пивоваров Я.А., 2005 г. Списки Очень важный элемент Веб-страничек – списки. Нумерованный текст Маркированный текст Вложенный текст текст текст

12 © Пивоваров Я.А., 2005 г. Пример 4 советы по изготовлению страничек советы по изготовлению страничек По возможности избегайте пиктограммы "в процессе производства" Используйте соответствующий язык Не перегружайте страничку большими изображениями Избегайте драмматического эффекта! Проверяйте как можно чаще ссылки на вышей странице! Не забывайте обновлять свою страницу! Перед тем как положить готовую страничку на сервер надо: Проверить грамматические ошибки Просмотреть свою страничку в разных программах просмотра. Для рекламы странички надо....

13 © Пивоваров Я.А., 2005 г. Цвета У флага есть несколько параметров: BGCOLOR – цвет фона TEXT – цвет текста LINK – цвет гипертекстовой связи VLINK – цвет гипертекстовой связи, уже посещенной в прошлом ALINK – цвет активной гипертекстовой связи Так же для изменения начертания шрифта используется флаг c атрибутами: face – задает имя шрифта size – задает размер шрифта color – задает цвет шрифта

14 © Пивоваров Я.А., 2005 г. Пример 5 Моя страничка На данной страничке текст и изображения будут распологаться на цветном фоне Шрифт может быть разного цвета. Сохранить как primer5.html и поэкспериментируйте с ней.

15 © Пивоваров Я.А., 2005 г. Наклеим обои «Обои» - это фон, на котором будет распологаться ваша информация. «Обои» задаются следующим образом

16 © Пивоваров Я.А., 2005 г. Пример 6 Cтраничка с обоями На данной страничке текст и изображения будут распологаться на фоне "обоев" Сохранить как primer6.html

17 © Пивоваров Я.А., 2005 г. Вставка изображений Простейший пример включения изображения в страничку - если файл находится в одном каталоге со страничкой Если файл находится в другом каталоге то указывается путь. Дополнительные параметры: WIDHT – ширина HEIGHT – высота ALIGN – выравнивание ABSMIDDLE CENTER – по центру LEFT – слева RIGHT – справа Alt – альтернативный текст

18 © Пивоваров Я.А., 2005 г. Пример 7 Cтраничка с обоями На данной страничке текст и изображения будут распологаться на фоне "обоев" Сохранить как primer7.html

19 © Пивоваров Я.А., 2005 г. Пример 8 Cтраничка с обоями На данной страничке текст и изображения будут распологаться на фоне "обоев"

20 © Пивоваров Я.А., 2005 г. Таблицы Таблица вставляется флагами Между флагами могут быть: 1. Название таблицы Параметр ALIGN: Top – над таблицей Bottom – под таблицей

21 © Пивоваров Я.А., 2005 г. 2. Строка таблицы Параметр ALIGN – выравнивание внутри строки: left right center valign – вертикальное выравнивание внутри строки Параметр VALIGN – выравнивание внутри строки: Top bottom middle Bgcolor – цвет фона внутри строки Таблицы

22 © Пивоваров Я.А., 2005 г. 3. Столбец таблицы Параметр ALIGN – выравнивание: left right center valign – вертикальное выравнивание Параметр VALIGN – выравнивание внутри строки: Top bottom middle COLSPAN, ROWSPAN – растягивание клетки на несколько столбцов, строк BGCOLOR – цвет фона Таблицы

23 © Пивоваров Я.А., 2005 г. Пример 9 Cтраничка с таблицей Самая простая таблица ячейка А ячейка В ячейка С ячейка D ячейка E ячейка F Сохранить как primer9.html

24 © Пивоваров Я.А., 2005 г. Таблицы Чтобы назвать столбцы и строки, можно воспользоваться флагом Заголовок Он имеет следующие параметры: Align – выравнивание Valign – вертикальное выравнивание COLSPAN, ROWSPAN – растягивание клетки на несколько столбцов, строк Width – ширина названия BGCOLOR – цвет фона

25 © Пивоваров Я.А., 2005 г. Пример 10 Cтраничка с таблицей Самая простая таблица с заголовками заголовок 1 заголовок 2 заголовок 3 ячейка А ячейка В ячейка С ячейка D ячейка E ячейка F Сохранить как primer10.html

26 © Пивоваров Я.А., 2005 г. Таблицы Простые таблицы – большая редкость. Для создания сложных таблиц используют теги COLSPAN – сообщает на сколько нужно раздвинуть клетку таблицы на несколько столбцов ROWSPAN – растягивает клетку таблицы на две строки.

27 © Пивоваров Я.А., 2005 г. Пример 11 Cтраничка с таблицей Таблица большая ячейка А ячейка 1 ячейка 2 ячейка 3 ячейка 4 большая ячейка С большая ячейка D

28 © Пивоваров Я.А., 2005 г. Рамки(фреймы) С помощью рамок(фреймов) экран разделяется на несколько областей, в каждой из которых отображается содержание отдельной страницы. Для создания фреймов используют флаг и, а для их описания флаг

29 © Пивоваров Я.А., 2005 г. Пример 12 Создадим 4 файла a2.html, b2.html, c2.html, d2.html Рамки. страничка А Фрейм А розового цвета

30 © Пивоваров Я.А., 2005 г. Пример 12 демонстрация фреймов Попробуйте поэкспериментировать с параметром COLS.

31 © Пивоваров Я.А., 2005 г. Рамки Если изменить параметр изменить на, то фреймы станут горизонтальными. Попробуйте и сохраните как primer13.html

32 © Пивоваров Я.А., 2005 г. Пример 14 демонстрация фреймов

33 © Пивоваров Я.А., 2005 г. Пример 15 демонстрация фреймов

34 © Пивоваров Я.А., 2005 г. Гипертекстовые связи Гипертекстовая связь задается тегом: …. Параметр HREF определяет, адрес ссылки, на которую будет совершен переход, если щелкнуть по объекту, находящемуся между флагами. Например ВолгаТелеком