Web-технологии

Кейно Павел Петрович

pavel@mati.ru

Лекция 2

Основы теории разметки. Введение в язык HTML

HTML

HTML (HyperText Markup Language, Язык гипертекстовой разметки) — язык, использующийся для разметки документов во Всемирной паутине.

HTML5

Веб-страница

Пример веб-страницы

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Привет, мир!</title>
  </head>
<body>
  <p>Это простейший текст абзаца для нашей первой web-
  страницы.</p>
</body>
</html>

Теги

Одиночные теги:
<тег атрибут1="значение" атрибут2="значение">

Двойные теги:
<тег атрибут1="значение" атрибут2="значение">...</тег>

Вложенность парных тегов

Правильное вложение: Правильное вложение
<div><p>Lorem <b>ipsum dolor</b> sit amet...</p></div>

Неправильное вложение: Неправильное вложение
<div><p>Lorem <b>ipsum <i>dolor</b> sit</i> amet...</div></p>

Атрибуты тегов

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Добавление формы</title>
  </head>
<body>
  <form action="self.php">
    <p><input type="text"></p>
    <p><input type="text" disabled></p>
  </form>
</body>
</html>

Элемент <!DOCTYPE>

DOCTYPE Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html> Для всех документов.

Типы тегов

Условно теги делятся на следующие типы:

Теги верхнего уровня

Теги заголовка документа

Теги, располагающиеся внутри <head>:

Блочные элементы

Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.

Блочные элементы

Строчные элементы

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

Строчные элементы

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

Заголовки

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовки в тексте</title>
  </head>
<body>
  <h1>Заголовок первого уровня</h1>
  <h2>Заголовок второго уровня</h2>
  <h3>Заголовок третьего уровня</h3>
  <h4>Заголовок четвертого уровня</h4>
  <h5>Заголовок пятого уровня</h5>
  <h6>Заголовок шестого уровня</h6>
</body>
</html>
Посмотреть результат

Абзацы

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Применение абзацев</title>
  </head>
<body>
  <p>В одних садах цветет миндаль, в других метет метель.</p>
  <p>В одних краях еще февраль, в других — уже апрель.</p>
  <p>Проходит время, вечный счет: год за год, век за век...</p>
  <p>Во всем — его неспешный ход, его кромешный бег.</p>
  <p>В году на радость и печаль по двадцать пять недель.</p>
  <p>Мне двадцать пять недель февраль, и двадцать пять — апрель.</p>
  <p>По двадцать пять недель в туман уходит счет векам.</p>
  <p>Летит мой звонкий балаган куда-то к облакам.</p>
  <p><i>М. Щербаков</i></p>
</body>
</html>
Посмотреть результат

Абзацы

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Применение абзацев</title>
  </head>
<body>
  <p>В одних садах цветет миндаль, в других метет метель.<br>
  В одних краях еще февраль, в других — уже апрель.<br>
  Проходит время, вечный счет: год за год, век за век...<br>
  Во всем — его неспешный ход, его кромешный бег.<br>
  В году на радость и печаль по двадцать пять недель.<br>
  Мне двадцать пять недель февраль, и двадцать пять — апрель.<br>
  По двадцать пять недель в туман уходит счет векам.<br>
  Летит мой звонкий балаган куда-то к облакам.<br>
  <i>М. Щербаков</i></p>
</body>
</html>
Посмотреть результат

Специальные символы

Имя Код Вид Описание
&nbsp; &#160;   неразрывный пробел
&copy; &#169; © знак copyright
&plusmn; &#177; ± плюс-минус
&quot; &#34; " двойная кавычка
&amp; &#38; & амперсанд
&lt; &#60; < знак "меньше"
&gt; &#62; > знак "больше"
&mdash; &#8212; длинное тире
&laquo; &#171; « левая двойная угловая скобка
&raquo; &#187; » правая двойная угловая скобка
Другие символы можно посмотреть в шпаргалке

Гиперссылки

<a href="URL">текст ссылки</a>
Запись абсолютных и относительных ссылок:
<a href="http://test.ru/book/primer1.html">Абсолютная ссылка</a>
<a href="primer1.html">Относительная ссылка</a>

Якоря

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Быстрый переход внутри документа</title>
  </head>
