Scribd
Upload
3 views18 pages

Module 5-1

Uploaded by

harsha831094
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views18 pages

Module 5-1

Uploaded by

harsha831094
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Module 5

Part 1: Introduction to HTML and Website Development

1. What is HTML?

HTML, which stands for Hypertext Markup Language, is the standard markup language used
for creating webpages and web applications. A markup language is a computer language that
applies layout and formatting conventions to a text document. HTML makes text on webpages
more interactive and dynamic by allowing developers to specify the placement of images,
tables, links, and other elements using simple text descriptions. It provides the structure and
content of a webpage, dictating how text, images, hyperlinks, tables, and other media should
be displayed in a browser.

The Google homepage is an example of an HTML Users can view the webpage source to see the websites
page HTML text. The HTML test in the bottom image is
crucial to the operation and display of Googles web
browser.

The term "hypertext" means "text within text." On the World Wide Web, hypertext refers to
text that contains a link to another page. It is the Internet's mechanism for connecting two or
more webpages (HTML documents) with each other.

HTML has been an Internet standard since 1993, and all major browsers including Google
Chrome, Apple Safari, Microsoft Internet Explorer, and Mozilla Firefox understand and render
it. This means that when any page written in HTML is visited on any browser, all browsers
receive the same text and render the page identically.
Structure of an HTML Page

HTML is built around the concept of


tags. A tag is a special keyword
enclosed by angle brackets (< >). Tags
are used to enclose text and tell the
browser how to render that content.
Tags are closed using the / symbol, so
</html> marks the end of the section
that began with <html>. All HTML
pages follow the same basic structure,
starting with a DOCTYPE declaration
at the top, followed by an HTML
section that comprises a HEAD and a
BODY. The basic structure of an HTML page includes the
DOCTYPE, HEAD, and BODY

• DOCTYPE Declaration: The very first line of any HTML page. It tells the browser
what kind of document to expect and which version of HTML is being used.

• HTML Tag: Defines the start and end of the entire HTML document. All code in the
document is nested within the opening <html> and closing </html> tags.

• Head Tag: Contains information about the HTML document that is mostly not
displayed to the user. This includes the page title, meta information (such as author
details and version history), stylesheets for look and feel, and JavaScript for user
interactions. The only content from the head visible to the user is the title tag, which
appears as the browser tab title.

• Body Tag: Contains all the content that is actually displayed to the user like text,
images, links, and other HTML elements. Most of a developer's time building an HTML
page is spent within the body.

Elements in HTML

Webpages contain a wide variety of content like text, images, tables, links, and forms. Each of
these can be represented using specific HTML tags.

The paragraph tag (<p>) defines a block of text as a paragraph, displaying it with a line break
before and after. Attributes can be added to modify the paragraph's style, such as changing the
text color.
Using <p> tag creates a paragraph

Heading tags (<h1> through <h6>) provide six levels of structure, with <h1> representing the
main page heading and the remaining levels used for subheadings. It is best practice not to skip
heading levels. Other common text-formatting tags include <b> for bold, <u> for underline,
<del> or <strike> for strikethrough text, and <sub> and <sup> for subscript and superscript
respectively.

Heading tags are used for separating titles and subheadings

Strikethrough tags are useful for visualizing test that is no longer relevant

Subscript tags are useful when displaying chemical formulas

Hyperlinks are added using the anchor tag <a>, which stands for "anchor." The href attribute
specifies the URL of the target page. When rendered in a browser, the link text becomes
clickable and navigates the user to the specified URL.
An anchor tag allows users to link web addresses

Images are added using the <img> tag. A required src attribute provides the location of the
image file, while optional width and height attributes control the display size on the page.
Images play an important role in drawing visitor attention, making company logos and
background images key design elements.

Users can add images and adjust the image size in HTML

Lists in HTML can be unordered (bulleted) using <ul> or ordered (numbered) using <ol>.
Individual list items are marked with the <li> tag, and lists can be nested within other lists for
hierarchical structure.
Nested lists using bulleted or numbered lists in HTML make it easy for users to identify sections

Tables are created using the <table> tag and are used to display structured data such as price
lists or membership records. The <tr> tag defines a table row, <td> defines individual cells
within a row, and <th> defines table headers, which are typically bolded and centered.

Users can create tables in HTML to help organize data

Forms are the primary mechanism for collecting user input on webpages. They are created
using the <form> tag, which contains multiple <input> tags that define the types of data to be
collected — including text, numbers, files, and images. When a user submits a form, the data
is sent to a server for processing or storage using the action attribute of the form tag. Common
input elements include text fields, textareas for multi-line input, dropdown menus created using
the <select> tag, radio buttons for single-choice selections, checkboxes for multiple selections,
and date pickers that trigger a browser calendar. Forms are widely used for login and
registration, search, contact, feedback, and e-commerce checkout.

Users can create multiple forms in HTML to collect different types of input
Using the select tag, users can create dropdown menus in HTML

Similar to actual radio buttons, even HTML radio buttons can only allow one input at a time, clearing the
previous options

Users can create checklists in HTML by using the checkbox element

Date fields include inputs for the day, month and year

2. Cascading Style Sheets (CSS)


While HTML defines the structure and content of a webpage, CSS (Cascading Style Sheets) is
the standard technology used to control how HTML elements are visually presented on screens,
phones, tablets, and in print. CSS saves developers significant time by allowing the layout and
styling of multiple webpages to be controlled from a single file.
Without CSS, developers would need to add styling
attributes like <font> and <color> directly to each
HTML element. This creates an inconsistent, difficult-
to-maintain codebase. If the color scheme or font style
of a site needed to change, every single element on
every page would need to be updated individually.

The best practice is to define all styles in a separate


CSS file and link it to the HTML document using a
<link> tag in the HTML head section. This ensures
that all similar elements across the site such as every
"Submit" button or every heading share consistent
sizing, color, and font. CSS can be applied directly
within an HTML document using the <style> tag in
the head, or externally as a linked .css file. A CSS rule
targets an HTML element (such as body, h1, or p) and
defines properties such as background-color, color,
font-family, and font-size.

Utilizing style in HTML allows users to


personalize webpages. HTML (top) and its result
(bottom)

3. Website Design and Storyboarding

A website is a collection of individual webpages that together accomplish a specific purpose.


When a user visits a website, servers owned by the hosting provider respond to the request by
delivering the relevant webpages. These pages are linked to one another through weblinks,
enabling a seamless browsing experience.

Building a website is a resource-intensive process that requires careful planning. Just as one
would not begin constructing a building without architectural plans, a website should not be
built without a design plan. The recommended approach is to begin with storyboards and then
move on to wireframes.

Storyboards are visual representations of a creative project. In the context of website


development, they help all members of a development team identify the users of a website and
their expected interactions. Storyboards focus on storytelling and the high-level flow of the
user experience. They originated in film and drama but have become an essential tool in web
development. For large-scale projects, storyboarding should always precede wireframing.
Wireframes are illustrations of a webpage that focus on the spatial arrangement of elements
and their intended behaviors. They deliberately exclude styling, color, and graphics, instead
using simple boxes and lines to represent headers, navigation menus, content sections, and calls
to action. Wireframes are created during the planning phase to help designers and developers
identify potential usability and design issues early before any code is written.

Tools such as Balsamiq and Figma are popular for wireframing. Balsamiq allows teams to
quickly develop wireframes and share them for feedback before committing development
resources. Figma goes further by enabling collaboration and automatically converting
wireframe designs into working HTML websites ready for deployment.

Software like Balsamiq allows users to design outlines of webpages without committing to code

4. Structure of a Website

Once a developer has learned HTML and CSS and has planned their site using storyboards and
wireframes, they can move toward building and hosting the actual website. Understanding the
structure of a website is essential for organizing files and ensuring smooth navigation.

A website requires a webserver, a computer connected to the Internet that stores and delivers
webpages to users who request them through their browsers. All HTML pages and supporting
files must be saved in an organized folder structure on the webserver. The starting point of any
website is the Root folder. By convention, a file named [Link] in the root is displayed by
default when a user visits the site without specifying a particular page.

