Unde să cauți codul html al șablonului. Cum să deschideți rapid un cod de pagină într-un browser, chiar dacă copierea este interzisă

De-a lungul timpului, webmasterii începători au o întrebare logică: cum să schimbați culoarea și stilul de scriere a titlurilor, să adăugați volum și să măriți fontul acelorași titluri. Acest lucru îi încurcă pe mulți începători, deoarece nu este clar ce și unde să caute.

Desigur, vă puteți angaja într-un studiu profund al tuturor acestor complexități ale construirii site-ului web, dar deși nu există perspective la orizont ca atare, apare o altă întrebare logică: aveți nevoie de ea?

Îți va lua o cantitate decentă de timp pentru a stăpâni elementele de bază ale webmasteringului. Iar timpul este bani. Prin urmare, dacă aveți nevoie de ajustări minore la unele elemente șablon și nu știți cum să găsiți codul necesar HTML, indiferent de platforma site-ului, acest articol este doar pentru tine.

HTML și CSS - relație

De fapt, subiectul ar trebui să se numească ceva de genul: „Cum se editează codul CSS”. Ei bine, vom începe cu HTML și vom termina cu CSS. Chestia este că, dacă trebuie să schimbați culoarea, fontul site-ului, firimituri de pâine duce la fișiere CSS.

Să definim mai întâi aceste două concepte:

- Cod HTML este baza pe care este creat site-ul. Datorită acesteia, browserul înțelege ce elemente și în ce ordine să fie afișate pe o anumită pagină.

- Cod CSS este un limbaj de programare responsabil pentru aspect pagini web. Acest cod ar trebui să fie editabil dacă trebuie să schimbați aspectul site-ului.

Devine evident că, dacă trebuie să schimbați, de exemplu, culoarea titlului dintr-un articol sau din elementele de meniu, atunci unul dintre fișierele CSS trebuie editat. Este exact ceea ce trebuie înțeles stadiul inițial făcând singuri schimbări.

Unde este codul html al paginii?

Nu voi ascunde faptul că, la începutul cunoștinței mele cu principiile construirii site-ului web, nu eram doar un ceainic, eram un adevărat samovar ruginit. Prin urmare, tu, ca și mine, vei reuși cu siguranță.

Și astfel revenind la subiectul schimbării codului paginii, trebuie mai întâi să vă uitați cod html. Vă spun cu un exemplu browser Opera, deoarece lucrez în principal acolo. Mă grăbesc să vă informez că, dacă preferați să utilizați un alt browser, nu ar trebui să închideți imediat această pagină, deoarece principiul verificării indiferent de browser este aproape identic.

Cum se schimbă stilul antetului

Într-unul dintre articolele anterioare am vorbit despre „Cum să eliminați un link din antetul Joomla”, iar astăzi veți învăța cum să corectați totul și să îl faceți mai atractiv.
Să presupunem că trebuie să schimbăm culoarea și dimensiunea titlului articolului. Pentru a face acest lucru, faceți clic stânga pe el și selectați „Vedeți codul elementului” în fereastra care se deschide. După care, în partea stângă a ecranului, vor apărea în atenția noastră hieroglife fantastice, cu ajutorul cărora vom stabili unde este îngropat câinele. În acest fel poți să arăți și să corectezi practic fiecare element al șablonului.

În partea de sus, am evidențiat codul HTML responsabil pentru afișarea antetului h1. În mod implicit, este evidențiat la verificare fundal gri. Ei bine, pentru asta e Informații generale. Trebuie să acordăm atenție la partea de jos a capturii de ecran, unde se află scripturile responsabile pentru ieșirea stilurilor CSS. Aș dori să vă avertizez imediat că în funcție de șablon, de nume fișier CSS poate varia, dar de obicei este style.css sau template.css.

Și așa ne-am hotărât asupra dosarului, dar cum aflăm unde este? Este foarte simplu, trebuie doar să mutați cursorul mouse-ului peste locație cu partea dreapta cuvântul style.css, după care calea către fișier va fi afișată lângă el. În același timp, aici va fi indicată și linia pe care trebuie să o corectăm. După cum puteți vedea în imagine, aceasta este prima linie.

Punct important!Înainte de a face modificări, faceți copie de rezervă site, ca să spunem așa, pentru fiecare pompier

Unele proprietăți CSS

