In eerste instantie denken sommigen misschien dat dit helemaal geen noodzakelijk hulpmiddel is, maar het bekijken van de volledige HTML-code van een site is geweldig om de benodigde elementen in de code te vinden. Dit kunnen links, tags, metatags, attributen en andere elementen zijn. .

Sneltoetscombinatie +open het zoekvenster, in de Chrome-browser verschijnt dit rechtsboven:

Figuur 3. Zoeken op sitecode

Nadat u een verzoek in het zoekformulier heeft ingevoerd, gaat het scherm naar het eerste gevonden element. Met behulp van de pijlen kunt u ertussen bewegen en het gewenste element selecteren:

Figuur 4. Zoeken op HTML-sitecode

Instructie 2: hoe u HTML- en CSS-code van een site bekijkt en bewerkt in de Google Chrome-browser

Nu het belangrijkste deel, waarin ik laat zien hoe je de HTML- en CSS-code van een website in een browser kunt bewerken. breng vervolgens de wijzigingen over naar de browser.

Dit handige hulpmiddel is altijd beschikbaar in uw browser; experimenteer met andere opdrachten waarmee u uw site gemakkelijker kunt bewerken.

De grootte en kleur van enkele belangrijke elementen van de blog, zoals de titel van de blog of het bericht, hoe meer tags en dergelijke. Ik zocht handmatig naar de benodigde code, experimenterend met het testdomein, op basis waarvan later het artikel werd geschreven.

En onlangs moest ik de kleur van links veranderen. Nadat ik een heleboel literatuur over dit onderwerp had doorgenomen, realiseerde ik me iets eenvoudigs: iedereen geeft voorbeelden uit zijn eigen sjablonen, maar we hebben allemaal verschillende sjablonen en het is goed als de code uit het voorbeeld op zijn minst een beetje vergelijkbaar is: zonder te zeuren, Ik zal het nog steeds vinden door te zoeken - met behulp van de methode porren.

Het nummer werkte niet met de linkcode. Iedereen wees totaal verschillende paden aan. Ik vroeg me af of er een eenvoudig en nauwkeurig hulpmiddel bestond, hoe u op elke website de vereiste html-code kunt vinden. Veel bloggers hebben, zelfs met ervaring, moeite met kleine aanpassingen aan de sjabloon. Daar is niets mis mee, want iedereen heeft zijn eigen interesses en doelen bij het maken van een website.

Als u kleine wijzigingen in de sjabloon wilt aanbrengen, b.v. verander kopteksten, namen van artikelen en secties, kleur en grootte van lettertypen en links, Meestal is het voldoende om het eenvoudige principe te leren dat in dit artikel wordt besproken. Maar er zijn ook complexe gevallen die een diepere studie van html en css vereisen, of de hulp van een specialist.

Op een dag vroeg een kennis me waar ik de kleur van het categoriepaneel in zijn sjabloon kon veranderen. Een onderwerp geüpload naar een testsubdomein. De instellingen voor dit element werden niet opgeslagen in style.css, maar in een ander bestand, zodat iemand het niet kon vinden.

Hoe u de HTML- en CSS-code van een site kunt vinden en wijzigen

Als je niet van lange artikelen houdt, dan is dit iets voor jou aan het einde van het artikel een video-tutorial waarin wordt uitgelegd hoe u de html-code van de website kunt bekijken met Notepad++ en hoe u wijzigingen kunt aanbrengen in het ontwerp van een sjabloon, aan de hand van een voorbeeld van hoe u de kleur van het lettertype kunt wijzigen. In de video zijn er nog andere subtiliteiten bij het omgaan met een blog. En voor degenen die dichter bij de tekst staan ​​en deze beter begrijpen, vindt u hieronder een gedetailleerde analyse van het onderwerp met schermafbeeldingen.
http://youtu.be/uIlVvwCt2ho

Termen en concepten

Het zou juister zijn om het artikel te titelen “ Hoe CSS-code te vinden“, maar ik besloot voor de “verkeerde” naam te gaan, omdat het antwoord op deze vraag feitelijk in html te vinden is. CSS en HTML zijn heel verschillende dingen, ook al zijn ze twee delen van hetzelfde systeem. Er zijn veel technische artikelen op internet, hier is het voldoende om te begrijpen dat:

• HTML— is verantwoordelijk voor de structuur van de site (wat volgt op wat, in welke volgorde, enz.). Dit is de basis waarop de site is gemaakt. Als we het vergelijken met een huis, dan is dit de indeling, de indeling van de kamers.
• CSS— is verantwoordelijk voor het ontwerp (welke lettertypen, maten, kleuren etc.). Dit is de algemene stijl van het huis en de stijl van de individuele kamers: wat voor soort behang zal er zijn, lampen, gordijnen, meubels. Daarom het document waarin staat CSS-codes, genaamd "stylesheet"

En als u zich afvraagt ​​hoe u bijvoorbeeld de kleur van de sitetitel, de lettergrootte in de teksten of de kleur van de kopteksten in de zijbalk kunt wijzigen, dan moet u dit allemaal zoeken in het CSS-stijlblad. Dit is het enige dat de moeite waard is om eerst te begrijpen, zodat u zelf wijzigingen in de code kunt aanbrengen.

Ik houd ervan om het complexe eenvoudig te maken. Ik herinner me dat ik lang geleden, toen ik mijn eerste auto had, heel oud was, de bedrading verrot was, zekeringen vaak kapot gingen, en elke keer dat ik hem naar het benzinestation sleepte. Stel je voor hoeveel geld er werd verspild, ondanks het feit dat het zelf vervangen ervan centen kost.

Op een dag keek ik naar wat de meester precies doet. Ik weet nog steeds niet hoe de zekering werkt. Maar ik weet waar ik het moet veranderen). Ik zou de motor niet zelf repareren en het vervangen van de zekering is niet moeilijk. Hetzelfde geldt voor websites.

Als je geen programmeur wilt worden, hoef je geen diepgaande kennis van programmeren te hebben. Het is voldoende duidelijk om te begrijpen wat waarvoor bedoeld is, waar je het moet zoeken en hoe je het kunt veranderen. Het is beter om zelf te veranderen wat je kunt en al het andere aan specialisten over te laten. Het artikel over heeft een nuttige link over dit onderwerp.

Moet je overal een expert in zijn?

Er zijn vaak discussies op SEO-blogs over de vraag of een beginner een diep begrip van HTML moet hebben, of nog beter, moet leren hoe hij zelf websites moet schrijven, zodat alles uniek is. Nou, ik weet het niet, ieder zijn eigen, en hier is wat dichter bij wie dichter is. Ik ben wat meer geïnteresseerd, dus ik leer nu meer van Vladimir. In november van dit jaar opende Vladimir zijn eigen blog. Zijn blog is gemaakt op basis van het eenvoudigste, gratis sjabloon, hij heeft het slechts een klein beetje aangepast aan zijn wensen.

Na 10 dagen bestaan ​​​​bezette de blog de 104e plaats in de ranglijst van alle Runet-sites met een verkeer van ongeveer 1,5 duizend mensen per dag. Over 10 dagen. Dus wat is er aan de hand? Vladimir is goed thuis in HTML en kan een uniek sjabloon bestellen en kopen. Dat moet je dus begrijpen Het geheim ligt niet in de sjablonen, maar in het nut van de informatie.

Waar is de html-code verborgen?

Sorry voor de uitweiding, laten we terugkeren naar onze codes). Stel dat u de letterkleur van uw blogtitel wilt wijzigen. Laten we eens kijken naar het voorbeeld van mijn testsite.

1. Open de site in de Google Chrome-browser (als je het nog niet gebruikt, installeer het dan - het is goed ontworpen voor het werken met websites, het heeft veel ingebouwde tools).
2. We verplaatsen de muiscursor over het element dat we gaan wijzigen . In dit geval - de naam van de blog. We klikken er met de rechtermuisknop op en in het venster dat verschijnt, selecteren we ELEMENTCODE BEKIJKEN.

BELANGRIJK: verwar dit niet met HET BEKIJKEN VAN DE PAGINACODE! We hebben nu niet de hele pagina nodig, alleen een afzonderlijk element.

Klik erop - er verschijnt een venster voor het bekijken van de code onderaan de browser:

De coderegel die we wijzigen, is rood gemarkeerd.

Maar het blauw gemarkeerde gebied bevat wat we zoeken. Hier kunt u de exacte (niet bij benadering) coderegel vinden die verantwoordelijk is voor lettertypen, kleur, grootte, markering, enz. Op deze manier kunt u ELKE code van elk element van elk sjabloon achterhalen.

Zoek de gewenste regel in het blauw gemarkeerde blok. Aan de rechterkant bevindt zich een schuifregelaar, u kunt er doorheen scrollen en de regel vinden die u nodig heeft.

Algemeen principe van waar je dingen moet zoeken:

Lettertypenaam - in de FONT FAMILY-regel

Lettergrootte - in de regel FONT SIZE

Tekstkleur - in de COLOR-regel

Hier zijn drie hoofdregels waarin de naam, grootte en letterkleur van elk element veranderen. Rechts in de stijl css-regel wordt de positie van de regel in het document weergegeven. Als u een ander element moet wijzigen (u moet bijvoorbeeld weten waar de lijn is waar u de kleur van de menubalk of de kleur van links kunt wijzigen), dan gebeurt alles precies hetzelfde.

AANDACHT:

De lijn die we gaan kopiëren is in de figuur rood gemarkeerd,

zodat u deze later in het stijlblad kunt terugvinden.

4. Kopieer de regel. Omdat we in dit voorbeeld de kleur van de sitenaam willen wijzigen, kopieer ik de lijn die is gemarkeerd in de rode rechthoek in de tweede afbeelding. In mijn sjabloon is het verantwoordelijk voor het wijzigen van de kleur van de sitetitel:

#header h1 a, #header h1 a: bezocht (

Zoek de gewenste regel in het bestand “style sheet (style.css)”. Dit gebeurt al in het beheerdersdashboard. Ik vraag met klem dat, hoewel er geen vertrouwen en volledig begrip is, alle experimenten moeten worden uitgevoerd op een testsubdomein om .

Ga dus naar het beheerderspaneel: CONSOLE - UITERLIJK - EDITOR. In de rechterzijbalk vinden we het bestand STYLE TABLE (STYLE.CSS), open het.

Open nu de zoekregel met behulp van de CTRL + F-toetsen: er verschijnt een leeg lijnvenster in het bovenste venster. We plakken erin de regel die we in stap 4 hebben gekopieerd.

En u zult zien hoe deze regel wordt gemarkeerd in het stijlblad (in het oranje op de afbeelding):

We brengen een wijziging aan in het element. In ons geval veranderen we de kleur van het lettertype, dus vervangen we in de COLOR-regel een andere waarde: de gewenste kleur. In het voorbeeld is de kleur zwart, de betekenis is:

U kunt een kleur selecteren in elke webkleurenpaletservice: typ 'Webkleurenpalet' in een zoekmachine en selecteer de gewenste kleur. We selecteren een kleur, kopiëren de digitale waarde ervan en vervangen deze zorgvuldig door de oude. waarna we op BESTAND UPDATEN klikken en kijken wat er is gebeurd.

Als de wijzigingen niet worden weergegeven, ga dan het afgelopen uur opnieuw naar de pagina - deze keer zou alles moeten worden weergegeven.

Het kost veel tijd om het te beschrijven, maar in de praktijk wordt alles snel gedaan, vooral als de eerste vaardigheid verschijnt.

Meer gedetailleerd hoe u bepaalde elementen kunt wijzigen:

Dat is alles voor vandaag, ik zal u niet meer lastig vallen met codes. Ik hoop dat je nu zelf elk element van de html-code, of liever de CSS-code, gemakkelijk kunt vinden en wijzigen - mogen de experts mij vergeven dat ik het heb vereenvoudigd. En als je er niet uitkomt, bezoek dan nog steeds de pagina. Verspil je tijd niet aan onzin.

Ik stel voor om de video van Artem Abramovich te bekijken over hoe je elk woord of element in elk thema/sjabloon, voor elke engine (wordpress, joomla, etc.) kunt zoeken en vinden en het kunt vervangen door wat je nodig hebt:

Deel alsjeblieft als je het leuk vond:

Mogelijk bent u ook geïnteresseerd in het volgende:

We hebben een nieuw boek uitgebracht, Social Media Content Marketing: hoe u in de hoofden van uw volgers kunt kruipen en ze verliefd kunt maken op uw merk.

De broncode van een site is een verzameling HTML-opmaak, CSS-stijlen en JavaScript-scripts die de browser van de webserver ontvangt.

Meer video's op ons kanaal - leer internetmarketing met SEMANTICA

Het kan worden vergeleken met een reeks bevelen die door een commandant aan soldaten worden gegeven. Stel je voor dat het publiek de baas niet ziet of hoort. Vanuit hun oogpunt voert het leger zelfstandig acties uit. In ons geval is de commandant de browser, zijn de commando's de broncode en zijn de marcherende soldaten het eindresultaat.

De site wordt opgeslagen op een webserver, die de pagina op verzoek van de gebruiker verzendt. Een verzoek is het typen van een URL in de adresbalk, het klikken op een link of het klikken op een verzendknop op een formulier. Het maakt niet uit in welke taal de webpagina’s zijn geschreven en of ze een softwarecomponent bevatten. Het eindresultaat van elk server-side algoritme is een set HTML-tags en tekst.
De paginabroncode is een set gegevens die het volgende omvat:

• html-opmaak;
• stylesheet of bestandslink;
• programma's geschreven in JavaScript of links naar bestanden met code.

Deze drie secties worden door de browser verwerkt. Voor de server is dit simpelweg de tekst die moet worden verzonden als reactie op het verzoek.

Waarom we misschien de broncode moeten bestuderen

Alles wat we zien, kunnen we analyseren en toepassen om bepaalde problemen op te lossen die zich voordoen tijdens het werken met de site, vooral bij het optimaliseren ervan. Door naar de broncode te kijken, kunnen we:

• Bekijk de metatags van uw site of die van iemand anders om deze te analyseren.
• Zie de aan- of afwezigheid van bepaalde elementen op de site: tellers, identificatiecodes in verschillende systemen, bepaalde scripts en andere zaken.
• Ontdek de parameters van de elementen: maten, kleuren, lettertypen.
• Vind het pad naar foto's en andere elementen op de pagina.
• Verken links op de pagina.
• Vind problemen met de code die het proces van website-optimalisatie verstoren: stijlen die niet in afzonderlijke bestanden zijn geplaatst, scripts, ongeldige code.

Dit zijn de basisfuncties, maar door de code te kunnen lezen, kun je in feite veel meer over de pagina te weten komen.

Hoe u de broncode van een site kunt bekijken

Het zal niet mogelijk zijn om dit volledig te doen in de vorm waarin het vanuit de browser op de server wordt geplaatst. Maar u kunt alle markeringen zien door met de rechtermuisknop op de pagina te klikken. Hier en hieronder gebruik ik Google Chrome als voorbeeld.

Selecteer de optie ‘Paginacode bekijken’ en bekijk de volledige lijst op een apart tabblad.

Het is gewoon tekst die je moet analyseren om te begrijpen. Maar u kunt interactieve code verkrijgen met behulp van de ontwikkelaarstools.

Hoe u de broncode van een websitepagina kunt vinden

Klik op het menupictogram in de browser. Meestal bevindt het zich aan de rechterkant en ziet het eruit als drie stippen of strepen.

Selecteer in het gedeelte met aanvullende tools de optie 'Hulpprogramma's voor ontwikkelaars'.

Er wordt een venster geopend met de actieve status van de code. Dit betekent dat wanneer u op de markering klikt, de elementstijl ernaast verschijnt en de geselecteerde blokken op de pagina worden gemarkeerd.

Op het tabblad “Bron” kunt u de inhoud van sommige bestanden bekijken: scripts, lettertypen, afbeeldingen.

Op het tabblad ‘Beveiliging’ kunt u het certificaat van de site controleren.

Op het tabblad ‘Audits’ kunt u de bron controleren die op de hosting is geplaatst.

Als de locatie van het paneel aan de rechterkant lastig is, kunt u op de drie stippen klikken en deze wijzigen door het gewenste item te selecteren.

Hoe u metatags kunt bekijken

Elk HTML-document bevat structuurtags. Hier zijn er enkele:

1. Html – het hele document.
2. Hoofd – sectie van serviceheaders.
3. Titel – paginatitel (weergegeven op het tabblad).
4. Hoofdtekst – de hoofdtekst van het document.
5. H1-H6 – paginatekstkoppen.
6. Artikel – artikel.
7. Sectie - sectie.
8. Menu – menu.
9. Div – blok.
10. Spanwijdte – snaar.
11. P – paragraaf.
12. Tafel – tafel.

Elementen zijn ontworpen om secties op een pagina logisch af te bakenen; ze zijn ontworpen met behulp van stijlen. Ze bevatten tekst die op de een of andere manier zichtbaar is op de pagina. Maar de Head-tag bevat service-informatie. Om dit aan te geven worden metatags gebruikt. Alles wat erin staat, is bedoeld voor de server en zoekmachines.

De inhoud ervan kan op geen enkele andere manier worden achterhaald.

Laten we aandacht besteden aan de Link-tag. Met zijn hulp worden links naar externe opgenomen bestanden gespecificeerd. Indien gewenst kunt u de inhoud bekijken en op schijf opslaan. Om dit te doen, verplaatst u de aanwijzer naar het adres en drukt u op RMB. Selecteer "Openen in nieuw tabblad".

Het opgegeven bestand wordt geopend in een nieuw tabblad, dat u kunt bekijken of opslaan.

Hoe u de broncode van een pagina kunt bekijken om fouten in een script te debuggen

In dit geval is het het handigst om de pagina op de lokale computer te openen. Als u alleen opmaak, stijlen en scripts hoeft te corrigeren, kunt u dit rechtstreeks vanuit de map doen. De HTML-code wordt op dezelfde manier bekeken. Maar JavaScript-codefouten zijn te zien op het tabblad “Console”. Hier ziet u de beschrijving van de fout en het regelnummer waar deze is opgetreden.

De syntaxis is direct in de code te zien. Dit is waar het tabblad ‘Bron’ voor is.

Hoe u de code van een specifiek element kunt bekijken

Voor grote pagina's met veel elementen is het moeilijk om de benodigde code in alle opmaak te vinden. In dit geval moet u een speciale contextmenuopdracht gebruiken. Beweeg de muis over het fragment en druk op RMB. Selecteer de opdracht ‘Code bekijken’.

Hetzelfde venster wordt geopend, maar met de focus op het geselecteerde object.

Cv

We hebben je verteld wat de broncode van de pagina is. Het volstaat om de basiskennis van HTML en CSS onder de knie te krijgen, en met behulp van handige ontwikkelaarstools kunt u uw eigen HTML-documenten debuggen.

Door de code van bronnen op internet te bekijken, kunt u niet alleen van uw eigen ervaring leren, maar ook echte werkvoorbeelden gebruiken. En voor SEO-specialisten zullen metatags nuttig zijn, waarvan de informatie veel over de site kan vertellen.

De waarschijnlijkheid dat u naar de initiaal kijkt code web pagina's, ontvangen door de browser als gevolg van een verzoek aan de server, is beschikbaar in vrijwel elke internetbrowser. De toegang tot de overeenkomstige opdracht is ongeveer identiek georganiseerd, maar er zijn aanzienlijke verschillen in de methode en vorm waarin de initiaal wordt gebruikt code .

Instructies

1. Vouw in de Mozilla FireFox-browser het gedeelte 'Weergave' in het menu uit en klik op 'Initieel' code pagina's" Hetzelfde item bevindt zich ook in het contextmenu dat verschijnt als u met de rechtermuisknop op de tekst klikt pagina's. U kunt ook de toetsencombinatie CTRL + U gebruiken. Mozilla FireFox gebruikt geen externe programma's - initiaal code pagina's met syntaxisaccentuering wordt in een apart browservenster geopend.

