Доброго часу доби. Як правило в сучасному світі сайти створюються або на CMS або в безкоштовних або платних конструкторах. Але все ж, на початку часів 1990-2000 роки сайти створювалися переважно на HTML, без використання будь-яких звернень до бази даних. Різні програми, що дозволяють редагувати HTML + CSS в реальному часі, наприклад, Dreamweaver - з'явилися тільки в самому кінці 20-го століття. Тому сайти створювалися в блокноті і інших подібних редакторів. Хоч зараз і існує безліч зручних способів зробити якісний ресурс, створення сайту за допомогою блокнота дозволяє вивчити основи побудови сторінки і основи HTML в цілому.
Отже, для того, щоб створити сайт через блокнот вам потрібно для початку створити HTML файл. Зробити це можна в такий спосіб:
Заходьте в меню Пуск -> Всі програми -> Стандартні -> Блокнот
І відразу ж збережемо його в HTML форматі: В блокноті натисніть: Файл -> Зберегти як
І напишіть назву файлу, наприклад, index.html
Тепер ми можемо приступати безпосередньо до створення HTML верстки в блокноті. Для початку, напишемо основну розмітку HTML коду, ви можете її відразу скопіювати і вставити, щоб не витрачати час даремно.
<! 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> </ body> </ html>
По суті це основні елементи, з яких і складається будь-який веб-ресурс. Все, що знаходиться в дужках називається HTML-тегом або просто тегом. Всі HTML теги відкриваються, містять в собі якусь інформацію і потім закриваються. Є й інші теги, яким не потрібен закриває тег, але про них ми поговоримо пізніше. Зараз нам куди цікавіше відповідь на питання «як же створити сайт в блокноті?».
Давайте розглянемо кожен з них, щоб ми могли легко навчитися створювати сайти в блокноті
- DOCTYPE - дозволяє браузеру визначити, що за тип документа він відкрив, оскільки у HTML-документа є безліч версій.
- html - тег, яким відкривається і закривається вся веб-сторінка
- head - хед (або голова) документа. Даний тег несе в собі інформацію для браузера і не відображається на web-сторінці. У ньому міститися здебільшого інформація для браузера і пошукової системи , Стилі CSS, які ми пропишемо трохи пізніше і різні скрипти.
- meta - вказує браузеру і пошуковій системі певну інформацію. В даному випадку тег мета вказує браузеру про необхідність використання кодування UTF-8 (для того, щоб правильно відображався російську мову). В інших випадках цей тег може вказувати будь-які інші дані, наприклад, автор статті, опис сторінки, ключові слова.
- body - боді (або тіло) документа. У цьому тезі міститься все те, що ми в даний момент бачимо на сторінці, можна сказати, що він включає в себе скелет або каркас веб-сторінки.
- h1 - Головний заголовок на сторінці, який має великий вплив, наприклад на seo
- p - параграф - текст, який ми бачимо на сторінці
Натиснемо зберегти і тепер кликнемо на отриманий файл. Відкриється браузер і ми побачимо наш сайт зроблений на блокноті
Вийшов у нас звичайно, не найкращий в світі веб-ресурс, але треба ж з чогось починати? :)
У цій статті ми не створювали ніякого меню, якщо вам цікаво як же зробити горизонтальне меню для вашого сайту, то ласкаво просимо в цю статтю .
Тепер давайте додамо йому «красивостей», напишемо кілька стилів всередині тега <head>
body {background: # F2F2F2; max-width: 900px; margin: 0 auto; padding: 20px; } H1 {color: # 4C4C4C; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #BEBEBE; } P {font: italic; }
У підсумку наш приклад сайту зробленого в блокноті в коді виглядає так
<! 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: 0 auto; padding: 20px; } H1 {color: # 4C4C4C; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #BEBEBE; } P {font: italic; } </ Style> </ head> <body> <h1> Мій перший сайт </ h1> <p> Ще зовсім трохи, і я навчуся робити найкращі сайти на світлі. </ P> </ body> < / html>
Тепер ви навчилися створювати прості сайти в блокноті. Спробуйте використовувати інші стилі і теги для того, щоб зрозуміти як же влаштовані сайти.
UPD2. Додав в код вказівку кодування, для правильного відображення російської мови, а також інформацію про меню для сайту .
UPD3. Коли ви вже створите сайт і захочете його розмістити в інтернеті, вам знадобиться хостинг, тут я написав як вибрати сервер і зробив добірку з найкращих.
Зараз нам куди цікавіше відповідь на питання «як же створити сайт в блокноті?