Можно ли повторить контент после разрыва страницы? Можете ли вы обнаружить разрыв страницы? - PullRequest
Новая
       74

Можно ли повторить контент после разрыва страницы? Можете ли вы обнаружить разрыв страницы?

0 голосов
/ 05 марта 2020

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

Текущее поведение 

A 1 i   What is the capital of Peru?
    ii  What is the capital of Brazil?
    iii What is the capital of Equador?
  2 i   What is the population of France?
    ii  What is the population of Spain?
___________________________________________
    iii What is the population of Italy?

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

Желаемое поведение 

A 1 i   What is the capital of Peru?
    ii  What is the capital of Brazil?
    iii What is the capital of Equador?
  2 i   What is the population of France?
    ii  What is the population of Spain?
___________________________________________
A 2 iii What is the population of Italy?

Есть ли способ сделать это с CSS? Я не понимаю, как будут работать свойства CSS page-break. Иначе, может быть, Javascript? Кстати, я буду использовать wkhtmltopdf для преобразования html в pdf.

Добавлен пример кода. 

td, th {
  vertical-align: top;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" typZe="text/css" href="css/main.css">
</head>
<body>

<table style="height: 202px; width: 557px;">
  <thead>
  <tr>
    <th>Main</th>
    <th>Sub</th>
    <th>Subsub</th>
    <th>Question</th>
    <th>Marks</th>
  </tr>
  </thead>

  <tbody>
  <tr>
    <td rowspan="6">1</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 1</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 2</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>
      <p>Here is a question 3</p>
    </td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 4</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 5</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 6</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="3">2</td>
    <td>a</td>
    <td>&nbsp;</td>
    <td>Here is a question 7</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 8</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 9</td>
    <td>
      <p>1.0</p>
    </td>
  </tr>
  <tr>
    <td rowspan="6">3</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 10</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 11</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>Here is a question 12
    </td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 13</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 14</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 15</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="6">4</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 16</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 17</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>
      <p>Here is a question 18</p>
    </td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 19</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 20</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 21</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="6">5</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 22</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 23</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>
      <p>Here is a question 24</p>
    </td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 25</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 26</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 27</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="3">6</td>
    <td>a</td>
    <td>&nbsp;</td>
    <td>Here is a question 28</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 29</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 30</td>
    <td>
      <p>1.0</p>
    </td>
  </tr>
  <tr>
    <td rowspan="6">7</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 31</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 32</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>Here is a question 33</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 34</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 35</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 36</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="6">8</td>
    <td rowspan="3">a</td>
    <td>i</td>
    <td>Here is a question 37</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 38</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>iii</td>
    <td>
      <p>Here is a question 39</p>
    </td>
    <td>1.0</td>
  </tr>
  <tr>
    <td rowspan="2">b</td>
    <td>i</td>
    <td>Here is a question 40</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>ii</td>
    <td>Here is a question 41</td>
    <td>1.0</td>
  </tr>
  <tr>
    <td>c</td>
    <td>&nbsp;</td>
    <td>Here is a question 42</td>
    <td>1.0</td>
  </tr>
  </tbody>
</table>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 09 марта 2020

Используя page-break-after: avoid; в CSS, вы можете указать сайту избегать разрывов страниц при печати указанного объекта, если это возможно. В качестве альтернативы вы можете установить классы с помощью page-break-after или page-break-before, чтобы принтер знал, когда он должен сдвинуть или оставить их. Я надеюсь, что это поможет, и вот документация, которую я использовал для справки.

W3Школы: https://www.w3schools.com/cssref/pr_print_pageba.asp
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

0 голосов
/ 08 марта 2020

В приведенном ниже коде используется адаптивная сеточная система и свойство CSS page-break-inside.

В основном мы установим значение свойства page-break-inside на avoid, что означает, что отображение полный элемент на той же странице и не разбивать его на разрыв страницы. Это означает, что весь элемент будет отображаться на одной странице.

В вашем случае мы объединим всю основную группу в один элемент div и назначим свойство page-break-inside. И чтобы получить табличную структуру, мы будем использовать сетку CSS, строки и столбцы.

Теперь этот код не копирует основной q.no, sub q.no при разрыве страницы. Но он сохраняет все вопросы одного и того же основного q.no на одной странице.

Этот код также может быть реализован с помощью циклов for для динамического заполнения страницы.

Обратите внимание на print CSS класс. Он присваивается строке, в которой мы создаем новый главный вопрос. Если это отвечает вашим целям, я могу помочь вам спроектировать for l oop, если он кажется сложным ... 

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto {
  position: relative;
  width: 100%;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

@media print {
  .print {
    page-break-inside: avoid;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div class="row print">
    <div class="col-1"> 1 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 2 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 3 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 4 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 5 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 6 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row print">
    <div class="col-1"> 7 </div>
    <div class="col-11">
      <div class="row">
        <div class="col-1"> a </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> b </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-1"> c </div>
        <div class="col-11">
          <div class="row">
            <div class="col-1">i</div>
            <div class="col-10">Here is question 1</div>
            <div class="col-1">1.0</div>
          </div>
          <div class="row">
            <div class="col-1">ii</div>
            <div class="col-10">Here is question 2</div>
            <div class="col-1"> 1.0 </div>
          </div>
          <div class="row">
            <div class="col-1">iii</div>
            <div class="col-10">Here is question 3</div>
            <div class="col-1"> 1.0 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
...