Створення сайту html в блокноті. Основи

15

Від автора: всі колись починали вивчення html, створення найпростішого сайту в блокноті. Хоча ця програма зовсім не підходить для розробки веб-сайтів, але створити в ній щось примітивне все ж можна.

Отже, як створити сайт в блокноті на html? Це є цілком реальним завданням. Звичайно, набагато зручніше і правильніше використовувати для цього спеціальні програми, на зразок Notepad++, але для першого разу можна обійтися і блокнотом. Я не буду вас відмовляти – хочете створити сайт в блокноті? Створюйте. Як? А ось про це давайте докладніше.

З чого потрібно починати для створення html сайту в блокноті

Будь-сайт створюється в першу чергу за допомогою html-тегів. Це мова, яку використовують для розмітки веб-сторінок. Навіщо він потрібен? Він необхідний браузерам, які вміють читати і розуміти його, формуючи сторінку в згоді з тим, який код написаний.

Наприклад, ви захочете на вашій сторінці вивести список. А як власне сказати браузеру, що це має бути саме список, а не звичайний текст? У ворді, наприклад, є кнопки маркірованих і нумерованих списків. В html спеціально для цього є свої теги. Уклавши потрібний текст у ці теги, браузер вже розуміє, що це список. Природно, така ж логіка і з розміщенням інших елементів.

Для початку нам потрібно створити в блокноті два файлу. Один потрібно назвати index.html, а другий – style.css. Зауважте, .html і .css повинні бути розширення файлу, а не його ім’ям. Тобто не style.css.txt, а саме style.css. Самі імена файлів можуть бути й іншими, просто я взяв найпопулярніші.

Навіщо ці самі файли потрібні? В html-файли ми будемо описувати структуру сайту, а у style.css – його зовнішній вигляд. Html і css – це мови, які обов’язково потрібні для створення сайту. Як для людини мати і праву руку і ліву. Скаже він, що йому вистачить однієї руки? Звичайно, немає. Так само і з цими двома мовами, але яких варто все сайтостроение.

Починаємо створювати сайт

Привіт, світ
Привіт, світ!

Отже, це вже невеликий код, який і створить нашу першу веб-сторінку. Як бачите, він майже повністю складається з тегів.

Створення сайту html в блокноті. Основи

Рис. 1. Порівняння зовнішнього коду в блокноті і Notepad++. Як бачите, лівіше все набагато зрозуміліше і яскравіше.

Основні теги

Потрібно пояснити ці прості теги для створення html сайту в блокноті. Вивчення html полягає у вивченні тегів, за допомогою яких будується сайт. Ну а поки я поясню, що означають вже написані теги:

Перший рядок просто вказує тип документа. Рекомендується вказувати її, щоб все правильно працювало.

html — парний тег контейнер всієї веб-сторінки в цілому. У ньому буде вміст всієї сторінки в цілому. Як бачите, він закривається в самому кінці.

head — тег, в якому розміщується різна інформація, яка не буде виведена на сайт, але має важливе значення для його правильної роботи. Наприклад, тут ми вже прописали кодування і назва сторінки, яке з’явиться у верхньому рядку браузера.

meta — тег мета-інформації. Такий, як кодування, метатеги і т. д. В даному випадку ми поставили кодування utf-8.

title — назва сторінки.

link — з допомогою цього тега до сторіночці можна підключити інші файли. Так ми підключили таблицю стилів css. Зараз не будемо конкретно розбиратися у всіх його атрибути. Скажу тільки, що href – це шлях до файлу. Щоб все працювало index.html і style.css повинні лежати в одній папці.

На цьому наш тег head закривається. До речі, ви помітили, що тег meta ми не закрили? Все тому, що в html є як парні, так і одинарні теги. В парні можна записати якийсь вміст, на відміну від одинарних.

Далі відкривається тег body. Якщо ви хоч трохи в ладах з англійською, то розумієте, що це перекладається як тіло. Тобто у body ми розміщуємо інформацію, яка безпосередньо буде виведена на екран – тіло сторінки. Напишемо тут стандартну фразу. Тепер саме час перевірити нашу сторінку. Відкрийте index.html в будь-якому браузері. Якщо ви бачите там порожній екран і фразу: «Привіт, світ!», значить, все вийшло. Залишилося тільки перевірити підключення файлу style.css.

Цей файл у нас все ще порожній. Скопіюйте туди такий код:

body{
background: red
}

Створення сайту html в блокноті. Основи

Рис. 2. Це вже, по суті, веб-сторінка, хоч і сама примітивна.

Зберігайте і знову відкривайте сторінку в браузері. Якщо ви бачите фразу на тлі червоного кольору – все працює. Можна починати роботу над створенням свого сайту. В css ми вказали команду зробити червоний колір фоном всієї нашої сторінки. Тепер розумієте для чого він потрібен, цей css?

Ось так ми і будемо створювати сайт: формувати елементи html, потім оформляти їх через css і врешті-решт отримаємо щось, схоже на сайт.

Структура сайту

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

Є горизонтальне або вертикальне меню, у якому винесено посилання на головні сторінки і розділи сайту. Також є основна частина, де розташовується контент і, можливо, ще одна бічна колонка. Обов’язково присутній низ сторінки, де теж щось розміщують.

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

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