Naar hoofdcontent

Substitutions met HTML

Dit artikel gaat dieper in op het gebruik van substitution rules, specifiek op het maken van regels voor HTML.

Broncode bekijken​

Om substitution rules te maken met daarin HTML heb je natuurlijk de HTML code van je pagina nodig. In de meeste browsers kun je de broncode van een pagina bekijken door op CTRL + U te drukken terwijl je de pagina open hebt. Hier kun je dan de code opzoeken die je wilt aanpassen. Je kunt hiervoor de ingebouwde zoekfunctie gebruiken (CTRL + F).

Developer tools

Misschien ben je al bekend met de developer tools van je browser. In dat geval is het van belang hier beperkt gebruik van te maken. De developer tools laten witruimte soms anders zien dan de daadwerkelijke witruimte in de broncode, waardoor je onbewust ongeldige regels kunt maken. Zie voor meer info het voorbeeld.

Voorbeeld​

We kunnen ons voorstellen dat dit nu nog redelijk onduidelijk is als je nog nooit met HTML code hebt gewerkt. Hieronder proberen we aan de hand van een voorbeeld uit te leggen hoe dit precies werkt. Je kunt dit voorbeeld, op het daadwerkelijk aanmaken van de regel na, volgen op je eigen computer.

Doel: de zoekknop in de menubalk weghalen op clonable.net

Clonable menu voorbeeld

Vinden van de originele code​

Klik met de rechtermuisknop op het zoekicoontje en kies vervolgens de optie Element inspecteren (de precieze benaming kan per browser verschillen). Je ziet dan een scherm zoals hieronder: de developer tools (dit verschijnt meestal onderin je browser): Clonable devtools voorbeeld

In het blauw staat het element geselecteerd waarop je hebt geklikt. Het kan echter zijn dat dit alleen het binnenste element is en niet het gehele element. Om dit te testen kun je je muis bewegen over de regels boven de geselecteerde blauwe regel, beginnend vanaf de blauwe regel. Je ziet dan op de pagina verschillende elementen met blauw en/of geel gemarkeerd worden. Zodra je ziet dat een gedeelte gemarkeerd wordt buiten wat je wilde aanpassen, ben je een regel te ver gegaan.

In dit geval bestaat het hele element uit:

Developer Tools
<a style="margin: 0 25px 0 6px;" class="eltdf-search-opener eltdf-icon-has-hover eltdf-search-opener-icon-pack" href="javascript:void(0)">
    <span class="eltdf-search-opener-wrapper">
        <i class="eltdf-icon-ion-icon ion-ios-search "></i>
    </span>
</a>

Nu we dit weten kunnen we in de broncode (CTRL + U) gaan zoeken naar dit fragment. Meestal is het makkelijk om hiervoor naar een class naam of een ander kenmerk van het element te zoeken. In dit geval gaan we in de broncode zoeken naar eltdf-search-opener. We vinden dan onderstaand stuk code, waarin de gezochte regel gemarkeerd is.

view-source:https://www.clonable.net/
           </ul> 
         </nav> <a style="margin: 0 25px 0 6px;" class="eltdf-search-opener eltdf-icon-has-hover eltdf-search-opener-icon-pack" href="javascript:void(0)"> <span class="eltdf-search-opener-wrapper"> <i class="eltdf-icon-ion-icon ion-ios-search "></i> </span> </a> <a class="eltdf-side-menu-button-opener eltdf-icon-has-hover eltdf-side-menu-button-opener-svg-path" href="javascript:void(0)" style="margin: 0 -4px 0 0;"> <span class="eltdf-side-menu-icon"> 
           <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="22px" height="22px" viewbox="0 0 22 22" enable-background="new 0 0 22 22" xml:space="preserve"> <rect x="1.083" y="1.042" width="5" height="5" /> <rect x="8.614" y="1.042" width="5" height="5" /> <rect x="16.051" y="1.042" width="5" height="5" /> <rect x="1.083" y="8.521" width="5" height="5" /> <rect x="8.614" y="8.521" width="5" height="5" /> <rect x="16.051" y="8.521" width="5" height="5" /> <rect x="1.083" y="16.083" width="5" height="5" /> <rect x="8.614" y="16.083" width="5" height="5" /> <rect x="16.051" y="16.083" width="5" height="5" /> 
           </svg> </span> </a> 
        </div> 
       </div> 
      </div>

Zoals je kunt zien is dit een goed voorbeeld van waarom je niet zomaar code uit de developer tools kunt overnemen voor een substitution. De developer tools gaven deze ene regel weer als meerdere regels.

Aanmaken van de regel​

Nu we de broncode hebben, kunnen we de substitution rule aanmaken:

Original

Replacement

Options

Als laatste controleren we nog of onze substitution niet het clone-domein bevat. Als dat zo is, moeten we het vervangen door het originele domein. In dit geval is dat niet zo, dus nu kunnen we de regel opslaan.

De substitution die we nu gemaakt hebben, zoekt dus naar de broncode van de zoekknop en vervangt deze door niks (= weghalen). We hopen dat je nu een beter beeld hebt van hoe je met de substitutions kunt werken in combinatie met HTML.

Laatst bijgewerkt op