Wt unit 1 ppts web development process

Pune Vidyarthi Griha’s
COLLEGE OF ENGINEERING, NASHIK
“WebDevelopment
Process, Front EndTools”
By
Prof. Anand N. Gharu
(Assistant Professor)
PVGCOE Computer Dept.
01 Jan 2020Note: Thematerial to preparethis presentation hasbeentaken from internet andare generatedonly
for students referenceandnot for commercialuse.

Outline
Introduction to web technology, internet and www, Web site planning and
design issues,
HTML:structure of html document,HTMLelements:headings, paragraphs,
line break, colors & fonts, links, frames, lists, tables, imagesand forms,
Difference between HTMLandHTML5.
CSS:Introduction to Style Sheet,Inserting CSSin an HTMLpage, CSS
selectors,
XML:Introduction to XML,XMLkeycomponent,Transforming XMLinto XSLT,
DTD:Schema,elements, attributes,
Introduction to JSON.

WebTechnology
• Themethods by which computers communicate with
each other through the useof markup languages and
multimedia packagesis known asweb technology.

 HTML
 XHTML
 CSS
 XML
 JavaScript
 VBSCRIPT
 DOM
 DHTML
 AJAX
 E4X
 WMLScript
Web Technologies
 SQL
 ASP
 ADO
 PHP
 .NET
 SMIL
 SVG
 FLASH
 Java applets
 Java servlets
 Java Server Page

Internet andWWW
• Inter-network and World WideWeb
• Interlinked hypertext documents accessedusing HTTP
Protocol
• Client - Server architecture

What isInternet?
• The Internet is essentially a global network of
computing resources. Youcan think of the Internet as
aphysical collection of routers and circuits asaset of
sharedresources.

Internet-BasedServices
• Email − Afast, easy, and inexpensive way to communicate
with other Internet usersaround theworld.
• Telnet − Allows a user to log into a remote computer as
though it were alocalsystem.
• FTP− Allows a user to transfer virtually every kind of file
that can be stored on a computer from one Internet-
connected computer to another.
• UseNet news − A distributed bulletin board that offers a
combination news and discussion service on thousands of
topics.
• World Wide Web (WWW) − A hypertext interface to Internet
information resources.

What isWWW?
• WWWstandsfor World WideWeb.
• A technical definition of the World Wide Web is − All
the resources and users on the Internet that are using the
Hypertext TransferProtocol (HTTP).
• In simple terms, The World Wide Web is away of exchanging
information between computers on theInternet

What isHTTP?
• HTTP stands for Hypertext Transfer Protocol. This is the
protocol being used to transfer hypertext documents that
makesthe World Wide Webpossible.
• Astandard web addresssuch asGoogle.com is called aURL
and here the prefix http indicates itsprotocol

What isURL?
• URLstands for Uniform Resource Locator, and is used to
specify addresseson the World WideWeb.
• AURLwill havethe following format−
• protocol://hostname/other_information
• The protocol is followed by a colon, two slashes, and then the
domain name. The domain name is the computer on which
the resource islocated.

What isWebsite?
• which is a collection of various pages written in HTML
markup language.
• Each page available on the website is called a web page and
first page of anywebsite is called homepagefor that site.

What is WebServer?
• EveryWebsite sites on acomputer known asaWeb server.
• Thisserver is alwaysconnected to the internet.
• Every Web server that is connected to the Internet is given a unique
address.Forexample,68.178.157.132
• When you register a Web address, also known as a domain name,
such as tutorialspoint.com you have to specify the IP address of the
Web server that will host the site.
• ExamplesofWeb Servers
• ApacheTomcat
• IIS
• Glassfish

What is WebBrowser?
• WebBrowsers are software installed on your PC.Toaccessthe
Webyou need aweb browsers.
• ExamplesofWeb Browsers
• NetscapeNavigator,
• Microsoft Internet Explorer
• Mozilla Firefox.

What isISP?
• ISP stands for Internet Service Provider. They are the
companies who provide you service in terms of internet
connection to connect to theinternet.
• Youwill buy space on a Web Server from any Internet Service
Provider.Thisspacewill be usedto host yourWebsite.
• Examplesof ISPProviders
• Reliance
• Airtel
• BSNL

List of Technologies
• ClientSideTechnologies
• HTML,CSS,JavaScript,VBScript
• XHTML,DHTML,WML, AJAX
• FLASH
• ServerSideTechnologies
• ASP,PHP,Perl,JSP
• ASP.NET, Java
• MySQL,SQLServer,Access
• SomeMoreAdvancedTechnologies
• XML,XSLT,RSS,Atom
• X-Path,XQuery,WSDL
• XML-DOM,RDF
• Rubyon Rails,GRAILFramework
• REST,SOAP

