Ako upraviť webové stránky v Safari pomocou Inspect Element

Safari vám so svojím nástrojom Inspect Element umožňuje pohrať sa s kódom front-end akejkoľvek webovej stránky. Ak chcete otestovať, ako by stránka vyzerala s iným textom alebo obrázkami, môžete tak urobiť zmenou jej kódu pomocou Inspect Element.

Toto je jednoduchá príručka zameraná na začiatočníkov, ktorá vysvetľuje, ako môžete začať experimentovať s Inspect Element v Safari na úpravu textu a obrázkov webovej stránky s minimálnymi znalosťami kódovania.

Čo je kontrolný prvok?

Inspect Element je nástroj pre vývojárov. Je k dispozícii v prehliadači Safari, ale aj v iných webových prehliadačoch, ako sú Chrome, Firefox a Edge. S Inspect Element môžete nahliadnuť za oponu webovej stránky a odhaliť jej vstupný kód, ako sú HTML a CSS. Nezaručuje vám však viditeľnosť back-endu, ako sú jeho databázy.

Tento kód môžete nielen vidieť, ale môžete ho aj vyladiť. To znamená, že môžete zmeniť vzhľad webovej stránky. Môžete nahradiť obrázok, preformulovať text, použiť iné písmo, zmeniť jeho farebnú schému a podobne. Tieto úpravy sú však lokálne. Nezobrazia sa nikomu inému okrem vás; zmiznú, keď obnovíte stránku alebo sa z nej vzdialite.

Prečo by ste mali používať Inspect Element?

Inspect Element je skvelý nástroj, ak ste začínajúci webový vývojár. Môžete doslova vidieť kód, ktorý poháňa vašu obľúbenú webovú stránku, a môžete si ho vyladiť tak, ako chcete, v reálnom prostredí. Je ich veľa zábavné poznatky, ktoré môžete získať pomocou Inspect Element.

Majitelia firiem sa napríklad môžu pozrieť na kľúčové slová zahrnuté na webovej stránke konkurencie alebo dizajnéri použite Skontrolovať prvok na identifikáciu písma ktoré považujú za atraktívne alebo na rýchle otestovanie inej farebnej schémy na svojich webových stránkach.

Zatiaľ sa zameriame na úpravu základov webovej stránky pomocou Inspect Element.

Ako získať prístup k prvku Inspect na Safari

Inspect Element v Safari môžete otvoriť pomocou ponuky vývojára:

1. Otvorte Safari.
2. Kliknite Safari v hornej lište ponuky.
3. Z rozbaľovacej ponuky vyberte Predvoľby.
4. Vyberte Pokročilé možnosť.
5. Začiarknite políčko s nápisom Zobraziť ponuku Develop na paneli s ponukami.

Po výbere tejto možnosti môžete kliknite pravým tlačidlom myši na webovej stránke a vyberte Preskúmať prvok. Prípadne si môžete vybrať Rozvíjať na paneli s ponukami a potom Zobraziť Webový inšpektor.

Ako nájsť webové prvky v Inspect Element

Ak chcete začať upravovať prvok, kliknite pravým tlačidlom myši čo chcete upraviť a kliknite Preskúmať prvok. Otvorí sa okno vývojára so zvýraznenou príslušnou sekciou. Môžete zistiť, že konkrétny prvok, ktorý chcete vložiť (napríklad obrázok alebo text), je skrytý; na jeho nájdenie použite šípky na ľavej strane rozbalíte vnorené sekcie.

Ak chcete zúžiť výber, kliknite na cieľová ikona z panela nástrojov Kontrola prvku. Teraz, keď prechádzate kódom, zvýrazní túto sekciu na webovej lokalite. Alebo môžete použiť kurzor na určenie sekcie na stránke. Je to užitočné, keď sa chcete zdokonaliť v niečom konkrétnom v preplnenej oblasti webovej stránky.

Ako upraviť text webovej stránky pomocou Inspect Element

Ak chcete, aby bolo možné upraviť text po jeho nájdení v zdrojovom kóde lokality, dvojité kliknutie to. Môžete zadať nový text priamo do kódu alebo odstrániť existujúci text. Po dokončení úprav pre daný reťazec textu stlačte Zadajtea text na webovej stránke sa zmení.

Je to naozaj také jednoduché! Nefunguje to len vtedy, keď je text skutočne súčasťou obrázka, napríklad loga.

Ako upraviť obrázky webových stránok pomocou prvku Inspect

Zatiaľ čo sa vám obrázky zobrazujú vizuálne na front-ende, v kóde webovej stránky sa zobrazujú ako odkazy. Môžeš kliknite pravým tlačidlom myši a obrázok a vyberte si Preskúmať prvok preskočiť na miesto, kde je tento obrázok v kóde. Obrázky webových stránok majú zvyčajne prípony súborov JPG, GIF alebo PNG, aj keď nie výlučne.

Dvojité kliknutie tieto reťazce obrázkov a môžete ich upravovať alebo len uložiť do systému, ak si to želáte. Ak chcete nahradiť obrázok, vymeňte ho za adresu URL náhradného obrázka. Alebo môžete úplne vymazať reťazec kódu, aby ste odstránili obrázok zo zobrazenia.

Ponorte sa do webových stránok pomocou Safari

Nástroj Inspect Element od Safari vám umožňuje jednoducho nájsť a zmeniť kód zodpovedajúci textu a obrázkom, čo je také jednoduché ako prepnutie textu alebo URL reťazca. Po dokončení úprav webovej lokality pomocou nástroja Inspect Element jednoducho obnovte stránku a všetko sa vráti do normálu.

Ako zmeniť používateľského agenta v prehliadači a trikové webové stránky

Prečítajte si ďalej

O autorovi