Html табуляция тег: Табуляция в HTML: 4 способа сделать отступ

Leave a Comment / Html / By /

Содержание

Создание Web-страницы с помощью языка HTML

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем.

Структура HTML документа
Объявление HTML
Заголовочная часть
Тело документа
Форматирование текста
Горизонтальные разделительные линии
Вопросы для самоконтроля
Справочник тегов

На главную

Структура HTML документа

Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использован любой текстовый редактор.

Обычно HTML-документ — это файл с расширением .html или .htm, в котором текст размечен HTML-тегами (англ. tag — специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Web-документа. Текст самих тегов Web -браузером не отображается. Все теги начинаются символом ´<´ и заканчиваются символом ´>´. Обычно имеется пара тегов — стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация: <p>Информация</p> Здесь стартовым тегом является тег <P>, а завершающим — </P>. Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках <> стоит символ ‘/’ (слэш). Браузер, читающий HTML-документ, отображает его в окне, используя структуру HTML-тегов. В каждом HTML-документе должны присутствовать три главных части: Объявление HTML; Заголовочная часть; Тело документа.

В начало

Объявление HTML

<HTML> и </HTML>. Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег <HTML> (в самом начале документа), а последним — </HTML> (в самом конце документа).

<HTML>
.
.
.
</HTML>

В начало

Заголовочная часть

<HEAD> и </HEAD>. Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках «Избранное (BookMark)». Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных.

Для того чтобы дать название своему HTML-документу текст помещается между тегами <TITLE> и </TITLE>.

<HTML>
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
</HTML>

В начало

Тело документа

Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами <BODY> и </BODY>. Первый из них должен стоять сразу после тега </HEAD>, а второй — перед тегом </HTML>. Тело HTML-документа — это место, куда автор помещает информацию, отформатированную средствами HTML.

<HTML>
<HEAD>
<TITLE> Моя первая страница
</HEAD>
<BODY>
. ……………………………….
</BODY>
</HTML>

Теперь мы можем написать HTML-код нашей странички:

<HTML>
<HEAD>
<TITLE>Моя первая страница
</HEAD>

<BODY>
Здесь будут мои страницы!
</BODY>

</HTML>

В начало

Форматирование текста

В разделе BODY все символы табуляции и конца строк браузером игнорируются и никак не влияют на отображение страницы. Поэтому перевод строки в исходном тексте HTML-документа не приведет к началу новой строки в отображаемом обозревателем тексте при отсутствии специальных тегов. Это правило очень важно помнить и не забывать ставить разделяющие строки теги, иначе у текста не будет абзацев, и он станет нечитаемым. Для начала новой строки используется тег <BR> (сокр. от англ. break — прервать). Этот тег приводит к отображению браузером дальнейшего текста с начала следующей строки. Закрывающий для него тег не используется. Он удобен, если требуется с какого-то места писать с новой строки без начала нового абзаца, например, в стихотворении. Повторное его использование позволяет вставить одну или несколько пустых строк, отодвинув следующий фрагмент страницы вниз. Сплошной текст без промежутков читается не очень легко, его неудобно просматривать и находить нужные места. Разбитый на абзацы, текст воспринимается гораздо быстрее. Для начала нового абзаца используется тег <P> (англ. paragraph — абзац). Этот тег, кроме начала новой строки, вставляет одну пустую строку. Но многократное повторение <P>, в отличие от <BR>, не приведет к появлению нескольких пустых строк, останется все та же одна пустая строка.

Внутри скобок тега кроме его названия могут размещаться также атрибуты (англ. atributes — атрибуты). Они отделяются от названия и между собой пробелами (одним или несколькими), а пишутся в виде имя_атрибута=»значение». Если значение не содержит пробелов, то кавычки могут быть опущены, но так делать не рекомендуется. Тег <P> может содержать атрибут ALIGN, определяющий выравнивание абзаца. По умолчанию абзац выравнен влево ALIGN=»left». Возможны также выравнивания вправо ALIGN=»right» и по центру ALIGN=»center». При использовании атрибутов, после форматируемого текста следует использовать закрывающий тег </P>. Если его нет, то новый тег <P> означает закрытие предыдущего, соответственно вложенные <P> невозможны. Выравнить текст по центру возможно также тегом <CENTER>. Теперь мы можем поместить на нашу Web-страницу некоторый текст с различным выравниванием:

<HTML>

<HEAD>
<TITLE>Моя первая страница</TITLE>

</HEAD>

<BODY>

<P align=center>Здесь будут мои личные страницы!
<P align=left>На них Вы сможете найти:<BR>- рассказ обо мне и о моих увлечениях;<BR>-мои фотографии.
<P align=right>С одной из моих страниц можно будет<BR>отправить мне электронное письмо.

</BODY>
</HTML>

Кроме использования этих тегов, для разрыва строк возможно использование символов конца строк и табуляций в самом HTML-документе. Для этих целей существует тег <PRE>. Весь текст, помещенный между тегами <PRE> и </PRE> будет выводиться без изменений, то есть со всеми концами строк и табуляциями. Например:

<PRE>Это текст написан
в две строки.</PRE>

В начало

Горизонтальные разделительные линии

В HTML-документе, кроме текста, могут содержаться горизонтальные разделительные линии. Они, как и текст, не требуют никаких внешних файлов. Тег <HR> выведет горизонтальную линию единичной толщины вдоль всей ширины страницы. Горизонтальная разделительная линия всегда приводит к разрыву строки, но пустых строк между линией и текстом не появляется. Тег <HR> может содержать несколько атрибутов. <HR SHADE> и <HR> дают контурную линию с трехмерным эффектом углубления. <HR NOSHADE> дает сплошную черную линию. Линия может не простираться во всю ширину страницы, а составлять лишь некоторую часть. Атрибут WIDTH задает ширину линии, в процентах от ширины всей страницы или в пикселях. Например, 50% — половина ширины страницы, 400 — ширина в 400 пикселов. Атрибут ALIGN может принимать значения, аналогичные его значениям для тега <P>, но выравнивание по умолчанию — по центру. Атрибут SIZE задает толщину линии в пикселях от 1 до 175; по умолчанию 1, но если <HR SHADE>, (линия — контурная), то добавляется толщина, необходимая для трехмерного эффекта углубления.

Линии, наряду с абзацами, позволяют выделить логические фрагменты текста. Но большое количество горизонтальных линий неприятно для посетителя вашей Web-страницы, поэтому после каждого абзаца их ставить не следует. Они больше подходят для выделения целых разделов.
В начало

Вопросы для самоконтроля


  1. Какие редакторы используются для записи HTML кода?
  2. Что называют тегом?
  3. С помощью какого программного средства можно просмотреть web-страницу?
  4. Какой тег сообщает программе что между ними заключен документ в формате HTML?
  5. <HEAD> и </HEAD>. Какая информация располагается между этими тегами?
  6. Что называют телом документа и какими тегами его обозначают?
  7. Какие теги для форматирования текста вы знаете?

В начало

Вернуться на главную

МБОУ г.Кургана «Средняя общеобразовательная школа №45» © 2015 — 2016

10 горячих клавиш VS Code, которые ускорят вашу работу — Блог HTML Academy

Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.

Быстро добавить комментарий

Windows — Ctrl + /

macOS — Command + /

Обычно чтобы добавить комментарий, нужно перейти в начало строки и дописать туда два слеша. Это медленно. Быстрее нажать в любом месте строки Ctrl + /, и строка закомментируется, если она ещё не. А если уже да, то комментарий исчезнет.

Больше статей о фронтенде и работе в айти в телеграм-канале.

Подписаться

Перейти к строке под номером

Windows — Ctrl + G

macOS — Control + G

Иногда отладчики внезапно сообщают, что на строке 953 случилась непоправимая инфернальная ошибка вселенной. Чтобы не выискивать вручную, не листать и не тратить на это время, нажмите Ctrl + G введите номер строки и спокойно спасайте вселенную.

Поменять строку местами с соседними

Windows — Alt + ↑ / ↓

macOS  Option + ↑ / ↓

Случается такое, что ваш алгоритм — не алгоритм. Всё пошло не так, а вместо числа 42 вывелось сообщение «Данные удалены». Кому-то для этого нужно переписать весь код, но иногда бывает достаточно поменять строки местами и всё заработает.

Alt и стрелки меняют текущую строку местами с соседними.

Дублировать строку

Windows  Shift + Alt + ↓ / ↑

macOS  Shift + Option + ↓ / ↑

Это для тех, кто не хочет копировать и вставлять несколько раз одно и то же.

Перейти к парной скобке

Windows  Ctrl + Shift + \

macOS  Shift + Command + \

Когда кода становится много, очень просто запутаться в закрывающих и открывающих скобках, непонятно, где какой блок, и вообще, что происходит. На помощь приходит Ctrl + Shift + \ — это хорошее дополнение к стандартной подсветке парных скобок в VS Code.

Переименовать переменную

Windows — F2

macOS — F2

Писали, писали, а старший разработчик пришёл и сказал, что ваши переменные a, b и c — дурной тон. Чтобы не выискивать их по всему документу и не менять руками, есть F2.

Отформатировать документ

Windows — Shift + Alt + F

macOS  Shift + Option + F

VS Code предложить установить расширение или выбрать из существующих, а потом красиво отформатирует документ — расставит по местам блоки, скобки, и сделает строки кода читаемыми.

Перейти к переменной

Windows — F12

macOS — F12

Иногда вообще непонятно, откуда взялась переменная, какая у неё область видимости, и где она объявлена. F12 перенесёт нас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.

Включить/выключить перенос слов

Windows — Alt + Z

macOS  Option + Z

Вкусовщина. Если строки кода или текст не вмещается в редактор по ширине, включите перенос.

Включить дзен-режим

Windows — Ctrl + KZ

macOS — Command + KZ

Лучшее решение для тех, кто входит состояние потока, когда пишет код. Дзен-режим скрывает все панели, разворачивает редактор на весь экран, и вы можете плыть в волнах кода и думать только о нём. Чтобы вернуться обратно в реальный мир, нажмите Escape.

Свойство размера вкладки CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Установите ширину символа табуляции в 16 пробелов:

pre {-moz-tab-size: 16;} /* Firefox */
pre {tab-size: 16;}

Попробуйте сами »

Определение и использование

Свойство tab-size указывает ширину символа табуляции.

В HTML символ табуляции обычно отображается как один пробел, за исключением некоторых элементов, как