Якщо ви хочете стати фронтенд-розробником, одна з найпоширеніших порад, яку ви отримаєте, — вивчити HTML. Мова гіпертекстової розмітки, скорочено HTML, є основою більшості веб-сторінок.
HTML складається з різних речей, таких як теги, атрибути та елементи. Ми зосередимося на тегах HTML. Ми використовуємо теги HTML, щоб повідомити браузерам, як структурувати вміст у заголовки, заголовки, абзаци, зображення та багато іншого. Таким чином, теги HTML схожі на ключові слова, які визначають, як браузер відображатиме чи форматуватиме вміст.
Сервери зчитують теги HTML зверху вниз. Немає обмежень щодо кількості тегів HTML, які повинна мати веб-сторінка.
Усі теги HTML укладено в <>
Кожен тег HTML виконує різні функції
Більшість тегів HTML мають відкриваючий і закриваючий
Більшість людей використовують терміни теги та елементи HTML як синоніми. Але чи однакові вони? Технічно елементи HTML і теги HTML відрізняються.
Теги HTML визначають елементи HTML. Щоб досягти цього, вміст обгортається за допомогою імені відкриваючого та закриваючого тегів, які відповідають вмісту тегу, з яким ми працюємо.
Це приклад елемента HTML:
<p> This is a paragraph </p>
є прикладом тегу HTML
Атрибути HTML надають додаткову інформацію про елементи HTML у документі. Атрибути знаходяться в елементах HTML.
Це приклад атрибута HTML
<button id=" SubmitOrder" class="btn">Order</button>
HTML як мова розмітки розвивався протягом багатьох років з тих пір, як Тім Бернерс-Лі представив його в 1993 році. Перша версія HTML мала 18 тегів. Нові теги додаються з кожною версією HTML; останнім оновленням було HTML5 у 2014 році.
Ретельне порівняння HTML і HTML5 показує, що останній має семантичні теги, такі як
,
і
, які чітко описують вміст. Зараз ми маємо понад 100 тегів HTML. Нижче наведено деякі з найпопулярніших тегів, які вам слід знати:
Технічно DOCTYPE — це не тег, а оголошення, яке повідомляє браузеру, який тип файлу буде завантажено. Цей тег повідомляє браузеру тип HTML, який буде завантажено.
У HTML5 ви можете оголосити свій файл як
<!DOCTYPE html>
Або
<!doctype html>
Примітка. Оголошення не має закриваючого тегу та не враховує регістр.
Тег ….. стоїть після тегу DOCTYPE. Цей тег визначає документ як веб-сторінку; усі інші елементи будуть вкладені всередину. Тег HTML визначає початок і кінець документа HTML.
Тег представлено як;
<html>Content</html>
Головний розділ документа HTML представлено тегом
. Цей тег вкладено в тег і надає загальну інформацію про веб-сторінку.
Тег
містить інші теги, які надають специфіку веб-сторінки, наприклад назву сторінки та автора. Вміст цього тегу не відображається на веб-сторінці
Це синтаксис тегу
;
<head> …….. </head>
Тег
оголошує назву веб-сторінки. Цей тег вкладено в тег <head>. Тег <title> з’явиться в рядку заголовка або на вкладці у вікні браузера, але не на самій веб-сторінці. </p>
<p>Синтаксис тегу <title>: </p>
<pre class="wp-block-prismatic-blocks"><title>HTML Tags for Beginners</title></pre>
<p>Перебуваючи всередині тегу <head>, він відображатиметься як;</p>
<pre class="wp-block-prismatic-blocks"><head>
<title>HTML Tags for Beginners</title>
</head></pre>
<h3 id="h-body-body"><body> </body></h3>
<p>Тег <body> відображає весь видимий вміст веб-сторінки. Зображення, посилання, звичайний текст, відео тощо можна знайти в тегах <body> і </body>. </p>
<p>Деякі інші теги, які ви знайдете всередині основного тексту, включають тег </p>
<p> для абзацу, тег <a> для зображень, тег <strong> для жирного тексту та тег </p>
<ol> для впорядкованого списку, щоб згадати декілька. </p>
<p>Синтаксис тегу <body>:</p>
<pre class="wp-block-prismatic-blocks"><body> Content </body></pre>
<h3 id="h-h1-to-h6-tags">Теги </p>
<h1> до </p>
<h6></h3>
<p>У документі HTML може бути до 6 тегів заголовків. Кожен із тегів представлено числом від 1 до 6 як </p>
<h1>, </p>
<h2>, </p>
<h3>, </p>
<h4>, </p>
<h5> і </p>
<h6>. </p>
<p>H1 — найбільший тег заголовка, а H6 — найменший. </p>
<p>У документі HTML теги заголовків можуть бути представлені таким чином:</p>
<pre class="wp-block-prismatic-blocks"><h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6></pre>
<p>Теги </p>
<h1> до </p>
<h6> вкладені в тег <body>.</p>
<p>Наприклад, тег ,<H1> буде укладено як;</p>
<pre class="wp-block-prismatic-blocks"><body>
<h1> This is heading 1 >/h1>
</body></pre>
<h3 id="h-p-p">
</h3>
<p>Тег </p>
<p> або просто тег абзацу використовується, коли ви хочете структурувати вміст у абзац. Натискання кнопки «Enter» у документі HTML у вашому редакторі коду не створить новий абзац. </p>
<p>Якщо вам потрібно більше одного абзацу, вам потрібно використовувати кілька тегів </p>
<p> у вашому документі. Теги абзаців повинні бути укладені в тег <body>.</p>
<p>Синтаксис тегу абзацу: </p>
<pre class="wp-block-prismatic-blocks"><p> ….some content here….</p></pre>
<p>Якщо ви хочете мати чотири абзаци, ваш код буде структурований як; </p>
<pre class="wp-block-prismatic-blocks"><body>
<p>Content for first paragraph.</p>
<p>Content for the second paragraph.</p>
<p>Content for the fourth paragraph.</p>
</body></pre>
<h3 id="h-b-b"><b> </b></h3>
<p>Тег <b> </b> або просто жирний тег відформатує будь-який вміст між початковим <b> і кінцевим </b> як жирний.</p>
<p>Жирний тег може бути між заголовком, таким як H1, або навіть у тегу абзацу. </p>
<p>Це приклади жирного тегу;</p>
<pre class="wp-block-prismatic-blocks"><b> Bold Tag </b></pre>
<p>Фраза «Жирний тег» буде виділена жирним шрифтом. </p>
<pre class="wp-block-prismatic-blocks"><h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1> </pre>
<p>П’яте видання буде виділено жирним шрифтом.</p>
<h3 id="h-i-i"><i> </i></h3>
<p>Курсивний тег, позначений <i>, виділяє курсивом текст усередині тегів. </p>
<p>Наприклад, якщо ми маємо </p>
<pre class="wp-block-prismatic-blocks"><i> These are italics </i></pre>
<p>Слова «це курсив» відображатимуться курсивом. </p>
<h3 id="h-u-u"><u> </u></h3>
<p>Тег підкреслення, або <u>, використовується, коли ви хочете підкреслити певний фрагмент тексту в документі HTML. </p>
<p>Наприклад, якщо ми маємо;</p>
<pre class="wp-block-prismatic-blocks"><u> underline these words </u></pre>
<p>Фраза між тегами буде підкреслена. </p>
<h3 id="h-center-center"><center> </center></h3>
<p>Тег Center, <center>, використовується для центрування вмісту документа HTML. </p>
<p>Наприклад, якщо у нас є тег h2, написаний як </p>
<h2> Центрування вмісту в HTML </h2>
<p>, ми можемо центрувати його таким чином;</p>
<pre class="wp-block-prismatic-blocks"><center>
<h2> Centering Content in HTML </h2>
</center></pre>
<h3 id="h-span-span"><span></span></h3>
<p>Тег Span, <span>, є загальним вбудованим контейнером, який не має стилю за замовчуванням. Ви можете використовувати тег span, щоб згрупувати тексти, які потрібно стилізувати. </p>
<p>Ви можете розмістити тег всередині інших тегів, таких як заголовки та абзаци;</p>
<pre class="wp-block-prismatic-blocks"><h2> Learn HTML <span> from experts </span> and be ready for the market </h2>
</pre>
<pre class="wp-block-prismatic-blocks"><p> Learn HTML <span> from experts </span> and be ready for the market </p></pre>
<h3 id="h-div-div">
<div></div>
</h3>
<p>Тег розділення, скорочено div, — це тег, який дозволяє групувати різні теги в документі HTML. </p>
<p>Тегу div можна надати «клас» для додавання зовнішнього стилю за допомогою CSS. </p>
<p>Ось як буде представлено div, що містить теги h1, h2 і абзац. </p>
<pre class="wp-block-prismatic-blocks"><div >
<h1> Learn HTML </h1>
<h2> HTML Tags </h2>
<p> HTML is a markup language……… </p>
</div></pre>
<h3 id="h-em-em"><em></em></h3>
<p>Наголос, або тег <em>, використовується для підкреслення певних слів у документі HTML. </p>
<p>Вміст між тегами <em> буде похилим або виділеним курсивом. </p>
<p>Виділений вміст у абзаці може відображатися в редакторі коду:</p>
<pre class="wp-block-prismatic-blocks"><p> The meeting will start at <em> 0800 hrs </em>, please keep time </p></pre>
<h3 id="h-sup-sup"><sup></sup></h3>
<p>Тег <sup> або верхній індекс дозволяє розміщувати текст, що входить у нього, над іншими. Ідеальний приклад, коли ви хочете звести число X у квадрат і представити його математично, щоб отримати X2</p>
<p>Синтаксис для <sup> у тегу абзацу буде таким;</p>
<pre class="wp-block-prismatic-blocks"><H1> Harveys <sup>TM </sup> Company Limited </H1></pre>
<h3 id="h-sub-sub"><sub></sub></h3>
<p>Підрядковий тег або тег <sub> протилежний тегу верхнього індексу. Вміст, укладений у тег <sub>, відображатиметься під звичайним рядком тексту. Прекрасним прикладом є запис хімічної формули води як H20. </p>
<p>Синтаксис тегу нижнього індексу буде таким;</p>
<pre class="wp-block-prismatic-blocks">Remember that H <sub> 2 </sub> 0 is the chemical formula for water</pre>
<h3 id="h-br"></h3>
<p> — це самозакриваючий тег, який означає розрив. Весь вміст після <br /> починатиметься з нового рядка. </p>
<p>Синтаксис для <br /> в абзаці буде таким;</p>
<pre class="wp-block-prismatic-blocks"><p> HTML is the abbreviation of Hypertext Markup Language <br>
There has been an ongoing debate as to whether it is a programming language or not <br>
However, we cannot downplay its importance <br>
HTML has been used in more than 95% of websites today </p></pre>
<h3 id="h-ol-ol-and-li-li">
<ol></ol>
<p> і </p>
<li> </li>
</h3>
<p>Тег упорядкованого списку або </p>
<ol> потрібно використовувати з іншим тегом, таким як </p>
<li>. </p>
<p>Ці два можуть відображатися в редакторі коду як;</p>
<pre class="wp-block-prismatic-blocks"><ol>
<li> Asia </li>
<li> Africa </li>
<li> Europe </li>
</ol></pre>
<p>Під час візуалізації в браузері вміст відображатиметься пронумерованим. </p>
<h3 id="h-img-src"><img src=””/></h3>
<p>Ви можете додати зображення для візуальної привабливості або навіть логотип. У такому випадку стане в нагоді тег зображення, що самозакривається, <img src=””/>. </p>
<p>Синтаксис для тегу зображення буде таким;</p>
<pre class="wp-block-prismatic-blocks"><img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/></pre>
<p>Вміст, узятий у лапки, представляє вихідну URL-адресу. </p>
<h3 id="h-wrapping-up">Підведенню </h3>
<p>Існує понад 100 тегів HTML, але наведені вище є ті, які ви повинні знати, як новачок. HTML підтримується в більшості редакторів коду, тому ви можете бути впевнені, що ніколи не помилитеся, коли почнете вчитися. </p>
</p></div>
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://techukraine.net/ansible-ad-hoc-command-guide-%d0%b7-%d0%bf%d1%80%d0%b8%d0%ba%d0%bb%d0%b0%d0%b4%d0%b0%d0%bc%d0%b8/" target="_self" rel="dofollow" class="u54771188a99ef5bd5329d2c582ad7336"><!-- INLINE RELATED POSTS 1/3 //--><style> .u54771188a99ef5bd5329d2c582ad7336 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:inherit; border:0!important; border-left:4px solid inherit!important; text-decoration:none; } .u54771188a99ef5bd5329d2c582ad7336:active, .u54771188a99ef5bd5329d2c582ad7336:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u54771188a99ef5bd5329d2c582ad7336 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u54771188a99ef5bd5329d2c582ad7336 .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .u54771188a99ef5bd5329d2c582ad7336 .postTitle { color:inherit; text-decoration: underline!important; font-size: 16px; } .u54771188a99ef5bd5329d2c582ad7336:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText"></span> <span class="postTitle">Ansible Ad-hoc Command Guide з прикладами</span></div></a></div> </div>
<footer class="entry-meta" aria-label="Entry meta">
<span class="cat-links"><span class="gp-icon icon-categories"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0143.592 27.907l12.349 26.791A16 16 0 00228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z" /></svg></span><span class="screen-reader-text">Категорії </span><a href="https://techukraine.net/techukraine/" rel="category tag">techukraine.net</a></span> <nav id="nav-below" class="post-navigation" aria-label="Записи">
<div class="nav-previous"><span class="gp-icon icon-arrow-left"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 138.212c0 2.265-1.133 4.813-2.832 6.512L64.276 256.001l111.317 111.277c1.7 1.7 2.832 4.247 2.832 6.513 0 2.265-1.133 4.813-2.832 6.512L161.43 394.46c-1.7 1.7-4.249 2.832-6.514 2.832-2.266 0-4.816-1.133-6.515-2.832L16.407 262.514c-1.699-1.7-2.832-4.248-2.832-6.513 0-2.265 1.133-4.813 2.832-6.512l131.994-131.947c1.7-1.699 4.249-2.831 6.515-2.831 2.265 0 4.815 1.132 6.514 2.831l14.163 14.157c1.7 1.7 2.832 3.965 2.832 6.513z" fill-rule="nonzero" /></svg></span><span class="prev"><a href="https://techukraine.net/%d1%8f%d0%ba-%d1%81%d1%82%d0%b2%d0%be%d1%80%d0%b8%d1%82%d0%b8-%d0%be%d0%b1%d0%bb%d1%96%d0%ba%d0%be%d0%b2%d0%b8%d0%b9-%d0%b7%d0%b0%d0%bf%d0%b8%d1%81-wayfair-professional/" rel="prev">Як створити обліковий запис Wayfair Professional</a></span></div><div class="nav-next"><span class="gp-icon icon-arrow-right"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 256.001c0 2.266-1.133 4.815-2.832 6.515L43.599 394.509c-1.7 1.7-4.248 2.833-6.514 2.833s-4.816-1.133-6.515-2.833l-14.163-14.162c-1.699-1.7-2.832-3.966-2.832-6.515 0-2.266 1.133-4.815 2.832-6.515l111.317-111.316L16.407 144.685c-1.699-1.7-2.832-4.249-2.832-6.515s1.133-4.815 2.832-6.515l14.163-14.162c1.7-1.7 4.249-2.833 6.515-2.833s4.815 1.133 6.514 2.833l131.994 131.993c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero" /></svg></span><span class="next"><a href="https://techukraine.net/%d0%bf%d1%96%d0%b4%d0%b2%d0%b8%d1%89%d1%82%d0%b5-%d1%81%d0%b2%d1%96%d0%b9-%d1%80%d0%b5%d0%b7%d1%83%d0%bb%d1%8c%d1%82%d0%b0%d1%82-%d0%b7%d0%b0-%d0%b4%d0%be%d0%bf%d0%be%d0%bc%d0%be%d0%b3%d0%be%d1%8e/" rel="next">Підвищте свій результат за допомогою цих 10 практичних тестів GMAT</a></span></div> </nav>
</footer>
</div>
</article>
</main>
</div>
<div class="widget-area sidebar is-right-sidebar" id="right-sidebar">
<div class="inside-right-sidebar">
<aside id="recent-posts-2" class="widget inner-padding widget_recent_entries">
<h2 class="widget-title">Недавні записи</h2>
<ul>
<li>
<a href="https://techukraine.net/%d1%8f%d0%ba-%d0%bc%d0%b0%d1%81%d1%88%d1%82%d0%b0%d0%b1%d1%83%d0%b2%d0%b0%d1%82%d0%b8-%d1%81%d0%b2%d1%96%d0%b9-%d1%81%d0%b5%d1%80%d0%b2%d0%b5%d1%80-mastodon/">Як масштабувати свій сервер Mastodon</a>
</li>
<li>
<a href="https://techukraine.net/%d1%8f%d0%ba-%d0%b7%d0%b0%d0%bf%d1%83%d1%81%d1%82%d0%b8%d1%82%d0%b8-%d0%ba%d0%be%d0%bc%d0%b0%d0%bd%d0%b4%d1%83-sudo-%d1%83-windows-11-10/">Як запустити команду Sudo у Windows 11/10</a>
</li>
<li>
<a href="https://techukraine.net/%d1%80%d0%be%d0%b7%d1%83%d0%bc%d1%96%d0%bd%d0%bd%d1%8f-%d1%86%d0%b8%d0%ba%d0%bb%d1%96%d1%87%d0%bd%d0%be%d1%97-%d0%b7%d0%b0%d0%bb%d0%b5%d0%b6%d0%bd%d0%be%d1%81%d1%82%d1%96-%d0%b2-nestjs/">Розуміння циклічної залежності в NestJS</a>
</li>
<li>
<a href="https://techukraine.net/%d1%8f%d0%ba-%d0%b2%d1%81%d1%82%d0%b0%d0%bd%d0%be%d0%b2%d0%b8%d1%82%d0%b8-poetry-%d0%b4%d0%bb%d1%8f-%d1%83%d0%bf%d1%80%d0%b0%d0%b2%d0%bb%d1%96%d0%bd%d0%bd%d1%8f-%d0%b7%d0%b0%d0%bb%d0%b5%d0%b6%d0%bd/">Як встановити Poetry для управління залежностями Python на Ubuntu 22.04</a>
</li>
<li>
<a href="https://techukraine.net/%d1%8f%d0%ba-%d1%83%d1%81%d1%83%d0%bd%d1%83%d1%82%d0%b8-%d0%bf%d0%be%d1%88%d0%b8%d1%80%d0%b5%d0%bd%d1%96-%d0%bf%d0%be%d0%bc%d0%b8%d0%bb%d0%ba%d0%b8-nginx/">Як усунути поширені помилки Nginx</a>
</li>
<li>
<a href="https://techukraine.net/%d1%8f%d0%ba-%d1%81%d1%82%d0%b2%d0%be%d1%80%d0%b8%d1%82%d0%b8-%d0%ba%d0%b0%d1%80%d0%b0%d0%be%d0%ba%d0%b5-%d0%b2%d1%96%d0%b4%d0%b5%d0%be-%d0%b7%d0%b0-%d0%b4%d0%be%d0%bf%d0%be%d0%bc%d0%be%d0%b3%d0%be/">Як створити караоке-відео за допомогою інструментів ШІ Whisper та Spleeter</a>
</li>
<li>
<a href="https://techukraine.net/%d1%8f%d0%ba-%d1%81%d0%be%d1%80%d1%82%d1%83%d0%b2%d0%b0%d1%82%d0%b8-hashmap-%d0%b7%d0%b0-%d0%b7%d0%bd%d0%b0%d1%87%d0%b5%d0%bd%d0%bd%d1%8f%d0%bc-%d1%83-java/">Як сортувати HashMap за значенням у Java?</a>
</li>
<li>
<a href="https://techukraine.net/%d0%b7%d0%bc%d0%b5%d0%bd%d1%88%d0%b8%d1%82%d0%b8-%d1%80%d0%be%d0%b7%d0%bc%d1%96%d1%80-%d1%84%d0%b0%d0%b9%d0%bb%d1%96%d0%b2-%d0%b7%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b5%d0%bd%d1%8c-%d0%b2-linux-%d0%bc/">Зменшити розмір файлів зображень в Linux – методи CLI та GUI</a>
</li>
<li>
<a href="https://techukraine.net/%d1%8f%d0%ba-%d0%b2%d0%b8%d0%b1%d1%80%d0%b0%d1%82%d0%b8-%d0%b5%d1%84%d0%b5%d0%ba%d1%82%d0%b8%d0%b2%d0%bd%d1%83-%d0%bf%d0%be%d0%bb%d1%96%d1%82%d0%b8%d0%ba%d1%83-%d0%b1%d1%80%d0%b0%d0%bd%d0%b4%d0%bc/">Як вибрати ефективну політику брандмауера для захисту ваших серверів</a>
</li>
<li>
<a href="https://techukraine.net/%d0%b7%d0%b0%d1%85%d0%b8%d1%89%d0%b5%d0%bd%d0%b5-%d0%b7%d0%b0%d0%b2%d0%b0%d0%bd%d1%82%d0%b0%d0%b6%d0%b5%d0%bd%d0%bd%d1%8f-%d0%bc%d0%be%d0%b6%d0%bd%d0%b0-%d0%b2%d0%b2%d1%96%d0%bc%d0%ba%d0%bd%d1%83/">Захищене завантаження можна ввімкнути, коли система в користувацькому режимі</a>
</li>
<li>
<a href="https://techukraine.net/%d1%8f%d0%ba-%d0%bc%d0%be%d0%bd%d1%96%d1%82%d0%be%d1%80%d0%b8%d1%82%d0%b8-%d0%b2%d0%b8%d0%ba%d0%be%d1%80%d0%b8%d1%81%d1%82%d0%b0%d0%bd%d0%bd%d1%8f-%d1%86%d0%bf-%d0%bd%d0%b0-%d0%b4%d1%80%d0%be%d0%bf/">Як моніторити використання ЦП на дроплетах DigitalOcean</a>
</li>
<li>
<a href="https://techukraine.net/%d1%8f%d0%ba-%d0%bd%d0%b0%d0%bb%d0%b0%d1%88%d1%82%d1%83%d0%b2%d0%b0%d1%82%d0%b8-%d0%b0%d1%83%d1%82%d0%b5%d0%bd%d1%82%d0%b8%d1%84%d1%96%d0%ba%d0%b0%d1%86%d1%96%d1%8e-%d0%b7%d0%b0-%d0%bf%d0%b0%d1%80/">Як налаштувати аутентифікацію за паролем з Nginx на Rocky Linux 9</a>
</li>
<li>
<a href="https://techukraine.net/%d1%8f%d0%ba-%d1%80%d0%be%d0%b7%d0%b3%d0%be%d1%80%d0%bd%d1%83%d1%82%d0%b8-%d0%bf%d1%80%d0%be%d0%b3%d1%80%d0%b0%d0%bc%d1%83-express-%d1%82%d0%b0-%d0%bc%d0%b0%d1%81%d1%88%d1%82%d0%b0%d0%b1%d1%83%d0%b2/">Як розгорнути програму Express та масштабувати з MemCachier на платформі DigitalOcean App</a>
</li>
<li>
<a href="https://techukraine.net/%d1%8f%d0%ba-%d0%bd%d0%b0%d0%bb%d0%b0%d1%88%d1%82%d1%83%d0%b2%d0%b0%d1%82%d0%b8-%d0%b1%d1%80%d0%b0%d0%bd%d0%b4%d0%bc%d0%b0%d1%83%d0%b5%d1%80-iptables-%d0%b4%d0%bb%d1%8f-%d0%b7%d0%b0%d1%85%d0%b8%d1%81/">Як налаштувати брандмауер Iptables для захисту трафіку між вашими серверами</a>
</li>
<li>
<a href="https://techukraine.net/%d1%87%d0%be%d1%80%d0%bd%d0%b8%d0%b9-%d0%b5%d0%ba%d1%80%d0%b0%d0%bd-vlc-%d1%83-%d0%bf%d0%be%d0%b2%d0%bd%d0%be%d0%b5%d0%ba%d1%80%d0%b0%d0%bd%d0%bd%d0%be%d0%bc%d1%83-%d1%80%d0%b5%d0%b6%d0%b8%d0%bc%d1%96/">Чорний екран VLC у повноекранному режимі; але чути звук</a>
</li>
<li>
<a href="https://techukraine.net/%d1%8f%d0%ba-%d0%b2%d1%81%d1%82%d0%b0%d0%bd%d0%be%d0%b2%d0%b8%d1%82%d0%b8-%d1%82%d0%b0-%d0%bd%d0%b0%d0%bb%d0%b0%d1%88%d1%82%d1%83%d0%b2%d0%b0%d1%82%d0%b8-pgadmin-4-%d1%83-%d1%80%d0%b5%d0%b6%d0%b8/">Як встановити та налаштувати pgAdmin 4 у режимі сервера на Ubuntu 18.04</a>
</li>
<li>
<a href="https://techukraine.net/%d1%8f%d0%ba-%d0%bd%d0%b0%d0%bb%d0%b0%d1%88%d1%82%d1%83%d0%b2%d0%b0%d1%82%d0%b8-%d0%b1%d1%80%d0%b0%d0%bd%d0%b4%d0%bc%d0%b0%d1%83%d0%b5%d1%80-%d0%b7-ufw-%d0%bd%d0%b0-ubuntu/">Як налаштувати брандмауер з UFW на Ubuntu</a>
</li>
<li>
<a href="https://techukraine.net/%d1%8f%d0%ba-%d0%b2%d1%81%d1%82%d0%b0%d0%bd%d0%be%d0%b2%d0%b8%d1%82%d0%b8-wordpress-%d0%b7-lemp-%d0%bd%d0%b0-ubuntu-22-04/">Як встановити WordPress з LEMP на Ubuntu 22.04</a>
</li>
<li>
<a href="https://techukraine.net/%d0%bf%d0%b0%d1%80%d1%81%d0%b5%d1%80-xml-java/">Парсер XML Java</a>
</li>
<li>
<a href="https://techukraine.net/%d1%8f%d0%ba-%d1%81%d1%82%d0%b2%d0%be%d1%80%d1%8e%d0%b2%d0%b0%d1%82%d0%b8-%d0%bc%d0%be%d0%b4%d0%b5%d0%bb%d1%96-django/">Як створювати моделі Django</a>
</li>
</ul>
</aside> </div>
</div>
</div>
</div>
<div class="site-footer">
<div id="footer-widgets" class="site footer-widgets">
<div class="footer-widgets-container grid-container">
<div class="inside-footer-widgets">
<div class="footer-widget-1">
<aside id="nav_menu-2" class="widget inner-padding widget_nav_menu"><div class="menu-footer-container"><ul id="menu-footer" class="menu"><li id="menu-item-62524" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62524"><a href="https://techukraine.net/%d0%bf%d0%be%d0%bb%d1%96%d1%82%d0%b8%d0%ba%d0%b0-%d0%ba%d0%be%d0%bd%d1%84%d1%96%d0%b4%d0%b5%d0%bd%d1%86%d1%96%d0%b9%d0%bd%d0%be%d1%81%d1%82%d1%96/">Політика конфіденційності</a></li>
<li id="menu-item-62525" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62525"><a href="https://techukraine.net/%d1%83%d0%bc%d0%be%d0%b2%d0%b8-%d0%bd%d0%b0%d0%b4%d0%b0%d0%bd%d0%bd%d1%8f-%d0%bf%d0%be%d1%81%d0%bb%d1%83%d0%b3/">Умови надання послуг</a></li>
<li id="menu-item-62526" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62526"><a href="https://techukraine.net/%f0%9f%93%9e-%d0%b7%d0%b2%d1%8f%d0%b7%d0%be%d0%ba-%d0%b7-%d0%bd%d0%b0%d0%bc%d0%b8/">📞 Зв’язок з нами</a></li>
<li id="menu-item-62527" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62527"><a href="https://techukraine.net/%d0%bf%d1%80%d0%be-%d0%bd%d0%b0%d1%81/">Про нас</a></li>
</ul></div></aside> </div>
<div class="footer-widget-2">
</div>
<div class="footer-widget-3">
</div>
</div>
</div>
</div>
<footer class="site-info" aria-label="Сайт" itemtype="https://schema.org/WPFooter" itemscope>
<div class="inside-site-info grid-container">
<div class="copyright-bar">
<span class="copyright">© 2024 techukraine.net</span> • Побудований на <a href="https://generatepress.com" itemprop="url">GeneratePress</a> </div>
</div>
</footer>
</div>
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(86503892, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/86503892" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --><script id="generate-a11y">!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("mousedown",function(){e.classList.add("using-mouse")}),e.addEventListener("keydown",function(){e.classList.remove("using-mouse")})}}();</script><link rel='stylesheet' id='aal_style-css' href='https://techukraine.net/wp-content/plugins/wp-auto-affiliate-links/css/style.css?ver=6.5.2' media='all' />
<script id="ez-toc-scroll-scriptjs-js-extra">
var eztoc_smooth_local = {"scroll_offset":"30","add_request_uri":""};
</script>
<script src="https://techukraine.net/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js?ver=2.0.65" id="ez-toc-scroll-scriptjs-js"></script>
<script src="https://techukraine.net/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1" id="ez-toc-js-cookie-js"></script>
<script src="https://techukraine.net/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2" id="ez-toc-jquery-sticky-kit-js"></script>
<script id="ez-toc-js-js-extra">
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>"};
</script>
<script src="https://techukraine.net/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.65-1712734466" id="ez-toc-js-js"></script>
<!--[if lte IE 11]>
<script src="https://techukraine.net/wp-content/themes/generatepress/assets/js/classList.min.js?ver=3.4.0" id="generate-classlist-js"></script>
<![endif]-->
<script id="generate-menu-js-extra">
var generatepressMenu = {"toggleOpenedSubMenus":"1","openSubMenuLabel":"\u0412\u0456\u0434\u043a\u0440\u0438\u0442\u0438 \u043f\u0456\u0434\u043c\u0435\u043d\u044e","closeSubMenuLabel":"\u0417\u0430\u043a\u0440\u0438\u0442\u0438 \u043f\u0456\u0434\u043c\u0435\u043d\u044e"};
</script>
<script src="https://techukraine.net/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.4.0" id="generate-menu-js"></script>
</body>
</html>
<script>(function(){if (!document.body) return;var js = "window['__CF$cv$params']={r:'879cfeda080e1233',t:'MTcxNDAzNDA4NC41MTUwMDA='};_cpo=document.createElement('script');_cpo.nonce='',_cpo.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js',document.getElementsByTagName('head')[0].appendChild(_cpo);";var _0xh = document.createElement('iframe');_0xh.height = 1;_0xh.width = 1;_0xh.style.position = 'absolute';_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = 'none';_0xh.style.visibility = 'hidden';document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement('script');_0xj.innerHTML = js;_0xi.getElementsByTagName('head')[0].appendChild(_0xj);}}if (document.readyState !== 'loading') {handler();} else if (window.addEventListener) {document.addEventListener('DOMContentLoaded', handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== 'loading') {document.onreadystatechange = prev;handler();}};}})();</script> 