Post on 19-Jan-2016
transcript
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
<P>Do you want <I>butter flavoring</I> on your <B>popcorn</B> or do you like it plain?</P>
10
HTML Rule #4
Nested HTML tags should close in the reverse order in which they open.
<HTML> <P> <B> </B> </P> </HTML>
11
HTML Rule #5
By default, HTML documents display a single space between text elements.
<I>Music Instruction</I>
<I>Music Instruction</I>
<I> Music Instruction </I>
<I>Music Instruction</I>
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.
<FONT COLOR="green">grass</FONT>
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
<FONT> 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