sak3002 – it and its applications chapter 6sak3002 – information technology and its application...
TRANSCRIPT
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
HTML Programming Language
HTML Programming Language
66ChapterChapter
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Objectives of this chapter:Objectives of this chapter:
understand HTML
create basic Web site
You can…
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
OverviewOverview
This chapter covers Introduction Web page Development
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
6.1 Introduction
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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].
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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.
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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)
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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.
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
6.2 Web page Development
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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>
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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.
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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)
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)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:[email protected]">Send Mail</a></p>
</body></html>
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)Web page Development (cont’d)
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
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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)
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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>
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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>
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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”>
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)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
SAK3002 – IT and Its Applications
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)
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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>
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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>
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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>
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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)
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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).
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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>
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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>
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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>
Chapter 6 SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
End of Chapter 6