Приклад створення маленького сайту за допомогою візуального редактора і генератора метатегов в Narod

1. Реєстрація хостингу та домену
2. Створення шаблону головної сторінки сайту
3. Генерування метатегов головної сторінки сайту
4. Створення основної частини головної сторінки сайту
5. Копіювання файлів на хостинг
6. Копіювання файлів через FTP
7. Графічні файли на сайті
8. Створення файлів інших веб-сторінок сайту

Увага!!! Це архівна версія навчального прикладу створення сайту. У зв'язку з тим, що хостинг narod.ru припинив своє існування, Ви вже не зможете створити свій простий сайт за сценарієм, описаним на цій сторінці. Весь цей навчальний приклад з цієї сторінки був на ось цій сторінці перероблений і перероблений для прикладу створення простого сайту на прикладі безкоштовного хостингу hostinger.ru , Базовий функціонал якого практично збігається з функціоналом колишнього хостингу narod.ru. Плюс до цього немає реклами і є підтримка PHP і MySQL.

.................................................. ............................................

Це навчальний приклад того, як можна створити сайт за допомогою візуального редактора веб-сторінок і генератора метатегов. Цей приклад покаже Вам всю послідовність дій, яку Вам необхідно зробити для створення свого простого сайту, від самого початку до етапу функціонування готового сайту. Весь цей матеріал розрахований на тих, хто ще жодного разу не робив свій сайт або робив свій сайт, але не як веб-майстер, а тільки за допомогою конструктора сайтів на таких хостингах, як юкоз. Тому знання мови розмітки HTML від Вас не потрібно. Мінімально необхідні знання HTML даються тут по ходу викладу.

Як приклад розглянемо, як робиться найпростіший короткий сайт з трьох сторінок. Простіших сайтів ніж цей, напевно, вже не буває. Ваше завдання полягає в тому, щоб зрозуміти логіку створення сайту за допомогою таких інструментів, як візуальний редактор і генератор мета-тегів, а потім створити свій складніший сайт. Зрозуміло Вам потрібно буде вивчити інструкції, як треба користуватися візуальним редактором веб-сторінок і генератором мета-тегів.

А ми тут прямо на Ваших очах від початку до кінця зараз виготовимо особистий сайт Васі Пупкіна.

Реєстрація хостингу та домену

Всі сайти в Інтернеті розташовуються на спеціальних серверах - хостингах і мають свої адреси - доменні імена. Сайту Васі Пупкіна теж потрібен в Інтернеті хостинг, де будуть розміщені файли сайту, і потрібен доменну адресу, який будуть набирати користувачі в рядку браузера, щоб зайти на сайт Васі Пупкіна.

У навчальних цілях ми спочатку реєструватимемося на якомусь безкоштовному хостингу, де дають безкоштовний домен третього рівня і де файли сайту можна копіювати зі свого комп'ютера по протоколу FTP. Який саме використовувати безкоштовний хостинг, це нам зараз без різниці. Заходимо на сторінку зі списком безкоштовних хостингів і уважно читаємо їх опису, щоб вибрати підходящий. Виявилося, що найперший в списку хостинг на сайті narod.ru нам підходить. Переходимо туди за посиланням narod.ru.

Цей безкоштовний хостинг на Народе є одним із сервісів Яндекса. Його еквівалентний адреса narod.yandex.ru.

Натискаємо на кнопку "Створіть свій сайт" і потрапляємо на форму входу або реєстрації. Натискаємо на кнопку "Зареєструватися" і потрапляємо на форму першого кроку реєстрації. Насправді, ми тут реєструємо повноцінний акаунт на Яндексі з електронною поштою і іншими можливостями, але ми ними користуватися зараз не збираємося. Ми в акаунті Яндекса будемо тільки створювати свій сайт.

