Internet Programming
What is Internet Programming?
Internet programming means creating software applications that work over the internet.
Example:
Websites like Amazon, Google, and Instagram
Web-based apps like Gmail or online banking
Streaming services like YouTube or Netflix
Why is it Important?
Global Access – Your work is available to anyone, anywhere.
High Demand – Almost every business needs a web or online app.
Creative + Logical – Combines design (look) and logic (function).
Real-World Impact – Your project can be used by millions of people.
Why is it Important?
Global Access – Your work is available to anyone, anywhere.
High Demand – Almost every business needs a web or online app.
Creative + Logical – Combines design (look) and logic (function).
Real-World Impact – Your project can be used by millions of people.
Basic Components of Internet Programming
Think of it like building a house:
Structure (HTML) – Creates the skeleton of a webpage.
Style (CSS) – Adds colors, layouts, and beauty.
Behavior (JavaScript) – Makes things interactive.
Backend – Handles data, user accounts, and processing (languages like PHP, Python, Java,
[Link]).
Database – Stores information (MySQL, MongoDB, etc.).
HTML – The Structure
Full Form: HyperText Markup Language
Purpose: Builds the skeleton or framework of a web page.
Think of it like the walls, doors, and windows of a house—it defines what elements exist
(headings, paragraphs, images, links, forms, etc.).
CSS – The Style
Full Form: Cascading Style Sheets
Purpose: Makes the page look good—controls colors, fonts, layouts, spacing, animations, etc.
Think of it like painting and decorating your house—choosing wall colors, furniture arrangement,
etc.
JavaScript – The Behavior
Purpose: Makes the web page interactive and dynamic—changes content, responds to clicks,
sends/receives data, etc.
Think of it like electricity and automation in your house—lights turn on with a switch, doors
open automatically, etc.
What is HTML?
HTML stands for HyperText Markup Language. It is the standard language used to create web
pages. HTML describes the structure of a webpage using special codes called tags.
Think of HTML as the blueprint for a house—it defines what’s on the page, but not how it looks
(that’s CSS) or how it behaves (that’s JavaScript).
Tags, Elements, and Attributes
Tag: A keyword inside angle brackets,
e.g., <p> for a paragraph. Tags usually come in pairs: an opening tag <p> and a closing tag </p>.
Element: The complete piece of content, including the opening tag, content, and closing tag.
Example: <p>This is a paragraph.</p> is a paragraph element.
Attribute: Extra information added to a tag that changes or adds to its behavior.
Attributes are written inside the opening tag. Example: <img src="[Link]" alt="My photo">
has two attributes—src (image source) and alt (alternative text).
Elements
Element: The complete piece of content, including the opening tag, content, and closing tag.
Example: <p>This is a paragraph.</p> is a paragraph element.
An HTML element is the building block of a webpage.
It usually consists of:
Types of HTML Elements.
v Basic Structure Elements
<html> → Root of the document
<head> → Metadata (title, links, styles, scripts)
<body> → Content shown on the page
v Text Elements
•<h1> to <h6> → Headings
•<p> → Paragraph
•<b> or <strong> → Bold text
•<i> or <em> → Italic text
•<u> → Underlined text
•<br> → Line break
•<hr> → Horizontal line.
<h1>Main Title</h1>
<p>This is a <b>bold</b> and <i>italic</i> sentence.</p>
List Elements
<ul> → Unordered list (bullets)
<ol> → Ordered list (numbers)
<li> → List item
<ul>
<li>Apple</li>
<li>Mango</li>
</ul>
Table Elements
•<table> → Defines a table
•<tr> → Table row
•<th> → Table heading
•<td> → Table data
Code
<table border="1">
<tr>
<th>Name</th><th>Marks</th>
</tr>
<tr>
<td>Alice</td><td>90</td>
</tr>
</table>
Table Elements
•<table> → Defines a table
•<tr> → Table row
•<th> → Table heading
•<td> → Table data
Code
<table border="1">
<tr>
<th>Name</th><th>Marks</th>
</tr>
<tr>
<td>Alice</td><td>90</td>
</tr>
</table>
Link & Multimedia Elements
•<a> → Hyperlink
•<img> → Image
<a href="[Link] to Google</a>
<img src="[Link]" alt="Cute cat">
Empty Elements (No closing tag)
•<br> → Line break
•<hr> → Horizontal line
•<img> → Image
Forms
Forms in HTML are used to collect input from users and usually
send that data to a server for processing. The form is created
using the <form> tag and contains input elements like text boxes, buttons,
checkboxes, dropdowns, etc.
[Link] Forms (<form>)
<form action="[Link]" method="post">
<!-- Form elements go here -->
</form>
action → URL or file where data will be sent.
method → get (data visible in URL) or post (data hidden, secure)
2. Input Fields (<input>)
(a) Text Field
<label for="username">Username:</label>
<input type="text" id="username" name="username">
(b) Password Field
<label for="password">Password:</label>
<input type="password" id="password" name="password">
(c) Radio Button (Choose ONE option)
<p>Gender:</p>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label>
(d) Checkbox (Choose MULTIPLE options)
<p>Hobbies:</p>
<input type="checkbox" id="reading" name="hobby" value="Reading">
<label for="reading">Reading</label>
<input type="checkbox" id="sports" name="hobby" value="Sports">
<label for="sports">Sports</label>
(e) Submit Button
<input type="submit" value="Submit">
[Link] (<textarea>)
For longer text input:
<label for="message">Your Message:</label><br>
<textarea id="message" name="message" rows="4" cols="40"></textarea>
Dropdown Menu (<select>, <option>)
<label for="city">Choose your city:</label>
<select id="city" name="city">
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
<option value="kolkata">Kolkata</option>
<option value="chennai">Chennai</option>
</select>
Labels and Fieldsets
<label> → makes forms accessible & clickable.
<fieldset> → groups related form elements.
<legend> → gives a title to the group.
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
</form>