Unit 2: Lists, graphics, tables, links and frames
Web Technologies notes · PTU syllabus (PGCA1909)
On this page
- Unit summary
- Unordered, ordered and definition lists
- Adding graphics with border, width, height, align and alt
- Tables: headers, captions, cell padding, cell spacing, colspan and rowspan
- Internal and external hyperlinks
- Image hyperlinks and image maps
- Image maps
- Frames, framesets and cascading style sheets
- Key terms
- Quick revision
- Important questions
Unit summary
Lists, images, tables, links, frames and style sheets turn plain text into usable pages. This unit covers unordered, ordered and definition lists, graphics with border, width, height, align and alt, tables with headers, captions, cell padding and spacing, colspan and rowspan, internal, external and image hyperlinks, frames and framesets, and cascading style sheets.
After this unit you can
- Create unordered, ordered and definition lists
- Insert graphics with attributes
- Build tables and hyperlinks, including image links
- Use frames and cascading style sheets
PTU syllabus topics
- Unordered/ordered/definition lists
- graphics attributes (border, width/height, align, alt)
- tables (header, caption, cell padding/spacing, colspan/rowspan)
- internal/external hyperlinks and image hyperlinks
- frames and framesets
- Cascading Style Sheets
Unordered
<ul> with <li>
Bullets
Ordered
<ol> with <li>
Numbers or letters
Definition
<dl> with <dt> and <dd>
Terms and descriptions
Topic 1
Unordered, ordered and definition lists
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>Topic 2
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.
Topic 3
Tables: headers, captions, cell padding, cell spacing, colspan and rowspan
| Tag or attribute | Purpose |
|---|---|
| <table> | Creates the table |
| <tr> | A table row |
| <th> | A header cell (bold, centred) |
| <td> | A data cell |
| <caption> | A title for the table |
| cellpadding | Space inside each cell |
| cellspacing | Space between cells |
| colspan | Makes a cell span several columns |
| rowspan | Makes 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>Topic 4
Internal and external hyperlinks
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>.
Topic 5
Image hyperlinks and image maps
html<!-- an image used as a link -->
<a href="https://www.sbs.ac.in" target="_blank">
<img src="sbs-logo.png" alt="SBS home page" width="120">
</a>Topic 6
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>Topic 7
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.
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
- Definition list
- List of terms and descriptions using dl, dt and dd
- alt attribute
- Text alternative for an image
- colspan
- Attribute making a cell span several columns
- Image hyperlink
- Image that acts as a link
- CSS
- Style sheet language controlling presentation
Quick revision
- ul, ol (type, start), dl, dt, dd.
- img src, alt, width, height, border, align.
- table, tr, th, td, caption; cellpadding, cellspacing, colspan, rowspan.
- a href; internal (#id), external, image links; target.
- frameset, frame, iframe; inline, internal and 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
- Q1.Distinguish ordered and unordered lists.
- Q2.Why is the alt attribute important?
- Q3.Distinguish cellpadding and cellspacing.
- Q4.How do you make an image a hyperlink?
- Q5.What is a frameset?
- Q6.Name the three ways of applying CSS.
Long-answer questions
- Q1.Explain lists and graphics in HTML with examples.
- Q2.Design a timetable using table attributes.
- Q3.Explain internal, external and image hyperlinks and image maps.
- Q4.Explain frames and cascading style sheets.
Stuck on this unit?
Message SBS on WhatsApp for help with Web Technologies, or to ask about studying M.Sc IT at Synetic.