MODULE 5
Introduction to HTML and Website Development: What is HTML?,
Cascading Style Sheets (CSS), Website PCC-PEC-OEC (3 Credits) template 2
2 Design and Storyboarding, Structure of a Website. Computer Graphics:
The Scope of Computer Graphics, Overview of 3D Graphics, Modeling,
Rendering.
Textbook 2: Chapter-12. Textbook 1: Chapter-10 (10.1-10.4) Overview
Introduction & History of the Web
Early Internet: Developed in the early 1970s, it originally only supported plain text and
required users to learn precise syntax commands (e.g., specific syntax to send an email).
Because of this structural complexity, the only users on the early Internet were computer
science researchers at universities.
The Turning Point (1989): This completely changed in 1989 when Sir Tim Berners-Lee
proposed and demonstrated an information management system based on hyperlinks,
allowing users to navigate simply by clicking links. By 1993, he specified the first
official version of HTML.
The Mosaic Browser: From December 1992 to March 1993, Marc Andreesen and Eric
Bina at the National Center for Supercomputing Applications (NCSA) built the Mosaic
web browser. They added the critical <img> tag to HTML to handle images. Mosaic
became the "killer application" that popularized the World Wide Web globally.
Modern Web Landscape: Today, over 5 billion people (more than 60% of the world's
population) actively use the Internet, primarily because HTML and related frameworks
have made accessing information inexpensive, intuitive, and meaningful everywhere.
What is HTML?
HTML stands for HyperText Markup Language.
It is the standard markup language used to create webpages and web applications.
HTML provides structure and content to webpages.
Browsers interpret HTML tags and display webpages.
Fundamental Web Technologies
Hypertext Markup Language (HTML)
Definition: The standard markup language used for creating webpages and core web
applications.
Role: HTML provides the underlying layout, architecture, and structural content of a
webpage, specifying exactly how text, images, hyperlinks, tables, and multimedia should be
displayed within a user's browser interface.
Mechanism: HTML wraps standard text in special structural keywords called tags (enclosed
by < and >). Tags often utilize descriptors called attributes to further configure or describe the
element's unique properties.
Cascading Style Sheets (CSS)
Definition: The standard design language used to describe and govern how HTML elements
are beautifully displayed across screen sizes, paper, phones, tablets, or other dynamic media
layouts.
Best Practice: Embedding individual visual styles inside HTML tags creates a bloated,
nightmarish maintenance experience. Best practice dictates defining all universal presentation
rules inside a standalone external .css file that is cleanly linked within the HTML head
region.
JavaScript
Definition: A programming language that lets developers supercharge basic HTML
documents with rich structural animation, user interactivity, and dynamic complex visual
effects.
The DHTML Paradigm: The collaborative unified implementation of HTML, CSS, and
JavaScript is collectively called Dynamic HTML (DHTML). Inside a modern engineering
perspective, HTML answers "What structured asset should be displayed," CSS answers "How
that structured display look visually," and JavaScript answers "How the webpage interface
interact dynamically with the user".
Structure of an HTML Page
DOCTYPE declaration specifies the HTML version.
The <html> tag defines the HTML document.
The <head> section contains metadata, title, CSS, and scripts.
The <body> section contains visible webpage content.
3. Structural Architecture of an HTML Page
Structure of an HTML Page HTML is a simple language.
It essentially encloses text within tags to tell the browser how to render the enclosed
text.
For example, the browser will render this is bold text as this is bold text. this is
italicized text will be rendered as this is italicized text.
You don’t need fancy editors to create an HTML page. You 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 structure. They contain a DOCTYPE declaration
at the top, followed by an HTML section. The HTML section \comprises of a HEAD and
BODY. Figure shows a basic example.
Structure of an HTML Page
1. DOCTYPE Declaration
The DOCTYPE declaration is the first line of an HTML document. It tells the browser which
version of HTML is being used. This helps the browser display the webpage correctly.
Example:
<!DOCTYPE html>
2. HTML Tag
The <html> tag defines the beginning and end of an HTML document. All webpage content is
written inside this tag. Closing tags contain a forward slash (/).
Example:
<html>
...
</html>
3. Head Tag
The <head> tag contains information about the webpage that is usually not visible to users. It
includes page title, meta information, CSS stylesheets, JavaScript, and search engine keywords.
Example:
<head>
<title>My Webpage</title>
</head>
4. Body Tag
The <body> tag contains all visible webpage content such as text, images, links, tables, and
forms.
Example:
<body>
<h1>Welcome</h1>
<p>This is my webpage.</p>
</body>
Elements in HTML
Webpages contain elements such as text, images, tables, links, lists, and forms. HTML uses tags
to represent these elements and create structured webpages. The text can be bold, italicized, or
displayed using different font sizes. Forms can also be created to collect user input and send data
to servers.
Paragraph Tag <p>
The <p> tag is used to define a paragraph in HTML. The browser automatically leaves space
before and after the paragraph. A paragraph may contain text, images, links, or other HTML
elements.
Example:
<p>This is a paragraph.</p>
Paragraph with Attributes
Attributes provide additional information about HTML elements. For example, the style attribute
can change the text color.
Example:
<p style="color:red;">This is a red paragraph.</p>
Heading Tags <h1> to <h6>
Heading tags are used to create titles and subheadings on webpages. <h1> is the largest heading
and is mainly used for page titles. <h2> to <h6> are used for smaller headings and subsections.
Example:
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
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 tag stands for “anchor” and allows you to add hyperlinks to an
HTML page.
Adding Images
You can add images to your HTML page with an Error! Filename not [Link]. Like the
tag, the Error! Filename not [Link] also has a required attribute, tht 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.
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>Here we use the style attribute to specify
the width and height of an image:</p>
<img src="ICT_IN_EDUCATION.jpg"
alt="Laptops in school"
style="width:500px; height:600px;">
</body>
</html>
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
tag for unordered (bulleted) lists and the
tag for ordered (numbered) lists. You can indicate the list items with the
tag and nest lists within lists (Figure 207).
Important Tags
Unordered List (<ul>) Used for bulleted lists.
Ordered List (<ol>) Used for numbered lists.
List Item (<li>) Used to add each item in the list.
Creating Tables
HTML tables are used to display structured data like:
Price lists
Student records
Club memberships
Class enrollments
Tag Meaning
<table> Creates the table
<tr> Creates a table row
<td> Creates a table cell/data
<th> Creates a table heading
<!DOCTYPE html>
<html>
<body>
<h2>Student Details</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Class</th>
<th>Marks</th>
</tr>
<tr>
<td>Rahul</td>
<td>10th</td>
<td>95</td>
</tr>
<tr>
<td>Sneha</td>
<td>10th</td>
<td>92</td>
</tr>
</table>
</body>
</html>
Creating Forms
Forms are the principal mechanism to get user inputs on webpages.
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.
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 created using the tag.
Every form also has multiple tags to specify the kind of input you want from
the user. These 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
tag. The data collected in a form is sent to the server for processing using the
action attribute of the form tag.
FIGURE: Users can create multiple forms in HTML to collect different types of input.
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
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 “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
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.
FIGURE : Date fields include inputs for the day, month, and year.
Cascading Style Sheets (CSS)
Why CSS is Used
CSS (Cascading Style Sheets) is used to make webpages look attractive and organized.
1. Adds Design and Colors
CSS changes:
• Text color
• Background color
• Fonts
• Button styles
• Borders
• Spacing
Example:
h1 {
color: blue;
}
2. Makes Webpages Attractive
HTML only creates structure.
CSS improves appearance by adding:
• Layout
• Animations
• Shadows
• Rounded buttons
• Responsive design
3. Saves Time
Instead of styling every element separately, CSS allows one style rule for many pages.
Example:
button {
background-color: green;
}
4. Keeps HTML Clean
Without CSS:
<font color="red">Hello</font>
With CSS:
<p>Hello</p>
p{
color: red;
}
5. Consistency Across Website
CSS ensures:
• Same font
• Same colors
• Same button style
• Same layout
6. Easy to Update
If you want to change website color:
• Edit only one CSS file
• Entire website updates automatically
7. Supports Different Devices
CSS helps webpages work properly on:
• Mobile phones
• Tablets
• Laptops
• TVs
HTML vs CSS
HTML = Structure of webpage
CSS = Design of webpage
External CSS
External CSS means writing all styling code in a separate .css file
and linking it to the HTML document.
This helps in keeping HTML code clean and organized.
Syntax of External CSS
CSS File
selector {
property: value;
}
Example:
h1 {
color: blue;
}
Linking CSS to HTML
External CSS is connected to HTML using the <link> tag inside the <head> section.
<link rel="stylesheet" href="[Link]">
Save Figure 216 as [Link] then run Figure 217
Website Design and Storyboarding
Introduction to Website Development
A website is a collection of interconnected webpages designed to accomplish a
specific purpose. These webpages are linked together through hyperlinks, allowing
users to navigate smoothly from one page to another. Websites are widely used for
communication, education, business, entertainment, and information sharing.
Examples of websites include school websites, company websites, blogs, e-
commerce platforms, and search engines like Google.
Working of a Website
When a user enters a website address such as:
[Link]
the request is sent to a server. A server is a computer system that stores website
files and delivers webpages to users through the internet.
Websites contain:
Multiple webpages
Databases
Application programs
Hyperlinks
These components work together to provide a seamless browsing experience.
For example:
1. User searches for a book on Google.
2. Google displays search results.
3. Clicking a result opens another webpage.
4. The entire process is managed by interconnected webpages and
applications.
Need for Website Planning
Website development is a resource-intensive process involving:
Planning
Designing
Development
Testing
Deployment
Just like constructing a building requires a blueprint, developing a website also
requires proper planning before implementation.
Without planning:
Navigation becomes confusing
User experience becomes poor
Website maintenance becomes difficult
Therefore, developers use storyboards and wireframes before actual development.
Storyboards
Storyboards are visual representations of website ideas and user interactions.
They help developers:
Understand website flow
Identify user requirements
Visualize webpage sequence
Improve user experience
Storyboards provide a high-level overview of how users move through the
website.
Advantages of Storyboards
1. Helps organize website structure
2. Improves communication among team members
3. Identifies user interaction flow
4. Reduces development errors
5. Saves development time
Wireframes
Wireframes are simple sketches or layouts of webpages showing:
Placement of elements
Navigation menus
Headers
Content areas
Buttons and interactions
Wireframes do not include:
Colors
Graphics
Typography
Styling
They focus only on webpage structure and functionality.
Purpose of Wireframes
Wireframes help:
Plan webpage layout
Improve usability
Identify design issues early
Simplify website development
Wireframes are generally created during the planning phase.
Difference Between Storyboards and Wireframes
Storyboards Wireframes
Focus on user flow and storytelling Focus on webpage structure
Visual representation of interactions Layout representation
High-level overview Detailed page arrangement
Used before wireframing Used after storyboarding
Wireframing Tools
Several tools are available for wireframing. One popular tool is: Balsamiq
Balsamiq is a wireframing software used to quickly create webpage layouts using
drag-and-drop components.
Features:
Easy to use
Provides templates
Supports browser and mobile app design
Useful for team collaboration
Importance of Website Design
A good website should be:
Easy to navigate
User-friendly
Responsive
Organized
Visually appealing
Proper planning through storyboards and wireframes helps developers create
effective websites.
Structure of a Website
A website is made up of multiple webpages, files, folders, images,
stylesheets, and scripts organized in a proper structure. This structure
helps users navigate easily and helps developers manage the website
efficiently.
1. Webserver
To make a website available on the Internet, it must be stored on a
webserver.
A webserver:
Stores website files
Receives user requests
Sends webpages to browsers
Example:
Apache Webserver
When a user enters a website address in the browser, the request goes to
the webserver, and the server sends the required webpage.
2. Root Folder
The main folder of a website is called the Root Folder.
It contains:
HTML files
CSS files
JavaScript files
Images
Fonts
Other resources
Usually, the homepage file is named:
[Link]
This file loads automatically when users visit the website.
3. Website Folder Structure
A website uses separate folders for better organization.
Example structure:
Root Folder
│
├── [Link]
├── css
│ └── [Link]
├── js
│ └── [Link]
├── images
│ └── [Link]
├── fonts
└── libraries
4. Purpose of Different Folders
Folder Purpose
css Stores stylesheets
js Stores JavaScript files
images Stores pictures and graphics
fonts Stores font files
libraries Stores reusable libraries
5. Functional Website Organization
Large websites are divided into sections.
Example:
[Link]/
[Link]/about/
[Link]/contact/
[Link]/services/
Each section may have its own:
[Link]
When a user clicks a submenu, the corresponding webpage loads.
6. Importance of Proper Website Structure
Advantages:
Easy navigation
Better maintenance
Faster development
Improved user experience
Search engines can index pages easily
7. Content Management System (CMS)
A CMS helps manage website content using a graphical interface.
Examples:
WordPress
Joomla
Drupal
CMS allows users to:
Add webpages
Upload images
Edit content
Manage files easily
8. Hosting a Website
Hosting means storing website files on an Internet-connected server.
A hosting provider offers:
Server space
Security
Backup
Technical support
Internet connectivity
After hosting, users can access the website using a domain name.
Example:
[Link]
9. Domain Name
A domain name is the website address users type in browsers.
Examples:
[Link]
[Link]
The domain name is connected to the server using DNS (Domain Name
System).
10. Hosting from Home Computer
A website can also be hosted from a personal computer.
Requirements:
Permanent IP address
Domain registration
24/7 Internet connection
Security protection
Regular backup
Because this is complex, most people use hosting providers.
11. Popular Hosting Providers
Some common hosting providers are:
GoDaddy
Bluehost
HostGator
SiteGround
Wix