Html разметка текста: Глава «Разметка текста» — HTML Academy – Разметка страницы HTML — с примерами

Содержание

Разметка страницы HTML — с примерами

Основные термины и понятия в HTML разметке:

  1. <Article>, <nav>, <header>, <footer> — HTML теги, которые используются для разделения информации на блоки.
  2. Футер — нижняя часть веб-страницы. Содержит в себе контактную информацию.
  3. Шапка — верхняя часть страницы. Содержит в себе логотип, а также навигационную панель.

В этой статье мы поговорим с вами о том, как создать каркас страницы, а также о том, в каких блоках располагать те или иные элементы.

Блочная верстка стала довольно популярной и используется практически везде. Раньше, в HTML 4, блочные конструкции создавались с помощью блоков div. Если открыть любой сайт 2012-2014 года, а затем открыть его исходный код, то вы увидите длинный и сложный код нагроможденный блоками <div>.

Такая конструкция не была плохой для пользователя, так как на отображение это никак не влияло. Проблемы были у разработчиков и у технической поддержки сайта.

Основная проблема — большое количество блоков <div>, их могло быть и до 50,100 и даже 200. Такое нагромождение могло вызвать путаницу в коде — многие разработчики очень часто путались в своем коде. Это делало разработку медленной.

HTML 5 изменил эту проблему, добавив несколько семантических блоков. Каждый блок был настроен под определенную информацию, как «nav» для навигационной панели, или «footer» для подвала.

Кроме этого, новая версия HTML уделила большое внимание семантическому ядру сайта. Поисковики имели лучшее понимание информации, которая расположена в определенном блоке.

Семантические элементы. HTML 5

Перед тем как говорить о разметке веб-страницы, давайте рассмотрим основные теги-контейнеры:

  1. <Header> — необязательный тег, который может использоваться для навигации, главного заголовка, либо же для размещения отдельного блока с информацией.
  2. <Nav> — контейнер для навигации страницы или сайта. Может находиться в теге header, но это необязательно. На странице может присутствовать несколько блоков <nav>.
  3. <Article> — блок статьи. Используется для размещения статей для сайта или блога, каких-либо публикаций или комментариев. Хорошо подходит для дублирования веб-страницы, так как содержимое очень легко изменяется.
  4. <Section> — разделяющий блок. Его основной функцией не является оборачивание информации в определенный блок. Чаще всего используется для разделения сайта на разделы и группирует их.
  5. <Aside> — блок для дополнительной информации. Чаще всего содержит в себе блок nav, при создании боковой панели. Располагается сбоку, может содержать блоки с рекламой, различными датами и ссылками.
  6. <Footer> — подвал сайта — блок-колонтитул. Обычно содержит в себе информацию об авторе статьи, сведения об авторском праве и контактную информацию. Располагается внизу, под всеми остальными блоками.

Существует ещё 7 HTML5 тегов, которые можно использовать для создания различных блоков. Они используются реже, поэтому мы не будем их рассматривать.

Разметка страницы

Когда мы познакомились с основными тегами-контейнерами, давайте приступим к созданию простого HTML каркаса. Откройте ваш HTML документ и запишите туда все стандартные теги, по типу <html>, <head>, <body> и <meta>.

Создание нашего макета будет проходить в 3 этапа:

  1. Создание шапки.
  2. Создание основных блоков.
  3. Создание футера.

Для начала необходимо создать шапку для нашей страницы.

Создаем тег <header>, а в нем располагаем заголовок(будет использоваться вместо логотипа) и список с пунктами меню.

Разметка страницы HTML

Создадим главный блок страницы. Это будет тег-контейнер <section>, в котором будет располагаться список преимуществ товара и кнопка перелистывания.

Далее приступаем к созданию основных блоков. Для них будем использовать теги <section>. Первый блок обернем в тег <article>, так как в нем будет располагаться публикация с информацией о продукте.

Второй блок будет содержать в себе прайс-лист и кнопку. Внутри создаем 3 блока <div>, в которых создаем списки с информацией. Ниже располагаем кнопку.

Разметка страницы HTML

Далее идет создание футера страницы

Теперь расположим подвал страницы, в котором будет находиться контактная информация и кнопки социальных сетей.

Создаем тег <footer> и записываем основную контактную информацию. Кроме контактов, нам необходимо разместить информацию о копирайте.

Разметка HTML

Заключение

Разметка страницы HTML

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

Если хотите, можете самостоятельно исследовать HTML-документ. Можете добавить туда какие-либо блоки или заменить информацию, по вашему усмотрению. Главное, не меняйте общую структуру документа, он нам ещё понадобится.

А если у вас возникли трудности с размещением элементов или записью HTML кода, то можете скачать наши исходники. Удачи в изучении!

Скачать пример разметки текста

Скачать пример разметки текста Теги:

Разметка текста с помощью HTML

Разметка текста с помощью HTML

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

×

В курсе «Структура HTML-документа» вы познакомились с тегами, необходимыми для создания простейшей HTML-страницы, и с некоторыми служебными тегами, которые не отображаются в браузере.

В этом курсе мы будем изучать теги для логической разметки текста. Использовать их можно только внутри тега <body>.

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


×

Для создания структуры больших текстов обычно используются заголовки. В текстовых редакторах есть возможность выделить часть текста, найти пункт «Заголовок» нужного уровня в меню, и применить его.

В языке HTML для выделения заголовков предусмотрено целое семейство тегов: от <h2> до <h6>. Тег <h2> обозначает самый важный заголовок (заголовок верхнего уровня), а тег

<h6> обозначает подзаголовок самого нижнего уровня.

На практике редко встречаются тексты, в которых встречаются подзаголовки ниже третьего уровня. Поэтому самыми часто используемыми тегами заголовков являются: <h2>, <h3> и <h4>.

Стоит отметить, что поисковые системы придают особое значение заголовкам, поэтому необходимо учиться правильно их использовать.


×

Списки часто используются в различных документах. Иногда, чтобы сделать список, пользователь просто нумерует строчки текста. Такой подход не является хорошим, так как в документе отсутствует логическая сущность «список».

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

Неупорядоченные (или маркированные) списки создаются с помощью тега

<ul> (Unordered List — неупорядоченный список), который может содержать внутри себя теги <li> (List Item, элемент списка), обозначающие «элемент списка».

<ul>
  <li>черный</li>
  <li>белый</li>
</ul>

×

Упорядоченный список создаётся с помощью тега <ol>, который может содержать внутри себя теги <li>.

Если элементы неупорядоченного списка по умолчанию отмечаются маркерами, то элементы упорядоченного списка — нумеруются.

Для упорядоченного списка можно задать атрибут start, который изменяет начало нумерации. Например, код:

<ol start="3">
  <li>раз</li>
  <li>два</li>
</ol>

Приведёт к такому результату:

  1. раз
  2. два

×

Создать многоуровневый список достаточно просто.

Сначала нужно создать список первого уровня, а затем внутрь любого элемента этого списка, между тегами <li> и </li>, добавить список второго уровня. При этом необходимо аккуратно закрывать все теги.

Пример правильного кода:
<ul>
  <li>1
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li>
  <li>2</li>
</ul>
Пример кода с ошибкой:
<ul>
  <li>1</li>
  <ul>
    <li>1.1</li>
    <li>1.2</li>
  </ul>
  <li>2</li>
</ul>


В примере с ошибкой вложенный список вставлен не внутрь элемента списка, а между элементами, что недопустимо.

Количество уровней в списках не ограничено. В многоуровневом списке можно использовать как упорядоченные, так и неупорядоченные списки.

В этом задании мы потренируемся работать с многоуровневыми списками.


×

Хорошо. Вы создали двухуровневый список. Теперь задание посложнее.

