BCA 3rd Semester
UNIT – III: Web Development with HTML
1. HTML Document Features
HTML (HyperText Markup Language) serves as the foundational language for creating web pages and applications. It provides the structural framework that web browsers interpret to display content. An HTML document consists of several key components that work together to create a functional webpage. The DOCTYPE declaration specifies the HTML version being used, ensuring proper rendering by browsers. The HTML element acts as the root container for all other elements. The head section contains metadata like the page title, character set, and links to external resources, while the body section houses all visible content that users interact with directly.
Example: Basic HTML Document
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph.</p>
</body>
</html>2. Fundamental HTML Elements
HTML elements form the building blocks of web pages, each serving a specific purpose in content structure and presentation. The <html> element serves as the root container for the entire document. The <head> section contains meta-information that isn’t displayed but is crucial for browser interpretation and SEO. The <title> element defines the page title shown in browser tabs. The <body> element contains all visible content. Heading elements (<h1> to <h6>) create hierarchical content structure, while the <p> element defines paragraphs. The <a> element creates hyperlinks, and <img> embeds images into the document.
3. Creating Links
The anchor tag (<a>) is fundamental for creating hyperlinks that connect web pages. Links are the essence of the “hypertext” in HTML, enabling navigation between documents. The href attribute specifies the destination URL, which can be absolute (full web address) or relative (path relative to current page). Links can connect to external websites, internal pages, specific sections within a page (using fragment identifiers), or even trigger email clients. Proper link structure is crucial for user experience and search engine optimization, as it helps establish website hierarchy and content relationships.
Example: Link to Google
<a href="https://www.google.com">Visit Google</a>4. Headers
HTML provides six levels of heading elements (<h1> to <h6>) to create a hierarchical content structure. The <h1> tag represents the most important heading and should typically be used once per page as the main title. Subsequent heading levels (<h2> to <h6>) create subsections with decreasing importance. Proper heading hierarchy improves accessibility for screen readers and helps search engines understand content organization. Headings also enhance readability by breaking content into logical sections and providing visual cues about content relationships and importance.
Example: Headers
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>5. Text Styles
HTML offers various elements for text styling and semantic emphasis. The <b> tag creates bold text for stylistic purposes without semantic importance. The <i> tag italicizes text for stylistic differentiation. The <u> tag underlines text, though this is generally discouraged as it can be confused with hyperlinks. The <strong> tag indicates text with strong importance, typically rendered as bold but carrying semantic meaning. Similarly, <em> emphasizes text, usually displayed as italic but with semantic significance. Understanding the difference between presentational and semantic markup is crucial for accessibility and SEO.
Example: Text Styles
<p><b>Bold Text</b></p>
<p><i>Italic Text</i></p>
<p><u>Underlined Text</u></p>
<p><strong>Important Text</strong></p>6. Text Structuring
HTML provides elements for controlling text flow and creating visual separations. The <br> tag inserts a line break within text, forcing content to continue on the next line without creating a new paragraph. This is useful for addresses, poetry, or any content requiring specific line breaks. The <hr> tag creates a horizontal rule, a thematic break between content sections. It typically appears as a horizontal line across the page, visually separating different topics or sections. Both elements help organize content visually without relying solely on CSS for basic layout and readability improvements.
Example: Line Break and Horizontal Rule
<p>First Line<br>Second Line</p>
<hr>
<p>Content after horizontal rule.</p>7. Text Colour and Background
The style attribute allows inline CSS application to HTML elements, including text and background color modifications. Text color is controlled with the color property, accepting color names, HEX codes, or RGB values. Background color uses the background-color property with similar value options. While convenient for quick styling, inline styles should be used sparingly as they can create maintenance challenges and violate separation of concerns principles. For larger projects, external CSS is recommended, but understanding inline styling is valuable for quick prototypes and understanding how CSS properties interact with HTML elements.
Example: Text and Background Color
<p style="color:red; background-color:yellow;">Colored Text</p>8. Formatting Text
HTML includes specialized elements for specific text formatting needs. The <sub> tag creates subscript text, positioned slightly below the normal line (useful for chemical formulas like H₂O). The <sup> tag creates superscript text, positioned slightly above the normal line (common for mathematical exponents like E=mc²). The <mark> tag highlights text with a background color, useful for emphasizing specific content. The <del> tag indicates deleted text, typically displayed with a strikethrough. These semantic elements improve content meaning and accessibility while providing visual formatting cues.
Example: Text Formatting
<p>H<sub>2</sub>O</p>
<p>E = mc<sup>2</sup></p>
<p><mark>Highlighted Text</mark></p>
<p><del>Deleted Text</del></p>9. Page Layouts
The <div> element serves as a generic container for grouping and structuring content, forming the foundation of HTML page layouts. Before CSS Grid and Flexbox became standard, <div> elements with float properties were the primary method for creating complex layouts. Each <div> can be styled independently using CSS classes or IDs, allowing for precise positioning, background colors, borders, and spacing. While modern layout techniques have evolved, understanding <div> containers remains essential for content organization, creating visual sections, and applying consistent styling across related elements in a webpage.
Example: Page Layout
<div style="background-color:lightgrey; padding:10px;">
<h2>Section 1</h2>
<p>Content for section 1.</p>
</div>
<div style="background-color:lightblue; padding:10px;">
<h2>Section 2</h2>
<p>Content for section 2.</p>
</div>10. Images
The <img> tag embeds images into web pages, enhancing visual appeal and content comprehension. The src attribute specifies the image file path, which can be relative (local to the website) or absolute (external URL). The alt attribute provides alternative text describing the image, crucial for accessibility (screen readers) and SEO (search engines). Width and height attributes control image dimensions, though CSS is typically preferred for responsive design. Proper image optimization is essential for page performance, as large images can significantly impact loading times. Modern HTML also supports responsive images with the srcset attribute for different screen sizes.
Example: Inserting an Image
<img src="image.jpg" alt="Description" width="200" height="100">11. Ordered and Unordered Lists
HTML provides two primary list types for organizing content. Ordered lists (<ol>) display items in numerical or alphabetical sequence, ideal for step-by-step instructions or ranked content. Unordered lists (<ul>) present items without specific order, typically using bullet points for general collections. List items in both types are marked with <li> tags. Lists improve content scannability and organization, making information more digestible for readers. They’re also semantically meaningful, helping screen readers and search engines understand content structure. Nested lists can create complex hierarchical information structures.
Example: Lists
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>12. Inserting Graphics
While similar to basic images, graphics in web design often refer to more complex visual elements like illustrations, charts, diagrams, or logos. The <img> tag handles these graphics similarly to photographs, with the same essential attributes: src for file location, alt for accessibility descriptions, and dimension attributes for sizing. For complex graphics requiring interactivity or scalability, SVG (Scalable Vector Graphics) format is preferred as it maintains quality at any size and can be manipulated with CSS and JavaScript. Understanding graphic formats (JPG, PNG, GIF, SVG) and their appropriate use cases is crucial for effective web design.
Example: Inserting Graphics
<img src="graphic.png" alt="Graphic" width="300">13. Table Creation and Layouts
HTML tables organize data into rows and columns, making complex information more readable. The <table> element defines the table container, while <tr> creates table rows. Within rows, <th> defines header cells (typically bold and centered), and <td> defines standard data cells. Tables can include captions (<caption>), column groups (<colgroup>), and semantic sections like <thead>, <tbody>, and <tfoot> for better structure. While tables were historically used for page layout, modern web standards reserve them for tabular data only, using CSS for visual layouts to improve accessibility and responsiveness.
Example: Table
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</table>14. Frame Creation and Layouts
The <iframe> (inline frame) element embeds another HTML document within the current page, creating a “window” to external content. Unlike deprecated framesets, iframes are widely supported and used for embedding videos, maps, advertisements, or external applications. The src attribute specifies the content URL, while width and height control dimensions. Additional attributes like sandbox enhance security by restricting embedded content capabilities. Iframes are valuable for integrating third-party content without directly affecting the parent page’s structure or security. However, they should be used judiciously as they can impact performance and create accessibility challenges if not properly implemented.
Example: Frame
<iframe src="page.html" width="300" height="200"></iframe>15. Working with Forms and Menus
HTML forms collect user input through various control elements, enabling interactive web experiences. The <form> element wraps all form components and defines where and how to submit collected data. The <input> element creates diverse form controls based on its type attribute (text, password, email, etc.). The <select> element generates dropdown menus, with <option> elements defining available choices. The <label> element associates text descriptions with form controls, improving accessibility and usability. Form attributes like action, method, and name control data submission behavior, while client-side validation attributes enhance user experience.
Example: Form with Menu
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="course">Course:</label>
<select id="course" name="course">
<option value="bca">BCA</option>
<option value="bsc">BSc</option>
</select><br>
<input type="submit" value="Submit">
</form>16. Radio Buttons and Check Boxes
Radio buttons and checkboxes are specialized input types for specific selection scenarios. Radio buttons (<input type=”radio”>) allow single selection from multiple options where choices are mutually exclusive. All radio buttons in a group share the same name attribute but have unique values. Checkboxes (<input type=”checkbox”>) enable multiple selections from available options, where choices are independent. Each checkbox typically has a unique name or uses array notation. Both elements should be associated with <label> elements for better accessibility and usability. Understanding when to use each input type is crucial for creating intuitive forms that match user expectations.
Example: Radio Buttons and Checkboxes
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="checkbox" id="html" name="skills" value="html">
<label for="html">HTML</label><br>
<input type="checkbox" id="css" name="skills" value="css">
<label for="css">CSS</label>
</form>17. Text Boxes
Text input fields capture various types of textual information from users. The standard <input type=”text”>) creates single-line text fields suitable for short responses like names, usernames, or search terms. For longer, multi-line text input like comments, descriptions, or messages, the <textarea> element provides a resizable text area with configurable dimensions using rows and cols attributes. Both elements support various attributes for validation (required, pattern), user experience (placeholder), and functionality (maxlength, readonly). Understanding the appropriate use cases for each text input type ensures forms are both functional and user-friendly.
Example: Text Boxes
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="feedback">Feedback:</label><br>
<textarea id="feedback" name="feedback" rows="4" cols="50"></textarea>
</form>Practical Assignment
Create a webpage with the following features:
- A heading and a paragraph introducing yourself or a topic of interest.
- A link to your favorite website that opens in a new tab.
- An ordered list of your hobbies or interests with at least three items.
- An unordered list of your favorite foods or books with at least three items.
- A table representing your weekly schedule with days and activities.
- A comprehensive form containing:
- Text boxes for name and email with proper validation
- Radio buttons for gender selection
- Checkboxes for skills (e.g., HTML, CSS, JavaScript) with at least three options
- A dropdown menu for selecting your course or specialization
- A textarea for additional comments
- A properly styled submit button
- An appropriately sized image related to your content with descriptive alt text.
- Application of different text styles (bold, italic, underlined) and colors to enhance visual appeal.
- Proper use of semantic HTML elements throughout the page.
Submission Guidelines
- Save the file as
assignment.htmlusing proper naming conventions. - Ensure the webpage is properly formatted, functional, and validates without errors.
- Include appropriate comments in your code for better readability.
- Test your webpage across different browsers to ensure compatibility.
- Submit the HTML file via the designated platform before the deadline.
Introduction
Pollution is one of the most pressing environmental issues of the modern world. It refers to the introduction of harmful substances into the natural environment, causing adverse effects on living organisms and the planet. With rapid industrialization, urbanization, and population growth, pollution has become a global problem that affects air, water, and land. It not only threatens human health but also disrupts ecosystems and contributes to climate change.
Types of Pollution
There are several types of pollution, each with its own sources and consequences. Air pollution results from emissions of harmful gases such as carbon monoxide, sulfur dioxide, and nitrogen oxides from factories, vehicles, and burning fossil fuels. Water pollution occurs when industrial waste, plastics, and chemicals are dumped into rivers, lakes, and oceans, contaminating drinking water and harming aquatic life. Soil pollution arises from excessive use of pesticides and industrial waste disposal, reducing soil fertility. Noise and light pollution, though less visible, also negatively affect humans and wildlife by disturbing natural patterns and causing stress.
Key Data on Pollution
- Air Pollution: According to the World Health Organization (WHO), around 7 million people die each year due to exposure to polluted air, making it one of the leading environmental health risks globally.
- Water Pollution: Nearly 80% of the world’s wastewater is released into the environment without proper treatment, contaminating freshwater sources and harming aquatic ecosystems.
- Plastic Pollution: More than 11 million metric tons of plastic waste enter the oceans annually, and this number is projected to nearly triple by 2040 if no action is taken.
- Climate Impact: Greenhouse gas emissions caused by pollution have led to a 1.2°C rise in global temperatures since pre-industrial times, increasing the frequency of floods, droughts, and heatwaves.
Effects of Pollution
The effects of pollution are far-reaching. Air pollution contributes to respiratory diseases like asthma and lung cancer, while water pollution leads to the spread of waterborne illnesses such as cholera and typhoid. Contaminated soil reduces agricultural productivity, threatening food security. Moreover, pollutants contribute to global warming, melting glaciers, and extreme weather conditions, endangering biodiversity and human survival.
Solutions and Conclusion
To combat pollution, both individual and collective actions are essential. Governments should enforce stricter environmental laws, promote renewable energy, and improve waste management. Citizens can help by reducing plastic use, conserving energy, and supporting eco-friendly products. In conclusion, pollution is a challenge that demands global attention and responsibility. Only through sustainable practices can we protect our planet for future generations.