Deci, tocmai ați achiziționat un șablon HTML și acum trebuie să îl personalizați înainte de al putea pune online, dar nu aveți experiență cu codul, astfel încât să nu știți cum să faceți acest lucru. Ei bine, odihniți-vă ușor, pentru că în acest tutorial vă vom trece prin întregul proces.

Vom lucra la presupunerea că nu ați mai văzut niciodată o linie de HTML, să nu mai vorbim de o ediție, așa că, indiferent cât de noi lucrați cu codul, veți fi arătați exact ce să faceți la fiecare pas cale.

Să începem chiar de la început.

Ce este HTML?

Din punct de vedere tehnic, răspunsul la această întrebare este "Hyper Text Markup Language". Cu toate acestea, în scopul personalizării unui șablon, puteți considera HTML ca o serie de etichete de deschidere și de închidere, astfel:

Etichetele sunt indicate cu < și > semne, iar eticheta de închidere include întotdeauna a /. Perele de etichete conțin conținut între ele:

John Smith, dezvoltator frontal

Uneori, însă, există și etichete independente, fără un partener de închidere, cum ar fi:

Etichetele HTML diferite fac ca diferite tipuri de conținut să apară pe o pagină Web. Exemplul de mai sus din tag-urile ar crea o rubrică mare "John Smith, Front End Developer" și exemplul tag-ul ar face ca fișierul imagine "images_9 / how-to-customize-an-html-template.jpg" să apară pe pagină.

Pentru a edita un șablon HTML tot ce trebuie să știți este ce etichete reprezintă părțile paginii pe care doriți să o modificați, cum să le găsiți în cod și cum să le editați, astfel încât acestea să arate ce doriți.

Obțineți-vă un editor de coduri

Da, este complet posibil să editați codul HTML în Notepad sau un program similar, dar lucrurile vor merge mult mai bine pentru dvs. dacă utilizați o aplicație corectă de editare a codului. Unul dintre motivele principale este că veți obține o evidențiere colorată a codului dvs., după cum veți vedea în scurt timp, ceea ce va face mult mai ușor citirea și editarea.

Vă recomandăm textul Sublime, care puteți descărca aici: https://www.sublimetext.com/3

Descărcați și vizualizați șablonul HTML

Descărcați șablonul pe care l-ați achiziționat - în cazul acestui tutorial vom folosi acest șablon "Curățenie CV" pentru a demonstra.

Cele mai multe șabloane HTML vor veni într-un fișier ZIP - dacă da, continuați și extrageți-vă acum. Apoi, analizați în interiorul dosarelor șablonului până când găsiți fișierul "index.html" sau "index.htm".

În exemplul nostru de exemplar CV, fișierul "index.html" se găsește în directorul "01.html-site".

Acum, deschideți fișierul în Chrome. Chiar dacă Chrome nu este browserul dvs. implicit sau preferat, utilizați-l oricum, deoarece vom lucra cu niște instrumente pe care le-a construit pentru a vă ajuta în procesul de editare.

Identificați piesele pe care doriți să le modificați

Dacă aceasta este prima dată când editați un șablon, încercați să nu vă atrageți în ideea de a schimba culorile și aspectul încă. Pentru a face acest lucru trebuie să vă grăbiți în CSS, limba responsabilă pentru stylingul paginilor. Este o idee bună să vă concentrați asupra unui singur lucru în momentul în care sunteți nou în personalizarea șablonului și HTML este cel mai bun loc pentru a începe.

Pentru a obține rostogolirea mingii, aruncați o privire asupra șablonului din Chrome și aflați ce elemente și imagini scrise pe pagina pe care trebuie să le modificați. Dacă doriți, puteți să vă pregătiți o listă pentru a putea trece și a verifica fiecare articol în timp ce efectuați modificările.

În cazul șablonului nostru de CV dorim să schimbăm:

• Nume
• Profesie
• Imagine personală
• Social media link-uri
• Informatii de contact
• Secțiunile CV: "Profil profesional", "Experiența profesională", "Competențe tehnice" și "Educație"
• Mesaj de autor

