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

T10-2 What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages

T10-3 HTML Tags HTML tags are keywords (tag names) surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags

T10-4 Anatomy of an HTML Tag

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

T10-6 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:

T10-7 HTML tags are case- insensitive. For example is the same as

T10-8 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

T10-9 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.

T10-10 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

T10-11 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.

T10-12 Paragraphs HTML does not respect more then one blank space character. HTML does not respect blank line, unless is used.

T10-13 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

T10-14 Creating Headings

T10-15 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

T10-16 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 message –Download a file –View a movie –Listen to a sound clip –Activate a Web-based program

T10-17 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= attribute that provides the URL (the path to the destination) This is followed with the text to display in the browser Example: StFX University

T10-18 Hyperlinking to an Address To create a hyperlink to an address, use the same HREF= argument as before, but instead of a Web address, attribute is MAILTO: followed by the address. Contact Me Or… Contact Me SUBJECT=WebCOMMENT (which adds a subject line to the )

T10-19 Hyperlinking

T10-20 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

T10-21 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.

T10-22 Applying Bold, Italic, and Other Emphases

T10-23 Common Character Formatting Tags

T10-24 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.

T10-25 Using Horizontal Rules

T10-26 Horizontal Rule Attributes

T10-27 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. Normally is used for poetry writing

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

T10-29 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!

T10-30 Creating Lists

T10-31 Creating Lists For ordered list use the tag Lions Tigers Bears Oh, My! So it displays as 1.Lions 2.Tigers 3.Bears 4.Oh, My!

T10-32 List Attributes Outlines use sequential lists with letters. And numbering schemes for documentation. Use bullets for non-sequential items. Use different bullets for visual interest.

T10-33 Sample List

T10-34 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

T10-35 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

T10-36 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:

T10-37 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.

T10-38 Using an Image as a link

T10-39 Creating Tables 1 2 apple orange pear

T10-40 Using Tables anywhere Make of use of tables anywhere in the webpage to organize your text, images, etc. Use border=‘0’ for borders not showing.

T10-41 Adding Comments Comments are sections of your HTML document that you may add to improve readability, but the Web browser ignores comments when interpreting HTML documents. Comments are enclosed as follows;

T10-42 Adding Comments Comments can span multiple lines as follows; <!-- This is a multiline comment. Everything between opening and closing tags is considered a comment and is ignored by the Browser -->

T10-43 ADDING COLORS SETTING BACKGROUND COLORS – SETTING FONT COLOR AND FONT SIZES –

T10-44 Summary: Structural and Style Tags

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

T10-46 KompoZer-Easy Web Authoring! KompoZer is designed to be extremely easy to use, making it ideal for non-technical computer users who want to create an attractive, professional-looking web site without needing to know HTML or web coding. KampoZer is located at: S:\Lab Menu\Kompozer KompoZer is also a FREE download at

T10-47 HTML Reference Best HTML tutorial website: