Налаштування HTML шаблону

15

Від автора: ви купили HTML-шаблон. Але перш ніж завантажувати його на сервер, потрібно його налаштувати. Та от проблема – ви майже не розбираєтеся в коді і не впевнені, як це зробити. Не хвилюйтеся, у цій статті ми розповімо вам весь процес настройки html шаблонів.

Ми припускаємо, що ви жодного разу в житті не бачили ні одного рядка HTML коду, не кажучи вже про його редагуванні. Так що, неважливо наскільки ви новачок, ми вам розповімо, що робити на кожному етапі. Почнемо з самого початку

Що таке HTML?

З технічної точки зору відповіддю на це питання буде «Мова розмітки гіпертексту». Але так як нам потрібно лише налаштувати шаблон, то ви можете визначити HTML як серію відкриваються і закриваються тегів, ось так:

Теги позначаються символами , а закриваючі теги завжди пишуться зі знаком /. Між тегів розташований контент, ось так:

Джон Смітт, Front End розробник

Але іноді зустрічаються і одинарні теги без закриває пари, як, наприклад, цей тег:

Налаштування HTML шаблону

Різні теги створюють різний контент на веб-сторінці. Приклад вище

створює великий заголовок «Джон Смітт, Front End розробник», а приклад Налаштування HTML шаблону відображає файл зображення «content-3/images/mypic.jpg». Щоб редагувати HTML-шаблон вам необхідно знати, який тег відповідає за ту частину сторінки, яку ви бажаєте змінити, як знайти його в коді, і як його відредагувати таким чином, щоб він показував те, що хочете ви.

Знайдіть собі редактор коду

Редагувати HTML код цілком можна і в Notepad або схожою програмою, але навчання пройде більш гладко, якщо ви підберете собі відповідний редактор коду. Одна з головних причин – ваш код буде підсвічуватися різними кольорами. Трохи пізніше ви зрозумієте, що так код набагато легше читати і редагувати. Я рекомендую працювати в Sublime Text. Завантажити його можна за посиланням: https://www.sublimetext.com/3

Завантажте та відкрийте ваш HTML-шаблон

Завантажте куплений вами шаблон в уроці ми будемо працювати з Clean CV.

Налаштування HTML шаблону

Більшість шаблонів запаковані в ZIP, тому вам доведеться їх розпакувати. Порийтеся в папках шаблону і знайдіть там index.html або index.htm. У нашому шаблоні CV файл index.html розташований у папці 01.html-website.

Налаштування HTML шаблону

Тепер відкрийте цей файл у Chrome. Навіть якщо він не є у вас браузером за замовчуванням, будь ласка, в рамках цього уроку працюйте в ньому, так як ми будемо використовувати інструменти, вбудовані в браузер, які допоможуть нам з редагуванням коду.

Визначте частину коду яку хочете змінити

Якщо ви в перший раз редагуєте шаблон, постарайтеся не сильно занурюватися в налаштування кольору шаблону. Для цього вам доведеться вивчити CSS, мову, що відповідає за стилі. Якщо ви новачок зосередьтеся на чомусь одному, і краще всього почати з HTML. Для початку погляньте в Chrome на свій шаблон і визначте, які елементи і зображення ви хочете змінити. Можете скласти список, щоб ви йшли за ним і викреслювали пункти. У нашому шаблоні CV ми хочемо виправити:

Ім’я

Професію

Особисте зображення

Посилання на соціальні мережі

Контактну інформацію

CV секції: «Професійний профіль», «Досвід роботи», «Технічні навички» та «Освіта»

Текст авторських прав

Після того, як ми склали список змін, ми можемо знайти відповідні HTML теги в коді. Почнемо з імені.

Знайдіть тег через інспектор

Натисніть правою кнопкою миші на імені «John Smith» та натисніть переглянути код:

Налаштування HTML шаблону

У браузері повинна відкритися така панель:

Налаштування HTML шаблону

За допомогою цієї панелі ми можемо дивитися код в інтерактивному режимі. Наведіть курсор миші на рядок з

(заголовок першого рівня), і секція з ім’ям підсвітить, як на скріншоті вище.

Наводячи курсор миші на різні рядки коду, і спостерігаючи за тим, яка частина сторінки підсвічується, панель допоможе вам зрозуміти, якою код за що відповідає. Водите мишкою над кодом до тих пір, поки не відобразиться потрібний вами елемент.

Тепер відкрийте тег h1, клікнувши на маленький трикутник ліворуч. Тег розкриється, і всередині ви побачите контент, тобто John Smith Front End Developer.

Налаштування HTML шаблону

Напис збігається з тією, яку ви бачите на екрані, значить, ви правильно знайшли код.

Відредагуйте тег в HTML

Тепер необхідно відредагувати HTML файл. Відкрийте файл index.html в Sublime Text. Ви побачите щось типу:

Налаштування HTML шаблону

Вам необхідно знайти код, який ви бачили в панелі розробника Chrome. Прокручуйте файл, поки не натрапите на цей код на рядках 61-64.

Налаштування HTML шаблону

Можна відредагувати вміст між тегів і замінити ім’я та професію на свої. Спершу, змінимо ім’я John Smith:

Налаштування HTML шаблону

Потім замініть професію в тегах small Front End Developer на свою.

Налаштування HTML шаблону

Збережіть файл і оновіть сторінку в Chrome. Зміни повинні вступити в силу:

Налаштування HTML шаблону

Відредагуйте інший контент

Тепер ви зрозуміли основний процес:

Инспектируете контент, який хочете змінити

Знаходьте відповідний тег

Знаходите ці теги в HTML файлі

Редагуєте код

Повторимо цей процес і відредагуємо залишилися теги.

Додаємо своє зображення

Далі нам необхідно додати своє зображення зліва від імені та професії. Правий клік миші на зображенні – переглянути код знаходимо відповідний тег:

Налаштування HTML шаблону

В інспекторі можна помітити, що дана рядок знаходиться прямо над тією, яку ми вже відредагували:

Налаштування HTML шаблону

Поверніться в HTML файл і знайдіть цей тег на 59 рядку:

Налаштування HTML шаблону

В цьому теге необхідно змінити значення атрибуту src, який знаходиться усередині тега img. Вам потрібно замінити текст у лапках, необхідно вказати повний шлях до зображення. Створіть своє зображення розміром 150px х 150px (не звертайте увагу, що старий файл 140×140.png, розмір насправді 150х150). Перемістіть зображення в папку «_content», яка розташована в тій же папці, що і індексний файл.

Налаштування HTML шаблону

Тепер замініть значення «140×140.png» атрибуту src в HTML файлі повний шлях до вашого файлу, який зберігається в папці «_content». Перевірте правильність розширення, воно має збігатися з вашим, тобто «png» / «jpg»:

Налаштування HTML шаблону

Збережіть файл, поновіть сторінку і ви побачите своє зображення:

Налаштування HTML шаблону

Редагуємо посилання соціальних мереж

Тепер давайте відредагуємо посилання соціальних мереж у верхньому правому куті шаблону. Все як і раніше, натискаємо правою кнопкою миші на іконці, натискаємо переглянути код. У вікні знаходимо рядок, яка вище підсвічується і бачимо, що в ній є текст «facebook-icon». Ми використовуємо цей текст для пошуку коду в HTML файлі.

Налаштування HTML шаблону

Повертаємося в Sublime Text, натискаємо CTRL + F і запускаємо пошук по фразі «facebook-icon». Текст буде знайдений на рядку 75.

Налаштування HTML шаблону

Тег a на 75 рядку створює посилання для іконки, а атрибут href всередині тега a задає адресу для переходу. Необхідно замінити цю адресу на свій Facebook аккаунт (наприклад, https://www.facebook.com/mylink). Замініть символ #, який пишеться за замовчуванням, на свою адресу. Потім виконайте те ж саме для Twitter на рядку 79, Google+ на рядку 83 і LinkedIn на рядку 87.

Налаштування HTML шаблону

Якщо ви хочете видалити деякі іконки соціальних мереж, виділіть їх від тега до закриваючого і видаліть цей код. Збережіть і оновіть сторінку. Тепер при натисканні на іконки ви будете переходити на правильні адреси.

Редагуємо контактну інформацію

Давайте відредагуємо контактну інформацію прямо під іконками соціальних мереж. Почнемо з інспектування слова Email, щоб ми могли визначити розташування секції в коді. Зверніть увагу на підсвічену рядок і на ту, що під нею. За ним ми зможемо знайти секцію контактної інформації в HTML коді.

Налаштування HTML шаблону

В редакторі Sublime Text натисніть CTRL + F і вбийте в пошуковий рядок «Email». Необхідно знайти слово «Email», яке буде оточене саме тими тегами, які ми бачили в інспекторі. Результат знаходиться на рядку 94. Підсвічений адресу електронної пошти за замовчуванням [email protected] вказаний два рази:

Налаштування HTML шаблону

Замініть ці значення на свою адресу електронної пошти. На наступному рядку можна замінити номер телефону, а ще одним рядком нижче можна вказати свій сайт:

Налаштування HTML шаблону

Редагуємо CV секції

Давайте перейдемо до CV секціях шаблону. В шаблоні їх кілька, ми проинспектируем кожну з них, щоб ви знали, як знайти їх коді. Також ви закріпіть свої навички пересування по коду через інспектор. Перейдіть на веб-сторінку до секції Professional Profile, клікніть правою кнопкою миші по параграфу тексту і перегляньте його код.

Налаштування HTML шаблону

В інспекторі підсвічуватиметься тег p – з допомогою цього тега можна створювати параграфи тексту.

Налаштування HTML шаблону

Тепер нам необхідно дізнатися, як виглядає вся CV секція, а не тільки параграф. Якщо в інспектора клікнути на один рядок вище параграфа, то ви побачите, що весь текст знову підсвічується:

Налаштування HTML шаблону

Це говорить нам, що кожна секція коду обгорнута в тег

. Div – скорочення від division (поділ), цей тег використовується для контролю і стилізації макета. Тепер давайте проинспектируем заголовок секції Professional Profile:

Налаштування HTML шаблону

Спершу ви побачите просто ще один набір div ів, просто заголовок розташований всередині цього тега. Клікніть по маленькому трикутника ліворуч для розкриття коду. Робіть так до тих пір, поки не побачите текст «Professional Profile», який ви шукайте. Текст буде обгорнутий в теги h2, теги заголовка другого рівня:

Налаштування HTML шаблону

Тепер ми знаємо, як виглядає код CV секції і можемо редагувати його через Sublime Text. Кликніть в самій верхній частині HTML документа, щоб почати пошук з самого початку. Потім натисніть CTRL + F і вбийте «cv-item». Шукайте, поки не зустрінете

. Цей код йде відразу після

Professional Profile

.

Налаштування HTML шаблону

Тепер ви можете замінити текст Professional Profile на свій. Кожен параграф тексту розміщуйте в тегах

. Коли закінчите, перевірте, щоб в початковому тегу останнього параграфа тексту був атрибут class зі значенням last, ось так

…..

. Даний клас прописаний у файлі стилів шаблону і потрібен для правильної настройки відступу після секції.

Налаштування HTML шаблону

Якщо тепер зберегти HTML-документ і оновити сторінку, то верхні дві секції будуть повністю оновлені.

Налаштування HTML шаблону

Залишилося відредагувати інші секції точно так само, як і з секцією Professional Profile. Проінспектуйте кожну частину секції, щоб знати, що шукати в коді. Проинспектируем посаду:

Налаштування HTML шаблону

Період роботи:

Налаштування HTML шаблону

Маркований список:

Налаштування HTML шаблону

Виконайте все те ж саме, що робили з секцією Professional Profile і змініть залишилися секції. Щоб відредагувати посада, період роботи або маркірований список, знайдіть код, який ви бачили в інспекторі. Все точно так само, як і раніше. Для створення параграфа використовуйте тег p. Так само як і з секцією Professional Profile, якщо секція закінчується параграфом, додайте class=»last» (

). Зауваження: Якщо ви хочете додати нову CV секцію або видалити існуючу, знайдіть повний код секції в інспекторі.

Налаштування HTML шаблону

У цьому вся прикладі секція знаходиться в теге

. У коді ви можете знайти весь блок і скопіювати його, щоб створити ще одну секцію або видалити існуючу.

Налаштування HTML шаблону

Редагуємо текст авторських прав

Після редагування CV секцій нам залишилося змінити останній пункт у списку – текст авторських прав в футері. Ми будемо використовувати ту ж тактику. Натискаємо правою кнопкою миші на тексті і переглядаємо його код:

Налаштування HTML шаблону

Потім знаходимо потрібний код в HTML файлі і замінюємо на поточний рік, а на своє ім’я.

Налаштування HTML шаблону

От і все!

Ми закінчили! Тільки що ви повністю налаштували HTML шаблон під свій контент. Сподіваюся, в майбутньому ви будете почувати себе набагато впевненіше при редагуванні коду. Може бути, наш шаблон був і простий, головне пам’ятайте, що процес редагування завжди однаковий і не залежить від складності шаблону. Просто инспектируйте шаблон і знаходите код тій частині, яку хочете змінити. Знаходьте код в HTML файлі і редагуйте його. Якщо під час редагування вам зустрічаються невідомі теги, нехай вони не лякають вас. В мережі повно інформації, яка допоможе вам запам’ятати, що кожен тег робить.