web design fundamentals demystifying basic html. 2 after completing this lesson, you will be able...
TRANSCRIPT
![Page 1: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/1.jpg)
Web Design Fundamentals
Demystifying Basic HTML
![Page 2: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/2.jpg)
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.
![Page 3: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/3.jpg)
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.
![Page 4: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/4.jpg)
4
Text Documents
Text document:
Text document with HTML tags:
![Page 5: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/5.jpg)
5
Source Code
![Page 6: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/6.jpg)
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.
![Page 7: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/7.jpg)
7
Text Editor Views
![Page 8: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/8.jpg)
8
HTML Rule #1
HTML tags consist of commands that appear within angle brackets (<>).
<HTML>
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.
![Page 9: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/9.jpg)
9
HTML Rule #2
HTML tags are not case-sensitive.
<HTML> <html> <HtMl>
![Page 10: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/10.jpg)
10
HTML Rule #3
HTML tags almost always come in pairs.
<HTML></HTML>
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.
![Page 11: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/11.jpg)
11
Tag Pairs
<P>Do you want <I>butter flavoring</I> on your <B>popcorn</B> or do you like it plain?</P>
![Page 12: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/12.jpg)
12
HTML Rule #4Nested HTML tags should close in the reverse order in which they open.
In other words first open, last closed
<HTML> <P> <B> </B> </P> </HTML>
![Page 13: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/13.jpg)
13
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>
![Page 14: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/14.jpg)
14
HTML Spacing
![Page 15: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/15.jpg)
15
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>
![Page 16: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/16.jpg)
16
HTML Rule #7Numerous 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, <BR>, there’s no closing tag for a line break—you either have a line break or you don’t. Similarly, the horizontal rule command, <HR>; again, no closing tag required.
![Page 17: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/17.jpg)
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.
![Page 18: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/18.jpg)
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.
![Page 19: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/19.jpg)
19
File Organization
![Page 20: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/20.jpg)
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)
![Page 21: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/21.jpg)
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.
![Page 22: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/22.jpg)
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.
![Page 23: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/23.jpg)
23
Storyboard
![Page 24: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/24.jpg)
24
Home Page Sketch
![Page 25: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/25.jpg)
25
Button Graphics
![Page 26: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/26.jpg)
26
Title Bar Banner Graphic
![Page 27: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/27.jpg)
27
Standard HTML Tags
![Page 28: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/28.jpg)
28
HTML ComplianceDue 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 <!DOCTYPE...>
![Page 29: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/29.jpg)
29
!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">
![Page 30: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/30.jpg)
30
<BODY> Tag Attributes
![Page 31: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/31.jpg)
31
Table TagsControlling 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.
• <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.
![Page 32: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/32.jpg)
32
Table Code
![Page 33: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/33.jpg)
33
Logo Code
![Page 34: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/34.jpg)
34
Banner Graphic Code
![Page 35: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/35.jpg)
35
Preview: Table, Logo, Banner
![Page 36: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/36.jpg)
36
Navigation Bar Code
![Page 37: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/37.jpg)
37
Preview: Navigation Bar
![Page 38: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/38.jpg)
38
Footer Information
• Graphic• Address • Phone number• Text links that correspond to navigation bar • Copyright text
![Page 39: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/39.jpg)
39
Finished Footer
![Page 40: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/40.jpg)
40
Footer Code
![Page 41: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/41.jpg)
41
Subpages
• index.html• lessons.html• recitals.html• competitions.html• performances.html• background.html• contact.html
![Page 42: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/42.jpg)
42
Subpage Files
![Page 43: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/43.jpg)
43
Subpage Code
![Page 44: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/44.jpg)
44
Navigation Bar Test
![Page 45: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/45.jpg)
45
Headings
![Page 46: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/46.jpg)
46
<FONT> Tag Attributes
![Page 47: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/47.jpg)
47
Paragraph Content Code
![Page 48: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/48.jpg)
48
Preview: Content
![Page 49: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/49.jpg)
49
Block Quote Code
![Page 50: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/50.jpg)
50
Preview: Block Quotes
![Page 51: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/51.jpg)
51
Unnumbered List
![Page 52: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/52.jpg)
52
List Code
![Page 53: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/53.jpg)
53
Color Page
![Page 54: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/54.jpg)
54
Template
![Page 55: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/55.jpg)
55
Next Step
Creating Web Sites with FrontPage
![Page 56: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/56.jpg)
56
Exercise 1
![Page 57: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/57.jpg)
57
Exercise 2
![Page 58: Web Design Fundamentals Demystifying Basic HTML. 2 After completing this lesson, you will be able to: Understand the basics of HTML coding. Use HTML tags](https://reader036.vdocuments.site/reader036/viewer/2022062309/56649e7d5503460f94b808e4/html5/thumbnails/58.jpg)
58
Exercise 3