Основи HTML містять основні правила мови HTML, опис структури HTML-сторінки, відносини у структурі HTML-документа між HTML-елементами.

HTML-документ - це звичайний текстовий документ, що може бути створений як у звичайному текстовому редакторі (Блокнот), так і в спеціалізованому, з підсвічуванням коду (Notepad++, Visual Studio Code і т.п.). HTML-документ має розширення.html.

HTML-документ складається з дерева HTML-елементів та тексту. Кожен елемент позначається у вихідному документі початковим (відкриває) і кінцевим (закриває) тегом (за рідкісним винятком).

Початковий тег показує де починається елемент, кінцевий де закінчується. Тег, що закриває, утворюється шляхом додавання слеша / перед ім'ям тега: … . Між початковим та закриваючим тегами знаходиться вміст тега – контент.

Одиночні теги не можуть зберігати вміст безпосередньо, він прописується як значення атрибута, наприклад, тег створить кнопку з текстом Кнопка всередині.

Теги можуть вкладатися один в одного, наприклад,

Текст

. При вкладенні слід дотримуватися порядку їх закриття (принцип «матрьошки»), наприклад, наступний запис буде неправильним:

Текст

.

HTML-елементи можуть мати атрибути (глобальні, які застосовуються для всіх HTML-елементів, та власні). Атрибути прописуються у тезі елемента і містять ім'я і значення, що вказуються у форматі ім'я атрибута="значення" . Атрибути дозволяють змінювати властивості та поведінку елемента, для якого вони задано.

Кожному елементу можна надати кілька значень class і лише одне значення id . Множинні значення class записуються через пропуск, . Значення class та id повинні складатися лише з літер, цифр, дефісів та нижніх підкреслень і повинні починатися лише з літер чи цифр.

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

Процес інтерпретації (парсинг) починається, перш ніж веб-сторінка повністю завантажена в браузер. Браузери обробляють HTML-документи послідовно, від початку, обробляючи CSS і співвідносячи таблиці стилів з елементами сторінки.

HTML-документ і двох розділів - заголовка — між тегами … і змістовної частини — між тегами … .

Структура веб-сторінки 1. Структура HTML-документа

Мова HTML дотримується правил, які містяться у файлі оголошення типу документа (Document Type Definition, або DTD). DTD є XML-документом, що визначає, які теги, атрибути та їх значення дійсні для конкретного типу HTML. Для кожної версії HTML є власний DTD.

DOCTYPE відповідає за коректне відображення веб-сторінки браузером. DOCTYPE визначає не тільки версію HTML (наприклад, html), але й відповідний файл DTD в Інтернеті.

...

Елементи, що знаходяться всередині тега, утворюють дерево документа, так звану об'єктну модель документа, DOM (document object model). У цьому елемент є кореневим елементом.

Мал. 1. Найпростіша структура веб-сторінки

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

Предок - елемент, який містить у собі інші елементи. На малюнку 1 предком всім елементів є . У той же час елемент є предком для всіх тегів, що містяться в ньому: ,

, , і т.д.

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

Є нащадком одночасно для і.

Батьківський елемент - елемент, пов'язаний з іншими елементами нижчого рівня, і що знаходиться на дереві вище за них. На малюнку 1 та . Тег

Є батьківським лише для .

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

І є дочірніми стосовно .

Сестринський елемент - елемент, що має загальний батьківський елемент із аналізованим, так звані елементи одного рівня. На малюнку 1 і елементи одного рівня, так само як і елементи , і

Є між собою сестринськими.

1.1. Елемент 1.2. Елемент

Розділ ... містить технічну інформацію про сторінку: заголовок, опис, ключові слова для пошукових машин, кодування і т.д. Введена інформація не відображається у вікні браузера, проте містить дані, які вказують браузеру, як слід обробляти сторінку.

1.2.1. Елемент

Обов'язковим тегом розділу є тег. Текст, розміщений усередині цього тега, відображається у рядку заголовка веб-браузера. Довжина заголовка повинна бути не більше 60 символів, щоб повністю поміститися у заголовку. Текст заголовка повинен містити максимально повний опис вмісту веб-сторінки.

1.2.2. Елемент

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

Опис вмісту сторінки та ключові слова одночасно можна вказувати кількома мовами, наприклад, російською та англійською:

За допомогою тега можна заборонити або дозволити індексацію веб-сторінки пошуковими машинами:

