1. THE BACKBONE OF EVERY WEB PAGE HTML Day 1

2. What will we learn? How to create a basic web page Backgrounds and colors How to link Web sites How to include graphics Let’s start with the basics

3. First Step in Web Design: Plan!  Create an outline  list of elements, links, graphics,  Do a “little bit”  Save – Test (Preview)  Do a little more  Save – Test (Preview)

4. HTML HyperText Markup Language All types of computers can interpret HTML code (PC, MAC, Linux, and Unix) In many languages

5. Where do I write HTML code? Any word processor will work!  We will use Notepad

6. Saving an HTML Document Must save file as:  Filename.htm OR  Filename.html

7. How does HTML Work? Series of tags that surrounds and controls text. Examples of tags: 

8. How does HTML Work? Tags: Code words or letters in designed to create what you see on a web page.

9. The Nomad Catalog The Nomad on-line catalog! Welcome to the Nomad Ltd on-line catalog. We are pleased to offer a new line of clothing called "Web Wear“! Enjoy browsing through our catalog! Order now to get Web Wear fast.

11. What should I know about Tags?? Not case sensitive  or Enclosed in brackets:  (Shift key + comma or period) To end a tag you must type: After an equal sign you need quotation marks. =“red”

12. Basic HTML Tags:  Identifies an HTML document to the browser  Document information

13. Basic HTML Tags:  Indicates what appears in the blue title bar  Information that appears in main portion of the display window.

14. The Body Tag Includes:  Text  Links  Graphics  Movies  Sounds  Animations

15. My Practice Page Welcome to my Practice Page! Info appears in title bar!

16. Text Color  Put text information inside the body tag  Changes color of text through entire document.  Note: HTML does not recognize all colors – use trial and error or the HTML color codes.

17. Background Color Or  Changes the documents background color

18. Background Color HTML color codes are hexadecimal triplets representing the colors red, green, and blue (#RRGGBB). For example, in the color red, the color code is #FF0000, which is '255' red, '0' green, and '0' blue. These color codes can be used to change the color of the background, text, and tables on a web page.

19. The Paragraph Tag Creates new Paragraph HTML will not recognize pressing the enter key No ending tag is needed

20. Six Heading (Font) Sizes Biggest Smallest

21. Text Styles BOLD UNDERLINE ITALICIZE

22. Ordered List: & Pepsi Dr. Pepper Mt. Dew Coke

23. Ordered List: & In Internet Explorer: 1. Pepsi 2. Dr. Pepper 3. Mt. Dew 4. Coke

24. Unordered (Bulleted) List: & Hamburger Pepperoni Cheese Veggie

25. Unordered (Bulleted) List: & In Internet Explorer: Hamburger Pepperoni Cheese Veggie

26. Linking Documents Links or hyperlinks  Allow you to jump to other Web sites  Displayed in a different color  Underlined  Mouse turns to a hand when held over link

27. Hyperlink Tag Link to a web page Type here what you want blue and underlined

28. Hyperlink Review Most commonly used search engine is Google ! In Internet Explorer: Most commonly used search engine is Google!

29. Inserting a Graphic All graphics must be saved to your Network Drive. Do not save to the desktop. Do not copy and paste.

30. Inserting a Graphic Image is saved in a Folder named Graphics Image filenames CAN BE case sensitive!

31. Key Tips Proofread! Proofread! Proofread!  Little errors cause big problems in HTML. “ “ Pay attention to detail! Keep your notes they will help you with your project.