Įgūdis pakeisti puslapio šaltinio kodą– naudingas įgūdis pažengusiam interneto vartotojui. Pakeitę HTML kodą, atidarytą tinklalapį galite pakeisti taip, kaip norite. Šiame straipsnyje mes jums pasakysime kaip pakeisti puslapio kodą V Google Chrome. Tačiau kitose naršyklėse viskas daroma panašiai, todėl sunkumų neturėtų kilti.

Kas yra puslapio HTML kodas?

Kiekvienas puslapis, kurį atidarote naršyklėje, turi savo kodą HTML žymėjimo kalba. Šis kodas žymi žymas ir tekstą. Žymos yra unikalios etiketės, nurodančios naršyklei, kaip rodyti tą ar kitą svetainės dalį. Tekstas yra puslapio turinys, ką mato vartotojas. Taip pat CSS stilius galima prijungti prie puslapio, kurio rinkinio išvaizda puslapio elementai. Į pakeisti svetainės šaltinio kodą jums nereikia nuodugniai išmanyti HTML ir CSS, ir netrukus įsitikinsite patys.

Kam keisti tinklalapį?

Galite pakeisti duomenis svetainėje, pakeisti pranešimo tekstą arba padaryti netikrą ekrano kopiją. Atminkite, kad visi pakeitimai matomi tik jums ir išnyks, kai iš naujo įkelsite puslapį. Taip pat pakeisti duomenys nebus tikri. Pavyzdžiui, jei neturiu 10 dolerių, o pakeisiu į 100, tada aš neturėsiu daugiau pinigų. Tai tik puslapio rodymas naršyklėje. Pavyzdys:

Po:

Pavyzdžiui, paimsiu tą pačią svetainę ir pakeisiu ankstesnį straipsnio „“ Atidarymas“ skelbimą pagrindinis puslapis„Google Chrome“. Dešiniuoju pelės mygtuku spusteliu elementą, kurį noriu pakeisti, pavyzdžiui, skelbimo pavadinimą ir pasirenku „Žiūrėti kodą“.

Atsidariusiame lange eikite į skirtuką Elementai ir peržiūrėkite puslapio HTML kodą. Jame turime rasti mus dominantį tekstą. (pabraukta raudonai)

Dabar ištrinsiu seną tekstą ir parašysiu naują.

Štai ir viskas, anonso pavadinimas pakeistas. Dabar pakeisiu patį skelbimą, žymas ir kategoriją.

Galite įterpti kitą vaizdą pakeisdami src atributą img žymoje.

Kai kurių svarbių tinklaraščio elementų dydis ir spalva – pavyzdžiui, tinklaraščio ar įrašo pavadinimas, daugiau žymos ir panašiai. Ieškojau reikiamo kodo rankiniu būdu, eksperimentuodamas su bandomuoju domenu, kurio pagrindu vėliau buvo parašytas straipsnis.

Ir neseniai man reikėjo pakeisti nuorodų spalvą. Persijojęs krūvą literatūros šiuo klausimu supratau paprastas dalykas: kiekvienas pateikia pavyzdžius iš savo šablonų, bet mes visi turime skirtingus šablonus ir gerai, jei kodas iš pavyzdžio yra bent šiek tiek panašus: be verkšlenimo vis tiek rasiu ieškodamas - atsitiktinai.

Numeris neveikė su nuorodos kodu. Visi nurodė visiškai skirtingus kelius. Pasidomėjau, ar yra paprastas ir tikslus įrankis, kaip rasti reikiamą html kodą bet kurioje svetainėje. Daugeliui tinklaraštininkų, net ir turinčių patirties, sunku atlikti nedidelius šablono pakeitimus. Čia nėra nieko blogo, nes kiekvienas turi savo interesų ir tikslų kurdamas svetainę.

Jei norite atlikti nedidelius šablono pakeitimus, pvz. pakeisti bet kokią antraštę, straipsnių ir skyrių pavadinimus, šriftų ir nuorodų spalvą ir dydį, Paprastai pakanka išmokti paprastą principą, aptartą šiame straipsnyje. Tačiau yra ir sudėtingų atvejų, kai reikia arba giliau išnagrinėti html ir css, arba pasitelkti specialisto pagalbą.

