4 Chapter Four Introduction to HTML

4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create HTML tables Create hyperlinks in HTML documents

4 Introduction to HTML In a document-layout language, the user embeds special formatting symbols within a text document to control the document’s appearance –HTML is a document layout language Hypertext –Provides a way to navigate through a document or series of documents

4 Introduction to HTML HTML converter –Takes text in one format and converts it to an HTML file HTML editor –Allows you to create a formatted document in a word-processing environment

4 Basic HTML Commands First step in creating a Web page is to visualize how the page will look when it is displayed FIGURE 4-1: Design diagram for Clearwater Traders home page

4 HTML Tags An HTML document that defines a Web page consists of: –Web page content Text displayed on a Web page –HTML tags Codes that define how a particular line or section of the document content is displayed

4 HTML Tags One-sided tag –Only the first tag is required Two-sided tags –Used in pairs –HTML tags are usually used in pairs The first tag is called the opening tag The second tag is called the closing tag

4 HTML Tags Attributes –Instruct a tag to behave in a certain way When a browser encounters an unrecognized or misspelled tag, the browser treats the tag as part of the Web page text, and displays the text of the tag

4 HTML Document Structure Header section –Contains information about the Web page –Used by the Web browser –Not displayed on the Web page Title –Text that will be displayed in the title bar of the user’s browser window

4 HTML Document Structure The body of the Web page: –Web page content displayed by the user’s browser –HTML tags used to format the Web page content Figure 4-2: Defining an HTML document

4 HTML Document Structure Figure 4-3: Current Clearwater Traders home page The Web page is blank, because the Web page content is not yet defined in the body section of the HTML file

4 HTML Headings To create a heading, use a heading tag Figure 4-4: Relative sizes of HTML headings

4 HTML Headings By default, headings are left-justified Center- or right-justify with the HTML align attribute Figure 4-5: HTML code to specify Web page headings

4 Text Formatting Commands Figure 4-7: HTML code to specify location and phone numbers

4 Text Line Spacing and Justification Paragraph tab ( ) –Two-sided tag –Used to signal the beginning of a new paragraph within Web page text Line break tag ( ) –One-sided tag –Used within a paragraph to insert a line break

4 Text Line Spacing and Justification Figure 4-9: Web page body text with paragraph and line breaks Table 4-1: Tags to specify lines breaks, paragraphs, and paragraph alignment

4 HTML Character Entities Character entities Special character codes composed of numbers or character strings that are always preceded by an ampersand (&), and are inserted directly into the Web page body text Table 4-2: Common HTML character entity codes

4 HTML Character Entities Combine character entity codes by separating individual codes by a semicolon (;) Figure 4-10: HTML code with character entities

4 Character Tags HTML character tags can be used to specify the characteristics of individual characters –Content-based character tags Two-sided tags that format the enclosed text according to the text content –Physical-style character tags Two-sided tags that allow the Web page developer to specify exact text properties

4 Character Tags Table 4-3: Content-based character tags

4 Character Tags Table 4-4: Physical style character tags

4 Character Tags Figure 4-12: HTML code with character tags

4 Graphic Images Inline image –Appears directly on the Web page and is loaded when the Web page is loaded in the user’s browser Image tag –One-sided tag that specifies the filename of the graphic image Absolute path –Specifies the exact location of a file in the user’s file system

4 Graphic Images Relative path Specifies a file location in relation to the location of the current HTML Web page file, which is called the current working directory In DOS or Windows file system commands, folder names in paths are separated by back slashes (\) In HTML commands, folder names are separated by front slashes (/)

4 Graphic Images Figure 4-14: Directory structure illustrating absolute and relative paths Table 4-5: Examples of absolute and relative path addresses

4 Graphic Images To specify the size of an image, use the width attribute and height attribute within the image tag The desired display width and height can be specified as either a numerical value in pixels or a percentage of the Web page width and height

4 Horizontal Rules Horizontal rules provide a way to visually separate a Web page into different sections and make it easier to read Horizontal rule tag –One-sided tag with the format –Creates a simple line break