Пишемо тут своє ім'я та прізвище. Можна писати несправжні, але якщо Ваш сайт зламають хакери, то з несправжніми даними відновити акаунт вже не зможете. І там же вибираємо незайнятий логін. Нашому Васі Пупкину дістався логін vasya-pupkin-ok. Все коротші логіни виявилися вже зайняті. (В країні величезна кількість Васею Пупкин, більше ніж Іваном Івановичем і Лобода Ванних.) Цей обраний вільний логін буде входити в адресу нашого майбутнього сайту. Ця електронна адреса, за замовчуванням буде у вигляді домена третього рівня vasya-pupkin-ok.narod2.ru. (Ми потім цю адресу трохи спростимо і зробимо таким vasya-pupkin-ok.narod.ru, без двійки після narod.)

Натискаємо на кнопку "Далі" і переходимо на другий крок

Тут придумуємо пароль і секретне питання для відновлення пароля. Пароль запам'ятовуємо або записуємо в спеціальний блокнотик. Для більшої надійності в відновленні пароля, можете ще вказати свій діючий e-mail і номер мобільного телефону, але, в общем-то, це не обов'язково. Вводимо криві символи з картинки і натискаємо на кнопку "Зареєструвати". Потрапляємо на фінішну сторінку реєстрації.

Звідти можна перейти на сторінку створення сайту за посиланням "Почати користуватися сервісом Народ".

Нам пропонують створювати сайт в конструкторі сайтів. Але ми хочемо створити сайт, як справжні веб-майстри, без конструктора. Це дозволить нам в майбутньому переносити наш сайт на будь-який інший хостинг з будь-яким функціоналом. Якщо на narod.ru створити сайт через їх конструктор, то наш сайт назавжди залишиться прив'язаним до їх конструктору і в майбутньому його буде неможливо перенести на інший хостинг з більш широкими можливостями. Тому ми зараз тут не будемо продовжувати створювати свій сайт в їх конструкторі. Замість цього ми створимо у себе в комп'ютері самі файли нашого сайту і потім скопіюємо їх на хостинг в обхід їх конструктора. Тому поки виходимо з створеного нами аккаунта на сайті narod.ru, натиснувши на кнопку "Вихід".

Створення шаблону головної сторінки сайту

Заводимо у себе в комп'ютері папку для файлів нашого сайту. Назвемо цю папку якимось ім'ям, неважливо яким, наприклад, site_vasya. Там створюємо головний файл сайту. Головний файл будь-якого сайту повинен завжди мати ім'я index і деяке розширення зі спеціального набору певних дозволених розширень. Ми візьмемо з цього списку розширень розширення html. Тобто наш головний файл буде мати ім'я index.html. Розширення html говорить про те, що в даному файлі містяться тільки коди мови розмітки HTML і не містяться програми на таких мовах програмування, як, наприклад, PHP і подібні.

Тепер цей файл потрібно наповнити вмістом. Для цього відкриваємо його Блокнотом і тримаємо відкритим. А самі йдемо на станицю Інструментів створення web-сторінки . Там опускаємося в самий кінець цієї сторінки і знаходимо в розділі номер 3 шаблон веб-сторінки. Виділяємо весь цей шаблон і копіюємо його в наш файл index.html.

У файлі index.html між тегами <title> і </ title>, де стоїть фраза "Тут напишіть заголовок Вашої web-сторінки", пишемо назву цієї web-сторінки, наприклад, "Особиста сторінка Васі Пупкіна".

Генерування метатегов головної сторінки сайту

Тепер залишилося тільки вставити мета-теги після тега <head> і основний зміст web-станиці між тегами <body> і </ body>. Почнемо з мета-тегів. На сторінці Інструментів створення web-сторінки переміщаємося в розділ номер 2 в генератор метатегов. Створюємо перші 5 мета-тегів, вводячи інформацію в форму.

Тиснемо на кнопку "Створити Метатеги" і копіюємо отримані метатеги в файл index.html між тегами <head> і </ head> замість фрази "Тут вставте мета-теги, отримані в генераторі мета-тегів".

Створення основної частини головної сторінки сайту

Тепер в Інструментах переміщаємося в розділ 1, де знаходиться редактор web-сторінки. Там спочатку стираємо весь початковий текст, щоб вікно редактора було чистим. Потім створюємо просту сторінку зі списком з двох посилань на дві інші сторінки майбутнього сайту.

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