Для автоматичного перезавантаження сторінки через проміжок часу потрібно скористатися значенням refresh:

Сторінку буде перезавантажено через 30 секунд. Щоб перекинути відвідувача на іншу сторінку, потрібно вказати URL-адресу у параметрі url:

Область заголовка Web-сторінки. Іншими словами, її перша частина. Так само, як і попередній елемент, HEAD служить для формування загальної структури документа. Цей елемент може мати атрибути lang та dir.

< title >

Елемент для розміщення заголовка веб-сторінки. Рядок тексту, розташований усередині цього елемента, відображається не в документі, а в заголовку вікна браузера. Цей елемент дуже впливає просування у пошуковій системі т.к. пошукові системи приділяють особливу увагу тег TITLE. Моя порада: ніколи не робите дуже довгий текст у цьому тегу ( 65 символів достатньо).

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

< body >

Цей елемент поєднує в собі гіпертекст, який визначає власне Web-сторінку. Це та видима частина документа, яку розробляє сторінки авто і яка відображається браузером. Відповідно, кінцевий тег цього елемента треба шукати наприкінці Web-сторінки. Всередині BODY можна використовувати всі елементи, призначені для дизайну Web-сторінки. Всередині початкового тегу елемента BODY можна розмістити багато атрибутів, які служать для встановлення всієї сторінки. Розглянемо їх у порядку.

Один з найкорисніших атрибутів даного тега, який впливає на дизайн сторінки.

background="шлях до файлу фону"

Простіше оформлення фону зводиться до завдання його кольору

bgcolor="#FFFFFF"

Колір фону визначається трьома дворозрядними шістнадцятковими числами, які визначають інтенсивність червоного, зеленого і синього кольорів (rbg).

Так як можна змінити фон сторінки можна змінити колір тексту. Для цього є наступний атрибут

text=» #RRGGBB»

Для завдання кольору тексту гіперпосилань використовується наступний атрибут

link="#RRGGBB"

Можна також вказати зміну кольору для останнього вибраного користувачем гіперпосилання

Елемент заголовка. Розрізняють шість рівнів заголовків, які позначаються так.
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок

Заголовок рівня 1 найбільший, а рівень 6 забезпечує найменший заголовок. Для заголовків можна використовувати атрибут, що визначає вирівнювання вліво, по центру або вправо:

align="left" align="center" align="right"

Для створення нового абзацу використовується тег

А для переходу на новий рядок без створення абзацу – тег
тобто відбувається перенесення. Ці теги закривати необов'язково. Звичайно, якщо Ви не використовуєте тег

Елемент ALIGN, яким може задавати вирівнювання абзацу:

Ліворуч

По центру

Праворуч

Текст між цими елементами вирівнюється по ширині

Горизонтальна лінія ( horizontal rule) - дуже поширений елемент. По-перше, тому що за його допомогою дуже легко та зручно ділити сторінку на частини. По-друге, тому що вибір подібних елементів оформлення автора сторінки дуже невеликий. Елемент не має кінцевого тега, але має ряд атрибутів для вирівнювання вліво, по центру, праворуч, шириною:

• align = "left"
• align = "center"
• align = "right"
• align = "justify"

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

Довільний текст

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

Для вставки зображень ( картинки) HTML документ використовується наступний тег ( представлений повний опис атрибутів даного тега):

Списки

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

Найпоширенішим є ненумерований список ( unordered list). Він представлений нижче:

• Пункт 1 списку
• Пункт 2 списку
• Пункт 3 списку

Елемент ul є своєрідним виділенням списку. Він дає змогу розділяти один список від іншого. Елемент liпозначає кожен із пунктів.

Таблиці

Є одним із найнеобхідніших засобом форматування даних на Web-сторінці. Основна зручність полягає в тому, що браузер промальовування усієї таблиці бере на себе. Розмір рамки може бути автоматично узгоджений з розміром вікна перегляду в браузері і, зрозуміло, з розміром рядків тексту та малюнків, що знаходяться в комірках таблиці. Крім того, таблиці дозволяють вирішувати багато дизайнерських завдань: вирівнювати частини сторінки один щодо одного, розміщувати поруч малюнки і текст, керувати колірним оформленням і так далі. При створенні таблиць застосовується принцип вкладення: всередині основного елемента таблиці (TABLE) створюється ряд елементів, що визначають рядки (TR), а всередині цих елементів розташовуються елементи для опису кожної комірки у рядку (ТD, ТН).

Щоб розібратися у структурі існуючої таблиці чи розробити нову таблицю, є одне правило, що послідовність елементів описує таблицю зверху донизу і праворуч наліво. Наприклад, якщо після елемента TABLE вказано елемент TR, це вказує на те, що починається опис нового рядка таблиці. Все, що розташоване за цим елементом, буде розміщено в одному рядку (справа ліворуч). Це може бути послідовність елементів TD ( осередків), інша таблиця тощо. Після того, як з'явиться новий елемент TR, почнеться опис наступного рядка і т. д. до кінця таблиці (тега).
Таблицю можна вирівняти по горизонталі за допомогою атрибуту align:

• align = "left" - вліво;
• align = "center" - по центру;
• align = "right" - вправо.

Ширину таблиці можна встановити точно у пікселях або у відсотковому відношенні до ширини сторінки у вікні браузера. Наприклад: width=400 або width=50%

Для керування видом рамки використовуються два атрибути. Справа в тому, що браузер створює зображення рамки, імітуючи її тривимірність ( опуклість) за допомогою відмінності у освітленості граней

Сценарії

Практично всі web-майстри хочуть, щоб їхні сторінки на сайті мали сучасний вигляд, були багатофункціональними, красивими та динамічними. Стандартними засобами HTML це неможливо, тому застосовують різні засоби: аплети, об'єкти, каскадні таблиці стилів і так далі. Але найпопулярнішим і найпоширенішим видом ( прийомом) є використання сценаріїв.

Сценарій — це програмний код, який включається до тексту сторінки як вихідний текст і виконується браузером під час перегляду сторінки. Сценарій може бути написаний мовою JavaScript, розробленою фірмою Netscape, або Visual Basic Script ( VBScript), розробленому фірмою Microsoft.

Даний тег дозволяє відокремити текст програми сценарію від іншої інформації сторінки. Тег SCRIPT обов'язково включає атрибут language, який визначає мову і може приймати наступні значення:

• javascript - код мовою JavaScript;
• vbscript – код на мові VBScript.

Атрибут type також може вказувати на тип мови, хоча його застосування не є обов'язковим. Щоб не порушувати всіх правил, всередині елемента можна помістити таке визначення:

type=»text/javascript»

Однією з найприкольніших особливостей сценаріїв є можливість зміни вмісту сторінки в результаті виконання програми. Але це лише особливість, а не правило. За допомогою атрибута defer (який не набуває жодних значень) можна «сказати» браузеру, що таких змін не внесено. У деяких випадках це дозволяє прискорити завантаження сторінки.

Зі стандартних атрибутів можна використовувати атрибут charset.

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

—
—
—

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

—
—
—
- Просто сценарій
—
- alert («Ви написали свій перший сценарій!»)
—
—
—
—

Це проста сторінка, але вона включає сценарій з одного рядка. За допомогою методу alert перед завантаженням виводиться повідомлення. І воно висітиме доти, доки користувач не натисне на кнопку ОК, завантаження не буде продовжено.
Можливий випадок, наприклад, сторінка, буде переглядатися в браузері, що не підтримує сценаріїв, для цього передбачений елемент NOSCRIPT. Сучасні програми перегляду ігнорують його вміст. Цей елемент можна використати кількома способами. Для початку, всередині нього можна показати оголошення на кшталт наступного: « Ваш браузер не може виконати сценарій, необхідний для перегляду цієї веб-сторінки!» По-друге, всередині елемента можна розробити спрощену версію сторінки без скриптів. По-третє, можна створити посилання інший HTML-документ. Елемент NOSCRIPT повинен обов'язково мати кінцевий тег.

Ось ми з Вами розглянули основи такої мови WEB-програмування як HTML. Навіть після прочитання цієї невеликої статті Ви вже маєте уявлення, і навіть можливість програмувати цією мовою. Бажаю удачі!

