HTML Essentials

Types of List Tags in HTML

HTML supports three main types of lists, each with a corresponding tag:

1. Unordered List (<ul>): Used for grouping items where the order doesn't matter.
Items are typically marked with bullets.
2. Ordered List (<ol>): Used for grouping items that require a specific sequence or
order. Items are marked with numbers, letters, or Roman numerals.
3. Description List (<dl>): Used for creating a list of terms and their descriptions. It
uses:
o <dt> (Description Term)
o <dd> (Description Data/Definition)

Attributes of the <img> Tag

The <img> tag is used to embed an image in an HTML page. Key attributes include:

Attribute Description Example

src (Required) Specifies the path (URL) to the image file. src="images/[Link]"
(Required) Specifies an alternative text for the image,
alt crucial for accessibility and when the image can't be alt="Company Logo"
displayed.
width Specifies the width of the image in pixels or percentage. width="300"
height Specifies the height of the image in pixels or percentage. height="200"
Export to Sheets

Example:

HTML
<img src="[Link]" alt="A view of a snow-capped mountain range"
width="600" height="400">

Attributes of the <table> Tag

The <table> tag defines an HTML table. While many styling attributes like border, align,
cellpadding, and cellspacing are deprecated (and should be handled with CSS), the
fundamental attributes are:

Attribute Description Example

border
Specifies the width of the table border in pixels border="1"
(Though better styled with CSS).
summary
Provides a brief summary of the table's purpose and summary="Sales data for
structure (helpful for accessibility). Q3 2024."
Export to Sheets

Example:
HTML
<table border="1">
<caption>Monthly Sales Figures</caption>
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
<tr>
<td>January</td>
<td>$10,000</td>
</tr>
</table>

Block and Inline Level Elements

HTML elements are categorized into two main display types:

Feature Block-Level Elements Inline-Level Elements

Takes up the full width available, Takes up only the space necessary,
Space
starting on a new line. staying on the same line.
Cannot set width or height, and
Can set width and height, and
Dimensions vertical margins/padding are often
control vertical margins/padding.
ignored.
Can contain both block and inline Can generally only contain data and
Containment
elements (e.g., <div>). other inline elements (e.g., <span>).
<h1>, <h2>, <p>, <div>, <ul>, <a>, <span>, <strong>, <em>, <img>,
Examples <table> <input>
Export to Sheets

HTML Form Tags and Input Types

Form Tags

The main tags used to create HTML forms are:

1. <form>: Defines the start and end of a form. Its key attributes are:
o action: Specifies the URL to which the form data will be sent upon
submission.
o method: Specifies the HTTP method (GET or POST) used to send the data.
2. <input>: The most versatile tag, used to create most form controls like text fields,
checkboxes, and buttons.
3. <label>: Provides a descriptive caption for an <input> element. It's crucial for
accessibility. It uses the for attribute, which links to the id of the input.
4. <textarea>: Creates a multi-line text input area.
5. <select>/<option>: Creates a drop-down list.

Input Types (<input type="...">)

The type attribute on the <input> tag defines the control:

Type Description
text Single-line text input (default).
password Text input where characters are masked.
email Input for an email address.
tel Input for a telephone number.
number Input for a numerical value.
date A date picker control.
radio A radio button (only one in a group can be selected).
checkbox A checkbox (multiple can be selected).
submit A button that submits the form data.
button A clickable button (typically used with JavaScript).
file Allows the user to select one or more files.
hidden An input that is not displayed but holds a value.
Export to Sheets

Example (Input Types in Form):

HTML
<form action="/submit-data" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>

<label for="user_email">Email:</label>
<input type="email" id="user_email" name="user_email"><br><br>

<label for="user_pass">Password:</label>
<input type="password" id="user_pass" name="user_pass"><br><br>

<label>
<input type="checkbox" name="subscribe" value="yes"> Subscribe to
newsletter
</label><br><br>

<input type="submit" value="Register">

</form>

HTML Structural Code Example

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Design Topics</title>
</head>
<body>

<h1>Kishanchand Chellaram College Exam Prep</h1>

<h2>Web Technologies - First Sem</h2>

<p>This section covers key topics for the upcoming examination,

focusing on core HTML and CSS concepts. Mastery of these fundamentals is
essential for a career in web development.</p>
 <h3>Core HTML Concepts</h3>

<p>We must understand the structural elements of HTML:</p>

<ul>
<li>List Elements:
<ul>
<li><code>&lt;ol&gt;</code> (Ordered List)</li>
<li><code>&lt;ul&gt;</code> (Unordered List)</li>
<li><code>&lt;li&gt;</code> (List Item)</li>
</ul>
</li>
<li>Block and Inline Elements distinction.</li>
<li>Form Structure and Input Types.</li>
</ul>

