Advanced HTML Concepts eAbyas Info Solutions Version 1.0

2

eAbyas Info Solutions

LAYOUT

Web page layout is very important to give better look to your website. You should design your webpage layout very carefully.

You may have noticed that there are many websites which have put their content in multiple columns - they are formatted like a magazine or newspaper. This is easily achieved by using tables or division or span tags. Sometime you use CSS as well to position various elements or to create backgrounds or colorful look for the pages.

HTML Layout - Using Tables:

The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.

For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns - but the header and footer column spans both columns using the colspan attribute:

<table width="100%" border="0"> <tr> <td colspan="2" style="background-color:#CC99FF;"> <h1>This is Web Page Main title</h1> </td> </tr> <tr valign="top"> <td style="background-color:#FFCCFF; width:100px;text-align:top;"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td style="background-color:#eeeeee;height:200px; width:300px;text-align:top;"> Technical and Managerial Tutorials </td> </tr> <tr> <td colspan="2" style="background-color:#CC99FF;">

3

eAbyas Info Solutions

<center> Copyright © 2007 Tutorialspoint.com </center> </td> </tr> </table>

This will produce following result:

To Become more comfortable - Do Online Practice

Multiuple Columns Layouts - Using Tables

You can design your webpage to put your web content in multiple pages. You can keep your content in middle column and you can use left column to use menu and right column can be used to put advertisement or some other stuff. It will be very similar to our site tutorialspoint.com.

Here is an example to create three column layout:

<table width="100%" border="0"> <tr valign="top"> <td style="background-color:#FFCCFF;width:20%; text-align:top;"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td style="background-color:#eeeeee;height:200px; width:60%;text-align:top;"> Technical and Managerial Tutorials

This is Web Page Main title Main Menu HTML PHP PERL...

Technical and Managerial Tutorials

Copyright © 2007 Tutorialspoint.com

4

eAbyas Info Solutions

</td> <td style="background-color:#FFCCFF; width:20%;text-align:top;"> <b>Right Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> </tr> <table>

This will produce following result:

Main Menu HTML PHP PERL...

Technical and Managerial Tutorials Right Menu HTML PHP PERL...

HTML Layouts - Using DIV, SPAN

The div element is a block level element used for grouping HTML elements. While the div tag is a block-level element, the HTML span element is used for grouping elements at an inline level.

Although we can achieve pretty nice layouts with HTML tables, tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.

You can achieve same result whatever you have achieved using <table> tag in previous example.

<div style="width:100%"> <div style="background-color:#CC99FF;"> <b style="font-size:150%">This is Web Page Main title</b> </div>

5

eAbyas Info Solutions

<div style="background-color:#FFCCFF; height:200px;width:100px;float:left;"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </div> <div style="background-color:#eeeeee; height:200px;width:300px;float:left;"> Technical and Managerial Tutorials </div> <div style="background-color:#CC99FF;clear:both"> <center> Copyright © 2007 Tutorialspoint.com </center> </div> </div>

This will produce following result:

This is Web Page Main title

Main Menu HTML PHP PERL...

6

eAbyas Info Solutions

DOCTYPE

Document Type Declaration From Wikipedia, the free encyclopedia

Jump to: navigation, search

A Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document (for example, a webpage) with a Document Type Definition (DTD) (for example, the formal definition of a particular version of HTML). In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

The HTML layout engines in modern web browsers perform DOCTYPE "sniffing" or "switching", wherein the DOCTYPE in a document served as text/html determines a layout mode, such as "quirks mode" or "standards mode". The text/html serialization of HTML5, which is not SGML-based, uses the DOCTYPE only for mode selection. Since web browsers are implemented with special-purpose HTML parsers, rather than general-purpose DTD-based parsers, they don't use DTDs and will never access them even if a URL is provided. The DOCTYPE is retained in HTML5 as a "mostly useless, but required" header only to trigger "standards mode" in common browsers.[

A <!DOCTYPE> declaration helps the browser to display a web page correctly.

Syntax

The general syntax for a document type declaration is:

<!DOCTYPE root-element PUBLIC "FPI" ["URI"] [ <!-- internal subset declarations --> ]>

or

<!DOCTYPE root-element SYSTEM "URI" [ <!-- internal subset declarations --> ]>

7

eAbyas Info Solutions