HTML - мова розмітки гіпертексту, який зробив інтернет таким, яким ми його знаємо та любимо. Саме завдяки цьому чудовому інструменту сайти виглядають красиво та сучасно, а також забезпечується зручність їх використання. Мова HTML просто компонує елементи веб-сторінки у зручний для користувача варіант. Його робота можна порівняти з тим, що роблять типу MS Word або OpenOffice. Вони перетворюють безлику масу букв на документ, у якому є абзаци, жирний текст, курсив, таблиці і навіть зображення. Приблизно те саме робить мову HTML, з тією лише різницею, що його документи відображаються в браузері, та й можливості цього інструменту набагато ширші, ніж у текстового редактора. Для розмітки використовуються теги – спеціальні команди, які описують структуру веб-сторінки. Вони укладені в кутові дужки - щоб браузер міг відрізнити їх від загальної маси тексту. Далі ми розглянемо основи HTML для початківців.

Візуальні редактори

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

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

Теги

Як згадувалося, теги описують браузеру структуру веб-сторінки. Більшість з них мають тег, що відкриває і закриває, але далеко не всі. Наприклад, ... де замість точок знаходиться вміст. Перший показує, де починається тег, а другий закриває його. Усередині можуть бути інші елементи розмітки сторінки, вони можуть вкладатися один в одного подібно до матрьошки. Тут важливо закривати теги, щоб сторінка відображалася коректно.

Трапляються також поодинокі теги, які не потрібно закривати. У них вміст знаходиться всередині, так само як і може бути прописаний для більшості HTML-тегів і задає властивості елемента. Позначається він у тезі, що відкриває, і виглядає приблизно так: атрибут=«...», де замість точок знаходиться значення атрибута. Знання тегів є першим та найважливішим кроком для освоєння HTML. Основи цього мистецтва також мають на увазі розуміння структури веб-сторінки.

Структура документа

Кожен документ HTML має відповідне розширення, наприклад Index.html. Так браузер зможе зрозуміти, із чим він має справу, і правильно відобразить сторінку. Всі файли, які використовуються для створення сайту, бажано зберігати в одній директорії, що надалі суттєво полегшить вам життя. Основи мови розмітки гіпертексту HTML припускають чітке розуміння структури документа. Починається він з тега, що повідомляє браузеру версію HTML, яка використовується в цьому документі. На даний момент актуальна п'ята версія мови, так що тут не потрібно нічого вигадувати, можна сміливо вставляти наведений вище тег на початок будь-якої сторінки.

Потім йдуть основні парні структури, що становлять «скелет» сайту. Перший тег, в який вкладені всі інші ... Все, що знаходиться за його межами, не розпізнається браузером як веб-сторінка, так що він відкриває документ і закриває його. Цей тег є обов'язковим для будь-якого документа. У ньому також містяться ще кілька обов'язкових тегів, які будуть розглянуті нижче.

Head

Всередині тега ... міститься інформація технічного характеру, яка не відображатиметься на сторінці, але є важливою частиною документа HTML. Основи сайту закладаються саме в цьому місці, тут вибирається кодування та вводиться назва сторінки. Він міститься всередині обов'язкового тега .... Відображається назва у верхній частині браузера, де також можна розмістити невелику іконку, що характеризує вміст сторінки. Бажано одразу вказати кодування документа для його коректного відображення. Це можна зробити за допомогою тега. Метатеги надають дані про структуру сторінки і зазвичай розміщуються всередині head.

Link

Знання основ HTML також передбачає використання каскадних стилів оформлення або css. Вони визначають властивості елементів, які будуть відображені на сторінці. Сучасний підхід до цієї задачі передбачає винесення таких характеристик, як колір, висота та розташування елемента, у зовнішній файл для більшої зручності. Для підключення файлу css використовується тег . У готовому вигляді це виглядає приблизно так: , де href вказує на місце розташування файлу, а type - на його тип.

Body

Саме у цій частині HTML-документа створюється видима частина сторінки. Все, що робиться всередині тіла, буде показано браузером. У використовується величезна кількість тегів HTML. Основи – це форматування тексту, робота з посиланнями та найпростіші інструменти для структурування веб-сторінки. Щоб розпочати роботу в HTML, достатньо знати основні теги та вміти ними користуватися. Нижче наведені найпопулярніші з них:

• - застосовується виділення підрядки, яку буде поширюватися особливий стиль, описаний в css;
• - Створює посилання на веб-сторінці; адреса переходу задається атрибутом href;
• - один із найпопулярніших тегів сучасності; кожен, хто вирішив вивчити основи мови HTMLl, повинен приділити йому особливу увагу, оскільки це блоковий елемент, на основі якого зроблено левову частку сучасних сайтів (параметри для блоків задаються в css, і всередині цього тегу можуть розташовуватися інші блоки);

• Виділяє абзац із тексту; вміст абзацу знаходиться між тегами, що відкривають і закривають;

• - нумерований список, елементи якого полягають у парний тег
• - маркований список, в якому, як і в нумерованому, елементи позначаються тегом
  • - заголовки документа (цифра позначає рівень заголовка, тобто головний заголовок, а наступні варіанти є його підзаголовками, до речі, заголовки рівнів, майже неможливо зустріти на просторах інтернету), також важливо пам'ятати, що на сторінці може бути лише один заголовок;
  • - жирний текст;
  • - курсив;
  • - вставка картинки на інтернет сторінку (це одиничний тег, що йому не потрібно закриває, але в ньому обов'язково потрібно вказати атрибут alt, в якому вказується текст для зображення);
  • - Вставка відео на веб-сторінку;
  • - тег, який вставляє в документ аудіо файл.

  Це далеко не всі теги, необхідні для створення власної веб-сторінки, але їх достатньо, щоб закласти основи HTML для початківців.

  CSS

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

  

  Застосування CSS

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

  Або , написавши лише одне правило. Враховуючи сучасні вимоги до зовнішнього вигляду веб-сторінок, використання каскадних таблиць стилів є обов'язковим.

  Щоб підключити файл css до документа, існує тег link. Трохи вище був описаний принцип його використання, але він не єдиний варіант об'єднання всіх стилів в одному місці. Є ще тег , який знаходиться в «голові» документа і дозволяє прописати стилі, не використовуючи файли CSS. Не обов'язково користуватися або одним методом або іншим. Їх можна успішно комбінувати для отримання найкращого результату. Для створення файлу з таблицями стилів потрібно створити файл із розширенням .css, наприклад, Styles.css.

  JavaScript

  Нерідко людина, яка вирішила зайнятися, розуміє, що для її завдань недостатньо тих засобів, які пропонує HTML. Основи дозволять створити гарну сторінку, але що робити, якщо раптом знадобилося зробити її інтерактивною? Для цього існує унікальний програмування, який чудово взаємодіє з HTML. Називається він JavaScript, тому що замислювався як молодший брат популярної мови Java. Сьогодні ці мови набули істотних відмінностей, і прірва між ними тільки зростає.

  

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

  Редактори

  Основи HTML для новачка припускають знання про найбільш зручні та практичні програми для створення веб-сторінок. Як було написано вище, візуальні редактори, такі як Dreamweaver і подібні до нього, не підходять для цих цілей. Так що ж, писати теги у звичайному блокноті? Цей варіант також сумнівний, оскільки стандартний блокнот не має ніяких спеціальних інструментів для верстки. З цим завданням може непогано впоратися Notepad ++. Великий плюс цього продукту полягає в тому, що він має відкритий код і поширюється абсолютно безкоштовно. У ньому є зручне підсвічування синтаксису і автоматичне закриття тегів. Notepad++ також пропонує широкий вибір мов інтерфейсу, а його можливості легко розширюються за допомогою численних доповнень.

  

  Sublime Text 3 — програма, схожа на Notepad++, але яка розповсюджується на платній основі. Саме вона підкорила серця більшості розробників. Sublime Text 3 ідеально підходить для JavaScript, CSS та HTML. Основи роботи з нею доведеться вивчати самостійно, але воно того варте. У ній закладено воістину безмежні можливості для тонкого налаштування, що дозволяє максимально підігнати програму під свої потреби.

  Основи HTML та CSS для початківців

  Як бачите, вивчити мистецтво створення веб-сторінок не так і складно, як здається на перший погляд. Всього кілька місяців практичних занять перетворять вас з боязкого користувача на розробника-початківця. Навчитися верстці набагато простіше, ніж освоїти якусь мову програмування чи Linux. Насправді тегів HTML не так багато, важливо зрозуміти практичний аспект їх застосування.

  

  Не зайвим у цій справі буде досвід роботи в Adobe Photoshop. Ця програма дозволяє працювати з фотографіями, зображеннями та іншими графічними елементами веб-сторінки. На даний момент саме "Фотошоп" найкраще справляється із такими завданнями, конкурентів у нього небагато. Для тих, кому цей продукт компанії Adobe припав не до вподоби, є Lightroom, GIMP, Illustrator та інші програми зі схожими функціями.

  Що дає знання HTML

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