Web-страницы. Язык HTML

© К.Ю. Поляков, 2007

Тема 1. Введение

Что такое Web-страницы?

Гиперссылка – «активная»ссылка на другой документ.
Гипертекст – текст, содержащий

Какие бывают Web-страницы?

статические – существуют на сервере в виде готовых файлов:

Язык HTML

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

HTML-страница – это текстовый

Тэги

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

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

Простейшая Web-страница

Привет!

first.html

шапка ("голова")

Привет!

основная

Кодирование цвета

имена
red, green, blue, magenta, black,
шестнадцатеричные коды

white

R

G

B

# F F

Web-страницы. Язык HTML

© К.Ю. Поляков, 2007

Тема 2. Оформление текста

Тэг BODY – общие свойства страницы

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

цвет текста
размер шрифта

Тэг FONT – свойства блока текста

Привет!

Как дела?

Привет!

Стили оформления

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

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

Заголовки: H1 … H6

Заголовок документа

Заголовок раздела

Заголовок подраздела

Заголовок параграфа

Комментарий

Авторские пометки

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

История

left,
center,

Специальные символы

Абзацы

переход на новую строку
абзац (с отступами)

Одно физическое тело захотело поменять три

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

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

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

Линия-разделитель

horizontal rule

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

толщина

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

Web-страницы. Язык HTML

© К.Ю. Поляков, 2007

Тема 3. Гиперссылки

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

...

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

Ссылки на другие страницы сайта

Таблицы

страница в той же папке

anchor (якорь)

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

Ссылки на другие сайты

Почта

на главную страницу сайта

index.htm, index.html, default.asp, …

на

Ссылки внутри страницы

Глава 1
Глава 2

Глава 1

Запуск почтовой программы

Напишите мне!

Web-страницы. Язык HTML

© К.Ю. Поляков, 2007

Тема 4. Списки

Маркированные списки

• Вася
  
• Петя
  
• Коля
  

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

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

изменение

Нумерованные списки

1. Вася
   
2. Петя
   
3. Коля
   

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

изменение нумерации:

...

1, i,

Списки определений

компьютер

устройство для обработки информации

дискета

гибкий магнитный диск

винчестер

жесткий магнитный диск

definition list

Многоуровневые списки

• Города России       
  
• Города Украины   
  

  
1. Москва   
2. Санкт-Петерург

  
1. Киев   
2. Одесса

Web-страницы. Язык HTML

© К.Ю. Поляков, 2007

Тема 5. Рисунки

Форматы рисунков

GIF (Graphic Interchange Format)
сжатие без потерь
прозрачные области
анимация
только с палитрой (2…256

Фон страницы

"images/back.jpg"
"../images/back.jpg"
"http://www.vasya.ru/images/back.jpg"

Рисунки в документе

из

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

left

right

top

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

middle

Отступы

VSPACE
(vertical space)

HSPACE
(horizontal space)

Другие атрибуты

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

Рисунок-гиперссылка

ALT="Бесплатная почта" BORDER=0>

локальная

Web-страницы. Язык HTML

© К.Ю. Поляков, 2007

Тема 6. Таблицы

Простейшая таблица

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

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

Размеры

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

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

всей таблицы:

информации в ячейках:

left,
center,
right

left,
center,
right

top,
middle,
bottom

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

цвет фона

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

Отступы

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

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

CELLSPACING

CELLSPACING

CELLPADDING

CELLPADDING

Объединение ячеек

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

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

Вложенные таблицы

Web-страницы. Язык HTML

© К.Ю. Поляков, 2007

Тема 7. Фреймы

Фреймы

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

Описание структуры

index.html

columns
столбцы

ширина в

Граница между фреймами

...

...

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

Настройка фрейма (FRAME)

MARGINHEIGHT="0"
NORESIZE
SCROLLING="auto">

убрать отступы от

Фреймы-строки

index.html

NAME="qq">

строки

ширина в

Сложные структуры (3 фрейма)

index.html

Как открыть ссылку в другом фрейме

TARGET="qq">Глава 2

TARGET

Web-страницы. Язык HTML

© К.Ю. Поляков, 2007

Тема 8. Понятие о Javascript

Что может Javascript?

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

Чем плоха

Основные принципы

каждый элемент на странице (текст, рисунок, таблица) – это объект,

Замена рисунка при движении мыши

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