HTML Programming Language 6 Chapter HTML Programming Language Chapter 6 SAK3002 – Information Technology and Its Application
Objectives of this chapter: You can… understand HTML create basic Web site Chapter 6 SAK3002 – Information Technology and Its Application
Overview This chapter covers Introduction Web page Development Chapter 6 SAK3002 – Information Technology and Its Application
6.1 Introduction Chapter 6 SAK3002 – 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]. Chapter 6 SAK3002 – Information Technology and Its Application
Introduction (cont’d) HTML Version Timeline 1995 HTML 2.0 1997 HTML 3.2 1997 HTML 4.0 2000 HTML 4.01 Chapter 6 SAK3002 – Information Technology and Its Application
Introduction (cont’d) HTML Editor HTML documents are plain-text files that can be created using any text editor Example: Netscape Composer Notepad, word. 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 Chapter 6 SAK3002 – Information Technology and Its Application
Web Page Development How are special effects and interactive elements added to a Web page? Script interpreted program that runs on client Applet usually runs on client, but is compiled Servlet applet that runs on server ActiveX control small program that runs on client Counter tracks number of visitors to Web site Image map graphic image that points to URL Processing form collects data from visitors to Web site Chapter 6 SAK3002 – 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) Chapter 6 SAK3002 – Information Technology and Its Application
Introduction (cont’d) Microbrowser - is a web browser designed for use on a mobile device such as a mobile phone or PDA. Introduction (cont’d) What are XHTML, XML, and WML? Includes features of HTML and XML XHTML (Extensible HTML) enables Web sites to be displayed more easily on microbrowsers Server sends entire record to client, enabling client to do much of processing without going back to server XML (Extensible Markup Language) allows developers to create customized tags WML (Wireless Markup Language) allows developers to design pages specifically for microbrowsers Many Internet-enabled smart phones and PDAs use WML as their markup language Chapter 6 SAK3002 – Information Technology and Its Application
6.2 Web page Development Chapter 6 SAK3002 – 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: <tag> ... </tag> Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) Basic tags <html> <body> </body> </html> If you view this from the browser, you will see a blank page. Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) HTML Header and Paragraph See the output of this HTML <html> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <p> This is a paragraph</p> <p> This is another paragraph</p> </body> </html> The text between this tag is displayed as a heading. HTML has six levels of headings, <h1> through <h6> with 1 being the largest The text between this tag is displayed as a paragraph Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) 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. <a href=“page1.html”> Click Page 1 </a> Absolute linking - linking to documents that are not directly related <a href=“http://www.fsktm.upm.edu.my”>FSKTM</a> Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) HTML Links HTML links are defined with the <a> tag. Example: See the output Add target=“_blank” to open link in new window Example: <a href=“www.upm.edu.my” target="_blank">UPM</a> <html> <body> <h3>Universiti Putra Malaysia (UPM)</h3> <p>UPM is a Malaysia’s leading research intensive public university</p> <a href="http://www.upm.edu.my">Click here to know more about UPM</a> </body> </html> Clickable text Target page Chapter 6 SAK3002 – 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 output <html> <body> <p> This is a mail link: <a href="mailto:wanm@putra.upm.edu.my">Send Mail</a> </p> </body> </html> Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) HTML Images HTML images are defined with the <img> tag. See the output of this HTML Image source <html> <body> <img src=upmhead.jpg > <h3>Universiti Putra Malaysia (UPM)</h3> <p>UPM is a Malaysia’s leading research intensive public university</p> <a href="http://www.upm.edu.my">Click here to know more about UPM</a> </body> </html> Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) GIF Graphics Interchange Format Use for graphics JPG Joint Photographic Experts Group Use for photographs PNG Portable Network Graphics Expected to replace GIF Chapter 6 SAK3002 – 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 output <html> <body> <a href=http://www.upm.edu.my> <img src=upmhead.jpg> </a> <p>Click on the banner to go to UPM’s portal</p> </body> </html> Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) HTML Text Formatting tag See output Tag DESCRIPTION <b> Defines bold text <big> Defines big text <em> Defines emphasized text <i> Defines italic text <small> Defines small text <strong> Defines strong text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text <s> Deprecated. Use <del> instead <strike> <u> Deprecated. Use styles instead <html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p><em>This text is emphasized</em></p> <p><i>This text is italic</i></p> <p><small>This text is small</small></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html> Chapter 6 SAK3002 – 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 output This is the new style attributes. The obsolete old style was: <body bgcolor=“PowderBlue”> <html> <body style="background-color:PowderBlue;"> <h1>Look! Styles and colors</h1> <p style="font-family:verdana;color:red">This text is in Verdana and red</p> <p style="font-family:times;color:green">This text is in Times and green</p> <p style="font-size:30px">This text is 30 pixels high</p> </body> </html> Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) Table Tables are defined with the <table> tag. divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> 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. Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) Tables Tags <table> ... </table> - define table in HTML <tr> ... </tr> - specifies a table row within a table <th> ... </th> - defines a table header cell <td> ... </td> - defines a table data cell Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) Table demonstration One row and One Column See output <html> <body> <h1>one Row One column:</h1> <table border="1"> <tr> <td><h1>1,1</h1></td> </tr> </table> </body> </html> Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) One Row Two Column See output <html> <body> <h1>One Row and Two Columns</h1> <table border="1"> <tr> <td><h1>1,1</h1></td> <td><h1>1,2</h1></td> </tr> </table> </body> </html> Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) Two Row and Two Column See output <html> <body> <h1>Two Rows and Two Columns:</h1> <table border="1"> <tr> <td><h1>1,1</td> <td><h1>1,2</td> </tr> <td><h1>2,1</td> <td><h1>2,2</td> </table> </body> </html> Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) 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 Chapter 6 SAK3002 – 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 <ul> tag. each list item starts with the <li> tag Ordered Lists marked with numbers. starts with the <ol> tag Definition List It is a list of items (terms), with a description of each item (term). starts with a <dl> tag (definition list). each term starts with a <dt> tag (definition term). each description starts with a <dd> tag (definition description). Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) Demonstration of Unordered list See output <html> <body> <h1>An Unordered List:</h1> <ul> <li><h1>Coffee</h1></li> <li><h1>Tea</h1></li> <li><h1>Milk</h1></li> </ul> </body> </html> Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) Demonstration of Ordered list See output <html> <body> <h1>An ordered List:</h1> <ol> <li><h1>Coffee</h1></li> <li><h1>Tea</h1></li> <li><h1>Milk</h1></li> </ol> </body> </html> Chapter 6 SAK3002 – Information Technology and Its Application
Web page Development (cont’d) Demonstration of Definition list See output <html> <body> <h1>A Definition List:</h1> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> </body> </html> Chapter 6 SAK3002 – Information Technology and Its Application
End of Chapter 6 Chapter 6 SAK3002 – Information Technology and Its Application