Как изменить текст на своем сайте

Меняем текстовое содержимое элемента Мы нашли нужный элемент и вывели в консоль его текстовое содержимое. Но для нашей задачи это содержимое нужно

Меняем текстовое содержимое элемента

Мы нашли нужный элемент и вывели в консоль его текстовое содержимое. Но для нашей задачи это содержимое нужно изменить. Как это сделать? Присвоим свойству textContent новое значение.

Возьмём абзац с текстом:

И перезапишем его текстовое содержимое:

Обратите внимание, что строки с текстом нужно заключать в кавычки.

Когда инструкция выполнится, текст внутри абзаца изменится:

Когда мы присваиваем свойству textContent новое значение, оно полностью заменяет собой старое. Как и в случае с переключением классов, JavaScript не влияет на исходную разметку, а меняет текст прямо в браузере пользователя.

Свойство textContent предназначено только для текста, если записать туда HTML-теги, браузер их не поймёт.

Как быстро редактировать текст на странице с помощью консоли разработчика Chrome

Константин Булгаков

При работе с контентом на сайте часто требуется вносить изменения или править различные текстовые блоки прямо на странице. В большинстве случаев это можно сделать через выделение элемента и правку в коде.

Однако существует специальная команда document.designMode = ‘on’ которая позволяет окно браузера с содержимым страницы с легкостью превратить в текстовый редактор.

That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN

— Tomek Sułkowski (@sulco) September 27, 2019

Для вызова команды вам потребуется произвести несколько несложных действий:

  1. Откройте на нужной странице консоль администратора (вызывается нажатием клавиши F12 или Ctrl+Shift+I);
  2. В появившемся окне выберите вкладку консоль;
  3. Укажите команду document.designMode = ‘on’ ;
  4. Далее нажмите Enter и приступайте к изменению контента на странице — установите курсор в нужном фрагменте текста и вносите любые правки.

Консоль Google Chrome

Обратите внимание, что все изменения локальны и видны только вам. При перезагрузке страницы они исчезнут.

Для чего будет полезна команда:

  1. изменять тексты и подменять данные на сайте;
  2. тестировать различные текстовые блоки и элементы — заголовки, лид-параграфы, абзацы, врезки, сноски;
  3. проверять различные форматы написания текста и быстро принимать решения;
  4. быстро править тексты и отправлять скриншоты заинтересованным участникам — разработчикам, копирайтерам или дизайнерам;
  5. создавать фейковые скриншоты с содержимым страницы.

Если вам интересно узнать больше о возможностях консоли администратора Chrome, то рекомендую посмотреть запись Chrome Dev Summit 2016.

Хотите еще больше похожих выступлений? Посетите официальную страницу саммита. Здесь вы найдете ссылки на записи других выступлений за все предыдущие года.

Надеюсь, материал оказался полезным. Обязательно пишите ваши комментарии или делитесь ссылкой на статью с коллегами и друзьями.

Как пользоваться вкладкой Elements

Инструменты разработчика в браузерах очень мощные. Они помогут отредактировать страницу прямо в браузере, даже не особо зная, что такое HTML. Можно заменять текст, картинки, передвигать целые блоки на лету, т.е. прямо в браузере, не сохраняя никаких файлов. Правда, эти изменения носят временный характер: при обновлении страницы изменения пропадают.

Инструменты отлично подходят, когда хочется “попробовать, как это выглядит”.

В этой статье мы пользуемся браузером Google Chrome, но в других браузерах всё работает схожим образом.

Поменять текст

Чтобы заменить любой текст на странице, достаточно кликнуть правой клавишей мыши по нужному тексту и выбрать “Просмотреть код”. Откроется код этого элемента, где вы сразу увидите нужный текст. Кликните по нему дважды, чтобы заменить. При нажатии на Enter вы увидите, что текст поменялся и на странице.

Попробуйте повторить приём ниже. Где пробовать.

Поменять картинку

Чтобы заменить картинку, нужно найти её путь: обычно это какая-то длинная ссылка внутри элемента с названием img. Довольно просто, ничем не отличается от смены текста.

В примере ниже мы задумали у второго урока поставить такую же картинку, как у первого. Попробуйте повторить приём ниже. Где пробовать.

Обратите внимание на прикольную фичу: при наведении на ссылку Chrome показывает миниатюрку картинки, которая лежит по этой ссылке. Мелочь, а приятно.

Найти блок вёрстки

Весь HTML устроен иерархически: большие элементы на странице складываются из элементов поменьше, а те, в свою очередь, тоже делятся на части и так пока не дойдёт дело до самых простых элементов на странице — текста, картинок и прямоугольников. Например, на странице Энциклопедии Девмана есть строка, в которой лежит 3 списка из рубрик энциклопедии.

Видно, что они “вложены” в строку — при желании их можно “свернуть”:

При наведении на строчки элементы на странице будут выделяться синим. Чтобы выделить весь элемент поднимайтесь “наверх” по коду, пока он не выделится целиком. Если выделилось слишком много, то вы поднялись слишком высоко, теперь спускайтесь обратно. Перемещайтесь по элементам, пока не найдете нужный.

Найденный элемент можно отредактировать прямо в браузере, выбрав в контекстном меню Edit as HTML . Правда, в файл изменения не попадут. Ещё можно разом скопировать весь блок с вложенными в него элементами или даже удалить их все. О том как это сделать читайте ниже.

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

С помощью инструментов разработчика вы поняли, что вам нужен элемент <div js-article-content»> . Значит в файле надо искать тег div с классами row и js-article-content и с родителями body и article . Задача сильно упростится, если в редакторе свернуть часть кода, в англоязычном интерфейсе этот приём называется code folding .

Помните, что на странице может быть много одинаковых с виду элементов, с одинаковым тегом и классами. Ориентируйтесь прежде всего на родителей — внутри каких элементов он находится. Начинайте поиск с тега <body> — этот элемент на странице всегда один и находится на самом верху.

В коде теги ищут по их родителям

Скопировать элемент

Если вы уже нашли элемент через инструменты разработчика, то кликните по нему правой кнопкой мыши и в выпадающем меню выберите Copy outerHTML . HTML разметка скопирована в буфер обмена, теперь можете вставить её в текстовый редактор.

Удалить элемент

Чтобы удалить элемент, нужно так же кликнуть по нему правой кнопкой мыши и выбрать “Просмотреть код”. Далее выберите его целиком. Когда вы выберете нужный элемент — жмите Delete .

