ЗМІСТ

ВСТУП………………………………………………………………..…………4

1 Опис сайту…………...………………………………………………………..6

1.1 Описение HTML-кода………………………………………………………6

1.2 Описание CSS……………………………………………………………….9

2. Елементи сайту……………………………………………………………...10

2.1 Особливості верстання……………………………………………………12

3. Адаптивність сайту…………………………………………………………13

4. Оптимізація сайту…………………………………………………………..15

5 Розміщення web-сайту на хостингу………………………………………...17

5.1 Вибір хостингу…………………………………………………………….18

5.2 Покрокове розміщення……………………………………………………19

ВИСНОВКИ…………………………………………………………………...20

ПЕРЕЛІК ВИКОРИСТАНИХ ЛІТЕРАТУРНИХ ДЖЕРЕЛ…………………21

ДОДАТОК А Код програмної реалізації алгоритму шифрування та прихо-вування інформації в графічній частині DICOM файлу………………….135

Вступление

HTML – это гипертекстовый язык разметки (HyperText Markup Language), который используется для создания документов в Интернет(веб-страниц). При помощи HTML создается веб-страница, содержащая все нужные элементы. На HTML странице можно разместить простой текст, выделить его жирным или курсивом, вставить ссылку, таблицу, нумерованный или ненумерованный список, картинки, разбить текст на абзацы и разделы, задавать разделам заголовки. Также на HTML страницу можно вставить форму с текстовыми полями, кнопками, выбором вариантов из списка. В HTML5 в страницу можно встраивать видео и аудио файлы, рисовать при помощи canvas, делать простые анимации при помощи новых тегов(<marquee>). В помощь HTML пришли CSS и JavaScript. CSS используется для стилизации HTML элементов. При помощи CSS можно не только изменять цвет текста в блоке, но и делать геометрические фигуры, рисовать, делать разнообразную анимацию картинок. При помощи JavaScript можно делать на HTML странице разнообразный функционал – ваша страница может перемещать элементы, менять их размеры, делать расчеты, сортировку элементов. А главный плюсом работы с JavaScript является выполнение его скриптов без перезагрузки страницы.

Текстовый документ, содержащий язык разметки HTML, имеет расширение .html или .htm и открывается браузерами. На данный момент самыми популярными браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari.

На данный момент актуальны такие версии HTML:

• HTML 4 (разработан в 1997 году)

• XHTML (является расширением HTML4 на основе XML)

• HTML5 (находится в стадии разработки, но уже пользуется большой популярностью)

Тема веб-программирования является очень актуальной на сегодняшний день. В связи с тем, что каждый день в сеть Интернет попадает большое количество информации, сложно выделить из этого потока действительно интересный и актуальный контент. Поиск такого контента занимает немало времени.

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

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

В процессе выполнения РГР мы сможем узнать о:

• Основах HTML

• СSS и способах его подключения

• Важности JavaScript

• Важности оптимизации и адаптации

• Хостинге

Расчётно-графическая работа состоит из вступления, основной части (5 пунктов), выводов, списка литературы и дополнений.

Основная часть

1.Описание сайта

Данный сайт я решил сделать в качестве примера. Он создан сугубо для примера возможностей HTML, CSS и JavaScript. На сайте находятся:

• Главная страница (http://samplesite.hol.es/index.html)

• Галерея (http://samplesite.hol.es/gallery.html)

• Интерактивная страница (http://samplesite.hol.es/list.html)

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

На сайте можно найти такие элементы:

• Видеоплеер

• Аудиоплеер

• JavaScript-слайдер

• Flash-приложение

1.1 Описание html-кода

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

• <html></html> - теги, определяющие начало и конец документа

• <title></title> - теги, определяющие главный заголовок документа

• <head></head> - служебная секция. Здесь размещаются команды для браузеров, инструкции для поисковых роботов, ссылки на отдаленные файлы, скрипты.

• </body></body> - эта секция содержит всю видимую часть web-страницы

Это основные теги, без которых ни один сайт существовать не может. Однако существует помимо этого и ряд других тегов, которые я использовал у себя на сайте. Ниже я приведу краткий перечень некоторых из них и их краткую характеристику:

• <div></div> - элемент является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора. Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.

• <ul></ul> - тег <ul> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей, то элементы <li> наследуют эти свойства (Таблица 1.)

• <p></p> - Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

• <link> - устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега <a>, тег<link> размещается всегда внутри контейнера <head> и не создает ссылку.

Помимо тегов существуют еще и атрибуты тегов. Определенный атрибут есть у каждого тега. А для большинства из них существует ряд определенных атрибутов, который является общим для них. Помимо этого, существуют еще и универсальные атрибуты.

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

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

Согласно спецификации HTML все значения атрибутов тегов следует указывать в двойных ("пример") или одинарных кавычках ('пример'). Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы.

Любые теги, а также их атрибуты нечувствительны к регистру, поэтому вы вольны выбирать сами, как писать — <BR>,<Br> или <br>. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта. Заметим также, что текст, полностью набранный прописными символами, читается хуже, чем текст со строчными символами или смешанный.

Если какой-либо тег или его атрибут был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было. Опять же, следует избегать неизвестных тегов, поскольку код HTML не пройдет валидацию.

<ul class="menu"> <li class="info"><a href="#">Sample links</a> <ul class="informationMenu"> <li><a href="https://ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0">Wikipedia</a> <li class="partners"><a href="https://wikileaks.org/">Wikileaks</a> </ul> </li> <li><a href="list.html">Pastime</a></li> <li><a href="gallery.html">Gallery</a></li> </ul>

Таблица 1.

Пример создания маркированного списка на примере панели навигации сайта