Web Technology
Prof : Salve V. S
Branch : Computer
Class : Third Year
History:
Originated from ARPANET in the 1960s.
Evolved into the modern public internet with the introduction of TCP/IP in
1983
The internet :
Definition: A global network of interconnected computers that communicate
using standardized protocols.
Key Components:
Network of Networks: Connects LANs, WANs, and individual devices.
ISPs (Internet Service Providers): Provide access to the internet.
IP Addressing: Unique numerical labels assigned to each device.
Key Applications: Email, file sharing, streaming, web browsing.
Basic Internet Protocols
•Foundation of internet communication.
•TCP/IP (Transmission Control Protocol/Internet Protocol):
•Ensures reliable data transmission between devices.
•DNS (Domain Name System):
•Translates domain names (e.g., [Link]) into IP addresses
•.
•HTTP/HTTPS (Hypertext Transfer Protocol/Secure):
•Protocol for transferring web pages over the internet.
•HTTPS adds encryption for secure communication.
•FTP (File Transfer Protocol):
•Used for transferring files between computers.
•SMTP/IMAP/POP3:
•Protocols for sending and receiving emails.
3. The World Wide Web
•Definition: A system of interlinked hypertext documents accessible via the
internet.
•Key Components:
•Web Pages: Written in HTML and displayed in web browsers.
•Hyperlinks: Allow navigation between pages.
•Web Servers: Host web pages and respond to requests.
•Web Clients: Devices or applications (e.g., browsers) used to access the
web.
•History:
•Invented by Tim Berners-Lee in 1989.
•First website launched in 1991.
4. HTTP Request Message
•Purpose: Sent by a web client to a server to request resources.
•Structure:
•Request Line:
•Method: e.g., GET, POST, PUT, DELETE.
•URL: Identifies the resource.
•HTTP Version: Protocol version used.
•Headers: Contain metadata (e.g., Host, User-Agent, Accept).
•Body (optional): Includes data for POST or PUT requests.
Example :
GET /[Link] HTTP/1.1
Host: [Link]
User-Agent: Mozilla/5.0
5. HTTP Response Message
Purpose: Sent by the server to the client in response to a request.
Structure:
Status Line:
HTTP Version.
Status Code: e.g., 200 (OK), 404 (Not Found), 500 (Server Error).
Reason Phrase: Textual description of the status code.
Headers: Provide metadata about the response.
Body: Contains the requested resource or error message.
Example :
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 123
<html>...</html>
6. Web Clients
Definition: Software or devices used to access web resources.
Examples:
Web Browsers: Chrome, Firefox, Edge, Safari.
Mobile Apps: Use embedded browsers or APIs to access content.
Command-Line Tools: curl, wget for direct HTTP requests.
Functions:
Send HTTP requests.
Render web pages.
Cache resources for faster access.
7. Web Servers
Definition: Systems or software that deliver web pages to clients upon
request.
Examples:
Apache, Nginx, Microsoft IIS, [Link].
Functions:
Handle HTTP requests.
Serve static and dynamic content.
Log client interactions.
Provide security through SSL/TLS (HTTPS).
Process:
Client sends HTTP request.
Server processes the request.
Server sends HTTP response with the requested resource or error
message.
Summary Diagram
Client (Browser) → HTTP Request → Web Server
← HTTP Response ←
Introduction:
HTML (HyperText Markup Language) is the standard language for
creating web pages. It allows developers to structure content on the web
using a system of tags and attributes. It serves as the foundation of the
World Wide Web.
History:
1991-1995: Tim Berners-Lee introduced the first version of HTML, featuring basic
tags like <html>, <head>, <body>, and links.
HTML 2.0 (1995): First standardized version; supported basic structure and forms.
HTML 3.2 (1997): Added support for tables, scripting (JavaScript), and improved
formatting.
HTML 4.01 (1999): Introduced stricter standards and supported multimedia
features.
HTML5 (2014): Modern version that introduced semantic elements, multimedia,
APIs, and device compatibility.
HTML Elements: Theory and Examples
1. Headings
Headings range from <h1> (largest) to <h6> (smallest).
Example:
<h1>This is a Heading 1</h1>
<h3>This is a Heading 3</h3>
2. Paragraphs
Paragraphs are defined using the <p> tag.
Example:
<p>This is a paragraph of text.</p>
3. Line Break
The <br> tag inserts a line break. It is a self-closing tag.
Example:
This is line one.<br>
This is line two.
4. Colors and Fonts
•Colors: Defined using attributes like style="color:red;".
Example:
•<p style="color:blue;">This text is blue.</p>
•Fonts: Controlled using the <style> tag or inline styles.
Example:
<p style="font-family:Arial;">This text uses Arial font.</p>
5. Links:
Hyperlinks are created using the <a> tag with the href attribute
<a href="[Link] Example</a>
6. Frames (Deprecated in HTML5)
Frames were used to divide the browser window into sections.
Example:
<frameset cols="50%,50%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
7. Lists
•Ordered List: <ol> for numbered items.
Example:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
•Unordered List: <ul> for bullet points.
Example:
•<ul>
• <li>Apple</li>
• <li>Banana</li>
•</ul>
8. Tables
Used for organizing data into rows and columns.
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
9. Images
Displayed using the <img> tag with the src attribute.
Example:
<img src="[Link]" alt="Example Image" width="300" height="200">
10. Forms
Forms collect user input.
Example:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
Difference Between HTML and HTML5
Feature HTML HTML5
Doctype Declaration Complex and Simplified: <!
version-specific. DOCTYPE html>
Audio & Video Built-in support with
Requires plugins <audio> and
(e.g., Flash) <video>.
Semantic Elements Limited support. Includes tags like
<header>, <footer>,
<article>.
Graphics Requires third-party Native support via
tools. <canvas> and SVG.
Forms Basic controls (text, Advanced controls
checkbox). (date pickers, range).
HTML5 Example: Audio and Video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Example</title>
</head>
<body>
<h1>HTML5 Multimedia Example</h1>
<!-- Audio -->
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<!-- Video -->
<video controls width="400">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</body>
</html>
CSS (Cascading Style Sheets)
Introduction to Style Sheets:
CSS is used to style and layout HTML [Link] separates content (HTML)
from presentation (CSS), improving design flexibility and
[Link] consistent styling across multiple web pages.
CSS Features
Separation of Content and Design: Enhances maintainability and scalability.
Reusability: Use the same stylesheet for multiple web pages.
Media Queries: Enables responsive design for various devices (mobile, tablet,
desktop).
Style Inheritance: Some styles can cascade down to child elements.
Custom Properties: Use variables for consistent design patterns.
Animation and Transitions: Add interactive features.
CSS Core Syntax:
Syntax structure:
selector {
property: value;
}
Selector: Targets HTML elements (e.g., h1, .class, #id).
Property: Style attribute (e.g., color, font-size).
Value: The value assigned to the property (e.g., red, 16px).
Example :
p{
color: blue;
font-size: 14px;
}
Style Sheets and HTML:
CSS can be applied in three ways:
1. Inline: Inside an HTML element.
<p style="color: blue;">This is inline styled text.</p>
2. Internal: In a <style> tag inside the <head> [Link]
<style>
p { color: blue; }
</style>
3. External: Using a .css file linked via <link> [Link]
<link rel="stylesheet" href="[Link]">
Style Rule Cascading and Inheritance:
Cascading: The browser resolves conflicts when multiple styles apply to an
element based on:
Importance: Inline styles > Internal styles > External styles.
Specificity: IDs > Classes > Element selectors.
Order: The last defined rule takes precedence.
Inheritance:
Certain properties (e.g., color, font-family) are inherited by default.
Non-inherited properties (e.g., margin, border) must be explicitly defined.
Example:
h1 {
color: red; /* General rule */
}
#title {
color: blue; /* More specific rule */
}
Text Properties:
Common text-related properties:
color: Changes the text color.
font-family: Specifies the font.
font-size: Sets the text size.
font-weight: Defines text thickness (e.g., bold).
text-align: Aligns text (e.g., left, center).
text-decoration: Adds underline, overline, or
strike-through.
line-height: Adjusts line spacing.
Example :
p{
color: gray;
font-family: Arial, sans-serif;
font-size: 16px;
text-align: justify;
}
Cascading and Inheritance in CSS: Teaching Notes
1. Cascading in CSS
The Cascading Order refers to the way CSS rules are applied when
multiple rules affect the same element. The "cascading" determines
which rule gets applied when conflicting rules exist.
CSS follows the cascading rules in the following order:
Inline styles (highest priority) – Styles written directly inside an
element.
Internal styles – Styles written in the <style> tag inside the HTML
document.
External styles – Styles from external stylesheets.
Browser defaults – The default styles applied by browsers.
The order of importance in case of conflicts is:
Inline styles override other styles.
ID selectors override class selectors, and class selectors override
element selectors.
More specific selectors override less specific ones.
The last defined rule takes precedence if everything else is the
same.
Example of Cascading
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cascading Example</title>
<style>
/* External stylesheet */
h1 {
color: blue;
}
</style>
</head>
<body>
<h1 style="color: red;">This text is red (Inline style).</h1> <!-- Inline style overrides internal C
</body>
</html>
2. CSS Inheritance
Inheritance in CSS refers to how certain properties of a parent element are
inherited by its child elements. Not all properties are inherited by default,
but many text-related properties (like font-family, color, font-size, etc.) are
inherited automatically
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inheritance Example</title>
<style>
/* Parent element */
body {
color: green; /* This color will be inherited by all child elements, like paragraphs */
}
/* Child element can override inheritance */
p{
color: blue; /* This will change the inherited color to blue for paragraphs */
}
</style>
</head>
<body>
<p>This is a paragraph. It inherits the color from the body, but it's overridden by its
own style.</p>
<div>This text inherits the color from body and remains green.</div>
</body>
</html>
Key Concepts for Teaching:
[Link]: CSS applies styles in a "cascade" based on the specificity and order of
the rules.
[Link]: Determines which rule wins when multiple rules apply to the same
element.
•Inline styles have the highest specificity.
•IDs are more specific than classes, which are more specific than elements.
•The rule defined last in the code (if selectors are the same) takes precedence.
[Link]: Some properties are inherited from parent to child elements, while
others must be explicitly set on the child element.
•Text-related properties (like color, font-family, line-height) are inherited by default.
•Layout-related properties (like margin, padding, border) are not inherited by default.
Summary of Cascading Order:
[Link] styles: Highest priority.
[Link] styles (within <style> tags).
[Link] styles (from linked CSS files).
[Link] default styles: Last in order.
Practice Code for Teaching:
Example 1: Understanding Specificity and Cascading
Next Slide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Specificity and Cascading Example</title>
<style>
p{
color: red;
}
.highlight {
color: blue;
}
#special {
color: green;
}
</style>
</head>
<body>
<p>This paragraph should be red (default).</p>
<p class="highlight">This paragraph should be blue (from class).</p>
<p id="special">This paragraph should be green (from ID selector).</p>
</body>
</html>
In this example:
•The first paragraph will be red due to the general p selector.
•The second paragraph will be blue because of the class .highlight.
•The third paragraph will be green due to the ID selector #special (ID has
the highest specificity).
Demonstrating Inheritance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inheritance Example</title>
<style>
body {
color: purple; /* This color will be inherited by all child elements */
}
h1 {
color: orange; /* h1 will override inherited color from body */
}
</style>
</head>
<body>
<h1>This is a heading, it will be orange.</h1>
<p>This is a paragraph, it will inherit the color purple from the body.</p>
</body>
</html>
In this example:
The heading <h1> has its own color (orange), which overrides
the inherited purple color.
The paragraph <p> inherits the purple color from the body tag
because color is an inheritable property.