В этой гифке мы задумали удалить вторую статью “Как установить Python”. Попробуйте повторить приём ниже. Где пробовать.

В гифке видно, как мы “поднимаемся” наверх, выделяя всё больше. Как только “поднялись” достаточно — свернули всё, что внутри с помощью “стрелочки” слева. Стало видно, что некие li — это элементы списка (на самом деле это list item), а в некоем ul лежит весь список (это unordered list).

Попробуйте бесплатные уроки по Python

Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.

Источник


Загрузить PDF


Загрузить PDF

Ни один шутник не откажется от возможности временно изменить способ отображения сайта на компьютере, не говоря уже о множестве практических применений, которые эта возможность открывает. Какие бы цели вы ни преследовали — шутливые, утилитарные или, не дай бог, зловредные, — изменить отображение сайта довольно просто.

  1. Изображение с названием Appear to Edit Text on Any Website Step 1

    1

    Найдите ссылку на букмарклет, изменяющий текущий сайт. Самый простой способ сделать это — ввести в Google запрос: «изменить текущий сайт букмарклет» (без кавычек). Найдите подходящую ссылку среди результатов поиска.[1]

  2. Изображение с названием Appear to Edit Text on Any Website Step 2

    2

    Перетащите ее на панель закладок. Отредактируйте сайт, на котором вы нашли ссылку. Для этого просто щелкните по ней или перетащите на панель закладок. Это позволит вам использовать ссылку на любом сайте.

  3. Изображение с названием Appear to Edit Text on Any Website Step 3

    3

    Используйте ссылку. Откройте страницу, которую хотите изменить, и нажмите на закладку. И хотя это не принесет заметного эффекта, теперь вы сможете открыть программный код страницы и отредактировать его по своему усмотрению.[2]

    Реклама

  1. Изображение с названием Appear to Edit Text on Any Website Step 4

    1

    Найдите текст или фотографию, которую хотите изменить. Откройте страницу в Chrome, которую хотите отредактировать. Если вы хотите отредактировать текст, выделите слова, которые хотите изменить, и щелкните по ним правой кнопкой мыши. Если вы хотите отредактировать фотографию, просто щелкните по ней правой кнопкой мыши.[3]

    • Чтобы отредактировать фотографию, вам нужно будет загрузить другое фото и заменить на него текущее. Для этого вам нужно заменить URL-адрес в исходном коде новым URL-адресом.

  2. Изображение с названием Appear to Edit Text on Any Website Step 5

    2

    Откройте инспектор кода. Щелкните правой кнопкой мыши по странице, чтобы отобразить контекстное меню. Нажмите на «Просмотреть код». Внутри текущей страницы откроется новое окно с HTML кодом.[4]

    • Если ваш компьютер работает под управлением ОС Windows, откройте инспектор кода, нажав F12.

  3. Изображение с названием Appear to Edit Text on Any Website Step 6

    3

    Найдите текст, который хотите изменить, в инспекторе кода. Текст, выделенный в инспекторе, будет выделен и на исходном сайте. При редактировании изображения в инспекторе будет выделен большой фрагмент текста с подчеркнутым URL-адресом в конце.

  4. Изображение с названием Appear to Edit Text on Any Website Step 7

    4

    Измените код. Если вы хотите изменить текст, просто отредактируйте выделенные слова. Если вы хотите изменить фотографию, замените ссылку на фото другой ссылкой, не касаясь остальной части кода.

    • Если допустите ошибку, нажмите Command+Z на Mac или Control+Z на Windows, чтобы отменить изменение.

  5. Изображение с названием Appear to Edit Text on Any Website Step 8

    5

    Завершите редактирование. Нажмите «Enter» и закройте инспектор кода. Теперь на странице сайта будет отображен текст или изображение, которое вы добавили. Естественно, сама страница не была отредактирована, и при ее обновлении все внесенные вами изменения пропадут.

    Реклама

  1. Изображение с названием Appear to Edit Text on Any Website Step 9

    1

    Включите меню «Разработка». Нажмите на меню «Safari» в верхней части экрана. Выберите «Настройки», а затем «Дополнения» из меню в верхней части окна «Настройки». Установите флажок рядом с параметром «Показывать меню “Разработка” в строке меню» в нижней части окна. Меню «Разработка» появится в строке меню между опциями «Закладка» и «Окно».[5]

  2. Изображение с названием Appear to Edit Text on Any Website Step 10

    2

    Найдите текст или фотографию, которую хотите изменить. Перейдите на страницу, которую хотите отредактировать. Если вы хотите отредактировать текст, выделите слова, которые хотите изменить, и щелкните по ним правой кнопкой мыши. Если вы хотите отредактировать фотографию, просто щелкните по ней правой кнопкой мыши.

    • Чтобы отредактировать фотографию, вам нужно будет загрузить другое фото и заменить на него текущее. Для этого вам нужно заменить URL-адрес в исходном коде новым URL-адресом.

  3. Изображение с названием Appear to Edit Text on Any Website Step 11

    3

    Откройте инспектор кода. Щелкните по странице правой кнопкой мыши, чтобы отобразить контекстное меню. Нажмите на «Исследовать элемент». Внутри текущей страницы откроется новое окно с HTML кодом.

    • Окно «Просмотреть код» можно также открыть, раскрыв меню «Разработка» и выбрав пункт «Подключить веб-инспектор». Найдите искомый текст, нажав Command+F на Mac или Control+F в Windows и введя текст, который хотите изменить. Стоит отметить, что это более окольный путь, чем предыдущий способ.
    • Чтобы открыть инспектор кода, используйте сочетание клавиш Alt+Command+I на Mac или клавишу F12 на Windows.

  4. Изображение с названием Appear to Edit Text on Any Website Step 12

    4

    Измените код. Если вы хотите изменить текст, просто отредактируйте выделенные слова. Если вы хотите изменить фотографию, замените ссылку на фото другой ссылкой, не касаясь остальной части кода.[6]

    • Если допустите ошибку, нажмите Command+Z на Mac или Control+Z на Windows, чтобы отменить изменение.

  5. Изображение с названием Appear to Edit Text on Any Website Step 13

    5

    Завершите редактирование. Нажмите «Enter» и закройте инспектор кода. Теперь на странице сайта будет отображен текст или изображение, которое вы добавили. Естественно, сама страница не была отредактирована, и при ее обновлении все внесенные вами изменения пропадут.

    Реклама

Об этой статье

Эту страницу просматривали 68 727 раз.

Была ли эта статья полезной?

Источник

Перейти к содержимому

Константин Булгаков

Поправить текст отлаживаемой веб-страницы можно прямо в браузере не прибегая к правкам HTML-кода, используя стандартную функцию консоли для редактирования содержимого страницы.

При работе с контентом на сайте часто требуется вносить изменения или править различные текстовые блоки прямо на странице. В большинстве случаев это можно сделать через выделение элемента и правку в коде.

Однако существует специальная команда document.designMode = 'on' которая позволяет окно браузера с содержимым страницы с легкостью превратить в текстовый редактор.

That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN

— Tomek Sułkowski (@sulco) September 27, 2019

Для вызова команды вам потребуется произвести несколько несложных действий:

  1. Откройте на нужной странице консоль администратора (вызывается нажатием клавиши F12 или Ctrl+Shift+I);
  2. В появившемся окне выберите вкладку консоль;
  3. Укажите команду document.designMode = 'on';
  4. Далее нажмите Enter и приступайте к изменению контента на странице — установите курсор в нужном фрагменте текста и вносите любые правки.

Консоль Google Chrome

Обратите внимание, что все изменения локальны и видны только вам. При перезагрузке страницы они исчезнут.

Для чего будет полезна команда:

  1. изменять тексты и подменять данные на сайте;
  2. тестировать различные текстовые блоки и элементы — заголовки, лид-параграфы, абзацы, врезки, сноски;
  3. проверять различные форматы написания текста и быстро принимать решения;
  4. быстро править тексты и отправлять скриншоты заинтересованным участникам — разработчикам, копирайтерам или дизайнерам;
  5. создавать фейковые скриншоты с содержимым страницы.

Если вам интересно узнать больше о возможностях консоли администратора Chrome, то рекомендую посмотреть запись Chrome Dev Summit 2016.

Хотите еще больше похожих выступлений? Посетите официальную страницу саммита. Здесь вы найдете ссылки на записи других выступлений за все предыдущие года.

Надеюсь, материал оказался полезным. Обязательно пишите ваши комментарии или делитесь ссылкой на статью с коллегами и друзьями.

Что важного в диджитал на этой неделе?

Каждую субботу я отправляю письмо с новостями, ссылками на исследования и статьи, чтобы вы не пропустили ничего важного в интернет-маркетинге за неделю.

Узнать подробнее →

Статьи по теме:

  • Как настроить и отслеживать события для Facebook через Google Tag Manager
  • Как настроить отслеживание конверсий в Google Реклама с помощью Google Tag Manager
  • Как убрать фон с картинки без специальных программ и навыков
  • Как создавать UTM-метки правильно: стандартизируем разметку и приводим параметры к единому виду
  • Как установить Редактор Google Ads Editor для 32-разрядной ОС Windows

Метки #инструменты

Источник

Как добавлять и изменять текст и изображения

Вы можете добавлять изображения в формате PNG, JPEG или GIF, соблюдая правила их использования.

Как добавить текст и заголовки на сайт

  1. Откройте сайт в новой версии Google Сайтов на компьютере.
  2. Справа выберите Вставка затем Текстовое поле.
  3. В меню нажмите на стрелку вниз Стрелка вниз затем выберите стиль оформления.
  4. Введите текст.
  5. Чтобы изменения стали видны пользователям в Интернете, нажмите Опубликовать в правом верхнем углу экрана.

Как изменить стиль текста

Как изменить формат текста

В новой версии Google Сайтов можно менять внешний вид текста, добавлять нумерованные или маркированные списки, а также вставлять ссылки.

  1. Откройте сайт в новой версии Google Сайтов на компьютере.
  2. В разделе Страницы справа выберите нужную страницу.
  3. Выделите текст или установите курсор туда, куда нужно вставить список или ссылку.
  4. В меню сверху выберите формат текста.
  5. Чтобы изменения стали видны пользователям в Интернете, нажмите Опубликовать в правом верхнем углу экрана.

Совет. Вы можете скопировать ссылку на заголовок или подзаголовок любого опубликованного сайта, а затем вставить ее в сообщение или разместить в Интернете. Подробнее… 

Как добавить раскрывающиеся разделы текста

Вы можете сэкономить место на странице, добавив блок сворачиваемого текста.

  1. Откройте сайт в новой версии Google Сайтов на компьютере. 
  2. Справа выберите Вставка затем Добавить сворачиваемый текст.
  3. Введите заголовок и основной текст, нажав на текстовые поля.
  4. Чтобы изменения стали видны пользователям в Интернете, нажмите Опубликовать в правом верхнем углу экрана.

Как изменить или удалить сворачиваемый текст

Как изменить сворачиваемый текст

  1. Откройте сайт в новой версии Google Сайтов на компьютере.
  2. Нажмите на заголовок, чтобы блок с текстом развернулся.
  3. Нажмите на поле с заголовком или основным текстом и внесите исправления.
  4. Чтобы изменения стали видны пользователям в Интернете, нажмите Опубликовать в правом верхнем углу экрана.

Чтобы увидеть, как будет выглядеть сворачиваемый текст, нажмите на значок «Посмотреть» Посмотреть в правом верхнем углу интерфейса.

Как удалить сворачиваемый текст

  1. Откройте сайт в новой версии Google Сайтов на компьютере.
  2. Наведите указатель мыши на верхнюю часть сворачиваемого блока и нажмите на синий контур.
  3. Нажмите «Удалить группу» Удалить.

Как преобразовать сворачиваемый текст в обычный

Сворачиваемый текст можно превратить в обычный.

  1. Откройте сайт в новой версии Google Сайтов на компьютере.
  2. Нажмите на сворачиваемый текст, чтобы развернуть его.
  3. Наведите указатель мыши на верхнюю часть сворачиваемого блока и нажмите на синий контур.
  4. Отключите возможность сворачивания.

Чтобы преобразовать поля с заголовком и основным текстом в сворачиваемый блок, выполните следующие действия: 

  1. Наведите указатель мыши на верхнюю часть поля с заголовком и нажмите на синий контур.
  2. Включите возможность сворачивания.

Как добавить макет раздела

С помощью макетов можно изменять внешний вид отдельных фрагментов страницы. 

  1. Откройте сайт в новой версии Google Сайтов на компьютере. 
  2. На панели справа нажмите Вставка. 
  3. В разделе «Макеты» выберите подходящий вариант и перетащите его на страницу. 
  4. Добавьте текст, изображения, документы или видео. 
  5. Нажмите Опубликовать в правом верхнем углу экрана. 

Как добавить кнопку

Вы можете добавить на сайт кнопку со ссылкой на другую страницу.

  1. Откройте сайт в новой версии Google Сайтов на компьютере.
  2. Справа выберите Вставка and then Кнопка.
  3. Введите название. Это название будет отображаться на кнопке.
  4. Вставьте URL-адрес, который должна открывать кнопка, или выберите одну из страниц сайта.
  5. Нажмите Вставка.

Как изменить или удалить кнопку

Нажмите кнопку, которую нужно изменить или удалить.

Как вставлять и изменять изображения

Как добавить изображение

  1. Откройте сайт в новой версии Google Сайтов на компьютере.
  2. Справа нажмите Вставка затем Изображения.
  3. Выберите место на странице.
  4. Найдите нужное изображение и нажмите Выбрать.
  5. Чтобы изменения стали видны пользователям в Интернете, нажмите Опубликовать в правом верхнем углу экрана.

Как добавить карусель изображений

Вы можете добавить на сайт изображения, которые пользователи смогут просматривать, прокручивая карусель.

Как добавить подписи к изображениям в карусели

Как включить автоматическую смену изображений в карусели

Как изменить размер фотографии

  1. Откройте сайт в новой версии Google Сайтов на компьютере.
  2. Выберите фотографию.
  3. Нажмите на точку и измените размер изображения.
  4. Чтобы изменения стали видны пользователям в Интернете, нажмите Опубликовать в правом верхнем углу экрана.

Как кадрировать фотографию

Как вставлять другие элементы на сайт

Как добавить логотип

Логотипы расположены в верхней части страницы рядом с названием сайта.

  1. Откройте сайт в новой версии Google Сайтов на компьютере.
  2. В правом верхнем углу нажмите на значок «Настройки» Настройки.
  3. В окне «Настройки» выберите Изображения для бренда.
  4. В разделе «Логотип» нажмите Загрузить или Выбрать.
    • Используйте изображение высотой не менее 112 пикселей.
    • Удалите лишние пробелы вокруг логотипа.
  5. Укажите файл в формате JPG, PNG или GIF и нажмите Открыть или Выбрать.
  6. Нажмите Опубликовать в правом верхнем углу экрана.

Как добавить ссылки на социальные сети

Как добавить или изменить альтернативный текст

Как добавить собственный значок сайта

Вы можете выбрать значок, который будет виден рядом с названием вашего сайта на вкладке браузера. Чтобы значок появился, сайт нужно опубликовать.

  1. Откройте сайт в новой версии Google Сайтов на компьютере.
  2. В правом верхнем углу нажмите на значок «Настройки» Настройки.
  3. В окне «Настройки» выберите Изображения для бренда.
  4. В разделе «Значок сайта» нажмите Загрузить или Выбрать.
  5. Укажите файл в формате JPG, PNG или GIF.
  6. Нажмите Открыть или Выбрать.
  7. Нажмите Опубликовать в правом верхнем углу экрана.

Как добавить разделитель между элементами

Вставляя разделители между различными элементами, вы можете корректировать макет своего сайта.

  1. Откройте сайт в новой версии Google Сайтов на компьютере.
  2. На панели справа выберите Вставка затем Разделитель.
  3. Вы также можете перетаскивать разделители и изменять их размер.
  4. Чтобы изменения стали видны пользователям в интернете, нажмите Опубликовать в правом верхнем углу экрана.

Как объединить объекты в группу или отменить объединение

Текстовые поля и изображения можно объединять в группы, чтобы их было удобнее перемещать.

Как объединить текстовые поля и изображения в группу или отменить объединение

  1. Откройте сайт в новой версии Google Сайтов на компьютере.
  2. Добавьте на одну страницу изображение и текстовое поле.
  3. Перетащите изображение к верхнему или нижнему краю текстового поля, чтобы появилась линия.
  4. Чтобы отменить объединение, нажмите на изображение или текст и перетащите его из группы.

Как изменить расположение объектов в группе

  1. Откройте сайт в новой версии Google Сайтов на компьютере.
  2. Выберите группу.
  3. Нажмите на изображение или текстовое поле, которое нужно переместить.
  4. Нажимайте на клавиатуре стрелки вверх, вниз, вправо и влево.

Классический интерфейс Google Сайтов

Как добавить или изменить текст, изображения и ссылки

Как добавить или изменить текст

Как добавить текст

Как изменить текст

Как отформатировать текст

Как добавить изображение

Ссылки

  1. Откройте сайт в классической версии Google Сайтов на компьютере.
  2. Установите курсор в нужное место или выделите текст, который хотите сделать гиперссылкой.
  3. На панели инструментов нажмите на значок ссылки Ссылка.
  4. Выберите нужный вариант.
  5. Нажмите ОК.

Статьи по теме

  • Правила допустимого использования G Suite

  • Как добавить файлы Google, видео и другой контент

Эта информация оказалась полезной?

Как можно улучшить эту статью?

Источник


Download Article


Download Article

If you prefer to code websites by hand, you can edit HTML files in a basic text editor like Notepad (Windows) or TextEdit (macOS). If you would rather be able to move elements around on the screen and see live previews, you can use a WYSIWYG (What You See Is What You Get) editor like Dreamweaver or Kompozer. This wikiHow teaches you how to open and edit an HTML file in a standard or visual editing app.

  1. Image titled Edit HTML Files Step 1

    1

    Click the Windows Start button

    Image titled Windowsstart.png

    . It’s the button that has a Windows logo in the task bar. By default, it’s in the lower-left corner. This displays the Start menu

  2. Image titled Edit HTML Files Step 2

    2

    Type Notepad. This displays Notepad in the Start menu.

    Advertisement

  3. Image titled Edit HTML Files Step 3

    3

    Click Notepad. It has an icon that resembles a notepad with a blue cover.

  4. Image titled Edit HTML Files Step 4

    4

    Click File. It’s at the top of the menu bar in Notepad. This displays a drop-down menu. This displays a file browser you can use to open files in Notepad.

  5. Image titled Edit HTML Files Step 5

    5

    Click Open. It’s the second option in the File drop-down menu.

  6. Image titled Edit HTML Files Step 6

    6

    Select «All files» in the file type drop-down menu. Click the drop-down that says «Text Documents (.txt)» and select «All files» in the drop-down menu. This displays all document types (including HTML files) in the file browser.

  7. Image titled Edit HTML Files Step 7

    7

    Select an HTML file and click Open. This opens the HTML document in Notepad. You can edit the HTML code in Notepad.

    • Alternatively, you can create a new HTML document in Notepad.

  8. Image titled Edit HTML Files Step 8

    8

    Edit the HTML code. In order to edit HTML in Notepad, you’ll need to learn HTML so that you can edit it by hand. Common elements you can edit include the following.

    • <!DOCTYPE html>: This goes at the top of the HTML document. This tells the web browser that this is an HTML document.
    • <html></html>: These tags go at the top and bottom of the HTML document. This indicates where the HTML code starts and stops.
    • <head></head>: These tags go at the top of the HTML document. They indicate where the head of the HTML document starts and stops. The head of the HTML document contains information that is not seen on the web page. This includes the page title, metadata, and CSS
    • <title>Page Title</title>: These tags indicate the title the page. The title goes in the head of the HTML document. Type the title of the page in between these two tags.
    • <body></body>: These tags indicate where the body of the HTML document starts and stops. The body is where all the web page content is written. The body comes after the head in the HTML document.
    • <h1>Headline Text</h1>: These tags create headline tags. The text in between the «<h1>» and «</h1>» tags appears as a large bold text. Text goes in the body of the HTML document.
    • <p>Paragraph Text</p>: These tags are used to create paragraph text in an HTML document. The text that goes in between «<p>» and «</p>» appears as normal sized text. Text goes in the body of the HTML document.
    • <b>Bold Text</b>: These tags are used to create bold text. The text that goes in between «<b>» and «</b>» appears as bold text.
    • <i>Italic Text</i>: These tags are used to create italic text. The text that goes in between «<i>» and «</i>» appears as itallic text.
    • <a href="URL">Link text</a>: This tag is used to link to another website. Copy the web address you want to link to and paste it where it says «URL» (in between the quotation marks). The the text for the link where it says «Link text» (no quotation marks needed).
    • <img src="image URL">: This tag is used to post an image using HTML. Replace teh text that says «image URL» with the web address of the image.

  9. Image titled Edit HTML Files Step 9

    9

    Click File. It’s in the menu bar at the top of the screen.

  10. Image titled Edit HTML Files Step 10

    10

    Click Save As. This opens a dialogue box you can use to save your file.

    • To save the file as it’s existing name and file type, just click Save in the drop-down menu below «File».

  11. Image titled Edit HTML Files Step 11

    11

    Select «All Files». Use the drop-down menu next to Save as Type» to select «All Files».

  12. Image titled Edit HTML Files Step 12

    12

    Type a name for the file. Use the box next to «File Name» to type a name for the file.

  13. Image titled Edit HTML Files Step 13

    13

    Type .html at the end of the file. After you type a name for the file in the «File Name» box, add the extension «.html» at the end of the file name. Without this extension, it will save the file as a .txt file, instead of an HTML file.

  14. Image titled Edit HTML Files Step 14

    14

    Click Save. This saves the file.

    15. Advertisement

  1. Image titled Edit HTML Files Step 15

    1

    Click the magnifying glass icon

    Image titled Macspotlight.png

    . It’s in the upper-right corner of the Mac desktop. This displays a search bar.

  2. Image titled Edit HTML Files Step 16

    2

    Type TextEdit in the search bar. This displays a list of apps that match your search result.

  3. Image titled Edit HTML Files Step 17

    3

    Click TextEdit.app. It’s at the top of the search results. It’s next to an icon that resembles a sheet of paper and a pen.

  4. Image titled Edit HTML Files Step 18

    4

    Click File. It’s at the menu bar at the top of the screen when TextEdit is open.

  5. Image titled Edit HTML Files Step 19

    5

    Click Open. This opens a file browser you can use to navigate your Mac and open files.

  6. Image titled Edit HTML Files Step 20

    6

    Click an HTML file and click Open. HTML files have an extension that says «.html» after the file name. Use the file browser to navigate to an HTML file and click it to select it. Then click Open to open the HTML file in TextEdit.

  7. Image titled Edit HTML Files Step 21

    7

    Edit the HTML code. You can use TextEdit to edit HTML code on make. You need to learn HTML so that you can edit it by hand. Common elements you can edit include the following.

    • <!DOCTYPE html>: This goes at the top of the HTML document. This tells the web browser that this is an HTML document.
    • <html></html>: These tags go at the top and bottom of the HTML document. This indicates where the HTML code starts and stops.
    • <head></head>: These tags go at the top of the HTML document. They indicate where the head of the HTML document starts and stops. The head of the HTML document contains information that is not seen on the web page. This includes the page title, metadata, and CSS
    • <title>Page Title</title>: These tags indicate the title the page. The title goes in the head of the HTML document. Type the title of the page in between these two tags.
    • <body></body>: These tags indicate where the body of the HTML document starts and stops. The body is where all the web page content is written. The body comes after the head in the HTML document.
    • <h1>Headline Text</h1>: These tags create headline tags. The text in between the «<h1>» and «</h1>» tags appears as a large bold text. Text goes in the body of the HTML document.
    • <p>Paragraph Text</p>: These tags are used to create paragraph text in an HTML document. The text that goes in between «<p>» and «</p>» appears as normal sized text. Text goes in the body of the HTML document.
    • <b>Bold Text</b>: These tags are used to create bold text. The text that goes in between «<b>» and «</b>» appears as bold text.
    • <i>Italic Text</i>: These tags are used to create italic text. The text that goes in between «<i>» and «</i>» appears as itallic text.
    • <a href="URL">Link text</a>: This tag is used to link to another website. Copy the web address you want to link to and paste it where it says «URL» (in between the quotation marks). The the text for the link where it says «Link text» (no quotation marks needed).
    • <img src="image URL">: This tag is used to post an image using HTML. Replace teh text that says «image URL» with the web address of the image.

  8. Image titled Edit HTML Files Step 22

    8

    Click File. It’s in the menu bar at the top of the screen.

  9. Image titled Edit HTML Files Step 23

    9

    Click Save. It’s in the drop-down menu below «File». This saves the HTML file.

    • To change the name of the file, click Rename in the «File» drop-down menu. Type a new name for the file at the top of the screen. Be sure to include the «.html» extension at the top of the page.

    10. Advertisement

  1. Image titled Edit HTML Files Step 24

    1

    Open Dreamweaver. Dreamweaver has an icon that resembles a green square that says «Dw» in the middle. Click the icon in the Windows Start menu, or Application folder on Mac to open Dreamweaver.

    • Adobe Dreamweaver requires a subscription. You can purchase a subscription starting at $20.99 a month.

  2. Image titled Edit HTML Files Step 25

    2

    Click File. It’s in the menu bar at the top fo the screen.

  3. Image titled Edit HTML Files Step 26

    3

    Click Open. It’s in the drop-down menu below «File».

  4. Image titled Edit HTML Files Step 27

    4

    Select an HTML document and click Open. Use the file browser to select an HTML document on your computer and click it to select it. Then click Open in the lower-right corner.

  5. Image titled Edit HTML Files Step 28

    5

    Click Split. It’s the middle tab at the top of the page. This displays a split screen that contains an HTML editor on the bottom and a preview screen on top.[1]

  6. Image titled Edit HTML Files Step 29

    6

    Edit the HTML document. Use the HTML editor to edit HTML. The way you edit HTML in Dreamweaver isn’t too different from editing HTML in Notepad or TextEdit. As you type an HTML tag, a search menu will appear with matching HTML tags. You can click the HTML tag to insert its opening and closing tags. Dreamweaver will check to make sure there are opening and closing tags for all your HTML elements.

    • Alternatively, you can click where you want to insert an HTML element in the HTML editor and click Insert in the menu bar at the top of the screen. Click the item you want to insert in the drop-down menu to add the HTML code automatically.

  7. Image titled Edit HTML Files Step 30

    7

    Click File. When you are done editing the HTML document, click File in the menu bar at the top of the screen.

  8. Image titled Edit HTML Files Step 31

    8

    Click Save. It’s in the drop-down menu below File. This saves your HTML document.

    9. Advertisement

  1. Image titled Edit HTML Files Step 32

    1

    Go to https://sourceforge.net/projects/kompozer/ in a web browser. You can use any web browser on PC or Mac. This is the download page for Kompozer. It is a free HTML (WYSIWYG) editor that works on both Windows and Mac.

  2. Image titled Edit HTML Files Step 33

    2

    Click Download. It’s the green button near the top of the page. This takes you to a separate download page. After a 5 second delay, your download will begin.

  3. Image titled Edit HTML Files Step 34

    3

    Double-Click the Install file. By default, your downloaded files can be found in your «Downloads» folder on PC or Mac. You can also click on them in your web browser to launch the Kompozer installer. Use the following instructions to install Kompozer:

    • Windows:

      • If asked if you want to allow the installer to make changes to your system, click Yes.
      • Click Next in the intro windows.
      • Click the radial button next to «I accept the agreement» and click Next.
      • Click Next to use the default install location or click Browse to select a different install location.
      • Click Next and then click Next again
      • Click Install
      • Click Finish
    • Mac:

      • Double-click the Kompozer install file.
      • Click KompoZer.app
      • Click the Apple icon in the upper-left corner.
      • Click System Preferences
      • Click Security and Privacy
      • Click the General tab.
      • Click Open Anyway near the bottom of the window.
      • Click Open in the pop-up Window.
      • Drag the Kompozer icon to your desktop.
      • Open the Finder.
      • Click the Applications folder.
      • Drag the Kompozer icon from the desktop to the Applications folder.

  4. Image titled Edit HTML Files Step 35

    4

    Open Kompozer. Use the following steps to open Kompozer on PC or Mac

    • Windows:

      • Click the Windows Start menu.
      • Type «Kompozer»
      • Double-click the Kompozer icon.
    • Mac:

      • Click the magnifying glass icon in the upper-right corner.
      • Type «Kompozer» in the search bar.
      • Double-click Kompozer.app.

  5. Image titled Edit HTML Files Step 36

    5

    Click File. It’s in the menu bar at the top of the app.

  6. Image titled Edit HTML Files Step 37

    6

    Click Open File. It’s the second option in the drop-down menu below «File». This open a file browser you can use to select an open HTML file.

  7. Image titled Edit HTML Files Step 38

    7

    Click an HTML file and click Open. This opens the HTML file in Kompozer.

  8. Image titled Edit HTML Files Step 39

    8

    Click Split. It’s the middle tab at the top of the page. This displays a split screen that contains an HTML editor on the bottom and a preview screen on top.

    • You may need to enlarge the app so that you have more room to work.

  9. Image titled Edit HTML Files Step 40

    9

    Edit the HTML document. The HTML source code screen is on the bottom, you can use this screen to edit HTML much the same way you would in Notepad or TextEdit. You can also use the preview screen to edit your HTML using the following steps:

    • Use the drop-down menu in the upper-right corner to select the text type (i.e Heading, paragraph, ect}
    • Click and type to add text.
    • Use the buttons in the panel at the top of the screen to add bold, italics, text alignment, indents, or lists to your text.
    • Click the colored square in the panel at the top of the screen to change the text color.
    • Click the Image icon at the top of the screen to add an image to your HTML document.
    • Click the icon that resembles a chainlink to add a link to your HTML document.

  10. Image titled Edit HTML Files Step 41

    10

    Click the Save icon. Once you are done making changes to your document, click the Save icon at the top of the screen. It’s below an icon that resembles a floppy disk. This saves your work.

    11. Advertisement

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Advertisement