<h4>CSS Styling Fundamentals</h4>

<p>CSS is used for presentation and design. Key areas include:</p>

<ol>
<li>CSS Selectors and Specificity.</li>
<li>The CSS Box Model explained.</li>
<li>Layout methods like Flexbox and Grid.</li>
</ol>

<h6>Good Luck!</h6>

</body>
</html>

CSS Essentials
Types of CSS

There are three main ways to apply CSS styles to an HTML document:

1. Inline CSS: Styles are applied directly to an individual HTML element using the
style attribute.
o Example: <p style="color: blue; font-size: 16px;">Hello</p>
o Use: For quick, element-specific overrides, but generally discouraged as it
mixes content and presentation.
2. Internal (or Embedded) CSS: Styles are defined in a <style> block within the
<head> section of the HTML document.
o Use: For a single-page style sheet, or when styles are unique to a particular
page.
3. External CSS: Styles are written in a separate plain text file with a .css extension
(e.g., [Link]) and linked to the HTML document using the <link> tag in the
<head> section.
o Use: The standard and most preferred method for managing large websites,
as it promotes separation of concerns and allows styles to be reused across
multiple pages.
Types of Selectors

CSS selectors are patterns used to select and target the HTML elements you want to style.
Common types include:

Selector Type Syntax Example Selects

Element/Tag element p All <p> tags.
ID #id #header The single element with id="header".
Class .class .warning All elements with class="warning".
Universal * * All elements on the page.
All elements with the specified attribute and
Attribute [attr] [type="text"]
value.
Descendant A B ul li <li> elements that are inside a <ul>.
<p> elements that are direct children of a
Child A > B div > p
<div>.
, :nth- Selects elements based on their state or position
Pseudo-class :class :hover
child(n) (e.g., when the mouse is over them).
Export to Sheets

The Box Model

The CSS Box Model is a fundamental concept that describes how elements are rendered on a
web page. Every HTML element is treated as a rectangular box, and this box is composed of
four distinct layers, from the inside out:

1. Content: The actual content of the element (text, images, etc.). Its dimensions are
determined by the element's width and height properties.
2. Padding: The transparent space between the Content and the Border. It is inside
the element's boundary.
3. Border: The line that surrounds the padding and content. You can set its width,
style, and color.
4. Margin: The transparent space outside the Border. It creates space between the
element and other adjacent elements.

Different Media Queries in CSS

Media Queries are a CSS technique that allows content to adapt to different devices or
screen conditions (like screen resolution, orientation, or device type).

The basic syntax is @media media-type and (media-feature) { /* CSS rules */ }.

Key media types:

 screen: For color computer screens.

 print: For paginated material (when printing).
 all: For all devices.
Key media features used for responsive design:

 min-width / max-width: The most common, used to apply styles when the viewport
is at least/at most a specific width (e.g., @media (max-width: 600px) for mobile
styles).
 orientation: Checks if the device is in portrait or landscape mode.
 min-height / max-height: Checks the height of the viewport.

Grid Property in CSS (CSS Grid Layout)

CSS Grid is a two-dimensional layout system (rows and columns) for arranging content. It's
excellent for overall page structure.

Property Description Example

display: grid Makes an element a grid container. display: grid;
grid-template- Defines the number and width of the 1fr 1fr 1fr (three equal
columns columns. columns)
grid-template- Defines the number and height of the
rows auto 100px (two rows)
rows.
grid-gap
Shorthand for row-gap and column-gap 10px
(space between grid items).
grid-column / Used on grid items to specify which grid-column: 1 / 3;
grid-row columns/rows they span. (Spans from line 1 to 3)
Export to Sheets

Different display Property in CSS

The display property is crucial for defining how an element behaves and interacts with other
elements.

Value Description Similar to...

block
The element takes up the full width and starts on a new line Block-level
(e.g., div, p). element
inline
The element takes up only the necessary space and flows on Inline-level
the same line (e.g., span, a). element
inline- Flows inline, but accepts width and height properties (a
block combination of both).
none
The element is completely removed from the document flow
(it doesn't occupy any space).
Transforms the element into a Flex Container for one-
flex Flexbox
dimensional layouts.
Transforms the element into a Grid Container for two-
grid CSS Grid
dimensional layouts.
Export to Sheets

Web Page using Flexbox Layout Properties

Flexbox (Flexible Box Layout) is a one-dimensional layout system (either a row or a
column) used for arranging elements and distributing space within a container.

Example Code:

HTML
<style>
.flex-container {
display: flex; /* 1. Makes it a flex container */

/* 2. Flex-container properties */
flex-direction: row; /* Items arranged horizontally */
justify-content: space-around; /* Distributes space evenly around
items */
align-items: center; /* Vertically centers items along the cross-
axis */

height: 150px;
background-color: lightgray;
border: 2px solid darkgray;
}
.flex-item {
padding: 15px;
margin: 5px;
background-color: steelblue;
color: white;
font-weight: bold;
}
</style>

<div class="flex-container">
<div class="flex-item">Box 1</div>
<div class="flex-item">Box 2</div>
<div class="flex-item">Box 3</div>
</div>

Key Flexbox Properties:

Property Applied to Description

display: flex Container Activates the Flexbox layout.
flex-
direction Container Defines the main axis (row, row-reverse, column, etc.).
justify- Aligns items along the main axis (e.g., center, space-
content Container
between).
align-items Container Aligns items along the cross axis (e.g., center, flex-start).
Specifies how much an item should grow relative to the others to
flex-grow Item
fill available space.
Export to Sheets

Web and Networking Fundamentals

Distinguish Between a Web Browser and a Search Engine
Feature Web Browser Search Engine
Software application used to access Website or application that searches the
Function and display web pages and other Internet for content based on keywords
content on the World Wide Web. provided by the user.
A client program (like an app) that A service running on web servers; you
Nature
runs on your local machine. access it through a web browser.
To index, rank, and retrieve relevant
To render HTML, CSS, and
Goal information from the vast number of
JavaScript into a readable web page.
websites.
Examples Chrome, Firefox, Safari, Edge. Google, Bing, DuckDuckGo.
Export to Sheets

The Internet and WWW

 The Internet: A massive global network of interconnected computers (hardware and

infrastructure). It is the underlying physical and logical infrastructure that allows data
(via protocols like IP and TCP) to be transferred between devices worldwide. It's the
highway.
 The World Wide Web (WWW or the Web): A system of linked resources
(documents, images, videos) that are accessed over the Internet via the HTTP
protocol. The Web is a service that runs on the Internet. It's the traffic traveling on
the highway.

Telnet and its Characteristics

Telnet (Telecommunication Network) is an old network protocol used to provide a

command-line interface (CLI) for communicating with a remote device (server or
computer).

Characteristics:

1. Client-Server Protocol: Requires a Telnet client (on your machine) to connect to a

Telnet server (on the remote machine).
2. Remote Access: Allows a user to log in and execute commands on a remote system
as if they were sitting directly in front of it.
3. Plain Text: A major vulnerability is that it transmits all data, including usernames
and passwords, in unencrypted plain text. This makes it highly insecure for use
over the public Internet.
4. Port 23: Uses TCP port 23 by default.
5. Mostly Obsolete: Largely replaced by SSH (Secure Shell), which provides the same
functionality but with strong encryption.

DNS (Domain Name System)

DNS is the Internet's phone book. It is a hierarchical and decentralized naming system for
computers, services, or any resource connected to the Internet.

 Function: It translates human-friendly domain names (e.g., [Link]) into

computer-friendly IP addresses (e.g., [Link]).
  Process: When you type a domain name into your browser, the DNS system is
queried to find the corresponding IP address so that your browser can connect to the
correct web server. Without DNS, you would have to remember a long string of
numbers for every website.

Web and Proxy Server

Feature Web Server Proxy Server

To store, process, and deliver web
To act as an intermediary (a 'go-
pages (HTML, CSS, images) to clients
Purpose between') for requests from clients
(web browsers) upon request, using
seeking resources from other servers.
the HTTP protocol.
The final destination for a browser'sSits between the client (your PC) and the
Location
request for content. web server.
Caching (saving popular pages),
Key Host websites, handle HTTP requests,
Security (filtering requests),
Functions execute server-side scripts.
Anonymity/Privacy, Access Control.
Squid, Nginx (often configured as a
Example Apache HTTP Server, Nginx, IIS.
reverse proxy).
Export to Sheets

ISP and its Characteristics

ISP (Internet Service Provider) is a company that provides customers with access to the
Internet.

Characteristics:

1. Gateway to the Internet: ISPs own the necessary networking equipment (routers,
modems, cables, etc.) and connectivity to the Internet backbone.
2. Connection Methods: Offer various connection types, including DSL, Cable, Fiber
Optics (FTTH/FTTC), and Satellite.
3. Services:
o Internet Access: The core service.
o Email Services: Providing user email addresses.
o Web Hosting: Providing space on their servers for customers to host websites.
o Domain Registration: Assisting customers in registering domain names.
4. Network Management: Manage IP address assignment (often via DHCP) and
network security.

File Transfer Protocol (FTP)

FTP is a standard network protocol used for the transfer of computer files between a client
and a server on a computer network.

 Function: It enables the upload and download of files, making it essential for tasks
like transferring web pages from a developer's computer to a web server.
 Mode: It operates on a client-server model.
 Ports: Uses two channels:
 o Port 21: For the Control Connection (commands, authentication).
o Port 20 (or a dynamic port): For the Data Connection (the actual file
transfer).
 Security: Like Telnet, traditional FTP is insecure because it transmits passwords in
plain text. It has largely been replaced by SFTP (Secure File Transfer Protocol) or
FTPS (FTP over SSL/TLS) for secure file transfers.

Proxy Server

(This repeats the earlier topic, but here is a concise summary focusing on its role.)

A Proxy Server is a server that acts as an intermediate gateway between an end-user and
the Internet.

Primary Roles:

1. Security/Filtering: Can block malicious traffic or filter access to certain websites

(e.g., a corporate firewall).
2. Caching: Stores copies of frequently accessed web pages (caching) to speed up
response times for subsequent requests.
3. Privacy/Anonymity: Can hide the client's original IP address, providing a degree of
anonymity.
4. Load Balancing (Reverse Proxy): A reverse proxy is placed in front of web servers
to distribute client requests among them, improving efficiency and reliability.

is it covering every imp ?

Google Search
Google Search

 Query successful

Try again without apps

The important topics for a [Link]. Web Technologies first-semester exam usually cover the
foundational building blocks of the web.

Based on general [Link]. Web Technologies or similar program syllabi, and common
"important question" sets, the most crucial topics are highly likely to be:

Unit 1: Internet & Web Basics (Theory)

 Internet and World Wide Web (WWW):

o Difference between Internet, Intranet, and Extranet.
o Evolution and history of the WWW.
o Protocols: HTTP, FTP, DNS, IP Address, URL.
o Web Architecture: Web Browsers vs. Web Servers (their functions and
working).
o Static vs. Dynamic Websites.
Unit 2: HTML & XHTML (Practical & Theory)

 Basic Structure of HTML/XHTML Document: <html>, <head>, <body> tags.

 Basic Tags and Attributes: Headings, Paragraphs, Line Breaks (<br>), Horizontal
Rule (<hr>).
 Text Formatting Tags: Syntactic and Semantic tags (e.g., <b>, <i>, <strong>,
<em>).
 Lists: Ordered Lists (<ol>), Unordered Lists (<ul>), Definition Lists (<dl>) with
examples.
 Hyperlinks/Anchors: Different types of links (internal, external, email) and the
Anchor tag (<a>) with all its attributes (href, target).
 Images and Multimedia: Image tag (<img>) with attributes (e.g., src, alt, height,
width).
 Tables: Creation of tables, table tags (<table>, <tr>, <th>, <td>), and attributes like
rowspan and colspan.
 Forms:
o The <form> tag and its attributes (action, method - GET vs. POST).
o Different Form Input Controls (text, password, checkbox, radio button,
submit, reset, etc.).

Unit 3: Cascading Style Sheets (CSS) (Practical & Theory)

 Introduction to CSS: Definition, advantages, and limitations.

 Types of Style Sheets: Inline, Internal (Embedded), and External Style Sheets (be
prepared to explain/demonstrate all three).
 CSS Selectors: ID selector (#), Class selector (.), Element/Tag selector, Grouping
selectors.
 CSS Properties:
o Text and Font Properties (color, font-family, font-size, text-align).
o Box Model: Understanding and explaining Margin, Border, and Padding.
o Background and List Properties.

Unit 4: JavaScript (Client-Side Scripting) (Practical & Theory)

 Basics of JavaScript: Introduction, difference between client-side and server-side

scripting.
 Data Types and Variables.
 Operators and Expressions.
 Control Structures: Conditional statements (if-else, switch) and Looping
statements (for, while, do-while).
 Functions: Defining and calling functions.
 Arrays.
 Objects: Introduction to built-in objects (e.g., String, Math, Date).
 Event Handling: Common events (e.g., onclick, onmouseover, onsubmit).
 Form Validation using JavaScript.

Recommendation:
You should prioritize the core web development technologies: HTML, CSS, and basic
JavaScript. These topics consistently appear as the foundation of any first-semester Web
Technologies curriculum. Make sure you can write short, working code snippets for all the
practical concept