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

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

Основы 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

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

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

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

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

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

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

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

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

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

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

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

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

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

Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Кодирование цвета имена red, green, blue, magenta, black, шестнадцатеричные коды white # F A # F A # F A # F A R R G G B B # F F # F F # F F # F F # F F F F F F# F F F F F F # F F F F F F# F F F F F F # 0 0 F F F F# 0 0 F F F F # 0 0 F F F F# 0 0 F F F F # # # # # A A A A A A# A A A A A A # A A A A A A# A A A A A A

Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Тэг FONT – свойства блока текста цвет текста размер шрифта Привет! Как дела? Привет! Как дела? Привет! Как дела? Привет! Как дела? от 1 до 7 (3 – нормальный) от 1 до 7 (3 – нормальный)

Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Линия-разделитель horizontal rule ширина в пикселях или процентах толщина выравнивание Не рекомендуется использовать – лучше заголовки разделов! !