Поделиться
HTML.ppt
Web-страницы. Язык HTML и др.
Введение
Структура документа
Списки
Гиперссылки
Оформление документа
Рисунки
Таблицы
Фреймы
Блоки (DIV)
Понятие о JavaScript
Web-страницы. Язык HTML и др.
Тема 1. Введение
3
Что такое Web-страницы?
Гиперссылка – «активная»ссылка на другой документ.
Гипертекст – текст, содержащий гиперссылки.
Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой.
WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа).
Web-страница – текстовый файл, в котором описано размещение материала на экране.
Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).
4
Какие бывают Web-страницы?
статические – существуют на сервере в виде готовых файлов: *.htm, *.html
динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php
позволяют выбирать информацию из базы данных по заранее неизвестным запросам
дополнительная нагрузка на сервер
загружаются медленнее
5
Язык HTML
HTML = Hypertext Markup Language (язык разметки гипертекста)
HTML-страница – это текстовый файл (Блокнот):
index.html
6
Тэги
Тэг – это команда языка HTML, которую выполняет браузер:
непарные тэги
парные тэги (контейнеры)
вставить рисунок
открывающий
закрывающий
область действия тэга: описание таблицы
7
Простейшая Web-страница
first.html
шапка («голова»)
основная часть («тело»)
8
Редактор HEFS
файловые операции
буфер обмена
один экран
запуск
браузера (F9)
назад
вперед
текстовый редактор
браузер (IE)
отмена
9
Вставка тэгов в HEFS
Web-страницы. Язык HTML и др.
Тема 2. Структура документа.
Специальные символы
11
Заголовки: H1 … H6
выравнивание:
left,
center,
right
12
Абзацы
переход на новую строку
абзац (с отступами)
И вечный бой! Покой
нам только снится
Сквозь кровь и пыль...
Летит, летит степная
кобылица
И мнет ковыль...
Одно физическое тело захотело поменять три своих старых варежки
на что-нибудь хорошее.
До самого вечера тело с варежками ...
13
Выравнивание
Этот текст выровнен по центру.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
left по левой границе
right по правой границе
center по центру
justify по ширине
атрибут тэга
14
Абзацы в HEFS
15
Специальные символы
Символ | HTML-код | Название |
– | — | (длинное) тире |
|
| неразрывный пробел |
§ | § | параграф |
© | © | символ авторского права |
« | « | левая русская кавычка |
» | » | правая русская кавычка |
® | ® | зарегистрированная торговая марка |
° | ° | градус |
² | ² | квадрат |
³ | ³ | куб |
¼ | ¼ | четверть |
½ | ½ | половина |
¾ | ¾ | три четверти |
× | × | знак умножения |
÷ | ÷ | знак деления |
16
Специальные символы
А.С. Пушкин — солнце русской поэзии.
Дом сдали в 2011 году.
Пёс весил 12 кг.
Из дома вышел А.С. Пушкин – солнце
русской поэзии.
Вышел А.С. Пушкин – солнце русской поэзии.
17
Специальные символы в HEFS
Web-страницы. Язык HTML и др.
Тема 3. Списки
19
Маркированные списки
unordered list (неупорядоченный список)
list item (элемент списка)
изменение маркера:
disk
circle ○
square ■
20
Нумерованные списки
ordered list (упорядоченный список)
изменение нумерации:
1, i, I, a, A
21
Списки определений
definition list (список определений)
definition term (термин)
definition description (описание)
22
Многоуровневые списки
23
Списки в HEFS
Ctrl-L вставить элемент списка
Web-страницы. Язык HTML и др.
Тема 4. Гиперссылки
26
Примеры (ссылки из файла rock.html)
27
Ссылки на другие сайты
на главную страницу сайта
index.htm, index.html, default.asp, …
на конкретную страницу сайта (URL)
на файл для скачивания
30
Гиперссылки в HEFS
локальная ссылка
Ctrl-A гиперссылка на выделенный блок, адрес вводить вручную
вставить только адрес файла
Web-страницы. Язык HTML и др.
Тема 5. Оформление документа. Стилевые файлы (CSS)
32
Содержание и оформление
Сборник задач по физике
Григорий Остер
содержание (контент)
логическая разметка
(*.html)
оформление
физическая разметка
(*.css)
main.css
mini.css
print.css
33
Логическая разметка
выделение (emphasize) | Это моя первая победа. |
сильное выделение (strong) | Вася |
код программы |
|
определение (definition) | Сурок - это... |
цитата (citation) | Блажен, кто верует, ... |
сокращение (abbreviation) | НИИЧАВО |
34
Форматированный текст (тексты программ)
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)
35
Физическая разметка
курсив (italic) | Вася | Вася |
жирный (bold) | Вася | Вася |
подчеркивание (underline) | Вася | Вася |
зачеркивание (strike out) |
| Вася |
верхний индекс (superscript) | Вася2 | Вася2 |
нижний индекс (subscript) | Вася2 |
36
Форматирование текста в HEFS
Ctrl-B
37
Тэг BODY – общие свойства страницы
цвет фона и текста
цвет гиперссылок
цвет текста
цвет фона
посещенные ссылки
(visited link)
цвет ссылок
атрибуты тэга
38
Вставка атрибутов в HEFS
вставить только код цвета
39
Цвет гиперссылок
LINK ссылки, на которых не были
VLINK посещенные ссылки
ALINK активные ссылки
40
Тэг FONT – свойства блока текста
цвет текста
размер шрифта
Привет!
Как дела?
Привет!
SIZE=6>
Как дела?
от 1 до 7
41
Линия-разделитель
horizontal rule
ширина в пикселях или процентах
толщина
выравнивание
42
Кодирование цвета
имена
red, green, blue, magenta, black,
шестнадцатеричные коды
white
R
G
B
# F F 0 0 0 0
# F F F F F F
# 0 0 F F F F
# 0 0 0 0 0 0
# A A A A A A
43
Что такое CSS?
HTML – язык логической разметки текста, определяющий содержание и структуру страницы (заголовки разных уровней, абзацы)
HTML–код не должен содержать оформления!
оформление частей документа (заголовков, параграфов) описывается в отдельном файле
CSS = Cascading Style Sheets – каскадные таблицы стилей
стилевые файлы: *.css
HTML + CSS
оформление
содержание
+ Javascript
анимация
44
Свойства элементов страницы
body {
color: white;
background: #FF6600;
}
название тэга
свойство
селектор
color – цвет символов
background – цвет фона
my.css
значение
45
Подключение стилевого файла
qq.html
my.css
body {
color: white;
background: #0000E0;
}
46
Шрифты
p {
font-family: Arial,sans-serif;
font-size: 20px;
font-style: italic;
font-weight: bold;
}
для всех абзацев
семейство шрифтов
serif – с засечками
sans-serif – без засечек
monospace – моноширинный
размер в пикселях
normal – обычный
italic - курсив
normal – обычный
bold - жирный
47
Классы (стили оформления)
p.spec {
font-style: italic;
background: green;
}
для абзацев класса spec
L’Etat c’est moi.
qq.html
L’Etat c’est moi.
.spec {
font-style: italic;
background: green;
}
для всех элементов
класса spec
48
Размеры, выравнивание
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
100px
80%
20px
фон
абзацный отступ
49
Рамка и поля
p {
background: #ccffcc;
border: 1px solid green;
margin: 0 40px 20px 40px;
padding: 5px;
}
рамка
отступы снаружи
отступы внутри
сверху, справа, снизу, слева
со всех сторон
толщина
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
40px
20px
p.hallo {
background: white url(images/grad.jpg);
}
50
Фоновый рисунок
Привет, Вася!
p.hallo {
background: url(grad.jpg) repeat-y;
}
51
Фоновый рисунок без повторения
p.email {
background: url(letter.gif) no-repeat;
padding-left: 20px;
}
qq@mail.ru
qq@mail.ru
52
Ссылки
p.email a {
color: green;
text-decoration:none;
}
p.email a:hover {
color: #00F;
text-decoration:underline;
}
p.email a:visited {
color: #F0F;
}
ссылки внутри абзаца стиля email
убрать подчеркивание
посещённые ссылки
подчеркнуть
когда мышь над ссылкой
53
Выделение отдельных слов
.latin {
color: green;
font-style: italic;
}
класс, применимый ко всему
курсив
Собака(лат.
Canis lupus
familiaris) — одно из наиболее
Домашних "животных-компаньонов".
Web-страницы. Язык HTML и др.
Тема 6. Рисунки
55
Форматы рисунков
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)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки
56
Фон страницы (через CSS)
body {
background: url(back.jpg);
}
'images/back.jpg'
'../images/back.jpg‘
'http://www.vasya.ru/images/back.jpg'
#6e5c62;
57
Рисунки в документе
из той же папки:
из другой папки:
с другого сервера:
image (изображение)
source (источник)
58
Выравнивание
left
right
top
bottom
middle
59
Отступы
VSPACE
HSPACE
60
Выравнивание и отступы (CSS)
img.left {
float: left;
margin: 5px 10px;
}
= VSPACE
= HSPACE
= ALIGN
margin: 5px 10px 5px 0;
отступа слева нет!
61
Другие атрибуты
всплывающая подсказка
надпись на месте рисунка, если его нет
размеры позволяют:
растянуть - сжать
не портить дизайн, если рисунка нет
толщина рамки вокруг рисунка
62
Рисунок-гиперссылка
ALT="Бесплатная почта" BORDER=0>
локальная ссылка:
ссылка на другой сервер:
иначе будет синяя рамка вокруг
если не вплотную к , будет «хвост»
не будет «хвоста»
63
Рисунки в HEFS
вставить рисунок
Web-страницы. Язык HTML и др.
Тема 7. Таблицы
65
Простейшая таблица
| Таблица из одной строки | из трех столбцов | без указания ширины таблицы и ячеек. |
толщина рамки
TABLE таблица
TR = table row строка таблицы
TD = table data данные таблицы
TH = table header заголовок (жирный, по центру)
66
Размеры
ширина в пикселях или в % от ширины окна браузера
высота в пикселях
всей таблицы:
строки:
ячейки:
ширина в пикселях или в % от ширины таблицы
67
Размеры (через CSS)
table.spec {
width: 60%;
height: 300;
}
table.spec tr {
height: 50px;
}
всей таблицы:
строки:
ячейки:
table.spec td.qq {
width: 25%;
height: 50px;
}
68
Выравнивание
| По центру, по верхней границе | WIDTH=200>По правой границе, по середине |
всей таблицы:
информации в ячейках:
left,
center,
right
left,
center,
right
top,
middle,
bottom
69
Выравнивание (через 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
70
Фон и цвет текста
| Привет! | |
| Таблица из двух строк | и двух столбцов |
цвет фона
фоновый рисунок
71
Фон и цвет текста (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");
}
цвет фона
рисунок
72
Отступы
| 1 | 2 |
интервал между ячейками
отступ внутри ячеек
CELLSPACING
CELLSPACING
CELLPADDING
CELLPADDING
73
Отступы (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
74
Объединение ячеек
| Привет! | ||
| Вася, | Петя, | Маша! |
| Привет! | Вася, |
| Петя, | |
| Маша! |
column span охват столбцов
row span охват строк
75
Вложенные таблицы
| Вася | Петя |
| Маша | Даша |
| 1 | 22 |
| 333 | 4444 |
76
Таблицы в HEFS
Web-страницы. Язык HTML и др.
Тема 8. Фреймы
78
Фреймы
Фрейм (frame) – это часть сложной Web-страницы, в которую может быть загружена другая Web-страница.
3 файла:
79
Описание структуры
index.html
columns
столбцы
ширина в пикселях или %
все остальное место
source
источник
имя фрейма (для ссылок)
80
Граница между фреймами
граница между фреймами:
0 – невидима, 1 - видима
ширина полосы между фреймами, за которую можно перетащить границу
81
Настройка фрейма (FRAME)
MARGINHEIGHT="0"
NORESIZE
SCROLLING="auto">
убрать отступы от края фрейма до содержимого
полоса прокрутки:
auto – появляется, когда надо
yes – есть всегда
no – нет никогда
запретить изменение размеров
82
Фреймы-строки
index.html
строки
ширина в пикселях или %
83
Сложные структуры (3 фрейма)
index.html
84
Как открыть ссылку в другом фрейме
TARGET
85
Фреймы в HEFS
86
Работа с несколькими страницами
переключение страниц
закрыть текущую страницу (Ctrl-W)
просмотр активной страницы
Web-страницы. Язык HTML и др.
Тема 9. Блоки (DIV)
88
Блоки (DIV) – любое содержимое
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris.
| 1 |
89
Блоки (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;
}
90
«Плавающие» блоки
.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
92
Что может Javascript?
информация статична
нет интерактивности (только переход на другую страницу)
Чем плоха HTML-страница?
Что можно сделать с помощью Javascript?
изменение рисунка при наведении мыши
выпадающие меню
всплывающие подсказки
фотогалерея без перегрузки страницы
движение объекта по экрану
Javascript может быть отключен в браузере
93
Основные принципы
каждый элемент на странице (текст, рисунок, таблица) – это объект, имеющий свои свойства
свойства объекта можно менять из программы на Javascript (скрипта)
все, что происходит – это события
все события можно «обрабатывать», т.е. как-то реагировать на них
HTML + Javascript = DHTML (Dynamic HTML)
94
Замена рисунка при движении мыши
когда курсор мыши над рисунком
после ухода мыши
События:
начальный рисунок
this – этот объект
this.src – свойство SRC этого объекта
95
Скрытый блок
.hidden {
display:none;
}
96
Скрытый блок: оформление ссылки
onClick="show('details');return false;">
Показать детали
остаться на странице
по щелчку вызвать функцию show
переход не выполнять
Скрытый блок: как его открыть?
97
function show ( name )
{
var elem = document.getElementById(name);
if ( elem )
elem.style.display = "block";
}
test.js
найти блок по имени
изменить свойство display
Формы
98
надпись на кнопке
имя формы
имя элемента
делать по щелчку
Форма: обращение к элементам
99
function check()
{
if ( calc.answer.value == "4" )
alert("Правильно!");
else alert("Неправильно!");
}
test.js
вывести сообщение
100
Конец фильма
ПОЛЯКОВ Константин Юрьевич
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
