Web Design Revision Notes (Simplified)
Chapter 1: The World Wide Web (WWW)
Internet: A global network of interconnected computers using TCP/IP.
WWW: A service on the internet that allows access to multimedia documents through
web browsers.
Web Browser: Software used to view web pages (e.g., Chrome, Firefox).
Web Server: Stores and delivers web pages.
Web Client: A device or software requesting and displaying web content.
DNS Server: Converts website names (e.g., google.com) to IP addresses.
Common Internet Services:
Email, FTP (File Transfer), Telnet (remote login), IRC (chat), Usenet (discussion
groups)
Uses of the Internet:
Communication, business, education, entertainment, shopping, research.
Intranet: Private internal network using internet technologies.
Extranet: An intranet extended to authorized external users (e.g., suppliers).
Chapter 2: Basics of Web Design
Content: Text, images, videos, and links in a document.
Hyperlink: Clickable text or images that lead to another page or section.
Hypertext: Text containing links.
Hypermedia: Combination of text, images, video, etc., with hyperlinks.
Broken Link: A link that doesn't work.
URL: Address of a web resource (e.g., https://example.com).
Web Design Tools:
Text editors: Notepad, WordPad
WYSIWYG editors: FrontPage, Dreamweaver
Graphics software: Photoshop, Paint
Factors to Consider When Designing a Website:
Content quality, presentation, relevance, usability, loading time, navigation, user
interest
Modern Web Design Principles:
User-centered design, functionality, compatibility, quick loading, simple navigation,
aesthetic balance.
Chapter 3: Introduction to HTML
HTML: Hypertext Markup Language, used to create web pages.
Tags: Enclosed in <> (e.g., )
Container Tags: Have opening and closing tags (e.g., )
Empty Tags: Do not need a closing tag (e.g., )
Basic Structure:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Common Tags:
Headings: to
Paragraphs:
Line break:
Horizontal rule:
Body Attributes:
bgcolor, background, text, link, alink, vlink
Chapter 4: Text Formatting in HTML
Logical Styles:
,,,,,
Physical Styles:
,,,,
: superscript, : subscript
Font Tag:
<font face="Arial" size="3" color="red">Text</font>
Alignment:
Special Characters:
< (<), > (>), & (&), © (©), € (€)
Marquee (scrolling text):
<marquee behavior="scroll" direction="left">Welcome!</marquee>
Chapter 5: HTML Lists
Unordered List (bullets):
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Ordered List (numbers):
<ol type="1">
<li>Step 1</li>
<li>Step 2</li>
</ol>
Definition List:
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages.</dd>
</dl>
Chapter 6: HTML Links
Basic Link:
<a href="https://example.com">Visit Site</a>
Internal Links (same page):
<a href="#top">Go to top</a>
<a name="top"></a>
Email Link:
Link Targets:
_blank: new tab
_self: same window
Chapter 7: Images in HTML
Insert Image:
<img src="image.jpg" alt="description" width="300" height="200">
Image Attributes:
src: path to image
alt: alternate text
width, height: size in pixels
align, border, hspace, vspace
Image as Link:
<a href="page.html"><img src="button.jpg"></a>
Image Map:
Used for clickable areas within a single image.
Chapter 8: Backgrounds & Sound
Background Color:
<body bgcolor="lightblue">
Background Image:
<body background="bg.jpg">
Background Sound (IE only):
<bgsound src="sound.wav" loop="infinite">
Embed Multimedia:
<embed src="audio.mp3" autoplay="true" hidden="false">
Chapter 9: HTML Tables
Basic Table:
<table border="1">
<tr><th>Item</th><th>Price</th></tr>
<tr><td>Pen</td><td>$1</td></tr>
</table>
Attributes:
border, cellspacing, cellpadding, width, height, bgcolor
colspan: merge columns, rowspan: merge rows
Chapter 10: HTML Frames
Frameset Example:
<frameset cols="50%,50%">
<frame src="left.html">
<frame src="right.html">
</frameset>
Use :
Content to show if browser does not support frames.
Chapter 11: HTML Forms
Purpose:
Used to collect user input like text, selections, and button clicks.
Basic Example:
<form action="submit.php" method="post">
Name: <input type="text" name="username"><br>
Email: <input type="email" name="email"><br>
Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br>
Hobbies:
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="sports"> Sports<br>
<input type="submit" value="Submit">
<input type="reset" value="Clear">
</form>
Form Elements:
<input>: text, password, checkbox, radio, submit, reset
<textarea>: multi-line input
<select> and <option>: dropdowns
<label>: labels for input fields
Attributes:
action: where to send form data
method: GET or POST
name, value, placeholder, required
This guide offers a full summary of the essential concepts from the provided web design
notes. Let me know if you'd like a printable version or a simplified version for a handout or
slideshow.