Acum avem o listă de elemente de schimbat, putem stabili despre localizarea etichetelor HTML corespunzătoare în cod. Să începem cu numele.

Găsiți eticheta în inspector

Faceți clic dreapta pe numele, care citește în mod implicit "John Smith" și selectați Inspecta:

Un panou ca acesta ar trebui să se deschidă în browserul dvs.:

Panoul "Inspecție"

Acest panou vă oferă o modalitate interactivă de a privi codul. Deplasați mouse-ul peste linia care arată

...

(titlurile de nivel 1) și ar trebui să vedeți secțiunea de nume a șablonului evidențiată așa cum vedeți în captura de ecran de mai sus.

Plasând mouse-ul peste diferite linii de cod și văzând care zone ale paginii se aprinde, acest panou vă ajută să aflați ce cod corespunde cu ce element. Pur și simplu continuați să treceți peste diferite linii de cod până când partea pe care o căutați se aprinde.

Extindeți acum h1 faceți clic pe triunghiul mic spre stânga și ar trebui să vedeți conținutul între ele, adică. John Smith Dezvoltator interfețe.

Această formulare se potrivește cu ceea ce vedeți pe ecran, astfel încât să știți că ați găsit partea potrivită a codului.

Editați eticheta în HTML

Acum este momentul să vă deschideți fișierul HTML pentru editare. Deschideți fișierul "index.html" în Text Sublim și ar trebui să vedeți ceva de genul:

Vrei să găsești codul care corespunde cu ceea ce ai văzut în inspectorul Chrome. Derulați până când îl găsiți pe liniile 61 - 64.

Acum puteți să modificați conținutul între etichete pentru a schimba numele și profesia proprie. Mai întâi, editați "John Smith" la numele dvs.:

Apoi, între tag-uri, schimbați "Front End Developer" la propria dvs. profesie.

Salvați fișierul, apoi actualizați șablonul în Chrome. Ar trebui să vedeți că modificările dvs. apar astfel:

Repetați pentru a edita alt conținut

Acum aveți procesul de bază jos:

1. Inspectați conținutul pe care doriți să îl modificați
2. Identificați etichetele corespunzătoare
3. Găsiți aceste etichete în fișierul HTML
4. Editați codul pentru a se potrivi

Să repetăm ​​procesul pentru a edita restul conținutului pe care dorim să-l personalizăm.

Adăugați propria imagine

Apoi vom adăuga imaginea proprie în partea stângă a numelui și a zonei profesiei. Faceți clic dreapta pe imagine și inspectați-o și notați eticheta corespunzătoare:

Puteți vedea în fereastra inspectorului că această linie este direct deasupra liniilor pe care tocmai le-am schimbat:

Accesați fișierul HTML și localizați eticheta pe linia 59:

Pentru această etichetă, va trebui să modificați valoarea src atributul pe care îl vedeți în interiorul img etichetă. Faceți asta prin modificarea a ceea ce se înscrie între ghilimele sale. Veți schimba numele fișierului și locația propriei imagini.

Luați o imagine a dvs. care are o dimensiune de 150px și 150px (ignorați faptul că numele fișierului spune 140x140.png, dimensiunea este de fapt 150x150).

Puneți imaginea în subfolderul "_content"; este în același folder ca și fișierul dvs. "index.html".

Acum, în fișierul HTML, modificați valoarea src atribut, înlocuind "140x140.png" cu fișierul pe care tocmai l-ați adăugat la subfolderul "_content". Verificați dacă extensia de fișiere pe care o introduceți este aceeași cu cea din fișier, de ex. "Png" / "jpg":

Salvați fișierul dvs., reîmprospătați Chrome și ar trebui să vedeți noua fotografie care apare:

Editați legăturile media sociale

Acum, să editați linkurile pe pictogramele de social media din colțul din dreapta sus al șablonului. La fel ca înainte, dați clic dreapta pe una dintre pictograme și inspectați-o. În fereastră, priviți linia deasupra celei evidențiate și veți vedea că include textul "facebook-icon". Vom folosi aceasta pentru a găsi codul în fișierul nostru HTML.

