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

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

позволяют выбирать информацию из базы данных по заранее неизвестным запросам

дополнительная нагрузка на сервер
загружаются медленнее

HTML = Hypertext Markup Language(язык разметки гипертекста)

HTML-страница – это текстовый файл (Блокнот):

Тэг – это команда языка HTML, которую выполняет браузер:

непарные тэги


парные тэги (контейнеры)

вставить рисунок

открывающий

закрывающий

область действия тэга: описание таблицы

шапка («голова»)

основная часть («тело»)

файловые операции

буфер обмена

один экран

запуск
браузера (F9)

назад

вперед

текстовый редактор

браузер (IE)

отмена

left,
center,
right

переход на новую строку




абзац (с отступами)

left по левой границе
right по правой границе
center по центру
justify по ширине

атрибут тэга

А.С. Пушкин — солнце русской поэзии.





Дом сдали в 2011 году.

Пёс весил 12 кг.

Из дома вышел А.С. Пушкин – солнце
русской поэзии.

Вышел А.С. Пушкин – солнце русской поэзии.

unordered list (неупорядоченный список)

list item (элемент списка)

disk 
circle ○
square ■

ordered list (упорядоченный список)

definition list (список определений)

definition term (термин)

definition description (описание)

Ctrl-L вставить элемент списка

anchor (якорь)

hyper reference (гиперссылка)

выйти из текущей папки

Примеры (ссылки из файла rock.html)

метка (якорь)

переход на метку

локальная ссылка

Ctrl-A гиперссылка на выделенный блок, адрес  вводить вручную

вставить только адрес файла

Сборник задач по физике

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

Задача 61

логическая разметка
(*.html)

физическая разметка
(*.css)

Форматированный текст (тексты программ)

program qq;
var a, b: integer;
begin
   writeln("Введите два числа");
   read(a,b);
   writeln(a,'+',b,'=',a+b);
end.

отформатированный текст
(preformatted)

цвет фона и текста





цвет гиперссылок

цвет текста

цвет фона

посещенные ссылки
(visited link)

цвет ссылок

атрибуты тэга

вставить только код цвета

LINK ссылки, на которых не были
VLINK посещенные ссылки
ALINK активные ссылки

цвет текста




размер шрифта

от 1 до 7
(3 – нормальный)

horizontal rule

ширина в пикселях или процентах

толщина

выравнивание

HTML – язык логической разметки текста, определяющий содержание и структуру страницы (заголовки разных уровней, абзацы)
HTML–код не должен содержать оформления!
оформление частей документа (заголовков, параграфов) описывается в отдельном файле
CSS = Cascading Style Sheets – каскадные таблицы стилей
стилевые файлы: *.css

оформление

содержание

анимация

название тэга

свойство

селектор

color – цвет символов
background – цвет фона

значение

для всех абзацев

семейство шрифтов

serif – с засечками
sans-serif – без засечек
monospace – моноширинный

размер в пикселях

normal – обычный
italic - курсив

normal – обычный
bold - жирный

для абзацев класса spec

для всех элементов
класса spec

ширина

высота

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

фон

абзацный отступ

рамка

отступы снаружи

отступы внутри

сверху, справа, снизу, слева

со всех сторон

толщина

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.

ссылки внутри абзаца стиля email

убрать подчеркивание

посещённые ссылки

подчеркнуть

когда мышь над ссылкой

класс, применимый ко всему

курсив

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)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки

image(изображение)

source(источник)

bottom
(по умолчанию)

VSPACE
(vertical space)

HSPACE
(horizontal space)

отступа слева нет!

всплывающая подсказка
надпись на месте рисунка, если его нет

размеры позволяют:
растянуть - сжать
не портить дизайн, если рисунка нет

толщина рамки вокруг рисунка

иначе будет синяя рамка вокруг

если не вплотную к , будет «хвост»

не будет «хвоста»

вставить рисунок

толщина рамки

TABLE таблица
TR = table row строка таблицы
TD = table data данные таблицы
TH = table header заголовок (жирный, по центру)

ширина в пикселях или в % от ширины окна браузера

высота в пикселях

ширина в пикселях или в % от ширины таблицы

left,
center,
right

left,
center,
right

top,
middle,
bottom

left,
center,
right

top,
middle,
bottom

цвет фона

фоновый рисунок

цвет фона

рисунок

интервал между ячейками

отступ внутри ячеек

column span охват столбцов

row span охват строк

Фрейм (frame) – это часть сложной Web-страницы, в которую может быть загружена другая Web-страница.

3 файла:
left.html – страница в левой части
right.html – страница в правой части
index.html – описание структуры

columns
столбцы

ширина в пикселях или %

все остальное место

source
источник

имя фрейма (для ссылок)

граница между фреймами:
0 – невидима, 1 - видима

ширина полосы между фреймами, за которую можно перетащить границу

убрать отступы от края фрейма до содержимого

полоса прокрутки:
auto – появляется, когда надо
yes – есть всегда
no – нет никогда

запретить изменение размеров

строки

ширина в пикселях или %

TARGET
_blank – в новом окне
_parent – в родительском окне
_top – в главном окне
(убрать фреймы)

переключение страниц

закрыть текущую страницу (Ctrl-W)

просмотр активной страницы

padding

border

margin

На природе

свойства блока

свойства абзаца внутри блока

информация статична
нет интерактивности (только переход на другую страницу)

изменение рисунка при наведении мыши
выпадающие меню
всплывающие подсказки
фотогалерея без перегрузки страницы
движение объекта по экрану

Javascript может быть отключен в браузере

каждый элемент на странице (текст, рисунок, таблица) – это объект, имеющий свои свойства
свойства объекта можно менять из программы на Javascript (скрипта)
все, что происходит – это события
все события можно «обрабатывать», т.е. как-то реагировать на них

когда курсор мыши над рисунком

после ухода мыши

События:
onMouseOver – курсор мыши над объектом
onMouseOut – курсор мыши ушел с объекта

начальный рисунок

this – этот объект
this.src – свойство SRC этого объекта

остаться на странице

по щелчку вызвать функцию show

переход не выполнять

найти блок по имени

изменить свойство display

надпись на кнопке

имя формы

имя элемента

делать по щелчку

вывести сообщение

ПОЛЯКОВ Константин Юрьевич
д.т.н., учитель информатики высшей категории,
ГОУ СОШ № 163, г. Санкт-Петербург
kpolyakov@mail.ru