Hur man hittar sidkoden. Hur man visar sidans källkod och elementkod

För det första verkar det för vissa att detta inte är ett nödvändigt verktyg alls, men att se hela HTML-koden på webbplatsen är bra för att hitta de nödvändiga elementen i koden, det kan vara länkar, taggar, metataggar, attribut och andra element.

Snabbkombination + öppna sökrutan, i Chrome-webbläsaren visas den längst upp till höger:

Figur 3. Sök efter webbplatskod

När du har angett en fråga i sökformuläret flyttas skärmen till det först hittade elementet, med hjälp av pilarna kan du navigera mellan dem och välja önskad:

Figur 4. Sök med HTML-kod på webbplatsen

Instruktion 2: hur man visar och redigerar HTML- och CSS-koden på webbplatsen i webbläsaren Google Chrome

Nu för den viktigaste delen, där jag visar dig hur du kan redigera HTML och CSS på en webbplats i en webbläsare. överför sedan ändringarna till webbläsaren.

Ett sådant användbart verktyg är alltid tillgängligt i din webbläsare, experimentera med andra kommandon som gör det lättare för dig att redigera webbplatsen.

Oavsett om du gillar det eller inte måste du förr eller senare krypa in i dina WordPress-filer och redigera dem efter dina behov. Det finns också möjlighet att anställa programmerare, men varje sådan begäran kostar dig pengar, i de flesta fall anständiga pengar för enkelt arbete som tar lite tid. För att spara dina pengar, som kan användas till att marknadsföra din webbplats, och inte till en programmerare, kommer jag att lära dig hur du snabbt hittar de nödvändiga kodavsnitten i plugin- eller temafiler.

Vad är en snabb sökning efter php, CSS, html-filer för?

De flesta av er, när du har vänt dig till den här artikeln, vet redan varför de behöver en sådan funktion, söker igenom alla filer samtidigt, men om du kom till domstolen av en slump så ger jag dig typiska exempel som passar detta ämne.

Du kan behöva hitta:

• Klasser. När du bestämmer dig för att fixa en viss klass eller konfigurera den annorlunda måste du hitta den plats där den används. Det kommer att vara CSS-filer eller andra.
• Redigeringsfunktioner. Om du bestämmer dig för att fixa någon funktion kan du hitta den perfekt i funktionsfilerna, men då måste du bestämma var den ska kallas i andra filer.
• Rengöring av ämnet från. Det är inte oviktigt att minska antalet databasfrågor, varav WordPress genererar ett mycket stort antal, genom att t.ex. ringa inbyggda funktioner .

Alla andra problem som du har med att hitta objekt i en okänd fil kommer att lösas av guiden nedan.

Hur söker jag efter kodfragment i filer?

För att komma igång måste vi ladda ner och installera den snabba och användbara Notepad ++ -redigeraren, som kan laddas ner från den här länken.

Efter installationen, gå in i redigeraren och öppna de filer vi behöver, jag tar Twenty Fourteen temafiler, du kan använda dina egna.

För att öppna alla temafiler måste du markera dem alla och dra dem till redigeringsfönstret.

Filerna har överförts, i allmänhet kunde vi inte ha gjort det, men i framtiden blir det snabbare att redigera dem.

Filer i redigeraren? Bra, nu tar vi upp sökrutan genom att trycka på knapparna Skift + Ctrl + F, vi öppnar följande:

I exemplet angav jag klassens namn, för att ange författarens märkning i publikationer kan detta behövas när du skapar dubbla sidor.

I fältet "Mapp" anger du mappen med temat där våra filer finns. Klicka därefter på knappen "Hitta alla".

Om du anger parametern korrekt, längst ned på skärmen ser du en lista med filer där denna klass används och kodrader för snabb sökning.

I mitt fall är detta två filer som finns på den adress som anges i grönt. Själva klassen är markerad i rött, vilket kan hittas med hjälp av horisontell rullning.

När du har bestämt filkatalogen och raden där parametern används kan du fortsätta redigera.

För tydlighetens skull kommer vi också att definiera en "malign" tagg bloginfo, när de anropas skapas frågor till databasen.

Du kommer troligen att bli förvånad över antalet samtal till den här funktionen, som lätt kan göras statisk utan att sakta ner motorn.

Och att minst åtta samtal till databasen, från varje sidladdning, kan varje användare undvikas om du korrigerar mallkoden korrekt.

