0% found this document useful (0 votes)

45 views129 pages

V B.SC Web Interface and Designing

The document outlines the curriculum for a B.Sc. course on Web Interface Designing, covering key topics such as HTML, CSS, JavaScript, and WordPress. It includes detailed explanations of HTML structure, graphics, media, client-side validation, and WordPress functionalities like themes and plugins. Each unit provides foundational knowledge and practical skills necessary for web development and design.

Uploaded by

kandamadhuri

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

45 views129 pages

V B.SC Web Interface and Designing

Uploaded by

kandamadhuri

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 129

Web Interface Designing Technologies

B. SC V SEMESTER
WEN INTERFACE DESIGNING
UNIT I: HTML: Introduction to web designing, difference between web applications and
desktop applications, introduction to HTML, HTML structure, elements, attributes, headings,
paragraphs, styles, colours, HTML formatting, Quotations, Comments, images, tables, lists,
blocks and classes, HTML CSS, HTML frames, file paths, layout, symbols, HTML
responsive. HTML forms: HTML form elements, input types, input attributes,

UNIT II: HTML graphics, HTML media – video, audio, plug INS, you tube. HTML API’S:
Geo location, Drag/drop, local storage, HTML SSE. CSS: CSS home, introduction, syntax,
colours, back ground, borders, margins, padding, height/width, text, fonts, icons, tables, lists,
position, over flow, float, CSS combinators, pseudo class, pseudo elements, opacity, tool
tips, image gallery, CSS forms, CSS counters, CSS responsive.

UNIT III:Client side Validation: Introduction to JavaScript - What is DHTML, JavaScript,

basics, variables, string manipulations, mathematical functions, statements, operators, arrays,
functions. Objects in JavaScript - Data and objects in JavaScript, regular expressions,
exception handling. DHTML with JavaScript - Data validation, opening a new window,
messages and confirmations, the status bar, different frames, rollover buttons, moving
images.

UNIT IV: Word press: Introduction to word press, servers like wamp, bitnami e.tc,
installing and configuring word press, understanding admin panel, working with posts and
pages, using editor, text formatting with shortcuts, working with media-Adding, editing,
deleting media elements, working with widgets, menus.

UNIT V: Working with themes-parent and child themes, using featured images, configuring
settings, user and user roles and profiles, adding external links, extending word press with
plug-ins. Customizing the site, changing the appearance of site using css , protecting word
press website from hackers.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Unit-1
Introduction
HTML Introduction
Hyper Text Markup Language (HTML). Which is the mostly widely used language on web to
develop webpages.HTML is the combination of Hypertext and Markup Language. Hypertext
defines the link between the web pages.Amarkuplanguageisused to definethetext documentwithin
tag whichdefines the structureof webpages.

HTML was created by “Tim Berners-Lee” in “1990’s” at “CERN” in Geneva. But “HTML 2.0”
was the firststandard HTML specification. Which was published in 1995. Currently we have
“HTML-5” version which waspublished in2014.

CharacteristicsofHTML:
Easytounderstand::it istheeasiest languageyoucan sayveryeasy tograspthis
languageandeasytodevelop.

Flexibility:: This language is so much flexible that you can create whatever you want, a
flexible way to designwebpagesalong with the text.

Linkable::youcan makelinkable textlikeusers canconnect fromonepagetoanother

pageorwebsitethrough thesecharacteristics.
Limitlessfeatures::youcanaddvideos,gifs,andpicturesorsoundanythingyouwantthatwillmake
thewebsitemoreattractiveand understandable.

Support::youcan usethis languageto displaythe documents onany platformlike windows,Linux

orMac.
HTMLBASICS:
 WebpagescanbecreatedandmodifiedbyusingprofessionalHTMLeditors.
 Forlearning HTML, weuse asimple text editor likeNotepad(pc) or TextEdit(Mac).
 We mustfollow thesesteps bellow to createyourweb pagewith notepad or textedit.

 OpenNotepad(PC)
 WritesomeHTMLCode
 SavetheHTMLpage.Savethefileon your computer,namethe
file“.html”(extension) andsettheencodingto UTF-8.

BasicHTMLDocument:
Everydocumentbeginswith aHTMLdocumenttag.
<!DOCTYPEhtml>
<html>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies
<head>
<title>titleofdocument</title>

</head>

<body>
<h1>This is aheading</h1>

<p>Helloworld</p>
</body>
</html>

Here,intheaboveexample:
<html>:EveryHTMLcodemustbeenclosedbetweenbasic HTMLtags.Itbeginswith<html>and
endswith
</html>tag.

<head>: The head tag comes next which contains all the header information of the
webpage (or) document likethe title of the page and other miscellaneous information.
These information are enclosed within head tag whichopenswith <head>and ends with
</head>.
<title>:Wecan mentionthe title ofaweb pageusingthe<title>tag. Thetag begins
with<title>andends with
</title>.

<body>:thebody tagcontains theactual bodyofthepagewhichwill bevisible toall theusers.

Thisopens with<body>andendswith </body>.Everycontent enclosedwithin thistag will
beshown onthewebpagebeitwritings(or) images (or) audios (or) videos (or)even links.

Q)Whatare thedifferent typesof HTMLTags?

1.Heading tags:
These tags help us to give headings to the content of webpage. These tags are mainly
written inside the body tag.HTML provides us with six heading tags from <h1>, <h2>,
<h3>, <h4>, <h5> and <h6>. Every tag displays theheadingin adifferent style and size.
Ex:<h1>helloworld</h1>

<h2>helloworld</h2>
<h3>helloworld</h3>

<h4>helloworld</h4>

<h5>helloworld</h5>
<h6>helloworld</h6>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies
Output:
helloworldhelloworl
d
helloworld
helloworld
helloworld
helloworld

2.paragraphtag:
<p>Thesetagshelpustowriteparagraphstatementinawebpage.Theystart withthe<p>tag
andendswith</p>
Example:
<p>HTMLmeansHyperTextMar
kupLanguage<br>Usedforcreate
web pages <br>
Itisatag-basedlanguage<br>
</p>

3.Centeringcontent:<center>
Youcan use <center>tagput any contentin thecenterof
thepageor any table cell.Ex:<p>this text is not inthe center
</p>
<center><p> this text is in the
center
</p></center>Output:this text
is notinthe center
Thistext isin thecenter

4.Bold tag <b>:

Itisusedtospecify boldcontentinhtml
documentwithoutanyextraimportance.Ex:<b>hello world
</b>
o/p: hello
world
5. Italictag <i>:
Itisusedtowritethecontentinitalic format.
Ex:<i> Madhuri </i>
Output:Madhuri

6.Underlinetag <u>:
Itisusedtosetthe
contentunderlin

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies
e.Ex:<u>
webtechnology
</u>Output:
web technology
7. Fonttag:
It is used to specify the font size, font colour and font-
family in html document.Ex:<font face=“times
NewRoman”>example</font>
8. <del>tag:
TheHTML<del> elementdefines textthat hasbeendeleted fromadocument.Browsers
willusuallystrikealinethroughdeleted text.
Ex:<p>my favorite color is

<del> blue </del> red </p>

o/p:my favoritecolor isred

9. <sub><sup>tags:
The<sub>tag definessubscripttext. Subscripttext appearshalfacharacterbelow
thenormalline, andissometimesrendered in asmallerfont. Subscript text
canbeusedforchemical formulaslikeH2O
Ex: <p> this is <sub> subscripted </sub> text </p>

o/p:this issubscriptedtext.
Q) WriteaboutHyperlinksinHTML?
With HTML, easily add hyperlinks to any HTML page. Like about page, team page or
even a test bycreatingahyperlink. Tomakeahyperlinkin an HTMLpage, usethe<a>and
</a>tags,whicharethetags usedtodefines thelinks.

The <a> tag indicates where the hyperlink starts and the </a> tag indicates where it
ends. Whatever textgetsadded insidethesetags, willwork asahyperlinks add theURL for thelink
inthe <ahref =“ ”>

Syntax:<ahref=“url”>linktext </a>
Themostimportant attributeof the<a>element isthe hrefattribute,which
indicatesthelinksdestination. Thelinktext isthepartthatwillbevisibletothereader,clicking
onthelinktext,willsendthe readertothespecifiedURL address.

Ex:
<!DOCTYPEhtml>
<html>
<head>
<title>HTMLHyperlinks</title>
</head>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies
<body>
<h1>Hyper link example
<p>click onthefollowinglink </p>
<ahref = “https://www.madhuri.org”>hyperlink </a>
</body>
</html>
Output:
Hyperlinkexample

ClickonthefollowinglinkHyperlink

https://www.madhuri.org

Q)ExplainaboutImagetag?
HTML img tag is used to display image on the web page. HTML img tag is an
empty tag that containsattributesonly, closing tags arenot used in HTML imageelement.

Ex:<h2>HTMLImageexample</h2>
<img src=“good_morning.jpg”alt =“goodmorning friends”/>
Program:
<!DOCTYPE>

<html>
<body>
<h2>HTMLImageExample</h2>

<imgsrc=“good_morning.jpg”alt=“goodmorningfriends”/>

</body>

</html>
o/p:

HTML ImageExample

Here

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies
Srcattribute:
It is a necessary attribute that describe the source or path of the image. It instructs
the browser where tolookforthe imageontheserver. Thelocationofimagemay beon the
same directory oranother server.

Altattribute:
The alt attribute defines “alternate” text for the image, if it can’t be displayed. The
value of the alt attributedescribes theimagein words.

SettingWidth andHeight ofanImage:

Thewidthand heightattributes areused tospecifytheheightand widthof animage.
Theattributevaluesarespecified in pixels bydefault.

Syntax:

<imgsrc=“url/path”alt=“description”height=“value”width=“value”>
Ex:
<imgsrc=“image/tulips.jpg”alt=“yellow flower”height=“200”width=“300” >

Backgroundgraphics:
Newversionofwebbrowsercanloadanimageanduseitasbackgroundwhendisplayingon webpage.
Some people like background images if you want to include a background images, make
sure youtext can be read easily when displayed on top of the image. It can be used in body
tag to set background image foryourweb page.

Ex:<bodybackground= “url/path”>

Addingtext:you canalso give theinformationto the particularimageby using tag

like<p>as showin belowexample.

Ex:
<html>
<head>
<title>image</title>
</head>
<body>
<imgsrc=“images/tulips.jpg”alt=“yellowflower”height=“200”width=“300”>
<p>tulipsisthe springfloweringplant</p>
</body>
</html>

Q)BrieflyexplainaboutlistsinHTML?
Listsareusedto group togetherrelated pieces ofinformation sothey areclearlyassociated
with eachotherandeasy to read. Listsaregoodfrom astructural pointof viewas theyhelp create
awellstructured,moreaccessible, easy to maintaindocument.Theyarealsousefulbecause
theyprovidespecializedelementstowhichyoucanattachCSSstyles.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies
Types:Therearethreetypes oflists inHTML thatarelistedbelow.
 Orderedlist:used togroup aset ofrelated itemsin aspecificorder.
 Unorderedlist:used togroupofasetofrelateditems innoparticularorder.
 Definition/descriptionlist:usedtodisplayname/valuepairssuchastermsanddefinitions.

1.Ordered list: An ordered list typically is a numbered list of items. To create an

ordered list, the <ol> tag isused. We’re also going to change the text of the list items
<li> tag to make it clear that these are items that need
toappearinaspecificsequentialorder.
Thetypeattribute: -Thetype attributeofthe <ol>tag, definesthetype ofthelist
itemmarker.

Syntax:<ol[type=“1” |“A”|“a”|“I”|“I”|>………</ol>

Example: Output:

<html> Theproducts madeby milkare

<head> 1 Curd
<title>Lists</title> 2 Buttermilk

</head> 3Ghee
<body>
<h4>Theproducts made bymilk are</h4>
<ol>
<li>curd</li>
<li>Buttermilk</li>
<li>Ghee </li>
</ol>
</body>
</html>
Here,setattributetype=“A”, thenlist outitinupper case.
Ex:<ol type=“A”>
<li>curd</li>
<li>buttermilk</li>
<li>ghee </li>
</ol>

o/p:Theproducts made by milkare

A. Curd
B. Buttermilk
C. Ghee
2.Unorderedlist:An unorderedlistcreated usingthe<ul> tag,and eachlistitem
startswiththe<li>tag.Thelist itemsin orderedlistsaremarked withbullets (small
blackcircles),bydefault.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies
Thefollowing arethebulletedin unordered list.
Type Description
Type=“bullets” Thelistitemswill bein disk(bydefault)Type=“circle”
Thelistitems will be in circle.
Type=“square” Thelistitemswillbeinsquare.Type=“none”
Thelistitemswill bein none

Syntax:<ul [type=“disk”|“circle” |“square”]>…… </ul>

Example:
<html>
<head>
<title>unorderedlist</title>
</head>
<body>
<h3>someofoperatingsystemsarelistedbelow</h3>
<ul>
<li>Unix</li>
<li>Linux</li>
<li>Dos</li>
<li>Macintosh</li>
</ul>
</body>
</html>
o/p:
Someofoperatingsystems arelistedbelow
 Unix
 Linux
 Dos
 Macintosh
 Someofoperating systemsarelistedbelow

Ex:
<ul
type=”suuare”>
<li>Unix</li>
<li>Linux</li>
<li>Dos</li>
<li>Macintosh</li>
</ul>
o/p:
someofoperatingsystems arelistedbelow

 Unix
 Linux

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies
 Dos
 Macintosh

3. Definition/Description list: A definition list is a list of items, with a description of

each items. Thedefinitionlist createdusing <dl>tag. The <dl> tagis usedin
conjunctionwith <dt>defines theitem inthelistand <dd>describethe item in thelist.
Here,thetag termsstandas<dl> -definitionlist
<dt>-definitionterm.
<dd>-definitiondata.
Syntax:
<dl>
<dt>TERM</dt>
<dd>Definitionstatement</dd>
</dl>
Example:
<html>
<head>
<title>Definitionlist </title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>HTMLstands for HyperText Markuplanguage,used todesignwebpage</dd>
</dl>
</body>
</html>
HTMLHTMLstandsforHyperTextMarkuplanguage,usedtodesignwebpage.
CSS CSS standsforcascadingstylesheet, usedfor presentationforweb page.

Q)ExplainaboutHTMLTables?
TheHTMLtablesallow web authorstoarrangedatalike text,links,images,other
tablesetc.intorowsandcolumnsof cells.
The HTML tables are created using the <table> tag in which the <lr> tag is used to create table
rows and <td> tagisused to createdata cells. Theelementsunder <td>are regularand left
alignedbydefault.

Table Heading: Table Heading can be defined using <th> tag headings, which are defined in
<th> tag is centeredandbold bydefault.

CellpaddingandcellspacingAttribute:
There are two attributes called cell padding and cell spacing which you will use to adjust the
white space in yourtable cells. The cell spacing attribute defines space between table cells,
while cell padding represents the distancebetweencell borders andthe content within acell.
Caption:The<caption>tagwill serveas atitleorexplanation forthetableand itshows up at thetop of
thetable.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies
TableBackgroundcolorand Image:

Tablewithcolor:
Wecanadd backgroundcolorto thetableusing theattribute“bgcolor”.

Thisattributecanbeadded in“table”/“tr”/ “td” tag. Thecolorcan beset onthewholetotable orto

rows andcolumn.
Tablewithbackgroundimage:nowwewilltryto createatablewithonecolumnhavinga
backgroundimage.
colspanandrowspan:
Youwilluse‘Colspan’attributeifyouwant tomergetwoormorecolumnsintoa
singlecolumn.Similarwayyou will use‘rowspan’ ifyouwant to mergetwo ormore rows.

Tableheightandwidth:
Youcansetatable widthandheightusingwidth andheightattributes.You
canspecifytablewidthorheightin terms ofpixels orin terms of percentageof availablescreen area.
Exampleprogram:
<!DOCTYPEhtml>
<html>
<head>
<title>TIMETABLE</title>
</head>
<body>
<tableborder =“1”cellspacing = “1”border color=“blue”bgcolor=“yellow”>
<tr>
<thColspan=“8”>TIMETABLE</th>
</tr>
<tr>
<th>DAYS</th>
<th>1</th>
<th>2</th>
<th>3</th>
<throwspan= “7” >lunchbreak </th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
<tr>
<td>MONDAY</td>
<td>ACCOUNTS</td>
<td>ENGLISH</td>
<td>STATISTICS</td>
<td>BANKING</td>
<tdalign=“center”>-</td>
<tdalign=“center”>EP</td>
</tr>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies
<tr>
<td>TUESDAY</td>
<td>STATISTICS</td>
<td>BANKING</td>
<td>ENGLISH</td>
<td>ACCOUNTS</td>
<tdalign= “center”>-</td>
<tdalign= “center”>-</td>
</tr>
<tr>
<td>WEDNESDAY</td>
<td>ENGLISH</td>
<td>STATISTICS</td>
<td>ACCOUNTS</td>
<tdalign=“center”>EP</td>
<td>banking</td>
<tdalign=“center”>-</td>
</tr>
<tr>
<td>THURSDAY</td>
<tdalign=“center”>- </td>
<tdalign=“center”>CA</td>
<td>STATISTICS</td>
<td>ENGLISH</td>
<tdalign =“center”>EP</td>
<tdalign=“center”>-</td>
</tr>
<tr>
<td>FRIDAY</td>
<td>BANKING</td>
<td>STATISTICS</td>
<td>ENGLISH</td>
<tdColspan=“2” align=“center”> ICF</td>
<tdalign=“center”>CA</td>
<tr>
<td>SATURDAY </td>
<td>BANKING</td>
<tdalign=“center”>CA</td>
<td>STATISTICS</td>
<tdcolspan =“2”align=“center”>English</td>
<td>ACCOUNTS</td>
</tr>
</table>
</body>
</html>

Output:: TIMETABLE

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies
DAYS 1 2 3 4 5 6

MONDAY ACCOUNTS ENGLISH STATISTICS L BANKING - EP

TUESDAY STATISTICS BANKING ENGLISH U ACCOU - -

NTS
WEDNES ENGLISH STATISTICS ACCOUNTS N EP BANKING -
DAY
THURSDA - CA STATISTICS C ENGLISH EP -
Y
FRIDAY BANKING STATISTICS ENGLISH H ICT ICT CA

SATURDA BANKING CA STATISTICS ENGLISH ENGLISH ACC

Y OUN
TS

Q)Writeabout framesinHTML?
HTMLframes areusedtodividebrowserwindow
intomultiplesectionswhereeachsectioncanloadaseparateHTMLdocument.
Acollectionofframesinthebrowserwindowis knownas“frame set”.

Creatingframes:

1.<frameset>tag:Touse frames onapage weuse

<frameset>taginsteadof<body>tag.The<frameset>tag defines how to divided the window into
frames. The rows attribute of <frame set> tag defineshorizontalframes and cols attributes
defines verticalframes.

Attributes:The<frameset>tagattributesarelistedbelow.

Attribute Description
i. Cols specifiesnoofcolumnsarecontainedintheframesetandtheSizeof
eachcolumn(width)
Percentageofbrowserwindow,usecols=“30%,40%,30%”.Absoluteval
ues inpixels usecols = “100,500, 100”.
Usingawildcardsymbol col=“30%,20%,*”.
ii. Rows Itisused tospecifytherowsintheframeset,rows=“40%,60%”itassigns
two horizontalframes.
iii. Border Itspecifiesthe widthof theborderof eachframe inpixels.
iv. Framespacing itspecifiestheamountof spacebetween framesinaframeset.

2. <frame>tag:Eachframeisindicatedby<frame>tag anditdefineswhichHTML

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies
documentshallopenintotheframe.

Attribute:the <frame>tag attributesarelistedbelow.

Attributevalue Description

a.Src URL thisattributeisusedtogivethefilenamethat

should beloaded in theframe,ex:src= “topframe.html”

b.Name text thisattributeallowsyou to giveaname toaframe
Itisimportanttocreatelinksin oneframethatloadpages into
anotherframe.
Ex:name=“topframe”.
c.Margin pixels Itis usedto specifythewidthof thespace
width
betweentheleftandrightoftheframe’sborderand theframes
content.
Ex:marginwidth =“10”
d.Margin pixels Itis used tospecify theheightof thespace
Height
betweenthetopandbottomoftheframe’sborderandframes
content.
Ex:marginheight=“10”
e.Scrolling yes Itisused tocontrol theappearanceofthe

No scrollbarsthatappearontheframe.
Auto ex:scrolling=“no”
f.Frameborder 0 Itspecifieswhethertodisplay aborderaroundthe
1 frameornotanditsdefault valueis1

Example::
Frame1.html Frame2.html
<html> <html>
<body> <body>
<h1>Frame1</h1> <h1>Frame2</h1>
<P>contentsfromFrame1</P> <P>contentsfrom Frame2</P>
</body> </body>
</html> </html>

Frame3.html Frame4.html
<html> <html>
<body> <body>
<h1>Frame3</h1> <h1>Frame4</h1>
<P>contentsfromFrame3</P> <P>contentsfrom Frame4</P>
</body> </body>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies
</html> </html>

CreatingframeswithfourbasicHTMLprograms:
<html>
<body>
<framesetcols="*,*,*">
<framesetrows="*,*">
<framesrc="frame_1.html">
<framesrc="frame_2.html">
</frameset>
<framesrc="frame_3.html">
<framesrc="frame_4.html">
</frameset>
</body>
</html>

Output:

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Q) ExplainaboutHTMLforms?
HTMLforms:AnHTML formisa sectionof adocumentwhichcontainscontrolssuchastext
fields,passwordsfields,checkboxes, radiobuttons, submit button,menus etc.
AnHTMLformfacilitates theusertoenter datathatisto besentto
theserverforprocessing suchasname,email address,passwords, phonenumber…etc.
HLMLforms arerequired ifyou want tocollect somedata from thesite visitor.
Syntax:<formaction= “server.url”method =“get/post”>
</form>
HTMLformattributes:
i. Actionattribute:Definestheactiontobeperformedwhentheformissubmitted.
Ex:<formaction=“processor.html”>
ii. Methodattribute:ItspecifiestheHTTPmethodtobeusedwhensubmittingtheformdata.
Theform-
datacanbesentasURLvariables(withmethod=“get”)orasHTTPposttransaction(withm
ethod=“post”)
Theform– data can besent asURL variableswith.
Ex:<formaction“/action –page.php”method= “get”>
<formaction=“/action-page.php”method=“post”>

HTMLfontelements
i. HTML <input> element: It is fundamental form element. It is used to create form
fields, to take inputfromuser. Wecan applydifferentinput field togatherdifferent
informationfromuser.
ii. HTMLtextfield control:Thetype = “text”attribute ofinput tag creates text field control
also knownassinglelinetext fieldcontrol.
iii. HTML<textarea>tagin form: The<textarea> tagin HTMLisused toinsertmultipleline
textinaform.Thesizeof<text area>can bespecifyeitherusing“rows”or“cols”.
iv. Labeltag:Ifyouclick on the labeltag, it will focuson thetext control.To do so,you need
to haveforattributein label tag thatmust besame as id attribute ofinputtag.
v. HTMLpasswordfieldcontrol:Thepassword is not visibletotheuser in password
fieldcontrol.
vi. Radio button control: The radio button is used to select one option from multiple
options. It is used forselectionofgender, quiz questionsetc.
vii. Checkboxcontrol:Thecheckboxcontrolisusedtocheckmultipleoptionsfromgivencheckboxe
s.
viii. Submit button control: The HTML <input type = “submit” > are used to add a
submit button on webpage.When userclicks onsubmit button, then from getsubmit to
the server.
ix. HTML <field set> element: The <field set> element in HTML is used to group the
related informationofaform.This element isused with <legend>element which
providecaption forthe groupedelements.

Exampleprogram:
<!DOCTYPEhtml>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

<html>
<head>
<title>forminHTML</title>
</head>
<body>
<h2>Registrationform</h2>
<form>
<fieldset>
<legend>userpersonal information</legend>
<label>enteryour fullname</label><br>
<inputtype =“text”name =“name”><br>
<label> enteryouremail</label><br>
<inputtype =“email”name=“email”><br>
<label> enteryourpassword</label><br>
<inputtype=“password”name=“pass”><br>
<label>enteryourgender</label><br>
<inputtype=“radio” id=“gender”name = “gender”value=“male/”>male <br>
<inputtype =“radio” id=“gender”name = “gender”value=“female/”>female<br>
<label>knowlanguages</label><br>
<inputtype=“checkbox”id=“English”name=“English”value=“English”/>English<br
>
<inputtype=“checkbox”id=“Hindi”name=“Hindi”value=“Hindi”/> Hindi<br>
<inputtype=“checkbox”id=“Telugu”name =“Telugu” value
=“Telugu”/>Telugu<br>
<br>enteryour address:<br>
<textarearows=“2” cols=“20”>
</textarea>
<inputtype=“submit”value=“submit”>
</fieldset>
</form>
</body>
</html>
OUTPUT:

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

UNIT-2
GRAPHICS, HTML API’S, CSS:
Q) HTML GRAPHICS:
Graphics are representations used to make web-page or applications visually appealing
and also for improving user experience and user interaction. Some examples of
graphics are photographs, flowcharts, bar graphs, maps, engineering drawings,
constructional blueprints, etc. Usually, the following technologies are used in web
graphics with HTML5 Canvas API, WebCGM, CSS, SVG, PNG, JPG, etc.
 SVG (Scalable Vector Graphics)
 PNG (Portable Network Graphics)
 JPG or JPEG (Joint Photographic Experts Group)
 CSS (Cascading Style Sheets):
 Canvas API
 WebCGM (Web Computer Graphics Metafile)
<canvas> element:
 The HTML <canvas> element is used to draw graphics, on the fly, via scripting
(usually JavaScript).
 A canvas is a rectangular area on an HTML page. By default, a canvas has no
border and no content.
 The <canvas> element is only a container for graphics. You must use a script to
actually draw the graphics.
 Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.
 It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle,
and a multicolor text.

Example 1:
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#000000;">
Your browser does not support the HTML canvas tag.
</canvas>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

</body>
</html>

OutPut:

Example 2:

<!DOCTYPE html>
<html>
<body>
<h1>The canvas element</h1>
<canvas id="myCanvas">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 100);
</script>
</body>
</html>

Output:

Example 3:
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

#d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

Output:

CH-2 HTML-Media
Q) HTML VIDEOS
In HTML 5, adding a video to a webpage is as easy as adding an image. The HTML5
“<video>” element specifies a standard way to embed a video on a web page. There are
three different formats that are commonly supported by web browsers – mp4, Ogg, and
WebM.

Attribute Description
controls It defines the video controls which is displayed with play/pause
buttons.
height It is used to set the height of the video player.
width It is used to set the width of the video player.
poster It specifies the image which is displayed on the screen when the video
is not played.
autoplay It specifies that the video will start playing as soon as it is ready.
loop It specifies that the video file will start over again, every time
when it is completed.
muted It is used to mute the video output.
preload It specifies the author view to upload video file when the page
loads.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

src It specifies the source URL of the video file.

Example:
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green;">Video Example</h1>
<h3>HTML video tag</h3>
<p>Adding video on the webpage
</p>
<video width="450"
height="250"
controls
preload="auto">
<source src=
"C:\Users\ADMIN\Desktop\b.sc html examples\istock-1066141700_preview.mp4"
type="video/mp4">
<source src=
"C:\Users\ADMIN\Desktop\b.sc html examples\istock-1066141700_preview.mp4"
type="video/ogg">
</video>
</center>
</body>
</html>
Output:

Q) HTML AUDIO:
HTML audio tag is used to define sounds such as music and other audio clips. Currently
there are three supported file formats for HTML 5 audio tag.
1. mp3
2. wav
3. ogg

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Attribute Description
controls It defines the audio controls which is displayed with play/pause
buttons.
autoplay It specifies that the audio will start playing as soon as it is ready.
loop It specifies that the audio file will start over again, every time when it
is completed.
muted It is used to mute the audio output.

Q) HTML Plug-ins
Plug-ins is computer programs that extend the standard functionality of the browser.
HTML Plug-ins
• To run Java applets.
• To run Microsoft ActiveX controls.
• To display Flash movies.
• To display maps.
• To scan for viruses.
• To verify a bank id.
The <object> Element:
The <object> element is supported by all browsers.
The <object> element defines an embedded object within an HTML document.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

It was designed to embed plug-ins (like Java applets, PDF readers, and Flash Players) in
web pages, but can also be used to include HTML in HTML:
Example:
<!DOCTYPE html>
<html>
<body>
<object width="100%" height="500px" data="sample.html "></object>
</body>
</html>
The <embed> Element:
The <embed> element is supported in all major browsers.
The <embed> element also defines an embedded object within an HTML document.
Web browsers have supported the <embed> element for a long time. However, it has not
been a part of the HTML specification before HTML5.
Example:
<!DOCTYPE html>
<html>
<body>
<embed src="C:\Users\ADMIN\Desktop\b.sc html examples\rose.jpg">
</body>
</html>

Q) YOUTUBE
Playing a YouTube Video in HTML
To play your video on a web page, do the following:
 Upload the video to YouTube
 Take a note of the video id
 Define an <iframe> element in your web page
 Let the src attribute point to the video URL
 Use the width and height attributes to specify the dimension of the player
 Add any other parameters to the URL (see below)
 You can let your video start playing automatically when a user visits the page, by
adding autoplay=1 to the YouTube URL. Add mute=1 after autoplay=1 to let your
video start playing automatically
 Add loop=1 to let your video loop forever.
Value 0 (default): The video will play only once.
Value 1: The video will loop (forever).
 Add controls=0 to not display controls in the video player.
Value 0: A Player control does not display.
Value 1 (default): Player controls display.
Example:
<!DOCTYPE html>
<html>
<body>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

<iframe width="560" height="315" src="https://www.youtube.com/embed/hXlJnyN-xtM"

title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</iframe>

</body>
</html>
Q) HTML Geolocation API
The HTML Geolocation API is used to locate a user's position.
The HTML Geolocation API is used to get the geographical position of a user.
Using HTML Geolocation
The getCurrentPosition() method is used to return the user's position.
Geolocation is also very useful for location-specific information, like:
 Up-to-date local information
 Showing Points-of-interest near the user
 Turn-by-turn navigation (GPS)
The getCurrentPosition() method returns an object on success. The latitude, longitude and
accuracy properties are always returned. The other properties are returned if available:

Property Returns

coords.latitude The latitude as a decimal number (always returned)

coords.longitude The longitude as a decimal number (always returned)
coords.accuracy The accuracy of position (always returned)
coords.altitude The altitude in meters above the mean sea level (returned if
available)
coords.altitudeAccuracy The altitude accuracy of position (returned if available)
coords.heading The heading as degrees clockwise from North (returned if
available)
coords.speed The speed in meters per second (returned if available)
timestamp The date/time of the response (returned if available)

The Geolocation object also has other interesting methods:

 watchPosition() - Returns the current position of the user and continues to return updated
position as the user moves (like the GPS in a car).
 clearWatch() - Stops the watchPosition() method.

Example:

<!DOCTYPE html>
<html>
<body>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>
Output:

Q) Drag/drop
Drag and drop is a functionality by which users can select an object or a section of text and
can move it to a desired location and "drop" it there. In order to perform this action, the user
must highlight the text or select the object to be moved, then press and hold down the left
mouse button to grab the object. The user then drags the object to the desired location, while
still holding down the mouse button. When the mouse button is released, it "drops" the
object in that location, either moving or copying it, depending on the program.
Events for Drag and Drop feature
Event Description
Drag It fires every time when the mouse is moved while the object is being
dragged.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Dragstart It is a very initial stage. It fires when the user starts dragging object.
Dragenter It fires when the user moves his/her mouse cursur over the target element.
Dragover This event is fired when the mouse moves over an element.
Dragleave This event is fired when the mouse leaves an element.
Drop Drop It fires at the end of the drag operation.
Dragend It fires when user releases the mouse button to complete the drag operation.

Example:
<!DOCTYPE html>
<html>
<body>

</body>
</html>

Q) Web storage
With web storage, web applications can store data locally within the user's browser.

HTML web storage provides two objects for storing data on the client:

 window.localStorage - stores data with no expiration date

 window.sessionStorage - stores data for one session (data is lost when the browser
tab is closed)

The localStorage Object

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

The localStorage object stores the data with no expiration date. The data will not be
deleted when the browser is closed, and will be available the next day, week, or year.

The sessionStorage Object

The sessionStorage object is equal to the localStorage object, except that it stores the
data for only one session. The data is deleted when the user closes the specific browser
tab.

Example:
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not
support web storage...";
}
}
</script>
</head>
<body>

