Форматирование текста
<h1></h1>……<h6></h6>. — теги заголовков, от самого большого к самому маленькому.
— жирный текст без придания важности выделенному фрагменту. — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием
<strong></strong> — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.
— выделение текста курсивом без придания важности.
— зачёркивает текст, помечая его удалённым.
— отображает перечёркнутый текст.
— подчёркивает текст, визуально выделяя внесённые изменения.
— подчёркивание без дополнительного акцентирования внимания. — расставление акцентов путём выделения фрагментов текста курсивом
<em></em> — расставление акцентов путём выделения фрагментов текста курсивом.
<mark></mark> — выделение частей текста жёлтым маркером.
<tt></tt> — имитация текста, набранного на печатной машинке.
<small></small> — отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.
<sub></sub> — подстрочное начертание символов.
<sup></sup> — надстрочное начертание символов.
<cite></cite> — оформление цитат.
<address> — добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.
<pre></pre> — вывод неформатированного текста с сохранением пробелов и особенностей переносов.
<p></p> — контейнер для абзаца.
<br> — переносит текст на другую строку без создания абзаца.
<blockquote> </blockquote> — отступы с обеих сторон для оформления цитаты или врезки.
<q></q> — краткое цитирование.
<dl></dl> — контейнер для размещения термина и его определения.
<dt> — добавление термина.
<dd> — добавление определения понятия
<dfn> — выделение термина курсивом. Последующий текст должен раскрывать понятие.
<abbr> — указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.
<ol></ol> — список с цифрами.
<ul></ul> — список со значками.
<li> — отметка каждого элемента перечня (цифра или значок в зависимости от типа списка).
<a></a> — добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.
<code></code> — выделение фрагмента кода с помощью шрифта monospace.
Нумерованные 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»
Кстати, браузеры отображают все списки как блочные элементы, поэтому при отображении примера отчетливо видны вертикальные отступы. Попробуйте
набрать код самостоятельно, задайте спискам желтый фон и посмотрите результат.
Вложенные списки
Иногда возникает необходимость создания вложенных списков, которые
представляют собою списки, расположенные в пунктах внешнего списка. Рассмотрим создание вложенных списков на примере
№4.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Вложенные списки</title> </head> <body> <!-- Пусть будет нумерованный список --> <ol> <!-- В каждый пункт помещаем новый список --> <li>Три сорта яблок: <ul> <li>Антоновка,</li> <li>Штрефель,</li> <li>Кубань.</li> </ul> </li> <!-- А сюда поместим нумерованный список --> <li>Три сорта груш: <ol> <li>Чижовская,</li> <li>Вильямс,</li> <li>Дюшес.</li> </ol> </li> </ol> </body> </html>
Пример №4. Использование вложенных списков
Как видим, создавать вложенные списки совсем не трудно. Для этого нужно внимательно между открывающим тегом <li>
и закрывающим тегом </li> для нумерованных и маркированных списков расположить вложенный список
требуемого вида. Что касается списков определений, то вложенный список следует располагать между открывающим тегом
<dd> и закрывающим тегом </dd>. Это может понадобиться, например,
если нужно дать термину несколько определений.
HTML Tags
<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
Списки
Списки в HTML используются для представления информации в упорядоченном или неупорядоченном виде.Обычно это нумерованный или ненумерованный список. Также под список может подходить любой контент, элементы которого схожи и идут друг за другом
Маркированные (ненумерованные) списки
Маркированные списки создаются с помощью тега . Каждый элемент списка обозначается тегом .
Теги всегда должны быть прямыми потомками .
Запись в коде:
Нумерованные списки
Нумерованные списки создаются с помощью тега . Каждый элемент списка также обозначается тегом . Основное отличие нумерованного списка от маркированного заключается в наличие указателя(маркера) перед каждым элементом.
Запись в коде:
Список на странице
Нумерованные списки HTML
Нумерованные списки при разметке мало чем отличаются от маркированных. Отличие всего одно: вместо тега контейнера списка, нужно использовать тег .
Элементы списка всё также помещаем в контейнеры .
И всё нумерованный список создаётся также просто!
Помним про Codestyle и закрываем все контейнеры.
Для того, чтобы было нагляднее посмотрим на реальном примере.
В контейнер нумерованного списка «Топ5 планет по диаметру» поместим список по порядку одного за другим элементы (планеты в порядке убывания) в контейнерах .
При отображении этого HTML-кода, нумерация элементов списка происходит автоматически:
10.1 Introduction to lists
- Unordered information.
- Ordered information.
- Definitions.
The previous list, for example, is an unordered list, created with the
element:
<UL> <LI>Unordered information. <LI>Ordered information. <LI>Definitions. </UL>
An ordered list, created using the element, should contain information
where order should be emphasized, as in a recipe:
- Mix dry ingredients thoroughly.
- Pour in wet ingredients.
- Mix for 10 minutes.
- Bake for one hour at 300 degrees.
Definition lists, created using the element, generally consist of a
series of term/definition pairs (although definition lists may have other
applications). Thus, when advertising a product, one might use a definition
list:
- Lower cost
- The new version of this product costs significantly less than the previous
one! - Easier to use
- We’ve changed the product so that it’s much easier to use!
- Safe for kids
- You can leave your kids alone in a room with this product and they won’t
get hurt (not a guarantee).
defined in HTML as:
<DL> <DT><STRONG>Lower cost</STRONG> <DD>The new version of this product costs significantly less than the previous one! <DT><STRONG>Easier to use</STRONG> <DD>We've changed the product so that it's much easier to use! <DT><STRONG>Safe for kids</STRONG> <DD>You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee). </DL>
Lists may also be nested and different list types may be used together, as
in the following example, which is a definition list that contains an unordered
list (the ingredients) and an ordered list (the procedure):
- The ingredients:
-
- 100 g. flour
- 10 g. sugar
- 1 cup water
- 2 eggs
- salt, pepper
- The procedure:
-
- Mix dry ingredients thoroughly.
- Pour in wet ingredients.
- Mix for 10 minutes.
- Bake for one hour at 300 degrees.
- Notes:
- The recipe may be improved by adding raisins.
The exact presentation of the three list types depends on the user agent. We
discourage authors from using lists purely as a means of indenting text. This
is a stylistic issue and is properly handled by style sheets.
Структура страницы word.
В этой статье мы проведем обзор одной из основных программ пакета Microsoft Office, а именно рассмотрим структуру страницы word. Программа Microsoft Word – основное предназначение: создание, редактирование, просмотр текстовых документов. 99% пользователей ПК встречаются с Word неоднократно. Поэтому знание основ работы Microsoft Word необходимы и, по крайней мере, не окажутся лишними.
После установки пакета Microsoft Office, делаем небольшие настройки для удобного доступа к основным приложениям. Для этого заходим в меню ПУСК, ищем в программах папку с названием «Microsoft Office», кликаем по ней левой клавишей мыши. Далее кликаем правой кнопкой мыши по нужной вам программе. В появившемся меню выбираем пункт «Отправить», далее «Рабочий стол (создать ярлык)». Если вы все сделали правильно, то на рабочем столе должен появиться ярлык с нужной программой.
Так как в этой статье мы разбираем Microsoft Word, то проделываем все вышесказанные операции на его примере. Кликаем два раза левой клавишей мыши по значку для запуска программы. В итоге должны получить следующею картину:
Мы открыли новый документ Word. Рассмотрим, из чего он состоит:
1. Рабочая область.
Белый лист, макет стандартного листа для написания текста, составления таблиц, вставки изображений.
2. Шапка документа.
— значок запущенной программы.
— панель быстрого доступа. Предназначена для выполнения операций связанных с документом. Следует отметить следующие пункты: Создать (создание нового документа), сохранить (для быстрого сохранения документа и сохранения изменений), отменить и вернуть (для отмены или возврата действий при работе в документе).
— название документа. Отображает название документа и расширение. «.doc» и «.docx» самые распространенные расширения для текстовых документов. Означают, что данный документ был создан и открывается посредством Microsoft Word.
— кнопки управления приложением. Стандартный набор управления – свернуть, развернуть, закрыть.
3. Панель инструментов. Имеет вкладки для удобной навигации. Каждая вкладка имеет свою панель инструментов для работы с документом. Для работы нам потребуется изучение следующих вкладок:
— файл. Основной инструмент для работы с программой: сохранение документа, открытие документа, печать, настройка самой программы.
— Главная. Основные инструменты для работы с текстом. Имеет следующие блоки:
/буфер обмена. Для хранения информации и последующего ее размещения.
/шрифт. Работа со шрифтом.
/абзац. Определяет различные интервалы в тексте, отступы, табличное отображение, нумерацию.
/стили. Готовые шаблоны оформления документов.
/редактирование. Навигация по редактированию. В большинстве случаев применяется в работе с большим объемом текста.
— вставка. Предназначена для вставки изображений, таблиц и их редактирования.
— разметка страниц. Вкладка имеет инструменты для работы непосредственно с самим документом. Его размерами, областями печати. Редактирование фона страницы.
— вид. Осуществляет функцию настройки внешнего отображения рабочей области.
Пользователи, не имеющие опыт работы в Microsoft Word. Впервые открывая новый документ, приходят в замешательство от многообразия различных инструментов для работы. При правильной настройке данной программы вы никогда не будите путаться в этой путанице. Четкое знание структуры страницы word, расположения всех функций программы даст вам повышение производительности при работе на компьютере
Особенно это важно для людей, чья работа тесно связана с компьютером и в частности с текстовыми документами
Мы рассмотрели структуру страницы word, основные вкладки необходимые для работы с Microsoft Word, какой функционал они несут и изучили навигацию в программе. В дальнейших статьях мы будем останавливаться на каждой отдельной вкладке, и разбирать все инструменты и их работу на практике.
Источник
Многоуровневый список
Список, состоящий из списков, вложенных друг в друга. Может включать в себя списки разных типов. Сложность создания заключается в соблюдении правильной вложенности тегов, так как в многоуровневой структуре легко запутаться.
Вот пример многоуровневого списка:
<!DOCTYPE html>
<html>
<head>
<title>Многоуровневый список</title>
</head>
<body>
<strong>Языки программирования делятся на:</strong>
<ul>
<li>Структурные</li>
<ol>
<li>Pascal</li>
<li>Oberon</li>
<li>C</li>
<ol>
<li>Go</li>
<li>Limbo</li>
</ol>
<li>Lua</li>
</ol>
<li>Объектно-ориентированные</li>
<ol>
<li>C++</li>
<li>Java</li>
</ol>
<li>Функциональные</li>
<ol>
<li>Lisp</li>
<li>Python</li>
</ol>
</ul>
</body>
</html>
Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке
Какие типы списков есть в HTML.
Для этого нужно знать всего шесть тегов.
Перед тем, показать, что это за теги для создания списков нужно понять, что списками мы постоянно оперируем в повседневной жизни.
Например, может быть список покупок или продуктов для приготовления еды. Это список, который не требует какого-то особого порядка – просто один предмет следует за другим без видимого порядка. Назовём его «Маркированный список».
Это может быть список действий, которые нужно выполнять в строгом порядке. Такие списки лучше нумеровать. И такой список мы будем называть «Нумерованный список».
А ещё есть списки с описаниями. Когда какому-то термину соответствует какое-то определение. Такие списки будем называть «Список определений».
Списки полезны, так как предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для восприятия виде.
Создание форм и кнопок
<form></form> — создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.
<button></button> — создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.
<select multiple name=»NAME» size=?></select> — формирует меню с поддержкой скроллинга.
<select name=»NAME»></select> — создаёт ниспадающее меню.
<option></option> — описывает каждый отдельный пункт меню.
<input> — формирует поля для добавления пользовательских данных.
<output> — выводит результаты вычислений, сделанных с помощью скрипта.
<label> — оформляет пометку для поля, созданного тегом <input>.
<textarea></textarea> — создаёт большие поля для ввода текста.
Ссылка
Тег ссылки — , используется для создания ссылок на другие страницы или на определенные участки на текущей странице, а также для скачивания файлов (с помощью атрибута ). Атрибут указывает на адрес страницы или на якоря на текущей странице,существует также еще атрибут который определяет, где откроется ссылка: в том же окне, в новой вкладке или в новом окне браузера.
Варианты значений атрибута :
- _self: на той же странице. Значение по умолчанию, если именно оно вам нужно, то можно не указывать этот атрибут
- _blank: в новой вкладке или в новом окне браузера — это зависит от настроек браузера, но чаще всего это именно вкладка.
Запись в коде:
Как выглядят ссылки на странице: в главном меню
Ненумерованные списки. Тег
Категория: Уроки HTML Просмотров: 4319 Коментариев: Дата: 2017-04-02 Добавил: admin
И так, продолжаем работу со списками, в прошлом уроке мы рассмотрели Упорядочнные списки и применение атрибутов для них. В этом уроке мы продолжим изучать списки и поговорим о неупорядоченных списках (ненумерованные списки). Этот вид списка используется так же достаточно часто, как и упорядочные списки. Разница между этими списками в том, что вместо цифр указываются черные маркеры для каждого элемента списка. Существует три вида маркеров это круг, диск и квадрат.
Для создания ненумерованного списка используется тег <ul> и его пара — закрывающийся тег </ul>, а элементы внутри так же заключаются в теги <li>. Тег <ul> является сокращением с английского языка Unsorted List и в переводе означает неупорядоченный список.
Ниже создадим пример обычного ненумерованного списка без использования атрибута type.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
</body> </html>
Если не указывать ни каких атрибутов, то по умолчанию маркеры примут вид в виде круга заполненного черным цветом.
Для изменения вида маркера используется атрибут type для тега <ul>. Ниже показаны варианты изменения вида маркеров.
- Элементы списка с маркером в виде круга type=»disc»
- Элементы списка с маркером в виде окружности type=» circle»
- Элементы списка с маркером в виде квадратов type=» square»
Нужно помнить, что вид маркеров может, манятся при смене шрифта или текста, а также может, отображается по-разному в разных браузерах. Ниже создадим пример всех вариантов ненумерованных списков, а результат и Вы сможете просмотреть, нажав на ссылочку демо.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
Указвываем атрибут type=»square».
</body>
</html>
Мы и рассмотрели еще один вид списков, который очень часто используется при верстке шаблонов сайта. На этот вид списка рекомендую уделить немного больше внимания, чем на остальные. Возможно, дочитав до конца этот урок, у Вас возник вопрос, а если мне нужен совсем другой маркер, например: какая-то «птичка». Это так же возможно реализовать. Для этого берется заранее подготовленная картинка в виде нужного маркера и уже с помощь CSS таблицы стилей вставляется наш новый маркёр в список. Ну, об этом немного позже. В следующем уроке мы будем завершать со списками и рассмотрим самый редкий вид списка определения.
<<< Предыдущий материал
Следующий материал >>>
Просмотреть демо: Демо
Скачать исходник: Скачать
- Нумерованные списки. Тег <ol>
- Создание якорных ссылок и Е-мэйл ссылок в HTML документе.
- Создание изображения в виде ссылки.
- Как вставить изображение в HTML.
- Тег iframe
- Чекбоксы HTML.
- Теги fieldset и legend.
- Создание таблицы в HTML документе.
Добавить комментарий:
Специальные и вложенные списки в Html коде
Третий и последний вид называется «списки определений» и задаются они с помощью трех тегов — DL, DT и DD. DL сообщает браузеру, что далее последует список определений.
Обычно такой вид используется (ну, или предполагалось, что он будет использоваться) для написания словарных статей, состоящих из терминов (заключенных в теги DT) и их описаний (заключенных в теги DD).
- Первый термин
- Описание
- Второй термин
- Его описание
Если вы посмотрите на приведенный выше пример, то заметите, что элемент DD (описание термина) сдвигается (на 40 пикселей) относительно элемента DT (самого термина).
Вообще, DL, DT и DD являются блочными тегами, причем, внутри элемента DT можно вставлять только контент со строчными тегами (получается, что внутри DT нельзя будет использовать блочные элементы заголовков и абзацев). А внутри тегов DD можно вставлять любые элементы и строчные и блочные.
Вложенный список
в Html создается по аналогии с простым, но внутри основного списка часть пунктов заключается еще раз в открывающий и закрывающий тег UL или OL.
Обратите внимание, что закрывающий LI того пункта, в котором будет создан вложенный пункт, ставится лишь после всего кода вложенного списка (это очень важно для его правильного отображения на web странице). Вложенный список может выглядеть примерно, так:
- Первый пункт основного нумерованного
- Второй пункт
- Первый элемент вложенного маркированного
- Второй
- Третий и последний пункт маркированного
- Третий элемент нумерованного
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Как вставить в HTML ссылку и картинку (фото) — теги IMG и A
Select, Option, Textarea, Label, Fieldset, Legend — теги Html формы выпадающих списков и текстового поля
Html формы для сайта — теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Embed и object — Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
Таблицы в Html — теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания
Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C
Теги Font (Face, Size и Color), Blockquote и Pre — устаревшее форматирование текста в чистом HTML (без использования CSS)
Iframe и Frame — что это такое и как лучше использовать фреймы в Html
Img — Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
Разница лишь в том, что этот тег строго сделан для нумерации списков. Название тега пришло от английского сокращения «Ordered List» — нумерованный список.
Синтаксис тега
Где атрибут type=»value»
может принимать следующие значения
- A
— задает маркеры в виде прописных латинских букв (A, B, C..); - a
— задает маркеры в виде строчных латинских букв (a, b, c..); - I
— задает маркеры в виде больших римских цифр (I, II, III, IV..); - i
— задает маркеры в виде маленьких римских цифр (i, ii, iii, iv..); - 1
(по умолчанию) — задает маркеры в виде арабских цифр (1, 2, 3..);
Атрибут start=»value»
задает начальное значение (стартовое значение) отчета.
Атрибут reversed
задает обратный счет (в случае необходимости).
Тег
- требует обязательного использования закрывающего тега
Для формирования элементов списка используется парный тег
. Между открывающим и закрывающим тегами располагаются отдельные слова, фразы, абзацы, изображения, куски кода и многое другое, являющееся содержимым маркированного списка.
Примечание
Внутри списка есть возможность изменять счет на свой. Для этого есть специальный атрибут value=»»
у тега
, которому присваивается какое-то числовое значение. Например
Пример 1. Нумерованный список html в виде латинских букв
Пример с заглавными буквами
- Элемент #1
- Элемент #2
- Элемент #3
Пример со строчными буквами
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
Пример 2. Нумерованный список html в виде римских букв
Пример с заглавными буквами
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
Пример со строчными буквами
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
Пример 3. Нумерованный список html разная позиция старта
Пример, который показывает возможности атрибута start
, который позволяет задавать стартовое значение счетчика.
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
Пример 4. Изменение счета в нумерованных списках html
Ниже представлен пример с возможностью менять значения счетчика с помощью атрибута value
при выводе новых элементов в тегах