ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

MODULE 5

Prema C R,Asst Prof,Dept of CSE- Page 1

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

Computer Graphics
 Computer graphics is a branch of computer science that uses computer technology
to produce and manipulate visual representations.

 Applications of Computer Graphics:

1. Presentation of text
2. Construction of graphs and charts
3. Development of graphical user interfaces (GUIs)
4. Manipulation of photographs
5. Production of video games
6. Creation of animated motion pictures

 The term computer graphics is increasingly used to refer specifically to 3D

graphics.
 3D graphics is a specialized field within the broader scope of computer graphics.

10.1 The Scope of Computer Graphics

 With digital cameras, image manipulation software has become very popular.
 Such software can remove blemishes, fix red-eye, and combine parts of
different photos to create new images.
 These manipulations often produce images that do not reflect reality.
 Motion picture and TV industries use similar techniques for special effects,
such as removing wires, overlaying images, and altering recorded action.
 The shift from analog film to digital images in these industries was strongly
motivated by these editing possibilities.
 Software tools (like Microsoft Paint) allow creation of 2D drawings with
functions such as drawing dots and lines, inserting geometric shapes, filling
regions with colors, and cut-and-paste.
 More advanced 2D software supports layers, gradients, textures, and digital
painting.2D graphics focuses on producing images by converting shapes into
pixels.

Prema C R,Asst Prof,Dept of CSE- Page 2

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 Image processing focuses on analyzing images by studying pixel patterns to

enhance or understand them.
 2D graphics deals with drawing and generating flat images, while image
processing deals with recognition and analysis.
 3D graphics is different as it creates images from three-dimensional shapes and
scenes.
 3D graphics works like photography but photographs virtual worlds instead of
real ones.A 3D scene exists only as data and algorithms, not as a physical reality.
 The process of 3D graphics has two steps: creating/manipulating the virtual
scene and generating the final image.
 Scene creation is artistic and creative, while image production is
computationally heavy.
 Modeling, rendering, and shading are the key components of 3D graphics.
 3D graphics is essential in video games, where players interact with virtual
environments in real [Link] movies also rely on 3D graphics, where
animators interact with the

virtual world to produce 2D frames.

 3D graphics allows freedom beyond real-world limits, making it ideal for
games and animation.
 Currently, movies are distributed as 2D image sequences, even with digital
technology.
 Future possibilities include distributing entire 3D virtual worlds instead of 2D
movies.
 Viewers might watch the director’s suggested plot or interact with the 3D set
like a video game to explore alternative storylines.
 Special 3D projectors or devices, similar to gaming consoles, may be used to
experience these virtual worlds.
 This would merge cinema and gaming into a single interactive medium.
 Advancements in 3D human–machine interfaces will make such interactive
experiences more realistic and immersive.
 Virtual reality (VR) and augmented reality (AR) are emerging applications of
3D graphics.

Prema C R,Asst Prof,Dept of CSE- Page 3

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 The development of faster GPUs and better algorithms is making real-time 3D

graphics more accessible.

10.2 Overview of 3D Graphics

 The modeling step is analogous to designing and constructing a set in the

traditional motion picture industry, except that the 3D graphics scene is
“constructed” from digitally encoded data and algorithms.
 Thus, the scene produced in the context of computer graphics may never exist in
reality.
 The next step is to produce a two-dimensional image of the scene by computing
how the objects in the scene would appear in a photograph made by a camera at
a specified position.
 This step is called rendering.
 Rendering involves applying the mathematics of analytic geometry to compute
the projection of the objects in the scene onto a flat surface known as the
projection plane in a manner analogous to a camera projecting a scene onto film.
 The type of projection applied is a perspective projection, which means that all
objects are projected along straight lines, called projectors, that extend from a
common point called the center of projection or the viewpoint.
 This is in contrast to a parallel projection in which the projectors are parallel.
 A perspective projection produces a projection similar to that seen by the human
eye.
 A parallel projection produces a true profile of an object, which is often useful
in the context of engineering drawings.
 The restricted portion of the projection plane that defines the boundaries of the
final image is known as the image window.
 The image window corresponds to the rectangle displayed in the viewfinder of
most cameras to indicate the boundaries of the potential picture.
 The viewfinder of most cameras allows you to view more of the projection
plane than merely its image window.
 Example: You may see the top of Aunt Martha’s head in the viewfinder, but
unless the top of her head is within the image window, it will not appear in the
final picture.

Prema C R,Asst Prof,Dept of CSE- Page 4

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 Once the portion of the scene that projects into the image window is identified,
the appearance of each pixel in the final image is computed.
 This pixel-by-pixel process can be computationally complex because it requires
determining how the objects in the scene interact with light.
 A hard, shiny surface in bright light should be rendered differently than a soft,
transparent surface in indirect light.
 The rendering process borrows heavily from fields including material science
and physics.
 Determining the appearance of one object often requires knowledge about other
objects in the scene.
 The object may be in the shadow of another object, or the object may be a
mirror whose appearance is essentially that of another object.
 As the appearance of each pixel is determined, the results are stored collectively
as a bit map representation of the image in a storage area called the frame
buffer.
 The frame buffer may be an area of main memory or, in the case of hardware
designed specifically for graphics applications, it may be a block of special-
purpose memory circuitry.
 Finally, the image stored in the frame buffer is either displayed for viewing or
transferred to more permanent storage for later display.
 If the image is being produced for use in a motion picture, it may be stored and
perhaps even modified before final presentation.

Prema C R,Asst Prof,Dept of CSE- Page 5

SKIT
 ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 In an interactive video game or flight simulator, images must be displayed in

real-time, a requirement that often limits the quality of the images created.
 This is why the graphics quality of full-feature animated productions
distributed by the motion picture industry exceeds that of today’s interactive
video games.

10.3 Modeling

 A 3D computer graphics project begins in much the same way as a theatrical

stage production—a set must be designed and the required props must be
collected or constructed.
 In computer graphics terminology, the set is called a scene and the props are
called objects.
 Keep in mind that a 3D graphics scene is virtual because it consists of objects
that are “constructed” as digitally encoded models rather than tangible,
physical structures.

Modeling Individual Objects

 In a stage production, the extent to which a prop conforms to reality depends on

how it will be used in the scene.
 We may not need an entire automobile, the telephone does not have to be
functional, and the background scenery may be painted on a flat backdrop.
 Likewise, in computer graphics, the degree to which the software model of an
object reflects the true properties depends on the requirements of the situation.
 Foreground objects require more detail than background objects.
 More detail can be produced when there are no strict real-time constraints.
 Some object models may be relatively simple, while others may be extremely
complex.
 Precise models → higher-quality images, but also longer rendering times.
 Ongoing research in computer graphics focuses on constructing highly detailed
yet efficient models.
 Some research develops models with different levels of detail depending on the
object’s role in the scene.
 This results in a single object model adaptable to a changing environment.

Prema C R,Asst Prof,Dept of CSE- Page 6

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 Information required to describe an object includes its shape and surface

characteristics.
 Surface characteristics determine how the object interacts with light.
 Current focus: the task of modeling shape.
Shape
 The shape of an object in 3D graphics is usually described as a collection of
small flat surfaces called planar patches, each of which is the shape of a
polygon.
 Collectively, these polygons form a polygonal mesh that approximates the shape
of the object being described.
 By using small planar patches, the approximation can be made as precise as
needed.
 The planar patches in a polygonal mesh are often chosen to be triangles.
 Each triangle can be represented by its three vertices, which is the minimum
number of points required to identify a flat surface in three-dimensional space.
 A polygonal mesh is represented as the collection of the vertices of its planar
patches.
 A polygonal mesh representation of an object can be obtained in a variety of
ways.
 One way is to begin with a precise geometric description of the desired shape,
and then use that description to construct a polygonal mesh.
 Example: Analytic geometry tells us that a sphere (centered at the origin) with
radius r is described by the equation.

 Based on this formula, we can establish equations for lines of latitude and lon gitude on
the sphere, identify the points where these lines intersect, and then use these points as the
vertices of a polygonal mesh.
 Similar techniques can be applied to other traditional geometric shapes, and this is why
characters in less-expensive computer-generated animations often appear to be pieced
together from such structures as spheres, cylinders, and cones.

Prema C R,Asst Prof,Dept of CSE- Page 7

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 More general shapes can be described by more sophisticated analytical means.

 One method is based on the use of Bezier curves (named after Pierre Bezier,
who developed the concept in the early 1970s as an engineer for the Renault car
company).
 Bezier curves allow a curved line segment in three-dimensional space to be
defined by only a few points called control points.
 Two control points represent the ends of the curve segment, while the others
indicate how the curve is distorted.
 Example: A curve defined by four control points shows how the curve appears
to be pulled toward the two control points that do not identify the segment ends.
 By moving these control points, the curve can be twisted into different shapes.
 Such techniques are also experienced when constructing curved lines using
drawing software packages such as Microsoft’s Paint.
 Bezier’s techniques for describing curves can be extended to describe three-
dimensional surfaces, known as Bezier surfaces.
 Bezier surfaces have proven to be an efficient first step in the process of
obtaining polygonal meshes for complex surfaces.

Prema C R,Asst Prof,Dept of CSE- Page 8

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 Another way of obtaining a polygonal mesh is to construct the mesh in a brute

force manner.
 This approach is popular in cases where a shape defies representation by elegant
mathematical techniques.
 The procedure is to build a physical model of the object and then record the
location of points on the surface of the model by touching the surface with a pen
device that records its position in three-dimensional space.
 This process is known as digitizing.
 The collection of points obtained can then be used as vertices to obtain a
polygonal mesh describing the shape.
 In these cases, polygonal meshes can be obtained by writing programs that
construct the desired shape automatically.
 Such programs are collectively known as procedural models.
 A procedural model is a program unit that applies an algorithm to generate a
desired structure.
 As an example, procedural models have been used to generate mountain ranges by
executing the following steps:

Prema C R,Asst Prof,Dept of CSE- Page 9

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 Starting with a single triangle, identify the midpoints of the triangle’s edges
(Figure 10.4a). Then, connect these midpoints to form a total of four smaller
triangles (Figure 10.4b). Now, while holding the original triangle’s vertices fixed,
move the midpoints in three-dimensional space (allowing the triangle’s edge lines
to stretch or contract), thus distorting the triangular shapes (Figure 10.4c). Repeat
this process with each of the smaller tri angles ( Figure 10.4d), and continue
repeating the process until the desired detail is obtained.

 Another method of constructing procedural models is to simulate the underly ing structure
of an object as a large collection of particles.
 Such models are called particle systems. Usually particle systems apply certain
predefined rules to move the particles in the system, perhaps in a manner reminiscent of
molecular interactions, to produce the desired shape.
 As an example, particle systems have been used to produce an animation of sloshing
water as we will see later in our discussion of animation. (Imagine a bucket of water
modeled as a bucket of mar bles. As the bucket rocks, the marbles tumble around,

Prema C R,Asst Prof,Dept of CSE- Page 10

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

simulating the movement of water.) Other examples of particle system applications

include flickering fire flames, clouds, and crowd scenes.
 The output of a procedural model is usually a polygonal mesh that approximates
the shape of the desired object.

Surface Characteristics

 A model consisting merely of a polygonal mesh captures only the shape of an

object.
 Most rendering systems are capable of enriching such models during the
rendering process to simulate various surface characteristics as requested by
the user.
 By applying different shading techniques, a user may specify that a polygonal
mesh for a ball be rendered as a red smooth ball or a green rough ball.
 In situations requiring faithful rendering of an original object, more specific
information about the object must be included in the model so that the
rendering system will know what to do.
 There are a variety of techniques for encoding information about an object in
addition to its shape.
 Along with each vertex in a polygonal mesh, one might encode the color of the
original object at that point on the object.
 This information could then be used during rendering to recreate the
appearance of the original object.
 In other instances, color patterns can be associated with an object’s surface by
means of texture mapping.
 Texture mapping is similar to applying wallpaper, as it associates a predefined
image with the surface of an object.
 The image might be a digital photograph, an artist’s rendering, or a computer-
generated image.

Prema C R,Asst Prof,Dept of CSE- Page 11

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

Modeling Entire Scenes

 Once the objects in a scene are adequately described and digitally encoded, they
are each assigned a location, size, and an orientation within the scene.
 This collection of information is linked to form a data structure called a scene
graph.
 The scene graph also contains links to special objects representing light sources
and a particular object representing the camera.
 The location, orientation, and focal properties of the camera are recorded in the
scene graph.
 A scene graph is analogous to a studio setup in traditional photography—it
contains the camera, lights, props, and background scenery in proper places.
 The difference: traditional photography contains physical objects, while a
scene graph contains digitally encoded representations.
 In short, a scene graph describes a virtual world.
 The positioning of the camera has many repercussions—foreground objects
require more detail than background objects, and this distinction depends on the
camera position.
 If the camera is moved, the object models may need to be adjusted dynamically
between different “photographs.”

 Current research envisions “intelligent models” that refine their polygonal

meshes and features as the camera moves.
 Example: In virtual reality systems, a human user experiences moving around in
an imaginary 3D world represented by a scene graph.
 The camera moves as dictated by the human’s movements.
 To provide depth perception, two cameras are used: one for the right eye and
one for the left eye.
 Displaying each camera’s image in front of the appropriate eye gives the illusion
of being inside the 3D scene.
 Adding audio and tactile sensations makes the illusion more realistic.
 The construction of a scene graph is a pivotal position in the 3D graphics
process.
 Its completion marks the end of the artistic modeling process and the beginning
of the computationally intensive process of rendering.
 Once the scene graph is built, the graphics task involves computing projections,
Prema C R,Asst Prof,Dept of CSE- Page 12
SKIT
 ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

determining surface details, and simulating light effects—tasks that are largely
independent of the application.

10.4 Rendering

 Rendering is the process of determining how objects in a scene graph appear

when projected onto the projection plane.
 The goal of rendering is to produce a final 2D image from the 3D scene
description.
 There are several methods to accomplish the rendering task.
 This section focuses on the traditional approach used in most popular graphics
systems.
 Examples of such systems include video games, home computers, and other
consumer market technologies.
 The following section will explore two alternative approaches to rendering.
Light-Surface Interaction