В этом задании вам нужно будет создать четырёхуровневый список, наподобие этого:

  1. Разметка
    1. Основы HTML
      1. HTML-теги
        1. парные
        2. одиночные
    2. Основы CSS
      1. Селекторы
        1. по типу
        2. по классу
        3. вложенные
    3. Стиль кодирования
  2. Работа с фотошопом
  3. Построение сеток
  4. Декоративные элементы
  5. Введение в JavaScript
  6. Прогрессивное улучшение

×

Список определений создаётся с помощью трёх тегов:

  1. <dl> (Definition List) обозначает сам список определений;
  2. <dt> (Definition Term) обозначает термин;
  3. <dd> (Definition Definition) обозначает определение термина.

Теги <dt> и <dd> пишутся парами внутри <dl>.

Например:

<dl>
  <dt>Термин</dt>
  <dd>Определение</dd>

  <dt>Второй термин</dt>
  <dd>И его определение</dd>

  <dt>Кошка</dt>
  <dd>Шерстяное изделие развлекательного характера</dd>
</dl>

×

Ещё раз отметим, что этот курс посвящён логической разметке текста, поэтому уделяется особое внимание смыслу элементов, их предназначению, а не визуальному форматированию.

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

Первые два тега предназначены, чтобы указать на важность слова или фразы.

Тег <strong> определяет важность отмеченного текста.

Тег <b> предназначен для выделения текста без придания ему особой важности.

Визуально оба тега одинаковы, они выделяют текст полужирным.

Лучше всего отличия этих тегов будут заметны людям, которые используют специальные настройки ОС, в частности, слепым и слабовидящим. Когда они включают функцию чтения текста, то «говорилка» будет интонацией выделять слова с тегом <strong>. То же самое касается и тегов <em> и <i>. Тег <em> «говорилка» будет выделять интонацией.

Отметим, что новый смысл тегу <b> придали в HTML5. Раньше это был тег, который просто делает текст полужирным. То есть он был предназначен только для визуального форматирования.


×

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

Тег <em> определяет текст, на который сделан особый акцент, меняющий смысл предложения.

Например, если мы хотим подчеркнуть, что Кекс не любит питаться укропом (он больше за тунца), а любит только гонять его по полу, то разметим текст так:

Инструктор Кекс любит <em>играть</em> с укропом.

Тег <i> обозначает текст, который отличается от окружающего текста, но не является более важным. Обычно так выделяют названия, термины, иностранные слова.

Например, если мы хотим указать, что инспектор — это какой-то специальный термин, то разметим текст так:

Обычно Кекс пользовался <i>инспектором</i> браузера для поиска ошибок.

Визуально оба тега одинаковы, они выделяют текст курсивом.

Новый смысл тегу <i> придали в HTML5. Раньше это был просто тег для выделения текста курсивом.


×

Иногда возникает необходимость вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен.

Для этого в HTML предусмотрен одиночный тег <br>.

Иногда этот тег используется для разбиения текста на «как бы абзацы», что является плохим подходом. Используйте для разметки абзацев тег <p>.

Одиночный тег <hr> используется для того, чтобы создать горизонтальную линию-разделитель. На внешний вид этой линии можно влиять с помощью атрибутов, но правильней делать это с помощью CSS (это будет изучаться в последующих курсах).


×

В HTML существует несколько тегов для обозначения цитат:

  • <blockquote> предназначен для выделения длинных цитат, которые могут состоять из нескольких абзацев. Тег выделяет цитату как отдельный блок текста с отступами.
  • <q> предназначен для выделения коротких цитат в предложениях. Текст внутри этого тега автоматически обрамляется кавычками.
  • <cite> используется для того, чтобы выделить источник цитаты, название произведения или автора цитаты.

HTML-текст

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

Теги для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства (свойство font-family).

Грамотно отформатированный текст дает понять поисковым системам, какие слова несут важную смысловую нагрузку, по каким из них предпочтительно ранжировать веб-страницу в поисковой выдаче. Вся текстовая информация, отображаемая на сайте, размещается внутри тега <body>.