Mai jos voi da câteva proprietăți cu care puteți adăuga anumite modificariși experimentează cu stiluri.

Dimensiunea fontului – modificați dimensiunea textului.

Decorarea textului – în funcție de comandă, aceasta include ștergerea și sublinierea textului, precum și evidențierea cu linii.

Font-family – familie de fonturi.

Greutatea fontului – selecție.

Culoare – culoarea textului.

Dacă nimic nu s-a schimbat după ajustare, goliți memoria cache a browserului. După cum puteți vedea, pentru a schimba aspectul antetelor și a reîmprospăta designul site-ului, trebuie doar să modificați codul CSS și nu să schimbați codul html.

Vă mulțumim pentru atenție și ne vedem curând pe paginile Stimylrosta.

Găsit în text eroare gramaticală? Vă rugăm să raportați acest lucru administratorului: selectați textul și apăsați combinația de taste rapide Ctrl+Enter

Trebuie să vedeți rapid toate modificările de pe site-ul în sine, fără a afecta fișierele și codul site-ului postat pe Internet. De exemplu, schimbarea schema de culori orice bloc, mutarea unui element alunecat etc.

Pentru aceasta, mulți webmasteri folosesc local Servere Denwer sau OpenServer, rulând copie integrală site-ul pe computerul dvs. Această metodă este universală și potrivită pentru profesioniști; poate fi folosită pentru a testa funcționarea diferitelor scripturi și plugin-uri, pentru a experimenta modificarea designului și a edita toate fișierele site-ului, iar după testare, pentru a transfera modificările corespunzătoare direct pe site.

Pentru utilizatorii care sunt departe de arta webmaster, recomand folosirea unui browser în aceste scopuri. Deoarece folosesc Chrome, voi oferi instrucțiuni cu capturi de ecran pentru acest browser special. Prin analogie, puteți lucra cu Opera, Yandex Browser, Mozilla Firefoxși alte browsere, principiul instrumentelor lor este similar.

Instrucțiunea 1: cum să vizualizați întregul cod HTML al unui site într-un browser

Deschideți pagina web necesară a site-ului dvs. Faceți clic dreapta pe elementul dorit, va apărea un meniu derulant contextual al browserului cu comenzile disponibile:

Figura 1. Vizualizați tot codul HTML al unei pagini web în browser Chrome

Important: Comenzile din meniul derulant pot diferi, de exemplu, pentru elementele active (linkuri, imagini, videoclipuri) și cele inactive (text, fundal, div-uri):

Figura 2. Meniul derulant al browserului Chrome

Deci, dacă nu găsiți comanda de care aveți nevoie, faceți clic pe butonul corect mouse-ul în alt loc sau utilizați tastele rapide ale browserului.

Să revenim la Figura 1, arată comanda necesară pentru a vizualiza tot codul HTML al paginii web sursă, se numește " Vizualizați codul paginii". Faceți clic pe comandă și se va deschide inserție nouă Cu cod complet pagina web sursă, un mare plus pentru tot este că vizualizarea este disponibilă cu evidențierea sintaxelor:

Figura 3. Fragment de cod al acestui site

Acest instrument este foarte util pentru găsirea și editarea elementelor pe care le căutați.

Modalități alternative de vizualizare a întregului cod HTML al unei pagini web

Pentru mai mult acces rapid, puteți folosi alte moduri de a apela acest instrument

  1. În figura 1 vedem și că această comandă disponibil prin comanda rapidă de la tastatură + ;
  2. Lipiți în bara de adresa browser view-source: site în loc de domeniul meu, introduceți adresa dvs.;

Ambele metode sunt universale și ar trebui să funcționeze în toate browserele.

La început, unora li se va părea că acest lucru nu este deloc instrumentul potrivit, dar vizualizarea întregului cod HTML al unui site este excelentă pentru a găsi elementele necesare în cod, acestea pot fi linkuri, etichete, metaetichete, atribute și alte elemente.

Combinație de taste rapide +deschide fereastra de căutare, în browserul Chrome apare în dreapta sus:

Figura 3. Căutare după codul site-ului

După ce introduceți o cerere în formularul de căutare, ecranul se va muta la primul element găsit, folosind săgețile vă puteți deplasa între ele și selectați pe cel de care aveți nevoie:

Figura 4. Căutare după codul site-ului HTML

Instrucțiunea 2: cum să vizualizați și să editați codul HTML și CSS al unui site în browserul Google Chrome

Acum partea cea mai importantă, în care voi arăta cum puteți edita codul HTML și CSS al unui site web într-un browser. apoi transferați modificările în browser.


Ca aceasta unealtă folositoareîntotdeauna disponibil în browser, experimentați cu alte comenzi care vor face editarea site-ului dvs. mai ușoară.

Am eliberat carte noua„Marketingul de conținut în în rețelele sociale: Cum să intri în capul abonaților tăi și să-i faci să se îndrăgostească de marca ta.”

Abonati-va

Sursă site-ul web este o colecție de markup HTML, stiluri CSS și Scripturi JavaScript, pe care browserul îl primește de la serverul web.

Mai multe videoclipuri pe canalul nostru - învață marketingul pe internet cu SEMANTICA

Poate fi comparat cu un set de comenzi date soldaților de către un comandant. Imaginați-vă că publicul nu îl vede și nu îl aude pe șeful. Din punctul lor de vedere, militarii desfășoară acțiuni în mod independent. În cazul nostru, comandantul este browserul, comenzile sunt codul sursă, iar soldații în marș sunt rezultatul final.

Site-ul este stocat pe un server web, care trimite pagina la cererea utilizatorului. O solicitare înseamnă introducerea unei adrese URL în bara de adrese, clic pe un link sau clic pe un buton de trimitere dintr-un formular. Nu contează în ce limbă sunt scrise paginile web, dacă acestea includ parte software. Rezultatul final al oricărui algoritm de pe partea serverului este un set de etichete HTML și text.
Codul sursă al paginii este un set de date care include:

  • marcaj html;
  • foaie de stil sau link la fișier;
  • programe scrise în JavaScript sau link-uri către fișiere cu cod.

Aceste trei secțiuni sunt procesate de browser. Pentru server, acesta este pur și simplu textul care trebuie trimis ca răspuns la cerere.

De ce ar putea fi nevoie să studiem codul sursă

Tot ceea ce vedem, putem analiza și aplica pentru a rezolva anumite probleme care apar în timpul lucrului cu site-ul, mai ales la optimizarea acestuia. Privind codul sursă, putem:

  • Vedeți metaetichetele site-ului dvs. sau al altcuiva pentru a le analiza.
  • Vezi prezența sau absența anumitor elemente pe site: contoare, coduri de identificare în diverse sisteme, anumite scripturi și alte lucruri.
  • Aflați parametrii elementelor: dimensiuni, culori, fonturi.
  • Găsiți calea către fotografii și alte elemente aflate pe pagină.
  • Explorați linkurile din pagină.
  • Găsiți probleme cu codul care interferează cu procesul de optimizare a site-ului web: cele care nu sunt abordate în fişiere separate stiluri, scripturi, cod nevalid.

Acestea sunt caracteristicile de bază, dar, de fapt, putând citi codul, puteți afla multe mai multe despre pagină.

Cum să vizualizați codul sursă al unui site

Nu va fi posibil să faceți acest lucru complet în forma în care este postat pe server din browser. Dar puteți vedea toate marcajele făcând clic dreapta pe pagină. Aici și mai jos folosind un exemplu Google Chrome.

Selectați opțiunea „Vizualizare codul paginii” și obțineți lista completă într-o filă separată.

Este doar un text pe care trebuie să îl analizezi pentru a-l înțelege. Dar puteți obține cod interactiv folosind instrumentele pentru dezvoltatori.

Cum să găsiți codul sursă al unei pagini de site web

Faceți clic pe pictograma meniului din browser. Cel mai adesea este în dreapta și arată ca trei puncte sau dungi.

În capitolul instrumente suplimentare selectați „Instrumente pentru dezvoltatori”.

Se va deschide o fereastră care arată starea activă a codului. Aceasta înseamnă că atunci când faceți clic pe marcaj, stilul elementului va apărea lângă acesta, iar blocurile selectate vor fi evidențiate pe pagină.

În fila „Sursă” puteți vizualiza conținutul unor fișiere: scripturi, fonturi, imagini.

În fila „Securitate”, puteți verifica certificatul site-ului.

Fila „Audituri” vă va ajuta să verificați resursa postată pe găzduire.

Dacă locația panoului din dreapta este incomodă, puteți face clic pe cele trei puncte și îl puteți modifica selectând elementul dorit.

