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

Chapter 6 SAK3002 – Information Technology and Its Application

SAK3002 – IT and Its Applications

HTML Programming Language

HTML Programming Language

66ChapterChapter



Objectives of this chapter:Objectives of this chapter:

understand HTML

create basic Web site

You can…



OverviewOverview

This chapter covers Introduction Web page Development



6.1 Introduction



IntroductionIntroduction

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].



Introduction (cont’d)Introduction (cont’d)HTML Version Timeline

19951995

HTML 2.0HTML 2.0

19971997

HTML 4.0HTML 4.0

19971997

HTML 3.2HTML 3.2

20002000

HTML 4.01HTML 4.01



Introduction (cont’d)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.



Web Page DevelopmentWeb Page DevelopmentHow are special effects and interactive elements added to a Web page?

CounterCountertracks

number of visitors to Web site

Image mapImage mapgraphic

image that points to

URL

ScriptScriptinterpreted

program that runs on client

AppletAppletusually runs

on client, but is compiled

Processing Processing formform

collects data from visitors to Web site

ServletServletapplet that

runs on server

ActiveX ActiveX controlcontrol

small program that runs on

client



Introduction (cont’d)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)



Introduction (cont’d)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

WMLWML (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.



6.2 Web page Development



Web page DevelopmentWeb 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>



Web page Development (cont’d)Web page Development (cont’d)

Basic tags

<html>

<body> </body>

</html>

If you view this from the browser, you will see a blank page.



Web page Development (cont’d)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



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>




Web page Development (cont’d)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> Target page Clickable text




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:[email protected]">Send Mail</a></p>

</body></html>




HTML Images HTML images are defined with the <img> tag.

See the output of this HTML

<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>

Image source



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)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>



Web page Development (cont’d)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> Deprecated. Use <del> instead

<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>



Web page Development (cont’d)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

<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>

This is the new style attributes. The obsolete old style was:

<body bgcolor=“PowderBlue”>




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.



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




Web page Development (cont’d)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>



Web page Development (cont’d)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>



Web page Development (cont’d)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>



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)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).



Web page Development (cont’d)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>



Web page Development (cont’d)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>



Web page Development (cont’d)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>



End of Chapter 6

Documents

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