Unit 3: Web Development (Key Exam Points)
1. World Wide Web (WWW)
· Purpose: Makes it easier to share information and data in many formats (documents, pictures,
audio, video).
· Key Features:
· Links and Tags: Enable sharing and searching for related information (especially with social
media).
· Dynamic Nature: Allows content to change for individuals or groups (e.g., customized data
after login).
2. Basic Definitions
· Webpage: A single document accessible through the Internet.
· Website: A set of related webpages.
· Example: A news website has different sections, each with its own webpages.
· Homepage: The main or starting page of a website.
3. Accessing the Web
· Web Browser: Software used to access and view webpages (e.g., Chrome, Firefox).
· URL (Universal Resource Locator): The address of a document on the web. You type this into
a browser to access a specific webpage.
4. Search Engines
· Purpose: Used to find information when you don't know the exact URL.
· How they work: They search for relevant information based on keywords you enter.
· Output: They display a list of results containing the website address (URL) and a snippet of
content from each site.
5. Web Hosting
· Requirement: Websites and their pages must be uploaded to a web server.
· Web Hosting Service: Provides these servers that are available 24/7 (round the clock) so users
can always access the website.
6. Core Web Technology
· HTML (HyperText Markup Language): The primary language used for basic website
development.
· Importance: Even when using templates/software, basic HTML knowledge is necessary for
customization.
3.1.2 Web Application
· Definition: A computer program that offers a service or executes tasks via a web browser and
internet connection by remotely accessing a server.
· Key Characteristics:
· Interactive: Users can perform tasks and manipulate data (e.g., a CRM system handling
retail, supplies, promotions, feedback).
· Client-Server Architecture: The user's browser (front-end) interacts with a remote server
(back-end).
· Backend Complexity: The backend can consist of:
· Multiple servers (each dedicated to a specific type of task).
· A single server (handling all requests).
· Transparency: The complex architecture is hidden (transparent) from the normal user, who
only sees the updated front-end.
3.1.3 Website Development
· Primary Purpose: To establish a presence in the digital world and share information and
content.
· Key Characteristics:
· Static & Non-Interactive: Viewers cannot change or manipulate the content; they can only
view it.
· Structure: A website can be a single page or have multiple pages linked together (e.g., a
main page, a separate page for a photo album).
· Example Use Case: A personal website to highlight hobbies, activities, passions, ambitions,
and achievements.
3.1.5 Dynamic Website
· Definition: A website where information changes or adjusts based on user input, choice, or
other factors.
· Purpose: To make a site more engaging so that:
· Visitors return frequently.
· Visitors stay on the site longer (e.g., through promotions, personalized content).
· How it's Achieved: Dynamicity is implemented using scripts and server-side programming
languages like:
· JavaScript, Python, PHP, ASP.Net
· Example: An online store where:
· Members can customize their page based on their interests.
· Non-members/Visitors see a standard, non-changing page.
3.1.6 Front-End Development
· What it is: The development of the Graphical User Interface (GUI) that a user views and
interacts with directly in their browser.
· Core Technologies: Built using HTML, CSS, and JavaScript.
· Role: The person who develops this part of the website is called a 'Front-end Developer'.
3.1.7 Back-End Development
· What it is: The development that handles the server-side communication. It manages user
requests sent from the front-end, processes them, and sends the results back to be displayed.
· Function: It acts as a bridge between the front-end (user interface) and the server/database.
· Technologies: Requires knowledge of server-side programming languages like:
· JavaScript (Node.js), Python, PHP, ASP.Net
· Role: The person who writes this code is called a 'Back-end Developer'.
· Skill Level: The text states that back-end development requires more knowledge and skill level
than front-end development.
1. Basic Structure of HTML
· HTML is a tag-based language.
· Tags are enclosed in angle brackets: < and >.
· A starting tag is written as <tag>.
· An ending tag includes a forward slash: </tag>.
· The content between the start and end tags is affected by the tag's function.
· HTML files have the extension .html.
2. The Main Structural Tags (Crucial)
Tag Purpose & Description
<html> ... </html> The root element that wraps the entire HTML document. Everything inside is
recognized as HTML code. The lang attribute (e.g., lang="en") defines the page's language.
<head> ... </head> The container for meta-information about the webpage. Its content is not
displayed on the page itself. It includes things like the title, links to CSS, and character sets.
<title> ... </title> Defines the title of the webpage, which is shown on the browser's tab. This is
placed inside the <head> section. It helps identify the page when multiple tabs are open.
<body> ... </body> Contains all the visible content of the webpage that users see and interact
with (e.g., text, images, links).
3. Example Code Structure (How it all fits together)
This is the fundamental skeleton of every HTML document:
```html
<!- Start of the HTML document, Language is English ->
<html lang="en">
<!- Head section containing meta information ->
<head>
<title> Title-comes-here </title> <!- Title of the webpage ->
</head>
<!- Body section where webpage content is placed ->
<body>
This text is in the body section
</body>
</html>
<!- End of the HTML document ->
4. Other Important Tags Mentioned
· <br>: A self-closing tag used for a line break.
· <strong> ... </strong>: Used to make text bold. (Note: <b> is also used for bold, but <strong>
has semantic importance for screen readers).
Summary for Quick Revision
1. <html> is the root of the document.
2. <head> holds hidden information (like the <title>).
3. <body> holds all the visible content.
4. Tags define elements and are written inside < >.
5. Most tags need an opening <tag> and a closing </tag> pair
1. The <body> Tag
· Purpose: The <body> tag contains all the main content of the HTML document that is visible to
the user in the browser window.
· Everything you see on a webpage (text, images, links, etc.) is placed inside the
<body>...</body> tag pair.
2. Heading Tags (<h1> to <h6>)
· Purpose: Used to define headings and subheadings, creating a hierarchy for your content.
· Levels: There are 6 levels of headings, from <h1> (the largest and most important) to <h6>
(the smallest).
· Usage: They help structure your document and are crucial for accessibility (e.g., screen
readers use them to navigate).
· Example:
```html
<h1>Main Title</h1> <!- Largest ->
<h2>Chapter Title</h2>
<h3>Subsection Title</h3>
<h6>Smallest Heading</h6> <!- Smallest ->
```
3. The Line Break Tag (<br> or <br/>)
· Purpose: To force text onto a new line. It creates a line break within text.
· Important Note: HTML ignores actual line breaks you type in your code. To split text onto a
new line in the browser, you must use the <br> tag.
· Example:
```html
This is the first line.<br>
This is the second line on a new line.
```
Complete Code Example (Putting It All Together)
The provided code shows how these tags work together to create a simple webpage.
```html
<html lang="en">
<head>
<title>Heading Example</title> <!- Title shown on browser tab ->
</head>
<body>
<!- All visible content is inside the body tag ->
<h1>Welcome to My Website</h1> <!- Main heading (Largest & most important) ->
<h2>About Us</h2> <!- Subheading under main heading ->
<h3>Our Team</h3> <!- Further subheading ->
<h4>Team Members</h4> <!- Even smaller subheading ->
<!- Example using a line break ->
This is the first sentence.<br>
This second sentence will appear on a new line.
</body>
</html>
```
Output in Browser:
· The browser tab will show: "Heading Example"
· The webpage will show the headings in descending sizes, followed by the two lines of text
separated by a line break.
Activity: Create Your Webpage
Task: Create a webpage with the heading 'My First Webpage' and a paragraph introducing
yourself.
Sample Solution Code:
```html
<html>
<head>
<title>My Introduction</title>
</head>
<body>
<h1>My First Webpage</h1>
<p>Hello! My name is [Your Name]. I am learning HTML and this is my first webpage. I am
excited to share my interests and achievements here.</p>
</body>
</html>
<span> vs. <div>
· <span>: An inline element. Use it to style a small part of text inside a line.
· <div>: A block-level element. Use it to group large blocks of content or multiple elements. It
creates a "box" that takes up the full width available.
<i> vs. <em>
· <i>: Purely for visual italics (e.g., a foreign word, a thought).
· <em>: For semantic emphasis. It changes the meaning of the sentence for accessibility tools.
<b> vs. <strong>
· <b>: Purely for visual bold text.
· <strong>: For semantic importance. It indicates that the text is of strong importance.
Image Tag (<img>)
· Purpose: To insert an image into a webpage.
· Key Attributes:
· src (source): This is the most important attribute. It defines the path (location) and filename of
the image.
· alt (alternative text): Provides a text description of the image. This is crucial for:
· Accessibility (screen readers for the visually impaired).
· Displaying if the image fails to load.
· Search Engine Optimization (SEO).
· width and height: Can be used to specify the dimensions of the image in pixels. If omitted, the
image loads in its actual size.
Key Concept: The <img> tag is a self-closing tag, meaning it does not have a separate closing
tag.
Key Points on Bullets and Numbering in HTML
HTML provides two main types of lists for organizing content: unordered lists and ordered lists.
An unordered list is created using the <ul> tag pair. This type of list presents items with bullet
points. The default bullet style is a disc, but it can be changed to a circle or a square.
An ordered list is created using the <ol> tag pair. This list type presents items in a sequential,
numbered order. The numbering can be in the form of numerals (1, 2, 3), uppercase letters (A,
B, C), or lowercase letters (a, b, c), providing options similar to a word processor.
In both types of lists, each individual item is defined using the <li> (list item) tag pair, which is
placed inside either the <ul> or <ol> tags.
HTML tables organize data. Use <table> for the entire table. Each row is defined with <tr>.
Column headers go in <th> cells, and regular data goes in <td> cells. The first row is typically
made with <th> for headings.
HTML Hyperlinks
Hyperlinks, created with the <a> tag, connect webpages and resources. The href attribute
specifies the destination URL. The visible link text informs the user. The optional target attribute
controls where the link opens:
· target="_blank" opens the URL in a new tab/window.
· target="_self" (default) opens it in the same tab.
Links can be applied to both text and images.
Summary of CSS and Media in HTML
3.3 Cascading Style Sheets (CSS)
CSS is a stylesheet language used to define the visual presentation (layout, colors, fonts) of
HTML elements. It separates content (HTML) from design (CSS), making code easier to
manage and troubleshoot.
3.3.1 Decorating Tables with CSS
CSS can style HTML tables. The <style> tag is used to define styles (e.g., borders) for the table,
header cells (th), and data cells (td).
3.3.2 Homepage Decor
Styles can be applied globally (e.g., background image, text alignment for the entire body) or to
specific elements (e.g., changing h3 headings to green, underlining text with a wavy style).
3.3.3 Adding a Video Clip
The <video> tag embeds videos. Key attributes:
· width and height: Set dimensions in pixels.
· controls: Adds play/pause/volume buttons.
· autoplay: Starts video automatically (often requires muted).
· muted: Mutes audio by default.
· loop: Repeats video continuously.
· Provide multiple formats (e.g., MP4, Ogg) for browser compatibility.
3.3.4 Ways to Use CSS
1. Inline CSS: Styles applied directly to an HTML element using the style attribute. Highest
priority.
2. Embedded (Internal) CSS: Styles defined within a <style> tag in the HTML <head>. Applies
to the entire document.
3. External CSS: Styles stored in a separate .css file and linked using <link rel="stylesheet"
href="file.css">. Best for large projects.
Priority Order: Inline > Embedded > External.
Short Response Questions (SRQs)
1. Contrast between website and web application.
A website is a collection of static pages that primarily display information (e.g., blogs, portfolios).
A web application is interactive, allowing users to perform tasks and manipulate data (e.g., CRM
systems, online stores).
2. What is ‘href’ refers to and how to use it?
href (Hypertext Reference) specifies the URL or path to a linked resource. It is used inside the
<a> tag:
<a href="https://example.com">Link</a>
3. Enlist the optional parameters to open a webpage.
The target attribute in the <a> tag is optional:
· _blank: Opens the link in a new tab/window.
· _self: Opens the link in the same tab (default).
4. List out the frequent tags used in text of a webpage and what are they used?
· <p>: Paragraph
· <b>: Bold text
· <i>: Italic text
· <em>: Emphasized text (italic with semantic meaning)
· <strong>: Important text (bold with semantic meaning)
· <u>: Underlined text
· <sup>: Superscript
· <sub>: Subscript
· <small>: Smaller text
5. Explain the role of <body> tag-pair in a document.
The <body> tag contains all visible content of the webpage (text, images, links, etc.). It defines
the main content area users interact with.
6. How the event based code is used in JavaScript?
Event-based code in JavaScript responds to user actions (e.g., clicks, key presses). For
example:
button.addEventListener("click", function() { alert("Clicked!"); });
7. Infer about the External CSS? Where are External CSS generally used?
External CSS is stored in a separate .css file and linked to HTML via <link>. It is used in large
projects for consistency, reusability, and easier maintenance.
---
Extended Response Questions (ERQs)
8. What is Document Object Model? Explain with the help of an example.
The Document Object Model (DOM) is a programming interface for HTML/XML documents. It
represents the page as a tree of objects, allowing JavaScript to dynamically access and update
content, structure, and style.
Example:
```javascript
// Change the text of an element with id "demo"
document.getElementById("demo").innerHTML = "Hello World!";
```
9. Write code to differentiate between different types of headings in HTML.
```html
<h1>Largest Heading (Main Title)</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>
<h4>Even Smaller</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>
```
10. Elaborate steps and provide code to load a background image in a webpage.
Steps:
1. Use CSS to set the background image for the body or a specific element.
2. Ensure the image path is correct.
Code:
```html
<style>
body {
background-image: url("image.jpg");
background-size: cover;
}
</style>
```
11. With the help of sample code, highlight different methods to incorporate CSS in a HTML
webpage.
Inline CSS:
<p style="color:red;">Red text</p>
Embedded CSS:
```html
<style>
p { color: blue; }
</style>
```
External CSS:
```html
<link rel="stylesheet" href="styles.css">
```
12. Sketch steps and provide code to apply border and color to a table in a webpage.
Steps:
1. Use CSS to style the table, th, and td elements.
Code:
```html
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th { background-color: #f2f2f2; }
</style>
```
13. Discuss the functionality JavaScript can provide in a webpage with the help of suitable
example code.
JavaScript adds interactivity: form validation, dynamic content updates, animations.
Example:
```html
<button onclick="alert('Welcome!')">Click Me</button>
```
14. Articulate steps and write code to create a scrolling text on a webpage.
Steps:
Use the <marquee> tag (deprecated but simple) or CSS/JavaScript for modern solutions.
Code:
<marquee behavior="scroll" direction="left">Scrolling text</marquee>
15. Enlist steps to add a video clip in a website which starts playing as the web page loads.
Steps:
1. Use the <video> tag with autoplay and muted attributes.
2. Specify the video source.
Code:
```html
<video autoplay muted>
<source src="video.mp4" type="video/mp4">
</video>
```
16. Cite steps on compiling the result of your last examination in a tabular form to display it in a
webpage.
Steps:
1. Create a table with <table>.
2. Add headers (<th>) for subjects, marks, grades.
3. Add rows (<tr>) and data cells (<td>) for each result.
Code:
```html
<table>
<tr><th>Subject</th><th>Marks</th></tr>
<tr><td>Math</td><td>95</td></tr>
</table>
```
17. In context of Fig. 40(d), add another button namely ‘Revert’ which when is pressed, it will
reverse both the color and index values.
Code:
```html
<button onclick="revert()">Revert</button>
<script>
function revert() {
// Code to reverse color and index values
document.body.style.backgroundColor = "white";
// Additional logic to revert index values
}
</script>
```
