1. Web Design Fundamentals Demystifying Basic HTML

2. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags. Plan an HTML site. Create a table with HTML. Assemble a home page and subpages using HTML.

3. 3 Web Pages A Web page is a single scrollable page that you view in a Web browser. A Web page is a text document that contains words, numbers, and Hypertext Markup Language (HTML) commands. A Web page is saved as an.htm or.html file. HTML commands (a.k.a. tags) are instructions that tell a browser how to display a Web page’s content. In other words, HTML commands provide format information that controls the display of your Web page’s text and graphics.

4. 4 Text Documents Text document: Text document with HTML tags:

5. 5 Source Code

6. 6 Opening a Text Editor Notepad—Click Start, point to Programs, point to Accessories, and then click Notepad. WordPad—Click Start, point to Programs, point to Accessories, and then click WordPad. TextEdit—Double-click the TextEdit icon on the hard disk.

7. 7 Text Editor Views

8. 8 HTML Rule #1 HTML tags consist of commands that appear within angle brackets (<>). This tag tells a browser right off the bat that the text document is an HTML document. The browser knows that any text within angle brackets (<>) is an HTML command that needs processing and that all text outside angle brackets (<>) is content that needs to be displayed.

9. 9 HTML Rule #2 HTML tags are not case-sensitive.

10. 10 HTML Rule #3 HTML tags almost always come in pairs. Because most HTML tags are used primarily for formatting purposes, HTML tags often come in twos: a starting tag and an ending tag (also referred to as an opening tag and a closing tag). This pairing enables you to tell browsers where a particular formatting attribute (such as boldfacing) should start and where it should end. While starting and ending tags appear very similar they have a minor, albeit critical, difference. Ending tags are differentiated from starting tags by the inclusion of a forward slash (/) just after the left bracket.

11. 11 Tag Pairs Do you want butter flavoring on your popcorn or do you like it plain?

12. 12 HTML Rule #4 Nested HTML tags should close in the reverse order in which they open. In other words first open, last closed

13. 13 HTML Rule #5 By default, HTML documents display a single space between text elements. Music Instruction

14. 14 HTML Spacing

15. 15 HTML Rule #6 Some opening HTML tags can contain properties (also called attributes) that further refine an HTML tag’s instructions. grass

16. 16 HTML Rule #7 Numerous variations exist when it comes to the HTML nesting theme, properties, and use of tag sets. As with all rules, you’ll find that although most of HTML is predictable, the technology is as consistent as spelling rules, which means that you’ll frequently find exceptions to the rules. For example, The line break command,, there’s no closing tag for a line break—you either have a line break or you don’t. Similarly, the horizontal rule command, ; again, no closing tag required.

17. 17 Handling HTML Documents and Web Graphics When you create Web pages, you usually work with multiple files. You’ll have your home page HTML file (generally named index.html or index.htm), a graphics file for each graphical element on your page, and additional HTML files for linked pages. Therefore, before you start creating, you have to think of an organizational scheme so that you don’t drive yourself crazy later.

18. 18 Handling HTML Documents and Web Graphics Create a main folder to contain all the HTML files used in your Web site Create a subfolder named “images” to contain all your graphics. Keeping your files organized is imperative when you’re adding graphics and creating hyperlinks because you must include instructions in your HTML document regarding where the browser should look for a particular graphic or linked page.

19. 19 File Organization

20. 20 Save, Save, Save! Along with being organized, you should religiously save and preview your Web pages throughout the development process. Press Ctrl+S Click File, and choose Save Click (if available)

21. 21 Previewing Display the contents of the folder containing the HTML document and double-click the HTML document’s icon. Open a browser application (such as Internet Explorer), and type in the HTML file’s location. Open a browser application, open the folder containing the HTML document, and drag the HTML file’s icon from its folder into the browser window or the browser’s Address bar.

22. 22 Knowledge Understand basic HTML rules. Realize that the importance of saving HTML documents and images in designated folders Recognize the importance of saving often. Recognize the importance of previewing Web pages throughout the creation process.

23. 23 Storyboard

24. 24 Home Page Sketch

25. 25 Button Graphics

26. 26 Title Bar Banner Graphic

27. 27 Standard HTML Tags

28. 28 HTML Compliance Due to the various levels of CSS and HTML compliance on the Web these days, you can help browsers interpret your Web pages by specifying whether your page is strictly compliant with the latest standards, transitional (includes deprecated HTML elements), or framed (includes deprecated HTML elements and frames within the Web site). To do this, you insert a particular version of the

29. 29 !DOCTYPE CSS and HTML 4.01 standards: HTML 4.01 standards and deprecated HTML elements and attributes (most of which concern visual presentation): HTML 4.01, deprecated HTML elements and attributes, and frames:

30. 30 Tag Attributes

31. 31 Table Tags Controlling elements on a Web page is a little tricky because of the variable nature of browsers and browser windows, so many sites are designed using tables with hidden borders to help lay out Web pages. delineates the start and end of a table. indicates a table row. defines the start and end of a cell within a table.

32. 32 Table Code

33. 33 Logo Code

34. 34 Banner Graphic Code

35. 35 Preview: Table, Logo, Banner

36. 36 Navigation Bar Code

37. 37 Preview: Navigation Bar

38. 38 Footer Information Graphic Address Phone number Text links that correspond to navigation bar Copyright text

39. 39 Finished Footer

40. 40 Footer Code

41. 41 Subpages index.html lessons.html recitals.html competitions.html performances.html background.html contact.html

42. 42 Subpage Files

43. 43 Subpage Code

44. 44 Navigation Bar Test

45. 45 Headings

46. 46 Tag Attributes

47. 47 Paragraph Content Code

48. 48 Preview: Content

49. 49 Block Quote Code

50. 50 Preview: Block Quotes

51. 51 Unnumbered List

52. 52 List Code

53. 53 Color Page

54. 54 Template

55. 55 Next Step Creating Web Sites with FrontPage

56. 56 Exercise 1

57. 57 Exercise 2

58. 58 Exercise 3