Depending on the material properties of an object, light striking its surface may be absorbed,
bounce off the surface as reflected light, or pass through the surface (and be bent) as refracted
light.

Reflection

 Let us consider a ray of light that is reflected off a flat opaque [Link] ray
arrives traveling in a straight line and strikes the surface at an angle called the
incidence angle.
 The angle at which the ray is reflected is identical to the incidence [Link]
shown in Figure 10.5, these angles are measured relative to a line perpendicular
(or normal) to the surface.
 A line normal to a surface is often referred to as simply “the normal” as in “The
incidence angle is measured relative to the normal.”
 The incoming ray, the reflected ray, and the normal all lie in the same plane.
 If a surface is smooth, parallel light rays (such as those arriving from the same
light source) that strike the surface in the same area will be reflected in
essentially the same direction and travel away from the object as parallel
[Link] reflected light is called specular light.

Prema C R,Asst Prof,Dept of CSE- Page 13

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 Note that specular light can be observed only when the orientation of the
surface and the light source causes the light to be reflected in the viewer’s
direction.
 Thus, it normally appears as bright highlights on a [Link], because
specular light has minimal contact with the surface, it tends to portray the color
of the original light source.

 Unlike specular light, diffuse light is visible within a wide range of directions.
 Because it tends to have prolonged contact with the surface, diffuse light is
more susceptible to the absorption properties of the [Link], diffuse
light tends to portray the color of the object.

 Figure 10.6 presents a ball that is illuminated by a single light [Link] bright
highlight on the ball is produced by specular light.
 The rest of the hemisphere facing the light source is seen by means of diffuse
[Link] hemisphere facing away from the primary light source is not visible
by means of light being reflected directly from that source.
 The ability to see this portion of the ball is due to ambient light, which is “stray”
or scattered light that is not associated with any particular source or direction.
 Portions of surfaces illuminated by ambient light often appear as a uniform
dark color.
 Most surfaces reflect both specular and diffuse [Link] characteristics of the
surface determine the proportion of each.
 Smooth surfaces appear shiny because they reflect more specular light than
diffuse [Link] surfaces appear dull because they reflect more diffuse light

Prema C R,Asst Prof,Dept of CSE- Page 14

SKIT
 ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

than specular light.

 Due to minute properties of some surfaces, the ratio of specular to diffuse light
varies depending on the direction of the incoming light.
 Light striking such a surface from one direction may be reflected primarily as
specular light, whereas light striking the surface from another direction may be
reflected primarily as diffuse light.
 Thus, the appearance of the surface will shift from shiny to dull as it is rotated.
 Such surfaces are called anisotropic surfaces, as opposed to isotropic surfaces
whose reflection patterns are symmetric.
 Examples of anisotropic surfaces are found in fabric such as satin, where the
nap of the cloth alters the material’s appearance depending on its orientation.
 Another example is the grassy surface of an athletic field, where the lie of the
grass (usually determined by the manner in which the grass is cut) produces
anisotropic visual effects such as light and dark striped patterns.

Refraction

 Now consider light striking an object that is transparent rather than [Link]
this case light rays pass through the object rather than bounce off its surface.
 As the rays penetrate the surface, their direction is altered—a phenomenon
called refraction (Figure 10.7).The degree of refraction is determined by the
refractive index of the materials involved.
 The refractive index is related to the density of the [Link] materials
tend to have a higher refractive index than less dense materials.
 As a light ray passes into a material with a higher refractive index (such as
passing from air into water), it bends toward the normal at the point of entry.

Prema C R,Asst Prof,Dept of CSE- Page 15

SKIT
 ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 If it passes into a material with a lower refractive index, it bends away from
the normal.

 To render transparent objects properly, rendering software must know the

refractive indexes of the materials involved.
 The rendering software must also know which side of an object’s surface
represents the inside of an object as opposed to the [Link] the light entering
the object or exiting the object?Techniques for obtaining this information are
sometimes quite subtle.
 For example, if we agree to always list the vertices of each polygon in a
polygonal mesh in a counter-clockwise order as seen from outside the object,
then the list cleverly encodes which side of the patch represents the outside of the
object.

Clipping, Scan Conversion, and Hidden-Surface Removal

 Let us now focus on the process of producing an image from a scene graph.
 Our approach for now is to follow the techniques used in most interactive video
game systems.
 Collectively, these techniques form a well-established paradigm known as the
rendering pipeline.
 We will consider some of the pros and cons of this approach at the end of this
section and explore two alternatives in the following section.
 For now it is helpful to note that the rendering pipeline deals with opaque
objects and thus refraction is not an issue.

Prema C R,Asst Prof,Dept of CSE- Page 16

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 Moreover, it ignores interactions between objects so that, for now, we will not
be concerned with mirrors and shadows.
 The rendering pipeline begins by identifying the region in a three-dimensional
scene that contains the objects (or parts of objects) that can be “seen” by the
camera.
 This region, called the view volume, is the space within the pyramid defined by
straight lines extending from the center of projection through the corners of the
image window (Figure 10.8).
 Once the view volume is identified, the task is to discard from consideration
those objects or parts of objects that do not intersect the view volume.
 The projection of portions of the scene outside the view volume will fall outside
the image window and therefore not appear in the final image.
 The first step is to discard all those objects that are totally outside the view
volume.
 To streamline this process, a scene graph may be organized in a tree structure in
which objects in different regions of the scene are stored in different branches.
 Large sections of the scene graph can be discarded merely by ignoring entire
branches in the tree.
 After identifying and discarding the objects that do not intersect the view volume,
the remaining objects are trimmed by a process known as clipping, which
essentially slices off the portion of each object that lies outside the view volume.
 More precisely, clipping is the process of comparing each individual planar
patch to the boundaries of the view volume and trimming off those portions of
the patch that fall outside.
 The results are polygonal meshes (of possibly trimmed planar patches) that lie
entirely within the view volume.

Prema C R,Asst Prof,Dept of CSE- Page 17

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 The next step in the rendering pipeline is to identify the points on the remaining
planar patches that are to be associated with pixel positions in the final image.
 It is important to realize that only these points will contribute to the final picture.
 If a detail on an object falls between the pixel positions, it will not be represented
by a pixel and therefore not be visible in the final image.
 This is why pixel counts are heavily advertised in the digital camera market.
 The more pixels there are, the more likely that small details will be captured in a
photograph.
 The process of associating pixel positions with points in the scene is called scan
conversion (because it involves converting the patches into horizontal rows of
pixels called scan lines) or rasterization (because an array of pixels is known as
a raster).
 Scan conversion is accomplished by extending straight lines (projectors) from
the center of projection through each pixel position in the image window and
then identifying the points at which these projectors intersect the planar
patches.
 These, then, are the points on the patches at which we must determine an
object’s appearance.
 Indeed, these are the points that will be represented by the pixels in the final
image.

Prema C R,Asst Prof,Dept of CSE- Page 18

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 Figure 10.9 depicts the scan conversion of a single triangular patch.

 Part a of the figure shows how a projector is used to associate a pixel position
with a point on the patch.
 Part b shows the pixel image of the patch as determined by the scan conversion.
 The entire array of pixels (the raster) is represented by a grid, and the pixels
associated with the triangle have been shaded.
 Note that the figure also demonstrates the distortion that can occur when scan
converting a shape whose features are small relative to the size of the pixels.
 Such jagged edges are familiar to users of most personal computer display
screens.
 Unfortunately, scan conversion of an entire scene (or even a single object) is not
as straightforward as scan converting a single patch.
 This is because when multiple patches are involved, one patch may block the
view of another.
 Thus, even though a projector intersects a planar patch, that point on the patch
may not be visible in the final image.
 Identifying and discarding points in a scene that are blocked from view is the
process called hidden-surface removal.
 A specific version of hidden-surface removal is back face elimination, which
involves discarding from consideration those patches in a polygonal mesh that
represent the “back side” of an object.
 Note that back face elimination is relatively straightforward because the
patches on the back side of an object can be identified as those whose
orientation faces away from the camera.

 In short, if a projector intersects more than one planar patch, it is the point on the
patch nearest the image window that should be rendered.

Prema C R,Asst Prof,Dept of CSE- Page 19

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 A simplistic approach to solving this “foreground/background” problem,

known as the painter’s algorithm, is to arrange the objects in the scene
according to their distances from the camera and then to scan convert the more
distant objects first, allowing the results of scan converting closer objects to
override any previous results.
 Unfortunately, the painter’s algorithm fails to handle cases in which objects are
intertwined.
 Example: part of a tree may be behind another object while another part of the
tree may be in front of that object.
 More encompassing solutions to the “foreground/background” problem are
obtained by focusing on individual pixels rather than entire objects.

Prema C R,Asst Prof,Dept of CSE- Page 20

SKIT
 ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 A popular technique uses an extra storage area, called a z-buffer (also a depth
buffer), which contains an entry for each pixel in the image (or, equivalently,
each pixel entry in the frame buffer).
 Each position in the z-buffer is used to store the distance along the appropriate
projector from the camera to the object currently represented by the
corresponding entry in the frame buffer.
 Thus, with the aid of a z-buffer, the “foreground/background” problem can be
resolved by computing and storing the appearance of a pixel only if:

1. Data for that pixel has not yet been placed in the frame buffer, or
2. The point on the object currently being considered is closer than that of the
previously rendered object, as determined by the distance information recorded in
the z-buffer.

 More precisely, when using a z-buffer, the rendering process can proceed as
follows:
 Set all entries in the z-buffer to a value representing the maximum distance from
the camera that an object will be considered for rendering.
 Each time a new point on a planar patch is considered for rendering, first compare
its distance from the camera to the value in the z-buffer associated with the current
pixel position.
 If that distance is less than the value found in the z-buffer, then:
o Compute the appearance of the point.
o Record the results in the frame buffer.
o Replace the old entry in the z-buffer with the distance to the point just
rendered.

Shading

 The final image, the rendering task becomes that of determining the appearance of
the patch at that point.
 This process is called shading.
 Shading involves computing the characteristics of the light projected toward the
camera from the point in question, which depends on the orientation of the surface
at that point.

Prema C R,Asst Prof,Dept of CSE- Page 21

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 The orientation of the surface at the point determines the degree of specular,
diffuse, and ambient light witnessed by the camera.
 A straightforward solution to the shading problem, called flat shading, is to use the
orientation of a planar patch as the orientation of each point on the patch.
 That is, to assume the surface over each patch is flat.
 The result is that the final image will appear faceted (Figure 10.10) rather than
rounded (Figure 10.6).
 In a sense, flat shading produces an image of the polygonal mesh itself rather than
the object being modeled by the mesh.
 To produce a more realistic image, the rendering process must blend the
appearance of individual planar patches into a smoothly curved appearing surface.
 This is accomplished by estimating the true orientation of the original surface at
each individual point being rendered.
 Such estimation schemes normally begin with data indicating the surface orientation
at the vertices of the polygonal mesh.
 One way is to encode the orientation of the original surface at each vertex and
attach this data to the polygonal mesh as part of the modeling process.
 This produces a polygonal mesh with arrows, called normal vectors, attached to
each vertex.

 Each normal vector points outward in the direction perpendicular to the original
surface. The result is a polygonal mesh that can be envisioned as shown in
Figure 10.11.

Prema C R,Asst Prof,Dept of CSE- Page 22

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 Regardless of how the orientation of the original surface at a polygonal mesh’s

vertices is obtained, several strategies are available for shading a planar patch
based on this data.
 These include Gouraud shading and Phong shading, the distinction between which
is subtle.
 Both begin by using the information about the surface orientation at a patch’s
vertices to approximate the surface orientation along the boundaries of the patch.
 Gouraud shading applies that information to determine the appearance of the
surface along the patch boundaries.
 It then interpolates that boundary appearance to estimate the appearance of the
surface at points in the interior of the patch.
 Phong shading interpolates the orientation of the surface along the patch’s
boundaries to estimate the surface orientation at points within the patch’s interior.
 Only then does it consider questions of appearance.
 The result is that Phong shading is more likely to detect specular light within a
patch’s interior because it is more responsive to changes in surface orientation.
 Basic shading techniques can be augmented to add the appearance of texture to a
surface.
 An example, called bump mapping, is essentially a way of generating small
variations in the apparent orientation of a surface so that the surface appears
rough.
 More precisely, bump mapping adds a degree of randomness to the interpolation
process applied by traditional shading algorithms.
 As a result, the overall surface appears to have texture, as demonstrated in Figure
10.12.

Prema C R,Asst Prof,Dept of CSE- Page 23

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

Rendering-Pipeline Hardware

 Most computer systems designed for graphics applications, including video game
machines, incorporate these devices in their design.
 In the case of general-purpose computer systems, this technology can be added in
the form of a graphics card or graphics adapter, which is attached to the
computer’s bus as a specialized controller.
 Such hardware substantially reduces the time required to perform the rendering
process.
 Rendering-pipeline hardware also reduces the complexity of graphics application
software.
 Essentially, all the software needs to do is provide the graphics hardware with the
scene graph.
 The hardware then performs the pipeline steps and places the results in the frame
buffer.
 From the software’s perspective, the entire rendering pipeline is reduced to a single
step using the hardware as an abstract tool.
 Example: In an interactive video game, the game software transfers the scene
graph to the graphics hardware.
 The hardware then renders the scene and places the image in the frame buffer,
from where it is automatically displayed on the monitor screen.
 As the game progresses, the software merely updates the scene graph in the
graphics hardware to reflect the changing game situation.
 The hardware repeatedly renders the scene, each time placing the updated image
in the frame buffer.
 The capabilities and communication properties of different graphics hardware
vary substantially.
 If an application (such as a video game) were developed for a specific graphics
platform, it would have to be modified if transferred to another environment.
 To reduce this dependence on specific graphics systems, standard software
interfaces have been developed to play an intermediary role between graphics
hardware and application software.
 These interfaces consist of software routines that convert standardized commands
into the specific instructions required by a particular graphics hardware system.

Prema C R,Asst Prof,Dept of CSE- Page 24

SKIT
ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 Examples include OpenGL (Open Graphics Library), a nonproprietary system

developed by Silicon Graphics and widely used in the video game industry, and
Direct3D, developed by Microsoft for use in Windows environments.
 Advantages of the rendering pipeline come with disadvantages—the most
significant being that the pipeline implements only a local lighting model.
 Under a local lighting model, each object is rendered independently of other
objects.
 Each object is rendered in relation to the light sources as though it were the only
object in the scene.
 As a result, light interactions between objects (such as shadows and reflections) are
not captured.
 This contrasts with a global lighting model in which interactions among objects are
considered.
 Two techniques for implementing a global lighting model will be discussed in the
next section, but they lie outside the real-time capabilities of current technology.
 Systems using rendering-pipeline hardware can still produce some global lighting
effects using clever techniques.
 Example: Drop shadows (shadows cast on the ground) can be simulated within a
local lighting model.

Harshitha P,Asst Prof,Dept of CSE-DS Page 25

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

Overview
MODULE 5
 The Internet has been around since the early [Link] the early years, the Internet only
supported plain text and required precise syntax of computer commands.
 Example: mail -s ―mail subject‖ jane@[Link] <<< ―Mail body.‖Most users
found this too challenging, so only computer science researchers at universities used
it.
 In 1989, Sir Tim Berners Lee proposed and demonstrated an information management
system based on [Link] 1993, Tim Berners Lee had specified the first version
of HTML.
 From Dec 1992–Mar 1993, Marc Andreesen and Eric Bina at UIUC built the Mosaic
web browser.
 They added the ―img‖ tag to HTML to handle images and released the web
[Link] became a killer application that popularized the Internet.
 Sites like Yahoo offered directories for users to find content on the World Wide
[Link] then, the Internet has become increasingly user friendly as HTML
improved, adding support for images and videos.
 The Internet and World Wide Web became a powerful force for information sharing
and [Link] over 5 billion people (over 60% of the world’s population) use
the Internet.
 HTML and related technologies made it easy, inexpensive, and meaningful for
anyone anywhere in the world to access the web.

What is HTML?

 HTML (Hypertext Markup Language) is the standard markup language used for
creating webpages and web applications.
 A markup language is a computer language that is used to apply layout and
formatting conventions to a text document.
 The HTML markup language makes text on webpages more interactive and
dynamic.

Harshitha P,Asst Prof,Dept of CSE-DS Page 26

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 HTML allows us to specify the placement of images, tables, links, etc. on webpages
using simple text descriptions.

 HTML provides the structure and content of a webpage, specifying how text,
images, hyperlinks, tables, and other media should be displayed on a browser.
 When you visit a website, say [Link] returned is an HTML page
(Figure 198).
 Your browser can understand the page specifications defined in HTML and is able
to render it as a webpage that you can see and interact with.

 means “text within text.”

 In the context of the World Wide Web, hypertext refers to text with a link to
another page within it.
 Hypertext is the Internet’s way to link two or more webpages (HTML documents)
with each other.

 To see the HTML code that defines the page, you can right click on your webpage (on
most browsers such as Google Chrome or Mozilla’s Firefox) and choose ―View
Page Source.‖ This will bring up text specification of that webpage. (Figure 199)

Harshitha P,Asst Prof,Dept of CSE-DS Page 27

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 HTML has been an Internet standard since 1993, and all common browsers (e.g.,
Google Chrome, Apple Safari, Microsoft Internet Explorer, and Mozilla’s Firefox)
understand HTML.
 So, when you visit any page written in HTML, say [Link] on any
browser, they all receive the same text, and the page looks the same on all these
browsers.
 For example, the Google home page looks the same on all browsers.165
 HTML is a crucial part of the web and forms the foundation of all webpages.
 HTML uses tags to define elements.
 Tags can have attributes to further describe elements.
 These tags and attributes are used to create the visual and semantic structure of a
webpage.

Harshitha P,Asst Prof,Dept of CSE-DS Page 28

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 Though HTML is primarily designed for machines to interpret, as you will see in this
chapter, its simplicity makes it easy even for humans to understand the content.
 Virtually all information and tools are presented to end users as webpages.
 You access your school resources on the web, check email on the web, track bank
accounts on the web, your teachers enter your grades on the web, and so on.
 All these webpages are created using HTML.
 Therefore, HTML is a foundational technology that all modern professionals will find
useful.

Structure of an HTML Page

 HTML is a simple [Link] essentially encloses text within tags to tell the browser
how to render the enclosed text.
 For example, the browser will render <b>this is bold text</b> as this is bold text.
<i>this is italicized text</i> will be rendered as this is italicized text.
 You don’t need fancy editors to create an HTML [Link] could create an HTML
page by typing HTML commands on a notepad and saving the file as .html (a file
with an html extension).
 All HTML pages follow the same basic [Link] contain a DOCTYPE
declaration at the top, followed by an HTML [Link] HTML section comprises of
a HEAD and BODY.
 Figure 200 shows a basic example.

Harshitha P,Asst Prof,Dept of CSE-DS Page 29

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 DOCTYPE Declaration: This is the first line of an HTML page, and it tells the
browser what kind of document to expect, particularly, which version of HTML.
 HTML tag: All code in HTML is declared using tags.A tag is a special keyword that
is enclosed by <>.The HTML tag defines the start and end of an HTML
[Link] in the HTML document is nested within the opening and
closing HTML tags, i.e., between <html> and </html>.Tags are closed with the ―/‖
symbol in the tag, Thus, </html> indicates the end of the section that began with the
<html> tag.
 Head tag: The head tag contains information about the HTML document that is
mostly not displayed to the [Link] section includes the title of the page, any
information about the page such as author information and version history (this is
often called meta information), information about the look and feel (called
stylesheets), and information about user interactions (specified using a language
called JavaScript).You can also include additional description and relevant keywords
about your webpage within the head tag, so search engines can more easily identify
your [Link] only content within the head that is displayed to the user is information
within the title tag, which is displayed as the title of your browser tab.

Elements in HTML

 Like most electronic documents, webpages have text, images, tables, and links to
other pages.
 The text may be bold, italicized, and use different font sizes.
 You might see ideas listed as bullet points or numbered lists.
 You may also see forms, with different input elements for you to fill in.
 You can represent each of these elements with HTML tags and build a complex
HTML page that asks users to enter data and then sends the inputted data to a server
for further action.

Here are a few essential tags to get you started.

 The paragraph <p> tag is used to define a block of text as a paragraph.

 The text within the <p> tag is displayed as a separate paragraph, with a line break
before and after it (Figure 201).

Harshitha P,Asst Prof,Dept of CSE-DS Page 30

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 The text within the paragraph tag can include any type of content, such as text,
images, links, or other HTML elements.

 When creating a paragraph, you could use attributes to further specify the kind
of paragraph you want.
 To create a paragraph with text in red color, try this:
<p style=―color:red;‖> This is a red paragraph.</p>

 Heading Tag: Headings are the essential mechanism to create structure within pages.
 HTML supports headings with six levels of headings, ranging from <h1> to <h6>.167
 The <h1> tag represents the main heading on a page and is typically used for the page
title, while the other headings <h2> to <h6> are used for subheadings.
 It is best practice to not skip heading levels, i.e., subsections of <h1> should use
<h2>, not <h3> or <h4> etc.
 Figure 202 shows an example.

 Bold <b> tag is used to bold text.

 The underline <u> tag is used to underline text.
 The delete <del> or <strike> tag is used to visually strikethrough text (Figure
203).

