SKR3302 Chapter 2 PPT

SKR3302 Sem 2 Sesi 2010/2011
INTERNET
PROGRAMMING 2PA R T 1

IN TR O D U C TIO N
HTML?
HTML (Hypertext Markup Language) is the set of markup symbols or codes
inserted in a file intended for display on a World Wide Web browser page.
The markup tells the Web browser how to display a Web page's words and
images for the user. Each individual markup code is referred to as an
element (but many people also refer to it as a tag). Some elements come in
pairs that indicate when some display effect is to begin and when it is to
end.
HTML is a formal Recommendation by the World Wide Web Consortium
(W3C) and is generally adhered to by the major browsers, Microsoft's
Internet Explorer and Netscape's Navigator, which also provide some
additional nonstandard codes. The current version of HTML is HTML 4.0.
However, both Internet Explorer and Netscape implement some features
differently and provide nonstandard extensions. Web developers using the
more advanced features of HTML 4 may have to design pages for both
browsers and send out the appropriate version to a user. Significant
features in HTML 4 are sometimes described in general as dynamic HTML.
What is sometimes referred to as HTML 5 is an extensible form of HTML
called Extensible Hypertext Markup Language (XHTML).
The Internet
Definitions:
•The World Wide Web
• The set of computers on the Internet that support HTTP
• Not a separate network
•HTTP
• The HyperText Transfer Protocol
• The language used by a WWW client (such as Netscape, IE,
Firefox, Chrome, Safari etc) to request documents from a WWW
server (eg: the program running the Web sites like ebay.com or
lelong.com.my)
•HTML
• The HyperText Markup Language
• The language used to design and published web pages over the Net
H TM L B asics
• Text Mixed with Markup Tags
• Tags Enclosed in Angle Brackets
• e.g: <H1>Introduction</H1>
• What Does Markup Describe?
• Appearance of the page
• Layout of the page
• Content of the page but with constraint that it can’t enforce an Exact
Look)
• Current HTML is basically 4.0 but going to 5.0
• Changes in HTML from 3.2 to 4.0
• Standardization of frames
• Depreciation of formatting elements
• Improved cell alignment and grouping in tables
• Mouse and keyboard events for nearly all elements
• Internationalization features
H TM L B asics
HTML Example:
<HTML>
<HEAD>
<TITLE>Laman Web Pertama Saya</TITLE>
</HEAD>
<BODY>
<FONT SIZE="6">Selamat Datang</FONT>
<BR>
<FONT SIZE="3">Terima kasih kerana sudi melawat</FONT>
</BODY>
</HTML>
C reating and Publishing a W eb Page (on
U nix)
1. Create an HTML document
2. Place it in a worldaccessible directory (often public_html or www in Unix
environment) on a system running an HTTP server
unix > cd
unix > chmod a+x .  note the “.”
unix > mkdir public_html
Unix > chmod a+x public_html
3. Access the webpage through http://hostname/~username/filename
eg: http://www.fsktm.upm.edu.my/~alauddin/test.html
•If the filename is ommited, a system default name is assumed (often
index.html)
Eg: http://www.fktm.upm.edu.my/~alauddin/ which will refers to the
index.html in alauddin’s public_html directory
4. Validate the Document
•Check the syntax using a formal HTML validator
•http://validator.w3.org/
•http://www.htmlhelp.com/validator
C reating and Publishing a W eb
Page
• The version of HTML against which the document is validated is based
on the DOCTYPE
<DOCTYPE HTML PUBLIC “//W3C/DTD HTML 4.0 Transitional//EN”>
• The WWW Consortium recently added advice that Web pages include
information on the character set, even though ASCII or Latin1 is the
default.
• The validator gives you warnings if you omit this. However, you can
ignore these warnings if you wish
H TM L D ocum ent Tem plate
• Vey first thing in an HTML document, before the <html> tag
• Not an HTML tag; it is an instruction to the web browser about what
version of the markup language the page is written in
• The doctype declaration refers to a Document Type Definition
(DTD) so that the browsers can render the content correctly
<!DOCTYPE html PUBLIC "//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Testing The Template</title>  G oes on the brow ser’s
title bar
</head>
<body>  R est of body starts after here
<p class="p1"><b>First Title</b></p>
<p class="p2"><b></b><br></p>
<p class="p3"><b>Second Title</b></p>
</body>
</html>
H TM L Elem ents
• DOCTYPE
• HTML
• HEAD
• TITLE element required
• Optional elements
• BASE
• META
• BGSOUND
• SCRIPT, NOSCRIPT
• STYLE
• LINK
H TM L Elem ents
• BODY ELEMENT
• <BODY BGCOLOR = “YELLOW”>
• HTML Attributes and Attributes Values
• BACKGROUND
• BGCOLOR
• TEXT
• LINK
• OnLoad, OnUnload, OnFocus, OnBlur
• Elements inside BODY Statement
<BODY>
Remaining HTML Elements
</BODY>
M ETA Elem ents
• Information about data.
• Will not be displayed on the page, but will be machine parsable.
• Meta elements are typically used to specify page description, keywords,
author of the document, last modified, and other metadata.
• The <meta> tag always goes inside the head element.
• The metadata can be used by browsers (how to display content or reload
page), search engines (keywords), or other web services.
• Records document information, forwards and refreshes pages
• NAME=“author”
• NAME=“keywords”
• NAME=“description”
• HTTPEQUIV=“refresh”
H TM L B asics
Code Example:
<html><head>
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<meta name="author" content="Hege Refsnes" />
<meta httpequiv="ContentType" content="text/html;charset=ISO88591" /
>
</head><body>
Test over meta tag
</body>
</html>
Result:
Test over meta tag
B lockLevel Elem ents
• Headings
• Starts from H1 until H6
• ALIGN
• Basic Text Sections
• P
• ALIGN
• PRE
• WIDTH
• ADDRESS
• BLOCKQUOTE
• Lists
• OL
• LI
• UL
• DL
• DT
• DD
B lockLevel Elem ents
• Tables and Forms (Discussed Later)
• Misc
• HR
• DIV
• CENTER
• MULTICOL (Netscape ONLY)
H eadings
• Heading Types
• <H1>…….</H1>
• <H2>…….</H2>
• <H3>…….</H3>
• <H4>…….</H4>
• <H5>…….</H5>
• <H6>…….</H6>
• Attributes: ALIGN
• Values: LEFT (default), RIGHT, CENTER
• Nesting tags
• Heading and other blocklevel elements can contain text elements,
but NOT vice versa
H TM L B asics
<html>
<body>
<h1 align=center>Heading No Satu</h1>
<h2 align=right>Heading No Dua</h2>
<h3 align=left>Heading No Tiga</h3>
<h4 align=left>Heading No Empat</h4>
<h5 align=center>Heading No Lima</h5>
<h6 align=center>Heading No Enam</h6>
<p align=left>This is a test untuk memaparkan satu
perenggan teks yang di<I>align</I>kan ke sebelah kiri
apabila ianya dipaparkan pada skrin pengguna. Tak
caya? Anda tengok sendiri... Dah cuba nanti baru
anda boleh komen terhadap apa yang saya cakap...
</body>
</html>
H TM L B asics
H TM L B asics
Example for Heading:
<html><body>
<h1>This is heading 1</h1>
<p>
Use heading tags only for headings. Don't use them just to make something
bold. Use other tags for that. See the differences of heading sizes displayed
</p></body>
</html>
H TM L B asics
Output:
P – The B asic Paragraph
• Attributes: ALIGN
• LEFT is default, RIGHT and CENTER – use it same as HEADINGS
• Whitespace will be ignored
• The make new paragraph on new lines, use <BR> for line break
• Consecutive <P>’s DO NOT yield multiple blank lines
• END TAG is OPTIONAL:
<BODY> <BODY>
<P> Paragraph 1
Paragraph 1 <P>
</P> Paragraph 2
<P> <P>
Paragraph 2 Paragraph 3
</P> </BODY> Equivalent with
<P> Implied Tags
Paragraph 3
</P>
</BODY> Fully specified
Preform atted Paragraphs
• The <PRE> tag defines preformatted text.
• Text in a pre element is displayed in a fixedwidth font (usually Courier),
and it preserves both spaces and line breaks
• It is useful when trying to display a programming code on the web page
• The PRE Element
• <PRE> …… </PRE>
• Attributes: WIDTH
• Expected width in characters. Not widely supported thus should be
avoided
• Problem: Special Characters
<PRE>
if (a &lt b) {
do_this();
} else {
do_that();
}
</PRE>
H TM L B asics
Output:
if (a < b) {
do_this();
} else {
do_that();
}
O L : O rdered (N um bered) Lists
• Used to create an ordered list (with numbered).
• Can be numerical or alphabetical.
• OL Element
<OL>
<LI>…
<LI>…
<LI>…
</OL>
• Attributes: TYPE, START, COMPACT
• List Entries: LI
<LI>… </LI> (End TAG OPTIONAL)
•Attributes: (When inside OL): VALUE, TYPE
A sample list:
<ol>
<li>Coffee</li> output:  1. Coffee
<li>Milk</li> 2. Milk
</ol>
O L : O rdered (N um bered) Lists
Another Example:
<html><body>
<p>An ordered list:</p>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol></body>
</html>
U L : U nordered Lists
Unordered List Example:
<html><body>
<p>An unordered list:</p>
<ul type="DISC">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul type="CIRCLE">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul type="SQUARE">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul></body>
</html>
TEXTLEVEL Elem ents
• Physical Character Styles
• B, Im TT, U, SUB, SUP, SMALL, BIG, STRIKE, S, BLINK
• FONT:
• SIZE
• COLOR
• FACE
• BASEFONT
• SIZE
• Logical Character Styles:
• EM, STRONG, CODE, SAMP, KBD, DFN, CITE
• Hypertext Links
• A
• HREF, NAME, TARGET
TEXTLEVEL Elem ents
• Images
• IMG
• SRC (required) ALT, ALIGN, WIDTH, HEIGHT, HSPACE,
VSPACE, BORDER, USEMAP, ISMAP
• Misc. TextLevel Elements
• BR (line break)
• AREA (Clientside image maps)
• APPLET (Java) etc…
TEXT_LEVEL Elem ents
• Example #1:
<html><body>
<H1>Physical Character Styles</H1>
<B>Bold</B><BR>
<I>Italic</I><BR>
<TT>Teletype</TT><BR>
<U>Underlined</U><BR>
Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>
Superscripts: x<SUP>0</SUP> + x<SUP>1</SUP><BR>
<SMALL>Smaller</SMALL><BR>
<BIG>Bigger</BIG><BR>
<STRIKE>Strike Through</STRIKE><BR>
<B><I>Bold Italic</I></B><BR>
<BIG><TT>Big Monospaced</TT></BIG><BR>
<SMALL><I>Small Italic</I></SMALL><BR>
<FONT COLOR="Gray">Gray</FONT><BR>
<DEL>Delete</DEL><BR>
<INS>Insert</INS><BR>
</body>
</html>
• Output Example #1:
• <html><body>
• <H1>Logical Character Styles</H1>
• <EM>Emphasized</EM><BR>
• <STRONG>Strongly Emphasized</STRONG><BR>
• <CODE>Code</CODE><BR>
• <SAMP>Output Sample</SAMP><BR>
• <KBD>Keyboard Text</KBD><BR>
• <DFN>Definition</DFN><BR>
• <VAR>Variable</VAR><BR>
• <CITE>Citation</CITE><BR>
• <EM><CODE>Emphasized Code</EM></CODE><BR>
• <FONT COLOR="Gray"><CITE>Gray Citation</CITE></FONT><BR>
• <ACRONYM TITLE="Java Development Kit">JDK</ACRONYM>
• </body>
• </html>
C om ing U p N ext… W eek…
• H ypertext Links
• Em bedding Im ages
• Im age A lignm ent
• Tables

SKR3302 Chapter 2 PPT

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SKR3302 Chapter 2 PPT

Uploaded by

Copyright:

Available Formats

SKR3302 Sem 2 Sesi 2010/2011

PROGRAMMING 2PA R T 1

You might also like