Урок №1. HTML. Старт

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців

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

Перед вами сайт, на якому можна абсолютно безкоштовно пройти курс навчання мові HTML. Основна частина змісту на сайті - це переклад українською мовою матеріалів сайту W3Schools.com - найбільшого і найвідомішого ресурсу для веб-розробників, який адаптований для україномовного користувача. Також на сайті ви можете знайти додаткові матеріали даної тематики.

Із самого початку весь матеріал розділений на невеличкі уроки, в кожному з яких максимально докладно викладено матеріал по кожній темі. Для новачків рекомендується проходити уроки в тому порядку, в якому вони викладені. Але якщо ви вже раніше стикалися з мовою HTML (наприклад, вивчали її в школі) або навіть намагалися її вчити самостійно за допомогою Інтернету - дивилися відеоуроки або читали підручники - вам також будуть корисними дані уроки. Тут ви зможете знайти саме ті матеріали, які вам необхідні.

Уроки викладені максимально коротко, просто і зрозуміло навіть для новачків, які раніше ніколи не вивчали мову HTML і не займалися написанням сайтів за допомогою програм. Мова HTML не є мовою програмування, на якій можна було б написати якісь програми. HTML є мовою гіпертекстової розмітки, за допомогою якої пишеться код, який зчитується спеціальними програмами - браузерами. І вже програми-браузери відображають веб-сторінки так, як це більш звично звичайним користувачам Інтернету.

На сайті представлені уроки як для новачків, так і для більш досвідчених користувачів, які вже раніше, можливо, вивчали мову HTML або стикалися з нею в процесі вивчення веб-технологій і мов веб-програмування.

В основному курсі по HTML ви зможете отримати знання, необхідні для освоєння і розуміння написання коду HTML і зможете писати найпростіші веб-сторінки і статичні сайти. Але якщо ви хочете навчитися створювати повноцінні динамічні веб-сайти, цих знань, звичайно ж, буде недостатньо. Але в будь-якому випадку, фундамент вже буде закладено і базові знання будуть у вас в голові.


Чим ці уроки з вивчення мови HTML відрізняються від інших?

В мережі Інтернет є безліч сайтів, книг і відеоуроків, за якими можна вивчати мову розмітки HTML разом зі стилями - CSS. Але більшість з них написані тими, хто просто банально намагається заробити гроші (на книгах, сайтах або відео на Youtube). Крім того, сайти або книги, які були написані лише 2 - 3 роки тому, і відеоуроки на YouTube, дуже швидко застарівають і дуже рідко підтримуються своїми авторами на протязі тривалого часу. Відповідно, навчальні матеріали про HTML / CSS також дуже швидко втрачають свою актуальність. Те, що було стандартом ще якихось 3-5 років тому, зараз вже просто стає неактуальним і не затребуваним. Все змінюється, особливо в сфері web-технологій.

На даному ж сайті, який, до речі, зроблений фактично за допомогою лише HTML/CSS, матеріали взяті безпосередньо із першоджерел - сайтів, які є основними по вивченню даних технологій на просторах Інтернету - онлайн школи w3schools.com, W3C (Консорціуму Всесвітньої павутини) - www.w3.org, WHATWG Живого стандарту - https://whatwg.org/, MDN.Mozilla. Саме із цих сайтів і береться вся інформація по офіційно затвердженим стандартам і веб-технологіям.

На даному адаптованому для україномовного користувача сайті розміщений матеріал, який є найбільш актуальним на момент створення сайту, при цьому матеріали викладаються як в оригінальному оформленні (як на сайтах - першоджерелах, які є англомовними, але в українському перекладі), так і з додатковими поясненнями та прикладами від автора даного сайту. Матеріали в уроках викладаються за принципом від простого до складного, що дозволяє вивчати HTML/CSS навіть новачкам без початкових знань веб-технологій чи веб-програмування. Дані матеріали, якщо їх вивчати поступово і згідно викладеному порядку, є доступними для розуміння будь-якому новачкові, навіть дітям молодшого шкільного віку, які вміють лише більш-менш нормально читати, користуватися комп'ютером та Інтернетом і при цьому мають бажання вчитись.

