Зміст

• Крок
• Частина 1 з 2: Вивчення основ HTML
• Частина 2 з 2: Вивчення розширеного HTML
• Поради
• Попередження
• Потреби

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

Крок

Частина 1 з 2: Вивчення основ HTML

1. Відкрийте документ HTML. Більшість програм обробки текстів, включаючи Блокнот або Word для Windows і Текстовий редактор для Mac, можна використовувати для створення HTML-документів. Відкрийте новий документ і виберіть "Файл"> "Зберегти як" у верхньому меню, щоб зберегти документ як веб-сторінку, або змінити розширення файлу з ".doc", ".rtf" або будь-чого іншого на ".html" або ".htm ".
   • Тепер ви можете побачити попередження про те, що ваш документ змінюється з формату Rich Text Format (RTF) на формат "звичайного тексту", а також, що деякі параметри форматування та зображення не зберігаються належним чином. Ви можете ігнорувати це попередження; Документи HTML не використовують ці параметри.
   • Файли .html та .htm однакові. Це обидва працює.
2. Перегляньте документ за допомогою браузера. Збережіть порожній документ, закрийте його, а потім двічі клацніть документ у місці, де його було збережено, щоб знову відкрити. Тепер ваш документ повинен відкриватися браузером як порожня веб-сторінка. Якщо це не допомогло, перетягніть піктограму файлу в адресний рядок веб-переглядача. Пізніше, якщо ви відредагуєте свій HTML-документ, дотримуючись кроків, описаних у цій статті, ви продовжуватимете повертатися до браузера, щоб перевірити, як виглядають зміни в коді.
   • Примітка: Ваша веб-сторінка ще не в мережі. Сторінка недоступна для інших, і для перевірки вам не потрібно діюче з’єднання з Інтернетом. Ви просто використовуєте свій браузер, щоб "читати" документ HTML так, ніби це веб-сайт.
3. Зрозумійте, що таке "мітки". Теги не видно на кінцевій веб-сторінці, як звичайний текст. Теги повідомляють вашому браузеру, як відображати сторінку та вміст на сторінці. Початковий тег містить інструкції. Наприклад, він може наказати браузеру відображати текст жирним шрифтом. Кінцевий тег потрібен, щоб повідомити браузеру, де застосовуються інструкції: у цьому прикладі весь текст між початковим і кінцевим тегами виділений жирним шрифтом. Кінцеві теги також розміщуються всередині дужок, але коса риса слідує за першими дужками.
   • Запишіть в дужках початкові теги: це день початку>
   • Запишіть кінцеві теги в дужки, але поставте скісну риску після першої дужки: /це закриваючий тег>)
   • Про те, як писати функціональні теги, читайте далі в статті. На цьому кроці вам просто потрібно пам’ятати, яким способом писати теги:> та />.
   • В інших курсах HTML теги також називають "елементами", а текст між тегами, що відкриваються та закривають, також називають "вмістом елемента".
4. Напишіть свій перший тег html>. Кожен документ HTML починається з html>тег і закінчується a / html>тег. Це повідомляє браузеру, що все між цими тегами записано в HTML. Додайте до свого документа такі теги:
   • Пишіть html> у верхній частині документа.
   • Натисніть Enter або поверніться кілька разів, щоб дати собі трохи місця, а потім напишіть / html>
   • Пам'ятати тебе все у цій статті між цими двома тегами.
5. Зробіть заголовок> частиною вашого документа. Між тегами html> та / html> ви пишете a голова>стартовий тег та a / head>-кінцевий тег. Знову зробіть простір між цими тегами. Все, що написано між цими тегами, не буде видно на самій веб-сторінці. Спробуйте виконати наведені нижче дії, щоб дізнатись, чи відображається інформація:
   • Пишіть між тегами head> та / head>: заголовок> і / title>
   • Між тегами title> та / title> ви пишете: Як вивчити HTML (із зображеннями) - wikiHow.
   • Збережіть документ і відкрийте його у браузері (або збережіть документ і оновіть сторінку в браузері, якщо сторінка все ще була відкритою). Чи бачите ви щойно написане у верхній частині сторінки над адресним рядком?
6. Створіть тіло> розділ. Все інше в цьому документі для початківців розміщується в розділі body>, і воно відображається на веб-сторінці. Після тег / голова>, але перед тег / html> ви пишете тіло> і / тіло>. Все, що ми обговорюємо далі в цій статті, ми розміщуємо між тегами body. Тепер у вас повинен бути документ, який виглядає так (без маркерів):
   • html>
   • голова>
   • title> вивчити HTML - wikiHow / title>
   • / head>
   • тіло>
   • / тіло>
   • / html>
