- •Тема 7 Лекция09: основы web-дизайна
- •9.1 Пример документа в html
- •9.2 Заголовки документов
- •9.3 Заголовки разделов документов
- •9.4. Абзацы
- •9.5 Соединение с другими документами
- •9.7 Обращение к определенным разделам других документов
- •9.8.5. Вложенные списки
- •9.9. Авторский стиль редактирования
- •9.10 Цитаты
- •9.11. Адреса
- •9.12. Стили
- •9.12.1 Логические стили
- •9.12.2 Физические стили
- •9.12.3 Специальные символы
- •9.13. Прерывание строки
- •9.14 Горизонтальная линия
- •9.15 Внутренние рисунки
- •9.16 Внешние рисунки, звуки и мультипликация
- •9.17. Наложение разных стилей
- •9.17.1. Различные стили внутри гиперссылки
- •9.17.2. Ошибочная ссылка
9.17. Наложение разных стилей
Рассмотрим следующую строку HTML-документа:
<B> Это пример <DFN> наложения стилей </ B> в HTML-документе </ DFN>
Слова "наложение стилей" определены одновременно как <B> и <DFN>. Как реагировать на это browser? Очевидно, что различные browser-ы - по разному, и предсказать, каким в действительности увидит Ваш текст пользователь, нельзя. Поэтому рекомендуем Вам избегать такого наложения стилей.
9.17.1. Различные стили внутри гиперссылки
Можно использовать гиперссылки внутри строки заданного стиля:
<H1> <A HREF = "begth_r1.html "> Введение в HTML </ A> </ H1>
Но нельзя изменять стиль внутри гиперссылки:
<A HREF = "begth_r1.html "> <H1> Введение в HTML </ H1> </ A>
9.17.2. Ошибочная ссылка
Когда Вы описываете ссылку <IMG> на рисунок, которого не существует, он заменяется фиктивным изображением. Проверьте, что рисунок существует, и что в гиперссылка указана правильно, и что у пользователей есть права на использование этого файла.
Долгий пример
Рассмотрим длиннее пример HTML-документа:
<HEAD>
<TITLE>; Более длинный пример </ TITLE>
</ HEAD>
<BODY>
<H1> Более длинный пример </ H1>
Это простой HTML-документ. Это первый абзац. <P>
Это второй абзац, он демонстрирует некоторые возможности HTML по выделению слов.
Это слово написано <I> наклонным </ I> шрифтом. Это слово написанное
<B> Утолщенным </ B> шрифтом.
Здесь можно увидеть картинку:
<IMG SRC="/pics/digest/LOGO.GIF"> <P>
Это третий абзац, он демонстрирует использование гиперссылок.
Это ссылка на файл minihtml.html, простой пример HTML-документа, содержащего:
<A HREF="minihtml.html"> Пример HTML-текста </ A>. <P>
<H2> Заголовок второго уровня </ H2>
Дальнейший текст будет написан шрифтом фиксированной ширины: <P>
<PRE> On the stiff twig up there Hunches а wet black rook Arranging and rearranging its feathers in the rain ...
</ PRE>
Это ненумерованный список, состоящий из двух элементов: <P>
<UL> <LI> Смородина
<LI> Черника
</ UL>
Конец документа. <P>
<ADDRESS> Elena G. Koroteyeva (lenka@srdlan.npi.msu.su) </ ADDRESS>
</ BODY>
СПИСОК ЭЛЕМЕНТОВ HTML
(Мета-теги)
|
БАЗИСНІ ЕЛЕМЕНТИ |
|||
|
|
Тип документа |
<HTML></HTML> |
(початок і кінець файлу) |
|
|
Ім'я документа |
<TITLE></TITLE> |
(повинно бути в заголовку) |
|
|
Заголовок |
<HEAD></HEAD> |
(опис документа, наприклад його ім'я) |
|
|
Тіло |
<BODY></BODY> |
(вміст сторінки) |
|
ВИЗНАЧЕННЯ СТРУКТУРИ |
|||
|
|
Заголовок |
<H?> </H?> |
(стандарт визначає 6 рівнів) |
|
|
із вирівнюванням |
<H?ALIGN=LEFT|CENTER|RIGHT></H?> |
|
|
|
Секція |
<DIV></DIV> |
|
|
|
із вирівнюванням |
<DIV ALIGN=LEFT|RIGHT|CENTER></DIV> |
|
|
|
Цитата |
<BLOCKQUOTE></BLOCKQUOTE> |
(звичайно виділяється відступом) |
|
|
Виділення |
<EM></EM> |
(звичайно зображається курсивом) |
|
|
Додаткове виділення |
<STRONG></STRONG> |
(звичайно зображається жирним шрифтом) |
|
|
Відсилання, цитата |
<CITE></CITE> |
(звичайно курсив) |
|
|
Код Код |
<CODE></CODE> |
(для лістингів коду) |
|
|
Приклад висновку |
<SAMP></SAMP> |
|
|
|
Введення з клавіатури |
<KBD></KBD> |
|
|
|
Змінна |
<VAR></VAR> |
|
|
|
Визначення Определение |
<DFN></DFN> |
(часто не підтримується) |
|
|
Адреса автора |
<ADDRESS></ADDRESS> |
|
|
|
Великий шрифт |
<BIG></BIG> |
|
|
|
Маленький шрифт |
<SMALL></SMALL> |
|
|
СПИСКИ |
|||
|
|
Неврегульований |
<UL><LI></UL> |
(<LI> перед кожним елементом) |
|
|
Компактний |
<UL COMPACT></UL> |
|
|
|
Тип мітки |
<UL TYPE=DISC|CIRCLE|SQUARE> |
(для всього списку) |
|
<LI TYPE=DISC|CIRCLE|SQUARE> |
(цей і подальші) |
||
|
|
Нумерований |
<OL><LI></OL> |
(<LI> перед кожним елементом) |
|
|
Компактний |
<OL COMPACT></OL> |
|
|
|
Тип нумерації |
<OL TYPE=A|a|I|i|1> |
(для всього списку) |
|
<LI TYPE=A|a|I|i|1> |
(цей і подальші) |
||
|
|
Перший номер |
<OL START=?> |
(для всього списку) |
|
<LI VALUE=?> |
(цей і подальші) |
||
|
|
Список визначень |
<DL><DT><DD></DL> |
(<DT>=термін, <DD>= визначення) |
|
|
Компактний |
<DL COMPACT></DL> |
|
|
|
Меню Меню |
<MENU><LI></MENU> |
(<LI> перед кожним елементом) |
|
|
Компактне |
<MENU COMPACT></MENU> |
|
|
|
Каталог Каталог |
<DIR><LI></DIR> |
(<LI> перед кожним елементом) |
|
|
Компактний |
<DIR COMPACT></DIR> |
|
|
ТАБЛИЦІ |
|||
|
|
Визначити таблицю |
<TABLE></TABLE> |
|
|
|
Окантовка таблиці |
<table border=?></TABLE> |
|
|
|
Окантовка таблиці |
<TABLE CELLSPACING=?> |
|
|
|
Відстань між осередками |
<TABLE CELLPADDING=?> |
|
|
|
Доповнення осередків |
<TABLE WIDTH=?> |
(у точках) |
|
|
Ширина у відсотках |
<TABLE WIDTH="%"> |
(відсотки від ширини сторінки) |
|
|
Рядок таблиці |
<TR></TR> |
|
|
|
Вирівнювання |
<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM> |
|
|
|
Комірка таблиці |
<TD></TD> |
(повинна бути усередині рядка) |
|
|
Вирівнювання |
<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM> |
|
|
|
Без зміни рядка |
<TD NOWRAP> |
|
|
|
Розтягання по колонці |
<TD COLSPAN=?> |
|
|
|
Розтягання по рядку |
<TD ROWSPAN=?> |
|
|
|
Бажана ширина |
<TD WIDTH=?> |
(у точках) |
|
|
Ширина в процентах |
<TD WIDTH="%"> |
(відсотки від ширини сторінки) |
|
|
Колір комірки |
<TD BGCOLOR="#$$$$$$"> |
|
|
|
Заголовок таблиці |
<TH></TH> |
(як дані, але жирний шрифт і центрівка) |
|
|
Вирівнювання |
<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM> |
|
|
|
Без зміни рядка |
<TH NOWRAP> |
|
|
|
Розтягання по колонці |
<TH COLSPAN=?> |
|
|
|
Розтягання по рядку |
<TH ROWSPAN=?> |
|
|
|
Бажана ширина |
<TH WIDTH=?> |
(у точках) |
|
|
Ширина в відсотках |
<TH WIDTH="%"> |
(відсотки від ширини таблиці) |
|
|
Колір комірки |
<TH BGCOLOR="#$$$$$$"> |
|
|
|
Заголовок таблиці |
<CAPTION></CAPTION> |
|
|
|
Вирівнювання |
<CAPTION ALIGN=TOP|BOTTOM> |
(зверху/знизу таблиці) |
Вопросы для самоконтроля
1. Абзацы разметки HTML.
2. Авторский стиль редактирования разметки HTML.
3. Адреса разметки HTML.
4. Вложенные списки разметки HTML.
5. Внутренние рисунки разметки HTML.
6. Гипертекст. Гипертекстовая технология, браузеры разметки HTML.
7. Гипертекстовые редакторы.
8. Графические редакторы разметки HTML.
9. Соединение с другими документами, гипертекстовые ссылки.
10. Соединение с разделами текущего документа разметки HTML.
11. Заголовки документов разметки HTML.
12. Заголовки разделов документов разметки HTML.
13. Внешние рисунки, звуки и мультипликация разметки HTML
14. Инструменты WEB-дизайна.
15. Логические стили разметки HTML.
16. Язык HTML - Hyper Text Markup Language.
17. Язык гипертекстовой разметки HTML.
18. Ненумерованные списки разметки HTML.
19. Нумерованные списки разметки HTML
20. Основные элементы языка HTML, теги.
21. Основные понятия WEB-дизайна.
22. Прерывание сроки разметки HTML.
23. Различные стили внутри гиперссылка разметки HTML.
24. Специальные символы разметки HTML.
25. Списки определений разметки HTML.
26. Списки разметки HTML.
27. Создание WEB-документов на языке гипертекстовой разметки HTML.
28. Создание ВЕБ-документов на языке HTML
29. Стили: логические, физические стиле разметки HTML.
30. Структурные элементы WEB-документа.
31. Текстовые блоки разметки HTML.
32. Технологии и инструменты ВЕБ-дизайна
33. Физические стили разметки HTML.
34. Формы разметки HTML.
35. Цитаты разметки HTML.
36. Что такое URL (Uniform Resource Locator)?
37. HTML документы: запись, создание, редактирование и хранение.
38. WEB-узел (WEB-сайт).
39. Web-документ.