Scribd
Upload
1 views41 pages

ICT HSC Chapter4 Study Guide

This document is a comprehensive study guide for HTML and web design, specifically tailored for the HSC exam. It provides step-by-step instructions on various HTML topics, including basic tags, text formatting, and lists, with examples of problems, expected outputs, reasoning, and solution code. Each topic is structured to facilitate learning through practical exercises that can be directly implemented in HTML documents.

Uploaded by

mahirsmt5
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1 views41 pages

ICT HSC Chapter4 Study Guide

This document is a comprehensive study guide for HTML and web design, specifically tailored for the HSC exam. It provides step-by-step instructions on various HTML topics, including basic tags, text formatting, and lists, with examples of problems, expected outputs, reasoning, and solution code. Each topic is structured to facilitate learning through practical exercises that can be directly implemented in HTML documents.

Uploaded by

mahirsmt5
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

ICT HSC Chapter 4 — Web Design &

HTML Complete Study Guide

A step-by-step guide through HTML tags for the HSC exam. Every topic has the
problem, what the output looks like, how to think about it, and the solution code.

How to read this guide

Every topic follows the same pattern:

1. Problem — what the HTML should do


2. Output — what the webpage should look like (shown in a box)
3. How to think — the reasoning steps to build it
4. Solution — the HTML code

All examples are complete HTML documents. Just copy and save as .html , then
open in a browser.

Topic 1: HTML Basics

Tags you will use in this topic

• <html> ... </html> — the root tag that wraps everything


• <head> ... </head> — holds the title and meta info
• <title> ... </title> — the text shown on the browser tab
• <body> ... </body> — holds everything visible on the page
• bgcolor="..." — sets the background color of the page
• text="..." — sets the text color of the page
Exercise 1: Your first HTML page

Problem

Create a webpage with the title "My First Page" and show "Hello World!" in the body.

What it looks like

Browser tab says: My First Page


Page shows: Hello World!

How to think

Step 1: Every HTML page has <html> at the top and </html> at the bottom.

Step 2: Inside <html> , there are two parts: <head> and <body> .

Step 3: The <head> holds the <title> . The <body> holds what you see on the
page.

Solution

<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello World!
</body>
</html>

Exercise 2: Page with colored background and text

Problem

Create a webpage with a yellow background, blue text, and the title "Colors".

What it looks like

Page background: yellow


Text color: blue
The page says: This is my colored page

How to think

Step 1: The <body> tag has attributes. An attribute goes inside the opening tag.
Step 2: bgcolor="yellow" makes the background yellow.

Step 3: text="blue" makes all text blue.

Solution

<html>
<head>
<title>Colors</title>
</head>
<body bgcolor="yellow" text="blue">
This is my colored page
</body>
</html>

Exercise 3: Background with image and link/vlink/alink colors

Problem

Create a page with background image [Link] , normal link color green, visited link
color red, active link color blue.

How to think

Step 1: Background image uses background="filename" inside <body> .

Step 2: link sets color of unvisited links. vlink sets visited link color. alink sets
color when clicking.

Step 3: You need a link to see the colors work. Use <a href="[Link]">Click</a> .

Solution

<html>
<head>
<title>Background and Links</title>
</head>
<body background="[Link]" link="green" vlink="red" alink="blue">
<a href="[Link]">Click here</a>
</body>
</html>
Topic 2: Text Formatting

Tags you will use in this topic

• <b> ... </b> — bold text


• <i> ... </i> — italic text
• <u> ... </u> — underlined text
• <strong> ... </strong> — strong (same as bold, but for screen readers)
• <em> ... </em> — emphasis (same as italic)
• <h1> ... </h1> — largest heading
• <h2> ... </h2> — second largest heading
• <h3> ... </h3> — third largest heading
• <h4> ... </h4> — fourth largest heading
• <h5> ... </h5> — fifth largest heading
• <h6> ... </h6> — smallest heading
• <p> ... </p> — paragraph (adds space before and after)
• <br> — line break (no closing tag needed)
• <hr> — horizontal line (no closing tag needed)
• <font> ... </font> — change font face, size, color
• <sub> ... </sub> — subscript (text slightly below the line)
• <sup> ... </sup> — superscript (text slightly above the line)
• <pre> ... </pre> — preformatted text (keeps all spaces and line breaks)

Font attributes: - face="Arial" — font style - size="5" — font size (1 to 7) -


color="red" — font color

Exercise 1: Headings

Problem

Show all six heading sizes from h1 to h6.

