HTML Breadcrumbs Tutorial

Breadcrumbs zijn een nuttig secundair navigatiesysteem voor het creëren van HyperText Markup Language (HTML) webpagina's.Deze stukken van gekoppelde tekst een werkwijze voor bezoekers om te gebruiken bij het reizen door middel van een website en het bijhouden van waar ze zijn.U kunt deze techniek relatief eenvoudig voor uw eigen pagina's te gebruiken, en geef uw website bezoekers een verbeterde ervaring.

toevoegen Breadcrumbs

  • Veel opties bestaan ​​voor het toevoegen van broodkruimels naar de top van webpagina's.Kies uit een verscheidenheid van gemeenschappelijke separatoren om een ​​visuele voorstelling van ouder en kind pagina's geven.

    Om te beginnen, een populaire optie voor het scheiden van paneermeel is naar rechts pijlen tussen elk gekoppeld woord.Om dit te doen, voert het woord, verbinden de tekst naar de juiste pagina en vervolgens tegelijkertijd op de "Shift" en "& gt;"Pijltjestoets.Doe dit voor elke ingang en zorg ervoor om druk op de spatiebalk na elke pi

    jl wordt toegevoegd.Bijvoorbeeld:
    & lt; a href = "home.html" & gt; Huis & lt; / a & gt;& gt;& lt; a href = "glasswork.html" & gt; Glas Werk & lt; / a & gt;& gt;& lt; a href = "sculptures.html" & gt; Sculptures & lt; / a & gt;

    De volgende afscheider staat bekend als een "pipe", dat is een enkele verticale lijn die op en neer tussen elke pagina koppeling gaat.Gebruik deze optie door de gekoppelde tekst toe te voegen en druk op de "Shift" en "|"lijn knop op hetzelfde moment.Herhaal deze actie voor elke verbinding en de ruimte elke regel naar behoren.Bijvoorbeeld:
    & lt; a href = "home.html" & gt; Huis & lt; / a & gt;|& lt; a href = "resume.html" & gt; CV & lt; / a & gt;|& lt; a href = "bio.html" & gt; Biografie & lt; / a & gt;

    Volgend, gebruiken dubbele punten voor elke breadcrumb onderscheiden.Nogmaals, het type in de gelinkte pagina's en deze keer druk op de "Shift" en ":" dubbele punt knopen samen, direct na het beëindigen van "& lt; / a & gt;"anchor tag.Ruimte elke link na de dikke darm.Ter illustratie:
    & lt; a href = "home.html" & gt; Huis & lt; / a & gt ;: & lt; a href = "shows.html" & gt; Shows & lt; / a & gt ;: & lt; a href = "cali.html"& gt; Californië & lt; / a & gt;

    Om door te gaan, schuine strepen zijn ook opgenomen in de afscheider lijst.Doe dit door te typen in uw gelinkte tekst, volg het met een spatie, druk op de "/" slash-knop (in combinatie met het vraagteken op het toetsenbord) en zorgen voor andere ruimte voor de volgende invoer.Voer de volgende:
    & lt; a href = "home.html" & gt; Huis & lt; / a & gt;/ & Lt; a href = "info.html" & gt; Informatie & lt; / a & gt;/ & Lt; a href = "contact.html" & gt; Contact & lt; / a & gt;

    Tenslotte kogels zijn een makkelijke manier om het onderscheid tussen koppelingen te maken.Om deze te gebruiken, voert u de gekoppelde tekst, druk op de spatiebalk, typ in de unicode tekst "& amp; # 9679;"en voeg een andere ruimte.Dit unicode geeft de code voor de "zwarte cirkel", dat is meer uitgesproken dat de standaard "."periode symbool.Bijvoorbeeld:
    & lt; a href = "home.html" & gt; Huis & lt; / a & gt;& amp; # 9679;& lt; a href = "pubs.html" & gt; publicaties & lt; / a & gt;& amp; # 9679;& lt; a href = "mags.html" & gt; Tijdschriften & lt; / a & gt;

Styling Breadcrumbs

  • Om een ​​effectieve navigatie te behouden, volg een aantal eenvoudige stappen om te controleren of broodkruimels maken zijn zo bruikbaar als mogelijk.

    Ten eerste, als de pagina titel is tussen 02:59 woorden, gebruik maken van de volledige titel in de navigatie.Langere titels, meer dan drie woorden, zijn moeilijker te volgen en moeten worden ingekort.Daarnaast, blijf weg van afkortingen die niet goed bekend zijn verbijsterende bezoekers te voorkomen.

    Daarna, zorg ervoor dat alle navigatie-links bevatten een geactiveerde eerste letter;echter, artikelen en korte connectors (dwz een, een, de, en BY, etc.) niet aan deze regel.

    Na, verzorgen van het aantal broodkruimels dat u daadwerkelijk gebruik maken, zodat uw kijkers niet te verdwalen in dit alles.Een goede vuistregel is om vast te houden aan zes of minder kruimels, of 90 of minder karakters.Verder, als pagina's zijn verkrijgbaar bij verschillende paden, gebruik dan een duidelijke navigatie in het menu om bezoekers te begeleiden langs de meest gebruikte route.

    Tenslotte evalueren van de broodkruimel om ervoor te zorgen dat alleen essentiële schakels zijn inbegrepen.Selecteer alleen de belangrijkste pagina's voor uw navigatiesysteem omdat kruimels nooit doelloos links moeten geven.

Resources

  • W3Schools Online Web Tutorials
  • World Wide Web Consortium - Web Standards
455
0
0
Html