Hvordan lage en navigasjonslinje i HTML?

I moderne databehandling kan en webside inneholde lenker som omdirigerer til flere andre sider. Vanligvis er disse koblingene plassert i en bestemt stilling på nettsiden. Det spesifikke stykket som inneholder disse koblingene er kjent som navigasjonslinjen.

Navigasjonslinjen er den primære komponenten i en hvilken som helst webside/nettsted. En navigasjonsstang kan være i horisontalt eller vertikal retning. Dette innlegget har sett på viktigheten av navigasjonsstenger, og skisserer flere metoder for å lage en navigasjonslinje i HTML. De mulige resultatene av denne bloggen er:

• Hvordan lage en horisontal navigasjonslinje i HTML?
• Hvordan lage en vertikal navigasjonslinje i HTML?

Metode 1: Hvordan lage en horisontal navigasjonslinje i HTML?

HTML -dokument er kombinasjonen av hundrevis av tagger. Hver tag refererer til en viss spesifikk funksjonalitet. Dessuten kan du også kombinere flere elementer for å lage en tilpasset design. En navigasjonslinje kan opprettes ved hjelp av

og
• Tagger. Denne delen gir en detaljert guide for å lage horisontale barer i HTML.

  HTML -koden for å lage en horisontal navigasjonslinje vises nedenfor.

  Html

  
  
  
  
  
  
  
  
  
  
  
  • Hjem
  
  
  • Om oss
  
  
  • Kontakt oss
  
  
  • Galleri
  
  
  
  
  
  

  I denne koden:

  • Vi har laget en .
  • Inne i, opprettes en liste ved hjelp av
    stikkord.
    • For å legge til varene i
      Tag, vi har satt inn listeelementene ved hjelp av
      • stikkord.
      • Til slutt, inne i taggen, setter vi inn lenkene til andre HTML -sider ved hjelp av taggen.

      For bedre presentasjon brukes følgende CSS -kode på HTML.

      CSS

      ul
      
      Listestil: Ingen;
      
      li a
      
      Tekstdekorasjon: Ingen;
      Display: Block;
      FLOAT: Venstre;
      polstring: 10px 15px;
      Font-størrelse: 20px;
      Bakgrunnsfarge: Lightgray;
      farge svart;
      Font-Family: Georgia, 'Times New Roman', Times, Serif;
      
      Li A: Hopp
      
      bakgrunnsfarge: Lightsalmon;
      Farge: Hvit;
      

      I koden ovenfor:

      • Stylingegenskapen til listen er satt til ingen.
      • Dessuten er forskjellige CSS-egenskaper inkludert (tekst-dekorasjon, visning, float osv.) brukes på listeelementene.
      • En sveveeffekt blir også lagt til
      • stikkord.

      Produksjon

      Utgangen viser at vi har laget en horisontal navigasjonslinje ved hjelp av HTML og CSS.

      Metode 2: Hvordan lage en vertikal navigasjonslinje i HTML?

      De primære ingrediensene (

      ,
      • ) er de samme for vertikale og horisontale barer. Derfor er en vertikal stang enkel å lage. I dette eksemplet har vi utøvd følgende kode for å opprette en navigasjonslinje i HTML:

        Html

        
        
        
        
        
        
        
        
        
        
        • Hjem
        
        
        • Om oss
        
        
        • Kontakt oss
        
        
        • Galleri
        
        
        
        
        

        I denne koden:

        • Vi har laget en liste ved hjelp av
          stikkord.
          • Inne i
            tag, vi har satt inn listeelementene ved hjelp av
            • stikkord.
            • Deretter har vi satt inn lenkene til andre HTML -sider ved hjelp av tag.

            For en bedre estetikk av navigasjonslinjen har vi brukt følgende CSS -kode og plassert i en ekstern CSS -fil:

            CSS

            ul
            
            Listestil: Ingen;
            
            li a
            
            Tekstdekorasjon: Ingen;
            Display: Block;
            Bredde: 180px;
            polstring: 10px 15px;
            Font-størrelse: 20px;
            Bakgrunnsfarge: Lightgray;
            farge svart;
            Font-Family: Georgia, 'Times New Roman', Times, Serif;
            
            Li A: Hopp
            
            bakgrunnsfarge: Lightsalmon;
            Farge: Hvit;
            

            I ovennevnte CSS -kode:

            • Listestylingen er satt til ingen.
            • Flere stiler brukes på listeelementene.
            • Til slutt brukes også sveveteffekten på listenes elementer.

            Produksjon
            

            Utgangen viser at vi har laget en vertikal navigasjonslinje med hell.

            Værsågod! Du har lært å lage en horisontal så vel som vertikal navigasjonslinje i HTML.

            Konklusjon

            I HTML kan vi lage en navigasjonslinje ved å lage en enkel liste ved hjelp av

            ,
            • og tagger. En navigasjonslinje kan være vertikal eller horisontal. Dessuten kan du legge til forskjellige stiler til det ved å bruke CSS. Dette innlegget har demonstrert metodene for å lage navigasjonsstenger i HTML. Ved hjelp av en navigasjonslinje kan man navigere til de forskjellige sidene på nettstedet.