Howto choose aTechnology?
• Dependson:
• What is the type ofcontent?
• Who is your audience?
• Who will modify yourcontent?
• What are your FuturePlans?
• Availability of technology?
• Yourprevious experience?
• Portability and Datasharing

What isHTML?
• HTMLstandsfor Hyper TextMarkup Language.
• This is the language in which we write web pages for any
Website.
• This is a subset of Standard Generalized Mark-Up Language
(SGML)for electronic publishing, the specific standard used
for the World WideWeb.

What isHyperlink?
• Ahyperlink or simply alink is aselectable element in an
electronic document that servesasanaccesspoint to other
electronic resources.
• Typically,you click the hyperlink to accessthe linkedresource.
• Familiar hyperlinks include buttons, icons, imagemaps,and
clickable text links.

Web-DomainNames&ExtensionTypes
• Adomain name isthe part of your Internet addressthat comesafter
"www". Forexample, in Tutorialspoint.comthe domain name is
tutorialspoint.com.
• SomeDomain Extensionsare asmentioned below
• .com−Standsfor company/commercial, but it canbe usedfor anywebsite.
• .net −Standsfor network and isusuallyusedfor anetworkof
sites.
• .org−Standsfor organization and issupposedto be fornon-profit bodies.
• .us,.in −Theyare basedon your country namessothat youcan
gofor country specific domainextensions
• .biz−Answer extension on the Internet and canbe usedto indicate that this
site ispurely related tobusiness.

Website Designing steps
• Information
Gathering
• Planning
• Design
• Development
• Testingand Delivery
• Maintenance

WebsitePlanning
• Setgoalsand objectives.
• Createabudget
• Define roles andresponsibilities.
• Create content stragtegy
• Structure your website
• Create mock-up
• Start designing
• Test it out
• Maintain your website

Website DesignIssues
• Simplicity –lessanimations, texts, visuals
• Identity – web appsthrough design
• Consistency– e.g.uniform style, color,etc.
• Robustness – requiredfunction should notmiss
• Navigability – navigation should besimple
• Visualappeal - look & feel ofcontent
• Compatibility – compatible to all browsers, internetconnection
types, OS,etc.

Howthe WebWorks?
25
Clientrunninga
WebBrowser
ServerrunningWeb
ServerSoftware
(IIS,Apache,etc.)
• WWW useclassical client / server architecture
• HTTPis text-based request-responseprotocol
HTTP
Pagerequest
HTTP
Server response

HTMLBasics
Text,Images,Tables, Forms

What isHTML?
• HTMLis the standard markup language for creatingWeb
pages.
• HTMLstands for Hyper TextMarkup Language
• HTMLdescribes the structure of Web pagesusing markup
• HTMLelements are the building blocks of HTMLpages
• HTMLelements are represented by tags
• Browsers do not display the HTMLtags, but usethemto
render the content of thepage

ASimple HTMLDocument
Example
<html>
<head>
<title>PageTitle</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Explanation
• The<html>element is the rootelement
of an HTMLpage
• The<head>element contains meta
information about thedocument
• The<title> element specifies atitle for
the document
• The<body>element contains the visible
pagecontent
• The<h1>element defines alarge heading
• The<p>element defines a paragraph

HTMLTags
• HTMLtags are element names surrounded by angle brackets:
• <tagname>content goes here...</tagname>
• HTMLtags normally come in pairslike <p>and </p>
• Thefirst tag in apair is the start tag, the secondtag is theend
tag
• Theendtagis written like the start tag, but withaforward
slashinserted before the tag name

HTMLVersions
Version Year
HTML 1991
HTML2.0 1995
HTML3.2 1997
HTML4.01 1999
XHTML 2000
HTML5 2014

Creating HTMLPage
Write HTMLUsingNotepad or TextEdit
Savethe file on your computer using .html or
.htm extension and set the encoding to UTF-8
View the HTMLPagein YourBrowser

First HTMLPage
33
test.html
<!DOCTYPE HTML>
<html>
<head>
<ti t l e>My Fi r st HTML Page</ t i t l e>
</head>
<body>
<p>This is some text...</p>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
First HTMLPage:Tags
34
Openingtag
Closingtag
An HTMLelement consists of an opening tag, aclosing tag and the content inside.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
First HTMLPage:Header
35
HTMLheader

