HTML

By vijayjaipur56

May 26, 2024

0

42

Table of Contents

HTML

परिचय (Introduction):-

अधिकांशतः व्यक्ति और संगठन एच.टी.एम.एल. में वेब साईट बनाते है। यहां पर वेबसाइट बनाने के बहुत से तरीके हैं लेकिन वेब साईट बनाने के लिये (HTML) बहुत ज्यादा उपयोग में आता है। हम विश्वास करते हैं कि HTML वेब पेज बनाने का सबसे अच्छा तरीका है जब आप विभिन्न कम्प्यूटर जो सारी दुनिया में फैले है के द्वारा एक बड़े टेक्स्ट को आपस में जोड़ते हैं तब आप मकड़ी के जाले जैसा लिंक प्राप्त करते है जिसे वर्ड वाइड वेब (World Wide Web) कहते हैं, इसमें इन्टरनेट से जुड़े विभिन्न कम्प्यूटर आपस में जुड़े रहते हैं। ये सभी वेब पेज एक विशेष फॉरमेट में लिखे जाते है। यह फॉरमेट या भाषा एच.टी.एम.एल. (HTML- Hyper Text Markup Language) कहलाती है।
Html निर्देंश दस्तावेज के टेक्स्ट को खण्डों में विभक्त करता है इन्हें तत्व कहते हैं।
HTML के निर्देश तथा निर्देश जिन पर लगाने होते हैं सम्मिलित रूप से HTML तत्व कहलाते है। HTML निर्देश स्वयं टैग कहलाते हैं तथा यह निम्न प्रकार से दिखाई देते है।
उदाहरणः-
<element_name>
यह तत्वों के नाम होते हैं जिनके दाये और बाये कोण कोष्टक लगाते हैं। ज्यादातर तत्व विशिष्ट उद्देश्य या फोरमेटिंग के लिए दस्तावेज को खण्डों में चिन्हित करते हैं। ऊपर लिखा हुआ <element_name> टेग खण्ड के प्रारम्भ को चिन्हित करता है तथा अन्तिम टेग खण्ड के अन्त चिन्हित करता है।
</element_name>
HTML दस्तावेज की संरचना (Structure of HTML Document):
यहां कुछ निश्चित तत्व होते हैं जो वेब दस्तावेज संरचना में आवश्य होते हैं। दस्तावेज को बनाने तथा विकसित करने का सरल रास्ता है। आवश्यक तत्वों को प्रारम्भ बिन्दु से टाईप करते हैं। आप तत्वों को इन्सर्ट करते हुए अपने दस्तावेजों में जोड़ सकते है। विद्यमान तत्वों के प्रारम्भिक तथा अन्त टेग के मध्य सारणी को जोड़ा जा सकता है और आपको याद नहीं रखना पड़ता कि आपने एण्ड टेग को टाइप किया है या नहीं टेेग को लिखने के लिए हमेशा कोण कोष्ठक (<>) का उपयोग करते है।

नोटपेड में आप निम्न टेग से शुरू करते है।

<HTML>

<HEAD>

<TITLE> Universal Computer System </TITLE>

……………….. शीर्ष तत्व
</HEAD>
दस्तावेज का प्रधान अंग (Body document)
</HTML>
HTML टेग के प्रकार (Types of HTML Tag):-
HTML में टेग होते है और प्रत्येक टैग का अपना एट्रिब्यूट और मान होता है। टैग ब्राउजर को सूचना देते है कि उनको वेब पेज पर आवश्यकतानुसार दिखाया जाये।
बेकग्राउण्ड (Background):-
बेकग्राउण्ड एट्रिब्यूट वेब बनाने वाले को बेकग्राउण्ड का रंग बदलने की अनुमति देता है। बेकग्राउण्ड रंग बदलने के लिए निम्न स्टेटमेन्ट लिखते है।
उदाहरणः-
<Body bgcolor=”blue”>
या
<Body bgcolor=”0000FF”>
Bgcolor एट्रिब्युट बेकग्राउण्ड का कलर निर्देशित कोड के अनुसार बदल देता है। टेक्स्ट एट्रिब्युट भी सम्पूर्ण पेज के टेक्स्ट कलर देता है ना कि केवल पेज के एक विशिष्ट खण्ड को।
सारणी कलर कोड

RGB Color	Hexadecimal Value
White	#FFFFFF
Black	#000000
Red	#FF0000
Green	#00FF00
Blue	#0000FF
Magenta	#FF00FF
Cyan	#00FFFF
Yellow	#FFFFoo
Aquamarine	#70DB93
Violet	#9F5F9F
Brass	#B5A642
Copper	#B87333
Pink	#FF6EC7
Orange	#FF7FF00

