Программный код Web сайта

2019-07-03

198

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 1 2 3 456 Следующая ⇒

В данном подпункте исследования приведен код программы web-сайта учителя физики с описанием того, как данный сайт разрабатывался и как он работает (рисунок 4).

Рисунок 4 – Главная страница сайта

Сайт содержит три блока, которые поделены при помощи css:

1) Шапка сайта;

2) Основной часть сайта (контентная). Все методы, которые используются в данной части сайта описаны в предыдущем подпункте исследования.

3) Боковая панель сайта. Здесь представлены два скрипта написанные на JavaScript реализующие часы и календарь. Код данных программ достаточно большой, поэтому сам код вы можете посмотреть в приложении 3.

4) «Подвал» сайта footer.

Код главной страницы:

<!DOCTYPE HTML>

<head>

<title>Учитель физики</title>

document.createElement('aside');

document.createElement('article');

</script>

<style>

aside {

background: #f0f0f0;

padding: 2%;

width: 15%;

float: right;

}

article {

margin-right: 10%;

display: block;

}

</style>

</head>

<thead>

<tr><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс

</thead>

</table>

</div>

</aside>

<center> <h1>ФИЗИКА - ЭТО ПРОСТО,</h1> </center></div>

<div class="kar2"> <center><h2>если попробовать заниматься систематически, шаг за шагом!</h2></center></div>

<p> Приветствую Вас, посетитель! Вы зашли на сайт учителя физики Иванова Ивана Ивановича, который разработан для учеников, учителей, родителей и всех пользователей, связанных с изучением вопросов физики. <br> Буду рад, если Вы сможете найти полезную информацию для себя.</p>

</center>

</div>

</div>

<a href="2.html"> <img src="img/1.png"              

</center>

</div>

<br>

<a href="2.html"> <strong>Учитель</strong> </a>             

<a href="3.html"> <strong>Ученик</strong></a>

</div>

</article>

</footer>

</body>

</html>

Наш сайт содержит еще две страницы, которые представлены на рисунке 5 и рисунке 6:

Рисунок 5 – Вторая страница сайта «Для учителей»

Рисунок 6 – Третья страница сайта «Для учеников»

Данные страницы web–сайта имеют похожую структуру, в отличии от первой страницы (рисунок 4) здесь присутствует навигация.

Программный код навигации HTML :

<ul>

<li><a class="men" href="index.html">Главная</a></li>

<li><a class="men" href="3.html">Для учеников</a></li>

</ul>

CSS:

ul {

list-style: none; /*убираем маркеры списка*/

margin: 0; /*убираем отступы*/

padding-left: 0; /*убираем отступы*/

margin-top:25px; /*делаем отступ сверху*/

}

.men {

text-decoration: none; /*убираем подчеркивание текста ссылок*/

background:#30A8E6; /*добавляем фон к пункту меню*/

color:#fff; /*меняем цвет ссылок*/

padding:10px; /*добавляем отступ*/

font-family: arial; /*меняем шрифт*/

border-radius:4px; /*добавляем скругление*/

-moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/

-o-transition: all 0.3s 0.01s ease;

-webkit-transition: all 0.3s 0.01s ease;

}

.men:hover {

background:#1C85BB;/*добавляем эффект при наведении*/

}

li {

float:left; /*Размещаем список горизонтально для реализации меню*/

margin-right:5px; /*Добавляем отступ у пунктов меню*/

}

a.botr{

background:#fff;

width:225px;

display:block;

height:33px;

padding-top:19px;

border:1px solid #000;

margin: 20px auto;

font-family: 'Dosis', sans;

font-size: 18px;

font-weight:200;

color:#000;

text-transform:uppercase;

text-decoration:none;

text-align:center;

opacity:.8;

letter-spacing: 1px;

-webkit-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);

-moz-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);

-o-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);

transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */

}

a.botr:hover{

width:225px;

height:33px;

padding-top:19px;

border:1px solid teal;

margin: 20px auto;

opacity:1;

letter-spacing: 4px;

-webkit-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);

-moz-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);

-o-transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750);

transition: all 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */

}

Заключение

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

В ходе исследования были достигнуты следующие результаты:

- изучена и структурирована теория по теме курсовой работы: разработка сайта на основе HTML с использованием JavaScript;

- изучена структура WEB-страницы на основе HTML;

- приведён синтаксис основных элементов языка разметки HTML;

- приведены таблицы стилей и уровней CSS и их синтаксис;

- проанализирован принцип разработки сайта на основе HTML c использованием JavaScript;

- рассмотрена структура языка JavaScript и принцип встраивания контейнеров в документ HTML;

- показана связь между HTML и JavaScript;

- разработана страница сайта на HTML c использованием JavaScript и описан алгоритм создания.

Я считаю, что цель исследования достигнута.

В данной работе такие технологии, как CSS JavaScript, были затронуты лишь поверхностно, чтобы показать эффективность совокупности использования HTML с интерактивными скриптовыми технологиями, их возможности на просторах интернета безграничны и ограничены только степенью знаний программиста, занимающегося разработкой сайтов.

2019-07-03

198

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 1 2 3 456 Следующая ⇒

Обсуждение в статье: Программный код Web сайта

Обсуждений еще не было, будьте первым... ↓↓↓