2. Klik in Internet Explorer op het menu Bestand en selecteer Bewerken in Kladblok. In plaats van de naam Kladblok kan een ander programma worden geschreven dat u in de browserinstellingen hebt toegewezen om de initiaal te bekijken code A. Op klik pagina's met de rechtermuisknop verschijnt een contextmenu, dat ook een item bevat waarmee u de initiaal kunt openen code pagina's in een extern programma – “Bekijk HTML- code A".

3. Open in de Opera-browser het menu, ga naar de sectie "Pagina" en u krijgt de kans om het item "Start" te selecteren in de subsectie "Ontwikkelingstools" code"of het item "Initiaal code kader." Aan deze selectie zijn respectievelijk de sneltoetsen CTRL + U en CTRL + SHIFT + U toegewezen. In een contextmenu gebonden aan een klik pagina's klik met de rechtermuisknop, er is ook een item “Initial code" Opera opent source pagina's in een extern programma dat is toegewezen in het besturingssysteem of in de browserinstellingen voor het bewerken van HTML-bestanden.

4. De Google Chrome-browser heeft zonder enige twijfel de beste organisatie voor het bekijken van de initiaal code A. Door met de rechtermuisknop op de pagina te klikken, kunt u ervoor kiezen deze te bekijken code A pagina's"en dan wordt de broncode met syntaxisaccentuering op een apart tabblad geopend. Of misschien geeft u de voorkeur aan de regel "Beeld" in hetzelfde menu code element” en de browser op hetzelfde tabblad opent twee extra frames waarin u HTML en CSS kunt inspecteren code elk onderdeel pagina's. De browser reageert op de cursor die over lijnen beweegt code en het markeren van elementen op de pagina die overeenkomen met dit HTML-gedeelte code A.

5. Vouw in de Apple Safari-browser het gedeelte Weergave uit en selecteer HTML bekijken code A". In het menu dat verschijnt als u met de rechtermuisknop klikt, opent u pagina's, heet het corresponderende item “Bron bekijken”. Aan deze actie zijn de sneltoetsen CTRL + ALT + U toegewezen. Initial code wordt geopend in een apart browservenster.

Als u een webpagina opent, bevat deze typische elementen die niet veranderen afhankelijk van het type en de focus van de site. Voorbeeld 4.1 toont de code voor een eenvoudig document met basistags.

Voorbeeld 4.1. Broncode van webpagina

Rubriek

Eerste paragraaf.

Tweede paragraaf.

Kopieer de inhoud van dit voorbeeld en sla het op in de map c:\www\ als example41.html. Start daarna de browser en open het bestand via het menu-item Bestand > Bestand openen (Ctrl+O). In het documentselectiedialoogvenster selecteert u het bestand example41.html. De webpagina getoond in figuur 1 wordt geopend in de browser. 4.1.

Rijst. 4.1. Resultaat van het uitvoeren van het voorbeeld

Elementis bedoeld om het type van het huidige document aan te geven - DTD (documenttypedefinitie, beschrijving van het documenttype). Dit is nodig zodat de browser begrijpt hoe de huidige webpagina moet worden geïnterpreteerd, omdat HTML in verschillende versies bestaat. Daarnaast is er XHTML (EXtensible HyperText Markup Language), dat vergelijkbaar is met HTML, maar er qua syntaxis van verschilt. Om ervoor te zorgen dat de browser “niet in de war raakt” en begrijpt volgens welke standaard de webpagina moet worden weergegeven, is het noodzakelijk om de eerste coderegel in te stellen .

Er zijn verschillende soorten, verschillen ze afhankelijk van de HTML-versie die ze targeten. In tabel 4.1. De belangrijkste soorten documenten met hun beschrijvingen worden gegeven.

Het verschil tussen een strikte en een transitionele documentbeschrijving is een andere benadering van het schrijven van documentcode. Strikte HTML vereist een strikte naleving van de HTML-specificatie en is onvergevingsgezind ten aanzien van fouten. Transitional HTML gaat meer ontspannen om met bepaalde codefouten, dus dit type verdient in bepaalde gevallen de voorkeur.

In strikte HTML en XHTML is de aanwezigheid van de tag bijvoorbeeld vereist

Label