Як вивчити HTML

HTML - це скорочення від [b]Hyper Text Markup Language (Мова гіпертекстової розмітки), на цій мові створюються сайти. Якщо ви ніколи не програмували, вивчення може здатися складним, але, насправді, все що вам потрібно, щоб почати навчання - це найпростіший текстовий редактор і браузер. Ви дізнаєтеся, яким чином HTML впливає на текст, верстку різних сайтів і так далі. Знання HTML буде вкрай корисним для будь-якого користувача інтернету, і вивчення основ займе менше часу, ніж ви думаєте.




Метод 1 з 2: Вивчення основ HTML

  1. Як вивчити HTML

    1

    Відкрийте файл HTML. Більшість текстових редакторів (Блокнот або Word для Windows, TextEdit для Mac) можуть бути використані для створення файлів HTML. Створіть новий документ, і збережіть його (Файл> Зберегти як) у форматі веб-сторінки, або змініть розширення файлу на ".html" або ".htm" замість ".doc," ". Rtf," або іншого розширення.
    • Може з`явитися попередження, що файл буде збережений як "простий текст", замість формату "rich text", або що форматування і зображення не збережуться. Так і треба-для HTML це й не потрібно.
    • Немає різниці між файлами з розширенням .html і .htm. Будь-який варіант підходить.

  2. Як вивчити HTML

    2

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

  3. Як вивчити HTML

    3

    Вивчіть теги розмітки. Теги не відображаються на сторінці, на відміну від звичайного тексту. Замість цього вони вказують браузеру, яким чином треба відображати сторінку і її вміст. "Відкриваючий тег" містить інструкцію. Наприклад, є тег для [b]напівжирного тексту. Також потрібен "закриває тег", для розмежування сфери застосування інструкції: у цьому прикладі текст між відкриває і закриває тегами відобразиться в напівжирному накресленні. Теги записуються всередині знаків нерівності, але закриває тег починається з косою риси.
    • Відкриває тег записується між знаками нерівності: <</big>Відкриває тег
    • У закриває тезі перед дескриптором (назвою) тега ставиться коса риса: Закриває тег)
    • Читайте далі, щоб дізнатися про використання тегів. Для цього кроку досить запам`ятати формат запису, теги записуються між знаками нерівності: <> і
    • У деяких самовчитель HTML, теги називають "елементами", а текст між відкриває і закриває тегами називають "вмістом елемента".

  4. Як вивчити HTML

    4

    Наберіть в редакторі тег . Кожен файл html повинен починатися з тега і закінчуватися тегом . Ці теги вказують браузеру, що весь вміст між тегами написано на мові HTML. Додайте ці теги в файл:
    • Наберіть [b] вгорі документа.
    • Натисніть enter кілька разів, щоб створити кілька порожніх рядків, потім наберіть [b]
    • Всі приклади з цієї інструкції набираються між цими двома тегами.

  5. Як вивчити HTML

    5

    Створіть секцію у файлі. Між тегами і , створіть відкриває тег [b] і закриває тег [b]. Створіть кілька порожніх рядків між ними. Вміст, записане між тегами і , не відображається на самій сторінці. Виконайте наступні кроки, щоб дізнатися, для чого потрібен цей тег:
    • Між тегами і , напишіть [b] і [b]
    • Між тегами і , напишіть [b]Як вивчити HTML - wikiHow.
    • Збережіть зміни і відкрийте файл в браузері (або обновіть сторінку, якщо файл уже відкритий). Текст повинен відобразитися в назві сторінки, над адресним рядком?

  6. Як вивчити HTML

    6

    Створіть секцію . Всі інші теги і текст у цій прикладі записуються в секцію body, вміст якої відображається на сторінці. Після закриває тега , але до тега , додайте теги [b] і [b]. До кінця цього інструкції працюйте з секцією body. Ваш файл повинен виглядати приблизно так:
    • Як вивчити HTML - wikiHow

  7. Як вивчити HTML

    7

    Додайте текст, використовуючи різні стилі. Настав час додати даний вміст сторінки! Все, що ви напишете між тегами body, відобразиться на сторінці після оновлення в браузері. Не використовуйте символи [b], оскільки браузер спробує інтерпретувати вміст як тег, замість тексту. Напишіть [b]Hello world! (Або що захочете), потім спробуйте додати ці теги до тексту, і подивіться, що вийде:
    • Hello world! виділяє текст "курсивом": Hello world!
    • Hello world! виділяє текст "напівжирним": Hello world!
    • Hello world! закреслює текст: Hello world!
    • відображає шрифт у вигляді верхнього індексу:
    • Hello world! відображає шрифт у вигляді нижнього індексу: Hello world!
    • Спробуйте різні теги разом: Як буде виглядатиHello world!?

  8. Як вивчити HTML

    8

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

    • Це окремий абзац.

    • Після цієї пропозиції слід розрив рядка.
      тег до початку цієї пропозиції.
      Це перший тег, який не потребує закриває тега. Такі теги називаються "порожніми".
    • Створіть заголовки, щоб показати назви розділів:

      текст заголовка

      : Найбільший заголовок

      текст заголовка

       (Заголовок другого рівня)

      текст заголовка

       (Заголовок третього рівня)

      текст заголовка

       (Заголовок четвертого рівня)
      текст заголовка
       (Найменший заголовок)

  9. Як вивчити HTML

    9

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


    • Маркований список:
      • Перший рядок
      • Другий рядок
      • І так далі
    • Нумерований список:
      1. Один
      2. Два
      3. Три
    • Список визначень:
      Кава
      - гарячий напій
      Лимонад
      - холодний напій

  11. Як вивчити HTML

    10

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

  12. Як вивчити HTML

    11

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

Метод 2 з 2: Високий рівень HTML

  1. Як вивчити HTML

    1

    Вивчіть атрибути. Атрибути записуються всередині тега, вказуючи на додаткову інформацію. Формат атрибутів такий: [b]назва = "значення", де [b]назва визначає атрибут ("color", для атрибуту кольору), а значення вказує на його значення (наприклад "red", для червоного кольору).
    • Атрибути насправді вже застосовувалися в попередньому розділі основ HTML. Тег використовує атрибут [b]src, якоря відносних посилань використовують атрибут [b]name, а посилання використовують атрибут [b]href. Як ви вже помітили, всі атрибути записані у форматі [b]___ = "___"?

  2. Як вивчити HTML

    2

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

      Стовпець 1: МісяцьСтовпець 2: Зекономлено грошей
      Січень100 рублів

  3. Як вивчити HTML

    3

    Вивчіть додаткові теги секції head. Ви вже вивчили тег , що йде спочатку кожного файлу html. Крім тега , є й інші теги для цієї секції:
    • Мета-теги, в яких містяться метадані, використовувані пошуковими системами для індексації сайту в своїх каталогах. Щоб ваш сайт легше знаходився в пошукових системах, використовуйте один або кілька відкривають тегів (Закривають теги не потрібні). Використовуйте по одному атрибуту і значенням на тег: - або
    • Теги , провідні на сторонні файли, наприклад - на таблиці стилів (CSS) та іконки (мініатюрні зображення, які відображаються поруч з адресою сайту).
    • Теги

Поради

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

Попередження

  • Деякі теги з плином часу зникають з ужитку, замінюються новими і т.д. Вивчіть цю тему докладніше, і намагайтеся писати тільки якісний, грамотний і сучасний код.
  • Хочете дізнатися, наскільки відповідає написана вами сторінка сучасним специфікаціям? Зайдіть на сайт W3 і перевірте її!

Вам знадобляться

  • Текстовий редактор (Notepad, TextEdit)
  • Папір і письмове приладдя (Необов`язково)
  • HTML-редактор (Notepad ++, TextWrangler) (Необов`язково)