Kodi burimor i faqes në internet. Google Chrome - mjete për webmasterët

06.09.2019 Interesante

Ctrl+U

Si mund ta shikoj kodin burimor të një elementi?

Klikoni me të djathtën në elementin e faqes me interes.

Google Chrome: "Shiko kodin e elementit"

Opera: "Inspektoni elementin"

FireFox: "Elementi i analizës"

Në shfletues të tjerë, kërkoni një artikull menyje me një kuptim të ngjashëm.

Pershendetje te gjitheve!

E parashtrova veçanërisht të gjithë pikën në fillim të artikullit, për ata që kërkojnë një përgjigje të shpejtë.

Informacioni mund të jetë i njohur për shumë njerëz, por meqenëse po shkruaj për blogerët fillestarë, programuesit e uebit dhe kërkuesit e tjerë, ky artikull referimi është i domosdoshëm.

Në të ardhmen, ju patjetër do të studioni kodin burimor të faqeve dhe elementeve individuale.

Le të shohim një shembull specifik se si mund të përdorni shikimin e kodit burimor të një faqeje.

Për shembull, ne duam të shohim se cilat fjalë kyçe përdoren për një faqe specifike. Shkojmë në faqen e internetit që na intereson dhe shtypim Ctrl+U. Kodi burimor i kësaj faqeje do të hapet në një dritare të veçantë ose në një skedë të veçantë. Shtypni Ctrl+F për të kërkuar një copë kodi. Në këtë rast, ne shkruajmë fjalën " fjalë kyçe". Do të ridrejtoheni automatikisht në një pjesë të kodit me këtë meta-etiketë dhe fjala e kërkuar do të theksohet.

Për analogji, ju mund të kërkoni dhe studioni fragmente të tjera të kodit.

Shikimi i të gjithë kodit burimor të një faqeje në shumicën e rasteve nuk është shumë i përshtatshëm, kështu që në të gjithë shfletuesit është e mundur të shikoni kodin e një elementi ose fragmenti individual.

Le të përdorim një shembull specifik të shikimit të kodit të një elementi. Për shembull, le të shohim nëse lidhja ka një atribut nofollow. Klikoni me të djathtën në lidhjen që na intereson dhe në menunë e kontekstit rënës, kliko me të majtën mbi artikullin "Shiko kodin e elementit" ose të ngjashme (në varësi të shfletuesit tuaj). Më poshtë, në një dritare të veçantë për analizën e kodit, marrim diçka të ngjashme.

Shohim që kodi i lidhjes përmban rel=”nofollow” . Kjo do të thotë që PR nuk do të "rrjedh" përmes kësaj lidhjeje. Ne do të flasim për këtë më në detaje në artikujt vijues. Tani gjëja e rëndësishme është që ju tani dini se si të shikoni kodin burimor të faqes dhe kodin burimor të një elementi individual.

" I njëjti artikull është gjithashtu në menunë e kontekstit, e cila, nëse klikoni me të djathtën mbi tekstin faqet. Mund të përdorni gjithashtu shkurtoren e tastierës CTRL + U. Mozilla FireFox nuk përdor programe të jashtme - origjinale kodi faqet me theksimin e sintaksës do të hapet në një dritare të veçantë të shfletuesit.

Në Internet Explorer, klikoni në menunë File dhe zgjidhni Edit në Notepad. Në vend të emrit Notepad, mund të shkruhet një emër tjetër, ju e keni caktuar në cilësimet e shfletuesit për të parë origjinalin kodi A. Ne klikim faqet me butonin e djathtë të miut, shfaqet një menu e kontekstit, e cila gjithashtu ka një artikull që ju lejon të hapni burimin kodi faqet në një program të jashtëm - "Shiko HTML- kodi A".

Në shfletuesin Opera, hapni menunë, shkoni te seksioni "Faqja" dhe do të keni mundësinë të zgjidhni "Burimin" në nënseksionin "Mjetet e zhvillimit". kodi"ose artikulli "Origjinal kodi kornizë." Këtyre zgjedhjeve u caktohen përkatësisht tastet kryesore CTRL + U dhe CTRL + SHIFT + U. Në një meny konteksti të lidhur me një klikim faqet kliko me të djathtën, ekziston gjithashtu një artikull "Initial kodi" Burimi i operës faqet në një program të jashtëm që është caktuar në OS ose në cilësimet e shfletuesit për redaktimin e skedarëve HTML.

