Розробка та створення веб сайту

Інформація про навчальний заклад

ВУЗ:
Інші
Інститут:
Не вказано
Факультет:
Не вказано
Кафедра:
Не вказано

Інформація про роботу

Рік:
2020
Тип роботи:
Курсовий проект
Предмет:
Дизайн

Частина тексту файла

Міністерство освіти і науки України
КУРСОВИЙ ПРОЕКТ
з дисципліни «Веб - дизайн»
Тема:
«Розробка та створення веб сайту»
Зміст Вступ.3 Короткі теоретичні відомості....5 Голова документа.5 Тіло документа.5 Таблиці..6 Абзаци...8 Розмір шрифту9 З'єднання з іншими документами.11 Фрейми12 Постановка задачі.12 Карта сайту13 Побудова і реалізація сайту.15 Висновок.17 Список використаної літератури..18 Додаток А...19
Вступ
HTML, Hyper Text Markup Language, або, по-українськи, «мова розмітки гіпертексту », є фундаментальною, базовою технологією Інтернету. Не дивлячись на існуюче серед користувачів Всесвітньої мережі думка, що HTML є повнофункціональною мовою програмування, яка володіє практично всіма рисами, характерними для інших аналогічних мов.
Практично весь вміст web-вузлів, який відображається на екрані підключених до Інтернету комп'ютерів, є набором документів, що містять програмний код HTML.
HTML дозволяє формувати на сторінці сайту текстові блоки, включати в них зображення, організовувати таблиці, управляти відображенням кольору документа і тексту, додавати в дизайн сайту звуковий супровід, організовувати гіперпосилання з контекстним переходом в інші розділи серверу або звертатися до інших ресурсів Мережі і компонувати всі ці елементи між собою. Файли, що містять гіпертекстовий код, мають розширення .htm або .html.
HTML, Hyper Text Markup Language (мова розмітки гіпертексту) - мова, що використовується для створення документів в Інтернеті. HTML-документом називається файл, що містить код HTML. Такі документи є основним інформаційним наповненням web-вузлів, вони дозволяють відображати текст, графіку, аудіо та відеоінформацію, а також інші компоненти ресурсів Інтернету.
Однієї з основних функціональних особливостей, характерних саме для даної мови програмування, завдяки якій він і одержав свою назву, є гіперпосилання.
Гіперпосилання (Hyperlink) - базовий функціональний елемент html-доку-мента, що є реалізацією динамічного зв'язку якого-небудь об'єкту даної web-сторінки з контекстним вмістом іншого документа.
Щоб роз'яснити цей термін, приведу простий приклад. Припустимо, що створений вами html-документ включає текст, в якому зустрічається слово «гіперпосилання », а докладне розкриття цього терміну приведено в іншому документі, розміщеному в Інтернеті незалежно від першого. Перетворивши дане слово в гіперпосилання і пов'язавши її з вказаним вище документом, ви організовуєте тим самим найпростіший гіперзвязок: користувачу, охочому ознайомитися із значенням терміну «гіперпосилання », достатньо клацнути мишею на цьому слові, щоб перейти до web-сторінки з відповідними поясненнями. Слід зазначити, що як гіперпосилання може використовуватися як елемент текста, так і графічний об'єкт, а сам гіперзвязок можна встановлювати як між декількома документами, розташованими на одному фізичному сервері, так і з об'єктами, розміщеними на різних вузлах Інтернету.
На відміну від інших мов програмування, HTML - мова не трансльована, але що інтерпретується. Це означає, що для виконання готового коду його не потрібно компілювати, вбудований в спеціальне програмне забезпечення, призначене для проглядання web-сторінок, інтерпретатор «компілює » код безпосередньо в процесі відкриття документа. При цьому, знайшовши в тексті помилку, така програма не видає відповідного попередження(якщо сторінка не містить вбудованих скриптів Java), а просто ігнорує всю «помилковий » рядок.
Це слідує мати у вигляді, складаючи HTML-програму, оскільки можна ненароком пропустити «непомітну » помилку і виявити її наявність вже тоді, коли сторінка буде опублікована в Web.
1.Короткі теоретичні відомості 1.1. “Голова” документа Для оголошення назви сторінки служать команди:
текст
Назва - необов'язкова частина в документі, але окрім відображення в заголовку браузера імені сторінки, може включати необмежену кількість дуже корисних META-інструкцій. Звичайно вони розташовуються між двома першими мітками
і . META-інструкція цей стандартний опис теми документа(для пошукових систем) або ж пряма вказівка для браузера. Приклад:
- інструкція дає вказівку браузеру інтерпретувати документ як HTML-текст (кодування сучасні браузери розпізнають автоматично, тому використовувати в метах параметр charset більше не рекомендується.)
Простір між закриваючими мітками
і
часто використовується для зберігання операторів JavaScript и VBScript
використовуючих глобальні змінні і функції, а також при упровадженні Каскадных таблиц стилей
або для оголошення скажемо нестандартного розміру шрифту сторінки за допомогою тега
1.2. "Тіло" документа Основний текст сторінки знаходиться після необов'язкового заголовка, між так само необов'язковими мітками: ...тіло сторінки....(Сучасні браузеры самі розпізнають де кінчається заголовок і починається тіло документа... але ми, дотримуватимемо традиції побудови web сторінок)
До того ж відкриваючу мітку можна використовувати
для задання кольору або шпалер для сторінки :
- зелений колір сторінки; або
для використовування як шпалери, фонового малюнка, наприклад з ім'ям Image.gif
Якщо сторінка займає місця більш ніж вікно браузера, то зсовуючи смугу прокрутки ви зсовуватимете так само і шпалери. Для того, щоб вони не уповзали використовуйте наступний синтаксис:
В даному прикладі ще до завантаження фонового зображення (fon.jpg) сторінка матиме червоний колір (підбирається в тон фонової картинки, адже зображення може мати великий час завантаження, а може і зовсім не завантажитись при поганому зв'язку.
1.3. Таблиці Таблиці є найчудовішою особливістю HTML. Озброївшися невеликою кількістю знань, ви зможете використовувати їх, щоб створювати вражаюче різноманітність ефектів при проектуванні сторінок. Таблиця розміщується між тегами ... . Наприклад:

Це
приклад
звичайної
таблиці Це
приклад
звичайної
таблиці
-Новая рядок для необмеженого числа елементів таблиці.
-Ячейка для заголовків.
-Ячейка для звичайного тексту.
ROWSPAN - задає кількість осередків з'єднаних в колонку, COLSPAN - теж, в строчку. (З об'єднанням доведеться потренуватися: при об'єднанні, осередки, що залишилися(з'єднані в одну), повинні бути пропущені тобто якщо ви оголосили, що сполучаєте 6 осередків в рядку, наступний тег осередки вноситиме дані відразу в сьомий осередок цього рядка. Теж і з колонками.)
Складніший приклад:
rowspan="2">В першому рядку осередків в колонку з'єднано 2 осередки заголовків. В другому рядку таблиці тег першого осередку повинен бути пропущений.
3 осередок першого рядка
Вторая рядок таблиці теж складається з трьох осередків, але оскільки тег першого осередку пропущений через оголошення в першому рядку, а 2 останні осередки теж з'єднані в одну, то в другому рядку використовується тільки одна мітка осередку.
Дає на екрані:
В першому рядку осередків в колонку з'єднано 2 осередки заголовків. В другому рядку таблиці тег першого осередку повинен бути пропущений.
3 осередок першого рядка
Другий рядок таблиці теж складається з трьох осередків, але оскільки тег першого осередку пропущений через оголошення в першому рядку, а 2 останні осередки теж з'єднані в одну, то в другому рядку використовується тільки одна мітка осередку.
"BGCOLOR" – кольор фона- можна використовувати як для таблиці в цілому,так і для кожного осередку окремо. Це відноситься і до можливості
використовування як фон графічного файлу. Наприклад:
Таблиці автоматично розтягуються залежно від вмісту, але також можливе і оголошення їх розмірів. WIDTH - ширина таблиці можна у відсотках, можна в пікселях. HEIGHT-висота.(теж і до осередків)
Також таблицею можуть управляти атрибути CELLPADDING="n" - визначає відступ від вмісту усередині осередків, і CELLSPACING="n" -ширина меж між осередками -все в пікселях. (Значення BORDER проте визначає, будуть межі присутній взагалі.) 1
2
3
4
Залишається додати, що таблиця як і картинки має можливість обтікання текстом (відносного вирівнювання) при використовуванні властивості ALIGN в теге TABLE з параметрами left, right Наприклад:
1
2
3
4
1.4. Абзаци На відміну від текстових документів переривання рядків в HTML-файлах не істотні. При прогляданні HTML-джерела в текстовому редакторі обривши рядки може відбуватися в будь-якому місці, але при перегляді в браузері це переривання буде проігноровано. Замість 68 пропусків браузер покаже в тексті тільки один, так що в цьому плані особливо можете не напружуватися, якщо тільки ви не використовуєте Авторський стиль.
Розбиття документа на складові задається за допомогою таблиць, міток форматування:
і
(від paragraf) а також
(від break). (Окрім цього можлива вставка примусових пропусків за допомогою команди:   (no break space) - для кожного пропуску.) Звичайний текст рекомендується розташовувати в абзацах:
текст В цьому випадку він буде виділений новим рядком. (Закриваючий тег необов'язковий. У випадку якщо він пропущений, наступний абзац почнеться з наступною відкриваючою мітки , проте його вживання іноді доцільне, наприклад для переривання вирівнювання) Редагування тексту усередині абзацу може проводиться із застосуванням Логічних і Фізичних стилів форматування, причому Фізичні стилі для Чайника як бальзам на душу... Логічні - же вимагають чималого досвіду в обігу з різними браузерами.
Величезне значення в HTML має нагоду вирівнювання. Наприклад наступний рядок:
Вирівнювання по центру видасть на екрані :
Вирівнювання по центру Для align допустимі значення: "сеnter", "right" і "justify"(рівномірний розподіл по всій довжині рядка. тільки для тексту). За умовчанням, браузер сам рівняє всі елементи по лівому краю. Вирівнювання може застосуються до тегам: ,, до картинок
і заголовків . Так-же в HTML існує спеціальний тег вирівнювання: ... . Все що розташовано між цими мітками буде вирівняно так, як і по команді
1.5. Розмір шрифту Для виділення заголовків в тексті існує мітка ...заголовок... (від head- голова). Де розмір заголовка міняється від 1 до 6 в порядку убування.(1- найкрупніший) Наприклад заголовок цього параграфа в HTML виглядає так:
розмір шрифта
Приведений тег виділяє свій заголовок відступом рядків. До нього можна застосовувати вирівнювання: Заголовок п'ятого рівня (Закриваючий тег обов'язковий.)
Розмір шрифту в решті тексту задається за допомогою команд
...
Теги можуть бути вкладені один в одного в нескінченній кількості. (не забувайте тільки їх правильно закривати!) Значення для n можуть лежати в межах від 1 до 7 за збільшенням розміру шрифту (протилежно розмірам заголовків) наприклад:
Розмір шрифту = 5 . Також можливе завдання розміру шрифту щодо шрифту "за умовчанням" у вигляді: size=+2 або size=-1. Звичайний «експлорерівський» розмір це 3, але у кожного користувача можуть бути і свої настройки. Розмір шрифту "за умовчанням" для конкретної сторінки можна задати тегом
-розташованним в голові
сторінки, для установки даного розміру відповідно рівному 5 (якщо у Вас Гігантоманія).
Для тексту знаходиться в кожному з осередків таблиці
слід застосовувати власний тег (це торкається і кольору
шрифту)
Розміщення тексту буває і зовсім без міток, в цьому випадку стає неможливим його вірівнювання
(що у принципі буває і непотрібне), а шрифт приймає розмір відповідний . Кольор шрифта
задається параметром color="кольор " наприклад: Размер шрифту = 5
видасть той же рядок що і в попередньому прикладі, тільки зелену. (кінцево якщо у Вас за умовчанням не вибрано 7 розмір шрифту ;-)
(Черговість в завданні параметрів будь-кого тега неважлива.)
1.6. З'єднання з іншими документами Browser виділяє кольором або підкресленням ключові слова, що є зверненням до документа, або до частини документа позначеної «закладкой». Ця видима частина посилання - вказівник, що дозволяє натисненням однієї клавіші миші швидко переміщатися від одного документа до іншого. Прихована частина посилання -адресна, дає інструкцію самому браузеру і описує адресу ресурсу.
Наприклад: Ссылка на Main.htm
-це
видима частина посилання. В текстовому редакторі дане посилання може виглядати так: Ссылка на Main.htm.
Тут ключові слова Посилання на Main.htm є гіперпосиланням на файл лежачий в тій же директорії, що і поточний документ. Посилання на файл NJStats.htm, що лежить у вкладеній теці AtlanticStates можна описати використовуючи слеш:
New Jersey
Це так звані відносні посилання - даючі адреси ресурсів знаходяться на одному комп'ютері. Ви також можете використовувати абсолютне ім'я файлу (повна мережна адреса) ніби:
New Jersey
Посилання які ви даєте на документи знаходяться в мережі повинні бути абсолютними. Всі внутрішні посилання (забезпечуючі роботу вашої сторінки) повинні бути відносними, що б уникнути постійних виправлень сторінки при перенесенні її в іншу теку.
Гіперпосилання можна давати не тільки на зображення і текст, а абсолютно на будь-які файли. Наприклад якщо ви хочете розмістити у себе посилання на піратський архів з грою Doom2 що знаходиться в одній директорії з вашою сторінкою то пишіть приблизно так: Doom2 В цьому випадку браузер відкриває вікно з питанням про збереження даного файлу на диску користувача.
1.7. Фрейми Подібно таблицям
фрейми ділять екран браузера на частини. Відмінність полягає в тому, що сторінка містить фрейми, взагалі не є сторінкою, оскільки не має тіла тобто тега BODY. В ній повинні розташовуються теги FRAMESET які створюють розмітку для завантаження на екран одночасно декількох WEB-сторінок. Ліва частина цього підручника що містить зміст є фреймом в який постійно завантажена самостійна сторінка -contents.htm Правий фрейм завантажується різними документами залежно від викликаного гіперпосилання. Розглянемо приклад фреймового документа:
Main_document
Схема фреймового документа 1фрейм 2фрейм
3фрейм Перший тег
ділить вікно браузера на дві колонки розмір першої з них 300 пікселів, розмір другий (*) - все місце, що залишилося. Тег
містить посилання на документ який завантажуватиметься в перший фрейм і одночасно привласнює самому фрейму ім'я, по якому надалі можна буде завантажувати в нього інші сторінки, даючи на них гіперпосилання з параметром target="frame_a" Наприклад щоб дати посилання з frame_a на документи які повинні мінятися в frame_b потрібно розташувати в frame_a сторінку містить приблизно наступне:
Документ ЕЕЕ Документ UUU Тег
ділить другу колонку на дві подовжні смуги по 50% кожна. Якщо при складанні обох значень результат нерівний 100%, то браузер сам розрахує розміри фреймів пропорційно заданим значенням.
Наступні два тега задають імена і URL для кожної з одержаних смуг по черзі. frameset вимагає закриваючого тега на відміну від frame. Якщо в теге frameset одночасно використовуються обидва параметри cols і rows то створюється проста фреймова сітка :
Схема фреймовой сетки: 1фрейм 2фрейм 3фрейм
4фрейм 5фрейм 6фрейм

