NETWORK COMPUTING Mod 1

7/31/2019 NETWORK COMPUTING Mod 1

http://slidepdf.com/reader/full/network-computing-mod-1 1/46

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 Stylesheets, 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 standardInternet Protocol Suite (TCP/IP) to facilitate data transmission and exchange. It is a worldwidenetwork of computer networks that consists of millions of private, public, academic, business, andgovernment 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 dataall around the Internet. Transmission Control Protocol (TCP) is a set of communication protocols andIP is a unique address. Each machine connected to the Internet must have a unique IP address, whichidentifies that machine.

Commercial organizations began to recognize the use of such a network which converted thewhole world into a Global Village and allowed almost instant access to business or commerce dataand a host of other services such as E-Mail and E-Commerce. The rapid growth of the Internet wasdue 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 theterms and costs of usage. An ISP’s gateway generally consists of a server with a permanentconnection to the Internet. The Server’s 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 globaldata 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 acollection of interconnected documents and other resources, linked by hyperlinks and UniformResource 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 toClient requests for information. Eg: Internet Information Server (IIS), Apache WebServer and Microsoft Personal Web Server.

• Clients: Computers that read the available information.

Clients run special software (Browser software) that allows them to locate theappropriate server, query the server for the information to be read and display theresponse from the server. Eg: Internet Explorer, Mozilla Firefox, Netscape andGoogle Chrome.

HTML

Network Computing (SRP) Module 1 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 thedefinition of device-independent, system-independent methods of representing textsin 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 futureversions 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 createinteractive forms.

• It provides a means to create structured documents by denoting structural semanticsfor 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




HTML tags are instructions that are embedded directly into the text of the document. AnHTML 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 themserves 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. Theeffect of the paired tags is applied only to the text they contain. The opening tag activates the effectand 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 threecomponents: a pair of element tags, a “start tag” and “end tag”; some element attributes within thestart tag; and finally, any textual and graphical content between the start and end tags. An HTMLelement 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 inangle 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 closedin the start tag.

• Nested HTML Elements: Most HTML elements can be nested (can contain other HTMLelements).

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. Theelement has a start tag <p> and an end tag </p>. The element content is: This is my first paragraph.




The <body> element: The <body> element defines the body of the HTML document. Theelement has a start tag <body> and an end tag </body>. The element content is another HTMLelement (a p element).

The <html> element: The <html> element defines the whole HTML document. The elementhas 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 beenclosed 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 haslittle to do with the content of the document. The head element is a container for all the headelements. 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 Description




dir rtl

ltr

Specifies the text direction for the content inan element

lang language_code Specifies a language code for the content inan element

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 mainlydisplayed in the browser. The major contents of the web page come in this section. It contains all thecontents 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:


class classname Specifies a classname for an element

dir rtl

ltr

Specifies the text direction for the content in anelement

id id Specifies a unique id for an element

lang language_code Specifies a language code for the content in an element

style style_definition Specifies an inline style for an element

background URL Specifies a background image for a document. User canspecify the file name or the relative file path

bgcolor colornameSpecifies the background color of a document. Color name or its equivalent hexadecimal value is specified.

text colorname Specifies the color of the text in a document

Eg: <body background=“sample.gif”>

The <body> tag supports the following event attributes:





onclick script Script to be run on a mouse click

ondblclick script Script to be run on a mouse double-click

onload script Script to be run when a document load

onmouseover scriptScript to be run when mouse pointer moves over an

element

onkeypress script 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 isabout. 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 insearch-engine results. The <title> tag does not support any event attributes.

Eg: <head>

<title> Simple HTML </title>

</head>

Footer


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 theweb page. The HTML tags used are <address> and </address>. This tag should ideally be placedimmediately after the last line of the textual content of the web page. The text contained within thesetags is displayed in italics. Most browsers will also add a line break before and after the addresselement.

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 sourcecode at a later date. The comment is enclosed in the symbols . We can also store program-

specific information inside comments. In this case they will not be visible for the user, but they arestill available to the program. A good practice is to comment the text inside scripts and style elementsto 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 andafter itself. A blank line always separates paragraphs in textual material. The browser moves onto anew 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 onlyone 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 textwill break on a line. The <br> tag is an empty tag which means that it has no end tag. Multipleconsecutive <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 decreasesuniformly from <h1> to <h6>. <h1> should be used as the highest level of heading, <h2> as the nexthighest and so on.

Eg: <h1>This is heading 1</h1>

<h2>This is heading 2</h2>





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




<hr>

The <hr> tag is used to draw lines and horizontal rules. The <hr> tag creates a horizontal linein an HTML page. The hr element can be used to separate content in an HTML page. It is often usefulto break up the document into visually distinct regions. The <hr> element causes the browser todisplay 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'swidth 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 correspondingtext 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 asunderlined text.

Eg: <u> This text is underlined </u>

Output: This text is underlined

Big, Small, Pre, Superscript and Subscript




<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

This is p r e f o r m a t t e d t e x t

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 fontsand colors helps to draw the viewer’s attention to certain key areas in the web page. It helps to makethe website more readable and attractive.

Eg: <font face=“Comic Sans MS” size=“4” color=“red”>This is some text in red</font>




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. Defaultsize is 3. The size can also be set relative to the default size.

size=+x where x is any integer value that will be added to the default value.

size=+3 displays a size of 6.

3. The color attribute specifies the color of text. The value can be a valid color name or itshexadecimal 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 asimages. 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 somedestination. 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. Itcan 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 bespecified with the <body> tag. The user can specify the color name or the equivalent hexadecimalvalue.


link colorname Specifies the default color of unvisited links




in a document

alink colornameSpecifies the color of an active link in adocument

vlink colorname

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 currentdirectory, 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. Theseanchors target the hyperlinks to the specified location or section of the document. So we cancreate 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 Visitthe 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 beset up. So we can create a bookmark inside a document, by using the name attribute. Theseanchors target the hyperlinks to the specified location or section of the document.

Syntax: <a name=“location_name” > . . . </a>

<a href=“#location_name”> . . . </a>




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 ViewAll Topics link, the browser sets the focus to the anchor named “topics”, which is present in thesame webpage.

• Named anchors are often used to create “table of contents” at the beginning of a largedocument. 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 block-level structures, such as paragraphs. HTML supplies several list elements. Most list elements arecomposed of one or more list item elements. The list item element comprises of <li> and </li> tagsand a list item text. The <li> tag defines a list item. The <li> tag is used in both ordered and unorderedlists.

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 theordering 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 thetype of the bullet. Bulleted lists are generally used when providing a list of non sequential items. Thelist 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>




Eg: <ul>

<li>Sony</li>

<li>Dell</li>

<li>Samsung</li>

</ul>

Output:

• Sony

• Dell

• Samsung

Eg using type=fillround Output

<ul type=“fillround”>

<li>Sony</li>

<li>Dell</li>

<li>Samsung</li>

</ul>

• Sony

• Dell

• Samsung

Eg using type=square Output

<ul type=“square”>

<li>Sony</li>

<li>Dell</li>

<li>Samsung</li>

</ul>

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 whichorder 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 numberingscheme.

Ordered lists use the type attribute to specify the type of numbering scheme to be used. Itemsin this list are numbered automatically by the browser. The list item <li> tag is used to define each

item in the list.




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 Numbering Scheme Number

type=“1” Numerals 1, 2, 3 . . .

type=“A” Uppercase letters A, B, C . . .

type=“a” Lowercase letters a, b, c . . .

type=“I” Uppercase Roman Numerals I, II, III . . .

type=“i” Lowercase Roman Numerals i, ii, iii . . .

type=“1” start=“3” Numerals 3, 4, 5 . . .

type=“i” start=“4” Lowercase Roman Numerals iv, v, vi . . .

type=“a” start=“3” Lowercase letters c, d, e . . .

Eg using type=“a” Output

<ol type=“a”> a. Sony




<li>Sony</li>

<li>Dell</li>

<li>Samsung</li>

</ol>

b. Dell

c. Samsung

Eg using type=“1” Output

<ol type=“1” start=“3”>

<li>Sony</li>

<li>Dell</li>

<li>Samsung</li>

</ol>

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 (DTelements), 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




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 distributedacross a grid of rows and columns. HTML tables can contain information that is dynamic, or eveninteractive, such as the results of a database query. It helps to communicate tabular data. It also playsan important role in the overall design and layout of the web page. They allow us to create boundariesthat 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), Bodyrow(s) and Footer row(s). A table places information inside the cells formed by dividing a rectangleinto rows and columns. Most cells contain data; some cells, usually on the table's top or side, containheadings. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (withthe <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 tablerelated 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. Thenumber 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 bythe 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 thetable. 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. Thecontents of the caption element are rendered above or below the table. The align attribute of captiontag 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>




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>


</tr>

<tr>



</tr>

</table>

Output:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Eg 2: Table with Caption


<caption align=“bottom”>Cricket Score</caption>




<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 Score

Sachin 200

Sehwag 100

Cricket Score

Eg 3: Table with thead, tfoot and tbody


<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tfoot>

<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>

Output:

Month Savings

January $100

February $80

Sum $180

HTML Table Attributes


align

left

center

right

Specifies the alignment of a tableaccording to surrounding text.

bgcolor

rgb(x,x,x)

#xxxxxx

colorname

Specifies the background color for a table.

border pixels Specifies the width of the borders around a




table. If we do not specify a border attribute, the table will be displayedwithout borders.

cellpadding pixelsSpecifies the space between the cell walland the cell content.

cellspacing pixels Specifies the space between cells.

width pixels

%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


<caption>Rowspan Example</caption>

<tr>

<td rowspan=“2”>Element 1</td>

<td>Element 2</td>

</tr>

<tr>

<td>Element 3</td>

</tr>

</table>

Output: Rowspan Example

Element 1Element 2

Element 3

• colspan: Specifies the number of columns a cell should span. It takes a numerical value.

Eg 5: Table with colspan


<caption>Colspan Example</caption>

<tr>




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 theremaining 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 thescreen 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 dividesthe 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 awindow can be separated from the others with a border.

• The frameset element holds one or more frame elements. Each frame element can hold aseparate 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.




• 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


src urlSpecifies the URL of the document to show in aframe.

name name Specifies the name of a frame.

frameborder 0

1

Specifies whether or not to display a border arounda frame.

noresize noresize Specifies that a frame cannot be resized.

scrolling

yes

no

auto

Specifies whether or not to display scrollbars in aframe.

marginheight pixelsSpecifies the top and bottom margins of a frame.(Vertical space between the <frame> contents andthe frame's borders.)

marginwidth pixelsSpecifies the left and right margins of a frame.(Horizontal space between the <frame> contentsand the frame's borders.)

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”>


<frame src=“Table.html” name=“second_pane” scrolling=“yes”>

<noframes>

<body>



</body>

</noframes>

</frameset>

</html>

Output: Browser Window

Lists Page

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>



</frameset>

</html>

Output: Browser Window

Lists Page Table Page

• Browsers that don’t 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>




image.

hspace pixelsSpecifies the whitespace on left and right side of animage.

Supported File Formats

GIF: Graphic Interchange Format uses a maximum of 256 colors, and uses combinations of these tocreate colors beyond that number. The GIF format is best for displaying images that have beendesigned 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 usedmainly 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 2Dinterlacing scheme.

* For better results: Limit image file sizes. Limit the number of images. Reuse images as muchas 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 theweb 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 toopening 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 multipleregions and allows linking of each section to a different document. Image maps can be created andapplied 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 isassociated with a filename.htm document that will be loaded into the browser when the hot region isclicked.

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 inthe map element. It specifies the name for an image map via which the map can be referenced in an

HTML file.




<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 image’s usemap takes the name of the image map as a value andapplies 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 alwaysnested inside a <map> tag. The area element defines the hot spot regions in the image map. The areatag 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 therectangle.

• circle : Defines a circle area by specifying the coordinates of the center of the circle and theradius.

• poly : Defines a free-form polygon area by specifying the coordinates of each point of the polygon.

The <area> tag has the following attributes:


href url Specifies the destination of a link in an area.

alt text Specifies an alternate text for an area.

coords coordinates Specifies the coordinates of an area.

shape

default

rect

circle

poly

Specifies the shape of an area.

target

_blank

_parent

_self

_top

Specifies where to open the linked page specifiedin the href attribute.

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




<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 containsregular text, other HTML/XHTML elements such as tables. A form can contain input elements liketext fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain selectmenus, textarea and label elements. HTML forms are used to pass data to a server. The form elementis 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 selectuser 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:

The <form> tag has the following attributes:


name name Specifies the name of the form.


Submi

t



action url

Specifies the URL of the program that isgoing to accept the data from the form,

process it, and send a response back to the browser.

methodget

post

GET (default) or POST specifies whichHTTP method will be used to send the form’scontents to the web server. The CGIapplication should be written to accept thedata from either method.

enctype

application/x-www-form-urlencoded

multipart/form-data

text/plain

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

target

_blank

_parent

_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 suchcharacters 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




Cascading Style Sheets (CSS)

Introduction

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentationsemantics. CSS is designed primarily to enable the separation of document content (written in HTMLor a similar markup language) from document presentation. CSS allows document authors to specifythe presentation of elements on a web page (e.g. fonts, spacing, colors) separately from the structureof the document (section headers, body etc). This separation of structure from presentation simplifiesmaintaining and modifying a web page. If a website’s presentation is determined entirely by a stylesheet, 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 thespecification of presentation characteristics, enable multiple pages to share formatting, and reducecomplexity and repetition in the structural content. Style sheets centralize the commands for certainvisual effects in one place, instead of scattering them throughout the document. CSS can also allowthe 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 determinewhich style rules apply if more than one rule matches against a particular element. In this so-calledcascade, 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).




• 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 propertydefinitions (declarations), which are enclosed in braces ({ }).

• The rules are composed of property / value pairs. The properties are all formatting propertiesof 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 kindof match expression. Selectors may apply to all elements of a specific type, or only those elementsthat match a certain attribute. Elements may be matched depending on how they are placed relative toeach other in the markup code, or on how they are nested within the document object model.

Style Element

<style> </style>




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 styledefinition. The content of the style element needs to follow style definition guidelines. These styledefinitions specify how HTML elements should be rendered in a browser. A document’s <style>section appears inside the document’s <head> section. Multiple <style> sections are permissible.

The type attribute of style element defines the content of the style element. It specifies theMIME 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 anoptional 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 selectedelement. Inline style declares an individual element’s format using the attribute style. It is used whenwe want to simply assign a few styles to one individual element. It is implemented by adding a styleattribute to a specific instance of an element.

Syntax: <element style=“property:value; property:value; . . . ” ></element>

Eg: <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 whichwe apply it.

• Inline style command has a higher priority and overrides any external or document styles.




• 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 enablesus to embed an entire CSS document in an HTML document’s head section. It is used when a singledocument 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 thedocument. This block consists of a set of style rules, where each rule defines a style for an HTMLelement or group of elements present in the same document.

Styles placed in the head apply to matching elements wherever they appear in the entiredocument. Style commands only apply to the document they are embedded in. We need to reapplystyle information for other documents. The style element’s type attribute specifies the MIME type

(Multipurpose Internet Mail Extension) that describes a file’s content. CSS documents use the MIMEtype 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 automaticallyinherit 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>




3. External Style Sheet (Linked Style Sheet)

An external style sheet is simply a CSS file containing all the style specifications for HTMLtags or classes. The common extension indicating that the document provides style sheet informationis .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 createdocuments with a uniform theme. With an external style sheet, we can change the look of an entireWeb site by changing one file. Style information may be cached by the browser. In some cases it mayrequire 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 thehead section and can appear any number of times. The <link> tag defines the relationship between adocument 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 linkeddocument. 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 takesone 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>




• Each level of styles overrides the previous level where there are duplicate properties beingdefined.

• In case of multiple sheets in the same document, the sheets are applied in order, withsubsequent definitions overriding any previous definitions.

• Note that properties are only overridden when they appear multiple times. Otherwise, thestyles 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 attribute’s 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: <element class=“classname” > </element>

Eg: <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 haveformatting variations for different instances of a single element or we want different elements to sharethe 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>



p.special {font-family: Tahoma; text-align:center;}

.news {font-family: Arial; color: green;}

</style>

</head>

<body>


<p class=“special”> Textbook on the internet concepts </p>




<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’ classname.

• 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. Itstands 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 attributevalue. We can specify a style for a single, unique element by referencing the value in its id attribute.

Syntax: <element id=“id” > </element>

Eg: <p id=“para1”> paragraph </p>

ID Selector

The id selector is used to specify a style for a single, unique element. The id selector uses theid attribute of the HTML element to uniquely reference a particular element. It refers to the valuesfound 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>



#para1 {font-family: Tahoma; text-align:center; color:red;}

#para2 {font-family: Arial; color: green;}

</style>

</head>

<body>


<p id=“para1”> Textbook on the internet concepts </p>

<h2>HTML Basics</h2>




<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 Description Example

elementSelects all elements of the name specifiedin the rule.

h1 {color: red;}

/* makes all h1 tags red */

.classSelects any tag with the specified classvalue.

.note {color: yellow;}

/* makes all tags withclass=‘note' yellow */

element.classSelects the specified elements with a

particular class value.

h1.note {text-decoration:underline;}

/* underlines all H1 tags withclass=‘note' */

#id Selects any tag with an id attribute set.#test {color: green;}

/* makes a tag with id=‘test'green */

Absolute and Relative Positioning of elements

The position property gives authors greater control over how document elements aredisplayed. Normally, the elements are placed in the order they appear in the document. Specifying an

element’s 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 theywould ordinarily be or relative to a parent element, or another element, or even to the browser windowitself. 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 enclosingobject as the origin point, 0, 0. Often, if the tag is directly enclosed in the <body>, the origin will bethe upper-left-hand portion of the screen, but it might not necessarily be if we consider positionedelements that contain other positioned elements. Values for the x coordinate increase to the right; yvalues increase going down from a positioned origin. A value such as 10,100 would be 10 units to theright and 100 units down from the origin. Values can be specified as a length in a valid CSSmeasurement (such as pixels) or as a percentage of the containing object's (parent's) dimension.

The position property has the following values:




Eg: <html>

<head>

<title>Z-index Example</title>


#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 thesecond 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 structureHTML 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.




• 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>



#para1 {font-family: Tahoma; text-align:center; color:red;}

.div1 {font-family: Arial; color: green;}

</style>

</head>

<body>


<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 insidethe <div> element.




**********************************************************************************

NETWORK COMPUTING Mod 1

Documents

Transcript of NETWORK COMPUTING Mod 1