First HTMLPage:Body
36
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
HTMLbody

HTMLHeadings-
HTMLheadingsaredefinedwiththe<h1>to<h6>tags.<h1>definesthe
mostimportantheading.<h6>definestheleastimportantheading:
HTMLCode Output

HeadingsandParagraphs
38
• HeadingTags(h1 –h6)
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
• Paragraph Tags
<p>This is my f i r s t paragraph</p>
<p>This i s my second paragr aph</p>
• Sections: div and span
<div styl e="backgr ound: skyblue;">
This is a div</div>

TextFormatting
• Textformatting tags modify the text between the opening tag andthe
closing tag
• Ex.<b>Hello</b> makes“Hello”bold
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through
39

TextFormattingExample
HTMLCode Output

Hyperlinks: <a>Tag
• Link to adocument called cat.html on the sameserver in the
subdirectory stuff:
41
• Link to adocument called form.html on the sameserver in the
same directory:
<a href="form.html">Fill Our Form</a>
• Link to adocument called parent.html on the sameserver in the
parent directory:
• Link to an external Website:
<a href="http://www.devbg.org" target="_blank">BASD</a>

LinkstotheSameDocument– Example
42
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
. . . t h e rest of the table of contents...
< ! - - The document text follows here -->
<h2 id="section1">Introduction</h2>
. . . Section 1 follows here . . .
<h2 id="section2">Some background</h2>
. . . Section 2 follows here . . .
<h3 id="section2.1">Project History</h3>
. . . Section 2.1 follows here . . .

Images: <img>tag
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border
Inserting an image with <img> tag:
<img src="/img/basd-logo.png">
Image attributes:
Example:
<img src="./php.png" a l t ="PHP Logo" />
43

a. Apple
b. Orange
c. Grapefruit
Ordered Lists: <ol>Tag
• Create an Ordered List using <ol></ol>:
• Attribute values for type are 1, A, a, I, or i
44
1. Apple
2. Orange
3. Grapefruit
A. Apple
B. Orange
C. Grapefruit Grapefruit
Apple
Orange
i.
ii.
iii.
I. Apple
II.Orange
III.
Grapefruit
<ol type="1" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

Unordered Lists: <ul>Tag
45
• Apple
• Orange
• Pear
o Apple
o Orange
o Pear
 Apple
 Orange
 Pear
• Create an Unordered List using <ul></ul>:
<ul type="disk" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
• Attribute values for type are:
• disc, c i r c l e or square

Definition lists: <dl>tag
46
• Create definition lists using<dl>
• Pairsof text and associateddefinition; text is in <dt>tag,
definition in <dd>tag
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
• Renderswithout bullets
• Definition isindented

Lists – Example
47
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>
lists.html

HTMLTableTags
Tag Description
<table> Defines a table
<th> Defines aheader cell in atable
<tr> Defines arow in atable
<td> Defines acell in atable
<caption> Defines atable caption
<colgroup>
Specifies agroup of one or more columns in atablefor
formatting
<col>
Specifies column properties for eachcolumn within a
<colgroup> element
<thead> Groups the header content in atable
<tbody> Groups the body content in atable
<tfoot> Groups the footer content in atable

HTMLTables(2)
• Start and end of atable
• Start and end of arow
• Start and end of acell in arow
50
<table> . . . </table>
<tr> . . . </tr>
<td> . . . </td>

Simple HTMLTables – Example
51
<html>
<body>
<table width=100%border="1" bgcolor= "yellow">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</body>
</html>

Simple HTMLTables – Example
52
<html>
<body>
<table width=50%border ="1" >
<tr>
<th colspan=2>Firstname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</body>
</html>

Defineshow
manyrowsthe
celloccupies
Defineshow
manycolumns
the celloccupies
Columnand RowSpan
53
cell[1,1] cell[1,2]
cell[2,1]
colspan="2"
cell[1,1]
cell[1,2]
cell[2,1]
• Tablecells have two important attributes:
colspan rowspan
colspan="1" colspan="1" rowspan="2" rowspan="1"
rowspan="1"

HTMLTables – colspan Example
54
<html>
<body>
<table width=50%border ="1" >
<tr>
<th colspan=2>Firstname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</body>
</html>

HTMLTables – rowspanExample
55
<h2align=center>Cellthat spanstwo rows: </h2>
<table style="width:50%“border=“1”align=center>
<tr>
<th>Name:</th>
<td>BillGates</td>
</tr>
<tr>
<throwspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html>

HTMLTables – rowspan
Examplewith<style>

Complete HTMLTables
• Tablerows split into three semantic sections: header,body
and footer
• <thead> denotes table header and contains <th>elements,
instead of <td> elements
• <tbody> denotes collection of table rows that contain the very
data
• <tfoot> denotes table footer but comesBEFOREthe <tbody>
tag
• <colgroup> and <col> define columns (most often used to set
column widths)
57

HTMLForms
EnteringUserData from a Web Page

HTMLForm
• The<form> Element
• TheHTML<form>element defines aform that is used to
collect user input:
• Syntax
<form>
formelements
</form>
• Form elements are different types of input elements,like
• text fields,
• checkboxes,
• radio buttons,
• submit buttons, andmore.

The <input>Element
• The<input>element is the most
important form element.
• Here are some examples:
• Input TypeText
• Input TypePassword
• Input TypeSubmit
• Input TypeRadio
• Input TypeReset
• Input TypeCheckbox
• Input TypeButton …etc
• HTML5Input Types
• HTML5added severalnew input
types
• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Input TypeText
• <input type="text">
defines aone-line text
input field:
• Example
• Thisis how the HTML
code above will be
displayed in abrowser:

Input TypePassword
• <inputtype="password">
• defines apasswordfield:
• Example
• Thisis how the HTML
code above will be
displayed in abrowser:

Input TypeSubmit
• defines abutton for submittingform data toaform-handler.
• Theform-handler is specified in the form's actionattribute:
• Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"> <br>
Lastname:<br>
<input type="text" name="lastname"value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

Input TypeReset
• <input type="reset"> defines areset button that will reset all
form values to their defaultvalues:
• clickthe "Reset"button, the form-data will be reset.
• Example

Input TypeButton
• <input type="button"> defines a button:
• Example
• <input type="button" onclick="alert('Hello World!')"
value="Click Me!">
• After clicking above button it shows outputasbelow:

Input TypeRadio
• <input type="radio"> defines aradio button.
• Radiobuttons let auser select ONLYONEof alimited number of
choices:
• <form>
<input type="radio" name="gender" value="male" checked>Male<br>
<input type="radio" name="gender" value="female">Female<br>
<input type="radio" name="gender" value="other">Other
</form>
• Thisis how the HTMLcode above will be displayed in abrowser:

Input TypeCheckbox
• <input type="checkbox">defines a checkbox.
• Checkboxeslet auser select ZEROor MOREoptions of alimited
number of choices.
• Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have abike
<br>
<input type="checkbox" name="vehicle2" value="Car"> I have acar
</form>
• Thisis how the HTMLcode above will be displayed in abrowser:

HTMLInput Attributes
• Thevalue Attribute
• ThereadonlyAttribute
• ThedisabledAttribute
• ThesizeAttribute
• ThemaxlengthAttribute

The <select>Element
(Dropdownmenus)
• The<select>element defines adrop-down list:
• <select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <select>Elementwith
multipleselection
• <select name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <textarea>Element
• <textarea name="message" rows="10" cols="30">
Thecat wasplaying in the garden.
</textarea>
• Therowsattribute specifies the visible number of lines ina
text area.
• Thecolsattribute specifies the visible width of atextarea.

HTMLForms – Example
72
<label
<input
for="fname">First Name</label>
type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
form.html
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>

HTMLForms – Example(2)
73
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS ANDCONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send Form" />
<input type="reset" value="Clear Form" />
</p>
</form>
form.html(continued)
<br />

HTMLForms – Example(3)
form.html (continued)
74

HTMLFrames
<frameset>, <frame>and <iframe>

HTMLFrames
• Framesprovide away to show multiple HTMLdocuments in a
single Web page
• Thepagecanbe split into separate views (frames) horizontally
and vertically
• Frameswere popular in the early agesof HTMLdevelopment,
but now their usageisrejected
• Framesare not supported by all user agents (browsers, search
engines, etc.)
• A<noframes> element is usedto provide content fornon-
compatible agents.
76

HTML<frame>Tag.
• Example
• Asimple three-framed page:
• <frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
• Each<frame> in a<frameset> canhavedifferent attributes, suchas
border, scrolling, the ability toresize,etc.

Outline
design issues,
CSS:Introduction to Style Sheet, Inserting CSSin an HTMLpage, CSS
selectors,
XML:Introduction to XML,XMLkeycomponent,Transforming XMLinto XSLT,

