Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized...

33
Web Page Web Page Web Page Web Page A web is a page with hypertext links that cross-reference text in the Internet. A web page is also known as HTML pages because it is coded in HTML language. These types of page, we can browse for internet web site. Web file stored into web server. Web site: A group of related Web pages that is hosted by an HTTP server on the World Wide Web. The pages in a Web site generally cover one or more topics and are interconnected through hyperlinks. Most Web sites have a home page as their starting point. HTML : The standard markup language used for documents on the World Wide Web. HTML uses tags to indicate how Web browsers should display page elements such as text and graphics and how to respond to user actions. It can have images, animations, multimedia contents and even interactive application. Internet : A worldwide network of thousands of smaller computer networks and millions of commercial, educational, government, and personal computers. E-mail (Electronic mail) : The exchange of electronic text messages and computer file attachments between computers over a communications network, such as a local area network or the Internet. Uniform Resource Locator (URL) : An address that specifies a protocol (such as HTTP or FTP) and a location of an object, document, World Wide Web page, or other destination on the Internet or an intranet — for example: http://www.google.com /. Syntax: - It is a rule of computer language; if user wants to define the particular rule then user followed the particular syntax. Language: - There must be will defined syntax to be a language or, collection of syntax is called language. ISP : A business that provides access to the Internet for such things as electronic mail, chat rooms, or use of the World Wide Web. Some ISPs are multinational, offering access in many locations, while others are limited to a specific region. Protoco l: A method of accessing a document or service over the Internet, such as File Transfer Protocol (FTP) or Hypertext Transfer Protocol (HTTP). HTTP : Internet protocol that delivers information on the World Wide Web. Makes it possible for a user with a client program to enter a URL (or click a hyperlink) and retrieve text, graphics, sound, and other digital information from a Web server. Web server : A computer that hosts Web pages and responds to requests from browsers. Also known as an HTTP server, a Web server stores files whose URLs begin with http://. FTP : A communication protocol that makes it possible for a user to transfer files between Server locations on a network. This protocol also allows users to use FTP commands, such as listing files and folders, to work with files on a remote location. Internet A system that links computer networks all over the world. Hyper Text: A type of text that allows embedded links to other documents. Clicking on or selecting a hypertext link displays another document or section of a document. Most World Wide Web documents contain hypertext.

Transcript of Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized...

Page 1: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Web PageWeb PageWeb PageWeb Page

A web is a page with hypertext links that cross-reference text in the Internet. A web page is

also known as HTML pages because it is coded in HTML language. These types of page, we can browse for internet web site. Web file stored into web server.

Web site: A group of related Web pages that is hosted by an HTTP server on the World Wide Web. The pages in a Web site generally cover one or more topics and are interconnected through hyperlinks. Most Web sites have a home page as their starting point.

HTML: The standard markup language used for documents on the World Wide Web. HTML uses

tags to indicate how Web browsers should display page elements such as text and graphics and how

to respond to user actions. It can have images, animations, multimedia contents and even interactive

application.

Internet: A worldwide network of thousands of smaller computer networks and millions of

commercial, educational, government, and personal computers.

E-mail (Electronic mail): The exchange of electronic text messages and computer file attachments between computers over a communications network, such as a local area network or the Internet. Uniform Resource Locator (URL): An address that specifies a protocol (such as HTTP or FTP)

and a location of an object, document, World Wide Web page, or other destination on the Internet or

an intranet — for example: http://www.google.com/.

Syntax: - It is a rule of computer language; if user wants to define the particular rule then user followed the particular syntax.

Language: - There must be will defined syntax to be a language or, collection of syntax is called language.

ISP: A business that provides access to the Internet for such things as electronic mail, chat rooms, or use of the World Wide Web. Some ISPs are multinational, offering access in many locations, while others are limited to a specific region.

Protocol: A method of accessing a document or service over the Internet, such as File Transfer Protocol (FTP) or Hypertext Transfer Protocol (HTTP).

HTTP: Internet protocol that delivers information on the World Wide Web. Makes it possible for a user with a client program to enter a URL (or click a hyperlink) and retrieve text, graphics, sound, and other digital information from a Web server.

Web server: A computer that hosts Web pages and responds to requests from browsers. Also known as an HTTP server, a Web server stores files whose URLs begin with http://.

FTP: A communication protocol that makes it possible for a user to transfer files between Server locations on a network. This protocol also allows users to use FTP commands, such as listing files and folders, to work with files on a remote location.

Internet A system that links computer networks all over the world.

Hyper Text: A type of text that allows embedded links to other documents. Clicking on or selecting a hypertext link displays another document or section of a document. Most World Wide Web documents contain hypertext.

Page 2: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

2

Computer network A network is a device is a group of computers connected to each other to exchange data. It allows the data stored on one computer to be retrieved by other computer connected to the network. It allows the sharing of resource, the information and resources being shared can be anything from ms-office documents, E-mail for a printer, fax etc devices. The network should have following things. ���� Data sharing: information available in one computer can be accessed by another computer. ���� Hardware sharing: many computers can be use an expensive device available at one site i.e. laser printer, plotter, scanner, hard disk, etc. ���� Communication: Data in one computer can be passed to another computer via communication devices such devices such as modem and telephone lines. Advantage of computer network

� It is very important that provide services and reduce equipment cost � It allows the sharing of various resources for example disk storage, printers, image, scanner, modems and central

services. � It is very easy to store the programs and set up new user and equipments. � It makes the easy connection of different computers which can communicate with each other.

Disadvantage of computer network

� It makes people lazy and dependent on them. The efficiency of network is dependent on the skill of the system manager � It is very difficult to access various hardware and software resources if the network stops. � It is difficult to secure the system from different things like hackers, novices or industrial espionage. � There occurs various problems as like increase of traffic that degrades network performance

Types of networks

Computer network has been different types on the basis of above matters c below is a list of the most common types of computer networks.

Page 3: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

3

Local Area Network (LAN): If we expand the network only in a single floor or building, these types of network is known as LAN. We expand this network till 500 meter long; we can connect maximum 256 computers in the network. Well network never connect more than 80 computer in a LAN network .we can use HUB, Switch to connect the computer.

A network that is limited to a relatively small spatial area such as a room, a single building, a ship, or an aircraft. Local area networks are sometimes called a single location network. it stores up the software that controls the network as well as a software that can be stored by the computers attached to the network For administrative purposes, large LANs are generally divided into smaller logical segments called workgroups or work station. A workstation is a group of computers that share a common set of resources within a LAN.

Metropolitan Area Network (MAN):

A metropolitan area is limited only on metropolises. It connects two or more Local Area Networks or Cans together but does not extend beyond the boundaries of the immediate town, city, or metropolitan area.

Wide Area Networks (WAN): If we connect more than two LAN to each other to share the resources with the help or router, these types of network is known as WAN. We can expand this network country wise, as well as world wide. Internet is the example of WAN network.

A WAN is a data communications network that covers a broad geographic area and that often uses transmission facilities provided by common carriers, such as telephone companies. It helps to communicate with another place in a few minute.

Internet: A worldwide network of thousands of smaller computer networks and millions of commercial, educational, government, and personal computers. The Internet is like an electronic city with virtual libraries, stores, art galleries, and so on.

Extranet: A network that is limited in scope to a single organization or entity but which also has limited connections to the networks of one or more other usually, but not necessarily, trusted organizations or entities Technically, An extranet may also be categorized as a CAN, MAN, WAN, or other type of network, although, by definition, an extranet cannot consist of a single LAN, because an extranet must have at least one connection with an outside network.

Network hardware

Network Interface Cards (NIC Card): A network card is a piece of computer hardware designed to allow computers to communicate over a computer network. It provides physical access to a networking medium and provides a low-level addressing system through the use of MAC addresses. It allows users to connect to each other either by using cables or wirelessly.

Modem: Modem is a connecting device that is used to link the computer over the telephone line. This is a kind of device that converts digital signal into analog form while transmitting them from computers to telephone line and from analog to digital again when transmitting from telephone line to computer.

Bridges: A bridge is a device that connects multiple network devices at the data link layer of the OSI model. Bridges are similar to repeaters or network hubs, devices that connect network segments at the physical layer; Bridges are very effective for communication in multiple networks & below the Gateways.

Hubs: A hub is a device which provides the connectivity of a segment of a network by directing traffic through the network. Each device is connected to a single cable that connects directly to hub. It does this in a rudimentary way; it simply copies the data to all of the Nodes connected to the hub.

Page 4: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

4

Switches: Switches are the device of networking that directs traffic to the correct node by filtering and forwarding packets between Nodes. Switches operate at the data link layer and sometimes the network layer of the OSI Reference Model and therefore support any packet protocol. LANs that use switches to join segments are called switched LANs.

Routers: Routers are those networking device that forwards data packets along networks by using headers and forwarding tables to determine the best path to forward the packets. This is accomplished by examining the Header of a data packet they use protocols such as to communicate with each other and configure the best route between any two hosts. A router is connected to at least two networks, commonly two LANs or WANs or a LAN and its ISP's network.

Gateway: A gateway is any hardware or software that joins together two dissimilar network using different network protocols. A gateway translate, when properly configured, translates each LAN protocol into its mainframe counter and vice-versa.

Protocol: Protocol is software that established communication between operating system and LAN card. Every Computer contains protocol that helps to communicate on the network. Without protocol data communication is impossible. The protocol helps to communicate for the computer on the network. Some Common Protocol:

FTP (File Transfer Protocol) HTTP (Hyper Text Transfer Protocol) DHCP (Dynamic Host Configuration Protocol) TCP (Transmission Control Protocol) TCP/IP (Transmission Control Protocol/Internet Protocol) POP (Post Office Protocol)

CHAP (Challenge-Handshake Authentication Protocol) SNTP (Simple Mail Transfer Protocol) SNMP (Simple Network Management Protocol)

Note: In web page, we use FTPFTPFTPFTP (File Transfer Protocol) & HTTPHTTPHTTPHTTP (Hyper Text Transfer Protocol).

FTP:FTP:FTP:FTP: These types of protocol used to upload our web site in URL & Download the web site from URL to our PC.

HTTP:HTTP:HTTP:HTTP: These types of protocol used to browse web page from URL to client computer. It is also used to download file from URL.

Two types of web page

Informative /static web page: - HTML, Front Page/ Dream waver

It is simple types of page, which gives only information of particular subject like news site,

governmental site, Educational site etc.

Interactive / Dynamic web page:- Java Script, ASP script, PHP script, Dream waver, Macromedia-

Flash & other animated applications.

It is an effective page of having different types of dynamic effect, it is attractive to look, it is also gives

information, Business Advertise, Advertisement of different organization, to have information by user or

collection of information by different user who visit our page etc...

Page 5: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

5

HTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup

Language) used to create Web pages (Electronic page). We design all types of web page using this language.

Dynamic HTML (DHTML) Dynamic HTML is interactive, can be used to describe combination of html, style sheets and scripts that allows animation in documents. DHTML is technology that helps in changing the content and appearance of a page based on the user input. This has been made possible with the advent of scripting language.

� We can define images, animations, multimedia contents and even interactive application into HTML.

Editor: - Notepad Editor

We define all syntax in notepad editor & save & define language in HTML language.

Browser: - Internet Explorer

We browse our created page in internet Explorer.

Page consiPage consiPage consiPage consist st st st of twoof twoof twoof two partspartspartsparts

1. Head 2. Body HTML Tag <...> ..........</......> <....>Open tag </....>Close tag

Rules

•••• Last opening tag is first closed and continuously closed all tag. (We use different effective tag in

particular text or object & when complete the effect of tag then we close the tag compulsory.)

•••• Save the file (notepad) with .html.html.html.html /.htm.htm.htm.htm file extension. (Save our html document filename. file

extension e.g. home.html.)

Structure of HTML Language:

<HTML><HEAD><TITLE>.............</TITLE> </HEAD>

<BODY>..........................................text/object...........................................................

</BODY>

</HTML>

<Html> .... </Html> : It is a main tag, used to defining html syntax. All syntax are into this tag (JavaScript,

Vbscript, Php ... Language are also into this tag).

<Head> ..... </Head> : This tag define the head part of web page. In this tag, we can define

JavaScript, Vbscript, Php ... Language & title also created in this tag.

Page 6: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

6

<Title> ..... </Title> : It is used to define the title of web page. It appears in the title bar.

<Body> ..... </Body> : It is a body part of web page. All text, image, object etc are in this part.

We can define background color, text color background color also define in this part.

Some useful Syntax:

&nbsp;:- 1 space - It is used to define one space of our page. It is also case sensitive syntax

(&nbsp; not &NBSP;).

<BR>:- It is used to break a line.

<CENTER>........</CENTER>: It is used to specify our text or object in center of the page.

Heading Tag:- 6 types of Heading

This tag is used to specify the heading of our page. Generally this tag is used to define

heading of our page, title of our document etc.

i) <H1>... </H1> Heading 1 ------- Large size

ii) <H2>...</H2> Heading 2

iii) <H3>..</H3> Heading 3

iv) <H4>..</H4> Heading 4

v) <H5>...</H5> Heading 5

vi) <H6>..</H6> Heading 6 ------- Small size

<B>........</B>......................BOLD

This tag is used to define bold of our text.

<I>..........</I>.......................ITALIC

This tag is used to define Italic of our text.

<U>.........</U>.....................UNDERLINE

This tag is used to define underline of our text.

<EM>.......</EM>.................ITALIC

This tag is also used to define Italic of our text.

<B><I>......</I></B>.............BOLDITALIC (Mix tag)

These types of mix tag are used to define many formatting or effect mix of our text.

<HR> :- It creates horizontal line.

<P> :- It defines the paragraph or, It breaks the line.

Page 7: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

7

Some tag & their use:

Opening Tag Closing Tag Use

<body> </body> Visible area of the HTML Page

<Font> </font> Font Formatting start and end.

<p> </p> Paragraph start and end

<hr> [None] Horizontal line

<br> [None] Line Break

<B> </B> Start and end bold text.

<I> </I> Start and end Italic text.

<u> </u> Start and end Underline text.

Formatting our font: <font > ..... </font> : This tag is used to format of our text.

<FONT>....</FONT> Properties

1) Size :- It defines the font size. In this language, font size is providing only 1 to 7.

size ---- 1 ------ 8 pt

size ---- 2 ------ 10 pt

size ---- 3 ------ 12 pt (By Default)

size ---- 4 ------ 14 pt

size ---- 5 ------ 18 pt

size ---- 6 ------ 24 pt

size ---- 7 ------ 36 pt

Syntax: <font Size="7"(size of font)>..........</font> (higher size=7 lower size=1)

2) Color:- It defines font color. By default our font color is black.

Syntax: <font size="5" color ="gold"(color name)>.....</font>

Some color name: red, yellow, blue, gold, gray, aqua, orange, pink, brown, violet, rose,

lavender, plum, olive, maroon, purple, teal, fuchsia, navy, "#999966", "#FFCC99", "#660066", "#CCFFFF",

"#993333" ...

3) Face:- It defines that font family. By default our font face is times new roman.

Syntax: <FONT size=6 color= "red" face="impact"(font family)>............</FONT>

E.g.

< Font size="5" color="maroon" face= "Lucida Sans Unicode">

This is My Febrite Language HTML

</font>

Page 8: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

8

<BODY>............<BODY> properties 1) Background color:-BGCOLOR="color-name"

It defines the background color of our page.

Syntax: <body bgcolor="color-name"> ............. </body>

e.g. <body bgcolor="#999966"> ............. </body>

2) Text color : text="color-name"

It defines the text color of web page.

Syntax: <body text="color-name"> .......... </body>

e.g. <body bgcolor="#660066" text="blue"> ..........

</body>

3) To Set Background Picture: background='path of picture'

Syntax: <body background='path of image'>

e.g. <body background="picture01.jpg1">

Two types of object (image) path:

���� Relative: It is used to define the path of image when image path & page path into different

place, like our page is into My Document & Image is into 'D:/ picture' folder then we define this

types of path. e.g. <body background="D:/picture/pic01.gif">

���� Absolute: It is used to define the path of image when image path & page path into same

place, like our page is into My Document & Image is also into same folder then we define this types

of path. e.g. <body background="pic01.gif">

� Link color: Link: - It is used to define the hyperlink color.

Syntax: <body link= (color-name)> ........ </body>

� Visited Link color: vlink:- It defines the visited link color.

Syntax: <body vlink= (color-name)> ........ </body>

� Active Link color: alink: - It defines the active link color.

Syntax: <body alink= (color-name)> ........ </body>

e.g.:

<body bgcolor="#C0C0C0" text="marron" link="#000080" vlink="#00FFFF" alink="#008080" >.....</body>

To Set Background Sound: syntax: <bgsound src="path of sound">

e.g. : <bgsound src="sound.mp3">

To define the Loop of sound: syntax: <bgsound src="path of sound" Loop="Times of looping">

e.g. : <bgsound src="sound.mp3" loop=3>

For contineusly play background sound : loop=infinite

1 ... .jpg/.gif/.bmp etc: It is a file extension of object (image).

Page 9: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

9

Horizontal Line: <hr>:- This tag is used to insert horizontal line in our page.

Syntax: <hr>

Properties:

•••• Size: It defines the size of horizontal line.

Syntax: <hr size=3> (by default size is 1)

•••• Width: It defines the width of horizontal line.

Syntax: <hr width=830/ 75%> (by default width is 100%)

•••• Color: It defines the horizontal line color. By default horizontal line color is black.

Syntax: <hr color="gray"(color-name)>

•••• Alignment: align:- It defines the horizontal line color. By default alignment is left.

Syntax: <hr align="center">

E.g. <hr color="#993399" width="850" size="6" align="center">

ParagraphParagraphParagraphParagraph: <p> ...... </p> Properties:

Alignment: It defines the paragraph alignment. Alignment is: left, right, center, justify. By default

alignment is left.

Syntax: <p align= "justify"/ "left"/ "right"/ "center"> ......... </p>

Some Text Formatting:

Subscript: It defines the text Subscript.

Syntax: <sub> ....... </sub>

E.g. H2O : H<sub>2</sub> O

Superscript: It defines the text superscript.

Syntax: <sup> ....... </sup>

E.g. a2+b2 : a<sup>2</sup> +b <sup>2</sup>

Strike: It defines the text strikethrough.

Syntax: <strike> ....... </strike>

E.g. Welcome : <strike>Welcome</strike>

<pre>... </pre> : It defines the pre-format the text. When we used this tag then text

alignment and space of text is defined in our notepad editor.

eg: Name Address Kamala Patan Rajendra Lagankhel Kopila Lajimpat

Page 10: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

10

: <pre> <b> Name Address </b> Kamala Patan Rajendra Lagankhel Kopila Lajimpat </pre>

Insert Image into Web pageInsert Image into Web pageInsert Image into Web pageInsert Image into Web page::::

Syntax: <img src="path of image">2

e.g. <img src="image1.jpg">

Properties:

Height: It defines the height of image into web page. By default our image height is 100%.

e.g. <img src= "image.gif" height=500 or, 75%>

Width: It defines the width of image into web page. By default our image width is 100%.

e.g. <img src= "image.gif" width="700" or, 80%>

Border : It defines the border size of image into web page.

e.g. <img src= "image.gif" Border="2">

To insert Dynamic image into web page (Insert movie into web

page):

Syntax: <img dynsrc="path of movie (dynamic image)">

e.g. <img dynsrc="AVSEQ01.DAT" height="500" width="700" border="4">

If we need to start to movie on mouse over event:

<img dynsrc="AVSEQ01.DAT" height=500 width=700 border=4 start="mouseover">

Insert sound into page: Syntax : <embed src= path of sound >

Ex: <embed src=”sound01.mp3”>

For auto play : autostart=true

For sow play control : hidden=false

For looping : loop=false

If the browser doesnot support embed then we define noembed tag:

<noembed> <bgsound src=path> </noembed>

Scroll the Text or Image:

<Marquee> .......... </Marquee> : This tag is used to scroll our text or image into web page. It is one

types of dynamic effect to scrolling image or text.

e.g. <Marquee> Welcome to This Page; This is My Marquee test ! </Marquee>

2 :img src: Image source

Page 11: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

11

Properties:

• Direction: It defines the scrolling direction. By default our marquee direction is left.

Direction : Left/ Right/ Up/ Down

e.g. <marquee direction= "right">.......................... </marquee>

• Behavior: It defines the scrolling behavior. By default our marquee behavior is scroll.