<p><button onclick="clickCounter()" type="button">Click me!</button></p>

<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>

</body>
</html>
Output:

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Q) HTML SSE API

The HTML5 server-sent event enables a browser to receive automatic updates and data
from a server via HTTP connections. if the server sent some updates or information to
the browser, then such events are called server-sent events.A server sent event occurs
when the browser automatically updated from the Server.The Server-sent events are
mono-directional (always come from server to client). Or it may be called as one-way
messaging.

Receiving events from the server

The Server sent event uses the EventSource object to receive events from the server. It
specifies the URI of the script which generates the events.

The EventSource Object

Events Description
onopen When a connection to the server is opened
onmessage When a message is received
onerror When an error occurs

Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{
text-align: center;
background-color: #98f5ff;
}
</style>
</head>
<body>

<h1 align="center">Dynamic Server Updates</h1>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

<div id="output"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("ServerUpdate.php");
source.onmessage = function(event) {
document.getElementById("output").innerHTML += event.data + "<br>";
}
} else {
alert("Sorry, your browser does not support the server sent updates");}
</script>
</body>
</html>
ServerUpdate.php:
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
/Get the current time of server
$time = date('r');
echo "data: The Current Server time is: {$time}\n\n";
flush();
?>

Q) Introduction to CSS
INTRODUCTION:Cascadingstylesheet(CSS)isastylesheetlanguage
usedfordescribingthe“presentation”ofadocument written in amarkup language.

CSSisdesignedprimarilytoenabletheseparation ofpresentationand
contentincludingaspectssuchasthelayout,colors and fonts.
Itcanalso displaytheweb pagedifferently dependingonthescreensizeorviewingdevice.

AdvantagesofCSS:

 CSS savestime:wecanwriteCSS onceandthen reusesamesheetin

multipleHTMLpages.You candefineastylefor each HTML element and
apply it as many web pages as youwant.
 Pages load faster: If you are using CSS you do not need to write HTML
tag attributes time. Just writeoneCSSruleofatagandapplyitto
alltheoccurrences ofthattag. So,lesscodemeansfasterdownloadtimes.
 Easymaintenance:To makeaglobal change,simplychangethestyle,and
allelementsin allthewebpageswill beupdated automatically.
 Offline Browsing: CSS can store web applications locally with the help of
an offline catch using of this,we can view offline websites. The cache also
ensures faster loading and better overall performance of thewebsite.
 Platform Independence: The script offers consistent platform

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

independence and can support latestbrowsersaswell.

SyntaxofCSS:

Selector{property:value}

HTMLelementor tag theproperty oftheelement the valueoftheproperty

LikebackgroundcolorcanbeblueACSS rule-set consistsof aselectorand

adeclarationblock. Theselector pointsto theHTMLelements youwant tostyle.
Thedeclarationblockcontainsoneormoredeclarationsseparatedbysemicolons.Each
declarationincludesaCSS property name and avalue, separated byacolon.
Example:

Declaration
declaration

H1{ color:blue; font-size:12px:}

Selectorpropertyvaluepropertyvalue

Q) Writeaboutdifferenttypes ofCascadingStyleSheets
(CSS)?
TypesofCSS: Therearethreetypesofcascadingstylesheetsare
 Inlinestylesheet
 Internalstylesheet/embeddedstylesheet
 Externalstylesheet
1. INLINE STYLE SHEET
 Inlinestylesheetsaredeclared withinindividualtagsand affectthosetagsonly.
 Inlinestylesheets aredeclaredwith thestyleattributes.
 EveryCSS changehas tobemadein everytag that hastheinlinestyleappliedtoit.
 The inline style is good for one an individual CSS change that you do not
use repeatedly through the site.Syntax: <p style = “text-align: center; font- size :
40; text-decoration: underline;”> Cascading style sheet </p>Ex:
<html>

<head>

<title>Inlinestylesheet</title>

</head>

<body>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

<pstyle=“text-align:center;text-decoration:underline;font-size:40;”>
cascadingstylesheet</p>

<h3style=“color:red;”> Inlinestylesheet</h3>

</body>

</html>

Output:

Cascadingstylesheet

Inlinestylesheet

2.Internalstylesheet:
 Aninternalstyle sheet holds theCSS codeforthewebpagein the“head”section ofthe
particularfile.
 Thismakes iteasy toapply styles likeclasses orid inorder to reusethecode.
 Thedownside(body section)ofusingan internalstylesheet isthatchangesto
theinternalstyle sheetonlyeffectthepagethe codeis insertedinto.
The<style>tagspecifies
thecontenttypeofastylesheetwithits“type”attributewhichshouldbeset to“text/CSS”.

Syntax:

<head>

<styletype=“text/CSS”>

Stylego here
</style>

</head>

Ex:

<html>

<head>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

<title>Internalstylesheet</title>

H1{
Text-align:center;

Text-transform:uppercase;

Font-family:alherian;

Font-style:italic;

</style>

</head>

<body>

<h1>UsingInternalstylesheet</h1>

<p>firstpara</p>

<p>secondpara</p>

</body>

</html>

Output:

Using Internal style

sheetFirstpara Second

para

3.Externalstylesheet:
 Usean externalstyle sheetwhen youwant toapply onestyletomanypages.
 If you make one change in an external style sheet, the change is universal on all
the pages where the stylesheetis used.
 Anexternalstylesheetisdeclaredinanexternalfilewitha.cssextension
 Itiscalledbypageswhoseinterfaceitwillaffect.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

 Externalstylesheetiscalledusing the<link>tagwhichshould beplacedinthehead

sectionofanHTMLdocument.This tag takes three attributes.

Attributesofthe<link>tag:

i. Rel–thisattributetakesthevalue“stylesheet”
ii. Type– thisattributetakes thevalue“text/CSS”
iii. href–denotesthename andlocationoftheexternalstylesheettobeused.

Syntax:

<head>

<linkrel=“stylesheet”type=“text/CSS”href =“filename.css”>
</head>
Example:
Style.css
H1{
Text-align:center;
Font-weight:bold
}
P{
Font-size:20;
Font-width:bold;
}
External .html:
<html>
<head>
<title> external style sheet
</title>
<link ref = “stylesheet” type=
“text/css” href = “style.css”>
</head>
<body>
<h1> Introduction </h1>
<p> ESS is defines the css file
separately </p>
<p> It includes many html
document </p>
</body>
</html>

Output:

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Introduction
ESSisdefinestheCSSfileseparately.Itin

cludes manyhtml document.

Q) CSS COLOURS
The color property in CSS is used to set the color of HTML elements. Typically, this
property is used to set the background color or the font color of an element.

We can define the color of an element by using the following ways:

o RGB format.
o RGBA format.
o Hexadecimal notation.
o Built-in color.

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Green;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h3 style="color:DodgerBlue;">Hello World</h3>
<h1 style="color:rgb(165,42,42);">rgb(165,42,42)</h1>
<h1 style="color:#EE82EE;">#EE82EE</h1>
<h1 style="color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>

</body>
</html>

Q) CSS Background
CSS background property is used to define the background effects on element. There
are 5 CSS background properties that affects the HTML elements:

1. background-color
2. background-image

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

3. background-repeat
4. background-attachment
5. background-position

1) CSS background-color:
The background-color property is used to specify the background color of the element.
You can set the background color like this:

background-color Sets the background color of an element

Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1{
background-color: green;
}
h2,p{
background-color: #FFFFFF;
}
</style>
</head>
<body>
<h1 style="color:#EE82EE;">HELLO WORLD</h1>
<h2 style="color:orange;">My first CSS page.</h2>
<p style="color:red;">Hello Javatpoint. This is an example of CSS background-color.</p>
</body>
</html>
2) CSS background-image:
The background-image property is used to set an image as a background of an element.
By default the image covers the entire element. You can set the background image for a
page like this.
background-image Sets the background image for an element
3) CSS background-repeat:
By default, the background-image property repeats the background image horizontally
and vertically. Some images are repeated only horizontally or vertically. The
background looks better if the image repeated horizontally only.
background-position Sets the starting position of a background image

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

background-repeat Sets how a background image will be repeated

4) CSS background-attachment:
The background-attachment property is used to specify if the background image is fixed
or scroll with the rest of the page in browser window. If you set fixed the background
image then the image will not move during scrolling in the browser. Let?s take an
example with fixed background image.
background-attachmentSets whether a background image is fixed or scrolls with the rest
of the page
5) CSS background-position:The background-position property is used to define the
initial position of the background image. By default, the background image is placed on the
top-left of the webpage.
You can set the following positions:
1. center
2. top
3. bottom
4. left
5. right
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: white url('giphy (1).gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right;
}
</style>
</head>
<body>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>If you do not see any scrollbars, Resize the browser window.</p>
</body>
</html>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Q) CSS Margins
CSS Margin property is used to define the space around elements. It is completely
transparent and doesn't have any background color. It clears an area around the element.

Top, bottom, left and right margin can be changed independently using separate
properties. You can also change all properties at once by using shorthand margin
property.

CSS Margin Properties

Property Description
margin This property is used to set all the properties in one declaration.
margin-left it is used to set left margin of an element.
margin-right It is used to set right margin of an element.
margin-top It is used to set top margin of an element.
margin-bottom It is used to set bottom margin of an element.

All the margin properties can have the following values:

 auto - the browser calculates the margin

 length -specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the parent
elementmargin: 40px 100px 120px 80px;

To shorten the code, it is possible to specify all the margin properties in one property.
 If the margin property has four values:
margin: 25px 50px 75px 100px;
 If the margin property has three values:
margin: 25px 50px 75px;
 If the margin property has two values:
margin: 25px 50px;
 If the margin property has one value:
margin: 25px;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

margin-right: 150px;
margin-left: 80px;

}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom
margin of 100px, and a left margin of 80px.</div>

</body>
</html>
Q) CSS Paddings
CSS Padding property is used to define the space between the element content and the
element border.CSS padding is affected by the background colors. It clears an area
around the content. Top, bottom, left and right padding can be changed independently
using separate properties.
CSS Padding Properties
Property Description
padding It is used to set all the padding properties in one declaration.
padding-left It is used to set left padding of an element.
padding-right It is used to set right padding of an element.
padding-top It is used to set top padding of an element.
padding-bottom It is used to set bottom padding of an element.
CSS Padding Values
Value Description
length It is used to define fixed padding in pt, px, em etc.
% It defines padding in % of containing element.

You can also change all properties at once by using shorthand padding property. It is
possible to specify all the padding properties in one property.

 padding: 25px 50px 75px 100px;

 padding: 25px 50px 75px;
 padding: 25px 50px;
 padding: 25px;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

border: 1px solid black;

background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom
padding of 50px, and a left padding of 80px.</div>
</body>
</html>

Q) CSS Height and Width

The CSS height and width properties are used to set the height and width of an element.
CSS Setting height and width
The height and width properties do not include padding, borders, or margins. It sets the
height/width of the area inside the padding, border, and margin of the element.
CSS height and width Values
The height and width properties may have the following values:
auto - This is default. The browser calculates the height and width
length - Defines the height/width in px, cm, etc.
% - Defines the height/width in percent of the containing block
initial - Sets the height/width to its default value
inherit - The height/width will be inherited from its parent value
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

<div>This div element has a height of 200px and a width of 50%.</div>

</body>
</html>

Q) CSS text:
CSS text formatting properties is used to format text and style text.
CSS text formatting include following properties:
1.TEXT COLOR:
Text-color property is used to set the color of the text. Text-color can be set by using the name
“red”, hex value “#ff0000” or by its RGB value“rgb(255, 0, 0).
Syntax:
body
{
color:color name;
}
2. TEXT ALIGNMENT
Text alignment property is used to set the horizontal alignment of the text.
The text can be set to left, right, centered and justified alignment.
In justified alignment, line is stretched such that left and right margins are straight.
Syntax:
body
{
text-align:alignment type;
}
3. TEXT DECORATION
Text decoration is used to add or remove decorations from the text.
Text decoration can be underline, overline, line-through or none.
Syntax:
body
{
text-decoration:decoration type;
}
4. TEXT TRANSFORMATION
Text transformation property is used to change the case of text, uppercase or lowercase.
Text transformation can be uppercase, lowercase or capitalise.
Capitalise is used to change the first letter of each word to uppercase.
Syntax:
body
{
text-transform:type;
}
5.TEXT DIRECTION
Text direction property is used to set the direction of the text.
The direction can be set by using rtl : right to left .

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Left to right is the default direction of the text.

Syntax:
body
{
direction:rtl;
}
6 WORD SPACING
Word spacing is used to specify the space between the words of the line.
The size can be given in px.
Syntax:
body
{
word-spacing:size;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1{
color:red;
text-align:center;
text-transform:lowercase;
}
h2
{
color:green;
text-decoration:underline;
text-align:center;
word-spacing:15px;
}

</style>
</head>
<body>
<h1> CSS STYLES</h1>
<h2>
TEXT FORMATTING
</h2>
</body>
</html>

Q) CSS Fonts:
CSS Font property is used to control the look of texts. By the use of CSS font property you can
change the text size, color, style and more.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

hese are some important font attributes:

1. CSS Font color: This property is used to change the color of the text. (standalone attribute)
2. CSS Font family: This property is used to change the face of the font.
3. CSS Font size: This property is used to increase or decrease the size of the font.
4. CSS Font style: This property is used to make the font bold, italic or oblique.
5. CSS Font variant: This property creates a small-caps effect.
6. CSS Font weight: This property is used to increase or decrease the boldness and lightness
of the font.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { color: red; font-family: sans-serif; font-style: italic; font-variant: normal;}
h2 { color: #9000A1; font-family: serif; font-style: oblique;}
p { color:rgb(0, 220, 98);font-family: monospace; font-style: normal;font-variant: small-caps; }
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>THIS IS PARAGRAPH</p>
</body>
</html>
Q) CSS ICONS:
Icons can be defined as the images or symbols used in any computer interface refer to an
element. It is a graphical representation of a file or program that helps the user to identify about
the type of file quickly. Using the icon library is the easiest way to add icons to our HTML
page. It is possible to format the library icons by using CSS. We can customize the icons
according to their color, shadow, size, etc.
There are 3 types of icon libraries available, namely
• Font Awesome Icons
• Google Icons
• Bootstrap Icons
Font Awesome icons
To use this library in our HTML page, we need to add the following link within the <head></head>
section.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font
awesome/4.7.0/css/font-awesome.min.css">

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Syntax:
<i class="fa fa-cloud"></i>

Google Icons
To use Google Icons, add the following link inside the <head> section.
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">

Syntax:
<i class="material-icons">cloud</i>
Bootstrap Icons
To use Bootstrap Icons add the following link inside the <head> section.

Syntax:
<i class="glyphicon glyphicon-cloud"></i>
Example:
<!DOCTYPE html>
<html>

<head>
<title>CSS Icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<style>
body{
text-align:center;
background-color:lightblue;
}
.fa{
color:red;
font-size:50px;
margin:10px;
}
</style>
</head>
<body style="text-align:center">
<h1>Font Awesome Library</h1>
<i class="fa fa-cloud"></i>
<i class="fa fa-file"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-bars"></i>
<i class="fa fa-car"</i>
</body>
</html>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Q) CSS LISTS
In HTML, there are two main types of lists:
 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or letters
The CSS list properties allow you to:
 Set different list item markers for ordered lists
 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items

 The list-style-type property specifies the type of list item marker.

 An Image as The List Item Marker
The list-style-image property specifies an image as the list item marker:
Example
ul {
list-style-image: url('sqpurple.gif');
}
Example:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>

Q) CSS position
The position property specifies the type of positioning method used for an element (static,
relative, fixed, absolute or sticky).
The position Property
The position property specifies the type of positioning method used for an element.
There are five different position values:
 static
 relative
 fixed
 absolute
 sticky
position: static;
HTML elements are positioned static by default. Static positioned elements are not
affected by the top, bottom, left, and right properties. An element with position:
static; is not positioned in any special way; it is always positioned according to the
normal flow of the page:
This <div> element has position: static;
position: relative;
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will
cause it to be adjusted away from its normal position. Other content will not be adjusted
to fit into any gap left by the element.
This <div> element has position: relative;
position: fixed;
An element with position: fixed; is positioned relative to the viewport, which
means it always stays in the same place even if the page is scrolled. The top, right,
bottom, and left properties are used to position the element.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

