HTML5. Уроки для початківців

Уроки по HTML5 | CSS3 | JavaScript | SQL | PHP | W3.CSS | Bootstrap 4

посібник для початківців та допомога для професіоналів


Вітаю вас на сайті для веб-розробників, веб-програмістів і веб-дизайнерів – WebSunSay.github.io!

Даний сайт WebSunSay.github.io є україномовною версією сайту W3Schools.com, але створений непрофесіоналом-любителем з власним довільним перекладом і своїм додатковим викладенням матеріалів по темі веб-розробки, зокрема: HTML, CSS, JavaScript, SQL, PHP, Bootstrap, Python, W3.CSS, jQuery та ін. Так як в мережі не існує офіційної версії сайту W3Schools українською чи російською мовами, але дуже велика кількість людей здійснюють запит саме на сайт W3Schools в пошуках інформації і вивчення курсів для веб-розробників, в тому числі з HTML, CSS, JavaScript (для frontend) та PHP, SQL, Python (для backend), але при цьому не всі добре знають англійську мову, то я вирішив трохи полегшити життя цим людям, що хотіли б отримати знання з веб-верстки чи веб-програмування, і зробив переклад українською та російською мовами сайту W3Schools. Більша частина матеріалів і прикладів взяті саме із цього сайту.

W3Schools є навчальним сайтом, створеним спеціально для цілей навчання всіх бажаючих основам веб-розробки, і заснований на матеріалах Консорціуму Всесвітньої павутини (офіційний сайт: https://w3.org/). Саме із цього сайту і береться вся офіційна інформація і всі зміни, які відбуваються в діючій специфікації. На даний момент актуальною є специфікація HTML5, на основі якої і створюються більшість нових сайтів в Інтернеті.

Крім матеріалів із сайту W3Schools, які перекладені українською мовою, ви можете знайти на цьому сайти додаткові матеріали по HTML, CSS, JavaScript, PHP, SQL, Bootstrap, Python, W3.CSS, jQuery та ін. теми для веб-верстки та веб-програмування. Сайт WebSunSay.github.io створений лише за допомогою HTML/CSS і не містить інтерактивних елементів (крім коментарів від Disqus) як навчальний посібник і приклад для тих початківців і любителів, хто тільки починає вивчати веб-технології по створенню сайтів HTML/CSS. Сайт лише розробляється і наповнюється, тому деякі посилання ще можуть не працювати. Тому якщо у вас виникають якісь труднощі чи питання щодо викладених на сайті матеріалів, рекомендується перейти на офіційний сайт W3Scools для перегляду інформації в оригіналі англійською мовою.

Також на сайті WebSunSay.github.io ви можете додатково переглядати відеоуроки по HTML/CSS (на данный момент только на русском языке), отримуючи більш докладний виклад матеріалів і наведених прикладів, безпосередньо бачачи все на екрані монітора. Крім того, в розділі Книги ви можете переглянути добірку навчальної літератури, підручники та посібники для веб-розробників, зокрема, з HTML, CSS, JavaScript. Книги викладені для ознайомлення в форматі pdf, їх можна скачати або читати онлайн безпосередньо з Google-диска безкоштовно. Всі права на книги належать їх авторам і не можуть бути використані для комерційних цілей ніким, крім авторів.

Для того, щоб приступити до вивчення курсу по тій чи іншій веб-технології, оберіть необхідний курс, перейшовши за відповідним посиланням на головній сторінці сайту. Якщо ви новачок-початківець і не знайомі з веб-технологіями взагалі, то краще починати з першого уроку і вивчати всі теми у тій послідовності, в якій вони викладені на сайті. Якщо ж ви вже частково знайомі з веб-технологіями і маєте загальне уявлення про те, як створюються і працюють веб-сайти, то можете відразу перейти до тієї теми, яка вам необхідна для ознайомлення чи вивчення. Матеріали від школи W3Scools викладені досить стисло і коротко, але в той же час охоплюють практично всі необхідні теми для освоєння веб-технологій. Якщо ви маєте якісь труднощі в сприйнятті матеріалів саме в такому стислому форматі, то ви можете скористатись додатковими ресурсами, які наводяться на сайті WebSunSay.github.io в правому сайд-барі в розділі Корисні ресурси. В мережі існує досить багато різних ресурсів для вивчення веб-технологій і ви можете скористатись будь-якими з них.

Зауваження і пропозиції щодо наповнення і функціонування сайту можна залишати в коментарях від платформи Disqus до будь-якої теми.

Хай вам щастить!

Адмін сайту WebSunSay.github.io


HTML

Мова розмітки для створення веб-сторінок

Даний курс уроків по HTML5 рекомендується для початківців, тих, хто тільки починає вивчати мову HTML для розмітки веб-сторінок з нуля.


ПІДРУЧНИК HTML ПІДРУЧНИК на W3Schools ДОВІДНИК HTML
Приклад HTML:
<!DOCTYPE html>
<html>
<title>Посібник з HTML</title>
<body>

<h1>Це заголовок</h1>
<p>Це параграф.</p>
<p>Це параграф.</p>

</body>
</html>

CSS

Мова для стилізації веб-сторінок

Даний курс уроків по CSS3 рекомендується для початківців, тих, хто тільки починає вивчати мову для стилізації веб-сторінок (CSS - каскадні таблиці стилів) з нуля.


ПІДРУЧНИК на W3Schools ДОВІДНИК CSS

Примітка. На даний момент підручник українською мовою розробляється.

Приклад CSS:
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

JavaScript

Мова для програмування веб-сторінок

Даний курс уроків по JavaScript рекомендується для початківців, тих, хто тільки починає вивчати JavaScript для програмування веб-сторінок і веб-додатків (frontend) з нуля. Дані уроки - це лише основи JavaScript.


ПІДРУЧНИК JavaScript ДОВІДНИК JavaScript

Примітка. На даний момент підручник українською мовою розробляється.

Приклад JavaScript:
<button onclick="myFunction()">Click Me!</button>

<script>
function myFunction() {
  var x = document.getElementById("demo");
  x.style.fontSize = "25px";
  x.style.color = "red";
}
</script>

SQL

Мова для доступу до баз даних

Даний курс уроків по SQL рекомендується для початківців, тих, хто тільки починає вивчати SQL для доступу до баз даних. В даних уроках ви познайомитесь лише з основами SQL.


ПІДРУЧНИК SQL

Примітка. На даний момент підручник українською мовою розробляється.

Приклад SQL:
SELECT * FROM Customers;

SELECT column1, column2, ...
FROM table_name;

PHP

Мова програмування веб-сервера

Даний курс уроків по мові програмування PHP рекомендується для початківців і новачків, тих, хто тільки починає вивчати PHP для програмування серверної частини веб-сайту (backend). В даному курсі викладені основи мови програмування PHP.


ПІДРУЧНИК PHP

Примітка. На даний момент підручник українською мовою розробляється.

Приклад PHP:
<!DOCTYPE html>
<html>
<body>

<?php
echo "My first PHP script!";
?>


</body>
</html>

jQuery

Бібліотека JavaScript для розробки веб-сторінок

Даний курс уроків по бібліотеці jQuery рекомендується для для початківців і новачків, тих, хто вже знайомий з мовою розмітки веб-сторінок HTML5 / CSS3 та основами мови програмування JavaScript. Бібліотека jQuery - це набір готових рішень на мові програмування JavaScript, які полегшують роботу веб-розробника.


ПІДРУЧНИК jQuery

Примітка. На даний момент підручник українською мовою розробляється.

Приклад jQuery:
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

Python

Мова програмування веб-сервера

Даний курс уроків по мові програмування Python рекомендується для початківців і новачків, тих, хто тільки починає вивчати Python для програмування серверної частини веб-сайту - (backend).


ПІДРУЧНИК Python

Примітка. На даний момент підручник українською мовою розробляється.

Приклад Python:
print("Hello, World!")
x = 5
y = "John"
print(x)
print(y)

W3.CSS

Сучасний CSS-фреймворк для швидких та адаптивних веб-сторінок

Даний курс уроків по фреймворку W3.CSS рекомендується для початківців і новачків, тих, хто вже знає основи HTML5 / CSS3, але хоче вдосконалити свої вміння і навички та прискорити створення сайтів за допомогою CSS-фреймворка W3.CSS від w3schools.com.


ПІДРУЧНИК W3.CSS

Примітка. На даний момент підручник українською мовою розробляється.

Приклад W3.CSS:
<div class="w3-container w3-teal">
<h1>My Header</h1> </div>

<img src="img_car.jpg" alt="Car">

<div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>

<div class="w3-container w3-teal">
<p>My Footer</p>
</div>

Bootstrap 4

Bootstrap 4 - це CSS-фреймворк для розробки сучасних адаптивних веб-сторінок

Даний курс уроків по фреймворку Bootstrap 4 рекомендується для новачків і початківців, які вже добре знають основи HTML5 / CSS3 і бажають пришвидшити розробку сайтів за допомогою готового рішення - CSS-фреймворку Bootstrap 4.


ПІДРУЧНИК Bootstrap 4

Примітка. На даний момент підручник українською мовою розробляється.

Приклад Bootstrap 4:
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
      <p>Ut enim ad..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
      <p>Ut enim ad..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
      <p>Ut enim ad..</p>
    </div>
  </div>
</div>

warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.