К. Поляков, 2007-2011 Web-страницы. Язык HTML и др. 1.ВведениеВведение 2.Структура документаСтруктура документа 3.СпискиСписки 4.ГиперссылкиГиперссылки. - презентация

1 К. Поляков, Web-страницы. Язык HTML и др. 1. Введение Введение 2. Структура документа Структура документа 3. Списки Списки 4. Гиперссылки Гиперссылки 5. Оформление документа Оформление документа 6. Рисунки Рисунки 7. Таблицы Таблицы 8. Фреймы Фреймы 9. Блоки (DIV)Блоки (DIV) 10. Понятие о JavaScript Понятие о JavaScript

2 К. Поляков, Web-страницы. Язык HTML и др. Тема 1. Введение

3 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Что такое Web-страницы? Гиперссылка – «активная»ссылка на другой документ. Гипертекст – текст, содержащий гиперссылки. Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой. WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа). Web-страница – текстовый файл, в котором описано размещение материала на экране. Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).

4 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Какие бывают Web-страницы? статические – существуют на сервере в виде готовых файлов: *.htm, *.html динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php позволяют выбирать информацию из базы данных по заранее неизвестным запросам дополнительная нагрузка на сервер загружаются медленнее

5 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Язык HTML HTML = Hypertext Markup Language (язык разметки гипертекста) HTML – это не язык программирования! ! HTML-страница – это текстовый файл (Блокнот): Моя страница Привет! … Моя страница Привет! … index.html sail.jpg man.jpg sunset.jpg clock.avi ball.swf bee.wav images

6 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Тэги Тэг – это команда языка HTML, которую выполняет браузер: непарные тэги парные тэги (контейнеры) вставить рисунок открывающий закрывающий область действия тэга: описание таблицы

7 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Простейшая Web-страница Моя первая Web-страница Привет! Моя первая Web-страница Привет! first.html Моя первая Web-страница Моя первая Web-страница шапка («голова») Привет! Привет! основная часть («тело»)

8 К. Поляков, Web-страницы. Язык HTML и др. Тема 2. Структура документа. Специальные символы

9 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Заголовки: H1 … H6 Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки выравнивание: История left, center, right left, center, right

10 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Абзацы переход на новую строку абзац (с отступами) И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнет ковыль... И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнет ковыль... Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. До самого вечера тело с варежками... Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. До самого вечера тело с варежками...

11 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Выравнивание Этот текст выровнен по центру. Этот текст выровнен по ширине. Этот текст выровнен по центру. Этот текст выровнен по ширине. left по левой границе right по правой границе center по центру justify по ширине Не используйте выравнивание по ширине для узких столбцов! ! атрибут тэга

12 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Специальные символы Символ HTML-код Название –—(длинное) тире неразрывный пробел § §параграф © ©символ авторского права « «левая русская кавычка » »правая русская кавычка ® ®зарегистрированная торговая марка ° °градус ² ²квадрат ³ ³куб ¼ ¼четверть ½ ½половина ¾ ¾три четверти × ×знак умножения ÷ ÷знак деления

13 К. Поляков, Web-страницы. Язык HTML и др. Тема 3. Списки

14 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Маркированные списки Вася Петя Коля Вася Петя Коля unordered list (неупорядоченный список) list item (элемент списка) изменение маркера: disk circle square

15 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Нумерованные списки Вася Петя Коля Вася Петя Коля ordered list (упорядоченный список) изменение нумерации: , i, I, a, A

16 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Списки определений компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск definition list (список определений) definition term (термин) definition description (описание)

17 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Многоуровневые списки Города России Города Украины Города России Города Украины Москва Санкт-Петерург Киев Одесса

18 К. Поляков, Web-страницы. Язык HTML и др. Тема 4. Гиперссылки

19 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Ссылки на другие страницы сайта Таблицы страница в той же папке anchor (якорь) hyper reference (гиперссылка) страница во вложенной папке Пример страница в соседней папке Текст выйти из текущей папки

20 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Примеры (ссылки из файла rock.html) story.html stories – novels – new – old – list.html sea.html verse.html rock.html

