4. Исторический аспект
1) Рукописный текст
2) Литографическая печать
3) Наборная печать
4) Офсетная печать
5) Экранный текст
6) Гипертекст
7) Интерактивные страницы
8) Мультимедийные документы
5. Технологии, оказавшие влияние
Типографика
заголовки, текст, таблицы, списки, иллюстрации,
специфические части текста (цитаты, аббревиатуры)
Протокол HTTP
гиперссылки, подгружаемый мультимедийный контент
Обмен данными
формы, кнопки
JavaScript
data-аттрибуты, обработка событий on...
Поисковые машины и автоматические обработчики
мета-информация, семантическое деление контента
11. В белом плаще с кровавым подбоем, шаркающей кавалерийской
походкой, ранним утром четырнадцатого числа весеннего месяца нисана в
крытую колоннаду между двумя крыльями дворца ирода великого вышел
прокуратор Иудеи Понтий Пилат. Более всего на свете прокуратор
ненавидел запах розового масла, и все теперь предвещало нехороший
день, так как запах этот начал преследовать прокуратора с рассвета.
Прокуратору казалось, что розовый запах источают кипарисы и пальмы в
саду, что к запаху кожи и конвоя примешивается проклятая розовая струя.
От флигелей в тылу дворца, где расположилась пришедшая с
прокуратором в Ершалаим первая когорта двенадцатого молниеносного
легиона, заносило дымком в колоннаду через верхнюю площадку сада, и к
горьковатому дыму, свидетельствовавшему о том, что кашевары в
кентуриях начали готовить обед, примешивался все тот же жирный
розовый дух. О боги, боги, за что вы наказываете меня?
Просто текст
12. <h1>Заголовок 1-го уровня</h1>
<h2>Заголовок 2-го уровня</h2>
... blah-blah-blah ....
<h6>Заголовок 6-го уровня</h6>
<hgroup>
<h1>Мастер и Маргарита</h1>
<h2>Глава 1. Никогда не разговаривайте с
неизвестными</h2>
</hgroup>
Заголовки
13. Разделение текста на абзацы
<p>Это абзац!</p>
<p>Абзац - часть письменной речи, состоящий из
одного или нескольких предложений. Абзац является
единицей членения текста, находящейся в промежутке
меджу фразой и главой. Каждый абзац начинается с
новой сторки.</p>
14. Перевод строки
<p>Когда этот текст достигнет края области, он будет
перенесен на следующую строку.</p>
<p>Сразу после элемента<br />
предолжение текста переностися на новую строку</p>
<p><nobr>А этот текст будет продолжаться до тех пор, пока
17. <abbr> - аббревиатура
<acronym> - акроним
<kbd> - клавиатурное сокращение
<dfn> - первое упоминание термина в тексте
<dl>,<dt>,<dd> - термин и его расшифровка
<q> - цитата внутри предложения
<blockquote> - цитирование удаленного источника
<cite> - название работы или произведения
<code> - исходный программный код
<pre> - предварительно отформатированный текст
Обособленные части текста
18. <bdi>, <bdo> - направление текста
<ruby>, <rp>, <rt> - аннотации к текстам на других языках
Тексты на других языках
19. <del> - текст удален в новой версии документа
<ins> - текст добавлен в новой версии документа
<mark> - маркированный подсвеченный текст
Корректорские отметки
20. Иди на <a href="http://google.com">Google.com</a>
Гиперссылки
Иди на Google.com
22. 1 Маркированный список UL
<ul>
<li>Цветы</li>
<li>Шампанское</li>
<li>Что-то к чаю</li>
</ul>
2 Нумированный список OL
<ol>
<li>Выдернуть шнур</li>
<li>Выдавить стекло</li>
<li>Написать об этом в twitter</li>
</ol>
Списки
32. <input name="some_name" type="тип" value="Привет" />
text - Текстовое поле
password - Пароль
hidden - Скрытое поле
<textarea name="blah">Длинный текст...</textarea>
Элементы для ввода текста
33. <input name="some_name" type="тип" value="Привет" />
color - Виджет для выбора цвета.
date - Поле для выбора календарной даты.
datetime - Указание даты и времени.
datetime-local - Указание местной даты и времени.
email - Для адресов электронной почты.
number - Ввод чисел.
range - Ползунок для выбора чисел в указанном диапазоне.
search - Поле для поиска.
tel - Для телефонных номеров.
time - Для времени.
url - Для веб-адресов.
month - Выбор месяца.
week - Выбор недели.
Элементы-виджеты
(Поддержка ограничена)
34. Радиокнопки
<input name="direction" type="radio" value="1" />Север
<input name="direction" type="radio" value="2" />Запад
<input name="direction" type="radio" value="3" />Юг
<input name="direction" type="radio" value="4" />Восток
Чекбокс
<input name="agree" type="checkbox" value="1" />
Согласны ли вы с условиями лицензионного соглашения
Радиокнопки и чекбоксы
36. <input name="some_name" type="тип" value="Привет" />
button - Кнопка общего назначения
reset - Сброс формы
submit - Кнопка для отправки
image - Кнопка-картинка
<button type="тип">Нажми меня!</button>
button - Кнопка общего назначения
reset - Сброс формы
submit - Кнопка для отправки
Кнопочные элементы
39. Универсальные элементы
<DIV> - универсальный блочный элемент
<div id="page">
<div id="content">Длинная статья</div>
<div id="sidebar">Сайдбар</div>
</div>
<SPAN> - универсальный строчный элемент
<p>Баланс: <span id="balance">100</span> руб.</p>
40. Контент-ориентированное расширение элемента <div>
<header> - шапка документа или его раздела
<footer> - подвал документа или его раздела
<nav> - основные элементы навигации
<aside> - сайдбар, второстепенный контент.
<section> - раздел или параграф документа
<article> - независимая самодостаточная часть контента
<address> - информация об авторах документа
<summary>, <details> - раскрывающееся пояснение
Семантическое разделение контента
41. Фигура - самодостаточный элемент контента:
иллюстрация, график, фрагмент кода и.т. д.
<figure>
<img src="/mona-lisa.jpg" alt="Мона Лиза"/>
<figcaption>Рисунок 1. Мона Лиза</figcaption>
<figure>
<figure>
<сode><?php echo “Hello World!”; ?></сode>
<figcaption>Первое приложение на PHP</figcaption>
<figure>
Фигуры
44. Прямая выборка
div - по имени тэга
#main - по идентификатору
.big - по имени класса
div#content - по совокупности имени тэга и id
span.black - по совокупности имени тэга и класса
input[type="text"] - по атрибуту
Контекстная выборка
div p strong - цепочка вложенности
a + span - соседние элементы
form > fieldset - прямые потомки
Селекторы элементов
46. 1. Стиль браузера.
2. Стиль пользователя.
3. Стиль автора.
4. Стиль автора с добавлением !important.
5. Стиль пользователя с добавлением !important.
Каскадирование и приоритет стилей
47. Свойства текста
Свойства шрифта
font
font-family
font-size
font-stretch
font-style
font-variant
font-weight
Свойства строк
letter-spacing
line-height
Цвет текста
color
Свойства списков
list-style
list-style-image
list-style-position
list-style-type
Деление на колонки
column-count
column-gap
column-rule
column-width
columns
Свойства текста
text-align
text-align-last
text-decoration
text-decoration-
color
text-decoration-line
text-decoration-
style
text-indent
text-overflow
text-shadow
text-transform
48. Блочная модель
Внутренний отступ
padding
padding-bottom
padding-left
padding-right
padding-top
Внешний отступ
margin
margin-bottom
margin-left
margin-right
margin-top
Размеры блока
height
width
max-height
max-width
min-height
min-width
Переполнение
overflow
overflow-x
overflow-y
Способ отображения
display
Позиционирование
position
top
right
left
bottom
Обтекание
float
clear
Наложение
z-index
Видимость
visibility
