NETWORK COMPUTING Mod 1

NETWORK COMPUTING (RT605)
Module 1
HTML Documents Basic Tags for Font & Paragraph Formatting Lists, Tables, Frames, Image Maps. Cascading Style Sheets Style Element, Inline style sheets, Embedded style sheets, External Style sheets, CLASS Attribute, Absolute and relative positioning of elements, DIV & SPAN Tags. INTERNET Introduction The Internet is a global system of interconnected computer networks that use the standard Internet Protocol Suite (TCP/IP) to facilitate data transmission and exchange. It is a worldwide network of computer networks that consists of millions of private, public, academic, business, and government networks. The Internet began in the early 1960s, as an experimental four-computer network called ARPANET (Advanced Research Projects Agency), which was designed by the U.S. Defence Department so that research scientists could communicate. The early ARPANET ran on the Network Control Program (NCP), implementing the host-to-host connectivity and switching layers of the protocol stack. Later these networks switched to TCP/IP. TCP/IP is the protocol used to send data all around the Internet. Transmission Control Protocol (TCP) is a set of communication protocols and IP is a unique address. Each machine connected to the Internet must have a unique IP address, which identifies that machine. Commercial organizations began to recognize the use of such a network which converted the whole world into a Global Village and allowed almost instant access to business or commerce data and a host of other services such as E-Mail and E-Commerce. The rapid growth of the Internet was due to the establishment and expansion of fast and reliable networks. Internet Service Providers (ISP) gave access to the Internet via Gateways. Using ISP gateways it is possible to route business or commerce data from one point of the globe to another by using a heterogeneous mix of networks owned by different networking firms who have worked out an agreement between themselves on the terms and costs of usage. An ISPs gateway generally consists of a server with a permanent connection to the Internet. The Servers connection to the Internet is called its Internet Pipeline. The Internet and the World Wide Web are not one and the same. The Internet is a global data communications system. It is a hardware and software infrastructure that provides connectivity between computers. In contrast, the Web is one of the services communicated via the Internet. It is a collection of interconnected documents and other resources, linked by hyperlinks and Uniform Resource Locators (URLs) / Uniform Resource Identifiers (URIs). The Internet consists of two types of computers: Servers: Computers which offer information to be read. Servers run special software (Web Server software) that allows them to respond to Client requests for information. Eg: Internet Information Server (IIS), Apache Web Server and Microsoft Personal Web Server. Clients: Computers that read the available information. Clients run special software (Browser software) that allows them to locate the appropriate server, query the server for the information to be read and display the response from the server. Eg: Internet Explorer, Mozilla Firefox, Netscape and Google Chrome. HTML
Network Computing (SRP) Module 1
Introduction HyperText Markup Language HTML is the predominant markup language used to develop web pages. HTML is an application of SGML. SGML is an ISO-standard technology for the definition of device-independent, system-independent methods of representing texts in electronic form. HTML is the basic building-blocks of web pages. HTML documents are also called Web pages. HMTL contains a predefined set of markup tags. HTML uses markup tags to describe web pages. The markup tags tell the Web browser how to display the page. HTML markup tags are usually called HTML tags. HTML documents contain HTML tags and plain text. HTML tags are keywords surrounded by angle brackets like <html> The first tag in a pair is the start tag (opening tag) and the second tag is the end tag (closing tag). HTML is written in the form of HTML elements consisting of tags. HTML tags are not case sensitive. World Wide Web Consortium (W3C) recommends lowercase in HTML 4 and future versions of HTML. HTML is not a programming language, it is a markup language. HTML files can be created using a simple text editor. HTML files have an htm or html file extension. The web browser (like Internet Explorer) uses the tags to interpret the content of the page. It reads HTML documents and composes them into visual or audible web pages. The browser does not display the HTML tags. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links and other items. It can embed scripts in languages such as JavaScript. HTML supports the use of Cascading Style Sheets (CSS).
HTML Tags
Network Computing (SRP)
Module 1
HTML tags are instructions that are embedded directly into the text of the document. An HTML tag tells the Web browser how to display that particular text. The tags open with an open angle bracket ( < ) and close with a close angle bracket ( > ). These tags are predefined and each of them serves a special purpose. HTML tags are not case sensitive. World Wide Web Consortium (W3C) recommends lowercase in HTML 4 and future versions of HTML. HTML tags can be of 2 types: Paired Tags and Singular Tags Paired Tags: A paired tag encloses a piece of text with a start tag and a companion close tag. The effect of the paired tags is applied only to the text they contain. The opening tag activates the effect and the closing tag turns the effect off. The closing tag's name is preceded by a slash character ( / ). Eg: <b> This text is rendered in bold </b> Singular Tags: The singular tag or stand alone tag does not have a companion tag. Eg: <br> This tag will insert a line break.
HTML Elements HTML documents are composed entirely of HTML elements. Generally, they have three components: a pair of element tags, a start tag and end tag; some element attributes within the start tag; and finally, any textual and graphical content between the start and end tags. An HTML element starts with a start tag / opening tag. An HTML element ends with an end tag / closing tag. The HTML element content is everything between and including the tags. Each tag is enclosed in angle brackets. The name of the HTML element is also the name of the tag. The general form of an HTML element is: <tag attribute1=value1 attribute2=value2>content to be rendered</tag> Eg: <font size=3 color=red> This is some text </font>
Empty HTML Elements: HTML elements with no content. Empty elements can be closed in the start tag. Nested HTML Elements: Most HTML elements can be nested (can contain other HTML elements). HTML documents consist of nested HTML elements. Eg: <html> <body> <p>This is my first paragraph </p> </body> </html>
The <p> element: The <p> element defines a paragraph in the HTML document. The element has a start tag <p> and an end tag </p>. The element content is: This is my first paragraph.
Module 1
The <body> element: The <body> element defines the body of the HTML document. The element has a start tag <body> and an end tag </body>. The element content is another HTML element (a p element). The <html> element: The <html> element defines the whole HTML document. The element has a start tag <html> and an end tag </html>. The element content is another HTML element (the body element).
HTML Attributes Attributes provide additional information about an element. Attributes are written immediately following the tag, separated by a space. Attributes are always specified in the start tag of an element after the element's name. Attributes come in name/value pairs like: name=value. Multiple attributes can be associated with a tag, also separated by a space. The value may be enclosed in single or double quotes. Eg: <font size=3 color=red>This is some text!</font>
Structure of an HTML Program The entire web page is enclosed within <html> </html> tags. The <html> tag tells the browser that this is an HTML document. The html element is the outermost element in HTML documents. The html element is also known as the root element. Within these tags 2 distinct sections are created using the <head> </head> tags and <body> </body> tags.
Document Head Information placed in this section is essential to the inner workings of the document and has little to do with the content of the document. The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: <base>, <link>, <meta>, <script>, <style> and <title>. With the exception of a few (like <title> </title>) tags, the information placed within the <head> </head> tags is not displayed in the browser. <head> tag indicates the start of the head section. </head> tag indicates the end of the head section.
The <head> tag supports the following standard attributes: Attribute

Value
Module 1
Description 4
dir
rtl ltr language_code
Specifies the text direction for the content in an element Specifies a language code for the content in an element
lang
The <head> tag does not support any event attributes.
Document Body The body element defines the document's body. Information placed in this section is mainly displayed in the browser. The major contents of the web page come in this section. It contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. Page defaults like background color, text color and font size can be specified as attributes of the <body> tag. <body> tag indicates the start of the body section. </body> tag indicates the end of the body section.
The <body> tag supports the following standard attributes: Attribute class dir id lang style background bgcolor text Value classname rtl ltr id language_code style_definition URL colorname colorname Description Specifies a classname for an element Specifies the text direction for the content in an element Specifies a unique id for an element Specifies a language code for the content in an element Specifies an inline style for an element Specifies a background image for a document. User can specify the file name or the relative file path Specifies the background color of a document. Color name or its equivalent hexadecimal value is specified. Specifies the color of the text in a document
Eg: <body background=sample.gif> The <body> tag supports the following event attributes:
Module 1
Attribute onclick ondblclick onload onmouseover onkeypress
Value script script script script script
Description Script to be run on a mouse click Script to be run on a mouse double-click Script to be run when a document load Script to be run when mouse pointer moves over an element Script to be run when a key is pressed and released
A Simple HTML Document <html>
<head> <title>Title of the document</title> </head>
<body> The content of the document </body>
</html>
Title The <title> tag defines the title of the document. The title describes what the web page is about. Text included between the <title> and </title> tags shows up in the title bar of the browser window. It provides a title for the page when it is added to favourites. It displays a title for the page in search-engine results. The <title> tag does not support any event attributes. Eg: <head> <title> Simple HTML </title> </head> Footer
Module 1
The footer is used to display information at the foot of the web page. Copyright information, contact details of the author or owner of the web page etc are traditionally placed at the foot of the web page. The HTML tags used are <address> and </address>. This tag should ideally be placed immediately after the last line of the textual content of the web page. The text contained within these tags is displayed in italics. Most browsers will also add a line break before and after the address element. Eg: <body> <address> Copyright Microsoft </address> </body> HTML Comment The comment tag is used to insert a comment in the source code. A comment will be ignored by the browser. We can use comments to explain our code, which can help us when we edit the source code at a later date. The comment is enclosed in the symbols . We can also store programspecific information inside comments. In this case they will not be visible for the user, but they are still available to the program. A good practice is to comment the text inside scripts and style elements to prevent older browsers, that do not support scripting or styles, from showing it as plain text. Eg: 
Basic HTML Tags for Text Formatting Paragraph Breaks <p> </p>
The <p> tag defines a paragraph. The p element automatically creates some space before and after itself. A blank line always separates paragraphs in textual material. The browser moves onto a new line, skipping the line between the previous line and the new line. If we insert multiple empty paragraphs in succession, the browsers display these with only one blank line between them. Eg: <p> This is some text in a paragraph. </p> This is a text in another paragraph. Output : This is some text in a paragraph. This is a text in another paragraph.
Line Breaks <br> The <br> tag inserts a single line break. The line breaks allow us to decide where the text will break on a line. The <br> tag is an empty tag which means that it has no end tag. Multiple consecutive <br> tags will cause multiple line breaks. Eg: Sachin<br>Mumbai Indians,<br>Mumbai,<br> <br>India
Output: Sachin Mumbai Indians, Mumbai,
India
Emphasizing Tags Heading Styles Heading styles help to break the textual content into logical sections with visual appeal. The <h1> to <h6> tags are used to define HTML headings. The heading elements are used to create headlines in documents. Six different levels of headings are supported: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. <h1> level headings are larger and generally bolder than the other. The importance decreases uniformly from <h1> to <h6>. <h1> should be used as the highest level of heading, <h2> as the next highest and so on. Eg: <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> Output:
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Drawing Lines
Module 1
<hr> The <hr> tag is used to draw lines and 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. It is often useful to break up the document into visually distinct regions. The <hr> element causes the browser to display a horizontal line (rule) in our document. Eg: Horizontal Line Drawn <hr align=left width=200 size=4/> Output: Horizontal Line Drawn The align attribute sets its alignment to left, right, or center. The width attribute sets the bar's width in pixels or percentage. The size attribute sets the bar's thickness (height) in pixels.
Text Styles Bold <b> </b>
The <b> tag is used to display the text in bold face. The browser renders the corresponding text as bold text. Eg: <b> This text is in bold </b> Output: This text is in bold Italics <i> </i>
The <i> tag is used to display the text in italics. The browser renders the text as italic text. Eg: <i> This text is in italics </i> Output: This text is in italics Underline <u> </u>
The <u> tag is used to display the text as underlined. The browser renders the text as underlined text. Eg: <u> This text is underlined </u> Output: This text is underlined
Big, Small, Pre, Superscript and Subscript
Module 1
<big> </big>
Renders as bigger text
<small> </small> Renders as smaller text <sup> </sup> Tag defines superscript text. It appears half a character above the baseline. <sub> </sub> Tag defines subscript text. Subscript text appears half a character below the baseline <pre> </pre> Preformatted Tag renders the text as it is entered, including spaces and line breaks. Eg: This is superscript This is subscript t e x t
This is p r e f o r m a t t e d
Text Effects Centering (Text, Images) <center> </center>
The <center> tags are used to center everything found between them, including text and other elements. Elements like lists, images and tables can be centered using this tag. Eg: <center> Welcome to the center tag </center> Output: Welcome to the center tag
Spacing (Indenting Text) <spacer> The <spacer> tag is used to insert blank spaces in an html document. Eg: Welcome <spacer type=horizontal size=90> to the spacer tag Output: Welcome to the spacer tag
Font <font> </font>
The <font> tag specifies the font face, font size, and font color of text. Use of different fonts and colors helps to draw the viewers attention to certain key areas in the web page. It helps to make the website more readable and attractive. Eg: <font face=Comic Sans MS size=4 color=red>This is some text in red</font>
Module 1
10
Output: This is some text in red 1. The face attribute sets the font to the specified font name. The value can be the name of a valid font supported by the system. face=arial or font=tahoma
2. The size attribute sets the size of the text. The size can take values between 1 and 7. Default size is 3. The size can also be set relative to the default size. size=+x size=+3 where x is any integer value that will be added to the default value. displays a size of 6.
3. The color attribute specifies the color of text. The value can be a valid color name or its hexadecimal equivalent. color=red * or color=#FF0000
The use of this HTML element will be phased out in the future and replaced with style sheets.
Links ( Anchor ) <a> </a>
The anchor tag is used to create hyperlinks. HTML allows linking to other documents as well as images. The text or image that provides such linkages is called Hypertext or Hyperlink or Hotspot. A link is simply a unidirectional pointer from the source document that contains the link to some destination. In hypertext, the end points of a link typically are called anchors. The hyperlink text / image is underlined. The text between the anchor tags appears in blue color. It is the default color for hyperlinks. It can be overridden by using styles. A visited link is underlined and purple. An active link is underlined and red. On mouse over, the standard arrow shaped mouse cursor changes to the shape of a hand. Syntax: <a href=filename.htm> Hyperlink Text </a> Eg: <a href=http://www.w3schools.com>Visit W3Schools</a> The href attribute is set to the URL (uniform resource locator) of the target resource. Basically, it is the address of the document to link to. The link appears in blue color by default. To change the link colors, the following attributes can be specified with the <body> tag. The user can specify the color name or the equivalent hexadecimal value. Attribute link
Value colorname
Module 1
Description Specifies the default color of unvisited links 11
in a document alink vlink colorname colorname Specifies the color of an active link in a document Specifies the color of the visited links in a document
Hyperlinks can be of 2 types: External Document References : Links to an external document Internal Document References: Links to a specific location within the same document.
External Document References <a href=home.htm> Visit my home page </a> Visit my home page becomes a hyperlink and links to another document named home.htm. This file is present in the current working directory. If the file is not present in the current directory, a relative or absolute path can be specified. The name attribute of the anchor tag is used to jump to a particular location within a web page or document. By default the hyperlink takes the user to the beginning of the new web page. To enable a jump to a specific location on a web page, named anchors can be set up. These anchors target the hyperlinks to the specified location or section of the document. So we can create a bookmark inside a document, by using the name attribute. Syntax: <a name=location_name > . . . </a> <a href=file_name.htm#location_name> . . . </a>
Eg:
<a name=tips> Useful Tips Section </a> <a href=usefultips.htm#tips> Visit the Useful Tips Section </a>
An anchor named tips is set up in the usefultips.htm file. When the user clicks the Visit the Useful Tips Section link, the browser loads the usefultips.htm page and the focus is set to the anchor named tips.
Internal Document References The name attribute of the anchor tag is used to jump to a particular location within a web page or document. To enable a jump to a specific location on a web page, named anchors can be set up. So we can create a bookmark inside a document, by using the name attribute. These anchors target the hyperlinks to the specified location or section of the document. Syntax: <a name=location_name > . . . </a> <a href=#location_name> . . . </a>
12
Eg:
<a name=topics> Topics Section </a> <a href=#topics> View All Topics </a>
An anchor named topics is set up in the current document. When the user clicks the View All Topics link, the browser sets the focus to the anchor named topics, which is present in the same webpage. Named anchors are often used to create table of contents at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document. If the browser does not find the named anchor specified, it goes to the top of the document. No error occurs. The target attribute can be used to specify where to open the linked document. It takes the values _blank, _parent, _self, _top. If target is set with _blank value, then the web page opens in a new browser window.
Lists Lists are block-level elements. They can be nested and their items can contain other blocklevel structures, such as paragraphs. HTML supplies several list elements. Most list elements are composed of one or more list item elements. The list item element comprises of <li> and </li> tags and a list item text. The <li> tag defines a list item. The <li> tag is used in both ordered and unordered lists. HTML defines 3 types of lists: 1. Unordered List (Bullets) 2. Ordered List (Numbered) 3. Definition List 1. Unordered List (Bullets) <ul> </ul>
An unordered list, signified by <ul> and </ul> tags, is used for lists of items in which the ordering is not specific. A browser typically adds a list mark such as a bullet (filled circle, square, or empty circle) for each item and indents the list. Unordered lists use the type attribute to specify the type of the bullet. Bulleted lists are generally used when providing a list of non sequential items. The list item <li> tag is used to define each item in the list. Syntax: <ul> <li>List item1</li> <li>List item2</li> <li>List item3</li> </ul> 13
Module 1
Eg:
<ul> <li>Sony</li> <li>Dell</li> <li>Samsung</li> </ul>
Output: Eg using type=fillround <ul type=fillround> <li>Sony</li> <li>Dell</li> <li>Samsung</li> </ul> Sony Dell Samsung Sony Dell Samsung Output
Eg using type=square <ul type=square> <li>Sony</li> <li>Dell</li> <li>Samsung</li> </ul>
Output
Sony Dell Samsung
2. Ordered List (Numbered)
<ol>
</ol>
An ordered list starts with the <ol> and ends with the </ol> tags. It defines a list in which order matters. Ordered lists have elements that are preceded by numbers or letters and are meant to provide a sequence of ordered steps for an activity. Ordering typically is rendered by a numbering scheme. Ordered lists use the type attribute to specify the type of numbering scheme to be used. Items in this list are numbered automatically by the browser. The list item <li> tag is used to define each item in the list.
14
Syntax:
<ol> <li>List item1</li> <li>List item2</li> <li>List item3</li> </ol>
Eg:
<ol> <li>Sony</li> <li>Dell</li> <li>Samsung</li> </ol>
Output: 1. Sony 2. Dell 3. Samsung
Type type=1 type=A type=a type=I type=i type=1 start=3 type=i start=4 type=a start=3
Numbering Scheme Numerals Uppercase letters Lowercase letters Uppercase Roman Numerals Lowercase Roman Numerals Numerals Lowercase Roman Numerals Lowercase letters
Number 1, 2, 3 . . . A, B, C . . . a, b, c . . . I, II, III . . . i, ii, iii . . . 3, 4, 5 . . . iv, v, vi . . . c, d, e . . .
Eg using type=a <ol type=a>
Output a. Sony
Module 1
15
<li>Sony</li> <li>Dell</li> <li>Samsung</li> </ol> b. Dell c. Samsung
Eg using type=1 <ol type=1 start=3> <li>Sony</li> <li>Dell</li> <li>Samsung</li> </ol>
Output
3. Sony 4. Dell 5. Samsung
3. Definition List
<dl>
</dl>
A definition list starts with the <dl> and ends with the </dl> tags. A definition list is a list of terms paired with associated definitions. The definition list consists of Definition Terms (DT elements), Definition Descriptions (DD elements). Each Definition Term is indicated by a <dt> and </dt> tag. It defines the item in the list. Each Definition Description is defined by <dd> and </dd> tag. It describes an item in the list. The definition is always placed indented on the next line to emphasize the relationship. Syntax: <dl> <dt> Definition Term </dt> <dd> Definition Description </dd> </dl>
Eg:
<dl> <dt>Keyboard</dt> <dd>Input Device</dd> <dt>Printer</dt> <dd>Output Device</dd> </dl>
Output:
Keyboard Input Device 16
Module 1
Printer Output Device To get the best results, the dt and dd elements should be defined as a pair and in proper sequential order. Absence or wrong order of either dt or dd element would result in undesired outputs.
Table <table>
</table>
Tables are defined with the <table> tag. A table is an orderly arrangement of data distributed across a grid of rows and columns. HTML tables can contain information that is dynamic, or even interactive, such as the results of a database query. It helps to communicate tabular data. It also plays an important role in the overall design and layout of the web page. They allow us to create boundaries that make positioning easier. They are helpful in formatting forms as well. A table consists of Rows, Columns, Header cells, Body cells, Caption, Header row(s), Body row(s) and Footer row(s). A table places information inside the cells formed by dividing a rectangle into rows and columns. Most cells contain data; some cells, usually on the table's top or side, contain headings. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag) which holds the content of a data cell. <table> </table> Defines an HTML Table element. It holds the other elements and the table data. All table related tags are included between the <table> and </table> tags. <th> </th> Defines a table header. The headings for the table are set using the th element. Generally, the browser renders the style of headings differently, usually centering the contents of the heading and placing the text in bold style. <tr> </tr> Defines a table row. A table is made up of rows enclosed within <tr> and </tr> tags. The number of rows in the table is determined by the number of occurrences of the tr element. <td> </td> Defines a table cell. td stands for table data. The actual cells of the table are indicated by the td element. Generally, the number of columns in a table is determined by the maximum number of data cells in one row indicated by <td> and </td> tags. The data cells hold the actual content of the table. A <td> tag can contain text, links, images, lists, forms, other tables, etc. <caption> </caption> Defines a table caption. It contains data or information indicating what the table contains. The contents of the caption element are rendered above or below the table. The align attribute of caption tag is used to specify this location. <caption align=bottom> will place the caption immediately below the table. <caption align=top> will place the caption immediately above the table. <colgroup> </colgroup>
17
Defines a group of columns in a table, for formatting or applying styles. It is useful for applying styles to entire columns, instead of repeating the styles for each cell. <col /> Defines attribute values for one or more columns in a table. It is useful for applying styles to entire columns, instead of repeating the styles for each cell. <thead> </thead> Groups the header content in a table. <tbody> </tbody> Groups the body content in a table. <tfoot> </tfoot> Groups the footer content in a table.
Eg 1:
Simple Table ( display row and cell number ) <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>
Output: row 1, cell 1 row 2, cell 1 row 1, cell 2 row 2, cell 2
Eg 2:
Table with Caption <table border=1> <caption align=bottom>Cricket Score</caption>
Module 1
18
<tr> <th>Batsman</th> <th>Score</th> </tr> <tr> <td>Sachin</td> <td>200</td> </tr> <tr> <td>Sehwag</td> <td>100</td> </tr> </table> Output: Batsman Sachin Sehwag 200 100 Cricket Score Score
Eg 3:
Table with thead, tfoot and tbody <table border=1> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td>
Module 1
19
<td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> Output: Month January February Sum $100 $80 $180 Savings
HTML Table Attributes Attribute Value left align center right rgb(x,x,x) bgcolor #xxxxxx colorname border
Description
Specifies the alignment of a table according to surrounding text.
Specifies the background color for a table.
pixels
Specifies the width of the borders around a

Module 1
20
table. If we do not specify a border attribute, the table will be displayed without borders. cellpadding cellspacing width pixels pixels pixels % Specifies the space between the cell wall and the cell content. Specifies the space between cells. Specifies the width of a table.
Rowspan and Colspan Attributes By using the rowspan and colspan attributes of the table elements, it is possible to create data cells that span a given number of rows or columns. rowspan: Sets the number of rows a cell should span. It takes a numerical value. Eg 4: Table with rowspan <table border=1> <caption>Rowspan Example</caption> <tr> <td rowspan=2>Element 1</td> <td>Element 2</td> </tr> <tr> <td>Element 3</td> </tr> </table> Output: Element 1 Rowspan Example Element 2 Element 3
colspan: Specifies the number of columns a cell should span. It takes a numerical value. Eg 5: Table with colspan <table border=1> <caption>Colspan Example</caption> <tr>
Module 1
21
<td colspan=3>Element 1</td> </tr> <tr> <td>Element 2</td> <td>Element 3</td> <td>Element 4</td> </tr> </table> Output: Colspan Example Element 1 Element 2 Element 3 Element 4
Frames HTML provides tags that divide a browser screen into 2 or more HTML recognizable unique regions. Each unique region is called a frame. Using frames, we can display more than one HTML document in the same browser window. Each frame or document is independent of the others. They require a separate document to define the frame layout as well as individual documents to actually occupy the frames. The frameset structure provides an easy way to create multiple, separate scrolling areas in a user agent window and a flexible mechanism to modify the content of frames. Users can view information in one frame while keeping another frame open for reference instead of moving back and forth between pages. The contents of one frame can be manipulated, or linked, to the contents of another. Frames are implemented using the following tags: <frameset> </frameset> <frame> </frame>
HTML framset Tag <frameset> </frameset> The <frameset> tag defines a frameset. It describes the amount of screen space given to each window pane by dividing the screen into rows or columns. It describes the layout of the browser screen. The frameset element holds one or more frame elements. Each frame element can hold a separate document. The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.
Module 1
22
The column or row sizes can be specified as percentages of the user agent window, pixels, or an asterisk (*), which allows the user agent to assign the size. The user agent will typically split the remaining space across the columns or rows that specify * as their width. Syntax: <frameset cols | rows = column_or_row_size(s)> The rows attribute is used to define the number and size of rows in a frameset. It divides the screen into multiple rows (horizontal sections). The required size can be specified as: a number of pixels a percentage of the screen resolution the symbol * which indicates the remaining space
Eg: <frameset rows = 50%, 50%> <frameset rows = 30%, *> <frameset rows = 100px, 200px>
The cols attribute is used to define the number and size of columns in a frameset. It divides the screen into multiple columns (vertical sections). The required size can be specified as: a number of pixels a percentage of the screen resolution the symbol * which indicates the remaining space
Eg: <frameset cols = 25%, 75%> <frameset cols = 30%, *> <frameset cols = 100px, 200px>
HTML frame Tag <frame> </frame> The <frame> tag is responsible for defining properties of each frame. It defines one particular window (frame) within a frameset. A frame is an independent scrolling region, or window, of a Web page. Each frame in a window can be separated from the others with a border. The frameset element holds one or more frame elements. Each frame element can hold a separate document. Using the frame element, we can load different documents into each unique section defined by the frameset. Each separate frame can contain a different document, referenced by a unique URL. 23
Module 1
Each frame can provide a scrollbar or other controls to manipulate the size of the frame. Individual frames usually are named so that they can be referenced through links or scripting, allowing the contents of one frame to affect the contents of another. Each frame in a frameset can have different attributes, such as border, scrolling, the ability to resize, etc. Syntax: <frame name=name_of_frame src=url_of_content></frame> Eg: <frame name=frame1 src=frame_a.htm/>
The frame tag has the following attributes Attribute src name frameborder noresize Value url name 0 1 noresize yes scrolling no auto marginheight pixels Specifies the top and bottom margins of a frame. (Vertical space between the <frame> contents and the frame's borders.) Specifies the left and right margins of a frame. (Horizontal space between the <frame> contents and the frame's borders.) Specifies whether or not to display scrollbars in a frame. Description Specifies the URL of the document to show in a frame. Specifies the name of a frame. Specifies whether or not to display a border around a frame. Specifies that a frame cannot be resized.
marginwidth
pixels
Eg : Frames using rows <html> <head> <title>Frame Rows Example</title> </head> <frameset rows=30%, 70%> <frame src=Lists.html name= first_pane scrolling=yes>
24
<frame src=Table.html name=second_pane scrolling=yes> <noframes> <body>  </body> </noframes> </frameset> </html> Output: Lists Page Browser Window
Table Page
Eg : Frames using cols <html> <head> <title>Frame Cols Example</title> </head> <frameset cols=30%, 70%> <frame src=Lists.html name=left_pane scrolling=yes> <frame src=Table.html name=right_pane scrolling=yes> <noframes> <body>  </body> </noframes>
25
</frameset> </html> Output: Browser Window
Lists Page
Table Page
Browsers that dont support frames will ignore all frame elements, and interpret the <noframes> content, beginning with the <body> element. <noframes> Defines a noframe section for browsers that do not handle frames. <iframe> Defines an inline sub window (floating frame). It creates an inline framed region, or window, that acts similarly to any other embedded object. The problems with frames are numerous, and include problems with design, navigation, bookmarking, URL context, search engine compatibility, and printing.
Eg: Frames using nested rows and cols <html> <head> <title>Frame Nested Example</title> </head> <frameset rows=30%, 70%> <frame src=Lists.html name=first_pane scrolling=yes> <frameset cols=40%, 60%> <frame src=Table.html name=second_pane scrolling=yes> <frame src=Paragraph.html name=third_pane scrolling=yes> </frameset> <noframes>
26
<body>  </body> </noframes> </frameset> </html> Output:
Lists Page
Table Page
Paragraph Page
Targeting Named Frames When we are creating links for use in a frames environment we have to specify an additional attribute called target. The target attribute uses the name attribute of the frame element. Eg: <a href=sample.htm target=right_pane>Link to Sample Document</a> On clicking the hyperlink, the document will be loaded in the frame named right_pane. If we fail to specify a target frame name the linked document will be displayed in the current frame. Frames can be used in association with named anchors to load a specific location in another document. Special Target Values target=_blank : Opens a new browser window and loads the document specified in the URL attribute into that new window. target=_self : Load the page over the current frame. target=_parent : Load the link over the parent frame. target=_top : Load the link over all the frames in the window.
Images
<img>
HTML images are defined with the <img> tag. This element defines a graphic image on the page. It is typically used for inline images.
27
The <img> tag embeds an image in an HTML page. Images are not technically inserted into an HTML page. Images are linked to HTML pages. The <img> tag creates a holding space for the referenced image. When a web page is loaded, it is the browser, at that moment that actually gets the image from a web server and inserts it into the page. The images should stay in the same spot in relation to the web page; otherwise the browser may not find the image and the visitors will get a broken link icon. The <img> tag has two required attributes: src and alt.
src: The src attribute tells the user agent what image file should be displayed. This value will be a URL indicating the location and name of the image file. The form of the URL can be either an absolute URL or a relative URL. alt: The alt attribute specifies text that should be displayed in place of the image in non graphical browsers. It stands for Alternate Text. This is a text field that describes an image or acts as a label. Syntax: <img src=url alt=alternate text/> Eg: <img src=images/hello.gif alt=Welcome Image /> <img src=images/hello.gif alt=Welcome Image height=100 width=90% />
The <img> tag has the following attributes: Attribute src alt height Value url text pixels % pixels % #mapname top / bottom align left / right middle border vspace
Description Specifies the URL of an image (location and name of the image file). Specifies an alternate text for an image. Specifies the height of an image.
width usemap
Specifies the width of an image. Specifies an image as a client-side image-map.
Specifies the alignment of an image according to surrounding elements.
pixels pixels
Specifies the width of the border around an image. Specifies the whitespace on top and bottom of an
Module 1
28
image. hspace pixels Specifies the whitespace on left and right side of an image.
Supported File Formats GIF: Graphic Interchange Format uses a maximum of 256 colors, and uses combinations of these to create colors beyond that number. The GIF format is best for displaying images that have been designed using a graphics program, like logos, icons, and buttons. GIF images support transparency. GIF images support a feature called interlacing. The GIF format also supports animation. JPG, JPEG: Joint Photographic Expert Group. JPEG files can contain millions of colors. It is used mainly to display photographs. PNG: Portable Network Graphics. It is good for combinations of text and graphics within one image. PNG permits true color images, variable transparency, platform-independent display, and a fast 2D interlacing scheme. * For better results: Limit image file sizes. Limit the number of images. Reuse images as much as possible so images can be loaded from cache.
Image Maps An image-map is an image with clickable areas. Clicking in a region of the image causes the web surfer to be connected to a new URL. Image maps are a graphical form of creating links between pages. It may contain one or more hot spots that navigate to the specified location or url. When a hyperlink is created on an image, clicking on any part of the image will lead to opening of the document specified in the href attribute of the <a> tag. If there is a need to link multiple documents to a single image, image map technique is used. It divides the image into multiple regions and allows linking of each section to a different document. Image maps can be created and applied to an image so specific portions of the image can be linked to specific documents. Linked regions of an image map are called hot regions or hot spots. Each hot region is associated with a filename.htm document that will be loaded into the browser when the hot region is clicked. There are two types of image maps: client-side and server-side Client-side image maps rely upon the user agent to process the image, the area where the user clicks, and the expected action. Client-side image maps are generally preferred and used. Server-side image maps rely upon the user agent only to tell the server where the user clicked. All processing is done by an agent on the Web server.
<map> </map> The <map> tag is used to define a client-side image-map. The name attribute is required in the map element. It specifies the name for an image map via which the map can be referenced in an HTML file.
29
<map name= map_name > The name attribute is associated with the <img>'s usemap attribute and creates a relationship between the image and the map. The images usemap takes the name of the image map as a value and applies the map specifications to the respective image. The value is always preceded with the # symbol. The map element contains a number of area elements that defines the clickable areas in the image map. <img usemap=#map_name>
<area> The <area> tag defines a clickable area inside an image-map. The area element is always nested inside a <map> tag. The area element defines the hot spot regions in the image map. The area tag can be used to define regions with standard shapes such as: rect : Defines a rectangle area by specifying the coordinates of the four corners of the rectangle. circle : Defines a circle area by specifying the coordinates of the center of the circle and the radius. poly : Defines a free-form polygon area by specifying the coordinates of each point of the polygon.
The <area> tag has the following attributes: Attribute href alt coords Value url text coordinates default shape rect circle poly _blank target _parent _self _top Specifies where to open the linked page specified in the href attribute. Specifies the shape of an area. Description Specifies the destination of a link in an area. Specifies an alternate text for an area. Specifies the coordinates of an area.
Eg: <img src=planets.gif width=150 height=130 alt=Planets usemap=#planetmap />

