<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Cool Site</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<link href="s7a.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="logo"><img src="img/s7logo.png"></div>
<div class="menu">
<ul> CONTENT
<li><a href="">Startpage</a>
<li><a href="">Sometext1</a>
<li><a href="">Sometext2</a>
<li><a href="">Sometext3</a>
<li><a href="">About</a>
</ul>
<div class="counter"><p><img src="img/cnt.gif" alt="TOP100(88x31.gif)"></div>
</div>
<div class="content"><h1>LOREM IPSUM</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin gravida.
Phasellus tincidunt massa vel urna. Proin adipiscing quam vitae odio. Nullam eget tellus vitae tortor gravida scelerisque. In orci lorem, cursus imperdiet, ultricies non, hendrerit et, orci. Nulla facilisi.
<h2>Sed dictum</h2>
<p>Ut tincidunt lorem ac lorem. Duis eros tellus, pharetra id, faucibus eu, dapibus dictum, odio...
<p>Nulla sed nulla a consectetuer adipiscing elit. Proin gravida. Phasellus tincidunt massa vel urna. Proin adipiscing quam vitae odio.</p>
<h2>Donec velit</h2>
Nullam eget tellus vitae tortor gravida scelerisque. In orci lorem, cursus imperdiet, ultricies non, hendrerit et, orci. Nulla facilisi. Phasellus tincidunt massa vel urna. Proin adipiscing quam vitae odio. Nullam velit nisl, laoreet id, condimentum ut, ultricies id, mauris.</div>
</body>
</html>
Загальними для всіх сторінок сайту будуть ті елементи, які виділені на рис.1 червоним пунктиром. Якщо виділені фрагменти коду винести в окремі файли, а в основному файлі використовувати директиви SSI, можна істотно полегшити написання сайту, додаючи аналогічну структуру в інші сторінки
Подивіться, як буде виглядати вихідний код даної сторінки (sample.html), після винесення частини коду під зовнішні файли і використанні SSI (виділені директиви SSI-включень)
<!--#include virtual="s7logo.html"-->
<div class="content">
<h1>LOREM IPSUM</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin gravida. Phasellus tincidunt massa vel urna. Proin adipiscing quam vitae odio.
Nullam eget tellus vitae tortor gravida scelerisque.
In orci lorem, cursus imperdiet, ultricies non, hendrerit et, orci. Nulla facilisi.
<h2>Sed dictum</h2>
<p>Ut tincidunt lorem ac lorem. Duis eros tellus, pharetra id, faucibus eu, dapibus dictum, odio...
<p>Nulla sed nulla a consectetuer adipiscing elit. Proin gravida. Phasellus tincidunt massa vel urna. Proin adipiscing quam vitae odio.</p>
<h2>Donec velit</h2>
Nullam eget tellus vitae tortor gravida scelerisque. In orci lorem, cursus imperdiet, ultricies non, hendrerit et, orci. Nulla facilisi. Phasellus tincidunt massa vel urna. Proin adipiscing quam vitae odio. Nullam velit nisl, laoreet id, condimentum ut, ultricies id, mauris.
</div>
<!--#include virtual="s7menu.html"-->
<!--#include virtual="s7footer.html"-->
Код, що міститься у файлі s7logo.html, включає лише опис заголовка:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Cool Site</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<link href="s7a.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="logo"><img src="img/s7logo.png"></div>
Аналогічним чином рознесені по файлам і інші загальні елементи.
Для зручності позиціонування елементів на сторінці в цьому прикладі використано теги <div> з відповідним стилем оформленням, фрагмент файлу зовнішній таблиці стилів (s7a.css) наведено в лістингу 2.
