--- Структура HTML-страницы --- Как записывать занятия в файл --- Соглашения по наименованию файлов и почему они такие Комментарий  HTML-браузеры и их запуск --- Открытие созданной страницы --- Режим ручной работы по созданию HTML-документа, работа в нескольких броузерах. Что такое теги и как они обрабатываются, как писать теги --- Спецификации HTML, SGML, DTD --- Вертикальный и горизонтальный потоки --- Тег <p> и его атрибуты right, center и justify; пустое содержание --- Пробелы и новые строки. Тег <body> и его атрибуты "bgcolor" и "text" --- RGB- и Web- палитры (216 цветов, "безопасная" палитра), шестнадцатиричное представление цвета --- Выбор цвета при помощи Photoshop и HTMLColors2000. Блоковые и строчные теги: Разница между логическим и физическим форматированием на примере <em> и <i> --- Про текстовые браузеры Lynx и Links Строчные теги физического форматирования: <b>, <i>, <u>, <big>, <small>, <font> с атрибутами "size", "size+/-" (от basefont, релативность <big> и <small>), "color", "face" (в том числе классификация шрифтов и значения serif|sans-serif|monospace, "color", <tt>, <sub>, <sup> --- H20 и 13км2 --- MathML и Amaya --- Тег <basefont size="...">. Строчные теги логического форматирования: <em>, <strong>, [<q>, <span>]. Блоковые теги физического форматирования: <br>, <center>, [<nobr> и <wbr>, <plaintext>, <div>]. Взаимоотношения между </p> и блоковыми тегами. Блоковые теги логического форматирования: <p>, <blockquote>, <pre> (MSIE поддерживает внутри <font>), <address>. Наиболее распространенные спецсимволы: < > « » — и заполнение пустого содержимого, § © ® ° & € [×] Теги структуры документа --- Заголовки, их свойства и их атрибут "align" --- Разделительная линейка <hr> (закругляет углы в Mozilla) и ее атрибуты "noshade", "color", "width", "width=...%" и способы работы с величинами в HTML, "align="left|right|center", "size" (100px максимум в MSIE 6) --- Ее использование как вертикальной линии или квадратика Списки --- Ненумерованный список <ul type="disk|circle|square"> <li>...</ul>, нумерованный список <ol type="1|i|I|a|A"><li>...</ol>, список определений <dl><dt>...<dd>...</dl> --- Вкладывание списков. !Набрать текст, применив в нем известные теги логического форматирования. Попробовать отформатировать стихи. Оформить трехуровневый список тегов. Теги таблиц: <table></table> с атрибутами "border", "bordercolor", "cellspacing", "cellpadding", "width", "width=...%", "height", "align=center|left|right" (последние два вызывают обтекание, как у "img"), "bgcolor" --- Алгоритм определения ширины таблицы, естественная и желательная ширина --- <tr align="left|center|right" valign="top|middle|bottom" bgcolor height> --- <th> и <td> и их атрибуты "colspan", "rowspan", "align", "valign", "width", "height", "bgcolor", "nowrap" --- Набирать таблицы по ходу изучения атрибутов --- Игнорирование пробелов непосредственно до, после и в начале/конце блоковых тегов !Набрать таблицы: (а) с заголовками строк и столбцов, покрашенными в особый цвет; (б) со строками, раскрашенными через одну; (в) со слиянием по вертикали и горизонтали; (г) спиральную таблицу; (д) со стихами; [таблицу именованных цветов, используя данный цвет в качестве bgcolor] !Набрать рекламное объявление(я), использовав для верстки таблицы. <colgroup width|span|align|valign> (Mozilla не поддерживает выравнивание) и правила старшинства выравнивания --- <table frame=void|hsides|vsides|box|[above|below|lhs|rhs|border]> и <table rules=none|rows|cols|[groups|all]> --- <caption align="top|bottom|[left|right]"></caption> (Mozilla не расширяет таблицу под подписью) Теги гиперссылок и рисунков: Тег <a href="...">...</a> --- Относительные ссылки c переходами по файловой системе ("name", "name/", "../name") --- Среверные ссылки "/name" и каталог DOCUMENT_ROOT --- Ссылки по протоколам HTTP (http://url, независимость от файловой системы, index.html, абсолютные IP, алиасы и DNS, [ping]), FTP (ftp://user:passwd@url), SMTP, FILE (file:///c:/file) --- Атрибут "name" и "href=#..." --- href="#" и href="file#BKM" --- Атрибут target="_new" (по умолчанию "_self") --- Атрибуты <body> "link", "vlink" (использованные), "alink" (последняя). Тег <img src="..."> с атрибутами "alt", "align="bottom|middle|top|right|left", "height", "width", "border", "hspace", "vspace" --- Создание невидимой распорки (0.gif) --- Атрибут <body background>. !Создать (а) простой сайт "Основы HTML" из файлов index.html, файлов-уроков и директории /i; (б) подготовить картинки с текстом заголовков в Photoshop, все изображения в /i, включить их как заголовки в каждый раздел; (в) установить связи между всеми файлами через "Предыдущий урок" и "Оглавление" и "Следующий урок". Создание изображений для Web-страниц в Adobe Photoshop и Adobe Image Ready: размер картинок (750 x 450), прозрачный фон --- набор текста, свойства шрифтов, использование декоративных шрифтов и шрифтов без засечек, трансформация текста, эффекты слоев на текстовом слое, растеризация и применение фильтров Диалог "Save for Web" --- разница между основными графическими форматами (в том числе про прозрачность, палитры, JPEG-алгоритм, EXIF-данные) --- оптимизация для Web, уменьшение количества цветов, сортировка цветов, палитры Adaptive, Selective, Perceptual --- "Web snap" --- прозрачность (MSIE и Netscape 4x не понимают PNG-прозрачность) --- градиенты и dithering --- тени и transparency dithering --- Работа в IrfanView (вынимание стрелки из progman.exe, конвертация и прозрачность) --- Вырезание любой картинки через print screen --- Алгоритм выбора формата: (фотография (обычная: JPEG 40-65 quality; контрастная или greyscale: проверить JPEG и PNG!); не фотография (анимация: GIF; не анимация (есть прозрачность: GIF; нет прозрачности: проверить PNG или GIF))) Создание карты изображения в Image Ready, теги <img usemap="#...">, <map name="..."></map>, <area href="..." alt="..." shape="circle|poly|rect"> coords=X,Y,R|X1,Y1 ...|X1,Y1 X2,Y2> --- создание slices: превращение рисунка в таблицу и последующая состыковка --- создание анимированных GIF: привязка слоев к кадрам, тестирование --- создание ролловеров: создание кнопки, привязывание слоев к состояниям, сохранение файла, тег <script> </script>, ссылка <a href="#"> с событиями типа "onclick", использование JavaScript --- вырезание "чужого" JavaScript --- JavaScript как event-driven language --- [примеры JavaScript]. Формы --- Простые формы (сначала без атрибутов) --- Варианты "input" (все должны иметь "value" и "name"): type="text" (maxlength, size) --- type="password" --- type="checkbox" (checked) --- type="radio" (одинаковые имена, checked) --- type="reset" и что она делает --- type="submit" и атрибуты "method=get|post" и "action=mailto:...|http://..." --- Посылка на сервер в виде запроса "http://server.com?name1=value1&name2=value2" <select name=... multiple size=...> и <option value=... selected> --- группировка опций при помощи <optgroup> --- Формы, которые работают без "form" --- "textarea rows=... cols=...", похожа на "pre" --- <input type="button" value="..." onclick="FUN();> и <button value="..."><img src="..."></button>, применение событий и функций JavaScript --- <input type=hidden|image|file> --- <fieldset> и <legend> Примеры DOM-конструкций с формами (вместо "onclick" можно использовать "onmouseover" и пр.): <form><select name="menu"> <option selected value="lesson1.html">Урок 1</option> <option value="lesson2.html">Урок 2</option></select> <input type="button" value="Перейти" onclick="top.location.href = this.form.menu.options[this.form.menu.selectedIndex].value"> </form> <input type="button" value="popup" onclick="FUN();"> <script>function FUN() {open("000.htm", "WindowName", "width=100, height=100, status=no, toolbar=no, titlebar=no, menubar=no, resizable=no, scrollbars=no, titlebar=no");}</script> Фреймы --- Специальный файл --- Атрибут "target" тега "a": <p><a href="lesson2.html" target="lesson">Two</a> --- Вкладывание фреймов (внутри frameset могут быть frame и другие frameset) --- Недостатки фреймов (закладки, индексирование, отображение не всеми браузерами и тег "noframes") --- Внутритекстовые фреймы ("iframe width=... height=...") <frameset cols="33%,*" border="3"> <frame src="index.html" name="index" scrolling="yes|no|auto" noresize marginwidth="10" marginheight="10" frameborder="1"> <frame src="lesson1.html" name="lesson"> </frameset> <noframes><body> <p><a href="1.html">One</a> | <a href="2.html">Two</a> </body></noframes> Теги заголовка (<head>) --- Тег <meta name/http-equiv content> --- <meta name="Author|Description|Keywords|Creator|Expires|Address" content="..."> --- <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> --- Запись о стиле <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\"> (лучше вообще пропускать) --- Типы "Strict" и "Frameset" --- тег <link rel="icon" href="http://site/icon.png" type="image/png"> Объекты --- <object data="film.mpeg" type="video/mpeg"> Работа в MM Dreameweaver (проверка, замена на сайте) --- MM Homesite -- HTML-Kit --- [Arachnophilia] --- TextPad --- Tinn/Syn/SciTE --- Mozilla Composer --- [Валидаторы tidy, linklint] Продвижение сайта --- Регистрация на поисковых серверах --- Работа с контентом: повторение слов, логические теги, meta-теги, дублирование контента --- Увеличение индекса цитируемости: информация в форумы и т.п., обмен баннерами CSS --- подготовить текст с абзацами, заголовками и вложенным списком --- тег <style type="text/css">...</style> --- первое выражение типа H1 {color: red} --- организация CSS: СЕЛЕКТОР {СВОЙСТВО1: ЗНАЧЕНИЕ1; СВОЙСТВО2: ЗНАЧЕНИЕ2;} --- комментарии в CSS CSS-селекторы --- селекторы по тегу, группировка тегов /* H1, H2, H3 {color: red;} */ --- селекторы по атрибуту /* [align="center"] {color: red;} */ --- селекторы по классу /* .kras {color: red;} */ и <p class="red"> --- можно указывать сразу несколько классов --- специальные теги "div" и "span", использование последнего для покраски части текста <span class="red">Текст</span> --- селекторы по ID /* #kras {color: red;} */ и <div id="kras">Текст</div> --- псевдоэлементы /* P:first-letter {color: red;} */ --- псевдоклассы /* a:hover {color: red} */ --- контекстные селекторы /* UL UL {color: red;} */ --- следование /* H1 + H2 {color: red;} */ CSS-свойства --- группировка свойств /* H1 {border-bottom 3px solid #000;} */ --- способы отображения размеров px, mm, em, ex, % (обычно от какой-то величины объемлющего блока) --- способы отображения цветов "red", #FFC, rgb (10%,15%,20%), rgb(120,150,255) --- отражение внешнего файла /* .fon {background url(i/title.gif) center no-repeat;} */ Несовметимости между браузерами и их преодоление --- /* P {text-indent: 2em; margin-top: -2ex/0ex/"0ex";} */ и режим совместимости для MSIE ("Transitional" или без указания) --- общее решение /* P {margin-bottom: -2ex;} */ --- Попытка сделать ударения --- /* .accent {position: relative; right: -.2em; top: -.3ex; margin-right: -.15em; width: .1em;} */ --- отражение в разных браузерах Описание различных CSS-свойств --- Границы и поля (margin, padding, border) /* H3 {padding: 10px; margin: 5%;} */ --- Типы линий solid, dashed, dotted --- Списки (counter, list-style-image) /* H2 {counter-increment: h2-count; counter-reset: h3-count;} */ /* H2:before {content: counter(h2-count) " ";} */ /* H3 {counter-increment: h3-count;}*/ /* H3:before {content: counter(h2-count) "." counter(h3-count) " ";} */ --- Цвет (color, background) --- Шрифты (font) H2 /* {font-family: Verdana, sans-serif; font-size: 2em; font-variant: small-caps;} */ --- Текст (text, letter, line) /* A {text-decoration: none;} */ /* UL {letter-spacing: 2px; line-height: 1.6;} */ --- Отображение, слои и плавающие объекты (display, position, float) /* H4 {font-size: 12px; display: inline|none;} */ (для этого надо <p><h4>...</h4>...</p>) /* .mylayer {position: absolute|relative|fixed; top: 2cm; left: 2cm;} */ /* .floatblock {width: 200px; height: 70px; float: left;} */ Работа в TopStyle Перенос деклараций во внешний файл --- Тег <link rel="stylesheet" type="text/css" href="style.css"> --- Встраивание стилей в теги и атрибут "style" Разделение способов отображения документа --- /* @media screen ... @media print ... @media tty ... */ !Применить каскадные стили и тег с кодировкой к созданному сайту. Введение в XHTML 1.1 --- Основные отличия --- <p></p> --- Нижний регистр --- <p><em>...</em><p> --- Атрибуты только в кавычках --- <hr noshade="noshade" /> --- "name" и "id" одновременно --- & вместо амперсанда

Web-дизайн Написание минимального HTML-документа в Notepad: теги , , , --- Структура HTML-страницы --- Как записывать занятия в файл --- Соглашения по наименованию файлов и почему они такие Комментарий  HTML-браузеры и их запуск --- Открытие созданной страницы --- Режим ручной работы по созданию HTML-документа, работа в нескольких броузерах. Что такое теги и как они обрабатываются, как писать теги --- Спецификации HTML, SGML, DTD --- Вертикальный и горизонтальный потоки --- Тег <p> и его атрибуты right, center и justify; пустое содержание --- Пробелы и новые строки. Тег <body> и его атрибуты "bgcolor" и "text" --- RGB- и Web- палитры (216 цветов, "безопасная" палитра), шестнадцатиричное представление цвета --- Выбор цвета при помощи Photoshop и HTMLColors2000. Блоковые и строчные теги: Разница между логическим и физическим форматированием на примере <em> и <i> --- Про текстовые браузеры Lynx и Links Строчные теги физического форматирования: <b>, <i>, <u>, <big>, <small>, <font> с атрибутами "size", "size+/-" (от basefont, релативность <big> и <small>), "color", "face" (в том числе классификация шрифтов и значения serif|sans-serif|monospace, "color", <tt>, <sub>, <sup> --- H20 и 13км2 --- MathML и Amaya --- Тег <basefont size="...">. Строчные теги логического форматирования: <em>, <strong>, [<q>, <span>]. Блоковые теги физического форматирования: <br>, <center>, [<nobr> и <wbr>, <plaintext>, <div>]. Взаимоотношения между </p> и блоковыми тегами. Блоковые теги логического форматирования: <p>, <blockquote>, <pre> (MSIE поддерживает внутри <font>), <address>. Наиболее распространенные спецсимволы: < > « » — и заполнение пустого содержимого, § © ® ° & € [×] Теги структуры документа --- Заголовки, их свойства и их атрибут "align" --- Разделительная линейка <hr> (закругляет углы в Mozilla) и ее атрибуты "noshade", "color", "width", "width=...%" и способы работы с величинами в HTML, "align="left|right|center", "size" (100px максимум в MSIE 6) --- Ее использование как вертикальной линии или квадратика Списки --- Ненумерованный список <ul type="disk|circle|square"> <li>...</ul>, нумерованный список <ol type="1|i|I|a|A"><li>...</ol>, список определений <dl><dt>...<dd>...</dl> --- Вкладывание списков. !Набрать текст, применив в нем известные теги логического форматирования. Попробовать отформатировать стихи. Оформить трехуровневый список тегов. Теги таблиц: <table></table> с атрибутами "border", "bordercolor", "cellspacing", "cellpadding", "width", "width=...%", "height", "align=center|left|right" (последние два вызывают обтекание, как у "img"), "bgcolor" --- Алгоритм определения ширины таблицы, естественная и желательная ширина --- <tr align="left|center|right" valign="top|middle|bottom" bgcolor height> --- <th> и <td> и их атрибуты "colspan", "rowspan", "align", "valign", "width", "height", "bgcolor", "nowrap" --- Набирать таблицы по ходу изучения атрибутов --- Игнорирование пробелов непосредственно до, после и в начале/конце блоковых тегов !Набрать таблицы: (а) с заголовками строк и столбцов, покрашенными в особый цвет; (б) со строками, раскрашенными через одну; (в) со слиянием по вертикали и горизонтали; (г) спиральную таблицу; (д) со стихами; [таблицу именованных цветов, используя данный цвет в качестве bgcolor] !Набрать рекламное объявление(я), использовав для верстки таблицы. <colgroup width|span|align|valign> (Mozilla не поддерживает выравнивание) и правила старшинства выравнивания --- <table frame=void|hsides|vsides|box|[above|below|lhs|rhs|border]> и <table rules=none|rows|cols|[groups|all]> --- <caption align="top|bottom|[left|right]"></caption> (Mozilla не расширяет таблицу под подписью) Теги гиперссылок и рисунков: Тег <a href="...">...</a> --- Относительные ссылки c переходами по файловой системе ("name", "name/", "../name") --- Среверные ссылки "/name" и каталог DOCUMENT_ROOT --- Ссылки по протоколам HTTP (http://url, независимость от файловой системы, index.html, абсолютные IP, алиасы и DNS, [ping]), FTP (ftp://user:passwd@url), SMTP, FILE (file:///c:/file) --- Атрибут "name" и "href=#..." --- href="#" и href="file#BKM" --- Атрибут target="_new" (по умолчанию "_self") --- Атрибуты <body> "link", "vlink" (использованные), "alink" (последняя). Тег <img src="..."> с атрибутами "alt", "align="bottom|middle|top|right|left", "height", "width", "border", "hspace", "vspace" --- Создание невидимой распорки (0.gif) --- Атрибут <body background>. !Создать (а) простой сайт "Основы HTML" из файлов index.html, файлов-уроков и директории /i; (б) подготовить картинки с текстом заголовков в Photoshop, все изображения в /i, включить их как заголовки в каждый раздел; (в) установить связи между всеми файлами через "Предыдущий урок" и "Оглавление" и "Следующий урок". Создание изображений для Web-страниц в Adobe Photoshop и Adobe Image Ready: размер картинок (750 x 450), прозрачный фон --- набор текста, свойства шрифтов, использование декоративных шрифтов и шрифтов без засечек, трансформация текста, эффекты слоев на текстовом слое, растеризация и применение фильтров Диалог "Save for Web" --- разница между основными графическими форматами (в том числе про прозрачность, палитры, JPEG-алгоритм, EXIF-данные) --- оптимизация для Web, уменьшение количества цветов, сортировка цветов, палитры Adaptive, Selective, Perceptual --- "Web snap" --- прозрачность (MSIE и Netscape 4x не понимают PNG-прозрачность) --- градиенты и dithering --- тени и transparency dithering --- Работа в IrfanView (вынимание стрелки из progman.exe, конвертация и прозрачность) --- Вырезание любой картинки через print screen --- Алгоритм выбора формата: (фотография (обычная: JPEG 40-65 quality; контрастная или greyscale: проверить JPEG и PNG!); не фотография (анимация: GIF; не анимация (есть прозрачность: GIF; нет прозрачности: проверить PNG или GIF))) Создание карты изображения в Image Ready, теги <img usemap="#...">, <map name="..."></map>, <area href="..." alt="..." shape="circle|poly|rect"> coords=X,Y,R|X1,Y1 ...|X1,Y1 X2,Y2> --- создание slices: превращение рисунка в таблицу и последующая состыковка --- создание анимированных GIF: привязка слоев к кадрам, тестирование --- создание ролловеров: создание кнопки, привязывание слоев к состояниям, сохранение файла, тег <script> </script>, ссылка <a href="#"> с событиями типа "onclick", использование JavaScript --- вырезание "чужого" JavaScript --- JavaScript как event-driven language --- [примеры JavaScript]. Формы --- Простые формы (сначала без атрибутов) --- Варианты "input" (все должны иметь "value" и "name"): type="text" (maxlength, size) --- type="password" --- type="checkbox" (checked) --- type="radio" (одинаковые имена, checked) --- type="reset" и что она делает --- type="submit" и атрибуты "method=get|post" и "action=mailto:...|http://..." --- Посылка на сервер в виде запроса "http://server.com?name1=value1&name2=value2" <select name=... multiple size=...> и <option value=... selected> --- группировка опций при помощи <optgroup> --- Формы, которые работают без "form" --- "textarea rows=... cols=...", похожа на "pre" --- <input type="button" value="..." onclick="FUN();> и <button value="..."><img src="..."></button>, применение событий и функций JavaScript --- <input type=hidden|image|file> --- <fieldset> и <legend> Примеры DOM-конструкций с формами (вместо "onclick" можно использовать "onmouseover" и пр.): <form><select name="menu"> <option selected value="lesson1.html">Урок 1</option> <option value="lesson2.html">Урок 2</option></select> <input type="button" value="Перейти" onclick="top.location.href = this.form.menu.options[this.form.menu.selectedIndex].value"> </form> <input type="button" value="popup" onclick="FUN();"> <script>function FUN() {open("000.htm", "WindowName", "width=100, height=100, status=no, toolbar=no, titlebar=no, menubar=no, resizable=no, scrollbars=no, titlebar=no");}</script> Фреймы --- Специальный файл --- Атрибут "target" тега "a": <p><a href="lesson2.html" target="lesson">Two</a> --- Вкладывание фреймов (внутри frameset могут быть frame и другие frameset) --- Недостатки фреймов (закладки, индексирование, отображение не всеми браузерами и тег "noframes") --- Внутритекстовые фреймы ("iframe width=... height=...") <frameset cols="33%,*" border="3"> <frame src="index.html" name="index" scrolling="yes|no|auto" noresize marginwidth="10" marginheight="10" frameborder="1"> <frame src="lesson1.html" name="lesson"> </frameset> <noframes><body> <p><a href="1.html">One</a> | <a href="2.html">Two</a> </body></noframes> Теги заголовка (<head>) --- Тег <meta name/http-equiv content> --- <meta name="Author|Description|Keywords|Creator|Expires|Address" content="..."> --- <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> --- Запись о стиле <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\"> (лучше вообще пропускать) --- Типы "Strict" и "Frameset" --- тег <link rel="icon" href="http://site/icon.png" type="image/png"> Объекты --- <object data="film.mpeg" type="video/mpeg"> Работа в MM Dreameweaver (проверка, замена на сайте) --- MM Homesite -- HTML-Kit --- [Arachnophilia] --- TextPad --- Tinn/Syn/SciTE --- Mozilla Composer --- [Валидаторы tidy, linklint] Продвижение сайта --- Регистрация на поисковых серверах --- Работа с контентом: повторение слов, логические теги, meta-теги, дублирование контента --- Увеличение индекса цитируемости: информация в форумы и т.п., обмен баннерами CSS --- подготовить текст с абзацами, заголовками и вложенным списком --- тег <style type="text/css">...</style> --- первое выражение типа H1 {color: red} --- организация CSS: СЕЛЕКТОР {СВОЙСТВО1: ЗНАЧЕНИЕ1; СВОЙСТВО2: ЗНАЧЕНИЕ2;} --- комментарии в CSS CSS-селекторы --- селекторы по тегу, группировка тегов /* H1, H2, H3 {color: red;} */ --- селекторы по атрибуту /* [align="center"] {color: red;} */ --- селекторы по классу /* .kras {color: red;} */ и <p class="red"> --- можно указывать сразу несколько классов --- специальные теги "div" и "span", использование последнего для покраски части текста <span class="red">Текст</span> --- селекторы по ID /* #kras {color: red;} */ и <div id="kras">Текст</div> --- псевдоэлементы /* P:first-letter {color: red;} */ --- псевдоклассы /* a:hover {color: red} */ --- контекстные селекторы /* UL UL {color: red;} */ --- следование /* H1 + H2 {color: red;} */ CSS-свойства --- группировка свойств /* H1 {border-bottom 3px solid #000;} */ --- способы отображения размеров px, mm, em, ex, % (обычно от какой-то величины объемлющего блока) --- способы отображения цветов "red", #FFC, rgb (10%,15%,20%), rgb(120,150,255) --- отражение внешнего файла /* .fon {background url(i/title.gif) center no-repeat;} */ Несовметимости между браузерами и их преодоление --- /* P {text-indent: 2em; margin-top: -2ex/0ex/"0ex";} */ и режим совместимости для MSIE ("Transitional" или без указания) --- общее решение /* P {margin-bottom: -2ex;} */ --- Попытка сделать ударения --- /* .accent {position: relative; right: -.2em; top: -.3ex; margin-right: -.15em; width: .1em;} */ --- отражение в разных браузерах Описание различных CSS-свойств --- Границы и поля (margin, padding, border) /* H3 {padding: 10px; margin: 5%;} */ --- Типы линий solid, dashed, dotted --- Списки (counter, list-style-image) /* H2 {counter-increment: h2-count; counter-reset: h3-count;} */ /* H2:before {content: counter(h2-count) " ";} */ /* H3 {counter-increment: h3-count;}*/ /* H3:before {content: counter(h2-count) "." counter(h3-count) " ";} */ --- Цвет (color, background) --- Шрифты (font) H2 /* {font-family: Verdana, sans-serif; font-size: 2em; font-variant: small-caps;} */ --- Текст (text, letter, line) /* A {text-decoration: none;} */ /* UL {letter-spacing: 2px; line-height: 1.6;} */ --- Отображение, слои и плавающие объекты (display, position, float) /* H4 {font-size: 12px; display: inline|none;} */ (для этого надо <p><h4>...</h4>...</p>) /* .mylayer {position: absolute|relative|fixed; top: 2cm; left: 2cm;} */ /* .floatblock {width: 200px; height: 70px; float: left;} */ Работа в TopStyle Перенос деклараций во внешний файл --- Тег <link rel="stylesheet" type="text/css" href="style.css"> --- Встраивание стилей в теги и атрибут "style" Разделение способов отображения документа --- /* @media screen ... @media print ... @media tty ... */ !Применить каскадные стили и тег с кодировкой к созданному сайту. Введение в XHTML 1.1 --- Основные отличия --- <p></p> --- Нижний регистр --- <p><em>...</em><p> --- Атрибуты только в кавычках --- <hr noshade="noshade" /> --- "name" и "id" одновременно --- & вместо амперсанда