Вивчіть HTML5 у цьому безкоштовному та інтерактивному курсі для початківців

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

Тож для покращення технологічної грамотності у світі ми об’єдналися з розробником, дизайнером та викладачем Еріком Тірадо та створили безкоштовний курс з HTML5.

Клацніть на зображення, щоб перейти на сторінку курсу

Протягом курсу Ерік проведе вас від початківця до того, хто володіє HTML, показуючи вам, як створити веб-сайт. І найкраще: на проходження курсу у вас піде менше години!

А тепер давайте подивимось, як це побудовано.

Зміст курсу

Курс містить 14 інтерактивних екранізацій. Кожен акторський склад обробляє основну концепцію HTML, і більшість із них тривають від шести до шести хвилин. У деяких з них вам буде запропоновано скористатися кодом та поекспериментувати для себе, як це можливо з платформою Scrimba.

Урок №1: Вступ до Інтернету

Починається з того, що ви навчите вас трохи про Інтернет загалом, дивлячись на клієнтів, сервери та три мови, якими користуються браузери: HTML, CSS та JavaScript.

Це дає вам хорошу основу для наступних уроків, оскільки ви краще зрозумієте загальну роль HTML у всесвітній мережі.

Урок №2: Створення документа HTML

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

Урок №3: Вкладання елементів

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

Урок №4: Елементи голови та сценарії

 Learning HTML       h1 { text-align: center; }   document.getElementById("h1").innerHTML = "Hello Universe!";   

Елемент head - це перший тег HTML після самого тегу. Це контейнер для метаданих і часто визначає заголовок **, ** набір символів, стилі, посилання, сценарії та іншу мета інформацію.

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

Урок №5: Елементи макета

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

Урок №6: Елементи малюнка та зображення

Зображення є основною частиною майже всіх веб-сайтів. З цієї лекції ви дізнаєтесь, як додати зображення на сайт, а також як додати до них підписи.

Урок 7: Вбудовування відео

Ви могли помітити, що відео на YouTube є в Інтернеті, правда? Не лише на youtube.com. Це можливо завдяки одній із функцій HTML для вбудовування носіїв на сторінку з інших місць в Інтернеті. У цьому уроці ми розглянемо методи вбудовування відео з таких сайтів, як YouTube, а також безпосередньо з відеофайлу.

Урок 8: Navbar та елементи списку

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

Урок №9: Заголовки

Заголовки створюються за допомогою мітки, де знак * слід замінити цифрами від 1 до 6. Важливість заголовка падає із збільшенням числа, тобто

це той, який ви зазвичай використовуєте для найважливішого заголовка або тексту на своїй сторінці.

Урок №10: Форматування абзаців та тексту (частина 1)

Форматування тексту також важливо знати для створення веб-сайтів, і в цій лекції ви дізнаєтесь його основи. Ви, мабуть, розпізнаєте багато концепцій тут із текстових процесорів, таких як Word і Pages.

Урок №11: Форматування тексту (частина 2)

На цьому уроці ви дізнаєтесь більше про форматування, але з тегами, які впливають на великі блоки тексту. Прикладами цього є element and the element.

Lesson #12: Tables (part 1)

Original text


Tables can be a bit complicated, but this lecture tries to explain it as simply as possible. Secondly, two lectures will be dedicated to this subject so that you’ll properly understand it.

Lesson #13: Tables (part 2)

In this lesson, you’ll learn more advanced elements in tables, like , , and . These allow you to control the elements inside the head, body and footer separately.

You’ll also be exposed to the , which allows you to add styles to specific columns.

Lesson #14: Page linking and final touches

In the final screencast, we’ll wrap it all up and finish the website. We’ll add a link from the navigation to various sections on the page, and also introduce another page so that you understand how links between pages work.

By this point, you should have a solid understanding of HTML, and the most important tags of the language.

Note: Eric will also be launching a follow-up course in April, which will tackle CSS for beginners. Leave your email here if you want early access.

The Scrimba format

Finally, let’s also have a look at the technology behind the course, as it’s pretty slick. The course is built using Scrimba, an interactive coding screencast tool. Scrimba looks like normal videos, but they’re fully interactive. You can edit the code inside the casts!

Here’s a gif which explains the concept:

Pause the screencast → Edit the code → Run it! → See your changes

Pause the screencast → Edit the code → Run it! → See your changes

This is great for when you feel you need to experiment with the code in order to properly understand it, or when you simply want to copy a piece of the code.

So what are you waiting for? Head over to the course page and get started today!

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.