lOMoARcPSD|39128241

Web technology Unit 2 - Summary notes

Web Technology (Dr. A.P.J. Abdul Kalam Technical University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Tushar Srivastava ([email protected])
 lOMoARcPSD|39128241

Topics to be covered ...

HTML
• List
• Tables
• Images
Frames
Forms
CSS Introduction 1234 5 67

External and Internal DTD

XML Introduction
XML Schema
COM and DCOM

di
SAX
HTML vs DHTML
Happy Ending!

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

.'.,.,; EIOV
.•

HTML
• HTML stands for Hypertext Markup Language. It is a markup language used to create web
pages and applications that can be viewed on the internet.

• HTML allows you to add text, images, videos, links, and other types of media to your web
pages.

• It also allows you to define the layout and formatting of the content on the page using style
sheets and other formatting techniques.

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

.
'om'
.•
EIOV

JiTML tags
• Tags are instructions that are embedded directly into the text of the document.

• HTML tags are of two types:

a. Paired tags
b. Singular tags
1. <TITLE> ...........</TITLE>
2. <ADDRESS>.......... </ADDRESS>
3.<BR>
4.<Hl> ..</Hl> to <H6>..</H6>
5. Text styles
a.<8> ... </8>
b.<U> ... </U>
C.<l> ... </1>
6. <CENTER> .......</CENTER>
7. <FONT SIZE = "6" COLOUR = "blue">................ </FONT>

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

.'.,.,;. EIOV
List
• Lists are used to present the list of information in well founed and semantic way.

• Types of list are:

o Ordered List:
o Unordered List:
o Definition List:

<dl>
<dt>Term 1</dt>
<ol> <ul>
<dd>Definition 1</dd>
<li>Item 1</li> <li>Item 1</li>
<dt>Term 2</dt>
<li>Item 2</li> <li>Item 2</li>
<dd>Definition 2</dd>
<li>Item 3</li> <li>Item 3</li>
<dt>Term 3</dt>
</ol> </ul>
<dd>Definition 3</dd>
</dl>

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

.',,,,,• EIOV
.•

Tables
• Table
• Table Headers
• Spanning Rows or Columns

r~owspJn = Header 1
Header 2
rl,.1tl,·r I

Row 1, Column 2
Ruw l, (ulu'1:11 l
Rm,1 1, Cnl.i·nr1 .'
Row 2, Co lumn 1
Row 2, Co lu'l1n 2
Pow CoLJrrn I
Row Colurrn 2

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

•
'....'> EIOV

Images
• To display an image on a web page in HTML, you can use the <img> tag. This tag is an
empty tag, which means it ch>es not have a closing tag.

<img src="image-url.jpg" alt="alternative text" width="400" height="300">

• Clickable Image
<a href="https://www.google.com">
<img border="0" alt="google" src="google.gif' width="l00" height="l00"></a>

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

.'.,,,,;
.•
EIOV

Frames
• In HTML, a frame is a separate window or sub-window that displays content from another
web page.

• Frames can be used to divide a webpage into separate sections and display different pieces
of content within each section.
·~
• To create frames in HTML, you can use the <frameset> element.

• The <frameset> element defines the layout of the frames within a page, and contains one or
more <frame> or <iframe> elements, each of which specifies the content to be displayed
within a particular frame.

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

.,
om EIOV

Forms
• A form is a section of a webpage that contains input elements such as text boxes, radio
buttons, checkboxes, and buttons, that allow a user to submit data to a server for
processing.

• Forms are commonly u~ed for user registration, contact forms, surveys, and other
interactive features on a webpage.

Type Description

<Input type•"text"> Olsplays a slngle•llne text Input fleld

<Input type = "radlo"> Dlsplays a radio button (for selectlng one of many choices)

<Input type= "checkbox"> Displays a checkbox (for selecting zero or more of many choices)

<Input type="submlt" > Dlsplays a submit button (for submitting the form)

Displays a cllckable button

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

.'.,.,;. EIOV
CSS Introduction
• CSS (Cascading Style Sheets) is a language used to describe the visual appearance of
webpages written in HTML and XML

• CSS is used to control the layout, fonts, colors, and other visual aspects of a webpage, and
it can be used to create responsive and adaptive designs that work well on different devices
and screen sizes.

• CSS types:
a. lnline CSS
b. Internal CSS
c. External CSS

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

. .. EIOV
Ol!l'J

CSS Properties
• color: sets the color of text
• font-family: sets the font used for text
• font-size: sets the size of text
• background-color: sets the background color of an element
• padding: sets the spacing between the content and the element's border
• margin: sets the spacing outside the element's border
• border: sets the style, width, and color of an element's border

Sr. No. Key Id Class

Syntax In Html for an element ID name starts On the other hand class assigned to
with the_,,,.. symbol followed by a an element has its name starts with "."
unique name assigned to it. followed by class name.
Selector Only one ID selector can be attached Multiple ciass selectors can be
2
to an element. attached to an element.
Uniqueness Id is unique in a page and can only The class can be applied to multiple
3 apply to at most one element elements so it could be multiple times
on a single page.

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

.',...•.. EIOV
Internal and External DTD
• OTO (Document Type Definition) is a set of rules that defines the structure and content of
an XML document. There are two types of DTDs: internal and external.

• Internal DTDs are defined within the XML document itself, usually within the DOCTYPE
declaration. They are enclosed in square brackets and placed before the document element.
The advantage of using an internal OTO is that it keeps the OTO and the XML document
together in a single file. However, if the OTO needs to be reused by multiple XML
documents, it would be more efficient to use an external OTO.

• External DTDs are defined in a separate file and referenced by the XML document using the
SYSTEM or PUBLIC keyword in the DOCTYPE declaration. The SYSTEM keyword specifies
the location of the OTO file on the local system, while the PUBLIC keyword specifies the
location of the OTO file on the web. The advantage of using an external OTO is that it can
be reused by multiple XML documents, which can help reduce duplication and improve
maintenance.

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

:-: EIOV

Internal DTD

• hoo k 8 •
· h ook >

•t1tl e >llarry Pottrr and th t> '.,;.o r ce r t•r' 3 S ton(•~/ t1tle >

•autho r > J.K. Rowl1ng- /autho 1 •

• publ 1:1he r >B l oom:;b u ry < / puh l 1:;ht•t >

• yt'a l >l !*fl</ y f'<H >

•/ h ook >
•book >

• l1t lt•> I IH• (i r ('a f (J;t l '.>!ly-/l1 llt••

•:wt tw r •r . Sco tt f 1f?1Jt>r;1 ld•/;,11 1t t10r,

• publ1 s h e r >Cha rl t•:.; ~c r1 b r:er·:_i Y.ln:.,•/pu bl 1:;he r >
·-y t'<II -• 1!}'.l!><::/y ea r >

,, / h ook >

</ h ook s>

Downloaded by Tushar Srivastava ([email protected])
 lOMoARcPSD|39128241

:-: EIOV

External DTD

<employees>
<employee>
<namc>John Doc</namc>
<titlc >Softwarc Enginccr</ t1.tlc>
< salary> 100000</ salary>
</employee>
<employee>
<namc>Janc Smith</namc>
<t1.tlc>Projcct Managcr</t1.tlc>
<salary> 120000< / salary>
< /employee>
</employees>

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

.',...• EIOV
.•

XM ~ troduction
• XML (eXtensible Markup Language) is a markup language used for encoding documents in
a format that is both human-readable and machine-readable. It was developed by the
World Wide Web Consortium (W3C) as a successor to HTML (Hypertext Markup
Language) and is widely used for data exchange between applications and systems on the
internet.

• XML uses tags to define elements and attributes to provide additional information about
those elements. For example, the following XML code defines a simple element called
"book" with two attributes "id" and "category"

< book

"-l1tle-.The Great Gatsby--./t1tle>

<author>r. Scott r1t?s.w1ald<-/authu1 >
<year> 1925</year >
<p11ce>19 95</ prtce >
</book>

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

.""', EIOV

XML vs HTML l·MI

The full form is eXtensib1e Markup Language The full form is Hypertext Markup Language

The main purpose is to focus on the Focusses on the appearance of data. Enhances the
transport of dala and saving the data appearance of text

XML is dynamic because it is used in the HTML is static because its main function is in the
transport of data display o f da1a

It is case-sensitive. The upper and lower It is not c ase-sensitive. Upper and lower case are of
case needs to be kept in mind while coding not much importance in HTML

You can define tags as per your requirement, It has its own pre-defined lags, and it is not necessary
but closing tags are mandatOf)' to have closing 1ags

XML can preserve white spaces White spaces are not preserved in HTML

eXtensible Markup language is content- Hypertext Markup Language, on !he other hand, is
driven, and not many formatting features are presentation driven. How the text appears is of
available utmost importance

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

.',...•. EIOV
XML Schema
• XML Schema, also known as XSD (XML Schema Definition), is a language used for
describing the structure and content of XML documents. It is an alternative to DTD
(Document Type Definition), which is another language used for defining the structure of
XML documents.
• XML Schema provides a more powerful and flexible way of defining the structure of XML
documents than DTD. It allows for more complex data types, validation rules, and
documentation, and it is also more extensible and reusable.

<xs:scquc nce>
<xs:t> l e me nt
<x~:Plemen t
<xs:e l emen t
<xs:e l ernen t
</xs : scqucnce>

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

.'m,,•. EIOV
COM and DCOM
•~ (Component Object Model) is a software architecture that allows software
components to be created and assembled into larger applications. It is a technology
developed by Microsoft and is used primarily on the Windows operating system.
• COM provides a way for software components to communicate with each other, regardless
of the language or development environment in which they were created.

• DCOM (Distributed Component Object Model) is an extension of COM that allows for the
distribution of components across multiple machines on a network. This enables software
components to be used remotely by other components or applications, allowing for the
creation of distributed applications.
• DCOM extends the COM architecture by providing additional features such as remote
activation and security.

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

.',...•, EIOV
COM and DCOM
Here are some key diff7es between COM and DCOM:

• C9M is primarily used for creating and assembling software components within a single
/4achine or process, while DCOM enables components to be distributed across multiple
machines on a network.

• COM provides a standard interface specification and rules for invoking methods and
passing parameters, while DCOM extends this to enable remote activation and invocation
of components.

• COM does not include security features for distributed components, while DCOM provides
security mechanisms to ensure that components can be securely activated and invoked
across a network.

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

.'um'. EIOV
SAX
~ (Simple API for XML) is a parser API for .XML documents that operates on an event-
driven model. It is a widely used alternative to DOM (Document Object Model). which is
another parser API for XML documents that operates on a tree-based model.

• With SAX, an XML document is read and processed sequentially from beginning to end.
The SAX parser then passes these events to an application or program, which can then
process the data accordingly.

• SAX provides a lightweight and efficient way to parse large XML documents, as it does not
need to load the entire document into memory like DOM does.

• SAX is widely used in many programming languages, including Python, Java, and C++, and
is often used in web services and other applications where large XML documents need to
be processed efficiently.

Downloaded by Tushar Srivastava ([email protected])

 lOMoARcPSD|39128241

.',...• EIOV
.•

HTML vs DHTML
HTML ( Hypute.rt M•ricup l anguage) DHTML (Dynamic Hyp ertext Marilup l angu.1ge)

HTM Lil a mark-up language. OHTML 1s a collection of technology.

HTML is used to build a static docum en1 page OHTML describM the techn ologies u sed t o build dynamic and
and to specify the hyper\inks. interactive web pages.

HTML does not include server-side code. OHTML includes serve,-sldecode.

HTML Is a simple static page with no OHTML 1Sa dynamic page with HTML, CSS. DOM and
JavaScript or stylt>i. JavaScript.

HTML files have the.htm or.html elCtension. OHTML files have the .dhtml t'llll'M ion.

OHTML may require database cormectJYity as it interacts w n h

HTML does not require database coonect ivity.
the user.

HTML p.igt>sdo not use event methods. OHTML pages make use of ew nt me1hods.

Downloaded by Tushar Srivastava ([email protected])