Вивчіть HTML за 5 хвилин

Короткий посібник, який допоможе розпочати створення веб-сайтів

HTML - це мова розмітки, яка використовується для структурування та представлення вмісту у Всесвітній павутині. Разом із CSS та JavaScript це дозволяє нам мати красиві та інтерактивні веб-сайти.

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

І коли ви закінчите, я вже запустив безкоштовний 14-частинний курс з HTML5 на Scrimba.com - інтерактивній платформі, де ви можете в будь-який момент перейти до коду відтворюваного скринкасту.

Ви можете ознайомитися з першою лекцією тут:

Добре, перш ніж перейти до HTML, я для початку хочу розповісти вам трохи про архітектуру Інтернету. Це поставить нам роль HTML у перспективі.

Базова веб-архітектура

Розробивши веб-сайт, вам потрібно розмістити його на сервері, щоб зробити його доступним у всесвітній мережі. Усі сервери мають IP-адресу (тобто 149.56.240.169), яку ви можете сприймати як номер телефону. Зазвичай ми розміщуємо доменне ім'я (тобто scrimba.com) над цією IP-адресою, щоб було легше запам'ятати.

Коли ви вводите це доменне ім’я у браузері, воно викликає сервер. Потім сервер надішле купу файлів HTML, CSS та JavaScript, наприклад:

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

А тепер давайте детальніше розглянемо ролі цих трьох мов.

Що таке HTML?

Давайте уявимо веб-сайт як людину. Ми використаємо цю аналогію, щоб зрозуміти наш веб-сайт. HTML найкраще описати як скелет:

Що таке CSS?

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

Що таке JavaScript?

Після того, як ви освоїте CSS, вам слід перейти на JavaScript. За нашою аналогією, це схоже на мозок і м’язи нашого веб-сайту:

Написання першого файлу HTML

Для того, щоб мати можливість писати HTML, вам знадобиться документ HTML, який є лише документом із розширенням .html . Не має значення, яким текстовим редактором ви користуєтесь, але найпопулярнішими на сьогоднішній день є Sublime Text, VS Code та Atom. Ви також можете використовувати Scrimba як редактор у браузері.

Давайте створимо новий файл, назвемо його index.html і напишемо Hello world!в нього.

Hello world!

Якщо ми перетягнемо цей файл у браузер або вкажемо браузер на адресу цього файлу, ми отримаємо наступне.

Вітаємо, Ви створили свій перший веб-сайт!

Ваш перший тег HTML

Однак ми ще не написали жодних тегів HTML. Для цього обернемо Hello world!текст <тегами h1>, наприклад:

Hello world!

Перший <h1> - це тег, що відкриває, а другий one,- тег, що закриває. Як бачите, різниця полягає лише у зворотній косою рисі у закриваючому тегу. Це призведе до наступного на сторінці:

Тепер ви сказали браузеру, що хочете, щоб Hello world!текст був заголовком. Таким чином, браузер застосовує до нього деякий стиль, в основному збільшуючи розмір тексту.

Отже, як легко почати писати HTML.

Написання належного документа HTML

Але насправді це не дійсний документ HTML, оскільки вони повинні слідувати чітко визначеній структурі. Для цілей цього підручника я просто коротко його покажу вам, а потім ми продовжимо із цікавими матеріалами.

Ось як Hello world!повинен виглядати наш приклад:

Hello world!

Вам не потрібно турбуватися про ; і тег, оскільки ми просто напишемо намет у тегу. Продовжимо з цим!PE>, tml>ur con

Абзаци

Під тегом h1 ми додамо абзац. Цей тег зазвичай використовується для абзаців тексту.

Hello world!

Hello, and welcome to my website!

Ось як це виглядає:

Списки

Тепер додамо список. Для цього нам потрібно додати два різні теги <ul> ; and

  • . Перший означає неупорядкований список, а другий - пункт елемента списку. Нам знадобиться to wреп
  • Original text


  • ; tags всередині
      тег.

      • Eat
      • Sleep
      • Code

      Якщо змінити <ul> to an

        , тоді маркери будуть замінені цифрами, оскільки це означає замовлений список.

        Поля введення

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

        Що додасть поле введення внизу нашого веб-сайту:

        Зараз тут можна вивчити дві нові концепції: атрибути та самозакриваючі теги . Перший, атрибути , надає додаткову інформацію про елементи HTML.

        У нашому випадку ми додаємо два атрибути: тип і заповнювач. Тип повідомляє браузеру , що це повинно бути текстове поле. Тут ми могли б вибрати між різними типами (радіо, вибір, прапорець, дата), які перетворили б його на абсолютно різні елементи.

        Заповнювач диктує текст довідки всередині елемента.

        Нарешті, вхідний тег також є самозамикаючим елементом (також відомим як елемент void.) , Тобто він складається не з відкриваючого та закриваючого тегу, а лише з одного тегу, який закривається сам.

        Наступні кроки

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

        Якщо ви хочете отримати більше, у нас є безкоштовна їжа з 14 страв ...

        на моєму курсі Learn HTML5 for Free на Scrimba.com.

        Побачимось там. ?