Within the root folder, it is standard practice to maintain separate subfolders for different asset
types such as CSS stylesheets, JavaScript files, images, fonts, and common libraries. Each
major section or submenu of the website typically corresponds to a named subfolder containing
its own [Link] file. This structure makes the site easy to navigate, maintain, and index for
search engines. Many websites also use a Content Management System (CMS), a graphical
interface that helps organize and manage website files and content.
Wireframes allow users to visualize projects, Webserver folders structures vary depending on the
dependencies, and structure in the planning phase. content and purpose of the website.

Concept and folder diagrams help users plan how to develop their websites and content

Hosting a Website:

Hosting a website means making it accessible to the public over the Internet by storing its files
on a webserver. When a user hosts a website, they essentially rent server space from a web
hosting company or provider. The hosting company provides services such as server
maintenance, security, and technical support to ensure the website remains accessible and runs
reliably.

Popular web hosting providers include GoDaddy, Bluehost, SiteGround, HostGator,


DreamHost, A2 Hosting, InMotion Hosting, and Wix. While it is technically possible to host a
website from a personal home computer by obtaining a permanent IP address, purchasing a
domain name, and maintaining reliable uptime, this adds considerable complexity and
responsibility, making commercial hosting providers the preferred choice for most users.

Website Editors

There are several ways to build HTML pages. One approach is to write HTML code entirely
from scratch. Another is to use a wireframing tool like Figma that can convert a design directly
into HTML code. A third and widely used approach is to use a WYSIWYG (What You See Is
What You Get) editor. WYSIWYG editors allow users to create and edit webpages without
writing HTML code directly. Users drag and drop elements such as images and tables onto a
canvas and see the page as it will appear in a browser in real time.
WYSIWYG editors are especially popular among non-technical users such as bloggers, content
creators, and small business owners. Free options include Brackets (from Adobe), the Phoenix
code editor, and SeaMonkey (from the Mozilla community). Commercial options include
Adobe Dreamweaver. Hosting platforms like Wix and Google Sites also offer built-in
WYSIWYG builders that allow users to publish a website with a single click, without ever
writing or editing code.

Similar to Wix and other providers, Google Sites allows users to host and build websites

Part 2: Computer Graphics

1. The Scope of Computer Graphics

Computer graphics is the branch of computer science that applies computer technology to the
production and manipulation of visual representations. It encompasses a wide range of topics
including the presentation of text, the construction of graphs and charts, the development of
graphical user interfaces, the manipulation of photographs, the production of video games, and
the creation of animated motion pictures. While the term has a broad interpretation, it is
increasingly used to refer specifically to the field of 3D graphics.

With the emergence of digital cameras, software for manipulating digitally encoded images has
expanded rapidly. Such software enables users to touch up photographs by removing blemishes
and correcting "red eye," as well as cutting and pasting portions from different photographs to
create composite images. Similar techniques are used in the motion picture and television
industries to create special effects such as removing support wires, overlaying multiple images,
or inserting new sequences that alter the originally captured action. These applications were
major driving forces behind the shift from analog film to digitally encoded images.

In addition, a wide variety of utility and application software packages assist in producing two-
dimensional images, from simple line drawings to sophisticated artwork. At a minimum, such
programs allow users to draw dots and lines, insert geometric shapes, fill regions with color,
and cut and paste portions of drawings.

2D Graphics vs. Image Processing vs. 3D Graphics


All applications dealing with flat, two-dimensional shapes and images fall into two related
fields. 2D graphics focuses on the task of converting two-dimensional shapes such as circles,
rectangles, and letters — into patterns of pixels to produce an image. Image processing, on
the other hand, focuses on analyzing the pixels in an image in order to identify patterns that
can be used to enhance or "understand" the image. In short, 2D graphics is concerned with
producing images while image processing is concerned with analyzing them.

