() translation by (you can also view the original English article)
Итак вы только что приобрели HTML шаблон и теперь вы хотите его кастомизировать, прежде чем разместить его в сети, но у вас нет опыта создания HTML страниц, поэтому вы не уверены, как реализовать задуманное. Не волнуйтесь, в этом туториале мы объяснить, как это сделать, шаг за шагом.
Мы будем работать, предполагая, что вам не доводилось ранее видеть ни одной строчки HTML, что вам никогда не приходилось редактировать HTML, поэтому не важно насколько вы новичок в этом деле, я объясню вам на подробных примерах, как добиться желаемого результата.
Давайте приступим.
Что такое HTML?
Говоря технически, ответ на этот вопрос "язык гипертекстовой разметки (Hyper Text Markup Language)". Однако, для кастомизации шаблона, нам достаточно знать, что HTML это набор открывающих и закрывающих тегов, к примеру:
1 |
<h1> </h1> |
Теги обозначаются символами < и > и закрывающий тег всегда имеет /. Между тегами находится наш контент:
1 |
<h1>John Smith, Front End Developer</h1> |
Хотя иногда, мы можем увидеть одиночный элемент, у которого нет закрывающего тега, к примеру:
1 |
<img src="mypic.jpg"> |
Разные 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 файле
- Редактируем код
Давайте повторим этот процесс, чтобы кастомизировать остальной контент.
Добавляем собственное фото
Дальше мы добавим собственное фото слева от области с именем и профессией. Нажмите правой кнопкой мыши на изображение, чтоб проинспектировать его и найти необходимый тег:
1 |
<img src="_content/140x140.png" alt=""> |
Обратите внимание, что в окне инспектора данная строка находится сразу над той строчкой, которую мы редактировали до этого:
Откройте HTML файл и перейдите на строку 59:
Для этого тега нам следует изменить значение атрибута src, который находится в теге img. Сделать это можно изменив содержание между кавычек. После чего туда нужно написать путь к вашему изображению.
Найдите фотографию себя, которая вам понравиться, размерами 150px на 150px (не обращайте внимание что в названии файла указано 140x140.png, в действительности размер 150x150).
Поместите изображение в директорию "_content", в директорию где находится файл "index.html".
Теперь, в HTML файле, измените значение атрибута src, замените "140x140.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 class="cv-item">...</div>. div означает division и такие теги служат для структурирования контента на сайте, создания лейаута.
Теперь инспектируйте секцию CV с заголовком - "Professional Profile".
Сначала вы увидите очередной набор тегов div. Всё это потому, что заголовок, который нас интересует вложен в эти теги.
Нажмите треугольник рядом с этим заголовком, чтобы развернуть его и увидеть контент, после чего сделайте тоже самое со следующей строкой, пока вы не увидите текст "Professional Profile". Он находится между <h2>...</h2> тегами, что означает заголовок второго уровня:
Наконец мы знаем, как выглядит код каждой части CV секции, вернёмся к Sublime Text и начнём редактирование.
Поместите курсор в самом верху HTML документа, чтобы начать поиск с этого места. Нажмите CTRL + F, чтобы найти "cv-item". Продолжайте искать пока не найдёте код <div class="cv-item"> сразу после <h2>Professional Profile</h2>.
Замените Professional Profile на текст, который вас устраивает. Оберните каждый параграф с текстом в <p>...</p> теги.
Когда вы закончите, убедитесь что открывающий тег параграфа, последний параграф секции содержит атрибут class со значением last, вот так: <p class="last">.....</p>. Это добавляет стили из таблицы CSS стилей нашего шаблона - пространство между текстом секции.
После того как документ сохранён, обновите страницу, будет видно, что две верхние секции были кастомизированы.
Теперь мы можем перейти к редактированию оставшихся элементов CV секции, таким же образом как мы это сделали с "Professional Profile".
Проинспектируйте каждую часть, каждой секции, чтобы ознакомиться с кодом, который необходим для редактирования.
Проинспектируйте должность:
Проинспектируйте время работы:
Проинспектируйте маркированный список:
Используйте такой же подход, который мы применяли во время редактирования секции "Professional Profile", для редактирования оставшихся CV секций. Чтобы отредактировать должность, время и маркированный список найдите соответствующий код, который мы видели в окне инспектора.
Используйте p теги для создания параграфов и как в случае с "Professional Profile" секцией, если секция заканчивается параграфом <p>, добавьте class="last" то есть <p class="last">...</p>.
Обратите внимание: если вы хотите добавить новые секции CV, или убрать уже существующую, вам нужно найти теги в инспекторе, которые оборачивают всю секцию.
В этом примере вы увидите, что вся секция обернута тегами <div class="cv-item">...</div>.
В вашем коде вы можете найти целый блок кода, после чего скопировать его и вставить, для создания нового элемента, или удалить, на тот случай если хотите избавиться от него.
Отредактируйте копирайт
Мы закончили с редактированием CV секций и у нас остался последний пункт нашего списка для редактирования - копирайт в футере. Опять же мы будем использовать знакомый нам процесс. Нажмите правой кнопкой мыши на копирайт, чтобы проинспектировать его:
Найдите соответствующий код в вашем HTML и отредактируйте его добавив текущий год и собственное название:
На этом всё!
Отлично! Мы только что кастомизировали этот HTML шаблон и он отображает ваш контент. Надеюсь теперь вы чувствуете себя более уверенно и у вас не возникнут сложности с кастомизацией в будущем.
Возможно шаблон над которым мы работали относительно простой, но помните процесс для редактирования всегда один и тот же, не важно насколько сложный вы кастомизируете шаблон. Просто инспектируйте шаблон, найдите часть кода, которую хотите изменить, затем отредактируйте HTML в редакторе.
Когда вы редактируете шаблон, встретив незнакомый HTML тег, не волнуйтесь и не опускайте руки. В интернете можно найти бесконечный набор информации, тем самым вы можете узнать больше об этом теге.
Вам могут помочь ссылки ниже, набор отличных обучающих материалов:
