Якщо ви Новомосковсклі попередню статтю, то пам'ятайте, що ми створили два файли. В одному задавали структуру, а в іншому зовнішній вигляд. Але червоний фон нам поки ні до чого, тому цей рядок коду можна сміливо видаляти. У тілі сторінки ми поки прописали наступне:
І цей текст успішно вивів на сторінці. Але хочеться чогось більш складного, а то поки зовсім примітивно. Щоб по-швидкому створити щось схоже на реальний сайт я пропоную вам створити кілька блоків, а потім оформити їх.
Створюємо сайт з нуля в html
Як в html створюються блоки? Дуже просто, за допомогою тега div. Він парний.
Практика HTML5 та CSS3 з нуля до результату!
Все це потрібно вставити в вміст тега body. Я думаю, вам гранично зрозуміло, що повинні будуть представляти собою ці блоки. А ну-ка тепер відкрийте сторінку в браузері. Ви побачите там ці чотири рядки, які йдуть одна за одною. Поки абсолютно незрозуміло, як з них зробити щось схоже на сайт.
Мал. 1. Поки що перед нами лише 4 рядки.
У бій іде один CSS
Настав час CSS! Зараз ми використовуємо його можливості. Щоб звернутися до тегу div, в css файлі потрібно написати його назву без кутових дужок. Ось так:
Оновлення сторінку. Ми поставили нашим блокам товщину і колір рамки, висоту і ширину. Тільки поки наша бічна колонка розташовується не збоку, та й взагалі все елементи йдуть один за одним зверху вниз. Але це добре, чи бачите ви набагато серйознішу проблему? Ми звернулися до всіх тегам div і правила застосували до всіх блоків. Але ж зрозуміло, що блоки повинні бути різними за розміром і місцем розташування, так що нам треба зрозуміти, як поводитися до кожного з них окремо.
В CSS є ідентифікатор. Щоб задати його, потрібно додати тегу атрибут id з довільним значенням, яке буде ім'ям ідентифікатора.
Порада. Давайте ідентифікаторів зрозумілі імена, щоб добре орієнтуватися в коді. Тепер, щоб звернутися до елементу через css, потрібно написати ім'я ідентифікатора і перед ним поставити решітку:
Практика HTML5 та CSS3 з нуля до результату!
У підсумку ми змінили стилі для сайдбара і основного вмісту. Тепер ці блоки будуть притискатися до лівого краю і розташуються на одному рядку. Щоб кордон не вилазила за блок можна дописати в стилі:
Тоді ширина рамки буде враховуватися в ширині всього блоку, а не додаватися до неї. Тепер у нас є шапка, бічна колонка і тематична частина в одному рядку, а нижче розташовується футер (низ). Тепер все це виглядає так:
Але у мене сайт вирівняний по центру, а вас напевно притиснутий до лівого краю, якщо ви робили все так, як в статті. Як відцентрувати все блоки? Дуже просто, достатньо все їх обернути в один блок. Можна дати йому ідентифікатор. Наприклад, wrapper, а потім в стилях задати для нього:
Ми задали контейнеру ширину і зовнішні відступи (margin). Перша цифра задає відступ знизу і зверху, а друга - зліва і справа. Відповідно, ключове слово auto створює такі відступи, щоб елемент був вирівняний прямо по центру.
А пам'ятаєте ми задавали стиль для всіх div-ів? Він же застосується і до wrapper-у, що незмінно приведе до помилки. Тому далі я вказав за допомогою псевдокласу: not, що правила слід застосовувати до всіх дівам, крім блоку з id = "wrapper», тому що йому рамка явно не потрібна, а в висоту він точно не 150 пікселів.
Робимо сайт ближчим до реальності
Поки у нас і шапка і основний вміст має однакову висоту. Але в реальності це безумовно не так, тому можете видалити рядок, яка задає висоту для всіх блоків. Зазвичай в боковій колонці, шапці і футере кількість інформації не змінюється, тому там можна виставити фіксовану висоту, а основний вміст на те і основне, що кількість тексту може там бути різним. Тому цього блоку краще поставити min-height, тобто мінімальну висоту.
А тепер відкрийте сторінку в браузері. Вже набагато більше схоже на сайт, чи не так? Навіть якщо ви абсолютно не знали, як створити сайт за допомогою html, після цього уроку у вас хоча б буде уявлення. Але до повноцінного шаблону ще дуже далеко: потрібно прикрасити блоки в потрібні кольори, наповнити їх інформацією, проставити відступи, задати шрифт і багато-багато іншого. Наприклад, можна пофарбувати шапку і футер в один колір, а бічну колонку і контент в іншу. Як щодо таких кольорів?
А ну-ка поновіть сторінку.
Стало красивіше, вже зараз наше творіння виглядає в рази краще, ніж на початку цієї статті. А уявіть, в яку цукерку можна перетворити сайт після вставки графіки, різних декоративних елементів і більш ретельного оформлення вмісту. У боковій колонці можна вивести меню, внизу можна вказати контактну інформацію, а в основній частині вивести статтю. Ось так от і створюються сайти. Чорні рамки, як ви розумієте, дуже легко прибрати при необхідності.
Як бачите, створення сайту за допомогою html не є дуже складним завданням, для якої потрібно володіти великими знаннями.
Як я вже і говорив, процес створення сайту складно описати в одній статті. У минулій ми могли прочитати ази і створити найпростішу веб-сторінку, тепер у нас є привабливий макет, який залишається трохи оформити. Чи не кидати ж справа на півдорозі, правильно? Ось в наступній статті і продовжимо. А ви не забувайте підписуватися на блог webformyself, щоб не упустити корисну інформацію зі світу сайтобудування.
Практика HTML5 та CSS3 з нуля до результату!
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі