Hoe webpagina's in Safari te bewerken met Inspect Element

Met zijn Inspect Element-tool kunt u met Safari sleutelen aan de front-endcode van elke webpagina. Als u wilt testen hoe een pagina eruit zou zien met verschillende tekst of afbeeldingen, kunt u dit doen door de code te wijzigen met Inspect Element.

Dit is een eenvoudige handleiding voor beginners om uit te leggen hoe u kunt beginnen met experimenteren met Inspect Element in Safari om de tekst en afbeeldingen van een website te bewerken met minimale kennis van coderen.

Wat is Inspecteer-element?

Inspect Element is een ontwikkelaarstool. Het is beschikbaar in Safari, maar ook in andere webbrowsers zoals Chrome, Firefox en Edge. Met Inspect Element kun je achter het gordijn van een website gluren om de front-end code te onthullen, zoals de HTML en CSS. Het geeft u echter geen zichtbaarheid van de back-end, zoals de databases.

U kunt deze code niet alleen zien, maar u kunt deze ook aanpassen. Dit betekent dat u het uiterlijk van een website kunt wijzigen. U kunt een afbeelding vervangen, wat tekst herformuleren, een ander lettertype gebruiken, het kleurenschema wijzigen en meer. Deze bewerkingen zijn echter lokaal. Ze zullen aan niemand anders verschijnen behalve aan jou; ze verdwijnen zodra u de pagina vernieuwt of weggaat.

Waarom zou u Inspect Element gebruiken?

Inspect Element is een geweldige tool als je een beginnende webontwikkelaar bent. U kunt letterlijk de code zien die uw favoriete website aandrijft, en deze naar wens aanpassen in een echte wereld. Er zijn veel leuke inzichten die u kunt krijgen door Inspect Element te gebruiken.

Bedrijfseigenaren kunnen bijvoorbeeld kijken naar zoekwoorden die zijn opgenomen in de website van een concurrent, of ontwerpers kunnen: gebruik Inspect Element om een ​​lettertype te identificeren die ze aantrekkelijk vinden of om snel een ander kleurenschema op hun website te testen.

Voor nu gaan we ons concentreren op het bewerken van de basis van een webpagina met Inspect Element.

Toegang krijgen tot Inspect Element in Safari

U kunt Inspect Element in Safari openen met behulp van het ontwikkelaarsmenu:

1. Safari openen.
2. Klik Safari in de bovenste menubalk.
3. Selecteer in het vervolgkeuzemenu Voorkeuren.
4. Selecteer de Geavanceerd optie.
5. Vink het vakje aan dat zegt: Toon Ontwikkel-menu in menubalk.

Nadat u deze optie hebt geselecteerd, kunt u: klik met de rechtermuisknop op een webpagina en selecteer Inspecteer element. Als alternatief kunt u selecteren: Ontwikkelen in de menubalk, en dan Webinspector tonen.

Webelementen zoeken in Inspect Element

Om te beginnen met het bewerken van een element, klik met de rechtermuisknop wat u wilt bewerken en klik op Inspecteer element. Hierdoor wordt het ontwikkelaarsvenster geopend, waarbij het relevante gedeelte is gemarkeerd. Het kan zijn dat het specifieke element dat u wilt toevoegen (bijvoorbeeld de afbeelding of de tekst) verborgen is; om het te vinden, gebruik de pijlen aan de linkerkant om de geneste secties uit te vouwen.

Om uw selectie te verfijnen, klikt u op de doelpictogram van de werkbalk Element inspecteren. Terwijl u door de code navigeert, wordt dat gedeelte op de website gemarkeerd. Of u kunt uw cursor gebruiken om een ​​sectie op de site aan te wijzen. Dit is handig als u zich op iets specifieks wilt concentreren in een druk deel van een webpagina.

Hoe de tekst van een website te bewerken met Inspect Element

Om een ​​stuk tekst bewerkbaar te maken nadat het in de broncode van een site is gevonden, Dubbelklik het. U kunt nieuwe tekst rechtstreeks in de code typen of bestaande tekst verwijderen. Wanneer het bewerken is voltooid voor een bepaalde reeks tekst, drukt u op Binnenkomen, en de tekst op de webpagina zal veranderen.

Zo simpel is het eigenlijk! De enige keren dat dit niet werkt, is wanneer de tekst daadwerkelijk deel uitmaakt van een afbeelding, zoals een logo.

Hoe de afbeeldingen van een website te bewerken met Inspect Element

Terwijl afbeeldingen aan de voorkant visueel voor u verschijnen, verschijnen ze in de websitecode als links. Jij kan klik met de rechtermuisknop en afbeelding en kies Inspecteer element om naar de plaats van die afbeelding in de code te springen. Website-afbeeldingen hebben meestal JPG-, GIF- of PNG-bestandsextensies, maar niet uitsluitend.

Dubbelklik deze afbeeldingsreeksen en u kunt ze bewerken of desgewenst gewoon op uw systeem opslaan. Als u de afbeelding wilt vervangen, schakelt u deze uit voor een vervangende afbeeldings-URL. Of u kunt de codereeks volledig verwijderen om de afbeelding uit het zicht te verwijderen.

Duik in websites met Safari

Met Safari's Inspect Element-tool kun je gemakkelijk de code vinden en wijzigen die overeenkomt met tekst en afbeeldingen, wat net zo eenvoudig is als het verwisselen van een tekst- of URL-reeks. Als u klaar bent met het bewerken van een website met Inspect Element, vernieuwt u eenvoudig de pagina en alles zal weer normaal zijn.

Hoe u de gebruikersagent van uw browser en trucwebsites kunt wijzigen

Lees volgende

Over de auteur