Sokáig számomra a „show forrás oldalak" haszontalan és érdektelen volt. Eddig a HTML tanulás a Codecademy-n és a saját weboldalaim tervezése nem nőtt az új hobbim közé. Itt merült fel a kérdés: hol találhat valós eseteket és kölcsönözhet érdekes megoldásokat a „malacka bankához”? A válasz váratlanul egyszerű volt, mint minden zseniális dolog: nézd meg az oldal forráskódját a Google Chrome-ban! Megosztom veletek szerény leleteimet.

Mi az oldal forráskódja

Ha Ön hozzám hasonlóan még csak az első lépéseit teszi meg a HTML programozásban, akkor jó ötlet lenne utánajárni, hogy mi az oldal forráskódja.

A forráskód, más néven HTML oldalkód, a Hyper Text Markup Language (HTML) szövege. Tartalmazza az oldal tényleges tartalmát (szöveg, táblázatok) és címkéket. Utóbbiak utasításként szolgálnak a böngésző számára: hogyan jelenítse meg a tartalmat, milyen formázást használjon, hova illesszen be hiperhivatkozást vagy médiafájlt. Nos, nekünk, kezdő programozóknak a forráskód jelenti a legjobb gyakorlóterepet: találunk egy érdekes oldalt és kikémleljük, elmentjük, és sikeres töredékeket használunk. Hogyan?

A forráskód megtekintése a Google Chrome böngésző oldalán

Keresse meg a kívánt oldalt. Például az oldal menüjének kialakítása érdekelt. Nyílt forráskód itt Google böngésző A Chrome háromféleképpen hajtható végre:

1. Kattintson az ikonra menü a böngésző jobb felső sarkában, és válassza a „ További eszközök" Többek között van egy „Forráskód megtekintése” opció. Őszintén szólva ritkán használom ez a módszer: sok felesleges mozdulat. Még egyszerűbbé is tehető.
2. Nyomja meg a billentyűkombinációt Ctrl+U– megnyílik egy új ablak a forráskóddal;
3. A helyi menü kedvelőinek: kattintson jobb gombbal az oldalra, és válassza az „Oldalkód megtekintése” lehetőséget.

Megbirkóztunk azzal a feladattal, hogy a böngészőben megtekintsük az oldal HTML kódját. Térjünk át a legérdekesebb szakaszra.

A forráskód szerkesztése és mentése

A webhelyek létrehozásának megtanulásához nem elég valaki más HTML-kódját elolvasni. Játszani kell vele, kísérletezni, módosítani kell, és ellenőrizni kell az eredményt. Akár néhány sikeres minta összeállításával is kezdheti. Hogyan lehet szerkeszteni és menteni a forráskódot?

1. lehetőség „Manuálisan”

Miután megnyitottuk az oldal forráskódját, hívjuk helyi menüés válassza a „Mentés másként” lehetőséget, és mentse a fájlt ide HDD. Jegyzettömbben vagy Jegyzettömbben szerkesztjük a fájlt, mentjük a változtatásokat és megnyitjuk a böngészőn keresztül. Változásaink eredménye (sikeres és kevésbé sikeres) megjelenik a böngészőablakban.

2. lehetőség Profiknak

Amikor minden nap "játszunk" a forráskóddal, a "mentés - megnyitás - módosítás - mentés - ellenőrzés" folyamat fárasztóvá válik. Saját magam számára találtam megoldást egy bővítmény telepítése a Google Chrome - Firebug Lite formájában. Lehetővé teszi a forráskód szerkesztését és mentését a böngészőablak elhagyása nélkül.

Az interneten számtalan oldalt átnézve olyanokra bukkanhat, amelyeket nagyon szeretünk. Rögtön számos kérdés vetődik fel. Az oldal házi kóddal vagy valamilyen CMS-sel készült? Mik az övéi CSS stílusok? Mik a metacímkéi? Stb.

Számos eszköz használható információk kinyerésére egy webhely oldalának kódjáról. De mindig kéznél van a jobb egérgomb. Ezt fogjuk használni, példaként használva a webhelyemet.

Hogyan lehet megnézni az oldal kódját?

Egy webhelyoldal forráskódjának megtekintéséhez vigye az egeret a weboldal bármely területére (a képek és hivatkozások kivételével). Ezt követően kattintson a jobb egérgombbal. Megnyílik előttünk egy ablak több lehetőséggel (in különböző böngészők kissé eltérhetnek). A Google Chrome böngészőben például a következő parancsok vannak:

• vissza;
• előre;
• újraindítás;
• mentés másként;
• fóka;
• lefordítani oroszra;
• oldal kódjának megtekintése;
• kód megtekintése.

Rá kell kattintanunk oldal kódjának megtekintése, és megnyílik előttünk az oldal oldalának html kódja.

Az oldal kódjának megtekintése: mire kell figyelni?

Tehát a HTML-oldal kódja sorok számozott listája, amelyek mindegyike információkat tartalmaz a webhely létrehozásáról. Hogy gyorsan megtanulják megérteni ezt a rengeteg jelet és speciális karakterek, különbséget kell tennie a kód különböző szakaszai között.

Például a head címkén belüli kódsorok információkat tartalmaznak a keresőmotorok és a webmesterek számára. Nem jelennek meg az oldalon. Itt láthatod, hogyan kulcsszavakat Ezt az oldalt a címe és leírása alapján reklámozzuk. Itt találsz egy linket is, amelyre kattintva értesülünk a családról google fonts használják az oldalon.

Ha az oldal CMS WordPress vagy Joomla rendszeren készült, akkor ez itt is látható lesz. Ez a terület például egy WordPress témáról vagy egy Joomla webhelysablonról jelenít meg információkat. A kékkel kiemelt linkek tartalmát elolvasva láthatja. Az egyik link egy webhelysablont mutat.

Például:

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

Látni fogjuk az oldal CSS-betűstílusait. Ebben az esetben a betűtípus kerül felhasználásra. Ez itt látható - font-family: 'Source Sans Pro'.

Ez az oldal a Yoast SEO plugin segítségével lett optimalizálva. Ez látható a kód ezen kommentált részéből:

Ez az oldal a Yoast SEO bővítmény v3.4.2-re van optimalizálva - https://yoast.com/wordpress/plugins/seo/

A body címkén belül található összes információt a böngésző megjeleníti a monitor képernyőjén. Itt látjuk az oldal html kódját, legalul pedig a Yandex Metrics szkript kódja. Egy megjegyzéssel ellátott címke veszi körül a következő szöveggel:

/Yandex.Metrika számláló

Foglaljuk össze

Az oldal főoldalának kódjának meglehetősen felületes elemzése után következtetést vonhatunk le arról, hogy ez az oldal milyen eszközökkel készült. Láttuk rajta:

• CMS WordPress;
• Google font Source Sans Pro;
• WordPress téma – Sydney;
• Yoast bővítmények;
• Yandex mérőszám számláló.

Most az elemzés elve html kódot Az oldal oldala teljesen világos. Egyáltalán nem szükséges a keresett oldalt nyitva tartani a böngészőben. Az oldal kódját a ctrl+a, ctrl+c, ctrl+v billentyűkombinációkkal mentheti a számítógépére. Illessze be bármelyikbe szöveg szerkesztő(lehetőleg Notepad++), és mentse el a html kiterjesztéssel. Így bármikor mélyebben tanulmányozhatja, és több hasznos információt találhat magának.

A SendPulse szolgáltatás egy marketingeszköz, amellyel előfizetési bázist hozhat létre, és a webhelye alkalmi látogatóit normál látogatókká alakíthatja. A SendPulse egyetlen platformon egyesíti az ügyfelek vonzásának és megtartásának legfontosabb funkcióit:
● e-mailes hírlevelek,
● web push,
● SMS levelek,
● SMTP,
● hírlevelek a Viberben,
● üzenetek küldése a facebook messengernek.

E-mailes hírlevelek