Introduction ofCSS
• Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making web
pagespresentable.
• CSShandlesthe look and feel part of a webpage.
• Using CSS,you can control the color of the text, the style of fonts,
the spacing between paragraphs, how columns are sized and laid out,
what background images or colors are used, layout
designs,variations in display for different devices and screen sizes as
well asavariety of other effects.

Advantages of CSS
• CSSsavestime
• Pagesload faster
• Easymaintenance
• Superior styles to HTML
• Multiple Device
Compatibility
• Global web standards
• Offline Browsing
• Platform Independence

CSS3Modules
• Selectors
• BoxModel
• Backgroundsand Borders
• ImageValuesand Replaced Content
• TextEffects
• 2D/3DTransformations
• Animations
• Multiple ColumnLayout
• User Interface

CSS- Syntax
• ACSScomprises of style rules that are interpreted by the browser and then
applied to the corresponding elementsin your document.
• Stylerule ismadeof three parts−
• Selector − Aselector is an HTMLtag at which a style will be applied. This
could be anytag like <h1>or <table>etc.
• Property - Aproperty is atype of attribute of HTMLtag. Put simply, all the
HTML attributes are converted into CSS properties. They could be color,
borderetc.
• Value- Valuesare assignedto properties. Forexample,color
property canhavevalue either redor #F1F1F1etc.

