HTML теги. HTML списки. Списки определений.
- 21.09.2012
- HTML теги
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена спискам определений HTML. Список определений формируется тегами <dl>, <dd>, <dd>.
Список определений. Формирования списка определений в HTML. Теги <dl>, <dd>, <dt>.Содержание статьи:
- Список определений. Формирования списка определений в HTML. Теги <dl>, <dd>, <dt>.
- Синтаксис списка определений
- Атрибуты тегов списка определений
- Другие HTML списки
- Пример формирования списка определений
Как говорилось ранее, в списки определений формируются тремя тегами <dl>, <dd>, <dt>. Списки определений — это одна из разновидностей HTML списков.
Тег <dl> формирует сам список определений. HTML элемент <dl> является блочным элементом, для блочных HTML элементов характерно то, что их размеры, то есть, высота и ширина, зависят от области, в которой они стоят. Внутри блочных элементов могут любы HTML элементы. Но внутри элемента <dl> могут располагаться только элементы <dd> и <dt>.
Тег <dd> предназначен для хранения определения термина списка определений. Элемент <dd> блочный HTML элемент, для блочных элементов характерно то, что их размеры зависят от области, в которой они стоят. Внутри элемента <dd> могут располагаться любые HTML элементы.
Тег <dt> служит для записи термина, которому дается определение. Элемент <dt> строчный HTML элемент, то есть, его ширина и высота зависят от содержимого контейнера <dt>. Внутри элемента <dt> могут располагаться любые строчные HTML элементы.
Если к спискам определений не применяются дополнительные стили и правила CSS, то браузер отобразит их шрифтом, заданным по умолчанию, но, определение от термина будет сдвинуто на 40 пикселов вправо.
Синтаксис списка определенийТеги <dl>, <dd>, <dt> являются парными HTML тегами, то есть для их корректной работы необходим закрывающий тег, но, у тегов <dd> и <dt> можно закрывающий тег не писать, хотя это считается дурным тоном.
<dl> <dt>Первый термин</dt> <dd>Определение первого термина</dd> <dt>Второй термин</dt> <dd>Определение второго термина</dd> </dl>
1 2 3 4 5 6 7 8 9 10 11 |
<dl>
<dt>Первый термин</dt>
<dd>Определение первого термина</dd>
<dt>Второй термин</dt>
<dd>Определение второго термина</dd>
</dl> |
У тегов <dd>, <dt>, <dl> имеются только универсальные HTML атрибуты и атрибуты событий HTML
Другие HTML спискиПомимо списка определений. Есть еще четыре HTML списка:
- Маркированный список – второе название не упорядоченный список, данный список HTML формируется тегами <ul>, <li>
- Нумерованный список – другое название упорядоченный список, этот HTML список формируется тегами <ol>, <li>
- Список директорий – данный вид HTML списка формируется при помощи тегов <dir>, <li>
- Список меню – этот список HTML формируется тегами <menu>, <li>
Тег <li> во всех этих случаях служит для формирования элементов списка или его пунктов
Пример формирования списка определений<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Пример использования тега DT</title> </head> <body> <dl> <dt>HTML</dt> <dd>Язык разметки гипертекста. Стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме. </dd> <dt>JavaScript</dt> <dd>Прототипно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript</dd> </dl> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Пример использования тега DT</title> </head> <body> <dl> <dt>HTML</dt> <dd>Язык разметки гипертекста. Стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме. </dd><dt>JavaScript</dt> <dd>Прототипно-ориентированный скриптовый язык программирования. Является диалектом языка ECMAScript</dd> </dl> </body> </html> |
Если вы скопируете пример в текстовый редактор(рекомендую Notepad++, бесплатный редактор с подсветкой синтаксиса), а затем запустите его в браузере, то увидите:
На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru
Возможно, эти записи вам покажутся интересными
неупорядоченные, упорядоченные и определения Самоучитель HTML
HTML-cписки в ХТМЛ-документах служат для вывода содержимого(контента) в виде списка.
Неупорядоченные списки обозначаются тегом <UL> элементы списка </UL>, а сами элементы списка тегом <LI> содержание элемента </LI>, каждый список должен содержать не менее 1 элемента.
<UL> <LI> HTML </LI> <LI> CSS </LI> <LI> PHP </LI> </UL>
- HTML
- CSS
- PHP
Списки можно вкладывать 1 в 1:
<UL> <LI> HTML </LI> <LI> CSS <UL> <LI> введение </LI> <LI> типы докуметов </LI> <LI> типы стилей </LI> </UL> </LI> <LI> PHP </LI> </UL>результат этого кода:
- HTML
- CSS
- введение
- типы документом
- типы стилей
- PHP
- <LI type=»disc»> </LI>
- <LI type=»circle»> введение </LI>
<LI type=»square»> введение </LI>
<UL> <LI> HTML <LI> CSS <LI> PHP </UL>Тег Li в следующей строке говорит не только об начале нового элемента списка, но и об окончании предыдущего. Но лично я этого делать вам не советую.
Упорядоченные списки отличаются предыдущих только тем что в место кружочков или квадратиков идет нумерация в виде цифр или букв. Так-же эти списки обозначаются тегом <OL>, а элементы как и неупорядоченных списках тегом <LI>
<OL> <LI> HTML <LI> CSS <LI> PHP </OL>
- HTML
- CSS
- PHP
<ol> <LI type="1"> Нумерация цифрами </LI> <LI type="A"> Нумерация большими буквами </LI> <LI type="a"> Нумерация маленькими буквами</LI> <LI type="I"> Нумерация большими римскими</LI> <LI type="i"> Нумерация маленькими римскими</LI> </ol>
- Нумерация цифрами
- Нумерация большими буквами
- Нумерация маленькими буквами
- Нумерация большими римскими цифрами
- Нумерация маленькими римскими цифрами
Списки определения обозначаются тегом <DL>, эти списки отличаются не только другим тегом элемента<DТ>, но но каждый елемент должен содержать свое определение<DD>. Например:
<DL> <DT> Неупорядоченные списки <DD> Служат для вывода текста без нумерации <DT> Упорядоченные списки <DD> Служат для вывода текста с нумерацией <DT> Списки определений <DD> Служат для вывода текста каждого элемента парой. </DL>
- Неупорядоченные списки
- Служат для вывода текста без нумерации
- Упорядоченные списки
- Служат для вывода текста с нумерацией
- Списки определений
- Служат для вывода текста каждого элемента парой.
О списках у меня все!!! Использовать их или нет это ваше право. А мы перейдем к следующей странице моего HTML-самоучителя OnLine и познакомимся не менее интересной главой, в которой научимся увеличивать , задавать шрифты и изменять цвет текста отдельного участка текста.
Списки в HTML — маркированный список — нумерованный список — список определений
Очень часто определенную информацию на сайте необходимо представить в виде списков.
Списки позволяют упорядочить и систематизировать различную информацию и представить ее для посетителя в удобном виде.
Списки в HTML могут быть трех разновидностей: маркированные списки, нумерованные списки и списки определений. Рассмотрим, как их создавать по порядку.
Маркированный список.
Данный вид списка используется наиболее часто. Маркированный список в HTML создается при помощи тегов <ul> <li>. При этом напротив каждого элемента списка добавляется маркер, по умолчанию это маркер в виде кружка. При помощи тегов <ul></ul> создается контейнер, внутри которого располагаются элементы списка: <ul><li></li></ul>.
Код маркированного списка будет выглядеть так:
<UL> <LI>Вариант такой</LI> <LI>Вариант сякой</LI> <LI>Вариант эдакий</LI> </UL>
Можете попробовать создать HTML страничку, используя данный код и у вас, в результате получится следующий список:
Как вы можете заметить, каждый элемент списка располагается с новой строки, при этом слева, сверху и снизу создаются определенные отступы. Каждый пункт списка начинается с маркера, в качестве маркера может использоваться закрашенный кружок (используется по умолчанию), окружность или квадратик. У тега <UL> есть атрибут type, при помощи которого, и задается стиль маркера. Данный атрибут имеет следующие значения:
- disc — круг;
- circle — окружность;
- square — квадрат.
Значение disc используется по умолчанию.
Пример создания маркированного списка с маркерами в виде окружности:
<UL type="circle"> <LI>Вариант такой</LI> <LI>Вариант сякой</LI> <LI>Вариант эдакий</LI> </UL>
В результате список примет, следующий вид:
Создание маркированного списка с маркерами в виде квадратиков:
<UL type="square"> <LI>Вариант такой</LI> <LI>Вариант сякой</LI> <LI>Вариант эдакий</LI> </UL>
Список будет иметь вид:
Атрибут type можно применять не только к тегу <UL>, но и к тегу <LI>. Таким образом можно создать список с разнообразными маркерами.
<UL> <LI type="disc">Вариант такой</LI> <LI type="circle">Вариант сякой</LI> <LI type="square">Вариант эдакий</LI> </UL>
В результате получится следующее:
Нумерованные списки.
Нумерованные списки в HTML представляют собой списки, в которых каждый пункт имеет порядковый номер, создаются нумерованные списки при помощи тега <OL> и вложенных в его тегов <LI>
<OL> <LI>Первая строчка</ LI> <LI>Вторая строчка </LI> <LI>Третья строчка </LI> </OL>
Выглядит такой список следующим образом:
По умолчанию нумерация производится арабскими цифрами. Но у тега <OL> есть атрибут type, при помощи значений которого нумерацию можно делать заглавными (type=»A») или строчными (type=»a») латинскими буквами, римскими цифрами в верхнем (type=»I») и нижнем (type=»i») регистре.
Ниже приведены сокращенные варианты кода, и вид нумерации который может быть в том или ином случае.
Нумерация арабскими цифрами:
<OL type="1"> <li>...</li> </OL>
Вид списка:
Нумерация заглавными латинскими буквами:
<OL type="A"> <li>...</li> </OL>
Вид списка:
Нумерация строчными буквами латинского алфавита:
<OL type="a"> <li>...</li> </OL>
Вид списка:
Нумерация римскими цифрами в верхнем регистре:
<OL type="I"> <li>...</li> </OL>
Вид списка:
Нумерация римскими цифрами в нижнем регистре:
<OL type="i"> <li>...</li> </OL>
Вид списка:
Список определений в HTML.
Особым видом списков являются списки определений. Они отличаются тем, что каждый элемент списка состоит из двух элементов, термина и текста который раскрывает его значение. Создаются данные списки при помощи тегов <DL><DT><DD>. Тег <DL> создает контейнер для списка, тег <DT> устанавливает термин, а тег <DD> описание или определение термина.
Записывается данный список следующим образом:
<DL> <DT>Термин 1</DT> <DD> Определение термина 1</DD> <DT>Термин 2</DT> <DD> Определение термина 2</DD> <DT>Термин 3</DT> <DD> Определение термина 3</DD> </DL>
В результате получится следующий список:
Как вы можете видеть, при этом создаются соответствующие отступы для термина и текста определения.
Вложенные или многоуровневые списки в HTML.
Иногда необходимо в один элемент определенного вида списка вложить другой список. В HTML есть возможность неограниченно влаживать одни списки в элементы других списков.
Например, вот код, при помощи которого в элементы маркированного списка вложены нумерованные списки.
<UL> <LI>Вариант такой <OL> <LI>Первая строчка</ LI> <LI>Вторая строчка </LI> <LI>Третья строчка </LI> </OL> </LI> <LI>Вариант сякой <OL> <LI>Первая строчка</ LI> <LI>Вторая строчка </LI> <LI>Третья строчка </LI> </OL> </LI> <LI>Вариант эдакий <OL> <LI>Первая строчка</ LI> <LI>Вторая строчка </LI> <LI>Третья строчка </LI> </OL> </LI> </UL>
Вложенный список будет иметь такой вид:
Таким образом, можно делать вложенные списки в различных вариациях и при этом применять, необходимы атрибуты и значения.
Материал подготовлен сайтом: WebMasterMix.ru
Рекомендуем ознакомиться:
- Подробности
Обновлено: 04 Сентябрь 2013
Создано: 28 Июнь 2011
Просмотров: 33636
Списки определений
Это общая форма маркированного списка с той разницей, что он отображается без «маркеров» и обычно используется для отображения списка терминов и определений. В списке определений используется dl
элемент, для которого требуются как начальный, так и конечный теги. Между ними помещаются по крайней мере один тег
и один тег
, которые отображают d efinition t erm и d 0d 0d соответственно. Конечные теги для элементов dt
и dd
являются необязательными.
Следующий пример проиллюстрирует:
Пример 1 — ИСХОДНЫЙ КОД
Пример 1 — РЕЗУЛЬТАТ
- Текстовый редактор
- Программа, которая входит в стандартную установку большинства компьютерных операционных систем и позволяет пользователю сохранять текст в файл без какого-либо форматирования. Часто используется авторами веб-страниц, как новичками, так и хардкорщиками.
- Редактор HTML
- В основном текстовый редактор на стероидах, облегчающий написание исходного кода HTML за счет предоставления графического пользовательского интерфейса, содержащего кнопки и раскрывающиеся меню, которые позволяют вставлять часто используемые фрагменты кода.
- Редактор WYSIWYG
- Программа, которая позволяет пользователю создавать веб-страницу, работая «сверху» с готовым продуктом, а не с исходным кодом HTML (WYSIWYG = What You See Is What You Get). Несмотря на то, что WYSIWYG-редакторы просты в использовании, они довольно часто создают раздутый и некачественный исходный код.
Однако тот факт, что элемент dl изначально предназначался для определения списков терминов и определений, не обязывает вас всегда использовать его в этом качестве. По сути, вы можете использовать его для отображения любого текста, который подходит для этого конкретного стиля форматирования, например, для перечисления команд и функций в файле справки программы:
Пример 2 — ИСХОДНЫЙ КОД
Пример 2 — РЕЗУЛЬТАТ
- Файл
- Открывает раскрывающееся меню кнопок, содержащее список команд, используемых для управления файлами, включая сохранение незавершенной работы, открытие ранее сохраненных файлов или создание новых.
- Править
- Открывает раскрывающееся меню кнопок, содержащее список команд, используемых для редактирования незавершенных работ, включая копирование, вырезание и вставку выделенных элементов из рабочей области.
- Посмотреть
- Открывает раскрывающееся меню кнопок, содержащее список команд, используемых для управления внешним видом графического пользовательского интерфейса.
Итак, ладно, допустим, вы разобрались с основами HTML и теперь готовы приступить к созданию нескольких веб-страниц для создания реального веб-сайта. Предполагая, что вы новичок и предпочитаете отложить изучение CSS на более поздний срок, у вас есть по существу два способа создать сложный макет веб-страницы:
- Использование таблиц для компоновки
- Использование фреймов для компоновки
Лучшие бесплатные вещи
для веб-мастеров
Бесплатные текстовые редакторы
Бесплатные графические редакторы
Инструменты анализа веб-сайтов
Бесплатные шаблоны веб-сайтов
См. также:
Лучший бесплатный веб-хостинг
Если вам нужен веб-адрес .COM , вы можете быстро и легко получить его по адресу…
<~ НАЗАД | ТОП | ДОМ |
HTML и XHTML также поддерживают стиль списка полностью отличается от упорядоченных и неупорядоченных списков, которые мы обсуждалось до сих пор: списки определений. Как и записи, которые вы найдете в словарь или энциклопедия с текстом, картинками и другими мультимедийные элементы, список определений — идеальный способ представить глоссарий, список терминов или другие списки имен/значений. 7.5.1. ТегСписок определений заключенный в
Рисунок 7-8. Список определений, представленный NetscapeКак и в других типах списков, вы можете добавить больше пробелов между элементы списка определения путем вставки абзаца теги в конце их содержимого или путем определения просторный стиль для соответствующих тегов.
|
дл>; никогда не пропускал
- Содержит:
dl_content
- Используется в:
блок
7.5.1.1. Более компактные списки определений
Тег
- поддерживает
компактный атрибут, советуя браузеру
сделать представление списка как можно меньше. Мало браузеров, если
any, учитывайте этот атрибут, и он объявлен устаревшим в HTML 4 и
XHTML.
Этот тег
- определяет компонент термина списка определений. Он действителен только при использовании в определении
- и определение термина
или объяснение.
<дт> - Функция:
Определить термин списка определений
- Атрибуты:
CLASS
ONKEYUP
DIR
ONMOUSEDOWN
ID
ONMOUSEMOVE
LANG
ONMOUSEOUT
ONCLICK
ONMOUSEOVER
ONDBLCLICK
ONMOUSEUP
ONKEYDOWN
STYLE
ONKEYPRESS
НАЗВАНИЕ
- Конечный тег:
; может быть опущен в HTML
- Содержит:
текст
- Используется в:
dl_content
Традиционно термин определения, следующий за Тег
- короткий и понятный — слово или
несколько. Технически длина может быть любой. Если длинный, браузер может
использовать возможность расширения элемента за пределы окна дисплея,
или перенести его на следующую строку, где начинается определение.
Сразу после окончания тега
- предшествует началу соответствующего тега
- ,
это однозначно и поэтому не требуется. Однако стандарт XHTML
настаивает на его присутствии. Так что привыкайте включать его в свой
документы.
7.5.2.1. Форматирование текста с помощью
На практике браузеры либо слишком снисходительны или слишком глупы, чтобы применять правила, поэтому некоторые хитрые авторы HTML неправильно использовать тег
- для смещения левого поля вправо и влево, соответственно, для отображения причудливого текста. (Помните, вкладка символы и начальные пробелы обычно не работают с обычными текст.) Мы не одобряем нарушение HTML и, конечно же, не стандарт XHTML, и еще раз предостерегаю вас от надуманных документы. Вместо этого используйте таблицы стилей.
7.
5.2.2. Атрибуты class, dir, id, lang, style, title и eventТег
- поддерживает стандартные атрибуты тегов HTML 4/XHTML. атрибуты стиля и класса, конечно, позвольте вам управлять стилем отображения; идентификатор и атрибуты тега заголовка позволяют вам уникально пометить его содержание; директор и язык атрибуты позволяют указать его родной язык; и множество мероприятий атрибуты позволяют реагировать на инициированные пользователем действия мыши и клавиатуры на содержании. Не все реализованы популярными в настоящее время браузеры для этого тега или для многих других. [ См. также : Раздел 3.6.1.1, «Атрибут dir», Раздел 3.6.1.2, «Атрибут lang», Раздел 4.1.1.4, «Атрибут id», Раздел 4.1.1.5, «Атрибут title», Раздел 8.1.1, «Встроенные стили: атрибут стиля», раздел 8.3, «Классы стилей», раздел 12.3.3, «Обработчики событий JavaScript»]
7.5.3. Тег
- для смещения левого поля вправо и влево, соответственно, для отображения причудливого текста. (Помните, вкладка символы и начальные пробелы обычно не работают с обычными текст.) Мы не одобряем нарушение HTML и, конечно же, не стандарт XHTML, и еще раз предостерегаю вас от надуманных документы. Вместо этого используйте таблицы стилей.
Тег
- отмечает начало определения часть элемента в списке определений. Согласно HTML и XHTML,
к своим документам.- принадлежит только внутри список определений
не нужен и его отсутствие делает исходный текст более читабельным. Однако, и еще раз, XHTML настаивает на том, чтобы конечный тег отображался в ваших документах, так что вы также можете привыкайте добавлять- , сразу после
тег
- и термин и перед
определение или пояснение.
<дд> - Функция:
Определить термин списка определений
- Атрибуты:
CLASS
ONKEYUP
DIR
ONMOUSEDOWN
ID
ONMOUSEMOVE
LANG
ONMOUSEOUT
ONCLICK
ONMOUSEOVER
ONDBLCLICK
ONMOUSEUP
ONKEYDOWN
STYLE
ONKEYPRESS
НАЗВАНИЕ
- Конечный тег:
дд>; всегда опускается в HTML
- Содержит:
поток
- Используется в:
dl_content
Содержимое, следующее за тегом
- , может быть
любая конструкция HTML, включая другие списки, блочный текст и мультимедиа
элементы. Хотя обращаясь с ним так же, как с обычным
содержание, браузеры обычно делают отступ в списке определений
- определений. И с начала другой термин и определение (
- ) или обязательный конечный тег определения (
7.5.3.1. Атрибуты class, dir, id, lang, style, title и event
Тег
- отмечает начало определения часть элемента в списке определений. Согласно HTML и XHTML,
- поддерживает стандартный тег
атрибуты. Стиль и класс
атрибуты, конечно же, позволяют управлять стилем отображения; в
Атрибуты тегов id и title позволяют
вы однозначно маркируете его содержимое; директор и
атрибуты lang позволяют указать его собственный
язык; а многочисленные атрибуты событий позволяют реагировать на
инициированные пользователем действия с мышью и клавиатурой над содержимым. Не все
реализуются популярными в настоящее время браузерами для этого тега или для
многие другие. [ См. также : Раздел 3.6.1.1, «Атрибут dir», Раздел 3.6.1.2, «Атрибут lang», Раздел 4.1.1.4, «Атрибут id», Раздел 4.1.1.5, «Атрибут title», Раздел 8.1.1, «Встроенные стили: атрибут стиля», раздел 8.3, «Классы стилей», раздел 12.3.3, «Обработчики событий JavaScript»]
7.4. Списки вложения 7.6. Соответствующее использование списка Copyright © 2002 O’Reilly & Associates. Все права защищены.
Основы HTML от Jan: списки
Существует несколько способов создания список с HTML. Список может использовать маркеры или номера, с различными типами для каждого. Или список можно оформить как термины и определения. Термин находится на строке сам по себе. определение начинается со следующей строки и имеет отступ. Существуют и другие типы, но выводятся из эксплуатации. Этих трех достаточно, чтобы справиться с большинством ваших потребностей.
Пули
Номера
Определения
- Оплата счетов
- Стрижка
- Доктор 10:15
- Компьютерный класс
- Оплата счетов
- Стрижка
- Доктор 10:15
- Компьютерный класс
- Понедельник
- Оплата счетов
- Стрижка
- Вторник
- Доктор 10:15
- Среда
- Компьютерный класс
Где вы находитесь:
JegsWorks > Уроки > ИнтернетПрежде чем начать. ..
Проект 1: Основы браузера
Проект 2: Основы HTML
Код HTML
О HTML
Что вам нужно
Код вручную
Страница
Списки
Читаемый code
WYSIWYG
FrontPage/FPX
Изображения в формате HTML
Форматирование
Таблицы
Печать
Преобразовать
Сводка
Викторина
УпражненияПоиск
Глоссарий
ПриложениеКод для списков
В следующих шагах вы потренируетесь с тремя основными типами списков.
Маркированные и нумерованные списки требуют двух видов тегов —
- пара тегов, которая запускает и останавливает список — либо
для маркеров ( u nordered l ist)
или
для нумерованного списка ( o ordered l ist).
-
Для терминов и определений необходимо три различных тега —
-
для начала и конца списка ( d определение л исст). -
-
Все перечисленные элементы должны располагаться между началом и закрыть теги для списка. Логичный расклад! Конечные теги для DT и DD необязательны в HTML 4. Если у вас есть списки внутри списков, это Важно закрыть все теги, чтобы браузер не запутался.
Чему вы научитесь: для создания маркированного списка
для создания нумерованного списка
для создания списка терминов и определенийНачните с :
Начиная с этого На уроке вы создадите веб-страницу для Гектора Чавеса. Вы сначала научитесь как работает необработанный исходный код. Позже вы будете использовать более продвинутые редакторы.
Создать документ
- Откройте Блокнот для нового пустого документа. ( Начинать
| Программы… |
Аксессуары | Блокнот)
- Введите следующий код для создания основных частей документа,
заменив ваше имя в теге TITLE на ваше собственное имя:
Дом Гектора Чавеса — ваше имя
Список: Пули
Теперь вы вводите текст и составляете список. Чтобы показать пулю впереди каждого элемента в списке вы начинаете список с тега
, из «неупорядоченного списка» на английском языке. Завершите список цифрой
, из «списка item» на английском языке и заканчивается
на самом деле не требует конечного тега в HTML 4.0, но он будет в будущие версии HTML. В сложных вложенных списках, имеющих окончание- Под тегом
Домашняя страница Гектора Чавеса
Не забудьте закрывающий тег!
- Под заголовком h2 введите заголовок второго уровня:
Мой дом — ваш дом!
- Под заголовком h3, введите абзац:
Вот мои увлечения.
- Под абзацем, введите приведенный ниже код, чтобы создать маркированный
список:
- Путешествия
- Рыбалка
- Футбол
- Кулинария
- Сохранить документ в веб-папку на вашем классе
диск как hector1. htm. Полный путь
a:\мои документы\web\hector1.htm .
- Печать страницу HTML-кода, выбрав в меню «Блокнот»
Файл | Распечатать
Ваше имя должно быть в теге
!
- Сначала откройте IE, если необходимо. Переключить в окно IE.
- В адресной строке IE введите путь
a:\my docs\web\hector1.htm и нажмите клавишу ВВОД. Твой новый
загружает документы.
Если ваша страница выглядит неправильно, снова откройте страницу в Блокноте и проверьте ввод тегов. Вы закрыли те, которые должны быть закрыто? Включили ли вы необходимые теги,
и их закрывающие теги? Все части в правильном порядке?
- Проверьте Предварительный просмотр печати . Поля и заголовок
и нижний колонтитул приемлемый?
- Печать страницу, выбрав Файл | Печать | Все из меню IE.
Список: Нумерованный
Чтобы пронумеровать элементы в списке, начните список с тег
из «нумерованного списка» на английском языке. Завершите список с- Переключите обратно в окно Блокнота.
- Замените тег
на
и тег
- В меню выберите Файл | Сохранить как hector2.htm . Это сохранит измененный документ с новым имя вместо перезаписи предыдущей версии.
Так как вы только что сохранили в сети папка, диалоговое окно должно показать web папка еще. Если вы сделали перерыв, а нужная папка не отображается, вы можете ввести полный путь a:\my документы\веб\гектор2. htm
- Переключить на IE.
- Измените имя файла в адресной строке на hector2.htm и нажмите клавишу ВВОД. Появится ваша исправленная страница.
- Печать страницу, выбрав Файл | Печать | Все
Список: определение
В списке определений слово или фраза определение находится в одной строке, а определение или пояснение — в следующей. линии, но с отступом от поля. Таким образом, список определений требует трех разные теги вместо двух:
-
для начала и конца списка. -
-
Конечно, эти теги могут использоваться для вещей, которые на самом деле не являются определениями, хотя это может сбить с толку некоторые браузеры, которые читать текст вслух.
Теперь вы добавите текст и измените номер list в список определений. [Мы здесь немного жульничаем. Это не довольно определений!]
- Переключатель вернуться в Блокнот.
- Нажмите в меню «Редактировать» и
убедитесь, что установлен флажок «Перенос слов». Если это
нет, нажмите Перенос слов .
- Изменить
и
и
- Смена
- Путешествие
9от 0019 до
и нажмите клавишу ENTER, чтобы начать новую строку.- Путешествие
- Аналогичным образом измените оставшиеся
тегов
на
и создайте пустую строку под каждым из них.
- На новой строке ниже
Travel
введите:- Я побывал в 14 странах на трех континентах. У меня есть путешествовал на самолете, вертолете, поезде, корабле, автомобиле, автобусе и каноэ. я планирую чтобы добавить в список подводную лодку и воздушный шар. я не видел пирамиды в Египте или Великая Китайская стена, так что я еще не закончил еще путешествую.
- На новой строке ниже
Fishing
введите :- Я начал рыбачить с отцом, когда мне было 4 года. Он должен был наживить крючок и поймать рыбу для меня тогда. Но я держал шест все сам! Мне до сих пор нравится ловить рыбу на тихом озере или у журчащего ручей.
- На новой строке ниже
Soccer
введите :- В детстве я никогда не играл в футбол. Но теперь я большой футболист поклонник. Я хожу на игры своего сына (Viva los Lobos!) и смотрю большие команды на ТВ.
- В новой строке ниже
Cooking
введите :- Папа рано научил меня, что если я могу поймать рыбу, я смогу очистить и приготовить его, тоже. После нескольких дымных опытов я получил довольно хорошо готовит рыбу на гриле. На самом деле, я буду жарить что угодно это съедобно!
- В меню выберите Файл | Сохранить как и использовать имя hector3.htm для имени файла. Это сохранит исправленное документ с новым именем вместо перезаписи предыдущей версии.
Поскольку вы недавно сохранили в веб-папку, диалоговое окно должно по-прежнему показывать веб-папку. Если это не так, вы можете ввести полный путь a:\my docs\web\hector3.htm
- Переключите на IE и измените имя файла в адресной строке на hector3.htm и нажмите клавишу ENTER. IE будет отобразить исправленную страницу. Ваше окно может быть недостаточно большим, чтобы показать всю страницу сразу.
- Печать страницу, выбрав Файл | Печать | Все
Вложенные списки
Очень часто бывает, что список содержит другие списки. Например, в еженедельном списке дел вы ожидаете увидеть каждый день недели со своим списком задач на этот день. И некоторые из эти задачи могут быть списками! HTML прекрасно с этим справляется. Ты может даже выбирать разные стили для вложенных списков.
Вы можете вложить список в другой список, например наличие нумерованного списка внутри маркированного списка.
быть будьте особенно осторожны с вашими конечными тегами во вложенных списках. Если вы опустите один, браузер будет думать, что следующий за ним текст является частью списка. Ты может иметь гораздо больше маркеров или цифр, чем вы предполагали.
Примеры вложенных списков
Пули
Номер
- Понедельник
- Оплата счетов
- Телефон
- Электрический
- Сотовый телефон
- ВИЗА
- Стрижка
- Оплата счетов
- вторник
- Доктор 10:15
- Футбольная тренировка 3:35 - 4:30
- среда
- Компьютерный класс
- Курсовая работа
- Понедельник
- Оплата счетов
- Телефон
- Электрический
- Сотовый телефон
- ВИЗА
- Стрижка
- Оплата счетов
- вторник
- Доктор 10:15
- Футбольная тренировка 3:35 - 4:30
- среда
- Компьютерный класс
- Курсовая работа
Ваша страница начинает обретать форму.
7.5.1.2. Атрибуты class, dir, id, lang, style, title и event
Многие другие атрибуты тега
- должно быть уже хорошо знакомо. Стиль и
атрибуты класса, конечно же, позволяют вам контролировать
стиль отображения; идентификатор и название
атрибуты тега позволяют однозначно маркировать его содержимое; в
Атрибуты dir и lang позволяют
указать свой родной язык; а многочисленные атрибуты события позволяют
реагировать на инициированные пользователем действия мыши и клавиатуры с содержимым. Не все реализованы популярными в настоящее время браузерами для этого
тег или для многих других. [ См. также : Раздел 3.6.1.1, «Атрибут dir», Раздел 3.6.1.2, «Атрибут lang», Раздел 4.1.1.4, «Атрибут id», Раздел 4.1.1.5, «Атрибут title», Раздел 8.1.1, «Встроенные стили: атрибут стиля», раздел 8.3, «Классы стилей», раздел 12.3.3, «Обработчики событий JavaScript»]
7.5.2. Тег
- список, предшествующий термину или элементу, перед
тег