Synetic College Logo
Unit 2 of 4 · BCA Sem 2

Unit 2: Lists, graphics, tables, links and frames

Web Technologies notes · PTU syllabus (UGSEC2505)

3 min read5 topics10 exam questions
On this page
  1. Unit summary
  2. Lists
  3. Adding graphics
  4. Tables
  5. Links
  6. Frames and introduction to CSS
  7. Key terms
  8. Quick revision
  9. Important questions

Unit summary

Real web pages are more than text: they need lists, images, tables, links and layouts. This unit covers ordered, unordered and definition lists, adding graphics, building tables, creating internal and external links, frames, and an introduction to CSS for styling.

After this unit you can

  • Create ordered, unordered and definition lists
  • Insert images with border, size, alignment and alt text
  • Build tables using caption, cellpadding, cellspacing, colspan and rowspan
  • Create internal, external and image links, use frames and apply basic CSS

PTU syllabus topics

  • Unordered/ordered/definition lists
  • adding graphics (border, width/height, align, alt attributes)
  • tables (header, data rows, caption, cell padding/spacing, colspan/rowspan)
  • internal and external hyperlinks
  • image hyperlinks
  • frames and framesets
  • introduction to Cascading Style Sheets
Key termsTable attributes that matter
colspan
Merges cells across columns
rowspan
Merges cells across rows
cellpadding
Space inside a cell
cellspacing
Space between cells
caption
Title shown above the table
1

Topic 1

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>
2

Topic 2

Adding graphics

<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.
3

Topic 3

Tables

Tag or attributePurpose
<table>Creates the table
<tr>A table row
<th>A header cell (bold, centred)
<td>A data cell
<caption>A title for the table
cellpaddingSpace inside each cell
cellspacingSpace between cells
colspanMakes a cell span several columns
rowspanMakes a cell span several rows
html<table border="1" cellpadding="5">
  <caption>Timetable</caption>
  <tr><th>Day</th><th colspan="2">Lectures</th></tr>
  <tr><td>Monday</td><td>C++</td><td>OS</td></tr>
</table>
4

Topic 4

Links

Links are made with the anchor tag <a href="...">.

  • External link: <a href="https://www.sbs.ac.in" target="_blank">SBS</a> (opens in a new tab).
  • Internal link (same page): give the target an id — <h2 id="fees">Fees</h2> — and link to it with <a href="#fees">Go to fees</a>.
  • Link to another page: <a href="contact.html">Contact</a>.
  • Image link: put an <img> inside <a>.
  • Email link: <a href="mailto:info@sbs.ac.in">Email us</a>.
5

Topic 5

Frames and introduction to CSS

Frames divide the browser window into parts, each showing a different page, using <frameset cols="25%,75%"> and <frame src="menu.html">. Frames are obsolete in HTML5; <iframe> is used to embed one page inside another. CSS (Cascading Style Sheets) controls presentation — colours, fonts, spacing and layout — separately from HTML structure.

ComparisonWays to add CSS
How
Best for

Inline

style attribute on a tag

A single element

Internal

<style> block in the head

One page

External

A separate .css file linked with <link>

A whole website

cssh1 { color: #0b6b3a; font-family: Arial; }
.highlight { background-color: yellow; }
#footer { text-align: center; }

Selectors: element (h1), class (.highlight) and id (#footer). "Cascading" means that when rules conflict, the more specific or later rule wins.

Key terms

alt attribute
Alternative text for an image
colspan/rowspan
Make a table cell span columns/rows
Anchor tag
The <a> tag used for hyperlinks
Frameset
An obsolete way to split a window into frames
CSS
Style sheets that control the look of HTML

Quick revision

  • ul = bullets, ol = numbers, dl = definitions.
  • img needs src and should always have alt.
  • th = header cell; colspan/rowspan merge cells.
  • Internal link: href="#id"; target="_blank" opens a new tab.
  • CSS: inline, internal, external; selectors element, .class, #id.

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.Differentiate between ordered and unordered lists.
  2. Q2.What is the use of the alt attribute?
  3. Q3.Differentiate between cellpadding and cellspacing.
  4. Q4.How do you create a link to a section of the same page?
  5. Q5.What are frames? Why are they no longer used?
  6. Q6.Name the three ways of adding CSS.

Long-answer questions

  1. Q1.Explain the types of lists in HTML with examples.
  2. Q2.Create a class timetable using a table with colspan and rowspan and explain the tags used.
  3. Q3.Explain the different types of hyperlinks in HTML with examples.
  4. Q4.What is CSS? Explain its types and selectors with examples.

Stuck on this unit?

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

WhatsApp us