In XML, the root element that represents the document is the first element in the document. For example, in XHTML, the root element is <html>, being the first element opened (after the doctype declaration) and last closed. The keywords SYSTEM and PUBLIC suggest what kind of DTD it is (one that is on a private system or one that is open to the public). If the PUBLIC keyword is chosen then this keyword is followed by a restricted form of "public identifier" called Formal Public Identifier (FPI) enclosed in double quote marks. After that, necessarily, a "system identifier" enclosed in double quote marks, too, is provided. For example, the FPI for XHTML 1.1 is "-//W3C//DTD XHTML 1.1//EN" and, there are 3 possible system identifiers available for XHTML 1.1 depending on the needs, one of them is the URI reference "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd". If, instead, the SYSTEM keyword is chosen, only a system identifier must be given. It means that the XML parser must locate the DTD in a system specific fashion, in this case, by means of a URI reference of the DTD enclosed in double quote marks. The last part, surrounded by literal square brackets ([]), is called an internal subset which can be used to add/edit entities or add/edit PUBLIC keyword behaviours.[2] The internal subset is always optional (and sometimes even forbidden within simple SGML profiles, notably those for basic HTML parsers that don't implement a full SGML parser).

On the other hand, document type declarations are slightly different in SGML-based documents such as HTML, where you may associate the public identifier with the system identifier. This association might be performed, e. g., by means of a catalog file resolving the FPI to a system identifier.[3]

Example

The first line of many World Wide Web pages reads as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ar" dir="rtl" xmlns="http://www.w3.org/1999/xhtml">

This Document Type Declaration for XHTML includes by reference a DTD, whose public identifier is -//W3C//DTD XHTML 1.0 Transitional//EN and whose system identifier is http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd. An entity resolver may use either identifier for locating the referenced external entity. No internal subset has been indicated in this example or the next ones. The root element is declared to be html and, therefore, it is the first tag to be opened after the end of the doctype declaration in this example and the next ones,

8

eAbyas Info Solutions

too. The html tag is not part of the doctype declaration but has been included in the examples for orientation purposes.

HTML 4.01 DTDs

Strict DTD does not allow presentational markup with the argument that Cascading Style Sheets should be used for that instead. This is how the Strict DTD looks:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>

Transitional DTD allows some older PUBLIC and attributes that have been deprecated:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>

If frames are used, the Frameset DTD must be used instead, like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html>

XHTML 1.0 DTDs

XHTML's DTDs are also Strict, Transitional and Frameset.

XHTML Strict DTD. No deprecated tags are supported and the code must be written correctly.

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

9

eAbyas Info Solutions

The <!DOCTYPE> Declaration

There are many different documents on the web. A browser can only display a document correctly, if it knows what kind of document it is.

There are also many different versions of HTML, and a browser can only display an HTML page 100% correctly if it knows the exact HTML version used in the page. This is what <!DOCTYPE> is used for.

<!DOCTYPE> is not an HTML tag. It is an information (a declaration) to the browser about what version the HTML is written in.

In this tutorial we use the HTML5 DOCTYPE.

Example

An HTML document with an HTML5 DOCTYPE:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>

10

eAbyas Info Solutions

Common Declarations

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Choosing a DOCTYPE

According to HTML standards, each HTML document requires a document type declaration. The "DOCTYPE" begins the HTML document and tells a validator which version of HTML to use in checking the document's syntax.

If standard HTML does not meet your needs but you still wish to gain the benefits of HTML validation, see the section on using a custom DTD.

The following DOCTYPEs are commonly used:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

11

eAbyas Info Solutions

This declares the document to be HTML 4.01 Strict. HTML 4.01 Strict is a trimmed down version of HTML 4.01 that emphasizes structure over presentation. Deprecated elements and attributes (including most presentational attributes), frames, and link targets are not allowed in HTML 4 Strict. By writing to HTML 4 Strict, authors can achieve accessible, structurally rich documents that easily adapt to style sheets and different browsing situations. However, HTML 4 Strict documents may look bland on very old browsers that lack support for style sheets.

Newer browsers such as Internet Explorer 5 for Mac, Netscape 6, and Mozilla use a standards-compliant rendering for HTML 4 Strict documents. These browsers use a "quirks" mode for most other document types to emulate rendering bugs in older browsers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

This declares the document to be HTML 4.01 Transitional. HTML 4 Transitional includes all elements and attributes of HTML 4 Strict but adds presentational attributes, deprecated elements, and link targets.

Newer browsers such as Internet Explorer 5 for Mac, Netscape 6, and Mozilla use a standards-compliant rendering for HTML 4.01 Transitional documents that include the URI of the DTD in the DOCTYPE. These browsers use a "quirks" mode to emulate rendering bugs in older browsers if the URI is omitted:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

This declares the document to be HTML 4.01 Frameset. HTML 4 Frameset is a variant of HTML 4 Transitional for documents that use frames.

12

eAbyas Info Solutions

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This declares the document to be XHTML 1.0 Strict. XHTML 1.0 Strict is an XML version of HTML 4 Strict.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This declares the document to be XHTML 1.0 Transitional. XHTML 1.0 Transitional is an XML version of HTML 4 Transitional.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

This declares the document to be XHTML 1.0 Frameset. XHTML 1.0 Frameset is an XML version of HTML 4 Frameset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

This declares the document to be HTML 3.2. HTML 3.2 is well supported by most browsers in use. However, HTML 3.2 has limited support for style sheets and no support for HTML 4 features such as frames and internationalization.

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

This declares the document to be HTML 2.0. HTML 2.0 is widely supported by browsers but lacks support for tables, frames, and internationalization, as well as many commonly used presentational elements and attributes.

URL - Uniform Resource Locator

A URL is another word for a web address.

13

eAbyas Info Solutions

A URL can be composed of words, such as "w3schools.com", or an Internet Protocol (IP) address: 192.68.20.50. Most people enter the name of the website when surfing, because names are easier to remember than numbers.

When you click on a link in an HTML page, an underlying <a> tag points to an address on the world wide web.

A Uniform Resource Locator (URL) is used to address a document (or other data) on the world wide web.

A web address, like this: http://www.w3schools.com/html/default.asp follows these syntax rules:

scheme://host.domain:port/path/filename

Explanation:

• scheme - defines the type of Internet service. The most common type is http • host - defines the domain host (the default host for http is www) • domain - defines the Internet domain name, like w3schools.com • :port - defines the port number at the host (the default port number for http is 80) • path - defines a path at the server (If omitted, the document must be stored at the root

directory of the web site) • filename - defines the name of a document/resource

Common URL Schemes

The table below lists some common schemes:

Scheme Short for.... Which pages will the scheme be used for...

http HyperText Transfer Protocol Common web pages starts with http://. Not encrypted

https Secure HyperText Transfer Protocol

Secure web pages. All information exchanged are encrypted

ftp File Transfer Protocol For downloading or uploading files to a website. Useful for domain maintenance

14

eAbyas Info Solutions

file A file on your computer

URLs typically consist of three pieces:

1. The name of the protocol used to transfer the resource over the Web. 2. The name of the machine hosting the resource. 3. The name of the resource itself, given as a path.

Consider the URL that designates the current HTML specification:

http://www.w3.org/TR/WD-html4/cover.html

This URL may be read as follows: Use the HTTP protocol to transfer the data residing on the machine www.w3.org in the file /TR/WD-html4/cover.html

URLs in general are case-sensitive (with the exception of machine names). There may be URLs, or parts of URLs, where case doesn't matter, but identifying these may not be easy. Users should always consider that URLs are case-sensitive. /u

The character set of URLs that appear in HTML is specified in [RFC1738].

Fragment URLs

The URL specification en vigeur at the writing of this document ([RFC1738]) offers a mechanism to refer to a resource, but not to a location within a resource. The Web community has adopted a convention called "fragment URLs" to refer to anchors within an HTML document. A fragment URL ends with "#" followed by an anchor identifier. For instance, here is a fragment URL pointing to an anchor named section_2:

http://somesite.com/html/top.html#section_2

Relative URLs

A relative URL (defined in [RFC1808]) doesn't contain any protocol or machine information, and its path generally refers to an HTML document on the same machine as the current document. Relative URLs may contain relative path components (".." means the parent location) and may be fragment URLs.

15

eAbyas Info Solutions

Relative URLs may be resolved to full URLs, for example when the user attempts to follow a link from one document to another. [RFC1808] defines the normative algorithm for resolving relative URLs. The following description is for convenience only.

Briefly, a full URL is derived from a relative URL by attaching a "base" part to the relative URL. The base part is a URL that may come from any or all of the following sources:

• HTTP transfer protocol header information (see [RFC2068]). • Metadata (the META element) in the HEAD section of an HTML document. • Explicit base path information (the BASE element) in the HEAD section of an HTML document,

or the CODEBASE attribute of the APPLET element.

[RFC1808] specifies the precedence among multiple sources of base information. For the purposes of this explanation, the last piece of base information takes precedence over the others and HTTP headers are considered to occur earlier than the document HEAD.

If no explicit base information accompanies the document, the base URL is that which designates the location of the current document.

Given a base URL and a relative URL (that does not begin with a slash), a full URL is derived as follows:

• If the base URL ends with a slash the full URL is derived by appending the relative URL to the base URL. For example, if the base URL is http://nosite.com/dir1/dir2/ and the relative URL is gee.html, the derived URL is http://nosite.com/dir1/dir2/gee.html.

• If the base URL doesn't end with a slash, the last piece of the base URL is considered a resource, so the full URL is derived by appending the relative URL to the parent of the base URL. For example, if the base URL is http://nosite.com/dir1/dir2 and the relative URL is gee.html, the derived URL is http://nosite.com/dir1/gee.html

URLs in HTML

In HTML, URLs play a role in these situations:

• When referring to metadata describing a document (see the HEAD element). • When citing a external reference (see the Q, BLOCKQUOTE, INS, and DEL elements). • When including an object directly in a document (see the OBJECT, IMG, MAP, FRAME, and

IFRAME elements).

16

eAbyas Info Solutions

• When linking to another document or program (see the BASE, A, LINK, AREA, FORM, INPUT, SCRIPT, and APPLET elements).

In each case, authors may use a full URL, a fragment URL, or a relative URL. Please consult the section on anchors for more information about links and URLs.

MAILTO URLs

In addition to HTTP URLs, authors might want to include MAILTO URLs (see [RFC1738]) in their documents. MAILTO URLs cause email to be sent to some email address. For instance, the author might create a link that, when activated, causes the user agent to open a mail program with the destination address in the "To:" field.

MAILTO URLs have the following syntax:

mailto:email-address

User agents may support MAILTO URL extensions that are not yet Internet standards (e.g., appending subject information to a URL with the syntax "?Subject=my%20subject" where any space characters are replaced by "%20").

HTML URL Encoding

INTRODUCTION TO URL ENCODING

URL Encoding Background URL Encoding is the process of converting string into valid URL format. Valid URL format means that the URL contains only what is termed "alpha | digit | safe | extra | escape" characters.

URL encoding is normally performed to convert data passed via html forms, because such data may contain special character, such as "/", ".", "#", and so on, which could either: a) have special meanings; or b) is not a valid character for an URL; or c) could be altered during transfer. For instance, the "#" character needs to be encoded because it has a special meaning of that of an

