FirstPage

Let’s Write HTML!

You are ready to begin HTML Lessons if you have –

A topic – see Personal Project
Storyboard sketches
Folders ready in your H: drive

Create a topic folder inside your web design folder.
Create an images folder inside your topic folder.
Open notepad and add the beginning tags for your first page.

<html>

<head>
<title>Title of Your Web Page</title>
</head>

<body>
Type a sentence or two of your choosing between the body tags.
</body>

</html>

Save the first page as index.html inside your topic folder.

When you are creating web pages you will want to have several files and folders open at the same time. Don’t close any windows, just toggle through them.
Use Internet Explorer to open your topic folder.
Double click on your index page to see what it looks like as a web page.
When you make a coding change save it in Notepad and refresh it on Internet Explorer.
When you insert a picture you need to explain to the computer where that picture is located.

<img src=”images/flag.jpg”>

Working with HTML

Opening tag} <body>Your text is placed between the tags.</body> {Closing tag

HTML code must be exact. To get the results you want, you will have to type code that is error free. For instance, if you omit / in a closing tag, the feature you want turned off will continue in effect. Once you gain a basic understanding of HTML code, you should be able to look at your work, spot errors, and fix them.

Typing code can be very tedious, but there are shortcuts. Suggestion: if typing code helps you learn it, by all means type it! Use these copying shortcuts when you know your HTML well enough to use it correctly and spot errors.

Paste a copy of the opening tag after your text – add the / in the closing tag
Use copy/paste to repeat certain tags in your page
Copy/paste code from the lessons to your page

Basic Guidelines for Using Notepad

To open Notepad the first time:

Find it in the Tools folder on your desktop
OR click the Start button, select Run, and type: notepad

When your Website is in progress, open your Web page first
- To open Notepad go to the View menu and click Source

Warning: don’t go to Source again—it will open a copy of your source code
Watch your taskbar—if you see another Notepad task tab, close the copy

Manipulate the size and position of the Notepad window to meet your needs

Click in the blue title bar to drag the window where you want it
Use the Maximize /Restore Down button to make Notepad fill your window, or make it smaller so you can see your Web page behind it

Notepad has limited features—make the most of what it can do:

Edit menu—Find and Replace are useful tools for locating specific HTML text
Format menu—check Word Wrap to prevent text from disappearing off your screen
Format> Font—you can choose a more readable font size or style

Your work window will look something like this:

Window appearance when working in Notepad

Tips to remember:

Toggle between your Web page and Notepad using the bottom taskbar
Choose Save As to save the starting code you write in Notepad
Name your file index.htm and save to your Website folder in your H: drive
Open index.htm in your H: drive
Save changes that you make in Notepad (File> Save or Ctrl + S)
Click Refresh in your browser window to see your revised Web page

If the page doesn’t display your changes, check your steps:

ALWAYS Save in Notepad when your changes are complete

ALWAYS click Refresh to view your updated page in the browser

Copyright Notice: No materials on any of the Bellingham Schools’ web pages may be copied without express written permission unless permission is clearly stated on the page.
Permission / Image Information / Return to Tech Connections Homepage / District Homepage

Bellingham Public Schools. 1306 Dupont St. Bellingham WA 98225-3198