- •Пояснительная записка
- •Введение html редакторы
- •Что такое html?
- •Кто создал html?
- •При помощи чего создаются html-страницы?
- •Визуальные редакторы или wysiwyg (What You See Is What You Get — Что видишь, то и получаешь)
- •Текстовые html-редакторы
- •Урок 1. Как устроен сайт. Делаем первую страницу.
- •Урок 2. Оформляем html-страницу и форматируем текст.
- •Шаг 1. Меняем фон html-страницы и цвет текста
- •Шаг 2. Форматируем текст
- •Урок 3. Располагаем элементы на странице.
- •Урок 4. Соединяем html-страницы между собой.
- •Урок 5. Структура html документа
- •Заголовок документа - тег head и его элементы
- •Тело документа - тег body
- •Урок 6. Форматирование текста
- •Теги разделения на абзацы и переноса строки
- •Теги, выделяющие текст курсивом
- •Теги, выделяющие текст полужирным шрифтом
- •Теги, выделяющие текст подчеркиванием
- •Теги, выводящие текст моноширинным шрифтом
- •Теги, выводящие текст в верхнем и нижнем индексах
- •Тег font и его параметры
- •Совместное использование тегов
- •Урок 7. Форматирование текста (продолжение).
- •Теги, делающие текст заголовками
- •Теги разделения на абзацы и переноса строки
- •Теги, выделяющие текст курсивом
- •Теги, выделяющие текст полужирным шрифтом
- •Теги, выделяющие текст подчеркиванием
- •Теги, выводящие текст моноширинным шрифтом
- •Теги, выводящие текст в верхнем и нижнем индексах
- •Тег font и его параметры
- •Совместное использование тегов
- •Урок 8. Специальные символы.
- •Урок 9. Ссылки в html.
- •Ссылка - тег a
- •Урок 10. Создание списков.
- •Нумерованные списки
- •Маркированные списки
- •Списки определений
- •Вложенные списки
- •Списки списков
- •Урок 11. Работа с изображениями.
- •Размеры изображений
- •Отделение изображения от текста
- •Альтернативный текст
- •Изображение в качестве ссылки
- •Урок 12. Работа с таблицами - тег table.
- •Создаем таблицу
- •Оформляем строки (tr) и ячейки (td)
- •Атрибуты таблиц
- •Атрибуты ячеек
- •Урок 13. Работа с таблицами сложной структуры.
- •Тег colspan - объединение столбцов
- •Вложенные таблицы
- •Специальные символы
- •Домашнее задание №1.
- •Домашнее задание №2.
- •Домашнее задание №3.
- •Домашнее задание №4.
- •Домашнее задание №5.
- •Домашнее задание №6.
- •Домашнее задание №7.
- •Домашнее задание №8.
- •Домашнее задание №9.
- •Домашнее задание №10.
- •Домашнее задание №11.
- •Домашнее задание №12.
- •Домашнее задание №13.
- •Домашнее задание №14.
- •Домашнее задание №15.
- •Домашнее задание №16.
- •Домашнее задание №17.
- •Домашнее задание №18.
- •Домашнее задание №19.
- •Домашнее задание №20.
- •Домашнее задание №21.
Урок 10. Создание списков.
Содержание урока:
Нумерованные списки
Маркированные списки
Списки определений
Вложенные списки
Нумерованные списки
Такой список представляет собой перечень "пронумерованный" каким-либо образом. Это могут быть арабские цифры, цифры римского алфавита или буквы. Чтобы указать браузеру, что список будет нумерованным, используются теги <ol></ol>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>. Пример кода для нумерованного списка:
<html>
<head>
<title>html списки</title>
</head>
<body>
<ol>
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ol>
</body>
</html>
Результат:
кошки
собаки
лошади
Как видите, по умолчанию нумерация ведется арабскими цифрами. Это можно изменить с помощью параметра type: - type="A" - нумерация заглавными латинскими буквами (A, B, C). - type="a" - нумерация прописными латинскими буквами (a, b, c). - type="I" - нумерация большими римскими цифрами (I, II, III) . - type="i" - нумерация маленькими римскими цифрами (i, ii, iii). Пример кода с римскими цифрами:
<html>
<head>
<title>html списки</title>
</head>
<body>
<ol type="I">
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ol>
</body>
</html>
Результат:
кошки
собаки
лошади
Если нам нужно начать нумерацию не с единицы, то следует использовать параметр start, в качестве значения которого указывается число, с которого будет начинаться список (если нумерация задается с помощью букв, то это число будет указывать на позицию в алфавите). Пример кода:
<html>
<head>
<title>html списки</title>
</head>
<body>
<ol type="I" start="3">
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ol>
</body>
</html>
Результат:
кошки
собаки
лошади
У тега <li> можно задать параметр value, который позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех последующих элементов. Пример кода:
<html>
<head>
<title>html списки</title>
</head>
<body>
<ol>
<li>красный</li>
<li>оранжевый</li>
<li>желтый</li>
<br>...............
<li value="7">фиолетовый</li>
</ol>
</body>
</html>
Результат:
красный
оранжевый
желтый
...............
фиолетовый
Маркированные списки
В маркированном списке вместо букв и цифр используются маркеры. Чтобы указать браузеру, что список будет маркированным, используются теги <ul></ul>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>. Пример кода для маркированного списка:
<html>
<head>
<title>html маркированные списки</title>
</head>
<body>
<ul>
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ul>
</body>
</html>
Результат:
кошки
собаки
лошади
По умолчанию маркер отображается в виде черного кружочка. Это можно изменить с помощью параметра type: - type="disc" - закрашенный кружочек. - type="circle" - пустой кружочек. - type="square" - закрашенный квадратик. Пример кода для маркированных списков:
<html>
<head>
<title>html маркированные списки</title>
</head>
<body>
<ul type="disc">
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ul>
<ul type="circle">
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ul>
<ul type="square">
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ul>
</body>
</html>
Результат:
кошки
собаки
лошади
кошки
собаки
лошади
кошки
собаки
лошади