Vieną dieną vienas pažįstamas manęs paprašė surasti, kur jo šablone pakeisti kategorijos skydelio spalvą. Tema įkelta į bandomąjį padomenį. Šio elemento nustatymai buvo saugomi ne style.css, o kitame faile, todėl žmogus jo negalėjo rasti.

Kaip rasti ir pakeisti svetainės html ir css kodus

Jei nemėgstate ilgų straipsnių, tai kaip tik jums straipsnio pabaigoje vaizdo pamoka, kurioje pasakojama, kaip galite pamatyti svetainės html kodą naudodami Notepad++ ir pakeisti bet kurio šablono dizainą, naudodami pavyzdį, kaip pakeisti šrifto spalvą. Vaizdo įraše yra ir kitų tinklaraščio tvarkymo subtilybių. O tiems, kam tekstas arčiau ir aiškesnis – žemiau išsamią analizę temos su ekrano kopijomis.
httpv://youtu.be/uIlVvwCt2ho

Terminai ir sąvokos

Tiksliau būtų pavadinti straipsnį " Kaip rasti css kodas “, bet nusprendžiau pasirinkti „neteisingą“ pavadinimą, nes iš esmės atsakymas į šį klausimą yra html. CSS ir HTML yra labai skirtingi dalykai, nors jie yra dvi tos pačios sistemos dalys. Internete yra daug techninių straipsnių, čia užteks, kad suprastume, kad:

• HTML— atsako už svetainės struktūrą (kas po ko, kokia tvarka ir pan.). Tai yra pagrindas, kuriuo remiantis sukurta svetainė. Jei palyginsime su namu, tai yra jo išdėstymas, kambarių išdėstymas.
• CSS— atsako už dizainą (kokius šriftus, dydžius, spalvas ir pan.). Toks yra bendras namų stilius ir atskirų jo kambarių stilius: kokie bus tapetai, šviestuvai, užuolaidos, baldai. Todėl dokumentas, kuriame teigiama css kodai, vadinamas „stiliaus lapu“

O jei įdomu, kaip pakeisti, pavyzdžiui, svetainės pavadinimo spalvą, šrifto dydį tekstuose ar antraštes šoninėje juostoje, tuomet viso to reikia ieškoti CSS stiliaus lape. Tai yra vienintelis dalykas, kurį pirmiausia verta suprasti, kad galėtumėte patys atlikti kodo pakeitimus.

Man patinka, kad kompleksas būtų paprastas. Pamenu, seniai, kai turėjau pirmą automobilį, jis buvo labai senas, supuvę laidai, dažnai perdegdavo saugikliai, kiekvieną kartą tempdavau į servisą. Įsivaizduokite, kiek pinigų buvo iššvaistyta, atsižvelgiant į tai savęs pakeitimas, kaip paaiškėjo, kainuoja centą.

Vieną dieną pažiūrėjau, ką tiksliai veikia meistras. Aš vis dar nežinau, kaip veikia saugiklis. Bet aš žinau, kur tai pakeisti). Pats variklio netaisyčiau, o saugiklį pakeisti nesunku. Tas pats ir su svetainėmis.

Jei nenorite tapti programuotoju, nereikia giliai išmanyti programavimo. Pakankamai aišku, kad suprastum, kas kam skirta, kur to ieškoti ir kaip pakeisti. Geriau patys keiskite, ką galite, o visa kita palikite specialistams. Straipsnyje yra naudinga nuoroda šia tema.

Ar reikia būti visko žinovu?

SEO tinklaraščiuose dažnai diskutuojama apie tai, ar pradedančiajam reikia giliai išmanyti HTML, o dar geriau – išmokti pačiam rašyti svetaines, kad viskas būtų unikalu.. Na, nežinau – kiekvienam savo, o čia kas arčiau kam arčiau. Aš domiuosi šiek tiek daugiau, todėl dabar daugiau mokausi iš Vladimiro. Šių metų lapkritį Vladimiras atidarė savo tinklaraštį. Jo tinklaraštis buvo sukurtas pagal paprasčiausią, nemokamą šabloną, jis tik šiek tiek jį pakeitė, kad tiktų sau.

Po 10 gyvavimo dienų tinklaraštis užėmė 104 vietą visų „Runet“ svetainių reitinge, kurių srautas buvo apie 1,5 tūkst. žmonių per dieną. Per 10 dienų. Taigi koks susitarimas? Vladimiras puikiai išmano HTML ir gali užsisakyti bei nusipirkti unikalų šabloną. Taigi jūs turite tai suprasti Paslaptis slypi ne šablonuose, o informacijos naudingumoje.

Kur paslėptas html kodas?

Atsiprašome už nukrypimą, grįžkime prie savo kodų). Tarkime, kad norite pakeisti savo tinklaraščio pavadinimo šrifto spalvą. Pažiūrėkime į mano bandymų svetainės pavyzdį.

1. Svetainės atidarymas Google naršyklė Chrome (jei dar nenaudojate, įdiekite – jis puikiai pritaikytas darbui su svetainėmis, turi daug integruotų įrankių).
2. Perkeliame pelės žymeklį ant elemento, kurį ketiname keisti . Šiuo atveju – tinklaraščio pavadinimas. Dešiniuoju pelės mygtuku spustelėkite jį ir pasirodžiusiame lange pasirinkite VIEW ELEMENT CODE.

SVARBU: nepainiokite to su PUSLAPIO KODO PERŽIŪRIMU! Mums dabar nereikia viso puslapio, tik atskiro elemento.

Spustelėkite jį - naršyklės apačioje pasirodys kodo peržiūros langas:

Kodo eilutė, kurią keičiame, paryškinta raudonai.

Tačiau mėlynai paryškintoje srityje yra tai, ko ieškome. Čia galite rasti tikslią (ne apytikslę) kodo eilutę, atsakingą už šriftus, spalvą, dydį, paryškinimą ir kt. Tokiu būdu galite sužinoti BET KOKĮ bet kurio šablono elemento kodą.

Mėlyna spalva paryškintame bloke raskite norimą eilutę. Dešinėje yra slankiklis, kuriame galite slinkti ir rasti reikiamą eilutę.

Bendras principas, kur ieškoti dalykų:

Šrifto pavadinimas – eilutėje ŠRIFŲ ŠEIMA

Šrifto dydis – eilutėje ŠRIFTO DYDIS

Šrifto spalva – COLOR eilutėje

Čia yra trys pagrindinės eilutės, kuriose keičiasi bet kurio elemento pavadinimas, dydis ir šrifto spalva. Dešinėje stiliaus css eilutėje nurodyta eilutės padėtis dokumente. Jei reikia pakeisti kokį nors kitą elementą (pavyzdžiui, reikia išsiaiškinti, kur yra linija, kur galima pakeisti meniu juostos spalvą ar nuorodų spalvą), viskas daroma lygiai taip pat.

DĖMESIO:

Linija, kurią kopijuosime, paveiksle paryškinta raudonai,

kad vėliau galėtumėte jį rasti stiliaus lape.

4. Nukopijuokite eilutę. Kadangi šiame pavyzdyje norime pakeisti svetainės pavadinimo spalvą, nukopijuoju antrame paveikslėlyje raudoname stačiakampyje paryškintą eilutę. Mano šablone ji yra atsakinga už svetainės pavadinimo spalvos keitimą:

#header h1 a, #header h1 a:visited (

Raskite reikiamą eilutę faile „style sheet (style.css)“. Tai jau padaryta administratoriaus skydelyje. Labai prašau, kad nors nėra pasitikėjimo ir visiško supratimo, visi eksperimentai būtų atliekami bandomajame padomenyje, kad būtų pašalintas .

Taigi, eikite į administratoriaus skydelį: KONSOLE - IŠVAIZDA - REDAKTORIAUS. Dešinėje šoninėje juostoje randame failą STYLE TABLE (STILIUS.CSS), atidarykite jį.

Dabar atidarykite paieškos eilutę naudodami CTRL + F klavišus: viršutiniame lange atsiras tuščias eilutės langas. Į jį įklijuojame eilutę, kurią nukopijavome atlikdami 4 veiksmą.

