Kā atrast lapas avota kodu. Google Chrome — rīki tīmekļa pārziņiem

Prasme mainīt lapas avota kodu– noderīga prasme pieredzējušam interneta lietotājam. Aizstājot HTML kodu, jūs varat mainīt atvērto tīmekļa lapu, kā vēlaties. Šajā rakstā mēs jums pastāstīsim kā mainīt lapas kodu pārlūkprogrammā Google Chrome. Taču citās pārlūkprogrammās viss tiek darīts līdzīgi, tāpēc grūtībām nevajadzētu rasties.

Kāds ir lapas HTML kods?

Katrai lapai, kuru atverat pārlūkprogrammā, ir savs kods HTML iezīmēšanas valodā. Šis kods apzīmē tagus un tekstu. Tagi ir unikālas etiķetes, kas norāda pārlūkprogrammai, kā parādīt šo vai citu vietnes daļu. Teksts ir lapas saturs, tas, ko lietotājs redz. Tāpat lapai var pieslēgt CSS stilus, kas nosaka lapas elementu izskatu. Uz mainīt vietnes avota kodu jums nav rūpīgi jāpārzina HTML un CSS, un jūs drīz to redzēsit.

Kāpēc mainīt tīmekļa lapu?

Varat aizstāt datus vietnē, mainīt ziņojuma tekstu vai uzņemt viltotu ekrānuzņēmumu. Lūdzu, ņemiet vērā, ka visas izmaiņas ir redzamas tikai jums un pazudīs, atkārtoti ielādējot lapu. Arī mainītie dati nebūs īsti. Piemēram, ja man nav 10 dolāru un es tos nomainīšu uz 100, tad man vairs nebūs naudas. Tas ir tikai lapas parādīšana pārlūkprogrammā. Piemērs:

Pēc:

Piemēram, es ņemšu to pašu vietni un mainīšu iepriekšējo rakstu “Galvenās lapas atvēršana pārlūkprogrammā Google Chrome. Ar peles labo pogu noklikšķiniet uz elementa, kuru vēlos mainīt, piemēram, paziņojuma virsraksts un atlasu “Skatīt kodu”.

Atvērtajā logā dodieties uz cilni Elements un skatiet lapas HTML kodu. Tajā mums jāatrod mūs interesējošais teksts. (pasvītrots ar sarkanu)

Tagad es izdzēsīšu veco tekstu un ierakstīšu jaunu.

Tas arī viss, paziņojuma nosaukums ir mainīts. Tagad mainīšu pašu sludinājumu, tagus un kategoriju.

Varat ievietot citu attēlu, mainot img tagā atribūtu src.

Katram interneta lietotājam ir savas iecienītākās vietnes, kurās viņš pavada ilgu laiku. Un tikai slinkais neiedomājās paskatīties, kā tas radīts un no kā sastāv. Uz visiem šiem jautājumiem atbildēt nav iespējams, jo mājaslapas izveides veidi ir daudz, taču apskatīt komandas un kodus, kas to veido, ir iespējams un publiski pieejams ikvienam.

Cits jautājums, vai cilvēks, kurš nav saistīts ar programmēšanu, sapratīs kādu no simboliem, kas veido kodu. Taču no tālāk sniegtajiem piemēriem ikviens Google Chrome lietotājs varēs skatīt atsevišķus vietņu elementus.

Kā Google pārlūkprogrammā apskatīt html lapas avota kodu

Lai pārlūkprogrammā Chrome varētu skatīt lapas kodu, jums jādodas uz jūs interesējošo vietni un jāveic šādas darbības:

Šie divi vienumi atšķiras pēc to funkcionalitātes un informācijas lietotājam, programmētājam vai hakeram.

Kāda ir atšķirība starp lapas kodu un komandu “Skatīt kodu”?

Analizējot katru no šīm funkcijām, varat uzrakstīt atsevišķu rakstu. Programmētājiem šī atšķirība ir būtiska un viņi saprot, kādos gadījumos Google Chrome pārlūkprogrammā ir jāizmanto “View Code” un kurā “View Page Code”.

Bet, lai izskaidrotu vidusmēra lietotājam, šīs funkcijas var iedalīt šādos nolūkos:

