Занятие № 4 – 5 Начать обучение Тема: Списки. Атрибуты. Курс ведёт : Сургучёва Ирина Николаевна Для связи: E-mail: lara 1233@yandex. ru Красноярск - 2012 © Surgucheva Irina Skype: lovez_snov_irena
Приветствую Вас на курсе: «Основы сайтостроения на языках HTML и CSS» . Сегодня мы продолжим знакомство с языком HTML и познакомимся с тегами отвечающими за создание разных видов списков. А также познакомимся с таким понятием как атрибут(ы) тега и его(их) написание. Урок сложный и требует Вашей концентрации и внимания. Списки и их виды Атрибут тега. Правила написания. Нумерованный список Маркированный список Списки определений Многоуровневый список Подведение итогов
Список – это совокупность абзацев, которые содержат перечисления и оформлены в виде пунктов. В HTML выделяют три вида списков: нумерованный, маркированный и списки определений, хотя на мой взгляд можно выделить ещё один вид – многоуровневый список. Данный вид списка (многоуровневый) изучается в программе Word (по другому его можно назвать вложенный список, когда один вид списка вкладывается в другой) в HTML его не изучают, но иногда такой вид списка тоже нужен, поэтому мы его тоже рассмотрим. Примеры многоуровневого списка Примеры нумерованного списка 1. Иванов 2. Петров 3. Сидоров I. Иванов II. Петров III. Сидоров а) Иванов б) Петров в) Сидоров Примеры маркированного списка § Первый элемент § Второй элемент § Третий элемент • Первый элемент • Второй элемент • Третий элемент 1. Пункт первого уровня 1. 1. Пункт второго уровня 1. 2. Пункт второго уровня 2. Пункт первого уровня 2. 1. Пункт второго уровня Списки определений Определение текст определения, текст I. Пункт первого уровня а) Пункт второго уровня б) Пункт второго уровня II. Пункт первого уровня а) Пункт второго уровня
У тегов есть свои настройки, которые позволяют влиять на результат их работы. Эти настройки называются АТРИБУТАМИ. Атрибуты расширяют возможности отдельных тегов и более гибко управляют содержимым контейнеров. Атрибут может иметь одно или несколько значений. Таким образом общий вид команд HTML выглядит так: <ТЕГ атрибут="значение"> Для атрибутов тегов используются значения по умолчанию Когда для тега не добавлен какой-либо допустимый атрибут, это означает, что браузер в этом случае будет подставлять значение, заданное по умолчанию. Если вы ожидали получить иной результат на web-странице, проверьте, возможно, следует явно указать значения некоторых атрибутов. Атрибуты без значений Допустимо использовать некоторые атрибуты у тегов, не присваивая им никакого значения. Так например знакомый нам уже тег абзаца <p> имеет атрибут align – выравнивание. Раньше мы не использовали атрибут выравнивание у тега <p>, а просто разбивали текст на абзацы. Теперь текст можно выровнять, а для этого, всего лишь нужно добавить атрибут к тегу с определенным значением. Давайте рассмотрим как это выглядит.
<p align="center">Мир животных Австралии </p> атрибут тега тег абзаца значение атрибута закрывающийся тег текст Порядок написания тега с атрибутами на примере тега абзаца <p></p>: 1. Открывается сам тег (в данном случае у нас <p 2. Ставим пробел и прописываем атрибут для тега (в данном примере align (выравнивание) 3. Далее без пробелов ставим знак =(что означает присвоить) и в двойных кавычках прописываем значение атрибута – center (что означает выравнивание по центру). 4. Пишем какой-либо текст. 5. Внимание! Закрывается всегда только сам тег. Результатом написания тега <p> с атрибутом, будет – заголовок Мир животных Австралии выровненный по центру.
Порядок атрибутов в тегах Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет. Поэтому теги вида по своему действию равны. Пример: (вставка изображения) тег <img> одиночный и имеет несколько атрибутов, подробнее мы изучим его позже, пока он служит лишь примером <img src="/images/title. gif" width="438" height="118"> <img height="118" width="438" src="/images/title. gif"> Перестановка атрибутов местами не влияет на конечный результат и за ошибку не считается! Формат атрибутов Каждый атрибут тега относится к определенному типу (например: текст, число, путь к файлу и др. ), который обязательно должен учитываться при написании атрибута. Так, в примере упоминается тег <img>, он добавляет на веб-страницу рисунок, а его атрибут width задает ширину изображения в пикселах. Если поставить не число, а нечто другое, то значение будет проигнорировано и возникнет ошибка при проверки документа. Теги можно писать как прописными, так и строчными символами Любые теги, а также их атрибуты нечувствительны к регистру, поэтому форму записи вы вольны выбирать сами, как писать — <BR>, <Br> или . В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта.
У атрибута align тега <p> значений несколько: <p align="center“>Этот текст будет расположен по центру</p> <p align= "left" >Этот текст будет расположен по левому краю</p> <p align= "right" >Этот текст будет расположен по правому краю</p> <p align= "justify" >Этот текст будет расположен по ширине</p> Задание: продолжаем редактировать статью, используя атрибут align произвести выравнивание в документе. 1. Главный заголовок выровнять по центру 2. Основные текстовые абзацы описание программ, выровнять по ширине 3. Все подзаголовки выровнять по левому краю
Итак, первый вид списка, который мы рассмотрим – это нумерованный список. Списки данного типа представляют собой упорядоченную последовательность отдельных элементов. В нумерованном списке перед каждым элементов вставляется его номер. Вид нумерации зависит от браузера и может задаваться параметрами тегов списков. Для создания нумерованного списка следует использовать тег-контейнер <OL> и </OL>, внутри которого располагаются элементы списка. Открывающий и закрывающий теги списка обеспечивают перевод строки до и после списка, отделяя таким образом список от содержимого документа. Каждый элемент должен начинаться тегом <LI>. В теге <OL> могут быть указаны атрибуты TYPE и START. Синтаксис <ol> <li>Москва</li> <li>Киев</li> <li>Красноярск</li> </ol> Результат списка 1. Москва 2. Киев 3. Красноярск посмотреть использование атрибутов тега <ol>
Атрибут type тега <ol> задаёт вид списка: Значение атрибута Type Вид списка Type=1 Арабские цифры Type=A Прописные латинские буквы Type=a Строчные латинские буквы Type=I Большие римские цифры Type=i Маленькие римские цифры 1. 2. A. 3. B. C. Синтаксис <ol type="A"> <li>Москва</li> <li>Киев</li> <li>Красноярск</li> </ol> Пример 1 Результат A. Москва B. Киев C. Красноярск Синтаксис <ol type="I"> <li>Москва</li> <li>Киев</li> <li>Красноярск</li> </ol> Пример 2 I. II. i. III. ii. iii. Результат I. Москва II. Киев III. Красноярск a. b. c.
Атрибут START тега <OL> позволяет начать нумерацию списка не с 1. В качестве значения параметра START всегда должно указываться натуральное число, вне зависимости от вида нумерации списка. Например, использование тега <OL TYPE=A START=4> предполагает нумерацию списка с прописной латинской буквы D. Синтаксис <ol start="2"> <li> Золушка</li> <li>Красная шапочка</li> <li>Рапунцель</li> </ol> Результат 2. Золушка 3. Красная шапочка 4. Рапунцель Атрибут reversed Меняет нумерацию в списке на обратный порядок, вместо 1, 2, 3 будет выводиться 3, 2, 1. Значения у данного атрибута нет. Синтаксис <ol reversed> <li> Золушка</li> <li>Красная шапочка</li> </ol> Результат 2. Золушка 1. Красная шапочка атрибут reversed у меня сработал только в Google Chrome, а в Internet Explorer не отобразился.
Ещё хотелось бы отметить, что если нумерованный список у Вас начинается с 1, то задавать атрибут start не нужно, так как это значение идёт по умолчанию. start применяется лишь в том случае, если нумерация нужна не с 1, а с 0 например или с другой цифры, о чём я уже упоминала. Пример использования тега <ol> с атрибутами Задание: создайте свой список, заархивируйте и отправьте мне через Виртуальную школу
В маркированном списке для выделения его элементов используются специальные символы, называемые маркерами списка. Вид маркеров определяется браузером. При создании вложенных списков браузеры автоматически используют маркеры разных видов для различного уровня вложенности. Иногда маркированные списки называют ненумерованными или неупорядоченными. Для создания маркированного списка используются теги <UL>, </UL>, внутри которых располагаются все элементы списка. Открывающий и закрывающий теги обеспечивают перевод строки до и после списка, отделяя, таким образом, список от остальных элементов документа. В теге <ul> есть один атрибут, который задаёт вид маркера. Атрибут TYPE может принимать значения: disc, circle, square. По умолчанию значение тега <ul> - это disc. Синтаксис <ul> <li>Роза</li> <li>Мимоза</li> <li>Ромашка</li> </ul> Результат • Роза • Мимоза • Ромашка
Синтаксис <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> кружок (disc) окружность (circle) квадрат (square)
Задание: создайте свой маркированный список, заархивируйте и отправьте мне через Виртуальную школу
Списки определений задаются с помощью тега-контейнера <DL>. Внутри контейнера тегом <DT> помечается определяемый термин, тегом <DD> - текст, раскрывающий значение термина. После тега <DT> не могут использоваться теги абзаца и заголовков. Как правило, текст определяемого термина, должен располагаться на одной строке. Текст, являющийся определением термина, выводится с новой строки с отступом вправо. Специальных атрибутов нет. Синтаксис <dl> <dt>Термин 1</dt> <dd>Определение термина 1</dd> <dt>Термин 2</dt> <dd>Определение термина 2</dd> </dl> Результат Термин 1 Определение термина 1 Термин 2 Определение термина 2 посмотреть пример списков определений в программе Notepad++ посмотреть пример списков определений в браузере
Задание: создайте свой список определений, заархивируйте и отправьте мне через Виртуальную школу
Многоуровневый список – это когда один список вкладывается в другой. И хотя в HTML его не выделяют бывает так, что он необходим. Для многоуровневого списка используются маркированные и нумерованные списки. посмотреть HTML код Задание: создайте свой многоуровневый список, заархивируйте и отправьте мне через Виртуальную школу
Сегодня мы с Вами познакомились с видами списков, атрибутами и их назначением. Научились писать более сложный код. Домашнее задание: 1. Создать любой нумерованный список 2. Создать любой маркированный список 3. Создать список определений 4. Создать многоуровневый список (меню ресторана): название ресторана (выровнять по центру) ниже список такого вида: I. Закуска • мясная нарезка • салат Калифорния • холодец II. Напитки и т. д. посмотреть Вам может понадобится еще один тег для работы – это тег переноса на другую строку - тег одиночный атрибутов у него нет и закрытия он не требует. Например используется для того, чтобы отделить заголовок от основного текста. 5. Отредактировать используя атрибут выравнивания абзаца <p> статью, которую мы редактировали на прошлом уроке. Все элементы списков в статье заключить в теги списка и убрать тег абзаца. 6. У вас должно получиться 5 разных документов, их все нужно заархивировать и отправить мне через Виртуальную школу.
посмотреть как это выглядит в браузере
