Step 1
We create a folder named CS Web Project in our documents.
! We need to create a simple HTML page named home.html linked with a CSS named mystyle.css.
Step 2
We open the HTML editor (e.g. Notepad++, Sublime etc.)
Step 3
We visit https://www.w3schools.com/html/html_css.asp and we copy the code below to a new file in our
editor.
We then save that file as home.html in our CS Web Project folder.
Now let’s create our mystyle.CSS document
Step 4
We visit https://www.w3schools.com/html/html_css.asp
We create a new empty file in our editor and write the code below.
We then save the file as mystyle.css in our CS Web Project Folder
Congratulations! We have now created a simple html page linked with an external CSS
Let’s add a header.
HTML part
We visit https://www.w3schools.com/howto/howto_css_style_header.asp
We add the code below in our home.html page WITHIN the <body> and </body> html tags. Usually, we
place right under the <body> tag as we want to have the header at the top of our page.
And Save it.
CSS Part
We add the code below to the bottom of our mystyle.css file and save it.
Congratulations! We have now created a simple html page linked with an external CSS with a header.
Now Let’s add the main Navigation Menu
We visit - https://www.w3schools.com/howto/howto_js_topnav.asp
We add the code to our home.html page, after the HEADER closing </div> if we want our menu to appear
below the header or below the <body> tag if we want the menu to appear above the header and save it.
Now let’s do the same for the CSS part.
We add the CSS code below to the bottom of our mystyle.css document and save it.
Now let’s align our content to the middle.
We visit https://www.w3schools.com/howto/howto_css_center_website.asp
We add the code below in our home.html file right before the </body> tag and save it.
The idea is that later, whatever we put under the <!—Page Content --> will be aligned in the center of the
page.
We now have to add the css part.
We add the code below, at the bottom of our mystyle.css file and we save it.
Congratulations, we now have a nice centered content page.
Lets create the footer.
We add the code below, in our home.html file right before the </body> and save it.
We now add the following code to the bottom of our mystyle.css file and save it.
Congratulations we have now a footer.
There is only one thing missing….
We have to insert the correct links in our navigation menu….
Generic Form
<a href="url">link text</a>
Link to w3schools
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
So… since we have all pages (home.html, about_us.html and contact_us.html)
in the same folder the link should look something like this:
<a href=”home.html”>Home</a>
After we do that. We create 2 identical copies of the home.html file and rename them to about_us.html and
contact_us.html.
