Kaip peržiūrėti tinklapio tekstą parašytą HTML kalba? HTML kodo, puslapio šaltinio ir svetainės elementų peržiūra

Norint sužinoti, kaip peržiūrėti tinklapio tekstą parašytą HTML kalba, nereikia diegti papildomų programų. Beveik visos šiuolaikinės interneto naršyklės leidžia atidaryti svetainės HTML šaltinio kodą arba naudojant kūrėjo įrankius patikrinti konkretų puslapio elementą. Paprasčiausias būdas kompiuteryje – atidaryti norimą svetainę, paspausti dešinį pelės mygtuką ir pasirinkti „View Page Source“ / „Peržiūrėti puslapio šaltinį“.

Kaip peržiūrėti tinklapio HTML kodą?

Trumpas atsakymas: norėdami peržiūrėti tinklapio HTML kodą, atidarykite svetainę naršyklėje, spauskite dešinį pelės mygtuką ir pasirinkite „View Page Source“ („Peržiūrėti puslapio šaltinį“). Daugelyje naršyklių taip pat galima naudoti klavišų kombinaciją Ctrl + U („Windows“) arba Option + Command + U („Mac“).

Tokiu būdu naujame lange arba naršyklės kortelėje bus parodytas svetainės pradinis HTML kodas.

Kaip atidaryti svetainės HTML kodą su Ctrl + U?

Tai vienas greičiausių būdų:

1. Atidarykite norimą interneto svetainę.
2. Paspauskite Ctrl + U, jei naudojate „Windows“.
3. „Mac“ kompiuteryje naudokite Option + Command + U.
4. Atsidarys puslapio HTML šaltinio kodas.
5. Norėdami surasti konkretų tekstą, spauskite Ctrl + F arba Command + F ir įveskite ieškomą frazę.

Tai ypač patogu, kai reikia patikrinti, ar konkretus tekstas, nuoroda, meta žyma ar kitas elementas yra puslapio HTML kode.

Kas yra HTML kodas?

HTML (angl. HyperText Markup Language) yra žymėjimo kalba, naudojama interneto puslapio turinio struktūrai aprašyti.

HTML nurodo naršyklei, kas puslapyje yra:

• antraštė;
• pastraipa;
• nuoroda;
• paveikslėlis;
• sąrašas;
• lentelė;
• forma;
• navigacijos elementas;
• kitas svetainės turinys.

Pavyzdžiui, paprasta HTML antraštė gali atrodyti taip:

<h1>Mano interneto svetainė</h1>

O teksto pastraipa:

<p>Tai yra mano svetainės tekstas.</p>

Naršyklė šias HTML žymas interpretuoja ir lankytojui parodo jau vizualiai suformatuotą puslapį.

Kaip peržiūrėti konkretaus tinklapio elemento HTML kodą?

Jeigu norite pamatyti ne visą puslapio šaltinio kodą, o tik konkrečios antraštės, teksto, mygtuko, nuorodos ar kito elemento HTML, patogiau naudoti naršyklės funkciją „Inspect“ („Tikrinti“).

Kaip naudoti „Inspect“ funkciją?

Užveskite pelės žymeklį ant norimo svetainės elemento, paspauskite dešinį pelės mygtuką ir pasirinkite „Inspect“ / „Tikrinti“.

Naršyklėje atsidarys kūrėjo įrankiai (angl. „Developer Tools“), kuriuose bus pažymėtas pasirinkto elemento HTML kodas.

Pavyzdžiui, paspaudus „Inspect“ ant puslapio antraštės galima pamatyti:

<h2>Interneto svetainių kūrimas</h2>

Taip galima greitai nustatyti, kokia HTML žyma naudojama konkrečiam tekstui.

Kuo skiriasi „View Page Source“ ir „Inspect“?

Nors abu įrankiai leidžia peržiūrėti HTML, jų paskirtis šiek tiek skiriasi.

„View Page Source“ parodo naršyklės gautą pradinį puslapio šaltinio kodą.

„Inspect“ parodo naršyklėje tuo metu suformuotą puslapio struktūrą (DOM), kuri gali būti pakeista naudojant „JavaScript“.

Todėl dinaminėse svetainėse „Inspect“ lange galima matyti elementus, kurių pradiniame HTML šaltinio kode nėra.

Kada naudoti „View Page Source“?

Šį būdą verta rinktis, kai norite:

• peržiūrėti pradinį HTML kodą;
• surasti „title“ ar „meta description“;
• patikrinti „canonical“ žymą;
• ieškoti konkretaus teksto šaltinio kode;
• patikrinti tam tikras SEO žymas;
• pamatyti puslapio nuorodas.

Kada naudoti „Inspect“?

„Inspect“ naudingesnis, kai norite:

• sužinoti konkretaus elemento HTML žymą;
• patikrinti CSS stilius;
• nustatyti elemento klasę arba ID;
• išbandyti CSS pakeitimus;
• analizuoti puslapio struktūrą;
• suprasti, kodėl konkretus elementas rodomas netinkamai.

Kaip surasti konkretų tekstą HTML kode?

Jeigu puslapio HTML kodas labai ilgas, jo nereikia skaityti eilutė po eilutės.

Atidarę šaltinio kodą paspauskite:

Ctrl + F – „Windows“ kompiuteryje;

Command + F – „Mac“ kompiuteryje.

Tuomet įveskite dalį tinklapyje matomo teksto.

Naršyklė parodys, kurioje HTML kodo vietoje yra ieškoma frazė.

Tai gali būti naudinga analizuojant konkurentų svetainių struktūrą arba tikrinant savo svetainę.

Kaip pamatyti H1, H2 ir H3 antraštes HTML kode?

SEO optimizavimui svarbi tinkama puslapio antraščių struktūra. HTML kode antraštės žymimos nuo <h1> iki <h6>.

Pavyzdžiui:

<h1>Pagrindinė puslapio antraštė</h1>

<h2>Paslaugos</h2>

<h3>Interneto svetainių kūrimas</h3>

Atidarę HTML kodą galite naudoti paiešką ir ieškoti <h1, <h2 arba <h3.

Taip galima greitai patikrinti, kokias antraštes naudoja puslapis.

Kaip peržiūrėti tinklapio meta title ir meta description?

HTML šaltinio kodas taip pat leidžia patikrinti svarbius SEO elementus.

Puslapio pavadinimas dažniausiai atrodo taip:

<title>Interneto svetainių kūrimas | Įmonės pavadinimas</title>

„Meta description“ gali atrodyti taip:

<meta name="description" content="Profesionalus interneto svetainių kūrimas verslui.">

Norėdami juos greitai surasti, atidarykite puslapio šaltinį ir paieškoje įveskite:

<title>

arba:

description

Tai paprastas būdas analizuoti savo ar konkurentų puslapių SEO struktūrą.

Kaip peržiūrėti nuorodas tinklapio HTML kode?

HTML nuorodos dažniausiai kuriamos naudojant <a> žymą.

Pavyzdžiui:

<a href="https://example.com/paslaugos/">Paslaugos</a>

href dalis nurodo, į kokį adresą veda nuoroda, o tekstas tarp <a> ir </a> yra lankytojui matomas nuorodos tekstas.

HTML šaltinio analizė gali padėti suprasti svetainės vidinių nuorodų struktūrą ir pastebėti netinkamai sukurtas nuorodas.

Ar galima pakeisti tinklapio HTML naudojant „Inspect“?

Taip. „Inspect“ lange galima laikinai pakeisti HTML tekstą, CSS savybes ir kitus puslapio elementus.

Pavyzdžiui, galite pakeisti:

<h1>Senas tekstas</h1>

į:

<h1>Naujas tekstas</h1>

Naršyklėje iš karto pamatysite pakeitimą.

Tačiau svarbu suprasti, kad toks pakeitimas nėra išsaugomas tikroje svetainėje. Atnaujinus puslapį jis išnyks.

Tai tik naršyklėje atliekama laikina modifikacija, kuri labai naudinga programuotojams ir dizaineriams testuojant pakeitimus.

Ar galima nukopijuoti kitos svetainės HTML kodą?

Techniškai naršyklė leidžia matyti didelę dalį viešai lankytojui siunčiamo HTML, CSS ir „JavaScript“ kodo. Tačiau tai nereiškia, kad galima tiesiog nukopijuoti visą svetainę ir naudoti ją kaip savo.

Svetainės dizainui, tekstams, nuotraukoms, grafikai ir programiniam kodui gali būti taikoma autorių teisių apsauga.

Kitų svetainių HTML peržiūra geriausiai naudojama mokymuisi, techninei analizei ir idėjų paieškai, o ne svetainės kopijavimui.

Ar per HTML kodą galima pamatyti visą svetainės programavimo kodą?

Ne. Per naršyklę galima pamatyti tik tą informaciją, kuri buvo perduota vartotojo naršyklei.

Paprastai galima matyti:

• HTML;
• CSS;
• dalį „JavaScript“;
• paveikslėlių adresus;
• viešas nuorodas;
• tam tikrus techninius duomenis.

Tačiau serverio pusėje veikiantis kodas nėra rodomas.

Pavyzdžiui, jeigu svetainė sukurta naudojant PHP ar kitą serverio technologiją, lankytojas gauna galutinį sugeneruotą HTML rezultatą, o ne originalų serverio kodą.

