HTML (Web Designing) Notes

Lecturer: HABIBULLA.A.
MANAGOLI
HTML
IV SEM Computer Technique
1. HTML
1.1 Introduction: HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language. HTML is not a programming language, it is a markup language. A markup language is a set of markup tags. HTML uses markup tags to describe web pages. HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other's research documents. The project became a bigger success than Tim Berners-Lee had ever imagined. By inventing HTML he laid the foundation for the web. HTML (Hypertext Markup Language) is used to create document on the World Wide Web. It is simply a collection of certain key words called Tags that are helpful in writing the docume nt to be displayed using a browser on Internet. It is a platform independent language that can be used on any platform such as Windows, Linux, Macintosh, and so on. To display a document in web it is essential to mark-up the different elements (headings, paragraphs, tables, and so on) of the document with the HTML tags. To view a mark-up document, user has to open the document in a browser. A browser understands and interpret the HTML tags, identifies the structure of the document (which part are which) and makes decision about presentation (how the parts look) of the document. HTML also provides tags to make the document look attractive using graphics, font size and colors. User can make a link to the other document or the different section of the same document by creating Hypertext Links also known as Hyperlinks.
How to start: The only thing needed to make a website is a browser and a simple word processor such as Notepad. Access Notepad by clicking Start > All Programs > Accessories > Notepad Before embarking (to make a start) on making your first webpage you need to know how to turn a regular text file into an HTML file: From the File menu in Notepad choose Save As, give your file a name, any name you like, for example mypage, and add the .html extension to it like so: mypage.html The .html extension is what turns a regular text file into an HTML file. It only needs to be added at the time you create the file, once it's made you simply save it because Notepad will already know that it's an HTML file. Save your file in a folder where you can easily find it. The saved code can be opened and edited from within Notepad or depending on the browser being used, by right-clicking on the opened web page and choosing View Source from the pop up menu. Opening a webpage is done by going to the folder it is saved in and double clicking on the HTML file so that it opens in the browser.
SECAB Vocational Section, Bijapur 1
Lecturer: HABIBULLA.A.MANAGOLI
HTML
1.3 What an HTML Document is:

HTML documents are plain-text files with .htm or .html extension that can be created using any text editor like Notepad.
1.4 HTML Editor:

A HTML editor is an authoring software application that is used to create content for web sites.
1.5 Tags (also known as "HTML elements") and Page Structure:

Tags are instructions that are embedded (placed) directly into the text of a HTML document. Each HTML tag describes that the browser should do something instead of simply displaying the text. In HTML, Every tag is a command placed between angle brackets a left bracket (<) and a right bracket (>).
1.6 HTML tags can be of two types. They are

1. Paired Tags 2. Unpaired Tags Paired Tags: A tag is said to be a paired tag if the text is placed between a tag and its companion tag. In paired tags, the first tag is referred to as Opening Tag and the second tag is referred to as Closing Tag. Example: <i>This text is in italics. </i> Note: Here <i> is called opening tag and </i> is called closing tag. Unpaired Tags: An unpaired tag does not have a companion tag. Unpaired tags are also known as Singular or Stand-Alone Tags. Example : <br> , <hr> etc. These tags do not require any companion tag. The most important tags are <html> and </html> - the entire document is contained within these two tags. The instruction here is simply "This is an HTML document". Within the document, there are two parts: the "head" and the "body". The head is contained within the tags <head> and </head>, the body is contained within the tags <body> and </body>. The head includes information about the document, and is not displayed by the browser. The body contains all the contents for the page, and is what the browser displays. Let's have a look at the example HTML document. <html> <head> <title>A Simple Web Page</title> </head> <body> This is about as simple as a web page can get. </body> </html> The first and last tags identify this as an HTML document, so your browser or other software knows what to do with it. The head contains the "title" tags which identify the name of this document. The body contains one line of text, which is what you see when you open this document in a browser.
HTML
1.7 The minimal HTML Document:

Every HTML document should contain certain standard HTML tags. Each document consists of head and body text. The head contains the title, and the body contains the actual text that is made up of paragraphs, lists, and other elements. Browsers expect specific information because they are programmed according to HTML specifications. Required elements are shown in this sample document example: <html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <H1>HTML is Easy To Learn</H1> <P>Welcome to the world of HTML. This is the first paragraph. </P> <P>And this is the second paragraph. </P> </body> </html> The required elements are the <html>, <head>, <title>, and <body> tags (and their corresponding end tags).
2. MARKUP TAGS:
A markup tag is the fundamental characteristic of HTML. Every markup tag is a command placed between angle bracketsa left bracket (<) and a right bracket (>). Markup tags are not revealed by a web browser; they are invisible. In most cases, markup tags (containing commands) come in pairs, with text or a graphic image located between the beginning and ending tags: Pairs of markup tags are referred to as non-empty tags, because something is contained between the beginning tag and the ending tag. A beginning tag and an ending tag are identical (exactly the same as), except a slash (/) is placed before the command of the ending tag to tell the browser that the command has been completed. Some HTML tags are referred to as empty tags, because they consist only of a single tag rather than a pair of tags. That is, an empty tag consists only of a <COMMAND> tag and lacks (a complete absence of a particular thing) an ending </COMMAND> tag.
SECAB Vocational Section, Bijapur
HTML
2.1 Html: The <html> tag tells the browser that this is an HTML document. The html element is the outermost element in HTML and XHTML documents. The html element is also known as the root element. Example: A simple HTML document, with the minimum of required tags: <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> 2.2 Head: The head element is a container for all the head elements. The following tags can be added to the head section: <base>, <link>, <meta>, <script>, <style>, <noscript> and <title>. The <title> tag defines the title of the document, and is the only required element in the head section. Example: A simple HTML document, with the minimum of required tags: <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> 2.3 Title: The <title> tag defines the title of the document. The title element is required in all HTML/XHTML documents. The title element: defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results
HTML
Example: A simple HTML document, with the minimum of required tags: <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> 2.4 Body: The body element defines the document's body. The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. Example: A simple HTML document, with the minimum of required tags: <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> 2.5 Heading: The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Example: The six different HTML headings: <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>
HTML
2.6 Paragraphs: The <p> tag defines a paragraph. The p element automatically creates some space before and after itself. The space is automatically applied by the browser, or you can specify it. Example: A paragraph is marked up as follows: <p>This is some text in a paragraph. </p> 2.7 Pre-formatted Text: The <pre> tag defines preformatted text. Text in a pre element is displayed in a fixed-width font (usually Courier), and it preserves (make sure something lasts) both spaces and line breaks. Example: <html> <body> <pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre> <p>The pre element is often used to display computer code:</p> <pre>for i = 1 to 10 print i next i </pre> </body> </html> OUTPUT:
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks
The pre element is often used to display computer code:

for i = 1 to 10 print i next i
HTML
2.8 List: Ordered List: The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical. Unordered List: The <ul> tag defines an unordered list (a bulleted list). List: The <li> tag defines a list item. The <li> tag is used in both ordered (<ol>) and unordered (<ul>) lists. Example: <html> <body> <p>An ordered list:</p> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <p>An unordered list:</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
OUTPUT: An ordered list: 1. Coffee 2. Tea 3. Milk An unordered list: Coffee Tea Milk
A nested list Example: <html> <body> <h4>A list inside a list:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html>
OUTPUT: A list inside a list:

Coffee Tea
o o
Black tea Green tea
Milk
HTML
Another nested list Example: <html> <body> <h4>Lists inside a list:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> </body> </html> 2.9 Quotations: Short Quotations: The <q> tag defines a short quotation. The browser will insert quotation marks around the quotation. Example: <html> <body> <p>Here comes a short quotation: <q>This is a short quotation</q></p> <p>Notice that the browser inserts quotation marks around the quotation.</p> </body> </html> OUTPUT: Here comes a short quotation: This is a short quotation Notice that the browser inserts quotation marks around the quotation. OUTPUT: Lists inside a list: Coffee Tea
o o
Black tea Green tea China Africa
Milk
HTML
Long Quotations: The <blockquote> tag defines a long quotation. Browsers usually indent <blockquote> elements. Example: <html> <body> Here comes a long quotation: <blockquote> This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. </blockquote> Notice that a browser inserts white space before and after a blockquote element. It also inserts margins for the blockquote element. </body> </html> OUTPUT:
2.10 Addresses: The <address> tag defines the contact information for the author or owner of a document. This way, the reader is able to contact the document's owner. The address element is usually added to the header or footer of a webpage. Example: <html> <body> <address> Written by W3Schools.com<br /> <a href="mailto:us@example.org">Email us</a><br /> Address: Box 564, Disneyland<br /> Phone: +12 34 56 78 </address> </body> </html> OUTPUT: Written by W3Schools.com Email us Address: Box 564, Disneyland Phone: +12 34 56 78
HTML
2.11 Forced Line Breaks: The BR tag is used to force line breaks within text. Normally, linebreaks are treated as a space by browsers (except inside the PRE tag). The <br> tag inserts a single line break. The <br> tag is an empty tag which means that it has no end tag. Example: <html> <body> <p> To break<br />lines<br />in a<br />paragraph,<br />use the br element. </p> </body> </html> 2.13 Horizontal Rules: The <hr> tag creates a horizontal line in an HTML page. The <hr> element can be used to separate content in an HTML page. 1. Example: <html> <body> <p>This is some text.</p> <hr> <p>This is some text.</p> This is some text. </body> </html> 2. Example: <html> <body> <p>This is some text.</p> <hr align=left width =50 color=blue> <p>This is some text.</p> This is some text. </body> </html> 3. Example: <html> <body> <p>This is some text.</p> <hr width=50 size=20> <p>This is some text.</p> </body> </html>
OUTPUT: To break lines in a paragraph, use the br element.
OUTPUT: This is some text.
This is some text.

10
HTML
4. Example: <html> <body> <p>This is some text.</p> <hr width=50 size=20 noshade> <p>This is some text.</p> </body> </html>
OUTPUT: This is some text. This is some text.
3. CHARACTER FORMATTING:
Character Formatting (which should be rendered distinctly from non-formatted text) allows the author in-line control over changes to content, whereas the other basic formatting mode, Block Formatting (<address>, <blockquote>, <center>, <p>, <pre>), defines content into vertically distinct sections from surrounding text. A visual browser will usually render Character Formatting changes in place while Block Formatting will render any applicable formatting plus an additional line break before and after the content block. 3.1 Logical versus Physical Styles: There are two classes of character formatting styles - Physical styles and Virtual styles (in the past as "logical" elements.) Each Physical style should be rendered distinctly from other Physical styles, while each Virtual style should be rendered distinctly from other Virtual styles. Many of the Physical styles are the common visual rendering similar for Virtual styles (i.e.: strong emphasis <strong> is usually rendered as boldface: <b>) 3.3 Physical Styles: [<big>, <blink>, <b>, <font>, <i>, <small>, <s>or<strike>, <sub>, <sup>, <tt>, <u>] Physical styles clearly describe what the final appearance of the contained text should look like. If the rendering device does not have the capability to produce the indicated Physical style (such as a browser for the visually impaired (damaged)), this formatting may be lost. <big> - This element applies a larger size font formatting to text (in relation to the default font size). <blink>- This is a physical style element that makes contained text within blink on and off on the screen. <b> - This element applies a bold font formatting to text. <font> - The <font> tag specifies the font face, font size, and font color of text. <i> - This physical style element applies an italic font formatting to text. <small>-This element applies a smaller size font formatting to text (in relation to the default font size). <s>or<strike> - The <s> and <strike> tags define strikethrough text. <sub> - The <sub> tag defines subscript text. Subscript text appears half a character below the baseline. Subscript
text can be used for chemical formulas, like H2O.
<sup> - The <sup> tag defines superscript text. Superscript text appears half a character above the baseline. <tt> <u> Example: <html> <body>
Superscript text can be used for footnotes, like WWW[1]. - This Physical formatting element applies a fixed-width font to text. - This Physical formatting element applies underlining to text.
<b>This text is bold</b><br> <big>This text is big</big><br> <i>This text is italic</i><br> <small>This text is small</small><br>
HTML
<tt>This text is teletype</tt><br> This text contains <sub>subscript</sub><br> This text contains <sup>superscript</sup><br> <font face="verdana" color="green" size="5">This is some text!</font><br> <blink>blinking text</blink><br> <u>Underlined text</u><br> <strike>strikethrough text</strike> <br><s>strikethrough text</s> </body> </html>
3.2 Logical or Virtual Styles: [<abbr>, <acronym>, <cite>, <code>, <dfn>, <em>, <kbd>, <q>, <samp>, <strong>, <var>] Virtual styles purposefully do not include any final rendering hints in their definitions. These styles describe instead (as an alternative) how the contained text is used in the context of the document. <abbr>-This element indicates that content is an Abbreviation (a shortened or contracted form of a word or
phrase, used to represent the whole). The TITLE attribute is suggested for providing the full or expanded form of the abbreviation. While knowing the expanded form may not be implicitly important in the rendering of the content, it can assist in speech synthesis, spell-checking, and other document management scenarios. <acronym>- This element indicates that content is an Acronym (an abbreviation formed from the initial letters or groups of letters of words in a phrase). The TITLE attribute is suggested for providing the full or expanded form of the acronym. <cite> -This virtual style element indicates text that is used as a citation. <code>-This virtual style element indicates text that is a sample of computer code. <dfn> -This virtual character formatting element indicates text that is a defining instance (Definition term) <em> -This virtual character formatting element indicates text that should be emphasized in some manner. <kbd> -Defines keyboard text. <samp>-Defines sample computer code. <strong>-This virtual style element indicates text that should have strong emphasis. <var> -This virtual character formatting element indicates text that represents a variable name.
Example:
<html> <body> Send by <abbr title="facsimile">fax</abbr><br> Can I get this <acronym title="as soon as possible">ASAP</acronym>?<br> <cite>citation text</cite><br> <code>Computer code text</code><br> <dfn>Definition term</dfn><br> <em>Emphasized text</em><br> <p>Here comes a short quotation: <q>This is a short quotation</q></p><br> <samp>Sample computer code text</samp><br /> <strong>Strong text</strong><br /> <var>Variable</var> </body> </html> SECAB Vocational Section, Bijapur 12
HTML
3.4 HTML Escape Sequences or Character Entity References: Character Entities References are the way you put special letters, numbers and symbols on the web page. A character entity reference consists of an ampersand (&), followed by a pound sign (#), the number of the character entity, and finishing with a semi-colon (;). Alternately, for some characters you can put ampersand, the name of the character (but no # sign), followed by a semi-colon.
For example, you could put a copyright symbol on the page like this: this code produces this
©
The copyright symbol is named "copy", so you could also add the character like this: this code produces this
©
The names of character entities are not as well supported by the browsers as the numbers, so it's best to use the numbers. This is the complete list of character entity references defined in HTML 4.0. 169
Name of Code O/p Character Description
copy ordf laquo not shy reg macr deg plusmn sup2 sup3
copyright sign feminine ordinal indicator left-pointing double angle quotation mark = left pointing guillemet not sign soft hyphen = discretionary hyphen
170 171 172 173 174 175 176 177 178 179
34 38 60 62 160 161 162 163 164 165 166 167 168
quot amp lt gt nbsp iexcl cent pound curren yen brvbar sect uml
" & < >
quotation mark = APL quote ampersand less-than sign greater-than sign no-break space = nonbreaking space
inverted exclamation mark cent sign pound sign currency sign yen sign = yuan sign broken bar = broken vertical bar section sign diaeresis = spacing diaeresis
registered sign = registered trade mark sign macron = spacing macron = overline = APL overbar degree sign plus-minus sign = plus-orminus sign superscript two = superscript digit two = squared superscript three = superscript digit three = cubed
13
HTML
180 181 182 183 184 185 186 187
acute micro para middot cedil sup1 ordm raquo
acute accent = spacing acute micro sign pilcrow sign = paragraph sign middle dot = Georgian comma = Greek middle dot cedilla = spacing cedilla superscript one = superscript digit one masculine ordinal indicator right-pointing double angle quotation mark = right pointing guillemet vulgar fraction one quarter = fraction one quarter vulgar fraction one half = fraction one half vulgar fraction three quarters = fraction three quarters inverted question mark = turned question mark latin capital letter A with grave = latin capital letter A grave latin capital letter A with acute latin capital letter A with circumflex latin capital letter A with tilde latin capital letter A with diaeresis latin capital letter A with ring above = latin capital letter A ring latin capital letter AE = latin capital ligature AE latin capital letter C with cedilla latin capital letter E with grave latin capital letter E with acute
202 203 204 205 206 207 208 209 210 211 212 213 214 215 216
Ecirc Euml Igrave Iacute Icirc Iuml ETH Ntilde Ograve Oacute Ocirc Otilde Ouml times Oslash
latin capital letter E with circumflex latin capital letter E with diaeresis latin capital letter I with grave latin capital letter I with acute latin capital letter I with circumflex latin capital letter I with diaeresis latin capital letter ETH latin capital letter N with tilde latin capital letter O with grave latin capital letter O with acute latin capital letter O with circumflex latin capital letter O with tilde latin capital letter O with diaeresis multiplication sign latin capital letter O with stroke = latin capital letter O slash latin capital letter U with grave latin capital letter U with acute latin capital letter U with circumflex latin capital letter U with diaeresis latin capital letter Y with acute latin capital letter THORN latin small letter sharp s = esszed latin small letter a with grave = latin small letter a grave latin small letter a with acute
14
188 189 190 191
frac14 frac12 frac34 iquest
192 193 194 195 196
Agrave Aacute Acirc Atilde Auml
217 218 219 220 221 222 223 224 225
Ugrave Uacute Ucirc Uuml Yacute
197
Aring
198 199 200 201
AElig Ccedil Egrave Eacute
THORN szlig agrave aacute
HTML
226 227 228
acirc atilde auml
latin small letter a with circumflex latin small letter a with tilde latin small letter a with diaeresis latin small letter a with ring above = latin small letter a ring latin small letter ae = latin small ligature ae latin small letter c with cedilla latin small letter e with grave latin small letter e with acute latin small letter e with circumflex latin small letter e with diaeresis latin small letter i with grave latin small letter i with acute latin small letter i with circumflex latin small letter i with diaeresis latin small letter eth latin small letter n with tilde latin small letter o with grave latin small letter o with acute latin small letter o with circumflex latin small letter o with tilde latin small letter o with diaeresis division sign latin small letter o with stroke, = latin small letter o slash latin small letter u with grave latin small letter u with acute
251 252 253 254 255 338
ucirc uuml yacute thorn yuml OElig
latin small letter u with circumflex latin small letter u with diaeresis latin small letter y with acute latin small letter thorn with latin small letter y with diaeresis latin capital ligature OE latin small ligature oe ligature is a misnomer, this is a separate character in some languages latin capital letter S with caron latin small letter s with caron latin capital letter Y with diaeresis latin small f with hook = function = florin modifier letter circumflex accent small tilde greek capital letter alpha greek capital letter beta greek capital letter gamma greek capital letter delta greek capital letter epsilon greek capital letter zeta greek capital letter eta greek capital letter theta greek capital letter iota greek capital letter kappa greek capital letter lambda greek capital letter mu greek capital letter nu greek capital letter xi
15
229
aring
230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250
aelig ccedil egrave eacute ecirc euml igrave iacute icirc iuml eth ntilde ograve oacute ocirc otilde ouml divide oslash ugrave uacute
339
oelig
352 353 376 402 710 732 913 914 915 916 917 918 919 920 921 922 923 924 925 926
Scaron scaron Yuml fnof circ tilde Alpha Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa Lambda Mu Nu Xi
HTML
927 928 929 931 932 933 934 935 936 937 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965
Omicron Pi Rho Sigma Tau Upsilon Phi Chi Psi Omega alpha beta gamma delta epsilon zeta eta theta iota kappa lambda mu nu xi
greek capital letter omicron greek capital letter pi greek capital letter rho there is no Sigmaf, and no U+03A2 character either greek capital letter sigma greek capital letter tau greek capital letter upsilon greek capital letter phi greek capital letter chi greek capital letter psi greek capital letter omega greek small letter alpha greek small letter beta greek small letter gamma greek small letter delta greek small letter epsilon greek small letter zeta greek small letter eta greek small letter theta greek small letter iota greek small letter kappa greek small letter lambda greek small letter mu greek small letter nu greek small letter xi greek small letter omicron greek small letter pi greek small letter rho greek small letter final sigma greek small letter sigma greek small letter tau greek small letter upsilon
966 967 968 969 977 978 982
phi chi psi omega
greek small letter phi greek small letter chi greek small letter psi greek small letter omega greek small letter theta symbol greek upsilon with hook symbol greek pi symbol en space em space
thetasym upsih piv
8194 ensp 8195 emsp 8201 thinsp 8204 zwnj 8205 zwj 8206 lrm 8207 rlm 8211 ndash 8212 mdash 8216 lsquo 8217 rsquo 8218 sbquo 8220 ldquo 8221 rdquo 8222 bdquo 8224 dagger 8225 Dagger 8226 bull
thin space zero width non-joiner zero width joiner left-to-right mark right-to-left mark en dash em dash left single quotation mark right single quotation mark single low-9 quotation mark left double quotation mark right double quotation mark double low-9 quotation mark dagger double dagger bullet = black small circle bullet is NOT the same as bullet operator horizontal ellipsis = three dot leader per mille sign prime = minutes = feet double prime = seconds = inches
16
omicron pi rho sigmaf sigma tau upsilon
8230 hellip 8240 permil 8242 prime 8243 Prime
HTML
8249 lsaquo
single left-pointing angle quotation mark lsaquo is proposed but not yet ISO standardized single right-pointing angle quotation mark rsaquo is proposed but not yet ISO standardized overline = spacing overscore fraction slash euro sign blackletter capital I = imaginary part script capital P = power set = Weierstrass p blackletter capital R = real part symbol trade mark sign alef symbol = first transfinite cardinal alef symbol is NOT the same as hebrew letter alef, U+05D0 although the same glyph could be used to depict both characters leftwards arrow upwards arrow rightwards arrow downwards arrow left right arrow downwards arrow with corner leftwardsc = carriage return leftwards double arrow Unicode does not say that lArr is the same as the 'is implied by' arrow but also does not have any other character for that function. So ? lArr can be used for 'is implied by' upwards double arrow
8658 rArr
8250 rsaquo
rightwards double arrow Unicode does not say this is the 'implies' character but does not have another character with this function so ? rArr can be used for 'implies' as ISOtech suggests downwards double arrow left right double arrow for all partial differential there exists empty set = null set = diameter nabla = backward difference element of not an element of contains as member n-ary product = product sign prod is NOT the same character as U+03A0 'greek capital letter pi' though the same glyph might be used for both n-ary sumation sum is NOT the same character as U+03A3 'greek capital letter sigma' though the same glyph might be used for both minus sign asterisk operator square root = radical sign proportional to infinity angle logical and = wedge logical or = vee
17
8659 dArr 8660 hArr 8704 forall 8706 part 8707 exist 8709 empty 8711 nabla 8712 isin 8713 notin 8715 ni
8254 oline 8260 frasl 8364 euro 8465 image 8472 weierp 8476 real 8482 trade
8501 alefsym
8719 prod
8592 larr 8593 uarr 8594 rarr 8595 darr 8596 harr 8629 crarr
8721 sum
8722 minus 8727 lowast 8730 radic 8733 prop 8734 infin 8736 ang 8743 and 8744 or
8656 lArr
8657 uArr
HTML
8745 cap 8746 cup 8747 int 8756 there4
intersection = cap union = cup integral therefore tilde operator = varies with = similar to tilde operator is NOT the same character as the tilde, U+007E, although the same glyph might be used to represent both approximately equal to almost equal to = asymptotic to not equal to identical to less-than or equal to greater-than or equal to subset of superset of note that nsup, 'not a superset of, U+2283' is not covered by the Symbol font encoding and is not included. Should it be, for symmetry? It is in ISOamsn not a subset of subset of or equal to superset of or equal to circled plus = direct sum
8855 otimes 8869 perp
circled times = vector product up tack = orthogonal to = perpendicular dot operator dot operator is NOT the same character as U+00B7 middle dot left ceiling = apl upstile right ceiling left floor = apl downstile right floor left-pointing angle bracket = bra lang is NOT the same character as U+003C 'less than' or U+2039 'single leftpointing angle quotation mark' right-pointing angle bracket = ket rang is NOT the same character as U+003E 'greater than' or U+203A 'single rightpointing angle quotation mark' lozenge black spade suit black here seems to mean filled as opposed to hollow black club suit = shamrock black heart suit = valentine black diamond suit
8901 sdot
8764 sim
8968 lceil 8969 rceil 8970 lfloor 8971 rfloor
8773 cong 8776 asymp 8800 ne 8801 equiv 8804 le 8805 ge 8834 sub
9001 lang
9002 rang
8835 sup
9674 loz 9824 spades 9827 clubs 9829 hearts 9830 diams
8836 nsub 8838 sube 8839 supe 8853 oplus
18
HTML
4. LINKING:
HTML Links: A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the anchor <a> tag. The <a> tag can be used in two ways: 1. To create a link to another document, by using the href attribute 2. To create a bookmark inside a document, by using the name attribute HTML Link Syntax: The HTML code for a link is simple. It looks like this: <a href="url">Link text</a> The href attribute specifies the destination of a link. Example: <html> <body> <a href="http://www.w3schools.com/">Visit W3Schools</a> </body> </html> HTML Links - The target Attribute: The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab: Example: <html> <body> <a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a> <p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p> </body> </html> HTML Links - The name Attribute: The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark (Link to a location on the same page) inside an HTML document. Example: A named anchor inside an HTML document: <a name="tips">Useful Tips Section</a> Create a link to the "Useful Tips Section" inside the same document: <a href="#tips">Visit the Useful Tips Section</a>
HTML
Or, create a link to the "Useful Tips Section" from another page: <a href="http://www.w3schools.com/html_links.htm#tips">Visit the Useful Tips Section</a> 4.1 Absolute Path URLs: Absolute paths are called that because they refer to the very specific location, including the domain name. The absolute path to a Web element is also often referred to as the URL. For example http://www.w3schools.com Relative Path URLs: Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path: links in the same directory as the page have no path information listed. filename sub-directories are listed without any preceding slashes. weekly/filename links up one directory are listed as: ../filename Example: <html> <head> <base href="http://www.w3schools.com"> </head> <body> <p>An absolute URL: <a href="http://www.w3schools.com">W3Schools</a></p> <p>A relative URL: <a href="tags">Tags</a></p> </body> </html> OUTPUT: An absolute URL: W3Schools A relative URL: Tags 4.2 URLs (Uniform Resource Locators): A URL is another word for a web address. 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.
20
HTML
4.3 Links to specific sections: A name attribute is a hidden reference marker for a particular section of your HTML file. This might be used to link to a different section of the same page if it is long, or to a marked section of another page. Example: <html> <body> <p> <a href="#C4">See also Chapter 4</a> </p> <p> <h2>Chapter 1</h2> <p>This chapter explains something</p> <h2>Chapter 2</h2> <p>This chapter explains something</p> <h2>Chapter 3</h2> <p>This chapter explains something</p> <h2>Chapter 4</h2> <p>This chapter explains something</p> <h2>Chapter 5</h2> <p>This chapter explains something</p> <h2>Chapter 6</h2> <p>This chapter explains something</p> <h2>Chapter 7</h2> <p>This chapter explains something</p>
<h2>Chapter 8</h2> <p>This chapter explains something</p> <h2>Chapter 9</h2> <p>This chapter explains something</p> <h2>Chapter 10</h2> <p>This chapter explains something</p> <h2>Chapter 11</h2> <p>This chapter explains something</p> <h2>Chapter 12</h2> <p>This chapter explains something</p> <h2><a name="C13">Chapter 13</a></h2> <p>This chapter explains something</p> <h2>Chapter 14</h2> <p>This chapter explains something</p> <h2>Chapter 15</h2> <p>This chapter explains something</p> </body> </html>
4.4 External Links: External HTML links are those HTML links that go to another Web site. If you place HTML links to About.com, or another Web site you like, on your Web page that would be an example of external HTML links. Having external HTML links on you Web site is very important because if you have a good set of HTML links that your visitors are interested in it will keep them coming back to your Web site to access those HTML links. External links are written using the anchor tag in HTML. The code for external HTML links looks like this: <a href="http://www.w3schools.com">W3Schools</a>
21
HTML
Example: <html> <body> <p>An External Link: <a href="http://www.w3schools.com"> Visit W3Schools.com</a></p> </body> </html>
4.5 Internal Links: An internal link is a link on a web page that links to another page on the same site or domain. Most internal links are used as navigation (map-reading) around the site or to provide additional information about a topic. Internal links are written using the anchor tag in HTML. Example: <html> <body> <p> <a href="#C4">See also Chapter 4</a> </p> <p> <h2>Chapter 1</h2> <p>This chapter explains something</p> <h2>Chapter 2</h2> <p>This chapter explains something</p> <h2>Chapter 3</h2> <p>This chapter explains something</p> <h2>Chapter 4</h2> <p>This chapter explains something</p> <h2>Chapter 5</h2> <p>This chapter explains something</p> <h2>Chapter 6</h2> <p>This chapter explains something</p> <h2>Chapter 7</h2> <p>This chapter explains something</p>
<h2>Chapter 8</h2> <p>This chapter explains something</p> <h2>Chapter 9</h2> <p>This chapter explains something</p> <h2>Chapter 10</h2> <p>This chapter explains something</p> <h2>Chapter 11</h2> <p>This chapter explains something</p> <h2>Chapter 12</h2> <p>This chapter explains something</p> <h2><a name="C13">Chapter 13</a></h2> <p>This chapter explains something</p> <h2>Chapter 14</h2> <p>This chapter explains something</p> <h2>Chapter 15</h2> <p>This chapter explains something</p> </body> </html>
22
HTML
4.6 Creating a Mailto Link: To create a link on your Web site that opens an email window, you simply use a "mailto:" link. Like this: <a href="mailto:html.guide@about.com">Send email to your HTML Guide</a> But what if you want to send email to more than one address? If you just want to send it To: multiple people, simply separate the email addresses with a comma. For example: <a href="mailto:email1@about.com, email2@about.com"> But there's more, you can also set up your mail link with a cc, bcc, and subject. Treat these elements as if they were arguments on a CGI. First you put the To address as above. Follow this with a question mark (?) and then the following: cc=emailaddress for a Cc bcc=emailaddress for a Bcc subject=subject text for a Subject If you want multiple elements, separate each with an ampersand (&). For example: <a href="mailto:html.guide@about.com? bcc=gethelp@about.com &subject=testing"> But using mailto links can lead to "spam". Example: <html> <body> <p> This is an email link: <a href="mailto:someone@example.com?Subject=Hello%20again">Send Mail</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly. </p> </body> </html>
23
HTML
5. HTML IMAGES:
An "inline" image is one that appears within the text of a Web page, such as this picture of "Big M". The <img> Tag and the Src Attribute: In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. Syntax for defining an image: <img src="url" alt="some_text"> The URL points to the location where the image is stored. An image named "w3schools_green.jpg", located in the "images" directory on "www.w3schools.com" has the URL: http://www.w3schools.com/images/w3schools_green.jpg. The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph. The Alt Attribute: The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The value of the alt attribute is an author-defined text: <img src="boat.gif" alt="Big Boat" /> The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute). Required Attributes: Attribute Value Description alt Text Specifies an alternate text for an image src URL Specifies the URL of an image Example: <html> <body> <h2>Secabs Logo</h2> <img src="secab_engg_logo.jpg" alt="Secab Engineering College Logo" > <p>External Image: An image from W3Schools:</p> <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" width="104" height="142" /> </body> </html>
HTML
5.1 Image Size Attributes: Height and Width of an Image The height and width attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default: <img src="secab_engg_logo.jpg" alt="Secab Engineering College Logo" width="304" height="228" > It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading Example: <html> <body> <h2>Secabs Logo</h2> <img src="secab_engg_logo.jpg" alt="Secab Engineering College Logo" width="304" height="228" > </body> </html>
5.2 Aligning Images: HTML <img> align Attribute: The align attribute specifies the alignment of an image according to the surrounding element. The <img> element is an inline element (it does not insert a new line on a page), meaning that text and other elements can wrap around it. Therefore, it can be useful to specify the alignment of the image according to surrounding elements. Attribute Values: Value Description left Align the image to the left right Align the image to the right middle Align the image in the middle top Align the image at the top bottom Align the image at the bottom Example: <html> <body> <h2>Secabs Logo</h2> <img src="secab_engg_logo.jpg" alt="Secab Engineering College Logo" width="304" height="228" align= middle> </body> </html>
25
HTML
5.3 Alternate Text for Image: The Alt Attribute: The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The value of the alt attribute is an author-defined text: <img src="boat.gif" alt="Big Boat" /> The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute).
5.4 Background Image: You need to place your Background Image in the BODY tag, a part of the HTML code. So, for your background image to display in the web page, add the following line inside the BODY tag: BACKGROUND="image.jpg" Example: <html> <body BACKGROUND="http://www.w3schools.com/images/w3schools_green.jpg"> </body> </html> 5.6 Image- Mapped Graphics: <img> usemap Attribute: The usemap attribute specifies an image as a client-side image-map. An image-map is an image with clickable areas. The usemap attribute is associated with a <map> element's name or id attribute, and creates a relationship between the image and the map. Syntax: <img usemap="#mapname" /> <map> Tag: The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas. The name attribute of the <map> element is required and it is associated with the <img>'s usemap attribute and creates a relationship between the image and the map. The <map> element contains a number of <area> elements that defines the clickable areas in the image map. Required Attributes: Attribute Value name mapname
Description Specifies the name for an image-map.
<area> Tag: The <area> tag defines an area inside an image-map (an image-map is an image with clickable areas). The <area> element is always nested inside a <map> tag. Note: The usemap attribute in the <img> tag is associated with the <map> element's name attribute, and creates a relationship between the image and the map. Required Attributes: Attribute Value alt text
Description Specifies an alternate text for an area.

