Synetic College Logo
Unit 1 of 4 · B.Sc IT Sem 3

Unit 1: Introduction to HTML

Web Technologies notes · PTU syllabus (BSIT304)

3 min read6 topics10 exam questions
On this page
  1. Unit summary
  2. Web server and browser communication
  3. HTML tags
  4. Document structure: head, body, titles and footers
  5. Text formatting, heading styles and text styles
  6. Lists
  7. Adding graphics with border, width, height, align and alt
  8. Key terms
  9. Quick revision
  10. Important questions

Unit summary

HTML is the language that structures every web page. This unit covers communication between web servers and browsers, HTML tags, document head and body structure, titles and footers, text formatting, heading and text styles, lists, and adding graphics with border, width, height, align and alt attributes.

After this unit you can

  • Explain web server and browser communication
  • Structure an HTML document with head and body
  • Format text, headings and lists
  • Add images with attributes

PTU syllabus topics

  • Web server and browser communication
  • HTML tags
  • document head/body structure
  • titles and footers
  • text formatting
  • heading styles
  • text styles
  • lists
  • adding graphics with border/width/height/align/alt attributes
ClassificationStructure of an HTML page
<html>

  • <head>

    Title, meta tags, CSS links

  • <body>

    Visible content

  • Text

    <h1>–<h6>, <p>, <b>, <i>

  • Lists

    <ul>, <ol>, <li>

  • Media and links

    <img>, <a href>

1

Topic 1

Web server and browser communication

The internet is a global network of interconnected computer networks that communicate using the TCP/IP protocols. The World Wide Web (WWW) is a service on the internet made of linked web pages accessed through HTTP/HTTPS.

ProcessHow a web page reaches you
  1. 1Type a URL

    https://www.sbs.ac.in

  2. 2DNS lookup

    Domain name translated to an IP address

  3. 3Request

    Browser sends an HTTP request to the web server

  4. 4Response

    Server sends back HTML, CSS, JS and images

  5. 5Render

    Browser displays the page

  • Domain name: a readable address (sbs.ac.in). Top-level domains include .com, .org, .edu, .in, .ac.in.
  • Connectivity: dial-up (old), broadband, fibre, mobile data (4G/5G) and Wi-Fi, provided by an ISP (Internet Service Provider).
  • Web browser (Chrome, Firefox, Edge) requests and displays pages; a web server stores and serves them.
ProcessRequest–response cycle
  1. 1

    User enters a URL

  2. 2

    DNS resolves the domain to an IP address

  3. 3

    Browser sends an HTTP request

  4. 4

    Web server (Apache, Nginx, IIS) processes it

  5. 5

    Server returns an HTTP response with HTML

  6. 6

    Browser renders the page and requests images, CSS and scripts

2

Topic 2

HTML tags

HTML (HyperText Markup Language) describes the structure of a web page using tags in angle brackets.

ComparisonPaired vs singular tags
Paired (container) tags
Singular (empty) tags

Structure

Opening and closing tag

Only one tag

Content

Wraps content

No content

Examples

<p>…</p>, <b>…</b>, <h1>…</h1>

<br>, <hr>, <img>

Attributes give extra information inside the opening tag: <img src="logo.png" alt="SBS logo">.

3

Topic 3

Document structure: head, body, titles and footers

html<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Welcome to SBS</h1>
    <p>This is a paragraph.</p>
    <footer>Copyright 2026</footer>
  </body>
</html>
  • <head> holds information about the page (title, meta tags, CSS links) — not shown in the page body.
  • <title> appears on the browser tab.
  • <body> holds everything visible on the page.
  • Footer: the footer element (or a final section) holds copyright, contact and links, e.g. a footer with "© 2026 SBS".
4

Topic 4

Text formatting, heading styles and text styles

TagEffect
<h1> to <h6>Headings, largest to smallest
<p>Paragraph
<br> / <hr>Line break / horizontal rule
<b> or <strong>Bold (strong also means importance)
<i> or <em>Italic (em also means emphasis)
<u>Underline
<sup> / <sub>Superscript / subscript
<pre>Preformatted text (keeps spaces)

Colours can be written as names (red), hexadecimal codes (#FF0000) or RGB values (rgb(255, 0, 0)). In modern HTML they are applied with CSS: <p style="color:#0b6b3a">Green text</p>.

Exam tip

Hex colour codes use pairs for red, green and blue from 00 to FF: #000000 is black and #FFFFFF is white.

5

Topic 5

Lists

ComparisonHTML lists
Tags
Use

Unordered

<ul> with <li>

Bulleted items where order doesn't matter

Ordered

<ol> with <li>

Numbered steps; type="1", "A", "a", "I", "i"

Definition

<dl>, <dt>, <dd>

Terms and their descriptions

html<ol type="I">
  <li>Admission</li>
  <li>Registration</li>
</ol>
6

Topic 6

Adding graphics with border, width, height, align and alt

<img src="campus.jpg" alt="SBS campus" width="400" height="250" border="1" align="left">

  • src: path of the image (required).
  • alt: text shown if the image fails to load, and read by screen readers — also important for SEO.
  • width/height: size in pixels.
  • border/align: older attributes, now usually done with CSS.

Key terms

Web server
Software delivering web pages over HTTP
Browser
Software that requests and renders web pages
Tag
HTML element marker in angle brackets
Attribute
Extra information inside an opening tag
alt text
Text alternative for an image

Quick revision

  • URL, DNS, HTTP request and response.
  • Paired and empty tags; attributes.
  • html, head, title, body; footer.
  • Headings h1–h6, b, i, u, font, colours.
  • ol, ul, dl; img with src, alt, width, height, border, align.

Important exam questions

Practice questions written to the PTU exam pattern for this unit's syllabus: short answers (Section A style) and long answers (Sections B and C style).

Short-answer questions

  1. Q1.How does a browser communicate with a web server?
  2. Q2.Distinguish paired and empty tags.
  3. Q3.What is the purpose of the head section?
  4. Q4.Name the six heading tags.
  5. Q5.Distinguish ordered and unordered lists.
  6. Q6.Why is the alt attribute important?

Long-answer questions

  1. Q1.Explain web server and browser communication.
  2. Q2.Explain the structure of an HTML document.
  3. Q3.Explain text formatting and list tags with examples.
  4. Q4.Explain how images are added to a page with their attributes.

Stuck on this unit?

Message SBS on WhatsApp for help with Web Technologies, or to ask about studying B.Sc IT at Synetic.

WhatsApp us