Shfletuesi Google Chrome pa asnjë dyshim ka organizimin më të mirë për shikimin e origjinalit kodi A. Duke klikuar me të djathtën e miut, mund të zgjidhni View kodi A faqet"dhe më pas kodi burimor me theksimin e sintaksës do të hapet në një skedë të veçantë. Ose mund të zgjidhni rreshtin "Shiko" në të njëjtën meny kodi element” dhe në të njëjtën skedë do të hapen dy korniza shtesë në të cilat mund të inspektoni HTML dhe CSS kodi element faqet. Shfletuesi do t'i përgjigjet kursorit që lëviz nëpër rreshta kodi dhe, duke theksuar elementet në faqe që korrespondojnë me këtë seksion të HTML kodi A.

Shkathtësi ndryshoni kodin burimor të faqes– një aftësi e dobishme për një përdorues të avancuar të internetit. Duke zëvendësuar kodin HTML, ju mund të ndryshoni faqen e hapur të internetit sipas dëshirës tuaj. Në këtë artikull do t'ju tregojmë si të ndryshoni kodin e faqes në Google Chrome. Sidoqoftë, në shfletuesit e tjerë gjithçka bëhet në mënyrë të ngjashme, kështu që nuk duhet të ketë ndonjë vështirësi.

Cili është kodi HTML i faqes?

Çdo faqe që hapni në shfletuesin tuaj ka kodin e vet në gjuhën e shënjimit HTML. Ky kod përfaqëson etiketat dhe tekstin. Etiketat janë etiketa unike që i tregojnë shfletuesit se si të shfaqë këtë ose atë pjesë të faqes. Teksti është përmbajtja e faqes, ajo që shikon përdoruesi. Gjithashtu, stilet CSS mund të lidhen me faqen, të cilat përcaktojnë pamjen e elementeve të faqes. te ndryshoni kodin burimor të faqes ju nuk keni nevojë të njihni plotësisht HTML dhe CSS, dhe së shpejti do ta shihni vetë.

Pse të ndryshoni një faqe në internet?

Mund të ndryshoni të dhënat në sajt, të ndryshoni tekstin e mesazhit ose të bëni një pamje të rreme të ekranit. Ju lutemi vini re se të gjitha ndryshimet janë të dukshme vetëm për ju dhe do të zhduken kur të rifreskoni faqen. Gjithashtu të dhënat e ndryshuara nuk do të jenë reale. Për shembull, nëse nuk kam 10 dollarë dhe i ndryshoj në 100, atëherë nuk do të kem më para. Kjo është vetëm shfaqja e faqes nga shfletuesi. Shembull:

Pas:

Për shembull, unë do të marr të njëjtën faqe dhe do të ndryshoj njoftimin e mëparshëm të artikullit "Hapja e faqes kryesore në Google Chrome. Unë kliko me të djathtën mbi elementin që dua të ndryshoj, për shembull, titullin e njoftimit dhe zgjedh "Shiko kodin".

Në dritaren që hapet, shkoni te skeda Elemente dhe shihni kodin HTML të faqes. Në të duhet të gjejmë tekstin që na intereson. (nënvizuar me të kuqe)

Tani do të fshij tekstin e vjetër dhe do të shkruaj në një të ri.

Kjo është e gjitha, titulli i njoftimit është ndryshuar. Tani do të ndryshoj vetë njoftimin, etiketat dhe kategorinë.

Mund të futni një imazh tjetër duke ndryshuar atributin src në etiketën img.

Probabiliteti për të parë në fillestar kodi ueb faqet, i marrë nga shfletuesi si rezultat i një kërkese drejtuar serverit, është i disponueshëm pothuajse në çdo shfletues të internetit. Qasja në komandën përkatëse është e organizuar përafërsisht në mënyrë identike, por ka dallime të rëndësishme në metodën dhe formën në të cilën fillestari kodi .

Udhëzimet

1. Në shfletuesin Mozilla FireFox, zgjeroni seksionin "Shiko" në meny dhe klikoni "Initial" kodi faqet" I njëjti artikull është gjithashtu në menynë e kontekstit që shfaqet nëse klikoni me të djathtën mbi tekst faqet. Ju gjithashtu mund të përdorni kombinimin e tastit CTRL + U. Mozilla FireFox nuk përdor programe të jashtme - fillestare kodi faqet me theksimin e sintaksës do të hapet në një dritare të veçantë të shfletuesit.

2. Në Internet Explorer, klikoni në menunë File dhe zgjidhni Edit in Notepad. Në vend të emrit Notepad, mund të shkruhet një program tjetër që keni caktuar në cilësimet e shfletuesit për të parë fillestarin kodi A. Ne klikim faqet me butonin e djathtë të miut, shfaqet një meny konteksti, e cila gjithashtu ka një artikull që ju lejon të hapni fillestarin kodi faqet në një program të jashtëm – “Shiko HTML kodi A".

3. Në shfletuesin Opera, hapni menunë, shkoni te seksioni "Faqja" dhe do të keni mundësinë të zgjidhni artikullin "Fillimi" në nënseksionin "Mjetet e zhvillimit". kodi"ose zëri "Inicial kodi kornizë." Tastiet kryesore CTRL + U dhe CTRL + SHIFT + U i janë caktuar përkatësisht kësaj përzgjedhjeje. Në një meny konteksti të lidhur me një klikim faqet kliko me të djathtën, ekziston gjithashtu një artikull "Initial kodi" Opera hap burimin faqet në një program të jashtëm që është caktuar në OS ose në cilësimet e shfletuesit për redaktimin e skedarëve HTML.

4. Shfletuesi Google Chrome pa asnjë dyshim ka organizimin më të mirë për shikimin e fillestarit kodi A. Duke klikuar me të djathtën në faqe, mund të zgjidhni ta shikoni kodi A faqet"dhe më pas kodi burimor me theksimin e sintaksës do të hapet në një skedë të veçantë. Ose mund të preferoni linjën "Shiko" në të njëjtën meny kodi element” dhe shfletuesi në të njëjtën skedë do të hapë dy korniza shtesë në të cilat mund të inspektoni HTML dhe CSS kodiçdo element faqet. Shfletuesi do t'i përgjigjet kursorit që lëviz nëpër rreshta kodi dhe, duke theksuar elementet në faqe që korrespondojnë me këtë seksion të HTML kodi A.

5. Në shfletuesin Apple Safari, zgjeroni seksionin View dhe zgjidhni View HTML kodi A". Në menynë që shfaqet kur klikoni me të djathtën për të hapur faqet, artikulli përkatës quhet "Shiko burimin". Këtij veprimi i caktohen tastet kryesore CTRL + ALT + U. Initial kodi hapet në një dritare të veçantë të shfletuesit.

Nëse hapni ndonjë faqe interneti, ajo do të përmbajë elementë tipikë që nuk ndryshojnë në varësi të llojit dhe fokusit të faqes. Shembulli 4.1 tregon kodin për një dokument të thjeshtë që përmban etiketa bazë.

Shembulli 4.1. Kodi burimor i faqes së internetit

Shembull i faqes në internet

Drejtimi

Paragrafi i parë.

Paragrafi i dytë.

Kopjoni përmbajtjen e këtij shembulli dhe ruajeni në dosjen c:\www\ si shembull41.html. Pas kësaj, hapni shfletuesin dhe hapni skedarin përmes artikullit të menusë Skedari > Hap skedarin (Ctrl+O). Në dialogun e përzgjedhjes së dokumentit, zgjidhni skedarin shembull41.html. Faqja e internetit e paraqitur në Fig. 1 do të hapet në shfletues. 4.1.

Oriz. 4.1. Rezultati i ekzekutimit të shembullit

Elementika për qëllim të tregojë llojin e dokumentit aktual - DTD (përkufizimi i llojit të dokumentit, përshkrimi i llojit të dokumentit). Kjo është e nevojshme në mënyrë që shfletuesi të kuptojë se si të interpretojë faqen aktuale të internetit, sepse HTML ekziston në disa versione, përveç kësaj, ekziston XHTML (Extensible HyperText Markup Language), e cila është e ngjashme me HTML, por ndryshon prej saj në sintaksë. Në mënyrë që shfletuesi "të mos ngatërrohet" dhe të kuptojë se sipas cilit standard duhet të shfaqet uebfaqja, është e nevojshme të vendosni në rreshtin e parë të kodit .

Ka disa lloje, ato ndryshojnë në varësi të versionit të HTML që synojnë. Në tabelë 4.1. Janë dhënë llojet kryesore të dokumenteve me përshkrimet e tyre.

Tabela 4.1. DTD të vlefshme

DOCTYPE	Përshkrim
HTML 4.01
	Sintaksë e rreptë HTML.
	Sintaksa kalimtare HTML.
	Një dokument HTML përdor korniza.
HTML 5
	Ky version i HTML ka vetëm një tip doctype.
XHTML 1.0
	Sintaksë e rreptë XHTML.
	Sintaksa kalimtare XHTML.
	Dokumenti është i shkruar në XHTML dhe përmban korniza.
XHTML 1.1
	Zhvilluesit e XHTML 1.1 presin që ai gradualisht të zëvendësojë HTML. Siç mund ta shihni, ky përkufizim nuk ka ndarje në lloje, pasi sintaksa është e njëjtë dhe i bindet rregullave të qarta.

Dallimi midis një përshkrimi të rreptë dhe atij kalimtar të dokumentit është një qasje e ndryshme për të shkruar kodin e dokumentit. HTML strikte kërkon respektim të rreptë të specifikimeve HTML dhe nuk fal gabime. HTML-ja kalimtare është më e relaksuar për disa gabime të kodit, kështu që ky lloj preferohet të përdoret në raste të caktuara.

Për shembull, në HTML dhe XHTML strikte kërkohet prania e etiketës , dhe në HTML kalimtare mund të hiqet dhe të mos specifikohet. Në të njëjtën kohë, kujtojmë se shfletuesi do ta shfaqë dokumentin në çdo rast, pavarësisht nëse përputhet me sintaksën apo jo. Ky lloj kontrolli kryhet duke përdorur një vërtetues dhe ka për qëllim kryesisht zhvilluesit të gjurmojnë gabimet në dokument.</p> <p>Në të ardhmen do të përdorim kryesisht strikte<!DOCTYPE>, përveç nëse specifikohet ndryshe. Kjo do të na lejojë të shmangim gabimet e zakonshme dhe të na mësojë të shkruajmë kodin e saktë sintaksor.</p> <p>Shpesh mund të gjeni kodin HTML pa përdorur asnjë<!DOCTYPE>, faqja e internetit do të shfaqet ende në këtë rast. Megjithatë, mund të ndodhë që i njëjti dokument të shfaqet ndryshe në shfletues kur përdorni<!DOCTYPE>dhe pa të. Për më tepër, shfletuesit mund të shfaqin dokumente të tilla në mënyrën e tyre, si rezultat faqja "shkërmon", d.m.th. do të shfaqet krejtësisht ndryshe nga ajo që kërkon zhvilluesi. Për të shmangur situata të tilla, gjithmonë shtoni<!DOCTYPE>deri në fillim të dokumentit.</p><p>Etiketë <html>përcakton fillimin e skedarit HTML, titulli ruhet brenda tij ( <head>) dhe trupi i dokumentit ( <body> ).</p><p>Titulli i dokumentit, i quajtur gjithashtu bllok <head>, mund të përmbajë tekst dhe etiketa, por përmbajtja e këtij seksioni nuk shfaqet drejtpërdrejt në faqe, përveç në kontejner <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Etiketë <meta>është universale dhe shton një klasë të tërë aftësish, në veçanti, me ndihmën e meta etiketave, siç quhet përgjithësisht ky etiketë, mund të ndryshoni kodimin e faqes, të shtoni fjalë kyçe, përshkrimin e dokumentit dhe shumë më tepër.</p><p> <title>Shembull i faqes në internet

Etiketë përcakton titullin e një faqe interneti, ky është një nga elementët e rëndësishëm të krijuar për të zgjidhur shumë probleme. Në sistemin operativ Windows, teksti i titullit shfaqet në këndin e sipërm të majtë të dritares së shfletuesit (Figura 4.2).</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>Oriz. 4.2. Pamja e kokës në shfletues</p> <p>Etiketë <title>është i detyrueshëm dhe duhet patjetër të jetë i pranishëm në kodin e dokumentit.</p><p>Duhet të shtoni një etiketë mbyllëse</head> për të treguar që blloku i titullit të dokumentit është i plotë.</p><p>Trupi i dokumentit <body>të destinuara për vendosjen e etiketave dhe përmbajtjes së një faqe interneti.</p><p> <h1>Drejtimi</h1> </p><p>HTML ofron gjashtë tituj tekstesh të niveleve të ndryshme që tregojnë rëndësinë relative të seksionit pas titullit. Po, etiketo <h1>përfaqëson titullin më të rëndësishëm të nivelit të parë dhe etiketën <h6>shërben për të treguar titullin e nivelit të gjashtë dhe është më pak i rëndësishëm. <h1>...<h6>Si parazgjedhje, titulli i nivelit të parë shfaqet me fontin më të madh të shkronjave dhe titujt pasues të nivelit janë më të vegjël në madhësi. Etiketa</p><p>  </p><p>Referojuni elementeve të bllokut, ata gjithmonë fillojnë në një rresht të ri dhe pas tyre, elementë të tjerë shfaqen në rreshtin tjetër. Për më tepër, hapësira e bardhë shtohet para dhe pas titullit.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="post-social-counters-block"> <div style="margin-top: 12px"> <noindex></noindex> </div> </div> </div> </div> <a name="comments"></a> <h3 class="best-theme-posts-title">Disa tekste mund të fshihen nga shfaqja në shfletues duke e bërë atë një koment.</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/sq/kak-otklyuchit-ili-izmenit-graficheskii-klyuch-na-android-luchshie-sposoby.html"> <div class="img_container"><img src="/uploads/3fce4f1373e86fa6311bad2a01e7700b.jpg" border="0" alt="Megjithëse ky tekst nuk do të shihet nga përdoruesi, ai përsëri do të transmetohet në dokument, kështu që nëse shikoni kodin burimor, mund të zbuloni shënime të fshehura." width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Megjithëse ky tekst nuk do të shihet nga përdoruesi, ai përsëri do të transmetohet në dokument, kështu që nëse shikoni kodin burimor, mund të zbuloni shënime të fshehura.</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/sq/tesla-samozaryazhayushchayasya-elektro-zazhigalka-kotoraya-rabotaet-vezde-i.html"> <div class="img_container"><img src="/uploads/1e2c1b76a6efa04955ced0da2d4fb703.jpg" border="0" alt="Artikujt më të mirë mbi këtë temë" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Artikujt më të mirë mbi këtë temë</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/sq/skachat-programmu-dlya-arhivirovaniya-failov-programmy-dlya-windows-kak.html"> <div class="img_container"><img src="/uploads/4f34eb9922fda442afe428d0d89eccc3.jpg" border="0" alt="Si të hiqni një model nga Android: një përmbledhje e metodave të provuara Menaxhimi i shiritit të statusit" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Si të hiqni një model nga Android: një përmbledhje e metodave të provuara Menaxhimi i shiritit të statusit</span> </a> </div> </div> </div> </div> <a name="comments"></a> </div> <div class="right-column col-sm-4 col-md-4"> <div class="write"> <span class="tags-title">Tesla: një çakmak elektrik vetë-karikues që funksionon kudo dhe kudo Si funksionon</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="https://bumotors.ru/sq/category/programs/">Shkarkoni programin për arkivimin e skedarëve</a></li> <li class=""><a href="https://bumotors.ru/sq/category/safety/">Kategoritë:</a></li> <li class=""><a href="https://bumotors.ru/sq/category/windows-10/">Programet</a></li> <li class=""><a href="https://bumotors.ru/sq/category/iron/">Siguria</a></li> <li class=""><a href="https://bumotors.ru/sq/category/windows-8/">Windows 10</a></li> <li class=""><a href="https://bumotors.ru/sq/category/vkontakte/">Hekuri</a></li> <li class=""><a href="https://bumotors.ru/sq/category/errors/">Windows 8</a></li> </ul> </div> <div class="banner"> </div> </div> </div> </div> <div style="clear:both"></div> </div> <div class="footer"> <div class="subscribe"> <div class="main-wrapper container"> <div class="row"> <div class="col-sm-8"> </div> <div class="col-sm-4"> <div class="social"> <a href="https://vk.com/share.php?url=https://bumotors.ru/ishodnyi-kod-stranicy-onlain-google-chrome-instrumenty-dlya-web-mastera.html" class="vk social-ico"></a> <a href="https://www.facebook.com/sharer/sharer.php?u=https://bumotors.ru/ishodnyi-kod-stranicy-onlain-google-chrome-instrumenty-dlya-web-mastera.html" class="fb social-ico"></a> <a href="https://www.twitter.com/share?url=https%3A%2F%2Fbumotors.ru%2Fsq%2Fishodnyi-kod-stranicy-onlain-google-chrome-instrumenty-dlya-web-mastera.html" class="tw social-ico"></a> </div> </div> </div> </div> </div> <div class="info"> <div class="main-wrapper container"> <div class="row"> <span class="footer-info col-xs-12">Në kontakt me</span> </div> </div> </div> </div> </body> </html>