Код шаблону сторінки. З широкою рамкою. Необов'язкові теги в HTML5
Урок «Як створити HTML-сторінку» присвячений верстці найпростішої веб-сторінки. Ви навчитеся правильно зберігати HTML-файл, задавати необхідне кодування для коректного відображення HTML-сторінки в браузері та розміщувати на веб-сторінці тексти, списки, зображення.
Після вивчення цього уроку Ви вже навчитеся створювати першу веб-сторінку як на малюнку 1.
Малюнок 1
1. Структура html-документа
Файли html мають розширення .htmабо .html.
Зазвичай теги парні: початковий та кінцевий теги. Початковий -<>, кінцевий, наприклад
і
Парний тег називають ще контейнерний .
Деякі теги не мають обов'язкового парного тега, такий тег називають одиночний
. Закривається такий тег написанням правого сліша перед кутовою дужкою, що закриває, наприклад
Структура html-документа виглядає так (рисунок 2).
Малюнок 2
Пояснення до лістингу малюнку 2
У першому рядку конструкція DOCTYPE означає один із стандартів верстки веб-сторінки.
Між тегами
і
міститься заголовна частина. До неї входить конструкція
Малюнок 3
Запис означає кодування кирилиці, щоб літери коректно відображалися у браузері. Якщо кодування не прописувати, шрифти іноді можуть відображатися так (рисунок 4)
Малюнок 4
Та ж сторінка після вставки кодування (рисунок 5)
Малюнок 5
Примітка: замість кодування charset="windows-1251"можна використовувати кодування charset=" utf -8" , яка дозволяє створювати мультимовні сайти, тому що всі символи, що існують у світі, в ній присутні. У цьому випадку в Notepad++ необхідно до верстки та збереженняhtml-файла вибрати із верхнього меню Кодування - Кодувати в UTF -8 без BOM (UTF-8 без BOM)
Для створення першого документа цієї інформації достатньо.
Практичне завдання 1
1. Створіть папку, назвіть її myhouse. Імена всіх папок і файлів необхідно створювати латинськими малими літерами, російські назви використовувати не можна. Задавайте імена короткими та смисловими.
Код веб-сторінки будемо писати у Блокноті. Краще користуватися не тим Блокнотом, який йде у постачанні Windows, а більш «просунутим», наприклад, Notepad++. Дистрибутив Notepad++є в папці CD/distr.
2. Відкрийте Notepad ++. Переконайтеся, що кодування ANSI встановлено, для цього в меню в пункті Кодування, встановіть позицію Кодувати в ANSI.
3. Наберіть у Notepad++ код з лістингу малюнку 2.
Код у лістингу малюнку 2 надалі служитиме нам шаблоном, щоб щоразу не набирати структуру html-документа. Конструкцію DOCTYPE скопіюйте звідси (запам'ятовувати та заучувати її не треба).
4. Збережіть файл під назвою shablon.htmlв папці myhouse, при цьому в полі Тип файлувстановіть All types(Малюнок 6), інакше Ваша web-сторінка потім не відкриється в браузері.
Малюнок 6
5. Після збереження запустіть shablon. htmlподвійним клацанням. В результаті Ваш файл буде виглядати так (рисунок 7).
Малюнок 7
Якщо у Вас не вийшов результат, як на малюнку вище, то в коді швидше за все є помилка. Достатньо одного невірного символу і веб-сторінка не відображатиметься коректно. Ще раз звірте код із лістингом на малюнку 2.
6. Усередині папки myhouseстворіть папку public_ html. Таким ім'ям зазвичай називається папка, в якій зберігається сайт при розміщенні на цьому хостингу (також ця папка може називатися www).
7. Збережіть файл shablon. htmlв папці public_ htmlпід новим ім'ям main. html.
8. З папки CD/ html_css_1відкрийте файл text_main.txtу Notepad++, а також відкрийте файл, збережений під ім'ям main. html
9. Скопіюйте весь текст із файлу text_main.txtта вставте у файл main. htmlзамість фрази "Вміст web-сторінки". У тезі
10. Збережіть зміни та перегляньте файл main. htmlу браузері. Ви побачите невідформатований текст. Навіть перенесення рядків, які є у вихідному тексті, браузер не робить (рисунок 8).
Малюнок 8
2. Форматуванняweb-сторінки тегамиHTML
У цьому уроці "Як створити HTML-сторінку" розглядаються основні теги, які використовуються для розмітки веб-сторінки.
Теги призначені для форматування тексту веб-сторінки. Список тегів докладніше можна переглянути в папці CD/ДовідникHTMLу довіднику html401_ua.chm(У верхньому меню пункт елементи).
Розглянемо деякі з тегів.
Елементи h 1, h 2, h 3, h 4, h 5, h 6
Структурування тіла документа виконується всередині елемента < body> за допомогою заголовків, що задаються елементами h1, h2, h3, h4, h5, h6.
Елементи заголовків є парними, тому повинні мати < h1> і закриваючий h1> теги.
HTML має шість рівнів заголовків: h1 (найвищий), h2, h3, h4, h5 і h6 (найнижній). Функції елементів заголовків подібні до звичайних стилів заголовків у текстових редакторах.
Дія цих шести тегів представлена нижче. На одному малюнку вихідний код(Малюнок 9), на іншому - вид у браузері (Малюнок 10).
Малюнок 9
Малюнок 10
Поділ тексту на абзаци
Тег < p> задає початок абзацу та вставляє зверху абзацу відстань - відступ для відокремлення цього абзацу від попереднього.
Примусовий розрив рядка
Тег
дозволяє виконати перенесення частини тексту абзацу, що залишилася, на наступний рядок. Це непарний тег і, на відміну від тега абзацу, не збільшує інтервал між рядками.
Практичне завдання 2
1. Відформатуйте заголовок «Каталог архітектурних проектів» за допомогою тегів
і
.2. Відформатуйте заголовок «Проекти для Вашого майбутнього будинку» за допомогою тегів
і
.3. Відформатуйте заголовки «Проекти будинків» та «Площі будинків» за допомогою тегів
і
.4. Основний текст розділіть на абзаци за допомогою тега
Всередині перших двох абзаців використовуйте тег
для перенесення рядка. У результаті Ваш код має виглядати так (рисунок 11).
5. Перегляньте результат у браузері.
Малюнок 11
Марковані та нумеровані списки
Засобами HTML можна створювати будь-які списки: нумеровані (цифрові та буквені) та марковані з різними типамимаркерів.
Тег < ul>…ul> формує маркований список.
Тег < ol>…ol> формує нумерований перелік.
Окремий елемент списку як у
- , так і в
- Реалізуйте у новому файлі код, наведений малюнку 13.
- Збережіть файл у папці myhouseпід ім'ям spisok_ vlozh. html. Результат на рис. 13
- абсолютна;
- відносна.
- увійти до папки folder_2,
- потім увійти до папки folder_1,
- потім приєднати зображення.
- вийти з теки folder_1,
- вийти з теки folder_2,
- приєднати зображення.
- вийти з теки folder_1,
- вийти з теки folder_2,
- зайти в теку folder_3,
- зайти до папки folder_4,
- приєднати зображення pic.jpg
- вийти з теки folder_1,
- вийти з теки folder_2,
- вийти з теки folder_3,
- увійти до папки folder_4,
- приєднати зображення pic.jpg.
- shablon.html
- main.html
- spisok_vlozh.html
- усередині папкиmyhouseмає бути папкаpublic_ htmlз файлами майбутнього сайту
- сім прикладів на відносну адресацію та два приклади як контрольні з практичного завдання 14
- ключові слова та опис сторінки;
- посилання на інші файли (*.css та *.js).
- формується за допомогою тега <
li>
.
Практичне завдання 3
1. Створіть перелік під заголовком «Проекти будинків».
2. Створіть список маркованих під заголовком «Площі будинків». Ваш код буде виглядати так (рисунок 12).
Малюнок 12
3. Перегляньте сторінку в браузері.
Списки можна вкладати один в одного, використовуючи різні маркери.
Приклад вкладеного списку наведено на рис. 13
Практичне завдання 4
Рисунок 13. Приклад вкладеного списку
Зображення шрифтів
Тег … - дозволяє відобразити текст напівжирним шрифтом.
Тег … - дозволяє відобразити текст у курсивному контурі.
Тег … - Відображає підкреслений текст.
Наприклад:
У цьому випадку текст буде відображено жирним курсивом , але не підкреслено.
А в цьому випадку текст буде написано жирним підкресленим курсивом .
Нижні та верхні індекси
Тег < sub> і sub> дозволяє опустити текст на піврядка нижче звичайного тексту.
Тег < sup> і sup> дозволяє підняти текст на піврядка вище за звичайний текст. Текст, розташований між цими тегами, буде зображуватись меншим шрифтом, порівняно зі звичайним текстом.
Практичне завдання 5
1. Відформатуйте в першому абзаці назву myhouse.ru жирним шрифтом (рисунок 14).
Малюнок 14
2. Відформатуйте у другому абзаці фразу «Понад 95% проектів» підкресленим курсивом (рис. 15).
Малюнок 15
3. Відформатуйте верхні індекси в місцях, де використовуються квадратні метри (рис. 16).
Малюнок 16
4. Збережіть файл. Перегляньте через браузер. Web-сторінка має виглядати так (рисунок 17).
Малюнок 17
3. Вставка зображень
У статті «Як створити HTML-сторінку» ми розглянемо, як розміщувати на веб-сторінці зображення.
Для вставки зображень використовується тег .
Обов'язковим для цього тега є атрибут src(Від англійської SouRCe - джерело). Він визначає шлях до графічного файлу, зображення якого має бути виведено на веб-сторінці.
Для вставки зображення використовується команда 
Наприклад: "
image1.jpg"
alt="Зображення" />
!}
Атрибут alt необхідний для того, щоб під час перегляду web-сторінки в режимі вимкнених зображень, замість відсутньої картинки був напис, який прописаний в атрибуті alt. Також тексти рекомендується використовувати завжди, т.к. пошукові машини аналізують їх як ключові слова під час пошуку зображень.
Графічні файли можуть бути у форматі jpg, gif, png і обов'язково в колірній моделіRGB.
Практичне завдання 6
1. Після списку площ будинків вставте у web-сторінку зображення проектів котеджів project_1.jpgі project_2.jpgз папки CD/html_css_1 . Для цього спочатку скопіюйте ці два зображення в ту папку, в якій розташований файл main.html. Код вставки зображень буде виглядати так (рисунок 18).
Малюнок 18
2. Перегляньте результат у браузері (рисунок 19).
Малюнок 19
В основному принцип використання тегівHTMLмає бути зрозумілим. Вони використовуються за одним і тим же принципом: якщо тег контейнерний, тобто тег, що відкриває і закриває. Якщо тег одиночний, то тега, що закриває, немає, в цьому випадку правий слеш пишеться до закриває кутової дужки, наприклад< br/>. Чи є тег контейнерним або одиночним Ви завжди можете подивитися у специфікаціїhtml401_ua.chm у розділі «елементи».
4. Адресація всередині сайту
У першому уроці «Як створити HTML-сторінку» ми розберемо поняття адресації в HTML.
Розглянемо варіанти адресації, коли у html-файлі треба розмістити зображення, які можуть бути у різних папках сайту.
Існує два види адресації:
Абсолютна адресація (з використанням назв дисків комп'ютера) не використовується(Малюнок 20)
Малюнок 20
Використовується відносна адресація - адресація у межах документа чи сукупності документів одному сервері. Щоб послатися на файл усередині сайту, потрібно вказати браузеру, який шлях він повинен пройти, щоб прийти до потрібного файлу.
|
Приклад 1 Зображення розташоване в одній папці з документом HTML (рисунок 21). Тобто зображення та HTML-файл знаходяться на одному рівні в файловій системіі HTML-документ може одразу приєднати зображення. В цьому випадку вставка зображення у веб-сторінку буде виглядати так.
Малюнок 21 Практичне завдання7 Реалізуйте приклад 1 (створіть папку, файл doc.html, візьміть будь-яке зображення). Зображення |
|
Приклад 2 Зображення pic. jpgзнаходиться в папці folder_1 . HTML-документ розташований поза папки folder_1. Тобто. у файловій системі сайту HTML-документ розташований один рівень вище, ніж зображення (рисунок 22). Необхідно увійти до папки folder_1, потім приєднати зображення
Малюнок 22 Практичне завдання8 Реалізуйте приклад 2 (створіть папку, файл doc.html, візьміть будь-яке зображення). Зображення має бути вставлене на веб-сторінку doc.html. |
|
Приклад 3 Зображення pic. jpgзнаходиться в папці folder_1 , яка у свою чергу лежить у папці folder_2 . HTML-документ розташований поза цих папок (рисунок 23). Таким чином, HTML-документ розташований на два рівні вище, ніж зображення. Необхідно:
Малюнок 23 Практичне завдання9 Реалізуйте приклад 3 (створіть папки, doc.html, візьміть будь-яке зображення). Зображення має бути вставлене на веб-сторінку doc.html. |
|
Приклад 4 folder_1 . Зображення знаходиться поза папкою folder_1. Тобто. HTML-документ розташований один рівень нижче, ніж зображення (рисунок 24). Необхідно вийти з папки folder_1, а потім приєднати зображення. Вихід із папки позначається конструкцією ../ (Дві точки і слеш вправо).
Малюнок 24 Практичне завдання10 Реалізуйте приклад 4 (створіть папку, файл doc.html, візьміть будь-яке зображення). Зображення має бути вставлене на веб-сторінку doc.html. |
|
Приклад 5 HTML-документ знаходиться в папці folder_1 , яка у свою чергу знаходиться в папці folder_2 . Зображення знаходиться поза цими папками. Таким чином, HTML-документ розташований на два рівні нижче, ніж зображення (рисунок 25). Необхідно: Так як треба вийти двічі, то і конструкція ../ повторюється двічі.
Малюнок 25 Практичне завдання 11 Реалізуйте приклад 5 (створіть папки, doc.html, візьміть будь-яке зображення). Зображення має бути вставлене на веб-сторінку doc.html. |
|
Приклад 6 (Малюнок 26) Необхідно:
Малюнок 26 Практичне завдання 12 Реалізуйте приклад 6 (створіть папки, doc.html, візьміть будь-яке зображення). Зображення має бути вставлено у web-сторінку doc.html. |
|
приклад 7 (Малюнок 27) Необхідно: Так як вийти треба тричі, то і конструкція ../ повторюється тричі.
Малюнок 27 Практичне завдання 13 Реалізуйте приклад 7 (створіть папки, файл doc.html, візьміть будь-яке зображення). Зображення має бути вставлено у web-сторінку doc.html. Таким чином, скільки разів треба вийти, стільки разів ставимо конструкцію../, а якщо заходимо, то перераховуємо імена папок, що зустрічаються на шляху. |
/
>
/
>
/
>
Практичне завдання 14
1. Створіть html-документ і вставте зображення, щоб шлях до зображення був наступним.
"
../../../../../../folder_1/folder_2/folder_3/image.jpg" /
>
2. Розробіть власний приклад вставки зображення в html-документ, щоб він містив і вихід з папок, та Вхід у папки. Приклад повинен відрізнятися від усіх наведених вище прикладів.
В результаті виконання цієї теми, у Вас мають бути створені такі файли:
Придумано безліч мов, але мова HTML належить до особливих і найбільш затребуваних. З ним пов'язано багато інших ключових починань у програмуванні. Багато чого стає доступним, коли у свідомості розробника є знання мови розмітки - HyperText Markup Language (HTML).
По суті, в HTML немає нічого складного, і через кілька хвилин будь-яка, найдальша від програмування та інтернету людина, виконає створення HTML-сторінки в блокноті. Приклад, що заслуговує на увагу, простота, дійсно, доступна кожному.
Загальний опис
Файл HTML - це одна сторінка сайту, хоча з цим можна посперечатися, але те, що один файл складає одну сторінку, спочатку зрозуміло.
Файл HTML починається із заголовка DOCTYPE, в якому зазначено, що тип файлу - HTML. Усі елементи сторінки (теги) вказуються у кутових дужках. Кожна пара («<» и «>») включає один тег HTML. Зазвичай теги HTML парні, тобто на кожен "tag" є "/tag". Обидва полягають у кутові дужки. Є одиночні теги, з них найпопулярніший «br/» - перехід на наступний рядок.
Найбільший тег у файлі - це сам HTML, до якого входять лише два теги: HEAD і BODY. У першому робляться різні описи, вказуються посилання інші потрібні сторінці файли, можуть бути присутніми скрипти PHPта JavaScript. У другому записується контент сторінки. Також у вигляді тегів та скриптів.
Проста HTML-сторінка
Приклад створення такої сторінки наведено нижче у статті. Розглянемо його уважно.
Розділ HEAD
Основне призначення - Загальний описсторінки та загальних скриптів, хоча останнє – досить відносне поняття. Зазвичай тут надають істотне значення лише двом речам:
Для відображення контенту сторінки вміст цього розділу має непряме значення, оскільки вказує: десь в інших файлах є правила CSS для тегів та скрипти інших мов.
HTML-сторінка має відображається, коли відвідувач підводить мишку до вкладки, де сторінка відкрита. Це важливий момент, оскільки робить сторінку значно більш презентабельною, простіше сказати, підписаною читабельним текстом.
META-теги мають важливе значення в інтернет-програмуванні взагалі, але коли потрібне створення HTML-сторінки в блокноті, приклад небажано захаращувати зайвими конструкціями.
Якщо до скриптів слід підходити, коли знання про HTML зміцняться, на каскадні таблиці стилів слід звернути увагу негайно. У файлах CSS наводяться, зокрема, правила оформлення тегів HTML.
Розділ BODY
Власне приклад сторінки HTML - це і є розділ BODY. Саме тут міститься вся інформація, весь контент сторінки сайту. Вся інформація подається у вигляді тегів та скриптів, наприклад вставки JavaScript-коду або шматочків PHP-програм.
Важливо розуміти, що приклад веб-сторінки HTML у браузері і той же приклад у текстовому редакторі, зокрема notepad, це далеко не одне й те ж саме. У першому випадку ми маємо готовий HTML-текст, де всі скрипти виконані. Наприклад, PHP відпрацював свою частину і сформував замість свого коду у потрібних місцях потрібні теги. JavaScript теж виконав свою місію, хоча про нього ще належить окрема розмова.
HTML – це теги, а не скрипти. Зрештою у браузері відображається лише контент сторінки, лише її теги. Жодного PHP-коду там немає.
JavaScript знаходиться на особливому положенні, його турбота - обслуговувати сторінку не тільки в момент завантаження (перевантаження), але й у моменти, коли сторінка знаходиться у браузері відвідувача, а той вивчає її.
Простий приклад (тільки розділ BODY) наведено нижче.
А у браузері відвідувача він виглядає так, як показано далі.
У коді не було зазначено, як мають виглядати елементи, які вивів браузер. Все видиме оформлення міститься у правилах CSS. В даному випадку у файлі Mcss/scPhpWordRW.css, на який було посилання (див. перший приклад сторінки HTML).
На відміну від HTML, тема CSS більш проста, там дуже доступні правила та їх кількість невелика, коли приклад створення HTML-сторінки не вимагає нічого, крім notepad. Все дуже доступне для моментального освоєння:
Тут показано, як просто описаний тег scLogo_vDoc, причому цей опис такий, що в нормальному стані тег відображає картинку vDoc-logo.png, а коли над ним знаходиться мишка – відображається vDoc-logo-h.png.
Структура описів HTML
Мова не передбачає будь-якої структури та поняття синтаксису тут дуже відносне. Тут немає змінних, але є безліч можливостей. Принципова основа гіпертексту полягає в тому, що існує елемент (тег) який обов'язково має ім'я.
Ім'я, у разі парного тега, складається з власне імені (tagName) та кутових дужок («<» + tagName +«>»), якщо мова йдепро початок тега, і «», якщо записується його кінець.
Приклад сторінки HTML з описом атрибутів наведено нижче в тексті.
Тег може мати атрибути, тоді вони поміщаються через пробіл після імені тега до кутової дужки «>», що закриває. Атрибути, якщо вони мають тег, записуються тільки на його початку. Змістом тега вважається те, що знаходиться між початком тега та його кінцем.
HTML дозволяє описувати блокові та малі елементи. Перші займають певну область у вікні браузера, можуть абсолютно позиціонуватися, тобто в потрібному місці області відображення HTML-сторінки, і мати конкретний розмір.
Рядкові елементи в загальному випадку відображаються одним потоком, тобто так, як вказані у файлі сторінки, так і виводяться на екран. На відображення загального потоку можна впливати, коли відбувається завантаження сторінки. На розміщення, видимість та інші властивості блокових елементів можна впливати будь-коли за допомогою JavaScript-коду.
Крім простих елементів, HTML пропонує описувати таблиці та форми. Ці елементи дуже потрібні в «повсякденному сайтобудуванні».
Опис таблиці: теги TABLE, TR, TD
За допомогою тега TABLE можна створити таблицю, вказати кілька рядів TR і в кожному ряду якась кількість комірок TD. На відміну від звичної табличної організації, внаслідок особливостей HTML-розмітки, таблична організація обмежується даною декларацією, тому якщо розробник бажає мати прямокутну таблицю, в якій кількість колонок по всіх рядах однакова, він повинен за цим стежити самостійно.
Принципова позиція HTML: робити все, що вказано, але нічого з того, що не зрозуміло. У деяких випадках не настільки важлива кількість колонок у кожному рядку таблиці, але якщо потрібно виконати об'єднання осередків по вертикалі або по горизонталі, доведеться порахувати все дуже уважно.
Приклад сторінки HTML із описом простої таблиці наочно показано у статті.
Тут показана таблиця розміром три ряди на три колонки, причому в першому ряду замість тегу TD використали тег TH - заголовок колонки. Особливої відмінності ці два теги не мають, але використовувати перший можна, щоб відрізнити перший ряд таблиці, та й у CSS до TH можна прикріпити власний стиль, що вигідно відрізняє його від інших TD.
Опис форми: теги FORM, INPUT
Форми - це найпопулярніша частина HTML-тегів. З допомогою форм можна передавати інформацію. Власне, сама сторінка – це виведення інформації, а ось форма – її введення.
Приклад сторінки HTML із описом простої форми:
Варіантів використання форм набагато більше, але основні можливості такі. Можна вказати поля введення, призначити їм потрібно оформлення та обробники для аналізу даних, що вводяться користувачем. Можна вказати приховані поля та надсилати зі сторінки фонову інформацію. Можна позначити кнопки передачі, натискання на які ініціює процес передачі відомостей.
Використання HTML
Знати мову гіпертексту – роботи з будь-якої спеціалізації в галузі інтернет-програмування, але якщо необхідно писати програми на PHP або JavaScript, то знати HTML+CSS потрібно досконало.
Мова PHP була позначена в попередньому прикладі. PHP працює на сервері, тому сторінка з цією формою відлетіла з сервера в браузер із заповненими полями. Зокрема, функція TestOnBlur, згадана у тегу INPUT (обробник події onblur), отримала всі параметри у вигляді текстових полів.
У браузері працює JavaScript, і щоб правильно спрацювала кнопка відправки даних назад на сервер, тобто конструкція: onclick=jQuery("#to").val("cart"), необхідно мати уявлення не тільки про те, що таке jQuery, але і що таке #to, val, cart. Якщо точніше, необхідно знати основні теги HTML та загальні правилазастосування до них стилів CSS.
Цього цілком достатньо, щоб швидко підняти свою кваліфікацію з будь-якої спеціалізації в галузі інтернет-програмування.
Здрастуйте, шановні читачі блогу. З цієї статті ми почнемо вивчати базу мови HTML.
Вам швидше за все вже відомо, що основною мовою Інтернету є мова гіпертекстової розмітки HTML (HyperText Markup Language). У цій статті ми дізнаємося про базові поняття HTML і навчимося створювати найпростіші WEB-сторінки.
Почнемо з найголовнішого, розглянемо як працює сама Всесвітня павутина- Internet. Для отримання веб-сторінок ви створюєте файли, написані мовою HTML, і поміщаєте їх на веб-сервер. Після цього будь-який браузер встановлений на пристрої з доступом до Інтернету, комп'ютер, телефон або планшет, може відшукати ваші веб-сторінки.
Веб-сервер- це звичайний комп'ютер зі спеціальним програмним забезпеченням, що має доступ до Інтернету. Він безперервно чекає на запити від браузерів на веб-сторінки, зображення, аудіо- та відео-файли. Отримавши запит на один із таких ресурсів, сервер шукає його та надсилає браузеру.
Браузер- це спеціальна програма, призначена для перегляду веб-сайтів, наприклад Internet Explorer. За допомогою браузера ви ходите по сайтах, клацаючи на посилання. Будь-яке таке клацання змушує браузер зробити запит на html-сторінку web-серверу, отримати відповідь і відобразити сторінку у своєму вікні. Саме при відображенні сторінки починає працювати мова HTML, він повідомляє браузеру все про структуру та вміст web-сторінки. За допомогою команд - тегів HTML вказує браузеру, де починаються абзаци тексту, яка частина тексту є заголовком і вказує куди вставляти таблиці, і навіть картинки. А теги це слова у кутових дужках, наприклад
,
