Introduction to HTML

_______________________________________________________________________________________________________________ 2 Outline Key issues on website development Web page design and production techniques Overview of HTML Basic HTML tags on Web page design such as: Hyperlinks Hyperlinks Images & Image maps Images & Image maps HTML Tables HTML Tables HTML Frames HTML Frames HTML Forms HTML Forms Other advanced techniques such as Cascading Style sheets and JavaScript

_______________________________________________________________________________________________________________ 3 Important Factors in Website Development Major factors in website development: Content Content Usability Usability Download time Download time Browser compatibility Browser compatibility Screen size Screen size Navigation Navigation Audience Audience Data validation Data validation

_______________________________________________________________________________________________________________ 4 Additional Factors in Website Development Other factors which make up a usable user interface: System feedback System feedback Consistency Consistency Error prevention Error prevention Performance/efficiency Performance/efficiency User like/dislike User like/dislike Error recovery Error recovery

_______________________________________________________________________________________________________________ 5 Website Design & Production Major steps in Web page design and production: Define audiences and the information requirements Define audiences and the information requirements Develop logical design of the Web site Develop logical design of the Web site Develop the perceptual design Develop the perceptual design Content creation Content creation Programming Programming Posting and hosting the site Posting and hosting the site

_______________________________________________________________________________________________________________ 6 Overview of HTML Hypertext Markup Language (HTML) is a markup language for telling a Web browser how to format and display a Web page It is a subset of the Standard Generalized Markup Language (SGML) - a formal markup language for defining document format. HTML employs pre-defined tags to specify the format of a web page. For example, by putting the word “Italics” inside the tag pairs (i.e., Italics ), the word “Italics” will be displayed by the Web browser in Italics form.

_______________________________________________________________________________________________________________ 7 HTML – Basic Format The basic structure of a HTML document is formed by the following tags:

_______________________________________________________________________________________________________________ 8 Basic HTML tags and a simple example A simple web page A simple web page First level heading First level heading Second level heading Second level heading The font face is Courier and the font size is 15pt. The font face is Courier and the font size is 15pt. The font color is red. The font color is red. The text is in italic form. The text is in italic form. The text is underlined. The text is underlined. The text is expressed in bold face. The text is expressed in bold face. This is superscript and this is subscript. This is superscript and this is subscript. This text is blinking. This text is blinking.

_______________________________________________________________________________________________________________ 9 Simple example (cont’d) This is a simple bullet list: This is a simple bullet list: First item First item Second item Second item This is a simple numbered list: This is a simple numbered list: First item First item Second item Second item

_______________________________________________________________________________________________________________ 10 Snapshot of Sample Web Page

_______________________________________________________________________________________________________________ 11 Links Defined by. HREF gives the URL to be accessed (A is for Anchor) The URL can be absolute or relative: Art Art Science (in current directory) Science (in current directory) (go back one directory) (go back one directory) (in the root directory) (in the root directory) What are the differences?

_______________________________________________________________________________________________________________ 12 Images The two most commonly used graphics file formats for displaying images on a web page are GIF and JPEG There are 3 that are supported by almost all web browsers: GIF: GIF: Lossless compression Transparent Give 256 colors Support animation (animated GIF) Suitable for general-purpose images JPEG: JPEG: Lossy compression Supports “ million ” of colors Suitable for photos PNG: PNG: Similar to GIF without supporting animation Created to circumvent CompuServe's patents on the GIF file format

_______________________________________________________________________________________________________________ 13 Images (cont.) Here is an example of the image tag using all the attributes: SRC: URL of the image SRC: URL of the image ALT: image description during loading ALT: image description during loading HEIGHT: height of the image HEIGHT: height of the image WIDTH: width of the image WIDTH: width of the image BORDER: border size BORDER: border size ALIGN: alignment method ALIGN: alignment method You can also create an image link, e.g.,

_______________________________________________________________________________________________________________ 14 HTML Table The table tag is... The table tag is... The row tag is... The row tag is... The heading tag is... The heading tag is... The data cell tag is... The data cell tag is... Following is an example of a simple table incorporating the table tags and other common attributes.

_______________________________________________________________________________________________________________ 15 Table Example

_______________________________________________________________________________________________________________ 16 What Are HTML Forms? Forms are generally used to obtain data from the client for submission to the server. Typically, a program in the server is invoked to process the data, possibly with the assistance of the backend system. The result (in most cases, an HTML file) will then be passed to the web client by using the HTTP.

_______________________________________________________________________________________________________________ 17 HTML Forms – General Format General format: Form input elements Form input elements Regular HTML content Regular HTML content ACTION: URL of the program for processing the form data ACTION: URL of the program for processing the form data METHOD: methods for passing data to the server: METHOD: methods for passing data to the server: GET: attach at the end of the URL POST: embed in the HTTP request message

_______________________________________________________________________________________________________________ 18 Common HTML Form Elements Common HTML Form elements include: Textbox Textbox Password textbox Password textbox Checkbox Checkbox Radio button Radio button Submit button Submit button File input field File input field Hidden form field Hidden form field Textarea Textarea Select menu Select menu

_______________________________________________________________________________________________________________ 19 Cascading Style Sheets (CSS) In HTML 4.0, Cascading Style Sheets (CSS) became available to separate the style from the structure By using CSS, a single style sheet can be applied to several web pages requiring the same style There are three types of CSS, namely external style sheets; external style sheets; embedded style sheets; embedded style sheets; inline style sheets. inline style sheets.

_______________________________________________________________________________________________________________ 20 JavaScript JavaScript is a scripting language created by Netscape to enhance the functions of HTML It was originally known as LiveScript, but Netscape convinced Sun to let it use Java in the language name to capitalize on Sun’s promotion of the Java language It was originally known as LiveScript, but Netscape convinced Sun to let it use Java in the language name to capitalize on Sun’s promotion of the Java language Currently called ECMAScript and has been standardized, but still most commonly called JavaScript Currently called ECMAScript and has been standardized, but still most commonly called JavaScript It can be used to produce interactive and dynamic Web pages It is supported by most commonly-used browsers including Internet Explorer and Netscape’s Navigator. Unlike the server-side programs, a JavaScript code is included in an HTML document and executed on the client-side