Presentation is loading. Please wait.

Presentation is loading. Please wait.

1 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.

Similar presentations


Presentation on theme: "1 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."— Presentation transcript:

1 1 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.

2 2 !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:

3 3 HTML Document Information HTML text documents contain: Content – Text and graphic references HTML commands – Control how content displays

4 4 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.

5 5 Text Editor Views

6 6 HTML Rule #1 HTML tags consist of commands that appear within angle brackets (<>).

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

8 8 HTML Rule #3 HTML tags almost always come in pairs.

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

10 10 HTML Rule #4 Nested HTML tags should close in the reverse order in which they open.

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

12 12 HTML Spacing

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

14 14 HTML Rule #7 Numerous variations exist when it comes to the HTML nesting theme, properties, and use of tag sets.

15 15 File Organization

16 16 Save, Save, Save! Press Ctrl+S Click File, and choose Save Click (if available)

17 17 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.

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

19 19 Storyboard

20 20 Home Page Sketch

21 21 Button Graphics

22 22 Title Bar Banner Graphic

23 23 Standard HTML Tags

24 24 Tag Attributes

25 25 Table Tags delineates the start and end of a table. indicates a table row. defines the start and end of a cell within a table.

26 26 Table Code

27 27 Logo Code

28 28 Banner Graphic Code

29 29 Preview: Table, Logo, Banner

30 30 Navigation Bar Code

31 31 Preview: Navigation Bar

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

33 33 Finished Footer

34 34 Footer Code

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

36 36 Subpage Files

37 37 Subpage Code

38 38 Navigation Bar Test

39 39 Headings

40 40 Tag Attributes

41 41 Paragraph Content Code

42 42 Preview: Content

43 43 Block Quote Code

44 44 Preview: Block Quotes

45 45 Unnumbered List

46 46 List Code

47 47 Color Page

48 48 Template

49 49 Next Step Creating Web Sites with FrontPage

50 50 Exercise 1

51 51 Exercise 2

52 52 Exercise 3


Download ppt "1 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."

Similar presentations


Ads by Google