30
<map name=planetmap> <area shape=rect coords=0,0,80,130 href=sun.htm alt=Sun /> <area shape=circle coords=90,60,5 href=mercury.htm alt=Mercury /> <area shape=circle coords=130,60,8 href=venus.htm alt=Venus /> </map>
* Note that all coordinates of the image map are relative to the top-left corner of the image (effectively 0, 0) and are measured in pixels.
Forms <form> </form> The <form> tag is used to create an HTML form for user input. The form itself contains regular text, other HTML/XHTML elements such as tables. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select menus, textarea and label elements. HTML forms are used to pass data to a server. The form element is a block-level element, and creates a line break before and after itself. The most important form element is the input element. The input element is used to select user information. An input element can be of type text field, checkbox, password, radio button, submit button, and more. Eg: <form name=myForm action=form_action.asp method=get> First name: <input type=text name=firstname /><br /> Last name: <input type=text name=lastname /><br /> <input type=submit value=Submit /> </form> Output: First name: Last name: Submi t The <form> tag has the following attributes: Attribute name Value name Description Specifies the name of the form.
Module 1
31
action
url
Specifies the URL of the program that is going to accept the data from the form, process it, and send a response back to the browser. GET (default) or POST specifies which HTTP method will be used to send the forms contents to the web server. The CGI application should be written to accept the data from either method.
method
get post application/x-wwwform-urlencoded
enctype
multipart/form-data text/plain _blank _parent
Specifies how form-data should be encoded before sending it to a server.
target
_self _top framename
Specifies the target frame where the response page will show up.
Character Entities We use character entities to put special characters within a document, such as accented letters, copyright symbols, or even the angle brackets used to enclose HTML elements. To use such characters in an HTML document, they must be "escaped" by using a special code. All character codes take the form &code; The code is a word or numeric code indicating the actual character. Commonly Used Character Entities:
Numeric Value " & < > © ®
Named Value " & < > ™ © ®
Symbol & < >
Description Quotation mark Ampersand Less than Greater than Trademark Non-breaking space Copyright symbol Registered trademark
Module 1
32
Cascading Style Sheets (CSS) Introduction Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation. CSS allows document authors to specify the presentation of elements on a web page (e.g. fonts, spacing, colors) separately from the structure of the document (section headers, body etc). This separation of structure from presentation simplifies maintaining and modifying a web page. If a websites presentation is determined entirely by a style sheet, a web designer can easily swap in a new style sheet to completely change the appearance of the site. HTML dictates the content and CSS dictates how it is presented. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content. Style sheets centralize the commands for certain visual effects in one place, instead of scattering them throughout the document. CSS can also allow the same markup page to be presented in different styles for different rendering methods. CSS also makes provisions for conflicting rules. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable. The CSS specifications are maintained by the World Wide Web Consortium (W3C).
Module 1
33
Internet media type (MIME type) text/css is registered for use with CSS. CSS uses the filename extension .css Latest version in use is CSS level 2 (CSS 2) CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties.
Syntax (Style Rules) A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. The selector is the elements that the style should be used on. Binding an element to a style specification is done using the selector (usually the element name) and the associated style information. The selector is followed by declaration block. It consists of the formatting property definitions (declarations), which are enclosed in braces ({ }). The rules are composed of property / value pairs. The properties are all formatting properties of the selected elements that should be set to the associated values. The property name and property value are separated by a colon. Each rule in turn is separated by a semicolon, i.e. each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;).
Structure of a CSS rule
Eg: selector {property1 : value1; property2 : value2; . . . propertyN : valueN; } h1 {font-size: 28pt; color: red; font-family: Arial; } In CSS, selectors are used to declare which of the markup elements a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, or only those elements that match a certain attribute. Elements may be matched depending on how they are placed relative to each other in the markup code, or on how they are nested within the document object model.
Style Element <style> </style>

34
The <style> tag is used to define style information for an HTML document. It has a beginning <style> tag and an ending </style> tag and everything in between is treated as a style definition. The content of the style element needs to follow style definition guidelines. These style definitions specify how HTML elements should be rendered in a browser. A documents <style> section appears inside the documents <head> section. Multiple <style> sections are permissible. The type attribute of style element defines the content of the style element. It specifies the MIME type of the style sheet. The only possible value is text/css. The media attribute of style element specifies styles for different media types. It is an optional attribute that takes values such as screen / tv / projection / handheld / print / all. Syntax: <style type=text/css> . . . style definitions . . . </style> Eg: <style type=text/css> h1 {color:red} p {color:blue} </style>
Types of Style Sheets ( Adding Style to a Document ) 1. Inline Styles 2. Embedded Style Sheet 3. External Style Sheet
1. Inline Styles The first method of adding style to a web page is to use the style attribute of a selected element. Inline style declares an individual elements format using the attribute style. It is used when we want to simply assign a few styles to one individual element. It is implemented by adding a style attribute to a specific instance of an element. Syntax: Eg: <element style=property:value; property:value; . . . ></element> <p style=color: red; background: yellow;>Style applied paragraph </p>
An inline style may be applied to any HTML element. It modifies only the specific instance (occurrence in the document) of the element to which we apply it. Inline style command has a higher priority and overrides any external or document styles.
Module 1
35
Need to reapply style information throughout the document and outside documents. Bound too closely to markup, hence difficult to update.
2. Embedded Style Sheet ( Internal Style Sheet ) Embedded style sheet is a technique used to apply styles to an individual document. It enables us to embed an entire CSS document in an HTML documents head section. It is used when a single document needs to have a unique style. To use an embedded style sheet, we define a style block (delimited by the <style> and </style> tags), which should be placed in the <head> section of the document. This block consists of a set of style rules, where each rule defines a style for an HTML element or group of elements present in the same document. Styles placed in the head apply to matching elements wherever they appear in the entire document. Style commands only apply to the document they are embedded in. We need to reapply style information for other documents. The style elements type attribute specifies the MIME type (Multipurpose Internet Mail Extension) that describes a files content. CSS documents use the MIME type text / css. It does not require additional page requests for style information. The body of the style sheet defines the CSS rules to be applied to the document. The CSS selector determines which elements will be styled according to a rule. The styles applied to an element (or parent element) also apply to its nested elements (or child elements). The child elements automatically inherit the applied styles from their parents.
Eg:
<html> <head> <title>Embedded Style Example</title> <style type=text/css> h1 {color:blue; font-size:40px;} p {font-family: Times New Roman; text-align:center;} body {background-image:url(images/hello.gif);} /* This is a CSS comment */ </style> </head> <body> <h1> Internet Basics </h1> <p> Textbook on the internet concepts </p> </body> </html>
Module 1
36
3. External Style Sheet (Linked Style Sheet) An external style sheet is simply a CSS file containing all the style specifications for HTML tags or classes. The common extension indicating that the document provides style sheet information is .css. This document consists of CSS rules that are to be applied to the concerned HTML document. An external style sheet is ideal when the style is applied to many pages. It is used to create documents with a uniform theme. With an external style sheet, we can change the look of an entire Web site by changing one file. Style information may be cached by the browser. In some cases it may require extra download time for the style sheet, which might delay page rendering or, in the case of import, cause a rendering flash. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section and can appear any number of times. The <link> tag defines the relationship between a document and an external resource. The href attribute specifies the location of the linked document. Its value is a url. The rel attribute specifies the relationship between the current document and the linked document. Here, its value is stylesheet. The type attribute specifies the MIME type of the linked document. Its value is text/css. The media attribute specifies on what device the linked document will be displayed. It takes one of the following values: screen / tv / projection / handheld / print / all.
Eg: Theme.css file body {font-size: 10pt; font-family: Arial; color: red; background-color: white;} h1 {font-size: 24pt; font-family: Tahoma; color: blue; text-align: center;} p {font-size: 20pt; margin-left: 50px; margin-right: 50px;}
ExternalStyle.html file <html> <head> <title>External Style Example</title>