Om du har några problem, skriv i kommentarerna, vi kommer att försöka hjälpa, eller om du vet ett snabbare sätt att söka efter nödvändig information i filerna, kommer jag också att bekanta mig med nöje.

Ctrl + U

Hur kan jag se källkoden för ett objekt?

Högerklicka på intresseelementet på sidan.

Google Chrome: "Visa artikelkod"

Opera: "Inspektera elementet"

FireFox: "Analysera element"

Leta efter ett liknande menyalternativ i andra webbläsare.

Hej alla!

Speciellt i början av artikeln lade jag fram hela poängen för dem som letar efter ett snabbt svar.

Denna information kan vara känd för många, men eftersom jag skriver för nybörjare bloggare, webbprogrammerare och andra prospektorer måste den här hjälpartikeln finnas.

I framtiden kommer du definitivt att studera källkoden för sidor och enskilda element.

Låt oss titta på ett konkret exempel på hur du kan använda sidkällvyn.

Vi vill till exempel se vilka nyckelord som används för en viss sida. Vi går till den webbsida vi är intresserad av och trycker på Ctrl + U. Källkoden för denna sida öppnas i ett separat fönster eller i en separat flik. Tryck på Ctrl + F för att hitta en kod. I det här fallet skriver vi ordet ”i sökrutan nyckelord ".Du omdirigeras automatiskt till ett kodavsnitt med denna metatagg och markerar sökordet.

Analogt kan du söka och studera andra kodbitar.

Att visa hela källkoden på en sida är i de flesta fall inte särskilt bekväm, så i alla webbläsare är det möjligt att se koden för ett enskilt element eller fragment.

Låt oss använda ett specifikt exempel för att visa elementkoden. Låt oss till exempel se om länken har ett nofollow-attribut. Högerklicka på länken av intresse för oss och vänsterklicka på objektet i rullgardinsmenyn "Visa artikelkod" eller liknande (beroende på din webbläsare). Nedan, i ett speciellt fönster för kodanalys, får vi något liknande.

Vi kan se att rel \u003d "nofollow" finns i länkkoden. Detta innebär att den här länken inte kommer att "läcka" och PR. Vi kommer att prata mer om detta i följande artiklar. Det som är viktigt nu är att du nu vet hur du visar källkoden för sidan och källkoden för ett enskilt element.

Med tiden har nybörjare webbansvariga en naturlig fråga, hur man ändrar färg, stil för skrivrubriker, lägger till volym och gör teckensnittet för samma rubriker större. Många nybörjare är förvirrade av detta, eftersom det inte är klart vad och var de ska titta.

Naturligtvis kan du göra en djupgående undersökning av alla dessa finesser av byggnad av webbplatser, men även om det fortfarande inte finns några framtidsutsikter i horisonten, blir det en naturlig fråga till, behöver du det?

Det tar en anständig tid att behärska grunderna för webbansvar. Och tid är pengar. Därför, om du behöver mindre justeringar av vissa delar av mallen och inte vet hur du hittar den HTML-kod som krävs oavsett webbplatsplattform, är den här artikeln något för dig.

HTML och CSS - Förhållande

I själva verket bör temat kallas ungefär som: "Hur man redigerar CSS-koden." Okej, vi börjar med HTML och slutar med CSS. Saken är att om du behöver ändra färg, teckensnitt på webbplatsen, leder brödsmulor till CSS-filer.

Låt oss först definiera dessa två begrepp:

- HTML-kod är grunden för att webbplatsen skapas. Det är tack vare honom att webbläsaren förstår vilka element och i vilken ordning som ska visas på den här eller den sidan.

- CSS-kod är ett programmeringsspråk som ansvarar för utseendet på webbsidor. Det är den här koden som måste kunna redigeras om du behöver ändra webbplatsens utseende.

Det blir uppenbart att om du behöver ändra, till exempel, färg på titeln i en artikel eller i menyalternativ, så måste en av CSS-filerna redigeras. Detta är vad du behöver förstå i början av att göra ändringar själv.

Var är html-koden på sidan

Jag kommer inte att dölja det faktum att jag i början av min bekantskap med principerna för platsbyggnad inte var som en tekanna, jag var en riktig rostig samovar. Därför kommer du, precis som jag, definitivt att lyckas.

