Редактировать исходный код

Разберемся, что такое исходный код

Мне самому не нравится, когда начинают втирать теорию!

Но когда люди говорят(вообще) и в частности :
исходный код
, то это может означать для разных людей разное!

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

Нажимаем кнопку исследовать элемент

Перед вами откроется код во кладке – “Elements”(здесь нужно оговориться, что в этом месте – это не совсем “исходный код”, а тот, что выше я назвал “исполн
енный

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

№1. как редактировать исходный код через браузер?

Есть способ “редактировать исходный код через браузер” – этот вариант – без сохранения отредактированных данных.

Зачем нужен такой способ?

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

№2. как редактировать исходный код через браузер?

Для редактирования “исходного кода страницы” через браузер с изменениями – для этого может потребоваться множество шагов для реализации этой задачи!

Довольно долго придется объяснять – это задача для движка…например.

Или вот пример в видео, как редактируется исходный код страницы.

На видео – это конечно же не исходный код страницы, а тот, что мы выше называли “исполн
яемый
” – все переменные – это уникальный контент страницы.
Но!

Точно таким же способом… можно получить

и уже отредактировать не текст, а “исходный код”!

Добавляем картинку фона

За это отвечает правило background-image. На сайте открываем просмотр кода элемента нашего фона и в правой колонке вставляем для фона сайта это правило, ставим двоеточие и затем потребуется ссылка. Записываем url (“ “) и в кавычках пишем ссылку на картинку.

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

Не забываем

Я старался для вас!

Как изменить код элемента, отвечающего за его цвет

В коде сайта, в правой колонке отображаются правила, где можно поменять необходимые объекты. Это может быть цвет, размер шрифтов и т. д. Допустим, нужно изменить цвет нашего заголовка.

В правой колонке, в первой строке видим .art-postheader {

Это такой идентификатор заголовка. В фигурных скобках задаются параметры, это цвет, толщина шрифта, подчеркивание текста и т. д.

Цвет в данном случае темно-синий, ближе к черному. При помощи изменения правил можно поменять его, например, на красный с кодом цвета — #FF3300, чтобы заголовок выглядел так

Соответственно, код будет таким

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

Для этого копируем .art-postheader, заходим в панель администрирования WordPress, Внешний вид — Редактор, открываем таблицу стилей style.css и вызываем поиск по сайту, нажимая Ctrl F.

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

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

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

Как отредактировать исходный код в программе?

Если у вас исходный код расположен в файлах, то его можно отредактировать специальными программами, которые могут редактировать исходный код(ниже список программ… и есть отдельный список

После того, как вы отредактировали ”
исходный код
” в программе, страницу надо загрузить на сервер. Это можно сделать несколькими способами например через программу

Как увидеть “исходный код страницы”?

Для того, чтобы увидеть исходный код страницы нажимайте
И…ещё… существует как минимум…Вопрос:

Можно ли назвать “исполненный” и “исполняемый” код “исходным?”

Вообще, по моему мнению…

“Исполн
яемый
” код – это тоже своего рода ”
исходный код
“, но только для него есть отдельное название(“исполн
яемый
“)!

Классы и идентификаторы

В коде заголовка видим

Id здесь – идентификатор.

В другом случае, если нажать на меню, то в коде увидим

Меняем цвет фона

https://www.youtube.com/watch?v=G1rc8BqLTTI

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

Выделяется блок кода, отвечающий за фон. В правой колонке показываются правила для идентификатора #wrapper.

Правило background, который отвечает за цвет, может иметь еще много различных значений. Для замены цвета нажимаем на квадрат кнопки и выбираем нужный цвет, например, голубой.

Копируем идентификатор #wrapper, переходим в редактор, открываем таблицу стилей, вставляем в поиск и находим нужное значение.

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

Погнали!

Учебник вы можете посмотреть самостоятельно, я на своем смайте рассказывает только то, что сам знаю и понимаю:

Исходный код страницы – это такой код, который записан, ну например в файле.

Работа со шрифтами

Чтобы изменить код элемента, например, размер шрифта нашего заголовка, нужно вставить в правой колонке для него правило font-size. Ставим двоеточие и размер в пикселях, допустим 36 px.

Все зависит от вашей аудитории на сайте. Если это пенсионеры, то, естественно, шрифт должен быть покрупнее, а если пионеры, то можно обойтись и мелким.

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

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

Можно выбрать разновидность шрифта. За это отвечает font-family — семейство шрифтов.

Чтобы сменить шрифт заголовка, прописываем в правилах к элементу font-family и после двоеточия ставим, например, Georgia.

После запятой можно поставить еще один распространенный шрифт, допустим, Times New Roman.

В этом случае, если даже у кого-то Georgia не будет отображаться, то отобразится Times New Roman.

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

Если нужно сделать шрифт пожирнее, то применяем правило font-weight и т. д.

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

Редактирование исходного кода через программы.

1.
– на момент редактирования – эта программа является основной, в которой я редактирую код !

Интересная функция, редактирование всего интерфейса программы, по вашему желанию, цвет, размер шрифта и т.д…

2.
– вторая, простая эффективная и с множеством возможностей для расширения с помощью плагинов.
3.
– альтернативный вариант, которым периодически пользуюсь! И если верхняя программа заняла первое место, то Notepad – ничуть не хуже! И так же имеет возможность для расширения!
4.

Это была вторая моя программа:
восстановлено

5.

Я начинал в свое время с программы Namo, не знаю, сейчас она существует или нет! Единственное помню, что там были какие-то проблемы с кодом, или может от того, что я ничего не знал!(Осталось ощущение, что она не работала…)