Chapter 6 - Universiti Putra Malaysia
Download
Report
Transcript Chapter 6 - Universiti Putra Malaysia
SAK3002 – IT and Its Applications
6
Chapter
HTML Programming
Language
Chapter 6
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Objectives of this chapter:
You can…
understand HTML
create basic Web site
Chapter 6
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Overview
This chapter covers
Chapter 6
Introduction
Web page Development
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
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
SAK3002 – IT and Its Applications
Introduction (cont’d)
HTML Version Timeline
Chapter 6
1995
1997
HTML 2.0
HTML 3.2
1997
2000
HTML 4.0
HTML 4.01
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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:
Chapter 6
Dreamweaver
Flash
Microsoft Frontpage
Expression Web
Silverlight
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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
Counter
tracks
number of
visitors to
Web site
Chapter 6
Servlet
applet that
runs on
server
Image map
graphic
image that
points to
URL
ActiveX
control
small program
that runs on
client
Processing
form
collects data
from visitors
to Web site
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Introduction (cont’d)
Some scripting language :
Chapter 6
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 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Introduction (cont’d)
Microbrowser - is a web browser designed for
use on a mobile device such as a mobile phone
or PDA.
What are XHTML, XML, and WML?
XHTML
(Extensible HTML)
enables Web sites to be displayed
more easily on microbrowsers
Includes features of HTML
and XML
XML
Server sends entire record to
client, enabling client to do
much of processing without
going back to server
(Extensible Markup Language)
allows developers to
create customized tags
WML
(Wireless Markup Language)
allows developers to design pages
specifically for microbrowsers
Chapter 6
Many Internet-enabled
smart phones and PDAs
use WML as their markup
language
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 Development
HTML is composed of tags
Tags - tells browser how to display the
information provided
HTML tags are always enclosed in anglebrackets ( < > ) and are case-insensitive
Generally used in pairs
Open tag
Closing tag – same tag with / in front
Chapter 6
Example: <tag> ... </tag>
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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)
HTML Header and Paragraph
<html>
<body>
The text between this tag is
displayed as a heading.
HTML has six levels of headings,
<h1> through <h6>
with 1 being the largest
<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 paragraph
See the output of this HTML
Chapter 6
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
HTML Document – linking
Chapter 6
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>
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
HTML Links
HTML links are defined with the <a> tag.
Example:
<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
See the output
Add target=“_blank” to open link in new window
Chapter 6
Example: <a href=“www.upm.edu.my” target="_blank">UPM</a>
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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
<html>
<body>
<p>
This is a mail link: <a href="mailto:[email protected]">Send Mail</a>
</p>
</body>
</html>
Chapter 6
See output
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
HTML Images
HTML images are defined with the <img> tag.
<html>
<body>
Image source
<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
See the output of this HTML
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
GIF
JPG
Joint Photographic Experts Group
Use for photographs
PNG
Chapter 6
Graphics Interchange Format
Use for graphics
Portable Network Graphics
Expected to replace GIF
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
An image as a link
This example demonstrates how to use an
image as a link.
<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
See output
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
HTML Text Formatting tag
Tag
DESCRIPTION
<html>
<body>
<b>
Defines bold text
<big>
Defines big text
<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>
<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
</body>
</html>
See output
Chapter 6
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
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“
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
See output
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
Table
Chapter 6
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.
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
Tables Tags
Chapter 6
<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
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
Table demonstration
One row and One Column
<html>
<body>
<h1>one Row One column:</h1>
<table border="1">
<tr>
<td><h1>1,1</h1></td>
</tr>
</table>
</body>
</html>
Chapter 6
See output
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
One Row Two Column
<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
See output
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
Two Row and Two Column
<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
See output
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
Tables – more properties
Chapter 6
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
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
HTML List
HTML supports unordered, ordered and definition lists
Unordered List
Ordered Lists
marked with numbers.
starts with the <ol> tag
each list item starts with the <li> tag
Definition List
Chapter 6
marked with bullets (typically small black circles).
starts with the <ul> tag.
each list item starts with the <li> tag
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).
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
Demonstration of Unordered list
<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>
See output
Chapter 6
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
Demonstration of Ordered list
<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>
See output
Chapter 6
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
Web page Development (cont’d)
Demonstration of Definition list
<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>
See output
Chapter 6
SAK3002 – Information Technology and Its Application
SAK3002 – IT and Its Applications
End of Chapter 6
Chapter 6
SAK3002 – Information Technology and Its Application