37
<link rel=stylesheet type=text/css href=theme.css /> </head> <body> Sample Text <h1> Internet Basics </h1> <p> Textbook on the internet concepts </p> </body> </html>
CSS Grouping and Nesting Selectors h1,h2,p { color:green; } In style sheets we can group the elements with the same style. Separate each selector with a comma. The comma tells the browser that there are two different selectors involved in the rule. The style is applied to all the elements referenced by the grouped selectors. h1 b {color: gray;} In style sheets we can nest the selectors. They are called descendant selectors or contextual selectors. Defining descendant selectors is the act of creating rules that operate in certain structural circumstances but not others. The style applies to only those b elements that are descended from h1 elements. * { color: red; } The universal selector can be used to match any element in the document. The universal selector is an asterisk (*). Every tag will have the color: red attribute applied to it.
Conflicting Styles (Style Sheet Cascade) Multiple external style sheets can be referenced inside a single HTML document. Multiple <style> sections may be present in the head section of a single document. In addition to these, the document may have inline styles defined. Several layers of style definitions can apply to any document. Those layers are applied in the following order: 1. The user agent (or browser) settings. The user may be able to modify some of these settings 2. Any linked style sheets (External Style Sheets) 3. Any styles present in a <style> element (Embedded Style Sheets) 4. Styles specified within a tags style attribute (Inline Styles)
Module 1
38
Each level of styles overrides the previous level where there are duplicate properties being defined. In case of multiple sheets in the same document, the sheets are applied in order, with subsequent definitions overriding any previous definitions. Note that properties are only overridden when they appear multiple times. Otherwise, the styles are additive. Inline style command has a higher priority and overrides any external or embedded styles.
CLASS Attribute The class attribute is a standard HTML attribute that specifies a class name for an element. The attributes value is the class name of that particular element. A class is simply a group of elements, possibly scattered throughout a document, all of which have the same value for their class attribute. It can be used to apply styles to a group of elements by specifying the class name. Syntax: Eg: <element class=classname > </element> <p class=special> paragraph </p>
Class Selectors The class selector is used to specify a style for a group of elements. If we want to have formatting variations for different instances of a single element or we want different elements to share the same format, we us class selectors. To specify a class to match with a selector we append a period (.) and the class name to the selector. Eg: ClassSelector.html <html> <head> <title>Class Selector Example</title> <style type=text/css> h1 {color:blue; font-size:40px;} p.special {font-family: Tahoma; text-align:center;} .news {font-family: Arial; color: green;} </style> </head> <body> <h1> Internet Basics </h1> <p class=special> Textbook on the internet concepts </p>
39
<h2 class=news>HTML Basics</h2> <p class=news> Ebook on the HTML concepts </p> </body> </html> The p.special selector applies styles to only the <p> tag elements with the special class name. The .news selector applies styles to all elements having news as their class name.
ID Attribute The id attribute is a standard HTML attribute that specifies a unique id for an element. It stands for identifier. It is used to uniquely reference a particular instance of an element. The id attribute takes a unique id value. Only one element in any document can have a particular id attribute value. We can specify a style for a single, unique element by referencing the value in its id attribute. Syntax: Eg: 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 to uniquely reference a particular element. It refers to the values found in id attributes to match elements and apply the defined styles. The id selector consists of the attribute value preceded by the hash symbol (#). Eg: <html> <head> <title>ID Selector Example</title> <style type=text/css> h1 {color:blue; font-size:40px;} #para1 {font-family: Tahoma; text-align:center; color:red;} #para2 {font-family: Arial; color: green;} </style> </head> <body> <h1> Internet Basics </h1> <p id=para1> Textbook on the internet concepts </p> <h2>HTML Basics</h2> 40 <element id=id > </element> <p id=para1> paragraph </p>
Module 1
<p id=para2> Ebook on the HTML concepts </p> </body> </html> The #para1 selector applies styles to only the <p> tag element with the para1 id. The #para2 selector applies styles to only the <p> tag element with the para2 id.
Selector Summary Selector element Description Selects all elements of the name specified in the rule. Example h1 {color: red;} /* makes all h1 tags red */ .note {color: yellow;} /* makes all tags with class=note' yellow */ h1.note {text-decoration: underline;} /* underlines all H1 tags with class=note' */ #test {color: green;} #id Selects any tag with an id attribute set. /* makes a tag with id=test' green */
.class
Selects any tag with the specified class value.
element.class
Selects the specified elements with a particular class value.
Absolute and Relative Positioning of elements The position property gives authors greater control over how document elements are displayed. Normally, the elements are placed in the order they appear in the document. Specifying an elements position property, removes the element from the normal flow and positions it as instructed by the developer. It allows us to define exactly where elements will appear relative to where they would ordinarily be or relative to a parent element, or another element, or even to the browser window itself. It can also place an element behind another. The elements may also overlap each other. The coordinate system for positioned elements uses the upper-left corner of the enclosing object as the origin point, 0, 0. Often, if the tag is directly enclosed in the <body>, the origin will be the upper-left-hand portion of the screen, but it might not necessarily be if we consider positioned elements that contain other positioned elements. Values for the x coordinate increase to the right; y values increase going down from a positioned origin. A value such as 10,100 would be 10 units to the right and 100 units down from the origin. Values can be specified as a length in a valid CSS measurement (such as pixels) or as a percentage of the containing object's (parent's) dimension. The position property has the following values:
41
static: Places elements according to the natural order in which they occur in a document (the default). position: static;
absolute: Places elements at an absolute position away from an enclosing element. Typically, absolute positioning uses the upper-left corner of the browser as the origin, but if positioned objects are within positioned regions themselves, their origin is the top-left most coordinate of their container. An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>. position: absolute;
relative: Makes the element's position relative to its natural position in document flow. This can be confusing, so most designers tend to use absolute values. The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow. position: relative;
fixed: Acts like absolute, but does not allow the object to move offscreen. This value allows the designer to peg an object's position similar to using a frame. An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled. Fixed positioned elements can overlap other elements. position: fixed;
Elements can be positioned using the top, bottom, left, and right properties. They act as offset properties and describe the offset of a positioned element's sides with respect to its containing block. Eg: position:fixed; top:30px; right:5px;
position:relative; left:20px; bottom:10px;
Z-index Property The z-index property allows us to layer overlapping elements properly. Overlapping elements stack in the order in which they are defined in a document. The most recent elements go on top. This default order can be redefined by using an element's z-index property. The z-index property specifies the stack order of an element. An element can have a positive or negative stack order. Elements that have higher z-index value is displayed in front of elements with lower z-index property. Eg: position:absolute; left:0px; top:0px; z-index:2;
Module 1
42
Eg:
<html> <head> <title>Z-index Example</title> <style type=text/css> #first {position: absolute; top: 20; left: 50; z-index: 4;} #second {position: absolute; top: 0; left: 0; z-index: 1;} #third {position: absolute; top: 40; left: 20; z-index: 2;} </style> <head> <body> <div id=first > </div> <div id=second > </div> <div id=third > </div> </body> </html>
The first element has the highest value for z-index and is displayed on top. The third element has the second highest value for z-index and is displayed immediately below. The second element has the lowest value for z-index and is displayed at the bottom.
DIV Tag
<div> </div>
The <div> tag defines a division or a section in an HTML document. It is used to structure HTML documents into divisions or sections. The <div> tag defines a logical block consisting of text and HTML tags. It is commonly used as containers. It can contain other HTML elements such as <p>, <table>, <img> and so on. The div element can hold simple and block elements.
Module 1
43
Browsers usually place a line break before and after the div element. It has no inherent display characteristics or predefined rendering. The <div> tag is often used to group block-elements to format them with styles. The div element is used in association with CSS to layout a web page. The class attribute specifies a class name for the div element. The id attribute specifies a unique id for the div element. The style attribute specifies an inline style for the div element. The align attribute specifies the alignment of the content inside a div element.
Eg:
<html> <head> <title>DIV Example</title> <style type=text/css> h1 {color:blue; font-size:40px;} #para1 {font-family: Tahoma; text-align:center; color:red;} .div1 {font-family: Arial; color: green;} </style> </head> <body> <h1> Internet Basics </h1> <p id=para1> Textbook on the internet concepts </p> <div class=div1> <h2>HTML Basics</h2> <p>Ebook on the HTML concepts</p> </div> </body> </html>
The .div1 selector matches the div element and applies style to the <h2> and <p> tags inside the <div> element.
Module 1
44
SPAN Tag
<span>
</span>
<span> is an inline element which flows in with surrounding content. A <span> tag provides a logical grouping inline. It does not apply any inherent formatting to its contents. The <span> tag provides a way to add a hook to a part of a text or a part of a document. When the text is hooked in a span element we can add styles to the content, or manipulate the contents. The class attribute specifies a class name for the span element. The id attribute specifies a unique id for the span element. The style attribute specifies an inline style for the span element.
Eg:
<html> <head> <title>SPAN Example</title> <style type=text/css> h1 {color:blue; font-size:40px;} #para1 {font-family: Tahoma; text-align:center; color:red;} .special {font-family: Arial; color: green;} </style> </head> <body> <h1> Internet Basics </h1> <p id=para1> Textbook on the internet concepts </p> <h2>HTML Basics</h2> <p>Ebook on the <span class=special>HTML</span> concepts</p> </body> </html>
The .special selector matches the span element by checking the class name attribute. It applies style to the contents inside the span element.
Module 1
45
**********************************************************************************
Module 1
46

NETWORK COMPUTING Mod 1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

NETWORK COMPUTING Mod 1

Uploaded by

Copyright:

Available Formats

NETWORK COMPUTING (RT605)

Network Computing (SRP)

Network Computing (SRP)

The <head> tag supports the following standard attributes: Attribute

rtl ltr language_code

The <head> tag does not support any event attributes.

Network Computing (SRP)

Attribute onclick ondblclick onload onmouseover onkeypress

Value script script script script script

A Simple HTML Document <html>

<head> <title>Title of the document</title> </head>

<body> The content of the document </body>

Network Computing (SRP)

Output: Sachin Mumbai Indians, Mumbai,

Network Computing (SRP)

Text Styles Bold <b> </b>

Big, Small, Pre, Superscript and Subscript

Network Computing (SRP)

Renders as bigger text

Text Effects Centering (Text, Images) <center> </center>

Font <font> </font>

Network Computing (SRP)

Links ( Anchor ) <a> </a>

Description Specifies the default color of unvisited links 11

Network Computing (SRP)

<ul> <li>Sony</li> <li>Dell</li> <li>Samsung</li> </ul>

Eg using type=square <ul type=square> <li>Sony</li> <li>Dell</li> <li>Samsung</li> </ul>

Sony Dell Samsung

2. Ordered List (Numbered)

<ol> <li>List item1</li> <li>List item2</li> <li>List item3</li> </ol>

<ol> <li>Sony</li> <li>Dell</li> <li>Samsung</li> </ol>

Output: 1. Sony 2. Dell 3. Samsung

Number 1, 2, 3 . . . A, B, C . . . a, b, c . . . I, II, III . . . i, ii, iii . . . 3, 4, 5 . . . iv, v, vi . . . c, d, e . . .

Eg using type=a <ol type=a>

Network Computing (SRP)

<li>Sony</li> <li>Dell</li> <li>Samsung</li> </ol> b. Dell c. Samsung

Eg using type=1 <ol type=1 start=3> <li>Sony</li> <li>Dell</li> <li>Samsung</li> </ol>

3. Sony 4. Dell 5. Samsung

<dl> <dt>Keyboard</dt> <dd>Input Device</dd> <dt>Printer</dt> <dd>Output Device</dd> </dl>

Keyboard Input Device 16

Network Computing (SRP)

Output: row 1, cell 1 row 2, cell 1 row 1, cell 2 row 2, cell 2

Table with Caption <table border=1> <caption align=bottom>Cricket Score</caption>

Network Computing (SRP)

Network Computing (SRP)

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

Network Computing (SRP)

Network Computing (SRP)

Network Computing (SRP)

</frameset> </html> Output: Browser Window

Specifies the width of an image. Specifies an image as a client-side image-map.

Specifies the alignment of an image according to surrounding elements.

Eg: <img src=planets.gif width=150 height=130 alt=Planets usemap=#planetmap />

Network Computing (SRP)

get post application/x-wwwform-urlencoded

multipart/form-data text/plain _blank _parent

Specifies how form-data should be encoded before sending it to a server.

_self _top framename

Symbol & < >

Network Computing (SRP)

Network Computing (SRP)

Structure of a CSS rule