Як створити простий HTML сайт в блокноті

HTML-сайти користувалися широкою популярністю в 90-х і 2000-х роках. Просто тому, що особливих альтернатив не було. Їх створення – основа основ, азбука веб-розробника. Зараз їх, в основному, використовують для навчання основам верстки веб-сторінок, вивчення HTML і CSS, що стане в нагоді при роботі взагалі з будь-яким двигуном.

HTML-сайти не обов’язково мають примітивний дизайн. Існує безліч безкоштовних HTML шаблонів , нічим не поступаються за привабливістю тим, що використовуються в конструкторах сайтів або CMS . Але великі проекти на них незручно робити. Багато сторінок – багато мороки, оскільки редагування кожної вимагає копання в коді. У них немає панелі управління, також всі сторінки будуть статичними – ніяких блогів, форумів і т. Д.

HTML-сайти найчастіше мають формат Лендінгів і сайтів-візиток. У цих сценаріях вони себе більш-менш виправдовують – працюють швидко, не вантажать сервер, не вимагають підключення бази даних. Весь контент міститься в самих сторінках. HTML відповідає за верстку, структуру блоків, а за допомогою каскадних таблиць стилів (CSS) цих елементів можна надати необхідний зовнішній вигляд і формат (шрифт, колір, фон, форма, відступи і т д.).

Верстка в HTML буває табличній (table – застарілий стандарт) і блокової (div – саме її зараз використовують). Мова використовує великий набір тегів , майже всі з яких використовуються парою – відкриває і закриває теги (наприклад, <p> </ p> – тег абзацу), всередині яких міститься контент. В CSS використовуються атрибути, властивості і їх значення, що підключаються до окремих елементів HTML-каркаса сторінки. Тобто можна вибірково надавати бажаний вид кожному елементу на сайті окремо.

Ми не ставимо собі за мету навчити вас синтаксису мов – якщо потрібно, то без зусиль зможете знайти сотні уроків і довідників по ним в Мережі. Покажемо основу – як зробити простий сайт на HTML в блокноті, створити своїми руками веб-сторінку за тими ж стандартами, що використовують всі відвідувані вами сайти. На прикладі ви зможете вловити суть процесу, оцінити для себе, чи цікава взагалі ця тема.

Читайте також  Samsung Galaxy A50 подешевшав через три місяці після анонсу

 

Крок 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 , якщо є досвід.

 

Степан Лютий

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

You may also like...

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

Ваша e-mail адреса не оприлюднюватиметься.