Understanding HTML Basics for Web Development

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 2000 HTML 4.01 1995 HTML 2.0 1997 HTML 4.0 1997 HTML 3.2 Chapter 6 SAK3002 – Information Technology and Its Application

Introduction (cont’d) Web page authoring software HTML Editor • HTML documents are plain-text files that can be created using any text editor • Example: • Netscape Composer • Notepad, word. • 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? ActiveX controlsmall program that runs on client Scriptinterpreted program that runs on client Appletusually runs on client, but is compiled Servletapplet that runs on server Processing formcollects data from visitors to Web site Countertracks number of visitors to Web site Image mapgraphic image that points to URL 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) What are XHTML, XML, and WML? Microbrowser - is a web browser designed for use on a mobile device such as a mobile phone or PDA. 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 Many Internet-enabled smart phones and PDAs use WML as their markup language WML(Wireless Markup Language)allows developers to design pages specifically for microbrowsers 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> <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> • HTML Header and Paragraph • See the output of this 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 <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> <bodystyle="background-color:PowderBlue;"> <h1>Look! Styles and colors</h1> <pstyle="font-family:verdana;color:red">This text is in Verdana and red</p> <pstyle="font-family:times;color:green">This text is in Times and green</p> <pstyle="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> <tr> <td><h1>2,1</td> <td><h1>2,2</td> </tr> </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 • each list item starts with the <li> 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

Understanding HTML Basics for Web Development