Багато хто думає, що створити власний веб-сайт – справа нехитра і вимагає серйозної підготовки і використання складних інструментів. Насправді ж для початку достатньо мінімуму знань і самої базової програми Windows “Блокнот”. Дотримуючись простий інструкції, як створити сайт в “Блокноті”, можна за пару годин зробити першу повноцінну сторінку.
Переваги “Блокнота”
Професійні веб-розроблювачі, досвідчені розробники сайтів дуже рідко користуються “Блокнотом” в процесі роботи, однак є дві категорії користувачів, для яких ця програма є відмінним вибором:
- початківці верстальники;
- люди, мало знайомі з процесом створення веб-сторінок, які не бажають освоювати складні редактори для написання простого сайту-візитки.
Багато професіоналів знайомилися з версткою і HTML, розбираючись, як створити сайт за допомогою “Блокнота”. Це дозволило їм надійно і швидко закріпити всі отримані знання. “Блокнот” не призначений для роботи з кодом і розміткою, в ньому немає ніяких вбудованих підказок, доповнення та інших фішок, доступних в сучасних програмах, значить, розробник може розраховувати тільки на себе і свою пам’ять.
Текстовий редактор “Блокнот” має скромний мінімалістичний інтерфейс, а значить, не потрібно довго розбиратися в складному функціоналі програми. Це дуже приваблює користувачів, які не планують витрачати час на вивчення інструменту, яким не будуть часто користуватися.
Основи роботи
Покрокова інструкція, як створити HTML-сайт у “Блокноті”, починається з відкриття програми. Найпростіше знайти “Блокнот” через меню Windows “Пуск” в секції “Стандартні”.
Відкрився новий файл необхідно зберегти з розширенням html. Це важливо, так як з цього розширення браузер зрозуміє, що перед ним веб-сторінка. Команда “Зберегти як …” в меню “Файл” відкриє нове вікно. Тут потрібно присвоїти ім’я документа index.html, вибрати кодування UTF-8 і папку для збереження.
Тепер в будь-який момент можна відкрити цей файл, двічі клацнувши на нього або викликавши правою кнопкою миші контекстне меню і виберіть пункт “Відкрити за допомогою Блокнота.
Сторінка вже створена і можна подивитися, як вона виглядає у браузері. Є кілька способів відкрити документ в інтернет-браузері:
- клікнувши по ньому правою кнопкою миші і вибравши в контекстному меню пункт “Відкрити за допомогою Google Chrome” (або іншого браузера);
- просто перетягніть іконку в панелі вкладок відкритого браузера;
- набравши в адресному рядку браузера повний url документа, починаючи з протоколу file://
file:///C:/Users/UserName/Desktop/my-site/index.html
Зараз сторінка передбачувано порожня, пора заповнити її інформацією.
Мова гіпертекстової розмітки
Всі веб-сторінки на просторах Світової павутини написані на особливому мовою HTML (мова гіпертекстової розмітки). Розуміння його основ дуже важливо, щоб розібратися, як створити сайт в “Блокноті” або будь-якому іншому редакторі. За допомогою HTML розробник пояснює браузеру, як повинна виглядати сторінка. Саме тому важливо встановити правильне розширення для файлу.
Основою мови є теги – комбінації символів, укладені в кутові дужки.
Приклади тегів:
Заголовок першого рівня
Текст, виділений курсивом
Текст між відкриваючим і закриваючим тегом буде особливим чином оброблена засобами браузера.
Крім безпосередньо відображаються на сторінці даних при створенні сторінки слід вказувати спеціальну службову інформацію, призначену для самого браузера.
Перші начерки
Почати роботу слід з правильного оформлення html-документа. Базова структура сторінки виглядає наступним чином:
The Best Site in the World
Значення кожного елемента:
- DOCTYPE – технічна інформація для браузера, що вказує, як йому слід сприймати код;
- html – кореневої тег сторінки;
- head – секція службової інформації, не видима відвідувачам сайту;
- meta – службовий тег, атрибут charset визначає кодування тексту;
- title – назва сторінки, яке відображається у вкладці браузера;
- body – тіло документа, безпосередньо відображається на сторінці.
Зберігши код і заново відкривши (або перезавантаживши) файл у браузері, можна побачити перша зміна – на вкладці з’явилася назва сайту.
Тема і структура
Перш ніж розбиратися, як через Блокнот створити свій сайт на HTML, потрібно чітко уявити собі, як цей сайт повинен виглядати. Для прикладу візьмемо персональний блог якогось Джона Доу.
Основні елементи структури цієї сторінки:
- шапка з логотипом і заголовком першого рівня;
- горизонтальна панель навігації;
- основний вміст, представлене трьома статтями, кожна з яких складається з заголовка, короткого опису і посилання на повний текст;
- підвал із зазначенням копірайту.
HTML-код цієї сторінки буде виглядати так:
The Best Site in the World
John Doe
- Автобіографія
- Моє життя, мої досягнення
- Фотоальбом
- Зв’язатися зі мною
- Подяки
Супер-концерт
Варто було відстояти кілометрову чергу за квитками,
щоб насолодитися цим шоу!!
Дивитись детальніше
Чому я люблю морозиво
Хочу поділитися глибинними причинами
моєї любові до морозива…
Дивитись детальніше
Бути чи не бути?
Питання життя і смерті.
Дивитись детальніше
John Doe (c) 2018
Для опису веб-сторінки використано семантичні теги стандарту HTML5: header, main, nav, footer, article.
Пояснення до коду:
- В шапці розміщено зображення, загорнений у посилання. З її допомогою з будь-якого місця сайту користувач зможе повернутися на головну сторінку.
- Саме зображення знаходиться в папці images на одному рівні з файлом index.html. У коді для нього за допомогою атрибуту width строго задана ширина в 100 пікселів.
- Заголовок оформлений як тег h1, що підкреслює його значимість.
- Навігаційне меню представлено ненумерованным списком, а кожен його пункт є посиланням на відповідну сторінку сайту. Зараз цих розділів ще немає, але в майбутньому вони можуть бути створені.
- Для заголовків статей використовується тег h2.
- Посилання “Дивитися” детальніше веде на окрему сторінку з повним текстом статті. Цих сторінок поки що також немає.
- Весь контент обгорнутий в загальний блок з класом wrapper. Атрибути класів зазвичай використовуються для стилізації елементів.
Зараз сторінка виглядає ось так:
Цей вид не дуже схожий на запланований. Щоб виправити ситуацію, потрібно додати оформлення.
Для цього потрібно створити ще один файл, поруч з index.html і назвати його style.css. У ньому розмістяться всі необхідні стилі.
На даний момент структура проекту виглядає так:
Стильове оформлення
Продовжуючи розбиратися, як створити сайт в “Блокноті”, виходимо на новий рівень – підключення аркуші стилів.
Щоб браузер розумів, звідки брати оформлення, необхідно вказати адресу css-файлу. Це службова інформація, її слід розміщувати в секції head.
The Best Site in the World
Тепер все, що буде описано у файлі style.css, браузер застосує до сторінки. Для прикладу змінимо колір фону:
body {
background: #89745d;
}
Повністю вміст файлу стилів буде виглядати так:
body {
padding: 0;
font-family: sans-serif;
font-size: 16px;
background: #89745d;
}
.wrapper {
padding: 20px;
margin-left: auto;
margin-right: auto;
width: 960px;
}
header a {
text-decoration: none;
}
header img {
vertical-align: middle;
margin-right: 20px;
}
header h1 {
display: inline-block;
vertical-align: middle;
color: #f8d9b7;
}
nav {
padding-top: 20px;
padding-bottom: 20px;
}
nav ul {
margin: 0;
text-align: center;
}
nav ul li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
nav ul li a {
color: #f8d9b7;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
article {
padding: 20px;
margin: 0 20px;
background: #f8d9b7;
box-shadow: 0 0 15px #f8d9b7;
}
article h2 {
margin-top: 0px;
margin-bottom: 15px;
color: #d57106;
}
article a {
font-size: 14px;
font-style: italic;
color: #d57106;
}
footer {
padding: 20px;
text-align: right;
color: #f8d9b7;
font-size: 14px;
font-weight: bold;
}
Пояснення до стилів:
- Для елемента body встановлюють базові параметри шрифту: сімейство без зарубок і розмір 16 пікселів.
- Головний контейнер має постійну ширину 960 пікселів і вирівняний по центру.
- Пункти списку меню оголошені терміново-блочними елементами, це дозволяє розмістити їх в один ряд. Для посилань прибрано підкреслення, тепер воно з’являється тільки при наведенні курсору.
- Блок статті має контрастний фон та невелику тінь.
Якщо оновити документ у браузері, можна побачити його кінцеве представлення. Перша веб-сторінка успішно створена!
Однак блог не може складатися тільки з головної сторінки зі списком статей. Необхідно якось відображати окремий пост з повним текстом, крім того, вже заплановані сторінки, зазначені в навігаційному меню.
Найважливішою концепцією інтернету є зв’язування окремих документів за допомогою посилань. Як же в “Блокноті” створити сайт з гіперпосиланнями?
Додаємо сторінки
Насправді все необхідне вже зроблено. Пункти меню і покажчики “Дивитися” детальніше обгорнуті в спеціальний тег a, який і відповідає за формування гіперпосилання. Потрібний адреса вказується в атрибуті href. Залишилося лише створити самі сторінок та розмістити їх поруч з файлом index.html.
Приклад коду для сторінки фотоальбому (gallery.html):
The Best Site in the World
John Doe
- Автобіографія
- Моє життя, мої досягнення
- Фотоальбом
- Зв’язатися зі мною
- Подяки
У лісі
Взимку
На пляжі
На роботі
Новий рік
Автопортрет
John Doe (c) 2018
Основна структура, шапка, навігація і підвал повністю дублюють головну сторінку, змінюється лише секція main, яка тепер містить галерею з кількома блоками figure. Всередині кожного блоку – зображення і підпис до неї.
Для оформлення сторінки використовується той самий файл style.css, підключений усередині секції head. В нього необхідно додати кілька правил для галереї:
.gallery {
font-size: 0;
}
figure {
display: inline-block;
vertical-align: bottom;
width: 33.3333%;
box-sizing: border-box;
padding: 10px 15px;
margin: 0px;
font-size: 14px;
color: #f8d9b7;
text-align: center;
}
figure img {
width: 100%;
margin-bottom: 10px;
}
Тут використовується css-прийом, що дозволяє розмістити блоки по три в ряд і задати їм ширину рівно третину від ширини батьківського контейнера.
Підсумковий вид галереї представлений нижче.
Гіперпосилання забезпечують переміщення між сторінками сайту: меню можна потрапити в “Фотоальбом”, а клікнувши на логотип – переміститися назад на головну.
Розміщення сайту в Інтернеті
Отже, ми розібралися з допомогою покрокової інструкції, як створити сайт в “Блокноті”. Але зараз його ніхто не бачить! А адже особисті блоги створюються для того, щоб ділитися своєю життям з усім світом.
Щоб виправити ситуацію, необхідно розмістити всі створені файли на хостингу і підібрати домен для сайту з допомогою спеціального сервісу. Існує величезна кількість хостинг-провайдерів, що надають послуги на будь-який смак і гаманець.
Після укладення договору з хостером, з’явиться доступ до панелі керування, де ви зможете перенести всі створені файли. На даний момент структура проекту така:
Сюди слід також додати HTML-файли для решти сторінок сайту.
Редактори коду
Тепер ви знаєте, як створити html-сайт у “Блокноті”, однак існують і більш зручні способи. Професіонали використовують спеціальні редактори, призначені для роботи з кодом. Вони пропонують безліч зручних опцій, що полегшують створення та редагування сайтів.
Найпопулярніші інструменти – Visual Studio Code, Sublime Text, Notepad++. Не слід боятися їх складності. Знаючи, як створити сайт за допомогою “Блокнота”, ви легко розберетеся, що до чого. Весь додатковий функціонал цих редакторів призначений для полегшення роботи веб-майстра і не повинен заважати йому у процесі.
Створення сайту через “Блокнот” – лише початок довгого цікавого шляху веб-розробника.
