Знайомство з мовою HTML: сила гіпертекстової розмітки

Рядовий інтернет-користувач щодня шарудить сотнями веб-сторінок. Так-так, і ви теж. Запитати у гугла «рецепт сніданку за 10 хвилин», ознайомитися зі свіжими новинами, уточнити погоду - день ще не розпочався, а історія браузера рясніє десятками переходів. Задумайтесь, скільки сторінок ви подолали за сьогодні на шляху до цієї? А що у неї спільного з попередньою? Як дядечко по той бік екрану зробив так, що ви бачите її саме такою? Тим не менш, добре, що ви тут. Саме час відкрити кватирку в світ верстки, почавши знайомство з мовою HTML.

Що таке HTML?

У 1991 р один з творців всесвітньої павутини (World Wide Web) вперше запропонував 18 тегів для опису структури сторінки, 13 з яких живі, до цього дня.

Не зовсім грамотно назвати HTML мовою програмування. Хоча б тому, що він не має ніякої логіки і недоступний для написання алгоритмів будь-якого типу. Дослівно, це HyperText Markup Language або «мова гіпертекстової розмітки». Завдяки HTML, браузер отримує інструкції до того, як правильно відобразити веб-сторінку на гаджеті користувача. «Правильним» вважається той вид сайту, яким він був задуманий його творцями: фон, розміщення блоків тексту, його колір, таблиці, графічні елементи та інше.

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

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

При чому тут верстка?

Говорити про HTML, що не повідавши, що таке верстка, злочину подібно. Тут все просто: так називають процес створення структури веб-сторінки (її частини), на основі мови розмітки (HTML) і каскадних таблиць стилів (CSS). Хороший верстальник на «ти» з браузерами і особливостями їх роботи, в його силах склепати «один в один» зовнішній вигляд сайту з будь-якого макета.

Якщо раніше HTML «сопів» над створенням інтерфейсу на самоті, у міру розвитку веб-технологій він придбав пару - CSS (Cascading Style Sheets, мова оформлення). Основи HTML і CSS постачають верстальників ресурсами, як для створення структури сайту, так і опрацювання дизайну. По суті, CSS бере на себе функцію «прикрасити», звужуючи обов'язки напарника, при цьому, не знижуючи рівня його значущості.

Відмінні критерії якісної верстки від «тяп-ляп»:

• коректне відображення сайту в різних браузерах і на моніторах з різним розширенням (Мобільних версіях) - в Chrome вантажить, в Opera - підводить. Навіть найбільш просунуті розробники не застраховані від створення «кривих» версток;
• заточенность під пошуковики - грамотна верстка це економія грошей на розкрутку сайту і запорука його успішного просування;
• швидкість завантаження сторінки - показник, безпосередньо залежить від чистоти верстки сайту.

Для виділення категорії «якісний верстальник» до знань HTML основ + CSS + базове розуміння JavaScript (Тут ви взагалі на вагу золота) додайте набір індивідуальних якостей: посидючість, скрупульозність, уважність, вміння дружити з дизайном і композицією. Подібний мікс дозволить вам відчувати себе в верстці, як риба в воді.

Станом на грудень 2021 року, кількість інтернет-користувачів становить 4, 66 млрд чоловік або 59,5 % від загальної чисельності населення світу (дані WeAreSocial). Цей показник стрімко збільшується, залучаючи в мережу все більше і більше потенційних споживачів продукту, створюваного верстальником. Зростання попиту на першосортну верстку, ніяк краще говорить про актуальність вивчення напрямки в даний момент.

Крім того, знання базової верстки - це кістяк, який в подальшому дасть можливість обростати новими навичками в IT -индустрия: як в питаннях створення все того ж призначеного для користувача інтерфейсу (новомодне - SPA на базі бібліотеки React JS), так і подальшого розвитку в веб- програмуванні. Як наслідок - розширення ваших перспектив на ринку IT-праці. Все ж має значення, з чого почати, чи не так?

