Маркированный и нумерованный список

Как работать с многоуровневым списком

Итак, разобравшись с тем, как создаётся, давайте посмотрим, как изменяется внешний вид многоуровневого списка.

Здравствуйте. Когда в нашем тексте присутствует перечисление чего-либо, нет ценнее инструмента, чем списки в Microsoft Word. Фактически, он делает все за вас, требуется лишь немного настроить его работу на свое усмотрение. А как это сделать – рассмотрим прямо сейчас.

В Ворде доступны два типа списков:

1. Маркированный список – каждый пункт отмечается маркером. Применяйте для перечисления чего-то или кого-то. Например, ингредиентов, адресов и т.п.
2. Нумерованный список – пункты отмечаются числами. Используют, когда имеет значение порядковый номер каждого элемента списка.

Чтобы начать вводить маркированный список – перейдите на новую строку. Наберите * (звездочка) и пробел . Появится первый маркированный элемент, можно вводить содержание первого пункта. Оно будет располагаться на расстоянии от маркера. Этот отступ можно регулировать на линейке, как мы .

Чтобы закончить текущий элемент списка и начать новый – нажмите Enter . Чтобы закончить ввод списка и перейти в обычный режим – нажмите Enter еще раз.

Есть еще один способ создания списка – нажать на ленте Главная – Абзац – Маркеры . Для завершения работы со списком, можно снова нажать эту кнопку.

Практически аналогично создается нумерованный список. Чтобы начать ввод – наберите 1. (один с точкой) и пробел . Появится первый пункт. Набирайте текст. Другой способ – на ленте Главная – Абзац – Нумерация .

Для начала следующего пункта, опять же, нажмите Enter . Для выхода из списка – еще раз Enter или кнопка «Нумерация» на ленте.

Многоуровневый список – это структура с одним или несколькими подчиненными списками. Выглядит это так:

Чтобы создать подчиненный элемент – создайте новый элемент списка и нажмите Tab . Маркер изменит свой вид и сместится немного вправо. Теперь вы работаете в списке второго уровня и все новые элементы будут создаваться тоже второго уровня. Чтобы вернуться на уровень выше – создайте новый элемент и нажмите Shift+Tab .

Таким образом, реализуются сложные списки. Самый распространенный пример – это оглавление, которое может быть абсолютно любой сложности.

Если вы уже набрали текст и посчитали, что лучше оформить его в виде списка – это будет легко сделать. Не нужно ничего переписывать или проставлять маркеры вручную. Выделите текст, который нужно оформить списком и нажмите на ленте «Маркеры» или «Нумерация». Программа преобразует ваши данные автоматически, каждый абзац будет элементом списка.

Если выбираете нумерацию, правильные цифры тоже установятся автоматически.

Иногда случается, что содержимое списка нужно отсортировать. К примеру, вы произвольно ввели перечень сотрудников, а потом решили, что они должны располагаться по алфавиту от А до Я. Делается это так:

1. Выделяем список, который нужно сортировать

1. Нажимаем на ленте Главная – Абзац – Сортировка
2. Выбираем сортировку по абзацам, тип – текст, по возрастанию. Получаем результат

Если вы сортируете нумерованный список – числа местами не меняются, сохраняя естественный порядок нумерации.

Вы можете изменить внешний вид маркера, который установлен по умолчанию. Для этого кликните на стрелке вниз возле кнопки «Маркеры». В открывшемся окне выберите один из предложенных вариантов, используйте любой символ из встроенной библиотеки, или загрузите свою картинку для установки в качестве маркера.

Аналогично можно изменить вид цифр для нумерованных списков. Нажимаем на стрелке вниз у кнопки «Нумерация», выбираем арабские или римские цифры, буквы. Нажмите «Определить новый формат номера, чтобы настроить список более детально.

Для гибкой настройки многоуровневого списка – нажмите на стрелку возле кнопки «Многоуровневый список».

Вам будет предложено несколько вариантов структуры для таких списков, но можно сверстать и собственное оформление. Нажмите «Определить новый многоуровневый список», выбирайте в окне поочередно каждый уровень и задавайте его внешний вид.

