Back to top

HTML

В курсе рассматривается синтаксис языка разметки, вводятся понятия HTML-тегов и атрибутов, приводятся примеры структурирования и группирования материалов веб-страниц, создания нумерованных и ненумерованных списков, размещения картинок и разметки таблиц.

Таблицы

Для создания таблиц в языке HTML применяются следующие основные теги:

  • <table> — определяет границы таблицы
    • <tr> — ряд данных
      • <th> — ячейка таблицы с заголовком
      • <td> — простая ячейка таблицы

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

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

Заголовок и разделы таблицы

  • <table>
    • <caption> — заголовок таблицы
    • <thead> — вступительная часть таблицы
    • <tbody> — основная часть таблицы
    • <tfoot> — заключительная часть таблицы

Объединение ячеек таблицы

Для объединения соседних ячеек таблицы используются атрибуты colspan и rowspan для тегов <th> и <td>.

  • colspan — объединение ячеек из соседних колонок таблицы
  • rowspan — объединение ячеек из соседних рядов таблицы

Размещение таблицы в теге figure

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

  • caption vs figcaption

Если таблица является единственным содержимым тега <figure> то для заголовка таблицы лучше использовать тег <figcaption>, а не <caption>.

Оформление таблицы с помощью CSS

  • Ширина таблицы
  • Внутренние отступы
  • Рамки и слияние рамок (border-collapse)
  • Выравнивание содержимого ячеек (text-align)
27 октября 2015 г.

Структурирование и группирование материалов веб-страниц

Структурирование и группирование материалов на странице осуществляется с помощью тегов <article> (статья), <section> (секция), <nav> (навигация), <aside> (побочный материал), <header> ("шапка"), <footer> ("подвал"), <p> (абзац), <hr> (разрыв), <pre> (форматированный текст), <blockquote> (длинные цитаты), <ol> (нумерованный список), <ul> (ненумерованный список), <figure> (иллюстрации и диаграммы), <div> (разделы), <main> (основной материал).

22 сентября 2015 г.

Введение в HTML

HTML - это компьютерный язык для создания сайтов в Интернете. Сокращение HTML происходит от английского «HyperText Markup Language», что дословно переводится как «язык гипертекстовой разметки». Гипертекстом называются страницы в Интернете, по которым посредством гиперссылок могут перемещаться пользователи. Таким образом, язык гипертекстовой разметки - это язык разметки страниц в Интернете.

8 сентября 2015 г.

Карты изображений

Карты изображений (от англ. image map) или как их еще называют карты ссылок, позволяют привязать гиперссылки к различным частям одного изображения, созданного с помощью тега img.

2 сентября 2015 г.

Изображения

Для размещения картинок в веб-страницы в языке гипертекстовой разметки используется тег img (от англ. image — изображение).

2 сентября 2015 г.