WebTechUit2

7/29/2019 WebTechUit2

1/88

WEBTECH(UNIT2 & 3)

HTMLXML


2/88

HTML

HTML stands forHyperText MarkupLanguage HTML is not a programming language, it is

a markup language A markup language is a set ofmarkup

tags1.HTML uses markup tags to describe

web pages2.Markup tags define layout of web page

Hypertext is text which contains links toother texts.


3/88

HEADERS (SOURCE HTML)

This is a first header This is a second header This is a third header This is a forth header

This is a fifth header This is a sixth header


4/88

OUTPUT IN BROWSER

This is a first headerThis is a second header

This is a third headerThis is a forth headerThis is a fifth headerThis is a sixth header


5/88

SET TEXT (SOURCE HTML)Setting the Text

This is a simple textVarsha is sweet and
Jayashree is very naughty!!

But Sachin is a serious guy
And Harshad seems to be studious.


6/88

OUTPUT IN BROWSER

This is a simple textVarsha is sweet andJayashree is very naughty!!But Sachin is a serious guyAnd Harshad seems to be studious.

BULLET


7/88

BULLET

First discSecond discThird discForth disc

and so onFirst circleSecond circleThird circleForth circle and so on

First squareSecond squareThird squareForth square and so on


8/88

OUTPUT IN BROWSER

First disc Second disc Third disc Forth disc

and so on First circle Second circle Third circle

Forth circle and so on

First square Second square Third square Forth square and so on

NUMBERED BULLET (SOURCE


9/88

NUMBERED BULLET (SOURCEHTML)

FirstSecondThirdForth

and so on

The list is starting from5
Ice cream

MangoJuicePop Corn and so on


10/88

OUTPUT IN BROWSERA. FirstB. SecondC. ThirdD. ForthE. and so on

The list is starting from 55. Ice cream6. Mango7. Juice8. Pop Corn

9. and so on


11/88

Link & Image (SOURCE HTML)

This is a link


12/88

OUTPUT IN BROWSER

This is a link


13/88

Forms inHTML

An HTML form is a section of a document containingnormal content, markup, special elements calledcontrols (checkboxes, radio buttons, menus, etc.),and labels on those controls.

Users generally "complete" a form by modifying itscontrols (entering text, selecting menu items, etc.),before submitting the form to an agent for processing(e.g., to a Web server, to a mail server, etc.)


14/88

Form Text(SOURCE HTML)

My Page


15/88

OUTPUT IN BROWSER


16/88

Radio Form

Mango
Apple

Grapes


17/88

Radio Form (SOURCE HTML)

Rose

Lotus

Jasmine


18/88

OUTPUT IN BROWSER

Mango Apple Grapes

Rose Lotus Jasmine

Checkbox Form (SOURCE


19/88

Checkbox Form (SOURCEHTML)

Mango

Apple
Guava


20/88

OUTPUT IN BROWSER

Mango Apple Guava


21/88

Buttons(SOURCE HTML)


22/88

OUTPUT IN BROWSER

Enter Your name

SUBMIT RESET

Mail Form


23/88

Mail Form

Sending an e-mail to Mr.Bill Gates

Name:

a orm


24/88

a orm
Message:

TABLE


25/88

TABLE

The HTML table model allows authors to arrange: Data text, Preformatted text

Images, links, forms, form fields, Other tables, etc.

-- into rows and columns of cells.

TABLE1 (SOURCE HTML)


26/88

TABLE1 (SOURCE HTML)

Table Demo This is Left cell-row 1This is Right cell -row 1 This is Left cell-row 2This is Right cell-row 2

TABLE C td


27/88

TABLE Contd

When we put a lot of text in a table then we findthat the text tends to brush up to the border of thetable and it looks a bit cramped. Cell padding puts some space between the

border of the cell and the text Cell spacing puts some space between the cells

themselves in the table

e spac ng, ce pa mg


28/88

e spac ng, ce pa mg


29/88

TABLE3 Table Header

NameMarks Lekhana 89 Harshad 92

TABLE4(B k d l )


30/88

TABLE4(Background color )

NameMarks A 92 B 90

TABLE5 (rowspan colspan)


31/88

TABLE5 (rowspan,colspan)

First Third Fourth

FirstSecond Third

TABLE5 Time Table


32/88

TABLE5 Time Table Day Lecture Timings 9.00 to 11.00 11.00 to 1.00 2.00 to 4.00 MondayData StructuresTheory of ComputationInternet Programming

HTML)


33/88

HTML)

