Basic Webpage

CREATING A BASIC WEBPAGEMichael Martin’s guide to

10 Step’s to Success!

1. Open the notepad program.

10 Step’s to Success!

2. Create a new folder called, Basic Webpage. Go to File, then Save As. Name it: index.html. Be sure to select “All Files” under Save as type. Save this in the folder we just created.

10 Step’s to Success!

3. Copy the text below to start your new page.

10 Step’s to Success!

For this webpage, we will be using embedded styles which are:  A CSS or cascading style sheets style that is written in the head of the XHTML document. It affects only the elements on that page.

There are also external and inline styles. External are coded in a separate text file and inline are coded in body of the page.

10 Step’s to Success!

4. Copy below the embedded styles code and also, let’s add a title “My Basic Webpage” between the title tags in the header.

A header is: The

beginning part of an

HTML document which

defines various

characteristics such

as the title.

10 Step’s to Success!

5. Let’s come back to the embedded CSS in a minute, and let’s create our Heading. Type in the body:

<h1>My First Basic Webpage</h1>

Open browser to view!

10 Step’s to Success!

6. Want to create a paragraph? Let’s do it!

Type the following:

<p>This is my <strong>first</strong> paragraph!</p>

Notice the <strong>? This bolds the text. Refresh the browser to see what we just did.

10 Step’s to Success!

7. Back to the embedded style sheet. Let’s give our page a different look. Add below:

Body {background-color: #000000;

color: #ffffff; }

This turns the text

White and background

To black.

10 Step’s to Success!

8. Look at that, it didn’t even take 10 full steps to create a webpage, but don’t worry the last two slides have information you will need!

10 Step’s to Success!

9. Important Terms: Body: the main part of an HTML document XHTML: the newest version of HTML HTML: stands for hyper text markup language URL: stands for uniform resource locator W3C: stands for World Wide Web Consortium JPG: has millions of colors GIF: has 256 colors

Remember these terms, you might need them!

10 Step’s to Success!

10. Good Job completing your first basic webpage!

Below are some links you may find useful in the future:

www.w3schools.com http://jigsaw.w3.org/http://validator.w3.org/