Как редактировать HTML-файл
Обновлено: 21.11.2024
В этой статье представлено пошаговое руководство по созданию документа HTML, включая такие элементы, как ввод текста и добавление изображений и гиперссылок в документ HTML.
Создайте HTML-документ
Используйте один из следующих двух способов для создания нового HTML-документа.
Способ 1
Запустите Microsoft Word.
На панели задач "Новый документ" нажмите "Пустая веб-страница" в разделе "Создать".
В меню "Файл" нажмите "Сохранить".
ПРИМЕЧАНИЕ. В поле "Тип файла" по умолчанию указано "Веб-страница" (*.htm; *.html).
В поле "Имя файла" введите имя файла документа и нажмите "Сохранить".
Метод 2
Запустите Microsoft Word.
Создайте новый пустой документ.
В меню "Файл" нажмите "Сохранить как веб-страницу".
В поле "Имя файла" введите имя файла документа и нажмите "Сохранить".
Добавьте текст и гиперссылки в HTML-документ
Откройте документ HTML, созданный ранее в этой статье. Для этого выполните следующие действия:
В меню "Файл" нажмите "Открыть".
Перейдите к папке, в которой вы сохранили свою статью, в разделе "Создание HTML-документа" этой статьи.
Выберите файл и нажмите «Открыть».
Введите следующий текст в документ:
Вы можете использовать Microsoft Word для создания HTML-документов так же просто, как и обычные документы Word.
Чтобы создать гиперссылку, выберите слова "Microsoft Word" в введенном тексте.
В меню "Вставка" нажмите "Гиперссылка".
Сохраните изменения в документе.
Добавьте изображение в свой HTML-документ
Поместите точку вставки там, где вы хотите разместить изображение в документе.
В меню "Вставка" выберите "Изображение" и нажмите "КлипАрт".
На панели задач "Вставка клипа" нажмите "Поиск".
ПРИМЕЧАНИЕ. Если вы нажмете «Поиск», не вводя ничего в поле «Текст поиска», в результатах поиска будут отображаться все изображения, доступные в настоящее время в вашей системе.
В разделе "Результаты" выберите изображение, которое вы хотите вставить на страницу.
Сохраните изменения и закройте документ.
Открыть HTML-документ в Word
Выполните одно из следующих действий.
Если панель задач "Новый документ" по-прежнему отображается:
На панели задач «Новый документ» выберите документ в разделе «Открыть документ». Документ открывается напрямую.
Если область задач "Новый документ" не отображается:
В меню "Файл" нажмите "Открыть".
В диалоговом окне "Открыть" найдите созданный ранее HTML-документ и выберите его.
ССЫЛКИ
Для получения дополнительных сведений о поддержке HTML в Word 2002 выполните следующие действия:
Откройте Microsoft Word 2002.
В меню "Справка" нажмите "Справка Microsoft Word".
Перейдите на вкладку Мастер ответов.
Введите HTML в поле Что бы вы хотели сделать? и нажмите "Поиск".
Будут отображаться связанные темы. Щелкните любой элемент, чтобы отобразить информацию.
Итак, вы хотите знать, как редактировать HTML-файлы? Вот правильный и неправильный способ редактирования HTML-кода, а также БЕСПЛАТНОЕ программное обеспечение, чтобы вы могли сразу приступить к редактированию.
Хорошо, у вас есть веб-страница, и вам нужно отредактировать HTML-код, чтобы добавить на нее свою собственную информацию, такую как ваше имя, ссылку для заказа, номер телефона, код AdSense или автоответчика или ваш собственный текст.
Когда вы дважды щелкаете файл, веб-браузер по умолчанию открывает его, и все, что вы видите, это фактическая веб-страница, а не код, который нужно редактировать.
Решение? Вам необходимо открыть файл HTML в программе, которая будет иметь доступ к HTML.
Неправильный способ редактирования HTML-кода
Неправильный способ редактирования HTML-кода – использование HTML-редактора WYSIWYG для веб-дизайна.
Несмотря на то, что WYSIWYG-редакторы имеют возможность доступа к фактическому HTML-коду веб-документа, они не являются лучшим выбором для редактирования HTML, поскольку у них плохая репутация из-за раздувания кода.
Это означает, что если вы откроете файл веб-страницы HTML в одном из этих редакторов, в HTML может быть добавлен лишний (ненужный) код.
Самое плохое, что может случиться, это то, что ваша страница может выглядеть иначе после ее сохранения. Тогда вам придется тратить время на исправление дизайна. Плохо, если все, что вы хотели сделать, это добавить ссылку для заказа.
Редакторы WYSIWYG на самом деле представляют собой тип программного обеспечения для веб-дизайна. Единственный раз, когда вы должны использовать программное обеспечение WYSIWYG для редактирования HTML-кода, — это если вы фактически создали веб-страницу в этом конкретном программном обеспечении. Таким образом, даже если у вас есть файл HTML, созданный с помощью редактора WYSIWYG, не следует пытаться редактировать тот же файл с помощью другого редактора WYSIWYG.
Хотя в наши дни существует множество очень хороших WYSIWYG-редакторов, я бы использовал их только для разработки и создания веб-страниц, а не для быстрого редактирования.
Правильный способ редактирования HTML-кода
Правильный способ редактирования HTML-кода — использовать редактор обычного текста или редактор кода (он же редактор для программистов).
Эти типы редакторов не будут вносить несанкционированные изменения в файл HTML, что означает, что вы не получите неприятных сюрпризов после сохранения изменений.
Как найти бесплатные текстовые редакторы и редакторы кода
Лучший способ найти высококачественные редакторы Free Code/Programmers – это использовать свою любимую поисковую систему и искать определенные фразы, которые дадут результаты только с действительно бесплатным программным обеспечением, за которое вам никогда не придется платить. Два ключевых слова, которые следует использовать во всех поисковых запросах, связанных с поиском Code Editor или Programmers Editor, — Open Source.
Пример 1: Редактор с открытым исходным кодом
Пример 2: Редактор с открытым исходным кодом для программистов
Пример 3: Редактор с открытым исходным кодом для Mac
Пример 4: Редактор с открытым исходным кодом для Windows
Поиск по фразам, подобным приведенным выше, возвращает хороший выбор результатов для абсолютно БЕСПЛАТНЫХ редакторов с открытым исходным кодом/программистов. Как только вы найдете редактор, который хотите использовать, просто откройте файл HTML в редакторе и начните редактирование.
Если вам по какой-либо причине не нравится определенный редактор после его установки, просто попробуйте другой.
Помимо множества выдающихся функций редакторов кода, основное различие между редактором кода и текстовым редактором заключается в том, что редакторы кода имеют встроенные средства подсветки синтаксиса, в то время как текстовый редактор отображает код только в черно-белом режиме. Преимущество подсветки синтаксиса в том, что она значительно упрощает редактирование.
Редактирование HTML-кода в Visual Studio Code
На моем компьютере с Windows я использую редактор кода под названием phpDesigner. Несмотря на то, что я не использую phpDesigner для написания PHP-кода, он мне нравится для редактирования HTML. Однако phpDesigner платный.
На своем Mac я использую бесплатный редактор кода Visual Studio Code. Его можно использовать на компьютерах Mac, Windows и Linux.
Chrome DevTools – это мощный набор инструментов для веб-разработки, встроенный прямо в браузер Chrome. Одной из самых полезных функций DevTools для веб-разработчиков является возможность редактировать HTML и CSS на странице в реальном времени. Эта функция позволяет любому разработчику, даже со слабым знанием HTML и CSS, быстро создавать прототипы и повторять возможные изменения веб-страницы.
Во время работы над Lucidchart одним из моих недавних проектов было добавление флажков к полям ввода, где пользователи вводят свою платежную информацию, чтобы обеспечить немедленную обратную связь, когда пользователи вводят правильно отформатированную и достоверную информацию. Несмотря на то, что мне удобнее работать с нашим серверным кодом, чем с CSS и HTML, я смог легко реализовать эти галочки с помощью возможности редактирования в реальном времени.
Редактирование HTML с помощью инспектора
Есть два быстрых способа открыть инспектор. Во-первых, откройте DevTools с помощью F12, выберите вкладку «Элементы» и щелкните значок курсора в левом верхнем углу. Второй, более быстрый способ — использовать сочетание клавиш Ctrl+Shift+C. Если вы регулярно работаете в среде Linux, скорее всего, вы много раз случайно использовали этот ярлык, когда хотели скопировать текст!
Когда инспектор активен, вы можете найти HTML-код любого элемента на странице, щелкнув его. Chrome также покажет вам информацию о расположении и размере элементов при наведении на них курсора.
Вы можете найти HTML-код любого элемента на странице, щелкнув его.
После того как элемент выбран, вы можете взаимодействовать с ним самыми разными способами. Щелкнув правой кнопкой мыши на HTML-коде на вкладке "Элементы" и выбрав "Редактировать как HTML", вы можете вносить живые изменения в разметку веб-страницы, которую Chrome сразу же отобразит после того, как вы закончите редактирование.
Сообщить DevTools, что вы закончили редактирование, может быть сложно. Ваш первый порыв может состоять в том, чтобы нажать клавишу Escape, но это выведет вас из режима редактирования и отменит ваши изменения. Вы можете убедиться, что ваши изменения сохранены, нажав Ctrl+Enter или просто щелкнув за пределами текстового поля, которое вы редактируете.
Редактирование HTML можно отменить или повторить с помощью обычных горячих клавиш Ctrl+Z и Ctrl+Y. Они также будут потеряны при обновлении страницы, если вы не включите постоянное редактирование.
Чтобы начать свой проект с галочками, я начал с создания элемента-прототипа в качестве места для тестирования настроек, которые я хотел внести. Используя функцию интерактивного редактирования Chrome DevTools, я добавил заполнитель div, содержащий только букву «X», в качестве временной импровизированной галочки.
Редактировать как Html позволяет вносить изменения в веб-страницу в режиме реального времени в Chrome.
Очевидно, что это очень плохое оправдание для галочки, но этого достаточно, чтобы помочь мне быстро определить некоторые проблемы заранее. Во-первых, галочка стоит совершенно не в том месте. Кроме того, это испортило выравнивание других элементов на странице. Обе эти проблемы можно решить с помощью CSS. К счастью, Chrome также предоставляет несколько отличных инструментов для быстрого прототипирования изменений CSS с помощью DevTools.
Редактирование CSS на вкладке «Элементы»
Справа от представления HTML на вкладке "Элементы" находится представление, показывающее, какие правила CSS применяются к выбранному элементу. Это представление может быть чрезвычайно полезным для отладки множества ошибок CSS. Например, поскольку вы можете видеть, какие правила применяются к текущему элементу, вы можете определить, применяются ли к элементу правила CSS, которые вы не ожидали, или отсутствуют правила CSS, которые, по вашему мнению, применялись к нему. Представление CSS также показывает, когда стиль, примененный соответствующим правилом, переопределяется более конкретным правилом.
Представление CSS предоставляет очень полезные функции редактирования в реальном времени. Рядом с каждым стилем есть флажок, позволяющий включать или отключать определенные стили и видеть, как они влияют на элементы на странице. Вы также можете применить новые стили к определенному элементу, существующему правилу CSS или совершенно новому правилу CSS. Все эти изменения немедленно отражаются на странице.
Инструменты разработчика Chrome предоставляют ряд удобных функций, упрощающих редактирование CSS в реальном времени. Наиболее полезным для тех, кто менее знаком с CSS, является автозаполнение. Когда вы вводите название своего стиля, Chrome будет предлагать вероятные совпадения. Как только вы введете имя стиля, Chrome также поможет вам использовать правильное значение для этого стиля. Для перечисленных стилей, таких как «позиция» или «отображение», Chrome покажет вам допустимые значения на выбор. Для числового ввода вы можете использовать стрелки вверх и вниз, чтобы увеличить значение на 1 без повторного ввода единиц измерения.
Как и при редактировании HTML в реальном времени, вы можете отменить или повторить изменения CSS в реальном времени с помощью Ctrl+Z и Ctrl+Y.
С помощью DevTools я смог очень легко подобрать комбинацию правил CSS, которая выровняла мой псевдофлажок там, где мне было нужно. Процесс включал в себя пробы и ошибки, но оперативное редактирование сделало цикл итерации очень коротким, что было особенно полезно для новичка в CSS, такого как я.
Редактирование CSS в реальном времени – это отличный способ быстро внести незначительные изменения в CSS.
Заключение
Мы только поверхностно рассмотрели, на что способны инструменты Chrome DevTools для редактирования в реальном времени, особенно в области CSS. Эти основные советы всегда бесценны для меня, когда я отлаживаю проблему с CSS или быстро создаю прототип нового изменения CSS.
В этой статье я покажу, как создавать, открывать и редактировать файлы HTML в TextEdit.
Что такое TextEdit?
TextEdit — это бесплатный текстовый процессор, предустановленный на вашем компьютере Mac. Он существует уже более 25 лет, и это простой способ открывать и читать текстовые файлы, текстовые файлы и даже файлы HTML.
Как создать файл HTML в TextEdit
<р>2. Нажмите «Формат» и нажмите «Сделать обычным текстом».<р>3. Добавьте в файл базовый шаблон HTML.
<р>4. Выберите «Файл» > «Сохранить». <р>5. Назовите файл с расширением .html. Это сообщит компьютеру, что он работает с файлом HTML. Нажмите Сохранить.<р>6. Нажмите «Использовать .html».
Перейдите к этому вновь созданному файлу на своем компьютере и дважды щелкните его, чтобы открыть в браузере. Вы должны увидеть этот результат:
Как открывать документы HTML в TextEdit
Есть два способа открыть файл HTML в TextEdit.
Вариант 1
Перейдите к HTML-файлу, который хотите открыть, щелкните файл правой кнопкой мыши и выберите TextEdit, чтобы открыть его.
Вариант 2
Откройте TextEdit и нажмите «Файл» > «Открыть».Вы также можете навести указатель мыши на параметр «Открыть последние», если вы недавно открывали этот файл.
Режим редактирования кода TextEdit
В TextEdit есть возможность всегда отображать HTML-файлы в виде HTML-кода.
<р>2. Нажмите «Открыть и сохранить»:<р>3. Установите флажок Отображать HTML-файлы как HTML-код вместо форматированного текста:
Теперь вы можете вносить изменения в HTML-файл и просматривать результаты в браузере.
Именно так вы создаете, сохраняете, открываете и редактируете файлы HTML в TextEdit.
Я музыкант и программист.
Если вы дочитали до этого места, отправьте твит автору, чтобы показать, что вам не все равно. Твитнуть спасибо
Научитесь программировать бесплатно. Учебная программа freeCodeCamp с открытым исходным кодом помогла более чем 40 000 человек получить работу в качестве разработчиков. Начать
freeCodeCamp – это поддерживаемая донорами некоммерческая организация, освобожденная от налогов в соответствии со статьей 501(c)(3) (идентификационный номер федерального налогоплательщика США: 82-0779546)
Наша миссия: помочь людям научиться программировать бесплатно. Мы достигаем этого, создавая тысячи видеороликов, статей и интерактивных уроков по кодированию — все они находятся в свободном доступе. У нас также есть тысячи учебных групп freeCodeCamp по всему миру.
Пожертвования в пользу freeCodeCamp идут на наши образовательные инициативы и помогают оплачивать серверы, услуги и персонал.
Читайте также: