HTML Язык гипертекстовой разметки страниц. Содержание: Структура HTML документа Структура HTML документа Заголовок Абзац Атрибуты тегов Inline-описание. - презентация

1 HTML Язык гипертекстовой разметки страниц

2 Содержание: Структура HTML документа Структура HTML документа Заголовок Абзац Атрибуты тегов Inline-описание (style) Inline-описание (style) Атрибуты тега body Атрибуты тега body Фиксированный текст Фиксированный текст Вставка рисунка Линии Списки Ссылки Таблицы Фреймы

3 Web-страница Web-страница – это документ в формате HTML, содержащий текст и специальные инструкции – дескрипторы (тэги) HTML. Документы HTML хранятся в файле с расширением.html, или.htm (например, index.html)

4 Дескрипторы HTML Дескрипторы HTML сообщают Web-броузеру информацию о структуре и особенностях форматирования web-страницы. Каждый дескриптор содержит определенную инструкцию и заключен в уголковые скобки ( ) Многие дескрипторы обладают атрибутами, позволяющие указывать значения параметров

5 Структура HTML документа Служебная информация тело документа

6 Создание текста Текст написанный между тегами отображается на экране Цветы и фрукты Фрукты и цветы. У вас нет собственного сада? Не беда! Наши специальные патентованные удобрения позволяют выращивать роскошные и пышущие здоровьем фрукты прямо ДОМА! Вырастите чудесные экзотические цветы и подарите своим друзьям

7 Отображение в окне броузера Фрукты и цветы. У вас нет собственного сада? Не беда! Наши специальные патентованные удобрения позволяют выращивать роскошные и пышущие здоровьем фрукты прямо ДОМА! Вырастите чудесные экзотические цветы и подарите своим друзьям

8 Создание заголовков Заголовки создаются тегом. Используется 6 уровней заголовков от до Например: Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6 Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6

9 Абзац Абзац создается тегом Например: Текст абзаца

10 Форматирование текста Фрукты и цветы У вас нет собственного сада? Не беда! Наши специальные патентованные удобрения позволяют выращивать роскошные и пышущие здоровьем фрукты прямо ДОМА ! Вырастите чудесные экзотические цветы и подарите своим друзьям

11

12 Атрибуты тегов Текст Например: Текст

13 Атрибут style Устанавливает стиль написания текста текст Style= " параметр1:значение1; параметр2:значение2;… "

14 Основные параметры шрифта font-weight: [bold|normal|number] - жирность шрифта font-style: [normal|italic|oblique] - наклон шрифта font-size: number - размер шрифта font-family: name - гарнитура шрифта color: number - цвет шрифта background-color: number - цвет подложки background: url - текстурная подложка

15 Например: текст абзаца

16 текст абзаца

17 Основные параметры абзаца text-align: [left|right|center|justify] – выравнивание text-indent: number - отступ красной строки line-height: number – интерлиньяж (межстрочный интервал) letter-spacing: number – трекинг (межбуквенный интервал)

18 Основные параметры абзаца (отступы от текста) padding-left: number - отступ от текста слева padding-right: number - отступ от текста справа padding-top: number - отступ от текста сверху padding-bottom: number - отступ от текста снизу

19 Основные параметры абзаца (отступы от границ) margin-left: number - отступ от границы слева margin-right: number - отступ от границы справа margin-top: number - отступ от границы сверху margin-bottom: number - отступ от границы снизу

20 Атрибуты тега Text – цвет текста Bgcolor – цвет фона Background=url – фоновый рисунок Например: Текст страницы (относится ко всей странице)

21 Отступы на странице LEFTMARGIN=0 – отступ слева TOPMARGIN=0 – отступ сверху MARGINWIDTH=0 – ширина поля (левого и правого) MARGINHEIGHT=0 – ширина поля (верхнего и нижнего)

22 Начертание шрифтов Полужирный текст курсив Подчеркнутый текст Пропорциональный

23 Фиксированный текст текст Текст, записанный в тэге pre выводится с точностью до пробела. Его можно использовать для написания стихотворений

24 Вставка рисунка

25 Атрибуты тэга Горизонтальное выравнивание Вертикальное выравнивание

26 Другие атрибуты тэга IMG

27 Выравнивание рисунка текст расположен сверху текст расположен посередине текст расположен снизу

28 Расположение текста Текст расположен сверху Текст расположен посередине Текст расположен снизу

29 Обтекание рисунка Зоопарк города Бердичева Зоопарк города Бердичева, за неимением ничего другого, приглашает взглянуть на кота обыкновенного Впрочем мы готовы предложить вам лекцию о диких животных

30 Пример обтекания рисунка Зоопарк города Бердичева Зоопарк города Бердичева, за неимением ничего другого, приглашает взглянуть на кота обыкновенного Впрочем мы готовы предложить вам лекцию о диких животных