Thanks for submitting a tip for review!

  • Remember to save your document while editing. Something could go wrong at any moment.

Advertisement

References

About This Article

Article SummaryX

1. Open Notepad on Windows or TextEdit on Mac.
2. Click File.
3. Click Open.
4. Select «All Files» in the drop-down next to the file name box on Windows.
5. Click and HTML file to select it and click Open.
6. Use the text editor to edit the HTML tags.
7. Click File.
8. Click Save.

Did this summary help you?

Thanks to all authors for creating a page that has been read 118,215 times.

Is this article up to date?

Источник


Download Article


Download Article

If you prefer to code websites by hand, you can edit HTML files in a basic text editor like Notepad (Windows) or TextEdit (macOS). If you would rather be able to move elements around on the screen and see live previews, you can use a WYSIWYG (What You See Is What You Get) editor like Dreamweaver or Kompozer. This wikiHow teaches you how to open and edit an HTML file in a standard or visual editing app.

  1. Image titled Edit HTML Files Step 1

    1

    Click the Windows Start button

    Image titled Windowsstart.png

    . It’s the button that has a Windows logo in the task bar. By default, it’s in the lower-left corner. This displays the Start menu

  2. Image titled Edit HTML Files Step 2

    2

    Type Notepad. This displays Notepad in the Start menu.

    Advertisement

  3. Image titled Edit HTML Files Step 3

    3

    Click Notepad. It has an icon that resembles a notepad with a blue cover.

  4. Image titled Edit HTML Files Step 4

    4

    Click File. It’s at the top of the menu bar in Notepad. This displays a drop-down menu. This displays a file browser you can use to open files in Notepad.

  5. Image titled Edit HTML Files Step 5

    5

    Click Open. It’s the second option in the File drop-down menu.

  6. Image titled Edit HTML Files Step 6

    6

    Select «All files» in the file type drop-down menu. Click the drop-down that says «Text Documents (.txt)» and select «All files» in the drop-down menu. This displays all document types (including HTML files) in the file browser.

  7. Image titled Edit HTML Files Step 7

    7

    Select an HTML file and click Open. This opens the HTML document in Notepad. You can edit the HTML code in Notepad.

    • Alternatively, you can create a new HTML document in Notepad.

  8. Image titled Edit HTML Files Step 8

    8

    Edit the HTML code. In order to edit HTML in Notepad, you’ll need to learn HTML so that you can edit it by hand. Common elements you can edit include the following.

    • <!DOCTYPE html>: This goes at the top of the HTML document. This tells the web browser that this is an HTML document.
    • <html></html>: These tags go at the top and bottom of the HTML document. This indicates where the HTML code starts and stops.
    • <head></head>: These tags go at the top of the HTML document. They indicate where the head of the HTML document starts and stops. The head of the HTML document contains information that is not seen on the web page. This includes the page title, metadata, and CSS
    • <title>Page Title</title>: These tags indicate the title the page. The title goes in the head of the HTML document. Type the title of the page in between these two tags.
    • <body></body>: These tags indicate where the body of the HTML document starts and stops. The body is where all the web page content is written. The body comes after the head in the HTML document.
    • <h1>Headline Text</h1>: These tags create headline tags. The text in between the «<h1>» and «</h1>» tags appears as a large bold text. Text goes in the body of the HTML document.
    • <p>Paragraph Text</p>: These tags are used to create paragraph text in an HTML document. The text that goes in between «<p>» and «</p>» appears as normal sized text. Text goes in the body of the HTML document.
    • <b>Bold Text</b>: These tags are used to create bold text. The text that goes in between «<b>» and «</b>» appears as bold text.
    • <i>Italic Text</i>: These tags are used to create italic text. The text that goes in between «<i>» and «</i>» appears as itallic text.
    • <a href="URL">Link text</a>: This tag is used to link to another website. Copy the web address you want to link to and paste it where it says «URL» (in between the quotation marks). The the text for the link where it says «Link text» (no quotation marks needed).
    • <img src="image URL">: This tag is used to post an image using HTML. Replace teh text that says «image URL» with the web address of the image.

  9. Image titled Edit HTML Files Step 9

    9

    Click File. It’s in the menu bar at the top of the screen.

  10. Image titled Edit HTML Files Step 10

    10

    Click Save As. This opens a dialogue box you can use to save your file.

    • To save the file as it’s existing name and file type, just click Save in the drop-down menu below «File».

  11. Image titled Edit HTML Files Step 11

    11

    Select «All Files». Use the drop-down menu next to Save as Type» to select «All Files».

  12. Image titled Edit HTML Files Step 12

    12

    Type a name for the file. Use the box next to «File Name» to type a name for the file.

  13. Image titled Edit HTML Files Step 13

    13

    Type .html at the end of the file. After you type a name for the file in the «File Name» box, add the extension «.html» at the end of the file name. Without this extension, it will save the file as a .txt file, instead of an HTML file.

  14. Image titled Edit HTML Files Step 14

    14

    Click Save. This saves the file.

    15. Advertisement

  1. Image titled Edit HTML Files Step 15

    1

    Click the magnifying glass icon

    Image titled Macspotlight.png

    . It’s in the upper-right corner of the Mac desktop. This displays a search bar.

  2. Image titled Edit HTML Files Step 16

    2

    Type TextEdit in the search bar. This displays a list of apps that match your search result.

  3. Image titled Edit HTML Files Step 17

    3

    Click TextEdit.app. It’s at the top of the search results. It’s next to an icon that resembles a sheet of paper and a pen.

  4. Image titled Edit HTML Files Step 18

    4

    Click File. It’s at the menu bar at the top of the screen when TextEdit is open.

  5. Image titled Edit HTML Files Step 19

    5

    Click Open. This opens a file browser you can use to navigate your Mac and open files.

  6. Image titled Edit HTML Files Step 20

    6

    Click an HTML file and click Open. HTML files have an extension that says «.html» after the file name. Use the file browser to navigate to an HTML file and click it to select it. Then click Open to open the HTML file in TextEdit.

  7. Image titled Edit HTML Files Step 21

    7

    Edit the HTML code. You can use TextEdit to edit HTML code on make. You need to learn HTML so that you can edit it by hand. Common elements you can edit include the following.

    • <!DOCTYPE html>: This goes at the top of the HTML document. This tells the web browser that this is an HTML document.
    • <html></html>: These tags go at the top and bottom of the HTML document. This indicates where the HTML code starts and stops.
    • <head></head>: These tags go at the top of the HTML document. They indicate where the head of the HTML document starts and stops. The head of the HTML document contains information that is not seen on the web page. This includes the page title, metadata, and CSS
    • <title>Page Title</title>: These tags indicate the title the page. The title goes in the head of the HTML document. Type the title of the page in between these two tags.
    • <body></body>: These tags indicate where the body of the HTML document starts and stops. The body is where all the web page content is written. The body comes after the head in the HTML document.
    • <h1>Headline Text</h1>: These tags create headline tags. The text in between the «<h1>» and «</h1>» tags appears as a large bold text. Text goes in the body of the HTML document.
    • <p>Paragraph Text</p>: These tags are used to create paragraph text in an HTML document. The text that goes in between «<p>» and «</p>» appears as normal sized text. Text goes in the body of the HTML document.
    • <b>Bold Text</b>: These tags are used to create bold text. The text that goes in between «<b>» and «</b>» appears as bold text.
    • <i>Italic Text</i>: These tags are used to create italic text. The text that goes in between «<i>» and «</i>» appears as itallic text.
    • <a href="URL">Link text</a>: This tag is used to link to another website. Copy the web address you want to link to and paste it where it says «URL» (in between the quotation marks). The the text for the link where it says «Link text» (no quotation marks needed).
    • <img src="image URL">: This tag is used to post an image using HTML. Replace teh text that says «image URL» with the web address of the image.

  8. Image titled Edit HTML Files Step 22

    8

    Click File. It’s in the menu bar at the top of the screen.

  9. Image titled Edit HTML Files Step 23

    9

    Click Save. It’s in the drop-down menu below «File». This saves the HTML file.

    • To change the name of the file, click Rename in the «File» drop-down menu. Type a new name for the file at the top of the screen. Be sure to include the «.html» extension at the top of the page.

    10. Advertisement

  1. Image titled Edit HTML Files Step 24

    1

    Open Dreamweaver. Dreamweaver has an icon that resembles a green square that says «Dw» in the middle. Click the icon in the Windows Start menu, or Application folder on Mac to open Dreamweaver.

    • Adobe Dreamweaver requires a subscription. You can purchase a subscription starting at $20.99 a month.

  2. Image titled Edit HTML Files Step 25

    2

    Click File. It’s in the menu bar at the top fo the screen.

  3. Image titled Edit HTML Files Step 26

    3

    Click Open. It’s in the drop-down menu below «File».

  4. Image titled Edit HTML Files Step 27

    4

    Select an HTML document and click Open. Use the file browser to select an HTML document on your computer and click it to select it. Then click Open in the lower-right corner.

  5. Image titled Edit HTML Files Step 28

    5

    Click Split. It’s the middle tab at the top of the page. This displays a split screen that contains an HTML editor on the bottom and a preview screen on top.[1]

  6. Image titled Edit HTML Files Step 29

    6

    Edit the HTML document. Use the HTML editor to edit HTML. The way you edit HTML in Dreamweaver isn’t too different from editing HTML in Notepad or TextEdit. As you type an HTML tag, a search menu will appear with matching HTML tags. You can click the HTML tag to insert its opening and closing tags. Dreamweaver will check to make sure there are opening and closing tags for all your HTML elements.

    • Alternatively, you can click where you want to insert an HTML element in the HTML editor and click Insert in the menu bar at the top of the screen. Click the item you want to insert in the drop-down menu to add the HTML code automatically.

  7. Image titled Edit HTML Files Step 30

    7

    Click File. When you are done editing the HTML document, click File in the menu bar at the top of the screen.

  8. Image titled Edit HTML Files Step 31

    8

    Click Save. It’s in the drop-down menu below File. This saves your HTML document.

    9. Advertisement

  1. Image titled Edit HTML Files Step 32

    1

    Go to https://sourceforge.net/projects/kompozer/ in a web browser. You can use any web browser on PC or Mac. This is the download page for Kompozer. It is a free HTML (WYSIWYG) editor that works on both Windows and Mac.

  2. Image titled Edit HTML Files Step 33

    2

    Click Download. It’s the green button near the top of the page. This takes you to a separate download page. After a 5 second delay, your download will begin.

  3. Image titled Edit HTML Files Step 34

    3

    Double-Click the Install file. By default, your downloaded files can be found in your «Downloads» folder on PC or Mac. You can also click on them in your web browser to launch the Kompozer installer. Use the following instructions to install Kompozer:

    • Windows:

      • If asked if you want to allow the installer to make changes to your system, click Yes.
      • Click Next in the intro windows.
      • Click the radial button next to «I accept the agreement» and click Next.
      • Click Next to use the default install location or click Browse to select a different install location.
      • Click Next and then click Next again
      • Click Install
      • Click Finish
    • Mac:

      • Double-click the Kompozer install file.
      • Click KompoZer.app
      • Click the Apple icon in the upper-left corner.
      • Click System Preferences
      • Click Security and Privacy
      • Click the General tab.
      • Click Open Anyway near the bottom of the window.
      • Click Open in the pop-up Window.
      • Drag the Kompozer icon to your desktop.
      • Open the Finder.
      • Click the Applications folder.
      • Drag the Kompozer icon from the desktop to the Applications folder.

  4. Image titled Edit HTML Files Step 35

    4

    Open Kompozer. Use the following steps to open Kompozer on PC or Mac

    • Windows:

      • Click the Windows Start menu.
      • Type «Kompozer»
      • Double-click the Kompozer icon.
    • Mac:

      • Click the magnifying glass icon in the upper-right corner.
      • Type «Kompozer» in the search bar.
      • Double-click Kompozer.app.

  5. Image titled Edit HTML Files Step 36

    5

    Click File. It’s in the menu bar at the top of the app.

  6. Image titled Edit HTML Files Step 37

    6

    Click Open File. It’s the second option in the drop-down menu below «File». This open a file browser you can use to select an open HTML file.

  7. Image titled Edit HTML Files Step 38

    7

    Click an HTML file and click Open. This opens the HTML file in Kompozer.

  8. Image titled Edit HTML Files Step 39

    8

    Click Split. It’s the middle tab at the top of the page. This displays a split screen that contains an HTML editor on the bottom and a preview screen on top.

    • You may need to enlarge the app so that you have more room to work.

  9. Image titled Edit HTML Files Step 40

    9

    Edit the HTML document. The HTML source code screen is on the bottom, you can use this screen to edit HTML much the same way you would in Notepad or TextEdit. You can also use the preview screen to edit your HTML using the following steps:

    • Use the drop-down menu in the upper-right corner to select the text type (i.e Heading, paragraph, ect}
    • Click and type to add text.
    • Use the buttons in the panel at the top of the screen to add bold, italics, text alignment, indents, or lists to your text.
    • Click the colored square in the panel at the top of the screen to change the text color.
    • Click the Image icon at the top of the screen to add an image to your HTML document.
    • Click the icon that resembles a chainlink to add a link to your HTML document.

  10. Image titled Edit HTML Files Step 41

    10

    Click the Save icon. Once you are done making changes to your document, click the Save icon at the top of the screen. It’s below an icon that resembles a floppy disk. This saves your work.

    11. Advertisement

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Advertisement

Thanks for submitting a tip for review!

  • Remember to save your document while editing. Something could go wrong at any moment.

Advertisement

References

About This Article

Article SummaryX

1. Open Notepad on Windows or TextEdit on Mac.
2. Click File.
3. Click Open.
4. Select «All Files» in the drop-down next to the file name box on Windows.
5. Click and HTML file to select it and click Open.
6. Use the text editor to edit the HTML tags.
7. Click File.
8. Click Save.

Did this summary help you?

Thanks to all authors for creating a page that has been read 118,215 times.

Is this article up to date?

Источник

Понравилась статья? Поделить с друзьями:
  • Как изменить текст на сайте через код элемента навсегда
  • Как изменить текст на сайте через код элемента на телефоне
  • Как изменить текст на сайте через код элемента на андроиде
  • Как изменить текст бегущей строки через флешку
  • Как изменить текст на сайте через код страницы