Файл: Основы программирования на языке HTML (Написание кода на языке HTML).pdf
Добавлен: 25.06.2023
Просмотров: 66
Скачиваний: 3
Введение
Актуальность темы исследования обусловлена тем, что современная жизнь не может обойтись без интернета. Современный человек ежедневно посещает десятки различных информационных ресурсов, пользуется поисковыми системами и социальными сетями, ежедневно открываются сотни новых сайтов, а количество свободной информации растет экспоненциально.
Объектом исследования является сайт. В нашем случае это сайт – “визитная карточка”.
Предмет исследования – язык программирования HTML с подключаемыми стилями CSS.
Цель исследования состоит в определении особенностей программирования на языке HTML.
Для достижения указанной цели в курсовой работе решаются следующие исследовательские задачи:
- Разработка макета сайта с использованием Photoshop.
- На основе макета разработать сайт на языке HTML и общий стиль сайта с использованием CSS.
- Наполнить сайт контентом.
- Определить основные особенности программирования HTML.
Методы исследования. В курсовой работе применяются такие общенаучные методы исследования, как наблюдение, измерение, описание, сравнение, анализ, аналогия и некоторые другие.
Структура исследования. Курсовая работа включает в себя введение; несколько разделов и несколько подразделов в них, в которых решаются поставленные исследовательские задачи; заключение; список источников и литературы.
РАЗДЕЛ. Разработка макета сайта
С чего начинается разработка сайта?
Как и во многих других областях, в программировании жизненный цикл любого проекта начинается с идеи. В нашем случае есть идея сайта – “визитной карточки”.
- Почему подобный сайт? – спросите Вы.
- Это очень полезная вещь в современном мире – отвечу я.
На текущий момент сайт-визитка не является чем-то экстраординарным, множество людей успешно пользуются подобным информационным ресурсом, постепенно наполняя сайт портфолио и развивая его. Подобный сайт может существенно повысить шанс на утверждение кандидата на престижную должность.
Причины разработки подобного сайта.
В современном мире, особенно в крупных городах, человек живет на скорости – ест на ходу, разговаривает по телефону на ходу, решает личные и рабочие вопросы в движении. В подобном ритме жизни люди часто теряют контакты друг друга, теряют мобильные телефоны, меняют место жительства, адреса электронной почты и т.д. Большинство из нас хоть раз в жизни меняли телефонный номер, и все помнят трудности по передаче новых контактных данных своим знакомым, родственникам, коллегам и т.д.
После смены телефонного номера трудно всем сообщить свои новые контактные данные, особенно если это деловой партнер, крупный контрагент или большая организация на аутсорсинге. В данном случае поможет подобный сайт. Достаточно обновить на нем информацию, и, любой человек сможет наладить с нами контакт.
В подавляющем большинстве случаев люди на своих визитных карточках оставляют телефонные номера и адреса, которые в скором времени могут быть уже неактуальны. Может быть, была только что поставлена партия свежих визитных карточек, но при этом был изменен номер телефона или адрес электронной почты, получается, такую партию визиток можно смело направлять на помойку. Чтобы избежать лишних издержек, можно на визитной карточке вместо контактных данных указывать ссылку на свой сайт – “визитную карточку”. В подобном случае у обладателя визитной карточки всегда будет доступ к актуальной информации. Даже через 10 лет, когда мы сменим должность, несколько адресов и телефонных номеров, у людей будет доступ к актуальным данным.
Имея идею сайта, приступаем к разработке самого макета. Для его разработки используется Adobe Photoshop.
Изначально требуется определиться с используемым цветом, шрифтом и общим стилем. Для этого можно воспользоваться корпоративным брендбуком, если сайт-визитка привязан к вашей рабочей деятельности, или же провести разработку исходя из собственных предпочтений.
Для разработки нашего сайта решено уйти от громоздкого интерфейса. Основной задачей, в данном случае, не является разработка современного прорывного и интуитивно понятного интерфейса, акцент будет сделан на простоте и на содержательной части. Если на сайте необходимо поддерживать информацию в актуальном состоянии, то простота обновления контента тоже имеет важную составляющую. Тем не менее, сайт должен быть приветливым – он не должен отталкивать или быть слишком навязчивым.
На основании вышеизложенного был разработан предварительный макет сайта, который, впоследствии, будет переработан и усовершенствован, но об этом позже. На текущем этапе разработки макет сайта имеет следующий вид:
Рис. 1
-
-
-
- Таким образом, в данном разделе нами установлено, что макет сайта не является окончательным и может дополняться новыми элементами по мере необходимости и может изменяться по желанию.
-
-
- Сайт должен быть простым и в то же время стильным.
- Основной упор делается простоту на содержимое.
РАЗДЕЛ. НАПИСАНИЕ КОДА НА ЯЗЫКЕ HTML
Используемый редактор: блокнот. Для написания используется обыкновенный блокнот – стандартный текстовый редактор в среде Windows.
Написание любой страницы, согласно языку программирования, всегда начинается со стандартной строки:
<!DOCTYPE html>
Данная строка требуется по различным причинам:
- Ряд браузеров просто не отобразят страницу, или сделают это с ошибками
- Написание данной строки определяет версию языка HTML, что напрямую влияет на функциональные возможности разрабатываемого сайта.
Помимо данной строки используются следующие обязательные строки кода при написании сайта:
<html>
<head>
<title>
<body>
<footer>
Эти элементы являются обязательными при написании любого сайта. Ряд браузеров просто не сможет корректно отобразить страницу, на которой отсутствует хотя бы один из указанных выше элементов.
Первым делом определимся, что будет использовано в “голове” сайта. В нашем случае отобразим заголовок страницы следующей строкой:
<title>Моя курсовая работа<title>
Теперь при открытии страницы в заглавии страницы будет находиться данная надпись. При написании последующих страниц будет использована точно такая же строка в качестве title.
Станице нужен заголовок, который будет отображаться уже на самой странице, а не в заглавии браузера. Используем заголовок «Курсовая работа» и закрепим следующей строкой:
<h1>Курсовая работа</h1>
Таким образом, мы добавили заголовок первого уровня.
В теле страницы сайта (оператор <body>) создадим простое меню следующими строками кода:
<div class="m_menu">
<a href="index.html">Главная</a>
<a href="Galery.html">Галерея</a>
</div>
И создадим еще один класс, который назовем “content”. Там будет располагаться основная смысловая нагрузка данной страницы сайта.
<div class="content">
</div>
Оставим его пока пустым. Наполнять контентом страницу будем позже, когда будет готов общий стиль страниц в подключаемом модуле CSS.
Сейчас общий код страницы принял такой вид:
<!DOCTYPE html>
<html>
<head>
<title>Моя курсовая работа</title>
<h1>Курсовая работа</h1>
</head>
<body>
<div class="m_menu">
<a href="index.html">Главная</a>
<a href="Galery.html">Галерея</a>
</div>
<div class="content">
</div>
</hody>
<footer>
</footer>
</html>
Сохраним данный файл с использованием кодировки UTF-8. В противном случае рискуем получать ошибки при построении страницы браузером. Назовем файл “index.html”. В программировании считается хорошим тоном использовать в страничку с таким наименованием в качестве лендинговой страницы.
Таким образом, мы закончили написания основных элементов первой страницы сайта.
Исходя из кода предыдущей, страницы становится ясно, что на сайте, помимо основной страницы, будет еще одна – “Galery.html”. Уже из названия, становится понятно, что я решил на данную страницу поместить фотографии или какие-либо еще изображения.
По аналогии с предыдущей страницей напишем следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Моя курсовая работа</title>
<h1>Галерея</h1>
</head>
<body>
<div class="m_menu">
<a href="index.html">Главная</a>
<a href="Galery.html">Галерея</a>
</div>
<div class="content">
</div>
</hody>
<footer>
</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;
}
Теперь можно посмотреть, как же выглядит наша страница. Произведем открытие с помощью браузера:
Мы видим, что написанный нами текст и меню отображаются так, как и задумывалось. Продолжаем писать код. Для отображения галереи используем java скрипт и несколько заготовленных изображений, которые расположим в каталог .../img/... В процессе подготовки страницы решено добавить фоновое изображение т.к. фоновый серый цвет не слишком дружелюбен. В конечном счете, код имеет следующий вид:
<!DOCTYPE html PUBLIC "" "">
<html lang="ru">
<script type="text/javascript" src="Slider.js" ></script>
<script type="text/javascript" src="Slider2.js"></script>
<script type="text/javascript" src="Slider3.js" ></script>
<script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 15000, true); }); </script>
<link href="css/style.css" type="text/css" media="screen" rel="stylesheet">
<head>
<h1>Галерея</h1>
<title>Моя курсовая работа</title>
</head>
<body>
</div>
<div class="m_menu">
<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>
<div class="content">
<h3>Небольшая галерея с фотографиями</h3>
<p>Несолько фотографий из моей жизни.</p>
</div>
<footer>
<div id="featured">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item" id="nav-fragment-1">
<a href="#fragment-1"><img src="img/1.jpg" width="35"><span>Я</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2">
<a href="#fragment-2"><img src="img/2.jpg" width="50"><span>Я и страйкбол</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3">
<a href="#fragment-3"><img src="img/3.jpg" width="50"><span>Моя свадьба</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4">
<a href="#fragment-4"><img src="img/4.jpg" width="50"><span>Величайшее достижение</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-5">
<a href="#fragment-5"><img src="img/5.jpg" width="50"><span>Доченька</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-6">
<a href="#fragment-6"><img src="img/6.jpg" width="50"><span>Кот</span></a></li>
</ul>
<div id="fragment-1" class="ui-tabs-panel" style=""><img src="img/1.jpg" alt="" width="267"><div class="info"><h2>
<a href="img/1.jpg">Я</a></h2><p>На работе. Фото профессионального фотографа.</p></div></div>
<div id="fragment-2" class="ui-tabs-panel" style=""><img src="img/2.jpg" alt="" width="600"><div class="info"><h2>