Harshitha P,Asst Prof,Dept of CSE-DS Page 31

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 The subscript <sub> and superscript <sup> tags are used to display text as subscript
or superscript (Figure 204).
 These tags can be helpful to display scientific formulas.

Adding Links

 Hyperlinks are the unique distinguishing feature of HTML.

 Hyperlinks allow you to click on a link on a page and immediately navigate to another
page that could be hosted anywhere in the world.
 The <a> tag stands for ―anchor‖ and allows you to add hyperlinks to an HTML page.
 The <a> tag has a required attribute to specify the target page.
 The target page is specified using the href attribute, giving the URL of the page or the
resource you want to link.
 For example, to create a link to the homepage of the New York Times website, you
can use the code shown in Figure 205:
 When this code is rendered on a web browser, the user can click on ―The New York
Times‖ to go to the website.

Harshitha P,Asst Prof,Dept of CSE-DS Page 32

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

Adding Images

 You can add images to your HTML page with an <img> tag.
 Like the <a> tag, the <img> tag also has a required attribute, that specified the image
file to be displayed.
 You need to have the source (src) attribute to give the location of the image, so the
browser can get the image and display it on the webpage.
 Optionally, you can also have other attributes like width and height parameters to tell
the browser how large the image should be on the page (Figure 206).
 Images draw the attention of visitors.
 So, not surprisingly, company logos, background images, and advertisements are
carefully and tastefully designed to draw the attention of visitors and convey the right
message about the site to them.

Harshitha P,Asst Prof,Dept of CSE-DS Page 33

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

Creating Lists

 To create lists in HTML, such as a list of things to buy, places to visit, or people to
invite, HTML offers two options—bulleted lists and numbered lists.
 You have the <ul> tag for unordered (bulleted) lists and the <ol> tag for ordered
(numbered) lists.
 You can indicate the list items with the <li> tag and nest lists within lists (Figure
207).

Harshitha P,Asst Prof,Dept of CSE-DS Page 34

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

Creating Tables

 To display structured data, such as price lists, club memberships, class enrollments
etc., HTML supports [Link] are created using the <table> tag.
 Tables have some additional necessary elements to specify rows and cells.
 The <tr> and <td> tags define the rows and cells of the table, respectively.
 You can also use the <th> tag to define table headers, which are typically bolded and
centered.A <table> will have one or many <tr> tags, indicating the rows in the table.
 Each <tr> in turn encloses many <td> tags, indicating the cells within the row.
 The <td> tag represents a cell and encloses the contents of the cell (Figure 208).

Harshitha P,Asst Prof,Dept of CSE-DS Page 35

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

Creating Forms

 Forms are the principal mechanism to get user inputs on webpages.

 Creating forms on webpages is exciting because it allows your users to interact with
the webpage and submit information for processing.
 Almost all your favorite webpages have forms where data can be entered.
 Through forms, users can enter text, numbers, dates, and upload files.
 Users can also press buttons, tick checkboxes, and choose radio buttons.
 The [Link] homepage, probably the most famous webpage in the world, is just a
simple form with an input field where you can enter your search query.
 The page is essentially a form with a text input element and two buttons (Figure 209).

 Forms are created using HTML code.

 Later in this chapter, we will see how they can be styled and customized using CSS
stylesheets.
 When a user submits a form on an HTML page, the data is sent to a server for
processing or storage in a database.
 For example, when you search for ―Movies to watch‖ on [Link], your input
into the form is taken and sent to a Google server.
 The server then responds with the answer to your search query.
 Forms are used in a variety of contexts.
 Common forms include login and registration forms, search forms, contact forms,
feedback forms, and e-commerce checkout forms.

Harshitha P,Asst Prof,Dept of CSE-DS Page 36

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 They are an essential part of web development and enable webpages to collect data,
provide a personalized user experience, and perform various actions based on user
input.
 Forms are created using the <form> tag.
 Every form also has multiple <input> tags to specify the kind of input you want from
the user.
 These <input> elements can be text, number, file, or image.
 Each of these can be specified by choosing the right value for the ―type‖ attribute of
the <input> tag.
 The data collected in a form is sent to the server for processing using the action
attribute of the form tag.
 In the example in Figure 210, we have a simple form to collect the first name and last
name of the user.
 When the ―Submit‖ button is pressed after entering the first and last names, the form
data will be sent to the processor located at server_submit.php.
 The processor will respond after processing the name, for example by saving it in the
database, and customizing the response with the name, etc.

 To create a multi-line input element, use the tag ―textarea.‖ You can also specify
how wide and tall this text box should be using ―rows‖ and ―cols‖ attributes. To
create a dropdown that allows users to select from a list of things, you can use the
select tag (Figure 211).

Harshitha P,Asst Prof,Dept of CSE-DS Page 37

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 There are additional form input types to handle common input scenarios.
 A radio button is a great choice if you want to give users multiple choices, but you
want them to pick only one option.
 The concept of a radio button dates to radios that had mechanical buttons to select a
station.
 You could only select one button at a [Link] you pressed another button, then the
previously pressed button would pop out automatically.
 This concept has carried over to HTML forms and such selectors are called radio
buttons, tracing their lineage.
 So, even though you may see many options, selecting a new option will deselect your
previous [Link] 212 shows an example.

Harshitha P,Asst Prof,Dept of CSE-DS Page 38

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 The ―Checkbox‖ element in HTML derives its name from paper forms with
checkboxes. You can select one or many checkboxes. Similarly, creating a
―Checkbox‖ element in HTML will allow your users to select one or more choices
(Figure 213).

 If you want users to enter a date, you may want to use the ―Date‖ element. Your
browser will recognize this element and display a calendar (Figure 214). Once a date
is selected, the browser updates the field with the selected date.

Harshitha P,Asst Prof,Dept of CSE-DS Page 39

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

Cascading Style Sheets (CSS)

 The HTML we have created thus far is functional, but bland.

 We now look at CSS, which is the standard way to make webpages stand out with
color and design.
 CSS stands for Cascading Style Sheets and is used to describe how HTML elements
are to be displayed on screen, paper, phones, iPads, or in other media.
 The design of CSS saves the developer time by allowing the layout of multiple
webpages to be controlled all at once.
 In a few examples we have specified the height and width of the image. See Figure
206.
 While this was convenient for the example, imagine trying to decide how every
element should look across multiple pages on your website.
 When you add tags like <font> and <color> attributes to HTML, you will have a
nightmarish experience trying to remember the color and other attributes of other
similar elements on your page.
 Your webpage may end up looking inconsistent if you are not careful.
 Besides, the HTML file will be huge and messy.
 It gets worse. If you decide to change the colors or font styles on your site, you would
have to update the look and feel of every such element on your page.
 To avoid these problems, the best practice is for developers to define all their styles in
a CSS file that they then link to their HTML documents.
 In this way, every ―Submit‖ button on all webpages across your site will use the
same size and color and every header will be of the same font size and style.
 To see how CSS works, let’s begin by trying to add some basic styling effects to our
HTML document within the style tag as shown in Figure 215.

Harshitha P,Asst Prof,Dept of CSE-DS Page 40

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 W3Schools is a great resource to learn about styles.171 You can tweak more aspects
about the look and feel of your webpage than you can imagine.
 Once you develop some comfort with CSS, the next step to improve your productivity
as a web developer is to create a separate CSS file (Figure 216) and then link it to
your HTML file as shown in line 4 of Figure 217.

Website Design and Storyboarding

 Websites are collections of individual webpages that accomplish a specific purpose.
 For example, the website of your school district, say
[Link] or your school, say https:// [Link]/ has
several pages that provide all the information and interaction students and parents

Harshitha P,Asst Prof,Dept of CSE-DS Page 41

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

expect from the school or school district. When you visit a website (say,
[Link]), there are servers (owned and managed by a service provider)
waiting for you to reach out to them.
 To support all their users and their requests, websites have a collection of webpages
that are connected to one another through weblinks. This way, when you go from one
Google webpage to another, you have a seamless experience.
 For example, when you search for a book on Google, you see a collection
of results. If you click on a Google sponsored ad after reviewing the
results, another result page opens. The entire flow is managed by multiple
Google webpages and application programs that handle these user
requests.
 To accomplish this, websites should be coherent, easy to navigate, and
accomplish what you set out to do. The same need for coherence and ease
of use applies to much larger sites where you write your blog, sell your
products, or promote your company.
 Building a website is a resource-intensive exercise. You must plan, build,
and deploy your website. Just like you wouldn’t start constructing a house
without having a plan, you don’t want to build a website on the fly.
 Therefore, once you learn the elements of webpages including HTML
and CSS and are ready to build a website, it is a good idea to start with
storyboards.
 Storyboards are visual representations of creative projects.
 When used with websites, storyboards help all members of the development team
identify all the users of a website and their expected interactions.
 Once storyboards are developed, they are usually communicated using wireframes.
Wireframes are illustrations of the webpage that focus on space allocation for the
elements of the page and their intended behaviors.
 Wireframes are intended to be simple and disposable and typically do not include any
styling, color, or graphics.
 Storyboards and wireframes are both important tools in the design and development
process of a website, but they serve different purposes and are used in different

Harshitha P,Asst Prof,Dept of CSE-DS Page 42

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

contexts. Storyboards are about the storytelling and visual components and
wireframes focus on the user interface and interaction aspects of a website.
 For large scale projects, you should first do storyboarding before moving on to
wireframing tools. While storyboarding evolved from film and drama, the concept has
found a home in website development.
 It is useful to understand the high-level overview and flow of the webpages and
visualize the user experience. Once you and your team agree about the flow, you can
then move to wireframing the design.
 A wireframe outlines the structure and content of a website without including design
elements such as colors, typography, or images. Wireframes are created during the
planning phase to help designers and developers identify and address potential design
and usability issues.
 Wireframes typically include boxes and lines to represent the placement of different
elements on the page, such as headers, navigation menus, content sections, and calls
to action. Balsamiq175 is a popular wireframing software that lets you quickly
wireframe your webpages and then share it with your team and customers to get their
feedback before investing development effort to create the website (Figure 218).
 Wireframing tools such as Balsamiq offer templates to pick, drag, and drop different
webpage elements and put them on the screen to quickly develop wireframes. You
can use wireframes to design browser-based webpages or for mobile apps like IOS or
Android.
 Building wireframes to refine application concepts is an excellent, low-effort, no-cost
way to test new application ideas.

Harshitha P,Asst Prof,Dept of CSE-DS Page 43

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

Structure of a Website

 If you want to create a website, your website admin (or you) will need to have a
webserver (e.g., Apache webserver) to host the website.
 You will need to save your HTML pages and other supporting files in an organized
folder structure on the webserver. We will now discuss the basic structure of a
website so you can understand how all the elements of a site are integrated together.
 It is a good idea to include the folder structure of your website in your wireframe, so
it is easy to see how it is organized on your webserver.
 Figure 219 shows an example of the folder hierarchy of a website and how it ties to
the different sections of the site together.

 It is useful to maintain a consistent organization for the files within each folder.
Figure 220 shows a popular organization structure for the files in a folder. The
starting point of your application or website is typically called the ―Root‖ folder of
your site. A file called ―[Link]‖ is displayed by default if someone visits your
website and does not specify a specific file name.

Harshitha P,Asst Prof,Dept of CSE-DS Page 44

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 Organizing folders for Images, Fonts, Common libraries, JavaScript, and Stylesheets
(Figure 220) makes it easier to manage and maintain files.
 Search engines and users will also be able to navigate the website easily.
Additionally, many websites also use a Content Management System (CMS) that
provides a graphical interface to organize and manage the files and contents of
websites.
 You can have all your HTML pages in a separate folder, or you can choose to divide
your website into different functional areas and have a separate webpage for each
topic within it.
 In Figure 221, you can see how the submenus of a website correspond to similarly
named folders on the server. For example, if a user visits your home page, the server
will show the root-level [Link] file. However, if the user clicks Submenu 1, then
the [Link] within the Submenu 1 folder will be displayed.

Hosting a Website
 Hosting a website means making it accessible to the public over the Internet by
storing the website’s files and data on a webserver.
 A webserver is a computer that is connected to the Internet and is designed to store
and deliver webpages to users who request them through their browsers.
 When you host a website, you essentially rent space on a webserver from a hosting
company or provider.

Harshitha P,Asst Prof,Dept of CSE-DS Page 45

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 This allows your website to be stored on the webserver and made available for access
over the Internet.
 The web hosting company also provides a range of services, such as server
maintenance, security, and technical support, to ensure that your website is always
accessible and runs smoothly. You’ll need to upload your files to the webserver and
configure your website settings so users can find your site on the web.
 Once your website is hosted, users can access it by typing your domain name (e.g.,
[Link]. org) into their web browsers. This sends a request to the webserver
hosting your website.
 The webserver then responds by sending the requested webpages back to the user’s
web browser, which displays them on their screen.
 There are many popular web hosting sites available, each with its own features,
pricing, and capabilities. Some of the most popular web hosting sites are
GoDaddy,Bluehost, SiteGround, HostGator,DreamHost, A2 Hosting, InMotion
Hosting, and Wix.
 It’s important to research and compare different options to find the one that best
meets your needs and budget.

Website Editors

 There are multiple ways to build HTML pages. One way is to code it from scratch
using the HTML elements like <table>, <text>, <img>, and others.
 Another way is to use a wireframe tool like Figma and then use the tool’s conversion
feature to convert the wireframe into HTML code.
 Another popular way is to use a WYSIWYG (Pronounced WIZ-EEE-WIG) editor.
 WYSIWYG is a popular industry acronym for ―What You See Is What You Get.‖
 In the context of HTML editors, a WYSIWYG editor is a software program that
allows users to create and edit HTML documents without having to know the HTML
code.
 With a WYSIWYG editor, users drag and drop website elements such as images and
tables on a drawing canvas, and see the webpage they are creating as it will appear in
a browser without having to manually code the HTML.
 WYSIWYG HTML editors make web technologies accessible to everyone.

Harshitha P,Asst Prof,Dept of CSE-DS Page 46

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 They are popular among non-technical users, such as bloggers, content creators, and
small business owners, who may not have the technical expertise to create webpages
using HTML code.
 Some popular free WYSIWYG HTML editors include Brackets from Adobe, Phoenix
