Pertemuan 10

Cover

Melanjutkan pembelajaran tentang teknologi web dan pengembangan website.

Gallery

Navigation Structure

🔗 Navigation Structure

                    <
                    
                      header
                    
                    >
                    
                      <
                    
                      nav
                    
                    >
                    
                        <
                    
                      a
                    
                    href=
                    
                      "#home"
                    
                    >Home</
                    
                      a
                    
                    >
                    
                        <
                    
                      a
                    
                    href=
                    
                      "#gallery"
                    
                    >Gallery</
                    
                      a
                    
                    >
                    
                        <
                    
                      a
                    
                    href=
                    
                      "#about"
                    
                    >About</
                    
                      a
                    
                    >
                    
                      </
                    
                      nav
                    
                    >
                    
                      <
                    
                      h1
                    
                    >My Gallery</
                    
                      h1
                    
                    >
                    
                    </
                    
                      header
                    
                    >

Struktur: <header> pembungkus, <nav> berisi link navigation

Styling Navigation

🎨 Styling Navigation

                    
                      nav a
                    
                    {
                    
                      color
                    
                    :
                    
                      white
                    
                    ;
                    
                      text-decoration
                    
                    :
                    
                      none
                    
                    ;
                    
                      margin
                    
                    :
                    
                      0 15px
                    
                    ;
                    
                      padding
                    
                    :
                    
                      8px 12px
                    
                    ;
                    
                      transition
                    
                    :
                    
                      0.3s
                    
                    ;
                    
                    }

Tips: Add transition untuk smooth hover effect, use padding untuk lebih comfortable clicking

Hover Effects

✨ Hover Effects

                    
                      nav a:hover
                    
                    {
                    
                      color
                    
                    :
                    
                      #667eea
                    
                    ;
                    
                      background-color
                    
                    :
                    
                      rgba(102, 126, 234, 0.1)
                    
                    ;
                    
                      border-radius
                    
                    :
                    
                      4px
                    
                    ;
                    
                    }

Before Hover:
Text = white

After Hover:
Text = blue, subtle background

Header Background

🏛️ Header Background

                    
                      header
                    
                    {
                    
                      background-color
                    
                    :
                    
                      #333
                    
                      /* Dark background */
                    
                      color
                    
                    :
                    
                      white
                    
                    ;
                    
                      padding
                    
                    :
                    
                      20px 40px
                    
                    ;
                    
                      display
                    
                    :
                    
                      flex
                    
                    ;
                    
                      justify-content
                    
                    :
                    
                      space-between
                    
                    ;
                    
                      align-items
                    
                    :
                    
                      center
                    
                    ;
                    
                    }

Penjelasan: Flexbox untuk center items, padding untuk spacing, dark background untuk contrast

Activity

🎯 Your Activity

Add header & nav HTML

Tambahkan <header> dengan <nav> links ke Home/Gallery/About
Style nav links

White text, remove underline, add margin/padding
Add hover effect

Change color to #667eea on :hover, add background color
Test in browser

Hover over links, check styling dan transition smooth?