Преподаватель который помогает студентам и школьникам в учёбе.

Основы программирования на языке HTML (С чего начинается разработка сайта)

Содержание:

Введение

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

Объектом исследования является сайт. В нашем случае это сайт – “визитная карточка”.

Предмет исследования – язык программирования HTML с подключаемыми стилями CSS.

Цель исследования состоит в определении особенностей программирования на языке HTML.

Для достижения указанной цели в курсовой работе решаются следующие исследовательские задачи:

Разработка макета сайта с использованием Photoshop.
На основе макета разработать сайт на языке HTML и общий стиль сайта с использованием CSS.
Наполнить сайт контентом.
Определить основные особенности программирования HTML.

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

Структура исследования. Курсовая работа включает в себя введение; несколько разделов и несколько подразделов в них, в которых решаются поставленные исследовательские задачи; заключение; список источников и литературы.

РАЗДЕЛ.

Разработка макета сайта

С чего начинается разработка сайта?

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

Почему подобный сайт? – спросите Вы.
Это очень полезная вещь в современном мире – отвечу я.

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

Причины разработки подобного сайта.

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

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

В подавляющем большинстве случаев люди на своих визитных карточках оставляют телефонные номера и адреса, которые в скором времени могут быть уже неактуальны. Может быть, была только что поставлена партия свежих визитных карточек, но при этом был изменен номер телефона или адрес электронной почты, получается, такую партию визиток можно смело направлять на помойку. Чтобы избежать лишних издержек, можно на визитной карточке вместо контактных данных указывать ссылку на свой сайт – “визитную карточку”. В подобном случае у обладателя визитной карточки всегда будет доступ к актуальной информации. Даже через 10 лет, когда мы сменим должность, несколько адресов и телефонных номеров, у людей будет доступ к актуальным данным.

1. Разработка макета.

Имея идею сайта, приступаем к разработке самого макета. Для его разработки используется Adobe Photoshop.

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

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

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

Стилистика.jpg

Рис. 1

Выводы по первому разделу:

- - 1. Таким образом, в данном разделе нами установлено, что макет сайта не является окончательным и может дополняться новыми элементами по мере необходимости и может изменяться по желанию.

Сайт должен быть простым и в то же время стильным.
Основной упор делается простоту на содержимое.

РАЗДЕЛ.

НАПИСАНИЕ КОДА НА ЯЗЫКЕ HTML

1. Написание кода первой страницы index.thml

Используемый редактор: блокнот. Для написания используется обыкновенный блокнот – стандартный текстовый редактор в среде Windows.

Написание любой страницы, согласно языку программирования, всегда начинается со стандартной строки:

<!DOCTYPE html>

Данная строка требуется по различным причинам:

Ряд браузеров просто не отобразят страницу, или сделают это с ошибками
Написание данной строки определяет версию языка HTML, что напрямую влияет на функциональные возможности разрабатываемого сайта.

Помимо данной строки используются следующие обязательные строки кода при написании сайта:

<html>

<head>

<title>

<body>

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

Первым делом определимся, что будет использовано в “голове” сайта. В нашем случае отобразим заголовок страницы следующей строкой:

<title>Моя курсовая работа<title>

Теперь при открытии страницы в заглавии страницы будет находиться данная надпись. При написании последующих страниц будет использована точно такая же строка в качестве title.

Станице нужен заголовок, который будет отображаться уже на самой странице, а не в заглавии браузера. Используем заголовок «Курсовая работа» и закрепим следующей строкой:

<h1>Курсовая работа</h1>

Таким образом, мы добавили заголовок первого уровня.

В теле страницы сайта (оператор <body>) создадим простое меню следующими строками кода:

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

<a href="Galery.html">Галерея</a>

</div>

И создадим еще один класс, который назовем “content”. Там будет располагаться основная смысловая нагрузка данной страницы сайта.

</div>

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

Сейчас общий код страницы принял такой вид:

<!DOCTYPE html>

<html>

<head>

<title>Моя курсовая работа</title>

<h1>Курсовая работа</h1>

</head>

<body>

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

<a href="Galery.html">Галерея</a>

</div>

</div>

</hody>

</footer>

</html>

Сохраним данный файл с использованием кодировки UTF-8. В противном случае рискуем получать ошибки при построении страницы браузером. Назовем файл “index.html”. В программировании считается хорошим тоном использовать в страничку с таким наименованием в качестве лендинговой страницы.

Таким образом, мы закончили написания основных элементов первой страницы сайта.

1. Написание второй страницы сайта и подключение стилей.

Исходя из кода предыдущей, страницы становится ясно, что на сайте, помимо основной страницы, будет еще одна – “Galery.html”. Уже из названия, становится понятно, что я решил на данную страницу поместить фотографии или какие-либо еще изображения.

По аналогии с предыдущей страницей напишем следующий код:

<!DOCTYPE html>

<html>

<head>

<title>Моя курсовая работа</title>

<h1>Галерея</h1>

</head>

<body>

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

<a href="Galery.html">Галерея</a>

</div>

</div>

</hody>

</footer>

</html>

Кодировка практически идентична, за исключением заголовка первого уровня. Сохраняем файл в тот же каталог. Не забываем про кодировку UTF-8.

Теперь нам не терпится посмотреть, как же выглядит наш сайт. Однако, пока еще не описаны стили. Можно, конечно, каждому элементу стиля на каждой странице сайта задавать параметры индивидуально, но если мы решим изменить стилистику? Придется переписывать код для каждой страницы сайта, что неприемлемо. Кроме того, подобное написание сильно раздует кодировку страницы, что, существенно осложняет прочтение кода.

Решено использовать подключаемый модуль стиля. Назовем его Style.css.

Используя все тот же текстовый редактор (блокнот) создадим требуемый файл в каталог .../css/Style.css. Создаем отдельную папку, для порядка.

Опишем оглавление первого уровня и класс “m_menu” следующим кодом:

*{margin:0 auto; padding:0;}

html{background:#ddd; width:100%; height:100%;}

h1{

text-align:center;

font-size:35px;

font-weight:bold;

font-family:"Times New Roman", Times, serif;

margin:0px 0px; color:#000000

}

.m_menu{

margin:0px 280px;

text-align:center;

font-size:14px;

font-weight:bold;

padding:6px 0px 9px 0px;

color:#ddd;

}

.m_menu a{

color:#fff;

margin:0px 6px;

}

Теперь можно посмотреть, как же выглядит наша страница. Произведем открытие с помощью браузера:

Первая страница.jpg

Мы видим, что написанный нами текст и меню отображаются так, как и задумывалось. Продолжаем писать код. Для отображения галереи используем java скрипт и несколько заготовленных изображений, которые расположим в каталог .../img/... В процессе подготовки страницы решено добавить фоновое изображение т.к. фоновый серый цвет не слишком дружелюбен. В конечном счете, код имеет следующий вид:

<!DOCTYPE html PUBLIC "" "">

<head>

<h1>Галерея</h1>

<title>Моя курсовая работа</title>

</head>

<body>

</div>

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

<a href="news.html">Галерея</a> |

<a href="hystory.html">История</a> |

<a href="contact.html">Контакты</a> |

<a href="review.html">Закачка</a>

</div>

</body>

<h3>Небольшая галерея с фотографиями</h3>

<p>Несолько фотографий из моей жизни.</p>

</div>

<a href="#fragment-2"><img src="img/2.jpg" width="50"><span>Я и страйкбол</span></a></li>

<a href="#fragment-3"><img src="img/3.jpg" width="50"><span>Моя свадьба</span></a></li>

<a href="#fragment-4"><img src="img/4.jpg" width="50"><span>Величайшее достижение</span></a></li>

<a href="#fragment-5"><img src="img/5.jpg" width="50"><span>Доченька</span></a></li>

</ul>

<a href="img/1.jpg">Я</a></h2><p>На работе. Фото профессионального фотографа.</p></div></div>

<a href="img/2.jpg">Я и страйкбол</a></h2><p>В свободное от работы и учебы время занимаюсь этим замечательным спортом!</p></div></div>

<a href="img/3.jpg">Моя свадьба</a></h2><p>Первый поцелуй в браке. На фото я, жена и родственники на заднем плане.</p></div></div>

<a href="img/4.jpg">Мое величайшее достижение</a></h2><p>Моя любимая доченька. Вика, так ее зовут, на этой фотографии еще не умеет даже сидеть.</p></div></div>

<a href="img/5.jpg">Доченька</a></h2><p>На этой фотографии ей 1,5 года.</p></div></div>

<a href="img/6.jpg">Кот</a></h2><p>Просто кот из интернета</p></div></div>

</div>

</footer>

</html>

У нас появилось много новых элементов и классов, но они не имеют описанного стиля. Поэтому дополняем наш css файл следующими строками:

#featured{

width:800px;

padding-right:0px;

position:relative;

border:5px solid #333333;

height:400px;

background:#000000;

margin-top: 50px

}

