Як створити сайт html. Частина 1

11

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

HTML – по суті текст. Тому в якості редактора може виступати навіть блокнот. У попередній статті ми як раз створювали найпростішу веб-сторінку в блокноті. І взагалі ця стаття пов’язана з тією, тому що є її безпосереднім продовженням. Можете продовжити працювати в блокноті або вибрати щось зручніше. У процесі читання статті ви зрозумієте, як створити сайт через html і css, хоча б самий простий.

Якщо ви читали попередню статтю, то пам’ятайте, що ми створили два файлу. В одному ставили структуру, а в іншому зовнішній вигляд. Але червоний фон нам поки ні до чого, тому цей рядок коду можна сміливо видаляти. В тілі сторінки ми поки прописали наступне:

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

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

Створюємо сайт з нуля в html

Як у html створюються блоки? Дуже просто, за допомогою тега div. Він парний.

Це буде шапка сайту
Це буде бічна колонка
Це буде основна частина сторінки
Це буде її нижня частина

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

Як створити сайт html. Частина 1

Рис. 1. Поки що перед нами лише 4 рядки.

У бій іде один CSS

Настав час CSS! Зараз ми використовуємо його можливості. Щоб звернутися до тегу div, css файлі потрібно написати його назву без кутових дужок. Ось так:

div{
border: 3px solid black;
width: 600px;
height: 100px;
}

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

Як створити сайт html. Частина 1

В CSS є ідентифікатор. Щоб визначити його, потрібно додати тег атрибут id з довільним значенням, яке буде ім’ям ідентифікатора.

Це буде основна частина сторінки

Рада. Давайте ідентифікаторів описові імена, щоб добре орієнтуватися в коді. Тепер, щоб звернутися до елементу через css, потрібно написати ім’я ідентифікатора і перед ним поставити грати:

#sidebar{
width: 200px;
float: left
}
#content{
width: 400px;
float: left;
}

У підсумку ми змінили стилі для сайдбара і основного вмісту. Тепер ці блоки будуть притискатися до лівого краю і розташуються на одному рядку. Щоб кордон не вилазила за блок можна дописати в стилі:

*{
box-sizing: border-box;
}

Тоді ширина рамки буде враховуватися в ширині всього блоку, а не додаватися до неї. Тепер у нас є шапка, бічна колонка та контентна частина в одному рядку, а нижче розташовується футер (низ). Тепер все це виглядає так:

Як створити сайт html. Частина 1

Але у мене сайт вирівняний по центру, а вас напевно притиснутий до лівого краю, якщо ви робили все так, як у статті. Як відцентрувати всі блоки? Дуже просто, достатньо їх обернути в один блок. Можна дати йому ідентифікатор. Наприклад, wrapper, а потім в стилях задати для нього:

#wrapper{
width: 600px;
margin: 0 auto
}
div:not(#wrapper){
border: 3px solid black;
height: 150px
}

Ми поставили контейнера ширину і зовнішні відступ (margin). Перша цифра задає відступ знизу і зверху, а друга – ліворуч і праворуч. Відповідно, ключове слово auto створює такі відступи, щоб елемент був вирівняний прямо по центру.

А пам’ятаєте ми ставили стиль для всіх div-ів? Він же застосувати і до wrapper-у, що незмінно приведе до помилки. Тому далі я вказав за допомогою псевдокласу :not, що правила слід застосовувати до всіх дівам, крім блоку з id = «wrapper», тому що йому рамка явно не потрібна, а у висоту він точно не 150 пікселів.

Робимо сайт більш близьким до реальності

Поки у нас і шапка і основний вміст має однакову висоту. Але в реальності це безумовно не так, тому можете видалити рядок, що задає висоту для всіх блоків. Зазвичай в боковій колонці, шапці і футері кількість інформації не змінюється, тому там можна виставити фіксовану висоту, а основний вміст на те і основне, що кількість тексту може бути різним. Тому цього блоку краще поставити min-height, тобто мінімальну висоту.

#header{
height:70px
}
#sidebar{
height: 600px
}
#content{
min-height: 600px
}
#footer{
height: 50px
}

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

#header, #footer{
background: #D2E4AF
}
#sidebar, #content{
background: #C3DB94
}

А ну-ка оновіть сторінку.

Як створити сайт html. Частина 1

Стало красивіше, вже зараз наше творіння виглядає в рази краще, ніж на початку цієї статті. А уявіть, в яку цукерку можна перетворити сайт після вставки графіки, різних декоративних елементів і більш копіткої оформлення вмісту. У бічній колонці можна вивести меню, внизу можна вказати контактну інформацію, а в основній частині вивести статтю. Ось так і створюються сайти. Чорні рамки, як ви розумієте, дуже легко забрати при необхідності.

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

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