Скачать презентацию Web-страницы Язык HTML и др 1 Введение 6 Скачать презентацию Web-страницы Язык HTML и др 1 Введение 6

3802e1f9783ead50ee7f5440c3f07f41.ppt

  • Количество слайдов: 96

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

Создание Web-страницы. Язык HTML Тема 1. Введение Создан Тимом Бернерсом – Ли в 1989 Создание Web-страницы. Язык HTML Тема 1. Введение Создан Тимом Бернерсом – Ли в 1989 году. К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

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

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

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

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

. . .
область действия тэга: описание таблицы закрывающий К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

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

8 Основы Web-дизайна: HTML и редактор HEFS Редактор HEFS запуск буфер файловые отмена один 8 Основы Web-дизайна: HTML и редактор HEFS Редактор HEFS запуск буфер файловые отмена один назад обмена экран браузера (F 9) операции вперед браузер (IE) текстовый редактор К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

Основы Web-дизайна: HTML и редактор HEFS 9 Вставка тэгов в HEFS К. Поляков, 2007 Основы Web-дизайна: HTML и редактор HEFS 9 Вставка тэгов в HEFS К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

Web-страницы. Язык HTML и др. Тема 2. Структура документа. Специальные символы К. Поляков, 2007 Web-страницы. Язык HTML и др. Тема 2. Структура документа. Специальные символы К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

11 Основы Web-дизайна: HTML и редактор HEFS Заголовки: H 1 … H 6 <BODY> 11 Основы Web-дизайна: HTML и редактор HEFS Заголовки: H 1 … H 6 Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки left, выравнивание: center, right История К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

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

Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее.

До самого вечера тело с варежками. . .

К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

Этот" src="http://present5.com/presentation/3802e1f9783ead50ee7f5440c3f07f41/image-13.jpg" alt="13 Основы Web-дизайна: HTML и редактор HEFS Выравнивание атрибут тэга

Этот" /> 13 Основы Web-дизайна: HTML и редактор HEFS Выравнивание атрибут тэга

Этот текст выровнен по центру.

Этот текст выровнен по ширине.

left right center justify по левой границе по правой границе по центру по ширине К. Поляков, 2007 -2011 ! Не используйте выравнивание по ширине для узких столбцов! http: //kpolyakov. narod. ru

Основы Web-дизайна: HTML и редактор HEFS 14 Абзацы в HEFS К. Поляков, 2007 -2011 Основы Web-дизайна: HTML и редактор HEFS 14 Абзацы в HEFS К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

15 Основы Web-дизайна: HTML и редактор HEFS Специальные символы Символ HTML-код – — (длинное) 15 Основы Web-дизайна: HTML и редактор HEFS Специальные символы Символ HTML-код – — (длинное) тире   неразрывный пробел § § параграф © © символ авторского права « « левая русская кавычка » » правая русская кавычка ® ® зарегистрированная торговая марка ° ° градус ² &sup 2; квадрат ³ &sup 3; куб ¼ &frac 14; четверть ½ &frac 12; половина ¾ &frac 34; три четверти × × знак умножения ÷ ÷ знак деления К. Поляков, 2007 -2011 Название http: //kpolyakov. narod. ru

16 Основы Web-дизайна: HTML и редактор HEFS Специальные символы А. С.   Пушкин  — 16 Основы Web-дизайна: HTML и редактор HEFS Специальные символы А. С.   Пушкин  — солнце русской поэзии. Из дома вышел А. С. Пушкин – солнце русской поэзии. Вышел А. С. Пушкин – солнце русской поэзии. Дом сдали в 2011  году. Пёс весил 12  кг. К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

Основы Web-дизайна: HTML и редактор HEFS 17 Специальные символы в HEFS К. Поляков, 2007 Основы Web-дизайна: HTML и редактор HEFS 17 Специальные символы в HEFS К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

Web-страницы. Язык HTML и др. Тема 3. Списки К. Поляков, 2007 -2011 http: //kpolyakov. Web-страницы. Язык HTML и др. Тема 3. Списки К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