What it looks like

This is Heading 1 (biggest)


This is Heading 2
This is Heading 3
This is Heading 4
This is Heading 5
This is Heading 6 (smallest)
How to think

Step 1: <h1> is the biggest, <h6> is the smallest.

Step 2: Each heading automatically puts a new line before and after.

Solution

<html>
<head>
<title>Headings</title>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>
</html>

Exercise 2: Bold, Italic, Underline

Problem

Show one line in bold, one in italic, one underlined, and one with all three.

What it looks like

This is bold
This is italic
This is underlined
This is bold italic and underlined

How to think

Step 1: Wrap the text in <b> for bold, <i> for italic, <u> for underline.

Step 2: You can put tags inside tags (nesting). <b><i><u>text</u></i></b> does all
three.

Step 3: Close in reverse order — last opened, first closed.

Solution

<html>
<head>
<title>Bold Italic Underline</title>
</head>
<body>
<b>This is bold</b><br>
<i>This is italic</i><br>
<u>This is underlined</u><br>
<b><i><u>This is bold italic and underlined</u></i></b>
</body>
</html>

Exercise 3: Paragraph and line break

Problem

Show two paragraphs separated by a line, and a poem with line breaks.

What it looks like

This is the first paragraph. It has multiple sentences.


There is a horizontal line below.

----------------------------------------------------------------

This is the second paragraph.


Now a poem:<br>
Roses are red<br>
Violets are blue

How to think

Step 1: <p> adds space before and after. Use it for paragraphs.

Step 2: <br> just goes to the next line without extra space. Use it inside a
paragraph.

Step 3: <hr> draws a horizontal line across the page.

Solution

<html>
<head>
<title>Paragraph and Breaks</title>
</head>
<body>
<p>This is the first paragraph. It has multiple sentences.</p>
<hr>
<p>This is the second paragraph.</p>
Now a poem:<br>
Roses are red<br>
Violets are blue
</body>
</html>

Exercise 4: Font tag with face, size, color

Problem

Show the same word "Hello" in three different styles: big red Arial, medium green
Times New Roman, small blue Courier New.

What it looks like

Hello (big, red, Arial)


Hello (medium, green, Times New Roman)
Hello (small, blue, Courier New)

How to think

Step 1: <font> has three attributes: face , size , color .

Step 2: size goes from 1 (smallest) to 7 (biggest). Default is 3.