In contrast, 3D graphics deals with converting three-dimensional shapes into images. The
process involves constructing digitally encoded versions of three-dimensional scenes and then
simulating the photographic process to produce images of those scenes. Unlike traditional
photography, in which the scene being photographed is a physical reality, 3D graphics involves
photographing "virtual worlds" scenes that exist only as collections of data and algorithms.
Creating an image using 3D graphics involves two distinct steps: the creation, encoding,
storage, and manipulation of the scene to be photographed (a creative, artistic process), and the
actual production of the image (a computationally intensive process).
The ability of 3D graphics to produce photographs of virtual scenes makes it ideal for
interactive video games and animated motion picture productions. In a video game, the player
interacts with an encoded three-dimensional virtual environment, and the images the player
sees are produced by 3D graphics technology. Animated motion pictures are created similarly,
except that it is the human animator who interacts with the virtual environment. The final
product distributed to the public is a sequence of two-dimensional images.

2. Overview of 3D Graphics

The complete process of creating and displaying images in 3D graphics consists of three steps:
modeling, rendering, and displaying.

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 entirely from digitally
encoded data and algorithms. As a result, the scene may never exist in physical reality.
The rendering step involves producing a two-dimensional image of the scene by computing
how the objects would appear in a photograph taken by a camera at a specified position.
Rendering applies the mathematics of analytic geometry to compute the projection of objects
in the scene onto a flat surface called the projection plane in a manner analogous to a camera
projecting a scene onto film. The type of projection used is a perspective projection, in which
all objects are projected along straight lines called projectors that extend from a common point
called the center of projection (or view point). This differs from a parallel projection, in which
projectors are parallel. A perspective projection produces a result similar to what the human
eye sees, whereas a parallel projection produces a true profile useful in engineering drawings.

The 3D graphics paradigm

The restricted portion of the projection plane that defines the boundaries of the final image is
called the image window analogous to the rectangle seen in a camera's viewfinder. Once the
relevant portion of the scene is identified, the appearance of each pixel in the final image is
computed. This pixel-by-pixel process is computationally complex because it requires
determining how objects interact with light a hard, shiny surface in bright light must be
rendered differently from a soft, transparent surface in indirect light. The rendering process
draws heavily from fields such as material science and physics.

As the appearance of each pixel is determined, the results are stored collectively as a bitmap
representation of the image in a storage area called the frame buffer. This buffer may be an
area of main memory or, in hardware designed specifically for graphics, a block of special-
purpose memory circuitry.

Finally, in the displaying step, the image stored in the frame buffer is either displayed for
viewing or transferred to permanent storage for later display. In motion picture production,
images may be stored and modified before final presentation. In interactive video games or
flight simulators, images must be displayed in real time as they are produced a constraint that
often limits image quality. This is why the graphics quality of full-feature animated motion
pictures exceeds that of interactive video games.

3. Modeling

A 3D computer graphics project begins much like a theatrical stage production, a set must be
designed and props collected or constructed. In computer graphics terminology, the set is called
a scene and the props are called objects. A 3D graphics scene is virtual because its objects are
constructed as digitally encoded models rather than tangible physical structures.
Modeling Individual Objects

The degree to which a software model of an object accurately reflects the true properties of that
object depends on the requirements of the situation. More detail is needed for foreground
objects than background objects, and more detail can be achieved when there are no strict real-
time constraints. As a general rule, more precise models lead to higher-quality images but
longer rendering times.

Shape, the shape of an object in 3D graphics is typically described as a collection of small flat
surfaces called planar patches, each shaped like a polygon. Collectively, these polygons form
a polygonal mesh that approximates the shape of the object. The planar patches are often
triangles, since a triangle can be represented by its three vertices the minimum number of points
required to identify a flat surface in three-dimensional space.

A polygonal mesh for a mesh A Bezier curve

A polygonal mesh can be obtained in several ways. One approach starts with a precise
geometric description of the desired shape (such as a mathematical equation for a sphere) and
uses it to construct the mesh. More general shapes can be described using Bezier curves, a
technique developed by Pierre Bezier in the early 1970s that allows a curved line segment to
be defined by a small number of control points. Two control points mark the ends of the curve
segment, while others determine how the curve is distorted. Bezier curves can be extended to
describe three-dimensional surfaces known as Bezier surfaces, which serve as an efficient
starting point for constructing polygonal meshes of complex surfaces.

Another approach is digitizing, building a physical model of the object and recording the
location of points on its surface by touching it with a pen device that records its position in
three-dimensional space. The collected points are then used as vertices for a polygonal mesh.