1. “Skatīt lapas kodu” ir nepieciešams tikai, lai redzētu lapas galveno kombināciju. Būtībā šī ir vietnes struktūra (bez papildu modeļiem CSS failu veidā un citiem papildinājumiem, kas paliek vietnes veidotāja mapē). Šī struktūra nav piemērota, lai izveidotu savu lapu ar “copy-pasting”, taču tā ļaus jums redzēt, ko tieši programmētājs darīja un kādā secībā, lai nodrošinātu, ka vietnei pārlūkprogrammā Google Chrome ir šāds ārējais dizains.
2. “Skatīt kodu” parāda detalizētu struktūru, izceļot visas skartās lapas. Ja virzīsiet kursoru virs konkrēta saraksta koda, tas iezīmēs elementu vietnē, kurai tas pieder.
3. Lapas koda skatīšana tiek atvērta atsevišķā pārlūkprogrammā bez iespējas to rediģēt. Tas ir, tas ir piemērots tikai vietnes koda kopēšanai un lasīšanai. Bet šī ir ne mazāk noderīga funkcija.
4. “Skatīt kodu” ir maināms, un jūs varat rediģēt jebkuru elementu sev ērtā veidā. Protams, visas šīs izmaiņas "dzīvos", līdz lapa tiks atsvaidzināta, taču dažreiz ir jautri iziet cauri šiem iestatījumiem un vienkārši saprast, kāpēc šī vai cita vērtība ir nepieciešama un kas notiks, ja to mainīsit. Jums nevajadzētu uzskatīt, ka ar šādām darbībām jūs nodarīsit kaitējumu sev vai vietnei - šīs izmaiņas ietekmē tikai jūsu Google Chrome kodu un nedarbojas tiešsaistē.

Mēs apsveram jautājumu par to, kā apskatīt elementa kodu

Ja mēs atbildētu uz šādu jautājumu, tad vienīgā iespēja, kas liecina par sevi, ir piemērs. Jo vienā rakstā ir ļoti grūti kļūt par cilvēku, kurš saprot šo tēmu (web izstrādātāju), bet parādīt ar piemēru, lai jautājums nokārtots, ir daudz vieglāk.

Elementa koda funkcionalitāte ir ļoti plaša, tāpēc mēs ņemam vienu no vārdiem Google Chrome pārlūkprogrammas vietnē. Mēs vēlējāmies apsvērt, kādi atslēgvārdi (kodā tas tiks rakstīts kā “atslēgvārdi”) tika izmantoti mūsu vietnei. Lai to izdarītu, mēs veicam šādu algoritmu:

Citi veidi, kā izmantot šo funkciju pārlūkprogrammā Google Chrome

Kopumā, turpinot atbildēt uz jautājumu, kā apskatīt elementa kodu un kāpēc tas ir nepieciešams, jums vajadzētu uzskaitīt tā funkcijas. Proti, pateicoties iespējai pārlūkprogrammā Google Chrome skatīt jebkuras vietnes elementa kodu, mēs varam:

• Skatiet vietnes struktūru, sākot no galvas (“vietnes galvene”) un beidzot ar beigām (jebkuras programmas pēdējā komanda);
• Skatiet visas vietnes funkcijas, proti: saites uz citām vietnēm, papildu moduļi no ārējām vietnēm un iebūvētu skaitītāju klātbūtne dažādas informācijas vākšanai;
• Uzziniet, vai kopēšana no vietnes ir aizliegta vai nav;
• Kods ierakstīs visas saites uz citām vietnes lapām, kā arī to dizainu un turpmākās darbības pēc noklikšķināšanas uz tām.

Tas nekādā gadījumā nav galīgs saraksts. Taču jāatgādina, ka bez īpašām zināšanām Google Chrome lapas kodu “nolasīt” ir gandrīz neiespējami un saņemtie dati parastam lietotājam praktiski nav vajadzīgi.

Vienums “Skatīt elementa kodu” nedarbojas

Uzreiz jāsaka, ka katrai vietnei būs atvērta piekļuve elementu kodiem. Tas ir, pat vispopulārākās un dārgākās vietnes būs atvērtas to koda apskatei. Tāpēc, ja vienums pārlūkprogrammā Google Chrome nav aktīvs vai rada kļūdu, tam ir šādi iespējamie iemesli:

• Lietotāja profils ir bojāts;
• Ļaunprātīgas programmatūras klātbūtne datorā;
• Bloķēšana ar noteiktu paplašinājumu, lai palielinātu veiktspēju (pat tas var notikt).

Bojāta lietotāja profila labošana

Lai izveidotu jaunu profilu, datorā ir jāizdzēš vecais. Lai to izdarītu, mēs rīkojamies šādi:

1. Aizveriet Google Chrome un palaidiet iebūvēto pārlūkprogrammu Windows Explorer.
2. Adreses joslā ievadiet šādu komandu: %LOCALAPPDATA%\Google\Chrome\User Data\.
3. Kad tiek atvērts direktorijs, meklējiet mapi “Noklusējums” un pievienojiet tās nosaukumam “Dublējums”, lai iegūtu šādu informāciju: “Dublējuma noklusējums”.
4. Tagad pēc pārlūkprogrammas Chrome restartēšanas tiks izveidots jauns profils.

Mēs noņemam ļaunprātīgu programmatūru vai tās paliekas

Ja jaunais profils nedod mums piekļuvi lapas elementa kodam un joprojām redzam kļūdu, mums ir jārīkojas šādi:

1. Atveriet Windows komandrindu ("Run") un ievadiet tur komandu "cmd".
2. Rindā ievadiet šādu komandu: RD /S /Q “%WinDir%\System32\GroupPolicyUsers”.
3. Pēc darbības apstiprināšanas ievadiet šo: RD /S /Q “%WinDir%\System32\GroupPolicy”.
4. Tagad “gpupdate /force” (bez pēdiņām).

Ja viss tika izdarīts pareizi, tad pēc datora restartēšanas Google Chrome atvērs elementu kodu un pārlūkprogramma darbosies normāli.

Dažu svarīgu emuāra elementu izmērs, krāsa, piemēram, emuāra vai ieraksta nosaukums, vairāk atzīmes un tamlīdzīgi. Nepieciešamo kodu meklēju manuāli, eksperimentējot ar testa domēnu, uz kura pamata vēlāk tapa raksts.

Un nesen man vajadzēja mainīt saišu krāsu. Izsijājot daudz literatūras par šo jautājumu, es sapratu vienkāršu lietu: katrs dod piemērus no savām veidnēm, bet mums visiem ir dažādas veidnes un ir labi, ja kods no piemēra ir vismaz nedaudz līdzīgs: bez vaimanām, Es joprojām atradīšu to meklējot - izmantojot metodi poke.

Numurs nedarbojās ar saites kodu. Visi norādīja uz pilnīgi atšķirīgiem ceļiem. Es domāju, vai ir kāds vienkāršs un precīzs rīks, kā jebkurā vietnē atrast nepieciešamo html kodu. Daudziem emuāru autoriem, pat ar pieredzi, ir grūtības veikt nelielas izmaiņas veidnē. Tam nav nekā slikta, jo katram ir savas intereses un mērķi mājas lapas izveidē.

Ja vēlaties veikt nelielas izmaiņas veidnē, piem. mainīt jebkuru virsrakstu, rakstu un sadaļu nosaukumus, fontu un saišu krāsu un lielumu, Parasti pietiek, lai apgūtu šajā rakstā apskatīto vienkāršo principu. Bet ir arī sarežģīti gadījumi, kuros nepieciešama vai nu dziļāka html un css izpēte, vai arī speciālista palīdzība.

Kādu dienu paziņa man lūdza atrast, kur viņa veidnē mainīt kategorijas paneļa krāsu. Augšupielādēja tēmu testa apakšdomēnā. Šī elementa iestatījumi netika saglabāti style.css, bet gan citā failā, tāpēc cilvēks to nevarēja atrast.

Kā atrast un mainīt vietnes html un css kodu

Ja jums nepatīk gari raksti, šis ir jums raksta beigās video pamācība, kas stāsta, kā varat redzēt vietnes html kodu, izmantojot Notepad++, un veikt izmaiņas jebkuras veidnes dizainā, izmantojot piemēru, kā mainīt fonta krāsu. Videoklipā ir arī citi emuāra apstrādes smalkumi. Un tiem, kas ir tuvāk un saprotamāki tekstam, zemāk ir detalizēta tēmas analīze ar ekrānuzņēmumiem.
httpv://youtu.be/uIlVvwCt2ho

Termini un jēdzieni

