1. WEB-страницы.
Что такое Web-страницы? Гиперссылка – «активная» ссылка на другой документ. Гипертекст – это электронный документ, который содержит гиперссылки на другие документы. Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой. WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа). Web-страница – текстовый файл, в котором описано размещение материала на экране, и который предназначен для просмотра электронной информации на экране компьютера с помощью программы-браузера. Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).
Браузер является одним из основных, основополагающих программных продуктов у большинства пользователей персональных компьютеров. Действительно, Интернет охватывает все больше сфер деятельности человека. Получение свежей информации, загрузка новых программных продуктов, торговля, общение - все это осуществляется с помощью браузера. Большинство пользователей персональных компьютеров не задумываются, какой программный продукт используется для выходя в Сеть. Операционная система Windows содержит встроенный инструмент навигации по просторам Web. По этой причине приобщение к Интернету для большинства его пользователей начинается именно с программы, которую не надо устанавливать, которая есть на компьютере сразу после покупки системного блока в магазине, с Internet Explorer. Internet Explorer используется подавляющим числом пользователей во всем мире. Наибольшей популярностью среди браузеров пользуются продукты Mozilla Firefox и Opera. Разгораются жаркие споры, пользователи пытаются выяснить, какой же из этих двух продуктов удобней, быстрей, мощнее. Данный спор, на самом деле, бесконечен. Mozilla Firefox и Opera – это два противоположных взгляда на построение взаимодействия пользователя с Сетью. Оба браузера основаны на отличных от Internet Explorer движках Presto (Opera) и Gecko (Mozilla Firefox).Mozilla FirefoxOpera
Какие бывают Web-страницы? статические – существуют на сервере в виде готовых файлов: *.htm, *.html динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php позволяют выбирать информацию из базы данных по заранее неизвестным запросам дополнительная нагрузка на сервер загружаются медленнее
2. HTML – язык гипертекстовой разметки.
Hyper Text Markup Language
Создание Web-сайтов реализуется с использованием языка гипертекстовой разметки – HTML (HyperText Markup Language).
История создания HTML Некоторые даты: 1945 год: 1945 год: американский ученый, научный консультант президента Ванневар Буш (Vannevar Bush) высказывает идею гипертекста год: 1968 год:Дуглас Энджельбарт (создатель программного диалогового интерфейса, который реагировал на действия специального указателя - курсора, а так же создатель манипулятора - мыши) демонстрирует работу гипертекстовых связей в созданном им текстовом процессоре.
1960-е годы: 1960-е годы: сотрудники компании IBM взялись за решение задач переноса документов между различными платформами и операционными системами. Результатом их усилий стал язык GML (General Markup Language - общий язык разметки), который предназначался для использования на ЭВМ семейства IBM. Язык GML в дальнейшем был расширен, а в 80-х годах прошёл стандартизацию ISO (Международная организация стандартизации). Этот мощный и универсальный режим разметки, названный SGML (Standart General Markup Langugage), использовался военным ведомством США для оформления технической документации. Однако SGML широкого распространения не получил ввиду своей сложности и дороговизны реализации. Некоторые даты:
1980-е годы: 1980-е годы: учёный-физик Тим Бернерс-Ли, сотрудник CERN (Европейский Центр Ядерных Исследований) в Женеве в конце 80-х годов занялся проблемой хранения и отображения данных, полученных коллегами. Проблема состояла в том, что каждый специалист, приезжавший в Центр, применял собственные методы представления информации, и срочно требовалось создание универсальной системы, которая не зависела бы от используемой компьютерной платформы и в то же время была бы достаточно простой. В основу разрабатываемого языка Тим Бернерс-Ли положил язык SGML и приёмы работы с гипертекстом, с чем и связано название созданного им языка - HTML. Новый язык использовал основные конструкции SGML для описания документов и гипертекстовых ссылок. Некоторые даты:
Термин "гипертекст" впервые был введён Тедом Нельсоном в 1969 году. Гипертекст – электронный документ, содержащий в себе ссылки на другие документы.
Главные причины популярности HTML: 1.Простота. 2.Переносимость. 3.HTML-документ – это гипертекст.
HTML-документ – это обычный текстовый документ, содержащий специальные р рр разметочные указатели, команды языка html (тэги). HTML-файл имеет расширение.htm или.html
Язык HTML HTML = Hypertext Markup Language (язык разметки гипертекста) HTML – это не язык программирования! ! HTML-страница – это текстовый файл (Блокнот): Моя страница Привет! … Моя страница Привет! … index.html sail.jpg man.jpg sunset.jpg clock.avi ball.swf bee.wav images
ТЭГИ Тэг Тэг –инструкция (команда) браузеру, указывающая способ отображения текста.
Например: Тэг всегда начинается со знака «меньше» ( ) Например: ПРАВИЛА ЗАПИСИ ТЭГОВ
ТЭГИ ТЕГ одиночный парный(контейнер) открывающий открывающий закрывающий закрывающий
Тэги Тэг – это команда языка HTML, которую выполняет браузер: непарные тэги парные тэги (контейнеры) вставить рисунок открывающий закрывающий область действия тэга: описание таблицы
СТРУКТУРНЫЕ ТЭГИ …, Всё содержимое файла Интернет-страницы заключается в контейнер …, указывающий браузеру, что данный текст представляет собой HTML-документ и, возможно содержит в себе тэги, которые браузер должен выявить, распознать, интерпретировать. Типичная Интернет-страница (HEAD)(BODY) Типичная Интернет-страница состоит из двух частей: заголовка (HEAD) и тела (BODY).
Мой первый шаг Здравствуйте, это моя первая страница. Добро пожаловать! Структура HTML-документа
СТРУКТУРНЫЕ ТЭГИ Эту базовую структуру в простейшем виде можно наглядно показать следующим образом: начало контейнера HTML-документа начало контейнера заголовка начало контейнера строки – названия страницы …строка названия страницы конец контейнера строки – названия страницы конец контейнера заголовка начало контейнера тела страницы …тело (всё содержимое) страницы конец контейнера тела страницы конец контейнера HTML-документа
Указанная вами строка-название будет выводиться в заголовке окна браузера, когда данная страничка будет в нём просматриваться, а также (уже после размещения страницы в Интернете) в списках, выдаваемых поисковыми серверами. СТРУКТУРНЫЕ ТЭГИ
Простейшая Web-страница Моя первая Web-страница Привет! Моя первая Web-страница Привет! first.html Моя первая Web-страница Моя первая Web-страница шапка («голова») Привет! Привет! основная часть («тело»)
Моя первая Интернет-страничка! Моя первая Интернет-страничка! Это моя первая проба сил в построении сайтов. Может быть, страничка пока еще получилась не очень красивой, но ведь она работает!
1.Открыть программу БЛОКНОТ. 2.Написать в нем код WEB-страницы. 3.Сохранить этот документ на Рабочем столе под любым именем (англ. символы) с расширением.html. 4.Документ должен получить значок или 5.Открыть этот документ двойным щелчком. (Откроется программа-браузер). 6.Если нужно внести изменения в документ, то выполнить команду ВИД Просмотр HTML-кода (Исходный текст). Текст WEB-страницы откроется в блокноте. 7.Внести в текст изменения. Сохранить его (Ctrl+S), перейти в программу-браузер и нажать кнопку ОБНОВИТЬ. или
1.Меню Сохранить как … 2.Выбрать папку для сохранения (например, Рабочий стол). 3.Выбираем ТИП ФАЙЛА Все файлы
4. В поле «ИМЯ ФАЙЛА» необходимо ввести любое название вашего документа на английском языке или транслитом (например, first). 5. После названия необходимо поставить точку и указать стандартное расширение данного документа.html 6. После указания всех пунктов необходимо нажать кнопку «СОХРАНИТЬ». 7. После сохранения файл должен обозначиться значком того браузера, который по умолчанию используется на Вашем компьютере.
Мой первый шаг Добро пожаловать!
- такой тэг используется для добавления комментариев на страничке, т. е. для полезных пояснений, которые не показываются в браузере. Пример:... Пример:
Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке окна. Иначе говоря, тег внутри TITLE не действует.
Комментарии могут встречаться в документе где угодно и в любом количестве. Не ленитесь комментировать все, что написали. Это волшебное правило сэкономит вам немало времени при попытке разобраться в собственном творении пару месяцев спустя.
содержимое тега У тегов есть свои настройки, которые позволяют влиять на результат их работы. Эти настройки называются АТРИБУТАМИ. Атрибут может иметь одно или несколько значений. Таким образом общий вид команд HTML выглядит так: Значение атрибуту задается с помощью знака равенства, а само значение заключается в кавычки и вся эта конструкция пишется без пробелов!
Тэг … Этот тег выводит название HTML- документа и браузер показывает его в заголовке окна. Моя первая Web-страница То есть, если в Вашем документе присутствует, например, такая запись: Моя первая Web-страница, то браузер покажет ее так:
META-теги это необязательные атрибуты, размещенные в заголовке страницы, которые могут содержать ее описание, ключевые слова к ней, информацию об авторе, управляющие команды для браузера и поисковых роботов, и прочую служебную информацию, не предназначенную для посетителей. Многие из поисковых систем на сегодняшний день активно используют META-теги. Использование META-тегов позволит поисковому роботу правильно и быстро отыскать ваш сайт в сети. МЕТА - тег не виден в браузере при просмотре страницы, но если Вы хотите, чтобы Ваш сайт находился в числе первых, выдаваемых поисковыми машинами при запросах пользователей, то Вам нельзя игнорировать использование МЕТА - тега. МЕТA - теги размещаются в любом месте заголовка страницы, т.е. между тегами ….
Составные части МЕТА-тега: HTTP-EQUIV, Name и CONTENT. 1) Поле "name" ("имя") определяет, за что именно данный тег отвечает. 2) Длина каждого поля "content" ("содержимое") ограничена 1024 знаками, включая пробелы и знаки препинания. Мета-теги включены в код страницы, чем их больше, тем больше объём страницы, а, следовательно, больше время загрузки страницы. Обычно поисковые системы используют обрезанные до определённой длины значения этих полей. 3) Поле "http-equiv" означает, что данный тег предназначен не для поисковой системы, а для управления браузером.
Указывает кодировку, в которой написана страница. META HTTP-EQUIV="Content-Type" CONTENT="text/html; Charset=Windows-1251"> При его отсутствии в заголовке, браузеры, у которых включено автоматическое определение кодировки, могут вместо русских букв показывать на Вашей страничке всяческие кракозябры.
Большинство HTML документов имеют заголовок. Для его создания используют теги …, где n - число от 1 до 6. ВЫВОД: Заголовки имеют теги в интервале от H1 … H6 Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки
переход на новую строку – одиночный тег абзац (с отступами) обозначается тегом И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнет ковыль... И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнет ковыль... Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. До самого вечера тело с варежками... Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. До самого вечера тело с варежками...
9.3) Выравнивание текста Этот текст выровнен по центру. Этот текст выровнен по ширине. Этот текст выровнен по центру. Этот текст выровнен по ширине. Значения атрибута align: left - по левой границе right - по правой границе center - по центру justify - по ширине Значения атрибута align: left - по левой границе right - по правой границе center - по центру justify - по ширине Не используйте выравнивание по ширине для узких столбцов! ! атрибут тэга называется ALIGN (выравнивание)
История left, center, right left, center, right
Можно комбинировать теги стилей: Полужирный курсив
Некоторые теги могут или должны применяться с определенными параметрами, которые указываются в открывающемся элементе тега. Для работы со шрифтом, его размером и стилем используется контейнер тегов … Открывающий тег может иметь несколько атрибутов: 1) SIZE - задает размер текста (по умолчанию размер текста равен 3). Поместив текст между тегами, где n - цифровое значение. Пример 1 Пример 2 Пример 3 Пример 4 Пример 1 Пример 2 Пример 3 Пример 4
2) FACE - задает стандартное имя шрифта. Используйте шрифты, которые установлены на компьютере пользователя, в противном случае браузер будет использовать шрифт, определенный по умолчанию (обычно Times New Roman).
3) COLOR - задает цвет текста (по умолчанию черный - #000000). Красный Красный Цвет текста может определятся 2 способами: 1.С помощью английских слов red, blue и т.д. 2.В 16-ричном виде - #FF0000 (красный) #0000FF (синий).
Примеры использования специальных символов: А.С. Пушкин — солнце русской поэзии. Ещё примеры: Дом сдали в 2011 году. Пёс весил 12 кг. Из дома вышел А.С. Пушкин – солнце русской поэзии. Из дома вышел А.С. Пушкин – солнце русской поэзии. Вышел А.С. Пушкин – солнце русской поэзии.
Вася Петя Коля Вася Петя Коля unordered list (неупорядоченный список) list item (элемент списка) изменение маркера: disk circle square
Вася Петя Коля Вася Петя Коля ordered list (упорядоченный список) изменение нумерации: , i, I, a, A
компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск definition list (список определений) definition term (термин) definition description (описание)
Города России Города Украины Города России Города Украины Москва Санкт-Петерург Киев Одесса
К. Поляков, Web-страницы. Язык HTML и др. Тема 4. Гиперссылки
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Ссылки на другие страницы сайта Таблицы страница в той же папке anchor (якорь) hyper reference (гиперссылка) страница во вложенной папке Пример страница в соседней папке Текст выйти из текущей папки
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Примеры (ссылки из файла rock.html) story.html stories – novels – new – old – list.html sea.html verse.html rock.html
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Ссылки на другие сайты Почта на главную страницу сайта index.htm, index.html, default.asp, … на конкретную страницу сайта (URL) Васин текст Васин текст на файл для скачивания Скачать Скачать
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Ссылки внутри страницы Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы 1. Это текст главы 1. Наверх Глава 2 Это текст главы 2. Это текст главы 2. Это текст главы 2. Наверх Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы 1. Это текст главы 1. Наверх Глава 2 Это текст главы 2. Это текст главы 2. Это текст главы 2. Наверх в другом файле Цвет текста метка (якорь) переход на метку
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Запуск почтовой программы Напишите мне! Напишите мне!
К. Поляков, Web-страницы. Язык HTML и др. Тема 5. Оформление документа. Стилевые файлы (CSS)
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Содержание и оформление Сборник задач по физике Григорий Остер Задача 61 Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Одно при каждой остановке толкало Петю вперед, а другое, когда вагон трогался – дергало назад. Что это за хулиганские явления, и может ли транспортная милиция с ними справиться? Сборник задач по физике Григорий Остер Задача 61 Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Одно при каждой остановке толкало Петю вперед, а другое, когда вагон трогался – дергало назад. Что это за хулиганские явления, и может ли транспортная милиция с ними справиться? содержание (контент) логическая разметка ( *.html ) логическая разметка ( *.html ) оформление физическая разметка ( *.css ) физическая разметка ( *.css ) main.css mini.css print.css
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Логическая разметка выделение (emphasize) Это моя первая победа. сильное выделение (strong) Вася код программы a:= 2*b определение (definition) Сурок - это... цитата (citation) Блажен, кто верует,... сокращение (abbreviation) НИИЧАВО
Основы 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 К. Поляков, Цвет гиперссылок LINK ссылки, на которых не были VLINK посещенные ссылки ALINK активные ссылки
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Тэг FONT – свойства блока текста цвет текста размер шрифта Привет! Как дела? Привет! Как дела? Привет! Как дела? Привет! Как дела? от 1 до 7 (3 – нормальный) от 1 до 7 (3 – нормальный)
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Линия-разделитель horizontal rule ширина в пикселях или процентах толщина выравнивание Не рекомендуется использовать – лучше заголовки разделов! !
Основы 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 К. Поляков, Что такое CSS? HTML – язык логической разметки текста, определяющий содержание и структуру страницы (заголовки разных уровней, абзацы) HTML–код не должен содержать оформления! оформление частей документа (заголовков, параграфов) описывается в отдельном файле CSS = Cascading Style Sheets – каскадные таблицы стилей стилевые файлы: *.css HTML + CSS оформление содержание + Javascript анимация
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Свойства элементов страницы body { color: white; background: #FF6600; } body { color: white; background: #FF6600; } название тэга значение селектор (свойство) color – цвет символов background – цвет фона my.css
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Подключение стилевого файла Пример CSS ... Пример CSS ... qq.html my.css body { color: white; background: #0000E0; } body { color: white; background: #0000E0; } ...
Основы 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 - жирный
Основы 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 Россия молодая Россия молодая
Основы 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 фон абзацный отступ
Основы 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
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, p.hallo { background: white url(images/grad.jpg); } p.hallo { background: white url(images/grad.jpg); } 88 Фоновый рисунок Привет, Вася! Привет, Вася! Привет, Вася! p.hallo { background: url(grad.jpg) repeat-y; } p.hallo { background: url(grad.jpg) repeat-y; } Привет, Вася!
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Фоновый рисунок без повторения p. { background: url(letter.gif) no-repeat; padding-left: 20px; } p. { background: url(letter.gif) no-repeat; padding-left: 20px; } 20px
Основы 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; } ссылки внутри абзаца стиля убрать подчеркивание посещённые ссылки подчеркнуть когда мышь над ссылкой
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Выделение отдельных слов.latin { color: green; font-style: italic; }.latin { color: green; font-style: italic; } класс, применимый ко всему курсив Собака(лат. Canis lupus familiaris ) одно из наиболее Домашних "животных-компаньонов". Собака(лат. Canis lupus familiaris ) одно из наиболее Домашних "животных-компаньонов". Что хочется исправить? !
К. Поляков, Web-страницы. Язык HTML и др. Тема 6. Рисунки
Основы 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) прозрачность и полупрозрачность (альфа-канал) нет анимации плохо сжимает мелкие рисунки
Основы 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;
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Рисунки в документе из той же папки: из другой папки: с другого сервера: image (изображение) source (источник)
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Выравнивание left right top bottom (по умолчанию) middle
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Отступы VSPACE (vertical space) HSPACE (horizontal space)
Основы 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; отступа слева нет!
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Другие атрибуты всплывающая подсказка надпись на месте рисунка, если его нет всплывающая подсказка надпись на месте рисунка, если его нет размеры позволяют: растянуть - сжать не портить дизайн, если рисунка нет размеры позволяют: растянуть - сжать не портить дизайн, если рисунка нет толщина рамки вокруг рисунка
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Рисунок-гиперссылка локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет «хвост» не будет «хвоста»
К. Поляков, Web-страницы. Язык HTML и др. Тема 7. Таблицы
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Простейшая таблица Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек. Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек. толщина рамки TABLEтаблица TR = table rowстрока таблицы TD = table dataданные таблицы TH = table header заголовок (жирный, по центру)
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Размеры ширина в пикселях или в % от ширины окна браузера высота в пикселях всей таблицы: строки: ячейки: ширина в пикселях или в % от ширины таблицы
Основы 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; }......
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Выравнивание По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине всей таблицы: информации в ячейках: left, center, right left, center, right left, center, right left, center, right top, middle, bottom top, middle, bottom
Основы 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
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Фон и цвет текста Привет! Таблица из двух строк и двух столбцов Привет! Таблица из двух строк и двух столбцов цвет фона фоновый рисунок
Основы 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"); } цвет фона рисунок
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Отступы интервал между ячейками отступ внутри ячеек CELLSPACING CELLPADDING
Основы 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
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Объединение ячеек Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! column span охват столбцов row span охват строк
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Вложенные таблицы Вася Петя Маша Даша Вася Петя Маша Даша
К. Поляков, Web-страницы. Язык HTML и др. Тема 8. Фреймы
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Фреймы Фрейм (frame) – это часть сложной Web-страницы, в которую может быть загружена другая Web- страница. 3 файла: left.html – страница в левой части right.html – страница в правой части index.html – описание структуры
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Описание структуры index.html Фреймы-столбцы Фреймы-столбцы columns столбцы columns столбцы ширина в пикселях или % все остальное место source источник source источник имя фрейма (для ссылок)
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Граница между фреймами граница между фреймами: 0 – невидима, 1 - видима граница между фреймами: 0 – невидима, 1 - видима ширина полосы между фреймами, за которую можно перетащить границу
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Настройка фрейма (FRAME) убрать отступы от края фрейма до содержимого полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда запретить изменение размеров
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Фреймы-строки index.html Фреймы-строки Фреймы-строки строки ширина в пикселях или %
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Сложные структуры (3 фрейма) index.html
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Как открыть ссылку в другом фрейме Глава 2 Глава 2 TARGET _blank – в новом окне _parent – в родительском окне _top – в главном окне (убрать фреймы)
К. Поляков, Web-страницы. Язык HTML и др. Тема 9. Блоки (DIV)
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Блоки (DIV) – любое содержимое Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. 1
Основы 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; }
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, «Плавающие» блоки.picture { float: left; margin: 5px; }.picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold; }.picture { float: left; margin: 5px; }.picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold; } На природе На природе свойства блока свойства абзаца внутри блока
К. Поляков, Web-страницы. Язык HTML и др. Тема 10. Понятие о Javascript
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Что может Javascript? информация статична нет интерактивности (только переход на другую страницу) Чем плоха HTML-страница? Что можно сделать с помощью Javascript? изменение рисунка при наведении мыши выпадающие меню всплывающие подсказки фотогалерея без перегрузки страницы движение объекта по экрану Javascript может быть отключен в браузере
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Основные принципы каждый элемент на странице (текст, рисунок, таблица) – это объект, имеющий свои свойства свойства объекта можно менять из программы на Javascript (скрипта) все, что происходит – это события все события можно «обрабатывать», т.е. как- то реагировать на них Javascript – это язык программирования! ! HTML + Javascript = DHTML (Dynamic HTML)
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Замена рисунка при движении мыши когда курсор мыши над рисунком после ухода мыши События: onMouseOver – курсор мыши над объектом onMouseOut – курсор мыши ушел с объекта начальный рисунок this – этот объект this.src – свойство SRC этого объекта
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Скрытый блок Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др. Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др..hidden { display:none; }.hidden { display:none; }
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Скрытый блок: оформление ссылки Показать детали Показать детали остаться на странице по щелчку вызвать функцию show переход не выполнять
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Скрытый блок: как его открыть? 131 function show ( name ) { var elem = document.getElementById(name); if ( elem ) elem.style.display = "block"; } function show ( name ) { var elem = document.getElementById(name); if ( elem ) elem.style.display = "block"; } test.js найти блок по имени изменить свойство display
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Формы надпись на кнопке имя формы имя элемента делать по щелчку
Основы Web-дизайна: HTML и редактор HEFS К. Поляков, Форма: обращение к элементам 133 function check() { if ( calc.answer.value == "4" ) alert("Правильно!"); else alert("Неправильно!"); } function check() { if ( calc.answer.value == "4" ) alert("Правильно!"); else alert("Неправильно!"); } test.js вывести сообщение