Як створити простий 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 – додаємо розмітку веб-сторінки

Тепер приступаємо до редагування файлу. Насамперед необхідно додати -Веб-розмітку – стандартний шматок коду, що дозволяє браузерам розпізнавати контент, що знаходиться у внутрішніх тегах. Просто скопіюйте та вставте його:

  1. <! DOCTYPE html PUBLIC “- // W3C // DTD HTML 4.01 Transitional // EN”>
  2. <Html>
  3. <Head>
  4. <Meta http-equiv = “Content-Type” content = “text / html; charset = UTF-8”>
  5. <Title> Топовий сайт новачка </ title>
  6. </ Head>
  7. <Body>
  8. <H1> Це тег заголовка першого рівня для вмісту сторінки </ h1>
  9. <P> Перший абзац </ p>
  10. <P> Другий абзац </ p>
  11. <P> Третій абзац і т. Д. </ P>
  12. </ Body>
  13. </ Html>

Це базові елементи, які є на будь-якому веб-ресурсі. Весь контент сторінки повинен знаходиться між тегами <body> </ body> (це тіло документа), все, що виходить за їх межі вище і нижче, не буде відображатися на сайті.

 

Крок 3 – працюємо зі стилями CSS

Припустимо, ви додали якийсь текст в параграфи, тепер потрібно надати їм стилістику – вибрати шрифти, фон, відступи, ширину області сторінки і т. Д. Це може виглядати ось так:

  1. body {
  2. background: # F2F2F2;
  3. max-width: 900px;
  4. margin: 10px auto;
  5. padding: 30px;
  6. }
  7. h1 {
  8. color: # 4C4C4C;
  9. padding-bottom: 20px;
  10. margin-bottom: 20px;
  11. border-bottom: 2px solid #BEBEBE;
  12. }
  13. p {
  14. font: italic;
  15. }

У прикладі ви бачите колір фону (background) і значення цього атрибута (# F2F2F2), ширину сторінки (900 пікселів), відступи, колір заголовка, відступи від основного тексту і кордонів сторінки (padding і margin), а також кольорову кордон нижній частині сайту в 2 пікселя (border-bottom). Вся сторінка в зборі з розміткою, контентом і стилями буде виглядати так:

  1. <! DOCTYPE html PUBLIC “- // W3C // DTD HTML 4.01 Transitional // EN”>
  2. <Html>
  3. <Head>
  4. <Meta http-equiv = “Content-Type” content = “text / html; charset = UTF-8”>
  5. <Title> Топовий сайт новачка </ title>
  6. <Style>
  7. body {
  8. background: # F2F2F2;
  9. max-width: 900px;
  10. margin: 10px auto;
  11. padding: 30px;
  12. }
  13. h1 {
  14. color: # 4C4C4C;
  15. padding-bottom: 20px;
  16. margin-bottom: 20px;
  17. border-bottom: 2px solid #BEBEBE;
  18. }
  19. p {
  20. font: italic;
  21. }
  22. </ Style>
  23. </ Head>
  24. <Body>
  25. <H1> Це тег заголовка першого рівня для вмісту сторінки </ h1>
  26. <P> Перший абзац </ p>
  27. <P> Другий абзац </ p>
  28. <P> Третій абзац і т. Д. </ P>
  29. </ Body>
  30. </ 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 , якщо є досвід.

 

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

Вам також сподобається...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *