Kako unijeti html kod stranice. Kako otvoriti konzolu u pregledniku Yandex

Ctrl+U

Kako mogu vidjeti izvorni kod elementa?

Desnom tipkom miša kliknite element stranice koji vas zanima.

Google Chrome: “Prikaz koda elementa”

Opera: "Provjeri element"

FireFox: “Analiziraj element”

U drugim preglednicima potražite stavku izbornika sa sličnim značenjem.

Pozdrav svima!

Posebno sam izložio cijelu poantu na početku članka, za one koji traže brz odgovor.

Informacija je možda poznata mnogima, ali budući da pišem za blogere početnike, web programere i druge tražitelje, ovaj referentni članak morate imati.

U budućnosti ćete svakako proučavati izvorni kod stranica i pojedinačnih elemenata.

Pogledajmo konkretan primjer kako možete koristiti pregled izvornog koda stranice.

Na primjer, želimo vidjeti koje se ključne riječi koriste za određenu stranicu. Idemo na web stranicu koja nas zanima i pritisnemo Ctrl+U. Izvorni kod ove stranice otvorit će se u posebnom prozoru ili na zasebnoj kartici. Pritisnite Ctrl+F za traženje isječka koda. U ovom slučaju upisujemo riječ " ključne riječi". Automatski ćete biti preusmjereni na dio koda s ovom meta oznakom, a tražena riječ bit će istaknuta.

Po analogiji, možete pretraživati ​​i proučavati druge fragmente koda.

Pregledavanje cijelog izvornog koda stranice u većini slučajeva nije baš zgodno, pa je u svim preglednicima moguće vidjeti kod pojedinačnog elementa ili fragmenta.

Upotrijebimo konkretan primjer pregleda koda elementa. Na primjer, pogledajmo ima li veza atribut nofollow. Kliknite desnom tipkom miša na poveznicu koja nas zanima iu padajućem kontekstnom izborniku lijevo kliknite na stavku “Prikaz koda elementa” ili slično (ovisno o vašem pregledniku). Ispod, u posebnom prozoru za analizu koda, dobivamo nešto slično.

Vidimo da kod veze sadrži rel=”nofollow” . To znači da PR neće “curiti” preko ovog linka. O tome ćemo detaljnije govoriti u sljedećim člancima. Sada je važno da sada znate kako vidjeti izvorni kod stranice i izvorni kod pojedinačnog elementa.

Dugo mi je opcija “prikaži izvor stranice” bila beskorisna i nezanimljiva. Do sada učenje HTML-a na Codecademyju i dizajniranje vlastitih web stranica nije preraslo u moj novi hobi. Tu se postavilo pitanje: gdje pronaći stvarne slučajeve i posuditi zanimljiva rješenja za svoju “kasicu prasicu”? Odgovor je bio neočekivano jednostavan, kao i sve genijalne stvari: pogledajte izvorni kod stranice u Google Chromeu! Dijelim s vama svoja skromna otkrića.

Koji je izvorni kod stranice

Ako i vi, poput mene, tek radite svoje prve korake u HTML programiranju, bilo bi dobro saznati koji je izvorni kod stranice.

Izvorni kod, također poznat kao kod HTML stranice, je tekst u Hyper Text Markup Language (HTML). Uključuje stvarni sadržaj stranice (tekst, tablice) i oznake. Potonji djeluju kao upute za preglednik: kako prikazati sadržaj, koju vrstu oblikovanja koristiti, gdje umetnuti hipervezu ili medijsku datoteku. Pa, za nas, programere početnike, izvorni kod je najbolji teren za vježbanje: pronađemo zanimljivu stranicu i špijuniramo je, spremimo i koristimo uspješne fragmente. Kako?

Kako vidjeti izvorni kod na stranici preglednika Google Chrome

Pronađite stranicu koja vam se sviđa. Na primjer, zanimao me dizajn jelovnika stranice. Postoje tri načina za otvaranje izvornog koda u pregledniku Google Chrome:

1. Kliknite na ikonu Jelovnik u gornjem desnom kutu preglednika i odaberite “Više alata”. Među ostalim, postoji opcija “View source code”. Iskreno, rijetko koristim ovu metodu: ima puno nepotrebnih pokreta. Može se učiniti još jednostavnijim.
2. Pritisnite kombinaciju tipki Ctrl+U– otvara se novi prozor s izvornim kodom;
3. Za ljubitelje kontekstnog izbornika: desnom tipkom miša kliknite stranicu i odaberite opciju “View page code”.

Nosili smo se sa zadatkom pregleda HTML koda stranice u pregledniku. Prijeđimo na najzanimljiviju fazu.

Kako urediti i spremiti izvorni kod

Da biste naučili kako izraditi web stranice, nije dovoljno pročitati tuđi HTML kod. S njim se treba igrati, eksperimentirati, mijenjati i provjeriti rezultat. Možete čak početi sastavljanjem nekoliko uspješnih uzoraka. Kako urediti i spremiti izvorni kod?

Opcija 1. "Ručno"

Nakon što smo otvorili izvorni kod stranice, pozovite kontekstni izbornik i odaberite opciju “Spremi kao” te pohranite datoteku na tvrdi disk. Datoteku uređujemo u Notepadu ili Notepadu, spremamo promjene i otvaramo je putem preglednika. Rezultati naših promjena (uspješnih i manje uspješnih) prikazat će se u prozoru preglednika.

Opcija 2. Za profesionalce

Kada se svaki dan "igrate" s izvornim kodom, proces "spremi - otvori - promijeni - spremi - provjeri" postaje naporan. Za sebe sam pronašao rješenje u obliku instaliranja dodatka za Google Chrome - Firebug Lite. Omogućuje vam uređivanje i spremanje izvornog koda bez napuštanja prozora preglednika.

Dobar dan, dragi čitatelji mog bloga. Ponekad pronađete neku lijepu značajku na web stranici i počnete se pitati kako je kreator postigao tako zanimljiv učinak.

Ispostavilo se da je odgovor vrlo jednostavan. A ako imate neke vještine, možete prikupiti puno ovih značajki i stvoriti vlastitu jedinstvenu web stranicu u kratkom vremenu.

Danas ćemo razgovarati o tome kako otvoriti kod stranice, određenog elementa i naučiti kako koristiti ovu vještinu za svoju dobrobit.

Osnovno poznavanje koda

Moja stranica je namijenjena početnicima i prvo bih želio ukratko govoriti o stranicama i kodu općenito.

Nacrtati sliku, zatim je izrezati na male dijelove, napisati kod tako da će preglednik ponovno sastaviti sve elemente u jednu cjelinu. Čini li se da je sve vrlo komplicirano? Nikako, i nema smisla tugovati zbog toga.

Tako nastaju kvalitetne web stranice. Ako želite, uključite se u ovu stvar i proučite je; ako ne želite, nitko vas ne može prisiliti.

Reći ću samo jedno... nema ništa ugodnije nego vidjeti kako se nerazumljive riječi koje si napisao pretvaraju u jedinstvenu cjelinu i oživljavaju: linkovi rade, gumbi se pomiču, slike se pomiču, tekst puzi. Mislim da znam kako se osjećao Victor Frankenstein.

Kada počnete shvaćati tajni jezik i vidite da je zapravo sve puno jednostavnije nego što se u početku činilo, ne možete a da ne povjerujete u vlastite snage i sposobnosti mozga. Ovo je jako cool.

Kako se izrađuju web stranice? Idealno, prvo. On samo slika sliku. Na primjer, kao što je prikazano na slici ispod. Za sada je to samo slika, fotografija. Nijedan link ne radi, kada kliknete ne idete nikamo, ne provodi se nikakva pretraga.

Prema ovom crtežu. Pogledajte snimak zaslona u nastavku. Možda mislite da je ovo smiješan i vrlo složen skup simbola. Zapravo, sve nije tako komplicirano, postoji određeni algoritam.

Postoji samo oko 150 oznaka i svaka od njih odgovorna je za određenu radnju: poveznicu, rastavljanje crtica, podebljano, boju, naslov i tako dalje. Razumjeti ih nije tako teško ako imate želju i ne smeta vam vrijeme.

Zahvaljujući poznavanju ovih atributa, možete riješiti gotovo svaki problem. Ali svaki programer pronalazi svoje načine za postizanje cilja.

Iskusni kreatori odmah vide kako postići rezultate, dok drugi moraju razmišljati, tražiti odgovor u člancima ili u izvornom kodu konkurenata. Jednostavno preuzmu potrebni dio sa stranice treće strane i uređuju ga za sebe. To značajno skraćuje proces rada.

Malo kasnije, pokazat ću vam konkretan primjer.

Pogledaj kod

Dakle, dopustite mi da vam prvo pokažem kako postupiti ako trebate saznati tuđi html. Zatim ćemo detaljnije pogledati sva ostala pitanja.

Najbolji način

Metoda koju ću prvo opisati je malo komplicirana za početnike, ali kao uvod, pročitajte je. Otvorite stranicu i kliknite desnom tipkom miša. Odaberite "Spremi kao..."

Spremite cijelu web stranicu. Kao što vidite na snimci zaslona, ​​sve sam već preuzeo unaprijed. Ovdje imamo dvije mape.

Sve što trebate je ovdje. Svaki element. Ako ovo razumijete, možete brzo dobiti sve što vam je potrebno. Ali takav zadatak sve više postaje nemoguć. Nema preuzimanja. Što učiniti ako je zabranjeno kopiranje stranice?

Ovo je Google Chrome

Kao što ste već mogli primijetiti, najčešće koristim Google Chrome i učenje tuđeg koda u ovom pregledniku je jednostavno kao guljenje krušaka. Kao u principu i sa svakim drugim. Shema neće biti samo slična, već i identična. Otvorite stranicu čiji kod želimo znati i desnom tipkom miša kliknite bilo gdje. U prozoru koji se pojavi kliknite "Prikaži kod stranice".

U novom prozoru otvorit će se list koda, što je početniku prilično teško razumjeti. Ali nemojte biti uznemireni prije vremena.

Ako trebate znati kod samo jednog elementa, samo prijeđite mišem iznad njega i kliknite desnom tipkom miša. Odaberite drugu Chromeovu funkciju: “Prikaz koda elementa”.

Na primjer, moglo bi me zanimati kako je napravljen logo, pomoću slike ili programskog jezika? Uostalom, možete nacrtati kvadrat koristeći CSS. Mnogi stručnjaci savjetuju zapisivanje što više informacija u kodu. Kako funkcioniraju na popularnim stranicama?

Sada su se pojavile potrebne informacije. html na vrhu, css na dnu. To su dva jezika. Prvi je odgovoran za tekstualnu komponentu, a drugi za dizajn. Da nema CSS-a, morali biste svaki put odrediti boju i veličinu fonta. Za svaku stranicu, ovo je jako dugo. Ali da nema html-a, ne bismo imali tekstove. Ugrubo sam objasnio, ali generalno, to je tako.

Usput, ako vas zanima kako to radi ovdje, možete pogledati link na sliku ispod. Evo ti odgovora.

Mozilla Firefox

Ako volite raditi u mastiku, onda će sve biti potpuno isto. Otvorite stranicu i kliknite desnom tipkom miša. “Izvorni kod stranice” ako želite vidjeti cijeli kôd.

Kada prijeđete pokazivačem iznad elementa, možete otvoriti njegov kod.

Ovdje se podaci prikazuju na dnu ekrana, ali inače je sve potpuno isto.

Yandex preglednik

U pregledniku Yandex sve je potpuno isto kao u prethodne dvije opcije, otvorite stranicu, kliknite desnom tipkom miša, pogledajte kod stranice.

Lebdimo kursorom iznad elementa ako želimo točno saznati njegov kod.

Ovdje je sve prikazano potpuno isto kao u Chromeu.

Opera

I na kraju, Opera.

Usput, možda ste primijetili da ne morate koristiti miš. Postoji brzi tipkovnički prečac za otvaranje koda, a isti je za sve preglednike: CTRL+U.

Za elemente: Ctrl+Shift+C.

Ovako izgleda rezultat.

Ovo će biti zanimljivo za početnike

Sada pogledajte kako sve funkcionira. Pronađete mjesto i jako vam se svidi neki element. Na primjer, ovaj. Već znate kako otvoriti kod elementa.

Sad kopiraj.

Koristim , zalijepite ovaj kod u novu html datoteku, u oznaku body (body na engleskom).

Sada da vidimo kako će to sve izgledati u pregledniku.

Spreman. Da bi se tekst poravnao po rubovima i dobio zelenkastu boju, potrebno je spojiti css na ovaj dokument i kopirati drugi kod sa stranice sa koje smo kopirali ovaj.

Neću to sada učiniti. Za to je potrebno više vremena: i mog i vašeg. Mislim da ću sve detalje opisati u svojim budućim publikacijama. Pretplatite se na newsletter i budite prvi koji će saznati kada se članak pojavi.

Ako ne možete podnijeti, ali želite sada naučiti više o html-u i css-u, tradicionalno vam mogu preporučiti besplatne tečajeve.

Ovdje su 33 lekcije koje će vam omogućiti da savladate html - "Besplatni tečaj o HTML-u" .

A ovdje su potpune informacije o css-u - “Besplatni tečaj o CSS-u (45 video lekcija!)” .

Sad znaš malo više. Želim vam uspjeh u vašim nastojanjima. Vidimo se opet!

Usluga SendPulse je marketinški alat za stvaranje baze pretplatnika i pretvaranje povremenih posjetitelja vaše web stranice u obične. SendPulse na jednoj platformi kombinira najvažnije funkcije za privlačenje i zadržavanje kupaca:
● e-mail biltene,
● web push,
● SMS poruke,
● SMTP,
● newsletter u Viberu,
● slanje poruka na facebook messenger.

E-mail bilteni

Slanje push obavijesti

SMTP

Facebook Messenger roboti

Slanje SMS-a

Partnerski program

Pregledavajući bezbrojne stranice na internetu, možete naići na one koje nam se jako sviđaju. Odmah se nameće niz pitanja. Je li stranica napravljena korištenjem domaćeg koda ili neke vrste CMS-a? Koje CSS stilove ima? Koje su njegove meta oznake? I tako dalje.

Postoje mnogi alati koji se mogu koristiti za izdvajanje informacija o kodu web stranice. Ali desnu tipku miša uvijek imamo pri ruci. To je ono što ćemo koristiti, koristeći moju stranicu kao primjer.

Kako vidjeti kod stranice?

Da biste vidjeli izvorni kod stranice web-mjesta, trebate prijeći mišem iznad bilo kojeg područja web-stranice (osim slika i poveznica). Nakon toga kliknite desnom tipkom miša. Pred nama će se otvoriti prozor s nekoliko opcija (mogu se malo razlikovati u različitim preglednicima). U pregledniku Google Chrome, na primjer, ovo su naredbe:

• nazad;
• naprijed;
• ponovno pokretanje;
• spremiti kao;
• pečat;
• prevesti na ruski;
• pogledajte kod stranice;
• pogledaj kod.

Moramo kliknuti na pogledajte kod stranice, a pred nama će se otvoriti html kod stranice stranice.

Gledanje koda stranice: na što obratiti pozornost?

Dakle, kod Html stranice je numerirani popis redaka, od kojih svaki nosi informaciju o tome kako je ova stranica napravljena. Da biste brzo naučili razumjeti ovaj ogroman broj znakova i posebnih simbola, morate razlikovati različite dijelove koda.

Na primjer, linije koda unutar oznake head sadrže informacije za tražilice i webmastere. Nisu prikazani na stranici. Ovdje možete vidjeti po kojim se ključnim riječima ova stranica promovira, kako je napisan njen naslov i opis. Također ovdje možete pronaći vezu, slijedeći koju ćemo saznati više o obitelji Google fontova koji se koriste na web mjestu.

Ako je stranica napravljena na CMS WordPress ili Joomla, onda će i to biti vidljivo ovdje. Na primjer, ovo područje prikazuje informacije o WordPress temi ili predlošku Joomla stranice. To možete vidjeti čitajući sadržaj poveznica označenih plavom bojom. Jedna veza prikazuje predložak web stranice.

Na primjer:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

Vidjet ćemo CSS stilove fonta stranice. U ovom slučaju koristi se font. Ovo se može vidjeti ovdje - obitelj-fontova: 'Source Sans Pro'.

Ova je stranica optimizirana pomoću Yoast SEO dodatka. To se može vidjeti iz ovog komentiranog dijela koda:

Ova je stranica optimizirana Yoast SEO dodatkom v3.4.2 - https://yoast.com/wordpress/plugins/seo/

Sve informacije sadržane unutar oznake tijela preglednik prikazuje na zaslonu monitora. Ovdje vidimo html kod stranice, a na samom dnu nalazi se kod skripte Yandex Metrics. Okružen je oznakom s komentarom s tekstom:

/Yandex.Metrika counter

Sažmimo to

Nakon što smo izvršili prilično površnu analizu koda glavne stranice web mjesta, možemo zaključiti s kojim je alatima ova stranica napravljena. Na njemu smo vidjeli:

• CMS WordPress;
• Google font Source Sans Pro;
• WordPress tema – Sydney;
• Yoast dodaci;
• Yandex metrički brojač.

Sada je princip analize html koda web stranice sasvim jasan. Uopće nije potrebno stranicu koju istražujete držati otvorenom u pregledniku. Kôd stranice možete spremiti na svoje računalo pomoću kombinacija tipki ctrl+a, ctrl+c, ctrl+v. Zalijepite ga u bilo koji uređivač teksta (po mogućnosti Notepad++) i spremite s ekstenzijom html. Stoga ga u bilo kojem trenutku možete dublje proučiti i pronaći više korisnih informacija za sebe.