Web осень 2012 лекция 8
-
Upload
technopark -
Category
Documents
-
view
97 -
download
1
Transcript of Web осень 2012 лекция 8
![Page 1: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/1.jpg)
HTML и CSS
Дмитрий Смаль
![Page 2: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/2.jpg)
HTML
1986 – SGML. Логическое описание структуры
1989 – 1991 – Тим Бернерс Ли создал HTML
Для тех. документации. Без мультимедиа
Война браузеров. HTML 1.0 так и не создали
1994 – Создание W3C
1995 – HTML 2.0 объявлен как стандарт
1997 – HTML 3.2, HTML 4.0 (+CSS)
1999 – HTML 4.01
Сейчас – HTML 5
![Page 3: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/3.jpg)
Как это выглядело
![Page 4: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/4.jpg)
HTML
![Page 5: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/5.jpg)
HTML
<!DOCTYPE html><html> <head> <title>Страница</title> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> <meta name=”description” content=”Сайт о создании сайтов”> <link rel=”stylesheet” href=”./style.css”> <script type=”text/javascript” src=”./script.js”></script> </head> <body id=”the_body”> <p class=”article”>...</p> </body></html>
![Page 6: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/6.jpg)
HTML
Произвольный регистр: <BR> == <br>
Атрибуты без скобок: color=red
Сокращенные атрибуты: disabled
Непарные тэги: <p> вместо <p></p>
Перестановки тэгов: <b><i></b></i>
![Page 7: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/7.jpg)
XHTML
только нижний регистр тэгов
атрибуты со скобоками: color=”red”
атрибуты – без сокращений: disabled=”disabled”
Тэги всегда парные: <p></p>
Строгая вложенность: <i><b></b></i>
id вместо name
Необходим DOCTYPE
![Page 8: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/8.jpg)
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">
![Page 9: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/9.jpg)
DOCTYPE
XHTML 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">
<!DOCTYPE html>
HTML 5
![Page 10: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/10.jpg)
Тэги верхнего уровня
html – обертка
head – заголовок страницы, не отображается
body – тело страницы
![Page 11: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/11.jpg)
Тэги заголовков
<title> - отображается в заголовке окна.
<meta> - информация для user-agentов.
<meta name="description" content="Сайт об HTML и создании сайтов">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="./style.css"> - загрузка дополнительных ресурсов
<script src="./jquery.js"></script> - загрузка скриптов
![Page 12: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/12.jpg)
Блочные тэги
<h1> - <h6> - различные уровни заголовков
<p> - разбиение текста на параграфы
<hr> - горизонтальная линия
<pre> - блок преформатированного кода, например исходный код программы
<blockquote> - цитирование длинного блока текста
<div> - абстрактный блочный контейнер
![Page 13: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/13.jpg)
Пример: h3 и p
![Page 14: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/14.jpg)
Строчные тэги
<a> - гиперссылки
<em> <i> - акцентирование
<strong><b> - выделение
<img src=”..”> - вставка изображений
<sub> - нижний индекс
<sup> - верхний индекс
<span> - абстрактный строчный контейнер
![Page 15: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/15.jpg)
Списки в HTML
<ol>, <ul>, <li> - маркированые списки
<ul> <li>one</li> <li>two</li></ul>
<dl> <dt>HTML</dt><dd>язык разметки</dd> <dt>CSS</dt><dd>язык описания стилей</dd></dl>
<dl>, <dt>, <dd> - списки определений
![Page 16: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/16.jpg)
Таблицы в HTML
<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>
![Page 17: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/17.jpg)
Пример таблицы в HTML
![Page 18: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/18.jpg)
Гиперссылки
Ссылки:
<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>
![Page 19: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/19.jpg)
Формы
<form method=”post” action=”/add/”enctype="multipart/form-data” target=”frame3”
><input name=”image” type=”file”><input name=”id” type=”hidden” value=”3”><input name=”nick” type=”text”><input type=”submit” value=”Отправить”><button>Все равно отправить</button>
</form>
![Page 20: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/20.jpg)
Элементы управления
<input> - текстовое поле, checkbox, radiobutton, скрытое поле, ввод пароля, выбор файла, кнопка отправки.
<select>, <option> - выпадающий селектор, множественный выбор ( multiple )
<textarea> - многострочное текстовое поле.
![Page 21: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/21.jpg)
Элементы управления
![Page 22: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/22.jpg)
HTML Frames
Важно: DOCTYPE, скрывается URL и title, плохо поддерживается поисковыми ботами.
<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>
![Page 23: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/23.jpg)
CSS
![Page 24: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/24.jpg)
CSS
Как описать оформление страницы ?
XML – логическая разметка данных
HTML – набор тэгов + семантика + минимальные возможности стилизации
<em>, <strong>, <font> - неудобно.
Решение:
Отделить оформление от структуры – использовать отдельный язык для стилей.
![Page 25: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/25.jpg)
Основы синтаксиса CSS
/* 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; … }
![Page 26: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/26.jpg)
Какие бывают стили ?
width, height – размеры элемента
margin, padding – границы и отступы
display, visibility – режим отображения
top, left, right, bottom – расположение
background – фон элемента
font – управление шрифтом
text-align – выравнивание текста
И т.д: http://htmlbook.ru/css
![Page 27: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/27.jpg)
Базовые селекторы
Универсальный селектор
* { margin: 0px; padding: 0px; border: 0px; }
Имена тэгов
p { margin-top: 10px; }
Имена классов (с точки)
.btn { border: solid 1px gray; }
id тэгов (с решетки)
#userpic { padding: 10px }
![Page 28: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/28.jpg)
Сложные селекторы
контекстные (вложенные)
div.article a { text-decoration: underline }
дочерние (вложенность = 1 уровень)
a > img { border: 2px }
соседние
h2.sic + p { margin-left: 30px }
группировка
h1, h2, h3, h4, h5 { color: red }
![Page 29: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/29.jpg)
Псевдоклассы
a:visited – посещенная ссылка
a:link – непосещенная ссылка
div:hover – элемент при наведении мыши
input:focus – элемент при полчении фокуса
li:first-child – выбирает первого потомка среди множества элементов
* One
* Two
* Three
![Page 30: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/30.jpg)
Псевдоэлементы
Для примера:
.nickname:first-letter {color: white}
p:first-line {color: red}
Для добра:
.userpic:before {
content: ''; display: block;
width: 100px; height: 5px;
background-color: gray;
}
![Page 31: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/31.jpg)
Наследование
Перенос стилей на вложенные элементы
body { color: darkgray; font-family: Arial; }
p { font-size: 110% }
<body>
<p> Привет, <a href=”/”>Мир</a> </p>
</body>
Не все стили наследуются !
![Page 32: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/32.jpg)
Где могут определить ?
Стили браузера
Стили пользователя
Стили автора
Во внешнем файле
<link rel="stylesheet" href="/style.css">
В html документе
<style></style>
Встроенные в элемент
<div style=”display: none”></div>
![Page 33: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/33.jpg)
Приоритеты стилей
1) Специфичность – вычисление баллов
id – 100
классы и псевдоклассы – 10
тэги и псевдо элеметы – 1
ul.info ol + li 13 баллов→
li.red.level 21 балл→
2) Встроенный стиль: специфичность = 1000
3) Расположение в коде: последний стиль
4) .inone { display: none !important }
![Page 34: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/34.jpg)
Типы элементов
display: none – элемент невидим, не занимает места (vs visibility: hidden)
display: block – элемент занимает максимальную ширину, начинается с новой строки, учитывает width, height. div, h1-h6, p – блочные.
display: inline – элемент занимает минимальную ширину, и не прерывает строку, игнорирует width, height. span, img, a – строчные.
display: table-cell – как ячейка таблицы
![Page 35: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/35.jpg)
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>
![Page 36: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/36.jpg)
float & clear
float – задает правила обтекания элемента
clear – отменяет обтекание начиная с элемента
![Page 37: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/37.jpg)
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>
![Page 38: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/38.jpg)
Позиционирование
position: static – обычное расположением
position: relative – относительно исходного местоположения на странице (смещение)
position: absolute – если родитель relative, absolute или fixed – относительно родителя, иначе – относительно начала документа (страницы)
position: fixed – относительно окна браузера
top/right/bottom/left – отступы, могут быть отрицательными
![Page 39: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/39.jpg)
Пример
![Page 40: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/40.jpg)
Box model
margin: 10pxmarign: 10px 5px;margin: 1px 2px 3px 4px;margin-left: 10px;
![Page 41: Web осень 2012 лекция 8](https://reader036.fdocument.pub/reader036/viewer/2022062514/55ac50e01a28abff118b46c8/html5/thumbnails/41.jpg)
Спасибо за вниманиеДмитрий Смаль, [email protected]