Getting Started with HTML

Getting Started with HTML

Please use speaker notes for additional information!

NotepadNotepadOpen 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 BrowserIn Browser





The basic HTML tags for an HTML document are enclosed in < >.

The HTML tag coded as <html> 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 <head> portion of the code. When the head portion is complete, it is closed with </head>.

The title of the document is enclosed in the start tag <title> and the close tag</title>. 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 HTMLWriting HTML

Notepad - Saving your HTML fileNotepad - 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 continuedWriting 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 <h1> and the close </h1>. 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 continuedWriting HTML continued

<ul> for unordered list has an open and a close.

The last two lines of code close the BODY and close the HTML.

<li> is the tag for each item in the list. Notice there is also a close </li>. 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.

<ul>opens the list. Note that the <li> occurs 4 times and then another <ul> 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 <li> for the original list.

<ul><li>Write your HTML code in Notepad</li><li>Save it as a name with a .html or .htm</li><li>I leave the notepad open for possible changes</li><li>In Netscape or Explorer open the file</li><ul><li>In Netscape, this is done with File/Open Page</li><li>In Explorer, this is done with File/Open</li></ul><li>You will need to browse or explorer and find the file or type in the name</li>

Opening the file in Netscape

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.


Opening the file in Explorer

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 changeMaking a change

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

I changed this page in Notepad by adding BGCOLOR and TEXT to the BODY tag. After making the changes, I saved.

<html><head><title>Demonstrate getting started</title></head><body bgcolor="yellow" text="red"><h1>Demonstrate getting started</h1><h2>Things to do:</h2><ul><li>Write your HTML code in Notepad</li><li>Save it as a name with a .html or .htm</li><li>I leave the notepad open for possible changes</li><li>In Netscape or Explorer open the file</li><ul><li>In Netscape, this is done with File/Open Page</li><li>In Explorer, this is done with File/Open</li></ul><li>You will need to browse or explorer and find the file or type in the name</li><li>Your page should no appear in the browser window - if it doesn't you probably havea problem in your code</li><li>To fix problems or add to your page, switch back to notepad and make the changes</li><li>Save the changes under the same name if you want to continue working on thesame page</li><li>In the browser, use Reload or Refresh to see the changes</li><li>Note: Occasionally I have to go back and open the page again instead of using reload or refresh</li></ul></body></html>

I changed this page in Notepad by adding BGCOLOR and TEXT to the BODY tag. After making the changes, I saved.

Making a changeMaking 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 pageViewing 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 sourceView 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 using Netscape 6.2

View sourceView 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.

Documents

Getting Started with HTML