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

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

!DOCTYPE

• CSS and HTML 4.01 standards:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

• HTML 4.01 standards and deprecated HTML elements and attributes (most of which concern visual presentation):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd">

• HTML 4.01, deprecated HTML elements and attributes, and frames:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

3

HTML Document Information

HTML text documents contain:

• Content – Text and graphic references

• HTML commands – Control how content displays

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

Text Editor Views

6

HTML Rule #1

HTML tags consist of commands that appear within angle brackets (<>).

<HTML>

7

HTML Rule #2

HTML tags are not case-sensitive.

<HTML> <html> <HtMl>

8

HTML Rule #3

HTML tags almost always come in pairs.

<HTML></HTML>

9

Tag Pairs

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

10

HTML Rule #4

Nested HTML tags should close in the reverse order in which they open.

<HTML> </HTML>

11

HTML Rule #5

By default, HTML documents display a single space between text elements.

Music Instruction


 Music Instruction 


12

HTML Spacing

13

HTML Rule #6

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

grass

14

HTML Rule #7

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

15

File Organization

16

Save, Save, Save!

• Press Ctrl+S

• Click File, and choose Save

• Click (if available)

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

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

Storyboard

20

Home Page Sketch

21

Button Graphics

22

Title Bar Banner Graphic

23

Standard HTML Tags

24

<BODY> Tag Attributes

25

Table Tags

• <TABLE></TABLE> delineates the start and end of a table.

• <TR></TR> indicates a table row.

• <TD></TD> defines the start and end of a cell within a table.

26

Table Code

27

Logo Code

28

Banner Graphic Code

29

Preview: Table, Logo, Banner

30

Navigation Bar Code

31

Preview: Navigation Bar

32

Footer Information

• Graphic• Address • Phone number• Text links that correspond to navigation bar • Copyright text

33

Finished Footer

34

Footer Code

35

Subpages

• index.html• lessons.html• recitals.html• competitions.html• performances.html• background.html• contact.html

36

Subpage Files

37

Subpage Code

38

Navigation Bar Test

39

Headings

40

 Tag Attributes

41

Paragraph Content Code

42

Preview: Content

43

Block Quote Code

44

Preview: Block Quotes

45

Unnumbered List

46

List Code

47

Color Page

48

Template

49

Next Step

Creating Web Sites with FrontPage

50

Exercise 1

51

Exercise 2

52

Exercise 3

Documents

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