How to Create a Web Page with HTML5 and CSS
Creating the lmenu.html Web Page
Stepping into the world of Responsive Web Design
Up to this point your web page is just Liquid.
A little gadget in CSS3 makes it possible to change the appearance of your web page to adapt to the size of device screen that loads it and move on to being Responsive.
As our last entry in the stylesheet we'll add a simple media query that will adapt the web page to devices with screens from 240 pixels to 480 pixels wide.
Except for the menu this isn't that hard a task with a one column page.
The media query is really valuable when used with multiple column pages that contain images that need to be reduced in size for smaller screens.
Creating lmenu
The solution to our header text and navbar wrapping problem was added way back in lesson 2 with the little menu link that's been hiding ever since.
It's time to create our lmenu.html page and put it to work.
Copy and paste the following code into a new page in the text editor and save it as lmenu.html in the htdocs folder
Windows users:Be sure when saving lmenu.html that you set the All files filter. If you don't, Notepad will likely save it as lmenu.html.txt and you'll get a File Not Found message when you try to view it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Replacement menu lmenu.html for myfirstpage.html</title>
<meta name="description" content="Replacement Menu for myfirstpage.html">
<meta name="keywords" content="Replacement menu, myfirstpage.html">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { color: #0e0e0e; background-color:#ffffff; font-family: arial , freesans, sans;}
div { background-color: #ffffff; ;padding: 2% 2%}
ul {list-style: none;}
ul li a {text-decoration: none; font-size: 20px;color: #0e0e0e; line-height: 100%}
ul li a { color: #0e0e0e}
ul li a:hover { color: #ff0000}
h1 , h2 {color: #99ccff; text-shadow: 0px 1px 1px #000}
</style>
</head>
<body>
<form>
<input type="button" value="Go back!" onclick="history.back()">
</form>
<form>
<input type="button" value="Go back!" onclick="history.back()">
</form>
</body>
</html>
Save lmenu.html
Now you're going to copy and paste the entire menu into lmenu.html
Copy and paste the code in dark red between the onclick buttons of lmenu.html
Where it's at:
<nav>
<ul class="hnavbar">
<li><a href="#heading">Home</a></li>
<li><a href="#heading">Media Queries</a></li>
<li><a href="#heading">Drop Down Menu</a></li>
<li><a href="#heading">Contact</a></li>
</ul>
</nav>
Where it's Going:
<form>
<input type="button" value="Go back!" onclick="history.back()">
</form>
Save it Here in lmenu.html
<form>
<input type="button" value="Go back!" onclick="history.back()">
</form>
Save lmenu.html
If you look at it with your browser, this is what you'll see.
All that's left to do now is hide the navbar and display lmenu.html in its place for smaller width devices.
We do that simply by adding a Media Query to the style sheet in myfirstpage.html
Copy and paste this media query code into the style sheet of myfirstpage.html below the last entry.
@media (max-width : 560px) {
header p {
float:none;
text-align: center
}
nav {display: none} /*Hide the navbar*/
.lmenu {display: block; margin:0 1%} /*Display lmenu*/
}
Save myfirstpage.html
The media query is activated at 560px width turns off the float: left property and centers the header text.
Flex the page in and out and you'll notice that the horizontal navbar disappears instead of wrapping as shown here and lmenu is displayed in its place..
This is what the web page looks like viewed in the emulator at 412 pixels.
If this is what you see, you're doing well and ready to move on to adding drop down menus and images.
What's Next?
The next Lesson add an image to myfirstpage.html and make it responsive.
You should begin to test the web page with the Emulator Tool.
At this point you should also be checking your code in the W3C Validator.
Helps
Free Tools and Resources
Need something more advanced? Check out our Web Development Resources page for some more advanced tutorials and reference guides for HTML5, CSS3, Responsive Design and SEO.