26
HTML
Optinal Attributes: Attribute Value coords coordinates href URL nohref nohref shape default rect circle poly target _blank _parent _self _top
Description Specifies the coordinates of an area Specifies the hyperlink target for the area Specifies that an area has no associated link Specifies the shape of an area
Specifies where to open the linked page specified in the href attribute
Coords Attribute Values: Value Description Specifies the coordinates of the left, top, right, bottom corner of the rectangle (for x1,y1,x2,y2 shape="rect") x,y,radius Specifies the coordinates of the circle center and the radius (for shape="circle") Specifies the coordinates of the edges of the polygon. If the first and last coordinate x1,y1,x2,y2,..,xn,yn pairs are not the same, the browser will add the last coordinate pair to close the polygon (for shape="poly") Example: <html> <body> <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.gif"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.gif"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.gif"> </map> </body> </html>
27
HTML
5.5 Sounds & Animations in HTML: Sounds: To get sounds and music on your page, you can go about it one of two ways: You can create a link to the sound file so people can download it and play it, or you can embed the sound directly into the page itself. The Link Method Here is an example link to a sound file: <a href="My Music.mp3">Play the Music</a> This will make the browser attempt to view the sound file. As long as the user has the helper application or plugin installed and their browser is configured to use these, the user will begin to download the file once they have clicked the link. The Embed Method This method is a popular way to play a sound or music file because it allows for many options. The sound interface will be placed right on the page and can be configured to start automatically, repeat over and over, or just play through once. So, how do you do it? With the <embed> tag. This tag works in much the same way an image tag does. You will need to specify the source of the sound file and add additional commands as needed. Here is an example of the tag: <embed src="My Music.mp3"> This tells the browser to place this file on the page right where you placed the tag. You can embed a .wav, .aud, and most other sound formats in this way. As you can see, the src="" is asking for the source of the file, or its Internet address. Optional Attributes: Now, you can add additional attributes to the tag to control the output and appearance of your sound file. Here are some attributes you may wish to use: width="144 " Tells the browser how wide you wish the sound display to be. Input a number in pixels. height="60" Tells the browser how tall you want the sound display to be. Input a number in pixels. autostart="true" Instructs the browser to begin playing the file automatically once it has been loaded on the page. You can set this value to true or false. loop="true" Instructs the browser to play the file over and over again for as long as someone is on that page, or until the user hits the stop button on the display. You can set this value to true or false. hidden="true" This command tells the browser to hide the sound display so people viewing your page don't see the sound display with the control buttons. The sound plays as though it were just in the background somewhere. You can set this to true or false.
HTML
Here is an example using multiple attributes: <embed src="1.wma" width="144" height="60" autostart="true" loop="true" hidden="true"></embed> TEXT ANIMATION: HTML <marquee> tag: The HTML <marquee> tag is used for scrolling piece of text or image displayed either horizontally across or vertically down your web site page depending on the settings. If you want your text to move within the screen, use this tag.
Attributes:
Attribute behavior bgcolor Value scroll slid alternate color name up down left right pixels or % pixels number seconds Defines the type of scrolling. Specifies the background color. Description
direction
Defines the direction of scrolling the content.
height hspace loop scrolldelay
Defines the height of marquee. Specifies horizontal space around the marquee. Specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly. Defines how long to delay between each jump. Defines how far to jump. Defines the width of marquee. Specifies vertical space around the marquee.
scrollamount number width vspace pixels or % pixels
29
HTML
Example: <html> <head> <title>Practice HTML marquee tag</title> </head> <body> <marquee>this is basic example of marquee</marquee><br><br> <marquee behavior=alternate bgcolor=yellow>this is an example of marquee's behavior & background color attribute...</marquee><br><br> <marquee direction=right >this is an example of marquee's direction attribute scrolling to the right...</marquee> <br><br> <marquee height="25%"bgcolor=red>this is an example of marquee's height attribute</marquee> <br><br> <marquee hspace=15 bgcolor=green>this is an example of marquee's hspace attribute</marquee><br><br> <marquee behavior=slide bgcolor=aqua loop=2>this is an example of marquee's loop attribute...</marquee><br><br> <marquee bgcolor=orange width=500 behavior=alternate scrolldelay=5> this is an example of marquee's scrolldelay attribute...</marquee><br><br> <marquee bgcolor=orange width=600 behavior=alternate scrollamount=50> this is an example of marquee's scrollamount attribute... </marquee><br><br> <marquee width="50%" bgcolor=blue>this example will take only 50% width</marquee> <br><br> preceeding text.<marquee vspace=20 bgcolor=green>this is an example of marquee's hspace attribute</marquee>following text. </body> </html> IMAGE ANIMATION: Similarly image can be moved. Instead of text in between marquee tags give an image. Example: <html> <head> <title> text animation with marquee </title> </head> <body> <marquee width=100% direction=right> <img src="Animation Horse.gif"> </marquee> </body> </html>
30
HTML
6. TABLES & FRAMES:

6.1 Tables: HTML provides an important feature that enables us to arrange the layout of a web page. Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc. An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements. These tags will be ignored by the browser if they are not contained within <table> ... </table> tags. The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell. A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements. Example:
<html> <body> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </body> </html>
How the HTML code above looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
31
HTML
6.2 Table Elements or Tags: Tag <table> <th> <tr> <td> <caption> <colgroup> <col /> <thead> <tbody> <tfoot> Description Defines a table Defines a table header Defines a table row Defines a table cell Defines a table caption Defines a group of columns in a table, for formatting Defines attribute values for one or more columns in a table Groups the header content in a table Groups the body content in a table Groups the footer content in a table
<th> Tags: The <th> tag defines a header cell in an HTML table. An HTML table has two kinds of cells: Header cells - contains header information (created with the <th> element) Standard cells - contains data (created with the <td> element) The text in <th> elements are bold and centered by default. The text in <td> element is regular and left-aligned by default. Optional Attributes: Attribute Value abbr text left right align center justify char axis category_name bgcolor colorname char character charoff colspan height nowrap rowspan scope number number Pixels % nowrap number col colgroup row rowgroup
Description Specifies an abbreviated version of the content in a cell
Aligns the content in a cell
Categorizes cells Specifies the background color of a cell Aligns the content in a cell to a character Sets the number of characters the content will be aligned from the character specified by the char attribute Sets the number of columns a cell should span Sets the height of a cell Specifies that the content inside a cell should not wrap Sets the number of rows a cell should span Defines a way to associate header cells and data cells in a table
32
HTML
valign width
top middle bottom baseline Pixels %
Vertical aligns the content in a cell Specifies the width of a cell
Example: <html> <body> <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> </body> </html> <tr> Tag: The <tr> tag defines a row in an HTML table. A <tr> element contains one or more <th> or <td> elements. Example: <html> <body> <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> </body> </html>
HTML
Optional Attributes: Attribute Value right left align center justify char bgcolor colorname char character charoff number top middle bottom baseline
Description
Aligns the content in a table row
Specifies a background color for a table row Aligns the content in a table row to a character Sets the number of characters the content will be aligned from the character specified by the char attribute Vertical aligns the content in a table row
valign
<td> Tags: The <td> tag defines a standard cell in an HTML table. Example: <html> <body> <table border="1"> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </table> </body> </html> Optional Attributes: Attribute Value abbr text left right align center justify char axis category_name bgcolor colorname char character charoff colspan headers height number number header_id Pixels %
Description Specifies an abbreviated version of the content in a cell
Aligns the content in a cell
Categorizes cells Specifies the background color of a cell Aligns the content in a cell to a character Sets the number of characters the content will be aligned from the character specified by the char attribute Specifies the number of columns a cell should span Specifies one or more header cells a cell is related to Sets the height of a cell
34
HTML
nowrap rowspan scope
valign width
nowrap number col colgroup row rowgroup top middle bottom baseline Pixels %
Specifies that the content inside a cell should not wrap Sets the number of rows a cell should span Defines a way to associate header cells and data cells in a table
Vertical aligns the content in a cell Specifies the width of a cell
<Caption> Tags: The <caption> tag defines a table caption. The <caption> tag must be inserted immediately after the <table> tag. You can specify only one caption per table. By default, the table caption will be center-aligned above a table. Example: <html> <body> <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> </body> </html> Optional Attributes: Attribute Value left right align top bottom OUTPUT:
Description Defines the alignment of a caption
35
HTML
<colgroup> Tag: The <colgroup> tag is used to group columns in a table for formatting. The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row. The <colgroup> tag can only be used inside a <table> element. Tip: Add the style attribute to the <colgroup> tag, and let CSS take care of backgrounds, width and borders. Example: <html> <body> <table width="100%" border="1"> <colgroup span="2" style="background-color:green"></colgroup> <colgroup style="background-color:Orange"></colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>2489604</td> <td>My first CSS</td> <td>$47</td> </tr> </table> </body> </html> OUTPUT:
Optional Attributes: Attribute Value left right align center justify char char character charoff span number number
Description
Aligns the content in a column group
Aligns the content in a column group to a character Sets the number of characters the content will be aligned from the character specified by the char attribute Specifies the number of columns a column group should span
36
HTML
valign
width
top middle bottom baseline Pixels %
Vertical aligns the content in a column group
Specifies the width of a column group
<col /> Tag: The <col> tag defines attribute values for one or more columns in a table.The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row. The <col> tag can only be used inside a <table> or a <colgroup> element. Tip: Add the style attribute to the <col> tag, and let CSS take care of backgrounds, width and borders. Example: <html> <body> <table border="1"> <colgroup> <col span="2" style="background-color:red" > <col style="background-color:yellow" > </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>5869207</td> <td>My first CSS</td> <td>$49</td> </tr> </table> </body> </html>
OUTPUT:
37
HTML
Optional Attributes: Attribute Value left right align center justify char char charoff span valign width character number number top middle bottom baseline Pixels %
Description Specifies the alignment of the content related to a <col> element Specifies the alignment of the content related to a <col> element to a character Specifies the number of characters the content will be aligned from the character specified by the char attribute Specifies the number of columns a <col> element should span Specifies the vertical alignment of the content related to a <col> element Specifies the width of a <col> element
<thead> Tag: The <thead> tag is used to group header content in an HTML table.The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer). The <thead> tag must be used in the following context: As a child of a <table> element, after any <caption>, and <colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements. Example: <html> <head> <style type="text/css"> thead {color:green} tbody {color:blue;height:50px} tfoot {color:red} </style> </head> <body> <table border="1"> <thead align=right> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> OUTPUT:
<tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> </body> </html>
38
HTML
Optional Attributes: Attribute Value right left align center justify char char charoff character number top middle bottom baseline
Description
Aligns the content inside the <thead> element
Aligns the content inside the <thead> element to a character Sets the number of characters the content inside the <thead> element will be aligned from the character specified by the char attribute Vertical aligns the content inside the <thead> element
valign
<tbody> Tag: The <tbody> tag is used to group the body content in an HTML table.The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify each part of a table (body, header, footer). The <tbody> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements.
Note: The <tbody> element must have one or more <tr> tags inside.
Example: <html> <head> <style type="text/css"> thead {color:green} tbody {color:blue;height:50px} tfoot {color:red} </style> </head> <body> <table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> OUTPUT:
<td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody align=right> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> </body> </html>
39
HTML
Description
Aligns the content inside the <tbody> element
Aligns the content inside the <tbody> element to a character Sets the number of characters the content inside the <tbody> element will be aligned from the character specified by the char attribute Vertical aligns the content inside the <tbody> element
valign
<tfoot> Tag: The <tfoot> tag is used to group footer content in an HTML table.The <tfoot> element is used in conjunction with the <thead> and <tbody> elements to specify each part of a table (footer, header, body). The <tfoot> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements and before any <tbody> and <tr> elements. Note: The <tfoot> element must have one or more <tr> tags inside. Example: <html> <head> <style type="text/css"> thead {color:green} tbody {color:blue;height:50px} tfoot {color:red} </style> </head> <body> <table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot align=right> <tr> OUTPUT: <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> </body> </html>
40
HTML
Description
Aligns the content inside the <tfoot> element
Aligns the content inside the <tfoot> element to a character Sets the number of characters the content inside the <tfoot> element will be aligned from the character specified by the char attribute Vertical aligns the content inside the <tfoot> element
valign
6.3 Table (Optional) Attributes: Attribute Value left align center right bgcolor colorname border pixels cellpadding cellspacing pixels pixels void above below hsides lhs rhs vsides box border none groups rows cols all text Pixels %
Description Specifies the alignment of a table according to surrounding text Specifies the background color for a table Specifies the width of the borders around a table Specifies the space between the cell wall and the cell content Specifies the space between cells
frame
Specifies which parts of the outside borders that should be visible
rules
Specifies which parts of the inside borders that should be visible Specifies a summary of the content of a table Specifies the width of a table
summary width
41
HTML
Examples of Table: 1. Table borders Example: HTML tables with different borders. <html> <h4>Thick border:</h4> <body> <table border="8"> <tr> <h4>Normal border:</h4> <td>First</td> <table border="1"> <td>Row</td> <tr> </tr> <td>First</td> <tr> <td>Row</td> <td>Second</td> </tr> <td>Row</td> <tr> </tr> <td>Second</td> </table> <td>Row</td> </tr> <h4>Very thick border:</h4> </table> <table border="15"> <tr> <h4>No border:</h4> <td>First</td> <table border="0"> <td>Row</td> <tr> </tr> <td>First</td> <tr> <td>Row</td> <td>Second</td> </tr> <td>Row</td> <tr> </tr> <td>Second</td> </table> <td>Row</td> </tr> </body> </table> </html> OUTPUT:
Normal border:
First Row
Thick border:
First Row
Second Row
Second Row
No border:
First Row
Very thick border:

First Row
Second Row
Second Row
42
HTML
2. Table headers Example: How to create table headers. <html> <body> <h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> </tr> </table> <h4>Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> </table> </body> </html> OUTPUT:
Table headers:
Name Telephone
Bill Gates 555 77 854
Vertical headers:
First Name: Bill Gates Telephone: 555 77 854
43
HTML
3. Empty cells Example: How to use " " to handle cells that have no content. <html> OUTPUT: <body> <table border="1"> <tr> <td>Some text</td> <td>Some text</td> </tr> <tr> <td></td> <td>Some text</td> </tr> </table> <p>In the table above, the empty cell may has no border.</p> <p>To display a border, insert a no-breaking space in the empty cell: </p> </body> </html>
4. Table with a caption Example: An HTML table with a caption. <html> <body> <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> </body> </html> OUTPUT:
44
HTML
5. Tags inside a table Example: How to display elements inside other elements. <html> <body> <table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html> OUTPUT:
45
HTML
6. Cells that span more than one row/column Example: How to define table cells that span more than
one row or one column.
<html> <body> <h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html> OUTPUT:
46
HTML
7. Cellpadding Example: How to use cellpadding to create more white space between the cell content and
its borders.
<html> <body> <h4>Without cellpadding:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
OUTPUT:
47
HTML
8. Cellspacing Example: How to use cellspacing to increase the distance between the cells. <html> <body> <h4>Without cellspacing:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellspacing:</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> OUTPUT:
48
HTML
9. The frame attribute Example: How to use the "frame" attribute to control the borders around the table. <html> <body> <p><b>Note:</b> The frame attribute is not displayed properly in Internet Explorer prior version 9.</p> <p>Table with frame="box":</p> <table frame="box"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="above":</p> <table frame="above"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="below":</p> <table frame="below"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="hsides":</p> <table frame="hsides"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td>
HTML
</tr> </table> <p>Table with frame="vsides":</p> <table frame="vsides"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body> </html> OUTPUT:
50
HTML
6.4 General Table Format: The general format of a table looks like this: <TABLE> <CAPTION> caption contents </CAPTION> <TR> <TH> cell contents </TH> <== start of table definition <== caption definition <== start of first row definition <== first cell in row 1 (a head)
<TH> cell contents </TH> </TR>
<== last cell in row 1 (a head) <== end of first row definition
<TR> <TD> cell contents </TD>
<== start of second row definition <== first cell in row 2
<TD> cell contents </TD> </TR>
<== last cell in row 2 <== end of second row definition
<TR> <TD> cell contents </TD> ... <TD> cell contents </TD> </TR>
<== start of last row definition <== first cell in last row
<== last cell in last row <== end of last row definition
</TABLE>
<== end of table definition
The <TABLE> and </TABLE> tags must surround the entire table definition. The first item inside the table is the CAPTION, which is optional. Then you can have any number of rows defined by the <TR> and </TR> tags. Within a row you can have any number of cells defined by the <TD>...</TD> or <TH>...</TH> tags. Each row of a table is, essentially, formatted independently of the rows above and below it. This lets you easily display tables like the one above with a single cell, such as Table Attributes, spanning columns of the table.
HTML
6.5 Tables for Nontabular Information: Some HTML authors use tables to present nontabular information. For example, because links can be included in table cells, some authors use a table with no borders to create "one" image from separate images. Browsers that can display tables properly show the various images seamlessly, making the created image seem like an image map (one image with hyperlinked quadrants).
6.6 Frames: With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. For example, you can have a left frame for navigation and a right frame for the main content. Frames are achieved by creating a frameset page, and defining each frame from within that page. This frameset page doesn't actually contain any content - just a reference to each frame. The HTML frame tag is used to specify each frame within the frameset. All frame tags are nested with a frameset tag. So, in other words, if you want to create a web page with 2 frames, you would need to create 3 files - 1 file for each frame, and 1 file to specify how they fit together. HTML Frame Tags Tag <frameset> <frame /> <noframes> Description Defines a set of frames Defines a sub window (a frame) Defines a noframe section for browsers that do not handle frames
<frameset> Tag: The <frameset> tag defines a frameset. The <frameset> element holds one or more <frame> elements. <FRAMESET ...> defines the general layout of a web page that uses frames. <FRAMESET ...> is used in conjunction with <FRAME ...> and <NOFRAMES>. Each <frame> element can hold a separate document. The <frameset> element specifies HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them. Optional Attributes: Attribute Value pixels % cols * pixels % rows * frameborder Number border Number framespacing Number BORDERCOLOR Color name
Description Specifies the number and size of columns in a frameset
Specifies the number and size of rows in a frameset Border for Frame. A zero value shows no "window" border. Border for Frameset. Modifies the border width.
Modifies the border width. color of frame borders
52
HTML
Example: Frame Navigation <html> <head> <title>Frame Index</title> </head> <frameset border="2" frameborder="1" framespacing="2" rows="20%,*"> <frame src="title.html" noresize scrolling="no"> <frameset border="4" frameborder="1" framespacing="4" cols="30%,*"> <frame src="menu.html" scrolling="auto" noresize> <frame name="content" src="content.html" scrolling="yes" noresize> </frameset> title.html <html> <head> <title>Title Frame</title> </head> <body > Title Frame </body> </html> menu.html <html> <head> <title>Frame Menu</title> <base target="content"> </head> <body bgcolor="Red"> <a href="http://www.ehow.com" class="menu" >ehow.com</a><br /> <a href="http://www.indiatimes.com" class="menu">indiatimes.com</a><br /> <hr> <a href="http://www.Rediff.com" class="menu"> Rediff.com </a><br /> <a href="http://www.w3schools.com" class="menu"> w3schools.com</a><br /> </body> content.html <html> <head> <title>Frame Content</title> </head> <body bgcolor="Green"> <p>Here's what it would look likeA good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page. <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p> <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p> <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p>
HTML
<p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p> <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p> <p>Here's what it would look likeA good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page. <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p> <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p> <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p> <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p> <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p> <p>Here's what it would look likeA good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page. <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p> <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p> <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p> <p>A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.</p> </body> </html> OUTPUT:
54
HTML
<frame /> Tag: The <frame> tag defines one particular window (frame) within a <frameset>. Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize, etc. Optional Attributes: Attribute Value 0 frameborder 1 longdesc marginheight marginwidth name noresize scrolling src Example: <html> <frameset cols="25%,*,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html> <noframes> Tag: The <noframes> tag is a fallback tag for browsers that do not support frames. It can contain all the HTML elements that you can find inside the <body> element of a normal HTML page. The <noframes> element can be used to link to a non-frameset version of the web site or to display a message to users that frames are required. The <noframes> element goes inside the <frameset> element. Example: <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> <noframes><body>Sorry, your browser does not handle frames!</body></noframes> </frameset> </html>
Description Specifies whether or not to display a border around a frame Specifies a page that contains a long description of the content of a frame Specifies the top and bottom margins of a frame Specifies the left and right margins of a frame Specifies the name of a frame Specifies that a frame is not resizable Specifies whether or not to display scrollbars in a frame Specifies the URL of the document to show in a frame
DTD F F F F F F F F
URL pixels pixels name noresize yes no auto URL
HTML
Frames Examples: 1. Two Column Frameset The frameset (frame_example_frameset_1.html): <html> <head> <title>Frameset page<title> </head> <frameset cols = "25%, *"> <frame src ="frame_example_left.html" /> <frame src ="frame_example_right.html" /> </frameset> </html> The left frame (frame_example_left.html): <html> <body style="background-color:green"> <p>This is the left frame (frame_example_left.html).</p> </body> </html> The right frame (frame_example_right.html): <html> <body style="background-color:yellow"> <p>This is the right frame (frame_example_right.html).</p> </body> </html> OUTPUT:
56
HTML
2. Add a Top Frame or Nested framesets: You can do this by "nesting" a frame within another frame. The frameset (frame_example_frameset_2.html): <html> <head> <title>Frameset page</title> </head> <frameset rows="20%,*"> <frame src="/html/tutorial/frame_example_top.html"> <frameset cols = "25%, *"> <frame src ="/html/tutorial/frame_example_left.html" /> <frame src ="/html/tutorial/frame_example_right.html" /> </frameset> </frameset> </html> The top frame (frame_example_top.html): <html> <body style="background-color:maroon"> <p>This is the Top frame (frame_example_top.html).</p> </body> </html> The left frame (frame_example_left.html): <html> <body style="background-color:green"> <p>This is the left frame (frame_example_left.html).</p> </body> </html> The right frame (frame_example_right.html): <html> <body style="background-color:yellow"> <p>This is the right frame (frame_example_right.html).</p> </body> </html> OUTPUT:
57
HTML
3. Horizontal frameset: How to make a horizontal frameset with three different documents.: <html> <frameset rows="25%,*,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html>
OUTPUT:
58
HTML
4. Frameset with noresize="noresize": How to use the "noresize" attribute. The border between frame A and B is not resizable. <html> <frameset cols="50%,*,25%"> <frame src="frame_a.htm" noresize="noresize" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html>
59
HTML
7. FILL OUT FORMS & TROUBLE SHOOTING:

7.1 Forms: HTML forms are used to pass data to a server. Web forms let reader return information to a Web server for some action. For example, suppose you collect names and email addresses so you can email some information to people who request it. For each person who enters his or her name and address, you need some information to be sent and the respondent's particulars added to a data base. The data input into a FORM are sent to a server, although in this case the FORM element contains an attribute, ACTION, which specifies the URL to which the data should be sent. In addition, the FORM element can select the HTTP method by which the data are sent -- the GET HTTP method means that the data are appended to the URL like a query string, while the POST method means that the data are sent as a message body. The FORM element allows you to create a fill-out form: the user reading the HTML document will see the FORM elements as user input elements -- he or she can then type information into the fields or select from buttons and pull-down menus to input their data. When the user submits the FORM, the data are encoded and transmitted to a server, where it must be interpreted and processed by a program. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form: <form> . input elements . </form>
HTML Forms - The Input Element The most important form element is the input element. The input element is used to select user information. An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more. The most used input types are described below.
Text Fields <input type="text" /> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /> </form>
60
HTML
How the HTML code above looks in a browser: First name: Last name: Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
Password Field <input type="password"> defines a password field: <form> Password: <input type="password" > </form> How the HTML code above looks in a browser: Password: Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons <input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: <form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female </form> How the HTML code above looks in a browser:
Checkboxes <input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form>
61
HTML
How the HTML code above looks in a browser:
Submit Button <input type="submit" /> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input: <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> How the HTML code above looks in a browser: Username:
Submit
If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.
HTML Form Tags:

Tag <form> <input > <textarea> <label> <fieldset> <legend> <select> <optgroup> <option> <button> Description Defines an HTML form for user input Defines an input control Defines a multi-line text input control Defines a label for an input element Defines a border around elements in a form Defines a caption for a fieldset element Defines a select list (drop-down list) Defines a group of related options in a select list Defines an option in a select list Defines a push button
62
HTML
<form> Tag: The <form> tag is used to create an HTML form for user input. The <form> element can contain one or more of the following form elements: <input> <textarea> <button> <select> <option> <optgroup> <fieldset> <label> Tip: The <form> element is a block-level element, and browsers create a line break before and after a form. Required Attributes: Attribute Value action URL Optional Attributes: Attribute Value accept accept-charset enctype method name MIME_type character_set application/x-www-form-urlencoded multipart/form-data text/plain get post name _blank _self _parent _top framename
Description Specifies where to send the form-data when a form is submitted
Description Specifies the types of files that the server accepts (that can be submitted through a file upload) Specifies a list of character encodings that the server accepts Specifies how the form-data should be encoded when submitting it to the server (only for method="post") Specifies the HTTP method to use when sending form-data Specifies the name of a form Specifies where to display the response that is received after submitting the form
target
63
HTML
Example: <html> <body> <form action="form_action.asp"> First name: <input type="text" name="FirstName" value="Mickey" /><br /> Last name: <input type="text" name="LastName" value="Mouse" /><br /> <input type="submit" value="Submit" /> </form> <p>Click the "Submit" button and the input will be sent to a page on the server called "form_action.asp".</p> </body> </html> OUTPUT: First name: Last name:
Submit
Mickey Mouse
Click the "Submit" button and the input will be sent to a page on the server called "form_action.asp".
<input > Tag: The <input> tag is used to select user information. <input> elements are used within a <form> element to declare input controls that allow users to input data. An input field can vary in many ways, depending on the type attribute. Optional Attributes: Attribute Value audio/* video/* accept image/* MIME_type left right align top middle bottom alt text checked disabled maxlength name checked disabled number name
Description Specifies the types of files that the server accepts (only for type="file") MIME (Multipurpose Internet Mail Extensions)
Deprecated. Use styles instead. Specifies the alignment of an image input (only for type="image") Specifies an alternate text for an image (only for type="image") Specifies that an <input> element should be preselected when the page loads (for type="checkbox" or type="radio") Specifies that an <input> element should be disabled Specifies the maximum number of characters allowed in an <input> element Specifies the name of an <input> element
64
HTML
readonly size src
readonly number URL button checkbox file hidden image password radio reset submit text text
Specifies that an input field should be read-only Specifies the width, in characters, of an <input> element Specifies the URL of the image to use as a submit button (only for type="image")
type
Specifies the type of <input> element
value
Specifies the value of an <input> element
Example: <html> <body> <form action="form_action.asp"> First name: <input type="text" name="FirstName" value="Mickey" /><br /> Last name: <input type="text" name="LastName" value="Mouse" /><br /> <input type="submit" value="Submit" /> </form> <p>Click the "Submit" button and the input will be sent to a page on the server called "form_action.asp".</p> </body> </html> OUTPUT: First name: Last name:
Submit
Mickey Mouse
Click the "Submit" button and the input will be sent to a page on the server called "form_action.asp".
65
HTML
<textarea> Tag: The <textarea> tag defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text delivers in a fixed-width font (usually Courier). The size of a text area is specified by the cols and rows attributes. Required Attributes Attribute Value cols number rows number Optional Attributes Attribute Value disabled disabled name text readonly readonly Example: <html> <body> <textarea rows="2" cols="20"> At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. </textarea> </body> </html> OUTPUT:
Description Specifies the visible width of a text area Specifies the visible number of lines in a text area
Description Specifies that a text area should be disabled Specifies the name for a text area Specifies that a text area should be read-only
66
HTML
<label> Tag: The <label> tag defines a label for an <input> element. The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control. The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together. Optional Attributes: Attribute Value for element_id Example: <html> <body> <p>Click on one of the text labels to toggle the related control:</p> <form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form> </body> </html> OUTPUT:
Description Specifies which form element a label is bound to
<fieldset> Tag: The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements. Example: <html> <body> <form> <fieldset> <legend>Personal:</legend> Name: <input type="text" /><br /> Email: <input type="text" /><br /> Date of birth: <input type="text" /> </fieldset> </form> </body> </html>
OUTPUT:
HTML
<legend> Tag: The <legend> tag defines a caption for the <fieldset> element. Optional Attributes: Attribute Value top bottom align left right Example: <html> <body> <form> <fieldset> <legend>Personal:</legend> Name: <input type="text" /><br /> Email: <input type="text" /><br /> Date of birth: <input type="text" /> </fieldset> </form> </body> </html> <select> Tag: The <select> tag is used to create a drop-down list. The <option> tags inside the <select> element define the available options in the list. Optional Attributes: Attribute Value disabled disabled multiple multiple name name size number Example: <html> <body> <select> <option>Volvo</option> <option>Saab</option> <option>Mercedes</option> <option>Audi</option> </select> </body> </html>
Description Deprecated. Use styles instead. Specifies the alignment of the caption
OUTPUT:
Description Specifies that a drop-down list should be disabled Specifies that multiple options can be selected at once Defines a name for the drop-down list Defines the number of visible options in a drop-down list OUTPUT:
HTML
<optgroup> Tag: The <optgroup> is used to group related options in a drop-down list. If you have a long list of options, groups of related options are easier to handle for a user. Required Attributes: Attribute Value label text Optional Attributes Attribute Value disabled disabled Example: <html> <body> <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> </body> </html> OUTPUT:
Description Specifies a label for an option-group
Description Specifies that an option-group should be disabled
69
HTML
<option> Tag: The <option> tag defines an option in a select list. <option> elements go inside a <select> element. Optional Attributes: Attribute Value disabled disabled label text selected value Example: <html> <body> <select> <option>Volvo</option> <option>Saab</option> <option>Mercedes</option> <option>Audi</option> </select> </body> </html> selected text
Description Specifies that an option should be disabled Specifies a shorter label for an option Specifies that an option should be pre-selected when the page loads Specifies the value to be sent to a server OUTPUT:
<button> Tag: The <button> tag defines a push button. Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element. Optional Attributes: Attribute Value disabled disabled name name button type reset submit value text Example: <html> <body> <button type="button">Click Me!</button> </body> </html>
Description Specifies that a button should be disabled Specifies the name for a button Specifies the type of button Specifies the initial value for a button OUTPUT:
HTML
Form Examples:
1. Form with checkboxes: How to create a form with two checkboxes and a submit button. <html> <body> <form name="input" action="html_form_action.asp" method="get"> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car <br /><br /> <input type="submit" value="Submit" /> </form> <p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p> </body> </html> OUTPUT:
2. Send e-mail from a form: How to send e-mail from a form. <html> <body> <h3>Send e-mail to someone@example.com:</h3> <form action="MAILTO:someone@example.com" method="post" enctype="text/plain"> Name:<br /> <input type="text" name="name" value="your name" /><br /> E-mail:<br /> <input type="text" name="mail" value="your email" /><br /> Comment:<br /> <input type="text" name="comment" value="your comment" size="50" /> <br /><br /> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form> </body> </html>
71
HTML
OUTPUT: Send e-mail to someone@example.com: Name:

your name
E-mail:
your email
Comment:
your comment
Send
Reset
3. <Form> tags accept attribute Example: <html> <body> <form action="form_action.asp" accept="image/gif, image/jpeg"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> Your image: <input type="file" name="pic" id="pic" /><br /> <input type="submit" value="Submit" /> </form> <p>Click on the submit button, and the input will be sent to a page on the server called "form_action.asp".</p> </body> </html>
OUTPUT:
72
HTML
7.2 Embed only Anchors and Character Tags: HTML protocol allows you to embed links within other HTML tags:-<H1><A HREF="Destination.html">My heading</A></H1> Do not embed HTML tags within an anchor:-<A HREF="Destination.html"> <H1>My heading</H1> </A> Although most browsers currently handle this second example, the official HTML specifications do not support this construct and your file will probably not work with future browsers. Remember that browsers can be forgiving when displaying improperly coded files. But that forgiveness may not last to the next version of the software! When in doubt, code your files according to the HTML specifications Character tags modify the appearance of the text within other elements:-<UL> <LI><B>A bold list item</B> <LI><I>An italic list item</I> </UL> Avoid embedding other types of HTML element tags. For example, you might be tempted to embed a heading within a list in order to make the font size larger: <UL> <LI><H1>A large heading</H1> <LI><H2>Something slightly smaller</H2> </UL> Although some browsers handle this quite nicely, formatting of such coding is unpredictable (because it is undefined). For compatibility with all browsers, avoid these kinds of constructs. What's the difference between embedding a <B> within a <LI> tag as opposed to embedding a <H1> within a <LI>? Within HTML the semantic (Relating to meaning in language or logic) meaning of <H1> is that it's the main heading of a document and that it should be followed by the content of the document. Therefore it doesn't make sense to find a <H1> within a list. Character formatting tags also are generally not additive. For example, you might expect that: <B><I>some text</I></B> would produce bold-italic text. On some browsers it does; other browsers interpret (Understand) only the innermost tag.
73
HTML
7.3 Do the final steps: Validate Your Code:When you put a document on a Web server, be sure to check the formatting and each link (including named anchors). Ideally you will have someone else read through and comment on your file(s) before you consider a document finished. You can run your coded files through one of several on-line HTML validation services that will tell you if your code conforms (match) to accept HTML. If you are not sure your coding conforms to HTML specifications. Dummy Images:When an <IMG SRC> tag points to an image that does not exist, a dummy image is substituted by your browser software. When this happens during your final review of your files, make sure that the referenced image does in fact exist, that the hyperlink has the correct information in the URL, and that the file permission is set appropriately. Update Your Files:If the contents of a file are static (such as a biography of George Washington), no updating is probably needed. But for documents that are time sensitive or covering a field that changes frequently, remember to update your documents! Updating is particularly important when the file contains information such as a weekly schedule or a deadline for a program funding announcement. Remove out-of-date files or note why something that appears dated is still on a server. Browsers Differ:Web browsers display HTML elements differently. Remember that not all codes used in HTML files are interpreted by all browsers. Any code a browser does not understand is usually ignored though. You could spend a lot of time making your file "look perfect" using your current browser. If you check that file using another browser, it will likely display (a little or a lot) differently. Hence these words of advice: code your files using correct HTML. Leave the interpreting to the browsers and hope for the best. 7.4 Commenting your files: You might want to include comments in your HTML files. Comments in HTML are like comments in a computer program--the text you enter is not used by the browser in any formatting and is not directly viewable by the reader just as computer program comments are not used and are not viewable. The comments are accessible if a reader views the source file, however. Comments such as the name of the person updating a file, the software and version used in creating a file, or the date that a minor edit was made are the norm. HTML  Tag: The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code. Example: <html> <body>  <p>This is a paragraph.</p> </body> </html>
HTML
8. STYLE SHEETS:
What is CSS? CSS stands for Cascading (Flowing) Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files
Styles Solved a Big Problem: HTML was never intended (planned) to contain tags for formatting a document. HTML was intended to define the content of a document, like: <h1>This is a heading</h1> <p>This is a paragraph.</p> When tags like <font>, and color attributes were added to the HTML specification, it started a nightmare (unpleasant dream) for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS Saves a Lot of Work: CSS defines HOW HTML elements are to be displayed. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value. A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets: p {color:red; text-align:center;}
HTML
To make the CSS more readable, you can put one declaration on each line, like this: CSS Example: <html> <head> <style type="text/css"> p { color:red; text-align:center; } </style> </head> <body> <p>Hello World!</p> <p>This paragraph is styled with CSS.</p> </body> </html> CSS Comments: Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }
CSS Id and Class Selectors: The id Selector: The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1":
76
HTML
Example: <html> <head> <style type="text/css"> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html> Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
The class Selector: The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center-aligned: Example: <html> <head> <style type="text/css"> .center { text-align:center; } </style> </head> <body> <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p> </body> </html>
77
HTML
You can also specify that only specific HTML elements should be affected by a class. In the example below, all p elements with class="center" will be center-aligned: Example: <html> <head> <style type="text/css"> p.center { text-align:center; } </style> </head> <body> <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be center-aligned.</p> </body> </html> Do NOT start a class name with a number! This is only supported in Internet Explorer. 8.1 Adding Style to HTML: There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style
External Style Sheet: An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below: hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of "marginleft:20px") will work in IE, but not in Firefox or Opera.
HTML
Internal Style Sheet: An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this: <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} </style> </head> Inline Styles: An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: <p style="color:sienna;margin-left:20px">This is a paragraph.</p> Multiple Style Sheets: If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector:
h3 { color:red; text-align:left; font-size:8pt; }
And an internal style sheet has these properties for the h3 selector:
h3 { text-align:right; font-size:20pt; }
If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
color:red; text-align:right; font-size:20pt;
The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.
HTML
Multiple Styles Will Cascade into One: Styles can be specified: inside an HTML element inside the head section of an HTML page in an external CSS file Tip: Even multiple external style sheets can be referenced inside a single HTML document.
Cascading order
What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
1. 2. 3. 4. Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value). Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!
8.2 Hiding Style Element Content:

Hiding an Element - display:none or visibility:hidden: Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results: visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout. Example: <html> <head> <style type="text/css"> h1.hidden {visibility:hidden;} </style> </head> <body> <h1>This is a visible heading</h1> <h1 class="hidden">This is a hidden heading</h1> <p>Notice that the hidden heading still takes up space.</p> </body> </html>
OUTPUT:
HTML
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there: Example: <html> <head> <style type="text/css"> h1.hidden {display:none;} </style> </head> OUTPUT:
<body> <h1>This is a visible heading</h1> <h1 class="hidden">This is a hidden heading</h1> <p>Notice that the hidden heading does not take up space.</p> </body> </html>
81
HTML
9. JAVA SCRIPT PROGRAMMING [JSP]:

9.1 Introduction: JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language JavaScript is usually embedded directly into HTML pages JavaScript is Case Sensitive: Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you write JavaScript statements, create or call variables, objects and functions. JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari. The HTML <script> tag is used to insert a JavaScript into an HTML page. JavaScript usually goes in the <head> and <body> tag. Like HTML, JavaScript is just text that can be typed into a word processor. It goes right into the HTML that describes your page. Scripts in <head> and <body>: You can place an unlimited number of scripts in your document, and you can have scripts in both the body and the head section at the same time. It is a common practice to put all functions in the head section, or at the bottom of the page. This way they are all in one place and do not interfere with page content. JavaScript in <head>: The example below calls a function when a button is clicked: Example: <html> <head> <script type="text/javascript"> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <h1>My First Web Page</h1> <p id="demo">This is a paragraph.</p> <button type="button" onclick="displayDate()">Display Date</button> </body> </html> OUTPUT
82
HTML
JavaScript in <body>: The example below writes the current date into an existing <p> element when the page loads: Example: <html> <body> <h1>My First Web Page</h1> <p id="demo">This is a paragraph.</p> <script type="text/javascript"> document.getElementById("demo").innerHTML=Date(); </script> </body> </html> OUTPUT
Using an External JavaScript file: JavaScript can also be placed in external files. External JavaScript files often contain code to be used on several different web pages. External JavaScript files have the file extension .js. Note: External script cannot contain the <script></script> tags! To use an external script, point to the .js file in the "src" attribute of the <script> tag: Example: <html> <head> </head> <body> <script type="text/javascript" src="Ext.js"> </script> <p> The actual script is in an external script file called "xxx.js". </p> </body> </html> Ext.js file: document.write("<p>This text was written by an external script!</p>") OUTPUT:
HTML
This text was written by an external script! The actual script is in an external script file called "xxx.js". JavaScript Functions and Events: JavaScripts in an HTML page will be executed when the page loads. This is not always what we want. Sometimes we want to execute a JavaScript when an event occurs, such as when a user clicks a button. When this is the case we can put the script inside a function. Events are normally used in combination with functions (like calling a function when an event occurs). JavaScript Statements: A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what to do. This JavaScript statement below tells the browser to write "Hello World" to the web page: document.write("Hello World"); It is normal to add a semicolon at the end of each executable statement. JavaScript Code: JavaScript code (or just JavaScript) is a sequence of JavaScript statements. Each statement is executed by the browser in the sequence they are written. This example will write a heading and two paragraphs to a web page: Example: <html> <body> <script type="text/javascript"> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> </body> </html>
OUTPUT:
This is a heading
This is a paragraph. This is another paragraph.
84
HTML
JavaScript Blocks: JavaScript statements can be grouped together in blocks. Blocks start with a left curly bracket {, and end with a right curly bracket}. The purpose of a block is to make the sequence of statements execute together. This example will write a heading and two paragraphs to a web page: <html> <body> <script type="text/javascript"> { document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); } </script> </body> </html> OUTPUT:
This is a heading
This is a paragraph. This is another paragraph. The example above is not very useful. It just demonstrates the use of a block. Normally a block is used to group statements together in a function or in a condition (where a group of statements should be executed if a condition is met).
JavaScript Comments: Comments can be added to explain the JavaScript, or to make the code more readable. Single line comments start with //. The following example uses single line comments to explain the code: <html> <body> <script type="text/javascript"> // Write a heading document.write("<h1>This is a heading</h1>"); // Write two paragraphs: document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> </body> </html>
HTML
OUTPUT:
This is a heading
This is a paragraph. This is another paragraph. JavaScript Multi-Line Comments: Multi line comments start with /* and end with */. The following example uses a multi line comment to explain the code: <html> <body> <script type="text/javascript"> /* The code below will write one heading and two paragraphs */ document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> </body> </html> OUTPUT:
This is a heading
This is a paragraph. This is another paragraph. Using Comments at the End of a Line: In the following example the comment is placed at the end of a code line: <html> <body> <script type="text/javascript"> document.write("Hello"); // Write "Hello" document.write(" World!"); // Write "World!" </script> </body> </html>
HTML
9.2 JavaScript Variables: JavaScript variables are used to hold values or expressions. A variable can have a short name, like x, or a more descriptive name, like carname. Rules for JavaScript variable names: Variable names are case sensitive (y and Y are two different variables) Variable names must begin with a letter, the $ character, or the underscore character Note: Because JavaScript is case-sensitive, variable names are case-sensitive. Declaring (Creating) JavaScript Variables: Creating variables in JavaScript is most often referred to as "declaring" variables. var keyword is used to declare JavaScript variables: var x; var carname; After the declaration shown above, the variables are empty (they have no values yet). However, you can also assign values to the variables when you declare them: var x=5; var carname="Volvo"; After the execution of the statements above, the variable x will hold the value 5, and carname will hold the value Volvo. Note: When you assign a text value to a variable, put quotes around the value. Example: A variable's value can change during the execution of a script. You can refer to a variable by its name to display or change its value. <html> <body> <script type="text/javascript"> var firstname; firstname="Harry"; document.write(firstname); document.write("<br />"); firstname="John"; document.write(firstname); </script> <p>The script above declares a variable, assigns a value to it, displays the value, changes the value, and displays the value again.</p> </body> </html>
HTML
OUTPUT: Harry John The script above declares a variable, assigns a value to it, displays the value, changes the value, and displays the value again. Local JavaScript Variables: A variable declared within a JavaScript function becomes LOCAL and can only be accessed within that function. (the variable has local scope). You can have local variables with the same name in different functions, because local variables are only recognized by the function in which they are declared. Local variables are deleted as soon as the function is completed. Global JavaScript Variables Variables declared outside a function become GLOBAL, and all scripts and functions on the web page can access it. Global variables are deleted when you close the page. If you declare a variable, without using "var", the variable always becomes GLOBAL. Assigning Values to Undeclared JavaScript Variables: If you assign values to variables that have not yet been declared, the variables will automatically be declared as global variables. These statements: x=5; carname="Volvo"; will declare the variables x and carname as global variables (if they don't already exist).
JavaScript Arithmetic: As with algebra, you can do arithmetic operations with JavaScript variables: y=x-5; z=y+5; 9.3 JavaScript Data Types: One of the most fundamental characteristics of a programming language is the set of data types it supports. These are the type of values that can be represented and manipulated in a programming language. JavaScript allows you to work with three primitive data types: Numbers o eg. 123, 120.50 etc. Strings of text o e.g. "This text string" etc. Boolean o e.g. true or false. In addition to these primitive data types, JavaScript supports a composite (combination) data type known as object.
HTML
JavaScript Reserved Words: The following are reserved words in JavaScript. They cannot be used as JavaScript variables, functions, methods, loop labels, or any object names.
abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var void volatile while with
89
HTML
9.4,5,6 Operators & Control Statement: Operator: What is an operator? Simple answer can be given using expression 4 + 5 is equal to 9. Here 4 and 5 are called operands and + is called operator. JavaScript language supports following type of operators. Arithmetic Operators Comparison Operators Logical (or Relational) Operators Assignment Operators Conditional (or ternary) Operators Lets have a look on all operators one by one. The Arithmetic Operators: Arithmetic operators are used to perform arithmetic between variables and/or values. There are following arithmetic operators supported by JavaScript language: Given that y=5, the table below explains the arithmetic operators: Operator Description Example Result + Addition x=y+2 x=7 Subtraction x=y-2 x=3 * Multiplication x=y*2 x=10 / Division x=y/2 x=2.5 % Modulus (division remainder) x=y%2 x=1 ++ Increment x=++y x=6 x=y++ x=5 -Decrement x=--y x=4 x=y-x=5 Note: Addition operator (+) works for Numeric as well as Strings. Example: <html> <body> <script type="text/javascript"> <!-var a = 33; var b = 10; var c = "Test"; var linebreak = "<br />"; document.write("a + b = "); result = a + b; document.write(result); document.write(linebreak);
y=5 y=5 y=5 y=5 y=5 y=6 y=6 y=4 y=4
HTML
document.write("a - b = "); result = a - b; document.write(result); document.write(linebreak); document.write("a / b = "); result = a / b; document.write(result); document.write(linebreak); document.write("a % b = "); result = a % b; document.write(result); document.write(linebreak); document.write("a + b + c = "); result = a + b + c; document.write(result); document.write(linebreak); a = a++; document.write("a++ = "); result = a++; document.write(result); document.write(linebreak); b = b--; document.write("b-- = "); result = b--; document.write(result); document.write(linebreak);
//--> </script> <p>Set the variables to different values and then try...</p> </body> </html> OUTPUT: a + b = 43 a - b = 23 a / b = 3.3 a%b=3 a + b + c = 43Test a++ = 33 b-- = 10 Set the variables to different values and then try...
HTML
The Comparison Operators: Comparison operators are used in logical statements to determine equality or difference between variables or values. There are following comparison operators supported by JavaScript language: Given that x=5, the table below explains the comparison operators: Operator Description Example == is equal to x==8 is false x==5 is true === is exactly equal to (value and type) x===5 is true x==="5" is false != is not equal x!=8 is true > is greater than x>8 is false < is less than x<8 is true >= is greater than or equal to x>=8 is false <= is less than or equal to x<=8 is true
How Can it be Used Comparison operators can be used in conditional statements to compare values and take action depending on the result: if (age<18) document.write("Not eligible for voting"); Example: <html> <body> <script type="text/javascript"> <!-var a = 10; var b = 20; var linebreak = "<br />"; document.write("(a == b) => "); result = (a == b); document.write(result); document.write(linebreak); document.write("(a < b) => "); result = (a < b); document.write(result); document.write(linebreak); document.write("(a > b) => "); result = (a > b); document.write(result); document.write(linebreak);
HTML
document.write("(a != b) => "); result = (a != b); document.write(result); document.write(linebreak); document.write("(a >= b) => "); result = (a >= b); document.write(result); document.write(linebreak); document.write("(a <= b) => "); result = (a <= b); document.write(result); document.write(linebreak); //--> </script> <p>Set the variables to different values and different operators and then try...</p> </body> </html> OUTPUT: (a == b) => false (a < b) => true (a > b) => false (a != b) => true (a >= b) => false (a <= b) => true Set the variables to different values and different operators and then try...
93
HTML
The Logical Operators: Logical operators are used to determine the logic between variables or values. There are following logical operators supported by JavaScript language: Given that x=6 and y=3, the table below explains the logical operators: Operator Description Example && AND (x < 10 && y > 1) is true || OR (x==5 || y==5) is false ! NOT !(x==y) is true Example: <html> <body> <script type="text/javascript"> <!-var a = true; var b = false; var linebreak = "<br />"; document.write("(a && b) => "); result = (a && b); document.write(result); document.write(linebreak); document.write("(a || b) => "); result = (a || b); document.write(result); document.write(linebreak); document.write("!(a && b) => "); result = (!(a && b)); document.write(result); document.write(linebreak); //--> </script> <p>Set the variables to different values and different operators and then try...</p> </body> </html> OUTPUT:
94
HTML
JavaScript Assignment Operators: Assignment operators are used to assign values to JavaScript variables. There are following assignment operators supported by JavaScript language: Given that x=10 and y=5, the table below explains the assignment operators: Operator Description = Simple assignment operator, Assigns values from right side operands to left side operand += Add AND assignment operator, It adds right operand to the left operand and assign the result to left operand -= Subtract AND assignment operator, It subtracts right operand from the left operand and assign the result to left operand *= Multiply AND assignment operator, It multiplies right operand with the left operand and assign the result to left operand /= Divide AND assignment operator, It divides left operand with the right operand and assign the result to left operand %= Modulus AND assignment operator, It takes modulus using two operands and assign the result to left operand Example: <html> <body> <script type="text/javascript"> <!-var a = 33; var b = 10; var linebreak = "<br />"; document.write("Value of a => (a = b) => "); result = (a = b); document.write(result); document.write(linebreak); document.write("Value of a => (a += b) => "); result = (a += b); document.write(result); document.write(linebreak); document.write("Value of a => (a -= b) => "); result = (a -= b); document.write(result); document.write(linebreak); document.write("Value of a => (a *= b) => "); result = (a *= b); document.write(result);
Example Same As Result x=y x=5 x+=y x-=y x*=y x/=y x%=y x=x+y x=x-y x=x*y x=x/y x=x%y x=15 x=5 x=50 x=2 x=0
HTML
document.write(linebreak); document.write("Value of a => (a /= b) => "); result = (a /= b); document.write(result); document.write(linebreak); document.write("Value of a => (a %= b) => "); result = (a %= b); document.write(result); document.write(linebreak); //--> </script> <p>Set the variables to different values and different operators and then try...</p> </body> </html> OUTPUT: Value of a => (a = b) => 10 Value of a => (a += b) => 20 Value of a => (a -= b) => 10 Value of a => (a *= b) => 100 Value of a => (a /= b) => 10 Value of a => (a %= b) => 0 Set the variables to different values and different operators and then try...
96
HTML
The Conditional Operator (? :) JavaScript also contains a conditional operator that assigns a value to a variable based on some condition. This first evaluates an expression for a true or false value and then execute one of the two given statements depending upon the result of the evaluation. The conditional operator has this syntax:
variablename=(condition)?value1:value2
Operator ?: Example: <html> <body>
Description Conditional Expression
Example If Condition is true ? Then value X : Otherwise value Y
<script type="text/javascript"> <!-var a = 10; var b = 20; var linebreak = "<br />"; document.write("((a > b) ? 100 : 200) => "); result = (a > b) ? 100 : 200; document.write(result); document.write(linebreak); document.write("((a < b) ? 100 : 200) => "); result = (a < b) ? 100 : 200; document.write(result); document.write(linebreak); //--> </script> <p>Set the variables to different values and different operators and then try...</p> </body> </html> OUTPUT: ((a > b) ? 100 : 200) => 200 ((a < b) ? 100 : 200) => 100 Set the variables to different values and different operators and then try...
97
HTML
Example: <html> <body> <script type="text/javascript"> var visitor="PRES"; var greeting=(visitor=="PRES")?"Dear President ":"Dear "; document.write(greeting); </script> </body> </html> OUTPUT: Dear President
98
HTML
Control or Conditional Statements: Conditional statements are used to perform different actions based on different conditions. Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this. In JavaScript we have the following conditional statements: if statement - use this statement to execute some code only if a specified condition is true if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false if...else if....else statement - use this statement to select one of many blocks of code to be executed switch statement - use this statement to select one of many blocks of code to be executed If Statement: Use the if statement to execute some code only if a specified condition is true. Syntax:
if (condition) { code to be executed if condition is true } Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error!
Example: <html> <body> <script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("<b>Good morning</b>"); } </script> <p>This example demonstrates the If statement.</p> <p>If the time on your browser is less than 10, you will get a "Good morning" greeting.</p> </body> </html> OUTPUT: This example demonstrates the If statement. If the time on your browser is less than 10, you will get a "Good morning" greeting.
99
HTML
If...else Statement: Use the if....else statement to execute some code if a condition is true and another code if the condition is not true. Syntax:
if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true }
Example: <html> <body> <script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("<b>Good morning</b>"); } else { document.write("<b>Good day</b>"); } </script> <p> This example demonstrates the If...Else statement. </p> <p> If the time on your browser is less than 10, you will get a "Good morning" greeting. Otherwise you will get a "Good day" greeting. </p> </body> </html> OUTPUT: Good day This example demonstrates the If...Else statement. If the time on your browser is less than 10, you will get a "Good morning" greeting. Otherwise you will get a "Good day" greeting.
HTML
If...else if...else Statement Use the if....else if...else statement to select one of several blocks of code to be executed. Syntax:
if (condition1) { code to be executed if condition1 is true } else if (condition2) { code to be executed if condition2 is true } else { code to be executed if neither condition1 nor condition2 is true }
Example: <html> <body> <script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time<10) { document.write("<b>Good morning</b>"); } else if (time>=10 && time<16) { document.write("<b>Good day</b>"); } else { document.write("<b>Hello World!</b>"); } </script> <p> This example demonstrates the if..else if...else statement. </p> </body> </html> OUTPUT: Good day This example demonstrates the if..else if...else statement.
HTML
The JavaScript Switch Statement: Use the switch statement to select one of many blocks of code to be executed. Syntax:
switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }
This is how it works: First we have a single expression n (most often a variable), that is evaluated once. The value of the expression is then compared with the values for each case in the structure. If there is a match, the block of code associated with that case is executed. Use break to prevent the code from running into the next case automatically. Example: <html> <body> <script type="text/javascript"> var d=new Date(); var theDay=d.getDay(); switch (theDay) { case 5: document.write("<b>Finally Friday</b>"); break; case 6: document.write("<b>Super Saturday</b>"); break; case 0: document.write("<b>Sleepy Sunday</b>"); break; default: document.write("<b>I'm really looking forward to this weekend!</b>"); } </script> <p>This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.</p> </body> </html>
HTML
OUTPUT: I'm really looking forward to this weekend! This Javascript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc. JavaScript Popup Boxes: JavaScript has three kinds of popup boxes: Alert box, Confirm box, and Prompt box. Alert Box: An alert box is often used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click "OK" to proceed. Syntax:
alert("sometext");
Example: <html> <head> <script type="text/javascript"> function show_alert() { alert("Hello! I am an alert box!"); } </script> </head> <body> <input type="button" onclick="show_alert()" value="Show alert box" /> </body> </html> OUTPUT:
After clicking the above button you will get this alert box:
103
HTML
Confirm Box: A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. Syntax:
confirm("sometext");
Example: <html> <head> <script type="text/javascript"> function show_confirm() { var r=confirm("Press a button!"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } } </script> </head> <body> <input type="button" onclick="show_confirm()" value="Show a confirm box" /> </body> </html> OUTPUT:
After clicking the above button you will get this Confirm box:
If you click on cancel, then you will get this message:
104
HTML
Prompt Box: A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null. Syntax:
prompt("sometext","defaultvalue");
Example: <html> <head> <script type="text/javascript"> function show_prompt() { var name=prompt("Please enter your name","Harry Potter"); if (name!=null && name!="") { document.write("<p>Hello " + name + "! How are you today?</p>"); } } </script> </head> <body> <input type="button" onclick="show_prompt()" value="Show prompt box" /> </body> </html> OUTPUT:
After clicking the above button you will get this Prompt box:
After clicking Ok, you will get the message:

Hello Harry Potter! How are you today?
105
HTML
9.7 JavaScript For Loop, While Loop, Do-While Loop: Loops execute a block of code a specified number of times, or while a specified condition is true. Often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this. In JavaScript, there are two different kinds of loops: for - loops through a block of code a specified number of times while - loops through a block of code while a specified condition is true The For Loop: The for loop is used when you know in advance how many times the script should run. Syntax:
for (variable=startvalue;variable<=endvalue; increment/decrement) { code to be executed }
Example: The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 5. i will increase by 1 each time the loop runs. <html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=5;i++) { document.write("The number is " + i); document.write("<br />"); } </script> <p>Explanation:</p> <p>This for loop starts with i=0.</p> <p>As long as <b>i</b> is less than, or equal to 5, the loop will continue to run.</p> <p><b>i</b> will increase by 1 each time the loop runs.</p> </body> </html>
106
HTML
OUTPUT: The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 Explanation: This for loop starts with i=0. As long as i is less than, or equal to 5, the loop will continue to run. i will increase by 1 each time the loop runs.
The while Loop: The while loop loops through a block of code while a specified condition is true.
Syntax
while (variable<=endvalue) { code to be executed }
Example: The example below defines a loop that starts with i=0. The loop will continue to run as long as i is less than, or equal to 5. i will increase by 1 each time the loop runs: <html> <body> <script type="text/javascript"> i=0; while (i<=5) { document.write("The number is " + i); document.write("<br />"); i++; } </script> <p>Explanation:</p> <p><b>i</b> is equal to 0.</p> <p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p> <p><b>i</b> will increase by 1 each time the loop runs.</p> </body> </html>
HTML
OUTPUT: The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 Explanation: i is equal to 0. While i is less than, or equal to, 5, the loop will continue to run. i will increase by 1 each time the loop runs.
The do...while Loop: The do...while loop is a variant of the while loop. This loop will execute the block of code ONCE, and then it will repeat the loop as long as the specified condition is true.
Syntax
do { code to be executed } while (variable<=endvalue);
Example: The example below uses a do...while loop. The do...while loop will always be executed at least once, even if the condition is false, because the statements are executed before the condition is tested: <html> <body> <script type="text/javascript"> i = 0; do { document.write("The number is " + i); document.write("<br />"); i++; } while (i <= 5); </script> <p>Explanation:</p> <p><b>i</b> equal to 0.</p>
HTML
<p>The loop will run</p> <p><b>i</b> will increase by 1 each time the loop runs.</p> <p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>
</body> </html> OUTPUT: The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 Explanation: i equal to 0. The loop will run i will increase by 1 each time the loop runs. While i is less than, or equal to, 5, the loop will continue to run.
The break Statement: The break statement will break the loop and continue executing the code that follows after the loop (if any). Example: <html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=10;i++) { if (i==3) { break; } document.write("The number is " + i); document.write("<br />"); } </script> <p>Explanation: The loop will break when i=3.</p> </body> </html>
HTML
OUTPUT: The number is 0 The number is 1 The number is 2 Explanation: The loop will break when i=3. The continue Statement: The continue statement will break the current loop and continue with the next value. Example: <html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=10;i++) { if (i==3) { continue; } document.write("The number is " + i); document.write("<br />"); } </script> <p>Explanation: The loop will break the current loop and continue with the next value when i=3.</p> </body> </html> OUTPUT: The number is 0 The number is 1 The number is 2 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 10 Explanation: The loop will break the current loop and continue with the next value when i=3.
110
HTML
9.8 Generating HTML using Java Script: <HTML> <HEAD> <TITLE>Using JavaScript to create HTML tags</TITLE> <SCRIPT type="text/JavaScript"> <!-greeting = "<H1>Hi Web surfers!</H1>" welcome = "<P>Welcome to <CITE>www.java2s.com</CITE>.</P>" // --> </SCRIPT> </HEAD> <BODY> <SCRIPT type="text/JavaScript"> document.write(greeting) document.write(welcome) </SCRIPT> </BODY> </HTML> OUTPUT:
Hi Web surfers!
Welcome to www.java2s.com.
9.9 JavaScript Array: The Array object is used to store multiple values in a single variable. What is an Array? An array is a special variable, which can hold more than one value, at a time. If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this: var car1="Saab"; var car2="Volvo"; var car3="BMW"; However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300? The best solution here is to use an array! An array can hold all your variable values under a single name. And you can access the values by referring to the array name. Each element in the array has its own ID so that it can be easily accessed.
HTML
Create an Array: An array can be defined in three ways. The following code creates an Array object called myCars: 1: var myCars=new Array(); // regular array (add an optional integer myCars[0]="Saab"; // argument to control array's size) myCars[1]="Volvo"; myCars[2]="BMW"; var myCars=new Array("Saab","Volvo","BMW"); // condensed array var myCars=["Saab","Volvo","BMW"]; // literal array
2: 3:
Access an Array: You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0. The following code line: document.write(myCars[0]); will result in the following output: Saab
Modify Values in an Array: To modify a value in an existing array, just add a new value to the array with a specified index number: myCars[0]="Opel"; Now, the following code line: document.write(myCars[0]); will result in the following output: Opel
112
HTML
Array Object Properties:

Property constructor length prototype Description Returns the function that created the Array object's prototype Sets or returns the number of elements in an array Allows you to add properties and methods to an object
Array Object Methods