По умолчанию, программа самостоятельно проставляет нумерацию для элементов списка. Word пользуется своими алгоритмами работы со списками, потому автоматическая нумерация иногда может дать неожиданный результат. Но выход есть, вы можете переопределить какой-то из элементов списка, после чего нумерация будет снова производиться в логической последовательности. Рассмотрим частные примеры.

Частые ошибки авторов

1. После точки пишут маленькую букву (это как раз нумерованные списки).
2. В маркированном списке после точки с запятой пишут заглавную букву.
3. Не согласовывают все элементы перечня по одному падежу. Например, если нужно поставить все элемента списка в родительный падеж, то именительный не должен встречаться.

Пример 8. Согласование времен

Чтобы идеально выполнить домашнее задание нужно соблюдение условий (т. е. соблюдение «кого? чего?» родительный падеж):

• тишины в комнате;
• книги и тетради на столе;
• яркого света.

Когда все элементы перечня правильно согласованы, то список написан по правилам. Проблемы с согласованием начинаются, когда перечень содержит много громоздких предложений.

Иногда встречаются и совсем неудачные работы, мы разбираем на страницах Редачим некоторые статьи.
На перечни в текстах нужно обращать внимание обязательно. А если используйте списки в несколько уровней, то главными будут цифры с точкой, а вложения оформляются маленькими буквами со скобкой

Чтобы правильно проанализировать списки, откройте Word  и просмотрите варианты оформления.

Написание чисел

По умолчанию нумерованный список имеет определённый вид: вначале идет число, затем точка и после этого через пробел отображается текст. Такая форма написания наглядна и удобна, но некоторые разработчики предпочитают видеть другой способ оформления нумерации списков. А именно, чтобы вместо точки шла закрывающая скобка, как продемонстрировано на рис. 2 или нечто подобное.

Рис. 2. Вид нумерованного списка со скобкой

Стили позволяют поменять вид нумерации списков с помощью свойств content и counter-increment. Вначале для селектора ol требуется задать counter-reset: item, это нужно для того, чтобы нумерация в каждом новом списке начиналась заново. В противном случае, нумерация будет продолжена и вместо 1,2,3 можно будет увидеть 5,6,7. Значение item это уникальный идентификатор счётчика, мы его выбираем сами. Далее необходимо спрятать исходные маркеры через стилевое свойство list-style-type со значением none.

Свойство content, как правило, работает в сочетании с псевдоэлементами ::after и ::before. Так, конструкция li::before говорит о том, что перед каждым элементом списка необходимо добавить какое-то содержание (пример 2).

Пример 2. Создание своей нумерации

Свойство content со значением counter(item) выводит число; добавляя скобку, как показано в данном примере, получим требуемый вид нумерации. counter-increment необходим для увеличения номера списка на единицу

Обратите внимание, что везде используется один и тот же идентификатор с именем item. Окончательный код показан в примере 3

Пример 3. Изменение вида списка

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Списки</title>
<style>
ol {
list-style-type: none; /* Убираем исходные маркеры */
counter-reset: item; /* Обнуляем счетчик списка */
}
li::before {
content: counter(item) ‘) ‘; /* Добавляем к числам скобку */
counter-increment: item; /* Задаём имя счетчика */
}
</style>
</head>
<body>
<ol>
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
<li>Четвертый</li>
</ol>
</body>
</html>

Приведённым способом можно делать любой вид нумерованного списка, например, брать число в квадратные скобки, в стилях при этом изменится только одна строка.

Внешняя таблица стилей

Внешняя таблица стилей хранится в отдельном файле с расширением CSS. Это самый эффективный способ, т. к. он полностью отделяет правила форматирования от ваших HTML-страниц. Он также позволяет легко применять одни и те же правила ко многим страницам.
Отдельный файл с таблицей стилей прикрепляется к HTML-документу с помощью тега <link>. Это одинарный тег, который располагается внутри элемента <head>. Элемент должен использовать три следующих атрибута. В атрибуте href указывается абсолютный или относительный URL-адрес файла CSS. Атрибут rel определяет отношение между НТМL-страницей и связанным файлом. При создании ссылки на файл CSS он должен иметь значение stylesheet, показывающее, что присоединяемый таким образом документ содержит таблицу стилей. Атрибут type определяет тип документа, на который указывает ссылка. В нем должно быть указано значение text/css.

CSS, как и HTML, не является языком программирования. Это язык каскадных таблиц стилей, то есть он позволяет выборочно применять нужные стили к элементам в HTML-документах. Например, чтобы выбрать все элементы <p>, т.е. параграфы на HTML-странице и окрасить их текст в красный цвет, вы должны написать на CSS следующее:

Давайте поместим эти три строки CSS в новый файл в любом текстовом редакторе (например Notepad++), а затем сохраним файл как style.css в папке styles.

Чтобы применять CSS к нашему HTML-документу, вставьте следующую строку в шапку, то есть между тегами <head> и </head>:

Создание новых стилей текста

На уроке 44 я перечислила 4 способа создания нового стиля текста:

Воспользуемся первым способом.

Предполагаем, что текст пункта 2.1.3 будет основой для пользовательского многоуровневого списка.

Шаг 1. Выделяем (урок 2) текст пункта 2.1.3 и присваиваем тексту стиль «Обычный»:

Стиль «Обычный» – базовый стиль без каких-либо дополнительных наворотов, поэтому лучше работать с ним.

Шаг 2. Выделяем первый абзац пункта 2.1.3 и вызываем диалоговое окно «Создать стиль» (лента Главная → группа команд Стили → кнопка выпадающего меню → команда Создать стиль):

Шаг 3. Вводим имя стиля «Список_номер»:

Шаг 4. Повторяем шаги 2-3 для второго абзаца пункта 2.1.3 и вводим имя стиля «Список_буква»:

(!) Обратите внимание, что в рабочем окне «Стили» есть только что созданный нами стиль «Список_номер». Что имеем в сухом остатке:

Что имеем в сухом остатке:

А имеем два новых стиля текста, по своим характеристикам абсолютно идентичных стилю «Обычный». А вот нумерации нет!

Виды списков в Word

Для начала немного теории. Всего в Microsoft Word существует 3 вида списков:

• маркированные;
• нумерованные;
• многоуровневые.

В маркированных по умолчанию используются точки. Но вместо них можно выбрать галочки, стрелочки, квадратики и другие спецсимволы.

С нумерованными все понятно уже по названию. Обычно здесь используются латинские цифры, хотя вместо них можно поставить римские цифры и даже английские буквы.

Наконец, многоуровневые – это те, которые состоят из подуровней. Например, есть пункт 1, а затем идут 1а, 1б и т.д. В данном случае они могут быть как маркированными, так и нумерованными.

На этом краткий курс теории завершен, переходим к практике.

Создавать списки в Word проще простого 2003

Например, вам необходимо создать маркированный список в Word 2003. Напишите пару строк, выделите их и нажмите следующий значок:

Если у вас его нет, тогда выберите в верхнем меню пункты «Вид – Панели инструментов» и поставьте галочку в пункте «Форматирование».

• Если хотите вместо точек выбрать другой символ, тогда откройте в меню пункты «Формат-Список».

Перейдите на вкладку «Маркированные» и выбирайте, что вам больше нравится. Если ничего не нравится, тогда выделите наиболее подходящий вариант и нажмите кнопку «Изменить».

Здесь вы можете поменять отступы списка в Word (это важно при оформлении рефератов, курсовых и дипломных работ), значок или рисунок.

В последнем случае на выбор предлагаются разнообразные по цвету и форме символы, поэтому выбрать всегда будет из чего.

• Теперь чтобы сделать в Ворде список по алфавиту, выберите в верхнем меню пункты «Таблица – Сортировка».
• В открывшемся окошке поставьте галочку напротив пункта «По возрастанию» и нажмите «ОК».

Готово. Вот так легко делается список по алфавиту в Ворде.

Чтобы создать нумерованный список в Ворде 2003, выделите новые пару строк (или те же самые) и нажмите на этот значок (о том, как его отобразить написано чуть выше):

В результате вместо точек будут отображены латинские цифры. Если хотите поставить что-то другое, снова зайдите в «Формат-Список», откройте раздел «Нумерованные» и выбирайте, что больше нравится.

