Механізм створення динамічних Web-сторінок
КУРСОВА РОБОТА
по дисципліні:
"Програмування та підтримка
Web-застосувань"
-й семестр
на тему:
"Механізм створення динамічних
Web-сторінок "
Анотація
В курсовій роботі був розроблений web-сайт
"Творча майстерня SakhNYAsha design studio". Цей web-сайт може
зацікавити багатьох, адже пропонує широкий вибір хенд-мейд виробів із
полімерної глини.
Якість сайту була досягнена за рахунок
використання сучасних технології розробки web-додатків, що забезпечують
механізм створення динамічних web-сторінок.
Web-сайт наповнювався інформацією і елементами
поетапно, що забезпечують структурування інформації, стилізацію, розширення
можливості графіки, введення елементів HTML 5, контроль відповідності
стандартам HTML 4, 5 (з конкретним зазначенням відповідностей і
невідповідностей), забезпечення взаємодії серверної частини web-додатків з
клієнтською частиною, застосування технології Ajax.
Зміст
Вступ
1. Опис предметної області
2. Реалізація поставленого завдання
2.1 Структура клієнтської частини
2.2 Вибір елементів HTML4 і HTML5 для представлення контенту
2.2.1 Структурування інформаційного наповнення сайту
2.2.2 Стилізація
2.2.3 Використання форм
2.2.4 Введення елементів HTML5 та CSS3
2.2.5 Використання svg-графіки
2.3 Забезпечення взаємодії серверної частини web-додатків з
клієнтською частиною
2.3.1 Програмування скриптів на стороні клієнта засобами JavaScript
2.3.2 Серверна частина web-додатку
2.3.2.1 Використання PHP та бібліотек jQuery і Ajax
Висновки
Посилання та література
Додатки
Вступ
До теперішнього часу існує безліч технологій
створення web-сторінок, без яких не може обійтися web-майстер. Але основою при
розробці web-документів є, звичайно, мова розмітки HTML з використанням JavaScript, мови web-програмування PHP і Ajax.
У мові HTML є безліч тегів, серед яких: теги
створення заголовка документа, задання параметрів шрифту, проведення ліній,
вставки гіперпосилань, вставки графічних елементів і т.д. У підсумку, web-сторінка, крім
тексту і посилань, може містити графіку, звуки, відео, тобто мати такий вигляд,
який користувач і бачить на екрані комп'ютера.
Отримати уявлення про те, як виглядає код HTML
можна якщо відкрити в браузері будь-яку web-сторінку і переглянути
код HTML. При цьому можна побачити, як створена та чи інша сторінка - це
стане в нагоді при розробці HTML документів. Однак не варто захоплюватися тільки
цією стороною навчання HTML, щоб створювані документи не були погіршеним
варіантом чужих сторінок.(англ. PHP: Hypertext Preprocessor - PHP:
гіпертекстовий препроцесор), попередня назва: Personal Home Page Tools -
скриптова мова програмування, була створена для генерації HTML - сторінок на
стороні web-сервера.- мова, яка може бути вбудована безпосередньо в HTML-код
сторінок, які, в свою чергу коректно будуть оброблені PHP-інтерпретатором.
Механізм РНР просто починає виконувати код після першої екрануючої
послідовності (<?) і продовжує виконання до того моменту, коли він зустріне
парну екрануючу послідовність (? >).- назва реалізації стандарту мови
програмування ECMAScript компанії Netscape, базується на принципах прототипного
програмування.має низку властивостей об’єктно-орієнтованої мови, але завдяки
концепції прототипів підтримка об’єктів в ній відрізняється від традиційних мов
ООП. Крім того, JavaScript має ряд властивостей, притаманних функціональним
мовам, - функції як об’єкти першого рівня, об’єкти як списки, каррінг
(currying), анонімні функції, замикання (closures) - що додає мові додаткову
гнучкість.(Asynchronous JavaScript And XML) - підхід до побудови користувацьких
інтерфейсів web-додатків, за яких web-сторінка, не перезавантажуючись, у фоновому
режимі надсилає запити на сервер і сама звідти довантажує потрібні користувачу
дані. AJAX - один з компонентів концепції DHTML.
сайт інформація стилізація елемент
1.
Опис предметної області
На сьогоднішній день досить популярною стає
концепція екологічно чистого життя і більшість споживачів намагаються обирати
екологічно чисті продукти, загалом це хенд-мейд вироби, тобто вироби зроблені
не фабрично, а вручну.
Тому тема курсової робити присвячена екологічно
чистим продуктам, а точніше - Творчій майстерні "SakhNYAsha design studio", яка
виготовляє прикраси з полімерної глини - екологічно чистого матеріалу. Загалом,
вироби з такого матеріалу є досить міцними, легкими, довго носяться і
виглядають ефектно, незважаючи на їх невисоку собівартість. До того ж такі
вироби є досить популярними і поширеними у всьому світі, адже полімерна глина у
широкому продажі з’явилася у 1964р. і досі не втрачає своєї популярності.
Вироби з полімерної глини дуже популярні у дівчат-підлітків, досить часто такі
вироби обирають як подарунки, як предмети інтер’єру та декору, як весільні
букети і т.п. Тому займатись таким ділом прибутково вигідно.
Але щоб мати прибуток потрібно мати замовників. А
для цього необхідно продемонструвати свої вироби потенційним покупцям та
зацікавленим особам. І саме тому розробляється даний web-сайт, який буде
демонструвати різні вироби з полімерної глини, надаватиме інформацію про сам
матеріал, міститиме в собі корисні поради для початківців та процес
виготовлення тих чи інших прикрас.
2.
Реалізація поставленого завдання
2.1
Структура клієнтської частини
Структура сайту представляє собою змішану ієрархію. Така
форма дуже часто використовується при плануванні сайтів. Всередині форми
міститься лінійні ділянки, пропуски, павутини і навіть решітки.
Сайт складається з головної сторінки та меню яке
має посилання на інші сторінки: "Головна", "Новини",
"Майстер-класи", "Каталог виробів", "Контакти",
"Блог майстра" (Рисунок 1).
Рисунок 1. Структурна схема сайту
"Головна" - стартова сторінка,
на які розміщені посилання на інші розділи та присутні посилання на сторінки
"ВКонтакте", посилання на ресурс "Вікіпедія" та вхід для
адміністратора сайту (Рисунок 2).
Сторінка новин містить в собі такі новини:
надходження тих чи інших виробів, оновлення асортименту, найближчі виставки та
майстер-класи, посилання зовнішні ресурси (на сайти виставок та ін.).
Сторінка "Блог майстра" має таку ж
структуру що і сторінка "Новини" (Рисунок 3).
Рисунок 2. Макет головної сторінки
Рисунок 3. Макет сторінки новин
Сторінка "Каталог виробів" містить в собі
посилання на такі підрозділи (категорії): Сережки, Кулони і буси, Персні,
Брошки, Браслети, Різне. Кожен підрозділ представлений тематичним набором
ілюстрацій. Таку ж саму структуру має і сторінка "Майстер-класи" (в ролі підрозділів -
назви майстер-класів) (Рисунок 4, Рисунок 5).
Рисунок 4. Макет сторінки
Рисунок 5. Макет сторінки
"Каталог виробів" "Майстер класи"
Сторінка "Контакти" містить посилання на зовнішні
ресурси (пошту майстра) (Рисунок 6).
Рисунок 6. Макет сторінки "Контакти"
2.2
Вибір елементів HTML4 і HTML5 для представлення контенту
2.2.1
Структурування інформаційного наповнення сайту
В мові розмітки HTML був визначений стиль
заголовків і розміщений на сторінках сайту. Використовувались теги <H3>, <Cite>, <P>, <Font>, які були необхідні для
редагування тексту.
Визначені гіпертекстові посилання між сторінками.
Текстове наповнення головної сторінки складається
із звернення до відвідувачів сайту, опису матеріалів, рубрики
"Новинки", "Акції" та контактів (в кінці сторінки).
Сторінка новин містить в собі такі новини:
надходження тих чи інших виробів, оновлення асортименту, найближчі виставки та
майстер-класи та ін.
Сторінка майстер-класів - це набір коротких
текстових описів того чи іншого майстер-класу та безпосереднього посилання на
нього (тобто посилання на окрему сторінку з описом майстер-класу).
Сторінка каталогу виробів фактично не має
текстового наповнення (за моделлю сайту, наповнення цієї сторінки - це меню з
категоріями виробів (текстове та окремо зображення-гіперпосилання)).
Сторінка "Блог майстра" представляє
собою online-щоденник майстра, тобто інформаційне наповнення залежить від
майстра.
Текстове наповнення сторінки контактів - це
посилання на групу ВК та e-mail майстра.
2.2.2
Стилізація
В курсовій роботі використовувались таблиці, як
блок для розміщення контенту і як невід’ємний елемент в дизайну сайту. Всі
сторінки були реалізовані за допомогою таблиць. Також в них були розміщенні
гіпертекстові посилання для переходу між сторінками.
На основі банерів було реалізовано
карти-зображення (верхній банер - посилання на головну сторінку сайту, нижній
банер - посилання на групу ВК та пошту).
На головній сторінці в рубриці звернення до
відвідувачів присутнє зображення-посилання на сторінку майстра ВК. Також було
реалізовано gif-анімацію, яка розміщена на головній сторінці у рубриках
"Новинки" та "Акції"
Сторінки "Новини",
"Майстер-класи" та "Блог майстра", "Каталог
виробів" містять окремі блоки (таблиці) з інформацією, посиланнями та
зображеннями.
Сторінки контактів повністю реалізована за
допомогою однієї таблиці, в комірках якої розміщені інші елементи (таблиці,
зображення, текст і т.д.)
.2.3
Використання форм
В даній курсовій роботі використовувалися форми.
Це потрібно для того, щоб можна було зайти на сайт, зареєструватися на сайті,
залишити коментар або ж зв’язатися з майстром.
На сторінці "Контакти" було реалізовано
форму "Зв’яжіться зі мною", яка включає такі поля:
"Прізвище", "Ім’я", "E-mail", "Пароль",
"Рік народження", Стать, поле вводу повідомлення та кнопок
"Відправити", "Відмінити".
Поля "Прізвище", "Ім’я",
"E-mail", "Пароль", "Рік народження" є
обов’язковими для заповнення. Якщо хоча б одне з полів не заповнене, то
браузером видається повідомлення про обов’язковість цього поля. Поле "Рік
народження" дає змогу вибрати дату свого народження за допомогою
спеціальних кнопок. Значення цього поля від 1910 до 2013 року. При вводі
неправильних даних браузер видає відповідне повідомлення.
2.2.4
Введення елементів HTML5 та CSS3
В даній роботі використовувалися такі теги як
<header>, <navigation>, <section>, <article>, <footer>, які є
елементами HTML5. За допомогою них було розбито на секції сторінку новин. Це
потрібно для того, щоб було набагато легше орієнтуватися в коді сторінки та
полегшити процес внесення змін у певні блоки сторінки.
Значення тегів:
· <header> містить в
собі верхній банер сторінки
· <navigation> -
панель навігації
· <section> - блок новин
в якому кожна новина міститься в тегу <article>
· <footer > - нижній
банер сторінки
2.2.5
Використання svg-графіки
Svg-графіка - це векторна графіка, яка досить
часто використовується при створенні web-сторінок. Задається тегом <object>. Може
створюватись за рахунок прописання параметрів в файлі з розширенням *. svg або
ж за допомогою спеціальних конверторів.
На сторінці "Блог майстра" реалізована
заливка фона градієнтом та присутні svg-зображення.
Верхній, нижній банери та обрамлення - це
png-зображення які були конвертовані в svg-зображення за допомогою
рекомендованих конверторів.
Інші зображення створювалися безпосередньо в
svg-редакторах
.3
Забезпечення взаємодії серверної частини web-додатків з клієнтською частиною
2.3.1
Програмування скриптів на стороні клієнта засобами JavaScript
Було створено вхід до сторінки
адміністратора сайту та безпосередньо сторінка самого адміністратора. Посилання
на вхід знаходиться на головній сторінці сайту у верхньому правому кутку.
Щоб потрапити на сторінку адміністратора потрібно
ввести:
Логін: aurum Пароль: potestas Ключове слово: est
На сторінці входу присутні верхній банер з
посиланням на головну сторінку та спрощений нижній. Також присутня форма входу:
поля "Логін", "Пароль", "Ключове слово" та
захована кнопка підтвердження вводу (достатньо натиснути Enter для входу).
На сторінці адміністратора присутні блоки
"Реєстрація", "Коментарі", верхній та спрощений нижній
банери.
Додано форми реєстрації та введення коментарів.
Введені коментарі відображаються у спеціально
відведеній частині сторінки та у блоці адміністратора. Адміністратор може
видаляти ці коментарі та слідкувати коли і ким вони були написані.
Проект був успішно розміщений та протестований на
Денвері власного ПК.
2.3.2
Серверна частина web-додатку
2.3.2.1
Використання PHP та бібліотек jQuery і Ajax
Було створено вхід до сторінки
адміністратора сайту та безпосередньо сторінка самого адміністратора за
допомогою функцій бібліотеки Ajax.
На сторінці входу присутні верхній банер з
посиланням на головну сторінку та спрощений нижній. Також присутня форма входу:
поля "Логін", "Пароль" та кнопка підтвердження вводу. Якщо
дані невірні, то виводиться відповідне повідомлення.
Щоб потрапити на сторінку адміністратора потрібно
ввести:
Логін: aurum Пароль: potestas
На сторінці адміністратора присутній блок
"Розмістити новину", верхній та спрощений нижній банери.
Введені новини відображаються у спеціально
відведеній частині сторінки "Блог майстра" (основного сайту) та у
текстовому файлі. Адміністратор може видаляти ці коментарі безпосередньо з
текстового документу. На сторінці "Каталог виробів" замінено звичайне
меню на меню-гармошку, яке включає всі основні розділи та дозволяє переглянути
підрозділи. На головній сторінці замість gif-зображень було реалізовано
слайд-зміну зображень за допомогою функцій бібліотеки jQuery.
Висновки
В ході виконання курсової роботи був отриманий
повнофункціональний web-сайт, повністю готовий до застосування. Даний сайт орієнтований на
широке коло користувачів мережею Інтернет (не тільки на користувачів соціальної
мережі "Вконтакте"). З його допомогою майстер зможе демонструвати та
продавати свої вироби, а майстри-початківці дізнаватися досить корисну
інформацію по роботі з матеріалом та черпати натхнення у готових виробах. При
розміщенні сайту у глобальній мережі географія розповсюдження зростає до
масштабів всього світу.
При розробці web-сайта були
проаналізовані сучасні web-технології, що дозволяють створювати
інтерактивні web-сторінки. Найбільш відповідними для виконання поставленого
завдання виявилися мова розмітки HTML, мова web-програмування PHP, JavaScript та
бібліотеки jQuery, Ajax.
Розроблений сайт задовольняє всім вимогам. При
розробці web-сайту були використані готові модулі аутентифікації, голосування
і здійснення пошуку по сайту. Дані модулі були допрацьовані з урахуванням специфіки
web-сайту і успішно
упроваджені в його структуру.
Як подальше вдосконалення сайту планується
розробка можливості online замовлення/бронювання виробів, або ж переробка
данного сайту на online магазин.
У додатках вибірково наведені лістинги програмного
коду сторінок web-сайту.
Посилання та
література
1. Творча
майстерня "Lollipop" http://lollipop. kiev.ua/
2. Все
про створення сайтів та web-програмування для початківців http://htmlbook.ru/
3. "Веб Database Application with PHP and
MYSQL", 2nd Edition By David Lane, Hugh E. Williams. © O'Reilly, May 2004.
ISBN: 0-596-00543-1.
. CMS
List. Огляд cms. Сайт про системи управління сайтом
5. http://www.cmslist.ru
. Joomla
CMS по-російськи
. http://joomlaportal.ru
8. Content
management system
. http://www.brutto.ru/informacija/uznat-bolshe/content-management-system
10. CMS огляд: CMS, движок сайту, система управління
сайтом, mambo, php nuke, netcat, phpbb, invision power board, vbulletin
11. http://cmsobzor.ru/news. php
12. "Dreamweaver
MX 2004 для "чайников"." Уорнер, Джанни, Гарднер, Сюзанна. Пер.
с англ. - М.: Издательский дом "Вильямс", 2004. - 352 с.
13. "PHP,
MySQL и Dreamweaver MX 2004. Разработка интерактивных
Web-сайтов." Дронов В.А. - СПб.: БХВ-Петербург, 2010. - 448 с: ил.
14. "PHP
and MySQL Web Development (4th Edition)", Luke Welling, Laura Thomson 848 стр., с ил.; ISBN 978-5-8459-1574-0,
978-0-672-32916-6.
15. Авторські
права на фото належать Творчій майстерні "SakhNYAsha design studio"
Додатки
У додатках вибірково представлені лістинги
програмного коду сторінок web-сайту.
Сторінка входу до сторінки адміністратора index. php
<? header ("Content-Type: text/html;
charset=utf-8");? >
<! DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="jquery. js"></script>
<script type="text/javascript">
function fun () {name = document.
getElementById ('name'). value;password = document. getElementById
('password'). value;(name == '' || password == '')
{. getElementById ('rename'). style.
display = 'block';
}
{
$. ajax ({: 'POST',: 'api. php',: ({:
name,: password
}),: function (html) {
$ ('#rename'). show ().html (html);
},: function (html) {('error');
}
});
}false;
}
</script>
<style>{background: #FFE6CC; font-family:
"PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px; line-height: 20px; overflow: hidden; outline: none! important;
}
. main{background: #B77171; margin: 100px auto;
padding: 0px 20px 10px 20px; width: 215px; }
. label{color: #fff; padding: 5px; }
. input{padding: 5px; border: 1px solid #924949;
outline: none! important; }
. input: focus{background: #924949; color: #fff;
}
#login{background: #924949; color: #fff;
font-weight: bold; padding: 4px 10px; border: 0px; margin-top: 5px; }
#login: hover{background: #5F3030; cursor:
pointer; }
</style>
</head>
<body>
<div>
<div style="font-weight: bold;
background: #924949; color: #fff; padding: 10px; text-align: left; width:
235px; margin-left: - 20px; margin-bottom: 10px; ">Вход</div>
<form onsubmit="fun (); return false;
" method="get" action="">
<table style=""
cellpadding="0" cellspacing="0">
<tr><td>
<td><input type="text"
id="name">
<tr><td>
<td><input type="password"
id="password">
<tr><td
colspan="2"><input type="submit"
id="login"></td></tr></table>
</form>
<div id="rename"
style="display: none; ">
Все поля обязательны для заполнения
</div></div>
</body></html>
Сторінка адміністратора admin. php
<? session_start ();("Content-Type:
text/html; charset=utf-8");(! isset ($_SESSION ['name']) ||! isset
($_SESSION ['password']) ||! isset ($_SESSION ['role'])) {("Location:
http://test1.ru/index. php");
}
? >
<! DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.
ico" type="image/x-icon"/>
<link rel="shortcut icon"
href="images/favicon. ico" type="image/x-icon"/>
<title>Админпанель</title>
<script type="text/javascript"
src="jquery. js"></script>
<script type="text/javascript">
function addNews () {name = document.
getElementById ('name'). value;area = document. getElementById ('area').
value;(name == '' || area == '')
{. getElementById ('rename'). style.
display = 'block';
}
{
$. ajax ({: 'POST',: 'addnews. php',: ({:
name,: area}),: function (html) {
$ ('#rename'). show ().html (html);
},: function (html) {('error'); }
});
}false;
}
</script>
<style>{background: #FFE4E1; font-family:
Gabriola,sans-serif; font-size: 24px;! important; }
</style>
</head>
<body>
<img src="border. png"
border="0" width="100%" height="35">
<h3>Приветсвую, <? echo $_SESSION
['name'];? ></h3>
<div style="background: #fff; color:
#000; font-weight: bold; padding: 10px; border-radius: 10px; width:
30%">Добавить новость</div>
<img src="lep. png"
border="0" width="31%" height="30">
<form onsubmit="addNews (); return false;
" method="POST" action="">
<blockquote>
<p><table style="border-radius:
10px; color: #000; " cellpadding="3" cellspacing="3"
bgcolor="white" >
<tr><td>
<td><input type="text"
id="name">
<tr><td>
<td><textarea id="area">
<tr><td
colspan="2"><input type="submit"
id="login"></td></tr>
</table>
</form>
<p><div id="rename"
style="display: none; background: #fff; border-radius: 10px; width: 30%;
padding: 10px; ">
Все поля обязательны для заполнения
</div>
</blockquote>
<p><img src="border. png"
border="0" width="100%" height="35">
</body>
</html>
Функції php, які відносяться до сторінок index. php та admin. php
addnews. php
<? header ("Content-Type: text/html;
charset=utf-8");(isset ($_POST ['name']) && isset ($_POST
['text']))
{$name = mysql_real_escape_string ($_POST
['name']);
$text = mysql_real_escape_string ($_POST
['text']); }
$fp = fopen ('news. txt', 'a');($fp)
{fwrite ($fp, $name. "#". $text.
"#1\n");($fp);'Новость добавлена'; }
{echo 'Ошибка прочтения файла'; }
? >
api. php
<?("Content-Type: text/html;
charset=utf-8");(isset ($_POST ['name']) && isset ($_POST
['password']))
{$name = mysql_real_escape_string ($_POST
['name']);
$password = mysql_real_escape_string ($_POST
['password']); }_start ();
$fp = fopen ('login. txt', 'r');($fp)
{while (! feof ($fp))
{$mytext = fgets ($fp, 4096);
$loginForm = explode ('#', $mytext);($name ==
$loginForm ['0'] && $password == $loginForm ['1'] && $loginForm
['2'] == "admin")
{$_SESSION ['name'] = $name;
$_SESSION ['password'] = $password;
$_SESSION ['role'] =
"admin";('<script>window. location = "admin. php";
</script>'); }}($noAdmin == 0)
{ echo 'Неверные данные'; }}
{echo 'Ошибка прочтения файла'; }
? >
add. php
<?
$fp = fopen ('news. txt', 'r');($fp)
{while (! feof ($fp))
{$mytext = fgets ($fp, 4096);($mytext == '')
{echo ''; }else{
$loginForm = explode ('#', $mytext);'
<ARTICLE>
<br><table border="0" align="center"
cellpadding="5" cellspacing="0" width="90%"
bgcolor="white" style="border-radius: 20px; ">
<tr><th align="left"
colspan="3"><font size="5" color="black"
face="Gabriola" >'. $loginForm ['0']. '</th></tr>
<tr><td align="left"
colspan="3"><font size="5" color="black"
face="Gabriola" >'. $loginForm ['1']. '</td></tr>
</table>
</ARTICLE>
'; }}}
{echo 'Ошибка прочтения файла'; }
? >
Головна сторінка сайту index1. php
<? header ("Content-Type: text/html;
charset=utf-8");? >
<! DOCTYPE html>
<head>
<link rel="icon"
href="images/favicon. ico" type="image/x-icon"/>
<link rel="shortcut icon"
href="images/favicon. ico" type="image/x-icon"/>
<title>SakhNYAsha design
studio</title>
<meta content="SakhNYAsha Design
Studio" name="Sakhnyasha design studio - Творческая
мастерская">
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<meta name="description"
content="" />
<meta name="keywords"
content="" />
<meta http-equiv="pragma"
content="no-cache">
<meta name="revisit-after"
content="7 days">
<meta name="author"
content="www.sdws.ru">
<meta name="Content-language"
content="ru">
<script type="text/javascript"
src="js/jquery. js"></script>
<script type="text/javascript"
src="js/cycle. js"></script>
<script type="text/javascript"
src="js/slideshow. js"></script>
<script language="JavaScript"
type="text/javascript">
<! - -
$ (document). ready (function ()
{
$ ('#slider'). cycle ({: 3000,pause: 1,});
});
>
</script>
</head>
<body bgcolor=#FFE4E1 text=black alink=#000000 link=#000000>
<img src="images/logo. png"
border="0" width="100%" height="190"
usemap="#logo">
<map name="logo">
<area shape="rect"
coords="0,0,330,140" title="SakhNYAsha design studio"
href="index1. php" target="_top">
<div
align="right"><br><a href="index.
php">Вход</a></div>
<p ><table border="0"
align="center"cellpadding=3 cellspacing=0 bgcolor="white"
style="border-radius: 10px; ">
<tr><th
align="center"><a href="index1. php"><font
size="5" color="black"
face="Gabriola">Главная</a></th><th>|</th>
<th><a href="news. php"><font
size="5" color="black"
face="Gabriola">Новости</a></th><th>|</th>
<th><a href="mks. php">
<font size="5" color="black"
face="Gabriola">Мастер-классы</a>
</th><th>|</th>
<th><a href="album.
php"><font size="5" color="black"
face="Gabriola">Каталог
изделий</a></th><th>|</th>
<th><a href="kontakt.
php"><font size="5" color="black"
face="Gabriola">Контакты</a></th><th>|</th>
<th><a href="other.
php"><font size="5" color="black"
face="Gabriola">Блог мастера</a></th></tr>
</table>
<table border="0"align="center"
cellpadding=0 cellspacing=0>
<tr><td align="center"
><img src="images/lep. png" border="0"
width="75%" height="35"></td></tr>
</table>
<br><br><table
border="0" align="center" cellpadding=5 cellspacing=0 width="90%"
bgcolor="white" style="border-radius: 10px; ">
<tr><th align="left"
colspan="2"><font size="5" color="black"
face="Gabriola">Добро пожаловать! </th>
<th align="left"
colspan="2"><font size="5" color="black"
face="Gabriola">О материалах</th></tr>
<tr><td valign="top"><a
href="http://vk.com/id55852962" alt="Страничка мастера ВК"
target="_blank"><img src="images/master. jpg"
height="120" width="90"
align="left"></a></td>
<td valign="top"><font
size="5" color="black" face="Gabriola">Добро
пожаловать в мастерскую SakhNYAsha design studio! Здесь вы можете найти
замечательные подарки ручной работы себе и своим близким! </td>
<td valign="top"><img
src="images/material. jpg" height="120"
width="90" align="left"></td>
<td valign="top"><font
size="5" color="black"
face="Gabriola">Пластика (полимерная глина) - это материал из
которого изготавливаются изделия. Изделия с такого материала достаточно прочны
и долговечны=) </td>
</tr>
</table>
</table>
<table border="0"
align="center" cellpadding=0 cellspacing=0>
<tr><td
align="center"><img src="images/lep. png"
border="0" width="80%"
height="40"></td></tr>
</table>
<br><br><table
border="0" align="center" cellpadding=3 cellspacing=3
width="90%" bgcolor="white" style="border-radius:
10px; ">
<tr><th align="left"
width="50%"><font size="5" color="black"
face="Gabriola">Новинки! Только все свежее! =) </th>
<th align="left"><font
size="5" color="black" face="Gabriola">Акции!
Спешите преобрести со скидкой! </th></tr>
<tr><td
align="left"><font size="5" color="black"
face="Gabriola">Все новинки можна посмотреть в разделе <a
href="album. php" >"Каталог изделий"</a>
</td>
<td align="left"><font
size="5" color="black" face="Gabriola">Все
акции можна посмотреть в разделе <a href="news.
php">"Новости"</a> </td></tr>
<tr> <td id="slider">
<img src="images/031. jpg"
alt="" width="550" />
<img src="images/032. jpg"
alt="" width="550" />
<img src="images/033. jpg"
alt="" width="550" />
<img src="images/034. jpg"
alt="" width="550" />
<img src="images/035. jpg"
alt="" width="550" />
<img src="images/036. jpg"
alt="" width="550" />
</td><td
align="left"><img src="images/021. gif"
alt="" width="550" > </td></tr>
</table>
<table border="0"
align="center" cellpadding=0 cellspacing=0>
<tr><td align="center"
><img src="images/lep. png" border="0"
width="80%" height="40"></td></tr>
</table>
<p><br><img src="images/down.
png" border="0" width="100%" height="160"
usemap="#down">
<map name="down">
<area shape="rect"
coords="14,100,406,62" title="Загляните в мою группу ВК!"
href="http://vk.com/sakhnyasha" target="_blank">
<area shape="rect"
coords="14,130,406,92" title="Пишите сюда=)!"
href="http://my. mail.ru/mail/anya_sakhno"
target="_blank">
</body>
</html>
Сторінка "Каталог виробів" album. php
<? header ("Content-Type: text/html;
charset=utf-8");? >
<! DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon"
href="images/favicon. ico" type="image/x-icon"/>
<link rel="shortcut icon"
href="images/favicon. ico" type="image/x-icon"/>
<title>SakhNYAsha design
studio</title>
<meta content="SakhNYAsha Design
Studio" name="Sakhnyasha design studio - Творческая
мастерская">
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<script type='text/javascript'
src='http://ajax. googleapis.com/ajax/libs/jquery/1.4/jquery. min.
js'></script>
<script type="text/javascript">
$ (document). ready (function ()
{$ (". accordion h1: first"). addClass
("active");
$ (". accordion p: not (: first)").
hide ();
$ (". accordion h5"). click (function
() {
$ (this). next ("p"). slideToggle
("slow")
. siblings ("p: visible"). slideUp
("slow");
$ (this). toggleClass ("active");
$ (this). siblings ("h5"). removeClass
("active"); });
});
</script>
<style type="text/css">
. accordion h5 {background: #ffffff url
(images/arrow-square. gif) no-repeat right - 51px; padding: 7px 15px; margin:
0; border: #ffffff; border-bottom: none; cursor: pointer; }
. accordion h5: hover {background-color: #ffffff;
}
. accordion h5. active {background-position:
right 5px; }
. accordion p {background: #ffffff; margin: 0;
padding: 10px 15px 20px; border-left: 0px #ffffff; border-right: 0px #ffffff; }
</style>
</head>
<body bgcolor="#FFE4E1"
text="black" alink="#000000" vlink="#000000">
<img src="images/logo. png"
border="0" width="100%" height="190"
usemap="#logo">
<map name="logo">
<area shape="rect"
coords="0,0,330,140" title="SakhNYAsha design studio"
href="index1. php" target="_top">
<p><table border="0"
align="center" cellpadding=3cellspacing=0 bgcolor="white"
style="border-radius: 10px; ">
<tr><th
align="center"><a href="index1. php"><font
size="5" color="black"
face="Gabriola">Главная</a></th>
<th>|</th><th><a href="news.
php"><font size="5" color="black"
face="Gabriola">Новости</a></th><th>|</th>
<th><a href="mks. php">
<font size="5" color="black"
face="Gabriola">Мастер-классы</a>
</th><th>|</th>
<th><a href="album.
php"><font size="5" color="black"
face="Gabriola">Каталог
изделий</a></th><th>|</th>
<th><a href="kontakt.
php"><font size="5" color="black"
face="Gabriola">Контакты</a></th><th>|</th>
<th><a href="other.
php"><font size="5" color="black"
face="Gabriola">Блог мастера</a></th></tr>
</table>
<table border="0"
align="center" cellpadding=0 cellspacing=0>
<tr><td align="center"
><img src="images/lep. png" border="0"
width="75%" height="35"></td></tr>
</table>
<br><table border="0"
align="center" cellpadding=3 cellspacing=3 width="90%"
style="border-radius: 10px; ">
<tr valign="top">
<td align="left"
width="15%">
<table border="0"
align="center" cellpadding=3 cellspacing=3 width="100%"
style="border-radius: 10px; "bgcolor=white>
<tr><th
align="left"><font size="5" color="black"
face="Gabriola" >Каталог изделий</th></tr>
<tr><td
align="left"><font size="5" color="black"
face="Gabriola" >
<div>
<h5>Серьги</h5>
<p><a href="album.
php">Вишенки</a>
<br><a href="album.
php">Сакура</a>
<br><a href="album.
php">Лимонки</a></p>
<h5><a href="kylon. php">Кулоны</a></h5>
<h5>Кольца</h5>
<p><a href="album.
php">Сердце</a>
<br><a href="album.
php">Секреты благородных</a>
<br><a href="album.
php">Суши</a></p>
<h5>Броши</h5>
<p><a href="album.
php">Олень</a>
<br><a href="album.
php">Сёдзе</a>
<br><a href="album.
php">Совушка</a></p>
<h5>Браслеты</h5>
<p><a href="album.
php">Фиолетовый бум</a>
<br><a href="album.
php">Кислинка</a>
<br><a href="album.
php">Ассорти</a></p>
<h5><a href="album.
php">Разное</a></h5>
</div>
</td></tr></table></td>
<td><table border="0"
align="center" cellpadding=3 cellspacing=3 width="100%"
style="border-radius: 10px; "="white">
<tr align="center">
<td valign="top"><a
href="koltso. php" alt="Кольца"
target="_top"><img src="images/001. jpg"
height="250" align="center"></a></td>
<td valign="top"><a
href="sergi. php" alt="Серьги"
target="_top"><img src="images/002. jpg"
height="250" align="center"></a></td>
<td valign="top"><a
href="kylon. php" alt="Кулоны"
target="_top"><img src="images/003. jpg"
height="250" align="center"></a></td></tr>
<tr align="center">
<th align="center"><font
size="5" color="black" face="Gabriola"
>Кольца</th>
<th align="center"><font
size="5" color="black" face="Gabriola"
>Серьги</th>
<th align="center"><font
size="5" color="black" face="Gabriola" >Кулоны</th></tr>
<tr align="center">
<td valign="top"><a
href="brosh. php" alt="Броши"
target="_top"><img src="images/004. jpg"
height="250" align="center"></a></td>
<td valign="top"><a
href="braslety. php" alt="Браслеты"
target="_top"><img src="images/005. jpg"
height="250" align="center"></a></td>
<td valign="top"><a
href="raznoe. php" alt="Разное"
target="_top"><img src="images/006. jpg"
height="250"
align="center"></a></td></tr>
<tr align="center">
<th align="center"><font
size="5" color="black" face="Gabriola"
>Броши</th>
<th align="center"><font
size="5" color="black" face="Gabriola"
>Браслеты</th>
<th align="center"><font
size="5" color="black" face="Gabriola"
>Разное</th></tr>
</table></td></tr>
</table>
<table border="0"
align="center" cellpadding=0 cellspacing=0>
<tr><td align="center"
><img src="images/lep. png" border="0"
width="80%" height="40"></td></tr>
</table>
<p><br><img src="images/down.
png" border="0" width="100%" height="160"
usemap="#down">
<map name="down">
<area shape="rect"
coords="14,100,406,62" title="Загляните в мою группу ВК!"
href="http://vk.com/sakhnyasha" target="_blank">
<area shape="rect"
coords="14,130,406,92" title="Пишите сюда=)!"
href="http://my. mail.ru/mail/anya_sakhno"
target="_blank">
</body>
</html>
Сторінка "Блог майстра" other. php
<? header ("Content-Type: text/html;
charset=utf-8");? >
<! DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml" xml: lang="en"
lang="en">
<head>
<link rel="icon" href="favicon.
ico" type="image/x-icon"/>
<link rel="shortcut icon"
href="images/favicon. ico" type="image/x-icon"/>
<title>SakhNYAsha design
studio</title>
<meta content="SakhNYAsha Design
Studio" name="Sakhnyasha design studio - Творческая
мастерская">
<style> /*Заливка фона
градиентом*/{background: #FFE4E1; /* Для старых браузров */ }
</style>
</head>
<body bgcolor="#FFE4E1 "
text="black" alink="#000000" link="#000000">
<HEADER >
<img src="logo. png"
border="0" width="100%" height="190"
usemap="#logo">
<map name="logo">
<area shape="rect"
coords="0,0,330,140" title="SakhNYAsha design studio"
href="index1. php" target="_top">
</HEADER>
<navigation>
<p><table border="0"
align="center" cellpadding=3 cellspacing=0
bgcolor="white"style="border-radius: 10px; ">
<tr><th
align="center"><a href="index1. php"><font
size="5" color="black"
face="Gabriola">Главная</a></th><th>|</th><th><a
href="news. php"><font size="5"
color="black"
face="Gabriola">Новости</a></th><th>|</th><th><a
href="mks. php"> <font size="5" color="black"
face="Gabriola">Мастер-классы</a>
</th><th>|</th><th><a href="album.
php"><font size="5" color="black"
face="Gabriola">Каталог изделий</a></th><th>|</th><th><a
href="kontakt. php"><font size="5"
color="black"
face="Gabriola">Контакты</a></th><th>|</th><th><a
href="other. php"><font size="5"
color="black" face="Gabriola">Блог
мастера</a></th></tr>
</table>
</navigation>
<SECTION>
<table border="0"
align="center" cellpadding=0 cellspacing=0>
<tr><td align="center"
><img src="lep. png" border="0" width="75%"
height="35"></td></tr>
</table>
<?_once ('add. php');
? >
<ARTICLE>
<p><table border="0"
align="center" cellpadding="5"
cellspacing="0"width="90%" bgcolor="white"
style="border-radius: 10px; ">
<tr><th align="left"
colspan="3"><font size="5" color="black"
face="Gabriola" >"Дело было вечером, делать было нечего.
"</th></tr>
<tr><td align="left"
colspan="3"><font size="5" color="black"
face="Gabriola" >Вот такая странная родилась картинка после похода
в цирк=) </td></tr>
<tr><td
align="center"><object data="svg/1. svg"
height="100%"
align="lcenter"></object></td></tr>
</table>
</ARTICLE>
</section>
<p><br><img src="down.
png" border="0" width="100%" height="160"
usemap="#down">
<map name="down">
<area shape="rect"
coords="14,100,406,62" title="Загляните в мою группу ВК!"
href="http://vk.com/sakhnyasha" target="_blank">
<area shape="rect"
coords="14,130,406,92" title="Пишите сюда=)!"
href="http://my. mail.ru/mail/anya_sakhno"
target="_blank">
</map>
</body>
</html>
Сторінка новин news.html
<! DOCTYPE html PUBLIC "- // W3C // DTD
XHTML 1.0 Transitional // EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" xml: lang="en"
lang="en">
<head>
<link rel="icon"
href="images/favicon. ico" type="image/x-icon"/>
<link rel="shortcut icon"
href="images/favicon. ico" type="image/x-icon"/>
<title>SakhNYAsha design
studio</title>
<meta content="SakhNYAsha Design
Studio" name="Sakhnyasha design studio - Творческая
мастерская">
</head>
<body bgcolor=#FFE4E1 text=black alink=#000000 link=#000000>
<HEADER id="header" >
<img src="images/logo. png"
border="0" width="100%" height="190"
usemap="#logo">
<map name="logo">
<area shape="rect"
coords="0,0,330,140" title="SakhNYAsha design studio"
href="index.html" target="_top">
</HEADER>
<navigation id="navigation" >
<p><table border="0"
align="center" cellpadding=3 cellspacing=0 bgcolor=white>
<tr><th
align="center"><a href="index.html"><font
size="5" color="black"
face="Gabriola">Главная</a></th><th>|</th><th><a
href="news.html"><font size="5"
color="black"
face="Gabriola">Новости</a></th><th>|</th><th><a
href="mks.html"> <font size="5"
color="black" face="Gabriola">Мастер-классы</a>
</th><th>|</th><th><a
href="album.html"><font size="5"
color="black" face="Gabriola">Каталог изделий</a></th><th>|</th><th><a
href="kontakt.html"><font size="5"
color="black"
face="Gabriola">Контакты</a></th></tr>
</table>
</navigation>
<SECTION>
<table border="0"
align="center" cellpadding=0 cellspacing=0>
<tr><td align="center"
><img src="images/lep. png" border="0"
width="60%" height="30"></td></tr>
</table>
<ARTICLE>
<br><table border="0"
align="center" cellpadding=5 cellspacing=0 width="90%"
bgcolor=white>
<tr><th align="left"
colspan="3"><font size="5" color="black"
face="Gabriola" >10 октября</th></tr>
<tr><td valign="top"
width="15%"><img src="images/10. jpg"
height="190" align="left"></td>
<td valign="top"><font
size="5" color="black" face="Gabriola">Акция!
<br>Что может быть теплее чем вязаный свитерок? А
вязаное сердце??? =)))
<br>Не упустите свой шанс приобрести брошку
"Тёплые чувства"!
<br>Найти можно здесь: <a href="album.html" target="_blank">"Каталог
изделий"</a></tr></table>
</ARTICLE>
</SECTION>
<footer id="footer" >
<table border="0" align="center"
cellpadding=0 cellspacing=0>
<tr><td align="center"
><img src="images/lep. png" border="0"
width="80%" height="40"></td></tr>
</table>
<p><br><img src="images/down.
png" border="0" width="100%" height="160"
usemap="#down">
<map name="down">
<area shape="rect"
coords="14,100,406,62" title="Загляните в мою группу ВК!"
href="http://vk.com/sakhnyasha" target="_blank">
<area shape="rect"
coords="14,130,406,92" title="Пишите сюда=)!"
href="http://my. mail.ru/mail/anya_sakhno"
target="_blank">
</footer>
</body>
</html>
Сторінка контактів kontakt.html
<! DOCTYPE html PUBLIC "- // W3C // DTD
XHTML 1.0 Transitional // EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" xml: lang="en"
lang="en">
<head>
<link rel="icon"
href="images/favicon. ico" type="image/x-icon"/>
<link rel="shortcut icon"
href="images/favicon. ico" type="image/x-icon"/>
<title>SakhNYAsha design
studio</title>
<meta content="SakhNYAsha Design
Studio" name="Sakhnyasha design studio - Творческая мастерская">
</head>
<body
bgcolor=#FFE4E1=black=#000000=#000000>
<table
border="0"=0=0="100%">
<thead><tr><td>
<img src="images/logo. png"
border="0" width="100%" height="190"
usemap="#logo">
<map name="logo">
<area shape="rect"
coords="0,0,330,140" title="SakhNYAsha design studio"
href="index.html" target="_top"></td></tr>
<tr><th> 
</th></tr>
<tr><td>
<table
border="0"="center"=3=0="white">
<tr><th
align="center"><a href="index.html"><font
size="5" color="black" ace="Gabriola">Главная</a></th><th>|</th>
<th><a
href="news.html"><font size="5"
color="black" face="Gabriola">Новости</a></th><th>|</th>
<th><a href="mks.html">
<font size="5" color="black"
face="Gabriola">Мастер-классы</a> </th><th>|</th>
<th><a
href="album.html"><font size="5" color="black"
face="Gabriola">Каталог изделий</a></th><th>|</th>
<th><a
href="kontakt.html"><font size="5"
color="black" ace="Gabriola">Контакты</a></th></tr></table></td></tr>
<tr><td
align="center"><img src="images/lep. png"
border="0" width="40%" height="30"></td></tr></thead>
<tbody><tr><td><br>
<table="0"="center"=3=3="90%"="white">
<tr><th align="left"
width="50%"><font size="5" color="black"
face="Gabriola">Пишите сюда! </th>
<th align="left"><font
size="5" color="black" face="Gabriola">Где мы находимся: </th>
<tr><td
align="left"><font size="5" color="black"
face="Gabriola">e-mail: anya_sakhno@mail.ru</td>
<td align="left"><font
size="5" color="black" face="Gabriola">Ст. м. "Святошино"</td>
<tr><th
align="left"><font size="5" color="black"
face="Gabriola">Загляните в
мою группу ВК! </th>
<td valign="top"
rowspan="16"><img src="images/map. jpg"
border="0" width="600" align="top">
<tr><td
valign="top"><font size="5" color="black"
face="Gabriola">http://vk.com/sakhnyasha</td>
<tr><th
align="left"><font size="5" color="black"
face="Gabriola">Свяжитесь со мной!
</th></tr>
<tr><td>
<form action = "''http://fpl.
formmail.com/cgi¬-bin/fm192" method = "post">
<table>
<tr align=left>
<td><font size="5"
color="black" face="Gabriola"><lable>Фамилия:
</lable> </td> <td><input type="text"
name="firstname" autofocus required></td></tr>
<tr align=left>
<td><font size="5"
color="black" face="Gabriola"><lable>Имя:
</lable> </td> <td><input type="text"
name="lastname" autofocus required></td></tr>
<tr align=left>
<td><font size="5"
color="black" face="Gabriola"><lable>E-mail:
</lable></td> <td><input type="text"
name="email" autofocus required></td></tr>
<tr align=left>
<td><font size="5"
color="black" face="Gabriola"><lable>Пароль:
</lable> </td> <td><input type="password"
name="pass" value="NOPASS" size="6"
maxlength="12" ></td></tr>
<tr align=left>
<td><font size="5"
color="black" face="Gabriola"><lable>Год рождения:
</lable> </td> <th><input type="number"
min="1910" max="2013" size="8"
required></td></tr>
<tr align=left>
<td><input type="radio"
name="sex" value="Male"> Male </td> </tr>
<tr align=left>
<td> <input type="radio"
name="sex" value="Female"> Female</td></tr>
<tr align=left>
<td><font size="5"
color="black" face="Gabriola">Сообщение:
</td></tr>
<tr align=left><td
colspan=4><textarea name = "thetext" rows = "10" cols
= "35"
wrap="virtual"></textarea></td></tr>
<tr align=left>
<td><font size="5"
color="black" face="Gabriola"><input
type="submit" value="Отправить">
<input type="hidden"
name="recipient" value="anya_sakhno@mail.ru"></td>
<td><input type="reset" value="Отменить"></td><td
colspan=2> </td>
</tr>
</table>
</form>
</td></tr>
</table></td></tr>
<tr><td
align="center"><img src="images/lep. png"
border="0" width="60%"
height="40"></td></tr></tbody>
<tfoot><tr><td><p><br><img
src="images/down. png" border="0" width="100%"
height="160" usemap="#down">
<map name="down">
<area shape="rect"
coords="14,100,406,62" title="Загляните в мою группу ВК!"
href="http://vk.com/sakhnyasha" target="_blank">
<area shape="rect"
coords="14,130,406,92" title="Пишите сюда=)!" href="http://my.
mail.ru/mail/anya_sakhno"
target="_blank"></td></tr></tfoot>
</table>
</body>
</html>
Приклад тексту svg-зображень 1. svg
<? xml version="1.0"
standalone="yes"? >
<! DOCTYPE svg PUBLIC "- // W3C // DTD
SVG 1.1 // EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.
dtd">
<svg width="1172px"
height="586px" viewBox="0 0 1172 586"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<path
d="M14.167032967032966,33.48571428571429
L17.386813186813185,34.77362637362637 L20.606593406593408,36.06153846153846
L23.182417582417585,34.77362637362637 Q25.75824175824176,33.48571428571429
27.046153846153846,32.84175824175824 L28.334065934065933,32.1978021978022
L29.621978021978023,31.553846153846152 L30.90989010989011,30.90989010989011
L32.1978021978022,30.90989010989011 L33.48571428571429,30.90989010989011
L34.77362637362637,30.90989010989011 L36.06153846153846,30.90989010989011
L37.99340659340659,30.90989010989011 L39.925274725274726,30.90989010989011
L41.21318681318681,30.90989010989011 L42.5010989010989,30.90989010989011
L44.43296703296703,30.26593406593407 L46.36483516483516,29.621978021978023
L48.2967032967033,29.621978021978023 L50.22857142857143,29.621978021978023
L52.160439560439556,29.621978021978023 Q54.09230769230769,29.621978021978023
59.24395604395605,29.621978021978023 Q64.3956043956044,29.621978021978023
68.25934065934067,29.621978021978023 Q72.12307692307692,29.621978021978023
74.05494505494505,30.26593406593407 Q75.98681318681318,30.90989010989011
80.49450549450549,30.26593406593407 Q85.0021978021978,29.621978021978023
87.57802197802198,29.621978021978023 Q90.15384615384615,29.621978021978023
96.5934065934066,29.621978021978023 Q103.03296703296704,29.621978021978023
107.54065934065935,29.621978021978023 Q112.04835164835164,29.621978021978023
119.13186813186812,28.978021978021978 Q126.21538461538461,28.334065934065933
131.36703296703297,28.334065934065933 Q136.51868131868133,28.334065934065933
146.178021978022,28.334065934065933 Q155.83736263736265,28.334065934065933
162.92087912087914,28.334065934065933 Q170.0043956043956,28.334065934065933
179.01978021978022,27.690109890109888 Q188.03516483516484,27.046153846153846
200.27032967032966,26.402197802197804 Q212.5054945054945,25.75824175824176
220.87692307692308,25.114285714285714 Q229.24835164835164,24.47032967032967
242.12747252747252,24.47032967032967 Q255.0065934065934,24.47032967032967
262.73406593406594,24.47032967032967 Q270.46153846153845,24.47032967032967
278.832967032967,24.47032967032967 Q287.2043956043956,24.47032967032967
298.1516483516483,24.47032967032967 Q309.0989010989011,24.47032967032967
322.621978021978,25.114285714285714 Q336.14505494505494,25.75824175824176
343.8725274725275,26.402197802197804
Q351.6,27.046153846153846
361.90329670329675,27.046153846153846
Q372.2065934065934,27.046153846153846 381.22197802197803,27.046153846153846
Q390.23736263736265,27.046153846153846 399.8967032967033,27.690109890109888
Q409.55604395604394,28.334065934065933 415.99560439560435,28.334065934065933
Q422.4351648351648,28.334065934065933 432.73846153846154,28.334065934065933
Q443.04175824175826,28.334065934065933 452.0571428571429,28.978021978021978
Q461.0725274725275,29.621978021978023 470.73186813186817,29.621978021978023
Q480.3912087912088,29.621978021978023 486.1868131868132,29.621978021978023
Q491.98241758241755,29.621978021978023 502.2857142857142,29.621978021978023 Q512.589010989011,29.621978021978023
521.6043956043956,30.26593406593407 Q530.6197802197802,30.90989010989011
L204.77802197802197,555.0901098901099 "
fill="none" stroke="rgb (0,0,0)"
stroke-opacity="0.07" stroke-width="32"
stroke-linecap="round" stroke-linejoin="round"
/><path d="M211.2175824175824,548.6505494505494
L210.57362637362638,549.2945054945055 L209.92967032967033,549.9384615384615
" fill="none" stroke="rgb (0,0,0)"
stroke-opacity="0.07" stroke-width="32"
stroke-linecap="round" stroke-linejoin="round" />
</svg>