TuesdayOperating SystemComputer networkComputer organisation

WednesdayTheory of ComputationComputer networkData Structures

ThursdayInternet ProgrammingComputer organisationData StructuresFridayOperating SystemComputer networkInternet Programming

Frames


34/88

Frames

Frames allows to present documents in multipleviews.

We can keep certain information visible, at the sametime other views are scrolled or replaced.

For Example1.First form can display a company information2.Second form can be a navigation menu.3.Third frame may display selected document that can

be scrolled or replaced by the navigating in thesecond frame.

Frames Example1


35/88

Frames Example1My Frames Page

Frames Example2


36/88


Frames Example3


37/88


Frames Example2


38/88


Cascade Style Sheet


39/88

Cascade Style SheetCSS is a style language that defines layout of HTML documents.For example, CSS covers fonts, colours, margins, lines, height,

width, background images, advanced positions and manyother things..Types Of CSSIn-line styles are inserted straight into the HTML tagsusing the style attribute.Presentation is mixed with the content.InternalEmbedded, orinternal styles are used for the whole page.Inside the head tags, the style tags surround all of thestyles for the page.Presentation is defined globally for the HTML page.

Cascade Style Sheet


40/88

Cascade Style Sheet

ExternalExternal styles are used for the whole,multiple-page website. There is a separate

CSS file.

External CSS separates presentation fromthe content. Hence, presentationcan be globally changed

n ne asca e y e ee


41/88

yInline Cascading Style Sheet

This is simple text

This text is different

This text is colored.

Internal Cascade Style Sheet


42/88

Text Alignment Demoh1{font-family:Arial;

font-size:15px;text-align:left;}h2{font-family:Arial;font-size:15px;text-align:right;}

h3{

font-family:Arial;font-size:15px;text-align:center;}

Internal Cascade Style Sheet


43/88

y

This line is aligned at leftThis line is aligned at rightThis line is aligned at center

EXTERNAL CSS


44/88

h1{font-family:Arial}h2{font-family:times new roman;color:red;left:20px}h3{font-family:arial;color:blue;}h4

{

EXAMPLE


45/88

EXAMPLE

This page is created using External StyleSheetThis line is aligned left and red colored.< >

EXAMPLE


46/88

EXAMPLE

The External style sheet is the compact representationof Cascading Style Sheets.This paragraph is written in Monotype Corsiva font withfont size of 14.

This is a blue coloredline.


47/88

OUTPUT IN BROWSER

This page is created using External Style SheetThis line is aligned left and red colored.The External style sheet is the compact representation

of Cascading Style Sheets. This paragraph is written inMonotype Corsiva font with font size of 14.This is a blue colored line.

XML


48/88

XML stands for eXtensible Markup Language. XML is designed to transport and store data.

XML is important to know, and very easy to learn. XML is a markup language much like HTML XML was designed to carry data, not to display data XML tags are not predefined. You must define your own

tags

XML is designed to be self-descriptive XML is a W3C (www consortium Recommendation

XMLXML d t i h d bl d dit


49/88

XML document is human readable and we can editany XML document in simple

text editors. The XML document is language neutral

o It means a Perl program can generate an XML

document and this document can be parsed byPerl.

Every XML document has a tree structure. Hence

complex data can be arranged systematically andcan be understood in simple manner.

XML files are independent of an operating system.

XML


50/88

XML is not a replacement for HTML. XML and HTML were designed with different goals:

o XML was designed to transport and store data, with focus

on what data iso HTML was designed to display data, with focus on how

data lookso HTML is about displaying information, while XML is about

carrying information.

XML


51/88

XML Does Not DO Anything XML is created to structure, store, and transport information

The following example is a note to Tove, from Jani, stored as XML:.Tove

JaniReminderDon't forget me this weekend!It has sender and receiver information, it also has a heading and a messagebody. Someone must write a piece of software to send, receive or display it.

store

& T f d t


52/88

& Transfer data

2001 . Parul.xyzSRMCEMCS1001. Puneet.xyzSRMCEMMechanical

store

& Transfer data


53/88

& Transfer data2005 . Shekharan.manoSRMCEMCS Think a scenario of 10000 student record stored in Sun

Solaris system at Lucknow Send them to Mac (Apple M/C) located at UK. Receive Data at UK; retrieve info though a program (Parser?) Store the parsed data on Mac database.

XML ElementsIn XML Basic Entity is Element. The Elements are used to defined the tags.


54/88

My Name is Ram

I live in PuneI like readingI like programmingI like singingPerson is a root element. The root element is parent of all other elementsin XML documents.

The other elements are called container elements. There can be one ormore elements inside the container elements such elements are called the

child elements. Person-info is container element which contains childelementsName and City.

XMLAttributes


55/88

In XML, like HTML, an attribute is a part of an

element that provides additional information aboutthat element. The attributes must be enclosed within quotes or

single quoteFor example:

o samito B

XMLXML Separates Data from HTML


56/88

XML Separates Data from HTML If you need to display dynamic data in your HTML document,it will take a lot of work to edit the HTML each time the data

changes. With XML, data can be stored in separate XML files. This way

you can concentrate on using HTML for layout and display,and be sure that changes in the underlying data will notrequire any changes to the HTML.

With a few lines of JavaScript code, you can read an externalXML file and update the data content of your web page.

XMLXML Simplifies Data Sharing


57/88

XML Simplifies Data Sharing In the real world, computer systems and databases contain

data in incompatible formats.

XML data is stored in plain text format. This provides asoftware- and hardware-independent way of storing data.

This makes it much easier to create data that can be sharedby different applications.

XML Simplifies Data Transport One of the most time-consuming challenges for developers is

to exchange data between incompatible systems over theInternet.

Exchanging data as XML greatly reduces this complexity,since the data can be read by different incompatibleapplications.

XMLXML is Used to Create New Internet Languages


58/88

XML is Used to Create New Internet LanguagesA lot of new Internet languages are created with XML.Here are some examples: XHTML(XHTML combines the flexibility of HTML with the

extensibility of XML)

WSDL for describing available web services. It is also used tolocate Web services

WAP(Wireless Application Protocol. It is a specification fora set of communication protocols to standardize the way thatwireless devices, such as cellular telephone and radio

transceivers, can be used for Internet access, including e-mail, the World Wide Web, newsgroups, and instatntmessaging WML(Wireless Markup Language) as markuplanguages for handheld devices.

XML Example


59/88

ToveJani

Reminder

Don' t forget me this weekend!

The first line is the XML declaration.It defines the XML version (1.0) and the encoding used(ISO-8859-1 = Latin-1/West European character set).The next line describes the root element of the document(like saying: "this document is a note"):The next 4 lines describe 4 child elements ofthe root (to, from, heading, and body):

XML Structure


60/88

Harry Potter

J K . Row l ing2005

29.99

Learning XML

Erik T. Ray

2003

39.95

and have element contents because they containother elements. also has an attribute (category="CHILDREN")., , , and have text content because theycontain text.

DTD


61/88

A Document Type Definition (DTD) defines the

legal building blocks of an XML document.

It defines the document structure with a list oflegal elements and attributes.A DTD can be declared inline inside an XMLdocument, or as an external reference.

Internal DTD DeclarationIf h DTD i d l d i id h XML fil i


62/88

If the DTD is declared inside the XML file, it

should be wrapped in a DOCTYPE definition

with the following syntax:


63/88

]>Tove

JaniReminderDon't forget me this weekend

InterpretationThe DTD of previous example is interpreted like t


64/88

p p p!DOCTYPE note defines that the root element of

this document is note!ELEMENT note defines that the note elementcontains four elements: "to,from,heading,body"!ELEMENT to defines the to element to be oftype "#PCDATA"!ELEMENT from defines the from element tobe of type "#PCDATA"

!ELEMENT heading defines the headingelement to be of type "#PCDATA"!ELEMENT body defines the body element to be

of type "#PCDATA"

External DTD DeclarationIf th DTD i d l d i t l fil it


65/88

If the DTD is declared in an external file, it

should be wrapped in a DOCTYPE definitionwith the following syntax:This is the same XML document as previousexample, but with an external DTD:

XML with External DTD


66/88

ToveJani

ReminderDon't forget me this weekend!

External DTD Filethis is the file "note dtd" which contains the DTD:


67/88

this is the file "note.dtd" which contains the DTD:

display

Catalog dtd


68/88

Catalog.dtd

Use DTD and CSS for XMLCatalog Title

{


69/88

{font-family:arial;color:red;font-size:16pt}Book{display:block;font-family:times newroman;color:blue;font-size:14pt}

{font-family:arial;color:green;font-size:12pt} Author{font-family:arial;color:magenta;}Publication,Edition,ISBN,Price{display:block;font-family:arial;color:black;

font-size:10pt;margin-left: 20pt}

display


70/88

XML BibleWinstonWielyFifth Edition0-7645-4760-7$40.5

display


71/88

Rationale of Using a DTDthis is the file "note dtd" which contains the DTD:


72/88

this is the file note.dtd which contains the DTD: With a DTD, each of your XML files can carrya description of its own format. With a DTD, independent groups of people canagree to use a standard DTD for interchanging da

Your application can use a standard DTD toverify that the data you receive from the outsideworld is valid. You can also use a DTD to verify your own data

XML SchemaUnlike DTDs an XML Schema allows the content


73/88

Unlike DTDs, an XML Schema allows the contentof an element or attribute to be validated againsta data type.For example, an attribute might be constrained

to hold only a valid date or a decimal number.

XML Schema XML Schemas are extensible to future additions


74/88

XML Schemas are extensible to future additions XML Schemas are richer and more powerful than DTDs

XML Schemas are written in XML XML Schemas support data types XML Schemas support namespaces

TypesWith support for data types:


75/88

With support for data types: It is easier to describe allowable documentcontent It is easier to validate the correctness of data

It is easier to work with data from a database It is easier to define data facets (restrictions ondata)

It is easier to define data patterns (data formats It is easier to convert data between differentdata

types

XML Schemas use XML SyntaxSome benefits of that XML Schemas are


76/88

Some benefits of that XML Schemas arewritten in XML: You don't have to learn a new language You can use your XML editor to edit your

Schema files You can use your XML parser to parse yourSchema files

You can manipulate your Schema with theXML DOM You can transform your Schema with XSLT

XML Schemas use XML SyntaxWhen sending data from a sender to a receiver,


77/88

When sending data from a sender to a receiver,it is essential that both parts have the same"expectations" about the content.A date like: "03-11-2004" will, in some countries, binterpreted as 3.November and in other countriesas 11.March.2004-03-11ensures a mutual understanding of the content,because the XML data type "date" requires theformat "YYYY-MM-DD".

XML Schemas are ExtensibleXML Schemas are extensible, because they are


78/88

XML Schemas are extensible, because they arewritten in XML.With an extensible Schema definition you can: Reuse your Schema in other Schemas Create your own data types derived from the

standard types Reference multiple schemas in the samedocument.

XML Schemas are ExtensibleXML Schemas are extensible, because they are


79/88

Sc e as a e e e s b e, because ey a ewritten in XML.With an extensible Schema definition you can: Reuse your Schema in other Schemas Create your own data types derived from the

standard types Reference multiple schemas in the samedocument.

XML Schemas Example


80/88

g


81/88


82/88

gArun xmls:xsi indicates that XML documents is aninstance of XML schema. It comes from the namespacehttp://www.w3.org /2001/XMLSchema-instance.

Scchema To tie this XML document with some Schema


83/88

definition use the attributexsl:noNamespaceSchemaLocation. The value that can be passed to this attribute

is

the name of xsd fileStudentSchemaLocation.xsd

XML Student Schema


84/88


85/88

AnandPuneSecond70 percent

XML Student Schema


86/88

Student xmlns:xsi "http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="StudentSchema.xsd">AnandPuneSecond70 percent

XML Student Schema 8


87/88

xs:schema xmlns:xs http://www.w3.org/2001/X


88/88

Student xmlns:xsi "http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="complexType8.xsd">Jayashree10203040

Documents

WebTechUit2