Зміст

• Кроки
• Питання та відповіді спільноти
• Поради
• Попередження

Інші розділи

Якщо ви віддаєте перевагу кодуванню веб-сайтів вручну, ви можете редагувати файли HTML у базовому текстовому редакторі, наприклад Блокноті (Windows) або TextEdit (macOS). Якщо ви бажаєте мати можливість переміщати елементи на екрані та бачити попередній перегляд, ви можете скористатися редактором WYSIWYG (What You See Is What You Get), наприклад Dreamweaver або Kompozer. Ця wikiHow вчить, як відкривати та редагувати файл HTML у стандартному або візуальному додатку для редагування.

Кроки

Спосіб 1 з 4: Використання блокнота у Windows

1. 

   . Ця кнопка має логотип Windows на панелі завдань. За замовчуванням це в нижньому лівому куті. З'явиться меню "Пуск"

2. 

   . Це знаходиться у верхньому правому куті робочого столу Mac. Тут відображається рядок пошуку.

3. 

   
   
   Тип TextEdit у рядку пошуку. Тут відображається список програм, які відповідають вашим результатам пошуку.

4. 

   
   
   Клацніть TextEdit.app. Це вгорі результатів пошуку. Це поруч із піктограмою, яка нагадує аркуш паперу та ручку.

5. 

   Клацніть Файл. Він знаходиться в рядку меню у верхній частині екрана, коли TextEdit відкрито.

6. 

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

7. 

   Клацніть файл HTML і клацніть відчинено. Файли HTML мають розширення з написом ".html" після назви файлу. Використовуйте браузер файлів, щоб перейти до файлу HTML і клацніть його, щоб вибрати його. Потім клацніть відчинено щоб відкрити файл HTML у TextEdit.

8. 

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

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

     : Ці теги створюють теги заголовків. Текст між "

     "і"

     "відображається у вигляді великого жирного тексту. Текст розміщується в тілі документа HTML.

   • Текст абзацу

     : Ці теги використовуються для створення тексту абзацу в документі HTML. Текст, який йде між ними "

     "і"

     "відображається як текст звичайного розміру. Текст розміщується в тілі документа HTML.
   • Жирний текст: Ці теги використовуються для створення жирного тексту. Текст, який йде між ними ""і""відображається як напівжирний текст.
   • Курсив тексту: Ці теги використовуються для створення курсивного тексту. Текст, який йде між ними ""і""відображається у вигляді курсиву.
   • Текст посилання: Цей тег використовується для посилання на інший веб-сайт. Скопіюйте веб-адресу, на яку ви хочете зробити посилання, та вставте її там, де написано "URL" (між лапками). Текст посилання, де написано "Текст посилання" (лапки не потрібні).
   • : Цей тег використовується для опублікування зображення за допомогою HTML. Замініть текст із написом "URL-адреса зображення" на веб-адресу зображення.

9. 

   Клацніть Файл. Це знаходиться в рядку меню у верхній частині екрана.

10. 

    Клацніть Зберегти. Це знаходиться у спадному меню під "Файл". Це зберігає файл HTML.
    • Щоб змінити назву файлу, клацніть Перейменувати у спадному меню "Файл". Введіть нову назву файлу у верхній частині екрана. Не забудьте включити розширення ".html" у верхній частині сторінки.

Метод 3 з 4: Використання Dreamweaver

1. 

   Відкрийте Dreamweaver. Dreamweaver має піктограму, яка нагадує зелений квадрат, на якому в середині написано "Dw". Клацніть піктограму в меню «Пуск» Windows або папці «Програми» на Mac, щоб відкрити Dreamweaver.
   • Adobe Dreamweaver вимагає передплати. Ви можете придбати передплату від 20,99 доларів на місяць.

2. 

   Клацніть Файл. Це знаходиться в рядку меню у верхній частині екрана.

3. 

   Клацніть відчинено. Це знаходиться у спадному меню під "Файл".

4. 

   Виберіть документ HTML і натисніть відчинено. За допомогою браузера файлів виберіть документ HTML на своєму комп’ютері та клацніть його, щоб вибрати його. Потім клацніть відчинено у правому нижньому куті.

5. 

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

6. 

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

7. 

   Клацніть Файл. Після закінчення редагування документа HTML натисніть Файл у рядку меню у верхній частині екрана.

8. 

   Клацніть Зберегти. Це в спадному меню нижче Файл. Це зберігає ваш документ HTML.

Метод 4 з 4: Використання Kompozer

1. 

   Йти до https://sourceforge.net/projects/kompozer/ у веб-браузері. Ви можете використовувати будь-який веб-браузер на ПК або Mac. Це сторінка завантаження для Kompozer. Це безкоштовний редактор HTML (WYSIWYG), який працює як на Windows, так і на Mac.

2. 

   Клацніть Завантажити. Це зелена кнопка вгорі сторінки. Ви перейдете на окрему сторінку завантаження. Через 5 секунд затримки почнеться завантаження.

3. 

   Двічі клацніть файл встановлення. За замовчуванням завантажені файли можна знайти у папці "Завантаження" на ПК або Mac. Ви також можете натиснути на них у своєму веб-браузері, щоб запустити інсталятор Kompozer. Для встановлення Kompozer використовуйте наступні інструкції:
   • Windows:
     • Якщо з’явиться запитання, чи хочете ви дозволити програмі встановлення вносити зміни у вашу систему, натисніть Так.
     • Клацніть Далі у вступних вікнах.
     • Клацніть радіальну кнопку поруч із написом "Я приймаю угоду" та натисніть Далі.
     • Клацніть Далі щоб використовувати місце встановлення за замовчуванням або клацнути Перегляньте щоб вибрати інше місце встановлення.
     • Клацніть Далі а потім клацніть Далі знову
     • Клацніть Встановити
     • Клацніть Готово
   • Мак:
     • Двічі клацніть файл інсталяції Kompozer.
     • Клацніть KompoZer.app
     • Клацніть на піктограму Apple у верхньому лівому куті.
     • Клацніть Системні налаштування
     • Клацніть Безпека та конфіденційність
     • Клацніть на Загальні вкладку.
     • Клацніть Відкрити в будь-якому випадку внизу вікна.
     • Клацніть відчинено у спливаючому вікні.
     • Перетягніть піктограму Kompozer на робочий стіл.
     • Відкрийте Finder.
     • Клацніть на Програми папку.
     • Перетягніть піктограму Kompozer з робочого столу в папку Програми.

4. 

   Відкрийте Kompozer. Виконайте наступні кроки, щоб відкрити Kompozer на ПК або Mac
   • Windows:
     • Клацніть на Запуск Windows меню.
     • Тип "Композер"
     • Двічі клацніть піктограму Kompozer.
   • Мак:
     • Клацніть піктограму лупи у верхньому правому куті.
     • Введіть "Kompozer" у рядку пошуку.
     • Подвійне клацання Kompozer.app.

5. 

   Клацніть Файл. Це знаходиться в рядку меню у верхній частині програми.

6. 

   Клацніть Відкрити файл. Це другий варіант у спадному меню під "Файл". Це відкриває браузер файлів, за допомогою якого можна вибрати відкритий файл HTML.

7. 

   Клацніть файл HTML і клацніть відчинено. Це відкриє файл HTML у Kompozer.

8. 

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

9. 

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

10. 

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

Питання та відповіді спільноти

Поради

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

• Не забудьте зберегти документ під час редагування. Щось може щось піти не так.