</> WebClass
Log in Sign up
Chapter 2 lab Chapter 3 lab Chapter 4 lab Chapter 5 lab Chapter 6 lab Chapter 7 lab Chapter 8 lab Chapter 9 lab Chapter 10 lab Chapter 12 lab Chapter 13 lab
Chapter 2 · Lab

Lab 1: Introduction to HTML

A hands-on lab where you build your first HTML pages: structure, text, images, links, tables, lists and forms. Work through each task in the editor below and tick it off as you go.

Learning outcomes

  • Describe the concept and structure of HTML
  • Write HTML pages using basic tags: formatting, links, tables, lists, forms and images
  • Identify the components of a simple web application
  • Apply attributes such as alt, width, height, border, bgcolor, colspan and rowspan

Your progress

Tasks completed 0/5

Log in to save your lab progress. Log in

1

Task 1 — Create your first HTML page

  1. Create a folder for this lab and name it after yourself. Do not use spaces in folder or file names.
  2. Open a text editor such as Notepad, Notepad++ or Sublime Text.
  3. Key in the code below and save the file as mysite.html. In Notepad, choose All Files in the "Save as type" dropdown so it does not become mysite.html.txt.
  4. Open mysite.html in a web browser (right-click → Open with → Firefox or Chrome) to see the result.

Every HTML5 document starts with <!DOCTYPE html>. The visible content lives between <body> and </body>, and the text between the <title> tags appears in the browser tab — not in the page itself.

Code

index.html 
<!DOCTYPE html>
<html>
<head>
  <title>My first website</title>
</head>
<body>
  <h1>This is the main title</h1>
  <h2>This is the subtitle</h2>
  <p>Assalamu'alaikum. Hello World. This is my first page.</p>
  <hr>
  <p>This is my first paragraph.</p>
  <p>This is my second paragraph.</p>
</body>
</html>

Try it

index.html
2

Task 2 — Add an image

  1. Make sure an image file (e.g. cute-cat.jpg) is inside your working folder.
  2. Add the <img> element to your page and set its attributes.
  3. Save the file and refresh your browser.

The <img> element uses three important attributes:

  • src — the path to the image file.
  • alt — alternative text shown when the image is missing, and read by screen readers.
  • width / height — the size of the image in pixels.

The example below uses an inline placeholder image so it renders in the editor without needing a real file. Try changing the alt text and the width.

Code

index.html 
<h1>This is the main title</h1>

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%23dbe7f6'/%3E%3Ctext x='60' y='66' font-family='sans-serif' font-size='16' fill='%230b1f3a' text-anchor='middle'%3ECat%3C/text%3E%3C/svg%3E"
     alt="A cute cat"
     width="120"
     height="120">

<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>

Try it

index.html
4

Task 4 — Create a table

Tables have rows and columns. Use <table> for the table, <tr> for rows and <td> for columns (cells). A column is inside a row, and every row should have the same number of columns.

Attribute / elementPurpose
borderDraws a border around the table (e.g. border="1")
widthSets the table width in pixels or percent
bgcolorBackground colour of a cell
<th>Header cell — a title for a column or row
colspanMakes a cell span across several columns
rowspanMakes a cell span across several rows

Build the staff extension table below, then experiment with colspan and rowspan.

Code

index.html 
<table border="1" width="500">
  <tr>
    <th>Name</th>
    <th>Extension Number</th>
  </tr>
  <tr>
    <td>Kamal Azaini</td>
    <td>3021</td>
  </tr>
  <tr>
    <td>Suraya Ahmad</td>
    <td>3050</td>
  </tr>
  <tr>
    <td>Mazuin Zaini</td>
    <td>3040</td>
  </tr>
  <tr>
    <td colspan="2">End of staff list</td>
  </tr>
</table>

<br>

<table border="1">
  <tr>
    <td rowspan="2" bgcolor="yellow">Production</td>
    <td>Muhaimin</td>
    <td>632</td>
  </tr>
  <tr>
    <td>Muadzmin</td>
    <td>259</td>
  </tr>
  <tr>
    <td>Izzat</td>
    <td>365</td>
  </tr>
</table>

Try it

index.html
5

Task 5 — Lists & forms

Navigation menus are usually built with lists. Use <ul> for an unordered (bulleted) list and <ol> for an ordered (numbered) list. Each item uses <li>.

Forms collect input from users. Start with a <form> tag, then nest form objects inside it:

  • <input type="text"> — a text field
  • <input type="radio"> — radio buttons (choose one)
  • <input type="checkbox"> — checkboxes (choose many)
  • <textarea> — a multi-line text box
  • <button> — a submit button

Try changing the unordered list into an ordered list, then add a new form field.

Code

index.html 
<h2>Green Shoppers</h2>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<h3>Steps to go green</h3>
<ol>
  <li>Reduce single-use plastic</li>
  <li>Recycle at home</li>
  <li>Support local groups</li>
</ol>

<h3>Please send us your feedback</h3>
<form>
  <p>
    <label>Name: <input type="text" name="name"></label>
  </p>
  <p>
    Gender:
    <label><input type="radio" name="gender" value="male"> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
  </p>
  <p>
    Rate our site:
    <label><input type="checkbox" name="good" value="good"> Good</label>
    <label><input type="checkbox" name="average" value="average"> Average</label>
    <label><input type="checkbox" name="poor" value="poor"> Poor</label>
  </p>
  <p>
    <textarea name="feedback" rows="4" cols="40" placeholder="Your feedback..."></textarea>
  </p>
  <button type="submit">Submit</button>
</form>

Try it

index.html