Для того, щоб почати вивчати основи веб-верстки, зокрема, технологію HTML5, непотрібно мати вищу освіту чи якісь спеціальні знання з програмування. Починати вчитись створювати сайти вже можна в молодшому шкільному віці або навпаки, в досить зрілому віці, коли вже за 40. Звісно, для того, щоб краще засвоювати даний матеріал, бажано ще знати англійську мову - хоча б на рівні середньої шкільної освіти, принаймні, це дуже знадобиться і допоможе в освоєнні матеріалів.

Починати вивчати веб-технології необхідно саме із HTML/CSS, бо саме вони є основою всіх сайтів Інтернету. Далі, коли ви вже будете добре знати і вміти використовувати HTML/CSS, варто починати вивчати мову програмування, яка використовується на стороні клієнта (браузером) - JavaScript. Знання і володіння цими трьома технологіями складає фронтенд (front end) - частину веб-розробки, яка слугує для взаємодії між користувачем та серверною частиною, яка, в свою чергу, обслуговується веб-розробниками з бекенду (back end). Для бекенду необхідні знання таких мов програмування і технологій, як PHP, SQL, Node.js, Python та ін.

У деяких розділах на сайті викладені матеріали для більш продвинутих користувачів, які вже засвоїли основи HTML5/CSS3 і бажають продовжити навчатись веб-технологіям та веб-програмуванню. Зокрема, це основи мов програмування JavaScript, PHP, SQL, Python, а також фреймворки jQuery, Bootstrap та ін.

Також на даному сайті можна знайти приклади готових рішень для створення веб-сайтів, які в подальшому можна використовувати в своїх проектах.



За допомогою мови HTML ви можете створити свій власний веб-сайт.

Цей посібник від школи w3schools.com допоможе вам навчитись основам мови розмітки веб-сторінок HTML.

HTML легко вивчити - ви будете просто насолоджуватися навчанням!


Приклади в кожній главі

Цей навчальний посібник від w3schools.com містить сотні прикладів HTML.

З онлайн-редактором HTML на сайті w3schools.com ви можете редагувати HTML код і, натиснувши кнопку, відразу переглянути результат.

Приклад:

<!DOCTYPE html>
<html>
<title>Посібник з HTML</title>
<body>

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

</body>
</html>
Спробуйте самі! »

Натисніть кнопку "Спробуйте самі!", щоб дізнатися, як вона працює.

Почніть вивчати HTML зараз!


Приклади HTML

Наприкінці HTML підручника можна знайти більше 200 прикладів.

З онлайн-редактором w3schools.com ви можете самостійно редагувати і перевіряти кожен приклад.

Перейдіть до HTML-прикладів!


HTML-вправи та вікторини

Перевірте свої навички HTML у W3Schools!

Запустіть HTML-вправи!

Запустіть HTML-вікторину!


HTML довідники

У W3Schools ви знайдете повні довідники про теги, атрибути, події, назви кольорів, сутності, набори символів, кодування URL, коди мов, HTTP меседжі тощо.

Довідник тегів HTML


Здати іспит зі знання HTML - отримати диплом!

W3C сертифікат

Онлайн сертифікація W3Schools

Ідеальне рішення для професіоналів, яким необхідно збалансувати роботу, сім'ю та побудову кар'єри.

Більше 25 000 сертифікатів вже видано!

Отримати сертифікат »

HTML сертифікат документує Ваші знання з HTML.

CSS сертифікат документує Ваші знання про розширений CSS.

JavaScript сертифікат документує Ваші знання про JavaScript і HTML DOM.

jQuery сертифікат документує Ваші знання про jQuery.

PHP сертифікат документує ваші знання про PHP і SQL (MySQL).

XML сертифікат документує ваші знання про XML, XML DOM і XSLT.

Bootstrap сертифікат документує ваші знання про фреймворк Bootstrap.


Примітка: Отримати сертифікати і дипломи від W3Schools ви зможете тільки на офіційному сайті W3Schools!


warning

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