17

eAbyas Info Solutions

html anchor. The <space> character also needs to be encoded because is not allowed on a valid URL format. Also, some characters, such as "~" might not transport properly across the internet.

What Should be URL Encoded? As a rule of thumb, any non alphanumeric character should be URL encoded. This of course applies to characters that are to be interpreted as is (ie: is not intend to have special meanings) . In such cases, there's no harm in URL-Encoding the character, even if the character actually does not need to be URL-Encoded.

URL encoding is the practice of translating unprintable characters or characters with special meaning within URLs to a representation that is unambiguous and universally accepted by web browsers and servers. These characters include:

• ASCII control characters - Unprintable characters typically used for output control. Character ranges 00-1F hex (0-31 decimal) and 7F (127 decimal). A complete encoding table is given below.

• Non-ASCII control characters - These are characters beyond the ASCII character set of 128 characters. This range is part of the ISO-Latin character set and ncludes the entire "top half" of the ISO-Latin set 80-FF hex (128-255 decimal). A complete encoding table is given below.

• Reserved characters - These are special characters such as the dollar sign, ampersand, plus, common, forward slash, colon, semi-colon, equals sign, question mark, and "at" symbol. All of these can have different meanings inside a URL so need to be encoded. A complete encoding table is given below.

• Unsafe characters - These are space, quotation marks, less than symbol, greater than symbol, pound character, percent character, Left Curly Brace, Right Curly Brace , Pipe, Backslash, Caret, Tilde, Left Square Bracket , Right Square Bracket, Grave Accent. These character present the possibility of being misunderstood within URLs for various reasons. These characters should also always be encoded. A complete encoding table is given below.