Och så, när du återgår till ämnet för att ändra sidkoden måste du först titta på html-koden. Jag kommer att använda Opera-webbläsaren som ett exempel, eftersom jag huvudsakligen arbetar med den. Jag skyndar mig att meddela dig att om du föredrar att använda en annan webbläsare bör du inte omedelbart stänga den här sidan, eftersom verifieringsprincipen oavsett webbläsare är nästan identisk.

Hur man ändrar rubrikstil

I en av de tidigare artiklarna sa jag, "Hur tar jag bort länken från titeln på Joomla", och idag lär du dig hur du fixar det hela och gör det mer attraktivt.
Låt oss säga att vi måste ändra artikelns titelfärg och storlek. För att göra detta, klicka på den med vänster musknapp och välj "Visa elementkod" i fönstret som öppnas. Sedan, till vänster på skärmen, kommer fantastiska hieroglyfer att visas, med hjälp av vilka vi kommer att avgöra var hunden är begravd. På detta sätt kan du se och korrigera praktiskt varje mallelement.

Högst upp har jag markerat HTML-koden som är ansvarig för att visa h1-rubriken. Som standard är den markerad med en grå bakgrund när den är markerad. Okej, det är bara för allmän information. Vi måste också vara uppmärksamma på den nedre delen av skärmdumpen, där de skript som är ansvariga för återgivning av CSS-stilar finns. Jag vill varna dig omedelbart att namnet på CSS-filen, beroende på mallen, kan skilja sig, men som regel är det style.css eller template.css.

Och så bestämde vi oss för filen, men hur vet vi var den är? Det är enkelt, du måste hålla muspekaren över ordet style.css på höger sida, varefter filvägen visas bredvid den. Samtidigt kommer också linjen som vi behöver korrigera att anges här. Som du kan se på bilden är detta första raden.

En viktig punkt! Innan du gör ändringar, gör en säkerhetskopia av webbplatsen, så att säga för varje brandman

Vissa CSS-egenskaper

Nedan följer några egenskaper som du kan använda för att göra specifika ändringar och experimentera med stilar.

Teckenstorlek - ändra storleken på texten.

Textdekoration - beroende på kommando inkluderar detta genomstrykning och understrykning av text, samt markering med rader.

Font-family - font-familj.

Font-vikt - val.

Färg - färgen på texten.

Rensa webbläsarens cache om inget har ändrats efter justeringen. Som du kan se, för att ändra utseendet på rubriker och uppdatera webbplatsens design, behöver du bara justera css-koden och inte ändra html-koden.

Tack för din uppmärksamhet och vi ses snart på Stimylrosta-sidorna.

Hittade ett grammatikfel i texten? Vänligen informera administratören om detta: markera texten och tryck på snabbtangentkombinationen Ctrl + Enter

Vi har släppt en ny bok "Content Marketing on Social Media: How to get into the Heads of Subscriberers and Fall in Love with Your Brand."

Källkoden för en webbplats är en samling av HTML-markering, CSS-stilar och JavaScript som webbläsaren får från webbservern.

Fler videor på vår kanal - lär dig internetmarknadsföring med SEMANTICA

Det kan jämföras med en uppsättning kommandon som ges till soldater av befälhavaren. Tänk dig att publiken inte kan se eller höra chefen. Ur deras synvinkel utför militären självständigt åtgärder. I vårt fall är befälhavaren webbläsaren, kommandona är källkoden och de marscherande soldaterna är slutresultatet.

Webbplatsen lagras på en webbserver som skickar sidan på användarens begäran. En begäran är att skriva en URL i ett adressfält, klicka på en länk eller klicka på en skicka-knapp i ett formulär. Det spelar ingen roll vilket språk webbsidorna är skrivna på, om de innehåller kod. Slutresultatet för alla algoritmer på serversidan är en uppsättning html-taggar och text.
Källkoden för en sida är en dataset som innehåller:

• hTML-markering;
• stilark eller fillänk;
• program skrivna i JavaScript eller länkar till filer med kod.

Dessa tre avsnitt hanteras av webbläsaren. För servern är detta helt enkelt text som måste skickas som svar på en begäran.

Varför vi kan behöva studera källkoden

Allt vi ser kan vi analysera och använda för att lösa vissa problem som uppstår under arbetet med webbplatsen, särskilt när vi optimerar den. Genom att titta på källkoden kan vi:

• Se metataggarna för din egen eller någon annans webbplats för att analysera dem.
• Se närvaron eller frånvaron av vissa element på webbplatsen: räknare, identifieringskoder i olika system, vissa skript och mer.
• Ta reda på parametrarna för elementen: storlekar, färger, teckensnitt.
• Hitta vägen till foton och andra objekt på sidan.
• Utforska länkar från sidan.
• Hitta problem med koden som stör processen för webbplatsoptimering: stilar, skript, ogiltig kod ingår inte i separata filer.

Det här är grundläggande funktioner, men faktiskt kan du lära dig mycket mer om sidan att läsa koden.

Så här visar du källkoden för webbplatsen

Helt i den form som den publiceras på servern kan detta inte göras från webbläsaren. Men du kan se all markering genom att högerklicka på sidan. Härefter med exemplet Google Chrome.

Vi väljer alternativet "Visa sidkod" och får hela listan i en separat flik.

Det är bara text som måste analyseras för att förstå. Men du kan få interaktiv kod med hjälp av utvecklarverktyg.

Så här hittar du källkoden för en webbplats

Klicka på menyikonen i webbläsaren. Oftast är det till höger och ser ut som tre prickar eller ränder.

I avsnittet med ytterligare verktyg väljer du "Utvecklarverktyg".

Ett fönster öppnas som visar det aktiva tillståndet för koden. Detta innebär att när du klickar på markeringen visas elementstilen bredvid den och de valda blocken markeras på sidan.

På fliken "Källa" kan du visa innehållet i vissa filer: skript, teckensnitt, bilder.

Kontroll av webbplatscertifikatet finns på fliken "Säkerhet".

Fliken "Granskningar" hjälper till att kontrollera den resurs som läggs upp på webbhotellet.

Om panelen till höger är obekväm kan du klicka på tre punkter och ändra den genom att välja önskat objekt.

Hur man visar metataggar

Varje html-dokument innehåller strukturtaggar. Här är några av dem:

1. HTML - hela dokumentet.
2. Head - sektion för servicehuvuden.
3. Titel - sidtitel (visas på fliken).
4. Kropp - dokumentets kropp.
5. H1-H6 - sidhuvudets sidtext.
6. Artikel - artikel.
7. Avsnitt - avsnitt.
8. Meny - meny.
9. Div-block.
10. Span är en sträng.
11. P - stycke.
12. Tabell - ett bord.

Element är avsedda för logisk avgränsning av avsnitt på sidan; vid behov är de utformade. De innehåller text som på något sätt syns på sidan. Men Head-taggen innehåller serviceinformation. Metataggar används för att indikera det. Allt som står i dem är avsett för servern och sökmotorerna.

Deras innehåll kan inte kännas igen på något annat sätt.

Låt oss vara uppmärksamma på länktaggen. Det ger länkar till externa inkluderingsfiler. Om så önskas kan du se innehållet och spara på disken. För att göra detta, håll pekaren över adressen och tryck på RMB. Välj "Öppna i ny flik".

Den angivna filen öppnas i en ny flik och kan visas eller sparas.

Hur man visar källkoden för en sida för felsökning av ett skript

I det här fallet är det bekvämast att öppna sidan på den lokala maskinen. Om du bara behöver fixa markeringen, stilar och skript kan du göra det direkt från mappen. HTML-koden visas på samma sätt. Men JavaScript-kodfel kan ses på fliken "Konsol". Den visar en beskrivning av felet och radnumret där det inträffade.

Syntaxen kan ses direkt i koden. Fliken "Källa" är avsedd för detta.

Hur man ser koden för ett visst objekt

För stora sidor med många element är det svårt att hitta koden du vill ha i all markering. I det här fallet använder du det speciella kommandot i snabbmenyn. Håll musen över fragmentet och tryck på RMB. Låt oss välja kommandot "Visa kod".

Samma fönster öppnas, men med fokus på det valda objektet.

Sammanfattning

Vi berättade vad sidkällkoden är. Det räcker att behärska grundläggande kunskaper om HTML och CSS, och med hjälp av praktiska utvecklarverktyg kommer du att kunna felsöka dina egna html-dokument.

Att visa resurskod på Internet gör att du kan lära dig inte bara av din egen erfarenhet utan också använda verkliga exempel. Och för seospecialister kommer metataggar att vara användbara, vars information kan säga mycket om webbplatsen.