Теги для HTML текста

  • Содержание:
  • 1. Теги заголовков: <h2...h6>
  • 2. Теги для форматирования текста: <b>, <em>, <i>, <small>, <strong>, <sub>, <sup>, <ins>, <del>, <mark>
  • 3. Теги для ввода «компьютерного» текста: <code>, <kbd>, <samp>, <var>, <pre>
  • 4. Теги для оформления цитат и определений: <abbr>, <bdo>, <blockquote>, <q>, <cite>, <dfn>
  • 5. Абзацы, средства переноса текста: <p>, <br>, <hr>

1. Теги заголовков

h

Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Теги <h2>...<h6> должны использоваться только для выделения заголовков нового раздела или подраздела. При использовании заголовков необходимо учитывать их иерархию, т.е. за <h2> должен следовать <h3> и т.д. Также не допускается вложение других тегов в теги <h2>...<h6>.

1.1. Тег <h2>

Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Тег <h2> должен быть уникальным для каждой страницы сайта. Рекомендуется прописывать тег в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.

1.2. Тег <h3>

Им обозначаются подзаголовки тега <h2>. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.

1.3. Тег <h4>

Показывает подзаголовки тега <h3>. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.

1.4. Теги <h5>, <h5>, <h6>

Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.
Для всех тегов доступны ‎глобальные атрибуты.

2. Теги для форматирования текста

2.1. Тег <b>

Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.
Для тега доступны ‎глобальные атрибуты.

2.2. Тег <em>

Отображает шрифт курсивом, придавая тексту значимость.
Для тега доступны ‎глобальные атрибуты.

2.3. Тег <i>

Отображает шрифт курсивом.
Для тега доступны ‎глобальные атрибуты.

2.4. Тег <small>

Уменьшает размер шрифта на единицу по отношению к обычному тексту.
Для тега доступны ‎глобальные атрибуты.

2.5. Тег <strong>

Задаёт полужирное начертание шрифта, относится к тегам логической разметки, указывая браузеру на важность текста.
Для тега доступны ‎глобальные атрибуты.

2.6. Тег <sub>

Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.
Для тега доступны ‎глобальные атрибуты.

2.7. Тег <sup>

Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.
Для тега доступны ‎глобальные атрибуты.

2.8. Тег <ins>

Выделяет текст в новой версии документа, подчёркивая его.
Для тега доступны следующие атрибуты: cite, datetime.

2.9. Тег <del>

Перечёркивает текст. Используется для выделения текста, удаленного из документа.
Для тега доступны следующие атрибуты: cite, datetime.

2.10. Тег <mark>

Применяется для выделения фрагментов текста в справочных целях, окрашивая блок символов желтым цветом.
Для тега доступны ‎глобальные атрибуты.

3. Теги для ввода «компьютерного» текста

3.1. Тег <code>

Служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом.
Для тега доступны ‎глобальные атрибуты.

3.2. Тег <kbd>

Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом.
Для тега доступны ‎глобальные атрибуты.

3.3. Тег <samp>

Применяется для выделения результата, полученного в ходе выполнения программы. Отображается моноширинным шрифтом.
Для тега доступны ‎глобальные атрибуты.

3.4. Тег <var>

Выделяет имена переменных, отображая курсивом.
Для тега доступны ‎глобальные атрибуты.

3.5. Тег <pre>

Позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются.
Для тега доступны ‎глобальные атрибуты.

4. Теги для оформления цитат и определений

4.1. Тег <abbr>

Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, она появляется при наведении курсора мыши на текст.
Для тега доступны ‎глобальные атрибуты.

4.2. Тег <bdo>

Используется для замещения текущего направления текста, т.е. текст в теге отображается зеркально.
Для тега доступен атрибут dir.

4.3. Тег <blockquote>

Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.
Для тега доступен атрибут cite.

4.4. Тег <q>

Используется для выделения коротких цитат. Браузерами заключается в кавычки.
Для тега доступен атрибут cite.

4.5. Тег <cite>

Применяется для выделения цитат, названий произведений, сносок на другие документы.
Для тега доступны ‎глобальные атрибуты.

4.6. Тег <dfn>

