Научете 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.