Ir pamatysite, kaip ši eilutė bus paryškinta stiliaus lape (paveikslėlyje oranžine spalva):

Mes keičiame elementą. Mūsų atveju keičiame šrifto spalvą, todėl COLOR eilutėje pakeičiame kitą reikšmę – norima spalva. Pavyzdyje spalva yra juoda, jos reikšmė yra:

Spalvą galite pasirinkti bet kurioje žiniatinklio spalvų paletės paslaugoje: paieškos sistemoje įveskite „Web color palete“ ir pasirinkite norimą. Parenkame spalvą, nukopijuojame jos skaitmeninę vertę ir atsargiai pakeičiame senąja. po to spustelėjame ATNAUJINTI FAILĄ ir einame pažiūrėti, kas atsitiko.

Jei pakeitimai nerodomi, už paskutinę valandą ir vėl eikite į puslapį – šį kartą turėtų būti rodoma viskas.

Aprašymas užtrunka ilgai, bet praktiškai viskas daroma greitai, ypač kai atsiranda pirminis įgūdis.

Išsamiau, kaip pakeisti tam tikrus elementus:

Šiandienai tiek, nebevarginsiu jūsų su kodais. Tikiuosi, kad dabar jūs pats galite lengvai rasti ir pakeisti bet kurį html kodo elementą, tiksliau, css kodą - tegul ekspertai man atleidžia už jo supaprastinimą. Ir jei to nesuprantate, vis tiek apsilankykite puslapyje. Nešvaistykite laiko nesąmonėms.

Siūlau pažiūrėti Artemo Abramovičiaus vaizdo įrašą, kaip ieškoti ir rasti bet kurį žodį ar elementą bet kurioje temoje/šablone, bet kokiam varikliui (wordpress, joomla ir kt.) ir pakeisti jį tuo, ko jums reikia:

Pasidalinkite, jei patiko:

Jums taip pat gali būti įdomu sužinoti:

Instrukcijos

Lengviausias būdas atidaryti html yra kodas susiję su integruotų naršyklės galimybių naudojimu. Kiekvienas iš jų turi peržiūros parinktį kodas puslapių. Taip, naršyklėje Internet ExplorerŽiūrėti kodas turite jį atidaryti meniu: „View“ - „View html- kodas».

Tiems, kurie dirba su Opera naršyklė, Žiūrėti kodas turėtumėte atidaryti: „View“ - „Source Code“ arba paspauskite klavišų kombinaciją Ctrl + F3. Vartotojai Mozilla Firefox galite peržiūrėti html kodą dešiniuoju pelės mygtuku spustelėję puslapį ir kontekstiniame meniu pasirinkę „Puslapio šaltinio kodas“.

Naudotojai, dirbantys su „Google Chrome“, taip pat turėtų naudoti kontekstinį meniu, kuris iškviečiamas dešiniuoju pelės mygtuku spustelėjus peržiūrimą puslapį ir pasirinkti „Peržiūrėti“. kodas puslapiai“.

Išsaugoti atviro kodo Operoje spustelėkite atidarytas puslapis su html mygtuku "Išsaugoti" viršutinėje kairėje lango dalyje. „Mozilla Firefox“ pasirinkite „Failas“ - „Išsaugoti puslapį kaip...“. HTML kodas taip pat išsaugomas IE. „Google Chrome“ dešiniuoju pelės mygtuku spustelėkite atvirojo kodo kodą ir kontekstiniame meniu pasirinkite „Išsaugoti kaip“.

Jei reikia dirbti su išsaugotu kodu, naudokite specialios programos. Norint įvaldyti HTML kalbą, puikiai tinka redaktorius su sintaksės paryškinimu CuteHTML, juo labai paprasta ir lengva naudotis. Su jo pagalba galite sukurti gana sudėtingus puslapius.

Norėdami profesionaliai dirbti su HTML ir kurti sudėtingas svetaines, naudokite Dreamweaver. Tai vizualinis svetainių kūrimo įrankis, leidžiantis greitai sukurti net labai sudėtingus projektus. Dirbdami su šia programa galite naudoti paruoštus svetainių šablonus, kurie žymiai pagreitins ir supaprastins interneto šaltinio kūrimą.