4 Horizontal Rules Figure 4-6: Horizontal rules with different attributes

4 Horizontal Rules You can combine attributes by listing them sequentially in the horizontal rule tag Table 4-6: Horizontal rule attributes

4 HTML Lists Unordered lists –Lists items have no particular order –Usually used for bulleted items or other nonsequential items Ordered lists –Number for each list item is displayed automatically –Usually used for sequential items

4 Unordered Lists Unordered list tag –Two-sided tag that defines an unordered list –Has the format List item tag –One-sided tag that defines each individual list item within the opening and closing unordered list tag –Has the format

4 Ordered Lists Ordered list tag –Two-sided tag that defines an ordered list –Has the format Type attribute –Specifies the numbering style Start attribute –Specifies start value of the first list item

4 Ordered Lists Table 4-7: Ordered list styles

4 Comments in HTML Code Comment tags are two-sided Opening comment tag –Uses the format <!-- Closing comment tag –Uses the format -->

4 Comments in HTML Code Figure 4-19: HTML documents with comments

4 Tables in Web Pages When creating Web pages to display database data, often it is desirable to display the data in a table Figure 4-20: Design diagram for Clearwater Product Guide Web page

4 HTML Table Definition Tags Table tag –Two-sided tag that defines an HTML table Table row tag –Defines individual row in an HTML table Table data tag –Defines individual data items within each row

4 HTML Table Definition Tags Figure 4-21: Code to define Product Guide Web page

4 Table Size and Alignment By default, width of a table is determined by widths of data values in the individual table columns, and height is determined by the number of table rows –Alternatively, specify a specific table size using width and height attributes within the table tag By default, tables are aligned on the left edge of the Web page –Use the align attribute (ALIGN=[desired alignment]) within the table tag to change the table alignment

4 Column Headings Create heading row in table using the table heading tag in place of the table data tag for the first column row Figure 4-23: Code to create the product table

4 Table Borders and Cell Spacing To specify table borders, use the border, cell spacing, and cell padding table tag attributes Figure 4-25: Table border, cell spacing, and cell padding attributes

4 Table Borders and Cell Spacing Border attribute –Used to add borders to table columns and rows Cell spacing attribute –Determines amount of space, in pixels, between inside border lines of adjacent table cells Cell padding attribute –Determines amount of space, in pixels, between inside cell border and object or text within the cell

4 Table Borders and Cell Spacing Figure 4-26: Product table with borders

4 Specifying the Widths of Table Columns Width attribute –Specifies the widths of table columns –Added to table header tag for each column in first row of table –If table does not have table header in first row, add width attribute to table data tag for each column in the first row

4 Aligning Table Objects Control the alignment of individual table objects by using the align attribute and the vertical align attribute Figure 4-28: Code to modify table object alignments

4 Hyperlinks Hyperlink –Reference in an HTML document that enables you to jump to another location Anchor –Location referenced by hyperlink –May be on same Web page or separate HTML document

4 Hyperlinks to Anchors on the Same Web Page Anchor tag –Used to create an anchor Figure 4-30: Adding anchor tags

4 Hyperlinks to Anchors on the Same Web Page To create a hyperlink that references an anchor, use a link tag Figure 4-31: Code to add bulleted list and hyperlinks

4 Hyperlinks Hyperlinks that reference different Web pages –To create a hyperlink to a different Web page, use link tag, but substitute name of the second Web page’s HTML file for the anchor name Hyperlinks to addresses –Web pages can contain hyperlinks to addresses

4 Chapter Summary HTML is a document-layout language with hypertext-specification capabilities An HTML document the defines a Web page contains the Web page content and HTML tags You can create HTML headings to organize a Web page into sections

4 Chapter Summary Web pages contain images and other graphics objects to make the pages appealing and easier to read and understand When creating Web pages to display database data, it is desirable to display the data using an HTML table HTML hyperlinks can reference a variety of things, including a location on the same Web page, a different Web page, or an address