- •Основы создания html и css документов в программе Aptana Studio 3.
- •Введение
- •Основы создания html и css документов
- •Структура html документа
- •Создание html-документа
- •Просмотр документа в окне браузера
- •Разметка текста с помощью html
- •Атрибуты тегов
- •Заголовки
- •Неупорядоченный список
- •Упорядоченный список
- •Многоуровневый список
- •Список определений
- •Теги strong и b
- •Теги em и I
- •Теги br и hr
- •Абсолютные адреса
- •Относительные адреса
- •Ссылка с якорем
- •Всплывающая подсказка
- •Вставка изображения
- •Размеры изображения
- •Альтернативный текст
- •Изображение-ссылка
- •Выравнивание содержимого ячеек
- •Объединение ячеек в таблице
- •Заголовок таблицы
- •Расстояние между ячейками
- •Селекторы
- •Краткий перечень css-команд
- •Задания на лабораторные работы
- •Форматирование текста
- •Варианты заданий на форматирование текста
- •Варианты заданий на списки
- •1 Вариант
- •2 Вариант
- •3 Вариант
- •4 Вариант
- •5 Вариант
- •6 Вариант
- •7 Вариант
- •8 Вариант
- •9 Вариант
- •10 Вариант
- •11 Вариант
- •12 Вариант
- •Варианты заданий на таблицы
- •Список литературы
Неупорядоченный список
Иначе неупорядоченный список называется маркированным и создается в HTML с использованием тега <ul> (англ. «unordered list»). Каждый элемент маркированного списка обозначается тегом <li>.
<ul>
<li>1 элемент списка</li>
<li>2 элемент списка</li>
<li>3 элемент списка</li>
</ul>
В программе Aptana Studio 3 достаточно набрать ul>li*3 и нажать Сtrl+E.
В окне браузера это выглядит следующим образом:
1 элемент списка
2 элемент списка
3 элемент списка
Используя атрибут type, HTML предлагает следующие маркеры для списка:
disс - стандартно используемый круг или, в некоторых браузерах, ромб;
circle - контур круга или ромба;
square - закрашенный прямоугольник.
Пример:
<ul>
<li type="сiгсlе">1 элемент списка <li>
<li type="disc">2 элемент списка </li>
<li type="square">3 элемент списка </li>
</ul>
В браузере это будет выглядеть следующим образом:
1 элемент списка
2 элемент списка
3 элемент списка
Упорядоченный список
Иначе упорядоченный список называется нумерованным и создается в HTML с использованием тега <ol> (англ. «ordered list»). Каждый элемент списка, как и элемент нумерованного списка обозначается тегом <li>.
<ol>
<li>1 элемент списка</li>
<li>2 элемент списка</li>
<li>3 элемент списка</li>
</ol>
В браузере это будет выглядеть следующим образом:
1 элемент списка
2 элемент списка
3 элемент списка
У нумерованного списка можно изменить вид нумерации. Для этого служит атрибут tуре, который принимает следующие значения:
type ="1" - нумерует арабскими цифрами (это стандартное значение);
type ="a" - нумерует строчными буквами;
type ="A" - нумерует заглавными буквами;
type ="i" - нумерует маленькими римскими цифрами;
type ="I" - нумерует заглавными римскими цифрами.
Атрибут start в теге <о1> указывает, с какой цифры начинается список. Если нужно определить новую стартовую точку для элементов списка нужно использовать атрибут value в теге <li>.
В следующем примере использованы все три возможности:
<ol start="10">
<li>1 элемент списка</li>
<li type="a" value="18">2 элемент списка</li>
<li type="I" value="10">3 элемент списка</li>
</ol>
В браузере это будет выглядеть следующим образом:
1 элемент списка
2 элемент списка
3 элемент списка
Многоуровневый список
Количество уровней в списках не ограничено. В многоуровневом списке можно использовать как упорядоченные, так и неупорядоченные списки.
Списки вкладываются друг в друга следующим образом: сначала нужно создать список первого уровня, а затем внутрь любого элемента этого списка, между тегами <li> и </li>, добавить список второго уровня:
<ol>
<li>1 элемент списка
<ul>
<li>1 элемент вложенного списка</li>
<li>2 элемент вложенного списка</li>
</ul>
</li>
<li>2 элемент списка</li>
</ol>
Выглядит это следующим образом:
1 элемент списка
1 элемент вложенного списка
2 элемент вложенного списка
2 элемент списка
Список определений
Список определений имеет особые вставки, но не содержит ни маркеров списка, ни нумерации. Список определений создаётся с помощью трёх тегов:
<dl> обозначает сам список определений;
<dt> обозначает термин;
<dd> обозначает определение термина.
Теги <dt> и <dd> пишутся парами внутри <dl>.
Например:
<dl>
<dt>Термин</dt>
<dd>Определение</dd>
<dt>Второй термин</dt>
<dd>И его определение</dd>
</dl>
