Html разметка: Часть «Разметка текста» — HTML Academy

НОУ ИНТУИТ | Лекция | Разметка текста в HTML

< Лекция 5 || Лекция 6: 123 || Лекция 7 >

Аннотация: В лекции рассматриваются основные блочные и строковые элементы HTML, используемые для структурирования и форматирования текста.

Ключевые слова: HTML, блочный элемент, строковый элемент, закрывающий тег, samp, блог, группа, структурный тип, abbr, представление, форматирование, логический, acronym, акроним, Поисковый система, рейтинг, перенос текста, css, индекс, sup, заголовки, SPAN, class, разделы, параметр, меню, позиционирование

Структурирование текста

Как было отмечено в «Введение в HTML» , все элементы HTML делятся на блочные и строковые. Блочный элемент обычно информирует о структуре документа, начинается с новой строки и отделяется от предыдущего и последующего блока пустой строкой определенной ширины. Блочные элементы могут содержать строковые элементы. В данном разделе будут рассмотрены основные блочные элементы, предназначенные для структурирования текста.

Заголовки разделов страниц: элементы h2…H6

HTML предлагает шесть заголовков разного уровня, для задания которых используются элементы h2, h3, …, H6. Заголовки различных уровней призваны показать относительную важность секции, расположенной после заголовка и, по умолчанию, отображаются браузером различным размером шрифта. Так, элемент h2 представляет собой наиболее важный заголовок первого уровня, который, по умолчанию, отображается самым крупным шрифтом жирного начертания. А элемент H6 служит для обозначения заголовка шестого уровня, является наименее значительным и отображается самым мелким шрифтом. Таким образом, использование заголовков разного уровня позволяет структурировать документ по разделам, главам, параграфам и т.п., облегчая чтение, делая документ более понятным для считывателей экрана, а также для некоторых автоматических процессов. Следующий пример показывает создание заголовков различных уровней:

<h2>Заголовок 1-го уровня</h2>
<h3>Заголовок 2-го уровня</h3>
<h4>Заголовок 3-го уровня</h4>
<h5>Заголовок 4-го уровня</h5>
<H5>Заголовок 5-го уровня</H5>
<H6>Заголовок 6-го уровня</H6>

intuit.ru/2010/edi»>А на рисунке 6.1 представлен вид заголовков различного уровня в браузере.

Рис. 6.1.

Вид различных заголовков в браузере

Стандартные параграфы: элемент P

Неприятной особенность браузеров является то, что они не обрабатывают символы перевода строки. Т.е. текст, который разработчик набрал на своем компьютере, одновременно форматируя его, разделяя на абзацы и придавая ему какое-то логическое деление, браузер сначала преобразует, удалив все подряд идущие пробелы и переводы строк, а затем выведет на экран. При этом информация об абзацах будет утеряна. Чтобы этого не произошло, для логической организации абзацев используется специальный элемент P. Если закрывающего тега нет, считается, что конец параграфа совпадает с началом следующего блочного элемента. Например, оформить анекдот, приписываемый Даниилу Хармсу, в виде параграфа можно следующим образом:

<P>Гоголь только под конец жизни о душе задумался, 
 а смолоду у него вовсе совести не было.   
   Однажды невесту в карты проиграл. И не отдал.</P>

Предварительно форматированный текст: элемент PRE

Элемент PRE определяет блок предварительно форматированного текста. По умолчанию, любое количество пробелов, идущих в коде подряд, на веб-странице показывается как один. Элемент PRE позволяет обойти эту особенность и отображать текст так, как требуется разработчику. В большинстве браузеров текст, помеченный как предварительно форматированный, будет выводиться с помощью моноширинного шрифта (т.е. шрифта фиксированной ширины), что придает тексту вид как бы отпечатанного на машинке. Это является наследием программистов, которые использовали ранее шрифты фиксированной ширины для представления предварительно форматированного текста. Например, представленный ниже фрагмент кода выводит отрывок из стихотворения Владимира Маяковского «Блек энд Уайт» с помощью элементов P и SAMP. Результат представлен на рисунке 6.2.

Если
     Гаванну
             окинуть мигом -
рай-страна,
       страна что надо. 
<PRE>
Если
     Гаванну
             окинуть мигом -
рай-страна,
       страна что надо.
</PRE>

Рис. 6.2. Пример использования элементов P и SAMP

Внутри контейнера PRE допустимо применять любые теги, кроме тегов IMG, OBJECT, SMALL, SUB и SUP.

Дальше >>

< Лекция 5 || Лекция 6: 123 || Лекция 7 >

HTML-разметка

<<Назад  |  Содержание  |  Далее>>

 

HTML (HyperText Markup Language) не является языком программирования, он является языком форматирования, т.е. придания внешнего вида web-странице, при ее присмотре в браузере. Для разметки документа используются