CSS- Syntax
• Syntax:
• selector { property: value}
• Example:
• table{ border :1px solid #C00;}

CSSselectors (1)
• CSS selectors are used to "find" (or select) HTMLelements based on
their element name, id, class,attribute, andmore.
• Theelement Selector
• The element selector selects elements based on the element
name.
• Youcanselect all <p>elements on apagelike this (in this case,all
<p>elements will be center-aligned, with ared textcolor):
• Example
• p{
text-align: center; color:
red;
}

Output
Example withoutput
HTMLCodewith CSS

CSSselectors (2)
• Theid Selector
• Theid selector usesthe id attribute of anHTMLelementto select aspecific
element.
• Theid of anelement should be unique within apage,sotheid selector is used
to select one uniqueelement!
• Toselect anelement with aspecific id, write ahash(#)
character, followed by the id ofthe element.
• Thestyle rule below will be applied to the HTMLelementwith id="para1":
• Example
• #para1{
text-align: center; color: red;
}

Example withoutput
HTMLCodewith CSS
Output

CSSselectors (3)
• TheclassSelector
• Theclassselector selectselements with aspecific class attribute.
• Toselect elements with a specific class,write aperiod (.) character,
followed by the name of theclass.
• In the examplebelow, all HTMLelements with class="center" will be
red andcenter-aligned:
• Example
• .center {
text-align: center;
color: red;
}

CSSselectors (4)
• TheclassSelectorcontinued….
• Youcanalsospecify that only specific HTMLelements should be affected by a
class.
• In the examplebelow, only <p>elements withclass="center" will becenter-
aligned:
• Example
• p.center {
text-align: center; color: red;
}

CSSselectors (5)
• GroupingSelectors
• If you have elements with the samestyle definitions, likethis:
• h1 {
text-align: center;
color: red;}
h2 {
text-align: center;
color: red;}
p {
text-align: center;
color: red;}
• It will be better to group the selectors, to minimize the code.
• h1, h2, p{
text-align: center;
color: red;

Insert CSSinHTML
• ThreeWaysto Insert CSS
1. External style sheet
2. Internal stylesheet
3. Inline style

External StyleSheet
• With anexternal style sheet, you canchangethe look ofan
entire website by changingjust onefile!
• Eachpagemust include areference to the external stylesheet
file inside the <link> element. The<link> element goesinside
the <head>section:
• Example
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

External Style Sheet -Example
HTMLCode
CSSFilenamed-mystyle.css

Internal StyleSheet
• Aninternal style sheet maybe usedif one single pagehasa unique
style.
• Internal styles are defined within the <style>element,inside the
<head>section of anHTMLpage:
• Example

InlineStyles
• Aninline style maybe usedto apply aunique style for asingle element.
• Touseinline styles, add the style attribute to therelevant
element. Thestyle attribute cancontain anyCSSproperty.
• Theexamplebelow showshow to changethe color andthe left margin of a
<h1>element:
• Example

Text-related CSSProperties
• color – specifies the color of the text
• font-size – sizeof font: xx-small, x-small, small,
medium, large, x-large, xx-large, smaller, larger
or numeric value
• font-family – comma separated font names
• Example: verdana, sans-serif, etc.
• Thebrowser loads the first one thatis available
• There should always be at least one genericfont
• font-weight can be normal, bold, bolder, l i g h t e r
or a number in range [100 … 900]
10
1

CSSRules for Fonts(2)
• font-style – styles the font
• Values:normal, i t a l i c , oblique
• text-decoration – decorates thetext
• Values:none, underline, line-trough,
overline, blink
• text-align – defines the alignment of text or
other content
• Values: l e f t , right, center, j u s t i f y
10
2

Shorthand FontProperty
• font
• Shorthand rule for setting multiple font properties at
the sametime
is equal to writingthis:
10
3
font:italic normal bold 12px/16px verdana
font-style:i t a l i c ;
font-variant:normal;
font-weight:bold;
font-size: 12px;
line-height:16px;
font-family:verdana;

Backgrounds
10
4
• background-image
• URLof image to be usedasbackground,e.g.:
background-image:url("back.gif");
• background-color
• Usingcolor and image and the sametime
• background-repeat
• repeat-x, repeat-y, repeat, no-repeat
• background-attachment
• fixed / scroll

Backgrounds(2)
10
5
• background-position: specifies vertical andhorizontal
position of the backgroundimage
• Vertical position: top, center, bottom
• Horizontal position: l e f t , center, r i g h t
• Both can be specified in percentage or other numerical values
• Examples:
background- posit i on: top l ef t ;
background- posit i on: - 5px50%;

Borders
• border-width: thin, medium, thick or numerical
value (e.g. 10px)
• border-color: color aliasorRGBvalue
• border-style: none, hidden, dotted, dashed, solid,
double, groove, ridge, inset, outset
• Eachproperty canbe defined separatelyfor left, top,bottom
and right
• border-top-style, border-left-color, …
10
6

Border ShorthandProperty
10
7
• border: shorthand rule for setting border properties at once:
border: 1px solid red
is equal to writing:
border-width:1px;
border-color:red;
border- st yle:sol i d;
• Specify different borders for the sides via shorthand rules:
border-top, border-left, border-right, border-
bottom
• When to avoidborder:0

Width andHeight
• width – defines numerical value for the width of element,
e.g. 200px
• height – defines numerical value for the height of element,
e.g. 100px
• Bydefault the height of an element is defined by its content
• Inline elements do notapply height, unless you changetheir
displaystyle.
10
8

Outline
design issues,
CSS:Introduction to Style Sheet,Inserting CSSin an HTMLpage, CSS
selectors,
XML:Introduction to XML,XMLkeycomponent, Transforming XMLinto XSLT,

XML
• Introduction to XML
• XMLis asoftware- and hardware-independent tool for storing
and transporting data.
• What isXML?
• XMLstands for eXtensible Markup Language
• XMLis amarkup language much like HTML
• XMLwas designed to store and transport data
• XMLwas designed to be self-descriptive
• XMLis aW3C Recommendation

XMLDoes Not DOAnything
• Thisnote is anote to Tovefrom Jani, stored asXML::
• <note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
• TheXMLabove is quite self-descriptive:
• It hassenderinformation.
• It hasreceiverinformation
• It hasaheading
• It hasamessagebody.
• But still, the XMLabove does not DOanything. XMLis just
information wrapped in tags.

The Difference BetweenXML
andHTML
• XMLand HTMLwere designed with different goals:
• XMLwasdesigned to carry data - with focus on what datais
• HTMLwasdesigned to display data - with focus on howdata
looks
• XMLDoesNot UsePredefined Tagslike HTMLtags

XMLUsed For(1)
• It simplifies datasharing
• It simplifies datatransport
• It simplifies platformchanges
• It simplifies dataavailability

XMLUsedFor(2)
• Many computer systems contain data in incompatible formats.
Exchanging data between incompatible systems (or upgraded systems)
is a time-consuming task for web developers. Large amounts of data
must be converted, and incompatible data is often lost.
• XML stores data in plain text format. This provides a software- and
hardware-independent wayof storing, transporting, and sharingdata.
• XML also makes it easier to expand or upgrade to new
operating systems,new applications, or new browsers, without
losingdata.

XMLExample1
• <?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Amit</to>
<from>Neha</from>
<body>Don't forget me this weekend!</body>
</note>
• Savethe file with .xml extension and when run o/p is like below

XMLExample2-Books.xml
<bookstore>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K.Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T.Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>

XMLExample2- Books.xml
explanation
• XMLusesamuch self-describing syntax.
• Aprolog defines the XMLversion and the characterencoding:
• Thenext line is the root element of thedocument:
• <bookstore>
• Thenext line starts a<book> element:
• <book category="cooking">
• The<book> elements have 4 childelements: <title>,
<author>, <year>, <price>.
• Thenext line ends the bookelement:
• </book>

XSLT
• XSLT(eXtensible Stylesheet LanguageTransformations) is the
recommended style sheet languagefor XML.
• XSLTis far more sophisticated than CSS.
• With XSLTyou canadd/remove elements and attributes to or
from the outputfile.
• Youcanalso rearrange and sort elements, perform tests and
make decisions about which elements to hide and display,and
alot more.
• XSLTusesXPathto find information in an XMLdocument.

DisplayingXMLwithXSLT
Create XMLPage
Create XSLTPageaccording to your design criteria
Link XMLpagewith XSLTPage
Get output onbrowser

Step 1 :Create XMLDocument:
students.xml
<?xml version ="1.0"?>
<class>
<studentrollno = "393">
<firstname>Dinkar</firstname>
<lastname>Kad</lastname>
</student>
<firstname>Vaneet</firstname>
<lastname>Gupta</lastname>
</student>
</class>

Step 2: XSLTConversion
criteria
• Weneed to define an XSLTstyle sheet document for the
above XMLdocument to meet the following criteria−
• Pageshould have atitle Students.
• Pageshould have atable of student details.
• Columns should have following headers:
• Roll No, First Name, LastName
• Tablemust contain details of the studentsaccordingly.

Step 2: Create XSLTdocument
accordingtodesigncriteria:students.xsl
<?xml version ="1.0" encoding ="UTF-8"?>
<xsl:stylesheet version ="1.0" xmlns:xsl = "http://www.w3.org/1999/XSL/Transform">
<xsl:template match ="/">
<html> <body>
<h2>Students</h2>
<table border ="1">
<tr bgcolor ="#9acd32">
<th>Roll No</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<xsl:for-each select="class/student">
<tr>
<td><xsl:value-of select ="@rollno"/></td>
<td><xsl:value-of select ="firstname"/></td>
<td><xsl:value-of select ="lastname"/></td>
</tr>
</xsl:for-each> </table>
</body> </html>
</xsl:template>
</xsl:stylesheet>

Step 3: Linkthe XSLTDocumentto
the XMLDocument (.xmlfile)
• <?xml version ="1.0"?>
• <?xml-stylesheettype ="text/xsl" href = "students.xsl"?>
• <class>
</student>
</student
• </class>

Step 4: View the XMLDocumentin
InternetExplorer
<?xml version ="1.0"?>
<?xml-stylesheettype ="text/xsl" href = "students.xsl"?>
<class>
<student rollno ="393">
</student>
<student rollno ="493">
</student>
</class>

Introduction toDTD
• ADTDis aDocument TypeDefinition.
• ADTDdefines the structure and the legal elements
and attributes of an XMLdocument.
• With aDTD,independent groups of people canagree
on a standard DTDfor interchanging data.
• An application canuseaDTDto verify that XMLdata is
valid.

AnInternal DTDExample
• <?xmlversion="1.0"?>
<!DOCTYPEnote[
<!ELEMENTnote (to,from,heading,body)>
<!ELEMENTto(#PCDATA)>
<!ELEMENTfrom(#PCDATA)>
<!ELEMENTheading(#PCDATA)>
<!ELEMENTbody(#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<body>Don't forget me thisweekend</body>
</note>

AnInternal DTDExpalnation
• TheDTDin previous slide isinterpreted likethis:
• !DOCTYPEnotedefines that the root element ofthis
document isnote
• !ELEMENTnotedefines that the note element mustcontain four
elements: "to,from,heading,body"
• !ELEMENTto defines the to element to be of type"#PCDATA"
• !ELEMENTfromdefines the from element to be oftype
"#PCDATA"
• !ELEMENTheadingdefines the heading element to be of type
"#PCDATA"
• !ELEMENTbodydefines the body element to be of type
"#PCDATA"

AnExternal DTDExample
• <?xmlversion="1.0"?>
<!DOCTYPEnote SYSTEM"note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<body>Don'tforget methis
weekend!</body>
</note>
• XMLFile • note.dtd
• <!ELEMENTnote
(to,from,heading,body)>
<!ELEMENTto (#PCDATA)>
<!ELEMENTfrom (#PCDATA)>
<!ELEMENTheading
(#PCDATA)>
<!ELEMENTbody (#PCDATA)>

Building Blocks ofXMLDocuments
as perDTD
<body>some text</body>
<img src="computer.gif" />
< &
• Elements :
• Attributes :
• Entities :
• PCDATA:
•
PCDATAmeans parsed character data.
PCDATAistext that WILLbeparsedbya parser.
Character data is the text found between the start tag
and the end tag of an XMLelement.
• CDATA:
•
CDATAmeans character data.
CDATAistext that will NOTbeparsedbya parser.

Elements
• XMLelements canbe defined asbuilding blocks of an XML
document.
• Elements canbehave asacontainer to hold text, elements,
attributes, media objects or mix ofall.
• EachXMLdocument contains one or more elements, the
boundaries of which are either delimited by start-tagsand
end-tags, or empty elements.
• Example
• <name>Tutorials Point</name>

Attributes
• Attributes are part of the XMLelements.
• An element canhave any number of unique attributes.
• Attributes give more information about the XMLelementor
more precisely itdefines aproperty of the element.
• An XMLattribute is always aname-value pair.
• Example
• <imgsrc="flower.jpg"/>
• Here img is the element name whereas src is anattribute
name and flower.jpg is avalue given for the attribute src.

Entities
• Entities are placeholders in XML.Thesecanbe declared in the
document prolog or in aDTD.Entities canbe primarily categorizedas:
• Built-in entities
• Character entities
• General entities
• Parameter entities
• There are five built-in entities that play in well-formed XML,they are:
• ampersand: &
• Singlequote: '
• Greater than: >
• Lessthan: <
• Double quote: "

Advantages &Disadvantages
• Advantagesof using DTD
• Documentation- Youcandefine your own format forthe XML
files.
• Validation - It gives away to check the validity of XMLfiles by
checking whether the elements appear in the right order,
mandatory elements and attributes are inplace
• Disadvantagesof using DTD
• It does not support thenamespaces.
• It supports only the textstring datatype.
• It is not objectoriented.

JSON-Introduction
• JSON:JavaScriptObjectNotation.
• JSONis asyntax for storing and exchangingdata.
• JSONis text, written with JavaScriptobjectnotation.
• JSONis language independent *
• Whyuse JSON?
• Since the JSONformat is text only, it can easily be sent to and
from a server, and used asa data format by any programming
language.
• JavaScript has a built in function to convert astring, written in
JSONformat, into native JavaScriptobjects:
• JSON.parse()
• So,if you receive data from a server, in JSONformat, you can
useit like any other JavaScriptobject.

JSONSyntaxRules
• JSONsyntax is derived from JavaScriptobject notationsyntax:
• Data is in name/value pairs
• Data is separated by commas
• Curly braceshold objects
• Squarebrackets hold arrays
• JSONData - ANameandaValue
• JSONdata is written asname/valuepairs.
• Aname/value pair consistsof afield name (in doublequotes),
followed by acolon, followed by avalue:
• Example
• "name":"John"

JSONValues
• In JSON,values must be one of the following datatypes:
• astring
• anumber
• an object (JSONobject)
• an array
• aboolean
• null
• In JSON,string values must be written with doublequotes:
• { "name":"John"}

ObjectSyntax
• Example
• { "name":"John", "age":30, "car":null }
• JSONobjects are surrounded by curly braces{}.
• JSONobjects are written in key/valuepairs.
• Keysmust be strings, and values must be avalid JSONdata
type (string, number, object, array, boolean ornull).
• Keysand values are separated by a colon.
• Eachkey/value pair is separated by acomma.

References
• http://study.com/academy/lesson/what-is-web-technology-
definition-trends.html
• https://www.tutorialspoint.com/web_developers_guide/web_
basic_concepts.htm
• https://www.slideshare.net/vikramsingh.v85/introduction-to-
web-technology
• www.telerik.com
• https://www.w3schools.com/html/
• https://www.w3schools.com/css/css_intro.asp
• https://www.w3schools.com/xml/
• https://www.w3schools.com/js/js_json_intro.asp
• https://www.w3schools.com/xml/xml_dtd_intro.asp

Wt unit 1 ppts web development process

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (18)

Semelhante a Wt unit 1 ppts web development process

Semelhante a Wt unit 1 ppts web development process (20)

Mais de PUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK

Mais de PUNE VIDYARTHI GRIHA'S COLLEGE OF ENGINEERING, NASHIK (20)

Último

Último (20)

Wt unit 1 ppts web development process