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

Unit 2: Tables, links, frames and DHTML

Web Technologies notes · PTU syllabus (BSIT304)

3 min read4 topics10 exam questions
On this page
  1. Unit summary
  2. Tables: rows, headers, captions and attributes
  3. Internal and external document links
  4. Image maps
  5. Frames, framesets and cascading style sheets
  6. Key terms
  7. Quick revision
  8. Important questions

Unit summary

Tables organise data, links connect pages and CSS styles them. This unit covers table structure with header and data rows and captions, cell padding, cell spacing, bgcolor, colspan and rowspan, internal and external links, image maps, frames and framesets, and cascading style sheets.

After this unit you can

  • Build tables with attributes
  • Create internal and external links and image maps
  • Use frames and framesets
  • Style pages with CSS

PTU syllabus topics

  • Table structure with header/data rows/caption
  • cell padding/spacing/BGCOLOR/colspan/rowspan attributes
  • internal and external document links
  • image maps
  • frames and framesets
  • cascading style sheets
ComparisonWays to add CSS
Where it goes
Best for

Inline

style attribute on an element

Quick one-off changes

Internal

<style> in the head

A single page

External

Separate .css file linked in

Whole websites

1

Topic 1

Tables: rows, headers, captions and attributes

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

Topic 2

Internal and external document 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>.
3

Topic 3

Image maps

  • Image map: an image with clickable regions linking to different pages.
html<img src="india.png" alt="Map of India" usemap="#states">
<map name="states">
  <area shape="rect" coords="10,10,100,80" href="punjab.html" alt="Punjab">
  <area shape="circle" coords="200,150,40" href="delhi.html" alt="Delhi">
  <area shape="poly" coords="300,50,350,120,260,120" href="rajasthan.html" alt="Rajasthan">
</map>
4

Topic 4

Frames, framesets and cascading style sheets

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

colspan
Attribute making a cell span several columns
Hyperlink
Link from one resource to another
Image map
Image with clickable regions
Frameset
Division of a window into frames (obsolete in HTML5)
CSS
Language describing presentation of web pages

Quick revision

  • table, tr, th, td, caption; border, cellpadding, cellspacing, bgcolor, colspan, rowspan.
  • a href; internal (#id) and external links; target.
  • map and area; rect, circle, poly.
  • frameset, frame, iframe.
  • Inline, internal, external CSS; selectors.

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.Distinguish cellpadding and cellspacing.
  2. Q2.What does rowspan do?
  3. Q3.Write the tag for an internal link.
  4. Q4.What is an image map?
  5. Q5.Why are frames not used in HTML5?
  6. Q6.Name the three ways of adding CSS.

Long-answer questions

  1. Q1.Explain table tags and attributes with an example.
  2. Q2.Explain internal and external links and image maps.
  3. Q3.Explain frames and framesets.
  4. Q4.Explain cascading style sheets with examples.

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