Különféle tarifákat használhat az e-mailek küldésére, beleértve az ingyeneseket is. Az ingyenes csomagnak vannak korlátozásai: az előfizetési alap nem több, mint 2500.
Az e-mail hírlevél szolgáltatással való munka során az első dolog, amit el kell kezdenie, a saját létrehozása címjegyzék. Állítson be egy címet, és töltse fel az e-mail címek listáját.

Kényelmes létrehozni a SendPulse segítségével előfizetési űrlapok felugró ablak, beépített űrlapok formájában, lebegő és a képernyő egy bizonyos részében rögzített formában. Az előfizetési űrlapok használatával a semmiből összegyűjtheti az előfizetői bázist, vagy új címeket adhat hozzá.
Az űrlaptervezőben pontosan az igényeinek leginkább megfelelő előfizetési űrlapot hozhatja létre, és a szolgáltatási tippek segítenek megbirkózni ezzel a feladattal. Lehetőség van a rendelkezésre álló kész formák valamelyikének használatára is.

Az előfizetési űrlapok létrehozásakor ügyeljen arra, hogy vállalati domainnel rendelkező e-mailt használjon. Olvassa el, hogyan.
Üzenet sablonok segít szépen megtervezni az előfizetőknek írt leveleit. Saját levélsablont készíthet egy speciális tervezőben.

Automatikus postázások. A tartalomkezelők aktívan használják az automatikus levelezést. Ez segít automatizálni az ügyfelekkel való munka folyamatát. Automatikus hírlevelet többféleképpen is létrehozhat:
● Sorozatos betűsorozat. Ez a legegyszerűbb lehetőség, ha a feltételektől függetlenül több levelet írnak, amelyeket meghatározott sorrendben küldenek el a címzetteknek. Itt lehetnek lehetőségek - üzenetek sorozata(egyszerű üzenetlánc), különleges dátum(a levelek meghatározott dátumokra vannak időzítve), kiváltó levél– a levél elküldése az előfizető tevékenységétől (üzenet megnyitása stb.) függően történik.
● Automatizálás 360– postázás bizonyos szűrőkkel és feltételekkel, valamint a konverziók figyelembevételével.
● Kész láncok a sablon szerint. Létrehozhat egy betűsorozatot egy adott sablon használatával, vagy módosíthatja a sablont, és az Ön igényeihez igazíthatja.
A/B tesztelés segít kísérletezni a levélsorozat küldésének különböző lehetőségeivel, és a megnyitások vagy kattintások alapján meghatározni a legjobb lehetőséget.

Push értesítések küldése

A push levelek előfizetések a böngészőablakban, ez egyfajta helyettesíti az RSS előfizetést. A web-push technológiák gyorsan bekerültek az életünkbe, és már most is nehéz olyan weboldalt találni, amely ne használna push-maileket az ügyfelek vonzására és megtartására. Parancsfájl kérése a következőhöz: leveleket küldhet manuálisan, vagy automatikus levélküldést hozhat létre levélsorozat létrehozásával vagy adatok gyűjtésével az RSS-ből. A második lehetőség azt jelenti, hogy miután egy új cikk megjelenik a webhelyén, erről automatikusan értesítést küldenek az Ön feliratkozói egy rövid értesítéssel.

Újdonság a küldésbőlImpulzus– Mostantól bevételt szerezhet webhelyével Push értesítésekkel, beágyazva őket hirdetéseket. Ha eléri a 10 dollárt, a fizetés minden hétfőn megtörténik az egyik fizetési rendszerre - Visa/mastercard, PayPal vagy Webmoney.
A push üzenetek a szolgáltatáson teljesen ingyenesek. Fizetést csak a White Label - a SendPulse szolgáltatás említése nélkül küldött levelekért veszünk fel, de ha a szolgáltatás logója nem zavarja, akkor korlátozások nélkül használhatja a push értesítéseket.

SMTP

