Chapter 1 Basics of Web Technology

The Internet is a global network of networks that connects computer users around the world. Once your computer is connected to the Internet, you can send electronic mail (e-mail) messages to other users and gain access to resources that are available on other computers. The Internet uses a standard communication protocol called TCP/IP (Transmission Control Protocol/Internet protocol), which every computer attached to the Internet, must be able to use.

Actually a protocol is a set of rules, which governs the communication between two devices.

This simple definition certainly doesn’t capture the excitement generated by the Internet, or describe the breadth and depth of the information and services offered through the Internet. But it does include the one key point that defines a computer that is on the Internet: It must support the TCP/IP protocol. You will learn more about computer protocols in Internet Protocols.

What the Internet isn't is almost as significant as what it is:

 The Internet is not a thing, with boundaries and shape and size. It is dynamic— constantly changing as people log on and off, servers are added and removed, and communication paths are shifted to compensate for heavy traffic or outages.

 The Internet is not a business. Although it provides an opportunity for many different businesses, no one person or organization owns or controls the Internet.

 The Internet is not the same as the World Wide Web. The Internet provides the infrastructure that supports the Web, but the Web is only one of the services that use the Internet. With powerful new Web browsers such as Internet Explorer 5.0 that provide access to most Internet services through one user interface, many people never know when they have left the Web and are using another Internet service.

® The Internet is not the information superhighway (the popular euphemism for the National Information Infrastructure, the U.S. Government's answer to high-speed information access). The Internet may end up being part of the information superhighway, but they are not synonymous.

Web Browsers

To view a Web document, you need a Web browser such as Internet Explorer and Netscape Communicator. A browser is a client application that enables the client computer to gain access to a Web server or other Internet servers, such as FTP and Gopher[1]. A browser also interprets and displays documents.

(i) What is networking?

Any time you connect two or more computers together so that they can share resources, you have a computer network. Internet is the global network connecting geographically separated computers together over transmissions lines.

Network administrators quickly figured out that the Web's ability to present almost any kind of information and facilitate virtual meetings could work on their company local-area networks (LANs) if they installed Internet server software, such as Microsoft Internet Information Server (IIS), on one of their company servers. They could then use the same technologies developed for the Internet to disseminate information such as software patches, catalog updates, or information from a database within their organization. A system such as this is called an intranet.

(ii) Transmission media

Transmission media is those types:

(i) Telephone lines

(ii) Coaxial cable

(iii) Fibre-optics cable.

(iv) Microwave.

(v) Satellite.

Communication channels

Bandwidth: The range of frequencies assigned to a communication device for its operation, is expressed in terms of hertz. But today Band Width (BW) is generally measured in terms of bps (Kbps, Mbps, etc.) as it is easy to realize the data transfer rate in a media.

Narrowband: This is channel with frequency lesser than that required for voice transmission rate. It usually, range from 5 to 30 cps (Character per second).e.g. telegraph.

Voice band-This channels is standard telephone line over which transmissions of data can take place at the rate of 1,000 cps. These channels required modems.

Broadband: These channels are used when large volumes of data have to be transmitted at high speeds, say, in the range of 100000 cps. Such capacities can be achieved only with transmissions through coaxial cable, fiber-optic cable, microwave and satellites.

Communication mode

There are three different modes of communications:

i) Simplex: One direction only that is, send only or receive only

ii) Half-Duplex: Both direction but only at one direction at a time

iii) Full-Duplex: Simultaneously in both the direction.

The capacity of the transmission medium stated in bits per second (bps) or as a frequency (Hz). Generally, a higher bandwidth number indicates faster data-transfer capability.

B. Internet Protocols

(i) TCP/IP (Transmission Control Protocol/Internet Protocol)

A combined set of protocols that perform the transfer of data between two computers. Since the development of the TCP/IP family in the 1970s, several protocols have been added; the most significant is Hypertext Transfer Protocol (HTTP). HTTP was originally created to publish and view linked text documents on the World Wide Web (WWW), but has been extended to display and run a growing variety of graphic, sound, video, and other multimedia content.

The TCP/IP protocol makes communication possible between computers running on different operating systems and in different network environments. People all over the world can exchange any kind of information that can be digitized and stored on a computer, including text, word-processor documents, pictures, video, audio, and computer programs.

The address that is used at the computer level to uniquely identify a specific computer is called the Internet protocol (IP) address. An IP address consists of four sets of numbers, separated by periods, such as 131.107.1.7 or 131.107.1.240.

Although this addressing scheme is easy to work with in a computer program, people have an easier time with names such as "microsoft.com". The Domain Name System (DNS) maps easy-to-remember text addresses to numeric IP addresses. This system divides all computers on the Internet into categories, based on either organization type or geographic location.

Internet protocols, which are agreed-upon standards for exchanging data, serve much the same purpose, allowing data exchange between networks on different platforms and in different environments.

The basic protocol for communicating on the Internet is TCP/IP. TCP and IP provide low-level functions needed for many applications, and are part of a family of protocols that includes higher-level protocols such as HTTP and SMTP. These higher-level protocols sit on top of TCP/IP and give you access to services such as transferring files between computers, sending e-mail, or finding out who is logged on at another computer. Some of the services that you will learn about in this topic have their own protocol. The following illustration shows the relationship between the different protocol layers.

C. Internet Services and protocols

(i) WWW (World Wide Web)

The World Wide Web (WWW) was created by scientists at, CERN who wanted to share and gain access to research information through a common interface. Using a common interface reduced the number of steps required for gaining access to the various Internet services.

The World Wide Web is a term used to describe the interlinked collection of hypertext documents and multimedia content available on the Internet. You use a Web browser, such as Internet Explorer, to search for, find, view, and download information on the Internet.

The Web has developed into a vast network of interactive documents that can be easily located and read using various browsers. Over the last few years, the Web has become one of the most popular Internet services, and is the driving force behind the commercialization of the Internet.

The Web is a collection of Internet host systems that make these services available on the Internet using the HTTP protocol. Web-based information is usually delivered in the form of hypertext and hypermedia using HTML.

(ii) DNS (Domain Name Service)

A protocol that provides an Internet-wide database of host and domain names. For example, DNS is used to find the IP address of a host name written as microsoft.com.

The DNS provides a convenient way to refer to a specific host site on the Internet, but you rarely want only to connect to a computer. More often, you want either to address e-mail to a person who has an account on that computer, or to retrieve information from a file on the computer. The addressing scheme for each of these activities is a variation on the server name; the next two topics explain the two schemes.

To refresh your memory, DNS is the service that translates your machine’s IP address into a domain address. You can set up your domain name several ways. You can either maintain your own DNS server or have your ISP maintain DNS for you.

If you decide to maintain your own DNS server, you need to install the DNS server that comes with Windows NT Server. This would give you the advantage of being able to make immediate changes to your domain as opposed to having to notify your ISP and wait for the ISP to make the changes. One warning before you proceed: maintaining a DNS server on the Internet is complicated. DNS has a specific file format that it uses for its database. This format can be very difficult to understand, and it is beyond the scope of this book to show you how to create DNS databases. Because of its complexity, we recommend that you use your ISP’s DNS server.

So, if you don’t want to spend the time to maintain your own DNS, you can get DNS service from your ISP in one of two ways. One option is to have a third-level domain name off your ISP’s domain. For example, if you wanted to use the domain name kahn and your ISP was GUIware, your domain address would be www.kahn.guiware.com. Your ISP probably charges a small fee for the service. Another option is to have your own second-level domain name hosted on your ISP’s DNS server. In this case, your domain address would be www.kahn.com. Besides having a second-level domain name, this has the advantage of passing the administration of your DNS server to your ISP. Your ISP probably charges a higher fee for this, but it may well be worth it if you don’t know how to manage a DNS.

(iii) DHCP

WINS is another name-resolution service like DNS, which has a distinct advantage if you are using DHCP. In a Microsoft networking environment, WINS doesn’t require the administrator to enter TCP/IP information for each workstation in the database. As a workstation boots up on the network, it will register itself with the WINS server. If you are using DHCP to configure your TCP/IP properties, it’s possible that the IP address for a computer might change from day to day. If this happens, a DNS server would have to be manually updated to track the new IP address. WINS, on the other hand, gets the new IP address from the workstation when it acquires a new IP address. If you have only a single computer or a small network of computers, you might not want to install WINS. If you have a large network, you should use WINS. You should definitely use WINS if you are using DHCP.

(iv) FTP

The Internet standard high-speed protocol for downloading or transferring files from one computer to another.

FTP servers can be either public or private. Anyone can log on to a public server. To log on to a private server, on the other hand, you must be a registered user of the server. In either case, the FTP protocol requires that you supply a user name and a password.

(v) HTTP (Hypertext Transfer Protocol)

A URL is a string representation of the name and address of an object on the Internet. There are two parts to the syntax of a URL. The first part is the name of a protocol, and the second part is protocol-specific. For a Hypertext Transfer Protocol (HTTP) URL, the protocol is HTTP, which is followed by a colon. The protocol-specific part after that is two slashes, then a host name, an address, and an optional port number. The whole thing comes out like this: http://www.microsoft.com. The nice thing about the URL syntax is that it is extensible. Just about any protocol you define can be encoded as a URL. Examples include File Transfer Protocol (FTP) and Gopher. In addition, the URL syntax is easily read and understood.

(vi) FTP(File Transfer Protocol)

File Transfer Protocol (FTP) is the protocol used to transfer files between two computers on a TCP/IP network. FTP was one of the earliest protocols used on TCP/IP networks and the Internet. Although the World Wide Web has replaced most functions of FTP, FTP is still widely used to copy files between computers.

(vii)Telnet

Telnet offers a way to log on to and work from another computer. By logging on to another system, users can access Internet services that they may not have on their own computers, such as extensive newsgroups, the latest versions of popular software, group games, or live chat rooms.