Înapoi în Text Sublim, apăsați CTRL + F și executați o căutare pentru "facebook-icon". Ar trebui să o găsiți pe linia 75.

A eticheta pe linia 75 este ceea ce creează link-ul de pe pictogramă și href atributul pe care îl vedeți în interiorul acestuia determină locul în care va avea loc această legătură. Va trebui să schimbați valoarea acesteia href atribuiți URL-ului dvs. Facebook (de exemplu: https://www.facebook.com/mylink).

Inlocuieste # aceasta este în mod prestabilit cu adresa dvs. URL. Apoi faceți același lucru pentru Twitter pe linia 79, Google+ pe linia 83 și LinkedIn pe linia 87.

Dacă există o pictogramă pe care doriți să o eliminați complet, evidențiați legătura acesteia începând cu deschiderea etichetarea și finisarea la închidere apoi ștergeți codul respectiv.

Acum, salvați și actualizați site-ul dvs., apoi când faceți clic pe legăturile pe care ar trebui să le acceseze în locația corectă.

Editați informațiile de contact

Înainte de a schimba informațiile de contact chiar sub pictogramele sociale.

Începeți prin inspectarea cuvântului "E-mail", pentru a afla unde începe această secțiune de informații de contact în cod. Luați notă de linia de cod pe care ați evidențiat-o și de linia de mai jos, astfel încât să o puteți potrivi în fișierul dvs. HTML.

În Sublime Text, apăsați CTRL + F din nou și de data aceasta căutați "Email". Trebuie să localizați instanța cuvântului "E-mail" care este înconjurat de codul de potrivire cu ceea ce ați văzut în fereastra inspectorului.

Veți găsi pe linia 94. Evidențiați adresa de e-mail prestabilită "[email protected]" în cele două locații de pe acea linie:

Apoi, înlocuiți-l cu propria adresă de e-mail. Pe următoarea linie puteți înlocui numărul de telefon cu al tău, iar pe linia de dedesubt puteți înlocui adresa web cu propria dvs.:

Editați secțiunile CV

Acum, hai să mergem mai departe și să începem editarea secțiunilor principale CV ale șablonului. Există câteva părți la aceste secțiuni, așa că vom începe prin inspectarea fiecăruia, astfel încât să știți ce să căutați în codul dvs. Aceasta va fi, de asemenea, o șansă pentru dvs. să învățați mai multe despre trecerea prin fereastra inspectorului pentru a găsi diferite părți ale site-ului dvs..

Derulați în jos până la secțiunea "Profil profesional", faceți clic dreapta pe paragraful textului și inspectați-o.

În inspector veți vedea că a subliniat a p tag - această etichetă este responsabilă pentru crearea de paragrafe în textul dvs..

În continuare, vrem să știm ce arată o secțiune completă a textului dintr-o secțiune de CV în cod, nu numai în paragrafe individuale. În fereastra inspectorului, faceți clic pe linia de cod de deasupra paragrafului pe care tocmai l-ați inspectat și ar trebui să vedeți că tot textul se aprinde:

Aceasta vă spune că fiecare secțiune de cod este înfășurată în etichete

. A div este scurt pentru o diviziune, iar aceste etichete sunt folosite pentru a controla aspectul și stilul.

Inspectați acum titlul secțiunii CV, "Profilul profesional":

La început, tot ce veți vedea este un alt set de div Etichete. Acest lucru se datorează faptului că poziția reală este imbricată între aceste etichete.

Apăsați acel mic triunghi la capătul liniei pentru al extinde și a vedea conținutul său, apoi faceți același lucru din nou pe linia următoare până când vedeți textul "Profil profesional" pe care îl căutați. Veți găsi că este înfășurat

...

tag-uri, care creează o rubrică de nivel 2:

Acum știm cum arată codul pentru fiecare parte a acestei secțiuni de CV, putem reveni la Sublime Text și începem editarea acestuia.

Poziționați cursorul în partea de sus a documentului HTML pentru a putea începe căutarea din partea de sus. presa CTRL + F și căutați "cv-item". Continuați să căutați până când găsiți instanța codului