Якщо HTML - це Санта, то теги - його вірні ельфи, по суті, виконують основну роботу. Вони залишаються в тіні, створюючи привабливу і функціональну картинку. Тег - символ розмітки. З його допомогою верстальник описує елементи сайту і надає їм необхідну візуальне оформлення. Він розділить текст на абзаци (<р>) і подасть сигнал браузеру про заголовку (<h1>).

Прописна істина верстальника: слідом за відкривається тегом <...>, повинен бути і закриває </...>. Але і тут бувають винятки у вигляді маркерів, наприклад, вказують на окрему групу, як <br> - пишемо з нового рядка.

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

• <Html> - позначаємо початок документа;
• <Head> - визначаємо місце для назв документа, розміщення тегів для пошукових систем;
• </Head> - тег закриття «голови»;
• <Body> - початок видимої частини;
• </Body> - закриття «тіла» документа;
• </Html> - кінець.

Теги можуть мати властивості звані атрибутами - один або кілька. По суті, вони розширюють їх можливості. В окремих випадках, вони просто необхідні один одному, як з тегом зображення <img>. Без атрибута scr, волають до адресою розміщення картинки, він просто не потрібен.

Остання версія HTML5 налічує понад 100 тегів, не всі з яких підтримуються і використовуються. Чи потрібно знати їх напам'ять? Це те, що однозначно прийде саме з досвідом. На початковому етапі, головне - знати, де підглянути. HTML довідники в допомогу!

В теорії все легко, а як щодо старту в практиці? Не дивуйтеся, все так же просто - HTML розмітка аж ніяк НЕ вибаглива. Для написання коду скористайтеся стандартним редактором «Блокнот», вказавши потрібне розширення файлу при збереженні: * .html. Важливо «розробляти почерк», який полегшує читаність вашої праці. У міру створення структури коду «тег в тезі», вишиковуйте уявну «драбинку». Можливо, на початковому етапі навчання, вам не здасться це принципово важливим: «А мені нормально все в один рядок». Але повірте, таке уявлення коду максимально зручно для роботи.

Курс "Frontend розробка. Junior верстальник"

Хочеш отримати навчання від Олега Дутченка?

На курсі навчимося:

• Верстати складні сайти з адаптивним чуйним дизайном та семантичною версткою
• Працювати з системою контролю версій Git
• Працювати з дизайн макетом у сервісі Figma та з JavaScript
• Працювати з системою контролю версій Git
• Автоматизувати процес розробки та контроль якості
• І ще деплоїти проект у хмарний сервіс

Замовити консультацію

Докладніше про курс

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

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

Усередині працюйте над рівнем професіоналізму, довіряйте «чисті» мізки спецам, які вкладуть у них найцінніше і корисне, структурують і розкладуть по поличках те, що здається незрозумілим.

Провідні веб-розробники Wezom Academy нешуточно налаштовані на прокачку ваших ськиллов в рамках «Курсу верстки (HTML5 + CSS3 + JS)». Це відмінна можливість:

• перейняти досвід майстра своєї справи;
• вивчити можливості HTML і CSS;
• познайомитися з технологіями JavaScript;
• обговорити, переварити і здати іспит (реалізація власного проекту);
• шанс проявити себе і отримати рекомендації для роботодавців в сфері IT.

А самий старанний і талановитий студент забере оплату курсу в 100% розмірі назад. Заманливо?

Не біда, якщо ваш запас знань про HTML, закінчується на його назві. Wezom Academy скоротить число кроків на шляху до HTML-дзену: від стадії «знайомство» до «надійні і міцні відносини». Ще вчора ви тільки милувалися красивою картинкою сайту, а сьогодні вже застосовуєте свої розум і пальчики для створення ресурсу покруче.

Приєднуйтесь до світу мови розмітки і надолужуйте згаяне, верстаючи сторінки сайту!