code editor from the Brackets developer community, and SeaMonkey from the
Mozilla community.
 There are also commercial WYSIWYG editors, including Adobe’s Dreamweaver.
 Website hosting providers like [Link] can also give you access to website builders
and editors.
 The website builder is typically a WYSIWYG platform, where you can drag and drop
elements on to the page. When you are ready, you can click the ―Publish‖ button to
deploy your website without writing or editing a line of code.
 Google Sites ([Link]) is another website hosting provider that has its
own WYSIWYG webpage builder (Figure 222).

 The capabilities of HTML editors are evolving rapidly. While the editors share most
of the same basic capabilities, they can also offer additional capabilities depending
upon the needs of their target audience, pricing structure, etc.
 For example, commercial editors may offer advanced features like a library to
maintain your common themes, icons, a collaboration framework (so you can get your
work approved before it gets published), and a built-in version control system (so you
can go back to any previous version). Check out the capabilities and pricing models of
the different editors to find one that best fits your needs.

Harshitha P,Asst Prof,Dept of CSE-DS Page 47

 ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

HTML Extensions

The popularity of the web has led to several innovations in web design, collectively called
DHTML. The concept of tags has also been extended to XML, which generalizes publishing
and even allows machines to directly exchange information with each other.

Dynamic HTML (DHTML)

 Developers use multiple web technologies to enable this interactivity. The collection
of web technologies including HTML, CSS, and JavaScript to create interactive
websites is called Dynamic HTML, or DHTML.
 One way to look at the DHTML technologies is to think of HTML code as answering
the question ―What to display,‖ CSS code as answering the question ―How the
display should look,‖ and JavaScript code answering the question ―How the webpage
should interact with the user.‖
 Using DHTML, you can create webpages that respond to user actions such as mouse
clicks and hover events, without requiring the page to reload or requiring server-side
processing.
 Another recent development, popularized by social media websites such as Facebook
and Twitter, is called the Single Page Architecture (SPA). Single Page Architecture
(SPA) is a development approach in which the content and functionality of a web
application is contained within a single HTML page. I
 nstead of navigating to separate pages when clicking on links, the user remains on the
same page while sections of the page get dynamically updated based on the user’s
interaction with the website. The initial HTML page is loaded from the server, and
then subsequent interactions with the application are handled through JavaScript.
 The JavaScript code updates sections of the page based on user interactions without
requiring a full page reload, offering a seamless experience to visitors.
 SPAs offer several advantages to page visitors, including a smoother user experience,
faster page load times, and easier development and maintenance due to the separation
of client-side and server-side code.
 Popular examples of SPAs include Gmail, Facebook, and Twitter. Their convenience
is also a source of criticism of single page applications—users keep scrolling SPAs,
anticipating interesting news, a phenomenon popularly labeled doom-scrolling.

Harshitha P,Asst Prof,Dept of CSE-DS Page 48

 ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

Extensible Markup Language (XML)

 Extensible Markup Language (XML) is the generalization of tags for electronic

[Link] electronic publishing technologies use XML behind the scenes for
their operation. Almost all electronic documents are saved behind the scenes as XML.
 For example, Figure 223 shows the XML created by Microsoft Word for the title and
opening sentence of this [Link] can see the styles and content for the title and
paragraph in the figure.
 As you can see in Figure 223, XML encodes documents in a format that is both
human-readable as well as machine-readable. XML can specify how every element of
an electronic document should be interpreted. With this detail, computers can
precisely and easily transform information for different uses such as recordkeeping
and publishing.

 XML is very useful if the organization you work for does data exchange, for example
with buyers, sellers, credit card companies, banks, and other organizations. Data
exchange between companies and customers is a critical aspect of online commerce,
which makes XML a key language you should know about.
 A unique feature of XML is that it allows users to create their own custom tags to
represent specific data structures and identify elements within a document.
 This flexibility makes it suitable for a wide range of applications, including web
services, data storage and retrieval, and configuration files for computer applications.
  XML standards, which specify tags for specific uses, have been developed for most
of the important information exchange contexts.

Harshitha P,Asst Prof,Dept of CSE-DS Page 49

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

 For example, the XML Business Reporting Language (XBRL) helps organizations
report financial performance in a universal format.
 Since 2018, the U.S. Securities and Exchange Commission, the principal regulator of
publicly traded companies in the United States, has required that companies submit
their annual reports using XBRL.
 An example is shown in Figure 224.
 A critical feature you can see in the example is that the numbers are clearly associated
with their corresponding meanings specified by the International Financial Reporting
Standards (IFRS).
 For example, the underlying XML conveys to every financial publishing technology
anywhere in the world that the highlighted number of $3,404,031 represents salary
expenses for the organization.
 This makes it easy and precise for investors to compare the performance of different
organizations, and for regulators to ensure that the numbers are correctly reported.
 Finally, XML viewers can format documents for easy human readability, as you see
in Figure 224.

 One of the key features of XML for recordkeeping, electronic commerce, healthcare, and
other industrial applications is that computers can validate data against a defined schema or
document type definition (DTD).
 Computers can review every element of a document and ensure that the data is properly
formatted and satisfies all necessary properties. For example, a DTD can specify that profits
or losses must be numbers, or, as in the example of Figure 225, a person must have a name.
This helps avoid errors and inconsistencies in electronic documents. Figure 225 introduces the
structure of XML documents. In this example, the XML document starts with a declaration

Harshitha P,Asst Prof,Dept of CSE-DS Page 50

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

that specifies the version of XML being used (―1.0‖) and the character encoding used to
encode the document (―UTF-8‖).

 The main content of the document is contained within the <person> element, which has
several child elements representing different aspects of the person’s information.
 The <name> element contains the person’s name, the <age> element contains the age,
and the <address> element contains the street, city, state, and ZIP code.
 The DTD can specify the properties of each of these tags, including whether they are
required or optional.
 Note that each element has a corresponding closing tag (e.g., </name>) marking the
end of the element’s content, just like HTML.
 Also note that elements can be nested inside other elements to create a hierarchical
structure, as with the <address> element in this example.
 There are several reasons why the essential concept of XML is widely used:

1. XML can be easily read by humans and parsed and processed by computers.
2. XML is not tied to any specific platform or programming language, which
makes it very flexible for data exchanges on the Internet.
3. XML is designed to be extensible. Users can define their own tags to describe
data in a way that is specific to their needs. This allows for the creation of
custom data structures that can be tailored to particular use cases.
4. XML documents can be validated against a defined schema or document type
definition (DTD). You can easily ensure that data is properly formatted and
structured to avoid errors and inconsistencies.
5. XML is used for data exchanges between systems and applications. This is
due in part to its flexibility, extensibility, and its ability to represent a wide
range of data types and structures.

Harshitha P,Asst Prof,Dept of CSE-DS Page 51

ESSENTIALS OF INFORMATION TECHNOLOGY BESC104E/204E

6. XML is used for representing data, not formatting or styling. This allows for a
clear separation between content and presentation, making it easier to reuse
data in different contexts or formats.

Harshitha P,Asst Prof,Dept of CSE-DS Page 52