1. HTML I An Introduction to the Language of the Web Terry Bake tbake@fuse.net

2. Copyright D. Terrence Bake 2002 Introduction HTML is the language used to create every web page that you see on the Internet In this course you will learn the basics of HTML and you will be able to create a basic web page by the end of the class

3. Copyright D. Terrence Bake 2002 Vocabulary HTML – Hypertext Markup Language Syntax – Rules of a Language Tags – Special text within a HTML that defines how the enclosed text should be displayed

4. Copyright D. Terrence Bake 2002 Overview Creating a web page is a lot like writing a letter. Like a letter, a HTML document follows a certain syntax. A letter will usually contain a greeting, an introduction, a body, a conclusion and a salutation. A HTML document will usually contain a title, a head, a body and the content. Just as with a letter, a HTML may not have everything in this list.

5. Copyright D. Terrence Bake 2002 Agenda Topics Creating a very basic HTML document Add a title, heading and some simple content Each of these topics will take approximately fifteen minutes.

6. Copyright D. Terrence Bake 2002 Create a Basic HTML Document To create a HTML document, all you need is a plain text editor. For this class we will be using Microsoft’s Notepad. Open Notepad from the Accessories menu of your Programs menu. Once you have Notepad opened, we will create our first web page. It will read “Hello World.”

7. Copyright D. Terrence Bake 2002 Save your HTML document as index.html to your desktop. Within Notepad, type the following:

8. Copyright D. Terrence Bake 2002 Your browser should open and display the above web page. Now that you have saved your HTML document to your Desktop, double-click on it with your left mouse button.

9. Copyright D. Terrence Bake 2002 Adding Titles and Headings Now that we have created a web page, it would be nice to be able to add a title for the title bar and a heading for our page. To do this we need to add four new sets of tags. The tags that we need to add are: head title body h1

10. Copyright D. Terrence Bake 2002 Adding Titles and Headings Anything appearing between the tag is processed by the browser. This text is either instructions to the browser or informational text. The tag tells the browser to display the text with its tags in the title bar of the browser.

11. Copyright D. Terrence Bake 2002 Open your index.html in Notepad and add the changes denoted in blue:

12. Copyright D. Terrence Bake 2002 Adding Titles and Headings Anything appearing between the tag is processed and displayed in the browser window. The tag is one of a series of heading tags which range from h1 to h6. They tell the browser to display the text with its tags as a heading in the browser window.

13. Copyright D. Terrence Bake 2002 With your index.html still open in Notepad and make the additional changes denoted in blue: Once again save your HTML document as index.html to your desktop.

14. Copyright D. Terrence Bake 2002 Your browser should open and display the above web page. Now that you have saved your HTML document to your Desktop, double-click on it with your left mouse button.

15. Copyright D. Terrence Bake 2002 Summary If you can remember a rather simple syntax, creating an HTML document is a lot like writing a letter. It is important to remember to include a closing tag for all tags that you use. You can further develop your HTML skills by creating a personal website on one of the many sites on the Internet that provide server space for this purpose, both for free or for a charge, or with your ISP. Any questions or comments?

16. Copyright D. Terrence Bake 2002 Where to Get More Information Today’s sessions of HTML II & HTML III W3 Schools at http://www.w3schools.com HTML & Web Development classes here at Cincinnati State My e-mail address – tbake@fuse.net