Html Commends

<HTML>..</HTML>	Indicates the beginning of HTML document
<HEAD>..</HEAD>	Indicates the beginning of document header
<BODY>..</BODY>	Indicates beginning of HTML text
<TITLE>..</TITLE>	Indicates title for the web page.

Formatting tages

Format	Tages	Description
Paragraph :	<P>	Indicates Paragraph break
	<BR>	Indicates Line Break
	<PRE>..</PRE>	Indicates preformatted text
	<BLOCKQUOTE> </BLOCKQUOTE>	Indicates block of text indented
	<HR>	Draws a horizontal line across the page
Character	<I>..</I>	Indicates Italics
	<U>…</U>	Underlines the text
	<B>..</B>	Indicates bold
	<TT>..</TT>	Indicates Typewriter font
	<EM>..</EM>	Emphasizes the text (usually italics)
	<ADDRESS>.. </ADDRESS>	Indicates information about the author who created the web page in a unique font
	<STRONG>.. </STRONG>	Indicates typical Bold font
	<CITE>..</CITE>	Highlights citation
	<CODE></CODE>	Used to enclose program codes
Header	<H1>..</H1>	First level heading
	<H2>..</H2>	Second level heading
	<H3>..</H3>	Third Level heading
	<H4>..</H4>	Fourth level heading
	<H5>..</H5>	Fifth level heading
	<H6>..</H6>	Sixth level heading

HTML Programs

Example 1.

<html>

<head>

<Title> RGCSM</title>

</head>

<body>

This is my first Program

</body>

</html>

Example 2.

<html>

<head>

<title> RGCSM</title>

</head>

<h1> <font color=”yellow”> <font size=”6”> WELCOME TO HTML </h1>

</marquee>

</body>

</html>

Example 3.

<html>

<body>

<h1> WELCOME TO HTML</h1>

<P>

Popular consumer Goods is a supermarket where people can purchase their goods on the net which helps the customers to procure the products through the net.

<p>

To know more about popular consumer goods contact the following address.

<p>

Proprietor : vijay

<BR>

Mobile : 9000000007

<BR>

E-mainl : vijay@yahoo.com

</address>

</body>

</html>

Example 4.

<html>

<body>

<head> <h2 ALIHN=”CENTER”> Popular consumer goods limited </h2></head>

<P>

We all know that it has become very common to advertise the products on the net.

<EM> Menus </EM>

Popular consumer goods is one of leading supermarket in India to surf the net for the customers to products they need.

<HR><P>

<h2> <TT> To know more about popular consumer goods limited look in </TT> </H2>

</BLOCKQUOTE><PRE>

The supermarket wants to extend its service and promote the sales of the company globally to compete with the international market it decided to create a web site on the internet popular <em> Free service </em> as one of the reasons behind them.

<PRE>

</BODY>

</HTML>

Example 5. (HTML)

<html>

<body>

<h3> The supermarket (<SUB> PCG [LTD]</SUB>)!!!</H3>

<P> Customers use : <CODE> copy con program exe</CODE>

<P>

<title> hot water safety </title>

<pre>

<P><I> Hot water is dangerous. </I>

<P> Turn Down the hot water heater thermostat.

<P> Supervise the children in the tub.

<P>Don’t encourage children to play around the tub.

</pre>

<CODE>

#include <Stdio.h>

Main ()

{

Printf (“Hollo”\n);

}

</CODE>
<HR>
Phrases quoted from <CITY> Popular consumer goods limited </CITY>

</BLOCKQUOTE>

</body>

</Html>

Example 6.

<html>

<head>

<title> RGCSM </title>

<body>

<h1>RGCSM Computer Courses </h1>

<OL>

<LI> Fundamental

<LI>Operating System

<LI> MS- Office

<h2>TALLY</h2>

<UL>

<LI> Fundamental

<LI> Operating System

<LI> Tally 7.2, 9.0, 9.2

</UL>

</body>

</html>

Example 7.

<html>

<head>

<title> RGCSM </title>

<h1> Welcome to RGCSM Center </h1>

</head>

</html>

Example 8.

<html>

<head>

<title>

Table

</title>

</head>

<body>

<table>

<tr>

<td> Vijay </td>

<td> Singh </td>

<td> Kuchaman City</td>

</tr>

<tr>

<td> Sanjay </td>

<td> Singh </td>

<td> Sambhar Lake </td>

</tr>

</table>

</body>

</html>

Example 9.

<html>

<head>

<title>

Tables

</title>

</head>

<body>

<table>

<caption>1. TABLE </caption>

<tr>

<th width =”20%”> first Name </th>

<th width =”20%”> Midle Name </th>

</tr>

<tr>

<td> Vijay </td>

<td> Singh </td>

<td> Kuchaman </td>

</tr>

<tr>

<td> Sanjay </td>

<td> Singh </td>

<td> Sambhar Lake </td>

</tr>

</table>

</body>

</html>

The following table summarizes FORMS and it’s associated Tages.

Tag	Attributes	Description
<FORM>..</FORM>		Specifies HTML FORM header
	ACTION=FILE / URL	Specifies the location where FORM data is passed
	METHOD=GET/POST	Specifies the method by which the data is sent to the server
<INPUT>		It is the basic for data entry
	TYPE=TEXT	Specifies single line text
	TYPE=REDIO	Create a redio button
	TYPE =CHECKBOX	Create a checkbox, two stated field, selected or unselected.
	TYPE =PASSWORD	Display asterisk in the field.
	TYPE=HIDDEN	The field will not be wisible.
	TYPE=SUBMIT	Create a button, which passes data to the Server.
	TYPE=RESET	Create a button, which resets all the fields of the FORM.
	TYPE= BUTTON	Create a button other than SUBMIT/RESET down.
<SELECT></SELECT>		Creates a pull-down menu
	NAME	Uniquely Identifies <SELECT> tag
	SIZE	Specifies the number of items visible at a time
	MULPIPLE	Allows multiple items to be selected.
<OPTION>		Defines items of the pull-down menu
	SELECTED	Specifies the default item among the list
<TEXTAREA> </TESTAREA>		Specifies multiline text entry field
	NAME	Specifies the name of TEXTAREA
	ROWS	Specifies the number of rows
	COLS	Specifies the number of columns.

Example 10.

<html>

<title>

RGCSM

</title>

<body>

<H2> UNIVERSAL COMPUTER SYSTEM </H2>

<H3> KUCHAMAN CITY </H3>

<H4> V.S.Khangarot </H3>

<H5> APPLICATION FOR ADMISSION </H4> </CENTER>

<P>

1. Name of the applicant:-

2. Address:-

3. Gender:-

<Input Type= “RADIO” Name=”gen”> MALE

<Input Type= “RADIO” Name=”gen”> FEMALE <BR><BR>

4. Employed:-

<Input Name= “EMPLOYED” Type= “CHECKBOX” > YES

5. Bank Name:- <br>

<OPTION> Bank of Baroda

<OPTION> Bank of Canera

<OPTION> Corporation Bank

<OPTION> Lord Krishna Bank

<OPTION> State Bank of India

<OPTION> Vijay Bank

</select>

6. Remark:- <BR>

THIS STUDENT IS JOINING THE UNIVERSAL COMPUTER SYSTEM

</TEXTAREA>

</TD>

</TR>

</Table>

</Form>

</body>

</html>

Example 11.

<HTML>

<Head>

<Title> RGCSM </Title>

</Head>

<H2> Popular Cunsumer Goods </H2>

<H3> Registration Details on Your Purchase </H3><br></CENTER>

Name:- <Input Type = “Text” Name=”id” Size=”20″> <br><br>

Enter Password:- <Input Type= “Password”> <br><br>

Gender:- <Input Type=”Radio” Name=”gen”> Male

<Input Type=”Radio” Name=”gen”> Female

Enter Address:- <br>

</Textarea><br><br>

Email:- <input type=”text” name=”email”><br><br>

Mob.:- <input type=”text” name=”Mob”><br><br>

Country:- <Select>

<Option> India </Option>

<Option> China </Option>

<Option> Shri Lanka </Option>

</Select> <br><br>

Choice:-

<Input Type= “Checkbox” Name= “mv”> Movies

<Input Type= “Checkbox” Name= “sp”> Sports

<Input Type= “Checkbox” Name= “rd”> Reading

<Input Type= “Checkbox” Name= “ms”> Mosic

<Form>

</Body>

</Html>

Example 12.

ON LINE RESULT

<HTML<

<HEAD>

<TITLE>

STUDENTS MARKS

</TITLE>

</HEAD>

<BODY BGCOLOR=”PINK”

<H1> <CENTER> ONLINE RESULT </H1> </CENTER>

</FONT SIZE>

</FONT COLOR>

<HR>

<TR>

<TD> <CENTER> <FONT COLOR=”BRIGHT”> SELECT THE MODE IN WHICH YOU WANT TO SEE RESULT</CENTER>

</FONT COLOR>

</TD> </TR>

<TR> <TD> <HR> SELECT ROLL NO.

</SELECT>

</TD> </TR>

</TABLE>

<TR> <TD> <ALIGN = “RIGHT”> <CENTER> ROLL NUMBER: </TD> </TD> </CENTER>