Unit-I: Introduction to Web Programming
Introduction
1.
What is Web Programming?
Briefly define web programming as the process of creating dynamic web
applications. Differentiate between front-end (what users see and interact
with) and back-end (server-side logic, databases) development.
2.
The Role of HTML, CSS, and JavaScript: Introduce these as
the core languages of the web.
HTML (HyperText Markup
Language): The structure and content of a webpage.
CSS (Cascading Style Sheets): The presentation
and styling of a webpage.
JavaScript: The interactivity and dynamic
behavior of a webpage.
3. How the Web Works (Simplified): Briefly explain the client-server model, web browsers, web servers, and URLs.
Creating a Website:
Planning: Briefly touch upon planning the website's purpose, target audience,
content, and desired layout.
- Tools: Mention text editors (VS
Code, Sublime Text, Notepad++), web browsers (Chrome, Firefox, Edge), and
potentially local web servers for later stages.
- Basic
Workflow:
Write HTML in a text editor, save with .html extension, open in a
browser.
HTML Tags
- Definition: Explain that tags are
keywords enclosed in angle brackets (<tag>) that define the structure
and content of a web page.
- Opening and Closing
Tags:
Most tags come in pairs (e.g., <p> and </p>).
- Empty/Self-Closing
Tags:
Some tags don't have closing tags (e.g., <br>, <img>, <meta>).
- Common
Essential Tags:
- <!DOCTYPE
html>:
Document type declaration.
- <html>: The root element of an
HTML page.
- <head>: Contains meta-information
about the HTML document (not displayed on the page).
- <title>: Sets the title of the
document (appears in the browser tab).
- <body>: Contains the visible page
content.
HTML Elements
- Definition: An HTML element consists of
an opening tag, content, and a closing tag.
For example, <p>This is a paragraph.</p> is a paragraph element.
- Block-level
vs. Inline Elements (Brief Introduction):
- Block-level: Start on a new line and
take up the full available width (e.g., <h1>, <p>, <div>).
- Inline: Do not start on a new line
and only take up as much width as necessary (e.g., <a>, <span>, <strong>).
HTML Attributes
- Definition: Attributes provide
additional information about HTML elements. They are placed inside the
opening tag.
- Syntax: attribute_name="value"
- Common
Attributes:
- src: Specifies the source
(URL) for images (<img>) and scripts (<script>).
- href: Specifies the URL for
hyperlinks (<a>).
- alt: Provides alternative text
for images (<img>).
- width, height:
Sets dimensions for images.
- id: Uniquely identifies an
element (important for CSS/JS).
- class: Classifies elements
(important for CSS/JS).
- style: Applies inline CSS styles
directly to an element (generally discouraged for complex styling).
CSS Preview
1. What is CSS?
Explain that CSS is
used to style the layout of web pages.
2. Why use CSS?
Separation of
concerns (content from presentation), easier maintenance, consistent look
across multiple pages.
3. Brief Examples of Styling (No Deep Dive Yet): Mention how CSS
can change colors, fonts, sizes, and layout.
Example: color: blue; font-family: Arial; font-size: 16px;
History of HTML
- Early
Days (Tim Berners-Lee): Mention HTML's origin at CERN in the late
1980s/early 1990s.
- Evolution: Briefly touch upon HTML
2.0, HTML 3.2, HTML 4.01, and XHTML. Emphasize the move towards stricter
syntax with XHTML.
- The Rise
of WHATWG and HTML5:
Explain the development of HTML5 by the Web Hypertext Application
Technology Working Group (WHATWG) as a response to the stagnation of XHTML
and the need for richer web applications.
Differences between Old HTML and HTML5
|
Feature/Aspect |
Old HTML (HTML 4.01/XHTML) |
HTML5 |
|
<!DOCTYPE> |
Complex and verbose (e.g., <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">) |
Simple and short: <!DOCTYPE html> |
|
Semantic
Elements |
Limited semantic tags (mostly div for layout) |
Introduced new semantic tags: <header>, <nav>, <section>, <article>, <aside>, <footer>, <main> |
|
Multimedia
Support |
Relied heavily on third-party
plugins (Flash) for audio/video |
Native audio (<audio>) and video (<video>) elements |
|
Form
Controls |
Basic form inputs |
New input types: email, url, date, number, range, color, etc. |
|
Graphics |
Limited direct support |
Canvas (<canvas>) and SVG (<svg>) for vector
graphics |
|
APIs |
Few built-in APIs |
Many new APIs: Geolocation, Web
Storage, Web Workers, etc. |
|
Error
Handling |
Strict parsing (especially XHTML) |
More lenient parsing, designed for
backward compatibility |
How to Check Your HTML Code
- Browser
Developer Tools:
- Inspect
Element:
Right-click on any element in a browser and select "Inspect"
(or "Inspect Element"). This allows you to see the live HTML
structure, applied CSS, and JavaScript.
- Console: For JavaScript errors, but
also useful for seeing if resources loaded correctly.
- W3C HTML
Validator:
- Explain that the World Wide
Web Consortium (W3C) provides an official online validator.
- Purpose: To check if your HTML code
conforms to official HTML standards, helping identify syntax errors,
missing tags, incorrect nesting, and other issues.
- How to
Use:
Upload a file, paste code directly, or provide a URL.
- Benefit: Ensures your code is
well-formed and more likely to render consistently across different
browsers.
Case Study: Create a Web Page of Your Department using Standard HTML
Tags, HTML Elements, and HTML Attributes
Objective: To apply the
learned HTML concepts to build a simple, structured webpage for a hypothetical
department.
Instructions:
1.
File Setup: Create a new file named department.html in a folder.
2.
Basic HTML Structure: Start with the essential <!DOCTYPE>, <html>, <head>, and <body> tags.25
3.
Department Title:
4.
Use the <title> tag within the <head> to set the page title (e.g., "Computer Science Department - [Your
University Name]").26
5.
Use an <h1> tag within the <body> for the main heading of the department.27
6.
About Us Section:
7.
Use an <h2> tag for a sub-heading "About
Our Department".
8.
Use <p> tags to describe the department's
mission, history, and goals.28 Include a few
sentences of placeholder text.
9.
Courses Offered Section:
10.
Use an <h2> tag for "Courses Offered".
11.
Use an unordered list (<ul>) with list items (<li>) to list a few key courses.
12.
Attribute Application: For one of the courses, try to make
it bold using the <strong> tag.
13.
Faculty Section:
14.
Use an <h2> tag for "Our Faculty".
15.
Use an ordered list (<ol>) to list a few
faculty members.
16.
For each faculty member, include their name and perhaps their
specialization in a <p> tag within the <li>.
17.
Image Integration: For one faculty
member, add a placeholder image (<img>).29
18.
Attribute Application: Use the src attribute (e.g., src="placeholder.png" - you'll need a
placeholder image file in the same directory or link to an online one).30
19.
Attribute Application: Use the alt attribute (e.g., alt="Photo of Dr. Smith").
20.
Attribute Application: Add width and height attributes (e.g., width="100" height="100").
21.
Contact Information:
22.
Use an <h2> tag for "Contact Us".
23.
Include department address, phone number, and email. Use <p> tags or address tags (<address>).
24.
Hyperlink: Create an email link using the <a> tag with the href attribute (e.g., <a href="mailto:info@dept.com">Email Us</a>).31
25.
Navigation (Simple):
26.
Above the <h1>, create a simple navigation using an
unordered list (<ul>) and list items (<li>).
27.
Each <li> should contain an <a> tag linking to a placeholder (e.g., <a
href="#about">About</a>, <a
href="#courses">Courses</a>, etc.). These links won't jump yet
without proper id attributes on the target sections, but demonstrate
the <a> tag.
28.
Attribute Application: Add id attributes to your
<h2> tags for "About Us",
"Courses Offered", etc., so the navigation links can eventually jump
to them (e.g., <h2 id="about">About Our
Department</h2>).
29.
Footer:
30.
Use a <footer> tag at the bottom.
31.
Include copyright information using a <p> tag (e.g., © 2025 [Your University Name]. All rights reserved.).
Example department.html Structure
(Skeleton):
HTML
<!DOCTYPE html>
<html>
<head>
<title>Computer Science Department - [Your University
Name]</title>
</head>
<body>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="#faculty">Faculty</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<h1>[Your University Name] - Computer Science
Department</h1>
<section id="about">
<h2 id="about">About Our Department</h2>
<p>The Department of Computer Science at [Your
University Name] is dedicated to providing high-quality education and fostering
cutting-edge research in various areas of computing. Established in [Year], we
aim to equip students with the knowledge and skills necessary to thrive in the
dynamic tech industry.</p>
<p>Our faculty are renowned experts in their
fields, committed to both academic excellence and practical application.</p>
</section>
<section id="courses">
<h2 id="courses">Courses Offered</h2>
<ul>
<li>Introduction to Programming (Python)</li>
<li>Data Structures and Algorithms</li>
<li>Web Development Fundamentals (<strong>HTML, CSS, JavaScript</strong>)</li>
<li>Database Management Systems</li>
<li>Artificial Intelligence</li>
<li>Machine Learning</li>
</ul>
</section>
<section id="faculty">
<h2 id="faculty">Our Faculty</h2>
<ol>
<li>
<h3>Dr. Anya Sharma</h3>
<p>Specialization: Artificial Intelligence,
Machine Learning</p>
<img src="https://via.placeholder.com/100" alt="Photo of Dr.
Anya Sharma" width="100" height="100">
</li>
<li>
<h3>Prof. Rajesh Kumar</h3>
<p>Specialization: Cybersecurity, Network
Security</p>
</li>
<li>
<h3>Ms. Priya Singh</h3>
<p>Specialization: Web Technologies, UI/UX
Design</p>
</li>
</ol>
</section>
<section id="contact">
<h2 id="contact">Contact Us</h2>
<p><strong>Address:</strong> Department of
Computer Science, [Your University Name], [University Address], [City, State,
Pin Code]</p>
<p><strong>Phone:</strong>
+91-XXXXXXXXXX</p>
<p><strong>Email:</strong> <a href="mailto:csdept@youruniversity.edu">csdept@youruniversity.edu</a></p>
</section>
<footer>
<p>© 2025 [Your University Name]. All rights reserved.</p>
</footer>
</body>
</html>
Comments
Post a Comment