Cum să vizualizați metaetichetele

Fiecare document HTML include etichete de structură. Aici sunt câțiva dintre ei:

  1. HTML – întregul document.
  2. Head – secțiunea antetelor de serviciu.
  3. Titlu – titlul paginii (afisat pe fila).
  4. Corp – corpul documentului.
  5. H1-H6 – titlurile textului paginii.
  6. Articol – articol.
  7. Sectiune - sectiune.
  8. Meniu – meniu.
  9. Div – bloc.
  10. Span – sfoară.
  11. P – paragraful.
  12. Masa – masa.

Elementele sunt concepute pentru a delimita logic secțiunile dintr-o pagină; dacă este necesar, sunt proiectate folosind stiluri. Acestea conțin text care este cumva vizibil pe pagină. Dar eticheta Head conține informații de serviciu. Meta-etichetele sunt folosite pentru a o indica. Tot ceea ce este scris în ele este destinat serverului și motoarelor de căutare.

Conținutul lor nu poate fi aflat în niciun alt mod.

Să fim atenți Etichetă de link. Cu ajutorul acestuia, sunt specificate link-uri către fișiere externe incluse. Dacă doriți, puteți vedea conținutul și puteți salva pe disc. Pentru a face acest lucru, mutați indicatorul la adresă și apăsați RMB. Selectați „Deschideți într-o filă nouă”.

Se va deschide într-o filă nouă fișierul specificat, pe care îl puteți vizualiza sau salva.

Cum să vizualizați codul sursă al unei pagini pentru a depana un script

În acest caz, cel mai convenabil este să deschideți pagina pe mașina locală. Dacă trebuie doar să corectați marcajul, stilurile și scripturile, atunci acest lucru se poate face direct din folder. Codul HTML este vizualizat în același mod. Iată care sunt greșelile Cod JavaScript poate fi văzut în fila „Consolă”. Aceasta arată descrierea erorii și numărul rândului în care a apărut.

Sintaxa poate fi văzută direct în cod. Pentru asta este fila „Sursă”.

Cum să vizualizați codul unui anumit element

Pentru pagini mari Cu o cantitate mare elemente, este dificil să găsiți codul necesar în toate markupurile. În acest caz, ar trebui să utilizați echipa speciala meniul contextual. Deplasați mouse-ul peste fragment și apăsați RMB. Selectați comanda „Vizualizare cod”.

Se va deschide aceeași fereastră, dar cu accent pe obiectul selectat.

rezumat

V-am spus care este codul sursă al paginii. Este suficient să stăpânești cunoștințele de bază despre HTML și CSS și să folosești instrumente convenabile dezvoltator, vă puteți depana propriile documente HTML.

Vizualizarea codului de resurse pe Internet vă va permite să învățați nu numai de la propria experiență, dar folosiți și exemple reale de lucru. Iar pentru specialiștii SEO vor fi utile meta tag-urile, informațiile în care pot spune multe despre site.

1 vot

O zi bună, dragi cititori ai blogului meu. Uneori găsiți o caracteristică frumoasă pe un site web și începeți să vă întrebați cum a obținut creatorul un efect atât de interesant.

Se pare că răspunsul este destul de simplu. Și dacă aveți niște abilități, puteți colecta o mulțime de astfel de jetoane pentru un timp scurt creează-ți propriul site unic.

Astăzi vom vorbi despre cum să deschideți codul unei pagini, un anumit element și să învățăm cum să folosiți această abilitate în beneficiul dumneavoastră.

Cunoștințe de bază de cod

Site-ul meu este destinat începătorilor și mai întâi aș dori să vorbesc pe scurt despre site-uri și cod în general.

Pentru a desena o imagine, apoi tăiați-o în părți mici, scrieți codul, astfel încât browserul să reasambla toate elementele într-un singur întreg. Totul pare foarte complicat? Deloc și nu are rost să te întristezi din cauza asta.

Acesta este modul în care sunt create site-uri web de înaltă calitate. Dacă vrei, implică-te în această chestiune și studiază-o; dacă nu vrei, nimeni nu te poate forța.

Voi spune un singur lucru... nimic nu este mai plăcut decât să vezi cum cuvintele de neînțeles pe care le-ai scris se transformă într-un singur întreg și prind viață: linkurile funcționează, butoanele se mișcă, imaginile se mișcă, textul se târăște. Cred că știu cum s-a simțit Victor Frankenstein.