#featured ul.ui-tabs-nav{

position:absolute;

top:0;

left:600px;

list-style:none;

padding:0;

margin:0;

width:200px;

}

#featured ul.ui-tabs-nav li{

padding:1px 0;

padding-left:13px;

font-size:12px;

color:#ffffff;

}

#featured ul.ui-tabs-nav li img{

float:left;

margin:2px 5px;

background:#ffffff;

padding:2px;

border:1px solid #eee;

}

#featured ul.ui-tabs-nav li span{

font-size:11px;

font-family:Verdana;

line-height:18px;

}

#featured li.ui-tabs-nav-item a{

display:block;

height:60px;

color:#ffffff;

background:#000000;

line-height:20px;

}

#featured li.ui-tabs-nav-item a:hover{

background:#cd0d1e;

}

#featured li.ui-tabs-selected{

background:url(../img/bg.png) top left no-repeat;

}

#featured ul.ui-tabs-nav li.ui-tabs-selected a{

color:#ebebeb;

background:#cd0d1e;

}

#featured .ui-tabs-panel{width:600px;

height:400px;

padding:0px 0px 0px 0px;

background:#999;

position:relative;

Float:left

}

#featured .ui-tabs-panel .info{

position:absolute;

top:330px;

left:0;

height:70px;

width:400px;

background:url(../img/bg.png);

}

#featured .info h2{

font-size:18px;

font-family:Georgia, serif;

color:#fff;

padding:5px;

margin:0;

overflow:hidden;

}

#featured .info p{

margin:0 5px;

font-family:Verdana;

font-size:11px;

line-height:15px;

color:#f0f0f0;

}

#featured .info a{

text-decoration:none;

color:#fff;

}

#featured .info a:hover{

text-decoration:underline;

}

#featured .ui-tabs-hide{

display:none;

}

Проверяем страницу сайта с помощью браузера.

Вторая страница.jpg

Таким образом, сайт приобретает определенные характерные черты.

1. Кодировка файла CSS под лист index.html

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

h3{

text-align:center;

font-size:28px;

font-weight:bold;

font-family:"Times New Roman", Times, serif;

margin:0px 0px;

color:#000000

}

h4{

text-align:center;

font-size:22px;

font-weight:bold;

font-family:"Times New Roman", Times, serif;

margin:0px 0px;

color:#000000}

body{

height:100%;

width:950px;

background:url(../img/mm1.jpg);

}

.m_menu{

margin:0px 280px;

text-align:center;

font-size:14px;

font-weight:bold;

padding:6px 0px 9px 0px;

color:#ddd;

}

.m_menu a{

color:#fff;

margin:0px 6px;

}

.content{

background:#CCCCCC;

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

color:#000033;

box-sizing:border-box;

min-height: 1%;

padding-bottom: 10px;

padding-top:10px;

border: 3px solid #9966FF;

width: 800px

}

text-indent: 20px;

}

li{

text-indent: 20px;

}

.footer{background:#00FFCC;

width:800px;

height:150px;

margin-top: 80px;

border:3px solid #000099;

}

Таким образом, мы описали основные элементы первой страницы.

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

1. Код остальных страниц.

Принцип кодирования оставшихся листов не сильно отличается. Структура остается неизменной, а стилистика больше не изменяется.

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

- 1. Конечный код страницы Index.html.

<!DOCTYPE html PUBLIC "" "">

<head>

<h1>Курсовая работа</h1>

<title>Моя курсовая работа</title>

</head>

<body>

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

<a href="Galery.html">Галерея</a> |

<a href="hystory.html">История</a> |

<a href="contact.html">Контакты</a> |

<a href="review.html">Ссылки</a>

</div>

<p>Сайт разработан с целю демонстрации навыков написания сайта с использованием языка HTML с использованием подключаемых стилей (css).</p>

<p>Разработка сайта вызвана необходимостью сдачи курсовой работы по теме "Основы программирования на языке HTML".</p>

<h3>Кратко о данной работе</h3>

<p>На текущий момент являюсь работником аэропорта "Домодедово". Занимаю должность не связанную с IT уже более 7 лет. В связи с высокой загруженностью и массой дел не связанных с обучением, не могу уделить достаточно внимания для написания более проработанного сайта. Тем не менее, данная работа дает представление о базисных навыках написания сайта на языке HTML, что и требуется в рамках курсовой работы.</p>

<p>На сайте реализованы следующие элементы:

<li>Навигационное меню</li>

<li>Слайдер (для реализации использован java-скрипт. Java скрипт позаимствован, т.е. не разрабатывался самостоятельно, при этом все стили имеют самостоятельную разработку.)</li>

<li>Видеоплеер и видеозапись к нему</li>

<li>Две ссылки для скачиваиня</li>

<li>Сайт специально выведен по центру страницы, это сделано для возможности его использования через смартфон, поскольку писать адаптивный сайт в рамках курсовой работы с темой "Основы программирования на языке HTML" посчитал нецелесообразным.</li>

<h4>Возникшие проблемы:</h4>

<li>Отсутствие свободного от работы времени. В связи со сложившимися обстоятельствами во всем мире, штат был несколько урезан, а объем работы остался на прежнем уровне.</li>

<li>Сайт корректно отображается не на всех браузерах. Описывать сайт под каждый браузер отдельно отсутствует возможность, что обусловлено недостаточным объемом ресурса времени в распоряжении.</li>

</div>

</body>

<div class="footer">Просто дополнительный блок, в котором может располагаться какой-либо контент, например, логотип или рекламный баннер.

</div>

</html>

- 1. Конечный код страницы hystory.html.

<!DOCTYPE html PUBLIC "" "">

<head>

<h1>История</h1>

<title>Моя курсовая работа</title>

</head>

<body>

</div>

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

<a href="Galery.html">Галерея</a> |

<a href="Hystory.html">История</a> |

<a href="Contact.html">Контакты</a> |

<a href="review.html">Ссылки</a>

</div>

<h3>Моя история (кратко)</h3>

<p>Я родился 19 декабря 1990.</p>

<p>Рос вполне обычным ребенком в самой обычной семье. Когда мне было 6 лет, на вопрос о том, кем хочу стать всегда говорил: "Компьютерщиком!". Я был еще совсем маленьким, и не понимал разницу между администраторами, программистами, техниками, специалистами по слаботочным сетям и специалистами по безопасности, для меня на тот момент это все были "Компьютерщики". Все столь разные профессии для меня являлись чем-то одним, очень не понятным, но жутко интересным.</p>

<p>Учась в школе твердо определился с выбором будущей профессии - хотел стать системным администратором. Выбрал наиболее подходящее среднее специальное учебное заведение и поступил в него. Родители мне не мешали с определением профессии и всячески поддерживали меня в моем решении. Получив диплом в Московском Техническом Колледже по специальности "Компьютерные системы, комплексы систем и сети", я начал поиск работы. Ежедневно обзванивал десятки организаций, но везде получал один ответ: "Без опыта работы не возьмем". И я до сих пор мучаюсь вопросом, где же взять опыт работы, если без него ни куда не бирут?</p>

<p>Спустя 3 месяца безуспешных поисков, узнал что в московском аэропорту "Домодедово" есть вакансия специалиста по технической поддержке. Уже через месяц занимал должность на своем первом официальном месте работы. Проработав на данной должности 17 месяцев, мне предложили должность бизнес-аналитика. Руководство компании впечатлило мое решение по оптимизации труда всего IT департамента, которое позволило сократить издержки рабочего времени на 1200 часов ежемесячно. На этом моя профессиональная карьера в роли IT специалиста закончилась и я стал заниматься внедрением новых процессов в компании, разработкой KPI, сбором статистики и прогнозом показателей.</p>

<p>И вот, по сей день занимаюсь бизнес анализом. За 8 с лишним лет работы на данной позиции я разработал множество процессов, сократил издержко компании, разработал несколько сложных математических моделей, которые дайют прогноз с крайне высокой точностью.</p>

<p>Данная работа (я имею ввиду сам сайт), написан для сдачи курсовой работы в МФПУ Университет. Поскольку еще не получил высшее профессиональное образование, это ставит меня в весьма неловкое положение на работе, ведь я занимаю достаточно высокую позицию, которая требует обширных знаний. Тем не менее, данное обстоятельство характеризует меня как ответственного и способного сотрудника.</p>

<p>Небольшое видео с благодарностью для того, кто его смотрит.</p>

</div>

</div>

</body>

</html>

- 1. Конечный код страницы review.html.

<!DOCTYPE html PUBLIC "" "">

<head>

<h1>Ссылки для скачивания</h1>

<title>Моя курсовая работа</title>

</head>

<body>

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

<a href="Galery.html">Галерея</a> |

<a href="Hystory.html">История</a> |

<a href="Contact.html">Контакты</a> |

<a href="review.html">Ссылки</a>

</div>

<h3>Резюме</h3>

<a href="doc/doc.docx">Скачать</a>(Курсовая работа)

<a href="video/video.mp4">Ссылка на видео</a>

</div>

</body>

</html>

- 1. Конечный код страницы Contact.html.

<!DOCTYPE html PUBLIC "" "">

<head>

<h1>Контакты</h1>

<title>Моя курсовая работа</title>

</head>

<body>

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

<a href="Galery.html">Галерея</a> |

<a href="Hystory.html">История</a> |

<a href="Contact.html">Контакты</a> |

<a href="review.html">Ссылки</a>

</div>

<h3>Барчишин Денис Николаевич</h3>

<p>Адрес: г.Москва 115573 Ореховый проезд дом 9<p>

<p>email: DenisBarchishin@dme.ru</p>

</div>

</body>

</html>

- 1. Конечный код стиля

*{margin:0 auto; padding:0;}

html{background:#ddd; width:100%; height:100%;}

h1{

text-align:center;

font-size:35px;

font-weight:bold;

font-family:"Times New Roman", Times, serif;

margin:0px 0px;

color:#CCCCCC

}

h3{

text-align:center;

font-size:28px;

font-weight:bold;

font-family:"Times New Roman", Times, serif;

margin:0px 0px;

color:#000000

}

h4{

text-align:center;

font-size:22px;

font-weight:bold;

font-family:"Times New Roman", Times, serif;

margin:0px 0px;

color:#000000}

body{

height:100%;

width:950px;

background:url(../img/mm1.jpg);

}

.m_menu{

margin:0px 280px;

text-align:center;

font-size:14px;

font-weight:bold;

padding:6px 0px 9px 0px;

color:#ddd;

}

.m_menu a{

color:#fff;

margin:0px 6px;

}

.content{

background:#CCCCCC;

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

color:#000033;

box-sizing:border-box;

min-height: 1%;

padding-bottom: 10px;

padding-top:10px;

border: 3px solid #9966FF;

width: 800px

}

text-indent: 20px;

}

li{

text-indent: 20px;

}

.footer{background:#00FFCC;

width:800px;

height:150px;

margin-top: 80px;

border:3px solid #000099;

}

#featured{

width:800px;

padding-right:0px;

position:relative;

border:5px solid #333333;

height:400px;

background:#000000;

margin-top: 50px

}

#featured ul.ui-tabs-nav{

position:absolute;

top:0;

left:600px;

list-style:none;

padding:0;

margin:0;

width:200px;

}

#featured ul.ui-tabs-nav li{

padding:1px 0;

padding-left:13px;

font-size:12px;

color:#ffffff;

}

#featured ul.ui-tabs-nav li img{

float:left;

margin:2px 5px;

background:#ffffff;

padding:2px;

border:1px solid #eee;

}

#featured ul.ui-tabs-nav li span{

font-size:11px;

font-family:Verdana;

line-height:18px;

}

#featured li.ui-tabs-nav-item a{

display:block;

height:60px;

color:#ffffff;

background:#000000;

line-height:20px;

}

#featured li.ui-tabs-nav-item a:hover{

background:#cd0d1e;

}

#featured li.ui-tabs-selected{

background:url(../img/bg.png) top left no-repeat;

}

#featured ul.ui-tabs-nav li.ui-tabs-selected a{

color:#ebebeb;

background:#cd0d1e;

}

#featured .ui-tabs-panel{width:600px;

height:400px;

padding:0px 0px 0px 0px;

background:#999;

position:relative;

Float:left

}

#featured .ui-tabs-panel .info{

position:absolute;

top:330px;

left:0;

height:70px;

width:400px;

background:url(../img/bg.png);

}