Az SMTP funkció megvédi leveleit a tiltólistára kerüléstől az engedélyezőlistán szereplő IP-címek használatával. A SendPulse levelekben használt DKIM és SPF kriptográfiai aláírási technológiák növelik az elküldött levelekbe vetett bizalmat, így kevésbé valószínű, hogy levelei spambe vagy feketelistára kerülnek.

Facebook Messenger Botok

A Facebook chatbot bétatesztelés alatt áll. Csatlakoztathatja oldalához, és üzeneteket küldhet az előfizetőknek.

SMS küldése

A SendPulse szolgáltatáson keresztül egyszerűen küldhet leveleket az adatbázison keresztül telefonszámok. Először is létre kell hoznia egy címjegyzéket a telefonszámok listájával. Ehhez válassza ki a „Címjegyzék” részt, hozzon létre egy új címjegyzéket, és töltse fel a telefonszámokat. Mostantól SMS-hírlevelet készíthet az adatbázis segítségével. Az SMS-üzenetek ára a címzett távközlési szolgáltatóitól függően változik, és átlagosan 1,26 rubel és 2,55 rubel között mozog 1 elküldött SMS-enként.

Partnerprogram

SendPulse eszközök Partnerprogram, amelyen belül az Ön linkjét használó regisztrált felhasználó, aki kifizette a tarifát, 4000 rubelt hoz Önnek. A meghívott felhasználó 4000 rubel kedvezményt kap a szolgáltatás használatának első 5 hónapjában. 1 szavazat

Jó napot, kedves blogom olvasói. Néha találsz egy-egy gyönyörű vonást egy webhelyen, és azon tűnődsz, hogyan ért el az alkotó ilyen érdekes hatást.

Kiderült, hogy a válasz meglehetősen egyszerű. És ha rendelkezik bizonyos készségekkel, akkor sok ilyen funkciót összegyűjthet, és rövid időn belül elkészítheti saját egyedi webhelyét.

Ma arról fogunk beszélni, hogyan lehet megnyitni egy oldal kódját, egy bizonyos elemet, és megtanuljuk, hogyan használhatjuk ezt a készségünket a javára.

Alapvető kódtudás

Az oldalam kezdőknek készült, és először is szeretnék röviden beszélni a webhelyekről és általában a kódról.

Egy kép rajzolásához, majd apró részekre vágva írjon kódot, hogy a böngésző az összes elemet egyetlen egésszé állítsa össze. Minden nagyon bonyolultnak tűnik? Egyáltalán nem, és nincs értelme ezen keseregni.

Így születnek minőségi weboldalak. Ha akarsz, vágj bele ebbe az ügybe, és tanulmányozd, ha nem akarod, senki sem kényszeríthet rád.

Csak egyet mondok... nincs annál kellemesebb, mint látni, hogy az általad írt érthetetlen szavak hogyan alakulnak át egyetlen egésszé és kelnek életre: működnek a linkek, mozognak a gombok, mozognak a képek, mászkál a szöveg. Azt hiszem, tudom, mit érzett Victor Frankenstein.

Amikor elkezded megérteni a titkos nyelvet, és látod, hogy valójában minden sokkal egyszerűbb, mint amilyennek kezdetben látszott, nem tudsz mást tenni, mint hinni saját erősségeidben és agyad képességeiben. Ez nagyon klassz.

Hogyan készülnek a weboldalak? Ideális esetben először. Csak egy képet fest. Például az alábbi képen látható módon. Egyelőre ez csak egy kép, egy fénykép. Egyetlen link sem működik, ha rákattint, nem megy sehova, nem történik keresés.

E rajz szerint. Nézze meg az alábbi képernyőképet. Azt gondolhatja, hogy ez egy nevetséges és nagyon összetett szimbólumkészlet. Valójában minden nem olyan bonyolult, van egy bizonyos algoritmus.

Csak körülbelül 150 címke van, és mindegyik egy adott műveletért felelős: link, elválasztás, félkövér, szín, cím stb. Megértésük nem olyan nehéz, ha van kedved és nem bánod az időt.

Ezen tulajdonságok ismeretének köszönhetően szinte minden problémát megoldhat. De minden fejlesztő megtalálja a maga módját a cél eléréséhez.

A tapasztalt alkotók azonnal látják, hogyan lehet eredményt elérni, míg másoknak gondolkodniuk kell, cikkekben vagy a versenytársak forráskódjában kell keresniük a választ. Egyszerűen leveszik a szükséges részt egy harmadik fél webhelyéről, és maguk szerkesztik. Ez jelentősen lerövidíti a munkafolyamatot.

Kicsit később mutatok egy konkrét példát.

Kód megtekintése

Tehát először hadd mutassam meg, hogyan kell cselekedni, ha valaki más html-jét kell megtudnia. Ezután az összes többi kérdést részletesebben megvizsgáljuk.

A legjobb mód

A módszer, amelyet először leírok, kissé bonyolult a kezdők számára, de bevezetésként olvassa el. Nyissa meg az oldalt, és kattintson a jobb egérgombbal. Válassza a "Mentés másként..." lehetőséget

Mentse el a teljes weboldalt. Ahogy a képernyőképen is látható, már előre letöltöttem mindent. Itt van két mappánk.

Itt van minden, amire szüksége van. Minden elem. Ha ezt megérti, gyorsan beszerezhet mindent, amire szüksége van. De egy ilyen feladat egyre inkább lehetetlenné válik. Nincs letöltés. Mi a teendő, ha tilos egy oldalt másolni?

Ez a Google Chrome

Amint azt már észrevette, leggyakrabban a Google Chrome-ot használom, és valaki más kódjának megtanulása ebben a böngészőben olyan egyszerű, mint a körte héja. Mint elvileg minden másnál. A séma nemcsak hasonló, hanem azonos is lesz. Nyissa meg azt az oldalt, amelynek kódját szeretnénk tudni, és kattintson a jobb gombbal bárhová. A megjelenő ablakban kattintson az „Oldalkód megtekintése” elemre.

Egy kódlap új ablakban nyílik meg, amit egy kezdő számára meglehetősen nehéz megérteni. De ne ijedjen meg idő előtt.

Ha csak egy elem kódját szeretné tudni, csak vigye rá az egeret, és kattintson a jobb gombbal. Válasszon egy másik Chrome-funkciót: „Elemkód megtekintése”.

Például érdekelhet, hogyan készült a logó, kép vagy programozási nyelv segítségével? Végül is lehet négyzetet rajzolni css segítség. Sok szakértő azt tanácsolja, hogy a lehető legtöbb információt írjon le kódba. Hogyan működnek a népszerű oldalakon?

Most megjelentek a szükséges információk. html felül, css alul. Ez két nyelv. Az első a szövegösszetevőért, a második a tervezésért felelős. Ha nem lenne CSS, akkor minden alkalommal meg kell adnia a színt és a betűméretet. Minden oldal esetében ez nagyon hosszú. De ha nem lenne html, akkor nem lennének szövegeink. Durván elmagyaráztam, de általában így van.

Egyébként akit érdekel, hogyan működik itt, az alábbi kép linkjét nézheti meg. Íme a válaszod.

Mozilla Firefox

Ha szeretne masztixban dolgozni, akkor minden pontosan ugyanaz lesz. Nyissa meg az oldalt, és kattintson a jobb egérgombbal. „Oldal forráskódja”, ha a teljes kódot szeretné látni.

Ha az egérmutatót egy elem fölé viszi, megnyithatja annak kódját.

Itt a képernyő alján jelennek meg az adatok, de egyébként minden pontosan ugyanaz.

Yandex böngésző

A Yandex böngészőben minden pontosan ugyanaz, mint az előző két lehetőségnél, nyissa meg az oldalt, kattintson a jobb gombbal, nézze meg az oldal kódját.

Vigyük a kurzort egy elem fölé, ha pontosan meg akarjuk tudni a kódját.

Itt minden pontosan ugyanúgy jelenik meg, mint a Chrome-ban.

Opera

És végül az Opera.

Egyébként talán észrevetted, hogy nem kell egeret használnod. Van egy gyors billentyűparancs a kód megnyitásához, és ez minden böngészőben ugyanaz: CTRL+U.

Elemekhez: Ctrl+Shift+C.

Így néz ki az eredmény.

Ez érdekes lesz a kezdőknek

Most nézd meg, hogyan működik minden. Talál egy webhelyet, és nagyon megtetszik néhány elem. Például ezt. Már tudja, hogyan kell megnyitni az elem kódját.

Most másold ki.

Használom, illessze be ezt a kódot egy újba html fájl, a body tagbe (angolul body).

Most pedig nézzük meg, hogyan fog kinézni mindez a böngészőben.

Kész. Ahhoz, hogy a szöveg a szélekhez igazodjon, és zöldes színt kapjon, csatlakoztatnia kell a css-t ehhez a dokumentumhoz, és ki kell másolnia egy másik kódot arról a webhelyről, ahonnan ezt másoltuk.

Ezt most nem fogom megtenni. Ehhez több idő kell: az enyém és a tied is. Úgy gondolom, hogy minden részletet leírok a későbbi publikációimban. Iratkozzon fel a hírlevélre, és értesüljön elsőként, ha egy cikk megjelenik.

Ha nem bírod, de szeretnél többet megtudni a html-ről és a css-ről, akkor hagyományosan ingyenes képzéseket tudok ajánlani.

Itt van 33 lecke, amely lehetővé teszi a html elsajátítását - « Ingyenes tanfolyam HTML alapján" .

És itt van teljes információ a css-ről - „Ingyenes kurzus a CSS-ről (45 videolecke!)” .

Most egy kicsit többet tudsz. Sok sikert kívánok a törekvéseihez. Viszlát!

Ügyesség módosítsa az oldal forráskódját– Hasznos készség haladó internetezők számára. A HTML kód helyettesítésével tetszés szerint módosíthatja a megnyitott weboldalt. Ebben a cikkben elmondjuk hogyan kell megváltoztatni az oldal kódját a Google Chrome-ban. Más böngészőkben azonban minden hasonlóan történik, így nem lehetnek nehézségek.

Mi az oldal HTML kódja?

Minden böngészőben megnyitott oldalnak saját kódja van a HTML jelölőnyelven. Ez a kód címkéket és szöveget jelent. A címkék egyedi címkék, amelyek megmondják a böngészőnek, hogyan jelenítse meg a webhely adott részét. A szöveg az oldal tartalma, amit a felhasználó lát. Az oldalhoz CSS stílusok is kapcsolhatók, amelyek készletei kinézet oldalelemek. Nak nek módosítsa a webhely forráskódját nem kell alaposan ismerned a HTML-t és a CSS-t, és hamarosan magad is meglátod.

Miért kell weboldalt váltani?

Lecserélheti az oldalon lévő adatokat, módosíthatja az üzenet szövegét, vagy hamis képernyőképet készíthet. Kérjük, vegye figyelembe, hogy az összes módosítást csak Ön láthatja, és az oldal újratöltésekor eltűnnek. A megváltozott adatok sem lesznek valósak. Például, ha nincs 10 dollárom, és lecserélem 100-ra, akkor nem lesz több pénzem. Ez csak az oldal megjelenítése a böngésző által. Példa:

Után:

Például ugyanazt a webhelyet veszem, és megváltoztatom a „” Megnyitás” cikk korábbi bejelentését kezdőlap a Google Chrome-ban. Jobb gombbal rákattintok a módosítani kívánt elemre, például a közlemény címére, és kiválasztom a „Kód megtekintése” lehetőséget.

A megnyíló ablakban lépjen az Elemek fülre, és tekintse meg az oldal HTML-kódját. Ebben meg kell találnunk a minket érdeklő szöveget. (pirossal aláhúzva)

Most törlöm a régi szöveget, és írok egy újat.

Ennyi, a közlemény címe megváltozott. Most megváltoztatom magát a hirdetményt, a címkéket és a kategóriát.

Az img címkében lévő src attribútum módosításával beszúrhat másik képet.