Web-страницы. Язык HTML. CSS (каскадные таблицы стилей) презентация

ЧТО ТАКОЕ WEB-СТРАНИЦЫ?
WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа).
Web-страница – текстовый файл, в котором описано размещение материала на экране.
Гипертекст – текст, содержащий гиперссылки.
Гиперссылка – «активная»ссылка на другой документ.
Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой.
Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).

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

Язык HTML
HTML = Hypertext Markup Language
(язык разметки гипертекста)
HTML-страница – это текстовый файл (Блокнот):
Моя страница
Привет!
…
index.html

Тэги
Тэг – это команда языка HTML, которую выполняет браузер:
непарные тэги
парные тэги (контейнеры)
вставить рисунок
...
открывающий
закрывающий
область действия тэга: описание таблицы

Простейшая Web-страница
Моя первая <br> Web-страница
Привет!
first.html
Моя первая <br> Web-страница
шапка («голова»)
Привет!
основная часть («тело»)

Заголовки: H1 … H6
Заголовок документа
Заголовок раздела
Заголовок подраздела
Заголовок параграфа
Комментарий
Авторские пометки
выравнивание:
История
left,
center,
right

Абзацы
переход на новую строку
абзац (с отступами)
И вечный бой! Покой
нам только снится
Сквозь кровь и пыль...
Летит, летит степная
кобылица
И мнет ковыль...
Одно физическое тело захотело
поменять три своих старых варежки
на что-нибудь хорошее.
До самого вечера тело с варежками ...

Выравнивание
Этот текст выровнен по центру.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
left по левой границе
right по правой границе
center по центру
justify по ширине
атрибут тэга

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

Специальные символы
А.С. Пушкин — солнце русской поэзии.
Дом сдали в 2011 году.
Пёс весил 12 кг.
Из дома вышел А.С. Пушкин – солнце
русской поэзии.
Вышел А.С. Пушкин – солнце русской поэзии.

Маркированные списки
Вася
Петя
Коля
unordered list
(неупорядоченный список)
list item
(элемент списка)
изменение маркера:
...
disc ∙
circle ○
square ■

Нумерованные списки
Вася
Петя
Коля
ordered list
(упорядоченный список)
изменение нумерации:
...
1, i, I, a, A

Многоуровневые списки
Города России
Города Украины
Москва
Санкт-Петерург
Киев
Одесса

Ссылки на другие страницы сайта
Таблицы
страница в той же папке
anchor (якорь)
hyper reference (гиперссылка)
страница во вложенной папке
Пример
страница в соседней папке
Текст
выйти из текущей папки

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

Ссылки на другие сайты
Почта
на главную страницу сайта
index.htm, index.html, default.asp, …
на конкретную страницу сайта (URL)
Васин текст
на файл для скачивания
Скачать

Ссылки внутри страницы
Глава 1
Глава 2
Глава 1
Это текст главы 1. Это текст главы 1.
Это текст главы 1. Это текст главы 1.
Наверх
Глава 2
Это текст главы 2. Это текст главы 2.
Это текст главы 2. Это текст главы 2.
Наверх
в другом файле
Цвет текста
метка (якорь)
переход на метку

Запуск почтовой программы
Напишите мне!

Содержание и оформление
Сборник задач по физике
Григорий Остер
Задача 61
Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Одно при каждой остановке толкало Петю вперед, а другое, когда вагон трогался – дергало назад. Что это за хулиганские явления, и может ли транспортная милиция с ними справиться?
содержание (контент)
логическая разметка
(*.html)
оформление
физическая разметка
(*.css)
main.css
mini.css
print.css

Логическая разметка

Форматированный текст
(тексты программ)
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)

Физическая разметка

Кодирование цвета
имена
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

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

Свойства элементов страницы
body {
color: white;
background: #FF6600;
}
название тэга
значение
селектор
color – цвет символов
background – цвет фона
my.css

Подключение стилевого файла
Пример CSS
...
qq.html
my.css
body {
color: white;
background: #0000E0;
}
...

Шрифты
p {
font-family: Arial,sans-serif;
font-size: 20px;
font-style: italic;
font-weight: bold;
}
для всех абзацев
семейство шрифтов
serif – с засечками
sans-serif – без засечек
monospace – моноширинный
размер в пикселях
normal – обычный
italic - курсив
normal – обычный
bold - жирный

Классы (стили оформления)
p.spec {
font-style: italic;
background: green;
}
для абзацев класса spec class="spec">
L’Etat c’est moi.
qq.html
L’Etat c’est moi.
.spec {
font-style: italic;
background: green;
}
для всех элементов
класса spec
Россия молодая

Размеры, выравнивание
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
фон
абзацный отступ

Рамка и поля
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.hello {
background: white url(images/grad.jpg);
}
Фоновый рисунок
Привет, Вася!
p.hello {
background: url(grad.jpg) repeat-y;
}

Фоновый рисунок без повторения
p.email {
background: url(letter.gif) no-repeat;
padding-left: 20px;
} href="mailto:[e-mail]">[e-mail]
[e-mail]
[e-mail]

Ссылки
p.email a {
color: green;
text-decoration:none;
}
p.email a:hover {
color: #00F;
text-decoration:underline;
}
p.email a:visited {
color: #F0F;
}
ссылки внутри абзаца стиля email
убрать подчеркивание
посещённые ссылки
подчеркнуть
когда мышь над ссылкой

Выделение отдельных слов
.latin {
color: green;
font-style: italic;
}
класс, применимый ко всему
курсив
Собака(лат. class="latin">Canis lupus
familiaris) — одно из наиболее
домашних "животных-компаньонов".

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

Фон страницы (через CSS)
body {
background: url(back.jpg);
}
'images/back.jpg'
'../images/back.jpg‘
'http://www.vasya.ru/images/back.jpg'
#6e5c62;

Рисунки в документе
из той же папки:
из другой папки:
с другого сервера:
image
(изображение)
source
(источник)

Выравнивание
left
right
top
bottom
(по умолчанию)
middle

Отступы
VSPACE
(vertical space)
HSPACE
(horizontal space)

Выравнивание и отступы (CSS)
img.left {
float: left;
margin: 5px 10px;
}
= VSPACE
= HSPACE
= ALIGN
margin: 5px 10px 5px 0;
отступа слева нет!

Другие атрибуты
title="Ночь на Ладоге" width="800"
height="600">
надпись на месте рисунка, если его нет
размеры позволяют:
растянуть – сжать
не портить дизайн, если рисунка нет
всплывающая подсказка

Рисунок-гиперссылка
ALT="Бесплатная почта" BORDER=0>
локальная ссылка:
ссылка на другой сервер:
иначе будет синяя рамка вокруг
если не вплотную к
, будет «хвост»
не будет «хвоста»

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

Размеры (через CSS)
table.spec {
width: 60%;
height: 300px;
}
table.spec tr {
height: 50px;
}
всей таблицы:
строки:
ячейки:
table.spec td.qq {
width: 25%;
height: 50px;
}
...

Выравнивание (через 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 границе

Фон и цвет текста (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");
}
цвет фона
рисунок

Отступы (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

Объединение ячеек
Привет!
Вася,
Петя,
Маша!
Привет!
Вася,
Петя,
Маша!
column span охват столбцов
row span
охват строк

Вложенные таблицы
Вася
Петя
Маша
Даша
1
22
333
4444

Блоки (DIV)
– любое содержимое
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris.
1