Сделать многоуровневый список в Ворде 2003 тоже несложно. Выделите пару строк, выберите те же пункты в меню и перейдите в раздел «Многоуровневый». Затем выделите понравившийся вариант и нажмите «ОК».

Изначально он будет обычным. Чтобы сделать его многоуровневым, выделите нужный пункт и нажмите Tab. Он «подвинется» чуть право и буква или цифра напротив него поменяется. Чтобы было понятнее, посмотрите представленный ниже скриншот.

1. Скопируйте в текстовый редактор название книг или других источников.
2. Создайте нумерованный список.
3. Отсортируйте его в алфавитном порядке.

Это тоже интересно: Как открыть файл docx в Ворде 2003?

1. Выделите любой фрагмент текста, перейдите в раздел «Главная» и нажмите на следующий значок:
2. Если хотите убрать его, щелкните на значок еще раз.

Обратите внимание: рядом с этим значком есть маленькая стрелочка. При нажатии на нее откроются настройки, где вы можете выбрать другой символ – галочку, квадратик и т.д

В данной версии текстового редактора это уже реализовано гораздо удобнее.

• Чтобы сделать нумерацию в Ворде 2007, выделите нужные строки и щелкните на этот значок:
• Если хотите подобрать другое оформление, нажмите на маленькую стрелочку (как в предыдущем примере) и выбирайте, что больше нравится – например, латинские цифры со скобками.
• Аналогичным образом создается многоуровневый список в Word 2007. В данном случае нужно щелкнуть на этот значок и выбрать понравившееся оформление:
• Затем выделите по очереди нужные пункты и, нажимая кнопку Tab, настройте его так, как он должен выглядеть.
• Наконец, чтобы сделать список литературы в Ворде 2007 по алфавиту:

1. Скопируйте перечень книг в текстовый редактор Word.
2. Выделите их и создайте нумерованный список.
3. Чтобы отсортировать его по алфавиту, нажмите на следующий значок, выберите пункт «По возрастанию» и нажмите «ОК».

Готово. Как видите, расставить в Ворде список по алфавиту совсем несложно. Идем дальше.

Это тоже интересно: Ошибка при направлении команды приложению Word 2007

Инструкция для Ворда 2010

Внешне он совершенно не отличается от текстового редактора версии 2007 года. То же самое касается пакетов Microsoft Word 2013 и 2016. Они выглядят абсолютно идентично. Поэтому создание списков в Word 2010, 2013 и 2016 осуществляется точно так же, как и в 2007 версии.

Так что если надо сделать список литературы в Ворде 2010 и упорядочить его по алфавиту, следуйте описанной выше инструкции.

Вместо заключения

Как видите, все проще простого, главное здесь – разобраться первый раз. А затем вы будете выполнять эти операции автоматически, даже не задумываясь о том, что и как делается.

Виды

В тексте используются два вида списков: нумерованный и маркированный. Активно применяются оба вида. Хотя различить их можно визуально, но они несут разную смысловую нагрузку.

Нумерованный список в HTML используется при перечислении заранее известного количества пунктов, и обосабливаются они друг от друга цифрами. Часто приводится их количество в предшествующем списку предложении. Пример: «Над профессиональным сайтом работают три вида специалистов:

1. Веб-дизайнер.
2. Специалист по контенту.
3. Веб-программист.»

Маркированный список обосабливает пункты друг от друга маркерами — мелкими графическими элементами (точки, галочки). Применяется в тех случаях, когда количество перечислений не определено и подразумевается существование других: «Наиболее доступно для новичков, изучающих HTML, в своих книгах излагают материал следующие авторы:

• Ч. Муссиано;
• Б. Хеник;
• Н. Комолова;
• Е. Полонская».

Следовать этому правилу необходимо в большинстве случаев, но есть и исключения, когда оно противоречит дизайну создаваемого сайта или того требует контекст.

Маркированные html-списки

Маркированный список формируется парным тегом
<ul>
(от англ. unordered list – неупорядоченный список). Сам элемент
«ul» используется, как контейнер для пунктов списка, которые формируются, как и в случае с нумерованными
списками, парными тегами <li> и располагаются друг за другом.

