Від автора: ви купили HTML-шаблон. Але перш ніж завантажувати його на сервер, потрібно його налаштувати. Та от проблема – ви майже не розбираєтеся в коді і не впевнені, як це зробити. Не хвилюйтеся, у цій статті ми розповімо вам весь процес настройки html шаблонів.
Ми припускаємо, що ви жодного разу в житті не бачили ні одного рядка HTML коду, не кажучи вже про його редагуванні. Так що, неважливо наскільки ви новачок, ми вам розповімо, що робити на кожному етапі. Почнемо з самого початку
Що таке HTML?
З технічної точки зору відповіддю на це питання буде «Мова розмітки гіпертексту». Але так як нам потрібно лише налаштувати шаблон, то ви можете визначити HTML як серію відкриваються і закриваються тегів, ось так:
Теги позначаються символами , а закриваючі теги завжди пишуться зі знаком /. Між тегів розташований контент, ось так:
Джон Смітт, Front End розробник
Але іноді зустрічаються і одинарні теги без закриває пари, як, наприклад, цей тег:
Різні теги створюють різний контент на веб-сторінці. Приклад вище
створює великий заголовок «Джон Смітт, Front End розробник», а приклад відображає файл зображення «content-3/images/mypic.jpg». Щоб редагувати HTML-шаблон вам необхідно знати, який тег відповідає за ту частину сторінки, яку ви бажаєте змінити, як знайти його в коді, і як його відредагувати таким чином, щоб він показував те, що хочете ви.
Знайдіть собі редактор коду
Редагувати HTML код цілком можна і в Notepad або схожою програмою, але навчання пройде більш гладко, якщо ви підберете собі відповідний редактор коду. Одна з головних причин – ваш код буде підсвічуватися різними кольорами. Трохи пізніше ви зрозумієте, що так код набагато легше читати і редагувати. Я рекомендую працювати в Sublime Text. Завантажити його можна за посиланням: https://www.sublimetext.com/3
Завантажте та відкрийте ваш HTML-шаблон
Завантажте куплений вами шаблон в уроці ми будемо працювати з Clean CV.
Більшість шаблонів запаковані в ZIP, тому вам доведеться їх розпакувати. Порийтеся в папках шаблону і знайдіть там index.html або index.htm. У нашому шаблоні CV файл index.html розташований у папці 01.html-website.
Тепер відкрийте цей файл у Chrome. Навіть якщо він не є у вас браузером за замовчуванням, будь ласка, в рамках цього уроку працюйте в ньому, так як ми будемо використовувати інструменти, вбудовані в браузер, які допоможуть нам з редагуванням коду.
Визначте частину коду яку хочете змінити
Якщо ви в перший раз редагуєте шаблон, постарайтеся не сильно занурюватися в налаштування кольору шаблону. Для цього вам доведеться вивчити CSS, мову, що відповідає за стилі. Якщо ви новачок зосередьтеся на чомусь одному, і краще всього почати з HTML. Для початку погляньте в Chrome на свій шаблон і визначте, які елементи і зображення ви хочете змінити. Можете скласти список, щоб ви йшли за ним і викреслювали пункти. У нашому шаблоні CV ми хочемо виправити:
Ім’я
Професію
Особисте зображення
Посилання на соціальні мережі
Контактну інформацію
CV секції: «Професійний профіль», «Досвід роботи», «Технічні навички» та «Освіта»
Текст авторських прав
Після того, як ми склали список змін, ми можемо знайти відповідні HTML теги в коді. Почнемо з імені.
Знайдіть тег через інспектор
Натисніть правою кнопкою миші на імені «John Smith» та натисніть переглянути код:
У браузері повинна відкритися така панель:
За допомогою цієї панелі ми можемо дивитися код в інтерактивному режимі. Наведіть курсор миші на рядок з
…
(заголовок першого рівня), і секція з ім’ям підсвітить, як на скріншоті вище.
Наводячи курсор миші на різні рядки коду, і спостерігаючи за тим, яка частина сторінки підсвічується, панель допоможе вам зрозуміти, якою код за що відповідає. Водите мишкою над кодом до тих пір, поки не відобразиться потрібний вами елемент.
Тепер відкрийте тег h1, клікнувши на маленький трикутник ліворуч. Тег розкриється, і всередині ви побачите контент, тобто John Smith Front End Developer.
Напис збігається з тією, яку ви бачите на екрані, значить, ви правильно знайшли код.
Відредагуйте тег в HTML
Тепер необхідно відредагувати HTML файл. Відкрийте файл index.html в Sublime Text. Ви побачите щось типу:
Вам необхідно знайти код, який ви бачили в панелі розробника Chrome. Прокручуйте файл, поки не натрапите на цей код на рядках 61-64.
Можна відредагувати вміст між тегів і замінити ім’я та професію на свої. Спершу, змінимо ім’я John Smith:
Потім замініть професію в тегах small Front End Developer на свою.
Збережіть файл і оновіть сторінку в Chrome. Зміни повинні вступити в силу:
Відредагуйте інший контент
Тепер ви зрозуміли основний процес:
Инспектируете контент, який хочете змінити
Знаходьте відповідний тег
Знаходите ці теги в HTML файлі
Редагуєте код
Повторимо цей процес і відредагуємо залишилися теги.
Додаємо своє зображення
Далі нам необхідно додати своє зображення зліва від імені та професії. Правий клік миші на зображенні – переглянути код знаходимо відповідний тег:
В інспекторі можна помітити, що дана рядок знаходиться прямо над тією, яку ми вже відредагували:
Поверніться в HTML файл і знайдіть цей тег на 59 рядку:
В цьому теге необхідно змінити значення атрибуту src, який знаходиться усередині тега img. Вам потрібно замінити текст у лапках, необхідно вказати повний шлях до зображення. Створіть своє зображення розміром 150px х 150px (не звертайте увагу, що старий файл 140×140.png, розмір насправді 150х150). Перемістіть зображення в папку «_content», яка розташована в тій же папці, що і індексний файл.
Тепер замініть значення «140×140.png» атрибуту src в HTML файлі повний шлях до вашого файлу, який зберігається в папці «_content». Перевірте правильність розширення, воно має збігатися з вашим, тобто «png» / «jpg»:
Збережіть файл, поновіть сторінку і ви побачите своє зображення:
Редагуємо посилання соціальних мереж
Тепер давайте відредагуємо посилання соціальних мереж у верхньому правому куті шаблону. Все як і раніше, натискаємо правою кнопкою миші на іконці, натискаємо переглянути код. У вікні знаходимо рядок, яка вище підсвічується і бачимо, що в ній є текст «facebook-icon». Ми використовуємо цей текст для пошуку коду в HTML файлі.
Повертаємося в Sublime Text, натискаємо CTRL + F і запускаємо пошук по фразі «facebook-icon». Текст буде знайдений на рядку 75.
Тег a на 75 рядку створює посилання для іконки, а атрибут href всередині тега a задає адресу для переходу. Необхідно замінити цю адресу на свій Facebook аккаунт (наприклад, https://www.facebook.com/mylink). Замініть символ #, який пишеться за замовчуванням, на свою адресу. Потім виконайте те ж саме для Twitter на рядку 79, Google+ на рядку 83 і LinkedIn на рядку 87.
Якщо ви хочете видалити деякі іконки соціальних мереж, виділіть їх від тега до закриваючого і видаліть цей код. Збережіть і оновіть сторінку. Тепер при натисканні на іконки ви будете переходити на правильні адреси.
Редагуємо контактну інформацію
Давайте відредагуємо контактну інформацію прямо під іконками соціальних мереж. Почнемо з інспектування слова Email, щоб ми могли визначити розташування секції в коді. Зверніть увагу на підсвічену рядок і на ту, що під нею. За ним ми зможемо знайти секцію контактної інформації в HTML коді.
В редакторі Sublime Text натисніть CTRL + F і вбийте в пошуковий рядок «Email». Необхідно знайти слово «Email», яке буде оточене саме тими тегами, які ми бачили в інспекторі. Результат знаходиться на рядку 94. Підсвічений адресу електронної пошти за замовчуванням [email protected] вказаний два рази:
Замініть ці значення на свою адресу електронної пошти. На наступному рядку можна замінити номер телефону, а ще одним рядком нижче можна вказати свій сайт:
Редагуємо CV секції
Давайте перейдемо до CV секціях шаблону. В шаблоні їх кілька, ми проинспектируем кожну з них, щоб ви знали, як знайти їх коді. Також ви закріпіть свої навички пересування по коду через інспектор. Перейдіть на веб-сторінку до секції Professional Profile, клікніть правою кнопкою миші по параграфу тексту і перегляньте його код.
В інспекторі підсвічуватиметься тег p – з допомогою цього тега можна створювати параграфи тексту.
Тепер нам необхідно дізнатися, як виглядає вся CV секція, а не тільки параграф. Якщо в інспектора клікнути на один рядок вище параграфа, то ви побачите, що весь текст знову підсвічується:
Це говорить нам, що кожна секція коду обгорнута в тег
. Div – скорочення від division (поділ), цей тег використовується для контролю і стилізації макета. Тепер давайте проинспектируем заголовок секції Professional Profile:
Спершу ви побачите просто ще один набір div ів, просто заголовок розташований всередині цього тега. Клікніть по маленькому трикутника ліворуч для розкриття коду. Робіть так до тих пір, поки не побачите текст «Professional Profile», який ви шукайте. Текст буде обгорнутий в теги h2, теги заголовка другого рівня:
Тепер ми знаємо, як виглядає код CV секції і можемо редагувати його через Sublime Text. Кликніть в самій верхній частині HTML документа, щоб почати пошук з самого початку. Потім натисніть CTRL + F і вбийте «cv-item». Шукайте, поки не зустрінете
Professional Profile
.
Тепер ви можете замінити текст Professional Profile на свій. Кожен параграф тексту розміщуйте в тегах
…
. Коли закінчите, перевірте, щоб в початковому тегу останнього параграфа тексту був атрибут class зі значенням last, ось так
…..
. Даний клас прописаний у файлі стилів шаблону і потрібен для правильної настройки відступу після секції.
Якщо тепер зберегти HTML-документ і оновити сторінку, то верхні дві секції будуть повністю оновлені.
Залишилося відредагувати інші секції точно так само, як і з секцією Professional Profile. Проінспектуйте кожну частину секції, щоб знати, що шукати в коді. Проинспектируем посаду:
Період роботи:
Маркований список:
Виконайте все те ж саме, що робили з секцією Professional Profile і змініть залишилися секції. Щоб відредагувати посада, період роботи або маркірований список, знайдіть код, який ви бачили в інспекторі. Все точно так само, як і раніше. Для створення параграфа використовуйте тег p. Так само як і з секцією Professional Profile, якщо секція закінчується параграфом, додайте class=»last» (
…
). Зауваження: Якщо ви хочете додати нову CV секцію або видалити існуючу, знайдіть повний код секції в інспекторі.
У цьому вся прикладі секція знаходиться в теге
. У коді ви можете знайти весь блок і скопіювати його, щоб створити ще одну секцію або видалити існуючу.
Редагуємо текст авторських прав
Після редагування CV секцій нам залишилося змінити останній пункт у списку – текст авторських прав в футері. Ми будемо використовувати ту ж тактику. Натискаємо правою кнопкою миші на тексті і переглядаємо його код:
Потім знаходимо потрібний код в HTML файлі і замінюємо на поточний рік, а на своє ім’я.
От і все!
Ми закінчили! Тільки що ви повністю налаштували HTML шаблон під свій контент. Сподіваюся, в майбутньому ви будете почувати себе набагато впевненіше при редагуванні коду. Може бути, наш шаблон був і простий, головне пам’ятайте, що процес редагування завжди однаковий і не залежить від складності шаблону. Просто инспектируйте шаблон і знаходите код тій частині, яку хочете змінити. Знаходьте код в HTML файлі і редагуйте його. Якщо під час редагування вам зустрічаються невідомі теги, нехай вони не лякають вас. В мережі повно інформації, яка допоможе вам запам’ятати, що кожен тег робить.