For complex shapes that defy elegant mathematical description such as trees, mountain ranges,
clouds, or fire. polygonal meshes can be generated by writing programs that construct the
desired shape automatically. These programs are collectively called procedural models. A
procedural model is a program unit that applies an algorithm to generate a desired structure.
For example, mountain ranges can be procedurally generated by repeatedly subdividing
triangles and randomly displacing their midpoints. Trees can be grown from branching rules
analogous to grammatical rules. Another method uses particle systems, which simulate an
object as a large collection of particles governed by predefined rules, and are used to model
phenomena such as sloshing water, fire flames, clouds, and crowd scenes.

Growing a polygonal mesh for a mountain range

Surface Characteristics, A polygonal mesh captures only the shape of an object. Additional
surface properties are needed to produce realistic renderings. One approach is to encode the
color of the original object at each vertex in the mesh, which can then be used during rendering
to recreate the object's appearance. Another widely used technique is texture mapping, which
is similar to applying wallpaper it associates a predefined two-dimensional image (such as a
photograph of stone masonry or wood grain) with the surface of an object. The rendering
process then maps the image onto the surface so that each point on the object takes on the
appearance of the corresponding point in the texture image. Texture mapping works best on
relatively flat surfaces and is widely used in real-time applications such as interactive video
games.
The pursuit of realism in modeling is an active area of research, particularly for materials
associated with living characters such as skin, hair, fur, and feathers. For example, researchers
have incorporated the degree to which light penetrates layers of skin to produce more realistic
skin models, and some have modeled individual strands of hair to capture translucency, texture,
draping, and response to wind. Similarly, detailed models of cloth have been constructed using
weaving patterns, yarn properties, and physics to produce extremely realistic close-up images.

Modeling Entire Scenes


Once all objects in a scene have been digitally encoded, they are each assigned a location, size,
and orientation within the scene. This collection of information is linked into a data structure
called a scene graph. The scene graph also contains links to special objects representing light
sources and a camera object recording the camera's location, orientation, and focal properties.
It is analogous to a traditional photography studio setup, containing everything that will
contribute to the final photograph except that all objects are digitally encoded representations
rather than physical objects.

The position of the camera within the scene determines the level of detail needed for foreground
versus background objects. In applications where the camera moves, object models may need
to dynamically adjust their level of detail. The scene graph marks the boundary between the
artistic modeling process and the computationally intensive rendering process. Once it is
complete, the graphics task becomes that of computing projections, determining surface details,
and simulating light tasks that are largely independent of the specific application.

4. Rendering
Rendering is the process of determining how the objects in a scene graph would appear when
projected onto the projection plane. The dominant approach used in most consumer graphics
systems including video games and home computers is the rendering pipeline, a well-
established sequence of steps: clipping, scan conversion, hidden-surface removal, and shading.

Light-Surface Interaction

Since the appearance of an object is determined by the light it emits, rendering ultimately
requires simulating the behavior of light. Depending on its material properties, an object's
surface may absorb light, reflect it, or refract it.

Reflection, When a ray of light strikes a flat opaque surface, it reflects at an angle equal to the
incidence angle, both measured relative to the normal (a line perpendicular to the surface). If
the surface is smooth, parallel rays from the same source reflect in essentially the same
direction, producing specular light, the bright highlights visible on shiny surfaces. Because
specular light has minimal contact with the surface, it tends to portray the color of the original
light source rather than the object. When a surface is rough, light rays scatter in different
directions, producing diffuse light. Diffuse light is visible from a wide range of directions and
tends to portray the color of the object because it has prolonged contact with the surface. In
addition, ambient light stray, scattered light not associated with any particular source or
direction illuminates surfaces facing away from the main light source, making them appear as
a uniform dark color.

Reflected light Specular versus diffuse light Refracted light


Some surfaces exhibit anisotropic behavior, where the ratio of specular to diffuse light varies
depending on the direction of the incoming light, causing the surface's appearance to shift from
shiny to dull as it is rotated. Examples include satin fabric and the cut-grass patterns on an
athletic field. Surfaces with symmetric reflection patterns are called isotropic.
Refraction, when light strikes a transparent object, it passes through the surface and its
direction is altered a phenomenon called refraction. The degree of bending is determined by
the refractive index of the materials involved, which is related to material density. A ray
entering a denser material bends toward the normal; entering a less dense material, it bends
away. Rendering software must know both the refractive indexes of materials and which side
of each surface represents the inside versus outside of an object in order to correctly simulate
transparent objects.

Clipping, Scan Conversion, and Hidden-Surface Removal


The rendering pipeline begins by identifying the view volume the region of three-dimensional
space that can be seen by the camera. It is the pyramidal space defined by straight lines
extending from the center of projection through the corners of the image window. Objects
entirely outside the view volume are discarded. The remaining objects are trimmed by clipping,
which slices off the portion of each planar patch that lies outside the view volume.

Identifying the region of the scene that lies The scan conversion of a triangular patch
inside the view volume
Next, scan conversion (also called rasterization) identifies the points on the remaining planar
patches that correspond to pixel positions in the final image. This is done by extending
projectors from the center of projection through each pixel position in the image window and
identifying where those projectors intersect the planar patches. The more pixels an image has,
the finer detail can be captured. A limitation of scan conversion is that features falling between
pixel positions will not appear in the final image.

When multiple patches project into the same area of the image, the rendering process must
determine which object is in the foreground. This is the problem of hidden-surface removal.
A specific version called back face elimination discards those patches in a polygonal mesh
that face away from the camera. For more general cases, a popular solution uses a z-buffer
(depth buffer) an extra storage area with one entry per pixel that records the distance from the
camera to the currently rendered object. When a new point is considered, its distance is
compared to the z-buffer value: if it is closer, it is rendered and the z-buffer is updated; if it is
farther, it is ignored. This ensures that foreground objects always override background objects.

Shading
Once a point on a planar patch has been identified for inclusion in the final image, shading
determines the appearance of that point by computing the characteristics of light projected
toward the camera from that point. This depends on the orientation of the surface, which
governs the degree of specular, diffuse, and ambient light seen by the camera.
Flat shading is the simplest approach, treating each planar patch as a uniformly flat surface
and using the orientation of the whole patch to shade every point on it. The result is a faceted
appearance rather than a smooth, realistic surface. To produce a smoother result, more
advanced techniques estimate the true orientation of the original surface at each individual
point. This begins with normal vectors at the vertices of the polygonal mesh arrows pointing
perpendicularly outward from the original surface at each vertex.

A sphere as it might A conceptual view of a polygonal mesh with A sphere as it might appear
appear when rendered by normal vectors at its vertices when rendered using bump
flat shading mapping

Gouraud shading converts the orientation data at vertices into color information and then
interpolates that color across the interior of each patch. Phong shading instead interpolates the
surface orientation data itself across the interior and only then converts it into color
information. As a result, Phong shading is more likely to correctly detect specular highlights
within a patch's interior because it is more responsive to changes in surface orientation.
A further enhancement is bump mapping, which adds small random variations to the apparent
surface orientation during shading, making a surface appear rough or textured without altering
the underlying polygonal mesh geometry.

Rendering-Pipeline Hardware

The rendering pipeline clipping, scan conversion, hidden-surface removal, and shading has
been implemented directly in electronic circuitry, miniaturized using VLSI technology to
produce chips capable of rendering millions of planar patches per second. This hardware is
incorporated into dedicated graphics systems such as video game machines, and can be added
to general-purpose computers in the form of a graphics card (or graphics adapter). Standard
software interfaces such as OpenGL (Open Graphics Library, developed by Silicon Graphics)
and Direct3D (developed by Microsoft) serve as intermediaries between graphics hardware
and application software, allowing standardized commands to be translated into hardware-
specific instructions.

A significant limitation of the rendering pipeline is that it implements a local lighting model,
meaning each object is rendered independently of other objects in the scene. Light interactions
between objects such as shadows cast by one object onto another, or reflections in mirrors are
not captured. This contrasts with a global lighting model, in which interactions among objects
are considered. However, clever workarounds exist within the local model: for example, drop
shadows can be simulated by creating a flattened, darkened copy of an object's mesh and
placing it on the ground, making it appear as a cast shadow without requiring global lighting
calculations.

You might also like