Krūva nemokami šablonai, kurių pagrindu galima sukurti labai gražias svetaines, yra patalpintos internete. Tiesiog atsisiųskite jums patinkantį šabloną, atidarykite jį „Dreamweaver“ ir pakeiskite taip, kaip norite. Paruoštus šablonus galite atsisiųsti čia: http://www.internet-technologies.ru/templates/.

Interneto tinklalapyje gali būti nuoroda į Word dokumentas. Kai spustelėsite nuorodą, ji gali būti rodoma ir naršyklėje, ir teksto redaktorius. Koks yra geriausias būdas atidaryti tekstinį failą?

Žodžių redaktorius neturi savaiminiai nustatymai apie tai, ar dokumentas yra iš naršyklės. Visi nustatymai konfigūruojami tiesiogiai sistemoje „Windows“.

Atidarykite dialogo langą Failų tipai atlikdami vieną iš šių veiksmų:

Paspauskite ir palaikykite „Windows“ klavišą (jame yra OS logotipas ir jis yra klaviatūros apačioje, tarp Ctrl ir Alt klavišų).
- Darbalaukyje dukart spustelėkite piktogramą Mano kompiuteris.

Dabar pasirodžiusiame meniu pasirinkite Įrankiai > Aplanko parinktys ir eikite į skirtuką Failų tipai. Turėsite palaukti kelias minutes, kol „Windows“ rinks informaciją apie įvairių tipų failus.

Kai pasirodys sąrašas, sąraše turėtumėte rasti DOC plėtinį. Spustelėkite jį, kad jį paryškintumėte, tada spustelėkite mygtuką „Išplėstinė“. Dabar galite pamatyti dialogo langą Redaguoti failo tipo ypatybes. Redagavimas siūlo 2 „Word“ dokumentų rodymo naršyklėje parinktis.

Dokumento atidarymas teksto rengyklėje

Tai numatytasis nustatymas. Jei nuspręsite jį pasilikti, tereikia sukonfigūruoti kai kuriuos nustatymus. Jei norite pasirinkti, ar atidaryti ar išsaugoti dokumentą, turite pažymėti langelį šalia „Patvirtinti atidarymą po atsisiuntimo“. Atminkite, kad jei panaikinsite žymės langelio „Visada klausti atidarant šio tipo failą“ žymėjimą, negalėsite pažymėti aukščiau esančio laukelio.

Dokumento atidarymas „Internet Explorer“.

Dialogo lange Keisti failo tipo ypatybes pažymėkite langelį šalia skirtuko Naršyti tame pačiame lange. Šis nustatymas reiškia, kad Word dokumentas bus atidarytas Internet Explorer pagal numatytuosius nustatymus. Naršyklė naudos atitinkamą papildinį, kurio įrankių juosta yra pagrindinio Word ir Internet Explorer meniu derinys. Galite redaguoti ir formatuoti dokumentą taip pat, kaip tai darytumėte naudodami teksto rengyklę, tačiau kai kurios parinktys gali būti nepasiekiamos.

Pašalinti šį nustatymą nėra sunku. Tiesiog atidarykite dialogo langą „Keisti failo tipo ypatybes“ ir panaikinkite žymėjimą „Naršyti tame pačiame lange“. Po to dokumentas pagal numatytuosius nustatymus bus įkeltas į „Word“.

Dokumento atidarymas kitose naršyklėse

Atidaryti dokumentą kitose naršyklėse galima tik įdiegus specialius papildinius. Pavyzdžiui, „View Docs“ buvo sukurta „Opera“, o „Firefox“ ji veikia Google dokumentaiŽiūrovas ir pan. Taip pat yra didelis pasirinkimas internetinių įrankių, kurių nereikia atsisiųsti ar įdiegti kompiuteryje.

Ilgą laiką parinktis „rodyti puslapio šaltinį“ man buvo nenaudinga ir neįdomi. Iki šiol HTML mokymasis „Codecademy“ ir savo svetainių kūrimas netapo mano nauju pomėgiu. Čia ir kilo klausimas: kur rasti realių atvejų ir pasiskolinti įdomių sprendimų savo „kiaulytei“? Atsakymas buvo netikėtai paprastas, kaip ir visi išradingi dalykai: pažiūrėkite į puslapio šaltinio kodą Google Chrome! Dalinuosi su jumis savo kukliais radiniais.