Când începi să înțelegi limbajul secret și vezi că totul este de fapt mult mai simplu decât părea inițial, nu poți să nu crezi în propria putereși capacitățile creierului. Este foarte misto.

Cum sunt realizate site-urile web? În mod ideal, în primul rând. El doar pictează un tablou. De exemplu, așa cum se arată în imaginea de mai jos. Deocamdată este doar o imagine, o fotografie. Niciun link nu funcționează, când dați clic nu mergeți nicăieri, nu se efectuează nicio căutare.

Conform acestui desen. Uită-te la captura de ecran de mai jos. Puteți crede că acesta este un set ridicol și foarte complex de simboluri. De fapt, totul nu este atât de complicat, există un anumit algoritm.

Există doar aproximativ 150 de etichete și fiecare dintre ele este responsabilă pentru o anumită acțiune: link, silabe, bold, culoare, titlu și așa mai departe. Înțelegerea lor nu este atât de dificilă dacă aveți dorință și nu vă deranjează timpul.

Datorită cunoașterii acestor atribute, puteți rezolva aproape orice problemă. Dar fiecare dezvoltator își găsește propriile modalități de a atinge obiectivul.

Creatorii cu experiență văd imediat cum să obțină rezultate, în timp ce alții trebuie să gândească, să caute răspunsul în articole sau în codul sursă al concurenților. Pur și simplu iau partea necesară de pe un site terță parte și o editează singuri. Acest lucru scurtează semnificativ procesul de lucru.

Puțin mai târziu, vă voi arăta un exemplu concret.

Vizualizați codul

Deci, permiteți-mi mai întâi să vă arăt cum să acționați dacă trebuie să aflați codul html al altcuiva. Apoi ne vom uita la toate celelalte întrebări mai detaliat.

Cel mai bun mod

Metoda pe care o voi descrie mai întâi este puțin complicată pentru începători, dar ca introducere, citiți-o. Deschideți pagina și faceți clic pe butonul din dreapta al mouse-ului. Selectați „Salvați ca...”

Salvați întreaga pagină web. După cum puteți vedea în captură de ecran, am descărcat deja totul în avans. Aici avem două foldere.

Tot ce ai nevoie este aici. Fiecare element. Dacă înțelegeți acest lucru, puteți obține rapid tot ce aveți nevoie. Dar o astfel de sarcină devine din ce în ce mai imposibilă. Nu există nicio descărcare. Ce să faci dacă este interzisă copierea unei pagini?

Acesta este Google Chrome

După cum probabil ați observat deja, eu folosesc cel mai adesea Google Chrome și să învăț codul altcuiva în acest browser este la fel de ușor ca decojirea perelor. Ca în principiu cu oricare altul. Schema nu numai că va fi similară, ci și identică. Deschideți pagina al cărei cod vrem să-l cunoaștem și faceți clic dreapta oriunde. În fereastra care apare, faceți clic pe „Vizualizare codul paginii”.

O foaie de cod se va deschide într-o fereastră nouă, ceea ce este destul de greu de înțeles pentru un începător. Dar nu vă alarmați dinainte.

Dacă trebuie să cunoașteți codul unui singur element, treceți cu mouse-ul peste el și faceți clic dreapta. Selectați o altă funcție Chrome: „Vedeți codul elementului”.

De exemplu, m-ar putea interesa modul în care a fost realizat logo-ul, folosind o imagine sau un limbaj de programare? La urma urmei, puteți desena un pătrat cu ajutor css. Mulți experți vă sfătuiesc cum mai multe informatii scrie in cod. Cum funcționează pe site-uri populare?

Așa a apărut informatie necesara. html în partea de sus, css în jos. Acestea sunt două limbi. Primul este responsabil pentru componenta text, iar al doilea pentru design. Dacă nu ar exista CSS, atunci ar trebui să specificați culoarea și dimensiunea fontului de fiecare dată. Pentru fiecare pagină, aceasta este foarte lungă. Dar dacă nu ar exista html, atunci nu am avea texte. Am explicat-o aproximativ, dar, în general, așa este.

Apropo, dacă sunteți interesat de modul în care funcționează aici, vă puteți uita la linkul către imaginea de mai jos. Iată răspunsul tău.

Mozilla Firefox