31 Линии (center или left) (ширина линии в процентах/пикселях) (толщина линии) (отмена объемности) (цвет линии, только в IE)

32 Маркированный список роза мимоза мак василек Результат роза мимоза мак василек

33 Нумерованный список Первый Второй Третий Результат 1.Первый 2.Второй 3.Третий

34 Графические маркеры Результат Первый Второй Третий Первый Второй Третий

35 Ссылки Главный документ web-узла должен иметь имя index.html. Остальные могут именоваться как угодно, например, index1.html, … Ссылкой может являться текст или картинка

36 Формат ссылки и цвет текст ссылки Атрибуты тэга body link – цвет ссылки alink – цвет активной ссылки vlink – цвет посещенной ссылки

37 Текстовые ссылки текст ссылки новости фото комментарий новости фото комментарий Ссылка на стр. новостей i1.html

38 Графическая ссылка Рисунок является ссылкой на страницу index1.html

39 Ссылка на часть картинки Навигационные карты задаются тэгом Map. Тэг Map включает себя тэг(и) Area, которые определяют геометрические области внутри карты (в нашем примере это будут прямоугольники, окружности, области) и ссылки, связанные с каждой областью

40 Навигационная карта 1 Сделать область 1 рисунка (240Х140) навигационной ссылкой на документ index1.html В нашем примере у прямоугольника 1 координаты: x1=25, y1=36, x2=114, y2=98

41 Прямоугольная область... Куча текста и всякого содержания, или ничего...

42 Навигационная карта 2 Сделать область 1 рисунка (240Х140) навигационной ссылкой на документ index2.html В нашем примере у окружности 1 координаты: x=46, y=48, r=35

43 Круговая область... Куча текста и всякого содержания, или ничего...

44 Навигационная карта 3 Координаты пишутся по следующему принципу:

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

46 Ссылка на текст ссылки Результат Ссылка на «почтовый ящик»

47 Опции mailto -?subject=Тема пиcьма - &Body=Текст вашего сообщения - (копии письма через запятую) - (скрытые копии письма через запятую)

48 Получение бланка При нажатии на ссылку почтовая программа выдаст бланк с заполненным адресом

49 Бланк. Что это такое?

50 Внутренние ссылки Чтобы сделать ссылку внутри документа создают закладку (якорь) опцией name,или id, задающей уникальное имя закладки текст закладки Часть текста делают ссылкой на имя закладки текст ссылки

51 Ссылка на закладку из другого документа Ссылка из какого-то документа

52 Ссылка на другие документы (пример 1) Можно ссылаться на любые документы, *.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:)

53 Ссылка на другие документы (пример 2)

54 Таблица (2 строки и 3 столбца) название название

55 Атрибуты table Border="?" – обрамление таблицы Bordercolor="?" – цвет обрамления bgcolor ="?" – цвет фона cellspacing=0 – ширина границы между ячейками cellpadding=5 – отступ текста от границ ячеек

56 Атрибуты tr и td width="25%" – ширина ячейки height="150" – высота ячейки bgcolor="цвет" – цвет фона ячейки valign="top" – вертикальное выравнивание align= "left" – горизонтальное выравнивание colspan="number" – объединение колонок rowspan="number" – объединение строк

57 Фреймы Фреймы позволяют открыть в окне Броузера не один, а несколько документов. Например: Menu.html Logo.html Content.html

58 Вставка фрема фрейм ы

59 Варианты фреймов

60 Структура 1 /* rows – ширина ряда */

61 Структура 2 /* rows–ширина колонки */

62 итоги Мы можем делить окно нашего броузера либо на ряды, либо на колонки, с помошью параметров тэга Cols и Rows. Другого способа деления не существует. Одновременно эти параметры использовать нельзя.

63 Фреймы внутри фреймов

64 Продолжение

65 Атрибуты frame scrolling="no" – наличие полосы прокрутки (yes, auto) marginwidth="0" – ширина поля левого и правого marginheight="0" – ширина поля верхнего и нижнего name= " name" – имя фрейма для ссылки Border="0" – бордюр (frameset)

66 Ссылки на фрейм Мой проект о рыбках Главная

67 Простейшая структура Web-узла Меню Главная Логотип сайта (logo.html)

68 Полезные ссылки - Страшный всемирный заговор - почему фреймы не так страшны - Я люблю фреймы - Фреймы как альтернативное средство навигации - Встроенные фреймы : элемент IFRAMEСтрашный всемирный заговор - почему фреймы не так страшныЯ люблю фреймыФреймы как альтернативное средство навигацииВстроенные фреймы : элемент IFRAME

69 Это пока все Конец