Слайд 1Web-страницы. Язык HTML и др.
Введение
Структура документа
Списки
Гиперссылки
Оформление документа
Рисунки
Таблицы
Фреймы
Блоки (Блоки (DIVБлоки (DIV)
Понятие о Понятие

Слайд 2Web-страницы. Язык HTML и др.
Тема 1. Введение

Слайд 3Что такое Web-страницы?
Гиперссылка – «активная»ссылка на другой документ.
Гипертекст – текст, содержащий

Слайд 4Какие бывают Web-страницы?
статические – существуют на сервере в виде

Слайд 5Язык HTML
HTML = Hypertext Markup Language (язык разметки гипертекста)
HTML-страница – это текстовый

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


парные тэги

Слайд 7Простейшая Web-страница


Моя первая
Web-страница


Привет!



first.html

Моя первая
Web-страница

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

Привет!

основная

Слайд 8Редактор HEFS
файловые операции
буфер обмена
один экран
запуск
браузера (F9)
назад
вперед
текстовый

Слайд 9Вставка тэгов в HEFS

Слайд 10Web-страницы. Язык HTML и др.
Тема 2. Структура документа.
Специальные символы

Слайд 11Заголовки: H1 … H6

Заголовок документа
Заголовок раздела
Заголовок подраздела
Заголовок параграфа
Комментарий
Авторские пометки

выравнивание:
История
left,
center,

Слайд 12Абзацы
переход на новую строку




абзац (с отступами)
И вечный бой! Покой
нам только

Слайд 13Выравнивание

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


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

Слайд 14Абзацы в HEFS

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

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





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

Пёс весил

Слайд 17Специальные символы в HEFS

Слайд 18Web-страницы. Язык HTML и др.
Тема 3. Списки

Слайд 19Маркированные списки

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

unordered list (неупорядоченный список)
list item (элемент списка)

Слайд 20Нумерованные списки

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

ordered list (упорядоченный список)
изменение нумерации:

...

1,

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

компьютер
устройство для обработки информации
дискета
гибкий магнитный диск
винчестер
жесткий магнитный диск

definition

Слайд 22Многоуровневые списки
Города России       



Города Украины   




  Москва   Санкт-Петерург
  Киев   Одесса

Слайд 23Списки в HEFS
Ctrl-L вставить элемент списка

Слайд 24Web-страницы. Язык HTML и др.
Тема 4. Гиперссылки

Слайд 25Ссылки на другие страницы сайта
Таблицы
страница в той же папке
anchor (якорь)

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

Слайд 27Ссылки на другие сайты
Почта
на главную страницу сайта
index.htm, index.html, default.asp, …
на

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

Глава 1

Глава 2


Глава 1
Это текст

Слайд 29Запуск почтовой программы

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

Слайд 30Гиперссылки в HEFS
локальная ссылка
Ctrl-A гиперссылка на выделенный блок, адрес

Слайд 31Web-страницы. Язык HTML и др.
Тема 5. Оформление документа. Стилевые файлы (CSS)

Слайд 32Содержание и оформление
Сборник задач по физике
Григорий Остер
Задача 61 Петя ехал к

Слайд 33Логическая разметка

Слайд 34Форматированный текст (тексты программ)
program qq;
var a, b: integer;
begin
writeln("Введите два

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

'../images/back.jpg‘
'http://www.vasya.ru/images/back.jpg'
#6e5c62;

---

Слайд 58Рисунки в документе




из

той же папки:

из другой папки:

с другого сервера:

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

source (источник)

---

Слайд 59Выравнивание

left
right
top
bottom
(по умолчанию)
middle

---

Слайд 60Отступы

HSPACE=10 VSPACE=10>

VSPACE
(vertical space)

HSPACE
(horizontal space)

---

Слайд 61Выравнивание и отступы (CSS)

img.left {
float: left;
margin:

5px 10px;
}

= VSPACE

= HSPACE

= ALIGN

margin: 5px 10px 5px 0;

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

---

Слайд 62Другие атрибуты

HEIGHT="600">

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

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

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

---

Слайд 63Рисунок-гиперссылка

ALT="Таблицы" BORDER=0>

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

ссылка на другой сервер:

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

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

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

---

Слайд 64Рисунки в HEFS
вставить рисунок

---

Слайд 65Web-страницы. Язык HTML и др.
Тема 7. Таблицы

---

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


Таблица из одной строки
из трех

столбцов
без указания ширины таблицы
и ячеек.

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

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

---

Слайд 67Размеры

...

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

браузера

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

...

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

строки:

ячейки:

...

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

---

Слайд 68Размеры (через CSS)
table.spec {
width: 60%;
height: 300;
}
table.spec tr {
height:

50px;
}

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

строки:

ячейки:

table.spec td.qq {
width: 25%;
height: 50px;
}

...

---

Слайд 69Выравнивание


По

центру, по верхней границе
WIDTH=200>По правой границе,
по середине

...

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

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

left,
center,
right

left,
center,
right

top,
middle,
bottom

---

Слайд 70Выравнивание (через 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;
}

left,
center,
right

top,
middle,
bottom

---

Слайд 71Фон и цвет текста


Привет!

Таблица из двух строк
и двух столбцов

цвет фона

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

---

Слайд 72Фон и цвет текста (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");
}

цвет фона

рисунок

---

Слайд 73Отступы

BGCOLOR = blue>

1
2

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

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

CELLSPACING

CELLSPACING

CELLPADDING

CELLPADDING

---

Слайд 74Отступы (CSS)


1
2


border-spacing
border-spacing
padding
padding
table#qq

{
background: blue;
border-collapse: separate;
border-spacing: 10px;
padding: 10px;
}
#qq tr {
background: white;
}

кроме IE 6

---

Слайд 75Объединение ячеек


Привет!


Вася,
Петя,

Маша!

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

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

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

---

Слайд 76Вложенные таблицы

ВасяПетя
МашаДаша

1	22
333	4444

---

Слайд 77Таблицы в HEFS

---

Слайд 78Web-страницы. Язык HTML и др.
Тема 8. Фреймы

---

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

загружена другая Web-страница.

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

---

Слайд 80Описание структуры
index.html


Фреймы-столбцы

NAME="qq">

columns
столбцы

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

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

source
источник

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

---

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

...


...

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

1 - видима

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

---

Слайд 82Настройка фрейма (FRAME)

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

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

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

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

---

Слайд 83Фреймы-строки
index.html


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

NAME="qq">

строки

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

---

Слайд 84Сложные структуры (3 фрейма)
index.html

SRC="up.html">

---

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

Глава

2

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

---

Слайд 86Фреймы в HEFS

---

Слайд 87Работа с несколькими страницами
переключение страниц
закрыть текущую страницу (Ctrl-W)
просмотр активной страницы

---

Слайд 88Web-страницы. Язык HTML и др.
Тема 9. Блоки (DIV)

---

Слайд 89Блоки (DIV) – любое содержимое


Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris.

1

Слайд 90Блоки (DIV) – рамки и отступы



Lorem ipsum dolor sit amet, consectetur

Слайд 91«Плавающие» блоки

.picture {
float: left;
margin: 5px;
}
.picture p

{
margin: 0;
text-align: center;
font-family: sans-serif;
font-size: 80%;
font-weight: bold;
}

На природе

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

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

Слайд 92Web-страницы. Язык HTML и др.
Тема 10. Понятие о Javascript

Слайд 93Что может Javascript?
информация статична
нет интерактивности (только переход на другую страницу)
Чем плоха

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

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

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

Слайд 96Скрытый блок



Детали — это гайка, шайба, болт, винт, шуруп,

.hidden {
display:none;
}