The encoding notation replaces the desired character with three characters: a percent sign and two hexadecimal digits whose correspond to the position of the character in the ASCII character set.

18

eAbyas Info Solutions

Example:

One of the most common special characters is the space. You can't type a space in a URL directly. A space position in the character set is 20 hexadecimal. So you can use %20 in place a space when passing your request to the server.

http://www.example.com/new%20pricing.html

This URL actually retrieves a document named new pricing.html from the www.example.com

ASCII control characters encoding

This includes the encoding for character ranges 00-1F hex (0-31 decimal) and 7F (127 decimal)

Decimal Hex Value Character URL Encode

0 00 %00

1 01 %01

2 02 %02

3 03 %03

4 04 %04

5 05 %05

6 06 %06

19

eAbyas Info Solutions

7 07 %07

8 08 backspace %08

9 09 tab %09

10 0a linefeed %0a

11 0b %0b

12 0c %0c

13 0d carriage return %0d

14 0e %0e

15 0f %0f

16 10 %10

17 11 %11

18 12 %12

19 13 %13

20 14 %14

20

eAbyas Info Solutions

21 15 %15

22 16 %16

23 17 %17

24 18 %18

25 19 %19

26 1a %1a

27 1b %1b

28 1c %1c

29 1d %1d

30 1e %1e

31 1f %1f

127 7f %7f

Non-ASCII control characters encoding

This includes the encoding for the entire "top half" of the ISO-Latin set 80-FF hex (128-255 decimal.)

21

eAbyas Info Solutions

Decimal Hex Value Character URL Encode

128 80 € %80

129 81 P %81

130 82 ‚ %82

131 83 ƒ %83

132 84 „ %84

133 85 … %85

134 86 † %86

135 87 ‡ %87

136 88 ˆ %88

137 89 ‰ %89

138 8a Š %8a

139 8b ‹ %8b

140 8c Π%8c

22

eAbyas Info Solutions

141 8d P %8d

142 8e Ž %8e

143 8f P %8f

144 90 P %90

145 91 ‘ %91

146 92 ’ %92

147 93 “ %93

148 94 ” %94

149 95 • %95

150 96 – %96

151 97 — %97

152 98 ˜ %98

153 99 ™ %99

154 9a š %9a

23

eAbyas Info Solutions

155 9b › %9b

156 9c œ %9c

157 9d P %9d

158 9e ž %9e

159 9f Ÿ %9f

160 a0 %a0

161 a1 ¡ %a1

162 a2 ¢ %a2

163 a3 £ %a3

164 a4 ¤ %a4

165 a5 ¥ %a5

166 a6 ¦ %a6

167 a7 § %a7

168 a8 ¨ %a8

24

eAbyas Info Solutions

169 a9 © %a9

170 aa ª %aa

171 ab « %ab

172 ac ¬ %ac

173 ad %ad

174 ae ® %ae

175 af ¯ %af

176 b0 ° %b0

177 b1 ± %b1

178 b2 ² %b2

179 b3 ³ %b3

180 b4 ´ %b4

181 b5 µ %b5

182 b6 ¶ %b6

25

eAbyas Info Solutions

183 b7 · %b7

184 b8 ¸ %b8

185 b9 ¹ %b9

186 ba º %ba

187 bb » %bb

188 bc ¼ %bc

189 bd ½ %bd

190 be ¾ %be

191 bf ¿ %bf

192 c0 À %c0

193 c1 Á %c1

194 c2 Â %c2

195 c3 Ã %c3

196 c4 Ä %c4

26

eAbyas Info Solutions