Маркированный список вместо цифр и букв использует маркеры в виде кружков. Изменить внешний вид маркеров можно при помощи стилей
CSS. Что касается атрибута type, то его в
HTML 5 убрали. Так что, остались только универсальные атрибуты и атрибуты-события.

Код, содержащий элемент «ul», показан в примере №2.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Маркированный список</title>
</head>
<body>
	<em style="color: green">Весенние месяцы:</em>
	<!-- Задаем фон, чтобы визуально увидеть область,  
	занимаемую списком, как блочным элементом -->
	<ul style="background-color: yellow">
		<li>март</li>
		<li>апрель</li>
		<li>май</li>
	</ul>
</body>
</html>

Пример №2. Использование элемента «ul»

Нумерованные html-списки

В HTML 5 используется три вида списков: нумерованный, маркированный и список определения.

Нумерованный список формируется парным тегом
<ol>
(от англ. ordered list – упорядоченный список). Сам элемент
«ol» используется, как контейнер для пунктов списка, которые формируются парными тегами
<li>
(от англ. list item – пункт списка)
и располагаются друг за другом.

По умолчанию пункты списка нумеруются браузером по порядку, начиная с единицы. Если нумерацию нужно начать не с единицы, то используется
атрибут start, который задает число, с которого будет начинаться нумерованный список. В
качестве значения атрибут принимает целые числа. Можно также изменить порядок нумерации на обратный. Для этого служит атрибут
reversed, который используется без значений. Атрибут введен в HTML 5 и работает
во всех браузерах, кроме IE.

Имеется также возможность устанавливать вид маркера нумерованного списка. Для этого используется атрибут
type, который может принимать значения «A | a | I | i | 1», которые,
соответственно, означают:

• заглавные латинские буквы,
• строчные латинские буквы,
• заглавные римские цифры,
• строчные римские цифры,
• арабские цифры.

Поскольку все перечисленные значения, и не только, могут быть с легкостью установлены через стили CSS, использование
атрибута type, по мнению автора, не целесообразно, хотя и допускается в HTML 5.

Использование нумерованного списка показано в примере №1.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Нумерованный список</title>
</head>
<body>
	<em style="color: green">Весенние месяцы по порядку:</em>
	
	<ol start="3" title="Весенние месяцы">
		<li>март</li>
		<li>апрель</li>
		<li>май</li>
	</ol>
	
	<em style="color: red">Летние месяцы в обратном порядке:</em>
	
	<!-- Перечисляем в обратном порядке. В IE не работает! -->
	<ol start="8" reversed>
		<li>август</li>
		<li>июль</li>
		<li>июнь</li>
	</ol>
</body>
</html>

Пример №1. Использование элемента «ol»

Кстати, браузеры отображают все списки как блочные элементы, поэтому при отображении примера отчетливо видны вертикальные отступы. Попробуйте
набрать код самостоятельно, задайте спискам желтый фон и посмотрите результат.

Нумерованный список

Чтобы создать нумерованный список используйте теги <ol> и <li>. Тег ol — это контейнер нумерованного списка. Тег li — элемент списка.

1. Выучить HTML
2. Добавить CSS
3. Освоить JavaScript

Исходный код нумерованного списка

Типы нумерации в HTML списке

В HTML доступны 5 типов нумерации в списках. Чтобы изменить тип нумерации используйте атрибут type. Тип нумерации можно задавать как для списка в целом, так и для конкретных его элементов.

Разные типы нумерации в списках:

type=»I» Первый Второй Третий

type=»i» Первый Второй Третий

type=»1″ Первый Второй Третий

type=»A» Первый Второй Третий

type=»a» Первый Второй Третий

Другие варианты нумерации, включая греческую, еврейскую, японскую, с ведущими нулями и т.д. можно получить используя CSS свойство list-style-type.

Как создать списки в Word 2007, 2010, 2013: маркированный, нумерованный, многоуровневый

Для создания списка в Word необходимо на вкладке «Главная» в группе «Абзац» нажать на одну из кнопок, соответствующей виду списка: маркированному, нумерованному, многоуровневому.

Как создать маркированный список в Word?

Для создания маркированного списка нажмите кнопку «Маркеры» — в тексте появится маркер, либо установленный по умолчанию (черный круг), либо последний из использованных вами. Для выбора типа маркере необходимо нажать на стрелку рядом с кнопкой «Маркеры». В открывшемся окне нужно выбрать интересующий вас тип маркера. Также, при необходимости, вы можете определить новый маркер, нажав на соответствующую кнопку.

Новый маркер может быть задан на основе символа одного из шрифтов, либо на основе рисунка.

Наиболее оригинальные маркеры могут быть заданы на основе рисунка. Нажмите кнопку «Рисунок», затем выберите в списке понравившийся вариант и нажмите «ОК» в этой и следующей форме.

Как создать нумерованный список в Word?

Для создания нумерованного списка нажмите кнопку «Нумерация» — в тексте появится элемент нумерации, либо установленный по умолчанию (число), либо последний из использованных вами. Для выбора типа нумерации необходимо нажать на стрелку рядом с кнопкой «Нумерация». В открывшемся окне нужно выбрать интересующий вас тип нумерации. Также, при необходимости, вы можете определить новый формат номера, нажав на соответствующую кнопку.

Новый маркер может быть задан на основе чисел, букв или слов. В поле «Формат номера» вы можете адаптировать формат номера под свои нужды — заменить точку на тире или убрать ее.

Как создать многоуровневый список в Word?

Для создания многоуровневого списка нажмите кнопку «Многоуровневый список» — откроется список основных вариантов построения многоуровневой нумерации. Вы можете выбрать один из них, или определить новый многоуровневый список, нажав на соответствующую кнопку.

В открывшейся форме создания нового многоуровневого списка вы можете последовательно пройти интересующие вас уровни и задать необходимые вам параметры — вы сможете увидеть весь набор параметров, нажав на кнопку «Больше» в левом нижнем углу. В частности, вы можете связать уровень списка со стилем заголовка (это удобно, если вы делаете структуру разделов документа и собираетесь затем автоматически собрать оглавление), или другой стиль.

Как работать с многоуровневым списком?

Когда вы добавите многоуровневый список в документ, вы сможете понижать и повышать уровень элемента списка с помощью кнопок «Увеличить отступ» (если вам нужно сместить элемент списка на уровень вниз) и «Уменьшить отступ» (если вам нужно сместить элемент списка на уровень вверх).

ШАГ 7: внешний CSS

Для создания отдельного файла таблицы стилей нам нужен другой
пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню
«Файл» в редакторе , для создания пустого файла. (Если вы
используете TextEdit, не забудьте сделать его текстовым снова,
используя меню Format.)

Затем вырежьте и вставьте все содержимое внутри <style> из
HTML в это новое окно. Не копируйте элементы разметки <style>
и </style>. Они принадлежат HTML коду, а не CSS. В новом окне
у вас теперь должен быть полная таблица стилей:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Выберите “Сохранить как…” из меню «Файл», убедитесь что вы в той
же директории/папке что и файл mypage.html, и сохраните таблицу
стилей под именем “mystyle.css”.

Теперь вернитесь к HTML коду. Уберите все содержимое от
<style> до </style> включительно и замените убранное
элементом <link> как показано (строка
5):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>

Такая конструкция скажет браузеру о том, что таблица стиле
располагается в файле под названием “mystyle.css”, и поскольку
директория не упомянута, браузер будет искать этот файл там же, где
лижит HTML файл.

Если вы сохраните файл и обновите его в браузере, то не должно
произойти никаких изменений: страница по прежнему использует то же
оформление что и в прошлый раз, но на этот раз оформление хранится
во внешнем файле.

Конечный резульат

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты,
например Блокнот от Windows, TextEdit на Mac или KEdit под KDE
вполне подойдут под задачу. Как только Вы поймете основные
принципы, вы можете переключиться на использование более
продвинутых инструментов разработки, например на такие коммерческие
программы как Style Master или DreamWeaver. Но для создания первого
CSS файла не стоит отвлекаться на множество расширенных
возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или
OpenOffice. Эти программы обычно создают файлы, которые не могут
быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные
текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового
редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и
наборе в нем следующего текста:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

Вам не обязательно это перенабирать — вы можете просто
скопировать и вставить текст с этой страницы в редактор.

(Если вы используете TextEdit на Макинтоше, не забудьте указать
TextEdit’у, что это действительно простой текстовый файл, открыв
меню Format и выбрав опцию “Make plain text”.)

Первая строчка нашего HTML файла говорит браузеру
о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем
случае — это HTML версии 4.01.

Слова между < и > называются тэгами и как вы
можете видеть, документ содержится между <html> и
</html> тэгами. Между <head> and </head>
находится различная информация, которая не отображается в самом
документе. Например там содержится заголовок документа. Позже мы
добавим туда и связь с CSS файлом.

Тэг <body> это место содержимого документа. В принципе,
все что находится внутри этого тэга за исключением текста между
<!— и —>, являющегося комментариями, будлет выведено на
экран. Комментарий браузером игнорируется.

Тэг <ul> в нашем примере задает отображение
“неупорядоченного списка” (Unordered List), т.е. списка, элементы
которого непронумерованы. Тэги <li> начинают “элементы
списка” (List Item). Тэг <p> является “параграфом”. А тэг
<a> — “якорь” (Anchor), с помощью которого создаются
гиперссылки.

Код HTML в редактор KEdit.

Давайте предположим, что данная страница будет одной из страниц
Веб сайта, состоящего из нескольких похожих страниц. Как мы и
договорились, эта страница будет содержать ссылки на другие
страницы нашего гипотетического сайта, уникальное содержимое и
подпись.

Выберите “Сохранить как…” или “Save As…” из выпадающего меню
Файл или File, укажите каталог для сохранения файла (например
Рабочий Стол) и сохраните данный файл как “mypage.html”. Не
закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем
10.4, вы увидите опцию «Don’t append the .txt extension» в
диалоговом окне «Save as». Выберите эту опцию, потому что имя файла
“mypage.html” уже включает в себя расширение. Более новые версии
TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим
образом: найдите файл вашим файловым менеджером (Проводник, Windows
Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на
нем. Если вы делали все как описано то имя файла будет
“mypage.html”. У вас должен открыться файл в браузере,
установленном по умолчанию. (Если нет, то откройте браузер и
перетащите файл в его окно.)

Использование на практике

Разнообразные списки в «Ворде» не являются основной составляющей редактирования текста. Тем не менее пользователи очень часто применяют их

Маркировка помогает визуально выделить нужные моменты в тексте, на которые необходимо обратить внимание

Вообще, многоуровневый список – это самый сложный вариант. Помимо него, в Word есть еще нумерованные и маркированные. На практике они встречаются гораздо чаще. Первые используются для информации, которая является однотипной и может быть пронумерована. Вторые нужны для перечисления или данных, не подлежащих нумерации.

А вот многоуровневый список представляет собой перечень из нумерованных или маркированных составляющих. Обычно он используется для сложной классификации и упорядочивания данных. Большинство пользователей не работает с такими иерархическими списками, но это не отменяет возможности создания оных. Как быть, если вам потребовалось сделать тот или иной тип списка?

Собственные маркеры

Возможности HTML по типам маркеров сильно ограничены. Есть способ обойти это препятствие. Для этого вместо тегов <ol> и <ul> используется вставка картинок с указанием адреса на них и тегом обрыва строки <br /> на конце.

Предложенный способ только внешне на веб-странице выглядит как список, а на самом деле является его имитацией и альтернативой скучному стандартному набору HTML. Эта уловка не считается «плохим» кодом и беспрепятственно проходит валидацию.

Он подходит тем, кто хотя бы на начальном уровне владеет каким-либо графическим редактором (GIMP, Photoshop). Это необходимо чтобы самостоятельно рисовать графические объекты для использования их в качестве маркеров. С помощью редакторов также придется подгонять размер картинок под текст.

С целью обучения можно использовать чужие иконки на своих пробных страничках, но не применять на доступных для всеобщего обозрения сайтах, помня о законе об авторских правах. Существует достаточное количество источников, на которых использование графики в своих целях не ограничивается. Однако заимствование чужого материала считается дурным вкусом и не рекомендуется для создания более-менее профессионального сайта.