Sidkod för webbläsare. Google Chrome - verktyg för webbansvariga

Båda metoderna är universella och bör fungera i alla webbläsare.

Först kommer det att tyckas för vissa att detta inte alls är det rätt verktyg, men att visa hela HTML-koden för en webbplats är bra för att söka i koden nödvändiga element, dessa kan vara länkar, taggar, metataggar, attribut och andra element.

Genom att använda snabbtangentskombinationen + öppna sökfönstret i Chrome-webbläsaren visas det uppe till höger:

Figur 3. Sök på platskod

När du har skrivit in en begäran i sökformuläret flyttas skärmen till det första elementet som hittas, med hjälp av pilarna kan du flytta mellan dem och välja det du behöver:

Figur 4. Sök efter HTML-kod webbplats

Nu mest en viktig del, där jag kommer att visa hur du kan redigera HTML- och CSS-koden för en webbplats i en webbläsare. överför sedan ändringarna till webbläsaren.

Så här användbart verktyg alltid tillgänglig i din webbläsare, experimentera med andra kommandon som gör det lättare att redigera din webbplats.

God dag kära läsare av min blogg. Ibland hittar du någon vacker funktion på en webbplats och börjar undra hur skaparen uppnådde en så intressant effekt.

Det visar sig att svaret är ganska enkelt. Och om du har vissa kunskaper kan du samla på dig många av dessa funktioner och skapa din egen unika webbplats på kort tid.

Idag kommer vi att prata om hur man öppnar koden för en sida, ett visst element, och lär oss hur man använder denna färdighet för din fördel.

Min sida är avsedd för nybörjare och först vill jag kort prata om sajter och kod i allmänhet.

För att rita en bild och sedan klippa den i små delar, skriv kod så att webbläsaren återmonterar alla element till en enda helhet. Verkar allt väldigt komplicerat? Inte alls, och det är ingen idé att sörja över det.

Det är så högkvalitativa webbplatser skapas. Om du vill, engagera dig i den här saken och studera den om du inte vill, ingen kan tvinga dig.

Jag ska bara säga en sak... det finns inget trevligare än att se hur obegripliga ord du skrivit förvandlas till en enda helhet och kommer till liv: länkar fungerar, knappar rör sig, bilder rör sig, text kryper. Jag tror att jag vet hur Victor Frankenstein kände.

När du börjar förstå det hemliga språket och ser att allt faktiskt är mycket enklare än det från början verkade, kan du inte låta bli att tro på dina egna styrkor och förmågor i hjärnan. Det här är väldigt coolt.

Hur görs webbplatser? Helst först. Han målar bara en bild. Till exempel, som visas på bilden nedan. För nu är det bara en bild, ett fotografi. Inga länkar fungerar, när du klickar kommer du ingenstans, ingen sökning görs.

Enligt denna ritning. Titta på skärmdumpen nedan. Du kanske tycker att detta är en löjlig och mycket komplex uppsättning symboler. Faktum är att allt inte är så komplicerat, det finns en viss algoritm.

Det finns bara cirka 150 taggar och var och en av dem är ansvarig för en specifik åtgärd: länk, avstavning, fet stil, färg, titel och så vidare. Att förstå dem är inte så svårt om du har lusten och inte har något emot tiden.

Tack vare kunskap om dessa attribut kan du lösa nästan alla problem. Men varje utvecklare hittar sina egna sätt att nå målet.

Erfarna kreatörer ser direkt hur man uppnår resultat, medan andra måste tänka, leta efter svaret i artiklar eller i konkurrenternas källkod. De tar helt enkelt den nödvändiga delen från en tredje parts webbplats och redigerar den själva. Detta förkortar arbetsprocessen avsevärt.

Lite senare kommer jag att visa dig ett specifikt exempel.

Så låt mig först visa dig hur du ska agera om du behöver ta reda på någon annans html. Sedan ska vi titta närmare på alla andra frågor.

Metoden som jag kommer att beskriva först är lite komplicerad för nybörjare, men som en introduktion, läs den. Öppna sidan och klicka på höger musknapp. Välj "Spara som..."

Spara hela webbsidan. Som du kan se på skärmdumpen har jag redan laddat ner allt i förväg. Här har vi två mappar.

Allt du behöver finns här. Varje element. Om du förstår detta kan du snabbt få allt du behöver. Men en sådan uppgift blir alltmer omöjlig. Det finns ingen nedladdning. Vad ska man göra om det är förbjudet att kopiera en sida?

Som du kanske redan har märkt använder jag oftast Google Chrome och att lära sig någon annans kod i den här webbläsaren är lika enkelt som att skala päron. Som i princip med alla andra. Schemat kommer inte bara att vara liknande, utan identiskt. Öppna sidan vars kod vi vill veta och högerklicka var som helst. Klicka på "Visa sidkod" i fönstret som visas.