Precīzāk būtu rakstam dot virsrakstu " Kā atrast css kodu“, bet es nolēmu iet ar “nepareizo” nosaukumu, jo būtībā atbilde uz šo jautājumu ir atrodama html. CSS un HTML ir ļoti dažādas lietas, lai gan tās ir vienas sistēmas divas daļas. Internetā ir daudz tehnisku rakstu, šeit mums pietiks, lai saprastu, ka:

• HTML— atbild par vietnes struktūru (kas kam seko, kādā secībā utt.). Tas ir vietnes izveides pamats. Ja salīdzinām ar māju, tad tāds ir tās plānojums, telpu iekārtojums.
• CSS— atbild par noformējumu (kādi fonti, izmēri, krāsas utt.). Tas ir mājas vispārējais stils un atsevišķo telpu stils: kādas tapetes būs, lampas, aizkari, mēbeles. Tāpēc dokuments, kurā teikts css kodi, ko sauc par "stila lapu"

Un, ja jūs domājat, kā mainīt, piemēram, vietnes nosaukuma krāsu, fonta lielumu tekstos vai galveņu krāsu sānjoslā, tad tas viss ir jāmeklē CSS stila lapā. Tas ir vienīgais, ko vispirms ir vērts saprast, lai pats varētu veikt izmaiņas kodā.

Man patīk kompleksu padarīt vienkāršu. Atceros sen, kad man bija pirmā mašīna, tā bija ļoti veca, vadi sapuvuši, bieži plosījās drošinātāji un katru reizi vilku uz servisu. Iedomājieties, cik daudz naudas tika izšķiests, neskatoties uz to, ka paša nomaiņa, kā izrādās, maksā santīmus.

Kādu dienu paskatījos, ko īsti meistars dara. Es joprojām nezinu, kā darbojas drošinātājs. Bet es zinu, kur to mainīt). Es pats neremontētu motoru, un drošinātāju nomainīt nav grūti. Tāpat ir ar vietnēm.

Ja nevēlaties kļūt par programmētāju, tad nav nepieciešama dziļa programmēšanas izpratne. Ir pietiekami skaidrs, lai saprastu, kas kam paredzēts, kur to meklēt un kā mainīt. Labāk ir mainīt to, ko varat pats, un visu pārējo atstāt speciālistiem. Rakstā par šo tēmu ir noderīga saite.

Vai jums ir jābūt ekspertam visā?

SEO emuāros bieži notiek diskusijas par to, vai iesācējam ir jābūt dziļai izpratnei par HTML, vai, vēl labāk, jāiemācās pašam rakstīt mājas lapas, lai viss būtu unikāls.. Nu nezinu - katram savs, un šeit kas tuvāk kuram ir tuvāk. Mani interesē nedaudz vairāk, tāpēc tagad vairāk mācos no Vladimira. Šā gada novembrī Vladimirs atvēra savu emuāru. Viņa emuārs tika izveidots pēc visvienkāršākās bezmaksas veidnes, viņš to tikai nedaudz pārveidoja, lai tas atbilstu sev.

Pēc 10 dienu pastāvēšanas emuārs ieņēma 104. vietu visu Runet vietņu reitingā ar aptuveni 1,5 tūkstošiem cilvēku dienā. 10 dienu laikā. Tātad, kāds ir darījums? Vladimirs labi pārzina HTML un var pasūtīt un iegādāties sev unikālu veidni. Tātad jums tas ir jāsaprot Noslēpums slēpjas nevis veidnēs, bet gan informācijas lietderībā.

Kur ir paslēpts html kods?

Atvainojiet par novirzi, atgriezīsimies pie mūsu kodiem). Pieņemsim, ka vēlaties mainīt sava emuāra nosaukuma fonta krāsu. Apskatīsim manas testa vietnes piemēru.

1. Atveriet vietni pārlūkprogrammā Google Chrome (ja jūs to vēl neizmantojat, instalējiet to — tas ir labi izstrādāts darbam ar vietnēm, tajā ir daudz iebūvētu rīku).
2. Pārvietojam peles kursoru virs elementa, kuru gatavojamies mainīt . Šajā gadījumā - emuāra nosaukums. Ar peles labo pogu noklikšķiniet uz tā un parādītajā logā atlasiet SKATĪT ELEMENTA KODU.

SVARĪGI: nejauciet to ar LAPAS KODA SKATĪŠANU! Tagad mums nav vajadzīga visa lapa, tikai atsevišķs elements.

Noklikšķiniet uz tā - pārlūkprogrammas apakšā tiek parādīts koda skatīšanas logs:

Koda rindiņa, kuru mēs mainām, ir iezīmēta sarkanā krāsā.

Bet zilā krāsā iezīmētajā apgabalā ir tas, ko mēs meklējam. Šeit varat atrast precīzu (ne aptuvenu) koda rindiņu, kas ir atbildīga par fontiem, krāsu, izmēru, izcelšanu utt. Tādā veidā jūs varat uzzināt JEBKURU jebkuras veidnes jebkura elementa kodu.

Atrodiet vajadzīgo rindiņu blokā, kas iezīmēts zilā krāsā. Labajā pusē ir slīdnis, kurā varat ritināt un atrast vajadzīgo līniju.

Vispārējs princips, kur meklēt lietas:

Fonta nosaukums - rindā FONTU ĢIMENE

Fonta lielums - rindiņā FONT SIZE

Fonta krāsa - rindā COLOR

Šeit ir trīs galvenās rindiņas, kurās mainās jebkura elementa nosaukums, lielums un fonta krāsa. Labajā pusē stila css rindā ir norādīta rindas pozīcija dokumentā. Ja jāmaina kāds cits elements (piemēram, jānoskaidro, kur atrodas līnija, kur var mainīt izvēlnes joslas krāsu vai saišu krāsu), viss tiek darīts tieši tāpat.

UZMANĪBU:

Līnija, kuru mēs kopēsim, attēlā ir iezīmēta sarkanā krāsā,

lai vēlāk to varētu atrast stila lapā.

4. Kopējiet rindiņu. Tā kā šajā piemērā mēs vēlamies mainīt vietnes nosaukuma krāsu, es nokopēju otrajā attēlā sarkanajā taisnstūrī iezīmēto līniju. Manā veidnē tas ir atbildīgs par vietnes nosaukuma krāsas maiņu:

#header h1 a, #header h1 a:vissited (

Atrodiet vajadzīgo rindiņu failā “style sheet (style.css)”. Tas jau ir izdarīts administratora panelī. Es ļoti lūdzu, lai gan nav pārliecības un pilnīgas izpratnes, visi eksperimenti ir jāveic testa apakšdomēnā, lai izslēgtu .

Tātad, dodieties uz admin paneli: KONSOLE - IZSKATS - REDAKTORS. Labajā sānjoslā atrodam failu STYLE TABLE (STYLE.CSS), atveriet to.

Tagad atveriet meklēšanas rindiņu, izmantojot taustiņus CTRL + F: augšējā logā parādīsies tukšs rindas logs. Mēs ielīmējam tajā rindiņu, ko nokopējām 4. darbībā.

Un jūs redzēsiet, kā šī līnija tiks izcelta stila lapā (attēlā oranžā krāsā):

Mēs veicam izmaiņas elementā. Mūsu gadījumā mēs mainām fonta krāsu, tāpēc rindā COLOR mēs aizstājam citu vērtību - vēlamo krāsu. Piemērā krāsa ir melna, tās nozīme ir:

Jūs varat izvēlēties krāsu jebkurā tīmekļa krāsu paletes pakalpojumā: ierakstiet meklētājprogrammā “Web color palete” un atlasiet vajadzīgo. Mēs izvēlamies krāsu, nokopējam tās digitālo vērtību un rūpīgi nomainām ar veco. pēc tam noklikšķinām ATJAUNINĀT FAILU un ejam skatīties, kas noticis.

Ja izmaiņas netiek parādītas, par pēdējo stundu un atkal dodieties uz lapu - šoreiz viss ir jāparāda.

Aprakstīšanai nepieciešams ilgs laiks, bet praksē viss tiek darīts ātri, it īpaši, ja parādās sākotnējā prasme.

Sīkāk, kā mainīt noteiktus elementus:

Tas šodienai viss, ar kodiem vairs netraucēšu. Es ceru, ka tagad jūs pats varēsit viegli atrast un mainīt jebkuru html koda elementu vai drīzāk css koda elementu - lai eksperti man piedod par tā vienkāršošanu. Un, ja jūs to nezināt, joprojām apmeklējiet lapu. Netērējiet savu laiku muļķībām.