19 Основы Web-дизайна: HTML и редактор HEFS Маркированные списки unordered list (неупорядоченный список) list 19 Основы Web-дизайна: HTML и редактор HEFS Маркированные списки unordered list (неупорядоченный список) list item (элемент списка)

  • Вася
  • Петя
  • Коля
изменение маркера:
    . . .
К. Поляков, 2007 -2011 disk circle ○ square ■ http: //kpolyakov. narod. ru

Основы Web-дизайна: HTML и редактор HEFS 20 Нумерованные списки ordered list (упорядоченный список) <OL> Основы Web-дизайна: HTML и редактор HEFS 20 Нумерованные списки ordered list (упорядоченный список)

  1. Вася
  2. Петя
  3. Коля
изменение нумерации: 1, i, I, a, A
    . . .
К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

Основы Web-дизайна: HTML и редактор HEFS 21 Списки определений definition list (список определений) <DL> Основы Web-дизайна: HTML и редактор HEFS 21 Списки определений definition list (список определений)

definition term (термин)
компьютер
устройство для обработки информации
дискета
гибкий магнитный диск
винчестер
жесткий магнитный диск
definition description (описание) К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

Основы Web-дизайна: HTML и редактор HEFS 22 Многоуровневые списки <UL> <LI>Города России <OL> <LI>Москва Основы Web-дизайна: HTML и редактор HEFS 22 Многоуровневые списки

  • Города России
    1. Москва
    2. Санкт-Петерург
  • Города Украины
    1. Киев
    2. Одесса
К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