Dacă vă place să lucrați în mastic, atunci totul va fi exact la fel. Deschideți pagina și faceți clic pe butonul din dreapta al mouse-ului. „Codul sursă paginii” dacă doriți să vedeți întregul cod.

Când treceți cu mouse-ul peste un element, puteți deschide codul acestuia.

Aici datele sunt afișate în partea de jos a ecranului, dar în rest totul este exact la fel.

browser Yandex

În browserul Yandex, totul este exact la fel ca în cele două opțiuni anterioare, deschideți pagina, tasta dreapta mouse, uită-te la codul paginii.

Plasăm cursorul peste un element dacă vrem să aflăm exact codul acestuia.

Totul este afișat aici exact la fel ca în Chrome.

Operă

Și în sfârșit, Opera.

Apropo, poate ai observat că nu trebuie să folosești un mouse. Există o comandă rapidă de la tastatură pentru a deschide codul și este aceeași pentru toate browserele: CTRL+U.

Pentru elemente: Ctrl+Shift+C.

Așa arată rezultatul.

Acest lucru va fi interesant pentru începători

Acum uite cum funcționează totul. Găsiți un site și vă place foarte mult un element. De exemplu, acesta. Știți deja cum să deschideți codul elementului.

Acum copiați-l.

Îl folosesc, lipim acest cod într-unul nou fișier html, în eticheta body (body în engleză).

Acum să vedem cum va arăta totul în browser.

Gata. Pentru ca textul să fie aliniat la margini și să dobândească o culoare verzuie, trebuie să vă conectați la aceasta document cssși copiați un alt cod de pe site-ul de pe care l-am furat pe acesta.

Nu voi face asta acum. Acest lucru necesită mai mult timp: atât al meu, cât și al tău. Cred că voi descrie toate detaliile în viitoarele mele publicații. Abonează-te la newsletter și fii primul care află când apare un articol.

Dacă nu suportați, dar doriți să aflați mai multe despre html și css acum, atunci vă pot recomanda în mod tradițional cursuri de formare gratuite.

Iată 33 de lecții care vă vor permite să stăpâniți html - « Curs gratuit prin HTML" .

Si aici informatii complete despre css - „Curs gratuit despre CSS (45 de lecții video!)” .

Acum știi puțin mai mult. Îți doresc succes în demersurile tale. Ne mai vedem!

Dimensiunea, culoarea unora elemente importante blog - cum ar fi titlul blogului sau postării, eticheta mai mult și altele asemenea. Am căutat manual codul necesar, experimentând domeniul de testare, pe baza căruia a fost scris ulterior articolul.

Și recent a trebuit să schimb culoarea link-urilor. După ce am cercetat o grămadă de literatură despre această problemă, mi-am dat seama lucru simplu: toata lumea da exemple din propriile șabloane, dar toți avem șabloane diferite și este bine dacă codul din exemplu este cel puțin puțin asemănător: dacă nu te plângi, îl voi găsi în continuare căutând - la întâmplare.

Numărul nu a funcționat cu codul de legătură. Toată lumea a indicat căi complet diferite. M-am întrebat dacă există un instrument simplu și precis, cum să găsiți codul html necesar pe orice site web. Mulți bloggeri, chiar și cu experiență, au dificultăți în modificări minore ale șablonului. Nu este nimic în neregulă cu asta, pentru că fiecare are propriile interese și obiective pentru crearea unui site web.

Dacă doriți să depuneți modificări minoreîntr-un șablon, de exemplu modifica orice titlu, titlul articolelor și secțiunilor, culoarea și dimensiunea fonturilor și a linkurilor, De obicei este suficient să înveți principiu simplu, despre care se discută în acest articol. Dar există și cazuri complexe, necesitând fie un studiu mai profund al html și css, fie ajutorul unui specialist.

Într-o zi, un cunoscut m-a rugat să aflu unde să schimb culoarea panoului de categorii din șablonul său. A încărcat un subiect într-un subdomeniu de testare. Setările pentru acest element nu au fost stocate în style.css, ci într-un alt fișier, așa că o persoană nu l-a putut găsi.

Cum să găsiți și să schimbați codul html și css al unui site

