- •Тема 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. Ошибочная ссылка
Тема 7 Лекция09: основы web-дизайна
9.1. Пример документа в НТМL.
9.2.Заголовки документов
9.3. Заголовки разделов документов
9.4. Абзацы
9.5. Соединение с другими документами
9.6. URL - Uniform Resource Locator
9.7. Обращение к некоторым другим документам
9.8. Дополнительные возможности форматирования
9.8.1. Списки
9.8.2. Ненумерованные списки
9.8.3. Нумерованные списки
9.8.4. Списки определений
9.8.5. Вложенные списки
9.9. Авторский стиль редактирования
9.10. Цитаты
9.11. Адреса
9.12. Стили
9.13. Прерывание строки
9.14. Горизонтальная линия
9.15. Внутренние рисунки
9.16. Внешние рисунки, звуки и мультипликация
9.17. Наложение различных стилей
В седьмой теме "Основы WEB-дизайна" приводятся понятия WEB-дизайна, характеризуются инструменты WEB-дизайна: графические редакторы, язык гипертекстовой разметки HTML, рассматриваются вопросы создания WEB-документов на языке гипертекстовой разметки HTML.
В HTML документы записываются в ASCII формате и поэтому могут быть созданы и отредактированы в любом текстовом редакторе (например, любом редакторе или на IBM PC Emacs или vi на UNIX машинах).
Теговая модель структуры документов.
За основу модели разметки документов в HTML принята, так называемая теговая модель. Из материала предыдущего вопроса нам известно, что тег - это начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. НТМL - тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега лежит в угловых скобках (<і>). Чаще HTML-теги состоят из начального и конечного компонентов (парных тегов), между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/). Например, для тега стиля шрифта - курсив < і > закрывающая пара будет </ i>, для тега заголовка <ТІТLЕ> закрывающей парой будет </ ТІТLЕ>. Конечные теги никогда не содержат атрибутов. По своему значению парные теги близки к понятию скобок "begin / end" в универсальных языках программирования, задающие области действия имен локальных переменных и т.д. Парные теги, в совокупности с элементами страницы, заключенным между ними, образуют так называемый элемент (контейнер).
9.1 Пример документа в html
Любой гипертекст похож на книгу и может быть разбит на отдельные структурные элементы:
-
Собственно документ
-
Разделы, параграфы, пункты, подпункты
-
Абзацы
Для каждого из этих элементов в HTML существуют определенные стили, описывающие в каком виде пользователь увидит текст на экране. Пусть мы создали файл minihtml.html:
<BODY>
<TITLE> Пример HTML-текста </ TITLE>
<H1> Глава 1 </ H1>
<H2> Параграф 1. </ H2>
Добро пожаловать в HTML!
Здесь мы расскажем, как надо и как не надо писать гипертексты.
<P>
<H2> Параграф 2 </ H2> <P>
</ BODY>
Здесь вы можете увидеть, как выглядит этот текст.
Итак, Вы уже поняли, что:
-
Заголовок документа начинается с <TITLE> и заканчивается </ TITLE>.
-
Заголовок первого уровня (Главы) выделяется символами <H1> и </ H1>)
-
Заголовки дальнейших уровней (параграфы, пункты, подпункты и т.п.) - символами <Hx> и </ Hx>), где x - числа 2, 3 ...
-
Абзац - символами <P> (В версиях HTML, действующих сейчас, символа </ P> не существует! НО! Он может появится в последующих версиях!)
NOTE: HTML не различает, какими буквами набраны символы форматирования: <title> равносильно <TITLE> или <TiTlE>.
Не все стили поддержаны всеми WWW-browsers. Если browser не поддерживает стиль, то он его игнорирует. (Поэтому не страшно если Вы уже сейчас начнете пользоваться при форматировании абзацев символом </ P>. Ниже мы подробнее остановимся на этом вопросе.)
Основные элементы
Основной текст отделяется от сопроводительного символами:
<BODY> </ BODY>