Todėl per „View Page Source“ negalėsite pamatyti, pavyzdžiui, „WordPress“ PHP failų turinio ar duomenų bazės prisijungimo duomenų.

Ar galima sužinoti, su kuo sukurtas tinklapis?

Vien iš HTML kodo ne visada galima tiksliai nustatyti naudojamą turinio valdymo sistemą, tačiau dažnai galima rasti tam tikrų požymių.

Pavyzdžiui, „WordPress“ svetainėse HTML kode ir resursų adresuose dažnai galima aptikti:

/wp-content/
/wp-includes/

Tai leidžia gana pagrįstai manyti, kad svetainėje naudojama „WordPress“.

Analizuojant kodą taip pat kartais galima nustatyti naudojamus įskiepius, „JavaScript“ bibliotekas, analitikos sistemas ir kitas technologijas.

Kodėl verta mokėti peržiūrėti svetainės HTML kodą?

Gebėjimas peržiūrėti tinklapio HTML naudingas ne tik programuotojams. Jis praverčia atliekant SEO analizę, ieškant svetainės klaidų, tikrinant antraštes, nuorodas ar meta informaciją.

Jeigu svetainę reikia ne tik analizuoti, bet ir profesionaliai suprojektuoti bei suprogramuoti, tinklapių kūrimas apima gerokai daugiau nei HTML – svarbi vartotojo patirtis, dizainas, mobilioji versija, greitis, techninis SEO, saugumas ir turinio valdymo sistema.

Kaip peržiūrėti HTML kodą skirtingose naršyklėse?

Google Chrome

Atidarykite norimą puslapį → paspauskite dešinį pelės mygtuką → pasirinkite „View page source“.

Konkrečiam elementui analizuoti pasirinkite „Inspect“.

Mozilla Firefox

Paspauskite dešinį pelės mygtuką ir pasirinkite „View Page Source“ arba naudokite Ctrl + U.

Elementų analizei naudokite „Inspect“.

Microsoft Edge

„Edge“ naršyklėje taip pat galite naudoti Ctrl + U visam HTML šaltiniui arba dešiniu pelės mygtuku pasirinkti „Inspect“ konkrečiam elementui.

Safari

„Safari“ naršyklėje gali reikėti įjungti kūrėjo funkcijas nustatymuose. Tuomet galima naudoti „Develop“ meniu ir peržiūrėti puslapio šaltinį bei konkrečius elementus.

Dažniausiai užduodami klausimai apie tinklapio HTML kodo peržiūrą

Kaip pamatyti tinklapio HTML kodą?

Atidarykite norimą tinklapį, paspauskite dešinį pelės mygtuką ir pasirinkite „View Page Source“. „Windows“ sistemoje dažniausiai galima naudoti ir Ctrl + U.

Kaip peržiūrėti konkretaus teksto HTML?

Paspauskite dešinį pelės mygtuką ties norimu tekstu ir pasirinkite „Inspect“ („Tikrinti“). Kūrėjo įrankiuose bus pažymėtas atitinkamas HTML elementas.

Kaip rasti tekstą HTML kode?

Atidarykite puslapio šaltinį, paspauskite Ctrl + F arba Command + F ir įveskite ieškomą teksto fragmentą.

Ar HTML kodą gali matyti visi?

Viešai naršyklei perduodamą HTML kodą paprastai gali peržiūrėti bet kuris svetainės lankytojas. Tačiau serverio kodas, duomenų bazė, slaptažodžiai ir kita nevieša informacija tokiu būdu nėra prieinama.

Ar galima redaguoti HTML tiesiai naršyklėje?

Naudojant „Inspect“ galima laikinai redaguoti puslapio HTML ir CSS, tačiau pakeitimai atliekami tik jūsų naršyklėje ir atnaujinus puslapį išnyksta.

Kuo skiriasi HTML ir CSS?

HTML apibrėžia puslapio turinį ir struktūrą, o CSS daugiausia atsakingas už jo išvaizdą – spalvas, dydžius, tarpus, išdėstymą ir kitus dizaino elementus.

Jeigu ieškote, kaip peržiūrėti tinklapio tekstą parašytą HTML kalba, paprasčiausias būdas yra naudoti Ctrl + U arba naršyklėje pasirinkti „View Page Source“. Jei reikia patikrinti tik konkretų tekstą, mygtuką, nuorodą ar kitą puslapio elementą, patogiau naudoti „Inspect“ funkciją.

HTML kodo peržiūra padeda suprasti interneto svetainių struktūrą, patikrinti H1–H3 antraštes, meta duomenis, nuorodas ir kitus SEO elementus. Tai vienas paprasčiausių būdų pradėti suprasti, kas iš tikrųjų vyksta už vizualiai matomo interneto puslapio.