Step 3: color can be a name (red, blue) or hex code (#FF0000).

Solution

<html>
<head>
<title>Font Tag</title>
</head>
<body>
<font face="Arial" size="7" color="red">Hello</font><br>
<font face="Times New Roman" size="5" color="green">Hello</font><br>
<font face="Courier New" size="2" color="blue">Hello</font>
</body>
</html>

Exercise 5: Subscript and superscript

Problem

Show the chemical formula H2O (with 2 as subscript) and the mathematical
expression X2+Y2 (with 2 as superscript).
What it looks like

H₂O (the 2 is below the line)


X² + Y² (the 2 is above the line)

How to think

Step 1: <sub> makes text smaller and below the normal line. Use it for chemical
formulas.

Step 2: <sup> makes text smaller and above the normal line. Use it for powers/
exponents.

Solution

<html>
<head>
<title>Subscript and Superscript</title>
</head>
<body>
H<sub>2</sub>O<br>
X<sup>2</sup> + Y<sup>2</sup>
</body>
</html>

Exercise 6: Mix all text formatting

Problem

Create a heading "Notice" that is h1, centered (use align="center" ), with a


horizontal line below it. Then a paragraph in bold red font.

What it looks like

NOTICE
________________________________________

This is a bold red notice text.

How to think

Step 1: <h1 align="center"> centers the heading.

Step 2: <hr> draws a line.

Step 3: Wrap the paragraph text in <b> and <font color="red"> at the same time.
Solution

<html>
<head>
<title>Notice</title>
</head>
<body>
<h1 align="center">NOTICE</h1>
<hr>
<p><b><font color="red">This is a bold red notice text.</font></b></p>
</body>
</html>

Topic 3: Lists

Tags you will use in this topic

• <ul> ... </ul> — unordered list (bullet points)


• <ol> ... </ol> — ordered list (numbered)
• <li> ... </li> — list item (inside ul or ol)
• type attribute — changes the bullet or number style

Type values for <ul> : - type="disc" — filled circle (default) - type="circle" —


empty circle - type="square" — square

Type values for <ol> : - type="1" — numbers (1, 2, 3...) (default) - type="A" —
capital letters (A, B, C...) - type="a" — small letters (a, b, c...) - type="I" — Roman
numbers (I, II, III...) - type="i" — small Roman (i, ii, iii...)

Exercise 1: Unordered list with different bullet styles

Problem

Create three unordered lists using disc, circle, and square. Each list has three items:
Apple, Banana, Cherry.

What it looks like

Fruits with disc:


• Apple
• Banana
• Cherry
Fruits with circle:
○ Apple
○ Banana
○ Cherry

Fruits with square:


▪ Apple
▪ Banana
▪ Cherry

How to think

Step 1: <ul> starts the list, </ul> ends it.

Step 2: Each item goes inside <li> ... </li> .

Step 3: Add type="circle" or type="square" inside <ul> to change the bullet.

Solution

<html>
<head>
<title>Unordered List</title>
</head>
<body>
Fruits with disc:
<ul type="disc">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>

Fruits with circle:


<ul type="circle">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>

Fruits with square:


<ul type="square">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
</body>
</html>
Exercise 2: Ordered list with different numbering styles

Problem

Create four ordered lists: with numbers (1, 2, 3), capital letters (A, B, C), small letters
(a, b, c), and Roman numerals (I, II, III).

What it looks like

Numbers:
1. First
2. Second
3. Third

Letters:
A. First
B. Second
C. Third

Small letters:
a. First
b. Second
c. Third

Roman:
I. First
II. Second
III. Third

How to think

Step 1: <ol> starts an ordered list.

Step 2: type="A" gives capital letters, type="a" gives small letters, type="I" gives
Roman.

Solution

<html>
<head>
<title>Ordered List</title>
</head>
<body>
Numbers:
<ol type="1">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>

Letters:
<ol type="A">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>

Small letters:
<ol type="a">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>

Roman:
<ol type="I">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>

Exercise 3: Nested list (list inside a list)

Problem

Create an unordered list where "Drinks" has sub-items: Tea, Coffee, Juice. And
"Snacks" has sub-items: Biscuit, Cake.

What it looks like

Menu:
• Drinks
○ Tea
○ Coffee
○ Juice
• Snacks
○ Biscuit
○ Cake

How to think

Step 1: Put a new <ul> (or <ol> ) inside an <li> to make it a sub-list.

Step 2: The inner list is indented automatically by the browser.

Solution

<html>
<head>
<title>Nested List</title>
</head>
<body>
Menu:
<ul type="disc">
<li>Drinks
<ul type="circle">
<li>Tea</li>
<li>Coffee</li>
<li>Juice</li>
</ul>
</li>
<li>Snacks
<ul type="circle">
<li>Biscuit</li>
<li>Cake</li>
</ul>
</li>
</ul>
</body>
</html>

Exercise 4: Ordered list inside unordered list

Problem

Create a list where the main items are bullets, but the sub-items are numbered.

What it looks like

Subjects:
• Science
1. Physics
2. Chemistry
• Arts
1. History
2. Geography

How to think

The outer list is <ul> , the inner list (inside each <li> ) is <ol> .

Solution

<html>
<head>
<title>Mixed Nested List</title>
</head>
<body>
Subjects:
<ul type="disc">
<li>Science
<ol type="1">
<li>Physics</li>
<li>Chemistry</li>
</ol>
</li>
<li>Arts
<ol type="1">
<li>History</li>
<li>Geography</li>
</ol>
</li>
</ul>
</body>
</html>

Topic 4: Tables

Tags you will use in this topic

• <table> ... </table> — creates the table


• <tr> ... </tr> — table row
• <td> ... </td> — table data (a cell)
• <th> ... </th> — table heading (bold and centered by default)

Table attributes: - border="1" — shows borders around cells (number is border


thickness) - cellpadding="5" — space inside each cell between text and border -
cellspacing="2" — space between cells - width="400" — table width (in pixels or %)
- height="100" — table height - bgcolor="yellow" — background color of the table -
align="center" — center the table on the page - colspan="2" — make a cell span
across 2 columns - rowspan="2" — make a cell span across 2 rows

Cell attributes (inside <td> or <th> ): - align="left" / "center" / "right" —


horizontal alignment - valign="top" / "middle" / "bottom" — vertical alignment -
bgcolor="red" — cell background color - width="100" — cell width - height="50" —
cell height

Exercise 1: Simple table with borders

Problem

Create a table with 2 rows and 3 columns. Fill it with numbers. Add border=1.
What it looks like

+-----+-----+-----+
| A | B | C |
+-----+-----+-----+
| 1 | 2 | 3 |
+-----+-----+-----+

How to think

Step 1: <table border="1"> starts the table with borders.

Step 2: Each row is a <tr> . Inside each row, each cell is a <td> .

Step 3: 2 rows = 2 <tr> tags. 3 columns = 3 <td> tags inside each row.

Solution

<html>
<head>
<title>Simple Table</title>
</head>
<body>
<table border="1">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>

Exercise 2: Table with heading cells

Problem

Create a table with headings in the first row: Name, Age, City. Then add two rows of
data.

What it looks like

+--------+-----+----------+
| Name | Age | City |
+--------+-----+----------+
| Alice | 20 | Dhaka |
+--------+-----+----------+
| Bob | 22 | Chittagong |
+--------+-----+----------+

How to think

Step 1: Use <th> instead of <td> for heading cells. <th> is automatically bold and
centered.

Step 2: Put <th> inside the first <tr> . Put <td> inside the rest.

Solution

<html>
<head>
<title>Table with Headings</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>20</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Bob</td>
<td>22</td>
<td>Chittagong</td>
</tr>
</table>
</body>
</html>

Exercise 3: Cellpadding and cellspacing

Problem

Create two tables side by side. First one has cellpadding=10, second has
cellspacing=10. Both have border=1. See the difference.

What it looks like


Table 1 (cellpadding=10): text has lots of space inside each cell
Table 2 (cellspacing=10): there are big gaps between cells

How to think

Step 1: cellpadding adds space INSIDE the cell (between text and border).

Step 2: cellspacing adds space BETWEEN cells.

Solution

<html>
<head>
<title>Cellpadding and Cellspacing</title>
</head>
<body>
Cellpadding=10 (space inside):
<table border="1" cellpadding="10">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>

<br><br>

Cellspacing=10 (space between):


<table border="1" cellspacing="10">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>

Exercise 4: Colspan (merge columns)

Problem
Create a table where the top row has one big cell that spans 3 columns. The bottom
row has 3 normal cells.

What it looks like

+-------------------------+
| Merged Header |
+--------+--------+-------+
| Col 1 | Col 2 | Col 3 |
+--------+--------+-------+

How to think

Step 1: colspan="3" inside a <td> or <th> makes it stretch across 3 columns.

Step 2: When one cell spans 3 columns, you don't put 3 cells in that row — just 1.

Solution

<html>
<head>
<title>Colspan</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Merged Header</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</table>
</body>
</html>

Exercise 5: Rowspan (merge rows)

Problem

Create a table where the first cell spans 2 rows. The right side has two separate rows.

What it looks like

+--------+--------+
| | Row 1 |
| A +--------+
| | Row 2 |
+--------+--------+

How to think

Step 1: rowspan="2" inside a <td> makes it stretch across 2 rows.

Step 2: In the second row, you don't put a cell where the spanning cell is — it's
already filled.

Solution

<html>
<head>
<title>Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">A</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
</table>
</body>
</html>

Exercise 6: Table with empty boxes (full boxes and empty boxes)

Problem

Create a 2x2 table. One cell has text, one cell is empty but shows borders, one cell
uses (non-breaking space) to keep the border visible, and one cell has a different
background color.

What it looks like

+-----------+-----------+
| Has text | (empty) |
| | border |
| | visible |
+-----------+-----------+
| (nbsp) | Colored |
| border | cell |
| visible | (red bg) |
+-----------+-----------+
How to think

Step 1: An empty <td></td> might not show borders in some browsers.

Step 2: To force the border to show in an empty cell, put &nbsp; inside. &nbsp; is a
non-breaking space character.

Step 3: That's what HSC exam questions mean by "empty boxes" vs "full boxes" —
whether the borders are visible in empty cells.

Solution

<html>
<head>
<title>Empty and Full Boxes</title>
</head>
<body>
<table border="1">
<tr>
<td>Has text</td>
<td></td>
</tr>
<tr>
<td>&nbsp;</td>
<td bgcolor="red">Colored cell</td>
</tr>
</table>
<p>Top-right cell has no border in some browsers.</p>
<p>Bottom-left cell uses &amp;nbsp; to keep the border visible.</p>
</body>
</html>

Exercise 7: Time table (exam-style table question)

Problem

Create a class timetable with 3 days (Sat, Sun, Mon) and 3 periods. Add a heading
row. Use colspan for a title.

What it looks like

+------------------------------+
| Class Timetable |
+--------+--------+-----------+
| Day | Period 1 | Period 2 |
+--------+----------+---------+
| Sat | Math | Physics |
+--------+----------+---------+
| Sun | English | Chemistry |
+--------+----------+---------+
| Mon | Biology | ICT |
+--------+----------+---------+

How to think

Step 1: First row has 1 cell with colspan="3" for the title.

Step 2: Second row has headings.

Step 3: Remaining rows have the day name and subjects.

Solution

<html>
<head>
<title>Timetable</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Class Timetable</th>
</tr>
<tr>
<th>Day</th>
<th>Period 1</th>
<th>Period 2</th>
</tr>
<tr>
<td>Sat</td>
<td>Math</td>
<td>Physics</td>
</tr>
<tr>
<td>Sun</td>
<td>English</td>
<td>Chemistry</td>
</tr>
<tr>
<td>Mon</td>
<td>Biology</td>
<td>ICT</td>
</tr>
</table>
</body>
</html>

Exercise 8: Table with all common attributes

Problem
Create a table that uses bgcolor, align, width, height, cellpadding, and cellspacing
together.

How to think

Just put all the attributes inside <table> at once. The order of attributes doesn't
matter.

Solution

<html>
<head>
<title>Full Attribute Table</title>
</head>
<body>
<table border="1" width="400" height="150"
cellpadding="5" cellspacing="3"
bgcolor="lightyellow" align="center">
<tr>
<th align="center" bgcolor="lightblue">Name</th>
<th align="center" bgcolor="lightblue">Score</th>
</tr>
<tr>
<td align="left">Alice</td>
<td align="right">95</td>
</tr>
<tr>
<td align="left" valign="top">Bob</td>
<td align="right" valign="bottom">87</td>
</tr>
</table>
</body>
</html>

Topic 5: Hyperlinks and Images

Tags you will use in this topic

• <a href="url"> ... </a> — creates a clickable link


• <img src="file" alt="text"> — shows an image

Link attributes: - href="[Link]" — where the link goes (can be a file or full
URL) - target="_blank" — opens link in a new tab - name="top" — marks a position
on the page (bookmark)
Image attributes: - src="[Link]" — the image file name or path -
alt="description" — text shown if image doesn't load - width="100" — image width
in pixels - height="50" — image height in pixels - border="2" — border around the
image - align="left" or "right" — text flows around the image

Exercise 1: Simple hyperlink

Problem

Create a link that says "Visit Google" and opens [Link] Make it
open in a new tab.

How to think

Step 1: <a href="[Link] creates the link.

Step 2: Add target="_blank" to open in a new tab.

Solution

<html>
<head>
<title>Hyperlink</title>
</head>
<body>
<a href="[Link] target="_blank">Visit Google</a>
</body>
</html>

Exercise 2: Link to another page in the same folder

Problem

Create a link that goes to "[Link]" in the same folder.

Solution

<html>
<head>
<title>Internal Link</title>
</head>
<body>
<a href="[Link]">About Us</a>
</body>
</html>

Exercise 3: Image with attributes

Problem

Show an image called "[Link]". If it doesn't load, show the text "My Photo". Make
it 200 pixels wide.

Solution

<html>
<head>
<title>Image</title>
</head>
<body>
<img src="[Link]" alt="My Photo" width="200" border="1">
</body>
</html>

Exercise 4: Image as a link

Problem

Make the image clickable. Clicking it takes you to Google.

How to think

Step 1: Put the <img> tag inside the <a> tag.

Step 2: When you click the image, the browser follows the link.

Solution

<html>
<head>
<title>Image Link</title>
</head>
<body>
<a href="[Link]
<img src="[Link]" alt="Click to visit Google" width="100">
</a>
</body>
</html>
Exercise 5: Bookmark (named anchor)

Problem

Create a long page with links at the top that jump down to sections. At the bottom, a
"Back to Top" link.

How to think

Step 1: Use <a name="top"></a> to mark a location on the page.

Step 2: Link to it with <a href="#top">Back to Top</a> . The # means "same page,
go to this name".

Solution

<html>
<head>
<title>Bookmark</title>
</head>
<body>
<a name="top"></a>
<h1>Contents</h1>
<a href="#section1">Go to Section 1</a><br>
<a href="#section2">Go to Section 2</a><br><br>

<a name="section1"></a>
<h2>Section 1</h2>
<p>This is section 1. Lots of text here...</p>
<p>More text...</p>
<p>More text...</p>
<a href="#top">Back to Top</a>

<a name="section2"></a>
<h2>Section 2</h2>
<p>This is section 2.</p>
<a href="#top">Back to Top</a>
</body>
</html>

Topic 6: HTML Forms

Tags you will use in this topic

• <form> ... </form> — creates a form


• <input> — various input types (no closing tag)
• <select> ... </select> — drop-down list
• <option> ... </option> — an item in the drop-down
• <textarea> ... </textarea> — multi-line text box

Input types: - type="text" — a single-line text box - type="password" — hides


what you type - type="radio" — radio button (choose one) - type="checkbox" —
checkbox (choose many) - type="submit" — submit button - type="reset" — reset
button

Common attributes for form tags: - name="username" — identifies the input


(needed for form submission) - value="Alice" — default value - size="20" — width
of the text box in characters - maxlength="10" — maximum characters allowed -
checked — for radio/checkbox, makes it pre-selected - rows="4" — for textarea,
number of rows - cols="30" — for textarea, number of columns

Exercise 1: Login form with text and password

Problem

Create a login form with a username field and a password field. Add a submit button.

What it looks like

Username: [_______________]
Password: [_______________]
[Submit]

How to think

Step 1: <form> wraps everything. Add action and method if needed (for HSC, just a
basic form is fine).

Step 2: <input type="text"> for username. <input type="password"> for password.

Step 3: <input type="submit"> creates a submit button.

Step 4: Use <br> to put each field on a new line.

Solution

<html>
<head>
<title>Login Form</title>
</head>
<body>
<form>
Username: <input type="text" name="username"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Login">
</form>
</body>
</html>

Exercise 2: Radio buttons (choose one)

Problem

Create a form asking for gender with two radio buttons: Male and Female. Make
Female selected by default.

What it looks like

Gender: ○ Male ● Female

How to think

Step 1: Radio buttons with the same name work as a group — you can only select
one.

Step 2: Add checked to make Female the default.

Solution

<html>
<head>
<title>Radio Buttons</title>
</head>
<body>
<form>
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female" checked> Female
</form>
</body>
</html>

Exercise 3: Checkboxes (choose many)

Problem
Create a form asking which subjects you like. Options: Math, Physics, ICT. ICT is
checked by default.

What it looks like

Subjects you like:


☐ Math ☐ Physics ☑ ICT

Solution

<html>
<head>
<title>Checkboxes</title>
</head>
<body>
<form>
Subjects you like:<br>
<input type="checkbox" name="subject" value="math"> Math
<input type="checkbox" name="subject" value="physics"> Physics
<input type="checkbox" name="subject" value="ict" checked> ICT
</form>
</body>
</html>

Exercise 4: Drop-down list (select / option)

Problem

Create a drop-down to select a city: Dhaka, Chittagong, Rajshahi, Khulna. Make


Chittagong selected by default.

What it looks like

City: [Chittagong ▼]
| Dhaka |
| Chittagong |
| Rajshahi |
| Khulna |

How to think

Step 1: <select name="city"> starts the drop-down, </select> ends it.

Step 2: Each option is <option value="dhaka">Dhaka</option> .

Step 3: Add selected to the option you want as default.


Solution

<html>
<head>
<title>Drop-down List</title>
</head>
<body>
<form>
City:
<select name="city">
<option value="dhaka">Dhaka</option>
<option value="chittagong" selected>Chittagong</option>
<option value="rajshahi">Rajshahi</option>
<option value="khulna">Khulna</option>
</select>
</form>
</body>
</html>

Exercise 5: Textarea (multi-line text)

Problem

Create a form with a textarea for writing comments. It should be 4 rows tall and 30
columns wide.

What it looks like

Comments:
┌──────────────────────────────┐
│ │
│ │
│ │
│ │
└──────────────────────────────┘

Solution

<html>
<head>
<title>Textarea</title>
</head>
<body>
<form>
Comments:<br>
<textarea name="comments" rows="4" cols="30"></textarea>
</form>
</body>
</html>

Exercise 6: Full form with reset button

Problem

Create a complete form with: name (text), password, gender (radio), city (select),
and both submit and reset buttons.

What it looks like

Name: [_______________]
Password: [_______________]
Gender: ○ Male ● Female
City: [Dhaka ▼]
[Submit] [Reset]

How to think

Step 1: Add all the inputs together.

Step 2: <input type="reset"> clears the form back to default values.

Solution

<html>
<head>
<title>Full Form</title>
</head>
<body>
<form>
Name: <input type="text" name="name"><br>
Password: <input type="password" name="password"><br>
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female" checked> Female
<br>
City:
<select name="city">
<option value="dhaka">Dhaka</option>
<option value="chittagong">Chittagong</option>
<option value="rajshahi">Rajshahi</option>
</select>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

Topic 7: Marquee and Other Common


Tags

Tags you will use in this topic

• <marquee> ... </marquee> — scrolling text


• <pre> ... </pre> — preformatted text (keeps spaces and line breaks)
• <!-- comment --> — HTML comment (not visible on page)

Marquee attributes: - direction="left" or "right" or "up" or "down" — scroll


direction - behavior="scroll" or "slide" or "alternate" — how it moves -
bgcolor="yellow" — background color - width="300" — width of the marquee area -
height="50" — height of the marquee area

Exercise 1: Scrolling text with marquee

Problem

Show "Welcome to my site!" scrolling from right to left. Make the background yellow.

How to think

Step 1: <marquee> makes text scroll. Default direction is "right to left".

Step 2: Add bgcolor="yellow" for background.

Solution

<html>
<head>
<title>Marquee</title>
</head>
<body>
<marquee bgcolor="yellow">Welcome to my site!</marquee>
</body>
</html>
Exercise 2: Marquee with different directions

Problem

Create three marquees: one scrolls left, one scrolls right, one bounces (alternate).

Solution

<html>
<head>
<title>Marquee Directions</title>
</head>
<body>
<marquee direction="left">Scrolling left</marquee>
<marquee direction="right">Scrolling right</marquee>
<marquee behavior="alternate">Bouncing back and forth</marquee>
</body>
</html>

Topic 8: Putting It All Together —


Exam-Style Questions

Exercise 1: Create a full webpage with heading, list, table, link,


and image

Problem

Build a single page about your school. Include: 1. A heading: "My School" 2. An
unordered list of 3 facilities 3. A table with subjects and teachers 4. A link to the
school website 5. An image of the school logo

Solution

<html>
<head>
<title>My School</title>
</head>
<body bgcolor="lightyellow">
<h1 align="center">My School</h1>
<hr>
<h3>Facilities:</h3>
<ul type="square">
<li>Computer Lab</li>
<li>Library</li>
<li>Playground</li>
</ul>

<h3>Subjects and Teachers:</h3>


<table border="1" cellpadding="5">
<tr>
<th>Subject</th>
<th>Teacher</th>
</tr>
<tr>
<td>ICT</td>
<td>Mr. Rahman</td>
</tr>
<tr>
<td>Math</td>
<td>Mrs. Sultana</td>
</tr>
</table>

<br>
<img src="school_logo.jpg" alt="School Logo" width="100"><br>

<a href="[Link] our website</a>


</body>
</html>

Exercise 2: Create a registration form

Problem

Create a student registration form with: - Full Name (text) - Roll Number (text) - Class
(select: Six, Seven, Eight, Nine, Ten) - Gender (radio: Male, Female) - Subjects
(checkbox: Bangla, English, Math, ICT) - Comments (textarea) - Submit and Reset
buttons

Solution

<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h2 align="center">Student Registration</h2>
<form>
Full Name: <input type="text" name="name"><br>
Roll Number: <input type="text" name="roll"><br>
Class:
<select name="class">
<option value="six">Six</option>
<option value="seven">Seven</option>
<option value="eight">Eight</option>
<option value="nine">Nine</option>
<option value="ten">Ten</option>
</select>
<br>
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<br>
Subjects:
<input type="checkbox" name="sub" value="bangla"> Bangla
<input type="checkbox" name="sub" value="english"> English
<input type="checkbox" name="sub" value="math"> Math
<input type="checkbox" name="sub" value="ict"> ICT
<br>
Comments:<br>
<textarea name="comments" rows="3" cols="40"></textarea>
<br>
<input type="submit" value="Register">
<input type="reset" value="Clear">
</form>
</body>
</html>

Important Theory Definitions (For


HSC Written Exam)

What is a Website?

A collection of web pages stored on the same server under the same domain name.

What is a Web Page?

A document written in HTML that can be displayed by a web browser.


What is a Home Page?

The first page of a website that opens when you visit the domain. Usually named
[Link] .

What is a Browser?

Software used to access and display websites. Examples: Google Chrome, Mozilla
Firefox, Microsoft Edge, Brave.

What is a Search Engine?

Software that searches the internet and finds information. Examples: Google, Yahoo,
Bing, DuckDuckGo.

What is a Web Portal?

A website that provides multiple important links and services in one place. Example:
[Link].

What is a Domain Name?

The unique text name of a website (e.g., [Link] , [Link] ). Easier to


remember than IP addresses.

What is an IP Address?

A unique numeric address of every device connected to the internet. - IPv4: 32-bit,
written as 4 numbers (e.g., [Link]). Total possible: 2^32. - IPv6: 128-bit,
written in hexadecimal. Total possible: 2^128.

What is DNS (Domain Name System)?

A server that converts domain names into IP addresses. When you type [Link] ,
DNS finds its IP address so your browser can load the page.
What is URL?

Uniform Resource Locator. The full address of a resource on the internet (e.g.,
[Link] ).

What is HTML?

HyperText Markup Language. The standard language used to create web pages.

What is CSS?

Cascading Style Sheets. Used to style and design web pages (colors, fonts, layout).

Static vs Dynamic Website

Static Website Dynamic Website

Content does not change Content changes based on user interaction

Only HTML + CSS used Uses server-side languages (PHP, Python)

Same for all users Different for different users

Faster to load Slower (needs database queries)

Web Structure Types

Type Description Example

Linear Pages in a straight line. Previous/Next


Tutorial slides
Structure links only.

Tree Main page branches into categories, E-commerce


Structure which branch into subcategories. site

Network
Any page can link to any other page. Wikipedia
Structure
Type Description Example

Mixed Most modern


Combination of two or more structures.
Structure websites

HTTP and HTTPS

• HTTP: HyperText Transfer Protocol. Used to transfer data between web server
and browser.
• HTTPS: Secure version of HTTP. Data is encrypted.

HTML Tag Cheat Sheet

Basic Structure

Tag Purpose Example

<html> Root of the page <html>...

<head> Holds title and meta <head><title>...</title></head>

<title> Browser tab text <title>My Page</title>

<body> Visible content <body bgcolor="white">...

Text Formatting

Tag Purpose

<h1> to <h6> Headings (1=biggest, 6=smallest)

<b> Bold

<i> Italic

<u> Underline
Tag Purpose

<strong> Bold (recommended)

<em> Italic (recommended)

<p> Paragraph

<br> Line break

<hr> Horizontal line

<font> Change face, size, color

<sub> Subscript (text below the line)

<sup> Superscript (text above the line)

<pre> Keep spaces and line breaks

Other Tags

Tag Purpose

<marquee> Scrolling text

<!-- comment --> HTML comment

Lists

Tag Purpose

<ul> Unordered list (bullets)

<ol> Ordered list (numbers)

<li> List item


Tables

Tag Purpose

<table> Create a table

<tr> Table row

<td> Table cell

<th> Table heading cell

colspan Merge columns

rowspan Merge rows

Links & Images

Tag Purpose Attribute

<a> Hyperlink href , target , name

<img> Image src , alt , width , height , border

Forms

Tag Purpose

<form> Create a form

<input type="text"> Text box

<input type="password"> Password field

<input type="radio"> Radio button (choose one)

<input type="checkbox"> Checkbox (choose many)

<input type="submit"> Submit button

<input type="reset"> Reset button


Tag Purpose

<select> Drop-down list

<option> Drop-down item

<textarea> Multi-line text area

Common Attributes (can be used on many tags)

Attribute Purpose Example

align Horizontal alignment align="center"

valign Vertical alignment valign="top"

bgcolor Background color bgcolor="yellow"

width Width in pixels width="200"

height Height in pixels height="100"

border Border thickness border="1"

cellpadding Space inside cells cellpadding="5"

cellspacing Space between cells cellspacing="3"

Common Color Names

Color Color

red blue

green yellow

orange purple

white black

gray pink
Color Color

lightblue lightyellow

lightgreen lightgray

Special Characters

Code Shows

&nbsp; A space (keeps empty cell borders)

&lt; <

&gt; >

&amp; &

Memory Aids

Table structure order: Table → Row → Data. Start from the outside and go in.

<table> (first)
<tr> (second)
<td> (third)

Nesting rule: Last opened tag = first closed.

<b><i><u>text</u></i></b> ✓
<b><i><u>text</b></i></u> ✗ WRONG

Empty cell: Use &nbsp; inside <td> to keep borders visible.

<td>&nbsp;</td> <!-- shows border -->


<td></td> <!-- might not show border -->

Attributes go inside the opening tag:

<font size="5" color="red" face="Arial">text</font>


<!-- NOT: <font> size="5" ... -->

You might also like