Method concat() join() pop() push() reverse() shift() slice() sort() splice() toString() unshift() valueOf() Description Joins two or more arrays, and returns a copy of the joined arrays Joins all elements of an array into a string Removes the last element of an array, and returns that element Adds new elements to the end of an array, and returns the new length Reverses the order of the elements in an array Removes the first element of an array, and returns that element Selects a part of an array, and returns the new array Sorts the elements of an array Adds/Removes elements from an array Converts an array to a string, and returns the result Adds new elements to the beginning of an array, and returns the new length Returns the primitive (ancient) value of an array
Examples:
1. Create an array: Create an array, assign values to it, and write the values to the output. <html> <body> <script type="text/javascript"> var i; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (i=0;i<mycars.length;i++) { document.write(mycars[i] + "<br />"); } </script> </body> </html>
HTML
OUTPUT:
Saab Volvo BMW
2. Join two arrays - concat() <html> <body> <script type="text/javascript"> var parents = ["Jani", "Tove"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(children); document.write(family); </script> </body> </html> OUTPUT: Jani,Tove,Cecilie,Lone
3. Join three arrays - concat() <html> <body> <script type="text/javascript"> var parents = ["Jani", "Tove"]; var brothers = ["Stale", "Kai Jim", "Borge"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(brothers, children); document.write(family); </script> </body> </html> OUTPUT: Jani,Tove,Stale,Kai Jim,Borge,Cecilie,Lone
114
HTML
4. Join all elements of an array into a string - join() <html> <body> <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.join() + "<br />"); document.write(fruits.join("+") + "<br />"); document.write(fruits.join(" and ")); </script> </body> </html> OUTPUT:
Banana,Orange,Apple,Mango Banana+Orange+Apple+Mango Banana and Orange and Apple and Mango
5. Remove the last element of an array - pop() <html> <body> <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.pop() + "<br />"); document.write(fruits + "<br />"); document.write(fruits.pop() + "<br />"); document.write(fruits); </script> </body> </html> OUTPUT:
Mango Banana,Orange,Apple Apple Banana,Orange
115
HTML
6. Add new elements to the end of an array - push() <html> <body> <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.push("Kiwi") + "<br />"); document.write(fruits.push("Lemon","Pineapple") + "<br />"); document.write(fruits); </script> </body> </html> OUTPUT:
5 7 Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple
7. Reverse the order of the elements in an array - reverse() <html> <body> <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.reverse()); </script> </body> </html> OUTPUT:
Mango,Apple,Orange,Banana
116
HTML
8. Remove the first element of an array - shift() <html> <body> <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.shift() + "<br />"); document.write(fruits + "<br />"); document.write(fruits.shift() + "<br />"); document.write(fruits); </script> </body> </html> OUTPUT:
Banana Orange,Apple,Mango Orange Apple,Mango
9. Select elements from an array - slice() <html> <body> <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.slice(1) + "<br />"); document.write(fruits.slice(2) + "<br />"); document.write(fruits.slice(3) + "<br />"); document.write(fruits); </script> </body> </html> OUTPUT:
Orange,Apple,Mango Apple,Mango Mango Banana,Orange,Apple,Mango
117
HTML
10. Sort an array (alphabetically and ascending) - sort() <html> <body> <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.sort()); </script> </body> </html> OUTPUT:
Apple,Banana,Mango,Orange
11. Add an element to position 2 in an array - splice() <html> <body> <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write("Added: " + fruits.splice(2,0,"Lemon") + "<br />"); document.write(fruits); </script> </body> </html> OUTPUT:
Added: Banana,Orange,Lemon,Apple,Mango
118
HTML
12. Convert an array to a string - toString() <html> <body> <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.toString()); </script> </body> </html> OUTPUT:
Banana,Orange,Apple,Mango
13. Add new elements to the beginning of an array - unshift() <html> <body> <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.unshift("Kiwi") + "<br />"); document.write(fruits.unshift("Lemon","Pineapple") + "<br />"); document.write(fruits); </script> <p><b>Note:</b> The unshift() method does not work properly in Internet Explorer 8 and earlier, it returns undefined!</p> </body> </html>
OUTPUT: 5 7 Lemon,Pineapple,Kiwi,Banana,Orange,Apple,Mango Note: The unshift() method does not work properly in Internet Explorer 8 and earlier, it returns undefined!
119
HTML
9.10 Functions in JavaScript: A function is a group of reusable code which can be called anywhere in your program. This eliminates the need of writing same code again and again. This will help programmers to write modular code. You can divide your big program in a number of small and manageable functions. A function will be executed by an event or by a call to the function. To keep the browser from executing a script when the page loads, you can put your script into a function. A function contains code that will be executed by an event or by a call to the function. You may call a function from anywhere within a page (or even from other pages if the function is embedded in an external .js file). Functions can be defined both in the <head> and in the <body> section of a document. However, to assure that a function is read/loaded by the browser before it is called, it could be wise to put functions in the <head> section. How to Define a Function: Syntax Function functionname(var1,var2,...,varX) { some code } The parameters var1, var2, etc. are variables or values passed into the function. The { and the } defines the start and end of the function. Note: A function with no parameters must include the parentheses () after the function name.
JavaScript Function Example: <html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!"); } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" /> </form> <p>By pressing the button above, a function will be called. The function will alert a message.</p> </body> </html>
HTML
OUTPUT:
If the line: alert("Hello world!!") in the example above had not been put within a function, it would have been executed as soon as the page was loaded. Now, the script is not executed before a user hits the input button. The function displaymessage() will be executed if the input button is clicked. The return Statement: The return statement is used to specify the value that is returned from the function. So, functions that are going to return a value must use the return statement. The example below returns the product of two numbers (a and b): Example: <html> <head> <script type="text/javascript"> function product(a,b) { return a*b; } </script> </head> <body> <script type="text/javascript"> document.write(product(4,3)); </script> <p>The script in the body section calls a function with two parameters (4 and 3).</p> <p>The function will return the product of these two parameters.</p> </body> </html> OUTPUT: 12 The script in the body section calls a function with two parameters (4 and 3). The function will return the product of these two parameters.
HTML
Function Examples:
1. Function with a parameter: How to pass a variable to a function, and use the variable in the function. <html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt); } </script> </head> <body> <form> <input type="button" onclick="myfunction('Hello')" value="Call function"> </form> <p>By pressing the button above, a function will be called with "Hello" as a parameter. The function will alert the parameter.</p> </body> </html> OUTPUT:
122
HTML
2. Function that returns a value: How to let a function return a value. <html> <head> <script type="text/javascript"> function myFunction() { return ("Hello world!"); } </script> </head> <body> <script type="text/javascript"> document.write(myFunction()) </script> </body> </html>
OUTPUT: Hello world!
123
HTML
9.11 JavaScript Events: By using JavaScript, we have the ability to create dynamic (active, self-motivated, energetic) web pages. Events are actions that can be detected by JavaScript. Every element on a web page has certain events which can trigger a JavaScript. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags. Examples of events: A mouse click A web page or an image loading Mousing over a hot spot on the web page Selecting an input field in an HTML form Submitting an HTML form A keystroke JavaScript's interaction with HTML is handled through events that occur when the user or browser manipulates a page. When the page loads, that is an event. When the user clicks a button, that click, too, is an event. Another example of events are like pressing any key, closing window, resizing window etc. Developers can use these events to execute JavaScript coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of response imaginable to occur. onLoad and onUnload: The onLoad and onUnload events are triggered when the user enters or leaves the page. The onLoad event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information. Both the onLoad and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page. For example, you could have a popup asking for the user's name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: "Welcome John Doe!".
onFocus, onBlur and onChange: The onFocus, onBlur and onChange events are often used in combination with validation of form fields. Below is an example of how to use the onChange event. The checkEmail() function will be called whenever the user changes the content of the field: <input type="text" size="30" id="email" onchange="checkEmail()" />
124
HTML
onSubmit: The onSubmit event is used to validate ALL form fields before submitting it. Below is an example of how to use the onSubmit event. The checkForm() function will be called when the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled. The function checkForm() returns either true or false. If it returns true the form will be submitted, otherwise the submit will be cancelled: <form method="post" action="xxx.htm" onsubmit="return checkForm()"> onMouseOver: The onmouseover event can be used to trigger a function when the user mouses over an HTML element: Example: <html> <head> <script type="text/javascript"> function writeText(txt) { document.getElementById("desc").innerHTML=txt; } </script> </head> <body> <img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape ="rect" coords ="0,0,82,126" onmouseover="writeText('The Sun and the gas giant planets like Jupiter are by far the largest objects in our Solar System.')" href ="sun.htm" target ="_blank" alt="Sun" /> <area shape ="circle" coords ="90,58,3" onmouseover="writeText('The planet Mercury is very difficult to study from the Earth because it is always so close to the Sun.')" href ="mercur.htm" target ="_blank" alt="Mercury" /> <area shape ="circle" coords ="124,58,8" onmouseover="writeText('Until the 1960s, Venus was often considered a twin sister to the Earth because Venus is the nearest planet to us, and because the two planets seem to share many characteristics.')" href ="venus.htm" target ="_blank" alt="Venus" /> </map> <p id="desc">Mouse over the sun and the planets and see the different descriptions.</p> </body> </html> OUTPUT:
125
HTML
The Sun and the gas giant planets like Jupiter are by far the largest objects in our Solar System.
JavaScript Try...Catch Statement: The try...catch statement allows you to test a block of code for errors.
JavaScript - Catching Errors: When browsing Web pages on the internet, we all have seen a JavaScript alert box telling us there is a runtime error and asking "Do you wish to debug?". Error message like this may be useful for developers but not for users. When users see errors, they often leave the Web page.
The try...catch Statement: The try...catch statement allows you to test a block of code for errors. The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs.
Syntax:
try { //Run some code here } catch(err) { //Handle errors here }
Note that try...catch is written in lowercase letters. Using uppercase letters will generate a JavaScript
error! Examples: The example below is supposed to alert "Welcome guest!" when the button is clicked. However, there's a typo (misprint, mistake) in the message() function. alert() is misspelled as adddlert(). A JavaScript error occurs. The catch block catches the error and executes a custom code to handle it. The code displays a custom error message informing the user what happened: <html> <head> <script type="text/javascript"> var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err)
HTML
{ txt="There was an error on this page.\n\n"; txt+="Error description: " + err.message + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html> OUTPUT:
When you click the button this error message will be displayed:
The next example uses a confirm box to display a custom message telling users they can click OK to continue viewing the page or click Cancel to go to the homepage. If the confirm method returns false, the user clicked Cancel, and the code redirects the user. If the confirm method returns true, the code does nothing: Example: <html> <head> <script type="text/javascript"> var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) {
HTML
txt="There was an error on this page.\n\n"; txt+="Click OK to continue viewing this page,\n"; txt+="or Cancel to return to the home page.\n\n"; if(!confirm(txt)) { document.location.href="http://www.w3schools.com/"; } } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html> OUTPUT:
When you click the button this error message will be displayed:
If you click on cancel then you will be redirected to "http://www.w3schools.com/" Website. JavaScript Throw Statement: The throw statement allows you to create an exception. The Throw Statement: The throw statement allows you to create an exception. If you use this statement together with the try...catch statement, you can control program flow and generate accurate error messages. Syntax
throw exception
The exception can be a string, integer, Boolean or an object. Note that throw is written in lowercase letters. Using uppercase letters will generate a JavaScript error!
HTML
Example: The example below determines the value of a variable called x. If the value of x is higher than 10, lower than 5, or not a number, we are going to throw an error. The error is then caught by the catch argument and the proper error message is displayed: if(x>10) { throw "Err1"; } else if(x<5) { throw "Err2"; } else if(isNaN(x)) //NaN -- Not-a-Number { throw "Err3"; } } catch(err) { if(err=="Err1") { document.write("Error! The value is too high."); } if(err=="Err2") { document.write("Error! The value is too low."); } if(err=="Err3") { document.write("Error! The value is not a number."); } } </script> </body> </html> OUTPUT:
If entered number is less than 5 - Error! The value is too low. If entered number is greater than 10 - Error! The value is too low. If alphabet entered - Error! The value is not a number.
HTML
JavaScript Special Characters: In JavaScript you can add special characters to a text string by using the backslash sign.
Insert Special Characters: The backslash (\) is used to insert apostrophes, new lines, quotes, and other special characters into a text string. Look at the following JavaScript code: var txt="We are the so-called "Vikings" from the north."; document.write(txt); In JavaScript, a string is started and stopped with either single or double quotes. This means that the string above will be chopped to: We are the so-called To solve this problem, you must place a backslash (\) before each double quote in "Viking". This turns each double quote into a string literal: Example: <html> <head> <script type="text/javascript"> var txt="We are the so-called \"Vikings\" from the north."; document.write(txt); </script> </head> <body> </body> </html> JavaScript will now output the proper text string: We are the so-called "Vikings" from the north. The table below lists other special characters that can be added to a text string with the backslash sign: Code \' \" \\ \n \r \t \b \f Outputs single quote double quote backslash new line carriage return tab backspace form feed
130
HTML
9.12 JavaScript Objects Introduction JavaScript is an Object Oriented Programming (OOP) language. An Object Based Programming language allows you to define your own objects and make your own variable types. A programming language can be called object-oriented if it provides four basic capabilities to developers: Encapsulation: The capability to store related information, whether data or methods, together in an object. Aggregation: The capability to store one object inside of another object. Inheritance: The capability of a class to rely upon another class (or number of classes) for some of its properties and methods. Polymorphism: The capability to write one function or method that works in a variety of different ways. Properties or Object Properties: Object properties are usually variables that are used internally in the object's methods, but can also be globally visible variables that are used throughout the page. The syntax for adding a property to an object is:
objectName.objectProperty = propertyValue;
In the following example we are using the length property of the String object to return the number of characters in a string: <script type="text/javascript"> var txt="Hello World!"; document.write(txt.length); </script> The output of the code above will be: 12 Example: Following is a simple example to show how to get a document title using "title" property of document object: <html> <title> Javascript</title> <head> <script type="text/javascript"> var txt="We are the so-called \"Vikings\" from the north."; var str = document.title; document.write(txt+"<br>"); document.write(str); </script> </head> <body> </body> </html>
HTML
Methods or Object Methods: Methods are the actions that can be performed on objects. There is little difference between a function and a method, except that a function is a standalone unit of statements and a method is attached to an object and can be referenced by the this keyword. Methods are useful for everything from displaying the contents of the object to the screen to performing complex mathematical operations on a group of local properties and parameters. You can call a method with the following syntax: objName.methodName() Example: Following is a simple example to show how to use write() method of document object to write any content on the document:
document.write("This is test");
Example: In the following example we are using the toUpperCase() method of the String object to display a text in uppercase letters: <script type="text/javascript"> var str="Hello world!"; document.write(str.toUpperCase()); </script> The output of the code above will be: HELLO WORLD!
Creating Your Own Objects: There are different ways to create a new object: 1. Create a direct instance of an object The following code creates a new instance of an object, and adds four properties to it: personObj=new Object(); personObj.firstname="John"; personObj.lastname="Doe"; personObj.age=50; personObj.eyecolor="blue";
Alternative syntax: personObj={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

HTML
Example 1: <html> <body> <script type="text/javascript"> personObj={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"} document.write(personObj.firstname + " is " + personObj.age + " years old."); </script> </body> </html> OUTPUT:
John is 50 years old.
Example 2: <html> <head> <title>User-defined objects</title> <script type="text/javascript"> var book = new Object(); // Create the object book.subject = "Perl"; // Assign properties to the object book.author = "Mohtashim"; </script> </head> <body> <script type="text/javascript"> document.write("Book name is : " + book.subject + "<br>"); document.write("Book author is : " + book.author + "<br>"); </script> </body> </html> OUTPUT:
Book name is : Perl Book author is : Mohtashim
133
HTML
2. Create an object constructor Create a function that construct objects: function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; }
Inside the function you need to assign things to this.propertyName. The reason for all the "this" stuff is that you're going to have more than one person at a time (which person you're dealing with must be clear). That's what "this" is: the instance of the object at hand. Once you have the object constructor, you can create new instances of the object, like this: var myFather=new person("John","Doe",50,"blue"); var myMother=new person("Sally","Rally",48,"green"); Example 1: <html> <body> <script type="text/javascript"> function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; } myFather=new person("John","Doe",50,"blue"); document.write(myFather.firstname + " is " + myFather.age + " years old."); </script> </body> </html> OUTPUT:
John is 50 years old.
134
HTML
Example 2: <html> <head> <title>User-defined objects</title> <script type="text/javascript"> function book(title, author){ this.title = title; this.author = author; } </script> </head> <body> <script type="text/javascript"> var myBook = new book("Perl", "Mohtashim"); document.write("Book title is : " + myBook.title + "<br>"); document.write("Book author is : " + myBook.author + "<br>"); </script> </body> </html> OUTPUT:
Book title is : Perl Book author is : Mohtashim
135
HTML
Defining Methods for an Object: The previous examples demonstrate how the constructor creates the object and assigns properties. But we need to complete the definition of an object by assigning methods to it. Example: Here is a simple example to show how to add a function along with an object: <html> <head> <title>User-defined objects</title> <script type="text/javascript"> // Define a function which will work as a method function addPrice(amount){ this.price = amount; } function book(title, author){ this.title = title; this.author = author; this.addPrice = addPrice; // Assign that method as property. } </script> </head> <body> <script type="text/javascript"> var myBook = new book("Perl", "Mohtashim"); myBook.addPrice(100); document.write("Book title is : " + myBook.title + "<br>"); document.write("Book author is : " + myBook.author + "<br>"); document.write("Book price is : " + myBook.price + "<br>"); </script> </body> </html> OUTPUT:
Book title is : Perl Book author is : Mohtashim Book price is : 100
136
HTML
The with Keyword: The with keyword is used as a kind of shorthand for referencing an object's properties or methods. The object specified as an argument to with becomes the default object for the duration of the block that follows. The properties and methods for the object can be used without naming the object. Syntax:
with (object){ properties used without the object name and dot }
Example: <html> <head> <title>User-defined objects</title> <script type="text/javascript"> // Define a function which will work as a method function addPrice(amount){ with(this){ price = amount; } } function book(title, author){ this.title = title; this.author = author; this.price = 0; this.addPrice = addPrice; // Assign that method as property. } </script> </head> <body> <script type="text/javascript"> var myBook = new book("Perl", "Mohtashim"); myBook.addPrice(100); document.write("Book title is : " + myBook.title + "<br>"); document.write("Book author is : " + myBook.author + "<br>"); document.write("Book price is : " + myBook.price + "<br>"); </script> </body> </html> OUTPUT:
Book title is : Perl Book author is : Mohtashim Book price is : 100
137
HTML
JavaScript String Object: The String object is used to manipulate a stored piece of text. Examples of use: The following example uses the length property of the String object to find the length of a string: var txt="Hello world!"; document.write(txt.length); The code above will result in the following output: 12 The following example uses the toUpperCase() method of the String object to convert a string to uppercase letters: var txt="Hello world!"; document.write(txt.toUpperCase()); The code above will result in the following output: HELLO WORLD! String Properties: Here is a list of each property and their description. Property constructor length prototype Description Returns a reference to the String function that created the object. Returns the length of the string. The prototype property allows you to add properties and methods to an object.
String Methods: Here is a list of each method and its description. Method charAt() charCodeAt() concat() indexOf() lastIndexOf() localeCompare() Description Returns the character at the specified index. Returns a number indicating the Unicode value of the character at the given index. Combines the text of two strings and returns a new string. Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found. Returns the index within the calling String object of the last occurrence of the specified value, or -1 if not found. Returns a number indicating whether a reference string comes before or after or is
138
HTML
the same as the given string in sort order. match() replace() search() slice() split() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() valueOf() Used to match a regular expression against a string. Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring. Executes the search for a match between a regular expression and a specified string. Extracts a section of a string and returns a new string. Splits a String object into an array of strings by separating the string into substrings. Returns the characters in a string beginning at the specified location through the specified number of characters. Returns the characters in a string between two indexes into the string. The characters within a string are converted to lower case while respecting the current locale. The characters within a string are converted to upper case while respecting the current locale. Returns the calling string value converted to lower case. Returns a string representing the specified object. Returns the calling string value converted to uppercase. Returns the primitive value of the specified object.
String HTML wrappers: Here is a list of each method which returns a copy of the string wrapped inside the appropriate HTML tag. Method anchor() big() blink() bold() fixed() fontcolor() fontsize() italics() link() Description Creates an HTML anchor that is used as a hypertext target. Creates a string to be displayed in a big font as if it were in a <big> tag. Creates a string to blink as if it were in a <blink> tag. Creates a string to be displayed as bold as if it were in a <b> tag. Causes a string to be displayed in fixed-pitch font as if it were in a <tt> tag Causes a string to be displayed in the specified color as if it were in a <font color="color"> tag. Causes a string to be displayed in the specified font size as if it were in a <font size="size"> tag. Causes a string to be italic, as if it were in an <i> tag. Creates an HTML hypertext link that requests another URL.
139
HTML
small() strike() sub() sup()
Causes a string to be displayed in a small font, as if it were in a <small> tag. Causes a string to be displayed as struck-out text, as if it were in a <strike> tag. Causes a string to be displayed as a subscript, as if it were in a <sub> tag Causes a string to be displayed as a superscript, as if it were in a <sup> tag
Examples of string object: 1. Return the length of a string: How to return the length of a string. <html> <body> <script type="text/javascript"> var txt = "Hello World!"; document.write(txt.length); </script> </body> </html> OUTPUT: 12 2. Style strings: How to style strings. <html> <body> <script type="text/javascript"> var txt = "Hello World!"; document.write("<p>Big: " + txt.big() + "</p>"); document.write("<p>Small: " + txt.small() + "</p>"); document.write("<p>Bold: " + txt.bold() + "</p>"); document.write("<p>Italic: " + txt.italics() + "</p>"); document.write("<p>Fixed: " + txt.fixed() + "</p>"); document.write("<p>Strike: " + txt.strike() + "</p>"); document.write("<p>Fontcolor: " + txt.fontcolor("green") + "</p>"); document.write("<p>Fontsize: " + txt.fontsize(6) + "</p>"); document.write("<p>Subscript: " + txt.sub() + "</p>"); document.write("<p>Superscript: " + txt.sup() + "</p>");
HTML
document.write("<p>Link: " + txt.link("http://www.w3schools.com") + "</p>"); document.write("<p>Blink: " + txt.blink() + " (does not work in IE, Chrome, or Safari)</p>"); </script> </body> </html> OUTPUT: Big: Hello World! Small: Hello World! Bold: Hello World! Italic: Hello World! Fixed: Hello World! Strike: Hello World! Fontcolor: Hello World! Fontsize:
Hello World!
Subscript: Hello World! Superscript: Hello World! Link: Hello World! Blink: Hello World! (does not work in IE, Chrome, or Safari)
3. The toLowerCase() and toUpperCase() methods: How to convert a string to lowercase or uppercase letters.
<html> <body> <script type="text/javascript"> var txt="Hello World!"; document.write(txt.toLowerCase() + "<br />"); document.write(txt.toUpperCase()); </script>
HTML
</body> </html> OUTPUT:

hello world! HELLO WORLD!
4. The match() method: How to search for a specified value within a string. <html> <body> <script type="text/javascript"> var str="Hello world!"; document.write(str.match("world") + "<br />"); document.write(str.match("World") + "<br />"); document.write(str.match("worlld") + "<br />"); document.write(str.match("world!")); </script> </body> </html> OUTPUT:
world null null world!
5. Replace characters in a string - replace(): How to replace a specified value with another value in a string.
<html> <body> <script type="text/javascript"> var str="Visit Microsoft!"; document.write(str.replace("Microsoft","W3Schools")); </script> </body> </html> OUTPUT:
Visit W3Schools!
142
HTML
6. The indexOf() method: How to return the position of the first found occurrence of a specified value in a string.
<html> <body> <script type="text/javascript"> var str="Hello world!"; document.write(str.indexOf("d") + "<br />"); document.write(str.indexOf("WORLD") + "<br />"); document.write(str.indexOf("world")); </script> </body> </html> OUTPUT:
10 -1 6
JavaScript Date Object: Create a Date Object The Date object is used to work with dates and times. Date objects are created with the Date() constructor. Syntax: Here are different variant of Date() constructor:
new new new new Date( ) Date(milliseconds) Date(datestring) Date(year,month,date[,hour,minute,second,millisecond ])
Note: Paramters in the brackets are always optional Here is the description of the parameters: No Argument: With no arguments, the Date( ) constructor creates a Date object set to the current date and time. milliseconds: When one numeric argument is passed, it is taken as the internal numeric representation of the date in milliseconds, as returned by the getTime( ) method. For example, passing the argument 5000 creates a date that represents five seconds past midnight on 1/1/70. datestring:When one string argument is passed, it is a string representation of a date, in the format accepted by the Date.parse( ) method.
HTML
7 agruments: To use the last form of constructor given above, Here is the description of each argument:
1. year: Integer value representing the year. For compatibility (in order to avoid the Y2K problem), you should always specify the year in full; use 1998, rather than 98. 2. month: Integer value representing the month, beginning with 0 for January to 11 for December. 3. date: Integer value representing the day of the month. 4. hour: Integer value representing the hour of the day (24-hour scale). 5. minute: Integer value representing the minute segment of a time reading. 6. second: Integer value representing the second segment of a time reading. 7. millisecond: Integer value representing the millisecond segment of a time reading.
All dates are calculated in milliseconds from 01 January, 1970 00:00:00 Universal Time (UTC) with a day containing 86,400,000 milliseconds. Some examples of instantiating a date: var today = new Date() var d1 = new Date("October 13, 1975 11:13:00") var d2 = new Date(79,5,24) var d3 = new Date(79,5,24,11,33,0) Set Dates We can easily manipulate the date by using the methods available for the Date object. In the example below we set a Date object to a specific date (14th January 2010): var myDate=new Date(); myDate.setFullYear(2010,0,14); And in the following example we set a Date object to be 5 days into the future: var myDate=new Date(); myDate.setDate(myDate.getDate()+5); Note: If adding five days to a date shifts the month or year, the changes are handled automatically by the Date object itself! Compare Two Dates The Date object is also used to compare two dates. The following example compares today's date with the 14th January 2100: var x=new Date(); x.setFullYear(2100,0,14); var today = new Date(); if (x>today) { alert("Today is before 14th January 2100");
HTML
} else { alert("Today is after 14th January 2100"); } Date Properties: Here is a list of each property and their description. Property constructor prototype Description Specifies the function that creates an object's prototype. The prototype property allows you to add properties and methods to an object.
Date Methods: Here is a list of each method and its description. Method Date() getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes()
Description Returns today's date and time Returns the day of the month for the specified date according to local time. Returns the day of the week for the specified date according to local time. Returns the year of the specified date according to local time. Returns the hour in the specified date according to local time. Returns the milliseconds in the specified date according to local time. Returns the minutes in the specified date according to local time. Returns the month in the specified date according to local time. Returns the seconds in the specified date according to local time. Returns the numeric value of the specified date as the number of milliseconds since January 1, 1970, 00:00:00 UTC. Returns the time-zone offset in minutes for the current locale. Returns the day (date) of the month in the specified date according to universal time. Returns the day of the week in the specified date according to universal time. Returns the year in the specified date according to universal time. Returns the hours in the specified date according to universal time. Returns the milliseconds in the specified date according to universal time. Returns the minutes in the specified date according to universal time.
145
HTML
getUTCMonth() getUTCSeconds() getYear() setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() setYear() toDateString() toGMTString() toLocaleDateString() toLocaleFormat() toLocaleString() toLocaleTimeString() toSource()
Returns the month in the specified date according to universal time. Returns the seconds in the specified date according to universal time. Deprecated - Returns the year in the specified date according to local time. Use getFullYear instead. Sets the day of the month for a specified date according to local time. Sets the full year for a specified date according to local time. Sets the hours for a specified date according to local time. Sets the milliseconds for a specified date according to local time. Sets the minutes for a specified date according to local time. Sets the month for a specified date according to local time. Sets the seconds for a specified date according to local time. Sets the Date object to the time represented by a number of milliseconds since January 1, 1970, 00:00:00 UTC. Sets the day of the month for a specified date according to universal time. Sets the full year for a specified date according to universal time. Sets the hour for a specified date according to universal time. Sets the milliseconds for a specified date according to universal time. Sets the minutes for a specified date according to universal time. Sets the month for a specified date according to universal time. Sets the seconds for a specified date according to universal time. Deprecated - Sets the year for a specified date according to local time. Use setFullYear instead. Returns the "date" portion of the Date as a human-readable string. Deprecated - Converts a date to a string, using the Internet GMT conventions. Use toUTCString instead. Returns the "date" portion of the Date as a string, using the current locale's conventions. Converts a date to a string, using a format string. Converts a date to a string, using the current locale's conventions. Returns the "time" portion of the Date as a string, using the current locale's conventions. Returns a string representing the source for an equivalent Date object; you can use this value to create a new object.
146
HTML
toString() toTimeString() toUTCString() valueOf()
Returns a string representing the specified Date object. Returns the "time" portion of the Date as a human-readable string. Converts a date to a string, using the universal time convention. Returns the primitive value of a Date object.
Date Static Methods: In addition to the many instance methods listed previously, the Date object also defines two static methods. These methods are invoked through the Date( ) constructor itself: Method Date.parse( ) Date.UTC( ) Description Parses a string representation of a date and time and returns the internal millisecond representation of that date. Returns the millisecond representation of the specified UTC date and time.
147
HTML
Examples of Date object: 1. Return today's date and time: How to use the Date() method to get today's date. <html> <body> <script type="text/javascript"> var d=new Date(); document.write(d); </script> </body> </html> OUTPUT:
Wed Mar 14 2012 15:51:16 GMT+0530 (India Standard Time)
2. getFullYear(): Use getFullYear() to get the year. <html> <body> <script type="text/javascript"> var d=new Date(); document.write(d.getFullYear()); </script> </body> </html> OUTPUT:
2012
3. getTime(): getTime() returns the number of milliseconds since 01.01.1970. <html> <body> <script type="text/javascript"> var d=new Date(); document.write(d.getTime() + " milliseconds since 1970/01/01"); </script> </body> </html>
HTML
OUTPUT:
1331720755346 milliseconds since 1970/01/01
4. setFullYear(): How to use setFullYear() to set a specific date. <html> <body> <script type="text/javascript"> var d = new Date(); d.setFullYear(1992,10,3); document.write(d); </script> </body> </html> OUTPUT:
Tue Nov 03 1992 15:59:19 GMT+0530 (India Standard Time)
5. toUTCString(): How to use toUTCString() to convert today's date (according to UTC) to a string. <html> <body> <script type="text/javascript"> var d=new Date(); document.write("Original form: "); document.write(d + "<br />"); document.write("To string (universal time): "); document.write(d.toUTCString()); </script> </body> </html> OUTPUT:
Original form: Wed Mar 14 2012 16:00:09 GMT+0530 (India Standard Time) To string (universal time): Wed, 14 Mar 2012 10:30:09 GMT
149
HTML
6. getDay(): Use getDay() and an array to write a weekday, and not just a number. <html> <body> <script type="text/javascript"> var d=new Date(); var weekday=new Array(7); weekday[0]="Sunday"; weekday[1]="Monday"; weekday[2]="Tuesday"; weekday[3]="Wednesday"; weekday[4]="Thursday"; weekday[5]="Friday"; weekday[6]="Saturday"; document.write("Today is " + weekday[d.getDay()]); </script> </body> </html> OUTPUT:
Today is Wednesday
7. Display a clock: How to display a clock (current time) on your web page. <html> <head> <script type="text/javascript"> function startTime() { var today=new Date(); var h=today.getHours(); var m=today.getMinutes(); var s=today.getSeconds(); // add a zero in front of numbers<10 m=checkTime(m); s=checkTime(s); document.getElementById('txt').innerHTML=h+":"+m+":"+s; t=setTimeout('startTime()',500); } function checkTime(i) { if (i<10) { i="0" + i; }
HTML
return i; } </script> </head> <body onload="startTime()"> <div id="txt"></div> </body> </html> OUTPUT: 16:02:49 JavaScript Array Object: Refer Page No. 111 to 119.
JavaScript Boolean Object: Create a Boolean Object The Boolean object represents two values: "true" or "false". Syntax: Creating a boolean object: var val = new Boolean(value); If value parameter is omitted or is 0, -0, null, false, NaN, undefined, or the empty string (""), the object has an initial value of false. For any other value it is set to true (even with the string "false")! Boolean Properties: Here is a list of each property and their description. Property constructor prototype Description Returns a reference to the Boolean function that created the object. The prototype property allows you to add properties and methods to an object.
Boolean Methods: Here is a list of each method and its description. Method toSource() toString() valueOf() Description Returns a string containing the source of the Boolean object; you can use this string to create an equivalent object. Returns a string of either "true" or "false" depending upon the value of the object. Returns the primitive value of the Boolean object.
151
HTML
Example: <html> <body> <script type="text/javascript"> var b1=new Boolean(0); var b2=new Boolean(1); var b3=new Boolean(""); var b4=new Boolean(null); var b5=new Boolean(NaN); var b6=new Boolean("false"); document.write("0 is boolean "+ b1 +"<br />"); document.write("1 is boolean "+ b2 +"<br />"); document.write("An empty string is boolean "+ b3 + "<br />"); document.write("null is boolean "+ b4+ "<br />"); document.write("NaN is boolean "+ b5 +"<br />"); document.write("The string 'false' is boolean "+ b6 +"<br />"); </script> </body> </html> OUTPUT:
0 is boolean false 1 is boolean true An empty string is boolean false null is boolean false NaN is boolean false The string 'false' is boolean true
JavaScript Math Object: The Math object allows you to perform mathematical tasks. The Math object includes several mathematical constants and methods. Syntax for using properties/methods of Math: var x=Math.PI; var y=Math.sqrt(16); Note: Math is not a constructor. All properties and methods of Math can be called by using Math as an object without creating it.
152
HTML
Mathematical Constants JavaScript provides eight mathematical constants that can be accessed from the Math object. These are: E, PI, square root of 2, square root of 1/2, natural log of 2, natural log of 10, base-2 log of E, and base-10 log of E. You may reference these constants from your JavaScript like this: Math.E Math.PI Math.SQRT2 Math.SQRT1_2 Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E
Mathematical Methods: In addition to the mathematical constants that can be accessed from the Math object there are also several methods available. The following example uses the round() method of the Math object to round a number to the nearest integer: document.write(Math.round(4.7)); The code above will result in the following output: 5 The following example uses the random() method of the Math object to return a random number between 0 and 1: document.write(Math.random()); The code above can result in the following output: 0.6269518396850772 The following example uses the floor() and random() methods of the Math object to return a random number between 0 and 10: document.write(Math.floor(Math.random()*11)); The code above can result in the following output: 1
153
HTML
Math Properties: Here is a list of each property and their description. Property E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2 Description Euler's constant and the base of natural logarithms, approximately 2.718. Natural logarithm of 2, approximately 0.693. Natural logarithm of 10, approximately 2.302. Base 2 logarithm of E, approximately 1.442. Base 10 logarithm of E, approximately 0.434. Ratio of the circumference of a circle to its diameter, approximately 3.14159. Square root of 1/2; equivalently, 1 over the square root of 2, approximately 0.707. Square root of 2, approximately 1.414.
Math Methods: Here is a list of each method and its description. Method abs() acos() asin() atan() atan2() ceil() cos() exp() floor() log() max() min() pow() random() round() sin() sqrt() Description Returns the absolute value of a number. Returns the arccosine (in radians) of a number. Returns the arcsine (in radians) of a number. Returns the arctangent (in radians) of a number. Returns the arctangent of the quotient of its arguments. Returns the smallest integer greater than or equal to a number. Returns the cosine of a number. Returns EN, where N is the argument, and E is Euler's constant, the base of the natural logarithm. Returns the largest integer less than or equal to a number. Returns the natural logarithm (base E) of a number. Returns the largest of zero or more numbers. Returns the smallest of zero or more numbers. Returns base to the exponent power, that is, base exponent. Returns a pseudo-random number between 0 and 1. Returns the value of a number rounded to the nearest integer. Returns the sine of a number. Returns the square root of a number.
154
HTML
tan() toSource()
Returns the tangent of a number. Returns the string "Math".
Examples of Math Object: 1. round(): How to use round(). <html> <body> <script type="text/javascript"> document.write(Math.round(0.60) + "<br />"); document.write(Math.round(0.50) + "<br />"); document.write(Math.round(0.49) + "<br />"); document.write(Math.round(-4.40) + "<br />"); document.write(Math.round(-4.60)); </script> </body> </html> OUTPUT:
1 1 0 -4 -5
2. random(): How to use random() to return a random number between 0 and 1. <html> <body> <script type="text/javascript"> //return a random number between 0 and 1 document.write(Math.random() + "<br />"); //return a random integer between 0 and 10 document.write(Math.floor(Math.random()*11)); </script> </body> </html>
155
HTML
OUTPUT:
0.4851433073224546 2
3. max(): How to use max() to return the number with the highest value of two specified numbers. <html> <body> <script type="text/javascript"> document.write(Math.max(5,10) + "<br />"); document.write(Math.max(0,150,30,20,38) + "<br />"); document.write(Math.max(-5,10) + "<br />"); document.write(Math.max(-5,-10) + "<br />"); document.write(Math.max(1.5,2.5)); </script> </body> </html> OUTPUT:
10 150 10 -5 2.5
4. min(): How to use min() to return the number with the lowest value of two specified numbers. <html> <body> <script type="text/javascript"> document.write(Math.min(5,10) + "<br />"); document.write(Math.min(0,150,30,20,38) + "<br />"); document.write(Math.min(-5,10) + "<br />"); document.write(Math.min(-5,-10) + "<br />"); document.write(Math.min(1.5,2.5)); </script> </body> </html> OUTPUT:
5 0 -5 -10 1.5 SECAB Vocational Section, Bijapur 156
HTML
JavaScript RegExp Object: What is RegExp? A regular expression is an object that describes a pattern of characters. When you search in a text, you can use a pattern to describe what you are searching for. A simple pattern can be one single character. A more complicated pattern can consist of more characters, and can be used for parsing, format checking, substitution and more. Regular expressions are used to perform powerful pattern-matching and "search-and-replace" functions on text. Syntax: var patt=new RegExp(pattern,modifiers); or more simply: var patt=/pattern/modifiers; Here is the description of the parameters: pattern: A string that specifies the pattern of the regular expression or another regular expression. modifiers: An optional string containing any of the "g", "i", and "m" attributes that specify global, case-insensitive, and multiline matches, respectively. RegExp Modifiers: Modifiers are used to perform case-insensitive and global searches. The i" modifier is used to perform case-insensitive (not case-sensitive) matching. The g modifier is used to perform a global match (find all matches rather than stopping after the first match). The m modifier is used to perform multiline matches. RegExp Properties: Here is a list of each property and their description. Property constructor global ignoreCase Description Specifies the function that creates an object's prototype. Specifies if the "g" modifier is set. Specifies if the "i" modifier is set.
157
HTML
lastIndex multiline source
The index at which to start the next match. Specifies if the "m" modifier is set. The text of the pattern.
RegExp Methods: Here is a list of each method and its description. Method exec() test() toSource() toString() Description Executes a search for a match in its string parameter. Tests for a match in its string parameter. Returns an object literal representing the specified object; you can use this value to create a new object. Returns a string representing the specified object.
Example 1: Do a case-insensitive search for "w3schools" in a string: <html> <body> <script type="text/javascript"> var str = "Visit W3Schools"; var patt1 = /w3schools/i; document.write(str.match(patt1)); </script> </body> </html> OUTPUT:
W3Schools
Example 2: Do a global search for "is": <html> <body> <script type="text/javascript"> var str="Is this all there is?"; var patt1=/is/g; document.write(str.match(patt1)); </script> </body> </html> OUTPUT:
is,is SECAB Vocational Section, Bijapur 158
HTML
Example 3: Do a global, case-insensitive search for "is": <html> <body> <script type="text/javascript"> var str="Is this all there is?"; var patt1=/is/gi; document.write(str.match(patt1)); </script> </body> </html> OUTPUT:
Is,is,is
test(): The test() method searches a string for a specified value, and returns true or false, depending on the result. The following example searches a string for the character "e": <html> <body> <script type="text/javascript"> var patt1=new RegExp("e"); document.write(patt1.test("The best things in life are free")); </script> </body> </html> OUTPUT:
true
159
HTML
exec(): The exec() method searches a string for a specified value, and returns the text of the found value. If no match is found, it returns null. The following example searches a string for the character "e": <html> <body> <script type="text/javascript"> var patt1=new RegExp("e"); document.write(patt1.exec("The best things in life are free")); </script> </body> </html> OUTPUT:
e
9.14 JavaScript Browser Detection: Browser Detection: Almost everything in this tutorial works on all JavaScript-enabled browsers. However, there are some things that just don't work on certain browsers - especially on older browsers. Sometimes it can be useful to detect the visitor's browser, and then serve the appropriate information. The Navigator object contains information about the visitor's browser name, version, and more. Note: There is no public standard that applies to the navigator object, but all major browsers support it. The Navigator Object: The Navigator object contains all information about the visitor's browser: <html> <body> <div id="example"></div> <script type="text/javascript"> txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; txt+= "<p>Browser Name: " + navigator.appName + "</p>"; txt+= "<p>Browser Version: " + navigator.appVersion + "</p>"; txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; txt+= "<p>Platform: " + navigator.platform + "</p>";
HTML
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>"; document.getElementById("example").innerHTML=txt; </script> </body> </html> OUTPUT: Browser CodeName: Mozilla Browser Name: Netscape Browser Version: 5.0 (Windows; en-US) Cookies Enabled: true Platform: Win32 User-agent header: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.24) Gecko/20111103 Firefox/3.6.24
JavaScript Guidelines:
Some other important things to know when scripting with JavaScript.
JavaScript is Case Sensitive: A function named "myfunction" is not the same as "myFunction" and a variable named "myVar" is not the same as "myvar". JavaScript is case sensitive - therefore watch your capitalization closely when you create or call variables, objects and functions. White Space JavaScript ignores extra spaces. You can add white space to your script to make it more readable. The following lines are equivalent: var name="Hege"; var name = "Hege";
Break up a Code Line: You can break up a code line within a text string with a backslash. The example below will be displayed properly: document.write("Hello \ World!"); However, you cannot break up a code line like this: document.write \ ("Hello World!");
HTML
10. MICROSOFT FRONT PAGE: 10.1 Introduction: Microsoft Frontpage was designed to allow novice users to create and edit web pages without knowing any HTML. FrontPage is an HTML editor and web site administration tool. Among other features, it supports automated web templates and can create a multi-level navigation system on the fly. Microsoft's FrontPage editing tool is one of the most commonly used web site editing tools today. It is easy to learn and offers the flexibility to manage your website as it grows. Novice users are able to create attractive and functional websites, while more advanced users can accomplish more robust tasks such as working with CGI scripts and modifying the actual HTML of the web pages. FrontPage is designed as a WYSIWYG application. WYSIWYG is an acronym for "What You See Is What You Get". This means you basically draw your web pages as you want them to look and FrontPage generates the appropriate HTML to accomplish the task. It is a well-designed Web page editor loaded with easy-to-use options and page elements that allow users to create a decent Web site quickly. The application is designed to mimic Microsoft Office in look and feel, while allowing users to easily build Web pages with drag-and-drop functionality. With the software installed on a user's computer, they can quick develop Web documents with elements drawn from other Office documents. As your website grows the content contained within the site can become difficult to keep updated. Keeping your sites content current is a time consuming task, often considerably larger than the initial development of the site. The use of FrontPage provides users with the power to easily manage content on a site-wide basis instead of on a page-by-page basis. This eases the normally daunting task of website management. What makes FrontPage different from other Web design software is the inclusion of unique server extensions that support special features that are not available with other Web design utilities. For example:
1. 'Publish' your website directly to your account, without any need for FTP. 2. FrontPage's 'Web-Bots' make it easy to place things such as forms and guest books on a site without having to learn complex scripting. 3. Edit your site 'on the fly', meaning that FrontPage can log you directly into your site on the server to edit the pages in real time, rather than having to make changes locally and then re-upload all the changed files.
FrontPage Server Extensions are server-side components that let FrontPage interact directly with the Web server. Most web-hosting providers offer FrontPage Server Extensions to their customers as an integrated part of their hosting packages. Server extensions are native to the Windows hosting platform, but are also widely available on various Unix hosting platforms as well. Through the server extensions, users can upload and maintain their Web site directly through the FrontPage application, without the need for a separate FTP application. Web authors can also utilize other innovative features, such as traffic reports that can be generated daily, weekly or month. These reports can track hits, referred domains, and search strings. The software also allows Web authors to develop database-driven Web sites. The Database Interface Wizard simplifies the creation of dynamic databases that can interact with the Web site. This is just a touch of what FrontPage can do. By using the features of FrontPage to your advantage, you can easily make the creation and maintenance of your website a much simpler task.
162
HTML
10.2 FrontPage Basics:
Overview
FrontPage is a graphical HTML editor. HTMLHyperText Markup Languageis the "language" that creates Web pages. Rather than requiring you to learn HTML with all its <TITLE>, <FONT COLOR="#FFFFFF">, and <TD ALIGN="center" WIDTH="50%"> types of tags, FrontPage allows you to work in a WYSIAWYG (What You See Is Almost What You Get) environment that feels a great deal like the Microsoft word processing application, Word. This tutorial guides you through creating a simple Web page using most of the basic tools including tables, background color, images, text formatting, and hyperlinks.
About Web Servers

Your Web page must be housed on a Web servernot simply a server that provides access to shared resources such as WordPerfect Office, Word, or Excel. Your school or department may maintain a Web server and provide space on it for you, or you may choose to contract with a local Internet Service Provider (ISP) to provide you with Web hosting services. It is difficult to provide you with specifics about how you will interact with the server in order to place and maintain your Web pages, since different servers and organizations have different services and utilities in place. You should contact your technical support staff and ask for specific instructions on how to interact with your Web server.
Using HTML
If you are a "do-it-yourselfer" and wish to create your Web pages "from scratch" then you'll need to learn HTML (HyperText Markup Language). For information and instructions about HTML, consult one of the many resources available on the Web, including the tutorials, HTML Basics or Beyond HTML Basics. You can find additional Web resources on Web by Design. Even when you create Web pages using an HTML editor, you will most likely find it necessary to "tweak" the HTML tags to "clean up" areas where the editor became "confused." Therefore, I would encourage you to develop at least rudimentary HTML skills.
Getting Started
FrontPage, in its simplest form, is an HTML editor. That is the functionality upon which we'll focus in this tutorial. What we won't try to cover here is how to use FrontPage to manage Web sites. The reason that I point this out is that when you open a page that already exists, make sure you choose from the menu, FILE : Open, NOT Open Web. As with any computer application, remember to:
SAVE YOUR WORK OFTEN Remember a power surge or a slight (even a very slight) disruption of power will cause the loss of any work that you have done that has not yet been saved, SECAB Vocational Section, Bijapur 163
HTML
so SAVE SAVE SAVE SAVE SAVE SAVE SAVE SAVE
Start a new FrontPage document, by clicking the FrontPage icon, Start : Programs (see example below).
or by choosing FrontPage from
Starting Front Page via Start : Programs You will see a new white page on which to begin creating your masterpiece! If you've already started a page, from the menu, choose FILE : Open and browse for the file that you want to work on.
Testing the Web Page

As you are developing your Web page, you should periodically test it to make sure that it looks like you intend it toremember, the graphical HTML editors only show you an approximation of what your page will look like once you display it on the Web. FrontPage provides an easy way to do a preliminary test of your page. At the lower left corner of the FrontPage screen, find the three tabs (see example below) indicating the various views of your document. To switch between views, click the tab that you want to change to.
Normalthe view in which you do most of your work HTMLthe view of the actual HTML coding that creates your page Previewthe view that you click when you want to test your document and view an approximation of the page as it will appear in the Web browser SECAB Vocational Section, Bijapur 164
HTML
FrontPage View Toolbar HINT: a common error is to switch to Preview mode to look at your page, then attempt to type on or to edit your document. You MUST be in Normal view in order to edit your document. The second way to test a Web page is to view it in a Web browser:
1. Start your Web browser (Internet Explorer, Netscape Navigator/Communicator, Firefox) if it is not already open. 2. After the browser is started, from the menu, choose FILE : Open. Browser versions vary, so it may say Open Page or Open File. 3. You need to look for the Web page you want to test. Again, browsers differ. You may see an Open File dialog box, or you may need to click Choose File or Browse in order to go to the place where you stored your file. (It may be on a Floppy A drive, on your Desktop, or in some folderonly you know!) 4. When the file opens in the browser window, you can look through it to see that everything looks as you want it to.
If you have viewed the file in the Web browser, then made any changes to the file in FrontPage, you must save the document in FrontPage, then, in the browser, reload/refresh the page to view the updated page.
Creating a Web Page Title

Within the HTML code of each Web page there exists a <TITLE> tag (not to be confused with whatever title or heading is placed on the page itself for everyone to read). The information contained within the <TITLE> tag appears at the top of the browser window in the colored strip. Many of the search engines still use the information supplied within this tag as the basis for conducting searches on the Web. Therefore, it is very important that you give the Web page a good title. The information placed in the <TITLE> tag should be a concise definition of your page. For example, you should not title your page "My Home Page" or "Steve's Systems Page." Rather, a descriptive title might be "IUPUI Intro to Systems Analysis"this title identifies the location (IUPUI), the type of course (introduction), and content of the course (systems analysis). If you do not insert information in the <TITLE> tag of the page, FrontPage will simply pick up the top line of the document's content and use that instead. To insert the <TITLE> tag information,
1. Choose from the menu, FILE : Properties. 2. In the Page Properties dialog box (see example below), complete the Title information, then click OK.
165
HTML
Dialog Box for Setting Page Title NOTE: The information you supply for the <TITLE> tag does not have to be identical to whatever title or heading you place in the document itself.
Identify your Web Page to Search Engines and Browsers

In addition to using the <TITLE> tag, search engines and other browsers also identify your page(s) by meta information. Meta information is "information about information." The three primary pieces of information are the description, keywords, and author. When you visit a search engine such as Yahoo or Google and type a word or phrase to be searched for, the text that you type is a keyword. Web authors should develop a comprehensive list of keywords that they believe a potential visitor to their site might use. The keywords should include the obvious descriptive words or phrases as well as abbreviations and common mis-spellings. If your audience is likely to speak a different language, you may also want to include comparable terms in the other language. After you have searched for a keyword and the search engine returns a list of potential sites for you to visit, the short descriptive phrase that accompanies each site is the description that the author of that site included. The key to writing a good description is to remember that the amount of the phrase that displays in the list of Web sites is short, so you need to be concise, accurate, and inviting. Including the author in the meta information is a way for others to contact you. Since this information is not visible except through the HTML code, it doesn't tend to attract the casual visitors to your page, but rather others skilled (or interested) in HTML who know to look for that information. I have found that other Web experts use this contact information to ask questions about certain design techniques or to report problems.
HTML
Setting the Appearance of the Page

To set the overall appearance of your Web page, you can choose colors for background, text, hyperlinks, visited links, and active links. You can also choose to add a "wallpaper" or a FrontPage theme. You can not, however, set colors or choose a wallpaper AND add a theme (and although it will allow you to choose both a background color and a wallpaper, the color will be hidden behind the wallpaper and will not display once the page is fully loaded).
Adding a Theme
A theme is like your personal Web interior designer. By choosing a theme, your Web page has complimentary colors and designs applied to it. The image below shows samples of a plain page and the same page with different themes applied:
From Microsoft FrontPage Help While the advantage of using a theme is that design decisions are made for you, there are also some disadvantages to using them:
You can only apply a single theme to your page. Themes use many images that may be stored in a directory/folder (usually named "_themes"). You must understand folder/directory structures and paths, and be able to create the same structure on your Web server and correctly place the files relative to one another as they were on your local workstation. Each time you try another theme, the new images are saved, but the ones placed by previous theme choices aren't deleted, so you can end up with many files that you don't even need in your Web folders/directories.
Setting Page Colors

You can specify the colors of the following elements:
HTML
Backgroundthe color of the "paint" behind the text on your page Textthe color of the words Hyperlinksthe color of the words and phrases you define as being "click-able" Visited hyperlinksthe color that links change to after you have clicked, then returned to that page; it shows that the link has been "used" Active hyperlinksthe color of the currently selected link (only works when the Internet Explorer browser is used)
To set the colors for any of the above-identified areas,

1. From the menu, choose FORMAT : Background. 2. In the center of the dialog box, find the colors section (see example below). Each color has its automatic (or default) color displayed in a drop-down box to the right of the selection. To choose a color other than the automatic selection, click the drop-down box to the right of the color you want to change.
Colors Section of Format Background Dialog Box

3. In the pop-up box, you can either select one of the basic Web colors or click More Colors to see a complete color palette (see example below).
Color Palette
HTML
To choose a color from the color palette, click the desired color, then click OK. Although it may be tempting to choose bright colors, keep in mind that backgrounds generally should be pale (no more than 1-2 "layers" from the center of the color palette), and that text, hyperlinks, and visited links should be different from one another, yet complimentary. For more information on using color, see Creating Effective Visual Aids/Using Color Effectively (NOTE: this in PowerPoint format). Once you have selected non-default colors to use in your Web page, they display in the color box so that they're easy for you to select again for other things (see example below).
Document Colors Dialog Box
Adding Wallpaper
Wallpaper is a graphic that provides your page with a pattern or texture behind the text. There are some wallpaper graphics in Microsoft's Clip Art Gallery, you can find wallpapers on the Internet, or you can create them yourself. Keep in mind, that even though many, many files indicate that they are wallpaper files, most are too colorful or busy to enhance, rather than detract from, your page's content. Your content is the most important, and any color or image choices you make should not detract from that. If you find a wallpaper file on the Internet that you want to use, point to the image and right-click. From the pop-up menu, choose Save Image As. Make sure that you save the file in the same location (folder/directory/disk) as your other Web files. It will retain its name and the file extension (either .jpg or .gif). While you may choose to rename the file, make sure you leave the extension as it is. To add a wallpaper image to your page, from the menu,
1. Choose FORMAT : Background. 2. In the Formatting section of the Format Background dialog box (see example below), click to place a checkmark in the Background picture option.
Format Background (Wallpaper) Picture Dialog Box

3. Click Browse, then go to the location where you saved your wallpaper file. After you have selected the file, click OK. SECAB Vocational Section, Bijapur 169
HTML
Adding and Formatting Text

Typing text in FrontPage is exactly the same as typing in a word processor. However, formatting text requires a different toolsetbut one, nonetheless easy to learn! Please reference the font toolbar (see example below) as you read through the next few sections of the tutorial. TIP: when working in an HTML document, if you press the <Enter> key, you will get a blank line. Often you want a single-spaced appearance instead (e.g., an address block). Rather than pressing <Enter>, press and hold the <Shift> key while pressing <Enter>. NOTE: There are a limited number of "spots" for toolbar icons, therefore, only the ones you have used most frequently are visible. Notice the More Buttons icon, , shown in the example below (look to the far right). If you don't see an icon on your toolbar, look for the More Buttons icon (there are usually two; one toward the center, the other on the far right, of the toolbar). When you click the More Buttons icon, it drops open an additional toolbar where you can click the icon you want to use. This causes that icon to display on your toolbar and another one that you haven't used in a while to "hide."
Font Formatting Toolbar
Style
Generally, you'll want to keep the Style option as Normal. Other Style choices are the heading styles. Heading styles correspond to the HTML <H1> through <H6> tags. Headings are always bold and always have a space both above and below them to separate the heading from the remainder of the text. Heading One correlates to approximately 14-point size, while Heading Six correlates to approximately 8-point size.
Font Face
Font Face defines the style of letters. All of the fonts currently installed on your computer will display in the Font Face drop-down box. Some computer systems show you the font face name in the style that it will cause the letters to display. Font faces can only be shown on computers on which that specific font is installed. This means that if you use a special font and I am viewing your page, but don't have that same font installed on my computer, then my computer will convert that font to whatever it thinks might be close to what you wanted. Therefore, even though the stylistic fonts may be pretty, unless you are very sure of your audience and know what computers they may be using to view your Web page, you should stick with the standards. So what are the standards, you may be asking! Font faces come in two types: serif and sans serif. A serif font face has the "little feet" (the serifs) at the bottoms of most letters; sans serif don't. Online text is generally easier to read if it is in a sans serif font face.
170
HTML
This tutorial is written using Verdana, a font face that was designed specifically to be viewed online. Notice that it is a crisp, clean, widely spaced style of letter. Arial is another sans serif font face that is easy to read. I've changed the font in this bullet point to the Arial font face. Arial is very close to Verdanaabout the only difference is that Verdana is spaced a little looser than Arial. Helvetica is a third sans serif font face choice that you may want to consider. It is smaller than the others and is usually found on Macs. Comic Sans MS is a sans serif font that has a little more "personality" to it. It is generally installed on computers now and would be a good choice if you want a little less traditional feel to your page; however, realize that it is a heavier style (more bold) and could leave your reader feeling that the page is too intense. This bullet point is in the Comic Sans MS font face. If you you really prefer the more traditional font face, a serif font face, you should choose something like Times Roman, Century Schoolbook, or Garamond. This bullet point is written in Times New Roman.
Notice the size of the letters in the text of the four preceding bullet points. Even though all four are written in a normal font size (approximately 12 point), they appear very differentparticularly the sans serif vs. the serif font faces.
Font Size
For the most part, you should leave the text size as Normal. Even when you apply a heading style, the font size remains normal...because it is the normal size for that specific style. Be particularly careful of using small font sizes (10 point is normally the smallest size you should use for regular body text), because they can appear too small to be easily read on some monitor resolution settings.
Font Attributes
Attributes are formatting that you can choose to apply to text. The ones displayed by default are bold, italics, and underline. You should use the underline attribute only after careful consideration and for a particular, specific purpose only. Remember that Web browsers show hyperlinks with underlines (unless the user has chosen to turn off the underline or the page was created in such a way to force the hyperlink underlining to not display). I have seen people attempt to click an underlined word, thinking it was a hyperlink that would take them to another location, then become frustrated when they thought the hyperlink wasn't functioning. To select additional attributes, from the menu, choose, FORMAT : Font. Additional attributes include super- and subscript, and a lot of others that you probably wouldn't normally use in a Web page.
Alignment
By default, each element on a Web page is aligned on the left (meaning that the left margin is straight). You can also choose to center or right align elements. HINT: To center a table on a Web page, click anywhere in the table, then from the menu, choose, TABLE : Table Properties. Choose from the Alignment drop-down menu, center.
171
HTML
Numbering & Bullets