Dacă nu vă plac articolele lungi, acesta este pentru dvs la finalul articolului un tutorial video care spune cum puteți vedea codul html al site-ului web folosind Notepad++ și puteți modifica designul oricărui șablon folosind un exemplu despre cum să schimbați culoarea fontului. În videoclip există și alte subtilități ale manipulării unui blog. Și pentru cei care sunt mai aproape și text mai clar, în partea de jos analiză detaliată teme cu capturi de ecran.
httpv://youtu.be/uIlVvwCt2ho

Termeni și concepte

Ar fi mai corect să intitulezi articolul „ Cum să găsești cod css „, dar am decis să merg cu numele „greșit”, pentru că, practic, răspunsul la această întrebare se găsește în html. CSS și HTML sunt lucruri foarte diferite, chiar dacă sunt două părți ale aceluiași sistem. Există multe articole tehnice pe Internet, aici ne va fi suficient să înțelegem că:

  • HTML— este responsabil pentru structura site-ului (ce urmează ce, în ce ordine etc.). Aceasta este baza pe care este creat site-ul. Dacă o comparăm cu o casă, atunci aceasta este amenajarea ei, amenajarea camerelor.
  • CSS— este responsabil pentru design (ce fonturi, dimensiuni, culori etc.). Acesta este stilul general al casei și stilul camerelor sale individuale: ce fel de tapet va fi, lămpi, perdele, mobilier. Prin urmare, documentul care precizează coduri css, numită „foaia de stil”

Și dacă vă întrebați cum să schimbați, de exemplu, culoarea titlului site-ului, dimensiunea fontului din texte sau culoarea titlurilor din bara laterală, atunci trebuie să căutați toate acestea în tabel. Stiluri CSS. Acesta este singurul lucru care merită înțeles mai întâi pentru a face singur modificări codului.

Îmi place să simplific complexul. Îmi amintesc cu mult timp în urmă, când am avut prima mașină, era foarte veche, cablajul era putrezit, siguranțele se ardeau adesea și de fiecare dată o remorcam la benzinărie. Imaginează-ți câți bani s-au irosit, având în vedere asta auto-înlocuire, după cum s-a dovedit, costă un ban.

Într-o zi m-am uitat la ce face exact maestrul. Inca nu stiu cum functioneaza siguranta. Dar știu unde să-l schimb). Nu aș repara singur motorul și nu este dificil să înlocuiți siguranța. La fel este și cu site-urile web.

Dacă nu vrei să devii programator, atunci nu este nevoie să ai o înțelegere profundă a programării. Este suficient de clar să înțelegeți ce este destinat pentru ce, unde să îl căutați și cum să îl schimbați. Este mai bine să schimbi singur ceea ce poți și să lași totul în seama specialiștilor. În articolul despre există link util despre această temă.

Trebuie să fii un expert în toate?

Există adesea discuții pe blogurile SEO despre dacă un începător trebuie să aibă o înțelegere profundă a HTML, sau chiar mai bine, să învețe cum să scrie singuri site-uri web, astfel încât totul să fie unic. Ei bine, nu știu - pentru fiecare a lui, și aici ce este mai aproape de cine este mai aproape. Sunt puțin mai interesat, așa că acum învăț mai multe de la Vladimir. În noiembrie a acestui an, Vladimir și-a deschis propriul blog. Blogul lui este făcut în cel mai simplu mod, șablon gratuit, l-a schimbat doar puțin, ca să se potrivească.

După 10 zile de existență, blogul a ocupat locul 104 în clasamentul tuturor site-urilor Runet cu un trafic de aproximativ 1,5 mii de persoane pe zi. In 10 zile. Deci care e treaba? Vladimir este bine versat în HTML, îl poate comanda și cumpăra pentru el însuși șablon unic. Deci trebuie să înțelegi asta Secretul nu constă în șabloane, ci în utilitatea informațiilor.

Unde este ascuns codul html?

Scuze pentru digresiune, să revenim la codurile noastre). Să presupunem că doriți să schimbați culoarea fontului titlului blogului dvs. Să ne uităm la exemplul site-ului meu de testare.

  1. Deschiderea site-ului în browser Google Crom (dacă nu îl utilizați încă, instalați-l - este bine conceput pentru a lucra cu site-uri web, are o mulțime de instrumente încorporate).
  2. Mutăm cursorul mouse-ului peste elementul pe care urmează să-l schimbăm . ÎN în acest caz,- la numele blogului. Facem clic dreapta pe el și în fereastra care apare, selectăm VIEW ELEMENT CODE.

