Getting Started with HTML Please use speaker notes for additional information!

Notepad Open Notepad to write your code. Do not use a word processor. Notepad does not insert any extra characters in your code so what you write is what you get...

I am testing this from my hard drive rather then from the web - you do not see the http in the address, but rather the address on my computer. In Browser

I am testing this from my hard drive rather then from the web - you do not see the http in the address, but rather the address on my computer. In Browser

I am testing this from my hard drive rather then from the web - you do not see the http in the address, but rather the address on my computer. In Browser

The basic HTML tags for an HTML document are enclosed in. The HTML tag coded as is written on the first line of code to indicate that the code is in HTML. The HTML document has two major parts: HEAD and BODY. Here we are showing that we are in the portion of the code. When the head portion is complete, it is closed with. The title of the document is enclosed in the start tag and the close tag. The words in between the tags are the title. The TITLE will appear in the top left of the screen when the code is executed. Look at the output on the previous slide! Writing HTML

Notepad - Saving your HTML file Be sure that you save your file with a.html or a.htm extension. In this example I saved my file as getstart.html You need to have type All files (*.*).

Writing HTML continued This code uses the H1 and H2 tags. These are header tags. The 1 is the biggest header font, and the 2 is one level down. Notice that the header tags include the open and the close. The text for the header is enclosed between the opening and closing tags. The BODY is where the main code to create the HTML web page or HTML document is located.

Writing HTML continued for unordered list has an open and a close. The last two lines of code close the BODY and close the HTML. is the tag for each item in the list. Notice there is also a close. See the results on the next screen.

Each of the lines in the list are list items inside an unordered list. The lines are preceded by bullets to signify a list. Note that I started a new unordered list without closing the original - this causes the indenting that you see. The indenting uses different bullets. opens the list. Note that the occurs 4 times and then another is used. This means I want a list within a list and causes the indenting and the change of bullets. When I finish the list within a list, I close the inner ul and continue with another for the original list. Write your HTML code in Notepad Save it as a name with a.html or.htm I leave the notepad open for possible changes In Netscape or Explorer open the file In Netscape, this is done with File/Open Page In Explorer, this is done with File/Open You will need to browse or explorer and find the file or type in the name

Opening the file in Netscape In Netscape, first do a File/Open File. Highlight the file you want and press Open. Note the name you highlight will appear in the file name spot after it is highlighted.

In Browser

Opening the file in Explorer To open the file, use File/Open. Use browse to find the file. Press OK and the Web page will load

Making a change Demonstrate getting started Demonstrate getting started Things to do: Write your HTML code in Notepad Save it as a name with a.html or.htm I leave the notepad open for possible changes In Netscape or Explorer open the file In Netscape, this is done with File/Open Page In Explorer, this is done with File/Open You will need to browse or explorer and find the file or type in the name Your page should no appear in the browser window - if it doesn't you probably have a problem in your code To fix problems or add to your page, switch back to notepad and make the changes Save the changes under the same name if you want to continue working on the same page In the browser, use Reload or Refresh to see the changes Note: Occasionally I have to go back and open the page again instead of using reload or refresh I changed this page in Notepad by adding BGCOLOR and TEXT to the BODY tag. After making the changes, I saved.

Demonstrate getting started Demonstrate getting started Things to do: Write your HTML code in Notepad Save it as a name with a.html or.htm I leave the notepad open for possible changes In Netscape or Explorer open the file In Netscape, this is done with File/Open Page In Explorer, this is done with File/Open You will need to browse or explorer and find the file or type in the name Your page should no appear in the browser window - if it doesn't you probably have a problem in your code To fix problems or add to your page, switch back to notepad and make the changes Save the changes under the same name if you want to continue working on the same page In the browser, use Reload or Refresh to see the changes Note: Occasionally I have to go back and open the page again instead of using reload or refresh I changed this page in Notepad by adding BGCOLOR and TEXT to the BODY tag. After making the changes, I saved. Making a change

After making changes to the page in Netscape, I save the pages. Then I go back to Netscape and use Reload. Note: You can also open the page again.

Viewing page Remember, when developing Web sites, you should always test your page in Netscape and Explorer with as many versions as possible. If you have access to computers with different settings and different screen sizes, it is always wise to view a professional site as many ways as possible. Remember there are a wide variety of users and user configurations.

View source To see the HTML code for your page or one of mine in Netscape, go to View/Page Source. The source will appear on a separate screen.

View source using Netscape 6.2

View source To see the source code in Explorer, go to View/Source. The source code will appear in Notepad.

View/Source in Explorer brings up the source code in Notepad.