Behavior : scroll/ alternate/ slide

e.g. <marquee behavior= "alternate"> .......................... </marquee>

• Bgcolor: It defines the background color of scrolling area.

e.g. <marquee bgcolor= "silver"> .......................... </marquee>

• Loop: It defines the scrolling time or no of scrolling period.

e.g. <marquee loop= "5"3>.......................... </marquee>

• Scrolling speed:

� Scroll Amount: It defines the scroll speed into text or object.

e.g. <marquee scrollamount=18> ......................... </marquee>

� Scroll Delay: It defines the scroll delay speed.

e.g. <marquee scrolldelay=20> ......................... </marquee>

E.g. <marquee behavior="alternate" scrollamount="15" scrolldelay="25">Welcome to My

Marquee test page! </marquee>

Listing: It is used to define the listing of text or image; it is also called Bullets

& Numbering of text.

Two types of Listing:

• Ordered Listing: It is a listing of systematic order to specify number such as a alphabet or

numeric ordered. It is also called Numbering; this types of listing is defines 1-2-3...., i-

ii-iii....,a-b-c- d... etc.

• Unordered Listing: It is a listing of symbolic ordered. We can define this types of order to list

of icon, symbol, image ... This types of listing is also called Bullets; this types of listing

is defines ○,■,●

Listing: It defines the list of option on the particular listing (Ordered or unordered). We

can specify the listing tag into both types of listing.

Syntax: <ol/ ul> <li> ...........</li>

3 5 is indicates the five times scroll the text.

Page 12: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

12

<li> .........</li> ..... </ol/ ul>

Ordered Ordered Ordered Ordered ListingListingListingListing (N(N(N(Numbering)umbering)umbering)umbering)::::

Syntax: <ol> ........................ </ol>

e.g.

1. Katmandu City

2. Pokhera City

3. Biratnagar City

4. Sunsari City

: <ol> <li> Kathmandu City </li>

<li> Pokhera City </li>

<li> Biratnagar City </li>

<li> Sunsary City </li> </ol>

Properties:

Type: It defines the types of ordered (Numbering) listing. In this language by default our ordered

listing is 1-2-3-4...

Type: 1/a/A/i/I

e.g. i Binod Sharma

ii Sarita Karki

iii Rachana Magar

: <ol type="i"> <li> Binod Sharma </li>

<li> Sarita Karki </li>

<li> Rachana Magar </li> </ol>

Start: It defines the starting value of listing. In this language we specify the start value in numeric

value in all types of order listing. if we want to start listing into g. in a-b-c.. types, then specify

the start is 7.

e.g. g. Tiger

h. Lion

i. Bear

j. Hippopotamus

k. Zebra

: <ol type=a start=7> <li> Tiger </li>

<li> Lion </li>

<li> Bear </li>

Page 13: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

13

<li> Hippopotamus </li>

<li> Zebra </li> </ol>

UnoUnoUnoUnordered rdered rdered rdered Listing (Listing (Listing (Listing (BulletsBulletsBulletsBullets))))::::

Syntax: <ul> ........................ </ul>

e.g.

• Rara Lake

• Phewa Lake

• GhodaGhodi Lake

• Rupa Lake

: <ul> <li> Rara Lake </li>

<li> Phewa Lake </li>

<li> GhodaGhodi Lake</li>

<li> Rupa Lake </li> </ul>

Properties:

Type: It defines the types of unordered (Bullets) listing. In this language by default our

unordered listing is disc(●)...

Type: disc(●)/square(■)/circle(◦) e.g. :

� Narayangadh

� Hetauda

� Nepalgunj

� Rupandehi

� Jhapa

: <ul type=square> <li> Narayangadh </li>

<li> Hetauda </li>

<li> Nepalgunj </li>

<li> Rupandehi </li>

<li> Jhapa </li> </ol>

Unordered (Unordered (Unordered (Unordered (bullets) Listing with imagebullets) Listing with imagebullets) Listing with imagebullets) Listing with image:

It is used to specify the image into bullets sign, if we want to specify the bullet sign is our image

then we define this types of listing.

Syntax: <ul imagesrc="path of image"> <li> .................</li> </ul>

e.g.:

� Mango

� Banana

Page 14: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

14

� Papaya

<ul imagesrc="image001.gif">

<li>Mango</li>

<li>Banana</li>

<li> Papaya </li> </ul>

Nested Listing: It is a listing in mix listing, listing into sub listing is called Nested listing.

A. Animals � Wild Animals

i. Tiger ii. Elephant iii. Lion

� Domestic Animals a. Dog b. Cow c. Goat

� Water Animals . Fish I. Frog

II. Whale B. Birds

� BulBul � Parrot � crow

: <ol type="A"> <li>Animals</li> <ul type="square"> <li>Wild Animals</li> <ol type=i> <li> Tiger</li> <li> Elephant</li> <li> Lion</li> </ol> <li>Domestic Animals</li> <ol type=a> <li> Dog</li> <li> Cow</li> <li> Goat</li> </ol> <li>Water Animals</li> <ol type=I> <li> Fish</li> <li> Frog</li> <li> Whale</li> </ol>

</ul>

<li>Birds</li> <ul type=square><li> BulBul</li> <li> Parrot</li> <li> crow</li> </ul></ol>

Table:

Page 15: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

15

Table is a combination of rows & columns; it is used to store data in systematic form. To create

table:

Syntax: <table> .................</table> : This syntax is used to define the table.

<tr> .................. </tr> 4: This syntax is used to define row into table. (Row)

<th> .....................</th> 5: This syntax is used to define the heading of table into rows.

(column)

<td> .....................</td> 6: This syntax is used to define the details of table into rows.

(column)

<TABLE> </TABLE> PROPERTIES:

Border: It defines the border of table.

<table Border=2> </table>

Align: It defines the table alignment.

<table align=center> </table>

Width : It defines the width of table.

<table width=700/75%> </table>

Border color: It defines the border color.

<table bordercolor="#990011"> </table>

Bgcolor (Background color): It defines the background color.

<table bgcolor="#006600"> </table>

Background Image: To set image into background of table.

<table background="image1.gif"> </table>

Cellpadding & Cellspacing: It is used to define the cellpadding & cellspacing.

<table cellpadding=5 cellspacing=6> </table>

4 <tr>: Table of Rows 5 <th>: Table of Heading 6 <td>: Table of Details

ABC ABC ABC ABC

ABC ABC ABC ABC

ABC ABC ABC ABC

ABC ABC ABC ABC

Rows

Columns

ABC Cellpadding

Cellspacing

Page 16: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

16

Light border color & Dark border colorLight border color & Dark border colorLight border color & Dark border colorLight border color & Dark border color: It defines the table border light & dark color.

<table bordercolorlight="#008000" bordercolordark="#800080"> ............ </table>

E.g.:

Name Address Phone

Kumari Mali Patandhoka 528676676

Asmita Ghimire Banepa 544545433

Basanta Thapa Hetauda 54402125

<table border="3" cellpadding="7" cellspacing="4" bordercolor="#800000" width="364" bordercolorlight="#00FF00" bordercolordark="#000080" bgcolor="#999966"> <tr> <th align="center">Name</th> <th align="center">Address</th> <th align="center">Phone</th> </tr> <tr> <td >Kumari Mali</td><td >Patandhoka</td><td >528676676</td> </tr> <tr> <td>Asmita Ghimire</td> <td>Banepa</td> <td> 544545433</td> </tr> <tr> <td>Basanta Thapa</td> <td>Hetauda</td> <td>54402125</td> </tr> </table>

���� Ex. 1: To set image into table:

Name Address Phone Photo

Kajol Gotame Pokhera 5770056

Mukunda Upreti Rautahat 5223309

Kamala Sharma Hetauda 5450809

Sandesh Paudel Surkhet 692421

���� Ex.2: To set listing into table:

Class Name of Student

XI

1. Heralal Pandey 2. Bipin Kafle 3. Kamala Pradhan 4. Kalpana Shah 5. Neetu Karki

Page 17: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

17

XII

1. Ambika Mali 2. Sudarsan Adhikari 3. Nagendra Panta 4. Yamlal Subedi 5. Namrata Maharjan

���� Ex. 3: to design:

To merge the cell: (Merge Rows & Column)

Combines the contents of specify table cells into a single cell. We can merge cells horizontally or

vertically. Horizontally is called column merge (colspan) & vertically is called Rows merge

(rowspan).

���� ColspanColspanColspanColspan:::: It is a joining multiple column into specify cell.

Syntax: <td/th colspan='No. of column do you want to merge'> ............... </td/th>

e.g:

<table border="3" bordercolor="#111111" width="60%" align=center>

A B C D E F

G H I J

Colspan=2

Colspan=4

Colspan=2

Colspan=2

Welcome to Rojje & Ratna Bakery's Cafe

Kuleshowar, Kathmandu,Nepal

Phone: 01-4698090

Menu Menu Menu

� Drinks A. Cold Drinks

o Coke o Fanta o Sprite

B. Hot Drinks • Tea • Coffee • Hot Lemon

� MoMo I. Veg MoMo

II. Chicken MoMo III. Fish MoMo

� Pizza

a. Chicken Pizza b. Egg Pizza c. Cheese Pizza

Page 18: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

18

<tr> <td>A</td> <td colspan="2">B</td> <td>C</td> </tr> <tr> <td colspan="2">D</td> <td >E</td> <td>F</td> </tr> <tr> <td>G</td> <td>H</td> <td colspan="2">I</td> </tr> <tr> <td colspan="4">J</td> </tr> </table>

���� Ex.4 : To prepare:

Students Report Class: XI Class: XII

Boys Girls Boys Girls 45 46 41 55

���� RowspanRowspanRowspanRowspan:::: It is a joining multiple row into specify cell.

Syntax: <td/th Rowspan='No. of row do you want to merge'> ......</td/th>

e.g.:

A B C D E

F G H

<table border="3" align="center" bordercolor="#996600" width="60%">

<tr> <td rowspan="2">A</td> <td>B </td> <td>C</td> </tr>

<tr> <td>D</td> <td rowspan="3">E</td> </tr>

<tr> <td>F</td> <td rowspan="2">G</td> </tr>

<tr> <td>H</td> </tr>

</table>

���� Ex. 5 : To prepare:

Students Report Class: XI

Boys 22 Girls 35

Class: XII Boys 47 Girls 45

���� Ex. 6 : To scroll the Same two text in same line into different direction (using table):

Rowspan=3

Rowspan=2

Rowspan=2

Page 19: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

19

FORMFORMFORMFORM:

It is an input field of web page to entry data into particular database or email

account of web server.

Forms are used in a web page to collect information form the user. Generally user cannot write

or edit a web page in the browser but in a form he can type and enter data, which can be

collect by the web site owner. For example a from can be used to accept the username and

password of a user to log him onto the system or to take his details for any other purpose.

Form Field: A data-entry field on a page. A site visitor supplies information in a field either by typing text or by selecting a field.

From Element <INPUT>Tag Type Description

Text Box Text Field where the user can enter any text

Password Box Password Field where the user can enter password

Text Area Textarea Field where the user can enter multiple line of text

Check box Checkbox Filed where the user can check one or more of

available option

Radio Button Radio Filed where the user can select any one of available

option

Button Button Command button used to enter a command

Submit Button Submit Command button used to submit the form

Reset Button Reset Command button used to reset the form

Drop Down Box <select> </select> Filed where the user can select an item from the drop

down menu

� Text Box: It is a single-line data entry field, it is used to input alpha-

numeric & symbol value up to 255 byte (character).

Syntax: <input type=text name='textbox-name'>

� Password: It is also textbox, used to store separate personal

password.

Syntax: <input type=password name='password box-name'>

� Radio Box : � : It is a single selection box (option box), used to choose single option

into multiple option.

Syntax: <input type=radio name='radio box-name' Value7="Value of option">

7 Value: It defines the option value of definite option. When users select the option then value is store into particular database.

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

Page 20: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

20

� Check Box : � : It is a multiple selection box, used to choose multiple option into

multiple option.

Syntax: <input type=checkbox name='radio box-name' Value="value of option">

� Combo-Box (Drop-Down List) : It is a single selection into

multiple option into definite list.

Syntax: <select name="combo box-name"> </select>

We define the option into combo-box:

<option value="value of option">.........</option>

� Text Area: It is also textbox used to store multiple line text,

up to 64kb text into text area.

Syntax: <Textarea name='textarea-name'> </textarea>

� To define the line & width then specify rows & cols.

<textarea rows=5 cols=25 name="commentbox"> </textarea>

� Button: OK

Button is main parts of form, it is used to submit all information of

form-field into specify field (database, e-mail account..), Reset the form-field, run the definite

function etc..

� Submit Button: Submit

This button is used to submit all value of form field into particular

database.

Syntax: <input type=Submit name='submit' Value="OK">

� Reset Button: Reset

This button is used to reset all form field value into normal position.

Syntax: <input type=Reset name='reset' Value="cancel">

� Normal Button : Normal

This types of button is used to run our definite function or it is

used in our normal activities.

Syntax: <input type=button name='button-name' value="Value of button" Onclick="function-name">

e.g.:

<html><head><title> Application Form</title> </head>

<body bgcolor="#002299">

<form name=myform >

<center> Application Form</center> <br>

Name : <input type=text name=txtname> <br>

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

Page 21: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

21

Address : <input type=text name=txtaddress> <br>

Phone No : <input type=text name=txtphone> <br>

Sex : <input type=radio name=rdosex value="Male">Male <input type=radio name=rdosex

value="Female"> Female <br>

Qualification : <select name=cboqulification>

<option value="slc/below">SLC/Below</option>

<option value="10+2">10+2</option>

<option value="bachelor">Bachelor</option>

<option value="master/above">Master/Above</option>

</select><br>

Hobbies: <input type=checkbox name=chk1 value="Chatting">Chatting

<input type=checkbox name=chk2 value="swimming">Swimming

<input type=checkbox name=chk2 value="Playing">Playing

<input type=checkbox name=chk2 value="Others">Others <br>

Comments: <textarea name=comment rows=5 cols=20> </textarea> <br>

<center> <input type=button name=btnsend value="Send">

<input type=submit value="Submit"> <input type=reset value="Reset"> </center>

</form>

</body> </html>

���� Ex.7: To design Application Form:

���� Ex.: 8: To Design Login Form:

Page 22: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

22

LINKLINKLINKLINK::::

It is used to link from one web page or file to another. When a site visitor clicks the link, the destination is displayed in a Web browser, opened, or run, depending on the type of destination. The destination is frequently another web page, but it can also be a picture, a multimedia file, a Office document, an e-mail address, or a program.

Two types of Link: a) Inner Link: This types of link is used to link into same page different placement or title (top

of page, bottom of page, title of different place etc.).

b) Outer Link: This types of link is used to link into our page to another page, file, image etc. Syntax: <A href='path of link file'> text/image </A> e.g.: <A href="homepage.html"> Click here to view home page</A> <A href="image1.jpg"> <img src=image1.jpg width=100 hight=70> </A>

To link another file or another pageTo link another file or another pageTo link another file or another pageTo link another file or another page:

Syntax: <A href="path of file or page"> text/image </A>

To link web addTo link web addTo link web addTo link web addressressressress(URL)(URL)(URL)(URL):

Syntax: <A href='path of web address'> text/image </A> e.g.: <A href="http://www.google.com"> Click here to view google.com</A>

To link ETo link ETo link ETo link E----mail addressmail addressmail addressmail address:

Syntax: <A href=Mailto:'e-mail address'> text/image </A> E.g. : <A href="mailto:[email protected]"> Visit my e-mail </A>

To link To link To link To link same page into difference location(Bookmark)same page into difference location(Bookmark)same page into difference location(Bookmark)same page into difference location(Bookmark):

���� first we define the bookmark name:

Syntax: <A name="bookmark name"> text/image </A>

���� Link the bookmark:

Syntax: <A href=#'bookmark name'> text/image </A> E.g. : <A name=top> Welcome to this page </A> <A href=#top> Click here to go top of page </A>

Page 23: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

23

���� To define the display target:

It is used to define the linking file display target. To display into new window:

Syntax: <A href='file name' target="blank"> text/image </A> To display into particular frame:

Syntax: <A href="file name" target= frame name> text/image </A>

Frameset: Frameset: Frameset: Frameset: A page that divides a Web browser window into different areas called frames that can independently display several web pages.

Syntax: <frameset> </frameset>

To divide the frame window:

♣ Rows: It defines the frame row part:

Syntax: <frameset rows='size of row frame', 'total size of page'> </frameset>

♣ Cols: It defines the column part of frame.

Syntax: <frameset rows='size of row frame', 'total size of page'> </frameset>

ROWS This attribute is used to divide the screen into multiple rows. It can be set equal to a list of values. Depending on the require size of each row. The values can number of pixel, percentage of screen resolution and the symbol of * which indicates the remaining space of the screen.

COLS This attribute is used to divide the screen into multiple columns. It can be set equal to a list of values. Depending on the require size of each Columns. The values can number of pixel, percentage of screen resolution and the symbol of * which indicates the remaining space of the screen

Page 24: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

24

To set the frame page:

Syntax: <frame src= 'path of page'> </frame>

E.g.:

<html>

<head><title> Welcome this page...............</title> </head>

<frameset rows="20%,*8">

<frame name="banner" scrolling="no" noresize target="contents" src="bannerpage.html">

<frameset cols="20%,*">

<frame name="contents" noresize target="main" src="list.html">

<frame name="main" src="home.html">

</frameset> </frameset>

</html>

To define the frame target into content page:

<a href='path of page' target='name of frame'> text/image </a>

e.g.: <a href="home.html" target=main> Home</a>

►►► To Hide the Scrolling bar into frame:

scrolling=no

►►► No resize the frame:

noresize

e.g. <frame src=titlepage.html scrolling=no noresize> </frame>

Ex.9. To Design pages:

1. Banner Page: (To set Banner of page & set the banner page into top of frame.)

2. Link Page: (To Link all related page & set the display target into main frame & set

this page into frame column part.)

3. Home Page: (Give Introduction of the related topic of page & define some dynamic

effect & set into main frame.)

4. Other related pages: (To define the related page like About us, Contact us, Facilities,

Our Placement area, Plan, Activities, Photo Gallery, etc... & Link into link page.)

5. To set into Frame all page & display the related page into Main frame.

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

Ex.1:

8 *: It defines the all of the page. (in here row frame is 20% of all page).

Page 25: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

25

<table border="3" cellpadding="9" cellspacing="6" bordercolorlight="#00FF00" bordercolordark="#000080" > <tr> <th>Name</th> <th>Address</th> <th>Phone</th> <th>Photo</th> </tr> <tr> <td>Kajol Gotame</td> <td>Pokhera</td> <td>5770056</td> <td> <img src="kajol.jpg" width="70" height="56"> </td> </tr> <tr> <td>Mukunda Upreti</td> <td>Rautahat</td> <td>5223309</td> <td> <img src="kajol.jpg" width="70" height="56"></td> </tr> <tr> <td>Kamala Sharma</td> <td>Hetauda</td> <td>5450809</td> <td> <img src="km.jpg" width="72" height="67"></td> </tr> </table> Ex. 2 : <table border="3" cellpadding="6" cellspacing="4" width="68%" bordercolorlight="#00FFFF" bordercolordark="#000080" bgcolor="#666633"> <tr align= center> <th>Class</th> <th>Name of Student</th> </tr> <tr> <td>XI</td> <td> <ol> <li>Heralal Pandey</li> <li>Bipin Kafle</li> <li>Kamala Pradhan</li> <li>Kalpana Shah</li> <li>Neetu Karki</li> </ol> </td> </tr> <tr> <td>XII</td> <td> <ol> <li>Ambika Mali</li> <li>Sudarsan Adhikari</li> <li>Nagendra Panta</li> <li>Yamlal Subedi</li> <li>Namrata Maharjan</li> </ol> </td> </tr> </table> Ex.3:

<html><head> <title>Welcome to Rojje & Ratna Bakery's Cafe</title> </head>

<body bgcolor="#669900">

<table border="6" cellpadding="4" cellspacing="5" bordercolor="#111111" width="100%" bordercolorlight="#800080"

bordercolordark="#008080" bgcolor="#C0C0C0">

<tr> <td width="100%"> <center>

<h1><font color="#FF0000">Welcome to Rojje & Ratna Bakery's Cafe</font></h1>

<h2><font color="#008000">Kuleshowar, Kathmandu,Nepal</font></h2>

<h5><font color="#0000FF">Phone: 01-4698090</font></h5> </center>

<hr color="#800000" size=4>

<pre><font size="6" color="#00FFFF"><b><marquee behavior="alternate" scrollamount="10" scrolldelay="50">Menu

Menu Menu </marquee></b></font> </pre>

<hr color="#800000" size="4">

<ul type="square">

<li><b><font size="6" color="#660099">Drinks</li> </font></b>

<ol type=A> <li><h3> <u>Cold Drinks </u> </h3>

<ul type=circle> <li>Coke</li>

<li> Fanta</li>

<li> Sprite</li> </ul>

<li> <h3> <u>Hot Drinks </u> </h3>

<ul type=disc> <li>Tea</li>

<li> Coffee</li>

<li> Hot Lemon</li> </ul> </ol>

<li><b><font size="6" color="#660099">MoMo</font></b></li>

<ol type=I> <li>Veg MoMo</li>

<li> Chicken MoMo</li>

<li> Fish MoMo</li> </ol>

<li><b><font size="6" color="#660099">Pizza</font></b></li>

<ol type=a> <li>Egg Pizza</li>

Page 26: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

26

<li> Chicken Pizza</li>

<li> Cheese Pizza</li> </ol> </ul>

</td> </tr> </table></center> </body> </html>

Ex. 4:

<table border="3" bordercolor="#226633" width="357">

<tr> <th colspan="4" align="center">Student Report</th> </tr>

<tr> <td colspan="2" align="center"><b>Class: XI</b></td>

<td colspan="2" align="center"><b>Class: XII</b></td> </tr>

<tr> <td align="center"><b>Boys</b></td> <td align="center"><b>Girls</b></td>

<td align="center"><b>Boys</b></td> <td align="center">Girls</td> </tr>

<tr align="center"> <td> 45</td> <td>46</td> <td>41</td><td>55</td> </tr>

</table>

Ex. 5:

<table border="2 width="350">

<tr> <td rowspan="4" align="center">Students Report</td>

<td rowspan="2" align="center">Class: XI</td> <td align="center">Boys</td>

<td width="48" align="center">22</td> </tr>

<tr> <td align="center">Girls</td> <td align="center">35</td> </tr>

<tr> <td rowspan="2" align="center">Class: XII</td> <td align="center">Boys</td>

<td align="center">47</td> </tr>

<tr> <td align="center">Girls</td> <td align="center">45</td> </tr>

</table>

Ex. 6:

<table border="0" width="100%">

<tr> <td><b> <marquee direction="right">Welcome to My Web Page</marquee></b></td>

<td><b> <marquee>Welcome to My Web Page</marquee></b></td> </tr>

</table>

Ex.7:

<Form Name="application-form" method=post action="sendform.asp">

<table border="3" bordercolor="#0000FF" width="50%" bgcolor="#800080" align=center>

<tr> <th width="100%" colspan="2">

<font size="5" color="#FFFF00">Application Form</font></th> </tr>

<tr> <td ><font color="#CCFFFF">Name:</font></td>

<td ><input type="text" name="txtname" size="15"></td> </tr>

<tr> <td ><font color="#CCFFFF">Address:</font></td>

<td ><input type="text" name="txtaddress" size="15"></td> </tr>

<tr> <td ><font color="#CCFFFF">Sex:</font></td>

<td><font color="#FF9900"><input type="radio" value="Male" name="rdosex"> <b>Male

<input type="radio" value="Female" name="rdosex">Female</b></font></td> </tr>

<tr> <td ><font color="#CCFFFF">Phone No.</font></td>

Page 27: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

27

<td><input type="text" name="txtphone" size="15"></td> </tr>

<tr> <td><font color="#CCFFFF">Qualification:</font></td>

<td> <select name="qualification"> <option>SLC/Below</option>

<option>10+2</option>

<option>Bachelor</option>

<option>Master/Above</option> </select></td> </tr>

<tr> <td ><font color="#CCFFFF">Hobbies:</font></td>

<td> <input type="checkbox" name="chk1" value="Playing">Playing

<input type="checkbox" name="chk2" value="dancing"> Dancing <br>

<input type="checkbox" name="chk3" value="Chatting">Chatting

<input type="checkbox" name="chk4" value="Others"> Others</td> </tr>

<tr> <td ><font color="#CCFFFF">Remarks:</font></td>

<td><textarea rows="3" name="remarks" cols="20"></textarea></td> </tr>

<tr> <td colspan="2" align=center><input type=button name="normal" value="Send">

<input type="submit" value="Submit"><input type="reset"></td> </tr>

</table> </form>

Ex.8:

<form name=login-form method=post action=loginok.asp>

<table border="3" bgcolor="#008080" width=30% align=center>

<tr> <td colspan="2" align=center><font size="5" color="#FF0000">Login Form</font></td>

</tr>

<tr> <td ><font color="#CCFFFF">User Name:</font></td>

<td><input type="text" name="txtname" size="15"></td> </tr>

<tr> <td ><font color="#CCFFFF">Password:</font></td>

<td> <input type="password" name="txtaddress" size="15"></td> </tr>

<tr> <td><font color="#CCFFFF">Login As:</font></td>

<td><select name="Login"> <option>Administrator</option>

<option>Admin</option>

<option>User</option>

<option>Tester</option> </select></td> </tr>

<tr> <td colspan="2" align=center> <input type="submit" value="OK" name="submit">

<input type="reset" value="Cancel" name="cancel"></td> </tr>

</table> </form>

CSS: CascCSS: CascCSS: CascCSS: Cascading Style Sheetading Style Sheetading Style Sheetading Style Sheet:

A cascading style sheet is a document containing style information that can be referenced by

multiple web pages. Styles define appearance and formatting of content on web pages and allow

authors more control over how content is displayed in browsers.

Page 28: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

28

Style: Styles are used to control the font, alignment, and spacing of text; appearance of background

pages; and other HTML attributes. A collection of styles is called a style sheet.

Paragraph style:

Syntax:

<P span style=property1;property2;........................>

......................................................... text ...................................................... </p>

e.g. < p span style= "font size:45pt; color: gold; background:blue; width:bold; margin

right:1.5in">

................................................ Paragraph Text Here ...................... </p>

� <span style="background-color: "Brown"> Text Here </span>

===========It define the brown background color of text.=============

�<font color="#000080" style9="font-size: 55pt; font-weight: 700; text-decoration: overline">

Text Here ............................... </font>

User Define Style:

It is a style to provide the different class effect into paragraph.

* This style is defined into head part of page. *

Syntax: <head>

<style>

.'class name{ property1;property2;........................}

...............................................................

</style> </head> <body>

<p class= 'class name'> text here </p>

...................................................................

</body></html>

e.g.: <html><head> <title> My Style Page......</title>

<style>

.style1{font size:46pt; color: darkblue; background:pink; text-decoration: overline}

.style2{font size:55pt; color: darkgreen; background:orange;}

.style3{font size:67pt; color: #990066; background:#110099; text-decoration: underline}

</style> </head>

9 Style: In this situation Style is used to format the text (size, decoration etc..)

Page 29: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

29

<body>

<p class=style1> Text here </p>

<p class=style2> Text Here </p>

<p class=style3> Text Here </p>

</body> </html>

♣ Marquee with Style: To format marquee text:

e.g. <marquee style="font-family:Bradley Hand ITC; font-size:1.5in; font-

weight:Bold; text-transform:Uppercase"> Welcome To Marquee Style </marquee>

♣ Heading with Style: To define the difference types of formatting into heading: Filter : It is used to define the heading filter; it provide the different style in the heading like color glow, shadow, drop shadow etc. 1. Glow : It is used to define the glowing color into heading. e.g. <html> <head> <title> Welcome to this page............</title> <style> h1{width:45%} h2{width:30%} </style></head> <body> <h1 style=filter:glow(color=marron10)> Welcome to Glow Heading one</h1> <h2 style=filter:glow(color=#990011)> Welcome to Glow Heading Two</h2> </body> </html> 2. Shadow : It is used to define the shadow into heading. e.g. <html> <head> <title> Welcome to this page............</title> <style> h1{width:45%} h2{width:30%} </style></head> <body> <h1 style=filter:shadow(color=darkblue)> Welcome to Shadow Heading one</h1> <h2 style=filter:shadow(color=#119900)> Welcome to Shadow Heading Two</h2> </body> </html> 3. Drop Shadow : It is used to define the Drop shadow into heading. e.g. <html> <head> <title> Welcome to this page............</title> <style> h1{width:45%} h2{width:30%} </style></head> <body>

10 Color: It define the glow, Shadow, Drop shadow color into heading.

Page 30: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

30

<h1 style=filter:dropshadow(color=orange)> Welcome to Drop shadow Heading one</h1> <h2 style=filter:dropshadow(color=#992200)> Welcome to Drop shadow Heading Two</h2> </body> </html> 4. Fliph : It is used to fliph the heading. e.g. <html> <head> <title> Welcome to this page............</title> <style> h1{width:45%} h2{width:30%} </style></head> <body> <h1 style=filter:fliph> Welcome to Fliph Heading one</h1> < h2 style=filter:fliph> Welcome to Fliph Heading two</h2> </body> </html> 5. Flipv : It is used to flipv the heading. e.g. <html> <head> <title> Welcome to this page............</title> <style> h1{width:45%} h2{width:30%} </style></head> <body> <h1 style=filter:flipv> Welcome to Flipv Heading one</h1> < h2 style=filter:flipv> Welcome to Flipv Heading two</h2> </body> </html> 6. Blur : It is used to blur the heading. e.g. <html> <head> <title> Welcome to this page............</title> <style> h1{width:45%} h2{width:30%} </style></head> <body> <h1 style=filter:blur> Welcome to blur Heading one</h1> <h2 style=filter:blur> Welcome to blur Heading two</h2> </body> </html>

Paragraph style:

Font family: It defines the font family in the paragraph text.

e.g.: <html> <head> <title> Welcome to this page............</title> <style>

Page 31: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

31

p{font-family: monotype corsiva} </style></head> <body> <p> .................................. This is Monotype Corsiva text................. </p> </body> </html>

Font size : It is used to define the font size: like 0.5 in/ 100.......

e.g.: <html> <head> <title> Welcome to this page............</title> <style>

p{font-size: 1.5in} </style></head> <body> <p> .................................. Text Size = 1.5 inch................. </p> </body> </html>

Font Weight: It defines the font width (Normal, Bold ) of paragraph.

e.g. <html> <head> <title> Welcome to this page............</title> <style>

p{font-weight:bold} </style></head> <body> <p> .................................. Bold text................. </p> </body> </html>

Text Decoration: It is used to change text decoration (underline/ Overline).

e.g. : <html> <head> <title> Welcome to this page............</title> <style>

p{text-decoration: overline} </style></head> <body> <p> .................................. Text Decoration is overline ................. </p> </body> </html>

Text color: it is used to change the text color of paragraph.

e.g. : <html> <head> <title> Welcome to this page............</title> <style>

p{color:darkred } </style></head> <body> <p> .................................. Text color is dark red................. </p> </body> </html>

Page 32: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

32

Text transform : It is used to transform text into particular case (uppercase/lowercase)

e.g. : <html> <head> <title> Welcome to this page............</title> <style>

p{text-transform:uppercase} </style></head> <body> <p> welcome to text transform uppercase.. </p> </body> </html>

Background Image : It define the background image into paragraph.

e.g. : <html> <head> <title> Welcome to this page............</title> <style>

p{background-image:url11(a.jpg);} </style></head> <body> <p> .................................. Text Size = 1.5 inch................. </p> </body> </html>

Background color: It define the background color of paragraph:

e.g. : e.g. : <html> <head> <title> Welcome to this page............</title> <style>

p{background:lightblue;} </style></head> <body> <p> .................................. Background color ................. </p> </body> </html>

Border: It defines the Border into our paragraph.

Border Style:

i. Solid ii. groove iii. inset iv. outset

e.g. : <html> <head> <title> Welcome to this page............</title> <style>

p{border-style:inset;} </style></head> <body>

11 URL : (Uniform Resource Locator) A string that supplies the Internet address of a Web site or resource on the World Wide Web, along with the protocol by which the site or resource is accessed. The most common URL type is http://, which gives the Internet address of a Web page. Some other URL types are gopher://, which gives the Internet address of a gopher directory, and ftp://, which gives the network location of an FTP resource.

Page 33: Syntax: - LanguageHTML (Hyper Text Markup Language):- It is an application of SGML (Standardized General Markup Language) used to create Web pages (Electronic page). We design all

Hyper Text Markup Language (HTML)

L i l a r a m P a u d e l . . .�

33

<p> ..................................Inset Border ................. </p> </body> </html>

V Border color: It is used to define the border color of paragraph:

e.g. : e.g. : <html> <head> <title> Welcome to this page............</title> <style> p{border-style:outset; Border-color:#ff00ff} </style></head> <body> <p> ..................................Inset Border ................. </p> </body> </html>

V Border Top color: It is used to define the Top border color of paragraph:

e.g. : e.g. : <html> <head> <title> Welcome to this page............</title> <style> p{border-style:outset; Border-color:#ff00ff; border-top-color:Lightblue} </style></head> <body> <p> .................................Border Top color is light blue................. </p> </body> </html>

V Indent: It is used to define the indent space of paragraph (first line indent of paragraph):

e.g. : e.g. : <html> <head> <title> Welcome to this page............</title> <style> p{text-indent:1=5in;} </style></head> <body> <p> ..................................text indent ................. </p> </body> </html>

*** Unit maybe: Inch, mm, cm, m ... ****

Thank you,

********