<body>
  <p><a id="top"></a></p>
  <p>...</p>
  <p><a href="#top">Наверх</a></p>
</body>
</html>

Вставка картинок

<img src="http://test.ru/img.jpg" alt="Тестовая картинка">

Допускаются форматы: JPEG, PNG, GIF, SVG.

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

Списки

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

Любой список представляет собой контейнер <ul>, который устанавливает маркированный список, или <ol>, определяющий список нумерованный. Каждый элемент списка должен начинаться с тега <li>.

Списки

Маркированный список

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Маркированный список</title>
  </head>
<body>
  <ul>
    <li>Чебурашка;</li>
    <li>Крокодил Гена;</li>
    <li>Шапокляк;</li>
    <li>Крыса Лариса.</li>
  </ul>
</body>
</html>
Посмотреть результат

Маркированный список

Атрибут type является устаревшим для тега ul в HTML5.
Код Пример
<ul type="disc">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>
  • Пункт 1
  • Пункт 2
<ul type="circle">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>
  • Пункт 1
  • Пункт 2
<ul type="square">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>
  • Пункт 1
  • Пункт 2

Нумерованный список

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Нумерованный список</title>
  </head>
<body>
  <ol>
    <li>создание пунктуальности (никогда не будете никуда
     опаздывать);</li>
    <li>излечение от пунктуальности (никогда никуда не будете
     торопиться);</li>
    <li>изменение восприятия времени и часов.</li>
  </ol>
</body>
</html>
Посмотреть результат

Нумерованный список

Тип списка Код HTML Пример
Арабские числа
<ol type="1">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ol>
  1. Пункт 1
  2. Пункт 2
Прописные буквы латинского алфавита
<ol type="A">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ol>
  1. Пункт 1
  2. Пункт 2
Строчные буквы латинского алфавита
<ol type="a">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ol>
  1. Пункт 1
  2. Пункт 2
Римские числа в верхнем регистре
<ol type="I">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ol>
  1. Пункт 1
  2. Пункт 2
Римские числа в нижнем регистре
<ol type="i">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ol>
  1. Пункт 1
  2. Пункт 2

Нумерованный список

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Нумерованный список</title>
  </head>
<body>
  <ol type="I" start="8">
    <li>Король Магнум XLIV</li>
    <li>Король Зигфрид XVI</li>
    <li>Король Сигизмунд XXI</li>
    <li>Король Хусбрандт I</li>
  </ol>
</body>
</html>
Посмотреть результат

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Список определений</title>
  </head>
<body>
  <dl>
    <dt>Тег</dt>
      <dd>Тег — это специальный символ разметки, который 
       применяется для вставки различных элементов на веб-страницу
       и для изменения их вида.</dd>
    <dt>HTML-документ</dt>
      <dd>Обычный текстовый файл, который может содержать в себе
       текст, теги и стили. Содержимое такого файла обычно
       называется HTML-код.</dd>
	<dt>Сайт</dt>
      <dd>Сайт — это набор отдельных веб-станиц, которые связаны
       между собой ссылками и единым оформлением.</dd>
  </dl>
</body>
</html>
Посмотреть результат

Таблицы

<table border="1" width="100%" cellpadding="5">
  <tr>
    <th>Ячейка 1</th>
    <th>Ячейка 2</th>
  </tr>
  <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>

Атрибуты тега <table>

Все являются устаревшими в HTML5:
border
Устанавливает толщину границы в пикселах вокруг таблицы. При наличии этого атрибута также отображаются границы между ячеек.
cellpadding
Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.
cellspacing
Задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет и входит в общее значение.

Атрибуты тегов <td> и <th>

colspan
Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.
Ячейка 1
Ячейка 2 Ячейка 3
rowspan
Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот атрибут имеет смысл для таблиц, состоящих из нескольких строк.
Ячейка 1 Ячейка 2
Ячейка 3

Валидатор W3C

Предназначен для проверки на соответствие документа стандартам W3C.

http://validator.w3.org

Лабораторная работа №1

Лабораторная работа №2

Сверстать страницу «о себе» с аналогичным форматированием, показанным в примере.

Лабораторная работа №3

Показать навыки работы с якорями, таблицами и списками (трех видов).

Полезные ссылки

Разработка: Викулин Максим