Using the number or the bullet tool to create a numbered or bulleted list causes the text to align correctly under the text rather than wrapping to the left margin under the number or bullet.
More Indent/Less Indent

The indent tools allow you to increase or decrease the indent of a block of text. The indent moves both margins, not just the left margin. For the paragraph below, I used the indent tool, twice:
"Four score and seven years ago, our fathers brought forth to this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal."
Font Color
When you choose a font color as described in the section on Setting the Appearance of a Page, you are selecting a new default colorthe color that will automatically be applied to all text that you type in that particular page. However, you can also selectively apply color to text by highlighting the text, then choosing a color from the Font Color tool. The currently selected color is denoted by the band beneath the "A." You can either choose one of the standard Web colors shown (see example below), or click More Colors and choose a color from the Color Palette.
Font Colors Dialog Box NOTE: if you manually apply a color to text using the font color tool, that choice will override any choice you may have made in the FORMAT : Background menu. While this allows you to selectively change the color of the text, you should be aware that if you "color" a hyperlink then it will no longer appear to the reader as a link, nor will it change to a visited link color; thereby causing the reader to lose a valuable navigation aid.
Using Hyperlinks
Hyperlinks are those areas that you design to be "clicked" in order to take your reader to a different location.
Inserting a Hyperlink
1. Type the text that you want your reader to see. SECAB Vocational Section, Bijapur 172
HTML
2. Highlight the text. 3. Click the Insert Hyperlink tool, .
4. In the "Create Hyperlink" dialog box (see example below):

o
To link to a different web site, in the URL text box, type (or copy and paste) the URL (i.e. http://www.iupui.edu/~webtrain/home.html). Notice in the sample below that FrontPage has already supplied the protocol: http:// To link to a file within your own Web directory/folder, click the hyperlink to a file icon, Change to the directory/folder where you have stored the file, select it, then click OK. To create a hyperlink to an E-mail address (so that the reader can click and send an E-mail message), click the hyperlink that sends E-mail icon, dialog box (e.g., jsmith@mystuff.com), then click OK. . Type the complete E-mail address in the .
Create Hyperlink Dialog Box
Removing a Hyperlink
1. Click anywhere within the word or phrase containing the hyperlink. 2. Click the Insert Hyperlink tool, .
173
HTML
3. Delete the text in the URL box by highlighting the text and pressing the <Delete> key on your keyboard, then press OK.
Editing a Hyperlink
1. Click anywhere within the word or phrase containing the hyperlink. 2. Click the Insert Hyperlink tool, .
3. Edit the text in the URL box by highlighting the text and pressing the <Delete> key on your keyboard. Retype the information, then press OK.
Using Bookmarks
A hyperlink allows your reader to jump to a specific location within a Web file. The destination of this type of link is, in HTML "language," a named anchor. FrontPage calls named anchors, bookmarks. These types of links have two components: the link and the destination. You should create the bookmark before you create the hyperlink.
Creating a Bookmark
1. Insert your cursor at the point in the document where you want the reader to be taken when the hyperlink is clicked. You may want to consider adding the bookmark at the end of the line above where you want the destination to be in order to provide a bit of a margin above the line where you want the reader to begin reading. 2. From the menu, choose, INSERT : Bookmark. 3. In the Bookmark Name text box, type the name of the Bookmark. Name the bookmark something descriptive, but simple (see example below).
Bookmark Dialog Box

HTML
Inserting a Hyperlink to a Bookmarked Destination

To insert a hyperlink to a named destination,
1. At the point in the document where you want the hyperlink, type the text that you want your reader to see. 2. Highlight the text. 3. Click the Insert Hyperlink tool, .
4. In the "Create Hyperlink" dialog box (see example below),

o
To link to a specific spot in the same file, click the Bookmark drop-down box, and select the name of the bookmark, then click OK. To link to a specific spot in a different file, first select the file as instructed above. Then go back into the hyperlink, as if you were going to edit it, but choose the name from the Bookmark dropdown list.
Select Hyperlink and Bookmark Dialog Box
Using Images
There are many sources for images to use in your Web pages. You may purchase stock images, scan diagrams and photographs, find images on the Web, or create your own with a graphics application. When using stock images or locating images on the Web, it is important that you are certain you have permission to use them on your Web site. For purchased stock images, you'll need to read the license agreement to know under what circumstances you can use the images, whether you have permission to modify the images, and the type of credits, if any, you must provide. Most sites on the Internet also have a "terms of use" statement somewhere on the site. When in doubt, don't use. There are too many sources for images for you to use something without permission and infringe upon the rights of the copyright holder. To save an image you find on the Web (assuming that you clearly have permission from the creator to use it and are not infringing on the copyright), point to the image and right-click (Windows users) or hold the mouse button down (Mac users), then choose Save Image As.
HTML
Image Types
Images that are viewable on the Web must be in one of three formats: gif, jpg, or png. We're going to focus on gif and jpg formats in this tutorial. Both gif and jpg are image file compression utilitiesthey decrease the size of the file so that it loads more efficiently when viewed on the Web. Jpg (Joint Photographic Experts Group) files are used with photographic quality images. The files are compressed by removing a few of the millions of colors present in the image that our eyes can't see anyway. Gif (Graphics Interchange Format) are used with images with solid blocks of color such as clip art, balls, bullets, cubes, and bars. The compression occurs by recording a marker for each unique color in the image, rather than retaining every single color. AOL has a proprietary image formatartthat you may encounter. The image reader used with the AOL Web browser is the only graphics application that understands the art format, so if you are browsing the Web using the AOL default Web browser and save imges, only your AOL system will recognize the images. You can always use AOL as your Internet Service Provider, but then use a stand-alone version of your browser in order to avoid this problem. Clip art files are generally in one of two formats: wmf or bmp. Both file types are Windows' file formats, so FrontPage can read both. It also has the capability of converting either file type to a Web-readable format, which is important because unless your readers happen to have that particular clip art image installed on their computers, they will be unable to view the image unless it is converted.
Inserting Clip Art

To insert a clip art image into your Web page,
1. From the menu, choose INSERT : Picture : Clip Art. 2. From the Clip Art Gallery dialog box, click the icon for the category from which you want to select. 3. Click on the image you want to select. In the pop-up box click the first option to insert the image into the page (see example below).
176
HTML
Clip Art Gallery
Converting Clip Art

Remember that clip art images are in Windows file formats rather than gif or jpg, so it is necessary for you to convert them to a Web-readable format. To convert a clip art image,
1. Click once on the image so that it has handles (see example below)
Example of "Handles" Denoting Image Selection

2. Right-click and from the pop-up menu, choose Picture Properties. 3. In the Picture Properties, click in the radio button to select gif, then click OK (see example below).
Picture Properties Dialog Box

HTML
Inserting Other Images

To insert non-clip art images into your Web page, choose from the menu, INSERT : Picture : From File. Locate and select the file, then click OK. You can also click the Insert Picture icon, , to insert an image.
Occasionally, you will see the Picture dialog box (see example below) when you attempt to insert an image, particularly if you cancel the insert image action. From the Picture dialog box, click the Clip Art button, , to open the Clip Art Gallery or click the select file icon, files for the image you want. , in order to search your
Picture Dialog Box
Sizing and Placing Images

Although it is possible to re-size an image after it is inserted into the Web document by dragging the handles, you shouldn't do that unless it is a relatively small adjustment. While altering the image in this way makes the image display smaller or larger on the screen, it doesn't physically alter the file size. Increasing the image display size in this matter may cause the image to pixelateto look grainy or "spotty." Decreasing the image display size by dragging the handles causes it to display smaller on the screen, but since the file size itself was not altered, it still takes as long for the reader to download as it would have you had kept it its original size. For anything other than a small adjustment, it is always better to open the image in a graphics application and physically resize it. To move the image to another location in your page, click once on the image so that it has handles. Then, press and drag the image to a new location on the page (although you may find it easier to simply delete (or cut) the image and place (or paste) it into the new location. Be careful not to accidentally re-size the image by pressing and dragging on a handle. Dragging a two-headed arrow resizes an image; dragging a four-headed arrow moves the image.
HTML
Aligning an image can often be a bit frustrating. You can seldom place an image just where you want it, unless it's left-aligned, centered, or right-aligned. By default, images are left aligned, as are all elements on a Web page. To center an image, click on the image so that it has handles, then click the center alignment tool (or for more precise control, insert the image into a single cell, single row table and align that). When adding text near an image, notice that a long line of text wraps beneath the image rather than flowing so that there are multiple lines to the side of an image (see example below).
This is a picture of a church in the Alps. Normal
To cause the text to flow beside the image (see examples below), point to the image on your page and right-click. From the pop-up menu, choose Picture Properties.
This is a picture of a church in the Alps. This is a picture of a church in the Alps.
Right-aligned (the image is on the right)
Left-aligned (the image is on the left)
In the Picture Properties dialog box (see example below), click the Appearance tab and from the dropdown Alignment box, choose either Left or Right aligned. To create a buffer/margin around the image choose Horizontal/Vertical spacing (numbers are in pixels)just play with the numbers until you get the spacing you like. NOTE: horizontal spacing puts equal amounts of buffer space to the left and to the right of the image; vertical spacing puts equal amounts of buffer space both above and below the imge.
Picture Properties
HTML
Using Bullets and Numbered Lists

Bulleted and numbered lists are an effective way to organize your material for optimal reader "scanability." To insert bullets or numbers as you type:
1. Place the cursor in the paragraph in which you want the list to start (it doesn't have to be at the beginning of the sentence; simply in the paragraph). 2. Click the Bullet or Number tool, , and type the text, then press the <ENTER> key on your keyboard.
3. When you press ENTER to begin the next paragraph, the next bullet or number automatically appears.
When you begin the first paragraph that you don't want to have a bullet or number, click the tool to turn off the feature, or press the <ENTER> key on your keyboard to revert to normal formatting. You can affect indentation of lists by clicking the Decrease Indent tool or Increase Indent tool, respectively. To use graphical bullets or to change the number style (i.e. roman, upper case alphabetic, lower case alphabetic, etc.), choose from the menu, FORMAT : Bullets and Numbering.
The Picture Bullets tab of the Bullets and Numbering dialog box (see example below) allows you to choose a graphical bullet. To choose a graphical bullet, click the Browse button, select the image file, then click OK. The graphical bullet will be placed to the left of whatever paragraph your cursor is currently in. Each time you press the <ENTER> key on your keyboard, another bullet will appear for the next item in the list. Press the <ENTER> key on your keyboard twice at the end of the last item in the list and the bullet formatting will revert to normal formatting.
180
HTML
Graphical Bullets Dialog Box

The Plain Bullets tab in the Bullets and Numbering dialog box (see example below) allows you to choose the style of bullet you want. After making your selection, click OK.
181
HTML
Plain Bullets Dialog Box

The Numbers tab in the Bullets and Numbering dialog box (see example below) allows you to select a nonarabic number style or to select a different starting number other than 1. After selecting the style of number and the starting number you want, click OK.
Numbers Dialog Box NOTE: Although it is possible to create nested lists, e.g., outlines, the HTML editor may "get confused," making it difficult to get the formatting, numbering, and indentation you desire. Until you feel comfortable working directly with HTML tags, you may want to avoid nested lists.
Using Tables
Tables are useful to organize information. They are especially beneficial in creating the appearance of multi-columned text. There is no way to "tab" in HTML and you should avoid using the Space Bar to control spacing since that will result in a Web page that looks good to your reader only if he/she has the same computer settings as you do. The alternative is to create a borderles table. Simple tables are easy to create; however, it has been my experience that creating or editing a complex table may require direct HTML tag manipulation.
Creating a Table
To insert a table:
1. Click the Insert Table tool, SECAB Vocational Section, Bijapur . 182
HTML
2. Press and drag the Table Size pop-up box (see example below) to select the number of rows and columns you want in your table. When you release the mouse button, a table of the proportions selected will display in your document.
Table Size Dialog Box NOTE: It is best if you can decide ahead of time the number of columnsit will save you a step during development. The table will show on the Web page during development with dotted lines (see example below) so that you can more easily work with the table. The dotted lines indicate that the lines will NOT display on the Web.
Sample Working Table Grid
Working with Tables

NOTE: Any time you wish to work with a table, you must click within the table to place the cursor inside the table. Otherwise, you will find that the Table menu options are "greyed out" and unavailable to you. To adjust the column widths and row heights, point your mouse at the border you wish to adjust. Move the mouse very slowly until you see the cursor change to a double headed arrow (it's quite sensitive; move it slowly), then press and drag to the new dimensions. To enter data into the table, click your mouse cursor in a cell and begin typing. To move from cell to cell, press the <TAB> key on your keyboard, or click the mouse cursor in the cell to which you want to move. To add an additional table row at the end of the table, position your cursor in the lower, right corner cell and press the <TAB> key on your keyboard. To select a table/column/row/cell, click in the row or column that you wish to select, then from the menu choose, TABLE : Select : Table/Column/Row/Cell (whichever one you wish to select). To insert a row or column, click in the row or column beside which you wish to make an insertion. From the menu, choose TABLE : Insert : Rows or Column. From the dialog box, select either row or column. The example below has Columns selected; therefore, the Location indicates a Left of selection or a Right
HTML
of selection insertion option. If Rows had been selected, the Location would have adjusted to show Above or Below options.
Insert Rows or Columns Dialog Box To delete individual cells, complete rows or complete columns, position your cursor in the appropriate location (in the cell, in the row, or in the column), then select the element (as previously described) that you want to delete. After the element is selected, from the menu, choose TABLE : Delete Cells. To merge cells, select the cells as previously described, then from the menu, choose TABLE : Merge Cells. To split cells, place the cursor in the cell you wish to split. Then from the menu, choose TABLE : Split Cells. In the dialog box (see example below), choose to split the cell into columns or into rows, and specify the number of columns or rows you wish.
Split Cells Dialog Box
Table Toolbar
184
HTML
The Table Toolbar gives you easy access to many of the same functions that you can perform through the Table menu. Depending upon how the FrontPage options are set on your computer, the Table Toolbar may display anytime you are working with tables. If it doesn't and you want it to, you can choose from the menu, VIEW : Toolbars : Tables. In addition to the table functions that you can access through the menu, you can:
Add a table or additional cells within a table. Click the pencil cursor, . Press and drag the pencil (cursor) icon vertically or horizontally to draw a new cell within your table. If you drag the pencil (cursor) icon diagonally, you will create a new table, either separately, or within an existing table, depending upon the location of the cursor when you start dragging. Delete a cell wall from an existing table. Click the eraser icon, . Press and drag over the cell border (you will see the lines that will be deleted as red) you want to delete; when you release the mouse, the borders will be deleted.
To "turn off" either the pencil or the eraser tool, press the <ESC> key on your keyboard.
Distribute columns or rows evenly. After you have adjusted the table borders several times, you may find that you simply want them back, evenly arranged to "start over." Highlight the row or column that you want to evenly distribute, then click the appropriate distribute evenly icon, .
Size the table according to the contents within it. Tables are always inserted full-width. Rather than try to guess how wide the table must be to accomodate the contents, click the Auto Fit icon, the .
Table & Cell Properties

You can set table properties such as background and border colors, spacing, and text alignment are set in the Table Properties. Make sure that your cursor is within the table. From the menu, choose , TABLE : Table Properties (see example below).
185
HTML
Table Properties Dialog Box In the Table Properties dialog box, you can make many choices about the table, but there are only a few that you will normally need to do anything with:
Alignment. This option will position the table on the Web page. Width. This option specifies the width of the overall table. Setting the table width in a percentage is more flexible from a design point of view (tables with fixed pixels sizes do not adjust with the dimensions of the user's browser window, and can cause a horizontal scroll bar if the table is wider than the browser window).
FrontPage has quirk, in that if you press and drag to adjust the size of a table's cell or margins, it changes any percent width setting to a specific number of pixels. My recommendation is that you set the size of your table and the cells within it, then enter the table properties dialog box and change the pixel setting to percent (just click the other radio button).
Height. In general, you should not specify a height for your table. Let it adjust according to the needs of the table as displayed on your reader's monitor. Otherwise, you may end up with lots of "white space" that is not necessary. Cell padding & cell spacing. Cell padding is the amount of space between the text and the wall of the cell. Cell spacing is the width of the actual cell wall. In the two tables below, notice how the cellpadding and cellspacing values effect the appearance of the table (NOTE: the HTML code uses "cellpadding" and "cellspacing" for the terms): cellpadding of 15 pixels and
This table has...
186
HTML
cellspacing of 0 pixels....
Notice how far the words are from the edge of the cell.
This table has...
and cellpadding of 0 pixels Notice the width of the cell walls and how close to the cell walls the text is.
cellspacing of 15 pixels....
Borders size and color. It is important to remember that some older browsers are unable to display a border color. Background color. This option sets the color for the entire table. If you want to selectively color the table cells, use the Cell Properties, rather than Table Properties.
To control cell properties such as text alignment within the cell and cell background color, make sure the cursor is within the cell whose options you want to set. Then from the menu, choose TABLE : Cell Properties. One of the more important options in the Cell Properties is the cell vertical alignment. Notice in the example below how much easier it is to read the contents of the last row (that is top aligned) than to read the top row that has the default, middle alignment:
This cell has multiple lines of information. Notice how the cell on the left is centered, vertically, making the table contents somewhat difficult to read.
This cell has very little information.
This cell has very little SECAB Vocational Section, Bijapur
This cell has multiple 187
HTML
information.
lines of information. Notice how the cell on the left is centered, vertically, making the table contents somewhat difficult to read.
Using FrontPage with Existing Documents

If you have an existing document, created in a word processing application, you can use it with FrontPage to create a Web document easily without re-typing the text. To convert the document from a word processing document to an HTML document, you must use the INSERT menu, rather than simply opening the file. (If you choose FILE : Open, the creating application will start and load the document, rather than opening it in FrontPage.) To insert a pre-existing document, from the menu, choose INSERT : File. Browse for your file, then select and open it. Once it appears in the FrontPage window, it will have been converted to an HTML document for you. You will likely need to make some formatting repairs, particularly if the formatting is complex. However, it may prevent you having to re-type the entire thing. If FrontPage appears to have difficulty opening your document, open it in its creating application, and resave it as RTF (Rich Text Format) format rather than the regular WordPerfect, Word, or Works file format. You can find RTF in the Save As option under the drop-down "File Format" option. Rich text is a "generic" file format that is readable by almost any application.
Advanced and Special Features

In addition to being an HTML editor, FrontPage is a powerful Web management tool. In the File menu, you will see the Open /Close Web options. These options allow you to create a Web and manage it activities. In the View menu, are other options that work hand-in-hand with the Web management. Viewing reports, folders, hyperlinks, etc. are extremely useful utilities when you are managing an entire Web with multiple files and directories. In the Insert menu are options for Component, Form, and Advanced. Many of these options are somewhat misleading in that they make it appear that you can create forms and add counters to your Web page. This is trueonly if your Web server supports these features and allows (or provides) you with the scripting to make these features functional.
188

HTML (Web Designing) Notes

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML (Web Designing) Notes

Enviado por

Direitos autorais:

Formatos disponíveis

Lecturer: HABIBULLA.A.

IV SEM Computer Technique

IV SEM Computer Technique

1.3 What an HTML Document is:

1.4 HTML Editor:

1.5 Tags (also known as "HTML elements") and Page Structure:

1.6 HTML tags can be of two types. They are

IV SEM Computer Technique

1.7 The minimal HTML Document:

SECAB Vocational Section, Bijapur

IV SEM Computer Technique

SECAB Vocational Section, Bijapur

IV SEM Computer Technique

SECAB Vocational Section, Bijapur

IV SEM Computer Technique

The pre element is often used to display computer code:

SECAB Vocational Section, Bijapur

IV SEM Computer Technique

OUTPUT: A list inside a list:

Black tea Green tea

IV SEM Computer Technique

Black tea Green tea China Africa

SECAB Vocational Section, Bijapur

IV SEM Computer Technique

SECAB Vocational Section, Bijapur

IV SEM Computer Technique

OUTPUT: To break lines in a paragraph, use the br element.

OUTPUT: This is some text.

OUTPUT: This is some text.

OUTPUT: This is some text.

This is some text.

IV SEM Computer Technique

OUTPUT: This is some text. This is some text.

IV SEM Computer Technique

IV SEM Computer Technique

34 38 60 62 160 161 162 163 164 165 166 167 168

" & < >

SECAB Vocational Section, Bijapur

IV SEM Computer Technique

180 181 182 183 184 185 186 187

acute micro para middot cedil sup1 ordm raquo

188 189 190 191

frac14 frac12 frac34 iquest

192 193 194 195 196

Agrave Aacute Acirc Atilde Auml

217 218 219 220 221 222 223 224 225

Ugrave Uacute Ucirc Uuml Yacute

198 199 200 201

AElig Ccedil Egrave Eacute

THORN szlig agrave aacute

SECAB Vocational Section, Bijapur

IV SEM Computer Technique

226 227 228

acirc atilde auml

251 252 253 254 255 338

ucirc uuml yacute thorn yuml OElig

SECAB Vocational Section, Bijapur

IV SEM Computer Technique

966 967 968 969 977 978 982

phi chi psi omega

thetasym upsih piv

omicron pi rho sigmaf sigma tau upsilon

8230 hellip 8240 permil 8242 prime 8243 Prime

SECAB Vocational Section, Bijapur