log inhelp

Get your own free workspace
View
 

Working with your web pages and saving

Page history last edited by Edward Lynch 3 years, 1 month ago

Section A: Making your html document

 

 

 

1.        Open a new document in Notepad.

 

2. After you finish Lesson 1, save your document.

 

3.The "Save as" dialog box appears.

 

4. In the File name box type in D:   Find the proper folder – name correctly.

 

(name correctly = all lower case, no spaces, no improper characters, a name you can identify i.e. lesson1jp.html)

 

5. Add .html to the end of your file name and click on the Save button.

 

6. Look at the thin blue banner at the top of your document on Notepad.  The title means you have successfully saved your document correctly.

 

 

 

Section B: Testing your html document

 

 

 

1.     After you save your document in Notepad, select “All Files” from the “Save as type” menu.

 

2.     Select the html icon (left click and keep held down). Pull the icon on to the desktop.

 

3.     Open your Microsoft Explorer Browser. (This won’t work with Firefox.)

 

4.     Select your desktop html icon and drop it into your browser window.

 

5.     On the browser select “View” from the menu and “Source”.

 

6.     It will bring you back to your Notepad document.

 

7.     You can make necessary changes here and save them- BUT it will only save for the documen that is on your desktop.

 

 

 

Resaving your html document

 

Go back to step #2 in Section A

 

Make sure that you save you latest modification in your D: drive

 

 

 

Copy this exactly: lesson 1

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 
 
<html>
 
<head>
 
<title>My first web page</title>
 
 
 
</head>
 
<body>
 
<h1>My second web page</h1>
 
 
 
<h2>What this is</h2>
 
<p>A simple page put together using HTML. <strong>A simple page put together using HTML.</strong> A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML.</p>
 
<h2>Why this is</h2>
 
<ul>
 
        <li>To learn HTML</li>
 
        <li>
 
                To show off
 
                <ol> <!—Just continue by turning over the page -->
 
                    <li>To my boss</li>
 
                    <li>To my friends</li>
 
                    <li>To my cat</li>
 
                    <li>To the little talking duck in my brain</li>
 
                </ol>
 
        </li>
 
        <li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
 
</ul>
 
 
 
<h2>Where to find the tutorial</h2>
 
<p><a href="http://www.htmldog.com"><img src="http://www.htmldog.com/images/logo.gif" width="157" height="70" alt="HTML Dog logo" /></a></p>
 
</html>
 

 

 

Lesson 2: Copy this html exactly

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
 
<html>
 
<html>
 
<head>
 
  <title>My first styled page</title>
 
  <style type="text/css">
 
  body {
 
    font-family: Georgia, "Times New Roman",
 
          Times, serif;
 
    color: purple;
 
    background-color: #d8da3d }
 
  h1 {
 
    font-family: Helvetica, Geneva, Arial,
 
          SunSans-Regular, sans-serif }
 
  </style>
 
</head>
 
 
 
<body>
 
 
 
<!-- Site navigation menu -->
 
<ul class="navbar">
 
  <li><a href="/index.html">Home page</a>
 
  <li><a href="/musings.html">Musings</a>
 
  <li><a href="/town.html">My town</a>
 
  <li><a href="/links.html">Links</a>
 
</ul>
 
 
 
<!-- Main content -->
 
<h1>My first styled page</h1>
 
 
 
<p>Welcome to my styled page! </p>
 
 
 
<p>It lacks images, but at least it has style.
 
And it has links, even if they don't go
 
anywhere&hellip; </p>
 
 
 
<p>There should be more here, but I don't know
 
what yet. </p>
 
 
 
<!-—If you are still with me, go to the following web site -->
 
 
 
<p><a href=http://www.w3.org/Style/Examples/011/firstcss#HTML> Click here to learn even more</a></p>
 
 
 
</body>
 
</html>
 

 

 

Comments (0)

You don't have permission to comment on this page.

PDF version