Download presentation
Presentation is loading. Please wait.
Published byWalter O’Neal’ Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.