A fixed element does not leave a gap in the page where it would normally have been
located.
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned
ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the
document body, and moves along with page scrolling.
position: sticky;
An element with position: sticky; is positioned based on the user's scroll
position.A sticky element toggles between relative and fixed, depending on the
scroll position. It is positioned relative until a given offset position is met in the
viewport - then it "sticks" in place (like position:fixed).

Example for position:relative

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>
Q) CSS Overflow
The overflow property specifies whether to clip the content or to add scrollbars when the
content of an element is too big to fit in the specified area.

The overflow property has the following values:

 visible - Default. The overflow is not clipped. The content renders outside the element's box
 hidden - The overflow is clipped, and the rest of the content will be invisible
 scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
 auto - Similar to scroll, but it adds scrollbars only when necessary

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Overflow: visible
By default, the overflow is visible, meaning that it is not clipped and it renders
outside the element's box
Overflow: hidden
With the hidden value, the overflow is clipped, and the rest of the content is hidden:
Overflow: scroll
Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll
inside the box. Note that this will add a scrollbar both horizontally and vertically.
Overflow: auto
The auto value is similar to scroll, but it adds scrollbars only when necessary:

Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid;
overflow: scroll;
}
</style>
</head>
<body>
<h2>Overflow: visible</h2>
<p>By default, the overflow is visible, meaning that it is not clipped and it renders outside the
element's box:</p>
<div>You can use the overflow property when you want to have better control of the layout. The
overflow property specifies what happens if content overflows an element's box.</div>
</body>
</html>

Q) CSS Float
The CSS float property is a positioning property. It is used to push an element to the left or right,
allowing other element to wrap around it. It is generally used with images and layouts.
Elements are floated only horizontally. So it is possible only to float elements left or right, not up or
down.
CSS Float Properties
Property Description Values
clear The clear property is used to avoid elements after the
floating elements which flow around it. left,right, both, none, inherit
float It specifies whether the box should float or not. left, right, none, inherit
CSS Float Property Values

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Value Description
none It specifies that the element is not floated, and will be displayed just
where it occurs in the text. this is a default value.
left It is used to float the element to the left.
right It is used to float the element to the right.
initial It sets the property to its initial value.
inherit It is used to inherit this property from its parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>The following paragraph contains an image with style
<b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<img src="C:\Users\ADMIN\Desktop\b.sc html examples\rose.jpg" alt="Good Morning Friends"/
height="200px" width="200px">
The CSS float property is a positioning property. It is used to push an element to the left or right,
allowing other element to wrap around it. It is generally used with images and layouts.
Elements are floated only horizontally. So it is possible only to float elements left or right, not up or
down.
</p>
</body>
Q) CSS Combinators
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can
include a combinator.
There are four different combinators in CSS:
• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)
Descendant Selector
The descendant selector matches all elements that are descendants of a specified element.
Child Selector (>)
The child selector selects all elements that are the children of a specified element.
Adjacent Sibling Selector (+)
The adjacent sibling selector is used to select an element that is directly after another
specific element. Sibling elements must have the same parent element, and "adjacent"
means "immediately following".
General Sibling Selector (~)

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

The general sibling selector selects all elements that are next siblings of a specified element.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: pink;
}
</style>
</head>
<body>

<h2>Descendant Selector</h2>

<p>The descendant selector matches all elements that are descendants of a specified element.</p>

<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>

<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Q) CSS pseudo-classes
A pseudo-class can be defined as a keyword which is combined to a selector that defines the
special state of the selected elements. It is added to the selector for adding an effect to the
existing elements based on their states.

Syntax
A pseudo-class starts with a colon (:)

selector: pseudo-class {
property: value;
}
pseudo-class Description
:active It is used to add style to an active element.
:hover It adds special effects to an element when the user moves the mouse
pointer over the element.
:link It adds style to the unvisited link.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

form{
text-align:center;
}
input:focus{
border:5px solid lightblue;
box-shadow:10px 10px 10px black;
color: blue;
width:300px;
}
</style>
</head>
<body>
<h1>Hello world </h1>
<p>This is an example of :hover pseudo class</p>
<h2>The :active pseudo-class</h2>
<h3>Click the following link to see the effect</h3>
<a href="#">Click the link</a>
<form>
<h1>Name: <input type="text" value="Enter your name"></h1>
</form>
</body>
</html>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Q) CSS Pseudo-elements
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
 Style the first letter, or line, of an element
 Insert content before, or after, the content of an element
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
property: value;
}

pseudo-element Description
::first-letter (:first-letter) It selects the first letter of the text.
::first-line (:first-line) It styles the first line of the text.
::before (:before) It is used to add something before the element's content.
::after (:after) It is used to add something after the element's content.
::selection It is used to select the area of an element that is selected by
the user.
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first letter
of a text.
The following properties apply to the ::first-letter pseudo- element:
1. font properties 2.color properties
3. background properties 4.margin properties
5. padding properties 6.border properties
7. text-decoration 8.vertical-align (only if "float" is "none")
9. text-transform 10.line-height
11. float 12.clear
The ::first-line pseudo-element
It is similar to the ::first-letter pseudo-element, but it affects the entire line. It adds
the special effects to the first line of the text.
The following properties apply to the ::first-linr pseudo- element:
Color properties ,Font properties,Background properties,word-spacing, letter-spacing, line-
height, vertical-align, text-transform, text-decoration.
CSS - The ::before Pseudo-element
The ::before pseudo-element can be used to insert some content before the content
of an element.
CSS - The ::after Pseudo-element
The ::after pseudo-element can be used to insert some content after the content of
an element.
CSS - The ::marker Pseudo-element
The ::marker pseudo-element selects the markers of list items.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

CSS - The ::selection Pseudo-element

The ::selection pseudo-element matches the portion of an element that is selected
by a user.
The following CSS properties can be applied
to ::selection: color, background, cursor, and outline.

Example:
<html>
<head>
<style>
body{
text-align: center;
}
h1::first-letter {
font-family: Lucida Calligraphy;
font-size: 3cm;
color: red;
text-shadow: 5px 8px 9px green;
}
h1{
color: blue;
}

p::first-line {
font-family: Lucida Calligraphy;
font-size: 1cm;
color: red;
text-shadow: 5px 8px 9px green;
}
h3::before {
content: "'Hello World.'";
color: red;
}
h4::after {
content: "'Welcome to the bsc students'";
color: red;
}
h2::selection {
color: pink;
}
</style>
</head>
<body>
<h1> Welcome to the WEB Interface Designing Class </h1>

<p>A CSS pseudo-element is used to style specified parts of an element. For

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

example, it can be used to:

• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element</p>

<h3> In the first line the "Hello World" has added by using the pseudo-element ::before
</h3>

<h4> Good afternoon, Welcome to the bsc students

<h2> Web Interface</h2>

</body>
</html>

Q) Image Gallery
Image Gallery is used to store and display collection of pictures and you can combine images
with easy navigation
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="C:\Users\ADMIN\Desktop\b.sc html examples\rose.jpg" alt="Cinque Terre"
width="600" height="400">
</a>
<div class="desc">My favourite flower</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="C:\Users\ADMIN\Desktop\b.sc html examples\rose.jpg" alt="Forest"

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

width="600" height="400">
</a>
<div class="desc">My favourite flower</div>
</div>
</body>
</html>

Q) CSS Opacity
The CSS opacity property is used to specify the transparency of an element. In
simple word, you can say that it specifies the clarity of the image.In technical terms,
Opacity is defined as degree in which light is allowed to travel through an
object.Opacity setting is applied uniformly across the entire object and the opacity
value is defined in term of digital value less than 1. The lesser opacity value displays
the greater opacity. Opacity is not inherited.

Example
<!DOCTYPE html>
<html>
<head>
<style>
img.trans {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<p>Normal Image</p>
<img src="C:\Users\ADMIN\Desktop\b.sc html examples\rose.jpg"
alt="normal rose" height="300px" width="200px">
<p>Transparent Image</p>
<img class="trans" src="C:\Users\ADMIN\Desktop\b.sc html
examples\rose.jpg" alt="transparent rose" height="300px" width="200px">
</body>
</html>

Q) CSS Forms
Styling Input Fields: Use the width property to determine the width of the input
field:
Example
input {
width: 100%;
}
The example above applies to all <input> elements. If you only want to style a specific input
type, you can use attribute selectors:
 input[type=text] - will only select text fields
 input[type=password] - will only select password fields
 input[type=number] - will only select number fields
 etc..

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Padded Inputs: Use the padding property to add space inside the text field.
Example
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Bordered Inputs
Use the border property to change the border size and color, and use the border-
radius property to add rounded corners:
Example
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
If you only want a bottom border, use the border-bottom property:
Example
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
Colored Inputs
Use the background-color property to add a background color to the input, and
the color property to change the text color:
Example
input[type=text] {
background-color: #3CBC8D;
color: white;
}
Focused Inputs
By default, some browsers will add a blue outline around the input when it gets
focus (clicked on). You can remove this behavior by adding outline: none; to the
input.
Use the :focus selector to do something with the input field when it gets focus
Example
input[type=text]:focus {
background-color: lightblue;
}
Example
input[type=text]:focus {
border: 3px solid #555;
}
Input with icon/image
If you want an icon inside the input, use the background-image property and
position it with the background-position property. Also notice that we add a large
left padding to reserve the space of the icon:
Example
input[type=text] {
background-color: white;

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
Styling Textareas
Example
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
Q) CSS Counters
CSS counters are "variables" maintained by CSS whose values can be incremented by CSS rules (to
track how many times they are used). Counters let you adjust the appearance of content based on its
placement in the document.

Automatic Numbering With Counters

CSS counters are like "variables". The variable values can be incremented by CSS rules (which will
track how many times they are used).
To work with CSS counters we will use the following properties:
 counter-reset - Creates or resets a counter
 counter-increment - Increments a counter value
 content - Inserts generated content
 counter() or counters() function - Adds the value of a counter to an element
To use a CSS counter, it must first be created with counter-reset.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}

h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>

<h1>Using CSS Counters</h1>

<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

<h2>SQL Tutorial</h2>

</body>
</html>

Nesting Counters
The following example creates one counter for the page (section) and one counter for each
<h1> element (subsection). The "section" counter will be counted for each <h1> element
with "Section <value of the section counter>.", and the "subsection" counter will be counted
for each <h2> element with "<value of the section counter>.<value of the subsection
counter>":
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}

h1 {
counter-reset: subsection;
}

h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}

h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>

<h1>HTML/CSS Tutorials</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Bootstrap</h2>
<h2>W3.CSS</h2>

<h1>Scripting Tutorials</h1>
<h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>React</h2>

<h1>Programming Tutorials</h1>
<h2>Python</h2>
<h2>Java</h2>
<h2>C++</h2>
</body>
</html>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Q) CSS Responsive
Responsive web design makes your web page look good on all devices.Responsive web
design uses only HTML and CSS.Responsive web design is not a program or a JavaScript.
Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web
page should look good, and be easy to use, regardless of the device.
Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit
any device:

Example:
<html>
<head>
<title>Document</title>
<style>
.form{
background-color: aliceblue;
margin: 0 5%;
padding: 30px 60px;
border-radius: 20px;
}
.row {
display: grid;
grid-template-columns: auto auto auto auto;

}
.col {
padding: 20px 40px;
text-align: left;
margin: auto;
}
.form-control{
width: 100%;
border: none;
padding: 10px 25px;
}
label{
display: block;
text-align: left;
}

.btn{
padding: 15px 40px;
background-color: tomato;
border: none;
border-radius: 50px;
text-transform: uppercase;
color: azure;

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

font-weight: 700;
margin-top: -40px;

}
@media only screen and (max-width: 900px) {
.row {
grid-template-columns: auto auto;
}
}
@media only screen and (max-width: 600px) {
.row {
grid-template-columns: auto;
}
}
</style>
</head>
<body>
<center>
<h3>Sign Up Page</h3>

<div class="form">
<form action="">
<div class="row">
<div class="col">
<label for="f_name">First name:</label>
<input class="form-control" type="text" id="f_name" name="f_name">
</div>
<div class="col">
<label for="l_name">Last name:</label>
<input class="form-control" type="text" id="l_name" name="l_name">
</div>
<div class="col">
<label for="email"> Email:</label>
<input class="form-control" type="email" id="email" name="email">
</div>
<div class="col">
<label for="pass">Password:</label>
<input class="form-control" type="password" id="pass" name="pass">
</div>
<div class="col">
</div>
</div>
<button class="btn" type="submit">Join</button>
</form>
</div>
</body>
</html>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

UNIT-3
Client side Validation:
Q) WhatisDHTML?
Dynamic Hyper Text Markup Language (DHTML) is a combination of Web development
technologiesusedtocreatedynamicallychangingwebsites.Webpagesmayincludeanimation,dyn
amicmenusandtexteffects.
Thetechnologiesusedincludeacombinationof
 HTML
 JavaScriptorVBScript
 CSSand
 Thedocumentobjectmodel(DOM).

Appearanc
HTML e CSS STYLE

Manipulate Manipulate

Scriptin
g

HMTL:-Definitionhtml
CSS: - CSS is used to DHTML to control the look and feel of the web page. Stylesheet
define the colorand fonts of text, the background colors and images, and the placement of
objects on the page. UsingScriptingandtheDOM,youcanchangethe styleofvarious elements.

Scripts: - Scripts written in either JavaScript or VBScript are the two most common
scripting languagesusedto activate
DHTML.YouuseascriptinglanguagetocontroltheobjectsspecifiedintheDOM.

DOM: - The Document Object Model (DOM) is one, which allows you to access any part of
your webpagetochangeitwithDHTML.Everypartofawebpageis specifiedbytheDOM
andusingitsconsistentnamingconventionsyoucanaccessthemandchangetheirproperties.

FeaturesofDHTML:-

 Dynamiccontent,whichallowstheusertodynamicallychangeWebpagecontent
 DynamicpositioningofWebpageelements
 Dynamicstyle,whichallowstheusertochangetheWebpage’scolor,font,sizeorcontent

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Q)DifferencebetweenHTMLandDHTML?
HTML DHTML

HTMLstandsforHyperTextMarkupLa DHTMLstandsforDynamicHyperTextMar
nguage kupLanguage.
HTMLcreatesstatic webpages. DHTMLcreatesdynamicwebpages.

HTML sites will be slow upon client- DHTML sites will be fast
side technologies. enoughuponclient-sidetechnologies.
HTML creates a plain page DHTMLcreatesapagewithHTML, CSS,
withoutanystyleand DOM and Scriptscalledas DHTML.
scriptscalledasHTML
HTMLcannothaveanyserver- DHTMLmaycontainserver-sidecode.
sidecode.
InHTML,thereisnoneedfor DHTML may
databaseconnectivity. requireconnectingtoadatabaseasiti
nteractswithuser.
HTML filesarestoredwith DHTML files are stored with
.htmor.htmlextension. .dhtmextension.
HTMLdoesnotrequireanypr DHTML requiresprocessing from
ocessingfrombrowser. browserwhichchangesitslookand
feel.

Q) Introductiontojavascript?
JavaScript wasdevelopedbyBrendanEichin1995,whichappearedinNetscape,
apopularbrowserofthattime.
 JavaScriptisaverypowerfulclient-sidescriptinglanguage.
 Itismainlyfor enhancingtheinteractionofauserwiththewebpage.
 Inotherwords,youcanmakeyourwebpagemorelivelyandinteractive,withthehelpofjavasc
ript.
 Itisalsobeingusedwidelyingamedevelopmentandmobileapplicationdevelopment.
 JavaScriptisScriptinglanguage;
itiscasesensitive.Youcanwritescripteitherinheadorbodypart.
BenefitsofJavaScript:
JavaScripthasanumberofbigbenefitstoanyonewhowantstomaketheirWebsiteDynamic.
 Itiswidelysupported inWeb Browsers.
 JavaScriptisrelativelysecure.
 JavaScriptcanreadneitherfromyour localharddiskdrivenorwritetoit.
 WecannotgetavirusinfectiondirectlyfromJavaScript.
Featuresofjavascript:
 Itisanopen-sourcescriptinglanguage.
 Itislight weight
 Itcreatesnetworkcentricapplications
 Itisplatformindependent
 Itreducesserverload

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

AdvantagesofJavaScript:
 Itsavesservertraffic
 Itissimpletolearn&implement
 JavaScriptpagesareexecutedonclientside.
 JavaScriptextends its functionalitytothewebpages.
DisadvantagesofJavaScript:
 JavaScriptcannotbeusedfornetworkingapplications.
 Ithassecurityissuesbeingaclient-sidescriptinglanguage.
 Scriptcanrunslowlyand complexscripts cantake long timeto startUp

Q)ExplainaboutJavaScriptBasics?
We cannot create the interactive web pages using HTML. Hence JavaScript is designed to
addthe interactivity in the HTML pages. The JavaScript is very much similar to
programming language.JavaScript is platform independent and can be run everywhere.
JavaScript is used for client-sideprogramming.
Syntax:<scripttype=“text/JavaScript”>Document.write(“education”);
</script>
The<script>tagcontainstwoimportant attributes.
 Language:-itspecifieswhatlanguageweareusing.
 Type:-Itindicateswhichscriptlanguageyouareusingwithtypeattribute.
WecanimplementJavaScriptinourwebpagebyfollowingways:
i. Withinthebodytag.
ii. Insidetheheadtag.
Herewewillbe usingtheinsidethebodytagmethod.
Example:

<html>
<head>
<title>CommentinJavaScript</title>
</head>
<body>
<center>
<scripttype="text/javascript
">document.write("welcom
etoJavaScript");
//Thisissinglelinecomment
/*wecanentersomemultilinecomments
injavascriptwhichwill not bedisplayedonwebpage*/
</script>
</center>
</body>
</html>

Here
<scripttype=“text/javascript”> linetellsthewebbrowserthatthisistheJavaScript.
Document.write(“welcometoJavaScript”);

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

The “document.write” is used to display some text on the webpage. The text given within
the doublequotes will displayed on the webpage. The script tag is closed by </script> and
JavaScript allows twokindsofcomments.
Here
||-denotessinglelinecomment
/**/-denotedmulti-linecomments.
Q)WriteaboutvariablesinJavaScript?
The variables are created in order to store some information. This information can be
numeric(or) it can be string. In JavaScript there is specific “data type” like other
programming language. It hastype as “var”forallcombinationofdata.
Syntax:varvariablename;
Example:
<html>
<head>
<title>VariablesinJavaScript</title>
</head>
<body>
<scripttype=“text/javascript”>Vara
,b,c;
a=2, b=3;
c=a+b;
document.Write(“additionis=”+c);
</script>
<body>
</html>
Here,additionoftwovaluesisstoredinvariablecandisprintedonwebpage.
Intheabovescripting,thevariablestoresnumericvalue.Ifthevariableneedstostorestringvalue,stri
ngshouldbementionedbetween double quotes(“string”).
Example:
Varstr1=“hello”;
Varstr2=“JavaScript”;
Exampleprogram:
<html>
<head>
<title>stringvariable</title>
</head>
<body>
<scripttype=“text/JavaScript”>
vars1=“welcome”;
vars2=“JavaScript”
document. Write (“the first string is” + s1);
document.Write(“thesecondstringis”+s2);

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

</script>
</body>
</html>
Q) Explain about String Manipulations or String functions
inJavaScript?
String is a collection of characters. In JavaScript using string object many useful strings
relatedfunctionalities can be exposed off. Some commonly used methods of string object are
concatenatingtwo strings, converting the string to upper case or lower case, finding the
substring of a give string andso on.Some of mostcommonstringfunctionalitiesarelistedbelow,
Method Meaning

1.concat(str) Thismethodcombinestwostrings.Forexample,s1.concat(s2
),concatenationofstrings1withs2.
2.charAt(index-val) Thismethodwillreturnthepositionofthecharacter specified
byitsindexvalue.
3.length() Thisfunctionreturnsthelengthofthestring.
4.toUpperCase() This
functionisusedtoconverttheentirelowercaselettertoupperca
seletter.
5.toLowerCase() This
functionisusedtoconverttheentireuppercaselettertolowerca
seletter.
6.valueOf( ) This functionisusedtodisplaythevalueoftheparticular
string.
7.substring(begin,end) This functionreturnthesubstring specifiedbybeginandend.
8.indexOf( ) This function is used to return the index within the calling
stringobjectofthefirstoccurrenceofspecifiedvalue.Ifnotfou
nd-1will
return.
Example:-
<html>
<head>
<title>StringManipulation</title>
</head>
<body>
<h3align="Center">StringManipulation</h3>
<h3align="center">********************</h3>
<scripttype="text/javascript">
vars1="Welcome";
vars2="Javascript";
document.write("The First String is "+s1+"<br>");
document.write("TheSecondStringis"+s2+"<br>");
document.write("TheConcatenationofthestringis"+s1.concat(s2)+"<br>");
document.write("Characterat5thpositioninfirststring :"+s1.charAt(5)+"<br>");

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

document.write("The LengthoftheSecondstring :”+s2.lenth:”+s2.length+”<br>”);

document.write("UpperCaseforthefirststring:"+s1.toUpperCase()+"<br>");docume
nt.write("LowerCaseforthe secondstring:"+s2.toLowerCase()+"<br>");
document.write("Valueofsecondstringis
:"+s2.valueOf()+"<br>");document.write("Substringforthefirststring
:"+s1.substring(3,7)+"<br>");
document.write("Indexvalueforthesinsecondstringis:"+s2.indexOf("s")+"<br>");
</script>
</body>
</html>

Q)WriteaboutMathematicalfunctionsinJavaScript?
Mathematicalfunctionsand valuesarepartofbuiltinJavaScriptobjectcalled
“math.h”.Allfunctionsandattributesusedinmathematical,mustbeaccessedthroughthisobjectonl
yas
Math.function-name():
Function Meaning

1.abs(value) Returntheabsolutevalue ofthenumberpassedintoit.

2.sqrt(value) Returnsthesquare rootofthevalue.

3.ceil(value) Roundsanumber upwardstothenearestinteger,

returnit.
4.floor(value) Roundsanumber
downwardstothenearestinteger,returnit.
5.pow(value1,value2) Returnstheresultofraisingvaluetopower.

6.min(value1,value2) Returnsthesmallestvalue ofthetwovaluespassedinit.

7.max(value1,value2) Returnsthebiggestvalueofthetwovaluespassedinit.

8. round(value1,value2) Returnstheresultofroundingitsargumenttothenearesti
nteger.
9. log(value) Returnsthenaturallogarithmicvaluestopower.
10.sin(value),cos(value),tan(val Returnssin,cosandtanvaluestocorrespondingmethods
ue) .
EXAMPLE:

<html>
<head>
<title>MathematicalFunctions</title>
</head>
<body>
<scripttype="text/javascript">
document.write("<b><u>MathematicalFunctions</u></b><br><br>");document.wr

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

ite("Absoulte value of 4.9

is..."+Math.abs(4.9)+"<br>");document.write("SquareRootvaluefor4is..."+Math.sqrt
(4)+"<br>");document.write("Ceilvalueof9.1is..."+Math.ceil(9.1)+"<br>");documen
t.write("Floorvalue of 5.9 is..."+Math.floor(5.9)+"<br>"); document.write("3 Power
4is..."+Math.pow(3,4)+"<br>");
document.write("Minimumvaluefrom(6,8)is..."+Math.min(6,8)+"<br>");document.
write("Maximumvaluefrom(9,10)is..."+Math.max(9,10)+"<br>");document.write("
Round value of 10.5
is..."+Math.round(10.5)+"<br>");document.write("Logvaluefor1is..."+Math.log(1)+
"<br>");
document.write("SINvaluefor5is..."+Math.sin(5)+"<br>");
document.write("COSvaluefor5is..."+Math.cos(5)+"<br>");
document.write("TAN valuefor5is..."+Math.tan(5)+"<br>");
</script>
</body>
</html>
Q) ExplainaboutcontrolStatementsinJavaScript?
JavaScriptstatementsarecomposedof:Values,Operators,Expressions,Keywords,and
Comments.
1.ConditionalStatements:-
Conditionalstatementsareusedtoperformdifferentactionsbasedondifferentconditions.

1. simpleif
2. ifelse
3. ifelseif
4. nestedif
5. switch

simpleif:-
TheifstatementtospecifyablockofJavaScriptcodetobeexecutedifaconditionistru
e.

Syntax: -
if(condition)
{
blockofcodeto be executedifthecondition istrue
}

Example:
vara=100;
if(a>20)
{
document.write(“aisgreater”);
}

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

ifelse: -Theifelse statement tospecifyablockofcodeto beexecuted ifthecondition

istrue,truestatementisexecutedotherwisefalse statementisexecuted.

Syntax: -

if(condition)
{
blockofcodeto be executedifthecondition istrue
}
Else
{
block ofcodeto beexecutedifthecondition isfalse
}
Example: -
vara = 10;
if(a>20)
{
document.write(“aisgreater”);
}
else
{
document.write(“b isgreater”);
}

Ifelse if:-Theifelseifstatement tospecifythefirstconditionbecometrue,blockofcodeexecuted

otherwise, thesecondconditionwill
betested.Ifallconditionbecomesfalse,elsepartwillbeexecuted.

if(condition1)
{
block ofcodeto beexecuted ifcondition1istrue
}
else if (condition2)
{
Block of code to be executed if the condition1 is false and condition2 is true
}
else
{
Block of code to be executed if the condition is false and condition2 is false
}
Example:
Vara= 100;
If (a>0)
{
Document.write (“The number is positive”);
}
Else if (a<0)
{

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Document.write (“The number is negative”)

}
Else
{
Document.write (“The number is exactly zero”);
}
Nestedif: Nestedif statements mean an if statement insideanother if statement. i.e., if first
condition becometrueitchecks another condition.
Syntax: -
if (condition1)
{
if(condition2)
{
statement-1
}
else
{
statement-2
}
}
else
{
statement-3
}
Nested if: -
Example:
Var a= 26;
If (a>17)
{
If(a>59)
{
Document.write (“you are eligible to vote and senior citizen”);
}
else
{
Document.write (“you are eligible to vote and senior citizen”);
}
}
Else
{
Document.write(“you are not eligible to vote”);
}
Switch :
Switch (expression)
{
Case n:
Code block break;
Case n:

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Code block break;

default:
code block
}

Example: -
Switch (day)
{
Case 0;
Day = “sunday”;
Break;
Case1:
Day = “Monday”; Break;
Case2:
Day = “Tuesday”; Break;
Case 3:
Day = “Wednesday”; Break;
Case 4:
Day = “Thursday”; Break;
Case 5:
Day = “Friday”; Break;
Case 6:
Day = “Saturday”;
}
2.Looping statements:
A loop is a sequence of instructions that is continuallrepeateder until the condition is true.
Controlcomes out of the loop statements oncthe e condition becomes false.
There are three types of looping statements that are listed below,
A. while loop
B. do while loop
C. for loop
A. while loop:
The while statement will execute a block pf code while a condition is true. Syntax:
While (condition)
{
Code to be executed
}
Example:
Var I = 5;
While (i>1)
{
Document.write (a); i=i-1;
}

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Do while loop: -
The do while statement will execute a block of code at least once, and then it will repeat the
loop while a condition is true.
Syntax:
Do
{
Code to be executed
} while (condition);
example:
Var i=5;
do
{
Document.write (a); i=i-1;
} while (i>1);
For loop:
The for statement will execute a block of code a specified number of times.
Syntax:
For (initialization; condition; increment/decrement)
{
Code to be executed
}
Example: -
For (i=1; i<=5; i++)
{
Document. Write (i);
}
3. Jumping statements: -
Jumping statements are used to transfer the program’s control from one location to another,
these are set of keywords which are responsible to transfer program’s control with in the
same block or from one function to another.
Four types of jumping statements that are listed below
 break
 continue
 goto
 return
Break: - The break is used to terminate the looping (exit from the loop).Syntax: - break;
Example: -
For (i=1; i<=5; i++)
{
If (i ==3)
{
Break;
}

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Document.write (i);
}
Continue: -
The continue is used to transfer the program’s control at the beginning of the loop. Syntax:
continue;
Example: -
For (I =1; i<=5; i++)
{ If(i==3)
{
Continue;
}
Document.write (i);
}
Goto: -
The goto statement is used to transfer the program’s control from one statement to another
statement (where label is defined).
Syntax:
Label1:
-----------
-----------
-----------
Goto label1;
Example: -
First:
Document.write (“welcome to”);
Goto second;
Goto first;
Second:
Document.write (“JavaScript”);
Return: -
The Return statement is used to transfer program’s control from called function to calling
function, it’s secondary task is to carry value from called function to calling function.
Syntax: return;
Example:
C = add(a,b);
Document.write (c);
Function add (a,b)
{
return (a+b);
}
Q) ExplainaboutoperatorsinJavaScript?
An operator is a symbol which operates on a value or a variable. For example: + is an
operator to performaddition.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Therearedifferenttypesofoperatorarelistedbelow.
 ArithmeticOperators
 Comparisonoperators
 Logicaloperators
 IncrementandDecrementOperator
 Assignmentoperator
 Conditionaloperator(TernaryOperator)
 BitwiseOperator
ArithmeticOperators:-
Arithmeticoperatorstakenumericalvalues(eitherliteralsorvariables) astheir
operandsandreturnasinglenumericalvalue.
Wehavenumericvariable:x=10,y=5 andresult.
Operator Description Example Results
sign
=+ Addition result=x+ y result=15

- Subtraction result=x-y result=5

* Multiplicatio result=x*y result=50

n
/ Division result=x/y result=2

% Modulus result=x%y result=0

Example:-
<script>
var x = 10, y =
5;document.writen(x+y
);
document.writeln(x+y); //Addition:
document.writeln(x-y); //Subtraction:5
document.writeln(x*y); //Multiplication:
document.writeln(x/y); //Division:2
document.writeln(x%y); //Modulus:0
</script>
ComparisonOperators:-

OperatorName Sig Descri

n ption
Equal == Ifbothoperandsareequal,returnstrue.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Identicalequal === Ifbothoperandsareequaland/or samedatatype,returnstrue.

Notequal != Ifbothoperandsarenotequal,returnstrue.

Identicalnot !== Ifbothoperandsarenotequaland/orsamedatatype,returnstrue.

equal

Greaterthan > Ifleftoperandlarger thanrightoperand,return true.

Lessthen < Ifleftoperandsmallerthanrightoperand,return true.

Greaterthan,equa >= Ifleftoperandlargeror equalthanrightoperand,returntrue.

l
Lessthan,equal <= Ifleftoperandsmaller orequalthanrightoperand,returntrue.
Comparisonoperatorsareusedinlogicalstatementstodetermineequalityor
differencebetweenvariables orvalues.
Example:-
<script>
Document.writeln(5 == 5); //true
Document.writeln(5 != 5); //true
Document.writeln(5 > 5); //false
Document.writeln(5 < 5); //true
Document.writeln(5 >= 5); //true
Document.writeln(5<=5);//true
</script>
LogicalOperators:
Logicaloperatorsareusedtodeterminethelogicbetweenvariablesorvalues.ItreturnsBooleanresul
tbaseonoperands.
OperatorName Sig Descript
n ion
LogicalAND && Iffirstoperandevaluateandreturnatrue,onlythatevaluatetheseco
ndoperandotherwiseskips.
Returntrueif botharemustbetrue,otherwisereturnfalse.

LogicalOR || Evaluatebothoperands,
Returntrueifeitherbothoranyoneoperandtrue,Retu
rnfalseifbotharefalse.

LogicalNOT ! Returntheinverseofthegivenvalueresulttruebecomefalse,andfalsebec
ometrue.