2. Постановка задачі Використовуючи навички та знання з курсу «Веб дизайн», розробити та реалізувати сайт на вільну тему. Сайт повинен містити не менше десяти сторінок, які включають в себе використання фреймів, таблиць та основних тегів форматування шрифту.
3. Карта сайту Головна сторінка Історія компанії Subaru Тест-драйв
- Сімейний автомобіль. Тест-драйв Subaru Legacy Wagon 3.0R
- Новий курс. Тест-драйв Subaru B9 Tribeca
- Майже спорткар. Тест-драйв Subaru Outback Основні моделі
- Subaru Forester
- Subaru Impreza
- Subaru Legacy
- Subaru Outback
- Subaru Tribeca Інші моделі
- Subaru Baja
- Subaru G3X Justy
- Subaru R1
- Subaru Traviq
4.Побудова і реалізація сайту Головна сторінка index.html має такий вигляд.
Для опису сторінок, таких як: Тест драйв, Основні моделі та Інші моделі я використовував iFRAME. Ресурси iFRAME знаходяться в корневому каталозі ../iFRAME/.
Приклад сторінки з iFRAME.
Ресурс iFRAME тест драйву Subaru Legacy
Підменю основного меню сторінки виглядає так.
Висновок При виконані даної курсової роботи, я освоїв і закріпив практичні навички створення ї проектування веб сторінки.
Завдяки HTML мові, я запрограмував і створювати веб сторінку, яка містить сімнадцять сторінок, які включають в себе використання фреймів, таблиць та основних тегів форматування шрифту. Інформація для сторінки взята з різних сайтів, присвячених автомобільному концерну Subaru. На сайті ви можете знайти багато цікавої інформації, щодо цієї марки.
Список використаної літератури
http://netagent.chat.ru/html - “Первые шаги. Учебник по HTML” http://netagent.chat.ru/html - “Практическое руководство по HTML” Дмитрий Козловский.
“Быстро и легко создаем Web-сайт” http://subaruwrc.info http://impreza-wrx-style.com/ http://www.drive.ru/ http://www.info-subaru.ru
Додаток А
HTML-код головної сторінки index.html
Subaru
Главная страница
История Subaru
Тест драйв
Основные модели
Другие модели
Автомобили Subaru
   Добро пожаловать на сайт, посвящённый автомобилям Subaru. На сайте вы сможете
найти историю крупного промышленного концерна Fuji Heavy Industries Ltd. Да,
именно этого концерна, потому как Subaru является зарегестрированной
автомобильной маркой этого концерна.
   Также на сайте собрано несколько Тест-драйвов автомобилей Subaru. По моему мнению, чтобы узнать автомобиль лучше и получить о нём наиболее точные данные необходимо проверить
его самому. И узнать насколько соответствуют действительности те данные, которые указаны в паспорте автомобиля Subaru. Если у вас просто нет на это времени, то вы можете
просто прочитать результаты проводимых тест-драйвов и сделать соответствующие выводы для себя.
   Также на сайте вы найдёте описание большинства моделей Subaru. Вы сможете прочитать интересные статьи, которые помогут вам узнать об автомобилях Subaru много интерестных
фактов. Также вы сможете посмотреть их фотографии.
Курсовая работа
HTML-код сторінки історії компанії Subaru
history.html
Subaru
Главная страница
История Subaru
Тест драйв
Основные модели
Другие модели
История Subaru
   Subaru – это автомобильная торговая марка крупного промышленного концерна Fuji Heavy Industries Ltd. Автомобили – далеко не единственная сфера деятельности FHI; кроме них, FHI занимается авиационной техникой, железнодорожным транспортом, (текст історії.). Отличительными чертами Subaru можно уверенно назвать такие фирменные разработки, применяющиеся теперь во всем мире, как полный привод (который до сих пор остается торговой маркой Subaru), оппозитные двигатели и монококовая конструкция кузова. Ну и, конечно же, высокое качество и незаурядность автомобилей, демонстрирующих отличные характеристики как в повседневном использовании, так и в автоспорте.
Курсовая работа
HTML-код сторінки тест драйву Subaru Legacy
з використанням iFrame test.html
Subaru
Главная страница
История Subaru
Тест драйв
Legacy
Outback
Tribeca B9
Основные модели
Другие модели
Курсовая работа
HTML-код iFrame-сторінки тест драйву Subaru Legacy
Legacy.html
Subaru
Антисемейные ценности - Тест-Драйв Subaru Legacy Wagon 3.0R
   И это семейный автомобиль?
(текст тест драйву)    Только Если решите покатать семью на трехлитровой Legacy, запаситесь гигиеническими пакетиками – им самое место в сеточках на спинках передних сидений.
   Все же этот автомобиль исповедует явно не семейные ценности.
Файл, котрий служить для опису стилів style.css body {margin:0px; padding:0px;}
.bg
{
background: url(images/body.gif) repeat-x FFFFFF
}
body
{
font-size: 12px; font-family: Verdana; text-align:justify;
scrollbar-face-color: FFFFFF;
scrollbar-highlight-color: 99CCFF;
scrollbar-shadow-color: 99CCFF;
scrollbar-3dlight-color: FFFFFF;
scrollbar-arrow-color:
99CCFF;
scrollbar-track-color: FFFFFF;
scrollbar-darkshadow-color: FFFFFF;
} .text
{
font-size: 12px;
color: 585F4D;
text-decoration: none;
text-align:justify;
padding: 10px 20px 20px 20px;
}
.title {
font-weight: bold;
font-size: 12px;
color: 585F4D;
}
.copyright
{
font-size: 10px;
padding: 0px 0px 0px 20px;
}
img
Антиботан аватар за замовчуванням