Kas yra puslapio šaltinio kodas

Jei jūs, kaip ir aš, dar tik žengiate pirmuosius žingsnius HTML programavimo srityje, būtų naudinga išsiaiškinti, koks yra puslapio šaltinio kodas.

Šaltinio kodas, taip pat žinomas kaip HTML puslapio kodas, yra hiperteksto žymėjimo kalbos (HTML) tekstas. Tai apima tikrąjį puslapio turinį (tekstą, lenteles) ir žymas. Pastarosios veikia kaip instrukcijos naršyklei: kaip rodyti turinį, kokio tipo formatavimą naudoti, kur įterpti hipersaitą ar medijos failą. Na, o mums, pradedantiesiems programuotojams, išeities kodas yra geriausia treniruočių aikštelė: susirandame įdomią svetainę ir ją šnipinėjame, išsaugome ir panaudojame sėkmingus fragmentus. Kaip?

Kaip peržiūrėti šaltinio kodą „Google Chrome“ naršyklės puslapyje

Raskite jums patinkantį puslapį. Pavyzdžiui, mane domino svetainės meniu dizainas. Yra trys būdai, kaip atidaryti šaltinio kodą „Google Chrome“ naršyklėje:

1. Spustelėkite piktogramą Meniu viršutiniame dešiniajame naršyklės kampe ir pasirinkite „ Papildomi įrankiai“ Be kita ko, yra parinktis „Peržiūrėti šaltinio kodą“. Atvirai pasakius, naudoju retai šis metodas: daug nereikalingų judesių. Jį galima padaryti dar paprasčiau.
2. Paspauskite klavišų kombinaciją Ctrl + U– atsidaro naujas langas su šaltinio kodu;
3. Kontekstinio meniu gerbėjams: dešiniuoju pelės mygtuku spustelėkite puslapį ir pasirinkite parinktį „Peržiūrėti puslapio kodą“.

Mes susidorojome su užduotimi peržiūrėti puslapio HTML kodą naršyklėje. Pereikime prie įdomiausio etapo.

Kaip redaguoti ir išsaugoti šaltinio kodą

Norint išmokti kurti svetaines, neužtenka perskaityti kito asmens HTML kodą. Reikia su juo žaisti, eksperimentuoti, keisti ir patikrinti rezultatą. Jūs netgi galite pradėti sudarydami kelis sėkmingus pavyzdžius. Kaip redaguoti ir išsaugoti šaltinio kodą?

1 parinktis. „Rankiniu būdu“

Atidarę puslapio šaltinio kodą, skambiname kontekstinis meniu ir pasirinkite parinktį „Išsaugoti kaip“ ir išsaugokite failą HDD. Redaguojame failą Notepad arba Notepad, išsaugome pakeitimus ir atidarome per naršyklę. Mūsų pakeitimų (sėkmingų ir ne tokių sėkmingų) rezultatai atsispindės naršyklės lange.

2 variantas. Profesionalams

Kai kasdien „žaidi“ su šaltinio kodu, procesas „išsaugoti – atidaryti – keisti – išsaugoti – patikrinti“ tampa varginantis. Aš pats radau sprendimą įdiegdamas „Google Chrome“ papildinį - Firebug Lite. Tai leidžia redaguoti ir išsaugoti šaltinio kodą neišeinant iš naršyklės lango.

„SendPulse“ paslauga yra rinkodaros įrankis, skirtas sukurti prenumeratos bazę ir paversti atsitiktinius jūsų svetainės lankytojus įprastais. SendPulse vienoje platformoje sujungia svarbiausias klientų pritraukimo ir išlaikymo funkcijas:
● naujienlaiškius el. paštu,
● žiniatinklio stūmimas,
● SMS laiškai,
● SMTP,
● Viber naujienlaiškiai,
● žinučių siuntimas į facebook messenger.

Naujienlaiškiai el. paštu

Push pranešimų siuntimas

SMTP

„Facebook Messenger“ robotai

SMS siuntimas

filialų programa