Scribd
Upload
5 views

To make your assignment easier

The document outlines the steps to create a simple web project with an HTML page (home.html) linked to a CSS file (mystyle.css). It includes instructions for adding a header, navigation menu, centered content, and a footer, as well as how to link to additional pages. Finally, it instructs to create copies of the home.html file for about_us.html and contact_us.html.

Uploaded by

panontasthepro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

To make your assignment easier

The document outlines the steps to create a simple web project with an HTML page (home.html) linked to a CSS file (mystyle.css). It includes instructions for adding a header, navigation menu, centered content, and a footer, as well as how to link to additional pages. Finally, it instructs to create copies of the home.html file for about_us.html and contact_us.html.

Uploaded by

panontasthepro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

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.

You might also like