теги. Теги заключаются в угловые скобки, и, за редким исключением, являются парными, т. е. существует открывающий и закрывающий тег. Например, чтобы отметить начало нового абзаца в документе ставится тег <p> (от paragraph). Тогда в конце абзаца обязательно должен ставиться закрывающий тег </p>.

При расстановке тегов соблюдается правило: закрываются теги в порядке обратном их появлению. Например, если слово в тексте должно быть выделено жирностью (тег <b> от bold) и одновременно курсивом (тег <i> от italic), то это может быть сделано одним из следующих способов:

<b><i>слово</i></b>, или <i><b>слово</b></i>.

Ниже приводится текст некоторого html-документа и результат его отображения в браузере:

 

<html>

<body bgcolor=#ffffff  text=#0000cc>

<h2>Доброе время суток, уважаемый посетитель!</h2>

<p><img src=»pic1. gif» align=»left»>Надеюсь, вы попали как раз туда, куда хотели. </p>

<p>Здесь вы найдете <a href=»verse.html»>стихи</a> , <a href=»song.html»>песни</a>

и <a href=»scen.html»>сценарии</a> для организации любых праздников. </p>

<p>А теперь специальный подарок к <font color=#ff0000><b>1 сентября</b></font></p>

<p>Он к «пятерочкам» привык — <br>

       Русский пять и пение. <br>

       Мне всегда его дневник <br>

       Портит настроение. </p>

</body>

</html>

Рис. 74. Отображение приведенной в примере html-страницы в окне браузера.

В приведенном примере использованы следующие теги:

<html> … </html> — указывает на то, что заключенный между этими тегами текст должен восприниматься как html.

<body> … </body> — тело html-документа. Параметр bgcolor (background color) задает цвет фона, text – цвет текста. Цвета задаются в шестнадцатеричной системе счисления по модели RGB. Например, #ffffff означает, R=#ff, G=#ff, B=#ff, т.

е. по максимуму каждого из трех цветов. Мы знаем, что смешение трех основных цветов в системе RGB в равных долях с максимальной интенсивностью дает чистый белый цвет.

<h2> … </h2> — заголовок первого уровня, задает определенное для данного стиля форматирование: размер шрифта, отступы до и после заголовка, выравнивание и т.п.

<p> … </p> — абзац текста.

<img src=»pic1.gif» align=»left»> — непарный тег img (от image), управляющий вставкой в гипертекстовый документ графических иллюстраций. В данном случае, вставляется графический файл с именем pic1.gif, находящийся в том же каталоге, что и данный html-документ. Если вы обратите внимание на URL-документа, отображенный на рисунке в строке “адрес”, то сможете определить, что данный документ был сохранен под именем “

index. html” в папке “Мои документы” на диске C. Параметр align управляет выравниванием иллюстрации относительно текста html-страницы. В данном случае значение параметра = “left”, задает выравнивание по левому краю и разрешает обтекание текстом.

<a href=»verse.html»> … </a> — тег вставки гиперссылки. При активации данной ссылки в окне браузера загрузится уже другой документ, который в данном случае также должен быть сохранен в той же папке и должен именоваться verse.html.

<font color=#ff0000> … </font> — выделение цветом. В данном случае цвет будет красным (R=#ff, G=#00, B=#00).

<b> … </b> — выделение жирностью.

<br> — непарный тег – принудительный разрыв строки (break) внутри текущего абзаца.

Существуют свои теги и для форматирования таблиц, и для организации списков. Освоить язык гипертекстовой разметки достаточно просто, и достаточно просто, при желании, создать и опубликовать в сети Интернет собственный web-сайт.

<<Назад  |  Содержание  |  Далее>>

HTML-тегов разметки

HTML-тегов разметки Нажмите на выбор здесь Команды «Непустые» теги Параметры «Пустые» теги или прокрутите страницу вниз.

Вернуться на главную страницу Teds HTML Tutorial

Тег разметки является фундаментальной характеристикой HTML. Каждый тег разметки представляет собой команду, помещенную между калитками или угловыми скобками, левой скобкой (<) и правой скобкой (>). Теги разметки , а не раскрываются веб-браузером; они невидимы.

В большинстве случаев теги разметки (содержащие команды ) идут парами, с текстом или графическим изображением, расположенным между тегами , начинающими , и , заканчивающимися тегами:

• текст или графическое изображение : контролирует или регулирует информацию о тексте или графическом изображении между двумя непустыми тегами разметки.

Пары тегов разметки называются непустыми тегами, поскольку что-то содержится между начальным и конечным тегами. Начальный тег и конечный тег идентичны, за исключением того, что косая черта (/) ставится перед командой конечного тега, чтобы сообщить браузеру, что команда выполнена.

Часто некоторые параметры включаются в начальный тег команды, помещаемый перед второй скобкой:

• PARAMETER1=»X» PARAMETER2=»Y» : предоставить дополнительные инструкции (такие как раскрашивание, измерение, расположение, выравнивание или другие виды) данных между тегами разметки.

Примечание. Хотя кавычки (» «) для дополнительных параметров будут включены во все примеры в этом руководстве, эти кавычки необязательный для большинства браузеров и обычно не нужно включать в документы с исходным кодом. Одной из наиболее распространенных ошибок в HTML-скриптах является пропуск одной пары кавычек («), из-за чего размеченная версия выглядит беспорядочной или бессмысленной. Это одна из причин, по которой полное удаление кавычек вокруг переменных параметров может быть лучшим вариантом. . Таким образом, типичная пара непустых HTML-тегов в исходном коде, где первый тег содержит команду вместе с несколькими параметрами будет выглядеть так: text

---

Некоторые теги HTML называются пустыми тегами, поскольку они состоят только из одного тега, а не из пары тегов. То есть пустой тег состоит только из тега и не имеет завершающего тега . Примеры непустых и пустых тегов будут приведены в других разделах.

Я рекомендую использовать ЗАГЛАВНЫЕ буквы для всех HTML-команд и связанных с ними параметров, потому что их легче отличить от обычного текста при создании или корректировке документа с исходным кодом HTML.

Перейти к структурированию тегов

Вернуться на главную страницу Teds HTML Tutorial

Авторские права принадлежат Теду М. Монтгомери, 1998 г. Все права защищены.

 

 

 

Теги HTML и форматирование – Ciga

Заголовки

Заголовок два

Заголовок три

Заголовок четыре

Заголовок пять

Заголовок шесть

Цитаты

Цитаты в одну строку:

Оставайтесь голодными. Оставаться глупым.

Многострочная цитата со ссылкой на цитату:

Люди думают, что сосредоточиться означает сказать «да» тому, на чем вы должны сосредоточиться. Но это совсем не то, что это означает. Это значит сказать «нет» сотне других хороших идей, которые существуют. Вы должны выбрать тщательно. На самом деле я так же горжусь тем, что мы не сделали, как и тем, что я сделал. Инновации говорят «нет» тысяче вещей.

Стив Джобс — конференция разработчиков Apple Worldwide, 1997

Таблицы

Необходимый8

Сотрудник
													. .
Джейн Доу	100 тысяч долларов	За все, что она ведет в блогах.
Фред Блоггс	100 миллионов долларов	Картинки стоят тысячи слов, верно? Итак, Джейн х 1000.
Джейн Блоггс	100 миллиардов долларов	С такими волосами?! Достаточно сказать…

Списки определений

Заголовок списка определений

Разделение списка определений.

Стартап

Стартап или стартап — это компания или временная организация, созданная для поиска воспроизводимой и масштабируемой бизнес-модели.

#dowork

Придуманная Робом Дирдеком и его личным телохранителем Кристофером «Большим Блэком» Бойкинсом, «Do Work» работает как само-мотиватор, чтобы мотивировать ваших друзей.

Делай это в прямом эфире

Я позволю Биллу О’Рейли объяснить это.

Неупорядоченные списки (вложенные)

• Список элемент One
  • Элемент один
    • СПИСОК ОДИН
    • СПИСОК ДВА
    • . три
    • Четвертый элемент списка
  • Второй элемент списка
  • Третий элемент списка
  • Четвертый элемент списка

  Заказанный список (вложенные)

  1. Элемент списка One
     1. Элемент списка One
        1. Элемент списка One
        2. Элемент Два
        3. .
        4. Четвертый элемент списка
     2. Второй элемент списка
     3. Третий элемент списка
     4. Четвертый элемент списка

     Теги HTML

     Эти поддерживаемые теги взяты из FAQ по коду WordPress.com.

     Тег адреса

     1 Бесконечный цикл
     Купертино, Калифорния 95014
     США

     Тег привязки (также известный как ссылка)

     Это пример ссылки.

     Тег аббревиатуры

     Аббревиатура srsly означает «серьезно».

     Тег аббревиатуры ( устарел в HTML5 )

     Аббревиатура ftw означает «for the win».

     Большой тег ( устарел в HTML5 )

     Эти тесты очень важны, но этот тег больше не поддерживается в HTML5.

     Cite Tag

     «Код — это поэзия». — Automattic

     Кодовая метка

     Позже в этих тестах вы узнаете, что word-wrap: break-word; станет вашим лучшим другом.

     Удалить тег

     Этот тег позволит вам зачеркнуть текст , но этот тег больше не поддерживается в HTML5 (используйте вместо ).

     Тег выделения

     Тег выделения должен выделять курсивом текст.

     Тег вставки

     Этот тег должен обозначать вставленный текст.

     Тег клавиатуры

     Этот малоизвестный тег эмулирует текст клавиатуры , который обычно оформлен как тег .

     Предварительно отформатированный тег

     Этот тег стилизует большие блоки кода.