IT-школа
Покрокова інструкція як створити свій перший 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» знайде підхід до кожного студента, який мріє освоїти програмування.
