UMA TECHNICAL DEGREE COLLEGE

SIDDHARTH NAGAR(U.P)

Web Designing IN HINDI MEDIUM

Syllabus
BASIC FUNDAMENTAL OF HTML ...................................................................................................................................... 2
COMPILER..................................................................................................................................................................... 2
INTERPRETER ................................................................................................................................................................ 2
ANGULAR BRACKETS .................................................................................................................................................... 2
TAG ............................................................................................................................................................................... 2
OPEN TAG ................................................................................................................................................................. 2
CLOSE ....................................................................................................................................................................... 2
HYPER TEXT MARKUP LANGUAGE(HTML) ........................................................................................................................ 3
INTRODUCTION of HTML ............................................................................................................................................. 3
TEXT EDITORS SOFTWARE ............................................................................................................................................ 4
ATTRIBUTES OF HTML .................................................................................................................................................. 6
HEADINGS TAGS ........................................................................................................................................................... 8
PARAGRAPHS TAG ........................................................................................................................................................ 9
STYLES ........................................................................................................................................................................ 10
FORMATING................................................................................................................................................................ 10
QUOTATIONS .............................................................................................................................................................. 11
COMMENTS ................................................................................................................................................................ 20
COLORS....................................................................................................................................................................... 21
BASIC FUNDAMENTAL OF HTML
COMPILER
Compiler programming language source code machine code,
bite code translate

INTERPRETER
Interpreter execute
line by line machine language translate

ANGULAR BRACKETS
Angular Brackets <> ( Chevrons )

TAG
HTML tag webpage Keywords web browser content

HTML tag, webpage content

1. Open Tag
2. Close Tag
OPEN TAG
tag tag page content section <>

CLOSE
tag page content open x, section dks
</>

SOURCE AND OBJECT CODE

High Level Language Source code Object
code
HYPER TEXT MARKUP LANGUAGE(HTML)
INTRODUCTION of HTML
HTML Hyper Text Markup Language web page design

( Team Berner Lee) ( )

HTML HTML Team Berner-Lee

Deva Raggett
HTML HTML +
HTML HTML 2.0
w3c ( world wide web consortium ) HTML 3.0 version
4.01, 2000 XHTML 1.0, 2008 – 2014 HTML 5 2016
HTML 5.1, 2017 HTML 5.2
Main Tag in HTML
HTML
 DOCTYPE HTML
 HTML
 HEAD
 BODY
DOCTYPE:-
DOCTYPE HTML , HTML 5
HTML:-
HTML content ( object ) insert
HEAD:-
webpage header section meta contain
:- title, style , link etc.
BODY :-
webpage content insert :- heading ,
paragraph, image, video, audio, div etc.
TEXT EDITORS SOFTWARE
HTML HMTL
HTML

1. Notepad
2. Visual Studio
3. Sublime Text
1.Notepad:-
Notepad , windows 7 and windows 8 Text Editor Software
system install software
2. Visual Studio:-
Visual Studio, Text Editor software Language Text
:- HTML, CSS, JAVASCRIPT, PYTHON, ETC.
3. Sublime Text :-
Sublime Text , Text Editor web designing

HTML File Save Process

ATTRIBUTES OF HTML
HTML ATTRIBUTES, HTML ELEMENTS
 HTML ELEMENTS ( ATTRIBUTES )
 ( ELEMENTS )
 OPEN TAG
 name/value pairs :- name=”value”
Href Attributes:-
Href Hyper Link File <a> tag webpage
URL(Uniform Resource Locator) link
:-
Source Code Object Code

Src Attributes:-
Src Source <img> tag picture address
extension name insert

Source Code Object Code

The width and height:-
Width and Height attributes <img> tag
image
Note:- Object
:- pixel, percentage, etc.
Source Code Object Code

The Style Attributes:-

attributes content format style
style CSS
HTML style Object Content insert

Source Code Object Code

The lang Attributes:-
Lang Language webpage
webpage
HEADINGS TAGS
HTML Heading tag tag webpage
title or subtitle
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Example :-
Source Code Object Code

BIGGER HEADING:-
Text size ( )
tag style attribute
Example: -
Source Code Object Code

PARAGRAPHS TAG :-
tag paragraph type paragraph
spacing set
Example :-
Source Code Object Code
* content paragraph
:-
Source Code Object Code

HTML Horizontal Rules ( Hr tag ) :-

tag Horizontal line open tag
Example :-
Source Code Object Code

HTML Line Breaks ( Br tag ) :-

tag break text
line

Source Code Object Code

FORMATING
The HTML <pre> Element :-
Pre preformatted text editor text
webpage :-

Source Code Object Code

HTML Style :-
HTML content styling :-

Style attribute background-color, text color, font-size text-align

:-
 Source Code Object Code

Source Code Object Code

Source Code Object Code

Source Code Object Code

Source Code Object Code

 Source Code Object Code

HTML Text Formatting

HTML Text format
Text format :-

Bold ( <b> ) :-
tag use text b
open and close tag :-

Source Code Object Code

<!DOCTYPE html>
<html>
<head><title>Bold text</title> Hello Dear Students
</head>
<body>
<b>Hello Dear Students</b>
</body>
</html>
Strong Tag ( <strong> ) :-
tag use b tag text bold open
and close tag :-
Source Code Object Code
<!DOCTYPE html>
<html>
<head>
<title>Strong Text</title>
</head> education is life
<body>
<strong>education is life</strong>
</body>
</html>

Itallic Tag ( <italic> ) :-

tag use text i Open
Close :-
Source Code Object Code
<!DOCTYPE html>
<html>
<head>
<title>Italic Text</title>
</head> education is life
<body>
<i>education is life</i>
</body>
</html>

Emphasized Tag :-
tag use italic tag em
open and close tag :-
Source Code Object Code
<!DOCTYPE html>
<html>
<head>
<title>Italic Text</title>
</head>
<body> education is life
<em>education is life</em>
</body>
</html>
Mark Tag :-
 tag use type text highlight open and
close tag :-

Source Code Object Code

<!DOCTYPE html>
<html> Text Highlight
<head><title>Mark Text</title></head>
<body>
<mark>Text Highlight</mark>
</body>
</html>

Small Tag :-
tag use type text text
open and close tag :-

Source Code Object Code

<DOCTYPE html>
<html>
<head><title>Mark Text</title></head> Hello Amit Less than other text
<body>
Hello Amit
<small>Less than other text</small>
</body>
</html>

Big Tag :-
tag use type text text
open and close tag :-
Source Code Object Code
<DOCTYPE html>
<html>
<head><title>Mark Text</title></head> Hello Amit Less than other text
<body>
Hello Amit
<big>Less than other text</big>
</body></html>
Del Tag :-
 tag use type text line
text webpage open and close tag :-

Source Code Object Code

<DOCTYPE html>
<html>
<head><title>Mark Text</title></head> Hello Amit Stirke through
<body>
Hello Amit
<del>Strike through</del>
</body>
</html>

Ins Tag :-
tag use type text underline
Inserted open and close tag :-

Source Code Object Code

<DOCTYPE html>
<html>
<head><title>Mark Text</title></head> Hello Amit Inserted Text
<body>
Hello Amit
<ins>Inserted Text</del>
</body>
</html>

U Tag :-
tag use type text underline
underline open and close tag :-

Source Code Object Code

<DOCTYPE html>
<html>
<head><title>Mark Text</title></head> Hello Amit Underline Text
<body>
Hello Amit
<u>Underline Text</u>
</body></html>
Sub Tag :-
 tag use text line text type Sub-
Script open and close tag :-
Source Code Object Code
<DOCTYPE html>
<html>
<head><title>Mark Text</title></head> Hello Amit H2O
<body>
Hello Amit
H₂O
</body>
</html>

Sup Tag :-
tag use text line text type
SuperScript open and close tag :-
Source Code Object Code
<DOCTYPE html>
<html>
<head><title>Mark Text</title></head> Hello Amit 102
<body>
Hello Amit
10²
</body>
</html>

Center Tag :-
tag use type text page center set tag
open and close
Source Code Object Code
<DOCTYPE html>
<html>
Center Text
<head><title>Mark Text</title></head>
<body>
Hello Amit
<center>Center Text</center>
</body></html>
QUOTATIONS
use type text quotations
 :- blockquote, q, abbr, address, bdo etc.
Blockquote tag :-
tag type text by default indent spacing set
open and close :-
Source Code Object Code
<DOCTYPE html> Hello
<html>
Indent Spacing
<head><title>Mark Text</title></head>
<body>
Hello Amit
<blockquote>Indent Spacing </blockquote>
</body></html>

Quotation(q) Tag :-
tag use type text double single quotatin set
tag open and close
Source Code Object Code
<DOCTYPE html>
<html>
“Quotations Mark”
<head><title>Mark Text</title></head>
<body>
Hello Amit
<q>Quotations Mark</q>
</body></html>

Abbr Tag :-
Abbrevaition tag use type text
by-default dotted underline title show
tag open and close
Source Code Object Code
<DOCTYPE html>
<html>
<head><title>Mark Text</title></head>
<body> Uma Technical Degree College
<abbr title=”utdcsn”>Uma Technical Degree College</abbr>
</body></html>
Address Tag :-
tag use type text italic set tag
open and close
Source Code Object Code
<DOCTYPE html>
<html>
<head><title>Mark Text</title></head>
<body>
Hello Amit
<address>Italic Text</address>
</body></html>

Cite Tag :-
tag use type text italic set tag
open and close :-
Source Code Object Code
<DOCTYPE html>
<html>
<head><title>Mark Text</title></head>
<body>
Hello Amit
<cite>MCQ</cite>
</body></html>

BDO Tag :-
Bi-Directional Override tag use type
Sentence right to left left to right (mirror ) set
tag open and close :-
Source Code Object Code
<DOCTYPE html>
<html>
<head><title>Mark Text</title></head>
<body>
Hello Amit
<bdo dir=”rtl”>He is good boy.</bdo>
</body></html>
COMMENTS
use insert tag information HTML
comment :-
1. Add Comment
2. Hide Comment
3. Hide Inline Comment
Add Comment :-
HTML insert tag information comment
text object code source code
:-
Source Code Object Code
<DOCTYPE html>
<html>
<head><title>Mark Text</title></head>
<body>
<!-- This is info -- >
<bdo dir=”rtl”>He is good boy.</bdo>
</body></html>

Hide Comment :-
HTML tag comment comment text
object code source code :-
Source Code Object Code
<DOCTYPE html>
<html>
<head><title>Mark Text</title></head>
<body>
<!--<p>This is nice</p> -- >
<bdo dir=”rtl”>He is good boy.</bdo>
</body></html>
Hide Inline Comment :-
HTML insert tag comment comment
text object code :-
Source Code Object Code
<!DOCTYPE html>
<html><head></head> this is exam.
<body><h1> this is <!-- Demo --> exam .</h1>
</body></html>
COLORS
HTML webpage css attributes
webpage multiple color Webpage

1. Color Name
2. RGB Value Color
3. HEX
4. HSL
1. Color Name :
HTML name :- red, blue, green yellow, pink,
aqua etc.
Source Code Object Code

2. RGB Color :-
HTML RGB Red Green Blue
0 - 255 point
:-
Source Code Object Code
 3.HEX Color :-
HEX Hexadecimal Hexadecimal code
:-
Source Code Object Code

4. HSL Color :-
HSL Hue, Saturation and Lightness
:-

Source Code Object Code

List Tag
List tag og tag gSA tks fdlh oLrq ;k fo’k; ds ckjs esa rS;kj fd;k x;k lwph gksrk gSA ;g fuEufyf[kr izdkj ds
gksrs gSA tSls :- order list, unorder list, dl etc.
eq[; #i ls list rhu izdkj ds gksrs gSA
1. Ordered List
2. Unordered List
3. Other List
1. Ordered List :-
Ordered List og list tag gksrk gS] tks number ;k text ds vk/kkj ij list rS;kj djrs gSaA tSls: - 1,a,I etc.

Source Code Object Code

2. Unordered List :-
Unordered List og list tag gS] tks symbol ds vk/kkj ij list rS;kj djrs gSaA tSls :- disc, dot etc.
Source Code Object Code

blh ds vUrxZr ,d vkSj tag vkrk gS ftls ge list tag ds uke tku ldrs gSaA mnkgj.k :-
Source Code Source Code
blds vykokW dqN vkSj Hkh list tag gSa ftlesa symbol ;k number dh vko”;drk ugha gksrh gSaA tSls :- dl, dt,
etc
Description List :-
bl izdkj ds list tag esa list ds #i esa text type djus ds fy, vuqefr nsrk gSA blds vUrxZr dt vkSj dd tag
vkrs gSaA
Term in a defines list :-
bldk eryc gksrk gS fd list ds #i esa text dks define djukA bls dt ls n”kkZrs gSaA
Term in a description list :-
bldk eryc gksrk gS fd list ds vUnj list ds #i esa text dks define djus ds fy, fd;k tkrk gS
A tSls :- Source Code Object Code
Form HTML :-
HTML ds }kjk ge form vklkuh ls cuk ldrs gSaA blesa dbZ attributes and elements nksuks gksrs gSA
ftldk iz;ksx ge vko”;drk vuqlkj dj ldrs gSaA
HTML Form Attributes :-
Attribute dk vFkZ gksrk gS] fdlh tag ds vUnj jgdj dk;Z djukA HTML esa QkWeZ cukus ls lacaf/kr fuEufyf[kr
attributes gksrs gSaA tSls :- Method, Action, Autocomplete etc.
HTML Form Elements :-
HTML esa QkWeZ cukus ds fy, fuEufyf[kr Elements gSaA tSls :-
FORM, LABEL, SELECT, TEXTAREA, BUTTON, FIELDSET, LEGEND, DATALIST, OUTPUT, OPTION, OPTGROUP
Example :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Styles.css">
</head>
<body>
<form action="submitted.html" autocomplete="on">
<fieldset>
<legend>Admission Form</legend>
<div class="utdc">UMA TECHNICAL DEGREE COLLEGE</div><br><br>
<label for="student name">Student Name</label>
<input type="text" required><br><br>
<label for="address">Address</label>
<textarea name="address" id=""></textarea><br><br>
<label for="course">Course</label>
<select name="course" id="">
<option value="ADCA">ADCA</option>
<OPTION>DCA</OPTION>
<OPTION>MSO</OPTION>
<OPTION>CCA</OPTION>
<OPTION>WEB DESIGN</OPTION>
</select><br><br>
<button>Submit</button> &nbsp;&nbsp; <input type="reset" value="reset">
</fieldset>
</form>
</body>
</html>
<FORM> :-
bldk iz;ksx HTML esa Form cukus ds fy, vuqefr nsus dk dke djrk gSA ;g open and close nksuks tag
gksrs gSA
<Label> :-
bldk iz;ksx ge buiqV fd, x, ckWDl ds lkeus Text ds fy[kus ds fy, fd;k tkrk gSA ;g open and close
nksuks tag gksrs gSA
<Input> :-
bldk iz;ksx ge webpage ij inputbox insert djus ds fy, fd;k tkrk gSA ;g dsoy open tag gksrs gSA
<Select> :-
bldk iz;ksx ge fdlh Hkh option dks select djus ds fy, fd;k tkrk gSA ;g open and close nksuks tag
gksrs gSA
<Option> :-

bldk iz;ksx ge select fd, x, option dks fu/kkZfjr djus ds fy, fd;k tkrk gSA ;g open and close nksuks
tag gksrs gSA
<Textarea> :-
bldk iz;ksx ge address ds textarea fu/kkZfjr djus ds fy, fd;k tkrk gSA ;g open and close nksuks tag
gksrs gSA
<Fieldset> :-
bldk iz;ksx ge QkWeZ esa text ls lacaf/kr outline nsus ds fy, fd;k tkrk gSA ;g open and close nksuks tag
gksrs gSA

<Legend> :-
bldk iz;ksx ge fn, x, outline ij text type djus ds fy, fd;k tkrk gSA ;g open and close nksuks
tag gksrs gSA

<Button> :-
bldk iz;ksx ge cuk, x, QkWeZ dks fdlh ist ;k ,Dlu ls fyad djds lcfeV djus ds fy, fd;k tkrk gSA ;g
Hkh open and close nksuks tag gksrs gSA
Input Types :-
HTML esa QkWeZ cukus ds fy, buiqV ds dbZ izdkj gSa tks vius vko';drk ds vuqlkj dke es yk, tk ldrs gSaA
tSls :- button, checkbox, color, date, email, file, image, month, number, password, radio,
range, reset, search, submit, tel, text, time, url, week.
Note:- bu lcdk iz;ksx djus ds fy, gesa ges”kk label tag dk iz;ksx djuk gksxk D;ksafd label gh ;g
define dj ikrk gS fd gesa fdl izdkj dk input box pkfg,A
Button :- bldk iz;ksx QkWeZ ds fy, input tag }kjk button cukus ds fy, fd;k tkrk gSA tSls :-
<input type=”button” value=”button”>
Checkbox :- bldk iz;ksx fdlh fodYi ds fy, QkWeZ ij checkbox insert djus ds fy, fd;k tkrk gSA
tSls :- <input type=”checkbox”>
Color :- bldk iz;ksx QkWeZ esa color pick djus ds fy, fd;k tkrk gSA tSls :-
<input type=”color”>
Date :- bldk iz;ksx QkWeZ esa fnukad ds fy, dysMa j bulVZ djus ds fy, fd;k tkrk gSA tSls :-
<input type=”date”>
Time :- bldk iz;ksx QkWeZ esa le; ds fy, ?kM+h bulVZ djus ds fy, fd;k tkrk gSA tSls :-
<input type=”time”>
Email :- bld iz;ksx QkWeZ esa email ds #i esa text type djus ds fy, fd;k tkrk gSA tSls :-
<input type=”email”>
Password :- bldk iz;ksx QkWeZ esa ikloMZ ds #i esa text type djus ds fy, fd;k tkrk gSA tSls :-
<input type=”password”>
File :- bldk iz;ksx QkWeZ esa fdlh Hkh Qkby dks pwt djus ds fy, fd;k tkrk gSA tSls :-
<input type=”file”>
Image:- bldk iz;ksx QkWeZ esa QksVks bulVZ djus ds fy, fd;k tkrk gSA tSls :-
<input type="image" src="as.png" alt="">
Month:- bldk iz;ksx QkWeZ esa eghus dk dysM a j ykus ds fy, fd;k tkrk gSA tSls :-
<input type="month">
Number:- bl izdkj ds buiqV Vkbi esa uEcj Vkbi djus ds fy, fd;k tkrk gSA tSls :-
<input type=”number”>
Radio:- bl izdkj ds buiqV Vkbi ds }kjk fodYi ds #i esa text dk p;u djus ds fy, fd;k tkrk gSA tSls
:- <input type="radio" name="ADCA" id="">ADCA
Range:- bl izdkj ds buiqV Vkbi ds }kjk uEcj ;k izfr”kr ds vk/kkj ij range select djus ds fy, fd;k
tkrk gSA tSls :-
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">

Reset:- bl izdkj ds buiqV Vkbi ds }kjk QkWeZ ij bulVZ fd, x, text/object dks gVkus ds fy, fd;k
tkrk gSA tSls :-
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="reset" value="Reset">
</form>
Submit:- bl izdkj ds buiqV Vkbi ds }kjk QkWeZ ij bulVZ fd, x, text/object dks vxys ist ds fy,
submit djus ds fy, fd;k tkrk gSA
tSls :-
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="submit">
</form>
Search:- bl izdkj ds buiqV Vkbi ds }kjk QkWeZ ij bulVZ fd, x, text/object dks [kkstus ds fy, fd;k
tkrk gSA tSls :- <input type="search" >
Text:- bl izdkj ds buiqV Vkbi ds }kjk QkWeZ ij text fy[kus ds fy, fd;k tkrk gSA tSls :-
<input type=”text”>
bl izdkj ds buiqV Vkbi ds }kjk QkWeZ ij bulVZ fd, x, text/object dks [kkstus ds fy, fd;k tkrk gSA
tSls :-week.
Table Tag
bl tag dk use webpage esa table insert djus ds fy, fd;k tkrk gSA Table insert djus ds fy,
fuEufyf[kr Tag ;k Attributes gSaA
Tag :-
1.Table (<table></table>) tag
2.Table Heading (<th></th>) tag
3.Table Row (<tr></tr>I tag
4.Table Datatype (<td></td>) tag
1.Table tag:-
bl tag dk use table insert djus dk vuqefr nsus ds fy, fd;k tkrk gSA
<table>……</table>
2.Table Heading tag :-
bl tag dk use table esa heading data type djus ds fy, fd;k tkrk gSA rFkk ;s column ds #i esa dk;Z
djrk gSA
<th>…..</th>
3.Table Row tag :-
bl tag dk use row ds #i esa table insert djus ds fy, fd;k tkrk gSA
<tr>…..</tr>
4.Table datatype tag :-
bl tag dk use table esa normal text type djus ds fy, fd;k tkrk gSA
<td>….</td>
Attributes:-
Border, Size, Width, Height, Align, Colspan, Rowspan etc.
Table Creation Work:-