7. Додайте текст у різних стилях. Тепер настав час почати писати щось, що насправді буде видно в браузері! Все, що ви пишете в тегах body, буде видно в браузері після збереження змін та оновлення сторінки в браузері. Пишіть ні щось із знаками і >оскільки ваш браузер сприйме це як інструкцію HTML замість простого тексту. Напишіть наприклад Привіт Світ! (Англійською мовою "Hello world!", Це загальносвітовий стандартний текст як перший приклад у будь-якому курсі програмування на певній мові програмування) або щось інше, і поставте такі теги до і після тексту і подивіться, що станеться:
   • em> Привіт світ! / em> виглядає як курсив тексту: Привіт Світ!
   • сильний> Привіт світ! / сильний> виглядає жирним шрифтом: Привіт Світ!
   • s> Привіт світ! / s> виглядає як закреслений текст: Привіт Світ!
   • sup> Привіт світ! / sup> виглядає як верхній індекс:
   • sub> Привіт світ! / sub> виглядає як підпис: _{Привіт Світ!}
   • Спробуйте комбінації: як бачить em> strong> Hello world! / strong> / em> забирайся?
8. Поділіть свій текст на абзаци. Якщо ви вкладете в документ різні рядки тексту, ви побачите, що всі рядки розміщуються один за одним. Ви повинні запрограмувати нові рядки та порожні рядки самостійно:
   • p> Це окремий розділ. / p>
   • Це речення знаходиться в першому рядку, а це речення - у наступному.
     Це перший тег, з яким ми стикаємось, і не потребує кінцевого тегу! Ми називаємо такий тег одним порожній тег.
   • Створіть заголовки, щоб зробити назви розділів зрозумілими:
     h1> заголовок / h1>: найбільший можливий заголовок
     h2> заголовок / h2> (дворівневий заголовок)
     h3> заголовок / h3> (заголовок 3 рівня)
     h4> заголовок / h4> (заголовок 4 рівня)
     h5> заголовок / h5> (найменший можливий заголовок)
9. Дізнайтеся, як складати списки. Існує кілька способів створення списків на веб-сторінці. Спробуйте наступні методи, щоб з’ясувати, що вам найбільше подобається. Зверніть увагу, що одна пара тегів розміщується навколо всього списку (наприклад, теги ul> та / ul> для невпорядкованих списків), а інша пара тегів розміщується навколо кожного елемента у списку, наприклад li> та / li> .
   • Використовуйте такий код для створення маркованих списків:
     ul> li> Один предмет / li> li> Інший елемент / li> li> Інший елемент / li> / ul>
   • Або цей код для створення нумерованих списків:
     ol> li> Елемент 1 / li> li> Елемент 2 / li> li> Елемент 3 / li> / ol>
   • Або цей код для створення так званого списку визначень:
     dl> dt> Кава / dt> dd> - Гарячий напій / dd> dt> Молоко / dt> dd> - Холодний напій / dd> / dl>
10. Зробіть свою сторінку привабливішою за допомогою нових ліній, горизонтальних ліній та зображень. Тепер настав час почати додавати інші речі на свою сторінку. Спробуйте такі теги (зображення потрібно розміщувати в мережі, щоб ви могли використовувати посилання на зображення):
    • Вставте рядок: br> або hr>
    • Вставити зображення: img src = "the_url_of_your_image">
11. Вставте посилання на інші місця на сторінці. Ви також можете використовувати цей код для посилання на інші сторінки та веб-сайти, але оскільки у вас ще немає веб-сайту, ми зосередимося на "якорях", які є конкретними місцями на сторінці, на які ви можете зробити посилання:
    • Спочатку створіть прив’язку з тегом a> у точці сторінки, на яку потрібно зробити посилання. Дайте своєму якореві чітке ім’я, яке легко запам’ятати:
      
      a name = "Поради"> Це текст, навколо якого ви розміщуєте якір. / a>
    • Використовуйте тег href> для посилання на ваш прив’язок або на іншу веб-сторінку:
      
      a href = "url веб-сторінки або назва прив'язки на цій сторінці"> Напишіть тут текст або зображення, показані як посилання. / a>
    • Щоб зробити посилання на прив’язку на іншій сторінці, додайте символ # після URL-адреси, а потім ім’я прив’язки. Наприклад, http://www.wikihow.com/HTML-leren#Tips переведе вас прямо до розділу "Поради" на цій сторінці.

Частина 2 з 2: Вивчення розширеного HTML

1. Дізнайтеся про атрибути. Атрибути розміщуються всередині тегу і використовуються для додаткових налаштувань "вмісту елемента" між початковим і кінцевим тегами. Вони ніколи не стоять на самоті. Вони написані таким чином: name = "значення". ім'я представляє назву атрибута (наприклад, "колір") та значення описує цей конкретний випадок (наприклад, "червоний").
   • Якщо ви уважно вивчили попередню частину цієї статті, ви вже стикалися з атрибутами. Тег img> використовує атрибут src, якір використовує атрибут ім'я а посилання використовують атрибут href. Ви можете сказати, що всі вони розміром ___='___’ слідувати.
2. Експериментуйте з таблицями HTML. Щоб скласти таблицю або графік, потрібно кілька тегів:
   • Почніть з тегів таблиці ("таблиця" англійською мовою) навколо всієї таблиці:таблиця> / таблиця>
   • Розмістіть теги навколо вмісту кожного рядка: tr>
   • Розмістіть заголовки стовпців у першому рядку: го>
   • Розмістіть клітинки в послідовних рядках: td>
   • Це приклад того, як все це поєднується:
     
     таблиця> tr> th> Стовпець 1: Місяць / th> th> Стовпець 2: Збережені гроші / th> / tr> tr> td> Січень / td> td> 100 € / td> / tr> / стіл>
3. Вивчіть інші теги, що використовуються в розділі head. Ви вже вивчили тег head>, який розміщуєте на початку кожного документа. Окрім тегу title>, у розділі head можуть бути й інші теги:
   • Для створення використовуються метатеги метадані про веб-сторінку. Ці дані використовуються пошуковими системами для класифікації веб-сторінок. Щоб зробити вашу сторінку видимою для пошукових систем, ви можете розмістити один або кілька мета-тегів (кінцеві теги не потрібні), кожен тег повинен містити рівно один атрибут імені та атрибут вмісту, наприклад: meta name = "description" content = "поставте сюди опис ">; or meta name = "keywords" content = "напишіть тут список ключових слів, завжди відокремлений комою">
   • теги link> використовуються для прив'язки інших файлів до сторінки. Зазвичай вони використовуються для асоціювання таблиць стилів CSS зі сторінками HTML, вони складаються з кодом іншого типу і використовуються для визначення загального стилю сторінки.
   • теги script> використовуються для асоціювання файлів javascript зі сторінкою HTML. Javascript дозволяє змінювати сторінку, якщо користувач щось робить на цій сторінці.
4. Грайте в HTML з існуючих сторінок. Перегляд вихідного коду веб-сторінок - чудовий спосіб розширити свої знання HTML. Клацніть правою кнопкою миші на сторінці та виберіть "Переглянути джерело", "Показати джерело сторінки" або подібні. Дізнайтеся, що робить певний тег, якого ви не знаєте, або шукайте відповідь в Інтернеті.
   • Ви не можете редагувати чужі веб-сайти, але можете скопіювати HTML-код у свій власний документ і пограти з ним, щоб побачити, що роблять різні налаштування. Примітка: оскільки багато веб-сайтів використовують таблиці стилів CSS, можливо, ви не зможете побачити багато кольорів чи інших стилів.
5. Дізнайтеся про HTML, читаючи більше поглиблених статей. В Інтернеті існує безліч ресурсів для освоєння більшої кількості тегів HTML, таких як W3Schools або Codecademy. Доступно також багато книг HTML, але переконайтеся, що ви використовуєте останнє видання, оскільки стандарт HTML час від часу змінюється. Після того, як ви добре засвоїли HTML, ви можете звернутися до CSS, щоб отримати більше контролю над дизайном та стилем вашої веб-сторінки. Після цього наступним кроком, як правило, є javascript.

Поради

• Може бути корисно знайти просту веб-сторінку в Інтернеті, а потім почати возитися з кодом. Спробуйте перенести якийсь текст, змінити шрифт, змінити зображення, що завгодно!
• Ви можете скористатися зошитом, щоб записати код, щоб вам було на що повернутися, якщо ви його ні на хвилину не пам’ятаєте. Ви також можете роздрукувати цю сторінку та зберегти її для довідки.
• XML і RSS сьогодні все частіше використовуються на веб-сайтах. Код може виглядати недоступним для людського ока, особливо при перегляді у вихідному коді, але функціонал може бути корисним.
• Теги, що використовуються в HTML, не чутливі до регістру, але за замовчуванням використовуються малі літери (як це робиться в цій статті). Настійно рекомендуються малі літери для тегів, також для сумісності з XHTML.

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

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

Потреби

• Програма для обробки текстів, наприклад Блокнот (Windows) або Текстовий редактор (Mac).
• аркуш паперу або блокнот (за бажанням)
• Програма, спеціально розроблена для написання HTML, наприклад Notepad ++ для Windows або TextWrangler для Mac (за бажанням)