Як створити простий HTML сайт в блокноті
HTML-сайти користувалися широкою популярністю в 90-х і 2000-х роках. Просто тому, що особливих альтернатив не було. Їх створення – основа основ, азбука веб-розробника. Зараз їх, в основному, використовують для навчання основам верстки веб-сторінок, вивчення HTML і CSS, що стане в нагоді при роботі взагалі з будь-яким двигуном.
HTML-сайти не обов’язково мають примітивний дизайн. Існує безліч безкоштовних HTML шаблонів , нічим не поступаються за привабливістю тим, що використовуються в конструкторах сайтів або CMS . Але великі проекти на них незручно робити. Багато сторінок – багато мороки, оскільки редагування кожної вимагає копання в коді. У них немає панелі управління, також всі сторінки будуть статичними – ніяких блогів, форумів і т. Д.
HTML-сайти найчастіше мають формат Лендінгів і сайтів-візиток. У цих сценаріях вони себе більш-менш виправдовують – працюють швидко, не вантажать сервер, не вимагають підключення бази даних. Весь контент міститься в самих сторінках. HTML відповідає за верстку, структуру блоків, а за допомогою каскадних таблиць стилів (CSS) цих елементів можна надати необхідний зовнішній вигляд і формат (шрифт, колір, фон, форма, відступи і т д.).
Верстка в HTML буває табличній (table – застарілий стандарт) і блокової (div – саме її зараз використовують). Мова використовує великий набір тегів , майже всі з яких використовуються парою – відкриває і закриває теги (наприклад, <p> </ p> – тег абзацу), всередині яких міститься контент. В CSS використовуються атрибути, властивості і їх значення, що підключаються до окремих елементів HTML-каркаса сторінки. Тобто можна вибірково надавати бажаний вид кожному елементу на сайті окремо.
Ми не ставимо собі за мету навчити вас синтаксису мов – якщо потрібно, то без зусиль зможете знайти сотні уроків і довідників по ним в Мережі. Покажемо основу – як зробити простий сайт на HTML в блокноті, створити своїми руками веб-сторінку за тими ж стандартами, що використовують всі відвідувані вами сайти. На прикладі ви зможете вловити суть процесу, оцінити для себе, чи цікава взагалі ця тема.
Крок 1 – створення сторінки формату HTML
Відкрийте стандартний блокнот для Windows (або будь-який інший текстовий редактор – Notepad ++ , Sublime Text – неважливо), відкрийте меню «Файл», виберіть «Зберегти як», змініть кодування з ANSI на UTF-8 (для правильного відображення російських букв в браузері), впишіть заголовок веб-сторінки і змініть розширення на html (воно йде після крапки), після чого збережіть зміни.
Крок 2 – додаємо розмітку веб-сторінки
Тепер приступаємо до редагування файлу. Насамперед необхідно додати -Веб-розмітку – стандартний шматок коду, що дозволяє браузерам розпізнавати контент, що знаходиться у внутрішніх тегах. Просто скопіюйте та вставте його:
- <! DOCTYPE html PUBLIC “- // W3C // DTD HTML 4.01 Transitional // EN”>
- <Html>
- <Head>
- <Meta http-equiv = “Content-Type” content = “text / html; charset = UTF-8”>
- <Title> Топовий сайт новачка </ title>
- </ Head>
- <Body>
- <H1> Це тег заголовка першого рівня для вмісту сторінки </ h1>
- <P> Перший абзац </ p>
- <P> Другий абзац </ p>
- <P> Третій абзац і т. Д. </ P>
- </ Body>
- </ Html>
Це базові елементи, які є на будь-якому веб-ресурсі. Весь контент сторінки повинен знаходиться між тегами <body> </ body> (це тіло документа), все, що виходить за їх межі вище і нижче, не буде відображатися на сайті.
Крок 3 – працюємо зі стилями CSS
Припустимо, ви додали якийсь текст в параграфи, тепер потрібно надати їм стилістику – вибрати шрифти, фон, відступи, ширину області сторінки і т. Д. Це може виглядати ось так:
- body {
- background: # F2F2F2;
- max-width: 900px;
- margin: 10px auto;
- padding: 30px;
- }
- h1 {
- color: # 4C4C4C;
- padding-bottom: 20px;
- margin-bottom: 20px;
- border-bottom: 2px solid #BEBEBE;
- }
- p {
- font: italic;
- }
У прикладі ви бачите колір фону (background) і значення цього атрибута (# F2F2F2), ширину сторінки (900 пікселів), відступи, колір заголовка, відступи від основного тексту і кордонів сторінки (padding і margin), а також кольорову кордон нижній частині сайту в 2 пікселя (border-bottom). Вся сторінка в зборі з розміткою, контентом і стилями буде виглядати так:
- <! DOCTYPE html PUBLIC “- // W3C // DTD HTML 4.01 Transitional // EN”>
- <Html>
- <Head>
- <Meta http-equiv = “Content-Type” content = “text / html; charset = UTF-8”>
- <Title> Топовий сайт новачка </ title>
- <Style>
- body {
- background: # F2F2F2;
- max-width: 900px;
- margin: 10px auto;
- padding: 30px;
- }
- h1 {
- color: # 4C4C4C;
- padding-bottom: 20px;
- margin-bottom: 20px;
- border-bottom: 2px solid #BEBEBE;
- }
- p {
- font: italic;
- }
- </ Style>
- </ Head>
- <Body>
- <H1> Це тег заголовка першого рівня для вмісту сторінки </ h1>
- <P> Перший абзац </ p>
- <P> Другий абзац </ p>
- <P> Третій абзац і т. Д. </ P>
- </ Body>
- </ Html>
Як бачите, властивості CSS ми додали між тегами <style> </ style>. Після завершення всіх операцій збережіть результат. Тепер, якщо ви спробуєте відкрити отриману сторінку, то вона автоматично запуститься в браузері. Вітаємо, ви створили свій перший простенький сайт в блокноті.
Крок 4 – завантаження сайту на хостинг
Зрозуміло, що сайт з прикладу – не з тих, що публікують в Інтернеті і витрачаються заради цього на платний хостинг. Але, якщо ви за тими ж принципами, вивчивши HTML і CSS, створите дійсно вартий сайт для досягнення якихось цілей, то для його відображення в Мережі будуть потрібні хостинг і домен.
Вибір хостингу – важливе завдання. Сайти на HTML легковагі і не вимагають для своєї роботи якихось Суперский потужностей, але, тим не менш, ми рекомендуємо використовувати якісний хостинг, такий як Bluehost . Це один з найбільш надійних і популярних зарубіжних провайдерів з величезною базою клієнтів (обслуговує понад 2 млн доменів), вражаючою кількістю серверів по всьому світу (близько 120) і хорошими умовами. Коштує він $ 2.95 / місяць, плюс ще домен дають на перший рік в подарунок, безкоштовний SSL і інші цікаві плюшки.
Швидкість роботи сайтів Bluehost в Рунеті висока, оскільки сервери знаходяться в хмарі, використовується CDN-технологія. Провайдер абузоустойчівий – це означає, що ваш сайт не відключать ні за яких обставин – можете не боятися скарг конкурентів і іншого. Все буде працювати надійно. Техпідтримка цілодобова.
Для того, щоб запустити HTML-сайт на хостингу, досить просто скопіювати його файли в директорію з назвою домену. Можна використовувати вбудований FTP-сервер або програму на кшталт Filezilla , але, в такому випадку, її доведеться налаштовувати для роботи з хостингом. База даних не потрібна.
висновки та рекомендації
Найпростіший HTML-сайт можна створити в блокноті за кілька хвилин. Для побудови більш складних структур, здатних виконувати конкретні завдання і виглядати на рівні, будуть потрібні поглиблені знання HTML5 і CCS3. Цей підхід корисний новачкам для навчання, придбання базових навичок веб-розробника. В цілому, особливого сенсу створювати такі сайти в інших сценаріях немає – набагато ефективніше використовувати конструктори сайтів (наприклад, uCoz , uKit і інші) або навіть движок WordPress , якщо є досвід.