Es iesaku noskatīties Artema Abramoviča video par to, kā meklēt un atrast jebkuru vārdu vai elementu jebkurā motīvā/veidnē, jebkuram dzinējam (wordpress, joomla utt.) un aizstāt to ar nepieciešamo:

Lūdzu, dalies, ja patika:

Jūs varētu arī interesēt:

Jums ātri jāredz visas izmaiņas pašā vietnē, neietekmējot internetā ievietotos vietnes failus un kodu. Piemēram, mainiet bloka krāsu shēmu, pārvietojiet elementu, kas ir izkustējies utt.

Lai to izdarītu, daudzi tīmekļa pārziņi izmanto vietējos Denwer vai OpenServer serverus, savā datorā palaižot pilnu vietnes kopiju. Šī metode ir universāla un piemērota profesionāļiem, ar to var pārbaudīt dažādu skriptu un spraudņu darbību, eksperimentēt ar noformējuma maiņu un rediģēt visus vietnes failus, kā arī pēc pārbaudes pārsūtīt attiecīgās izmaiņas tieši uz vietni.

Lietotājiem, kuri ir tālu no tīmekļa pārziņa mākslas, iesaku šiem nolūkiem izmantot pārlūkprogrammu. Tā kā es izmantoju pārlūku Chrome, es sniegšu norādījumus ar ekrānuzņēmumiem šai konkrētajai pārlūkprogrammai. Pēc analoģijas jūs varat strādāt ar Opera, Yandex Browser, Mozilla Firefox un citām pārlūkprogrammām, to rīku princips ir līdzīgs.

1. instrukcija: kā pārlūkprogrammā skatīt visu vietnes HTML kodu

Atveriet nepieciešamo savas vietnes tīmekļa lapu. Ar peles labo pogu noklikšķiniet uz vajadzīgā elementa, parādīsies pārlūkprogrammas konteksta nolaižamā izvēlne ar pieejamajām komandām:

1. attēls. Visa tīmekļa lapas HTML koda skatīšana pārlūkprogrammā Chrome

Svarīgs: Komandas nolaižamajā izvēlnē var atšķirties, piemēram, aktīvajiem elementiem (saites, attēli, video) un neaktīviem elementiem (teksts, fons, divs):

2. attēls. Pārlūka Chrome nolaižamā izvēlne

Tātad, ja neatrodat vajadzīgo komandu, vienkārši noklikšķiniet ar peles labo pogu kaut kur citur vai izmantojiet pārlūkprogrammas karstos taustiņus.

Atgriezīsimies pie 1. attēla, tas parāda nepieciešamo komandu, lai apskatītu visu avota tīmekļa lapas HTML kodu, to sauc par " Skatīt lapas kodu". Noklikšķiniet uz komandas, tiks atvērta jauna cilne ar pilnu avota tīmekļa lapas kodu, liels pluss visam - apskate ir pieejama ar sintakses izcelšanu:

3. attēls. Šīs vietnes koda fragments

Šis rīks ir ļoti noderīgs, lai atrastu un rediģētu meklētos elementus.

Alternatīvi veidi, kā apskatīt visu tīmekļa lapas HTML kodu

Lai piekļūtu ātrāk, varat izmantot citus veidus, kā izsaukt šo rīku

1. 1. attēlā redzams, ka šī komanda ir pieejama, izmantojot īsinājumtaustiņus + ;
2. Ielīmējiet view-source:site pārlūkprogrammas adreses joslā, nevis manā domēnā, ievietojiet savu adresi;

Abas metodes ir universālas, un tām vajadzētu darboties visās pārlūkprogrammās.

Sākumā dažiem var šķist, ka tas nemaz nav nepieciešams rīks, taču visa vietnes HTML koda apskate lieliski noder, lai kodā atrastu nepieciešamos elementus, tie var būt saites, tagi, metatagi, atribūti un citi elementi. .

Karsto taustiņu kombinācija +atveriet meklēšanas logu, pārlūkprogrammā Chrome tas parādās augšējā labajā stūrī:

3. attēls. Meklēt pēc vietnes koda

Pēc pieprasījuma ievadīšanas meklēšanas formā ekrāns tiks pārvietots uz pirmo atrasto elementu. Izmantojot bultiņas, varat pārvietoties starp tiem un atlasīt vajadzīgo:

4. attēls. Meklēt pēc HTML vietnes koda