197 c5 Å %c5

198 c6 Æ %v6

199 c7 Ç %c7

200 c8 È %c8

201 c9 É %c9

202 ca Ê %ca

203 cb Ë %cb

204 cc Ì %cc

205 cd Í %cd

206 ce Î %ce

207 cf Ï %cf

208 d0 Ð %d0

209 d1 Ñ %d1

210 d2 Ò %d2

27

eAbyas Info Solutions

211 d3 Ó %d3

212 d4 Ô %d4

213 d5 Õ %d5

214 d6 Ö %d6

215 d7 × %d7

216 d8 Ø %d8

217 d9 Ù %d9

218 da Ú %da

219 db Û %db

220 dc Ü %dc

221 dd Ý %dd

222 de Þ %de

223 df ß %df

224 e0 à %e0

28

eAbyas Info Solutions

225 e1 á %e1

226 e2 â %e2

227 e3 ã %e3

228 e4 ä %e4

229 e5 å %e5

230 e6 æ %e6

231 e7 ç %e7

232 e8 è %e8

233 e9 é %e9

234 ea ê %ea

235 eb ë %eb

236 ec ì %ec

237 ed í %ed

238 ee î %ee

29

eAbyas Info Solutions

239 ef ï %ef

240 f0 ð %f0

241 f1 ñ %f1

242 f2 ò %f2

243 f3 ó %f3

244 f4 ô %f4

245 f5 õ %f5

246 f6 ö %f6

247 f7 ÷ %f7

248 f8 ø %f8

249 f9 ù %f9

250 fa ú %fa

251 fb û %fb

252 fc ü %fc

30

eAbyas Info Solutions

253 fd ý %fd

254 fe þ %fe

255 ff ÿ %ff

Reserved characters encoding

Following is the table to be used to encode reserved characters.

Decimal Hex Value Char URL Encode

36 24 $ %24

38 26 & %26

43 2b + %2b

44 2c , %2c

47 2f / %2f

58 3a : %3a

59 3b ; %3b

61 3d = %3d

31

eAbyas Info Solutions

63 3f ? %3f

64 40 @ %40

Unsafe characters encoding

Following is the table to be used to encode unsafe characters.

Decimal Hex Value Char URL Encode

32 20 space %20

34 22 " %22

60 3c < %3c

62 3e > %3e

35 23 # %23

37 25 % %25

123 7b { %7b

125 7d } %7d

124 7c | %7c

32

eAbyas Info Solutions

92 5c \ %5c

94 5e ^ %5e

126 7e ~ %7e

91 5b [ %5b

93 5d ] %5d