Ett kodark öppnas i ett nytt fönster, vilket är ganska svårt för en nybörjare att förstå. Men bli inte orolig i förväg.

Om du bara behöver veta koden för ett element, håll bara muspekaren över den med musen och högerklicka. Välj en annan Chrome-funktion: "Visa elementkod".

Till exempel kan jag vara intresserad av hur logotypen gjordes, med hjälp av en bild eller ett programmeringsspråk? Du kan trots allt rita en kvadrat med css hjälp. Många experter ger råd om hur mer information skriva i kod. Hur fungerar de på populära sajter?

Så det dök upp nödvändig information. html på toppen, css på botten. Det är två språk. Den första är ansvarig för textkomponenten och den andra för designen. Om det inte fanns någon CSS skulle du behöva ange färg och teckenstorlek varje gång. För varje sida är detta väldigt långt. Men om det inte fanns någon html så skulle vi inte ha texter. Jag förklarade det grovt, men i allmänhet är det så det är.

Är du förresten intresserad av hur det fungerar här kan du titta på länken till bilden nedan. Här är ditt svar.

Om du gillar att arbeta i mastix, så kommer allt att vara exakt likadant. Öppna sidan och klicka på höger musknapp. " Källa sidor" om du vill se hela koden.

När du håller muspekaren över ett element kan du öppna dess kod.

Här visas data längst ner på skärmen, men i övrigt är allt exakt sig likt.

I Yandex-webbläsaren är allt exakt detsamma som i de två föregående alternativen, öppna sidan, högerklicka, se sidkoden.

Vi för markören över ett element om vi vill ta reda på exakt dess kod.

Allt visas här på exakt samma sätt som i Chrome.

Och slutligen, Opera.

Förresten, du kanske har märkt att du inte behöver använda en mus. Det finns ett snabbt kortkommando för att öppna koden, och det är samma för alla webbläsare: CTRL+U.

För element: Ctrl+Skift+C.

Så här ser resultatet ut.

Titta nu hur allt fungerar. Du hittar en sida och gillar verkligen något element. Till exempel den här. Du vet redan hur man öppnar elementkoden.

Kopiera det nu.

Jag använder det, klistra in den här koden i ny html fil, i body-taggen (body på engelska).

Låt oss nu se hur det hela kommer att se ut i webbläsaren.

Redo. För att texten ska anpassas till kanterna och få en grönaktig färg måste du ansluta till denna css-dokument och kopiera en annan kod från webbplatsen där vi stal den här.

Jag kommer inte att göra det här nu. Detta kräver mer tid: både mitt och ditt. Jag tror att jag kommer att beskriva alla detaljer i mina framtida publikationer. Prenumerera på nyhetsbrevet och bli den första att veta när en artikel dyker upp.

Om du inte orkar, men vill lära dig mer om html och css nu, så kan jag traditionellt rekommendera dig gratis utbildningar.

Här är 33 lektioner som låter dig behärska html - « Gratis kurs med HTML".

Och här fullständig information om css - "Gratis kurs i CSS (45 videolektioner!)".

Nu vet du lite mer. Jag önskar dig framgång i dina ansträngningar. Vi ses!

Högtiden närmar sig - Internationella kvinnodagen. Låt oss förbereda oss för det i förväg. Du kan gratulera tjejer och kvinnor på ett originellt sätt genom att använda vykortstjänsterna som diskuteras nedan.

Använd följande tjänster för att skapa ett vykort praktiskt taget från grunden.

Jag hoppas att ni genom att använda en av dessa generatorer kommer att kunna gratulera era damer på ett adekvat sätt den 8 mars!

Innehållet i artikeln:

Bekräfta övergången till och ange ditt namn eller smeknamn.

Glöm inte att ladda upp en avatar på din Blogger-profil.

Idag ska jag berätta vad CSS3 är, vad det används med, var man letar efter det och hur man skriver det korrekt. Jag varnar dig, ska jag berätta för mig själv, förenklat för allmänheten, som jag ser det + exempel. Så låt oss börja på långt håll.
CSS är stilar där egenskaperna för ett objekt skrivs. Det betyder att de finns i alla befintliga motorer, om du inte kan hitta dem, så letar du antingen på fel ställe eller så finns de verkligen inte ( sned plats). Var brukar de hittas? Vanligtvis är detta roten till webbplatsen, namnet på style.css-filen, även om namnet i princip inte är lika viktigt som .css-tillägget om filen med en sådan filändelse är en style-fil.
Se även på min blogg.