21 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Ссылки на другие сайты Почта на главную страницу сайта index.htm, index.html, default.asp, … на конкретную страницу сайта (URL) Васин текст Васин текст на файл для скачивания Скачать Скачать

22 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Ссылки внутри страницы Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы 1. Это текст главы 1. Наверх Глава 2 Это текст главы 2. Это текст главы 2. Это текст главы 2. Наверх Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы 1. Это текст главы 1. Наверх Глава 2 Это текст главы 2. Это текст главы 2. Это текст главы 2. Наверх в другом файле Цвет текста метка (якорь) переход на метку

23 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Запуск почтовой программы Напишите мне! Напишите мне!

24 К. Поляков, Web-страницы. Язык HTML и др. Тема 5. Оформление документа. Стилевые файлы (CSS)

25 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Содержание и оформление Сборник задач по физике Григорий Остер Задача 61 Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Одно при каждой остановке толкало Петю вперед, а другое, когда вагон трогался – дергало назад. Что это за хулиганские явления, и может ли транспортная милиция с ними справиться? Сборник задач по физике Григорий Остер Задача 61 Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Одно при каждой остановке толкало Петю вперед, а другое, когда вагон трогался – дергало назад. Что это за хулиганские явления, и может ли транспортная милиция с ними справиться? содержание (контент) логическая разметка ( *.html ) логическая разметка ( *.html ) оформление физическая разметка ( *.css ) физическая разметка ( *.css ) main.css mini.css print.css

26 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Логическая разметка выделение (emphasize) Это моя первая победа. сильное выделение (strong) Вася код программы a:= 2*b определение (definition) Сурок - это... цитата (citation) Блажен, кто верует,... сокращение (abbreviation) НИИЧАВО

... Пример CSS ... Пример CSS ... qq.html my.css body { color: white; background: #0000E0; } body { color: white; background: #0000E0; } ..."> ... Пример CSS ... Пример CSS

38 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Шрифты p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } для всех абзацев семейство шрифтов serif – с засечками sans-serif – без засечек monospace – моноширинный serif – с засечками sans-serif – без засечек monospace – моноширинный размер в пикселях normal – обычный italic - курсив normal – обычный italic - курсив normal – обычный bold - жирный normal – обычный bold - жирный

39 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Классы (стили оформления) p.spec { font-style: italic; background: green; } p.spec { font-style: italic; background: green; } для абзацев класса spec LEtat cest moi. LEtat cest moi. qq.html LEtat cest moi..spec { font-style: italic; background: green; }.spec { font-style: italic; background: green; } для всех элементов класса spec для всех элементов класса spec Россия молодая Россия молодая

40 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Размеры, выравнивание p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } ширина высота Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. выравнивание: left center right justify выравнивание: left center right justify 100px 80% 20px фон абзацный отступ

41 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Рамка и поля p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } рамка отступы снаружи отступы внутри сверху, справа, снизу, слева со всех сторон толщина solid – сплошная dashed - штриховая dotted – точечная solid – сплошная dashed - штриховая dotted – точечная цвет Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. 40px 5px 20px

42 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, p.hallo { background: white url(images/grad.jpg); } p.hallo { background: white url(images/grad.jpg); } 42 Фоновый рисунок Привет, Вася! Привет, Вася! Привет, Вася! p.hallo { background: url(grad.jpg) repeat-y; } p.hallo { background: url(grad.jpg) repeat-y; } Привет, Вася!

43 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Фоновый рисунок без повторения p. { background: url(letter.gif) no-repeat; padding-left: 20px; } p. { background: url(letter.gif) no-repeat; padding-left: 20px; } 20px

44 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Ссылки p. a { color: green; text-decoration:none; } p. a { color: green; text-decoration:none; } p. a:hover { color: #00F; text-decoration:underline; } p. a:hover { color: #00F; text-decoration:underline; } p. a:visited { color: #F0F; } p. a:visited { color: #F0F; } ссылки внутри абзаца стиля убрать подчеркивание посещённые ссылки подчеркнуть когда мышь над ссылкой

45 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Выделение отдельных слов.latin { color: green; font-style: italic; }.latin { color: green; font-style: italic; } класс, применимый ко всему курсив Собака(лат. Canis lupus familiaris ) одно из наиболее Домашних "животных-компаньонов". Собака(лат. Canis lupus familiaris ) одно из наиболее Домашних "животных-компаньонов". Что хочется исправить? !

46 К. Поляков, Web-страницы. Язык HTML и др. Тема 6. Рисунки

47 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Форматы рисунков GIF (Graphic Interchange Format) сжатие без потерь прозрачные области анимация только с палитрой (2…256 цветов) рисунки с четкими границами, мелкие рисунки JPEG (Joint Photographer Expert Group) сжатие с потерями только True Color (16,7 млн. цветов) нет анимации и прозрачности рисунки с размытыми границами, фото PNG (Portable Network Graphic) сжатие без потерь с палитрой (PNG-8) и True Color (PNG-24) прозрачность и полупрозрачность (альфа-канал) нет анимации плохо сжимает мелкие рисунки

48 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Фон страницы (через CSS) body { background: url(back.jpg); } body { background: url(back.jpg); } 'images/back.jpg' '../images/back.jpg ' 'images/back.jpg' '../images/back.jpg ' Не должно быть «швов»! ! Фон не должен мешать! ! #6e5c62;

49 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Рисунки в документе из той же папки: из другой папки: с другого сервера: image (изображение) source (источник)

50 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Выравнивание left right top bottom (по умолчанию) middle

51 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Отступы VSPACE (vertical space) HSPACE (horizontal space)

52 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Выравнивание и отступы (CSS) img.left { float: left; margin: 5px 10px; } img.left { float: left; margin: 5px 10px; } = VSPACE = HSPACE = ALIGN margin: 5px 10px 5px 0; отступа слева нет!

53 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Другие атрибуты всплывающая подсказка надпись на месте рисунка, если его нет всплывающая подсказка надпись на месте рисунка, если его нет размеры позволяют: растянуть - сжать не портить дизайн, если рисунка нет размеры позволяют: растянуть - сжать не портить дизайн, если рисунка нет толщина рамки вокруг рисунка

локальная ссылка: ссылка на " title="Основы Web-дизайна: HTML и редактор HEFS К. Поляков, 2007-2011 http://kpolyakov.narod.ru 54 Рисунок-гиперссылка локальная ссылка: ссылка на " class="link_thumb"> 54 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Рисунок-гиперссылка локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет «хвост» не будет «хвоста» локальная ссылка: ссылка на "> локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет «хвост» не будет «хвоста»"> локальная ссылка: ссылка на " title="Основы Web-дизайна: HTML и редактор HEFS К. Поляков, 2007-2011 http://kpolyakov.narod.ru 54 Рисунок-гиперссылка локальная ссылка: ссылка на ">

55 К. Поляков, Web-страницы. Язык HTML и др. Тема 7. Таблицы

56 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Простейшая таблица Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек. Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек. толщина рамки TABLEтаблица TR = table rowстрока таблицы TD = table dataданные таблицы TH = table header заголовок (жирный, по центру)

57 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Размеры ширина в пикселях или в % от ширины окна браузера высота в пикселях всей таблицы: строки: ячейки: ширина в пикселях или в % от ширины таблицы

58 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Размеры (через CSS) table.spec { width: 60%; height: 300; } table.spec { width: 60%; height: 300; } table.spec tr { height: 50px; } table.spec tr { height: 50px; } всей таблицы: строки: ячейки: table.spec td.qq { width: 25%; height: 50px; } table.spec td.qq { width: 25%; height: 50px; }......

По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине 59 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Выравнивание По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине всей таблицы: информации в ячейках: left, center, right left, center, right left, center, right left, center, right top, middle, bottom top, middle, bottom По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине...... всей таблицы: информации в ячейках: left, center, right left, center, right left, center, right left, center, right top, middle, bottom top, middle, bottom"> По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине

60 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Выравнивание (через CSS) По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине table.ex tr.centop { text-align: center; vertical-align: top; height:100px; } table.ex td.rmid { text-align: right; vertical-align: middle; width:200px; } table.ex tr.centop { text-align: center; vertical-align: top; height:100px; } table.ex td.rmid { text-align: right; vertical-align: middle; width:200px; } left, center, right left, center, right top, middle, bottom top, middle, bottom

61 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Фон и цвет текста Привет! Таблица из двух строк и двух столбцов Привет! Таблица из двух строк и двух столбцов цвет фона фоновый рисунок

62 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Фон и цвет текста (CSS) Привет! Таблица из двух строк и двух столбцов Привет! Таблица из двух строк и двух столбцов table.qq td { background: green; } table.qq tr.spec td { background: blue; color: white; } table.qq tr.spec td.r { background: red; } table.qq td.pic { background: url("web.jpg"); } table.qq td { background: green; } table.qq tr.spec td { background: blue; color: white; } table.qq tr.spec td.r { background: red; } table.qq td.pic { background: url("web.jpg"); } цвет фона рисунок

63 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Отступы

1 2 1 2 интервал между ячейками отступ внутри ячеек CELLSPACING CELLPADDING

64 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Отступы (CSS) border-spacing padding table#qq { background: blue; border-collapse: separate; border-spacing: 10px; padding: 10px; } #qq tr { background: white; } table#qq { background: blue; border-collapse: separate; border-spacing: 10px; padding: 10px; } #qq tr { background: white; } кроме IE 6

65 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Объединение ячеек Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! column span охват столбцов row span охват строк

66 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Вложенные таблицы Вася Петя Маша Даша Вася Петя Маша Даша

67 К. Поляков, Web-страницы. Язык HTML и др. Тема 8. Фреймы

68 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Фреймы Фрейм (frame) – это часть сложной Web-страницы, в которую может быть загружена другая Web- страница. 3 файла: left.html – страница в левой части right.html – страница в правой части index.html – описание структуры

69 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Описание структуры index.html Фреймы-столбцы Фреймы-столбцы columns столбцы columns столбцы ширина в пикселях или % все остальное место source источник source источник имя фрейма (для ссылок)

70 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Граница между фреймами граница между фреймами: 0 – невидима, 1 - видима граница между фреймами: 0 – невидима, 1 - видима ширина полосы между фреймами, за которую можно перетащить границу

71 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Настройка фрейма (FRAME) убрать отступы от края фрейма до содержимого полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда запретить изменение размеров убрать отступы от края фрейма до содержимого полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда запретить изменение размеров">

72 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Фреймы-строки index.html Фреймы-строки Фреймы-строки строки ширина в пикселях или % Фреймы-строки строки ширина в пикселях или %">

73 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Сложные структуры (3 фрейма) index.html

Глава 2 Глава 2 TARGET _blank – в новом окне _parent " title="Основы Web-дизайна: HTML и редактор HEFS К. Поляков, 2007-2011 http://kpolyakov.narod.ru 74 Как открыть ссылку в другом фрейме Глава 2 Глава 2 TARGET _blank – в новом окне _parent " class="link_thumb"> 74 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Как открыть ссылку в другом фрейме Глава 2 Глава 2 TARGET _blank – в новом окне _parent – в родительском окне _top – в главном окне (убрать фреймы) Глава 2 Глава 2 TARGET _blank – в новом окне _parent "> Глава 2 Глава 2 TARGET _blank – в новом окне _parent – в родительском окне _top – в главном окне (убрать фреймы)"> Глава 2 Глава 2 TARGET _blank – в новом окне _parent " title="Основы Web-дизайна: HTML и редактор HEFS К. Поляков, 2007-2011 http://kpolyakov.narod.ru 74 Как открыть ссылку в другом фрейме Глава 2 Глава 2 TARGET _blank – в новом окне _parent ">

75 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Фреймы в HEFS

76 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Работа с несколькими страницами переключение страниц закрыть текущую страницу (Ctrl-W) просмотр активной страницы

77 К. Поляков, Web-страницы. Язык HTML и др. Тема 9. Блоки (DIV)

78 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Блоки (DIV) – любое содержимое Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. 1

79 Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Блоки (DIV) – рамки и отступы Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus. Mauris eu turpis vel tellus tincidunt pulvinar. padding border margin #qq { padding: 5px 10px; border: 1px solid green; margin: 5px 15px 5px 10px; } #qq { padding: 5px 10px; border: 1px solid green; margin: 5px 15px 5px 10px; }

---