Basic Webpage
- 1. Creating a basic webpageMichael Martin’s guide to
- 2. 10 Step’s to Success!1. Open the notepad program.
- 3. 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.
- 4. 10 Step’s to Success!3. Copy the text below to start your new page.
- 5. 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.
- 6. 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 variouscharacteristics such as the title.
- 7. 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!
- 8. 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.
- 9. 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 backgroundTo black.
- 10. 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!
- 11. 10 Step’s to Success!9. Important Terms: Body: the main part of an HTML documentXHTML: the newest version of HTMLHTML: stands for hyper text markup languageURL: stands for uniform resource locatorW3C: stands for World Wide Web ConsortiumJPG: has millions of colorsGIF: has 256 colorsRemember these terms, you might need them!
- 12. 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/