Example:
<script>
Document.writeln((5==5)&&(10==10);//true
Document.writeln((5==5)||(5==10)// true
Document.writeln(!5) //returnfalse
</script>

IncrementandDecrementOperators:-

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Incrementanddecrementoperatorsareunaryoperatorsthataddorsubtract
onefromtheiroperand, respectively
Wehavenumericvariable:

x=10,y=5andresult.

OperatorName Description Example Results

++ Increment result=x+ result=10

+result result=11
=xresult= result=12
++x
-- Decrement result = x-- result=12
result= result=11
xresult=-- result=10
x

Example: -
<script>
var x = 10, y = 5;
document.writeln(x++); // x:10,xbecomenow
11 document.writeln(x); // x: 11
document.writeln(++x); // xbecomenow12,x:
12 document.writeln(x--); // x:12,xbecomenow
11 document.writeln(x); // x: 11
document.writeln(--x); // xbecomenow10,x:
10
</script>

AssignmentOperators:-
JavaScriptassignmentoperatorsassignvaluestoleftoperandbasedonrightoperand.equal(=)opera
torsareusedtoassignavalue.
Wehavenumericvariable:x=10,y=5andresult.
OperatorNam Sign Descripti Example Equivalentto Results
e on
Assignment = Assignvaluefromone operand result=x result=x result=17
toanotheroperandvalue.

Addition += Addition ofoperandsandfinallyassign result+=x result= result+y result= 22

toleftoperand.
Similarly, we using subtraction (-=), multiplication (*=), division (/=), modulo (%=) etc., in
assignment operator.
Example: -
<script>
Var x = 17, y = 5;
var result = x; // Assignment to left operand(result) base on right operand(y)
document.writeln(result);

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

document.writeln(result +=x);
document.writeln(result -=y);
document.writeln(result *=y);
document.writeln(result /=y);
document.writeln(result %=y);
</script>
Conditional Operators: -
The conditional operator evaluates the first expression(operand), Base on expression result
return either second operand or third operand.
Syntax:
Example:
document.write((10 == 10) ? "Same value" : "differentvalue");

Bitwise Operators: -
The Bitwise operators evaluate and perform specific bitwise (32 bits either zero or one)
expression.
OperatorName Sign Description

BitwiseAND & ReturnbitwiseANDoperationforgiventwooperands.

BitwiseOR | ReturnbitwiseORoperationforgiventwooperands.

BitwiseXOR ^ ReturnbitwiseXORoperationforgiventwooperands.

BitwiseNOT ~ ReturnbitwiseNOToperationforgivenoperand.

BitwiseShiftLeft << Returnleftshiftof givenoperands.

BitwiseShiftRight >> Returnrightshiftofgivenoperands.

BitwiseUnsignedShiftRight >>> Returnrightshiftwithoutconsidersignofgivenop

erands.

Q)ExplainaboutArrayinJavaScript?
 Anarrayisacollectionofdataelementswhichcan beaccessed throughasinglevariablename.
An array is made up of set of slots (parts) with each slot assigned a single dataelement.
 Wecanaccessthedataelementeithersequentiallybyreadingfromtheslotoftheprogramorbythe
irindexvalue.
 The datainsideanarrayis orderedbecauseelementsareaddedand
accessedinparticularorder.
Herevarisdatatype,a isarraynamewithsize5,youcanstore5values.
Memoryrepresentation ofArray:-

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

10 20 30 40 50
InJavaScript,arraycanalsoholdsmixeddatatypeasthefollowing,Example:-
vara[5];

101 10.25 Welcome JavaScript 1995

Here,a[0],a[4]storedintegervalues a[1] storedfloatingvalueanda[2],a[3]storedstringvalue

CreatinganArray:-
JavaScriptsupportsarraysinthreedifferentways,
1. typearray-name=[ “values”];
2. typearray-name=newArray(“values”);
3. typearray-name=newArray(“values”);
Example:-
varday=[“Monday”,”Tuesday”];

The above array stores two elements, each holding a text of string and array elements
aresurroundedbysquarebrackets([]);
Thesecondapproach isusing newoperator,wecanallocatememorydynamicallyforthe

arrays.

Example:-
var number=newArray(10,10.25);

Thecontentsofthe arrayissurroundedbyparenthesis becausetheyare parameters

throughtheconstructorsofthearrayobject.Inlastapproach,wecanpassthelengthofanarrayinstea
d ofelements.
Example:-varnumber=newArray(4);
AddingElementstoanArray:
Ifwewantto addanitemto anarraywhichalreadyfull,butJavaScriptsimplyextends
thearrayandinsertthenewitem.
Example:-day[5]=“friday” number[3]= 100;
AccessinganArray:
You canrefertoaparticularelementinanarraybyreferring tothename ofthearrayand
theindexnumber.Bydefault,indexnumberstartsat‘0’.
Example:
Document.write(day[1]);
document.write(day[2]);
Example:-
<html>
<head>
<title>Array</title>
</head>
<body>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Q)Explain about functions in JavaScript?

A Function is a piece of code that performs specific task.
 We can write the functions in the JavaScript for bringing the modularity in the script.
 Separate functions can be created for each separate task. This helps in finding the
error from the program efficiently.
 We can define the function anywhere in the script either in head or body section
orboth.
 The standard practice to define the function in head section and call that function
from the body section.

The keyword function is used while defining the function.

Syntax:
Function function-name (arg list)
{
---- // body of the function
}
The function-name can be any combination of letters, digit and underscore (_). But the
function-name cannot contain space. The body of function is surrounded by curly braces
‘{}’. we can pass some arguments to the function. In the following program, we have passed
arguments to function and returning values from function part to called function.
Example2:
<html>
<head>
<title>Function</title>
<script type = “text/javascript”> Function myfunction1 (str1, str2)
{
Str = “It was developed by” +str1+ “” + str2; Return str;
}
</script>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

</head>
<body>
<script type = “text/javascript”> var str;
document.write("Welcome to JavaScript Programming Language..." +"<br>");
str=myfunction1("Brendan Eich","in 1995");
document.write(str);
</script>
</body>
</html>
Q) Explain about Data and objects in JavaScript?
An object is nothing but an entity (an existing thing) which can be distinguished from other
entity. JavaScript are not purely object-oriented language rather than it can be referred as
object- based programming language.
Objects in-terms of programming concept refers to a constructor by holding data on
functions.
The new operator:
-The new operator is used to create an instance of an object. To create an object, the new
operator is followed by the constructor method.
The object constructor:
A constructor is a function that creates and initialize an object. JavaScript provides a special
constructor function called object () to build an object.
Example: -
<html>
<head>
<title>Using Objects in JavaScript</title>

<script type="text/javascript"> function person(name,age)

{
this.name = name; this.age = age;
}
</script>
</head>
<body>
<script type="text/javascript">

var firstperson = new person("krishna",40) document.write("Name:"+firstperson.name+"<br

>"); document.write("Age:"+firstperson.age);
</script>
</body>
</html>
this:-
Todifferentiateglobalvaluesandwhicharepartofanobjectbutmaybeaccessedtosamename,JavaS
criptuse‘this’.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

.(dot):-Whenreferring
toapropertyonanobject,whetheramethodoravariable,adotisplacedbetweentheobjectnameandpr
operty.

Q)What is Regular Expression explain various functions

associated alongwith example?
A Regular Expression is an object that describes a pattern of characters. Regular Expressions
are used to perform pattern-matching and “search – and – replace” functions on text.
Syntax: -
Var txt = new RegExp(pattern.modifiers); Or more simply, var txt = /pattern/modifiers;
 Pattern specifies the pattern of an expression.
 Modifiers specify if a search should be global, case-sensitive etc,.
Modifiers: - Modifiers are used to perform case-insensitive and global searches:
Modifier Description

I Performcase-insensitivematching

G Performsaglobalmatch(findallmatchesratherthatstoppingafter
thefirstmatch).

M Performmultilinematching

Brackets:-Bracketsareusedtofindarangeofcharacters:
Modifier Description

[abc] Findanycharacterbetweenthebrackets

[^abc] Findanycharacternotbetweenthebrackets

[0-9] Findanydigitfrom0to9

[A-Z] FindanycharacterfromuppercaseAtouppercaseZ

[a-z] Findanycharacterfromlowercaseatolowercasez

[adgk] Findanycharacterinthegiveset

(red | blue |green) Findanyofthealternativespecified.

\d Matchadigit

\D Matchanything exceptadigit

\w Matchanyalphanumericcharacterorunderscore

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

\W Matchanythingexcept
alphanumericcharacterorunderscore

\s Matchawhitespacecharacter

\S Matchexceptwhitespacecharacter

Example:-
<html>
<head>
<title>Regular Expression</title>
</head>
<body>
<script type="text/javascript">

var txt="Hello JavaScript"; var re=new RegExp("[JhS]");

document.write("Text:"+txt+"<br>");

var r = txt.search(re); document.write("Position:"+r+"<br>");

var m = txt.match(re); document.write("Matched Letter:"+m+"<br>");

var result = txt.replace("Hello","Welcome"); document.write("Replaced:"+result);

</script>
</body>
</html>
Q)Explain about Exception Handling in java script?
Exception: An Exception is a generalization of the concept of an error to include any
unexcepted condition encountered during execution.
Exception handling is a very important concept in programming technology.
Catching errors in JavaScript: -
It is very important that the errors thrown must be catched or trapped, so that they can be
handled more efficiently and conveniently and the users can move better through the web
page.
using try…catch statement: -
The try…catch statement has two blocks in it:
1. try block and
2. catch block
In the try block, the code contains a block of code that is to be tested for errors. The catch
block contains the code that is to be executed if an error occurs.
Syntax: -
try

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

{
------------ //block of code which is to tested for errors
}
catch( err )
{
------------ //block of code which is to executed if an error occurs
}
When an error occurs in the try block, then the control is immediately transferred to the
catch

block with the error information also passed to the catch block. Thus, the try…catch block
helps to handle errors without aborting the program and therefore proves user-friendly.

throw in JavaScript:
There is another statement called throw, available in JavaScript that can be used along with
try…catch statements to throw exceptions and thereby helps in generating.
Syntax: - throw "exception";
Here, exception can be any variable of type integer (or) Boolean (or) string.
Example:
<html>
<head>
<title>using throw</title>
</head>
<body>
<script type="text/javascript"> try
{
var a=10; if(a!=20)
throw "place error"; else document.write(a);
}
catch(err)
{
if(err=="place error") document.write("Variable is not equal to 20");
}
</script>
</body>
</html>

try…catch. Finally, statement: -

JavaScript has a finally statement that can be used as an optional construct along with
try…catch statements. When the finally statement is placed in a try…catch construct, it
always runs following the try…catch structure.
Syntax: -
try
{

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

------------ //block of code which is to tested for errors

}
Catch (err)
{
------------ //block of code which is to executed if an error occurs
}
finally
{
------------ //This is optional and runs after try…catch structure has run
}

Example:
<html>
<head>
<title>try...catch</title>
</head>
<body>
<script type="text/javascript"> try
{
document.write(a);
}
catch(err)
{
document.write(err.message);
}
finally
{
document.write("<br>"+"This is finally block…compulsory execution");
}
</script>
</body>
</html>

Q) ExplainaboutBuilt-in-objectinJavaScript?
JavaScript has many built-in objects which has the capability of performing many
tasks, hencesometimes JavaScript referred as an object-based programming language. Every
object consists ofattributes (variables)andbehavior(methods).
SomeoftheobjectsinJavaScriptarelistedbelow

1. DateObject
2. NumberObject
3. BooleanObject

DataObject:Thisobjectisusedforobtainingthedateandtime.
ThisdateandtimevaluesisbasedonComputer’slocaltime(System’stime)oritcanbebasedonGMT

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

(GreenwichMeanTime).

Method Description
getTime() Returnsthenumberofmilliseconds,since1 stJan1970

setTime() Set thenumberofmilliseconds,since1 stJan1970

getDate() Returnsthedayofthemonthasanintegerfrom1to31

setDate() Setsthedayofthe mothsasanintegerfrom1 to31

getMonth() Returns themonthoftheyearinnumberformat(jan-0…dec-11)

setMonth() Setsthemonthoftheyearinnumber format

getFullYear() Returns thecurrentyear

getHours() Returnsthehoursasanintegerfrom0to23

setHours( ) Sethehoursasanintegerfrom0to23

getMinutes() Returncurrentminutes(inthesystemtime)

getSeconds() Returnscurrentseconds(inthesystemtime)

getMilliseconds) Returnscurrentmilliseconds(inthesystemtime)

Example:
<html>
<head>
<title>Date Object</title>
</head>
<body>
<script type="text/javascript"> var today = new Date();
document.write("Date Object: "+today+"<br>");
document.write("Date: "+today.getDate()+"<br>");
document.write("Month: "+today.getMonth()+"<br>");
document.write("Year: "+today.getFullYear()+"<br>");
document.write("Hours: "+today.getHours()+"<br>");
document.write("Minutes: "+today.getMinutes()+"<br>");
document.write("Seconds: "+today.getSeconds()+"<br>");
document.write("Milliseconds: "+today.getMilliseconds());

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

</script>
</body>
</html>

NumberObject:-Various methodsofnumberobjectsarelistedbelow
Methods Description
MAX_VALUE ReturnsLargestNumber
()
MIN_VALUE( ReturnsSmallest Number
)
NaN NotaNu
mber
POSITIVE_INFINITY ReturnsPositiveInfinity
NEGATIVE_INFINITY ReturnsNegativeInfinity

Example:
<html>
<head>
<title>NumberObject</title>
</head>
<body>
<scripttype="text/javascript">
document.write("Maximum Value:
"+Number.MAX_VALUE+"<br>");document.write("Minimum Value:
"+Number.MIN_VALUE+"<br>");
document.write("Not a Number: "+Number.NaN+"<br>");
document.write("Positive Infinity:"+Number.POSITIVE_INFINITY+"<br>");
document.write("NegativeInfinity:"+Number.NEGATIVE_INFINITY);
</script>
</body>
</html>
BooleanObjects:- JavaScriptbooleanscanhaveoneoftwovalues:trueorfalse.
Syntax: -
varval=newBoolean(value);
Example:-
<html>
<head>
<title>BooleanObject</title>
</head>
<body>
<script type ="text/javascript">
var a = newBoolean(true);
document.write("Boolean valueforAis:"+a +"<br>");
document.write("Boolean value:"+(10>20));
</script>
</body>

Q) ExplainaboutDataValidation?
Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Validationisasimpleprocessensuringsomedatamightbecorrectforaparticularapplication.Broadl
yspeakingdatavalidationisaprocessofensuringthatuserssubmitonlythesetofcharacterswhichyou
require.Itistheprocessofensuringthatthedatais inanywayaccurate.

Example1:
Onecommonrequestisforawayvalidatingemailaddress.Wecanvalidatetheemailbythehel
pofJavaScript.Therearemanycriteriathatneedtobefollowingtovalidatetheemailidsuchas
:
 [email protected]
 Theremustbeatleastonecharacter beforeandafterthe@.
 There must be at least two characters after .(dot).Let'sseethesimpleexample
tovalidatetheemailfield.
<html>
<body>
<script>
functionvalidateemail()
{
var
x=document.myform.email.valu
e;
varatposition=x.indexOf("@");
vardotposition=x.lastIndexOf(".");
if(atposition<1||dotposition<atposition+2|| dotposition+2>=x.length)
{
alert("Pleaseenteravalide-
mailaddress\natpostion:"+atposition+"\ndotposition:"+dotposition);
returnfalse;
}
}
</script>
<body>
<form name="myform"
method="post"
action="http://www.javatpoint.com/javascriptpages/valid.jsp"
onsubmit="returnvalidateemail();">
Email:<inputtype="text"name="email"><br/>
<inputtype="submit"value="register">
</form>
</body>
</html>
</html>
Q)ExplainaboutOpeninganewwindow?

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

AnewwindowcanbeopenwhichcontainsaURLidentifiedresourcesandtheattributesofthatwindo
wcanbetailoredtosuittheapplication.
Toopenanewwindow,weusuallyresorttocertainpredefinedJavaScriptfunctions.Followingisthes
yntaxinthis regard.
Window.open(‘URL’,‘windowname’,’attaribute1’,’attribute2’, ...........................);
URL: Here we supply the web address of the page that we wish to be displayed in our
window. Window Name: Here a name can be given to the window.
Attributes:Thesearevariousattributesdefinedforagivenwindow.Suchaswidth,height,scrollbar
s,status, menu bar ext…
<!DOCTYPE html>
<html>
<head>
<title>window open and close method</title>
<script>
var Window;
// Function that open the new Window function windowOpen()
{
Window = window.open("https://www.geeksforgeeks.org/", "_blank", "width=400,
height=450");
}
// function that Closes theopen Window function windowClose()
{
Window.close();
}
</script></head>
<body>
<button onclick= “windowOpen()”>Open geeksforgeeks </button>
<button onclick= “windowClose()”>Close geeksforgeeks </button>
</body>
</html>
Q) WriteaboutMessagesandconfirmations?
JavaScriptprovidesthreebuilt-
intypesthatcanbeusedfromapplicationcode.Theseareusefulwhenyouneedinformationfromvisit
ors toyoursite.
confirm(message)
Theconfirm()methoddisplaysadialogboxwithaspecifiedmessage,alongwithanOKandaCancelb

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

utton.Aconfirmboxisoftenusedifyouwanttheusertoverifyor acceptsomething.

prompt(text,defaultText)
Theprompt()methoddisplaysadialogboxthatpromptsthevisitorforinput.Apromptboxisoftenuse
difyouwantthe usertoinputa valuebefore enteringapage.

alert(message)
Thealert()methoddisplaysanalertboxwithaspecifiedmessageandanOKbutton.Analertboxisofte
nusedif youwanttomakesureinformationcomesthroughtotheuser.

Example:
<html>
<head>
<script language= “JavaScript”>
<!
Prompt (“Enteryour name”,”“);
confirm (“are you sure”);
Alert (“A warning”);
// >
</script>
</head>
</html>
Q)ExplainaboutTheStatusBar?
The browsersstatus baraspartof thesite.Textstringscanbedisplayedinthestatusbar butshould
beused with
car.Thestatusbarusuallydisplayshelpfulinformationabouttheoperationofthebrowser.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Towritetothestatusdo:

<html>
<head>
<scriptlanguage="javascript">

</script>
</head>
<bodyonLoad="Init()">
<h1>AndtheStatusBarSays...</h1>
</body>
</html>
Q)Writing about different frame?
One single window can be occupied by multiple frames and also the way elements of one
frame can be used to manipulate elements of other frames etc. is show in following
example.
1.The frameset
The whole page is built around a simple frameset. When the page is initially loaded, it
displays the form in the
lower window and empty window and an empty HTML page in the upper Window.
Frame.html
<html>
<head>
<title> program to introduce frames</title>
<form>
<frameset rows=”50%, 50%”>
<frame src=”frame1.html name=”fd1”>
<frame src=”frame2.html name=”fd2”>
</frameset>
</form>
<body>
</body>
</html>

Frame1.html
<html>
<head>
<title> Frame One </title>
<script language=”text/JavaScript”>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

function display()
{
document.writeln(“ Data written on different frame”);
}
</script>
</head>
<body></body></html> frame2.html
<html>
<head>
<title>frame 2</title>
</head>
<body>
<h1> this is frame2 </h1>
</body>
<form>
<input type=”button” value=”display” onClick=parent.fd1.display()”>
</form>
</body>
</html>
Q)Write about the Rollover Buttons?
•An image rollover occurs when a graphic is moused over (no clicking is involved) and that
graphic is replaced by another graphic.
•This is typically done for navigationbuttons.
•If just thenavigationbuttonchanges, it Isreferred to as a singlerollover. If
thebuttonchangesand another graphic elsewhere on the page also changes, it is referred to as
a multiple rollover.
•JavaScriptis commonlyusedto create these rollover effects, usingthe onmouseover event
handlerto triggertherollover graphicandtheonmouseouteventhandlertoreturnthe
graphictoitsoriginalstate.
Advantages of JavaScript Image Rollovers
•Broad support - Brower support is not an issue. This functionality has been available in
browsers for many years.
•Acceptable degradation–
Imagesfunctionnormally(justwithouttherollovereffect)ifJavaScript support is absent or
disabled. The user experience is not harmed / negatively impacted.
•Rollovers indicate to the user what button is being selected - A more general advantage,
for all implementations(notjust JavaScript). Thevisualchangesignifies
totheuserthatagivenButtonis'active'. If buttons are closely grouped and the user hasmuscle
tremors this visual notification can prevent them from accidentally clicking the wrong
button.
•Accessibility options exist–Theonfocusandonblurevent handlersprovidesupport
forkeyboard input; supplementing this with tab index can also provebeneficial
Disadvantages of JavaScript Image Rollovers
•Code bloat and clutter - Most implementations of image rollovers involve a significant
amount of JavaScript code, which slows downloads/rendering and increases bandwidth

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

usage. Site maintenance/updates also takemoretime. Our goal wills beto streamline
imagerollover code as much as possible.
•Slow loading for dial-up users - Even with preloading of images, a dial-up user can click
a navigation button before its rollover image has loaded into memory or a dial-up user can
watch as the rollover slowly occurs for an image (itis not a pretty sight).
<!DOCTYPE html>
<html>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0"
src="smiley.gif"
alt="Smiley" width="32" height="32">
<p>Roll Over Buttons </p>
<script>
function bigImg(x)
{
x.style.height ="64px"; x.style.width = "64px";
}
function normalImg(x)
{
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</body>
</html>
Explain about Moving images?
The moving images is the actually is a layer of content. Images (Layers) can move around
reputedly but doing so takes up processor cycles. Ifour images only movefor a restricted
amount oftimesuch as when the page is first loaded or when the userspecifically triggers
theevent. Each layer can bepositioned on the screen by changing the offset of the top left
corner of thelayer.
Example
<!DOCTYPE html>
<html>
<style> #myContainer {
width: 400px; height: 400px; position: relative; background: yellow;
}
#myAnimation { width: 50px; height: 50px; position: absolute;
background-color: red;
}
</style>
<body>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id ="myContainer">
<div id ="myAnimation"></div>
</div>

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

UNIT-4 & 5
WORDPRESS
Word Press is an open source Content Management System (CMS),
which allows the users to build dynamic websites and blogs. Word press is
the most popular blogging system on the web and allows updating,
customizing and managing the website from its back-end CMS
andcomponents.
Q) What is Content Management System(CMS)?

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

The Content Management System (CMS) is a software which stores all

the data such as text, photos, music, documents, etc. and is made
available on your website. It helps in editing, publishing and modifying
the content of the website.WordPress was initially released on 27th May,
2003 by Matt Mullenweg and Mike Little. WordPress was announced as
open source in October 2009.
Features
User Management:It allows managing the user information such as
changing the role of the users to (subscriber, contributor, author, editor or
administrator), create or delete the user, change the password and user
information. The main role of the user manager isAuthentication.
Media Management: It is the tool for managing the media files and folder,
in which you can easily upload, organize and manage the media files on
your website.
Theme System: It allows modifying the site view and functionality. It
includes images, stylesheet, template files and custom pages.

ExtendwithPlugins:Severalpluginsareavailablewhichprovides custom
functions and features according to the usersneed.
Search Engine Optimization: It provides several search engineoptimization
(SEO) tools which makes on-site SEO simple.
Multilingual: It allows translating the entire content into the language
preferred by the user.
Importers:Itallowsimportingdataintheformofposts.Itimports custom
files, comments, post pages andtags.

Q) Word PressInstallation
System Requirements for WordPress

 Database: MySQL5.0+
 WebServer:
 WAMP(Windows)
 LAMP(Linux)

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

 XAMP(Multi-platform)
 MAMP(Macintosh)
 Operating System:Cross-platform
 Browser Support: IE (Internet Explorer 8+), Firefox, Google chrome,
Safari, Opera
 PHP Compatibility: PHP5.2+

Download WordPress
When you open the linkhttps://wordpress.org/download/you will get to
see a screen as the following snapshot:

Download the WordPress zip file from the official site.

CreateStoreDatabase

 WordPress requires MySQL database. So create a new empty

database with user/password (for example, user as "root" and
passwordas"root"orelseyoucansetasperyourconvenience).
 Then, you can continue with the installation process as
discussedfurther.
Set Up Wizard
It's very easy to set up WordPress into your system. The following steps
describe how to set up WordPress locally on your system.

Step (1): Extract the downloaded WordPress folder and upload

it into your web server or localhost.

Step(2):OpenyourbrowserandnavigatetoyourWordPress file path, then you

will get the first screen of the WordPress installer as shown in the

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

following screen. In our case, the path islocalhost/<

Your_WordPress_folder>.

Select your language for the WordPress and click on Continue.

Step (3): In this step, you can view the information needed for the database
before proceeding with WordPress installation.

Click on Let's go!

Step (4): Here, you have to enter the information about the
MySQLdatabaseasdescribedinthefollowingscreen.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Database Name: Enter the database name which you have created in
MySQL database forWordPress.
Username: Enter the user name of your MySQLdatabase.
Password: Enter the password which you had set for MySQLdatabase.
Database Host: Write the host name, by default it will belocalhost.
TablePrefix:Itisusedtoaddprefixinthedatabasetableswhi
ch helps to run multiple sites on the same database.It
takes the defaultvalue.
After filling all information, click on Submitbutton.
Step (5): WordPress checks the database setting and gives you the
confirmation screen as shown in the following snapshot.

Click on Run the install

Step (6):Enter administrative information.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

It contains the following fields:

 Site Title: Enter the name of the site which you are going to
create in WordPress.
 Username: Enter the username as per your choice while
logging in the WordPress.
 Password twice: Enter password two times to protect yoursite.
 Your E-mail: Enter your e-mail address
which helps to recover the password or anyupdate.
 Privacy: It allows the search engine to index this site after
checking the checkbox.
After filling all the information, click on the Install WordPress button.
Step (7): After installation being successful, you will get a screen of the
stating success as seen in the following screen.
You can view your username and password detail added in WordPress.
Click on Log In button.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Step (8): After clicking on login, you will get a WordPress Admin Panel as
depicted in the following screen

Enter the username and password which you had

mentionedduringinstallationasshowninstep6and click on the Log
Inbutton

Q)WordPressDashboard
The WordPress Dashboard is a first screen which will be seenwhen you log
into the administration area of your blog which will display the overview of
the website. It is a collection of gadgets that provide information and provide
an overview of what's
happeningwithyourblog.Youcancustomizeyourneedsbyusing some quick
links such as writing quick draft, replying to latest comment,etc

Dashboard can be categorized as shown in the following snapshot.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Each of these categories are discussed in thefollowing sections:

DashboardMenu :
The WordPress Dashboard provides navigation menu that contains some
menu options such as posts, media library, pages, comments, appearance
options, plugins, users, tools and settings on the left side.

Screen Options :
The dashboard contains different types of widgets which
canbeshownorhiddenonsomescreens.Itcontainscheck boxes to show or
hide screen options and also allows us to customize sections on the
adminscreen.

Welcome :
It includes the Customize Your Site button which allows ustomizing your WordPress theme.
The center column provides some of the useful links such as creating a blog post, creating a
page and view the front end of your website. Last column contains links to widgets, menus,
settings related to comments and also a link to the First Steps With WordPress page in the
WordPress codex.
Quick Draft :
The Quick Draft is a mini post editor which allows writing, saving and
publishing a post from admin dashboard. It includes the title for the draft,
some notes about the draft and save it as a Draft.
WordPress News:
TheWordPressNewswidgetdisplaysthelatestnewssuchas latest software

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

version, updates, alerts, news regardingthe software etc. from the official
WordPressblog.
Activity:

The Activity widget includes latest comments on your blog, recent posts and
recently published posts. It allows you to approve, disapprove, reply, edit, or
delete a comment. It alsoallowsyoutomoveacommenttospam.
At a Glance:
Thissectiongivesanoverviewofyourblog'sposts,number of published posts
and pages, and number of comments.When you click on these links, you
will be taken to the respectivescreen.Itdisplaysthecurrentversionofrunning
WordPress along with the currently running theme on the site.

Q). WordPress GeneralSetting:

WordPress general setting is used to set the basic configuration settings
for your site. In the setting administration screen, it is a default setting
screen.
Following are the steps to access the general settings:

Step (1): Click on Settings -> General option inWordPress.

Step (2):The General Setting page is displayed as shown in the following

snapshot.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Following are the details of the fields on general settings page.

 Site Title: It displays the name of the site in the templateheader.

 Tagline: Displays a short sentence about yoursite.

 WordPressAddress(URL):ItistheURLofWordPressdirectory where your

all core application files arepresent.

 SiteAddress(URL):EnterthesiteURLwhichyouwantyoursite to display on
thebrowser.

 E-mailAddress:Enteryoure-mailaddresswhichhelpstorecover your
password or anyupdate.

 embership: Anyone can register an account on your site afteryou check

thischeckbox.

 New User Default Role: The default role is set for the newly registered
user ormembers.

 Timezone: Sets the time zone based on the particularcity.

 DateFormat: Setsthedateformatasyouneedtodisplayonthesite.

 Time Format: Sets the time format as you need to display on thesite.

 Week Starts On: Select the week day which you prefer to start for
WordPress calendar. By default, it is set asMonday.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

 Site Language: Sets the language for the WordPressdashboard.

Step(3): After filling all the information about general

settings,clickon Save Changes button. It saves all your general
settinginformation.
Q) WordPress WritingSettings:
The writing settings controls the writing experience and provides options
for customizing WordPress site. These settings control the features in the
adding and editing posts, Pages, and Post Types, as well as the optional

functions like Remote Publishing, Post via e-mail, and Update Services.
Following are the steps to access the writing settings:
Step 1: To change writing settings, go to Settings -> Writingoption.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Step (2): The Writing Setting page is displayed as shown in the

following screen.

Following are the details of the fields on the page.

 Formatting: This field defines two sub options for better userexperience
 ThefirstoptionConvertemoticonslike:-)and:-Ptographicson displaywillturntext-
based emoticonsintographic-based.
 DefaultPostCategory:Itisacategorytobeappliedtoapostand you can leave
it asUncategorized.
 Default Post Format: It is used by themes to select post format to be
applied to a post or create different styles for different types ofposts.
 Post via e-mail: This option uses e-mail address to create posts and
publishes posts on your blog through e-mail. To use this,
you'llneedtosetupasecrete-mailaccountwithaPOP3access, and any mail
received at this address will beposted.
 Mail Server: It allows reading the e-mails that you send to WordPress
and stores them for retrieval. For this, you need to have POP3 compatible
mail server and it will have URI address such as mail.example.com,
which you should enterhere.
 LoginName:Tocreateposts,WordPresswillneeditsowne-mail account. The
Login Name will use this e-mail address and should be kept as a secret as
spammers will post links redirecting to their ownwebsites.
 Password: Set password for the above e-mailaddress.
 DefaultMailCategory:Itallowsselectingcustomcategoryforall the posts
that are published via Post by e-mailfeature.
 Update Services: When you publish a new post, WordPress will
automatically notify the site update services in the box. See the
UpdateServicesonthecodexforthelonglistofpossibleservices.
Step (3): After filling all the above information, click on Save Changes
button to save your information.
Q) Word Press ReadingSetting:
Reading Setting is used to set the content related to the front
page. You can set the number of post to be displayed on the
mainpage.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Following are the steps to access the reading settings:

Step (1): Click on Settings -> Reading option inWordPress.

Step (2): The Reading Settings page is displayed as shown in the

following screen.

Following are the details of the fields on reading settings.

Step (2) − You can view Category1 (Category1 was created in the
chapter WordPress - Add Category). When the cursor hovers on the
Categories, then a few options get displayed below the Category name.
There are two ways to edit the categories i.e. Edit and QuickEdit

Edit − Click on Edit option in Categories section as seen in the following

screenshot.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

You can edit any of the required field, and then click Update button as
shown in the followingscreen

Category fields are same from the chapter WordPress - Add Category.

Quick Edit − Click on Quick Edit option in Categories section as shown in

the following screen.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Here,youcanonlyedittheNameandSlugofthecategoryasseeninthefollowing screen
and then finally click on Update Categorybutton.

Q)EXPLAIN WORKING WITH MEDIA ADDING,

EDITING , DELETING
ADDING,EDITING,DELETING
Media Library consists of the images, audios, videos and files that you
canupload and add to the content when writing a Post or Page. Here you can
view, add, edit or delete any media related objects if notneeded.
Following are the steps to understand about Media Library.
Step (1) − Click on Media → Library in WordPress.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Step (2) − You can view media files like images, audios, videos. Click on Add
Media button.

Step(3)−TheUploadNewMediapagegetsdisplayed.YoucanlearnhowtoAdd Media
in the nextchapter.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Step (4) − You can view a bar as shown in the following screenshot.

The various tabs that appear have the following functions−

List View − Displays the images and videos in list form.

Grid View − Displays all images in the grid format as shown in the
following screen

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Filter the images and videos − Filters the images and videos.
Search Box − Helps to search a particular image by inserting the name
into thebox.
Add Media files in WordPress. WordPress allows you to add, all kind of
media files like videos, audios and images
Following are the steps to Add Media.
Step (1) − Click on Media → Add New in WordPress.

Step (2) − Then, click on Select Files option to select the files from your
local storage as shown in the following figure.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Step (3) − Add Media files such as images and audios by selecting them
and click open as shown in the following screenshot.

Step (4) − You can view the list of media files added as shown in the
following screenshot.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Edit Media in wordPress. You can manage all the information about your
media that is saved in the Media Library.
Following are the steps to Edit Media in WordPress.
Step (1) − Click on Media → Library and click on the name of the media
item or the edit link.

Step (2) − You will view a list of media files. Select any one image to edit.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Step (3) − You can view the edit media page with few options on the right
side

 URL − You can read only a link from mediafile.

 Title − This displays the name of the media. Title is often shown in
galleries and attachment pages, if themes or plugins are designed to
displayit.
 Permalink−PermalinkistheURLofthemediaattachmentpage.Thisis
also a link to view the attachment page.
 Edit image button − This allows you to edit the image position, such as
rotate counter-clockwise, rotate clockwise, scale, crop, flip vertically, and
fliphorizontally.
 Caption − A brief explanation of themedia.
 AlternateText−Thealttextfortheimage,whichisusedtodescribe
media. Used for availability.
 Description − An explanation of your mediafile.
 Delete Permanently − Delete your media filepermanently.
Step (4) − Once you complete editing the required fields, click on

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Updatebutton to save the changes made to animage.

Insert Media in WordPress. Media files can be inserted to your Pages or

Posts from libraries, from local storage or from URLs.
Following are the steps to Insert Media in WordPress.
Step (1) − Click on Posts → Add New in WordPress.

Step (2) − Click on AddMedia.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Step (3) − You can select the files from the Media Library tab as shown in
the following screenshot.

Information about the selected media file will be displayed on the right side
of the screen under the Attachment Details. Click on Insert Post button,
the
imagewillbeinsertedintothepost.InAttachmentDetailssection,youwillfind

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

information about the images such as URL, Title, Caption, Alt Text and
Description
You can also insert an image directly from your system by clicking on
Upload Files tab. Click on Insert into Postbutton

Q) EXPLAIN WORKING WITH POSTS ANDPAGES?

Add Posts in WordPress. Posts are also known as articles and sometimes
referred as blogs or blog posts. These are used to popularize yourblogs.
Following are the simple steps to Add Posts in WordPress.
Step (1) − Click on Posts → Add New in WordPress.

Step (2) − You will get the editor page of the Post as shown in the
followingscreen. You can use the WordPress WYSIWYG editor to add the
actual content of your post. We will study in detail about WYSIWYG
editor in thechapter WordPress - AddPages.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Following are the fields on the editor page of the Add Posts Page

 Post Title − Enter the title of the post, i.e.,Post1.

 Post Content − Enter the content of yourpost.7
Step (3) − Click on Publish button to publish your respectivepost.

Following are the few other options present in the Publishsection.

 Save Draft − It saves the post as adraft.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

 Preview − You can preview your post beforepublishing.

 Move to Trash − Deletes thepost.
 Status− Change the status of your post to
Published, Pending, or ReviewerDraft.
 Visibility−ChangethevisibilityoftheposttoPublic,PrivateorPassword
protected.
 Published − Change the publishded post date andtime.

Delete Posts in WordPress .

Following are the steps to Delete Posts in WordPress.
Step (1) − Click on Posts → All Post in WordPress
Step (2) − You can delete Post1 (Post1 was created in the
chapter Wordpress - Add Posts). When the cursor hovers on the Post,
then a few options get displayed below Post1. Click on Trash option to
delete thepost.

Step(3)−Youcanviewyourpostliststoconfirmiftheabovepostis
deleted.

Q) WORKING WITH THEMES IN WORDPRESS?

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Theme management. It includes image files, templates, CSS

stylesheets, etc. that can help to make your website look great. This
chapter discusses how to install, add new, or customize themes in
WordPress.
Following are the steps for Theme Management.
Step (1) − Select Appearance → Themes from the dashboard.

Step (2) − The following screen will be displayed. Hover over any theme
and click
on Theme Details.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Step (3) − When you click on Theme Detail the following page appears. Itconsists
of details related to the theme. Details like version, description, tags etc

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

If you want to add this theme to your page/website then click on

Activate, and if you want to just check the theme, then click on
Livepreview.

If you click on activate then you get a pop-up message as

Step (4) − Click on Customize.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Step (5) − On the left side of the page, you can customize your theme. Any
changes you make or anything new you add is displayed on the right side
of the page.

We will learn about customizing the appearance of the themes in the next
chapter i.e.; WordPress CustomizeTheme.

Q) EXPLAIN ADDINGLINKS?
Add Links in WordPress pages. Link is a connection from one resource to
another. Adding links to your pages or blog posts help you to connect to
other pages.
Following are the simple steps to Add links in WordPress.
Step (1) − Click on Pages → All Pages in WordPress.

Step (2) − List of pages created in WordPress will get displayed as shown

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

in the
followingscreen.Selectanyofthepagestoaddlinksinsideit.Here,wearegoing to
add links in About Uspage.

Step (3) − Select any of the sentence or word where you want to add link.
Here,we will add link to the word Lorem.

Step(4)−WhenyouclickontheInsert/Editlinksymbolthenthefollowingpop
window gets displayed.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Following are the fields present in the Insert/edit link.

 URL − Enter URL you want tolink.
 Link text − Insert text you want to enter into thelink.
 Openlinkinanewwindow/tab−Openyourlinkpageintothenewtab
or window. Check the box as required.
 Or link to existing account − Add links to an existing content page
by selectingthepagefromthegivenlist.ClickonOrlinktoexisting
accountand the list of pages and posts gets displayed as shown in the
following screen

After selecting the particular page or post from the list, the links get
created in the URL field as seen in the preceding screen. Click on Add

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Link.
Step(5)−WhenyouhoveronthewordLoremthenthelinktooltipgetsdisplayed as shown
in the followingscreen

Click on Update button to update the changes in your page or post.

Q) EXPLAIN PLUG-INS INWORDPRESS?

View Plugins in WordPress. It helps you to enable and disable WordPress
Plugins. This adds the unique features to an existing web site. Plugins
extendand enlarge the functionality ofWordPress.
Following are the simple steps to View Plugins in WordPress.
Step (1) − Click on Plugins → Installed Plugins in WordPress
administrator.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Step (2) − You will see the list of existing plugins on your site as seen in
the following screen.

Atableof PluginandDescriptionisdisplayed.Namesofthepluginsaredefined
in Plugin column and a brief description about the plugin is defined under
Descriptioncolumn.
Toolbar
Following functions appear as Plugin toolbar options on the page −

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

 Active − Shows the active plugins on thewebsite.

 Inactive−Showstheinstalledbutinactivepluginsonthewebsite.
 Update Available − Shows, if a new version is available or asks
toupdate
now.
Q) EXPLAIN CUSTOMIZINGPLUG-INS?
CustomizePluginsinWordPresswithoutwritinganyHTMLorCSS.It'susually
a large addition for multi-user sites. This new method allows
you to customize your login page by using the WordPress theme
customizer (no coding skillsrequired).
Following are the simple steps to Customize Plugins in WordPress.
Step (1) − Click on Plugins → Add New

Step (2) − Install and activate the Custom Login Page CustomizerPlugin.

Step (3) − Click on Appearance → Login Customize section

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

Step (4) − Click on Start Customizing button to proceedfurther.

Step (5) − It will launch the built-in WordPress theme customizer. You can
customize the theme and make it look the way you want.

ClickonthenewLoginCustomizertabinthesidepanel.Logincustomizerpage
will get displayed. On the login customizer page, you can customize your
login page in the same way as you customize your WordPresstheme.
Step(6) − The customized login page will appear as shown in the following
screen.

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

 Logo−UploadlogoofyourchoicetoreplacethedefaultWordPresslogo

 Background−Addbackgroundimageoryoucanchooseabackgroundcolor of
your choice.

 FormBackground−Selectformbackgroundimageorcolorforloginform contai
ner of your choice

Most of the selections in the customizer panel are transparent. You can check
alltheselectionsinthecustomizertoadjustthesettingasperyourrequirement of your
login page. Click on Save and Publishbutton

Q) HOW TO PROTECTING WORD-PRESS WEBSITE FROM

HACKERS?
1. Install a WordPress securityplugin
Security is crucial to running your website smoothly and issue-free. Since
we’re talking about WordPress here, you can bet there is a plugin to handle
your site security. In fact, there are many of them.
These are the top 5 WordPress security plugins to consider:
 IThemes
 Wordfence
 Sucuri
 All in One WP Security &Firewall
 ShieldSecurity

2.Scan your website formalware

3.Invest in securehosting

4.Fortify your site with strongcredentials

Prepared by K.V.V.L.MADHURI
Web Interface Designing Technologies

5.Update your WP, themes andplugins

6.Backup

7.Enable WordPressfirewall

8.Hide your WordPress loginURL

9.Limit loginattempts

10.Use two-factorauthentication

11.Password protect your login and adminpages

12.Automatically log out inactiveusers

13.Manage your WordPress file and serverpermissions

14.Hide your WordPressversion

15.Manage your WordPress userpermissions

Prepared by K.V.V.L.MADHURI

Web Technologies Basics: Imran Khan
No ratings yet
Web Technologies Basics: Imran Khan
82 pages
2 - Designing of Simple Web Pages
No ratings yet
2 - Designing of Simple Web Pages
17 pages
University Institute of Computing UNIT-1: Bachelor of Computer Applications Web Designing CAT-151
No ratings yet
University Institute of Computing UNIT-1: Bachelor of Computer Applications Web Designing CAT-151
30 pages
Unit - I (Widt)
No ratings yet
Unit - I (Widt)
23 pages
HTMLComplete Notes
No ratings yet
HTMLComplete Notes
18 pages
DCA1109 & INTRODUCTION TO WEB PROGRAMMING-Bhushan 266
No ratings yet
DCA1109 & INTRODUCTION TO WEB PROGRAMMING-Bhushan 266
19 pages
Module 3 HTML
No ratings yet
Module 3 HTML
8 pages
HTML
No ratings yet
HTML
13 pages
Prelim Reviewer ITEC87
No ratings yet
Prelim Reviewer ITEC87
5 pages
Comprehensive Guide to HTML Basics
No ratings yet
Comprehensive Guide to HTML Basics
25 pages
Lecture 3
No ratings yet
Lecture 3
23 pages
Lec 03introduction To HTML
No ratings yet
Lec 03introduction To HTML
34 pages
Chap - 17 Web Designing Cs
No ratings yet
Chap - 17 Web Designing Cs
12 pages
HTML Language Project Guide
No ratings yet
HTML Language Project Guide
17 pages
Lesson 24
No ratings yet
Lesson 24
18 pages
Class Viii - 2023-24-25-60 PDF
No ratings yet
Class Viii - 2023-24-25-60 PDF
36 pages
Web Design Basics for Beginners
No ratings yet
Web Design Basics for Beginners
29 pages
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
No ratings yet
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
98 pages
It Skills Chapter 2
No ratings yet
It Skills Chapter 2
20 pages
HTML Basics and Web Page Structure
No ratings yet
HTML Basics and Web Page Structure
67 pages
HTML, CSS, Javascript - FWT
No ratings yet
HTML, CSS, Javascript - FWT
246 pages
Web Designing Using HTML Unit 2
No ratings yet
Web Designing Using HTML Unit 2
15 pages
Unit-1 (HTML & CSS)
No ratings yet
Unit-1 (HTML & CSS)
82 pages
Week2 IntroductiontoWeb
No ratings yet
Week2 IntroductiontoWeb
57 pages
Web Technologies Notes
50% (6)
Web Technologies Notes
105 pages
CH 2 (Lesson 1) - Basic of HTML
No ratings yet
CH 2 (Lesson 1) - Basic of HTML
43 pages
UNIT-4 (Internet Technology and Web Design)
No ratings yet
UNIT-4 (Internet Technology and Web Design)
77 pages
HTML
No ratings yet
HTML
43 pages
Ch3 Web Edited
No ratings yet
Ch3 Web Edited
111 pages
Ayush Project
No ratings yet
Ayush Project
17 pages
HTML
No ratings yet
HTML
40 pages
Understanding HTML Page Structure
No ratings yet
Understanding HTML Page Structure
18 pages
Introduction To Scripting Languages
No ratings yet
Introduction To Scripting Languages
11 pages
Unit 1 - HTML-ST
No ratings yet
Unit 1 - HTML-ST
105 pages
HTML & CSS Course Syllabus PDF
No ratings yet
HTML & CSS Course Syllabus PDF
116 pages
HTML Web Technology
No ratings yet
HTML Web Technology
45 pages
Unit 2 - HTML, CSS & XML
No ratings yet
Unit 2 - HTML, CSS & XML
106 pages
Alam
No ratings yet
Alam
15 pages
Ecommerce Technologies File
No ratings yet
Ecommerce Technologies File
48 pages
HTML and Css
No ratings yet
HTML and Css
127 pages
Week2 ExploringHTML
No ratings yet
Week2 ExploringHTML
65 pages
J2EEOverview v2
No ratings yet
J2EEOverview v2
440 pages
HTML Notes
100% (1)
HTML Notes
18 pages
Internet Programming Slide New
No ratings yet
Internet Programming Slide New
100 pages
Unit Three HTML & XML
No ratings yet
Unit Three HTML & XML
25 pages
WT 1st Unit
100% (1)
WT 1st Unit
69 pages
HTML Basics and Website Survey
No ratings yet
HTML Basics and Website Survey
47 pages
Unit 1
No ratings yet
Unit 1
17 pages
HTML Completed
No ratings yet
HTML Completed
18 pages
Advanace Web Devlopment
No ratings yet
Advanace Web Devlopment
183 pages
Wa0012
No ratings yet
Wa0012
31 pages
Web Technologies
No ratings yet
Web Technologies
27 pages
Chapter 1
No ratings yet
Chapter 1
27 pages
CMA Record BCA 4th Sem
No ratings yet
CMA Record BCA 4th Sem
27 pages
Top 50 Web Development Interview Questions and Answers
No ratings yet
Top 50 Web Development Interview Questions and Answers
22 pages
MCA Web Application Development 1 To 5
No ratings yet
MCA Web Application Development 1 To 5
44 pages
CS202 Final Term Solved Paper 2024
No ratings yet
CS202 Final Term Solved Paper 2024
6 pages
html5 Seminar Report
100% (2)
html5 Seminar Report
43 pages
Tìm hiểu GAE 01 - Building.High-Perf
No ratings yet
Tìm hiểu GAE 01 - Building.High-Perf
41 pages
D3 Tips and Tricks PDF
No ratings yet
D3 Tips and Tricks PDF
551 pages
Web Development IMP Answers
No ratings yet
Web Development IMP Answers
65 pages
Unit 1
No ratings yet
Unit 1
27 pages
10953A HTML5 Programming Companion Content
100% (1)
10953A HTML5 Programming Companion Content
91 pages
Tkinter Reference A GUI For Python
No ratings yet
Tkinter Reference A GUI For Python
83 pages
Data Visualization Questions Bank
No ratings yet
Data Visualization Questions Bank
3 pages
Unit I QB
No ratings yet
Unit I QB
35 pages
Cma Manual
No ratings yet
Cma Manual
20 pages
Game Design&Development Question Paper
No ratings yet
Game Design&Development Question Paper
39 pages
CH 2 Basic of HTML and Advanced HTML
No ratings yet
CH 2 Basic of HTML and Advanced HTML
53 pages
Gujarat Technological University: Masters in Computer Application Year - I (Semester - I) (W.E.F. JULY 2017)
No ratings yet
Gujarat Technological University: Masters in Computer Application Year - I (Semester - I) (W.E.F. JULY 2017)
3 pages
CS8662-MAD Lab Manual
No ratings yet
CS8662-MAD Lab Manual
58 pages
Canvas Basics Guide
No ratings yet
Canvas Basics Guide
164 pages
html5 Tutorial PDF
No ratings yet
html5 Tutorial PDF
169 pages
Javascript Cookbook
100% (1)
Javascript Cookbook
554 pages
Online Course Syllabus Overview
No ratings yet
Online Course Syllabus Overview
12 pages
AITpractical 180
No ratings yet
AITpractical 180
56 pages
Flet Dev Docs Controls
No ratings yet
Flet Dev Docs Controls
11 pages
Manual Adobe Animate
100% (2)
Manual Adobe Animate
482 pages
JavaScript Ping Pong Game Guide
No ratings yet
JavaScript Ping Pong Game Guide
17 pages
UNIT 3-MAD Extra Reference
No ratings yet
UNIT 3-MAD Extra Reference
18 pages
Topdown Engine Docs Moremountains Com Cameras HTML
No ratings yet
Topdown Engine Docs Moremountains Com Cameras HTML
3 pages
HTML5 Interview Questions PDF
No ratings yet
HTML5 Interview Questions PDF
6 pages
Android Kotlin Developer Nanodegree Program Syllabus
No ratings yet
Android Kotlin Developer Nanodegree Program Syllabus
16 pages