Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы,
которые не меняются от вида и направленности сайта. В примере 4.1 показан
код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
Пример веб-страницы
Заголовок
Первый абзац.
Второй абзац.
Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под
именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть
файл (Ctrl+O)
. В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.
Рис. 4.1. Результат выполнения примера
Элемент
предназначен для указания типа текущего документа -
DTD (document type definition, описание типа документа). Это необходимо, чтобы
браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML
существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText
Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но
различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал,
согласно какому стандарту отображать веб-страницу и необходимо в первой строке
кода задавать
.
Существует несколько видов
, они различаются в зависимости
от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные
типы документов с их описанием.
Табл. 4.1. Допустимые DTD
| DOCTYPE
|
Описание
|
|---|
| HTML 4.01
|
|
|
Строгий синтаксис HTML.
|
|
|
Переходный синтаксис HTML.
|
|
|
В HTML-документе применяются фреймы.
|
| HTML 5
|
|
|
В этой версии HTML только один доктайп.
|
| XHTML 1.0
|
|
|
Строгий синтаксис XHTML.
|
|
|
Переходный синтаксис XHTML.
|
|
|
Документ написан на XHTML и содержит фреймы.
|
| XHTML 1.1
|
|
|
Разработчики XHTML 1.1 предполагают,
что он постепенно вытеснит HTML. Как видите, никакого деления на виды
это определение не имеет, поскольку синтаксис один и подчиняется четким
правилам.
|
Разница между строгим и переходным описанием документа состоит в различном
подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения
спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится
к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать
предпочтительнее.
Например, в строгом HTML и XHTML непременно требуется наличие тега
,
а в переходном HTML его можно опустить и не указывать. При этом помним, что
браузер в любом случае покажет документ, независимо от того, соответствует
он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора
и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки
в документе.</p>
<p>В дальнейшем будем применять преимущественно строгий <!DOCTYPE>
, кроме
случаев, когда это оговаривается особо. Это позволит нам избегать типичных
ошибок и приучит к написанию синтаксически правильного кода.</p>
<p>Часто можно встретить код HTML вообще без использования <!DOCTYPE>
,
веб-страница в подобном случае все равно будет показана. Тем не менее, может
получиться, что один и тот же документ отображается в браузере по-разному при
использовании <!DOCTYPE>
и без него. Кроме того,
браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется»,
т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы
не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE>
в начало документа.</p><p>Тег <html>
определяет начало HTML-файла, внутри него хранится заголовок
(<head>
) и тело документа (<body>
).</p><p>Заголовок документа, как еще называют блок <head>
, может содержать текст
и теги, но содержимое этого раздела не показывается напрямую на странице, за
исключением контейнера <title>
.</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>Тег <meta>
является универсальным и добавляет целый класс возможностей,
в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять
кодировку страницы, добавлять ключевые слова, описание документа и многое другое.
Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.</p><p>
<title>Пример веб-страницы
Тег
определяет заголовок веб-страницы, это один из важных элементов
предназначенный для решения множества задач. В операционной системе Windows
текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).</p>
<p><img src='https://i2.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy></p>
<p>Рис. 4.2. Вид заголовка в браузере</p>
<p>Тег <title>
является обязательным и должен непременно присутствовать
в коде документа.</p><p>Обязательно следует добавлять закрывающий тег </head>
, чтобы показать,
что блок заголовка документа завершен.</p><p>Тело документа <body>
предназначено для размещения тегов и содержательной
части веб-страницы.</p><p>
<h1>Заголовок</h1>
</p><p>HTML предлагает шесть текстовых заголовков разного уровня, которые показывают
относительную важность секции, расположенной после заголовка. Так, тег <h1>
представляет
собой наиболее важный заголовок первого уровня, а тег <h6>
служит
для обозначения заголовка шестого уровня и является наименее значительным.
По умолчанию, заголовок первого уровня отображается самым крупным шрифтом
жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>...<h6>
относятся
к блочным элементам, они всегда начинаются с новой строки, а после них другие
элементы отображаются на следующей строке. Кроме того, перед заголовком и
после него добавляется пустое пространство.</p><p>
<!-- Комментарий -->
</p><p>Некоторый текст можно спрятать от показа в браузере, сделав его комментарием.
Хотя такой текст пользователь не увидит, он все равно будет передаваться
в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.</p>
<p>». Такой же пункт есть и в контекстном меню, которое , если щелкнуть правой кнопкой мыши текст <b>страницы
</b>. Можно использовать и сочетание клавиш CTRL + U. Mozilla FireFox при этом не использует внешних программ - исходный <b>код
</b> <b>страницы
</b> с подсветкой синтаксиса будет открыт в отдельном окне браузера.</p> <p>В обозревателе Internet Explorer щелкните в меню раздел «Файл» и выберите «Править в Блокнот». Вместо названия Блокнот может быть написана другая , вы назначили в настройках браузера для просмотра исходного <b>код
</b>а. По щелчку <b>страницы
</b> правой кнопкой мыши выпадает контекстное меню, в котором тоже есть пункт, позволяющий открыть исходный <b>код
</b> <b>страницы
</b> во внешней программе - «Просмотр HTML-<b>код
</b>а».</p> <p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95df96052552b95df9bd.jpg' height="669" width="663" loading=lazy></p> <p>В браузере Opera откройте меню, перейдите в раздел «Страница» и у вас будет возможность выбрать в подразделе «Средства разработки» пункт «Исходный <b>код
</b>» или пункт «Исходный <b>код
</b> фрейма». Такому выбору назначены горячие клавиши CTRL + U и CTRL + SHIFT + U соответственно. В контекстном меню, привязанном к щелчку <b>страницы
</b> правой кнопкой мыши, тоже есть пункт «Исходный <b>код
</b>». Opera исходник <b>страницы
</b> во внешней программе, которая назначена в ОС или в настройках браузера для редактирования HTML-файлов.</p> <p><img src='https://i0.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95eb30952552b95eb346.jpg' width="100%" loading=lazy></p> <p>Браузер Google Chrome безо всяких сомнений имеет лучшую организацию просмотра исходного <b>код
</b>а. Щелкнув правой кнопкой мыши, вы можете выбрать пункт «Просмотра <b>код
</b>а <b>страницы
</b>» и тогда исходник с подсветкой синтаксиса будет открыт на отдельной вкладке. А можете выбрать в том же меню строку «Просмотр <b>код
</b>а элемента» и в этой же вкладке откроет два дополнительных фрейма, в которых вы можете инспектировать HTML- и CSS-<b>код
</b> элемента <b>страницы
</b>. Браузер будет реагировать на перемещение курсора по строкам <b>код
</b>а, подсвечивая на странице элементы, соответствующие этому участку HTML-<b>код
</b>а.</p> <p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b9603c4652552b9603c84.jpg' width="100%" loading=lazy></p>
<p>Вероятность заглянуть в начальный <b>код
</b> веб-<b>страницы
</b> , получаемый браузером в результат на запрос серверу, есть фактически в всяком интернет-обозревателе. Доступ к соответствующей команде организован приблизительно идентично, но есть значительные отличия в том, каким методом и в каком виде вам будет представлен начальный <b>код
</b> .</p>
<h3>Инструкция</h3>
<p><b>1.
</b> В браузере Mozilla FireFox раскройте в меню раздел «Вид» и щелкните пункт «Начальный <b>код
</b> <b>страницы
</b> ». Такой же пункт есть и в контекстном меню, которое возникает, если щелкнуть правой кнопкой мыши текст <b>страницы
</b> . Дозволено применять и сочетание клавиш CTRL + U. Mozilla FireFox при этом не использует внешних программ – начальный <b>код
</b> <b>страницы
</b> с подсветкой синтаксиса будет открыт в отдельном окне браузера.</p><p><img src='https://i0.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95d5fa552552b95d5fe3.jpg' height="748" width="680" loading=lazy></p><p><b>2.
</b> В обозревателе Internet Explorer щелкните в меню раздел «Файл» и выберите «Править в Блокнот». Взамен наименования Блокнот может быть написана иная программа, которую вы назначили в настройках браузера для просмотра начального <b>код
</b> а. По щелчку <b>страницы
</b> правой кнопкой мыши выпадает контекстное меню, в котором тоже есть пункт, дозволяющий открыть начальный <b>код
</b> <b>страницы
</b> во внешней программе – «Просмотр HTML-<b>код
</b> а».</p><p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95df96052552b95df9bd.jpg' height="669" width="663" loading=lazy></p><p><b>3.
</b> В браузере Opera откройте меню, перейдите в раздел «Страница» и у вас будет вероятность предпочесть в подразделе «Средства разработки» пункт «Начальный <b>код
</b> » либо пункт «Начальный <b>код
</b> фрейма». Такому выбору назначены жгучие клавиши CTRL + U и CTRL + SHIFT + U соответственно. В контекстном меню, привязанном к щелчку <b>страницы
</b> правой кнопкой мыши, тоже есть пункт «Начальный <b>код
</b> ». Opera открывает исходник <b>страницы
</b> во внешней программе, которая назначена в ОС либо в настройках браузера для редактирования HTML-файлов.</p><p><img src='https://i0.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95eb30952552b95eb346.jpg' width="100%" loading=lazy></p><p><b>4.
</b> Браузер Google Chrome безо любых сомнений имеет лучшую организацию просмотра начального <b>код
</b> а. Щелкнув страницу правой кнопкой мыши, вы можете предпочесть пункт «Просмотра <b>код
</b> а <b>страницы
</b> » и тогда исходник с подсветкой синтаксиса будет открыт на отдельной вкладке. А можете предпочесть в том же меню строку «Просмотр <b>код
</b> а элемента» и браузер в этой же вкладке откроет два дополнительных фрейма, в которых вы можете инспектировать HTML- и CSS-<b>код
</b> всякого элемента <b>страницы
</b> . Браузер будет реагировать на перемещение курсора по строкам <b>код
</b> а, подсвечивая на странице элементы, соответствующие этому участку HTML-<b>код
</b> а.</p><p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b9603c4652552b9603c84.jpg' width="100%" loading=lazy></p><p><b>5.
</b> В браузере Apple Safari раскройте раздел «Вид» и выберите строку «Просмотр HTML-<b>код
</b> а». В меню, которое возникает по щелчку правой кнопкой открытой <b>страницы
</b> , соответствующий пункт назван «Посмотреть источник». Этому действию назначены жгучие клавиши CTRL + ALT + U. Начальный <b>код
</b> открывается в отдельном окне браузера.</p><p><img src='https://i0.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b960eafe52552b960eb45.jpg' width="100%" loading=lazy></p>
<h3>Ctrl + U</h3>
<h3>Как посмотреть исходный код элемента?</h3>
<p>Нажмите правую кнопку мыши на интересующем элементе страницы.</p>
<p>Google Chrome
: <b>“Просмотр кода элемента”
</b></p>
<p>Opera
: <b>“Проинспектировать элемент”
</b></p>
<p><img src='https://i0.wp.com/wordpress-life.ru/wp-content/uploads/2013/10/code_opera.png' height="402" width="261" loading=lazy></p>
<p>FireFox
: <b>“Анализировать элемент”
</b></p>
<p><img src='https://i0.wp.com/wordpress-life.ru/wp-content/uploads/2013/10/code_firefox.png' height="298" width="222" loading=lazy></p>
<p>В других браузерах ищите подобный по смыслу пункт меню.</p>
<p>Всем привет!</p>
<p>Специально вначале статьи выложил всю суть, для тех, кто ищет быстрый ответ.</p>
<p>Информация может быть многим известна, но поскольку пишу для начинающих блоггеров, веб-программистов и прочих старателей, то эта справочная статья обязательно должна присутствовать.</p>
<p>В будущем вы обязательно будете изучать исходный код страниц и отдельных элементов.</p>
<p>Давайте посмотрим на конкретном примере как можно использовать просмотр исходного кода страницы.</p>
<p>Например, мы хотим посмотреть какие ключевые слова (keywords) используются для конкретной страницы. Заходим на интересующую нас веб-страницу и нажимаем Ctrl+U . В отдельном окне или в отдельной закладке откроется исходный код данной страницы. Нажимаем Ctrl+F <span>для поиска фрагмента кода. В данном случае печатаем в окне поиска слово “<i>keywords”.
</i>Вас автоматически перебросит на фрагмент кода с этим мета-тегом и выделит искомое слово.
</p>
<p>По аналогии можно искать и изучать другие фрагменты кода.</p>
<p>Просмотр всего исходного кода страницы в большинстве случаев не очень удобен, поэтому во всех браузерах существует возможность просмотреть код отдельного элемента или фрагмента.</p>
<p>Давайте применим на конкретном примере просмотр кода элемента. Например, посмотрим есть ли у ссылки атрибут nofollow . Нажимаем правой кнопкой мыши на интересующей нас ссылке и в выпадающем контекстном меню левой кнопкой кликаем по пункту <span>“Просмотр кода элемента”
</span> или подобному (в зависимости от вашего браузера). Внизу, в специальном окне для анализа кода, получаем нечто подобное.</p>
<p>Мы видим, что в коде ссылки присутствует rel=”nofollow” . Это значит, что по этой ссылке не будет “утекать” и PR. Об этом подробней поговорим в следующих статьях. Сейчас же важно то, что вы теперь знаете как посмотреть исходный код страницы и исходный код отдельного элемента.</p>
<p>Размер, цвет некоторых важных элементов блога — таких, как заголовок блога или поста, тег more и тому подобное. Нужный код искал вручную, экспериментируя с тестовым доменом, на основе чего позже писалась статья.</p> <p>И вот недавно понадобилось изменить цвет ссылок. Перелопатив кучу литературы по этому вопросу, понял простую вещь: все приводят примеры из собственных шаблонов, но шаблоны-то у нас у всех разные и хорошо, если код из примера хоть чуть-чуть похож: не нытьем, так катаньем все равно найду — методом тыка.</p> <p>С кодом ссылки номер не прошел. Все указывали совершенно разные пути. Задумался, нет ли простого и точного инструмента, <b>как найти нужный код html на любом сайте.
</b> Многие блоггеры даже с опытом испытывают трудности в незначительной доработке шаблона. В этом нет ничего страшного, ведь у каждого свои интересы и цели создания сайта.</p> <p>Если вы хотите внести небольшие изменения в шаблон, например <b>изменить любой заголовок, название статей и рубрик, цвет и размер шрифтов и ссылок,
</b>обычно вполне достаточно научиться простому принципу, который рассмотрен в этой статье. Но бывают и сложные случаи, требуюущие либо более глубокого изучения html и css, либо помощи специалиста.</p> <p>Однажды обратился знакомый с просьбой найти, где изменить цвет панели рубрик в его шаблоне. Закачал тему на тестовый поддомен. Настройки этого элемента хранились не в style.css, а в другом файле, поэтому человек не мог найти.</p> <h2>Как найти и изменить html и css код сайта</h2> <p>Если не любите длинные статьи, для вас <b>в конце статьи
</b> видеоурок, в котором рассказывается, как можно увидеть код html сайта с помощью Notepad++ и внести изменения в дизайн любого шаблона на примере, как поменять цвет шрифта. В видео найдутся и другие тонкости обращения с блогом. А для тех, кому ближе и понятнее текст, внизу подробный разбор темы со скриншотами.<br> httpv://youtu.be/uIlVvwCt2ho</p> <h3>Термины и понятия</h3> <p>Было бы точнее называть статью «<b>Как найти код css
</b>«, но я решил остановиться на «неправильном» названии, потому что в основном ответ на этот вопрос ищут в html. CSS и HTML — очень разные вещи, хоть и являются двумя частями одной системы. В интернете много технических статей, нам здесь достаточно будет понять, что:</p> <ul><li><b>HTML
</b> — отвечает за структуру сайта (что за чем следует, в каком порядке и т. д.). Это основа, на которой создан сайт. Если сравнить с домом, то это это его планировка, расположение комнат.</li> <li><b>CSS
</b> — отвечает за дизайн (какие шрифты, размеры, цвета и подобное). Это общий стиль дома и стиль его отдельных комнат: какие обои будут, светильники, занавески, мебель. Поэтому документ, в котором прописываются <b>коды css
</b>, называется «таблица стилей»</li>
</ul><p>И если вы задались вопросом, как изменить, например, цвет заголовка сайта, размер шрифта в текстах или цвет заголовков в сайдбаре, то искать все это нужно в таблице стилей CSS. Вот это единственное, что стоит понять для начала, чтобы вносить изменения в код самостоятельно.</p> <p>Мне нравится превращать сложное в простое. Помню, давно, когда у меня была первая машина, очень старая, проводка гнилая, часто перегорали предохранители, и я тянул ее каждый раз на СТО на буксире. Представьте, сколько денег было выкинуто, при том что самостоятельная замена, как оказалось, стоит копейки.</p> <p>Однажды я посмотрел, что именно делает мастер. До сих пор не знаю, как устроен предохранитель. Но знаю, где его менять). Мотор я чинить сам бы не стал, а уж предохранитель заменить не сложно. Так же и с сайтами.</p> <p>Если вы не хотите стать программистом, то нет необходимости глубоко разбираться в программинге. Достаточно ясно понимать, что для чего предназначено, где это искать и как изменить. То, что можно, лучше изменить самим, а все остальное оставить специалистам. В статье о есть полезная ссылка на эту тему.</p> <h3>Нужно ли быть специалистом во всем</h3> <p>В seo-блогах часто ведутся дискуссии, нужно ли новичку глубоко разбираться в html, а еще лучше — научиться самим писать сайты, чтобы было все уникальное.. Ну, не знаю — каждому свое и тут уж кому что ближе. Мне интересно чуть больше, поэтому я сейчас дополнительно учусь у Владимира. В ноябре этого года Владимир открыл свой авторский блог. Его блог сделан на самом простом, бесплатном шаблоне, он его лишь чуть изменил под себя.</p> <p>Через 10 дней существования блог занял 104-е место в рейтинге всех сайтов Рунета с посещаемостью около 1,5 тысяч человек в сутки. За 10 дней. Так в чем же дело? Владимир прекрасно разбирается в html, может заказать и купить себе уникальный шаблон. Вот и вы должны понять, что <b>секрет кроется не в шаблонах, а в полезности информации.
</b></p> <h4>Где прячется код html</h4> <p>Простите за отступление, вернемся к нашим кодам). Допустим, вы хотите изменить цвет шрифта заголовка блога. Будем рассматривать на примере моего тестового сайта.</p> <ol><li><b><i>Открываем сайт в браузере Google Chrome
</i>
</b> (если еще не пользуетесь им, установите — он хорошо заточен для работы с сайтами, в нем много встроенных инструментов).</li> <li><b><i>Наводим курсор мышки на элемент, который собираемся изменить
</i>
</b>. В данном случае — на название блога. Щелкаем по нему «правой» мышкой и в появившемся окне выбираем ПРОСМОТР КОДА ЭЛЕМЕНТА.</li>
</ol><p>ВАЖНО: не перепутайте с ПРОСМОТРОМ КОДА СТРАНИЦЫ! Вся страница нам сейчас не нужна, только отдельный элемент.</p> <p><img src='https://i1.wp.com/opartnerke.ru/wp-content/uploads/2012/12/prosmotr_coda.jpg' align="center" width="100%" loading=lazy></p> <p>Щелкаем по нему — в нижней части браузера появляется окно просмотра кода:</p> <p><img src='https://i0.wp.com/opartnerke.ru/wp-content/uploads/2012/12/kak_izmenit_html_kod_stranicy_sajta.jpg' align="center" width="100%" loading=lazy></p> <p>Красным выделена строка кода, которую мы меняем.</p> <p>А вот в области, выделенной синим, содержится то, что мы ищем. Именно здесь вы можете найти точную (а не приблизительную) строчку кода, отвечающую за шрифты, цвет, размер, выделение и прочее. Таким образом вы можете узнать ЛЮБОЙ код любого элемента любого шаблона.</p> <p>Находим нужную строчку в блоке, выделенным синим. Справа там есть ползунок, можно пролистать и найти нужную строчку.</p> <p>Общий принцип, где что ищется:</p> <p>Название шрифта — в строке FONT FAMILY</p> <p>Размер шрифта — в строке FONT SIZE</p> <p><img src='https://i2.wp.com/opartnerke.ru/wp-content/uploads/2012/12/size_family1.jpg' align="center" width="100%" loading=lazy></p> <p>Цвет шрифта — в строке COLOR</p> <p><img src='https://i0.wp.com/opartnerke.ru/wp-content/uploads/2012/12/color1.jpg' align="center" width="100%" loading=lazy></p> <p>Вот три основные строчки, в которых меняется название, размер и цвет шрифта любого элемента. Справа в строке style css дается позиция строчки в документе. Если вам нужно изменить какой-то другой элемент (например, нужно узнать, где находится строчка. в которой можно изменить цвет панели меню или цвет ссылок), все делается абсолютно так же.</p> <p>ВНИМАНИЕ:
</p> <p>красным на рисунке выделена строчка, которую мы будем копировать,
</p> <p>чтобы потом найти ее в таблице стилей.
</p> <p>4. Копируем строчку
</span>. Поскольку в этом примере мы хотим изменить цвет названия сайта, то копирую строчку, во второй картинке выделенную красным прямоугольником. В моем шаблоне она отвечает за изменение цвета названия сайта:</p> <blockquote> <p>#header h1 a, #header h1 a:visited {
</p>
</blockquote> <p>Находим нужную строчку в файле «таблица стилей (style.css)». Это делается уже в админке. Настоятельно прошу, пока нет уверенности и полного понимания, все эксперименты проводить на тестовом поддомене, чтобы исключить .</p> <p>Итак, заходим в админпанель: КОНСОЛЬ — ВНЕШНИЙ ВИД — РЕДАКТОР. В правом сайдбаре находим файл ТАБЛИЦА СТИЛЕЙ (STYLE.CSS), открываем его.</p> <p>Теперь открываем строку поиска клавишами CTRL + F: в верхнем окне появится пустая строчка-окошко. Вставляем в него ту строку, что скопировали в пункте 4.</p> <p>И вы увидите, как в таблице стилей эта строчка выделится (на рисунке — оранжевым цветом):</p> <p><img src='https://i1.wp.com/opartnerke.ru/wp-content/uploads/2012/12/color2.jpg' align="center" width="100%" loading=lazy></p> <p>Вносим изменение в элемент. В нашем случае мы меняем цвет шрифта, поэтому в строке COLOR подставляем другое значение — того цвета, который хотим. В примере черный цвет, его значение:</p> <p>Выбрать цвет можно в любом сервисе палитр веб-цветов: наберите в поисковике «Палитра веб-цветов» и подберите тот, что хотите. Выбираем цвет, копируем его цифровое значение и аккуратно подставляем взамен старого. после чего нажимаем ОБНОВИТЬ ФАЙЛ и переходим смотреть, что получилось.</p> <p>Если изменения не отобразились, за прошедший час и снова зайдите на страницу — на этот раз все должно отобразиться.</p> <p>Описывается это долго, но на практике все делается быстро, особенно когда появляется начальный навык.</p> <p><b>Более подробно, как изменить те или иные элементы:
</b></p> <p>На сегодня все, больше не буду мучить вас кодами. Надеюсь, что теперь вы сами сможете легко находить и менять любой элемент кода html, или, вернее, код css — да простят меня специалисты за упрощение. А если не разберетесь, посетите все же страницу . Не тратьте время на ерунду.</p> <p>Предлагаю посмотреть видео Артема Абрамовича, как искать и находить в любой теме/шаблоне, для любого движка (wordpress, joomla и т.п.) любое слово или элемент и заменить на то, что вам надо:<br><span class="HwU34g7KnoQ"></span></p> <h3>Поделитесь пожалуйста, если понравилось:<br><br>Возможно вам будет интересно еще узнать:</h3><br><img src='https://i1.wp.com/opartnerke.ru/wp-content/uploads/2012/09/nazvanie_saita.jpg' width="100%" loading=lazy>
<br>
<br>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
</div>
</div>
</div>
<div class="right -is-sticky">
<div class="articles-conseilles">
<div id="tamanu2" style="height:500px;width:266px;" align="center"></div>
</div>
</div>
</div>
<div class="a-decouvrir">
<h3>Рекомендуем почитать</h3>
<div class="featured">
<div class="view view-articles view-id-articles view-display-id-block_4 view-dom-id-169dc93f512a102548b755435ccd1346">
<div class="view-content">
<div class="row">
<article class="preview-article">
<header class="preview-article__header">
<a href="/skachat-programmu-ekvalaizer-dlya-vindovs-7-ispolzovanie.html">
<figure class="">
<img src="https://i1.wp.com/chopen.net/wp-content/uploads/2015/02/equalizer_2.jpg" alt="Использование эквалайзера Windows" loading=lazy>
</figure>
</a>
</header>
<div class="preview-article__content">
<div class="views-field views-field-title"> <span class="field-content"><a href="/skachat-programmu-ekvalaizer-dlya-vindovs-7-ispolzovanie.html">Использование эквалайзера Windows</a></span> </div>
<div class="views-field views-field-body">
<div class="field-content">
<p>
Сегодня мы рассмотрим:
Настоящие ценители музыки знают, что для качественного...
</p>
</div>
</div>
<div class="views-field views-field-field-article-categorie">
<div class="field-content"> <span class="preview-article__category se-soigner">
</span>
</div>
</div>
</div>
</article>
<article class="preview-article">
<header class="preview-article__header">
<a href="/programma-dlya-tablic-excel-skachat-primery-excel-s-formulami-i.html">
<figure class="">
<img src="https://i1.wp.com/atmosoft.ru/full/Excel%202016.png" alt="Скачать примеры Excel с формулами и функциями" loading=lazy>
</figure>
</a>
</header>
<div class="preview-article__content">
<div class="views-field views-field-title"> <span class="field-content"><a href="/programma-dlya-tablic-excel-skachat-primery-excel-s-formulami-i.html">Скачать примеры Excel с формулами и функциями</a></span> </div>
<div class="views-field views-field-body">
<div class="field-content">
<p>
Файлы *.xlsx с примерами вычислений формул и функций. А так же бесплатные...
</p>
</div>
</div>
<div class="views-field views-field-field-article-categorie">
<div class="field-content"> <span class="preview-article__category se-soigner">
</span>
</div>
</div>
</div>
</article>
<article class="preview-article">
<header class="preview-article__header">
<a href="/moshchnyi-ekvalaizer-dlya-windows-7-ispolzovanie-ekvalaizera.html">
<figure class="">
<img src="https://i0.wp.com/composs.ru/wp-content/uploads/2017/11/ekvalajzer_na_kompyuter2.jpg" alt="Использование эквалайзера Windows" loading=lazy>
</figure>
</a>
</header>
<div class="preview-article__content">
<div class="views-field views-field-title"> <span class="field-content"><a href="/moshchnyi-ekvalaizer-dlya-windows-7-ispolzovanie-ekvalaizera.html">Использование эквалайзера Windows</a></span> </div>
<div class="views-field views-field-body">
<div class="field-content">
<p>
В операционных системах Windows, начиная с Vista, используется встроенный...
</p>
</div>
</div>
<div class="views-field views-field-field-article-categorie">
<div class="field-content"> <span class="preview-article__category se-soigner">
</span>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#skip-link" class="visually-hidden visually-hidden--focusable" id="main-menu" tabindex="-1">Наверх</a>
</div>
</section>
<div class="region region-bottom">
<div class="block block-block first last odd" id="block-block-7">
<ul>
<li><a href="/category/baby-products/">Детские товары</a></li>
<li><a href="/category/auto/">Авто</a></li>
<li><a href="/category/electronics/">Электроника</a></li>
<li><a href="/category/tool/">Инструмент</a></li>
<li><a href="/category/appliances/">Бытовая техника</a></li>
<li><a href="/category/baby-products/">Детские товары</a></li>
</ul>
<p><a href="/" id="choosit"><img alt="" height="13" src="/sites/all/themes/lanutrition/img/logo-choosit.svg" width="50" / loading=lazy></a></p>
</div>
</div>
<div class="search-modal" id="search-modal"><button class="close-button" id="close-search" aria-label="Close reveal" type="button"><span aria-hidden="true">×</span></button>
<div class="search-modal__content">
<div class="block block-search first odd" role="search" id="block-search-form">
<form class="search-form" role="search" action="/" method="get" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Поиск по сайту</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<input title="" class="custom-search-box form-text" placeholder="введите слово" type="text" id="edit-search-block-form--2" name="s" value="" size="15" maxlength="128" />
</div>
<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Rechercher" class="form-submit" /></div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html> 
