Aliexpress INT

Как найти и изменить код html

Категория: Оптимизация и продвижение сайта Опубликовано: 25.11.2016

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

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

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

HTML и CSS - взаимосвязь

На самом то деле тема должна называться как-то наподобие: «Как править код CSS». Ну да ладно начнем мы с HTML, а закончим CSS. Все дело в том, что при необходимости изменения цвета, шрифта сайта, хлебные крошки приводят к файлам СSS.

Давайте для начала определимся с этими двумя понятиями:

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

- Код CSS является языком программирования, отвечающим за внешний вид веб-страниц. Именно этот код должен поддаваться правке при надобности изменения внешнего вида сайта.

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

Где находится html код страницы

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

И так возвращаясь к теме изменения кода страницы, необходимо сначала посмотреть html код. Я расскажу на примере браузера Opera, так как работаю в основном в нем. Спешу сообщить, что если вы предпочитаете пользоваться иным браузером, не стоит сразу же закрывать эту страницу, поскольку принцип проверки в независимости от браузера практически идентичен.

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

В одной из предыдущих статей я рассказал, «Как убрать ссылку из заголовка Joomla», а сегодня вы узнаете, как все это дело подправить и сделать более привлекательным.
Допустим нам нужно изменить цвет и размер заголовка статьи. Для этого нажимаем по нему левой кнопкой мышки и в открывшемся окне выбираем «Посмотреть код элемента». После чего в левой части экрана нашему вниманию предстанут фантастические иероглифы, с помощью которых мы и определим, где собака зарыта. Таким способом можно посмотреть и подправить практически каждый элемент шаблона.

Далее хочу обратить ваше внимание на скриншот.

как посмотреть и изменить код страницы

В его верхней части я выделил HTML код, отвечающий за вывод заголовка h1. По умолчанию при проверке он подсвечивается серым фоном. Ну да ладно, это так для общего сведения. Нам же нужно обратить внимание в нижнюю часть скриншота, где расположены скрипты, отвечающие за вывод CSS стилей. Хочу сразу же предупредить, что в зависимости от шаблона название CSS файла может отличаться, но, как правило, это style.css или template.css.

И так с файлом мы определились, но как узнать где он находится? Элементарно просто, нужно навести курсор мышки на расположенное с правой стороны слово style.css, после чего возле него отобразится путь нахождения файла. Вместе с тем здесь же будет указана и строка, которую нам нужно подправить. Как видно на картинке это первая строка.

рупор

Важный момент! Перед тем как вносить изменения сделайте резервную копию сайта, так сказать на всякий пожарный wink

Некоторые свойства CSS

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

- font-size – изменение размера текста.

- text-decoration – в зависимости от команды сюда относится зачеркивание и подчеркивание текста, а также выделение линиями.

- font-family – семейство шрифтов.

- font-weight – выделение.

- color – цвет текста.

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

Спасибо за внимание и до скорого на страницах Stimylrosta.

Не ленитесь, поделитесь!

Оставить комментарий

Просмотров: 2785

Комментарии  

Олег
0 # Олег 01.12.2016 09:51
Спасибо! А как сделать рамку вокруг заметки на сайте?
Ответить | Ответить с цитатой | Цитировать
Stimylrosta
0 # Stimylrosta 03.02.2017 09:29
Здравствуйте, Олег!
Для создания рамки вокруг текста существует стилевое свойство border. Это отдельная тема, которую я в скором будущем раскрою.
Ответить | Ответить с цитатой | Цитировать
poison2014
0 # poison2014 29.06.2017 22:16
Спасибо за более подробную информацию. Хотелось бы теперь разобраться с шапкой сайта. Хочу изменить натпись на название своего сайта. Можете чем помочь?
Ответить | Ответить с цитатой | Цитировать
Stimylrosta
0 # Stimylrosta 30.06.2017 08:14
Цитирую poison2014:
Хочу изменить надпись на название своего сайта. Можете чем помочь?

Для начала сделайте логотип:
http://stimylrosta.com.ua/instrumenty-vebmastera/97-kak-sdelat-logotip-dlya-sajta-besplatno
После чего поместите его в корневую папку вашего сайта images.
Затем зайдите в административную часть сайта, выберите активный шаблон и отыщите вкладку Logo Image, logo или что-то наподобие, начинающееся на logo. Выберите ранее закачанный логотип. Готово!
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий


Защитный код
Обновить

X

Добро пожаловать!

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

Читайте также

LSI-слова - особенности поиска и подбора

LSI-слова - особенности поиска и подбора

Подробнее
LSI-копирайтинг - тренд 2017 года

LSI-копирайтинг - тренд 2017 года

Подробнее
Как писать статьи? Секреты быстрой работы копирайтера

Как писать статьи? Секреты быстрой работы копирайтера

Подробнее
Как подобрать ключевые слова

Как подобрать ключевые слова

Подробнее