96 60 ` %60

HTML Script

Introduction to scripts

A client-side script is a program that may accompany an HTML document or be embedded directly in it. The program executes on the client's machine when the document loads, or at some other time such as when a link is activated. HTML's support for scripts is independent of the scripting language.

Scripts offer authors a means to extend HTML documents in highly active and interactive ways. For example:

• Scripts may be evaluated as a document loads to modify the contents of the document dynamically.

• Scripts may accompany a form to process input as it is entered. Designers may dynamically fill out parts of a form based on the values of other fields. They may also ensure that input data conforms to predetermined ranges of values, that fields are mutually consistent, etc.

• Scripts may be triggered by events that affect the document, such as loading, unloading,

33

eAbyas Info Solutions

element focus, mouse movement, etc. • Scripts may be linked to form controls (e.g., buttons) to produce graphical user interface

elements.

There are two types of scripts authors may attach to an HTML document:

• Those that are executed one time when the document is loaded by the user agent. Scripts that appear within a SCRIPT element are executed when the document is loaded. For user agents that cannot or will not handle scripts, authors may include alternate content via the NOSCRIPT element.

• Those that are executed every time a specific event occurs. These scripts may be assigned to a number of elements via the intrinsic event attributes.

HTML Script Tags

Tag Description <script> Defines a client-side script <noscript> Defines an alternate content for users that do not support client-side scripts

The HTML script Element

The <script> tag is used to define a client-side script, such as a JavaScript.

The script element either contains scripting statements or it points to an external script file through the src attribute.

The required type attribute specifies the MIME type of the script.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

The script below writes Hello World! to the HTML output:

34

eAbyas Info Solutions

Example

<script type="text/javascript"> document.write("Hello World!") </script>

The HTML noscript Element

The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripting.

The noscript element can contain all the elements that you can find inside the body element of a normal HTML page.

The content inside the noscript element will only be displayed if scripts are not supported, or are disabled in the user’s browser:

Example

<script type="text/javascript"> document.write("Hello World!") </script> <noscript>Sorry, your browser does not support JavaScript!</noscript>

Designing documents for user agents that support scripting

The following sections discuss issues that concern user agents that support scripting.

18.2.1 The SCRIPT element

<!ELEMENT SCRIPT - - %Script; -- script statements --> <!ATTLIST SCRIPT charset %Charset; #IMPLIED -- char encoding of linked resource -- type %ContentType; #REQUIRED -- content type of script language -- src %URI; #IMPLIED -- URI for an external script -- defer (defer) #IMPLIED -- UA may defer execution of script -- >

35

eAbyas Info Solutions

Start tag: required, End tag: required

Attribute definitions

src = uri [CT]

This attribute specifies the location of an external script.

type = content-type [CI]

This attribute specifies the scripting language of the element's contents and overrides the default scripting language. The scripting language is specified as a content type (e.g., "text/javascript"). Authors must supply a value for this attribute. There is no default value for this attribute.

language = cdata [CI]

Deprecated. This attribute specifies the scripting language of the contents of this element. Its value is an identifier for the language, but since these identifiers are not standard, this attribute has been deprecated in favor of type.

defer [CI]

When set, this boolean attribute provides a hint to the user agent that the script is not going to generate any document content (e.g., no "document.write" in javascript) and thus, the user agent can continue parsing and rendering.

Attributes defined elsewhere

• charset(character encodings)

The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.

The script may be defined within the contents of the SCRIPT element or in an external file. If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element's contents and retrieve the script

36

eAbyas Info Solutions

via the URI. Note that the charset attribute refers to the character encoding of the script designated by the src attribute; it does not concern the content of the SCRIPT element.

Scripts are evaluated by script engines that must be known to a user agent.

The syntax of script data depends on the scripting language.

18.2.2 Specifying the scripting language

As HTML does not rely on a specific scripting language, document authors must explicitly tell user agents the language of each script. This may be done either through a default declaration or a local declaration.

The default scripting language

Authors should specify the default scripting language for all scripts in a document by including the following META declaration in the HEAD:

<META http-equiv="Content-Script-Type" content="type">

where "type" is a content type naming the scripting language. Examples of values include "text/tcl", "text/javascript", "text/vbscript".

In the absence of a META declaration, the default can be set by a "Content-Script-Type" HTTP header.

Content-Script-Type: type

where "type" is again a content type naming the scripting language.

User agents should determine the default scripting language for a document according to the following steps (highest to lowest priority):

1. If any META declarations specify the "Content-Script-Type", the last one in the character stream determines the default scripting language.

2. Otherwise, if any HTTP headers specify the "Content-Script-Type", the last one in the character stream determines the default scripting language.

37

eAbyas Info Solutions

Documents that do not specify default scripting language information and that contain elements that specify an intrinsic event script are incorrect. User agents may still attempt to interpret incorrectly specified scripts but are not required to. Authoring tools should generate default scripting language information to help authors avoid creating incorrect documents.

Local declaration of a scripting language

The type attribute must be specified for each SCRIPT element instance in a document. The value of the type attribute for a SCRIPT element overrides the default scripting language for that element.

In this example, we declare the default scripting language to be "text/tcl". We include one SCRIPT in the header, whose script is located in an external file and is in the scripting language "text/vbscript". We also include one SCRIPT in the body, which contains its own script written in "text/javascript".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>A document with SCRIPT</TITLE> <META http-equiv="Content-Script-Type" content="text/tcl"> <SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc"> </SCRIPT> </HEAD> <BODY> <SCRIPT type="text/javascript"> ...some JavaScript... </SCRIPT> </BODY> </HTML>

References to HTML elements from a script

Each scripting language has its own conventions for referring to HTML objects from within a script. This specification does not define a standard mechanism for referring to HTML objects.

However, scripts should refer to an element according to its assigned name. Scripting engines should observe the following precedence rules when identifying an element: a name attribute takes precedence over an id if both are set. Otherwise, one or the other may be used.

38

eAbyas Info Solutions

18.2.3 Intrinsic events

Note. Authors of HTML documents are advised that changes are likely to occur in the realm of intrinsic events (e.g., how scripts are bound to events). Research in this realm is carried on by members of the W3C Document Object Model Working Group (see the W3C Web Site at http://www.w3.org/ for more information).

Attribute definitions

onload = script [CT]

The onload event occurs when the user agent finishes loading a window or all frames within a FRAMESET. This attribute may be used with BODY and FRAMESET elements.

onunload = script [CT]

The onunload event occurs when the user agent removes a document from a window or frame. This attribute may be used with BODY and FRAMESET elements.

onclick = script [CT]

The onclick event occurs when the pointing device button is clicked over an element. This attribute may be used with most elements.

ondblclick = script [CT]

The ondblclick event occurs when the pointing device button is double clicked over an element. This attribute may be used with most elements.

onmousedown = script [CT]

The onmousedown event occurs when the pointing device button is pressed over an element. This attribute may be used with most elements.

onmouseup = script [CT]

The onmouseup event occurs when the pointing device button is released over an element. This attribute may be used with most elements.

39

eAbyas Info Solutions

onmouseover = script [CT]

The onmouseover event occurs when the pointing device is moved onto an element. This attribute may be used with most elements.

onmousemove = script [CT]

The onmousemove event occurs when the pointing device is moved while it is over an element. This attribute may be used with most elements.

onmouseout = script [CT]

The onmouseout event occurs when the pointing device is moved away from an element. This attribute may be used with most elements.

onfocus = script [CT]

The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.

onblur = script [CT]

The onblur event occurs when an element loses focus either by the pointing device or by tabbing navigation. It may be used with the same elements as onfocus.

onkeypress = script [CT]

The onkeypress event occurs when a key is pressed and released over an element. This attribute may be used with most elements.

onkeydown = script [CT]

The onkeydown event occurs when a key is pressed down over an element. This attribute may be used with most elements.

onkeyup = script [CT]

The onkeyup event occurs when a key is released over an element. This attribute may be used

40

eAbyas Info Solutions

with most elements.

onsubmit = script [CT]

The onsubmit event occurs when a form is submitted. It only applies to the FORM element.

onreset = script [CT]

The onreset event occurs when a form is reset. It only applies to the FORM element.

onselect = script [CT]

The onselect event occurs when a user selects some text in a text field. This attribute may be used with the INPUT and TEXTAREA elements.

onchange = script [CT]

The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA.

It is possible to associate an action with a certain number of events that occur when a user interacts with a user agent. Each of the "intrinsic events" listed above takes a value that is a script. The script is executed whenever the event occurs for that element. The syntax of script data depends on the scripting language.

Control elements such as INPUT, SELECT, BUTTON, TEXTAREA, and LABEL all respond to certain intrinsic events. When these elements do not appear within a form, they may be used to augment the graphical user interface of the document.

For instance, authors may want to include press buttons in their documents that do not submit a form but still communicate with a server when they are activated.

The following examples show some possible control and user interface behavior based on intrinsic events.

In the following example, userName is a required text field. When a user attempts to leave the field, the onblur event calls a JavaScript function to confirm that userName has an acceptable value.

41

eAbyas Info Solutions

<INPUT NAME="userName" onblur="validUserName(this.value)">

Here is another JavaScript example:

<INPUT NAME="num" onchange="if (!checkNum(this.value, 1, 10)) {this.focus();this.select();} else {thanks()}" VALUE="0">

Here is a VBScript example of an event handler for a text field:

<INPUT name="edit1" size="50"> <SCRIPT type="text/vbscript"> Sub edit1_changed() If edit1.value = "abc" Then button1.enabled = True Else button1.enabled = False End If End Sub </SCRIPT>

Here is the same example using Tcl:

<INPUT name="edit1" size="50"> <SCRIPT type="text/tcl"> proc edit1_changed {} { if {[edit value] == abc} { button1 enable 1 } else { button1 enable 0 } } edit1 onChange edit1_changed </SCRIPT>

Here is a JavaScript example for event binding within a script. First, here's a simple click handler:

<BUTTON type="button" name="mybutton" value="10"> <SCRIPT type="text/javascript"> function my_onclick() { . . .

42

eAbyas Info Solutions

} document.form.mybutton.onclick = my_onclick </SCRIPT> </BUTTON>

Here's a more interesting window handler:

<SCRIPT type="text/javascript"> function my_onload() { . . . } var win = window.open("some/other/URI") if (win) win.onload = my_onload </SCRIPT>

In Tcl this looks like:

<SCRIPT type="text/tcl"> proc my_onload {} { . . . } set win [window open "some/other/URI"] if {$win != ""} { $win onload my_onload } </SCRIPT>

Note that "document.write" or equivalent statements in intrinsic event handlers create and write to a new document rather than modifying the current one.

Dynamic modification of documents

Scripts that are executed when a document is loaded may be able to modify the document's contents dynamically. The ability to do so depends on the scripting language itself (e.g., the "document.write" statement in the HTML object model supported by some vendors).

The dynamic modification of a document may be modeled as follows:

1. All SCRIPT elements are evaluated in order as the document is loaded. 2. All script constructs within a given SCRIPT element that generate SGML CDATA are evaluated.

43

eAbyas Info Solutions

Their combined generated text is inserted in the document in place of the SCRIPT element. 3. The generated CDATA is re-evaluated.

HTML documents are constrained to conform to the HTML DTD both before and after processing any SCRIPT elements.

The following example illustrates how scripts may modify a document dynamically. The following script:

<TITLE>Test Document</TITLE> <SCRIPT type="text/javascript"> document.write("<p><b>Hello World!<\/b>") </SCRIPT>

Has the same effect as this HTML markup:

<TITLE>Test Document</TITLE> <P><B>Hello World!</B>

Designing documents for user agents that don't support scripting

The following sections discuss how authors may create documents that work for user agents that don't support scripting.

18.3.1 The NOSCRIPT element

<!ELEMENT NOSCRIPT - - (%block;)+ -- alternate content container for non script-based rendering --> <!ATTLIST NOSCRIPT %attrs; -- %coreattrs, %i18n, %events -- >

Start tag: required, End tag: required

The NOSCRIPT element allows authors to provide alternate content when a script is not executed. The content of a NOSCRIPT element should only be rendered by a script-aware user agent in the following cases:

44

eAbyas Info Solutions

• The user agent is configured not to evaluate scripts. • The user agent doesn't support a scripting language invoked by a SCRIPT element earlier in the

document.

User agents that do not support client-side scripts must render this element's contents.

In the following example, a user agent that executes the SCRIPT will include some dynamically created data in the document. If the user agent doesn't support scripts, the user may still retrieve the data through a link.

<SCRIPT type="text/tcl"> ...some Tcl script to insert data... </SCRIPT> <NOSCRIPT> <P>Access the <A href="http://someplace.com/data">data.</A> </NOSCRIPT>

Hiding script data from user agents

User agents that don't recognize the SCRIPT element will likely render that element's contents as text. Some scripting engines, including those for languages JavaScript, VBScript, and Tcl allow the script statements to be enclosed in an SGML comment. User agents that don't recognize the SCRIPT element will thus ignore the comment while smart scripting engines will understand that the script in comments should be executed.

Another solution to the problem is to keep scripts in external documents and refer to them with the src attribute.

Commenting scripts in JavaScript The JavaScript engine allows the string "<!--" to occur at the start of a SCRIPT element, and ignores further characters until the end of the line. JavaScript interprets "//" as starting a comment extending to the end of the current line. This is needed to hide the string "-->" from the JavaScript parser.

<SCRIPT type="text/javascript"> <!-- to hide script contents from old browsers function square(i) { document.write("The call passed ", i ," to the function.","<BR>") return i * i }

45

eAbyas Info Solutions

document.write("The function returned ",square(5),".") // end hiding contents from old browsers --> </SCRIPT>

Commenting scripts in VBScript In VBScript, a single quote character causes the rest of the current line to be treated as a comment. It can therefore be used to hide the string "-->" from VBScript, for instance:

<SCRIPT type="text/vbscript"> <!-- Sub foo() ... End Sub ' --> </SCRIPT>

Commenting scripts in TCL In Tcl, the "#" character comments out the rest of the line:

<SCRIPT type="text/tcl"> <!-- to hide script contents from old browsers proc square {i} { document write "The call passed $i to the function.<BR>" return [expr $i * $i] } document write "The function returned [square 5]." # end hiding contents from old browsers --> </SCRIPT>

HTML Entities

Some characters are reserved in HTML.

It is not possible to use the less than (<) or greater than (>) signs in your text, because the browser will mix them with tags.

46

eAbyas Info Solutions

To actually display reserved characters, we must use character entities in the HTML source code.

A character entity looks like this:

&entity_name;

OR

&#entity_number;

To display a less than sign we must write: &lt; or &#60;

Non-breaking Space

A common character entity used in HTML is the non-breaking space (&nbsp;).

Browsers will always truncate spaces in HTML pages. If you write 10 spaces in your text, the browser will remove 9 of them, before displaying the page. To add spaces to your text, you can use the &nbsp; character entity.

HTML Useful Character Entities

Note: Entity names are case sensitive!

Result Description Entity Name Entity Number non-breaking space &nbsp; &#160; < less than &lt; &#60; > greater than &gt; &#62; & ampersand &amp; &#38; ¢ cent &cent; &#162; £ pound &pound; &#163; ¥ yen &yen; &#165; € euro &euro; &#8364; § section &sect; &#167; © copyright &copy; &#169;

47

eAbyas Info Solutions

® registered trademark &reg; &#174; ™ trademark &trade; &#8482;

HTML Webserver

After HTML coding process is completed, the webpage needs to be published, to make it available for the audience. To enable this, it is necessary to save the webpage on a web server. After IIS or PWS installation, any PC can serve as a web server. IIS or PWS are web server components. IIS contains a set of services designed specifically for MS Windows. It is included into Win 2000, Win XP and Vista. It is quite easy to install and use this application. IIS includes Active Server Pages, which can be used for making interactive and dynamic web applications. Personal Web Server is designed for use with older versions of WindowsOS, such as Win 95, Win 98, and Win NT. It is recommended to use IIS, because it more up-to-date and secure.

Hosting your own Web site

Hosting your web site on your own server is always an option. Here are some points to consider:

Hardware Expenses

To run a "real" web site, you will have to buy some powerful server hardware. Don't expect that a low cost PC will do the job. You will also need a permanent (24 hours a day ) high-speed connection.

Software Expenses

Remember that server-licenses often are higher than client-licenses. Also note that server-licenses might have limits on number of users.

Labor Expenses

Don't expect low labor expenses. You have to install your own hardware and software. You also

48

eAbyas Info Solutions

have to deal with bugs and viruses, and keep your server constantly running in an environment where "everything could happen".

Using an Internet Service Provider

Renting a server from an Internet Service Provider (ISP) is a common option.

Most small companies store their web site on a server provided by an ISP. Here are some advantages:

Connection Speed

Most ISPs have very fast connections to the Internet.

Powerful Hardware

ISPs often have powerful web servers that can be shared by several companies. You can also expect them to have an effective load balancing, and necessary backup servers.

Security and Stability

ISPs are specialists on web hosting. Expect their servers to have more than 99% up time, the latest software patches, and the best virus protection.

Things to Consider with an ISP

24-hour support

Make sure your ISP offers 24-hours support. Don't put yourself in a situation where you cannot fix critical problems without having to wait until the next working day. Toll-free phone could be vital if you don't want to pay for long distance calls.

49

eAbyas Info Solutions

Daily Backup

Make sure your ISP runs a daily backup routine, otherwise you may lose some valuable data.

Traffic Volume

Study the ISP's traffic volume restrictions. Make sure that you don't have to pay a fortune for unexpected high traffic if your web site becomes popular.

Bandwidth or Content Restrictions

Study the ISP's bandwidth and content restrictions. If you plan to publish pictures or broadcast video or sound, make sure that you can.

E-mail Capabilities

Make sure your ISP supports the e-mail capabilities you need.

Database Access

If you plan to use data from databases on your web site, make sure your ISP supports the database access you need.

50

eAbyas Info Solutions