(Vii) Chat

Microsoft Chat version 2.0, formerly called Comic Chat, is a program that allows you to combine text with novel graphical features as you participate in a real-time conversation with two or more people on the Interne

(IX) Electronic mail (e-mail)

E-mail is the most popular service on the Internet. You can use it to send messages to any person connected to the Internet through an access provider that supports the Simple Mail Transport Protocol (SMTP) and the Post Office Protocol Version 3 (POP3).

SMTP (Simple Mail Transfer Protocol)

The Internet standard protocol for transferring electronic mail messages from one computer to another.

Web Pages

Your Web browser interprets and displays Web pages. Web browsers typically can display text (.txt) files and various graphic and multimedia format files. You can see the power of the World Wide Web in pages that contain hypertext and hypermedia. You use Hypertext Markup Language (HTML) to add hypertext and hypermedia to Web files by linking files to one another. These files appear in the browser as part of the page when the page is retrieved. The following paragraphs briefly look at the different ways a browser interprets and displays files.

ISP (Internet Service Provider)

The online services have a lot to offer. But if all you want is a reasonably fast connection to the Internet without all the frills, you may be better off going through an Internet service provider (ISP). To view an illustration showing the relationship between the user, the Internet service provider, and the Internet

A Proxy Server acts as a secure gateway that can provide Internet access to every desktop in your organization without giving up control or security of your intranet.

A gateway refers to software or a computer running software that enables two different networks to communicate.

The following illustration shows the Microsoft Proxy Server gateway.

Backbone

A high-speed line or series of connections that form a major pathway within a network. The term is relative, because a backbone in a small network will likely be much smaller than many non-backbone lines in a large network.

Gateway

A computer that connects one network with another when the two networks use different protocols. The UUNET computer connects the UUCP network with the Internet, providing a way for mail messages to move between the two networks.

URL (Uniform Resource Locator)

An address that uniquely identifies a World Wide Web site, usually preceded with http:// such as in this fictitious URL http://www.example.microsoft.com/. A URL can contain more detail, such as the name of a page of hypertext, usually identified by the suffix .html or .htm.

Chapter 2 HTML

What is HTML?

Hypertext Markup Language contains codes behind any standard web page. It uses tags to tell the web browser how to present the information in the web page.

Writing in a markup language means that you start with the text of your page and add special tags around words and paragraphs. The tags indicate the different parts of the page and produce different effects in the browser.

HTML files contain two things:

· The text of the page itself

· HTML tags that indicate page elements, structure, formatting, and hypertext links to other pages or to include media

Essentials of HTML

Without HTML, the World Wide Web will not exist. HTML allows the individual elements on the Web to be brought together and presented as a collection. Text, images, multimedia, and other files can all be packaged together using HTML.

All the contents for the Web page is linked together using HTML. HTML codes control the appearance, layout, and flow of the page. The amazing thing about HTML is that the web page is prepared simple text codes which are understandable to all who is interested in knowing about HTML.

Browsing the World Wide Web

The users view information within the World Wide Web by using web browsers. A browser is a software program used to view HTML documents within the WWW. The primary goal of a web browser is to send and receive data from the web server. The underlying markup language used to define the contents of pages in the World Wide Web is HTML. Thus, the server sends the web page in HTML format and the browser interprets that HTML code, and finally presenting the page to the user. The most commonly used browsers around the world are Internet Explorer, Netscape Navigator, Mosaic etc.

Publishing content on the World Wide Web

1. You can create a personal home page and leave your mark on the World Wide Web.

2. You can create a page for your company in order to advertise and promote products and services.

3. You can build a catalogue on the World Wide Web, highlighting about product descriptions and pictures. You can even incorporate fill-in order forms so that your customers can order products from you online.

4. You can create a search phone directory for your company or organization.

5. You can teach people how to dissect a frog.

6. You can create a newsletter on the web, with pictures and sounds.

Using HTML Editor

HTML is not anything more than plain text. Therfore, you don't need any special editors or compilers to create HTML files. In fact, you can create all your HTML files with the simplest of text editors. The easiest way to work on HTML pages is to use MS-Windows Notepad. Other text editors used are MS-FrontPage, Macromedia Dreamweaver, EditPlus etc.

SELF-REVIEW QUESTIONS

1. What is Hypertext Markup Language?

2. How can HTML help in preparing the web pages?

3. Illustrate some uses of HTML in the World Wide Web.

4. Name some of the text editors used in preparing web pages.

5. The commonly used web browsers for viewing the HTML pages are………….

Chapter 3

HTML Tags

Hypertext Markup Language is made up of different tags and their attributes. Tags form the base of HTML. They are inserted in order to obtain the desired output through the web browser.

When defined, tags are considered as those codes that are embedded inside the angle brackets (<>).

For example, <P> tag is used for giving a paragraph break. In most of the cases, ending tag is also used.

For example, <H1>…</H1> which is used as a heading tag.

HTML SYNTAX

The HTML tag is given in the following way:

<TAG>The text to be affected</TAG>

HTML tags generally have a beginning and an ending tag, surrounding the text that they affect. The beginning tag "turns on" a feature (such as headings, bold, and so on), and the ending tag turns it off. Closing tags have the tag name preceded by a slash (/).

Every tag must be enclosed within angle brackets (< >).

HTML Document Structure

The HTML document is mainly divided into two sections -- Head section and Body section.

<HTML> This tag recognizes the document as a HTML document.

<HEAD> This tag identifies the beginning and end of the Header section.

<TITLE> This tag is used to place the text in the title bar of the browser window.

<BODY> This tag recognizes the beginning and end of the Body section.

v INPUT

<HTML>

<HEAD>

<TITLE>My first Web</TITLE>

</HEAD>

<BODY>

College of Software Engineering

Putali Sadak , Kathmandu

Phone : 227820 , 256769

</BODY>

</HTML>

Save the file in html or htm file extension.

v OUTPUT

The HTML codes are mainly used in the Body section of the document. The tags and their attributes make up the main content of the document.

Formatting Tags

The web browser only identifies the single spaces between the words or text. For giving line breaks and paragraph breaks, formatting tags are used.

For giving line break, <BR> tag is used. On inserting this tag, the text will be inserted in a new line.

For giving paragraph break, <P>….</P> tag is used. It defines a particular text as a paragraph. </P>tag can be omitted.

<PRE>….</PRE> tag is used for displaying the text in a manner similar to the one typed in the HTML document in Notepad. The text will appear in a font different from the font displayed using other tags.

<BLOCKQUOTE>….</BLOCKQUOTE>tag is used for giving indent at the beginning of the paragraph.

<CENTER>….</CENTER> tag is used for centering text or paragraph.

v INPUT

<HTML><HEAD>

<TITLE>USING SIMPLE FORMATTING TAGS</TITLE>

<BODY>

<CENTER>WELCOME TO CSE</CENTER>

College of Software Engineering was set up in 1997.

<BR>

It is the only training center in Nepal certified by international IT companies like Microsoft, Novell etc.

<P>

A major expansion has taken place in recent times with the launch of two courses--Post-graduate Diploma in Software Engineering and Bachelor in Information Technology.

</P>

The major courses taught here are

<PRE>

DSE

MCSE

PGDSE

BIT

</PRE>

<BLOCKQUOTE>

The main branches of CSE in Kathmandu are located in Putalisadak and Pulchowk.

</BLOCKQUOTE>

</BODY></HTML>

v OUTPUT

Text-formatting Tags

Apart from simple formatting tags, text-formatting tags are also used. These tags are used for changing the color, size, alignment, font etc. of the text.

<B>…. </B>tag for bold, <I>….</I>tag for italics, <U>….</U>tag is used for underline.

<EM>….</EM>tag is used for emphasizing the text. It is very similar to <I> tag.

<STRONG>….</STRONG> tag displays the text in strong or bold style.

<BIG>…</BIG> tag displays the text in bigger font whereas the

<SMALL>….</SMALL> tag is used for making the text appear in smaller font.

The superscript (<SUP>….</SUP>) and subscript(</SUB>….</SUB ) tags are used for placing the text above and below the specified text.

<STRIKE>….</STRIKE>tag is used for striking the text.

Heading tags are used for emphasizing the topic of the text that follows the heading. There are six levels of heading tags used in HTML from <H1>….</H1> to <H6>….</H6>. The <H1> tag gives the biggest font while <H6> tag gives the smallest font. Attributes like align(center, right, left) are also used to change the alignment of the text.

<HR> tag is used to draw horizontal rule separating major sections of text, or to insert a line across the page. Attributes like COLOR, WIDTH, SIZE, NOSHADE and ALIGN are used to change the shape, size and alignment of the <HR> tag.

NOTE: Attributes are placed inside an opening tag. They modify the tag and allow the tags to work in a specified manner. In other words, attributes are special code words used inside an HTML tag to control exactly what the tag does.

v INPUT

<HEAD>

<TITLE>My first Web</TITLE>

</HEAD>

<BODY>

<P>

<H1>College of Software Engineering</H1>

<H2>Putali Sadak , Kathmandu</H2>

<H3>Phone : 227820 , 256769</H3>

<P>

Programming Courses in CSE

<HR>Programming in Access 2000

<BR>Programming in Visual FoxPro

</BODY>

</HTML>

v OUTPUT

v INPUT

<HTML>

<HEAD>

<TITLE>Introduction</TITLE>

</HEAD>

<BODY>

<P><CENTER>

<H1>College of Software Engineering</H1>

</center>

<H6><U>Visual Programming, Client server Programming, Networking,

RDBMS , Web Designing , Auto Cad and Much More</U></H6>

<PRE><H5><B>

<U>Visual Programming</U> <U>RDBMS and Client Server</U> <U>Internet Programming</U>

Visual C++ Access Programming Java

Visual FoxPro MS_SQL VBScript

Visual Basic Oracle / Developer Web Design

Visual Interdev Power Builder(Front End) VJ++

</B></H5></PRE>

<P>

<BIG><STRONG><U>Facilities</U></STRONG></BIG>

<BIG>

<BR>More than 50 Computers only in the labs.</BR>

Pentium , Pentium<SUB>2</SUB> and Pentium <SUB>3</SUB> Computers , All in Well Established Network</B></U>

<BR><U><B><I>10 hours Free Internet Access and Subscription Email

</BIG>

<P>Attention:

<BR><BIG>Now its time to join <B><I>CSE</I></B> to make your future bright</BIG></BR></BODY></HTML>

v OUTPUT

<FONT>…..<FONT>tag is used for setting the size, color and face of any text on a Web page, <FONT> tag is used.

For instance, <FONT SIZE=5 COLOR="purple" face="Copperplate Gothic Bold" >This text will appear big in purple color with Copperplate Gothic Bold font.</FONT>

The SIZE attribute can take any value from 1 (tiny) to 7 (fairly big), with 3 being the normal default size.

The COLOR attribute can take any of the following standard color names: black, white, red, green, blue, yellow, aqua, fuchsia, gray, lime, maroon, purple, navy, olive, silver, or teal.

v INPUT

<HTML><HEAD>

<TITLE>USING FONT TAG</TITLE>

<HEAD>

<BODY>

<H1 ALIGN=”CENTER”><FONT COLOR=”BLUE” SIZE=”4” FACE=”TIMES NEW ROMAN”>Welcome to CSE</FONT></H1>

</BODY></HTML>

v OUTPUT

If <TITLE>tag is used as the header of the document, the <ADDRESS>…. </ADDRESS> tag is used as the footer of the document. Information relating to copyrights or address of the creator of the web page is usually placed at the bottom of the web page using this tag. It should always be used in the document just before ending the <BODY> tag.

v INPUT

<HTML>

<HEAD>

<TITLE>USING ADDRESS TAG</TITLE>

</HEAD>

<BODY>

……….

…………

<CENTER><ADDRESS>

All Copyrights Reserved</ADDRESS></CENTER>

</BODY>

</HTML>

v OUTPUT

Summary of tags

*Tag*	*Function*
<HTML>...</HTML>	Encloses the entire HTML document.
<HEAD>...</HEAD>	Encloses the head of the HTML document.
<TITLE>...</TITLE>	Indicates the title of the document. Used within <HEAD>.
<BODY>...</BODY>	Encloses the body of the HTML document.
<P>...</P>	A paragraph. The closing tag (</P>) is optional.
<BR>	A line break.
<HR>	A horizontal rule line.
<CENTER>…</CENTER>	Positions the text to center.
<H1>...</H1>	A first-level heading.
<H2>...</H2>	A second-level heading.
<H3>...</H3>	A third-level heading.
<H4>...</H4>	A fourth-level heading (seldom used).
<H5>...</H5>	A fifth-level heading (seldom used).
<H6>...</H6>	A sixth-level heading (seldom used).
<SMALL>	Small text
<BIG>	Big text
<SUP>	Superscript
<SUB>	Subscript
<STRIKE>	Strikethrough (draws a line through text)
<U>	Underline
<PRE>	Pre formatted text
<BLOCKQUOTE>…. </BLOCKQUOTE>	Indents the paragraph by 5 spaces.
<EM> or <I>	Emphasized (italic) text
<STRONG> or <B>	Strong (boldface) text
<ADDRESS>…</ADDRESS>	Used as the footer of the web page.

*Tag*	Attribute	Function
<FONT>...</FONT>		Controls the appearance of the enclosed text.
	SIZE="..."	The size of the font, from 1 to 7. Default is 3. Can also be specified as a value relative to the current size; for example, +2.
	COLOR="..."	Changes the color of the text.
	FACE="..."	Name of font to use if it can be found on the user's system. Multiple font names can be separated by commas, and the first font on the list that can be found will be used.
<HR>		Creates a horizontal line.
	SIZE=”…”	Specified either in pixels or percentage
	WIDTH=”..”	Specified in pixels
	COLOR=”…”	Changes the color of the line
	ALIGN=”…”	Changes the position of the rule usinf(center,right,left)

SELF-REVIEW QUESTIONS

1. Define tag, giving examples. What do you mean by attributes?

2. What is the use of PRE and BLOCKQUOTE tags?

3. What is the suitable tag used for giving heading to a web page?

4. How is FONT tag used? What are its attributes?

5. Name the tags for breaking paragraph and line?

6. What are the different types of text formatting tags?

Chapter 4

Lists and Special Characters

Lists are used in HTML pages to present the information concisely and in easy to grasp format. Different types of list are used in web pages. While using lists, a standard list identifier is created and the information is listed under it.

ORDERED LIST

Any list prepared in a numbering format or holding a sequence is an ordered list.

Ordered list begins with an <OL>tag. The list of items is created after that by using <LI> tag.

The attributes of <OL> tag are TYPE and START. The TYPE attribute controls the numbering system used in ordered list.

Type: ‘1’ produces the list in 1,2,3,………order.(Arabic)

Type: ‘A’ produces the list in A,B,C,………order.(Alphanumeric, Uppercase)

Type: ‘a’ produces the list in a,b,c,………order.(Alphanumeric, Lowercase)

Type: ‘i’ produces the list in i,ii,iii,………order.(Lower-roman)

Type: ‘I’ produces the list in I,II,III,………order.(Upper-roman)

The START attribute alters the numbering sequence.

UNORDERED LIST

Unordered list presents the information in bulleted format. Within <UL>…. </UL>tag, <LI> tag is used for listing the items.

TYPE is used as an attribute of unordered list.

Type: “Disc”/“Fill Round”----solid round black bullet

Type: “Square”----solid square black bullet

Type: “Circle”----solid black circled bullet

DEFINITION LIST

Glossary lists or definition lists, in which each item in the list has a term and a definition for that term, is arranged in a manner that the term is somehow highlighted or drawn out from the text

<DL>…. </DL> tag is used for giving definition lists. This tag is accompanied by other two tags, namely <DT> and <DD>. <DT> tag is used as Definition Term and <DD> tag is used for Definition Description.

NESTED LISTS

The list structure inside another list as one of its elements is nested lists. The nested list just becomes another element of the first list, and it is indented from the rest of the list.

COMMENTS

You can use comments in HTML pages using < ! - - Comment Text -- > .Text in comments is ignored when the HTML file is parsed; comments don't ever show up on screen.

v INPUT

<HTML>

<HEAD><TITLE>

Microsoft Certified Solution Developer(MCSD)

</TITLE></HEAD>

<FONT SIZE="5" COLOR="BLUE"> 

Microsoft Certified Solution Developer(MCSD) </FONT>

<HR COLOR=RED>

The MCSD certification identifies developers with experience working with Microsoft operating systems, development tools and technologies.

<BR>

<B><I><U>

To achieve the MCSD certification, you must pass four exams:

</U></I></B> 

<OL TYPE="1" START="1"><U>Exam Papers</U>

<LI>Windows Architecture I

<LI>Windows Architecture II

<LI>Elective

</OL>

<P><H4> 

<UL><U>Some of the Electives Include :</U>

<LI>Microsoft Visual Basic

<LI>Microsoft Access

<LI>Database Design on MS_SQL Server6.5

<LI>Developing application with C++ and MFC

</UL>

<DT><B><U>College of Software Engineering</U></B>

<DD>The Only One IT Center Where You Can Appear for Microsoft Certification in Nepal.

</BODY>

</HTML>

v OUTPUT

SPECIAL CHARACTERS

Special Characters are the symbols or character entities used on a web page. Such characters are used when they are preceded by ampersand (&) and followed by semi-colon (;).

Some instances are given below:

v INPUT

<HTML>

<HEAD>

<TITLE>USING SYMBOLS</TITLE>

<BODY>

AMPERSAND : &AMP; <P>

COPYRIGHT : &COPY; <P>

LEFT-ANGLE BRACKET : &LT; <P>

RIGHT-ANGLE BRACKET : &GT; <P>

DOUBLE QUOTES : &QUOT;

</BODY></HTML>

v OUTPUT

Summary of Tags

*Tag*	*Attribute*	*Function*
<OL>…</OL>	TYPE=”…”	The type of numerals to label a list ---A, a, I, i, 1
	START=”…”	The value with which to start the list.
<UL>…</UL>	TYPE=”…”	The bullets to be used to label to list. ---disc,circle, square.
<LI>		A list item to be used inside <OL> or <UL> tag.
<DL>…</DL>		A definition list.
<DT>		A definition term to be used inside <DL>tag.
<DD>		A definition description to be used in <DL> tag.
<!--………à		To insert the comments.
&….;		Inserts symbol like &,<,> etc.

SELF-REVIEW QUESTIONS

1. What are the different types of lists used in HTML?

2. State the type of lists used in ordered list.

3. Why are comments used?

4. Illustrate some instances of special characters.

Chapter 5

HYPERLINKS

Hyperlinks connect two different documents. You can link to one of your own documents or to any other document on the World Wide Web. You can even link to a different section in the same document.

Creating hyperlinks allows the user to switch between pages as and when required.

Clicking on any text or image will open an entire new web page.

To create a link in an HTML page, <A>...</A> tag is used. The <A> tag is often called an anchor tag, as it can also be used to create anchors for links.

· Locate the place in the HTML document where the hypertext link has to be inserted. Type “<A HREF=", followed by the path of the document to be linked to. Close the tag by typing ">”.

· Type some descriptive text (also known as the link text) after the anchor tag to let readers know something about where this link will take them.

· Finish the anchor tag by typing </A> on the same line.

· Once the link is created, check to make sure it works by clicking on it while using the Web browser. By default, most Web browsers display hypertext links as underlined text in a color different from normal text Also, the normal cursor changes. This helps the readers to know that clicking the text will take them to another document.

v INPUT

<HTML>

<HEAD>

<TITLE>Microsoft Certification

</TITLE>

</HEAD>

<BODY>

<H2>College of Software Engineering</H2>

<P>

<H3><U>Understanding Microsoft Certification</U></H3>

<H4>

<OL>

<LI>Microsoft Certified Professional (MCP)

<LI>Microsoft Certified Solution Developer (MCSD)

<LI>Microsoft Certified Systems Engineer (MCSE)

<LI>Networking Essentials

<LI>Windows NT Workstation 4.0

<LI>Windows NT Server 4.0

<LI>Elective

<LI>Microsoft TCP/IP

<LI>Microsoft IIS 4.0.

<LI>Microsoft Exchange Server

</UL>

</OL>

<LI>Microsoft Certified Trainer

</OL>

<A HREF="C:\MCSE.HTML">MCSE Details</A>

</BODY>

</HTML>

(Note: If the linked files are in the same directory or at same location, we can simply give only file name to be linked instead of giving full path. E.g. <A HREF=”MCSE.HTML>MSCE Details </A>

v OUTPUT

Hyperlinks can be created to connect to an already hosted website through any web page.

v INPUT

<HTML>

<HEAD>

<TITLE>USING LINKS TO CONNECT TO EXTERNAL SITES</TITLE>

<BODY BGCOLOR=”GREEN”>

<H2 ALIGN=”CENTER”>VISIT THE SITES TO KNOW ABOUT NEPAL</H2><P>

<OL>

<LI><A HREF=”http://www.nepalsearch.com”>

www.nepalsearch.com</A>

<LI><A HREF=”http://www.explorenepal.com”>

www.explorenepal.com</A>

<LI><A HREF=”http://www.nepalnews.com”>

www.nepalnews.com</A>

<LI><A HREF=”http://www.yokeho.com”>

www.yokeho.com</A>

</OL>

</BODY></HTML>

v OUTPUT

Intra-Page links or Bookmarks

Links created in a page can be opened at a different location on the same page. Such links are called intra page links or bookmarks. It is also possible to jump to a particular location on another web page using bookmarks.

Using Named Anchors

To use the intra-page links Named Anchors are used.

For instance,<A NAME="top"></A>

This is a different use of the <A> anchor tag; it is necessary to give a name at the specific point on the page where the tag occurs. The </A> tag must be included, but no text is required between <A> and </A>.

The # symbol identifies the word "top" as a named anchor point within the current document, rather than a separate page. When a reader clicks on “TOP”, the web browser will display the part of the page starting with the <A NAME="top"> tag.

v INPUT

<HTML>

<HEAD><TITLE>

Visual Basic Information

</TITLE></HEAD>

<BODY>

<A HREF="#LAST">GO BOTTOM</A> <!--Linked to the location named as "LAST" - ->

<BR>

<A HREF="#DATABASE">DATABASE SECTION</A> <!--Linked to the location named as "DATABASE" - ->

<BR>

<A HREF="#TOP">WEB SECTION</A> <!--Linked to the location named as "WEB" - ->

<A NAME="TOP"></A><!--A Name "Top" is given to this location - ->

<H3>Mastering Visual Basic 6.0</H3>

<P>

<H3>Table of Contents</H3>

<OL><H4>The Fundamental

<OL>

<LI>Getting Started with Visual Basic

<LI>Visual Basic Projects

<LI>Visual Basic Language

<LI>Working with Forms

<LI>Basic ActivX Controls

</OL>

<A NAME="DATABASE"></A><!--A Name "DATABSE" is given to this location - ->

<OL>Database Programming with VB

<OL>

<LI>Database with VB

<LI>The Active Data Objects

</OL>

<A NAME="WEB"></A><!--A Name "WEB" is given to this location - ->

<OL>Visual Basic and the Web

<OL>

<LI>Introduction to the Web

<LI>Scripting Objects

<LI>Vb and the Web

<LI>Active Server Pages(ASP)

</OL>

<OL>Special Topics

<OL>

<LI>The Multiple Document Interface

<LI>Recursive Programming

<LI>Optimizing VB Applications

</OL>

<OL>

<LI>Introduction to the Web

<LI>Scripting Objects

<LI>Vb and the Web

<LI>Active Server Pages(ASP)

</OL>

<A NAME="LAST"></A><!--A Name "LAST" is given to this location - ->

<A HREF="#TOP">GO TOP</A> <!--Linked to the location named as "TOP" - ->

<BR>

<A HREF="#DATABASE">DATABASE SECTION</A> <!--Linked to the location named as "DATABASE" - ->

<BR>

<A HREF="#TOP">WEB SECTION</A> <!--Linked to the location named as "WEB" - ->

<BR>

</HTML>

v OUTPUT

Email link

Apart from inter-page links and intra-page links, the <A> tag can also be used for creating e-mail links. Email link creates a new message addressed to a specified recipient using the web user’s installed mail client. For this purpose, the email address must be specified after the “mailto:” statement in<A HREF>tag.

v INPUT

<HTML><HEAD>

<TITLE>USING EMAIL LINKS</TITLE>

</HEAD>

<BODY>

Send your email to<A HREF=mailto:info@cse.com.np> CSE</A>

</BODY>

</HTML>

This link will direct the feedback in form of messages, queries and other information of the client to CSE.

v OUTPUT

On clicking the link, screen would display a mail box.

Summary of Tags

*Tag*	*Attribute*	*Function*
<A>...</A>		With the HREF attribute, creates a link to another document or anchor; with the NAME attribute, creates an anchor that can be linked to.
	HREF="..."	The address of the document and/or anchor point to link to.
	NAME="..."	The name for this anchor point in the document.
		“mailto:along with the email address will direct the information of the client to the specified address.

SELF-REVIEW QUESTIONS

1. What is hyperlink? How do you use anchors?

What is the use of intra page links? Illustrate with examples

In what way the email links can be used?

Chapter 6

IMAGES

One of the important features of websites is the image used on it, which has been the center of attraction for the people who surf the net from time to time.

Mainly, GIF and JPEG files are used in the webs. GIF is most of the times used as it supports animation and the file is compressed too. JPEG files are also used but they are not compressed. Using software like GIF Animator and Adobe Photoshop, special effects can be inserted on the images to suit the requirements of a web page.

The images can be inserted on any web page using the <IMG>tag. This tag must always be accompanied by the SRC attribute as it indicates the filename or URL of the image which is to be included.

. To use any image, it necessary that it should be placed in the same root folder where the web page in which it is inserted is placed. Otherwise, the path must be specified in the <IMG> tag in case it is placed outside the root folder.

v INPUT

<HTML>

<HEAD>

<TITLE>USING IMAGE TAG</TITLE>

</HEAD>

<BODY>

v OUTPUT

USING IMAGE ATTRIBUTES

The alignment of the image with respect to the text or the screen can be controlled by using ALIGN attribute.

For aligning the image with the text, there are three choices provided in this attribute.

ALIGN=TOP indicates the text after the image to be written at the top, next to the image.

ALIGN=MIDDLE indicates the text after the image to be written at the middle, next to the image.

ALIGN=BOTTOM indicates the text after the image to be written at the bottom, next to the image.

For aligning the image with respect to screen, the different alignment attributes used are LEFT, CENTER and RIGHT.

BORDER attribute displays a border around the image.

The WIDTH and HEIGHT attributes display the image according to the specified width and height. The attributes are specified in pixels.

HSPACE and VSPACE attributes indicate the amount of space to be left to the left, right, top and bottom of the image.

ALT attribute indicates the text to be displayed in case the browser is unable to display the image specified in the SRC attribute.

Images and Text

The images can be included inside a line of text by adding the <IMG> tag at the appropriate point inside an element tag (<H1>, <P>, <ADDRESS>, and so on):

<H1><IMG SRC="web.gif">The Halloween House of Terror!!</H1>

Image Background

An image can be used as a background for web pages instead of a solid colored background. For that purpose, BACKGROUND attribute is placed in <BODY> tag. The image is "tiled"-i.e. the image is repeated in rows to fill the browser window. The value of BACKGROUND is a filename or URL that points to the image file, for instance:

<BODY BACKGROUND="tiles.gif">

v INPUT

<HTML>

<HEAD><TITLE>WORKING IN IMAGES</TITLE></HEAD>

<BODY BGCOLOR=BLACK TEXT=WHITE>

<H1><IMG SRC="duck.jpg" ALIGN=RIGHT ALIGN=MIDDLE HEIGHT=100 WIDTH=150>

< ! - - The image duck.jpg must exist in the same directory - - >

WEB PAGE DESIGNING AND PROGRAMMING</H1>

<P>Design, Writing, Illustration, and Programming for the

<B>World Wide Web</B></P>

<P>Specializing in:</P>

<UL>

<LI>HTML and Web Page Design

<LI>Illustration

<LI>Forms Design and Programming

<LI>Complete Web Server Installation

</UL>

</BODY>

</HTML>

Image and Links

An image can be used as a link for linking different pages in the web. If an <IMG> tag is used inside the opening and closing parts of a link tag (<A>), that image serves as a clickable hot spot for the link itself:

<A HREF="index.html"><IMG SRC="uparrow.gif"></A>

Adding hotspots to images

Images can be used as navigational tools. The clickable areas that are hyperlinks can be created on an image. An image map is an image composed of a number of hotspots.

Client-side and server-side image maps can be created.

In case of client-side image maps, when the client clicks on any of the image map area defined on the image, the browser sends him to the specified HTML page.

The <IMG> tag uses the USEMAP attribute.

For instance,

In the same HTML file, it is necessary to specify the <MAP>…</MAP> with NAME attribute and <AREA>tag with SHAPE and COORDS attributes in order to specify the map areas. The different types of SHAPE attributes are RECT, CIRC and POLY.

v INPUT

<HTML>

<HEAD>

<TITLE>USING IMAGE MAPS</TITLE>

</HEAD>

<BODY>

<IMG SRC=”vscene.jpg” USEMAP=”#ABC”>

<MAP NAME=ABC>

<AREA SHAPE=”RECT” COORDS=”141,90,212,158” HREF=”ONE.HTM”>

<AREA SHAPE=”CIRC” COORDS=”177,98,28” HREF=”TWO.HTM”>

<AREA SHAPE=”POLY” COORDS=” 37, 51, 37, 125, 88, 82, 50, 90” HREF=”THREE.HTM”></MAP>

</BODY></HTML>

v OUTPUT

Summary of Tags

*Tag*	*Attribute*	*Function*
<IMG>	SRC	Specifies the path of the image file
	ALIGN	CENTER,LEFT, RIGHT for aligning image with the screen. TOP, MIDDLE, BASELINE for aligning image with the text.
	BORDER	Creates a border around the image.
	WIDTH	Changes the width in pixels.
	HEIGHT	Changes the height in pixels.
	HSPACE	Positions the image from the left and right.
	VSPACE	Positions the image from the top and bottom.
	ALT	Text to be displayed in case the image is not supported in any browser.
	USEMAP	Used with ‘#’ to indicate a map area.
<MAP>…</MAP>	<NAME>	Indicates the name of the map area.
<AREA>	SHAPE	Specifies the shape of the map area in RECT, CIRC and POLY types.
	COORDS	Specifies the coordinates of the shape area chosen.

SELF-REVIEW QUESTIONS

1. How is image tag used in HTML? What are it’s attributes?

2. What are the alignment attributes of the image with respect to the screen and text?

3. How do you add hotspots on the image?

4. Is it possible to give a background to the web page? If yes, then how?

Chapter 6

Tables

Tables serve many purposes in HTML pages. Not only they are used in conventional manner to display information in tabular format, they are also used to make the images and text appear at exactly the location on a page that you want to appear.

Tables are specified in HTML row by row, and each row definition contains definitions for each of the cells in that row. Table cells are the individual squares in the table. A cell can contain normal table data or a table heading.

<TABLE>...</TABLE> tag is used to create a table in HTML, which contain the codes for the contents of the table itself

Inside the <TABLE> tag, a number of other tags are used which make up the contents of the table.

<TR>…</TR> tag is used for creating rows.

The table headings label the rows or columns, or both. Table headings are usually appear in a larger or emphasized font and specified through <TH>…</TH> tag.

Table data are the values in the table itself and identified by <TD>…</TD> tag. The combination of the table headings and table data make up the sum of the table.

<CAPTION>tag just before the table rows, and it contains the title of the table. It closes with the </CAPTION> tag. However, it is optional. ALIGN attribute like TOP or BOTTOM is used for changing the alignment of the caption.

Syntax for creating Table in HTML

<TABLE>

<TR>

<TH>Heading</TH>

<TD>Data</TD>

</TR>

</TABLE>

Empty Cells

If you want a cell with nothing in it just define a cell with a <TH> or <TD> tag with nothing inside it:

<TR>

<TD></TD>

</TR>

v INPUT

<HTML><HEAD>

<TITLE>Rows and Cells</TITLE>

</HEAD>

<BODY>

<H3>Creating a simple table

<CAPTION><B>Computer Books Available in the shop</B></CAPTION>

<TR>

<TH>Application</TH>

<TH>Operating System</TH>

<TH>Networking</TH>

<TH>Databases</TH>

<TH>System Programming</TH>

<TH>Front-End Programming</TH>

</TR>

<TR>

<TD>Office 97</TD>

<TD>Windows 95</TD>

<TD>WinNT 4.0</TD>

<TD>Visual FoxPro 6.0</TD>

<TD>Visual Basic 6.0</TD>

</TR>

<TR>

<TD>Office 2000</TD>

<TD>Windows 98</TD>

<TD>Novell Netware</TD>

<TD>Access 2000</TD>

<TD>Visual C++ 6.0</TD>

<TD>Delphi</TD>

</TR>

</TABLE>

</BODY>

</HTML>

v OUTPUT

Table and Cell attributes

The most common attribute of the <TABLE> tag is the BORDER attribute which causes the table to be drawn with a border around it, which can be a fancy border in a graphical browser or just a series of dashes and pipes (|) in a text-based browser.

Borderless table is useful when the table structure is used for layout purposes, where the outline of an actual table on the page is not required.

Table and Cell Alignment

By default, tables are displayed on a line by themselves along the left side of the page, with any text above or below the table.

Using the ALIGN attribute, the tables can be aligned to the left or right margins and the text can be wrapped alongside them. LEFT and RIGHT are most commonly used. Centering tables is slightly difficult. Currently, no browsers support ALIGN=CENTER on tables. However, the <CENTER> or <DIV ALIGN=CENTER> tags can be used.

Similarly, the HTML tables provide several options for aligning the data within the cells both horizontally and vertically.

Horizontal alignment (the ALIGN attribute) defines whether the data within a cell has to be aligned to the left cell margin (LEFT), the right cell margin (RIGHT), or centered within the two (CENTER).

Vertical alignment (the VALIGN attribute) defines the vertical alignment of the data within the cell,

By default, heading cells are centered both horizontally and vertically, and data cells are centered vertically but aligned flush left.

v INPUT

<HTML>

<HEAD>

<TITLE>Vegetable Planting Schedule</TITLE>

</HEAD>

<BODY>

<TABLE BORDER>

<CAPTION><FONT COLOR=BLUE SIZE=4>Vegetable Planting Schedule</FONT></CAPTION>

<TR>

<TH>Vegetable</TH>

<TH>Planting Time</TH>

<TH>Transplants OK?</TH>

<TH>Days to Maturity</TH>

<TH>Varieties</TH>

</TR>

<TR>

<TD >Tomato</TD>

<TD>May-June</TD>

<TD ALIGN=CENTER>OK</TD>

<TD ALIGN=CENTER>55-90</TD>

<TD>Many; the most popular include:

<UL>

<LI>Early Girl

<LI>Beefmaster

<LI>Celebrity

<LI>Roma

</UL>

</TD>

</TR>

<TR>

<TD>Carrot</TD>

<TD>Mar-May</TD>

<TD ALIGN=CENTER>No</TD>

<TD ALIGN=CENTER>60-80</TD>

<TD>

<UL>

<LI>Gold-Pak

<LI>Hybrid Sweetness

</UL>

</TD>

</TR>

<TR>

<TD>Lettuce</TD>

<TD>Mar-May, Aug-Sep</TD>

<TD ALIGN=CENTER>OK</TD>

<TD ALIGN=CENTER>45,60</TD>

<TD>

<UL>

<LI>Salad Bowl

<LI>Black-Seeded Simpson

</UL>

</TD>

</TR>

</TABLE>

v OUTPUT

Spanning rows and columns

To create a cell that spans multiple rows or columns, ROWSPAN or COLSPAN attributes are used in the <TH> or <TD> tags, along with the number of rows or columns. The data within that cell then fills the entire width or length of the combined cells.

v INPUT

<HTML>

<HEAD>

<TITLE>Students in Classes</TITLE>

</HEAD>

<BODY>

<CAPTION><FONT SIZE=5 COLOR=RED>Students in classes</FONT></CAPTION>

<TR>

<TH COLSPAN=2>Classes</TH>

<TH ROWSPAN=2 COLSPAN=2>Total<BR> Number</TH>

</TR>

<TR>

<TH>Class 1</TH>

<TH>Class 2</TH>

</TR>

<TH ROWSPAN=2 ALIGN=LEFT>Gender</TD>

</TR>

<TD ALIGN=LEFT>Girls</TD>

</TR>

<TH COLSPAN=2 ALIGN=LEFT>Total No. of Students</TD>

</TR>

</TABLE>

</BODY>

</HTML>

v OUTPUT

Defining Table and Column Width

The WIDTH attribute in the <TABLE> tag defines how wide the table will be on the page. WIDTH can have a value that is either the exact width of the table (in pixels) or a percentage (such as 50 percent or 75 percent) of the current screen width, which can therefore change if the window is resized. If WIDTH is specified, the width of the columns within the table can be compressed or expanded to fit the required

The WIDTH attribute can also be used on individual cells (<TH> or <TD>) to indicate the width of individual columns.

As with table width, using percentage rather than specific pixels width is a better idea because it allows the table to be displayed regardless of the window size. Column width is useful when the user wants to have multiple columns of identical width, regardless of their contents.

Cell Padding and Cell Spacing

Cell padding is the amount of space between the edges of the cells and the cell's contents. Cell spacing is similar to cell padding except that it affects the amount of space between cells-i.e. the width of the shaded lines that separate the cells. CELLPADDING and CELLSPACING are the attributes of the <TABLE> tag.

Cell that encloses it

Different tags like font, marquee et. Can be used inside a table.

Nested Tables

Tables used within a table is called nested table. Nested table is a great tool for displaying and arranging information. To nest a table the cell of the outer table contains the entire inside table. The <TABLE> ……….</TABLE> tag of the inside table is placed in the <TD> ……….</TD> tags of the outside table.

v INPUT

<HTML>

<HEAD>

<TITLE>Nested Tables</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=1 CELLSPACING=10% CELLPADDING=10% WIDTH=100%>

<CAPTION><H2>Computer Courses</H2></CAPTION>

<TH>Semester I</TH>

<TH>Semester II</TH>

<TH>Semester III</TH>

<TR>

<TD>

<TABLE BORDER=2 WIDTH=100%>

<CAPTION>Nested Table</CAPTION>

<TH>OS</TH>

<TH>PACKAGE</TH>

<TH>PROGRAMME</TH>

<TR>

<TD>DOS</TD>

<TD>OFFICE 97</TD>

<TD>ACCESS</TD>

</TR>

<TR>

<TD>WINOWS</TD>

<TD>OFFICE 2000</TD>

<TD>VISUAL FOXPRO</TD>

</TR>

</TABLE>

</TD>

<TD>

<TABLE BORDER=2 WIDTH=100%>

<CAPTION>Nested Table</CAPTION>

<TH>SYSTEM ANALYSIS</TH>

<TH>CLIENT SERVER</TH>

<TR>

<TD>DATA MODELING</TD>

<TD>MS_SQL</TD>

</TR>

<TR>

<TD>ER MODEL</TD>

<TD>VISUAL BASIC</TD>

</TR>

</TABLE>

</TD>

<TD>

<TABLE BORDER=2 WIDTH=100%>

<CAPTION>Nested Table</CAPTION>

<TH>SYSTEM PROGRAMMING</TH>

<TR>

<TD>C,C++</TD>

</TR>

<TR>

<TD>OOPs IN VC++</TD>

</TR>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

v OUTPUT

Summary of Tags

*Tag*	*Attribute*	*Description*
<TABLE>...</TABLE>		Indicates a table.
	BORDER	To border a table. The default is no border. If BORDER has a value, that value is the width of the shaded border around the table.
	CELLSPACING	Defines the amount of space between the cells in the table.
	CELLPADDING	Defines the amount of space between the edges of the cell and its contents.
<CAPTION>... </CAPTION>		Creates an optional caption for the table.
<TR>...</TR>		Defines a table row, which can contain heading and data cells.
<TH>..<TH>		Defines a table cell containing a heading. Heading cells are usually indicated by boldface and centered both horizontally and vertically within the cell.
<TD>...<TD>		Defines a table cell containing data. Table cells are in a regular font, and are left-justified and vertically centered within the cell.
	ALIGN	When used with <TABLE>, possible values are LEFT and RIGHT. Determines the alignment of the table and indicates that text following the table will be wrapped alongside it. When used with <CAPTION>, the possible values for most browsers are TOP and BOTTOM. In Internet Explorer, the possible values are LEFT, RIGHT, and CENTER, and indicate the horizontal alignment of the caption. When used with <TR>, the possible values are LEFT, CENTER, and RIGHT, which indicate the horizontal alignment of the cells within that row (overriding the default alignment of heading and table cells). When used with <TH> or <TD>, the possible values are also LEFT, CENTER, and RIGHT, which override both the row's alignment and any default cell alignment.
	VALIGN	When used with captions in Internet Explorer, possible values are TOP and BOTTOM and indicate the positioning of the caption relative to the table (same as ALIGN in most other browsers). When used with <TR>, possible values are TOP, MIDDLE, and BOTTOM. VALIGN indicates the vertical alignment of the cells within that row (overriding the defaults). When used with <TH> or <TD>, the same possible values are used, and VALIGN overrides both the row's vertical alignment and the default cell alignment. In Netscape, VALIGN can also have the value BASELINE.
	ROWSPAN	Used within a <TH> or <TD> tag, ROWSPAN indicates the number of cells below this one that this cell will span.
	COLSPAN	Used within a <TH> or <TD> tag, COLSPAN indicates the number of cells to the right of this one that this cell will span.
	BGCOLOR	(Internet Explorer and Netscape 3.0 extension) Can be used with any of the table tags to change the background color of that table element. Cell colors override row colors, which override table colors. The value can be a hexadecimal color number or a color name.
	WIDTH	When used with <TABLE>, indicates the width of the table, in exact pixel values or as a percentage of page width (for example, 50 percent). When used with <TH> or <TD>, WIDTH indicates width of the cell, in exact pixel values or as a percentage of table width (for example, 50 percent).

SELF-REVIEW QUESTIONS

1. How are tables used in HTML pages?

2. What are the main tags used in <TABLE> tag?

3. State some of the attributes of <TH> tag illustrating with an example.

4. Give an example of rowspan and colspan attributes of <TD> tag.

Chapter 7

Form and form elements

HTML forms are the basis for web Client Server capabilities. Forms are the client side GUI applications.

Creating a form usually involves two independent steps: creating the layout for the form itself and writing a script program on the server side to process the information you get back from a form.

To create a form, use the <FORM> tag. Inside the opening and closing FORM tags individual form elements plus any other HTML content are used to create a layout for that form (paragraphs, headings, tables, and so on). As many different forms on a page can be used, but it is not possible to nest forms-i.e. you can't include a <FORM> tag inside another <FORM>tag.

The opening tag of the FORM tag includes attributes namely, NAME, METHOD and ACTION. NAME is used for defining the name of the form. The METHOD attribute can be either GET or POST, which determines how the form data is being sent to the server through the script to process it. The ACTION attribute is a pointer to the script that processes the form on the server side.

Simple Form Layout

To create a form , you should include the form elements. The five form elements listed below enable building of HTML data input forms

Element	End Tag Required	Description
FORM	Yes	Start a form
INPUT	No	Specify type of form input to accept from the user
OPTION	Yes/No	An entry in a <SELECT> list
SELECT	Yes	A pick list or drop down selection list
TEXTAREA	Yes	A free form test input box

Different types of form elements included in the <FORM> are text boxes, radio buttons, check boxes, drop down boxes, multiline, scrollable text areas and password boxes.

Each of the form element will be placed inside a<FORM>...</FORM> tag.

Text fields enables the client to type text into a single-line field. To create a text-entry field, you can either use TYPE="TEXT" in the <INPUT> tag or leave off the TYPE specification altogether. The default TYPE for the <INPUT> tag is "text".

NAME indicates the name of this field as passed to the script processing the form.

SIZE indicates the length of the text-entry field, in characters; the field is 20 characters by default. As many characters can be inserted by the client. The field will scroll horizontally as he types. Keeping the SIZE under 50 characters will allow it to fit on most screens.

MAXLENGTH allows to limit the number of characters that the reader can type into a text field (refusing any further characters). If MAXLENGTH is less than SIZE, browsers will sometimes draw a text field as large as MAXLENGTH.

<INPUT TYPE="TEXT" NAME="longText" SIZE="50" MAXLENGTH=”10”>

Password fields are also used which is indicated by TYPE=password. Password text fields are identical to ordinary text fields, except that all the characters typed are echoed back in the browser (masked) as asterisks or bullets.

<INPUT TYPE="PASSWORD" NAME="passwd">

Radio buttons indicate a list of items, of which only one can be chosen. If one radio button in a list is selected, all the other radio buttons in the same list are deselected.

Radio buttons are used by specifying "radio" for their TYPE attribute. The groups of radio buttons are indicated using the same NAME for each button in the group. In addition, each radio button in the group must have a unique VALUE attribute, indicating the selection's value.

<INPUT TYPE="RADIO" NAME="r1" VALUE=”male">MALE <INPUT TYPE="RADIO" NAME="r1" VALUE="female">FEMALE

Check boxes make it possible to choose multiple items in a list. Each check box can be either checked or unchecked (the default is unchecked). Check boxes use "checkbox" as their TYPE attribute:

<INPUT TYPE="CHECKBOX" NAME="red">Red
<INPUT TYPE="CHECKBOX" NAME="green">Green <INPUT TYPE="CHECKBOX" NAME="blue">Blue

When the form is submitted, only the name/value pairs for each selected check box are submitted (unchecked check boxes are ignored).

You can use the CHECKED attribute to indicate that a check box is checked by default. <INPUT TYPE="CHECKBOX" NAME="doctor" CHECKED>Doctor

Submit buttons tell the browser to send the form data to the server. You should include at least one submit button on every form .To create a submit button, use "SUBMIT" as the TYPE attribute in an <INPUT> tag. You can change the label text of the button by using the VALUE attribute:

<input TYPE="SUBMIT" VALUE="Submit">

You can have multiple submit buttons in a form by including the NAME attribute inside the <input> tag. Both the NAME and the VALUE of the submit button are then sent to the server for processing;.

<input TYPE="SUBMIT" NAME="left" VALUE="Left">
<input TYPE="SUBMIT" NAME="right" VALUE="Right">
<input TYPE="SUBMIT" NAME="up" VALUE="Up">
<input TYPE="SUBMIT" NAME="down" VALUE="Down">

Reset button is used for renewing the elements of the form. It allows the client to fill new entries by clicking on the reset button.

In addition to the <input> tag, there are also two other tags that create form elements. SELECT, which has the ability to create pull-down menus and scrolling lists, and TEXTAREA, for allowing the client to enter long blocks of text.

Selections enable the client to select one or more items from a menu or a scrolling list. They're similar in functionality to radio buttons or check boxes, but they're displayed in a different way on-screen. The <SELECT> tag, and individual options within the selection indicated by the <OPTION> tag are used for creating such elements. The <SELECT> tag also contains a NAME attribute to hold its value when the form is submitted. <OPTION> tag contains the VALUE of each option.

<P>Select a hair color:
<SELECT NAME="hcolor">
<OPTION VALUE=”black”>Black
<OPTION VALUE=”blonde”>Blonde
<OPTION VALUE=”brown”>Brown
<OPTION VALUE=”red” >Red
<OPTION VALUE=”blue >Blue
</SELECT></P>

When the form is submitted, the value of the entire selection is the text that follows the selected <OPTION> tag. In this case, Brown, Red, Blue, and so on.

By default, selections act like radio buttons; that is, only one item can be selected at a time. You can change the behavior of selections to allow multiple options to be selected by using the MULTIPLE attribute, part of the <SELECT> tag:

<P>Shopping List:
<SELECT NAME="shopping" MULTIPLE>
<OPTION VALUE=”butter”>Butter
<OPTION VALUE=”milk” >Milk
<OPTION VALUE=”flour” >Flour
<OPTION VALUE=”eggs”>Eggs
<OPTION VALUE=”cheese”>Cheese
<OPTION VALUE=”beer>Beer
<OPTION VALUE=”pasta”>Pasta
<OPTION VALUE=”mushrooms”>Mushrooms
</SELECT></P>

Text Areas

Text areas are input fields that contain many lines of text, making them extremely useful for forms that require extensive input. For example, if you wanted to create a form that enables readers to compose electronic mail, you might use a text area for the body of the message.

To include a text area element in a form, use the <TEXTAREA> tag. <TEXTAREA> includes three attributes:

`NAME`	The name to be sent to the CGI script when the form is submitted
`ROWS`	The height of the text area element, in rows of text
`COLS`	The width of the text area element in columns (characters)

The <TEXTAREA> tag is a two-sided tag, and both sides must be used. If you have any default text you want to include in the text area, include it between the opening and closing tags. For example:

<TEXTAREA NAME="theBody" ROWS="7 COLS="30”>Enter your message here.</TEXTAREA>

By default text in a text area does not wrap; it simply scrolls to the right. Press Enter to move to the next line. Using the WRAP attribute to TEXTAREA, the wrapping behavior can be changed

v INPUT

<HTML>

<HEAD><TITLE>WORKING WITH FORM</TITLE></HEAD>

<BODY>

<H1><CENTER>CSE Name Registration Form</CENTER></H1>

<H3>Enter all the necessary information</H3>

<PRE>

<P>Enter your Name: <input TYPE="TEXT" NAME="txtName">

Enter your Age: <input TYPE="TEXT" NAME="txtAge" SIZE="3" MAXLENGTH="3">

Enter your Address: <input TYPE="TEXT" NAME="txtAddress" SIZE="80">

Enter Your Phone No. <input TYPE="TEXT" NAME="txtPhone" SIZE="10">

</PRE>

<OL><H4><U>Course Selection</u></H4>

<LI><input TYPE="radio" NAME="rdcourse" VALUE="dse" checked>DSE<BR>

<LI><input TYPE="radio" NAME="rdcourse" VALUE="dap">DAP<BR>

<LI><input TYPE="radio" NAME="rdcourse" VALUE="ora">Oracle<BR>

<LI><input TYPE="radio" NAME="rdcourse" VALUE="vb">Visual Basic<BR>

</OL>

<UL><H4><U>Select Suitable Times</U></H4>

<LI><input TYPE="checkbox" NAME="time1"> 7:00 ~ 8:30 A.M.

<LI><input TYPE="checkbox" NAME="time2"> 8:30 ~ 10:00 A.M.

<LI><input TYPE="checkbox" NAME="time3"> 1:00 ~ 2:30 P.M.

<LI><input TYPE="checkbox" NAME="time4"> 4:00 ~ 5:30 P.M.

<LI><input TYPE="checkbox" NAME="time5"> 5:30 ~ 7:00 p.m.

</UL>

<P>Your Registration By :

<SELECT NAME="Registration">

<OPTION>

<OPTION>Myself

<OPTION>Sponsorship

<OPTION>Government

<OPTION>NGOs

</SELECT></P>

<TEXTAREA NAME="txtareaword" ROWS="4" COLS="70" wrap>

How you came to know about this organisation ?</TEXTAREA>

<HR><CENTER>

<input TYPE="SUBMIT" NAME="submit" VALUE="Submit">

<input TYPE="SUBMIT" NAME="reset" VALUE="Reset">

</CENTER>

</BODY>

</HTML>

v OUTPUT

Note: In the above example <Pre> Tag is used to make preformatted out put i.e. at the same alignments. But mostly <PRE> tag is not used for the purpose instead the FORM ELEMENTS are placed inside the TABLE and <TD> column.

Summary of Tags

Tag	Attribute	Function
I<INPUT>	TYPE=”TEXT” , VALUE,NAME, SIZE, MAXLENGTH	Inserts single line textbox. Default SIZE is 20. VALUE is the text displayed in the browser. NAME is used in case of script processing. MAXLENGTH is the maximum number of characters to be inserted.
	TYPE=”PASSWORD”, NAME, MINLENGTH	Inserts a single line text box that only supports asterisk or bulleted format. NAME is used in case of script processing. MINLENGTH is the minimum number of characters that must be inserted.
	TYPE=”RADIO”, NAME, VALUE, CHECKED	To make a single choice. NAME is always kept common and along with VALUE is used in case of script processing. CHECKED allows default check to be displayed as soon as it loads in the browser.
	TYPE=”CHECKBOX”, NAME, VALUE, CHECKED	To make multiple choices. NAME an be kept common or uncommon and along with VALUE is used in case of script processing. CHECKED allows default check to be displayed as soon as it loads in the browser.
	TYPE=”BUTTON”, NAME, VALUE	Displays the normal button. NAME is used for script processing on the client side. VALUE is the caption or the label of the button.
	TYPE=”SUBMIT”, VALUE	Used for submitting the form elements to the server. VALUE is the caption or the label of the button.
	TYPE=”RESET”	Used for renewing the form elements. VALUE is the caption or the label of the button.
<SELECT>	NAME, MULTIPLE	Allows dropdowns or pull down menus. NAME is used in case of script processing. MULTIPLE allows making more then one choice.
<OPTION>	VALUE	Used inside the <SELECT> tag. VALUE is used in case of script processing.
<TEXTAREA>…</TEXTAREA>	ROWS, COLS, WRAP	Allows multiline message or text. ROWS and COLS define the width and height of the textarea. WRAP wraps up the text.

SELF-REVIEW QUESTIONS

1. How is form used in web pages? State it’s attribute.

2. Give examples of the form elements used in the form.

3. What are the different types of input types?

4. Using Select tag, illustrate an example.

Chapter 8

Changing Styles

Style Sheets

Style sheets are used to specify design and layout parameters for every element in your Web page.

v  INPUT

<HTML>

<HEAD>

<TITLE>Designing Powerful Pages With Style Sheets</TITLE>

<STYLE>

H1  {font: 45pt Times; color: brown}

P  {font: 12pt Times; color: blue; text-indent: 1in; margin-right: 1in}

BLOCKQUOTE  {font: 10pt Helvetica; color: black; background: yellow}

</STYLE>

</HEAD>

<BODY BGCOLOR=#FFFFFF>

<H1 ALIGN=CENTER>Designing Great Pages</H1>

<P>&nbsp;</P>

<P ALIGN=RIGHT>Pages with high visual impact will leave a lasting impression on readers. High visual impact does not necessarily correlate to high resolution graphics. Some of the most visually stunning pages contain no graphics at all. They achieve their impact from simplicity of design. They use screen space, color, fonts and headings to their advantage.</P>

<P ALIGN=RIGHT>The best writing looks effortless. Words seem to flow straight from the writer's pen. The same is true about the best designed pages. Well-designed pages look effortless. They are organized in a way that is coherent and flowing.</P>

<P ALIGN=LEFT>

<BLOCKQUOTE>The secret to making words seem to flow effortlessly is simple. Good work is the result of hard work-careful editing, revision and proofreading. Creating a single polished page may take hours. Well-designed pages are also the result of hard work. Designs that seem simple and natural to the reader are often the result of intense efforts to make them seem this way.-

<FONT SIZE=-3>William R. Stanek</FONT>

</BLOCKQUOTE>

</P>

</HTML>

v  OUTPUT

Using Style Sheet

The style sheet used below sets the following design parameters:

All Level 1 headings are in 45-point Times Roman and displayed in brown.
All paragraphs are in 12-point Times Roman and displayed in blue.
The first line of all paragraphs is indented one inch.
The right margin for paragraphs is set to one inch.
All block quotations are in 10-point Helvetica and displayed in black.
Highlighting with a yellow background is added to all block quotations.

Using inline style

Inline Style Sheet means the styles are used in inside the body within the HTML tags.

For instance,

<H1 ALIGN=CENTER STYLE="font: 45pt Times; color: brown">

<P ALIGN=RIGHT STYLE="font: 12pt Times; color: blue;

text-indent: 1in; margin-right: 1in">

v  INPUT

<HTML>

<HEAD>

<TITLE>Designing Powerful Pages With Style Sheets</TITLE>

</HEAD>

<BODY BGCOLOR=#FFFFFF>

<H1 ALIGN=CENTER STYLE="font: 45pt Times; color: brown">

Designing Great Pages</H1>

<P>&nbsp;</P>

<P ALIGN=RIGHT STYLE="font: 12pt Times; color: blue;text-indent: 1in; margin-right: 1in">

Pages with high visual impact will leave a lasting impression on readers. High visual impact does not necessarily correlate to high-resolution graphics. Some of the most visually stunning pages contain no graphics at all. They achieve their impact from simplicity of design. They use screen space, color, fonts and headings to their advantage.

<P ALIGN=RIGHT STYLE="font: 12pt Times; color: blue;text-indent: 1in; margin-right: 1in">

The best writing looks effortless. Words seem to flow straight from the writer's pen. The same is true about the best designed pages. Well-designed pages look effortless. They are organized in a way that is coherent and flowing.</P>

<P ALIGN=LEFT STYLE="font: 12pt Times; color: blue;text-indent: 1in; margin-right: 1in">

<BLOCKQUOTE STYLE="font: 10pt Helvetica; color: black; background: yellow">

The secret to making words seem to flow effortlessly is simple. Good work is the result of hard work-careful editing, revision and proofreading. Creating a single polished page may take hours. Well-designed pages are also the result of hard work. Designs that seem simple and natural to the reader are often the result of intense efforts to make them seem this way.-

<FONT SIZE=-3>William R. Stanek</FONT></BLOCKQUOTE>

</P>

</HTML>

v  OUTPUT

Using font styles.

The font-weight for normal text is medium. Using relative values, the boldness of the text can be adjusted in the following way:-

font-weight: lighterDisplays text one step lighter than other text in the same element.
font-weight: bolder Displays text one step darker than other text in the same element.

Similarly, using absolute values, the boldness of the text can be changed.

font-weight: extra-light

font-weight: light

font-weight: demi-light

font-weight: medium

font-weight: demi-bold

font-weight: bold

font-weight: extra-bold

The default font-style of text on the page is normal, but you can change the style of the font as follows:

font-style: normal

font-style: italic

font-style: small-caps

To change text case, the text-transform property can be used:

text-transform: capitalizeDisplays the first character of each word in uppercase.
text-transform: uppercaseDisplays all characters in uppercase.
text-transform: lowercase Displays all characters in lowercase.
none: Displays all characters in default style and eliminates an inherited style.
text-transform: none

Note

As more browsers support style sheets, you can use font styles to create a unique look for your pages. Unfortunately, current browsers, including Internet Explorer 3.0, support only a minimal set of font styles. You'll have to wait for browsers to catch up with the standard to take full advantage of font styles.

Using Font Faces

font-family: Helvetica

font-family: "New Century Schoolbook"

font-family: "Arial Narrow", "Lucida Handwriting", "Times New Roman"

v  INPUT

<HTML>

<HEAD>

<TITLE>Using Font Families</TITLE>

<STYLE>

.serif { font-size: 14pt; font-family:serif }

.sans { font-size: 14pt; font-family: sans-serif }

.cursive { font-size: 14pt; font-family: cursive }

.fantasy { font-size: 14pt; font-family: fantasy }

.monospace { font-size: 14pt; font-family: monospace }

</STYLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<DL>

<SPAN CLASS=serif>

<DD>serif</DD>

<DT>A generic font family with stylish flourishes, such as Times Roman.</DT>

<DT>font-family: serif</DT>

</SPAN>

<BR>

<BR>

<SPAN CLASS=sans>

<DD>sans-serif</DD>

<DT>A generic font family without stylish flourishes, such as Helvetica.</DT>

</SPAN>

<BR>

<BR>

<SPAN CLASS=cursive>

<DD>cursive</DD>

<DT>A font that looks hand written, such as Lucida Handwriting.</DT>

</SPAN>

<BR>

<BR>

<SPAN CLASS=fantasy>

<DD>fantasy</DD>

<DT>A modern font family, such as Western.</DT>

</SPAN>

<BR>

<BR>

<SPAN CLASS=monospace>

<DD>monospace</DD>

<DT>A non-proportional font family, such as Courier.</DT>

</SPAN>

</DL>

</BODY>

</HTML>

Grouping Font Properties

Entering each font property into your style sheet separately is tedious; however, you can combine all font-related properties.

When you combine font-related properties, the following style definition

H1 { font-weight: bold;

    font-size: 12pt;

    line-height: 14pt;

    font-family: courier;    font-style: small-caps}

Note

The order of the property values isn't important. You can group the property values any way you like.

Chapter 9

Frames

Creating web pages using frames has eased the way of displaying the web pages on a single screen.

With frames, you can create Web pages that look and feel entirely different from other Web pages-pages that have tables of tables, banners, footnotes, and sidebars, just to name a few common features that frames can give you.

At the same time, frames change what a "page" means to the browser and to the reader. Unlike all the previous examples, which use a single HTML page to display a screen of information, when you create Web sites using frames, a single screen actually consists of a number of separate HTML documents that interact with each other.

The first HTML document you need to create is called the frame definition document. In this document, you enter the HTML code that describes the layout of each frame and indicate the name of separate HTML document that contains the physical information to be displayed. The three remaining HTML documents contain normal HTML tags that define the physical contents of each separate frame area. These are the documents referenced by the frame definition document.

New Term

The frame definition document is the page that contains the layout of each frame and the names of the HTML documents that will fill that frame.

The `<FRAMESET>` Tag

To create a frame definition document, you use the <FRAMESET> tag. When used in an HTML document, the <FRAMESET> tag replaces the <BODY> tag, as shown here:

<HTML>
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>
<FRAMESET>
your frame definition goes here.
</FRAMESET>
</HTML>

New Term

A frameset is the set of frames defined by the <FRAMESET> tag in the frame definition document.

The `COLS` Attribute

When you define a <FRAMESET> tag, you must include one of two attributes as part of the tag definition. The first of these attributes is the COLS attribute, which takes the following form:

<FRAMESET COLS="column width, column width, ...">

<FRAMESET COLS="100,50%,*">

The `ROWS` Attribute

The ROWS attribute works the same as the COLS attribute, except that it splits the screen into horizontal frames rather than vertical ones. For example, to split the screen into two equal-height frames, as shown in the above example, you could write either of the following:

<FRAMESET ROWS="50%,50%">
<FRAMESET ROWS="*, *">

Apart from ROWS and COLS attributes, FRAMEBORDER attribute is used for giving borders to the frame, specified in pixels.

The `<FRAME>` Tag

Once the basic frameset is laid out, you need to associate an HTML document with each frame. To do this, you use the <FRAME> tag, which takes the following form:

<FRAME SRC="document URL">

For each frame defined in the <FRAMESET> tag, you must include a corresponding <FRAME> tag, as shown here:

<FRAMESET ROWS="*,*,*">
    <FRAME SRC="document1.html">
    <FRAME SRC="document2.html">
    <FRAME SRC="document3.html">
</FRAMESET>

SCROLLING=YES attribute is used to display the scroll bar. The other types used are AUTO and NO.

NORESIZE attribute is used to disallow the client to resize any frame.

MARGINHEIGHT and MARGINWIDTH are used to adjust the margin from the top and left of the margin in any frame. The values are specified in pixels.

NOFRAMES tag is used to display a message in case the browser does not support frames.

For instance,

<NOFRAMES>

<BODY>Your browser does not support frames</BODY>

</NOFRAMES>

v INPUT

<HTML><HEAD>

<TITLE>USING FRAMES WITH IT’S ATTRIBUTES</TITLE>

</HEAD>

<FRAME SET ROWS=”20%, 30%, *”>

<FRAME SRC=”FRAME1.HTML” NORESIZE>

<FRAME SRC=”FRAME2.HTML” SCROLLING=”YES”>

<FRAME SRC=”FRAME3.HTML” MARGINHEIGHT=”100”>

</FRAMESET>

</HTML>

v OUTPUT

Summary of Tags

*Tag*	*Attribute*	*Function*
<FRAMESET>	ROWS	Creates the specified number of frames horizontally either in pixels or percentage. ‘*’ means the frame occupies the rest of the window
	COLS	Creates the specified number of frames vertically either in pixels or percentage. ‘*’ means the frame occupies the rest of the window
	FRAMEBORDER	Borders the frame.
<FRAME>	SRC	Indicates the document URL.
	MARGINHEIGHT	Adjusts the margin of the frame from the top and bottom of the frame specified in pixels.
	MARGINWIDTH	Adjusts the margin of the frame from the left and right of the frame specified in pixels.
	NORESIZE	Disallows the client to change the size of the frame.
	SCROLLING	Displays scrollbar if specified with YES option. Disables the use of scrollbars if NO option is used. AUTO option is used as default if the contents of the frame take up more space than the area available in the frame.

SELF-REVIEW QUESTONS

1. What are frames?

2. Using ROWS and COLS attributes, write a program.

3. What are the attributes of FRAME tag?

Brainware IT Sanchar

OUR MUST POPULAR POST

Friday, June 28, 2013

Basics of Web Technology

Chapter 1

Basics of Web Technology

Communication channels

B. Internet Protocols

C. Internet Services and protocols

Chapter 2

HTML

Hypertext Markup Language contains codes behind any standard web page. It uses tags to tell the web browser how to present the information in the web page.

Browsing the World Wide Web

Using HTML Editor

HTML SYNTAX

Every tag must be enclosed within angle brackets (< >).

HTML Document Structure

Formatting Tags

Text-formatting Tags

ORDERED LIST

Images and Text

Image Background

Image and Links

Syntax for creating Table in HTML

Summary of Tags

HTML forms are the basis for web Client Server capabilities. Forms are the client side GUI applications.

Simple Form Layout

Text Areas

Changing Styles

Style Sheets

Grouping Font Properties

The `<FRAMESET>` Tag

The `COLS` Attribute

The `ROWS` Attribute

Apart from ROWS and COLS attributes, FRAMEBORDER attribute is used for giving borders to the frame, specified in pixels.

The `<FRAME>` Tag

No comments:

Post a Comment

OUR MUST POPULAR POST

Friday, June 28, 2013

Basics of Web Technology

Chapter 1

Basics of Web Technology

Communication channels

B. Internet Protocols

C. Internet Services and protocols

Chapter 2

HTML

Hypertext Markup Language contains codes behind any standard web page. It uses tags to tell the web browser how to present the information in the web page.

Browsing the World Wide Web

Using HTML Editor

HTML SYNTAX

Every tag must be enclosed within angle brackets (< >).

HTML Document Structure

Formatting Tags

Text-formatting Tags

ORDERED LIST

Images and Text

Image Background

Image and Links

Syntax for creating Table in HTML

Summary of Tags

HTML forms are the basis for web Client Server capabilities. Forms are the client side GUI applications.

Simple Form Layout

Text Areas

Changing Styles

Style Sheets

Grouping Font Properties

The <FRAMESET> Tag

The COLS Attribute

The ROWS Attribute

Apart from ROWS and COLS attributes, FRAMEBORDER attribute is used for giving borders to the frame, specified in pixels.

The <FRAME> Tag

No comments:

Post a Comment

The `<FRAMESET>` Tag

The `COLS` Attribute

The `ROWS` Attribute

The `<FRAME>` Tag