Новини

Покрокова інструкція як створити свій перший HTML / CSS сайт!

Прокрутити вниз
Опубліковано:

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

Програмування онлайн-курси

Деяким людям набагато простіше придбати програмування онлайн-курси та точно знати, що фахівці розкладуть всю інформацію для них «по поличках». Але також важливо відшукати справжніх експертів, а не блогерів-самоучок, що займаються інфоциганством. Вищий показник якісності будь-якого освітнього продукту – чесні відгуки тих, хто його вже освоїв. IT-школа «Go mother» в рамках такого курсу вчить не тільки створювати сайти на основі html, але й надає усі необхідні базові знання з Python, Java Script, CSS і створення як лендингів, так і структурно складних сайтів за допомогою WordPress, який використовується як back-end нашими учнями, а також  таких конструкторів, як Tilda. Не лякайтеся, якщо всі ці слова для вас невідомі, наші учні з першого місяця занять вільно використовують ці та інші терміни в своєму лексиконі. Також ми займаємося з найменшими охочими освоїти «дитячу мову програмування». Програмування онлайн-курс – це ефективний спосіб досягти висот в IT сфері.

Сьогодні ми з вами спробуємо створити свій власний сайт, використовуючи лише блокнот (електронний, зрозуміло що).

Курс основи програмування

Що собою являє html-сайт?

Нtml використовується для створення простих односторінкових сайтів, лендингів або сайтів-візитівок. Перевага цієї мови розмітки в тому, що такі сайти швидко працюють, не перевантажують сервер і для них не потрібно підключати будь-яку базу даних. Усі сторінки статичні, тому форум або блог створити не вийде. Якщо html відповідальний за верстку сторінки, то надати всім структурним одиницям гарний зовнішній вигляд допоможе CSS: тут вам і шрифти, і колір, і фон і навіть відступи – потрібно лише дати волю фантазії. Також програмісти підключають для кращого функціоналу сайту та його інтерактивності Java Script.

Верстка сайтів за допомогою html буває двох видів: таблична і блокова. Остання – широко використовується в наші дні. У вашому розпорядженні досить великий набір тегів, які допомагають «зрозуміти ваші побажання» машині: від вікривашок <p> </ p>, до <time> для визначення дати і часу. Завдяки цьому ви зможете підігнати будь-який елемент на сайті під свої переваги. До речі, ми активно використовуємо теги html5 для верстки своїх сайтів з учнями курсів школи Go mother.

Приступимо до створення свого першого сайту.

Крок 1.

Вам потрібно відкрити стандартний блокнот, який знаходиться в панелі управління Windows або ж скористатися будь-яким зручним для вас текстовим редактором, як наприклад, Sublime Text або Notepad ++. Натисніть на меню «Файл», виберіть «Зберегти як», змініть кодування з ANSI на UTF-8 – це допоможе правильно відобразити мову безпосередньо в браузері. Далі введіть свій заголовок для сайту (він буде відображатися на вкладці) і розширення на html (воно йде після крапки). Не забудьте зберегти.

програмування онлайн-курси

Крок 2.

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

програмування онлайн-курси

Такі елементи є абсолютно на кожному веб-ресурсі. Весь ваш текст і контент в принципі повинен розташовуватися усередині тегів <body> </ body>, все інше на сайті не буде видно. Body (англ. – тіло) – буквально тіло вашої сторінки, її найголовніша частина.

Крок 3.

Саме час підключити CSS. Нагадаємо, що завдяки йому ми можемо перетворити зовнішній вигляд свого сайту.

програмування онлайн-курси

Зверніть увагу, ми задали власні значення:

Color – колір, font – шрифт, текст в заголовках і інші параметри. Всі ці властивості ми визначили між тегами <style> </ style>. Це – все) Наш сайт практично готовий, залишилося лише завантажити його на сторінку браузера.

Звичайно, для прикладу ми використовували найпримітивніші параметри і невелику кількість тегів. Але коли ви вивчите їх у повному обсязі – ваші сайти виглядатимуть не гірше за ті, що зібрані в таких конструкторах як WordPress або Tilda.

Крок 4.

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

Для запуску html-сайту на хостингу досить просто скопіювати його файли в директорію з назвою домену.

Чи є інші прості варіанти створення свого сайту?

Так! Використовуючи WordPress, ви зможете прямо зараз бачити зовнішній вигляд свого сайту. Переваги цієї системи керування вмістом:

1) З ним дуже швидко і просто працювати;

2) Ви можете змінити будь-яку його деталь, не прописуючи спеціальний код;

3) Це безкоштовно;

4) Система адаптована під різні пристрої: від ПК до смартфона, юзабіліті не втрачає в якості;

5) Безліч тем та інтерактивних елементів;

6) Можливість встановлювати свої SEO-значення;

З мінусів WordPress можна виділити велику вразливість до небезпек через відкритий вихідний код і відносно низький рівень продуктивності для окремих груп сайтів. Але все це – суб’єктивізм окремих користувачів.

Пам’ятайте, що б ви не обрали для себе – мову програмування Unity, або вивчення Python з нуля – IT-школа «Go mother» знайде підхід до кожного студента, який мріє освоїти програмування.

Залиште номер і ми допоможемо підібрати курс

Зроби крок до успішного майбутнього сьогодні

Child looks up!