Как редактировать HTML код, убираем все лишнее с сайта!
Для того чтобы понять как как редактировать HTML код страниц, советую Вам от начала до конца прочитать этот пост, чтобы принимать какие-то решения по редактированию кодов. До того как начать редактировать, изменять какой либо код, настоятельно Вам рекомендую сделать резервные копии ваших файлов, если вдруг вы что то лишнее затронете Ваш блог может перестать правильно функционировать.
После того как поменяли тему блога (может кто то и не менял, оставил стандартную), убираем не нужные пока нам вещи. Если вы установили такую же тему как у меня, то вам будет гораздо проще и быстрее во всем разобраться.
Как редактировать HTML код!
Посмотрите на картинке, как вообще устроен блог и что за что отвечает.
Далее Вам это пригодится:
Я предлагаю отредактировать вот эти элементы для начала:
Начнем с заголовка. Заголовок должен, конечно, соответствовать выбранной тематики блога. У меня тематика связана с созданием, продвижением и заработке на блоге. Заходим в админ-панель, далее внешний вид-настроить. Открылась окно с настройками, меняем заголовок и краткое описание блога. Вот как то так: ( Razvitie. Создание и продвижение блога. ) В этом же окне есть пункт «Статическая главная страница» я её оставил без изменений, если при входе на сайт, вы хотите чтобы всегда открывалась какая то определенная страница, то создайте ее и выберите статистическая. Не забудьте сохранить и активировать.
Теперь настраиваем сайдбар, убираем колонки ( форму поиска, последние записи, последние комментарии, архивы, управление ). Для этого заходим в панель управления — внешний вид — виджеты.
Таким образом, убираем с блога разные виджеты. Когда необходимо будет восстановить обратно их, нужно просто перетащить нужные вам из соседнего меню слева.
Так форму даты пока не будем трогать, а вот тестовую страницу удалим. Заходим в панель управления, далее кликаем на меню страницы, ставим галочку и перемещаем в корзину. Штуки, которые снизу поста мы тоже можем оставить, это кнопки навигации – они пока не активны т.к. у нас всего одна запись.
Так вот смотрите, под записью есть 2 кнопки «Подробнее и 1 комментарий», я хочу слово подробнее изменить на «читать далее». Это очень просто сделать. Запустите свою FileZille и установите соединение со своим блогом. Дальше значит, открываем по очереди (domains, ваш блог, wp-content, themes и выберайте вашу тему).
Находим файл “ index.ph” и перетащите его на свой рабочий стол. Чтобы открыть его, вам понадобиться любой блокнот ( notepad++ или akelpad ). Открываем его и находим строку
Теперь просто заменяем слово «подробнее» на своё, я пишу «читать далее». Не забудьте сохранить изменения, и переносим его обратно, откуда взяли. Теперь обновите блог и посмотрите что получилось. Также в файлах (page.php, singlе.php, archive.php) это же слово надо изменить. Делайте это осторожно, не задевая другие составляющие кода.
Вообще редактировать HTML код страниц не сложно, главное понять как устроен код. Есть специальные курсы по изучению HTML и СSS языка, с их помощью узнаете как редактировать HTML на профессиональном уровне. Изучите хотя бы бесплатные курсы чтобы знать как редактировать код страниц своего сайта. В интернете масса бесплатных курсов.
Далее отредактируем файл “single.php”.
Также в программе FZ находим этот файл в той же папке, и переносим его на рабочий стол.
Открываем файл и смотрим, что мы можем изменить. Формат даты можно установить как вам угодно. Для этого в файле ‘’single.php” изменяем вот эти сочетания (y.d.m – d/m/y – D-m-Y и т.д.) Сохранитесь, обновите и смотрите что получается!
Из той же папке найдите и перетащите на рабочий стол файл
В нем мы заменим фразу «Leave a Reply» на «Оставьте и вы свой комментарий!»
И исправим на русский язык слово “comments’’. А вообще в принципе это слово можете и удалить, оно и так понятно, что это страница с комментариями.
Смотрим что получилось!
Ещё один момент по редактированию файла “archive.php”.
Если перейти на вкладку новости после даты и автора есть надпись “Edit”, её можно заменить на свою. Для этого переместите файл на рабочий стол и откройте его.
Забыл еще кое-что. Откройте свою запись, и там видно под словом «комментарии» есть надпись («2 комментария к «привет мир!»). Предлагаю написать («2 комментария к записи «привет мир!»). Откройте файл “comments.php” найдите нужную строку и вставьте свое слово.
Открываем запись и смотрим что у нас еще и здесь маленькое неправильно оформлены записи комментариев:
Чтобы её убрать, откройте файл “singl.php” и удалите вот эту строку:
Теперь удаляем стандартную первую запись, точно также как и страницу (панель управления – записи – запись «Привет мир!» перемещаем в корзину). После удаления у меня появилась надпись «К сожалению, по вашему запросу ни чего не найдено», возможно, у вас она тоже появилась! Все зависит от вашего шаблона. Комментарий тоже удалите, чтобы у Вас ни чего не осталось.
Полезные сочетания клавиш, если вдруг кто не знает:
(ctrl+A – выделить все, ctrl+Z – удалить, ctrl+X – вырезать, ctrl+C – копировать, ctrl+V – вставить). Сочетания клавиш в браузере и программе “notepad++:
(ctrl+u – открыть исходный код страницы, ctrl+f – открыть поиск файлов).
С помощью этих сочетаний Ваша работа намного будет приятнее 🙂
Думаю, что у Вас все получилось! На этом я заканчиваю данный урок, получилось много информации, делайте все внимательно – ради Вашего блога. Изучайте основы HTML чтобы узнать самим как редактировать HTML код страниц своего сайта.
Как найти и изменить код html
После установки шаблона, со временем у начинающих веб мастеров возникает закономерный вопрос, как изменить цвет, стилистику написания заголовков, добавить объем и сделать шрифт тех же заголовков побольше. Многих новичков это вводит в ступор, так как непонятно, что и где искать.
Конечно, можно заняться глубоким изучением всех этих тонкостей сайтостроения, но пока еще на горизонте перспектив, как таковых не наблюдается, становится еще один закономерный вопрос, а оно вам нужно?
На освоение азов веб-мастеринга у вас уйдет приличный отрезок времени. А время это деньги. Поэтому если вы нуждаетесь в незначительной корректировке некоторых элементов шаблона и не знаете, как найти нужный код HTML в независимости от платформы сайта, эта статья именно для вас.
HTML и CSS — взаимосвязь
На самом то деле тема должна называться как-то наподобие: «Как править код CSS». Ну да ладно начнем мы с HTML, а закончим CSS. Все дело в том, что при необходимости изменения цвета, шрифта сайта, хлебные крошки приводят к файлам СSS.
Давайте для начала определимся с этими двумя понятиями:
— Код HTML является основой, на которой создается сайт. Именно благодаря нему браузер понимает, какие элементы и в каком порядке выводить на ту или иную страницу.
— Код CSS является языком программирования, отвечающим за внешний вид веб-страниц. Именно этот код должен поддаваться правке при надобности изменения внешнего вида сайта.
Становится очевидным, что если нужно изменить, к примеру, цвет заголовка в статье либо в пунктах меню, то в правке нуждается один из файлов CSS. Именно это нужно уяснить на начальном этапе внесения изменений самостоятельно.
Где находится html код страницы
Не буду скрывать, что в начале моего ознакомления с принципами сайтостроения, я был не то, что чайником, я был настоящим ржавым самоваром . Поэтому у вас, как и у меня все обязательно получится.
И так возвращаясь к теме изменения кода страницы, необходимо сначала посмотреть html код. Я расскажу на примере браузера Opera, так как работаю в основном в нем. Спешу сообщить, что если вы предпочитаете пользоваться иным браузером, не стоит сразу же закрывать эту страницу, поскольку принцип проверки в независимости от браузера практически идентичен.
Как изменить стиль заголовка
В одной из предыдущих статей я рассказал, «Как убрать ссылку из заголовка Joomla», а сегодня вы узнаете, как все это дело подправить и сделать более привлекательным.
Допустим нам нужно изменить цвет и размер заголовка статьи. Для этого нажимаем по нему левой кнопкой мышки и в открывшемся окне выбираем «Посмотреть код элемента». После чего в левой части экрана нашему вниманию предстанут фантастические иероглифы, с помощью которых мы и определим, где собака зарыта. Таким способом можно посмотреть и подправить практически каждый элемент шаблона.
Далее хочу обратить ваше внимание на скриншот.
В его верхней части я выделил HTML код, отвечающий за вывод заголовка h1. По умолчанию при проверке он подсвечивается серым фоном. Ну да ладно, это так для общего сведения. Нам же нужно обратить внимание в нижнюю часть скриншота, где расположены скрипты, отвечающие за вывод CSS стилей. Хочу сразу же предупредить, что в зависимости от шаблона название CSS файла может отличаться, но, как правило, это style.css или template.css.
И так с файлом мы определились, но как узнать где он находится? Элементарно просто, нужно навести курсор мышки на расположенное с правой стороны слово style.css, после чего возле него отобразится путь нахождения файла. Вместе с тем здесь же будет указана и строка, которую нам нужно подправить. Как видно на картинке это первая строка.
Важный момент! Перед тем как вносить изменения сделайте резервную копию сайта, так сказать на всякий пожарный
Некоторые свойства CSS
Ниже я приведу некоторые свойства, с помощью которых можно внести определенные изменения и поэкспериментировать со стилями.
— font-size – изменение размера текста.
— text-decoration – в зависимости от команды сюда относится зачеркивание и подчеркивание текста, а также выделение линиями.
— font-family – семейство шрифтов.
— color – цвет текста.
Если у вас после корректировки ничего не изменилось, очистите кэш браузера. Как видите, чтобы изменить внешний вид заголовков и освежить дизайн сайта всего лишь понадобится подправить css код, а ни как не изменить код html.
Спасибо за внимание и до скорого на страницах Stimylrosta.
Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter
Изменение исходного кода страницы
Сразу хочу пояснить зачем может понадобится изменить исходный код страницы. Естественно, лидирующее место занимает выпендреж. Многие любят “помериться пиписьками”. Или просто подделать переписку или что-то подобное, чтобы посмеяться. Многие видели шутки про агентов поддержки вконтакте, так вот, я научу Вас самостоятельно подделывать такие переписки. Наверное не очень понятно к чему я вообще веду, потому лучше покажу на примере и в скриншотах, чтобы более понятно было.
Примеры измененного и оригинального кода
1. Оригинал страницы:
2. Подделка, созданная через исходный код страницы:
Изменение исходного кода
Путем изменения исходного кода можно подделать все, а если имеются даже минимальные знания в CSS и HTML, то для Вас не будет никаких границ. Можно изменять информацию о переведенных средствах в Webmoney, если оплата происходила через сайт. В общем, если есть фантазия, то сами пораскинете мозгами и решите с чем повеселиться.
Я буду показывать создание шутки с агентом поддержки, а именно с агентом 3-х сотым, так как его шутки наиболее актуальны в сети. Многие из них являются фейками, созданные таким образом, как я сейчас опишу.
1. Заходим на страницу, которую будем изменять. У меня это страница технической поддержки вконтакте:
2. Нажимаем кнопку F12 или наводим мышкой на тот элемент, который будем изменять. В моем случае это аватарка тех. поддержки и его имя. Наводим, нажимаем правой кнопкой по элементу и выбираем “просмотр кода элемента”.Находим поле, которое будем менять, нажимаем правой кнопкой, находим пункт Edit as Html и меняем. Далее смотрите скриншоты:
Тут я изменяю аватарку
Можно увидеть, что аватарка изменилась, она стала синей, а была оранжевая (я менял не цвет, а номер аватарки)
С аватаркой мы закончили, теперь приступим к изменению имени.
Имя изменено, теперь можно изменить и сам текст. Сам процесс изменения не буду показывать, ибо все аналогично, покажу конечный результат.
Особо хитрые люди могут использовать это для своих мошеннических манипуляций. Рассказывать про это не буду, догадаетесь сами, если понадобится
Как кастомизировать HTML шаблон
Kezz Bracey Last updated Jun 2, 2021
Итак вы только что приобрели HTML шаблон и теперь вы хотите его кастомизировать, прежде чем разместить его в сети, но у вас нет опыта создания HTML страниц, поэтому вы не уверены, как реализовать задуманное. Не волнуйтесь, в этом туториале мы объяснить, как это сделать, шаг за шагом.
Мы будем работать, предполагая, что вам не доводилось ранее видеть ни одной строчки HTML, что вам никогда не приходилось редактировать HTML, поэтому не важно насколько вы новичок в этом деле, я объясню вам на подробных примерах, как добиться желаемого результата.
Что такое HTML?
Говоря технически, ответ на этот вопрос «язык гипертекстовой разметки (Hyper Text Markup Language)». Однако, для кастомизации шаблона, нам достаточно знать, что HTML это набор открывающих и закрывающих тегов, к примеру:
Теги обозначаются символами < и > и закрывающий тег всегда имеет / . Между тегами находится наш контент:
Хотя иногда, мы можем увидеть одиночный элемент, у которого нет закрывающего тега, к примеру:
Разные HTML теги отображают различные типы контента на веб-странице по разному. Пример сверху, <h1></h1> создаст крупный заголовок с содержанием «John Smith, Front End Developer», в то время как пример <img> тега создаст изображение файла «mypic.jgp», которые затем появятся на вашей странице.
Чтобы редактировать HTML шаблон, вы должны знать какой тег представляет определённую часть страницы, которую вы хотите изменить, как найти их в коде и как отредактировать их так, чтобы вы увидели желаемый результат.
Установите текстовый редактор
Да, конечно можно редактировать HTML в обычном блокноте или похожей программе, но гораздо легче это делать используя специальный редактор для кода. Одна из причин по которой стоит поставить специальный редактор — вы получите подсветку кода, вы скоро это увидите, так работать будет намного проще.
Я рекомендую Sublime Text, который вы можете скачать по ссылке: https://www.sublimetext.com/3
Скачайте и посмотрите как выглядит ваш HTML шаблон
Скачайте шаблон, который вы приобрели, для этого туториала мы будем использовать «Clean CV» для демонстрации.
Большинство HTML шаблонов распространяются в качестве ZIP архива — если так, распакуйте его. После чего откройте директорию шаблона и найдите файл под названием «index.html» или «index.htm» .
В примере моего CV шаблона файл «index.html» находится в директории «01 html-website».
Теперь откройте этот файл в Chrome. Даже если Chrome не является вашим браузером по умолчанию, пожалуйста используйте его, так как мы будем работать со встроенными инструментами, которые помогут нам во время процесса редактирования.
Установите какие части шаблона вы хотите изменить
Если вы редактируете шаблон в первый раз, пока что не стоит пытаться изменить цвета или структуру. Для этого сначала нужно разобраться, как работает CSS, язык для стилизации страниц. Для начала лучше сфокусировать на одной вещи во время кастомизации шаблона и редактирование HTML будет неплохой отправной точкой.
После того как вы открыли шаблон в Chrome, постарайтесь определить, какие текстовые элементы и изображения на странице вы планируете изменить. Даже можно составить список, так будет удобнее, отмечая каждый отредактированный элемент.
В случае нашего CV шаблона мы хотим изменить:
- Имя
- Профессию
- Фотографию
- Ссылки соцсетей
- Контактную информацию
- Секции CV: «Профиль», «Опыт работы», «Технические навыки» и «Образование»
- Копирайт
Теперь когда у нас есть список того, что нам предстоит изменить, мы можем начать поиск соответствующих HTML тегов в нашем коде. Давайте начнём с имени.
Найдите необходимый тег в веб-инспекторе
Нажмите правой кнопкой мыши по имени, по умолчанию «Jhon Smith» и выберите Инспектировать (Inspect):
Панель, которая выглядит следующим образом, откроется в вашем браузере:
Панель инспектора
Данная панель предоставляет вам интерактивный способ изучить код. Наведите мышь на строчку <h1>. </h1> (заголовок первого уровня) и вы должны увидеть выделенное название секции шаблона, как показано на скриншоте.
Наводя мышь на различные строчки с кодом вы должны заметить, как области на вашей странице подсвечиваются, тем самым помогая понять, какой код какому элементу соответствует. Продолжайте наводить мышь на различные строки кода, до тех пока не найдёте ту часть, которая нас интересует.
Теперь разверните h1 , нажав на маленький треугольник слева и вы увидите контент между тегами, то есть John Smith <small>Front End Developer</small>.
Данный текст соответствует заголовку, который вы видите на экране, тем самым мы нашли нужную часть.
Отредактируйте тег в HTML
Пришло время открыть HTML файл и отредактировать его. Откройте «index.html» файл в Sublime Text и вы увидите следующую картину:
Теперь нужно найти код, который соответствует тому, что мы видели в Chrome инспекторе. Опуститесь на строку 61 — 61.
Теперь можно изменить контент между тегов, чтобы поменялось имя и профессия, на ту которую мы хотим. Для начала отредактируйте «Jhon Smith» и добавьте собственное имя:
Теперь между тегами <small></small> измените «Front End Developer» на вашу профессию.
Сохраните файл и обновите страницу в Chrome. Вы должны увидеть соответствующие изменения.
Повторите, чтобы отредактировать другой контент
Теперь вы понимаете основной процесс:
- Инспектируем контент, который следует изменить
- Находим необходимые теги
- Находим эти теги в HTML файле
- Редактируем код
Давайте повторим этот процесс, чтобы кастомизировать остальной контент.
Добавляем собственное фото
Дальше мы добавим собственное фото слева от области с именем и профессией. Нажмите правой кнопкой мыши на изображение, чтоб проинспектировать его и найти необходимый тег:
Обратите внимание, что в окне инспектора данная строка находится сразу над той строчкой, которую мы редактировали до этого:
Откройте HTML файл и перейдите на строку 59:
Для этого тега нам следует изменить значение атрибута src , который находится в теге img . Сделать это можно изменив содержание между кавычек. После чего туда нужно написать путь к вашему изображению.
Найдите фотографию себя, которая вам понравиться, размерами 150px на 150px (не обращайте внимание что в названии файла указано 140×140.png, в действительности размер 150×150).
Поместите изображение в директорию «_content», в директорию где находится файл «index.html».
Теперь, в HTML файле, измените значение атрибута src , замените «140×140.png» на имя файла, который вы только что добавили в «_content» директорию. Убедитесь, что вы правильно указали расширение файла, оно должно соответствовать вашему файлу «png» / «jpg».
Сохраните ваш файл, обновите Chrome и вы должны увидеть новое изображение:
Измените ссылки соцсетей
Давайте изменим ссылки иконок социальных сетей в верхнем правом углу нашего шаблона. Как и прежде нажмите правой кнопкой мыши на одну из иконок, чтобы проинспектировать её. В открывшемся окне, посмотрите на строку, которая подсвечивается, вы должны увидеть там текст «facebook-icon». Мы будем использовать данный текст, чтобы найти соответствующий код в нашем HTML файле.
Вернитесь в Sublime Text, нажмите CTRL + F и найдите «facebook-icon». Нужный нам текст находится на 75 строке.
Тег a на строке 75 не что иное как ссылка для этой иконки и атрибут href , который вы увидите внутри, куда эта ссылка ведёт. Вам следует изменить значение href атрибута на адрес вашей Facebook страницы (к примеру: https://www.facebook.com/mylink)
Замените # , символ, который находится там по умолчанию, на ваш адрес. После чего сделайте тоже самое для Twitter на строке 79, для Google+ на строке 83 и Linkedin на строке 87.
Ели вы хотите убрать какую-нибудь из иконок, выделите открывающий тег <a> , затем содержание ссылки между тегами и закрывающий тег </a> и удалите весь этот код.
Сохраните и обновите ваш сайт, теперь если нажать на ссылку вы перейдёте по соответствующему адресу.
Отредактируйте контактную информацию
Пришло время изменить контактную информацию под иконками соцсетей.
Начните инспектировать слово «Email», чтобы найти где данная информация находится в коде. Обратите внимание на строку, которая подсвечена, нам нужна соответствующая строка в нашем HTML файле.
В Sublime Text, снова нажмите CTRL + F и найдите «Email». Вам необходимо отыскать слово «Email», которое окружено кодом, который мы видели в инспекторе.
Вы найдете интересующее нас место на строке 94. Выделите емейл, который стоит по умолчанию «jhon@sitename.com» в двух местах на этой строке:
После чего замените на свой собственный емейл адрес. На следующей строке замените номер телефона на свой и на строке ниже замените адрес своим адресом:
Отредактируйте секции CV
Продолжим, начнём редактировать основные секции CV в нашем шаблоне. В шаблоне есть несколько частей каждой секции, так что мы начнём инспектировать каждую из них, чтобы знать какой код стоит редактировать. Вы также научитесь перемещаться в окне инспектора между различными частями сайта.
Опуститесь ниже до секции «Professional Profile», нажмите правой кнопкой на параграф с текстом, чтобы инспектировать его.
В инспекторе выделится тег p — данный тег отвечает за создание параграфа с текстом.
Далее мы хотим знать, как вся секция CV с текстом выглядит в коде, не только один параграф. В окне инспектора, нажмите на строку кода сверху от параграфа, который мы недавно инспектировали и вы увидите, как выделиться текст:
Тем самым мы знаем, что каждая секция кода обернута в теги <div >. </div> . div означает division и такие теги служат для структурирования контента на сайте, создания лейаута.
Теперь инспектируйте секцию CV с заголовком — «Professional Profile».
Сначала вы увидите очередной набор тегов div . Всё это потому, что заголовок, который нас интересует вложен в эти теги.
Нажмите треугольник рядом с этим заголовком, чтобы развернуть его и увидеть контент, после чего сделайте тоже самое со следующей строкой, пока вы не увидите текст «Professional Profile». Он находится между <h2>. </h2> тегами, что означает заголовок второго уровня:
Наконец мы знаем, как выглядит код каждой части CV секции, вернёмся к Sublime Text и начнём редактирование.
Поместите курсор в самом верху HTML документа, чтобы начать поиск с этого места. Нажмите CTRL + F, чтобы найти «cv-item». Продолжайте искать пока не найдёте код <div > сразу после <h2>Professional Profile</h2> .
Замените Professional Profile на текст, который вас устраивает. Оберните каждый параграф с текстом в <p>. </p> теги.
Когда вы закончите, убедитесь что открывающий тег параграфа, последний параграф секции содержит атрибут class со значением last , вот так: <p >. </p> . Это добавляет стили из таблицы CSS стилей нашего шаблона — пространство между текстом секции.
После того как документ сохранён, обновите страницу, будет видно, что две верхние секции были кастомизированы.
Теперь мы можем перейти к редактированию оставшихся элементов CV секции, таким же образом как мы это сделали с «Professional Profile».
Проинспектируйте каждую часть, каждой секции, чтобы ознакомиться с кодом, который необходим для редактирования.
Проинспектируйте время работы:
Проинспектируйте маркированный список:
Используйте такой же подход, который мы применяли во время редактирования секции «Professional Profile», для редактирования оставшихся CV секций. Чтобы отредактировать должность, время и маркированный список найдите соответствующий код, который мы видели в окне инспектора.
Используйте p теги для создания параграфов и как в случае с «Professional Profile» секцией, если секция заканчивается параграфом <p> , добавьте class=»last» то есть <p >. </p> .
Обратите внимание: если вы хотите добавить новые секции CV, или убрать уже существующую, вам нужно найти теги в инспекторе, которые оборачивают всю секцию.
В этом примере вы увидите, что вся секция обернута тегами <div >. </div> .
В вашем коде вы можете найти целый блок кода, после чего скопировать его и вставить, для создания нового элемента, или удалить, на тот случай если хотите избавиться от него.
Отредактируйте копирайт
Мы закончили с редактированием CV секций и у нас остался последний пункт нашего списка для редактирования — копирайт в футере. Опять же мы будем использовать знакомый нам процесс. Нажмите правой кнопкой мыши на копирайт, чтобы проинспектировать его:
Найдите соответствующий код в вашем HTML и отредактируйте его добавив текущий год и собственное название:
На этом всё!
Отлично! Мы только что кастомизировали этот HTML шаблон и он отображает ваш контент. Надеюсь теперь вы чувствуете себя более уверенно и у вас не возникнут сложности с кастомизацией в будущем.
Возможно шаблон над которым мы работали относительно простой, но помните процесс для редактирования всегда один и тот же, не важно насколько сложный вы кастомизируете шаблон. Просто инспектируйте шаблон, найдите часть кода, которую хотите изменить, затем отредактируйте HTML в редакторе.
Когда вы редактируете шаблон, встретив незнакомый HTML тег, не волнуйтесь и не опускайте руки. В интернете можно найти бесконечный набор информации, тем самым вы можете узнать больше об этом теге.