Unit 1: Building a website end to end
Web Technologies Laboratory notes · PTU syllabus (UGSEC2506)
On this page
Unit summary
In this lab you build web pages step by step, ending with a complete institute website with JavaScript validation. The exercises cover text formatting, lists, tables, links, media, frames, CSS and form validation.
After this unit you can
- Build pages using formatting, lists, tables and links
- Embed audio and video and create multi-frame layouts
- Style pages using internal and external style sheets
- Validate login and registration forms with JavaScript
PTU syllabus topics
- Simple HTML tag demonstration
- book index page
- college letterhead page
- in-page hyperlink navigation
- text formatting for a letter
- department timetable
- table-based page layout
- embedding audio/video
- multi-frame page layout
- student bio-data page
- hospital front page with style sheets
- multi-page display
- JavaScript-validated login form
- JavaScript-validated registration form
- a complete institute/department/tutorial website with JavaScript validation
- 1Plan pages
Home, departments, tutorials, contact
- 2Structure with HTML
Headings, lists, tables, links
- 3Style with CSS
Consistent fonts, colours and layout
- 4Add JavaScript
Validate login and registration forms
- 5Test
Different browsers and screen sizes
Topic 1
Page-building exercises
| Exercise | Key tags |
|---|---|
| Book index page | <ol>, nested lists, <a> links to chapters |
| College letterhead | <h1>, <img>, <hr>, <address>, CSS for layout |
| In-page navigation | id attributes and <a href="#section"> |
| Formatted letter | <p>, <b>, <i>, <u>, <br>, alignment |
| Department timetable | <table>, <th>, colspan, rowspan, <caption> |
| Student bio-data | Table or definition list with photo |
Topic 2
Media and layout
- Audio:
<audio src="song.mp3" controls></audio> - Video:
<video src="tour.mp4" width="480" controls></video> - Multi-frame page: a logo frame at the top, a menu on the left and content on the right — built with
<frameset>in old HTML, or with<iframe>and CSS layout today.
Topic 3
Styling with CSS: the hospital front page
html<link rel="stylesheet" href="hospital.css">cssbody { font-family: Arial, sans-serif; margin: 0; }
header { background: #0b6b3a; color: white; padding: 20px; }
nav a { color: white; margin-right: 15px; text-decoration: none; }
.card { border: 1px solid #ddd; border-radius: 8px; padding: 15px; }Topic 4
JavaScript validation
- 1
Read values
document.forms["reg"]
- 2
Check required fields
Not empty
- 3
Check formats
Email contains @ and a dot; phone has 10 digits
- 4
Check passwords
Length ≥ 8 and both entries match
- 5
Show errors
alert or a message next to the field
- 6
Return true or false
javascriptfunction validateReg() {
const f = document.forms["reg"];
if (!/^[0-9]{10}$/.test(f.phone.value)) { alert("Enter a 10-digit phone"); return false; }
if (f.pwd.value !== f.cpwd.value) { alert("Passwords do not match"); return false; }
return true;
}Exam tip
The final project — an institute website with department pages, tutorial links and validated forms — usually carries the most marks. Keep a consistent navigation bar and one external CSS file for all pages.
Key terms
- controls attribute
- Shows play/pause buttons on audio and video
- External style sheet
- A .css file shared by many pages
- Regular expression
- A pattern used to check input formats
- Form validation
- Checking input before it is submitted
Quick revision
- Use id and #id for in-page links.
- audio/video need the controls attribute.
- One external CSS file keeps the whole site consistent.
- Return false from onsubmit to block invalid forms.
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.How do you embed a video in an HTML page?
- Q2.How do you link an external style sheet?
- Q3.What does the regular expression ^[0-9]{10}$ check?
- Q4.Why is client-side validation useful?
Long-answer questions
- Q1.Create a department timetable using tables with colspan and rowspan.
- Q2.Design a hospital front page using an external style sheet.
- Q3.Write a registration form with JavaScript validation for name, email, phone and password.
Stuck on this unit?
Message SBS on WhatsApp for help with Web Technologies Laboratory, or to ask about studying BCA at Synetic.