sign in sign up
<<
Home , Access key, CSS, XHTML

CHAPTER 2: XHTML, CSS AND JAVASCRIPT (XHTML)

I. XHTML (EXTENSIBLE HYPERTEXT )

As HTML has progressed and evolved over time, new versions of the language have been released to introduce the new features and deprecate the old. The very first version of HTML, 1.0, was published in 1993. It was further refined and extended with HTML 2.0 in 1995, followed closely by HTML 3.0 in 1996. Version 4.0 was published in 1997, and a few minor (but significant) changes were released in 1999 as HTML 4.01. This was to be the final, complete specification for the HTML language. A new kid called eXtensible HTML, or XHTML, joined the class in 2000, and it was praised as the wave of the future. XHTML is a reformulation of HTML following the more stringent rules of eXtensible Markup Language (XML).

Web pages are created with XHTML. An XHTML document start with two lines

Followed by:

The tags defines the head section. This section contains the tags. The tags specify the title to be displayed in the title bar of the browser when a user views the . The head section can also contain metadata about a document. Metadata can include keywords pertaining to the document. For example, metadata about a document might be the author of that document. Information in the head section is not displayed to the user.

All the content of a Web page is held between the tags.

1. XHTML TAG SYNTAX

XHTML tags begin with a left angle bracket (<) followed by the name of the tag and end with a right angle bracket (>). All tags are paired into a beginning tag and an ending tag, such as and . The ending tag looks just like the beginning tag except that a forward (/) precedes the tag name within the . You typically place the tag content between the beginning and ending tags. The following table shows commonly used XHTML tags.

Feature Example tag Heading

Line break
or

