1. McGraw-Hill/Irwin © The McGraw-Hill Companies, All Rights Reserved TECHNOLOGY PLUG-IN T10 Creating Web pages Using HTML

2. T10-2 LEARNING OUTCOMES 1.Explain what HTML is 2.Describe the purpose of HTML tags 3.Explain how browsers display tagged HTML documents 4.Describe how an HTML document is structured

3. T10-3 LEARNING OUTCOMES 5.Describe what an HTML attribute is. 6.Describe how to create, save, and view HTML documents 7.Explain what a structure tag is 8.Explain how to apply bold, italic, and underline formatting to an HTML document

4. T10-4 LEARNING OUTCOMES 9.Describe how to create ordered and unordered lists 10.Describe the different types of Web links and how to insert them in a HTML document 11.Explain how to insert images in a HTML document

5. T10-5 INTRODUCTION Hypertext Markup Language, or HTML, is a system of codes that you use to create Web pages HTML, though, is not what you see onscreen as a Web page HTML is the behind-the-scenes code that tells browsers what to display

6. T10-6 HTML HTML is made up of tags and attributes that work together to identify document parts and tell browsers how to display them

7. T10-7 Understanding Tags HTML tags serve two purposes: 1.They identify logical document parts —the major structural components in HTML documents 2.HTML tags reference other elements - tags can include pointers and links to other documents, images, sound files, video files, multimedia applications, animations, applets, and so on

8. T10-8 Understanding Tag Components All tags are composed of elements that are contained within angle brackets ( ) The angle brackets simply tell browsers that the text between them is an HTML command Some sample tags look like these: – (for heading level 2) – (for document body) – (for bold)

9. T10-9 Understanding Tag Components Most tags are paired, with an opening tag ( ) and a closing tag (</H1) –Both tags look alike, except the closing tag also starts with a forward slash (/) To apply tags to information, place the opening tag before the information, and place the closing tag after the information Example: – This is a heading

10. T10-10 Understanding Tag Components To apply more than one tag to a chunk of information, you nest the tags Nesting means placing one set of tags inside another set Example: – This is an italicized heading

11. T10-11 Improving Readability You will find it easier to read and use tags in your HTML code if you follow a few conventions 1.Type tags using all caps 2.Use hard returns to create shorter lines These conventions do not affect how browsers display code, they just make it easier for you to read the HTML

12. T10-12 Improving Readability The code below is identical (however, one of them is far easier to read): HTML Document Title HTML Document Body or HTML Document Title HTML Document Body

13. T10-13 Understanding Attributes Some tags work in conjunction with attributes Attributes provide additional information about an element, such as… –How elements should align –What other files should be accessed –The color of an element All attributes go in the opening tag and are separated from other attributes and the tag itself by a space

14. T10-14 Understanding Attributes If you want to center a heading in the browser window, start with your heading and tags: A heading goes here Add the ALIGN= attribute to the opening tag, like this: A centered heading goes here

15. T10-15 Understanding Attributes In HTML, the attributes can go in any order after the tag The tag must always go first You can include multiple attributes in a tag by using one space between each attribute: A wildly formatted heading goes here

16. T10-16 HTML Tools To create an HTML document, you need only two basic tools: 1.An HTML editor, to create and save your HTML documents 2.A Web browser, to view and test your HTML documents

17. T10-17 HTML Editors In general, HTML editors fall into two categories: 1.Text- or code-based, which allow you to see the HTML code as you are creating documents 2.WYSIWYG (What You See Is What You Get), which show the results of code, similar to the way it will appear in a browser, as you are formatting your document

18. T10-18 Web Browsers The most common browsers are Mozilla Firefox and Microsoft Internet Explorer Although a variety of browsers are available for virtually all computer platforms and online services Browsers tend to display things a bit differently

19. T10-19 CREATING, SAVING, AND VIEWING HTML DOCUMENTS How you start a new HTML document depends on which operating system and editor you are using You will find that starting a new HTML document is similar to starting other documents you have created

20. T10-20 CREATING, SAVING, AND VIEWING HTML DOCUMENTS Here is the general process of creating an HTML document: –Open a text editor (such as Notepad or SimpleText) –Start a new document by choosing File, then select New –Enter the HTML code and text you want to include –Save your document with the extension.htm or.html by choosing File Save or File Save As

21. T10-21 Applying Structure Tags After you create a new document, your first task is to include structure tags Structure tags provide browsers with information about document characteristics Structure tags identify the document as HTML, provide introductory information about the document, and include the title

22. T10-22 Applying Structure Tags All HTML documents should include four structure tags, nested and ordered

23. T10-23 The Tags The tags identify the document as an HTML document To use the tags, enter them in your document like this:

24. T10-24 The Tags The tags contain information about the document, including its title, scripts used, style definitions, and document descriptions To use the tags, enter them between the tags, for example:

25. T10-25 The Tags The tags are contained in the document title The title does not appear within the browser window, although it is usually visible in the browser's title bar A HTML Tutorial

26. T10-26 The Tags The tags enclose all the tags, attributes, and information that you want a visitor's browser to display To use the tags, enter them below the closing tag and above the closing tag: A HTML Tutorial All the tags, attributes, and information in the document body go here. This is what the browser displays on the screen.

27. T10-27 Applying Style Tags And Attributes Style tags tell the browser exactly how to present the labeled text These elements constitute the basic HTML document components and, unlike the structure tags, do appear in the browser window

28. T10-28 Paragraphs One of the most common tags you will use is the paragraph tag,, which is appropriate for regular body text HTML automatically adds an extra blank line before and after a paragraph To use the paragraph tags, put them around the text you want to format as a paragraph, for example: A whole paragraph goes right here.

29. T10-29 Creating Headings Headings break up large areas of text, announce topics to follow, and arrange information according to a logical hierarchy HTML provides six levels of headings: … The largest … … The smallest

30. T10-30 Creating Headings

31. T10-31 Creating Headings By default, all browsers align headings on the left To use the alignment attributes, include them in the initial heading tag, such as: Left-aligned Heading Centered Heading Right-aligned Heading

32. T10-32 Creating Lists Lists are a great way to provide information in a structured, easy-to-read format Lists come in two varieties: 1.Numbered (ordered) 2.Bulleted (unordered)

33. T10-33 Creating Lists 1.Start with text you want to format as a list: Lions Tigers Bears Oh, My! 2.Insert the tags around the list text: Lions Tigers Bears Oh, My! 3.Type the tag for each list item: Lions Tigers Bears Oh, My!

34. T10-34 Creating Lists

35. T10-35 Creating Lists

36. T10-36 Applying Bold, Italic, and Other Emphases You can apply formatting to individual letters and words For example, you can make a word appear italic, bold, underlined, or superscript (as in e 2 ) Example: This is the end of a paragraph that also uses boldface. This is the beginning of the following paragraph.

37. T10-37 Applying Bold, Italic, and Other Emphases

38. T10-38 Using Horizontal Rules Horizontal rules are lines that break up long sections of text, indicate a shift in information, or help improve the overall document design The tag is a nonpaired tag; it has no ending tag To use a horizontal rule, put the tag where you want the rule to appear: Long passages of text should often be broken into sections with headings and, optionally, horizontal rules. A Heading Also Breaks Up Text A new long passage can continue here.

39. T10-39 Using Horizontal Rules

40. T10-40 Inserting Line Breaks You can easily break paragraph lines by inserting the tag where you want the lines to break: There once was an HTML writer, Who tried to make paragraphs wider. She found with a shock All the tags did mock The attempt to move that text outside.

41. T10-41 Inserting Line Breaks

42. T10-42 USING FANCIER FORMATTING Most newer browsers support effects, not all browsers do; your fancier effects might not reach all visitors The HTML specification discourages many of these effects in favor of Style Sheets You might consider using Style Sheets instead of the tags and attributes

43. T10-43 Adding Colors You can add a background color and change the text colors to coordinate with the background You can highlight a word or two with color to make the words leap off the page If you are developing a corporate site, adhere to the company's color scheme to ensure a consistent look

44. T10-44 Adding Colors You specify colors using hexadecimal numbers, which combine pro­portions of Red, Green, and Blue — called RGB numbers RGB numbers use six digits, two for each proportion of red, green, and blue Not all RGB numbers display well in browsers; some colors dither, meaning that they appear spotty or splotchy

45. T10-45 Setting Background Colors To specify a background color for your documents, include the BGCOLOR= “#...” attribute in the opening tag, like this: <BODY BGCOLOR=”#FF0000”›

46. T10-46 Specifying Text Colors You can specify the color of the following: –Body text, which appears throughout the document body –Unvisited links, which are links not yet followed –Active links, which are links as they are being selected –Visited links, which are links previously followed

47. T10-47 Specifying Text Colors To change text and link colors, follow these steps: –Within the tag, add the TEXT= attribute to set the color of text within the document –The example presented here makes the text white –Unless you change the background color you will not see the text, as the background default color is also white!

48. T10-48 Specifying Text Colors Add the LINK= attribute to set the link color: Add the VLINK= attribute to set the color for visited links Set the ALINK= to specify the active link color

49. T10-49 Specifying Text Colors

50. T10-50 Specifying Fonts and Font Sizes Specify fonts and increase font sizes to improve readability with dark back­grounds and light colored text Use the tag to specify font characteristics for your document, including color, size, and typeface

51. T10-51 Specifying Fonts and Font Sizes Select a specific font using the FACE= attribute This text is displayed using Verdana font face and the default browser’s font size. Change the font size using the SIZE= attribute You set the size of text on a relative scale - from 1 to 7, with the default size being 3 Either set the size absolutely (with a number from 1 to 7) or relatively (with + or-to change the size)

52. T10-52 Specifying Fonts and Font Sizes Add a COLOR= attribute to set the color, using a color name or a #RRGGBB value This text is displayed using Technical font face, a font size of +2, and a font color of green.

53. T10-53 Specifying Fonts and Font Sizes

54. T10-54 CREATING HYPERLINKS A hyperlink is a bit of text or a graphic that you can click to… –Move to a different location on the page –Open a different Web page –Start an e-mail message –Download a file –View a movie –Listen to a sound clip –Activate a Web-based program

55. T10-55 Hyperlinking to a Web Page No matter what type of hyperlink you want to create, the basic syntax is the same It starts with the tag, and then uses an HREF= argument that provides the URL or the path to the destination Example: University of Denver

56. T10-56 Hyperlinking to a Web Page

57. T10-57 Hyperlinking to an E-Mail Address To create a hyperlink to an e-mail address, use the same HREF= argument as before, but instead of a Web address, type MAILTO: followed by the e-mail address, like this: Contact Me Or… Contact Me amy.phillips@du.edu?SUBJECT=COMMENT

58. T10-58 Hyperlinking

59. T10-59 Hyperlinking to Other Content A hyperlink can reference any file, not just a Web document You can take advantage of this to link to other content such as… –Microsoft Office documents –Compressed archive files such as.zip files –Executable program files such as setup utilities

60. T10-60 Hyperlinking to Other Content

61. T10-61 DISPLAYING GRAPHICS Web pages are more interesting and attractive when they include graphics In a word-processing program such as Microsoft Word, graphics are embedded in the document In HTML each graphic displayed on a Web page is stored in a separate file, which must be stored on a Web server

62. T10-62 Inserting Graphics Inserting a graphic on a Web page is as simple as placing an tag where you want the graphic to appear, like this: When a file is stored in the same folder as the HTML document in which it is referenced, you can refer to the file name only, without any location information

63. T10-63 Inserting Graphics If you want to store your graphics in a subfolder of the folder containing the text files (to organize your files more tidily), you must refer to the graphic with the subfolder name, such as:

64. T10-64 Inserting Graphics By default, unless you place the image within a block-level tag such as a paragraph or heading, the image blocks off all the space horizontally To force the image to the left or right side of the screen and wrap surrounding text around the image, apply an ALIGN attribute rule that uses a left, right, or center argument:

65. T10-65 Inserting Graphics

66. T10-66 SUMMARY Summary of the tags used is the plug-in:

67. T10-67 SUMMARY