Позволяет выделить текст как определение. Несмотря на наличие специального тега, рекомендуется выделять текст силами CSS.
Для тега доступен атрибут title.

5. Абзацы, средства переноса текста

5.1. Тег <p>

Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em, при этом отступы соседних абзацев «схлопываются».
Для тега доступны ‎глобальные атрибуты.

5.2. Тег <br>

Переносит текст на следующую строку, создавая разрыв строки.
Для тега доступны ‎глобальные атрибуты.

5.3. Тег <hr>

Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.
Для тега доступны ‎глобальные атрибуты.

Акцентирование (выделение) текста в HTML — Разметка текста — codebra

Акцентировать текст в большом количестве информации – хорошая идея. Ведь чтец может не заметить нужной, важной или еще какой-то информации, которую вы хотите донести. Например, я тоже акцентирую текст: теги, стили, атрибуты, ключевые слова, ссылки и прочее я выделяю своим цветом, но делаю я это при помощи стилей. В HTML предусмотрены стандартные «выделители» текста: жирное начертание, косое начертание, подчеркнутое начертание, зачеркнутое начертание, больше размера, меньше размера. Пробежимся по всем элементам акцентирования.

Жирный текст

Всеми известный жирный шрифт, который можно увидеть везде. Для этого было разработано два тега <b> и <strong>. Тег <b>, более распространенный. Эти теги не одинаковы, хоть и результат схож. Различие заключается в том, что тег <b> определяет физическую жирность текста, а тег <strong> определяет важность этого текста и выделяет его жирным начертанием. Но, большое «но», в современных браузерах их права «уравняли», они стали равнозначными (эквивалентными). Такая же ситуация и у тегов <i> и <em>. Следовательно, выгоднее использовать тег, который короче. Далее пример:

Код HTML

<b>Жирный текст</b>

Курсивный текст

За акцентирование курсивным шрифтом, отвечают теги <i> и <em>. Как сказано выше, они различны по своей направленности, но в современных браузерах эквивалентны. Далее пример:

Код HTML

<i>Курсивный текст</i>

Подчеркнутый текст

Акцентировать текст подчеркнутым шрифтом можно при помощи тега <u>. Этот тег осуждают спецификацией HTML и рекомендуют использовать стили, с чем я и соглашусь. Я обязательно напишу эквиваленты тегов акцентирования в CSS. Далее пример:

Код HTML

<u>Подчеркнутый текст</u>

Зачеркнутый текст

Для того чтобы зачеркнуть текст, используют два эквивалентных тега: <s> и <strike>. Эти два тега осуждают и рекомендуют взамен им использовать стили. А тег <strike> категорически запрещен в HTML5. Далее пример:

Код HTML

<strike>Зачеркнутый текст</strike>

Крупнее и мельче обычного текста

Акцентировать текст, можно и увеличив размер это текста. Для этого есть тег <big>. Чтобы текст был мельче обычного, применяют тег <small>. Но все же выгодно использовать всегда стили CSS. Далее пример:

Код HTML

<big>Крупнее текст</big>

Замена жирного текста стилями CSS

Есть такое свойство в CSS – font-weight. Оно принимает много значений: font-weight:bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900. Чтобы сделать текст самым жирным, нужно использовать значение font-weight: 900. О нем мы еще поговорим в следующих уроках.

Замена курсивного текста стилями CSS

В CSS есть аналог тегу <i> (Курсивный текст). Это свойство font-style. Далее пример:

Код HTML

<span class = "i">Курсивный текст</span>

Код CSS

.i {
font-style: italic;
}

Замена подчеркнутого текста стилями CSS

Тег <u> осуждается спецификацией HTML и рекомендуется использовать стили. Аналогом может служить свойство text-decoration. Я обычно его использую, чтобы убрать подчеркивание у ссылок (значение none), но в этом случае нам нужно добавить подчеркивание (значение underline). Далее пример:

Код HTML

<span class = "u">Подчеркнутый текст</span>

Код CSS

.u {
text-decoration: underline;
}

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>

Рис. 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-сайт.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *