How to Create a Web Page with HTML5 and CSS
Creating the lmenu.html Web Page
Just to be clear, I'm working on a Linux OS and hoping Windows and Mac users's procedures are similar.
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 drop down menu 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
<!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>
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
<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>
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 step to our aleady existing Media Query in myfirstpage.html
Copy and paste the code in dark red into the style sheet of myfirstpage.html as shown below.
The existing media query:
@media (max-width : 560px) {
header p {
float:none;
text-align: center
}
}
Add the code in red:
@media (max-width : 560px) {
header p {
float:none;
text-align: center
}
nav {display: none}
.lmenu {display: block; margin:0 1%}
}
Save myfirstpage.html
Now resize the browser to a width of about 550px or less. Start using the emulator tool if you desire.
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.