Добавлен: 01.04.2023
Просмотров: 111
Скачиваний: 1
СОДЕРЖАНИЕ
1. Язык разметки гипертекста. Основные принципы построения HTML-документов
1.1 История развития и стандарты
1.3.2 Объявление HTML-документа. Заголовок
1.4 Форматирование текста средствами HTML
1.4.1 Стили форматирования текста
1.4.2 Установка атрибутов шрифта
1.4.4 Работа со списками средствами языка HTML
1.4.5 Работа со ссылками средствами языка HTML
1.4.6 Работа с графическими изображениями средствами HTML
1.4.7 Работа с таблицами средствами HTML
2. Реализация сайта на языке HTML
<FIGURE>…</FIGURE> позволяет сгруппировать любые элементы формы либо страницы (введен в стандарте HTML5);
<KEYGEN>…</KEYGEN> позволяет сгенерировать пару ключей для шифрования данных формы при отправке на сервер (введен в стандарте HTML5);
<OUTPUT>…</OUTPUT> определяет область, в которую выводится информация (введен в стандарте HTML5);
Таким образом, язык HTML обладает широким спектром возможностей для построения web-страниц, которые могут быть расширены с применением каскадных таблиц стилей CSS и др.
2. Реализация сайта на языке HTML
2.1 Постановка задачи
Целью разработки является сайт для ознакомления пользователей с основами программирования на языке HTML (согласно теме данной курсовой работы).
В соответствии с указанной целью на сайте целесообразно разместить следующую информацию:
- данные о истории развития HTML и существующих стандартах;
- информацию о структуре html-документов;
- описание синтаксиса языка;
- принципы форматирования текстовых элементов;
- принципы работы с блоками, фреймами, формами и их компонентами;
- информацию для ознакомления с литературными и интернет-источниками по теме.
Исходя из обилия информации целесообразно реализовать многостраничный сайт, связь между элементами которого будет осуществляться по ссылкам.
2.2 Проектирование макета
Макет представляет из себя визуальное представление будущего интерфейса сайта и описывает, какие элементы будут помещены на страницу и как они будут расположены. Разработанный макет представлен на рис.1.
Рисунок 1 – Макет сайта
2.3 Разработка шаблона сайта
Разработка шаблона подразумевает программную реализацию структуры согласно макета. В общем виде реализуемая структура может быть представлена следующим образом:
- объявление документа;
- заголовок (с указанием кодировки символов с поддержкой русского языка, названия страницы, указания на файл со стилями, который ввиду большого объема целесообразно отделить от основного файла программы);
- тело документа (для разделения на блоки целесообразно использовать контейнеры <DIV>, тело разделяется на несколько блоков).
Программная реализация:
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>Курсовая работа</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="bg2">
<div id="bg3">
<div id="header">
<div id="buttons"> … </div>
<div id="logo"> … </div>
</div>
<div id="content">
<div id="main">
<div id="right">
<div class="right_b"> … </div>
<div class="right_w"> … </div>
</div>
<div id="left">
<div class="box1"> … </div>
<div class="box2"> … </div>
<div class="box3"> … </div>
<div class="box4"> … </div>
</div>
<div id="center">
<div class="text"> … </div>
</div>
<div style="clear: both"> <img> </div>
</div>
</div>
<div id="footer"> … </div>
</div>
</div>
</body>
</html>
2.4 Проектирование дизайна
Проектирование дизайна сайта подразумевает размещение визуального контента на подготовленной структуре. Таким образом создается шаблон, основное назначение которого – визуализировать структуру страницы, ее содержимое, а также отобразить основной функционал. На рис.2 представлен разработанный шаблон основной страницы сайта.
Рисунок 2 – Шаблон основной страницы
2.5 Создание контента и окончательная верстка
Создание контента и окончательная верстка – эти этапы выполняются параллельно и дополняют друг друга, что позволяет оптимизировать процесс разработки. В качестве контента (наполнения) сайта будет использована информация, приведенная в разделе 1 данной работы. Окончательная верстка подразумевает разработку вторичных страниц, доступ к которым осуществляется по ссылке с домашней страницы.
На рис.3 представлен окончательный вид основной страницы сайта.
Рисунок 3 – Основная страница сайта
На рис.4 представлена страница, на которую осуществляется переход при нажатии ссылки «Читать далее» в разделе «История развития и стандарты HTML». На рис.5 и рис.6 представлены соответственно страницы, на которые осуществляется переход по ссылкам «Синтаксис языка» и «Структура документа». На рис.7 представлен результат перехода по ссылке «Авторское форматирование».
Рисунок 4 – Страница 2
Рисунок 5 – Страница 3
Рисунок 6 – Страница 4
Рисунок 7 – Страница 5
Листинг программ приведен в приложении (прил.1).
Заключение
Целью представленной работы являлось изложение теоретических основ и практическое применение одного из подходов к веб-программированию, а именно языка разметки гипертекста HTML.
В результате проведенных в ходе выполнения работы исследований, выполненных автором, решены следующие задачи:
- выполнен обзор учебно-методической и научной литературы в соответствии с темой работы;
- проведен анализ теоретических аспектов разработки веб-страниц;
- изучены практические подходы к разработке веб-страниц средствами HTML;
- реализована разработка веб-сайта в соответствии с заявленной тематикой.
Таким образом, в работе в полной мере высветлен сформулированный в ее тематике проблемный вопрос.
Список использованной литературы
1. Дакетт, Дж. HTML и CSS. Разработка и дизайн веб-сайтов. – М.: Эксмо, 2013. – 480 с.
2. Дунаев, В.В. Основы Web-дизайна. Самоучитель. – 2-е изд. – СПб.: БХВ-Петербург, 2012. – 480 с.
3. Дунаев, В.В. HTML, скрипты и стили. – 4-е изд. – СПб.: БХВ-Петербург, 2015. – 816 с.
4. Квинт, И. Создаем сайты с помощью HTML, XHTML и CSS на 100%. – 4-е изд. – СПб.: Питер, 2017. – 464 с.
5. Кит, Дж. HTML5 для веб-дизайнеров. – М.: URSS, 2013. – 112 с.
6. Кирсанов, Д. Веб-дизайн. – СПб.: Символ-Плюс, 2001. – 376 с.
7. Комолова, Н.В., Яковлева, Е.С. HTML. Самоучитель. – 2-е изд. – СПб.: Питер, 2011. – 288 с.
8. Суздалев, Д. Справочник HTML // Интернет-издание, 2012. – 40 с.
9. Сырых, Ю.А. Современный веб-дизайн. Эпоха Веб 3.0. – 2-е изд. – М.: ООО «И.Д. Вильямс», 2013. – 368 с.
10. Хоган, Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. – 2-е изд. – СПб.: Питер, 2014. – 320 с.
11. Чебыкин, Р.И. Разработка и оформление текстового содержания сайтов. – СПб.: БХВ-Петербург, 2004. – 528 с.
12. Шапошников, И.В. Самоучитель HTML 4. – СПб.: БХВ-Петербург, 2001. – 288 с.
13. www.htmlbook.ru
Приложение 1. Листинг программ
Файл index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>Курсовая работа</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="bg2">
<div id="bg3">
<!-- Начало шапки -->
<div id="header">
<div id="buttons">
<a href="https://ru.wikibooks.org/wiki/HTML" class="but" title="">Викиучебник HTML</a>
<a href="http://htmlbook.ru/samhtml" class="but" title="">Самоучитель HTML4</a>
<a href="http://htmlbook.ru/html" class="but" title="">Справочник HTML</a>
<a href="http://htmlbook.ru/html5" class="but" title="">Самоучитель HTML5</a>
</div>
<div id="logo">
<h2>Основы программирования на языке HTML</h2>
</div>
</div>
<!-- Конец шапки -->
<!-- Контент -->
<div id="content">
<div id="main">
<div id="main_bot">
<div id="main_top">
<!-- Правый блок-->
<div id="right">
<h1 class="tit_right1">Форматирование текста</h1>
<div class="right_b">
<div class="munth"><a href="#" >Авторское форматирование</a></div>
<div class="munth"><a href="#" >Физическое форматирование</a></div>
<div class="munth"><a href="#" >Логическое форматирование</a></div>
<div class="munth"><a href="#" >Установка атрибутов шрифта</a></div>
<div class="munth"><a href="#" >Работа со списками</a></div>
<div class="munth"><a href="#" >Работа со ссылками</a></div>
<div class="munth"><a href="#" >Работа с таблицами</a></div>
</div>
<h1 class="tit_right2">Структура и объекты</h1>
<div class="right_w fish_10">
<div class="munth"><a href="#" >Блоки</a></div>
<div class="munth"><a href="#" >Фреймы</a></div>
<div class="munth"><a href="#" >Формы</a></div>
</div>
</div>
<!-- Левый блок-->
<div id="left">
<h1>Литература</h1>
<div class="box1">
<div class="left_b"><span class="w">Самоучитель HTML4</span><br />
Шапошников И.В.
<div class="read"><a href="https://books.google.co.uk/books?id=P51OHlU0aLkC&printsec=frontcover&dq=inauthor:%22%D0%A8%D0%B0%D0%BF%D0%BE%D1%88%D0%BD%D0%B8%D0%BA%D0%BE%D0%B2+%D0%98%D0%B3%D0%BE%D1%80%D1%8C%22&hl=ru&sa=X&ved=0ahUKEwjNw_znlsXlAhXColwKHSXYC0IQ6AEINzAC#v=onepage&q&f=false"> Ознакомиться</a></div>
</div>
</div>
<div class="box2">
<div class="left_b"><span class="w">HTML. Самоучитель</span><br />
Комолова Н.В., Яковлева Е.С.
<div class="read"><a href="https://books.google.co.uk/books?id=fhmJgnncii4C&printsec=frontcover&hl=ru#v=onepage&q&f=false"> Ознакомится</a></div>
</div>
</div>
<div class="box3">
<div class="left_b"><span class="w">Основы web-дизайна. Самоучитель</span><br />
Дунаев В.В.
<div class="read"><a href="https://books.google.co.uk/books?id=Tfsu3MI89VIC&printsec=frontcover&hl=ru#v=onepage&q&f=false"> Ознакомиться</a></div>
</div>
</div>
<div class="box4">
<div class="left_b"><span class="w">HTML и CSS. Разработка и дизайн веб-сайтов</span><br />
Дакетт Дж.
<div class="read"><a href="https://books.google.co.uk/books?id=zcZwDwAAQBAJ&printsec=frontcover&hl=ru#v=onepage&q&f=false"> Ознакомиться</a></div>
</div>
</div>
</div>
<!-- Центральный блок-->
<div id="center">
<h1>История развития и стандарты HTML</h1>
<div class="text">
<span>Специальный язык, содержащий управляющие конструкции построения и организации web-страниц, носит название HTML (Hyper Text Markup Language, язык разметки гипертекстовой информации). </span>
</div>
<div class="text">
<img src="images/img1.jpg" class="img" width="120" height="90" alt="" />
Начало истории HTML относят к 1969 году, когда работник компании IBM Чарльз Гольдфарб создал прототип языка для разметки технической документации, в последствии названный GML, в 1986 году он получил статус международного стандарта SGML (Standard Generalized Markup Language)... <br />
<div class="read"><a href="kr_hist.html"> Читать далее</a></div><br />
</div>
<h1>Основы HTML</h1>
<div class="text">
<ol>
<li><a href="kr_sint.html">Синтаксис языка</a></li>
<li><a href="kr_struct.html">Структура документа</a></li>
</ol>
<br /><br />
</div>
<div class="text">
Обычный текст превращается в документ HTML путем добавления инструкций языка, называемых тегами. Важно понимать различие между тегами – единицами разметки и элементами – составными частями документа... <br />
<div class="read"><a href="kr_sint.html"> Читать далее</a></div><br />
</div>
<div class="text">
Документы HTML могут быть созданы при помощи любого текстового редактора или специализированных редакторов HTML-документов. Наиболее простым способом является создание HTML-документа при помощи Блокнота... <br />
<div class="read"><a href="kr_struct.html"> Читать далее</a></div><br />
</div>
</div>
<div style="clear: both"><img src="images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
</div>
</div>
</div>
<!-- Конец контента -->
<!-- Подвал -->
<div id="footer">
<p>©2019 </p>
</div>
<!-- Конец подвала -->
</div>
</div>
</body>
</html>
Файл styles.css
*
{
border: 0;
margin: 0;
}
img
{
border: 0px;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
background: url(images/bg1.jpg) top repeat-x #ffffff;
line-height: 18px;
}
#bg2 {
width: 100%;
height: 100%;
background:url(images/bg2.jpg) bottom repeat-x;}
#bg3 {
background: url(images/bg3.jpg) center top no-repeat;
width: 1014px;
margin: 0px auto;
padding-top: 41px;
}
#header {
width:100%;
background: url(images/header.jpg) left top no-repeat;
height: 330px;
}
#logo {
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:17px;
font-style:italic;
text-decoration: none;