IMPORTANT: nu confundați acest lucru cu VIZIUNEA CODUL PAGINII! Nu avem nevoie de întreaga pagină acum, doar de un element separat.

Faceți clic pe el - apare o fereastră de vizualizare a codului în partea de jos a browserului:

Linia de cod pe care o modificăm este evidențiată cu roșu.

Însă zona evidențiată cu albastru conține ceea ce căutăm. Aici puteți găsi linia exactă (nu aproximativă) de cod responsabilă pentru fonturi, culoare, dimensiune, evidențiere etc. În acest fel puteți afla ORICE cod al oricărui element al oricărui șablon.

Găsiți linia dorită în blocul evidențiat cu albastru. Există un glisor în partea dreaptă, puteți derula și găsi linia de care aveți nevoie.

Principiul general al unde să căutați lucrurile:

Nume font - în linia FONT FAMILY

Dimensiunea fontului - în linia FONT SIZE

Culoare font - în linia COLOR

Iată trei linii principale în care numele, dimensiunea și culoarea fontului oricărui element se modifică. În dreapta în linia de stil css este dată poziția liniei în document. Dacă trebuie să schimbați un alt element (de exemplu, trebuie să aflați unde este linia unde puteți schimba culoarea barei de meniu sau culoarea linkurilor), totul se face exact la fel.

ATENŢIE:

Linia pe care o vom copia este evidențiată cu roșu în figură,

astfel încât să îl găsiți ulterior în foaia de stil.

4. Copiați linia. Deoarece în acest exemplu dorim să schimbăm culoarea numelui site-ului, copiez linia evidențiată în dreptunghiul roșu din a doua poză. În șablonul meu, este responsabil pentru schimbarea culorii titlului site-ului:

#header h1 a, #header h1 a:vizitat (

Găsiți linia necesară în fișierul „foaia de stil (style.css)”. Acest lucru este deja făcut în panoul de administrare. Cer cu tărie ca, deși nu există încredere și înțelegere completă, toate experimentele să fie efectuate pe un subdomeniu de testare pentru a exclude .

Deci, accesați panoul de administrare: CONSOLĂ - APARIȚIE - EDITOR. În bara laterală din dreapta găsim fișierul STYLE TABLE (STYLE.CSS), deschideți-l.

Acum deschide bara de căutare tastele CTRL+F: în fereastra de sus Va apărea o fereastră de linie goală. Lipim în el linia pe care am copiat-o la pasul 4.

Și veți vedea cum va fi evidențiată această linie în foaia de stil (în portocaliu în imagine):

Facem o modificare a elementului. În cazul nostru, schimbăm culoarea fontului, așa că în linia COLOR înlocuim o altă valoare - culoarea pe care o dorim. În exemplu, culoarea este neagră, semnificația sa este:

Puteți alege o culoare în orice serviciu de paletă de culori web: introduceți „Paletă de culori web” într-un motor de căutare și selectați-o pe cea dorită. Selectăm o culoare, îi copiem valoarea digitală și o înlocuim cu grijă cu cea veche. după care facem clic pe UPDATE FILE și mergem să vedem ce s-a întâmplat.

Dacă modificările nu sunt afișate, pentru ultima oră și mergeți din nou la pagină - de data aceasta ar trebui să fie afișat totul.

Este nevoie de mult timp pentru a descrie, dar în practică totul se face rapid, mai ales când apare îndemânarea inițială.

Mai detaliat, cum să schimbați anumite elemente:

Asta e tot pentru azi, nu te mai deranjez cu coduri. Sper că acum tu însuți poți găsi și schimba cu ușurință orice element al codului html, sau mai bine zis, codul css - experții să mă ierte că l-am simplificat. Și dacă nu vă dați seama, vizitați totuși pagina. Nu-ți pierde timpul cu prostii.

Vă sugerez să vizionați videoclipul lui Artem Abramovici despre cum să căutați și să găsiți orice cuvânt sau element în orice temă/șablon, pentru orice motor (wordpress, joomla etc.) și înlocuiți-l cu ceea ce aveți nevoie:

Vă rugăm să distribuiți dacă v-a plăcut:

Ați putea fi, de asemenea, interesat să știți:


  • Serghei Savenkov

    un fel de recenzie „scurtă”... de parcă s-ar grăbi undeva