SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application HTML Programming Language 6 6 Chapter

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Objectives of this chapter: understand HTML create basic Web site You can…

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Overview  This chapter covers Introduction Web page Development

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application 6.1 Introduction

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Introduction What is HTML?  HyperText Markup Language  It provides a means to describe the structure of text-based information in a document—by denoting certain text as links, headings, paragraphs, lists, and so on—and to supplement that text with interactive forms, embedded images, and other objects [wikipedia].

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Introduction (cont’d) HTML Version Timeline 1995 HTML HTML HTML HTML 4.01

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Introduction (cont’d) Web page authoring software  Creates sophisticated Web pages without need to type/edit HTML  It generates HTML automatically  Examples:  Dreamweaver  Flash  Microsoft Frontpage  Expression Web  Silverlight HTML Editor  HTML documents are plain-text files that can be created using any text editor  Example:  Netscape Composer  Notepad, word.

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web Page Development How are special effects and interactive elements added to a Web page? Counter Counter tracks number of visitors to Web site Image map Image map graphic image that points to URL Script Script interpreted program that runs on client Applet Applet usually runs on client, but is compiled Processing form Processing form collects data from visitors to Web site Servlet Servlet applet that runs on server ActiveX control ActiveX control small program that runs on client

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Introduction (cont’d) Some scripting language :  JavaScript  Perl (Practical Extraction and Report Language)  PHP (PHP: Hypertext Preprocessor)  Rexx (Restructured eXtended eXecutor)  TCL (Tool Command Language)  VBScript (Visual Basic, Scripting Edition)

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Introduction (cont’d) What are XHTML, XML, and WML? XHTML XHTML (Extensible HTML) enables Web sites to be displayed more easily on microbrowsers XML XML (Extensible Markup Language) allows developers to create customized tags WML WML (Wireless Markup Language) allows developers to design pages specifically for microbrowsers Includes features of HTML and XML Many Internet-enabled smart phones and PDAs use WML as their markup language Server sends entire record to client, enabling client to do much of processing without going back to server Microbrowser - is a web browser designed for use on a mobile device such as a mobile phone or PDA.

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application 6.2 Web page Development

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development  HTML is composed of tags  Tags - tells browser how to display the information provided  HTML tags are always enclosed in angle- brackets ( ) and are case-insensitive  Generally used in pairs Open tag Closing tag – same tag with / in front Example:...

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d)  Basic tags If you view this from the browser, you will see a blank page.

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d)  HTML Header and Paragraph  See the output of this HTMLoutput Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 This is a paragraph This is another paragraph The text between this tag is displayed as a heading. HTML has six levels of headings, through with 1 being the largest The text between this tag is displayed as a paragraph

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application  HTML Document – linking Hyperlink - browser highlights the identified text or image with color and/or underlines to indicate that it is a hypertext link Relative linking - the path to the linked file relative to the location of the current file. Click Page 1 Absolute linking - linking to documents that are not directly related FSKTM Web page Development (cont’d)

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d) HTML Links  HTML links are defined with the tag.  Example:  See the outputoutput  Add target=“_blank” to open link in new window Example: UPM Universiti Putra Malaysia (UPM) UPM is a Malaysia’s leading research intensive public university Click here to know more about UPM Target page Clickable text

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d)  Create a mailto link send electronic mail to a specific person or mail alias by including the mailto attribute in a hyperlink will only work if you have mail installed See outputoutput This is a mail link: Send Mail

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d)  HTML Images HTML images are defined with the tag. See the output of this HTMLoutput Universiti Putra Malaysia (UPM) UPM is a Malaysia’s leading research intensive public university Click here to know more about UPM Image source

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application GIF  Graphics Interchange Format  Use for graphics JPG  Joint Photographic Experts Group  Use for photographs PNG  Portable Network Graphics  Expected to replace GIF Web page Development (cont’d)

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d)  An image as a link This example demonstrates how to use an image as a link. See outputoutput Click on the banner to go to UPM’s portal

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d)  HTML Text Formatting tag  See outputoutput TagDESCRIPTION Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Deprecated. Use instead Deprecated. Use instead Deprecated. Use styles instead This text is bold This text is strong This text is big This text is emphasized This text is italic This text is small This is subscript and superscript

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d)  HTML Style Attribute The purpose of the style attribute is to provide a common way to style all HTML elements. HTML Style Examples:  style="background-color:yellow"  style="font-size:10px"  style="font-family:Times"  style="text-align:center“ See outputoutput Look! Styles and colors This text is in Verdana and red This text is in Times and green This text is 30 pixels high This is the new style attributes. The obsolete old style was:

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d)  Table Tables are defined with the tag. divided into rows (with the tag), and each row is divided into data cells (with the tag). The letters td stands for "table data" which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application  Tables Tags... - define table in HTML... - specifies a table row within a table... - defines a table header cell... - defines a table data cell Web page Development (cont’d)

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d)  Table demonstration One row and One Column See outputoutput one Row One column: 1,1

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d) One Row Two Column See outputoutput One Row and Two Columns 1,1 1,2

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d) Two Row and Two Column See outputoutput Two Rows and Two Columns: 1,1 1,2 2,1 2,2

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application  Tables – more properties BORDER = X - add borders to the table WIDTH=x, HEIGHT=x, - control the size of the table ALIGN=left or center or right - align a table/data to the left,center or right CELLSPACING-the width of the spacing between cell and along edges of cells. CELLPADDING-amount of space inserted btw cell content and the inner edge of a cell Web page Development (cont’d)

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d)  HTML List HTML supports unordered, ordered and definition lists Unordered List  marked with bullets (typically small black circles).  starts with the tag.  each list item starts with the tag Ordered Lists  marked with numbers.  starts with the tag  each list item starts with the tag Definition List  It is a list of items (terms), with a description of each item (term).  starts with a tag (definition list).  each term starts with a tag (definition term).  each description starts with a tag (definition description).

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d)  Demonstration of Unordered list  See outputoutput An Unordered List: Coffee Tea Milk

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d)  Demonstration of Ordered list  See outputoutput An ordered List: Coffee Tea Milk

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application Web page Development (cont’d)  Demonstration of Definition list  See outputoutput A Definition List: Coffee Black hot drink Milk White cold drink

SAK3002 – IT and Its Applications Chapter 6SAK3002 – Information Technology and Its Application End of Chapter 6