Від автора: без html не обходиться створення будь-якого веб-сайту. Це перший крок до розробки нового інтернет-проекту. Тому питання, як створити сайт html, потрібно детально обговорити.
HTML – по суті текст. Тому в якості редактора може виступати навіть блокнот. У попередній статті ми як раз створювали найпростішу веб-сторінку в блокноті. І взагалі ця стаття пов’язана з тією, тому що є її безпосереднім продовженням. Можете продовжити працювати в блокноті або вибрати щось зручніше. У процесі читання статті ви зрозумієте, як створити сайт через html і css, хоча б самий простий.
Якщо ви читали попередню статтю, то пам’ятайте, що ми створили два файлу. В одному ставили структуру, а в іншому зовнішній вигляд. Але червоний фон нам поки ні до чого, тому цей рядок коду можна сміливо видаляти. В тілі сторінки ми поки прописали наступне:
Привіт, світ!
І цей текст успішно вивівся на сторінці. Але хочеться чогось більш складного, а то поки зовсім примітивно. Щоб по-швидкому створити щось схоже на реальний сайт я пропоную вам створити кілька блоків, а потім оформити їх.
Створюємо сайт з нуля в html
Як у html створюються блоки? Дуже просто, за допомогою тега div. Він парний.
Все це потрібно вставити вміст тега body. Я думаю, вам гранично зрозуміло, що повинні будуть представляти собою ці блоки. А ну-ка тепер відкрийте сторінку в браузері. Ви побачите там ці чотири рядки, які йдуть одна за одною. Поки абсолютно незрозуміло, як з них зробити щось схоже на сайт.
Рис. 1. Поки що перед нами лише 4 рядки.
У бій іде один CSS
Настав час CSS! Зараз ми використовуємо його можливості. Щоб звернутися до тегу div, css файлі потрібно написати його назву без кутових дужок. Ось так:
div{
border: 3px solid black;
width: 600px;
height: 100px;
}
Оновіть сторінку. Ми поставили нашим блокам товщину і колір рамки, висоту і ширину. Тільки поки наша бічна колонка розташовується не збоку, та й взагалі всі елементи йдуть один за одним зверху вниз. Але це добре, чи бачите ви набагато більш серйозну проблему? Ми звернулися до всіх тегам div і правила застосувалися до всіх органів. Але ж зрозуміло, що блоки мають бути різними за розміром та місцем розташування, так що нам треба зрозуміти, як звертатися до кожного з них окремо.
В CSS є ідентифікатор. Щоб визначити його, потрібно додати тег атрибут id з довільним значенням, яке буде ім’ям ідентифікатора.
Рада. Давайте ідентифікаторів описові імена, щоб добре орієнтуватися в коді. Тепер, щоб звернутися до елементу через css, потрібно написати ім’я ідентифікатора і перед ним поставити грати:
#sidebar{
width: 200px;
float: left
}
#content{
width: 400px;
float: left;
}
У підсумку ми змінили стилі для сайдбара і основного вмісту. Тепер ці блоки будуть притискатися до лівого краю і розташуються на одному рядку. Щоб кордон не вилазила за блок можна дописати в стилі:
*{
box-sizing: border-box;
}
Тоді ширина рамки буде враховуватися в ширині всього блоку, а не додаватися до неї. Тепер у нас є шапка, бічна колонка та контентна частина в одному рядку, а нижче розташовується футер (низ). Тепер все це виглядає так:
Але у мене сайт вирівняний по центру, а вас напевно притиснутий до лівого краю, якщо ви робили все так, як у статті. Як відцентрувати всі блоки? Дуже просто, достатньо їх обернути в один блок. Можна дати йому ідентифікатор. Наприклад, 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 не є дуже складним завданням, для якої потрібно володіти великими знаннями.
Як я вже і говорив, процес створення сайту складно описати в одній статті. У минулому ми могли прочитати ази і створити найпростішу веб-сторінку, тепер у нас є привабливий макет, який залишається трохи оформити. Не кидати справу на півдорозі, правильно? От у наступній статті і продовжимо. А ви не забувайте підписатися на блог webformyself, щоб не упустити корисну інформацію зі світу сайтобудування.