Основы Web-дизайна: HTML и редактор HEFS 23 Списки в HEFS Ctrl-L вставить элемент списка Основы Web-дизайна: HTML и редактор HEFS 23 Списки в HEFS Ctrl-L вставить элемент списка

  • К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

  • Web-страницы. Язык HTML и др. Тема 4. Гиперссылки К. Поляков, 2007 -2011 http: //kpolyakov. Web-страницы. Язык HTML и др. Тема 4. Гиперссылки К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

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

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

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

    переход на" src="http://present5.com/presentation/3802e1f9783ead50ee7f5440c3f07f41/image-28.jpg" alt="28 Основы Web-дизайна: HTML и редактор HEFS Ссылки внутри страницы переход на" /> 28 Основы Web-дизайна: HTML и редактор HEFS Ссылки внутри страницы переход на метку Глава 1 Глава 2 Глава 1 метка (якорь) Это текст главы 1.
    Наверх Глава 2 Это текст главы 2.
    Наверх • в другом файле Цвет текста К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    " src="http://present5.com/presentation/3802e1f9783ead50ee7f5440c3f07f41/image-29.jpg" alt="Основы Web-дизайна: HTML и редактор HEFS 29 Запуск почтовой программы " /> Основы Web-дизайна: HTML и редактор HEFS 29 Запуск почтовой программы Напишите мне! К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    30 Основы Web-дизайна: HTML и редактор HEFS Гиперссылки в HEFS локальная ссылка вставить только 30 Основы Web-дизайна: HTML и редактор HEFS Гиперссылки в HEFS локальная ссылка вставить только адрес файла ! Автоматически строится относительный адрес! Ctrl-A гиперссылка на выделенный блок, адрес вводить вручную К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    Web-страницы. Язык HTML и др. Тема 5. Оформление документа. Стилевые файлы (CSS) К. Поляков, Web-страницы. Язык HTML и др. Тема 5. Оформление документа. Стилевые файлы (CSS) К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    32 Основы Web-дизайна: HTML и редактор HEFS Содержание и оформление логическая разметка (*. html) 32 Основы Web-дизайна: HTML и редактор HEFS Содержание и оформление логическая разметка (*. html) Сборник задач по физике

    Григорий Остер

    Задача 61 Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие -то два неведомые ему явления. Одно при каждой остановке толкало Петю вперед, а другое, когда вагон трогался – дергало назад. Что это за хулиганские явления, и может ли транспортная милиция с ними справиться? содержание (контент) К. Поляков, 2007 -2011 физическая разметка (*. css) ma s n. c i s mini. css pri nt. css оформление http: //kpolyakov. narod. ru

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

    34 Основы Web-дизайна: HTML и редактор HEFS Форматированный текст (тексты программ) program qq; var 34 Основы Web-дизайна: HTML и редактор HEFS Форматированный текст (тексты программ) program qq; var a, b: integer; begin writeln("Введите два числа"); read(a, b); writeln(a, '+', b, '=', a+b); текст отформатированный end. (preformatted)

     program qq; var a, b: integer; begin writeln("Введите два числа"); read(a, b); writeln(a, '+', b, '=', a+b); end. 
    К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    35 Основы Web-дизайна: HTML и редактор HEFS Физическая разметка курсив (italic) <I>Вася</I> Вася жирный 35 Основы Web-дизайна: HTML и редактор HEFS Физическая разметка курсив (italic) Вася Вася жирный (bold) Вася Вася подчеркивание (underline) Вася Вася зачеркивание (strike out) Вася Вася верхний индекс (superscript) Вася2 Вася 2 нижний индекс (subscript) Вася2 Вася 2 К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    36 Основы Web-дизайна: HTML и редактор HEFS Форматирование текста в HEFS Ctrl-B К. Поляков, 36 Основы Web-дизайна: HTML и редактор HEFS Форматирование текста в HEFS Ctrl-B К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    37 Основы Web-дизайна: HTML и редактор HEFS Тэг BODY – общие свойства страницы • 37 Основы Web-дизайна: HTML и редактор HEFS Тэг BODY – общие свойства страницы • цвет фона и текста атрибуты тэга цвет текста Привет! цвет фона • цвет гиперссылок цвет ссылок . . . посещенные ссылки (visited link) К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    42 Основы Web-дизайна: HTML и редактор HEFS Кодирование цвета • имена red, green, blue, 42 Основы Web-дизайна: HTML и редактор HEFS Кодирование цвета • имена red, green, blue, magenta, black, white • шестнадцатеричные коды # FA 8072 R G B # FF 0000 # FFFFFF # 000000 # AAAAAA К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    43 Основы Web-дизайна: HTML и редактор HEFS Что такое CSS? • HTML – язык 43 Основы Web-дизайна: HTML и редактор HEFS Что такое CSS? • HTML – язык логической разметки текста, определяющий содержание и структуру страницы (заголовки разных уровней, абзацы) • HTML–код не должен содержать оформления! • оформление частей документа (заголовков, параграфов) описывается в отдельном файле • CSS = Cascading Style Sheets – каскадные таблицы стилей • стилевые файлы: *. css содержание оформление анимация HTML + CSS + Javascript К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    44 Основы Web-дизайна: HTML и редактор HEFS Свойства элементов страницы my. css селектор (свойство) 44 Основы Web-дизайна: HTML и редактор HEFS Свойства элементов страницы my. css селектор (свойство) название тэга значение body { color: white; background: #FF 6600; } color – цвет символов background – цвет фона К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    45 Основы Web-дизайна: HTML и редактор HEFS Подключение стилевого файла qq. html <html> <head> 45 Основы Web-дизайна: HTML и редактор HEFS Подключение стилевого файла qq. html Пример CSS . . . my. css body { color: white; background: #0000 E 0; } К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

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

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

    L’Etat c’est moi.

    . spec { font-style: italic; background: green; } К. Поляков, 2007 -2011 L’Etat c’est moi. для всех элементов класса spec Россия молодая http: //kpolyakov. narod. ru

    48 Основы Web-дизайна: HTML и редактор HEFS Размеры, выравнивание: left center right justify 20 48 Основы Web-дизайна: HTML и редактор HEFS Размеры, выравнивание: left center right justify 20 px фон p { background: #E 6 E 6 FF; ширина width: 80%; height: 100 px; высота text-align: left; text-indent: 20 px; абзацный } отступ 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. 100 px 80% К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    49 Основы Web-дизайна: HTML и редактор HEFS Рамка и поля рамка отступы снаружи отступы 49 Основы Web-дизайна: HTML и редактор HEFS Рамка и поля рамка отступы снаружи отступы внутри 40 px solid – сплошная dashed - штриховая dotted – точечная толщина p { background: #ccffcc; цвет border: 1 px solid green; margin: 0 40 px 20 px 40 px; padding: 5 px; сверху, справа, } снизу, слева со всех сторон 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. 5 px К. Поляков, 2007 -2011 40 px 20 px http: //kpolyakov. narod. ru

    50 Основы Web-дизайна: HTML и редактор HEFS Фоновый рисунок p. hallo { background: white 50 Основы Web-дизайна: HTML и редактор HEFS Фоновый рисунок p. hallo { background: white url(images/grad. jpg); }

    Привет, Вася!

    Привет, Вася! p. hallo { background: url(grad. jpg) repeat-y; } Привет, Вася! К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    51 Основы Web-дизайна: HTML и редактор HEFS Фоновый рисунок без повторения qq@mail. ru p. 51 Основы Web-дизайна: HTML и редактор HEFS Фоновый рисунок без повторения qq@mail. ru p. email { background: url(letter. gif) no-repeat; padding-left: 20 px; }

    qq@mail. ru 20 px К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

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

    53 Основы Web-дизайна: HTML и редактор HEFS Выделение отдельных слов класс, применимый ко всему 53 Основы Web-дизайна: HTML и редактор HEFS Выделение отдельных слов класс, применимый ко всему курсив. latin { color: green; font-style: italic; } ! Что хочется исправить?

    Собака(лат. Canis lupus familiaris) — одно из наиболее Домашних "животных-компаньонов".

    К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    Web-страницы. Язык HTML и др. Тема 6. Рисунки К. Поляков, 2007 -2011 http: //kpolyakov. Web-страницы. Язык HTML и др. Тема 6. Рисунки К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    Основы Web-дизайна: HTML и редактор HEFS 55 Форматы рисунков GIF (Graphic Interchange Format) • Основы Web-дизайна: HTML и редактор HEFS 55 Форматы рисунков 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) прозрачность и полупрозрачность (альфа-канал) нет анимации плохо сжимает мелкие рисунки К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    56 Основы Web-дизайна: HTML и редактор HEFS Фон страницы (через CSS) body { background: 56 Основы Web-дизайна: HTML и редактор HEFS Фон страницы (через CSS) body { background: url(back. jpg); #6 e 5 c 62; } 'images/back. jpg' '. . /images/back. jpg‘ 'http: //www. vasya. ru/images/back. jpg' ! Не должно быть «швов» ! К. Поляков, 2007 -2011 ! Фон не должен мешать! http: //kpolyakov. narod. ru

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

    left top" src="http://present5.com/presentation/3802e1f9783ead50ee7f5440c3f07f41/image-54.jpg" alt="58 Основы Web-дизайна: HTML и редактор HEFS Выравнивание left top" /> 58 Основы Web-дизайна: HTML и редактор HEFS Выравнивание left top К. Поляков, 2007 -2011 right bottom (по умолчанию) middle http: //kpolyakov. narod. ru

    59 Основы Web-дизайна: HTML и редактор HEFS Отступы <IMG SRC= 59 Основы Web-дизайна: HTML и редактор HEFS Отступы VSPACE (vertical space) HSPACE (horizontal space) К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

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

    Моя фотография 61 Основы Web-дизайна: HTML и редактор HEFS Другие атрибуты Моя фотография • всплывающая подсказка • надпись на месте рисунка, если его нет размеры позволяют: • растянуть - сжать • не портить дизайн, если рисунка нет толщина рамки вокруг рисунка К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

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

    Основы Web-дизайна: HTML и редактор HEFS 63 Рисунки в HEFS вставить рисунок ! Автоматически Основы Web-дизайна: HTML и редактор HEFS 63 Рисунки в HEFS вставить рисунок ! Автоматически вставляются размеры! К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru

    Web-страницы. Язык HTML и др. Тема 7. Таблицы К. Поляков, 2007 -2011 http: //kpolyakov. Web-страницы. Язык HTML и др. Тема 7. Таблицы К. Поляков, 2007 -2011 http: //kpolyakov. narod. ru