кроки

2. Відкрийте створений файл в браузері. Збережіть порожній файл, знайдіть його на комп`ютері і відкрийте подвійним клацанням миші. У браузері повинна відкритися порожня сторінка. Якщо цього не відбулося, перетягніть файл в адресний рядок вашого браузера. У процесі редагування HTML-файлу ви зможете оновлювати цю сторінку, щоб подивитися зміни.

3. Зрозумійте, що таке теги розмітки. На відміну від звичайного тексту, теги не відображаються на сторінці. Замість цього вони вказують браузеру, яким чином відображати сторінку і її вміст. «Хто відкриває» тег містить інструкцію. Наприклад, він може повідомляти браузеру, що текст повинен відображатися як напівжирний. Також потрібен «закриває» тег, який показує браузеру, де закінчується дія інструкції. В даному прикладі текст між відкриває і закриває тегами відобразиться в напівжирному зображенні. Теги записуються всередині знаків нерівності, але закриває тег починається з косою риси.

4. Наберіть в редакторі тег . Кожен файл HTML повинен починатися з тега і закінчуватися тегом . Ці теги вказують браузеру, що весь вміст між тегами написано на мові HTML. Додайте ці теги в свій документ:

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

6. створіть секцію . Всі інші теги і текст в цьому прикладі записуються в секції body, вміст якої відображається на сторінці. після закриває тега, але до тегадобавьте теги і . До кінця цієї статті працюйте з секцією body. Ваш файл повинен виглядати приблизно так:








7. Додайте текст, використовуючи різні стилі. Настав час додати даний вміст сторінки! Все, що ви напишете між тегами body, відобразиться на сторінці після поновлення в браузері. Не використовуйте символи < або >, оскільки браузер спробує інтерпретувати вміст як тег замість тексту. Напишіть Всім привіт! (Або що захочете), потім спробуйте додати ці теги до тексту і подивіться, що вийде:

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

9. Навчіться створювати списки. Є кілька способів створення списків на веб-сторінці. Спробуйте наведені нижче варіанти і вирішите, який вам більше подобається. Зверніть увагу, що одна пара тегів потрібна для списку в цілому (наприклад

і

для маркованого списку), а кожен елемент списку виділяється іншою парою тегів, наприклад

• Маркований список:
  

• перший рядок
• Другий рядок
• І так далі

10. Зверстати сторінку, використовуючи розриви рядків, горизонтальні лінії, і картинки. Настав час додати на сторінку щось крім тексту. Спробуйте наступні теги або перейдіть по посиланнях, щоб отримати більше інформації. Використовуйте онлайн-хостинг для створення посилання на картинку, яку ви хочете розмістити:

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

2. Експериментуйте з таблицями HTML. Створення таблиці припускає використання різних тегів. Ви можете поекспериментувати, або прочитати більш детальну інструкцію.

3. Вивчіть додаткові теги секції head. Ви вже вивчили тег , що йде спочатку кожного файлу html. Крім тега

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

5. Розпочніть вивчення більш докладних посібників. В інтернеті є багато сайтів, присвячених тегам HTML, наприклад W3Schools або HTMLbook. У продажу є і паперові книги, але постарайтеся знайти актуальне видання, оскільки стандарти змінюються і розвиваються. Ще краще освоїти CSS, щоб в набагато більшому ступені контролювати розмітку і зовнішній вигляд сайту. Після вивчення CSS Вебдизайнер зазвичай вивчають jаvascript.

• Notepad ++ - відмінна безкоштовна програма, схожа на звичайний Блокнот, але ви можете зберігати і тестувати свій код в браузері в онлайн-режимі. (Вона також підтримує практично будь-яку мову - HTML, CSS, Python, jаvascript і так далі).
• Знайдіть в мережі якусь просту сторінку, збережіть код до себе на комп`ютер і поекспериментуйте з ним. Спробуйте перемістити текст, змінити шрифт, замінити зображення - все що завгодно!
• Ви можете завести блокнот, куди будете записувати теги, щоб завжди мати їх під рукою. Також можете роздрукувати цю сторінку і звірятися з нею.
• Коли ви пишете код, робіть це акуратно, щоб і ви, і інші люди могли його зрозуміти. Іспользуйтедля коментарів в HTML: вони не будуть відображатися на сторінці, але буде видно в документі з кодом.
• XML і RSS знаходять все більшу популярність. Код сайти можуть містити матеріали технології XML і RSS, недосвідченому користувачу складніше прочитати і зрозуміти, але ці інструменти дуже корисні.
• Теги розмітки в HTML не залежать від регістра, проте рекомендується використовувати тільки малі літери (як в прикладах в цій статті) - як з метою стандартизації, так і для сумісності з XHTML.

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

• Текстовий редактор, наприклад Блокнот (Windows) або TextEdit (Mac)
• Папір / блокнот (не обов`язково)
• HTML-редактор, наприклад Notepad ++ (Windows) або TextWrangler (Mac) (не обов`язково)