Як створити сайт
Сайти бувають разні. Найпростіший варіант – це сайт-візитка. З нього ми й почнемо.
Сайт-візитівка - це невеликий сайт, який зазвичай складається з однієї або декількох веб-сторінок, і містить основну інформацію про організацію, приватну особу, про товари або послуги. Зазвичай містить контактні дані, короткий опис товарів, прайс-листи та інше. Сайт-візитка (далі просто сайт) може нести як статичну інформацію так і динамічну (що змінюється). На його сторінках крім текстової інформації можна розмістити графіку (фото, картинки) анімацію у вигляді flash-роликів, інші надмірності.
Збираємо матеріали
Спочатку визначтеся з темою сайту та наявністю у Вас достатньої інформації. Підберіть тексти за темою (краще написати самому або хоча б змінити чужі), фото, картинки.
Тексти спочатку набираємо у будь-якому редакторі, не застосовуючи до нього стилів (виділення, нахил, колір). Далі будемо додавати матеріали у міру їх надходження).
Створюємо папку спеціально для файлів свого сайту. Її можна назвати, наприклад, "site"(назва може бути іншою, але бажано в латиниці та коротка).
Створюємо просту html-сторінку
Сторінки сайту можуть бути створені в будь-якому текстовому редакторі за допомогою мови розмітки документа HTML. Відкриємо блокнот notepad та напишемо:
<html>Це мій перший сайт. </html>
У тексті нашої першої html-сторінки у кутових дужках укладено ярлик (або тег) мови HTML. Це тег <html> і він вказує на те, що в даному файлі використовується мова HTML. Тобто все, що розташоване між тегами <html> та </html> - написано мовою HTML. Більшість сучасних броузерів можуть впізнати документ, який не містить тегів <html> та </html>, але все ж таки їх вживання вкрай бажане.
Зараз запам'ятаємо файл під ім'ям index.html у новій папці, яку ви створили.
Відкриємо файл index.html за допомогою броузера (наприклад Microsoft Edge або Google Chrome).
Ми побачимо таку картинку:
Мал. 1. Наша перша сторинка.
У HTML існує багато інших ярликів (тегів). У ярликах можна використовувати
як малі, так і великі літери.
Теги бувають відкривають і закривають (з косою межею "/"). Наприклад, тег </html> - закриває.
Для деяких тегів наявність парного тега не обов'язково.
Як правило, у html-сторінках використовується кілька обов'язкових тегів. Серед них ярлик <head> (і закриває </head>) для опису заголовка html-сторінки. Тут можна вказати назву сторінки. Назва має бути розміщена між тегами <title> та </title>. Наприклад:
<title>Особиста сторінка дизайнера Ніколаєнко</title>
У стандартних броузерах заголовок буде показаний у верхній частині головної рамки основного вікна, як на Мал. 1.
Оскільки тег <title> розташовується на початку html-файла, то при завантаженні сторінки
в першу чергу завантажується саме заголовок документа.
Далі броузер завантажує основний зміст сторінки, що може тривати деякий час. Таким чином, якийсь час назва сторінки буде єдиною інформацією про неї, видимою відвідувачу сайту.
Після заголовка ми використовуємо іншу пару тегів: <body> та </body>, між якими розташовується основний текст документа. Таким чином, html-код сторінки виглядає зараз так:
<html>
<head>
<title>Особиста сторінка дизайнера Ніколаенко</title>
</head>
<body>
Це мій перший веб-сайт.
</body>
</html>
Форматування тексту
Для прикладу ми скопіювали перший-ліпший текст на порталі новин і вставили цей текст у наш файл після тегів <body>. У вікні броузера бачимо суцільний неформатований текст.
Малий. 2 - Неформатований текст.
Текст набагато краще виглядає, якщо він розбитий на абзаци. У html-документах для цього існує тег <p> (і парний до нього </p>).
Тег <p> може задаватися з параметром горизонтального вирівнювання align, який може мати такі значення:
left - вирівнювання по лівій межі вікна броузера.
center - вирівнювання по центру вікна броузера.
right - вирівнювання по правій межі вікна броузера.
justify - вирівнювання по ширині (розтягування з обох боків вікна броузера).
Якщо параметр align не вказано, текст вирівнюється ліворуч.
Ще для форматування тексту найчастіше застосовують парні теги:
<b> та </b> - Відображає текст напівжирним шрифтом.
<strong> та </strong> - використовується виділення важливих фрагментів (н.п. заголовків)
тексту. Броузери зазвичай відображають текст між тегами напівжирним шрифтом.
...
Після форматування тексту наша сторінка буде виглядати так:
Малий. 3 - Форматований текст.
В текст можна вставити картинку(и). Відберіть картинки або фотографії, які плануєте
викласти на свій сайт, зменшіть їх до бажаного розміру в будь-якому графічному редакторі і помістіть зменшені картинки в папку site (можна навіть створити для картинок сайту img або image).
Для того, щоб вставити в текст зображення, існує тег <img>.
На сторінці з текстом вставте там, де хочете, щоб була картинка наступного рядка:
<img src="картинка1.jpg">
Мал. 4 - Картинка в тексті.
Якщо ви хочете, щоб картинка знаходилася праворуч або ліворуч від тексту, то для цього
тег <img> існує параметр <align> з такими значеннями:
left - зображення притискається до лівого поля вікна, текст обтікає зображення з правого боку
right - зображення притискається до правого поля вікна, текст обтікає зображення ліворуч
Якщо ви плануєте розмістити багато фотографій (наприклад, фото з відпустки або приклади своїх робіт) пропонуємо зробити це за допомогою готових програм. Як це зробити описано тут...
Звязок між сторінками
У попередньому абзаці в тексті зустрічалося посилання (лінк) на інший сайт. Для цього використовується парний тег <a> та </a>.
На приклад, так: <a href="http://ho.com.ua/photo/">здесь...</a>
Активне посилання в тексті виділяється іншим кольором та часто підкресленням.
За допомогою тега <a> можна також посилатися не тільки на інші сайти, а й на сторінки свого сайту.
Наприклад, створимо другу сторінку та назвемо її photo.html. Створювати нові
сторінки можна просто копіювати вже існуючий файл, але з іншим ім'ям.
Головне – акуратно змінити не лише текст нової сторінки, а й її заголовок
(укладений між тегами <head> та </head>).
Розмістимо на новій сторінці якісь картинки. Це можна зробити вручну або за допомогою програм,
описаних тут А на першій (головній) сторінці поставимо посилання на другу сторінку, для цього додамо такий рядок: Ось що вийде: Тут варто зазначити, що на сайті тільки одна сторінка може називатися index.html - головна. Коли відвідувач прийде на ваш сайт, вона завантажиться першою. Якщо ви, наприклад, створили фотогалерею за допомогою якоїсь програми, то
потрібно перевірити назви сторінок та у разі потреби перейменувати їх. Важливо: змінюючи імена html-файлів, потрібно міняти та посилання на них в інших сторінках. Тепер, коли роботу над сторінками майбутнього сайту закінчено, і всі файли лежать у папці site, можна викласти їх в Інтернет. І тому потрібно підшукати для свого сайту місце, тобто. хостинг (від англ. hosting – розміщення web-сайту
клієнта на сервері Інтернет-провайдера). Докладніше про хостинг для початківців Розумно розмістити свій сайт-візитку на безкоштовному хостингу ho.ua, для цього потрібно зареєструватися. Як це зробити, можна прочитати в нашому FAQ-і (від англ. відповіді на питання, що часто ставляться): Після того, як ваш обліковий запис на хостингу буде активовано, можна заливати файли на сервер, використовуючи ftp-з'єднання. Зробити це найпростіше за допомогою броузера, н.п. Internet Explorer'а. Введіть в адресному рядку броузера одну з наступних адрес: ftp://LOGIN@sN.ho.ua, Після цього у браузері з'явиться вікно, яке запросить пароль
до FTP - введіть його і ви отримаєте доступ до вашої домашньої директорії на сервері. Копиювати файли свого сайта потрібно в папку htdocs. Але перед цим рекомендуємо
прочитати разділ FAQ "Редактування та налаштування сайту".
Мал. 5. Посилання у тексті.
Як викласти свій сайт в Інтернет
Замовлення хостингу (заповнення форми заявки) - допомога користувачеві.
Як швидко можна приступати до роботи після замовлення хостингу?
де LOGIN – ваш логін, а sN.ho.ua (s1.ho.ua, s2.ho.ua тощо) – ім'я сервера хостингу, на якому розташований ваш сайт. 
Мал. 6. Доступ по ftp за допомогою броузера.