#featured .info h2{

font-size:18px;

font-family:Georgia, serif;

color:#fff;

padding:5px;

margin:0;

overflow:hidden;

}

#featured .info p{

margin:0 5px;

font-family:Verdana;

font-size:11px;

line-height:15px;

color:#f0f0f0;

}

#featured .info a{

text-decoration:none;

color:#fff;

}

#featured .info a:hover{

text-decoration:underline;

}

#featured .ui-tabs-hide{

display:none;

}

.video{

background:black;

width:650px;

height:360px;

margin-top: 30px;

border:1px solid black;

}

- 1. Особенности программирования на HTML

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

Каждая страница сайта требует разработки стиля, что существенно загромождает код страницы, осложняет читаемость программного кода, а так же отнимает много времени на написание однотипных строк. Для сокращения временных затрат и упрощения программного кода можно использовать подключаемые стили CSS, и, прописав основные элементы стиля однажды, потребность в их корректировке может уже не потребоваться.
Язык HTML имеет ряд правил, таких как обязательность наличия строки <!doctype html>, <body> или же <head>. Данные строки кода позволяют быстро ориентироваться в программном коде и находить требуемые разделы.
Еще одной особенностью является необходимость закрытия уже открытых тегов. Закрытие производится путем добавления символа «/» в наименовании уже открытого тега. Таким образом, закрытие тега <body> будет выглядеть как «</body>».
Как и в прочих языках программирования, хорошим тоном является использование табуляции при увеличении уровня вложенности. Это заметно упрощает прочтение кодировки.
Еще одной общей чертой с другими языками программирования является добавление комментариев к коду, которые при просмотре страницы в браузере не видны. Комментарии добавляются с помощью следующего тега «<!>». Все что между восклицательным знаком и закрывающим тег символом, не будет отображаться в браузере.
HTML является достаточным языком для написания простых сайтов, однако, при необходимости добавления дополнительных модулей, таких как проигрыватель добавление фотоальбома с переключением фотографий, язык программирования оказывается неспособен к добавлению подобного функционала собственными силами. Сказывается давность создания языка программирования – 1992 год. С тех пор HTML практически не изменялся, из-за чего добавление функций, используемых в современных сайтах, без привлечения дополнительных инструментов просто невозможно.

Выводы по второму разделу:

В данном разделе нами показано как производилась разработка сайта. Описано использование стилей, подключение java скрипта. Данный раздел – наглядное пособие по программированию простых сайтов, не требующих нотификации и валидации. В заключении были определены ключевые особенности программирования на языке программирования HTML, что и требовалось, согласно поставленным задачам по исследованию.

ЗАКЛЮЧЕНИЕ

Таким образом, выполнение поставленных исследовательских задач позволило получить следующие основные результаты исследования:

1. Рассмотрены основные элементы структуры построения сайта.

2. Описана процедура подключения общих стилей с помощью CSS.

3. Описано использование java скрипта в качестве простого инструмента для просмотра изображений.

4. Произведено подключение проигрывателя видео с использованием стандартных кодеков.

5. Рассмотрены основные проблемы и особенности при разработке простых сайтов на языке HTML.

Перспективы исследования данной проблемы состоят в необходимости: а) более длительной подготовки сайта для реализации бо'льшего количества функций; б) в более детальном изучении особенностей программирования на языке HTML, изучении новых механик проектирования сайта и изучении дополнительных свойств языка программирования.

ИСТОЧНИКИ И ЛИТЕРАТУРА

Источники:

1. Java-скрипт

jQuery JavaScript Library v1.3.2

http://jquery.com/

Dual licensed under the MIT and GPL licenses.

http://docs.jquery.com/License

Date: 2009-02-19 17:34:21 -0500 (Thu, 19 Feb 2009)

Revision: 6246

2. Java-скрипт

jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/

Uses the built in easing capabilities added In jQuery 1.1

II. Литература:

Не использовалась

Основы программирования на языке HTML (С чего начинается разработка сайта)

Введение

НАПИСАНИЕ КОДА НА ЯЗЫКЕ HTML

Написание кода первой страницы index.thml

Написание второй страницы сайта и подключение стилей.

Конечный код страницы hystory.html.

Конечный код стиля

ЗАКЛЮЧЕНИЕ

ИСТОЧНИКИ И ЛИТЕРАТУРА