• http://vasya-pupkin-ok.narod.ru/hobbi.html
• http://vasya-pupkin-ok.narod.ru/murka.html

Про хобі Васі Пупкіна буде розказано на сторінці hobbi.html, а про його кішку Мурку буде розказано на сторінці murka.html.

Справа в тому, що кожна сторінка сайту повинна знаходитися в своєму файлі. Якщо у нашого сайту має бути три сторінки, то значить нам потрібно створити для них три файли: index, hobbi.html і murka.html. Різні сторінки одного сайту пов'язані один з одним гіперпосиланнями. Значить в адресах цих посилань повинні бути вказані відповідні назви файлів інших сторінок.

Тепер натискаємо на кнопку "Code" внизу редактора і копіюємо отриманий код в наш файл index.html між тегами <body> і </ body> замість фрази "Сюди вставте код, створений в редакторі web-сторінки".

Остаточно зберігаємо файл index.html в наступному вигляді.

Отже, ми повністю створили файл головної сторінки нашого сайту. Тепер можна або приступити до створення двох інших файлів hobbi.html і murka.html нашого сайту і потім копії всіх трьох створених файлів закинути на хостинг або можна вже зараз закинути готовий файл index.html на хостинг, а два додаткових файлу створити потім.

Копіювання файлів на хостинг

Ми вибираємо другий варіант і знову заходимо на сайт narod.ru. У правому верхньому куті сайту narod.ru знаходимо кнопку "Увійти" і натискаємо на неї. Вводимо логін і пароль, після чого потрапляємо в свій аккаунт на Народе. Натискаємо на кнопку "Створити свій сайт".

Ми потрапляємо в сервіс створення сайту через конструктор сайтів. Але ми з самого початку вирішили, що створювати сайт будемо НЕ через конструктор, а як справжні професійні веб-майстри, самостійно створюючи свої файли сайту і копіюючи їх зі свого комп'ютера на хостинг. На жаль, сервіс Народу зараз намагається розкрутити свій сайт на, тому в першу чергу ми потрапляємо в їх конструктор, а не в сервіс FTP, де є можливість відразу копіювати файли свого сайту на хостинг. Наше завдання полягає в тому, щоб швиденько створити в їх конструкторі будь-яку головну сторінку сайту index.html, а потім замінити її на нашу. Розумію, що це трохи нагадує метод вирізування гланд через дупу, але нічого не поробиш. Такий вже цей хостинг на Народе. Повірте мені, що це не найгірший з хостингів для початківців веб-майстрів. А в минулі часи це був безкоштовний хостинг номер 1 в Росії.

Отже, в гості сайту на першому кроці виберете будь-яку специфіку сайту, яку хочете. Це не важливо, тому що все одно ми затерём створюваний тут файл index.html нашим файлом. Тиснемо кнопку "Далі".

На другому кроці конструктора прибираємо галочки створення інших сторінок сайту, крім головної і тиснемо на кнопку "Далі".

На третьому етапі відразу тиснемо на кнопку "Почати заповнювати". Ми потрапляємо в робоче місце конструктора, де нас цікавить пункт меню "Управління файлами"

На сторінці управління файлами Ви побачите, що у Вас на сайті створений файл robots.txt. Його не чіпайте. Це службовий файл, призначений для більш професійної роботи з заборонами пошуковим системам індексувати частини сайту. Зараз там дозволено пошуковикам індексувати весь сайт. Тому залишаємо його як є.

А ось файл index.html Ви не бачите в списку файлів сайту, але він вже є на сайті, тільки незаповнений. Ми натискаємо на кнопку "Завантажити файл" і з'являється форма для завантаження файлу з комп'ютера.

Ось тут, через кнопку "Огляд" виберемо з нашого комп'ютера наш створений файл index.html і завантажимо його на хостинг. Якщо через кілька секунд після цього зайти на сайт vasya-pupkin-ok.narod2.ru, то ми побачимо там нашу створену сторінку.

Копіювання файлів через FTP

Але нам ще залишилося "позбутися" від конструктора сайту. Для цього нам потрібно зробити так, щоб адреса нашого сайту був не «інкубаторскіе" з narod2.ru, де знаходяться сайти, створені через конструктор, а c narod.ru, де знаходяться сайти справжніх веб-майстрів. Для цього в меню вибираємо пункт "зробити сайт основним".

Якщо Ви не бачите цього пункту меню, то зайдіть спочатку в пункт "статистика" і шукайте пункт "зробити сайт основним" з статистики. Після вибору "зробити сайт основним" з'явиться наступне вікно.

Натискаємо на кнопку "Так". Тепер через деякий час, можливо через кілька годин, ми зможемо побачити першу сторінку нашого сайту за адресою vasya-pupkin-ok.narod.ru.

Який сенс того, що тепер наш сайт можна виявити не тільки за адресою vasya-pupkin-ok.narod2.ru, а й за адресою vasya-pupkin-ok.narod.ru?

Сенс в тому, що тепер можна не заходити в свій аккаунт на сайті narod.ru, а закидати файли нашого сайту на хостинг через протокол FTP. Для власників сайтів на narod2.ru такої можливості немає. Адже вони ж уміють створювати свої сайти тільки через конструктор. Тому їм ніяке FTP не положено. А професійні веб-майстри закидають файли свого сайту на хостинг по протоколу FTP через програми FTP-client.

В принципі, Ви можете продовжувати закидати файли свого сайту також, як описано на цій сторінці через конструктор, вибираючи в меню конструктора пункт "Управління файлами" і потім пункт "Завантажити файл". А можете познайомитися тут з безкоштовною програмою FTP-клієнтом FileZilla Client , Встановити у себе цю програму і використовувати її для обміну файлами з Вашим хостингом. У цій програмі в якості хостингу треба вказувати для нашого сайту не хостинг "ftp.narod.ru", як для старих сайтів на Народе, а хостинг "vasya-pupkin-ok.ftp.narod.ru" і ім'я користувача "vasya-pupkin -ok ". Це ось тепер така особливість на Народе для нових сайтів, які з'являються спочатку через конструктор. Майте це на увазі, коли будете створювати свій власний сайт на Народе.

Графічні файли на сайті

Ми ж зараз не будемо відволікатися на вивчення FTP і його можливостей. Ми закинемо на наш хостинг два файли з картинками. (Або чекаємо активації нашого сайту на narod.ru і кидаємо файли на хостинг через FTP або не чекаючи активації сайту на narod.ru завантажуємо файли через акаунт конструктора сайтів.) Ці картинки ми будемо використовувати, коли будемо створювати дві що залишилися сторінки в редакторі web- сторінок. Справа в тому, що якщо картинки ще не знаходяться в Інтернеті по якомусь адресою, то візуальний редактор web-сторінок не зможе правильно показати нам, як буде насправді виглядати створювана сторінка.

Графічні файли не інтегруються в файли web-сторінок і не склеюються з ними. Графічні файли на хостингу існують окремо від файлів сторінок. На файлах сторінок знаходяться тільки посилання на графічні файли. Браузер сам розуміє, що якщо в файлі веб-сторінки є таке посилання на графічний файл, то треба завантажити потрібний графічний файл і вставити його на екрані монітора в те саме місце, де знаходиться посилання на даний графічний файл.

Це зручно тим, що один і той же графічний файл може бути використаний неодноразово. Його можна вивести на різних веб-сторінках сайту і навіть кілька разів на одній і тій же web-сторінці. Ми завантажимо файл з фотографією кішки Мурки murka.jpg і файл з астрономічної тематикою stars.jpg.

Будемо вважати, що астрономічна тематика є хобі нашого Васі Пупкіна. (В Інтернеті можна дізнатися, що у Васі Пупкіна тисяча різних хобі. І коли тільки він все встигає ...) Файли murka.jpg і stars.jpg заносимо спочатку в папку site_vasya, де вже знаходиться наш головний файл index.html, щоб все файли сайту були в комп'ютері зібрані в одному місці. Звідти копіюємо їх на хостинг.

Створення файлів інших веб-сторінок сайту