List item
    • Emphasized text Image Preformatted text
    Bold text Paragraph 2. CONTENT TAGS

    After creating the basic structure of an HTML document, you can add content to the body of the document. While there are many tags for altering the appearance of content, the basic elements are headings, paragraphs, and lists.

    2.1 HEADINGS

    Headings are basically used to mark the beginning of a new paragraph. Headings range in size from one to six, one being the largest. A level one heading, for example, is marked by the

    and

    tags. Headings are displayed in larger and bolder than normal body text. The syntax of the heading tag is:

    Text of heading where x is a number between one and six that specifies the size of the heading. THOU CHAMROEUN Page 1

    The following is an example that uses the tag.

    Showing Heading Text Style We are learning the Heading tags in HTML.

    HEADING 1

    HEADING 2

    HEADING 3

    HEADING 4

    HEADING 5
    HEADING 6

    2.2 PARAGRAPHS AND LINE BREAK

    A paragraph tag indicates where a new paragraph begins. You begin a paragraph with the opening paragraph tag

    and close the paragraph with the closing paragraph tag

    . Word wrapping is determined by the size of the browser window. Here is a sample HTML code that uses the paragraph tag:

    We are using paragraphs We are looking at the following paragraph.

    Here is the new paragraph.

    You can also control line length and line breaks by using the
    tag, which indicates a line break. It is important to note that a browser ignores white spaces. Therefore, the following three code segments:

    Hello There

    Hello There

    and

    Hello There

    Will produce the same output.

    2.3 LISTS

    HTML supports several elements for creating different types of lists. There are three kinds of list tags in HTML: - Ordered lists - Unordered lists - Definition lists

    2.3.1 ORDERED LISTS

    You use the

    tags to define an ordered list. The items in an ordered list are numbered. The following is an example of an ordered list:

    THOU CHAMROEUN Page 2

    Display ordering list Here is an example of ordering list of information:

    1. XHTML
    2. CSS
    3. JavaScript
    4. or ASP

    2.3.2 UNORDERED LISTS

    You use the

    tags to define an unordered list. The items in an unordered list are bulleted. The following is an example of an unordered list:

    Display unordered list Here is an example of unordered list of information:

    • XHTML
    • CSS
    • JavaScript
    • or ASP

    2.3.3 DEFINITION LISTS

    A definition list is similar to a definition in a dictionary. You can use XHTML tags to create definition lists. In a definition list, each list item has two parts, a

    element and a
    element. The
    element represents the term you are defining, and the
    tag represents its definition. The
    tag specifies the word and the
    tag specifies the definition of the word.Consider the following example of a definition list:

    Display ordering list Here is an example of definition list of information:

    XHTML
    tell what the content is
    CSS
    tell how to display the content
    THOU CHAMROEUN Page 3

    2.4 TAGS

    A hyperlink is a connection from a Web page to another page or a different location on the same page. To add a hyperlink to a Web page, you need the URL of the Web site to which you want to link. The anchor tag is used for setting a hyperlink in a Web page. The syntax for a hyperlink is:

    text or graphic

    Where Destination_URL is the URL of the Web site you want the hyperlink to connect to, and text or graphic is what the user will click to view the specified Web site.

    2.4.1 TYPES OF

    The following table lists the types of hyperlinks you can create and gives examples of the HTML syntax.

    Hyperlink type Description Syntax URL A hyperlink to another Web page http://xxx/xxx/xxx/dir/file.htm Non-HTML document A hyperlink to another type of document, such as a file:\\path\dir\filename Word document, a Microsoft Excel workbook, or an image A hyperlink to a named area defined within a Web page. Mypage.htm#bookmarkname E-mail A hyperlink to an e-mail address. mailto:[email protected] m Newsgroup A hyperlink to a newsgroup in a Usenet site. :xxx.xxx.xxx

    There are two types of hyperlinks that you can define in a Web page: - Relative - Absolute links

    2.4.1.1 RELATIVE LINKS

    Relative links describe the destination relative to the location of the Web page containing the link. Relative links are so called because you specify the path to get from the current page to the destination page. For example, a relative link to a document in the same folder as the current Web page would be MyDocument.htm.

    Link text

    You can also specify a file in another folder on the same server by specifying the relative path from the current document to the linked document as shown in the following example:

    Link text

    In addition, you can specify a file in another folder on the same server by specifying the path from the root directory of the current page to the linked document.

    Link text

    2.4.1.2 ABSOLUTE LINKS

    An absolute link is used to link documents that are not part of the same site. An absolute link provides a complete address for a hyperlink. For example, an absolute link to a document MyDocument.htm is: "C:\My Web Documents\MyDocument.htm"

    You can use an absolute link to define a link to a Web page on another Internet server.

    Link text

    2.4.1.3 RELATIVE VS. ABSOLUTE

    The advantage of relative links is that if you move files as a group to another location, the relative link addresses remain unchanged. However, you must use an absolute link for files that are not in the server or on the same Internet server.

    THOU CHAMROEUN Page 4

    2.4.1.4 BOOKMARK

    When a Web page is more than one or two screens in length, you can add bookmarks within the page and create hyperlinks to the bookmarks such that the users can jump directly to specific sections of the page. You can use bookmarks to create a simple table of contents for a long Web page. To define a bookmark, you use the tag and set the name attribute. The following example defines a bookmark named bookmark1:

    To go the defined a bookmark, use the tag and specify the page to link followed by a pound sign (#) and the bookmark name. The following example creates a hyperlink to the bookmark named bookmark1 in the page MyDoc.htm.

    Link text

    3. ADDING IMAGES TO A WEB PAGE

    You can enhance the appearance of a Web page by adding images. Images can add information to a Web page and make it more appealing and interesting for users. Browsers can display image files in a document if they are in either .GIF (Graphics Interchange Format) or .JPG format. Different formats compress images using different algorithms. For example, an image will have a different file size depending on whether it is saved as a .gif or a .jpg file. Because the time it takes to download an image is directly related to the size of the file, you will want to use the format that results in the smallest file size.

    The tag is used to add images to Web pages. The syntax for this tag is:

    The tag instructs the browser to display the image at this location in the document. The src attribute tells the browser the file name of the image to display. In this case, a file named filename.gif is in the same directory as the HTML document in which the image is displayed.

    3.1 CREATING HYPERLINKED IMAGES

    You may want to have an image that is linked, so that clicking the image will open another page. This is rather simple. You just need to place the IMG tag within the A HREF tags as follows:

    4. CREATING TABLES

    Tables have many uses in Web pages. They are used in a conventional manner to display information in a tabular format.

    You can present information in a more structured manner to users by using tables.

    Class Name Room No. Lab Room No. M2 102A 212 M4 406 212 A1 102A 205 E2 102B 212

    For example, the Web page above contains a table that shows airline information in a structured manner. You can see that next to each airline.Blue Sky Airline, Blue Yonder Airways, and, Vigor Airline.the departure and destination places and the time of departure are listed.

    Tag

    A table is created with the

    and
    tags in an XHTML document. It contains some important attributes such as border, , cellpadding, cellspacing, and rules.

    THOU CHAMROEUN Page 5

    Tag

    Each row in a table is created by using the and tags. The element defines a single table row. The element can take the attributes align and valign, which define alignment properties for the contents of cells within the row. The align attribute, which defines the horizontal alignment properties of cells, can take the values left, center, and right. The valign attribute, which defines the vertical alignment properties of cells, can take the values top, middle, and bottom. The default value of align is left, and of valign is middle.

    Tag

    Columns are created by using the and tags. HTML elements, such as text, images, image maps, and hyperlinks can be placed within the and tags. You can control the space it occupy by using attributes colspan, and rowsapn. The following example code creates a table that has one row and three columns.

    Class Name Room No. Lab Room No.

    Every cell in the table must have some content, or many browsers will not render the cell. If you want a cell to appear blank, place a non-breaking space in it. For example:

     

    5. CREATING FORMS USING HTML

    A form allows users to send information to the server. Typical uses for a form include: - Asking users to provide information during an online purchase, such as name, address, and credit card information. - Allowing users to select options to retrieve specific information to be displayed on a subsequent page. For example, allowing users to select the city that they want to see the weather for. - Allowing users to submit comments or provide other feedback.

    5.1 THE

    TAG

    You use the and

    tags to create a form. You can place other XHTML elements within the form tags to specify the exact contents of the form. The following code defines a form that contains several fields, a submit , and a reset button. When the user submits the form, the contents are sent to formProcessor.asp, which will actually process the form.

    Using Form Tag

    Full Name:

    Tick all about you know: XHTML CSS JavaScript

    THOU CHAMROEUN Page 6

    You can determine the behaviour of a form by setting attributes for the form. The

    tag supports the following attributes: - Action attribute specifies the form handler used to process the form. You set the action attribute to a URL that specifies the name of the server extension that receives the form data when the user submits the form. For example, in the following code, the details of a form are submitted to a file, formprocessor.asp, which processes the data: - Method attribute indicates the type of form-handling protocol that is used to process the program or script specified in the action attribute. There are two possible values for the Method attribute: o Get method, the form data is appended to the end of the URL. The values of the controls in a form are concatenated to the URL, which is then passed to the form handler. The Get method can only send 1024 bytes of data. If you change the value of method in about example to get For example, if you submit the form above using the get method, the server would receive a request such as: http://myserver/scripts/formProcessor.asp?txtName=.Fred.&chkHomeUse=ON

    Although the difference is often insignificant, the get method is faster than the post method. Also, the get method requires only one trip to the server, whereas the post method requires two trips to the server. The disadvantage of using the get method is that the information is sent as part of the URL, and is therefore .clear text. As a consequence, the form data is not secure and cannot be encrypted. o Post method, if you need to send more than 1024 bytes of data to a server, set the value of method to post. When you use the post method, the form data is sent in the body of the HTTP request. There is no limit to the number of parameters or the length of the values that you can send when using the post method. The post method requires two trips to the server, therefore is not as fast as the get method. Again, this difference is not often noticeable. However, since post sends the data in the body of a message, it can be encrypted.

    5.2 OVERVIEW OF FORM CONTROLS

    Most XHTML controls are defined using the tag. The syntax for the tag is as follows:

    Let look at some examples to understand the usage of tag:

    In the preceding examples, the: - Type attribute specifies the type of control such as text box, button, and so on. - Name attribute specifies a name to the control that uniquely identifies it within an HTML page. - Value attribute is the value assigned to the control when the user interacts with it. Consider the following code that creates a form with two text boxes, a Submit button, and a Reset button.

    Form Controls

    Full Name:

    Telephone No:

    THOU CHAMROEUN Page 7

    5.3 FORM CONTROLS

    A form can contain the following type of controls: - Text box - Password - Text area - Push button - Radio button - Drop-down menu - Check box - Hidden

    5.3.1 USING TEXT CONTROLS

    There are three types of text boxes as listed in the following table.

    Text box type Syntax Single-line Password Scrolling

    The following example part of code defines a single-line text box, a password, and a scrolling text box:

    Full Name:

    Password:

    Comments: