web весна 2012 лекция 8
TRANSCRIPT
1986 – SGML. Логическое описание структуры
1989 – 1991 – Тим Бернерс Ли создал HTML.
Для тех. документации. Без мультимедиа.
Война браузеров. HTML 1.0 так и не создали.
1994 – Создание W3C.
1995 – HTML 2.0 объявлен как стандарт.
1997 – HTML 4.0
1999 – HTML 4.01
Сейчас – HTML 5
Как это выглядело:
HTML<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Моя первая веб-страница</title>
</head>
<body>
<h1 color="red">Заголовок страницы</h1>
<p>Основной текст.</p>
</body>
</html>
Вольности HTML
1) Произвольный регистр: <BR> == <br>
2) Атрибуты без скобок: color=red
3) Сокращенные атрибуты: disabled
4) Непарные тэги: <p> вместо <p></p>
5) Перестановки тэгов: <b><i></b></i>
XHTML
1) только нижний регистр тэгов
2) атрибуты со скобоками: color=”red”
3) атрибуты – без сокращений: disabled=”disabled”
4) Тэги всегда парные: <p></p>
5) Строгая вложенность: <i><b></b></i>
6) id вместо name
7) Необходим DOCTYPE
DOCTYPEОпределяет тип разметки содержимого – DTD.
Влияет на отображение страницы браузером.
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
DOCTYPEXHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML 5.0
<!DOCTYPE html>
Тэги верхнего уровня<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
</head>
<body id=”the_body”>
<p class=”article”>...</p>
</body>
</html>
Тэги заголовков
<title> - отображается в заголовке окна.
<meta> - информация для user-agentов.
<meta name="description" content="Сайт об HTML и создании сайтов">
<meta name="generator" content="WordPress3.3.1" />
… либо замена HTTP заголовков
<meta http-equiv="content-type" content="text/html; charset=utf-8">
Блочные тэги
<h1> - <h6> - различные уровни заголовков
<p> - разбиение текста на параграфы
<hr> - горизонтальная линия
<pre> - блок преформатированного кода, например исходный код программы
<blockquote> - цитирование длинного блока текста
<div> - абстрактный блочный контейнер
Пример: h3 и p
Строчные тэги
<a> - гиперссылки
<em> <i> - акцентирование
<strong><b> - выделение
<img src=”..”> - вставка изображений
<sub> - нижний индекс
<sup> - верхний индекс
< span> - абстрактный строчный контейнер
Списки в HTML<ol>, <ul>, <li> - маркированые списки
<ul>
<li>one</li>
<li>two</li>
</ul>
<dl>, <dt>, <dd> - списки определений
<dl>
<dt>HTML</dt><dd>язык разметки</dd>
<dt>CSS</dt><dd>язык описания стилей</dd>
</dl>
Пример таблицы
Важно: rowspan, colspan, vertical-align
<table border=”1”>
<caption>квартальный отчет</caption>
<thead>
<tr><td>дата</td>
<td colspan=”2”>доход</td>
</tr>
</thead>
<tbody>
<tr><th rowspan=”2”>2011-01-01</th>
<td>100500</td><td>33</td>
</tr>
<tr><td>100</td><td>500</td></tr>
</tbody>
</table>
Ссылки в HTML
Ссылки:
<a href=”URL” target=”blank” rel=”nofollow”>
<img src=”nice.jpg”>
</a>
Поведение браузера зависит от протокола URL.
http(s), ftp – переход по ссылке
mailto – запуск почтовой программы
javascript – запуст JS скрипта, указанного в URL
Якоря: <a name=”chapter1”>Глава 1</a>
Формы в HTML
<form method=”post” action=”/add/” enctype="multipart/form-data”>
<input name=”image” type=”file”>
<input name=”id” type=”hidden” value=”3”>
<input name=”nick” type=”text”>
<input type=”submit” value=”Отправить”>
<button>Все равно отправить</button>
</form>
Элементы управления<input> - текстовое поле, checkbox,
radiobutton,
скрытое поле, ввод пароля, кнопка отпраки.
<select>, <option> - выпадающий селектор, множественный выбор
<textarea> - многострочное текстовое поле.
HTML Frames<frameset rows="*" cols="80,*">
<frame src="frame1.html" name="Фрейм 1">
<frameset rows="80,*">
<frame src="frame2.html" name="Фрейм 2">
<frame src="frame3.html" name="Фрейм 3">
</frameset>
</frameset>
Важно: DOCTYPE, скрывается URL и title, плохо поддерживается поисковыми ботами.
CSS - Cascading Style Sheets
Как описать оформление страницы ?
1) XML – логическая разметка данных
2) HTML – набор тэгов + семантика + минимальные возможности стилизации
3) <em>, <strong>, <font> - неудобно.
Решение
Отделить оформление от структуры – использовать отдельный язык для стилей.
Основы синтаксиса
/* some real css */
.mid-play {padding:13px 0px 0px 13px;}
p.inner-play a {color:#3c3c3c; text-decoration: underline; }
.big-top {background-image:url(/img/pc/220_130_top.gif);}
/* комментарии */
cелектор { имя_стиля1: значение1; имя_стиля2: значение2; … }
Какие бывают стили ?
width, height – размеры элемента
margin, padding – границы и отступы
display, visibility – режим отображения
top, left, right, bottom – расположение
Background – фон элемента
font – управление шрифтом
text-align – выравнивание текста
И т.д: http://htmlbook.ru/css
Базовые селекторы1) Универсальный селектор
* { margin: 0px; padding: 0px; border: 0px; }
2) Имена тэгов
p { margin-top: 10px; }
3) Имена классов (с точки)
.btn { border: solid 1px gray; }
4) id тэгов
#userpic { padding: 10px }
Сложные селекторы
1) контекстные (вложенные)
div.article a { text-decoration: underline }
2) дочерние (вложенность = 1 уровень)
a > img { border: 2px }
3) соседние
h2.sic + p { margin-left: 30px }
4) группировка
h1, h2, h3, h4, h5 { color: red }
Псевдоклассыa:visited – посещенная ссылка
a:link – непосещенная ссылка
div:hover – элемент при наведении мыши
input:focus – элемент при полчении фокуса
li:first-child – выбирает первого потомка среди множества элементов
* One
* Two
* Three
ПсевдоэлементыДля примера:
.nickname:first-letter {color: white}
p:first-line {color: red}
Для добра:
.userpic:before {
content: ''; display: block;
width: 100px; height: 5px;
background-color: gray;
}
НаследованиеПеренос стилей на вложенные элементы
body { color: darkgray; font-family: Arial; }
p { font-size: 110% }
<body>
<p> Привет, <a href=”/”>Мир</a> </p>
</body>
Не все стили наследуются !
Где могут быть определы
стили?1) Стили браузера
2) Стили пользователя
3) Стили автора
3.1) Во внешнем файле
<link rel="stylesheet" href="/style.css" />
3.2) В html документе
<style></style>
3.3) Встроенные в элемент
<div style=”display: none”></div>
Приоритеты стилей (автора)1) Специфичность – вычисление баллов
id – 100
классы и псевдоклассы – 10
тэги и псевдо элеметы – 1
ul.info ol + li → 13 баллов
li.red.level → 21 балл
2) Встроенный стиль: специфичность = 1000
3) Расположение в коде: послдений стиль
4) .inone { display: none !important }
Типы элементов. display1) display: none – элемент невидим, не занимает
места (vs visibility: hidden)
2) display: block – элемент занимает максимальную ширину, начинается с новой строки, учитывает width, height. div, h1-h6, p – блочные.
3) display: inline – элемент занимает минимальную ширину, и не прерывает строку, игнорирует width, height. span, img, a – строчные.
4) display: table-cell – как ячейка таблицы: в строку, игнорирует margin, учитывает width, height, разрешает vertical-align.
DIV vs SPAN<div class="t">ONE</div>
<div class="t">2</div>
<span class="t">ONE</span>
<span class="t">2</span>
<style>
.t {
width: 200px; height: 100px;
background: red; color: white;
margin: 5px; padding: 4px;
}
</style>
float & clear
float – задает правила обтекания элемента
clear – отменяет обтекание начиная с элемента
float & clear<div class="outer">
<div class="sqr fl"></div> ...
<div style="clr"></div>
<div class="sqr fr"></div> ...
</div>
<style>
.outer { float: left; width: 390px;}
.sqr { width: 100px; height: 100px; }
.fl { float: left; }
.fr { float: right; }
.clr { clear: both; }
</style>
position1) static – обычное расположение
2) absolute – относительно начала документа (страницы)
3) fixed – относительно окна браузера
4) relative – относительно родительского элемента (который должен быть relative/absolute)
top/right/bottom/left – отступы, могут быть отрицательными
Position – пример
BoxModel
margin: 10px
marign: 10px 5px;
margin: 1px 2px 3px 4px;
margin-left: 10px;
Домашнее задание
1) Ознакомится с версткой таблиц
2) Сверстать paginator