У цій же папці створюємо порожні файли hobbi.html і murka.html. Ви пам'ятаєте, що на файли з такими іменами у нас стоять посилання з головної сторінки сайту. Йдемо знову на сторінку Інструментів створення сторінок сайту і знову в розділі 3 копіюємо шаблон web-сторінки в ці два нових файлу.

Ну і далі все робимо так само, як створювали головний файл index.html. Між тегами <title> і </ title> вставляємо фразу "Хобі Васі Пупкіна" в файлі hobbi.html і фразу "Улюблена кішка Васі Пупкіна" в файлі murka.html.

Далі створюємо мета-теги для файлу hobbi.html:
<meta http-equiv = "content-type" content = "text / html; charset = windows-1251">
<meta name = "title" content = "Захоплення Васі Пупкіна">
<meta name = "author" content = "Вася">
<meta name = "description" content = "Астрономічні захоплення Васі Пупкіна">
<meta name = "keywords" content = "Вася, Пупкін, астрономія">

І для файлу murka.html:
<meta http-equiv = "content-type" content = "text / html; charset = windows-1251">
<meta name = "title" content = "Кішка Васі Пупкіна">
<meta name = "description" content = "Чому кішка Мурка є улюбленою кішкою Васі Пупкіна">

Нарешті, створюємо самі сторінки.

...

Зверніть увагу, що при візуальному редагуванні цих сторінок ми правильно бачимо, яке місце на наших сторінках займає таблиця. (В файлі hobbi.html теж застосовується таблиця для форматування розташування фотографій і тексту на сторінці, але з невидимими краями осередків.) Це завдяки тому, що ми вже скопіювали фотографії murka.jpg і stars.jpg на хостинг і коли в візуальному редакторі вказували адреси цих картинок, то правильно вказали:

• http://vasya-pupkin-ok.narod.ru/stars.jpg
• http://vasya-pupkin-ok.narod.ru/murka.jpg

Якби ми заздалегідь не скопіювали ці фотографії на хостинг або якби ми неправильно вказали їх адреси в Інтернеті, коли вставляли фотографії на веб-сторінки, то ми б не побачили ці фотографії в візуальному редакторі веб-сторінок. І тому відповідні осередки таблиць мали б неправильні розміри, таблиця була б спотворена. І ми б неправильно бачили, де і що у нас розташоване на сторінці.

В кінці цих сторінок є посилання на головну сторінку з текстом "Повернутися на головну". Зверніть увагу, що посилання на головну сторінку можна зробити двома способами:

• "http://vasya-pupkin-ok.narod.ru/index.html", як у файлі hobbi.html
• "http://vasya-pupkin-ok.narod.ru/", як у файлі murka.html

Тобто ім'я головного файлу index.html можна не вказувати після імені сайту.

Ось так остаточно виглядають наші файли hobbi.html і murka.html, відповідно.

...

Копіюємо ЦІ два файли на хостинг и перевіряємо, чи правильно Працюють всі ПОСИЛАННЯ. Ви можете зайти на сайт vasya-pupkin-ok.narod.ru и переконатіся, что всі ПОСИЛАННЯ Працюють правильно. Кроме того, віявляється, копія цього сайту находится на сайті vasya-pupkin-ok.narod2.ru. (Тільки все посилання на наших web-сторінках ведуть на сайт vasya-pupkin-ok.narod.ru, тому при переході по будь-якому посиланню Ви перейдете з сайту vasya-pupkin-ok.narod2.ru на сайт vasya-pupkin-ok.narod .ru.)

...

Усе! Вітаю! Ви тільки що разом зі мною створили маленький сайт.

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

Удачі вам!

...

------------------

Автор статті: Євген Миронов.

[0] Створення сторінок простого сайту
[1] Інструкція по застосуванню візуального редактора сторінок сайту
[2] Інструкція по застосуванню генератора мета-тегів
[3] Навчальний приклад створення сайту
[3a] Попередня версія прикладу створення сайту (для хостингу Народ)
[4] Навчальний приклад створення інтернет-магазину
[R] Безкоштовні HTML-редактори