01.01.1970 03:01

Коментарі

Ви не можете залишити коментар. Для цього, будь ласка, увійдіть або зареєструйтесь.

Оголошення від адміністратора

Антиботан аватар за замовчуванням

пропонує роботу

Admin

26.02.2019 12:38

Привіт усім учасникам нашого порталу! Хороші новини - з‘явилась можливість кожному заробити на своїх знаннях та вміннях. Тепер Ви можете продавати свої роботи на сайті заробляючи кошти, рейтинг і довіру користувачів. Потрібно завантажити роботу, вказати ціну і додати один інформативний скріншот з деякими частинами виконаних завдань. Навіть одна якісна і всім необхідна робота може продатися сотні разів. «Головою заробляти» продуктивніше ніж руками! :-)

Завантаження файлу

Якщо Ви маєте на своєму комп'ютері файли, пов'язані з навчанням( розрахункові, лабораторні, практичні, контрольні роботи та інше...), і Вам не шкода ними поділитись - то скористайтесь формою для завантаження файлу, попередньо заархівувавши все в архів .rar або .zip розміром до 100мб, і до нього невдовзі отримають доступ студенти всієї України! Ви отримаєте грошову винагороду в кінці місяця, якщо станете одним з трьох переможців!
Стань активним учасником руху antibotan!
Поділись актуальною інформацією,
і отримай привілеї у користуванні архівом! Детальніше

Новини