Basic Webpage


Published on

Teaches users how to create a basic webpage in 10 easy steps

Published in: Education, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Basic Webpage

  1. 1. Creating a basic webpage<br />Michael Martin’s guide to <br />
  2. 2. 10 Step’s to Success!<br />1. Open the notepad program. <br />
  3. 3. 10 Step’s to Success!<br />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. <br />
  4. 4. 10 Step’s to Success!<br />3. Copy the text below to start your new page. <br />
  5. 5. 10 Step’s to Success!<br />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. <br />There are also external and inline styles. External are coded in a separate text file and inline are coded in body of the page. <br />
  6. 6. 10 Step’s to Success!<br />4. Copy below the embedded styles code and also, let’s add a title “My Basic Webpage” between the title tags in the header. <br />A header is: The <br />beginning part of an <br />HTML document which<br /> defines various<br />characteristics such<br /> as the title. <br />
  7. 7. 10 Step’s to Success!<br />5. Let’s come back to the embedded CSS in a minute, and let’s create our Heading. Type in the body:<br />&lt;h1&gt;My First Basic Webpage&lt;/h1&gt; <br />Open browser to view! <br />
  8. 8. 10 Step’s to Success!<br />6. Want to create a paragraph? Let’s do it! <br />Type the following: <br />&lt;p&gt;This is my &lt;strong&gt;first&lt;/strong&gt; paragraph!&lt;/p&gt;<br />Notice the &lt;strong&gt;? This bolds the text. Refresh the browser to see what we just did. <br />
  9. 9. 10 Step’s to Success!<br />7. Back to the embedded style sheet. Let’s give our page a different look. Add below:<br />Body {background-color: #000000;<br /> color: #ffffff; }<br />This turns the text <br />White and background<br />To black. <br />
  10. 10. 10 Step’s to Success!<br />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!<br />
  11. 11. 10 Step’s to Success!<br />9. Important Terms: <br />Body: the main part of an HTML document<br />XHTML: the newest version of HTML<br />HTML: stands for hyper text markup language<br />URL: stands for uniform resource locator<br />W3C: stands for World Wide Web Consortium<br />JPG: has millions of colors<br />GIF: has 256 colors<br />Remember these terms, you might need them!<br />
  12. 12. 10 Step’s to Success!<br />10. Good Job completing your first basic webpage! <br />Below are some links you may find useful in the future: <br /><br /><br /><br />