2. instrukcija: kā skatīt un rediģēt vietnes HTML un CSS kodu pārlūkprogrammā Google Chrome

Tagad vissvarīgākā daļa, kurā parādīšu, kā pārlūkprogrammā var rediģēt vietnes HTML un CSS kodu. pēc tam pārsūtiet izmaiņas uz pārlūkprogrammu.

Šis noderīgais rīks vienmēr ir pieejams jūsu pārlūkprogrammā, eksperimentējot ar citām komandām, kas atvieglos vietnes rediģēšanu.

Ilgu laiku opcija “rādīt lapas avotu” man bija bezjēdzīga un neinteresanta. Līdz šim HTML apguve Codecademy un savu vietņu veidošana nav kļuvusi par manu jauno hobiju. Te radās jautājums: kur atrast reālus gadījumus un aizņemties interesantus risinājumus savai “cūciņa bankai”? Atbilde bija negaidīti vienkārša, tāpat kā visas ģeniālās lietas: apskatiet lapas avota kodu pārlūkprogrammā Google Chrome! Dalos ar saviem pieticīgajiem atradumiem.

Kas ir lapas pirmkods

Ja jūs, tāpat kā es, tikai sperat savus pirmos soļus HTML programmēšanā, būtu ieteicams noskaidrot, kas ir lapas pirmkods.

Avota kods, kas pazīstams arī kā HTML lapas kods, ir teksts hiperteksta iezīmēšanas valodā (HTML). Tas ietver faktisko lapas saturu (tekstu, tabulas) un tagus. Pēdējie darbojas kā norādījumi pārlūkprogrammai: kā parādīt saturu, kāda veida formatējumu izmantot, kur ievietot hipersaiti vai multivides failu. Mums, programmētājiem iesācējiem, pirmkods ir vislabākā apmācības vieta: mēs atrodam interesantu vietni un izspiegojam to, saglabājam un izmantojam veiksmīgus fragmentus. Kā?

Kā skatīt avota kodu pārlūkprogrammas Google Chrome lapā

Atrodiet lapu, kas jums patīk. Piemēram, mani interesēja vietnes izvēlnes dizains. Ir trīs veidi, kā pārlūkprogrammā Google Chrome atvērt avota kodu:

1. Noklikšķiniet uz ikonas izvēlne pārlūkprogrammas augšējā labajā stūrī un atlasiet “Vairāk rīku”. Cita starpā ir opcija “Skatīt avota kodu”. Atklāti sakot, es reti izmantoju šo metodi: ir daudz nevajadzīgu kustību. To var padarīt vēl vienkāršāku.
2. Nospiediet taustiņu kombināciju Ctrl+U– tiek atvērts jauns logs ar avota kodu;
3. Konteksta izvēlnes cienītājiem: ar peles labo pogu noklikšķiniet uz lapas un atlasiet opciju “Skatīt lapas kodu”.

Mēs tikām galā ar uzdevumu pārlūkprogrammā skatīt lapas HTML kodu. Pārejam uz interesantāko posmu.

Kā rediģēt un saglabāt avota kodu

Lai uzzinātu, kā izveidot vietnes, nepietiek tikai ar kāda cita HTML koda nolasīšanu. Ar to jāspēlējas, jāeksperimentē, jāveic izmaiņas un jāpārbauda rezultāts. Varat pat sākt, apkopojot dažus veiksmīgus paraugus. Kā rediģēt un saglabāt avota kodu?

1. iespēja. “Manuāli”

Kad esam atvēruši lapas avota kodu, izsauciet konteksta izvēlni un atlasiet opciju “Saglabāt kā” un saglabājiet failu cietajā diskā. Mēs rediģējam failu Notepad vai Notepad, saglabājam izmaiņas un atveram to caur pārlūkprogrammu. Mūsu veikto izmaiņu (veiksmīgo un ne tik veiksmīgo) rezultāti tiks atspoguļoti pārlūkprogrammas logā.

2. variants. Profesionāļiem

Katru dienu "spēlējoties" ar pirmkodu, process "saglabāt - atvērt - mainīt - saglabāt - pārbaudīt" kļūst nogurdinošs. Es atradu sev risinājumu Google Chrome spraudņa - Firebug Lite - instalēšanas veidā. Tas ļauj rediģēt un saglabāt avota kodu, neizejot no pārlūkprogrammas loga.