Session 9 - Headers and Footers
1. Add meta tags in the head.
<!DOCTYPE html> <html lang="en-US"> <head> <title>FSF Training</title> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="vasey" > <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="assets/styles.css"> <script src="assets/members.js"></script> </head>
All about
Meta Tags
2. Modify body style and add menu and footer styles.
body { font-family: arial; color: rgb(128,0,0); /* Maroon */ margin: 0; }
nav { overflow: hidden; background-color: #800000; /* Maroon */ position: fixed; top: 0; width: 100%; } nav a { float: left; display: block; color: #ffffff; /* White */ text-align: center; padding: 14px 16px; text-decoration: none; font-size: 24px; } nav a:hover { color: #00008B; /* Dark Blue */ background-color: #ffffff; /* White */ } footer { text-align: center; color: rgb(255,255,255); /* White */ background-color: rgb(128,0,0); /* Maroon */ padding: 5px; }
3. Add Menu,Footer and ID tags to each section header.
<body> <div id="top"></div> <nav> <a href="#top">Top</a> <a href="#about">About</a> <a href="#team">The Team</a> <a href="#locations">Locations</a> <a href="#programs">Programs</a> </nav> <div style="padding: 20px";> <!-- open div padding --> <br/><br/> <h1>The Next Step Training Website</h1> <img src="images/logo.png"> <br/><br/> <div id="about"></div><br/><br/> <h2>About</h2> : : <div id="team"></div><br/><br/> <h2>The Team</h2> : : <div id="locations"></div><br/><br/> <h2>Locations</h2> : : <div id="programs"></div><br/><br/> <h2>Programs</h2> : : </div> <!-- close div padding --> <footer><a href="#"><button>facebook</button></a><a href="#"><button>instagram</button></a><a href="#"><button>youtube</button></a></footer> </body> </html>
Open
FSF Website
